/**
 * Components — botones, chips, cards, carrusel, acordeón, FAB, cabecera
 * flotante, etc. Se completa a partir del paso 2 del orden de trabajo (§13).
 */

/* =========================================================================
   Botones — reutilizados en todas las secciones de home/categoría
   ========================================================================= */

.lgzm-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: 'Geist', sans-serif;
	font-weight: 600;
	font-size: 15px;
	line-height: 15px;
	padding: 17px 30px;
	border-radius: var(--lgzm-radius-pill);
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	border: 0;
	transition: background-color var(--lgzm-dur-fast) var(--lgzm-ease-out), border-color var(--lgzm-dur-fast) var(--lgzm-ease-out), color var(--lgzm-dur-fast) var(--lgzm-ease-out), transform var(--lgzm-dur-press) var(--lgzm-ease-out), box-shadow var(--lgzm-dur-fast) var(--lgzm-ease-out);
}
/* El levantamiento va detrás de (hover: hover): en táctil el navegador
   deja el :hover pegado tras cada toque y el botón se quedaría flotando
   hasta que se toque en otro sitio. */
@media (hover: hover) and (pointer: fine) {
	.lgzm-btn:hover {
		transform: translateY(-2px);
	}
}
.lgzm-btn:active {
	transform: scale(0.97);
}

.lgzm-btn--primary {
	background: var(--lgzm-accent);
	color: var(--lgzm-on-ink);
}
.lgzm-btn--primary:hover {
	background: var(--lgzm-accent-hover);
	box-shadow: 0 8px 20px 0 rgba(47, 75, 255, 0.32);
}

.lgzm-btn--outline-on-ink {
	background: transparent;
	color: var(--lgzm-on-ink);
	border: 1.5px solid rgba(255, 255, 255, 0.5);
	padding: 15.5px 30px;
}
.lgzm-btn--outline-on-ink:hover {
	border-color: var(--lgzm-on-ink);
	background: rgba(255, 255, 255, 0.1);
}

.lgzm-btn--outline {
	background: transparent;
	color: var(--lgzm-ink);
	border: 1.5px solid var(--lgzm-ink-hairline);
	padding: 15.5px 30px;
}
.lgzm-btn--outline:hover {
	background: var(--lgzm-ink-wash);
	border-color: var(--lgzm-accent);
}

/* Verde de marca de WhatsApp: es el color por el que se reconoce el canal,
   y aquí va sobre azul, donde un botón blanco competiría con la tarjeta del
   formulario. El token ya existe en tokens.css. */
.lgzm-btn--whatsapp {
	gap: 10px;
	background: var(--lgzm-whatsapp);
	color: #0b3d1f;
}
.lgzm-btn--whatsapp:hover {
	background: #1fbb59;
}

@media (prefers-reduced-motion: reduce) {
	.lgzm-btn:hover,
	.lgzm-btn:active {
		transform: none;
	}
}

/* =========================================================================
   Lightbox de galería (§7.5) — template-parts/global/lightbox.php + lightbox.js
   ========================================================================= */

.lgzm-lightbox-trigger {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	border-radius: var(--lgzm-radius-24);
	/* La miniatura no tiene ninguna afordancia de "esto se puede abrir":
	   overflow oculto + escala de la imagen de dentro es la pista mínima.
	   Va en el contenedor, no en la imagen, para que el radio recorte. */
	overflow: hidden;
}
.lgzm-lightbox-trigger img {
	transition: transform var(--lgzm-dur-ui) var(--lgzm-ease-out);
}
@media (hover: hover) and (pointer: fine) {
	.lgzm-lightbox-trigger:hover img {
		transform: scale(1.04);
	}
}
@media (prefers-reduced-motion: reduce) {
	.lgzm-lightbox-trigger img {
		transition: none;
	}
	.lgzm-lightbox-trigger:hover img {
		transform: none;
	}
}

.lgzm-lightbox {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity var(--lgzm-dur-exit) var(--lgzm-ease-out);
}
.lgzm-lightbox[hidden] {
	display: none;
}
.lgzm-lightbox.is-open {
	opacity: 1;
	transition-duration: var(--lgzm-dur-surface);
}
.lgzm-lightbox__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(3, 6, 61, 0.85);
}
.lgzm-lightbox__dialog {
	position: relative;
	z-index: 1;
	max-width: min(90vw, 900px);
	max-height: 90vh;
	/* Un modal no está anclado a ningún disparador: escala desde su
	   propio centro (transform-origin por defecto), no desde la miniatura
	   que se ha pulsado. Nunca desde scale(0): nada aparece de la nada. */
	transform: scale(0.96);
	transition: transform var(--lgzm-dur-exit) var(--lgzm-ease-out);
}
.lgzm-lightbox.is-open .lgzm-lightbox__dialog {
	transform: scale(1);
	transition-duration: var(--lgzm-dur-surface);
}
.lgzm-lightbox__figure {
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}
.lgzm-lightbox__img {
	max-width: min(90vw, 900px);
	max-height: 80vh;
	width: auto;
	height: auto;
	border-radius: var(--lgzm-radius-16);
}
.lgzm-lightbox__caption {
	color: var(--lgzm-on-ink);
}
.lgzm-lightbox__close,
.lgzm-lightbox__arrow {
	position: fixed;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--lgzm-radius-pill);
	background: rgba(255, 255, 255, 0.12);
	color: var(--lgzm-on-ink);
	border: 0;
	cursor: pointer;
	transition: background-color var(--lgzm-dur-fast) var(--lgzm-ease-out), transform var(--lgzm-dur-press) var(--lgzm-ease-out);
}
.lgzm-lightbox__close:hover,
.lgzm-lightbox__arrow:hover {
	background: rgba(255, 255, 255, 0.22);
}
.lgzm-lightbox__close:active {
	transform: scale(0.94);
}
/* Las flechas ya llevan translateY(-50%) para centrarse verticalmente
   (ver .lgzm-lightbox__arrow--prev/--next más abajo): hay que repetirlo
   aquí o la pulsación las mandaría al borde superior. */
.lgzm-lightbox__arrow:active {
	transform: translateY(-50%) scale(0.94);
}
.lgzm-lightbox__close {
	top: 20px;
	right: 20px;
}
.lgzm-lightbox__arrow--prev {
	left: 20px;
	top: 50%;
	transform: translateY(-50%);
}
.lgzm-lightbox__arrow--next {
	right: 20px;
	top: 50%;
	transform: translateY(-50%);
}

/* =========================================================================
   Carrusel base (§6) — template-parts/global/carousel.php + carousel.js
   ========================================================================= */

.lgzm-carousel {
	position: relative;
}

.lgzm-carousel__track {
	display: flex;
	gap: 12px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	/* AQUÍ NO VA `touch-action: pan-x`. Lo estuvo hasta el 2026-09-18 y es la
	   causa de un bug muy feo en móvil: no significa "prioriza el gesto
	   horizontal", significa "en este elemento SOLO se ejecuta el gesto
	   horizontal". Un deslizamiento vertical que EMPIECE sobre una card no
	   scrollea la página: se queda muerto. La usuaria lo describió como que
	   la web "se bloquea y no puedo subir ni bajar" al pararse en la sección
	   de Grupos — y ahí es donde más canta, porque ese track mide 854px de
	   alto en un viewport de 812: ocupa la pantalla entera, así que el dedo
	   cae dentro sí o sí y no queda ningún borde por el que scrollear.

	   No hace falta poner nada en su lugar: con `overflow-x: auto` el
	   navegador ya resuelve el arrastre horizontal por su cuenta y deja pasar
	   el vertical a la página. De propina, `pan-x` también bloqueaba el
	   pellizco para ampliar sobre las fotos, que es un problema de
	   accesibilidad (WCAG 1.4.4). */
	padding-inline: var(--lgzm-margin-mobile);
	/* Sin esto, scroll-snap calcula la posición de "inicio" del primer item
	   ignorando el padding del propio contenedor (bug/comportamiento real
	   de Chrome): al cargar, el navegador auto-corrige scrollLeft de 0 a
	   20px para "snapear" la card 0, comiéndose el margen visual y dejando
	   la imagen pegada al borde del viewport. scroll-padding-inline le dice
	   al algoritmo de snap que reserve ese margen, así el reposo real
	   queda en scrollLeft: 0 con el padding intacto. */
	scroll-padding-inline: var(--lgzm-margin-mobile);
}
.lgzm-carousel__track::-webkit-scrollbar {
	display: none;
}
.lgzm-carousel__item {
	flex: 0 0 auto;
	scroll-snap-align: start;
}

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

@media (min-width: 1024px) {
	/* max() en vez de un valor fijo: por debajo de ~1440px de viewport se
	   comporta igual que antes (120px, deja "asomar" la siguiente card),
	   pero a partir de ahí crece para mantener el contenido centrado a
	   --lgzm-container (1200px) — igual que .lgzm-container — en vez de
	   estirarse sin límite en monitores anchos (bug real: en 1920px las
	   cards de RTBs pasaban de 400px de ancho cada una). */
	.lgzm-carousel__track {
		gap: 16px;
		padding-inline: max(var(--lgzm-gutter-desktop), calc((100% - var(--lgzm-container)) / 2));
		scroll-padding-inline: max(var(--lgzm-gutter-desktop), calc((100% - var(--lgzm-container)) / 2));
	}
}

/* ---------- Controles: puntos + flechas ---------- */

.lgzm-carousel__controls {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: 16px;
	padding-inline: var(--lgzm-margin-mobile);
}
.lgzm-carousel__controls[hidden] {
	display: none;
}

@media (min-width: 1024px) {
	.lgzm-carousel__controls {
		padding-inline: var(--lgzm-gutter-desktop);
	}
}

.lgzm-carousel__dots {
	display: flex;
	align-items: center;
	gap: 6px;
}

/* Puntos: círculo inactivo, píldora activa (--lgzm-radius-pill, ver tokens.css). */
.lgzm-carousel__dot {
	width: 6px;
	height: 6px;
	padding: 0;
	border: 0;
	border-radius: var(--lgzm-radius-pill);
	background: var(--lgzm-ink-hairline);
	cursor: pointer;
	transition: width 200ms ease, background-color 200ms ease;
	position: relative;
}
/* El punto mide 6px porque así es el diseño, pero 6px es menos de una
   cuarta parte del mínimo táctil de la WCAG (24px) y son el control
   principal del carrusel en móvil. El ::after amplía solo el área
   sensible: visualmente no cambia nada. */
.lgzm-carousel__dot::after {
	content: '';
	position: absolute;
	inset: -14px;
}
.lgzm-carousel__dot.is-active {
	width: 20px;
	background: var(--lgzm-accent);
}

.lgzm-carousel__arrows {
	display: flex;
	gap: 8px;
	margin-inline-start: auto;
}
.lgzm-carousel__arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid var(--lgzm-ink-hairline);
	border-radius: var(--lgzm-radius-pill);
	background: var(--lgzm-paper);
	color: var(--lgzm-ink);
	cursor: pointer;
	transition: background-color var(--lgzm-dur-fast) var(--lgzm-ease-out), border-color var(--lgzm-dur-fast) var(--lgzm-ease-out), transform var(--lgzm-dur-press) var(--lgzm-ease-out);
}
.lgzm-carousel__arrow:hover {
	background: var(--lgzm-ink-wash);
	border-color: var(--lgzm-ink-secondary);
}
.lgzm-carousel__arrow:disabled {
	opacity: 0.35;
	cursor: default;
}
.lgzm-carousel__arrow:disabled:hover {
	background: var(--lgzm-paper);
}
.lgzm-carousel__arrow:active {
	transform: scale(0.94);
}
.lgzm-carousel__arrow svg {
	width: 18px;
	height: 18px;
}

/* ---------- Variantes de ancho de card (tabla §6) ---------- */

/* Más ancha que antes (216px) porque el texto ahora va en una fila junto al
   icono, no en bloque debajo de un punto. */
.lgzm-carousel--rtbs .lgzm-carousel__item {
	width: 250px;
}
/* Más ancha desde que la card lleva foto (2026-09-01): con 290px la imagen
   de 4:3 quedaba en una tira demasiado baja para leerse.
   min(320px, 100%) y no 320px a secas: el track resta su propio padding-
   inline (var(--lgzm-margin-mobile)) antes de repartir espacio entre las
   cards, así que en un móvil de 320px de ancho (Mobile S) solo quedan
   ~280px reales — 320px fijos se salían por el borde derecho (bug real
   reportado por el cliente, 2026-09-02). El 100% de un hijo flex ya
   equivale a ese ancho disponible, así que min() se queda con el que
   menos mida en cada caso: 320px en un móvil normal, el hueco real en uno
   más estrecho. */
.lgzm-carousel--resenas .lgzm-carousel__item {
	width: min(320px, 100%);
}
.lgzm-carousel--otras .lgzm-carousel__item {
	width: 196px;
}
/* Grupos ya no es carrusel en ningún tamaño (petición del cliente,
   2026-09-01): las celdas las dimensiona la retícula, no un ancho fijo. */
.lgzm-carousel--grupos .lgzm-carousel__item {
	width: auto;
}
/* Premios TikTok: carrusel de verdad en móvil (petición del cliente,
   2026-09-02). min(280px, 100%) por el mismo motivo que Reseñas más
   arriba: a 100% ya cuenta el padding-inline del track, así que en
   Mobile S (320px) no se sale por el borde. El comportamiento en
   escritorio (deja de ser carrusel) vive en sections.css, no aquí — ver
   el comentario en ese bloque. */
.lgzm-carousel--tiktok-niveles .lgzm-carousel__item {
	width: min(280px, 100%);
}
/* Mosaico de fotos del formulario: carrusel en móvil (petición del
   cliente, 2026-09-02). Cards más estrechas que las demás variantes: son
   solo fotos 4:5, sin texto que necesite más aire. */
.lgzm-carousel--formulario-mosaico .lgzm-carousel__item {
	width: min(220px, 100%);
}

/* Legazyum Brand: carrusel de sneak-peek (petición del cliente 2026-09-08).
   Carrusel de verdad, no retícula como Diseños: aquí lo que se pide es
   asomar producto, no enseñarlo todo. min(240px, 100%) por el mismo motivo
   que Reseñas y el mosaico del formulario: el track ya ha restado su
   padding-inline, así que en Mobile S (320px) no se sale por el borde. */
.lgzm-carousel--productos .lgzm-carousel__item {
	width: min(240px, 100%);
}

@media (min-width: 1024px) {
	.lgzm-carousel--resenas .lgzm-carousel__item {
		width: 380px;
	}
	.lgzm-carousel--otras .lgzm-carousel__item {
		width: 288px;
	}
	.lgzm-carousel--productos .lgzm-carousel__item {
		width: 300px;
	}
	/* Solo Reseñas (petición del cliente, 2026-09-10; bug real confirmado
	   en monitores de 1920px+, preexistente, no de esta tanda): el track
	   base usa max(gutter-desktop, calc((100% - container) / 2)) para su
	   padding-inline, y esa fórmula CRECE sin límite pasados ~1440px de
	   viewport — a 1920px da 360px de hueco muerto a cada lado, con las
	   cards encajonadas en el centro. Se corrige aquí, solo para esta
	   variante, para no arriesgar nada en RTBs/Otras/Productos, que no se
	   han tocado: mismo valor con un tope (min()) en gutter-desktop, así
	   nunca crece más allá de 120px por lado y las cards usan el ancho real
	   de la pantalla en vez de quedarse en una franja estrecha. */
	.lgzm-carousel--resenas .lgzm-carousel__track {
		padding-inline: min(var(--lgzm-gutter-desktop), calc(var(--lgzm-margin-mobile) + max(0px, (100% - var(--lgzm-container)) / 2)));
		scroll-padding-inline: min(var(--lgzm-gutter-desktop), calc(var(--lgzm-margin-mobile) + max(0px, (100% - var(--lgzm-container)) / 2)));
	}
	.lgzm-carousel--resenas .lgzm-carousel__controls {
		padding-inline: min(var(--lgzm-gutter-desktop), calc(var(--lgzm-margin-mobile) + max(0px, (100% - var(--lgzm-container)) / 2)));
	}
}

/* ---------- Diseños reales: retícula fija en todos los tamaños, sin
   scroll (Figma lo maqueta como carrusel, pero el cliente pide verlos
   todos a la vez — no solo en desktop como RTBs/Grupos, sino desde
   móvil). Reutiliza el mismo carrusel base: carousel.js detecta que el
   track ya no desborda y oculta los controles solo, sin JS propio. */
.lgzm-carousel--disenos .lgzm-carousel__track {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	overflow: visible;
	scroll-snap-type: none;
}
.lgzm-carousel--disenos .lgzm-carousel__item {
	width: auto;
}
@media (min-width: 640px) {
	.lgzm-carousel--disenos .lgzm-carousel__track {
		grid-template-columns: repeat(3, 1fr);
	}
}
@media (min-width: 1024px) {
	.lgzm-carousel--disenos .lgzm-carousel__track {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* ---------- RTBs en desktop: 4 fijas sin scroll, ancho fluido ----------
   Deja de ser un carrusel: retícula de 4 columnas iguales, sin overflow.
   carousel.js detecta que no hay desbordamiento y oculta los controles solo.
   900 y no 1024: las cuatro tarjetas de 216px caben sin desbordar a
   partir de ~940px, así que el JS oculta los controles y quedaban
   alineadas a la izquierda con un hueco muerto a la derecha. A partir de
   900 pasan a ser retícula de 4 columnas fluidas y el hueco desaparece. */
/* auto-fit y no un número fijo de columnas: la sección puede tener 4, 5 o 6
   RTBs según lo que el cliente rellene, y el CSS no sabe cuántos son. Con
   minmax(160px, 1fr) caben las seis a partir de ~1100px y bajan solas a tres
   filas de dos en tablet, sin un media query por cada combinación. */
@media (min-width: 900px) {
	.lgzm-carousel--rtbs .lgzm-carousel__track {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
		overflow: visible;
		scroll-snap-type: none;
	}
	.lgzm-carousel--rtbs .lgzm-carousel__item {
		width: auto;
	}
}
@media (min-width: 900px) and (max-width: 1023.98px) {
	.lgzm-carousel--rtbs .lgzm-carousel__track {
		gap: 16px;
		padding-inline: clamp(20px, 5vw, 56px);
	}
}

/* ---------- Grupos: retícula en todos los tamaños ----------
   Mismo tratamiento que "Diseños reales" (más arriba en este fichero): el
   track deja de ser una fila con scroll y pasa a ser un grid. */
.lgzm-carousel--grupos .lgzm-carousel__track {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	overflow: visible;
	scroll-snap-type: none;
}
@media (min-width: 640px) {
	.lgzm-carousel--grupos .lgzm-carousel__track {
		grid-template-columns: repeat(3, 1fr);
	}
}
@media (min-width: 1024px) {
	.lgzm-carousel--grupos .lgzm-carousel__track {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* =========================================================================
   Marquee superior — template-parts/global/marquee.php
   ========================================================================= */

.lgzm-marquee {
	position: relative;
	z-index: 52; /* por encima de la barra flotante (51): es "lo de más arriba" */
	overflow: hidden;
	background: var(--lgzm-ink);
	color: var(--lgzm-on-ink);
	height: var(--lgzm-marquee-h);
}
.lgzm-marquee__viewport {
	display: flex;
	width: max-content;
	height: 100%;
	animation: lgzm-marquee-scroll 32s linear infinite;
}
.lgzm-marquee__track {
	display: flex;
	align-items: center;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	height: 100%;
}
.lgzm-marquee__item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding-inline: 20px;
	white-space: nowrap;
	color: rgba(255, 255, 255, 0.88);
}
/* Separador entre mensajes: un punto, no un borde — un borde de 1px sobre
   fondo oscuro en movimiento parpadea (aliasing subpíxel). */
.lgzm-marquee__item::after {
	content: '';
	width: 3px;
	height: 3px;
	margin-left: 20px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.35);
}
.lgzm-marquee__icon {
	display: flex;
	color: var(--lgzm-accent-on-ink);
}

/* -50% y no -100%: el viewport contiene DOS copias idénticas de la tanda,
   así que al desplazar la mitad exacta la segunda copia queda donde estaba
   la primera y el reinicio del bucle no se ve. */
@keyframes lgzm-marquee-scroll {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-50%, 0, 0); }
}

@media (min-width: 1024px) {
	.lgzm-marquee__viewport {
		/* Misma velocidad lineal aparente: el doble de recorrido visible
		   necesita más tiempo para no leerse como una carrera. */
		animation-duration: 44s;
	}
	.lgzm-marquee__item {
		padding-inline: 28px;
	}
	.lgzm-marquee__item::after {
		margin-left: 28px;
	}
	:root {
		--lgzm-marquee-h: 40px;
	}
}

/* Sin movimiento: una sola tanda, centrada. La segunda copia ya va
   aria-hidden, así que ocultarla no quita información a nadie. */
@media (prefers-reduced-motion: reduce) {
	.lgzm-marquee__viewport {
		animation: none;
		width: 100%;
		justify-content: center;
	}
	.lgzm-marquee__track[aria-hidden="true"] {
		display: none;
	}
	.lgzm-marquee__track {
		flex-wrap: wrap;
		justify-content: center;
	}
}

/* =========================================================================
   Cabecera flotante (§7.1) — template-parts/global/header-bar.php + header.js
   ========================================================================= */

.lgzm-header-bar {
	position: fixed;
	left: 0;
	right: 0;
	top: calc(var(--lgzm-marquee-offset, 0px) + 16px);
	z-index: 51;
	/* Rejilla de 3 columnas, no flex: las dos laterales miden lo mismo
	   (minmax(0,1fr)) y por eso la del medio cae siempre en el eje exacto de
	   la barra. Con el space-between de antes, el logo centrado se
	   descolocaba al cambiar el ancho de cualquier enlace o del CTA. El
	   minmax(0,·) y no 1fr a secas: sin él, un elemento largo en una columna
	   la ensancha por encima de su parte y descentra el logo. */
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	gap: 16px;
	width: calc(100% - 2 * var(--lgzm-margin-mobile));
	max-width: var(--lgzm-container);
	margin-inline: auto;
	padding: 15px 20px;
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid var(--lgzm-ink-hairline);
	border-radius: var(--lgzm-radius-8);
	box-shadow: 0 6px 20px 0 rgba(3, 6, 61, 0.1);
}

/* Auto-oculta al dejar de scrollear (header.js añade/quita esta clase);
   solo en dispositivos con puntero real, nunca si el panel móvil está
   abierto ni si el foco/hover está sobre la propia barra (header.js ya
   se encarga de no ocultarla en esos casos). */
.lgzm-header-bar.is-hidden {
	transform: translateY(calc(-100% - 32px));
}

@media (prefers-reduced-motion: reduce) {
	.lgzm-header-bar {
		transition: none;
	}
}

@media (min-width: 1024px) {
	.lgzm-header-bar {
		top: calc(var(--lgzm-marquee-offset, 0px) + 20px);
		padding: 10px 16px;
		box-shadow: 0 8px 24px 0 rgba(3, 6, 61, 0.1);
	}
}

/* ---------- Sobre el hero: barra translúcida (header.js añade la clase) ----------
   El fondo NO es transparent sino la tinta de marca al 28%: sobre una foto
   que el cliente puede cambiar cuando quiera, el blanco puro del texto
   necesita una lámina que garantice el contraste. Visualmente sigue
   leyéndose como "transparente" porque la foto se ve a través. */
.lgzm-header-bar.is-over-hero {
	background: rgba(3, 6, 61, 0.28);
	border-color: rgba(255, 255, 255, 0.22);
	box-shadow: none;
	color: var(--lgzm-on-ink);
	transition: transform var(--lgzm-dur-ui) var(--lgzm-ease-out), background-color var(--lgzm-dur-surface) var(--lgzm-ease-out), border-color var(--lgzm-dur-surface) var(--lgzm-ease-out), box-shadow var(--lgzm-dur-surface) var(--lgzm-ease-out);
}
/* La transición también en el estado normal, si no el camino de vuelta
   (transparente → blanco) sería instantáneo y el de ida gradual. */
.lgzm-header-bar {
	transition: transform var(--lgzm-dur-ui) var(--lgzm-ease-out), background-color var(--lgzm-dur-surface) var(--lgzm-ease-out), border-color var(--lgzm-dur-surface) var(--lgzm-ease-out), box-shadow var(--lgzm-dur-surface) var(--lgzm-ease-out);
}

/* El logo es un SVG monocromo servido como <img>: no se le puede cambiar el
   fill desde fuera, pero brightness(0) lo aplana a negro puro e invert(1) lo
   pasa a blanco puro. Es el único camino sin duplicar el fichero. */
.lgzm-header-bar.is-over-hero .lgzm-header-bar__logo img {
	filter: brightness(0) invert(1);
}

.lgzm-header-bar.is-over-hero .lgzm-nav-list a {
	color: var(--lgzm-on-ink);
}
.lgzm-header-bar.is-over-hero .lgzm-nav-list a:hover {
	color: var(--lgzm-accent-on-ink);
}
.lgzm-header-bar.is-over-hero .lgzm-lang-switcher__item {
	color: rgba(255, 255, 255, 0.6);
}
.lgzm-header-bar.is-over-hero .lgzm-lang-switcher__item.is-current {
	color: var(--lgzm-on-ink);
}
.lgzm-header-bar.is-over-hero .lgzm-lang-switcher__sep {
	color: rgba(255, 255, 255, 0.35);
}
.lgzm-header-bar.is-over-hero .lgzm-header-bar__toggle span {
	background: var(--lgzm-on-ink);
}

/* Con movimiento reducido el cambio sigue ocurriendo (es información de
   contraste, no decoración), pero sin transición. */
@media (prefers-reduced-motion: reduce) {
	.lgzm-header-bar,
	.lgzm-header-bar.is-over-hero {
		transition: none;
	}
}

/* La barra ya no reserva espacio en el flujo (position: fixed): las vistas
   sin hero a sangre necesitan este hueco arriba para que la barra flotante
   no tape el primer contenido.
   Desde el plan 202 la condición NO es "no es la home ni una categoría",
   sino la clase .lgzm-con-hero que pone legazyum_body_class(): con páginas
   internas, unas llevan hero y otras no, y la lista de exclusiones habría
   que ampliarla cada vez.

   112px fijos, SIN sumar --lgzm-marquee-h (corregido 2026-09-10; el plan
   202 sí lo sumaba y era un bug real). El marquee (header.php) es un
   hermano de #main en flujo normal, no está fixed/sticky — ya empuja
   #main hacia abajo por su propia altura por el simple hecho de ir antes
   en el documento. Sumar --lgzm-marquee-h aquí lo contaba una segunda vez:
   con el marquee activo, la cabecera flotante (que SÍ es fixed y por eso
   sí necesita conocer --lgzm-marquee-offset para su propio top) quedaba
   despejada de sobra y el hueco visible antes del primer contenido casi se
   doblaba — medido en /premios-tiktok/: 109px entre la barra y la sección
   azul, cuando el mismo cálculo sin el doble conteo da 27px, el mismo aire
   que ya había sin marquee. El caso sin marquee (--lgzm-marquee-h: 0) no
   cambia con esta corrección, por eso el número no se movió: dejó de
   sumarse un término que en ese caso ya valía 0. */
body:not(.lgzm-con-hero) #main {
	padding-top: 112px;
}

.lgzm-header-bar__logo {
	display: block;
	flex-shrink: 0;
	line-height: 0;
}
/* filter: none explícito (2026-09-03, bug real): critical.css pinta el
   logo en blanco sin condición desde el primer fotograma (evita el
   destello antes de que header.js decida si estamos sobre el hero), pero
   nada volvía a poner el filtro a "ninguno" para el resto del sitio —
   misma especificidad que la regla de critical.css (2 clases), así que
   sin esto seguía ganando ella para siempre en cuanto header.js quitaba
   .is-over-hero: el logo se quedaba blanco en TODAS las secciones tras
   pasar el hero, no solo mientras está encima (bug reportado por el
   cliente, confirmado con getComputedStyle en vez de a ojo). */
.lgzm-header-bar__logo img {
	display: block;
	width: 93px;
	height: auto;
	filter: none;
}
@media (min-width: 1024px) {
	.lgzm-header-bar__logo img {
		width: 110px;
	}
}

/* ---------- Reparto por columnas (logo centrado, petición del cliente 2026-09-07) ----------
   Tres columnas, ni una más: minmax(0,1fr) auto minmax(0,1fr). Las dos
   laterales miden EXACTAMENTE lo mismo porque las dos son 1fr, y por eso la
   del medio cae en el eje real de la barra.

   De ahí que todo lo que va a la derecha del logo —los enlaces de la derecha
   y las acciones— viva dentro de una sola caja (.lgzm-header-bar__fin) y no
   como dos hijos sueltos de la rejilla. Con una columna para cada uno el
   logo se descentra: lo que hay detrás del logo pesa más que lo que hay
   delante y nada lo compensa. No es teórico, se midió (2026-09-09).

   En móvil la columna 3 se queda vacía a propósito (decisión tomada: el CTA
   ya lo lleva el FAB flotante) y solo existe para que la 1 y la 3 midan
   igual. */
/* grid-row: 1 en todos los ítems colocados, y NO es redundante: el logo va
   antes que la navegación en el marcado (para que el orden de tabulación en
   móvil sea correcto), así que pide la columna 2 antes que la 1. La
   autocolocación dispersa de Grid nunca retrocede: al encontrar una columna
   anterior al cursor baja de fila, y la barra se partía en dos —medido el
   2026-09-09, grid-template-rows daba "25.98px 43px" y la barra 107px de
   alto—. Fijando la fila, el orden del DOM deja de importar.
   El padding horizontal también se igualó ese día: era 24px a la izquierda
   y 12px a la derecha, herencia de cuando el logo iba pegado al borde, y
   desplazaba 6px el área de contenido y con ella la columna central. La
   rejilla centraba perfectamente dentro de un área que no lo estaba. */
.lgzm-header-bar__toggle {
	grid-column: 1;
	grid-row: 1;
	justify-self: start;
}
.lgzm-header-bar__logo {
	grid-column: 2;
	grid-row: 1;
	justify-self: center;
}
/* El <nav> no ocupa celda: se disuelve para que sus dos hijos (la lista de
   la izquierda y la caja de la derecha) sean hijos directos de la rejilla y
   caigan uno a cada lado del logo. Un solo landmark de navegación en el
   DOM, dos cajas en el layout. */
.lgzm-header-bar__nav {
	display: none;
}

@media (min-width: 1024px) {
	.lgzm-header-bar__nav {
		display: contents;
	}
	.lgzm-nav-list--inicio {
		grid-column: 1;
		grid-row: 1;
		justify-self: start;
	}
	/* 28px, el mismo gap que .lgzm-nav-list entre sus enlaces: así el último
	   enlace y el CTA se leen como una sola fila continua y no como dos
	   grupos pegados. */
	.lgzm-header-bar__fin {
		grid-column: 3;
		grid-row: 1;
		justify-self: end;
		display: flex;
		align-items: center;
		gap: 28px;
	}
}

.lgzm-nav-list {
	display: flex;
	align-items: center;
	gap: 28px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.lgzm-nav-list a {
	font-family: 'Geist', sans-serif;
	font-weight: 500;
	font-size: 15px;
	line-height: 15px;
	color: var(--lgzm-ink);
	text-decoration: none;
	white-space: nowrap;
	transition: color var(--lgzm-dur-fast) var(--lgzm-ease-out);
}
/* Solo color: son cinco enlaces que se escanean varias veces por visita,
   y moverlos los haría sentir lentos. */
.lgzm-nav-list a:hover {
	color: var(--lgzm-accent);
}

.lgzm-header-bar__actions {
	display: none;
	align-items: center;
	gap: 16px;
}
@media (min-width: 1024px) {
	.lgzm-header-bar__actions {
		display: flex;
	}
}
.lgzm-lang-switcher,
.lgzm-lang-switcher--static {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: 'Geist', sans-serif;
	font-weight: 400;
	font-size: 12px;
	line-height: 18px;
	color: var(--lgzm-ink-secondary);
}
.lgzm-lang-switcher__item {
	color: inherit;
	text-decoration: none;
	transition: color var(--lgzm-dur-fast) var(--lgzm-ease-out);
}
.lgzm-lang-switcher__item.is-current {
	color: var(--lgzm-ink);
	font-weight: 500;
}
.lgzm-lang-switcher__item:not(.is-current):hover {
	text-decoration: underline;
	color: var(--lgzm-ink);
}
.lgzm-lang-switcher__sep {
	color: var(--lgzm-ink-hairline);
}

.lgzm-header-bar__cta {
	display: inline-flex;
	align-items: center;
	background: var(--lgzm-accent);
	color: var(--lgzm-on-ink);
	font-family: 'Geist', sans-serif;
	font-weight: 600;
	font-size: 15px;
	line-height: 15px;
	padding: 14px 22px;
	border-radius: var(--lgzm-radius-pill);
	text-decoration: none;
	white-space: nowrap;
	transition: background-color var(--lgzm-dur-fast) var(--lgzm-ease-out), transform var(--lgzm-dur-press) var(--lgzm-ease-out);
}
.lgzm-header-bar__cta:hover {
	background: var(--lgzm-accent-hover);
}
.lgzm-header-bar__cta:active {
	transform: scale(0.97);
}

.lgzm-header-bar__toggle {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: center;
	gap: 5px;
	padding: 12px;
	background: none;
	border: 0;
	cursor: pointer;
	flex-shrink: 0;
	transition: transform var(--lgzm-dur-press) var(--lgzm-ease-out);
}
@media (min-width: 1024px) {
	.lgzm-header-bar__toggle {
		display: none;
	}
}
.lgzm-header-bar__toggle span {
	display: block;
	width: 20px;
	height: 2px;
	border-radius: 1px;
	background: var(--lgzm-ink);
}
.lgzm-header-bar__toggle span:last-child {
	width: 13px;
}
.lgzm-header-bar__toggle:active {
	transform: scale(0.92);
}

/* ---------- Panel móvil a pantalla completa ---------- */

/* El panel exterior ya no es el menú: es la lámina que oscurece la web
   (petición del cliente, 2026-09-11). El menú en sí es __sheet, aquí
   debajo. Sigue siendo position:fixed e inset:0 porque es quien tapa la
   página entera: de ahí cuelgan el foco atrapado de header.js y el clic
   fuera para cerrar.

   La transición de opacidad se queda EN EL PANEL a propósito, aunque lo
   que se mueve sea el cajón: conceal() de header.js espera un
   transitionend cuyo target sea el propio panel. Si el panel dejara de
   tener transición, ese evento no llegaría nunca y el cierre dependería
   solo del setTimeout de emergencia de 400ms. */
.lgzm-mobile-panel {
	position: fixed;
	inset: 0;
	z-index: 60;
	background: rgba(3, 6, 61, 0.55);
	opacity: 0;
	transition: opacity var(--lgzm-dur-exit) var(--lgzm-ease-out);
}
.lgzm-mobile-panel[hidden] {
	display: none;
}
.lgzm-mobile-panel.is-open {
	opacity: 1;
	transition-duration: var(--lgzm-dur-surface);
}

/* El cajón. 56px de hueco a la derecha: suficiente para que se lea "hay
   web detrás" y para que el pulgar tenga dónde tocar para cerrar, sin
   comerle ancho a los rótulos. max-width para que en tablet no se
   convierta en una franja absurda de 700px de menú. */
.lgzm-mobile-panel__sheet {
	display: flex;
	flex-direction: column;
	width: calc(100% - 56px);
	max-width: 420px;
	height: 100%;
	background: var(--lgzm-accent);
	color: var(--lgzm-on-ink);
	padding: 16px var(--lgzm-margin-mobile) 32px;
	overflow-y: auto;
	/* Entra deslizando desde la izquierda, que es donde está la
	   hamburguesa que lo abre. La salida va más rápida que la entrada,
	   mismo criterio que el resto de superficies del tema. */
	transform: translateX(-100%);
	transition: transform var(--lgzm-dur-exit) var(--lgzm-ease-out);
}
.lgzm-mobile-panel.is-open .lgzm-mobile-panel__sheet {
	transform: translateX(0);
	transition-duration: var(--lgzm-dur-surface);
}
@media (prefers-reduced-motion: reduce) {
	.lgzm-mobile-panel,
	.lgzm-mobile-panel__sheet {
		transition: none;
	}
}
@media (min-width: 1024px) {
	.lgzm-mobile-panel {
		display: none !important;
	}
}

.lgzm-mobile-panel__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.lgzm-mobile-panel__close {
	display: flex;
	padding: 12px;
	background: none;
	border: 0;
	color: var(--lgzm-on-ink);
	cursor: pointer;
}
/* El logo del tema es un SVG monocromo servido como <img>: no se le puede
   cambiar el fill desde fuera. brightness(0) lo aplana a negro e invert(1)
   lo pasa a blanco. Mismo truco que ya usa la barra sobre el hero
   (.lgzm-header-bar.is-over-hero, más arriba en este fichero). */
.lgzm-mobile-panel__sheet .lgzm-header-bar__logo img {
	filter: brightness(0) invert(1);
}

.lgzm-mobile-panel__nav {
	margin-top: 40px;
}
/* gap: 0 y filetes, no gap: 4px (petición del cliente, 2026-09-11: "poner
   rayitas separadoras entre cada palabra, se ve muy básico"). El filete va
   en el <li> y no en el <a>: así llega de borde a borde del cajón aunque
   el enlace no ocupe todo el ancho, que es como se lee en la referencia. */
.lgzm-mobile-panel__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0;
}
.lgzm-mobile-panel__list li {
	border-bottom: 1px solid rgba(255, 255, 255, 0.22);
}
.lgzm-mobile-panel__list a {
	display: block;
	padding: 16px 0;
	font-family: 'Bricolage Grotesque', serif;
	font-weight: 600;
	font-size: 21px;
	line-height: 25px;
	letter-spacing: -0.015em;
	color: var(--lgzm-on-ink);
	text-decoration: none;
	transition: opacity var(--lgzm-dur-fast) var(--lgzm-ease-out);
}
/* Sobre azul no se puede oscurecer el texto para marcar la pulsación (el
   acento ES el fondo): se baja la opacidad, que es lo que usa el resto del
   tema sobre superficies de color. */
.lgzm-mobile-panel__list a:active {
	opacity: 0.6;
}

.lgzm-mobile-panel__lang {
	margin-top: auto;
	padding-top: 24px;
	border-top: 1px solid var(--lgzm-ink-hairline);
	display: flex;
	align-items: center;
	justify-content: space-between;
	color: var(--lgzm-ink-secondary);
}
/* El selector de idioma nace con colores de fondo claro (ink-secondary y
   sus variantes). Sobre el azul del cajón hay que invertirlo, igual que ya
   se hace en .lgzm-header-bar.is-over-hero. */
.lgzm-mobile-panel__sheet .lgzm-mobile-panel__lang,
.lgzm-mobile-panel__sheet .lgzm-lang-switcher,
.lgzm-mobile-panel__sheet .lgzm-lang-switcher--static {
	color: rgba(255, 255, 255, 0.7);
}
.lgzm-mobile-panel__sheet .lgzm-lang-switcher__item.is-current {
	color: var(--lgzm-on-ink);
}
.lgzm-mobile-panel__sheet .lgzm-lang-switcher__item:not(.is-current):hover {
	color: var(--lgzm-on-ink);
}
.lgzm-mobile-panel__sheet .lgzm-lang-switcher__sep {
	color: rgba(255, 255, 255, 0.35);
}

html.lgzm-no-scroll,
html.lgzm-no-scroll body {
	overflow: hidden;
}

/* =========================================================================
   FAB móvil — CTA + WhatsApp (§7.2) — template-parts/global/fab.php + fab.js
   ========================================================================= */

.lgzm-fab {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 40;
	display: flex;
	align-items: center;
	gap: 12px;
	/* La visibilidad se retrasa hasta el final de la salida para que el
	   FAB no siga siendo enfocable con Tab mientras se desvanece, y se
	   aplica al instante en la entrada. Es el truco estándar para
	   combinar una transición con "quitar del orden de tabulación". */
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px) scale(0.96);
	transition: opacity var(--lgzm-dur-exit) var(--lgzm-ease-out), transform var(--lgzm-dur-exit) var(--lgzm-ease-out), visibility 0s linear var(--lgzm-dur-exit);
}
.lgzm-fab[hidden] {
	display: none;
}
.lgzm-fab.is-visible {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: opacity var(--lgzm-dur-surface) var(--lgzm-ease-out), transform var(--lgzm-dur-surface) var(--lgzm-ease-out), visibility 0s;
}
.lgzm-fab__cta {
	display: inline-flex;
	align-items: center;
	gap: 0;
	background: var(--lgzm-accent);
	color: var(--lgzm-on-ink);
	font-family: 'Geist', sans-serif;
	font-weight: 600;
	font-size: 15px;
	line-height: 15px;
	padding: 17px 26px;
	border-radius: var(--lgzm-radius-pill);
	box-shadow: 0 6px 18px 0 rgba(3, 6, 61, 0.24);
	white-space: nowrap;
	overflow: hidden;
	text-decoration: none;
	transition: padding-inline var(--lgzm-dur-ui) var(--lgzm-ease-out);
}
/* Ni el icono ni la etiqueta usan display para aparecer: display no se
   puede animar y hacía que el texto se esfumara de golpe mientras la
   píldora se encogía durante 200ms alrededor de un icono que ya estaba
   puesto. Con max-width + opacity el gesto es continuo de principio a
   fin. La opacidad va más rápida que la anchura a propósito: el texto
   termina de irse antes de que el hueco acabe de cerrarse, así no se ve
   texto aplastado. */
.lgzm-fab__cta-icon {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	max-width: 0;
	opacity: 0;
	overflow: hidden;
	transition: max-width var(--lgzm-dur-ui) var(--lgzm-ease-out), opacity var(--lgzm-dur-fast) var(--lgzm-ease-out);
}
.lgzm-fab__cta-label {
	max-width: 14em;
	opacity: 1;
	overflow: hidden;
	transition: max-width var(--lgzm-dur-ui) var(--lgzm-ease-out), opacity var(--lgzm-dur-fast) var(--lgzm-ease-out);
}
.lgzm-fab__cta.is-collapsed {
	padding-inline: 17px;
}
.lgzm-fab__cta.is-collapsed .lgzm-fab__cta-label {
	max-width: 0;
	opacity: 0;
}
.lgzm-fab__cta.is-collapsed .lgzm-fab__cta-icon {
	max-width: 20px;
	opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
	.lgzm-fab {
		transition: none;
	}
}

.lgzm-fab__whatsapp {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	flex-shrink: 0;
	border-radius: var(--lgzm-radius-pill);
	background: var(--lgzm-whatsapp);
	box-shadow: 0 6px 18px 0 rgba(3, 6, 61, 0.2);
}

/* =========================================================================
   Footer (§398:307 desktop / §392:131 móvil) — template-parts/global/footer.php
   ========================================================================= */

.lgzm-footer {
	background: var(--lgzm-ink);
	color: var(--lgzm-on-ink);
}

.lgzm-footer__inner {
	display: flex;
	flex-direction: column;
	gap: 28px;
	padding-top: 40px;
	padding-bottom: 32px;
}
@media (min-width: 1024px) {
	.lgzm-footer__inner {
		gap: 36px;
		padding-top: 64px;
		padding-bottom: 40px;
	}
}

.lgzm-footer__top {
	display: flex;
	flex-direction: column;
	gap: 28px;
	width: 100%;
}
@media (min-width: 1024px) {
	.lgzm-footer__top {
		flex-direction: row;
		gap: 80px;
	}
}

.lgzm-footer__brand {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	width: 100%;
}
@media (min-width: 1024px) {
	.lgzm-footer__brand {
		width: 320px;
		flex-shrink: 0;
		gap: 14px;
	}
}
.lgzm-footer__logo img {
	display: block;
	width: 93px;
	height: auto;
	/* logo.svg es el wordmark en tinta oscura (#191836) usado en la cabecera
	   sobre blanco; en el footer (fondo Oxford Blue) hace falta en blanco.
	   Se invierte con filter en vez de pedir un segundo asset — es un
	   logotipo de un solo color sólido, brightness(0) lo deja en negro puro
	   e invert(1) lo pasa a blanco puro. */
	filter: brightness(0) invert(1);
}
@media (min-width: 1024px) {
	.lgzm-footer__logo img {
		width: 110px;
	}
}
.lgzm-footer__tagline {
	color: rgba(255, 255, 255, 0.7);
}
.lgzm-footer__email {
	color: var(--lgzm-accent-on-ink);
	text-decoration: none;
	transition: color var(--lgzm-dur-fast) var(--lgzm-ease-out);
}
.lgzm-footer__email:hover {
	color: var(--lgzm-on-ink);
}
.lgzm-footer__social {
	display: flex;
	gap: 16px;
}
.lgzm-footer__social a {
	font-family: 'Geist', sans-serif;
	font-weight: 400;
	font-size: 14px;
	line-height: 21px;
	color: rgba(255, 255, 255, 0.8);
	text-decoration: none;
	transition: color var(--lgzm-dur-fast) var(--lgzm-ease-out);
}
@media (min-width: 1024px) {
	.lgzm-footer__social a {
		font-size: 16px;
		line-height: 25px;
	}
}
.lgzm-footer__social a:hover {
	color: var(--lgzm-on-ink);
}

.lgzm-footer__links {
	display: flex;
	gap: 24px;
	width: 100%;
}
@media (min-width: 1024px) {
	.lgzm-footer__links {
		gap: 80px;
	}
}
.lgzm-footer__col {
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1 0 0;
	min-width: 0;
}
@media (min-width: 1024px) {
	.lgzm-footer__col {
		gap: 12px;
	}
}
/* Estilo Row (§3) en ambos breakpoints, sin versales: no hay eyebrows en el proyecto. */
.lgzm-footer__col-title {
	margin: 0;
	font-family: 'Bricolage Grotesque', serif;
	font-weight: 600;
	font-size: 15px;
	line-height: 21px;
	letter-spacing: -0.005em;
	color: var(--lgzm-accent-on-ink);
}
@media (min-width: 1024px) {
	.lgzm-footer__col-title {
		font-size: 17px;
		line-height: 24px;
	}
}
.lgzm-footer__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
@media (min-width: 1024px) {
	.lgzm-footer__list {
		gap: 12px;
	}
}
.lgzm-footer__list a {
	font-family: 'Geist', sans-serif;
	font-weight: 400;
	font-size: 14px;
	line-height: 21px;
	color: rgba(255, 255, 255, 0.72);
	text-decoration: none;
	transition: color var(--lgzm-dur-fast) var(--lgzm-ease-out);
	display: inline-block;
	padding-block: 2px;
}
@media (min-width: 1024px) {
	.lgzm-footer__list a {
		font-size: 16px;
		line-height: 25px;
	}
}
.lgzm-footer__list a:hover {
	color: var(--lgzm-on-ink);
}

.lgzm-footer__hairline {
	width: 100%;
	height: 1px;
	margin: 0;
	border: 0;
	background: var(--lgzm-on-ink-hairline);
}

.lgzm-footer__legal {
	display: flex;
	flex-direction: column;
	gap: 6px;
	color: rgba(255, 255, 255, 0.5);
}
@media (min-width: 1024px) {
	.lgzm-footer__legal {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
}

/* =========================================================================
   Blindaje frente al kit de Elementor (plan 401)
   =========================================================================
   Las páginas que pinta Elementor (la ficha de producto, el carrito, los
   avisos legales) cargan la hoja del kit global, uploads/elementor/css/
   post-11.css, y esa hoja no se queda en su contenido: le da estilo a TODOS
   los <button>, a TODOS los <a> y fondo al <body>, que lleva la clase
   .elementor-kit-11.

     .elementor-kit-11 button              (0,1,1)  fondo #03063D, radio 99px,
                                                      Roboto, mayúsculas
     .elementor-kit-11 button:hover/:focus (0,2,1)  fondo #222222
     .elementor-kit-11 a                   (0,1,1)  color #222222
     .elementor-kit-11                     (0,1,0)  fondo #E6E6E6 en el body

   Nuestras reglas de botón son de una clase (0,1,0) y pierden. Las de
   enlace son solo el reset de base.css, `a { color: inherit; }` (0,0,1), que
   pierde igual. Medido el 2026-09-18: la hamburguesa salía como una píldora
   azul marino de 50px, la página con fondo gris, y — hallazgo posterior, al
   comparar cabecera y pie completos entre una página con kit y una sin él —
   el texto del cajón del menú móvil salía casi negro sobre el fondo azul
   (ilegible) y los enlaces del pie perdían su blanco. En producción ya
   pasaba lo de la hamburguesa y el fondo en /aviso-legal/.

   Se gana con el id de la cabecera (1,1,0/1,1,1) y el del pie (1,0,1), que
   superan también el :hover y el :focus del kit. Solo se redeclaran las
   propiedades que el kit toca, y con los mismos valores que esas reglas ya
   tienen más arriba en este fichero: si se cambia uno, hay que cambiar el
   otro.

   El texto de los botones (toggle y close) se resetea con `font: inherit;
   color: inherit;`, calcando el reset de base.css que el kit les gana. Más
   `text-transform: none;` aparte, porque el atajo `font` NO incluye
   text-transform (es la propiedad que deja "CERRAR" en mayúsculas si no se
   toca). Ahí no hay ningún valor "correcto" que copiar porque nunca se
   veía — son iconos sin texto — pero mejor dejarlos explícitamente neutros
   que heredando lo que sea que gane la guerra de especificidad.

   OJO al añadir algo aquí para .lgzm-nav-list a: existe una variante para
   cuando la cabecera flota sobre un hero (más arriba en este fichero,
   .lgzm-header-bar.is-over-hero .lgzm-nav-list a) que tiene que seguir
   ganando en esas páginas. Por eso esa variante también se reescribe aquí
   con el mismo prefijo #site-header por delante: sin eso, mi regla de aquí
   (1,1,1) le ganaría a la suya (0,3,1) también fuera de Elementor, y el
   texto del menú dejaría de ponerse blanco sobre las fotos de portada.
   Ninguna otra regla de aquí tiene una variante is-over-hero que proteger
   (comprobado antes de escribir esto).

   El selector del body es de atributo y no nombra el kit 11: si alguien crea
   otro kit en Elementor, el número cambia y esto sigue funcionando. */
body[class*="elementor-kit-"] {
	background: var(--lgzm-paper);
}

#site-header .lgzm-header-bar__toggle {
	padding: 12px;
	background: none;
	border-radius: 0;
	font: inherit;
	color: inherit;
	text-transform: none;
}

#site-header .lgzm-mobile-panel__close {
	padding: 12px;
	background: none;
	border-radius: 0;
	color: var(--lgzm-on-ink);
	font: inherit;
	text-transform: none;
}

#site-header .lgzm-nav-list a {
	color: var(--lgzm-ink);
}
#site-header .lgzm-header-bar.is-over-hero .lgzm-nav-list a {
	color: var(--lgzm-on-ink);
}

#site-header .lgzm-header-bar__cta {
	color: var(--lgzm-on-ink);
}

#site-header .lgzm-mobile-panel__list a {
	color: var(--lgzm-on-ink);
}

#site-footer a {
	color: inherit;
}

/* =========================================================================
   Carrito de la cabecera (plan 403)
   =========================================================================
   Solo se pinta en las páginas de la tienda (legazyum_es_tienda()). Dos
   copias: --escritorio dentro de __actions, --movil como hija directa de la
   rejilla en la columna 3. 44px, lo mismo que mide la hamburguesa, para que
   en móvil la barra quede simétrica y el logo en el eje. */
.lgzm-carrito {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	flex-shrink: 0;
	color: var(--lgzm-ink);
	text-decoration: none;
	transition: color var(--lgzm-dur-fast) var(--lgzm-ease-out);
}
.lgzm-carrito:hover {
	color: var(--lgzm-accent);
}
.lgzm-carrito__cuenta {
	position: absolute;
	top: 4px;
	right: 0;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: var(--lgzm-radius-pill);
	background: var(--lgzm-accent);
	color: var(--lgzm-on-ink);
	font-family: 'Geist', sans-serif;
	font-weight: 600;
	font-size: 11px;
	line-height: 18px;
	text-align: center;
	font-variant-numeric: tabular-nums;
}
.lgzm-carrito--movil {
	grid-column: 3;
	grid-row: 1;
	justify-self: end;
}
@media (min-width: 1024px) {
	.lgzm-carrito--movil {
		display: none;
	}
}

/* Blindaje frente al kit de Elementor (mismo caso que el bloque del plan
   401, más arriba en este fichero): .lgzm-carrito es un <a>, así que el
   kit no le pone fondo (eso ya lo cubre body[class*="elementor-kit-"] +
   el resto del blindaje), pero SÍ le gana el color — medido en la ficha
   de producto: salía #222 en vez de la tinta de marca. El carrito no
   existía todavía cuando se escribió el 401. */
#site-header .lgzm-carrito {
	color: var(--lgzm-ink);
}