/* ============================================================
   HabiTech — Sistema de diseño
   ------------------------------------------------------------
   Estructura editorial de tienda premium: cabecera mínima tipo
   Zara, hero a pantalla partida con slider, fila de categorías
   en círculos, tarjetas grandes y parrilla de producto.

   El color NO es el beige de la referencia: la marca es
   tecnología para el hogar, así que la base es grafito casi
   negro sobre perla fría, con cian eléctrico como acento. Ese
   cian es el mismo de los nodos que se encienden en el fondo,
   que salen del circuito del logo.
   ============================================================ */

:root {
  /* ---------- Paleta ---------- */
  --ink:       #0D1117;   /* grafito casi negro: cabecera, pie, botones */
  --ink-2:     #161C24;
  --pearl:     #F2F5F9;   /* perla fría: fondo de página               */
  --paper:     #FFFFFF;   /* superficies                                */
  --glow:      #22D3EE;   /* cian eléctrico: nodos, brillos, acentos    */
  --hot:       #FF5A3C;   /* coral: rebajas y precios                   */

  /* Derivados */
  --ink-3:     #232B36;
  --glow-2:    #06B6D4;
  --glow-soft: #E0F7FC;
  --hot-2:     #E8461F;
  --pearl-2:   #E8EDF4;
  --muted:     #64748B;
  --muted-2:   #94A3B8;
  --line:      #DFE6EE;
  --line-2:    #EDF1F6;
  --node-base: #8FA3BC;   /* color de reposo de los nodos del fondo     */
  --green:     #16A34A;
  --green-soft:#DCFCE7;
  --wa:        #25D366;   /* verde WhatsApp                             */

  /* Azul de cabecera. El logo entregado es blanco, así que este azul
     necesita profundidad suficiente para que lea: con #4C93D4 el
     blanco queda en ~3.2:1, que cumple el mínimo para gráficos.
     Un azul más pálido haría desaparecer el logo. */
  --head-blue:   #4C93D4;
  --head-blue-2: #3D82C4;

  /* ---------- Tipografía ----------
     Fredoka para titulares: geométrica redondeada, cercana.
     DM Sans para lectura: geométrica también, así el conjunto
     queda coherente. Ambas son variables. */
  --font-display: "Fredoka", "Segoe UI", system-ui, sans-serif;
  --font: "DM Sans", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* ---------- Geometría ---------- */
  --r-sm: 6px;
  --r:    10px;
  --r-lg: 16px;
  --r-xl: 24px;

  --shadow-sm: 0 1px 3px rgba(13, 17, 23, .06);
  --shadow:    0 10px 34px rgba(13, 17, 23, .09);
  --shadow-lg: 0 30px 70px rgba(13, 17, 23, .18);

  --maxw: 1280px;
  --head-h: 92px;   /* alto del logo (62px) más aire arriba y abajo */
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
/* El recorte horizontal va también en <html>. Con él sólo en <body>,
   el desbordamiento se propaga al viewport y el documento sigue
   midiendo de más: no hay barra de scroll, pero al alejar el zoom
   aparece una franja vacía a la derecha y el contenido se ve
   pegado a la izquierda. */
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  font-family: var(--font);
  background: var(--pearl);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  font-optical-sizing: auto;   /* DM Sans es variable con eje óptico */
  overflow-x: hidden;
  width: 100%;
}

/* Fredoka trae eje de ancho: se fija al valor normal */
.h-display, .h-sec, .hero-copy h1, .cat-card h3, .promo h3,
.newsletter h2, .page-head h1, .pd-info h1, .sidenav-nav a, .brand-word {
  font-optical-sizing: auto;
  font-variation-settings: "wdth" 100;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
ul { list-style: none; }
input, select, textarea { font-family: inherit; }

/* Longhands lógicos a propósito: muchos elementos llevan .section y
   .container a la vez, y con `padding` en atajo la última regla
   borraba el padding lateral de la otra. Separando eje vertical y
   horizontal, las dos conviven sin pisarse. */
.container {
  width: 100%; max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: 26px;
}
.section { padding-block: 74px; }
.section-sm { padding-block: 40px; }

/* ============================================================
   FONDO DE NODOS
   El lienzo cubre la ventana por detrás de todo. No recibe
   eventos, para no interferir con la página.
   ============================================================ */
#nodefield {
  position: fixed; inset: 0; width: 100%; height: 100%;
  z-index: 0; pointer-events: none;
}
/* Sólo `position`, deliberadamente SIN z-index.
   Basta con estar posicionado y aparecer después del lienzo en el
   documento para quedar por encima de él. Poner un z-index aquí
   crearía un contexto de apilamiento y encerraría a sus hijos:
   el sidebar y el panel de filtros (z-index 100) quedarían por
   debajo de la capa oscura (z-index 90) y se verían tapados. */
#site-header, main, #site-footer { position: relative; }

/* ============================================================
   TIPOGRAFÍA UTILITARIA
   ============================================================ */
.kicker {
  display: block; font-size: 11px; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase; color: var(--muted);
}
.h-display {
  font-family: var(--font-display);
  font-size: clamp(34px, 4.4vw, 58px);
  font-weight: 600; line-height: 1.08; letter-spacing: -.005em;
}
.h-sec {
  font-family: var(--font-display);
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 600; line-height: 1.14; letter-spacing: -.005em;
}
.sub-sec { color: var(--muted); max-width: 540px; margin-top: 10px; font-size: 15.5px; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 30px; flex-wrap: wrap; }
.link-more {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 500; letter-spacing: .04em;
  border-bottom: 1px solid var(--line); padding-bottom: 4px;
  transition: color .2s, border-color .2s, gap .2s;
}
.link-more:hover { color: var(--glow-2); border-color: var(--glow); gap: 12px; }
.link-more svg { width: 15px; height: 15px; }

/* ============================================================
   BOTONES
   ============================================================ */
.btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font); font-weight: 500; font-size: 14px; letter-spacing: .02em;
  padding: 14px 28px; border-radius: var(--r-sm);
  border: 1px solid transparent;
  transition: background .22s, color .22s, border-color .22s, transform .22s, box-shadow .22s;
}
/* Destello que cruza el botón al pasar el cursor */
.btn::after {
  content: ""; position: absolute; top: 0; left: -140%;
  width: 55%; height: 100%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.42), transparent);
  transform: skewX(-18deg);
  transition: left .6s cubic-bezier(.2,.8,.2,1);
}
.btn:hover::after { left: 150%; }
.btn:active { transform: translateY(1px); }
.btn svg { width: 16px; height: 16px; flex-shrink: 0; }

.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: var(--ink-3); box-shadow: 0 12px 28px rgba(13,17,23,.28); }
.btn-light { background: var(--paper); color: var(--ink); border-color: var(--line); }
.btn-light:hover { border-color: var(--ink); }
.btn-glow { background: var(--glow-2); color: #04222A; }
.btn-glow:hover { background: var(--glow); box-shadow: 0 12px 30px rgba(34,211,238,.4); }
.btn-hot { background: var(--hot); color: #fff; }
.btn-hot:hover { background: var(--hot-2); box-shadow: 0 12px 30px rgba(255,90,60,.35); }
.btn-ghost-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.35); }
.btn-ghost-light:hover { background: rgba(255,255,255,.12); border-color: #fff; }
.btn-sm { padding: 10px 18px; font-size: 13px; }
.btn-block { width: 100%; }

/* Botón de reproducción del hero */
.btn-play { display: inline-flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 500; transition: gap .2s; }
.btn-play i {
  width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
  border: 1px solid var(--line); background: var(--paper);
  display: grid; place-items: center;
  transition: border-color .25s, box-shadow .25s, transform .25s;
}
.btn-play i svg { width: 13px; height: 13px; margin-left: 2px; }
.btn-play:hover i { border-color: var(--glow); box-shadow: 0 0 0 6px var(--glow-soft); transform: scale(1.06); }
.btn-play:hover { gap: 16px; }

/* ============================================================
   MARCA
   ------------------------------------------------------------
   Se usa el PNG entregado tal cual, sin recrearlo. Es un lockup
   vertical (símbolo sobre la palabra), blanco sobre transparente,
   así que sólo se coloca sobre fondos que le den contraste: el
   azul de la cabecera y el grafito del pie.
   El recorte quita el aire sobrante del lienzo cuadrado sin
   alterar el archivo: se escala y se desplaza dentro de una caja
   con overflow oculto.
   ============================================================ */
/* El lienzo del PNG es cuadrado y el logo no lo llena: sobra un
   4.5% arriba y un 18% abajo. Se recorta ese aire sin tocar el
   archivo, escalando y desplazando dentro de una caja con
   overflow oculto. Las fracciones salen de medir el propio PNG:
   contenido en x 16.2%–83.9% e y 4.5%–82.1%. */
.brand {
  --logo-h: 62px;                                   /* alto visible del logo */
  display: block; overflow: hidden; line-height: 0;
  height: var(--logo-h);
  width: calc(var(--logo-h) * 0.8731);              /* 812 / 930 */
}
.brand img {
  display: block; max-width: none; width: auto;
  height: calc(var(--logo-h) / 0.775);              /* 1200 / 930 */
  margin-top: calc(var(--logo-h) / 0.775 * -0.045);
  margin-left: calc(var(--logo-h) / 0.775 * -0.1617);
}

/* ============================================================
   BOTÓN DE MENÚ
   ============================================================ */
.menu-btn {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 10px 6px; color: inherit;
}
.menu-lines { display: flex; flex-direction: column; gap: 5px; width: 22px; }
.menu-lines i {
  display: block; height: 1.5px; background: currentColor; border-radius: 2px;
  transition: transform .3s cubic-bezier(.2,.8,.2,1), width .3s;
}
.menu-lines i:nth-child(1) { width: 22px; }
.menu-lines i:nth-child(2) { width: 15px; }
.menu-lines i:nth-child(3) { width: 19px; }
.menu-btn:hover .menu-lines i { width: 22px; }
.menu-label {
  font-size: 11.5px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase;
}

/* ============================================================
   BARRA DE AVISOS
   ============================================================ */
.topbar {
  background: var(--ink); color: #C3D0DE;
  font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
  overflow: hidden; position: relative; z-index: 60;
}
.topbar .track { display: flex; width: max-content; padding: 9px 0; animation: marquee 48s linear infinite; }
.topbar .grp { display: flex; gap: 52px; padding-right: 52px; white-space: nowrap; }
.topbar .track span { display: inline-flex; align-items: center; gap: 8px; }
.topbar .track b { color: #fff; font-weight: 600; }
.topbar .track .dot { color: var(--glow); }
.topbar:hover .track { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ============================================================
   CABECERA — mínima, tipo Zara
   Sin cajas ni botones: sólo texto en mayúsculas espaciadas y
   los esenciales a la derecha.
   ============================================================ */
.header {
  position: sticky; top: 0; z-index: 50;
  background: linear-gradient(180deg, var(--head-blue), var(--head-blue-2));
  color: #fff;
  transition: box-shadow .3s;
}
.header.scrolled { box-shadow: 0 4px 22px rgba(13,17,23,.16); }
/* Tres columnas: el logo queda centrado de verdad, sin que lo
   desplace el ancho de los grupos laterales. */
.header .bar {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; height: var(--head-h); gap: 16px;
}
.bar-left  { justify-self: start; }
.bar-right { justify-self: end; display: flex; align-items: center; gap: 2px; }

.icon-btn {
  position: relative; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; color: #fff;
  transition: background .2s;
}
.icon-btn:hover { background: rgba(255,255,255,.16); }
.icon-btn svg { width: 21px; height: 21px; }
.badge {
  position: absolute; top: 5px; right: 5px; min-width: 18px; height: 18px; padding: 0 5px;
  background: var(--ink); color: #fff; font-size: 10px; font-weight: 600;
  border-radius: 999px; display: grid; place-items: center;
  border: 2px solid var(--head-blue);
  transition: transform .25s cubic-bezier(.2,1.5,.5,1);
}
.badge.bump { transform: scale(1.4); }

/* Buscador desplegable a todo el ancho */
.search-panel {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--paper); border-bottom: 1px solid var(--line);
  padding: 0 26px; overflow: hidden; max-height: 0;
  box-shadow: 0 12px 26px rgba(13,17,23,.08);
  transition: max-height .32s cubic-bezier(.2,.8,.2,1);
}
.search-panel.open { max-height: 130px; }
.search-panel form { max-width: var(--maxw); margin: 0 auto; display: flex; align-items: center; gap: 14px; padding: 24px 0; }
.search-panel svg { width: 20px; height: 20px; color: var(--muted); flex-shrink: 0; }
.search-panel input {
  flex: 1; min-width: 0; border: none; outline: none; background: none;
  font-size: 17px; color: var(--ink); padding: 4px 0;
  border-bottom: 1px solid var(--line);
}
.search-panel input:focus { border-bottom-color: var(--ink); }
.search-panel .close { color: var(--muted); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.search-panel .close:hover { color: var(--ink); }

/* Buscador embebido en página (404) */
.inline-search {
  display: flex; align-items: center; gap: 12px;
  max-width: 460px; margin: 0 auto 30px;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 13px 18px;
  transition: border-color .2s, box-shadow .2s;
}
.inline-search:focus-within { border-color: var(--ink); box-shadow: 0 0 0 3px var(--glow-soft); }
.inline-search svg { width: 19px; height: 19px; color: var(--muted); flex-shrink: 0; }
.inline-search input { flex: 1; min-width: 0; border: none; outline: none; background: none; font-size: 15px; color: var(--ink); }

/* Salto al contenido */
.skip-link {
  position: fixed; left: 16px; top: -70px; z-index: 200;
  background: var(--ink); color: #fff; padding: 12px 22px;
  border-radius: 0 0 var(--r-sm) var(--r-sm); font-size: 13px; transition: top .2s;
}
.skip-link:focus { top: 0; }

/* ============================================================
   SIDEBAR DE NAVEGACIÓN
   Panel amplio, con aire y jerarquía: la cabecera repite el azul
   de la marca y los enlaces van en serif, grandes y separados.
   ============================================================ */
.sidenav {
  position: fixed; top: 0; left: 0; height: 100%; width: 400px; max-width: 90vw; z-index: 100;
  background: var(--paper); box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column;
  transform: translateX(-100%); transition: transform .42s cubic-bezier(.32,.72,.24,1);
  overflow-y: auto;
}
.sidenav.open { transform: translateX(0); }

.sidenav-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 34px;
  background: linear-gradient(180deg, var(--head-blue), var(--head-blue-2));
  color: #fff; flex-shrink: 0;
}
.sidenav-head button {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  color: #fff; transition: background .2s;
}
.sidenav-head button:hover { background: rgba(255,255,255,.18); }
.sidenav-head svg { width: 20px; height: 20px; }

.sidenav-body { padding: 30px 34px; flex: 1; }
.sidenav-body .kicker { margin-bottom: 18px; }

.sidenav-nav { display: flex; flex-direction: column; }
.sidenav-nav a {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  font-family: var(--font-display); font-size: 21px; font-weight: 600;
  color: var(--ink); padding: 15px 0;
  border-bottom: 1px solid var(--line-2);
  transition: color .25s, padding-left .25s;
}
.sidenav-nav a svg {
  width: 17px; height: 17px; flex-shrink: 0;
  opacity: 0; transform: translateX(-10px);
  transition: opacity .25s, transform .25s;
}
.sidenav-nav a:hover { color: var(--glow-2); padding-left: 10px; }
.sidenav-nav a:hover svg { opacity: 1; transform: translateX(0); }
.sidenav-nav a .n {
  font-family: var(--font); font-size: 11.5px; font-weight: 500;
  color: var(--muted-2); margin-left: auto; margin-right: 4px;
}
.sidenav-nav a.sale { color: var(--hot); }
.sidenav-nav a.sale:hover { color: var(--hot-2); }

.sidenav-foot { padding: 26px 34px 34px; border-top: 1px solid var(--line-2); flex-shrink: 0; }
.sidenav-links { display: flex; flex-direction: column; gap: 2px; margin-bottom: 20px; }
.sidenav-links a {
  display: flex; align-items: center; gap: 11px;
  font-size: 14px; color: var(--muted); padding: 9px 0;
  transition: color .2s;
}
.sidenav-links a:hover { color: var(--ink); }
.sidenav-links svg { width: 17px; height: 17px; }
.sidenav-social { display: flex; gap: 16px; margin-top: 20px; }
.sidenav-social a { color: var(--muted-2); transition: color .2s; }
.sidenav-social a:hover { color: var(--ink); }
.sidenav-social svg { width: 18px; height: 18px; }

/* ============================================================
   HERO — pantalla partida con slider
   ============================================================ */
.hero {
  position: relative;
  min-height: min(740px, calc(100vh - var(--head-h)));
  display: flex; align-items: center;
  overflow: hidden;
  padding-bottom: 96px;   /* deja sitio a la fila de círculos */
}
/* La imagen ocupa TODO el ancho del hero, a sangre */
.hero-media { position: absolute; inset: 0; overflow: hidden; }
.hero-media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.06);
  transition: opacity 1s cubic-bezier(.4,0,.2,1), transform 7s linear;
}
.hero-media img.is-active { opacity: 1; transform: scale(1); }
/* Velo blanco sobre la mitad izquierda para que el texto se lea.
   Va de opaco a transparente: la foto queda limpia a la derecha y
   el titular apoyado en blanco a la izquierda. */
.hero-media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg,
      var(--pearl) 0%,
      var(--pearl) 26%,
      rgba(242,245,249,.94) 38%,
      rgba(242,245,249,.62) 50%,
      rgba(242,245,249,.18) 64%,
      transparent 76%);
}

.hero .container { position: relative; z-index: 3; width: 100%; }
/* El ancho se limita también en vw: si sólo se limitara en px, en
   pantallas medias el texto se metía debajo de la imagen. */
.hero-copy { max-width: min(520px, 44vw); padding: 56px 0 30px; }
.hero-copy .kicker { margin-bottom: 20px; }
.hero-copy h1 { font-family: var(--font-display); font-size: clamp(36px, 4.6vw, 62px); font-weight: 600; line-height: 1.06; letter-spacing: -.005em; }
.hero-copy p { color: var(--muted); font-size: 16px; max-width: 400px; margin: 20px 0 32px; }
.hero-cta { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }

/* Cada diapositiva anima su texto al entrar */
.hero-slide-copy { display: none; }
.hero-slide-copy.is-active { display: block; animation: heroIn .7s cubic-bezier(.2,.8,.2,1) both; }
@keyframes heroIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* Indicador 01 / 02 / 03 en el borde derecho */
.hero-nav {
  position: absolute; right: 34px; top: 50%; transform: translateY(-50%);
  z-index: 4; display: flex; flex-direction: column; align-items: center; gap: 13px;
}
.hero-nav button {
  font-size: 12px; letter-spacing: .12em; color: rgba(255,255,255,.6);
  font-variant-numeric: tabular-nums; padding: 3px 2px; transition: color .25s;
  text-shadow: 0 1px 6px rgba(0,0,0,.35);
}
.hero-nav button.is-active { color: #fff; font-weight: 600; }
.hero-nav button:hover { color: #fff; }
/* Barra de avance vertical entre los números */
.hero-nav .bar { width: 1px; height: 44px; background: rgba(255,255,255,.32); position: relative; overflow: hidden; }
.hero-nav .bar i { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #fff; transform-origin: top; transform: scaleY(0); }
.hero-nav .bar i.run { animation: heroBar var(--slide-ms, 6000ms) linear both; }
@keyframes heroBar { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* Garantías al pie del hero.
   Van en flujo normal dentro de la columna de texto: cuando
   estaban posicionadas en absoluto se montaban sobre el titular
   en pantallas de poca altura. */
.hero-trust {
  max-width: min(560px, 46vw);
  margin-top: 4px; padding-bottom: 56px;
}
.hero-trust .row { display: flex; flex-wrap: wrap; gap: 22px; }
.hero-trust .it { display: flex; align-items: center; gap: 11px; padding-right: 22px; border-right: 1px solid var(--line); }
.hero-trust .it:last-child { border-right: none; padding-right: 0; }
.hero-trust svg { width: 21px; height: 21px; color: var(--ink); flex-shrink: 0; }
.hero-trust b { display: block; font-size: 12.5px; font-weight: 600; }
.hero-trust small { color: var(--muted); font-size: 11.5px; }

/* ============================================================
   CATEGORÍAS EN CÍRCULOS
   Tarjeta blanca que monta sobre el hero.
   ============================================================ */
.circles-wrap { margin-top: -86px; position: relative; z-index: 5; }
.circles {
  background: var(--paper); border-radius: var(--r-lg);
  box-shadow: var(--shadow); padding: 26px 20px;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  gap: 8px; overflow-x: auto; scrollbar-width: none;
}
.circles::-webkit-scrollbar { display: none; }
.circle { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 8px 4px; min-width: 92px; }
.circle .ring {
  width: 74px; height: 74px; border-radius: 50%; overflow: hidden;
  background: var(--pearl-2); display: grid; place-items: center;
  font-size: 30px; position: relative;
  transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s;
}
.circle .ring img { width: 100%; height: 100%; object-fit: cover; }
/* Anillo de brillo al pasar el cursor */
.circle .ring::after {
  content: ""; position: absolute; inset: -3px; border-radius: 50%;
  border: 1.5px solid var(--glow); opacity: 0; transform: scale(.9);
  transition: opacity .3s, transform .3s;
}
.circle:hover .ring { transform: translateY(-4px); box-shadow: 0 12px 26px rgba(13,17,23,.14); }
.circle:hover .ring::after { opacity: 1; transform: scale(1); }
.circle span { font-size: 12.5px; font-weight: 500; text-align: center; }
/* La de rebajas, en negativo */
.circle.is-sale .ring {
  background: var(--ink); color: #fff;
  font-family: var(--font); font-size: 12.5px; font-weight: 600; letter-spacing: .1em;
}
.circle.is-sale .ring::after { border-color: var(--hot); }

/* ============================================================
   TARJETAS DE CATEGORÍA
   ============================================================ */
.cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.cat-card {
  position: relative; border-radius: var(--r); overflow: hidden;
  aspect-ratio: 3 / 4; display: flex; flex-direction: column; justify-content: flex-end;
  padding: 24px; color: #fff;
}
.cat-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; transition: transform .7s cubic-bezier(.2,.8,.2,1); }
.cat-card:hover img { transform: scale(1.06); }
.cat-card::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, transparent 38%, rgba(13,17,23,.8) 100%);
  transition: background .3s;
}
.cat-card:hover::after { background: linear-gradient(180deg, rgba(13,17,23,.18) 18%, rgba(13,17,23,.86) 100%); }
.cat-card > * { position: relative; z-index: 2; }
.cat-card h3 { font-family: var(--font-display); font-size: 20px; font-weight: 600; }
.cat-card .go { position: relative; display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; margin-top: 8px; transition: gap .25s; }
.cat-card .go svg { width: 15px; height: 15px; }
.cat-card:hover .go { gap: 13px; }
.cat-card .go::before { content: ""; position: absolute; left: 0; bottom: -4px; height: 1px; width: 0; background: #fff; transition: width .3s; }
.cat-card:hover .go::before { width: 100%; }

/* ============================================================
   BANNERS PROMO
   ============================================================ */
.promo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.promo {
  position: relative; border-radius: var(--r); overflow: hidden;
  min-height: 230px; display: flex; align-items: center;
  padding: 34px; background: var(--pearl-2);
}
/* La imagen ocupa la mitad derecha y el texto se queda en la
   izquierda: antes el bloque de texto llegaba hasta donde ya
   empezaba la foto y quedaba encima. */
.promo img {
  position: absolute; top: 0; right: 0; bottom: 0; width: 50%;
  height: 100%; object-fit: cover; z-index: 0;
  transition: transform .7s cubic-bezier(.2,.8,.2,1);
}
.promo:hover img { transform: scale(1.05); }
.promo::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, var(--pearl-2) 42%, rgba(232,237,244,.55) 56%, transparent 76%);
}
.promo .inner { position: relative; z-index: 2; max-width: 44%; }
.promo .kicker { margin-bottom: 12px; }
.promo h3 { font-family: var(--font-display); font-size: clamp(22px, 2.4vw, 30px); font-weight: 600; line-height: 1.15; margin-bottom: 20px; }

/* ============================================================
   PRODUCTOS
   ============================================================ */
.prod-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.prod-grid.cols-5 { grid-template-columns: repeat(5, 1fr); }
.prod-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.card { position: relative; display: flex; flex-direction: column; }
.card .media {
  position: relative; aspect-ratio: 3 / 4; overflow: hidden;
  background: var(--pearl-2); border-radius: var(--r-sm); margin-bottom: 14px;
}
.card .media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2,.8,.2,1); }
.card:hover .media img { transform: scale(1.05); }
.card .chips { position: absolute; top: 12px; left: 12px; display: flex; flex-direction: column; gap: 6px; z-index: 2; align-items: flex-start; }
.chip {
  font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 3px; color: #fff;
}
.chip.off { background: var(--hot); }
.chip.new { background: var(--ink); }
.chip.hot { background: var(--glow-2); color: #04222A; }
.chip.eco { background: var(--green); }

.wish {
  position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; border-radius: 50%; z-index: 2;
  background: rgba(255,255,255,.94); display: grid; place-items: center; color: var(--ink);
  box-shadow: var(--shadow-sm);
  transition: color .2s, transform .2s;
}
.wish svg { width: 16px; height: 16px; }
.wish:hover { color: var(--hot); transform: scale(1.1); }
.wish.active { color: var(--hot); }
.wish.active svg { fill: var(--hot); }

.card .quick {
  position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 2;
  transform: translateY(130%); opacity: 0;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .3s;
}
.card:hover .quick, .card:focus-within .quick { transform: translateY(0); opacity: 1; }
.card .quick .add { margin-top: 0; }
/* En pantallas táctiles no existe el hover: si el botón sólo
   apareciera al pasar el cursor, sería imposible agregar al
   carrito desde la parrilla. */
@media (hover: none) {
  .card .quick { transform: none; opacity: 1; }
}

.card .body { display: flex; flex-direction: column; gap: 5px; }
.card .cat-label { font-size: 10.5px; font-weight: 500; letter-spacing: .13em; text-transform: uppercase; color: var(--muted-2); }
.card h3 { font-size: 14px; font-weight: 500; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card h3 a:hover { color: var(--glow-2); }
.card .price-row { display: flex; align-items: baseline; gap: 9px; margin-top: 2px; }
.price { font-size: 15.5px; font-weight: 600; }
.price-old { font-size: 12.5px; color: var(--muted-2); text-decoration: line-through; }
.sold { font-size: 11px; color: var(--muted-2); }
.progress { height: 2px; background: var(--line-2); border-radius: 999px; overflow: hidden; margin-top: 3px; }
.progress i { display: block; height: 100%; background: var(--ink); }
.card .add {
  width: 100%; margin-top: 10px; background: var(--ink); color: #fff; padding: 11px; border-radius: var(--r-sm);
  font-weight: 500; font-size: 13px; display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: background .22s, color .22s;
}
.card .add:hover { background: var(--glow-2); color: #04222A; }
.card .add svg { width: 16px; height: 16px; }

/* ============================================================
   FRANJA DE GARANTÍAS
   ============================================================ */
.trust { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--pearl-2); border-radius: var(--r); padding: 6px; }
.trust .item { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 24px 18px; border-right: 1px solid var(--line); }
.trust .item:last-child { border-right: none; }
.trust .ic { color: var(--ink); flex-shrink: 0; }
.trust .ic svg { width: 24px; height: 24px; }
.trust b { display: block; font-size: 13.5px; font-weight: 600; }
.trust small { color: var(--muted); font-size: 12px; }

/* ============================================================
   NEWSLETTER
   ============================================================ */
.newsletter { display: grid; grid-template-columns: 340px 1fr; background: var(--pearl-2); border-radius: var(--r); overflow: hidden; }
.newsletter .pic { position: relative; min-height: 250px; }
.newsletter .pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.newsletter .inner { padding: 48px 56px; text-align: center; display: flex; flex-direction: column; justify-content: center; }
.newsletter h2 { font-family: var(--font-display); font-size: clamp(24px, 2.8vw, 34px); font-weight: 600; margin: 12px 0 8px; }
.newsletter p { color: var(--muted); font-size: 14.5px; margin-bottom: 24px; }
.nl-form { display: flex; max-width: 470px; margin: 0 auto; width: 100%; }
.nl-form input {
  flex: 1; min-width: 0; border: 1px solid var(--line); border-right: none;
  border-radius: var(--r-sm) 0 0 var(--r-sm);
  background: var(--paper); padding: 14px 18px; font-size: 14px; outline: none;
  transition: border-color .2s;
}
.nl-form input:focus { border-color: var(--ink); }
.nl-form .btn { border-radius: 0 var(--r-sm) var(--r-sm) 0; }

/* ============================================================
   PIE
   ============================================================ */
.footer { background: var(--ink); color: #94A3B8; padding: 66px 0 28px; }
.footer .top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1.3fr; gap: 40px; padding-bottom: 44px; }
.footer .brand { color: #fff; margin-bottom: 18px; }
.footer .about { font-size: 13.5px; max-width: 250px; line-height: 1.7; }
.footer h4 { color: #fff; font-size: 11.5px; margin-bottom: 18px; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; }
.footer .col a { display: block; font-size: 13.5px; padding: 6px 0; transition: color .2s, padding-left .2s; }
.footer .col a:hover { color: #fff; padding-left: 5px; }
.footer .socials { display: flex; gap: 14px; margin-top: 22px; }
.footer .socials a { color: #94A3B8; transition: color .2s, transform .2s; }
.footer .socials a:hover { color: var(--glow); transform: translateY(-2px); }
.footer .socials svg { width: 18px; height: 18px; }
.footer .nl-mini { display: flex; margin-top: 14px; border: 1px solid rgba(255,255,255,.18); border-radius: var(--r-sm); overflow: hidden; }
.footer .nl-mini input { flex: 1; min-width: 0; background: none; border: none; outline: none; color: #fff; font-size: 13px; padding: 11px 14px; }
.footer .nl-mini input::placeholder { color: #64748B; }
.footer .nl-mini button { padding: 0 15px; color: #fff; transition: background .2s; }
.footer .nl-mini button:hover { background: rgba(255,255,255,.1); }
.footer .nl-mini svg { width: 16px; height: 16px; }
.footer .bottom { display: flex; align-items: center; justify-content: space-between; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.1); font-size: 12.5px; flex-wrap: wrap; gap: 12px; }
.pay { display: flex; gap: 7px; }
.pay span { background: rgba(255,255,255,.08); border-radius: 4px; padding: 5px 9px; font-size: 10px; font-weight: 600; color: #fff; letter-spacing: .05em; }

/* ============================================================
   BOTÓN FLOTANTE DE WHATSAPP
   ============================================================ */
.wa-float {
  position: fixed; right: 22px; bottom: 22px; z-index: 80;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--wa); color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 10px 26px rgba(37,211,102,.42);
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s;
}
.wa-float:hover { transform: scale(1.08); box-shadow: 0 14px 34px rgba(37,211,102,.55); }
.wa-float svg { width: 29px; height: 29px; position: relative; z-index: 2; }
/* Anillo que late para llamar la atención sin ser molesto */
.wa-float::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid var(--wa); animation: waPulse 2.6s ease-out infinite;
}
@keyframes waPulse {
  0%   { transform: scale(1);    opacity: .7; }
  70%  { transform: scale(1.55); opacity: 0; }
  100% { transform: scale(1.55); opacity: 0; }
}
/* Etiqueta que aparece al acercarse */
.wa-float .tip {
  position: absolute; right: calc(100% + 12px); top: 50%; transform: translateY(-50%) translateX(8px);
  background: var(--ink); color: #fff; font-size: 12.5px; white-space: nowrap;
  padding: 8px 13px; border-radius: var(--r-sm); opacity: 0; pointer-events: none;
  transition: opacity .25s, transform .25s;
}
.wa-float:hover .tip { opacity: 1; transform: translateY(-50%) translateX(0); }

/* ============================================================
   CARRITO (cajón lateral)
   ============================================================ */
.overlay { position: fixed; inset: 0; background: rgba(13,17,23,.5); backdrop-filter: blur(3px); opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; z-index: 90; }
.overlay.open { opacity: 1; visibility: visible; }
.drawer {
  position: fixed; top: 0; right: 0; height: 100%; width: 420px; max-width: 92vw; background: var(--paper); z-index: 100;
  display: flex; flex-direction: column; transform: translateX(100%); transition: transform .38s cubic-bezier(.3,.9,.3,1);
  box-shadow: var(--shadow-lg);
}
.drawer.open { transform: translateX(0); }
.drawer .dh { display: flex; align-items: center; justify-content: space-between; padding: 22px 24px; border-bottom: 1px solid var(--line); }
.drawer .dh b { font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.drawer .dh button { width: 36px; height: 36px; border-radius: var(--r-sm); display: grid; place-items: center; }
.drawer .dh button:hover { background: var(--pearl-2); }
.drawer .items { flex: 1; overflow-y: auto; padding: 10px 22px; }
.drawer .empty { text-align: center; color: var(--muted); padding: 60px 20px; }
.drawer .empty svg { width: 54px; height: 54px; color: var(--line); margin: 0 auto 16px; }
.citem { display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line-2); }
.citem img { width: 74px; height: 92px; border-radius: var(--r-sm); object-fit: cover; flex-shrink: 0; }
.citem .ci-b { flex: 1; min-width: 0; }
.citem h4 { font-size: 13.5px; font-weight: 500; line-height: 1.4; }
.citem .ci-pr { font-weight: 600; font-size: 14px; margin-top: 4px; }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; margin-top: 9px; }
.qty button { width: 30px; height: 30px; display: grid; place-items: center; font-weight: 500; transition: background .2s; }
.qty button:hover { background: var(--pearl-2); }
.qty span { width: 34px; text-align: center; font-weight: 500; font-size: 13.5px; }
.citem .rm, .rm { color: var(--muted-2); font-size: 12px; margin-top: 9px; transition: color .2s; }
.citem .rm:hover, .rm:hover { color: var(--hot); }
.drawer .foot { padding: 20px 24px 26px; border-top: 1px solid var(--line); background: var(--pearl); }
.drawer .frow { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 13.5px; color: var(--muted); }
.drawer .frow span:last-child { color: var(--ink); }
.drawer .ftot { display: flex; justify-content: space-between; font-size: 18px; font-weight: 600; margin: 12px 0 16px; }

/* ============================================================
   AVISOS FLOTANTES
   ============================================================ */
.toast-wrap { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 200; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.toast {
  display: flex; align-items: center; gap: 12px; background: var(--ink); color: #fff; padding: 13px 20px; border-radius: var(--r-sm);
  box-shadow: var(--shadow-lg); font-size: 13.5px; animation: toastIn .35s cubic-bezier(.2,1.4,.4,1);
}
.toast .ic { width: 24px; height: 24px; border-radius: 50%; background: var(--glow); display: grid; place-items: center; flex-shrink: 0; }
.toast .ic svg { width: 14px; height: 14px; color: #04222A; }
@keyframes toastIn { from { transform: translateY(24px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.toast.out { animation: toastOut .3s forwards; }
@keyframes toastOut { to { transform: translateY(24px); opacity: 0; } }

/* ============================================================
   PÁGINAS INTERIORES
   ============================================================ */
.page-head { background: var(--paper); border-bottom: 1px solid var(--line); padding: 44px 0; }
.page-head .crumb { font-size: 12px; color: var(--muted); margin-bottom: 12px; letter-spacing: .06em; }
.page-head .crumb a:hover { color: var(--ink); }
.page-head h1 { font-family: var(--font-display); font-size: clamp(28px, 3.4vw, 42px); font-weight: 600; }
.page-head p { color: var(--muted); margin-top: 8px; }

.shop { display: grid; grid-template-columns: 250px 1fr; gap: 34px; align-items: start; }
.filters { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 22px; position: sticky; top: calc(var(--head-h) + 16px); }
.filters .fg { padding: 16px 0; border-bottom: 1px solid var(--line-2); }
.filters .fg:first-child { padding-top: 0; }
.filters .fg:last-child { border-bottom: none; padding-bottom: 0; }
.filters h5, .filters h2 { font-size: 11px; font-weight: 600; margin-bottom: 14px; text-transform: uppercase; letter-spacing: .14em; }
.filters label { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 13.5px; cursor: pointer; transition: color .2s; }
.filters label:hover { color: var(--glow-2); }
.filters input[type=checkbox], .filters input[type=radio] { width: 16px; height: 16px; accent-color: var(--ink); cursor: pointer; }
.filters .count { margin-left: auto; font-size: 11.5px; color: var(--muted-2); }
.range-out { display: flex; justify-content: space-between; font-size: 12px; margin-top: 8px; color: var(--muted); }
input[type=range] { width: 100%; accent-color: var(--ink); }

.shop-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 22px; flex-wrap: wrap; }
.shop-bar .res { font-size: 13px; color: var(--muted); }
.shop-bar .res b { color: var(--ink); }
.shop-bar select { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 14px; font-size: 13px; background: var(--paper); cursor: pointer; outline: none; transition: border-color .2s; }
.shop-bar select:focus { border-color: var(--ink); }
.filter-toggle { display: none; }

.pd { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: start; }
.pd-media .main { border-radius: var(--r); overflow: hidden; aspect-ratio: 3/4; background: var(--pearl-2); position: relative; }
.pd-media .main img { width: 100%; height: 100%; object-fit: cover; }
.pd-media .main .chips { position: absolute; top: 14px; left: 14px; display: flex; gap: 7px; }
.pd-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 12px; }
.pd-thumbs button { border-radius: var(--r-sm); overflow: hidden; aspect-ratio: 1/1; border: 1px solid transparent; transition: border-color .2s; }
.pd-thumbs button.active { border-color: var(--ink); }
.pd-thumbs img { width: 100%; height: 100%; object-fit: cover; }
.pd-info .cat-label { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.pd-info h1 { font-family: var(--font-display); font-size: clamp(26px, 3vw, 38px); font-weight: 600; line-height: 1.14; margin: 10px 0 14px; }
.pd-price { display: flex; align-items: baseline; gap: 12px; margin: 18px 0; flex-wrap: wrap; }
.pd-price .now { font-size: 32px; font-weight: 600; }
.pd-price .old { font-size: 17px; color: var(--muted-2); text-decoration: line-through; }
.pd-price .save { background: var(--glow-soft); color: #056C7D; font-weight: 600; font-size: 12px; padding: 5px 11px; border-radius: 3px; }
.pd-desc { color: var(--muted); margin: 16px 0; }
.pd-stock { font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.pd-opts { margin: 22px 0; }
.pd-opts .lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .14em; color: var(--muted); margin-bottom: 10px; }
.swatches { display: flex; gap: 9px; }
.swatch { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); cursor: pointer; transition: transform .2s, box-shadow .2s; }
.swatch:hover { transform: scale(1.08); }
.swatch.active { box-shadow: 0 0 0 2px var(--paper), 0 0 0 3px var(--ink); }
.pd-buy { display: flex; gap: 12px; align-items: center; margin: 24px 0 12px; }
.pd-feats { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 26px; padding-top: 26px; border-top: 1px solid var(--line); }
.pd-feats .f { display: flex; align-items: center; gap: 12px; }
.pd-feats .ic { color: var(--ink); flex-shrink: 0; }
.pd-feats .ic svg { width: 21px; height: 21px; }
.pd-feats b { font-size: 13px; display: block; font-weight: 600; }
.pd-feats small { color: var(--muted); font-size: 11.5px; }

/* ============================================================
   ACCESIBILIDAD
   ============================================================ */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--glow-2); outline-offset: 3px; border-radius: 3px;
}
.hero-nav :focus-visible, .footer :focus-visible, .topbar :focus-visible,
.cat-card:focus-visible, .wa-float:focus-visible { outline-color: var(--glow); }

/* ============================================================
   REVELADO AL HACER SCROLL
   ============================================================ */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .65s cubic-bezier(.2,.8,.2,1), transform .65s cubic-bezier(.2,.8,.2,1); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .07s; } .reveal.d2 { transition-delay: .14s; }
.reveal.d3 { transition-delay: .21s; } .reveal.d4 { transition-delay: .28s; }
.no-js .reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
  .topbar .track, .wa-float::before { animation: none; }
  .hero-media img { transform: none; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1200px) {
  .prod-grid, .prod-grid.cols-5 { grid-template-columns: repeat(4, 1fr); }
  .footer .top { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; }
  .footer .col-hide-md { display: none; }
}
@media (max-width: 1024px) {
  /* La imagen pasa a cabecera del bloque y el texto debajo */
  .hero { min-height: auto; padding-bottom: 92px; flex-direction: column; align-items: stretch; }
  .hero-media { position: relative; inset: auto; width: 100%; height: 340px; order: -1; }
  /* Apilado: el velo pasa a ser vertical, hacia el texto de abajo */
  .hero-media::after { background: linear-gradient(180deg, transparent 40%, rgba(242,245,249,.6) 76%, var(--pearl) 100%); }
  .hero-copy { max-width: none; padding: 28px 0 12px; }
  .hero-copy p { max-width: none; }
  .hero-nav { right: 18px; top: 26px; transform: none; }
  .hero-trust { max-width: none; padding-bottom: 34px; }
  .cat-grid { grid-template-columns: repeat(2, 1fr); }
  .newsletter { grid-template-columns: 1fr; }
  .newsletter .pic { min-height: 200px; }
  .newsletter .inner { padding: 36px 28px; }
  .shop { grid-template-columns: 1fr; }
  .filters { position: fixed; top: 0; left: 0; height: 100%; width: 320px; max-width: 90vw; z-index: 100; border-radius: 0; transform: translateX(-100%); transition: transform .35s cubic-bezier(.3,.9,.3,1); overflow-y: auto; box-shadow: var(--shadow-lg); }
  .filters.open { transform: translateX(0); }
  .filter-toggle { display: inline-flex; }
  .pd { grid-template-columns: 1fr; gap: 30px; }
  .footer .top { grid-template-columns: 1fr 1fr 1fr; }
  .menu-label { display: none; }
  .brand { --logo-h: 52px; }
}
@media (max-width: 780px) {
  .section { padding: 54px 0; }
  .prod-grid, .prod-grid.cols-5, .prod-grid.cols-4 { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .promo-grid { grid-template-columns: 1fr; }
  .promo img { width: 46%; }
  .promo::after { background: linear-gradient(90deg, var(--pearl-2) 44%, rgba(232,237,244,.55) 58%, transparent 80%); }
  .trust { grid-template-columns: 1fr 1fr; }
  .trust .item:nth-child(2) { border-right: none; }
  .trust .item:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .footer .top { grid-template-columns: 1fr 1fr; gap: 30px; }
  .circles-wrap { margin-top: -72px; }
  .circles { grid-auto-flow: column; grid-auto-columns: 84px; justify-content: start; padding: 20px 14px; }
}
@media (max-width: 560px) {
  .hero-copy { padding-top: 24px; }
  .hero-trust .it { border-right: none; padding-right: 0; margin-right: 0; width: 100%; margin-bottom: 12px; }
  .cat-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .cat-card { padding: 18px; }
  .trust { grid-template-columns: 1fr; }
  .trust .item { border-right: none; border-bottom: 1px solid var(--line); }
  .trust .item:last-child { border-bottom: none; }
  .footer .top { grid-template-columns: 1fr; }
  .nl-form { flex-direction: column; gap: 10px; }
  .nl-form input { border-right: 1px solid var(--line); border-radius: var(--r-sm); }
  .nl-form .btn { border-radius: var(--r-sm); }
  .wa-float { right: 16px; bottom: 16px; width: 52px; height: 52px; }
  .wa-float .tip { display: none; }
}

/* ============================================================
   PÁGINAS DE CONTENIDO (ayuda, legales, institucionales)
   ------------------------------------------------------------
   Ancho de lectura contenido: en textos largos, una línea de más
   de ~70 caracteres cansa y hace perder el renglón.
   ============================================================ */
.doc { max-width: 760px; }
.doc .kicker { margin-bottom: 26px; }
.doc h2 {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.2vw, 26px); font-weight: 600;
  line-height: 1.25; margin: 44px 0 14px;
  font-variation-settings: "wdth" 100;
}
.doc h2:first-of-type { margin-top: 0; }
.doc p { font-size: 16px; line-height: 1.75; color: var(--ink-2); margin-bottom: 16px; }
.doc a:not(.btn) { color: var(--glow-2); border-bottom: 1px solid var(--glow); padding-bottom: 1px; }
.doc a:not(.btn):hover { color: var(--ink); border-color: var(--ink); }

/* El reset sólo quita las viñetas de <ul>. En <ol> hay que
   suprimirlas a mano o se ven dos numeraciones: la del navegador
   y la de los círculos que dibuja el contador. */
.doc-list, .doc-steps { margin: 0 0 20px; padding-left: 0; list-style: none; }
.doc-list li, .doc-steps li {
  position: relative; padding-left: 26px; margin-bottom: 11px;
  font-size: 16px; line-height: 1.7; color: var(--ink-2);
  list-style: none;
}
.doc-list li::before {
  content: ""; position: absolute; left: 4px; top: 12px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--glow-2);
}
.doc-steps { counter-reset: paso; }
.doc-steps li { counter-increment: paso; }
.doc-steps li::before {
  content: counter(paso); position: absolute; left: 0; top: 2px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--ink); color: #fff;
  font-size: 11px; font-weight: 600; display: grid; place-items: center;
}

.doc-note {
  background: var(--glow-soft); border-left: 3px solid var(--glow-2);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  padding: 16px 20px; margin: 22px 0;
  font-size: 14.5px; line-height: 1.7; color: var(--ink-2);
}

.doc-table-wrap { overflow-x: auto; margin: 20px 0 26px; }
.doc-table { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 420px; }
.doc-table th, .doc-table td { text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--line); }
.doc-table th {
  background: var(--pearl-2); font-weight: 600; font-size: 12px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink);
}
.doc-table td { color: var(--ink-2); }
.doc-table tr:last-child td { border-bottom: none; }

/* Preguntas frecuentes plegables */
.doc-faq { border-bottom: 1px solid var(--line); }
.doc-faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 0; cursor: pointer; list-style: none;
  font-size: 16px; font-weight: 500; color: var(--ink);
  transition: color .2s;
}
.doc-faq summary::-webkit-details-marker { display: none; }
.doc-faq summary::after {
  content: ""; flex-shrink: 0; width: 10px; height: 10px;
  border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .25s, border-color .2s;
}
.doc-faq[open] summary { color: var(--glow-2); }
.doc-faq[open] summary::after { transform: rotate(225deg) translate(-2px, -2px); border-color: var(--glow-2); }
.doc-faq summary:hover { color: var(--glow-2); }
.doc-faq > div { padding-bottom: 18px; }
.doc-faq > div p { margin-bottom: 0; font-size: 15.5px; color: var(--muted); }

/* Línea de etapas del pedido */
.doc-flow { counter-reset: etapa; margin: 20px 0 26px; padding: 0; }
.doc-flow li {
  counter-increment: etapa; position: relative;
  padding: 0 0 26px 42px; list-style: none;
}
.doc-flow li::before {
  content: counter(etapa); position: absolute; left: 0; top: 0;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--ink); color: #fff;
  font-size: 12px; font-weight: 600; display: grid; place-items: center;
}
/* Hilo que une una etapa con la siguiente */
.doc-flow li::after {
  content: ""; position: absolute; left: 13.5px; top: 32px; bottom: 4px;
  width: 1px; background: var(--line);
}
.doc-flow li:last-child { padding-bottom: 0; }
.doc-flow li:last-child::after { display: none; }
.doc-flow b { display: block; font-size: 15.5px; font-weight: 600; margin-bottom: 3px; }
.doc-flow span { font-size: 14.5px; color: var(--muted); line-height: 1.65; }

/* Consulta de pedido */
.doc-track { display: flex; gap: 10px; margin-bottom: 10px; max-width: 520px; }
.doc-track input {
  flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 14px 16px; font-size: 15px; outline: none; background: var(--paper);
  transition: border-color .2s, box-shadow .2s;
}
.doc-track input:focus { border-color: var(--ink); box-shadow: 0 0 0 3px var(--glow-soft); }
.doc-track-help { font-size: 13.5px; color: var(--muted); margin-bottom: 8px; }

.doc-cta { margin: 28px 0 0; }
.doc-updated { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted-2); }

@media (max-width: 560px) {
  .doc h2 { margin-top: 34px; }
  .doc p, .doc-list li, .doc-steps li { font-size: 15.5px; }
  .doc-track { flex-direction: column; }
}

/* ============================================================
   PANELES DE MARCA (sustituyen fotos de relleno)
   ------------------------------------------------------------
   Cuando no hay una foto que aporte —el newsletter, o una promo
   sin producto todavía— se dibuja un panel con el motivo de la
   marca: la malla de nodos del logo, en degradado. Es CSS puro:
   ni pesa, ni depende de una URL externa que pueda fallar.
   ============================================================ */
.pic-brand,
.promo.sin-foto::before {
  background:
    radial-gradient(circle at 22% 28%, rgba(34,211,238,.42) 0, transparent 42%),
    radial-gradient(circle at 78% 72%, rgba(34,211,238,.20) 0, transparent 46%),
    linear-gradient(135deg, var(--ink) 0%, var(--ink-2) 55%, #1E3A4C 100%);
  position: relative;
  overflow: hidden;
}

/* Malla de nodos: puntos y líneas finas, el mismo motivo del fondo */
.pic-brand::after,
.promo.sin-foto::after {
  content: "";
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle, rgba(34,211,238,.55) 1.5px, transparent 1.6px),
    linear-gradient(to right, rgba(255,255,255,.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 54px 54px, 54px 54px, 54px 54px;
  background-position: 27px 27px, 0 0, 0 0;
  -webkit-mask-image: radial-gradient(120% 100% at 30% 30%, #000 20%, transparent 78%);
  mask-image: radial-gradient(120% 100% at 30% 30%, #000 20%, transparent 78%);
}

/* Promo sin foto: el panel va detrás del texto, que sigue legible */
.promo.sin-foto::before {
  content: "";
  position: absolute; top: 0; right: 0; bottom: 0; width: 50%;
  z-index: 0;
}
.promo.sin-foto::after { left: 50%; z-index: 1; }