/* Centro Educativo Simón Rodríguez · estilos compartidos por las tres páginas */
:root {
  --violet: #6138AF;
  --violet-deep: #4F2B9B;
  --violet-ink: #40257D;
  --violet-soft: #A58CE0;
  /* Amarillo de los botones con fondo de la portada: el del logo (#FFB001) oscurecido para que el texto blanco se lea */
  --yellow: #F5A001;
  --yellow-deep: #E79300;
  --tint: #EFE7FB;
  --bg: #FAF7FE;
  --bg-alt: #F3EDFC;
  --surface: #FFFFFF;
  --ink: #241B3A;
  --ink-soft: #55506A;
  --ink-mute: #6A6580;
  --line: rgba(64,37,125,0.14);
  --grad-violet: linear-gradient(100deg, #5732A6 0%, #6F46BF 100%);
  --shadow-card: 0 12px 32px -16px rgba(64,37,125,0.2);
  --shadow-pop: 0 20px 44px -18px rgba(64,37,125,0.3);
  /* Anillo punteado: el motivo de la portada, reutilizado donde falta una foto */
  --ring: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><circle cx='100' cy='100' r='98.5' fill='none' stroke='%23A58CE0' stroke-width='1.2' stroke-dasharray='7.2 5.178' stroke-linecap='round'/></svg>");
  --ring-white: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><circle cx='100' cy='100' r='98.5' fill='none' stroke='white' stroke-width='1.2' stroke-dasharray='7.2 5.178' stroke-linecap='round'/></svg>");
  --font: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 20px;
  --z-float: 40;
  --z-nav: 50;
  --z-skip: 100;
}
* { box-sizing: border-box; }
html { scroll-padding-top: 96px; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  caret-color: var(--violet);
}
::selection { background: #DBCEF3; color: var(--ink); }
h1, h2, h3 {
  font-family: var(--font);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.18;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}
p { margin: 0; text-wrap: pretty; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
a { color: inherit; text-decoration: none; }
svg { display: block; }
img { max-width: 100%; }
[hidden] { display: none !important; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: absolute;
  left: 16px;
  top: 16px;
  z-index: var(--z-skip);
  padding: 10px 16px;
  background: var(--violet);
  color: #fff;
  border-radius: var(--radius-sm);
  transform: translateY(-160%);
  transition: transform .18s ease;
}
.skip-link:focus { transform: translateY(0); }
.shell { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.mono { font-size: 13px; font-weight: 500; letter-spacing: 0.01em; color: var(--ink-mute); }
/* Palabra destacada del titular */
.hl { color: var(--violet); }

/* Fotos */
.photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  min-height: 0;
}
.photo-missing .photo-img,
.photo-missing .retrato-img { display: none; }
.colegio-photo.photo-missing::after,
.method-photo.photo-missing::after {
  content: '';
  display: block;
  flex: 1;
  min-height: 220px;
  background:
    var(--ring) center / 176px no-repeat,
    radial-gradient(circle at center, #D8CBF2 0, #D8CBF2 68px, transparent 69px);
}

/* Botones */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 22px;
  border-radius: var(--radius-sm);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.2;
  white-space: nowrap;
  transition: transform .18s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(0.98); }
.btn svg { flex-shrink: 0; }
.btn-sm { padding: 10px 18px; font-size: 14px; }
.btn-lg { padding: 15px 26px; font-size: 16px; }
.btn-primary { background: var(--violet); color: #fff; box-shadow: 0 8px 18px -10px rgba(97,56,175,0.7); }
.btn-primary:hover { background: var(--violet-deep); }
.btn-light { background: #fff; color: var(--violet-deep); }
.btn-light:hover { background: var(--tint); }
.btn-ghost { background: transparent; color: var(--violet); box-shadow: inset 0 0 0 1.5px var(--violet-soft); }
.btn-ghost:hover { background: var(--tint); box-shadow: inset 0 0 0 1.5px var(--violet); }
.btn-ghost.on-violet { color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.7); }
.btn-ghost.on-violet:hover { background: #fff; color: var(--violet-deep); box-shadow: none; }
.arrow-ico { display: inline-block; width: 15px; height: 15px; transition: transform .2s; }
.btn:hover .arrow-ico { transform: translate(2px, -2px); }
.wa-float {
  position: fixed;
  right: 18px;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  width: 58px;
  height: 58px;
  border-radius: 999px;
  background: #25D366;
  color: #fff;
  box-shadow: 0 14px 26px -14px rgba(36,27,58,0.5);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: var(--z-float);
  opacity: 0;
  transform: translateY(18px) scale(0.92);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.wa-float svg { width: 28px; height: 28px; }
.wa-float.is-visible { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.btn:focus-visible,
.tab:focus-visible,
.chip:focus-visible,
.faq-question:focus-visible,
.tst-btn:focus-visible,
.nav-toggle:focus-visible,
.wa-float:focus-visible,
a:focus-visible {
  outline: 2px solid var(--violet);
  outline-offset: 3px;
}
.cta-final > .cta-final-grid > div:first-child :focus-visible { outline-color: #fff; }

section { padding: 96px 0; position: relative; }
.section-tight { padding-top: 0; }
.section-alt,
.steps-section { background: var(--bg-alt); --section-bg: var(--bg-alt); }
/* Dos secciones claras seguidas no duplican el espacio entre ellas */
section:not(.section-alt):not(.steps-section):not(.hero) + section:not(.section-alt):not(.steps-section) { padding-top: 0; }
.eyebrow { margin: 0; font-size: 14px; font-weight: 500; line-height: 1.5; color: var(--violet); }
.badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--tint);
  color: var(--violet-ink);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.5;
}
.choose-ico,
.why-card-icon,
.ficha-ico,
.cc-ico {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--tint);
  color: var(--violet);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

/* Encabezado y menú */
nav.top {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  background: rgba(250,247,254,0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s, background .2s;
}
nav.top.scrolled { border-bottom-color: var(--line); }
nav.top .row { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 80px; }
.logo { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 3px; flex-shrink: 0; }
.logo img { display: block; height: 42px; width: auto; }
.logo small {
  font-size: 8.5px;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-mute);
  line-height: 1;
  padding-left: 2px;
}
.nav-links { display: flex; gap: 32px; font-size: 15px; }
.nav-links a { padding: 6px 0; color: var(--ink); transition: color .15s; white-space: nowrap; }
.nav-links a:hover { color: var(--violet); }
.nav-links a[aria-current="page"] { color: var(--violet); font-weight: 500; }
.nav-actions { display: flex; align-items: center; gap: 10px; }
.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  place-items: center;
  color: var(--ink);
  flex-shrink: 0;
}
.nav-toggle svg { width: 22px; height: 22px; }
.nav-toggle .ico-close { display: none; }
nav.top.nav-open { background: var(--surface); }
nav.top.nav-open .nav-toggle .ico-open { display: none; }
nav.top.nav-open .nav-toggle .ico-close { display: block; }
@media (max-width: 1024px) {
  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    padding: 4px 24px 12px;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 24px 40px -28px rgba(64,37,125,0.4);
  }
  .nav-links a { padding: 15px 0; font-size: 16px; border-bottom: 1px solid var(--line); }
  .nav-links a:last-child { border-bottom: none; }
  nav.top.nav-open .nav-links { display: flex; }
  .js .nav-toggle { display: grid; }
}

/* Portada */
.hero { padding: 56px 0 80px; overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1.04fr 0.96fr; gap: 32px; align-items: center; }
.hero h1 { margin-top: 14px; font-size: clamp(32px, 3.2vw, 44px); line-height: 1.3; }
/* Resaltado con fondo: el <em> lleva una fuente menor para que su caja no tape la línea vecina y el <span> devuelve el tamaño al texto */
.hero h1 em {
  font-style: normal;
  font-size: 0.72em;
  color: #fff;
  background: var(--violet);
  padding: 0.09em 0.3em;
  border-radius: 8px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.hero h1 em span { font-size: calc(100% / 0.72); }
.hero-sub { margin-top: 22px; font-size: 16px; color: var(--ink-soft); max-width: 58ch; line-height: 1.75; }
.hero-sub b { color: var(--ink); font-weight: 500; }
/* Textos con versión corta para celular: .sub-larga se ve en escritorio y .sub-corta hasta 720px */
.sub-corta { display: none; }
.hero-ctas { margin-top: 32px; display: flex; gap: 12px; flex-wrap: wrap; }
.hero-ctas .btn { padding-inline: 18px; }
.hero-ctas .btn-primary { background: var(--yellow); color: #fff; font-weight: 600; box-shadow: 0 8px 18px -10px rgba(202,128,0,0.8); }
.hero-ctas .btn-primary:hover { background: var(--yellow-deep); }
.hero-link { display: inline-flex; align-items: center; gap: 12px; margin-top: 22px; font-weight: 500; font-size: 15px; color: var(--ink); text-decoration: underline; text-decoration-color: var(--violet-soft); text-decoration-thickness: 1.5px; text-underline-offset: 5px; transition: color .15s; }
.hero-link svg { width: 36px; height: 36px; padding: 10px; border-radius: 50%; background: var(--tint); color: var(--violet); }
.hero-link:hover { color: var(--violet); }
.hero-meta { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--line); display: flex; gap: 44px; align-items: flex-start; flex-wrap: wrap; }
.hero-link + .hero-meta { margin-top: 30px; }
.hero-meta-stat { text-align: center; }
.hero-meta-stat .num {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1;
  min-height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-variant-numeric: tabular-nums;
}
.hero-meta-stat .num svg { width: 28px; height: 28px; color: var(--violet); }
.hero-meta-stat .lbl { font-size: 13.5px; color: var(--ink-mute); margin-top: 8px; line-height: 1.35; }
.hero-visual { position: relative; width: min(100%, 560px); justify-self: center; }
/* Inicio: el bloque sube y ocupa el ancho de su columna (los alumnos ya sobresalen del círculo) */
@media (min-width: 1025px) { .hero-home .hero-visual { top: -40px; width: 100%; } }
.hero-photo {
  position: relative;
  margin: 6%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: linear-gradient(160deg, #6F46BF 0%, #5732A6 100%);
}
.hero-photo::before {
  content: '';
  position: absolute;
  inset: -6.8%;
  background: var(--ring) center / contain no-repeat;
  pointer-events: none;
}
.hero-photo .photo-img { position: absolute; inset: 0; border-radius: 50%; }
/* Foto recortada (fondo transparente) dentro del círculo: deja aire sobre la cabeza */
.hero-photo .photo-recorte { padding-top: 8%; object-fit: contain; object-position: center bottom; }
/* Foto recortada cuadrada que sobresale del círculo: --k es su ancho respecto del círculo y --sube lo que asoma por
   arriba. La máscara deja ver la franja superior completa (las cabezas) y, de ahí hacia abajo, solo lo que cae dentro del círculo. */
.hero-photo-salida .photo-img {
  --k: 1.15;
  --sube: 0.093;
  inset: auto;
  top: calc(var(--sube) * -100%);
  left: calc((1 - var(--k)) * 50%);
  width: calc(var(--k) * 100%);
  max-width: none;
  height: auto;
  aspect-ratio: 1;
  border-radius: 0;
  --mask: linear-gradient(#000 0 0) top / 100% 30.5% no-repeat,
    radial-gradient(calc(50% / var(--k)) calc(50% / var(--k)) at 50% calc((var(--sube) + 0.5) / var(--k) * 100%), #000 calc(100% - 0.5px), transparent calc(100% + 0.5px));
  -webkit-mask: var(--mask);
  mask: var(--mask);
}
.hero-photo-salida:not(.photo-missing) .poster-type { display: none; }
.poster-type {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-bottom: 6%;
  text-align: center;
  color: #fff;
}
.poster-type span { font-size: clamp(19px, 2vw, 26px); font-weight: 500; line-height: 1.2; }
.poster-type strong { font-size: clamp(64px, 7.2vw, 100px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.05; }
.poster-type small { margin-top: 4px; max-width: 76%; font-size: 14px; line-height: 1.4; color: rgba(255,255,255,0.92); }
/* Sellos sobre la imagen */
.ficha { margin: 0; padding: 0; list-style: none; }
.ficha li {
  position: absolute;
  display: grid;
  grid-template-columns: 36px auto;
  column-gap: 12px;
  align-items: center;
  padding: 11px 16px 11px 11px;
  background: var(--surface);
  border-radius: 12px;
  box-shadow: var(--shadow-pop);
  white-space: nowrap;
}
.ficha li:nth-child(1) { top: 12%; left: -3%; }
.ficha li:nth-child(2) { top: 69%; right: -3%; }
.ficha li:nth-child(3) { bottom: 3%; left: 1%; }
/* Portadas: el primer sello va arriba a la derecha y queda detrás de la foto; los otros dos, delante */
.hero .hero-visual { isolation: isolate; }
.hero .hero-photo-salida .photo-img { z-index: 1; }
.hero .ficha li:nth-child(n+2) { z-index: 2; }
/* Inicio: el borde inferior del sello se ancla al tope del pelo del alumno más bajo (92.74 % desde abajo) para que
   la cabeza solo le pise 7px del margen y el texto se lea entero */
.hero-home .ficha li:nth-child(1) { top: auto; bottom: calc(92.74% - 7px); left: auto; right: -3%; }
/* Colegios y universitario: el borde izquierdo del sello se ancla al costado del pelo (63.5 % y 60.1 %) y queda
   separado de él (12px y 28px). El sello (205px y 200px de ancho) no sale más de 26px del bloque para no cortarse
   en pantallas angostas */
.hero-colegios .ficha li:nth-child(1) { top: 11%; left: min(63.5% + 12px, 100% - 179px); }
.hero-universitario .ficha li:nth-child(1) { top: 11%; left: min(60.1% + 28px, 100% - 174px); }
.ficha-ico { grid-row: span 2; width: 36px; height: 36px; }
.ficha-ico svg { width: 17px; height: 17px; }
.ficha-lbl { font-size: 12px; color: var(--ink-mute); line-height: 1.3; align-self: end; }
.ficha strong { font-size: 13.5px; font-weight: 600; color: var(--ink); line-height: 1.3; align-self: start; }

/* Retrato: persona recortada sobre un panel violeta, con la cabeza por encima del panel */
.retrato { display: flow-root; width: min(100%, 420px); margin: 0; justify-self: center; }
.retrato-marco { position: relative; margin-top: 17%; }
.retrato-panel {
  position: relative;
  aspect-ratio: 1 / 1.04;
  border-radius: 32px;
  background: linear-gradient(160deg, #6F46BF 0%, #5732A6 100%);
  /* Recorta la foto a los lados y abajo, y la deja salir por arriba */
  clip-path: inset(-30% 0 0 0 round 0 0 32px 32px);
}
.retrato-img { position: absolute; left: 50%; bottom: 0; height: 117%; width: auto; max-width: none; transform: translateX(-50%); }
.retrato-ancho .retrato-marco { margin-top: 10%; }
.retrato-ancho .retrato-panel { aspect-ratio: 1 / 0.8; }
.retrato-ancho .retrato-img { height: 112%; }
.retrato-ancho .retrato-sello { bottom: -16px; }
/* El aro del color de fondo de la sección simula la muesca del panel */
.retrato-ico {
  position: absolute;
  top: -12px;
  left: -12px;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--violet);
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 0 0 10px var(--section-bg, var(--bg));
}
.retrato-sello {
  position: absolute;
  left: -20px;
  bottom: 26px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 18px 7px 7px;
  background: var(--surface);
  border-radius: 999px;
  box-shadow: var(--shadow-pop);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
  white-space: nowrap;
}
.retrato-sello .ficha-ico { width: 32px; height: 32px; }
.retrato-sello .ficha-ico svg { width: 15px; height: 15px; }
.retrato-mini {
  position: absolute;
  right: -30px;
  top: 34%;
  width: 36%;
  height: auto;
  aspect-ratio: 1 / 1.08;
  object-fit: cover;
  border-radius: 16px;
  border: 5px solid var(--surface);
  box-shadow: var(--shadow-pop);
  background: var(--tint);
}
/* Bloque de «Por qué eligen»: la foto de la clase en grande, con el anillo punteado detrás, el círculo del birrete y un sello blanco */
.retrato-lamina { width: min(100%, 460px); }
.retrato-lamina .retrato-marco { margin-top: 0; isolation: isolate; }
.retrato-lamina .retrato-marco::before { content: ''; position: absolute; z-index: -1; top: -10%; right: -10%; width: 58%; aspect-ratio: 1; background: var(--ring) center / contain no-repeat; pointer-events: none; }
.retrato-foto { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1.04; object-fit: cover; border-radius: 32px; background: var(--tint); box-shadow: var(--shadow-card); }
/* Texto y retrato lado a lado */
.split { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 72px; align-items: center; }
.split-media-first { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
/* Con el bloque de imagen de la portada (círculo, anillo y sellos) */
.split-portada { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; }
.split-media-first > .retrato { order: -1; }
.split .section-title { margin-bottom: 40px; }
.split .lead-quote { margin: -18px 0 40px; }

/* Cinta de ingresos */
.ticker { background: var(--grad-violet); color: #fff; padding: 26px 0; }
.ticker ul { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 32px; margin: 0; padding: 0; list-style: none; }
.ticker li { font-weight: 600; font-size: 19px; letter-spacing: -0.01em; line-height: 1.4; white-space: nowrap; }
/* La copia solo hace falta cuando la cinta se mueve */
.ticker .ticker-dup { display: none; }
/* Nombres repetidos dentro de una lista corta para llenar la cinta: también solo cuando se mueve */
.ticker-rep { display: none; }

/* Encabezados de sección */
.section-head { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 64px; align-items: end; margin-bottom: 48px; }
.section-head.single { grid-template-columns: 1fr; }
.section-title { font-size: clamp(27px, 2.9vw, 40px); line-height: 1.2; max-width: 22ch; }
.section-head.single .section-title { max-width: 26ch; }
.section-intro { font-size: 16px; color: var(--ink-soft); line-height: 1.75; max-width: 54ch; }
.section-head .btn { margin-top: 24px; }

/* Tarjetas base */
.choose-card,
.colegio-panel,
.tst {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}

/* Home · Elegí tu ingreso */
/* El margen de arriba deja lugar a las cabezas que salen de la franja violeta */
.choose-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 92px; }
/* La foto sobresale unos píxeles del borde derecho de la tarjeta: que no genere scroll horizontal */
#ingresos { overflow: hidden; }
.choose-card { display: flex; flex-direction: column; transition: transform .25s ease, box-shadow .25s ease; }
.choose-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-pop); }
/* Franja violeta con el título y el alumno recortado, que asoma por arriba de la tarjeta */
.choose-top {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  min-height: min(244px, 22vw - 20px);
  padding: 30px 46% 30px 34px;
  border-radius: var(--radius) var(--radius) 0 0;
  background: linear-gradient(160deg, #6F46BF 0%, #5732A6 100%);
  color: #fff;
  /* Recorta la foto a los lados y abajo, y la deja salir por arriba */
  clip-path: inset(-50% 0 0 0);
}
.choose-card:nth-child(2) .choose-top { background: linear-gradient(160deg, #532EA3 0%, #3B1F79 100%); }
.choose-img { position: absolute; right: -2.5%; bottom: 0; width: min(53.5%, 296px); height: auto; max-width: none; pointer-events: none; transform-origin: 50% 100%; transition: transform .35s ease; }
.choose-card:hover .choose-img { transform: scale(1.03); }
.choose-ico { width: 46px; height: 46px; margin-bottom: 18px; }
.choose-top .choose-ico { background: rgba(255,255,255,0.18); color: #fff; }
.choose-card h3 { font-size: clamp(21px, 1.8vw, 24px); line-height: 1.25; color: #fff; }
.choose-para { margin-top: 8px; font-size: 14px; line-height: 1.5; color: rgba(255,255,255,0.88); }
.choose-body { flex: 1; display: flex; flex-direction: column; align-items: flex-start; padding: 28px 34px 34px; }
.choose-body .chip-row { margin-bottom: 28px; }
.choose-body .chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px 7px 14px; }
.choose-body .chip svg { width: 12px; height: 12px; opacity: 0.6; }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.chip { padding: 6px 13px; border-radius: 8px; background: var(--tint); font-size: 13.5px; font-weight: 500; color: var(--violet-ink); transition: background .18s, color .18s; }
.chip:hover { background: var(--violet); color: #fff; }
.choose-body p { color: var(--ink-soft); font-size: 15.5px; line-height: 1.7; margin-bottom: 20px; max-width: 48ch; }
.choose-card .btn { margin-top: auto; }

/* Colegios · selector de colegio y ficha de cada curso */
.tabs-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  padding: 6px;
  margin-bottom: 20px;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}
.tab {
  padding: 15px 16px;
  border-radius: 10px;
  color: var(--ink-soft);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.2;
  text-align: center;
  transition: background .18s, color .18s, box-shadow .18s, transform .18s;
}
.tab:hover { background: var(--tint); color: var(--violet); }
.tab:active { transform: scale(0.98); }
.tab.active { background: var(--violet); color: #fff; box-shadow: 0 8px 18px -10px rgba(97,56,175,0.7); }
.colegio-panel { display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr); overflow: hidden; }
.colegio-panel + .colegio-panel { margin-top: 20px; }
/* Las cuatro fichas ocupan la misma celda: la sección mide siempre lo que la ficha más alta y no salta al cambiar de colegio */
.js .colegio-stack { display: grid; }
/* Al llegar por ancla (#monserrat, #villada…) el selector queda a la vista: el margen suma su alto a lo que html ya reserva para el encabezado */
.js .colegio-panel { grid-area: 1 / 1; margin-top: 0; scroll-margin-top: 88px; }
.js .colegio-panel:not(.is-active) { visibility: hidden; }
html:not(.js) .tabs-row,
html:not(.js) .colegio-nav { display: none; }
.colegio-left { padding: 48px 44px 48px 48px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.colegio-left h3 { font-size: clamp(22px, 2.3vw, 30px); margin-bottom: 14px; max-width: 20ch; }
.colegio-left .badge { margin-bottom: 16px; }
.colegio-left > p { color: var(--ink-soft); font-size: 15.5px; line-height: 1.7; max-width: 52ch; }
.focus-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; margin: 26px 0 0; padding: 0; list-style: none; }
.focus-item { display: flex; align-items: center; gap: 10px; padding: 13px 12px; border-radius: 12px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); font-size: 14.5px; line-height: 1.4; color: var(--ink); }
.focus-item > span:last-child { text-wrap: balance; }
.focus-check {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--tint);
  color: var(--violet);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.focus-check { background: var(--violet); color: #fff; }
.colegio-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 28px; }
.colegio-nota { font-size: 13.5px; line-height: 1.4; color: var(--ink-mute); }
/* Foto a sangre en la mitad derecha, limpia; encima solo van piezas blancas flotantes como los sellos de la portada */
.colegio-right { position: relative; min-height: 320px; background: var(--tint); isolation: isolate; }
.colegio-photo { position: absolute; inset: 0; display: flex; flex-direction: column; }
.colegio-sello,
.colegio-right-top > div:first-child { background: var(--surface); border-radius: 12px; box-shadow: var(--shadow-pop); }
.colegio-sello {
  position: absolute;
  z-index: 1;
  top: 24px;
  left: 24px;
  max-width: calc(100% - 48px);
  display: grid;
  grid-template-columns: 36px auto;
  column-gap: 12px;
  align-items: center;
  padding: 11px 16px 11px 11px;
}
.colegio-sello strong { font-size: 13.5px; font-weight: 600; color: var(--ink); line-height: 1.3; align-self: start; }
/* Abajo: sello con el nombre del colegio y flechas para pasar al anterior o al siguiente */
.colegio-right-top { position: absolute; z-index: 1; left: 24px; right: 24px; bottom: 24px; display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; }
.colegio-right-top > div:first-child { padding: 10px 18px 11px 16px; }
.colegio-right-top .mono { font-size: 12px; line-height: 1.3; }
.colegio-right-top .name { margin-top: 1px; font-weight: 600; font-size: 19px; letter-spacing: -0.01em; color: var(--ink); line-height: 1.25; }
.colegio-nav { display: flex; gap: 8px; flex-shrink: 0; }
.colegio-nav .tst-btn { background: var(--surface); box-shadow: var(--shadow-pop); }
.colegio-nav .tst-btn:hover { background: var(--violet); }

/* Por qué elegirnos */
.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px 40px; }
@media (min-width: 1101px) { .why-grid.cols-4 { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 1100px) { .why-grid.cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 1100px) {
  .choose-top { padding-right: 48%; }
  .choose-top .choose-ico { display: none; }
}
.why-grid.cols-2 { grid-template-columns: repeat(2, 1fr); gap: 40px 36px; }
.why-card { display: flex; flex-direction: column; }
.why-card-copy { display: flex; flex-direction: column; }
.why-card-head { display: flex; flex-direction: column-reverse; align-items: flex-start; gap: 18px; margin-bottom: 8px; }
.why-card h3 { font-size: 18px; letter-spacing: -0.01em; line-height: 1.3; }
.why-card p { color: var(--ink-soft); font-size: 15px; line-height: 1.7; max-width: 40ch; }
/* Home · razones en tarjetas: la primera destacada en violeta y la segunda columna un poco más abajo */
.why-cards.cols-2 { gap: 20px; }
.why-cards .why-card { padding: 24px 24px 28px; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-card); transition: transform .25s ease, box-shadow .25s ease; }
.why-cards .why-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-pop); }
.why-cards .why-card-head { gap: 20px; margin-bottom: 10px; }
.why-cards .why-card-destacada { background: linear-gradient(160deg, #6F46BF 0%, #5732A6 100%); }
.why-cards .why-card-destacada h3 { color: #fff; }
.why-cards .why-card-destacada p { color: rgba(255,255,255,0.9); }
.why-cards .why-card-destacada .why-card-icon { background: rgba(255,255,255,0.18); color: #fff; }
@media (min-width: 721px) {
  .why-cards.cols-2 { padding-bottom: 28px; }
  .why-cards .why-card:nth-child(even) { margin-top: 28px; margin-bottom: -28px; }
}
@media (max-width: 720px) {
  .why-grid.why-cards.cols-2 { gap: 14px; }
  .why-cards .why-card { padding: 20px 20px 22px; }
  .why-cards .why-card-head { gap: 14px; }
}
.lead-quote { margin: 0; font-size: 19px; font-weight: 500; line-height: 1.5; color: var(--ink); max-width: 34ch; }

/* Recorrido */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; }
@media (min-width: 861px) { .steps.cols-3 { grid-template-columns: repeat(3, 1fr); } }
.step-num {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--violet-soft);
  color: var(--violet);
  font-weight: 600;
  font-size: 14px;
  display: grid;
  place-items: center;
  margin-bottom: 20px;
  transition: background .2s, color .2s, box-shadow .2s;
  font-variant-numeric: tabular-nums;
}
.step.active .step-num { background: var(--violet); color: #fff; box-shadow: none; }
.step h3 { font-size: 18px; letter-spacing: -0.01em; line-height: 1.3; margin-bottom: 8px; }
.step p { font-size: 15px; color: var(--ink-soft); line-height: 1.7; max-width: 40ch; }
/* Recorrido en columna, al lado de un retrato */
.steps.steps-col { grid-template-columns: 1fr; gap: 26px; }
.steps-col .step { display: grid; grid-template-columns: 40px 1fr; column-gap: 18px; }
.steps-col .step-num { grid-row: span 2; margin-bottom: 0; }
.steps-col .step h3 { align-self: center; margin-bottom: 4px; }
.steps-col .step p { max-width: 48ch; }
/* Recorrido en tarjetas, con el formato de «¿Para qué ingreso te preparás?» del Home: franja violeta con ícono, número
   y título, y cuerpo blanco. El violeta se va haciendo más profundo de la primera etapa a la última */
.steps-ruta { margin: 0; padding: 0; list-style: none; gap: 20px; }
.steps-ruta .step { position: relative; display: flex; flex-direction: column; }
.step-card { flex: 1; display: flex; flex-direction: column; overflow: hidden; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-card); transition: transform .25s ease, box-shadow .25s ease; }
.step-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-pop); }
.step-top { position: relative; display: flex; flex-direction: column; align-items: flex-start; min-height: 176px; padding: 24px 24px 22px; background: linear-gradient(160deg, #6F46BF 0%, #5732A6 100%); color: #fff; }
.step:nth-child(2) .step-top { background: linear-gradient(160deg, #663EB6 0%, #4E2C9A 100%); }
.step:nth-child(3) .step-top { background: linear-gradient(160deg, #5C36AC 0%, #45258A 100%); }
.step:nth-child(4) .step-top { background: linear-gradient(160deg, #532EA3 0%, #3B1F79 100%); }
.step-big { position: absolute; top: 12px; right: 20px; font-size: 68px; font-weight: 600; line-height: 1; letter-spacing: -0.03em; color: rgba(255,255,255,0.2); font-variant-numeric: tabular-nums; pointer-events: none; }
.step-ico { width: 46px; height: 46px; margin-bottom: auto; border-radius: 50%; background: rgba(255,255,255,0.18); color: #fff; display: grid; place-items: center; }
.steps-ruta .step h3 { align-self: auto; margin: 18px 0 0; font-size: 19px; line-height: 1.3; color: #fff; }
.step-body { flex: 1; padding: 22px 24px 26px; }
.steps-ruta .step p { max-width: none; }
/* Flecha entre una tarjeta y la siguiente, a la altura de la franja */
.steps-ruta .step:not(:last-child)::after {
  content: '';
  position: absolute;
  z-index: 1;
  top: 73px;
  right: -25px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--surface) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236138AF' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M9 6l6 6-6 6'/></svg>") center / 14px no-repeat;
  box-shadow: 0 4px 12px -4px rgba(64,37,125,0.45);
}
@media (max-width: 960px) {
  .steps.steps-ruta { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .steps-ruta .step:not(:last-child)::after { display: none; }
  .step-top { min-height: 164px; }
}
/* En celular la franja pasa a una fila: ícono y título juntos, número a la derecha */
@media (max-width: 560px) {
  .steps.steps-ruta { grid-template-columns: 1fr; gap: 14px; }
  .step-top { flex-direction: row; align-items: center; gap: 14px; min-height: 0; padding: 18px 76px 18px 20px; }
  .step-ico { flex: none; width: 42px; height: 42px; margin-bottom: 0; }
  .steps-ruta .step h3 { margin: 0; font-size: 18px; }
  .step-big { top: 50%; right: 18px; font-size: 44px; transform: translateY(-50%); }
  .step-body { padding: 18px 20px 20px; }
}
.pull-quote {
  margin: 56px 0 0;
  padding-top: 36px;
  border-top: 1px solid var(--line);
  font-weight: 500;
  font-size: clamp(20px, 2vw, 26px);
  letter-spacing: -0.01em;
  line-height: 1.4;
  color: var(--ink);
  max-width: 32em;
}
.split .pull-quote { margin-top: 40px; padding-top: 30px; font-size: clamp(19px, 1.7vw, 22px); }

/* Metodología: lámina con la foto arriba y la frase en una franja violeta debajo; al lado, el texto y los seis ejes en tarjetas */
.method { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: 64px; align-items: stretch; }
.method-visual { display: flex; flex-direction: column; margin: 0; border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); box-shadow: var(--shadow-card); }
.method-photo { position: relative; flex: 1; min-height: 340px; display: flex; flex-direction: column; background: var(--tint); }
/* Foto cuadrada: el encuadre baja un poco para que entren los brazos apoyados en la mesa sin que el sello toque las cabezas */
.method-photo .photo-img { position: absolute; inset: 0; object-position: 50% 57%; }
.method-quote { position: relative; margin: 0; padding: 40px 34px 32px; background: linear-gradient(160deg, #6F46BF 0%, #5732A6 100%); color: #fff; }
.method-quote p { font-size: 20px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.45; max-width: 24em; }
/* Las comillas van a caballo entre la foto y la franja */
.method-quote-ico { position: absolute; top: -26px; left: 34px; width: 52px; height: 52px; border-radius: 50%; background: var(--surface); color: var(--violet); display: grid; place-items: center; box-shadow: var(--shadow-pop); }
.method-copy { display: flex; flex-direction: column; justify-content: center; }
.method-copy .section-title { margin-bottom: 22px; }
.method-copy p { font-size: 16px; color: var(--ink-soft); line-height: 1.75; margin-bottom: 14px; max-width: 56ch; }
.method-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 12px; margin: 18px 0 0; padding: 0; list-style: none; }
.method-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 18px 16px 20px; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-card); font-size: 14.5px; font-weight: 500; line-height: 1.35; color: var(--ink); text-wrap: balance; transition: transform .25s ease, box-shadow .25s ease; }
.method-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-pop); }
.method-tile-ico { width: 40px; height: 40px; border-radius: 50%; background: var(--tint); color: var(--violet); display: grid; place-items: center; flex-shrink: 0; transition: background .2s, color .2s; }
.method-tile:hover .method-tile-ico { background: var(--violet); color: #fff; }
/* Con la columna angosta, dos tarjetas por fila */
@media (max-width: 1100px) { .method-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Universitario · ficha de cada ingreso: reutiliza el selector y la ficha de colegios */
.tabs-row.tabs-3 { grid-template-columns: repeat(3, 1fr); }
.colegio-left > .curso-para { color: var(--ink); font-weight: 500; }
.curso-lbl { margin: 20px 0 6px; font-size: 14px; font-weight: 600; line-height: 1.4; letter-spacing: 0; color: var(--violet); }
.curso-lbl + .focus-list { margin-top: 8px; }
/* Foto cuadrada con las personas en la mitad de abajo: cuando el recuadro es apaisado se baja el encuadre para que entren las manos */
.curso-foto .photo-img { object-position: 50% 48%; }
/* En Ciencias Económicas el profesor está cerca del borde derecho: se corre el encuadre para que no quede pegado */
#ciencias-economicas .photo-img { object-position: 60% 48%; }
/* En una columna las fichas tienen largos distintos: cada una mide lo suyo en lugar de igualarse a la más alta */
@media (max-width: 860px) { .js .stack-libre .colegio-panel:not(.is-active) { display: none; } }

/* Trayectoria: el «+20» va en un círculo con el anillo punteado de la portada; al lado, el texto y las otras tres cifras */
.trust-band { background: var(--bg-alt); border-radius: var(--radius-lg); padding: 56px; }
.trust-grid { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 76px; align-items: center; }
.trust-medal {
  position: relative;
  width: 270px;
  aspect-ratio: 1;
  margin: 19px;
  border-radius: 50%;
  background: linear-gradient(160deg, #6F46BF 0%, #5732A6 100%);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.trust-medal::before { content: ''; position: absolute; inset: -6.8%; background: var(--ring) center / contain no-repeat; pointer-events: none; }
.trust-medal .n { font-size: 84px; font-weight: 600; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.trust-medal .l { margin-top: 10px; max-width: 12em; font-size: 15px; font-weight: 500; line-height: 1.4; color: rgba(255,255,255,0.94); }
.trust-copy h2 { font-size: clamp(26px, 2.7vw, 36px); line-height: 1.22; max-width: 30ch; }
.trust-copy p { color: var(--ink-soft); margin-top: 16px; font-size: 16px; line-height: 1.75; max-width: 58ch; }
.trust-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 30px 0 0; padding: 0; list-style: none; }
.ts { position: relative; background: var(--surface); border-radius: 12px; padding: 20px 20px 22px; box-shadow: var(--shadow-card); }
.ts .n { font-size: 32px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; color: var(--violet); font-variant-numeric: tabular-nums; }
.ts .l { font-size: 13.5px; margin-top: 8px; color: var(--ink-soft); line-height: 1.4; }
.ts-ico { position: absolute; top: 16px; right: 16px; width: 34px; height: 34px; border-radius: 50%; background: var(--tint); color: var(--violet); display: grid; place-items: center; }

/* Testimonios */
.tst-row { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 4px; padding: 6px 4px 32px; margin: 0 -4px; scrollbar-width: thin; scrollbar-color: var(--violet-soft) transparent; }
.tst-row::-webkit-scrollbar { height: 6px; }
.tst-row::-webkit-scrollbar-thumb { background: var(--violet-soft); border-radius: 3px; }
.tst { flex: 0 0 calc(33.333% - 14px); min-width: 320px; padding: 28px; margin: 0; scroll-snap-align: start; display: flex; flex-direction: column; }
.tst-quote-ico { width: 40px; height: 40px; margin-bottom: 18px; border-radius: 50%; background: var(--tint); color: var(--violet); display: grid; place-items: center; flex-shrink: 0; }
.tst blockquote { margin: 0 0 22px; flex: 1; }
.tst p { font-size: 15.5px; color: var(--ink-soft); line-height: 1.75; }
.tst p b { font-weight: 500; color: var(--ink); }
.tst-who { display: flex; align-items: center; gap: 12px; padding-top: 18px; border-top: 1px solid var(--line); }
.tst-av { width: 42px; height: 42px; border-radius: 50%; background: var(--tint); color: var(--violet-ink); display: grid; place-items: center; font-weight: 600; font-size: 16px; }
.tst-who .tw-name { font-size: 15px; font-weight: 600; color: var(--ink); line-height: 1.3; }
.tst-who .tw-sub { font-size: 13px; color: var(--ink-mute); }
.tst-controls { display: flex; gap: 8px; justify-content: flex-end; margin-top: 4px; }
.tst-btn { width: 44px; height: 44px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--line); display: grid; place-items: center; color: var(--violet); transition: background .18s, color .18s, transform .18s; }
.tst-btn:hover { background: var(--violet); color: #fff; box-shadow: none; }
.tst-btn:active { transform: scale(0.94); }
/* Testimonio destacado: tarjeta violeta (en escritorio suma el anillo punteado de adorno) */
.tst-destacado { position: relative; overflow: hidden; background: linear-gradient(160deg, #6F46BF 0%, #5732A6 100%); }
.tst-destacado .tst-quote-ico { background: var(--surface); }
.tst-destacado p { color: rgba(255,255,255,0.92); }
.tst-destacado p b { color: #fff; font-weight: 600; }
.tst-destacado .tst-who { position: relative; z-index: 1; border-top-color: rgba(255,255,255,0.28); }
.tst-destacado .tst-av { background: rgba(255,255,255,0.18); color: #fff; }
.tst-destacado .tw-name { color: #fff; }
.tst-destacado .tw-sub { color: rgba(255,255,255,0.88); }
/* En escritorio los cuatro testimonios se ven a la vez: el destacado a la izquierda y los otros tres apilados, con
   la cita a un lado y la familia al otro. Con menos ancho vuelven a la fila deslizable */
@media (min-width: 1025px) {
  .tst-mosaico { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 16px; overflow: visible; padding: 0; margin: 0; }
  .tst-mosaico .tst { min-width: 0; }
  .tst-mosaico + .tst-controls { display: none; }
  .tst-mosaico .tst-destacado { grid-row: 1 / span 3; padding: 36px 36px 32px; }
  .tst-mosaico .tst-destacado::after { content: ''; position: absolute; right: -96px; bottom: -120px; width: 280px; height: 280px; background: var(--ring-white) center / contain no-repeat; opacity: 0.3; pointer-events: none; }
  .tst-mosaico .tst-destacado .tst-quote-ico { width: 52px; height: 52px; margin-bottom: 28px; }
  .tst-mosaico .tst-destacado p { font-size: 22px; line-height: 1.55; letter-spacing: -0.01em; }
  .tst-mosaico .tst:not(.tst-destacado) { display: grid; grid-template-columns: 40px minmax(0, 1fr) 190px; column-gap: 20px; align-items: center; padding: 26px 28px; transition: transform .25s ease, box-shadow .25s ease; }
  .tst-mosaico .tst:not(.tst-destacado):hover { transform: translateY(-3px); box-shadow: var(--shadow-pop); }
  .tst-mosaico .tst:not(.tst-destacado) .tst-quote-ico { margin-bottom: 0; align-self: start; }
  .tst-mosaico .tst:not(.tst-destacado) blockquote { margin: 0; }
  .tst-mosaico .tst:not(.tst-destacado) .tst-who { align-self: stretch; flex-direction: column; align-items: flex-start; justify-content: center; gap: 10px; padding: 0 0 0 22px; border-top: none; border-left: 1px solid var(--line); }
}

/* Preguntas frecuentes */
.faq-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 64px; align-items: start; }
.faq-poster { position: sticky; top: 116px; }
.faq-poster .section-title { font-size: clamp(25px, 2.5vw, 34px); max-width: 16ch; }
.faq-poster p { color: var(--ink-soft); margin-top: 16px; font-size: 16px; line-height: 1.75; max-width: 40ch; }
.faq-poster .btn { margin-top: 28px; }
.faq-poster .retrato { width: min(100% - 20px, 330px); margin: 44px 0 0 20px; justify-self: start; }
/* Con el retrato el bloque es alto: en ventanas bajas deja de quedar fijo */
@media (max-height: 840px) { .faq-poster { position: static; } }
.faq-list { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item h3 { font: inherit; letter-spacing: 0; text-wrap: wrap; }
.faq-question { width: 100%; min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px 0; text-align: left; font-weight: 500; font-size: 16.5px; line-height: 1.4; color: var(--ink); transition: color .15s; }
.faq-item:hover .faq-question, .faq-item.open .faq-question { color: var(--violet); }
.faq-toggle { width: 30px; height: 30px; border-radius: 50%; background: var(--tint); color: var(--violet); display: grid; place-items: center; flex-shrink: 0; transition: background .2s, color .2s, transform .25s; }
.section-alt .faq-toggle { background: var(--surface); }
.faq-item.open .faq-toggle { background: var(--violet); color: #fff; transform: rotate(45deg); }
.faq-a { padding-bottom: 22px; color: var(--ink-soft); font-size: 15.5px; line-height: 1.75; max-width: 66ch; }
.js .faq-a { max-height: 0; padding-bottom: 0; overflow: hidden; visibility: hidden; transition: max-height .3s ease, padding .3s ease, visibility 0s .3s; }
.js .faq-item.open .faq-a { max-height: 520px; padding-bottom: 22px; visibility: visible; transition: max-height .3s ease, padding .3s ease; }
html:not(.js) .faq-toggle { display: none; }

/* Cierre y contacto */
.cta-final { background: linear-gradient(135deg, #5732A6 0%, #6F46BF 100%); color: #fff; border-radius: var(--radius-lg); padding: 60px 56px; position: relative; overflow: hidden; }
.cta-final::before {
  content: '';
  position: absolute;
  left: -120px;
  bottom: -170px;
  width: 340px;
  height: 340px;
  background: var(--ring-white) center / contain no-repeat;
  opacity: 0.35;
  pointer-events: none;
}
.cta-final-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 56px; align-items: center; position: relative; }
.cta-label { margin-bottom: 14px; font-size: 14px; color: rgba(255,255,255,0.92); }
.cta-final h2 { font-size: clamp(29px, 3.3vw, 44px); color: #fff; line-height: 1.16; }
.cta-final h2 em { font-style: normal; }
.cta-final p { color: rgba(255,255,255,0.92); margin-top: 18px; font-size: 16.5px; line-height: 1.7; max-width: 46ch; }
.cta-actions { display: flex; gap: 12px; margin-top: 30px; flex-wrap: wrap; }
.cta-contact { background: var(--surface); border-radius: var(--radius); padding: 24px 24px 10px; color: var(--ink); }
.cta-contact-title { margin-bottom: 4px; }
.cc-row { display: flex; gap: 14px; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.cc-row:last-child { border-bottom: none; }
.cc-row > div:last-child { flex: 1; min-width: 0; }
.cc-ico { width: 40px; height: 40px; }
.cc-row .ll { font-size: 12.5px; color: var(--ink-mute); line-height: 1.3; }
.cc-row .vv { font-weight: 500; color: var(--ink); margin-top: 2px; overflow-wrap: anywhere; line-height: 1.4; }
.cc-row a { text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1.5px; text-underline-offset: 4px; transition: text-decoration-color .18s, color .18s; }
.cc-row a:hover { color: var(--violet); text-decoration-color: var(--violet-soft); }

/* Pie */
footer { background: var(--surface); color: var(--ink-soft); border-top: 1px solid var(--line); padding: 72px 0 28px; }
.foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1.1fr 0.9fr 1.4fr; gap: 40px; margin-bottom: 48px; }
.foot-title { color: var(--ink); font-size: 14.5px; font-weight: 600; margin: 0 0 16px; }
footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; font-size: 14.5px; }
footer ul a { transition: color .15s; }
footer ul a:hover { color: var(--violet); }
.foot-brand .logo img { height: 52px; }
.foot-brand p { font-size: 14.5px; line-height: 1.7; margin-top: 18px; max-width: 320px; }
.foot-note { font-size: 13px; line-height: 1.6; color: var(--ink-mute); margin-bottom: 22px; max-width: 760px; }
.foot-bottom { border-top: 1px solid var(--line); padding-top: 22px; display: flex; justify-content: space-between; font-size: 13px; color: var(--ink-mute); flex-wrap: wrap; gap: 16px; }

@media (max-width: 1240px) {
  .ticker ul { justify-content: center; }
}
@media (max-width: 1024px) {
  .shell { padding: 0 24px; }
  section { padding: 76px 0; }
  .section-tight { padding-top: 0; }
  .hero { padding: 40px 0 64px; }
  .hero-grid { grid-template-columns: 1fr; gap: 48px; }  .section-head { margin-bottom: 40px; gap: 40px; }
  .colegio-left { padding: 40px 36px; }
  .trust-band { padding: 44px 36px; }
  .trust-grid { gap: 48px; }
  .trust-medal { width: 216px; margin: 15px; }
  .trust-medal .n { font-size: 68px; }
  .trust-medal .l { font-size: 14px; }
  .ts-ico { display: none; }
  .cta-final { padding: 48px 36px; }
  .faq-grid { gap: 44px; }
  .split { gap: 48px; }
  .retrato-sello { left: -12px; }
  .retrato-mini { right: -20px; }
  .retrato-lamina .retrato-marco::before { right: -6%; }
  .foot-grid { grid-template-columns: 1fr 1fr 1fr; gap: 36px; }
  .foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 960px) {
  .why-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .section-head { grid-template-columns: 1fr; gap: 18px; }
  .choose-grid { grid-template-columns: 1fr; gap: 84px; }
  .choose-top { min-height: 244px; }
  .choose-img { right: 2%; }
  .colegio-panel { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  /* Foto bajo el texto: alto mínimo proporcional al ancho (4:3) para que no se corten las caras */
  .colegio-right { min-height: 0; }
  .colegio-right::before { content: ''; display: block; padding-top: 75%; }
  .steps { grid-template-columns: 1fr 1fr; }
  .method { grid-template-columns: 1fr; gap: 36px; }
  .method-photo { min-height: 0; aspect-ratio: 1 / 0.78; }
  .method-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .trust-grid { grid-template-columns: 1fr; gap: 36px; }
  .trust-medal { justify-self: center; }
  .faq-grid { grid-template-columns: 1fr; gap: 28px; }
  .faq-poster { position: relative; top: auto; }
  .faq-poster .retrato { display: none; }
  .split, .split-media-first, .split-portada { grid-template-columns: 1fr; gap: 44px; }
  .split-media-first > .retrato { order: 0; }
  .retrato { width: min(100%, 380px); }
  .faq-poster .section-title { max-width: 22ch; }
  .cta-final-grid { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 720px) {
  html { scroll-padding-top: 80px; }
  .shell { padding: 0 20px; }
  section { padding: 60px 0; }
  nav.top .row { height: 66px; gap: 12px; }
  .nav-links { padding: 4px 20px 12px; }
  .logo img { height: 36px; }
  .logo small { font-size: 7.5px; letter-spacing: 0.24em; }
  .btn { padding: 13px 20px; font-size: 14.5px; }
  .btn-lg { padding: 15px 22px; font-size: 15px; }
  nav.top .btn-primary { padding: 10px 14px; font-size: 13px; }
  nav.top .btn-primary .arrow-ico { display: none; }
  .hero { padding: 28px 0 52px; }
  .hero h1 { font-size: clamp(28px, 7.6vw, 36px); }
  .hero-sub { font-size: 15.5px; margin-top: 18px; }
  .sub-larga { display: none; }
  .sub-corta { display: inline; }
  .hero-home .hero-link { display: none; }
  .hero-ctas { margin-top: 26px; gap: 10px; }
  .hero-ctas .btn { flex: 1 1 100%; white-space: normal; text-align: center; }
  .hero-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 28px; padding-top: 22px; }
  .hero-meta-stat .num { font-size: 24px; min-height: 26px; }
  .hero-meta-stat .num svg { width: 24px; height: 24px; }
  .hero-meta-stat .lbl { font-size: 12.5px; }
  .hero-visual { width: min(100%, 440px); }
  .hero-photo { margin: 6% 6% 0; }
  .ficha { display: grid; gap: 10px; margin-top: 44px; }
  .ficha li { position: static; white-space: normal; box-shadow: var(--shadow-card); }
  .ticker { padding: 22px 0; }
  .ticker ul { justify-content: center; gap: 6px 26px; }
  .ticker li { font-size: 16px; }
  .section-head { margin-bottom: 30px; }
  .section-title { font-size: clamp(25px, 6.6vw, 30px); }
  .section-intro { font-size: 15.5px; }
  .choose-grid { margin-top: 76px; gap: 72px; }
  .choose-top { min-height: 188px; padding: 24px 53% 24px 24px; }
  .choose-para { font-size: 13px; }
  .choose-img { width: min(66%, 250px); right: -28px; }
  .choose-body { padding: 24px 24px 26px; }
  .tabs-row { grid-template-columns: 1fr 1fr; margin-bottom: 16px; }
  .tab { padding: 13px 10px; font-size: 14px; }
  .js .colegio-panel { scroll-margin-top: 128px; }
  .colegio-left { padding: 28px 22px 30px; }
  .tabs-3 .tab { padding-inline: 6px; }
  .focus-list { margin-top: 22px; }
  .colegio-ctas { margin-top: 24px; }
  .colegio-ctas .btn { flex: 1 1 100%; white-space: normal; text-align: center; }
  .colegio-sello { top: 16px; left: 16px; max-width: calc(100% - 32px); }
  .colegio-right-top { left: 16px; right: 16px; bottom: 16px; }
  .why-grid, .why-grid.cols-4, .why-grid.cols-2 { grid-template-columns: 1fr; gap: 28px; }
  .split .section-title { margin-bottom: 30px; }
  .retrato-panel { border-radius: 26px; clip-path: inset(-30% 0 0 0 round 0 0 26px 26px); }
  .retrato-ico { width: 54px; height: 54px; top: -10px; left: -10px; box-shadow: 0 0 0 8px var(--section-bg, var(--bg)); }
  .retrato-sello { left: -8px; bottom: 18px; font-size: 13px; }
  .retrato-mini { right: -10px; border-width: 4px; border-radius: 14px; }
  .retrato-lamina .retrato-marco::before { right: -4%; }
  .retrato-foto { border-radius: 26px; }
  .why-card-head { flex-direction: row-reverse; justify-content: flex-end; align-items: center; gap: 14px; }
  .steps { grid-template-columns: 1fr; gap: 28px; }
  .step { display: grid; grid-template-columns: 40px 1fr; column-gap: 16px; }
  .step-num { grid-row: span 2; margin-bottom: 0; }
  .step h3 { align-self: center; margin-bottom: 4px; }
  .pull-quote { margin-top: 40px; padding-top: 28px; }
  .method-photo { aspect-ratio: 1 / 0.9; }
  .method-photo .photo-img { object-position: 50% top; }
  .method-photo .colegio-sello { top: 12px; left: 12px; padding: 8px 14px 8px 8px; }
  .method-quote { padding: 36px 24px 26px; }
  .method-quote p { font-size: 18px; }
  .method-quote-ico { left: 24px; }
  .trust-band { padding: 40px 24px 28px; }
  .trust-stats { gap: 10px; margin-top: 26px; }
  .ts { padding: 18px 16px 20px; }
  .ts .n { font-size: 28px; }
  .tst { min-width: 280px; flex-basis: 86%; padding: 24px; }
  .tst-row { margin-left: -20px; margin-right: -20px; padding-left: 20px; padding-right: 20px; scroll-padding-inline: 20px; }
  .faq-question { font-size: 16px; gap: 12px; }
  .faq-a { font-size: 15px; }
  .cta-final { padding: 40px 24px; }
  .cta-final p { font-size: 16px; }
  .cta-actions .btn { flex: 1 1 100%; white-space: normal; text-align: center; }
  .cta-contact { padding: 20px 20px 8px; }
  .cc-row { gap: 12px; font-size: 14.5px; }
  /* El correo es largo: en celular va más chico y, si no entra, corta antes de la arroba */
  .cc-row .cc-mail { font-size: 13.5px; }
  footer { padding: 52px 0 24px; }
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 28px; margin-bottom: 36px; }
  footer ul { gap: 14px; }
  .foot-bottom { flex-direction: column; gap: 10px; align-items: flex-start; }
  .wa-float { display: inline-flex; }
}
@media (max-width: 389px) {
  nav.top .nav-actions .btn { display: none; }
}
/* Con la columna de texto angosta los contenidos van uno por renglón */
@media (max-width: 520px), (min-width: 861px) and (max-width: 1180px) {
  .focus-list { grid-template-columns: 1fr; gap: 8px; }
}
@media (max-width: 520px) {
  .colegio-right::before { padding-top: 100%; }
  /* Sello más compacto para que no tape las cabezas cuando su texto ocupa dos renglones */
  .colegio-sello { top: 12px; left: 12px; max-width: calc(100% - 24px); padding: 8px 14px 8px 8px; }
  .trust-stats { grid-template-columns: 1fr; }
  .ts { display: grid; grid-template-columns: 92px minmax(0, 1fr); align-items: center; padding: 16px 18px; }
  .ts .l { margin-top: 0; }
  .method-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .method-tile { padding: 16px 14px 18px; gap: 12px; font-size: 14px; }
}
@media (max-width: 400px) {
  .foot-grid { grid-template-columns: 1fr; }
  .wa-float { right: 14px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); width: 54px; height: 54px; }
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  /* Cinta en movimiento hacia la derecha: dos copias iguales, cada una avanza su propio ancho */
  .ticker-marquee { overflow: hidden; }
  .ticker-marquee .shell { display: flex; max-width: none; padding: 0; }
  .ticker.ticker-marquee ul {
    display: flex;
    flex: none;
    flex-wrap: nowrap;
    justify-content: space-around;
    gap: 0;
    min-width: 100%;
    animation: ticker-derecha 32s linear infinite;
  }
  .ticker-marquee li { display: flex; align-items: center; }
  .ticker-marquee li::after { content: ""; width: 6px; height: 6px; margin: 0 30px; border-radius: 50%; background: currentColor; opacity: 0.45; }
  .ticker-marquee:hover ul { animation-play-state: paused; }
  /* Al cambiar de colegio el texto entra escalonado y la foto se asienta */
  .js .colegio-panel.is-active .colegio-left > * { animation: colegio-entra .45s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .js .colegio-panel.is-active .colegio-left > :nth-child(2) { animation-delay: .04s; }
  .js .colegio-panel.is-active .colegio-left > :nth-child(3) { animation-delay: .08s; }
  .js .colegio-panel.is-active .colegio-left > :nth-child(4) { animation-delay: .12s; }
  .js .colegio-panel.is-active .colegio-left > :nth-child(5) { animation-delay: .16s; }
  .js .colegio-panel.is-active .colegio-photo .photo-img { animation: colegio-foto .6s ease both; }
}
@keyframes colegio-entra {
  from { opacity: 0; transform: translateY(10px); }
}
@keyframes colegio-foto {
  from { opacity: 0; transform: scale(1.05); }
}
@keyframes ticker-derecha {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}