/*
 * REACH English Studio — componentes.
 * Estilo: color a sangre, titulares pesados en mayúsculas, píldoras y superficies gris neutro.
 * Sin navy, sin crema y sin contornos gruesos: los bordes son una línea fina de tinta.
 * Los colores y fuentes vienen de theme.json; aquí solo se les da un alias corto.
 */

:root {
	--tinta: var(--wp--preset--color--tinta);
	--naranja: var(--wp--preset--color--naranja);
	--amarillo: var(--wp--preset--color--amarillo);
	--azul: var(--wp--preset--color--azul);
	--rosa: var(--wp--preset--color--rosa);
	--menta: var(--wp--preset--color--menta);
	--lila: var(--wp--preset--color--lila);
	--durazno: var(--wp--preset--color--durazno);
	--cielo: var(--wp--preset--color--cielo);
	--crema: var(--wp--preset--color--crema);
	--gris: var(--wp--preset--color--gris);
	--blanco: #fff;
	--superficie: #f3f4f6;
	--tinta-suave: #5f6168;
	--linea: rgba(21, 22, 26, 0.12);

	--titulares: var(--wp--preset--font-family--titulares);
	--texto: var(--wp--preset--font-family--texto);

	--r-etiqueta: 12px;
	--r-tarjeta: 24px;
	--r-bloque: 40px;
	--borde: 1px solid var(--linea);
	--borde-fuerte: 1px solid var(--linea);

	--wrap: 1200px;
	--pad: clamp(1.25rem, 4vw, 3rem);
	--header-h: 88px;

	/* Blanco sobre naranja solo cumple AA como texto grande y en negrita: mínimo 19px bold. */
	--texto-sobre-naranja: 1.1875rem;
}

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

html {
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
	margin: 0;
	background: var(--blanco);
	-webkit-font-smoothing: antialiased;
}

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

:focus-visible {
	outline: 3px solid var(--azul);
	outline-offset: 3px;
}

[tabindex="-1"]:focus {
	outline: none;
}

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

.reach-main {
	overflow-x: clip;
}

.reach-page {
	padding: 3rem var(--pad);
}

/* ---------- Secciones y cabeceras ---------- */

.reach-section {
	padding: clamp(4.75rem, 11vw, 8rem) var(--pad);
	text-align: center;
}

.reach-section > * {
	max-width: var(--wrap);
	margin-inline: auto;
}

.reach-section h2,
.reach-cierre h2 {
	margin-block: 0.75rem 0;
	font-weight: 800;
	letter-spacing: -0.025em;
	text-transform: uppercase;
	text-wrap: balance;
}

.eyebrow {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	width: fit-content;
	margin-block: 0;
	padding: 0.375rem 0.875rem;
	background: var(--superficie);
	border-radius: 999px;
	color: var(--tinta);
	font-family: var(--titulares);
	font-size: 0.8125rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	line-height: 1.25;
	text-transform: uppercase;
}

.eyebrow::before {
	content: "";
	flex: none;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: var(--azul);
}

.hl {
	color: var(--naranja);
}

.accent {
	display: block;
	width: fit-content;
	margin-block: 0;
	padding: 0.25rem 0.75rem;
	background: var(--amarillo);
	border-radius: 999px;
	color: var(--tinta);
	font-family: var(--titulares);
	font-style: italic;
	font-weight: 700;
	line-height: 1.4;
}

.reach-support {
	max-width: 40rem;
	margin-block: 1rem 0;
	font-size: 1.125rem;
}

.lead {
	margin-block: 1.25rem 0;
	font-family: var(--titulares);
	font-size: clamp(1.25rem, 1rem + 1vw, 1.5rem);
	font-weight: 600;
	line-height: 1.3;
	text-wrap: balance;
}

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

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 52px;
	padding: 0.5rem 1.5rem;
	border: 0;
	border-radius: 999px;
	font-family: var(--titulares);
	font-size: var(--texto-sobre-naranja);
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: transform 0.15s ease, background-color 0.15s ease;
}

.btn:active {
	transform: scale(0.97);
}

.btn--primary {
	background: var(--naranja);
	color: var(--blanco);
}

.btn--primary:hover {
	background: #e63700;
}

.btn--ghost {
	background: var(--superficie);
	color: var(--tinta);
}

.btn--white {
	background: var(--blanco);
	color: var(--tinta);
}

.btn--ghost:hover,
.btn--white:hover {
	background: var(--amarillo);
}

.btn--sm {
	min-height: 48px;
	padding-inline: 1.125rem;
}

.btn--lg {
	min-height: 60px;
	padding-inline: 2rem;
}

.reach-icon {
	flex: none;
	width: 1.25em;
	height: 1.25em;
}

.reach-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin-top: 1.75rem;
}

.reach-actions .btn {
	flex: 1 1 15rem;
}

.reach-actions--center {
	justify-content: center;
}

@media (min-width: 640px) {
	.reach-actions .btn {
		flex: 0 0 auto;
	}
}

/* ---------- Mascotas y stickers ---------- */

.reach-mascot,
.reach-sticker {
	display: block;
	overflow: visible;
}

.reach-mascot .eye-wink {
	display: none;
}

.reach-six {
	display: inline-grid;
	grid-template-columns: repeat(3, 8px);
	gap: 3px;
}

.reach-six__seat {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--tinta);
}

/* ---------- Header ---------- */

/*
 * Barra a todo el ancho con efecto de vidrio líquido: translúcida, desenfoca y aviva lo que
 * pasa por detrás, con un brillo en el canto superior y una línea de luz en el inferior.
 */
header.wp-block-template-part {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 50;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.5));
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.9),
		inset 0 -1px 0 rgba(255, 255, 255, 0.45),
		0 1px 0 rgba(21, 22, 26, 0.06),
		0 14px 34px -22px rgba(21, 22, 26, 0.45);
	-webkit-backdrop-filter: blur(22px) saturate(1.9) brightness(1.06);
	backdrop-filter: blur(22px) saturate(1.9) brightness(1.06);
}

/*
 * Mejora para Chromium: reach.js inserta el filtro #reach-vidrio y marca <html>. El filtro curva
 * el fondo en los cantos de la barra; con menos desenfoque, para que la curva se note.
 */
.has-refraccion header.wp-block-template-part {
	backdrop-filter: url(#reach-vidrio) blur(7px) saturate(1.9) brightness(1.06);
}

/* Quien pide menos transparencias en su sistema recibe una barra casi opaca y sin efectos. */
@media (prefers-reduced-transparency: reduce) {
	header.wp-block-template-part,
	.has-refraccion header.wp-block-template-part {
		background: rgba(255, 255, 255, 0.96);
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
}

/* Sin desenfoque de fondo, la barra vuelve a ser casi opaca para que el menú se lea. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	header.wp-block-template-part {
		background: rgba(255, 255, 255, 0.94);
	}
}

.reach-header {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	max-width: calc(var(--wrap) + var(--pad) * 2);
	min-height: var(--header-h);
	margin-inline: auto;
	padding: 0.75rem var(--pad);
}

.reach-logo {
	display: inline-flex;
	align-items: center;
	margin: 0;
	line-height: 0;
	text-decoration: none;
}

.reach-logo__img {
	display: block;
	width: auto;
	height: clamp(52px, 9vw, 64px);
}

.reach-logo--footer {
	display: inline-flex;
	padding: 0.75rem 1rem;
	background: var(--blanco);
	border-radius: var(--r-tarjeta);
}

.reach-logo--footer .reach-logo__img {
	height: 96px;
}

.reach-header__actions {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.reach-nav {
	position: absolute;
	top: 100%;
	right: 0;
	left: 0;
	display: none;
	background: rgba(255, 255, 255, 0.94);
	box-shadow: 0 18px 34px -22px rgba(21, 22, 26, 0.45);
}

.reach-nav.is-open {
	display: block;
}

.reach-nav ul {
	margin: 0;
	padding: 0.5rem 0;
	list-style: none;
}

.reach-nav a {
	display: flex;
	align-items: center;
	min-height: 48px;
	padding: 0 var(--pad);
	color: var(--tinta);
	font-family: var(--titulares);
	font-size: 1.0625rem;
	font-weight: 600;
	text-decoration: none;
}

.reach-nav a:hover {
	text-decoration: underline;
	text-decoration-color: var(--naranja);
	text-decoration-thickness: 3px;
	text-underline-offset: 6px;
}

.reach-burger {
	display: grid;
	place-content: center;
	gap: 5px;
	width: 48px;
	height: 48px;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
}

.reach-burger span {
	display: block;
	width: 22px;
	height: 2.5px;
	border-radius: 2px;
	background: var(--tinta);
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.reach-burger[aria-expanded="true"] span:nth-child(1) {
	transform: translateY(7.5px) rotate(45deg);
}

.reach-burger[aria-expanded="true"] span:nth-child(2) {
	opacity: 0;
}

.reach-burger[aria-expanded="true"] span:nth-child(3) {
	transform: translateY(-7.5px) rotate(-45deg);
}

/* Menú hamburguesa: ocultar CTA del header (queda en el hero). */
@media (max-width: 1079px) {
	.reach-header__actions .btn {
		display: none;
	}
}

@media (min-width: 1080px) {
	.reach-burger {
		display: none;
	}

	.reach-nav {
		position: static;
		display: block;
		background: none;
		box-shadow: none;
	}

	.reach-nav ul {
		display: flex;
		gap: 1.5rem;
		padding: 0;
	}

	.reach-nav a {
		padding: 0;
		font-size: 1rem;
	}
}

/* ---------- Hero ---------- */

/*
 * Fondo naranja a sangre con cuadrícula, titular gigante en blanco, tarjetas de vidrio,
 * garabatos amarillos y sello giratorio.
 */
/* Con más peso que el margen 0 que WordPress pone al primer bloque: el hero sube bajo la barra de vidrio. */
main.reach-main > .reach-hero {
	margin-top: calc(-1 * var(--header-h));
}

.reach-hero {
	position: relative;
	padding: calc(var(--header-h) + clamp(3rem, 7vw, 5.5rem)) var(--pad) clamp(9.5rem, 15vw, 12rem);
	overflow: hidden;
	background:
		radial-gradient(60% 55% at 50% 38%, rgba(255, 255, 255, 0.16), transparent 70%),
		linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px) 0 0 / 72px 72px,
		linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px) 0 0 / 72px 72px,
		var(--naranja);
	color: var(--blanco);
	text-align: center;
}

.reach-hero :focus-visible {
	outline-color: var(--blanco);
}

.reach-hero__inner {
	position: relative;
	max-width: var(--wrap);
	margin-inline: auto;
}

.reach-hero__nope {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.375rem 1.125rem;
	margin: 0 0 clamp(1.25rem, 3vw, 2rem);
	font-family: var(--titulares);
	font-size: var(--texto-sobre-naranja);
	font-weight: 700;
	line-height: 1.3;
}

.reach-hero__nope span {
	position: relative;
	isolation: isolate;
	white-space: nowrap;
}

.reach-hero__nope span::after {
	content: "";
	position: absolute;
	z-index: -1;
	top: 56%;
	right: -4px;
	left: -4px;
	height: 3px;
	border-radius: 2px;
	background: var(--amarillo);
	transform-origin: left center;
	animation: reach-nope-strike 0.45s ease-out 0.7s backwards;
}

.reach-hero__nope span:nth-child(2)::after {
	animation-delay: 1.3s;
}

.reach-hero__nope span:nth-child(3)::after {
	animation-delay: 1.9s;
}

@keyframes reach-nope-strike {
	from {
		transform: scaleX(0);
	}
}

.reach-hero__title {
	position: relative;
	width: fit-content;
	margin-inline: auto;
}

.reach-hero h1 {
	margin: 0;
	color: var(--blanco);
	font-family: var(--titulares);
	font-size: clamp(2.5rem, 10.5vw, 9rem);
	font-weight: 800;
	letter-spacing: -0.035em;
	line-height: 0.9;
	text-transform: uppercase;
}

.reach-hero h1 span {
	display: block;
}

.reach-scribble {
	display: block;
	color: var(--amarillo);
}

.reach-hero__loop,
.reach-hero__zigzag {
	position: absolute;
	width: clamp(3.25rem, 10vw, 8.5rem);
	pointer-events: none;
}

.reach-hero__loop {
	top: -24%;
	right: -9%;
}

.reach-hero__zigzag {
	bottom: 6%;
	left: -10%;
}

/* Tarjetas de vidrio */
.reach-hero__card {
	position: absolute;
	display: grid;
	justify-items: center;
	gap: 0.5rem;
	margin: 0;
	padding: clamp(0.625rem, 1.4vw, 1.125rem) clamp(0.75rem, 1.8vw, 1.5rem);
	background: rgba(255, 255, 255, 0.24);
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: clamp(18px, 2.4vw, 30px);
	box-shadow: 0 24px 40px -24px rgba(0, 0, 0, 0.45);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	animation: reach-float 5s ease-in-out infinite;
}

.reach-hero__card img {
	display: block;
	width: clamp(2.75rem, 6.2vw, 5.25rem);
	height: clamp(2.75rem, 6.2vw, 5.25rem);
	border: 2px solid rgba(255, 255, 255, 0.85);
	border-radius: 50%;
	object-fit: cover;
}

.reach-hero__card figcaption {
	font-family: var(--titulares);
	font-size: clamp(0.8125rem, 1.3vw, 1.0625rem);
	font-weight: 800;
	line-height: 1.2;
	white-space: nowrap;
}

.reach-hero__card--1 {
	top: -8%;
	right: 1%;
	rotate: 7deg;
}

.reach-hero__card--2 {
	bottom: -24%;
	left: 3%;
	rotate: -7deg;
	animation-delay: -1.6s;
}

.reach-hero__card--3 {
	display: none;
	top: -10%;
	left: 0;
	rotate: -5deg;
	animation-delay: -3.2s;
}

.reach-hero__support {
	max-width: 34rem;
	margin: clamp(2.5rem, 6vw, 4rem) auto 0;
	font-size: clamp(1.1875rem, 1rem + 0.6vw, 1.375rem);
	font-weight: 700;
	line-height: 1.4;
}

.reach-hero__actions {
	display: flex;
	justify-content: center;
	margin-top: 1.5rem;
}

.reach-hero__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 56px;
	padding: 0.5rem 1.75rem;
	background: var(--blanco);
	border-radius: 999px;
	color: var(--tinta);
	font-family: var(--titulares);
	font-size: var(--texto-sobre-naranja);
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	transition: transform 0.15s ease, background-color 0.15s ease;
}

.reach-hero__cta:hover {
	background: var(--amarillo);
	color: var(--tinta);
}

.reach-hero__cta:active {
	transform: scale(0.97);
}

/* Sello giratorio */
.reach-hero__badge {
	position: absolute;
	right: 0;
	bottom: -6.25rem;
	width: clamp(5.5rem, 13vw, 10.5rem);
	color: var(--amarillo);
	rotate: -8deg;
}

.reach-hero__badge svg {
	display: block;
	overflow: visible;
}

.reach-hero__badge-ring {
	transform-box: fill-box;
	transform-origin: center;
	animation: reach-spin 18s linear infinite;
}

.reach-hero__badge text {
	fill: var(--tinta);
	font-family: var(--titulares);
	font-size: 15.5px;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.reach-hero__badge-mark {
	stroke: var(--azul);
}

@keyframes reach-spin {
	to {
		transform: rotate(360deg);
	}
}

/* En pantallas angostas las tarjetas tapaban el titular: bajan a una fila bajo él. */
@media (max-width: 599px) {
	.reach-hero__card--1,
	.reach-hero__card--2 {
		top: 100%;
		bottom: auto;
		margin-top: 1.25rem;
	}

	.reach-hero__card--1 {
		right: 6%;
	}

	.reach-hero__card--2 {
		left: 6%;
	}

	.reach-hero__support {
		margin-top: 8.5rem;
	}
}

@media (min-width: 900px) {
	.reach-hero__card--3 {
		display: grid;
	}

	.reach-hero__badge {
		right: 2%;
		bottom: -1rem;
	}
}

/* ---------- Test de nivel ---------- */

.reach-test {
	padding-block: 2.5rem;
	text-align: left;
}

.reach-test__block {
	position: relative;
	padding: clamp(1.5rem, 5vw, 3.5rem);
	background: var(--azul);
	border: var(--borde-fuerte);
	border-radius: var(--r-bloque);
	color: var(--blanco);
}

.reach-test :focus-visible {
	outline-color: var(--amarillo);
}

.reach-test__intro {
	max-width: 46rem;
}

.reach-test .eyebrow {
	background: var(--amarillo);
}

.reach-test .eyebrow::before {
	background: var(--tinta);
}

.reach-test h2,
.reach-test h3 {
	color: var(--blanco);
}

.reach-test h2 .hl,
.reach-cierre h2 .hl {
	display: inline-block;
	padding: 0 0.3em;
	border: var(--borde);
	border-radius: 12px;
	transform: rotate(-2deg);
}

.reach-test h2 .hl {
	background: var(--naranja);
	color: var(--blanco);
}

.reach-test.is-playing .reach-test__intro {
	display: none;
}

.reach-quiz {
	margin-top: 2rem;
}

.reach-test.is-playing .reach-quiz {
	margin-top: 0;
}

.reach-quiz [hidden] {
	display: none !important;
}

.quiz-steps {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.quiz-steps li {
	position: relative;
}

.quiz-steps li + li::before {
	content: "";
	position: absolute;
	top: 23px;
	right: 50%;
	width: 100%;
	height: 2px;
	background: var(--blanco);
}

.quiz-steps__label {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	width: min(100%, 64px);
	height: 48px;
	margin-inline: auto;
	background: var(--azul);
	border: 2px solid var(--blanco);
	border-radius: var(--r-tarjeta);
	color: var(--blanco);
	font-family: var(--titulares);
	font-weight: 700;
}

.quiz-steps .is-done .quiz-steps__label {
	background: var(--menta);
	border-color: var(--tinta);
	color: var(--tinta);
}

.quiz-steps .is-current .quiz-steps__label,
.quiz-steps--preview li:first-child .quiz-steps__label {
	background: var(--blanco);
	border-color: var(--tinta);
	color: var(--tinta);
}

.quiz-steps .is-done.is-current .quiz-steps__label {
	background: var(--menta);
}

.quiz-steps--preview {
	max-width: 36rem;
	margin-bottom: 2rem;
}

.quiz-bar {
	display: grid;
	gap: 0.5rem 1.5rem;
	align-items: center;
	margin-bottom: 1.5rem;
	padding-top: 1.25rem;
}

.quiz-token {
	position: absolute;
	top: -20px;
	left: 50%;
	z-index: 2;
	display: flex;
	padding: 5px 7px;
	background: var(--amarillo);
	border: var(--borde);
	border-radius: 999px;
	transform: translateX(-50%);
	animation: reach-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.quiz-exit,
.quiz-share,
.quiz-reveal {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 48px;
	padding: 0 0.25rem;
	background: none;
	border: 0;
	color: var(--blanco);
	font-family: var(--titulares);
	font-size: 1rem;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 4px;
	cursor: pointer;
}

.quiz-exit {
	justify-self: end;
}

.quiz-meta {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	margin-bottom: 0.75rem;
}

.quiz-guide {
	flex: none;
	width: 76px;
}

.quiz-guide[data-mood="wink"] .eye-open {
	display: none;
}

.quiz-guide[data-mood="wink"] .eye-wink {
	display: inline;
}

.quiz-guide[data-mood="smile"] .reach-mascot {
	animation: reach-hop 0.5s ease;
}

.quiz-guide[data-mood="wink"] .reach-mascot {
	animation: reach-tilt 0.5s ease;
}

.quiz-counter {
	margin: 0;
	font-family: var(--titulares);
	font-weight: 700;
}

.quiz-card {
	padding: clamp(1.25rem, 4vw, 2.5rem);
	background: var(--blanco);
	border: var(--borde-fuerte);
	border-radius: clamp(20px, 4vw, 32px);
	color: var(--tinta);
}

.quiz-card :focus-visible {
	outline-color: var(--azul);
}

.quiz-question {
	margin: 0 0 1.5rem;
	font-family: var(--titulares);
	font-size: clamp(1.5rem, 1rem + 2.5vw, 2.25rem);
	font-weight: 700;
	line-height: 1.2;
}

.quiz-options {
	display: grid;
	gap: 0.75rem;
}

.quiz-option {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	min-height: 56px;
	padding: 0.75rem 1.25rem;
	background: var(--blanco);
	border: var(--borde);
	border-radius: var(--r-tarjeta);
	color: var(--tinta);
	font-family: var(--texto);
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.3;
	text-align: left;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.quiz-option:not([aria-disabled="true"]):hover {
	background: var(--cielo);
}

.quiz-option[aria-disabled="true"] {
	cursor: default;
}

.quiz-option[aria-disabled="true"]:not(.is-correct, .is-wrong) {
	opacity: 0.55;
}

.quiz-option.is-correct {
	background: var(--menta);
}

.quiz-option.is-wrong {
	background: var(--naranja);
	color: var(--blanco);
	font-size: var(--texto-sobre-naranja);
	font-weight: 700;
}

.quiz-extra {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1rem;
	margin-bottom: 1.25rem;
}

.quiz-play {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 48px;
	padding: 0 1.25rem;
	background: var(--azul);
	border: var(--borde);
	border-radius: var(--r-tarjeta);
	color: var(--blanco);
	font-family: var(--titulares);
	font-size: 1rem;
	font-weight: 700;
	cursor: pointer;
}

.quiz-play:disabled {
	background: var(--gris);
	color: var(--tinta);
	cursor: not-allowed;
}

.quiz-reveal {
	color: var(--azul);
}

.quiz-passage {
	flex-basis: 100%;
	margin: 0;
	padding: 0.875rem 1rem;
	background: var(--superficie);
	border: var(--borde);
	border-radius: var(--r-tarjeta);
	font-size: 1.125rem;
}

.quiz-screen--passed,
.quiz-screen--result {
	position: relative;
	text-align: center;
}

.quiz-confetti {
	position: absolute;
	inset: -2rem 0 0;
	overflow: hidden;
	pointer-events: none;
}

.quiz-confetti i {
	position: absolute;
	top: -16px;
	left: var(--x);
	width: 10px;
	height: 14px;
	border-radius: 3px;
	animation: reach-confetti 1.8s var(--delay) ease-in forwards;
}

.quiz-passed__mascot,
.quiz-result__mascot {
	width: 170px;
	margin-inline: auto;
}

.quiz-passed__mascot .reach-mascot,
.quiz-result__mascot .reach-mascot {
	margin-left: 15px;
}

.quiz-passed__mascot .reach-mascot {
	animation: reach-jump 0.6s ease-in-out 3;
}

.quiz-result__mascot .reach-mascot {
	animation: reach-float 2.4s ease-in-out infinite;
}

.quiz-badge {
	display: grid;
	place-items: center;
	width: 96px;
	height: 96px;
	margin: 0 auto 1rem;
	background: var(--blanco);
	border: var(--borde-fuerte);
	border-radius: 50%;
	color: var(--naranja);
	font-family: var(--titulares);
	font-size: 2.25rem;
	font-weight: 800;
	line-height: 1;
	animation: reach-bounce 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.quiz-title {
	margin: 0 0 0.5rem;
	font-size: clamp(2rem, 1.4rem + 3vw, 3rem);
	text-wrap: balance;
}

.quiz-text,
.quiz-remate {
	max-width: 36rem;
	margin: 0 auto 1rem;
	font-size: 1.125rem;
}

.quiz-remate {
	font-weight: 600;
}

.quiz-remate em {
	font-family: var(--titulares);
	font-weight: 700;
}

.quiz-screen--passed .btn {
	margin-top: 0.75rem;
}

.quiz-share {
	margin-top: 1rem;
}

.quiz-note {
	margin: 0.5rem 0 0;
	font-size: 0.875rem;
}

@media (min-width: 640px) {
	.quiz-options {
		grid-template-columns: 1fr 1fr;
	}

	.quiz-bar {
		grid-template-columns: 1fr auto;
	}
}

/* ---------- Franja de pruebas ---------- */

.reach-franja {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: 1.25rem var(--pad);
	background: var(--tinta);
	color: var(--blanco);
}

/* Foto más alta que la franja: reach.js la desplaza al hacer scroll (parallax). */
.reach-franja__bg {
	position: absolute;
	top: 50%;
	left: 0;
	z-index: -2;
	width: 100%;
	height: max(100%, 22rem);
	object-fit: cover;
	translate: 0 -50%;
	will-change: translate;
}

/* Velo oscuro para que el texto blanco mantenga contraste sobre la foto. */
.reach-franja::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgba(0, 0, 0, 0.6);
}

.reach-franja__list {
	display: flex;
	flex-direction: column;
	gap: 0.875rem;
	max-width: var(--wrap);
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

.reach-franja__list li {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	font-family: var(--titulares);
	font-size: 1.0625rem;
	font-weight: 700;
}

.reach-franja__icon {
	display: grid;
	flex: none;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--cielo);
	color: var(--tinta);
}

@media (min-width: 760px) {
	.reach-franja {
		display: flex;
		align-items: center;
		height: 80px;
		padding-block: 0;
	}

	.reach-franja__list {
		flex-direction: row;
		justify-content: space-around;
		width: 100%;
	}
}

/* ---------- El problema ---------- */

.reach-problema {
	/* Naranja oscurecido: el naranja de marca no alcanza contraste AA en texto pequeño sobre claro. */
	--naranja-texto: #b02700;
	--suave: var(--tinta-suave);
}

.reach-bubble {
	position: relative;
	padding: clamp(2.5rem, 6vw, 4rem) clamp(1.25rem, 5vw, 4rem);
	background: var(--superficie);
	border: var(--borde);
	border-radius: var(--r-bloque);
}

.reach-bubble > *,
.reach-cierre__inner > * {
	margin-inline: auto;
}

.reach-bubble .eyebrow {
	background: var(--superficie);
}

.reach-bubble .eyebrow::before {
	background: var(--naranja);
}

.reach-bubble h2 {
	max-width: 46rem;
}

.reach-bubble h2 .hl {
	font-weight: 800;
	text-decoration: underline;
	text-decoration-thickness: 4px;
	text-underline-offset: 8px;
}

.reach-bubble .lead {
	max-width: 42rem;
	font-size: 1.375rem;
}

.reach-bubble__body {
	max-width: 36rem;
	margin-block: 2rem 0;
	color: var(--suave);
	font-size: 1.125rem;
}

.reach-bubble__note {
	position: absolute;
	top: -28px;
	right: -12px;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	padding: 0.5rem 1rem;
	background: var(--superficie);
	border: var(--borde);
	border-radius: 24px;
	font-family: var(--titulares);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.25;
	transform: rotate(6deg);
}

.reach-bubble__note-icon {
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	background: var(--durazno);
	border: 1px solid var(--linea);
	border-radius: 50%;
	color: var(--naranja);
}

.reach-bubble__note-icon svg {
	width: 18px;
	height: 18px;
}

.reach-bubble__star {
	position: absolute;
	bottom: -26px;
	left: -22px;
	z-index: 2;
	display: none;
	padding: 0.625rem;
	background: var(--durazno);
	border: var(--borde);
	border-radius: 50%;
	color: var(--naranja);
	transform: rotate(-12deg);
}

.reach-bubble__star svg {
	display: block;
	width: 28px;
	height: 28px;
}

.reach-versus {
	display: grid;
	gap: 1.5rem;
	max-width: none;
	margin-top: 3rem;
	text-align: left;
}

.reach-versus__card {
	display: flex;
	flex-direction: column;
	padding: 1.5rem;
	background: var(--superficie);
	border: var(--borde);
	border-radius: var(--r-tarjeta);
}

.reach-versus__card.is-reach {
	background: var(--blanco);
}

.reach-versus__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin: 0 0 1rem;
}

.reach-versus__kicker {
	color: var(--naranja-texto);
	font-family: var(--titulares);
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	line-height: 1.35;
	text-transform: uppercase;
}

.reach-versus__pill {
	flex: none;
	padding: 0.125rem 0.625rem;
	background: var(--durazno);
	border: 1px solid var(--naranja-texto);
	border-radius: 999px;
	color: #7a1b00;
	font-size: 0.75rem;
	font-weight: 700;
}

.is-reach .reach-versus__pill {
	padding: 0.25rem 0.75rem;
	background: var(--tinta);
	border: var(--borde);
	color: var(--blanco);
	font-family: var(--titulares);
	font-size: 0.8125rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.reach-versus__card h3 {
	margin: 0 0 0.75rem;
	font-weight: 600;
	line-height: 1.35;
}

.reach-versus__desc {
	margin: 0 0 1.5rem;
	color: var(--suave);
}

.reach-versus__pod {
	margin-bottom: 1.5rem;
	padding: 1rem;
	background: var(--superficie);
	border: 2px solid var(--linea);
	border-radius: 12px;
}

.is-reach .reach-versus__pod {
	background: var(--superficie);
	border-color: var(--tinta);
}

.reach-versus__pod-head {
	display: flex;
	justify-content: space-between;
	gap: 0.75rem;
	margin: 0 0 0.75rem;
	color: var(--suave);
	font-size: 0.75rem;
	font-weight: 500;
}

.reach-versus__pod-head strong {
	flex: none;
	color: var(--naranja-texto);
	font-weight: 800;
}

.is-reach .reach-versus__pod-head {
	color: var(--tinta);
	font-weight: 700;
}

.reach-versus__dots {
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	gap: 0.5rem;
	padding-block: 0.5rem;
}

.reach-versus__dot {
	display: grid;
	place-items: center;
	width: 16px;
	height: 16px;
	background: #e5e7eb;
	border: 1px solid var(--linea);
	border-radius: 50%;
	color: var(--blanco);
	font-size: 0.5625rem;
	font-weight: 700;
	line-height: 1;
}

.reach-versus__dot.is-on {
	background: var(--naranja-texto);
}

.reach-versus__seats {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 0.5rem;
	padding-block: 0.25rem;
}

.reach-versus__seat {
	display: grid;
	justify-items: center;
	gap: 0.25rem;
	color: var(--suave);
	font-size: 0.625rem;
	line-height: 1.2;
}

.reach-versus__seat b {
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	background: var(--superficie);
	border: var(--borde);
	border-radius: 50%;
	color: var(--tinta);
	font-size: 0.75rem;
}

.reach-versus__seat.is-you {
	color: var(--tinta);
	font-weight: 700;
}

.reach-versus__seat.is-you b {
	background: var(--durazno);
	color: var(--naranja-texto);
}

.reach-versus__foot {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: auto 0 0;
	padding-top: 1rem;
	border-top: 2px solid var(--linea);
	color: var(--suave);
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.45;
}

.is-reach .reach-versus__foot {
	color: var(--tinta);
	font-weight: 600;
}

.reach-versus__foot svg {
	flex: none;
	width: 20px;
	height: 20px;
	color: var(--naranja-texto);
}

.reach-bubble__actions {
	margin-top: 3rem;
}

@media (min-width: 640px) {
	.reach-bubble__note {
		top: -32px;
		right: -24px;
	}

	.reach-bubble__star {
		display: block;
	}
}

@media (min-width: 760px) {
	.reach-versus {
		grid-template-columns: 1fr 1fr;
	}
}

/* ---------- Tarjetas y carrusel ---------- */

.reach-cards {
	display: grid;
	gap: 1.5rem;
	margin-top: 3.5rem;
	text-align: left;
}

@media (max-width: 899px) {
	.reach-section > .reach-scroller {
		display: flex;
		gap: 1rem;
		max-width: none;
		margin-inline: calc(var(--pad) * -1);
		margin-top: 1.5rem;
		padding: 2.25rem var(--pad) 1rem;
		overflow-x: auto;
		scroll-padding-inline: var(--pad);
		scroll-snap-type: x mandatory;
	}

	.reach-scroller > * {
		flex: 0 0 min(82%, 340px);
		scroll-snap-align: start;
	}
}

@media (min-width: 900px) {
	.reach-cards {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* ---------- Programas ---------- */

.reach-programas .eyebrow {
	background: var(--amarillo);
}

.reach-programas .eyebrow::before {
	background: var(--tinta);
}

.reach-programas h2 .hl {
	display: inline-block;
	padding: 0.05em 0.3em 0.1em;
	background: var(--naranja);
	border: var(--borde);
	border-radius: 12px;
	color: var(--blanco);
	transform: rotate(-1deg);
}

.reach-programas .reach-cards {
	gap: 2rem;
}

.reach-program {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 3.25rem clamp(1.5rem, 2.4vw, 2.25rem) clamp(1.5rem, 2.4vw, 2.25rem);
	border: var(--borde);
	border-radius: 28px;
	transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (hover: hover) {
	.reach-program:hover {
		transform: translateY(-6px);
	}
}

.reach-program__art {
	position: absolute;
	top: -28px;
	left: 1.5rem;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--titulares);
	font-weight: 700;
	line-height: 1;
	pointer-events: none;
}

.reach-program__box {
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	border: var(--borde);
	border-radius: var(--r-tarjeta);
}

.reach-program__box svg {
	width: 40px;
	height: 40px;
}

.reach-program__box--star {
	background: var(--amarillo);
	color: var(--tinta);
	transform: rotate(-8deg);
}

.reach-program__box--asterisk {
	width: 48px;
	height: 48px;
	background: var(--azul);
	border-color: var(--blanco);
	border-radius: 14px;
	color: var(--blanco);
	transform: rotate(12deg);
}

.reach-program__box--asterisk svg {
	width: 28px;
	height: 28px;
}

.reach-program__say,
.reach-program__popular {
	padding: 0.3rem 0.75rem;
	background: var(--blanco);
	border: var(--borde);
	border-radius: 14px;
	color: var(--tinta);
	font-size: 0.8125rem;
	letter-spacing: 0.04em;
	transform: rotate(4deg);
}

.reach-program__popular {
	background: var(--amarillo);
	border-radius: 999px;
	transform: rotate(3deg);
}

.reach-program__hi {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.375rem 0.875rem;
	background: var(--naranja);
	border: var(--borde);
	border-radius: 20px;
	color: var(--blanco);
	font-size: var(--texto-sobre-naranja);
	transform: rotate(-4deg);
}

.reach-program__face {
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	background: var(--blanco);
	border: 1px solid var(--linea);
	border-radius: 50%;
	color: var(--tinta);
	font-size: 0.75rem;
}

.reach-program__bang {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	background: var(--amarillo);
	border: 2px solid var(--blanco);
	border-radius: 50%;
	color: var(--tinta);
	font-size: 1.125rem;
	font-weight: 800;
	transform: rotate(-6deg);
}

.reach-program__tag,
.reach-pledge__tag {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	width: fit-content;
	margin: 0 0 1rem;
	padding: 0.25rem 0.75rem;
	border: 1px solid transparent;
	border-radius: 999px;
	font-family: var(--titulares);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.25;
}

.reach-program h3 {
	margin: 0 0 0.75rem;
	color: inherit;
	font-size: clamp(1.75rem, 2.6vw, 2.125rem);
	line-height: 1.1;
	text-wrap: balance;
}

.reach-program__desc {
	margin: 0 0 1.75rem;
	font-size: 1.0625rem;
	line-height: 1.45;
	text-wrap: pretty;
}

.reach-program__list {
	display: grid;
	gap: 0.875rem;
	margin: 0 0 2rem;
	padding: 1.5rem 0 0;
	border-top: 1px solid color-mix(in srgb, currentColor 22%, transparent);
	list-style: none;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.45;
}

.reach-program__list li {
	display: flex;
	align-items: flex-start;
	gap: 0.625rem;
}

.reach-program__check {
	flex: none;
	width: 20px;
	height: 20px;
}

.reach-program__link {
	width: 100%;
	padding-inline: 0.75rem;
	margin-top: auto;
}

.reach-program__link:focus-visible {
	outline: 3px solid currentColor;
	outline-offset: 3px;
}

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

/* Amarilla: niños y adolescentes */

.reach-program--ninos {
	background: var(--amarillo);
	color: var(--tinta);
}

.reach-program--ninos .reach-program__tag {
	background: var(--tinta);
	color: var(--blanco);
}

.reach-program--ninos .reach-program__tag::before {
	content: "";
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: var(--amarillo);
}

.reach-program--ninos .reach-program__check path {
	stroke: var(--amarillo);
}

.reach-program--ninos .reach-program__link {
	background: var(--tinta);
	color: var(--blanco);
}

.reach-program--ninos .reach-program__link:hover {
	background: var(--azul);
}

/* Azul: universitarios y adultos */

.reach-program--adultos {
	background: var(--azul);
	color: var(--blanco);
}

.reach-program--adultos .reach-program__tag {
	background: var(--blanco);
	border-color: var(--tinta);
	color: var(--tinta);
}

.reach-program--adultos .reach-program__check {
	color: var(--amarillo);
}

.reach-program--adultos .reach-program__check path {
	stroke: var(--tinta);
}

.reach-program--adultos .reach-program__link {
	background: var(--naranja);
	color: var(--blanco);
}

.reach-program--adultos .reach-program__link:hover {
	background: #e63700;
}

/* Navy: TOEFL / Cambridge */

.reach-program--examenes {
	background: var(--tinta);
	border-color: var(--tinta);
	color: var(--blanco);
}

.reach-program--examenes .reach-program__tag {
	background: rgb(255 255 255 / 0.1);
	border-color: rgb(255 255 255 / 0.2);
}

.reach-program--examenes .reach-program__check {
	color: var(--menta);
}

.reach-program--examenes .reach-program__check path {
	stroke: var(--tinta);
}

.reach-program--examenes .reach-program__link {
	background: var(--blanco);
	border-color: var(--blanco);
	color: var(--tinta);
}

.reach-program--examenes .reach-program__link:hover {
	background: var(--amarillo);
	border-color: var(--amarillo);
}

.reach-program--adultos :focus-visible,
.reach-program--examenes :focus-visible {
	outline-color: var(--amarillo);
}

/* Barra de compromiso */

.reach-pledge {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.5rem;
	margin-top: 3rem;
	padding: 1.5rem;
	background: var(--superficie);
	border-radius: 24px;
	text-align: left;
}

.reach-pledge__icon {
	display: grid;
	flex: none;
	place-items: center;
	width: 56px;
	height: 56px;
	background: var(--amarillo);
	border: var(--borde);
	border-radius: var(--r-tarjeta);
	color: var(--tinta);
}

.reach-pledge__icon svg {
	width: 34px;
	height: 34px;
}

.reach-pledge__text {
	flex: 1;
}

.reach-pledge__text p {
	margin: 0;
	font-weight: 600;
}

.reach-pledge__text .reach-pledge__tag {
	margin-bottom: 0.375rem;
	padding-block: 0.125rem;
	background: var(--tinta);
	color: var(--blanco);
	text-transform: uppercase;
}

.reach-pledge .btn {
	flex: none;
	width: 100%;
}

@media (min-width: 900px) {
	.reach-pledge {
		flex-direction: row;
		margin-top: 4rem;
		padding: 2rem;
	}

	.reach-pledge .btn {
		width: auto;
		white-space: nowrap;
	}
}

/* ---------- Niveles ---------- */

.reach-ladder {
	display: grid;
	gap: 0.75rem;
	margin-top: 3.5rem;
	padding: 0;
	list-style: none;
	text-align: left;
}

.reach-ladder__step {
	position: relative;
	margin-left: calc(var(--step) * 4%);
	padding: 1rem 1.125rem;
	background: var(--superficie);
	border-radius: var(--r-tarjeta);
}

.reach-ladder__step--peak {
	background: var(--menta);
	color: var(--tinta);
}

.reach-ladder__step--peak .reach-ladder__code {
	background: var(--tinta);
	color: var(--blanco);
}

.reach-ladder__code {
	display: inline-block;
	margin-bottom: 0.5rem;
	padding: 3px 11px;
	background: var(--azul);
	border-radius: 999px;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--blanco);
}

.reach-ladder__step h3 {
	margin: 0 0 0.25rem;
	color: inherit;
	font-size: 1.5rem;
}

.reach-ladder__step p {
	margin: 0;
}

.reach-ladder__token {
	position: absolute;
	top: -16px;
	right: 14px;
	padding: 5px 7px;
	background: var(--amarillo);
	border: var(--borde);
	border-radius: 999px;
}

@media (min-width: 900px) {
	.reach-ladder {
		grid-template-columns: repeat(6, 1fr);
		align-items: end;
	}

	.reach-ladder__step {
		min-height: calc(132px + var(--step) * 30px);
		margin-left: 0;
	}
}

/* ---------- Por qué 6 ---------- */

.reach-compare {
	display: grid;
	gap: 1.25rem;
	align-items: center;
	margin-top: 3rem;
	text-align: left;
}

.reach-compare__col {
	padding: 1.5rem;
	background: var(--gris);
	border: 2px solid rgb(22 41 77 / 0.35);
	border-radius: var(--r-tarjeta);
}

.reach-compare__col h3 {
	margin: 1rem 0 0.25rem;
	color: inherit;
}

.reach-compare__col p {
	margin: 0;
}

.reach-compare__col.is-reach {
	padding: 2.25rem;
	background: var(--naranja);
	border: var(--borde-fuerte);
	border-radius: var(--r-bloque);
	color: var(--blanco);
}

.reach-compare__col.is-reach h3 {
	font-size: 2.5rem;
}

.reach-compare__col.is-reach p {
	font-family: var(--titulares);
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.25;
}

.reach-dots {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	max-width: 12rem;
	min-height: 28px;
}

.reach-dots i {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #8b94a6;
}

.is-reach .reach-dots {
	gap: 8px;
	max-width: none;
}

.is-reach .reach-dots i {
	width: 28px;
	height: 28px;
	background: var(--blanco);
	border: var(--borde);
}

@media (min-width: 900px) {
	.reach-compare {
		grid-template-columns: 1fr 1fr 1.3fr;
	}
}

/* ---------- Cómo funciona ---------- */

/*
 * Primera sección con el estilo nuevo: titulares pesados en mayúsculas, píldoras y superficies gris neutro.
 * Sin contornos ni texto navy; el texto usa --tinta.
 */
.reach-moderno {
	color: var(--tinta);
}

.reach-moderno h2,
.reach-moderno h3 {
	color: var(--tinta);
}

.reach-moderno .eyebrow {
	background: var(--superficie);
	border: 0;
	color: var(--tinta);
}

.reach-moderno .btn {
	border: 0;
	border-radius: 999px;
}

.reach-moderno .btn--ghost {
	background: var(--superficie);
	color: var(--tinta);
}

.reach-moderno .btn--ghost:hover {
	background: var(--amarillo);
}

/* Hoja blanca que sube sobre el hero azul, con las tres tarjetas dentro. */
.reach-como {
	position: relative;
	z-index: 1;
	margin-top: calc(-1 * clamp(3rem, 6vw, 4.5rem));
	padding-top: clamp(3rem, 6vw, 4.5rem);
	background: var(--blanco);
	border-radius: clamp(32px, 5vw, 56px) clamp(32px, 5vw, 56px) 0 0;
}

.reach-como h2 {
	font-weight: 800;
	letter-spacing: -0.025em;
	text-transform: uppercase;
}

/* --p va de 0 (tarjetas apiladas) a 1 (ordenadas). Lo mueve reach.js con el scroll. */
.reach-fan {
	--p: 1;
	display: grid;
	gap: 3.25rem;
	max-width: 22rem;
	margin-top: 3rem;
	margin-bottom: 4.5rem;
	padding: 0;
	list-style: none;
}

.reach-fan__card {
	--tx: 0%;
	--ty: 0rem;
	--rot: 0deg;
	position: relative;
	padding: 2.25rem 1.25rem 3.5rem;
	background: var(--superficie);
	border-radius: 28px;
	text-align: center;
	transform:
		translate(calc((1 - var(--p)) * var(--tx)), calc((1 - var(--p)) * var(--ty)))
		rotate(calc((1 - var(--p)) * var(--rot)));
	will-change: transform;
}

.reach-fan__card:nth-child(1) {
	--tx: -4%;
	--ty: 3.5rem;
	--rot: -5deg;
}

.reach-fan__card:nth-child(2) {
	--tx: 5%;
	--rot: 4deg;
	z-index: 1;
}

.reach-fan__card:nth-child(3) {
	--tx: -3%;
	--ty: -3.5rem;
	--rot: -4deg;
}

.reach-fan__card h3 {
	margin: 0;
	font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1;
	text-transform: uppercase;
	text-wrap: balance;
}

.reach-fan__desc {
	margin: 0.625rem 0 0;
	color: var(--tinta-suave);
	font-size: 0.9375rem;
	line-height: 1.4;
}

/* Píldoras que cuelgan del borde inferior de la tarjeta. */
.reach-fan__chips {
	position: absolute;
	bottom: 0;
	left: 50%;
	display: flex;
	align-items: center;
	gap: 0.375rem;
	width: max-content;
	margin: 0;
	transform: translate(-50%, 50%);
}

.reach-fan__chip {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 3rem;
	padding: 0.375rem 1.125rem;
	border-radius: 999px;
	box-shadow: 0 14px 26px -16px rgba(0, 0, 0, 0.45);
	font-family: var(--titulares);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
}

.reach-fan__chip.is-blanco {
	background: var(--blanco);
	color: var(--tinta);
}

.reach-fan__chip.is-azul {
	background: var(--azul);
	color: var(--blanco);
}

.reach-fan__chip.is-amarillo {
	background: var(--amarillo);
	color: var(--tinta);
}

.reach-fan__chip.is-bocadillo {
	min-height: 3.5rem;
	padding-inline: 1.5rem;
	border-radius: 22px 22px 22px 6px;
	font-size: 1.1875rem;
	rotate: -4deg;
}

.reach-fan__chip img {
	width: 2.25rem;
	height: 2.25rem;
	margin-left: -0.625rem;
	border-radius: 50%;
	object-fit: cover;
}

.reach-fan__dot {
	display: grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	margin-right: -0.625rem;
	background: var(--amarillo);
	border-radius: 50%;
	color: var(--tinta);
}

.reach-fan__dot .reach-icon {
	width: 1.25rem;
	height: 1.25rem;
}

/* Flecha a mano entre tarjetas: solo cuando están en fila. */
.reach-fan__arrow {
	display: none;
	color: var(--tinta);
}

@media (min-width: 900px) {
	.reach-fan {
		grid-template-columns: repeat(3, 1fr);
		gap: 3rem;
		max-width: 66rem;
	}

	.reach-fan__card h3 {
		min-height: 2em;
	}

	.reach-fan__card:nth-child(1) {
		--tx: 42%;
		--ty: 1.75rem;
		--rot: -8deg;
	}

	.reach-fan__card:nth-child(2) {
		--tx: 0%;
		--ty: -1.5rem;
		--rot: 3deg;
	}

	.reach-fan__card:nth-child(3) {
		--tx: -42%;
		--ty: 2rem;
		--rot: 9deg;
	}

	.reach-fan__arrow {
		position: absolute;
		z-index: 2;
		right: -2.875rem;
		bottom: -1.25rem;
		display: block;
		width: 2.75rem;
		opacity: var(--p);
	}

	.reach-fan__card:nth-child(2) .reach-fan__arrow {
		scale: 1 -1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.reach-fan__card {
		transform: none;
	}
}

/* ---------- Reto del día ---------- */

.reach-reto {
	padding-top: 0;
}

/* Carrusel horizontal: testimonio · reto · testimonio · cifra · testimonio. */
.reto-strip {
	display: flex;
	gap: 1rem;
	max-width: none;
	margin-top: 2.5rem;
	margin-inline: calc(var(--pad) * -1);
	padding: 0.25rem var(--pad) 0.75rem;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-padding-inline: var(--pad);
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	text-align: left;
	cursor: grab;
	-webkit-overflow-scrolling: touch;
	touch-action: pan-x;
}

.reto-strip::-webkit-scrollbar {
	display: none;
}

.reto-strip:focus-visible {
	outline: 2px solid var(--azul);
	outline-offset: 4px;
}

/* Mientras se arrastra con el mouse: sin snap (más fluido) y sin seleccionar texto. */
.reto-strip.is-dragging {
	cursor: grabbing;
	scroll-snap-type: none;
	user-select: none;
}

.reto-strip.is-dragging * {
	cursor: grabbing;
}

.reto-strip > * {
	flex: 0 0 clamp(15.5rem, 72vw, 18.5rem);
	scroll-snap-align: start;
}

@media (min-width: 900px) {
	.reto-strip {
		gap: 1.25rem;
	}

	.reto-strip > * {
		flex-basis: clamp(16.5rem, 22vw, 19rem);
	}
}

/* Reseña en audio: foto a tarjeta completa y panel de vidrio con reproductor y cita. */
.reto-review {
	position: relative;
	display: flex;
	align-items: flex-end;
	margin: 0;
	padding: 0.75rem;
	overflow: hidden;
	aspect-ratio: 3 / 4;
	background: var(--tinta);
	border-radius: 28px;
	color: var(--blanco);
}

.reto-review__photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 0;
}

.reto-review__glass {
	position: relative;
	width: 100%;
	padding: 0.875rem 1rem 1rem;
	background: rgba(40, 42, 48, 0.42);
	border: 1px solid rgba(255, 255, 255, 0.32);
	border-radius: 20px;
	-webkit-backdrop-filter: blur(18px) saturate(1.2);
	backdrop-filter: blur(18px) saturate(1.2);
}

.reto-review__row {
	display: flex;
	align-items: center;
	gap: 0.625rem;
}

.reto-review__play {
	display: grid;
	flex: none;
	place-items: center;
	width: 2rem;
	height: 2rem;
	padding: 0;
	background: var(--naranja);
	border: 0;
	border-radius: 50%;
	color: var(--blanco);
	cursor: pointer;
	touch-action: manipulation;
	transition: transform 0.15s ease;
}

.reto-review__play:active {
	transform: scale(0.94);
}

.reto-review__play:focus-visible {
	outline-color: var(--blanco);
}

.reto-review__play .reach-icon {
	width: 0.8125rem;
	height: 0.8125rem;
	margin-left: 1px;
}

/* Sonando: el triángulo pasa a dos barras de pausa. */
.reto-review__play.is-playing .reach-icon {
	display: none;
}

.reto-review__play.is-playing::before {
	content: "";
	width: 0.625rem;
	height: 0.75rem;
	border-inline: 0.1875rem solid currentColor;
}

.reto-review__wave {
	display: flex;
	flex: 1;
	align-items: center;
	gap: 2px;
	height: 1rem;
	min-width: 0;
	overflow: hidden;
}

.reto-review__wave span {
	flex: 1 0 2px;
	height: var(--h);
	background: rgba(255, 255, 255, 0.65);
	border-radius: 999px;
}

.reto-review__play.is-playing + .reto-review__wave span {
	animation: reto-wave 0.9s ease-in-out infinite alternate;
}

.reto-review__play.is-playing + .reto-review__wave span:nth-child(3n) {
	animation-delay: -0.3s;
}

.reto-review__play.is-playing + .reto-review__wave span:nth-child(3n + 1) {
	animation-delay: -0.6s;
}

@keyframes reto-wave {
	to {
		transform: scaleY(0.35);
	}
}

.reto-review__meta {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 0.625rem;
	margin: 0.625rem 0 0;
	color: rgba(255, 255, 255, 0.78);
	font-size: 0.75rem;
	font-weight: 500;
	line-height: 1.3;
	font-variant-numeric: tabular-nums;
}

/* Invitación al reto: misma proporción que las reseñas, CTA abre el dialog. */
.reto-teaser {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 0.75rem;
	padding: 1.5rem 1.25rem;
	aspect-ratio: 3 / 4;
	background:
		radial-gradient(120% 80% at 100% 0%, rgba(255, 255, 255, 0.16), transparent 55%),
		linear-gradient(165deg, #2a2d34 0%, #1a1c21 100%);
	border-radius: 28px;
	color: var(--blanco);
}

.reto-teaser__eyebrow {
	margin: 0 0 auto;
	color: rgba(255, 255, 255, 0.72);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Doble clase: gana al color de tinta que .reach-moderno pone a todos los h3. */
.reto-teaser .reto-teaser__title {
	color: var(--blanco);
}

.reto-teaser__title {
	margin: 0;
	font-family: var(--titulares);
	font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem);
	font-weight: 800;
	line-height: 1.15;
	text-wrap: balance;
}

.reto-teaser__title em {
	font-style: normal;
	color: var(--naranja);
}

.reto-teaser__text {
	margin: 0;
	color: rgba(255, 255, 255, 0.78);
	font-size: 0.875rem;
	line-height: 1.4;
}

.reto-teaser__cta {
	align-self: flex-start;
	margin-top: 0.25rem;
	touch-action: manipulation;
}

/* Cifra con conteo al entrar en viewport. */
.reto-stat {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 0.75rem;
	padding: 1.5rem 1.25rem;
	aspect-ratio: 3 / 4;
	background: var(--superficie);
	border-radius: 28px;
	color: var(--tinta);
}

.reto-stat__number {
	margin: 0;
	font-family: var(--titulares);
	font-size: clamp(4.5rem, 3.5rem + 3vw, 6rem);
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	line-height: 0.9;
	letter-spacing: -0.04em;
	color: var(--naranja);
}

.reto-stat__label {
	margin: 0;
	max-width: 12ch;
	font-family: var(--titulares);
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.25;
	text-wrap: balance;
}

/* Popup del juego. */
.reto-dialog {
	width: min(42rem, calc(100vw - 2rem));
	max-height: calc(100vh - 2rem);
	margin: auto;
	padding: 0;
	overflow: auto;
	border: 0;
	border-radius: 28px;
	background: transparent;
	box-shadow: 0 24px 80px rgba(0, 0, 0, 0.28);
}

.reto-dialog::backdrop {
	background: rgba(20, 22, 26, 0.62);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}

.reto-dialog__panel {
	background: var(--superficie);
	border-radius: 28px;
}

.reto-dialog__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.25rem 1.25rem 0;
}

.reto-dialog__title {
	margin: 0;
	color: var(--tinta-suave);
	font-family: var(--titulares);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.reto-dialog__close {
	display: grid;
	flex: none;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	background: var(--blanco);
	border: 0;
	border-radius: 50%;
	color: var(--tinta);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
}

.reto-dialog__close:hover {
	background: #e8e9ec;
}

.reto {
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: 1rem 1.25rem 1.25rem;
	background: transparent;
	border-radius: 0;
	text-align: left;
}

/* Los botones y píldoras definen su propio display: sin esto, [hidden] no los oculta. */
.reto[hidden],
.reto [hidden],
.reto-intro[hidden],
.reto-intro [hidden] {
	display: none;
}

/* Pantalla previa al reto: pasos claros + cifras aparte + CTA. */
.reto-intro {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	padding: 0.75rem 1.5rem 1.5rem;
	text-align: left;
}

.reto-intro__lead {
	margin: 0;
	font-family: var(--titulares);
	font-size: clamp(1.375rem, 1.15rem + 1vw, 1.75rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.2;
	text-wrap: balance;
}

.reto-intro__lead em {
	color: var(--naranja);
	font-style: normal;
}

.reto-intro__steps {
	display: grid;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: reto-paso;
}

.reto-intro__steps li {
	display: grid;
	grid-template-columns: 2rem minmax(0, 1fr);
	align-items: start;
	gap: 0.875rem;
	padding: 0.875rem 1rem;
	background: var(--blanco);
	border-radius: 16px;
	counter-increment: reto-paso;
}

.reto-intro__steps li::before {
	content: counter(reto-paso);
	display: grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	margin-top: 0.05rem;
	background: var(--tinta);
	border-radius: 50%;
	color: var(--blanco);
	font-family: var(--titulares);
	font-size: 0.875rem;
	font-weight: 800;
	line-height: 1;
}

.reto-intro__step {
	display: grid;
	gap: 0.2rem;
	min-width: 0;
}

.reto-intro__step-title {
	font-family: var(--titulares);
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.25;
}

.reto-intro__step-text {
	color: var(--tinta-suave);
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.4;
}

.reto-intro__facts {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.625rem;
}

.reto-intro__fact {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.125rem;
	padding: 0.875rem 1rem;
	background: var(--blanco);
	border-radius: 16px;
}

.reto-intro__fact-value {
	font-family: var(--titulares);
	font-size: 2rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--naranja);
}

.reto-intro__fact-label {
	color: var(--tinta-suave);
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.3;
}

.reto-intro__note {
	margin: -0.35rem 0 0;
	color: var(--tinta-suave);
	font-size: 0.8125rem;
	line-height: 1.35;
}

/* Sin intentos: mismo marco que la pantalla previa, solo aviso y cierre. */
.reto-out__text {
	margin: 0;
	color: var(--tinta-suave);
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.45;
}

.reto-out .reto__admin {
	align-self: center;
}

.reto-out .reto-intro__lead:focus {
	outline: none;
}

/* Datos de contacto: dos columnas en pantallas anchas, una en móvil. */
.reto-datos__grid {
	display: grid;
	gap: 0.75rem;
}

@media (min-width: 560px) {
	.reto-datos__grid {
		grid-template-columns: 1fr 1fr;
	}
}

.reto-campo {
	display: grid;
	gap: 0.375rem;
	min-width: 0;
}

.reto-campo > span {
	font-family: var(--titulares);
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1.25;
}

.reto-campo b {
	color: var(--naranja);
}

.reto-campo i {
	margin-left: 0.25rem;
	color: var(--tinta-suave);
	font-size: 0.75rem;
	font-style: normal;
	font-weight: 500;
}

.reto-campo input,
.reto-campo select {
	width: 100%;
	min-height: 3rem;
	padding: 0.625rem 0.875rem;
	background: var(--blanco);
	border: 1px solid var(--linea);
	border-radius: 12px;
	color: var(--tinta);
	font: inherit;
	/* 16px evita el zoom automático de iOS al enfocar. */
	font-size: 1rem;
}

.reto-campo input:focus-visible,
.reto-campo select:focus-visible {
	border-color: var(--naranja);
	outline: 3px solid rgba(255, 69, 0, 0.3);
	outline-offset: 1px;
}

.reto-datos__error {
	margin: 0;
	padding: 0.625rem 0.875rem;
	background: #fdecea;
	border-radius: 12px;
	color: #8f1d10;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.35;
}

.reto-intro__cta {
	align-self: stretch;
	margin-top: 0.25rem;
}

.reto-dialog .reto-intro__cta:focus-visible {
	outline: 3px solid rgba(255, 69, 0, 0.55);
	outline-offset: 3px;
}

.reto__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
}

.reto__timer {
	flex: none;
	min-width: 4.25rem;
	margin: 0;
	padding: 0.25rem 0.875rem;
	background: var(--blanco);
	border-radius: 999px;
	font-family: var(--titulares);
	font-size: 1.125rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	text-align: center;
}

.reto.is-hurry .reto__timer {
	background: var(--naranja);
	color: var(--blanco);
}

/* Barra de tiempo: se encoge de derecha a izquierda. */
.reto__clock {
	height: 6px;
	margin-top: 0.75rem;
	overflow: hidden;
	background: var(--blanco);
	border-radius: 999px;
}

.reto__clock span {
	display: block;
	height: 100%;
	background: var(--azul);
	border-radius: inherit;
	transform-origin: left center;
}

.reto.is-hurry .reto__clock span {
	background: var(--naranja);
}

.reto__hint {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	color: var(--tinta-suave);
	font-size: 0.9375rem;
}

.reto__tag {
	padding: 0.25rem 0.75rem;
	background: var(--blanco);
	border-radius: 999px;
	color: var(--tinta);
	font-size: 0.8125rem;
	font-weight: 600;
}

.reto__answer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	min-height: 4.5rem;
	margin-top: 0.875rem;
	padding: 0.75rem;
	background: var(--blanco);
	border-radius: 22px;
}

.reto__answer.is-wrong {
	animation: reto-shake 0.4s ease;
}

@keyframes reto-shake {
	20%, 60% {
		transform: translateX(-6px);
	}

	40%, 80% {
		transform: translateX(6px);
	}
}

.reto__placeholder {
	margin: 0;
	padding-left: 0.5rem;
	color: var(--tinta-suave);
}

.reto__word,
.reto__chip {
	padding: 0.5rem 1.125rem;
	border: 0;
	border-radius: 999px;
	font-family: var(--titulares);
	font-size: var(--texto-sobre-naranja);
	font-weight: 700;
	line-height: 1.3;
	white-space: nowrap;
	cursor: pointer;
}

.reto .is-c0 {
	background: var(--azul);
	color: var(--blanco);
}

.reto .is-c1 {
	background: var(--naranja);
	color: var(--blanco);
}

.reto .is-c2 {
	background: var(--amarillo);
	color: var(--tinta);
}

.reto .is-c3 {
	background: var(--menta);
	color: var(--tinta);
}

.reto .is-c4 {
	background: var(--lila);
	color: var(--tinta);
}

.reto .is-c5 {
	background: var(--rosa);
	color: var(--tinta);
}

.reto__arena {
	position: relative;
	flex: 1;
	min-height: 17rem;
	margin-top: 0.5rem;
	overflow: hidden;
}

.reto__word {
	position: absolute;
	top: 0;
	left: 0;
	touch-action: none;
	user-select: none;
	cursor: grab;
	will-change: transform;
}

.reto__arena.is-idle .reto__word {
	visibility: hidden;
}

/* Puerta: botón de empezar y aviso de tiempo agotado, centrados sobre el área de juego. */
.reto__gate {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: grid;
	place-content: center;
	justify-items: center;
	gap: 1rem;
	padding: 1rem;
	text-align: center;
}

.reto__gate-text {
	max-width: 18rem;
	margin: 0;
	font-family: var(--titulares);
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.25;
}

/* Solo lo ven los administradores: borra sus intentos de hoy para probar el reto. */
.reto__admin {
	padding: 0.25rem 0.5rem;
	background: none;
	border: 0;
	color: var(--tinta-suave);
	font: inherit;
	font-size: 0.8125rem;
	text-decoration: underline;
	cursor: pointer;
}

.reto__word.is-dragging {
	z-index: 1;
	cursor: grabbing;
}

/* Sin física (movimiento reducido o Matter no cargó): las palabras quedan en fila. */
.reto__arena.is-static {
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
	gap: 0.5rem;
	height: auto;
	min-height: 12rem;
	padding-block: 0.75rem;
}

.reto__arena.is-static .reto__word {
	position: static;
	touch-action: auto;
	cursor: pointer;
}

.reto__confetti {
	position: absolute;
	top: 0;
	left: 0;
	border-radius: 50%;
	pointer-events: none;
}

.reto__status {
	min-height: 1.5em;
	margin: 0.5rem 0 0;
	font-weight: 600;
}

.reto .btn:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.reto.is-solved .reto__chip {
	cursor: default;
}

.reto.is-solved .reto__status {
	display: none;
}

.reto__win {
	position: relative;
	z-index: 2;
	display: grid;
	place-content: center;
	justify-items: center;
	gap: 0.625rem;
	min-height: 17rem;
	/* El hueco inferior deja sitio al confeti que se acumula en el suelo. */
	padding: 1.25rem 0.5rem 2.5rem;
	text-align: center;
}

.reto__win:focus {
	outline: none;
}

.reto__win p {
	margin: 0;
}

.reto__win-title {
	font-family: var(--titulares);
	font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.25rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.1;
}

.reto__code {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-block: 0.375rem;
	padding: 0.5rem 0.625rem 0.5rem 1.125rem;
	background: var(--blanco);
	border-radius: 999px;
	font-size: 0.875rem;
	font-weight: 600;
}

.reto__code strong {
	padding: 0.375rem 1rem;
	background: var(--amarillo);
	border-radius: 999px;
	font-family: var(--titulares);
	font-size: 1.375rem;
	font-weight: 800;
	letter-spacing: 0.04em;
}

.reto__small {
	margin: 0;
	color: var(--tinta-suave);
	font-size: 0.875rem;
}

/* ---------- Profesores ---------- */

.reach-teacher {
	padding: 1.75rem 1.5rem;
	background: var(--superficie);
	border-radius: var(--r-tarjeta);
	text-align: center;
}

.reach-teacher__photo {
	display: block;
	width: 128px;
	height: 128px;
	margin: 0 auto 1rem;
	overflow: hidden;
	border: var(--borde);
	border-radius: 50%;
	background: var(--cielo);
	object-fit: cover;
}

.reach-teacher__photo svg {
	display: block;
	width: 100%;
	height: 100%;
	fill: var(--tinta);
}

.reach-teacher h3 {
	margin: 0;
}

.reach-teacher__cert {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	margin: 0.5rem 0 0;
	font-size: 0.9375rem;
	font-weight: 600;
}

.reach-teacher__quote {
	margin: 1rem 0 0;
	padding: 0.625rem 0.875rem;
	background: var(--blanco);
	border-left: 4px solid var(--naranja);
	border-radius: var(--r-etiqueta);
	font-family: var(--titulares);
	font-style: italic;
	font-weight: 600;
	text-align: left;
}

/* ---------- Progreso ---------- */

.reach-progreso {
	background: var(--superficie);
	text-align: left;
}

.reach-progreso__grid {
	display: grid;
	gap: 3.5rem;
	align-items: center;
}

.reach-checks {
	margin: 1.5rem 0 0;
	padding: 0;
	list-style: none;
}

.reach-checks li {
	position: relative;
	margin-bottom: 0.75rem;
	padding-left: 2.25rem;
	font-weight: 600;
}

.reach-checks li::before {
	content: "";
	position: absolute;
	top: 0.05em;
	left: 0;
	width: 24px;
	height: 24px;
	border: var(--borde);
	border-radius: 50%;
	background: var(--menta) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315161A' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-8.5'/%3E%3C/svg%3E") center / 16px no-repeat;
}

.reach-report {
	position: relative;
	width: 100%;
	max-width: 440px;
	margin-inline: auto;
	padding: 2rem;
	background: var(--blanco);
	border: var(--borde-fuerte);
	border-radius: var(--r-bloque);
	transform: rotate(1.5deg);
}

.reach-report__head {
	display: flex;
	align-items: center;
	gap: 0.25rem;
}

.reach-report__head .reach-mascot {
	flex: none;
	width: 84px;
	margin-left: -12px;
}

.reach-report__line {
	display: block;
	width: 100%;
	height: 12px;
	border-radius: 6px;
	background: var(--gris);
}

.reach-report__line.is-title {
	width: 50%;
	height: 16px;
	background: var(--tinta);
}

.reach-report__line.is-short {
	width: 60%;
}

.reach-report__bar {
	height: 22px;
	margin: 1.25rem 0 0.5rem;
	overflow: hidden;
	background: var(--gris);
	border: var(--borde);
	border-radius: 999px;
}

.reach-report__bar span {
	display: block;
	width: 62%;
	height: 100%;
	background: var(--menta);
	border-right: var(--borde);
	border-radius: 0 999px 999px 0;
}

.reach-report__levels {
	display: flex;
	justify-content: space-between;
	margin: 0 0 1.25rem;
	padding: 0;
	list-style: none;
	font-family: var(--titulares);
	font-size: 0.875rem;
	font-weight: 700;
}

.reach-report__note {
	display: grid;
	gap: 0.625rem;
	padding: 1rem;
	background: var(--superficie);
	border: var(--borde);
	border-radius: var(--r-tarjeta);
}

.reach-report__star {
	position: absolute;
	top: -28px;
	right: -14px;
	width: 68px;
	transform: rotate(14deg);
}

@media (min-width: 900px) {
	.reach-progreso__grid {
		grid-template-columns: 1fr 1fr;
	}
}

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

.reach-faq {
	display: grid;
	gap: 0.75rem;
	max-width: 820px;
	margin-top: 2.5rem;
	text-align: left;
}

.reach-faq details {
	background: var(--superficie);
	border-radius: var(--r-tarjeta);
}

.reach-faq summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: 60px;
	padding: 0.875rem 1.25rem;
	border-radius: var(--r-tarjeta);
	list-style: none;
	cursor: pointer;
}

.reach-faq summary::-webkit-details-marker {
	display: none;
}

.reach-faq h3 {
	margin: 0;
	font-size: 1.125rem;
	line-height: 1.3;
}

.reach-faq__icon {
	position: relative;
	flex: none;
	width: 32px;
	height: 32px;
	background: var(--blanco);
	border-radius: 50%;
}

.reach-faq__icon::before,
.reach-faq__icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 14px;
	height: 2.5px;
	border-radius: 2px;
	background: var(--tinta);
	transform: translate(-50%, -50%);
}

.reach-faq__icon::after {
	transform: translate(-50%, -50%) rotate(90deg);
	transition: transform 0.2s ease;
}

.reach-faq details[open] .reach-faq__icon {
	background: var(--amarillo);
}

.reach-faq details[open] .reach-faq__icon::after {
	transform: translate(-50%, -50%) rotate(0deg);
}

.reach-faq details > p {
	margin: 0;
	padding: 0 1.25rem 1.25rem;
}

/* ---------- Cierre ---------- */

.reach-cierre {
	padding: clamp(3.5rem, 8vw, 5.5rem) var(--pad);
	background: var(--naranja);
	border-block: var(--borde-fuerte);
	color: var(--blanco);
	text-align: center;
}

.reach-cierre__inner {
	max-width: 820px;
	margin-inline: auto;
}

.reach-cierre :focus-visible {
	outline-color: var(--tinta);
}

.reach-cierre h2 {
	color: var(--blanco);
}

.reach-cierre h2 .hl {
	background: var(--amarillo);
	color: var(--tinta);
}

.reach-cierre .eyebrow::before {
	background: var(--naranja);
}

/* Blanco sobre naranja: se mantiene como texto grande y en negrita. */
.reach-cierre .reach-support {
	font-family: var(--titulares);
	font-size: 1.5rem;
	font-weight: 700;
}

.reach-cierre__seats {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 1.75rem;
}

.reach-six--lg {
	display: flex;
	gap: clamp(6px, 1.5vw, 12px);
}

.reach-six--lg .reach-six__seat {
	width: clamp(30px, 8vw, 48px);
	height: clamp(30px, 8vw, 48px);
	overflow: hidden;
	background: var(--blanco);
	border: var(--borde-fuerte);
}

.reach-six--lg .reach-six__seat img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.reach-six--lg .reach-six__seat.is-empty {
	background: transparent;
	border: 3px dashed var(--blanco);
}

.reach-cierre__seats .reach-mascot {
	flex: none;
	width: clamp(96px, 22vw, 136px);
	margin-right: -30px;
}

/* ---------- Footer ---------- */

footer.wp-block-template-part {
	/* El footer es la única zona azul marino del sitio: el color vive aquí y no en la paleta. */
	--marino: #16294d;
	background: var(--marino);
	color: var(--blanco);
}

.reach-footer {
	/* La palabra REACH ocupa el ancho y solo asoma su mitad superior. */
	--palabra: 28.5vw;
	--palabra-visible: calc(var(--palabra) * 0.35);
	position: relative;
}

.reach-footer__inner {
	position: relative;
	z-index: 1;
	max-width: calc(var(--wrap) + var(--pad) * 2);
	margin-inline: auto;
	padding: 4rem var(--pad) 0;
}

.reach-footer :focus-visible {
	outline-color: var(--amarillo);
}

.reach-footer a {
	color: var(--blanco);
}

.reach-footer__cols {
	display: grid;
	gap: 2.5rem;
}

.reach-footer__slogan {
	margin: 0;
	font-family: var(--titulares);
	font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
	font-weight: 700;
	line-height: 1.15;
}

.reach-footer__small {
	margin: 0.25rem 0 0;
	font-size: 0.9375rem;
}

.reach-footer__title {
	margin: 0 0 0.875rem;
	color: var(--amarillo);
	font-family: var(--titulares);
	font-size: 0.8125rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.reach-footer address {
	display: grid;
	gap: 0.375rem;
	font-style: normal;
}

.reach-footer__map {
	overflow: hidden;
	border: 2px solid var(--blanco);
	border-radius: var(--r-tarjeta);
}

.reach-footer__map iframe {
	display: block;
	width: 100%;
	height: 220px;
	border: 0;
}

.reach-footer__map p {
	margin: 0;
	padding: 3rem 1.5rem;
	text-align: center;
}

.reach-footer__bottom {
	margin: 2rem 0 0;
	padding-top: 1.25rem;
	border-top: 1px solid rgb(255 255 255 / 0.3);
	font-size: 0.875rem;
}

/* Hueco donde se amontonan las cápsulas, encima de la palabra. */
.reach-footer__arena {
	height: calc(21rem + var(--palabra-visible));
}

/* El escenario cubre todo el footer: las cápsulas caen desde arriba, por delante del texto. */
.reach-footer__stage {
	position: absolute;
	inset: 0;
	z-index: 2;
	overflow: hidden;
	pointer-events: none;
}

.reach-footer__word {
	position: absolute;
	bottom: calc(var(--palabra) * -0.48);
	left: 50%;
	margin: 0;
	transform: translateX(-50%);
	color: var(--blanco);
	font-family: var(--titulares);
	font-size: var(--palabra);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.02em;
	white-space: nowrap;
	user-select: none;
}

.reach-footer__pills {
	position: absolute;
	right: var(--pad);
	bottom: calc(var(--palabra-visible) + 1rem);
	left: var(--pad);
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.reach-footer__pill {
	--c: var(--amarillo);
	display: block;
	padding: 0.5rem 1.375rem;
	background: var(--marino);
	border: 2px solid var(--c);
	border-radius: 999px;
	color: var(--c);
	font-family: var(--titulares);
	font-size: 1.1875rem;
	font-weight: 700;
	line-height: 1.3;
	text-decoration: none;
	white-space: nowrap;
	pointer-events: auto;
	user-select: none;
	-webkit-user-drag: none;
}

.reach-footer a.reach-footer__pill {
	color: var(--c);
	transition: background-color 0.15s, color 0.15s;
}

.reach-footer a.reach-footer__pill:hover,
.reach-footer a.reach-footer__pill.is-dragging {
	background: var(--c);
	color: var(--marino);
}

.reach-footer__pill.is-dragging {
	cursor: grabbing;
}

.reach-footer__pill.is-c1 { --c: var(--rosa); }
.reach-footer__pill.is-c2 { --c: var(--menta); }
.reach-footer__pill.is-c3 { --c: var(--naranja); }
.reach-footer__pill.is-c4 { --c: var(--cielo); }
.reach-footer__pill.is-c5 { --c: var(--lila); }

/* Con la física activa, footer.js coloca cada cápsula con transform. */
.reach-footer.is-live .reach-footer__pills {
	inset: 0;
	display: block;
}

.reach-footer.is-live .reach-footer__pills li {
	position: absolute;
	top: 0;
	left: 0;
	will-change: transform;
}

@media (min-width: 800px) {
	.reach-footer__cols {
		grid-template-columns: 1.3fr 1fr 1.2fr;
		align-items: start;
	}

	.reach-footer__arena {
		height: calc(15rem + var(--palabra-visible));
	}
}

.reach-wa {
	position: fixed;
	right: 1rem;
	bottom: 1rem;
	z-index: 60;
	display: grid;
	place-items: center;
	width: 60px;
	height: 60px;
	background: #25d366;
	border: 0;
	border-radius: 50%;
	box-shadow: 0 12px 30px -14px rgba(0, 0, 0, 0.5);
	color: var(--tinta);
	transition: transform 0.15s ease;
}

.reach-wa:hover {
	transform: scale(1.06);
}

.reach-wa .reach-icon {
	width: 34px;
	height: 34px;
}

/* ---------- Animaciones ---------- */

@keyframes reach-pop {
	from { transform: translateX(-50%) scale(0); }
	to { transform: translateX(-50%) scale(1); }
}

@keyframes reach-hop {
	50% { transform: translateY(-8px); }
}

@keyframes reach-tilt {
	50% { transform: rotate(-10deg); }
}

@keyframes reach-jump {
	50% { transform: translateY(-18px) rotate(-4deg); }
}

@keyframes reach-float {
	50% { transform: translateY(-8px); }
}

@keyframes reach-bounce {
	from { transform: scale(0); }
	to { transform: scale(1); }
}

@keyframes reach-confetti {
	to {
		opacity: 0;
		transform: translate(var(--drift), 560px) rotate(var(--turn));
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation: none !important;
		transition: none !important;
	}
}

/* ---------- Página: Cómo funciona ---------- */

.reach-metodo {
	--naranja-texto: #b02700;
	--suave: var(--tinta-suave);
	--beige: var(--superficie);

	display: grid;
	gap: clamp(4rem, 8vw, 6rem);
	padding: clamp(2.5rem, 6vw, 4rem) var(--pad) clamp(4rem, 8vw, 6rem);
}

.metodo-sec {
	width: 100%;
	max-width: var(--wrap);
	margin-inline: auto;
}

.reach-metodo h1,
.reach-metodo h2,
.reach-metodo h3,
.reach-metodo p {
	margin-block: 0;
}

.reach-metodo .reach-icon {
	width: 1.25em;
	height: 1.25em;
}

.metodo-kicker {
	color: var(--naranja-texto);
	font-family: var(--titulares);
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	line-height: 1.35;
	text-transform: uppercase;
}

/* Encabezado */

.metodo-hero {
	display: flex;
	flex-direction: column;
	gap: 2.5rem;
}

.metodo-hero__copy {
	display: grid;
	gap: 1rem;
	max-width: 780px;
}

.metodo-hero .eyebrow {
	background: var(--amarillo);
}

.metodo-hero .eyebrow::before {
	background: var(--naranja);
}

.metodo-hero h1 {
	text-wrap: balance;
}

.metodo-hero h1 .hl,
.metodo-cta h2 .hl {
	display: inline-block;
	margin-block: 0.1em;
	padding: 0.05em 0.25em 0.1em;
	background: var(--naranja);
	border: var(--borde);
	border-radius: 12px;
	color: var(--blanco);
	transform: rotate(-1deg);
}

.metodo-hero__lead {
	max-width: 660px;
	font-size: 1.125rem;
}

.metodo-sticker {
	position: relative;
	flex: none;
	align-self: flex-start;
	max-width: 280px;
	margin-top: 0.75rem;
	padding: 1.25rem;
	background: var(--blanco);
	border: var(--borde-fuerte);
	border-radius: 24px;
	text-align: center;
	transform: rotate(2deg);
}

.metodo-sticker__badge {
	position: absolute;
	top: -16px;
	right: -12px;
	display: flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0.2rem 0.75rem;
	background: var(--amarillo);
	border: var(--borde);
	border-radius: 999px;
	font-family: var(--titulares);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.metodo-sticker__icon {
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	margin: 0 auto 0.75rem;
	background: var(--cielo);
	border: var(--borde);
	border-radius: 50%;
	color: var(--azul);
}

.metodo-sticker__icon .reach-icon {
	width: 34px;
	height: 34px;
}

.metodo-sticker__title {
	margin-bottom: 0.25rem !important;
	font-family: var(--titulares);
	font-size: 1.375rem;
	font-weight: 600;
	line-height: 1.2;
}

.metodo-sticker__text {
	color: var(--suave);
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.45;
}

/* Los 3 pasos */

.metodo-steps__head {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin-bottom: 2rem;
	padding-bottom: 1rem;
	border-bottom: var(--borde);
}

.metodo-steps__badge {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	width: fit-content;
	padding: 0.5rem 1rem;
	background: var(--blanco);
	border: var(--borde);
	border-radius: 999px;
	font-family: var(--titulares);
	font-size: 0.875rem;
	font-weight: 700;
}

.metodo-steps__badge .reach-icon {
	border-radius: 50%;
	background: var(--menta);
}

.metodo-cards {
	display: grid;
	gap: 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.metodo-card {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 1.5rem;
	background: var(--blanco);
	border: var(--borde-fuerte);
	border-radius: 20px;
}

.metodo-card__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-bottom: 1rem !important;
}

.metodo-card__num {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border: var(--borde);
	border-radius: 14px;
	font-family: var(--titulares);
	font-size: 1.5rem;
	font-weight: 800;
	line-height: 1;
}

.metodo-card__num.is-azul {
	background: var(--azul);
	color: var(--blanco);
}

.metodo-card__num.is-naranja {
	background: var(--naranja);
	color: var(--blanco);
}

.metodo-card__num.is-amarillo {
	background: var(--amarillo);
}

.metodo-card__tag,
.metodo-card__pill,
.metodo-cta__tag {
	font-family: var(--titulares);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.25;
}

.metodo-card__tag {
	padding: 0.25rem 0.75rem;
	background: var(--superficie);
	border: var(--borde);
	border-radius: 999px;
	text-transform: uppercase;
}

.metodo-card__tag.is-navy {
	background: var(--tinta);
	color: var(--blanco);
}

.metodo-card__tag.is-menta {
	background: var(--menta);
}

.metodo-card h3 {
	margin-bottom: 0.75rem;
	font-size: 1.75rem;
	line-height: 1.3;
}

.metodo-card__text {
	margin-bottom: 1.25rem !important;
	color: var(--suave);
}

.metodo-card__pill {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 1.5rem !important;
	padding: 0.375rem 0.875rem;
	background: var(--superficie);
	border: var(--borde);
	border-radius: 999px;
}

.metodo-card__pill.is-warn {
	color: var(--naranja-texto);
}

.metodo-card__pill.is-azul .reach-icon {
	color: var(--azul);
}

.metodo-card__pill.is-naranja .reach-icon {
	color: var(--naranja);
}

.metodo-card__pill .reach-icon {
	flex: none;
}

.metodo-mini {
	display: grid;
	gap: 0.625rem;
	padding: 1rem;
	background: var(--superficie);
	border: var(--borde);
	border-radius: var(--r-tarjeta);
}

.metodo-mini__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	color: var(--suave);
	font-family: var(--titulares);
	font-size: 0.6875rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.metodo-mini b {
	flex: none;
	padding: 0.125rem 0.5rem;
	border: var(--borde);
	border-radius: 999px;
	color: var(--tinta);
	font-family: var(--texto);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.4;
}

.metodo-mini b.is-menta {
	background: var(--menta);
}

.metodo-mini b.is-navy {
	background: var(--tinta);
	color: var(--blanco);
}

.metodo-mini b.is-durazno {
	background: var(--durazno);
	color: var(--naranja-texto);
}

.metodo-mini b.is-azul {
	background: var(--cielo);
}

.metodo-mini__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.5rem 0.625rem;
	background: var(--blanco);
	border: var(--borde);
	border-radius: 10px;
	font-size: 0.75rem;
	font-weight: 500;
}

.metodo-mini__row--level {
	justify-content: flex-start;
}

.metodo-mini__row--level > b {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	padding: 0;
	background: var(--durazno);
	border-radius: 50%;
	color: var(--naranja-texto);
	font-size: 0.875rem;
}

.metodo-mini__row--level strong,
.metodo-mini__row--level p span {
	display: block;
}

.metodo-mini__row--level strong {
	font-family: var(--titulares);
	font-size: 0.875rem;
}

.metodo-mini__row--level p span {
	color: var(--suave);
}

.metodo-mini__seats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.5rem;
}

.metodo-mini__seats p {
	padding: 0.5rem 0.25rem;
	background: var(--blanco);
	border: var(--borde);
	border-radius: 10px;
	text-align: center;
	line-height: 1.3;
}

.metodo-mini__seats strong,
.metodo-mini__seats span {
	display: block;
}

.metodo-mini__seats strong {
	font-size: 0.75rem;
}

.metodo-mini__seats span {
	color: var(--suave);
	font-size: 0.625rem;
}

.metodo-mini__seats .is-you {
	background: var(--amarillo);
}

.metodo-mini__seats .is-you span {
	color: var(--tinta);
	font-weight: 600;
}

.metodo-mini__seats .is-coach {
	background: var(--azul);
	color: var(--blanco);
}

.metodo-mini__seats .is-coach span {
	color: var(--blanco);
}

/* Anatomía de una clase */

.metodo-clase__head {
	display: grid;
	gap: 0.5rem;
	max-width: 700px;
	margin: 0 auto 1.5rem;
	text-align: center;
}

.metodo-clase__head .metodo-kicker {
	margin-inline: auto;
}

.metodo-clase__text {
	color: var(--suave);
}

.metodo-slab {
	position: relative;
	padding: clamp(1.5rem, 4vw, 2.5rem);
	background: var(--tinta);
	border: var(--borde-fuerte);
	border-radius: var(--r-bloque);
	color: var(--blanco);
}

.metodo-slab::after {
	content: "";
	position: absolute;
	bottom: -18px;
	left: 48px;
	border-top: 1px solid var(--linea);
	border-right: 14px solid transparent;
	border-left: 14px solid transparent;
}

.metodo-slab__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-bottom: 2rem;
	border-bottom: 1px solid rgb(255 255 255 / 0.2);
}

.metodo-slab__session {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.metodo-slab__clock {
	display: grid;
	flex: none;
	place-items: center;
	width: 40px;
	height: 40px;
	background: var(--naranja);
	border-radius: 50%;
}

.metodo-slab__session strong,
.metodo-slab__session p span {
	display: block;
}

.metodo-slab__session strong {
	font-family: var(--titulares);
	font-size: 1.375rem;
	font-weight: 600;
	line-height: 1.35;
}

.metodo-slab__session p span {
	color: rgb(255 255 255 / 0.75);
	font-size: 0.75rem;
}

.metodo-slab__badge {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.375rem 1rem;
	background: var(--amarillo);
	border: var(--borde);
	border-radius: 999px;
	color: var(--tinta);
	font-family: var(--titulares);
	font-size: 0.875rem;
	font-weight: 700;
}

.metodo-phases {
	display: grid;
	gap: 1.5rem;
	margin: 0;
	padding: 2rem 0 0;
	list-style: none;
}

.metodo-phase {
	--fase: var(--amarillo);

	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 1.25rem;
	background: rgb(255 255 255 / 0.05);
	border: 2px solid rgb(255 255 255 / 0.2);
	border-radius: 20px;
	transition: border-color 0.15s ease;
}

.metodo-phase:hover {
	border-color: var(--fase);
}

.metodo-phase.is-azul {
	--fase: var(--azul);
}

.metodo-phase.is-durazno {
	--fase: var(--durazno);
}

.metodo-phase.is-menta {
	--fase: var(--menta);
}

.metodo-phase__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	margin-bottom: 0.75rem !important;
}

.metodo-phase__time {
	padding: 0.25rem 0.75rem;
	background: var(--fase);
	border-radius: 999px;
	color: var(--tinta);
	font-family: var(--titulares);
	font-size: 0.75rem;
	font-weight: 800;
}

.metodo-phase.is-azul .metodo-phase__time {
	color: var(--blanco);
}

.metodo-phase__n {
	color: rgb(255 255 255 / 0.6);
	font-family: var(--titulares);
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.metodo-phase h3 {
	margin-bottom: 0.5rem;
	color: var(--blanco);
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.35;
}

.metodo-phase__text {
	color: rgb(255 255 255 / 0.85);
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.45;
}

.metodo-phase__foot {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 1rem !important;
	padding-top: 0.75rem;
	border-top: 1px solid rgb(255 255 255 / 0.1);
	color: var(--fase);
	font-size: 0.75rem;
	font-weight: 500;
}

.metodo-phase.is-azul .metodo-phase__foot {
	color: var(--cielo);
}

/* Cierre */

.metodo-cta {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2rem;
	padding: clamp(2rem, 5vw, 3rem);
	overflow: hidden;
	background: var(--superficie);
	border: var(--borde-fuerte);
	border-radius: 24px;
}

.metodo-cta::after {
	content: "";
	position: absolute;
	right: -32px;
	bottom: -32px;
	width: 160px;
	height: 160px;
	border-radius: 50%;
	background: var(--durazno);
	opacity: 0.5;
	pointer-events: none;
}

.metodo-cta__copy {
	position: relative;
	z-index: 1;
	display: grid;
	gap: 0.75rem;
	max-width: 620px;
}

.metodo-cta__tag {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	width: fit-content;
	padding: 0.25rem 0.75rem;
	background: var(--blanco);
	border: var(--borde);
	border-radius: 999px;
	text-transform: uppercase;
}

.metodo-cta__tag .reach-icon {
	color: var(--naranja);
}

.metodo-cta__text {
	color: var(--suave);
}

.metodo-cta__actions {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	flex: none;
	gap: 1rem;
	width: 100%;
}

@media (min-width: 640px) {
	.metodo-cta__actions {
		flex-direction: row;
		width: auto;
	}
}

@media (min-width: 760px) {
	.metodo-steps__head {
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
	}

	.metodo-phases {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.metodo-hero {
		flex-direction: row;
		justify-content: space-between;
	}

	.metodo-cards {
		grid-template-columns: repeat(3, 1fr);
	}

	.metodo-phases {
		grid-template-columns: repeat(4, 1fr);
	}

	.metodo-cta {
		flex-direction: row;
		justify-content: space-between;
	}
}

@media (min-width: 1024px) {
	.metodo-cta__actions {
		flex-direction: column;
	}
}

/* ---------- Página: Profesores ---------- */

.btn--navy {
	background: var(--tinta);
	color: var(--blanco);
}

.btn--navy:hover {
	background: var(--azul);
}

.reach-equipo ul,
.reach-equipo ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

.equipo-label {
	margin-bottom: 0.5rem !important;
	color: var(--suave);
	font-family: var(--titulares);
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	line-height: 1.35;
	text-transform: uppercase;
}

/* Encabezado */

.equipo-hero__copy {
	display: grid;
	justify-items: center;
	gap: 1.5rem;
	max-width: 56rem;
	margin-inline: auto;
	text-align: center;
}

.equipo-hero .eyebrow {
	background: var(--amarillo);
}

.equipo-hero .eyebrow::before {
	background: var(--naranja);
}

.equipo-hero h1 {
	text-wrap: balance;
}

.equipo-hero h1 .hl {
	display: inline-block;
	padding: 0.02em 0.2em 0.06em;
	background: #e5e7eb;
	border: var(--borde);
	border-radius: 12px;
	transform: rotate(-1deg);
}

.equipo-hero__lead {
	max-width: 48rem;
	color: var(--suave);
	font-size: 1.125rem;
}

.equipo-hero__pill {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.25rem 0.75rem;
	background: var(--tinta);
	border: var(--borde);
	border-radius: 999px;
	color: var(--blanco);
	font-family: var(--titulares);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.25;
	text-transform: uppercase;
}

.equipo-metrics {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
	margin-top: 3rem !important;
}

.equipo-metrics li {
	display: flex;
	flex-direction: column;
	padding: 1rem;
	background: var(--blanco);
	border: var(--borde);
	border-radius: var(--r-tarjeta);
}

.equipo-metrics__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	margin-bottom: 0.5rem !important;
	color: var(--naranja-texto);
}

.equipo-metrics__top .reach-icon {
	width: 24px;
	height: 24px;
}

.equipo-metrics__top span {
	padding: 0.125rem 0.5rem;
	background: var(--superficie);
	border-radius: 999px;
	color: var(--tinta);
	font-family: var(--titulares);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.04em;
}

.equipo-metrics__top span.is-amarillo {
	background: var(--amarillo);
}

.equipo-metrics__value {
	margin-top: auto !important;
	font-family: var(--titulares);
	font-size: clamp(1.375rem, 1rem + 1.6vw, 2rem);
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.2;
}

.equipo-metrics__text {
	margin-top: 0.25rem !important;
	color: var(--suave);
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.45;
}

/* Filtros */

.equipo-filters {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin-bottom: 2.5rem;
	padding: 1rem;
	background: var(--superficie);
	border: var(--borde);
	border-radius: var(--r-tarjeta);
}

.equipo-filters__label {
	display: flex;
	flex: none;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--titulares);
	font-weight: 700;
}

.equipo-filters__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.equipo-filter {
	min-height: 40px;
	padding: 0.5rem 1rem;
	background: var(--blanco);
	border: var(--borde);
	border-radius: 12px;
	color: var(--tinta);
	font-family: var(--titulares);
	font-size: 0.875rem;
	font-weight: 700;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.equipo-filter:hover {
	background: var(--superficie);
}

.equipo-filter.is-active {
	background: var(--tinta);
	color: var(--blanco);
}

/* Perfiles */

.equipo-cards {
	display: grid;
	gap: 2.5rem;
}

.equipo-card {
	display: grid;
	gap: 2rem;
	padding: clamp(1.5rem, 3vw, 2rem);
	background: var(--blanco);
	border: var(--borde);
	border-radius: 24px;
}

.equipo-card[hidden] {
	display: none;
}

.equipo-card__left,
.equipo-card__right {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 1.5rem;
	min-width: 0;
}

.equipo-card__top,
.equipo-card__body {
	display: grid;
	gap: 1.5rem;
}

.equipo-card__top {
	gap: 1rem;
}

.equipo-card__frame {
	position: relative;
	aspect-ratio: 1;
	overflow: hidden;
	background: var(--superficie);
	border: var(--borde);
	border-radius: var(--r-tarjeta);
}

.equipo-card__photo {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.equipo-card__photo.is-empty {
	display: grid;
	place-items: end center;
	background: var(--cielo);
}

.equipo-card__photo.is-empty svg {
	width: 70%;
	fill: var(--blanco);
	stroke: var(--tinta);
	stroke-width: 1;
}

.equipo-card__place,
.equipo-card__years {
	position: absolute;
	padding: 0.25rem 0.75rem;
	border-radius: 999px;
	font-family: var(--titulares);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.25;
}

.equipo-card__place {
	top: 0.75rem;
	left: 0.75rem;
	background: var(--amarillo);
	border: var(--borde);
}

.equipo-card__years {
	right: 0.75rem;
	bottom: 0.75rem;
	background: var(--tinta);
	color: var(--blanco);
}

.equipo-card__demo {
	width: fit-content;
	margin-bottom: 0.5rem !important;
	padding: 0.125rem 0.625rem;
	border: 1px dashed var(--linea);
	border-radius: 999px;
	font-family: var(--titulares);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.equipo-card h2 {
	font-size: 1.75rem;
	line-height: 1.3;
}

.equipo-card__role {
	color: var(--naranja-texto);
	font-family: var(--titulares);
	font-weight: 700;
	line-height: 1.3;
}

.equipo-card__accent {
	display: flex;
	align-items: flex-start;
	gap: 0.375rem;
	margin-top: 0.375rem !important;
	color: var(--suave);
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.45;
}

.equipo-card__accent .reach-icon {
	flex: none;
	margin-top: 0.1em;
}

.equipo-cohort {
	display: grid;
	gap: 0.75rem;
	padding: 1rem;
	background: var(--superficie);
	border: var(--borde);
	border-radius: var(--r-tarjeta);
}

.equipo-cohort__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	font-family: var(--titulares);
}

.equipo-cohort__head span {
	padding: 0.125rem 0.5rem;
	background: var(--superficie);
	border-radius: 999px;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.04em;
}

.equipo-cohort__head span.is-durazno {
	background: var(--durazno);
	color: var(--naranja-texto);
}

.equipo-cohort__head span.is-amarillo {
	background: var(--amarillo);
}

.equipo-cohort__head span.is-azul {
	background: var(--azul);
	color: var(--blanco);
}

.equipo-cohort__text {
	color: var(--suave);
	font-size: 0.875rem;
	line-height: 1.45;
}

.equipo-cohort__text strong {
	color: var(--tinta);
}

.equipo-cohort__seats {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 0.375rem;
}

.equipo-cohort__seats span {
	display: grid;
	place-items: center;
	height: 32px;
	background: var(--tinta);
	border: var(--borde);
	border-radius: 8px;
	color: var(--blanco);
	font-size: 0.75rem;
	font-weight: 700;
}

.equipo-cohort__seats .is-free {
	background: var(--superficie);
	border-style: dashed;
	color: var(--naranja-texto);
	font-size: 0.625rem;
	font-weight: 800;
	text-transform: uppercase;
}

.equipo-creds {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.equipo-creds li {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.25rem 0.75rem;
	background: var(--superficie);
	border: var(--borde);
	border-radius: 12px;
	font-family: var(--titulares);
	font-size: 0.75rem;
	font-weight: 700;
}

.equipo-creds .reach-icon,
.equipo-classes .reach-icon,
.equipo-audio__head .reach-icon {
	flex: none;
	color: var(--naranja-texto);
}

.equipo-audio {
	display: grid;
	gap: 0.75rem;
	padding: 1rem;
	background: var(--superficie);
	border: var(--borde);
	border-radius: var(--r-tarjeta);
}

.equipo-audio__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 0.75rem;
	font-family: var(--titulares);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1.35;
	text-transform: uppercase;
}

.equipo-audio__head > span:first-child .reach-icon {
	margin-right: 0.375rem;
	vertical-align: -0.2em;
}

.equipo-audio__time {
	flex: none;
	font-family: ui-monospace, Consolas, monospace;
	font-size: 0.75rem;
	letter-spacing: 0;
}

.equipo-audio__row {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.equipo-audio__play {
	display: grid;
	flex: none;
	place-items: center;
	width: 48px;
	height: 48px;
	background: var(--naranja);
	border: var(--borde);
	border-radius: 12px;
	color: var(--blanco);
	cursor: pointer;
}

.equipo-audio__play:disabled {
	cursor: default;
}

.equipo-audio__play .reach-icon {
	width: 24px;
	height: 24px;
}

.equipo-audio__wave {
	display: flex;
	flex: 1;
	align-items: center;
	gap: 0.25rem;
	height: 32px;
}

.equipo-audio__wave span {
	width: 6px;
	border-radius: 999px;
	background: var(--tinta);
}

.equipo-audio__caption {
	color: var(--suave);
	font-size: 0.875rem;
	font-style: italic;
	font-weight: 500;
	line-height: 1.45;
}

.equipo-quote {
	margin: 0;
	padding: 1rem;
	background: var(--superficie);
	border-left: 4px solid var(--naranja);
	border-radius: var(--r-tarjeta);
	font-style: italic;
}

.equipo-classes {
	display: grid;
	gap: 0.75rem;
}

.equipo-classes li {
	padding: 0.75rem;
	border: var(--borde);
	border-radius: 12px;
}

.equipo-classes .reach-icon {
	display: block;
	width: 18px;
	height: 18px;
	margin-bottom: 0.25rem;
}

.equipo-classes h3 {
	font-size: 0.8125rem;
	line-height: 1.35;
}

.equipo-classes p {
	margin-top: 0.125rem !important;
	color: var(--suave);
	font-size: 0.75rem;
	line-height: 1.45;
}

.equipo-card__foot {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	padding-top: 1rem;
	border-top: 2px solid var(--linea);
}

.equipo-card__foot > p {
	color: var(--suave);
	font-size: 0.875rem;
	line-height: 1.45;
}

.equipo-card__foot strong {
	color: var(--tinta);
}

.equipo-card__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.equipo-card__actions .btn {
	flex: 1 1 auto;
}

/* Teaching Code */

.equipo-code {
	padding: clamp(2rem, 5vw, 3rem);
	background: var(--superficie);
	border: var(--borde);
	border-radius: 24px;
}

.equipo-code__head {
	display: grid;
	gap: 0.75rem;
	max-width: 42rem;
	margin-bottom: 2.5rem;
}

.equipo-code__tag {
	width: fit-content;
	padding: 0.25rem 0.75rem;
	background: var(--tinta);
	border-radius: 999px;
	color: var(--blanco);
	font-family: var(--titulares);
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.equipo-code__text {
	color: var(--suave);
}

.equipo-code__grid {
	display: grid;
	gap: 1.5rem;
}

.equipo-code__grid li {
	display: grid;
	align-content: start;
	gap: 0.75rem;
	padding: 1.5rem;
	background: var(--blanco);
	border: var(--borde);
	border-radius: var(--r-tarjeta);
}

.equipo-code__num {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border: var(--borde);
	border-radius: 12px;
	color: var(--blanco);
	font-family: var(--titulares);
	font-size: var(--texto-sobre-naranja);
	font-weight: 700;
	line-height: 1;
}

.equipo-code__num.is-naranja {
	background: var(--naranja);
}

.equipo-code__num.is-navy {
	background: var(--tinta);
}

.equipo-code__num.is-azul {
	background: var(--azul);
}

.equipo-code__num.is-amarillo {
	background: var(--amarillo);
	color: var(--tinta);
}

.equipo-code__grid p {
	color: var(--suave);
}

/* Cierre */

.equipo-cta {
	padding: clamp(2rem, 6vw, 3.5rem);
	background: var(--tinta);
	border: var(--borde-fuerte);
	border-radius: 24px;
	color: var(--blanco);
}

.equipo-cta__copy {
	display: grid;
	gap: 1.5rem;
	max-width: 48rem;
}

.equipo-cta__tag {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	width: fit-content;
	padding: 0.375rem 1rem;
	background: var(--amarillo);
	border: var(--borde);
	border-radius: 999px;
	color: var(--tinta);
	font-family: var(--titulares);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.equipo-cta h2 {
	color: var(--blanco);
}

.equipo-cta__text {
	color: rgb(255 255 255 / 0.85);
	font-size: 1.125rem;
}

.equipo-cta__actions {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin-top: 2rem;
}

.equipo-cta__ghost {
	background: transparent;
	border-color: var(--blanco);
	color: var(--blanco);
}

.equipo-cta__ghost:hover {
	background: rgb(255 255 255 / 0.1);
}

.equipo-cta :focus-visible {
	outline-color: var(--amarillo);
}

.equipo-cta__trust {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1.5rem;
	margin-top: 2rem !important;
	padding-top: 1.5rem !important;
	border-top: 1px solid rgb(255 255 255 / 0.2);
	color: rgb(255 255 255 / 0.8);
	font-size: 0.875rem;
}

.equipo-cta__trust li {
	display: flex;
	align-items: center;
	gap: 0.375rem;
}

.equipo-cta__trust .reach-icon {
	color: var(--amarillo);
}

@media (min-width: 640px) {
	.equipo-card__foot {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.equipo-card__actions {
		flex: none;
	}

	.equipo-cta__actions {
		flex-direction: row;
		flex-wrap: wrap;
	}
}

@media (min-width: 760px) {
	.equipo-metrics {
		grid-template-columns: repeat(4, 1fr);
		gap: 1.5rem;
	}

	.equipo-metrics li {
		padding: 1.5rem;
	}

	.equipo-classes {
		grid-template-columns: repeat(3, 1fr);
	}

	.equipo-code__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.equipo-filters {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.equipo-card {
		grid-template-columns: 1fr 2fr;
	}
}

.equipo-metrics__top span {
	white-space: nowrap;
}

@media (max-width: 479px) {
	.equipo-metrics__top span {
		padding-inline: 0.375rem;
		font-size: 0.6875rem;
		letter-spacing: 0;
	}
}

/* Reto: selector de nivel (un intento por nivel y día). */
.reto__levels {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
	max-width: 30rem;
}

.reto__level {
	display: grid;
	gap: 0.125rem;
	min-width: 5.25rem;
	padding: 0.625rem 0.875rem;
	background: var(--blanco);
	border: 2px solid currentColor;
	border-radius: 1rem;
	color: inherit;
	font: inherit;
	text-align: center;
	cursor: pointer;
	transition: transform 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.reto__level b {
	font-family: var(--titulares);
	font-size: 1.25rem;
	line-height: 1;
}

.reto__level span {
	font-size: 0.75rem;
	font-weight: 600;
}

.reto__level:hover:not(:disabled),
.reto__level:focus-visible {
	background: var(--naranja);
	border-color: var(--naranja);
	color: var(--blanco);
	transform: translateY(-2px);
}

.reto__level:disabled,
.reto__level.is-used {
	opacity: 0.4;
	cursor: not-allowed;
	text-decoration: line-through;
}

.reto__level[hidden] {
	display: none;
}

/* ---------- Reto de ubicación (página privada) ---------- */

/* La plantilla ya imprime el título de la página; aquí lo lleva el encabezado propio. */
.reach-page:has(.ubi) .wp-block-post-title {
	display: none;
}

.ubi {
	--ubi-gap: clamp(0.5rem, 1.2vw, 0.875rem);
	text-align: left;
}

.reach-section.ubi {
	padding-block: clamp(1.5rem, 3vw, 2.5rem);
}

/* Encabezado: título a la izquierda y el descuento acumulado a la derecha, sin tarjeta de métrica. */
.ubi-top {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.25rem 2rem;
}

.ubi-top__copy {
	max-width: 36rem;
}

.ubi-top h1 {
	margin: 0;
	font-size: clamp(2.25rem, 5.5vw, 3.75rem);
	line-height: 1;
	text-wrap: balance;
}

.ubi-top p {
	margin: 0.75rem 0 0;
	font-size: 1.0625rem;
	color: var(--tinta-suave);
	text-wrap: pretty;
}

.ubi-total {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	margin: 0;
	padding: 0.75rem 1.5rem 0.75rem 1.25rem;
	background: var(--tinta);
	border-radius: 999px;
	color: var(--blanco);
}

.ubi-top .ubi-total {
	margin: 0;
	color: var(--blanco);
}

.ubi-total__num {
	font-family: var(--titulares);
	font-size: clamp(2.5rem, 6vw, 3.5rem);
	font-weight: 800;
	line-height: 1;
	color: var(--amarillo);
	font-variant-numeric: tabular-nums;
}

.ubi-total__txt {
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.25;
}

/* Escalera: cinco escalones que suben de izquierda a derecha, como los niveles de la home. */
.ubi-stairs {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	align-items: end;
	gap: var(--ubi-gap);
	margin: clamp(1.5rem, 3.5vw, 2.5rem) 0 0;
	padding: 0;
	list-style: none;
}

.ubi-step {
	--c: var(--superficie);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 1.25rem;
	min-height: calc(11.5rem + var(--n) * 2.5rem);
	padding: 1.125rem;
	background: var(--superficie);
	border-radius: var(--r-tarjeta);
	transition: background-color 0.25s ease, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.ubi-step:nth-child(1) { --c: var(--menta); }
.ubi-step:nth-child(2) { --c: var(--amarillo); }
.ubi-step:nth-child(3) { --c: var(--cielo); }
.ubi-step:nth-child(4) { --c: var(--rosa); }
.ubi-step:nth-child(5) { --c: var(--naranja); }

.ubi-step__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
}

.ubi-step__code {
	padding: 0.25rem 0.75rem;
	background: var(--blanco);
	border-radius: 999px;
	font-family: var(--titulares);
	font-size: 0.9375rem;
	font-weight: 800;
	letter-spacing: 0.02em;
}

.ubi-step__tick {
	display: none;
	width: 1.75rem;
	height: 1.75rem;
	padding: 0.3rem;
	background: var(--tinta);
	border-radius: 50%;
	color: var(--blanco);
}

.ubi-step__tick svg {
	width: 100%;
	height: 100%;
	fill: none;
	stroke: currentColor;
	stroke-width: 3;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.ubi-step__body h3 {
	margin: 0;
	font-size: clamp(1.25rem, 2vw, 1.625rem);
	line-height: 1.1;
}

.ubi-step__goal {
	margin: 0.25rem 0 0;
	font-size: 0.9375rem;
	line-height: 1.3;
}

.ubi-step__prize {
	margin: 0.75rem 0 0;
	font-family: var(--titulares);
	font-size: 1.5rem;
	font-weight: 800;
	line-height: 1;
}

.ubi-step__prize span {
	display: block;
	margin-top: 0.125rem;
	font-family: var(--texto);
	font-size: 0.75rem;
	font-weight: 600;
}

.ubi-step__btn {
	justify-content: center;
	width: 100%;
	background: var(--tinta);
	border-color: var(--tinta);
	color: var(--blanco);
}

.ubi-step__btn:disabled {
	background: transparent;
	border-color: transparent;
	color: inherit;
	opacity: 0.7;
	cursor: not-allowed;
}

.ubi-step.is-locked {
	color: var(--tinta-suave);
}

.ubi-step.is-active {
	background: var(--c);
	color: var(--tinta);
	transform: translateY(-0.5rem);
}

.ubi-step.is-won {
	background: var(--menta);
	color: var(--tinta);
}

.ubi-step.is-won .ubi-step__tick {
	display: block;
}

.ubi-step.is-won .ubi-step__btn,
.ubi-step.is-failed .ubi-step__btn {
	opacity: 1;
	font-weight: 700;
}

.ubi-step.is-failed {
	background: var(--durazno);
	color: var(--tinta);
}

.ubi-foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 1.75rem;
}

.ubi-note {
	max-width: 34rem;
	margin: 0;
	color: var(--tinta-suave);
}

.ubi-foot__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.ubi-foot__actions [hidden] {
	display: none;
}

/* Ventana de juego: título y avance de preguntas. */
.ubi-bar {
	display: grid;
	gap: 0.5rem;
}

.ubi-q {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	margin: 0;
}

.ubi-dialog.is-form .ubi-q {
	display: none;
}

.ubi-q__pip {
	width: 0.625rem;
	height: 0.625rem;
	background: var(--linea);
	border-radius: 50%;
	transition: background-color 0.2s ease;
}

.ubi-q__pip.is-now {
	background: var(--naranja);
}

.ubi-q__pip.is-done {
	background: var(--menta);
}

.ubi-q__txt {
	margin-left: 0.25rem;
	font-family: var(--titulares);
	font-size: 1rem;
	font-weight: 700;
}

.ubi-result {
	position: absolute;
	inset: 0;
	z-index: 5;
	display: grid;
	place-content: center;
	justify-items: center;
	gap: 0.5rem;
	padding: 1rem;
	background: rgba(243, 244, 246, 0.96);
	text-align: center;
}

.ubi-result[hidden] {
	display: none;
}

.ubi-result__title {
	margin: 0;
	font-family: var(--titulares);
	font-size: clamp(1.5rem, 5vw, 2.25rem);
	font-weight: 800;
	line-height: 1.05;
	text-wrap: balance;
}

.ubi-result__text {
	max-width: 24rem;
	margin: 0;
	text-wrap: pretty;
}

.ubi-result__total {
	display: grid;
	margin: 0.25rem 0;
	font-family: var(--titulares);
	font-size: 2.5rem;
	font-weight: 800;
	line-height: 1;
	color: var(--naranja);
}

.ubi-result__num {
	display: block;
	font-variant-numeric: tabular-nums;
}

.ubi-result__total small {
	font-family: var(--texto);
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--tinta-suave);
}

/* Formulario y cierre: reemplazan al juego dentro de la misma ventana. */
.ubi-form,
.ubi-thanks {
	display: grid;
	gap: 1rem;
	padding: 1rem 1.25rem 1.5rem;
}

.ubi-form[hidden],
.ubi-thanks[hidden] {
	display: none;
}

.ubi-form__title,
.ubi-thanks__title {
	margin: 0;
	font-family: var(--titulares);
	font-size: clamp(1.5rem, 4vw, 2rem);
	font-weight: 800;
	line-height: 1.05;
}

.ubi-form__summary,
.ubi-thanks__text {
	margin: 0;
	color: var(--tinta-suave);
	text-wrap: pretty;
}

.ubi-form__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.875rem;
}

.ubi-form__wide {
	grid-column: 1 / -1;
}

.ubi-form__error {
	margin: 0;
	padding: 0.625rem 0.875rem;
	background: var(--durazno);
	border-radius: 12px;
	font-weight: 600;
}

.ubi-form__error[hidden] {
	display: none;
}

.ubi-form .btn,
.ubi-thanks .btn {
	justify-self: start;
}

@media (max-width: 899px) {
	.ubi-stairs {
		grid-template-columns: 1fr;
	}

	.ubi-step {
		display: grid;
		grid-template-columns: auto 1fr;
		grid-template-areas: "head body" "btn btn";
		align-items: start;
		gap: 0.75rem 1rem;
		min-height: 0;
	}

	.ubi-step__head {
		grid-area: head;
		flex-direction: column;
		align-items: flex-start;
	}

	.ubi-step__body {
		grid-area: body;
	}

	.ubi-step__btn {
		grid-area: btn;
	}

	.ubi-step.is-active {
		transform: none;
	}
}

@media (max-width: 520px) {
	.ubi-form__grid {
		grid-template-columns: 1fr;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ubi-step,
	.ubi-q__pip {
		transition: none;
	}
}

/* ---------- Friday Speaking Club (landing) ---------- */
.reach-club {
	padding: 0;
}

.reach-club > * {
	max-width: none;
	margin-inline: 0;
}

.reach-club__banner {
	position: relative;
	display: flex;
	align-items: center;
	min-height: clamp(26rem, 42vw, 32rem);
	overflow: hidden;
	/* De extremo a extremo; el texto se alinea con el ancho de contenido del resto del sitio. */
	padding-inline: max(var(--pad), calc((100% - var(--wrap)) / 2));
	background: var(--tinta);
	color: var(--blanco);
	text-align: left;
	isolation: isolate;
}

/* La foto ocupa la derecha y se funde con el fondo oscuro hacia la izquierda. */
.reach-club__photo {
	position: absolute;
	inset: 0 0 0 auto;
	z-index: -1;
	width: 72%;
	height: 100%;
	object-fit: cover;
	object-position: 42% 40%;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 42%);
	mask-image: linear-gradient(90deg, transparent 0, #000 42%);
}

.reach-club__copy {
	display: grid;
	justify-items: start;
	gap: 1.25rem;
	width: min(100%, 36rem);
	padding-block: clamp(2.5rem, 6vw, 4.5rem);
}

.reach-club__day {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	padding: 0.375rem 1rem 0.375rem 0.75rem;
	background: var(--durazno);
	border-radius: 999px;
	color: var(--tinta);
	font-family: var(--titulares);
	font-size: 0.9375rem;
	font-weight: 800;
}

.reach-club__day span {
	width: 0.5rem;
	height: 0.5rem;
	background: var(--naranja);
	border-radius: 50%;
}

.reach-club h2 {
	margin: 0;
	color: var(--blanco);
	font-size: clamp(2.25rem, 5.4vw, 4rem);
	line-height: 1;
	text-transform: uppercase;
	text-wrap: balance;
}

.reach-club__hl {
	color: var(--amarillo);
}

.reach-club__text {
	max-width: 28rem;
	margin: 0;
	font-size: 1.0625rem;
	line-height: 1.5;
	text-wrap: pretty;
}

.reach-club__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 1.5rem;
}

.reach-club__contact {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	color: var(--blanco);
	text-decoration: none;
}

.reach-club__contact-icon {
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	border: 1.5px solid rgba(255, 255, 255, 0.45);
	border-radius: 50%;
	color: var(--amarillo);
}

.reach-club__contact-icon svg {
	width: 1.375rem;
	height: 1.375rem;
}

.reach-club__contact-txt {
	display: grid;
	line-height: 1.2;
}

.reach-club__contact-txt small {
	font-size: 0.8125rem;
	opacity: 0.8;
}

.reach-club__contact-txt b {
	font-family: var(--titulares);
	font-size: 1.125rem;
	font-variant-numeric: tabular-nums;
}

.reach-club__contact:hover .reach-club__contact-icon {
	background: var(--amarillo);
	border-color: var(--amarillo);
	color: var(--tinta);
}

@media (max-width: 759px) {
	.reach-club__banner {
		flex-direction: column-reverse;
		align-items: stretch;
		justify-content: flex-end;
	}

	.reach-club__photo {
		position: relative;
		inset: auto;
		z-index: 0;
		width: 100%;
		height: 15rem;
		-webkit-mask-image: linear-gradient(0deg, transparent 0, #000 40%);
		mask-image: linear-gradient(0deg, transparent 0, #000 40%);
	}

	.reach-club__photo {
		margin-inline: calc(-1 * max(var(--pad), calc((100% - var(--wrap)) / 2)));
		width: calc(100% + 2 * max(var(--pad), calc((100% - var(--wrap)) / 2)));
	}

	.reach-club__copy {
		width: 100%;
		margin-top: -2.5rem;
		padding-top: 0;
	}
}