/* ==========================================================================
   Navbar
   Sin links de navegación a propósito: landing de pauta paga, una sola
   salida (convertir). Header solo trae logo + teléfono + CTA.
   ========================================================================== */
.nav {
	position: fixed; top: 0; left: 0; right: 0; z-index: 50;
	background: rgba(20,22,59,0.72);
	backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
	padding: 18px 5%;
	display: flex; align-items: center; justify-content: space-between;
	border-bottom: 1px solid rgba(255,255,255,0.06);
}
.nav-logo { display: flex; align-items: center; gap: 12px; text-decoration: none; color: #fff; flex-shrink: 1; min-width: 0; }
.nav-logo-img { height: 64px; width: auto; max-width: 220px; object-fit: contain; flex-shrink: 0; }
.nav-logo-bar { width: 7px; height: 64px; background: var(--si-yellow); border-radius: 2px; flex-shrink: 0; }
.nav-logo-text { min-width: 0; overflow: hidden; }
.nav-logo-text strong { font-family: var(--si-font-display); font-weight: 800; font-size: 1.05rem; display: block; color: #fff; border-bottom: 3px solid var(--si-blue); padding-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-logo-text span { font-family: var(--si-font-display); font-weight: 500; font-size: 0.65rem; color: rgba(255,255,255,0.55); text-transform: uppercase; letter-spacing: 1.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.nav-links { display: flex; align-items: center; gap: 28px; list-style: none; margin: 0; padding: 0; }
.nav-links a { font-family: var(--si-font-display); font-weight: 500; font-size: 0.82rem; color: rgba(255,255,255,0.75); text-decoration: none; letter-spacing: 0.2px; transition: color 0.2s; }
.nav-links a:hover { color: #fff; }
.nav-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.nav-phone {
	display: inline-flex; align-items: center; gap: 8px;
	font-family: var(--si-font-display); font-weight: 600; font-size: 1rem;
	background: var(--si-yellow); color: var(--si-ink); border: none;
	padding: 10px 20px; border-radius: 999px; cursor: pointer;
	text-decoration: none; transition: all 0.25s ease; min-height: 48px;
}
.nav-phone svg { width: 16px; height: 16px; flex-shrink: 0; }
.nav-phone:hover { background: #FFD840; color: var(--si-ink); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(255,204,9,0.4); }
.nav-phone:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.nav-cta {
	font-family: var(--si-font-display); font-weight: 600; font-size: 1rem;
	background: var(--si-yellow); color: var(--si-ink); border: none;
	padding: 10px 24px; border-radius: 999px; cursor: pointer;
	text-decoration: none; transition: all 0.25s ease; flex-shrink: 0;
	display: inline-flex; align-items: center; min-height: 48px;
}
.nav-cta:hover { background: #FFD840; transform: translateY(-1px); box-shadow: 0 4px 16px rgba(255,204,9,0.4); }
.nav-cta:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
@media (max-width: 768px) {
	/* Una sola fila también en móvil: la cuenta atrás va en línea con el logo y
	   los botones, no en una segunda fila. */
	.nav { padding: 8px 3%; gap: 8px; flex-wrap: nowrap; }
	.nav-links { display: none; }
	.nav-logo { flex-shrink: 0; }
	/* El logo conserva el cuerpo de escritorio en toda la franja móvil: es la
	   marca y es lo que el encargo pide agrandar, así que el sitio para el
	   resto de la fila sale de los rellenos, no de encogerlo. */
	.nav-logo-img { height: 46px; max-width: 150px; }
	.nav-logo-bar { height: 46px; }
	.nav-logo-text strong { font-size: 0.9rem; }
	.nav-logo-text span { font-size: 0.6rem; }
	.nav-logo { order: 1; }
	.nav-actions { order: 3; gap: 6px; flex-shrink: 0; }
	/* La cuenta atrás ocupa el hueco 2 y se ajusta en su propio bloque, al
	   final de esta hoja: sus reglas base viven allí y ganarían a cualquier
	   ajuste escrito aquí. */
	/* El teléfono se queda en icono: el icono ya dice lo que es. Acotado al
	   nav, porque la misma clase la usa el botón del bloque de cierre. */
	.nav .nav-phone { min-height: 40px; padding: 10px; }
	.nav .nav-phone-num { display: none; }
	/* El botón sigue a la vista en tableta, con el mismo cuerpo compacto que la
	   llamada de la cuenta atrás para que la barra mantenga su fila de 40 px. */
	.nav .nav-cta { padding: 9px 14px; font-size: 0.8rem; min-height: 40px; }
}
@media (max-width: 599px) {
	/* Aquí es donde los cuatro elementos dejan de caber en la fila. Por debajo
	   de este ancho la llamada del nav cede el sitio a la de la cuenta atrás:
	   las dos apuntan al formulario, la cuenta atrás es la que lleva la
	   urgencia, y «Request Info» sigue a la vista como botón grande dentro del
	   hero. */
	.nav .nav-cta { display: none; }
}
@media (max-width: 380px) {
	/* El logo no se encoge en 360 ni en 375, que son los anchos de móvil más
	   habituales: el hueco sale de estrechar el relleno lateral de la barra y su
	   separación interna. */
	.nav { padding: 8px 2%; gap: 6px; }
	.nav-logo-text span { display: none; }
	.nav-countdown__date { display: none; }
}
@media (max-width: 359px) {
	/* Por debajo del móvil más estrecho en uso ya no da de sí: con los cuatro
	   elementos en la misma fila, sostener el logo entero deja a la cuenta atrás
	   sin ancho ni para su palabra más larga y el texto se monta sobre el botón.
	   Aquí sí cede el logo, unos pocos píxeles, antes que provocar el solape. */
	.nav-logo-img { height: 40px; max-width: 130px; }
	.nav-logo-bar { height: 40px; }
}
@media (min-width: 769px) and (max-width: 900px) {
	/* Justo encima de la franja móvil la barra vuelve al cuerpo de escritorio
	   —logo de 64 px, teléfono con rótulo, dos llamadas a tamaño completo— y
	   ahí ya no cabe: la cuenta atrás se queda sin el ancho de su contenido, su
	   botón se sale por la derecha y aterriza encima del botón del teléfono, y
	   el logo pisa el mensaje por la izquierda. Lo que cede es el cromo de los
	   botones, no el logo, que es lo que se pide agrandar: el rótulo del
	   teléfono sobra porque el icono ya dice lo que es. */
	.nav .nav-phone-num { display: none; }
	.nav .nav-phone { padding: 12px; }
	.nav .nav-cta { padding: 12px 16px; font-size: 0.9rem; }
	.nav-countdown { gap: 10px; }
	.nav-countdown__cta { padding: 10px 14px; font-size: 0.9rem; }
	.nav-countdown__text { font-size: 0.82rem; }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero { min-height: 100vh; position: relative; background: var(--si-navy-deep); padding: 0 5vw; overflow: hidden; }
.hero-bg { position: absolute; inset: -2px; z-index: 1; background: linear-gradient(135deg, rgba(26,28,78,0.88) 0%, rgba(20,22,59,0.72) 50%, rgba(26,28,78,0.82) 100%); }
.hero-bg-img { position: absolute; inset: -2px; z-index: 0; overflow: hidden; }
/* El encuadre elegido en el panel gobierna de tableta hacia arriba. En movil el
   recorte lateral es tan fuerte que un encuadre desplazado saca del cuadro al
   sujeto de la escena, asi que ahi se vuelve al centro. */
.hero-bg-img video, .hero-bg-img img { width: 100%; height: 100%; object-fit: cover; object-position: var(--si-hero-pos, 50% 50%); }
@media (max-width: 768px) {
	.hero-bg-img video, .hero-bg-img img { object-position: 50% 50%; }
}
.hero::after { content: ''; position: absolute; z-index: 1; pointer-events: none; top: 10%; right: -5%; width: 50%; height: 60%; background: radial-gradient(ellipse at center, rgba(68,119,187,0.18) 0%, transparent 70%); }
.hero-content { max-width: 900px; position: relative; z-index: 2; text-align: center; margin: 0 auto; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: 128px 0 76px; }
/* El bloque de botones y copy baja para abrir aire en el centro del hero y que
   se vea mas foto entre el titular y ellos. El hueco escala con el alto de la
   ventana en vez de ser fijo: en una pantalla corta 36px ya es todo el aire que
   hay, y en una grande se queda corto. */
.hero h1 { font-family: var(--si-font-display); font-weight: 800; font-size: clamp(2.3rem, 5.4vw, 4.6rem); line-height: 1.06; margin: 0 0 clamp(36px, 9vh, 110px); text-wrap: balance; }
.hero h1 .white { color: #fff; }
.hero h1 .yellow { color: var(--si-yellow); }
.hero-buttons { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }
.hero .btn-primary, .hero .btn-secondary, .hero .btn-call { font-size: 1.3rem; padding: 19px 46px; min-height: 56px; }
.hero-intro { font-family: var(--si-font-body); font-weight: 400; font-size: 1.2rem; color: rgba(255,255,255,0.72); line-height: 1.65; max-width: 760px; margin: 28px auto 0; text-wrap: pretty; }

/* Trust strip */
/* Va a sangre dentro del hero: los márgenes negativos cancelan el 5% de
   relleno lateral de .hero para que el degradado llegue a los dos bordes, y el
   relleno propio devuelve el aire al contenido. Sin borde superior a
   propósito: la línea marcaba demasiado el corte, y el degradado ya funde la
   franja con el hero. */
.trust-strip {
	position: relative; z-index: 3;
	background: linear-gradient(180deg, rgba(10,12,40,0) 0%, rgba(10,12,40,0.85) 45%, var(--si-navy-darker) 100%);
	margin-inline: -5vw; padding: 60px 5vw 76px;
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
.trust-item { text-align: center; }
.trust-value { font-family: var(--si-font-display); font-weight: 800; font-size: 3.2rem; color: #fff; letter-spacing: -0.5px; }
.trust-label { font-family: var(--si-font-body); font-weight: 400; font-size: 1.12rem; color: rgba(255,255,255,0.55); margin-top: 6px; line-height: 1.4; }
@media (max-width: 768px) {
	.hero { padding: 0 6vw; }
	/* El suelo del hero es la barra fija, que en móvil son dos filas y cuya
	   altura mide el JS. El mínimo cubre el caso de que el JS no llegue a correr. */
	.hero-content { min-height: 100svh; padding: max(96px, calc(var(--si-nav-h, 109px) + 20px)) 0 56px; }
	.hero h1 { font-size: 1.8rem; }
	.hero-buttons { flex-direction: column; }
	.hero .btn-primary, .hero .btn-secondary, .hero .btn-call { width: 100%; text-align: center; justify-content: center; }
	.hero-intro { font-size: 1.05rem; margin-top: 20px; }
	.trust-strip { grid-template-columns: 1fr 1fr; margin-inline: -6vw; padding: 32px 6vw 28px; }
	.trust-value { font-size: 2.2rem; }
	/* La bajada se lee junto a una cifra de 2.2rem: por debajo de 0.9rem el
	   contraste de cuerpo entre una y otra es tan grande que la etiqueta deja
	   de leerse. La rejilla es de dos columnas, asi que el tope lo pone el
	   rotulo mas largo, que aqui todavia entra en dos lineas. */
	.trust-label { font-size: 0.92rem; }
}

/* ==========================================================================
   Fast Facts
   ========================================================================== */
/* La franja va a sangre y las tres cifras se leen apiladas, no en columnas.
   Con la cifra al mismo cuerpo que la de la franja del hero, tres columnas no
   dan el ancho que piden los rótulos largos a ningún ancho de pantalla: la
   rejilla tiene tope, así que la columna se queda en poco más de 300 px de
   texto y cifras como «#31 Best Job» o «12-21 months» se parten dejando una
   palabra sola en la última línea. Apilada, cada cifra y cada bajada entran
   enteras en una sola línea desde 320 px en adelante. */
/* Control de pausa del video de fondo. Va anclado abajo a la derecha del hero,
   fuera del recorrido del texto, y con contraste propio para leerse sobre
   cualquier fotograma. El icono se dibuja con dos barras o un triangulo segun
   el estado, sin depender de ninguna fuente de iconos. */
.hero-video-toggle {
	position: absolute; right: 16px; bottom: 16px; z-index: 3;
	width: 44px; height: 44px; padding: 0;
	display: grid; place-items: center;
	border: 1px solid rgba(255,255,255,0.6);
	border-radius: 50%;
	background: rgba(20,22,59,0.65);
	color: #fff; cursor: pointer;
	transition: background 0.2s;
}
.hero-video-toggle:hover { background: rgba(20,22,59,0.85); }
.hero-video-toggle:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(255,255,255,0.95), 0 0 0 6px rgba(20,22,59,0.85);
}
.hero-video-toggle__icon { display: block; width: 14px; height: 16px; }
.hero-video-toggle[data-estado="reproduciendo"] .hero-video-toggle__icon {
	border-left: 4px solid currentColor; border-right: 4px solid currentColor;
	width: 14px; box-sizing: border-box;
}
.hero-video-toggle[data-estado="parado"] .hero-video-toggle__icon {
	width: 0; height: 0; margin-left: 3px;
	border-left: 12px solid currentColor;
	border-top: 8px solid transparent; border-bottom: 8px solid transparent;
}
@media (max-width: 768px) {
	.hero-video-toggle { right: 12px; bottom: 12px; }
}

.fast-facts { background: linear-gradient(135deg, #FFE066 0%, #FFCC09 100%); padding: 56px 6%; }
.facts-grid { display: grid; grid-template-columns: repeat(3, 1fr); max-width: 1240px; margin: 0 auto; gap:50px;}
.fact-card { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 14px 0; border-right: 1px solid rgba(20,22,59,0.15); }
.fact-card:last-child { border: none; }
.fact-icon { width: 44px; height: 44px; flex-shrink: 0; color: var(--si-navy-darker); }
/* El <svg> del icono se emite sin class, así que se apunta por elemento: sin
   esto se encoge dentro del flex de la tarjeta cuando la cifra ocupa más ancho
   y deja de medir los 44px con los que se dibuja. */
.fact-card > svg { flex-shrink: 0; }
/* La cifra va al mismo cuerpo que la de la franja de confianza del hero
   (.trust-value): las dos franjas se leen seguidas y el salto de tamaño entre
   una y otra era justo lo que chirriaba. La bajada ya coincidía con la de esa
   franja en escritorio. */
/* En tres columnas la cifra dispone de unos 280px, y a 3.2rem se parten trece
   de las veinticuatro cifras del conjunto: «12-21 months», «#31 Best Job»,
   «24 months», «100% Online» y «20 Months» entre ellas. A 2.5rem entran todas
   en una linea. Las dos que siguen partiendo —«As Little As 20 Months» y «9th
   Highest-Paying Job»— no son cifras sino frases: para una linea pedirian bajar
   a 24px, y eso se arregla acortando el texto, no encogiendo la franja. */
.fact-value { font-family: var(--si-font-display); font-weight: 800; font-size: 2.5rem; color: var(--si-navy-darker); line-height: 1.2; margin-bottom: 6px; }
.fact-value sup { font-size: 0.6em; vertical-align: super; }
.fact-label { font-family: var(--si-font-body); font-weight: 400; font-size: 1.12rem; color: rgba(20,22,59,0.75); line-height: 1.4; }
@media (max-width: 768px) {
	/* Cifra y bajada van al mismo cuerpo que la franja de confianza del hero,
	   que es lo que pide el encargo. La que se mueve es la de aquí: la del hero
	   vive en una rejilla de dos columnas donde subirla parte sus etiquetas en
	   tres líneas y estira el hero, mientras que esta franja va a una sola
	   columna y absorbe el cambio sin mover nada. */
	.fact-value { font-size: 2.2rem; width: 200px; }
	/* Esta franja va a una sola columna, asi que la bajada dispone de todo el
	   ancho y admite mas cuerpo que la del hero sin partirse. */
	.fact-label { font-size: 1.02rem; }
	.facts-grid{grid-template-columns: 1fr;}

	/*Cambio de borde para responsive CARD*/
	.fact-card { border-bottom: 1px solid rgba(20,22,59,0.15); border-right: none; }
}
@media (max-width: 359px) {
	/* Por debajo del móvil más estrecho en uso, cifras de tres palabras como
	   «#31 Best Job» o «12-21 months» ya no entran en una línea y dejan la
	   última con una palabra sola. Se recupera ancho estrechando el margen de
	   la franja y su separación interna, y las dos cifras —la de aquí y la de
	   la franja del hero— bajan juntas para que no se pierda la igualdad de
	   cuerpo que pide el encargo. */
	.fast-facts { padding: 56px 4%; }
	.fact-card { gap: 10px; }
	.fact-value, .trust-value { font-size: 2rem; }
}

/* ==========================================================================
   Expect / Carrusel
   ========================================================================== */
.expect { background: linear-gradient(135deg, var(--si-navy) 0%, var(--si-navy-deep) 55%, var(--si-navy-darker) 100%); padding: 72px 8%; overflow: hidden; }
.expect-header { margin-bottom: 48px; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.expect-header .section-heading { margin-bottom: 0; }
.expect .section-heading p { margin-top: 16px; max-width:100%; font-size: 1.5rem; }
.expect-nav { display: none; gap: 12px; flex-shrink: 0; }
.expect-nav button { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.3); background: transparent; color: #fff; font-size: 1.1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; }
.expect-nav button:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.6); }
.expect-nav button:focus-visible { outline: 3px solid var(--si-yellow); outline-offset: 2px; }
.expect-track { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
/* Todas las tarjetas se leen de entrada. Antes solo la primera estaba a plena
   opacidad y el resto al 45%: se veian como fondo, no como contenido, y en tactil
   —donde no hay hover— no se encendian nunca. */
.expect-card { position: relative; border-radius: var(--si-radius); overflow: hidden; aspect-ratio: 1/1; transition: transform 0.3s, opacity 0.3s, filter 0.3s; opacity: 1; filter: none; }
@media (hover: hover) {
	.expect-track:hover .expect-card { opacity: 0.45; filter: brightness(0.6); }
	.expect-track:hover .expect-card:hover { opacity: 1; filter: brightness(1); transform: translateY(-4px); }
}
.expect-card-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.expect-card-overlay { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(20,22,59,0.95) 0%, rgba(20,22,59,0.7) 40%, rgba(20,22,59,0.1) 70%, transparent 100%); display: flex; flex-direction: column; justify-content: flex-end; padding: 28px 24px; }
.expect-card-label { font-family: var(--si-font-display); font-weight: 700; font-size: 1.1rem; color: #fff; margin-bottom: 8px; line-height: 1.25; }
.expect-card-text { font-family: var(--si-font-body); font-weight: 400; font-size: 1rem; color: rgba(255,255,255,0.7); line-height: 1.55; }
@media (max-width: 768px) {
	.expect { padding: 64px 0 64px 6%; }
	.expect-header { padding-right: 6%; }
	.expect-nav { display: flex; margin-top: 24px; }
	.expect-track { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; scroll-behavior: smooth; padding-right: 6%; grid-template-columns: none; }
	.expect-track::-webkit-scrollbar { display: none; }
	.expect-card { flex: 0 0 80%; min-width: 0; scroll-snap-align: start; aspect-ratio: 3/4; opacity: 1; filter: none; }
	.expect-header{display: block;}
	.expect .section-heading p{font-size: 1.1rem;}
}

/* ==========================================================================
   Curriculum
   ========================================================================== */
.curriculum { background: linear-gradient(150deg, #191b47 0%, var(--si-navy-deep) 60%, var(--si-navy-darker) 100%); padding: 72px 8%; }
.cur-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 10% 20px; max-width: 1200px; align-items: start; margin: 0 auto; margin-bottom: 10%; }
.cur-heading-cell { grid-column: 2; grid-row: 1; }
.cur-image-wrap { grid-column: 1; grid-row: 2 / span 20; position: relative; aspect-ratio: 1/1; border-radius: var(--si-radius); overflow: hidden; align-self: start; }
.cur-image-wrap img { inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.45s ease; }
.cur-image-wrap img.active { opacity: 1; }
.cur-item { grid-column: 2; display: flex; align-items: center; gap: 10px; padding: 7px 18px; border-left: 3px solid rgba(255,255,255,0.12); cursor: pointer; transition: border-color .3s, background .3s, transform .3s; }
.cur-item:hover { background: rgba(255,255,255,0.06); border-left-color: rgba(255,204,9,0.55); transform: translateX(2px); }
.cur-item.active { border-left-color: var(--si-yellow); background: rgba(68,119,187,0.12); }
.cur-item-icon { width: 25px; height: 25px; color: rgba(255,255,255,0.35); flex-shrink: 0; }
.cur-item.active .cur-item-icon { color: var(--si-yellow); }
.cur-item-title { font-family: var(--si-font-display); font-weight: 600; font-size: 1.1rem; color: rgba(255,255,255,0.55); }
.cur-item.active .cur-item-title { color: #fff; font-weight: 700; }
.cur-item-desc { display: none; }
@media (min-width: 769px) {
	/* La celda del título se sangra hasta la columna de iconos de la lista
	   (3px de borde + 18px de relleno del item) para que el icono del libro
	   caiga justo encima de los iconos de los temas. */
	.cur-heading-cell { padding-left: 21px; }
	/* La foto arranca en la fila del primer tema y baja hasta la altura de su
	   icono, que flota centrado respecto de su propio texto: cuando ese primer
	   título ocupa dos líneas el icono cae unos píxeles más abajo que el relleno
	   del item, y la foto lo sigue. El desplazamiento lo mide el JS y lo publica
	   en --si-cur-img-top; el valor de reserva es el relleno superior del item,
	   que es donde queda el icono cuando el título cabe en una línea. */
	.cur-image-wrap { top: var(--si-cur-img-top, 7px); }
}
@media (max-width: 768px) {
	.curriculum { padding: 64px 6%; }
	.cur-layout { grid-template-columns: 1fr; gap: 0; }
	.cur-heading-cell, .cur-image-wrap, .cur-item { grid-column: 1; }
	.cur-heading-cell { margin-bottom: 24px; padding-left: 19px; }
	/* Cada tema se apoya sobre su foto en vez de ir debajo: así su icono
	   arranca a la altura del tope de la imagen, que es lo que pide el encargo
	   y no se cumplía con el texto apilado detrás de la foto. La altura de la
	   foto es fija para que el desplazamiento del texto sea exacto, y la foto
	   baja los mismos píxeles que el relleno superior del tema, igual que en
	   escritorio, para que los dos bordes coincidan. */
	.cur-image-wrap { position: relative; top: 12px; grid-row: auto; margin: 0; height: 190px; aspect-ratio: auto; }
	.cur-image-wrap img { opacity: 1 !important; }
	/* Posicionado a propósito: la foto lo está también, y sin esto se pintaría
	   por encima del texto que se le monta encima. */
	/* Rejilla en vez de caja flexible para separar dos cosas que en móvil
	   chocaban: align-content deja el bloque pegado arriba, a la altura del tope
	   de la foto, mientras que align-items centra el icono dentro de su propia
	   fila. Así el icono queda centrado respecto de su texto cuando el título
	   cae en dos o tres líneas, sin que el bloque se despegue del tope. */
	.cur-item, .cur-item:hover, .cur-item.active {
		position: relative; z-index: 1;
		display: grid; grid-template-columns: auto 1fr;
		align-content: start; align-items: center;
		margin: -190px 0 32px; min-height: 190px;
		padding: 12px 16px 16px; border-left-color: var(--si-yellow); transform: none;
		background: linear-gradient(180deg, rgba(13,15,40,0.86) 0%, rgba(13,15,40,0.5) 38%, rgba(13,15,40,0) 78%);
	}
	/* El icono se ancla al tope de su fila en vez de centrarse en ella: con un
	   titulo de dos o tres lineas, centrado caia por debajo del borde superior
	   de la foto sobre la que se apoya el tema. */
	.cur-item-icon { align-self: start; margin-top: 2px; }
	.cur-item-icon, .cur-item.active .cur-item-icon { color: var(--si-yellow); }
	.cur-item-title, .cur-item.active .cur-item-title { color: #fff; font-weight: 700; }
	.phone-link .nav-phone{font-size: 1.1rem;}
}

/* ==========================================================================
   Experience (bento)
   ========================================================================== */
.experience { background: var(--si-navy-deep); padding: 64px 8%; border-top: 1px solid rgba(255,255,255,0.08); border-bottom: 1px solid rgba(255,255,255,0.08); }
/* Mismo relleno lateral que .bento: el encabezado es hermano de la rejilla, no
   va dentro de ella como en las otras secciones, asi que sin esto el titulo y
   las tarjetas de su propia seccion arrancarian en verticales distintas. */
.experience .section-heading { max-width: 1100px; margin: 0 auto 28px; padding: 0 20px; }
.experience .section-heading p { margin-top: 16px; max-width: 100%; font-size: 1.5rem }
/* Las filas se crean según las tarjetas que haya. Con un número de filas fijo,
   una sección con menos tarjetas de las que caben reservaba igualmente la fila
   sobrante y dejaba un hueco muerto bajo la última tarjeta, que rompía la
   simetría con el aire superior de la sección. */
/* El relleno lateral es el mismo que el de .pgrid-inner y .gallery-inner: las
   tres rejillas comparten ancho maximo y sin el las tarjetas de aqui arrancan
   20px por fuera de las de las secciones vecinas. */
.bento { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(185px, auto); gap: 12px; max-width: 1100px; margin: 0 auto; padding: 0 20px; }
/* Con exactamente cuatro tarjetas, tres columnas dejan una sola en la última
   fila. En dos columnas la sección cierra en cuadrado. Se decide contando las
   tarjetas y no por página, así que vale para cualquier sección que quede en
   cuatro. Las demás tienen entre ocho y catorce y no entran aquí. */
.bento:has(> .bento-card:nth-child(4):last-child) { grid-template-columns: repeat(2, 1fr); }
.experience .bento-card { justify-content: flex-end; }
.experience .bento-card.span-2 { grid-column: span 2; }
.bento-card { position: relative; border-radius: 8px; overflow: hidden; padding: 14px; display: flex; flex-direction: column; justify-content: flex-end; transition: transform .28s ease, box-shadow .28s ease; }
.bento-card:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(0,0,0,0.4); z-index: 2; }
.bento-card.has-img { background-size: cover; background-position: center; }
.bento-card.has-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(13,15,40,0.97) 0%, rgba(13,15,40,0.8) 45%, rgba(13,15,40,0.42) 100%); }
.bento-card.solid-yellow { background: var(--si-yellow); }
.bento-card.solid-blue { background: var(--si-blue); }
.bento-card.solid-sky { background: var(--si-sky); }
.bento-card > * { position: relative; z-index: 1; }
/* Todo el contenido del grid va en blanco, sea cual sea el fondo de la tarjeta.
   El icono necesita declararlo aquí: el <svg> pinta con stroke="currentColor",
   así que sin color propio heredaría el del body y saldría oscuro. */
.bento-icon { width: 20px; height: 20px; margin-bottom: 8px; display: block; flex-shrink: 0; color: #fff; }
.bento-title { font-family: var(--si-font-display); font-weight: 800; color: #fff; line-height: 1.15; margin-bottom: 2px; font-size: 1.1rem; }
.bento-big { font-family: var(--si-font-display); font-weight: 800; font-size: 1.8rem; line-height: 1; margin-bottom: 2px; color: #fff; }
/* Única excepción: sobre el amarillo el blanco no se lee. Estas tres reglas
   sólo tienen efecto mientras queden tarjetas guardadas con el tipo «Amarillo
   sólido» y se van con ellas. */
.bento-card.solid-yellow .bento-icon { color: var(--si-navy-darker); }
/* Los iconos de programa traen colores propios, y uno de sus azules es el mismo
   de la tarjeta azul: ahi el dibujo desaparece. Dentro del bento se pintan al
   color de la tarjeta, como los del juego generico. El modificador acota la
   regla: los genericos son trazo con fill:none y esto los volveria manchas. */
.bento-icon--programa :is(path, rect, circle, ellipse, polygon, polyline, line) { fill: currentColor; stroke: none; }
.bento-card.solid-yellow .bento-title { color: var(--si-navy-darker); }
.bento-card.solid-yellow .bento-big { color: var(--si-navy-darker); }
@media (max-width: 768px) {
	.experience { padding: 64px 0 64px 6%; }
	.experience .section-heading { padding-right: 6%; }
	.bento { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-right: 6%; grid-template-columns: none; }
	.bento::-webkit-scrollbar { display: none; }
	.bento-card { flex: 0 0 72%; min-width: 0; scroll-snap-align: start; aspect-ratio: 3/4; padding: 20px 18px; }
	.experience .bento-card.span-2 { grid-column: auto; }
	.bento-big { font-size: 2.2rem; }
	.section-heading p.light{font-size: 1.1rem;}
}

/* ==========================================================================
   Accreditation (marquee infinito)
   ========================================================================== */
.accred-heading { text-align: center; margin: 0 0 40px; font-family: var(--si-font-display); font-size: 2.2rem; font-weight: 800; line-height: 1.15; color: #fff; }
.accreditation { position: relative; padding: 56px 8%; background: #0B0D24; overflow: hidden; }
.accred-marquee { position: relative; max-width: 1200px; margin: 0 auto; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%); }
.accred-track { display: flex; align-items: center; gap: 90px; width: max-content; animation: accredScroll 32s linear infinite; }
.accred-marquee:hover .accred-track { animation-play-state: paused; }
.accred-logo { display: flex; align-items: center; justify-content: center; height: 56px; flex-shrink: 0; margin: 0; }
.accred-logo svg { width: 150px; height: 100%; opacity: 0.9; }
.accred-logo img { display: block; height: 100%; width: auto; }
/* Los logos oficiales llegan en formatos dispares: unos en blanco calado y
   otros en color sobre fondo claro. Sobre el azul de la seccion solo se leen
   todos si van sobre una placa blanca comun, con la altura normalizada. */
.accred-logo:has(img) { height: auto; background: #fff; border-radius: 8px; padding: 14px 22px; }
.accred-logo:has(img) img { height: 64px; width: auto; max-width: 380px; object-fit: contain; }
@keyframes accredScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .accred-track { animation: none; } }
@media (max-width: 768px) { .accreditation { padding: 48px 6%; } .accred-heading { font-size: 1.7rem; } .accred-track { gap: 56px; } .accred-logo svg { width: 120px; } }

/* ==========================================================================
   Testimonials
   ========================================================================== */
.testimonials { background: linear-gradient(160deg, var(--si-navy-deep) 0%, var(--si-navy-darker) 100%); position: relative; overflow: hidden; padding: 72px 8%; }
.testimonials-header { max-width: 1100px; margin: 0 auto 28px; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; position: relative; z-index: 1; }
.testimonials-header .section-heading { margin-bottom: 0; text-align: left; }
.testimonials-nav { display: flex; gap: 12px; flex-shrink: 0; }
/* Las flechas se retiran en dos casos, cada uno con su clase: cuando no hay
   carril que recorrer —no desplazarían nada— y cuando hay tres citas o menos,
   que es el número por debajo del cual el cliente no las quiere. Las dos las
   pone el JS, así que vuelven solas en cuanto entre la cuarta cita o se
   estreche la pantalla. */
.testimonials--sin-recorrido .testimonials-nav,
.testimonials--pocas-citas .testimonials-nav { display: none; }
.testimonials-nav button { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.3); background: transparent; color: #fff; font-size: 1.1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; }
.testimonials-nav button:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.6); }
.testimonials-nav button:focus-visible { outline: 3px solid var(--si-yellow); outline-offset: 2px; }
.testimonial-grid {
	display: flex; gap: 20px; max-width: 1100px; margin: 0 auto; position: relative; z-index: 1;
	overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
	scrollbar-width: none; -ms-overflow-style: none; padding-bottom: 4px;
}
.testimonial-grid::-webkit-scrollbar { display: none; }
.testimonial-grid:focus-visible { outline: 3px solid var(--si-yellow); outline-offset: 4px; }
.testimonial-card {
	background: rgba(68,119,187,0.18); border: 1px solid rgba(68,119,187,0.25); border-radius: 12px;
	padding: 32px 32px 28px; display: flex; flex-direction: column; justify-content: space-between; position: relative;
	flex: 0 0 calc(50% - 10px); scroll-snap-align: start; min-width: 0;
}
@media (min-width: 1000px) { .testimonial-card { flex-basis: calc(33.333% - 14px); } }
.quote-text { font-family: var(--si-font-body); font-weight: 400; font-size: 1rem; color: rgba(255,255,255,0.75); line-height: 1.7; margin: 0 0 20px; }
.quote-bottom { display: flex; align-items: center; justify-content: space-between; }
.quote-footer { display: flex; align-items: center; gap: 10px; }
.quote-avatar { width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,0.06); display: flex; align-items: center; justify-content: center; font-family: var(--si-font-display); font-weight: 800; font-size: 0.82rem; color: #fff; flex-shrink: 0; border: 2px solid rgba(255,255,255,0.15); overflow: hidden; }
.quote-avatar img { width: 100%; height: 100%; object-fit: cover; }
.quote-author { font-family: var(--si-font-display); font-weight: 700; font-size: 0.85rem; color: #fff; }
.quote-role { font-family: var(--si-font-body); font-weight: 400; font-size: 0.72rem; color: var(--si-yellow); margin-top: 2px; }
@media (max-width: 768px) {
	.testimonials { padding: 56px 6%; }
	.testimonials-header { flex-direction: column; align-items: flex-start; gap: 16px; }
	.testimonial-card { flex-basis: 92%; }
}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faqs { background: linear-gradient(120deg, var(--si-navy-deep) 0%, var(--si-navy-darker) 100%); padding: 72px 8%; border-top: 1px solid rgba(255,255,255,0.08); border-bottom: 1px solid rgba(255,255,255,0.08); }
.faqs .section-heading { max-width: 800px; margin: 0 auto 32px; text-align: left; }
.faqs .section-heading h2 { border-left: 4px solid var(--si-yellow); padding-left: 16px; }
.faq-list { max-width: 800px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid rgba(255,255,255,0.1); }
.faq-question { width: 100%; background: none; border: none; cursor: pointer; font-family: var(--si-font-display); font-weight: 600; font-size: 1.02rem; color: #fff; text-align: left; padding: 22px 0; display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 48px; }
.faq-question:focus-visible { outline: 3px solid var(--si-yellow); outline-offset: 2px; border-radius: 4px; }
.faq-chevron { font-size: 1.2rem; color: rgba(255,255,255,0.5); transition: transform 0.2s; flex-shrink: 0; }
.faq-item.open .faq-chevron { transform: rotate(180deg); }
.faq-answer { font-family: var(--si-font-body); font-weight: 400; font-size: 1.05rem; color: rgba(255,255,255,0.65); line-height: 1.7; padding: 0 0 22px; display: none; }
.faq-answer p { margin: 0 0 14px; }
.faq-answer p:last-child { margin-bottom: 0; }
.faq-answer a { color: var(--si-sky); text-decoration: underline; }
.faq-answer a:hover { color: var(--si-yellow); }
.faq-item.open .faq-answer { display: block; }
@media (max-width: 768px) { .faqs { padding: 64px 6%; } .section-heading h2 { font-size: 1.7rem; } }

/* ==========================================================================
   Form
   ========================================================================== */
.form-section { background: #fff; padding: 96px 8%; }
.form-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; max-width: 1100px; margin: 0 auto; align-items: stretch; }
.form-left { display: flex; flex-direction: column; min-width: 0; }
/* El título comparte eje con el botón de teléfono, que .phone-link ya centra.
   No hace falta repetirlo en el bloque responsive: ningún media query
   redefine la alineación de .form-left h2, así que vale para escritorio y
   para móvil. */
.form-left h2 { font-family: var(--si-font-display); font-weight: 800; font-size: 2.2rem; color: var(--si-navy); line-height: 1.15; margin: 0 0 20px; overflow-wrap: break-word; text-align: center; }
/* Los tres elementos de la columna van centrados entre si: el titulo ya lo
   estaba y el boton tambien, pero el parrafo de en medio ocupaba todo el ancho
   con su texto a la izquierda y rompia el eje. */
.form-left p { font-family: var(--si-font-body); font-weight: 400; font-size: 1rem; color: var(--si-warm); line-height: 1.6; margin: 0 0 24px; text-align: center; }
.form-left .phone-link { font-family: var(--si-font-body); font-weight: 400; font-size: 1.5rem; color: var(--si-navy); }
.form-left .phone-link a { color: var(--si-blue); text-decoration: underline; }
.form-left-img { margin-top: 28px; flex: 1 1 auto; min-height: 220px; border: 1px dashed var(--si-rule); border-radius: 12px; overflow: hidden; background: var(--si-surface); }
.form-left-img img { width: 100%; height: 100%; object-fit: cover; }
.form-card { background: linear-gradient(160deg, var(--si-navy) 0%, var(--si-navy-deep) 100%); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--si-radius); padding: 40px; box-shadow: 0 14px 44px rgba(20,22,59,0.28); min-width: 0; }
.form-title { font-family: var(--si-font-display); font-weight: 700; font-size: 1.3rem; color: #fff; margin: 0 0 28px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.form-field { margin-bottom: 16px; }
.form-field label { display: block; font-family: var(--si-font-body); font-weight: 500; font-size: 0.8rem; color: rgba(255,255,255,0.78); margin-bottom: 6px; }
.form-field input, .form-field select { width: 100%; font-family: var(--si-font-body); font-size: 0.95rem; padding: 12px 14px; border: 1.5px solid rgba(255,255,255,0.4); border-radius: 8px; background: rgba(255,255,255,0.14); color: #fff; transition: border-color 0.2s, background 0.2s; min-height: 48px; }
.form-field input::placeholder { color: rgba(255,255,255,0.55); }
.form-field select option { color: #16181D; }
.form-field input:focus, .form-field select:focus { outline: none; border-color: var(--si-yellow); box-shadow: 0 0 0 3px rgba(255,204,9,0.28); background: rgba(255,255,255,0.2); }
.consent-group { margin-top: 20px; margin-bottom: 24px; }
.consent-item { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 14px; }
.consent-item input[type="checkbox"] { width: 20px; height: 20px; margin-top: 2px; flex-shrink: 0; accent-color: var(--si-yellow); cursor: pointer; }
.consent-item label { font-family: var(--si-font-body); font-weight: 400; font-size: 0.82rem; color: rgba(255,255,255,0.72); line-height: 1.5; cursor: pointer; }
@media (max-width: 768px) { .form-section { padding: 64px 6%; } .form-wrapper { grid-template-columns: 1fr; gap: 40px; } .form-row { grid-template-columns: 1fr; } }

/* Embed de Forminator con la paleta del form-card oscuro */
.form-embed { font-family: var(--si-font-body); width: 100%; max-width: 100%; min-width: 0; overflow-wrap: break-word; }
.form-embed .forminator-label { color: rgba(255,255,255,0.78) !important; font-size: 0.8rem !important; }
.form-embed input, .form-embed select, .form-embed textarea { background: rgba(255,255,255,0.14) !important; border: 1.5px solid rgba(255,255,255,0.4) !important; color: #fff !important; border-radius: 8px !important; min-height: 48px !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; }
.form-embed input::placeholder, .form-embed textarea::placeholder { color: rgba(255,255,255,0.55) !important; }
.form-embed input:focus, .form-embed select:focus, .form-embed textarea:focus { border-color: var(--si-yellow) !important; box-shadow: 0 0 0 3px rgba(255,204,9,0.28) !important; background: rgba(255,255,255,0.2) !important; }
.form-embed select option { color: #16181D; }
.form-embed select { text-overflow: ellipsis; }

/* Forminator pinta el desplegable de programa con select2: el <select> nativo
   queda oculto y el control visible es una pila de <span>, que las reglas de
   arriba no alcanzan. Aquí se le repite la piel del resto de campos.
   Van con !important porque el CSS que Forminator genera por formulario lleva
   el id del módulo en el selector y gana por especificidad. */
.form-embed .select2-container .select2-selection--single { background-color: rgba(255,255,255,0.14) !important; border: 1.5px solid rgba(255,255,255,0.4) !important; border-radius: 8px !important; min-height: 48px !important; }
.form-embed .select2-container .select2-selection__rendered { color: #fff !important; font-family: var(--si-font-body) !important; }
.form-embed .select2-container .select2-selection__placeholder { color: rgba(255,255,255,0.55) !important; }
/* El chevron es un icono de fuente y hereda el color del contenedor. */
.form-embed .select2-container .select2-selection__arrow { color: rgba(255,255,255,0.7) !important; }
.form-embed .select2-container--open .select2-selection--single { border-color: var(--si-yellow) !important; background-color: rgba(255,255,255,0.2) !important; box-shadow: 0 0 0 3px rgba(255,204,9,0.28) !important; }
/* El borde de error lo pinta el CSS del formulario y las reglas de arriba lo
   taparían: se recupera con más especificidad. */
.form-embed .forminator-has_error .select2-container .select2-selection--single { border-color: #E04562 !important; }
.form-embed .forminator-row, .form-embed .forminator-col { min-width: 0 !important; max-width: 100% !important; }
.form-embed .forminator-button-submit, .form-embed button[type="submit"] { background: var(--si-yellow) !important; color: var(--si-ink) !important; border-radius: 999px !important; font-family: var(--si-font-display) !important; font-weight: 600 !important; min-height: 48px !important; }
.form-embed__notice { margin: 0; padding: 16px; border: 1px dashed rgba(255,255,255,0.3); border-radius: 8px; font-size: 0.85rem; color: rgba(255,255,255,0.7); }

/* Fila del select "Program of Interest": oculta cuando la landing es de un
   solo programa y lo preselecciona, visible cuando el bloque declara una
   lista de programas a elegir.
   La ocultación del select vive aquí, y no en el CSS a medida del
   formulario, porque allí iba con !important y aplicaba a todas las
   landings por igual: no había manera de mostrarlo en una sola. */
.form-section .form-card .form-embed .forminator-row:nth-child(7) {display: none;}
.form-section--program-choice .form-card .form-embed .forminator-row:nth-child(7) {display: block;}
#select-1 {display: none;}
.form-section--program-choice #select-1 {display: block;}

.phone-link{text-align: center;}
.phone-link .nav-phone{ color: var(--si-ink) !important; text-decoration: none !important; margin: 0 auto; font-size: 1.5rem;}
.phone-link .nav-phone svg{    width: 20px;height: 20px;}
/* El blanco vale solo dentro de la tarjeta oscura del formulario. Sin acotar
   alcanza tambien a las paginas heredadas, cuyo formulario va sobre fondo
   blanco, y ahi el texto legal del consentimiento queda invisible. */
.form-card .forminator-consent__label p {color: #fff !important;}
.forminator-design--default .forminator-checkbox {margin-top: 15px !important;}

/* ==========================================================================
   Disclaimers
   ========================================================================== */
.disclaimers { background: #fff; padding: 48px 8%; border-top: 1px solid var(--si-rule); }
.disclaimers-inner { max-width: 1240px; margin: 0 auto; }
.disclaimers p { font-family: var(--si-font-body); font-weight: 400; font-size: 0.82rem; color: var(--si-warm); line-height: 1.7; margin: 0 0 12px; }
.disclaimers p strong { font-family: var(--si-font-display); font-weight: 600; }
.disclaimers a { color: var(--si-navy); text-decoration: underline; }
.disclaimers-list { margin: 0 0 12px; padding-left: 1.2em; list-style: disc; }
.disclaimers-list li { font-family: var(--si-font-body); font-weight: 400; font-size: 0.82rem; color: var(--si-warm); line-height: 1.7; margin: 0 0 6px; }

/* ==========================================================================
   Footer
   ========================================================================== */
.footer { background: linear-gradient(120deg, var(--si-navy-deep) 0%, var(--si-navy-darker) 100%); padding: 56px 8% 32px; }
.footer-inner { max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.footer-logo { display: flex; align-items: center; gap: 14px; text-decoration: none; min-width: 0; flex-shrink: 1; }
.footer-logo-img { height: 46px; width: auto; max-width: 170px; object-fit: contain; flex-shrink: 0; }
.footer-logo-bar { width: 7px; height: 46px; background: var(--si-yellow); border-radius: 2px; flex-shrink: 0; }
.footer-logo-text { min-width: 0; }
.footer-logo-text strong { display: block; font-family: var(--si-font-display); font-weight: 800; font-size: 1.05rem; color: #fff; border-bottom: 3px solid var(--si-blue); padding-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.footer-logo-text span { display: block; font-family: var(--si-font-display); font-weight: 500; font-size: 0.65rem; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,0.6); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.footer-contact { font-family: var(--si-font-body); font-size: 0.82rem; color: rgba(255,255,255,0.6); line-height: 1.6; text-align: right; max-width: 560px; }
.footer-contact a { color: #fff; text-decoration: none; }
.footer-contact a:hover { color: var(--si-yellow); }
.footer-legal { max-width: 1200px; margin: 28px auto 0; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.1); display: flex; flex-direction: column; gap: 10px; text-align: left; width: auto; }
.footer-legal-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 0; }
.footer-legal-links a { font-family: var(--si-font-display); font-weight: 500; font-size: 0.78rem; color: rgba(255,255,255,0.82); text-decoration: none; white-space: nowrap; }
.footer-legal-links a:not(:first-child) { margin-left: 22px; position: relative; }
.footer-legal-links a:not(:first-child)::before { content: '\00B7'; position: absolute; left: -14px; color: rgba(255,255,255,0.3); }
.footer-legal-links a:hover { color: var(--si-yellow); }
.footer-ai { font-family: var(--si-font-body); font-size: 0.8rem; color: rgba(255,255,255,0.5); line-height: 1.55; max-width: 720px; margin-top: 16px; }
.footer-copy { font-family: var(--si-font-body); font-size: 0.8rem; color: rgba(255,255,255,0.4); margin-top: 8px; }
@media (max-width: 768px) { .footer-inner { flex-direction: column; align-items: flex-start; } .footer-contact { text-align: left; } }

/* ==========================================================================
   Tabla comparativa
   Scroll horizontal a propósito: colapsar a formato vertical pierde la
   comparabilidad, que es justo lo que la tabla existe para dar.
   El contenedor es focusable para que el scroll sea alcanzable con teclado.
   ========================================================================== */
.compare { background: #fff; padding: 72px 0; }
.compare-inner { max-width: 1100px; margin: 0 auto; padding: 0 20px; }
.compare-heading { font-family: var(--si-font-display); font-weight: 700; color: var(--si-navy); font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 12px 0 8px; }
.compare-intro { font-family: var(--si-font-body); color: var(--si-warm); max-width: 62ch; margin: 0 0 28px; }
.compare-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--si-rule); border-radius: var(--si-radius); }
.compare-scroll:focus-visible { outline: 3px solid var(--si-blue); outline-offset: 2px; }
.compare-table { width: 100%; border-collapse: collapse; min-width: 620px; }
.compare-table thead th { font-family: var(--si-font-display); font-weight: 700; color: var(--si-navy); font-size: 1rem; text-align: left; padding: 18px 20px; background: var(--si-surface); border-bottom: 2px solid var(--si-rule); }
.compare-table tbody th { font-family: var(--si-font-body); font-weight: 700; color: var(--si-ink); text-align: left; padding: 16px 20px; background: var(--si-surface); border-bottom: 1px solid var(--si-rule); white-space: nowrap; }
.compare-table tbody td { font-family: var(--si-font-body); font-weight: 400; color: var(--si-ink); padding: 16px 20px; border-bottom: 1px solid var(--si-rule); vertical-align: top; }
.compare-table tbody tr:last-child th, .compare-table tbody tr:last-child td { border-bottom: 0; }
.compare-table sup { color: var(--si-warm); font-size: .7em; }

/* ==========================================================================
   Ficha de programa
   ========================================================================== */
.pdetail { padding: 72px 0; }
.pdetail--surface { background: var(--si-surface); }
.pdetail--white { background: #fff; }
.pdetail-inner { max-width: 1100px; margin: 0 auto; padding: 0 20px; }
.pdetail-heading { font-family: var(--si-font-display); font-weight: 700; color: var(--si-navy); font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 12px 0 6px; }
.pdetail-subtitle { font-family: var(--si-font-body); color: var(--si-warm); margin: 0 0 14px; }
.pdetail-desc { font-family: var(--si-font-body); color: var(--si-ink); max-width: 68ch; margin: 0 0 32px; }
.pdetail-body { display: grid; grid-template-columns: 1fr; gap: 32px; }
.pdetail-lists { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.pdetail-col-title { font-family: var(--si-font-display); font-weight: 600; color: var(--si-navy); font-size: 1.1rem; margin: 0 0 12px; }
.pdetail-list { list-style: none; margin: 0; padding: 0; }
.pdetail-list li { font-family: var(--si-font-body); color: var(--si-ink); padding: 0 0 10px 22px; position: relative; }
.pdetail-list li::before { content: ""; position: absolute; left: 0; top: .55em; width: 8px; height: 8px; border-radius: 2px; background: var(--si-yellow); }
.pdetail-figure { margin: 0; }
.pdetail-img { width: 100%; height: auto; border-radius: var(--si-radius); display: block; }
.pdetail-stats { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 36px 0 0; padding: 28px 0 0; border-top: 1px solid var(--si-rule); }
.pdetail-stat { display: flex; flex-direction: column; gap: 4px; }
.pdetail-stat-value { font-family: var(--si-font-display); font-weight: 800; color: var(--si-navy); font-size: clamp(1.3rem, 2.4vw, 1.75rem); }
.pdetail-stat-label { font-family: var(--si-font-body); color: var(--si-warm); font-size: .9rem; }

/* ==========================================================================
   Pasos numerados (sección inmersiva navy)
   ========================================================================== */
.steps { background: var(--si-navy-deep); padding: 76px 0; }
.steps-inner { max-width: 1100px; margin: 0 auto; padding: 0 20px; }
.steps-heading { font-family: var(--si-font-display); font-weight: 700; color: #fff; font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 12px 0 36px; }
.steps-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; counter-reset: none; }
.step { display: flex; flex-direction: column; gap: 10px; }
.step-number { font-family: var(--si-font-display); font-weight: 800; color: var(--si-yellow); font-size: clamp(2.4rem, 5vw, 3.4rem); line-height: 1; }
.step-label { font-family: var(--si-font-display); font-weight: 700; color: #fff; font-size: 1.15rem; margin: 0; }
.step-text { font-family: var(--si-font-body); color: rgba(255,255,255,.75); margin: 0; }

/* ==========================================================================
   Grid de programas enlazados
   ========================================================================== */
.pgrid { background: var(--si-surface); padding: 72px 0; }
.pgrid-inner { max-width: 1100px; margin: 0 auto; padding: 0 20px; }
.pgrid-heading { font-family: var(--si-font-display); font-weight: 700; color: var(--si-navy); font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 12px 0 8px; }
.pgrid-subtitle { font-family: var(--si-font-body); color: var(--si-warm); max-width: 64ch; margin: 0 0 32px; }
.pgrid-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pgrid-item { display: flex; }
.pgrid-link { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; width: 100%; padding: 24px; background: #fff; border: 1px solid var(--si-rule); border-radius: var(--si-radius); color: var(--si-ink); text-decoration: none; transition: border-color .18s ease, transform .18s ease; }
a.pgrid-link:hover { border-color: var(--si-blue); transform: translateY(-2px); }
a.pgrid-link:focus-visible { outline: 3px solid var(--si-blue); outline-offset: 2px; }
.pgrid-icon { color: var(--si-navy); display: flex; }
.pgrid-label { font-family: var(--si-font-body); font-size: 1rem; line-height: 1.4; }
.pgrid-badge { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px; background: var(--si-navy); color: #fff; font-family: var(--si-font-display); font-weight: 600; font-size: .7rem; letter-spacing: .02em; vertical-align: middle; }

/* ==========================================================================
   Galería estática
   Sin carrusel a propósito: el contenido que hay que descubrir no persuade.
   ========================================================================== */
.gallery { padding: 72px 0; }
.gallery--white { background: #fff; }
.gallery--surface { background: var(--si-surface); }
.gallery-inner { max-width: 1100px; margin: 0 auto; padding: 0 20px; }
.gallery-heading { font-family: var(--si-font-display); font-weight: 700; color: var(--si-navy); font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 12px 0 32px; }
.gallery-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
/* La figura se apila en columna para que el pie quede dentro de la caja del
   item de grid: con la imagen estirada a la altura de la fila el <figcaption>
   desbordaba y se comía el relleno inferior de la sección. */
.gallery-item { margin: 0; display: flex; flex-direction: column; }
.gallery-img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--si-radius); display: block; }
.gallery-caption { font-family: var(--si-font-display); font-weight: 700; color: var(--si-navy); font-size: 1rem; margin-top: 12px; }

/* --------------------------------------------------------------------------
   Móvil
   -------------------------------------------------------------------------- */
@media (max-width: 860px) {
	.pdetail-lists { grid-template-columns: 1fr; }
	.pdetail-stats { grid-template-columns: 1fr; gap: 16px; }
	.steps-grid { grid-template-columns: 1fr; gap: 28px; }
	.pgrid-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
	.compare, .pdetail, .pgrid, .gallery { padding: 52px 0; }
	.steps { padding: 56px 0; }
	.gallery-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
	a.pgrid-link:hover { transform: none; }
}

/* Separación bajo el encabezado de sección en los bloques nuevos. */
.compare-inner > .section-heading,
.pgrid-inner > .section-heading,
.gallery-inner > .section-heading { margin-bottom: 32px; }
.steps-inner > .section-heading { margin-bottom: 36px; }
.pdetail-head > .section-heading { margin-bottom: 6px; }

/* ==========================================================================
   Countdown — dentro de la barra de navegación
   La cuenta atrás no tiene franja propia: se pinta como un elemento más del
   nav, en la misma línea que el logo y los botones (inc/countdown.php). Antes
   iba en una barra fija encima, que engordaba el bloque de cabecera y en móvil
   acababa montándose sobre los botones.
   ========================================================================== */
.nav-countdown { display: flex; align-items: center; gap: 14px; min-width: 0; flex-shrink: 1; }
.nav-countdown__text { margin: 0; font-family: var(--si-font-body); font-size: 0.9rem; color: rgba(255,255,255,0.75); letter-spacing: 0.01em; white-space: nowrap; }
.nav-countdown__text strong { color: var(--si-yellow, #FFCC09); font-weight: 700; }
.nav-countdown__date { color: rgba(255,255,255,0.5); margin-left: 8px; }
.nav-countdown__cta {
	background: var(--si-yellow, #FFCC09); color: var(--si-ink, #16181D);
	font-family: var(--si-font-display); font-weight: 600; font-size: 1rem;
	text-decoration: none; padding: 10px 20px; border-radius: 999px;
	white-space: nowrap; flex-shrink: 0;
	display: inline-flex; align-items: center; min-height: 48px;
	transition: all 0.25s ease;
}
.nav-countdown__cta:hover { background: #FFD840; transform: translateY(-1px); box-shadow: 0 4px 16px rgba(255,204,9,0.4); }
.nav-countdown__cta:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
@media (max-width: 1100px) {
	/* Con poco ancho la fecha es lo primero que sobra: el número de días es
	   el dato que empuja, la fecha completa solo acompaña. */
	.nav-countdown__date { display: none; }
}
@media (max-width: 768px) {
	/* La cuenta atrás es el único elemento elástico de la barra: se queda con
	   el ancho que sobra entre el logo y el teléfono, y su mensaje se reparte
	   en líneas cortas en vez de empujar al resto fuera de la fila. */
	.nav-countdown { order: 2; flex: 1 1 auto; min-width: 0; gap: 8px; justify-content: flex-end; }
	.nav-countdown__text { flex-shrink: 1; min-width: 0; white-space: normal; font-size: 0.7rem; line-height: 1.25; text-align: right; }
	.nav-countdown__cta { flex-shrink: 0; padding: 9px 12px; font-size: 0.8rem; min-height: 40px; }
}
@media (max-width: 380px) {
	/* En las pantallas más estrechas el hueco que queda para el mensaje no da
	   ni para su palabra más larga: el botón cede unos píxeles y el texto baja
	   un punto para que la cuenta atrás siga cabiendo dentro de su caja. */
	.nav-countdown__text { font-size: 0.64rem; }
	.nav-countdown__cta { padding: 8px 10px; font-size: 0.72rem; }
}
@media (max-width: 359px) {
	/* Último escalón: aquí el botón vuelve a ceder para que el mensaje conserve
	   el ancho de su palabra más larga y no se salga de su caja. */
	.nav-countdown__cta { padding: 8px; font-size: 0.68rem; }
}

/* ==========================================================================
   Anchos que deciden el reparto de líneas
   Un texto que cierra con una palabra suelta casi siempre está en una caja
   demasiado estrecha para lo que tiene que decir. Estas dos secciones ensanchan
   esas cajas en las franjas donde se estrangulan; el resto lo resuelve el
   pegado de la última palabra (assets/js/huerfanas.js).
   ========================================================================== */

/* En las pantallas más estrechas las dos columnas de programas dejan cada
   etiqueta por debajo de 140 px, donde un nombre como «Sterile Processing &
   Central Services» se parte en cuatro líneas. A una sola columna la etiqueta
   dispone del ancho completo de la tarjeta y casi todos los nombres entran en
   una línea. Comparte corte con la galería, que se apila en el mismo punto. */
@media (max-width: 480px) {
	.pgrid-list { grid-template-columns: minmax(0, 1fr); }
}

/* En el carrusel de móvil la tarjeta de bento se queda en 239 px y su título en
   203: por debajo del ancho que piden parejas como «Processing Departments» o
   «Rehabilitation Facilities», que son las que no pueden partirse. Con el 80%
   —el mismo ancho que usa el carrusel de «What to Expect»— el título dispone de
   229 px y las tres caben, sin perder el trozo de la tarjeta siguiente que
   avisa de que el carril se desplaza. */
@media (max-width: 768px) {
	.bento-card { flex-basis: 80%; }
}

/* La tarjeta de bento con foto lleva la imagen como fondo, no como <img>, y el
   cargador diferido le aplica igualmente su marcador de posición: 100 px de
   ancho y proporción cuadrada, con !important, hasta que la tarjeta entra en
   pantalla. Mientras tanto la columna de la rejilla queda en 72 px de texto, el
   título se parte en seis líneas y alguna palabra se sale de la caja. La medida
   del marcador se lee de estas dos variables, así que devolverlas al valor
   natural desactiva el encogido sin pelear a !important; si el cargador dejara
   de usarlas, la tarjeta vuelve al comportamiento de hoy y nada se rompe. */
.bento-card {
	--smush-image-width: auto;
	--smush-image-aspect-ratio: auto;
}
@media (max-width: 768px) {
	/* En el carrusel la tarjeta sí tiene proporción propia y hay que repetirla
	   aquí: la declaración del cargador gana a la de la tarjeta. */
	.bento-card { --smush-image-aspect-ratio: 3 / 4; }
}

/* Entre tableta y portátil pequeño «What to Expect» conserva sus tres columnas
   y cada tarjeta se queda en poco más de 180 px: el rótulo no sostiene ni dos
   palabras —«Comprehensive Training» pide 195— y el párrafo se estira hasta
   diez líneas. Con dos columnas el rótulo dispone de 320 px y ambos cierran
   completos. Por debajo de 769 sigue mandando el carrusel. */
@media (min-width: 769px) and (max-width: 1024px) {
	.expect-track { grid-template-columns: repeat(2, 1fr); }
	/* Con un número impar de tarjetas la última se quedaría sola en su fila y
	   dejaría media fila vacía, que al bajar se lee como contenido que falta.
	   Ocupa entonces las dos columnas, apaisada para no crecer al cuadrado del
	   ancho completo. */
	.expect-track > .expect-card:nth-child(odd):last-child {
		grid-column: 1 / -1;
		aspect-ratio: 16 / 9;
	}
}

/* En esa misma franja el título de la tarjeta de bento se queda en 179 px, por
   debajo de lo que miden parejas como «Rehabilitation Facilities» o
   «Diagnostic Laboratories», que no pueden separarse. Aquí no vale bajar a dos
   columnas: las secciones tienen entre cuatro y catorce tarjetas y algunas
   ocupan doble ancho, así que media fila quedaría vacía según la página. Se
   gana el ancho por dentro —cuatro píxeles menos de relleno y un cuerpo que
   acompaña a la pantalla— y la composición se mantiene. El cuerpo recupera su
   tamaño de escritorio en cuanto la columna da de sí. */
@media (min-width: 769px) and (max-width: 1024px) {
	.bento-card { padding: 12px; }
	.bento-title { font-size: clamp(0.9rem, 1.75vw, 1.1rem); }
}

/* En los móviles más estrechos la tarjeta ya no da más de sí por ancho, y las
   parejas que no pueden separarse —«Processing Departments», «Comprehensive
   Training»— se quedan a pocos píxeles de caber. El punto que sí se puede ceder
   es el cuerpo del rótulo: un 10% menos libera esos píxeles y deja el título en
   dos líneas completas en vez de tres con una palabra suelta. */
@media (max-width: 400px) {
	.bento-title { font-size: 1rem; }
	.expect-card-label { font-size: 1rem; }
}

/* Última palabra del nombre y su chapa, en una sola pieza que no se parte. */
.pgrid-cierre { white-space: nowrap; }

/* Por debajo de 380 el titular del hero se queda a pocos píxeles de sostener
   los nombres de programa de dos palabras — «Surgical Technologist»,
   «Processing Technician» —, que no admiten corte entre medias, y el navegador
   baja la segunda sola. Un 8% menos de cuerpo devuelve ese margen. El escalón
   queda por debajo del móvil de referencia, así que a 390 el titular conserva
   su tamaño. */
@media (max-width: 380px) {
	.hero h1 { font-size: 1.65rem; }
}

/* Los tres datos del pie ocupan 703 px puestos en fila. A partir de 1200 el
   hueco que dejan el logo y los márgenes da de sobra, así que caben en una sola
   línea, que es como se leen hoy —y mejor que hoy, porque ahora el correo no
   baja suelto. Por debajo no caben, y cualquier reparto en dos líneas termina
   dejando una pieza sola: el correo mide más que cualquier palabra que lo
   preceda, y atarlo al teléfono empuja «Admissions:» a una línea para él solo.
   Ahí baja cada dato a su línea y los puntos separadores se retiran. */
.footer-contact { max-width: 720px; }
@media (max-width: 1199px) {
	.footer-contact__sep { display: none; }
	.footer-contact__dato { display: block; }
}