/* UIC · variante H · «El claustro»: sombra de boj, piedra al sol y agua de la fuente.
   Tokens y decisiones en DESIGN.md (misma carpeta). */

@font-face { font-family: 'Ibarra Real Nova'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(fuentes/IbarraRealNova-400-700-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Ibarra Real Nova'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(fuentes/IbarraRealNova-400-700-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Ibarra Real Nova'; font-style: italic; font-weight: 400; font-display: swap;
  src: url(fuentes/IbarraRealNova-400-italic-latin.woff2) format('woff2'); }
@font-face { font-family: 'Alegreya Sans'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(fuentes/AlegreyaSans-400-normal-latin.woff2) format('woff2'); }
@font-face { font-family: 'Alegreya Sans'; font-style: normal; font-weight: 500; font-display: swap;
  src: url(fuentes/AlegreyaSans-500-normal-latin.woff2) format('woff2'); }
@font-face { font-family: 'Alegreya Sans'; font-style: normal; font-weight: 700; font-display: swap;
  src: url(fuentes/AlegreyaSans-700-normal-latin.woff2) format('woff2'); }
/* ── Tokens ─────────────────────────────────────────────── */
:root {
  --f-titulo: 'Ibarra Real Nova', 'EB Garamond', Georgia, serif;
  --f-texto: 'Alegreya Sans', 'Source Sans 3', 'Segoe UI', sans-serif;

  /* claro: cal sobre muro, a la luz del patio */
  --fondo: #E6EBE0;
  --fondo-raiz: #E6EBE0;
  --fondo-2: #DAE2D3;
  --superficie: #F7F8F3;
  --superficie-2: #EEF1EA;
  --tinta: #10261F;
  --tinta-2: #44554D;
  --linea: rgba(16, 38, 31, .16);
  --linea-fuerte: rgba(16, 38, 31, .32);
  --sol: #8E6A1F;            /* ocre de piedra al sol, apto para texto */
  --sol-luz: #E9C77F;        /* la luz misma: solo en la escena */
  --acento: #85600F;         /* oro viejo: la piedra de Villamayor al sol */
  --acento-hover: #6F4F0B;
  --sobre-acento: #FFF9EC;
  --sombra-boj: #1A3A30;
  --ok: #2F6B48;
  --error: #A2281F;
  --pastilla-logo: #F7F3EA;
  --elev-1: 0 1px 0 rgba(255,255,255,.6) inset, 0 10px 30px -12px rgba(16,38,31,.28), 0 2px 6px -2px rgba(16,38,31,.18);
  --elev-2: 0 24px 60px -24px rgba(16,38,31,.45), 0 4px 12px -4px rgba(16,38,31,.2);

  --r-sm: 6px; --r-md: 10px; --r-lg: 18px;
  --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 24px; --e-6: 32px; --e-7: 48px; --e-8: 72px; --e-9: 112px;
  --margen: clamp(16px, 4.4vw, 64px);
  --ancho-maximo: 1720px;
  --ancho-lectura: 62ch;

  --resorte: linear(0, 0.009, 0.035 2.1%, 0.141, 0.281 6.7%, 0.723 12.9%, 0.938 16.7%, 1.017, 1.077, 1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%, 1.051 39.6%, 1.017 43.1%, 0.991, 0.977 51%, 0.974 53.8%, 0.975 57.1%, 0.997 69.8%, 1.003 76.9%, 1);
  --resorte-suave: linear(0, 0.06 4%, 0.24 9%, 0.53 16%, 0.8 24%, 0.95 32%, 1.02 40%, 1.035 48%, 1.02 60%, 1.004 75%, 1);
  --sale: cubic-bezier(.2, .8, .2, 1);
  color-scheme: light;
}

:root.tema-oscuro {
  /* oscuro: la sombra fresca del claustro */
  --fondo: #0D1814;
  --fondo-raiz: #0D1814;
  --fondo-2: #12211C;
  --superficie: #172923;
  --superficie-2: #1D322B;
  --tinta: #EEE6D3;
  --tinta-2: #B3BBAD;
  --linea: rgba(238, 230, 211, .14);
  --linea-fuerte: rgba(238, 230, 211, .3);
  --sol: #E2BF7E;
  --sol-luz: #F0CF8A;
  --acento: #E2BF7E;
  --acento-hover: #EDCD90;
  --sobre-acento: #1A1405;
  --sombra-boj: #08110E;
  --ok: #7BC596;
  --error: #F08A7A;
  --elev-1: 0 1px 0 rgba(238,230,211,.06) inset, 0 18px 40px -18px rgba(0,0,0,.7), 0 2px 6px -2px rgba(0,0,0,.5);
  --elev-2: 0 30px 70px -28px rgba(0,0,0,.85), 0 4px 14px -4px rgba(0,0,0,.5);
  color-scheme: dark;
}

/* ── Base ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { font-family: var(--f-texto); overflow-x: clip; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 72px; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  margin: 0; background: var(--fondo); color: var(--tinta);
  font-family: var(--f-texto); font-size: 1.0625rem; line-height: 1.5;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: clip;
  transition: background-color .5s var(--sale), color .5s var(--sale);
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--f-titulo); font-weight: 500; line-height: 1.05; letter-spacing: -0.01em; margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: color-mix(in oklab, var(--sol-luz) 55%, transparent); color: var(--tinta); }
input, textarea { caret-color: var(--acento); }
:focus-visible { outline: 2px solid var(--sol); outline-offset: 3px; border-radius: 4px; }
.saltar { position: absolute; left: var(--margen); top: -60px; z-index: 50; background: var(--acento); color: var(--sobre-acento); padding: 10px 14px; border-radius: var(--r-sm); text-decoration: none; }
.saltar:focus { top: 10px; }
.no-completar { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.oculto-visual { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.interior { width: 100%; max-width: var(--ancho-maximo); margin-inline: auto; padding-inline: var(--margen); }

/* ── Cabecera ──────────────────────────────────────────── */
.cabecera {
  position: fixed; inset: 0 0 auto 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between; gap: var(--e-4);
  padding: 10px var(--margen); padding-top: max(10px, env(safe-area-inset-top));
  transition: background-color .4s var(--sale), box-shadow .4s var(--sale), backdrop-filter .4s;
}
.cabecera.con-fondo { background: color-mix(in oklab, var(--fondo) 88%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 1px 0 var(--linea); }
.cabecera__logo { display: inline-flex; align-items: center; text-decoration: none; border-radius: var(--r-sm); }
.cabecera__logo img { height: 30px; width: auto; }
.cabecera__logo--qntlc img { height: 26px; }
.cabecera__derecha { display: flex; align-items: center; gap: var(--e-2); }
@media (min-width: 600px) { .cabecera__derecha { gap: var(--e-4); } }
.logo-oscuro { display: none !important; }
.tema-oscuro .logo-claro { display: none !important; }
.tema-oscuro .logo-oscuro { display: block !important; }
.cabecera .cabecera__cta { display: none; }
.tema-toggle {
  width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%;
  border: 1px solid var(--linea-fuerte); background: color-mix(in oklab, var(--superficie) 70%, transparent); cursor: pointer;
  transition: transform .5s var(--resorte), border-color .2s;
}
.tema-toggle:active { transform: scale(.88); }

/* ── Portada ───────────────────────────────────────────── */
.portada { position: relative; isolation: isolate; min-height: 100svh; padding-top: 70px; padding-bottom: var(--e-7); overflow: clip; }
.claustro { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; display: block; }
.portada::after { /* velo para que el texto se lea sobre la luz */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, color-mix(in oklab, var(--fondo) 70%, transparent) 0%, transparent 38%, transparent 70%, var(--fondo) 100%);
}
.portada__rejilla { display: grid; gap: var(--e-5); align-items: start; padding-top: var(--e-4); }
.portada__texto { display: grid; gap: var(--e-3); max-width: 40rem; }
.portada h1 { font-size: clamp(2.15rem, 8.6vw, 4.4rem); line-height: 1; font-weight: 500; }
.portada__bajada { font-size: clamp(1.05rem, 2.6vw, 1.3rem); color: var(--tinta-2); max-width: 32rem; }
.portada__sello { display: flex; align-items: center; gap: var(--e-3); color: var(--tinta-2); font-size: .95rem; margin-top: var(--e-2); }
.portada__sello img { width: 44px; height: 44px; }
@media (max-width: 899px) { .portada__sello { display: none; } }

/* ── Formulario: la puerta ─────────────────────────────── */
.formulario {
  position: relative; background: var(--superficie); color: var(--tinta);
  border-radius: var(--r-lg);
  padding: var(--e-5) var(--e-5) var(--e-5); box-shadow: 0 1px 0 color-mix(in oklab, var(--sol-luz) 55%, transparent) inset, var(--elev-2);
  border: 1px solid var(--linea);
}
.formulario__titulo { font-size: 1.45rem; font-weight: 600; }
.formulario__intro { color: var(--tinta-2); font-size: .98rem; margin-top: 4px; }
.paso1 { display: grid; gap: var(--e-4); margin-top: var(--e-4); }
.campo { margin: 0; padding: 0; border: 0; min-width: 0; display: grid; gap: 6px; }
.campo__rotulo { font-weight: 500; font-size: .98rem; padding: 0; }
.campo__control {
  width: 100%; min-height: 48px; padding: 10px 14px; border-radius: var(--r-md);
  border: 1px solid var(--linea-fuerte); background: var(--superficie-2); font-size: 1rem;
  transition: border-color .2s, box-shadow .3s var(--sale), background-color .3s;
}
textarea.campo__control { min-height: 110px; resize: vertical; }
select.campo__control { appearance: none; -webkit-appearance: none; padding-right: 40px;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; }
.campo__control:hover { border-color: var(--tinta-2); }
.campo__control:focus { outline: none; border-color: var(--sol); box-shadow: 0 0 0 3px color-mix(in oklab, var(--sol) 30%, transparent); }
.campo__ayuda { font-size: .88rem; color: var(--tinta-2); }
.campo__error { font-size: .9rem; color: var(--error); min-height: 0; }
.campo__error:empty { display: none; }
.campo--error .campo__control { border-color: var(--error); }
.opcional { color: var(--tinta-2); font-weight: 400; }

.chips { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-2); }
.chip {
  position: relative; min-height: 56px; padding: 10px 14px; text-align: left; cursor: pointer;
  border-radius: var(--r-md); border: 1px solid var(--linea-fuerte); background: var(--superficie-2);
  font-family: var(--f-titulo); font-size: 1.22rem; font-weight: 500; line-height: 1.1;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  transition: transform .55s var(--resorte), background-color .25s, border-color .25s, color .25s, box-shadow .3s;
  -webkit-tap-highlight-color: transparent;
}
.chip::after { /* indicador de elección */
  content: ""; flex: none; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--linea-fuerte);
  background: radial-gradient(circle, currentColor 0 4px, transparent 4.5px) center / 0 0 no-repeat;
  transition: background-size .5s var(--resorte), border-color .25s;
}
.chip:hover { border-color: var(--tinta-2); }
.chip:active { transform: scale(.95); }
.chip[aria-pressed="true"] { background: var(--acento); border-color: var(--acento); color: var(--sobre-acento); box-shadow: var(--elev-1); }
.chip[aria-pressed="true"]::after { background-size: 100% 100%; border-color: currentColor; }


.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 22px;
  border-radius: var(--r-md); border: 1px solid transparent; cursor: pointer; text-decoration: none; font-weight: 700; font-size: 1.02rem;
  transition: transform .55s var(--resorte), background-color .2s, color .2s, border-color .2s, box-shadow .3s;
  -webkit-tap-highlight-color: transparent;
}
.boton:active { transform: scale(.95); }
.boton--primario { background: var(--acento); color: var(--sobre-acento); box-shadow: var(--elev-1); }
.boton--primario:hover { background: var(--acento-hover); }
.boton--primario[disabled] { opacity: .7; cursor: progress; }
.boton--secundario { background: transparent; color: var(--tinta); border-color: var(--linea-fuerte); }
.boton--secundario:hover { border-color: var(--tinta); }
.boton--fantasma { background: none; border: 0; padding: 6px 0; min-height: 44px; color: var(--tinta-2); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.boton--grande { width: 100%; min-height: 54px; font-size: 1.1rem; }
.formulario__acciones { display: grid; gap: var(--e-3); }
.estado { font-size: .95rem; margin-top: var(--e-3); }
.estado:empty { display: none; }
.estado--error { color: var(--error); }
.estado--ok { color: var(--ok); font-weight: 500; }
.estado--enviando { color: var(--tinta-2); }
.paso2 { display: grid; gap: var(--e-4); margin-top: var(--e-4); }
.paso2[hidden], .gracias[hidden], #inquietudes-envoltura[hidden] { display: none; }
.campos { display: grid; gap: var(--e-4); }
.gracias { margin-top: var(--e-4); font-family: var(--f-titulo); font-size: 1.3rem; }

/* ── Secciones ─────────────────────────────────────────── */
.franja { position: relative; padding-block: clamp(var(--e-8), 12vw, var(--e-9)); }
.franja h2 { font-size: clamp(1.9rem, 6vw, 3.6rem); }
.franja__bajada { color: var(--tinta-2); font-size: clamp(1.05rem, 2.2vw, 1.25rem); max-width: var(--ancho-lectura); margin-top: var(--e-4); }

/* Duración: en la sombra, con el agua de la fuente */
.en-sombra { --fondo: #0D1814; --fondo-2: #12211C; --superficie: #172923; --tinta: #EEE6D3; --tinta-2: #B3BBAD; --linea: rgba(238,230,211,.14); --linea-fuerte: rgba(238,230,211,.3); --sol: #E2BF7E; --acento: #E2BF7E; color: var(--tinta); background: linear-gradient(180deg, var(--fondo-raiz) 0%, var(--fondo) 22%, var(--fondo) 78%, var(--fondo-raiz) 100%); isolation: isolate; overflow: clip; }
.duracion .claustro { -webkit-mask-image: linear-gradient(180deg, transparent 4%, #000 26%, #000 74%, transparent 96%); mask-image: linear-gradient(180deg, transparent 4%, #000 26%, #000 74%, transparent 96%); }
.duracion { padding-block: 0; }

.duracion__fijo { padding-block: clamp(88px, 11vw, 150px); }
.duracion__rejilla { display: grid; gap: var(--e-6); }
.duracion__cabeza { display: grid; gap: var(--e-3); max-width: 44rem; }
.contador { display: flex; align-items: flex-end; gap: var(--e-4); }
.contador__ventana { height: 1.14em; overflow: hidden; font-family: var(--f-titulo); font-size: clamp(7rem, 30vw, 15rem); line-height: 1; font-weight: 500; color: var(--sol);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent); font-variant-numeric: lining-nums tabular-nums; }
.contador__rollo { list-style: none; margin: 0; padding: 0; will-change: transform; }
.contador__rollo li { height: 1.14em; display: flex; align-items: center; }
.contador__texto { display: grid; padding-bottom: .9em; font-size: clamp(1.15rem, 3vw, 1.6rem); line-height: 1.2; font-family: var(--f-titulo); }
.contador__etapa { color: var(--tinta-2); transition: opacity .35s var(--sale), transform .5s var(--resorte); }
.contador__etapa.cambia { opacity: 0; transform: translateY(6px); }
.riel__tramos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr) 14px repeat(4, 1fr); gap: 6px; }
.riel__tramos li { height: 10px; border-radius: 3px; background: rgba(238,230,211,.12); position: relative; overflow: hidden; }
.riel__tramos li:nth-child(7) { grid-column: 8; }
.riel__tramos li::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #C9A35E, #F0CF8A); transform-origin: 0 50%; transform: scaleX(var(--lleno, 0)); border-radius: inherit; }
.riel__tramos li.maes::before { background: linear-gradient(90deg, #E8D3A6, #FFF1CF); }
.riel__rotulos { display: grid; grid-template-columns: 6fr 4fr; gap: 20px; margin-top: var(--e-3); font-size: .98rem; color: var(--tinta-2); }
.riel__rotulo b { color: var(--tinta); font-weight: 500; }
@media (min-width: 900px) {
  .duracion__rejilla { grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: clamp(32px, 6vw, 120px); }
  .riel { grid-column: 1 / -1; }
}

/* Quién enseña: la ranura de luz */
.docentes { background: linear-gradient(180deg, var(--fondo) 0%, var(--fondo-2) 30%, var(--fondo-2) 70%, var(--fondo) 100%); overflow: clip; isolation: isolate; }
.docentes::before { /* el sol por la tronera: una franja de luz que cruza con el scroll */
  content: ""; position: absolute; inset: -10% -150%; z-index: -1; pointer-events: none;
  background: linear-gradient(104deg, transparent 38%, color-mix(in oklab, var(--sol-luz) 26%, transparent) 46%, color-mix(in oklab, var(--sol-luz) 38%, transparent) 50%, color-mix(in oklab, var(--sol-luz) 22%, transparent) 54%, transparent 62%);
  transform: translateX(var(--banda, 0%)); mix-blend-mode: soft-light; }
.tema-oscuro .docentes::before { mix-blend-mode: screen; opacity: .35; }
.docentes__rejilla { display: grid; gap: var(--e-6); }
.docentes__texto { display: grid; gap: var(--e-4); max-width: 40rem; }

.docentes__frase { font-family: var(--f-titulo); font-size: clamp(1.5rem, 4.4vw, 2.6rem); line-height: 1.15; }
.ranura { -webkit-mask-image: linear-gradient(100deg, #000 0 var(--ranura, 100%), rgba(0,0,0,.18) calc(var(--ranura, 100%) + 12%)); mask-image: linear-gradient(100deg, #000 0 var(--ranura, 100%), rgba(0,0,0,.18) calc(var(--ranura, 100%) + 12%)); }
.personas { display: grid; gap: var(--e-4); align-content: start; }
.persona { display: grid; gap: 2px; padding: var(--e-4) 0; border-top: 1px solid var(--linea-fuerte); }
.persona__nombre { font-family: var(--f-titulo); font-size: clamp(1.35rem, 3vw, 1.8rem); }
.persona__rol { color: var(--tinta-2); }

/* Programas: carril horizontal */
.carreras__cabeza { display: grid; gap: var(--e-3); margin-bottom: var(--e-6); }
.carril { display: grid; grid-auto-flow: column; grid-auto-columns: min(86vw, 26rem); gap: var(--e-4);
  overflow-x: auto; scroll-snap-type: x mandatory; padding: var(--e-2) var(--margen) var(--e-5); margin-inline: calc(var(--margen) * -1); scrollbar-width: thin; overscroll-behavior-x: contain; }
.carril > * { scroll-snap-align: start; }
.tarjeta { background: var(--superficie); border: 1px solid var(--linea); border-radius: 999px 999px var(--r-lg) var(--r-lg) / 40px 40px var(--r-lg) var(--r-lg);
  padding: var(--e-6) var(--e-5) var(--e-5); display: flex; flex-direction: column; gap: var(--e-3); box-shadow: var(--elev-1); transform-origin: 50% 100%; }
.tarjeta__etiqueta { font-family: var(--f-titulo); font-size: 2rem; line-height: 1; }
.tarjeta__titulo { font-family: var(--f-texto); font-size: 1.02rem; font-weight: 500; color: var(--tinta-2); line-height: 1.3; }
.tarjeta__meta { font-weight: 700; color: var(--sol); }
.programa__credencial { font-size: .92rem; color: var(--tinta-2); }
.tarjeta__texto { font-size: 1rem; }
.programa__nota { font-size: .88rem; color: var(--tinta-2); }
.tarjeta__acciones { margin-top: auto; padding-top: var(--e-2); }
.tarjeta__acciones .boton { width: 100%; }
.acordeon { border-top: 1px solid var(--linea); }
.acordeon > summary { cursor: pointer; list-style: none; padding: 12px 0; font-weight: 500; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.acordeon > summary::-webkit-details-marker { display: none; }
.acordeon > summary::after { content: ""; width: 10px; height: 10px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-3px); transition: transform .55s var(--resorte); flex: none; }
.acordeon[open] > summary::after { transform: rotate(-135deg) translateY(-3px); }
.acordeon__cuerpo { padding-bottom: var(--e-4); display: grid; gap: var(--e-3); font-size: .95rem; }
.plan__envoltura { overflow-x: auto; }
.plan { width: 100%; border-collapse: collapse; font-size: .88rem; }
.plan caption { text-align: left; font-weight: 700; padding: 8px 0; }
.plan th, .plan td { text-align: left; padding: 6px 6px 6px 0; border-bottom: 1px solid var(--linea); vertical-align: top; }
.plan td:first-child { white-space: nowrap; color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.plan td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.plan details summary { cursor: pointer; }
.plan details p { color: var(--tinta-2); padding-top: 4px; }
.comun { display: inline-block; font-size: .78rem; color: var(--sol); }

/* FAQ */
.faq__rejilla { display: grid; gap: var(--e-6); align-items: start; }
@media (min-width: 900px) { .faq__rejilla > h2 { position: sticky; top: 110px; } }
.faq .acordeon > summary { font-family: var(--f-titulo); font-size: clamp(1.2rem, 2.4vw, 1.45rem); padding: 18px 0; }
.faq .acordeon__cuerpo { color: var(--tinta-2); font-size: 1.02rem; max-width: var(--ancho-lectura); }
.puntos { margin: 0; padding-left: 1.1em; display: grid; gap: 4px; }

/* Cierre y pie */
.cierre { text-align: left; isolation: isolate; overflow: clip; min-height: 80svh; display: grid; align-items: center; }
.cierre .boton--grande { max-width: 22rem; }
.cierre__frase { font-family: var(--f-titulo); font-size: clamp(1.9rem, 6vw, 3.4rem); line-height: 1.08; max-width: 22ch; }
.cierre .boton { margin-top: var(--e-5); }
.pie { padding: var(--e-7) 0 calc(var(--e-8) + env(safe-area-inset-bottom)); border-top: 1px solid var(--linea); font-size: .93rem; color: var(--tinta-2); }
.pie .interior { display: grid; gap: var(--e-4); }
.pie__logos { display: flex; align-items: center; gap: var(--e-6); flex-wrap: wrap; }
.pie__impulsores { display: grid; gap: var(--e-2); }
.pie__fila { display: flex; align-items: center; gap: var(--e-5); }
.pie__logos img { height: 34px; width: auto; }
.pie__impulsan { color: var(--tinta-2); font-size: .9rem; }
.pie__enlaces { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-5); }
.pie__enlaces a { color: var(--tinta); }

.cta-pegajoso { position: fixed; left: var(--margen); right: var(--margen); bottom: max(12px, env(safe-area-inset-bottom)); z-index: 25;
  transition: transform .6s var(--resorte), opacity .3s; }
.cta-pegajoso .boton { width: 100%; min-height: 54px; box-shadow: var(--elev-2); }
.cta-pegajoso.oculto, .cta-pegajoso.antes { transform: translateY(140%); opacity: 0; pointer-events: none; }

/* ── Escritorio ────────────────────────────────────────── */
@media (min-width: 900px) {
  .portada { display: grid; align-items: center; padding-top: 96px; }
  .portada__rejilla { grid-template-columns: minmax(0, 1.05fr) minmax(380px, 30rem); gap: clamp(32px, 6vw, 120px); align-items: center; }
  .formulario { padding: var(--e-6); }
  .cabecera__logo img { height: 42px; }
  .cabecera__logo--qntlc img { height: 36px; }
  .cabecera .cabecera__cta { display: inline-flex; min-height: 44px; padding: 8px 16px; font-size: .95rem; opacity: 0; transform: translateY(-8px); pointer-events: none; }
  .cabecera.con-cta .cabecera__cta { opacity: 1; transform: none; pointer-events: auto; }
  .docentes__rejilla { grid-template-columns: 1.3fr 1fr; gap: clamp(32px, 6vw, 120px); align-items: end; }
  .faq__rejilla { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); }
  .carril { grid-auto-columns: minmax(20rem, 1fr); overflow: visible; margin-inline: 0; padding-inline: 0; grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cta-pegajoso { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .ranura { -webkit-mask-image: none; mask-image: none; }
}


/* Primera pantalla del celular: título, impulsores y las cinco opciones de carrera sin bajar */
@media (max-width: 899px) {
  .portada { padding-top: 62px; }
  .portada__rejilla { gap: var(--e-4); padding-top: var(--e-2); }
  .portada__texto { gap: var(--e-2); }
  .portada h1 { font-size: clamp(1.95rem, 8.4vw, 2.6rem); }
  .portada__bajada { font-size: 1rem; line-height: 1.45; }
  .impulsores { margin-top: 0; gap: 2px var(--e-3); }
  .impulsores__logo { min-height: 40px; }
  .formulario { padding: var(--e-4) var(--e-4) var(--e-5); }
  .formulario__intro { font-size: .93rem; }
  .paso1 { margin-top: var(--e-3); }
  .chip { min-height: 50px; }
}

/* Titular: la frase final rota como agua que se aquieta */
.rotativo { display: grid; justify-items: start; color: var(--sol); }
.tema-oscuro .rotativo { color: var(--sol); }
.rotativo__frase, .rotativo__reserva { grid-area: 1 / 1; display: inline-block; white-space: nowrap; }
.rotativo__reserva { visibility: hidden; pointer-events: none; }
.rotativo__frase.sale { animation: frase-sale .42s cubic-bezier(.5,0,.75,0) forwards; }
.rotativo__frase.entra { animation: frase-entra .9s cubic-bezier(.16,1,.3,1) .38s both; }
@keyframes frase-sale { to { opacity: 0; transform: translateY(-.35em); filter: blur(3px); } }
@keyframes frase-entra { from { opacity: 0; transform: translateY(.4em); clip-path: inset(0 0 100% 0); } to { opacity: 1; transform: none; clip-path: inset(0 0 0 0); } }

/* Preinscripciones abiertas: una fuente que late */
.abiertas { display: inline-flex; align-items: center; gap: 10px; padding: 6px 12px 6px 10px; border-radius: 999px; font-size: .9rem; font-weight: 500;
  color: var(--ok); background: color-mix(in oklab, var(--ok) 12%, transparent); border: 1px solid color-mix(in oklab, var(--ok) 30%, transparent); margin-bottom: var(--e-3); }
.abiertas__fuente { position: relative; width: 10px; height: 10px; border-radius: 50%; background: currentColor; flex: none; }
.abiertas__fuente::before, .abiertas__fuente::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid currentColor; animation: onda 2.6s cubic-bezier(.2,.6,.3,1) infinite; }
.abiertas__fuente::after { animation-delay: 1.3s; }
@keyframes onda { from { transform: scale(1); opacity: .8; } to { transform: scale(3.2); opacity: 0; } }


/* Tilde de novedades */
.tilde { display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; font-size: .95rem; color: var(--tinta-2); }
.tilde input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tilde__caja { flex: none; width: 22px; height: 22px; border-radius: 6px; border: 1.5px solid var(--linea-fuerte); background: var(--superficie-2) center / 0 no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  transition: background-size .45s var(--resorte), background-color .2s, border-color .2s; }
.tilde input:checked + .tilde__caja { background-color: var(--acento); border-color: var(--acento); background-size: 16px; }
.tema-oscuro .tilde input:checked + .tilde__caja { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A1405' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.tilde input:focus-visible + .tilde__caja { outline: 2px solid var(--sol); outline-offset: 2px; }

/* Hora de clase en el país del visitante */

/* Logos con su proporción real */
.impulsores__logo img, .pie__fila img, .cabecera__logo img { flex: none; }
img[src*="logo-qntlc"] { aspect-ratio: 1513 / 446; width: auto; }
img[src*="logo-san-elias"] { aspect-ratio: 231 / 100; width: auto; }

/* Enviar a alguien: en la cabecera, siempre a mano */
.compartir { position: relative; }
.compartir__boton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; min-width: 44px; padding: 0 12px; border-radius: 999px; cursor: pointer;
  background: color-mix(in oklab, var(--superficie) 70%, transparent); color: var(--tinta); border: 1px solid var(--linea-fuerte); font-weight: 500; font-size: .95rem;
  transition: transform .55s var(--resorte), border-color .2s; }
.compartir__boton:hover { border-color: var(--tinta-2); }
.compartir__boton:active { transform: scale(.92); }
.compartir__boton svg, .compartir__item svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.compartir__menu { position: absolute; right: 0; top: calc(100% + 10px); width: min(300px, calc(100vw - 32px)); padding: 10px; border-radius: var(--r-lg);
  background: var(--superficie); border: 1px solid var(--linea); box-shadow: var(--elev-2); display: grid; gap: 2px; transform-origin: 90% 0; }
.compartir__menu[hidden] { display: none; }
.compartir__menu:not([hidden]) { animation: menu-abre .45s var(--resorte); }
@keyframes menu-abre { from { opacity: 0; transform: translateY(-8px) scale(.94); } }
.compartir__item { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 8px 10px; border-radius: 10px; border: 0; background: none; color: var(--tinta); text-decoration: none; font: inherit; font-size: 1rem; cursor: pointer; text-align: left; }
.compartir__item[hidden] { display: none; }
.compartir__item:hover, .compartir__item:focus-visible { background: var(--superficie-2); }
.compartir__menu:not([hidden]) .compartir__item { animation: item-entra .5s var(--resorte) both; animation-delay: calc(var(--i, 0) * 40ms); }
@keyframes item-entra { from { opacity: 0; transform: translateX(8px); } }
@media (prefers-reduced-motion: reduce) { .abiertas__fuente::before, .abiertas__fuente::after { animation: none; opacity: 0; } }
@media (min-width: 900px) and (max-width: 1279px) { .portada h1 { font-size: clamp(2.4rem, 4.4vw, 3.4rem); } }

/* ══ Ronda 3 (10/10/2026): marca, impulsores, formulario por intenciones y una materia por sección ══ */

/* Marca de la UIC: el rostro aprobado (archivo original, sin redibujar) y el nombre compuesto en Ibarra */
.marca { display: inline-flex; align-items: center; gap: 11px; color: var(--tinta); text-decoration: none; margin: 0; border-radius: var(--r-sm); }
.marca__rostro { flex: none; width: 48px; height: 48px; border-radius: 50%; background: #F7F5EE;
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--tinta) 14%, transparent), 0 3px 10px -3px color-mix(in oklab, var(--sombra-boj) 45%, transparent); }
.tema-oscuro .marca__rostro { background: #EEE6D3; box-shadow: 0 0 0 1px rgba(238,230,211,.25), 0 4px 12px -3px rgba(0,0,0,.6); }
.marca__rostro img { width: 100%; height: 100%; }
.marca__nombre { display: grid; justify-items: start; font-family: var(--f-titulo); line-height: 1; }
.marca__universidad { font-size: 10.5px; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; color: var(--tinta-2); margin: 0 0 5px 1px; }
.marca__isabel { font-size: 23px; font-weight: 500; letter-spacing: -.004em; }
@media (max-width: 599px) {
  .cabecera .marca { gap: 9px; }
  .cabecera .marca__rostro { width: 40px; height: 40px; }
  .cabecera .marca__universidad { font-size: 9.5px; margin-bottom: 4px; }
  .cabecera .marca__isabel { font-size: 19px; }
}
.marca--pie { gap: 16px; }
.marca--pie .marca__rostro { width: 68px; height: 68px; }
.marca--pie .marca__universidad { font-size: 12px; margin-bottom: 7px; }
.marca--pie .marca__isabel { font-size: 30px; color: var(--tinta); }

/* Compartir: solo el ícono, con su etiqueta accesible */
.compartir__boton { width: 44px; padding: 0; }

/* Impulsores: los dos logos en una línea, misma línea base de las letras; el fundador en la suya.
   Medido sobre los SVG: la base de «QNTLC» cae al 62 % de su alto y la de «SAN ELÍAS» al 68,5 %;
   con alturas 32 y 38 px y los pies alineados, las dos bases coinciden a 20 px del borde superior de QNTLC. */
.impulsores { display: grid; justify-items: start; gap: 4px; margin-top: var(--e-3); }
.impulsores__logos { display: flex; align-items: flex-end; gap: 26px; }
.impulsores__logo { display: inline-flex; align-items: flex-end; min-height: 44px; border-radius: var(--r-sm); transition: transform .5s var(--resorte); }
.impulsores__logo:active { transform: scale(.94); }
.impulsores__logo img { height: 38px; }
.impulsores__logo--qntlc img { height: 32px; }
.impulsores__texto { color: var(--tinta-2); font-size: .98rem; }
@media (max-width: 899px) {
  .impulsores { margin-top: var(--e-1); gap: 0; }
  .impulsores__logos { gap: 20px; }
  .impulsores__logo { min-height: 36px; }
  .impulsores__logo img { height: 31px; }
  .impulsores__logo--qntlc img { height: 26px; }
  .impulsores__texto { font-size: .9rem; }
}

/* Formulario: más información comparte los campos; las fichas ceden su lugar a la consulta */
.campos-fila { display: grid; gap: var(--e-3); }
@media (min-width: 480px) { .campos-fila { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); } }
.paso1 { gap: var(--e-4); }
.campo { gap: 5px; }
.tilde { min-height: 32px; font-size: .93rem; }
.formulario__acciones { gap: var(--e-2); }
.formulario__cambio { font-size: .93rem; color: var(--tinta-2); }
.formulario__cambio[hidden] { display: none; }
.enlace { position: relative; display: inline-flex; align-items: center; min-height: 32px; padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--sol); font: inherit; font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
  transition: color .2s, text-decoration-thickness .2s; }
.enlace:hover { color: var(--tinta); text-decoration-thickness: 2px; }
.enlace--radio input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.enlace--radio:has(input:focus-visible) { outline: 2px solid var(--sol); outline-offset: 3px; border-radius: 4px; }
.recomendar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3); margin-top: var(--e-4); padding-top: var(--e-4); border-top: 1px solid var(--linea); color: var(--tinta-2); }
.recomendar[hidden] { display: none; }
.recomendar__boton { min-height: 44px; padding: 8px 16px; }
.recomendar__boton svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 900px) {
  .portada { padding-top: 92px; padding-bottom: var(--e-6); }
  .formulario { padding: 28px 32px 24px; }
}

/* Duración · el agua de la fuente: el contador acompaña el scroll sin fijar la página */
.duracion__rejilla { row-gap: var(--e-5); }
.duracion .riel { padding-top: var(--e-3); }

/* Docentes · sol y sombra en la galería: una franja de sol entra en diagonal y la columna proyecta su sombra */
.docentes { background: linear-gradient(180deg, var(--fondo-raiz) 0%, #E9E7D6 40%, #E9E7D6 70%, var(--fondo-raiz) 100%); }
.tema-oscuro .docentes { background: linear-gradient(180deg, var(--fondo-raiz) 0%, #15201A 40%, #15201A 70%, var(--fondo-raiz) 100%); }
.docentes::before { inset: -20% -60%; mix-blend-mode: normal; opacity: 1;
  background: linear-gradient(112deg, transparent 30%, rgba(255, 236, 190, .0) 33%, rgba(255, 236, 190, .55) 38%, rgba(255, 240, 205, .7) 48%, rgba(255, 236, 190, .45) 56%, transparent 61%); }
.docentes::after { content: ""; position: absolute; inset: -20% -60%; z-index: -1; pointer-events: none;
  background: linear-gradient(112deg, transparent 58%, rgba(26, 58, 48, .16) 63%, rgba(26, 58, 48, .2) 70%, transparent 76%);
  transform: translateX(calc(var(--banda, 0%) * 1.4)); }
.tema-oscuro .docentes::before { mix-blend-mode: screen; opacity: .22; }
.tema-oscuro .docentes::after { background: linear-gradient(112deg, transparent 58%, rgba(0,0,0,.35) 64%, rgba(0,0,0,.4) 70%, transparent 76%); }
.docentes__frase { font-size: clamp(1.55rem, 3.6vw, 2.9rem); }
@media (min-width: 900px) { .docentes__texto { max-width: 52rem; } }
.persona { border-top: 0; padding: var(--e-3) 0 var(--e-3) var(--e-4); position: relative; }
.persona::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 2px; background: var(--sol); transform-origin: 50% 0; transform: scaleY(var(--trazo, 1)); }

/* Carreras · piedra de Villamayor: el muro cálido y cada licenciatura en un pliego de papel */
.carreras { --fondo-piedra: #E7DEC8; isolation: isolate;
  background: linear-gradient(180deg, var(--fondo-raiz) 0%, var(--fondo-piedra) 22%, var(--fondo-piedra) 82%, #1A3A30 100%); }
.carreras::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .35; mix-blend-mode: multiply;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 25%, #000 75%, transparent); mask-image: linear-gradient(180deg, transparent, #000 25%, #000 75%, transparent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .38 0 0 0 0 .25 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E"); }
.carreras .tarjeta { --superficie: #FBF8F0; --tinta-2: #554B38; --sol: #7A5710; --linea: rgba(85,70,40,.16); --linea-fuerte: rgba(85,70,40,.34);
  background: var(--superficie); border-color: rgba(85,70,40,.14);
  box-shadow: 0 1px 0 #fff inset, 0 18px 40px -22px rgba(70,50,20,.45), 0 2px 4px -1px rgba(70,50,20,.18); }
.carreras .tarjeta__etiqueta { font-size: clamp(2rem, 2.6vw, 2.5rem); }
.tema-oscuro .carreras { --fondo-piedra: #1A1711;
  background: linear-gradient(180deg, var(--fondo-raiz) 0%, var(--fondo-piedra) 22%, var(--fondo-piedra) 82%, #08110E 100%); }
.tema-oscuro .carreras::before { mix-blend-mode: screen; opacity: .12; }
.tema-oscuro .carreras .tarjeta { --superficie: #24201A; --tinta-2: #C2B8A3; --sol: #E2BF7E; --linea: rgba(238,230,211,.12); --linea-fuerte: rgba(238,230,211,.28);
  border-color: rgba(238,230,211,.08); box-shadow: 0 1px 0 rgba(255,240,210,.06) inset, 0 22px 44px -22px rgba(0,0,0,.8); }

/* Preguntas · la sombra honda de la galería: reglas que se trazan a medida que se leen */
.faq { --fondo: #10241D; --fondo-2: #12211C; --superficie: #172923; --tinta: #EEE6D3; --tinta-2: #B9C0B2; --linea: rgba(238,230,211,.16); --linea-fuerte: rgba(238,230,211,.3); --sol: #E2BF7E; --acento: #E2BF7E;
  color: var(--tinta); background: linear-gradient(180deg, #1A3A30 0%, #10241D 18%, #0D1C17 100%); }
.tema-oscuro .faq { background: linear-gradient(180deg, #08110E 0%, #0A1511 30%, #0B1612 100%); }
.pliego .acordeon { border-top: 0; position: relative; }
.pliego .acordeon::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--linea-fuerte); transform-origin: 0 50%; transform: scaleX(var(--trazo, 1)); }
.faq h2 { color: var(--tinta); }

/* Cierre · el alba: la luz sube desde el horizonte mientras se lee la frase */
.cierre { --tinta: #F4ECD8; --tinta-2: #D9CDB2; --acento: #E9C77F; --acento-hover: #F2D697; --sobre-acento: #1A1405; --sol: #F0CF8A;
  color: var(--tinta); background: #0D1C17; min-height: 86svh; }
.tema-oscuro .cierre { background: #0B1612; }
.cierre__cielo { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 55% at 72% var(--alba, 115%), rgba(255, 214, 140, .95) 0%, rgba(233, 160, 80, .55) 22%, rgba(150, 90, 50, .22) 45%, transparent 70%),
    linear-gradient(180deg, #0D1C17 0%, #14261F 45%, #3A3020 85%, #6B4A26 100%); }
.tema-oscuro .cierre__cielo { opacity: .82; }
.cierre::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 28%; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, transparent, color-mix(in oklab, var(--fondo-raiz) 92%, transparent)); }
.cierre .interior { position: relative; padding-bottom: clamp(48px, 8vw, 120px); }
.cierre__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3) var(--e-5); margin-top: var(--e-5); }
.cierre__acciones .boton { margin-top: 0; }
.enlace--claro { color: var(--tinta); min-height: 44px; }
.enlace--claro:hover { color: #FFE4AE; }
@media (max-width: 599px) { .compartir__menu { position: fixed; top: 66px; right: 16px; left: auto; width: min(300px, calc(100vw - 32px)); } }

/* Revisión de diseño (ronda 3): blancos táctiles de 44 px en el celular y fondo sólido de respaldo en preguntas */
.faq { background-color: #10241D; }
.tema-oscuro .faq { background-color: #0A1511; }
.pie__enlaces a { display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 899px) {
  .enlace { min-height: 44px; }
  .tilde { min-height: 44px; }
  .impulsores__logo { min-height: 44px; }
  .cabecera .marca { min-height: 44px; }
}

/* ══ Ronda 4 (10/10/2026) ══ */

/* Cabecera con aire: la marca arranca a 22 px del borde (20 en el celular) */
.cabecera { padding-top: max(22px, env(safe-area-inset-top)); padding-bottom: 12px; }
.portada { padding-top: 104px; }
@media (max-width: 899px) { .cabecera { padding-top: max(20px, env(safe-area-inset-top)); padding-bottom: 10px; } .portada { padding-top: 84px; } }

/* Tema: «Día · Noche», la luz se desliza de una palabra a la otra */
.tema-toggle { position: relative; width: auto; height: 44px; overflow: visible; display: inline-grid; grid-template-columns: auto auto; align-items: center; padding: 3px; gap: 0;
  border-radius: 999px; border: 1px solid var(--linea-fuerte); background: color-mix(in oklab, var(--superficie) 72%, transparent); cursor: pointer; isolation: isolate;
  transition: transform .5s var(--resorte), border-color .2s; }
.tema-toggle:hover { border-color: var(--tinta-2); }
.tema-toggle:active { transform: scale(.94); }
.tema__palabra { position: relative; z-index: 1; padding: 0 12px; line-height: 36px; font-family: var(--f-titulo); font-size: 1rem; font-weight: 500; color: var(--tinta-2); transition: color .5s var(--sale); }
.tema__luz { position: absolute; z-index: 0; top: 3px; bottom: 3px; left: 3px; width: var(--luz-ancho, 44px); border-radius: 999px;
  background: radial-gradient(120% 140% at 30% 20%, #FBE6B4, #E2B862); box-shadow: 0 2px 8px -2px rgba(150, 100, 20, .45);
  transform: translateX(0); transition: transform .7s var(--resorte), width .7s var(--resorte), background .6s var(--sale), box-shadow .6s; }
.tema-claro .tema__palabra--dia, html:not(.tema-oscuro) .tema__palabra--dia { color: #2A1E05; }
.tema-oscuro .tema__luz { transform: translateX(var(--luz-x, 44px)); width: var(--luz-ancho-noche, 64px);
  background: radial-gradient(120% 140% at 70% 20%, #F4EEDD, #BFC7C2); box-shadow: 0 0 0 1px rgba(238,230,211,.2), 0 2px 10px -2px rgba(0,0,0,.6); }
.tema-oscuro .tema__palabra--noche { color: #10261F; }

/* Impulsores: QNTLC y la Fundación San Elías. Medido sobre los SVG: los bloques de texto de los dos logos
   ocupan el mismo alto (QNTLC 19 % a 81 %, FSE 24 % a 83 %); con 32 y 34 px y la FSE subida 2 px,
   arriba y abajo de los textos coinciden. */
.impulsores__logos { align-items: flex-start; }
.impulsores__logo { align-items: flex-start; min-height: 0; padding-block: 5px; }
.impulsores__logo--qntlc img { height: 32px; }
.logo-fse { display: block; height: 34px; width: auto; aspect-ratio: 232.1 / 100; color: var(--tinta); margin-top: -2px; }
.tema-oscuro .logo-fse { color: #EEE6D3; --iso-llama: #C8434E; --iso-espada: #D9AE55; }
.impulsores__texto b { font-weight: 700; color: var(--tinta); }
@media (max-width: 899px) {
  .impulsores__logo--qntlc img { height: 26px; }
  .impulsores .logo-fse { height: 28px; margin-top: -2px; }
}
.pie__fila { align-items: flex-start; }
.pie__fila img { height: 32px; }
.logo-fse--pie { height: 34px; }

/* Formulario: intención primero, tranquilidad al lado, grilla pareja, fila de cierre */
.paso1 { margin-top: var(--e-4); }
.chips { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.chip { min-height: 46px; padding: 8px 6px; justify-content: center; text-align: center; font-size: 1.08rem; }
.chip::after { display: none; }
.campos-fila { grid-template-columns: 1fr 1fr; align-items: start; }
.formulario__acciones { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: var(--e-4); }
@media (max-width: 899px) {
  .chips { grid-template-columns: 1fr 1fr; }
  .chip { min-height: 46px; }
}
@media (max-width: 479px) {
  .campos-fila { grid-template-columns: 1fr; }
  .formulario__acciones { grid-template-columns: 1fr; gap: var(--e-2); }
}

/* Sin créditos: se habla de materias y programas (Esteban, 10/10). programas.js los trae; acá no se muestran. */
.plan th:last-child, .plan td:last-child { display: none; }
/* Ajustes tras la primera captura de la ronda 4 */
.impulsores .logo-fse { height: 36px; margin-top: -2px; }
@media (max-width: 899px) {
  #preinscripcion { display: flex; flex-direction: column; }
  .impulsores .logo-fse { height: 29px; }
}
/* En el celular el control de tema muestra solo la palabra a la que lleva, con su luz al lado */
@media (max-width: 599px) {
  .cabecera__derecha { gap: 8px; }
  .tema-toggle { display: inline-flex; align-items: center; gap: 8px; padding: 0 14px 0 12px; }
  .tema__palabra { padding: 0; }
  .tema__luz { position: static; width: 14px !important; height: 14px; transform: none !important; flex: none;
    background: radial-gradient(circle at 65% 35%, #F4EEDD 0 45%, #9FAAA5 100%); box-shadow: 0 0 0 1px rgba(16,38,31,.25); }
  .tema-oscuro .tema__luz { background: radial-gradient(circle at 35% 30%, #FBE6B4, #E2B862); box-shadow: 0 0 6px rgba(240, 200, 110, .6); }
  .tema-claro .tema__palabra--dia, .tema-oscuro .tema__palabra--noche { display: none; }
  .tema-claro .tema__palabra--noche, .tema-oscuro .tema__palabra--dia { color: var(--tinta); }
}
/* Resortes portados de 21st.dev (proceso/06-21st-ronda4.md): la píldora del Segmented Control de balick
   (spring bounce 0,2 · 0,4 s, traducido a linear()) y el estirón del pulgar al apretar del Spring switch de halaska-studio. */
:root { --resorte-pildora: linear(0, 0.06 3%, 0.22 8%, 0.5 15%, 0.78 23%, 0.95 31%, 1.03 39%, 1.045 46%, 1.03 56%, 1.008 70%, 0.998 82%, 1); }
.tema__luz { transition: transform .45s var(--resorte-pildora), width .45s var(--resorte-pildora), scale .18s var(--sale), background .6s var(--sale), box-shadow .6s; }
.tema-toggle:active .tema__luz { scale: 1.12 .92; }
@media (prefers-reduced-motion: reduce) { .tema__luz { transition: none; } }
/* Contraste e interlineado medidos sobre el fondo real (proceso/08-contraste.md) */
.tema-claro .portada .rotativo { color: #765510; }
.docentes__frase { line-height: 1.35; }
.cierre__frase { line-height: 1.3; }
@media (max-width: 899px) { .franja h2 { line-height: 1.3; } }
.riel__rotulos { color: #CDD3C6; }
/* Revisión de diseño ronda 4: blancos de 44 px en el celular */
@media (max-width: 899px) {
  .impulsores__logo { padding-block: 8px; }
}
/* La marca nunca se parte en dos renglones */
.marca__isabel, .marca__universidad { white-space: nowrap; }
@media (max-width: 599px) {
  .tema-toggle { padding: 0 12px 0 10px; gap: 6px; }
  .cabecera__derecha { gap: 6px; }
}
@media (max-width: 389px) { .cabecera .marca__isabel { font-size: 17.5px; } .cabecera .marca__rostro { width: 38px; height: 38px; } }

/* ── v4 · feedback del P. Javier (10/10) ─────────────────────────────── */
/* Nombre completo protagónico: «Universidad» al mismo cuerpo que «Isabel la Católica» */
.marca__universidad { font-size: inherit; font-weight: 500; letter-spacing: -.004em; text-transform: none; color: var(--tinta); margin: 0; }
.marca__isabel { font-size: inherit; }
.cabecera .marca__nombre { font-size: 19px; line-height: 1.06; }
.cabecera .marca__universidad { font-size: inherit; margin: 0; }
.cabecera .marca__isabel { font-size: inherit; }
@media (max-width: 389px) { .cabecera .marca__nombre { font-size: 17.5px; } .cabecera .marca__isabel { font-size: inherit; } }
@media (min-width: 900px) {
  .cabecera .marca { gap: 14px; }
  .cabecera .marca__rostro { width: 54px; height: 54px; }
  .cabecera .marca__nombre { display: flex; gap: .26em; font-size: 28px; line-height: 1; }
}
@media (min-width: 1280px) { .cabecera .marca__nombre { font-size: 31px; } }
.marca--pie .marca__nombre { font-size: 30px; line-height: 1.04; }
.marca--pie .marca__universidad, .marca--pie .marca__isabel { font-size: inherit; margin: 0; }

/* Qué es la UIC */
.que-es { padding-block: clamp(var(--e-7), 9vw, var(--e-9)); }
.que-es__rejilla { display: grid; gap: var(--e-5); }
.que-es__texto { display: grid; gap: var(--e-4); max-width: var(--ancho-lectura); }
.que-es__frase { font-family: var(--f-titulo); font-size: clamp(1.4rem, 3.2vw, 2.2rem); line-height: 1.35; color: var(--tinta); text-wrap: pretty; }
.que-es__texto p:not(.que-es__frase) { color: var(--tinta-2); font-size: clamp(1.05rem, 1.6vw, 1.2rem); line-height: 1.55; }
@media (min-width: 900px) { .que-es__rejilla { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: clamp(32px, 6vw, 120px); align-items: start; } }

/* Cómo se estudia: cuatro rasgos separados por filete */
.estudio { padding-top: 0; }
.rasgos { list-style: none; margin: var(--e-6) 0 0; padding: 0; display: grid; column-gap: var(--e-6); }
.rasgo { display: grid; grid-template-columns: 28px 1fr; column-gap: var(--e-4); row-gap: var(--e-2); align-content: start; padding: var(--e-5) 0; border-top: 1px solid var(--linea-fuerte); }
.rasgo svg { grid-row: span 2; width: 28px; height: 28px; fill: none; stroke: var(--sol); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; margin-top: 2px; }
.rasgo h3 { font-size: clamp(1.3rem, 2.2vw, 1.55rem); line-height: 1.3; }
.rasgo p { color: var(--tinta-2); line-height: 1.55; max-width: 46ch; }
@media (min-width: 900px) { .rasgos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Quiénes la hacen: autoridades con medallón (iniciales hasta que lleguen las fotos) */
@media (min-width: 900px) { .docentes__rejilla { grid-template-columns: 1fr; align-items: start; } .docentes__texto { max-width: 60rem; } }
.personas { list-style: none; margin: 0; padding: 0; gap: 0; column-gap: var(--e-6); }
.persona { display: grid; grid-template-columns: auto 1fr; column-gap: var(--e-4); row-gap: 2px; align-content: start; padding: var(--e-5) 0; border-top: 1px solid var(--linea-fuerte); }
.persona::before { display: none; }
.persona__retrato { grid-row: span 3; width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; font-family: var(--f-titulo); font-size: 1.3rem; color: #765510; background: color-mix(in oklab, var(--sol-luz) 26%, var(--superficie)); border: 1px solid color-mix(in oklab, var(--sol) 45%, transparent); }
.persona__retrato--iso { background: var(--pastilla-logo); }
.persona__retrato--iso { overflow: hidden; }
.persona__retrato--iso img { height: 40px; width: auto; }
.persona__rol { color: #765510; font-size: .95rem; }
.tema-oscuro .persona__rol { color: var(--sol); }
.persona__nombre { font-size: clamp(1.3rem, 2.4vw, 1.6rem); line-height: 1.3; }
.persona__nombre a { color: inherit; text-decoration-color: var(--linea-fuerte); text-underline-offset: .18em; }
.persona__nombre a:hover { text-decoration-color: currentColor; }
.persona__nota { color: var(--tinta-2); line-height: 1.5; margin-top: 4px; max-width: 42ch; }
@media (min-width: 640px) { .personas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .personas { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 479px) { .persona__retrato { width: 52px; height: 52px; font-size: 1.15rem; } .persona__retrato--iso img { height: 34px; } }
/* Contraste medido: el ocre sobre la banda clara de «Quiénes» queda en 4,0:1; se baja a #765510 (5,5:1) */
.tema-oscuro .persona__retrato { color: var(--sol); }

/* Autoridades con foto (12/10): el medallón crece y la foto llena el círculo; el encuadre de cada cara
   se resuelve al recortar la imagen, no acá. */
.persona__retrato--foto { width: 88px; height: 88px; padding: 0; overflow: hidden; background: var(--superficie); }
.persona__retrato--foto img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
@media (max-width: 479px) { .persona__retrato--foto { width: 72px; height: 72px; } }

/* Transiciones entre franjas (12/10): los pasos de claro a oscuro siguen una curva suave y más larga,
   en lugar del degradado lineal corto que se leía como un corte. */
.en-sombra { background: linear-gradient(180deg, var(--fondo-raiz) 0.0%, color-mix(in oklab, var(--fondo) 26.2%, var(--fondo-raiz)) 6.5%, color-mix(in oklab, var(--fondo) 45.9%, var(--fondo-raiz)) 11.6%, color-mix(in oklab, var(--fondo) 61.8%, var(--fondo-raiz)) 16.0%, color-mix(in oklab, var(--fondo) 72.2%, var(--fondo-raiz)) 19.2%, color-mix(in oklab, var(--fondo) 80.6%, var(--fondo-raiz)) 22.1%, color-mix(in oklab, var(--fondo) 87.4%, var(--fondo-raiz)) 24.8%, color-mix(in oklab, var(--fondo) 92.5%, var(--fondo-raiz)) 27.2%, color-mix(in oklab, var(--fondo) 95.8%, var(--fondo-raiz)) 29.2%, color-mix(in oklab, var(--fondo) 97.9%, var(--fondo-raiz)) 30.9%, color-mix(in oklab, var(--fondo) 99.2%, var(--fondo-raiz)) 32.3%, var(--fondo) 34.0%, var(--fondo) 66.0%, color-mix(in oklab, var(--fondo-raiz) 26.2%, var(--fondo)) 72.5%, color-mix(in oklab, var(--fondo-raiz) 45.9%, var(--fondo)) 77.6%, color-mix(in oklab, var(--fondo-raiz) 61.8%, var(--fondo)) 82.0%, color-mix(in oklab, var(--fondo-raiz) 72.2%, var(--fondo)) 85.2%, color-mix(in oklab, var(--fondo-raiz) 80.6%, var(--fondo)) 88.1%, color-mix(in oklab, var(--fondo-raiz) 87.4%, var(--fondo)) 90.8%, color-mix(in oklab, var(--fondo-raiz) 92.5%, var(--fondo)) 93.2%, color-mix(in oklab, var(--fondo-raiz) 95.8%, var(--fondo)) 95.2%, color-mix(in oklab, var(--fondo-raiz) 97.9%, var(--fondo)) 96.9%, color-mix(in oklab, var(--fondo-raiz) 99.2%, var(--fondo)) 98.3%, var(--fondo-raiz) 100.0%); }
.duracion .claustro { -webkit-mask-image: linear-gradient(180deg, transparent 10%, #000 34%, #000 66%, transparent 90%); mask-image: linear-gradient(180deg, transparent 10%, #000 34%, #000 66%, transparent 90%); }
.carreras { background: linear-gradient(180deg, var(--fondo-raiz) 0.0%, color-mix(in oklab, var(--fondo-piedra) 26.2%, var(--fondo-raiz)) 4.2%, color-mix(in oklab, var(--fondo-piedra) 45.9%, var(--fondo-raiz)) 7.5%, color-mix(in oklab, var(--fondo-piedra) 61.8%, var(--fondo-raiz)) 10.3%, color-mix(in oklab, var(--fondo-piedra) 72.2%, var(--fondo-raiz)) 12.4%, color-mix(in oklab, var(--fondo-piedra) 80.6%, var(--fondo-raiz)) 14.3%, color-mix(in oklab, var(--fondo-piedra) 87.4%, var(--fondo-raiz)) 16.1%, color-mix(in oklab, var(--fondo-piedra) 92.5%, var(--fondo-raiz)) 17.6%, color-mix(in oklab, var(--fondo-piedra) 95.8%, var(--fondo-raiz)) 18.9%, color-mix(in oklab, var(--fondo-piedra) 97.9%, var(--fondo-raiz)) 20.0%, color-mix(in oklab, var(--fondo-piedra) 99.2%, var(--fondo-raiz)) 20.9%, var(--fondo-piedra) 22.0%, var(--fondo-piedra) 68.0%, color-mix(in oklab, #1A3A30 26.2%, var(--fondo-piedra)) 74.1%, color-mix(in oklab, #1A3A30 45.9%, var(--fondo-piedra)) 78.9%, color-mix(in oklab, #1A3A30 61.8%, var(--fondo-piedra)) 83.0%, color-mix(in oklab, #1A3A30 72.2%, var(--fondo-piedra)) 86.1%, color-mix(in oklab, #1A3A30 80.6%, var(--fondo-piedra)) 88.8%, color-mix(in oklab, #1A3A30 87.4%, var(--fondo-piedra)) 91.4%, color-mix(in oklab, #1A3A30 92.5%, var(--fondo-piedra)) 93.6%, color-mix(in oklab, #1A3A30 95.8%, var(--fondo-piedra)) 95.5%, color-mix(in oklab, #1A3A30 97.9%, var(--fondo-piedra)) 97.1%, color-mix(in oklab, #1A3A30 99.2%, var(--fondo-piedra)) 98.4%, #1A3A30 100.0%); }
.tema-oscuro .carreras { background: linear-gradient(180deg, var(--fondo-raiz) 0.0%, color-mix(in oklab, var(--fondo-piedra) 26.2%, var(--fondo-raiz)) 4.2%, color-mix(in oklab, var(--fondo-piedra) 45.9%, var(--fondo-raiz)) 7.5%, color-mix(in oklab, var(--fondo-piedra) 61.8%, var(--fondo-raiz)) 10.3%, color-mix(in oklab, var(--fondo-piedra) 72.2%, var(--fondo-raiz)) 12.4%, color-mix(in oklab, var(--fondo-piedra) 80.6%, var(--fondo-raiz)) 14.3%, color-mix(in oklab, var(--fondo-piedra) 87.4%, var(--fondo-raiz)) 16.1%, color-mix(in oklab, var(--fondo-piedra) 92.5%, var(--fondo-raiz)) 17.6%, color-mix(in oklab, var(--fondo-piedra) 95.8%, var(--fondo-raiz)) 18.9%, color-mix(in oklab, var(--fondo-piedra) 97.9%, var(--fondo-raiz)) 20.0%, color-mix(in oklab, var(--fondo-piedra) 99.2%, var(--fondo-raiz)) 20.9%, var(--fondo-piedra) 22.0%, var(--fondo-piedra) 68.0%, color-mix(in oklab, #08110E 26.2%, var(--fondo-piedra)) 74.1%, color-mix(in oklab, #08110E 45.9%, var(--fondo-piedra)) 78.9%, color-mix(in oklab, #08110E 61.8%, var(--fondo-piedra)) 83.0%, color-mix(in oklab, #08110E 72.2%, var(--fondo-piedra)) 86.1%, color-mix(in oklab, #08110E 80.6%, var(--fondo-piedra)) 88.8%, color-mix(in oklab, #08110E 87.4%, var(--fondo-piedra)) 91.4%, color-mix(in oklab, #08110E 92.5%, var(--fondo-piedra)) 93.6%, color-mix(in oklab, #08110E 95.8%, var(--fondo-piedra)) 95.5%, color-mix(in oklab, #08110E 97.9%, var(--fondo-piedra)) 97.1%, color-mix(in oklab, #08110E 99.2%, var(--fondo-piedra)) 98.4%, #08110E 100.0%); }
.faq { background: linear-gradient(180deg, #1A3A30 0.0%, color-mix(in oklab, #10241D 26.2%, #1A3A30) 5.7%, color-mix(in oklab, #10241D 45.9%, #1A3A30) 10.2%, color-mix(in oklab, #10241D 61.8%, #1A3A30) 14.1%, color-mix(in oklab, #10241D 72.2%, #1A3A30) 16.9%, color-mix(in oklab, #10241D 80.6%, #1A3A30) 19.5%, color-mix(in oklab, #10241D 87.4%, #1A3A30) 21.9%, color-mix(in oklab, #10241D 92.5%, #1A3A30) 24.0%, color-mix(in oklab, #10241D 95.8%, #1A3A30) 25.8%, color-mix(in oklab, #10241D 97.9%, #1A3A30) 27.3%, color-mix(in oklab, #10241D 99.2%, #1A3A30) 28.5%, #10241D 30.0%, #0D1C17 100%); }
.cierre::after { height: 42%; background: linear-gradient(180deg, transparent 0.0%, color-mix(in oklab, var(--fondo-raiz) 26.2%, transparent) 19.0%, color-mix(in oklab, var(--fondo-raiz) 45.9%, transparent) 34.0%, color-mix(in oklab, var(--fondo-raiz) 61.8%, transparent) 47.0%, color-mix(in oklab, var(--fondo-raiz) 72.2%, transparent) 56.5%, color-mix(in oklab, var(--fondo-raiz) 80.6%, transparent) 65.0%, color-mix(in oklab, var(--fondo-raiz) 87.4%, transparent) 73.0%, color-mix(in oklab, var(--fondo-raiz) 92.5%, transparent) 80.0%, color-mix(in oklab, var(--fondo-raiz) 95.8%, transparent) 86.0%, color-mix(in oklab, var(--fondo-raiz) 97.9%, transparent) 91.0%, color-mix(in oklab, var(--fondo-raiz) 99.2%, transparent) 95.0%, var(--fondo-raiz) 100.0%); }
.pie { border-top: 0; }

/* Celular (12/10): portada despejada con dos botones; el formulario vive en su propia sección
   después de las licenciaturas (lo muda escena.js) y muestra todos sus campos desde el principio. */
.portada__acciones, .inscripcion-movil { display: none; }
@media (max-width: 899px) {
  .portada__rejilla { min-height: calc(100svh - 84px - var(--e-8)); align-content: center; }
  .portada { padding-bottom: var(--e-8); }
  .portada__texto { gap: var(--e-4); }
  .portada__bajada { font-size: 1.06rem; }
  .portada__acciones { display: grid; gap: var(--e-3); margin-top: var(--e-3); max-width: 26rem; }
  .portada__acciones .boton { width: 100%; justify-content: center; }
  .inscripcion-movil { display: block; background: #1A3A30; padding-block: var(--e-7) var(--e-8); }
  .tema-oscuro .inscripcion-movil { background: #08110E; }
  .inscripcion-movil .formulario { box-shadow: var(--elev-2); }
}
/* Contraste medido sobre el render (12/10): el rótulo del cargo bajo la franja de sol y «Fundada por»
   sobre el shader del hero quedaban en 4,39; un punto más de tinta los lleva sobre 4,5 en claro. */
.tema-claro .persona__rol, :root:not(.tema-oscuro) .persona__rol { color: #634509; }
:root:not(.tema-oscuro) .impulsores__texto { color: #34433C; }
/* Formulario único (ronda 5, 12/10): carrera opcional, pregunta, datos con su placeholder, país con la casilla
   de novedades, y la intención la dice el botón. Lo vigila scripts/proporciones.mjs: entra en la portada. */
.formulario__titulo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; }
.formulario__ciclo { font-family: var(--f-texto); font-size: .95rem; font-weight: 500; color: var(--tinta-2); }
#preinscripcion .paso1 { gap: var(--e-3); margin-top: var(--e-3); }
#preinscripcion .campo { gap: 4px; }
#preinscripcion textarea.campo__control { min-height: 0; height: 72px; resize: vertical; }
#preinscripcion .campos-fila--pais { align-items: center; }
#preinscripcion .campos-fila--pais .tilde { min-height: 44px; }
#preinscripcion .campo__control::placeholder { color: var(--tinta-2); opacity: 1; }
#preinscripcion select:invalid, #preinscripcion select:has(option[value=""]:checked) { color: var(--tinta-2); }
#preinscripcion .formulario__acciones { grid-template-columns: 1fr 1fr; gap: var(--e-2); margin-top: var(--e-1); }
#preinscripcion .formulario__acciones .boton { width: 100%; min-width: 0; padding-inline: 12px; }
@media (max-width: 479px) { #preinscripcion .campos-fila--pais { grid-template-columns: minmax(0, 1fr) auto; } }
.formulario__ciclo { letter-spacing: 0; word-spacing: .1em; }
/* La arquería del celular (12/10) pasa la luz detrás de «Fundada por»: en oscuro sube un punto de tinta. */
.tema-oscuro .impulsores__texto { color: #C9CFC2; }
/* Con fotos (12/10) el isologo de la Fundación toma el mismo círculo, para que los textos queden en una columna */
.persona__retrato--iso { width: 88px; height: 88px; }
.persona__retrato--iso img { height: 56px; }
@media (max-width: 479px) { .persona__retrato--iso { width: 72px; height: 72px; } .persona__retrato--iso img { height: 46px; } }