/* GEARVIT — diseño propio sobre el motor TRIDENTE de ZAPBUILD.
   Base neutra (blanco/negro + grises), el verde de marca SOLO como acento puntual
   (botón principal, precio, un detalle) — nunca como fondo de página o de ícono.
   Tipografía: Fredoka en títulos, Montserrat en texto. Claro y oscuro. */

:root{
  /* Gotcha repetido (4ta vez): el <meta name="color-scheme" content="dark light"> del <head>
     hace que los controles NATIVOS (select, input, checkbox...) sigan el tema del SISTEMA
     OPERATIVO, no el data-tema que pone el botón de luna. color-scheme en :root es lo que de
     verdad manda para esos controles — se corrige acá, una sola vez, para todo el sitio. */
  color-scheme:light;
  --verde:#2F5B46;
  --verde-fuerte:#1F4433;
  --verde-claro:#A7C4A7;
  --verde-claro-fondo:#EEF4EE;
  --turquesa:#7ED6C0;
  --gris:#71717A;
  --tinta:#18181B;
  --blanco:#FFFFFF;
  --superficie:#F4F4F5;
  --linea:#E5E5E5;
  --barra-fondo:#111113;
  --radio-card:16px;
  --radio-pildora:10px;
  --radio-chip:9px;
  --sombra: 0 1px 3px rgba(0,0,0,.06);
  --sombra-alta: 0 10px 28px rgba(0,0,0,.12);
  --fuente-titulo:"Fredoka",system-ui,sans-serif;
  --fuente-texto:"Montserrat",system-ui,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{
  margin:0;
  overflow-x:clip;
  background:var(--blanco);
  color:var(--tinta);
  font-family:var(--fuente-texto);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--fuente-titulo);font-weight:700;margin:0 0 .5em;color:var(--tinta);line-height:1.15}
h1{font-size:clamp(2rem,4.4vw,3.1rem)}
h2{font-size:clamp(1.5rem,2.8vw,2.1rem)}
h3{font-size:1.15rem}
p{margin:0 0 1em}
ul,ol{margin:0;padding:0;list-style:none}
/* el atributo `hidden` tiene que ganarle a CUALQUIER display:flex/grid/inline-flex de más abajo
   (.mas, .co-grid, .boton, .carrito-cuenta, .arbol-sub, .tarjeta…) o el elemento "oculto" sigue
   ocupando su lugar — es el mismo bug que dejaba «Cargar más» visible con el catálogo completo. */
[hidden]{display:none!important}
button{font:inherit;cursor:pointer;color:inherit}
input,select,textarea{font:inherit;color:inherit}
input::placeholder,textarea::placeholder{color:var(--gris);opacity:1}
.solo-lector{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* foco visible siempre, por encima del color */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--turquesa);
  outline-offset:2px;
  border-radius:6px;
}

.envoltura{max-width:1180px;margin:0 auto;padding:0 20px}
.envoltura-angosta{max-width:820px}
.pared{display:block}
.seccion{padding:64px 0}
.seccion.fondo-claro{background:#fff}
.intro{color:var(--gris);max-width:62ch;font-size:1.05rem}
.centrado{justify-content:center}
.acciones{display:flex;flex-wrap:wrap;gap:12px;margin:22px 0}
.acciones.centrado{justify-content:center}

/* reveal-on-scroll (sitio.js agrega .en-vista) */
.revelar{opacity:1;transform:none}
.revelar:not(.en-vista){opacity:0;transform:translateY(14px)}
.revelar.en-vista,.revelar{transition:opacity .5s ease, transform .5s ease}
@media (prefers-reduced-motion:reduce){ .revelar{opacity:1!important;transform:none!important} }

/* ---------- Botones: píldora, borde fino o sin borde ---------- */
.boton{
  display:inline-flex;align-items:center;gap:8px;
  padding:13px 26px;border-radius:var(--radio-pildora);
  background:var(--verde);color:#fff;
  font-weight:600;font-size:.98rem;border:1px solid var(--verde);
  transition:background .15s ease, color .15s ease, border-color .15s ease, transform .1s ease;
}
.boton:hover{background:var(--verde-fuerte);border-color:var(--verde-fuerte)}
.boton:active{transform:scale(.98)}
.boton.papel{background:var(--superficie);color:var(--tinta);border:1px solid var(--linea)}
.boton.papel:hover{background:var(--linea)}
.boton.chico{padding:9px 18px;font-size:.88rem}
.boton svg{width:18px;height:18px;flex:none}
.enlace-subrayado{font-weight:600;color:var(--verde-fuerte);text-decoration:underline;text-underline-offset:4px}

/* ---------- Encabezado: flotante de verdad, despegado de los bordes ---------- */
html.sin-scroll,html.sin-scroll body{overflow:hidden}
.encabezado{position:sticky;top:12px;z-index:40;width:calc(100% - 24px);max-width:1180px;margin:0 auto;border-radius:14px;background:var(--blanco);border:1px solid var(--linea);box-shadow:var(--sombra);transition:transform .2s ease, box-shadow .2s ease}
.encabezado.solida{box-shadow:var(--sombra-alta)}
/* Seven: el encabezado NUNCA se esconde al bajar — queda pegado arriba, con sombra suave
   al despegarse (sitio.js sigue alternando la clase "oculto" para la barra inferior
   excluyente; acá se anula el transform para que el header se quede quieto). */
.encabezado.oculto{transform:none}
.encabezado .envoltura{display:flex;align-items:center;gap:24px;height:64px;max-width:none;padding:0 18px}
@media (max-width:759px){ .encabezado{top:8px;width:calc(100% - 16px)} }
.marca{display:flex;align-items:center}
.marca-img{height:30px;width:auto;display:block}
.marca-img-oscuro{display:none}
html[data-tema="oscuro"] .marca-img-claro{display:none}
html[data-tema="oscuro"] .marca-img-oscuro{display:block}
.menu{display:none;align-items:center;gap:22px;margin-left:auto;font-weight:600;font-size:.95rem}
.menu a{color:var(--tinta);padding:6px 2px;position:relative}
.menu a[aria-current="page"]{color:var(--verde-fuerte)}
.menu a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;background:var(--turquesa);border-radius:2px}
.cab-acciones{display:flex;align-items:center;gap:10px;margin-left:auto}
.carrito-boton{position:relative;display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:12px;border:1px solid var(--linea);background:var(--superficie);color:var(--tinta)}
.carrito-boton svg{width:20px;height:20px}
.carrito-cuenta{position:absolute;top:-4px;right:-4px;background:var(--verde);color:#fff;font-size:.68rem;font-weight:700;min-width:18px;height:18px;border-radius:999px;display:flex;align-items:center;justify-content:center;padding:0 4px}
.menu-boton{width:42px;height:42px;padding:0;display:flex;align-items:center;justify-content:center;border:1px solid var(--linea);background:var(--superficie);color:var(--tinta)}

/* desplegable de categorías en el nav de PC */
.menu-desplegable{position:relative}
.desplegable{position:absolute;top:calc(100% + 14px);left:0;min-width:220px;background:var(--superficie);border:1px solid var(--linea);border-radius:14px;box-shadow:var(--sombra-alta);padding:8px;display:flex;flex-direction:column;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .15s ease, transform .15s ease}
.menu-desplegable.abierto .desplegable{opacity:1;visibility:visible;transform:translateY(0)}
.desplegable a{padding:9px 12px;border-radius:10px;font-weight:500}
.desplegable a:hover{background:var(--verde-claro-fondo)}
.desplegable-flecha{width:14px;height:14px;margin-left:4px;vertical-align:-2px}

@media (min-width:900px){
  .menu{display:flex}
  .menu-boton{display:none}
}

/* ---------- Cajón de menú (celular) ---------- */
.velo-cajon,.velo-carrito,.velo-filtros{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:49;opacity:0;visibility:hidden;transition:opacity .2s ease}
.velo-cajon.abierto,.velo-carrito.abierto,.velo-filtros.abierto{opacity:1;visibility:visible}
.cajon{position:fixed;top:0;right:0;height:100%;width:min(360px,88vw);background:var(--superficie);z-index:50;box-shadow:var(--sombra-alta);transform:translateX(100%);visibility:hidden;transition:transform .25s ease,visibility 0s linear .25s;overflow-y:auto;padding:18px 18px 100px}
.cajon.abierto{transform:translateX(0);visibility:visible;transition:transform .25s ease,visibility 0s linear}
.cajon-cab{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.cajon-marca{font-family:var(--fuente-titulo);font-weight:700;color:var(--tinta)}
.cajon-cerrar{background:none;border:none;color:var(--tinta);padding:6px}
.cajon-busca{display:flex;gap:8px;margin-bottom:18px}
.cajon-busca input{flex:1;border:1px solid var(--linea);border-radius:10px;padding:10px 14px;background:var(--blanco);color:var(--tinta)}
.cajon-nav{display:flex;flex-direction:column;gap:2px;margin-bottom:10px}
.cajon-nav a{padding:10px 8px;border-radius:10px;font-weight:600}
.cajon-nav a:hover{background:var(--verde-claro-fondo)}
.cajon-titulo{font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--gris);margin:14px 0 4px}
.cajon-pie{margin-top:22px;padding-top:16px;border-top:1px solid var(--linea);display:flex;flex-direction:column;gap:10px}
.cajon-pie address{font-style:normal;color:var(--gris);font-size:.9rem}

@media (min-width:900px){ .cajon,.velo-cajon{display:none} }

/* ---------- Carrito lateral ---------- */
.carrito{position:fixed;top:0;right:0;height:100%;width:min(420px,92vw);background:var(--superficie);z-index:50;box-shadow:var(--sombra-alta);transform:translateX(100%);visibility:hidden;transition:transform .25s ease,visibility 0s linear .25s;display:flex;flex-direction:column}
.carrito.abierto{transform:translateX(0);visibility:visible;transition:transform .25s ease,visibility 0s linear}
.carrito-cab{display:flex;justify-content:space-between;align-items:center;padding:18px 20px;border-bottom:1px solid var(--linea)}
.carrito-cuerpo{flex:1;overflow-y:auto;padding:12px 20px}
.carrito-pie{padding:16px 20px;border-top:1px solid var(--linea)}
.cr-vacio{text-align:center;padding:40px 10px;color:var(--gris)}
.cr-lista{display:flex;flex-direction:column;gap:14px}
.cr-fila{display:flex;gap:12px;align-items:flex-start}
.cr-fila.nuevo{animation:resalte 1.4s ease}
@keyframes resalte{0%{background:var(--verde-claro-fondo)}100%{background:transparent}}
.cr-foto{width:60px;height:60px;border-radius:12px;overflow:hidden;background:var(--blanco);flex:none;display:flex}
.cr-foto img{object-fit:contain;padding:8%}
.cr-foto img{width:100%;height:100%;object-fit:cover}
.cr-info{flex:1;min-width:0}
.cr-nombre{font-weight:600;margin:0}
.cr-variante{font-size:.85rem;color:var(--gris);margin:2px 0}
.cr-precio{font-weight:700;color:var(--verde-fuerte)}
.cr-precio.confirmar{color:var(--gris);font-weight:500}
.cr-sub{margin-left:8px;color:var(--gris);font-size:.85rem}
.cr-controles{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.cr-cantidad{display:flex;align-items:center;gap:8px;border:1px solid var(--linea);border-radius:10px;padding:4px 10px}
.cr-cantidad button{background:none;border:none;font-size:1.1rem;color:var(--tinta);line-height:1;width:20px}
.cr-cantidad button:disabled{opacity:.35}
.cr-quitar{background:none;border:none;color:var(--gris);font-size:.8rem;text-decoration:underline}
.cr-total{display:flex;justify-content:space-between;font-weight:700;margin-bottom:8px}
.cr-nota{color:var(--gris);font-size:.85rem}
.carrito .boton{width:100%;justify-content:center;margin-top:8px}

/* ---------- Hero: card verde oscuro con radio, estilo "promocionador" ---------- */
.hero{padding:28px 0 56px}
.hero-card{background:linear-gradient(165deg,#1b4435,var(--hero-verde,#163a2d));border-radius:28px;overflow:hidden;color:#fff;position:relative}
.hero-grid{display:grid}
.hero-copy{padding:clamp(28px,5vw,56px);display:flex;flex-direction:column;justify-content:center}
.hero-pildora{display:inline-flex;align-self:flex-start;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);color:#fff;padding:6px 14px;border-radius:10px;font-size:.78rem;font-weight:600;margin-bottom:18px}
.hero h1{color:#fff;margin-bottom:.3em;font-size:clamp(2.1rem,5vw,3.4rem);letter-spacing:-.01em}
.hero h1 > span:not(.pal){color:var(--turquesa)}
.hero-bajada{font-size:1.05rem;color:rgba(255,255,255,.78);max-width:46ch}
.hero-botones{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.boton.contorno-claro{background:#fff;color:var(--verde-fuerte);border:none}
.boton.contorno-claro:hover{background:#EDEDED}
.hero-panel{position:relative;background:var(--superficie);min-height:260px;padding:28px;display:flex;align-items:center;justify-content:center}
.hero-fotos-grupo{display:flex;gap:16px;flex-wrap:nowrap;justify-content:center;align-items:center;width:100%;max-width:640px}
.hero-fotos-grupo > .tarjeta,.hero-fotos-grupo > .hoja.flash.tarjeta{width:clamp(110px,30%,200px);flex:none;padding:10px;margin:0;box-shadow:none;border:1px solid var(--linea);background:var(--superficie)}
.hero-fotos-grupo .arte{margin:0;aspect-ratio:1/1}
.hero-fotos-grupo .nombre,.hero-fotos-grupo .precio,.hero-fotos-grupo .agregar,.hero-fotos-grupo .estandarte{display:none}
.hero-fotos-grupo > [hidden]{display:none !important}
.hero-fotos-grupo > .hf-2{margin-top:36px}
.hero-fotos-grupo > .hf-3{margin-top:-18px}
@media (max-width:360px){
  .hero-fotos-grupo{gap:8px}
  .hero-fotos-grupo > .tarjeta,.hero-fotos-grupo > .hoja.flash.tarjeta{width:clamp(60px,27%,200px);padding:6px}
}
.sticker-lima{position:absolute;right:20px;bottom:20px;width:108px;height:108px;border-radius:50%;background:#E7EFAD;color:var(--verde-fuerte);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;font-family:var(--fuente-titulo);font-weight:700;font-size:.82rem;line-height:1.15;transform:rotate(8deg);box-shadow:var(--sombra-alta)}
.sticker-lima small{display:block;font:700 .55rem var(--fuente-texto);letter-spacing:.08em;text-transform:uppercase;margin-top:4px;opacity:.75}

.mini-beneficios{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:28px}
.mb{padding:4px 6px}
.mb-icono{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:12px;background:var(--superficie);color:var(--gris);margin-bottom:10px}
.mb-icono svg{width:22px;height:22px}
.mb h3{font-size:1rem;margin-bottom:4px}
.mb p{color:var(--gris);font-size:.86rem;margin:0}

@media (min-width:860px){
  .hero-grid{grid-template-columns:1.05fr .95fr}
  .hero-panel{min-height:auto}
  .mini-beneficios{grid-template-columns:repeat(4,1fr)}
}

/* ---------- Categorías: estilo GPT, numeradas, sin fotos de stock ---------- */
.kicker{text-transform:uppercase;letter-spacing:.08em;font-size:.78rem;font-weight:700;color:var(--gris);margin-bottom:6px}
.grilla-categorias{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:24px}
.cat-gpt{position:relative;border:1px solid var(--linea);border-radius:20px;padding:20px;min-height:200px;display:flex;flex-direction:column;justify-content:space-between;color:var(--tinta);transition:transform .15s ease-out}
.cat-gpt:hover{transform:translateY(-3px)}
.cat-gpt.cat-a,.cat-gpt.cat-b{background:var(--superficie)}
.cat-num{font-size:.68rem;letter-spacing:.1em;font-weight:700;opacity:.7}
.cat-gpt h3{font-size:1.2rem;line-height:1.15;margin:0 0 6px;max-width:14ch}
.cat-gpt p{font-size:.8rem;color:var(--gris);margin:0}
.round-arrow{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:#fff;margin-top:14px}
.round-arrow svg{width:16px;height:16px}

@media (min-width:700px){ .grilla-categorias{grid-template-columns:repeat(3,1fr)} }
@media (min-width:1000px){ .grilla-categorias{grid-template-columns:repeat(4,1fr)} .cat-gpt h3{max-width:none} }

/* ---------- Tarjetas de producto (catálogo, recién llegados, relacionados) ---------- */
.muro{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.chinche{display:none}
.hoja.flash.tarjeta,.tarjeta{
  background:var(--superficie);border:1px solid var(--linea);border-radius:var(--radio-card);
  padding:14px;display:flex;flex-direction:column;cursor:pointer;min-width:0;
  container-type:inline-size;container-name:tarjeta;
  transition:box-shadow .15s ease, transform .15s ease;
}
.hoja.flash.tarjeta:hover,.tarjeta:hover{box-shadow:var(--sombra-alta)}
.tarjeta.aviso{align-items:flex-start;gap:10px;grid-column:1/-1;cursor:default}
.tarjeta .arte{aspect-ratio:1/1;border-radius:12px;overflow:hidden;background:var(--blanco);margin-bottom:12px;display:flex}
.tarjeta .arte img{width:100%;height:100%;object-fit:contain;padding:10%;transition:transform .35s ease}
.hoja.flash.tarjeta:hover .arte img,.tarjeta:hover .arte img{transform:scale(1.05)}
.tarjeta .arte img.vacio{opacity:.4}
.nombre{font-family:var(--fuente-titulo);font-size:1.05rem;font-weight:700;margin:0 0 2px;line-height:1.25}
.enlace-tarjeta{color:var(--tinta)}
.bajada-tarjeta{color:var(--gris);font-size:.8rem;margin:0 0 10px}
.tarjeta-pie{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;min-width:0}
.precio{font-weight:700;font-size:1.05rem;color:var(--tinta);margin:0;min-width:0;white-space:nowrap;flex-shrink:0}
.precio .antes{font-weight:400;font-size:.82rem;color:var(--gris);margin-right:6px}
.precio.consultar{color:var(--gris);font-weight:500;font-size:.85rem}
/* El ancho que importa es el de la CARD, no el de la pantalla: a 4 columnas en escritorio cada
   card mide ~220px, la misma estrechez que a 320px de celular en 2 columnas. Con container
   queries el botón decide según su propio contenedor (.tarjeta), no según el viewport — así
   nunca tapa ni corta el precio, sea cual sea la cantidad de columnas. Por defecto (sin soporte
   de @container) el botón queda en ícono, el estado que nunca desborda. */
.tarjeta-pie .agregar{flex:none;width:34px;height:34px;padding:0;justify-content:center;gap:0}
.tarjeta-pie .agregar-texto{display:none}
/* 240px de card: lo que mide "Desde $22.000" + ícono + "Elegir" lado a lado sin tocarse (medido
   con el markup real), + margen. El tope de .muro en 3 columnas (no 4) deja la card justo por
   encima de esto en escritorio — con 4 columnas se quedaba corta y el botón volvía a ícono. */
@container tarjeta (min-width:240px){
  .tarjeta-pie .agregar{width:auto;height:auto;padding:9px 16px;gap:8px}
  .tarjeta-pie .agregar-texto{display:inline}
}
@container tarjeta (max-width:150px){
  .precio{font-size:.92rem}
  .precio .antes{font-size:.74rem}
  .tarjeta-pie{gap:6px;flex-wrap:wrap} /* a 320px "Desde $22.000" + botón no caben lado a lado: el botón baja */
}
.estandarte{grid-column:1/-1;margin:18px 0 2px}
.estandarte:first-child{margin-top:0}
.estandarte-cinta{display:flex;align-items:baseline;gap:10px;border-bottom:1px solid var(--linea);padding-bottom:8px}
.estandarte-nombre{font-family:var(--fuente-titulo);font-size:1.15rem;color:var(--tinta)}
.estandarte-cuenta{font-size:.82rem;color:var(--gris);font-weight:500}

/* Tope en 3 columnas (no 4): con 4 la card nunca supera los ~260px que el @container de
   .tarjeta-pie necesita para mostrar el botón con texto — quedaba en ícono siempre en
   escritorio. A 3 columnas la card es lo bastante ancha para "Agregar"/"Elegir" junto al precio,
   como la card de referencia de Salomon. */
@media (min-width:620px){ .muro{grid-template-columns:repeat(3,minmax(0,1fr))} }

/* ---------- Filosofía ---------- */
.filosofia-grid{display:grid;gap:30px;align-items:center}
.mascota-chica-caja{position:relative;display:flex;justify-content:center;align-items:center}
.mascota-chica-caja .blob{position:absolute;width:260px;height:260px;color:var(--turquesa);opacity:.45;z-index:0}
.blob path{fill:currentColor}
.filosofia .mascota-chica{position:relative;z-index:1;justify-self:center;width:180px}
.lista-check{display:flex;flex-direction:column;gap:8px;margin:16px 0}
.lista-check li{padding-left:26px;position:relative;color:var(--tinta)}
.lista-check li::before{content:"✓";position:absolute;left:0;color:var(--verde);font-weight:700}
@media (min-width:760px){ .filosofia-grid{grid-template-columns:200px 1fr} .filosofia .mascota-chica{width:100%} }

/* ---------- Cierre / contacto en portada: card verde, no banda de fondo ---------- */
#cierre{padding:20px 0 64px}
.cierre-card{background:var(--verde-fuerte);color:#fff;border-radius:28px;padding:40px 32px}
.cierre-card h2{color:#fff}
.cierre-card p{color:#D7E6DC}
.cierre-grid{display:grid;gap:26px}
.tarjeta-seguinos{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:var(--radio-card);padding:22px}
.eyebrow{text-transform:uppercase;letter-spacing:.08em;font-size:.78rem;color:var(--turquesa);margin-bottom:6px}
.seguinos-handle{font-family:var(--fuente-titulo);font-size:1.3rem;font-weight:700}
.seguinos-nota{color:#D7E6DC;font-size:.9rem}
@media (min-width:800px){ .cierre-grid{grid-template-columns:1.2fr .8fr} }

/* ---------- Pie de página (estilo GPT: marca, columnas, fila legal) ---------- */
.pie-sitio{background:var(--verde-claro-fondo);border-top:1px solid var(--linea);padding:48px 0 100px}
.pie-grid{display:grid;gap:30px}
.pie-marca .marca-pie{display:flex;align-items:center;gap:10px;font-family:var(--fuente-texto);color:var(--gris);margin-bottom:12px}
.marca-pie-img{height:28px;width:auto;display:block}
.marca-pie-img-oscuro{display:none}
html[data-tema="oscuro"] .marca-pie-img-claro{display:none}
html[data-tema="oscuro"] .marca-pie-img-oscuro{display:block}
.pie-bajada{color:var(--gris);font-size:.88rem;max-width:34ch;margin-bottom:14px}
.pie-redes a{color:var(--gris);font-weight:600;font-size:.88rem}
.pie-redes a:hover{color:var(--verde-fuerte)}
.pie-col h4{font-size:.78rem;text-transform:uppercase;letter-spacing:.07em;color:var(--verde-fuerte);margin:0 0 14px}
.pie-col{display:flex;flex-direction:column;gap:10px}
.pie-col a{color:var(--gris);font-size:.9rem}
.pie-col a:hover{color:var(--verde-fuerte)}
.pie-abajo{display:flex;flex-direction:column;gap:6px;margin-top:34px;padding-top:20px;border-top:1px solid var(--linea);color:var(--gris);font-size:.8rem}
@media (min-width:760px){
  .pie-grid{grid-template-columns:1.4fr 1fr 1fr 1fr}
  .pie-abajo{flex-direction:row;justify-content:space-between;padding-bottom:0}
  .pie-sitio{padding-bottom:40px}
}

/* ---------- WhatsApp flotante (sin número hoy: no se renderiza; estilo de respaldo) ---------- */
.wa-flotante{position:fixed;right:18px;bottom:88px;width:52px;height:52px;border-radius:999px;background:var(--verde);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:var(--sombra-alta);z-index:30}
.wa-flotante svg{width:26px;height:26px}

/* ---------- Barra inferior (celular): neutra, nunca teñida de marca ---------- */
.barra-inferior{position:fixed;left:0;right:0;bottom:0;z-index:35;background:var(--barra-fondo);display:flex;padding:6px 4px calc(6px + env(safe-area-inset-bottom));transition:transform .25s ease}
/* En celular, el encabezado flotante y la barra inferior son excluyentes (sitio.js, clase
   "cab-oculta" en <html>): con el encabezado a la vista la barra se esconde, y aparece
   cuando el encabezado se esconde al bajar. Sin JS ("html" sin ".js"), queda siempre visible. */
html.js:not(.cab-oculta) .barra-inferior{transform:translateY(100%)}
.barra-inferior a,.barra-inferior button{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;color:#9FB0A8;background:none;border:none;font-size:.68rem;padding:7px 2px;position:relative}
.barra-inferior svg{width:21px;height:21px}
.barra-inferior [aria-current="page"],.barra-inferior .lleno{color:#fff}
.barra-inferior a[aria-current="page"]::before{content:"";position:absolute;top:1px;left:50%;transform:translateX(-50%);width:18px;height:2px;background:var(--turquesa);border-radius:2px}
.ico-carrito{position:relative;display:inline-flex}
@media (min-width:900px){ .barra-inferior{display:none} .pie-sitio{padding-bottom:40px} }

/* ---------- Catálogo ---------- */
.pagina{padding:40px 0 70px}
.catalogo h1{margin-bottom:6px}
.buscador{flex:1;min-width:0;display:flex;align-items:center;gap:8px;border:1px solid var(--linea);border-radius:10px;padding:10px 16px;background:var(--superficie)}
.buscador svg{width:18px;height:18px;color:var(--gris);flex:none}
.buscador input{border:none;outline:none;flex:1;min-width:0;background:none}
.abrir-filtros{flex:none;white-space:nowrap}
.chips-fila::-webkit-scrollbar{display:none}
.boton.chico.papel.ficha{white-space:nowrap;background:var(--superficie);border-radius:var(--radio-chip)}
.boton.chico.papel.ficha[aria-current="true"]{background:var(--verde);color:#fff;border-color:var(--verde);position:relative}
.boton.chico.papel.ficha[aria-current="true"]::after{content:"";position:absolute;left:14px;right:14px;bottom:-6px;height:2px;background:var(--turquesa);border-radius:2px}
.boton.chico.papel.ficha small{opacity:.75;margin-left:4px}

.catalogo-grid{display:grid;gap:24px;margin-top:10px}
.lateral{display:none}
.lateral-cab{display:flex;justify-content:space-between;align-items:center;padding:18px}
.lateral-cerrar{background:none;border:none}
.lateral-cuerpo{padding:0 18px 18px}
.buscador-lateral{margin-bottom:18px}
.lateral-titulo{font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--gris);margin:0 0 8px}
.arbol{display:flex;flex-direction:column;gap:2px;margin-bottom:18px}
.arbol-fila{display:flex;align-items:center}
.arbol-link{flex:1;padding:9px 8px;border-radius:10px;font-weight:500;display:flex;justify-content:space-between}
.arbol-link small{color:var(--gris);font-weight:400}
.arbol-link:hover{background:var(--superficie)}
.arbol-link[aria-current="true"]{background:var(--superficie);color:var(--tinta);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.arbol-abrir{background:none;border:none;padding:6px;color:var(--gris)}
.arbol-sub{padding-left:14px;display:flex;flex-direction:column;gap:2px}
.lateral-orden{margin-bottom:14px}
.lateral-orden label{display:block;font-size:.82rem;color:var(--gris);margin-bottom:4px}
.lateral-orden select{width:100%;border:1px solid var(--linea);border-radius:10px;padding:9px 10px}
.lateral-pie{display:none}

.vitrina{min-width:0}
.barra-vista{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.contador{color:var(--gris);font-size:.9rem;margin:0}
.mas{display:flex;justify-content:center;margin-top:22px}

/* Un solo buscador a la vez: en PC el de la barra lateral; en celular, el de la barra
   pegajosa de arriba (y ahí se suman los chips de categoría como filtro rápido). */
.barra-movil,.chips-fila{display:none}
@media (min-width:900px){
  .catalogo-grid{grid-template-columns:260px 1fr}
  .lateral{display:block;background:var(--superficie);border:1px solid var(--linea);border-radius:var(--radio-card);align-self:start;position:sticky;top:90px}
  .lateral-cerrar{display:none}
  .abrir-filtros{display:none}
  .lateral-pie{display:none}
  .velo-filtros{display:none}
}
@media (max-width:899px){
  .barra-movil{display:flex;gap:10px;position:sticky;top:0;z-index:30;background:var(--superficie);margin:0 -20px;padding:12px 20px;border-bottom:1px solid var(--linea)}
  .chips-fila{display:flex;gap:8px;overflow-x:auto;padding:10px 0 2px;scrollbar-width:none}
  .buscador-lateral{display:none}
  /* el filtro se vuelve una hoja que sube desde abajo (patrón copiado de INSANITY, misma
     plantilla TRIDENTE): max-height deja ver el catálogo arriba, en vez de tapar toda la
     pantalla como el slide lateral que tenía antes */
  .lateral{position:fixed;left:0;right:0;bottom:0;top:auto;width:auto;height:auto;max-height:70vh;max-height:70dvh;z-index:50;background:var(--superficie);border-radius:var(--radio-card) var(--radio-card) 0 0;display:flex;flex-direction:column;transform:translateY(105%);visibility:hidden;transition:transform .3s cubic-bezier(.16,1,.3,1),visibility 0s linear .3s;box-shadow:var(--sombra-alta);padding-bottom:env(safe-area-inset-bottom)}
  .lateral.abierto{transform:translateY(0);visibility:visible;transition:transform .3s cubic-bezier(.16,1,.3,1),visibility 0s linear}
  .lateral-cab{flex:none;padding:14px 18px 6px}
  .lateral-cerrar{width:36px;height:36px;border-radius:999px;border:1px solid var(--linea);background:var(--blanco);color:var(--tinta);display:flex;align-items:center;justify-content:center}
  .lateral-cuerpo{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain}
  .arbol-link{min-height:44px}
  .arbol-abrir{min-width:44px;min-height:44px}
  .lateral-pie{display:block;flex:none;padding:14px 18px;border-top:1px solid var(--linea);background:var(--superficie)}
  .lateral-pie .boton{width:100%;justify-content:center}
}

/* ---------- Ficha de producto ---------- */
.migas{margin:20px 0 10px;font-size:.85rem;color:var(--gris)}
.migas ol{display:flex;flex-wrap:wrap;gap:6px}
.migas li:not(:last-child)::after{content:"/";margin-left:6px;color:var(--linea)}
.migas a{color:var(--gris)}
.migas a:hover{color:var(--verde-fuerte)}
.ficha-grid{display:grid;gap:30px;padding:10px 0 60px}
.galeria .hoja.visor,.galeria .visor{background:var(--superficie);border-radius:var(--radio-card);overflow:hidden;position:relative}
.marco-visor{position:relative}
.carril{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.carril::-webkit-scrollbar{display:none}
.lamina{flex:0 0 100%;scroll-snap-align:start;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center}
.lamina img{width:100%;height:100%;object-fit:contain}
.gal-flecha{position:absolute;top:50%;transform:translateY(-50%);width:38px;height:38px;border-radius:999px;background:rgba(17,17,19,.6);border:none;color:#fff;display:flex;align-items:center;justify-content:center}
.gal-flecha.ant{left:10px}.gal-flecha.sig{right:10px}
.gal-flecha svg{width:18px;height:18px}
.gal-flecha:hover,.gal-zoom:hover{background:rgba(17,17,19,.78)}
.gal-zoom{position:absolute;right:10px;bottom:10px;width:38px;height:38px;border-radius:999px;background:rgba(17,17,19,.6);border:none;color:#fff;display:flex;align-items:center;justify-content:center}
.miniaturas{display:flex;gap:8px;margin-top:10px;overflow-x:auto}
.miniaturas button{width:56px;height:56px;border-radius:10px;overflow:hidden;border:2px solid transparent;flex:none;padding:0}
.miniaturas button[aria-current="true"]{border-color:var(--verde)}
.miniaturas img{width:100%;height:100%;object-fit:cover}

/* ---------- Visor a pantalla completa (lupa / tocar la foto): capa propia, estaba sin estilos ---------- */
.vz{position:fixed;inset:0;z-index:100;background:rgba(10,10,10,.92);display:flex;align-items:center;justify-content:center;animation:vz-entra .18s ease}
.vz.saliendo{animation:vz-sale .18s ease forwards}
@keyframes vz-entra{from{opacity:0}to{opacity:1}}
@keyframes vz-sale{to{opacity:0}}
.vz-escena{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;overflow:hidden;touch-action:none}
.vz-img{max-width:92vw;max-height:88vh;width:auto;height:auto;object-fit:contain;will-change:transform;user-select:none;-webkit-user-select:none}
.vz.agrandada .vz-escena{cursor:grab}
.vz-boton{position:absolute;width:42px;height:42px;border-radius:999px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);color:#fff;display:flex;align-items:center;justify-content:center;z-index:1}
.vz-boton:hover{background:rgba(255,255,255,.24)}
.vz-boton svg{width:20px;height:20px}
.vz-cerrar{top:14px;right:14px}
.vz-flecha{top:50%;transform:translateY(-50%)}
.vz-flecha.ant{left:14px}.vz-flecha.sig{right:14px}
.vz-cuenta{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);margin:0;color:#fff;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);padding:4px 12px;border-radius:999px;font-size:.82rem}
@media (max-width:620px){
  .vz-boton{width:38px;height:38px}
  .vz-flecha.ant{left:8px}.vz-flecha.sig{right:8px}
  .vz-cerrar{top:10px;right:10px}
}

.ficha-info h1{margin-bottom:10px}
.ficha-precio{font-family:var(--fuente-titulo);font-size:1.7rem;font-weight:700;color:var(--verde-fuerte)}
.ficha-precio .antes{font-size:1rem;font-weight:400;color:var(--gris);margin-right:8px}
.ficha-precio.consultar{color:var(--gris);font-size:1.1rem}
.variantes{border:none;padding:0;margin:14px 0}
.variantes legend{font-weight:600;margin-bottom:8px}
.chips-variante{display:flex;flex-wrap:wrap;gap:8px}
.chip input{position:absolute;opacity:0}
.chip-texto{display:inline-flex;flex-direction:column;align-items:center;padding:9px 16px;border:1.5px solid var(--linea);border-radius:var(--radio-chip);font-size:.88rem;font-weight:500;cursor:pointer}
.chip-texto small{color:var(--gris);font-weight:400}
.chip input:checked + .chip-texto{border-color:var(--verde);background:var(--verde-claro-fondo);color:var(--verde-fuerte)}
/* producto sin opciones: un único chip ya "elegido", solo para mostrar — no es un control */
.chip-texto.fija{border-color:var(--verde);background:var(--verde-claro-fondo);color:var(--verde-fuerte);cursor:default}
.ficha-compra{display:flex;align-items:center;gap:14px;margin:16px 0}
.cr-cantidad.grande{padding:8px 16px;font-size:1.1rem}
.cr-cantidad.grande button{width:28px}
.ficha-error{color:#B3361C}
.ficha-acciones{display:flex;flex-wrap:wrap;gap:10px;margin:10px 0}
.ficha-nota{color:var(--gris);font-size:.85rem}
.incluye{margin-top:30px;padding:20px;border:1px solid var(--linea);border-radius:var(--radio-card)}
.incluye ul{display:flex;flex-direction:column;gap:10px;margin-top:10px}
.incluye li{display:flex;align-items:center;gap:10px}
.incluye img{width:44px;height:44px;border-radius:10px;object-fit:cover}
.incluye .punto{width:8px;height:8px;border-radius:3px;background:var(--verde-claro)}
.relacionados{padding-top:10px}

@media (min-width:860px){ .ficha-grid{grid-template-columns:1fr 1fr} }

/* ---------- Checkout ---------- */
.checkout .envoltura{max-width:980px}
.co-titulo{margin-bottom:4px}
.co-aviso{color:var(--gris)}
.co-vacio{text-align:center;padding:60px 10px}
.co-grid{display:grid;gap:30px;margin-top:20px}
.co-form h2{font-size:1.1rem}
.co-suave{color:var(--gris);font-size:.88rem}
.co-campo{margin-bottom:18px}
.co-campo label{display:block;font-weight:600;margin-bottom:6px;font-size:.92rem}
.co-campo input,.co-campo textarea{width:100%;border:1px solid var(--linea);border-radius:12px;padding:11px 14px;background:var(--blanco);color:var(--tinta)}
.co-campo input[aria-invalid="true"]{border-color:#B3361C}
.co-error{color:#B3361C;font-size:.82rem;margin-top:4px}
.co-opcion{display:flex;gap:10px;align-items:flex-start;font-weight:500;margin-bottom:10px;cursor:pointer}
.co-opcion small{display:block;color:var(--gris);font-weight:400;font-size:.82rem}
.co-extra{margin:10px 0 0 26px}
.co-enviar{width:100%;justify-content:center;background:var(--verde);color:#fff;border:none;border-radius:12px;padding:15px;font-weight:700;font-size:1rem}
.co-enviar:hover{background:var(--verde-fuerte)}
.co-enviar:disabled{opacity:.6}
.co-legal{margin-top:12px}
.co-legal a{text-decoration:underline}
.co-resumen{background:var(--superficie);border:1px solid var(--linea);border-radius:var(--radio-card);padding:20px;align-self:start}
.co-items{display:flex;flex-direction:column;gap:12px;margin:14px 0}
.co-item{display:flex;gap:10px;align-items:center}
.co-item img{width:48px;height:48px;border-radius:10px;object-fit:cover;background:#fff}
.co-item-info{flex:1}
.co-item-nombre{font-weight:600;font-size:.9rem;margin:0}
.co-item-detalle{color:var(--gris);font-size:.8rem;margin:0}
.co-item-precio{font-weight:700;font-size:.88rem}
.co-item-precio.confirmar{color:var(--gris);font-weight:500}
.co-totales .co-total{display:flex;justify-content:space-between;font-weight:700;margin-bottom:4px}
.co-editar{display:inline-block;margin-top:10px;text-decoration:underline;font-size:.9rem}
.co-cambios{background:#FFF5E0;border:1px solid #F0D898;border-radius:10px;padding:10px 14px;margin-bottom:14px;font-size:.88rem}
.co-enviado-caja{background:var(--superficie);border:1px solid var(--linea);border-radius:var(--radio-card);padding:24px;margin-bottom:20px}
.co-ok{font-family:var(--fuente-titulo);font-weight:700;color:var(--tinta);font-size:1.2rem}
.co-numero{font-size:.9rem}
.co-pasos{display:flex;flex-direction:column;gap:10px;margin:14px 0;counter-reset:paso}
.co-pasos li{padding-left:28px;position:relative}
.co-pasos li::before{counter-increment:paso;content:counter(paso);position:absolute;left:0;top:0;width:20px;height:20px;border-radius:7px;background:var(--verde);color:#fff;font-size:.72rem;display:flex;align-items:center;justify-content:center}
.co-acciones{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.co-secundario{padding:13px 22px;border-radius:12px;border:1.5px solid var(--verde-claro);font-weight:600}
.co-texto-pedido{white-space:pre-wrap;background:#fff;border:1px dashed var(--linea);border-radius:12px;padding:14px;font-size:.82rem;margin-top:16px}

@media (min-width:860px){ .co-grid{grid-template-columns:1fr 360px} }

/* ---------- Legales / prosa ---------- */
.prosa h2{margin-top:1.6em;font-size:1.2rem}
.prosa ul{list-style:disc;margin:0 0 1em 1.2em}
.prosa li{margin-bottom:.4em}
.prosa a{text-decoration:underline}
mark.completar{background:#FFF2CC;color:#6B5A1E;padding:1px 6px;border-radius:4px;font-weight:600;font-style:normal}

/* ---------- Contacto ---------- */
.tarjetas-contacto{display:flex;flex-direction:column;gap:12px;margin:26px 0}
.tarjeta-contacto{display:flex;align-items:center;gap:14px;border:1px solid var(--linea);border-radius:var(--radio-card);padding:16px 18px;background:var(--superficie);box-shadow:var(--sombra)}
a.tarjeta-contacto:hover{border-color:var(--verde-claro)}
.cc-icono{width:44px;height:44px;border-radius:12px;background:var(--superficie);display:flex;align-items:center;justify-content:center;color:var(--gris);flex:none}
.cc-icono svg{width:22px;height:22px}
.cc-texto strong{display:block}
.cc-texto small{color:var(--gris)}
.nota-whatsapp{color:var(--gris);font-size:.9rem;margin-top:10px}

/* ---------- Nosotros ---------- */
.nosotros-grid{display:grid;gap:26px;margin-top:20px}
.nosotros-grid .mascota-chica-caja{justify-self:center}
.nosotros-grid .mascota{width:220px}
.nosotros-grid h2{font-size:1.1rem;margin-top:1.3em}
@media (min-width:800px){ .nosotros-grid{grid-template-columns:260px 1fr;align-items:start} }

/* ---------- Selector de tema (botón del header + fieldset del cajón/pie) ---------- */
.tema-boton{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:10px;border:1px solid var(--linea);background:var(--superficie);color:var(--tinta)}
.tema-boton svg{width:18px;height:18px}
.tema-boton .i-sol,.tema-boton .i-luna{display:flex}
.tema-boton .i-luna{display:none}
html[data-tema="oscuro"] .tema-boton .i-sol{display:none}
html[data-tema="oscuro"] .tema-boton .i-luna{display:flex}
.tema-grupo{display:block;border:none;padding:0;margin:14px 0 0}
.tema-grupo legend{font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--gris);margin-bottom:8px}
.tema-opciones{display:flex;gap:6px}
.tema-opcion{flex:1;text-align:center;border:1px solid var(--linea);border-radius:10px;padding:7px 6px;font-size:.78rem;cursor:pointer;color:var(--gris)}
.tema-opcion input{position:absolute;opacity:0}
.tema-opcion:has(input:checked){border-color:var(--verde);color:var(--verde-fuerte);font-weight:600;background:var(--verde-claro-fondo)}
.pie-sitio .tema-grupo{margin-top:0}

/* ---------- Animaciones de entrada: escalonadas, cortas (200-500ms), ease-out, apagadas con reduced-motion ---------- */
.revelar{transition-delay:0s}
.hero-card{opacity:0;transform:translateY(16px);transition:opacity .5s ease-out,transform .5s ease-out}
.hero.en-vista .hero-card{opacity:1;transform:none}
.grilla-categorias.revelar-grupo > *,.muro.revelar-grupo > *,.mini-beneficios.revelar-grupo > *{opacity:0;transform:translateY(10px);transition:opacity .4s ease-out,transform .4s ease-out}
.grilla-categorias.revelar-grupo.en-vista > *,.muro.revelar-grupo.en-vista > *,.mini-beneficios.revelar-grupo.en-vista > *{opacity:1;transform:none}
.grilla-categorias.revelar-grupo.en-vista > *:nth-child(1),.muro.revelar-grupo.en-vista > *:nth-child(1),.mini-beneficios.revelar-grupo.en-vista > *:nth-child(1){transition-delay:.02s}
.grilla-categorias.revelar-grupo.en-vista > *:nth-child(2),.muro.revelar-grupo.en-vista > *:nth-child(2),.mini-beneficios.revelar-grupo.en-vista > *:nth-child(2){transition-delay:.07s}
.grilla-categorias.revelar-grupo.en-vista > *:nth-child(3),.muro.revelar-grupo.en-vista > *:nth-child(3),.mini-beneficios.revelar-grupo.en-vista > *:nth-child(3){transition-delay:.12s}
.grilla-categorias.revelar-grupo.en-vista > *:nth-child(4),.muro.revelar-grupo.en-vista > *:nth-child(4),.mini-beneficios.revelar-grupo.en-vista > *:nth-child(4){transition-delay:.17s}
.grilla-categorias.revelar-grupo.en-vista > *:nth-child(5),.muro.revelar-grupo.en-vista > *:nth-child(5){transition-delay:.22s}
.muro.revelar-grupo.en-vista > *:nth-child(6){transition-delay:.26s}
.muro.revelar-grupo.en-vista > *:nth-child(7){transition-delay:.3s}
.muro.revelar-grupo.en-vista > *:nth-child(n+8){transition-delay:.33s}
h1,h2{transition:opacity .4s ease-out,transform .4s ease-out}
.revelar:not(.en-vista) h1:not([data-palabras]),.revelar:not(.en-vista) h2:not([data-palabras]){opacity:0;transform:translateY(8px)}
@media (prefers-reduced-motion:reduce){
  .hero-card{opacity:1!important;transform:none!important;transition:none!important}
  .grilla-categorias.revelar-grupo > *,.muro.revelar-grupo > *,.mini-beneficios.revelar-grupo > *{opacity:1!important;transform:none!important;transition:none!important}
  .revelar:not(.en-vista) h1:not([data-palabras]),.revelar:not(.en-vista) h2:not([data-palabras]){opacity:1!important;transform:none!important}
}

/* ---------- Modo oscuro: negro neutro, sin tinte verde; el verde queda como acento ---------- */
html[data-tema="oscuro"]{
  color-scheme:dark;
  --blanco:#0B0B0B;
  --superficie:#18181B;
  --tinta:#F4F4F5;
  --verde-fuerte:#5FBE93;
  --verde:#3E8463;
  --gris:#A1A1AA;
  --linea:#27272A;
  --verde-claro-fondo:#1C1F1D;
  --sombra: 0 2px 10px rgba(0,0,0,.45);
  --sombra-alta: 0 10px 28px rgba(0,0,0,.55);
}
html[data-tema="oscuro"] .encabezado{background:rgba(17,17,19,.9)}
html[data-tema="oscuro"] .encabezado.solida{box-shadow:0 4px 18px rgba(0,0,0,.4)}
html[data-tema="oscuro"] .pie-sitio{background:var(--verde-fuerte-pie,#152019);border-color:var(--linea)}
html[data-tema="oscuro"] .hero-panel{background:#141416}
html[data-tema="oscuro"] .cierre-card{background:#1B3A2F}
html[data-tema="oscuro"] .cierre-card h2{color:#fff}
html[data-tema="oscuro"] .cierre-card p{color:#C9DDD1}
html[data-tema="oscuro"] .mb-icono{background:var(--superficie);color:var(--gris)}
html[data-tema="oscuro"] .cat-gpt.cat-a,html[data-tema="oscuro"] .cat-gpt.cat-b{background:var(--superficie);color:var(--tinta)}
html[data-tema="oscuro"] .cat-gpt p{color:var(--gris)}
html[data-tema="oscuro"] .round-arrow{background:#242428;color:var(--tinta)}
html[data-tema="oscuro"] .co-cambios{background:#2A2110;border-color:#4a3a1a;color:#F4F4F5}
html[data-tema="oscuro"] .sticker-lima{color:#1b2e24}
html[data-tema="oscuro"] .cat-icono{background:var(--superficie);color:var(--gris)}

/* Preguntas frecuentes (portada, #preguntas): acordeón nativo <details>, sin color nuevo. */
.lista-preguntas{display:flex;flex-direction:column;max-width:72ch;margin-top:8px}
.pregunta{border-bottom:1px solid var(--linea);padding:16px 0}
.pregunta summary{cursor:pointer;font-weight:600;color:var(--tinta);list-style:none}
.pregunta summary::-webkit-details-marker{display:none}
.pregunta summary::after{content:"+";float:right;color:var(--gris);font-weight:400}
.pregunta[open] summary::after{content:"–"}
.pregunta p{color:var(--gris);margin-top:10px;max-width:60ch}

/* Blog (/blog, /blog/<slug>): listado y artículo, reusa .hoja/.tarjeta/.migas ya existentes. */
.lista-blog{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-direction:column;gap:14px}
.tarjeta-blog{padding:0}
.tarjeta-blog a{display:block;padding:18px;color:inherit;text-decoration:none}
.tarjeta-blog h2{margin:4px 0 6px;font-size:1.15rem}
.tarjeta-blog p{color:var(--gris);margin:0}
.fecha-blog{color:var(--gris);font-size:.85rem;margin:0 0 6px}
.aviso-blog{color:var(--gris);margin-top:16px}
.blog-cuerpo{max-width:72ch;margin-top:12px}
.blog-cuerpo h2{margin-top:1.6em;font-size:1.2rem}
.blog-cuerpo p{color:var(--tinta);line-height:1.6;margin:0 0 1em}
.blog-cuerpo ul,.blog-cuerpo ol{color:var(--tinta);line-height:1.6;padding-left:1.4em;margin:0 0 1em}
.relacionados-blog{margin-top:28px;padding-top:18px;border-top:1px solid var(--linea)}

/* ---------- Fuente oficial de la marca (solo mayúsculas) ----------
   Solo en títulos grandes con clase .t-gv; nunca en texto corrido, precios ni nombres de producto.
   Rango de pesos declarado para que el navegador no la engorde con un negrita falso. */
@font-face{font-family:"Gearvit";src:url("/fonts/Gearvit-Regular.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
.t-gv{font-family:"Gearvit",var(--fuente-titulo);font-weight:400;letter-spacing:.015em;line-height:1.08}
.hero h1.t-gv{letter-spacing:.015em;font-size:clamp(2.3rem,5.4vw,3.8rem)}
h2.t-gv{font-size:clamp(1.7rem,3.2vw,2.5rem)}

/* ---------- Palabras: los títulos entran palabra por palabra, una vez (solo transform + opacity) ---------- */
.pal,.pal-i{display:inline-block}
.pal-i{transition:opacity 420ms cubic-bezier(.23,1,.32,1),transform 420ms cubic-bezier(.23,1,.32,1)}
.con-palabras [data-palabras]:not(.dicho) .pal-i{opacity:0;transform:translateY(.55em)}
@media (prefers-reduced-motion:reduce){ .con-palabras [data-palabras] .pal-i{opacity:1!important;transform:none!important;transition:none!important} }

/* ---------- Inicio: escena de ambiente con los frascos reales encima ---------- */
.hero-panel{padding:0;display:block;min-height:0;aspect-ratio:5/6;overflow:hidden;background:#d8d2c6}
@media (min-width:860px){ .hero-panel{min-height:0;aspect-ratio:4/5} }
.hero-escena{position:absolute;inset:0;display:block}
.hero-escena img{width:100%;height:100%;object-fit:cover;object-position:50% 60%}
.hero-fotos{position:absolute;left:3%;right:3%;bottom:4%;z-index:2}
.hero-fotos-grupo{max-width:none;gap:0;align-items:flex-end;justify-content:center}
.hero-fotos-grupo .bajada-tarjeta{display:none}
.hero-fotos-grupo > .tarjeta,.hero-fotos-grupo > .hoja.flash.tarjeta{width:36%;padding:0;margin:0;background:transparent;border:0;border-radius:0;box-shadow:none;transform:none}
.hero-fotos-grupo > .hf-2{width:42%;z-index:1;margin:0 0 0 -8%}
.hero-fotos-grupo > .hf-3{margin:0 0 0 -8%}
.hero-fotos-grupo .arte{background:transparent;overflow:visible;border-radius:0}
.hero-fotos-grupo .arte img{padding:0;transform:none!important;filter:drop-shadow(0 8px 6px rgba(0,0,0,.2))}
.sticker-lima{right:auto;bottom:auto;left:14px;top:14px;z-index:2;width:92px;height:92px}
.mascota-hero{position:absolute;left:6%;bottom:36%;width:23%;z-index:2;--mascota-color:#2e4f3f;--mascota-cara:#fcfcfc}
.mascota-hueco svg{width:100%;height:auto}
.mascota-carrito{flex:none;width:38px;margin:0 auto 0 12px}
@media (max-width:359px){ .sticker-lima{width:76px;height:76px;font-size:.7rem} .sticker-lima small{display:none} }

/* Tarjetas de categoría con su escena */
.cat-gpt{min-height:0;justify-content:flex-start;padding:10px 10px 18px}
.cat-escena{display:block;aspect-ratio:5/4;border-radius:12px;overflow:hidden;margin-bottom:14px;background:var(--linea)}
.cat-escena img{width:100%;height:100%;object-fit:cover}
.cat-gpt .cat-num{padding:0 8px}
.cat-gpt > div{margin-top:auto;padding:10px 8px 0}

/* Se asoma por encima de la tarjeta de cierre (recortada en el borde de la tarjeta) */
.mascota-asoma-fila{height:58px;overflow:hidden;display:flex;justify-content:flex-end;padding-right:clamp(20px,7%,84px);margin-top:12px}
.mascota-peek{width:92px;flex:none}

/* ---------- Mascota ---------- */
/* La mascota va siempre en sus colores, en claro y en oscuro: nunca en blanco (regla de marca, 2026-10-18). */
/* La mascota de GEARVIT, animada.
   Momentos: saluda una vez por visita, parpadea cada tanto mientras está en pantalla, se asoma
   cuando su sección entra en vista y festeja cuando algo se agrega al carrito. Solo transform y
   opacity. Con «reducir movimiento» no se mueve: solo aparecen y desaparecen cosas. */

.mascota {
  --m-ease-out: var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
  --m-ease-in-out: var(--ease-in-out, cubic-bezier(0.77, 0, 0.175, 1));
  display: block;
  overflow: visible;
  color: var(--mascota-color, #2e4f3f);
}
.mascota .m-cuerpo { transform-box: fill-box; transform-origin: 50% 100%; }
.mascota .m-ojo { transform-box: fill-box; transform-origin: 50% 50%; }
.mascota .m-linea { transform-box: fill-box; transform-origin: 0% 100%; }

/* Saludo: se balancea sobre los pies y las rayitas salen de la mano, una tras otra. */
.mascota.saluda .m-cuerpo { animation: m-saludo 1100ms var(--m-ease-in-out); }
.mascota.saluda .m-linea { animation: m-linea 520ms var(--m-ease-out) both; }
.mascota.saluda .m-linea-1 { animation-delay: 160ms; }
.mascota.saluda .m-linea-2 { animation-delay: 220ms; }
.mascota.saluda .m-linea-3 { animation-delay: 280ms; }

@keyframes m-saludo {
  0%   { transform: rotate(0deg); }
  25%  { transform: rotate(-7deg); }
  50%  { transform: rotate(5deg); }
  75%  { transform: rotate(-3deg); }
  100% { transform: rotate(0deg); }
}
@keyframes m-linea {
  from { opacity: 0; transform: translate(-18%, 18%) scale(0.9); }
  to   { opacity: 1; transform: none; }
}

/* Parpadeo: los dos ojos se cierran y abren, rápido. */
.mascota.parpadea .m-ojo { animation: m-parpadeo 160ms var(--m-ease-in-out); }
@keyframes m-parpadeo {
  0%, 100% { transform: scaleY(1); }
  50%      { transform: scaleY(0.12); }
}

/* Festejo: un saltito y las rayitas vuelven a salir. */
.mascota.festeja .m-cuerpo { animation: m-salto 440ms var(--m-ease-out); }
.mascota.festeja .m-linea { animation: m-linea 360ms var(--m-ease-out) both; }
.mascota.festeja .m-linea-2 { animation-delay: 50ms; }
.mascota.festeja .m-linea-3 { animation-delay: 100ms; }
@keyframes m-salto {
  0%   { transform: translateY(0) scale(1, 1); }
  35%  { transform: translateY(-9%) scale(0.97, 1.03); }
  70%  { transform: translateY(0) scale(1.03, 0.97); }
  100% { transform: translateY(0) scale(1, 1); }
}

/* Se asoma: entra desde abajo la primera vez que su sección aparece en pantalla. */
.mascota-asoma { opacity: 0; transform: translateY(30%); }
.mascota-asoma.visible {
  opacity: 1;
  transform: none;
  transition: transform 600ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)), opacity 300ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .mascota.saluda .m-cuerpo,
  .mascota.festeja .m-cuerpo,
  .mascota.parpadea .m-ojo { animation: none; }
  .mascota.saluda .m-linea,
  .mascota.festeja .m-linea { animation: m-linea-quieta 300ms ease-out both; }
  .mascota-asoma { transform: none; }
  .mascota-asoma.visible { transition: opacity 300ms ease-out; }
}
@keyframes m-linea-quieta { from { opacity: 0; } to { opacity: 1; } }

/* =====================================================================================
   DISEÑO OFICIAL — 2026-10-18 (Candidato 1 de las propuestas de estilo: Fotografía +
   Movimiento + Mascota). Va al final para mandar sobre lo anterior sin reescribirlo.
   ===================================================================================== */
:root { --ease-out: cubic-bezier(0.23, 1, 0.32, 1); --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); }

/* ---------- Cabecera de compu: del ancho de lo que tiene adentro ---------- */
@media (min-width: 1000px) {
  .encabezado { width: fit-content; max-width: calc(100% - 24px); }
  .encabezado .envoltura { gap: 44px; }
}

/* ---------- Portada: una sola foto, el texto encima y la mascota sobre la mesa ---------- */
.hero-card { background: #0d1a14; min-height: clamp(560px, 82vh, 760px); display: flex; }
.hero-grid { position: relative; display: flex; align-items: center; width: 100%; }
.hero-panel { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; }
.hero-escena img { object-position: 70% 60%; }
.hero-panel::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(8, 20, 14, .82) 0%, rgba(8, 20, 14, .55) 42%, rgba(8, 20, 14, 0) 72%); }
.hero-copy { position: relative; z-index: 3; max-width: 600px; }
.mascota-hero { left: auto; right: 30%; bottom: 6%; width: 15%; z-index: 3; } /* sobre el mármol libre: lejos de las hojas, las rayitas se leen */
.sticker-lima { left: auto; right: 18px; top: 18px; z-index: 3; }
@media (max-width: 859px) {
  .hero-card { min-height: 0; display: block; }
  .hero-grid { flex-direction: column-reverse; align-items: stretch; }
  .hero-panel { position: relative; inset: auto; aspect-ratio: 4/5; }
  .hero-panel::after { background: linear-gradient(180deg, rgba(8, 20, 14, 0) 55%, rgba(8, 20, 14, .35) 100%); }
  .mascota-hero { left: 7%; right: auto; bottom: 8%; width: 24%; }
  .sticker-lima { left: 14px; right: auto; }
  .hero-copy { padding-top: 28px; padding-bottom: 32px; }
}

/* ---------- Títulos con la mascota al lado ---------- */
.titulo-mascota { display: flex; align-items: flex-end; gap: 12px; }
.titulo-mascota h2 { margin-bottom: .2em; }
.mascota-mini { flex: none; width: clamp(38px, 5vw, 54px); }

/* ---------- Franja de foto a todo el ancho ---------- */
.franja-foto { position: relative; height: clamp(320px, 52vw, 560px); margin: 8px 0 0; overflow: hidden; display: flex; align-items: flex-end; }
.franja-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.franja-foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, .55) 100%); }
.franja-foto p { position: relative; z-index: 1; margin: 0 auto; width: 100%; max-width: 1180px; padding: 0 24px clamp(24px, 4vw, 48px); color: #fff; font-size: clamp(2rem, 5vw, 3.6rem); line-height: 1.05; }

/* ---------- «Nos importa lo que te llevas»: con foto ---------- */
.filosofia-foto { display: block; aspect-ratio: 4/5; border-radius: 24px; overflow: hidden; background: #0d1a14; }
.filosofia-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (min-width: 760px) { .filosofia-grid { grid-template-columns: .9fr 1.1fr; gap: 56px; } }

/* ---------- «¿Hablamos?»: sobre foto ---------- */
.cierre-card, html[data-tema="oscuro"] .cierre-card { position: relative; overflow: hidden; isolation: isolate; background: #0d1a14; }
.cierre-card::before { content: ""; position: absolute; inset: 0; z-index: -2; background: url("/img/escenas/bebidas-1200.webp") center 40% / cover no-repeat; }
.cierre-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(8, 20, 14, .9) 0%, rgba(8, 20, 14, .6) 60%, rgba(8, 20, 14, .35) 100%); }
.tarjeta-seguinos { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .22); backdrop-filter: blur(6px); }

/* ---------- La mascota: guiña UN ojo y las rayitas salen de a una ---------- */
.mascota.parpadea .m-ojo { animation: none; }
@media (prefers-reduced-motion: no-preference) { .mascota.parpadea .m-ojo:first-child { animation: m-parpadeo 180ms var(--m-ease-in-out); } }
.mascota.saluda .m-linea { animation-duration: 420ms; }
.mascota.saluda .m-linea-1 { animation-delay: 150ms; }
.mascota.saluda .m-linea-2 { animation-delay: 450ms; }
.mascota.saluda .m-linea-3 { animation-delay: 750ms; }
.mascota.festeja .m-linea-1 { animation-delay: 0ms; }
.mascota.festeja .m-linea-2 { animation-delay: 140ms; }
.mascota.festeja .m-linea-3 { animation-delay: 280ms; }

/* ---------- Movimiento: la portada se asienta, los íconos se dibujan, las fotos se descubren ---------- */
@media (prefers-reduced-motion: no-preference) {
  @keyframes of-asentar { from { scale: 1.08; } to { scale: 1; } }
  @keyframes of-pegar { from { opacity: 0; scale: 1.25; rotate: -14deg; } to { opacity: 1; scale: 1; rotate: 0deg; } }
  .hero-escena img { animation: of-asentar 1.8s var(--ease-out) both; transform-origin: 50% 70%; }
  .hero-panel .sticker-lima { animation: of-pegar .55s var(--ease-out) 1.1s both; }
  @supports (animation-timeline: view()) {
    @keyframes of-profundidad { from { translate: 0 0; } to { translate: 0 9%; } }
    @keyframes of-paralaje { from { transform: translateY(-8%) scale(1.12); } to { transform: translateY(8%) scale(1.12); } }
    .hero-escena { inset: -9% 0 0 0; animation: of-profundidad linear both; animation-timeline: view(); animation-range: exit 0% exit 100%; }
    .franja-foto img { animation: of-paralaje linear both; animation-timeline: view(); }
  }

  .mini-beneficios .mb-icono svg [pathLength] { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset .9s var(--ease-in-out); }
  .js .mini-beneficios:not(.en-vista) .mb-icono svg [pathLength] { stroke-dashoffset: 1; }
  .mini-beneficios .mb:nth-child(2) .mb-icono svg * { transition-delay: .12s; }
  .mini-beneficios .mb:nth-child(3) .mb-icono svg * { transition-delay: .24s; }
  .mini-beneficios .mb:nth-child(4) .mb-icono svg * { transition-delay: .36s; }

  .grilla-categorias .cat-escena img { clip-path: inset(0 0 0 0); transition: clip-path 1s var(--ease-in-out), transform .5s var(--ease-out); }
  .js .grilla-categorias:not(.en-vista) .cat-escena img { clip-path: inset(100% 0 0 0); }
  .grilla-categorias .cat-gpt:nth-child(2) .cat-escena img { transition-delay: .1s, 0s; }
  .grilla-categorias .cat-gpt:nth-child(3) .cat-escena img { transition-delay: .2s, 0s; }
  .grilla-categorias .cat-gpt:nth-child(4) .cat-escena img { transition-delay: .3s, 0s; }
  .round-arrow svg { transition: transform .25s var(--ease-out); }

  #cierre .cierre-card { transition: opacity .7s var(--ease-out), transform .9s var(--ease-out); }
  .js #cierre:not(.en-vista) .cierre-card { opacity: 0; transform: perspective(900px) rotateX(10deg) translateY(30px); }

  .lista-check li::before { display: inline-block; transition: opacity .3s var(--ease-out), scale .4s var(--ease-out); }
  .js .filosofia:not(.en-vista) .lista-check li::before { opacity: 0; scale: .4; }
  .filosofia .lista-check li:nth-child(1)::before { transition-delay: .5s; }
  .filosofia .lista-check li:nth-child(2)::before { transition-delay: .75s; }
  .filosofia .lista-check li:nth-child(3)::before { transition-delay: 1s; }
}
/* al pasar el mouse (solo con mouse de verdad: en el celular un toque no es «pasar») */
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .cat-gpt:hover .cat-escena img { transform: scale(1.05); }
  .cat-gpt:hover .round-arrow svg { transform: translateX(3px); }
  .muro-cat .tarjeta .arte img { transition: transform .35s var(--ease-out), filter .35s var(--ease-out); }
  .muro-cat .tarjeta:hover .arte img { transform: translateY(-6px) rotate(-2deg) scale(1.03); filter: drop-shadow(0 14px 12px rgba(0, 0, 0, .14)); }
}