/**
 * Stage Theme — hoja base.
 *
 * Ni un solo hex ni una sola tipografía hardcodeada: todo se lee de las custom
 * properties que inc/branding.php compila desde Ajustes del Theme y sirve inline
 * justo antes de esta hoja. Las plantillas HTML Libre heredan de las mismas.
 */

:root {
	/* Escala de espaciado y medidas propias del theme, no de la marca. */
	--stage-space-xs: 0.5rem;
	--stage-space-sm: 1rem;
	--stage-space-md: 1.5rem;
	--stage-space-lg: 3rem;
	--stage-container: 1200px;
	--stage-surface: #ffffff;
	--stage-text: #17171a;
	--stage-border: rgba(0, 0, 0, 0.12);
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	background: var(--stage-surface);
	color: var(--stage-text);
	font-family: var(--font-body);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--font-heading);
	line-height: 1.15;
	margin: 0 0 var(--stage-space-sm);
}

a {
	color: var(--color-primary);
}

img {
	max-width: 100%;
	height: auto;
}

.stage-container {
	width: min(100% - (2 * var(--stage-space-md)), var(--stage-container));
	margin-inline: auto;
}

/* Desplazamiento --------------------------------------------------------- */

/*
 * El salto a un ancla se desliza en vez de teletransportar. Lo hace el
 * navegador con su propia curva, no una librería que se queda con la rueda del
 * ratón: esas invierten el gesto —mueves la rueda y la página va por detrás—,
 * rompen el teclado y la barra de espacio, y en un móvil de gama media se
 * arrastran. Aquí el gesto sigue siendo del sistema; lo único que cambia es
 * cómo llega la página cuando alguien pulsa «Reservar plaza».
 *
 * Fuera del "no-preference": quien haya pedido menos movimiento en su sistema
 * sigue teniendo el salto instantáneo de siempre.
 */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

/*
 * Y al llegar, el ancla no se mete debajo de la cabecera pegajosa. El hueco lo
 * mide el JS con la altura real —que depende del alto del logo, de si hay barra
 * de contacto y de si la cabecera es fija—, así que aquí solo queda el sitio
 * donde ponerlo. Sin JS vale 0, que es exactamente lo que hacía antes.
 */
html {
	scroll-padding-top: var(--stage-scroll-offset, 0px);
}

/*
 * Aparición al entrar en pantalla.
 *
 * Sube dieciséis píxeles mientras aparece, con una curva que arranca rápido y
 * frena al final. Es el detalle que hace que una página larga se sienta
 * construida en vez de volcada de golpe, y cuesta dos propiedades que la GPU
 * resuelve sola — nada que obligue al navegador a recalcular la página.
 *
 * La clase la pone el JS, y solo en lo que queda por debajo de la primera
 * pantalla. Nada de lo que se ve al cargar se esconde: si el titular apareciera
 * con opacidad 0, el navegador no lo contaría como contenido pintado y el LCP
 * —la métrica de velocidad que mira Google— empeoraría por un adorno. Además,
 * si el JS no llega a ejecutarse, no hay nada oculto que rescatar.
 */
.stage-reveal {
	opacity: 0;
	transform: translateY(16px);
}

.stage-reveal.is-in {
	opacity: 1;
	transform: none;
	transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
	.stage-reveal {
		opacity: 1;
		transform: none;
	}
}

/* Accesibilidad ---------------------------------------------------------- */

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.stage-skip-link {
	position: absolute;
	left: -9999px;
	z-index: 100;
	padding: var(--stage-space-xs) var(--stage-space-sm);
	background: var(--color-primary);
	color: var(--color-primary-contrast);
	border-radius: var(--radius);
}

.stage-skip-link:focus {
	left: var(--stage-space-sm);
	top: var(--stage-space-sm);
}

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

/* Botones ---------------------------------------------------------------- */

/*
 * El botón a secas es el secundario, y se ve.
 *
 * Antes no: sin fondo, sin color y sin borde, un <a class="stage-button"> salía
 * literalmente invisible. Solo servía con el modificador de acento, y eso
 * bastaba mientras el HTML lo escribiera el theme — pero en cuanto alguien
 * maqueta a mano y necesita un segundo botón, escribe la clase base y se
 * encuentra un hueco. Pasó con un héroe hecho con IA: el botón principal se
 * veía y el de al lado no existía.
 *
 * El contorno sale de currentColor, así que se dibuja del color del texto que
 * tenga encima y funciona igual sobre el blanco de una página que sobre una
 * franja de marca.
 */
.stage-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--stage-space-xs);
	padding: 0.7em 1.4em;
	border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
	border-radius: var(--radius);
	background: transparent;
	color: inherit;
	font-family: var(--font-heading);
	font-size: 1rem;
	letter-spacing: 0.02em;
	line-height: 1.1;
	text-decoration: none;
	cursor: pointer;
	transition: transform 0.15s ease, filter 0.15s ease, border-color 0.15s ease;
}

.stage-button--accent {
	border-color: transparent;
	background: var(--color-accent);
	color: var(--color-accent-contrast);
}

.stage-button:hover,
.stage-button:focus-visible {
	filter: brightness(1.08);
	transform: translateY(-1px);
}

/* El de acento ya se ilumina con el filtro; el de contorno necesita su línea. */
.stage-button:not(.stage-button--accent):hover,
.stage-button:not(.stage-button--accent):focus-visible {
	border-color: color-mix(in srgb, currentColor 65%, transparent);
}

@media (prefers-reduced-motion: reduce) {
	.stage-button {
		transition: none;
	}

	.stage-button:hover,
	.stage-button:focus-visible {
		transform: none;
	}
}

/* Franjas de color ------------------------------------------------------- */

/*
 * Una sección con fondo de marca, con su color de texto ya puesto.
 *
 * Existe para cerrar el fallo más caro de maquetar a mano: escribir
 * background sin escribir color. El theme parte de fondo blanco con texto casi
 * negro, así que quien pinta una franja oscura y no dice nada más se queda con
 * el texto negro sobre negro — y no se entera, porque lo que él escribió a mano
 * sí lleva su color; lo que desaparece es lo que no tocó, un botón secundario o
 * un enlace.
 *
 * Con estas clases el par va junto y no se puede poner uno sin el otro. Los
 * enlaces de dentro heredan por el mismo motivo: el color de enlace del sitio
 * es el primario, que sobre una franja primaria es invisible.
 */
.stage-band {
	padding-block: clamp(var(--stage-space-lg), 6vw, 4.5rem);
}

.stage-band--primary {
	background: var(--color-primary);
	color: var(--color-primary-contrast);
}

.stage-band--accent {
	background: var(--color-accent);
	color: var(--color-accent-contrast);
}

/* Apenas teñida: separa una sección de la siguiente sin cambiar de mundo. */
.stage-band--soft {
	background: color-mix(in srgb, var(--color-accent) 4%, var(--stage-surface));
	color: var(--stage-text);
}

.stage-band--primary a,
.stage-band--accent a {
	color: inherit;
}

/* Cabecera --------------------------------------------------------------- */

.stage-header {
	background: var(--stage-surface);
	border-bottom: 1px solid var(--stage-border);
	z-index: 50;
}

.stage-header--sticky {
	position: sticky;
	top: 0;
}

/* La sombra aparece solo al despegarse del borde superior, no en reposo. */
.stage-header--sticky.is-stuck {
	box-shadow: 0 2px 16px rgb(0 0 0 / 8%);
}

.stage-topbar {
	background: var(--color-primary);
	color: var(--color-primary-contrast);
	font-size: 0.8125rem;
}

.stage-topbar__inner {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: var(--stage-space-md);
	padding-block: 0.45rem;
}

.stage-topbar__item {
	color: inherit;
	text-decoration: none;
	opacity: 0.9;
}

.stage-topbar a.stage-topbar__item:hover,
.stage-topbar a.stage-topbar__item:focus {
	opacity: 1;
	text-decoration: underline;
}

.stage-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--stage-space-md);
	padding-block: var(--stage-space-sm);
}

.stage-branding__link {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	color: inherit;
}

.stage-branding__logo {
	display: block;
	/* Lo fija la escuela desde el panel; 52 es solo el valor de partida. */
	max-height: var(--stage-logo-h, 52px);
	width: auto;
}

/* Cabecera sobre el color de marca, con el texto en su contraste calculado. */
.stage-header--dark {
	background: var(--color-primary);
	color: var(--color-primary-contrast);
	border-bottom-color: color-mix(in srgb, currentColor 20%, transparent);
}

.stage-header--dark .stage-topbar {
	background: color-mix(in srgb, currentColor 12%, transparent);
}

.stage-header--dark .stage-mobile-panel {
	border-color: color-mix(in srgb, currentColor 25%, transparent);
}

.stage-header--dark .stage-mobile-panel {
	background: var(--color-primary);
}

/* Posición del menú dentro de la cabecera. */
.stage-header--menu-left .stage-nav--desktop {
	margin-right: auto;
	margin-left: var(--stage-space-lg);
}

.stage-header--menu-center .stage-nav--desktop {
	margin-inline: auto;
}

.stage-header--menu-right .stage-nav--desktop {
	margin-left: auto;
	margin-right: var(--stage-space-sm);
}

.stage-branding__name {
	font-family: var(--font-heading);
	font-size: 1.375rem;
	letter-spacing: 0.02em;
}

.stage-header__actions {
	display: flex;
	align-items: center;
	gap: var(--stage-space-sm);
}

.stage-nav__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--stage-space-md);
	margin: 0;
	padding: 0;
	list-style: none;
}

.stage-nav a {
	position: relative;
	display: block;
	padding-block: 0.35rem;
	color: inherit;
	text-decoration: none;
	font-size: 0.9375rem;
}

/* Subrayado que crece desde la izquierda, en el color de acento de la marca. */
.stage-nav a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 2px;
	background: var(--color-accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.18s ease;
}

.stage-nav a:hover::after,
.stage-nav a:focus-visible::after,
.stage-nav .current-menu-item > a::after,
.stage-nav .current-menu-ancestor > a::after {
	transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
	.stage-nav a::after {
		transition: none;
	}
}

/*
 * Botón de menú, sin caja. El recuadro con borde competía con el logo, y en
 * móvil el logo es lo que tiene que mandar. Se conserva lo que de verdad
 * importa: 44px de área de pulsación, que es el mínimo cómodo para un dedo, con
 * las barras centradas dentro y un fondo que solo aparece al tocarlo.
 */
.stage-nav-toggle {
	display: none;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: none;
	border: 0;
	border-radius: var(--radius);
	color: inherit;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.stage-nav-toggle:hover,
.stage-nav-toggle:focus-visible {
	/* Del color del propio texto: funciona igual sobre cabecera clara u oscura. */
	background: color-mix(in srgb, currentColor 10%, transparent);
}

/*
 * La barra del medio es el fondo del propio span; las otras dos van colocadas
 * a la misma distancia con posición absoluta. Eso hace que el aspa cierre
 * exacta —las dos líneas se cruzan en el mismo punto— en vez de quedar
 * descuadrada un píxel, que es lo que pasaba moviéndolas con el flujo normal.
 */
.stage-nav-toggle__bars {
	position: relative;
	display: block;
	width: 24px;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
	transition: background-color 0.2s ease;
}

.stage-nav-toggle__bars::before,
.stage-nav-toggle__bars::after {
	content: "";
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
	transition: transform 0.25s ease;
}

.stage-nav-toggle__bars::before {
	top: -7px;
}

.stage-nav-toggle__bars::after {
	top: 7px;
}

/* Las tres barras se convierten en aspa cuando el panel está abierto. */
.stage-nav-toggle[aria-expanded="true"] .stage-nav-toggle__bars {
	background: transparent;
}

.stage-nav-toggle[aria-expanded="true"] .stage-nav-toggle__bars::before {
	transform: translateY(7px) rotate(45deg);
}

.stage-nav-toggle[aria-expanded="true"] .stage-nav-toggle__bars::after {
	transform: translateY(-7px) rotate(-45deg);
}

@media (prefers-reduced-motion: reduce) {
	.stage-nav-toggle,
	.stage-nav-toggle__bars,
	.stage-nav-toggle__bars::before,
	.stage-nav-toggle__bars::after {
		transition: none;
	}
}

.stage-mobile-panel {
	border-top: 1px solid var(--stage-border);
	padding-block: var(--stage-space-sm) var(--stage-space-md);
	background: var(--stage-surface);
}

.stage-mobile-panel[hidden] {
	display: none;
}

.stage-mobile-panel__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.stage-mobile-panel__list a {
	display: block;
	padding-block: 0.75rem;
	border-bottom: 1px solid var(--stage-border);
	color: inherit;
	text-decoration: none;
}

.stage-mobile-panel__list .sub-menu {
	margin: 0;
	padding-left: var(--stage-space-md);
	list-style: none;
}

.stage-mobile-panel__cta {
	margin-top: var(--stage-space-md);
	width: 100%;
}

@media (max-width: 900px) {
	.stage-nav--desktop {
		display: none;
	}

	.stage-nav-toggle {
		display: grid;
	}

	.stage-header__cta {
		display: none;
	}
}

/* Contenido y pie -------------------------------------------------------- */

.stage-main {
	padding-block: var(--stage-space-lg);
	min-height: 50vh;
}

.stage-entry + .stage-entry {
	margin-top: var(--stage-space-lg);
}

/*
 * El pie va sobre el color primario de la marca, con el texto en el color de
 * contraste que se calcula por luminancia. Una escuela puede poner un primario
 * casi blanco o casi negro y el pie sigue siendo legible sin tocar CSS.
 */
.stage-footer {
	margin-top: var(--stage-space-lg);
	background: var(--color-primary);
	color: var(--color-primary-contrast);
}

.stage-footer a {
	color: inherit;
	text-decoration: none;
}

.stage-footer a:hover,
.stage-footer a:focus-visible {
	text-decoration: underline;
}

.stage-footer__top {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1.2fr;
	gap: var(--stage-space-lg);
	padding-block: var(--stage-space-lg);
}

.stage-footer__logo {
	display: block;
	max-height: 48px;
	width: auto;
	margin-bottom: var(--stage-space-sm);
}

.stage-footer__brand .stage-branding__name {
	display: block;
	margin-bottom: var(--stage-space-sm);
	font-size: 1.375rem;
}

.stage-footer__about {
	margin: 0;
	max-width: 42ch;
	font-size: 0.9375rem;
	opacity: 0.85;
}

.stage-footer__heading {
	margin-bottom: var(--stage-space-sm);
	font-size: 0.8125rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	opacity: 0.7;
}

.stage-footer__list,
.stage-footer__contact {
	display: grid;
	gap: 0.6rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.9375rem;
}

.stage-footer__contact-label {
	display: block;
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.55;
}

.stage-footer__bottom {
	border-top: 1px solid currentColor;
	/* El borde hereda el color del texto, así que se atenúa para no competir. */
	border-color: color-mix(in srgb, currentColor 20%, transparent);
}

.stage-footer__bottom-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--stage-space-sm);
	padding-block: var(--stage-space-sm);
}

.stage-footer__copyright {
	margin: 0;
	font-size: 0.8125rem;
	opacity: 0.75;
}

@media (max-width: 900px) {
	.stage-footer__top {
		grid-template-columns: 1fr 1fr;
	}

	.stage-footer__brand {
		grid-column: 1 / -1;
	}
}

@media (max-width: 560px) {
	.stage-footer__top {
		grid-template-columns: 1fr;
		gap: var(--stage-space-md);
	}
}

/* Cabecera y pie a medida ------------------------------------------------ */

/*
 * Cuando la cabecera o el pie se maquetan a mano, el theme deja de decidir lo
 * de dentro pero sigue poniendo el marco: la etiqueta <header>, la <footer>, el
 * enlace de salto al contenido y, si estaba activada, la cabecera fija.
 *
 * Lo único que se añade es el aire vertical. Sin él, un pie con tres shortcodes
 * seguidos sale pegado a los bordes y parece roto; con él, lo mínimo escrito ya
 * se ve bien, y quien envuelva su contenido en un div con relleno propio solo
 * gana un poco más de aire, que nunca es el problema.
 */
.stage-header--custom {
	/* El panel del menú de móvil se cuelga de aquí. */
	position: relative;
	padding-block: var(--stage-space-sm);
	border-bottom: 0;
}

.stage-footer--custom {
	padding-block: var(--stage-space-lg);
}

/*
 * En la cabecera estándar el panel es un bloque más, debajo de la barra. En una
 * a medida no se sabe dónde habrá caído [stage_menu] —puede estar dentro de una
 * columna estrecha— así que el panel se despega y se cuelga del ancho completo
 * de la cabecera, que es donde tiene sentido leerlo.
 */
.stage-header--custom .stage-mobile-panel {
	position: absolute;
	inset-inline: 0;
	top: 100%;
	box-shadow: 0 12px 24px rgb(0 0 0 / 10%);
}

/*
 * El logo de [stage_logo]. Hereda el alto de "Alto del logo" del panel, que la
 * cabecera publica en --stage-logo-h, así que ese ajuste sigue mandando aunque
 * la cabecera esté escrita a mano. El atributo alto="40" lo pisa donde haga
 * falta, por ejemplo en el pie.
 */
.stage-logo-block {
	display: inline-block;
	line-height: 0;
}

.stage-logo-block .stage-logo {
	display: block;
	width: auto;
	height: var(--stage-logo-h, 52px);
}

.stage-social {
	display: flex;
	flex-wrap: wrap;
	gap: var(--stage-space-md);
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.9375rem;
}

/* Migas de pan ----------------------------------------------------------- */

.stage-breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--stage-space-xs);
	margin: 0 0 var(--stage-space-md);
	padding: 0;
	list-style: none;
	font-size: 0.875rem;
}

.stage-breadcrumbs__item + .stage-breadcrumbs__item::before {
	content: "›";
	margin-right: var(--stage-space-xs);
	opacity: 0.5;
}

.stage-breadcrumbs a {
	color: inherit;
	text-decoration: none;
}

.stage-breadcrumbs a:hover,
.stage-breadcrumbs a:focus {
	text-decoration: underline;
}

/* Listados --------------------------------------------------------------- */

.stage-page-header {
	margin-bottom: var(--stage-space-lg);
	max-width: 65ch;
}

.stage-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
	gap: var(--stage-space-md);
}

.stage-grid--compact {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr));
}

/*
 * Reacción al ratón.
 *
 * Una rejilla de tarjetas que no se mueve al pasar por encima no parece
 * clicable: el visitante no sabe si son enlaces o adorno. Y estas tarjetas son
 * el embudo entero —elegir estilo, elegir edad, elegir clase—, así que cada una
 * tiene que pedir el clic.
 *
 * La tarjeta se acerca, con una sombra corta debajo que sostiene el gesto. Solo
 * transform y box-shadow: las dos las resuelve la tarjeta gráfica sin
 * recalcular la página, así que doce tarjetas a la vez no le cuestan nada ni al
 * móvil más justo.
 *
 * Un 3% es poco a propósito: en una rejilla apretada, la tarjeta que crece se
 * mete en el hueco de las vecinas, y con el z-index pasa por encima. Más que
 * eso deja de leerse como que se acerca y empieza a leerse como que empuja.
 */
.stage-card {
	position: relative;
	border: 1px solid var(--stage-border);
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--stage-surface);
	transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

/* :focus-within y no solo :hover: quien navega con el teclado ve lo mismo. */
.stage-card:hover,
.stage-card:focus-within {
	transform: scale(1.03);
	z-index: 1;
	border-color: color-mix(in srgb, var(--color-accent) 50%, transparent);
	box-shadow: 0 18px 30px -20px rgb(0 0 0 / 35%);
}

.stage-card__link {
	display: block;
	color: inherit;
	text-decoration: none;
	height: 100%;
}

.stage-card__media {
	position: relative;
	aspect-ratio: 4 / 3;
	background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
	display: grid;
	place-items: center;
	overflow: hidden;
}

/* Marcador de posición mientras la escuela no ha subido la foto. */
.stage-card__placeholder {
	font-family: var(--font-heading);
	font-size: 3rem;
	line-height: 1;
	color: var(--color-primary-contrast);
	opacity: 0.65;
}

.stage-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/*
 * La foto no se acerca por su cuenta: al acercarse la tarjeta entera, se acerca
 * con ella. Hacerlo dos veces la agrandaba un 8% y ya no parecía profundidad.
 *
 * Y así desaparece el problema de los carteles. Un zoom de la foto dentro de su
 * marco recorta por los bordes, que es justo donde va escrito el nombre; con la
 * tarjeta creciendo entera, la imagen y su marco crecen a la vez y no se corta
 * nada.
 */

.stage-card__body {
	padding: var(--stage-space-sm);
}

.stage-card__title {
	font-size: 1.125rem;
	margin-bottom: var(--stage-space-xs);
}

.stage-card__text,
.stage-card__meta {
	margin: 0;
	font-size: 0.9375rem;
}

.stage-card__meta {
	margin-top: var(--stage-space-xs);
	opacity: 0.7;
	font-size: 0.8125rem;
}

.stage-subnav__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--stage-space-xs);
	margin: 0 0 var(--stage-space-lg);
	padding: 0;
	list-style: none;
}

.stage-subnav__link {
	display: inline-block;
	padding: var(--stage-space-xs) var(--stage-space-sm);
	border: 1px solid var(--stage-border);
	border-radius: var(--radius-pill);
	text-decoration: none;
	color: inherit;
	font-size: 0.9375rem;
}

.stage-subnav__link:hover,
.stage-subnav__link:focus {
	border-color: var(--color-primary);
	color: var(--color-primary);
}

/* Paso de edad ----------------------------------------------------------- */

/* Es el camino que sigue el embudo, no un filtro más: pesa más que la subnav
   de categorías y se marca con el color de acento al pasar por encima. */
.stage-ages {
	margin-bottom: var(--stage-space-lg);
}

.stage-ages__title {
	font-size: 1.25rem;
	margin-bottom: var(--stage-space-sm);
}

/*
 * La misma rejilla que las clases, y esa es toda la explicación: las dos son
 * una fila de tarjetas debajo de un titular a la izquierda, así que tienen que
 * medir y empezar igual. Alinear estas al centro las dejaba flotando respecto
 * del titular.
 *
 * La clave es auto-fill y no auto-fit. auto-fit descarta las columnas que
 * sobran y reparte el ancho entre las que quedan: con dos edades, cada tarjeta
 * se llevaba media pantalla, y un cartel vertical dentro de una columna de
 * 600px salía de 800 de alto. auto-fill se queda las columnas vacías, así que
 * la tarjeta mide lo mismo haya dos edades o haya ocho.
 *
 * Y align-items: start, para que cada tarjeta mida lo suyo. Estirándolas todas
 * a la altura de la más alta, la de texto que va al lado de un cartel se
 * convertía en un recuadro vacío de media pantalla — el mismo recuadro que ya
 * hubo que quitar en la rejilla de clases.
 */
.stage-ages__list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
	align-items: start;
	gap: var(--stage-space-sm);
	margin: 0;
	padding: 0;
	list-style: none;
}

.stage-age {
	display: flex;
	flex-direction: column;
	padding: var(--stage-space-sm);
	border: 1px solid var(--stage-border);
	border-radius: var(--radius);
	color: inherit;
	text-decoration: none;
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

/* El mismo gesto que las tarjetas, y encima el acento que este paso ya tenía:
   es el camino del embudo, así que puede pesar un poco más que el resto. */
.stage-age:hover,
.stage-age:focus {
	border-color: var(--color-accent);
	color: var(--color-accent);
	transform: scale(1.03);
	box-shadow: 0 18px 30px -20px rgb(0 0 0 / 35%);
}

.stage-age__name {
	font-family: var(--font-heading);
	font-size: 1.375rem;
	line-height: 1.1;
}

.stage-age__count {
	margin-top: 0.25rem;
	font-size: 0.8125rem;
	opacity: 0.7;
}

/* Con cartel, el cartel es la tarjeta: ni relleno ni texto, y sin recortar. */
.stage-age--photo {
	padding: 0;
	overflow: hidden;
	line-height: 0;
}

.stage-age__image {
	display: block;
	width: 100%;
	height: auto;
}

.stage-age__body {
	display: block;
	padding: var(--stage-space-sm);
	line-height: 1.3;
}

/*
 * Bloque de clusters, el primer paso: se maqueta con las tarjetas del listado.
 *
 * Aquí las tarjetas son pocas y grandes, así que la rejilla usa auto-fit y no
 * auto-fill: con dos estilos, auto-fill reservaría las columnas vacías y las
 * dejaría arrinconadas a la izquierda con medio ancho de pantalla en blanco.
 * El tope de 400px evita el extremo contrario, dos tarjetas gigantes.
 */
.stage-clusters {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 400px));
	justify-content: center;
	margin-block: var(--stage-space-lg);
}

/*
 * Si la categoría tiene imagen, la imagen es la tarjeta entera: estos carteles
 * ya llevan el nombre dentro. Y no se recorta —nada de object-fit: cover— porque
 * cortar por la mitad un cartel que dice algo es peor que cualquier descuadre.
 */
/*
 * Que no se estire para igualar la altura de sus vecinas. En una rejilla mixta
 * —unas clases con cartel y otras sin él— las de texto son más altas, así que
 * la del cartel se alargaba y dejaba debajo una franja del fondo de la tarjeta:
 * una caja vacía que parecía un error de maquetación. Aquí la tarjeta mide lo
 * que mide su imagen, ni un píxel más.
 */
.stage-card--photo {
	align-self: start;
}

.stage-card--photo .stage-card__link {
	line-height: 0;
}

.stage-card--photo .stage-card__image {
	width: 100%;
	height: auto;
	object-fit: contain;
}

/* Con el texto activado, el bloque de abajo recupera su interlineado normal. */
.stage-card--photo .stage-card__body {
	line-height: 1.6;
}

.stage-clusters-step {
	margin-bottom: var(--stage-space-lg);
}

/* Dentro del paso, el titular ya separa: la rejilla no necesita su margen. */
.stage-clusters-step .stage-clusters {
	margin-block: 0;
}

.stage-clusters__title {
	font-size: 1.25rem;
	margin-bottom: var(--stage-space-sm);
}

/* Página maquetada a mano: solo se le da aire, el diseño lo pone quien la escribe. */
.stage-custom {
	padding-block: var(--stage-space-md);
}

.stage-404 {
	padding-block: var(--stage-space-lg);
}

.stage-404__links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--stage-space-md);
}

/*
 * Quien haya pedido menos movimiento en su sistema no ve el salto ni el zoom.
 * El borde de acento y la sombra sí se quedan: son la señal de "esto se puede
 * pulsar", y esa no es movimiento, es información.
 */
@media (prefers-reduced-motion: reduce) {
	.stage-card,
	.stage-age {
		transition: none;
	}

	.stage-card:hover,
	.stage-card:focus-within,
	.stage-age:hover,
	.stage-age:focus {
		transform: none;
	}
}

/* Vídeo y formularios ---------------------------------------------------- */

.stage-video {
	margin-block: var(--stage-space-md);
	border-radius: var(--radius);
	overflow: hidden;
}

.stage-video iframe {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	border: 0;
}

.stage-form {
	margin-block: var(--stage-space-md);
}

.stage-form__notice {
	padding: var(--stage-space-sm);
	border: 1px dashed var(--color-accent);
	border-radius: var(--radius);
	font-size: 0.9375rem;
}

.stage-cta-label,
.stage-vsl__cta {
	margin-bottom: var(--stage-space-sm);
	font-family: var(--font-heading);
	font-size: 1.5rem;
	line-height: 1.2;
	color: var(--color-accent);
}

.stage-legal,
.stage-vsl__legal {
	font-size: 0.8125rem;
	opacity: 0.7;
}

/* Ficha de clase --------------------------------------------------------- */

.stage-single__hook {
	font-size: 1.125rem;
	max-width: 65ch;
}

.stage-single__content {
	max-width: 70ch;
}

.stage-single__teachers,
.stage-single__cta {
	margin-top: var(--stage-space-lg);
}

.stage-teacher-chip {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--stage-space-xs);
	text-align: center;
	color: inherit;
	text-decoration: none;
	font-size: 0.9375rem;
}

.stage-teacher-chip img {
	border-radius: var(--radius-pill);
	width: 96px;
	height: 96px;
	object-fit: cover;
}

/* Ficha de profesor (VSL) ------------------------------------------------ */

/*
 * Landing completa: la clase se sirve sin cabecera ni pie (header-bare.php y
 * footer-bare.php), así que aquí no hay menú que esconder. Solo queda una línea
 * de copyright abajo, sin enlaces.
 */
.stage-main--bare {
	padding-block: 0;
}

.stage-bare-footer {
	background: var(--color-primary);
	color: var(--color-primary-contrast);
	padding-block: var(--stage-space-sm);
	text-align: center;
}

.stage-bare-footer__copyright {
	margin: 0;
	font-size: 0.8125rem;
	opacity: 0.7;
}

/*
 * El escenario va sobre el color primario de la marca, con el texto en el color
 * de contraste calculado. Reproduce el contraste oscuro→claro del sitio actual
 * (que es el que convierte) sin fijar ni un solo color en el CSS.
 */
.stage-vsl__stage {
	background: var(--color-primary);
	color: var(--color-primary-contrast);
	padding-block: var(--stage-space-lg);
}

/* Marca de la landing: presente pero sin robarle sitio al vídeo. */
.stage-vsl__brand {
	margin-bottom: var(--stage-space-lg);
	text-align: center;
}

.stage-vsl__brand-logo {
	display: inline-block;
	max-height: 40px;
	width: auto;
}

/*
 * Logo claro reutilizado sobre fondo oscuro: se pasa a blanco. Sin esto, un
 * logo de arte negro —lo normal— queda invisible sobre el fondo de marca.
 * Solo aplica al recurso de emergencia: si la escuela sube su versión oscura,
 * se respeta tal cual.
 */
.stage-logo--invert {
	filter: brightness(0) invert(1);
}

.stage-vsl__brand .stage-branding__name {
	font-size: 1.25rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.stage-vsl__hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr);
	align-items: center;
	gap: var(--stage-space-lg);
}

.stage-vsl__hero--no-video {
	grid-template-columns: 1fr;
	justify-items: center;
	text-align: center;
}

.stage-vsl__person {
	text-align: center;
}

.stage-vsl__photo {
	display: block;
	width: 100%;
	max-width: 260px;
	margin: 0 auto var(--stage-space-sm);
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: calc(var(--radius) * 2);
	/* El halo despega la foto del fondo oscuro sin necesidad de un borde. */
	box-shadow: 0 0 40px rgb(255 255 255 / 14%);
}

.stage-vsl__name {
	margin-bottom: 0.25rem;
	font-size: clamp(1.75rem, 3vw, 2.25rem);
}

.stage-vsl__role {
	margin: 0;
	font-size: 1rem;
	opacity: 0.8;
}

.stage-vsl__media iframe,
.stage-vsl__media .stage-video {
	border-radius: calc(var(--radius) * 2);
	box-shadow: 0 0 60px rgb(255 255 255 / 12%);
}

.stage-vsl__media .stage-video {
	margin: 0;
}

/*
 * El botón que baja al formulario: ancho completo, porque en esta pantalla es
 * el único camino y no compite con nada.
 *
 * Lo que se ha quitado es el grito, no el tamaño: iba en cursiva y a 1.5rem, y
 * eso es lo que hacía que la franja pareciera de 2015. Misma presencia, con la
 * tipografía sobria.
 */
.stage-vsl__jump {
	display: flex;
	width: 100%;
	margin-top: var(--stage-space-lg);
	padding-block: 1.05em;
	padding-inline: var(--stage-space-sm);
	border-radius: var(--radius-pill);
	font-size: clamp(1rem, 1.8vw, 1.25rem);
	letter-spacing: 0.03em;
	text-align: center;
}

.stage-vsl__hook,
.stage-vsl__content {
	max-width: 65ch;
	margin-inline: auto;
	margin-top: var(--stage-space-lg);
	font-size: 1.0625rem;
}

/* Ficha técnica ---------------------------------------------------------- */

/*
 * Datos concretos, no argumentos: es lo único de esta página que se puede
 * extraer y citar. Mismo ancho que el gancho, para que se lea como parte del
 * mismo bloque, y líneas del color del propio texto — así funciona igual sobre
 * el fondo de marca de la landing que sobre el blanco de una página normal.
 */
/*
 * En rejilla de fichas y no en filas apiladas. Una lista de pares con su línea
 * de separación es lo que hacía que la página pareciera de hace quince años: en
 * un monitor ancho dejaba un pasillo enorme entre la etiqueta y el dato, y
 * obligaba a leer en vertical algo que se capta de un vistazo. Como fichas, los
 * datos se leen en paralelo y ocupan el ancho que tienen.
 */
.stage-specs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
	gap: var(--stage-space-sm);
	max-width: 900px;
	margin: var(--stage-space-lg) auto 0;
	padding: 0;
}

.stage-specs__row {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	padding: var(--stage-space-sm);
	border: 1px solid color-mix(in srgb, currentColor 14%, transparent);
	border-radius: var(--radius);
	/* Del color del texto, así que se apoya igual sobre el fondo de marca de la
	   landing que sobre el blanco de una página normal. */
	background: color-mix(in srgb, currentColor 5%, transparent);
}

/* "Qué llevar" suele ser lo más largo y a veces son varias líneas. */
.stage-specs__row--wide {
	grid-column: 1 / -1;
}

.stage-specs__label {
	margin: 0;
	font-size: 0.6875rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	opacity: 0.55;
}

.stage-specs__value {
	margin: 0;
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.25;
}

/* Preguntas frecuentes --------------------------------------------------- */

/*
 * Plegadas con <details> nativo: sin JavaScript, accesibles de serie y con el
 * texto siempre en el HTML aunque no se vea. Seis preguntas abiertas serían un
 * muro que empuja el formulario fuera de la pantalla; plegadas, ocupan seis
 * líneas y quien tiene la duda la abre.
 */
.stage-faq {
	/*
	 * El color de marca del bloque, anclado al color del texto.
	 *
	 * El acento a secas no vale aquí: una escuela puede elegir un amarillo o un
	 * beige, y sobre fondo blanco los bordes y el signo desaparecerían. Mezclarlo
	 * con una cuarta parte del color del texto mantiene el tono de la marca —se
	 * reconoce que es suyo— y garantiza que siempre se vea, sea cual sea la
	 * paleta. De aquí salen las líneas, el fondo y el signo: un único sitio que
	 * tocar si algún día hay que ajustarlo.
	 */
	--stage-faq-brand: color-mix(in srgb, var(--color-accent) 75%, currentColor);

	max-width: 65ch;
	margin: var(--stage-space-lg) auto 0;
}

/*
 * En la ficha de clase el bloque va después del formulario, y es lo último
 * antes de la franja oscura del pie. Necesita aire por los dos lados y no por
 * los mismos motivos: arriba, para despegarse del borde de la franja de
 * conversión y leerse como una sección aparte; abajo, bastante más, porque si
 * no la última pregunta queda pegada al pie y parece que la página se corta a
 * mitad de frase.
 *
 * En su día bajé el aire de abajo a 3,5rem creyendo que una sola pregunta
 * flotaba demasiado lejos del pie. El problema de entonces no era el hueco:
 * era que la pregunta suelta parecía un renglón, y eso se arregló dándole
 * cuerpo de bloque. Con el bloque hecho, el hueco vuelve a hacer falta.
 */
.stage-vsl__faq {
	padding-block: clamp(var(--stage-space-md), 3.5vw, 2.5rem) clamp(var(--stage-space-lg), 7vw, 5.5rem);
}

.stage-vsl__faq .stage-faq {
	margin-top: 0;
}

/* En esta pantalla todo va centrado: el titular también. */
.stage-vsl__faq .stage-faq__title {
	text-align: center;
}

.stage-faq__title {
	font-size: 1.375rem;
	margin-bottom: var(--stage-space-md);
}

/*
 * Una raya corta del color de la marca debajo del titular. Es el detalle que
 * hace que el bloque se lea como parte de la escuela y no como un componente
 * genérico, y cuesta dos líneas. Al ser un bloque en flujo normal se alinea
 * sola: a la izquierda con el titular en una página maquetada, centrada en la
 * ficha de clase, donde los márgenes automáticos la llevan al centro.
 */
.stage-faq__title::after {
	content: "";
	display: block;
	width: 2.5rem;
	height: 3px;
	margin-top: 0.75rem;
	border-radius: var(--radius-pill);
	background: var(--stage-faq-brand);
}

.stage-vsl__faq .stage-faq__title::after {
	margin-inline: auto;
}

/*
 * Cada pregunta es un bloque con su borde, no una fila separada por una raya.
 * Con la lista de rayas, una sola pregunta se leía como un renglón suelto en
 * medio de la nada; como bloque, una sola pregunta sigue pareciendo una pieza
 * terminada. El relleno lateral además la alinea con la tarjeta del formulario
 * en vez de dejarla pegada al borde.
 */
.stage-faq__item {
	margin-bottom: 0.5rem;
	padding-inline: var(--stage-space-sm);
	border: 1px solid color-mix(in srgb, var(--stage-faq-brand) 20%, transparent);
	border-radius: var(--radius);
	background: color-mix(in srgb, var(--stage-faq-brand) 4%, transparent);
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

/*
 * La marca sube según el visitante se acerca: apenas se intuye en reposo, se
 * marca al pasar por encima y se afirma en la pregunta abierta. Así se ve de
 * un vistazo cuál está desplegada sin dibujar ninguna caja de más.
 *
 * Todos los tonos son mezclas con transparente, no colores planos, así que el
 * bloque se apoya igual sobre el blanco de la ficha que sobre el fondo de una
 * página maquetada a mano con el shortcode.
 */
.stage-faq__item:hover {
	border-color: color-mix(in srgb, var(--stage-faq-brand) 40%, transparent);
}

.stage-faq__item[open] {
	border-color: color-mix(in srgb, var(--stage-faq-brand) 55%, transparent);
	background: color-mix(in srgb, var(--stage-faq-brand) 8%, transparent);
}

.stage-faq__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--stage-space-sm);
	padding-block: 0.9rem;
	font-family: var(--font-heading);
	font-size: 1.0625rem;
	line-height: 1.3;
	cursor: pointer;
	/* Fuera el triángulo del navegador: se sustituye por un signo propio. */
	list-style: none;
}

.stage-faq__question::-webkit-details-marker {
	display: none;
}

/*
 * Un "+" que gira hasta ser un "×" al abrirse, sin imágenes ni iconos. Va del
 * color de la marca: es lo único de la pregunta que se puede colorear sin
 * tocar la legibilidad del texto, y basta para que el acordeón sea de la
 * escuela y no del theme.
 */
.stage-faq__question::after {
	content: "+";
	flex: 0 0 auto;
	font-family: var(--font-body);
	font-size: 1.5rem;
	line-height: 1;
	color: var(--stage-faq-brand);
	transition: transform 0.2s ease;
}

.stage-faq__item[open] .stage-faq__question::after {
	transform: rotate(45deg);
}

/*
 * Una línea finísima separa la respuesta de su pregunta. Sin ella, al abrir,
 * pregunta y respuesta se leían como un solo párrafo con la primera frase en
 * negrita; con ella se ve dónde acaba una y empieza la otra. También del tono
 * de la marca, para que no aparezca un gris de plantilla dentro de un bloque
 * que no tiene ninguno.
 */
.stage-faq__answer {
	padding-block: 0.9rem var(--stage-space-sm);
	border-top: 1px solid color-mix(in srgb, var(--stage-faq-brand) 15%, transparent);
	opacity: 0.85;
}

.stage-faq__answer p {
	margin-top: 0;
}

.stage-faq__answer p:last-child {
	margin-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
	.stage-faq__question::after,
	.stage-faq__item {
		transition: none;
	}
}

/*
 * Sección de conversión: vuelve al fondo claro para que el formulario destaque.
 * El fondo lleva un tinte mínimo del color de marca —no un gris fijo— para que
 * la tarjeta blanca de encima se lea como una hoja apoyada sobre una mesa.
 */
/*
 * Bloque de conversión.
 *
 * Va sobre un tinte bajísimo del color de acento en vez de sobre blanco: es lo
 * que separa esta franja del resto de la página sin recurrir a un gris de
 * plantilla, y sale de la paleta de la escuela, así que cambia con ella.
 *
 * Sobre ese fondo el formulario sí es una tarjeta blanca. En su día quité la
 * tarjeta porque una caja blanca sobre gris es el patrón más genérico que hay
 * — y el diagnóstico estaba a medias: lo genérico era el gris y el borde, no la
 * tarjeta. Con un tinte de marca y una sombra larga en vez de una línea, el
 * mismo elemento se lee como intención en lugar de como plantilla. Y aquí sí
 * interesa que despegue: es lo único que tiene que hacer el visitante.
 */
.stage-vsl__convert {
	background: color-mix(in srgb, var(--color-accent) 4%, var(--stage-surface));
	color: var(--stage-text);
	padding-block: clamp(var(--stage-space-lg), 6vw, 4.5rem);
	text-align: center;
}

/* Con un titular largo, 3rem se comía la pantalla entera antes del formulario. */
.stage-vsl__convert-title {
	max-width: 20ch;
	margin-inline: auto;
	font-size: clamp(1.625rem, 3.4vw, 2.375rem);
	letter-spacing: -0.02em;
	line-height: 1.1;
}

.stage-vsl__convert-sub {
	max-width: 46ch;
	margin: var(--stage-space-sm) auto 0;
	font-size: clamp(1rem, 1.4vw, 1.125rem);
	opacity: 0.6;
}

.stage-vsl__convert-inner {
	display: grid;
	justify-items: center;
	gap: clamp(var(--stage-space-md), 3vw, 2.5rem);
}

.stage-vsl__form-card {
	width: 100%;
	max-width: 560px;
	margin-inline: auto;
	padding: clamp(var(--stage-space-md), 3.5vw, 2.25rem);
	background: var(--stage-surface);
	border-radius: calc(var(--radius) * 2);
	/* Sombra larga y difusa en lugar de borde: da relieve sin dibujar una caja. */
	box-shadow: 0 30px 60px -35px rgb(0 0 0 / 45%), 0 2px 6px rgb(0 0 0 / 4%);
	text-align: left;
}

/*
 * El formulario trae su propio margen para cuando va suelto en una página. Aquí
 * dentro sobra: lo que separa ya es el relleno de la tarjeta, y sumar los dos
 * dejaba una franja muerta entre el membrete y el primer campo.
 */
.stage-vsl__form-card .stage-form {
	margin-block: 0;
}

.stage-vsl__form-card .stage-vsl__legal {
	margin-bottom: 0;
}

/* Membrete: el logo arriba, como un impreso de verdad. */
.stage-vsl__letterhead {
	margin-bottom: var(--stage-space-sm);
	text-align: center;
	opacity: 0.5;
}

.stage-vsl__form-logo {
	display: inline-block;
	max-height: 30px;
	width: auto;
}

/* Si la escuela no ha subido logo, el membrete es su nombre. */
.stage-vsl__letterhead .stage-branding__name {
	font-size: 1.125rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* El nombre pesa más que el rol: se separan en dos líneas. */
.stage-vsl__role span {
	display: block;
	font-size: 0.875em;
	opacity: 0.75;
}

/*
 * Móvil: manda el vídeo.
 *
 * En vertical la foto cuadrada se comía media pantalla y empujaba el vídeo
 * por debajo del pliegue, justo lo contrario de lo que se busca. Aquí la foto
 * se reduce a un avatar en línea con el nombre —sigue humanizando la oferta,
 * pero en una franja— y el vídeo sale a sangre para ganar los ~48px de margen
 * lateral, que en una pantalla de 390 son un 12% de ancho.
 */
@media (max-width: 782px) {
	.stage-vsl__stage {
		padding-block: var(--stage-space-md);
	}

	.stage-vsl__hero {
		grid-template-columns: 1fr;
		gap: var(--stage-space-md);
	}

	/*
	 * Avatar a la izquierda ocupando las dos filas, y a su derecha el título con
	 * el profesor debajo. Sin la colocación explícita, la rejilla reparte tres
	 * elementos en dos columnas y el nombre cae solo a la fila de abajo, debajo
	 * del avatar, donde no significa nada.
	 */
	.stage-vsl__brand {
		margin-bottom: var(--stage-space-md);
	}

	.stage-vsl__brand-logo {
		max-height: 28px;
	}

	.stage-vsl__person {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		align-items: center;
		column-gap: var(--stage-space-sm);
		row-gap: 0.15rem;
		text-align: left;
	}

	.stage-vsl__photo {
		grid-row: span 2;
		width: 64px;
		max-width: none;
		margin: 0;
		border-radius: var(--radius-pill);
		box-shadow: none;
	}

	.stage-vsl__name {
		grid-column: 2;
		align-self: end;
		margin: 0;
		font-size: clamp(1.35rem, 6vw, 1.75rem);
	}

	/* Subordinado al título: es quien la imparte, no el nombre de la clase. */
	.stage-vsl__role {
		grid-column: 2;
		align-self: start;
		font-size: 0.875rem;
		opacity: 0.7;
	}

	.stage-vsl__role span {
		display: inline;
	}

	.stage-vsl__role span::before {
		content: " · ";
	}

	/* A sangre: se compensan los márgenes laterales del contenedor. */
	.stage-vsl__media {
		margin-inline: calc(var(--stage-space-md) * -1);
	}

	.stage-vsl__media iframe,
	.stage-vsl__media .stage-video,
	.stage-vsl__media img {
		border-radius: 0;
		box-shadow: none;
	}

	.stage-vsl__jump {
		margin-top: var(--stage-space-md);
		padding-block: 1em;
		font-size: 1.0625rem;
	}

	.stage-vsl__hook,
	.stage-vsl__content {
		margin-top: var(--stage-space-md);
	}

	.stage-vsl__convert {
		padding-block: var(--stage-space-md);
	}

	/* La tarjeta se mantiene en móvil: es el efecto que se busca en las dos
	   pantallas. Solo se recortan los márgenes laterales para no estrechar
	   los campos del formulario. */
	.stage-vsl__convert > .stage-container {
		width: 100%;
		padding-inline: var(--stage-space-sm);
	}

	/* Sombra más corta: en una pantalla pequeña, la larga solo mancha. */
	.stage-vsl__form-card {
		box-shadow: 0 12px 30px -20px rgb(0 0 0 / 40%);
	}

	.stage-vsl__form-logo {
		max-height: 26px;
	}
}

/* Ficha de profesor (perfil) --------------------------------------------- */

.stage-profile__header {
	display: grid;
	grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
	align-items: start;
	gap: var(--stage-space-lg);
	margin-bottom: var(--stage-space-lg);
}

.stage-profile__photo {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: calc(var(--radius) * 2);
}

.stage-profile__name {
	margin-bottom: 0.25rem;
	font-size: clamp(1.75rem, 4vw, 2.75rem);
}

.stage-profile__role {
	margin: 0 0 var(--stage-space-sm);
	font-size: 1.0625rem;
	color: var(--color-accent);
}

.stage-profile__bio,
.stage-profile__content {
	max-width: 65ch;
}

.stage-profile__classes {
	margin-top: var(--stage-space-lg);
}

.stage-profile__classes h2 {
	margin-bottom: var(--stage-space-md);
}

@media (max-width: 782px) {
	.stage-profile__header {
		grid-template-columns: 1fr;
	}

	.stage-profile__photo {
		max-width: 200px;
	}
}

/* Reseñas ---------------------------------------------------------------- */

/* El widget del plugin trae su propia maquetación: aquí solo se le da sitio. */
.stage-reviews {
	margin-top: var(--stage-space-lg);
	padding-top: var(--stage-space-lg);
	border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent);
}


/* HTML Libre ------------------------------------------------------------- */

.stage-bare {
	margin: 0;
}

.stage-bare .stage-html-libre {
	min-height: 100vh;
}

/*
 * A sangre es a sangre: de borde a borde y también por arriba y por abajo.
 *
 * Antes se le dejaba aire vertical, y al sumarlo a lo que ya traen el <main> y
 * el pie salían tres franjas blancas apiladas: 4,5rem entre la cabecera y la
 * pieza, y 7,5rem entre la pieza y el pie. Con un héroe de fondo negro eso no
 * es aire, es un fallo — la pieza se ve recortada y flotando.
 *
 * Quien elige "ancho completo" quiere que su primera sección toque la cabecera.
 * El aire de dentro lo ponen las franjas (.stage-band), que traen el suyo.
 */
.stage-html-libre--full {
	padding-block: 0;
}

/*
 * Y hay que apagar además lo que ponen las plantillas de alrededor, que no
 * saben nada de esta página. Se hace con una clase en el <body> y no con :has()
 * porque el <main> lo imprime la cabecera, mucho antes de que nadie haya leído
 * el campo de ancho de la página.
 */
.stage-html-full .stage-main {
	padding-block: 0;
}

.stage-html-full .stage-footer {
	margin-top: 0;
}