/* =====================================================================
   Posgrado en Psicopedagogía Infantil — landing
   ===================================================================== */

/* Versión C definitiva (22 oct 2026): azul Fright Night, Aleo + Google Sans.
   Tokens copiados de Claude Design: https://claude.ai/artifact/GsB2DS9b9f5G2gyQyXiu8t · 2026-10-19
   No editar aquí: cambiar en Claude Design y volver a copiar.
   Fuera de :root ningún color, fuente, radio ni sombra: todo con var(--…). */
:root {
  /* Bloque 1 · color */
  --color-fondo: #F4F5FA;
  --color-superficie: #FFFFFF;
  --color-marca: #004499;
  --color-marca-profundo: #112358;
  --color-acento: #CFEB73;
  --color-acento-hover: #BCDD4F;
  --color-apoyo: #D4EAFF;
  --color-texto: var(--color-marca);
  --color-texto-secundario: #3F5577;
  --color-texto-invertido: var(--color-fondo);
  --color-texto-invertido-secundario: #C9D6EE;
  --color-acento-texto: #476200;
  --color-borde: #D3DBEA;
  --color-borde-control: #0192C6;
  --color-error: #B3261E;
  --color-exito: #2E7D4F;
  /* Color por programa (20 oct, por validar en el design system): Especialidad = cielo, Maestría = lima.
     Los dos son colores base del cliente y funcionan sobre claro y sobre petróleo, siempre con texto petróleo. */
  --color-especialidad: var(--color-apoyo);
  --color-maestria: var(--color-acento);
  --degradado-esquina-azul: radial-gradient(120% 90% at 100% 100%, rgba(1, 146, 198, .75) 0%, rgba(1, 146, 198, 0) 70%);
  --degradado-esquina-cielo: radial-gradient(120% 90% at 100% 100%, rgba(1, 146, 198, .35) 0%, rgba(1, 146, 198, 0) 70%);
  --degradado-esquina-lima: radial-gradient(120% 90% at 100% 100%, rgba(255, 255, 255, .75) 0%, rgba(255, 255, 255, 0) 70%);
  --degradado-esquina-claro: radial-gradient(130% 100% at 100% 100%, rgba(207, 235, 115, .7) 0%, rgba(207, 235, 115, .25) 35%, rgba(255, 255, 255, 0) 72%);
  --degradado-esquina-suave: radial-gradient(130% 100% at 100% 100%, rgba(207, 235, 115, .4) 0%, rgba(207, 235, 115, .12) 35%, rgba(255, 255, 255, 0) 70%);
  --color-acento-velo: rgba(207, 235, 115, .12); /* lima translúcido sobre fondos oscuros */

  /* Bloque 2 · tipografía */
  --font-titulos: "Aleo", Georgia, serif;
  --font-texto: "Google Sans", "Segoe UI", system-ui, sans-serif;
  --fs-h1: 64px;   --lh-h1: 1.02;
  --fs-h2: 44px;   --lh-h2: 1.08;
  --fs-h3: 26px;   --lh-h3: 1.2;
  --fs-texto: 18px;
  --fs-texto-chico: 15px;
  --fs-etiqueta: 13px;

  /* Bloque 3 · retícula y espaciado */
  --space-1: 4px;  --space-2: 8px;  --space-3: 16px; --space-4: 24px;
  --space-5: 32px; --space-6: 48px; --space-7: 64px; --space-8: 96px;
  --contenedor-max: 1320px;
  --medianil: 32px;
  --margen: 48px;
  --seccion: var(--space-8);
  --seccion-titulo: var(--space-6);

  /* Bloque 4 · forma */
  --radius-chico: 10px;
  --radius-tarjeta: 20px;
  --radius-pildora: 999px;
  --borde-fino: 1px;
  --borde-control: 1.5px;
  --borde-foco: 3px;
  --sombra-flotante: 0 12px 28px -12px rgba(17, 35, 88, 0.35);
  /* Derivado de la forma firma (bloque 4): el arco del medio disco sobre una base recta. */
  --forma-arco: var(--radius-pildora) var(--radius-pildora) var(--radius-tarjeta) var(--radius-tarjeta);

  /* Bloque 6 · carácter */
  --degradado-cierre: linear-gradient(180deg, #F4F5FA 0%, #E9F0FF 100%);
  --velo-foto: linear-gradient(180deg, rgba(0, 68, 153, 0) 30%, rgba(0, 68, 153, 0.92) 100%);
  --velo-testimonio: linear-gradient(180deg, rgba(0, 68, 153, 0) 20%, rgba(0, 68, 153, 0.8) 55%, rgba(17, 35, 88, 0.96) 100%);
  --velo-lateral: linear-gradient(90deg, rgba(0, 68, 153, 0.94) 0%, rgba(0, 68, 153, 0.86) 45%, rgba(0, 68, 153, 0.55) 100%);
  --mov-duracion: 900ms;
  --mov-recorrido: 24px;
  --mov-escalon: 120ms;
  --mov-curva: cubic-bezier(.22, 1, .36, 1);
  --mov-micro: 200ms;

  /* Medida publicada por main.js; este valor es solo el respaldo sin JS. */
  --nav-h: 76px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--color-fondo);
  color: var(--color-texto);
  font-family: var(--font-texto);
  font-size: var(--fs-texto);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
[id] { scroll-margin-top: calc(var(--nav-h) + var(--space-3)); }

.wrap {
  width: 100%;
  max-width: calc(var(--contenedor-max) + 2 * var(--margen));
  margin: 0 auto;
  padding-left: max(var(--margen), env(safe-area-inset-left));
  padding-right: max(var(--margen), env(safe-area-inset-right));
}

.skip {
  position: absolute; left: var(--space-3); top: calc(-1 * var(--space-7)); z-index: 100;
  background: var(--color-marca); color: var(--color-texto-invertido);
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-chico);
}
.skip:focus { top: var(--space-3); }

:focus-visible { outline: var(--borde-foco) solid var(--color-marca); outline-offset: 2px; }

/* ---------- tipografía ---------- */
h1, h2, h3 { font-family: var(--font-titulos); font-weight: 700; text-wrap: balance; }
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: -.015em; font-variation-settings: "opsz" 72; max-width: 20ch; }
h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: 600; letter-spacing: -.005em; font-variation-settings: "opsz" 32; }
.h3-grande { font-size: calc(var(--fs-h3) + 8px); line-height: 1.15; font-weight: 700; }
.etiqueta {
  font-size: var(--fs-etiqueta); font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--color-acento-texto);
}

/* ---------- botones (bloque 5) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 var(--space-4);
  border-radius: var(--radius-pildora); border: var(--borde-control) solid transparent;
  font-family: var(--font-texto); font-size: 16px; font-weight: 700; line-height: 1;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color var(--mov-micro), color var(--mov-micro), border-color var(--mov-micro);
}
.btn__ar { display: inline-block; transition: transform var(--mov-micro); }
.btn:hover .btn__ar { transform: translateX(3px); }
.btn--sm { min-height: 44px; padding: 0 var(--space-3); font-size: var(--fs-texto-chico); }
.btn--bloque { width: 100%; }
.btn[disabled] { cursor: not-allowed; }

.btn--principal { background: var(--color-marca); color: var(--color-texto-invertido); }
.btn--principal:hover { background: var(--color-marca-profundo); }
.btn--principal[disabled] { background: var(--color-borde); color: var(--color-texto-secundario); }

.btn--secundario { background: transparent; color: var(--color-texto); border-color: var(--color-marca); }
.btn--secundario:hover { background: var(--color-apoyo); border-color: var(--color-apoyo); }
/* Sobre una tarjeta cielo el hover cielo desaparece: ahí se rellena de petróleo (9.6:1). */
.tarjeta--cielo .btn--secundario:hover { background: var(--color-marca); border-color: var(--color-marca); color: var(--color-texto-invertido); }

.btn--principal-oscuro { background: var(--color-acento); color: var(--color-texto); }
.btn--principal-oscuro:hover { background: var(--color-acento-hover); }
.seccion--petroleo :focus-visible, .tarjeta--petroleo :focus-visible, .pie :focus-visible { outline-color: var(--color-acento); }

.enlace-flecha {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-weight: 700; text-decoration: none; color: var(--color-texto);
}
.enlace-flecha::after { content: "→"; transition: transform var(--mov-micro); }
.enlace-flecha:hover { color: var(--color-acento-texto); }
.enlace-flecha:hover::after { transform: translateX(3px); }

/* ---------- huecos de imagen ----------
   Rotulados con su medida para que el cableado de fotos sea mecánico. */
.ph {
  position: relative; width: 100%; overflow: hidden;
  background:
    repeating-linear-gradient(135deg, transparent 0 10px, var(--color-borde) 10px 11px),
    var(--color-superficie);
}
.ph::after {
  content: attr(data-ph);
  position: absolute; left: var(--space-3); right: var(--space-3); bottom: var(--space-3);
  font-size: 11px; font-weight: 700; line-height: 1.35; letter-spacing: .03em;
  color: var(--color-texto-secundario);
}
.ph--paisaje { aspect-ratio: 4 / 3; border-radius: var(--radius-tarjeta); }
.ph--avatar { width: 120px; height: 120px; flex: none; border-radius: var(--radius-pildora); background-color: var(--color-apoyo); }
.ph--avatar::after { content: "foto"; text-align: center; bottom: 50px; }
.ph--fondo { position: absolute; inset: 0; height: 100%; background-color: var(--color-apoyo); }
.ph--fondo::after { top: var(--space-3); bottom: auto; }

/* ---------- navegación ---------- */
.nav { position: fixed; inset: 0 0 auto; z-index: 50; background: transparent; transition: background-color .3s, box-shadow .3s; }
.nav.is-solid { background: var(--color-fondo); box-shadow: var(--sombra-flotante); }
.nav__inner { min-height: 76px; display: flex; align-items: center; gap: var(--space-5); }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; margin-right: auto; }
/* Marca provisional: el medio disco de la forma firma sobre una base petróleo. */
.brand__mark { width: 40px; height: 40px; flex: none; border-radius: var(--radius-chico); background: var(--color-marca); position: relative; overflow: hidden; }
.brand__mark::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: 0; height: 12px; border-radius: var(--radius-pildora) var(--radius-pildora) 0 0; background: var(--color-acento); }
.brand__text { display: flex; flex-direction: column; line-height: 1.1; }
.brand__text strong { font-family: var(--font-titulos); font-size: 18px; font-weight: 700; }
.brand__text span { font-size: 12px; color: var(--color-texto-secundario); }
.nav__links { display: flex; gap: var(--space-4); }
.nav__links a { font-size: var(--fs-texto-chico); font-weight: 700; text-decoration: none; padding: 6px 0; position: relative; }
.nav__links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--color-marca); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--mov-curva); }
.nav__links a:hover::after, .nav__links a.is-current::after { transform: scaleX(1); }
.nav__toggle, .nav__mobile { display: none; }

/* ---------- hero 3 + 6 + 3 ---------- */
.hero { position: relative; padding-top: calc(var(--nav-h) + var(--space-6)); padding-bottom: 0; overflow: hidden; }
/* Centinela: cuando sale de pantalla, la navegación se vuelve sólida. */
.nav-centinela { position: absolute; top: 0; left: 0; width: 1px; height: 40px; pointer-events: none; }
.hero__head { display: grid; justify-items: center; text-align: center; gap: var(--space-4); }
.hero__title { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: -.02em; font-variation-settings: "opsz" 96; max-width: 24ch; }
.hero__lead { max-width: 56ch; color: var(--color-texto-secundario); }
.hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.hero__stage { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--medianil); align-items: end; margin-top: var(--space-6); }
.hero__side { grid-column: span 3; display: grid; gap: var(--space-5); padding-bottom: var(--space-7); }
.hero__side--r { text-align: right; }
.dato { display: grid; gap: 2px; }
.dato strong { font-family: var(--font-titulos); font-size: var(--fs-h2); line-height: 1; font-weight: 700; font-variant-numeric: tabular-nums; }
.dato span { font-size: var(--fs-texto-chico); color: var(--color-texto-secundario); line-height: 1.4; }
.dato--nota { gap: var(--space-2); border-top: var(--borde-fino) solid var(--color-borde); padding-top: var(--space-3); }
.hero__fig { grid-column: span 6; position: relative; aspect-ratio: 5 / 4; max-height: 560px; border-radius: var(--forma-arco); background: var(--color-marca); overflow: hidden; display: flex; align-items: flex-end; justify-content: center; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.hero__disc { position: absolute; left: 50%; bottom: -18%; width: 70%; aspect-ratio: 1 / 1; transform: translateX(-50%); border-radius: var(--radius-pildora); background: var(--color-apoyo); }
.ph--figura { position: relative; width: 66%; aspect-ratio: 4 / 5; background-color: var(--color-superficie); border-radius: var(--radius-pildora) var(--radius-pildora) 0 0; }
.hero__badge { position: absolute; left: var(--space-4); bottom: var(--space-4); display: grid; gap: 2px; padding: 12px var(--space-3); border-radius: var(--radius-chico); background: var(--color-acento); color: var(--color-texto); }
.hero__badge span { font-size: 11px; font-weight: 700; letter-spacing: .12em; }
.hero__badge strong { font-family: var(--font-titulos); font-size: 20px; line-height: 1.1; }

/* Entrada del hero al cargar (está sobre el pliegue: no espera al scroll). */
.js .hero__in { animation: entra var(--mov-duracion) var(--mov-curva) both; }
.js .hero__head .hero__in:nth-child(2) { animation-delay: calc(1 * var(--mov-escalon)); }
.js .hero__head .hero__in:nth-child(3) { animation-delay: calc(2 * var(--mov-escalon)); }
.js .hero__head .hero__in:nth-child(4) { animation-delay: calc(3 * var(--mov-escalon)); }
.js .hero__stage .hero__in { animation-delay: calc(3 * var(--mov-escalon)); }
.js .hero__stage .hero__fig { animation-delay: calc(2 * var(--mov-escalon)); }
@keyframes entra { from { opacity: 0; transform: translateY(var(--mov-recorrido)); } to { opacity: 1; transform: none; } }

/* ---------- franja ---------- */
.franja { background: var(--color-marca); color: var(--color-texto-invertido); }
.franja__list { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3) var(--space-4); padding-top: 20px; padding-bottom: 20px; }
.franja__list li { display: flex; align-items: center; gap: 10px; font-size: var(--fs-texto-chico); font-weight: 700; }
.franja__list li::before { content: ""; width: 12px; height: 6px; border-radius: var(--radius-pildora) var(--radius-pildora) 0 0; background: var(--color-acento); }

/* ---------- secciones ---------- */
.seccion { padding-top: var(--seccion); padding-bottom: var(--seccion); }
.seccion--superficie { background: var(--color-superficie); }
.seccion--petroleo { background: var(--color-marca); color: var(--color-texto-invertido); }
.seccion--petroleo .etiqueta { color: var(--color-acento); }
.seccion--petroleo .seccion__lead { color: var(--color-texto-invertido-secundario); }
.seccion--cierre { background: var(--degradado-cierre); }
.seccion__head { display: grid; gap: var(--space-3); margin-bottom: var(--seccion-titulo); }
.seccion__lead { max-width: 62ch; color: var(--color-texto-secundario); }
/* Encabezado a dos columnas: etiqueta y título a la izquierda, texto a la derecha (6 + 6). */
.seccion__head--dos { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--medianil); align-items: end; }
.seccion__head--dos > div { grid-column: span 6; display: grid; gap: var(--space-3); }
.seccion__head--dos .seccion__lead { grid-column: 8 / span 5; }
.h2-linea { max-width: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Entrada al hacer scroll (bloque 6): nace visible sin JS; con JS sube 24px y aparece una vez. */
.js .reveal {
  opacity: 0; transform: translateY(var(--mov-recorrido));
  transition: opacity var(--mov-duracion) var(--mov-curva), transform var(--mov-duracion) var(--mov-curva);
  transition-delay: calc(var(--i, 0) * var(--mov-escalon));
}
.js .reveal.is-in { opacity: 1; transform: none; }

/* ---------- tarjetas (bloque 5) ---------- */
.tarjeta { position: relative; overflow: hidden; border-radius: var(--radius-tarjeta); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); }
.tarjeta > p:not(.etiqueta) { color: var(--color-texto-secundario); }
.tarjeta--claro { background: var(--color-superficie); border: var(--borde-fino) solid var(--color-borde); }
.seccion--superficie .tarjeta--claro { background: var(--color-fondo); }
.tarjeta--cielo { background: var(--color-apoyo); }
.tarjeta--cielo > p:not(.etiqueta) { color: var(--color-texto); }
.tarjeta--cielo .etiqueta { color: var(--color-texto); }
.tarjeta--lima { background: var(--color-acento); }
.tarjeta--lima > p:not(.etiqueta), .tarjeta--lima .etiqueta { color: var(--color-texto); }
.tarjeta--petroleo { background: var(--color-marca); color: var(--color-texto-invertido); }
.tarjeta--petroleo .etiqueta { color: var(--color-acento); }
.tarjeta--petroleo > p:not(.etiqueta) { color: var(--color-texto-invertido-secundario); }
.tarjeta--foto { color: var(--color-texto-invertido); justify-content: flex-end; min-height: 360px; padding: 0; }
.tarjeta--foto::after { content: ""; position: absolute; inset: 0; background: var(--velo-foto); pointer-events: none; }
.tarjeta__sobre { position: relative; z-index: 1; padding: var(--space-5); display: grid; gap: var(--space-2); }
.tarjeta__sobre p { color: var(--color-texto-invertido-secundario); }
.dato-grande { font-family: var(--font-titulos); font-size: 64px; line-height: 1; font-weight: 700; color: var(--color-texto); font-variant-numeric: tabular-nums; }

/* ---------- programas ---------- */
.programas { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--medianil); }
.programa--m { grid-column: span 7; }
.programa--e { grid-column: span 5; }
.programa .btn { margin-top: auto; align-self: flex-start; }
.mini { background: var(--color-superficie); color: var(--color-texto); border-radius: var(--radius-chico); padding: var(--space-3); display: grid; gap: 10px; }
.mini__lbl { font-size: 13px; color: var(--color-texto-secundario); }
.semestres { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-1); }
.semestres i { height: 12px; border-radius: var(--radius-pildora); transform-origin: left; }
.semestres .s-e { background: var(--color-apoyo); }
.semestres .s-m { background: var(--color-marca); }
/* La barra se dibuja al entrar: explica que la Especialidad es la primera mitad de la Maestría. */
.js .programa--m .semestres i { transform: scaleX(0); transition: transform var(--mov-duracion) var(--mov-curva); }
.js .programa--m .semestres i:nth-child(2) { transition-delay: calc(1 * var(--mov-escalon)); }
.js .programa--m .semestres i:nth-child(3) { transition-delay: calc(3 * var(--mov-escalon)); }
.js .programa--m .semestres i:nth-child(4) { transition-delay: calc(4 * var(--mov-escalon)); }
.js .programa--m.is-in .semestres i { transform: none; }
.leyenda { display: flex; flex-wrap: wrap; gap: var(--space-3); font-size: 13px; color: var(--color-texto-secundario); }
.ley { display: inline-flex; align-items: center; gap: 6px; }
.ley::before { content: ""; width: 10px; height: 10px; border-radius: var(--radius-pildora); }
.ley--e::before { background: var(--color-apoyo); }
.ley--m::before { background: var(--color-marca); }
.meta { display: grid; }
.meta div { display: flex; justify-content: space-between; gap: var(--space-3); padding: 12px 0; border-top: var(--borde-fino) solid var(--color-borde); font-size: var(--fs-texto-chico); }
.tarjeta--petroleo .meta div { border-top-color: var(--color-texto-invertido-secundario); }
.tarjeta--cielo .meta div { border-top-color: var(--color-texto-secundario); }
.meta dt { opacity: .85; }
.meta dd { font-weight: 700; text-align: right; }

/* ---------- tu ruta ---------- */
.ruta { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--medianil); align-items: center; margin-top: var(--space-8); }
.ruta__copy { grid-column: 1 / span 6; display: grid; gap: var(--space-3); }
.ruta__copy p:not(.etiqueta) { color: var(--color-texto-secundario); max-width: 46ch; }
.ruta__card { grid-column: 7 / span 6; gap: var(--space-3); }
.ruta__lbl { font-size: var(--fs-texto-chico); font-weight: 700; color: var(--color-texto); }
.ruta__val { font-family: var(--font-titulos); font-size: 56px; line-height: 1; font-weight: 700; color: var(--color-texto); font-variant-numeric: tabular-nums; }
.ruta__val small { font-size: 22px; font-weight: 600; }
.ruta__range { width: 100%; height: 28px; margin: 0; accent-color: var(--color-marca); cursor: pointer; }
.ruta__ticks { display: flex; justify-content: space-between; padding: 0 var(--space-1); margin-top: calc(-1 * var(--space-2)); font-size: 13px; font-weight: 700; }
.ruta__hr { border: 0; height: var(--borde-fino); background: var(--color-texto-secundario); margin: var(--space-1) 0; width: 100%; }
.ruta__res { font-family: var(--font-titulos); font-size: var(--fs-h3); line-height: 1.2; font-weight: 700; color: var(--color-texto); }
.ruta__sub { font-size: var(--fs-texto-chico); color: var(--color-texto); margin-top: calc(-1 * var(--space-2)); }

/* ---------- dos columnas (5 + 7 aprox.) ---------- */
.dos { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--medianil); align-items: start; }
.dos__a { grid-column: 1 / span 6; display: grid; gap: var(--space-3); align-content: start; }
.dos__b { grid-column: 8 / span 5; }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chips li { padding: 9px var(--space-3); border-radius: var(--radius-pildora); background: var(--color-apoyo); font-size: var(--fs-texto-chico); font-weight: 700; }
.chips--chicos li { padding: 6px 12px; font-size: 13px; background: var(--color-fondo); border: var(--borde-fino) solid var(--color-borde); }
.nota { margin-top: var(--space-2); padding: var(--space-3); border-radius: var(--radius-chico); background: var(--color-fondo); border: var(--borde-fino) solid var(--color-borde); font-size: var(--fs-texto-chico); }
.titulo-lista { font-family: var(--font-texto); font-size: var(--fs-etiqueta); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--color-texto-secundario); margin-bottom: var(--space-3); }
.checks li { position: relative; padding: 18px 0 18px 40px; border-top: var(--borde-fino) solid var(--color-borde); }
.checks li:last-child { border-bottom: var(--borde-fino) solid var(--color-borde); }
.checks li::before { content: "✓"; position: absolute; left: 0; top: 18px; width: 26px; height: 26px; border-radius: var(--radius-pildora); background: var(--color-acento); color: var(--color-texto); font-weight: 700; font-size: 14px; display: grid; place-items: center; }

/* ---------- egreso y campo ---------- */
.logros { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--medianil); counter-reset: l; }
.logros li { counter-increment: l; position: relative; padding-top: var(--space-5); font-size: 16px; line-height: 1.5; }
/* Línea punteada que une los pasos; arranca en el punto de color de cada uno. */
.logros li::after { content: ""; position: absolute; top: 7px; left: 24px; right: calc(-1 * var(--medianil) + var(--space-2)); border-top: 2px dotted var(--color-borde-control); }
.logros li:last-child::after { right: 0; }
.logros li .punto, .logros li::marker { display: none; }
.logros li::before { content: counter(l, decimal-leading-zero); display: block; font-family: var(--font-titulos); font-size: 32px; line-height: 1; font-weight: 700; color: var(--color-acento-texto); margin-bottom: var(--space-3); }
.logros li { background: radial-gradient(circle at 8px 8px, var(--punto) 7px, transparent 8px) no-repeat; }
.logros li:nth-child(1) { --punto: var(--color-marca); }
.logros li:nth-child(2) { --punto: var(--color-apoyo); }
.logros li:nth-child(3) { --punto: var(--color-acento-texto); }
.logros li:nth-child(4) { --punto: var(--color-acento-hover); }
.logros li:nth-child(5) { --punto: var(--color-marca-profundo); }
.campo { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--medianil); align-items: center; margin-top: var(--space-8); }
.campo__media { grid-column: span 6; }
.campo__copy { grid-column: 8 / span 5; display: grid; gap: var(--space-3); }
.campo__list li { padding: var(--space-3) 0; border-top: var(--borde-fino) solid var(--color-borde); display: grid; gap: 2px; }
.campo__list strong { font-size: var(--fs-texto); }
.campo__list span { font-size: var(--fs-texto-chico); color: var(--color-texto-secundario); }

/* ---------- plan de estudios (4 + 8) ---------- */
.plan { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--medianil); align-items: start; }
.plan__tabs { grid-column: span 4; display: grid; gap: var(--space-2); position: sticky; top: calc(var(--nav-h) + var(--space-4)); }
.plan__tab {
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-3);
  min-height: 60px; padding: 0 var(--space-4); text-align: left; cursor: pointer;
  border-radius: var(--radius-pildora); border: var(--borde-control) solid var(--color-texto-invertido-secundario);
  background: transparent; color: var(--color-texto-invertido);
  font-family: var(--font-titulos); font-size: 19px; font-weight: 600;
  transition: background-color var(--mov-micro), color var(--mov-micro), border-color var(--mov-micro);
}
.plan__tab small { font-family: var(--font-texto); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--color-acento); }
.plan__tab:hover { background: var(--color-marca-profundo); }
.plan__tab.is-active { background: var(--color-acento); border-color: var(--color-acento); color: var(--color-texto); }
.plan__tab.is-active small { color: var(--color-texto); }
.plan__panels { grid-column: 6 / span 7; }
.plan__h { font-size: var(--fs-h3); margin-bottom: var(--space-3); }
.plan__panel ul { counter-reset: m; }
.plan__panel li:first-child { border-top: 0; padding-top: var(--space-3); }
.plan__panel li { counter-increment: m; position: relative; padding: 18px 0 18px 56px; border-top: var(--borde-fino) solid var(--color-texto-invertido-secundario); }
.plan__panel li::before { content: counter(m, decimal-leading-zero); position: absolute; left: 0; top: 18px; font-family: var(--font-titulos); font-weight: 700; color: var(--color-acento); }
/* Sin JS se ven los cuatro semestres; con JS, uno a la vez. */
.js .plan__panel { display: none; }
.js .plan__panel.is-active { display: block; animation: aparece .45s var(--mov-curva); }
html:not(.js) .plan__tabs { display: none; }
html:not(.js) .plan__panel + .plan__panel { margin-top: var(--space-6); }
@keyframes aparece { from { opacity: 0; } to { opacity: 1; } }

/* ---------- ventajas (12 col: 7+5 / 4+4+4 / 6+6) ---------- */
.ventajas { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-4); }
.v-7 { grid-column: span 7; min-height: 260px; justify-content: flex-end; }
.v-5 { grid-column: span 5; }
.v-4 { grid-column: span 4; }
.v-6 { grid-column: span 6; }

/* ---------- docentes ---------- */
.docentes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.docente { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); border-radius: var(--radius-tarjeta); background: var(--color-fondo); border: var(--borde-fino) solid var(--color-borde); }
.docente h3 { font-size: 21px; }
.docente__rol { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--color-acento-texto); margin: 6px 0 10px; }
.docente p:not(.docente__rol):not(.docente__xp) { font-size: var(--fs-texto-chico); line-height: 1.5; color: var(--color-texto-secundario); }
.docente__xp { margin-top: var(--space-3); display: inline-block; font-size: 14px; font-weight: 700; padding: 6px 12px; border-radius: var(--radius-pildora); background: var(--color-apoyo); }

/* ---------- testimonios ---------- */
.testimonios { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-4); }
.testimonio--grande { grid-column: span 7; grid-row: span 2; min-height: 520px; }
.testimonio--pendiente { grid-column: span 5; border-style: dashed; background: transparent; }
.testimonio__cita { font-family: var(--font-titulos); font-size: 24px; line-height: 1.3; font-weight: 600; }
.testimonio__cita::before { content: "“"; display: block; font-size: 56px; line-height: .6; color: var(--color-acento-texto); margin-bottom: var(--space-2); }
.testimonio--grande .testimonio__cita { font-size: 30px; }
.testimonio--grande .testimonio__cita::before { color: var(--color-acento); }
.testimonio footer { font-size: var(--fs-texto-chico); color: var(--color-texto-secundario); margin-top: auto; }
.testimonio--grande footer { color: var(--color-texto-invertido-secundario); }

/* ---------- admisión ---------- */
.pasos { counter-reset: p; margin-top: var(--space-3); display: grid; gap: var(--space-4); }
.pasos li { counter-increment: p; position: relative; padding-left: 64px; display: grid; gap: 4px; }
.pasos li::before { content: counter(p); position: absolute; left: 0; top: -4px; width: 44px; height: 44px; border-radius: var(--radius-pildora); background: var(--color-marca); color: var(--color-acento); display: grid; place-items: center; font-family: var(--font-titulos); font-size: 20px; font-weight: 700; }
.pasos strong { font-size: var(--fs-texto); }
.pasos span { color: var(--color-texto-secundario); font-size: 16px; }
.documentos__list { counter-reset: d; margin-bottom: var(--space-3); }
.documentos__list li { counter-increment: d; display: flex; gap: var(--space-3); padding: 12px 0; border-top: var(--borde-fino) solid var(--color-borde); font-size: 16px; }
.documentos__list li::before { content: counter(d, decimal-leading-zero); font-family: var(--font-titulos); font-weight: 700; color: var(--color-acento-texto); min-width: 24px; }

/* ---------- preguntas frecuentes (5 + 7) ---------- */
.faq { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--medianil); align-items: start; }
.faq__head { grid-column: span 5; display: grid; gap: var(--space-3); position: sticky; top: calc(var(--nav-h) + var(--space-4)); }
.faq__list { grid-column: 7 / span 6; }
.faq__list details { border-top: var(--borde-fino) solid var(--color-texto-invertido-secundario); }
.faq__list details:last-child { border-bottom: var(--borde-fino) solid var(--color-texto-invertido-secundario); }
.faq__list summary {
  list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr 32px; gap: var(--space-3); align-items: center;
  padding: 22px 0; font-family: var(--font-titulos); font-size: 20px; line-height: 1.3; font-weight: 600;
  border-radius: var(--radius-chico); transition: color var(--mov-micro);
}
.faq__list summary::-webkit-details-marker { display: none; }
.faq__list summary:hover { color: var(--color-acento); }
.faq__ico { width: 32px; height: 32px; border-radius: var(--radius-pildora); border: var(--borde-control) solid currentColor; display: grid; place-items: center; transition: transform .3s var(--mov-curva), background-color .3s; }
.faq__ico::before { content: "+"; font-family: var(--font-texto); font-size: 20px; line-height: 1; font-weight: 400; }
.faq__list details[open] .faq__ico { transform: rotate(45deg); background: var(--color-acento); border-color: var(--color-acento); color: var(--color-marca); }
.faq__list details p { padding: 0 48px 24px 0; color: var(--color-texto-invertido-secundario); max-width: 62ch; }

/* ---------- folletos + cierre (5 + 7) ---------- */
.folletos { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--medianil); align-items: start; }
.folletos__copy { grid-column: span 5; display: grid; gap: var(--space-4); }
.folletos__card { grid-column: 7 / span 6; padding: var(--space-5); }
.equipo { display: flex; align-items: center; gap: var(--space-3); }
.equipo__lbl { font-size: var(--fs-texto-chico); font-weight: 700; }
.avatares { display: flex; }
.avatares i, .avatares b { width: 44px; height: 44px; border-radius: var(--radius-pildora); border: 2px solid var(--color-fondo); margin-left: -10px; }
.avatares i { background: repeating-linear-gradient(135deg, transparent 0 6px, var(--color-borde) 6px 7px), var(--color-apoyo); }
.avatares i:first-child { margin-left: 0; }
.avatares b { background: var(--color-marca); color: var(--color-texto-invertido); display: grid; place-items: center; font-size: 13px; }
.contacto { display: grid; gap: var(--space-3); }
.contacto li { display: grid; gap: 2px; }
.contacto span { font-size: var(--fs-etiqueta); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--color-acento-texto); }
.contacto a { font-family: var(--font-titulos); font-size: 22px; font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; justify-self: start; }
.contacto a:hover { color: var(--color-acento-texto); text-decoration-thickness: 2px; }

.seg { display: grid; grid-template-columns: 1fr 1fr; padding: var(--space-1); margin-bottom: var(--space-4); border-radius: var(--radius-pildora); background: var(--color-fondo); border: var(--borde-fino) solid var(--color-borde); }
.seg__btn { min-height: 44px; border: 0; border-radius: var(--radius-pildora); background: transparent; color: var(--color-texto); font-family: var(--font-texto); font-size: var(--fs-texto-chico); font-weight: 700; cursor: pointer; transition: background-color var(--mov-micro), color var(--mov-micro); }
.seg__btn.is-active { background: var(--color-marca); color: var(--color-texto-invertido); }
.js .form { display: none; }
.js .form.is-active { display: grid; gap: var(--space-3); animation: aparece .4s var(--mov-curva); }
html:not(.js) .seg { display: none; }
html:not(.js) .form { display: grid; gap: var(--space-3); }
html:not(.js) .form + .form { margin-top: var(--space-6); padding-top: var(--space-5); border-top: var(--borde-fino) solid var(--color-borde); }
.form__title { font-size: 22px; }
.form__2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.campo-form { display: grid; gap: 6px; }
.campo-form label { font-size: 14px; font-weight: 700; }
.campo-form input[type="text"], .campo-form input[type="email"], .campo-form input[type="tel"], .campo-form select {
  width: 100%; min-height: 52px; padding: 0 var(--space-3);
  border-radius: var(--radius-chico); border: var(--borde-control) solid var(--color-borde-control);
  background: var(--color-superficie); color: var(--color-texto);
  font-family: var(--font-texto); font-size: 16px;
  transition: border-color var(--mov-micro);
}
.campo-form select {
  appearance: none; padding-right: var(--space-6);
  background-image: linear-gradient(45deg, transparent 50%, var(--color-texto) 50%), linear-gradient(135deg, var(--color-texto) 50%, transparent 50%);
  background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%;
  background-size: 6px 6px; background-repeat: no-repeat;
}
.campo-form input:focus, .campo-form select:focus { outline: var(--borde-foco) solid var(--color-marca); outline-offset: 2px; border-color: var(--color-marca); }
.campo-form.is-error input, .campo-form.is-error select { border-color: var(--color-error); }
.campo-form__err { display: flex; gap: 6px; align-items: flex-start; font-size: 13px; color: var(--color-error); }
.campo-form__err:empty { display: none; }
.campo-form__err::before { content: "!"; flex: none; width: 16px; height: 16px; margin-top: 1px; border-radius: var(--radius-pildora); background: var(--color-error); color: var(--color-superficie); font-size: 11px; font-weight: 700; line-height: 16px; text-align: center; }
.campo-form--check { grid-template-columns: 22px 1fr; gap: 10px; align-items: start; margin: var(--space-1) 0 var(--space-2); }
.campo-form--check input { width: 22px; height: 22px; margin: 0; accent-color: var(--color-marca); }
.campo-form--check label { font-weight: 400; }
.campo-form--check .campo-form__err { grid-column: 1 / -1; }
.form__ok { padding: 14px var(--space-3); border-radius: var(--radius-chico); background: var(--color-fondo); border: var(--borde-control) solid var(--color-exito); font-size: var(--fs-texto-chico); }
.form__ok b { color: var(--color-exito); }
.form__ok.is-error { border-color: var(--color-error); color: var(--color-error); }
.form[aria-busy="true"] button[type="submit"] { opacity: .6; cursor: progress; }
/* Campo trampa contra bots: fuera de pantalla, no con display:none, para que los bots sí lo llenen. */
.form__trampa { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- pie ---------- */
.pie { background: var(--color-marca-profundo); color: var(--color-texto-invertido-secundario); padding-top: var(--space-7); padding-bottom: var(--space-5); font-size: var(--fs-texto-chico); }
.pie__grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--space-6); }
.brand--pie { margin-bottom: var(--space-4); }
.brand--pie .brand__text strong { color: var(--color-texto-invertido); }
.brand--pie .brand__text span { color: var(--color-texto-invertido-secundario); }
.pie__rvoe { line-height: 1.7; }
.pie__h { font-family: var(--font-texto); font-size: var(--fs-etiqueta); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--color-acento); margin-bottom: var(--space-3); }
.pie__list { display: grid; gap: var(--space-2); }
.pie__list a { text-decoration: none; }
.pie__list a:hover { color: var(--color-texto-invertido); text-decoration: underline; }
.pie address { font-style: normal; line-height: 1.7; margin-bottom: var(--space-3); }
.pie .enlace-flecha { color: var(--color-acento); }
.pie__base { display: flex; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-6); padding-top: var(--space-4); border-top: var(--borde-fino) solid var(--color-marca); font-size: 13px; padding-right: calc(60px + var(--space-6)); }

/* ---------- WhatsApp flotante ---------- */
.wa {
  position: fixed; z-index: 40;
  right: max(var(--space-4), env(safe-area-inset-right)); bottom: max(var(--space-4), env(safe-area-inset-bottom));
  width: 60px; height: 60px; border-radius: var(--radius-pildora);
  display: grid; place-items: center;
  background: var(--color-marca); color: var(--color-acento);
  /* Borde lima: sin él, el botón se pierde sobre las secciones petróleo. */
  border: 2px solid var(--color-acento);
  box-shadow: var(--sombra-flotante);
  transition: transform var(--mov-micro);
}
.wa:hover { transform: scale(1.06); }
.wa svg { width: 30px; height: 30px; fill: currentColor; }
.wa:focus-visible { outline-color: var(--color-marca); }

/* =====================================================================
   Responsive: después de las reglas base que modifica.
   Tablet 600–1023 · móvil < 600 (bloque 3).
   ===================================================================== */
@media (max-width: 1180px) {
  .nav__links { gap: var(--space-3); }
  .logros { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1023px) {
  :root {
    --medianil: 20px; --margen: 32px;
    --fs-h1: 52px; --fs-h2: 38px;
  }
  .nav__links, .nav__cta { display: none; }
  .nav { background: var(--color-fondo); box-shadow: var(--sombra-flotante); }
  .nav__inner { min-height: 68px; }
  .nav__toggle {
    display: grid; place-content: center; gap: 6px; width: 44px; height: 44px;
    border: 0; border-radius: var(--radius-chico); background: var(--color-marca); cursor: pointer;
  }
  .nav__toggle span { display: block; width: 18px; height: 2px; border-radius: var(--radius-pildora); background: var(--color-texto-invertido); transition: transform .3s var(--mov-curva); }
  .nav__toggle[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
  .nav__toggle[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }
  .nav__mobile { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-2) var(--margen) var(--space-4); background: var(--color-fondo); border-top: var(--borde-fino) solid var(--color-borde); }
  .nav__mobile[hidden] { display: none; }
  .nav__mobile a:not(.btn) { padding: 14px 0; font-family: var(--font-titulos); font-size: 22px; font-weight: 600; text-decoration: none; border-bottom: var(--borde-fino) solid var(--color-borde); }
  .nav__mobile .btn { margin-top: var(--space-3); }

  .hero__stage { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero__fig { grid-column: 1 / -1; order: -1; aspect-ratio: 4 / 3; }
  .ph--figura { width: 46%; }
  .hero__side { grid-column: span 1; padding-bottom: var(--space-5); padding-top: var(--space-5); }
  .hero__side--r { text-align: left; }

  .programa--m, .programa--e, .ruta__copy, .ruta__card, .dos__a, .dos__b, .campo__media, .campo__copy,
  .plan__tabs, .plan__panels, .faq__head, .faq__list, .folletos__copy, .folletos__card,
  .v-7, .v-5, .v-6, .testimonio--grande, .testimonio--pendiente { grid-column: 1 / -1; }
  .v-4 { grid-column: span 6; }
  /* Con 2 columnas, la tercera tarjeta de la fila (la lima) ocupa todo el ancho para no quedar huérfana. */
  .v-4.tarjeta--lima { grid-column: 1 / -1; }
  .testimonio--grande { grid-row: auto; min-height: 420px; }
  .faq__head, .plan__tabs { position: static; }
  .seccion__head--dos > div, .seccion__head--dos .seccion__lead { grid-column: 1 / -1; }
  .h2-linea { max-width: 20ch; }
  .plan__tabs { display: flex; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--margen)); padding: 0 var(--margen); }
  .plan__tabs::-webkit-scrollbar { display: none; }
  .plan__tab { flex: none; }
  .docentes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pie__grid { grid-template-columns: 1fr 1fr; }
  .pie__grid > div:first-child { grid-column: 1 / -1; }
}

@media (max-width: 599px) {
  :root {
    --medianil: 16px; --margen: 20px;
    --seccion: var(--space-7); --seccion-titulo: var(--space-5);
    --fs-h1: 40px; --lh-h1: 1.05;
    --fs-h2: 32px; --lh-h2: 1.1;
    --fs-h3: 22px; --lh-h3: 1.25;
    --fs-texto: 17px; --fs-texto-chico: 14px; --fs-etiqueta: 12px;
  }
  .hero { padding-top: calc(var(--nav-h) + var(--space-5)); }
  .hero__actions { width: 100%; }
  .hero__actions .btn { width: 100%; }
  .hero__fig { aspect-ratio: 1 / 1; }
  .ph--figura { width: 66%; }
  .hero__stage { gap: var(--space-4) var(--medianil); }
  .hero__side { gap: var(--space-4); padding-top: 0; }
  .dato strong { font-size: 32px; }
  .franja__list { flex-direction: column; }
  .tarjeta, .folletos__card, .docente { padding: var(--space-4); }
  .programa .btn { align-self: stretch; white-space: normal; text-align: center; }
  .v-4 { grid-column: 1 / -1; }
  .logros { grid-template-columns: 1fr; }
  .docentes { grid-template-columns: 1fr; }
  .form__2 { grid-template-columns: 1fr; }
  .testimonio--grande { min-height: 380px; }
  .testimonio--grande .testimonio__cita { font-size: 24px; }
  .faq__list summary { font-size: 18px; }
  .faq__list details p { padding-right: 0; }
  .pie__grid { grid-template-columns: 1fr; }
  .pie__base { flex-direction: column; }
  .ruta__val { font-size: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .hero__in { animation: aparece .2s linear both; }
  .js .reveal { transform: none; transition: opacity .2s linear; transition-delay: 0s; }
  .js .programa--m .semestres i { transform: none; transition: none; }
}

/* =====================================================================
   VERSIÓN B (index-b.html) · ajustes de dirección, 20 oct 2026.
   Solo agrega clases nuevas; no cambia la versión A.
   ===================================================================== */
.js .form.form--fijo { display: grid; gap: var(--space-3); animation: none; }

/* Hero: ruta en dos etapas y becas con peso */
.etapa { display: grid; gap: 2px; padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4); border-radius: var(--radius-tarjeta); position: relative; }
.etapa--e { background: var(--color-apoyo); }
.etapa--m { background: var(--color-marca); color: var(--color-texto-invertido); }
.etapa--m span { color: var(--color-texto-invertido-secundario); }
.etapa strong { font-family: var(--font-titulos); font-size: var(--fs-h3); line-height: 1.1; }
.etapa span { font-size: 14px; line-height: 1.4; }
.etapa .etapa__n { font-size: var(--fs-etiqueta); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.etapa--m .etapa__n { color: var(--color-acento); }
.becas-card { display: grid; gap: var(--space-2); text-align: left; padding: var(--space-4); border-radius: var(--radius-tarjeta); background: var(--color-acento); color: var(--color-texto); text-decoration: none; transition: background-color var(--mov-micro); }
.becas-card:hover { background: var(--color-acento-hover); }
.becas-card .etiqueta { color: var(--color-texto); }
.becas-card strong { font-family: var(--font-titulos); font-size: var(--fs-h3); line-height: 1.15; }
.becas-card > span:not(.etiqueta):not(.enlace-flecha) { font-size: 14px; }
.version-b .hero__badge strong { font-size: 15px; }

/* Programas: Especialidad 5 + Maestría con progreso 7 */
.programa--e-b { grid-column: span 5; }
.programa--m-b { grid-column: span 7; }
.programa--e-b .btn, .programa--m-b .btn { margin-top: auto; align-self: flex-start; }
.progreso { background: var(--color-superficie); color: var(--color-texto); border-radius: var(--radius-chico); padding: var(--space-4); display: grid; gap: var(--space-3); }
.progreso__top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); }
.progreso__lbl { font-size: var(--fs-texto-chico); font-weight: 700; }
.progreso__val { font-family: var(--font-titulos); font-size: 40px; line-height: 1; font-weight: 700; font-variant-numeric: tabular-nums; }
.progreso__val small { font-size: 18px; font-weight: 600; }
.progreso__barra { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-1); }
.progreso__barra i { height: 14px; border-radius: var(--radius-pildora); background: var(--color-borde); transition: background-color .5s var(--mov-curva); }
.progreso__barra i.is-on:nth-child(-n+2) { background: var(--color-apoyo); }
.progreso__barra i.is-on:nth-child(n+3) { background: var(--color-marca); }
.progreso__range { width: 100%; margin: 0; accent-color: var(--color-marca); cursor: pointer; }
.progreso__eje { display: grid; grid-template-columns: 1fr 1fr; font-size: 13px; color: var(--color-texto-secundario); }
.progreso__eje span:last-child { text-align: right; }
.progreso__res { font-size: var(--fs-texto-chico); }
.progreso__res strong { font-family: var(--font-titulos); font-size: 22px; display: block; }
.progreso__sub { font-size: 14px; color: var(--color-texto-secundario); margin-top: calc(-1 * var(--space-2)); }

/* ¿Es para ti? con foto de fondo y velo */
.seccion--foto { position: relative; overflow: hidden; color: var(--color-texto-invertido); }
.seccion--foto > .ph--fondo { z-index: 0; }
.seccion--foto::after { content: ""; position: absolute; inset: 0; background: var(--color-marca); opacity: .88; z-index: 0; }
.seccion--foto .wrap { position: relative; z-index: 1; }
.seccion--foto .etiqueta { color: var(--color-acento); }
.seccion--foto .seccion__lead { color: var(--color-texto-invertido-secundario); }
.seccion--foto .nota { background: var(--color-marca-profundo); border-color: var(--color-marca-profundo); color: var(--color-texto-invertido); }
.dos--foto .dos__b { color: var(--color-texto); }

/* Slider de generaciones */
.slider { display: grid; gap: var(--space-3); }
.slider__track { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: var(--radius-tarjeta); }
.slider__track::-webkit-scrollbar { display: none; }
.slider__slide { scroll-snap-align: start; border-radius: 0; }
.slider__nav { display: flex; align-items: center; gap: var(--space-3); }
.slider__btn { width: 44px; height: 44px; border-radius: var(--radius-pildora); border: var(--borde-control) solid var(--color-marca); background: transparent; color: var(--color-texto); font-family: var(--font-texto); font-size: 18px; cursor: pointer; }
.slider__btn:hover { background: var(--color-apoyo); border-color: var(--color-apoyo); }
.slider__count { font-size: var(--fs-texto-chico); font-weight: 700; font-variant-numeric: tabular-nums; }

/* Plan: grado marcado sobre la lista */
.grado { display: inline-flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); padding: 6px 14px; border-radius: var(--radius-pildora); font-size: var(--fs-etiqueta); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.grado--e { background: var(--color-apoyo); color: var(--color-texto); }
.grado--m { background: var(--color-acento); color: var(--color-texto); }
.version-b .plan__panel li:first-of-type { border-top: var(--borde-fino) solid var(--color-texto-invertido-secundario); padding-top: 18px; }
.plan__tab--m:not(.is-active) small { color: var(--color-apoyo); }

/* Ventajas B: 5+4+3 / 4+4+4 / 4+8 */
.v-3 { grid-column: span 3; }
.v-8 { grid-column: span 8; }
.tarjeta--foto.v-4, .tarjeta--foto.v-8 { min-height: 280px; }
.tarjeta--foto.v-4::after, .tarjeta--foto.v-8::after { display: none; }

/* Docentes con foto */
.docente__foto { width: 120px; height: 120px; border-radius: var(--radius-pildora); object-fit: cover; object-position: center 30%; }

/* Testimonios con foto */
.testimonios--b .t-grande { grid-column: span 4; min-height: 460px; }
.testimonios--b .testimonio__cita { font-size: 22px; color: var(--color-texto-invertido); }
.testimonios--b .testimonio__cita::before { color: var(--color-acento); }
.testimonios--b footer { color: var(--color-texto-invertido-secundario); font-size: 14px; }

/* Formulario de inscripción */
.beneficios { display: grid; gap: var(--space-2); }
.beneficios li { display: flex; gap: 10px; align-items: center; font-weight: 700; }
.beneficios li::before { content: "✓"; width: 24px; height: 24px; flex: none; border-radius: var(--radius-pildora); background: var(--color-acento); display: grid; place-items: center; font-size: 13px; }
.campo-form--programa { border: 0; padding: 0; margin: 0; }
.campo-form--programa legend { font-size: 14px; font-weight: 700; margin-bottom: 6px; padding: 0; }
.opciones { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.opcion { display: flex; gap: var(--space-2); align-items: center; padding: 14px var(--space-3); border-radius: var(--radius-chico); border: var(--borde-control) solid var(--color-borde-control); background: var(--color-superficie); cursor: pointer; transition: border-color var(--mov-micro), background-color var(--mov-micro); }
.opcion input { width: 20px; height: 20px; margin: 0; accent-color: var(--color-marca); }
.opcion span { display: grid; line-height: 1.2; }
.opcion small { font-size: 13px; color: var(--color-texto-secundario); }
.opcion:has(input:checked) { border-color: var(--color-marca); background: var(--color-apoyo); }
.opcion:has(input:focus-visible) { outline: var(--borde-foco) solid var(--color-marca); outline-offset: 2px; }
.campo-form--programa.is-error .opcion { border-color: var(--color-error); }

/* Folleto: formulario ligero en una línea */
.folleto-b { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--medianil); align-items: end; padding: var(--space-5); border-radius: var(--radius-tarjeta); border: var(--borde-fino) solid var(--color-borde); background: var(--color-superficie); }
.folleto-b > div { grid-column: span 4; display: grid; gap: var(--space-2); }
.folleto-b .form--linea { grid-column: span 8; grid-template-columns: 1fr 1fr 1fr auto; align-items: start; }
.form--linea__priv { grid-column: 1 / -1; order: 5; }
.form--linea .form__ok { grid-column: 1 / -1; }
.form--linea .btn { margin-top: 26px; }
.version-b #folleto { padding-top: 0; }

@media (max-width: 1023px) {
  .programa--e-b, .programa--m-b, .folleto-b > div, .folleto-b .form--linea { grid-column: 1 / -1; }
  .hero__side .etapa, .becas-card { text-align: left; }
  .v-3, .v-8 { grid-column: 1 / -1; }
  .testimonios--b .t-grande { grid-column: 1 / -1; min-height: 380px; }
  .folleto-b .form--linea { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 599px) {
  .opciones, .folleto-b .form--linea { grid-template-columns: 1fr; }
  .version-b .hero__stage { grid-template-columns: minmax(0, 1fr); }
  .version-b .hero__side { grid-column: 1 / -1; padding-top: 0; }
  .form--linea__priv { order: 0; }
  .form--linea .btn { margin-top: 0; }
  .progreso { padding: var(--space-3); }
}

/* Hero B · 20 oct: foto real, H1 con los nombres de los programas y ruta en dos años. */
.hero__programas { display: block; margin-bottom: var(--space-3); font-family: var(--font-texto); font-size: var(--fs-texto); font-weight: 700; letter-spacing: 0; line-height: 1.3; color: var(--color-acento-texto); }
/* Retícula abierta: título en 2 renglones y texto más ancho para bajar la altura del bloque. */
.hero--b { padding-top: calc(var(--nav-h) + var(--space-5)); }
.hero--b .hero__head { gap: var(--space-3); }
.hero--b .hero__title { max-width: 30ch; }
.hero--b .hero__lead { max-width: 84ch; }
.hero--b .hero__actions { margin-top: var(--space-2); }
.hero--b .hero__stage { margin-top: var(--space-5); }
.hero__fig--foto { aspect-ratio: auto; height: 640px; max-height: none; }
.hero__img { position: relative; z-index: 1; height: 100%; width: auto; max-width: none; align-self: flex-end; }
.hero__fig--foto .hero__badge { z-index: 2; }
.ruta-hero { gap: 0; }
.ruta-hero__paso { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) 0 var(--space-2) var(--space-5); font-size: 13px; font-weight: 700; color: var(--color-acento-texto); position: relative; }
.ruta-hero__paso::before { content: ""; position: absolute; left: var(--space-4); top: 0; bottom: 0; border-left: 2px dotted var(--color-borde-control); }
.ruta-hero__paso span { padding-left: var(--space-2); }
@media (max-width: 1023px) {
  .hero__fig--foto { height: 540px; }
}
@media (max-width: 599px) {
  .hero__fig--foto { height: 440px; }
  .hero__programas { font-size: 15px; }
}

/* Color por programa en la versión B: Especialidad = cielo, Maestría = lima. */
.version-b .etapa--e { background: var(--color-especialidad); }
.version-b .etapa--m { background: var(--color-maestria); color: var(--color-texto); }
.version-b .etapa--m span, .version-b .etapa--m .etapa__n { color: var(--color-texto); }
.etapa__nombre { font-size: 13px; font-weight: 700; margin-top: -2px; }
.ruta-hero__paso { padding-left: var(--space-3); }
.ruta-hero__paso::before { left: var(--space-5); }
.ruta-hero__pill { position: relative; z-index: 1; display: inline-block; padding: 6px 12px; border-radius: var(--radius-pildora); background: var(--color-marca); color: var(--color-texto-invertido); font-size: 13px; font-weight: 400; line-height: 1.3; }
.ruta-hero__pill strong { color: var(--color-maestria); }
.version-b .hero__lead { max-width: 64ch; font-size: calc(var(--fs-texto) + 1px); }
/* Tarjetas de programa: franja superior con el color de cada uno. */
.version-b .programa--m-b { border-top: 10px solid var(--color-maestria); }
.version-b .programa--m-b > .etiqueta { color: var(--color-maestria); }
/* Barra de progreso: Maestría en lima con contorno petróleo para que se distinga sobre blanco. */
.progreso__barra i.is-on:nth-child(n+3) { background: var(--color-maestria); outline: var(--borde-control) solid var(--color-marca); outline-offset: calc(-1 * var(--borde-control)); }
.progreso__barra i.is-on:nth-child(-n+2) { background: var(--color-especialidad); }
/* Plan: pestaña activa con el color de su programa. */
.version-b .plan__tab small { color: var(--color-especialidad); }
.version-b .plan__tab--m small { color: var(--color-maestria); }
.version-b .plan__tab.is-active { background: var(--color-especialidad); border-color: var(--color-especialidad); }
.version-b .plan__tab--m.is-active { background: var(--color-maestria); border-color: var(--color-maestria); }
.version-b .plan__tab.is-active small { color: var(--color-texto); }
.grado--e { background: var(--color-especialidad); }
.grado--m { background: var(--color-maestria); }

/* Hero B en dos columnas (20 oct): todo el bloque cabe en la primera vista.
   La altura de la foto se calcula con la pantalla (svh) para no empujar el contenido. */
.hero--b { padding-top: calc(var(--nav-h) + var(--space-4)); padding-bottom: var(--space-5); }
.hero-b { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--medianil); align-items: center; }
.hero-b__copy { grid-column: 1 / span 6; display: grid; gap: var(--space-3); align-content: center; }
.hero-b .hero__title { font-size: clamp(40px, 4.2vw, 60px); max-width: 16ch; text-align: left; }
.hero-b .hero__lead { max-width: 52ch; font-size: var(--fs-texto); text-align: left; }
.hero-b .hero__actions { justify-content: flex-start; margin-top: 0; }
.hero-b .ruta-hero { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2) var(--space-3); margin-top: var(--space-2); }
.hero-b .etapa { padding: 14px var(--space-3); gap: 0; }
.hero-b .etapa strong { font-size: 22px; }
.hero-b .etapa span { font-size: 13px; }
.hero-b .ruta-hero__paso { grid-column: 1 / -1; padding: 0; }
.hero-b .ruta-hero__paso::before { display: none; }
.hero-b__fig {
  grid-column: 7 / span 6; position: relative; margin: 0;
  height: clamp(420px, calc(100svh - var(--nav-h) - var(--space-4) - var(--space-5)), 680px);
  border-radius: var(--forma-arco); border-bottom-left-radius: var(--radius-tarjeta); border-bottom-right-radius: var(--radius-tarjeta);
  background: var(--color-marca); overflow: hidden;
  display: flex; align-items: flex-end; justify-content: center;
}
.hero-b__fig .hero__disc { width: 72%; bottom: -16%; }
.hero-b__fig .hero__img { position: relative; z-index: 1; height: 94%; width: auto; max-width: none; }
.hero-b__fig .hero__badge { z-index: 2; left: var(--space-4); bottom: var(--space-4); }
.becas-card--flota { position: absolute; z-index: 2; right: var(--space-4); bottom: var(--space-4); width: min(260px, 42%); padding: var(--space-3); gap: 4px; }
.becas-card--flota strong { font-size: 19px; }
.becas-card--flota > span:not(.etiqueta):not(.enlace-flecha) { font-size: 13px; }

@media (max-width: 1023px) {
  .hero-b__copy, .hero-b__fig { grid-column: 1 / -1; }
  .hero-b__fig { height: 520px; }
  .hero-b .hero__title { max-width: 18ch; }
}
@media (max-width: 599px) {
  .hero-b .hero__actions .btn { width: 100%; }
  .hero-b .ruta-hero { grid-template-columns: 1fr 1fr; }
  .hero-b .etapa__nombre, .hero-b .etapa > span:last-child { display: none; }
  .hero-b__fig { height: 460px; }
  .becas-card--flota { width: 58%; }
  .hero-b__fig .hero__badge { bottom: auto; top: var(--space-4); }
}

/* Hero B centrado (20 oct): encabezado compacto arriba y 3 + 6 + 3 abajo.
   La foto toma la altura que queda en la pantalla (svh), así todo cabe en la primera vista. */
.hero--c { padding-top: calc(var(--nav-h) + var(--space-4)); padding-bottom: 0; }
.hero--c .hero__head { gap: var(--space-3); }
.hero--c .hero__title { font-size: clamp(40px, 4.2vw, 60px); max-width: 26ch; }
.hero--c .hero__lead { max-width: 64ch; }
.hero--c .hero__actions { margin-top: 0; }
.hero-c__stage { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--medianil); align-items: center; margin-top: var(--space-4); }
.hero-c__ruta { grid-column: 1 / span 3; display: grid; gap: 0; margin-bottom: var(--space-4); }
.hero-c__ruta .etapa { padding: 14px var(--space-3); gap: 0; }
.hero-c__ruta .etapa strong { font-size: 22px; }
.hero-c__ruta .etapa span { font-size: 13px; }
.hero-c__ruta .ruta-hero__paso { padding: var(--space-2) 0 var(--space-2) var(--space-3); }
.hero-c__ruta .ruta-hero__paso::before { left: var(--space-5); }
.hero-c__fig {
  grid-column: 4 / span 6; position: relative; margin: 0;
  height: clamp(320px, calc(100svh - var(--nav-h) - 380px), 560px);
  border-radius: var(--forma-arco); border-bottom-left-radius: 0; border-bottom-right-radius: 0;
  background: var(--color-marca); overflow: hidden; display: flex; align-items: flex-end; justify-content: center;
}
.hero-c__fig .hero__disc { width: 62%; bottom: -22%; }
.hero-c__fig .hero__img { position: relative; z-index: 1; height: 96%; width: auto; max-width: none; }
.hero-c__fig .hero__badge { z-index: 2; }
.hero-c__lado { grid-column: 10 / span 3; margin-bottom: var(--space-4); }
/* La foto se asienta sobre la franja: sin hueco marfil debajo. */
.hero-c__fig { align-self: end; }

@media (max-width: 1023px) {
  .hero-c__stage { grid-template-columns: 1fr 1fr; }
  .hero-c__ruta { grid-column: 1 / -1; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: var(--space-2); }
  .hero-c__ruta .ruta-hero__paso { padding: 0; align-self: center; }
  .hero-c__ruta .ruta-hero__paso::before { display: none; }
  .hero-c__fig { grid-column: 1 / -1; height: 480px; }
  .hero-c__lado { grid-column: 1 / -1; }
}
@media (max-width: 599px) {
  .hero--c .hero__actions .btn { width: 100%; }
  /* Móvil: apilado en orden de lectura — Especialidad, «¿Sigues?», Maestría. */
  .hero-c__ruta { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
  .hero-c__ruta .ruta-hero__paso { justify-self: center; }
  .hero-c__ruta .etapa { padding: 10px var(--space-3); }
  .hero-c__ruta .etapa__nombre, .hero-c__ruta .etapa > span:last-child { display: none; }
  .hero-c__fig { height: 420px; }
}

@media (max-width: 1023px) {
  .hero-c__ruta, .hero-c__lado { margin-bottom: 0; }
  /* En tablet y móvil la tarjeta de becas cierra el hero: recupera el aire inferior. */
  .hero--c { padding-bottom: var(--space-4); }
}

/* Un plan, dos salidas (21 oct): dos columnas con los mismos encabezados y colores que la ruta del hero. */
.anios { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--medianil); }
.anio { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5); border-radius: var(--radius-tarjeta); }
.anio--e { background: var(--color-especialidad); color: var(--color-texto); }
.anio--m { background: var(--color-maestria); color: var(--color-texto); }
.anio__n { font-size: var(--fs-etiqueta); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.anio h3 { font-size: var(--fs-h2); line-height: 1.05; margin-bottom: var(--space-3); }
.anio h3 span { display: block; margin-top: var(--space-1); font-family: var(--font-texto); font-size: var(--fs-texto-chico); font-weight: 700; line-height: 1.4; }
.anio__lbl { font-size: var(--fs-etiqueta); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin-top: var(--space-2); }
.anio__lista { display: grid; gap: var(--space-2); }
.anio__lista li { position: relative; padding-left: 32px; }
.anio__lista li::before { content: "✓"; position: absolute; left: 0; top: 1px; width: 22px; height: 22px; border-radius: var(--radius-pildora); display: grid; place-items: center; font-size: 12px; font-weight: 700; background: var(--color-marca); color: var(--color-especialidad); }
.anio--m .anio__lista li::before { color: var(--color-maestria); }
.anio__campo { font-size: var(--fs-texto-chico); }
.anio__obtienes { margin-top: auto; padding-top: var(--space-3); border-top: var(--borde-control) solid var(--color-marca); font-weight: 700; }
.anio__obtienes span { display: block; font-size: var(--fs-etiqueta); letter-spacing: .08em; text-transform: uppercase; }
.anios__cta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3) var(--space-5); margin-top: var(--space-5); }

@media (max-width: 1023px) {
  .anios { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 599px) {
  .anio { padding: var(--space-4); }
  .anios__cta .btn { width: 100%; justify-content: center; }
}
.anios__alt { text-decoration: underline; text-underline-offset: 3px; }

/* Plan de estudios (21 oct): barra fija bajo el menú que sigue la lectura de los semestres apilados.
   main.js (initSemBarra) escribe --f (0 a 1) en cada segmento y marca el semestre actual. */
.plan-v { --barra-h: 104px; position: relative; }
.sem-barra { position: sticky; top: var(--nav-h); z-index: 5; display: grid; gap: var(--space-1); padding: var(--space-3) 0; background: var(--color-marca); }
.sem-barra__segs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-1); }
/* Los segmentos nunca mezclan fondo y texto: pendiente (oscuro), actual (contorno + línea de avance), leído (lleno). */
.sem-barra__seg { --f: 0; --c: var(--color-especialidad); position: relative; display: flex; align-items: center; justify-content: center; height: 44px; border-radius: var(--radius-pildora); background: var(--color-marca-profundo); color: var(--color-texto-invertido); font-size: var(--fs-texto-chico); font-weight: 700; text-decoration: none; overflow: hidden; transition: background-color .3s var(--mov-curva), color .3s var(--mov-curva); }
.sem-barra__seg--m { --c: var(--color-maestria); }
.sem-barra__seg::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--c); transform: scaleX(var(--f)); transform-origin: left center; transition: transform .2s linear; }
.sem-barra__seg.is-actual { outline: var(--borde-control) solid var(--c); outline-offset: calc(-1 * var(--borde-control)); }
.sem-barra__seg.is-lleno { background: var(--c); color: var(--color-texto); }
.sem-barra__seg.is-lleno::after { display: none; }
.sem-barra__corto { display: none; }
.sem-barra__anios { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-1); font-size: var(--fs-etiqueta); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.sem-barra__anio { display: flex; align-items: center; gap: var(--space-2); }
.sem-barra__anio::before { content: ""; width: 10px; height: 10px; border-radius: var(--radius-pildora); background: currentColor; }
.sem-barra__anio--e { color: var(--color-especialidad); }
.sem-barra__anio--m { color: var(--color-maestria); }

.sems { display: grid; }
.sem { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--medianil); padding: var(--space-6) 0; border-top: var(--borde-fino) solid var(--color-texto-invertido-secundario); scroll-margin-top: calc(var(--nav-h) + var(--barra-h) + var(--space-3)); }
.sem:first-child { border-top: 0; }
.sem__head { grid-column: span 4; display: grid; gap: var(--space-2); align-content: start; justify-items: start; }
.sem__num { font-family: var(--font-titulos); font-size: 96px; line-height: .9; font-weight: 700; }
.sem--e .sem__num { color: var(--color-especialidad); }
.sem--m .sem__num { color: var(--color-maestria); }
.sem__head h3 { font-size: var(--fs-h3); }
.sem__head .grado { color: var(--color-texto); }
.sem__lista { grid-column: 6 / span 7; display: grid; }
.sem__lista li { padding: var(--space-3) 0; border-bottom: var(--borde-fino) solid var(--color-texto-invertido-secundario); font-size: calc(var(--fs-texto) + 1px); }
.sem__lista li:last-child { border-bottom: 0; }
.sem-hito { display: flex; align-items: center; gap: var(--space-4); margin: 0 0 var(--space-6); padding: var(--space-4) var(--space-5); border-radius: var(--radius-tarjeta); color: var(--color-texto); }
.sem-hito--e { background: var(--color-especialidad); }
.sem-hito--m { background: var(--color-maestria); margin-bottom: 0; }
.sem-hito__marco { flex: none; display: grid; place-items: center; width: 72px; height: 72px; border-radius: var(--radius-pildora); background: var(--color-marca); color: var(--c, var(--color-especialidad)); }
.sem-hito--m .sem-hito__marco { color: var(--color-maestria); }
.sem-hito--e .sem-hito__marco { color: var(--color-especialidad); }
.sem-hito__ico { width: 40px; height: 40px; }
.sem-hito p { display: grid; gap: 2px; }
.sem-hito small { font-size: var(--fs-etiqueta); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.sem-hito strong { font-family: var(--font-titulos); font-size: var(--fs-h3); line-height: 1.15; }

@media (max-width: 1023px) {
  .sem__head, .sem__lista { grid-column: 1 / -1; }
  .sem__head { grid-template-columns: auto 1fr; align-items: end; column-gap: var(--space-3); }
  .sem__num { grid-row: span 2; font-size: 64px; }
}
@media (max-width: 599px) {
  .plan-v { --barra-h: 84px; }
  .sem-barra__lbl { display: none; }
  .sem-barra__corto { display: inline; }
  .sem-barra__seg { height: 36px; }
  .sem-barra__anios { font-size: 11px; letter-spacing: .04em; }
  .sem-hito { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
  .sem-hito__marco { width: 52px; height: 52px; }
  .sem-hito__ico { width: 30px; height: 30px; }
  .sem { padding: var(--space-5) 0; }
  .sem__lista li { font-size: var(--fs-texto); }
  .sem-hito { padding: var(--space-4); }
}
@media (prefers-reduced-motion: reduce) {
  .sem-barra__seg, .sem-barra__seg::after { transition: none; }
}

/* ¿Es para ti? (21 oct): foto real de fondo con velo lateral; el texto queda sobre la zona más densa (≥ 0.86). */
.seccion__fondo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 55% 40%; z-index: 0; }
.seccion--foto:has(.seccion__fondo)::after { background: var(--velo-lateral); opacity: 1; }
.seccion--foto .chips li { color: var(--color-texto); }
@media (max-width: 1023px) {
  .seccion--foto:has(.seccion__fondo)::after { background: var(--color-marca); opacity: .9; }
}

/* Perfil de egreso B (21 oct): escaneable. Ícono en círculo de color sobre la línea punteada, verbo grande y una línea de apoyo. */
.logros--b li { background: none; padding-top: 0; display: grid; gap: var(--space-1); align-content: start; }
.logros--b li::before { content: none; }
.logros--b li::after { top: 28px; left: 64px; }
.logro__ico { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: var(--space-3); border-radius: var(--radius-pildora); background: var(--punto); color: var(--tinta); }
.logro__ico svg { width: 26px; height: 26px; }
.logros--b strong { font-family: var(--font-titulos); font-size: var(--fs-h3); line-height: 1.15; font-weight: 700; }
.logro__txt { color: var(--color-texto-secundario); font-size: var(--fs-texto-chico); }
.logros--b li:nth-child(1) { --punto: var(--color-marca); --tinta: var(--color-texto-invertido); }
.logros--b li:nth-child(2) { --punto: var(--color-apoyo); --tinta: var(--color-texto); }
.logros--b li:nth-child(3) { --punto: var(--color-acento-texto); --tinta: var(--color-texto-invertido); }
.logros--b li:nth-child(4) { --punto: var(--color-acento-hover); --tinta: var(--color-texto); }
.logros--b li:nth-child(5) { --punto: var(--color-marca-profundo); --tinta: var(--color-texto-invertido); }
.slider__img { width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover; }
@media (max-width: 599px) {
  .logros--b li { grid-template-columns: 56px 1fr; column-gap: var(--space-3); }
  .logros--b .logro__ico { grid-row: span 2; margin-bottom: 0; }
  .logros--b li::after { display: none; }
}

/* Fotos reales en tarjetas (21 oct): cubren la tarjeta; el velo y el texto van encima. */
.tarjeta__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.tarjeta__img--egresada { object-position: 47% 30%; }
.tarjeta--foto .tarjeta__sobre { position: relative; z-index: 1; }
.slider__pausa { margin-left: auto; display: grid; place-items: center; }
.tarjeta__img--titulacion { object-position: 50% 30%; }
/* Folleto bajo Ventajas (21 oct): comparte fondo con Ventajas, así que solo lleva el aire inferior de esa sección. */
.folleto-b__titulo { font-size: var(--fs-h3); line-height: 1.2; font-weight: 700; }
.tarjeta__img--egresada2 { object-position: 55% 30%; }
.tarjeta__img--egresada3 { object-position: 44% 20%; }

/* Plan de estudios: cada materia con su número (01, 02…) en el color de su programa. */
.sem__lista { counter-reset: materia; }
.sem__lista li { counter-increment: materia; display: grid; grid-template-columns: 56px 1fr; align-items: baseline; }
.sem__lista li::before { content: counter(materia, decimal-leading-zero); font-family: var(--font-titulos); font-weight: 700; font-size: var(--fs-texto); }
.sem--e .sem__lista li::before { color: var(--color-especialidad); }
.sem--m .sem__lista li::before { color: var(--color-maestria); }

/* Testimonios: velo más denso detrás de la cita para que se lea sobre cualquier foto. */
.testimonios--b .tarjeta--foto::after { background: var(--velo-testimonio); }
.testimonios--b footer { color: var(--color-texto-invertido); }

/* Preguntas frecuentes: el contenido se abre y cierra con altura animada (main.js initFaq). */
.faq__list details p { overflow: hidden; }

@media (max-width: 599px) {
  .sem__lista li { grid-template-columns: 40px 1fr; }
  .anios__cta .btn { width: 100%; justify-content: center; }
}
/* Menú B: «Especialidad y Maestría» es largo; los enlaces no se parten en dos renglones. */
.nav__links a { white-space: nowrap; }

/* Móvil (21 oct): galería con aire equilibrado; docentes y testimonios en carrusel horizontal. */
@media (max-width: 599px) {
  .campo { margin-top: var(--space-6); row-gap: var(--space-5); }
  .docentes, .testimonios--b { display: grid; grid-template-columns: none; grid-auto-flow: column; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 calc(-1 * var(--margen)); padding: 0 var(--margen); scroll-padding: 0 var(--margen); gap: var(--space-3); }
  .docentes::-webkit-scrollbar, .testimonios--b::-webkit-scrollbar { display: none; }
  .docentes { grid-auto-columns: 84%; }
  .testimonios--b { grid-auto-columns: 100%; gap: var(--margen); }
  .docentes > li, .testimonios--b > figure { scroll-snap-align: start; }
  .testimonios--b .t-grande { grid-column: auto; }
  .js .docentes > .reveal, .js .testimonios--b > .reveal { opacity: 1; transform: none; }
}
.puntos { display: none; }
@media (max-width: 599px) {
  .puntos { display: flex; justify-content: center; gap: var(--space-2); margin-top: var(--space-4); }
  .puntos button { width: 10px; height: 10px; padding: 0; border: 0; border-radius: var(--radius-pildora); background: var(--color-borde-control); cursor: pointer; transition: width .3s var(--mov-curva), background-color .3s; }
  .puntos button[aria-current="true"] { width: 28px; background: var(--color-marca); }
  /* Área táctil de 44px alrededor de cada punto. */
  .puntos button { position: relative; }
  .puntos button::after { content: ""; position: absolute; inset: -17px -8px; }
}

/* Logotipo del cliente (21 oct): PNG convertido a WebP con transparencia. */
.brand__logo { display: block; height: 48px; width: auto; }
.brand--pie .brand__logo { height: 64px; }
@media (max-width: 599px) {
  .brand__logo { height: 40px; }
}

/* Header definitivo (22 oct): logo y menú más grandes, a petición del cliente. */
.brand__logo { height: 64px; }
.nav__links a { font-size: 17px; }
.nav__cta { font-size: 16px; }
@media (max-width: 1180px) {
  .brand__logo { height: 56px; }
  .nav__links { gap: var(--space-3); }
  .nav__links a { font-size: 16px; }
}
@media (max-width: 599px) {
  .brand__logo { height: 48px; }
}

/* Hero definitivo (22 oct): 100 % Maestría; nombre de la escuela y RVOE destacados. */
.hero__escuela { font-family: var(--font-titulos); font-size: var(--fs-h3); font-weight: 600; color: var(--color-texto-secundario); }
.hero-c__izq { grid-column: 1 / span 3; margin-bottom: var(--space-4); }
.rvoe-card { display: grid; gap: var(--space-1); padding: var(--space-4); border-radius: var(--radius-tarjeta); background: var(--color-apoyo); color: var(--color-texto); text-align: left; }
.rvoe-card .etiqueta { color: var(--color-texto); }
.rvoe-card strong { font-family: var(--font-titulos); font-size: 30px; line-height: 1.1; }
.rvoe-card span:not(.etiqueta) { font-size: 15px; color: var(--color-texto-secundario); }
/* Tablet: RVOE y becas lado a lado, en la misma fila, para no estirar tarjetas a todo el ancho. */
@media (max-width: 1023px) {
  .hero-c__izq { grid-column: 1; grid-row: 1; margin-bottom: 0; }
  .hero-c__lado { grid-column: 2; grid-row: 1; }
  .hero-c__izq, .hero-c__lado { display: grid; align-self: stretch; }
  .rvoe-card, .hero-c__lado .becas-card { height: 100%; }
}
@media (max-width: 599px) {
  .hero-c__izq, .hero-c__lado { grid-column: 1 / -1; grid-row: auto; }
}
@media (max-width: 599px) {
  .hero__escuela { font-size: 18px; }
  .rvoe-card strong { font-size: 24px; }
}

/* Hero, opción 3 (22 oct): foto más baja en escritorio; en tablet y móvil la foto va primero
   y las tarjetas de RVOE y becas se montan sobre la base del arco. */
.hero-c__fig { height: clamp(300px, calc(100svh - var(--nav-h) - 440px), 480px); }
@media (max-width: 1023px) {
  .hero-c__fig { order: 1; height: 400px; }
  .hero-c__izq, .hero-c__lado { order: 2; grid-row: auto; position: relative; z-index: 3; margin-top: -110px; }
  .hero--c { padding-bottom: var(--space-5); }
}
@media (max-width: 599px) {
  .hero-c__fig { height: 330px; }
  .hero-c__lado { margin-top: 0; }
  .hero-c__izq { margin-top: -96px; }
}
/* H1: el nombre oficial completo + beneficio en un segundo nivel, para SEO y lectura. */
.hero__title-sub { display: block; font-size: .55em; line-height: 1.2; font-weight: 600; color: var(--color-texto-secundario); margin-top: var(--space-2); }

/* Franja de beneficios visible desde el primer pantallazo (22 oct): sube sobre la base de la foto
   y la foto se ajusta a la altura de la pantalla para que hero + franja quepan juntos. */
.franja { position: relative; z-index: 4; }
@media (min-width: 1024px) {
  .hero-c__fig { height: clamp(240px, calc(100svh - var(--nav-h) - 445px), 480px); }
  .hero--c + .franja { margin-top: -28px; }
  .hero--c .hero-c__izq, .hero--c .hero-c__lado { margin-bottom: var(--space-6); }
}

/* Nombre de la escuela en el hero (22 oct): píldora antes de la etiqueta; y «Avalada por…» destacado en la tarjeta del RVOE. */
.hero__escuela-pill { display: inline-block; margin: 0 var(--space-2) var(--space-1) 0; padding: 6px 14px; border-radius: var(--radius-pildora); background: var(--color-marca); color: var(--color-texto-invertido); letter-spacing: .06em; }
.rvoe-card .rvoe-card__aval { justify-self: start; margin-top: var(--space-2); padding: 6px 14px; border-radius: var(--radius-pildora); background: var(--color-superficie); color: var(--color-texto); font-weight: 700; font-size: 14px; }
@media (max-width: 599px) {
  .hero__escuela-pill { display: table; margin: 0 auto var(--space-2); }
}
/* Badge «Inscripciones abiertas» sobre la foto; en escritorio sube para no quedar bajo la franja. */
@media (min-width: 1024px) {
  .hero-c__fig .hero__badge { bottom: calc(var(--space-4) + 28px); }
}
@media (max-width: 1023px) {
  .hero-c__fig .hero__badge { top: auto; bottom: calc(110px + var(--space-3)); left: 50%; transform: translateX(-50%); text-align: center; white-space: nowrap; }
}
@media (max-width: 599px) {
  .hero-c__fig .hero__badge { bottom: calc(96px + var(--space-3)); }
}

/* Tarjetas laterales del hero (23 oct): más aire entre líneas y títulos a la medida de la columna. */
.hero-c__lado .becas-card, .rvoe-card { gap: var(--space-2); padding: var(--space-4); }
.hero-c__lado .becas-card strong { font-size: 24px; line-height: 1.2; }
.hero-c__lado .becas-card > span:not(.etiqueta):not(.enlace-flecha) { line-height: 1.5; }
.hero-c__lado .becas-card .enlace-flecha { margin-top: var(--space-2); }
/* «Avalada por»: recuadro de esquinas suaves (no píldora), etiqueta chica + nombre en negritas. */
.rvoe-card .rvoe-card__aval { display: grid; gap: 2px; justify-self: stretch; padding: 10px 14px; border-radius: var(--radius-chico); line-height: 1.3; font-size: 15px; }
.rvoe-card__aval small { font-size: 12px; font-weight: 400; color: var(--color-texto-secundario); letter-spacing: .04em; }

/* Sello institucional sobre el H1 (23 oct): más grande, en azul profundo (no compite con el título)
   y con filetes en Dynamic Blue (decorativos, no texto). */
.hero--c .hero__sello { display: inline-flex; align-items: center; gap: var(--space-3); font-size: 16px; letter-spacing: .1em; color: var(--color-marca-profundo); }
.hero__sello::before, .hero__sello::after { content: ""; width: 40px; height: 2px; border-radius: var(--radius-pildora); background: var(--color-borde-control); }
@media (max-width: 599px) {
  .hero--c .hero__sello { font-size: 12px; letter-spacing: .05em; white-space: nowrap; }
  .hero__sello::before, .hero__sello::after { display: none; }
}
/* Íconos outline junto a las etiquetas de las tarjetas del hero; sello de vuelta al verde legible. */
.etiqueta--ico { display: inline-flex; align-items: center; gap: var(--space-2); }
.etiqueta__ico { width: 22px; height: 22px; flex: none; }
.hero--c .hero__sello { color: var(--color-acento-texto); }

/* Presentación de la Maestría (23 oct): texto con el objetivo oficial + datos clave con íconos. */
.presenta { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--medianil); align-items: center; }
.presenta__texto { grid-column: span 7; display: grid; gap: var(--space-4); }
.presenta__lead { font-size: calc(var(--fs-texto) + 1px); color: var(--color-texto-secundario); max-width: 62ch; }
.presenta__cta { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.presenta__datos { grid-column: 9 / span 4; display: grid; gap: var(--space-3); }
.presenta__datos li { display: grid; grid-template-columns: 48px 1fr; gap: var(--space-3); align-items: center; padding: var(--space-3); border-radius: var(--radius-tarjeta); background: var(--color-superficie); border: var(--borde-fino) solid var(--color-borde); }
.presenta__ico { display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--radius-pildora); background: var(--color-apoyo); color: var(--color-marca); }
.presenta__ico svg { width: 24px; height: 24px; }
.presenta__datos strong { display: block; font-family: var(--font-titulos); font-size: 19px; line-height: 1.2; }
.presenta__datos span:not(.presenta__ico) { font-size: 15px; color: var(--color-texto-secundario); }
@media (max-width: 1023px) {
  .presenta__texto, .presenta__datos { grid-column: 1 / -1; }
  .presenta__datos { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 599px) {
  .presenta__datos { grid-template-columns: 1fr; }
  .presenta__cta .btn { width: 100%; justify-content: center; }
}

/* Énfasis en texto corrido (23 oct): ideas clave en negritas y en el color de texto principal. */
p strong { font-weight: 700; color: var(--color-texto); }
.seccion--petroleo p strong, .seccion--foto p strong, .tarjeta--petroleo p strong { color: var(--color-texto-invertido); }
/* Presentación: el título usa todo el ancho de su columna. */
.presenta h2 { max-width: 22ch; }
/* Frase clave en títulos (23 oct): verde seco, 6.4:1 sobre el fondo. Una sola por título. */
.resalta { color: var(--color-acento-texto); }
/* Opción 3 (prueba): marcatextos lima detrás de la frase clave; el texto conserva el azul. */
.resalta { color: inherit; background: linear-gradient(transparent 58%, var(--color-acento) 58%, var(--color-acento) 92%, transparent 92%); padding: 0; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
/* Viñeta de la franja (23 oct): triángulo de esquinas redondeadas, eco del logotipo. */
.franja__list li::before { width: 12px; height: 12px; border-radius: 0; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.6 1.1C1.8.6.8 1.2.8 2.1v7.8c0 .9 1 1.5 1.8 1l6.8-3.9c.8-.5.8-1.6 0-2Z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.6 1.1C1.8.6.8 1.2.8 2.1v7.8c0 .9 1 1.5 1.8 1l6.8-3.9c.8-.5.8-1.6 0-2Z'/%3E%3C/svg%3E") center / contain no-repeat; }
.presenta__datos span strong { color: var(--color-texto); }
.presenta__datos span strong { font-weight: 700; }
/* El «RVOE» en negritas dentro del texto de apoyo: en línea y con la fuente de texto, no como título. */
.presenta__datos span strong { display: inline; font-family: var(--font-texto); font-size: inherit; line-height: inherit; }

/* ¿Es para ti? (23 oct): dos perfiles de ingreso con el mismo peso y distinto color. */
.perfiles { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin-top: var(--space-2); }
.perfil { display: grid; align-content: start; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-tarjeta); color: var(--color-texto); }
.perfil--afin { background: var(--color-apoyo); }
.perfil--otra { background: var(--color-acento); }
.perfil__n { font-family: var(--font-titulos); font-size: 20px; font-weight: 700; line-height: 1.2; }
.perfil p:not(.perfil__n) { font-size: 17px; line-height: 1.5; }
.seccion--foto .perfil p strong { color: var(--color-texto); }
.perfil .chips li { background: var(--color-superficie); color: var(--color-texto); }
@media (max-width: 599px) {
  .perfiles { grid-template-columns: 1fr; }
}
.dos__a > .perfil--otra { margin-top: var(--space-2); }
/* Otra licenciatura, versión ligera (23 oct): borde lima y fondo translúcido sobre la foto; una sola frase. */
.otra-lic { display: flex; align-items: flex-start; gap: var(--space-2); margin-top: var(--space-2); padding: 12px var(--space-3); border-radius: var(--radius-chico); border: var(--borde-control) solid var(--color-acento); background: var(--color-acento-velo); font-size: var(--fs-texto-chico); line-height: 1.5; color: var(--color-texto-invertido); }
.otra-lic__ico { flex: none; width: 20px; height: 20px; margin-top: 1px; color: var(--color-acento); }
.seccion--foto .otra-lic strong { color: var(--color-acento); }
#egreso .seccion__head h2 { max-width: none; }
.resalta { white-space: nowrap; }
@media (max-width: 599px) { .resalta { white-space: normal; } }

/* Plan definitivo (23 oct): un solo programa; la Especialidad como nota discreta entre semestres. */
.sem-nota { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 var(--space-5); padding: 12px var(--space-3); border-radius: var(--radius-chico); border: var(--borde-fino) solid var(--color-texto-invertido-secundario); font-size: var(--fs-texto-chico); line-height: 1.5; color: var(--color-texto-invertido-secundario); }
.sem-nota__tag { padding: 2px 10px; border-radius: var(--radius-pildora); background: var(--color-acento-velo); color: var(--color-acento); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.seccion--petroleo .sem-nota strong { color: var(--color-texto-invertido); }
.sem-nota { display: block; }
.sem-nota__tag { display: inline-block; margin-right: var(--space-2); }
/* Nota de respaldo más legible y título del cierre en azul (la regla de <strong> sobre secciones oscuras lo volvía marfil). */
.sem-nota { color: var(--color-texto-invertido); border-color: var(--color-acento); background: var(--color-acento-velo); }
.seccion--petroleo .sem-hito p strong { color: var(--color-texto); }
/* Nota de respaldo, punto medio (23 oct): el aviso original en cielo con diploma, compacto y sin etiquetas de año. */
.sem-nota { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border: 0; border-radius: var(--radius-tarjeta); background: var(--color-apoyo); color: var(--color-texto); font-size: var(--fs-texto-chico); }
.sem-nota__marco { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius-pildora); background: var(--color-marca); color: var(--color-apoyo); }
.sem-nota__ico { width: 24px; height: 24px; }
.seccion--petroleo .sem-nota strong { color: var(--color-texto); }
@media (max-width: 599px) { .sem-nota { align-items: flex-start; } }
.sem-nota { flex-wrap: nowrap; }

/* Ventajas definitivas (23 oct). */
.v-lista { display: grid; gap: var(--space-2); }
.v-lista li { position: relative; padding-left: 22px; }
.v-lista li::before { content: ""; position: absolute; left: 0; top: .5em; width: 10px; height: 10px; background: var(--color-acento-texto); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.6 1.1C1.8.6.8 1.2.8 2.1v7.8c0 .9 1 1.5 1.8 1l6.8-3.9c.8-.5.8-1.6 0-2Z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.6 1.1C1.8.6.8 1.2.8 2.1v7.8c0 .9 1 1.5 1.8 1l6.8-3.9c.8-.5.8-1.6 0-2Z'/%3E%3C/svg%3E") center / contain no-repeat; }
.v-respaldo .sem-nota__marco { display: grid; }

/* Ventajas (23 oct): ícono en círculo arriba a la derecha y degradado suave en la esquina inferior derecha (solo algunas). */
.ventajas .tarjeta { position: relative; }
.v-ico { position: absolute; top: var(--space-4); right: var(--space-4); display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--radius-pildora); background: var(--color-marca); color: var(--color-acento); z-index: 1; }
.v-ico svg { width: 24px; height: 24px; }
.tarjeta--petroleo .v-ico { background: var(--color-acento); color: var(--color-marca); }
.tarjeta--lima .v-ico, .tarjeta--cielo .v-ico { background: var(--color-marca); color: var(--color-superficie); }
.ventajas .tarjeta > .etiqueta, .ventajas .tarjeta > h3 { padding-right: 56px; }
.v-glow--azul { background-image: var(--degradado-esquina-azul); }
.v-glow--cielo { background-image: var(--degradado-esquina-cielo); }
.v-glow--lima { background-image: var(--degradado-esquina-lima); }
.v-glow--claro { background-image: var(--degradado-esquina-claro); }
/* Folleto con un solo programa (23 oct): nombre, correo y botón. */
.folleto-b .form--linea { grid-template-columns: 1fr 1fr auto; }
@media (max-width: 1023px) { .folleto-b .form--linea { grid-template-columns: 1fr 1fr; } }
@media (max-width: 599px) { .folleto-b .form--linea { grid-template-columns: 1fr; } }
/* Folleto: el texto toma más columnas ahora que el formulario tiene menos campos. */
@media (min-width: 1024px) {
  .folleto-b > div { grid-column: span 5; }
  .folleto-b .form--linea { grid-column: span 7; }
}
.folleto-b__titulo { max-width: none; }
/* Folleto: texto y formulario alineados al centro vertical. */
.folleto-b { align-items: center; }
/* Admisión (23 oct): nota de documentos rectores bajo la lista. */
.documentos__rector { margin-top: var(--space-4); padding: var(--space-3); border-radius: var(--radius-chico); background: var(--color-apoyo); font-size: var(--fs-texto-chico); line-height: 1.5; }
/* Admisión: la nota de documentos va pegada a la lista, sin hueco. */
.documentos { justify-content: flex-start; gap: var(--space-3); }
.documentos__rector { margin-top: var(--space-2); }
.documentos .documentos__list { margin-bottom: 0; }

/* Pie (23 oct): nombre de la escuela, redes sociales y segundo WhatsApp. */
.pie__rvoe strong { color: var(--color-texto-invertido); }
.pie__redes { display: flex; gap: var(--space-2); margin-top: var(--space-4); }
.pie__redes a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius-pildora); border: var(--borde-control) solid var(--color-texto-invertido-secundario); color: var(--color-texto-invertido); transition: background-color var(--mov-micro), color var(--mov-micro); }
.pie__redes a:hover { background: var(--color-acento); border-color: var(--color-acento); color: var(--color-marca); }
.pie__redes svg { width: 20px; height: 20px; }

/* Presentación en filas (23 oct): título a todo el ancho, párrafos en dos columnas, datos en una fila y botones al final. */
.presenta { align-items: start; row-gap: var(--space-5); }
.presenta__texto { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--medianil); row-gap: var(--space-3); }
.presenta__texto > .etiqueta, .presenta__texto > h2 { grid-column: 1 / -1; }
.presenta__texto h2 { max-width: none; }
.presenta__lead { max-width: none; font-size: var(--fs-texto); }
.presenta__datos { grid-column: 1 / -1; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.presenta__datos li { grid-template-columns: 1fr; align-content: start; }
.presenta__cta { grid-column: 1 / -1; }
@media (max-width: 1023px) {
  .presenta__datos { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 599px) {
  .presenta__texto { grid-template-columns: 1fr; }
  .presenta__datos { grid-template-columns: 1fr; }
  .presenta__datos li { grid-template-columns: 48px 1fr; }
}

/* Presentación en filas alternadas (23 oct): texto + imagen, imagen + texto. */
.presenta__texto { display: grid; grid-template-columns: 1fr; row-gap: var(--space-5); }
.presenta__fila { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--medianil); align-items: center; }
.presenta__fila .presenta__lead { grid-column: span 6; font-size: calc(var(--fs-texto) + 1px); }
.presenta__fila .presenta__img { grid-column: 8 / span 5; }
.presenta__fila--inv .presenta__img { grid-column: 1 / span 5; grid-row: 1; }
.presenta__fila--inv .presenta__lead { grid-column: 7 / span 6; grid-row: 1; }
.presenta__img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-tarjeta); }
@media (max-width: 1023px) {
  .presenta__fila .presenta__lead, .presenta__fila .presenta__img, .presenta__fila--inv .presenta__img, .presenta__fila--inv .presenta__lead { grid-column: 1 / -1; grid-row: auto; }
  .presenta__fila--inv .presenta__img { order: 2; }
}

/* Presentación: botones junto al segundo párrafo; tarjetas de datos con degradado lima más sutil que en Ventajas. */
.presenta__fila--inv .presenta__col { grid-column: 7 / span 6; grid-row: 1; display: grid; gap: var(--space-4); }
.presenta__col .presenta__lead { grid-column: auto; }
.presenta__datos li { background-image: var(--degradado-esquina-suave); }
@media (max-width: 1023px) {
  .presenta__fila--inv .presenta__col { grid-column: 1 / -1; grid-row: auto; }
}
/* Enlace discreto a la ficha de inscripción (23 oct). */
.beneficios__link { color: inherit; font-weight: 400; text-decoration: underline; text-underline-offset: 3px; }
.beneficios__link:hover { color: var(--color-acento-texto); }
.faq__list details p a { color: var(--color-acento); text-decoration: underline; text-underline-offset: 3px; }
.beneficios__link { font-weight: inherit; }
/* Testimonios reales (23 oct): citas más largas, un poco más chicas. */
.testimonios--b .testimonio__cita { font-size: 19px; line-height: 1.4; }
.testimonios--b footer strong { color: var(--color-texto-invertido); }
@media (max-width: 599px) { .testimonios--b .testimonio__cita { font-size: 18px; } }
/* Admisión: el botón solo en móvil y tablet (en escritorio el formulario queda justo debajo). */
@media (min-width: 1024px) { .admision__cta { display: none; } }
/* Legales del pie (23 oct): aviso de privacidad y crédito de Adview. */
.pie__legales { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.pie__legales span { color: var(--color-texto-invertido-secundario); }