/* Bildung, Instituto de Estudios Superiores — iesbildung.edu.mx
   Mundo: una libreta de cuadro chico escrita con tinta azul (el azul del logotipo, #0029E7) y subrayada
   con marcatextos. Archivo para títulos, Atkinson Hyperlegible Next para leer. */

:root {
  --tinta: #0029E7;
  --tinta-osc: #001DA8;
  --tinta-clara: #6E86FF;
  --noche: #070F3D;
  --noche-2: #0C1756;
  --marino: #0A1240;
  --papel: #F5F7FE;
  --hoja: #FFFFFF;
  --cuadro: rgba(0, 41, 231, .075);
  --grafito: #141A33;
  --texto: #2A3050;
  --suave: #525A7C;
  --linea: rgba(10, 18, 64, .14);
  --marca: #FFE14A;
  --error: #B42318;
  --display: 'Archivo', 'Arial Narrow', system-ui, sans-serif;
  --lectura: 'Atkinson Hyperlegible Next', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --nav-h: 72px;
  --gutter: clamp(16px, 4vw, 48px);
  --ease: cubic-bezier(.16, 1, .3, 1);
  --sombra: 0 18px 40px -18px rgba(7, 15, 61, .35), 0 2px 6px rgba(7, 15, 61, .08);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + 12px); scrollbar-color: var(--tinta) var(--papel); }
body { margin: 0; background: var(--papel); color: var(--texto); font: 400 17px/1.6 var(--lectura); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--tinta); text-underline-offset: .2em; text-decoration-thickness: 1.5px; }
h1, h2, h3, p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
address { font-style: normal; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--marca); color: var(--grafito); }
input, textarea { caret-color: var(--tinta); }
:focus-visible { outline: 3px solid var(--tinta); outline-offset: 3px; border-radius: 6px; }
.i { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
[hidden] { display: none !important; }

.saltar { position: fixed; left: 12px; top: -60px; z-index: 300; padding: 10px 16px; border-radius: 10px; background: var(--tinta); color: #fff; font-weight: 700; text-decoration: none; transition: top .2s; }
.saltar:focus { top: 12px; }
.progreso { position: fixed; inset: 0 0 auto; height: 3px; z-index: 200; background: var(--tinta); transform-origin: left; scale: 0 1; pointer-events: none; }

/* ---------- libreta ---------- */
.cuaderno {
  background-color: var(--papel);
  background-image: linear-gradient(var(--cuadro) 1px, transparent 1px), linear-gradient(90deg, var(--cuadro) 1px, transparent 1px);
  background-size: 22px 22px;
  background-position: -1px -1px;
}

.contenedor { width: min(1240px, 100%); margin-inline: auto; padding-inline: var(--gutter); }
.seccion { position: relative; padding-block: clamp(84px, 11vw, 150px); overflow-x: clip; }

/* ---------- tipografía ---------- */
.titulo { font: 800 clamp(34px, 4.7vw, 66px)/1.02 var(--display); font-stretch: 112%; letter-spacing: -.032em; color: var(--marino); text-wrap: balance; }
.titulo--claro { color: #fff; }
.subtitulo { font: 750 clamp(26px, 2.6vw, 36px)/1.08 var(--display); font-stretch: 108%; letter-spacing: -.024em; color: var(--marino); text-wrap: balance; }
.subtitulo--claro { color: #fff; }
.palabra { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.palabra > span { display: inline-block; }
.cabeza { max-width: 760px; }
.cabeza__lead { margin-top: 20px; max-width: 62ch; font-size: clamp(17px, 1.4vw, 19.5px); line-height: 1.6; color: var(--suave); }

/* marcatextos: barrido detrás del texto */
.resalta { background-image: linear-gradient(transparent 52%, var(--marca) 52%, var(--marca) 90%, transparent 90%); background-repeat: no-repeat; background-size: 100% 100%; padding-inline: .06em; margin-inline: -.06em; }

/* ---------- botones ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 14px 24px; border: 1.5px solid transparent; border-radius: 12px; font: 700 16.5px/1.1 var(--lectura); text-decoration: none; cursor: pointer; transition: background-color .25s, color .25s, border-color .25s, box-shadow .3s; }
.btn .i { transition: translate .3s var(--ease); }
.btn:hover .i { translate: 3px 0; }
.btn--tinta { background: var(--tinta); color: #fff; box-shadow: 0 10px 22px -10px rgba(0, 41, 231, .7); }
.btn--tinta:hover { background: var(--tinta-osc); box-shadow: 0 14px 26px -10px rgba(0, 41, 231, .75); }
.btn--linea { border-color: rgba(10, 18, 64, .3); color: var(--marino); background: transparent; }
.btn--linea:hover { border-color: var(--tinta); color: var(--tinta); background: var(--hoja); }
.btn--chico { min-height: 44px; padding: 10px 18px; font-size: 15px; }
.btn--ancho { width: 100%; }

/* ---------- menú ---------- */
.nav { position: fixed; inset: 0 0 auto; z-index: 100; height: var(--nav-h); transition: background-color .35s, box-shadow .35s, backdrop-filter .35s; }
.nav.solida { background: rgba(245, 247, 254, .9); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); box-shadow: 0 1px 0 var(--linea); }
.nav__in { display: flex; align-items: center; gap: 28px; height: 100%; width: min(1320px, 100%); margin-inline: auto; padding-inline: var(--gutter); }
.nav__logo { display: block; width: 158px; flex: none; color: var(--grafito); border-radius: 4px; }
.logo { width: 100%; height: auto; overflow: visible; }
.logo__b { fill: var(--tinta); }
.logo__sub { fill: currentColor; }
.logo .l { transform-box: fill-box; }
.nav__menu { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav__menu a { position: relative; padding: 10px 14px; font-weight: 600; font-size: 15.5px; color: var(--marino); text-decoration: none; border-radius: 8px; }
.nav__menu a::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 6px; height: 7px; background: var(--marca); z-index: -1; transform-origin: left; scale: 0 1; transition: scale .45s var(--ease); }
.nav__menu a:hover::after, .nav__menu a.activo::after { scale: 1 1; }
.nav__menu .nav__menu-cta { display: none; }
.nav__cta { flex: none; }
.nav__hamb { display: none; width: 46px; height: 46px; margin-left: auto; padding: 0; border: 0; border-radius: 12px; background: transparent; cursor: pointer; position: relative; }
.nav__hamb span { position: absolute; left: 12px; right: 12px; height: 2px; border-radius: 2px; background: var(--marino); transition: translate .35s var(--ease), rotate .35s var(--ease), background-color .3s; }
.nav__hamb span:first-child { top: 18px; }
.nav__hamb span:last-child { top: 26px; }
.nav[data-abierto] .nav__hamb span { background: #fff; }
.nav[data-abierto] .nav__hamb span:first-child { translate: 0 4px; rotate: 45deg; }
.nav[data-abierto] .nav__hamb span:last-child { translate: 0 -4px; rotate: -45deg; }

/* el logotipo se arma letra por letra al cargar */
.m .nav .logo .l, .m .nav .logo__sub { opacity: 0; }
.m.listo .nav .logo .l { animation: letra .8s var(--ease) both; animation-delay: calc(var(--k) * 55ms + 80ms); }
.m.listo .nav .logo__sub { animation: aparece .7s var(--ease) .55s both; }
@keyframes letra { from { opacity: 0; translate: 0 45%; } to { opacity: 1; translate: 0 0; } }
@keyframes aparece { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: 0 0; } }

/* ---------- hero ---------- */
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; overflow: clip; }
.hero__in { flex: 1; display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); align-items: center; gap: clamp(24px, 4vw, 64px); width: min(1320px, 100%); margin-inline: auto; padding: calc(var(--nav-h) + clamp(24px, 5vh, 56px)) var(--gutter) clamp(64px, 9vh, 96px); }
.hero__texto { container-type: inline-size; }
/* el tamaño sale del ancho de la columna: "Tu formación," siempre cabe en una línea */
.hero__titulo { font: 850 clamp(36px, 12.4cqi, 92px)/.96 var(--display); font-stretch: 110%; letter-spacing: -.04em; color: var(--tinta); }
.hero__titulo .ln { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.hero__titulo .ln > span { display: block; }
.hero__lead { margin-top: clamp(20px, 3vh, 30px); max-width: 33em; font-size: clamp(17.5px, 1.45vw, 20.5px); line-height: 1.55; color: var(--texto); }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(24px, 4vh, 36px); }
.hero__campus { display: inline-flex; align-items: center; gap: 8px; margin-top: 26px; padding: 8px 14px 8px 11px; border-radius: 999px; background: var(--hoja); box-shadow: 0 0 0 1px var(--linea); font-weight: 600; font-size: 15px; color: var(--marino); }
.hero__campus .i { color: var(--tinta); }

.hero__escena { position: relative; width: 100%; max-width: 600px; justify-self: center; aspect-ratio: 600 / 640; max-height: calc(100svh - var(--nav-h) - 100px); }
.hero__carpeta { position: absolute; left: 2%; right: 31%; top: 40%; bottom: 0; border-radius: 22px 22px 0 0; background: var(--tinta); rotate: 0deg; box-shadow: inset 0 -40px 60px -30px rgba(7, 15, 61, .45); }
.hero__carpeta::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background-image: linear-gradient(rgba(255, 255, 255, .09) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .09) 1px, transparent 1px); background-size: 22px 22px; }
.hero__trazo { position: absolute; left: 25%; top: 17%; width: 38%; height: 42%; overflow: visible; fill: none; stroke: var(--tinta); stroke-width: 3.2; stroke-linecap: round; stroke-dasharray: 1700; stroke-dashoffset: 0; pointer-events: none; }
.hero__trazo path { vector-effect: non-scaling-stroke; }
.hero__alumno { position: absolute; left: -3%; bottom: 0; width: 74%; }
.hero__alumno img { width: 100%; filter: drop-shadow(0 18px 24px rgba(7, 15, 61, .25)); }
.hero__def { position: absolute; left: -7%; top: 2%; width: min(236px, 42%); padding: 16px 18px 18px; border-radius: 6px; background: var(--hoja); box-shadow: var(--sombra); rotate: -3deg; }
.hero__def-palabra { font: 800 26px/1 var(--display); font-stretch: 110%; letter-spacing: -.02em; color: var(--marino); }
.hero__def-tipo { margin-top: 6px; font-style: italic; font-size: 13.5px; color: var(--suave); }
.hero__def-texto { margin-top: 8px; font-size: 15px; line-height: 1.45; color: var(--texto); }
.hero__fichas { position: absolute; inset: 0; pointer-events: none; }
.ficha { position: absolute; display: grid; gap: 2px; width: min(196px, 36%); padding: 14px 16px 13px; border-radius: 6px; background: var(--hoja); box-shadow: var(--sombra); text-decoration: none; pointer-events: auto; rotate: var(--rot); transition: transform .45s var(--ease), box-shadow .3s; }
/* ficha bibliográfica: renglones tenues y una línea de tinta bajo el encabezado */
.ficha { background-color: var(--hoja); background-image: repeating-linear-gradient(transparent 0 21px, rgba(0, 41, 231, .09) 21px 22px); background-position: 0 6px; }
.ficha b { padding-bottom: 5px; margin-bottom: 3px; border-bottom: 1.5px solid rgba(0, 41, 231, .55); font: 750 19px/1.15 var(--display); font-stretch: 106%; color: var(--marino); }
.ficha span { font-size: 14.5px; color: var(--suave); }
.ficha:hover { transform: rotate(calc(var(--rot) * -1)) translateY(-6px); box-shadow: 0 26px 44px -18px rgba(7, 15, 61, .45); }
.ficha--1 { --rot: 3deg; right: 0; top: 30%; }
.ficha--2 { --rot: -2.5deg; right: 2%; top: 50%; }
.ficha--3 { --rot: 2deg; right: -1%; top: 70%; }
.hero__desliza { position: absolute; left: 50%; bottom: 18px; translate: -50% 0; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 12.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--suave); text-decoration: none; }
.hero__desliza .i { animation: bota 1.8s var(--ease) infinite; }
@keyframes bota { 0%, 100% { translate: 0 0; } 50% { translate: 0 5px; } }

/* entrada del hero (al cargar) */
.m .hero__titulo .ln > span { translate: 0 108%; }
.m .hero .resalta { background-size: 0% 100%; }
.m .hero__lead, .m .hero__ctas, .m .hero__campus, .m .hero__desliza, .m .hero__carpeta, .m .hero__alumno, .m .hero__def, .m .ficha { opacity: 0; }
.m .hero__trazo { stroke-dashoffset: 1700; }
.m.listo .hero__titulo .ln > span { animation: sube 1s var(--ease) both; }
.m.listo .hero__titulo .ln:nth-child(2) > span { animation-delay: .14s; }
.m.listo .hero .resalta { animation: barre 1s cubic-bezier(.65, 0, .35, 1) .8s both; }
.m.listo .hero__lead { animation: aparece .9s var(--ease) .38s both; }
.m.listo .hero__ctas { animation: aparece .9s var(--ease) .5s both; }
.m.listo .hero__campus { animation: aparece .9s var(--ease) .62s both; }
.m.listo .hero__desliza { animation: aparece .9s var(--ease) 1.6s both; }
.m.listo .hero__carpeta { animation: carpeta 1.1s var(--ease) .2s both; }
.m.listo .hero__alumno { animation: alumno 1.2s var(--ease) .42s both; }
.m.listo .hero__trazo { animation: trazo 1.5s cubic-bezier(.65, 0, .35, 1) 1s both; }
.m.listo .hero__def { animation: definicion 1s var(--ease) .95s both; }
.m.listo .ficha--1 { animation: ficha .9s var(--ease) 1.2s both; }
.m.listo .ficha--2 { animation: ficha .9s var(--ease) 1.34s both; }
.m.listo .ficha--3 { animation: ficha .9s var(--ease) 1.48s both; }
@keyframes sube { from { translate: 0 108%; } to { translate: 0 0; } }
@keyframes barre { from { background-size: 0% 100%; } to { background-size: 100% 100%; } }
@keyframes carpeta { from { opacity: 0; rotate: -7deg; scale: .86; } to { opacity: 1; rotate: 0deg; scale: 1; } }
@keyframes alumno { from { opacity: 0; translate: 0 70px; filter: blur(12px); } to { opacity: 1; translate: 0 0; filter: blur(0); } }
@keyframes trazo { from { stroke-dashoffset: 1700; } to { stroke-dashoffset: 0; } }
@keyframes definicion { from { opacity: 0; translate: -40px -10px; rotate: -14deg; } to { opacity: 1; translate: 0 0; rotate: -3deg; } }
@keyframes ficha { from { opacity: 0; translate: 60px 30px; rotate: 16deg; } to { opacity: 1; translate: 0 0; rotate: var(--rot); } }

/* ---------- ruta (escena fija) ---------- */
.ruta { position: relative; height: 300vh; overflow-x: clip; }
.ruta__fijo { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; flex-direction: column; justify-content: center; gap: clamp(14px, 3vh, 30px); padding: calc(var(--nav-h) + 12px) var(--gutter) clamp(44px, 7vh, 64px); overflow: clip; }
.ruta__cabeza { display: grid; grid-template-columns: auto minmax(0, 420px); justify-content: space-between; align-items: end; gap: 12px 40px; width: min(1160px, 100%); margin-inline: auto; }
.ruta__lead { color: var(--suave); font-size: 17.5px; }
.ruta__mapa { width: min(1160px, 100%, calc((100svh - 460px) * 4)); margin-inline: auto; }
.ruta__lienzo { position: relative; }
.ruta__svg { width: 100%; height: auto; overflow: visible; }
.ruta__guia { fill: none; stroke: rgba(10, 18, 64, .16); stroke-width: 2.5; stroke-dasharray: 2 9; stroke-linecap: round; }
.ruta__tramo { fill: none; stroke: var(--tinta); stroke-width: 5; stroke-linecap: round; }
.ruta__nodo circle { fill: var(--hoja); stroke: rgba(10, 18, 64, .28); stroke-width: 2.5; transition: fill .35s, stroke .35s; }
.ruta__nodo path { fill: none; stroke: #fff; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: opacity .3s; }
.ruta__nodo.on circle { fill: var(--tinta); stroke: var(--tinta); }
.ruta__nodo.on path { opacity: 1; }
.ruta__pluma circle { fill: var(--marca); stroke: var(--tinta); stroke-width: 3; }
.ruta__grado { position: absolute; translate: -50% calc(-100% - 24px); padding: 4px 10px; border-radius: 6px; background: var(--hoja); box-shadow: 0 0 0 1px var(--linea); font: 700 14.5px/1.2 var(--display); font-stretch: 106%; color: var(--marino); white-space: nowrap; transition: background-color .35s, color .35s, box-shadow .35s; }
.ruta__grado.on { background: var(--marino); color: #fff; box-shadow: none; }
.ruta__grado--fin { translate: calc(-100% - 30px) -50%; }
.ruta__pasos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; padding-inline: 4%; margin-top: clamp(10px, 2vh, 22px); }
.paso { position: relative; padding: 18px 20px 18px; border-radius: 14px; background: var(--hoja); box-shadow: 0 0 0 1px var(--linea), 0 14px 30px -22px rgba(7, 15, 61, .5); }
.paso__si { font-size: 14px; font-weight: 600; color: var(--suave); }
.paso__prog { margin-top: 4px; font: 750 20.5px/1.15 var(--display); font-stretch: 106%; letter-spacing: -.01em; color: var(--marino); }
.paso__txt { margin-top: 6px; font-size: 15px; line-height: 1.45; color: var(--texto); }
.paso__ir { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-weight: 700; font-size: 15px; text-decoration: none; }
.paso__ir:hover { text-decoration: underline; }
.ruta__barra { position: absolute; left: 50%; bottom: clamp(16px, 3vh, 26px); translate: -50% 0; width: min(240px, 50%); height: 3px; border-radius: 3px; background: rgba(10, 18, 64, .12); overflow: hidden; }
.ruta__barra i { position: absolute; inset: 0; background: var(--tinta); transform-origin: left; scale: var(--p, 0) 1; }

/* ---------- Bildung (campo azul) ---------- */
.bildung { position: relative; background: var(--tinta); color: #fff; padding-block: clamp(96px, 12vw, 170px); overflow-x: clip; isolation: isolate; }
.bildung::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px); background-size: 22px 22px; }
.bildung__in { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(36px, 5vw, 72px); width: min(1240px, 100%); margin-inline: auto; padding-inline: var(--gutter); }
.bildung__palabra { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 6px 40px; padding-bottom: clamp(24px, 3vw, 40px); border-bottom: 1px solid rgba(255, 255, 255, .22); }
.bildung__grande { font: 900 clamp(70px, 15vw, 224px)/.82 var(--display); font-stretch: 125%; letter-spacing: -.045em; color: #fff; }
.bildung__nota { margin-bottom: .6em; font-size: clamp(18px, 1.7vw, 24px); color: rgba(255, 255, 255, .82); }
.bildung__texto { display: grid; gap: clamp(18px, 2vw, 28px); width: min(900px, 100%); margin-left: auto; }
.bildung__nota em { font-style: italic; color: var(--marino); background: var(--marca); padding: .02em .22em; border-radius: 3px; }
.mision { font: 600 clamp(23px, 2.45vw, 36px)/1.32 var(--display); font-stretch: 100%; letter-spacing: -.012em; color: #fff; }
.mision mark { color: var(--marino); background-color: transparent; background-image: linear-gradient(var(--marca), var(--marca)); background-repeat: no-repeat; background-position: 0 58%; background-size: calc(var(--p, 1) * 100%) 86%; padding-inline: .08em; margin-inline: -.08em; transition: color .3s; }
.m .mision mark:not(.lleno) { color: inherit; }
.mision .w { transition: opacity .2s linear; }

/* ---------- licenciaturas ---------- */
.programas { margin-top: clamp(40px, 6vw, 72px); }
.prog { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr) auto auto; align-items: center; gap: 12px 28px; padding-block: clamp(22px, 2.6vw, 32px); }
.prog:last-child { box-shadow: 0 1px 0 var(--linea); }
.prog__linea { position: absolute; left: 0; right: 0; top: 0; height: 1.5px; background: rgba(10, 18, 64, .2); transform-origin: left; }
.prog__icono { width: 52px; height: 52px; fill: none; stroke: var(--tinta); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.prog__nombre { font: 750 clamp(24px, 2.9vw, 40px)/1.1 var(--display); font-stretch: 108%; letter-spacing: -.024em; color: var(--marino); }
.prog__nombre span { background-image: linear-gradient(transparent 58%, var(--marca) 58%, var(--marca) 92%, transparent 92%); background-repeat: no-repeat; background-size: 0% 100%; transition: background-size .6s var(--ease); }
.prog:hover .prog__nombre span { background-size: 100% 100%; }
.prog__meta { font-weight: 600; font-size: 15.5px; color: var(--suave); white-space: nowrap; }
.prog__ir { display: inline-flex; align-items: center; gap: 8px; padding: 11px 16px; border-radius: 10px; font-weight: 700; font-size: 15.5px; text-decoration: none; white-space: nowrap; box-shadow: inset 0 0 0 1.5px rgba(0, 41, 231, .3); transition: background-color .25s, color .25s, box-shadow .25s; }
.prog__ir:hover { background: var(--tinta); color: #fff; box-shadow: inset 0 0 0 1.5px var(--tinta); }
.prog__ir .i { transition: translate .3s var(--ease); }
.prog__ir:hover .i { translate: 3px 0; }

.admision { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 96px); margin-top: clamp(80px, 10vw, 130px); align-items: start; }
.admision__lado { position: sticky; top: calc(var(--nav-h) + 40px); }
.admision__lead { margin-top: 14px; color: var(--suave); }
.admision__cuenta { margin-top: 26px; font: 600 18px/1 var(--display); color: var(--suave); }
.admision__cuenta b { display: inline-block; min-width: 1.1ch; font: 850 64px/1 var(--display); font-stretch: 116%; letter-spacing: -.04em; color: var(--tinta); font-variant-numeric: tabular-nums; vertical-align: -6px; margin-right: 6px; }
.pasos-adm { position: relative; counter-reset: paso; }
.pasos-adm::before, .pasos-adm::after { content: ""; position: absolute; left: 16px; top: 22px; bottom: 22px; width: 2px; border-radius: 2px; background: rgba(10, 18, 64, .12); }
.pasos-adm::after { background: var(--tinta); transform-origin: top; scale: 1 var(--p, 1); }
.pasos-adm li { position: relative; z-index: 1; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 22px; align-items: start; padding-block: 18px; }
.pasos-adm p { font-size: clamp(17.5px, 1.5vw, 20px); line-height: 1.5; color: var(--grafito); padding-top: 3px; }
.pasos-adm p::before { counter-increment: paso; content: "Paso " counter(paso); display: block; margin-bottom: 2px; font: 700 13.5px/1.4 var(--lectura); letter-spacing: .02em; color: var(--tinta); }
.caja { width: 34px; height: 34px; border-radius: 9px; background: var(--hoja); box-shadow: inset 0 0 0 2px rgba(10, 18, 64, .25); display: grid; place-items: center; transition: background-color .3s, box-shadow .3s; }
.caja svg { width: 24px; height: 24px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; stroke-dashoffset: var(--o, 0); }
.pasos-adm li.on .caja { background: var(--tinta); box-shadow: inset 0 0 0 2px var(--tinta); }

/* ---------- maestrías ---------- */
.maes { background: var(--noche); color: rgba(255, 255, 255, .8); isolation: isolate; }
.maes::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(70% 50% at 85% 0%, rgba(0, 41, 231, .45), transparent 70%); }
.maes .cabeza__lead { color: rgba(255, 255, 255, .74); }
.maes__cabeza { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: 32px clamp(32px, 6vw, 80px); align-items: end; }
.duracion__cifras { font: 650 22px/1.2 var(--display); font-stretch: 106%; color: rgba(255, 255, 255, .86); }
.duracion__cifras b { font: 850 56px/1 var(--display); font-stretch: 118%; letter-spacing: -.04em; color: #fff; vertical-align: -4px; }
.duracion__cifras span { margin-inline: 6px; color: rgba(255, 255, 255, .4); }
.calendario { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-top: 20px; }
.cuatri { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.cuatri i { height: 34px; border-radius: 4px; background: rgba(255, 255, 255, .09); transition: background-color .25s, box-shadow .25s; }
.cuatri i.on { background: var(--tinta-clara); }
.cuatri span { grid-column: 1 / -1; margin-top: 4px; font: 700 13px/1 var(--display); letter-spacing: .06em; color: rgba(255, 255, 255, .55); }
.duracion__mes { margin-top: 12px; font-size: 15px; color: rgba(255, 255, 255, .7); font-variant-numeric: tabular-nums; }
.maestrias { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(28px, 4vw, 64px); margin-top: clamp(48px, 6vw, 80px); }
.maestria { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: 18px; padding-block: 22px; box-shadow: 0 -1px 0 rgba(255, 255, 255, .14); }
.maestria__icono { width: 40px; height: 40px; fill: none; stroke: var(--tinta-clara); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.maestria h3 { font: 700 clamp(19px, 1.7vw, 23px)/1.25 var(--display); font-stretch: 104%; letter-spacing: -.01em; color: #fff; }
.maestria__ir { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .3); transition: background-color .25s, box-shadow .25s, color .25s; }
.maestria__ir:hover { background: var(--marca); color: var(--marino); box-shadow: none; }
.maestria::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 100%; background: linear-gradient(90deg, rgba(110, 134, 255, .14), transparent 70%); opacity: 0; transition: opacity .35s; pointer-events: none; }
.maestria:hover::after { opacity: 1; }

.expediente { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 96px); align-items: center; margin-top: clamp(80px, 10vw, 130px); }
.expediente__lead { margin-top: 14px; color: rgba(255, 255, 255, .74); }
.carpeta { position: relative; padding: 48px clamp(18px, 3vw, 34px) clamp(22px, 3vw, 34px); border-radius: 6px 18px 18px 18px; background: var(--tinta); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6); }
.carpeta::before { content: ""; position: absolute; left: 0; top: -22px; width: 38%; height: 30px; border-radius: 12px 12px 0 0; background: var(--tinta); }
.carpeta__icono { position: absolute; left: 20px; top: -12px; width: 26px; height: 26px; fill: none; stroke: #fff; stroke-width: 1.7; opacity: .8; }
.docs { display: grid; gap: 10px; }
.doc { display: flex; align-items: center; gap: 14px; padding: 15px 18px; border-radius: 8px; background: var(--hoja); color: var(--grafito); font-weight: 600; font-size: 17px; box-shadow: 0 8px 16px -10px rgba(0, 0, 0, .45); }
.doc .i { color: var(--tinta); width: 22px; height: 22px; }
.doc:nth-child(odd) { rotate: -.6deg; }
.doc:nth-child(even) { rotate: .5deg; }

/* ---------- bachillerato ---------- */
.bach { padding-bottom: clamp(84px, 11vw, 150px); }
.examen { position: relative; height: 330vh; margin-top: -12vh; }
.examen__fijo { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: center; gap: clamp(28px, 5vw, 80px); width: min(1240px, 100%); margin-inline: auto; padding: calc(var(--nav-h) + 16px) var(--gutter) 28px; }
.incluye { margin-top: 20px; display: grid; gap: 6px; }
.incluye li { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 12px; font-weight: 600; font-size: clamp(16.5px, 1.4vw, 19px); color: var(--grafito); opacity: .42; transition: opacity .35s, background-color .35s, box-shadow .35s; }
.incluye li .i { width: 26px; height: 26px; color: var(--tinta); }
.incluye li span { background-image: linear-gradient(transparent 58%, var(--marca) 58%, var(--marca) 92%, transparent 92%); background-repeat: no-repeat; background-size: 0% 100%; transition: background-size .6s var(--ease); }
.incluye li.hecho { opacity: .9; }
.incluye li.activo { opacity: 1; background: var(--hoja); box-shadow: 0 0 0 1px var(--linea), 0 12px 24px -18px rgba(7, 15, 61, .5); }
.incluye li.activo span { background-size: 100% 100%; }
.examen__nota { margin-top: 20px; max-width: 34em; font-size: 15.5px; color: var(--suave); }
.hoja-wrap { perspective: 1400px; justify-self: center; width: 100%; max-width: 580px; }
.hoja { position: relative; padding: clamp(18px, 2.4vw, 28px); border-radius: 10px; background: var(--hoja); box-shadow: 0 40px 70px -40px rgba(7, 15, 61, .55), 0 0 0 1px var(--linea); transform-origin: 50% 100%; }
.hoja__cabeza { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 12px; padding-bottom: 12px; border-bottom: 2px solid var(--tinta); }
.hoja__titulo { font: 800 clamp(18px, 1.7vw, 22px)/1.1 var(--display); font-stretch: 110%; letter-spacing: -.01em; color: var(--marino); }
.hoja__etapa { grid-column: 1; font-size: 13.5px; font-weight: 700; color: var(--tinta); }
.hoja__horas { grid-column: 2; grid-row: 1 / span 2; padding: 6px 12px; border-radius: 10px; background: var(--papel); font: 700 15px/1 var(--display); color: var(--suave); }
.hoja__horas b { font: 850 26px/1 var(--display); color: var(--tinta); font-variant-numeric: tabular-nums; }
.hoja__intro { margin-top: 12px; font-size: 13.5px; color: var(--suave); }
.campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 2vw, 22px); margin-top: 12px; }
.campo-h { min-width: 0; }
.campo-h__t { display: inline; font: 750 14.5px/1.3 var(--display); font-stretch: 104%; color: var(--marino); background-image: linear-gradient(transparent 50%, var(--marca) 50%, var(--marca) 94%, transparent 94%); background-repeat: no-repeat; background-size: calc(var(--g, 0) * 100%) 100%; }
.fila { display: grid; grid-template-columns: 18px repeat(4, minmax(0, 1fr)); align-items: center; gap: 4px; margin-top: 6px; }
.fila:first-of-type { margin-top: 10px; }
.fila > b { font: 600 11.5px/1 var(--lectura); color: var(--suave); font-variant-numeric: tabular-nums; }
.burbuja { position: relative; justify-self: center; width: clamp(17px, 1.6vw, 21px); height: clamp(17px, 1.6vw, 21px); border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(10, 18, 64, .3); display: grid; place-items: center; font: 600 9.5px/1 var(--lectura); color: rgba(10, 18, 64, .5); }
.burbuja::before { content: ""; position: absolute; inset: 2px; border-radius: 50%; background: #7C8297; opacity: var(--l, 0); scale: calc(.5 + var(--l, 0) * .5); }
.burbuja::after { content: ""; position: absolute; inset: 1px; border-radius: 50%; background: var(--tinta); opacity: var(--t, 0); scale: calc(.4 + var(--t, 0) * .6); }
.sello { position: absolute; right: clamp(-30px, -2vw, -12px); bottom: clamp(-34px, -2.6vw, -16px); width: clamp(116px, 11vw, 148px); aspect-ratio: 1; display: grid; place-items: center; color: var(--tinta); rotate: -12deg; pointer-events: none; }
.sello svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: rgba(255, 255, 255, .86); stroke: currentColor; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.sello svg circle:nth-child(2) { fill: none; stroke-width: 1.6; stroke-dasharray: 3 4; }
.sello span { position: relative; margin-top: 44%; font: 800 10.5px/1 var(--display); font-stretch: 100%; letter-spacing: .1em; text-transform: uppercase; }

.quien { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; margin-top: clamp(64px, 8vw, 110px); }
.quien__foto { position: relative; max-width: 520px; justify-self: center; width: 100%; isolation: isolate; }
.quien__foto::before { content: ""; position: absolute; left: 6%; right: 6%; top: 24%; bottom: 0; z-index: -1; border-radius: 22px 22px 0 0; background: var(--tinta); }
.quien__foto img { width: 100%; }
.requisitos { display: grid; gap: 14px; margin: 24px 0 32px; }
.requisitos li { display: flex; align-items: center; gap: 16px; font: 750 clamp(22px, 2.3vw, 30px)/1.15 var(--display); font-stretch: 106%; letter-spacing: -.016em; color: var(--marino); }
.requisitos .i { width: 40px; height: 40px; padding: 8px; border-radius: 50%; background: var(--tinta); color: #fff; stroke-width: 2.6; }

/* ---------- informes ---------- */
.informes__in { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.informes__lead { margin-top: 18px; max-width: 30em; font-size: clamp(17px, 1.4vw, 19.5px); color: var(--suave); }
.datos { display: grid; gap: 24px; margin-top: 36px; }
.datos li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; align-items: start; }
.datos li > .i { width: 44px; height: 44px; padding: 10px; border-radius: 12px; background: var(--tinta); color: #fff; stroke-width: 1.8; }
.datos__et { display: block; font-size: 13.5px; font-weight: 700; color: var(--suave); }
.datos a { font-weight: 700; font-size: 18px; overflow-wrap: anywhere; }
.datos address { color: var(--grafito); line-height: 1.5; }
.datos .datos__mapa { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 15.5px; }
.solicitud { padding: clamp(22px, 3vw, 36px); border-radius: 18px; background: var(--hoja); box-shadow: var(--sombra), 0 0 0 1px var(--linea); }
.solicitud__titulo { font: 800 22px/1.1 var(--display); font-stretch: 108%; color: var(--marino); margin-bottom: 18px; }
.campo { margin-bottom: 16px; }
.campo--doble { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.campo label { display: block; margin-bottom: 6px; font-weight: 700; font-size: 14.5px; color: var(--grafito); }
.opcional { font-weight: 400; color: var(--suave); }
.campo input, .campo select, .campo textarea { width: 100%; min-height: 50px; padding: 12px 14px; border: 1.5px solid rgba(10, 18, 64, .22); border-radius: 10px; background: var(--papel); font-size: 17px; color: var(--grafito); transition: border-color .2s, box-shadow .2s, background-color .2s; }
.campo textarea { resize: vertical; min-height: 92px; }
.campo select { appearance: none; padding-right: 42px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230029E7' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 18px; cursor: pointer; }
.campo input:hover, .campo select:hover, .campo textarea:hover { border-color: rgba(10, 18, 64, .4); }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--tinta); background-color: var(--hoja); box-shadow: 0 0 0 4px rgba(0, 41, 231, .16); }
.campo .invalido { border-color: var(--error); background-color: #FFF6F5; }
.solicitud__error { margin-bottom: 14px; padding: 10px 14px; border-radius: 10px; background: #FEF1F0; color: var(--error); font-weight: 600; font-size: 15px; }
.enviado { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--linea); }
.enviado__titulo { display: flex; align-items: center; gap: 8px; font: 750 18px/1.2 var(--display); color: var(--marino); }
.enviado__titulo .i { color: var(--tinta); stroke-width: 2.6; }
.enviado__texto { margin-top: 8px; font-size: 15.5px; color: var(--texto); }
.enviado__botones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }

/* ---------- botón flotante (celular) ---------- */
.flotante { position: fixed; right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); z-index: 90; display: none; align-items: center; gap: 8px; padding: 14px 20px; border-radius: 999px; background: var(--tinta); color: #fff; font-weight: 700; font-size: 15.5px; text-decoration: none; box-shadow: 0 14px 30px -10px rgba(0, 41, 231, .7); opacity: 0; translate: 0 20px; pointer-events: none; transition: opacity .35s, translate .45s var(--ease); }
.flotante.is-on { opacity: 1; translate: 0 0; pointer-events: auto; }

/* ---------- footer ---------- */
.footer { position: relative; background: var(--noche); color: rgba(255, 255, 255, .74); padding: clamp(64px, 8vw, 96px) 0 0; overflow: clip; isolation: isolate; }
.footer__brillo { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--tinta-clara) 30%, #fff 50%, var(--tinta-clara) 70%, transparent); transform-origin: center; }
.footer__brillo::after { content: ""; position: absolute; left: 10%; right: 10%; top: 0; height: 220px; z-index: -1; background: radial-gradient(50% 100% at 50% 0%, rgba(0, 41, 231, .4), transparent 70%); }
.footer__in { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .8fr) minmax(0, 1fr); gap: 40px clamp(32px, 5vw, 72px); width: min(1240px, 100%); margin-inline: auto; padding-inline: var(--gutter); }
.footer__logo { display: block; width: 190px; color: rgba(255, 255, 255, .78); }
.footer__logo .logo__b { fill: #fff; }
.footer__marca p { margin-top: 18px; max-width: 36em; font-size: 15.5px; line-height: 1.6; }
.footer__et { margin-bottom: 12px; font: 700 13.5px/1 var(--lectura); letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-clara); }
.footer__col { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; font-size: 15.5px; }
.footer__col a { color: #fff; text-decoration: none; }
.footer__col a:hover { text-decoration: underline; }
.footer__col address { line-height: 1.55; }
.footer__campus { display: inline-flex; align-items: center; gap: 8px; color: #fff; font-weight: 600; }
.footer__campus .i { color: var(--marca); }
.footer__base { margin-top: clamp(48px, 6vw, 72px); padding: 22px var(--gutter) 26px; box-shadow: 0 -1px 0 rgba(255, 255, 255, .1); text-align: center; font-size: 14px; color: rgba(255, 255, 255, .6); }
.m .footer__brillo { scale: 0 1; opacity: 0; transition: scale 1.1s var(--ease), opacity .4s; }
.m .footer [data-f] { opacity: 0; translate: 0 22px; filter: blur(6px); transition: opacity .9s var(--ease), translate .9s var(--ease), filter .9s var(--ease); transition-delay: calc(250ms + var(--i, 0) * 110ms); }
.m .footer.on .footer__brillo { scale: 1 1; opacity: 1; }
.m .footer.on [data-f] { opacity: 1; translate: 0 0; filter: blur(0); }

/* ---------- responsivo ---------- */
@media (max-width: 1180px) {
  .nav__cta { display: none; }
  .nav__hamb { display: block; z-index: 2; }
  .nav__menu { position: fixed; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; margin: 0; padding: calc(var(--nav-h) + 20px) var(--gutter) 40px; background: var(--tinta); visibility: hidden; opacity: 0; transition: opacity .35s, visibility 0s .35s; }
  .nav[data-abierto] .nav__menu { visibility: visible; opacity: 1; transition: opacity .35s; }
  .nav__menu a { padding: 8px 0; font: 800 clamp(32px, 8vw, 48px)/1.1 var(--display); font-stretch: 112%; letter-spacing: -.03em; color: #fff; opacity: 0; translate: 0 20px; transition: opacity .5s var(--ease), translate .5s var(--ease); }
  .nav__menu a::after { left: 0; right: 0; bottom: 10px; height: 12px; background: rgba(255, 225, 74, .55); }
  .nav[data-abierto] .nav__menu a { opacity: 1; translate: 0 0; }
  .nav[data-abierto] .nav__menu a:nth-child(2) { transition-delay: .05s; }
  .nav[data-abierto] .nav__menu a:nth-child(3) { transition-delay: .1s; }
  .nav[data-abierto] .nav__menu a:nth-child(4) { transition-delay: .15s; }
  .nav[data-abierto] .nav__menu a:nth-child(5) { transition-delay: .2s; }
  .nav__menu .nav__menu-cta { display: inline-flex; align-items: center; gap: 10px; margin-top: 22px; padding: 14px 22px; border-radius: 12px; background: #fff; color: var(--tinta); font: 700 18px/1 var(--lectura); letter-spacing: 0; }
  .nav__menu .nav__menu-cta::after { display: none; }
  .nav[data-abierto] { background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .nav[data-abierto] .nav__logo { position: relative; z-index: 2; color: #fff; }
  .nav[data-abierto] .logo__b { fill: #fff; }
}

@media (max-width: 960px) {
  .hero__in { grid-template-columns: minmax(0, 1fr); gap: 36px; padding-bottom: 72px; }
  .hero__texto { max-width: 640px; }
  .hero__escena { max-width: 470px; max-height: none; }
  .hero__desliza { display: none; }
  .bildung__texto, .admision, .expediente, .informes__in, .maes__cabeza { grid-template-columns: minmax(0, 1fr); }
  .examen { margin-top: 0; }
  .admision__lado { position: static; }
  .quien { grid-template-columns: minmax(0, 1fr); }
  .quien__foto { max-width: 440px; }
  .prog { grid-template-columns: 52px minmax(0, 1fr) auto; }
  .prog__icono { width: 44px; height: 44px; }
  .prog__meta { grid-column: 2; grid-row: 2; margin-top: -6px; }
  .prog__ir { grid-column: 3; grid-row: 1 / span 2; }
  .footer__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .footer__marca { grid-column: 1 / -1; }
  .maestrias { grid-template-columns: minmax(0, 1fr); }
}

/* escenas fijas: solo con pantalla ancha y alta; si no, se recorren sin anclar */
@media (max-width: 999px), (max-height: 619px) {
  .ruta { height: auto; padding-block: clamp(84px, 12vw, 120px); }
  .ruta__fijo { position: relative; height: auto; padding: 0 var(--gutter); gap: 0; overflow: visible; }
  .ruta__cabeza { grid-template-columns: minmax(0, 1fr); }
  .ruta__mapa { width: min(640px, 100%); margin: 36px auto 0; }
  .ruta__lienzo { display: none; }
  .ruta__pasos { position: relative; grid-template-columns: minmax(0, 1fr); gap: 22px; padding: 0 0 0 46px; margin: 0; }
  .ruta__pasos::before, .ruta__pasos::after { content: ""; position: absolute; left: 14px; top: 10px; bottom: 10px; width: 3px; border-radius: 3px; background: rgba(10, 18, 64, .14); }
  .ruta__pasos::after { background: var(--tinta); transform-origin: top; scale: 1 var(--p, 1); }
  .paso::before { content: ""; position: absolute; left: -40px; top: 22px; width: 20px; height: 20px; border-radius: 50%; background: var(--hoja); box-shadow: inset 0 0 0 2.5px rgba(10, 18, 64, .28); transition: background-color .3s, box-shadow .3s; z-index: 1; }
  .paso.on::before { background: var(--tinta); box-shadow: inset 0 0 0 2.5px var(--tinta), 0 0 0 5px rgba(0, 41, 231, .15); }
  .ruta__barra { display: none; }
  .examen { height: auto; }
  .examen__fijo { position: relative; height: auto; grid-template-columns: minmax(0, 1fr); padding: 24px var(--gutter) 0; gap: 36px; }
  .hoja-wrap { max-width: 560px; }
}

@media (max-width: 700px) {
  :root { --nav-h: 64px; }
  body { font-size: 16.5px; }
  .nav__logo { width: 136px; }
  .hero__in { padding-top: calc(var(--nav-h) + 28px); }
  .hero__ctas .btn { flex: 1 1 200px; }
  .hero__escena { max-width: 400px; width: 100%; }
  .hero__def { left: -2%; top: 0; width: 50%; padding: 12px 14px 14px; }
  .hero__def-palabra { font-size: 21px; }
  .hero__def-texto { font-size: 13.5px; }
  .ficha { width: 41%; padding: 10px 12px 9px; }
  .ficha b { font-size: 16.5px; }
  .ficha span { font-size: 12.5px; }
  .ficha--1 { right: -1%; }
  .ficha--2 { right: 1%; }
  .ficha--3 { right: -2%; }
  .prog { grid-template-columns: 44px minmax(0, 1fr); gap: 8px 16px; }
  .prog__icono { width: 38px; height: 38px; }
  .prog__meta { grid-column: 2; grid-row: auto; margin-top: 0; }
  .prog__ir { grid-column: 2; grid-row: auto; justify-self: start; margin-top: 4px; }
  .maestrias { grid-template-columns: minmax(0, 1fr); }
  .maestria { grid-template-columns: 36px minmax(0, 1fr) 44px; gap: 14px; }
  .maestria__icono { width: 34px; height: 34px; }
  .duracion__cifras b { font-size: 44px; }
  .calendario { gap: 6px; }
  .cuatri { gap: 3px; }
  .cuatri i { height: 28px; }
  .campo--doble { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .campo--doble > div + div { margin-top: 0; }
  .flotante { display: inline-flex; }
  .footer__in { grid-template-columns: minmax(0, 1fr); }
  .footer__base { padding-bottom: 90px; }
  .requisitos .i { width: 36px; height: 36px; }
  .sello { right: -8px; bottom: -22px; }
}

@media (max-width: 400px) {
  .hero__def-tipo { display: none; }
  .campos { gap: 12px 10px; }
  .fila { gap: 2px; grid-template-columns: 15px repeat(4, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}