/* Componentes. Cada bloque documenta la decisión cuando no es evidente. */

/* --- Botones ---------------------------------------------------------- */
/* Solo dos jerarquías. El naranja señal aparece únicamente aquí: si algo es naranja, se pulsa. */

.boton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--e-2);
	min-height: 3rem;
	padding: var(--e-3) var(--e-6);
	font-family: var(--fuente-titulo);
	font-size: var(--txt-m);
	font-weight: var(--peso-fuerte);
	letter-spacing: -0.01em;
	text-decoration: none;
	border-radius: var(--radio);
	border: 2px solid transparent;
	cursor: pointer;
	transition:
		background-color var(--rapido) var(--curva),
		border-color var(--rapido) var(--curva),
		transform var(--rapido) var(--curva);
}

.boton--principal {
	background: var(--senal-boton);
	color: #fff;
}

.boton--principal:hover {
	background: var(--senal-boton-hover);
	transform: translateY(-1px);
}

.boton--secundaria {
	background: transparent;
	color: var(--texto);
	border-color: currentColor;
}

.boton--secundaria:hover {
	background: color-mix(in oklch, currentColor 10%, transparent);
	transform: translateY(-1px);
}

.acciones {
	display: flex;
	flex-wrap: wrap;
	gap: var(--e-3);
	margin-top: clamp(1.25rem, 3vh, 2rem);
}

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

/*
 * Cabecera flotante de cristal: no tiene fondo propio, flota por encima del
 * contenido y deja pasar lo que hay debajo. Quien pone el color es la página
 * — verde sobre el hero, crema al bajar — y el cristal solo lo aclara lo justo
 * para que el texto oscuro siga leyéndose sin fallar el contraste.
 */
.cabecera {
	position: fixed;
	inset: 0 0 auto;
	z-index: 100;
	/* 50px de aire por encima: la píldora tiene que flotar, no ir pegada al
	   borde de la pantalla. */
	padding-block: 50px clamp(0.6rem, 1.4vw, 1rem);
	background: transparent;
	pointer-events: none;
}

.cabecera__interior {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--e-4);
	min-height: 3.9rem;
	padding-inline: clamp(0.9rem, 2vw, 1.5rem);
	pointer-events: auto;
	border-radius: 999px;
	/* 70% y no menos: por debajo de ahí, cuando pasa un plano oscuro del vídeo,
	   el cristal se apaga y el texto en tinta baja del contraste mínimo AA. */
	background: color-mix(in oklch, var(--crema) 70%, transparent);
	/* La saturación alta es lo que da la sensación de líquido: el color de
	   debajo no se apaga al pasar por el cristal, se aviva. */
	backdrop-filter: blur(20px) saturate(180%);
	-webkit-backdrop-filter: blur(20px) saturate(180%);
	border: 1px solid color-mix(in oklch, var(--crema) 70%, transparent);
	box-shadow:
		0 1px 0 color-mix(in oklch, white 55%, transparent) inset,
		0 10px 30px oklch(0.2 0.03 150 / 0.18);
}

/* Sin soporte de backdrop-filter no hay cristal que valga: se cae a un fondo
   sólido antes que dejar el menú ilegible sobre el vídeo. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.cabecera__interior {
		background: var(--crema);
	}
}


.cabecera__marca {
	display: flex;
	align-items: center;
	gap: var(--e-3);
	text-decoration: none;
	font-family: var(--fuente-titulo);
	font-weight: var(--peso-macizo);
	font-size: var(--txt-m);
	line-height: 1.05;
	letter-spacing: -0.02em;
	color: var(--tinta);
}

.cabecera__logo {
	width: 3rem;
	height: auto;
	flex: none;
}

.cabecera__marca span {
	display: block;
	white-space: nowrap;
}

/* Sobre el cristal, el gris suave se queda corto de contraste: la jerarquía la
   marcan el tamaño y el peso, no un color más claro. */
.cabecera__marca small {
	display: block;
	font-family: var(--fuente-texto);
	font-size: var(--txt-xs);
	font-weight: var(--peso-medio);
	letter-spacing: 0;
	color: var(--tinta);
}

.navegacion ul {
	display: flex;
	align-items: center;
	gap: clamp(0.75rem, 1.6vw, 1.4rem);
	list-style: none;
	margin: 0;
	padding: 0;
}

.navegacion li {
	margin: 0;
}

/* Sin partir en dos líneas: dentro de la píldora, un enlace que hace salto de
   línea descuadra toda la cabecera. */
.navegacion a {
	font-weight: var(--peso-medio);
	font-size: var(--txt-s);
	text-decoration: none;
	padding-block: var(--e-2);
	white-space: nowrap;
}

.navegacion a:hover,
.navegacion .current-menu-item > a {
	text-decoration: underline;
	text-decoration-color: var(--senal);
	text-decoration-thickness: 2px;
}

.cabecera__acciones {
	display: flex;
	align-items: center;
	gap: var(--e-3);
}

/*
 * Dentro de una cabecera de píldora, un botón de esquinas rectas y un teléfono
 * suelto en texto plano cantan. Las dos acciones son píldoras con icono.
 */
.boton-pildora {
	display: inline-flex;
	align-items: center;
	gap: var(--e-2);
	min-height: 2.9rem;
	padding: 0 var(--e-5);
	border-radius: 999px;
	border: 1px solid transparent;
	font-family: var(--fuente-titulo);
	font-size: var(--txt-s);
	font-weight: var(--peso-fuerte);
	letter-spacing: -0.01em;
	white-space: nowrap;
	text-decoration: none;
	transition:
		background-color var(--rapido) var(--curva),
		border-color var(--rapido) var(--curva),
		transform var(--rapido) var(--curva);
}

.boton-pildora:hover {
	transform: translateY(-1px);
}

.boton-pildora__icono {
	width: 1.15rem;
	height: 1.15rem;
	flex: none;
	fill: currentColor;
}

.boton-pildora--claro {
	color: var(--tinta);
	background: color-mix(in oklch, var(--crema) 55%, transparent);
	border-color: color-mix(in oklch, var(--tinta) 22%, transparent);
}

.boton-pildora--claro:hover {
	background: color-mix(in oklch, var(--crema) 85%, transparent);
}

.boton-pildora--accion {
	color: #fff;
	background: var(--senal-boton);
}

.boton-pildora--accion:hover {
	background: var(--senal-boton-hover);
}

/* Sobre el cristal de la cabecera un botón transparente no se lee como botón:
   parece texto suelto. Fondo sólido y forma de píldora, como el resto. */
.menu-boton {
	display: none;
	align-items: center;
	gap: var(--e-2);
	min-height: 2.75rem;
	padding: var(--e-2) var(--e-5);
	background: var(--crema);
	border: 1px solid color-mix(in oklch, var(--tinta) 18%, transparent);
	border-radius: 999px;
	box-shadow: 0 1px 2px oklch(0.2 0.03 150 / 0.12);
	font-family: var(--fuente-titulo);
	font-weight: var(--peso-fuerte);
	font-size: var(--txt-s);
	color: var(--tinta);
	cursor: pointer;
}

.menu-boton:hover {
	background: #fff;
}

.menu-boton[aria-expanded="true"] {
	background: var(--verde);
	border-color: var(--verde);
	color: var(--crema);
}

/* Antes de que el menú empiece a apretarse, se retira el teléfono: sigue en el
   pie, en la página de contacto y en la barra fija del móvil. */
@media (max-width: 82rem) {
	.boton-pildora--claro {
		display: none;
	}
}

@media (max-width: 60rem) {
	.menu-boton {
		display: inline-flex;
	}

	/* En tablet solo cabe la acción principal; el teléfono se queda en el pie
	   y en la barra fija de móvil. */
	.boton-pildora--claro {
		display: none;
	}

	.boton-pildora--accion span {
		display: none;
	}

	.boton-pildora--accion {
		padding-inline: var(--e-4);
	}

	.boton-pildora--accion .boton-pildora__icono {
		width: 1.35rem;
		height: 1.35rem;
	}
}

@media (max-width: 48rem) {
	/* En móvil la acción vive en la barra fija de abajo, bajo el pulgar. Repetirla
	   aquí arriba parte la cabecera en tres líneas y tapa la marca. */
	.cabecera__acciones {
		display: none;
	}

	/* En móvil la píldora sube 20px: el aire de escritorio sobra en una pantalla
	   alta y estrecha. */
	.cabecera {
		padding-block-start: 30px;
	}

	.cabecera__interior {
		min-height: 3.75rem;
	}

	.cabecera__logo {
		width: 2.25rem;
	}

	.cabecera__marca {
		font-size: var(--txt-s);
	}

	/* El desplegable cuelga de la píldora y lleva su mismo cristal, pero más
	   cubriente que la cabecera: a 80% el contenido de detrás se transparentaba
	   por encima de los enlaces y el menú dejaba de leerse. */
	.navegacion {
		position: absolute;
		inset: calc(100% + 0.5rem) 0 auto;
		border-radius: 1.5rem;
		background: color-mix(in oklch, var(--crema) 94%, transparent);
		backdrop-filter: blur(20px) saturate(180%);
		-webkit-backdrop-filter: blur(20px) saturate(180%);
		border: 1px solid color-mix(in oklch, var(--crema) 70%, transparent);
		box-shadow: 0 12px 34px oklch(0.2 0.03 150 / 0.22);
		padding: var(--e-3) var(--e-5) var(--e-4);
		display: none;
	}

	.navegacion[data-abierto="true"] {
		display: block;
	}

	.navegacion ul {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.navegacion a {
		display: block;
		padding: var(--e-3) 0;
		font-size: var(--txt-m);
		border-bottom: 1px solid var(--borde);
	}
}

/* --- Hero ------------------------------------------------------------- */
/* Asimétrico a propósito: texto a la izquierda, foto a sangre por la derecha. */

/* Pantalla completa: al entrar se ve el hero y nada más. */
.hero {
	position: relative;
	background: var(--verde);
	color: var(--crema);
	/* Sin esto, un botón secundario dentro del hero se pintaba en tinta oscura
	   sobre verde: 2,3:1, el peor contraste medido de la web. */
	--texto: var(--crema);
	--texto-suave: oklch(0.88 0.03 140);
	--acento: var(--senal-sobre-verde);
	overflow: hidden;
	min-height: 100svh;
	display: flex;
}

/* Mitad y mitad exactas, de borde a borde de la pantalla: el vídeo llena su
   mitad entera, sin margen ni recuadro. */
.hero__interior {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: stretch;
	width: 100%;
}

/*
 * El texto no usa .contenedor porque su columna es media pantalla, pero se
 * alinea con él: el mismo margen izquierdo que el resto de secciones de la
 * página, para que nada baile al hacer scroll.
 */
/*
 * Centrado con flex y no con align-self: un elemento de rejilla centrado que
 * no cabe se desborda por arriba y por abajo a la vez, y el overflow del hero
 * lo recorta. Así, cuando el contenido no entra en la pantalla, la sección
 * crece en vez de comerse el principio y el final.
 */
.hero__texto {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-block: clamp(5.5rem, 8vh, 7rem) clamp(1.5rem, 3vh, 2.5rem);
	padding-left: max(var(--margen), calc((100vw - var(--ancho)) / 2));
	padding-right: clamp(1.5rem, 4vw, 4rem);
}

/* Contenedor de la mitad derecha: el vídeo y, encima, el logotipo que se monta. */
.hero__media {
	position: relative;
}

/* El titular del hero se mide contra el ANCHO y contra el ALTO: atado solo al
   ancho, en un portátil de 900px de alto los cuatro renglones se comen la
   pantalla y el precio y el horario caen fuera de la primera vista. */
.hero__titulo {
	font-size: clamp(2.4rem, min(5.2vw, 7.6vh), 4.8rem);
	margin-bottom: 0;
	color: var(--crema);
}

/* El lema va como párrafo y no dentro del h1: el titular que trabaja en Google
   es "CrossFit en Fuenlabrada", y esto es la coletilla de marca. */
.hero__lema {
	font-family: var(--fuente-titulo);
	font-size: clamp(2.4rem, min(5.2vw, 7.6vh), 4.8rem);
	font-weight: var(--peso-macizo);
	line-height: var(--alto-titulo);
	letter-spacing: -0.02em;
	color: var(--verde-claro);
	margin-bottom: clamp(1rem, 2.5vh, 1.75rem);
	max-width: none;
}

/* Medida más ancha para que ocupe tres renglones y no cuatro: en una pantalla
   de portátil, cada renglón de más empuja el precio fuera de la primera vista. */
.hero__entradilla {
	font-size: var(--txt-l);
	line-height: 1.4;
	max-width: min(44ch, 100%);
	color: oklch(0.92 0.03 140);
}

/* Pantallas bajas (portátiles de 13"): el texto de apoyo cede tamaño para que
   el precio, el horario y los años entren en la primera pantalla. Es el orden
   de prioridades del proyecto, no una decisión estética. */
@media (max-height: 880px) and (min-width: 55rem) {
	.hero__entradilla {
		font-size: var(--txt-m);
		max-width: min(52ch, 100%);
	}
}

/* Los tres datos van en una sola línea: precio, horario y años se leen de un
   vistazo como una tira, no como tres bloques sueltos. */
/* Rejilla, no flex en una línea: con cuatro datos, `nowrap` los apretaba hasta
   que "22:10" y "12 años" se tocaban. Cada dato tiene su columna y pasan a dos
   filas cuando no caben. */
.hero__datos {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
	gap: clamp(0.9rem, 2vw, 1.75rem) clamp(1rem, 2.5vw, 2.25rem);
	margin-top: clamp(0.9rem, 2.4vh, 1.6rem);
	padding-top: clamp(0.75rem, 2vh, 1.25rem);
	border-top: 1px solid oklch(0.55 0.10 148);
}

.hero__dato {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.hero__dato dt {
	font-family: var(--fuente-titulo);
	font-size: clamp(1.15rem, 1.6vw, 1.75rem);
	font-weight: var(--peso-macizo);
	line-height: 1;
	letter-spacing: -0.02em;
	white-space: nowrap;
}

/* El navegador sangra los <dd> 40 px por su cuenta: aquí estorba. */
.hero__dato dd {
	margin: 0;
	font-size: var(--txt-xs);
	line-height: 1.3;
	color: oklch(0.88 0.03 140);
}

/*
 * Pista de scroll: píldora ovalada centrada en el borde inferior del hero, a
 * caballo entre el verde y el vídeo. Mismo cristal que la cabecera, para que
 * se lea igual sobre cualquiera de los dos.
 */
.pista {
	position: absolute;
	left: 50%;
	bottom: clamp(1.25rem, 3.5vh, 2.25rem);
	z-index: 4;
	transform: translateX(-50%);
	display: inline-flex;
	align-items: center;
	gap: var(--e-3);
	padding: var(--e-3) var(--e-5);
	border-radius: 999px;
	font-family: var(--fuente-titulo);
	font-size: var(--txt-s);
	font-weight: var(--peso-fuerte);
	letter-spacing: 0.02em;
	text-decoration: none;
	color: var(--crema);
	background: oklch(0.2 0.05 150 / 0.42);
	backdrop-filter: blur(14px) saturate(160%);
	-webkit-backdrop-filter: blur(14px) saturate(160%);
	border: 1px solid oklch(0.96 0.018 85 / 0.32);
	transition:
		background-color var(--rapido) var(--curva),
		transform var(--rapido) var(--curva);
}

.pista:hover {
	background: oklch(0.2 0.05 150 / 0.62);
	transform: translateX(-50%) translateY(-2px);
}

.pista__flecha {
	width: 1.15rem;
	height: 1.15rem;
	flex: none;
	animation: cft-bajar 2.2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

@keyframes cft-bajar {
	0%,
	100% {
		transform: translateY(-2px);
	}
	50% {
		transform: translateY(4px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.pista__flecha {
		animation: none;
	}
}

/* --- El logotipo que se monta al hacer scroll --------------------------- */
/*
 * Vive al principio de la sección que sigue al hero, centrado sobre el fondo
 * claro: ahí el logotipo se ve entero y con aire, en vez de pelearse con el
 * vídeo por el mismo sitio.
 *
 * Las piezas están colocadas en su posición final desde el CSS y el movimiento
 * lo pone GSAP trayéndolas de fuera. Si el script no llega a ejecutarse, se ve
 * el logotipo entero y bien montado, no un montón de trozos sueltos.
 */
/* Las piezas entran desde xPercent ±230, o sea muy por fuera de su caja: sin
   recortar, en móvil ensanchaban la página 122px y se podía arrastrar de lado
   mientras dura la animación. `clip` en vez de `hidden` porque no crea contexto
   de scroll y no rompe nada pegajoso de dentro. */
#por-que {
	overflow-x: clip;
}

.montaje {
	position: relative;
	width: clamp(15rem, 26vw, 23rem);
	aspect-ratio: 813 / 780;
	margin: 0 auto clamp(2.5rem, 6vw, 4.5rem);
	pointer-events: none;
	filter: drop-shadow(0 20px 40px oklch(0.2 0.03 150 / 0.22));
}

.montaje__pieza {
	position: absolute;
	display: block;
	will-change: transform, opacity;
}

/* Porcentajes tomados del logotipo original (813 × 655) para que las tres
   piezas vuelvan a encajar exactamente donde estaban. */
.montaje__pieza--izq {
	left: 0;
	top: 42.3%;
	width: 36.9%;
	height: auto;
}

.montaje__pieza--der {
	left: 68.27%;
	top: 42.3%;
	width: 31.73%;
	height: auto;
}

/* El dinosaurio va por delante: en el logotipo original sus garras agarran la
   barra por encima, y ese solape es lo que hace que la pieza encaje. */
.montaje__pieza--dino {
	left: 27.68%;
	top: 0;
	width: 46.13%;
	height: auto;
	z-index: 2;
}

.montaje__pieza--texto {
	left: 0;
	right: 0;
	bottom: 0;
	text-align: center;
	font-family: var(--fuente-titulo);
	font-size: clamp(1.15rem, 2.2vw, 1.7rem);
	font-weight: var(--peso-macizo);
	letter-spacing: 0.02em;
	line-height: 1;
	color: var(--tinta);
	text-transform: uppercase;
}

.montaje__pieza--texto b {
	font-weight: var(--peso-fuerte);
	font-size: 0.62em;
	letter-spacing: 0.12em;
	display: block;
	color: var(--verde);
	margin-bottom: 0.2em;
}


/*
 * El vídeo llena su mitad entera y va ABSOLUTO a propósito: en el flujo, sus
 * 1280px de alto intrínsecos estiraban el hero muy por encima de la pantalla y
 * el texto quedaba centrado en una caja gigante, con el precio fuera de vista.
 * Absoluto, la altura la manda la columna de texto.
 */
.hero__pieza {
	position: absolute;
	inset: 0;
	margin: 0;
	overflow: hidden;
	background: var(--verde-hondo);
}

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

@media (max-width: 55rem) {
	/* En móvil la pantalla completa no cabe con vídeo y texto: manda el
	   contenido y la altura se deja libre. */
	.hero {
		min-height: 0;
		display: block;
	}

	.hero__interior {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.hero__texto {
		padding-block: var(--e-6) var(--e-7);
		padding-inline: var(--margen);
	}

	/* La pista de scroll sobra en móvil: ahí ya se ve que la página sigue, y
	   encima se solapaba con los datos del hero. En escritorio sí ayuda, porque
	   el hero ocupa la pantalla entera. */
	.hero__pista,
	.pista {
		display: none;
	}

	/* En móvil el vídeo va primero: la cara del sitio antes que el texto.
	   El order va en el contenedor, que es el hijo de la rejilla; puesto en la
	   figura de dentro no tiene ningún efecto. */
	.hero__media {
		order: -1;
		/* Deja pasar la cabecera flotante, que ya no ocupa sitio en el flujo. */
		margin-top: clamp(4.75rem, 17vw, 6rem);
	}

	/* En móvil sí va en el flujo: es el primer bloque y tiene que ocupar su
	   sitio. Se recorta a 4:5 para no comerse la pantalla entera de scroll. */
	.hero__pieza {
		position: relative;
		inset: auto;
		aspect-ratio: 4 / 5;
		min-height: 0;
		max-height: 60vh;
		width: 100%;
		border-radius: var(--radio-g);
	}


	.hero__datos {
		flex-wrap: wrap;
		gap: var(--e-4) var(--e-6);
	}

	.hero__dato dd {
		font-size: var(--txt-xs);
	}
}

/* --- Tarifas ---------------------------------------------------------- */
/* Comparador, no rejilla de tarjetas idénticas: la tarea es comparar precio. */

.tarifas {
	display: grid;
	/* 12rem para que las cinco tarifas quepan en una fila en escritorio: partirlas
	   en 4 + 1 deja un hueco muerto y rompe la comparación de un vistazo. */
	grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
	/* El gap descubre el fondo del contenedor: de ahí sale la línea oscura de
	   separación entre columnas, sin pintar bordes en cada tarjeta. Solo entre
	   columnas: en horizontal la línea partía cada tarifa en dos. */
	column-gap: 1px;
	row-gap: 0;
	background: var(--tinta);
	border: 1px solid var(--tinta);
	border-radius: var(--radio-g);
	overflow: hidden;
	margin-top: var(--e-7);
	/* Dos filas para todas: cabecera y cuerpo. Con subgrid, las cabeceras de las
	   cinco tarifas comparten altura aunque un reclamo ocupe dos líneas, y la
	   línea que las separa queda a la misma altura en las cinco columnas. */
	grid-template-rows: auto 1fr;
}

/* El comparador lleva SIEMPRE fondo claro y texto tinta, vaya dentro del bloque que
   vaya: si se hereda la superficie de .bloque--verde, los precios quedan ilegibles. */
.tarifa {
	background: var(--crema);
	color: var(--tinta);
	/* La tarjeta es clara dentro del bloque verde: si no se reponen los roles,
	   hereda los del bloque y el reclamo sale en gris claro sobre crema (1,06:1). */
	--texto: var(--tinta);
	--texto-suave: var(--tinta-suave);
	--acento: var(--senal-boton);
	display: flex;
	flex-direction: column;
}

@supports (grid-template-rows: subgrid) {
	.tarifa {
		display: grid;
		grid-row: span 2;
		grid-template-rows: subgrid;
	}
}

/* Cabecera con su propio fondo: el nombre del plan se lee como una pestaña y
   deja el cuerpo limpio para comparar lo que incluye cada uno. */
.tarifa__cabecera {
	padding: var(--e-4) var(--e-5);
	background: var(--hormigon);
}

.tarifa__cuerpo {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: var(--e-5) var(--e-5) var(--e-6);
}

/* Verde medio propio de la cabecera destacada: el verde de marca es el mismo
   del bloque que hay detrás, así que la cabecera se fundía con el fondo de la
   sección. Este queda entre ese verde y el claro del cuerpo, y admite texto
   en tinta con contraste de sobra. */
.tarifa--destacada .tarifa__cabecera {
	background: oklch(0.72 0.13 148);
}

.tarifa--destacada .tarifa__cuerpo {
	background: var(--verde-claro);
}

.tarifa__nombre {
	font-size: var(--txt-l);
	margin-bottom: var(--e-1);
	color: var(--tinta);
}

.tarifa__reclamo {
	font-size: var(--txt-s);
	/* Rol semántico, no color fijo: dentro del bloque verde el gris oscuro se
	   quedaba en 3,3:1. */
	color: var(--texto-suave);
	margin-bottom: 0;
}

.tarifa__precio {
	display: flex;
	align-items: baseline;
	gap: var(--e-2);
	margin-bottom: var(--e-4);
}

.tarifa__cifra {
	font-family: var(--fuente-titulo);
	font-size: var(--txt-xl);
	font-weight: var(--peso-macizo);
	letter-spacing: -0.03em;
	color: var(--tinta);
}

.tarifa__periodo {
	font-size: var(--txt-s);
	color: var(--tinta-suave);
}

.tarifa__incluye {
	list-style: none;
	padding: 0;
	margin: 0 0 var(--e-4);
	font-size: var(--txt-s);
	color: var(--tinta);
}

.tarifa__incluye li {
	padding-left: 1.1em;
	position: relative;
	margin-bottom: var(--e-2);
}

.tarifa__incluye li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.62em;
	width: 0.45em;
	height: 0.45em;
	background: var(--verde);
	border-radius: 50%;
}

.tarifa__trimestral {
	margin: auto 0 0;
	padding-top: var(--e-3);
	font-size: var(--txt-xs);
	color: var(--tinta-suave);
}

/* --- Oferta ----------------------------------------------------------- */

.oferta {
	--texto-suave: oklch(0.88 0.03 140);
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	gap: var(--e-5) var(--e-6);
	padding: var(--e-6);
	background: var(--superficie);
	border-radius: var(--radio-g);
	margin-top: var(--e-6);
}

.oferta__precio {
	font-family: var(--fuente-titulo);
	font-size: var(--txt-2xl);
	font-weight: var(--peso-macizo);
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--acento);
}

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

@media (max-width: 40rem) {
	.oferta {
		grid-template-columns: 1fr;
		gap: var(--e-3);
	}
}

/* --- Cuadrante de clases ---------------------------------------------- */
/* Una columna por día. En móvil pasa a carrusel horizontal con scroll-snap:
   se sigue viendo la semana entera sin desplegables ni acordeones. */

/* Las filas se comparten entre los seis días con subgrid: la clase de las 10
   del viernes queda a la altura de la de las 10 del sábado, aunque un nombre
   largo ocupe dos líneas. --filas lo escribe la plantilla con el número real
   de horas del cuadrante. */

.cuadrante {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
	grid-template-rows: auto repeat(var(--filas, 13), auto);
	gap: 1px;
	background: var(--borde);
	border: 1px solid var(--borde);
	border-radius: var(--radio-g);
	overflow: hidden;
	margin-top: var(--e-7);
}

.cuadrante__dia {
	display: grid;
	grid-template-rows: subgrid;
	grid-row: 1 / -1;
	align-content: start;
	background: var(--superficie);
	padding: var(--e-4) var(--e-4) var(--e-5);
}

/* La lista deja de generar caja para que sus <li> caigan en las filas del
   subgrid. role="list" en el marcado conserva la semántica de lista, que
   display:contents se lleva por delante en varios navegadores. */
.cuadrante__lista {
	display: contents;
}

.cuadrante__clase--hueco {
	min-height: var(--e-6);
}

.cuadrante__titulo {
	font-size: var(--txt-s);
	font-weight: var(--peso-macizo);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--tinta-suave);
	margin-bottom: var(--e-4);
	padding-bottom: var(--e-2);
	border-bottom: 2px solid var(--verde);
}

.cuadrante__lista {
	list-style: none;
	margin: 0;
	padding: 0;
}

.cuadrante__clase {
	display: flex;
	flex-direction: column;
	gap: 1px;
	padding-block: var(--e-2);
	border-bottom: 1px solid var(--borde);
	margin: 0;
}

.cuadrante__clase:last-child {
	border-bottom: 0;
}

.cuadrante__hora {
	font-family: var(--fuente-titulo);
	font-weight: var(--peso-fuerte);
	font-size: var(--txt-s);
	font-variant-numeric: tabular-nums;
	color: var(--tinta);
}

.cuadrante__nombre {
	font-size: var(--txt-xs);
	color: var(--tinta-suave);
}

@media (max-width: 48rem) {
	.cuadrante {
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
	}

	.cuadrante__dia {
		display: block;
		flex: 0 0 min(70vw, 15rem);
		scroll-snap-align: start;
	}

	/* En móvil se ve un día por pantalla: no hay nada con lo que alinear y los
	   huecos solo dejarían filas vacías. */
	.cuadrante__lista {
		display: block;
	}

	.cuadrante__clase--hueco {
		display: none;
	}
}

/* --- Comunidad --------------------------------------------------------- */

.comunidad {
	overflow: hidden;
}

.comunidad__cabeza {
	max-width: 44rem;
	margin-bottom: var(--e-7);
}

/* La foto de grupo va a sangre: recortarla a un contenedor la empequeñece,
   y lo que cuenta aquí es justo el tamaño de la cuadrilla. */
.comunidad__foto {
	margin: 0 0 var(--e-6);
}

.comunidad__foto img {
	width: 100%;
	height: auto;
	max-height: 34rem;
	object-fit: cover;
	object-position: center 40%;
}

/* Tira desplazable. Se arrastra con el dedo y avanza sola en pantallas
   grandes; no es un carrusel con flechas porque no hay nada que "navegar". */
.tira {
	display: flex;
	gap: var(--e-3);
	overflow-x: auto;
	scroll-snap-type: x proximity;
	padding-inline: var(--margen);
	scrollbar-width: none;
}

.tira::-webkit-scrollbar {
	display: none;
}

.tira__foto {
	flex: 0 0 clamp(13rem, 24vw, 20rem);
	margin: 0;
	border-radius: var(--radio-g);
	overflow: hidden;
	scroll-snap-align: start;
}

.tira__foto img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	transition: transform var(--medio) var(--curva);
}

.tira__foto:hover img {
	transform: scale(1.04);
}

/* --- Bloque de dos columnas con foto ---------------------------------- */

.duo {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
	align-items: center;
	gap: clamp(2rem, 5vw, 4.5rem);
}

.duo__figura {
	margin: 0;
	border-radius: var(--radio-g);
	overflow: hidden;
}

.duo__figura img {
	width: 100%;
	object-fit: cover;
	aspect-ratio: 4 / 3;
}

.duo--invertido .duo__figura {
	order: -1;
}

@media (max-width: 42rem) {
	.duo--invertido .duo__figura {
		order: 0;
	}
}

/* --- Cita del cliente -------------------------------------------------- */
/* Texto literal del box, no copy inventado. Por eso va como cita y no como titular. */

.cita {
	margin: 0;
	max-width: min(26ch, 100%);
	font-family: var(--fuente-titulo);
	font-size: var(--txt-xl);
	font-weight: var(--peso-fuerte);
	line-height: 1.15;
	letter-spacing: -0.02em;
}

.cita cite {
	display: block;
	margin-top: var(--e-4);
	font-family: var(--fuente-texto);
	font-size: var(--txt-s);
	font-style: normal;
	font-weight: var(--peso-normal);
	color: var(--texto-suave);
}

/* --- Razones ---------------------------------------------------------- */
/* Lista numerada, no tarjetas con icono: son argumentos, no funcionalidades. */

.razones {
	list-style: none;
	counter-reset: razon;
	padding: 0;
	margin: var(--e-7) 0 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	gap: var(--e-6) var(--e-7);
}

.razon {
	counter-increment: razon;
	margin: 0;
	padding-top: var(--e-4);
	border-top: 2px solid var(--verde);
}

.razon::before {
	content: counter(razon, decimal-leading-zero);
	display: block;
	font-family: var(--fuente-titulo);
	font-size: var(--txt-s);
	font-weight: var(--peso-macizo);
	color: var(--senal);
	margin-bottom: var(--e-2);
}

.razon h3 {
	font-size: var(--txt-m);
	font-weight: var(--peso-fuerte);
	margin-bottom: var(--e-2);
}

.razon p {
	font-size: var(--txt-s);
	color: var(--texto-suave);
	margin: 0;
}

/* --- Ubicación --------------------------------------------------------- */

.ubicacion__datos {
	display: grid;
	gap: var(--e-5);
	margin-bottom: var(--e-6);
}

.dato-contacto {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.dato-contacto dt {
	font-size: var(--txt-xs);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--texto-suave);
}

.dato-contacto dd {
	margin: 0;
	font-family: var(--fuente-titulo);
	font-size: var(--txt-l);
	font-weight: var(--peso-fuerte);
	letter-spacing: -0.01em;
}

.dato-contacto dd a {
	text-decoration: none;
}

.dato-contacto dd a:hover {
	text-decoration: underline;
	text-decoration-color: var(--senal);
	text-decoration-thickness: 2px;
}

/*
 * El mapa llena la altura de su columna: empieza donde empieza el texto de al
 * lado y termina donde termina. Con una proporción fija se quedaba corto y
 * flotando en medio de la fila.
 */
.mapa {
	border: 0;
	width: 100%;
	height: 100%;
	min-height: 22rem;
	border-radius: var(--radio-g);
	/* Desaturado un punto para que el mapa no compita con el verde de la marca. */
	filter: saturate(0.8);
}

.duo__figura--mapa {
	display: flex;
	align-self: stretch;
}

/* La fila deja de centrar cuando hay mapa: si centra, no hay altura que llenar. */
.duo:has(.duo__figura--mapa) {
	align-items: stretch;
}

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

.cierre {
	text-align: center;
}

.cierre h2 {
	max-width: min(18ch, 100%);
	margin-inline: auto;
}

.cierre p {
	margin-inline: auto;
}

.cierre .acciones {
	justify-content: center;
}

/* --- Pie ---------------------------------------------------------------- */

.pie {
	/* Los roles se reasignan aquí: si no, .texto-suave hereda la tinta oscura
	   del resto de la página y el horario se vuelve ilegible sobre el verde. */
	--texto: var(--crema);
	--texto-suave: oklch(0.84 0.03 140);
	--borde: oklch(0.42 0.07 150);
	background: var(--verde-hondo);
	color: var(--crema);
	padding-block: var(--e-8) var(--e-6);
}

/* Cuatro columnas en escritorio: identidad, contacto y legales, el box y zonas. */
.pie__rejilla {
	display: grid;
	grid-template-columns: 1.2fr 1fr 1fr 1fr;
	gap: var(--e-6) var(--e-7);
	padding-bottom: var(--e-7);
}

.pie h2,
.pie h3 {
	color: var(--crema);
}

.pie__titulo {
	font-size: var(--txt-s);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-weight: var(--peso-fuerte);
	margin-bottom: var(--e-4);
	color: oklch(0.84 0.03 140);
}

/* Segundo bloque dentro de la misma columna: separado, no pegado al anterior. */
.pie__titulo--segundo {
	margin-top: var(--e-6);
}

.pie__logo {
	width: 8.5rem;
	height: auto;
	margin-bottom: var(--e-3);
	filter: drop-shadow(0 8px 18px oklch(0.12 0.03 150 / 0.45));
}

.pie__marca {
	font-family: var(--fuente-titulo);
	font-size: var(--txt-m);
	font-weight: var(--peso-macizo);
	letter-spacing: -0.01em;
	margin-bottom: var(--e-2);
}

.pie__dato {
	font-size: var(--txt-s);
	margin-bottom: var(--e-3);
}

/* El horario es dato de apoyo: va más pequeño para no competir con el resto. */
.pie__horario {
	font-size: var(--txt-xs);
	line-height: 1.5;
	color: var(--texto-suave);
	margin: 0;
}

.pie ul {
	list-style: none;
	padding: 0;
	margin: 0;
	font-size: var(--txt-s);
}

/* Caja de al menos 24px de alto: los enlaces del pie medían 19 y se quedaban
   por debajo del mínimo táctil de WCAG 2.2. Se gana con relleno, sin tocar el
   tamaño de letra ni el aire entre líneas. */
.pie a {
	text-decoration: none;
	display: inline-block;
	padding-block: 0.2rem;
	min-height: 1.5rem;
}

.pie a:hover {
	text-decoration: underline;
	text-decoration-color: var(--senal);
	text-decoration-thickness: 2px;
}

/* --- Franja de mapa del pie --------------------------------------------- */
/*
 * Cierra el bloque de columnas. El iframe va sin interacción propia (queda por
 * debajo de una capa transparente) para que rodar la rueda no se quede
 * atrapado haciendo zoom: el bloque entero es un enlace a Google Maps, que es
 * lo que la gente quiere de todas formas.
 */
.pie__mapa {
	position: relative;
	display: block;
	height: 300px;
	border-radius: var(--radio-g);
	overflow: hidden;
	text-decoration: none;
	background: oklch(0.36 0.07 150);
}

/*
 * El iframe se carga alto y la franja lo recorta. A 1200×200 el mapa incrustado
 * de Google no llena el marco: deja el plano en el centro y gris a los lados.
 * Cargándolo con una proporción normal y recortando, la franja queda llena.
 */
.pie__mapa-marco {
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 100%;
	height: 480px;
	border: 0;
	pointer-events: none;
	filter: saturate(0.75) brightness(0.92);
}

.pie__mapa-etiqueta {
	position: absolute;
	left: 50%;
	bottom: var(--e-4);
	transform: translateX(-50%);
	display: inline-flex;
	align-items: center;
	gap: var(--e-2);
	padding: var(--e-2) var(--e-5);
	border-radius: 999px;
	font-family: var(--fuente-titulo);
	font-size: var(--txt-s);
	font-weight: var(--peso-fuerte);
	color: var(--tinta);
	background: color-mix(in oklch, var(--crema) 88%, transparent);
	backdrop-filter: blur(10px) saturate(160%);
	-webkit-backdrop-filter: blur(10px) saturate(160%);
	border: 1px solid color-mix(in oklch, var(--crema) 70%, transparent);
	text-align: center;
	max-width: calc(100% - 2rem);
}

.pie__mapa:hover .pie__mapa-etiqueta {
	background: var(--crema);
}

/* --- Línea de crédito ---------------------------------------------------- */

.pie__legal {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--e-3) var(--e-5);
	margin-top: var(--e-6);
	padding-top: var(--e-5);
	border-top: 1px solid var(--borde);
	font-size: var(--txt-xs);
	color: oklch(0.82 0.03 140);
}

.pie__legal p {
	margin: 0;
}

@media (max-width: 62rem) {
	.pie__rejilla {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 34rem) {
	.pie__rejilla {
		grid-template-columns: 1fr;
		gap: var(--e-6);
	}

	.pie__mapa {
		height: 220px;
	}
}

/* --- Barra de acción en móvil ------------------------------------------ */
/* El tráfico local llega del móvil y muchas veces de camino: llamar y WhatsApp
   tienen que estar bajo el pulgar sin buscar. */

.barra-accion {
	display: none;
}

@media (max-width: 48rem) {
	.barra-accion {
		position: fixed;
		inset: auto 0 0;
		z-index: 120;
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: 1fr;
		gap: 1px;
		background: var(--borde);
		border-top: 1px solid var(--borde);
		padding-bottom: env(safe-area-inset-bottom);
	}

	.barra-accion a {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: var(--e-2);
		min-height: 3.5rem;
		background: var(--crema);
		color: var(--tinta);
		font-family: var(--fuente-titulo);
		font-weight: var(--peso-fuerte);
		font-size: var(--txt-s);
		text-decoration: none;
	}

	.barra-accion a.es-principal {
		background: var(--senal-boton);
		color: #fff;
	}

	/* Que la barra no tape el final del contenido. */
	body {
		padding-bottom: 3.5rem;
	}
}

/* --- Contenido de páginas internas ------------------------------------- */

/* Los textos legales traen URLs largas sin espacios (las de desactivar cookies
   en cada navegador): en móvil ensanchaban la página 38px. Que partan donde
   haga falta antes que desbordar. */
.contenido-pagina > * {
	max-width: var(--medida);
	overflow-wrap: anywhere;
}

.contenido-pagina h2 {
	font-size: var(--txt-xl);
	margin-top: var(--e-7);
}

.contenido-pagina h3 {
	margin-top: var(--e-6);
}

.contenido-pagina img {
	border-radius: var(--radio-g);
	max-width: 100%;
}

.encabezado-pagina {
	background: var(--verde);
	color: var(--crema);
	padding-block: clamp(7rem, 11vw, 9rem) clamp(3rem, 7vw, 5rem);
}

.encabezado-pagina h1 {
	font-size: var(--txt-2xl);
	margin: 0;
	color: var(--crema);
}

/* --- Preguntas frecuentes ---------------------------------------------- */
/*
 * Acordeón con <details>: nativo, accesible y sin una línea de JavaScript.
 * La primera va abierta para que se vea de un vistazo que esto se despliega.
 */
.faq {
	margin-top: var(--e-7);
	border-top: 1px solid var(--borde);
	max-width: 52rem;
}

.faq__item {
	border-bottom: 1px solid var(--borde);
}

.faq__pregunta {
	display: flex;
	align-items: flex-start;
	gap: var(--e-4);
	padding-block: var(--e-4);
	font-family: var(--fuente-titulo);
	font-size: var(--txt-m);
	font-weight: var(--peso-fuerte);
	line-height: 1.25;
	cursor: pointer;
	list-style: none;
}

.faq__pregunta::-webkit-details-marker {
	display: none;
}

/* Signo propio en vez del triangulito del navegador: gira al abrir. */
.faq__pregunta::after {
	content: "+";
	margin-left: auto;
	font-size: 1.4em;
	line-height: 1;
	color: var(--senal);
	transition: transform var(--rapido) var(--curva);
}

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

.faq__respuesta {
	padding-bottom: var(--e-5);
	max-width: 60ch;
}

.faq__respuesta p {
	margin: 0;
	color: var(--texto-suave);
}

/* --- Franja de mapa del pie --------------------------------------------- */
/*
 * Ocupa todo el ancho y cierra el pie. El iframe va sin interacción propia
 * (queda por debajo de una capa transparente) para que rodar la rueda no se
 * quede atrapado haciendo zoom en el mapa: el bloque entero es un enlace a
 * Google Maps, que es lo que la gente quiere de todas formas.
 */
.pie__mapa {
	position: relative;
	display: block;
	height: 150px;
	margin-top: var(--e-6);
	overflow: hidden;
	text-decoration: none;
	background: var(--verde-hondo);
}

/*
 * El iframe se carga alto (420px) y la franja lo recorta a 150. A 1440×150 el
 * mapa incrustado de Google no llena el marco: deja el plano en el centro y
 * gris a los lados. Cargándolo con una proporción normal y recortando, la
 * franja queda llena de mapa de verdad.
 */
.pie__mapa-marco {
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 100%;
	height: 420px;
	border: 0;
	pointer-events: none;
	filter: saturate(0.75) brightness(0.92);
}

.pie__mapa-etiqueta {
	position: absolute;
	left: 50%;
	bottom: var(--e-4);
	transform: translateX(-50%);
	display: inline-flex;
	align-items: center;
	gap: var(--e-2);
	padding: var(--e-2) var(--e-5);
	border-radius: 999px;
	font-family: var(--fuente-titulo);
	font-size: var(--txt-s);
	font-weight: var(--peso-fuerte);
	color: var(--tinta);
	background: color-mix(in oklch, var(--crema) 88%, transparent);
	backdrop-filter: blur(10px) saturate(160%);
	-webkit-backdrop-filter: blur(10px) saturate(160%);
	border: 1px solid color-mix(in oklch, var(--crema) 70%, transparent);
	text-align: center;
	max-width: calc(100% - 2rem);
}

.pie__mapa:hover .pie__mapa-etiqueta {
	background: var(--crema);
}

/* --- Páginas interiores ------------------------------------------------- */

.encabezado-pagina__entradilla {
	font-size: var(--txt-l);
	line-height: 1.4;
	color: oklch(0.92 0.03 140);
	max-width: min(46ch, 100%);
	margin: var(--e-4) 0 0;
}

/* Rejilla de clases. Son enlaces enteros, no tarjetas con un "ver más"
   diminuto: el objetivo táctil es toda la pieza. */
.clases {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	gap: var(--e-4);
	margin-top: var(--e-7);
}

.clase {
	display: block;
	padding: var(--e-5);
	border: 1px solid var(--borde);
	border-radius: var(--radio-g);
	background: var(--superficie);
	text-decoration: none;
	transition:
		border-color var(--rapido) var(--curva),
		transform var(--rapido) var(--curva);
}

a.clase:hover {
	border-color: var(--verde);
	transform: translateY(-2px);
}

.clase h3 {
	margin-bottom: var(--e-2);
}

.clase p {
	margin: 0;
	font-size: var(--txt-s);
	color: var(--texto-suave);
}

.clase--destacada {
	background: var(--verde-claro);
	border-color: transparent;
	grid-column: span 2;
}

/* Las que no tienen página propia no son enlaces: no deben parecerlo. */
.clase--simple {
	background: transparent;
	border-style: dashed;
}

@media (max-width: 46rem) {
	.clase--destacada {
		grid-column: auto;
	}
}

/* --- Coaches ------------------------------------------------------------ */

.coach__foto img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

.coach__cargo {
	font-family: var(--fuente-titulo);
	font-size: var(--txt-s);
	font-weight: var(--peso-fuerte);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--senal);
	margin-bottom: var(--e-2);
}

.coach__nombre {
	font-size: var(--txt-2xl);
	margin-bottom: var(--e-5);
}

.coach__titulos {
	list-style: none;
	padding: 0;
	margin: var(--e-5) 0 0;
	font-size: var(--txt-s);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
	gap: var(--e-2) var(--e-4);
}

.coach__titulos li {
	padding-left: 1.1em;
	position: relative;
	margin: 0;
	color: var(--texto-suave);
}

.coach__titulos li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.62em;
	width: 0.45em;
	height: 0.45em;
	background: var(--verde);
	border-radius: 50%;
}

/* Fotos de competición: dos, grandes, con el nombre debajo. */
.coaches-accion {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
	gap: var(--e-5);
	margin-top: var(--e-7);
}

.coaches-accion__foto {
	margin: 0;
}

.coaches-accion__foto img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: var(--radio-g);
}

.coaches-accion__foto figcaption {
	margin-top: var(--e-3);
	font-family: var(--fuente-titulo);
	font-weight: var(--peso-fuerte);
	font-size: var(--txt-s);
}

/* --- Contacto ----------------------------------------------------------- */

.contacto {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
	gap: var(--e-4);
}

.contacto__via {
	display: flex;
	flex-direction: column;
	gap: var(--e-1);
	padding: var(--e-5);
	border: 1px solid var(--borde);
	border-radius: var(--radio-g);
	background: var(--superficie);
	text-decoration: none;
	transition:
		border-color var(--rapido) var(--curva),
		transform var(--rapido) var(--curva);
}

.contacto__via:hover {
	border-color: var(--verde);
	transform: translateY(-2px);
}

.contacto__via--principal {
	background: var(--verde-claro);
	border-color: transparent;
}

.contacto__etiqueta {
	font-size: var(--txt-xs);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--texto-suave);
}

/*
 * El email es la cadena más larga de las cuatro tarjetas y a tamaño de titular
 * se salía de la suya. Se encoge hasta caber y puede partir por el arroba.
 */
.contacto__valor {
	font-family: var(--fuente-titulo);
	font-size: clamp(1.05rem, 1.6vw, 1.45rem);
	font-weight: var(--peso-macizo);
	letter-spacing: -0.01em;
	overflow-wrap: anywhere;
	line-height: 1.15;
}

.contacto__nota {
	font-size: var(--txt-s);
	color: var(--texto-suave);
}

.contacto__horario {
	margin-top: var(--e-7);
	padding-top: var(--e-5);
	border-top: 1px solid var(--borde);
}

/* --- Galería ------------------------------------------------------------ */

.galeria {
	columns: 3 16rem;
	column-gap: var(--e-4);
}

.galeria__foto {
	margin: 0 0 var(--e-4);
	break-inside: avoid;
	border-radius: var(--radio-g);
	overflow: hidden;
}

.galeria__foto img {
	width: 100%;
	height: auto;
}

/* --- Listas marcadas ----------------------------------------------------- */

.lista-marcada {
	list-style: none;
	padding: 0;
	margin: var(--e-5) 0;
}

.lista-marcada li {
	position: relative;
	padding-left: 1.6em;
	margin-bottom: var(--e-3);
}

.lista-marcada li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 0.7em;
	height: 0.7em;
	background: var(--verde);
	border-radius: 50%;
}

.oferta__precio--grande {
	font-size: var(--txt-3xl);
	margin-bottom: var(--e-4);
}

/* --- Descargas de la app ------------------------------------------------ */

.descargas {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--e-4);
	margin-top: var(--e-5);
}

.descargas__badge img {
	height: 3.25rem;
	width: auto;
	transition: transform var(--rapido) var(--curva);
}

.descargas__badge:hover img {
	transform: translateY(-2px);
}

.descargas--pequeñas .descargas__badge img {
	height: 2.75rem;
}

/* Pasos numerados de la app. */
.pasos {
	counter-reset: paso;
	list-style: none;
	padding: 0;
	margin: var(--e-5) 0;
}

.pasos li {
	counter-increment: paso;
	position: relative;
	padding-left: 2.5rem;
	margin-bottom: var(--e-4);
}

.pasos li::before {
	content: counter(paso);
	position: absolute;
	left: 0;
	top: -0.15em;
	display: grid;
	place-items: center;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 50%;
	background: var(--verde);
	color: var(--crema);
	font-family: var(--fuente-titulo);
	font-size: var(--txt-s);
	font-weight: var(--peso-fuerte);
}

/* --- Formulario (WPForms) ------------------------------------------------ */
/*
 * WPForms trae su propia hoja de estilos. Aquí solo se le imponen los tokens
 * del tema para que no cante: tipografía, colores y radios del sitio.
 */
/* Tarjeta propia: suelto sobre el hormigón, el formulario se leía como campos
   tirados en la página sin nada que los agrupe. Superficie crema, borde y
   sombra suave lo convierten en una pieza cerrada. */
.formulario {
	margin-top: var(--e-6);
	padding: clamp(1.25rem, 4vw, 2.5rem);
	background: var(--superficie, var(--crema));
	border: 1px solid var(--borde);
	border-radius: var(--radio-g);
	box-shadow: var(--sombra);
}

.formulario .wpforms-container {
	margin: 0;
}

.formulario .wpforms-field-label {
	font-family: var(--fuente-titulo);
	font-size: var(--txt-s);
	font-weight: var(--peso-fuerte);
	color: var(--tinta);
}

.formulario .wpforms-field-sublabel,
.formulario .wpforms-field-description {
	font-size: var(--txt-xs);
	color: var(--tinta-suave);
}

.formulario input[type="text"],
.formulario input[type="email"],
.formulario input[type="tel"],
.formulario select,
.formulario textarea {
	width: 100%;
	padding: var(--e-3) var(--e-4);
	font-family: var(--fuente-texto);
	font-size: var(--txt-m);
	color: var(--tinta);
	/* Sobre la tarjeta crema, un campo crema desaparece: los campos van un punto
	   más claros que su superficie. */
	background: oklch(0.99 0.006 85);
	border: 1px solid var(--borde);
	border-radius: var(--radio);
}

.formulario input:focus-visible,
.formulario select:focus-visible,
.formulario textarea:focus-visible {
	outline: 2px solid var(--senal);
	outline-offset: 2px;
	border-color: transparent;
}

.formulario .wpforms-submit {
	min-height: 3rem;
	padding: var(--e-3) var(--e-6);
	font-family: var(--fuente-titulo);
	font-size: var(--txt-m);
	font-weight: var(--peso-fuerte);
	color: #fff;
	background: var(--senal-boton);
	border: 0;
	border-radius: var(--radio);
	cursor: pointer;
	transition: background-color var(--rapido) var(--curva);
}

.formulario .wpforms-submit:hover {
	background: var(--senal-boton-hover);
}

.formulario .wpforms-required-label {
	color: var(--senal-hondo);
}

/* --- Instagram ----------------------------------------------------------- */
/* Aparece en la cabecera, el pie, la barra de móvil y varias secciones: es la
   red donde este box publica a diario. */

.icono-ig {
	width: 1.15em;
	height: 1.15em;
	flex: none;
	vertical-align: -0.2em;
}

.pie__instagram {
	display: inline-flex;
	align-items: center;
	gap: var(--e-2);
}

.barra-accion .icono-ig {
	width: 1.4rem;
	height: 1.4rem;
}

/* Consentimiento del formulario: casilla y texto en cuerpo pequeño, sin
   parecer un campo más del formulario. */
.formulario .wpforms-field-checkbox ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.formulario .wpforms-field-checkbox li {
	display: flex;
	align-items: flex-start;
	gap: var(--e-3);
	margin: 0;
}

.formulario .wpforms-field-checkbox input[type="checkbox"] {
	width: 1.15rem;
	height: 1.15rem;
	margin-top: 0.15rem;
	flex: none;
	accent-color: var(--verde);
}

.formulario .wpforms-field-checkbox label {
	font-family: var(--fuente-texto);
	font-weight: var(--peso-normal);
	font-size: var(--txt-s);
	line-height: 1.45;
}

.formulario .wpforms-field-description a {
	color: var(--tinta);
	text-decoration-color: var(--senal);
	text-decoration-thickness: 2px;
}

/* WPForms envuelve los grupos de opciones en un fieldset con borde de
   navegador: fuera, que aquí no pinta nada. */
.formulario fieldset {
	border: 0;
	padding: 0;
	margin: 0;
	min-inline-size: 0;
}

.formulario fieldset legend {
	padding: 0;
	margin-bottom: var(--e-2);
}

/* --- Página de gracias --------------------------------------------------- */
/* No usa el encabezado verde, así que necesita su propio hueco para la
   cabecera flotante. */
.gracias {
	padding-top: clamp(7rem, 11vw, 9rem);
}

.gracias__mientras {
	margin-top: var(--e-8);
}

/* --- Volver arriba -------------------------------------------------------- */
/*
 * Esquina de abajo a la izquierda: la derecha es de la burbuja del chat. Solo en
 * móvil y solo tras bajar una pantalla larga — en escritorio la rueda del ratón
 * ya hace este trabajo.
 */
.subir {
	display: none;
}

@media (max-width: 48rem) {
	.subir {
		position: fixed;
		left: 1rem;
		bottom: calc(4.6rem + env(safe-area-inset-bottom, 0px));
		z-index: 99989;
		display: grid;
		place-items: center;
		width: 2.9rem;
		height: 2.9rem;
		padding: 0;
		border-radius: 50%;
		/* Mismo borde blanco que la burbuja del chat: sobre el verde de la web, un
		   círculo sin borde se pierde. */
		border: 3px solid var(--crema);
		background: var(--verde-hondo);
		color: var(--crema);
		box-shadow: 0 8px 24px oklch(0.2 0.03 150 / 0.35);
		cursor: pointer;
	}

	.subir[hidden] {
		display: none;
	}
}

/* --- Reserva de clase de prueba ------------------------------------------ */
/* Tres pasos, uno por pantalla: en móvil un formulario largo con día y hora a la
   vez obliga a hacer scroll para decidir, y ahí se pierde gente. */

.reserva {
	max-width: 34rem;
	margin-inline: auto;
}

.reserva__pasos {
	display: flex;
	gap: var(--e-2);
	list-style: none;
	margin: 0 0 var(--e-6);
	padding: 0;
	counter-reset: paso;
}

.reserva__pasos li {
	flex: 1;
	margin: 0;
	padding-top: var(--e-2);
	border-top: 3px solid var(--borde);
	font-family: var(--fuente-titulo);
	font-size: var(--txt-xs);
	font-weight: var(--peso-fuerte);
	color: var(--texto-suave);
}

.reserva__pasos li.es-activo {
	border-top-color: var(--senal-boton);
	color: var(--texto);
}

.reserva__paso h2 {
	margin-top: 0;
	outline: none;
}

.reserva__ayuda {
	color: var(--texto-suave);
	font-size: var(--txt-s);
}

.reserva__opcional {
	font-weight: var(--peso-normal);
	color: var(--texto-suave);
}

.reserva__paso label {
	display: block;
	margin-top: var(--e-4);
	margin-bottom: var(--e-2);
	font-family: var(--fuente-titulo);
	font-size: var(--txt-s);
	font-weight: var(--peso-fuerte);
}

.reserva__paso input[type="text"],
.reserva__paso input[type="tel"],
.reserva__paso input[type="email"] {
	width: 100%;
	padding: var(--e-3) var(--e-4);
	font-family: var(--fuente-texto);
	font-size: var(--txt-m);
	color: var(--tinta);
	background: oklch(0.99 0.006 85);
	border: 1px solid var(--borde);
	border-radius: var(--radio);
}

.reserva__consentimiento {
	display: flex;
	align-items: flex-start;
	gap: var(--e-3);
	margin-top: var(--e-5);
	font-family: var(--fuente-texto);
	font-weight: var(--peso-normal);
	font-size: var(--txt-s);
	line-height: 1.45;
}

.reserva__consentimiento input {
	width: 1.15rem;
	height: 1.15rem;
	margin-top: 0.15rem;
	flex: none;
	accent-color: var(--verde);
}

.reserva__paso .boton {
	margin-top: var(--e-5);
}

/* Rejilla de días y horas: objetivos grandes, que esto se usa con el pulgar. */
.reserva__opciones {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
	gap: var(--e-3);
	margin-bottom: var(--e-5);
}

.reserva__opcion {
	display: grid;
	gap: 0.15rem;
	min-height: 3.4rem;
	padding: var(--e-3);
	font-family: var(--fuente-titulo);
	font-size: var(--txt-m);
	color: var(--texto);
	background: var(--superficie);
	border: 2px solid var(--borde);
	border-radius: var(--radio-g);
	cursor: pointer;
	text-align: left;
}

.reserva__opcion:hover {
	border-color: var(--senal-boton);
}

.reserva__opcion span {
	font-family: var(--fuente-texto);
	font-size: var(--txt-xs);
	color: var(--texto-suave);
}

.reserva__opcion:disabled {
	opacity: 0.6;
	cursor: progress;
}

.reserva__dias h3 {
	font-size: var(--txt-m);
	margin-bottom: var(--e-3);
}

.reserva__aviso {
	margin-bottom: var(--e-4);
	padding: var(--e-3) var(--e-4);
	border-radius: var(--radio);
	background: color-mix(in oklch, var(--senal) 18%, var(--crema));
	border: 1px solid var(--senal);
	font-size: var(--txt-s);
}

/* Descuentos por colectivo: vive dentro del bloque verde de tarifas, así que
   hereda su color y solo necesita separarse con una superficie más honda. */
.descuentos {
	margin-top: var(--e-6);
	padding: var(--e-5);
	border-radius: var(--radio-g);
	background: var(--superficie);
	border: 1px solid var(--borde);
}

.descuentos h3 {
	margin-top: 0;
	font-size: var(--txt-m);
}

.descuentos p {
	margin-bottom: 0;
	max-width: var(--medida);
}

/* --- Columnas plegables del pie (solo móvil) ----------------------------- */

.pie__col--plegable > summary {
	list-style: none;
	cursor: default;
}

.pie__col--plegable > summary::-webkit-details-marker {
	display: none;
}

@media (max-width: 48rem) {
	.pie__col--plegable > summary {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--e-3);
		cursor: pointer;
		padding-block: var(--e-3);
		border-bottom: 1px solid color-mix(in oklch, var(--texto) 18%, transparent);
	}

	/* Signo propio: el triangulito del navegador no se ve sobre el verde. */
	.pie__col--plegable > summary::after {
		content: "";
		width: 0.6rem;
		height: 0.6rem;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: rotate(45deg) translate(-2px, -2px);
		transition: transform var(--rapido) var(--curva);
	}

	.pie__col--plegable[open] > summary::after {
		transform: rotate(225deg) translate(-2px, -2px);
	}

	.pie__col--plegable > ul {
		padding-block: var(--e-3);
	}
}

/* --- Submenú de la navegación ------------------------------------------- */
/*
 * "Clases" despliega los servicios. En escritorio se abre al pasar por encima
 * y también con el teclado (:focus-within); en móvil, dentro del desplegable,
 * se queda siempre abierto como una lista sangrada: un acordeón dentro de otro
 * acordeón es un clic de más para llegar a lo mismo.
 */
.navegacion .menu-item-has-children {
	position: relative;
}

.navegacion .menu-item-has-children > a::after {
	content: "";
	display: inline-block;
	width: 0.42rem;
	height: 0.42rem;
	margin-left: 0.45rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translate(-1px, -2px);
}

.navegacion .sub-menu {
	position: absolute;
	top: calc(100% + 0.65rem);
	left: 50%;
	transform: translateX(-50%);
	z-index: 10;
	display: grid;
	gap: 0;
	min-width: 15rem;
	padding: var(--e-3);
	list-style: none;
	border-radius: 1.1rem;
	background: color-mix(in oklch, var(--crema) 94%, transparent);
	backdrop-filter: blur(20px) saturate(180%);
	-webkit-backdrop-filter: blur(20px) saturate(180%);
	border: 1px solid color-mix(in oklch, var(--crema) 70%, transparent);
	box-shadow: 0 12px 34px oklch(0.2 0.03 150 / 0.22);
	opacity: 0;
	visibility: hidden;
	transition:
		opacity var(--rapido) var(--curva),
		visibility var(--rapido) var(--curva);
}

/* El puente invisible evita que el submenú se cierre al cruzar el hueco entre
   el enlace y la caja: es el fallo clásico de los desplegables al pasar el ratón. */
.navegacion .menu-item-has-children::after {
	content: "";
	position: absolute;
	inset: 100% 0 auto;
	height: 0.8rem;
}

.navegacion .menu-item-has-children:hover > .sub-menu,
.navegacion .menu-item-has-children:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
}

.navegacion .sub-menu a {
	display: block;
	padding: var(--e-2) var(--e-3);
	border-radius: 0.6rem;
	white-space: nowrap;
}

.navegacion .sub-menu a:hover {
	background: color-mix(in oklch, var(--verde) 12%, transparent);
	text-decoration: none;
}

@media (max-width: 48rem) {
	/* Dentro del desplegable de móvil: lista sangrada, siempre visible. */
	.navegacion .menu-item-has-children > a::after {
		display: none;
	}

	.navegacion .menu-item-has-children::after {
		display: none;
	}

	.navegacion .sub-menu {
		position: static;
		transform: none;
		opacity: 1;
		visibility: visible;
		min-width: 0;
		padding: 0 0 var(--e-2) var(--e-4);
		border: 0;
		border-radius: 0;
		background: transparent;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
		box-shadow: none;
	}

	.navegacion .sub-menu a {
		padding: var(--e-2) 0;
		font-size: var(--txt-s);
		border-bottom: 0;
	}
}

/* --- Otros servicios del box --------------------------------------------- */
/* Tarjetas de texto, sin iconos: la web antigua tenía cinco iconos sueltos que
   no explicaban nada. Lo que vende aquí es el detalle, no el pictograma. */

.servicios-extra {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: var(--e-5);
	margin-top: var(--e-6);
}

.servicio-extra {
	padding: var(--e-5);
	border-radius: var(--radio-g);
	background: var(--superficie);
	border: 1px solid var(--borde);
}

.servicio-extra h3 {
	margin-top: 0;
	margin-bottom: var(--e-3);
	font-size: var(--txt-m);
}

.servicio-extra p {
	margin-bottom: 0;
	color: var(--texto-suave);
	font-size: var(--txt-s);
}

/* Logotipo propio de una clase (hoy solo CrossFit Kids). Va sobre la foto, no
   en su lugar: el logo dice de quién es la clase y la foto dice cómo es. */
.servicio__marca {
	display: block;
	max-width: 13rem;
	margin: 0 auto var(--e-5);
}

/* Hereda de .duo__figura img un recorte 4/3 pensado para fotos, que a un
   logotipo vertical le corta el nombre. Se le devuelve su proporción. */
.servicio__marca img {
	width: 100%;
	height: auto;
	aspect-ratio: auto;
	object-fit: contain;
}

@media (max-width: 48rem) {
	.servicio__marca {
		max-width: 10rem;
	}
}

/* --- Tablas de las páginas legales ------------------------------------- */
/* Los textos del abogado vienen con tablas (tratamientos, cookies,
   transferencias). Van dentro de .tabla-scroll para que en móvil desborde la
   tabla dentro de su caja y no la página: la web no baila. */

.tabla-scroll {
	overflow-x: auto;
	margin-block: var(--e-5);
	border: 1px solid var(--borde);
	border-radius: var(--radio-g);
	background: var(--superficie);
}

.tabla-scroll table {
	width: 100%;
	min-width: 32rem;
	border-collapse: collapse;
	font-size: var(--txt-s);
}

.tabla-scroll th,
.tabla-scroll td {
	padding: var(--e-3) var(--e-4);
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--borde);
}

.tabla-scroll thead th {
	font-family: var(--fuente-titulo);
	font-weight: var(--peso-macizo);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: var(--txt-xs);
	color: var(--tinta-suave);
	background: var(--hormigon, transparent);
}

.tabla-scroll tbody th {
	font-weight: var(--peso-fuerte);
	white-space: nowrap;
}

.tabla-scroll tr:last-child th,
.tabla-scroll tr:last-child td {
	border-bottom: 0;
}

.contenido-pagina code {
	font-size: 0.92em;
	overflow-wrap: anywhere;
}

/* --- Banner de cookies (Complianz) ------------------------------------- */
/* Complianz se pinta con sus propias variables CSS y deja vacías las que no se
   rellenan desde su asistente: sin fondo, el banner se transparentaba sobre la
   crema de la página y no se leía como una capa aparte. Se rellenan aquí, que
   es su canal de estilos oficial (poner `background` a pelo pierde: sus reglas
   cargan después). Los colores de los botones sí vienen de su configuración. */

.cmplz-cookiebanner {
	--cmplz_banner_background_color: #fff;
	--cmplz_banner_border_color: #cccfc6;
	--cmplz_banner_border_width: 1px 1px 1px 1px;
	--cmplz_text_color: #19221a;
	--cmplz_hyperlink_color: #1f652f;
	--cmplz_slider_inactive_color: #cccfc6;
	--cmplz_slider_bullet_color: #fff;
	box-shadow: var(--sombra);
}