/* Layout: lienzo 3D fijo a pantalla completa; las secciones de texto alternan izquierda/derecha
   y la forma 3D se desplaza al lado libre. En móvil la forma sube y el texto va en una tarjeta abajo.
   Color: solo los tres colores del logo. Fondo violeta de marca en toda la página, texto blanco
   y celeste como único acento (botones, palabras destacadas, íconos e hilos).
   Cada sección declara su fondo (--sec-bg) y los colores de sus hilos; main.js los mezcla al hacer scroll. */
:root {
  --brand: #4A1C93;     /* violeta de marca (fondo del logo) */
  --celeste: #40CCED;   /* celeste de marca */
  --white: #FFFFFF;

  --bg: var(--brand);
  --fg: var(--white);
  --muted: rgba(255, 255, 255, 0.74);
  --line: rgba(255, 255, 255, 0.16);
  --panel: rgba(74, 28, 147, 0.88);
  --tile: rgba(255, 255, 255, 0.06);
  --accent: var(--celeste);
  --btn-bg: var(--celeste);
  --btn-fg: var(--brand);
  --btn-line: var(--celeste);

  /* Movimiento: curva de salida marcada para toda la interfaz */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);       /* entradas, salidas y respuesta al toque */
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);   /* algo que se mueve o se dibuja en pantalla */
  --press: 100ms;          /* respuesta al presionar: inmediata */
  --settle: 180ms;         /* hover y regreso */

  /* Vidrio (glassmorphism): solo blanco translúcido sobre el violeta, sin colores nuevos.
     El peso del material marca la jerarquía: superficies grandes = más desenfoque y sombra. */
  /* un poco más claro que antes: el fondo es más profundo y el vidrio no debe perder contraste */
  --glass-bg: linear-gradient(140deg, rgba(255, 255, 255, 0.19), rgba(255, 255, 255, 0.06) 60%);
  --glass-line: rgba(255, 255, 255, 0.26);
  --glass-blur: blur(10px) saturate(140%);                /* tarjetas */
  --glass-blur-thick: blur(20px) saturate(170%);          /* barra superior y panel móvil */
  --glass-shadow: 0 18px 40px rgba(20, 4, 60, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.28);
  --glass-shadow-thick: 0 24px 60px rgba(20, 4, 60, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.32);

  /* Tipografía: el tracking depende del tamaño (grande = más cerrado, pequeño = más abierto) */
  --track-display: -0.01em;   /* titulares condensados grandes */
  --track-caps: 0.06em;       /* subtítulos en mayúscula (h3) */
  --track-label: 0.14em;      /* etiquetas diminutas en mayúscula */

  --font-display: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", system-ui, sans-serif; /* titulares */
  --font-logo: "Montserrat", "Arial Black", system-ui, sans-serif;                               /* logotipo */
  --font-body: "Montserrat", "Segoe UI", system-ui, -apple-system, sans-serif;                   /* texto */

  --gutter: max(16px, 6vw);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: var(--brand);
  touch-action: manipulation;   /* sin la espera de ~300 ms del doble toque */
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--brand);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* La respuesta al toque la da cada control (:active), no el destello gris del navegador */
a, button { -webkit-tap-highlight-color: transparent; }

/* Borde de scroll: el contenido se desenfoca y se desvanece al pasar bajo la barra flotante,
   en lugar de una línea divisoria dura. */
.scroll-edge {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: calc(88px + env(safe-area-inset-top, 0px));
  z-index: 9;
  pointer-events: none;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  -webkit-mask-image: linear-gradient(to bottom, #000 35%, transparent);
  mask-image: linear-gradient(to bottom, #000 35%, transparent);
}

/* ---------- Fondo: halo detrás de la forma 3D y lienzo 3D ---------- */
/* .glow tiene una sombra fija en la esquina; el halo (::before) es una capa propia que main.js
   mueve con transform (--hx/--hy) para seguir a la forma: en escritorio de lado a lado, en móvil
   también de arriba abajo. Moverlo con transform no repinta el degradado en cada cuadro.
   Profundidad (fija a la pantalla, detrás de la escena 3D):
     · luz que cae desde arriba y un fondo más profundo hacia abajo;
     · viñeta: bordes más oscuros, centro más vivo, para que la forma y el texto estén "en un espacio";
     · la sombra de la esquina de siempre. */
.glow {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background:
    linear-gradient(to bottom, rgba(255, 255, 255, 0.035), transparent 35%, rgba(10, 2, 32, 0.3) 100%),
    radial-gradient(130% 95% at 50% 42%, transparent 52%, rgba(10, 2, 32, 0.5) 100%),
    radial-gradient(70% 70% at 0% 100%, rgba(0, 0, 0, 0.14), transparent 70%);
}
.glow::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 90vw;
  height: 110vh;
  /* halo lila-celeste: se lee como la luz que emiten los hilos */
  background: radial-gradient(50% 50% at 50% 50%, rgba(140, 170, 255, 0.16), rgba(120, 90, 230, 0.08) 45%, transparent 72%);
  transform: translate(calc(var(--hx, 72vw) - 50%), calc(var(--hy, 42vh) - 50%));
  will-change: transform;
}
.webgl {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 0;                                        /* fundido corto: la entrada real es el tejido de los hilos (main.js) */
  transition: opacity 300ms var(--ease-out);
}
.webgl.is-ready { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .webgl { transition-duration: 200ms; } }

/* ---------- Logotipo (Hybr + "e" de hilo + d) ---------- */
.logo {
  display: inline-flex;
  align-items: baseline;
  font-family: var(--font-logo);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--fg);
  white-space: nowrap;
  text-transform: none;   /* el logo nunca va en mayúsculas, aunque esté dentro de un titular */
}
.thread-e {
  position: relative;
  /* El logo es inline-flex y alinea por la línea base: ahí vertical-align no aplica y la "e"
     quedaba 0.2em más arriba que en el logo oficial. El SVG mide 1em (viewBox -800…200),
     así que su línea base (y = 0) está 0.2em sobre su borde inferior: se baja 0.2em. */
  top: 0.2em;
  z-index: 1;
  display: inline-block;
  width: 0.385em;
  height: 1em;
  overflow: visible;
}
.thread-e path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.e-knock { stroke: var(--bg); stroke-width: 120; }  /* borde del color de fondo que separa la "e" de la r y la d */
.e-line { stroke: var(--celeste); stroke-width: 88; }

/* La "e" se teje con hilos (js/logo.js): hebras celestes y blancas trenzadas que se dibujan
   escalonadas y luego se aprietan hasta formar el trazo sólido del logo.
   Mientras logo.js no la toma (.is-managed), la "e" queda oculta desde el primer cuadro.
   Seguro: si logo.js no llegara a correr, la "e" aparece sola a los 3 s. */
.e-threads path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.js .thread-e:not(.is-managed) .e-line,
.js .thread-e:not(.is-managed) .e-knock { opacity: 0; animation: e-safety 1ms 3s forwards; }
/* Con logo.js, el borde ya no se pinta: se usa como máscara que recorta la r y la d (ver cutLetters).
   El margen negativo + relleno amplía la caja de cada letra sin mover nada, para que la máscara
   cubra también lo que sobresale (la cola de la y). */
.thread-e.is-managed .e-knock { display: none; }
.logo > span.is-cut { padding: 0.45em; margin: -0.45em; }
@keyframes e-safety { to { opacity: 1; } }
.logo-top { font-size: 1.7rem; }
.logo-big { font-size: clamp(3.2rem, 9vw, 5.5rem); }
/* Titular del inicio: el nombre Hybred con la "e" que se teje */
.hero-logo { line-height: 1; letter-spacing: normal; padding-bottom: 0.14em; }   /* aire para la cola de la y y de la "e" */
.logo-hero { font-size: clamp(4.2rem, 10vw, 9rem); }

/* ---------- Barra superior (siempre oscura, como en el diseño) ---------- */
.topbar {
  --bg: #5B309D;   /* tono aproximado del vidrio sobre el violeta (borde de la "e" del logo) */
  --fg: #FFFFFF;
  --accent: var(--celeste);
  position: fixed;
  top: calc(12px + env(safe-area-inset-top, 0px));
  left: var(--gutter);
  right: var(--gutter);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 10px 10px 10px 22px;
  border-radius: 999px;
  border: 1px solid var(--glass-line);
  background: var(--glass-bg), rgba(74, 28, 147, 0.6);
  -webkit-backdrop-filter: var(--glass-blur-thick);
  backdrop-filter: var(--glass-blur-thick);
  box-shadow: var(--glass-shadow-thick);
  color: var(--fg);
}
/* Sobre el vidrio, el texto gana un poco de peso y aire para seguir legible */
.topbar .mainnav a { letter-spacing: 0.01em; }
.brand { text-decoration: none; display: flex; }
.mainnav {
  position: relative;
  display: flex;
  gap: clamp(16px, 2.6vw, 36px);
  margin-left: auto;
}
.mainnav a {
  color: var(--fg);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
  padding-block: 6px;
  border-bottom: 2px solid transparent;
  transition: border-color 150ms ease, color 150ms ease, opacity var(--press) var(--ease-out);
}
.mainnav a:active { opacity: 0.6; transition-duration: 0ms; }   /* respuesta en el instante del toque */
/* Una sola línea que se desliza al enlace de la sección actual (main.js): muestra de dónde viene
   y a dónde va, en vez de apagarse en un enlace y encenderse en otro. Solo transform. */
.nav-indicator {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100px;                 /* main.js la escala al ancho del enlace */
  height: 2px;
  border-radius: 1px;
  background: var(--accent);
  transform-origin: 0 50%;
  transform: scaleX(0);
  opacity: 0;
  pointer-events: none;
  transition: transform 280ms var(--ease-in-out), opacity 150ms ease;
}
.nav-indicator.is-placed { opacity: 1; }
.nav-indicator.no-anim { transition: none; }
@media (prefers-reduced-motion: reduce) { .nav-indicator { transition: opacity 150ms ease; } }
.progress {
  position: absolute;
  left: 24px; right: 24px; bottom: -1px;
  height: 2px;
  border-radius: 2px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.12);
}
.progress-fill {
  display: block;
  height: 100%;
  background: var(--celeste);
  transform-origin: left center;
  transform: scaleX(0);
}

/* ---------- Botones ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.9em;
  padding: 0.85em 1.4em;
  border-radius: 999px;
  border: 1px solid var(--btn-line);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.92rem;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
  transition: transform var(--settle) var(--ease-out), background-color 150ms ease, border-color 150ms ease;
}
/* Respuesta al presionar (también en celular): entra rápido, vuelve con suavidad */
.btn:active { transform: scale(0.97); transition-duration: var(--press); }
.btn-small { padding: 0.55em 1.1em; font-size: 0.82rem; }
.btn-ghost { background: transparent; color: var(--fg); border-color: rgba(255, 255, 255, 0.35); }
.btn-small { min-height: 44px; }                   /* zona táctil mínima */
.ico-arrow {
  width: 1.2em;
  height: 1.2em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--settle) ease;   /* solo se mueve con hover */
}
.ico {
  width: 30px;
  height: 30px;
  flex: none;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

a:focus-visible, .dot:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ---------- Navegación por puntos (cambia de color sobre las bandas claras) ---------- */
.dots {
  --dot: rgba(255, 255, 255, 0.6);
  --dot-on: var(--celeste);
  --dot-text: #FFFFFF;
  position: fixed;
  right: max(16px, 2vw);
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
}
.dots ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.dot {
  position: relative;
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid var(--dot);
  transition: transform var(--settle) var(--ease-out), background-color 150ms ease, border-color 150ms ease;
}
/* Zona táctil invisible alrededor del punto (10 px visibles, ~32 px para el dedo) */
.dot::before { content: ""; position: absolute; inset: -11px; border-radius: 50%; }
.dot:active { transform: scale(0.8); transition-duration: var(--press); }
.dot.is-active:active { transform: scale(1.15); }
.dot.is-active {
  background: var(--dot-on);
  border-color: var(--dot-on);
  transform: scale(1.35);
}
.dot-label {
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dot-text);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms ease;
}
.dot:focus-visible .dot-label { opacity: 1; }

/* ---------- Secciones y sus tonos ---------- */
main { position: relative; z-index: 1; }

.section {
  /* Fondo y colores de hilos de cada sección (los lee main.js) */
  --sec-bg: var(--brand);
  --thread-a: #40CCED;
  --thread-b: #FFFFFF;
  --glow: 1;
  --bg: var(--sec-bg);
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-inline: var(--gutter);
  padding-block: 110px 80px;
  color: var(--fg);
}
/* Sin main.js, cada sección pinta su propio fondo */
html:not(.motion-ready) .section { background: var(--sec-bg); }

/* Recorrido de color: violeta y blanco por secciones.
   · Inicio y cierre en el violeta de marca (el fondo del logo).
   · Pilares, Una semana, El programa y Testimonios en un violeta más profundo (mismo tono y
     saturación, menos luminosidad): el punto más profundo es Pilares.
   · Para quién es y Familias en blanco violáceo: dan aire y ritmo, y hacen que el violeta se vea
     más profundo por contraste.
   Cada sección pinta su fondo en una banda detrás de la escena 3D (js/bands.js). Cada cambio de
   color es un degradado suave de ±18 % de pantalla que sube con el scroll, y todo lo fijo (hilos,
   halo, barra y puntos) cambia justo en ese degradado (main.js, "campo de claridad").
   Contraste mínimo sobre violeta: blanco 10.4:1 y celeste 5.5:1; sobre blanco ver abajo. */
#inicio        { --sec-bg: #4A1C93; }   /* violeta de marca */
#suenos        { --sec-bg: #2B1056; }   /* el punto más profundo */
#porque        { --sec-bg: #2B1056; }   /* el porqué: profundo, como un silencio antes de seguir */
#acompanamiento { --sec-bg: #351469; }
#testimonios   { --sec-bg: #2F125E; }
#cifras       { --sec-bg: #351469; }   /* Hybred en números */
#inscripcion   { --sec-bg: #501E9F; }   /* cierre: el más luminoso */

/* Secciones blancas. Sobre blanco el celeste no sirve como texto (1.8:1): los acentos de texto,
   íconos y botones van en violeta, y el celeste queda para los hilos 3D (celestes y violetas). */
:is(#para-quien, #admision) {
  --sec-bg: #F7F5FC;                 /* blanco con un toque de violeta, no blanco puro */
  --light: 1;                        /* halo y viñeta se ocultan sobre blanco con una máscara (main.js) */
  --thread-a: #40CCED;               /* hilos celestes… */
  --thread-b: #4A1C93;               /* …y violetas */
  --bg: #F7F5FC;
  --fg: #22104A;                     /* texto: violeta muy oscuro (15.6:1) */
  --muted: rgba(34, 16, 74, 0.74);   /* secundario (≈7.5:1) */
  --accent: #4A1C93;                 /* acentos de texto e íconos en violeta de marca (10.3:1) */
  --line: rgba(74, 28, 147, 0.14);
  --btn-bg: #4A1C93;
  --btn-fg: #FFFFFF;
  --btn-line: #4A1C93;
  --glass-bg: linear-gradient(140deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.7));
  --glass-line: rgba(74, 28, 147, 0.14);
  --glass-shadow: 0 14px 34px rgba(74, 28, 147, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  color: var(--fg);
}
/* puntos de navegación legibles cuando lo que tienen detrás es blanco */
body.tone-light .dots { --dot: rgba(74, 28, 147, 0.45); --dot-on: #4A1C93; --dot-text: #4A1C93; }

/* Bandas de fondo: una por sección, en el flujo de la página (se desplazan con ella), detrás del
   halo y de la escena 3D. js/bands.js las coloca y dibuja los degradados entre colores. */
.bg-bands { position: absolute; left: 0; right: 0; top: 0; z-index: 0; pointer-events: none; }
.bg-band { position: absolute; left: 0; right: 0; }


.section[data-side="right"] { justify-content: flex-end; }
.section[data-side="center"] { justify-content: center; text-align: center; }

.panel {
  width: 100%;
  max-width: 34rem;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.panel-wide { max-width: 40rem; }
.hero .panel { max-width: 38rem; }
.section[data-side="right"] .panel { margin-right: 3vw; }
.section[data-side="center"] .panel { align-items: center; max-width: 36rem; }

/* Revelado de cada sección: ocurre UNA sola vez, la primera vez que la sección queda activa
   (.is-revealed, ver main.js). Después el texto no vuelve a atenuarse ni a moverse al pasar:
   repetirlo en cada scroll es una interfaz peleando con quien lee.
   Los bloques parten visibles (opacidad 0.65) y suben 8 px, escalonados 50 ms.
   Si la sección está arriba (se llegó con un enlace a mitad de página), bajan desde -8 px.
   Solo con main.js cargado (.motion-ready); sin él, todo queda visible y quieto. */
.motion-ready .panel > * { transition: opacity 300ms var(--ease-out), transform 300ms var(--ease-out); }
.motion-ready .section:not(.is-revealed) .panel > * { opacity: 0.65; transform: translateY(8px); }
.motion-ready .section.is-before:not(.is-revealed) .panel > * { transform: translateY(-8px); }
.motion-ready .section.is-revealed .panel > :nth-child(2) { transition-delay: 50ms; }
.motion-ready .section.is-revealed .panel > :nth-child(3) { transition-delay: 100ms; }
.motion-ready .section.is-revealed .panel > :nth-child(4) { transition-delay: 150ms; }
.motion-ready .section.is-revealed .panel > :nth-child(n+5) { transition-delay: 200ms; }
@media (prefers-reduced-motion: reduce) {
  /* sin desplazamiento: solo el fundido de opacidad */
  .motion-ready .section:not(.is-revealed) .panel > * { transform: none; }
}

.label {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--accent);
}

h1, h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  text-wrap: balance;
  line-height: 0.95;
  letter-spacing: var(--track-display);
}
h1 { font-size: clamp(3rem, 6.4vw, 5.6rem); line-height: 0.92; letter-spacing: -0.015em; }
h2 { font-size: clamp(2.5rem, 5vw, 4.2rem); }
h2.label { font-family: var(--font-body); font-size: 0.8rem; line-height: 1.4; letter-spacing: var(--track-label); }
/* ¿ y ¡ en los titulares en mayúsculas: se suben a la altura de las mayúsculas (como pide la tipografía en
   español), así no chocan con la letra del renglón de abajo */
:is(h1, h2):not(.label) .abre { display: inline; position: relative; top: var(--abre, -0.17em); }   /* inline: algunos titulares ponen cada span en su renglón */
h3 { margin: 0; font-size: 1rem; font-weight: 700; line-height: 1.3; }
.hl { color: var(--accent); }

.panel p { margin: 0; max-width: 62ch; text-wrap: pretty; }
.lead { font-size: clamp(1.02rem, 1.4vw, 1.15rem); line-height: 1.55; letter-spacing: -0.005em; }
.footer-note { font-size: 0.8rem; color: var(--muted); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.section[data-side="center"] .actions { justify-content: center; }

.be-hybred {
  position: absolute;
  right: calc(var(--gutter) + 24px);
  bottom: max(5vh, 24px);
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 3.4vw, 3rem);
  line-height: 0.95;
  letter-spacing: var(--track-display);
  text-transform: uppercase;
  text-align: left;
}

/* Rasgos: personalizado, flexible, experiencial, conectado */
.features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--line);
}
.features li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 22px 18px 22px 0;
  border-bottom: 1px solid var(--line);
  min-width: 0;
}
.features li:nth-child(odd) { border-right: 1px solid var(--line); }
.features li:nth-child(even) { padding-left: 18px; }
.features h3 { text-transform: uppercase; letter-spacing: var(--track-caps); color: var(--accent); font-size: 0.95rem; }
.features p { color: var(--muted); font-size: 0.92rem; margin-top: 4px; }

/* Cómo funciona: los 4 pasos son una secuencia real, por eso van numerados */
.steps {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}
.steps li { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.step-n {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.6rem;
  line-height: 1;
  letter-spacing: var(--track-display);
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.steps p { color: var(--muted); font-size: 0.85rem; line-height: 1.5; }

/* Testimonio y comunidad */
.quote { margin: 0; display: flex; flex-direction: column; gap: 14px; }
.quote blockquote { margin: 0; position: relative; padding-left: 2.4rem; }
.quote blockquote::before {           /* comillas de apertura redondeadas (dibujadas: la tipografía condensada las inclina) */
  content: "";
  position: absolute;
  left: 0;
  top: 0.32em;
  width: 1.55rem;
  height: 1.16rem;
  background: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 24'%3E%3Ccircle cx='7' cy='17' r='6'/%3E%3Cpath d='M1.05 17.4C.6 10.2 4.4 3.9 11.4 1.1l1.3 2.4C8.3 5.6 6.3 9 6.4 12.4z'/%3E%3Ccircle cx='24' cy='17' r='6'/%3E%3Cpath d='M18.05 17.4c-.45-7.2 3.35-13.5 10.35-16.3l1.3 2.4c-4.4 2.1-6.4 5.5-6.3 8.9z'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 24'%3E%3Ccircle cx='7' cy='17' r='6'/%3E%3Cpath d='M1.05 17.4C.6 10.2 4.4 3.9 11.4 1.1l1.3 2.4C8.3 5.6 6.3 9 6.4 12.4z'/%3E%3Ccircle cx='24' cy='17' r='6'/%3E%3Cpath d='M18.05 17.4c-.45-7.2 3.35-13.5 10.35-16.3l1.3 2.4c-4.4 2.1-6.4 5.5-6.3 8.9z'/%3E%3C/svg%3E") no-repeat center / contain;
}
.quote blockquote p { font-size: clamp(1.15rem, 1.8vw, 1.4rem); line-height: 1.45; font-weight: 500; text-wrap: pretty; }
.quote figcaption { padding-left: 2.4rem; display: flex; flex-direction: column; }
.quote figcaption span { color: var(--muted); font-size: 0.85rem; }
.join {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.join h3 { text-transform: uppercase; letter-spacing: var(--track-caps); font-size: 0.85rem; color: var(--accent); }

/* Cierre */
.sign-off { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 24px; }
.sign-off p { color: var(--muted); font-size: 0.95rem; }
.follow { display: flex; align-items: center; gap: 14px; font-size: 0.85rem; font-weight: 600; }
.socials { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; }
.socials a, .socials .is-soon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--line);
  transition: border-color 150ms ease, transform var(--settle) var(--ease-out);
}
.socials a:active { transform: scale(0.92); transition-duration: var(--press); }
.socials .ico { width: 18px; height: 18px; fill: none; stroke: var(--fg); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; color: var(--fg); }
.socials .is-soon { cursor: default; }   /* sin enlace todavía */

/* ---------- Componentes de vidrio ---------- */
.glass,
.features li,
.steps li,
.quote,
.btn-ghost {
  background: var(--glass-bg);
  border: 1px solid var(--glass-line);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow);
}
/* Nunca vidrio sobre vidrio: dentro de la barra el botón es solo un contorno */
.topbar .btn-ghost {
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
/* "Agenda tu entrevista" en la barra: celeste sólido, el llamado más visible de la página */
.topbar .btn-top {
  --btn-bg: var(--celeste);
  --btn-fg: #22104A;
  --btn-line: var(--celeste);
  box-shadow: 0 6px 20px rgba(64, 204, 237, 0.3);
}

/* Etiqueta de sección: texto pequeño en mayúsculas, sin forma de botón (no es clicable) */
h2.label { font-size: 0.75rem; }

/* Tarjetas: rasgos, pasos y testimonio */
.features {
  gap: 12px;
  border-top: 0;
}
.features li,
.features li:nth-child(even),
.features li:nth-child(odd) {
  padding: 18px;
  border-radius: 18px;
  border-right: 1px solid var(--glass-line);
  border-bottom: 1px solid var(--glass-line);
}
.steps { gap: 12px; }
.steps li { padding: 16px; border-radius: 18px; }
.quote { padding: 24px 24px 22px; border-radius: 22px; }
.quote blockquote::before { left: 2px; }

/* Las tarjetas no son enlaces: no se mueven ni se iluminan con hover (sería prometer un clic que no existe) */

/* ---------- Hover solo con mouse (en pantallas táctiles el toque lo dejaría "pegado") ---------- */
@media (hover: hover) and (pointer: fine) {
  .mainnav a:hover { color: var(--accent); }
  .btn:hover { transform: translateY(-2px); background-color: color-mix(in srgb, var(--btn-bg) 82%, #FFFFFF); }
  .btn:active { transform: scale(0.97); }
  .btn:hover .ico-arrow { transform: translateX(3px); }
  .btn-ghost:hover { background-color: rgba(255, 255, 255, 0.1); border-color: var(--accent); }
  .dot:hover .dot-label { opacity: 1; }
  .socials a:hover { border-color: var(--accent); }
}
/* Con "reducir movimiento" el hover cambia color y borde, pero nada se desplaza */
@media (prefers-reduced-motion: reduce) {
  .btn:hover { transform: none; }
  .btn:active { transform: none; opacity: 0.85; }
  .btn:hover .ico-arrow { transform: none; }
}

/* Navegadores sin desenfoque: vidrio un poco más opaco */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass, .features li, .steps li, .quote, .topbar, .btn-ghost {
    background: rgba(92, 51, 158, 0.92);
  }
}

/* ---------- Pantallas medianas ---------- */
@media (max-width: 1100px) {
  .mainnav { display: none; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Móvil ---------- */
@media (max-width: 760px) {
  .dots, .be-hybred { display: none; }
  .glow::before { width: 140vw; height: 60vh; }   /* halo casi circular alrededor de la forma */
  .logo-hero { font-size: min(5.6rem, 24vw); }       /* el nombre ocupa casi todo el ancho de la tarjeta */
  .logo-top { font-size: 1.45rem; }
  .section {
    align-items: flex-end;
    padding-block: 45vh 48px;
  }
  .section.hero { padding-block: 40vh 48px; }
  .section.cta { align-items: center; padding-block: 110px 48px; }
  .section[data-side="right"] .panel { margin-right: 0; }
  .topbar { padding: 8px 8px 8px 18px; }
  .panel {
    padding: 22px 20px;
    border-radius: 22px;
    background: var(--glass-bg), rgba(74, 28, 147, 0.45);
    border: 1px solid var(--glass-line);
    -webkit-backdrop-filter: var(--glass-blur-thick);   /* superficie grande = material más grueso */
    backdrop-filter: var(--glass-blur-thick);
    box-shadow: var(--glass-shadow-thick);
  }
  /* Dentro del panel de vidrio, las tarjetas pasan a ser láminas planas (sin segundo desenfoque) */
  .panel .features li, .panel .steps li, .panel .quote, .panel .btn-ghost {
    background: rgba(255, 255, 255, 0.06);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .hero .panel, .cta .panel { background: transparent; border-color: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; padding: 0; }
  .features { grid-template-columns: minmax(0, 1fr); }
  .steps li { padding: 14px; }
  .follow { flex-direction: column; }
}

/* ---------- Accesibilidad: transparencia y contraste ---------- */
/* Menos transparencia: el vidrio se vuelve sólido y sin desenfoque */
@media (prefers-reduced-transparency: reduce) {
  .scroll-edge { display: none; }
  .topbar,
  .glass, .features li, .steps li, .quote, .btn-ghost {
    background: #5B309D;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .topbar .btn-ghost { background: transparent; }
}
@media (prefers-reduced-transparency: reduce) and (max-width: 760px) {
  .panel { background: #5B309D; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .hero .panel, .cta .panel { background: transparent; }
}
/* Más contraste: fondos casi sólidos, bordes definidos y texto secundario en blanco pleno */
@media (prefers-contrast: more) {
  :root { --muted: #FFFFFF; --line: rgba(255, 255, 255, 0.6); --glass-line: rgba(255, 255, 255, 0.75); }
  .topbar,
  .glass, .features li, .steps li, .quote, .btn-ghost {
    background: #3A1675;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .motion-ready .section:not(.is-revealed) .panel > * { opacity: 1; }
}

/* Secciones blancas en el teléfono: la tarjeta del panel es de vidrio blanco y sus tarjetas internas, láminas violeta muy tenue */
@media (max-width: 760px) {
  :is(#para-quien, #admision) .panel { background: var(--glass-bg); }
  :is(#para-quien, #admision) .panel .features li,
  :is(#para-quien, #admision) .panel .quote { background: rgba(74, 28, 147, 0.04); box-shadow: none; }
  :is(#para-quien, #admision) .panel .features .pq-chips li { background: none; }   /* la lista con check va sin fondo */
  #admision .panel .tl { padding: 6px 0 0; background: none; border: 0; box-shadow: none; }   /* el panel ya es la tarjeta */
}

/* ---------- El programa: red neuronal de puntos + tarjetas de vidrio líquido (js/program.js) ----------
   La red la dibuja la escena 3D, solo con puntos: un núcleo ("Tú") con seis neuronas en órbita. Con
   el scroll la red gira; cada neurona pasa al frente y de ella sale su tarjeta, unida por una línea
   de puntos.
   Vidrio líquido: tinte violeta marcado y desenfoque moderado (los hilos se mueven detrás, así que
   un desenfoque grande costaría mucho en el teléfono), borde que brilla como el canto de una lente
   (más claro arriba a la izquierda, celeste abajo a la derecha) y un reflejo que se desliza cuando
   la tarjeta sale de su nodo.
   Sin JS, sin WebGL o con "reducir movimiento" (.is-scrolly ausente): cuadrícula de tarjetas. */
#programa { --sec-bg: #321467; }

.program { display: block; }
.program-stage { position: relative; display: flex; flex-direction: column; align-items: center; gap: 32px; }
.program-head { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.program-head h2 { font-size: clamp(2.3rem, 4.4vw, 3.8rem); }
.program-sub { margin: 0; max-width: 46ch; color: var(--muted); font-size: clamp(0.98rem, 1.2vw, 1.08rem); text-wrap: pretty; }
.program-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  width: min(100%, 66rem);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.program-labels, .program-link, .program-ring { display: none; }

/* Tarjeta de vidrio líquido */
.pcard {
  position: relative;
  border-radius: 26px;
  padding: 22px 24px 24px;
  color: #FFFFFF;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.05) 38%, rgba(255, 255, 255, 0.02) 68%, rgba(255, 255, 255, 0.09)),
    rgba(56, 22, 112, 0.46);
  -webkit-backdrop-filter: blur(12px) saturate(175%) brightness(1.06);
  backdrop-filter: blur(12px) saturate(175%) brightness(1.06);
  box-shadow:
    0 26px 60px rgba(12, 2, 40, 0.42),
    0 2px 10px rgba(12, 2, 40, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -1px 0 rgba(255, 255, 255, 0.08),
    inset 0 20px 30px -22px rgba(255, 255, 255, 0.3);
  overflow: hidden;
  isolation: isolate;
  text-align: left;
}
/* canto de la lente: un borde de 1 px con degradado (máscara que deja solo el contorno) */
.pcard::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.12) 32%, rgba(255, 255, 255, 0.05) 62%, rgba(64, 204, 237, 0.6));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
}
/* reflejo: una banda de luz diagonal que program.js desliza (--sh: 1 al salir del nodo, 0 en reposo) */
.pcard::after {
  content: "";
  position: absolute;
  inset: -40% -60%;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, 0.16) 47%, rgba(255, 255, 255, 0.04) 53%, transparent 60%);
  transform: translateX(calc(var(--sh, 0) * -34%));
  pointer-events: none;
  z-index: 0;
}
.pcard-in { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 10px; }
.pcard-top { display: flex; align-items: center; gap: 10px; }
.pcard-ico { width: 24px; height: 24px; stroke: var(--celeste); }
.pcard-k { font-size: 0.72rem; font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--celeste); }
.pcard-n { margin-left: auto; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.6); font-variant-numeric: tabular-nums; }
.pcard-t {
  margin: 4px 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 2.3vw, 2.15rem);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: var(--track-display);
  text-transform: uppercase;
  text-wrap: balance;
}
.pcard-d { margin: 0; font-size: 0.92rem; line-height: 1.5; color: rgba(255, 255, 255, 0.8); text-wrap: pretty; }

/* Modo con scroll (lo activa program.js): escena fijada, red al centro, una tarjeta a la vez */
.program.is-scrolly {
  padding: 0;
  /* pantalla fija + 6 tarjetas de 17vh + un respiro al final con la última tarjeta (el scroll mueve la red 1:1) */
  height: calc(100vh + 6 * 17vh + 12vh);
}
.program.is-scrolly .program-stage {
  position: sticky;
  top: 0;
  z-index: 1;
  display: block;
  height: 100vh;
  height: 100svh;
}
.program.is-scrolly .program-head { position: absolute; left: var(--gutter); right: var(--gutter); top: max(100px, 12vh); gap: 8px; }
.program.is-scrolly .program-cards { position: absolute; inset: 0; width: auto; display: block; pointer-events: none; }
.program.is-scrolly .pcard {
  position: absolute;
  left: 0;
  top: 0;
  width: min(380px, 32vw);
  transform-origin: 0 50%;          /* crece desde el lado del nodo */
  opacity: 0;
  visibility: hidden;
  will-change: transform, opacity;
}
.program.is-scrolly .pcard-in { will-change: opacity; }

/* Línea de puntos que une la neurona con su tarjeta, y anillo sobre la neurona activa */
.program.is-scrolly .program-link {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  opacity: 0;
}
.program-link path { fill: none; stroke: rgba(255, 255, 255, 0.85); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 0 7; }   /* línea de puntos, como la red */
.program.is-scrolly .program-ring {
  display: block;
  position: absolute;
  left: -16px;
  top: -16px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 0 6px rgba(64, 204, 237, 0.12), 0 0 22px rgba(64, 204, 237, 0.55);
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
}

/* Etiquetas de los nodos: fijas a la pantalla, debajo de las tarjetas (el vidrio las desenfoca) */
.program.is-scrolly .program-labels { display: block; position: fixed; inset: 0; z-index: 0; pointer-events: none; visibility: hidden; }
.plabel {
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #FFFFFF;
  text-shadow: 0 0 10px rgba(20, 4, 60, 0.95), 0 0 2px rgba(20, 4, 60, 0.9);   /* se lee sobre los hilos */
  opacity: 0;
  will-change: transform, opacity;
}
.plabel-core {
  font-size: 2.1rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-shadow: 0 0 18px rgba(64, 204, 237, 0.75), 0 0 4px rgba(20, 4, 60, 0.9);   /* "Tú": el centro de todo, con su propia luz */
}
.program.is-scrolly .plabel:not(.plabel-core) {
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  transform-origin: 50% 0;
  text-shadow: 0 0 12px rgba(20, 4, 60, 1), 0 0 3px rgba(20, 4, 60, 1), 0 0 18px rgba(64, 204, 237, 0.35);
}
/* ícono de cada pieza, dentro de la esfera de luz de su neurona (program.js lo ubica y escala) */
.pnode {
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  opacity: 0;
  will-change: transform, opacity;
}
.pnode-ico { width: 40px; height: 40px; fill: none; stroke: #FFFFFF; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 4px rgba(64, 204, 237, 0.9)) drop-shadow(0 0 10px rgba(64, 204, 237, 0.5)); }
.program.is-node-hover { cursor: pointer; }

/* Lista para lectores de pantalla en el modo con scroll (la crea program.js) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 1100px) {
  .program-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .program { padding-block: 110px 48px; }
  .program-cards { grid-template-columns: minmax(0, 1fr); }
  .pcard { padding: 20px 20px 22px; border-radius: 22px; }
  .program.is-scrolly .program-head { top: 86px; }
  .program.is-scrolly .program-head h2 { font-size: clamp(2rem, 9.6vw, 2.6rem); }
  .program.is-scrolly .program-sub { font-size: 0.9rem; }
  .program.is-scrolly .pcard { width: calc(100vw - 2 * 16px); transform-origin: 50% 0; }   /* abajo, a lo ancho; crece desde arriba */
  .plabel { font-size: 0.78rem; letter-spacing: 0.08em; }
  .program.is-scrolly .plabel:not(.plabel-core) { font-size: 0.86rem; letter-spacing: 0.09em; }
  .plabel-core { font-size: 1.5rem; }
}
@media (prefers-reduced-transparency: reduce) {
  .pcard { background: #4A2388; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .pcard::after { display: none; }
}
@media (prefers-contrast: more) {
  .pcard { background: #3A1675; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .pcard-d, .pcard-n { color: #FFFFFF; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .pcard { background: rgba(78, 38, 140, 0.94); }
}

/* ---------- Textos comerciales ---------- */
/* El mensaje principal, bajo el logo del inicio */
.hero-tag {
  margin: -6px 0 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.9rem, 3.3vw, 2.9rem);
  line-height: 0.95;
  letter-spacing: var(--track-display);
  text-transform: uppercase;
  text-wrap: balance;
}
/* Dato por confirmar: visible a propósito para que no se publique sin el dato real */
.tbd {
  color: var(--accent);
  font-weight: 600;
  border-bottom: 1.5px dashed currentColor;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-radius: 4px 4px 0 0;
  padding: 0 3px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.quote blockquote p .tbd { font-weight: 500; }



@media (max-width: 760px) {
  .hero-tag { font-size: clamp(1.7rem, 8.4vw, 2.3rem); }
}

/* ---------- Sin formas de hilo ----------
   El hilo de la marca vive solo en la "e" del logo. Sin una forma 3D al lado, las secciones ya no
   dejan medio ancho vacío: el inicio y el cierre van centrados, y Para quién es, Cómo funciona,
   Familias y Testimonios van en dos columnas (título y texto a la izquierda, contenido a la derecha). */
.hero .panel { max-width: 48rem; }
.hero .logo-hero { font-size: clamp(4.8rem, 12vw, 10.5rem); }
.hero .lead { max-width: 40rem; }

.section.split { justify-content: center; }
.section.split .panel {
  width: 100%;
  max-width: 72rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  grid-template-rows: auto auto auto 1fr;   /* lo que sobre de alto queda abajo: el título no se separa de su texto */
  column-gap: clamp(36px, 6vw, 96px);
  row-gap: 18px;
  align-items: start;
}
.section.split .panel > h2,
.section.split .panel > p,
.section.split .panel > .actions { grid-column: 1; }
.section.split .panel > :is(.features, .steps, .quote-list, .tl) { grid-column: 2; grid-row: 1 / 5; align-self: center; }
.section.split .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.quote-list { display: flex; flex-direction: column; gap: 14px; }

/* ---------- Testimonios del Home: carrusel de videos (js/testimonios.js y js/sitio.js) ----------
   Un video al frente y los vecinos a los lados, más pequeños, girados y en penumbra. Con scroll
   (.is-scrolly) la sección se fija y el scroll gira el carrusel; sin él, lo giran las pestañas y
   los toques. Solo se reproduce el del frente, y solo si alguien le da play (preload="none": el
   video se descarga en ese momento). El botón de play va abajo a la izquierda para no tapar caras.
   Sin JavaScript: los videos uno debajo del otro, con los controles del navegador. */
.testi-sec { overflow-x: clip; }                              /* los videos de los lados no abren scroll lateral */
.section.testi-sec .panel { max-width: 72rem; gap: 14px; }
.testi-sec h2 { font-size: clamp(2.2rem, 3.4vw, 3.3rem); }
.testi-head { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.testi-head .actions { margin-top: 4px; justify-content: center; }
.testi-head .sec-more { margin-left: 0; }
.testi { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 14px; min-width: 0; text-align: left; }

/* sin JavaScript: uno debajo del otro */
.tc-stage { width: min(100%, 640px); display: flex; flex-direction: column; gap: 18px; }
.tc-quotes { width: min(100%, 860px); display: grid; gap: 18px; }

/* carrusel */
.testi.is-carousel .tc-stage {
  --cw: min(600px, 46vw);
  position: relative;
  display: block;
  width: 100%;
  height: calc(var(--cw) * 9 / 16);
  perspective: 1300px;
}
/* fijada: el carrusel se ajusta al alto de la pantalla para que todo quepa debajo de la barra */
.testi-sec.is-scrolly .testi.is-carousel .tc-stage {
  --cw: min(600px, 46vw, calc((100vh - 500px) * 16 / 9));
  --cw: min(600px, 46vw, calc((100svh - 500px) * 16 / 9));
}
.is-carousel .tc-card {
  position: absolute;
  left: 50%;
  top: 0;
  width: var(--cw);
  margin-left: calc(var(--cw) / -2);
  will-change: transform, opacity;
}
.is-carousel .tc-card .tv-frame::after {          /* penumbra de los de los lados */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(14, 4, 40, var(--dim, 0));
  pointer-events: none;
}
.is-carousel .tc-card.is-side { cursor: pointer; }
.is-carousel .tc-card.is-side .tv-play { visibility: hidden; }
.is-carousel .tc-card.is-side video { pointer-events: none; }
.is-carousel .tc-card.is-center .tv-frame { box-shadow: 0 26px 60px rgba(10, 2, 34, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.28); }
.tv-tag {
  position: absolute;
  z-index: 2;
  left: 16px;
  top: 14px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(20, 6, 46, 0.6);
  color: #FFFFFF;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  pointer-events: none;
}
.is-carousel .tc-quotes { display: grid; }
.is-carousel .tc-q { grid-area: 1 / 1; will-change: opacity, transform; }

/* pestañas (Familias · Tutores · Directivos): solo con JavaScript */
.testi-tabs { display: none; }
.is-carousel .testi-tabs {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--glass-line);
}
.testi-tab {
  min-height: 40px;
  padding: 0.55em 1.25em;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(255, 255, 255, 0.82);
  font-family: var(--font-body);
  font-size: 0.86rem;
  font-weight: 700;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 150ms ease, color 150ms ease;
}
.testi-tab[aria-selected="true"] { background: #FFFFFF; color: #22104A; }
.testi-tab:focus-visible { outline: 2px solid var(--celeste); outline-offset: 2px; }

/* con scroll: la sección se fija y el carrusel gira mientras se baja */
.testi-sec.is-scrolly {
  display: block;
  padding: 0;
  height: calc(100vh + var(--steps, 2) * 40vh);
  height: calc(100svh + var(--steps, 2) * 40svh);
}
.section.testi-sec.is-scrolly .panel {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  margin: 0 auto;
  justify-content: center;
  justify-content: safe center;           /* si no cabe, que no se meta debajo de la barra */
  padding: 124px var(--gutter) 24px;      /* aire entre la barra y el título */
}

/* el video */
.testi-video { margin: 0; }
.tv-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 20px;
  overflow: hidden;
  background: #1A0A3A;
  border: 1px solid var(--glass-line);
  box-shadow: var(--glass-shadow);
}
.tv-frame video { display: block; width: 100%; height: 100%; object-fit: cover; background: #1A0A3A; }
.tv-play[hidden] { display: none; }
.tv-play {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: linear-gradient(to top, rgba(20, 6, 46, 0.62), rgba(20, 6, 46, 0) 48%), rgba(20, 6, 46, 0.08);
  color: #FFFFFF;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 200ms var(--ease-out), visibility 0s linear 0s;
}
.tv-btn {
  position: absolute;
  left: 18px;
  bottom: 16px;
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--celeste);
  box-shadow: 0 0 0 8px rgba(64, 204, 237, 0.22), 0 12px 30px rgba(20, 4, 60, 0.5);
  transition: transform var(--settle) var(--ease-out), box-shadow 200ms ease;
}
.tv-btn svg { width: 26px; height: 26px; margin-left: 3px; fill: #22104A; }
.tv-label {
  position: absolute;
  left: 94px;
  bottom: 16px;
  height: 60px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow: 0 1px 10px rgba(20, 6, 46, 0.6);
}
.tv-time {
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(20, 6, 46, 0.55);
  font-family: var(--font-body);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
.tv-play:active .tv-btn { transform: scale(0.95); transition-duration: var(--press); }
.tv-play:focus-visible { outline: 3px solid var(--celeste); outline-offset: -3px; }
/* reproduciendo: la portada se va y quedan los controles del navegador */
.testi-video.is-playing .tv-play { opacity: 0; visibility: hidden; transition: opacity 200ms var(--ease-out), visibility 0s linear 200ms; }
.tv-note { margin: 10px 0 0; font-size: 0.8rem; color: var(--muted); text-align: center; }
/* las dos frases, una al lado de la otra y más pequeñas que un testimonio suelto */
.testi .quote-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.testi .quote { padding: 18px 18px 16px; gap: 10px; border-radius: 18px; }
.testi .quote blockquote { padding-left: 1.9rem; }
.testi .quote blockquote::before { width: 1.2rem; height: 0.9rem; top: 0.3em; left: 0; }
.testi .quote blockquote p { font-size: clamp(0.98rem, 1.15vw, 1.08rem); line-height: 1.45; }
.testi .quote figcaption { padding-left: 1.9rem; font-size: 0.88rem; }
.testi .quote figcaption span { font-size: 0.8rem; }
@media (hover: hover) and (pointer: fine) {
  .testi-tab:not([aria-selected="true"]):hover { color: #FFFFFF; background: rgba(255, 255, 255, 0.1); }
  .tv-play:hover .tv-btn { transform: scale(1.06); box-shadow: 0 0 0 11px rgba(64, 204, 237, 0.26), 0 14px 34px rgba(20, 4, 60, 0.55); }
}
@media (prefers-reduced-motion: reduce) {
  .tv-btn, .tv-play { transition: none; }
  .tv-play:hover .tv-btn, .tv-play:active .tv-btn { transform: none; }
}
@media (max-width: 760px) {
  .tv-frame { border-radius: 16px; }
  .tv-btn { left: 12px; bottom: 12px; width: 48px; height: 48px; box-shadow: 0 0 0 6px rgba(64, 204, 237, 0.22), 0 8px 22px rgba(20, 4, 60, 0.5); }
  .tv-btn svg { width: 21px; height: 21px; }
  .tv-label { left: 72px; bottom: 12px; height: 48px; font-size: 1rem; }
  .testi .quote-list { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .testi .quote { padding: 14px 16px 13px; }
  .testi .quote blockquote p { font-size: 0.94rem; }
  .is-carousel .testi-tabs { align-self: stretch; }
  .testi-tab { flex: 1; padding-inline: 0.6em; }
  .tv-tag { left: 10px; top: 10px; padding: 4px 10px; font-size: 0.66rem; }
  .testi-head .sec-more { white-space: normal; text-align: center; font-size: 0.95rem; }
  /* el carrusel ocupa todo el ancho: sin tarjeta de vidrio alrededor */
  .testi-sec { align-items: center; padding-block: 96px 48px; }
  .section.testi-sec .panel { padding: 0; background: transparent; border-color: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .testi.is-carousel .tc-stage { --cw: 78vw; }
  .testi-sec.is-scrolly .testi.is-carousel .tc-stage {
    --cw: min(78vw, calc((100vh - 520px) * 16 / 9));
    --cw: min(78vw, calc((100svh - 520px) * 16 / 9));
  }
  .section.testi-sec.is-scrolly .panel { padding: 100px var(--gutter) 16px; gap: 12px; }
  .testi-sec h2 { font-size: clamp(2.1rem, 9.6vw, 2.6rem); }
}
.section.split h2 { font-size: clamp(2.3rem, 3.9vw, 3.7rem); }

/* Pantallas medianas: una sola columna */
@media (max-width: 960px), (max-width: 1100px) and (orientation: portrait) {
  .section.split .panel { display: flex; flex-direction: column; max-width: 44rem; }
}
/* Teléfono: sin hueco arriba para una forma; cada sección centra su tarjeta */
@media (max-width: 760px) {
  .section { align-items: center; padding-block: 100px 56px; }
  .section.hero { padding-block: 96px 48px; }
  .hero .logo-hero { font-size: min(6rem, 25vw); }
}

/* ---------- Inicio: texto a la izquierda, foto a la derecha ----------
   La foto es un recorte con fondo transparente (img/hero-estudiante.webp). Detrás lleva una luz
   suave; entra con un leve ascenso al cargar. En pantallas medianas y en el teléfono, la foto va
   arriba y el texto debajo, centrado. */
.section.hero {
  display: grid;
  grid-template-columns: minmax(0, 40rem) minmax(0, 36rem);
  justify-content: center;
  align-items: center;
  column-gap: clamp(24px, 4vw, 72px);
}
.hero .panel { max-width: none; align-items: flex-start; text-align: left; }
.hero .logo-hero { font-size: clamp(4.2rem, 8.6vw, 8.6rem); }
.hero .actions { justify-content: flex-start; }
.hero-figure {
  position: relative;
  margin: 0;
  justify-self: center;
  height: min(calc(100vh - 200px), 840px);
  height: min(calc(100svh - 200px), 840px);
  min-height: 420px;
  aspect-ratio: 1122 / 1373;
  max-width: 100%;
}
/* luz detrás de la foto: celeste y violeta, sin borde */
.hero-figure::before {
  content: "";
  position: absolute;
  inset: 8% -6% 4%;
  border-radius: 50%;
  background:
    radial-gradient(closest-side, rgba(64, 204, 237, 0.34), rgba(64, 204, 237, 0) 70%),
    radial-gradient(closest-side at 60% 40%, rgba(160, 110, 255, 0.4), rgba(160, 110, 255, 0) 100%);
  filter: blur(18px);
  pointer-events: none;
}
.hero-figure img {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 28px 50px rgba(18, 5, 47, 0.5));
}
@keyframes hero-figure-in {
  from { opacity: 0; transform: translateY(28px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}
.motion-ready .hero-figure img { animation: hero-figure-in 800ms var(--ease-out) 120ms both; }
@media (prefers-reduced-motion: reduce) {
  @keyframes hero-figure-fade { from { opacity: 0; } to { opacity: 1; } }
  .motion-ready .hero-figure img { animation: hero-figure-fade 300ms ease both; }
}
/* Respaldo de la portada: una franja al pie, bajo el texto, con "Respaldados por" y los logos de las entidades
   en blanco (todos de un solo color, para que no compitan con la foto ni entre sí); cada uno con una línea.
   Ocupa el lugar de "Be Hybred.". En pantallas medianas y en el teléfono va debajo de los botones. */
.hero-trust {
  position: absolute;
  z-index: 2;
  left: max(var(--gutter), calc((100vw - 76rem - clamp(24px, 4vw, 72px)) / 2));
  bottom: max(4vh, 22px);
  list-style: none;
  margin: 0;
  padding: 16px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.4vw, 34px);
}
.hero-trust li { min-width: 0; }
.hero-trust .trust-label { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); }
.hero-trust .trust-item { display: flex; align-items: center; gap: 10px; }
/* sin logo (p. ej. una acreditación en proceso): un ícono en un círculo, del mismo tamaño que los logos */
.hero-trust .trust-ico { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border: 1.5px solid rgba(255, 255, 255, 0.45); border-radius: 50%; }
.hero-trust .trust-ico .ico { width: 20px; height: 20px; fill: none; stroke: #FFFFFF; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hero-trust .trust-logo { display: block; flex: none; width: 34px; height: 34px; object-fit: contain; }
.hero-trust .trust-item span { max-width: 9.5rem; font-size: 0.74rem; font-weight: 600; line-height: 1.3; color: rgba(255, 255, 255, 0.86); }
.hero-trust ~ .be-hybred { display: none; }
@keyframes trust-in { from { opacity: 0; transform: translate3d(0, 10px, 0); } to { opacity: 1; transform: none; } }
.motion-ready .hero-trust li { animation: trust-in 600ms var(--ease-out) both; animation-delay: calc(650ms + var(--i, 0) * 110ms); }
@media (prefers-reduced-motion: reduce) {
  .motion-ready .hero-trust li { animation: hero-figure-fade 300ms ease both; }
}
@media (max-width: 960px), (max-width: 1100px) and (orientation: portrait) {
  .hero-trust {
    position: static;
    justify-self: center;
    width: 100%;
    max-width: 30rem;
    margin: 18px 0 0;
    padding-top: 14px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }
  .hero-trust .trust-label { grid-column: 1 / -1; text-align: center; }
  .hero-trust .trust-item { flex-direction: column; text-align: center; gap: 6px; }
  .hero-trust .trust-item span { max-width: none; font-size: 0.68rem; }
}
/* "Desliza": invitación a bajar en la portada, centrada bajo la foto (solo en computador, desde 1320 px: ahí la
   portada cabe completa y no se asoma nada de lo que sigue; más angosto, choca con la franja de respaldo). Se va al bajar (html.is-scrolled, js/main.js). */
.hero-scroll { display: none; }
@media (min-width: 1320px) {
  .hero-scroll {
    position: absolute;
    z-index: 2;
    left: 50%;
    top: calc(100% + 10px);
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
    margin: 0;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
    translate: -50% 0;   /* centrado con translate: la animación de entrada usa transform */
    transition: opacity 400ms ease, transform 400ms ease;
    pointer-events: none;
  }
  .hero-scroll-ico { position: relative; flex: none; width: 20px; height: 30px; border: 2px solid rgba(255, 255, 255, 0.7); border-radius: 11px; }
  .hero-scroll-ico span { position: absolute; left: 50%; top: 6px; width: 4px; height: 7px; margin-left: -2px; border-radius: 2px; background: var(--celeste); animation: hero-wheel 1.6s ease-in-out infinite; }
  @keyframes hero-wheel { 0% { opacity: 0; transform: translateY(-2px); } 30% { opacity: 1; } 80% { opacity: 0; transform: translateY(8px); } 100% { opacity: 0; transform: translateY(8px); } }
  .motion-ready .hero-scroll { animation: trust-in 600ms var(--ease-out) 1400ms backwards; }   /* backwards: al terminar, manda .is-scrolled */
  .is-scrolled .hero-scroll { opacity: 0; transform: translateY(8px); }
}
@media (prefers-reduced-motion: reduce) { .hero-scroll-ico span { animation: none; opacity: 1; } }
/* "Be Hybred." queda abajo a la izquierda, alineado con el texto, para no pisar la foto */
.hero .be-hybred { right: auto; left: max(var(--gutter), calc((100vw - 76rem - clamp(24px, 4vw, 72px)) / 2)); }

@media (max-width: 960px), (max-width: 1100px) and (orientation: portrait) {
  .section.hero { grid-template-columns: minmax(0, 40rem); row-gap: 4px; }
  .hero-figure { order: -1; height: min(46vh, 520px); min-height: 0; margin-bottom: -40px; }   /* el logo pisa un poco los pies */
  .hero .panel { position: relative; z-index: 1; }
  .hero .panel { align-items: center; text-align: center; }
  .hero .actions { justify-content: center; }
}
@media (max-width: 760px) {
  .section.hero { padding-block: 84px 40px; align-content: center; }
  .hero-figure { height: min(40vh, 400px); margin-bottom: -44px; }
  .hero .logo-hero { font-size: min(5rem, 21vw); }
}

/* ---------- Para quién es: carrusel de perfiles (js/profiles.js y main.js) ----------
   Sin el modo con scroll (sin WebGL o con "reducir movimiento"): la cuadrícula de rasgos de siempre.
   Con él (.is-scrolly): la sección se alarga y su panel queda fijado a pantalla completa. A la
   izquierda, el título y la tarjeta del perfil del frente (las cuatro apiladas en el mismo sitio;
   profiles.js cambia una por otra); a la derecha, .profiles-spot marca dónde dibuja main.js el
   anillo de tarjetas con foto. En pantallas angostas, todo en una columna: la foto al medio. */
.profiles-spot, .profiles-ticks { display: none; }

.profiles.is-scrolly {
  display: block;
  padding: 0;
  /* pantalla fija + medio alto de pantalla por perfil + un respiro al final con el último */
  height: calc(100vh + 4 * 30vh);
  height: calc(100svh + 4 * 30svh);
}
.profiles.is-scrolly .panel {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  width: 100%;
  max-width: calc(72rem + 2 * var(--gutter));
  margin: 0 auto;
  padding: 100px var(--gutter) 56px;
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  grid-template-rows: minmax(0, 1fr) auto auto auto auto minmax(0, 1fr);
  column-gap: clamp(32px, 5vw, 80px);
  row-gap: 16px;
  align-items: start;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.profiles.is-scrolly .panel > h2 { grid-column: 1; grid-row: 2; }
.profiles.is-scrolly .panel > .profiles-sub { grid-column: 1; grid-row: 3; margin: 0; }
.profiles.is-scrolly .profiles-spot { display: block; grid-column: 2; grid-row: 1 / 7; align-self: stretch; min-height: 0; }
.profiles.is-scrolly .panel > .profiles-list {
  grid-column: 1;
  grid-row: 4;
  align-self: start;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin-top: 10px;
}
/* las cuatro tarjetas en la misma celda: se ve la del perfil del frente */
.profiles.is-scrolly .profiles-list > li {
  grid-area: 1 / 1;
  padding: 22px 22px 24px;
  border-radius: 22px;
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
}
.profiles.is-scrolly .profiles-list h3 {
  margin: 2px 0 0;
  font-family: var(--font-display);
  font-size: clamp(2rem, 2.9vw, 2.7rem);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: var(--track-display);
}
.profiles.is-scrolly .profiles-list p { font-size: 0.98rem; line-height: 1.55; margin-top: 8px; }
/* avance: una raya por perfil, se llena al llegar a él */
.profiles.is-scrolly .profiles-foot { grid-column: 1; grid-row: 5; display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 6px; }
.profiles.is-scrolly .profiles-ticks { display: flex; gap: 8px; }
.profiles-ticks span { position: relative; width: 30px; height: 4px; border-radius: 2px; overflow: hidden; background: rgba(74, 28, 147, 0.14); }
.profiles-ticks span::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--accent);
  transform-origin: 0 50%;
  transform: scaleX(var(--p, 0));
}

/* Pantallas angostas: título arriba, foto al medio, tarjeta del perfil abajo */
@media (max-width: 960px), (max-width: 1100px) and (orientation: portrait) {
  .profiles.is-scrolly .panel {
    max-width: 40rem;
    padding: 92px var(--gutter) 22px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr) auto auto;
    row-gap: 10px;
  }
  .profiles.is-scrolly .panel > h2 { grid-row: 1; }
  .profiles.is-scrolly .panel > .profiles-sub { grid-row: 2; }
  .profiles.is-scrolly .profiles-spot { grid-column: 1; grid-row: 3; }
  .profiles.is-scrolly .panel > .profiles-list { grid-row: 4; margin-top: 0; }
  .profiles.is-scrolly .profiles-foot { grid-row: 5; margin-top: 2px; }
}
@media (max-width: 760px) {
  .profiles.is-scrolly .panel { padding: 100px 16px 18px; row-gap: 8px; }   /* aire bajo la barra */
  .profiles.is-scrolly .panel > h2 { font-size: clamp(1.9rem, 8.6vw, 2.4rem); }
  .profiles.is-scrolly .panel > .profiles-sub { font-size: 0.9rem; line-height: 1.45; }
  #para-quien.is-scrolly .panel { background: none; }   /* sin la tarjeta de vidrio del teléfono: el panel es la pantalla */
  #para-quien.is-scrolly .panel .profiles-list > li { padding: 14px 16px 16px; gap: 12px; border-radius: 18px; background: var(--glass-bg); box-shadow: var(--glass-shadow); }
  .profiles.is-scrolly .profiles-list h3 { font-size: 1.7rem; }
  .profiles.is-scrolly .profiles-list p { font-size: 0.88rem; line-height: 1.45; margin-top: 4px; }
}

/* Cierre del Home: contacto de Admisiones */
.cta-contact { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2px 18px; max-width: 40rem; margin: 4px 0 0; font-size: 0.85rem; color: var(--muted); }
.cta-contact span { font-weight: 700; color: var(--fg); }
.cta-contact a { display: inline-flex; align-items: center; min-height: 32px; color: var(--fg); text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.35); text-underline-offset: 4px; }
@media (hover: hover) and (pointer: fine) { .cta-contact a:hover { color: var(--accent); text-decoration-color: currentColor; } }

/* ---------- Menú para celular y tableta (js/menu.js) ----------
   Botón ☰ en la barra y panel violeta a pantalla completa, debajo de la barra (la barra sigue a la
   vista y el ☰ se vuelve ✕). Solo existe en pantallas de 1100 px o menos. */
.menu-btn, .menu-panel { display: none; }
@media (max-width: 1100px) {
  .topbar { gap: 10px; }
  .topbar > .btn { margin-left: auto; }
  .menu-btn {
    display: grid;
    place-items: center;
    flex: none;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 50%;
    background: transparent;
    color: #FFFFFF;
    cursor: pointer;
    transition: background-color 150ms ease, transform var(--press) var(--ease-out);
  }
  .menu-btn:active { transform: scale(0.92); }
  .menu-btn:focus-visible { outline: 2px solid var(--celeste); outline-offset: 3px; }
  .menu-btn-lines { position: relative; display: block; width: 18px; height: 12px; }
  .menu-btn-lines span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    border-radius: 1px;
    background: currentColor;
    transition: transform 260ms var(--ease-out), opacity 150ms ease;
  }
  .menu-btn-lines span:nth-child(1) { top: 0; }
  .menu-btn-lines span:nth-child(2) { top: 5px; }
  .menu-btn-lines span:nth-child(3) { top: 10px; }
  .menu-btn[aria-expanded="true"] .menu-btn-lines span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
  .menu-btn[aria-expanded="true"] .menu-btn-lines span:nth-child(2) { opacity: 0; }
  .menu-btn[aria-expanded="true"] .menu-btn-lines span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

  .menu-panel {
    position: fixed;
    inset: 0;
    z-index: 9;                                       /* debajo de la barra: la barra queda a la vista */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 28px;
    padding: calc(104px + env(safe-area-inset-top, 0px)) var(--gutter) calc(28px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    overscroll-behavior: contain;
    background: radial-gradient(120% 70% at 80% 0%, #5B2BB0 0%, rgba(91, 43, 176, 0) 60%), linear-gradient(180deg, #4A1C93, #2B1056);
    color: #FFFFFF;
    visibility: hidden;
    opacity: 0;
    transition: opacity 240ms var(--ease-out), visibility 0s linear 240ms;
  }
  .menu-panel.is-open { visibility: visible; opacity: 1; transition: opacity 240ms var(--ease-out); }
  .menu-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
  .menu-nav li { border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
  .menu-nav a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 60px;
    padding: 10px 0;
    font-family: var(--font-display);
    font-size: clamp(2rem, 8.4vw, 3rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: var(--track-display);
    text-transform: uppercase;
    text-decoration: none;
    color: #FFFFFF;
  }
  .menu-nav a[aria-current="page"] { color: var(--celeste); }
  .menu-nav a[aria-current="page"]::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--celeste); box-shadow: 0 0 12px rgba(64, 204, 237, 0.7); }
  .menu-nav a:active { opacity: 0.6; }
  .menu-nav a:focus-visible, .menu-contact a:focus-visible { outline: 2px solid var(--celeste); outline-offset: 2px; border-radius: 6px; }
  /* los enlaces suben en orden al abrir */
  .menu-nav li { opacity: 0; transform: translateY(14px); transition: opacity 300ms var(--ease-out), transform 300ms var(--ease-out); }
  .menu-panel.is-open .menu-nav li { opacity: 1; transform: none; transition-delay: calc(60ms + var(--i, 0) * 40ms); }
  .menu-foot { display: flex; flex-direction: column; gap: 18px; }
  .menu-cta { --btn-bg: var(--celeste); --btn-fg: #2B1056; --btn-line: var(--celeste); width: 100%; padding-block: 1em; }
  .menu-contact { margin: 0; display: flex; flex-direction: column; gap: 2px; font-size: 0.88rem; color: rgba(255, 255, 255, 0.78); }
  .menu-contact span { font-size: 0.72rem; font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; color: #FFFFFF; }
  .menu-contact a { display: inline-flex; align-items: center; min-height: 36px; color: #FFFFFF; text-decoration: none; }
  /* con el menú abierto la página de atrás no se desplaza; la barra pierde la transparencia */
  html.menu-open { overflow: hidden; }
  html.menu-open .topbar { background-color: #4A1C93; }
}
@media (max-width: 1100px) and (hover: hover) and (pointer: fine) {
  .menu-btn:hover { background: rgba(255, 255, 255, 0.12); }
}
/* teléfonos angostos: el botón de la barra se compacta para que quepan logo, botón y ☰ */
@media (max-width: 420px) {
  .topbar > .btn { padding-inline: 0.95em; font-size: 0.76rem; gap: 0.5em; }
  .topbar > .btn .ico-arrow { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .menu-panel, .menu-panel.is-open { transition: opacity 150ms ease, visibility 0s linear 150ms; }
  .menu-panel.is-open { transition: opacity 150ms ease; }
  .menu-nav li, .menu-panel.is-open .menu-nav li { transform: none; transition: opacity 150ms ease; transition-delay: 0ms; }
  .menu-btn-lines span { transition: opacity 150ms ease; }
}

/* Enlace "Ver más" de cada sección del Home a su página interna */
.sec-more {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  min-height: 44px;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--accent);
  white-space: nowrap;
}
.sec-more .ico-arrow { width: 1.25em; height: 1.25em; }
.actions .sec-more { margin-left: 8px; }
.section.split .panel > .profiles-foot { grid-column: 1; }
@media (hover: hover) and (pointer: fine) { .sec-more:hover .ico-arrow { transform: translateX(3px); } }
@media (prefers-reduced-motion: reduce) { .sec-more:hover .ico-arrow { transform: none; } }

/* ---------- WhatsApp flotante y aviso de cookies (js/sitio.js) ---------- */
.wa-fab {
  position: fixed;
  z-index: 8;
  right: max(16px, env(safe-area-inset-right, 0px));
  bottom: calc(16px + env(safe-area-inset-bottom, 0px) + var(--cookie-h, 0px));
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 56px;
  padding: 0 16px 0 14px;
  border-radius: 999px;
  background: #25D366;
  color: #0B3D1F;
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 12px 28px rgba(12, 2, 40, 0.3);
  transition: transform var(--settle) var(--ease-out), bottom 300ms var(--ease-out), box-shadow 150ms ease;
}
.wa-fab svg { width: 28px; height: 28px; fill: none; stroke: #0B3D1F; stroke-width: 1.7; stroke-linejoin: round; }
.wa-fab svg path:last-child { fill: #0B3D1F; stroke: none; }
.wa-fab:active { transform: scale(0.94); transition-duration: var(--press); }
.wa-fab:focus-visible { outline: 3px solid var(--celeste); outline-offset: 3px; }
html.menu-open .wa-fab { opacity: 0; pointer-events: none; }
@media (max-width: 760px) {
  .wa-fab { width: 56px; padding: 0; justify-content: center; }
  .wa-fab-label { display: none; }
}
@media (hover: hover) and (pointer: fine) { .wa-fab:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(12, 2, 40, 0.36); } }
/* computador: después de la portada se encoge a un círculo para no tapar el contenido (js/sitio.js);
   con el mouse encima o con el foco del teclado vuelve a mostrar "¿Hablamos?" */
@media (min-width: 761px) {
  .wa-fab-label { display: inline-block; max-width: 10em; overflow: hidden; white-space: nowrap; transition: max-width 300ms var(--ease-out), opacity 200ms ease; }
  .wa-fab.is-compact:not(:hover):not(:focus-visible) { gap: 0; padding: 0 14px; }
  .wa-fab.is-compact:not(:hover):not(:focus-visible) .wa-fab-label { max-width: 0; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .wa-fab-label { transition: none; } }

.cookie-bar {
  position: fixed;
  z-index: 11;
  left: var(--gutter);
  right: var(--gutter);
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 14px 24px;
  max-width: 64rem;
  margin: 0 auto;
  padding: 14px 16px 14px 22px;
  border-radius: 20px;
  background: #22104A;
  color: #FFFFFF;
  box-shadow: 0 18px 44px rgba(12, 2, 40, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.cookie-bar.is-open { display: flex; animation: pg-cookie-in 320ms var(--ease-out); }
@keyframes pg-cookie-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.cookie-bar p { margin: 0; font-size: 0.84rem; line-height: 1.5; color: rgba(255, 255, 255, 0.86); }
.cookie-bar a { color: #FFFFFF; }
.cookie-actions { display: flex; flex: none; gap: 8px; }
.cookie-bar .btn { --btn-bg: var(--celeste); --btn-fg: #22104A; --btn-line: var(--celeste); cursor: pointer; }
.cookie-bar .btn-line-light { background: transparent; color: #FFFFFF; border-color: rgba(255, 255, 255, 0.4); }
html.menu-open .cookie-bar { display: none; }
.cookie-bar .ck-s { display: none; }
/* celular: una sola franja compacta (texto corto + dos botones pequeños) */
@media (max-width: 760px) {
  .cookie-bar { left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); gap: 8px; padding: 6px 6px 6px 14px; border-radius: 18px; }
  .cookie-bar .ck-l { display: none; }
  .cookie-bar .ck-s { display: inline; }
  .cookie-bar p { flex: 1; min-width: 0; font-size: 0.75rem; line-height: 1.3; }
  .cookie-actions { gap: 6px; }
  .cookie-actions .btn { min-height: 40px; padding: 0.5em 0.85em; font-size: 0.75rem; white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) { .cookie-bar.is-open { animation: none; } }
.footer-note a, .sf-note a { color: inherit; }

/* ---------- Familias: accesos de las familias de Hybred (pagos, matrícula, plataforma) ----------
   En pantallas grandes, un menú desplegable en la barra (se abre con clic o, con mouse, al pasar encima);
   en el celular y la tableta va dentro del menú ☰ (js/menu.js). */
.fm { position: relative; flex: none; margin-left: -6px; }
.fm-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 40px;
  padding: 0 10px 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: transparent;
  color: var(--fg);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease;
}
.fm-chev { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 200ms var(--ease-out); }
.fm.is-open .fm-chev { transform: rotate(180deg); }
.fm-btn:focus-visible { outline: 2px solid var(--celeste); outline-offset: 2px; }
.fm-list {
  position: absolute;
  top: calc(100% + 14px);
  right: -6px;
  width: 290px;
  margin: 0;
  padding: 8px;
  list-style: none;
  border-radius: 20px;
  background: #FFFFFF;
  border: 1px solid rgba(74, 28, 147, 0.12);
  box-shadow: 0 22px 50px rgba(20, 4, 60, 0.28);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px) scale(0.98);
  transform-origin: top right;
  transition: opacity 160ms ease, transform 200ms var(--ease-out), visibility 0s linear 200ms;
}
.fm-list::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }   /* puente: el mouse llega al menú sin cerrarlo */
.fm.is-open .fm-list { opacity: 1; visibility: visible; transform: none; transition: opacity 160ms ease, transform 200ms var(--ease-out), visibility 0s; }
.fm-list a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  color: #22104A;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.25;
  transition: background-color 150ms ease;
}
.fm-list a .ico { flex: none; width: 36px; height: 36px; padding: 8px; border-radius: 12px; background: rgba(74, 28, 147, 0.08); fill: none; stroke: #4A1C93; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.fm-list small { display: block; margin-top: 2px; font-size: 0.74rem; font-weight: 500; color: rgba(34, 16, 74, 0.68); }
.fm-group + .fm-group { margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(74, 28, 147, 0.1); }
.fm-group-label { display: block; padding: 8px 12px 4px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(34, 16, 74, 0.6); }
.fm-group ul { list-style: none; margin: 0; padding: 0; }
.fm-list a.is-pending { cursor: default; }
.fm-list a.is-pending small { color: #9C6B00; }
.fm-list a:focus-visible { outline: 2px solid #4A1C93; outline-offset: -2px; }
@media (hover: hover) and (pointer: fine) {
  .fm-btn:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.5); }
  .fm-list a:not(.is-pending):hover { background: rgba(74, 28, 147, 0.06); }
}
@media (max-width: 1100px) { .fm { display: none; } }
/* pantallas de 1101 a 1320 px: la barra se compacta para que quepan "Familias" y el botón sin partir renglones */
.mainnav a { white-space: nowrap; }
@media (min-width: 1101px) and (max-width: 1320px) {
  .topbar { gap: 14px; padding-left: 18px; }
  .mainnav { gap: clamp(12px, 1.5vw, 20px); }
  .mainnav a { font-size: 0.8rem; }
  .fm-btn { padding: 0 8px 0 10px; font-size: 0.78rem; }
  .topbar .btn-top { padding-inline: 1em; }
}
.fm-ico { display: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* 1101 a 1200 px: "Familias" queda como ícono (el nombre sigue ahí para lectores de pantalla) */
@media (min-width: 1101px) and (max-width: 1200px) {
  .fm-ico { display: block; }
  .fm-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* en el menú ☰: una fila de tres accesos */
.menu-fam { margin-top: 4px; }
.menu-fam + .menu-fam { margin-top: 16px; }
.menu-fam p { margin: 0 0 10px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 255, 255, 0.7); }
.menu-fam ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.menu-fam a {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  height: 100%;
  padding: 12px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #FFFFFF;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
}
.menu-fam a.is-pending { opacity: 0.6; }
.menu-fam .ico { width: 22px; height: 22px; fill: none; stroke: var(--celeste); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-reduced-motion: reduce) { .fm-list, .fm-chev { transition: none; } }

/* ---------- Cambio de idioma (ES / EN) ---------- */
.lang-switch {
  display: inline-grid;
  place-items: center;
  flex: none;
  min-width: 40px;
  height: 40px;
  padding: 0 10px;
  margin-left: -8px;
  border-radius: 999px;
  color: var(--fg);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-decoration: none;
  transition: background-color 150ms ease, color 150ms ease;
}
.lang-switch:focus-visible { outline: 2px solid var(--celeste); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .lang-switch:hover { background: rgba(255, 255, 255, 0.12); color: var(--accent); } }
@media (max-width: 1100px) { .lang-switch { display: none; } }
@media (max-width: 1100px) { .menu-contact .menu-lang { margin-top: 10px; font-weight: 700; color: var(--celeste); } }

/* ---------- Cierre: el contenido cabe completo dentro del anillo (js/main.js lo enmarca) ----------
   En pantallas bajas el titular, la frase y el logo se ajustan al alto de la pantalla; en el teléfono el
   anillo rodea el logo grande, así que el logo se separa un poco más de los botones para dejarle aire. */
#inscripcion h2 { max-width: 7.5em; margin-inline: auto; }   /* el titular siempre en dos renglones */
@media (min-width: 761px) and (max-height: 860px) {
  #inscripcion h2 { font-size: min(clamp(2.5rem, 5vw, 4.2rem), 6.4vh); }
  #inscripcion .lead { max-width: 25rem; font-size: min(1.05rem, 2.3vh); }
  #inscripcion .logo-big { font-size: min(clamp(3.2rem, 9vw, 5.5rem), 8.2vh); }
  #inscripcion .sign-off { margin-top: 2.4vh; }
}
@media (max-width: 760px) {
  #inscripcion .sign-off { margin-top: 92px; }
  #inscripcion .sign-off p { max-width: 13rem; font-size: 0.88rem; text-align: center; }
}
@media (max-width: 760px) and (max-height: 760px) {      /* teléfonos bajos: menos aire arriba y abajo */
  .section.cta#inscripcion { padding-block: 84px 20px; }
  #inscripcion .actions { gap: 8px; }
  #inscripcion .sign-off { margin-top: 76px; }
}

/* ---------- Pie de página (todas las páginas, también el Home) ---------- */
.site-foot {
  --wrap: 78rem;
  --pad: max(var(--gutter), calc((100vw - var(--wrap)) / 2));
  --bg: #22104A;
  --fg: #FFFFFF;
  --muted: rgba(255, 255, 255, 0.72);
  --line: rgba(255, 255, 255, 0.16);
  --accent: var(--celeste);
  position: relative;
  z-index: 1;                         /* en el Home, por encima del lienzo 3D y del halo */
  background: var(--bg);
  color: var(--fg);
  padding: 56px var(--pad) 28px;
}
/* En el Home el pie no corta: empieza transparente y en 130 px llega a su color (el cierre sigue
   debajo, js/bands.js), igual que los demás cambios de color del Home */
.site-foot.site-foot-fade { background: linear-gradient(to bottom, rgba(34, 16, 74, 0) 0, rgba(34, 16, 74, 0.55) 55px, var(--bg) 130px); padding-top: 92px; }
@media (max-width: 760px) { .site-foot.site-foot-fade { padding-top: 84px; } }

/* Una sola franja: logo · Admisiones (y redes) · Nos respaldan */
.site-foot-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr) minmax(0, 1.25fr) auto; align-items: start; }
.site-foot-in > * { padding: 4px clamp(18px, 2.6vw, 40px); border-left: 1px solid var(--line); min-width: 0; }
.site-foot-in > :first-child { padding-left: 0; border-left: 0; }
.site-foot .brand { color: var(--fg); }
.logo-foot { font-size: clamp(2.4rem, 3.4vw, 3.1rem); }
.sf-brand p { margin: 8px 0 0; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
/* lema: una frase completa, en tipo normal para que se lea de corrido; *así* va en celeste */
.sf-brand .sf-lema { max-width: 19rem; margin-top: 12px; font-size: 0.92rem; font-weight: 500; line-height: 1.45; letter-spacing: 0; text-transform: none; color: var(--muted); }
.sf-brand .sf-lema .hl { color: var(--celeste); font-weight: 700; }
.sf-brand .sf-by { margin-top: 8px; font-size: 0.78rem; font-weight: 500; letter-spacing: 0.02em; text-transform: none; }
.site-foot h2 { margin: 0 0 14px; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg); }
.sf-contact p { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-size: 0.86rem; }
.sf-contact .ico { flex: none; width: 20px; height: 20px; fill: none; stroke: var(--fg); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sf-contact a { color: inherit; }
.sf-contact p { min-height: 28px; }
.site-foot .socials :is(a, .is-soon) { border-color: var(--line); }
.site-foot .socials { flex-wrap: wrap; gap: 8px; }
.sf-contact .sf-tel { flex-wrap: wrap; gap: 6px 26px; }   /* teléfono y WhatsApp en la misma línea */
.sf-contact .sf-tel span { display: inline-flex; align-items: center; gap: 10px; }
.sf-contact .sf-follow { margin-top: 22px; }   /* "Síguenos", bajo el contacto de Admisiones */
.sf-contact .sf-follow h2 { margin-bottom: 10px; }
.sf-note { margin: 36px 0 0; padding-top: 20px; border-top: 1px solid var(--line); font-size: 0.78rem; color: var(--muted); }

/* Respaldo: logos de las instituciones. Quietos (sin JS o con "reducir movimiento"); con .is-reel
   (js/sitio.js) pasan uno a la vez por una ventana, como cuadros de un rollo de película. Se pausa
   con el mouse encima, o al tocarlo o enfocarlo con el teclado. */
.sf-reel { min-width: 0; }
.sf-reel-strip { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 18px 28px; }
.sf-frame { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.sf-cap { font-size: 0.66rem; font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--celeste); text-wrap: balance; }   /* una frase larga pasa a dos renglones */
.sf-det { margin-top: -4px; font-size: 0.72rem; line-height: 1.35; color: rgba(255, 255, 255, 0.74); text-wrap: balance; }   /* detalle opcional (p. ej., las resoluciones) */
.sf-frame img { display: block; height: var(--h, 52px); width: auto; max-width: 100%; }
.sf-frame a { display: inline-block; border-radius: 6px; }
.sf-frame a:focus-visible { outline: 2px solid var(--celeste); outline-offset: 4px; }

.sf-resp:not(.is-reel) .sf-frame[aria-hidden="true"] { display: none; }
.sf-resp.is-reel .sf-reel {
  position: relative;
  width: 100%;
  max-width: 380px;
  height: 140px;
  margin-top: -14px;                  /* el cuadro ya trae aire arriba: alinea la frase con el contacto */
  overflow: hidden;
  border-radius: 14px;
  cursor: pointer;
  -webkit-mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent);
}
.sf-resp.is-reel .sf-reel:focus-visible { outline: 2px solid var(--celeste); outline-offset: 3px; -webkit-mask-image: none; mask-image: none; }
.sf-resp.is-reel .sf-reel-strip { display: block; will-change: transform; }
.sf-resp.is-reel .sf-frame { position: relative; height: 140px; justify-content: center; align-items: center; padding: 0 30px; }
.sf-resp.is-reel .sf-cap, .sf-resp.is-reel .sf-det { text-align: center; }
/* perforaciones del rollo, a los dos lados de cada cuadro */
.sf-resp.is-reel .sf-frame::before, .sf-resp.is-reel .sf-frame::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 10px;
  border-radius: 2px;
  background: repeating-linear-gradient(to bottom, transparent 0 9px, rgba(255, 255, 255, 0.16) 9px 19px, transparent 19px 24px);
}
.sf-resp.is-reel .sf-frame::before { left: 6px; }
.sf-resp.is-reel .sf-frame::after { right: 6px; }
.sf-resp.is-reel .sf-frame + .sf-frame { border-top: 1px dashed rgba(255, 255, 255, 0.12); }
/* detenido con un toque: las perforaciones se encienden en celeste */
.sf-resp.is-held .sf-frame::before, .sf-resp.is-held .sf-frame::after { background: repeating-linear-gradient(to bottom, transparent 0 9px, rgba(64, 204, 237, 0.55) 9px 19px, transparent 19px 24px); }

@media (max-width: 1100px) {
  .site-foot-in > * { padding-inline: 20px; }
  .site-foot-in > :first-child { padding-left: 0; }
}
@media (max-width: 900px) {
  .site-foot-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: 32px; }
  .site-foot-in > :nth-child(3) { padding-left: 0; border-left: 0; }
}
@media (max-width: 760px) {
  .site-foot { padding-top: 44px; }
  .site-foot-in { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
  .site-foot-in > * { padding: 0; border-left: 0; }
  .sf-resp.is-reel .sf-reel { margin-top: -8px; }
}

/* En el Home, los puntos de navegación de las secciones se ocultan cuando aparece el pie (js/sitio.js) */
.dots { transition: opacity var(--settle) ease, visibility var(--settle); }
.foot-in-view .dots { opacity: 0; visibility: hidden; }

/* ---------- ¿Hasta dónde quieres llegar? (js/metas.js) ----------
   Una fila de metas con foto. Con scroll (.is-scrolly) la sección se fija y la fila pasa de derecha
   a izquierda mientras se baja; cada foto se desplaza un poco más lento que su tarjeta (profundidad).
   Sin él, la fila se desliza con el dedo o con la rueda. */
#suenos { overflow-x: clip; }
.section.dr-sec .panel.dr-panel { max-width: none; width: 100%; gap: 26px; }
.dr-head { display: flex; flex-direction: column; gap: 10px; max-width: 40rem; padding-inline: max(0px, calc((100vw - 78rem) / 2 - var(--gutter))); }
.dr-head h2 { font-size: clamp(2.6rem, 5vw, 4.6rem); }
.dr-head h2 .hl { display: block; }
.dr-window { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding: 6px var(--gutter) 18px; }
.dr-window::-webkit-scrollbar { display: none; }
.dr-track { --cw: clamp(250px, 23vw, 330px); list-style: none; margin: 0; padding: 0; display: flex; gap: 22px; width: max-content; padding-left: max(0px, calc((100vw - 78rem) / 2 - var(--gutter))); }
.dr-card {
  position: relative;
  flex: 0 0 var(--cw);
  aspect-ratio: 3 / 4;
  border-radius: 28px;
  overflow: hidden;
  scroll-snap-align: start;
  background: linear-gradient(160deg, #6B3AC4, #2B1056);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 24px 50px rgba(10, 2, 34, 0.45);
}
.dr-card img {
  position: absolute;
  inset: 0 -6%;
  width: 112%;
  max-width: none;          /* más ancha que la tarjeta a propósito (para el paralaje): sin el tope de 100% */
  height: 100%;
  object-fit: cover;
  transform: translate3d(var(--px, 0px), 0, 0);
  will-change: transform;
}
.dr-card.is-cut img { object-fit: cover; object-position: 50% 100%; top: 6%; height: 94%; }
.dr-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(34, 16, 74, 0.94) 0, rgba(34, 16, 74, 0.55) 32%, rgba(34, 16, 74, 0) 58%);
  pointer-events: none;
}
.panel .dr-t {
  position: absolute;
  z-index: 1;
  left: 22px;
  right: 22px;
  bottom: 20px;
  margin: 0;
  max-width: none;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 2.2vw, 2.2rem);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: var(--track-display);
  text-transform: uppercase;
  color: #FFFFFF;
  text-wrap: balance;
}
.dr-n { display: block; margin-bottom: 8px; font-family: var(--font-body); font-size: 0.75rem; letter-spacing: var(--track-label); color: var(--celeste); }
.dr-card.dr-end { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 22px; padding: 28px; background: linear-gradient(160deg, #8F52F2, #4A1C93); }
.dr-card.dr-end::after { display: none; }
.panel .dr-end .dr-t { position: static; font-size: clamp(2rem, 2.8vw, 2.8rem); }
.dr-end .hl { color: var(--celeste); }
.dr-bar { display: none; }
#suenos.is-scrolly .dr-bar { display: block; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, 0.14); overflow: hidden; width: min(320px, 50vw); margin-left: max(0px, calc((100vw - 78rem) / 2 - var(--gutter))); }
#suenos.is-scrolly .dr-bar span { display: block; height: 100%; width: 100%; background: var(--celeste); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
#suenos.is-scrolly { display: block; padding: 0; }
#suenos.is-scrolly .panel {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  justify-content: center;
  justify-content: safe center;           /* si no cabe, que no se meta debajo de la barra */
  padding: 116px var(--gutter) 32px;
  overflow: hidden;
}
#suenos.is-scrolly .dr-window { overflow: visible; scroll-snap-type: none; }
#suenos.is-scrolly .dr-track { will-change: transform; }
@media (max-width: 760px) {
  #suenos { align-items: center; padding-block: 100px 56px; }
  .section.dr-sec .panel.dr-panel { padding-inline: 0; background: none; border-color: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; gap: 18px; }
  #suenos.is-scrolly .panel { padding: 92px var(--gutter) 24px; }
  .dr-head h2 { font-size: clamp(2.3rem, 11vw, 3rem); }
  .dr-track { --cw: 70vw; gap: 14px; }
  .dr-card { border-radius: 22px; }
}
@media (min-width: 761px) and (max-height: 820px) {
  .dr-track { --cw: max(220px, min(330px, 23vw, calc((100vh - 410px) * 0.75))); --cw: max(220px, min(330px, 23vw, calc((100svh - 410px) * 0.75))); }
}

/* ---------- Por qué existe Hybred ----------
   Un solo mensaje al centro: el problema, cuatro situaciones (las mismas cuatro familias de perfiles
   que vienen después) y la promesa. */
.why-sec .panel { max-width: 50rem; align-items: center; text-align: center; gap: 20px; }
.why-sec .label { color: var(--celeste); }
.why-sec h2 { font-size: clamp(2.4rem, 4.6vw, 4.2rem); }
.why-sec h2 .hl { display: block; }
.why-chips { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.why-chips li {
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid var(--glass-line);
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  font-size: 0.9rem;
  font-weight: 600;
}
.why-sec .lead { max-width: 42rem; color: var(--muted); }

/* ---------- Para quién es: los perfiles de cada grupo, en lista con check (dos columnas) ---------- */
.pq-chips {
  list-style: none;
  margin: 14px 0 0;
  padding: 12px 0 0;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 16px;
}
.pq-chips li,
.features .pq-chips li,
.profiles-list .pq-chips li, .profiles-list .pq-chips li:nth-child(even), .profiles-list .pq-chips li:nth-child(odd) {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  color: var(--fg);
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.3;
}
.pq-chips li::before {                /* check celeste */
  content: "";
  flex: 0 0 16px;
  height: 16px;
  margin-top: 0.05em;
  border-radius: 50%;
  background: var(--celeste) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.3 2.3 4.7-4.9' fill='none' stroke='%2322104A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat;
}

/* ---------- Línea de tiempo (Admisión en el Home y proceso en Admisiones) ----------
   Cada paso es un número en un círculo; una línea vertical los une de uno al siguiente. El último
   (la matrícula) va en celeste: es la llegada. */
.tl {
  list-style: none;
  margin: 0;
  padding: clamp(24px, 3vw, 36px);
  border-radius: 26px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-line);
  box-shadow: var(--glass-shadow);
}
.tl-item { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 20px; padding-bottom: 26px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-item:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 25px;
  top: 56px;
  bottom: 4px;
  width: 2px;
  border-radius: 1px;
  background: linear-gradient(to bottom, rgba(143, 82, 242, 0.7), rgba(143, 82, 242, 0.25));
}
.tl-n {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  color: #FFFFFF;
  background: linear-gradient(160deg, #8F52F2, #4A1C93);
  box-shadow: 0 8px 18px rgba(74, 28, 147, 0.25);
}
.tl-item:last-child .tl-n { color: #22104A; background: linear-gradient(160deg, #8FE3F6, #40CCED); box-shadow: 0 8px 18px rgba(64, 204, 237, 0.35); }
.tl-body { min-width: 0; padding-top: 4px; }
.panel .tl-body h3, .tl-body h3 { margin: 0; font-family: var(--font-body); font-size: 1.12rem; font-weight: 700; line-height: 1.3; letter-spacing: 0; text-transform: none; color: var(--fg); }
.panel .tl-body p, .tl-body p { margin: 6px 0 0; max-width: 34rem; font-size: 0.95rem; line-height: 1.55; color: var(--muted); }
/* Home: el texto de la izquierda va centrado en alto con la tarjeta de la línea de tiempo (dos filas
   elásticas, arriba y abajo). En pantallas medianas y en el teléfono el panel es una sola columna. */
#admision .panel { grid-template-rows: 1fr auto auto auto auto 1fr; }
#admision .panel > h2 { grid-row: 2; }
#admision .panel > p { grid-row: 3; }
#admision .panel > .actions { grid-row: 4; }
#admision .panel > .adm-more { grid-column: 1; grid-row: 5; justify-self: start; }
#admision .panel > .tl-pin { grid-column: 2; grid-row: 1 / 7; align-self: center; min-width: 0; }
/* Mientras se construye el proceso, queda fijo y el scroll se alarga (js/admision.js; no con "reducir
   movimiento"): en dos columnas, toda la sección (.is-pin-panel); en una columna, la línea de tiempo
   (.is-pin-list). Al terminar, queda completo un momento y la página sigue. */
#admision.is-pin-panel { display: block; padding: 0; height: calc(100vh + 85vh); height: calc(100svh + 85svh); }
#admision.is-pin-panel .panel {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  max-width: calc(72rem + 2 * var(--gutter));
  padding: 92px var(--gutter) 24px;
}
#admision.is-pin-list .tl { position: sticky; top: var(--tl-top, 90px); }
#admision.is-pin-list .tl-pin::after { content: ""; display: block; height: 80vh; height: 80svh; }   /* el tramo largo (sticky no cuenta el padding) */
/* el botón de WhatsApp con su ícono */

/* Home: el proceso se construye con el scroll (js/admision.js, clase .tl-on). La línea se traza de paso en
   paso y cada número se enciende cuando la línea lo alcanza; antes de eso, el paso espera en tenue. */
.tl.tl-on { position: relative; }
.tl.tl-on .tl-item::before { display: none; }
.tl-track { position: absolute; z-index: 0; width: 2px; border-radius: 1px; background: rgba(143, 82, 242, 0.16); pointer-events: none; }
.tl-fill { position: absolute; inset: 0; border-radius: inherit; transform-origin: 50% 0; transform: scaleY(0); background: linear-gradient(to bottom, #8F52F2, #4A1C93 65%, #40CCED); will-change: transform; }
.tl-head { position: absolute; left: 50%; top: -5px; width: 10px; height: 10px; border-radius: 50%; background: #40CCED; box-shadow: 0 0 0 4px rgba(64, 204, 237, 0.22), 0 0 14px 2px rgba(64, 204, 237, 0.7); opacity: 0; transition: opacity 200ms ease; will-change: transform; }
.tl-on .tl-item { z-index: 1; }
.tl-on .tl-n {
  position: relative;
  isolation: isolate;
  color: rgba(74, 28, 147, 0.42);
  background: #FFFFFF;
  box-shadow: inset 0 0 0 2px rgba(143, 82, 242, 0.24);
  transition: color 450ms ease, box-shadow 450ms ease;
}
.tl-on .tl-n::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(160deg, #8F52F2, #4A1C93);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 400ms ease, transform 620ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.tl-on .tl-item:last-child .tl-n::before { background: linear-gradient(160deg, #8FE3F6, #40CCED); }
.tl-on .tl-item:last-child .tl-n { color: rgba(74, 28, 147, 0.42); background: #FFFFFF; box-shadow: inset 0 0 0 2px rgba(64, 204, 237, 0.35); }
.tl-on .tl-item.is-on .tl-n { color: #FFFFFF; box-shadow: 0 8px 18px rgba(74, 28, 147, 0.25); animation: tl-pop 700ms cubic-bezier(0.34, 1.56, 0.64, 1); }
.tl-on .tl-item.is-on:last-child .tl-n { color: #22104A; box-shadow: 0 8px 22px rgba(64, 204, 237, 0.45); }
.tl-on .tl-item.is-on .tl-n::before { opacity: 1; transform: none; }
.tl-on .tl-body { opacity: 0.32; transform: translate3d(0, 8px, 0); transition: opacity 560ms ease, transform 700ms cubic-bezier(0.22, 1, 0.36, 1); }
.tl-on .tl-item.is-on .tl-body { opacity: 1; transform: none; }
@keyframes tl-pop { 0% { transform: scale(0.88); } 55% { transform: scale(1.1); } 100% { transform: scale(1); } }
/* con los cuatro pasos encendidos, el botón invita a empezar: un anillo celeste que se expande una vez */
#admision .actions .btn.is-ready { animation: tl-ready 1300ms ease-out 200ms 2; }
@keyframes tl-ready { 0% { box-shadow: 0 0 0 0 rgba(64, 204, 237, 0.6); } 100% { box-shadow: 0 0 0 16px rgba(64, 204, 237, 0); } }
@media (prefers-reduced-motion: reduce) {
  .tl-on .tl-item.is-on .tl-n, #admision .actions .btn.is-ready { animation: none; }
}
@media (max-width: 760px) {
  .tl { padding: 22px 18px; border-radius: 22px; }
  .tl-item { grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; padding-bottom: 22px; }
  .tl-item:not(:last-child)::before { left: 21px; top: 48px; }
  .tl-n { width: 44px; height: 44px; font-size: 1.15rem; }
  .tl-body { padding-top: 2px; }
  .panel .tl-body h3, .tl-body h3 { font-size: 1.02rem; }
  .panel .tl-body p, .tl-body p { font-size: 0.88rem; }
}
@media (max-width: 760px) {
  .why-sec h2 { font-size: clamp(2.1rem, 9.6vw, 2.7rem); }
  .why-chips li { font-size: 0.82rem; padding: 7px 12px; }
}

/* ---------- Por qué existe Hybred: el horario que se rompe (js/semana.js) ----------
   Sin JavaScript: el texto y las situaciones, centrados (reglas .why-sec). Con JavaScript (.wk-on) la
   sección muestra la semana dibujada; con scroll (.is-scrolly) además se fija y el horario cuenta la
   historia mientras se baja: clases fijas → la vida real llega y choca → se rompe → semana Hybred. */
.wk-week { display: none; }
.wk-caps { display: none; }
.wk-on .wk-week { display: flex; }
.wk-on .why-chips { display: none; }
.wk-on .wk-lead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }   /* la leen los lectores de pantalla */
.section.wk-on { justify-content: center; }
.section.wk-on .panel.wk-stage {
  max-width: 76rem;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  align-items: center;
  column-gap: clamp(28px, 5vw, 80px);
  text-align: left;
}
.wk-on .wk-copy { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.wk-on.why-sec h2 { font-size: clamp(2.2rem, 3.6vw, 3.5rem); }
.wk-on .wk-caps { display: grid; min-height: 7.5em; }
.wk-cap {
  grid-area: 1 / 1;
  margin: 0;
  max-width: 30rem;
  font-size: clamp(1.05rem, 1.35vw, 1.25rem);
  line-height: 1.5;
  color: #FFFFFF;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 260ms var(--ease-out), transform 260ms var(--ease-out);
}
.wk-cap.is-on { opacity: 1; transform: none; transition-delay: 80ms; }
.wk-cap.is-last { color: var(--celeste); font-weight: 600; }
.wk-on .actions { margin-top: 0; }

/* la semana */
.wk-week { flex-direction: column; gap: 10px; margin: 0; width: 100%; }
.wk-head { display: grid; grid-template-columns: 44px repeat(5, minmax(0, 1fr)); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255, 255, 255, 0.8); }
.wk-head > span { text-align: center; }
.wk-ds { display: none; }
.wk-body { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); height: min(58vh, 520px); height: min(58svh, 520px); }
.wk-hours { position: relative; }
.wk-hours span { position: absolute; right: 8px; top: var(--y); transform: translateY(-50%); font-size: 0.68rem; color: rgba(255, 255, 255, 0.5); font-variant-numeric: tabular-nums; }
.wk-grid {
  position: relative;
  overflow: hidden;                         /* las clases que caen salen por abajo */
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background:
    linear-gradient(to right, rgba(255, 255, 255, 0.07) 1px, transparent 1px) 0 0 / 20% 100%,
    linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px) 0 0 / 100% calc(100% / 7),
    rgba(255, 255, 255, 0.03);
}
/* la jornada fija de 7 a 3 */
.wk-band {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% / 14);
  height: calc(100% / 14 * 8);
  background: rgba(255, 255, 255, 0.05);
  border-block: 1px dashed rgba(255, 255, 255, 0.25);
  opacity: var(--o, 1);
}
.wk-b {
  position: absolute;
  display: flex;
  align-items: flex-start;
  padding: 6px 8px;
  border-radius: 10px;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.15;
  overflow: hidden;
  will-change: transform, opacity;
  box-sizing: border-box;
}
.wk-b span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wk-class { flex-direction: column; gap: 2px; }
.wk-class .wk-k { font-size: 0.62rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.7; }
.wk-class .wk-s { max-width: 100%; white-space: normal; text-overflow: clip; line-height: 1.12; }   /* nombres largos: dos renglones */
.wk-class b { font-weight: 700; }
.wk-ss { display: none; }
.wk-class {
  --hit: 0;
  background: color-mix(in srgb, rgba(255, 255, 255, 0.16), rgba(255, 90, 122, 0.85) calc(var(--hit) * 100%));
  border: 1px solid color-mix(in srgb, rgba(255, 255, 255, 0.25), #FF5A7A calc(var(--hit) * 100%));
  color: rgba(255, 255, 255, 0.9);
}
.wk-life { z-index: 2; background: #B59AF6; color: #22104A; box-shadow: 0 8px 20px rgba(10, 2, 34, 0.35); }
.wk-life span { white-space: normal; text-overflow: clip; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: anywhere; line-height: 1.12; }   /* en el celular, "Presentación" o "Cita médica" pasan a dos renglones en vez de cortarse */
.wk-online { z-index: 1; background: #40CCED; color: #22104A; box-shadow: 0 8px 20px rgba(10, 2, 34, 0.3); }
.wk-tutor { z-index: 1; background: #FFFFFF; color: #4A1C93; box-shadow: 0 8px 20px rgba(10, 2, 34, 0.3); }
.wk-legend { list-style: none; margin: 4px 0 0 44px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 0.74rem; color: rgba(255, 255, 255, 0.78); }
.wk-legend li { display: flex; align-items: center; gap: 6px; }
.wk-legend li::before { content: ""; width: 10px; height: 10px; border-radius: 3px; }
.wk-lg0::before { background: rgba(255, 255, 255, 0.3); }
.wk-lg1::before { background: #B59AF6; }
.wk-lg2::before { background: #40CCED; }
.wk-lg3::before { background: #FFFFFF; }

/* fijada mientras se baja */
.wk-sec.is-scrolly { display: block; padding: 0; height: calc(100vh + 130vh); height: calc(100svh + 130svh); }
.section.wk-sec.is-scrolly .panel.wk-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  margin: 0 auto;
  padding: 110px var(--gutter) 36px;
  align-content: center;
}
@media (prefers-reduced-motion: reduce) {
  .wk-cap { transition: opacity 200ms ease; transform: none; }
}
@media (max-width: 900px), (max-width: 1100px) and (orientation: portrait) {
  .section.wk-on .panel.wk-stage { grid-template-columns: minmax(0, 1fr); row-gap: 14px; align-content: center; }
  .wk-on .wk-caps { min-height: 4.6em; }
  .wk-cap { font-size: 1rem; }
  .wk-body { height: min(44vh, 420px); height: min(44svh, 420px); }
}
@media (max-width: 760px) {
  .section.wk-on .panel.wk-stage { padding-inline: 0; background: none; border-color: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .section.wk-sec.is-scrolly .panel.wk-stage { padding: 88px var(--gutter) 20px; gap: 10px; }
  .wk-on.why-sec h2 { font-size: clamp(1.9rem, 8.4vw, 2.4rem); }
  .wk-on .wk-copy { gap: 8px; }
  .wk-on .wk-caps { min-height: 4.4em; }
  .wk-cap { font-size: 0.92rem; line-height: 1.45; }
  .wk-dl { display: none; }
  .wk-ds { display: inline; }
  .wk-head { grid-template-columns: 34px repeat(5, minmax(0, 1fr)); font-size: 0.72rem; }
  .wk-body { grid-template-columns: 34px minmax(0, 1fr); height: min(40vh, 360px); height: min(40svh, 360px); }
  .wk-hours span { right: 5px; font-size: 0.6rem; }
  .wk-grid { border-radius: 12px; }
  .wk-b { padding: 3px 4px; border-radius: 6px; font-size: 0.56rem; }
  .wk-class .wk-k, .wk-sl { display: none; }
  .wk-ss { display: inline; }
  .wk-legend { margin-left: 34px; gap: 4px 10px; font-size: 0.66rem; }
}

/* ---------- Celulares y tablets ----------
   Tablets en vertical (iPad): el inicio, "Por qué existe Hybred" y "Para quién es" van apilados
   (reglas de arriba); aquí, tamaños para aprovechar el alto. Celulares bajos (iPhone SE): todo lo
   fijado cabe en una pantalla. En el celular, el botón de WhatsApp no tapa enlaces ni leyendas. */
@media (min-width: 761px) and (max-width: 1100px) and (orientation: portrait) {
  .wk-body { height: min(46vh, 580px); height: min(46svh, 580px); }
  .wk-on .wk-caps { min-height: 3.4em; }
  .dr-track { --cw: min(42vw, 400px, calc((100vh - 420px) * 0.75)); --cw: min(42vw, 400px, calc((100svh - 420px) * 0.75)); }
  .testi-sec.is-scrolly .testi.is-carousel .tc-stage { --cw: min(640px, 62vw, calc((100vh - 560px) * 16 / 9)); --cw: min(640px, 62vw, calc((100svh - 560px) * 16 / 9)); }
  .section.testi-sec .panel { max-width: none; }
  .profiles.is-scrolly .profiles-foot { padding-right: 84px; }
}
@media (max-width: 760px) {
  /* "Ver todos los perfiles" no queda debajo del botón de WhatsApp */
  .profiles.is-scrolly .profiles-foot { padding-right: 64px; gap: 12px; }
  .profiles.is-scrolly .profiles-ticks { gap: 5px; }
  .profiles.is-scrolly .profiles-ticks span { width: 16px; }
  .profiles.is-scrolly .profiles-foot .sec-more { font-size: 0.92rem; gap: 0.4em; }
  .wk-legend { padding-right: 56px; }
}
@media (max-width: 760px) and (max-height: 720px) {
  /* inicio: foto más baja para que se vean los botones */
  .hero-figure { height: min(30vh, 260px); margin-bottom: -30px; }
  .hero .lead { font-size: 0.9rem; line-height: 1.45; }
  /* el horario */
  .section.wk-sec.is-scrolly .panel.wk-stage { padding-top: 76px; align-content: safe center; }
  .wk-on .wk-caps { min-height: 4.2em; }
  .wk-body { height: 33vh; height: 33svh; }
  /* perfiles: sin la descripción, para que la tarjeta 3D tenga espacio (quedan el grupo y sus perfiles) */
  .profiles.is-scrolly .panel { padding-top: 76px; }
  .profiles.is-scrolly .panel > .profiles-sub { display: none; }
  .profiles.is-scrolly .profiles-list p { display: none; }
  .profiles.is-scrolly .profiles-list .pq-chips { margin-top: 8px; padding-top: 8px; gap: 6px 12px; }
  /* testimonios: una sola frase bajo el video */
  .testi-sec.is-scrolly .quote-list .quote:nth-child(2) { display: none; }
}

/* ---------- Acompañamiento: "Para ti" y "Para tu familia", con la vista de la familia en un celular ----------
   A la izquierda, el título y los dos grupos de puntos; a la derecha, la ilustración de la plataforma tal como
   la ve la familia (avance por materia, última actividad, mensaje del tutor). Al revelarse la sección, las
   barras se llenan y llega el mensaje. En pantallas medianas y en el teléfono, una sola columna con el
   celular después del texto. */
.acomp .acomp-panel {
  width: 100%;
  max-width: 74rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
  grid-template-rows: auto auto auto 1fr;
  column-gap: clamp(32px, 5vw, 88px);
  row-gap: 18px;
  align-items: start;
}
.acomp .acomp-panel > h2, .acomp .acomp-panel > .acomp-lead, .acomp .acomp-panel > .acomp-groups, .acomp .acomp-panel > .actions { grid-column: 1; }
.acomp .acomp-panel > h2 { font-size: clamp(2.3rem, 3.9vw, 3.7rem); }
.acomp .acomp-lead { max-width: 36rem; }
.acomp-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; margin-top: 8px; }
.acomp-k {
  margin: 0 0 12px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--celeste);
}
.acomp-group ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.acomp-group li { display: flex; gap: 12px; align-items: flex-start; }
.acomp-group .ico { width: 24px; height: 24px; margin-top: 2px; stroke: var(--celeste); }
.panel .acomp-group h3 { margin: 0; font-family: var(--font-body); font-size: 0.98rem; font-weight: 700; line-height: 1.3; letter-spacing: 0; text-transform: none; color: var(--fg); }
.panel .acomp-group p { margin: 4px 0 0; font-size: 0.86rem; line-height: 1.5; color: var(--muted); }
.panel .acomp-group .acomp-k { margin: 0 0 14px; }   /* aire entre "Para ti" / "Para tu familia" y sus puntos */

/* el celular */
.fam-pin { grid-column: 2; grid-row: 1 / 5; align-self: center; justify-self: center; width: min(100%, 300px); }
.fam-phone { position: relative; margin: 0; }
.fam-phone::before {
  content: "";
  position: absolute;
  inset: 6% -18% 4%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(64, 204, 237, 0.28), rgba(64, 204, 237, 0) 70%), radial-gradient(closest-side at 60% 40%, rgba(143, 82, 242, 0.38), rgba(143, 82, 242, 0) 100%);
  filter: blur(16px);
  pointer-events: none;
}
/* la pantalla: el "Panel del acudiente" de la plataforma, con datos de ejemplo. Medidas en --u: 1/280 del
   ancho de la pantalla (las mismas unidades con las que js/familia3d.js la dibuja en 3D) */
.fam-screen {
  --u: calc(100cqw / 280);
  container-type: inline-size;
  position: relative;
  aspect-ratio: 9 / 19.5;
  border-radius: 44px;
  background: #F8F9FD;
  border: 5px solid #000000;                 /* vidrio negro: bordes finos y parejos, como un iPhone */
  box-shadow: 0 0 0 3px #D6D2CB, 0 0 0 4px rgba(120, 112, 100, 0.6), 0 30px 60px rgba(10, 2, 34, 0.55);   /* marco de titanio */
  color: #12121E;
  font-family: var(--font-body);
  line-height: 1.25;
  overflow: hidden;
}
.fam-screen::before { content: ""; position: absolute; left: 50%; top: calc(10 * var(--u)); width: calc(90 * var(--u)); height: calc(26 * var(--u)); margin-left: calc(-45 * var(--u)); border-radius: 99px; background: #000000; }
.fam-screen::after { content: "9:41"; position: absolute; left: calc(36 * var(--u)); top: calc(16 * var(--u)); font-size: calc(11 * var(--u)); font-weight: 700; color: #12121E; }
.fam-screen ul { list-style: none; margin: 0; padding: 0; }
.panel .fam-screen p { margin: 0; max-width: none; }
.fam-screen .fi { flex: none; width: calc(10 * var(--u)); height: calc(10 * var(--u)); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.panel .fam-screen .fam-title { margin: calc(48 * var(--u)) calc(16 * var(--u)) calc(8 * var(--u)); font-size: calc(15 * var(--u)); line-height: calc(18 * var(--u)); font-weight: 800; letter-spacing: -0.01em; }
.fam-card { box-sizing: border-box; margin: 0 calc(12 * var(--u)); padding: calc(12 * var(--u)); border-radius: calc(14 * var(--u)); background: #FFFFFF; border: 1px solid #E8E9F0; box-shadow: 0 calc(2 * var(--u)) calc(8 * var(--u)) rgba(20, 20, 50, 0.04); }
.fam-profile { height: calc(140 * var(--u)); }
.fam-who { display: flex; align-items: center; gap: calc(10 * var(--u)); }
.fam-avatar { flex: none; width: calc(36 * var(--u)); height: calc(36 * var(--u)); border-radius: 50%; display: grid; place-items: center; background: linear-gradient(160deg, #8F52F2, #4A1C93); box-shadow: 0 0 0 calc(2.5 * var(--u)) #E2D8FA; color: #FFFFFF; font-size: calc(15 * var(--u)); font-weight: 700; }
.fam-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.fam-who strong { display: block; font-size: calc(13 * var(--u)); line-height: calc(16 * var(--u)); font-weight: 700; }
.fam-chip { display: inline-flex; align-items: center; gap: calc(4 * var(--u)); height: calc(16 * var(--u)); margin-top: calc(3 * var(--u)); padding: 0 calc(7 * var(--u)); border-radius: 99px; background: #EAE4FC; color: #3A1279; font-size: calc(8.5 * var(--u)); font-weight: 700; white-space: nowrap; }
.fam-chip .fi { width: calc(9 * var(--u)); height: calc(9 * var(--u)); }
.fam-chip-gray { margin-top: calc(12 * var(--u)); background: #F0F1F5; color: #4B5260; font-weight: 600; }
.fam-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(7 * var(--u)); margin-top: calc(8 * var(--u)) !important; }
.fam-stats li { box-sizing: border-box; height: calc(44 * var(--u)); overflow: hidden; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: calc(4 * var(--u)); align-content: start; padding: calc(6 * var(--u)) calc(5 * var(--u)) 0 calc(6 * var(--u)); border-radius: calc(9 * var(--u)); background: #F6F6FC; border: 1px solid #E6E7EF; }
.fam-stats .fi { grid-row: 1 / 3; margin-top: calc(2 * var(--u)); color: #4A1E8C; }
.fam-stats b { font-size: calc(11.5 * var(--u)); line-height: calc(14 * var(--u)); font-weight: 800; white-space: nowrap; }
.fam-stats small { font-size: calc(7.5 * var(--u)); line-height: calc(9 * var(--u)); font-weight: 500; color: #6B727E; }
.fam-tabs { display: flex; gap: calc(6 * var(--u)); margin: calc(10 * var(--u)) 0 0 calc(12 * var(--u)) !important; padding-bottom: calc(9 * var(--u)) !important; border-bottom: 1px solid #E8E9EF; white-space: nowrap; overflow: hidden; }
.fam-tabs li { box-sizing: border-box; flex: none; display: inline-flex; align-items: center; gap: calc(4 * var(--u)); height: calc(24 * var(--u)); padding: 0 calc(9 * var(--u)); border-radius: calc(9 * var(--u)); border: 1px solid #E3E4EC; background: #FFFFFF; font-size: calc(9 * var(--u)); font-weight: 600; color: #2A2E3A; }
.fam-tabs li.is-on { background: #EFE9FD; border-color: #7A55B5; color: #3A1279; font-weight: 700; }
.fam-progress { margin-top: calc(9 * var(--u)); padding-bottom: calc(8 * var(--u)); }
.fam-ptitle { display: block; font-size: calc(12 * var(--u)); line-height: calc(16 * var(--u)); font-weight: 800; }
.fam-seg { display: flex; height: calc(7 * var(--u)); margin-top: calc(4 * var(--u)); border-radius: 99px; overflow: hidden; background: #EEF0F4; }
.fam-seg i { flex: var(--v) 0 0; transform-origin: left; }
.fam-seg i:nth-child(1), .fam-legend li:nth-child(1) { --c: #22AC42; --t: #207B37; }
.fam-seg i:nth-child(2), .fam-legend li:nth-child(2) { --c: #0D80BE; --t: #145C86; }
.fam-seg i:nth-child(3), .fam-legend li:nth-child(3) { --c: #CB670B; --t: #9A4A0C; }
.fam-seg i:nth-child(4), .fam-legend li:nth-child(4) { --c: #D0103A; --t: #A50D2F; }
.fam-seg i { background: var(--c); }
.fam-legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(3 * var(--u)) calc(8 * var(--u)); margin-top: calc(8 * var(--u)) !important; font-size: calc(8.5 * var(--u)); line-height: calc(11 * var(--u)); font-weight: 700; }
.fam-legend li { color: var(--t); white-space: nowrap; }
.fam-legend li::before { content: ""; display: inline-block; width: calc(6 * var(--u)); height: calc(6 * var(--u)); margin-right: calc(4 * var(--u)); border-radius: 50%; background: var(--c); vertical-align: 0.05em; }
.fam-grades { margin-top: calc(10 * var(--u)); padding-bottom: calc(4 * var(--u)); }
.panel .fam-screen .fam-gh { display: flex; align-items: center; gap: calc(5 * var(--u)); font-size: calc(10.5 * var(--u)); line-height: calc(13 * var(--u)); font-weight: 700; }
.fam-gh .fi { width: calc(11 * var(--u)); height: calc(11 * var(--u)); color: #4A1E8C; }
.fam-grades li { box-sizing: border-box; height: calc(33 * var(--u)); display: flex; align-items: center; justify-content: space-between; gap: calc(8 * var(--u)); border-top: 1px solid #EEF0F4; }
.fam-grades li:first-child { margin-top: calc(5 * var(--u)); border-top: 0; }
.fam-grades li > div { min-width: 0; }
.fam-grades strong { display: block; font-size: calc(9.5 * var(--u)); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fam-grades small { display: block; margin-top: calc(2 * var(--u)); font-size: calc(7 * var(--u)); font-weight: 600; letter-spacing: 0.02em; color: #6B727E; white-space: nowrap; }
.fam-grades b { flex: none; padding: calc(3 * var(--u)) calc(6 * var(--u)); border-radius: 99px; background: #E3F6E8; color: #1E7A36; font-size: calc(8.5 * var(--u)); font-weight: 800; white-space: nowrap; }
.fam-msg { position: absolute; left: calc(14 * var(--u)); right: calc(14 * var(--u)); bottom: calc(60 * var(--u)); display: flex; gap: calc(9 * var(--u)); align-items: flex-start; padding: calc(11 * var(--u)) calc(12 * var(--u)); border-radius: calc(14 * var(--u)); background: #F4F0FE; border: 1px solid #D6C8F6; box-shadow: 0 calc(8 * var(--u)) calc(22 * var(--u)) rgba(58, 18, 121, 0.25); color: #2A1A55; }
.fam-msg > .fi { width: calc(22 * var(--u)); height: calc(22 * var(--u)); padding: calc(5 * var(--u)); border-radius: calc(7 * var(--u)); background: #E4DAFB; color: #3A1279; box-sizing: border-box; }
.fam-msg small { display: block; font-size: calc(8.5 * var(--u)); font-weight: 600; color: #6B727E; }
.fam-msg small span { font-weight: 700; color: #3A1279; }
.panel .fam-screen .fam-msg p { margin-top: calc(3 * var(--u)); font-size: calc(9.5 * var(--u)); line-height: 1.4; font-style: italic; font-weight: 500; color: #2A1A55; }
.fam-nav { position: absolute; left: 0; right: 0; bottom: 0; height: calc(52 * var(--u)); display: flex; justify-content: space-around; align-items: flex-start; padding-top: calc(8 * var(--u)) !important; background: #FFFFFF; border-top: 1px solid #E8E9EF; }
.fam-nav::after { content: ""; position: absolute; left: 50%; bottom: calc(6 * var(--u)); width: calc(84 * var(--u)); height: calc(4 * var(--u)); margin-left: calc(-42 * var(--u)); border-radius: 99px; background: #12121E; }
.fam-nav li { position: relative; display: grid; place-items: center; width: calc(40 * var(--u)); height: calc(26 * var(--u)); border-radius: 99px; color: #3A1279; }
.fam-nav li.is-on { background: #DED8EA; }
.fam-nav li.is-on::before { content: ""; position: absolute; top: calc(-9 * var(--u)); left: 50%; width: calc(18 * var(--u)); height: calc(3 * var(--u)); margin-left: calc(-9 * var(--u)); border-radius: 0 0 calc(3 * var(--u)) calc(3 * var(--u)); background: #4A1E8C; }
.fam-nav .fi { width: calc(14 * var(--u)); height: calc(14 * var(--u)); stroke-width: 1.8; }
.fam-phone figcaption { margin-top: 12px; text-align: center; font-size: 0.72rem; color: var(--muted); }
/* versión en HTML (sin WebGL): cuando el celular está a la vista (js/familia3d.js pone .is-live), la barra de
   avance se llena, entran las calificaciones y llega el mensaje del tutor. Con "reducir movimiento" no se
   pone .fam-wait y todo queda quieto y completo. */
.fam-phone.fam-wait .fam-seg i { transform: scaleX(0); transition: transform 650ms linear; }
.fam-phone.fam-wait .fam-grades li { opacity: 0; transform: translate3d(0, 6px, 0); transition: opacity 600ms ease, transform 700ms var(--ease-out); }
.fam-phone.fam-wait .fam-msg { opacity: 0; transform: translate3d(0, 14px, 0) scale(0.97); transition: opacity 600ms ease, transform 700ms var(--ease-out); }
.fam-phone.fam-wait.is-live .fam-seg i, .fam-phone.fam-wait.is-live .fam-grades li, .fam-phone.fam-wait.is-live .fam-msg { opacity: 1; transform: none; }
.fam-phone.is-live .fam-seg i:nth-child(1) { transition-delay: 300ms; }
.fam-phone.is-live .fam-seg i:nth-child(2) { transition-delay: 950ms; }
.fam-phone.is-live .fam-seg i:nth-child(3) { transition-delay: 1600ms; }
.fam-phone.is-live .fam-seg i:nth-child(4) { transition-delay: 2250ms; }
.fam-phone.is-live .fam-grades li:nth-child(1) { transition-delay: 2000ms; }
.fam-phone.is-live .fam-grades li:nth-child(2) { transition-delay: 2500ms; }
.fam-phone.is-live .fam-grades li:nth-child(3) { transition-delay: 3000ms; }
.fam-phone.is-live .fam-msg { transition-delay: 4000ms; }
@media (max-width: 960px), (max-width: 1100px) and (orientation: portrait) {
  .acomp .acomp-panel { display: flex; flex-direction: column; max-width: 44rem; }
  .acomp .acomp-panel > h2 { order: 0; }
  .acomp .acomp-lead { order: 1; }
  .fam-pin { order: 2; width: min(78%, 270px); margin: 10px auto 6px; }
  .acomp-groups { order: 3; }
  .acomp .acomp-panel > .actions { order: 4; }
}
@media (max-width: 760px) {
  .acomp .acomp-panel > h2 { font-size: clamp(2.1rem, 9.6vw, 2.6rem); }
  .acomp-groups { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .fam-screen { border-width: 4px; border-radius: 38px; }
}

/* Celular en 3D (js/familia3d.js): el canvas ocupa el lugar de la ilustración, con margen alrededor para
   que el celular inclinado y sus botones no se corten. */
.acomp .acomp-panel > :not(.fam-pin) { position: relative; z-index: 1; }
.fam-phone.is-3d .fam-screen { visibility: hidden; }
.fam-3d { position: absolute; z-index: 0; top: -12%; bottom: -10%; right: -30%; left: -30%; pointer-events: none; }
.fam-3d canvas { display: block; width: 100%; height: 100%; }
#acompanamiento { overflow-x: clip; }   /* el canvas se extiende hacia los lados: sin scroll lateral (clip no rompe el sticky) */
@media (max-width: 960px), (max-width: 1100px) and (orientation: portrait) {
  .fam-3d { left: -40%; right: -40%; top: -8%; bottom: -6%; }
}

/* Celular fijado mientras se arma (js/familia3d.js; solo con el celular 3D). El scroll se alarga y la
   pantalla del celular avanza con él: aunque se baje rápido, hay que recorrer ese tramo para pasar.
   · .is-pin-panel (dos columnas): la sección se alarga y todo el panel queda fijo a pantalla completa.
   · .is-pin-phone (una columna): solo el celular queda fijo mientras se recorre el tramo largo; después
     sigue el resto de la sección. */
.acomp.is-pin-panel { display: block; padding: 0; height: calc(100vh + 95vh); height: calc(100svh + 95svh); }
.acomp.is-pin-panel .acomp-panel {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  max-width: calc(74rem + 2 * var(--gutter));
  padding: 92px var(--gutter) 24px;
  grid-template-rows: auto auto auto auto;
  align-content: center;
}
.acomp.is-pin-panel .fam-pin { width: min(100%, 300px, calc((100svh - 170px) * 0.445)); }
.acomp.is-pin-phone .fam-pin { width: min(78%, 270px, calc((100svh - 150px) * 0.445)); }
.acomp.is-pin-phone .fam-pin::after { content: ""; display: block; height: 85vh; height: 85svh; }   /* el tramo largo (dentro del contenido: sticky no cuenta el padding) */
.acomp.is-pin-phone .fam-phone { position: sticky; top: var(--fam-top, 84px); }

/* ---------- Textos justificados ----------
   Todo el texto corrido del sitio va justificado; los títulos no. Tampoco lo que no es texto corrido:
   etiquetas y antetítulos, la frase de la portada, las frases de testimonio, los pies de las tarjetas de metas, avisos y notas,
   quién dice cada testimonio de familia, los datos de cada egresado, la pantalla
   del celular de Acompañamiento ni el pie de página. Con guiones automáticos (según el idioma de la
   página, html lang) para que no se abran huecos entre palabras en columnas angostas; solo en palabras
   largas. En los bloques centrados, la última línea queda centrada. */
/* En el teléfono (≤ 760 px) las columnas son angostas y el justificado abre huecos entre palabras:
   ahí el texto va alineado como su bloque (a la izquierda, o centrado donde el bloque lo está). */
@media (min-width: 761px) {
main :is(p, .tl-list li, .faq-a li):not(.quote *, .hero-tag, .label, .be-hybred, .dr-t, .acomp-k, .ad-kicker, .pq-kicker, .cm-kicker, .track-k, .story-name, .sd-name, .sd-soon, .tv-note, .pq-note, .cm-note, .af-status, .af-error, .fam-screen *, .sign-off *, .fam-name, .alum-body *, .perk p, .win-who, .win-date, .fam-cta p, .cm-access *, .cm-cta p, .cm-lead, .kh-kicker, .kh-note, .kh-mile *, .kh-learn-card *, .kh-seal *, .kh-hub *, .kh-compare-note, .kh-cta p, .kh-profile *, .kh-team-text),
.story-dialog .sd-quote {
  text-align: justify;
  text-justify: inter-word;
  -webkit-hyphens: auto;
  hyphens: auto;
  hyphenate-limit-chars: 8 4 3;
}
main :is(.section[data-side="center"], .program-head, .why) p:not(.testi *, .pcard *, .wk-on .wk-stage *) { text-align-last: center; }
}
@media (max-width: 960px), (max-width: 1100px) and (orientation: portrait) {
  main .hero .panel p { text-align-last: center; }
}

/* ---------- Hybred en números, textos del teléfono y botón de WhatsApp ---------- */
/* Hybred en números: sección corta (sin pantalla completa) cuando no se fija */
.section.cifras { min-height: 0; padding-block: clamp(96px, 14vh, 150px); }
.section.cifras .panel { max-width: 74rem; width: 100%; }
.cf-panel { gap: 14px; }
.cf-list { list-style: none; margin: 18px 0 0; padding: 0; width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cf-item { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px clamp(14px, 2vw, 28px); }
.cf-item + .cf-item { border-left: 1px solid var(--line); }
.cf-n { font-family: var(--font-display); font-size: clamp(3.2rem, 5.6vw, 5rem); font-weight: 700; line-height: 0.95; letter-spacing: var(--track-display); color: var(--celeste); white-space: nowrap; }
.cf-u { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg); }
.panel .cf-item p { margin: 6px 0 0; max-width: 16rem; font-size: 0.9rem; line-height: 1.5; color: var(--muted); }
@media (max-width: 760px) {
  .cf-list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 26px; margin-top: 8px; }
  .cf-item { padding: 0 10px; }
  .cf-item + .cf-item { border-left: 0; }
  .cf-item:nth-child(even) { border-left: 1px solid var(--line); }
  .cf-n { font-size: clamp(2.6rem, 12vw, 3.4rem); }
  .panel .cf-item p { font-size: 0.86rem; }
}
/* Teléfono: textos secundarios un poco más grandes */
@media (max-width: 760px) {
  .panel .acomp-group p { font-size: 0.94rem; }
  .profiles.is-scrolly .profiles-list p { font-size: 0.94rem; }
  .panel .tl-body p, .tl-body p { font-size: 0.93rem; }
  .pcard-d { font-size: 0.95rem; }
  /* el botón de WhatsApp, más pequeño y fuera del camino mientras se baja leyendo (js/sitio.js) */
  .wa-fab { width: 50px; height: 50px; }
  .wa-fab svg { width: 25px; height: 25px; }
}
.wa-fab { transition: transform var(--settle) var(--ease-out), bottom 300ms var(--ease-out), box-shadow 150ms ease, opacity 220ms ease; }
.wa-fab.is-away, .wa-fab.is-hero { opacity: 0; transform: translate3d(0, 14px, 0) scale(0.9); pointer-events: none; }
/* los datos de Hybred en números van centrados, sin justificar (textos cortos en columnas angostas) */
main .section.cifras .cf-item p { text-align: center; text-align-last: auto; -webkit-hyphens: manual; hyphens: manual; }
/* Hybred en números, interactiva (js/cifras3d.js): los datos se arman solos al llegar a la sección; .cf-3d: hay
   WebGL y arriba de cada dato se arma su figura de puntos (.cf-viz reserva el lugar; el canvas cubre todo el
   panel, detrás del texto). */
.cf-viz { display: none; }
.cf-3d-canvas { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.cf-3d-canvas canvas { display: block; width: 100%; height: 100%; }
.cf-panel { position: relative; }
.cf-panel > :not(.cf-3d-canvas) { position: relative; z-index: 1; }
.cifras.cf-3d .cf-viz { display: block; width: 100%; height: clamp(130px, 24vh, 240px); margin-bottom: 10px; }
.cifras.is-counting .cf-item { transition: opacity 500ms ease; }
.cifras.is-counting .cf-item:not(.is-on) { opacity: 0.32; }
.cifras.is-counting .cf-n { font-variant-numeric: tabular-nums; }
@media (max-width: 760px) {
  .cifras.cf-3d .cf-viz { height: clamp(84px, 14vh, 140px); margin-bottom: 6px; }
}
.motion-ready .section .panel > .cf-3d-canvas { opacity: 1; transform: none; transition: none; }   /* el canvas no entra con el revelado del texto */