/* =========================================================================
   Mayaks Distribuidora 2026 — hoja de estilos

   Paleta tomada del logotipo contando píxeles sobre el original de 1270×1270:
     lima         #D7DF21   125 773 px   (el color dominante del isotipo)
     gris         #6D6E71   112 295 px   (la palabra MAYAKS)
     verde        #8CC63F    84 538 px
     verde medio  #71BF44    28 139 px
     verde vivo   #22B24C    15 455 px

   Cuidado con el contraste: el lima sobre blanco da 1.45:1 y el verde vivo
   2.78:1, así que NINGUNO de los dos sirve como texto sobre claro. Para eso
   está --verde-tinta (#0B6E37, 6.36:1). El lima sí es excelente sobre el
   fondo oscuro --tinta (12.29:1) y como fondo de botón con texto oscuro.

   Tipografías: Sora (titulares) e Inter (texto).
   ====================================================================== */

/* -------------------------------------------------------------------------
   1. Variables
   ---------------------------------------------------------------------- */

:root {
	/* Colores del logotipo */
	--lima: #D7DF21;
	--lima-hondo: #B9C10E;
	--verde: #8CC63F;
	--verde-medio: #71BF44;
	--verde-vivo: #22B24C;
	--gris-logo: #6D6E71;

	/* Verde legible como texto sobre fondo claro (6.36:1 sobre blanco) */
	--verde-tinta: #0B6E37;
	--verde-hondo: #0A5C2E;

	--tinta: #0C1710;
	--tinta-2: #13251A;
	--tinta-3: #1B3123;
	--texto: #35443A;
	--apagado: #5B6B60;
	--apagado-claro: #9AA79F;
	--linea: #E2E6E0;
	--linea-oscura: #24382B;
	--superficie: #F3F6F1;
	--superficie-2: #E9EFE6;
	--blanco: #FFFFFF;
	--ambar: #8A5A00;

	/* Tipografía */
	--fuente-titulo: 'Sora', 'Helvetica Neue', Arial, sans-serif;
	--fuente-texto: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

	/* Medidas */
	--ancho: 1300px;
	--margen: clamp(1.25rem, 4vw, 3rem);
	--radio: 8px;
	--radio-g: 16px;
	--radio-xg: 26px;
	--alto-cabecera: 80px;

	/* Movimiento */
	--muelle: cubic-bezier(.22, 1, .36, 1);
	--suave: cubic-bezier(.4, 0, .2, 1);

	/* Sombras */
	--sombra-1: 0 1px 2px rgba(12, 23, 16, .05), 0 4px 14px rgba(12, 23, 16, .06);
	--sombra-2: 0 2px 6px rgba(12, 23, 16, .07), 0 18px 44px rgba(12, 23, 16, .10);
	--sombra-3: 0 30px 80px rgba(12, 23, 16, .26);
}

/* -------------------------------------------------------------------------
   2. Reinicio y base
   ---------------------------------------------------------------------- */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--alto-cabecera) + 20px);
}

body {
	margin: 0;
	font-family: var(--fuente-texto);
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--texto);
	background: var(--blanco);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

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

/* Varios componentes se ocultan con el atributo hidden y luego reciben un
   display propio, que ganaría por especificidad. Esto lo evita. */
[hidden] { display: none !important; }

a { color: inherit; text-decoration-color: rgba(11, 110, 55, .35); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--verde-tinta); }

h1, h2, h3, h4, h5 {
	font-family: var(--fuente-titulo);
	color: var(--tinta);
	line-height: 1.1;
	letter-spacing: -.022em;
	margin: 0 0 .6em;
	font-weight: 800;
}

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0 0 1.2em; padding-left: 1.2em; }

::selection { background: var(--lima); color: var(--tinta); }

:focus-visible {
	outline: 3px solid var(--verde-tinta);
	outline-offset: 3px;
	border-radius: 3px;
}

.visualmente-oculto {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap; border: 0;
}

.saltar {
	position: fixed; top: -100px; left: 16px; z-index: 999;
	background: var(--lima); color: var(--tinta);
	padding: 12px 20px; font-weight: 700; border-radius: var(--radio);
	transition: top .2s var(--suave);
}
.saltar:focus { top: 16px; }

/* -------------------------------------------------------------------------
   3. Utilidades
   ---------------------------------------------------------------------- */

.contenedor {
	width: 100%;
	max-width: var(--ancho);
	margin-inline: auto;
	padding-inline: var(--margen);
}
.contenedor--angosto { max-width: 880px; }

.seccion { padding-block: clamp(3.6rem, 8vw, 6.5rem); }
.seccion--suave { background: var(--superficie); }
.seccion__pie { margin-top: clamp(2rem, 4vw, 3rem); text-align: center; }

.icono { width: 24px; height: 24px; flex: none; }
.icono--mini { width: 17px; height: 17px; }

.rotulo {
	display: inline-flex; align-items: center; gap: 10px;
	font-family: var(--fuente-titulo);
	font-size: .75rem; font-weight: 700;
	letter-spacing: .18em; text-transform: uppercase;
	color: var(--verde-tinta);
	margin: 0 0 1rem;
}
.rotulo span {
	width: 26px; height: 2px; border-radius: 2px;
	background: linear-gradient(90deg, var(--lima), var(--verde-vivo));
}
.rotulo--claro { color: var(--lima); }

.encabezado { max-width: 46rem; margin-bottom: clamp(2.2rem, 4vw, 3.4rem); }
.encabezado--centrado { margin-inline: auto; text-align: center; }
.encabezado--centrado .rotulo { justify-content: center; }
.encabezado__titulo { font-size: clamp(1.85rem, 1.1rem + 2.6vw, 3.1rem); margin-bottom: .5em; }
.encabezado__texto { font-size: 1.09rem; color: var(--apagado); margin: 0; }

/* El degradado del destello se vuelve a declarar en cada contexto porque un
   elemento con transform propio (las palabras animadas) NO hereda el
   background-clip del padre. */
.destello {
	font-style: normal;
	background: linear-gradient(100deg, var(--verde-tinta) 0%, var(--verde-vivo) 45%, var(--verde) 75%, var(--lima-hondo) 100%);
	-webkit-background-clip: text; background-clip: text;
	-webkit-text-fill-color: transparent; color: transparent;
}
.pal > i .destello,
.pal > i.destello {
	background: linear-gradient(100deg, var(--verde-tinta) 0%, var(--verde-vivo) 45%, var(--verde) 75%, var(--lima-hondo) 100%);
	-webkit-background-clip: text; background-clip: text;
	-webkit-text-fill-color: transparent; color: transparent;
}
/* Una vez que el titular se parte en palabras, el degradado pasa a cada <i>.
   Si se dejara también en el <em> padre, éste pintaría su fondo como caja
   detrás de las palabras (los hijos inline-block ya no lo recortan). */
.destello--vaciado,
.hero__titulo .destello--vaciado,
.cta__titulo .destello--vaciado,
.portadilla__titulo .destello--vaciado {
	background: none;
	-webkit-text-fill-color: currentColor;
	color: inherit;
	animation: none;
}

/* -------------------------------------------------------------------------
   4. Botones
   ---------------------------------------------------------------------- */

.boton {
	position: relative;
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	font-family: var(--fuente-titulo);
	font-size: .95rem; font-weight: 700;
	line-height: 1;
	padding: 15px 26px;
	border: 1.5px solid transparent;
	border-radius: 99px;
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
	transition: transform .35s var(--muelle), background-color .25s var(--suave),
	            color .25s var(--suave), border-color .25s var(--suave), box-shadow .25s var(--suave);
}
.boton:hover { transform: translateY(-2px); }
.boton:active { transform: translateY(0); }
.boton__flecha { width: 18px; height: 18px; transition: transform .35s var(--muelle); }
.boton:hover .boton__flecha { transform: translateX(4px); }

.boton--primario {
	background: var(--lima); color: var(--tinta);
	box-shadow: 0 6px 20px rgba(184, 193, 14, .28);
}
.boton--primario:hover { background: #E4EC3A; box-shadow: 0 12px 30px rgba(184, 193, 14, .38); }

.boton--oscuro { background: var(--tinta); color: var(--blanco); }
.boton--oscuro:hover { background: var(--tinta-3); }

.boton--verde { background: var(--verde-tinta); color: var(--blanco); }
.boton--verde:hover { background: var(--verde-hondo); }

.boton--fantasma {
	background: rgba(255, 255, 255, .07); color: var(--blanco);
	border-color: rgba(255, 255, 255, .34);
	backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.boton--fantasma:hover { background: rgba(255, 255, 255, .16); border-color: var(--lima); }

.boton--fantasma-oscuro { background: transparent; color: var(--tinta); border-color: rgba(12, 23, 16, .22); }
.boton--fantasma-oscuro:hover { border-color: var(--verde-tinta); color: var(--verde-tinta); background: rgba(11, 110, 55, .05); }

.boton--grande { padding: 18px 32px; font-size: 1rem; }
.boton--compacto { padding: 11px 20px; font-size: .875rem; }
.boton--bloque { width: 100%; }
.boton[disabled], .boton[aria-disabled="true"] { opacity: .5; pointer-events: none; }

/* -------------------------------------------------------------------------
   5. Barra superior y cabecera
   ---------------------------------------------------------------------- */

.barra-superior {
	background: var(--tinta);
	color: rgba(255, 255, 255, .74);
	font-size: .8125rem;
}
.barra-superior__cuerpo {
	display: flex; align-items: center; justify-content: space-between;
	gap: 20px; min-height: 42px; flex-wrap: wrap;
}
.barra-superior__lema { display: flex; align-items: center; gap: 8px; margin: 0; }
.barra-superior__lema .icono { color: var(--lima); }
.barra-superior__datos { display: flex; align-items: center; gap: 22px; }
.barra-superior__datos a, .barra-superior__lugar {
	display: inline-flex; align-items: center; gap: 7px;
	text-decoration: none;
	transition: color .2s var(--suave);
}
.barra-superior__datos a:hover { color: var(--lima); }
.barra-superior__datos .icono { color: var(--verde); }
.barra-superior__red .icono { color: rgba(255, 255, 255, .74); }

.cabecera {
	position: sticky; top: 0; z-index: 100;
	background: rgba(255, 255, 255, .92);
	backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
	border-bottom: 1px solid var(--linea);
	transition: box-shadow .3s var(--suave), background-color .3s var(--suave);
}
.cabecera.esta-fija { box-shadow: var(--sombra-1); background: rgba(255, 255, 255, .97); }
.cabecera__cuerpo {
	display: flex; align-items: center; gap: 20px;
	min-height: var(--alto-cabecera);
}

.marca { flex: none; display: block; line-height: 0; text-decoration: none; }
.marca__logo, .marca .custom-logo { height: 52px; width: auto; }
.marca__logo--claro { display: none; }

.navegacion { margin-left: auto; }
.menu {
	display: flex; align-items: center; gap: 4px;
	list-style: none; margin: 0; padding: 0;
}
.menu > .menu-item > a {
	display: block;
	font-family: var(--fuente-titulo);
	font-size: .9375rem; font-weight: 600;
	color: var(--tinta);
	padding: 10px 14px;
	border-radius: 99px;
	text-decoration: none;
	transition: color .2s var(--suave), background-color .2s var(--suave);
}
.menu > .menu-item > a:hover { color: var(--verde-tinta); background: rgba(11, 110, 55, .07); }
.menu > .current-menu-item > a,
.menu > .current_page_item > a { color: var(--verde-tinta); background: rgba(11, 110, 55, .09); }

.menu-item-has-children { position: relative; }
.menu__abrir { display: none; }
.sub-menu {
	position: absolute; top: calc(100% + 10px); left: 0;
	min-width: 260px;
	list-style: none; margin: 0; padding: 10px;
	background: var(--blanco);
	border: 1px solid var(--linea);
	border-radius: var(--radio-g);
	box-shadow: var(--sombra-2);
	opacity: 0; visibility: hidden;
	transform: translateY(10px);
	transition: opacity .22s var(--suave), transform .3s var(--muelle), visibility .22s;
}
.sub-menu--categorias { columns: 2; column-gap: 6px; min-width: 460px; }
.menu-item-has-children:hover > .sub-menu,
.menu-item-has-children:focus-within > .sub-menu {
	opacity: 1; visibility: visible; transform: translateY(0);
}
.sub-menu a {
	display: flex; align-items: center; gap: 10px;
	padding: 9px 12px; border-radius: 10px;
	font-size: .9rem; font-weight: 500;
	text-decoration: none;
	break-inside: avoid;
	transition: background-color .18s var(--suave), color .18s var(--suave);
}
.sub-menu a:hover { background: var(--superficie); color: var(--verde-tinta); }
.sub-menu .icono { color: var(--verde-vivo); }

.cabecera__acciones { display: flex; align-items: center; gap: 12px; flex: none; }

.carrito-boton {
	position: relative;
	display: inline-flex; align-items: center; gap: 8px;
	padding: 10px 16px;
	border: 1.5px solid var(--linea);
	border-radius: 99px;
	font-family: var(--fuente-titulo);
	font-size: .875rem; font-weight: 600;
	color: var(--tinta);
	text-decoration: none;
	transition: border-color .2s var(--suave), color .2s var(--suave), transform .3s var(--muelle);
}
.carrito-boton:hover { border-color: var(--verde-tinta); color: var(--verde-tinta); }
.carrito-boton.esta-latiendo { animation: latido-carrito .5s var(--muelle); }
@keyframes latido-carrito {
	40% { transform: scale(1.09); }
	100% { transform: scale(1); }
}
.carrito-boton__globo {
	position: absolute; top: -7px; right: -6px;
	min-width: 22px; height: 22px; padding: 0 6px;
	display: grid; place-items: center;
	background: var(--verde-tinta); color: var(--blanco);
	border-radius: 99px;
	font-size: .75rem; font-weight: 700; line-height: 1;
}

.cabecera__progreso { height: 2px; background: transparent; }
.cabecera__progreso i {
	display: block; height: 100%; width: 0;
	background: linear-gradient(90deg, var(--verde-vivo), var(--lima));
}

.hamburguesa {
	display: none;
	width: 46px; height: 46px;
	background: transparent; border: 1.5px solid var(--linea);
	border-radius: 12px; cursor: pointer;
	padding: 0; place-items: center;
}
.hamburguesa span {
	display: block; width: 20px; height: 2px; margin: 3px auto;
	background: var(--tinta); border-radius: 2px;
	transition: transform .3s var(--muelle), opacity .2s var(--suave);
}
.hamburguesa[aria-expanded="true"] span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.hamburguesa[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburguesa[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

.velo-menu {
	position: fixed; inset: 0; z-index: 90;
	background: rgba(12, 23, 16, .5);
	opacity: 0; visibility: hidden;
	transition: opacity .3s var(--suave), visibility .3s;
}
.velo-menu.esta-visible { opacity: 1; visibility: visible; }

/* -------------------------------------------------------------------------
   6. Hero panorámico 3D
   ---------------------------------------------------------------------- */

.hero {
	position: relative;
	min-height: min(94svh, 920px);
	display: flex; flex-direction: column; justify-content: center;
	background: var(--tinta);
	overflow: hidden;
	isolation: isolate;
	/* El puntero escribe aquí --mx y --my, de -1 a 1 */
	--mx: 0; --my: 0;
}

.hero__escena {
	position: absolute; inset: 0;
	perspective: 1500px;
	perspective-origin: 50% 50%;
	transform-style: preserve-3d;
}

.hero__panel {
	position: absolute; inset: 0;
	transform-style: preserve-3d;
	opacity: 0;
	visibility: hidden;
	transform: translateX(24%) rotateY(-18deg) scale(.9);
	transform-origin: left center;
	filter: blur(12px) saturate(.65);
	transition:
		opacity .9s var(--suave),
		transform 1.2s var(--muelle),
		filter .9s var(--suave),
		visibility 1.2s;
}
.hero__panel.es-activa {
	opacity: 1; visibility: visible;
	transform: rotateY(calc(var(--mx) * 3.4deg)) rotateX(calc(var(--my) * -2.2deg)) scale(1);
	filter: none;
	z-index: 2;
}
.hero__panel.va-saliendo-izq {
	opacity: 0; visibility: visible;
	transform: translateX(-24%) rotateY(18deg) scale(.9);
	transform-origin: right center;
	filter: blur(12px) saturate(.65);
	z-index: 1;
}
.hero__panel.va-saliendo-der {
	opacity: 0; visibility: visible;
	transform: translateX(24%) rotateY(-18deg) scale(.9);
	transform-origin: left center;
	filter: blur(12px) saturate(.65);
	z-index: 1;
}
.hero__panel.viene-de-izq {
	transform: translateX(-24%) rotateY(18deg) scale(.9);
	transform-origin: right center;
}

.hero__foto { position: absolute; inset: -6%; transform-style: preserve-3d; }
.hero__foto img {
	width: 100%; height: 100%; object-fit: cover;
	transform: translate3d(calc(var(--mx) * -16px), calc(var(--my) * -16px), 0) scale(1.06);
	transition: transform .5s var(--suave);
}
.hero__panel.es-activa .hero__foto img { animation: deriva 24s ease-in-out infinite alternate; }
@keyframes deriva {
	from { scale: 1.04; }
	to { scale: 1.14; }
}

.hero__degradado {
	position: absolute; inset: 0;
	background:
		linear-gradient(96deg, rgba(12, 23, 16, .95) 0%, rgba(12, 23, 16, .84) 34%, rgba(12, 23, 16, .32) 64%, rgba(12, 23, 16, .58) 100%),
		linear-gradient(0deg, rgba(12, 23, 16, .92) 0%, transparent 44%);
}

/* Trama sutil de cápsulas, guiño al isotipo */
.hero__malla {
	position: absolute; inset: 0; z-index: 3; pointer-events: none;
	opacity: .2;
	background-image:
		linear-gradient(rgba(215, 223, 33, .2) 1px, transparent 1px),
		linear-gradient(90deg, rgba(215, 223, 33, .2) 1px, transparent 1px);
	background-size: 92px 92px;
	mask-image: radial-gradient(ellipse 72% 62% at 80% 38%, #000 0%, transparent 74%);
	-webkit-mask-image: radial-gradient(ellipse 72% 62% at 80% 38%, #000 0%, transparent 74%);
}
.hero__polvo { position: absolute; inset: 0; z-index: 3; pointer-events: none; }

.hero__cuerpo {
	position: relative; z-index: 4;
	padding-block: clamp(4rem, 10vh, 7rem) clamp(11rem, 22vh, 14rem);
	display: grid;
}
.hero__texto {
	grid-area: 1 / 1;
	max-width: 47rem;
	opacity: 0; visibility: hidden; pointer-events: none;
	transform: translateY(26px);
	transition: opacity .55s var(--suave), transform .85s var(--muelle), visibility .55s;
}
.hero__texto.es-activa { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }

/* Cada capa se desplaza según la profundidad que declara */
.hero__texto [data-profundidad] {
	transform: translate3d(
		calc(var(--mx) * var(--p, 10) * 1px),
		calc(var(--my) * var(--p, 10) * .5px),
		0);
	transition: transform .45s var(--suave);
}

.hero__etiqueta {
	display: inline-flex; align-items: center; gap: 10px;
	font-family: var(--fuente-titulo);
	font-size: .75rem; font-weight: 700;
	letter-spacing: .18em; text-transform: uppercase;
	color: var(--lima);
	background: rgba(215, 223, 33, .1);
	border: 1px solid rgba(215, 223, 33, .32);
	padding: 8px 16px; border-radius: 99px;
	backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
	margin-bottom: 1.4rem;
}
.hero__pulso {
	width: 8px; height: 8px; border-radius: 50%;
	background: var(--lima);
	animation: latido 2.4s ease-out infinite;
}
@keyframes latido {
	0% { box-shadow: 0 0 0 0 rgba(215, 223, 33, .7); }
	70% { box-shadow: 0 0 0 12px rgba(215, 223, 33, 0); }
	100% { box-shadow: 0 0 0 0 rgba(215, 223, 33, 0); }
}

.hero__titulo {
	font-family: var(--fuente-titulo);
	font-size: clamp(2.3rem, 1rem + 5.1vw, 4.7rem);
	font-weight: 800;
	line-height: 1.04;
	letter-spacing: -.03em;
	color: var(--blanco);
	margin: 0 0 1.1rem;
	text-wrap: balance;
	text-shadow: 0 2px 30px rgba(0, 0, 0, .35);
}
/* Sobre el hero oscuro el destello va en lima, no en verde tinta */
.hero__titulo .destello,
.hero__titulo .pal > i .destello {
	background: linear-gradient(102deg, var(--verde) 0%, var(--lima) 42%, #F2F79A 60%, var(--lima) 100%);
	background-size: 200% 100%;
	-webkit-background-clip: text; background-clip: text;
	-webkit-text-fill-color: transparent; color: transparent;
	animation: brillo 7s linear infinite;
}
@keyframes brillo {
	from { background-position: 0% 50%; }
	to { background-position: 200% 50%; }
}

.hero__parrafo {
	font-size: clamp(1.02rem, .96rem + .35vw, 1.22rem);
	line-height: 1.62;
	color: rgba(255, 255, 255, .86);
	max-width: 40rem;
	margin-bottom: 2rem;
}

.hero__botones { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 2.1rem; }

.hero__dato {
	display: inline-flex; align-items: baseline; gap: 12px;
	padding-left: 18px; border-left: 3px solid var(--lima);
	margin: 0;
}
.hero__dato strong {
	font-family: var(--fuente-titulo);
	font-size: 1.9rem; font-weight: 800;
	color: var(--lima); line-height: 1;
}
.hero__dato span { color: rgba(255, 255, 255, .72); font-size: .9375rem; }

/* --- Tira de miniaturas en perspectiva --- */
.hero__control {
	position: absolute; left: 0; right: 0; bottom: 0; z-index: 5;
	padding-bottom: clamp(1.5rem, 4vh, 2.6rem);
}
.hero__control-cuerpo { display: flex; align-items: flex-end; gap: 14px; }

.hero__flecha, .hero__pausa {
	flex: none;
	width: 46px; height: 46px;
	display: grid; place-items: center;
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .22);
	border-radius: 50%; color: var(--blanco); cursor: pointer;
	backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
	transition: background-color .22s var(--suave), border-color .22s var(--suave), transform .3s var(--muelle), color .22s var(--suave);
}
.hero__flecha svg, .hero__pausa svg { width: 20px; height: 20px; }
.hero__flecha:hover, .hero__pausa:hover {
	background: var(--lima); border-color: var(--lima);
	color: var(--tinta); transform: translateY(-2px);
}
.hero__pausa-icono--play { display: none; }
.hero__pausa[aria-pressed="true"] .hero__pausa-icono--pausa { display: none; }
.hero__pausa[aria-pressed="true"] .hero__pausa-icono--play { display: block; }

.tira {
	flex: 1 1 auto;
	display: flex; gap: 10px;
	perspective: 900px;
	overflow-x: auto;
	scrollbar-width: none;
	padding: 6px 2px 2px;
}
.tira::-webkit-scrollbar { display: none; }

.tira__item {
	position: relative;
	flex: 1 1 0; min-width: 138px;
	display: flex; align-items: center; gap: 10px;
	padding: 8px 12px 8px 8px;
	background: rgba(12, 23, 16, .42);
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: var(--radio-g);
	cursor: pointer; text-align: left; color: var(--blanco);
	backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
	transform: rotateX(10deg) translateZ(-16px);
	transform-origin: bottom center;
	opacity: .6;
	transition: transform .55s var(--muelle), opacity .35s var(--suave), border-color .35s var(--suave), background-color .35s var(--suave);
	overflow: hidden;
}
.tira__item:hover { opacity: .92; transform: rotateX(4deg) translateZ(0); }
.tira__item.es-activa {
	opacity: 1;
	transform: rotateX(0deg) translateZ(26px);
	border-color: rgba(215, 223, 33, .6);
	background: rgba(12, 23, 16, .7);
}
.tira__foto {
	flex: none; width: 54px; height: 40px;
	border-radius: 6px; overflow: hidden;
	border: 1px solid rgba(255, 255, 255, .16);
}
.tira__foto img { width: 100%; height: 100%; object-fit: cover; }
.tira__texto { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.tira__texto em {
	font-family: var(--fuente-titulo); font-style: normal;
	font-size: .6875rem; font-weight: 700; letter-spacing: .1em;
	color: var(--lima);
}
.tira__texto > span {
	font-size: .8125rem; font-weight: 600; line-height: 1.25;
	color: rgba(255, 255, 255, .9);
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tira__barra {
	position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
	background: rgba(255, 255, 255, .12);
}
.tira__barra i { display: block; height: 100%; width: 0; background: var(--lima); }
.tira__item.es-activa .tira__barra i { animation: avance var(--duracion, 7s) linear forwards; }
.hero.esta-en-pausa .tira__item.es-activa .tira__barra i { animation-play-state: paused; }
@keyframes avance { from { width: 0; } to { width: 100%; } }

.hero__baja {
	position: absolute; left: 50%; bottom: 6.8rem; z-index: 5;
	transform: translateX(-50%);
	width: 26px; height: 42px;
	border: 1.5px solid rgba(255, 255, 255, .32); border-radius: 14px;
	display: grid; place-items: start center; padding-top: 8px;
}
.hero__baja span {
	width: 3px; height: 8px; border-radius: 2px; background: var(--lima);
	animation: baja 1.9s ease-in-out infinite;
}
@keyframes baja {
	0%, 100% { transform: translateY(0); opacity: 1; }
	60% { transform: translateY(12px); opacity: .2; }
}

/* -------------------------------------------------------------------------
   7. Marquesina de marcas
   ---------------------------------------------------------------------- */

.franja-marcas {
	background: var(--blanco);
	border-bottom: 1px solid var(--linea);
	padding-block: clamp(2rem, 4vw, 3rem);
	overflow: hidden;
}
.franja-marcas__rotulo {
	font-family: var(--fuente-titulo);
	font-size: .75rem; font-weight: 700;
	letter-spacing: .18em; text-transform: uppercase;
	color: var(--apagado);
	text-align: center;
	margin: 0 0 1.6rem;
}

.marquesina {
	position: relative;
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquesina__pista { display: flex; width: max-content; animation: desfile 46s linear infinite; }
.marquesina:hover .marquesina__pista { animation-play-state: paused; }
@keyframes desfile {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}
.marquesina__lista {
	display: flex; align-items: center; gap: clamp(2.4rem, 5vw, 4.4rem);
	list-style: none; margin: 0; padding: 0 clamp(1.2rem, 2.5vw, 2.2rem);
}
.marquesina__lista img {
	height: 40px; width: auto;
	filter: grayscale(1); opacity: .55;
	transition: filter .3s var(--suave), opacity .3s var(--suave), transform .35s var(--muelle);
}
.marquesina__lista li:hover img { filter: none; opacity: 1; transform: scale(1.06); }
.marquesina--claro .marquesina__lista img { opacity: .7; filter: none; }

/* -------------------------------------------------------------------------
   8. Revelado al desplazar
   ---------------------------------------------------------------------- */

[data-revelar] {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity .7s var(--suave) var(--retraso, 0ms), transform .9s var(--muelle) var(--retraso, 0ms);
}
[data-revelar].esta-visible { opacity: 1; transform: none; }

/* Los titulares se parten en palabras y suben una tras otra */
[data-revelar="palabras"] { opacity: 1; transform: none; transition: none; }
.pal { display: inline-block; overflow: hidden; vertical-align: bottom; }
.pal > i {
	display: inline-block; font-style: inherit;
	transform: translateY(105%);
	transition: transform .8s var(--muelle);
	transition-delay: calc(var(--i, 0) * 42ms + var(--retraso, 0ms));
}
[data-revelar="palabras"].esta-visible .pal > i { transform: none; }

/* -------------------------------------------------------------------------
   9. Tarjetas de categoría
   ---------------------------------------------------------------------- */

.rejilla-cat {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(288px, 1fr));
	gap: clamp(1rem, 2vw, 1.6rem);
}

.tarjeta-cat {
	position: relative;
	display: flex; flex-direction: column;
	background: var(--blanco);
	border: 1px solid var(--linea);
	border-radius: var(--radio-g);
	overflow: hidden;
	transition: transform .5s var(--muelle), box-shadow .4s var(--suave), border-color .4s var(--suave);
}
.tarjeta-cat:hover {
	transform: translateY(-6px);
	box-shadow: var(--sombra-2);
	border-color: rgba(34, 178, 76, .4);
}
.tarjeta-cat__enlace { position: absolute; inset: 0; z-index: 2; }
.tarjeta-cat__foto { aspect-ratio: 4 / 3; overflow: hidden; background: var(--superficie); }
.tarjeta-cat__foto img {
	width: 100%; height: 100%; object-fit: cover;
	transition: transform .8s var(--muelle);
}
.tarjeta-cat:hover .tarjeta-cat__foto img { transform: scale(1.07); }
.tarjeta-cat__cuerpo { padding: 1.4rem 1.5rem 1.5rem; display: flex; flex-direction: column; flex: 1; }
.tarjeta-cat__icono {
	display: grid; place-items: center;
	width: 44px; height: 44px; margin-bottom: .9rem;
	border-radius: 12px;
	background: linear-gradient(140deg, rgba(215, 223, 33, .22), rgba(34, 178, 76, .16));
	color: var(--verde-tinta);
}
.tarjeta-cat__titulo { font-size: 1.22rem; margin-bottom: .5rem; }
.tarjeta-cat__texto { font-size: .95rem; color: var(--apagado); margin: 0 0 1.2rem; flex: 1; }
.tarjeta-cat__pie {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	margin: 0; padding-top: 1rem;
	border-top: 1px solid var(--linea);
	font-size: .85rem;
}
.tarjeta-cat__conteo { color: var(--apagado); }
.tarjeta-cat__ver {
	display: inline-flex; align-items: center; gap: 6px;
	font-family: var(--fuente-titulo); font-weight: 700;
	color: var(--verde-tinta);
}
.tarjeta-cat__ver .icono { transition: transform .35s var(--muelle); }
.tarjeta-cat:hover .tarjeta-cat__ver .icono { transform: translateX(4px); }

/* -------------------------------------------------------------------------
   10. Tarjetas de producto
   ---------------------------------------------------------------------- */

.rejilla-productos {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
	gap: clamp(1rem, 1.8vw, 1.5rem);
}

.producto {
	display: flex; flex-direction: column;
	background: var(--blanco);
	border: 1px solid var(--linea);
	border-radius: var(--radio-g);
	overflow: hidden;
	transition: transform .45s var(--muelle), box-shadow .4s var(--suave), border-color .4s var(--suave);
}
.producto:hover { transform: translateY(-4px); box-shadow: var(--sombra-2); border-color: rgba(34, 178, 76, .38); }
.producto.esta-oculto { display: none; }

.producto__lamina { position: relative; aspect-ratio: 4 / 3; background: var(--superficie); overflow: hidden; }
.producto__foto { display: block; width: 100%; height: 100%; }
.producto__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--muelle); }
.producto:hover .producto__foto img { transform: scale(1.06); }

.producto__sello {
	position: absolute; top: 10px; left: 10px; z-index: 2;
	padding: 5px 11px; border-radius: 99px;
	font-family: var(--fuente-titulo);
	font-size: .6875rem; font-weight: 700; letter-spacing: .04em;
	background: var(--tinta); color: var(--lima);
}
.producto__marca {
	position: absolute; bottom: 10px; right: 10px; z-index: 2;
	display: grid; place-items: center;
	padding: 6px 10px; border-radius: 8px;
	background: rgba(255, 255, 255, .94);
	box-shadow: var(--sombra-1);
}
.producto__marca img { height: 18px; width: auto; }

.producto__cuerpo { padding: 1.1rem 1.2rem .8rem; flex: 1; }
.producto__categoria {
	font-family: var(--fuente-titulo);
	font-size: .6875rem; font-weight: 700;
	letter-spacing: .12em; text-transform: uppercase;
	color: var(--verde-tinta);
	margin: 0 0 .5rem;
}
.producto__titulo { font-size: 1.02rem; line-height: 1.3; margin-bottom: .35rem; }
.producto__titulo a { text-decoration: none; }
.producto__titulo a:hover { color: var(--verde-tinta); }
.producto__presentacion { font-size: .875rem; color: var(--apagado); margin: 0 0 .7rem; }
.producto__precio { margin: 0; }

.precio {
	font-family: var(--fuente-titulo);
	font-size: 1.22rem; font-weight: 800;
	color: var(--tinta);
}
.precio__moneda { font-size: .8em; }
.precio__divisa { font-size: .62em; font-weight: 600; color: var(--apagado); }
.precio--consultar {
	font-size: .9rem; font-weight: 600;
	color: var(--apagado);
	display: inline-flex; align-items: center; gap: 6px;
}
.precio--consultar::before {
	content: ""; width: 7px; height: 7px; border-radius: 50%;
	background: var(--verde-vivo);
}

.producto__pie {
	display: flex; align-items: center; gap: 8px;
	padding: .8rem 1.2rem 1.2rem;
}
.producto__agregar { flex: 1; }

.cantidad {
	display: inline-flex; align-items: center;
	border: 1.5px solid var(--linea); border-radius: 99px;
	overflow: hidden; flex: none;
}
.cantidad__boton {
	width: 34px; height: 40px;
	display: grid; place-items: center;
	background: transparent; border: 0; cursor: pointer;
	color: var(--apagado);
	transition: background-color .2s var(--suave), color .2s var(--suave);
}
.cantidad__boton:hover { background: var(--superficie); color: var(--verde-tinta); }
.cantidad__campo {
	width: 40px; height: 40px;
	border: 0; text-align: center;
	font-family: var(--fuente-titulo); font-size: .9rem; font-weight: 700;
	color: var(--tinta);
	background: transparent;
	-moz-appearance: textfield;
}
.cantidad__campo::-webkit-outer-spin-button,
.cantidad__campo::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cantidad__campo:focus { outline: none; background: var(--superficie); }

/* -------------------------------------------------------------------------
   11. Diferenciadores
   ---------------------------------------------------------------------- */

.rejilla-difs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: clamp(1rem, 2vw, 1.8rem);
}
.dif {
	padding: 1.8rem;
	background: var(--blanco);
	border: 1px solid var(--linea);
	border-radius: var(--radio-g);
	transition: transform .45s var(--muelle), border-color .35s var(--suave), box-shadow .35s var(--suave);
}
.dif:hover { transform: translateY(-4px); border-color: rgba(34, 178, 76, .4); box-shadow: var(--sombra-1); }
.dif__icono {
	display: grid; place-items: center;
	width: 52px; height: 52px; margin-bottom: 1.1rem;
	border-radius: 14px;
	background: linear-gradient(140deg, rgba(215, 223, 33, .24), rgba(34, 178, 76, .16));
	color: var(--verde-tinta);
}
.dif__titulo { font-size: 1.14rem; margin-bottom: .5rem; }
.dif__texto { font-size: .95rem; color: var(--apagado); margin: 0; }

/* -------------------------------------------------------------------------
   12. Bloque de cifras
   ---------------------------------------------------------------------- */

.bloque-cifras { padding-block: clamp(3.6rem, 8vw, 6.5rem); background: var(--blanco); }
.bloque-cifras__cuerpo {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;
}
.bloque-cifras__foto {
	position: relative;
	border-radius: var(--radio-xg);
	overflow: hidden;
	box-shadow: var(--sombra-3);
}
.bloque-cifras__foto::after {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(190deg, transparent 55%, rgba(12, 23, 16, .35));
}
.bloque-cifras__foto img { width: 100%; height: 100%; object-fit: cover; }

.cifras {
	display: grid; grid-template-columns: repeat(2, 1fr);
	gap: 1.4rem 1.8rem;
	list-style: none; margin: 2rem 0; padding: 0;
}
.cifras li { padding-left: 16px; border-left: 3px solid var(--lima); }
.cifras strong {
	display: block;
	font-family: var(--fuente-titulo);
	font-size: clamp(1.8rem, 1.2rem + 1.4vw, 2.5rem);
	font-weight: 800; line-height: 1;
	color: var(--verde-tinta);
}
.cifras span { font-size: .9rem; color: var(--apagado); }

/* -------------------------------------------------------------------------
   13. Pasos
   ---------------------------------------------------------------------- */

.pasos {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: clamp(1rem, 2vw, 1.8rem);
	list-style: none; margin: 0; padding: 0;
	counter-reset: paso;
}
.paso {
	position: relative;
	padding: 1.9rem 1.6rem 1.6rem;
	background: var(--blanco);
	border: 1px solid var(--linea);
	border-radius: var(--radio-g);
}
.paso::before {
	content: "";
	position: absolute; top: 0; left: 1.6rem; right: 1.6rem; height: 3px;
	background: linear-gradient(90deg, var(--lima), var(--verde-vivo));
	transform: scaleX(0); transform-origin: left;
	transition: transform .8s var(--muelle);
}
.paso.esta-visible::before { transform: scaleX(1); }
.paso__numero {
	display: block;
	font-family: var(--fuente-titulo);
	font-size: 2.2rem; font-weight: 800; line-height: 1;
	color: rgba(34, 178, 76, .2);
	margin-bottom: .7rem;
}
.paso__titulo { font-size: 1.1rem; margin-bottom: .45rem; }
.paso__texto { font-size: .93rem; color: var(--apagado); margin: 0; }

/* -------------------------------------------------------------------------
   14. Cobertura
   ---------------------------------------------------------------------- */

.cobertura {
	background-size: cover; background-position: center;
	color: rgba(255, 255, 255, .82);
}
.cobertura h2, .cobertura h3 { color: var(--blanco); }
.cobertura .encabezado__texto { color: rgba(255, 255, 255, .74); }

.rejilla-plazas {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1rem;
}
.plaza {
	padding: 1.5rem 1.4rem;
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: var(--radio-g);
	backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
	transition: transform .45s var(--muelle), border-color .3s var(--suave), background-color .3s var(--suave);
}
.plaza:hover { transform: translateY(-4px); border-color: rgba(215, 223, 33, .5); background: rgba(255, 255, 255, .1); }
.plaza--destaca { border-color: rgba(215, 223, 33, .42); background: rgba(215, 223, 33, .08); }
.plaza__ciudad { font-size: 1.16rem; margin-bottom: .2rem; }
.plaza__estado { font-size: .82rem; color: rgba(255, 255, 255, .58); margin: 0 0 1rem; }
.plaza__entrega {
	display: inline-flex; align-items: center; gap: 7px;
	font-family: var(--fuente-titulo); font-size: .8125rem; font-weight: 700;
	color: var(--lima); margin: 0 0 .3rem;
}
.plaza__plazo { font-size: .875rem; margin: 0; color: rgba(255, 255, 255, .74); }

/* -------------------------------------------------------------------------
   15. Testimonios
   ---------------------------------------------------------------------- */

.rejilla-testimonios {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
	gap: clamp(1rem, 2vw, 1.8rem);
}
.testimonio {
	margin: 0;
	padding: 2rem 1.8rem 1.6rem;
	background: var(--superficie);
	border-radius: var(--radio-g);
	border: 1px solid var(--linea);
	position: relative;
}
.testimonio::before {
	content: "\201C";
	position: absolute; top: -6px; left: 18px;
	font-family: var(--fuente-titulo);
	font-size: 5rem; line-height: 1;
	color: rgba(34, 178, 76, .18);
}
.testimonio blockquote { margin: 0 0 1.2rem; }
.testimonio blockquote p { font-size: 1.02rem; color: var(--texto); margin: 0; }
.testimonio figcaption { border-top: 1px solid var(--linea); padding-top: 1rem; }
.testimonio figcaption strong { display: block; font-family: var(--fuente-titulo); color: var(--tinta); }
.testimonio figcaption span { font-size: .85rem; color: var(--apagado); }

/* -------------------------------------------------------------------------
   16. Acordeón
   ---------------------------------------------------------------------- */

.acordeon { display: flex; flex-direction: column; gap: 10px; }
.acordeon__item {
	background: var(--blanco);
	border: 1px solid var(--linea);
	border-radius: var(--radio);
	overflow: hidden;
	transition: border-color .3s var(--suave), box-shadow .3s var(--suave);
}
.acordeon__item[open] { border-color: rgba(34, 178, 76, .4); box-shadow: var(--sombra-1); }
.acordeon__pregunta {
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
	padding: 1.1rem 1.3rem;
	font-family: var(--fuente-titulo);
	font-size: 1.02rem; font-weight: 600;
	color: var(--tinta);
	cursor: pointer;
	list-style: none;
}
.acordeon__pregunta::-webkit-details-marker { display: none; }
.acordeon__signo {
	flex: none; position: relative;
	width: 22px; height: 22px;
	border-radius: 50%;
	background: var(--superficie-2);
	transition: background-color .25s var(--suave), transform .35s var(--muelle);
}
.acordeon__signo::before, .acordeon__signo::after {
	content: ""; position: absolute; top: 50%; left: 50%;
	width: 10px; height: 2px; border-radius: 2px;
	background: var(--verde-tinta);
	transform: translate(-50%, -50%);
	transition: transform .3s var(--muelle);
}
.acordeon__signo::after { transform: translate(-50%, -50%) rotate(90deg); }
.acordeon__item[open] .acordeon__signo { background: var(--lima); }
.acordeon__item[open] .acordeon__signo::after { transform: translate(-50%, -50%) rotate(0deg); }
.acordeon__respuesta { padding: 0 1.3rem 1.3rem; color: var(--apagado); }

/* -------------------------------------------------------------------------
   17. Artículos del blog
   ---------------------------------------------------------------------- */

.rejilla-articulos {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
	gap: clamp(1rem, 2vw, 1.8rem);
}
.articulo {
	display: flex; flex-direction: column;
	background: var(--blanco);
	border: 1px solid var(--linea);
	border-radius: var(--radio-g);
	overflow: hidden;
	transition: transform .45s var(--muelle), box-shadow .4s var(--suave), border-color .4s var(--suave);
}
.articulo:hover { transform: translateY(-5px); box-shadow: var(--sombra-2); border-color: rgba(34, 178, 76, .38); }
.articulo__foto { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--superficie); }
.articulo__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--muelle); }
.articulo:hover .articulo__foto img { transform: scale(1.06); }
.articulo__cuerpo { padding: 1.4rem 1.5rem 1.5rem; display: flex; flex-direction: column; flex: 1; }
.articulo__meta {
	display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
	font-size: .78rem; color: var(--apagado);
	margin: 0 0 .8rem;
}
.articulo__categoria {
	font-family: var(--fuente-titulo); font-weight: 700;
	letter-spacing: .08em; text-transform: uppercase;
	color: var(--verde-tinta);
}
.articulo__titulo { font-size: 1.16rem; line-height: 1.3; margin-bottom: .6rem; }
.articulo__titulo a { text-decoration: none; }
.articulo__titulo a:hover { color: var(--verde-tinta); }
.articulo__extracto { font-size: .93rem; color: var(--apagado); flex: 1; margin-bottom: 1.1rem; }
.articulo__mas {
	display: inline-flex; align-items: center; gap: 6px;
	font-family: var(--fuente-titulo); font-size: .875rem; font-weight: 700;
	color: var(--verde-tinta); margin: 0;
}
.articulo__mas .icono { transition: transform .35s var(--muelle); }
.articulo:hover .articulo__mas .icono { transform: translateX(4px); }

/* -------------------------------------------------------------------------
   18. Llamada a la acción
   ---------------------------------------------------------------------- */

.cta {
	background-size: cover; background-position: center;
	padding-block: clamp(3.4rem, 7vw, 5.6rem);
	color: rgba(255, 255, 255, .84);
}
.cta__cuerpo {
	display: grid; grid-template-columns: 1.25fr 1fr;
	gap: clamp(1.8rem, 4vw, 3.4rem);
	align-items: center;
}
.cta__titulo { color: var(--blanco); font-size: clamp(1.7rem, 1.1rem + 2.2vw, 2.7rem); }
.cta__titulo .destello,
.cta__titulo .pal > i .destello {
	background: linear-gradient(102deg, var(--verde) 0%, var(--lima) 45%, #F2F79A 62%, var(--lima) 100%);
	-webkit-background-clip: text; background-clip: text;
	-webkit-text-fill-color: transparent; color: transparent;
}
.cta__acciones { display: flex; flex-wrap: wrap; gap: 12px; }
.cta__tel {
	display: flex; align-items: center; gap: 9px;
	width: 100%; margin: .4rem 0 0;
	font-family: var(--fuente-titulo); font-size: 1.1rem; font-weight: 700;
	color: var(--blanco);
}
.cta__tel .icono { color: var(--lima); }
.cta__tel a { text-decoration: none; }

/* -------------------------------------------------------------------------
   19. Portadilla de las páginas interiores
   ---------------------------------------------------------------------- */

.portadilla {
	position: relative;
	padding-block: clamp(3.4rem, 8vw, 6rem) clamp(3rem, 6vw, 5rem);
	background: var(--tinta);
	overflow: hidden;
	isolation: isolate;
}
.portadilla__foto { position: absolute; inset: 0; }
.portadilla__foto img { width: 100%; height: 100%; object-fit: cover; }
.portadilla__velo {
	position: absolute; inset: 0;
	background:
		linear-gradient(98deg, rgba(12, 23, 16, .95) 0%, rgba(12, 23, 16, .85) 42%, rgba(12, 23, 16, .5) 100%),
		linear-gradient(0deg, rgba(12, 23, 16, .8), transparent 60%);
}
.portadilla__malla {
	position: absolute; inset: 0; opacity: .18;
	background-image:
		linear-gradient(rgba(215, 223, 33, .22) 1px, transparent 1px),
		linear-gradient(90deg, rgba(215, 223, 33, .22) 1px, transparent 1px);
	background-size: 84px 84px;
	mask-image: radial-gradient(ellipse 70% 70% at 82% 30%, #000 0%, transparent 72%);
	-webkit-mask-image: radial-gradient(ellipse 70% 70% at 82% 30%, #000 0%, transparent 72%);
}
.portadilla__cuerpo { position: relative; z-index: 2; max-width: 52rem; }
.portadilla__titulo {
	font-size: clamp(2rem, 1.1rem + 3.4vw, 3.5rem);
	color: var(--blanco); margin-bottom: .5em;
	text-wrap: balance;
}
.portadilla__titulo .destello,
.portadilla__titulo .pal > i .destello {
	background: linear-gradient(102deg, var(--verde) 0%, var(--lima) 45%, #F2F79A 62%, var(--lima) 100%);
	-webkit-background-clip: text; background-clip: text;
	-webkit-text-fill-color: transparent; color: transparent;
}
.portadilla__texto { font-size: 1.08rem; color: rgba(255, 255, 255, .82); margin: 0; max-width: 44rem; }

.migas { margin-bottom: 1.3rem; font-size: .82rem; }
.migas ol { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.migas li { display: flex; align-items: center; gap: 8px; color: rgba(255, 255, 255, .6); }
.migas li + li::before { content: "/"; color: rgba(255, 255, 255, .32); }
.migas a { color: rgba(255, 255, 255, .82); text-decoration: none; }
.migas a:hover { color: var(--lima); }
.migas [aria-current] { color: var(--lima); }

/* -------------------------------------------------------------------------
   20. Barra de filtros del catálogo
   ---------------------------------------------------------------------- */

.filtros {
	position: sticky; top: var(--alto-cabecera); z-index: 40;
	background: rgba(255, 255, 255, .95);
	backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--linea);
	padding-block: 1rem;
}
.filtros__cuerpo { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.filtros__buscar { position: relative; flex: 1 1 260px; min-width: 220px; }
.filtros__buscar .icono {
	position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
	color: var(--apagado); pointer-events: none;
}
.filtros__campo {
	width: 100%;
	padding: 13px 16px 13px 44px;
	border: 1.5px solid var(--linea);
	border-radius: 99px;
	font-family: var(--fuente-texto); font-size: .95rem;
	color: var(--tinta); background: var(--blanco);
	transition: border-color .2s var(--suave), box-shadow .2s var(--suave);
}
.filtros__campo:focus {
	outline: none;
	border-color: var(--verde-vivo);
	box-shadow: 0 0 0 4px rgba(34, 178, 76, .14);
}
.filtros__conteo { font-size: .875rem; color: var(--apagado); margin: 0; }
.filtros__limpiar {
	background: transparent; border: 0; cursor: pointer;
	font-family: var(--fuente-titulo); font-size: .85rem; font-weight: 700;
	color: var(--verde-tinta);
	text-decoration: underline; text-underline-offset: 3px;
}

.fichas { display: flex; gap: 8px; flex-wrap: wrap; }
.ficha {
	display: inline-flex; align-items: center; gap: 7px;
	padding: 9px 15px;
	background: var(--blanco);
	border: 1.5px solid var(--linea);
	border-radius: 99px;
	font-family: var(--fuente-titulo); font-size: .8125rem; font-weight: 600;
	color: var(--texto);
	white-space: nowrap;
	cursor: pointer; text-decoration: none;
	transition: border-color .2s var(--suave), background-color .2s var(--suave), color .2s var(--suave), transform .3s var(--muelle);
}
.ficha:hover { border-color: var(--verde-vivo); color: var(--verde-tinta); transform: translateY(-1px); }
.ficha.esta-activa { background: var(--tinta); border-color: var(--tinta); color: var(--lima); }
.ficha .icono { width: 15px; height: 15px; }
.ficha__conteo { opacity: .6; font-weight: 500; }

.filtros-cinta { overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.filtros-cinta::-webkit-scrollbar { display: none; }
.filtros-cinta .fichas { flex-wrap: nowrap; }

/* -------------------------------------------------------------------------
   21. Ficha de producto
   ---------------------------------------------------------------------- */

.ficha-producto {
	display: grid; grid-template-columns: 1fr 1fr;
	gap: clamp(2rem, 5vw, 4rem);
	align-items: start;
}
.ficha-producto__lamina {
	position: relative;
	border-radius: var(--radio-xg);
	overflow: hidden;
	background: var(--superficie);
	box-shadow: var(--sombra-2);
}
.ficha-producto__lamina img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.ficha-producto__marca {
	position: absolute; bottom: 16px; right: 16px;
	padding: 10px 16px; border-radius: 12px;
	background: rgba(255, 255, 255, .95);
	box-shadow: var(--sombra-1);
}
.ficha-producto__marca img { height: 26px; width: auto; aspect-ratio: auto; }

.ficha-producto__titulo { font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.4rem); margin-bottom: .4rem; }
.ficha-producto__presentacion { font-size: 1.1rem; color: var(--apagado); margin-bottom: 1.4rem; }
.ficha-producto__precio { margin-bottom: 1.6rem; }
.ficha-producto__precio .precio { font-size: 2rem; }

.datos-producto {
	list-style: none; margin: 0 0 1.8rem; padding: 0;
	border-top: 1px solid var(--linea);
}
.datos-producto li {
	display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
	padding: 12px 0; border-bottom: 1px solid var(--linea);
	font-size: .95rem;
}
.datos-producto span { color: var(--apagado); }
.datos-producto strong { font-family: var(--fuente-titulo); color: var(--tinta); text-align: right; }

.ficha-producto__acciones { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 1.6rem; }
.ficha-producto__acciones .cantidad__campo,
.ficha-producto__acciones .cantidad__boton { height: 50px; }
.ficha-producto__acciones .boton { padding-block: 17px; }

.aviso {
	display: flex; align-items: flex-start; gap: 12px;
	padding: 1rem 1.2rem;
	border-radius: var(--radio);
	background: var(--superficie);
	border-left: 3px solid var(--verde-vivo);
	font-size: .92rem; color: var(--apagado);
}
.aviso .icono { color: var(--verde-tinta); margin-top: 2px; }
.aviso--receta { background: #FFF8E6; border-left-color: #E0A800; }
.aviso--receta .icono { color: var(--ambar); }

/* -------------------------------------------------------------------------
   22. Carrito
   ---------------------------------------------------------------------- */

.carrito { display: grid; grid-template-columns: 1.6fr 1fr; gap: clamp(1.6rem, 4vw, 3rem); align-items: start; }

.carrito-tabla { width: 100%; border-collapse: collapse; }
.carrito-tabla caption { text-align: left; padding-bottom: 1rem; color: var(--apagado); font-size: .9rem; }
.carrito-tabla th {
	text-align: left; padding: 0 0 12px;
	font-family: var(--fuente-titulo); font-size: .75rem; font-weight: 700;
	letter-spacing: .1em; text-transform: uppercase;
	color: var(--apagado);
	border-bottom: 1px solid var(--linea);
}
.carrito-tabla td { padding: 16px 0; border-bottom: 1px solid var(--linea); vertical-align: middle; }
.carrito-tabla th:last-child, .carrito-tabla td:last-child { text-align: right; }
.carrito-tabla th:nth-child(2), .carrito-tabla td:nth-child(2) { text-align: center; }

.carrito-linea__nombre { font-family: var(--fuente-titulo); font-weight: 700; color: var(--tinta); display: block; text-decoration: none; }
.carrito-linea__nombre:hover { color: var(--verde-tinta); }
.carrito-linea__detalle { font-size: .85rem; color: var(--apagado); }
.carrito-linea__quitar {
	background: transparent; border: 0; cursor: pointer;
	color: var(--apagado); padding: 6px;
	transition: color .2s var(--suave);
}
.carrito-linea__quitar:hover { color: #B3261E; }

.carrito__resumen {
	position: sticky; top: calc(var(--alto-cabecera) + 20px);
	padding: 1.8rem;
	background: var(--superficie);
	border: 1px solid var(--linea);
	border-radius: var(--radio-g);
}
.carrito__resumen h2 { font-size: 1.2rem; }
.resumen-lista { list-style: none; margin: 0 0 1.4rem; padding: 0; }
.resumen-lista li {
	display: flex; justify-content: space-between; gap: 12px;
	padding: 10px 0; border-bottom: 1px solid var(--linea);
	font-size: .95rem;
}
.resumen-lista li:last-child { border-bottom: 0; }
.resumen-lista strong { font-family: var(--fuente-titulo); color: var(--tinta); }
.resumen-total {
	display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
	padding-top: 1rem; margin-bottom: 1.2rem;
	border-top: 2px solid var(--tinta);
}
.resumen-total span { font-family: var(--fuente-titulo); font-weight: 700; }
.resumen-total strong { font-family: var(--fuente-titulo); font-size: 1.6rem; color: var(--tinta); }

.carrito-vacio { text-align: center; padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.carrito-vacio .icono { width: 56px; height: 56px; margin: 0 auto 1.2rem; color: var(--apagado-claro); }

/* -------------------------------------------------------------------------
   23. Formularios
   ---------------------------------------------------------------------- */

.formulario { max-width: 100%; }
.formulario__rejilla { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.campo { display: flex; flex-direction: column; gap: 7px; margin: 0; }
.campo--ancho { grid-column: 1 / -1; }
.campo label {
	font-family: var(--fuente-titulo);
	font-size: .8125rem; font-weight: 600;
	color: var(--tinta);
}
.requerido { color: var(--verde-tinta); }
.campo input, .campo textarea, .campo select {
	width: 100%;
	padding: 14px 16px;
	font-family: var(--fuente-texto); font-size: 1rem;
	color: var(--tinta);
	background: var(--blanco);
	border: 1.5px solid var(--linea);
	border-radius: var(--radio);
	transition: border-color .2s var(--suave), box-shadow .2s var(--suave);
}
.campo textarea { resize: vertical; min-height: 110px; }
.campo input:focus, .campo textarea:focus, .campo select:focus {
	outline: none;
	border-color: var(--verde-vivo);
	box-shadow: 0 0 0 4px rgba(34, 178, 76, .14);
}
.campo input[aria-invalid="true"], .campo textarea[aria-invalid="true"] { border-color: #B3261E; }
.campo__ayuda { font-size: .82rem; color: var(--apagado); }
.campo__error { font-size: .82rem; color: #B3261E; font-weight: 600; }

.selector { position: relative; display: block; }
.selector::after {
	content: ""; position: absolute; right: 18px; top: 50%;
	width: 8px; height: 8px;
	border-right: 2px solid var(--apagado); border-bottom: 2px solid var(--apagado);
	transform: translateY(-70%) rotate(45deg);
	pointer-events: none;
}
.selector select { appearance: none; -webkit-appearance: none; padding-right: 44px; }

.campo--check label { font-family: var(--fuente-texto); font-weight: 400; font-size: .92rem; }
.check { display: flex; align-items: flex-start; gap: 11px; cursor: pointer; }
.check input { position: absolute; opacity: 0; width: 0; height: 0; }
.check__caja {
	flex: none; width: 22px; height: 22px; margin-top: 1px;
	border: 1.5px solid var(--linea); border-radius: 6px;
	background: var(--blanco);
	display: grid; place-items: center;
	transition: background-color .2s var(--suave), border-color .2s var(--suave);
}
.check__caja::after {
	content: ""; width: 10px; height: 6px;
	border-left: 2px solid var(--tinta); border-bottom: 2px solid var(--tinta);
	transform: rotate(-45deg) scale(0);
	transition: transform .25s var(--muelle);
}
.check input:checked + .check__caja { background: var(--lima); border-color: var(--lima); }
.check input:checked + .check__caja::after { transform: rotate(-45deg) scale(1); }
.check input:focus-visible + .check__caja { outline: 3px solid var(--verde-tinta); outline-offset: 2px; }
.check__texto { color: var(--apagado); }

.campo-trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.formulario__pie {
	display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
	margin-top: 1.6rem;
}
.formulario__nota {
	display: inline-flex; align-items: center; gap: 8px;
	font-size: .875rem; color: var(--apagado); margin: 0;
}
.formulario__nota .icono { color: var(--verde-tinta); }
.formulario__aviso { margin-top: 1rem; }
.formulario__aviso:empty { display: none; }
.formulario__aviso p {
	padding: 14px 18px; border-radius: var(--radio); margin: 0;
	font-size: .95rem;
}
.formulario__aviso .es-bien { background: #E6F4EA; color: #0A5C2E; border-left: 3px solid var(--verde-vivo); }
.formulario__aviso .es-mal { background: #FCE8E6; color: #8C1D18; border-left: 3px solid #B3261E; }
.boton--envio.esta-cargando { pointer-events: none; opacity: .7; }

/* -------------------------------------------------------------------------
   24. Entrada del blog
   ---------------------------------------------------------------------- */

.entrada__cabecera {
	position: relative;
	padding-block: clamp(3.4rem, 8vw, 6rem) clamp(2.6rem, 5vw, 4rem);
	background: var(--tinta);
	overflow: hidden;
}
.entrada__foto { position: absolute; inset: 0; }
.entrada__foto img { width: 100%; height: 100%; object-fit: cover; }
.entrada__velo {
	position: absolute; inset: 0;
	background: linear-gradient(98deg, rgba(12, 23, 16, .96) 0%, rgba(12, 23, 16, .86) 44%, rgba(12, 23, 16, .55) 100%);
}
.entrada__cuerpo { position: relative; z-index: 2; max-width: 50rem; }
.entrada__titulo {
	font-size: clamp(1.9rem, 1.1rem + 3vw, 3.2rem);
	color: var(--blanco); margin-bottom: .7rem;
	text-wrap: balance;
}
.entrada__meta {
	display: flex; flex-wrap: wrap; gap: 16px;
	font-size: .875rem; color: rgba(255, 255, 255, .68);
	margin: 0;
}

.entrada__lienzo {
	display: grid; grid-template-columns: minmax(0, 1fr) 320px;
	gap: clamp(2rem, 4vw, 3.4rem);
	padding-block: clamp(2.6rem, 6vw, 4.4rem);
	align-items: start;
}
.entrada__lado { position: sticky; top: calc(var(--alto-cabecera) + 20px); display: flex; flex-direction: column; gap: 1.2rem; }

.lado-tarjeta {
	padding: 1.6rem;
	background: var(--tinta);
	color: rgba(255, 255, 255, .8);
	border-radius: var(--radio-g);
	display: flex; flex-direction: column; gap: .8rem;
}
.lado-tarjeta__titulo { color: var(--blanco); font-size: 1.1rem; margin: 0; }
.lado-tarjeta p { font-size: .93rem; margin: 0 0 .4rem; }
.lado-tarjeta .boton { width: 100%; }
.lado-tarjeta--simple { background: var(--superficie); color: var(--texto); }
.lado-tarjeta--simple .lado-tarjeta__titulo { color: var(--tinta); }
.lado-lista { list-style: none; margin: 0; padding: 0; }
.lado-lista a {
	display: flex; align-items: center; gap: 9px;
	padding: 8px 0; font-size: .92rem;
	text-decoration: none;
	transition: color .2s var(--suave);
}
.lado-lista a:hover { color: var(--verde-tinta); }
.lado-lista .icono { color: var(--verde-vivo); }

.entrada__pie { padding-bottom: clamp(2.6rem, 6vw, 4rem); }
.entrada__saltos { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.salto {
	display: flex; flex-direction: column; gap: 5px;
	padding: 1.3rem 1.5rem;
	background: var(--superficie);
	border: 1px solid var(--linea);
	border-radius: var(--radio-g);
	text-decoration: none;
	transition: border-color .3s var(--suave), transform .4s var(--muelle);
}
.salto:hover { border-color: var(--verde-vivo); transform: translateY(-3px); }
.salto span {
	font-family: var(--fuente-titulo); font-size: .75rem; font-weight: 700;
	letter-spacing: .1em; text-transform: uppercase; color: var(--verde-tinta);
}
.salto strong { font-family: var(--fuente-titulo); color: var(--tinta); font-size: 1rem; line-height: 1.35; }
.salto--siguiente { text-align: right; }

/* -------------------------------------------------------------------------
   25. Prosa (contenido del editor)
   ---------------------------------------------------------------------- */

.prosa { font-size: 1.08rem; }
.prosa > * + * { margin-top: 1.3em; }
.prosa h2 { font-size: clamp(1.4rem, 1.1rem + 1.1vw, 1.9rem); margin-top: 2.2em; margin-bottom: .5em; }
.prosa h3 { font-size: clamp(1.15rem, 1rem + .7vw, 1.4rem); margin-top: 1.8em; margin-bottom: .4em; }
.prosa h2:first-child, .prosa h3:first-child { margin-top: 0; }
.prosa ul, .prosa ol { padding-left: 1.3em; }
.prosa li + li { margin-top: .5em; }
.prosa li::marker { color: var(--verde-vivo); }
.prosa a { color: var(--verde-tinta); font-weight: 600; }
.prosa img { border-radius: var(--radio-g); }
.prosa blockquote {
	margin: 2em 0; padding: 1.4rem 1.6rem;
	background: var(--superficie);
	border-left: 4px solid var(--lima);
	border-radius: 0 var(--radio) var(--radio) 0;
	font-size: 1.1rem;
}
.prosa blockquote p:last-child { margin-bottom: 0; }
.prosa table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.prosa th, .prosa td { padding: 11px 14px; border-bottom: 1px solid var(--linea); text-align: left; }
.prosa thead th { background: var(--superficie); font-family: var(--fuente-titulo); }
.prosa figure { margin: 2em 0; }
.prosa figcaption { font-size: .85rem; color: var(--apagado); margin-top: .6em; }
.prosa hr { border: 0; border-top: 1px solid var(--linea); margin: 2.4em 0; }

/* -------------------------------------------------------------------------
   26. Piezas sueltas
   ---------------------------------------------------------------------- */

.vacio { text-align: center; padding-block: clamp(2rem, 5vw, 3.6rem); }
.vacio__icono { width: 52px; height: 52px; margin: 0 auto 1.2rem; color: var(--apagado-claro); }
.vacio h2 { font-size: 1.4rem; }
.vacio__acciones { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 1.6rem; }

.buscador { display: flex; gap: 10px; max-width: 520px; margin: 1.4rem auto 0; position: relative; }
.buscador__lupa { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--apagado); }
.buscador__campo {
	flex: 1; padding: 14px 16px 14px 46px;
	border: 1.5px solid var(--linea); border-radius: 99px;
	font-family: var(--fuente-texto); font-size: .95rem;
}
.buscador__campo:focus { outline: none; border-color: var(--verde-vivo); box-shadow: 0 0 0 4px rgba(34, 178, 76, .14); }
.buscador__boton {
	padding: 14px 24px; border: 0; border-radius: 99px; cursor: pointer;
	background: var(--tinta); color: var(--blanco);
	font-family: var(--fuente-titulo); font-weight: 700;
}

.rejilla-enlaces {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 10px; margin-top: 2.4rem;
}
.enlace-simple {
	display: flex; align-items: center; gap: 10px;
	padding: 14px 16px;
	background: var(--superficie);
	border-radius: var(--radio);
	font-size: .92rem; font-weight: 600;
	text-decoration: none;
	transition: background-color .2s var(--suave), color .2s var(--suave);
}
.enlace-simple:hover { background: var(--superficie-2); color: var(--verde-tinta); }
.enlace-simple .icono { color: var(--verde-vivo); }

.paginacion { margin-top: clamp(2.4rem, 5vw, 3.6rem); }
.paginacion .nav-links { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.paginacion .page-numbers {
	display: grid; place-items: center;
	min-width: 44px; height: 44px; padding: 0 14px;
	border: 1.5px solid var(--linea); border-radius: 99px;
	font-family: var(--fuente-titulo); font-weight: 700; font-size: .9rem;
	text-decoration: none;
	transition: border-color .2s var(--suave), background-color .2s var(--suave), color .2s var(--suave);
}
.paginacion .page-numbers:hover { border-color: var(--verde-vivo); color: var(--verde-tinta); }
.paginacion .current { background: var(--tinta); border-color: var(--tinta); color: var(--lima); }

.widget { margin-bottom: 1.2rem; }
.widget__titulo { font-size: 1rem; }
.widget ul { list-style: none; margin: 0; padding: 0; }
.widget li { padding: 7px 0; border-bottom: 1px solid var(--linea); font-size: .92rem; }

/* Aviso flotante (se agregó al pedido, etc.) */
.brindis {
	position: fixed; left: 50%; bottom: 26px; z-index: 200;
	transform: translate(-50%, 20px);
	display: flex; align-items: center; gap: 10px;
	padding: 13px 22px;
	background: var(--tinta); color: var(--blanco);
	border-radius: 99px;
	font-family: var(--fuente-titulo); font-size: .92rem; font-weight: 600;
	box-shadow: var(--sombra-3);
	opacity: 0; pointer-events: none;
	transition: opacity .3s var(--suave), transform .45s var(--muelle);
}
.brindis.esta-visible { opacity: 1; transform: translate(-50%, 0); }
.brindis .icono { color: var(--lima); }

.flotante-wa {
	position: fixed; right: 20px; bottom: 20px; z-index: 95;
	display: inline-flex; align-items: center; gap: 10px;
	padding: 13px 20px;
	background: #25D366; color: #052E16;
	border-radius: 99px;
	font-family: var(--fuente-titulo); font-size: .9rem; font-weight: 700;
	text-decoration: none;
	box-shadow: 0 10px 30px rgba(37, 211, 102, .35);
	transition: transform .35s var(--muelle), box-shadow .3s var(--suave);
}
.flotante-wa:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(37, 211, 102, .45); }

.subir {
	position: fixed; right: 20px; bottom: 84px; z-index: 94;
	width: 46px; height: 46px;
	display: grid; place-items: center;
	background: var(--tinta); color: var(--blanco);
	border: 0; border-radius: 50%; cursor: pointer;
	opacity: 0; visibility: hidden; transform: translateY(10px);
	transition: opacity .3s var(--suave), transform .4s var(--muelle), visibility .3s, background-color .2s var(--suave);
}
.subir.esta-visible { opacity: 1; visibility: visible; transform: none; }
.subir:hover { background: var(--verde-tinta); }
.subir svg { width: 20px; height: 20px; }

/* -------------------------------------------------------------------------
   27. Pie
   ---------------------------------------------------------------------- */

.pie {
	position: relative;
	background: var(--tinta);
	color: rgba(255, 255, 255, .7);
	overflow: hidden;
}
.pie__brillo {
	position: absolute; top: -40%; left: 50%; width: 900px; height: 600px;
	transform: translateX(-50%);
	background: radial-gradient(ellipse at center, rgba(34, 178, 76, .18), transparent 70%);
	pointer-events: none;
}
.pie__cuerpo {
	position: relative; z-index: 2;
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
	gap: clamp(1.8rem, 3vw, 3rem);
	padding-block: clamp(3rem, 6vw, 4.6rem) clamp(2rem, 4vw, 3rem);
}
.pie__logo { height: 58px; width: auto; margin-bottom: 1.2rem; }
.pie__lema { font-size: .93rem; margin-bottom: 1.3rem; }
.pie__sellos { list-style: none; margin: 0 0 1.3rem; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.pie__sellos li { display: flex; align-items: center; gap: 9px; font-size: .875rem; }
.pie__sellos .icono { color: var(--lima); }
.pie__red {
	display: inline-flex; align-items: center; gap: 9px;
	padding: 10px 18px;
	border: 1px solid rgba(255, 255, 255, .2); border-radius: 99px;
	font-size: .875rem; font-weight: 600; text-decoration: none;
	transition: border-color .2s var(--suave), color .2s var(--suave);
}
.pie__red:hover { border-color: var(--lima); color: var(--lima); }

.pie__titulo {
	color: var(--blanco); font-size: .95rem;
	letter-spacing: .06em; text-transform: uppercase;
	margin-bottom: 1.1rem;
}
.pie__lista { list-style: none; margin: 0; padding: 0; }
.pie__lista li { margin-bottom: 9px; }
.pie__lista a { font-size: .9rem; text-decoration: none; transition: color .2s var(--suave); }
.pie__lista a:hover { color: var(--lima); }

.pie__contacto { list-style: none; margin: 0 0 1.4rem; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.pie__contacto li { display: flex; align-items: flex-start; gap: 11px; font-size: .9rem; }
.pie__contacto .icono { color: var(--verde); margin-top: 2px; }
.pie__contacto a { text-decoration: none; }
.pie__contacto a:hover { color: var(--lima); }
.pie__contacto address { font-style: normal; }

.pie__zonas {
	position: relative; z-index: 2;
	border-top: 1px solid var(--linea-oscura);
	padding-block: 1.2rem;
	font-size: .82rem; color: rgba(255, 255, 255, .55);
}
.pie__zonas p { margin: 0; }
.pie__zonas strong { color: rgba(255, 255, 255, .8); }

.pie__legal {
	position: relative; z-index: 2;
	border-top: 1px solid var(--linea-oscura);
	padding-block: 1.2rem;
	font-size: .82rem;
}
.pie__legal-cuerpo { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.pie__legal p { margin: 0; }
.pie__legal a { color: var(--lima); text-decoration: none; }

/* -------------------------------------------------------------------------
   28. Adaptación a pantallas chicas
   ---------------------------------------------------------------------- */

@media (max-width: 1120px) {
	.pie__cuerpo { grid-template-columns: 1fr 1fr; }
	.entrada__lienzo { grid-template-columns: 1fr; }
	.entrada__lado { position: static; }
}

@media (max-width: 980px) {
	.barra-superior__lema { display: none; }
	.barra-superior__cuerpo { justify-content: center; }

	.hamburguesa { display: grid; }
	.cabecera__acciones .boton { display: none; }
	.carrito-boton__texto { display: none; }
	.carrito-boton { padding: 11px; }

	.navegacion {
		position: fixed; top: 0; right: 0; bottom: 0; z-index: 95;
		width: min(360px, 88vw);
		background: var(--blanco);
		padding: 84px 24px 24px;
		overflow-y: auto;
		transform: translateX(100%);
		transition: transform .45s var(--muelle);
		box-shadow: -20px 0 60px rgba(12, 23, 16, .2);
	}
	.navegacion.esta-abierta { transform: none; }
	.menu { flex-direction: column; align-items: stretch; gap: 2px; }
	.menu > .menu-item > a { padding: 14px 16px; border-radius: var(--radio); font-size: 1.05rem; }

	.menu-item-has-children { display: flex; flex-wrap: wrap; align-items: center; }
	.menu-item-has-children > a { flex: 1; }
	.menu__abrir {
		display: grid; place-items: center;
		width: 42px; height: 42px;
		background: var(--superficie); border: 0; border-radius: 10px; cursor: pointer;
	}
	.menu__abrir span {
		display: block; width: 10px; height: 10px;
		border-right: 2px solid var(--tinta); border-bottom: 2px solid var(--tinta);
		transform: translateY(-2px) rotate(45deg);
		transition: transform .3s var(--muelle);
	}
	.menu-item-has-children.esta-abierto .menu__abrir span { transform: translateY(2px) rotate(-135deg); }
	.sub-menu {
		position: static; width: 100%;
		opacity: 1; visibility: visible; transform: none;
		box-shadow: none; border: 0;
		display: none; padding: 4px 0 10px;
		columns: 1; min-width: 0;
	}
	.sub-menu--categorias { min-width: 0; }
	.menu-item-has-children.esta-abierto > .sub-menu { display: block; }

	.bloque-cifras__cuerpo { grid-template-columns: 1fr; }
	.ficha-producto { grid-template-columns: 1fr; }
	.carrito { grid-template-columns: 1fr; }
	.carrito__resumen { position: static; }
	.cta__cuerpo { grid-template-columns: 1fr; }
	.entrada__saltos { grid-template-columns: 1fr; }
	.salto--siguiente { text-align: left; }
}

@media (max-width: 760px) {
	:root { --alto-cabecera: 70px; }
	.marca__logo, .marca .custom-logo { height: 44px; }

	.hero { min-height: auto; }
	.hero__cuerpo { padding-block: 3.4rem 13rem; }
	.hero__panel { transform: translateX(14%) scale(.94); filter: blur(8px); }
	.hero__degradado {
		background:
			linear-gradient(180deg, rgba(12, 23, 16, .82) 0%, rgba(12, 23, 16, .62) 40%, rgba(12, 23, 16, .95) 100%);
	}
	.hero__botones .boton { flex: 1 1 auto; }
	.hero__dato { flex-wrap: wrap; }
	.hero__dato strong { font-size: 1.6rem; }
	.hero__control-cuerpo { flex-wrap: wrap; }
	.hero__flecha, .hero__pausa { width: 42px; height: 42px; }
	.hero__baja { display: none; }

	.formulario__rejilla { grid-template-columns: 1fr; }
	.cifras { grid-template-columns: 1fr; }
	.pie__cuerpo { grid-template-columns: 1fr; }
	.filtros { position: static; }
	.carrito-tabla thead { display: none; }
	.carrito-tabla tr { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; padding: 16px 0; border-bottom: 1px solid var(--linea); }
	.carrito-tabla td { border: 0; padding: 0; }
	.carrito-tabla td:nth-child(1) { grid-column: 1 / -1; }
	.carrito-tabla td:nth-child(2) { text-align: left; }
	.flotante-wa span { display: none; }
	.flotante-wa { padding: 14px; }
}

/* -------------------------------------------------------------------------
   29. Preferencias del usuario
   ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
	[data-revelar] { opacity: 1; transform: none; }
	.pal > i { transform: none; }
	.hero__panel { filter: none; }
	.hero__polvo { display: none; }
	.marquesina__pista { animation: none; }
}

@media print {
	.cabecera, .barra-superior, .pie, .flotante-wa, .subir, .hero__control,
	.cta, .filtros, .brindis, .navegacion { display: none !important; }
	.hero { min-height: auto; }
	body { color: #000; }
	a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; }
}