/* ============================================================
   GSNA v3 — Componentes (réplica fiel del template licenciado)
   ============================================================ */

/* ============ BARRA DE PROGRESO DE SCROLL ============ */
.scroll-progress {
  position: fixed; inset: 0 0 auto 0; z-index: 110;
  height: 3px;
  pointer-events: none;
}
.scroll-progress span {
  display: block; height: 100%;
  background: var(--accent);
  transform: scaleX(0); transform-origin: left center;
  will-change: transform;
}
/* si el navegador soporta timeline de scroll, corre sin JS */
@supports (animation-timeline: scroll()) {
  .scroll-progress span {
    animation: growProgress linear both;
    animation-timeline: scroll(root block);
  }
}
@keyframes growProgress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* ============ NAVBAR PILL (compacta) ============ */
.navbar-wrap {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  padding: var(--sp-12) var(--page-padding) 0;
  pointer-events: none;
}
.navbar {
  pointer-events: auto;
  max-width: 1000px;
  margin-inline: auto;
  background: var(--white);
  border-radius: var(--radius-full);
  /* padding derecho mayor: el CTA no queda pegado al borde del pill */
  padding: 7px 16px 7px 22px;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-16);
  box-shadow: 0 2px 14px color-mix(in srgb, var(--ink) 7%, transparent);
  transition: max-width .45s cubic-bezier(.3,.7,.2,1), box-shadow .3s ease;
}
.navbar-wrap.is-scrolled .navbar {
  max-width: 860px;
  box-shadow: 0 6px 24px color-mix(in srgb, var(--ink) 14%, transparent);
}
/* el logo usa el SVG recortado: llena el alto sin agrandar el pill */
.navbar-logo { display: flex; align-items: center; }
.navbar-logo img { height: 34px; width: auto; }
.navbar-links { display: flex; align-items: center; gap: 2px; }
.nav-link {
  font-size: 13px; font-weight: var(--w-heading);
  padding: 9px 13px;
  border-radius: var(--radius-full);
  transition: background .25s ease;
  display: block;
}
.nav-link:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); }
.navbar-actions { display: flex; align-items: center; gap: 8px; }
.navbar-actions .btn-contact { padding: 11px 22px; font-size: 13px; }
.lang-toggle {
  font-weight: var(--w-heading);
  padding: 8px 12px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-subtle);
  transition: background .2s ease, color .2s ease;
}
.lang-toggle:hover { background: var(--ink); color: var(--cream); }
.navbar-burger {
  display: none;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ink) 7%, transparent);
  flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
.navbar-burger span { width: 16px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .25s ease; }
.navbar-burger[aria-expanded="true"] span:first-child { transform: translateY(3px) rotate(45deg); }
.navbar-burger[aria-expanded="true"] span:last-child { transform: translateY(-3px) rotate(-45deg); }
@media (max-width: 991px) {
  .navbar-links, .navbar .btn-contact { display: none; }
  .navbar-burger { display: flex; }
  .navbar-logo img { height: 40px; }
}
.mobile-menu {
  pointer-events: auto;
  max-width: 1200px;
  margin: var(--sp-8) auto 0;
  background: var(--white);
  border-radius: var(--radius-large);
  padding: var(--sp-32);
  box-shadow: 0 12px 40px color-mix(in srgb, var(--ink) 18%, transparent);
}

/* ============ HERO VIDEO (sticky) ============ */
.hero-video {
  position: sticky; top: 0; z-index: 0;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
  padding: var(--sp-48) var(--page-padding) calc(var(--sp-80) + 32px);
  overflow: hidden;
  color: white;
}
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-media video, .hero-media .hero-poster {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.hero-media::after {
  content: ""; position: absolute; inset: 0;
  /* degradado inferior en azul noche de marca */
  background: linear-gradient(180deg,
    rgba(14, 35, 95, .30) 0%,
    rgba(14, 35, 95, .06) 34%,
    rgba(9, 21, 58, .58) 62%,
    rgba(6, 14, 40, .88) 84%,
    rgba(5, 11, 33, .97) 100%);
}
.hero-content {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  max-width: 760px;
}
/* Entrada del hero en CSS puro: el contenido nunca depende del JS */
@keyframes heroIn {
  from { opacity: 0; transform: translateY(26px); }
  to { opacity: 1; transform: none; }
}
.hero-news, .hero-title, .hero-buttons, .map-card {
  animation: heroIn .9s cubic-bezier(.2, .7, .2, 1) both;
}
.hero-news { animation-delay: .1s; }
.hero-title { animation-delay: .24s; }
.hero-buttons { animation-delay: .38s; }
.map-card { animation-delay: .52s; }
@media (prefers-reduced-motion: reduce) {
  .hero-news, .hero-title, .hero-buttons, .map-card { animation: none; }
}
/* ---- Noticias: desliza el chip para ir a la noticia ---- */
.hero-news {
  position: relative;
  display: inline-flex; align-items: center; gap: var(--sp-8);
  background: color-mix(in srgb, var(--ink) 38%, transparent);
  border: 1px solid color-mix(in srgb, white 18%, transparent);
  backdrop-filter: blur(10px);
  border-radius: var(--radius-full);
  padding: 4px 16px 4px 4px;
  margin-bottom: var(--sp-20);
  overflow: hidden;
  touch-action: pan-y;
  isolation: isolate;
}
/* relleno de progreso al arrastrar */
.news-fill {
  position: absolute; inset: 0; z-index: 0;
  background: var(--accent);
  transform: scaleX(0); transform-origin: left center;
  opacity: .9;
}
.news-handle {
  position: relative; z-index: 3;
  /* los <a> son arrastrables por defecto: eso cancelaba el gesto del slider */
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  /* pan-y: el arrastre horizontal es nuestro, el scroll vertical sigue siendo del usuario */
  touch-action: pan-y;
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--cream); color: var(--ink);
  border-radius: var(--radius-full);
  padding: 5px 12px;
  font-size: 11px; letter-spacing: .75px;
  text-transform: uppercase; font-weight: var(--w-heading);
  cursor: grab;
  user-select: none;
  box-shadow: 0 2px 10px color-mix(in srgb, var(--ink) 25%, transparent);
  will-change: transform;
}
.news-handle:active, .hero-news.is-dragging .news-handle { cursor: grabbing; }
.news-handle-arrow { display: flex; width: 13px; height: 13px; }
.news-handle-arrow svg { width: 100%; height: 100%; }
.hero-news-text {
  position: relative; z-index: 2;
  font-size: 11px; letter-spacing: .75px;
  text-transform: uppercase; font-weight: var(--w-medium);
  color: color-mix(in srgb, white 88%, transparent);
  white-space: nowrap;
}
/* chevrons que invitan al gesto */
.news-hint {
  position: relative; z-index: 2;
  display: inline-flex; align-items: center; gap: 3px;
  margin-left: 2px;
}
.news-hint i {
  width: 5px; height: 5px;
  border-right: 1.5px solid color-mix(in srgb, white 70%, transparent);
  border-top: 1.5px solid color-mix(in srgb, white 70%, transparent);
  transform: rotate(45deg);
  opacity: .35;
}
@media (prefers-reduced-motion: no-preference) {
  .news-hint i { animation: newsHint 1.6s ease-in-out infinite; }
  .news-hint i:nth-child(2) { animation-delay: .18s; }
  .news-hint i:nth-child(3) { animation-delay: .36s; }
}
@keyframes newsHint {
  0%, 100% { opacity: .25; transform: rotate(45deg) translate(0, 0); }
  50% { opacity: 1; transform: rotate(45deg) translate(1.5px, -1.5px); }
}
.hero-news.is-dragging .news-hint, .hero-news.is-complete .news-hint { opacity: 0; }
.hero-title { color: white; font-size: clamp(36px, 4.5vw, 58px); line-height: 1.06; letter-spacing: -1.5px; }
.hero-buttons { display: flex; gap: var(--sp-8); margin-top: var(--sp-24); flex-wrap: wrap; justify-content: center; }

/* Find Us: card de cristal transparente con el mapa integrado */
.map-card {
  position: absolute; right: var(--sp-32); bottom: calc(var(--sp-48) + 32px); z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 7px 7px 9px;
  border-radius: 16px;
  background: color-mix(in srgb, white 8%, transparent);
  border: 1px solid color-mix(in srgb, white 28%, transparent);
  backdrop-filter: blur(16px) saturate(1.2);
  transition: background .3s ease, transform .3s ease, border-color .3s ease;
}
.map-card:hover {
  background: color-mix(in srgb, white 16%, transparent);
  border-color: color-mix(in srgb, white 45%, transparent);
  transform: translateY(-3px);
}
.map-card img {
  width: 72px; height: 72px;
  border-radius: 11px;
  object-fit: cover;
  display: block;
}
.map-card span.label { color: white; font-size: 9px; letter-spacing: 1.2px; }
/* en pantallas medianas el hero cede espacio a la card del mapa */
@media (max-width: 1180px) {
  .hero-content { max-width: 620px; margin-right: 180px; }
}
@media (max-width: 900px) {
  .hero-content { margin-right: 0; }
  .map-card { right: var(--sp-16); bottom: var(--sp-24); }
  .map-card img { width: 110px; height: 110px; }
}
@media (max-width: 767px) {
  .map-card { display: none; }
  .hero-news-text { max-width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* ============ PAGE BODY (tapa el hero, bordes redondeados) ============ */
/* DEFINICION UNICA. Estuvo duplicada aqui y en pages.css con el mismo cuerpo:
   al quitar la sombra de una, la otra la seguia pintando y parecia que el
   cambio no habia salido. Si hay que tocar .page-body, se toca aqui. */
.page-body {
  position: relative; z-index: 2;
  background: var(--bg-base);
  border-radius: var(--radius-large) var(--radius-large) 0 0;
  margin-top: -32px;
  /* Sin sombra: Seb la quito. El escalon ya se lee por el radio y el cambio de
     fondo. */
}
/* El radio de .page-body lo pintaba por encima cualquier primer hijo con fondo
   propio: en /admisiones la banda de prueba es azul opaca y cuadraba la esquina.
   Se le pasa el mismo radio al primer hijo, sea cual sea.
   NO se usa overflow:hidden, que seria lo obvio: .page-body es el contenedor de
   la ultima seccion sticky y recortarlo mataria el efecto del footer. */
.page-body > *:first-child {
  border-top-left-radius: var(--radius-large);
  border-top-right-radius: var(--radius-large);
}

/* ============ SHAPES DECORATIVOS (iconografía GSNA por el flujo) ============ */
.section-deco {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.deco { position: absolute; opacity: .5; }
.deco svg { width: 100%; height: auto; display: block; }
/* features */
.deco-f1 { width: 74px; left: 4%; top: 16%; rotate: -14deg; }
.deco-f2 { width: 22px; right: 8%; top: 12%; }
.deco-f3 { width: 62px; right: 3%; bottom: 14%; rotate: 8deg; }
/* video + testimonios */
.deco-j1 { width: 58px; left: 2%; top: 8%; }
.deco-j2 { width: 70px; right: 3%; bottom: 6%; rotate: 168deg; }
/* faq */
.deco-q1 { width: 66px; left: 3%; bottom: 12%; rotate: 96deg; }
.deco-q2 { width: 26px; right: 6%; top: 14%; }
@media (max-width: 991px) { .section-deco { display: none; } }

/* ============ FEATURES ============ */
.features-section { text-align: center; }
.features-section .container, .faq-grid, .joy-head { position: relative; z-index: 1; }
.features-intro { max-width: 720px; margin-inline: auto; }
.features-intro .h4 { margin-top: var(--sp-20); }
.features-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-32);
  max-width: 1080px;
  margin: var(--sp-64) auto 0;
}
.feature-card { display: flex; flex-direction: column; align-items: center; gap: var(--sp-8); }
.feature-icon { width: 44px; height: 44px; display: grid; place-items: center; }
.feature-icon svg { width: 38px; height: 38px; }
.feature-card .h6 { text-transform: uppercase; letter-spacing: .5px; font-size: 13px; }
.feature-card p { color: var(--tone-medium); max-width: 24ch; font-size: var(--fs-body-3); line-height: var(--lh-body-3); }
@media (max-width: 900px) { .features-grid { grid-template-columns: repeat(2, 1fr); } }

/* ============ OUR PHILOSOPHY (foto + dibujo + doodles, fondo crema profundo) ============ */
.philosophy-section {
  background: var(--cream-deep);
  padding-block: var(--section-m);
  overflow: hidden;
}
.philosophy-grid {
  display: grid; grid-template-columns: 1.05fr 1fr;
  gap: var(--sp-80);
  align-items: center;
}
.philosophy-visual { position: relative; padding: var(--sp-48) var(--sp-24); }
.philosophy-photo {
  border-radius: var(--radius-large);
  overflow: hidden;
  transform: rotate(-3deg);
  box-shadow: 0 18px 50px color-mix(in srgb, var(--ink) 14%, transparent);
}
.philosophy-photo img { width: 100%; height: auto; }
.philosophy-drawing {
  position: absolute; top: -4%; right: -3%;
  width: 42%;
  /* height auto es OBLIGATORIO cuando el ancho lo pone el CSS: el atributo
     height del <img> se aplica literal si el CSS no dice nada, y aplastaba
     este dibujo cuadrado a 279x760. */
  height: auto;
  transform: rotate(4deg);
  filter: drop-shadow(0 10px 24px color-mix(in srgb, var(--ink) 18%, transparent));
}
.doodle { position: absolute; color: var(--mustard); cursor: pointer; }
.doodle svg { width: 100%; height: auto; display: block; }
.doodle-bulb { left: -2%; bottom: 6%; width: 92px; rotate: -8deg; }
/* Iconografía GSNA como doodles (arco, medio arco, dona, círculo) */
.doodle-quarter { right: -1%; bottom: 2%; width: 88px; color: var(--coral); rotate: 10deg; }
.doodle-half { left: 8%; top: -2%; width: 92px; color: var(--sky); rotate: -12deg; }
.doodle-donut { right: 14%; bottom: -5%; width: 74px; color: var(--mint); }
.doodle-dot { left: -3%; top: 26%; width: 38px; color: var(--accent); }
.philosophy-copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-20); }
/* pill cristalino: deja ver el fondo y los doodles que pasan por detrás */
.philosophy-copy .tag-solid {
  background: color-mix(in srgb, white 20%, transparent);
  border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
  backdrop-filter: blur(10px) saturate(1.1);
  color: var(--tone-strong);
}
.philosophy-copy p { color: var(--tone-medium); max-width: 52ch; }
@media (max-width: 900px) {
  .philosophy-grid { grid-template-columns: 1fr; gap: var(--sp-48); }
  .philosophy-drawing { width: 46%; right: 0; }
}

/* ============ VIDEO JOY + TESTIMONIOS ============ */
.joy-head { text-align: center; margin-bottom: var(--sp-32); }
.joy-media {
  position: relative;
  /* width 100% es OBLIGATORIO junto a aspect-ratio + min-height: sin el, en
     movil el alto no puede bajar de 320px y el navegador calcula el ancho
     como 320 x 2 = 640px, con lo que el video se salia 262px de la pantalla. */
  width: 100%;
  border-radius: var(--radius-large);
  overflow: hidden;
  aspect-ratio: 16 / 8;
  min-height: 320px;
  background: var(--ink);
}
.joy-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.watch-pill {
  position: absolute; right: var(--sp-24); top: var(--sp-24); z-index: 2;
  display: inline-flex; align-items: center; gap: var(--sp-8);
  background: color-mix(in srgb, var(--ink) 45%, transparent);
  backdrop-filter: blur(8px);
  color: white;
  border-radius: var(--radius-full);
  padding: 6px 16px 6px 6px;
  transition: background .25s ease;
}
.watch-pill:hover { background: color-mix(in srgb, var(--ink) 65%, transparent); }
.watch-pill .play-dot {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--accent);
  display: grid; place-items: center;
  color: var(--cream);
}
.testimonials-carousel { margin-top: var(--grid-gap); }
.testimonials-nav { display: flex; justify-content: flex-end; gap: var(--sp-8); margin-bottom: var(--sp-16); }
.testimonials-nav .btn-circle { width: 42px; height: 42px; }
.testimonials-track {
  display: flex; gap: var(--grid-gap);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-bottom: var(--sp-8);
  scrollbar-width: none;
}
.testimonials-track::-webkit-scrollbar { display: none; }
.testimonial-card {
  flex: 0 0 clamp(270px, 30vw, 400px);
  scroll-snap-align: start;
  background: var(--bg-lift);
  border-radius: var(--radius-large);
  padding: var(--sp-24);
  display: flex; flex-direction: column; gap: var(--sp-16);
}
.stars { color: var(--mustard); letter-spacing: 2px; font-size: 14px; }
.testimonial-card blockquote { font-size: var(--fs-body-2); line-height: var(--lh-body-2); font-weight: var(--w-medium); }
.testimonial-card blockquote { flex-grow: 1; }
.testimonial-author { display: flex; align-items: center; gap: var(--sp-12); margin-top: auto; }
.avatar {
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  font-weight: var(--w-heading); color: var(--ink);
  overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) { .testimonials-grid { grid-template-columns: 1fr; } }

/* ============ FRANJA OLA + STATS (sobre video full-bleed) ============ */
.ribbon-section {
  position: relative;
  min-height: 72svh;
  overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.ribbon-media { position: absolute; inset: 0; }
.ribbon-media video, .ribbon-media .ribbon-fill {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.ribbon-media::after {
  content: ""; position: absolute; inset: 0;
  /* degradado que funde el video con el café de la sección siguiente */
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--ink) 10%, transparent) 0%,
    color-mix(in srgb, var(--ink) 6%, transparent) 45%,
    color-mix(in srgb, var(--ink) 62%, transparent) 78%,
    var(--ink) 100%);
}
.ribbon-stats {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-24);
  padding: 0 var(--sp-48) var(--sp-48);
  color: white;
}
/* cada stat aparece con CSS (el contador lo dispara IntersectionObserver) */
.stat-item-anim {
  animation: heroIn .8s cubic-bezier(.2, .7, .2, 1) both;
  animation-timeline: view();
  animation-range: entry 5% cover 22%;
}
@supports not (animation-timeline: view()) {
  .stat-item-anim { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  .stat-item-anim { animation: none; }
}
.ribbon-stats .stat-icon {
  display: block;
  width: 34px; height: 34px;
  margin-bottom: var(--sp-12);
}
.ribbon-stats .stat-icon svg { width: 100%; height: 100%; }
.ribbon-stats .stat-figure { display: flex; align-items: baseline; }
.ribbon-stats .stat-num, .ribbon-stats .stat-suffix {
  font-size: var(--fs-h2); line-height: var(--lh-h2);
  font-weight: var(--w-heading); color: white;
}
.ribbon-stats p { color: color-mix(in srgb, white 85%, transparent); font-size: var(--fs-body-3); margin-top: 2px; }
@media (max-width: 900px) {
  .ribbon-stats { grid-template-columns: repeat(2, 1fr); padding: 0 var(--sp-24) var(--sp-32); }
}

/* ============ PROGRAMAS (banda café, uso controlado) ============ */
.programs-section {
  background: var(--ink);
  color: var(--cream);
  padding-block: var(--section-m);
  overflow: hidden;
}
.programs-section .programs-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--sp-32);
  margin-bottom: var(--sp-48);
}
.programs-section h2 { color: var(--cream); max-width: 26ch; }
.programs-nav { display: flex; gap: var(--sp-8); flex: none; }
.programs-nav .btn-circle {
  background: color-mix(in srgb, var(--cream) 10%, transparent);
  color: var(--cream);
  width: 42px; height: 42px;
}
.programs-nav .btn-circle:hover { background: color-mix(in srgb, var(--cream) 20%, transparent); }
.programs-track {
  padding-top: 12px; margin-top: -12px;
  display: flex; gap: var(--grid-gap);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-bottom: var(--sp-8);
  scrollbar-width: none;
}
.programs-track::-webkit-scrollbar { display: none; }
.program-card {
  flex: 0 0 clamp(300px, 42vw, 580px);
  scroll-snap-align: start;
  border-radius: var(--radius-large);
  overflow: hidden;
  display: grid; grid-template-columns: 1fr 1fr;
  background: var(--white);
  color: var(--ink);
  min-height: 260px;
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
}
.program-card:hover { transform: translateY(-8px); }
.program-media {
  position: relative; display: grid; place-items: center; min-height: 180px;
  overflow: hidden;
}
.program-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* el sello del nivel respira al pasar el mouse por la tarjeta */
.program-media .level-icon {
  width: 68px; height: 68px;
  transition: transform .5s cubic-bezier(.3, .7, .2, 1.3);
}
.program-card:hover .level-icon { transform: scale(1.16) rotate(-8deg); }
.program-body .btn { transition: background .25s ease, transform .35s cubic-bezier(.3,.7,.2,1.3); }
.program-card:hover .program-body .btn { transform: translateX(4px); }
.program-body { padding: var(--sp-20); display: flex; flex-direction: column; gap: var(--sp-8); }
.program-body .label { color: var(--tone-medium); font-size: 10px; }
.program-body .btn { margin-top: auto; align-self: flex-start; padding: 10px 20px; font-size: 13px; }
@media (max-width: 700px) { .program-card { grid-template-columns: 1fr; } }

/* ============ FAQ (dos columnas, tiles sky) ============ */
.faq-grid {
  display: grid; grid-template-columns: 1fr 1.35fr;
  gap: var(--sp-64);
  align-items: start;
}
.faq-intro { position: sticky; top: 100px; }
.faq-intro .h2 { margin-top: var(--sp-12); }
.faq-intro p { color: var(--tone-medium); margin-top: var(--sp-12); max-width: 34ch; }
.faq-list { display: flex; flex-direction: column; gap: var(--sp-8); }
.faq-item {
  background: var(--sky-light);
  border-radius: var(--radius-default);
  padding: var(--sp-20) var(--sp-24);
}
.faq-item summary { cursor: pointer; list-style: none; position: relative; padding-right: 40px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; position: absolute; right: 2px; top: 50%;
  transform: translateY(-50%);
  font-size: 22px; font-weight: 400; color: var(--tone-medium);
  transition: transform .25s ease;
}
.faq-item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq-item p { margin-top: var(--sp-12); color: var(--tone-medium); max-width: 60ch; }
@media (max-width: 900px) {
  .faq-grid { grid-template-columns: 1fr; gap: var(--sp-32); }
  .faq-intro { position: static; }
}

/* ============ FOOTER (mega-tile crema con video) ============ */
.footer { padding: var(--grid-gap); }
.footer-tile {
  background: var(--cream-deep);
  border-radius: var(--radius-large);
  padding: var(--grid-gap);
  display: flex; flex-direction: column;
}
.footer-video {
  position: relative;
  border-radius: calc(var(--radius-large) - 8px);
  overflow: hidden;
  min-height: 380px;
  display: flex; align-items: flex-start;
  padding: var(--sp-48);
  background: var(--ink);
}
.footer-video video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.footer-video::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(120deg, color-mix(in srgb, var(--ink) 45%, transparent) 0%, transparent 55%);
}
.footer-video-content { position: relative; z-index: 2; display: flex; flex-direction: column; gap: var(--sp-20); max-width: 520px; }
.footer-video-content .h2 { color: white; }
.footer-video-content .footer-cta-buttons { display: flex; gap: var(--sp-8); flex-wrap: wrap; }
/* 3 columnas: contacto (izq) + Nosotros + Para familias (der) */
.footer-columns {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr;
  gap: var(--sp-48);
  padding: var(--sp-64) var(--sp-24) var(--sp-48);
  align-items: start;
}
.footer-col-contact { display: flex; flex-direction: column; gap: var(--sp-4); max-width: 420px; }
.footer-col-contact .label { color: var(--tone-medium); margin-bottom: var(--sp-12); }
/* body-2, no h5: usaba tamano de subtitulo (19px) y quedaba mas grande que
   los enlaces del menu de al lado (16px). Ahora los dos miden lo mismo y la
   fila del footer se lee pareja. */
.footer-col-contact .contact-line { font-size: var(--fs-body-2); line-height: var(--lh-body-2); font-weight: var(--w-medium); }
.footer-col-contact .contact-note { color: var(--tone-medium); margin-bottom: var(--sp-12); font-size: var(--fs-body-3); line-height: var(--lh-body-3); }
.footer-col .label { color: var(--tone-medium); margin-bottom: var(--sp-12); }
.footer-col ul { display: flex; flex-direction: column; gap: var(--sp-8); }
.footer-col a { font-weight: var(--w-heading); }
.footer-col a:hover { color: var(--accent); }

/* Marca: GSNA a la izquierda, sello Cambridge a la derecha */
.footer-brand-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-32); flex-wrap: wrap;
  padding: 0 var(--sp-24) var(--sp-16);
}
.footer-logo-gsna { width: 210px; height: auto; }
.footer-logo-cambridge { width: 96px; height: auto; opacity: .9; }
.footer-legal {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-16); flex-wrap: wrap;
  color: var(--tone-medium);
  padding: var(--sp-12) var(--sp-24) var(--sp-8);
  border-top: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
}
.footer-legal .footer-links { display: flex; gap: var(--sp-16); }
.footer-legal a:hover { color: var(--ink); }
/* ============ ACCESOS LATERALES FLOTANTES ============ */
/* Home: nacen como rail lateral izquierdo y, al scrollear, VUELAN a las
   esquinas superiores alineados con el pill del navbar (FIDIAS a la derecha,
   admisiones a la izquierda). En las demás páginas nacen ya "dockeados". */
.fab-rail { display: contents; }
.fab {
  --fw: 52px;
  position: fixed; z-index: 95; left: 16px;
  display: flex; align-items: center;
  height: var(--fw); max-width: var(--fw); border-radius: 99px;
  text-decoration: none; overflow: hidden;
  background: var(--ink); color: var(--cream);
  box-shadow: 0 10px 26px rgba(14,35,95,.22);
  transition: max-width .45s cubic-bezier(.3,.7,.2,1), background .3s;
}
.fab.is-fidias { top: calc(50% - var(--fw) - 6px); }
.fab.is-adm   { top: calc(50% + 6px); background: var(--gsna-red); }
.fab-ico { flex: none; width: var(--fw); height: var(--fw); display: grid; place-items: center; }
.fab-ico svg { width: 22px; height: 22px; }
.fab-label { white-space: nowrap; font-size: 13.5px; font-weight: 700; padding-right: 20px; opacity: 0; transition: opacity .3s .1s; }
.fab.is-fidias:hover { background: var(--sky); color: var(--ink); }
.fab.is-adm:hover { background: var(--ink); }

/* --- modo rail (solo home, antes de scrollear): se expande al hover --- */
.fab-rail:not(.is-docked) .fab:hover,
.fab-rail:not(.is-docked) .fab:focus-visible { max-width: 260px; }
.fab-rail:not(.is-docked) .fab:hover .fab-label,
.fab-rail:not(.is-docked) .fab:focus-visible .fab-label { opacity: 1; }

/* --- modo dock: esquinas superiores, a la altura del pill --- */
.fab-rail.is-docked .fab { overflow: visible; }
.fab-rail.is-docked .fab.is-fidias { left: auto; right: 16px; top: 14px; }
.fab-rail.is-docked .fab.is-adm { top: 14px; }
/* etiqueta como burbuja debajo del botón (no hay espacio lateral en la esquina) */
.fab-rail.is-docked .fab-label {
  position: absolute; top: calc(100% + 10px);
  background: var(--ink); color: var(--cream);
  padding: 8px 14px; border-radius: 12px; font-size: 12px;
  box-shadow: 0 8px 22px rgba(14,35,95,.25);
  pointer-events: none;
}
.fab-rail.is-docked .is-fidias .fab-label { right: 0; }
.fab-rail.is-docked .is-adm .fab-label { left: 0; }
.fab-rail.is-docked .fab:hover .fab-label { opacity: 1; }
/* páginas internas: aparecen en su sitio sin animación de vuelo */
.fab-rail.is-static .fab { transition: max-width .45s cubic-bezier(.3,.7,.2,1), background .3s; }

@media (max-width: 900px) {
  .fab { --fw: 44px; left: 12px; }
  .fab-ico svg { width: 19px; height: 19px; }
  /* en pantallas chicas el dock va a las esquinas INFERIORES: arriba chocan
     con el pill del navbar y el menú hamburguesa */
  .fab-rail.is-docked .fab.is-fidias { left: auto; right: 12px; top: auto; bottom: 14px; }
  .fab-rail.is-docked .fab.is-adm   { top: auto; bottom: 14px; }
  .fab-rail.is-docked .fab-label { top: auto; bottom: calc(100% + 10px); }
}

.footer-credit { font-size: 11px; opacity: .55; letter-spacing: .01em; }
.footer-credit a {
  color: inherit; font-weight: 600; text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 22%, transparent);
  transition: color .2s ease, border-color .2s ease;
}
.footer-credit a:hover { color: var(--accent); border-color: var(--accent); }
.footer-social { display: flex; gap: var(--sp-12); }
.footer-social a { color: var(--tone-medium); transition: color .2s ease; }
.footer-social a:hover { color: var(--ink); }
@media (max-width: 900px) {
  .footer-columns { grid-template-columns: 1fr 1fr; gap: var(--sp-32); padding-block: var(--sp-48); }
  .footer-col-contact { grid-column: 1 / -1; }
  .footer-logo-gsna { width: 160px; }
  .footer-logo-cambridge { width: 140px; }
}
/* ============ MODAL VIDEO COMPLETO ============ */
.video-modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; }
.video-modal[hidden] { display: none; }
.video-modal-backdrop {
  position: absolute; inset: 0;
  background: color-mix(in srgb, var(--ink) 78%, transparent);
  backdrop-filter: blur(6px);
}
.video-modal-card {
  position: relative; z-index: 2;
  width: min(920px, 92vw);
  border-radius: var(--radius-large);
  overflow: hidden;
  background: var(--ink);
  box-shadow: 0 30px 80px color-mix(in srgb, var(--ink) 50%, transparent);
}
.video-modal-card video { width: 100%; display: block; }
.video-modal-close {
  position: absolute; top: 12px; right: 12px; z-index: 3;
  width: 40px; height: 40px; border-radius: 50%;
  background: color-mix(in srgb, white 16%, transparent);
  color: white;
  backdrop-filter: blur(6px);
  display: grid; place-items: center;
  transition: background .2s ease;
}
.video-modal-close:hover { background: color-mix(in srgb, white 30%, transparent); }

@media (max-width: 900px) {
  .footer-video { padding: var(--sp-24); min-height: 300px; }
  .footer-columns, .footer-brand-row, .footer-legal { padding-inline: var(--sp-8); }
}

/* ============ DROPDOWNS DEL NAVBAR (referencia: Menu.svg del template) ============ */
.nav-item { position: relative; }
.nav-toggle {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 13px; font-weight: var(--w-heading);
  padding: 9px 13px;
  border-radius: var(--radius-full);
  transition: background .25s ease;
  cursor: pointer;
  color: inherit;
  /* ahora es un <a> navegable: sin subrayado, sin color de enlace */
  text-decoration: none;
}
.nav-toggle:hover,
.nav-item.is-open .nav-toggle { background: color-mix(in srgb, var(--ink) 7%, transparent); }
.nav-caret {
  width: 10px; height: 10px;
  transition: transform .3s cubic-bezier(.3, .7, .2, 1);
  flex: none;
}
.nav-caret svg { width: 100%; height: 100%; }
.nav-item.is-open .nav-caret { transform: rotate(180deg); }

/* la tarjeta flotante */
.nav-dropdown {
  position: absolute; top: calc(100% + 10px); left: 50%;
  min-width: 210px;
  background: var(--white);
  border-radius: var(--radius-default);
  padding: 8px;
  box-shadow: 0 14px 40px color-mix(in srgb, var(--ink) 16%, transparent);
  display: flex; flex-direction: column; gap: 2px;
  opacity: 0;
  transform: translateX(-50%) translateY(-8px) scale(.97);
  transform-origin: top center;
  pointer-events: none;
  transition: opacity .25s ease, transform .3s cubic-bezier(.3, .7, .2, 1);
  z-index: 10;
}
.nav-item.is-open .nav-dropdown {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
  pointer-events: auto;
}
/* puente invisible: el mouse puede bajar sin perder el hover */
.nav-dropdown::before {
  content: ""; position: absolute; inset: -12px 0 100% 0;
}
.nav-dropdown a {
  display: block;
  font-size: 13px; font-weight: var(--w-medium);
  padding: 9px 12px;
  border-radius: var(--radius-small);
  white-space: nowrap;
  transition: background .18s ease, color .18s ease;
}
.nav-dropdown a:hover {
  background: color-mix(in srgb, var(--ink) 6%, transparent);
  color: var(--accent);
}
.nav-dropdown .nav-dropdown-sep {
  height: 1px;
  background: var(--border-subtle);
  margin: 4px 8px;
}

/* menú móvil: los grupos se listan abiertos */
.mobile-menu .mobile-group { display: flex; flex-direction: column; gap: var(--sp-8); }
.mobile-menu .mobile-group-title {
  font-size: var(--fs-label); letter-spacing: var(--ls-label);
  text-transform: uppercase; font-weight: var(--w-heading);
  color: var(--tone-subtle);
}
.mobile-menu .mobile-sub {
  display: flex; flex-direction: column; gap: var(--sp-4);
  padding-left: var(--sp-12);
  border-left: 2px solid var(--border-subtle);
}
.mobile-menu .mobile-sub a { font-size: var(--fs-body-2); color: var(--tone-medium); }

/* ============================================================
   Pop-up de admisiones
   Pedido de Andrea (reunion 16 jul 2026): dar mas fuerza a admisiones.
   Aparece una vez por sesion, nunca en /admisiones ni /contacto.
   ============================================================ */
.promo-modal {
  position: fixed; inset: 0; z-index: 120;
  display: grid; place-items: center;
  padding: 24px;
}
.promo-modal[hidden] { display: none; }
/* red de seguridad: si por lo que sea no llega .is-open, la capa no debe
   quedar interceptando los clics de la pagina. */
.promo-modal:not(.is-open) { pointer-events: none; }
.promo-modal.is-open { pointer-events: auto; }
.promo-backdrop {
  position: absolute; inset: 0;
  background: color-mix(in srgb, var(--ink) 55%, transparent);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .5s ease;
}
.promo-modal.is-open .promo-backdrop { opacity: 1; }
/* El pop-up es el reel de bienvenida arriba y una barra de CTA abajo. El video
   va arriba con su barra debajo (no texto encima) porque trae subtitulos
   quemados: superponer texto chocaria con ellos. */
.promo-card {
  position: relative; z-index: 1;
  width: min(342px, 100%);
  display: flex; flex-direction: column;
  max-height: 96vh;
  background: var(--cream);
  border-radius: var(--radius-large);
  overflow: hidden;
  box-shadow: 0 30px 90px color-mix(in srgb, var(--ink) 40%, transparent);
  opacity: 0; transform: translateY(18px) scale(.96);
  transition: opacity .55s cubic-bezier(.3,.7,.2,1), transform .55s cubic-bezier(.3,.7,.2,1);
}
.promo-modal.is-open .promo-card { opacity: 1; transform: none; }
.promo-video-wrap {
  position: relative;
  aspect-ratio: 9 / 16;
  /* sin tope de alto: el video se muestra completo (9:16) para que se lean los
     subtitulos. Si en una pantalla muy baja la tarjeta tiene que encogerlo,
     min-height:0 deja que flex lo achique y object-position:bottom conserva la
     parte de abajo (donde estan los subtitulos). */
  min-height: 0;
  background: #05060f;
  cursor: pointer;   /* tocar el video activa el sonido */
}
.promo-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center bottom;
  display: block;
}
.promo-close {
  position: absolute; top: 12px; right: 12px; z-index: 3;
  width: 34px; height: 34px; display: grid; place-items: center;
  border-radius: var(--radius-full); color: #fff;
  background: color-mix(in srgb, #05060f 40%, transparent);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  border: 0; cursor: pointer;
  transition: background .25s ease, transform .25s ease;
}
.promo-close svg { width: 13px; height: 13px; }
.promo-close:hover { background: color-mix(in srgb, #05060f 60%, transparent); transform: rotate(90deg); }
.promo-sound {
  position: absolute; top: 12px; left: 12px; z-index: 3;
  width: 34px; height: 34px; display: grid; place-items: center;
  border-radius: var(--radius-full); color: #fff;
  background: color-mix(in srgb, #05060f 40%, transparent);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.promo-sound svg { width: 18px; height: 18px; }
.promo-sound .promo-ic-on, .promo-sound .promo-ic-off { display: none; }
.promo-video-wrap.is-muted .promo-sound .promo-ic-off { display: block; }
.promo-video-wrap:not(.is-muted) .promo-sound .promo-ic-on { display: block; }
/* aviso de "toca para activar el sonido": solo mientras esta muteado */
.promo-tap {
  position: absolute; left: 50%; bottom: 14px; z-index: 3;
  transform: translateX(-50%);
  display: none; align-items: center; white-space: nowrap;
  padding: 8px 14px; border-radius: var(--radius-full);
  background: color-mix(in srgb, #05060f 55%, transparent);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  color: #fff; font-size: 12.5px; font-weight: var(--w-medium);
  animation: promoPulse 2s ease-in-out infinite;
}
.promo-video-wrap.is-muted .promo-tap { display: inline-flex; }
@keyframes promoPulse { 50% { opacity: .6; } }
.promo-bar {
  flex: none;
  background: var(--cream);
  padding: 20px 22px 22px;
  text-align: center;
}
.promo-eyebrow { color: var(--accent); margin-bottom: 7px; letter-spacing: .07em; }
.promo-title { color: var(--ink); margin-bottom: 16px; }
.promo-actions { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.promo-cta { width: 100%; justify-content: center; }
.promo-later {
  background: none; border: 0; cursor: pointer;
  font-size: 13px; color: color-mix(in srgb, var(--ink) 52%, transparent);
  padding: 4px 10px; transition: color .25s ease;
}
.promo-later:hover { color: var(--ink); }

@media (max-width: 600px) {
  .promo-card { width: min(342px, 92vw); }
}
/* si el usuario pidio menos movimiento, aparece sin desplazamiento */
@media (prefers-reduced-motion: reduce) {
  .promo-card { transition: opacity .3s ease; transform: none; }
  .promo-modal.is-open .promo-card { transform: none; }
  .promo-close:hover { transform: none; }
  .promo-tap { animation: none; }
}

/* ============================================================
   Alianzas en el hero: marquesina automatica bajo los botones
   Logos blancos sobre el video, chiquitos, con fade a los lados
   y la leyenda debajo.
   ============================================================ */
.hero-allies {
  margin-top: 42px;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  width: 100%;
  /* entra despues del titulo y los botones, sin depender de JS */
  animation: heroIn .9s cubic-bezier(.2, .7, .2, 1) .85s both;
}
.hero-allies-viewport {
  position: relative;
  width: 100%;
  max-width: 660px;
  overflow: hidden;
  /* fade transparente al inicio y al final */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
}
.hero-allies-track {
  user-select: none; -webkit-user-select: none;
  --mg: 42px;
  display: flex; align-items: center; gap: var(--mg);
  width: max-content;
  animation: heroAlliesScroll 42s linear infinite;
}

@keyframes heroAlliesScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.hero-ally {
  flex: none;
  display: flex; align-items: center;
}
.hero-ally img {
  /* altura FIJA, no 100%: dentro de un grid/flex el porcentaje no resuelve
     contra el padre y el navegador cae al tamano natural del PNG (120px),
     desbordando la fila. En px es deterministico. */
  height: 22px; width: auto;
  object-fit: contain;
  opacity: .82;
  /* sombra: son logos blancos sobre video, y el video tiene zonas claras
     donde se perdian. La sombra los despega sin ensuciar el hero. */
  filter: drop-shadow(0 1px 4px rgba(5, 11, 33, .55));
  transition: opacity .35s ease, transform .35s cubic-bezier(.3,.7,.2,1);
}
.hero-ally:hover img { opacity: 1; transform: scale(1.12); }
.hero-allies-caption {
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: color-mix(in srgb, var(--cream) 72%, transparent);
  text-shadow: 0 1px 4px rgba(5, 11, 33, .5);
}

@media (max-width: 700px) {
  .hero-allies { margin-top: 30px; gap: 10px; }
  .hero-allies-track {
  user-select: none; -webkit-user-select: none;
  --mg: 42px; gap: 30px; animation-duration: 32s; }
  .hero-ally img { height: 18px; }
  .hero-allies-viewport { max-width: 100%; }
}
/* sin movimiento: la fila se detiene y se puede recorrer a mano */
@media (prefers-reduced-motion: reduce) {
  .hero-allies-track {
  user-select: none; -webkit-user-select: none;
  --mg: 42px; animation: none; }
  .hero-allies-viewport { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
}


/* El video en movil: 16/8 es demasiado apaisado en una pantalla angosta y
   obliga a un min-height que no le corresponde. 4/3 respira mejor. */
@media (max-width: 700px) {
  .joy-media { aspect-ratio: 4 / 3; min-height: 0; }
  .watch-pill { right: var(--sp-12); top: var(--sp-12); }
}


/* ============================================================
   EL FOOTER SUBE POR ENCIMA DE LA ULTIMA SECCION
   Es el mismo gesto que el hero, al reves: alli el cuerpo pasa sobre un hero
   quieto; aca la ultima seccion se queda quieta y la lamina del footer sube
   sobre ella.

   El intento anterior dejaba el footer FIJO detras y el contenido lo iba
   destapando. Se veia mal por una razon concreta: el footer tiene el video de
   "¿Listos para ser parte de la familia?", y por una rendija que se abre de a
   poco ese video no se lee nunca. Asi el footer entra entero, como una carta
   que se pone encima.
   ============================================================ */
.js .footer-reveal .page-body > section:last-of-type {
  /* Se queda quieta mientras el footer le pasa por encima. Solo puede hacerlo
     porque el footer va DESPUES de ella dentro de .page-body: ese es todo el
     margen que tiene para quedarse. Si el footer se saca de ahi, el efecto
     desaparece sin avisar.

     Va anclada arriba, NO con `bottom: 0`. Parece lo natural para algo que se
     queda al final, pero sticky tira del elemento en los dos sentidos: con
     `bottom` la seccion se pega al borde inferior de la pantalla desde el
     scroll cero, a 8564px de donde le toca. Medido, no supuesto.

     El ancla es la altura del menu porque la barra es fija: a 0 la seccion se
     metia debajo. */
  position: sticky; top: var(--nav-height); z-index: 0;
  /* .section trae 120px de padding arriba. Clavada bajo el menu, esos 120px son
     aire muerto que empuja el card hacia abajo justo cuando el footer le sube:
     el card arrancaba a 192px del borde y le quedaba poquisimo recorrido antes
     de que lo taparan. Con 48 sube 72px y se lee entero mucho antes. */
  padding-top: var(--sp-48);
}
.js .footer-reveal .footer {
  position: relative; z-index: 2;
  /* SIN radio ni sombra a proposito. La tarjeta es .footer-tile y ya la trae;
     al ponerle radio y sombra tambien aqui salian DOS tarjetas, una clara
     envolviendo a la otra. El fondo si se queda: es opaco y es lo unico que
     tapa la seccion de atras mientras sube. Sin el, la seccion se ve por el
     borde de 16px que deja el padding del footer. */
  background: var(--bg-base);
}

/* "a medida que baje que se vaya difuminando lo de atras": la ultima seccion se
   apaga y se desenfoca mientras el footer le sube por encima.

   Va atada al scroll, no al tiempo: el difuminado avanza exactamente con lo que
   el footer haya subido, asi que si paras a mitad se queda a mitad.

   El reloj lo marca el footer (view-timeline-name) y lo lee la seccion. Para que
   una pueda leer el reloj de la otra hace falta declarar timeline-scope en el
   padre comun, que es .page-body. Si el navegador no lo soporta, no pasa nada:
   la seccion se queda visible y el footer la tapa igual. */
@supports (animation-timeline: view()) and (timeline-scope: --x) {
  .js .footer-reveal .page-body { timeline-scope: --pie; }
  .js .footer-reveal .footer { view-timeline-name: --pie; view-timeline-axis: block; }
  .js .footer-reveal .page-body > section:last-of-type {
    animation: pie-difumina linear both;
    animation-timeline: --pie;
    /* Arranca en el 35%, NO en el 0%. Medido a 1280x800: el footer no toca el
       card hasta el 35% de su entrada y lo tapa del todo en el 66%. Empezando
       en 0% el card se apagaba a media opacidad y desenfocado cuando todavia
       estaba entero a la vista y nadie lo tapaba, que es justo lo que Seb vio:
       "no le da chance de verse con claridad". Ahora el difuminado sigue al
       footer en vez de adelantarsele. */
    animation-range: entry 35% entry 68%;
  }
}
@keyframes pie-difumina {
  to { opacity: 0; filter: blur(10px); transform: scale(0.97); }
}
/* Si el sistema pide menos movimiento, se apaga sin desenfoque ni escala. */
@media (prefers-reduced-motion: reduce) {
  @keyframes pie-difumina { to { opacity: 0; } }
}

/* marquees bloqueados (ronda jul-2026) */
.allies-track img, .hero-allies-track img { -webkit-user-drag: none; user-drag: none; pointer-events: none; }
.allies-track, .hero-allies-track { touch-action: pan-y; }