/*!
Theme Name: LEGALZONE
Theme URI: https://legalzone.es
Author: Legal Zone
Description: Tema oficial legalzone.es
Version: 5.0.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.2
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: legalzone
Tags: casino, apuestas, comparador, afiliacion
*/

/* ============================================================
   LEGALZONE 5.0 — HOJA DE ESTILOS BASE

   Contiene únicamente lo global: tokens, reset, tipografía,
   layout y primitivas reutilizables. Cada plantilla carga su
   propio CSS encima de esto.

   Índice
   ------
   01. Tokens
   02. Reset
   03. Tipografía
   04. Layout
   05. Enlaces
   06. Media
   07. Formularios
   08. Botones
   09. Primitivas
   10. Utilidades
   11. Accesibilidad
   12. Impresión
   ============================================================ */


/* ============================================================
   01. TOKENS
   ============================================================ */

:root {
	/* --- Paleta de marca ------------------------------------
	   Los cinco colores de LegalZone. NO se usan directamente en
	   componentes: solo a través de los tokens semánticos. */
	--lz-white: #F4F4F4;
	--lz-black: #1C1C1C;
	--lz-green: #0F766E;
	--lz-ivory: #FFFBEB;
	--lz-orange: #F97316;
	--lz-green-deep: #0B2E2B;   /* verde profundo derivado: cabecera y hero */

	/* Alias heredados (navy/gold) para CSS antiguo: apuntan a la paleta
	   nueva. No usarlos en código nuevo. */
	--lz-navy: #0B2E2B;
	--lz-navy-deep: #1C1C1C;
	--lz-navy-soft: #0F766E;
	--lz-gold: #F97316;
	--lz-gold-bright: #FB8A3C;
	--lz-gold-dim: #C2410C;
	--lz-star: #F97316;

	/* --- Tokens semánticos (tema claro) -------------------
	   Todo lo que pinta la interfaz usa ESTOS, nunca las primitivas.
	   Contrastes medidos (WCAG 2.2): ver DISENO.md.

	   REGLA blanco/ivory: #F4F4F4 e #FFFBEB tienen 1,06:1 entre sí.
	   Nunca texto de uno sobre el otro, y una superficie ivory sobre
	   el fondo blanco SIEMPRE lleva borde (--lz-accent-border). El
	   ivory se usa como texto sobre fondos oscuros/verdes y como
	   fondo de avisos destacados con borde. */
	--lz-bg: #F4F4F4;
	--lz-surface: #FAFAFA;
	--lz-surface-raised: #FDFDFD;
	--lz-surface-sunken: #EAEAEA;
	--lz-surface-inverse: #1C1C1C;
	--lz-surface-header: #0B2E2B;
	--lz-surface-topbar: #1C1C1C;
	--lz-surface-footer: #1C1C1C;
	--lz-surface-footer-deep: #141414;

	--lz-ink: #1C1C1C;                 /* 16,3:1 sobre surface */
	--lz-ink-on-inverse: #FFFBEB;      /* ivory: 14:1 sobre el verde profundo */
	--lz-muted-on-inverse: #B9C6C4;    /* 8,3:1 sobre el verde profundo */
	--lz-heading: #1C1C1C;
	--lz-link: #0F766E;                /* 5,2:1 sobre surface */
	--lz-link-hover: #0A5A54;          /* 7,7:1 */
	--lz-muted: #555555;               /* 6,2:1 incluso sobre sunken */
	--lz-faint: #666666;               /* 4,8:1 sobre sunken: sigue siendo texto legible */

	--lz-line: #DADADA;                /* separadores decorativos */
	--lz-line-soft: #E6E6E6;
	--lz-line-strong: #8A8A8A;         /* bordes de controles: 3,3:1 */
	--lz-line-inverse: rgba(255, 251, 235, .16);

	/* Marca (verde): enlaces, seleccionado, foco, datos positivos. */
	--lz-brand: #0F766E;
	--lz-brand-hover: #0A5A54;
	--lz-brand-text: #0F766E;
	--lz-on-brand: #FFFBEB;            /* 5,3:1 */
	--lz-brand-surface: #E3F0EE;
	--lz-brand-border: #9CCBC5;

	/* Acción (naranja): SOLO la acción principal de cada vista.
	   Texto encima siempre #1C1C1C (6,1:1): el blanco no pasa (2,5:1).
	   Como texto sobre claro se usa --lz-accent-text, nunca el naranja. */
	--lz-accent: #F97316;
	--lz-accent-hover: #EA6A12;
	--lz-accent-active: #D45F10;
	--lz-accent-ink: #1C1C1C;
	--lz-accent-text: #C2410C;         /* 5:1 sobre surface */
	--lz-accent-surface: #FFFBEB;      /* ivory, siempre con borde */
	--lz-accent-border: #F2C49A;

	--lz-focus: #0F766E;               /* 5:1 sobre el fondo */

	--lz-search-bg: #FDFDFD;
	--lz-search-ink: #1C1C1C;
	--lz-search-placeholder: #666666;

	--lz-success: #0F766E;
	--lz-success-bg: #E3F0EE;
	--lz-danger: #B42318;
	--lz-danger-bg: #FBEAE8;
	--lz-warning: #9A3412;
	--lz-warning-bg: #FFF1E6;

	--lz-skeleton: #E4E4E4;
	--lz-skeleton-shine: #F2F2F2;
	--lz-overlay: rgba(28, 28, 28, .62);

	--lz-shadow-color: 28, 28, 28;

	/* --- Tipografía --------------------------------------
	   Kedebideri es la voz de marca en titulares; el cuerpo usa
	   la pila del sistema por rendimiento. Si la fuente no está
	   disponible, la cascada degrada sin romper la jerarquía. */
	--lz-font-display: 'Kedebideri', 'Oswald', system-ui, sans-serif;
	--lz-font-body: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	--lz-font-mono: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

	/* Escala tipográfica: fluida entre 360px y 1200px de ancho. */
	--lz-text-xs: 0.75rem;
	--lz-text-sm: 0.8125rem;
	--lz-text-base: 0.9375rem;
	--lz-text-md: 1rem;
	--lz-text-lg: 1.125rem;
	--lz-text-xl: clamp(1.125rem, 0.95rem + 0.6vw, 1.375rem);
	--lz-text-2xl: clamp(1.375rem, 1.1rem + 1.1vw, 1.75rem);
	--lz-text-3xl: clamp(1.625rem, 1.2rem + 1.8vw, 2.25rem);
	--lz-text-4xl: clamp(2rem, 1.35rem + 2.9vw, 3.375rem);

	--lz-leading-tight: 1.15;
	--lz-leading-snug: 1.3;
	--lz-leading-normal: 1.6;
	--lz-leading-relaxed: 1.8;

	--lz-tracking-tight: -0.01em;
	--lz-tracking-wide: 0.05em;
	--lz-tracking-wider: 0.1em;

	/* --- Espaciado (escala de 4px) ------------------------ */
	--lz-space-1: 0.25rem;
	--lz-space-2: 0.5rem;
	--lz-space-3: 0.75rem;
	--lz-space-4: 1rem;
	--lz-space-5: 1.25rem;
	--lz-space-6: 1.5rem;
	--lz-space-7: 1.75rem;
	--lz-space-8: 2rem;
	--lz-space-9: 2.25rem;
	--lz-space-10: 2.5rem;
	--lz-space-12: 3rem;
	--lz-space-16: 4rem;
	--lz-space-20: 5rem;

	/* Ritmo vertical de sección, comprimido en móvil. */
	--lz-section-y: clamp(2.5rem, 1.5rem + 3.5vw, 3.5rem);

	/* --- Bordes y radios --------------------------------- */
	--lz-radius-sm: 6px;
	--lz-radius: 8px;
	--lz-radius-md: 12px;
	--lz-radius-lg: 14px;
	--lz-radius-pill: 999px;

	/* --- Sombras ------------------------------------------
	   Discretas a propósito: la jerarquía la marca el color. */
	--lz-shadow-sm: 0 1px 2px rgba(var(--lz-shadow-color), .06);
	--lz-shadow: 0 4px 12px rgba(var(--lz-shadow-color), .08);
	--lz-shadow-md: 0 12px 28px rgba(var(--lz-shadow-color), .10);
	--lz-shadow-lg: 0 24px 60px rgba(var(--lz-shadow-color), .34);

	/* --- Layout ------------------------------------------ */
	--lz-container: 1200px;
	--lz-container-narrow: 820px;
	--lz-gutter: clamp(1rem, 0.5rem + 2vw, 1.5rem);
	/* Breakpoints (no admiten variables en @media):
	   móvil 375 · tablet 768 · menú 1024 · escritorio 1280. */
	--lz-tap: 44px;   /* objetivo táctil mínimo */

	/* --- Movimiento -------------------------------------- */
	--lz-ease: cubic-bezier(.4, 0, .2, 1);
	--lz-duration: .25s;
	--lz-duration-slow: .45s;   /* lo usaba blog.css sin estar definido */

	/* --- Capas ------------------------------------------- */
	--lz-z-dropdown: 100;
	--lz-z-sticky: 200;
	--lz-z-overlay: 300;
	--lz-z-modal: 400;
}


/* --- Tema oscuro -------------------------------------------
   Tres reglas para cubrir los tres estados posibles: preferencia
   del sistema sin elección explícita, y el atributo data-theme
   en ambos sentidos para que el selector del usuario mande.
   Si añades un token, añádelo en los DOS bloques. */

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--lz-bg: #1C1C1C;
		--lz-surface: #242424;
		--lz-surface-raised: #2C2C2C;
		--lz-surface-sunken: #171717;
		--lz-surface-inverse: #FFFBEB;
		--lz-surface-header: #0B2E2B;
		--lz-surface-topbar: #141414;
		--lz-surface-footer: #141414;
		--lz-surface-footer-deep: #101010;

		--lz-ink: #F4F4F4;
		--lz-ink-on-inverse: #FFFBEB;
		--lz-muted-on-inverse: #B9C6C4;
		--lz-heading: #FFFBEB;
		/* El verde de marca no es legible como texto en oscuro (3,1:1). */
		--lz-link: #6FC2B9;
		--lz-link-hover: #9ED8D1;
		--lz-muted: #ADADAD;
		--lz-faint: #A0A0A0;

		--lz-line: #383838;
		--lz-line-soft: #2C2C2C;
		--lz-line-strong: #7A7A7A;
		--lz-line-inverse: rgba(255, 251, 235, .14);

		--lz-brand: #0F766E;
		--lz-brand-hover: #12877E;
		--lz-brand-text: #6FC2B9;
		--lz-on-brand: #FFFBEB;
		--lz-brand-surface: #16302D;
		--lz-brand-border: #2B5752;

		--lz-accent: #F97316;
		--lz-accent-hover: #FB8A3C;
		--lz-accent-active: #EA6A12;
		--lz-accent-ink: #1C1C1C;
		--lz-accent-text: #FB8A3C;
		--lz-accent-surface: #2A2118;
		--lz-accent-border: #5A3A1E;

		--lz-focus: #6FC2B9;

		--lz-search-bg: #2C2C2C;
		--lz-search-ink: #F4F4F4;
		--lz-search-placeholder: #A0A0A0;

		--lz-success: #6FC2B9;
		--lz-success-bg: #16302D;
		--lz-danger: #F97066;
		--lz-danger-bg: #3A2220;
		--lz-warning: #FB8A3C;
		--lz-warning-bg: #2A2118;

		--lz-skeleton: #2E2E2E;
		--lz-skeleton-shine: #3A3A3A;
		--lz-overlay: rgba(10, 10, 10, .75);

		--lz-shadow-color: 0, 0, 0;
	}
}

:root[data-theme="dark"] {
	--lz-bg: #1C1C1C;
	--lz-surface: #242424;
	--lz-surface-raised: #2C2C2C;
	--lz-surface-sunken: #171717;
	--lz-surface-inverse: #FFFBEB;
	--lz-surface-header: #0B2E2B;
	--lz-surface-topbar: #141414;
	--lz-surface-footer: #141414;
	--lz-surface-footer-deep: #101010;

	--lz-ink: #F4F4F4;
	--lz-ink-on-inverse: #FFFBEB;
	--lz-muted-on-inverse: #B9C6C4;
	--lz-heading: #FFFBEB;
	/* El verde de marca no es legible como texto en oscuro (3,1:1). */
	--lz-link: #6FC2B9;
	--lz-link-hover: #9ED8D1;
	--lz-muted: #ADADAD;
	--lz-faint: #A0A0A0;

	--lz-line: #383838;
	--lz-line-soft: #2C2C2C;
	--lz-line-strong: #7A7A7A;
	--lz-line-inverse: rgba(255, 251, 235, .14);

	--lz-brand: #0F766E;
	--lz-brand-hover: #12877E;
	--lz-brand-text: #6FC2B9;
	--lz-on-brand: #FFFBEB;
	--lz-brand-surface: #16302D;
	--lz-brand-border: #2B5752;

	--lz-accent: #F97316;
	--lz-accent-hover: #FB8A3C;
	--lz-accent-active: #EA6A12;
	--lz-accent-ink: #1C1C1C;
	--lz-accent-text: #FB8A3C;
	--lz-accent-surface: #2A2118;
	--lz-accent-border: #5A3A1E;

	--lz-focus: #6FC2B9;

	--lz-search-bg: #2C2C2C;
	--lz-search-ink: #F4F4F4;
	--lz-search-placeholder: #A0A0A0;

	--lz-success: #6FC2B9;
	--lz-success-bg: #16302D;
	--lz-danger: #F97066;
	--lz-danger-bg: #3A2220;
	--lz-warning: #FB8A3C;
	--lz-warning-bg: #2A2118;

	--lz-skeleton: #2E2E2E;
	--lz-skeleton-shine: #3A3A3A;
	--lz-overlay: rgba(10, 10, 10, .75);

	--lz-shadow-color: 0, 0, 0;
}

/* Evita el flash de tema equivocado y da a los controles nativos
   (scrollbars, campos) el esquema correcto. */
:root { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) { color-scheme: dark; }
}


/* ============================================================
   02. RESET
   ============================================================ */

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

/* El atributo hidden siempre gana: un display de componente lo anulaba
   (p. ej. las sugerencias del buscador seguían visibles con resultados). */
[hidden] { display: none !important; }

html {
	-webkit-text-size-adjust: 100%;
	-moz-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-behavior: smooth;
	/* Compensa la altura del header fijo al saltar a un ancla. */
	scroll-padding-top: var(--lz-space-20);
}

body {
	margin: 0;
	background-color: var(--lz-bg);
	color: var(--lz-ink);
	font-family: var(--lz-font-body);
	font-size: var(--lz-text-md);
	line-height: var(--lz-leading-normal);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	/* Evita desbordes horizontales por elementos decorativos. */
	overflow-x: clip;
}

/* El navegador propaga el overflow del body al viewport, de modo que
   declararlo solo ahí no siempre basta: hace falta también en la raíz
   para que un elemento que se sale no genere desplazamiento lateral.
   `clip` en lugar de `hidden` para no crear un contexto de
   desplazamiento que rompería los elementos position: sticky. */
html {
	overflow-x: clip;
	max-width: 100%;
}

h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd {
	margin: 0;
}

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

hr {
	border: 0;
	border-top: 1px solid var(--lz-line);
	margin: var(--lz-space-8) 0;
}


/* ============================================================
   03. TIPOGRAFÍA
   ============================================================ */

h1, h2, h3, h4, h5, h6 {
	font-family: var(--lz-font-display);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--lz-tracking-tight);
	line-height: var(--lz-leading-tight);
	color: var(--lz-heading);
	/* Evita que un título quede con una palabra huérfana. */
	text-wrap: balance;
}

h1 { font-size: var(--lz-text-4xl); }
h2 { font-size: var(--lz-text-3xl); }
h3 { font-size: var(--lz-text-2xl); }
h4 { font-size: var(--lz-text-xl); }
h5 { font-size: var(--lz-text-lg); }
h6 { font-size: var(--lz-text-md); }

p {
	text-wrap: pretty;
}

strong, b { font-weight: 700; }

small { font-size: var(--lz-text-sm); }

/* Antetítulo: etiqueta corta sobre un titular de sección. */
.lz-kicker {
	display: inline-flex;
	align-items: center;
	gap: var(--lz-space-2);
	font-family: var(--lz-font-display);
	font-size: var(--lz-text-xs);
	text-transform: uppercase;
	letter-spacing: var(--lz-tracking-wider);
	color: var(--lz-brand-text);
}

.lz-kicker::before {
	content: "";
	width: 26px;
	height: 2px;
	background: currentColor;
}

/* Realce dorado dentro de un titular. */
.lz-accent { color: var(--lz-brand-text); }

/* Bloque de texto largo: aplica ritmo a contenido del editor. */
/* ============================================================
   Enlace de cobertura
   ============================================================
   Cubre un bloque entero por debajo de su contenido, de modo que
   pulsar en cualquier punto lleva al mismo destino que su botón. Sin
   él, todo el espacio alrededor del botón es zona muerta: el usuario
   pulsa sobre un bloque que se ilumina y no ocurre nada.

   Se marca aria-hidden y tabindex="-1" porque duplica un enlace que ya
   existe: anunciarlo dos veces a un lector de pantalla sería ruido. */

.lz-cobertura {
	position: absolute;
	inset: 0;
	/* Por encima del contenido estático del bloque. Con z-index 1 los
	   hijos posteriores en el flujo se pintaban encima y absorbían el
	   clic, que era justo lo que se quería evitar. */
	z-index: 3;
	/* Sin contenido visible ni caja propia. */
	font-size: 0;
	border-radius: inherit;
}

/* El bloque necesita ser el contexto de posicionamiento. */
.is-clicable {
	position: relative;
}

/* Los elementos con destino PROPIO se elevan sobre la cobertura para
   conservarlo. Se excluyen los marcados como decorativos
   (aria-hidden="true"): duplican el destino de la cobertura y, al
   ocupar zonas grandes —la imagen de una tarjeta—, absorbían el clic
   que debía atravesarlos. */
.is-clicable :is(a:not(.lz-cobertura), button, summary, input, select, textarea, details):not([aria-hidden="true"]) {
	position: relative;
	z-index: 4;
}

/* Lo decorativo deja pasar el clic a la cobertura que hay debajo.
   La propia cobertura se excluye: también va marcada como decorativa
   —duplica un enlace que ya existe— y sin esta excepción se anulaba a
   sí misma, dejando la tarjeta iluminada pero inerte. */
.is-clicable [aria-hidden="true"]:not(.lz-cobertura) {
	pointer-events: none;
}

.lz-prose {
	line-height: var(--lz-leading-relaxed);
	color: var(--lz-ink);
}

.lz-prose > * + * { margin-top: var(--lz-space-4); }

.lz-prose h2,
.lz-prose h3,
.lz-prose h4 {
	/* Un encabezado nunca debe quedar solo al final de una columna. */
	break-after: avoid;
}

.lz-prose ul,
.lz-prose ol {
	padding-left: var(--lz-space-6);
}

.lz-prose li + li { margin-top: var(--lz-space-2); }

.lz-prose img { border-radius: var(--lz-radius); }

.lz-prose blockquote {
	background: var(--lz-surface-sunken);
	border-radius: var(--lz-radius);
	padding: var(--lz-space-4) var(--lz-space-5);
	color: var(--lz-muted);
	font-style: italic;
}


/* ============================================================
   04. LAYOUT
   ============================================================ */

.lz-container {
	width: 100%;
	max-width: var(--lz-container);
	margin-inline: auto;
	padding-inline: var(--lz-gutter);
}

.lz-container--narrow { max-width: var(--lz-container-narrow); }

.lz-section { padding-block: var(--lz-section-y); }

/* Cabecera de sección: título a la izquierda, acción a la derecha. */
.lz-section__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--lz-space-6);
	margin-bottom: var(--lz-space-6);
}

.lz-section__title { margin-bottom: var(--lz-space-2); }

.lz-section__lede {
	color: var(--lz-muted);
	font-size: var(--lz-text-base);
	max-width: 66ch;
}

@media (max-width: 767px) {
	.lz-section__head {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--lz-space-3);
	}
}


/* ============================================================
   05. ENLACES
   ============================================================ */

a {
	color: var(--lz-link);
	text-decoration: none;
	transition: color var(--lz-duration) var(--lz-ease);
}

a:hover { color: var(--lz-link-hover); }
a:active { opacity: .8; }

/* Un titular enlazado es un titular: color de texto y verde solo al
   interactuar. Si todos los títulos de tarjeta van en verde compiten
   entre sí y con los enlaces reales. */
:is(h1, h2, h3, h4, h5, h6) a { color: var(--lz-heading); }
:is(h1, h2, h3, h4, h5, h6) a:hover { color: var(--lz-brand-text); text-decoration: underline; text-underline-offset: .15em; }
:is(.lz-hero, .lz-bono-hero, .lz-site-footer, .lz-404, .lz-zona-oscura) :is(h1, h2, h3, h4, h5, h6) a { color: inherit; }

/* Dentro de texto corrido el subrayado sí aporta: marca el enlace
   sin depender solo del color. */
.lz-prose a {
	text-decoration: underline;
	text-underline-offset: 0.15em;
	text-decoration-thickness: 1px;
	text-decoration-color: color-mix(in srgb, var(--lz-link) 55%, transparent);
}

.lz-prose a:hover { text-decoration-color: currentColor; text-decoration-thickness: 2px; }


/* ============================================================
   06. MEDIA
   ============================================================ */

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

svg { fill: currentColor; }

figure { margin: 0; }

figcaption {
	font-size: var(--lz-text-sm);
	color: var(--lz-muted);
	margin-top: var(--lz-space-2);
}


/* ============================================================
   07. FORMULARIOS
   ============================================================ */

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

.lz-field {
	width: 100%;
	background: var(--lz-surface);
	border: 1px solid var(--lz-line-strong);
	border-radius: var(--lz-radius);
	padding: var(--lz-space-3) var(--lz-space-4);
	min-height: 48px;
	color: var(--lz-ink);
	transition: border-color var(--lz-duration) var(--lz-ease),
	            box-shadow var(--lz-duration) var(--lz-ease);
}

.lz-field::placeholder { color: var(--lz-faint); }

.lz-field:hover { border-color: var(--lz-ink); }

.lz-field:focus,
.lz-field:focus-visible {
	outline: none;
	border-color: var(--lz-focus);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--lz-focus) 30%, transparent);
}

.lz-field[aria-invalid="true"] { border-color: var(--lz-danger); }
.lz-field[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--lz-danger) 25%, transparent); }

.lz-field:disabled {
	opacity: .55;
	cursor: not-allowed;
	background: var(--lz-surface-sunken);
}

.lz-field-hint  { font-size: var(--lz-text-sm); color: var(--lz-muted); }
.lz-field-error { font-size: var(--lz-text-sm); color: var(--lz-danger); font-weight: 600; }

/* iOS hace zoom automático si el input baja de 16px. */
@media (max-width: 767px) {
	.lz-field { font-size: 1rem; }
}


/* ============================================================
   08. BOTONES
   ============================================================ */

.lz-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--lz-space-2);
	font-family: var(--lz-font-display);
	font-size: var(--lz-text-sm);
	text-transform: uppercase;
	letter-spacing: var(--lz-tracking-wide);
	/* 48px asegura objetivo táctil cómodo en móvil. */
	min-height: 48px;
	padding-inline: var(--lz-space-6);
	border: 2px solid transparent;
	border-radius: var(--lz-radius);
	background: none;
	cursor: pointer;
	text-align: center;
	transition: background-color var(--lz-duration) var(--lz-ease),
	            border-color var(--lz-duration) var(--lz-ease),
	            color var(--lz-duration) var(--lz-ease),
	            transform var(--lz-duration) var(--lz-ease);
}

/* Estados comunes a todos los botones. */
.lz-btn:active { transform: translateY(1px); }
.lz-btn:focus-visible { outline: 3px solid var(--lz-focus); outline-offset: 2px; }

/* Acción principal (naranja): una por vista, reservada a la conversión.
   El nombre --gold se conserva porque lo usan las plantillas PHP. */
.lz-btn--gold {
	background: var(--lz-accent);
	border-color: var(--lz-accent);
	color: var(--lz-accent-ink);
}

.lz-btn--gold:hover {
	background: var(--lz-accent-hover);
	border-color: var(--lz-accent-hover);
	color: var(--lz-accent-ink);
	transform: translateY(-2px);
}

.lz-btn--gold:active {
	background: var(--lz-accent-active);
	border-color: var(--lz-accent-active);
	transform: translateY(0);
}

/* Secundario de marca (verde). --navy se conserva por las plantillas. */
.lz-btn--navy,
.lz-btn--brand {
	background: var(--lz-brand);
	border-color: var(--lz-brand);
	color: var(--lz-on-brand);
}

.lz-btn--navy:hover,
.lz-btn--brand:hover {
	background: var(--lz-brand-hover);
	border-color: var(--lz-brand-hover);
	color: var(--lz-on-brand);
	transform: translateY(-2px);
}

.lz-btn--outline {
	border-color: var(--lz-line-strong);
	color: var(--lz-heading);
	background: transparent;
}

.lz-btn--outline:hover {
	border-color: var(--lz-heading);
	background: var(--lz-surface-sunken);
	color: var(--lz-heading);
}

/* Fantasma: discreto. En claro, borde gris; dentro de una zona oscura
   (cabecera, hero, pie) toma el ivory. Antes era blanco fijo y sobre
   las tarjetas claras quedaba invisible (1,03:1). */
.lz-btn--ghost {
	border-color: var(--lz-line-strong);
	color: var(--lz-ink);
	background: transparent;
}

.lz-btn--ghost:hover {
	border-color: var(--lz-brand-text);
	color: var(--lz-brand-text);
}

:is(.lz-hero, .lz-bono-hero, .lz-header, .lz-topbar, .lz-site-footer, .lz-404, .lz-zona-oscura) .lz-btn--ghost {
	border-color: var(--lz-line-inverse);
	border-color: rgba(255, 251, 235, .45);
	color: var(--lz-ink-on-inverse);
}

:is(.lz-hero, .lz-bono-hero, .lz-header, .lz-topbar, .lz-site-footer, .lz-404, .lz-zona-oscura) .lz-btn--ghost:hover {
	border-color: var(--lz-accent);
	color: var(--lz-accent);
}

.lz-btn--sm {
	min-height: 40px;
	font-size: var(--lz-text-xs);
	padding-inline: var(--lz-space-4);
}

.lz-btn--block { width: 100%; }

.lz-btn[disabled],
.lz-btn[aria-disabled="true"] {
	opacity: .5;
	cursor: not-allowed;
	pointer-events: none;
	transform: none;
}

/* Botón ocupado (envío en curso): mantiene el tamaño, no se puede repetir. */
.lz-btn[aria-busy="true"] { cursor: progress; opacity: .75; pointer-events: none; }


/* ============================================================
   09. PRIMITIVAS
   ============================================================ */

.lz-card {
	background: var(--lz-surface);
	box-shadow: var(--lz-shadow-sm);
	border: 1px solid var(--lz-line);
	border-radius: var(--lz-radius-md);
	overflow: hidden;
}

.lz-card--raised { box-shadow: var(--lz-shadow); }

.lz-card__body { padding: var(--lz-space-5); }

/* Etiqueta de estado. */
.lz-tag {
	display: inline-flex;
	align-items: center;
	gap: var(--lz-space-1);
	border-radius: var(--lz-radius-sm);
	padding: var(--lz-space-1) var(--lz-space-2);
	font-size: var(--lz-text-xs);
	font-weight: 700;
	background: var(--lz-surface-sunken);
	color: var(--lz-muted);
}

.lz-tag--success { background: var(--lz-success-bg); color: var(--lz-success); }
.lz-tag--danger  { background: var(--lz-danger-bg);  color: var(--lz-danger); }
.lz-tag--warning { background: var(--lz-warning-bg); color: var(--lz-warning); }

/* Distintivo +18: obligatorio en toda página del sitio. */
.lz-age {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1.5px solid currentColor;
	border-radius: var(--lz-radius-sm);
	padding: 2px var(--lz-space-2);
	font-size: var(--lz-text-xs);
	font-weight: 700;
	color: var(--lz-danger);
	line-height: 1.4;
}

/* Píldora interactiva: filtros, búsquedas sugeridas. */
.lz-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--lz-space-2);
	border: 1px solid var(--lz-line);
	border-radius: var(--lz-radius-sm);
	padding: var(--lz-space-2) var(--lz-space-3);
	font-size: var(--lz-text-sm);
	color: var(--lz-ink);
	transition: border-color var(--lz-duration) var(--lz-ease),
	            color var(--lz-duration) var(--lz-ease);
}

.lz-chip:hover {
	border-color: var(--lz-brand-text);
	color: var(--lz-brand-text);
	background: var(--lz-brand-surface);
}

.lz-chip:active { transform: translateY(1px); }

.lz-chip[aria-current="page"],
.lz-chip[aria-pressed="true"],
.lz-chip.is-active {
	background: var(--lz-brand);
	border-color: var(--lz-brand);
	color: var(--lz-on-brand);
}

/* Icono en línea, alineado con el texto que acompaña. */
.lz-icon {
	display: inline-block;
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	vertical-align: -0.18em;
}

.lz-icon--sm { width: 14px; height: 14px; }
.lz-icon--lg { width: 24px; height: 24px; }
.lz-icon--xl { width: 32px; height: 32px; }


/* ============================================================
   09b. ESTADOS: carga, vacío, aviso, confirmación
   Toda vista que dependa de datos diseña los cuatro (DISENO.md §4).
   ============================================================ */

/* Esqueleto de carga: sustituye a spinners y a huecos vacíos.
   El contenedor lleva aria-busy="true" y el esqueleto aria-hidden. */
.lz-skeleton {
	display: block;
	border-radius: var(--lz-radius-sm);
	background-color: var(--lz-skeleton);
	background-image: linear-gradient(90deg, transparent 0, var(--lz-skeleton-shine) 50%, transparent 100%);
	background-size: 200% 100%;
	background-repeat: no-repeat;
	animation: lz-brillo 1.4s ease-in-out infinite;
}

.lz-skeleton--text   { height: .9em; margin-block: .35em; }
.lz-skeleton--title  { height: 1.4em; width: 60%; margin-bottom: var(--lz-space-3); }
.lz-skeleton--avatar { width: 40px; height: 40px; border-radius: var(--lz-radius); flex: none; }
.lz-skeleton--btn    { height: 48px; width: 140px; border-radius: var(--lz-radius); }
.lz-skeleton--card   { height: 180px; border-radius: var(--lz-radius-md); }

.lz-skeleton-row {
	display: flex;
	align-items: center;
	gap: var(--lz-space-3);
	padding: var(--lz-space-3) var(--lz-space-4);
}

.lz-skeleton-row > div { flex: 1; }

@keyframes lz-brillo {
	from { background-position: 150% 0; }
	to   { background-position: -50% 0; }
}

/* Estado vacío: por qué no hay datos y qué hacer. .lz-vacio es el
   nombre que ya usan archive/search/promociones: mismo aspecto. */
.lz-empty,
.lz-vacio {
	display: grid;
	justify-items: center;
	gap: var(--lz-space-2);
	text-align: center;
	padding: var(--lz-space-10) var(--lz-space-6);
	border: 1px dashed var(--lz-line-strong);
	border-radius: var(--lz-radius-md);
	background: var(--lz-surface);
}

.lz-empty__icono { width: 40px; height: 40px; color: var(--lz-muted); margin-bottom: var(--lz-space-2); }
.lz-empty__titulo { font-family: var(--lz-font-display); text-transform: uppercase; font-size: var(--lz-text-lg); color: var(--lz-heading); margin: 0; }
.lz-empty__texto { color: var(--lz-muted); max-width: 52ch; margin: 0; }
.lz-empty .lz-btn,
.lz-vacio .lz-btn { margin-top: var(--lz-space-3); }
.lz-vacio > .lz-icon { width: 40px; height: 40px; color: var(--lz-muted); }
.lz-vacio p { margin: 0; color: var(--lz-muted); max-width: 52ch; }
.lz-vacio p strong { color: var(--lz-heading); }

/* Aviso en línea: info · éxito · advertencia · error.
   role="status" para informar; role="alert" solo para errores. */
.lz-alert {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--lz-space-3);
	align-items: start;
	padding: var(--lz-space-4);
	border: 1px solid var(--lz-line);
	border-left-width: 4px;
	border-radius: var(--lz-radius);
	background: var(--lz-surface);
	color: var(--lz-ink);
	font-size: var(--lz-text-base);
	line-height: var(--lz-leading-snug);
}

.lz-alert > .lz-icon { margin-top: 2px; }
.lz-alert__titulo { display: block; font-weight: 700; margin-bottom: var(--lz-space-1); }
.lz-alert--info    { border-left-color: var(--lz-brand-text); }
.lz-alert--info    > .lz-icon { color: var(--lz-brand-text); }
.lz-alert--success { border-left-color: var(--lz-success); background: var(--lz-success-bg); }
.lz-alert--success > .lz-icon { color: var(--lz-success); }
.lz-alert--warning { border-left-color: var(--lz-accent); background: var(--lz-warning-bg); }
.lz-alert--warning > .lz-icon { color: var(--lz-warning); }
.lz-alert--error   { border-left-color: var(--lz-danger); background: var(--lz-danger-bg); }
.lz-alert--error   > .lz-icon { color: var(--lz-danger); }

/* Confirmación efímera de una acción completada. La región aria-live
   la pinta footer.php y la usa window.lzToast(). */
.lz-toasts {
	position: fixed;
	z-index: calc(var(--lz-z-modal) + 10);
	inset: auto var(--lz-space-4) calc(var(--lz-space-4) + env(safe-area-inset-bottom));
	display: grid;
	justify-items: center;
	gap: var(--lz-space-2);
	pointer-events: none;
}

@media (min-width: 768px) {
	.lz-toasts { inset: auto var(--lz-space-6) var(--lz-space-6) auto; justify-items: end; }
}

/* En móvil, por encima de la barra inferior fija. */
@media (max-width: 767px) {
	.has-barra-movil .lz-toasts { bottom: calc(80px + env(safe-area-inset-bottom)); }
}

.lz-toast {
	pointer-events: auto;
	display: flex;
	align-items: center;
	gap: var(--lz-space-2);
	max-width: 420px;
	padding: var(--lz-space-3) var(--lz-space-4);
	border-radius: var(--lz-radius);
	background: var(--lz-surface-inverse);
	color: var(--lz-bg);
	box-shadow: var(--lz-shadow-md);
	font-size: var(--lz-text-base);
	font-weight: 600;
	animation: lz-entrar var(--lz-duration) var(--lz-ease);
}

.lz-toast--error { background: var(--lz-danger); color: #FFFBEB; }

@keyframes lz-entrar {
	from { opacity: 0; transform: translateY(8px); }
}

/* Tablas con desplazamiento lateral: se puede enfocar y desplazar con
   teclado (el JS de page.js añade tabindex y nombre). */
.lz-tabla-scroll {
	overflow-x: auto;
	position: relative;
	border-radius: var(--lz-radius);
}

.lz-tabla-scroll:focus-visible { outline: 3px solid var(--lz-focus); outline-offset: 2px; }


/* ============================================================
   10. UTILIDADES
   ============================================================ */

.lz-stack { display: flex; flex-direction: column; }
.lz-row   { display: flex; flex-direction: row; align-items: center; }
.lz-wrap  { flex-wrap: wrap; }
.lz-grow  { flex-grow: 1; }

.lz-gap-1 { gap: var(--lz-space-1); }
.lz-gap-2 { gap: var(--lz-space-2); }
.lz-gap-3 { gap: var(--lz-space-3); }
.lz-gap-4 { gap: var(--lz-space-4); }
.lz-gap-6 { gap: var(--lz-space-6); }

.lz-between { justify-content: space-between; }
.lz-center  { justify-content: center; }

.lz-text-muted { color: var(--lz-muted); }
.lz-text-sm    { font-size: var(--lz-text-sm); }
.lz-text-xs    { font-size: var(--lz-text-xs); }


/* ============================================================
   11. ACCESIBILIDAD
   ============================================================ */

/* Solo para lectores de pantalla. */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Salta al contenido; visible únicamente al tabular. */
.skip-link {
	position: absolute;
	top: 0;
	left: var(--lz-space-4);
	z-index: var(--lz-z-modal);
	transform: translateY(-150%);
	background: var(--lz-brand);
	color: var(--lz-on-brand);
	font-weight: 700;
	padding: var(--lz-space-3) var(--lz-space-5);
	border-radius: 0 0 var(--lz-radius) var(--lz-radius);
	transition: transform var(--lz-duration) var(--lz-ease);
}

.skip-link:focus {
	transform: translateY(0);
	color: var(--lz-on-brand);
}

/* Foco visible y consistente en todo el sitio. */
:focus-visible {
	outline: 3px solid var(--lz-focus);
	outline-offset: 2px;
	border-radius: var(--lz-radius-sm);
}

/* En zonas oscuras el foco verde no se vería: se usa el verde claro. */
:is(.lz-hero, .lz-bono-hero, .lz-header, .lz-topbar, .lz-site-footer, .lz-mobile-panel, .lz-404, .lz-zona-oscura) {
	--lz-focus: #6FC2B9;
	--lz-link: #6FC2B9;
	--lz-link-hover: #FFFBEB;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.lz-skeleton { animation: none; background-image: none; }

	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}

	.lz-btn:hover { transform: none; }
}


/* ============================================================
   12. IMPRESIÓN
   ============================================================ */

@media print {
	body {
		background: #fff;
		color: #000;
	}

	.lz-site-header,
	.lz-site-footer,
	.skip-link,
	.lz-btn {
		display: none;
	}

	.lz-prose a::after {
		content: " (" attr(href) ")";
		font-size: var(--lz-text-xs);
		color: #555;
	}
}