← velo de legibilidad
← fundido de bordes + tapado de marca
Se configura desde el contenedor con cuatro propiedades personalizadas:
--bgv-poster image-set del póster; se pinta al instante como fondo, así
que nunca hay hueco negro ni salto de maquetación
--bgv-focus object-position, ajustado por breakpoint
--bgv-scrim degradado de legibilidad
--bgv-fade degradado de bordes y tapado de la marca de agua
El comportamiento (autoplay, rechazo de play(), movimiento reducido y carga
diferida) lo gobierna wireBgVideos() en site.js.
-------------------------------------------------------------------------- */
.bgvideo {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
background-image: var(--bgv-poster);
background-repeat: no-repeat;
background-size: cover;
background-position: var(--bgv-focus, 50% 50%);
}
.bgvideo__el {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: var(--bgv-focus, 50% 50%);
}
/* Si el autoplay se bloquea, el vídeo falla o el usuario pide menos
movimiento, se oculta el vídeo y queda el póster: nunca un rectángulo negro. */
.bgvideo.is-static .bgvideo__el { display: none; }
@media (prefers-reduced-motion: reduce) {
.bgvideo__el { display: none; }
}
.bgvideo__scrim,
.bgvideo__fade {
position: absolute;
inset: 0;
pointer-events: none;
}
.bgvideo__scrim { background: var(--bgv-scrim, none); }
.bgvideo__fade { background: var(--bgv-fade, none); }
/* ---- HERO (portada) -------------------------------------------------------
Usa el componente .bgvideo de arriba. Aquí solo se define su configuración:
póster, encuadre, velo de legibilidad y fundido inferior.
El texto va en .hero__inner, por encima de todo (z-index 1).
-------------------------------------------------------------------------- */
.hero {
position: relative;
isolation: isolate;
overflow: hidden;
display: flex;
align-items: center;
padding-block: clamp(2.5rem, 6vw, 4.5rem);
/* svh, no vh: en móvil vh salta al ocultarse la barra de direcciones. */
min-height: 640px;
min-height: calc(100svh - var(--header-h));
background:
radial-gradient(120% 90% at 15% 0%, var(--hero-bg-a) 0%, transparent 55%),
linear-gradient(180deg, var(--hero-bg-b) 0%, var(--bg) 78%);
}
/* --- Configuración del vídeo de fondo ------------------------------------ */
.hero .bgvideo {
--bgv-poster: image-set(
url('../video/rocket-hero-poster.webp') type('image/webp'),
url('../video/rocket-hero-poster.jpg') type('image/jpeg'));
/* Encuadre: empuja hacia la derecha al estrecharse el viewport, para que
el cohete no se pierda por el recorte de object-fit: cover. */
--bgv-focus: var(--hero-focus, 50% 15%);
--bgv-scrim: linear-gradient(100deg,
rgba(var(--veil-rgb), 0.97) 0%,
rgba(var(--veil-rgb), 0.95) 30%,
rgba(var(--veil-rgb), 0.78) 45%,
rgba(var(--veil-rgb), 0.32) 58%,
rgba(var(--veil-rgb), 0.00) 70%);
/* Dos capas en un mismo degradado:
1. una elipse en la esquina inferior derecha, que es donde el vídeo lleva
la marca de agua de IA — cae sobre plataforma vacía, a la derecha de
la torre, así que no toca el cohete;
2. el fundido general hacia el blanco de la sección siguiente.
Juntas se leen como una bruma de horizonte, no como un parche. */
--bgv-fade:
radial-gradient(32% 48% at 100% 100%,
rgb(var(--page-rgb)) 0%,
rgba(var(--page-rgb), 0.98) 72%,
rgba(var(--page-rgb), 0.50) 88%,
rgba(var(--page-rgb), 0) 100%),
linear-gradient(180deg,
rgba(var(--page-rgb), 0) 62%,
rgba(var(--page-rgb), 0.45) 82%,
rgba(var(--page-rgb), 0.90) 95%,
var(--bg) 100%);
}
/* --- Contenido ----------------------------------------------------------- */
.hero__inner {
position: relative;
z-index: 1;
}
.hero__copy { max-width: 50%; }
.hero__title {
font-size: var(--fs-hero);
line-height: 0.98;
letter-spacing: -0.015em; /* Fredoka One ya es compacta: poco tracking negativo */
text-transform: uppercase;
margin-bottom: var(--sp-5);
}
.hero__topics {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--sp-2) var(--sp-3);
margin-bottom: var(--sp-6);
font-family: var(--font-body);
font-size: 0.88rem;
font-weight: 600;
color: var(--navy-700);
}
.hero__topics .dot {
width: 6px; height: 6px;
border-radius: 50%;
background: var(--yellow-500);
}
.hero__quote { max-width: 30ch; margin-bottom: var(--sp-8); }
/* --- Encuadre responsive -------------------------------------------------
Valores medidos sobre capturas reales, no estimados. El eje X se desplaza
a la derecha conforme se estrecha el viewport; el eje Y se mantiene alto
para que no se corte el morro del cohete en pantallas anchas y bajas.
-------------------------------------------------------------------------- */
.hero { --hero-focus: 50% 12%; }
/* Franja intermedia: el recorte lateral empieza a morderse el cohete, así que
el encuadre se desplaza a la derecha y el texto se estrecha. */
@media (max-width: 1100px) {
.hero { --hero-focus: 62% 12%; }
.hero__copy { max-width: 60%; }
}
/* Móvil y tablet vertical: a pantalla completa el cohete ocupa TODA la altura
del encuadre y no queda cielo donde poner el texto sin taparlo. Se cambia la
composición: el texto arriba, sobre el fondo limpio, y el vídeo en una banda
inferior donde el cohete cabe entero y queda a la derecha. */
@media (max-width: 860px) {
.hero {
display: flex;
flex-direction: column;
align-items: stretch;
padding-bottom: 0;
--hero-focus: 62% 50%;
}
.hero__inner {
order: 0;
padding-block: var(--sp-6) var(--sp-10);
}
.hero .bgvideo {
order: 1;
position: relative;
inset: auto;
width: 100%;
height: 46svh;
min-height: 290px;
flex: none;
}
.hero__copy { max-width: 100%; }
.hero__quote { max-width: 34ch; }
/* El velo ya solo tiene que fundir el borde superior de la banda. */
.hero .bgvideo {
--bgv-scrim: linear-gradient(180deg,
rgba(var(--veil-rgb), 1) 0%,
rgba(var(--veil-rgb), 0.72) 12%,
rgba(var(--veil-rgb), 0.18) 30%,
rgba(var(--veil-rgb), 0) 46%);
--bgv-fade:
radial-gradient(32% 48% at 100% 100%,
rgb(var(--page-rgb)) 0%,
rgba(var(--page-rgb), 0.98) 72%,
rgba(var(--page-rgb), 0.50) 88%,
rgba(var(--page-rgb), 0) 100%),
linear-gradient(180deg,
rgba(var(--page-rgb), 0) 58%,
rgba(var(--page-rgb), 0.45) 82%,
var(--bg) 100%);
}
}
/* Móvil: se comprime el bloque de texto para que texto + banda quepan en una
pantalla, sin obligar a hacer scroll para ver el cohete. */
@media (max-width: 560px) {
.hero__inner { padding-block: var(--sp-5) var(--sp-6); }
.hero__title { margin-bottom: var(--sp-4); }
.hero__topics { margin-bottom: var(--sp-4); font-size: 0.8rem; }
.hero__quote {
margin-bottom: var(--sp-6);
font-size: var(--fs-lg);
max-width: 30ch;
}
.hero__inner .btn--lg { padding: 0.85em 1.35em; font-size: var(--fs-sm); }
.hero .bgvideo { height: 40svh; min-height: 252px; }
}
/* Ventanas muy anchas y bajas: no cabe el cohete entero de morro a base, así
que se profundiza el fundido para que la base se disuelva en lugar de
cortarse a filo. */
@media (min-width: 1101px) and (min-aspect-ratio: 2 / 1) {
.hero { --hero-focus: 50% 8%; }
.hero .bgvideo {
--bgv-fade:
radial-gradient(32% 48% at 100% 100%,
rgb(var(--page-rgb)) 0%,
rgba(var(--page-rgb), 0.98) 72%,
rgba(var(--page-rgb), 0.50) 88%,
rgba(var(--page-rgb), 0) 100%),
linear-gradient(180deg,
rgba(var(--page-rgb), 0) 44%,
rgba(var(--page-rgb), 0.50) 72%,
rgba(var(--page-rgb), 0.92) 92%,
var(--bg) 100%);
}
}
/* Lienzo 3D */
.scene {
position: relative;
width: 100%;
aspect-ratio: 4 / 3;
min-height: 320px;
border-radius: var(--r-2xl);
overflow: hidden;
background:
radial-gradient(80% 80% at 50% 40%, var(--scene-a) 0%, var(--scene-b) 55%, var(--scene-c) 100%);
box-shadow: var(--sh-lg);
isolation: isolate;
}
.scene canvas { width: 100% !important; height: 100% !important; display: block; }
.scene__fallback {
position: absolute;
inset: 0;
display: grid;
place-items: center;
padding: var(--sp-8);
text-align: center;
color: var(--text-faint);
font-size: var(--fs-sm);
}
.scene.is-live .scene__fallback { display: none; }
.scene__hint {
position: absolute;
left: var(--sp-4);
bottom: var(--sp-4);
z-index: 2;
padding: 0.4rem 0.75rem;
border-radius: var(--r-pill);
background: rgba(var(--page-rgb), .82);
backdrop-filter: blur(6px);
font-family: var(--font-body);
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-faint);
opacity: 0;
transition: opacity var(--dur) var(--ease-out);
}
.scene.is-live .scene__hint { opacity: 1; }
/* Lienzo 3D compacto para cabeceras interiores */
.scene--band {
aspect-ratio: auto;
height: clamp(190px, 26vw, 300px);
min-height: 0;
box-shadow: none;
background: transparent;
border-radius: var(--r-xl);
}
/* ---- Cabecera con vídeo sobre negro ---------------------------------------
Recreacional y Académico abren con una franja de cielo profundo: el vídeo
viene renderizado sobre fondo negro, así que la franja se queda oscura y el
cuerpo de la página sigue siendo blanco. La costura entre las dos zonas la
resuelve .vhero__hem, un degradado de negro a color de página que hace de
horizonte en lugar de un corte seco.
El componente .bgvideo es el mismo del hero del cohete; aquí solo cambian
sus cuatro propiedades personalizadas.
-------------------------------------------------------------------------- */
.vhero {
position: relative;
isolation: isolate;
overflow: hidden;
display: flex;
align-items: center;
padding-block: clamp(3.25rem, 6vw, 5.5rem) clamp(5rem, 9vw, 8rem);
min-height: clamp(540px, 66vh, 760px);
/* Negro de cielo, no negro puro: deja respirar los degradados. Se pinta
desde --vh-rgb para que cada página pueda cambiar el tono de la franja
entera —fondo, velos y horizonte— tocando una sola variable. */
--vh-rgb: 5, 7, 15;
background: rgb(var(--vh-rgb));
}
.vhero__inner { position: relative; z-index: 2; width: 100%; }
.vhero__copy { max-width: 46%; }
/* Texto claro fijo: el vídeo es oscuro y la franja no cambia. */
.vhero h1, .vhero h2 { color: #FFFFFF; }
.vhero .lead { color: #D6DDF5; }
.vhero p { color: #C6CFEC; }
.vhero .breadcrumb { color: #A9B4DA; }
.vhero .breadcrumb a { color: #BFC8E8; }
.vhero .breadcrumb a:hover { color: #FFC629; }
.vhero strong, .vhero b { color: inherit; }
.vhero .btn--ghost { --btn-fg: #FFFFFF; --btn-bd: rgba(255, 255, 255, 0.45); }
.vhero .btn--ghost:hover { --btn-bd: #FFC629; background: rgba(255, 255, 255, 0.1); }
/* Horizonte: cierra la franja oscura contra el blanco del cuerpo. */
/* Cierra el vídeo contra el negro de la franja. El corte con el blanco del
cuerpo se deja limpio: un degradado de negro a blanco solo aporta una niebla
gris; el borde nítido se lee como una decisión. */
.vhero__hem {
position: absolute;
z-index: 1;
inset: auto 0 0 0;
height: clamp(80px, 11vw, 140px);
pointer-events: none;
background: linear-gradient(180deg,
rgba(var(--vh-rgb), 0) 0%,
rgba(var(--vh-rgb), 0.6) 44%,
rgb(var(--vh-rgb)) 82%,
rgb(var(--vh-rgb)) 100%);
}
.vhero .bgvideo { --bgv-focus: var(--vh-focus, 50% 50%); }
/* Velo de legibilidad por la izquierda + fundido de bordes. El fundido inferior
tapa además la esquina donde vivía la marca de agua del render original. */
.vhero .bgvideo {
--bgv-scrim: linear-gradient(96deg,
rgba(var(--vh-rgb), 0.94) 0%,
rgba(var(--vh-rgb), 0.90) 30%,
rgba(var(--vh-rgb), 0.66) 46%,
rgba(var(--vh-rgb), 0.24) 62%,
rgba(var(--vh-rgb), 0.00) 78%);
--bgv-fade: linear-gradient(180deg,
rgba(var(--vh-rgb), 0.85) 0%,
rgba(var(--vh-rgb), 0.18) 16%,
rgba(var(--vh-rgb), 0.00) 34%,
rgba(var(--vh-rgb), 0.00) 68%,
rgba(var(--vh-rgb), 0.45) 88%,
rgb(var(--vh-rgb)) 100%);
}
/* --- Recreacional · Saturno ------------------------------------------------
Registro infantil: el bloque oscuro se remata con esquinas redondeadas y una
aurora cálida detrás del texto, para que el cielo se sienta amable.
-------------------------------------------------------------------------- */
.vhero--saturn {
--vh-focus: 62% 48%;
border-radius: 0 0 clamp(28px, 5vw, 64px) clamp(28px, 5vw, 64px);
}
.vhero--saturn .bgvideo { --bgv-poster: image-set(
url('../video/saturn-hero-poster.webp') type('image/webp'),
url('../video/saturn-hero-poster.jpg') type('image/jpeg')); }
.vhero--saturn .vhero__inner::before {
content: "";
position: absolute;
z-index: -1;
left: -12%;
top: 50%;
width: min(760px, 78%);
aspect-ratio: 1;
transform: translateY(-50%);
pointer-events: none;
background: radial-gradient(closest-side,
rgba(122, 79, 192, 0.30) 0%,
rgba(42, 157, 181, 0.16) 46%,
rgba(var(--vh-rgb), 0) 100%);
}
.vhero--saturn .eyebrow { color: #FFD35C; }
/* --- Académico · Agujero negro ---------------------------------------------
Registro premium: sin curvas, tipografía más espaciada, filete dorado como
remate y una viñeta que cierra los bordes. Nada de color de más.
-------------------------------------------------------------------------- */
.vhero--blackhole {
--vh-focus: 56% 48%;
align-items: center;
/* Negro de cielo, como Recreacional. Se probó tiñendo la franja entera de
navy y quedaba un rectángulo azul plano: lo que le quita el aire de
bloque negro no es cambiar el fondo, es la aurora de aquí abajo. */
--vh-rgb: 6, 8, 22;
}
/* Aurora, la misma idea que en Recreacional pero en la clave de esta página:
violeta y magenta detrás del texto, para que el cielo tenga profundidad y
no sea un rectángulo negro. Va en z-index negativo dentro de .vhero__inner,
así que queda por delante del vídeo y por detrás del texto. */
.vhero--blackhole .vhero__inner::before {
content: "";
position: absolute;
z-index: -1;
left: -14%;
top: 50%;
width: min(880px, 88%);
aspect-ratio: 1;
transform: translateY(-50%);
pointer-events: none;
background: radial-gradient(closest-side,
rgba(122, 79, 192, 0.34) 0%,
rgba(194, 54, 122, 0.17) 46%,
rgba(var(--vh-rgb), 0) 100%);
}
/* El render viene sobre negro puro y del lado del disco la franja se quedaba
apagada. Esta capa sube esos negros con «screen», que solo puede aclarar,
usando el ámbar del propio disco en vez de un azul: el cielo se calienta
como una nebulosa y no se enfría. Empieza en transparente —donde el
mezclado no hace nada— para no tocar el lado del texto, que necesita
seguir oscuro para que el titular blanco contraste. El centro del degradado
queda abajo a la izquierda del agujero, no encima: puesto sobre él le
aclaraba el horizonte de sucesos y un agujero negro tiene que verse negro. */
.vhero--blackhole .bgvideo::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
mix-blend-mode: screen;
background: radial-gradient(86% 124% at 54% 76%,
rgba(78, 36, 22, 0.34) 0%,
rgba(58, 27, 50, 0.20) 44%,
rgba(0, 0, 0, 0) 78%);
}
/* Menos brillo del que trae el render: a tamaño de cabecera el disco quemaba
y el conjunto quedaba más claro que el resto de la página. */
.vhero--blackhole .bgvideo { filter: brightness(0.78) saturate(1.14); }
.vhero--blackhole .bgvideo { --bgv-poster: image-set(
url('../video/blackhole-hero-poster.webp') type('image/webp'),
url('../video/blackhole-hero-poster.jpg') type('image/jpeg')); }
.vhero--blackhole .bgvideo::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
/* Sombra propia sobre el agujero: es la parte que más luz suelta y la que
se veía rara de tan clara. */
radial-gradient(46% 62% at 76% 48%,
rgba(var(--vh-rgb), 0.46) 0%,
rgba(var(--vh-rgb), 0.22) 58%,
rgba(var(--vh-rgb), 0) 100%),
radial-gradient(118% 84% at 50% 46%,
rgba(var(--vh-rgb), 0) 34%,
rgba(var(--vh-rgb), 0.62) 78%,
rgba(var(--vh-rgb), 0.95) 100%);
}
.vhero--blackhole .eyebrow {
color: #E9C978;
letter-spacing: 0.22em;
}
.vhero--blackhole h1 { letter-spacing: -0.01em; }
.vhero--blackhole .vhero__rule {
display: block;
width: 76px;
height: 2px;
margin: var(--sp-5) 0;
border: 0;
background: linear-gradient(90deg, #E9C978 0%, rgba(233, 201, 120, 0) 100%);
}
/* Filete dorado como remate: el borde inferior de la franja premium. */
.vhero--blackhole .vhero__hem::after {
content: "";
position: absolute;
inset: auto 0 0 0;
height: 2px;
background: linear-gradient(90deg,
rgba(233, 201, 120, 0) 0%,
rgba(233, 201, 120, 0.85) 22%,
rgba(233, 201, 120, 0.85) 78%,
rgba(233, 201, 120, 0) 100%);
}
/* Tres marcas bajo el titular, en lugar de las cifras que había antes. A una
familia que mira un currículo no le dice gran cosa cuántos módulos hay; le
dice que se evalúa, que se experimenta y que el horario es fijo. */
.vhero__marks {
display: flex;
flex-wrap: wrap;
gap: var(--sp-3) clamp(1.1rem, 2.6vw, 2.2rem);
margin: var(--sp-8) 0 0;
padding: var(--sp-6) 0 0;
list-style: none;
border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.vhero__mark {
display: inline-flex;
align-items: center;
gap: 0.55rem;
font-size: var(--fs-xs);
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #E7ECFF;
}
.vhero__mark .i { width: 1.05em; height: 1.05em; flex-shrink: 0; color: #E9C978; }
/* Dato bajo el titular: tres cifras en línea, sobre el negro. */
.vhero__facts {
display: flex;
flex-wrap: wrap;
gap: clamp(1.25rem, 2.6vw, 2.4rem);
margin-top: var(--sp-8);
padding-top: var(--sp-6);
border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.vhero__fact b {
display: block;
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(1.6rem, 2.6vw, 2.2rem);
line-height: 1.1;
color: #FFFFFF;
}
.vhero__fact span {
display: block;
margin-top: 0.2rem;
font-size: var(--fs-xs);
text-transform: uppercase;
letter-spacing: 0.12em;
font-weight: 700;
color: #A9B4DA;
}
.vhero--saturn .vhero__fact b { color: #FFD35C; }
.vhero--blackhole .vhero__fact b { color: #E9C978; }
/* --- Sophia Math · animación de Manim --------------------------------------
La animación ya nace con el tercio izquierdo vacío, así que el velo puede ser
más discreto que en los vídeos de Saturno o del agujero negro. */
.vhero--math {
--vh-focus: 50% 50%;
border-radius: 0 0 clamp(28px, 5vw, 64px) clamp(28px, 5vw, 64px);
}
.vhero--math .bgvideo {
--bgv-poster: image-set(
url('../video/math/portadamath-poster.webp') type('image/webp'),
url('../video/math/portadamath-poster.jpg') type('image/jpeg'));
--bgv-scrim: linear-gradient(96deg,
rgba(var(--vh-rgb), 0.90) 0%,
rgba(var(--vh-rgb), 0.84) 32%,
rgba(var(--vh-rgb), 0.46) 50%,
rgba(var(--vh-rgb), 0.10) 70%,
rgba(var(--vh-rgb), 0.00) 86%);
}
.vhero--math .eyebrow { color: #A487DC; }
.vhero--math .vhero__fact b { color: #A487DC; }
/* --- Encuadre responsive · medido sobre capturas reales ------------------- */
@media (max-width: 1180px) {
.vhero__copy { max-width: 54%; }
.vhero--saturn { --vh-focus: 70% 48%; }
.vhero--math { --vh-focus: 58% 50%; }
.vhero--blackhole { --vh-focus: 62% 48%; }
.vhero .bgvideo {
--bgv-scrim: linear-gradient(96deg,
rgba(var(--vh-rgb), 0.95) 0%,
rgba(var(--vh-rgb), 0.92) 36%,
rgba(var(--vh-rgb), 0.76) 52%,
rgba(var(--vh-rgb), 0.32) 68%,
rgba(var(--vh-rgb), 0.00) 84%);
}
}
/* Estrecho: el sujeto ocupa casi todo el ancho visible. Se pasa a la misma
composición que el hero del cohete: texto arriba, vídeo en banda abajo, todo
dentro del mismo bloque oscuro. */
@media (max-width: 900px) {
.vhero {
flex-direction: column;
align-items: stretch;
padding-block: clamp(2rem, 6vw, 3rem) 0;
min-height: 0;
}
.vhero__inner { order: 0; padding-bottom: var(--sp-8); }
.vhero__copy { max-width: 100%; }
.vhero .bgvideo {
order: 1;
position: relative;
inset: auto;
width: 100%;
height: clamp(240px, 56vw, 380px);
flex: none;
/* En banda ya no hay texto encima: el velo solo funde el borde superior. */
--bgv-scrim: linear-gradient(180deg,
rgba(var(--vh-rgb), 0.92) 0%,
rgba(var(--vh-rgb), 0.3) 16%,
rgba(var(--vh-rgb), 0) 36%);
--bgv-fade: linear-gradient(180deg,
rgba(var(--vh-rgb), 0) 58%,
rgba(var(--vh-rgb), 0.5) 84%,
rgb(var(--vh-rgb)) 100%);
}
.vhero__hem { height: clamp(64px, 16vw, 110px); }
.vhero--saturn { --vh-focus: 56% 46%; }
.vhero--math { --vh-focus: 62% 50%; }
.vhero--blackhole { --vh-focus: 62% 48%; }
.vhero--saturn .vhero__inner::before { left: -30%; width: 120%; }
}
/* ---- Cabecera de páginas interiores ------------------------------------- */
.page-hero {
position: relative;
padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(2.5rem, 5vw, 4rem);
background: linear-gradient(180deg, var(--bg-alt) 0%, var(--bg) 100%);
overflow: hidden;
}
.page-hero--cream { background: linear-gradient(180deg, var(--yellow-050) 0%, var(--bg) 100%); }
.page-hero--teal { background: linear-gradient(180deg, var(--teal-050) 0%, var(--bg) 100%); }
.page-hero--navy { background: var(--band); }
.page-hero--navy h1, .page-hero--navy .lead { color: #FFFFFF; }
.page-hero--navy .lead { color: var(--band-text); }
/* La miga de pan hereda el gris de página, que sobre navy queda en 2,6:1. */
.page-hero--navy .breadcrumb,
.page-hero--navy .breadcrumb span { color: var(--band-text); }
.page-hero--navy .breadcrumb a { color: #FFFFFF; }
.page-hero h1 { max-width: 18ch; }
.page-hero__grid {
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
gap: clamp(1.5rem, 4vw, 3.5rem);
align-items: center;
position: relative;
z-index: var(--z-content);
}
@media (max-width: 860px) {
.page-hero__grid { grid-template-columns: 1fr; }
.page-hero__aside { order: -1; }
}
.breadcrumb {
display: flex; flex-wrap: wrap; gap: var(--sp-2);
align-items: center;
margin-bottom: var(--sp-4);
font-size: var(--fs-xs);
color: var(--text-faint);
}
.breadcrumb a { color: var(--text-muted); }
.breadcrumb a:hover { color: var(--orange-500); }
/* ---- Sección "Dos maneras de aprender" ---------------------------------- */
.routes {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
gap: clamp(1.25rem, 2.5vw, 2rem);
align-items: start;
}
.route {
position: relative;
display: flex;
flex-direction: column;
padding: clamp(1.5rem, 3vw, 2.5rem);
border: 1.5px solid var(--border);
border-radius: var(--r-2xl);
background: var(--surface-2);
}
.route--academic { background: var(--yellow-050); border-color: var(--yellow-100); }
.route__mark {
position: absolute;
top: clamp(1.25rem, 2.5vw, 2rem);
right: clamp(1.25rem, 2.5vw, 2rem);
width: clamp(56px, 7vw, 78px);
opacity: .95;
}
.route h3 {
font-size: clamp(1.5rem, 2.4vw, 2.05rem);
max-width: 14ch;
margin-bottom: var(--sp-4);
}
.route__head p { font-size: var(--fs-sm); margin-bottom: 0; max-width: 44ch; }
.route__plans {
display: grid;
/* A su altura natural: estiradas a la misma, la del plan pequeño —que tiene
menos cosas que contar— se queda con un hueco vacío antes del borde. */
align-items: start;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
gap: var(--sp-4);
}
.route__foot { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4); }
.route__foot .route__note { margin: 0; flex: 1 1 100%; }
/* Las dos rutas comparten filas: presentación, precios, botón y pie. Así los
bloques de precio quedan a la misma altura aunque los textos midan distinto,
sin depender de alturas fijas.
Son tres filas: el botón de inscribirse ya no vive en cada ruta, es uno
solo para los cuatro planes, debajo de las dos. */
@supports (grid-template-rows: subgrid) {
@media (min-width: 900px) {
.routes { grid-template-rows: auto auto auto; align-items: stretch; }
.route {
display: grid;
grid-row: span 3;
grid-template-rows: subgrid;
gap: clamp(1.25rem, 2.5vw, 2rem);
}
.route__head { align-self: start; }
.route__cta { align-self: end; }
}
}
/* ---- Franja de disciplinas ----------------------------------------------- */
.topic-strip {
list-style: none;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--sp-4) clamp(1.25rem, 3.5vw, 2.75rem);
margin: 0;
padding: var(--sp-6) 0;
border-block: 1px solid var(--border);
}
.topic-strip li {
display: flex;
align-items: center;
gap: var(--sp-3);
margin: 0;
font-family: var(--font-body);
font-size: 0.86rem;
font-weight: 700;
letter-spacing: 0.02em;
color: var(--heading);
white-space: nowrap;
}
.topic__ico {
display: grid;
place-items: center;
width: 38px; height: 38px;
border-radius: var(--r-md);
background: var(--surface-2);
border: 1px solid var(--border);
}
.topic__ico .i { width: 20px; height: 20px; }
@media (max-width: 620px) {
.topic-strip { gap: var(--sp-4) var(--sp-5); }
.topic-strip li { font-size: 0.78rem; }
.topic__ico { width: 32px; height: 32px; }
.topic__ico .i { width: 17px; height: 17px; }
}
/* ---- Línea de tiempo / itinerario --------------------------------------- */
.timeline { list-style: none; padding: 0; margin: 0; position: relative; }
.timeline::before {
content: "";
position: absolute;
left: 15px; top: 8px; bottom: 8px;
width: 2px;
background: linear-gradient(180deg, var(--yellow-500), var(--teal-500));
border-radius: 2px;
}
.timeline li {
position: relative;
padding-left: 3.25rem;
margin-bottom: var(--sp-8);
}
.timeline li:last-child { margin-bottom: 0; }
.timeline li::before {
content: "";
position: absolute;
left: 8px; top: 6px;
width: 16px; height: 16px;
border-radius: 50%;
background: var(--surface);
border: 3px solid var(--yellow-500);
}
.timeline h4 { margin-bottom: var(--sp-1); }
.timeline p { font-size: var(--fs-sm); }
.timeline .age {
display: inline-block;
margin-bottom: var(--sp-2);
font-family: var(--font-body);
font-size: 0.7rem;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--orange-700);
}
/* ---- Tabla comparativa --------------------------------------------------- */
.table-wrap { overflow-x: auto; border-radius: var(--r-lg); border: 1px solid var(--border); }
table.compare {
width: 100%;
min-width: 620px;
border-collapse: collapse;
background: var(--surface);
font-size: var(--fs-sm);
}
table.compare th, table.compare td {
padding: var(--sp-4) var(--sp-5);
text-align: left;
border-bottom: 1px solid var(--border);
}
table.compare thead th {
font-family: var(--font-body);
font-size: var(--fs-xs);
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--navy-700);
background: var(--surface-2);
}
table.compare tbody tr:last-child td { border-bottom: 0; }
table.compare td:first-child { font-weight: 600; color: var(--navy-700); }
/* ---- Tarjetas de prensa -------------------------------------------------- */
.press-card { display: flex; flex-direction: column; gap: var(--sp-3); }
.press-card__who {
display: inline-flex;
align-items: center;
gap: 0.4rem;
align-self: flex-start;
padding: 0.24rem 0.6rem;
border-radius: var(--r-pill);
background: var(--yellow-050);
border: 1px solid var(--yellow-100);
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0.04em;
color: var(--navy-700);
margin: 0;
}
/* Miniatura de periódico ----------------------------------------------------
Recorte de prensa dibujado con CSS: papel crema, cabecera con el nombre del
medio y columnas de texto insinuadas. No reproduce el logotipo de nadie, así
que se puede publicar sin pedir permisos.
-------------------------------------------------------------------------- */
.press-thumb {
position: relative;
display: block;
overflow: hidden;
aspect-ratio: 16 / 9;
/* Sangra hasta el borde de la tarjeta: se lee como el recorte pegado arriba. */
margin: calc(-1 * clamp(1.5rem, 3vw, 2.25rem)) calc(-1 * clamp(1.5rem, 3vw, 2.25rem)) var(--sp-1);
border-radius: calc(var(--r-xl) - 1px) calc(var(--r-xl) - 1px) 0 0;
border-width: 0 0 1px 0;
background:
linear-gradient(180deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0) 22%),
#F6F2E7;
border: 1px solid #E2DAC6;
padding: clamp(0.75rem, 1.9vw, 1.1rem);
color: #1D2340;
--pt-ink: var(--navy-700);
}
.press-thumb__kicker {
display: block;
font-size: 0.52rem;
font-weight: 800;
letter-spacing: 0.2em;
text-transform: uppercase;
color: #6B6349;
border-bottom: 1px solid #D9D0BA;
padding-bottom: 0.3rem;
}
.press-thumb__name {
display: block;
margin-top: 0.35rem;
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(0.95rem, 2.2vw, 1.3rem);
line-height: 1.05;
color: var(--pt-ink);
/* Que un nombre largo no rompa el recorte. */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Columnas de texto insinuadas bajo la cabecera. */
.press-thumb__lines {
position: absolute;
left: clamp(0.6rem, 1.6vw, 0.9rem);
right: clamp(0.6rem, 1.6vw, 0.9rem);
bottom: clamp(0.55rem, 1.4vw, 0.8rem);
height: 42%;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.55rem;
opacity: 0.5;
}
.press-thumb__lines span {
background: repeating-linear-gradient(180deg,
#A9A08A 0 1.5px,
transparent 1.5px 5px);
}
.press-thumb__lines span:first-child {
border-left: 2px solid var(--pt-ink);
padding-left: 0.35rem;
background-position: 0.35rem 0;
background-size: calc(100% - 0.35rem) 100%;
background-repeat: no-repeat;
}
.press-card:hover .press-thumb__name { color: var(--pt-ink); opacity: 0.86; }
/* Un tono de tinta por medio, para que la parrilla no sea monótona. */
.press-thumb--teal { --pt-ink: #166477; }
.press-thumb--purple { --pt-ink: #6B41AE; }
.press-thumb--magenta { --pt-ink: #A82C68; }
.press-thumb--orange { --pt-ink: #B34A0A; }
.press-card__meta {
display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4);
font-size: var(--fs-xs);
color: var(--text-faint);
font-weight: 600;
}
.press-card h4 { margin: 0; }
/* Titulares largos: tres columnas como máximo, para que no queden en columna
estrecha de cuatro palabras por línea. */
@media (min-width: 1080px) {
.press-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* El enlace siempre abajo, para que la fila quede alineada. Los