/**
 * 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;
	/* Ver el comentario de .stage-card--photo: el cartel ya trae su marco. */
	border: 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.
 */
/*
 * Y sin el borde del theme.
 *
 * Estos carteles vienen con su propio marco dibujado —un neón, una línea, un
 * degradado que se corta—, así que la línea gris de la tarjeta les añadía un
 * segundo marco por encima del suyo. En una tarjeta de texto ese borde es lo
 * que la hace leerse como tarjeta; sobre un cartel es un cerco que no pintaba
 * nada.
 *
 * Al pasar el ratón no se pierde nada: lo que responde es el zoom y la sombra,
 * que sí funcionan sobre una imagen.
 */
/*
 * Y con la misma luz que el vídeo de la ficha.
 *
 * Un cartel sobre el fondo de la escuela se quedaba plano, pegado al fondo como
 * una pegatina. El vídeo de la ficha ya resolvía eso con un resplandor del color
 * de la marca, y es el mismo problema: despegar una imagen de su fondo sin
 * dibujarle un marco.
 *
 * El resplandor y nada más: el aro fino que sí lleva el vídeo aquí sería volver
 * a ponerle al cartel el segundo marco que se le quitó — estos carteles traen su
 * propio marco dibujado.
 *
 * Y con menos radio que el vídeo. A 70 píxeles, en una rejilla de cuatro
 * carteles el halo de cada uno entra en el de al lado y lo que se ve no son
 * cuatro carteles encendidos sino una mancha.
 */
/*
 * Y sin las esquinas redondeadas de la tarjeta.
 *
 * El mismo problema que el borde, pero más difícil de ver: la tarjeta recorta
 * en redondo y el cartel es rectangular, así que le comía las cuatro esquinas.
 * En un cartel con el marco pegado al canto —un neón, una línea— eso se ve como
 * un trazo que se interrumpe justo en la esquina, y al ampliarse con el ratón
 * el trazo engorda y el corte canta más.
 *
 * El recorte recto se queda: coincide con el borde de la imagen, así que no
 * corta nada, y mantiene a raya cualquier cosa que se salga.
 */
.stage-card--photo,
.stage-age--photo {
	border-radius: 0;
	box-shadow: 0 0 45px -14px var(--stage-glow);
}

/* Al pasar el ratón la luz sube, y debajo entra la sombra que da la elevación. */
.stage-card--photo:hover,
.stage-card--photo:focus-within,
.stage-age--photo:hover,
.stage-age--photo:focus-within {
	box-shadow:
		0 0 55px -8px var(--stage-glow),
		0 18px 30px -20px rgb(0 0 0 / 35%);
}

.stage-card--photo {
	align-self: start;
	border: 0;
}

.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);
}

/* Salvo si pidió salir sin cabecera ni pie: ahí no queda nada del theme, y ese
   aire es lo último que quedaba. */
.stage-bare .stage-custom {
	padding-block: 0;
}

.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 ---------------------------------------------------- */

/*
 * El vídeo, de la forma que sea.
 *
 * La proporción la trae el propio vídeo en --stage-video-ratio, que pone el PHP
 * ficha a ficha; 16/9 es solo el suelo por si no llega ninguna. Y no manda el
 * ancho sino el alto: un vertical a todo el ancho de su columna mide dos mil
 * píxeles y deja el botón de conversión tres pantallas más abajo, que en una
 * landing es tirar el tráfico. Se le pone techo de alto y el ancho sale de ahí,
 * así que la caja siempre cabe en pantalla.
 *
 * El truco del calc(): --stage-video-ratio vale "9 / 16", así que
 * calc(68vh * 9 / 16) es una multiplicación válida y da el ancho de ese alto.
 */
.stage-video {
	--stage-video-ratio: 16 / 9;
	--stage-video-max-block: 68vh;
	inline-size: min(100%, calc(var(--stage-video-max-block) * var(--stage-video-ratio)));
	margin-block: var(--stage-space-md);
	margin-inline: auto;
	aspect-ratio: var(--stage-video-ratio);
	border-radius: var(--radius);
	overflow: hidden;
}

.stage-video iframe,
.stage-video video,
.stage-video embed,
.stage-video object {
	display: block;
	width: 100%;
	height: 100%;
	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;
}

/* Es el pie de la landing, así que va con el fondo de la landing y no con el
   primario: si no, quedaba una franja de otro color al final de la página. */
.stage-bare-footer {
	background: var(--color-landing);
	color: var(--color-landing-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.
 */
/*
 * Una sola columna de lectura para toda la ficha.
 *
 * Antes cada bloque tenía la suya: el gancho a 65ch, la ficha técnica a 900px,
 * el texto a 65ch otra vez, el formulario a 560. Al bajar, el borde del
 * contenido saltaba a izquierda y derecha en cada sección y la página se leía
 * como cuatro piezas pegadas en vez de como una. Con una medida común hay un
 * eje: lo que cambia entre secciones es el fondo y el tamaño de la letra, no
 * dónde empieza el texto.
 */
.stage-vsl {
	--stage-vsl-measure: min(100%, 780px);

	/*
	 * Una sola superficie de arriba abajo.
	 *
	 * Antes la ficha cruzaba tres mundos al bajar: la franja oscura del vídeo, una
	 * franja color crema para el formulario y el blanco de las preguntas. Tres
	 * fondos distintos en una página que dura tres pantallas hacen que parezca que
	 * has cambiado de web dos veces.
	 *
	 * Ahora todo va sobre el color de la escuela, y la única cosa blanca de la
	 * página es la tarjeta del formulario — que es exactamente donde tiene que
	 * irse el ojo.
	 *
	 * Ese color es suyo, no el primario. El primario manda en la cabecera, el pie
	 * y los enlaces; una landing es otra cosa —una pantalla completa a la que se
	 * llega desde un anuncio— y se elige aparte en Ajustes del Theme. Sin elegir,
	 * se cae al primario y no cambia nada.
	 */
	background: var(--color-landing);
	color: var(--color-landing-contrast);
}

/*
 * Y un ritmo, en vez de tres centímetros entre todo. Los bloques grandes
 * respiran más que lo que va dentro de cada uno: eso es lo que agrupa el
 * contenido sin dibujar ni una línea.
 */
.stage-vsl__stage {
	/*
	 * Arriba, poco. El logo mide 40px y llevaba 64 por encima y 48 por debajo:
	 * más aire que logo por los dos lados, y en una landing ese hueco no es
	 * gratis — sale del alto que le queda al vídeo. Abajo se conserva, que ahí
	 * es donde separa la landing de lo que viene después.
	 */
	padding-block: clamp(var(--stage-space-md), 3vw, 2.5rem) clamp(var(--stage-space-lg), 7vw, 5.5rem);
}

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

/*
 * El «atrás», disimulado a la izquierda del logo.
 *
 * Absoluto y no en la fila: así el logo se queda centrado en la página, y no
 * centrado en el hueco que le deja el enlace, que es lo que pasaría con un
 * flex. Y quien no lo ve —el tráfico de anuncios— no nota ni que falta.
 *
 * El color se hereda a la fuerza: los enlaces del theme van en el color
 * primario, y aquí el fondo es el de la landing, que es otro. Un enlace en
 * color de marca sobre el fondo de la landing puede quedar ilegible.
 */
.stage-vsl__back {
	position: absolute;
	inset-inline-start: 0;
	top: 50%;
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	max-width: 32%;
	transform: translateY(-50%);
	color: inherit;
	font-size: 0.875rem;
	text-decoration: none;
	opacity: 0.55;
	transition: opacity 0.2s ease;
}

.stage-vsl__back:hover,
.stage-vsl__back:focus-visible {
	opacity: 1;
}

/* Un nombre largo se corta antes que empujar al logo fuera del centro. */
.stage-vsl__back-label {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.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;
}

/*
 * El hero es una sola columna: la firma arriba y el vídeo debajo, mandando.
 *
 * Antes eran dos columnas —la foto de quien imparte en una, el vídeo en la
 * otra— y eso le daba a la página dos protagonistas: una foto de 260px de lado
 * compite de tú a tú con lo único que aquí convence a alguien. En móvil ya
 * estaba resuelto desde hace tiempo reduciendo la foto a un avatar en línea con
 * el nombre; esto es subir esa misma solución al escritorio, que se había
 * quedado con la maqueta vieja.
 *
 * Con el cambio se van todos los repartos de columnas que existían solo para
 * cuadrar la pareja foto+vídeo —incluido el centrado especial del vertical, que
 * costó dos arreglos—: con una sola columna centrada no queda nada que cuadrar.
 */
.stage-vsl__hero {
	display: grid;
	gap: clamp(var(--stage-space-sm), 2.5vw, var(--stage-space-md));
}

/*
 * La firma: avatar y nombre en una línea, como la cabecera de un perfil. Ocupa
 * el alto de una línea en vez de una columna entera, así que sigue poniendo
 * cara a la clase sin disputarle el sitio al vídeo.
 */
.stage-vsl__person {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--stage-space-xs);
}

.stage-vsl__photo {
	display: block;
	flex: 0 0 auto;
	width: 48px;
	margin: 0;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 50%;
	/*
	 * Un aro finísimo del color del texto en vez del halo blanco que había.
	 * El halo era un resplandor alrededor de la foto —muy 2015— y encima solo
	 * funcionaba sobre fondo oscuro. El aro sale de currentColor, así que se
	 * dibuja sobre cualquier fondo y despega la imagen sin hacer ruido.
	 */
	box-shadow: 0 0 0 1px color-mix(in srgb, currentColor 18%, transparent);
}

/*
 * Sin vídeo, la foto recupera su tamaño y el nombre vuelve a dos líneas: es lo
 * único que queda entre el titular y el botón, y un avatar de 48px ahí solo
 * deja la pantalla vacía.
 */
.stage-vsl__hero--no-video .stage-vsl__person {
	display: block;
	text-align: center;
}

.stage-vsl__hero--no-video .stage-vsl__photo {
	width: 100%;
	max-width: 260px;
	margin: 0 auto var(--stage-space-sm);
}

.stage-vsl__hero--no-video .stage-vsl__role span {
	display: block;
}

.stage-vsl__hero--no-video .stage-vsl__role span::before {
	content: none;
}

.stage-vsl__name {
	max-width: 24ch;
	/*
	 * Poco margen abajo: lo que viene debajo es la firma de quien la imparte, y
	 * se lee como parte del titular. El aire de verdad lo pone el hueco de la
	 * rejilla, entre la firma y el vídeo.
	 */
	margin: 0 auto var(--stage-space-sm);
	font-size: clamp(2rem, 4.4vw, 3.25rem);
	line-height: 1.04;
	letter-spacing: -0.02em;
	text-align: center;
}

/* Subordinada al titular: es quien imparte, no el nombre de la clase. */
.stage-vsl__role {
	margin: 0;
	font-size: 0.9375rem;
	opacity: 0.75;
}

/*
 * El vídeo sí lleva resplandor, pero del color de la escuela y no blanco.
 *
 * El halo blanco de antes era luz de ninguna parte: el mismo resplandor daba
 * igual la marca que fuera. Tiñéndolo con el acento, el vídeo se despega del
 * fondo igual y de paso el color viene de la escuela — cambia con ella cuando
 * cambia la paleta, como todo lo demás.
 *
 * Va con el aro fino debajo, que es lo que le dibuja el canto.
 */
.stage-vsl__media iframe,
.stage-vsl__media .stage-video {
	border-radius: calc(var(--radius) * 2);
	box-shadow:
		0 0 0 1px color-mix(in srgb, currentColor 18%, transparent),
		0 0 70px -12px var(--stage-glow);
}

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

	/*
	 * El alto del vídeo se negocia con el botón, pero el botón ya no gana
	 * siempre.
	 *
	 * La regla era «que el botón entre en pantalla pase lo que pase», y el techo
	 * se calculaba al revés, de lo que ocupa el resto: 238px por arriba —marca,
	 * titular y firma— y por abajo las caras y el botón, que van juntos. Con eso
	 * el botón entraba en cualquier ventana.
	 *
	 * El precio salió caro donde no se había mirado. En un portátil con las
	 * pestañas, los marcadores y la barra de WordPress quedan unos 780px de alto
	 * útiles, y ahí el vídeo se quedaba en 651px de ancho: el 43% de la pantalla,
	 * cuando la referencia que se pidió ronda el 60%. Medido en la web real y no
	 * supuesto — a 1440x900 salía a 860 y parecía que no pasaba nada.
	 *
	 * Así que el suelo de 52vh manda por encima de esa cuenta. En una ventana
	 * baja el vídeo conserva su tamaño y lo que se sale es el botón, unos 60px:
	 * el vídeo acaba a la vista, y un vídeo que termina justo donde termina la
	 * pantalla ya invita a bajar. En una pantalla normal no cambia nada, porque
	 * ahí quien manda es el tope.
	 *
	 * El 58vh es ese tope, para que en una pantalla muy alta el vídeo no se
	 * estire más de la cuenta.
	 *
	 * Y esto se le aplica a las tres formas. Antes solo al vertical, porque al
	 * horizontal lo frenaba su columna; ya no hay columna, y sin techo un 16:9
	 * crecería hasta el ancho de la página.
	 */
	--stage-video-max-block: clamp(52vh, calc(100vh - 22rem), 58vh);

	/*
	 * Y el ancho sale del techo de alto por la proporción que trae el propio
	 * vídeo, con un tope de 56rem. Una sola fórmula para las tres formas: al
	 * vertical lo deja estrecho, que es como es, y al horizontal le pone un
	 * límite — a partir de cierto tamaño un vídeo más grande no convence más,
	 * solo aleja el botón.
	 *
	 * Los 56rem no son un número redondo elegido a ojo: son los 896px que mide
	 * el vídeo de luxoradigital.com en una pantalla de 1440, que es la
	 * referencia que se pidió. Medido en su web, no calculado sobre una captura.
	 */
	inline-size: min(100%, 56rem, calc(var(--stage-video-max-block) * var(--stage-video-ratio)));
}

/*
 * El botón que baja al formulario: ancho, porque en esta pantalla es el único
 * camino y no compite con nada.
 *
 * Ancho, pero no más ancho que el vídeo. Iba a los 1200px del contenedor y era
 * el elemento más grande de la página — por delante de lo único que aquí
 * convence a alguien. Al ancho del contenido se lee como el pie del vídeo y no
 * como una franja aparte, y de rojo y con esta altura no se le escapa a nadie.
 * En móvil la medida ya es el 100%, así que allí no cambia 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: var(--stage-vsl-measure);
	margin-top: clamp(var(--stage-space-sm), 2.5vw, 2rem);
	margin-inline: auto;
	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;
}

/*
 * El gancho y el texto medían y pesaban igual, así que no se sabía cuál era
 * cuál. El gancho es la promesa: va más grande y centrado, en pocas líneas. El
 * texto es la letra pequeña honesta: tamaño de lectura, alineado a la
 * izquierda y un punto más apagado. Misma columna los dos.
 */
.stage-vsl__hook,
.stage-vsl__content {
	max-width: var(--stage-vsl-measure);
	margin-inline: auto;
	margin-top: clamp(var(--stage-space-md), 4vw, 3rem);
}

.stage-vsl__hook {
	font-size: clamp(1.125rem, 1.7vw, 1.375rem);
	line-height: 1.45;
	text-align: center;
	text-wrap: balance;
}

.stage-vsl__content {
	font-size: 1.0625rem;
	opacity: 0.78;
}

/* Prueba social del hero -------------------------------------------------- */

/*
 * Las caras y la frase, pegadas al botón.
 *
 * Los círculos se solapan, que es lo que los lee como un grupo y no como cuatro
 * iconos en fila. El solape necesita un aro del color del fondo para que se
 * recorten entre ellos, y el fondo aquí no lo sabe el CSS: en una landing es el
 * color de la escuela y en una página normal es el blanco del theme. Por eso el
 * aro es una variable con el blanco de reserva, que la landing sobreescribe con
 * el suyo.
 */
.stage-proof {
	--stage-proof-ring: var(--stage-surface);
	--stage-proof-brand: color-mix(in srgb, var(--color-accent) 75%, currentColor);
	--stage-proof-size: 2.75rem;

	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--stage-space-sm);
	max-width: var(--stage-vsl-measure, 780px);
	margin: clamp(var(--stage-space-md), 2.5vw, 2rem) auto 0;
}

/*
 * ...y el botón se pega a ellas. Las caras y el botón son una sola cosa —la
 * prueba y el paso que se pide— así que entre los dos va menos aire que el que
 * los separa del vídeo. Si no, la fila de caras se queda flotando en medio.
 */
.stage-proof + .stage-vsl__jump {
	margin-top: var(--stage-space-sm);
}

.stage-vsl .stage-proof {
	--stage-proof-ring: var(--color-landing);
}

.stage-proof__faces {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
}

.stage-proof__face {
	width: var(--stage-proof-size);
	height: var(--stage-proof-size);
	border-radius: 50%;
	/* El aro que los recorta, y una sombra finísima del color del texto para que
	   el último no se quede sin canto sobre un fondo del mismo tono que la foto. */
	box-shadow:
		0 0 0 2px var(--stage-proof-ring),
		0 0 0 3px color-mix(in srgb, currentColor 12%, transparent);
	overflow: hidden;
}

/*
 * Se solapan un quinto y no un tercio. Con un tercio se comían la cara entre
 * ellos y la fila era un amasijo; el solape solo tiene que decir "esto es un
 * grupo", no esconder a nadie.
 */
.stage-proof__face + .stage-proof__face {
	margin-inline-start: calc(var(--stage-proof-size) / -5);
}

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

/*
 * Sin foto, la inicial.
 *
 * El acento a secas no vale: el fondo de la landing arranca del color primario y
 * una escuela puede elegir un beige, así que el círculo se arriesga a
 * desaparecer sobre su propio fondo. Anclado al color del texto —el mismo truco
 * que el bloque de preguntas— se reconoce que el color es suyo y se ve siempre,
 * sea cual sea la paleta. Cada uno lleva un punto más de peso que el anterior
 * para que la fila tenga relieve.
 */
.stage-proof__initial {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background: color-mix(in srgb, var(--stage-proof-brand) 22%, transparent);
	color: inherit;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1;
}

.stage-proof__face:nth-child(2) .stage-proof__initial {
	background: color-mix(in srgb, var(--stage-proof-brand) 28%, transparent);
}

.stage-proof__face:nth-child(3) .stage-proof__initial {
	background: color-mix(in srgb, var(--stage-proof-brand) 34%, transparent);
}

.stage-proof__face:nth-child(4) .stage-proof__initial {
	background: color-mix(in srgb, var(--stage-proof-brand) 40%, transparent);
}

.stage-proof__face:nth-child(5) .stage-proof__initial {
	background: color-mix(in srgb, var(--stage-proof-brand) 46%, transparent);
}

/*
 * La frase va apagada a propósito. Compite con el botón que tiene justo encima,
 * y de esa pelea tiene que ganar el botón: esto es el respaldo de la promesa,
 * no la promesa.
 */
.stage-proof__text {
	max-width: 40ch;
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.4;
	opacity: 0.75;
	text-wrap: pretty;
}

/* En móvil las caras se van arriba y la frase debajo, las dos centradas. */
@media (max-width: 520px) {
	.stage-proof {
		--stage-proof-size: 2.5rem;

		flex-direction: column;
		gap: var(--stage-space-xs);
	}

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

/* 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.
 */
/*
 * Sin cajas.
 *
 * Antes eran cuatro fichas con borde y fondo propio, y el resultado era una
 * tabla pegada en medio de la landing: la única página del theme que quiere ser
 * una sola superficie de arriba abajo se partía justo aquí en cuatro trozos más.
 * El dato no necesitaba una caja para leerse; necesitaba jerarquía. La etiqueta
 * va pequeña y apagada, el dato grande y firme, y con eso basta para saber qué
 * es cada cosa.
 *
 * Lo único que se dibuja es una línea finísima arriba, del ancho de la medida.
 * Hace de cambio de registro —se acaba la promesa, empiezan los datos— y de
 * paso ancla la ficha al mismo eje que todo lo demás. Del color del texto, así
 * que funciona igual sobre el fondo de marca de la landing que sobre el blanco
 * de una página normal.
 */
.stage-specs {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	column-gap: clamp(var(--stage-space-sm), 2.5vw, 2rem);
	row-gap: clamp(var(--stage-space-md), 3vw, 2.25rem);
	max-width: var(--stage-vsl-measure, 780px);
	margin: clamp(var(--stage-space-md), 4vw, 3rem) auto 0;
	padding: clamp(var(--stage-space-md), 3vw, 2.25rem) 0 0;
	border-top: 1px solid color-mix(in srgb, currentColor 14%, transparent);
	text-align: center;
}

/*
 * A partes iguales y no en tres columnas declaradas: así una ficha a medio
 * rellenar —dos datos en vez de tres— reparte el ancho entre los que hay en
 * lugar de dejar un hueco donde debería ir el que falta.
 */
.stage-specs__row {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: 0.35rem;
	min-width: 9rem;
	padding: 0;
}

/* "Qué llevar" suele ser lo más largo y a veces son varias líneas. */
.stage-specs__row--wide {
	flex-basis: 100%;
	min-width: 0;
}

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

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

/*
 * La fila ancha es una frase, no un dato suelto: se lee mejor con el peso del
 * texto normal y a una medida corta. En negrita y a todo lo ancho volvía a
 * parecer una celda.
 */
.stage-specs__row--wide .stage-specs__value {
	max-width: 56ch;
	margin-inline: auto;
	font-weight: 400;
	opacity: 0.85;
	text-wrap: pretty;
}

/*
 * En móvil, uno debajo de otro. Repartidos a partes iguales entrarían dos por
 * línea y el tercero se quedaría solo y descentrado, que es justo el escalón
 * que se quería quitar.
 */
@media (max-width: 520px) {
	.stage-specs {
		row-gap: var(--stage-space-md);
	}

	.stage-specs__row {
		flex-basis: 100%;
	}
}

/* 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.
 */
/*
 * Medio tono de diferencia, no un mundo aparte: el primario empujado un poco
 * hacia su color de contraste. Sale más claro sobre una marca oscura y más
 * oscuro sobre una clara, así que marca la zona de acción en cualquier paleta
 * sin fijar ni un color.
 */
.stage-vsl__convert {
	/*
	 * Si la escuela le ha puesto color, manda el suyo. Si no, la reserva del
	 * var() hace la cuenta de medio tono en el navegador, que es donde tiene que
	 * hacerse: al compilar la marca no sabemos con qué va a mezclarse.
	 */
	background: var(--color-landing-form, color-mix(in srgb, var(--color-landing) 94%, var(--color-landing-contrast)));
	color: var(--color-landing-form-contrast, var(--color-landing-contrast));
	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;
	/* Sin esto el titular parte por donde cae y deja una línea con una palabra. */
	text-wrap: balance;
	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);
	/*
	 * Su propio color de texto, y no es un detalle: la franja ya no es clara, así
	 * que sin esto lo de dentro heredaría el blanco del fondo oscuro y la tarjeta
	 * saldría en blanco sobre blanco.
	 */
	color: var(--stage-text);
	border-radius: calc(var(--radius) * 2);
	/*
	 * Sobre fondo oscuro una sombra negra no se ve. Lo que despega la tarjeta es
	 * un halo claro a su alrededor, que además la hace parecer iluminada — que es
	 * justo lo que interesa de lo único blanco de la página.
	 */
	box-shadow: 0 0 80px -20px color-mix(in srgb, var(--color-primary-contrast) 40%, transparent);
	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;
}

/*
 * Nombre y rol en la misma línea, separados por un punto. En dos líneas la
 * firma sube de alto y le come sitio al vídeo justo por encima; y el punto es
 * el separador que ya se leía bien en móvil desde que la firma nació allí.
 */
.stage-vsl__role span {
	font-size: 0.875em;
	opacity: 0.75;
}

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

/*
 * Móvil: manda el vídeo.
 *
 * Aquí ya no hay que recolocar nada —la firma en una línea y el vídeo debajo es
 * lo mismo que se ve en el escritorio desde que el hero pasó a una columna—, así
 * que solo queda lo que de verdad cambia en una pantalla estrecha: el vídeo
 * horizontal sale a sangre para ganar los ~48px de margen lateral, que en una
 * pantalla de 390 son un 12% de ancho, y el techo de alto baja otro poco.
 */
@media (max-width: 782px) {
	.stage-vsl__stage {
		padding-block: var(--stage-space-md);
	}

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

	/* El titular ocupa su línea, que para eso es de lo que va la página. */
	.stage-vsl__name {
		font-size: clamp(1.6rem, 7vw, 2.125rem);
	}

	/*
	 * Al lado de un logo centrado en 390px no cabe el nombre del sitio del que
	 * se viene, así que se queda la flecha sola. El rótulo no se borra: se
	 * esconde a la vista y sigue ahí para quien navega con lector de pantalla,
	 * que si no oiría un enlace que solo dice "flecha".
	 */
	.stage-vsl__back {
		/*
		 * La flecha sola mide 18px y eso no es un sitio donde acertar con el
		 * pulgar. El acolchado agranda la zona sensible hasta unos 40px y el
		 * desplazamiento negativo lo compensa, para que la flecha siga viéndose
		 * pegada al mismo margen que el resto del contenido.
		 */
		inset-inline-start: calc(var(--stage-space-xs) * -1);
		max-width: none;
		padding: var(--stage-space-xs);
		font-size: 1.125rem;
	}

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

	/*
	 * A sangre, pero solo el horizontal: se compensan los márgenes laterales del
	 * contenedor. Un vertical es más estrecho que la pantalla, así que a sangre
	 * no va a ningún sitio — se queda centrado y conserva sus esquinas y su luz,
	 * que es lo que lo separa del fondo.
	 */
	.stage-vsl__media:has(.stage-video--horizontal) {
		margin-inline: calc(var(--stage-space-md) * -1);
	}

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

	/*
	 * Y el techo baja otro poco. En un móvil la pantalla es alta y estrecha: un
	 * vertical a 58vh más el titular y la firma ya empujan el botón fuera de la
	 * vista, y el botón es de lo que va la página.
	 */
	.stage-vsl__media .stage-video {
		--stage-video-max-block: 52vh;
	}

	.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 lo maqueta el plugin. Aquí solo se le pone marco: el aire y la
 * línea que lo separan de lo anterior, un titular encima y una caja que le
 * corte el desbordamiento.
 */
.stage-reviews {
	margin-top: clamp(var(--stage-space-md), 5vw, 3.5rem);
	padding-top: clamp(var(--stage-space-md), 4vw, 3rem);
	border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent);
}

/*
 * Sin titular, el widget aparece detrás de una raya y parece pegado ahí con
 * cinta. Con una línea encima se lee como una sección más de la página.
 */
.stage-reviews__title {
	font-size: 1.25rem;
	margin-bottom: var(--stage-space-md);
	text-align: center;
}

/*
 * Y la caja que lo contiene.
 *
 * Estos carruseles se montan más anchos que su contenedor —cuentan con salir a
 * sangre en la página de quien los instala— y dejaban las tarjetas cortadas por
 * los dos lados, con media reseña asomando por el margen. Recortarlo aquí las
 * deja empezando y acabando donde acaba el resto del contenido.
 *
 * overflow y no clip: clip cortaría también las flechas del carrusel, que
 * algunos widgets sacan por fuera de su caja.
 */
.stage-reviews__widget {
	overflow: hidden;
}


/* 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;
}