/* ==========================================================================
   COLEGIO SALZILLO — AWWWARDS LAYER v2
   Re-skin visual: estética Kidora + identidad Salzillo (#25347A / #0082BE)
   Se carga después de style.css / animations.css / bridge.css y sobreescribe.
   ========================================================================== */

:root {
  /* Pasteles de marca (derivados de los azules Salzillo + calidez Kidora) */
  --pastel-sky:   #DCEFFA;
  --pastel-lav:   #E7EAF9;
  --pastel-mint:  #DFF3EA;
  --pastel-sand:  #FDEEC9;
  --pastel-rose:  #FBE7E0;
  --ink:          #182354;
  --paper:        #FAF8F0;
  --paper-warm:   #F5F1E4;
  --radius-card:  1.5rem;
  --shadow-float: 0 24px 60px -18px rgba(37, 52, 122, 0.22);
  --shadow-card:  0 6px 24px -8px rgba(37, 52, 122, 0.14);
}

/* ── BASE ─────────────────────────────────────────────────────────────────── */
html { scroll-behavior: smooth; }
body {
  background: var(--paper);
  color: var(--ink);
}
::selection { background: #FFB300; color: #182354; }

/* Scrollbar */
::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: var(--paper); }
::-webkit-scrollbar-thumb {
  background: #25347A;
  border-radius: 8px;
  border: 3px solid var(--paper);
}

/* Grain sutil para textura premium */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9990;
  pointer-events: none;
  opacity: 0.028;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── CURSOR PERSONALIZADO (desktop) ──────────────────────────────────────── */
.cursor-dot, .cursor-ring {
  position: fixed;
  top: 0; left: 0;
  z-index: 99990;
  pointer-events: none;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  will-change: transform;
}
.cursor-dot {
  width: 8px; height: 8px;
  background: #0082BE;
}
.cursor-ring {
  width: 38px; height: 38px;
  border: 1.5px solid rgba(37, 52, 122, 0.45);
  transition: width 0.25s ease, height 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}
.cursor-ring.is-hover {
  width: 64px; height: 64px;
  background: rgba(255, 179, 0, 0.15);
  border-color: #FFB300;
}
@media (hover: none), (pointer: coarse) {
  .cursor-dot, .cursor-ring { display: none; }
}

/* ── NAVBAR: pill flotante glass ─────────────────────────────────────────── */
.navbar,
.navbar.scrolled,
.navbar--scrolled {
  top: 14px;
  left: 0; right: 0;
  height: auto !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  box-shadow: none !important;
}
.navbar__container {
  max-width: 1280px;
  margin-inline: auto;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(37, 52, 122, 0.08);
  border-radius: 999px;
  box-shadow: 0 12px 40px -12px rgba(37, 52, 122, 0.18);
  height: 82px;
  padding-inline: 16px 12px;
  transition: box-shadow 0.4s ease, background 0.4s ease;
}
.navbar--scrolled .navbar__container,
.navbar.scrolled .navbar__container {
  box-shadow: 0 16px 48px -14px rgba(37, 52, 122, 0.3);
  background: rgba(255, 255, 255, 0.96);
}
.navbar--hidden { transform: translateY(-120%); }
.navbar, .navbar--hidden { transition: transform 0.45s cubic-bezier(0.76, 0, 0.24, 1); }

.navbar__logo { padding-left: 12px; }
.navbar__logo-img { height: 52px; width: auto; display: block; }
.navbar.scrolled .navbar__logo-img,
.navbar--scrolled .navbar__logo-img { height: 46px; }
.navbar__logo-text { display: none !important; }

.navbar__link,
.navbar__link--dropdown {
  color: var(--ink) !important;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 10px 16px;
  border-radius: 999px;
  transition: background 0.25s ease, color 0.25s ease;
}
.navbar__link:hover,
.navbar__item.is-open > .navbar__link--dropdown {
  background: var(--pastel-sky);
  color: #0082BE !important;
}
.navbar__cta {
  border-radius: 999px !important;
  background: #25347A !important;
  color: #fff !important;
  padding: 13px 24px !important;
  font-weight: 700;
  overflow: hidden;
  position: relative;
}
.navbar__cta:hover { background: #0082BE !important; }

/* ── MEGA MENU visual ─────────────────────────────────────────────────────── */
.navbar__megamenu,
.navbar__dropdown {
  border-radius: 24px;
  border: 1px solid rgba(37, 52, 122, 0.08);
  box-shadow: 0 32px 80px -20px rgba(24, 35, 84, 0.35);
  overflow: hidden;
}
.navbar__megamenu-inner { gap: 8px; }
.navbar__megamenu-link {
  border-radius: 14px;
  transition: background 0.2s ease, transform 0.2s ease;
}
.navbar__megamenu-link:hover {
  background: var(--pastel-sky);
  transform: translateX(4px);
}
/* Feedback diseñador: sin iconos; etapas en negrita azul oscuro, programas normal azul claro */
.navbar__megamenu-link svg { display: none !important; }
.navbar__megamenu-col:nth-child(1) .navbar__megamenu-link {
  font-weight: 700;
  color: #25347A;
}
.navbar__megamenu-col:nth-child(2) .navbar__megamenu-link {
  font-weight: 500;
  color: #0082BE;
}
.navbar__megamenu-col:nth-child(1) .navbar__megamenu-link:hover,
.navbar__megamenu-col:nth-child(2) .navbar__megamenu-link:hover {
  color: #182354;
}
.navbar__megamenu-link .navbar__megamenu-meta {
  font-weight: 400;
  color: rgba(24, 35, 84, 0.5);
}
.navbar__megamenu-featured {
  background: linear-gradient(150deg, #25347A 0%, #0082BE 130%);
  border-radius: 18px;
  position: relative;
  overflow: hidden;
}
.navbar__megamenu-featured::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../assets/real/cultura-pensamiento.jpg") center/cover;
  opacity: 0.18;
  mix-blend-mode: luminosity;
}
.navbar__megamenu-featured > * { position: relative; }

/* Tarjetas visuales dentro del mega menú */
.megamenu-visual {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 14px;
}
.megamenu-visual__card {
  position: relative;
  display: block;
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  isolation: isolate;
}
.megamenu-visual__card img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.megamenu-visual__card:hover img { transform: scale(1.08); }
.megamenu-visual__card span {
  position: absolute;
  left: 10px; right: 10px; bottom: 8px;
  z-index: 2;
  color: #fff;
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 700;
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
.megamenu-visual__card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(24,35,84,0.75) 100%);
}

/* ── BOTONES pill Kidora ──────────────────────────────────────────────────── */
.btn {
  border-radius: 999px !important;
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: 0;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease, background 0.3s ease, color 0.3s ease;
}
.btn:hover { transform: translateY(-3px); }
.btn:active { transform: translateY(-1px) scale(0.98); }
.btn--primary, .btn--hero-primary, .btn--cta-primary {
  background: #FFB300 !important;
  color: #182354 !important;
  box-shadow: 0 10px 30px -8px rgba(255, 179, 0, 0.55);
}
.btn--primary:hover, .btn--hero-primary:hover, .btn--cta-primary:hover {
  background: #FFC53D !important;
  box-shadow: 0 16px 40px -10px rgba(255, 179, 0, 0.65);
}
.btn--secondary {
  background: #25347A !important;
  color: #fff !important;
}
.btn--secondary:hover { background: #0082BE !important; }
.btn--hero-outline, .btn--cta-outline {
  border: 1.5px solid rgba(37, 52, 122, 0.35) !important;
  color: var(--ink) !important;
  background: rgba(255, 255, 255, 0.6) !important;
}
.btn--hero-outline:hover, .btn--cta-outline:hover {
  background: #fff !important;
  border-color: #0082BE !important;
  color: #0082BE !important;
}
.btn .btn__arrow { transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); }
.btn:hover .btn__arrow { transform: translateX(5px); }

/* ── SECCIONES / TITULARES ────────────────────────────────────────────────── */
.section-tag {
  background: var(--pastel-sky);
  color: #0082BE;
  border-radius: 999px;
  padding: 8px 18px;
  font-weight: 800;
  letter-spacing: 0.12em;
  font-size: 0.75rem;
  border: none;
}
.section-tag--light { background: rgba(255,255,255,0.14); color: #FFC53D; }
.section-tag svg, .section-tag img { display: none !important; }
.section-title {
  color: var(--ink);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.08;
}
.section-title--light { color: #fff; }

/* ── HERO V2 (homepage) ───────────────────────────────────────────────────── */
.hero-v2 {
  position: relative;
  min-height: 50svh;
  display: flex;
  align-items: center;
  padding: clamp(7rem, 14vh, 10rem) 0 clamp(3rem, 6vh, 5rem);
  overflow: hidden;
}
.hero-v2__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-v2__bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
}
.hero-v2__video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
@media (prefers-reduced-motion: reduce) {
  .hero-v2__video { display: none; }
}
.hero-v2__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    105deg,
    rgba(37, 52, 122, 0.82) 0%,
    rgba(37, 52, 122, 0.60) 60%,
    rgba(37, 52, 122, 0.35) 100%
  );
}
.hero-v2__container {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1320px;
  margin-inline: auto;
  padding-inline: clamp(24px, 6vw, 80px);
  display: grid;
  grid-template-columns: 1fr;
}
.hero-v2__content {
  max-width: 620px;
}
.hero-v2__badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 999px;
  padding: 9px 20px 9px 12px;
  font-weight: 700;
  font-size: 0.85rem;
  color: #fff;
  margin-bottom: 1.6rem;
}
.hero-v2__badge-dot {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--pastel-sand);
  display: grid;
  place-items: center;
}
.hero-v2__title {
  font-family: var(--font-heading);
  font-size: clamp(2.8rem, 5.5vw, 4.5rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.035em;
  color: #ffffff;
  margin: 0 0 1.4rem;
}
.hero-v2__title .accent {
  color: #ffffff;
  position: relative;
  display: inline-block;
}
.hero-v2__title .accent svg {
  position: absolute;
  left: 0; right: 0; bottom: -0.18em;
  width: 100%; height: 0.28em;
}
.hero-v2__title .accent-2 { color: #FFB300; }
.hero-v2__subtitle {
  font-size: 1rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.80);
  max-width: 34rem;
  margin-bottom: 2.2rem;
}
.hero-v2__ctas { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.hero-v2__proof {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 2.4rem;
}
.hero-v2__avatars { display: flex; }
.hero-v2__avatars span {
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,0.5);
  margin-left: -10px;
  background: center/cover no-repeat;
  display: block;
}
.hero-v2__avatars span:first-child { margin-left: 0; }
.hero-v2__proof-text { font-size: 0.9rem; color: rgba(255,255,255,0.75); line-height: 1.4; }
.hero-v2__proof-text strong { color: #ffffff; }

.hero-v2__scroll { display: none; }
.hero-v2__scroll-line {
  width: 1.5px; height: 44px;
  background: rgba(255,255,255,0.2);
  position: relative;
  overflow: hidden;
}
.hero-v2__scroll-line::after {
  content: "";
  position: absolute;
  top: -50%; left: 0;
  width: 100%; height: 50%;
  background: #0082BE;
  animation: scrollDrop 1.8s cubic-bezier(0.76, 0, 0.24, 1) infinite;
}
@keyframes scrollDrop { to { top: 110%; } }

/* ── MARQUEE de píldoras con imágenes (Kidora) ───────────────────────────── */
.pill-marquee {
  padding: clamp(2.5rem, 5vw, 4rem) 0;
  overflow: hidden;
  background: transparent;
}
.pill-marquee__track {
  display: flex;
  width: max-content;
  gap: clamp(1.2rem, 2.5vw, 2.4rem);
  align-items: center;
  will-change: transform;
}
.pill-marquee__item {
  display: flex;
  align-items: center;
  gap: clamp(1.2rem, 2.5vw, 2.4rem);
  flex-shrink: 0;
}
.marquee-section {
  background: #25347A;
  overflow: hidden;
}
.pill-marquee__text {
  font-family: var(--font-heading);
  font-size: clamp(1.8rem, 3.6vw, 3.1rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #ffffff;
  white-space: nowrap;
}
.pill-marquee__text--outline {
  color: var(--accent, #FFB300);
  -webkit-text-stroke: 0;
}
.marquee-section .marquee {
  background: rgba(0,0,0,0.15);
  margin-block: 0;
}
.pill-marquee__img {
  width: clamp(90px, 10vw, 150px);
  height: clamp(52px, 5.6vw, 84px);
  border-radius: 999px;
  overflow: hidden;
  flex-shrink: 0;
  border: 3px solid #fff;
  box-shadow: var(--shadow-card);
}
.pill-marquee__img img {
  width: 100%; height: 100%;
  object-fit: cover;
}

/* Marquee azul existente */
.marquee {
  background: #25347A;
  border-radius: 0;
  transform: rotate(-1.2deg) scale(1.02);
  margin-block: 1rem;
  box-shadow: 0 20px 50px -20px rgba(24, 35, 84, 0.4);
}

/* ── FEATURE CARDS pastel ─────────────────────────────────────────────────── */
.feature-card {
  background: #fff;
  border-radius: var(--radius-card);
  border: 1px solid rgba(37, 52, 122, 0.07);
  box-shadow: none;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease;
}
.feature-card:hover {
  transform: translateY(-10px) rotate(-0.5deg);
  box-shadow: var(--shadow-float);
}
.feature-card__icon {
  border-radius: 18px;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.feature-card:hover .feature-card__icon { transform: rotate(-8deg) scale(1.12); }
.feature-card__icon--blue { background: var(--pastel-sky); color: #0082BE; }
.feature-card__icon--green { background: var(--pastel-mint); color: #0E9F6E; }
.feature-card__icon--yellow { background: var(--pastel-sand); color: #B47D00; }

/* Counters */
.counter__number {
  font-family: var(--font-heading);
  color: #0082BE;
  font-weight: 800;
}

/* ── PROGRAM CARDS – FlowArt stacking scroll ──────────────────────────────── */

/* Section: only top padding for header, no bottom */
.programs,
.programs__container {
  padding: 0 !important;
}
.programs {
  padding-bottom: clamp(60px, 8vw, 120px) !important;
}
/* Re-center section header */
.programs .section-header {
  max-width: 1280px;
  margin-inline: auto;
  padding: clamp(60px, 8vw, 120px) clamp(24px, 5vw, 80px) clamp(40px, 5vw, 80px);
}
.programs__cards {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  counter-reset: program-counter;
  padding-inline: clamp(16px, 3vw, 48px);
  padding-bottom: 0;
}

/* Full-screen cards — CSS sticky handles stacking, GSAP only does rotation */
.program-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-radius: clamp(16px, 2vw, 28px);
  overflow: visible;
  min-height: clamp(400px, 42vw, 560px);
  height: auto;
  border: none;
  counter-increment: program-counter;
  will-change: transform;
  transform-origin: top center;
  box-shadow: 0 24px 80px rgba(0,0,0,0.14);
  /* Sticky stacking — top set per-card by JS (peekOffset) */
  position: sticky;
  top: 88px;
}
.program-card:hover { transform: none; }

/* Contenido izquierda */
.program-card__inner {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(2.5rem, 5vw, 4.5rem);
  padding-bottom: clamp(3.5rem, 7vw, 6rem);
  order: 1;
  min-height: 0;
}
/* Foto derecha */
.program-card__media {
  order: 2;
  position: relative;
  overflow: hidden;
  border-radius: 0 clamp(16px, 2vw, 28px) clamp(16px, 2vw, 28px) 0;
  aspect-ratio: unset;
  min-height: 100%;
}
.program-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.program-card:hover .program-card__media img { transform: scale(1.04); }
.program-card__media-badge { display: none; }

/* Número con contador CSS */
.program-card__icon {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: rgba(255,255,255,0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
}
.program-card__icon::before {
  content: counter(program-counter, decimal-leading-zero);
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--ink, #25347A);
}
.program-card__icon svg { display: none; }

/* Contenido */
.program-card__content { display: flex; flex-direction: column; gap: 10px; }
.program-card__stage {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(37,52,122,0.7);
}
.program-card__title {
  font-size: clamp(2rem, 3.5vw, 3.2rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--ink, #25347A);
}
.program-card__text {
  font-size: clamp(0.95rem, 1.2vw, 1.1rem);
  line-height: 1.65;
  color: rgba(37,52,122,0.65);
  max-width: 46ch;
}
.program-card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  color: var(--ink, #25347A);
  margin-top: 4px;
}

/* Colores */
.program-card--cream  { background: var(--pastel-sand); }
.program-card--green  { background: var(--pastel-mint); }
.program-card--blue   { background: var(--pastel-sky);  }
.program-card--purple { background: var(--pastel-lav);  }
.program-card--dark   { background: #25347A; }
.program-card--dark .program-card__title,
.program-card--dark .program-card__stage,
.program-card--dark .program-card__text,
.program-card--dark .program-card__link { color: #fff; }
.program-card--dark .program-card__stage { opacity: 0.6; }
.program-card--dark .program-card__text  { opacity: 0.8; }
.program-card--dark .program-card__icon  { background: rgba(255,255,255,0.2); }
.program-card--dark .program-card__icon::before { color: #fff; }

@media (max-width: 768px) {
  .program-card { grid-template-columns: 1fr; }
  .program-card__media { order: 1; min-height: 240px; }
  .program-card__inner { order: 2; }
}

/* ── THINKING (cultura de pensamiento) ────────────────────────────────────── */
.thinking {
  background: #25347A;
  border-radius: clamp(24px, 4vw, 56px);
  margin-inline: clamp(8px, 1.5vw, 24px);
  position: relative;
  overflow: hidden;
}
.thinking::before {
  content: "";
  position: absolute;
  width: 500px; height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,130,190,0.25) 0%, transparent 70%);
  top: -200px; right: -150px;
}
.thinking .section-title { color: #fff; }
.thinking .section-tag { background: rgba(255,255,255,0.12); color: #FFC53D; }
.thinking__text { color: rgba(255,255,255,0.78) !important; }
.thinking__pill {
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 999px;
  color: #fff;
  transition: background 0.3s ease, transform 0.3s ease;
}
.thinking__pill:hover { background: rgba(255,255,255,0.16) !important; transform: translateY(-3px); }
.thinking__pill span { color: #fff; }
.thinking__image-wrapper { position: relative; }
.thinking__image {
  border-radius: 32px;
  overflow: hidden;
  border: 6px solid rgba(255,255,255,0.12);
  transform-style: preserve-3d;
  will-change: transform;
}
.thinking__image img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.thinking__badge {
  background: #FFB300;
  color: #182354;
  border-radius: 999px;
  font-weight: 800;
  box-shadow: 0 16px 40px -10px rgba(0,0,0,0.4);
}
.thinking .btn--secondary { background: #fff !important; color: #25347A !important; }
.thinking .btn--secondary:hover { background: #FFC53D !important; color: #182354 !important; }

/* ── VIDEO SECTION con foto parallax ─────────────────────────────────────── */
/* ── VIDEO SECTION — FULL CINEMA ── */
.video-section {
  position: relative;
  height: 100vh;
  min-height: 600px;
  border-radius: 0;
  margin: 80px 0 0;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
}
.video-section__bg {
  position: absolute;
  inset: -18% 0;
  z-index: -1;
  transition: transform 8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.video-section:hover .video-section__bg {
  transform: scale(1.04);
}
.video-section__bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  will-change: transform;
}
/* Cinematic vignette: dark corners, atmospheric centre */
.video-section__overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 70% at 50% 50%, transparent 20%, rgba(8,14,38,0.55) 100%),
    linear-gradient(180deg,
      rgba(8,14,38,0.65) 0%,
      rgba(8,14,38,0.15) 35%,
      rgba(8,14,38,0.15) 65%,
      rgba(8,14,38,0.70) 100%);
}
/* Play button: larger, with two expanding ring pulses */
.video-section__play {
  position: relative;
}
.video-section__play-circle {
  width: 116px; height: 116px;
  background: #FFB300;
  border-radius: 50%;
  display: grid;
  place-items: center;
  position: relative;
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 12px 40px rgba(255,179,0,0.45);
  animation: none;
}
.video-section__play-circle::before,
.video-section__play-circle::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(255,179,0,0.5);
  animation: videoRing 2.6s ease-out infinite;
}
.video-section__play-circle::after {
  animation-delay: 1.3s;
  border-color: rgba(255,179,0,0.3);
}
@keyframes videoRing {
  0%   { transform: scale(1);   opacity: 1; }
  100% { transform: scale(2.2); opacity: 0; }
}
.video-section__play:hover .video-section__play-circle {
  transform: scale(1.1);
  box-shadow: 0 16px 56px rgba(255,179,0,0.6);
}
.video-section__play-circle svg path { fill: #182354; }
/* Wider container for the full-screen context */
.video-section .video-section__container {
  max-width: 900px;
  padding: 0 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* ── TESTIMONIALS ─────────────────────────────────────────────────────────── */
.testimonial-card {
  background: #fff;
  border-radius: var(--radius-card);
  border: 1px solid rgba(37, 52, 122, 0.07);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease;
}
.testimonial-card:hover {
  transform: translateY(-8px) rotate(0.6deg);
  box-shadow: var(--shadow-float);
}
.testimonial-card__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  border-radius: 50%;
  color: #fff;
  background: #25347A;
}
/* Color único por tarjeta */
.testimonial-card:nth-child(1) .testimonial-card__avatar { background: #25347A; }
.testimonial-card:nth-child(2) .testimonial-card__avatar { background: #0082BE; }
.testimonial-card:nth-child(3) .testimonial-card__avatar { background: #E8734A; }
.testimonial-card:nth-child(4) .testimonial-card__avatar { background: #2E8B6A; }
.testimonial-card:nth-child(5) .testimonial-card__avatar { background: #7C5CDB; }
.testimonial-card:nth-child(6) .testimonial-card__avatar { background: #C9972A; }

/* ── BLOG CARDS ───────────────────────────────────────────────────────────── */
.blog-card {
  background: #fff;
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 1px solid rgba(37, 52, 122, 0.07);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s ease;
}
.blog-card:hover {
  transform: translateY(-10px);
  box-shadow: var(--shadow-float);
}
.blog-card__image { overflow: hidden; }
.blog-card__image img,
.blog-card__image-placeholder {
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.blog-card:hover .blog-card__image img,
.blog-card:hover .blog-card__image-placeholder { transform: scale(1.07); }
.blog-card__image img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  aspect-ratio: 16 / 10;
}
.blog-card__category {
  background: var(--pastel-sand);
  color: #B47D00;
  border-radius: 999px;
  font-weight: 700;
}

/* ── ABOUT COLLAGE ────────────────────────────────────────────────────────── */
.collage {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
  margin-top: clamp(2rem, 5vw, 4rem);
  align-items: stretch;
}
.collage__item {
  border-radius: 24px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  will-change: transform;
  position: relative;
}
.collage__item img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.collage__item:hover img { transform: scale(1.05); }
.collage__item--1 { grid-column: 1 / 6; aspect-ratio: 4 / 3; border-radius: 16px; }
.collage__item--2 { grid-column: 6 / 10; aspect-ratio: 3 / 4; margin-top: 12%; border-radius: 16px; }
.collage__item--3 { grid-column: 10 / 13; aspect-ratio: 3 / 4; border-radius: 16px; }
.collage__caption {
  position: absolute;
  left: 14px; bottom: 12px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(6px);
  border-radius: 999px;
  padding: 7px 16px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--ink);
  z-index: 2;
}

/* ── CTA FINAL ────────────────────────────────────────────────────────────── */
/* ── CTA SECTION — azul, flota sobre el footer ── */
.cta-section {
  background: linear-gradient(150deg, #25347A 0%, #0068A0 120%);
  border-radius: clamp(24px, 4vw, 56px);
  margin: 0 clamp(24px, 4vw, 80px) -80px;
  overflow: visible;
  position: relative;
  z-index: 2;
}
.cta-section__title { color: #fff; letter-spacing: -0.03em; }
/* Avatars en laterales */
.cta-section__avatars {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
}
.cta-section__avatar {
  position: absolute;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid rgba(255,255,255,0.25);
  box-shadow: 0 8px 28px rgba(0,0,0,0.25);
  will-change: transform;
  transition: transform 0.3s ease-out;
}
.cta-section__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cta-section__avatar--tl { width: 100px; height: 100px; top: 12%; left: 3%;  animation: ctaFloat 5s ease-in-out infinite; }
.cta-section__avatar--bl { width: 80px;  height: 80px;  bottom: 12%; left: 9%;  animation: ctaFloat 6.5s ease-in-out infinite 1.2s; }
.cta-section__avatar--tr { width: 80px;  height: 80px;  top: 12%; right: 9%;  animation: ctaFloat 5.8s ease-in-out infinite 0.6s; }
.cta-section__avatar--br { width: 100px; height: 100px; bottom: 12%; right: 3%; animation: ctaFloat 7s ease-in-out infinite 1.8s; }

@keyframes ctaFloat {
  0%, 100% { transform: translateY(0); }
  25%      { transform: translateY(-10px) translateX(5px); }
  50%      { transform: translateY(-6px) translateX(-3px); }
  75%      { transform: translateY(-14px) translateX(4px); }
}

@media (prefers-reduced-motion: reduce) {
  .cta-section__avatar { animation: none !important; }
}

/* ── FOOTER — negro, pantalla completa, Kidora-style ── */
.footer {
  background: #182354;
  border-radius: 0;
  margin-inline: 0;
  padding-top: 120px;
}
.footer__main {
  display: flex;
  gap: clamp(32px, 5vw, 80px);
  padding: 56px 0 40px;
  align-items: flex-start;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.footer__brand-col {
  flex-shrink: 0;
  width: 260px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.footer__desc {
  color: rgba(255,255,255,0.48);
  font-size: 0.875rem;
  line-height: 1.75;
  margin: 0;
}
.footer__logo-img { height: clamp(88px, 10vw, 112px); width: auto; display: block; }
.footer__logo-text { display: none !important; }
.footer__tagline { display: none; }
.footer__top { display: none; }
.footer__badges { display: none; }
/* Social icons: circular outlined */
.footer__social {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.footer__social-link {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.2);
  display: grid;
  place-items: center;
  color: rgba(255,255,255,0.6);
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
  background: transparent;
}
.footer__social-link:hover {
  border-color: #FFB300;
  color: #FFB300;
  background: rgba(255,179,0,0.08);
  transform: none;
}
/* Nav grid: flush inside main flex */
.footer__grid {
  flex: 1;
  border-top: none;
  border-bottom: none;
  padding: 0;
}
.footer__badge {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 999px;
}

/* ── TILT 3D helper ───────────────────────────────────────────────────────── */
[data-tilt] {
  transform-style: preserve-3d;
  will-change: transform;
}
[data-tilt] .tilt-inner { transform: translateZ(36px); }

/* ── LOADER ───────────────────────────────────────────────────────────────── */
.page-loader { background: var(--paper); }
.loader-bar { background: linear-gradient(90deg, #25347A, #0082BE, #FFB300); }

/* ── PAGE HERO interior (páginas internas) ───────────────────────────────── */
.page-hero, .hero {
  background:
    radial-gradient(60% 60% at 80% 20%, rgba(0, 130, 190, 0.25) 0%, transparent 65%),
    linear-gradient(150deg, #25347A 0%, #1A2B66 60%, #0F1B4D 100%);
}
/* Make overlay less opaque so bg photo is more visible */
.page-hero__overlay {
  background: linear-gradient(135deg,
    rgba(15, 40, 71, 0.75),
    rgba(26, 60, 110, 0.65) 50%,
    rgba(42, 94, 168, 0.55)) !important;
}
.page-hero__bg img {
  opacity: 0.35 !important;
}

/* ── RESPONSIVE ───────────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .hero-v2__container { grid-template-columns: 1fr; gap: 3.5rem; }
  .hero-v2__visual { min-height: 0; aspect-ratio: 1.05; max-width: 560px; margin-inline: auto; width: 100%; }
  .hero-v2__scroll { display: none; }
}
@media (max-width: 992px) {
  /* Program cards: stack vertically, keep sticky stacking */
  .program-card {
    grid-template-columns: 1fr !important;
    height: auto !important;
    min-height: auto !important;
  }
  .program-card__media { order: 1; min-height: 280px; aspect-ratio: unset; }
  .program-card__inner { order: 2; min-height: 0 !important; }
  .programs__cards { counter-reset: program-counter; gap: 24px; }
}

@media (max-width: 767px) {
  .navbar { top: 8px; }
  .navbar__container { height: 68px; border-radius: 999px; margin-inline: 10px; }
  .navbar__logo-img { height: 44px; }
  .hero-v2 { padding-top: 6.5rem; }
  .hero-v2__card { padding: 10px 14px; }
  .hero-v2__card strong { font-size: 0.95rem; }
  .hero-v2__card-icon { width: 34px; height: 34px; }
  .collage { gap: 10px; }
  .collage__item--1 { grid-column: 1 / 8; }
  .collage__item--2 { grid-column: 8 / 13; margin-top: 20%; }
  .collage__item--3 { grid-column: 3 / 11; aspect-ratio: 16/9; border-radius: 24px; margin-top: 4px; }
  .thinking, .video-section { margin-inline: 6px; }
  .cta-section { margin-inline: 12px; }
  .footer { margin-inline: 0; }

  /* Program card titles smaller on mobile */
  .program-card__title { font-size: clamp(1.3rem, 5vw, 1.6rem); }
  .program-card__media { min-height: 240px; }

  /* Marquee section */
  .pill-marquee__item { padding: 6px 14px; font-size: 0.8rem; }

  /* ── VIDEO SECTION mobile ── */
  .video-section { min-height: 500px; }
  .video-section__play-circle { width: 88px; height: 88px; }
  .scroll-cue { display: none; }

  /* ── CTA SECTION mobile ── */
  .cta-section {
    margin-bottom: 0;
  }
  .cta-section__avatars { display: none; }
  .cta-section__buttons {
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }
  .cta-section__buttons .btn { width: 100%; max-width: 320px; justify-content: center; }

  /* ── FOOTER mobile ── */
  .footer { padding-top: 80px; }
  .footer__main {
    flex-direction: column;
    gap: 36px;
    padding: 40px 0 28px;
  }
  .footer__brand-col { width: 100%; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .footer__bottom {
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
  }
}

@media (max-width: 480px) {
  /* Video section */
  .video-section__play-circle { width: 76px; height: 76px; }
  .video-section .video-section__container { padding: 0 20px; }

  /* CTA */
  .cta-section { margin-inline: 8px; margin-bottom: 0; border-radius: 20px; }

  /* Footer */
  .footer { padding-top: 68px; }
  .footer__grid { grid-template-columns: 1fr; }
  .footer__main { padding: 32px 0 24px; }
  .footer__social { gap: 8px; }
}

/* ── THINKING FEATURES ───────────────────────────────────────────────────── */
.thinking__feature-title {
  font-size: 24px;
}

.thinking__feature-card {
  position: relative;
  overflow: hidden;
  z-index: 1;
  background: transparent !important;
  min-height: 220px;
}
/* Hide decorative SVGs — cards now have photo backgrounds */
.thinking__feature-card svg { display: none !important; }

/* Push text content to bottom of card */
.thinking__feature-card .thinking__feature-title,
.thinking__feature-card .thinking__feature-text {
  position: relative;
  z-index: 2;
}
.thinking__feature-card .thinking__feature-title { margin-top: auto; }

.thinking__feature-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.45;
  transition: opacity 0.5s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  transform: scale(1.08);
}

.thinking__feature-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(12, 19, 48, 0.95) 0%, rgba(12, 19, 48, 0.6) 45%, rgba(12, 19, 48, 0.1) 100%);
  transition: background 0.5s ease;
}

.thinking__feature-card:hover::before {
  opacity: 0.85;
  transform: scale(1);
}

.thinking__feature-card:hover::after {
  background: linear-gradient(to top, rgba(12, 19, 48, 0.8) 0%, rgba(12, 19, 48, 0.2) 55%, rgba(12, 19, 48, 0.02) 100%);
}

.thinking__feature-card:nth-child(1)::before {
  background-image: url('../assets/real/cultura-pensamiento.jpg');
}
.thinking__feature-card:nth-child(2)::before {
  background-image: url('../assets/real/bilingual-real.jpg');
}
.thinking__feature-card:nth-child(3)::before {
  background-image: url('../assets/real/ia-aula.jpg');
}
.thinking__feature-card:nth-child(4)::before {
  background-image: url('../assets/real/steam.jpg');
}
/* ── MOBILE MENU: full-screen dark overlay ───────────────────────────────── */
.navbar__mobile {
  background: #182354;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.navbar__mobile.is-open {
  display: flex;
}

.navbar__mobile-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0 clamp(24px, 6vw, 48px) 40px;
  overflow-y: auto;
}

/* Top bar inside menu: space for close button alignment */
.navbar__mobile-inner::before {
  content: '';
  display: block;
  height: var(--nav-height, 72px);
  flex-shrink: 0;
}

.navbar__mobile-list {
  list-style: none;
  padding: 0;
  margin: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.navbar__mobile-list > li {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.navbar__mobile-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 18px 0;
  font-size: clamp(20px, 5vw, 28px);
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.02em;
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: none;
  line-height: 1.1;
  transition: color 0.2s ease;
}

.navbar__mobile-link:hover,
.navbar__mobile-link:focus-visible {
  color: #FFB300;
  outline: none;
}

/* Chevron icon in parent links */
.navbar__mobile-link .navbar__chevron {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  transition: transform 0.3s ease;
  color: rgba(255, 255, 255, 0.4);
}

.navbar__mobile-link--parent[aria-expanded="true"] .navbar__chevron {
  transform: rotate(180deg);
  color: #FFB300;
}

/* Sublist */
.navbar__mobile-sublist {
  list-style: none;
  padding: 0 0 16px 16px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.navbar__mobile-sublink {
  display: block;
  padding: 10px 0;
  font-size: clamp(14px, 3.5vw, 17px);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  transition: color 0.2s ease;
}

.navbar__mobile-sublink:hover,
.navbar__mobile-sublink:focus-visible {
  color: #fff;
  outline: none;
}

/* CTA button inside mobile menu */
.navbar__mobile-cta {
  margin-top: 28px;
  width: 100%;
  justify-content: center;
  font-size: 16px;
}

/* Contact links */
.navbar__mobile-contact {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.navbar__mobile-contact-link {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  transition: color 0.2s ease;
}

.navbar__mobile-contact-link:hover {
  color: #fff;
}

.navbar__mobile-contact-link svg path,
.navbar__mobile-contact-link svg rect {
  stroke: rgba(255, 255, 255, 0.4);
}

/* Hamburger: show white lines on dark nav / toggle to X when open */
.navbar__hamburger-line {
  background: #fff;
}

/* Override: when nav has scrolled white bg, lines go dark */
.navbar--scrolled .navbar__hamburger-line {
  background: #182354;
}

/* Keep hamburger white when menu is open regardless of scroll */
.navbar__hamburger[aria-expanded="true"] .navbar__hamburger-line {
  background: #fff;
}

/* ── ACCESIBILIDAD: reduced motion ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .pill-marquee__track, .marquee__track { animation: none !important; }
  .video-section__play-circle { animation: none; }
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}

/* ── PHOSPHOR ICONS: sizing for icon containers ──────────────────────────── */
.mvv-card__icon,
.cert-badge__icon,
.etapa-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px; height: 64px;
  border-radius: 18px;
  margin-bottom: 1rem;
  font-size: 2rem;
}
.mvv-card__icon--blue  { background: var(--pastel-sky);  color: #0082BE; }
.mvv-card__icon--green { background: var(--pastel-mint); color: #1A8C5B; }
.mvv-card__icon--yellow{ background: var(--pastel-sand); color: #B87A00; }
.cert-badge__icon      { background: var(--pastel-lav);  color: #25347A; margin-inline: auto; }
.etapa-card__icon--green { background: var(--pastel-mint); color: #1A8C5B; }
.etapa-card__icon--dark  { background: var(--pastel-lav);  color: #25347A; }
.etapa-card__icon--purple{ background: #EDE7F6; color: #6B21A8; }

.team-card__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--pastel-lav);
  color: #25347A;
  font-size: 1.6rem;
  flex-shrink: 0;
}

/* Phosphor icon size inside category tags (blog) */
.category-tag i { vertical-align: -2px; margin-right: 4px; }

/* ── SECTION SPACING: fix overlapping blocks across all pages ────────────── */

/* .about bottom was only 24px (bridge.css) — too tight before next section */
.about { padding-bottom: clamp(60px, 8vw, 100px) !important; }

/* Breadcrumb nav hidden under fixed navbar on all subpages */
.breadcrumb {
  padding-top: calc(var(--nav-height, 72px) + 24px);
  padding-bottom: 24px;
}

/* page-hero--pattern (blog) had no CSS — content hidden under navbar */
.page-hero--pattern {
  padding-top: calc(var(--nav-height, 72px) + clamp(60px, 8vw, 100px));
  padding-bottom: clamp(60px, 8vw, 100px);
  background: var(--paper);
}

/* Sections on el-colegio, admisiones, contacto had zero padding */
.inner-section,
.counters-bar,
.process,
.admission-form-section,
.why-salzillo,
.etapas-section,
.faq-section,
.map-contact {
  padding: clamp(64px, 8vw, 120px) 0;
}
.inner-section--cream { background: var(--paper-warm, #F5F1E4); }
.inner-section--white { background: #fff; }

/* ── AJUSTES FEEDBACK DISEÑADOR (agosto 2026) ────────────────────────────── */
/* Sin iconos pequeños en tags/badges de texto (svg, img o icon-font) */
.section-tag svg, .section-tag img, .section-tag i,
.hero__badge svg, .hero__badge i,
.page-hero__badge svg, .page-hero__badge i,
.year-badge svg, .year-badge i,
.category-tag i { display: none !important; }
.hero-v2__badge svg, .hero-v2__badge-dot, .hero-v2__badge i,
.thinking__badge svg, .thinking__badge i,
.thinking__pill svg, .thinking__pill i,
.footer__badge svg, .footer__badge i,
.navbar__megamenu-featured-badge svg, .navbar__megamenu-featured-badge i { display: none !important; }

/* Tarjetas de certificaciones: iconos en azules corporativos */
.cert-badge__icon {
  background: rgba(0, 130, 190, 0.10) !important;
  color: #25347A !important;
}
.cert-badge__icon i { color: #25347A !important; }
.cert-badge__icon .ph-duotone::before { color: #0082BE; }
.cert-badge__title { color: #25347A !important; }

/* Puente de hover: cubre el hueco entre la pill y el panel desplegado
   para que el menú no se cierre al bajar el ratón */
.navbar__item--dropdown, .navbar__item--megamenu { position: relative; }
.navbar__item--dropdown.is-open::after,
.navbar__item--megamenu.is-open::after {
  content: "";
  position: absolute;
  top: 100%;
  left: -60px;
  right: -60px;
  height: 26px;
}

/* ── HERO INTERIOR: foto de fondo ────────────────────────────────────────── */
.hero__bg { position: absolute; inset: 0; overflow: hidden; }
.hero__bg .hero__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.38;
  z-index: 1;
}
/* Parallax de dos capas: el fondo necesita recorrido extra vertical para
   desplazarse sin dejar huecos (se activa solo con JS y sin reduced-motion) */
.hero-parallax-on .hero__bg .hero__photo,
.hero-parallax-on .hero-v2__bg img,
.hero-parallax-on .hero-v2__video {
  top: -22%;
  height: 122%;
  will-change: transform;
}
.hero__bg .hero__overlay { z-index: 2; }

/* ── PARTNERS MARQUEE ────────────────────────────────────────────────────── */
.partners { padding: var(--section-py, 5rem) 0 3rem; overflow: hidden; }
.partners__container { max-width: 1200px; margin-inline: auto; padding-inline: 24px; }
.partners__marquee { overflow: hidden; margin-top: 2.5rem; position: relative; }
.partners__marquee::before, .partners__marquee::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 120px; z-index: 2; pointer-events: none;
}
.partners__marquee::before { left: 0; background: linear-gradient(90deg, var(--paper), transparent); }
.partners__marquee::after { right: 0; background: linear-gradient(-90deg, var(--paper), transparent); }
.partners__track { display: flex; width: max-content; animation: partnersScroll 36s linear infinite; }
.partners__track:hover { animation-play-state: paused; }
.partners__set { display: flex; align-items: center; gap: clamp(1.5rem, 3vw, 3rem); padding-right: clamp(1.5rem, 3vw, 3rem); }
.partners__logo {
  display: grid; place-items: center;
  background: #fff; border: 1px solid rgba(37,52,122,0.07); border-radius: 18px;
  width: clamp(150px, 16vw, 200px); height: clamp(96px, 10vw, 120px);
  padding: 18px; flex-shrink: 0;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.partners__logo:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); }
.partners__logo img {
  max-width: 100%; max-height: 100%; width: auto; height: auto;
  object-fit: contain; filter: grayscale(1); opacity: 0.75;
  transition: filter 0.3s ease, opacity 0.3s ease;
}
.partners__logo:hover img { filter: none; opacity: 1; }
@keyframes partnersScroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .partners__track { animation: none; } }

/* ── EBOOK / LEAD MAGNET ─────────────────────────────────────────────────── */
.ebook {
  background: linear-gradient(150deg, var(--pastel-sky) 0%, #EAF3FB 60%, var(--pastel-sand) 130%);
  border-radius: clamp(24px, 4vw, 56px);
  margin: clamp(2rem, 4vw, 4rem) clamp(8px, 1.5vw, 24px);
  padding: clamp(3rem, 6vw, 5.5rem) 0;
  overflow: hidden;
}
.ebook__container {
  max-width: 1140px; margin-inline: auto; padding-inline: 24px;
  display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2.5rem, 5vw, 5rem); align-items: center;
}
.ebook__cover { position: relative; display: grid; place-items: center; }
.ebook-book {
  width: min(300px, 70vw); aspect-ratio: 3 / 4.2;
  position: relative; border-radius: 6px 16px 16px 6px;
  box-shadow: 24px 32px 60px -20px rgba(24,35,84,0.45);
  transform: rotate(-3deg);
}
.ebook-book__front {
  position: absolute; inset: 0; border-radius: 6px 16px 16px 6px; overflow: hidden;
  background: #25347A; display: flex; flex-direction: column; justify-content: flex-end;
}
.ebook-book__front img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.35; }
.ebook-book__front::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(37,52,122,0.2) 0%, rgba(24,35,84,0.85) 75%); }
.ebook-book__label, .ebook-book__title, .ebook-book__brand { position: relative; z-index: 2; padding-inline: 22px; }
.ebook-book__label { color: #FFC53D; font-family: var(--font-heading); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.18em; margin-bottom: 8px; }
.ebook-book__title { color: #fff; font-family: var(--font-heading); font-weight: 800; font-size: 1.35rem; line-height: 1.2; letter-spacing: -0.02em; margin-bottom: 14px; }
.ebook-book__brand { color: rgba(255,255,255,0.65); font-size: 0.75rem; padding-bottom: 22px; }
/* Portada real de la guía: la imagen ya lleva título y marca */
.ebook-book__front--cover img { opacity: 1; }
.ebook-book__front--cover::after { background: linear-gradient(100deg, rgba(255,255,255,0.18) 0%, transparent 35%); }
.ebook-book:has(.ebook-book__front--cover) { aspect-ratio: 640 / 905; }
/* Con la portada real, el sello va abajo para no tapar el título */
.ebook__cover:has(.ebook-book__front--cover) .ebook__badge { top: auto; bottom: 14%; right: 10%; }
.ebook-book__spine { position: absolute; left: 0; top: 0; bottom: 0; width: 10px; background: linear-gradient(90deg, rgba(0,0,0,0.35), transparent); z-index: 3; border-radius: 6px 0 0 6px; }
.ebook__badge {
  position: absolute; top: 6%; right: 12%;
  background: #FFB300; color: #182354;
  font-family: var(--font-heading); font-weight: 800; font-size: 0.9rem;
  padding: 14px 18px; border-radius: 50%;
  transform: rotate(12deg);
  box-shadow: 0 12px 30px -8px rgba(255,179,0,0.6);
}
.ebook__text { color: rgba(24,35,84,0.75); line-height: 1.65; margin-bottom: 1.2rem; max-width: 34rem; }
.ebook__checks { list-style: none; padding: 0; margin: 0 0 1.8rem; display: grid; gap: 10px; }
.ebook__checks li { padding-left: 30px; position: relative; color: var(--ink); font-weight: 600; }
.ebook__checks li::before {
  content: ""; position: absolute; left: 0; top: 2px;
  width: 20px; height: 20px; border-radius: 50%;
  background: #0082BE url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5' stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;
}
.ebook__form { max-width: 34rem; }
.ebook__form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.ebook__form input[type="text"], .ebook__form input[type="email"] {
  width: 100%; padding: 15px 20px;
  border: 1.5px solid rgba(37,52,122,0.15); border-radius: 999px;
  background: #fff; font-family: var(--font-body); font-size: 0.95rem; color: var(--ink);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.ebook__form input:focus { outline: none; border-color: #0082BE; box-shadow: 0 0 0 4px rgba(0,130,190,0.12); }
.btn--full { width: 100%; justify-content: center; }
.ebook__privacy { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 0.8rem; color: rgba(24,35,84,0.65); }
.ebook__privacy a { color: #0082BE; text-decoration: underline; }

/* ── BANNER EBOOK interior ───────────────────────────────────────────────── */
.ebook-banner {
  margin: clamp(2rem, 4vw, 3.5rem) clamp(8px, 1.5vw, 24px);
}
.ebook-banner__inner {
  max-width: 1140px; margin-inline: auto;
  background: #fff; border: 1px solid rgba(37,52,122,0.08);
  border-radius: 24px; box-shadow: var(--shadow-card);
  padding: clamp(1.4rem, 3vw, 2rem) clamp(1.4rem, 3vw, 2.5rem);
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
}
.ebook-banner__text { font-size: 1.05rem; color: var(--ink); font-family: var(--font-heading); }
.ebook-banner__actions { display: flex; gap: 12px; flex-wrap: wrap; }

@media (max-width: 900px) {
  .ebook__container { grid-template-columns: 1fr; }
  .ebook__cover { order: -1; }
  .ebook__form-row { grid-template-columns: 1fr; }
  .ebook-banner__inner { flex-direction: column; text-align: center; }
}

/* fixes-v4 */
/* Logos partners: nunca desbordar la tarjeta (posicionado absoluto a prueba de resets) */
.partners__logo { overflow: hidden; position: relative; }
.partners__logo img {
  position: absolute !important;
  inset: 16px !important;
  width: calc(100% - 32px) !important;
  height: calc(100% - 32px) !important;
  max-width: none;
  max-height: none;
  object-fit: contain;
}
/* Badge flotante "Platinum VESS": se cortaba y no enlazaba a nada */
.thinking__badge { display: none !important; }

/* fixes-v5 */
/* Contencion del hero: la foto absoluta nunca debe escapar de su seccion */
.hero, .hero--subpage, .page-hero {
  position: relative !important;
  overflow: hidden;
}
.hero__bg { position: absolute !important; inset: 0 !important; z-index: 0 !important; }
.hero > *:not(.hero__bg) { position: relative; z-index: 2; }

/* Migas de pan: pill discreta sobre el hero, bajo la navbar */
.breadcrumb {
  position: absolute !important;
  top: 108px !important;
  left: 0 !important; right: 0 !important;
  bottom: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  display: block !important;
  justify-content: flex-start !important;
  z-index: 40;
  pointer-events: none;
}
.breadcrumb__container { display: block !important; text-align: left !important; }
.breadcrumb__container {
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: 32px;
}
.breadcrumb__list {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 8px 18px;
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  pointer-events: auto;
}
.breadcrumb__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
}
.breadcrumb__item:not(:first-child)::before {
  content: "›";
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.9rem;
}
.breadcrumb__item a { color: rgba(255, 255, 255, 0.85); text-decoration: none; transition: color 0.2s ease; }
.breadcrumb__item a:hover { color: #FFC53D; }
.breadcrumb__item [aria-current] { color: #fff; }
.breadcrumb svg, .breadcrumb i { display: none !important; }
@media (max-width: 767px) { .breadcrumb { display: none !important; } }

/* fixes-v6 */
/* Los textos del hero interior NUNCA deben quedarse invisibles esperando a GSAP.
   La animacion es mejora progresiva; la visibilidad es obligatoria. */
.hero--subpage .reveal-text,
.hero--subpage .reveal-fade,
.hero--subpage .reveal-slide-up,
.hero--subpage .hero__title-line,
.hero--subpage .word,
.hero--subpage .word-inner,
.page-hero .reveal-text,
.page-hero .reveal-fade,
.page-hero .reveal-slide-up {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

/* fixes-v7 */
/* Tarjetas de blog tipo portada: info en overlay al hacer hover */
.blog-card-full--cover { position: relative; overflow: hidden; border-radius: var(--radius-card); }
.blog-card-full--cover .blog-card-full__image,
.blog-card-full--cover .blog-card-full__img-placeholder { height: 100%; }
.blog-card-full--cover .blog-card-full__img-placeholder img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.blog-card-full--cover:hover .blog-card-full__img-placeholder img { transform: scale(1.06); }
.blog-card-full--cover .blog-card-full__content {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 3.2rem 1.5rem 1.4rem;
  background: linear-gradient(180deg, transparent 0%, rgba(24, 35, 84, 0.88) 45%);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.blog-card-full--cover:hover .blog-card-full__content,
.blog-card-full--cover:focus-within .blog-card-full__content {
  opacity: 1;
  transform: translateY(0);
}
.blog-card-full--cover .blog-card-full__title,
.blog-card-full--cover .blog-card-full__title a { color: #fff; }
.blog-card-full--cover .blog-card-full__excerpt { color: rgba(255,255,255,0.8); }
.blog-card-full--cover .blog-card-full__link { color: #FFC53D; }
.blog-card-full--cover .blog-card-full__date { color: rgba(255,255,255,0.7); }
@media (hover: none) {
  .blog-card-full--cover .blog-card-full__content { opacity: 1; transform: none; }
}

/* Filtro de categorias: estado activo */
.category-tag.is-active {
  background: #25347A !important;
  color: #fff !important;
  border-color: #25347A !important;
}
.category-tag { font-family: inherit; }

/* Articulo de blog */
.post-hero { padding: clamp(9rem, 16vh, 11rem) 24px clamp(1.5rem, 3vw, 2.5rem); }
.post-hero__container { max-width: 780px; margin-inline: auto; }
.post-hero__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  font-size: 0.85rem; color: rgba(24,35,84,0.6); margin-bottom: 1.1rem;
}
.post-hero__cat {
  background: var(--pastel-sand); color: #B47D00;
  border-radius: 999px; padding: 5px 14px;
  font-family: var(--font-heading); font-weight: 700; font-size: 0.75rem;
}
.post-hero__title {
  font-family: var(--font-heading);
  font-size: clamp(1.9rem, 4.4vw, 3rem);
  font-weight: 800; line-height: 1.12; letter-spacing: -0.025em;
  color: var(--ink); margin: 0 0 1rem;
}
.post-hero__lead { font-size: 1.12rem; line-height: 1.65; color: rgba(24,35,84,0.72); }
.post-body { max-width: 780px; margin-inline: auto; padding: 0 24px clamp(3rem, 6vw, 4.5rem); }
.post-body h2 {
  font-family: var(--font-heading); font-weight: 800; letter-spacing: -0.02em;
  font-size: clamp(1.3rem, 2.6vw, 1.7rem); color: var(--ink);
  margin: 2.4rem 0 0.9rem;
}
.post-body p { line-height: 1.75; color: rgba(24,35,84,0.78); margin-bottom: 1.1rem; }
.post-body a { color: #0082BE; }
.post-body ul { margin: 0 0 1.2rem 1.2rem; }
.post-body li { line-height: 1.7; color: rgba(24,35,84,0.78); margin-bottom: 0.5rem; }
.post-body__figure { margin: 1.8rem 0; }
.post-body__figure img { width: 100%; border-radius: 20px; display: block; }
.post-body__figure figcaption { font-size: 0.82rem; color: rgba(24,35,84,0.55); margin-top: 0.6rem; text-align: center; }
.post-body blockquote {
  border-left: 4px solid #FFB300;
  background: var(--pastel-sky);
  border-radius: 0 18px 18px 0;
  padding: 1.4rem 1.6rem;
  margin: 1.8rem 0;
}
.post-body blockquote p {
  font-family: var(--font-heading); font-weight: 700;
  font-size: 1.1rem; color: var(--ink); margin: 0 0 0.5rem;
}
.post-body blockquote cite { font-size: 0.82rem; color: rgba(24,35,84,0.6); font-style: normal; }
.post-body__cta {
  background: #25347A; border-radius: 20px;
  padding: 1.8rem; margin-top: 2.4rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; flex-wrap: wrap;
}
.post-body__cta p { color: #fff; margin: 0; max-width: 30rem; }

/* Iconos Mision/Vision/Valores en colores corporativos */
.mvv-card__icon,
.mvv-card__icon--blue,
.mvv-card__icon--green,
.mvv-card__icon--yellow {
  background: rgba(0, 130, 190, 0.10) !important;
  color: #25347A !important;
}
.mvv-card__icon i { color: #25347A !important; font-size: 1.9rem; }
.mvv-card:nth-child(2) .mvv-card__icon i { color: #0082BE !important; }

/* Organigrama: avatares con iniciales en colores corporativos */
.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 20px; }
.team-card__avatar--initials {
  height: 130px !important;
  background: linear-gradient(150deg, rgba(37,52,122,0.06), rgba(0,130,190,0.10)) !important;
}
.team-card__avatar--initials span {
  width: 76px; height: 76px;
  border-radius: 50%;
  background: #25347A;
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.5rem;
  display: grid;
  place-items: center;
}
.team-card:nth-child(even) .team-card__avatar--initials span { background: #0082BE; }

/* Anclas: dejar sitio a la navbar flotante */
section[id] { scroll-margin-top: 110px; }

/* Galeria de instalaciones */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 220px;
  grid-auto-flow: dense;
  gap: 16px;
}
.gallery-grid__item {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  margin: 0;
  box-shadow: var(--shadow-card);
}
.gallery-grid__item--wide { grid-column: span 2; grid-row: span 2; }
.gallery-grid__item--wide:last-child { grid-column: 1 / -1; grid-row: span 1; }
.gallery-grid__item img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.gallery-grid__item:hover img { transform: scale(1.05); }
.gallery-grid__item figcaption {
  position: absolute;
  left: 12px; bottom: 10px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(6px);
  border-radius: 999px;
  padding: 6px 14px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.78rem;
  color: var(--ink);
}
@media (max-width: 900px) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-grid__item--wide { grid-column: span 2; }
}

/* Fallback sin GSAP: todo visible */
.no-anim .reveal-fade, .no-anim .reveal-slide-up,
.no-anim .reveal-text, .no-anim .reveal-scale {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}

/* Fotos reales del organigrama */
.team-card__photo {
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--pastel-sky);
}
.team-card__photo img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
  display: block;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.team-card:hover .team-card__photo img { transform: scale(1.05); }

/* Migas sobre fondo claro (articulos) */
.breadcrumb--light .breadcrumb__list {
  background: rgba(37, 52, 122, 0.06);
  border-color: rgba(37, 52, 122, 0.1);
}
.breadcrumb--light .breadcrumb__item,
.breadcrumb--light .breadcrumb__item a { color: rgba(24, 35, 84, 0.65); }
.breadcrumb--light .breadcrumb__item [aria-current] { color: #182354; }
.breadcrumb--light .breadcrumb__item:not(:first-child)::before { color: rgba(24, 35, 84, 0.35); }
/* El hero del articulo despeja la zona de migas */
.post-hero { padding-top: clamp(12.5rem, 20vh, 14.5rem); }

/* Anclas de tarjetas de servicios */
.anchor-target { display: block; position: relative; top: -110px; visibility: hidden; }

/* Pills de extraescolares (actividades reales) */
.extra-grid { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.extra-pill {
  background: #fff;
  border: 1px solid rgba(37, 52, 122, 0.1);
  border-radius: 999px;
  padding: 12px 22px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.92rem;
  color: #25347A;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.extra-pill:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); background: var(--pastel-sky); }

/* Paginas legales: tipografia contenida */
.legal-page { font-size: 0.98rem; }
.legal-page h1 {
  font-family: var(--font-heading);
  font-size: clamp(1.9rem, 3.6vw, 2.5rem) !important;
  font-weight: 800; letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 2rem;
}
.legal-page h2 {
  font-family: var(--font-heading);
  font-size: 1.25rem !important;
  font-weight: 800; letter-spacing: -0.01em;
  color: #25347A;
  margin: 2.2rem 0 0.8rem;
  line-height: 1.3;
}
.legal-page p, .legal-page li {
  line-height: 1.75;
  color: rgba(24, 35, 84, 0.75);
  margin-bottom: 0.55rem;
}
.legal-page ul { margin: 0 0 1rem 1.4rem; }
.legal-page a { color: #0082BE; }

/* admisiones-v1 */
.process__container, .admission-form-section__container, .why-salzillo__container,
.etapas-section__container, .faq-section__container, .map-contact__container {
  max-width: 1200px; margin-inline: auto; padding-inline: 24px;
}
.process, .why-salzillo, .etapas-section, .faq-section, .admission-form-section, .map-contact {
  padding: clamp(3.5rem, 7vw, 6rem) 0;
}
.process__steps {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 20px; margin-top: 2.5rem;
}
.process__step {
  background: #fff; border: 1px solid rgba(37,52,122,0.08);
  border-radius: var(--radius-card); padding: 1.8rem 1.5rem; position: relative;
  transition: transform 0.35s cubic-bezier(0.22,1,0.36,1), box-shadow 0.35s ease;
}
.process__step:hover { transform: translateY(-6px); box-shadow: var(--shadow-float); }
.process__step-number {
  position: absolute; top: 1.2rem; right: 1.4rem;
  font-family: var(--font-heading); font-weight: 800;
  font-size: 2.2rem; color: rgba(0,130,190,0.15);
}
.process__step-icon {
  width: 54px; height: 54px; border-radius: 16px;
  background: var(--pastel-sky); color: #0082BE;
  display: grid; place-items: center; font-size: 1.5rem; margin-bottom: 1rem;
}
.process__step-title { font-family: var(--font-heading); font-weight: 800; font-size: 1.08rem; color: var(--ink); margin-bottom: 0.5rem; }
.process__step-text { font-size: 0.92rem; line-height: 1.6; color: rgba(24,35,84,0.7); }

.admission-form-section { background: var(--pastel-sky); border-radius: clamp(24px,4vw,56px); margin-inline: clamp(8px,1.5vw,24px); }
.form-card {
  background: #fff; border-radius: 24px; box-shadow: var(--shadow-card);
  padding: clamp(1.8rem, 4vw, 2.8rem); max-width: 760px; margin: 2rem auto 0;
}
.form-card form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group--full, .form-card form > button, .form-card .form-privacy, .form-card label.ebook__privacy { grid-column: 1 / -1; }
.form-group__label { font-family: var(--font-heading); font-weight: 700; font-size: 0.85rem; color: var(--ink); }
.form-group input, .form-group select, .form-group textarea {
  width: 100%; padding: 13px 18px;
  border: 1.5px solid rgba(37,52,122,0.15); border-radius: 14px;
  background: #FAFBFE; font-family: var(--font-body); font-size: 0.95rem; color: var(--ink);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.form-group textarea { min-height: 110px; resize: vertical; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  outline: none; border-color: #0082BE; box-shadow: 0 0 0 4px rgba(0,130,190,0.12);
}

.why-salzillo__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 2.5rem; }
.why-card {
  background: #fff; border: 1px solid rgba(37,52,122,0.07);
  border-radius: var(--radius-card); padding: 1.8rem 1.5rem;
  transition: transform 0.35s cubic-bezier(0.22,1,0.36,1), box-shadow 0.35s ease;
}
.why-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-float); }
.why-card__icon {
  width: 54px; height: 54px; border-radius: 16px;
  background: rgba(0,130,190,0.1); color: #25347A;
  display: grid; place-items: center; font-size: 1.5rem; margin-bottom: 1rem;
}
.why-card__icon i { color: #25347A; }
.why-card__title { font-family: var(--font-heading); font-weight: 800; font-size: 1.08rem; color: var(--ink); margin-bottom: 0.5rem; }
.why-card__text { font-size: 0.92rem; line-height: 1.65; color: rgba(24,35,84,0.7); }

.etapas-grid, .etapas-section__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px; margin-top: 2.5rem; }
.etapa-card {
  background: #fff; border: 1px solid rgba(37,52,122,0.07);
  border-radius: var(--radius-card); padding: 1.6rem 1.3rem;
  text-align: center; display: block; text-decoration: none;
  transition: transform 0.35s cubic-bezier(0.22,1,0.36,1), box-shadow 0.35s ease;
}
.etapa-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-float); }
.etapa-card__icon {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--pastel-sand);
  display: grid; place-items: center; font-size: 1.7rem; margin: 0 auto 0.9rem;
}
.etapa-card:nth-child(even) .etapa-card__icon { background: var(--pastel-sky); }
.etapa-card__title { font-family: var(--font-heading); font-weight: 800; font-size: 1rem; color: var(--ink); margin-bottom: 0.3rem; }
.etapa-card__ages { font-size: 0.85rem; color: #0082BE; font-weight: 700; }

.faq-list { max-width: 820px; margin: 2.5rem auto 0; }
.faq-item {
  background: #fff; border: 1px solid rgba(37,52,122,0.08);
  border-radius: 18px; margin-bottom: 12px; overflow: hidden;
}
.faq-item__question {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 14px;
  background: none; border: none; cursor: pointer;
  padding: 1.2rem 1.5rem;
  font-family: var(--font-heading); font-weight: 700; font-size: 1rem;
  color: var(--ink); text-align: left;
}
/* El +/- se dibuja con CSS, no con el glifo de la fuente: asi queda centrado
   exacto y no depende de las metricas tipograficas ni del line-height. */
.faq-item__question::after {
  content: "";
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
  background-color: var(--pastel-sky); color: #0082BE;
  background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor);
  background-size: 12px 2px, 2px 12px;
  background-position: center, center;
  background-repeat: no-repeat;
  transition: background-color 0.3s ease, color 0.3s ease, background-size 0.3s ease;
}
.faq-item.is-open .faq-item__question::after {
  background-color: #25347A; color: #fff;
  background-size: 12px 2px, 2px 0;
}
@media (prefers-reduced-motion: reduce) { .faq-item__question::after { transition: none; } }
.faq-item__answer { max-height: 0; overflow: hidden; transition: max-height 0.45s cubic-bezier(0.22,1,0.36,1); }
.faq-item.is-open .faq-item__answer { max-height: 1600px; }
.faq-item__answer-inner { padding: 0 1.5rem 1.3rem; color: rgba(24,35,84,0.72); line-height: 1.7; font-size: 0.95rem; }
/* Las respuestas vienen en Markdown desde el panel: titulares discretos, párrafos y listas. */
.faq-item__answer-inner p { margin: 0 0 0.75rem; }
.faq-item__answer-inner > *:last-child { margin-bottom: 0; }
.faq-item__answer-inner h1, .faq-item__answer-inner h2, .faq-item__answer-inner h3, .faq-item__answer-inner h4 {
  font-size: 1rem; font-weight: 700; color: #25347A; margin: 1rem 0 0.4rem; line-height: 1.4;
}
.faq-item__answer-inner ul, .faq-item__answer-inner ol { margin: 0 0 0.75rem; padding-left: 1.25rem; }
.faq-item__answer-inner li { margin: 0.25rem 0; }
.faq-item__answer-inner a { color: #0082BE; text-decoration: underline; }

.map-contact__grid, .map-contact .split-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: stretch; }
.map-contact__map-placeholder, .map-contact__map {
  border-radius: 24px; overflow: hidden; min-height: 360px;
  background: var(--pastel-sky) url("../assets/fotos/colegio-completo.jpg") center/cover;
  position: relative;
}


/* Extraescolares visuales (futuro CMS Supabase: una tarjeta = un registro) */
.extra-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.extra-card {
  display: block;
  position: relative; border-radius: 20px; overflow: hidden;
  aspect-ratio: 4 / 5; isolation: isolate;
  box-shadow: var(--shadow-card);
  text-decoration: none;
}
.extra-card img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; transition: transform 0.5s cubic-bezier(0.22,1,0.36,1);
}
.extra-card:hover img { transform: scale(1.06); }
.extra-card::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(24,35,84,0.85) 100%);
}
.extra-card__name {
  position: absolute; left: 16px; right: 16px; bottom: 14px; z-index: 2;
  color: #fff; font-family: var(--font-heading); font-weight: 800; font-size: 1.02rem;
  line-height: 1.25;
}
.extra-card__partner {
  position: absolute; left: 16px; bottom: 44px; z-index: 2;
  color: #FFC53D; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase;
}
@media (max-width: 992px) {
  .process__steps { grid-template-columns: repeat(2, 1fr); }
  .why-salzillo__grid { grid-template-columns: repeat(2, 1fr); }
  .extra-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .process__steps, .why-salzillo__grid { grid-template-columns: 1fr; }
  .form-card form { grid-template-columns: 1fr; }
  .map-contact__grid, .map-contact .split-grid { grid-template-columns: 1fr; }
  .extra-cards { grid-template-columns: 1fr 1fr; gap: 12px; }
}

/* aire-bloques: separacion entre secciones redondeadas oscuras */
.thinking { margin-block: clamp(2rem, 4vw, 3.5rem); }
.hero--subpage + .thinking, .page-hero + .thinking { margin-top: clamp(2.5rem, 5vw, 4rem); }
.video-section + .testimonials, .thinking + .about { padding-top: clamp(2rem, 4vw, 3rem); }

/* aire-cta */
.cta-section { margin-top: clamp(2rem, 4vw, 3.5rem); }

/* Grid de 3 tarjetas para paginas de programas (bridge oculta .about__grid) */
.cards-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 2.5rem;
}
@media (max-width: 900px) { .cards-3 { grid-template-columns: 1fr; } }

/* Team cards: estilos completos globales (antes solo inline en el-colegio) */
.team-card {
  background: #fff;
  border: 1px solid rgba(37, 52, 122, 0.07);
  border-radius: var(--radius-card);
  overflow: hidden;
  text-align: center;
  transition: transform 0.3s cubic-bezier(0.22,1,0.36,1), box-shadow 0.3s ease;
}
.team-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-float); }
.team-card__content { padding: 1.2rem 1rem 1.4rem; }
.team-card__name {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.02rem;
  line-height: 1.25;
  color: #25347A;
  margin-bottom: 0.3rem;
}
.team-card__role { font-size: 0.82rem; color: #0082BE; font-weight: 600; line-height: 1.4; }

/* Iconos phosphor en feature-cards y contact-cards */
.feature-card__icon i { font-size: 1.7rem; color: inherit; }
.contact-card__icon i { font-size: 1.7rem; color: #25347A; }

/* iconos-dos-azules: todos los iconos en los colores corporativos */
.feature-card__icon--blue   { background: rgba(0, 130, 190, 0.10) !important; color: #0082BE !important; }
.feature-card__icon--green  { background: rgba(37, 52, 122, 0.08) !important; color: #25347A !important; }
.feature-card__icon--yellow { background: rgba(0, 130, 190, 0.10) !important; color: #0082BE !important; }
.feature-card__icon--blue i, .feature-card__icon--yellow i { color: #0082BE !important; }
.feature-card__icon--green i { color: #25347A !important; }
.etapa-card__icon, .etapa-card:nth-child(even) .etapa-card__icon {
  background: rgba(0, 130, 190, 0.10) !important;
  color: #25347A;
}
.process__step-icon { background: rgba(0, 130, 190, 0.10); color: #0082BE; }
.process__step-icon i { color: #0082BE; }
.process__step:nth-child(even) .process__step-icon i { color: #25347A; }
.contact-card__icon--blue, .contact-card__icon--green, .contact-card__icon--yellow {
  background: rgba(0, 130, 190, 0.10) !important;
}

/* Tabla de examenes Cambridge */
.exam-table { max-width: 760px; margin: 2.5rem auto 0; border-collapse: collapse; width: 100%; }
.exam-table th, .exam-table td {
  padding: 14px 18px; text-align: left;
  border-bottom: 1px solid rgba(37, 52, 122, 0.1);
  font-size: 0.95rem;
}
.exam-table th {
  font-family: var(--font-heading); font-weight: 800; color: #25347A;
  background: var(--pastel-sky);
}
.exam-table td { color: rgba(24, 35, 84, 0.78); }
.exam-table td strong { color: #0082BE; }
.exam-table tr:last-child td { border-bottom: none; }
/* Plan de estudios: cifras centradas, el nombre del módulo a la izquierda */
.exam-table--plan th, .exam-table--plan td { text-align: center; }
.exam-table--plan th:first-child, .exam-table--plan td:first-child { text-align: left; }
.exam-table-wrap { overflow-x: auto; border-radius: 18px; border: 1px solid rgba(37,52,122,0.1); background: #fff; }

/* page-hero-contencion: el fondo del hero nunca en flujo */
.page-hero {
  position: relative !important;
  overflow: hidden;
  min-height: clamp(480px, 62vh, 640px);
  display: flex;
  align-items: center;
}
.page-hero__bg {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
}
.page-hero__bg img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}
.page-hero > *:not(.page-hero__bg) { position: relative; z-index: 2; }
.page-hero__container, .page-hero__content {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 24px;
  width: 100%;
}

/* Variante navy (sustituye a green/yellow) */
.feature-card__icon--navy { background: rgba(37, 52, 122, 0.08) !important; color: #25347A !important; }
.feature-card__icon--navy i { color: #25347A !important; }

/* Seccion solicitar visita: dos columnas info + formulario */
.admission-form-section__container {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}
.admission-form-section__info { padding-top: 1rem; }
.admission-form-section__info .section-header { margin-bottom: 1.2rem; }
.admission-form-section__info p { color: rgba(24, 35, 84, 0.75); line-height: 1.7; margin-bottom: 1.4rem; }
.admission-form-section__info h3 {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.15rem;
  color: #25347A;
  margin-bottom: 0.9rem;
}
.admission-form-section__benefits { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.admission-form-section__benefits li {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--ink);
  font-weight: 600;
  font-size: 0.95rem;
}
.admission-form-section__benefits li svg { flex-shrink: 0; }
.admission-form-section .form-card { margin: 0; max-width: none; }
.etapa-card__icon i { font-size: 1.6rem; color: #25347A; }
.etapa-card:nth-child(even) .etapa-card__icon i { color: #0082BE; }
@media (max-width: 992px) {
  .admission-form-section__container { grid-template-columns: 1fr; }
}

/* admisiones-v2 */
/* FAQ: un solo indicador (fuera el chevron svg del markup) */
.faq-item__question svg { display: none !important; }

/* Mapa: tarjeta unica sobre la foto */
.map-contact__map-placeholder {
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 16px;
}
.map-contact__map-placeholder > svg { display: none; }
.map-contact__map-placeholder p,
.map-contact__map-placeholder a {
  position: static !important;
  background: none !important;
  margin: 0;
}
.map-contact__map-card,
.map-contact__map-placeholder .map-card-inner {
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(8px);
  border-radius: 16px;
  padding: 16px 20px;
}

/* Info de contacto: items con icono alineado */
.map-contact__info-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 1.4rem;
}
.map-contact__info-icon {
  width: 44px; height: 44px;
  border-radius: 13px;
  background: rgba(0, 130, 190, 0.10);
  color: #0082BE;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.map-contact__info-item:nth-child(odd) .map-contact__info-icon { color: #25347A; }
.map-contact__info-label {
  font-family: var(--font-heading);
  font-weight: 800; font-size: 0.85rem;
  color: #25347A;
  margin: 2px 0 2px;
}
.map-contact__info-value { color: rgba(24, 35, 84, 0.75); line-height: 1.55; font-size: 0.95rem; }

/* about-grid-restaurado: bridge oculta .about__grid pensando en el home,
   pero las paginas de etapa lo usan para sus tarjetas */
.about__grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 2.5rem;
}
.home .about__grid { display: none !important; }
@media (max-width: 900px) { .about__grid { grid-template-columns: 1fr; } }

/* process-step-chip: numero/icono como chip en flujo (el absoluto pisaba el titulo) */
.process__step { padding-top: 1.6rem; }
.process__step-number {
  position: static !important;
  width: 52px; height: 52px;
  border-radius: 16px;
  background: rgba(0, 130, 190, 0.12) !important;
  color: #0082BE !important;
  display: grid; place-items: center;
  font-family: var(--font-heading);
  font-size: 1.3rem !important;
  font-weight: 800;
  margin-bottom: 1rem;
}
.process__step:nth-child(even) .process__step-number { background: rgba(37, 52, 122, 0.10) !important; color: #25347A !important; }
.process__step-number svg.process__step-icon {
  width: 26px; height: 26px;
  background: none; margin: 0;
}
.process__step-number svg [stroke="white"] { stroke: currentColor; }
.process__step-number svg path, .process__step-number svg circle, .process__step-number svg rect { stroke: currentColor; }
/* photo-card como enlace (antes era figure) */
a.photo-card { display: block; text-decoration: none; color: inherit; cursor: pointer; }

/* feature-card--photo: tarjeta con foto real en lugar de icono */
.feature-card--photo { overflow: hidden; }
.feature-card--photo .feature-card__media {
  margin: calc(-1 * var(--space-8, 2rem)) calc(-1 * var(--space-8, 2rem)) 1.2rem;
  height: 190px;
  overflow: hidden;
}
.feature-card--photo .feature-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s cubic-bezier(0.22,1,0.36,1);
}
.feature-card--photo:hover .feature-card__media img { transform: scale(1.05); }

/* Extraescolares: el numero y el icono van en chips separados → misma fila,
   no apilados (en admisiones el icono va dentro del chip del numero) */
.process__step:has(> .process__step-icon) .process__step-number,
.process__step > .process__step-icon {
  display: inline-grid;
  vertical-align: top;
}
.process__step:has(> .process__step-icon) .process__step-number { margin: 0 0.6rem 1rem 0; }

/* form-admisiones-v2: mensaje a ancho completo, legal debajo, boton real */
.form-group:has(textarea),
.form-checkbox,
.form-submit { grid-column: 1 / -1; }
.form-group textarea, .form-group__textarea {
  width: 100%;
  min-height: 120px;
  padding: 13px 18px;
  border: 1.5px solid rgba(37, 52, 122, 0.15);
  border-radius: 14px;
  background: #FAFBFE;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--ink);
  resize: vertical;
}
.form-group__textarea:focus { outline: none; border-color: #0082BE; box-shadow: 0 0 0 4px rgba(0,130,190,0.12); }
.form-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.82rem;
  color: rgba(24, 35, 84, 0.65);
  line-height: 1.5;
}
.form-checkbox input { margin-top: 3px; accent-color: #0082BE; flex-shrink: 0; }
.form-checkbox a { color: #0082BE; text-decoration: underline; }
button.form-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  border: none;
  cursor: pointer;
  background: #FFB300;
  color: #182354;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.02rem;
  padding: 16px 32px;
  border-radius: 999px;
  box-shadow: 0 10px 30px -8px rgba(255, 179, 0, 0.55);
  transition: transform 0.3s cubic-bezier(0.22,1,0.36,1), box-shadow 0.3s ease, background 0.3s ease;
}
button.form-submit:hover {
  transform: translateY(-3px);
  background: #FFC53D;
  box-shadow: 0 16px 40px -10px rgba(255, 179, 0, 0.65);
}

/* map-contact-grid-v2: dos columnas mapa + info */
.map-contact__container {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
.map-contact__map { min-height: 420px; height: 100%; }
.map-contact__map-placeholder { height: 100%; min-height: 420px; }
.map-contact__info h2 { margin-top: 0 !important; }
@media (max-width: 900px) {
  .map-contact__container { grid-template-columns: 1fr; }
}

/* Columna info del formulario de extraescolares */
.form-side-photo {
  width: 100%;
  border-radius: 20px;
  margin-top: 1.4rem;
  display: block;
  box-shadow: var(--shadow-card);
  aspect-ratio: 16 / 11;
  object-fit: cover;
}
.admission-form-section__info .section-header { text-align: left; margin-bottom: 0; }

/* form-info-distribucion: columna info equilibrada con el formulario */
.admission-form-section__container { align-items: stretch; }
.admission-form-section__info {
  display: flex;
  flex-direction: column;
  padding-top: 0.5rem;
}
.form-side-photo {
  aspect-ratio: auto !important;
  flex: 1 1 auto;
  min-height: 300px;
  margin-top: 1.6rem;
}
.admission-form-section__benefits { margin-top: 1.6rem !important; gap: 14px; }

/* Foto de fondo generica para heroes sin estructura __bg */
.page-hero { position: relative; overflow: hidden; }
.hero-photo-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.32;
  z-index: 0;
  pointer-events: none;
}
.page-hero > *:not(.hero-photo-bg) { position: relative; z-index: 2; }

/* process-icons-v3: chips uniformes y todos los trazos/rellenos en azules */
.process__step-number,
.process__step:nth-child(even) .process__step-number {
  background: var(--pastel-sky) !important;
}
.process__step-number { color: #0082BE !important; }
.process__step:nth-child(even) .process__step-number { color: #25347A !important; }
.process__step-number svg [stroke="white"],
.process__step-number svg [stroke="#fff"],
.process__step-number svg [stroke="#ffffff"] { stroke: currentColor !important; }
.process__step-number svg [fill="white"],
.process__step-number svg [fill="#fff"],
.process__step-number svg [fill="#ffffff"] { fill: currentColor !important; }

/* Grid de 5 etapas visuales */
.extra-cards--5 { grid-template-columns: repeat(5, 1fr); margin-top: 2.5rem; }
.extra-cards--5 .extra-card { aspect-ratio: 3 / 4; }
@media (max-width: 1100px) { .extra-cards--5 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .extra-cards--5 { grid-template-columns: repeat(2, 1fr); } }

/* form-card-title-una-linea */
.form-card__title, .form-card h2 {
  font-size: clamp(1.25rem, 2vw, 1.6rem) !important;
  white-space: nowrap;
  letter-spacing: -0.02em;
}
@media (max-width: 640px) {
  .form-card__title, .form-card h2 { white-space: normal; }
}

/* etapas-mas-grandes: tarjetas de etapa a mayor tamaño */
.etapas-section__container { max-width: 1400px !important; }
.extra-cards--5 { gap: 20px; }
.extra-cards--5 .extra-card { aspect-ratio: 3 / 4.1; }
.extra-cards--5 .extra-card__name { font-size: 1.15rem; }
.extra-cards--5 .extra-card__partner { font-size: 0.8rem; }

/* MVV oficial */
.mvv-intro { max-width: 720px; margin: 0 auto 2.5rem; text-align: center; }
.mvv-intro__lead {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.25rem;
  color: #25347A;
  margin-bottom: 0.8rem;
}
.mvv-intro p:not(.mvv-intro__lead) { color: rgba(24,35,84,0.72); line-height: 1.7; }
.mvv-block {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 1.5rem;
  background: #fff;
  border: 1px solid rgba(37,52,122,0.08);
  border-radius: var(--radius-card);
  padding: clamp(1.6rem, 3vw, 2.2rem);
  margin-bottom: 1.4rem;
  box-shadow: var(--shadow-card);
}
.mvv-block__icon {
  width: 60px; height: 60px;
  border-radius: 18px;
  background: rgba(0,130,190,0.10);
  display: grid; place-items: center;
  font-size: 1.8rem;
  color: #0082BE;
}
.mvv-block__icon--alt { color: #25347A; background: rgba(37,52,122,0.08); }
.mvv-block__title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(1.15rem, 2.2vw, 1.45rem);
  color: #25347A;
  margin-bottom: 0.8rem;
  letter-spacing: -0.01em;
}
.mvv-block p { color: rgba(24,35,84,0.75); line-height: 1.7; margin-bottom: 0.8rem; }
.mvv-valores { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; margin-top: 0.6rem; }
.mvv-valor h4 {
  font-family: var(--font-heading);
  font-weight: 800;
  color: #0082BE;
  margin-bottom: 0.4rem;
  font-size: 1rem;
}
.mvv-valor p { font-size: 0.92rem; }
@media (max-width: 900px) {
  .mvv-block { grid-template-columns: 1fr; }
  .mvv-valores { grid-template-columns: 1fr; }
}

/* Enlaces de interes */
.interest-links { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.interest-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid rgba(37,52,122,0.1);
  border-radius: 999px;
  padding: 11px 20px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.9rem;
  color: #25347A;
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease;
}
.interest-link i { color: #0082BE; font-size: 0.85rem; }
.interest-link:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card);
  background: var(--pastel-sky);
  color: #0082BE;
}

/* fixes-v8 (2026-08-28) — responsive del menú móvil y tarjetas del blog */

/* 1) El menú móvil (z: nav+1) tapaba la píldora del navbar entera: sin X ni
   hamburguesa visibles, no había forma de cerrarlo. La píldora debe quedar
   POR ENCIMA del panel (el propio menú ya le reserva el hueco con ::before). */
.navbar__container {
  position: relative;
  z-index: calc(var(--z-nav, 1000) + 2);
}

/* 2) El icono nunca se convertía en X: el CSS esperaba .active pero navbar.js
   pone .is-active. Se cubren las dos. */
.navbar__hamburger.is-active .navbar__hamburger-line:nth-child(1) {
  transform: rotate(45deg) translate(3px, 3px);
}
.navbar__hamburger.is-active .navbar__hamburger-line:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.navbar__hamburger.is-active .navbar__hamburger-line:nth-child(3) {
  transform: rotate(-45deg) translate(4px, -4px);
}

/* 3) Con el menú abierto las líneas se ponían blancas… sobre la píldora
   blanca: X invisible. La píldora sigue visible, así que van oscuras. */
.navbar__hamburger[aria-expanded="true"] .navbar__hamburger-line {
  background: #182354;
}

/* 4) Píldora despegada del borde también con notch (iPhone). */
@media (max-width: 767px) {
  .navbar { top: calc(10px + env(safe-area-inset-top, 0px)); }
}

/* 5) Cinturón de seguridad: si alguna tarjeta portada queda por ahí, en
   pantallas pequeñas el overlay absoluto recorta títulos largos → el
   contenido pasa a flujo normal bajo la foto. */
@media (max-width: 768px) {
  .blog-card-full--cover .blog-card-full__image,
  .blog-card-full--cover .blog-card-full__img-placeholder { height: 200px; }
  .blog-card-full--cover .blog-card-full__content {
    position: static;
    opacity: 1;
    transform: none;
    background: #182354;
    padding: 1.25rem 1.5rem 1.4rem;
  }
}

/* 6) El enlace-imagen de la tarjeta es un <a> (inline): su height:200px no
   aplicaba y el área de foto crecía hasta empujar el texto fuera de la
   tarjeta. En bloque, la foto mide lo que debe y el texto queda debajo. */
.blog-card-full__image {
  display: block;
  height: 200px;
}

/* fixes-v9 (2026-08-28) — el icono hamburguesa era invisible arriba del todo:
   las líneas nacen blancas y solo se oscurecen con .navbar--scrolled, pero la
   píldora es blanca SIEMPRE. Oscuras en todos los estados, y el hover deja de
   ser blanco-sobre-blanco. */
.navbar__hamburger-line,
.navbar--scrolled .navbar__hamburger-line,
.navbar__hamburger[aria-expanded="true"] .navbar__hamburger-line,
.navbar__hamburger.is-active .navbar__hamburger-line {
  background: #182354;
}
.navbar__hamburger:hover,
.navbar__hamburger:focus-visible {
  background: rgba(37, 52, 122, 0.08);
}

/* fixes-v10 (2026-08-28) — submenús del menú móvil: plegados conservaban el
   padding-bottom (16px de hueco con la primera línea del submenú asomando
   bajo "El Colegio" y "Oferta Educativa"). Plegado = sin padding; el padding
   vuelve solo al abrir. */
.navbar__mobile-sublist {
  padding: 0 0 0 16px;
  transition: max-height 0.4s ease, padding 0.3s ease;
}
.navbar__mobile-sublist.is-open {
  padding-bottom: 16px;
}

/* fixes-v11 (2026-08-28) — el hueco superior del menú móvil era fijo (80px)
   pero la píldora baja con el notch (safe-area): en iPhone el primer elemento
   quedaba debajo de la píldora. El hueco sigue el mismo cálculo que la
   píldora (safe-area + alto de píldora) más un margen de aire. */
.navbar__mobile-inner::before {
  height: calc(env(safe-area-inset-top, 0px) + 14px + 82px + 26px);
}
@media (max-width: 767px) {
  .navbar__mobile-inner::before {
    height: calc(env(safe-area-inset-top, 0px) + 10px + 68px + 26px);
  }
}

/* fixes-v12 (2026-08-28) — tabla de la política de cookies (ahora llega en
   markdown desde el panel) con un mínimo de estilo. */
.legal-page table { border-collapse: collapse; width: 100%; margin: 1rem 0; }
.legal-page th, .legal-page td { border: 1px solid #ddd; padding: 8px 12px; text-align: left; }
.legal-page th { background: #f5f7fb; }


/* fixes-v14 (2026-09-03) — acceso a la Plataforma Educamos, bien visible:
   botón azul en la píldora (escritorio y móvil) + botón en el menú móvil. */
.navbar__educamos {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #0082BE;
  color: #fff;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 13.5px;
  padding: 10px 15px;
  border-radius: 999px;
  text-decoration: none;
  margin-right: 10px;
  white-space: nowrap;
  transition: background 0.25s ease, transform 0.25s ease;
}
.navbar__educamos:hover,
.navbar__educamos:focus-visible {
  background: #006c9e;
  transform: translateY(-1px);
  color: #fff;
}
@media (max-width: 992px) {
  /* En móvil la píldora solo lleva logo + hamburguesa: el botón cabe compacto */
  .navbar__educamos { margin-right: 8px; padding: 9px 12px; font-size: 12.5px; }
}
@media (max-width: 380px) {
  /* En pantallas mínimas, solo el icono para no pisar el logo */
  .navbar__educamos span { display: none; }
  .navbar__educamos { padding: 9px 10px; }
}

/* Botón dentro del panel del menú móvil, bajo el CTA de Admisiones */
.navbar__mobile-educamos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
  padding: 14px;
  border-radius: 999px;
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  transition: background 0.25s ease, border-color 0.25s ease;
}
.navbar__mobile-educamos:hover,
.navbar__mobile-educamos:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.6);
}

/* fixes-v15 (2026-09-03) — las dos marquesinas de la home (testimonios y
   partners) iban en la misma dirección casi a la misma velocidad y en
   pantalla se percibía como un deslizamiento raro. La de partners va ahora
   al revés y más pausada: el ojo las lee como dos cosas distintas. */
.partners__track {
  animation: partnersScroll 52s linear infinite reverse;
}

/* fixes-v16 (2026-09-03) — enlaces de SalziShop/SalziBooks en Servicios */
.servicio-doclist { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.servicio-doclist li a {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(37, 52, 122, 0.06); border: 1px solid rgba(37, 52, 122, 0.12);
  border-radius: 999px; padding: 7px 13px;
  font-size: 0.88rem; font-weight: 600; color: #25347A; text-decoration: none;
  transition: background 0.25s ease, border-color 0.25s ease;
}
.servicio-doclist li a::before { content: "📄"; font-size: 0.85em; }
.servicio-doclist li a:hover { background: rgba(37, 52, 122, 0.12); border-color: rgba(37, 52, 122, 0.25); }
.servicio-sublinks { font-size: 0.85rem; }
.servicio-sublinks a { color: #0082BE; text-decoration: underline; text-underline-offset: 2px; }
.servicio-sublinks a:hover { color: #25347A; }

/* fixes-v17 (2026-09-03) — admisiones: subtítulo de los 4 pasos y sublista
   del bloque "Durante la reunión podrás conocer". */
.process .section-subtitle {
  margin-top: 10px;
  font-size: 1.05rem;
  color: rgba(24, 35, 84, 0.65);
}
.admission-form-section__sublist {
  list-style: disc;
  margin: 8px 0 0 20px;
  padding: 0;
  display: grid;
  gap: 6px;
  font-size: 0.95em;
  color: rgba(24, 35, 84, 0.8);
}

/* fixes-v18 (2026-09-03) — el formulario se descuadraba: una etiqueta a dos
   líneas ("Nombre y apellidos del representante legal") empujaba su campo y
   los inputs de la misma fila quedaban a alturas distintas. Los campos se
   anclan al fondo de la fila: las etiquetas respiran arriba y los inputs
   siempre quedan alineados entre sí. */
.form-card .form-group { justify-content: flex-end; }
/* …y selects a la misma altura que los inputs (50px vs 52px nativos) */
.form-group__select { height: 52px; }

/* fixes-v19 (2026-09-03) — aire entre la cabecera de la tarjeta del
   formulario y los campos: el subtítulo iba pegado al primer label. */
.form-card__title { margin-bottom: 6px; }
.form-card__subtitle { margin-bottom: 26px; }

/* fixes-v20 (2026-09-03) — orden del navbar: logo a la izquierda, menú
   centrado y Educamos pegado a Admisiones a la derecha (antes el
   justify-between los repartía con huecos enormes). */
.navbar__container { justify-content: flex-start; }
.navbar__nav { margin-inline: auto; }
/* pareja pegada a la derecha, con un colchón mínimo respecto al menú */
.navbar__educamos { margin-left: 14px; margin-right: 0; }
@media (max-width: 992px) {
  /* sin menú de escritorio, Educamos se va a la derecha junto a la hamburguesa */
  .navbar__educamos { margin-left: auto; }
}
@media (max-width: 380px) {
  /* sin icono ya no se puede ocultar el texto: se compacta en su lugar */
  .navbar__educamos span { display: inline; }
  .navbar__educamos { padding: 8px 10px; font-size: 11.5px; }
}

/* fixes-v21 (2026-09-03) — Misión y Visión en dos columnas: a todo el ancho
   el texto quedaba en media tarjeta y descuadraba con el bloque de Valores. */
.mvv-pareja {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.4rem;
  margin-bottom: 1.4rem;
  align-items: stretch;
}
.mvv-pareja .mvv-block { margin-bottom: 0; }
@media (max-width: 900px) {
  .mvv-pareja { grid-template-columns: 1fr; }
}

/* fixes-v22 (2026-09-03) — Educamos con las proporciones de Admisiones y
   pegado a él (≈3px). */
.navbar__educamos {
  padding: 15px 22px;
  font-size: var(--text-base, 15px);
  margin-right: -13px;
}