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

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

.stage-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--stage-space-xs);
	padding: 0.7em 1.4em;
	border: 0;
	border-radius: var(--radius);
	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;
}

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

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

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

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

/* 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;
	max-height: 52px;
	width: auto;
}

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

.stage-nav-toggle {
	display: none;
	padding: 0.6rem;
	background: none;
	border: 1px solid var(--stage-border);
	border-radius: var(--radius);
	color: inherit;
	cursor: pointer;
}

.stage-nav-toggle__bars,
.stage-nav-toggle__bars::before,
.stage-nav-toggle__bars::after {
	display: block;
	width: 22px;
	height: 2px;
	background: currentColor;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.stage-nav-toggle__bars::before,
.stage-nav-toggle__bars::after {
	content: "";
	transform: translateY(-7px);
}

.stage-nav-toggle__bars::after {
	transform: translateY(5px);
}

/* 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(-1px) rotate(45deg);
}

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

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

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

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

.stage-card {
	border: 1px solid var(--stage-border);
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--stage-surface);
}

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

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

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

/*
 * Un solo camino: vídeo → gancho → CTA → formulario. Se esconde el menú
 * principal porque en esta pantalla cualquier enlace es una salida, y el
 * objetivo es que el visitante rellene el formulario. El logo sigue enlazando
 * a la home, que es la única salida que no se puede quitar sin romper la
 * accesibilidad.
 */
.stage-is-vsl .stage-nav,
.stage-is-vsl .stage-nav-toggle,
.stage-is-vsl .stage-footer__nav {
	display: none;
}

.stage-vsl__inner {
	max-width: 780px;
	text-align: center;
}

.stage-vsl__title {
	font-size: clamp(2rem, 5vw, 3rem);
}

.stage-vsl__photo {
	border-radius: var(--radius);
	max-width: 100%;
	height: auto;
}

.stage-vsl__hook {
	font-size: 1.125rem;
	margin-block: var(--stage-space-md);
}

.stage-vsl__content {
	text-align: left;
}

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

.stage-bare {
	margin: 0;
}

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