/* =========================================================================
   ONYX FITNESS — onyx.css
   Code-first, dark premium, mobile-first.
   Orden de cascada explícito con @layer.
   ========================================================================= */

@layer reset, base, layout, components, sections, utilities;

/* -------------------------------------------------------------------------
   Fuentes self-host (variables, subset latin). 2 archivos, todo el rango.
   ------------------------------------------------------------------------- */
@font-face {
	font-family: "Manrope";
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url("../fonts/manrope-var-latin.woff2") format("woff2");
}
@font-face {
	font-family: "Sora";
	font-style: normal;
	font-weight: 100 800;
	font-display: swap;
	src: url("../fonts/sora-var-latin.woff2") format("woff2");
}

/* -------------------------------------------------------------------------
   Design tokens
   ------------------------------------------------------------------------- */
:root {
	/* ---- Marca (valores del brief, intactos) ---- */
	--onyx:        #1D1D1B;
	--champagne:   #B4A078;
	--white:       #FFFFFF;
	--muted:       #A8A6A0;
	--surface:     #232320;
	--champagne-metal: linear-gradient(135deg, #8C7752 0%, #C9B488 35%, #F2E6C9 50%, #C9B488 65%, #8C7752 100%);

	/* ---- Superficie / profundidad ---- */
	--onyx-deep:   #141413;
	--surface-2:   #2C2C28;
	--line:        rgba(180, 160, 120, .18);
	--line-soft:   rgba(255, 255, 255, .08);

	/* ---- Texto (champagne NUNCA para cuerpo: poco contraste) ---- */
	--text:        #EDEBE6;
	--text-strong: #FFFFFF;
	--text-muted:  var(--muted);
	--accent:      var(--champagne);
	--accent-soft: #D8C9A6;
	--accent-deep: #9C8A63;

	/* Errores de formulario (legible sobre oscuro, AA). */
	--danger: #E39A90;

	/* CTA primario: champagne + texto onyx (~6.9:1, AA). */
	--cta-bg: var(--champagne);
	--cta-bg-hover: var(--accent-soft);
	--cta-fg: var(--onyx);

	/* ---- Tipografía ---- */
	--font-body:    "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--font-display: "Sora", var(--font-body);

	--step--1: clamp(.83rem, .80rem + .15vw, .91rem);
	--step-0:  clamp(1rem, .96rem + .20vw, 1.125rem);
	--step-1:  clamp(1.20rem, 1.10rem + .50vw, 1.50rem);
	--step-2:  clamp(1.50rem, 1.30rem + 1.0vw, 2.10rem);
	--step-3:  clamp(1.95rem, 1.60rem + 1.7vw, 3.00rem);
	--step-4:  clamp(2.45rem, 1.90rem + 2.7vw, 4.20rem);
	--step-5:  clamp(3.00rem, 2.10rem + 4.4vw, 5.75rem);

	--leading-tight: 1.05;
	--leading-snug:  1.25;
	--leading-body:  1.6;
	--tracking-tight:   -0.02em;
	--tracking-eyebrow: 0.18em;
	--weight-body: 400;
	--weight-medium: 500;
	--weight-semibold: 600;
	--weight-display: 700;
	--weight-black: 800;

	/* ---- Espaciado (base 8px) ---- */
	--space-2xs: .5rem;
	--space-xs:  .75rem;
	--space-sm:  1rem;
	--space-md:  1.5rem;
	--space-lg:  2rem;
	--space-xl:  3rem;
	--space-2xl: 4rem;
	--space-3xl: 6rem;
	--section-y: clamp(3.5rem, 4vw + 2rem, 7rem);

	/* ---- Layout ---- */
	--container:        1200px;
	--container-narrow: 760px;
	--container-pad:    clamp(1rem, 4vw, 2rem);
	--header-h:         72px;

	/* ---- Radios ---- */
	--radius-sm: 8px;
	--radius:    12px;
	--radius-lg: 16px;
	--radius-pill: 999px;

	/* ---- Sombras ---- */
	--shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
	--shadow:    0 8px 24px rgba(0, 0, 0, .45);
	--shadow-lg: 0 24px 60px rgba(0, 0, 0, .55);
	--glow-champagne: 0 0 0 1px rgba(180, 160, 120, .25), 0 14px 44px rgba(180, 160, 120, .10);

	/* ---- Motion ---- */
	--ease:     cubic-bezier(.4, 0, .2, 1);
	--ease-out: cubic-bezier(.16, 1, .3, 1);
	--dur-fast: .18s;
	--dur:      .32s;
	--dur-slow: .6s;

	/* ---- Marca: motivo X/Y ---- */
	--shear: -6deg;
	--focus-ring: 0 0 0 3px var(--accent-soft);

	/* ---- Capas ---- */
	--z-header: 100;
	--z-nav:    90;
	--z-overlay: 200;
	--z-modal:  300;
}

/* =========================================================================
   RESET (moderno, mínimo)
   ========================================================================= */
@layer reset {
	*, *::before, *::after { box-sizing: border-box; }
	* { margin: 0; }

	html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

	html:focus-within { scroll-behavior: smooth; }

	body {
		min-height: 100svh;
		line-height: var(--leading-body);
		-webkit-font-smoothing: antialiased;
		text-rendering: optimizeLegibility;
	}

	img, picture, video, canvas, svg {
		display: block;
		max-width: 100%;
	}

	img, video { height: auto; }

	input, button, textarea, select { font: inherit; color: inherit; }

	p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }

	ul[class], ol[class] { list-style: none; padding: 0; }

	a { color: inherit; text-decoration: none; }

	:target { scroll-margin-top: calc(var(--header-h) + 1rem); }

	@media (prefers-reduced-motion: reduce) {
		html:focus-within { scroll-behavior: auto; }
		*, *::before, *::after {
			animation-duration: .001ms !important;
			animation-iteration-count: 1 !important;
			transition-duration: .001ms !important;
			scroll-behavior: auto !important;
		}
	}
}

/* =========================================================================
   BASE (elementos)
   ========================================================================= */
@layer base {
	body {
		font-family: var(--font-body);
		font-size: var(--step-0);
		font-weight: var(--weight-body);
		color: var(--text);
		background-color: var(--onyx);
		background-image:
			radial-gradient(1200px 600px at 50% -10%, rgba(180, 160, 120, .06), transparent 60%);
		background-attachment: fixed;
	}

	h1, h2, h3, h4 {
		font-family: var(--font-display);
		font-weight: var(--weight-display);
		line-height: var(--leading-tight);
		letter-spacing: var(--tracking-tight);
		color: var(--text-strong);
		text-wrap: balance;
	}

	h1 { font-size: var(--step-5); }
	h2 { font-size: var(--step-3); }
	h3 { font-size: var(--step-2); }
	h4 { font-size: var(--step-1); }

	p { max-width: 68ch; }

	strong, b { font-weight: var(--weight-semibold); color: var(--text-strong); }

	a:not([class]) {
		color: var(--accent-soft);
		text-underline-offset: .2em;
		text-decoration: underline;
		text-decoration-thickness: 1px;
		transition: color var(--dur-fast) var(--ease);
	}
	a:not([class]):hover { color: var(--accent); }

	/* Foco visible y consistente para teclado. */
	:focus-visible {
		outline: 2px solid var(--accent-soft);
		outline-offset: 2px;
		border-radius: 2px;
	}
	:focus:not(:focus-visible) { outline: none; }

	::selection { background: var(--champagne); color: var(--onyx); }

	::-webkit-scrollbar { width: 10px; height: 10px; }
	::-webkit-scrollbar-thumb { background: var(--surface-2); border-radius: var(--radius-pill); }
	::-webkit-scrollbar-track { background: var(--onyx-deep); }
}

/* =========================================================================
   LAYOUT
   ========================================================================= */
@layer layout {
	.container {
		width: min(100% - (var(--container-pad) * 2), var(--container));
		margin-inline: auto;
	}
	.container--narrow { --container: var(--container-narrow); }

	.section {
		padding-block: var(--section-y);
		position: relative;
	}
	.section--alt { background: var(--onyx-deep); }

	.site-main { display: block; }

	/* Skip link accesible. */
	.skip-link {
		position: absolute;
		left: 50%;
		top: 0;
		transform: translate(-50%, -120%);
		z-index: var(--z-modal);
		background: var(--champagne);
		color: var(--onyx);
		font-family: var(--font-display);
		font-weight: var(--weight-semibold);
		padding: .65rem 1.1rem;
		border-radius: 0 0 var(--radius) var(--radius);
		transition: transform var(--dur) var(--ease-out);
	}
	.skip-link:focus { transform: translate(-50%, 0); }

	/* -------------------- Header sticky -------------------- */
	.site-header {
		position: sticky;
		top: 0;
		z-index: var(--z-header);
		background: transparent;
		border-bottom: 1px solid transparent;
		transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), backdrop-filter var(--dur) var(--ease);
	}
	.site-header[data-scrolled] {
		background: rgba(20, 20, 19, .82);
		backdrop-filter: blur(12px) saturate(1.15);
		-webkit-backdrop-filter: blur(12px) saturate(1.15);
		border-bottom-color: var(--line);
	}
	/* Móvil: logo a la izquierda; CTA "Hazte socio" y menú agrupados a la
	   derecha (hueco ajustado para que quepan también a 360px). */
	.site-header__inner {
		display: flex;
		align-items: center;
		gap: .75rem;
		min-height: var(--header-h);
	}
	.site-header__brand { display: inline-flex; align-items: center; margin-right: auto; }
	.site-header__logo { width: auto; height: 40px; }
	.site-header__cta { order: 2; }
	.site-nav { order: 3; }

	/* -------------------- Navegación -------------------- */
	.site-nav { display: flex; align-items: center; }

	.site-nav__toggle {
		display: inline-grid;
		place-items: center;
		width: 44px;
		height: 44px;
		background: transparent;
		border: 1px solid var(--line);
		border-radius: var(--radius-sm);
		color: var(--text-strong);
		cursor: pointer;
	}
	.site-nav__burger { display: grid; place-items: center; }
	/* Iconos menú/cerrar superpuestos en la misma celda; se alternan con transición. */
	.site-nav__burger > .site-nav__icon { grid-area: 1 / 1; transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease-out); }
	.site-nav__icon--close { opacity: 0; transform: rotate(-90deg) scale(.8); }
	body.nav-open .site-nav__icon--open  { opacity: 0; transform: rotate(90deg) scale(.8); }
	body.nav-open .site-nav__icon--close { opacity: 1; transform: rotate(0) scale(1); }

	/* Móvil con JS: panel a pantalla completa, de fondo Onyx opaco. Va dentro de
	   la cabecera con z-index -1: tapa la página y el fondo de la cabecera, pero
	   el logo y el botón de cerrar quedan encima, en su sitio. :where() deja la
	   especificidad en 0-1-0 para que la regla de escritorio lo sobrescriba. */
	:where(.js) .site-nav__menu {
		position: fixed;
		inset: 0;
		z-index: -1;
		display: flex;
		flex-direction: column;
		height: 100vh;
		height: 100dvh;
		overflow-y: auto;
		overscroll-behavior: contain;
		padding:
			calc(var(--header-h) + env(safe-area-inset-top, 0px) + var(--space-md))
			calc(var(--container-pad) + env(safe-area-inset-right, 0px))
			calc(var(--space-xl) + env(safe-area-inset-bottom, 0px))
			calc(var(--container-pad) + env(safe-area-inset-left, 0px));
		background: var(--onyx);
		opacity: 0;
		visibility: hidden;
		transition: opacity var(--dur) var(--ease), visibility var(--dur);
	}
	@media (max-width: 59.99rem) {
		/* Con el menú abierto, la cabecera pierde el fondo translúcido y el
		   backdrop-filter: con él, el panel fijo se mediría respecto a la
		   cabecera (no a la pantalla) y quedaría un hueco. */
		body.nav-open .site-header {
			background: transparent;
			border-bottom-color: transparent;
			backdrop-filter: none;
			-webkit-backdrop-filter: none;
		}
		body.nav-open .site-header__cta { visibility: hidden; }
		.js .site-nav__item + .site-nav__item { border-top: 1px solid var(--line-soft); }
		.js .site-nav__link {
			display: flex;
			align-items: center;
			min-height: 3.5rem;            /* objetivo táctil holgado (≥ 44 px) */
			padding-block: var(--space-2xs);
			font-size: var(--step-2);
			font-weight: var(--weight-semibold);
		}
		/* Área de socio, al final, igual que antes (enlace secundario). */
		.js .site-nav__item--socio { margin-top: var(--space-md); padding-top: var(--space-md); border-top-color: var(--line); }
		.js .site-nav__link--socio { font-size: var(--step-1); }
	}
	/* Móvil en horizontal: menos alto por enlace para que quepan sin tanto scroll. */
	@media (max-width: 59.99rem) and (max-height: 32rem) {
		.js .site-nav__menu { padding-top: calc(var(--header-h) + env(safe-area-inset-top, 0px) + var(--space-2xs)); }
		.js .site-nav__link { min-height: 2.75rem; font-size: var(--step-1); }
	}

	/* Sin JS: el botón no funcionaría, así que se oculta y el menú se muestra
	   siempre como una fila de enlaces bajo el logo. La cabecera lleva fondo
	   opaco (no hay estado "scrolled") y en móvil no es sticky para no tapar
	   media pantalla. */
	.no-js .site-header {
		position: relative;
		background: rgba(20, 20, 19, .94);
		border-bottom-color: var(--line);
	}
	.no-js .site-nav__toggle { display: none; }
	.no-js .site-header__inner { flex-wrap: wrap; row-gap: 0; padding-block: .75rem; }
	.no-js .site-nav { order: 3; flex-basis: 100%; }
	.no-js .site-nav__menu {
		display: flex;
		flex-wrap: wrap;
		gap: 0 var(--space-md);
		padding-bottom: var(--space-sm);
	}
	.no-js .site-nav__link { font-size: var(--step-0); }
	.no-js .site-nav__item--socio { margin: 0; padding: 0; border: 0; }
	body.nav-open .site-nav__menu {
		opacity: 1;
		visibility: visible;
	}
	.site-nav__link {
		display: block;
		font-family: var(--font-display);
		font-weight: var(--weight-medium);
		font-size: var(--step-1);
		padding: var(--space-2xs) 0;
		color: var(--text);
		transition: color var(--dur-fast) var(--ease);
	}
	.site-nav__link:hover { color: var(--accent); }
	/* Área de socio (Bookgy): enlace externo con icono, en champagne suave. */
	.site-nav__link--socio {
		display: inline-flex;
		align-items: center;
		gap: .45em;
		color: var(--accent-soft);
	}
	.site-nav__item--socio {
		margin-top: var(--space-2xs);
		padding-top: var(--space-2xs);
		border-top: 1px solid var(--line-soft);
	}

	/* Evita el scroll de la página con el menú abierto. Solo en <html>: pasa a
	   la ventana. Si también se pusiera en <body>, este se convertiría en su
	   propio contenedor de scroll y la cabecera sticky se iría con él fuera de
	   la pantalla. */
	html.nav-open { overflow: hidden; }

	/* -------------------- Footer -------------------- */
	.site-footer {
		background: var(--onyx-deep);
		border-top: 1px solid var(--line);
		padding-block: var(--space-2xl) var(--space-lg);
	}
	.site-footer__grid {
		display: grid;
		gap: var(--space-xl);
		grid-template-columns: 1fr;
	}
	.site-footer__brand { display: grid; gap: var(--space-sm); align-content: start; }
	.site-footer__logo { height: 42px; width: auto; }
	.site-footer__tagline { color: var(--text-muted); font-size: var(--step--1); max-width: 34ch; }
	.site-footer__social {
		display: inline-flex;
		align-items: center;
		gap: .5em;
		color: var(--accent-soft);
		font-family: var(--font-display);
		font-weight: var(--weight-semibold);
		transition: color var(--dur-fast) var(--ease);
	}
	.site-footer__social:hover { color: var(--accent); }
	.site-footer__socio { display: inline-flex; align-items: center; gap: .45em; }
	.site-footer__socio .onyx-icon { color: var(--accent); }

	.site-footer__title {
		font-family: var(--font-display);
		font-size: var(--step--1);
		letter-spacing: var(--tracking-eyebrow);
		text-transform: uppercase;
		color: var(--accent);
		margin-bottom: var(--space-sm);
	}

	/* Listas del footer sin viñetas ni sangría (antes la viñeta de la columna
	   legal se solapaba con el contenido). */
	.site-footer ul {
		display: grid;
		gap: .65rem;
		list-style: none;
		margin: 0;
		padding: 0;
	}
	.site-footer li { min-width: 0; }

	.site-footer__nav a,
	.site-footer__legal a {
		color: var(--text);
		text-decoration: none;
		transition: color var(--dur-fast) var(--ease);
	}
	.site-footer__nav a:hover,
	.site-footer__legal a:hover { color: var(--accent-soft); }

	.site-footer__contact li {
		display: grid;
		grid-template-columns: auto 1fr;
		gap: .6rem;
		align-items: start;
		color: var(--text);
	}
	.site-footer__contact .onyx-icon { color: var(--accent); margin-top: .15rem; }
	.site-footer__contact a { color: var(--text); text-decoration: none; transition: color var(--dur-fast) var(--ease); }
	.site-footer__contact a:hover { color: var(--accent-soft); }


	.site-footer__bottom {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-sm);
		margin-top: var(--space-xl);
		padding-top: var(--space-lg);
		border-top: 1px solid var(--line-soft);
	}
	.site-footer__copy { color: var(--text-muted); font-size: var(--step--1); }
	.site-footer__app {
		display: grid;
		grid-template-columns: auto 1fr;
		gap: .6rem;
		align-items: start;
		color: var(--text-muted);
		font-size: var(--step--1);
		max-width: 34ch;
	}
	.site-footer__app .onyx-icon { color: var(--accent); margin-top: .1rem; }
	.site-footer__app a { color: var(--text); text-underline-offset: .2em; transition: color var(--dur-fast) var(--ease); }
	.site-footer__app a:hover { color: var(--accent-soft); }
	.site-footer__marcas {
		flex-basis: 100%;
		order: 3;
		color: var(--text-muted);
		font-size: .72rem;
		line-height: 1.5;
		max-width: 90ch;
	}
	.site-footer__company { display: block; margin-top: .25rem; }
	@media (min-width: 48rem) {
		.site-footer__company { display: inline; margin-top: 0; }
	}
	.site-footer__top {
		display: inline-flex;
		align-items: center;
		gap: .4em;
		color: var(--text-muted);
		font-family: var(--font-display);
		font-size: var(--step--1);
		transition: color var(--dur-fast) var(--ease);
	}
	.site-footer__top:hover { color: var(--accent); }
	.site-footer__top:hover .onyx-icon { color: var(--accent); }

	@media (min-width: 40rem) {
		.site-footer__grid { grid-template-columns: 1fr 1fr; }
	}
	@media (min-width: 64rem) {
		.site-footer__grid { grid-template-columns: 1.7fr 1fr 1.3fr 1fr; gap: var(--space-2xl); }
	}

	/* -------------------- Desktop nav -------------------- */
	@media (min-width: 60rem) {
		.site-nav__toggle { display: none; }
		.no-js .site-header { position: sticky; }
		.no-js .site-header__inner { flex-wrap: nowrap; padding-block: 0; }
		.no-js .site-nav { order: 0; flex-basis: auto; }
		.no-js .site-nav__menu { padding-bottom: 0; }
		.site-nav__menu {
			position: static;
			inset: auto;
			z-index: auto;
			display: flex;
			flex-direction: row;
			align-items: center;
			gap: var(--space-md);
			height: auto;
			max-height: none;
			overflow: visible;
			padding: 0;
			background: none;
			backdrop-filter: none;
			-webkit-backdrop-filter: none;
			border: 0;
			box-shadow: none;
			transform: none;
			opacity: 1;
			visibility: visible;
		}
		/* Ningún enlace ni el CTA se parten en dos líneas; el logo no se encoge. */
		.site-nav__link,
		.site-header__cta { white-space: nowrap; }
		.site-header__brand,
		.site-header__cta { flex-shrink: 0; }
		.site-nav__link { font-size: var(--step-0); padding: .5rem 0; position: relative; }
		/* Subrayado diagonal champagne (motivo de marca) al hover/focus. */
		.site-nav__link::after {
			content: "";
			position: absolute;
			left: 0; right: 100%;
			bottom: -2px;
			height: 2px;
			background: var(--champagne-metal);
			transition: right var(--dur) var(--ease-out);
		}
		.site-nav__link:hover::after, .site-nav__link:focus-visible::after { right: 0; }
		.site-nav__item--socio,
		.no-js .site-nav__item--socio {
			margin-top: 0;
			padding: 0 0 0 var(--space-sm);
			border-top: 0;
			border-left: 1px solid var(--line);
		}
		.site-header__inner { gap: var(--space-md); }
		.site-nav { order: 2; }
		.site-header__cta { order: 3; }

		/* Escritorio estrecho (60–75rem): menú más compacto y "Área de socio"
		   solo con icono (el texto sigue para lectores de pantalla y tooltip). */
		.site-nav__menu { gap: var(--space-sm); }
		.site-nav__socio-label {
			position: absolute;
			width: 1px;
			height: 1px;
			overflow: hidden;
			clip: rect(0, 0, 0, 0);
			white-space: nowrap;
		}
	}
	@media (min-width: 75rem) {
		.site-nav__menu { gap: var(--space-md); }
		.site-nav__item--socio,
		.no-js .site-nav__item--socio { padding-left: var(--space-md); }
		.site-nav__socio-label { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
	}
}

/* =========================================================================
   COMPONENTS
   ========================================================================= */
@layer components {

	/* -------------------- Iconos -------------------- */
	.onyx-icon { display: inline-block; vertical-align: middle; flex: none; }

	/* -------------------- Botones (CTA) --------------------
	   Un único estilo para todos los CTA: champagne con texto onyx, misma
	   altura (48px) y radio en toda la web, hover más claro. */
	.btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: .55em;
		min-height: 3rem;
		padding: .75rem 1.5rem;
		font-family: var(--font-display);
		font-weight: var(--weight-semibold);
		font-size: var(--step-0);
		line-height: 1.2;
		letter-spacing: .01em;
		text-align: center;
		color: var(--cta-fg);
		background-color: var(--cta-bg);
		border: 1px solid transparent;
		border-radius: var(--radius-pill);
		box-shadow: var(--shadow-sm);
		cursor: pointer;
		transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease);
	}
	.btn:hover { background-color: var(--cta-bg-hover); box-shadow: var(--glow-champagne); }
	.btn:active { transform: translateY(1px); }
	.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
	.btn:disabled { opacity: .65; cursor: progress; }

	/* -------------------- Eyebrow / overline -------------------- */
	.eyebrow {
		display: inline-flex;
		align-items: center;
		gap: .5em;
		font-family: var(--font-display);
		font-size: var(--step--1);
		font-weight: var(--weight-semibold);
		letter-spacing: var(--tracking-eyebrow);
		text-transform: uppercase;
		color: var(--accent);
	}
	.eyebrow::before {
		content: "";
		width: 1.75rem;
		height: 1px;
		background: var(--champagne-metal);
	}

	/* -------------------- Cabecera de sección --------------------
	   Misma composición en todas las secciones: eyebrow + título + subtítulo,
	   alineados a la izquierda (como el hero) y a la misma distancia del
	   contenido. */
	.section__head {
		display: grid;
		justify-items: start;
		gap: var(--space-sm);
		max-width: var(--container-narrow);
		margin-bottom: var(--space-xl);
		text-align: left;
	}
	.section__title { max-width: 20ch; }
	.section__lead { color: var(--text-muted); font-size: var(--step-1); max-width: 52ch; }

	/* -------------------- Tarjeta base -------------------- */
	.card {
		background: var(--surface);
		border: 1px solid var(--line-soft);
		border-radius: var(--radius-lg);
		padding: var(--space-lg);
		transition: transform var(--dur) var(--ease-out), border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
	}

	/* -------------------- Placeholder TODO visible -------------------- */
	.onyx-todo {
		display: inline-block;
		background: repeating-linear-gradient(45deg, rgba(180, 160, 120, .18) 0 8px, rgba(180, 160, 120, .30) 8px 16px);
		color: var(--text-strong);
		font-family: var(--font-display);
		font-size: .72em;
		font-weight: var(--weight-semibold);
		letter-spacing: .04em;
		text-transform: uppercase;
		padding: .15em .55em;
		border: 1px dashed var(--accent);
		border-radius: var(--radius-sm);
		line-height: 1.4;
	}

	/* -------------------- Badge (p.ej. 24/7) -------------------- */
	.badge {
		display: inline-flex;
		align-items: center;
		gap: .45em;
		font-family: var(--font-display);
		font-weight: var(--weight-semibold);
		font-size: var(--step--1);
		letter-spacing: .04em;
		padding: .4em .8em;
		border: 1px solid var(--line);
		border-radius: var(--radius-pill);
		background: rgba(180, 160, 120, .08);
		color: var(--accent-soft);
	}

	/* -------------------- Enlaces a la app (App Store / Google Play) --------------------
	   Por defecto, botones de texto secundarios (sin logos de las tiendas).
	   Con los badges oficiales activados en SCF: archivos sin modificar, App
	   Store primero, la misma altura visible (48px, mínimo 40px de Apple) y
	   1/4 de la altura de aire alrededor. El PNG de Google trae 29px
	   transparentes arriba y abajo (646×250, insignia visible 646×192): se
	   compensan con margen negativo. Sin efectos de hover sobre los badges. */
	.store-buttons,
	.store-badges {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		list-style: none;
		margin: 0;
		padding: 0;
	}
	.store-buttons { gap: var(--space-sm); }
	.store-button {
		display: inline-flex;
		align-items: center;
		gap: .55em;
		min-height: 3rem;
		padding: .7rem 1.25rem;
		font-family: var(--font-display);
		font-weight: var(--weight-semibold);
		color: var(--text-strong);
		text-decoration: none;
		border: 1px solid var(--line);
		border-radius: var(--radius-pill);
		background: var(--onyx-deep);
		transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
	}
	.store-button .onyx-icon { color: var(--accent); }
	.store-button:hover { border-color: var(--accent); color: var(--accent-soft); }

	.store-badges {
		--badge-h: 48px;
		gap: max(16px, calc(var(--badge-h) / 4));
	}
	.store-badges > li { display: flex; } /* sin caja de línea: las dos insignias alineadas */
	.store-badge { display: inline-flex; line-height: 0; border-radius: 8px; }
	.store-badge img { width: auto; max-width: none; height: var(--badge-h); }
	.store-badge--google-play img {
		height: calc(var(--badge-h) * 250 / 192);
		margin-block: calc(var(--badge-h) * -29 / 192);
	}
	.store-pendiente { display: inline-flex; align-items: center; }

	/* -------------------- Separador diagonal de marca -------------------- */
	.divider-x {
		height: 1px;
		border: 0;
		background: linear-gradient(90deg, transparent, var(--line) 20%, var(--line) 80%, transparent);
		margin-block: var(--space-xl);
	}
}

/* =========================================================================
   UTILITIES
   ========================================================================= */
@layer utilities {
	.screen-reader-text {
		position: absolute !important;
		width: 1px; height: 1px;
		padding: 0; margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}
	.screen-reader-text:focus {
		position: fixed !important;
		top: 1rem; left: 1rem;
		width: auto; height: auto;
		clip: auto;
		padding: .65rem 1rem;
		background: var(--champagne);
		color: var(--onyx);
		z-index: var(--z-modal);
		border-radius: var(--radius-sm);
	}

	.text-accent { color: var(--accent); }
	.text-muted  { color: var(--text-muted); }
	.text-metal {
		background: var(--champagne-metal);
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
	}
	.is-hidden { display: none !important; }
	/* Sin JS, «Ver mapa» no haría nada: se ocultan el botón y su nota y queda
	   el enlace a Google Maps (en utilities para ganar a .btn). */
	.no-js [data-map-load],
	.no-js [data-map-load] + .contacto__map-note { display: none; }
	.flow > * + * { margin-top: var(--flow-space, var(--space-sm)); }
}

/* =========================================================================
   SECTIONS
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Hero
   ------------------------------------------------------------------------- */
@layer sections {
	.hero {
		position: relative;
		isolation: isolate;
		/* El header sticky transparente se superpone sobre el hero. */
		margin-top: calc(-1 * var(--header-h));
		min-height: clamp(580px, 100svh, 920px);
		display: grid;
		align-items: end;
		overflow: clip;
	}

	.hero__media {
		position: absolute;
		inset: 0;
		z-index: 0;
		overflow: clip;
	}
	.hero__poster,
	.hero__video {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	.hero__video {
		opacity: 0;
		transition: opacity var(--dur-slow) var(--ease);
	}
	.hero__video.is-playing { opacity: 1; }

	/* Scrim para garantizar contraste AA del texto sobre cualquier póster/vídeo. */
	.hero__scrim {
		position: absolute;
		inset: 0;
		background:
			linear-gradient(to top, rgba(20, 20, 19, .94) 0%, rgba(20, 20, 19, .5) 46%, rgba(20, 20, 19, .28) 100%),
			linear-gradient(to right, rgba(20, 20, 19, .6), transparent 58%);
	}

	.hero__inner {
		position: relative;
		z-index: 2;
		padding-top: calc(var(--header-h) + var(--space-2xl));
		padding-bottom: clamp(3rem, 8vh, 6rem);
	}

	.hero__content {
		display: grid;
		gap: var(--space-md);
		max-width: 46rem;
	}
	.hero__eyebrow { margin-bottom: var(--space-2xs); }
	.hero__title {
		font-size: var(--step-5);
		font-weight: var(--weight-black);
		text-wrap: balance;
	}
	/* Resaltar "24/7" con el metal champagne sin romper el H1 literal. */
	.hero__subclaim {
		font-size: var(--step-1);
		color: var(--text);
		max-width: 42ch;
	}
	.hero__actions {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-sm);
		margin-top: var(--space-2xs);
	}
	.hero__badge-wrap { margin-top: var(--space-2xs); }

	/* Corte diagonal sutil que funde el hero con la siguiente sección (motivo X/Y). */
	.hero__cut {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		height: clamp(48px, 7vw, 88px);
		z-index: 3;
		pointer-events: none;
		background: linear-gradient(to bottom, transparent, var(--onyx));
	}
	.hero__cut::after {
		content: "";
		position: absolute;
		left: 0;
		bottom: 22%;
		width: 44%;
		height: 1px;
		background: var(--champagne-metal);
		opacity: .45;
		transform: skewY(-2deg);
		transform-origin: left bottom;
	}

	/* Reveal orquestado: estado natural = visible; el keyframe define el offset
	   de entrada. Con fill "backwards" no hay parpadeo y, sin animación, se ve. */
	.hero__reveal > * {
		animation: onyxHeroIn .8s var(--ease-out) backwards;
	}
	.hero__reveal > :nth-child(1) { animation-delay: .05s; }
	.hero__reveal > :nth-child(2) { animation-delay: .16s; }
	.hero__reveal > :nth-child(3) { animation-delay: .28s; }
	.hero__reveal > :nth-child(4) { animation-delay: .40s; }
	.hero__reveal > :nth-child(5) { animation-delay: .52s; }

	@media (min-width: 48rem) {
		.hero__title { letter-spacing: -0.025em; }
	}
}

@keyframes onyxHeroIn {
	from {
		opacity: 0;
		transform: translateY(16px);
	}
}

/* -------------------------------------------------------------------------
   2. Propuesta de valor
   ------------------------------------------------------------------------- */
@layer sections {
	.valor__grid {
		display: grid;
		gap: var(--space-md);
		grid-template-columns: 1fr;
	}

	.valor__item {
		position: relative;
		overflow: clip;
		display: grid;
		gap: var(--space-sm);
		align-content: start;
	}
	.valor__item:hover,
	.valor__item:focus-within {
		transform: translateY(-4px);
		border-color: var(--line);
		background: var(--surface-2);
	}

	.valor__icon {
		display: inline-grid;
		place-items: center;
		width: 3.25rem;
		height: 3.25rem;
		border-radius: var(--radius);
		color: var(--accent);
		background: rgba(180, 160, 120, .08);
		border: 1px solid var(--line);
		transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease),
			background-color var(--dur) var(--ease);
	}
	.valor__item:hover .valor__icon,
	.valor__item:focus-within .valor__icon {
		color: var(--accent-soft);
		border-color: var(--accent);
		background: rgba(180, 160, 120, .14);
	}

	.valor__title {
		font-size: var(--step-1);
		font-weight: var(--weight-semibold);
		color: var(--text-strong);
	}
	.valor__text {
		color: var(--text-muted);
		font-size: var(--step-0);
		max-width: 34ch;
	}

	/* Motivo X/Y: esquina diagonal champagne que aparece al hover/focus. */
	.valor__corner {
		position: absolute;
		top: 0;
		right: 0;
		width: 3.5rem;
		height: 3.5rem;
		background: linear-gradient(225deg, rgba(180, 160, 120, .22), transparent 58%);
		opacity: 0;
		transition: opacity var(--dur) var(--ease);
		pointer-events: none;
	}
	.valor__corner::after {
		content: "";
		position: absolute;
		top: .95rem;
		right: .95rem;
		width: 1.4rem;
		height: 1px;
		background: var(--champagne-metal);
		transform: rotate(-45deg);
		transform-origin: right center;
	}
	.valor__item:hover .valor__corner,
	.valor__item:focus-within .valor__corner { opacity: 1; }

	@media (min-width: 36rem) {
		.valor__grid { grid-template-columns: repeat(2, 1fr); }
	}
	@media (min-width: 64rem) {
		.valor__grid { grid-template-columns: repeat(4, 1fr); }
	}
}

/* -------------------------------------------------------------------------
   3. ¿Cómo funciona?
   ------------------------------------------------------------------------- */
@layer sections {
	.como__steps {
		display: grid;
		gap: var(--space-lg);
		grid-template-columns: 1fr;
		max-width: var(--container-narrow);
	}

	/* Móvil: número a la izquierda, cuerpo a la derecha. */
	.como__step {
		position: relative;
		display: grid;
		grid-template-columns: auto 1fr;
		gap: var(--space-md);
		align-items: start;
		/* Los pasos se estiran a la misma altura: sin esto, la altura sobrante se
		   reparte entre filas y los títulos quedan a alturas distintas. */
		align-content: start;
	}
	/* Conector vertical hairline entre números (móvil). */
	.como__step:not(:last-child)::after {
		content: "";
		position: absolute;
		left: 1.75rem;
		top: 3.75rem;
		bottom: calc(-1 * var(--space-lg));
		width: 1px;
		background: linear-gradient(to bottom, var(--line), transparent 92%);
	}

	.como__num {
		display: inline-grid;
		place-items: center;
		width: 3.5rem;
		height: 3.5rem;
		border-radius: var(--radius-pill);
		border: 1px solid var(--line);
		background: rgba(180, 160, 120, .06);
		font-family: var(--font-display);
		font-weight: var(--weight-display);
		font-size: var(--step-1);
		line-height: 1;
		color: var(--accent);
		transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease), background-color var(--dur) var(--ease);
	}
	.como__step:hover .como__num {
		border-color: var(--accent);
		color: var(--accent-soft);
		background: rgba(180, 160, 120, .12);
	}

	.como__body { display: grid; gap: var(--space-2xs); padding-top: .35rem; }
	.como__title { font-size: var(--step-1); font-weight: var(--weight-semibold); color: var(--text-strong); }
	.como__text { color: var(--text-muted); max-width: 40ch; }
	.como__cta {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--space-sm);
		margin-top: var(--space-sm);
	}

	/* Escritorio: 3 columnas, número arriba, conector horizontal. */
	@media (min-width: 48rem) {
		.como__steps {
			grid-template-columns: repeat(3, 1fr);
			gap: var(--space-xl);
			max-width: none;
		}
		.como__step {
			grid-template-columns: 1fr;
			gap: var(--space-md);
			text-align: left;
		}
		.como__step:not(:last-child)::after {
			left: 4.25rem;
			right: calc(-1 * var(--space-xl));
			top: 1.75rem;
			bottom: auto;
			width: auto;
			height: 1px;
			background: linear-gradient(to right, var(--line), transparent 92%);
		}
		.como__body { padding-top: 0; }
	}
}

/* -------------------------------------------------------------------------
   4. Tarifas
   Tarjetas de las cuotas online (móvil: apiladas, la destacada primero; desde
   40rem, dos columnas y el orden de SCF; desde 72rem, las cuatro en fila),
   avisos (matrícula y Bookgy) y la franja de la cuota familiar.
   ------------------------------------------------------------------------- */
@layer sections {
	.tarifas__grid {
		display: grid;
		gap: var(--space-md);
		grid-template-columns: minmax(0, 1fr);
		align-items: stretch;
		margin: 0;
		padding: 0;
	}
	@media (min-width: 40rem) {
		/* Hueco arriba para el sello de la destacada, que monta sobre el borde. */
		.tarifas__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-lg); padding-top: .9rem; }
		.tarifas__grid .tarifas__card { order: var(--pos, 0); }
		.tarifas__grid .tarifas__card--destacada { overflow: visible; }
		.tarifas__grid .tarifas__card--destacada .tarifas__ribbon {
			position: absolute;
			top: 0;
			left: 50%;
			transform: translate(-50%, -50%);
			white-space: nowrap;
		}
	}
	/* Las cuatro en fila desde 72rem (1152 px); por debajo, 2 × 2. */
	@media (min-width: 72rem) {
		.tarifas__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-sm); }
		.tarifas__grid .tarifas__amount { font-size: var(--step-2); }
	}

	.tarifas__card {
		display: flex;
		flex-direction: column;
		gap: var(--space-sm);
		position: relative;
		overflow: clip;
		padding: var(--space-md);
	}
	@media (min-width: 36rem) and (max-width: 71.99rem), (min-width: 80rem) {
		.tarifas__card { padding: var(--space-lg); }
	}
	.tarifas__card--destacada {
		border-color: var(--accent);
		box-shadow: var(--glow-champagne);
		background: var(--surface-2);
	}

	.tarifas__head {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-2xs) var(--space-sm);
	}
	.tarifas__name {
		font-size: var(--step-1);
		font-weight: var(--weight-display);
		color: var(--text-strong);
	}
	/* Sello de la destacada («Mejor precio»): en el flujo de la cabecera; si no
	   cabe junto al nombre, baja de línea en vez de solaparse. */
	.tarifas__ribbon {
		display: inline-flex;
		align-items: center;
		font-family: var(--font-display);
		font-size: var(--step--1);
		font-weight: var(--weight-semibold);
		letter-spacing: .04em;
		color: var(--onyx);
		background: var(--champagne-metal);
		padding: .3em .7em;
		border-radius: var(--radius-pill);
		box-shadow: var(--shadow-sm);
	}

	.tarifas__price {
		display: grid;
		gap: .3rem;
		padding-bottom: var(--space-sm);
		border-bottom: 1px solid var(--line-soft);
	}
	.tarifas__amount-line {
		display: flex;
		align-items: baseline;
		flex-wrap: wrap;
		gap: .35rem;
	}
	.tarifas__amount {
		font-family: var(--font-display);
		font-size: var(--step-3);
		font-weight: var(--weight-black);
		line-height: 1;
		color: var(--text-strong);
	}
	.tarifas__period { color: var(--text-muted); font-size: var(--step-0); }
	.tarifas__tax { color: var(--text-muted); font-size: var(--step--1); }
	.tarifas__equiv {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: .35rem .6rem;
		color: var(--text);
		font-size: var(--step--1);
	}
	.tarifas__ahorro {
		font-family: var(--font-display);
		font-weight: var(--weight-semibold);
		color: var(--accent-soft);
	}

	.tarifas__resumen {
		font-family: var(--font-display);
		font-size: var(--step--1);
		font-weight: var(--weight-semibold);
		letter-spacing: .02em;
		color: var(--accent-soft);
	}

	.tarifas__features {
		display: grid;
		gap: .55rem;
		margin: 0;
	}
	.tarifas__features li {
		display: flex;
		align-items: flex-start;
		gap: .55rem;
		color: var(--text);
		font-size: var(--step--1);
		line-height: var(--leading-snug);
	}
	.tarifas__features li > .onyx-icon {
		color: var(--accent);
		margin-top: .1em;
	}

	.tarifas__cta {
		margin-top: auto;
		display: grid;
		gap: var(--space-2xs);
		padding-top: var(--space-2xs);
	}
	.tarifas__cta .btn { width: 100%; }
	.tarifas__nota-cuota {
		color: var(--text-muted);
		font-size: var(--step--1);
		line-height: var(--leading-snug);
	}

	/* Avisos bajo las tarjetas: matrícula (con aspecto de sello, no de botón) y
	   la plataforma de alta. */
	.tarifas__avisos {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--space-sm) var(--space-lg);
		margin-top: var(--space-lg);
	}
	.tarifas__matricula {
		display: inline-flex;
		align-items: center;
		gap: .55em;
		padding: .6em 1em;
		font-family: var(--font-display);
		font-size: var(--step--1);
		font-weight: var(--weight-display);
		letter-spacing: .06em;
		text-transform: uppercase;
		color: var(--text-strong);
		background: rgba(180, 160, 120, .12);
		border: 1px solid var(--accent);
		border-radius: var(--radius-sm);
	}
	.tarifas__matricula .onyx-icon { color: var(--accent); }
	.tarifas__secure {
		display: flex;
		align-items: flex-start;
		gap: .45rem;
		max-width: 60ch;
		color: var(--text-muted);
		font-size: var(--step--1);
		line-height: var(--leading-snug);
	}
	.tarifas__secure .onyx-icon { color: var(--accent); margin-top: .1em; }

	/* Cuota familiar: franja horizontal en escritorio, apilada en móvil. */
	.tarifas__familiar {
		display: grid;
		gap: var(--space-md);
		margin-top: var(--space-lg);
		padding: var(--space-md);
		background: var(--surface);
		border: 1px solid var(--line);
		border-radius: var(--radius-lg);
	}
	@media (min-width: 48rem) {
		.tarifas__familiar {
			grid-template-columns: minmax(0, 1fr) auto;
			align-items: center;
			gap: var(--space-lg);
			padding: var(--space-md) var(--space-lg);
		}
	}
	.tarifas__familiar-text { display: grid; gap: .35rem; }
	.tarifas__familiar-name {
		font-size: var(--step-1);
		font-weight: var(--weight-display);
		color: var(--text-strong);
	}
	/* «3 o más personas»: en su línea en móvil; junto al nombre, con «·», en escritorio. */
	.tarifas__familiar-resumen {
		display: block;
		font-size: var(--step-0);
		font-weight: var(--weight-semibold);
		color: var(--accent-soft);
	}
	@media (min-width: 48rem) {
		.tarifas__familiar-resumen { display: inline; font-size: inherit; }
		.tarifas__familiar-resumen::before { content: " · "; color: var(--text-muted); }
	}
	.tarifas__familiar-nota { color: var(--text); font-size: var(--step-0); line-height: var(--leading-snug); }
	.tarifas__familiar-actions {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-2xs) var(--space-sm);
	}
	@media (max-width: 35.99rem) {
		.tarifas__familiar-actions .btn { flex: 1 1 100%; }
	}

	.tarifas__nota {
		margin-top: var(--space-lg);
		color: var(--text-muted);
		font-size: var(--step--1);
	}
	.tarifas__edad + .tarifas__nota { margin-top: var(--space-2xs); }
}

/* -------------------------------------------------------------------------
   5. Reseñas
   ------------------------------------------------------------------------- */
@layer sections {
	/* Estrellas (presentation attr fill="none" lo sobreescribe el CSS). */
	.resena__star.is-on  { fill: var(--accent); stroke: var(--accent); }
	.resena__star.is-off { fill: none; stroke: var(--line); opacity: .8; }
	.resena__stars { display: inline-flex; gap: .15rem; }

	.resenas__rating {
		display: inline-flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--space-2xs) var(--space-sm);
		margin-top: var(--space-2xs);
	}
	.resenas__rating-num { color: var(--text-muted); font-size: var(--step-0); }
	.resenas__rating-num strong { color: var(--text-strong); font-family: var(--font-display); }

	/* Carrusel */
	.resenas__carousel { position: relative; }
	.resenas__track {
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: min(86%, 24rem);
		gap: var(--space-md);
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding: var(--container-pad);
		padding-block: var(--space-2xs);
		margin: 0;
		scrollbar-width: thin;
		overscroll-behavior-x: contain;
	}
	.resenas__item { scroll-snap-align: start; }

	.resena {
		display: flex;
		flex-direction: column;
		gap: var(--space-sm);
		height: 100%;
		position: relative;
	}
	.resena__quote { color: var(--accent); opacity: .5; }
	.resena__text {
		color: var(--text);
		font-size: var(--step-1);
		line-height: var(--leading-snug);
		font-style: normal;
	}
	.resena__author {
		margin-top: auto;
		color: var(--text-muted);
		font-family: var(--font-display);
		font-weight: var(--weight-semibold);
	}
	.resena__author::before { content: "— "; color: var(--accent); }

	.resenas__controls {
		display: flex;
		gap: var(--space-sm);
		margin-top: var(--space-lg);
	}
	.resenas__cta { margin-top: var(--space-lg); }
	.resenas__btn {
		display: inline-grid;
		place-items: center;
		width: 48px;
		height: 48px;
		border-radius: var(--radius-pill);
		border: 1px solid var(--line);
		background: var(--surface);
		color: var(--text);
		cursor: pointer;
		transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease), background-color var(--dur) var(--ease), opacity var(--dur) var(--ease);
	}
	.resenas__btn:hover { border-color: var(--accent); color: var(--accent-soft); background: var(--surface-2); }
	.resenas__btn:disabled { opacity: .35; cursor: default; pointer-events: none; }
	.resenas__carousel.is-static .resenas__controls,
	.no-js .resenas__controls { display: none; }

	@media (min-width: 48rem) {
		.resena__text { font-size: var(--step-1); }
	}
}

/* -------------------------------------------------------------------------
   6. Instalaciones
   ------------------------------------------------------------------------- */
@layer sections {
	/* Zonas: una fila por zona (texto + galería); en escritorio, el texto a un
	   lado y la galería al otro, alternando. */
	.inst__zonas { display: grid; gap: var(--space-2xl); }
	.inst__zona { display: grid; gap: var(--space-md); }
	.inst__zona-text { display: grid; gap: var(--space-2xs); align-content: start; }
	.inst__count {
		font-family: var(--font-display);
		font-size: var(--step--1);
		font-weight: var(--weight-semibold);
		letter-spacing: var(--tracking-eyebrow);
		text-transform: uppercase;
		color: var(--accent);
	}
	@media (min-width: 64rem) {
		.inst__zona {
			grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
			gap: var(--space-xl);
			align-items: center;
		}
		.inst__zona:nth-child(even) { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
		.inst__zona:nth-child(even) .inst__zona-text { order: 2; }
		.inst__zona .inst__name { font-size: var(--step-2); }
	}

	/* Zona sin fotos (visitantes): solo texto, con la franja champagne. */
	.inst__zona--noimg {
		position: relative;
		padding: var(--space-lg);
		border: 1px solid var(--line-soft);
		border-radius: var(--radius-lg);
		background: var(--surface);
		overflow: clip;
	}
	.inst__zona--noimg::before {
		content: "";
		position: absolute;
		inset: 0 0 auto 0;
		height: 2px;
		background: var(--champagne-metal);
		opacity: .7;
	}
	@media (min-width: 64rem) {
		.inst__zona--noimg { grid-template-columns: 1fr; }
	}

	/* Galería. Sin JS (y en escritorio): la foto principal ocupa toda la fila
	   y las demás van en miniatura debajo, una columna por miniatura. */
	.galeria {
		--thumbs: 4;
		display: grid;
		gap: var(--space-2xs);
		grid-template-columns: repeat(var(--thumbs), minmax(0, 1fr));
		margin: 0;
	}
	.galeria--n1,
	.galeria--n2 { --thumbs: 1; }
	.galeria--n3 { --thumbs: 2; }
	.galeria--n4 { --thumbs: 3; }
	.galeria--n6 { --thumbs: 5; }
	.galeria__item {
		position: relative;
		aspect-ratio: 4 / 3;            /* reserva el hueco: sin CLS */
		border-radius: var(--radius);
		background: var(--onyx-deep);
		overflow: clip;
	}
	.galeria__item--main {
		grid-column: 1 / -1;
		aspect-ratio: 3 / 2;
		border-radius: var(--radius-lg);
	}
	.galeria__link { position: relative; display: block; width: 100%; height: 100%; border-radius: inherit; }
	.galeria__img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		transition: transform var(--dur-slow) var(--ease-out), opacity var(--dur) var(--ease);
	}
	.galeria__link:hover .galeria__img { transform: scale(1.04); }
	/* Anillo de foco en una capa por encima de la foto: un outline quedaría
	   tapado por la imagen (el <li> además recorta lo que sobresale). */
	.galeria__link::after {
		content: "";
		position: absolute;
		inset: 0;
		border-radius: inherit;
		pointer-events: none;
	}
	.galeria__link:focus-visible { outline: none; }
	.galeria__link:focus-visible::after { box-shadow: inset 0 0 0 2px var(--accent-soft), inset 0 0 0 4px var(--onyx); }
	.galeria__zoom {
		position: absolute;
		right: .5rem;
		bottom: .5rem;
		display: grid;
		place-items: center;
		width: 2.25rem;
		height: 2.25rem;
		border-radius: 50%;
		background: rgba(20, 20, 19, .72);
		color: var(--text-strong);
		opacity: 0;
		transition: opacity var(--dur) var(--ease);
	}
	.galeria__item--main .galeria__zoom,
	.galeria__link:hover .galeria__zoom,
	.galeria__link:focus-visible .galeria__zoom { opacity: 1; }
	.galeria__counter { display: none; }

	/* Móvil con JS: carrusel a sangre con scroll-snap (la siguiente foto asoma). */
	@media (max-width: 47.99rem) {
		.js .galeria {
			display: flex;
			overflow-x: auto;
			overscroll-behavior-x: contain;
			scroll-snap-type: x mandatory;
			scrollbar-width: none;
			margin-inline: calc(var(--container-pad) * -1);
			padding-inline: var(--container-pad);
			scroll-padding-inline: var(--container-pad);
		}
		.js .galeria::-webkit-scrollbar { display: none; }
		.js .galeria__item {
			flex: 0 0 86%;
			aspect-ratio: 4 / 3;
			border-radius: var(--radius-lg);
			scroll-snap-align: start;
		}
		.js .galeria--n1 .galeria__item { flex-basis: 100%; }
		.js .galeria__zoom { opacity: 1; }
		.js .galeria__counter {
			display: block;
			margin-top: var(--space-2xs);
			font-family: var(--font-display);
			font-size: var(--step--1);
			font-weight: var(--weight-semibold);
			letter-spacing: .08em;
			color: var(--text-muted);
		}
	}

	/* Visor (dialog modal a pantalla completa). */
	.lightbox {
		position: fixed;
		inset: 0;
		width: 100%;
		height: 100%;
		max-width: none;
		max-height: none;
		margin: 0;
		padding: 0;
		border: 0;
		background: #0E0E0D;
		color: var(--text);
	}
	.lightbox::backdrop { background: rgba(0, 0, 0, .7); }
	.lightbox__inner {
		position: relative;
		display: grid;
		grid-template-rows: auto minmax(0, 1fr);
		height: 100%;
	}
	.lightbox__bar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-sm);
		padding: var(--space-xs) var(--container-pad);
	}
	.lightbox__title {
		font-size: var(--step-0);
		font-weight: var(--weight-semibold);
		letter-spacing: 0;
	}
	.lightbox__count { margin-left: .5em; color: var(--text-muted); font-weight: var(--weight-body); }
	/* Foto y pie juntos, centrados en el hueco que deja la barra. */
	.lightbox__figure {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: var(--space-xs);
		min-height: 0;
		margin: 0;
		padding: 0 var(--container-pad) var(--space-md);
		touch-action: manipulation;   /* deja ampliar con dos dedos */
	}
	.lightbox__img {
		width: auto;
		height: auto;
		max-width: 100%;
		max-height: calc(100svh - 9rem);   /* barra + pie + márgenes */
		object-fit: contain;
		border-radius: var(--radius);
	}
	.lightbox__caption {
		max-width: 60ch;
		color: var(--text-muted);
		font-size: var(--step--1);
		text-align: center;
	}
	.lightbox__btn {
		display: inline-grid;
		place-items: center;
		width: 44px;
		height: 44px;
		flex: none;
		border: 1px solid var(--line);
		border-radius: 50%;
		background: rgba(20, 20, 19, .75);
		color: var(--text-strong);
		cursor: pointer;
		transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
	}
	.lightbox__btn:hover { border-color: var(--accent); background: var(--surface-2); }
	.lightbox__nav {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
	}
	.lightbox__nav--prev { left: var(--space-xs); }
	.lightbox__nav--next { right: var(--space-xs); }
	.lightbox__nav[hidden] { display: none; }
	@media (min-width: 48rem) {
		.lightbox__figure { padding-inline: calc(44px + var(--space-lg)); }
		.lightbox__nav--prev { left: var(--space-md); }
		.lightbox__nav--next { right: var(--space-md); }
	}
	/* Con el visor abierto, la página de detrás no se desplaza. */
	html.lightbox-open { overflow: hidden; }

	/* Badge "reemplazable" sobre el placeholder. */
	.inst__pending {
		position: absolute;
		left: var(--space-sm);
		top: var(--space-sm);
		display: inline-flex;
		align-items: center;
		gap: .4em;
		font-family: var(--font-display);
		font-size: .72rem;
		font-weight: var(--weight-semibold);
		letter-spacing: .04em;
		text-transform: uppercase;
		color: var(--text-strong);
		background: rgba(20, 20, 19, .72);
		backdrop-filter: blur(4px);
		-webkit-backdrop-filter: blur(4px);
		border: 1px dashed var(--accent);
		padding: .35em .6em;
		border-radius: var(--radius-sm);
	}
	.inst__pending .onyx-icon { color: var(--accent); }

	.inst__name { font-size: var(--step-1); font-weight: var(--weight-semibold); color: var(--text-strong); }

	/* Sin foto (Máquinas): tarjeta solo con texto y la franja champagne de
	   marca arriba, en lugar de un placeholder. */
	.maq-card--noimg { position: relative; }
	.maq-card--noimg::before {
		content: "";
		position: absolute;
		inset: 0 0 auto 0;
		height: 2px;
		background: var(--champagne-metal);
		opacity: .7;
	}
	.inst__desc { color: var(--text-muted); font-size: var(--step-0); }

	/* Franja de servicios sin foto (vestuarios, duchas): banda con iconos,
	   distinta de las tarjetas de zona para que no parezcan fotos que faltan.
	   Solo los servicios, sin título ni texto de apoyo. */
	.inst__servicios {
		position: relative;
		margin-top: var(--space-xl);
		padding: var(--space-md) var(--space-md) var(--space-md) calc(var(--space-md) + 2px);
		border: 1px solid var(--line);
		border-radius: var(--radius-lg);
		background: linear-gradient(100deg, rgba(180, 160, 120, .09), transparent 65%), var(--onyx-deep);
		overflow: clip;
	}
	.inst__servicios::before {
		content: "";
		position: absolute;
		inset: 0 auto 0 0;
		width: 2px;
		background: var(--champagne-metal);
		opacity: .8;
	}
	.inst__serv-list { display: grid; gap: var(--space-sm); }
	.inst__serv {
		display: flex;
		align-items: center;
		gap: var(--space-sm);
		font-family: var(--font-display);
		font-size: var(--step-1);
		font-weight: var(--weight-semibold);
		line-height: var(--leading-snug);
		color: var(--text-strong);
	}
	.inst__serv-icon {
		flex: none;
		display: inline-grid;
		place-items: center;
		width: 3rem;
		height: 3rem;
		border: 1px solid var(--line);
		border-radius: 50%;
		background: rgba(180, 160, 120, .08);
		color: var(--accent);
	}
	/* Desde tableta: los servicios en fila, centrados, cada uno con su ancho
	   natural (se estrechan si no caben, sin recortarse) y con separador. */
	@media (min-width: 48rem) {
		.inst__servicios { padding: var(--space-lg) var(--space-xl); }
		.inst__serv-list {
			grid-auto-flow: column;
			grid-auto-columns: minmax(0, max-content);
			justify-content: center;
			gap: var(--space-xl);
		}
		.inst__serv + .inst__serv {
			padding-left: var(--space-xl);
			border-left: 1px solid var(--line);
		}
	}
}

/* -------------------------------------------------------------------------
   7. Acceso / App
   ------------------------------------------------------------------------- */
@layer sections {
	.acceso__layout {
		display: grid;
		gap: var(--space-xl);
		align-items: center;
	}
	/* Encabezado a la izquierda; el head no lleva margen inferior grande aquí. */
	.acceso__content .section__head { margin-bottom: var(--space-lg); }

	.acceso__steps { display: grid; gap: var(--space-md); }
	.acceso__step {
		display: grid;
		grid-template-columns: auto 1fr;
		gap: var(--space-md);
		align-items: start;
	}
	.acceso__step-icon {
		display: inline-grid;
		place-items: center;
		width: 3rem;
		height: 3rem;
		border-radius: var(--radius);
		color: var(--accent);
		background: rgba(180, 160, 120, .08);
		border: 1px solid var(--line);
	}
	.acceso__step-title { font-size: var(--step-1); font-weight: var(--weight-semibold); color: var(--text-strong); }
	.acceso__step-text { color: var(--text-muted); font-size: var(--step-0); margin-top: .15rem; }

	/* Visual: credencial de acceso con QR, sin marco de teléfono (Bookgy aún
	   no ha confirmado dónde tiene el socio su acceso). Sin fotos. */
	.acceso__visual { display: grid; place-items: center; }
	.acceso__pass {
		width: min(300px, 80vw);
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: var(--space-md);
		padding: var(--space-xl) var(--space-lg);
		border-radius: 1.6rem;
		background:
			radial-gradient(120% 80% at 50% 0%, rgba(180, 160, 120, .14), transparent 60%),
			linear-gradient(180deg, var(--surface), var(--onyx-deep));
		border: 1px solid var(--line);
		box-shadow: var(--shadow-lg), var(--glow-champagne);
	}
	.acceso__badge-24 {
		display: inline-flex;
		align-items: center;
		gap: .35em;
		font-family: var(--font-display);
		font-weight: var(--weight-semibold);
		font-size: var(--step--1);
		letter-spacing: .06em;
		color: var(--accent-soft);
		border: 1px solid var(--line);
		border-radius: var(--radius-pill);
		padding: .3em .7em;
		background: rgba(180, 160, 120, .06);
	}
	.acceso__qr {
		background: #EDEBE6;
		padding: .85rem;
		border-radius: var(--radius);
		box-shadow: var(--shadow);
		line-height: 0;
	}
	.acceso__qr-svg { width: min(150px, 42vw); height: auto; }
	.acceso__qr-label {
		font-family: var(--font-display);
		font-size: var(--step--1);
		letter-spacing: .04em;
		color: var(--text-muted);
	}

	/* Bloque de la app de socio (app de Bookgy); se muestra si hay enlaces de tienda. */
	.acceso__app {
		margin-top: var(--space-xl);
		display: grid;
		gap: var(--space-lg);
		align-items: center;
	}
	.acceso__app-kicker {
		display: inline-flex;
		align-items: center;
		gap: .5em;
		font-family: var(--font-display);
		font-size: var(--step--1);
		font-weight: var(--weight-semibold);
		letter-spacing: var(--tracking-eyebrow);
		text-transform: uppercase;
		color: var(--accent);
	}
	.acceso__app-title { font-size: var(--step-2); color: var(--text-strong); margin-top: var(--space-2xs); }
	.acceso__app-text { color: var(--text-muted); margin-top: var(--space-2xs); max-width: 52ch; }

	.acceso__app-web { color: var(--text-muted); margin-top: var(--space-xs); font-size: var(--step--1); }
	.acceso__app-web a { color: var(--accent-soft); text-underline-offset: .2em; }
	.acceso__app-web a:hover { color: var(--accent); }

	@media (min-width: 56rem) {
		.acceso__layout { grid-template-columns: 1.1fr .9fr; }
		.acceso__app { grid-template-columns: minmax(0, 1fr) auto; }
		/* Botones de texto apilados: si van en fila, la columna del texto se queda estrecha. */
		.acceso__app .store-buttons { flex-direction: column; align-items: stretch; }
		.acceso__app .store-button { width: 100%; justify-content: space-between; }
	}
}

/* -------------------------------------------------------------------------
   Acordeón (componente reutilizable: Máquinas y FAQ)
   <details>/<summary> nativo: abre y cierra sin JS, con teclado y con la
   búsqueda del navegador.
   ------------------------------------------------------------------------- */
@layer components {
	.accordion__item { border-bottom: 1px solid var(--line); }
	.accordion__item:first-child { border-top: 1px solid var(--line); }

	.accordion__trigger {
		display: flex;
		align-items: center;
		gap: var(--space-sm);
		padding: var(--space-md) var(--space-2xs);
		list-style: none;
		cursor: pointer;
		color: var(--text-strong);
		transition: color var(--dur) var(--ease);
	}
	.accordion__trigger::-webkit-details-marker { display: none; }
	.accordion__trigger::marker { content: ""; }
	.accordion__trigger > h3 { margin: 0; color: inherit; }
	.accordion__trigger:hover { color: var(--accent-soft); }
	.accordion__trigger:focus-visible {
		outline: 2px solid var(--accent-soft);
		outline-offset: -2px;
		border-radius: var(--radius-sm);
	}

	.accordion__chevron {
		margin-left: var(--space-sm);
		color: var(--text-muted);
		flex: none;
		transition: transform var(--dur) var(--ease), color var(--dur) var(--ease);
	}
	.accordion__item[open] > .accordion__trigger .accordion__chevron {
		transform: rotate(180deg);
		color: var(--accent);
	}

	/* Apertura animada donde el navegador lo soporta; en el resto es instantánea. */
	@supports (interpolate-size: allow-keywords) and selector(::details-content) {
		.accordion__item { interpolate-size: allow-keywords; }
		.accordion__item::details-content {
			block-size: 0;
			overflow: clip;
			transition: block-size var(--dur) var(--ease-out), content-visibility var(--dur) allow-discrete;
		}
		.accordion__item[open]::details-content { block-size: auto; }
		/* El reset global de movimiento no alcanza a ::details-content. */
		@media (prefers-reduced-motion: reduce) {
			.accordion__item::details-content { transition: none; }
		}
	}
}

/* -------------------------------------------------------------------------
   5. Máquinas por grupo muscular (acordeón + catálogo agrupado)
   ------------------------------------------------------------------------- */
@layer sections {

	.maquinas__grupo-icon {
		display: inline-grid;
		place-items: center;
		width: 2.75rem;
		height: 2.75rem;
		border-radius: var(--radius);
		color: var(--accent);
		background: rgba(180, 160, 120, .08);
		border: 1px solid var(--line);
		flex: none;
	}
	.maquinas__grupo-name {
		font-family: var(--font-display);
		font-weight: var(--weight-display);
		font-size: var(--step-2);
		color: var(--text-strong);
	}
	.maquinas__grupo-name { flex: none; }
	.maquinas__grupo-count {
		margin-left: auto;
		color: var(--text-muted);
		font-size: var(--step--1);
		font-family: var(--font-display);
		white-space: nowrap;
	}
	/* Vista admin: el aviso de catálogo pendiente ocupa el hueco libre y se
	   parte en líneas (no desborda en móvil ni parte el nombre del grupo). */
	.maquinas__grupo-count:has(.onyx-todo) { flex: 1 1 0; min-width: 0; white-space: normal; text-align: right; }
	.maquinas__grupo-count .onyx-todo { white-space: normal; max-width: 100%; }

	.maquinas__grid {
		display: grid;
		gap: var(--space-md);
		grid-template-columns: repeat(auto-fill, minmax(min(100%, 13.5rem), 1fr));
		padding-bottom: var(--space-xl);
	}

	.maq-card {
		padding: 0;
		overflow: clip;
		display: flex;
		flex-direction: column;
	}
	.maq-card__media {
		position: relative;
		aspect-ratio: 4 / 3;
		background: var(--onyx-deep);
		overflow: clip;
	}
	.maq-card__img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
		transition: transform var(--dur-slow) var(--ease-out);
	}
	.maq-card:hover .maq-card__img { transform: scale(1.04); }
	.maq-card__pending {
		position: absolute;
		left: var(--space-2xs);
		top: var(--space-2xs);
		display: inline-flex;
		align-items: center;
		gap: .35em;
		font-family: var(--font-display);
		font-size: .66rem;
		font-weight: var(--weight-semibold);
		letter-spacing: .03em;
		text-transform: uppercase;
		color: var(--text-strong);
		background: rgba(20, 20, 19, .72);
		backdrop-filter: blur(4px);
		-webkit-backdrop-filter: blur(4px);
		border: 1px dashed var(--accent);
		padding: .3em .5em;
		border-radius: var(--radius-sm);
	}
	.maq-card__pending .onyx-icon { color: var(--accent); }

	.maq-card__body { padding: var(--space-sm) var(--space-md) var(--space-md); display: grid; gap: var(--space-2xs); }
	.maq-card--noimg .maq-card__body { padding-top: var(--space-md); }
	.maq-card__name { font-size: var(--step-0); font-weight: var(--weight-semibold); color: var(--text-strong); }
	.maq-card__desc { color: var(--text-muted); font-size: var(--step--1); }
}

/* -------------------------------------------------------------------------
   10. Instagram (franja con titular, @usuario y botón al perfil; sin galería)
   ------------------------------------------------------------------------- */
@layer sections {
	.instagram__band {
		display: grid;
		justify-items: center;
		gap: var(--space-md);
		padding: var(--space-xl) var(--space-md);
		text-align: center;
		border: 1px solid var(--line);
		border-radius: var(--radius-lg);
		background: radial-gradient(120% 140% at 0% 0%, rgba(180, 160, 120, .12), transparent 55%), var(--surface);
	}
	.instagram__icon {
		display: inline-grid;
		place-items: center;
		width: 3.5rem;
		height: 3.5rem;
		border: 1px solid var(--line);
		border-radius: 50%;
		background: rgba(180, 160, 120, .08);
		color: var(--accent);
	}
	.instagram__text { display: grid; gap: var(--space-2xs); justify-items: center; }
	.instagram__handle {
		color: var(--accent-soft);
		font-family: var(--font-display);
		font-weight: var(--weight-semibold);
		letter-spacing: .02em;
	}

	/* Desde tableta: icono, texto y botón en una fila. */
	@media (min-width: 48rem) {
		.instagram__band {
			grid-template-columns: auto 1fr auto;
			align-items: center;
			justify-items: start;
			gap: var(--space-lg);
			padding: var(--space-xl);
			text-align: left;
		}
		.instagram__text { justify-items: start; }
	}
}

/* -------------------------------------------------------------------------
   11. FAQ (acordeón)
   ------------------------------------------------------------------------- */
@layer sections {
	.faq__accordion {
		max-width: 60rem; /* columna legible, alineada a la izquierda */
	}
	.faq__question {
		flex: 1;
		font-family: var(--font-display);
		font-weight: var(--weight-semibold);
		font-size: var(--step-1);
		color: var(--text-strong);
	}
	.faq__answer {
		color: var(--text-muted);
		max-width: 65ch;
		padding-bottom: var(--space-lg);
	}
	.faq__answer p + p { margin-top: var(--space-sm); }
}

/* -------------------------------------------------------------------------
   12. Contacto
   ------------------------------------------------------------------------- */
@layer sections {
	.contacto__layout {
		display: grid;
		gap: var(--space-xl);
		align-items: start;
	}

	/* Horario 24/7 destacado */
	.contacto__hours {
		display: flex;
		align-items: center;
		gap: var(--space-md);
		padding: var(--space-md) var(--space-lg);
		border: 1px solid var(--accent);
		border-radius: var(--radius-lg);
		background: rgba(180, 160, 120, .06);
		box-shadow: var(--glow-champagne);
	}
	.contacto__hours .onyx-icon { color: var(--accent); flex: none; }
	.contacto__hours strong {
		display: block;
		font-family: var(--font-display);
		font-size: var(--step-2);
		color: var(--text-strong);
	}
	.contacto__hours-sub { color: var(--text-muted); font-size: var(--step--1); }

	.contacto__details { display: grid; gap: var(--space-md); margin: var(--space-lg) 0; }
	.contacto__details li {
		display: grid;
		grid-template-columns: auto 1fr;
		gap: var(--space-sm);
		align-items: start;
	}
	.contacto__details > li > .onyx-icon { color: var(--accent); margin-top: .15rem; }
	.contacto__det-label {
		display: block;
		font-family: var(--font-display);
		font-size: var(--step--1);
		letter-spacing: var(--tracking-eyebrow);
		text-transform: uppercase;
		color: var(--text-muted);
		margin-bottom: .1rem;
	}
	.contacto__det-value { color: var(--text); }
	.contacto__det-note { display: block; color: var(--text-muted); font-size: var(--step--1); margin-top: .15rem; }
	a.contacto__det-value { transition: color var(--dur-fast) var(--ease); }
	a.contacto__det-value:hover { color: var(--accent-soft); }

	/* Mapa */
	.contacto__map {
		margin-top: var(--space-lg);
		border: 1px solid var(--line);
		border-radius: var(--radius-lg);
		overflow: clip;
		background: var(--onyx-deep);
	}
	.contacto__map iframe { width: 100%; min-height: 300px; border: 0; display: block; }
	.contacto__map-ph {
		aspect-ratio: 16 / 10;
		display: grid;
		place-items: center;
		align-content: center;
		gap: var(--space-sm);
		text-align: center;
		padding: var(--space-lg);
		background:
			radial-gradient(120% 90% at 50% 0%, rgba(180, 160, 120, .10), transparent 60%),
			var(--onyx-deep);
	}
	.contacto__map-ph .onyx-icon { color: var(--accent); }
	.contacto__map-addr { color: var(--text); max-width: 30ch; }
	.contacto__map-ph[hidden] { display: none; }
	.contacto__map-note { color: var(--text-muted); font-size: var(--step--1); max-width: 34ch; }
	/* «Abrir en Google Maps»: acción secundaria con aspecto de enlace (sin JS,
	   la única: lleva a Google Maps en otra pestaña). */
	.contacto__map-link {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
		color: var(--accent-soft);
		text-decoration: underline;
		text-underline-offset: .2em;
	}
	.contacto__map-link:hover { color: var(--accent); }

	/* Formulario */
	.contacto__form {
		background: var(--surface);
		border: 1px solid var(--line-soft);
		border-radius: var(--radius-lg);
		padding: var(--space-lg);
	}
	.contacto__form-intro { color: var(--text-muted); margin-bottom: var(--space-lg); }

	.field { display: grid; gap: .45rem; margin-bottom: var(--space-md); }
	.field label {
		font-family: var(--font-display);
		font-weight: var(--weight-semibold);
		font-size: var(--step--1);
		color: var(--text);
	}
	.field__opt { color: var(--text-muted); font-weight: var(--weight-body); text-transform: none; }
	.field input,
	.field textarea {
		width: 100%;
		padding: .8rem 1rem;
		background: var(--onyx-deep);
		border: 1px solid var(--line);
		border-radius: var(--radius-sm);
		color: var(--text-strong);
		transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
	}
	.field input::placeholder,
	.field textarea::placeholder { color: var(--text-muted); }
	.field input:focus,
	.field textarea:focus {
		outline: none;
		border-color: var(--accent);
		box-shadow: var(--focus-ring);
	}
	.field input:user-invalid,
	.field textarea:user-invalid,
	.field [aria-invalid="true"] { border-color: var(--danger); }
	.field__error {
		color: var(--danger);
		font-size: var(--step--1);
		line-height: var(--leading-snug);
	}
	.field--check .field__error { grid-column: 1 / -1; }
	.field--check label a { color: var(--accent-soft); text-decoration: underline; text-underline-offset: .2em; }

	.field--check {
		grid-template-columns: auto 1fr;
		align-items: start;
		gap: .65rem;
	}
	.field--check input { width: auto; margin-top: .2rem; accent-color: var(--champagne); }
	.field--check label {
		font-weight: var(--weight-body);
		font-family: var(--font-body);
		color: var(--text-muted);
		font-size: var(--step--1);
		line-height: var(--leading-snug);
	}

	.contacto__form .btn { width: 100%; margin-top: var(--space-2xs); }

	/* Resultado del envío (éxito o error), al principio del formulario. */
	.contacto__status {
		display: flex;
		align-items: flex-start;
		gap: var(--space-2xs);
		margin-bottom: var(--space-lg);
		padding: var(--space-sm) var(--space-md);
		border-radius: var(--radius-sm);
		border: 1px solid var(--line);
		background: rgba(180, 160, 120, .1);
		color: var(--text-strong);
		font-size: var(--step--1);
		line-height: var(--leading-snug);
	}
	.contacto__status:focus { outline: none; }
	.contacto__status:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: 2px; }
	.contacto__status .onyx-icon { flex: none; margin-top: .05em; }
	.contacto__status--ok .onyx-icon { color: var(--accent); }
	.contacto__status--error { border-color: var(--danger); background: rgba(227, 154, 144, .08); }
	.contacto__status--error .onyx-icon { color: var(--danger); }
	.contacto__status a { color: var(--accent-soft); text-decoration: underline; }

	/* Información básica de protección de datos (primera capa). */
	/* Primera capa de protección de datos: tabla compacta etiqueta / texto. */
	.contacto__legal {
		margin-top: var(--space-md);
		padding-top: var(--space-sm);
		border-top: 1px solid var(--line-soft);
		color: var(--text-muted);
		font-size: var(--step--1);
		line-height: var(--leading-snug);
	}
	.contacto__legal-title {
		margin-bottom: var(--space-2xs);
		font-family: var(--font-display);
		font-weight: var(--weight-semibold);
		color: var(--text);
	}
	.contacto__legal-list { display: grid; gap: .4rem; margin: 0; }
	.contacto__legal-list > div { display: grid; gap: .1rem; }
	.contacto__legal-list dt { font-weight: var(--weight-semibold); color: var(--text); }
	.contacto__legal-list dd { margin: 0; }
	@media (min-width: 36rem) {
		.contacto__legal-list > div { grid-template-columns: 8.5rem 1fr; gap: var(--space-sm); }
	}
	.contacto__legal a { color: var(--accent-soft); text-decoration: underline; text-underline-offset: .2em; }

	/* Honeypot oculto (accesible para bots, invisible para humanos). */
	.hp {
		position: absolute;
		left: -9999px;
		width: 1px;
		height: 1px;
		overflow: hidden;
	}

	@media (min-width: 56rem) {
		.contacto__layout { grid-template-columns: 1fr 1fr; gap: var(--space-2xl); }
	}
}

/* -------------------------------------------------------------------------
   Páginas interiores (aviso legal, privacidad, cookies)
   ------------------------------------------------------------------------- */
@layer sections {
	.entry-title { font-size: var(--step-4); margin-bottom: var(--space-xl); }
	.entry-content { color: var(--text); }
	.entry-content > * + * { margin-top: var(--space-sm); }
	.entry-content h2 { font-size: var(--step-2); margin-top: var(--space-xl); }
	.entry-content h3 { font-size: var(--step-1); margin-top: var(--space-lg); }
	.entry-content ul,
	.entry-content ol { list-style: disc; padding-left: 1.25rem; }
	.entry-content ol { list-style: decimal; }
	.entry-content li + li { margin-top: .5rem; }
	.entry-content li::marker { color: var(--accent); }
	.entry-content a:not(.btn) { color: var(--accent-soft); text-decoration: underline; text-underline-offset: .2em; overflow-wrap: anywhere; }
	.entry-content a:not(.btn):hover { color: var(--accent); }
	/* Botones dentro de las páginas (p. ej. «Configuración de cookies»): los
	   colores del CTA, no los de los enlaces del texto (contraste AA). */
	.entry-content a.btn { color: var(--cta-fg); text-decoration: none; }
	.entry-content code {
		font-size: .9em;
		padding: .1em .35em;
		border-radius: 4px;
		background: var(--surface-2);
		color: var(--text-strong);
	}

	/* Tabla de cookies: en móvil se desplaza en horizontal dentro de su caja. */
	.onyx-table {
		overflow-x: auto;
		margin-top: var(--space-md);
		border: 1px solid var(--line-soft);
		border-radius: var(--radius);
	}
	.onyx-table:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: 2px; }
	.onyx-table table { width: 100%; min-width: 40rem; border-collapse: collapse; font-size: var(--step--1); }
	.onyx-table th,
	.onyx-table td { text-align: left; vertical-align: top; padding: .7rem .85rem; border-bottom: 1px solid var(--line-soft); }
	.onyx-table th { font-family: var(--font-display); color: var(--text-strong); background: var(--surface); border-bottom-color: var(--line); }
	.onyx-table tr:last-child td { border-bottom: 0; }

	.entry-content .onyx-legal-updated { margin-top: var(--space-xl); color: var(--text-muted); font-size: var(--step--1); }

	/* Modelo de formulario de desistimiento (anexo B TRLGDCU). */
	.onyx-modelo {
		margin-top: var(--space-md);
		padding: var(--space-md);
		border: 1px dashed var(--line);
		border-radius: var(--radius);
		background: var(--surface);
	}
	.onyx-modelo > * + * { margin-top: var(--space-sm); }

	/* Datos pendientes en textos legales en borrador: muy visibles para que
	   nadie publique la página sin completarlos. */
	.onyx-pendiente {
		padding: .05em .35em;
		border-radius: 4px;
		background: var(--champagne);
		color: var(--onyx);
		font-weight: var(--weight-semibold);
		box-decoration-break: clone;
		-webkit-box-decoration-break: clone;
	}
}

/* -------------------------------------------------------------------------
   Aviso de cookies (código propio, guía de la AEPD)
   Primera capa: <dialog> modal centrado con el fondo oscurecido (bloquea la
   navegación hasta elegir, sin ser un muro: «Rechazar» está al mismo nivel).
   «Aceptar», «Personalizar» y «Rechazar» son el mismo .btn, con el mismo
   tamaño y peso. Segunda capa: otro <dialog> modal con interruptores.
   ------------------------------------------------------------------------- */
@layer components {
	.cookie-banner {
		width: min(100% - 2 * var(--container-pad), 34rem);
		max-height: min(90dvh, 40rem);
		margin: auto;
		padding: var(--space-md);
		overflow: auto;
		background: var(--surface);
		color: var(--text);
		border: 1px solid var(--line);
		border-radius: var(--radius-lg);
		box-shadow: var(--shadow-lg);
	}
	.cookie-banner[open] { display: grid; gap: var(--space-sm); }
	.cookie-banner::backdrop { background: rgba(0, 0, 0, .72); }
	.cookie-banner:focus { outline: none; }
	.cookie-banner:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: 2px; }
	.cookie-banner__title {
		font-family: var(--font-display);
		font-weight: var(--weight-display);
		font-size: var(--step-1);
		color: var(--text-strong);
	}
	.cookie-banner__text { font-size: var(--step--1); line-height: var(--leading-snug); max-width: none; }
	.cookie-banner__text a,
	.cookie-panel__intro a { color: var(--accent-soft); text-decoration: underline; text-underline-offset: .2em; }
	.cookie-banner__actions,
	.cookie-panel__actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2xs); }
	.cookie-banner__actions .btn,
	.cookie-panel__actions .btn {
		width: 100%;
		min-height: 2.75rem;
		padding: .55rem .5rem;
		font-size: var(--step--1);
	}
	/* Por debajo de ~384 px «Personalizar» no cabe en un tercio: los tres, apilados e iguales. */
	@media (max-width: 23.99rem) {
		.cookie-banner__actions { grid-template-columns: minmax(0, 1fr); }
	}
	@media (min-width: 36rem) {
		.cookie-banner { padding: var(--space-lg); }
	}

	/* Segunda capa. */
	.cookie-panel {
		width: min(100% - 2 * var(--container-pad), 36rem);
		max-height: min(90dvh, 44rem);
		margin: auto;
		padding: 0;
		overflow: auto;
		background: var(--surface);
		color: var(--text);
		border: 1px solid var(--line);
		border-radius: var(--radius-lg);
		box-shadow: var(--shadow-lg);
	}
	.cookie-panel::backdrop { background: rgba(0, 0, 0, .72); }
	.cookie-panel__inner { display: grid; gap: var(--space-md); padding: var(--space-md); }
	.cookie-panel__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); }
	.cookie-panel__title { font-size: var(--step-1); }
	.cookie-panel__close {
		display: inline-grid;
		place-items: center;
		flex: none;
		width: 44px;
		height: 44px;
		border: 1px solid var(--line);
		border-radius: 50%;
		background: transparent;
		color: var(--text-strong);
		cursor: pointer;
	}
	.cookie-panel__close:hover { border-color: var(--accent); }
	.cookie-panel__intro { font-size: var(--step--1); line-height: var(--leading-snug); color: var(--text); }
	.cookie-panel__cats { display: grid; margin: 0; border-top: 1px solid var(--line-soft); }
	.cookie-cat { display: grid; gap: var(--space-2xs); padding-block: var(--space-sm); border-bottom: 1px solid var(--line-soft); }
	.cookie-cat__head { display: flex; align-items: center; gap: var(--space-sm); }
	.cookie-cat__name {
		margin-right: auto;
		font-family: var(--font-display);
		font-weight: var(--weight-semibold);
		color: var(--text-strong);
	}
	.cookie-cat__state { color: var(--text-muted); font-size: var(--step--1); }
	.cookie-cat__desc { color: var(--text-muted); font-size: var(--step--1); line-height: var(--leading-snug); }
	/* Móvil: los tres botones del panel apilados (iguales, a todo el ancho). */
	@media (max-width: 35.99rem) {
		.cookie-panel__actions { grid-template-columns: 1fr; }
	}
	@media (min-width: 36rem) {
		.cookie-panel__inner { padding: var(--space-lg); }
	}

	/* Interruptor accesible (checkbox con role="switch"). */
	.cookie-switch {
		appearance: none;
		-webkit-appearance: none;
		position: relative;
		flex: none;
		width: 2.75rem;
		height: 1.5rem;
		margin: 0;
		border: 1px solid var(--line);
		border-radius: var(--radius-pill);
		background: var(--onyx-deep);
		cursor: pointer;
		transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
	}
	.cookie-switch::before {
		content: "";
		position: absolute;
		top: 50%;
		left: 3px;
		width: 1.05rem;
		height: 1.05rem;
		border-radius: 50%;
		background: var(--muted);
		transform: translateY(-50%);
		transition: transform var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
	}
	.cookie-switch:checked { background: var(--accent); border-color: var(--accent); }
	.cookie-switch:checked::before { background: var(--onyx); transform: translate(1.2rem, -50%); }
	.cookie-switch:disabled { cursor: not-allowed; opacity: .75; }
	.cookie-switch:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: 3px; }
}