/* ===========================================================
   Teacher Ame's Bookclub — estilos del tema hijo

   La paleta sale del logo (el búho con lentes): teal, dorado
   y crema. Los tokens de marca de :root no se tocan; lo que
   sigue son valores derivados de esos mismos colores.
   =========================================================== */

:root {
	/* --- Marca (no cambiar sin revisar el logo) --- */
	--tabc-crema: #F5E3D3;
	--tabc-teal: #1B6B6B;
	--tabc-teal-oscuro: #0F4A4A;
	--tabc-dorado: #E0A63E;
	--tabc-marron: #8B5E3C;
	--tabc-texto: #2B2420;
	--tabc-blanco: #FFFFFF;
	--tabc-radio: 14px;
	--tabc-max-width: 1140px;

	/* --- Derivados: neutros con sesgo teal, no grises planos --- */
	--tabc-crema-suave: #FCF5EE;
	--tabc-texto-suave: #6B6560;
	--tabc-linea: rgba(15, 74, 74, 0.14);
	--tabc-linea-tenue: rgba(15, 74, 74, 0.07);
	--tabc-teal-velo: rgba(27, 107, 107, 0.08);

	/* --- Sombras: teñidas de teal para que no se vean sucias --- */
	--tabc-sombra-sm: 0 1px 2px rgba(15, 74, 74, 0.06), 0 2px 8px rgba(15, 74, 74, 0.05);
	/* Sombra del header: tres capas. Una pegada al borde que hace de canto,
	   otra media y una muy difuminada que da la sensación de altura. Es lo
	   que separa el header blanco del contenido, que también es blanco. */
	--tabc-sombra-header:
		0 1px 1px rgba(15, 74, 74, 0.05),
		0 4px 10px -4px rgba(15, 74, 74, 0.10),
		0 12px 28px -12px rgba(15, 74, 74, 0.14);
	--tabc-sombra-header-alta:
		0 1px 1px rgba(15, 74, 74, 0.06),
		0 6px 14px -4px rgba(15, 74, 74, 0.13),
		0 18px 40px -14px rgba(15, 74, 74, 0.20);
	--tabc-sombra-md: 0 4px 12px rgba(15, 74, 74, 0.08), 0 12px 32px rgba(15, 74, 74, 0.08);
	--tabc-sombra-lg: 0 8px 20px rgba(15, 74, 74, 0.10), 0 24px 56px rgba(15, 74, 74, 0.12);

	/* --- Tipografía --- */
	--tabc-display: "Fraunces", ui-serif, Georgia, "Times New Roman", serif;
	--tabc-cuerpo: "Karla", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

	--tabc-t-h1: clamp(2.1rem, 1.35rem + 3.1vw, 3.4rem);
	--tabc-t-h2: clamp(1.6rem, 1.22rem + 1.6vw, 2.35rem);
	--tabc-t-h3: clamp(1.12rem, 1.03rem + 0.35vw, 1.3rem);
	--tabc-t-entrada: clamp(1.02rem, 0.97rem + 0.24vw, 1.16rem);

	/* --- Ritmo vertical --- */
	--tabc-seccion: clamp(56px, 7.5vw, 104px);
	--tabc-transicion: 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

* { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	/* El header flota sobre el contenido: sin esto, al pulsar un enlace de
	   ancla (#unete, #sobre) el título de destino quedaría oculto debajo. */
	scroll-padding-top: 110px;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	color: var(--tabc-texto);
	background: var(--tabc-blanco);
	font-family: var(--tabc-cuerpo);
	font-size: 1.05rem;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

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

a { color: var(--tabc-teal); }

/* Foco visible y coherente en toda la web (accesibilidad de teclado). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
	outline: 3px solid var(--tabc-dorado);
	outline-offset: 3px;
	border-radius: 4px;
}

h1, h2, h3 {
	font-family: var(--tabc-display);
	font-weight: 600;
	line-height: 1.15;
	text-wrap: balance;
	color: var(--tabc-teal-oscuro);
}

.tabc-container {
	max-width: var(--tabc-max-width);
	margin: 0 auto;
	padding: 0 24px;
}

/* ---------- Header ---------- */
.tabc-header {
	background: var(--tabc-blanco);
	position: sticky;
	top: 0;
	z-index: 100;
	/* Separación visible desde el primer momento, sin esperar al scroll.
	   Hace falta porque en Blog, Galería y Contacto el header es blanco y
	   el contenido también: sin esto no se distingue dónde acaba uno y
	   empieza el otro. En la portada esta regla se anula, porque allí el
	   hero oscuro ya hace de separación. */
	border-bottom: 1px solid var(--tabc-linea-tenue);
	box-shadow: var(--tabc-sombra-header);
	transition: box-shadow var(--tabc-transicion),
	            border-color var(--tabc-transicion),
	            background-color var(--tabc-transicion);
}
/* Al bajar, el header se compacta y la sombra se hace más profunda:
   refuerza que está flotando por encima del contenido. */
.tabc-header.is-scrolled {
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: saturate(180%) blur(12px);
	-webkit-backdrop-filter: saturate(180%) blur(12px);
	border-bottom-color: var(--tabc-linea);
	box-shadow: var(--tabc-sombra-header-alta);
}
.tabc-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 16px 24px;
	transition: padding var(--tabc-transicion);
}
.tabc-header.is-scrolled .tabc-header-inner { padding-top: 9px; padding-bottom: 9px; }

.tabc-logo { display: inline-flex; align-items: center; text-decoration: none; }
.tabc-logo img {
	max-height: 92px;
	width: auto;
	transition: max-height var(--tabc-transicion);
}
/* Al hacer scroll se reduce, pero sigue siendo legible. */
.tabc-header.is-scrolled .tabc-logo img { max-height: 64px; }
.tabc-logo-text {
	font-family: var(--tabc-display);
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--tabc-teal-oscuro);
}

.tabc-nav-list {
	display: flex;
	align-items: center;
	gap: 30px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.tabc-nav-list a {
	position: relative;
	display: inline-block;
	text-decoration: none;
	color: var(--tabc-teal-oscuro);
	font-weight: 600;
	font-size: 0.97rem;
	padding: 4px 0;
}
/* Subrayado que crece desde la izquierda, en vez de un cambio de color seco. */
.tabc-nav-list a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 2px;
	background: var(--tabc-dorado);
	border-radius: 2px;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--tabc-transicion);
}
.tabc-nav-list a:hover::after,
.tabc-nav-list .current-menu-item > a::after { transform: scaleX(1); }

/* ---- Header transparente sobre el hero de la portada ----

   Va al revés de lo que parece natural: en la portada el header NACE
   transparente desde el CSS, y el JS solo le añade .is-solido cuando ya se
   ha pasado el hero. Si fuera al contrario (sólido de fábrica y el JS lo
   vuelve transparente), se vería un fogonazo blanco en cada carga, porque
   el script va en el pie y llega después del primer pintado.

   Cuelga de html.tabc-js, que se marca en el <head>: sin JavaScript nadie
   podría devolver el fondo sólido al bajar, así que en ese caso el header
   se queda opaco de principio a fin, que es lo legible. */
html.tabc-js body.tabc-portada-hero .tabc-header {
	/* Fixed, no sticky. Es la clave de todo: un header sticky SIGUE
	   ocupando su hueco en el layout, así que empujaría el hero hacia
	   abajo y dejaría una banda blanca arriba. Al sacarlo del flujo, el
	   hero empieza en el píxel 0 y el header queda flotando encima. */
	position: fixed;
	left: 0;
	right: 0;
	background: transparent;
	border-bottom-color: transparent;
	box-shadow: none;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}
html.tabc-js body.tabc-portada-hero .tabc-header .tabc-nav-list a,
html.tabc-js body.tabc-portada-hero .tabc-header .tabc-logo-text {
	color: var(--tabc-hero-texto);
	/* El vídeo cambia bajo el menú: la sombra asegura que se lea siempre. */
	text-shadow: 0 1px 12px rgba(7, 36, 35, 0.55);
}
html.tabc-js body.tabc-portada-hero .tabc-header .tabc-menu-toggle span {
	background: var(--tabc-hero-texto);
	box-shadow: 0 1px 6px rgba(7, 36, 35, 0.5);
}
html.tabc-js body.tabc-portada-hero .tabc-header .tabc-logo img {
	filter: drop-shadow(0 4px 16px rgba(7, 36, 35, 0.55));
}

/* Ya se pasó el hero (o está abierto el menú móvil): vuelve el header normal. */
html.tabc-js body.tabc-portada-hero .tabc-header.is-solido {
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: saturate(180%) blur(12px);
	-webkit-backdrop-filter: saturate(180%) blur(12px);
	border-bottom-color: var(--tabc-linea);
	box-shadow: var(--tabc-sombra-header-alta);
}
html.tabc-js body.tabc-portada-hero .tabc-header.is-solido .tabc-nav-list a,
html.tabc-js body.tabc-portada-hero .tabc-header.is-solido .tabc-logo-text {
	color: var(--tabc-teal-oscuro);
	text-shadow: none;
}
html.tabc-js body.tabc-portada-hero .tabc-header.is-solido .tabc-menu-toggle span {
	background: var(--tabc-teal-oscuro);
	box-shadow: none;
}
html.tabc-js body.tabc-portada-hero .tabc-header.is-solido .tabc-logo img {
	filter: none;
}

.tabc-menu-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	padding: 0;
	background: none;
	border: none;
	cursor: pointer;
}
.tabc-menu-toggle span {
	display: block;
	width: 26px;
	height: 2px;
	background: var(--tabc-teal-oscuro);
	border-radius: 2px;
	transition: transform var(--tabc-transicion), opacity 140ms linear;
}
/* Hamburguesa → X */
.tabc-menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.tabc-menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.tabc-menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Botones ---------- */
.tabc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 15px 30px;
	border-radius: 999px;
	text-decoration: none;
	font-family: var(--tabc-cuerpo);
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.2;
	cursor: pointer;
	border: 2px solid transparent;
	transition: transform var(--tabc-transicion),
	            box-shadow var(--tabc-transicion),
	            background-color var(--tabc-transicion),
	            color var(--tabc-transicion);
}
.tabc-btn-primary {
	background: var(--tabc-teal);
	color: var(--tabc-blanco);
	box-shadow: 0 2px 8px rgba(27, 107, 107, 0.25);
}
.tabc-btn-primary:hover {
	background: var(--tabc-teal-oscuro);
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(27, 107, 107, 0.32);
}
.tabc-btn-primary:active { transform: translateY(0); }

.tabc-btn-secundario {
	background: transparent;
	color: var(--tabc-teal);
	border-color: var(--tabc-teal);
}
.tabc-btn-secundario:hover {
	background: var(--tabc-teal);
	color: var(--tabc-blanco);
	transform: translateY(-2px);
}

/* Botón sobre fondo teal (CTA final) */
.tabc-cta-final .tabc-btn-primary {
	background: var(--tabc-blanco);
	color: var(--tabc-teal-oscuro);
}
.tabc-cta-final .tabc-btn-primary:hover {
	background: var(--tabc-crema);
	color: var(--tabc-teal-oscuro);
}

/* ---------- Etiqueta / antetítulo ---------- */
.tabc-eyebrow {
	display: inline-block;
	font-family: var(--tabc-cuerpo);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--tabc-marron);
	margin: 0 0 14px;
}

/* ===========================================================
   HERO CON VÍDEO QUE AVANZA AL HACER SCROLL

   Los colores salen de la marca, no de una paleta aparte: el fondo
   es el teal oscuro del logo llevado casi a negro, y el acento es el
   mismo dorado que usan la etiqueta "Recomendado" y el botón de subir.
   Así el hero no parece otra web pegada encima del sitio.
   =========================================================== */
:root {
	--tabc-hero-fondo: #072423;   /* teal de marca llevado casi a negro */
	--tabc-hero-texto: #F7ECE1;   /* crema, un punto más claro para fondo oscuro */
}

.tabc-hero-scroll {
	position: relative;
	/* Cuatro pantallas de recorrido = el vídeo dura todo ese scroll. */
	height: 400vh;
	background: var(--tabc-hero-fondo);
}
/* En el teléfono, cuatro pantallas son muchos dedos antes de llegar al
   contenido. Con dos y media el vídeo se recorre entero igual, solo que
   más rápido. La clase la pone el JS. */
.tabc-hero-scroll.is-movil { height: 250vh; }
.tabc-hero-pin {
	position: sticky;
	top: 0;
	height: 100vh;
	width: 100%;
	overflow: hidden;
	background: var(--tabc-hero-fondo);
	color: var(--tabc-hero-texto);
}
.tabc-hero-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
/* Velo teal: oscurece el vídeo lo justo para que el texto se lea
   y de paso lo tiñe con el color de la marca. */
.tabc-hero-veil {
	position: absolute;
	inset: 0;
	background: rgba(7, 36, 35, 0.42);
}
.tabc-hero-fade { position: absolute; left: 0; right: 0; pointer-events: none; }
.tabc-hero-fade--top {
	top: 0;
	height: 38%;
	background: linear-gradient(to bottom, rgba(7, 36, 35, 0.92), transparent);
}
/* El de abajo cierra en opaco para empalmar con la sección siguiente. */
.tabc-hero-fade--bottom {
	bottom: 0;
	height: 48%;
	background: linear-gradient(to top, var(--tabc-hero-fondo), transparent);
}

/* Barra de progreso: va abajo, no arriba, porque el header es sticky
   y la taparía por completo. */
.tabc-hero-bar {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: rgba(247, 236, 225, 0.12);
	z-index: 6;
}
.tabc-hero-bar span {
	display: block;
	height: 100%;
	width: 0;
	background: linear-gradient(90deg, var(--tabc-dorado), var(--tabc-hero-texto));
	box-shadow: 0 0 12px rgba(224, 166, 62, 0.7);
}

/* Se aparta del header sticky, que mide unos 124px con el logo grande. */
.tabc-hero-eyebrow {
	position: absolute;
	top: clamp(112px, 15vh, 150px);
	left: 0;
	right: 0;
	text-align: center;
	z-index: 5;
	margin: 0;
	font-size: 0.75rem;
	letter-spacing: 0.34em;
	text-transform: uppercase;
	color: rgba(247, 236, 225, 0.75);
	font-weight: 700;
}

.tabc-hero-stage {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 5;
	padding: 0 24px;
}
.tabc-hero-layer {
	position: absolute;
	max-width: 900px;
	text-align: center;
	opacity: 0;
	will-change: opacity, transform;
}
/* La primera capa se ve ya sin JS. */
.tabc-hero-layer.is-a { opacity: 1; }

.tabc-hero-layer h1,
.tabc-hero-layer h2 {
	font-family: var(--tabc-display);
	font-weight: 600;
	color: var(--tabc-hero-texto);
	letter-spacing: -0.02em;
	margin: 0;
}
.tabc-hero-layer h1 { font-size: clamp(2.6rem, 7vw, 5.6rem); line-height: 1.02; }
.tabc-hero-layer h2 { font-size: clamp(2.1rem, 5.2vw, 4.3rem); line-height: 1.06; }
.tabc-hero-layer p {
	margin: 24px auto 0;
	max-width: 52ch;
	font-size: clamp(1rem, 1.3vw, 1.18rem);
	line-height: 1.6;
	color: rgba(247, 236, 225, 0.84);
}
.tabc-hero-kicker {
	display: inline-block;
	margin-bottom: 18px;
	font-size: 0.75rem;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--tabc-dorado);
	font-weight: 700;
}
.tabc-hero-cta {
	display: flex;
	gap: 16px;
	justify-content: center;
	flex-wrap: wrap;
	margin-top: 34px;
}

/* Botones sobre fondo oscuro: el dorado de marca y un cristal translúcido. */
.tabc-btn-glass-primary,
.tabc-btn-glass {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 16px 32px;
	border-radius: 999px;
	font-family: var(--tabc-cuerpo);
	font-weight: 700;
	font-size: 1rem;
	text-decoration: none;
	border: 1px solid transparent;
	transition: transform var(--tabc-transicion), box-shadow var(--tabc-transicion),
	            background-color var(--tabc-transicion), border-color var(--tabc-transicion);
}
.tabc-btn-glass-primary {
	color: var(--tabc-texto);
	background: linear-gradient(180deg, #F0CE8C, var(--tabc-dorado));
	box-shadow: 0 10px 34px rgba(224, 166, 62, 0.42);
}
.tabc-btn-glass-primary:hover {
	transform: translateY(-3px);
	box-shadow: 0 16px 48px rgba(224, 166, 62, 0.55);
	color: var(--tabc-texto);
}
.tabc-btn-glass {
	color: var(--tabc-hero-texto);
	background: rgba(247, 236, 225, 0.10);
	border-color: rgba(247, 236, 225, 0.26);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
}
.tabc-btn-glass:hover {
	transform: translateY(-3px);
	background: rgba(247, 236, 225, 0.18);
	border-color: rgba(247, 236, 225, 0.45);
	color: var(--tabc-hero-texto);
}

.tabc-hero-hint {
	position: absolute;
	bottom: 34px;
	left: 0;
	right: 0;
	z-index: 5;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	color: rgba(247, 236, 225, 0.62);
	pointer-events: none;
}
.tabc-hero-hint span { font-size: 0.68rem; letter-spacing: 0.28em; text-transform: uppercase; }
.tabc-hero-hint i {
	width: 1px;
	height: 38px;
	background: linear-gradient(to bottom, rgba(247, 236, 225, 0.6), transparent);
}

/* ---- Versión estática ----
   El hero pasa a ser una portada normal de una pantalla, con la foto de
   fondo. Es el estado POR DEFECTO: el scrubbing solo se activa cuando
   tabc-hero.js añade .is-animado. Hacerlo en este orden cubre de una vez
   todos los casos en los que no debe animarse — móvil, "menos movimiento",
   JavaScript desactivado y también que el script no llegue a cargarse—,
   y evita el peor escenario: 400vh de pantallas vacías si algo falla. */
.tabc-hero-scroll:not(.is-animado){
	height: auto;
	min-height: 100vh;
	/* En el móvil, 100vh cuenta la altura CON la barra del navegador
	   escondida, así que el hero acaba siendo más alto que la pantalla y
	   parece que no hay nada debajo. 100svh usa la altura realmente
	   visible. La línea de 100vh de arriba queda como respaldo para
	   navegadores viejos que no entiendan svh. */
	min-height: 100svh;
}
.tabc-hero-scroll:not(.is-animado) .tabc-hero-pin{
	position: relative;
	height: auto;
	min-height: 100vh;
	min-height: 100svh;
	display: flex;
	align-items: center;
	/* Sin vídeo detrás no hay nada que recortar, y dejarlo en hidden podría
	   cortar el contenido si el texto crece más de lo previsto. */
	overflow: visible;
	/* La foto del hero hace de fondo, ya que el vídeo no se carga. */
	background-size: cover;
	background-position: center;
}
.tabc-hero-scroll:not(.is-animado) .tabc-hero-video,
.tabc-hero-scroll:not(.is-animado) .tabc-hero-bar,
.tabc-hero-scroll:not(.is-animado) .tabc-hero-hint { display: none; }

.tabc-hero-scroll:not(.is-animado) .tabc-hero-stage{
	position: relative;
	inset: auto;
	flex-direction: column;
	gap: 30px;
	padding: clamp(150px, 22vh, 200px) 24px clamp(64px, 10vh, 96px);
	width: 100%;
}
.tabc-hero-scroll:not(.is-animado) .tabc-hero-layer{
	position: relative;
	opacity: 1;
	transform: none;
	pointer-events: auto;
}
/* Se oculta el 2.º momento para no apilar tres bloques de texto,
   pero el 3.º se queda: ahí están los botones que llevan a WhatsApp,
   y en móvil es justo donde más falta hacen. */
.tabc-hero-scroll:not(.is-animado) .tabc-hero-layer.is-b{ display: none; }
.tabc-hero-scroll:not(.is-animado) .tabc-hero-layer.is-c h2{ display: none; }
.tabc-hero-scroll:not(.is-animado) .tabc-hero-layer.is-c .tabc-hero-cta{ margin-top: 0; }
.tabc-hero-scroll:not(.is-animado) .tabc-hero-eyebrow{ top: clamp(96px, 13vh, 130px); }

/* ---------- Hero antiguo (se conserva para el Club de Niños) ---------- */
.tabc-hero {
	background:
		radial-gradient(80% 120% at 85% 0%, rgba(224, 166, 62, 0.16) 0%, rgba(224, 166, 62, 0) 60%),
		var(--tabc-crema);
	padding: clamp(48px, 6vw, 88px) 0 clamp(52px, 7vw, 96px);
	overflow: hidden;
}
.tabc-hero-inner {
	display: grid;
	/* Asimétrico a propósito: el texto manda, la foto acompaña. */
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	gap: clamp(32px, 5vw, 64px);
	align-items: center;
}
.tabc-hero-text h1 {
	font-size: var(--tabc-t-h1);
	margin: 0 0 18px;
	letter-spacing: -0.015em;
}
.tabc-hero-text > p {
	font-size: var(--tabc-t-entrada);
	color: var(--tabc-texto);
	max-width: 46ch;
	margin: 0 0 30px;
}
/* z-index:0 crea contexto de apilamiento propio: sin esto, el marco dorado
   de ::before (z-index:-1) quedaría pintado por debajo del fondo del hero. */
.tabc-hero-image { position: relative; z-index: 0; }
.tabc-hero-image img {
	width: 100%;
	border-radius: var(--tabc-radio);
	box-shadow: var(--tabc-sombra-lg);
	aspect-ratio: 4 / 5;
	object-fit: cover;
}
/* Marco desplazado: da profundidad sin recurrir a parallax. */
.tabc-hero-image::before {
	content: "";
	position: absolute;
	inset: 18px -18px -18px 18px;
	border: 2px solid var(--tabc-dorado);
	border-radius: var(--tabc-radio);
	opacity: 0.5;
	z-index: -1;
}

/* ---------- Secciones ---------- */
.tabc-section { padding: var(--tabc-seccion) 0; }
.tabc-section h2 {
	font-size: var(--tabc-t-h2);
	margin: 0 0 18px;
	letter-spacing: -0.01em;
}
/* Cabecera de sección centrada, con ancho de lectura cómodo. */
.tabc-section-head {
	text-align: center;
	max-width: 62ch;
	margin: 0 auto clamp(32px, 4vw, 52px);
}
.tabc-section-head p {
	color: var(--tabc-texto-suave);
	font-size: var(--tabc-t-entrada);
	margin: 0;
}

/* Alternancia de fondos para dar ritmo: no todas las secciones son iguales. */
.tabc-bg-suave { background: var(--tabc-crema-suave); }
.tabc-bg-crema { background: var(--tabc-crema); }

.tabc-grid-2 {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(24px, 3vw, 36px);
}
.tabc-grid-3 {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(22px, 2.4vw, 30px);
	align-items: stretch;
}

/* ---------- Bloque de texto + foto (Sobre el club) ---------- */
.tabc-split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(32px, 5vw, 64px);
	align-items: center;
}
.tabc-split-media img {
	width: 100%;
	border-radius: var(--tabc-radio);
	box-shadow: var(--tabc-sombra-md);
	aspect-ratio: 4 / 3;
	object-fit: cover;
}
.tabc-split-texto h2 { text-align: left; }
.tabc-split-texto p { color: var(--tabc-texto); margin: 0 0 16px; max-width: 52ch; }
.tabc-split-texto p:last-child { margin-bottom: 0; }
/* Invierte el orden en la variante alterna, sin romper el DOM ni el lector de pantalla. */
.tabc-split-invertido .tabc-split-media { order: 2; }

/* ---------- Tarjetas ---------- */
.tabc-card {
	background: var(--tabc-blanco);
	border: 1px solid var(--tabc-linea-tenue);
	border-radius: var(--tabc-radio);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform var(--tabc-transicion), box-shadow var(--tabc-transicion);
}
.tabc-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--tabc-sombra-md);
}
.tabc-card-media { overflow: hidden; }
.tabc-card-media img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	transition: transform 600ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.tabc-card:hover .tabc-card-media img { transform: scale(1.04); }
.tabc-card-cuerpo { padding: 26px 24px 28px; }
.tabc-card h3 {
	font-size: var(--tabc-t-h3);
	margin: 0 0 10px;
}
.tabc-card p { margin: 0; color: var(--tabc-texto-suave); }

/* Tarjeta sin foto (sobre fondo crema) */
.tabc-bg-crema .tabc-card,
.tabc-bg-suave .tabc-card { background: var(--tabc-blanco); }

/* ---------- Planes / precios ---------- */
.tabc-planes .tabc-grid-3 { align-items: center; }

.tabc-plan {
	background: var(--tabc-blanco);
	border: 1px solid var(--tabc-linea);
	border-radius: var(--tabc-radio);
	padding: 34px 26px 30px;
	text-align: center;
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	transition: transform var(--tabc-transicion), box-shadow var(--tabc-transicion), border-color var(--tabc-transicion);
}
.tabc-plan:hover {
	transform: translateY(-4px);
	box-shadow: var(--tabc-sombra-md);
	border-color: var(--tabc-teal);
}
.tabc-plan h3 { font-size: var(--tabc-t-h3); margin: 0 0 6px; }
.tabc-plan p { color: var(--tabc-texto-suave); margin: 0 0 12px; }
/* Empuja el botón al fondo para que todos queden alineados. */
.tabc-plan .tabc-btn { margin-top: auto; align-self: center; }

/* El plan recomendado: más peso visual, no solo más grande. */
.tabc-plan-destacado {
	border-color: var(--tabc-teal);
	border-width: 2px;
	background: var(--tabc-blanco);
	padding-top: 42px;
	box-shadow: var(--tabc-sombra-lg);
	transform: scale(1.045);
	z-index: 1;
}
.tabc-plan-destacado:hover { transform: scale(1.045) translateY(-4px); }

.tabc-plan-badge {
	position: absolute;
	top: -13px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--tabc-dorado);
	color: var(--tabc-texto);
	padding: 5px 18px;
	border-radius: 999px;
	font-size: 0.76rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
	box-shadow: 0 2px 8px rgba(224, 166, 62, 0.4);
}
.tabc-plan-precio {
	font-family: var(--tabc-display);
	font-size: clamp(2.1rem, 1.7rem + 1.6vw, 2.7rem);
	font-weight: 700;
	color: var(--tabc-teal-oscuro);
	line-height: 1.1;
	margin: 14px 0 4px !important;
	font-variant-numeric: tabular-nums;
}
.tabc-plan-precio span {
	display: block;
	font-family: var(--tabc-cuerpo);
	font-size: 0.86rem;
	font-weight: 500;
	color: var(--tabc-texto-suave);
	margin-top: 4px;
}

/* ---------- Reseñas ---------- */
.tabc-resenas-media img {
	width: 100%;
	max-width: 620px;
	margin: 0 auto;
	border-radius: var(--tabc-radio);
	box-shadow: var(--tabc-sombra-md);
	aspect-ratio: 16 / 10;
	object-fit: cover;
}
.tabc-resenas-enlace {
	margin: clamp(26px, 3.5vw, 40px) 0 0;
	text-align: center;
}

/* Instagram bajo las reseñas de Inicio: misma sección, separado por una
   línea fina con un rombo dorado para que se lea como bloque aparte sin
   romper el fondo crema con otra sección. El titular es h3 (va dentro de la
   sección de reseñas) pero se ve con el tamaño de un h2. */
.tabc-resenas-instagram {
	position: relative;
	margin-top: clamp(48px, 6vw, 80px);
	padding-top: clamp(40px, 5vw, 64px);
	border-top: 1px solid var(--tabc-linea);
}
.tabc-resenas-instagram::before {
	content: "";
	position: absolute;
	top: -6px;
	left: 50%;
	width: 11px;
	height: 11px;
	background: var(--tabc-dorado);
	transform: translateX(-50%) rotate(45deg);
}
.tabc-resenas-instagram h3 {
	font-size: var(--tabc-t-h2);
	margin: 0 0 18px;
	letter-spacing: -0.01em;
}

/* Estado vacío digno mientras no esté el plugin de testimonios.
   Antes era una caja amarilla que parecía un error de la web. */
.tabc-placeholder-note {
	max-width: 46ch;
	margin: 28px auto 0;
	padding: 18px 22px;
	background: var(--tabc-teal-velo);
	border: 1px dashed var(--tabc-linea);
	border-radius: var(--tabc-radio);
	text-align: center;
	color: var(--tabc-texto-suave);
	font-size: 0.94rem;
	font-style: normal;
}

/* ---------- CTA final ---------- */
.tabc-cta-final {
	background:
		radial-gradient(70% 140% at 50% 0%, rgba(224, 166, 62, 0.20) 0%, rgba(224, 166, 62, 0) 62%),
		var(--tabc-teal);
	color: var(--tabc-blanco);
	text-align: center;
}
.tabc-cta-final h2 { color: var(--tabc-blanco); margin-bottom: 22px; }
.tabc-cta-final p {
	max-width: 52ch;
	margin: 0 auto 28px;
	color: rgba(255, 255, 255, 0.9);
	font-size: var(--tabc-t-entrada);
}

/* ---------- Página 404 ----------
   Mismo lenguaje que el resto: Fraunces para el número grande, en dorado de
   marca y muy suave para que haga de fondo y no compita con el titular. */
.tabc-404 {
	background:
		radial-gradient(60% 90% at 50% 0%, rgba(224, 166, 62, 0.14) 0%, rgba(224, 166, 62, 0) 70%),
		var(--tabc-blanco);
	text-align: center;
}
.tabc-404-inner { max-width: 720px; }
.tabc-404-numero {
	font-family: var(--tabc-display);
	font-size: clamp(6rem, 4rem + 10vw, 11rem);
	font-weight: 600;
	line-height: 0.9;
	letter-spacing: -0.04em;
	color: var(--tabc-dorado);
	opacity: 0.35;
	margin: 0 0 8px;
}
.tabc-404 h1 {
	font-size: var(--tabc-t-h1);
	margin: 0 0 18px;
}
.tabc-404-texto {
	max-width: 52ch;
	margin: 0 auto 32px;
	color: var(--tabc-texto-suave);
	font-size: var(--tabc-t-entrada);
}
.tabc-404-botones {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
	margin-bottom: 36px;
}
.tabc-404-buscar {
	display: flex;
	max-width: 440px;
	margin: 0 auto;
	border: 1px solid var(--tabc-linea);
	border-radius: 999px;
	background: var(--tabc-blanco);
	box-shadow: var(--tabc-sombra-sm);
	overflow: hidden;
	transition: box-shadow var(--tabc-transicion), border-color var(--tabc-transicion);
}
.tabc-404-buscar:focus-within {
	border-color: var(--tabc-teal);
	box-shadow: 0 0 0 3px var(--tabc-teal-velo), var(--tabc-sombra-sm);
}
.tabc-404-buscar input {
	flex: 1;
	min-width: 0;
	border: 0;
	padding: 13px 20px;
	font: inherit;
	color: var(--tabc-texto);
	background: transparent;
	outline: none;
}
.tabc-404-buscar button {
	border: 0;
	padding: 0 24px;
	font-family: var(--tabc-cuerpo);
	font-weight: 700;
	color: var(--tabc-blanco);
	background: var(--tabc-teal);
	cursor: pointer;
	transition: background-color var(--tabc-transicion);
}
.tabc-404-buscar button:hover,
.tabc-404-buscar button:focus-visible { background: var(--tabc-teal-oscuro); }
.tabc-404 .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
.tabc-404-lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 20px;
}
.tabc-404-lista a {
	display: block;
	height: 100%;
	padding: 24px 26px;
	border-radius: var(--tabc-radio);
	background: var(--tabc-blanco);
	box-shadow: var(--tabc-sombra-sm);
	font-family: var(--tabc-display);
	font-size: var(--tabc-t-h3);
	line-height: 1.3;
	color: var(--tabc-teal-oscuro);
	text-decoration: none;
	transition: transform var(--tabc-transicion), box-shadow var(--tabc-transicion);
}
.tabc-404-lista a:hover {
	transform: translateY(-3px);
	box-shadow: var(--tabc-sombra-md);
}
.tabc-404-fecha {
	display: block;
	margin-bottom: 8px;
	font-family: var(--tabc-cuerpo);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--tabc-marron);
}

/* ---------- Club de Niños ---------- */
.tabc-hero-kids {
	background:
		radial-gradient(75% 120% at 15% 0%, rgba(224, 166, 62, 0.22) 0%, rgba(224, 166, 62, 0) 58%),
		#FFF6EC;
}
.tabc-kids-logo {
	width: clamp(88px, 11vw, 124px);
	height: auto;
	margin-bottom: 18px;
	filter: drop-shadow(0 6px 14px rgba(15, 74, 74, 0.16));
}
.tabc-hero-kids .tabc-hero-image img { aspect-ratio: 3 / 2; }

/* Equipo (Ame y Valentina) */
.tabc-equipo-media img {
	width: 100%;
	border-radius: var(--tabc-radio);
	box-shadow: var(--tabc-sombra-md);
	aspect-ratio: 3 / 4;
	object-fit: cover;
}
.tabc-equipo-fichas { display: grid; gap: 20px; align-content: center; }
.tabc-ficha {
	background: var(--tabc-blanco);
	border: 1px solid var(--tabc-linea-tenue);
	border-radius: var(--tabc-radio);
	padding: 24px 24px 26px;
}
.tabc-ficha h3 { margin: 0 0 8px; font-size: var(--tabc-t-h3); }
.tabc-ficha p { margin: 0; color: var(--tabc-texto-suave); }

/* Cierra la sección de equipo: va en la tipografía de titulares porque
   es una frase de remate, no un párrafo más de texto corrido. */
.tabc-equipo-cierre {
	margin: clamp(30px, 4vw, 46px) auto 0;
	max-width: 44ch;
	text-align: center;
	font-family: var(--tabc-display);
	font-size: clamp(1.15rem, 1.02rem + 0.6vw, 1.5rem);
	line-height: 1.35;
	color: var(--tabc-teal-oscuro);
	text-wrap: balance;
}

/* Galería de la experiencia */
.tabc-galeria {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(16px, 2vw, 24px);
}
.tabc-galeria img {
	width: 100%;
	border-radius: var(--tabc-radio);
	box-shadow: var(--tabc-sombra-sm);
	aspect-ratio: 3 / 2;
	object-fit: cover;
	transition: transform var(--tabc-transicion), box-shadow var(--tabc-transicion);
}
.tabc-galeria img:hover {
	transform: translateY(-4px);
	box-shadow: var(--tabc-sombra-md);
}

/* ---------- Mención al club de niños (portada) ----------
   Deliberadamente discreta: una sola banda, sin foto grande ni CTA
   destacado. El club infantil vive en otra web; aquí solo se menciona. */
.tabc-kids-mencion { padding-top: 0; }
.tabc-kids-mencion-caja {
	display: flex;
	align-items: center;
	gap: clamp(20px, 3vw, 34px);
	max-width: 900px;
	padding: clamp(24px, 3vw, 34px) clamp(24px, 3.5vw, 40px);
	background: var(--tabc-crema-suave);
	border: 1px solid var(--tabc-linea-tenue);
	border-radius: var(--tabc-radio);
}
.tabc-kids-mencion-logo {
	width: clamp(64px, 8vw, 88px);
	height: auto;
	flex-shrink: 0;
}
.tabc-kids-mencion-texto { flex: 1; }
.tabc-kids-mencion-texto h2 {
	font-size: var(--tabc-t-h3);
	margin: 0 0 6px;
	text-align: left;
}
.tabc-kids-mencion-texto p {
	margin: 0;
	color: var(--tabc-texto-suave);
	font-size: 0.97rem;
}
.tabc-kids-mencion .tabc-btn { flex-shrink: 0; }

/* ---------- Página de Galería ---------- */
.tabc-galeria-pagina h1 {
	font-size: var(--tabc-t-h2);
	margin: 0 0 18px;
}
.tabc-galeria-rejilla {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(14px, 1.8vw, 22px);
}
.tabc-galeria-rejilla img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: var(--tabc-radio);
	box-shadow: var(--tabc-sombra-sm);
	transition: transform var(--tabc-transicion), box-shadow var(--tabc-transicion);
}
.tabc-galeria-rejilla img:hover {
	transform: translateY(-4px);
	box-shadow: var(--tabc-sombra-md);
}

/* ---------- Reseñas de socias ----------
   Rejilla que se acomoda sola: con 5 tarjetas quedan 3 arriba y 2 abajo,
   sin necesidad de tocar nada si mañana se dejan 3 o 4. */
.tabc-resenas-rejilla {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: clamp(18px, 2.2vw, 26px);
}
.tabc-resena {
	margin: 0;
	padding: 30px 28px 26px;
	background: var(--tabc-blanco);
	border: 1px solid var(--tabc-linea-tenue);
	border-radius: var(--tabc-radio);
	display: flex;
	flex-direction: column;
	gap: 16px;
	transition: transform var(--tabc-transicion), box-shadow var(--tabc-transicion);
}
.tabc-resena:hover {
	transform: translateY(-4px);
	box-shadow: var(--tabc-sombra-md);
}
.tabc-resena blockquote {
	margin: 0;
	padding: 0;
	border: 0;
	font-family: var(--tabc-display);
	font-size: clamp(1.05rem, 0.98rem + 0.35vw, 1.22rem);
	line-height: 1.45;
	color: var(--tabc-teal-oscuro);
	position: relative;
}
/* Comilla decorativa: se marca aria-hidden por CSS content, que los
   lectores de pantalla ignoran de todos modos. */
.tabc-resena blockquote::before {
	content: "\201C";
	font-family: var(--tabc-display);
	font-size: 3rem;
	line-height: 0;
	color: var(--tabc-dorado);
	vertical-align: -0.35em;
	margin-right: 4px;
}
.tabc-resena figcaption {
	margin-top: auto;
	font-size: 0.86rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--tabc-texto-suave);
	font-style: normal;
	text-align: left;
}

/* Contenedor para lo que inyecten los plugins (Instagram, reseñas).
   No se les impone estilo: solo se les acota el ancho y se evita que
   un embed demasiado ancho saque barra horizontal a toda la página. */
.tabc-embed {
	max-width: 100%;
	overflow-x: auto;
}

/* ---------- Contacto ---------- */
.tabc-contacto .tabc-split-media img { aspect-ratio: 3 / 4; }
.tabc-contacto h1 {
	font-size: var(--tabc-t-h2);
	margin: 0 0 16px;
}
/* En Contacto la columna de la foto además lleva texto debajo. */
.tabc-contacto .tabc-split-media h2 {
	font-size: var(--tabc-t-h3);
	margin: 26px 0 8px;
}
.tabc-dato { margin: 0 0 6px; color: var(--tabc-texto-suave); }
.tabc-dato strong { color: var(--tabc-teal-oscuro); }

/* ---------- Formularios (WPForms) ---------- */
.wpforms-container { margin: 0 0 24px !important; }
.wpforms-field-label {
	font-family: var(--tabc-cuerpo) !important;
	font-weight: 600 !important;
	color: var(--tabc-teal-oscuro) !important;
}
.wpforms-container input[type="text"],
.wpforms-container input[type="email"],
.wpforms-container input[type="tel"],
.wpforms-container input[type="number"],
.wpforms-container select,
.wpforms-container textarea {
	width: 100%;
	padding: 12px 14px !important;
	border: 1px solid var(--tabc-linea) !important;
	border-radius: 10px !important;
	background: var(--tabc-blanco);
	font-family: var(--tabc-cuerpo) !important;
	font-size: 1rem !important;
	color: var(--tabc-texto);
	transition: border-color var(--tabc-transicion), box-shadow var(--tabc-transicion);
}
.wpforms-container input:focus,
.wpforms-container select:focus,
.wpforms-container textarea:focus {
	border-color: var(--tabc-teal) !important;
	box-shadow: 0 0 0 3px var(--tabc-teal-velo);
	outline: none;
}
.wpforms-container button[type="submit"] {
	background: var(--tabc-teal) !important;
	color: var(--tabc-blanco) !important;
	border: none !important;
	border-radius: 999px !important;
	padding: 14px 30px !important;
	font-family: var(--tabc-cuerpo) !important;
	font-weight: 700 !important;
	font-size: 1rem !important;
	cursor: pointer;
	transition: background-color var(--tabc-transicion), transform var(--tabc-transicion);
}
.wpforms-container button[type="submit"]:hover {
	background: var(--tabc-teal-oscuro) !important;
	transform: translateY(-2px);
}

/* ===========================================================
   Blog — el tema hijo no trae plantilla propia, así que esto
   estiliza el markup que genera Hello Elementor.
   =========================================================== */
.site-main {
	max-width: var(--tabc-max-width);
	margin: 0 auto;
	padding: var(--tabc-seccion) 24px;
}
.site-main .page-header { margin-bottom: clamp(28px, 4vw, 44px); }
/* El título alineado con el cuerpo del texto, no a todo lo ancho. */
.single .site-main .page-header,
.page .site-main .page-header { max-width: 68ch; margin-inline: auto; }
.site-main .page-header .entry-title {
	font-family: var(--tabc-display);
	font-size: var(--tabc-t-h2);
	color: var(--tabc-teal-oscuro);
	margin: 0 0 10px;
}
.site-main .archive-description { color: var(--tabc-texto-suave); margin: 0; }

/* Solo el listado de entradas es una rejilla. En una entrada o página
   individual, .page-content es el cuerpo del texto y no debe ser grid. */
.blog .site-main .page-content,
.archive .site-main .page-content,
.search .site-main .page-content {
	display: grid;
	gap: clamp(28px, 3.5vw, 44px);
}

.site-main article.post {
	background: var(--tabc-blanco);
	border: 1px solid var(--tabc-linea-tenue);
	border-radius: var(--tabc-radio);
	padding: 28px 26px 30px;
	transition: transform var(--tabc-transicion), box-shadow var(--tabc-transicion);
}
.site-main article.post:hover {
	transform: translateY(-3px);
	box-shadow: var(--tabc-sombra-md);
}
.site-main article.post .entry-title {
	font-family: var(--tabc-display);
	font-size: clamp(1.3rem, 1.15rem + 0.6vw, 1.7rem);
	margin: 0 0 14px;
	line-height: 1.2;
}
.site-main article.post .entry-title a {
	color: var(--tabc-teal-oscuro);
	text-decoration: none;
}
.site-main article.post .entry-title a:hover { color: var(--tabc-teal); text-decoration: underline; }
.site-main article.post img {
	border-radius: var(--tabc-radio);
	margin: 0 0 18px;
	width: 100%;
	object-fit: cover;
}
.site-main article.post p { color: var(--tabc-texto); }

/* Entrada o página individual: ancho de lectura cómodo, no a todo lo ancho.
   (Hello marca las entradas con .single y las páginas con .page.) */
.single .site-main .page-content,
.page .site-main .page-content {
	max-width: 68ch;
	margin-inline: auto;
}
.single .site-main .page-content h2,
.single .site-main .page-content h3,
.page .site-main .page-content h2,
.page .site-main .page-content h3 { margin-top: 1.8em; }
.single .site-main .page-content img,
.page .site-main .page-content img { border-radius: var(--tabc-radio); }

/* Contenido de las entradas (bloques de Gutenberg) */
.site-main .wp-block-image { margin: 2.2em 0; }
.site-main .wp-block-image img { width: 100%; }
.site-main .wp-block-image__caption,
.site-main figcaption {
	margin-top: 10px;
	font-size: 0.88rem;
	color: var(--tabc-texto-suave);
	text-align: center;
	font-style: italic;
}
.site-main .wp-block-list { padding-left: 1.25em; }
.site-main .wp-block-list li { margin-bottom: 12px; }
.site-main .wp-block-list li strong { color: var(--tabc-teal-oscuro); }
.site-main blockquote {
	margin: 2em 0;
	padding: 4px 0 4px 22px;
	border-left: 3px solid var(--tabc-dorado);
	font-family: var(--tabc-display);
	font-size: 1.15rem;
	color: var(--tabc-teal-oscuro);
}
.site-main .page-content a { color: var(--tabc-teal); }
.site-main .page-content a:hover { color: var(--tabc-teal-oscuro); }

.site-main .pagination,
.site-main .navigation { margin-top: 40px; }

/* ---------- Footer ---------- */
.tabc-footer {
	background: var(--tabc-teal-oscuro);
	color: var(--tabc-blanco);
	padding: clamp(48px, 6vw, 76px) 0 0;
}
.tabc-footer-inner {
	display: grid;
	/* La columna de marca pesa más que las de enlaces. */
	grid-template-columns: 1.3fr 1fr 1fr 1fr;
	gap: clamp(32px, 4vw, 56px);
	padding-bottom: clamp(36px, 4vw, 52px);
}
.tabc-footer p { color: rgba(255, 255, 255, 0.82); margin: 0; }
.tabc-footer a {
	color: var(--tabc-crema);
	text-decoration: none;
	transition: color var(--tabc-transicion);
}
.tabc-footer a:hover { color: var(--tabc-dorado); }

/* Columna de marca */
.tabc-footer-marca { display: grid; gap: 18px; justify-items: start; }
.tabc-footer-logo {
	display: inline-block;
	line-height: 0;
	transition: transform var(--tabc-transicion), opacity var(--tabc-transicion);
}
.tabc-footer-logo:hover {
	transform: translateY(-3px);
	opacity: 0.88;
}
.tabc-footer-logo img {
	max-height: 132px;
	width: auto;
	/* Sin recuadro ni círculo blanco: el logo va suelto sobre el teal.
	   El halo suave despega su fondo crema del fondo oscuro sin dibujar
	   un borde duro alrededor. */
	filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.28));
}
.tabc-footer-marca p { max-width: 38ch; }

/* Títulos de columna */
.tabc-footer-titulo {
	font-family: var(--tabc-display);
	color: var(--tabc-blanco);
	font-size: 1.12rem;
	font-weight: 600;
	margin: 0 0 16px;
}

.tabc-footer-menu,
.tabc-footer-datos {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 11px;
}
.tabc-footer-datos li { color: rgba(255, 255, 255, 0.82); }

/* Enlace de WhatsApp del footer: se lee como acción, no como dato. */
.tabc-footer-wa {
	display: inline-block;
	margin-top: 18px;
	padding-bottom: 3px;
	font-weight: 700;
	border-bottom: 2px solid var(--tabc-dorado);
}
.tabc-footer-wa:hover { border-bottom-color: var(--tabc-blanco); }

.tabc-footer-bottom {
	background: rgba(0, 0, 0, 0.18);
	padding: 16px 0;
	text-align: center;
	font-size: 0.85rem;
}
.tabc-footer-bottom p { margin: 0; color: rgba(255, 255, 255, 0.72); }

/* "Configurar cookies" es un botón (abre el aviso, no navega), pero en la
   columna de enlaces legales tiene que verse igual que sus vecinos. Va con
   .tabc-footer delante para ganar a la regla genérica de botones de Hello. */
.tabc-footer .tabc-footer-cookies,
.tabc-footer .tabc-footer-cookies:hover,
.tabc-footer .tabc-footer-cookies:focus {
	background: none;
	border: 0;
	border-radius: 0;
	padding: 0;
	font: inherit;
	text-align: left;
	white-space: normal;
	color: var(--tabc-crema);
	cursor: pointer;
}
.tabc-footer .tabc-footer-cookies:hover { color: var(--tabc-dorado); }

/* ---------- Aviso de cookies ----------
   Tarjeta flotante abajo, centrada y por encima de los botones flotantes
   (WhatsApp y volver arriba, z-index 998-999), que tapa mientras se ve.
   No bloquea la página: se puede seguir leyendo sin contestar. */
.tabc-cookies {
	position: fixed;
	left: 50%;
	bottom: 20px;
	z-index: 1000;
	width: min(560px, calc(100% - 32px));
	padding: 22px 24px 20px;
	background: var(--tabc-crema-suave);
	color: var(--tabc-texto);
	border: 1px solid var(--tabc-linea);
	border-top: 3px solid var(--tabc-dorado);
	border-radius: var(--tabc-radio);
	box-shadow: var(--tabc-sombra-lg);
	opacity: 0;
	transform: translate(-50%, 16px);
	transition: opacity var(--tabc-transicion), transform var(--tabc-transicion);
}
.tabc-cookies.is-visible {
	opacity: 1;
	transform: translate(-50%, 0);
}
.tabc-cookies-titulo {
	font-family: var(--tabc-display);
	font-size: var(--tabc-t-h3);
	font-weight: 600;
	color: var(--tabc-teal-oscuro);
	margin: 0 0 8px;
}
.tabc-cookies-texto {
	margin: 0 0 18px;
	font-size: 0.95rem;
	line-height: 1.55;
	color: var(--tabc-texto-suave);
}
.tabc-cookies-texto a { color: var(--tabc-teal); }
/* Mismo tamaño para aceptar y rechazar: el rechazo no puede quedar escondido. */
.tabc-cookies-botones {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}
.tabc-cookies .tabc-btn { padding: 12px 18px; width: 100%; }
@media (max-width: 520px) {
	.tabc-cookies { bottom: 12px; padding: 18px 18px 16px; }
}

/* Dato legal sin rellenar en el Personalizador: se marca para que salte a
   la vista en la página y no se publique incompleta sin darse cuenta. */
.tabc-legal-pendiente {
	background: rgba(224, 166, 62, 0.28);
	color: var(--tabc-texto);
	padding: 0 4px;
	border-radius: 4px;
}

/* ---------- Volver arriba ---------- */
.tabc-subir {
	position: fixed;
	bottom: 24px;
	/* A la izquierda para no chocar con el flotante de WhatsApp. */
	left: 24px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	padding: 0;
	/* Colores de marca: teal de fondo, flecha en crema y aro dorado.
	   El aro no es decorativo: sobre las secciones claras el relleno teal ya
	   recorta el botón (5:1 o más), pero sobre el pie teal oscuro se funde
	   con el fondo (1.6:1) y es el dorado el que lo mantiene visible (4.6:1).
	   Si se quita el borde, el botón desaparece al llegar al pie. */
	background: var(--tabc-teal);
	color: var(--tabc-crema);
	border: 2px solid var(--tabc-dorado);
	border-radius: 50%;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(15, 74, 74, 0.28);
	opacity: 0;
	transform: translateY(10px);
	transition: opacity var(--tabc-transicion), transform var(--tabc-transicion),
	            background-color var(--tabc-transicion), color var(--tabc-transicion),
	            border-color var(--tabc-transicion), box-shadow var(--tabc-transicion);
	z-index: 998;
}
.tabc-subir[hidden] { display: none; }
.tabc-subir.is-visible { opacity: 1; transform: translateY(0); }
/* Al pasar por encima toma el dorado de la marca, el mismo acento que
   usan la etiqueta "Recomendado" y los enlaces del pie. */
.tabc-subir:hover {
	background: var(--tabc-dorado);
	color: var(--tabc-texto);
	border-color: var(--tabc-dorado);
	transform: translateY(-3px);
	box-shadow: 0 10px 24px rgba(224, 166, 62, 0.42);
}

/* ---------- Botón flotante de WhatsApp ---------- */
.tabc-whatsapp-float {
	position: fixed;
	bottom: 24px;
	right: 24px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #25D366;
	color: #fff;
	padding: 14px 22px;
	border-radius: 999px;
	text-decoration: none;
	font-weight: 700;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
	z-index: 999;
	transition: transform var(--tabc-transicion), box-shadow var(--tabc-transicion);
}
.tabc-whatsapp-float:hover {
	transform: translateY(-3px) scale(1.03);
	box-shadow: 0 10px 26px rgba(0, 0, 0, 0.3);
	color: #fff;
}

/* ===========================================================
   Revelado al hacer scroll
   El estado inicial solo se aplica si hay JS (clase en <html>),
   para que sin JS el contenido siga visible.
   =========================================================== */
.tabc-anim [data-reveal] {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 600ms cubic-bezier(0.22, 0.61, 0.36, 1),
	            transform 600ms cubic-bezier(0.22, 0.61, 0.36, 1);
	will-change: opacity, transform;
}
.tabc-anim [data-reveal].is-visible {
	opacity: 1;
	transform: none;
	will-change: auto;
}
/* Escalonado suave dentro de una misma fila de tarjetas. */
.tabc-anim [data-reveal][data-reveal-delay="1"] { transition-delay: 90ms; }
.tabc-anim [data-reveal][data-reveal-delay="2"] { transition-delay: 180ms; }

/* ===========================================================
   Responsive
   =========================================================== */
@media (max-width: 900px) {
	.tabc-hero-inner,
	.tabc-split,
	.tabc-grid-3 {
		grid-template-columns: 1fr;
	}
	.tabc-hero-inner { gap: 34px; }
	/* En una columna, la foto va debajo del texto siempre. */
	.tabc-split-invertido .tabc-split-media { order: 0; }
	.tabc-split-texto h2 { text-align: left; }

	.tabc-plan-destacado { transform: none; }
	.tabc-plan-destacado:hover { transform: translateY(-4px); }
	/* Recomendado primero: en móvil se lee de arriba abajo. */
	.tabc-planes .tabc-plan-destacado { order: -1; }

	/* La marca ocupa el ancho completo y los enlaces se reparten debajo. */
	/* Marca arriba a lo ancho y las tres columnas de enlaces debajo. */
	.tabc-footer-inner { grid-template-columns: repeat(3, 1fr); }
	.tabc-footer-marca { grid-column: 1 / -1; }
}

@media (max-width: 782px) {
	/* Panel desplegable animado (antes era display:none, que no transiciona). */
	.tabc-nav {
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		background: var(--tabc-blanco);
		border-top: 1px solid var(--tabc-linea-tenue);
		box-shadow: var(--tabc-sombra-md);
		padding: 0 24px;
		opacity: 0;
		visibility: hidden;
		transform: translateY(-8px);
		transition: opacity 200ms ease, transform 200ms ease, visibility 200ms;
	}
	.tabc-nav.is-open {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}
	.tabc-nav-list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 8px 0 16px;
	}
	.tabc-nav-list li { border-bottom: 1px solid var(--tabc-linea-tenue); }
	.tabc-nav-list li:last-child { border-bottom: none; }
	.tabc-nav-list a { display: block; padding: 14px 0; font-size: 1.02rem; }
	.tabc-nav-list a::after { display: none; }

	.tabc-menu-toggle { display: flex; }

	.tabc-grid-2,
	.tabc-footer-inner {
		grid-template-columns: 1fr;
	}
	.tabc-footer-marca { grid-column: auto; }

	/* La banda del club de niños se apila y se centra. */
	.tabc-kids-mencion-caja {
		flex-direction: column;
		text-align: center;
	}
	.tabc-kids-mencion-texto h2 { text-align: center; }

	.tabc-galeria-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	/* El logo no debe comerse la pantalla en móvil. */
	.tabc-logo img { max-height: 66px; }
	.tabc-header.is-scrolled .tabc-logo img { max-height: 52px; }
	.tabc-footer-logo img { max-height: 104px; }

	.tabc-hero-image::before { inset: 12px -12px -12px 12px; }

	/* El flotante no debe tapar el contenido en pantallas chicas. */
	.tabc-whatsapp-float {
		bottom: 16px;
		right: 16px;
		padding: 13px 20px;
		font-size: 0.94rem;
	}
	.tabc-subir {
		bottom: 16px;
		left: 16px;
		width: 42px;
		height: 42px;
	}
}

@media (max-width: 520px) {
	.tabc-galeria { grid-template-columns: 1fr; }
	.tabc-container { padding: 0 18px; }
	.tabc-hero-image::before { display: none; }
}

/* ===========================================================
   Accesibilidad: respeta a quien pidió menos movimiento.
   =========================================================== */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
	.tabc-anim [data-reveal] {
		opacity: 1;
		transform: none;
	}
}