@charset "utf-8";
/* ══════════════════════════════════════════════════════════════════════════
   ENVASIA · hoja única
   Envase de vidrio · Mérida, Yucatán · Vego Bros SA de CV

   Orden: primero lo que comparten todas las páginas (tokens, base, cromo),
   luego cada página. El cromo es el que más se toca, así que va arriba.

   Dos reglas que no se rompen:
   · Ningún atributo style= en el HTML. Lo que depende del dato —el hex del
     vidrio, la altura en milímetros— se aplica por CSSOM, que la CSP no
     bloquea. Por eso style-src no necesita 'unsafe-inline'.
   · Los campos de color fijos (esmeralda, miel, celeste) no se invierten con
     el tema, así que su texto tampoco: usan --navy, no --tinta.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1 · tokens ─────────────────────────────────────────────────────────── */
:root {
  /* marca */
  --navy:#012453;            /* tinta fija: nunca se invierte */
  --noche:#04142e;
  --esmeralda:#06c692;
  --esm-t:#04543f;           /* el mismo verde, legible como texto */
  --esm-bg:#e6f8f1;
  --wa:#25d366;              /* verde de WhatsApp, es de ellos, no nuestro */

  /* superficie — estos tres SÍ se invierten */
  --tinta:#012453;
  --tinta-2:#51637c;
  --crema:#fbf7f1;
  --papel:#ffffff;
  --linea:#e9e1d5;

  /* acentos de departamento. Fijos: son campos de color, no superficie. */
  --miel:#f7dca0; --salsa:#f0ae97; --cielo:#cbe2e9; --oliva:#cbd9ae; --cobre:#e8c89b;

  /* tipografía */
  --display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --texto:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  --dato:"Geist Mono",ui-monospace,Menlo,Consolas,monospace;

  /* medida */
  --r:18px; --r-ch:12px; --pill:999px;
  --env:1200px; --canal:clamp(16px,4vw,44px);
  --alto-barra:64px;         /* lo publica el JS con el alto real */
  --alto-app:0px;            /* la barra inferior, solo en teléfono */

  /* luz: una sola dirección para todas las sombras proyectadas del sitio */
  --luz-sesgo:-10px; --luz-aplano:9px; --luz-fuerza:.24;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) {
  --tinta:#eaf1f8; --tinta-2:#9fb2c8;
  --crema:#0d1626; --papel:#121d30; --linea:#22314a;
  --esm-t:#4fd9ae; --esm-bg:#0f3a2c;
  color-scheme: dark; } }
:root[data-tema="oscuro"] {
  --tinta:#eaf1f8; --tinta-2:#9fb2c8;
  --crema:#0d1626; --papel:#121d30; --linea:#22314a;
  --esm-t:#4fd9ae; --esm-bg:#0f3a2c;
  color-scheme: dark; }

/* ── 2 · base ───────────────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; }
html {
  /* Que el ancla y el foco de teclado caigan por debajo de todo el cromo fijo. */
  scroll-padding-block-start: calc(var(--alto-barra) + 20px);
  /* 'clip', no 'hidden': hidden convierte html en contenedor de scroll y mata
     el position:sticky de la barra. Lo que se sale es el anillo que late del
     botón de WhatsApp, que al escalar 2.4 pide 9 px más de los que hay. */
  overflow-x: clip;
  scroll-padding-block-end: calc(var(--alto-app) + 20px);
  -webkit-text-size-adjust:100%;
}
body {
  margin:0; background:var(--crema); color:var(--tinta);
  font-family:var(--texto); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  /* Hueco para la barra inferior de teléfono y para la isla del iPhone. */
  padding-block-end: calc(var(--alto-app) + env(safe-area-inset-bottom));
  overflow-x:hidden;
}
h1,h2,h3,h4 { font-family:var(--display); font-weight:800; margin:0;
  letter-spacing:-.032em; line-height:.98; text-wrap:balance; }
p { margin:0; text-wrap:pretty; }
a { color:inherit; text-decoration:none; }
img,svg,video { display:block; max-inline-size:100%; }
button { font:inherit; color:inherit; }
ul,ol,dl,dd { margin:0; padding:0; }
li { list-style:none; }

/* Aro de foco de dos tonos: uno de los dos contrasta siempre, sea sobre crema,
   sobre el noche del héroe o sobre el esmeralda del cierre. */
:focus-visible { outline:3px solid #fff; outline-offset:1px;
  box-shadow:0 0 0 6px var(--navy); border-radius:5px; }

.solo-lector { position:absolute; inline-size:1px; block-size:1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.saltar { position:fixed; inset-block-start:-100px; inset-inline-start:12px;
  z-index:900; background:var(--navy); color:#fff; padding:12px 18px;
  border-radius:var(--pill); font-weight:600; transition:inset-block-start .18s; }
.saltar:focus { inset-block-start:12px; }

/* ── 3 · envoltura ──────────────────────────────────────────────────────── */
.env { max-inline-size:var(--env); margin-inline:auto; padding-inline:var(--canal); }
.seccion { padding-block:clamp(46px,7vw,92px); }
.cejilla { font-family:var(--dato); font-size:11px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--tinta-2); }
.cabezal { display:flex; justify-content:space-between; align-items:flex-end;
  gap:24px; margin-block-end:clamp(26px,3.4vw,40px); flex-wrap:wrap; }
.cabezal h2 { font-size:clamp(28px,4vw,50px); margin-block-start:12px; }
.cabezal p { margin-block-start:14px; color:var(--tinta-2); max-inline-size:46ch; }

/* ── 4 · botones ────────────────────────────────────────────────────────── */
.boton { display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:13px 22px; border-radius:var(--pill); font-size:15px; font-weight:600;
  background:var(--esmeralda); color:var(--navy); border:0; cursor:pointer;
  white-space:nowrap; min-block-size:46px;
  transition: transform .15s ease, filter .15s ease; }
.boton:hover { transform:translateY(-2px); filter:brightness(1.04); }
.boton:active { transform:translateY(0); }
.boton svg { inline-size:18px; block-size:18px; flex:none; }
.boton[data-t="oscuro"] { background:var(--navy); color:#fff;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .18); }
/* Hereda la tinta de su contenedor, así sirve igual sobre el héroe oscuro,
   sobre el campo esmeralda del cierre y sobre la página. */
.boton[data-t="filete"] { background:transparent; color:inherit;
  box-shadow: inset 0 0 0 1.5px color-mix(in oklab, currentColor 55%, transparent); }
.boton[data-t="claro"] { background:#fff; color:var(--navy); }
.boton[data-s="ch"] { padding:9px 16px; font-size:13.5px; min-block-size:40px; }
.acc { display:flex; gap:12px; flex-wrap:wrap; margin-block-start:28px; }

.icono { display:inline-grid; place-items:center; inline-size:44px; block-size:44px;
  border-radius:var(--pill); border:0; background:transparent; color:inherit;
  cursor:pointer; flex:none; }
.icono:hover { background: color-mix(in oklab, currentColor 10%, transparent); }
.icono svg { inline-size:21px; block-size:21px; }

.cuenta { display:inline-grid; place-items:center; min-inline-size:19px;
  block-size:19px; padding-inline:5px; border-radius:var(--pill);
  background:var(--navy); color:#fff; font-family:var(--dato); font-size:11px;
  line-height:1; }

/* ── 1b · alias de la paleta anterior ───────────────────────────────────────
   El catálogo —filtros, popover, ficha, cotización, tarjeta, sombra
   proyectada— son ~800 líneas ya depuradas que no se tocan en este rediseño, y
   hablan la paleta vieja. En vez de reescribirlas, los nombres antiguos pasan a
   ser alias de los nuevos. Así el rediseño entra por el cromo y la portada sin
   arriesgar lo que ya funciona, y los alias se van retirando conforme cada
   bloque se reescriba.

   Los --vitrina-* NO son alias: la baldosa del producto se queda clara en los
   dos temas a propósito. El recorte alfa viene sobre fondo claro y la sombra
   proyectada necesita un piso que la reciba; invertirla deja la botella
   flotando sobre un agujero negro. */
:root {
  --nata:var(--papel);
  --baldosa:#ebeff1;
  --cielo-s:#e4f3f4;
  --tinta-3:var(--tinta-2);
  --senal:#0b5e86;
  --senal-cl:#e6f2f7;
  --alerta:#b3261e;

  --stock:var(--esmeralda);
  --stock-t:var(--esm-t);
  --stock-f:var(--esm-bg);
  --marca-a:var(--navy);
  --marca-b:var(--esmeralda);

  --vitrina:#ebeff1;
  --vitrina-p:#ffffff;
  --vitrina-t:#012453;
  --vitrina-2:#5a6a80;
  --vitrina-l:#d7dfe4;

  --r-s:10px; --r-m:var(--r); --r-l:22px; --r-pill:var(--pill);
  --aire:clamp(72px,8vw,116px);
  --barra-h:var(--alto-barra);
  --lavado-cielo:#f0fbff;

  --t-heroe:clamp(42px,6vw,86px);
  --t-seccion:clamp(28px,4vw,50px);
  --t-micro:140ms cubic-bezier(.2,0,.2,1);
  --t-suave:320ms cubic-bezier(.22,.61,.36,1);
  --t-carta:420ms cubic-bezier(.22,.61,.36,1);

  /* La sombra proyectada de la vitrina usa su propio juego: el sesgo es un
     ángulo y el aplano un factor, no píxeles. Nombres distintos a propósito. */
  --luz-ang:38deg; --luz-plano:.145; --luz-difuso:5px;
}
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) {
  --senal:#62c7e6; --senal-cl:#10293a; --alerta:#ff8a7a;
  --marca-a:#3d7ec4; --lavado-cielo:#16262b; --baldosa:#16233a; --cielo-s:#102a33; } }
:root[data-tema="oscuro"] {
  --senal:#62c7e6; --senal-cl:#10293a; --alerta:#ff8a7a;
  --marca-a:#3d7ec4; --lavado-cielo:#16262b; --baldosa:#16233a; --cielo-s:#102a33; }

/* Tipografía de apoyo que el catálogo usa por clase. */
.display { font-family:var(--display); font-weight:800; letter-spacing:-.032em;
  line-height:.98; text-wrap:balance; }
.dato { font-family:var(--dato); font-variant-numeric:tabular-nums; }
.cod { font-family:var(--dato); font-size:.92em; letter-spacing:.01em; }
.mold { font-size:12px; color:var(--tinta-2); }

/* ── 5 · barra y mega menú ──────────────────────────────────────────────────
   181 modelos en 13 familias y 11 coronas no caben en una fila de enlaces. El
   mega abre las tres preguntas con las que llega un comprador: para qué lo
   quiero, qué forma tiene, y qué tapa le va. */
.barra { position:sticky; inset-block-start:0; z-index:200;
  background: color-mix(in oklab, var(--crema) 86%, transparent);
  backdrop-filter: saturate(170%) blur(14px);
  border-block-end:1px solid transparent; transition:border-color .2s; }
.barra[data-pegada="1"] { border-block-end-color:var(--linea); }
.barra-in { display:flex; align-items:center; gap:clamp(10px,2vw,26px);
  padding-block:10px; }

.marca { display:flex; align-items:center; gap:10px; flex:none; }
.marca img { inline-size:38px; block-size:auto; }
.marca b { font-family:var(--display); font-weight:800; font-size:19px;
  letter-spacing:-.025em; display:block; line-height:1; }
.marca small { display:block; font-size:9.5px; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--tinta-2); margin-block-start:3px; }

.menu { display:flex; align-items:center; gap:4px; }
.menu > a, .menu > button { display:inline-flex; align-items:center; gap:5px;
  padding:9px 13px; border-radius:var(--pill); font-size:15px; font-weight:600;
  border:0; background:transparent; cursor:pointer; white-space:nowrap; }
.menu > a:hover, .menu > button:hover {
  background: color-mix(in oklab, currentColor 8%, transparent); }
.menu svg { inline-size:13px; block-size:13px; transition:rotate .18s ease; }
.menu button[aria-expanded="true"] svg { rotate:180deg; }
.acciones-barra { margin-inline-start:auto; display:flex; align-items:center; gap:6px; }
.corta { display:none; }
@media (width < 1120px) {
  .menu > a { display:none; }
  .larga { display:none; }
  .corta { display:inline; }
}
/* En teléfono la barra superior se queda solo con la marca, Productos y el
   tema: la lista y el botón de cotizar ya están en la barra inferior, y
   repetirlos arriba pedía 530 px de ancho en una pantalla de 375. */
@media (width < 860px) {
  .acciones-barra > .boton { display:none; }
  .barra-in { gap:10px; }
  .marca small { font-size:9px; }
}

.mega { position:absolute; inset-inline:0; inset-block-start:100%; z-index:210;
  background:var(--papel); color:var(--tinta);
  border-block:1px solid var(--linea);
  box-shadow:0 30px 60px -30px rgb(1 36 83 / .3);
  max-block-size: min(76vh, calc(100dvh - var(--alto-barra) - 40px));
  overflow-y:auto; }
.mega[hidden] { display:none; }
.mega .env { display:grid; gap:clamp(18px,3vw,44px); padding-block:28px 32px;
  grid-template-columns: repeat(3, minmax(0,1fr)) minmax(0,.9fr); }
.mega h3 { font-family:var(--dato); font-size:11px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--tinta-2);
  margin-block-end:12px; }
.mega li a { display:flex; justify-content:space-between; gap:12px;
  padding:8px 9px; border-radius:9px; font-size:14.5px; }
.mega li a:hover { background: color-mix(in oklab, var(--tinta) 7%, transparent); }
.mega li a span { font-family:var(--dato); font-size:12px; color:var(--tinta-2); }
.mega .todos { display:inline-block; margin-block-start:8px; padding-inline:9px;
  font-size:13.5px; font-weight:600; color:var(--esm-t); }
.mega .promo { background:var(--miel); color:var(--navy); border-radius:var(--r);
  padding:22px; display:flex; flex-direction:column; position:relative;
  overflow:hidden; }
.mega .promo h4 { font-size:19px; max-inline-size:11ch; }
.mega .promo p { margin-block-start:7px; font-size:13px; max-inline-size:18ch;
  color: color-mix(in oklab, var(--navy) 66%, transparent); }
.mega .promo .boton { margin-block-start:auto; align-self:flex-start;
  position:relative; z-index:2; }
.mega .promo img { position:absolute; inset-block-end:-14px; inset-inline-end:-10px;
  block-size:150px; inline-size:auto;
  filter: drop-shadow(var(--luz-sesgo) var(--luz-aplano) 14px rgb(1 36 83 / .24)); }
@media (width < 1040px) {
  .mega .env { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .mega .promo { grid-column:1 / -1; } }

/* ── 6 · riel de redes ──────────────────────────────────────────────────────
   Pegado al borde izquierdo y centrado. Solo aparece cuando sobra canal a los
   lados de la envoltura de 1200: por debajo de eso se montaría sobre el texto,
   así que se repliega al pie, donde ya están los mismos enlaces. */
.riel { display:none; }
@media (width >= 1340px) {
  .riel { display:flex; position:fixed; inset-block-start:50%;
    inset-inline-start:14px; translate:0 -50%; z-index:150;
    flex-direction:column; gap:4px; padding:8px 6px; border-radius:var(--pill);
    background: color-mix(in oklab, var(--papel) 78%, transparent);
    backdrop-filter: blur(10px) saturate(160%);
    box-shadow: inset 0 0 0 1px var(--linea), 0 18px 40px -24px rgb(1 36 83 / .3); }
  .riel a { display:grid; place-items:center; inline-size:38px; block-size:38px;
    border-radius:50%; color:var(--tinta-2); transition:color .15s, background .15s; }
  .riel a:hover { color:var(--papel); background:var(--navy); }
  .riel a[data-red="whatsapp"]:hover { background:var(--wa); color:#04331a; }
  .riel svg { inline-size:17px; block-size:17px; }
  .riel hr { inline-size:16px; block-size:1px; border:0; margin:4px auto;
    background:var(--linea); }
}

/* ── 7 · barra inferior de teléfono ─────────────────────────────────────────
   Cinco destinos, con el de productos elevado al centro: es el que abre el
   catálogo y el que más se usa. Solo existe en teléfono; en escritorio la
   navegación es la barra de arriba. */
.barra-app { display:none; }
@media (width < 860px) {
  :root { --alto-app:68px; }
  .barra-app { display:grid; position:fixed; inset-inline:0; inset-block-end:0;
    z-index:220; grid-template-columns:repeat(5,1fr); align-items:end;
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    background: color-mix(in oklab, var(--papel) 92%, transparent);
    backdrop-filter: blur(16px) saturate(170%);
    border-block-start:1px solid var(--linea); }
  .barra-app a { display:grid; justify-items:center; gap:3px; padding-block:6px;
    border-radius:12px; color:var(--tinta-2); font-size:10px; font-weight:600;
    position:relative; min-block-size:50px; }
  .barra-app a[aria-current="page"] { color:var(--tinta); }
  .barra-app svg { inline-size:22px; block-size:22px; }
  /* El del centro se sale del flujo hacia arriba: es el acento de la barra. */
  .barra-app .eje { background:var(--esmeralda); color:var(--navy);
    inline-size:54px; block-size:54px; border-radius:18px; align-self:center;
    justify-self:center; place-content:center; gap:0; margin-block-start:-20px;
    box-shadow: 0 10px 22px -8px rgb(6 198 146 / .7); font-size:0; }
  .barra-app .eje svg { inline-size:25px; block-size:25px; }
  /* La pastilla sube 20 px fuera de la fila, así que su rótulo tiene que bajar
     otros tantos para alinearse con los cuatro de al lado. */
  .barra-app .eje span:not(.ico) { position:absolute; inset-block-end:-19px;
    font-size:10px; color:var(--tinta-2); font-weight:600; white-space:nowrap; }
  .barra-app { padding-block-end: calc(10px + env(safe-area-inset-bottom)); }
  .barra-app .cuenta { position:absolute; inset-block-start:2px;
    inset-inline-start:calc(50% + 5px); }
}

/* ── 8 · WhatsApp y asistente ───────────────────────────────────────────────
   El verde es el de WhatsApp a propósito: es el único elemento del sitio que
   no usa la paleta de la marca, porque su trabajo es que se reconozca antes
   de leerlo. En teléfono sube por encima de la barra inferior. */
.wa-fab { position:fixed; z-index:230; inset-inline-end:18px;
  inset-block-end: calc(18px + var(--alto-app) + env(safe-area-inset-bottom));
  inline-size:58px; block-size:58px; border-radius:50%; border:0; cursor:pointer;
  display:grid; place-items:center; background:var(--wa); color:#fff;
  box-shadow: 0 14px 30px -10px rgb(37 211 102 / .66);
  transition: transform .18s ease; }
.wa-fab:hover { transform:scale(1.06); }
.wa-fab svg { inline-size:30px; block-size:30px; }
.wa-fab .punto { position:absolute; inset-block-start:3px; inset-inline-end:3px;
  inline-size:13px; block-size:13px; border-radius:50%; background:#22e06a;
  box-shadow: 0 0 0 2.5px var(--crema); }
.wa-fab .punto::after { content:""; position:absolute; inset:0; border-radius:50%;
  background:#22e06a; animation: pulso 2.2s ease-out infinite; }
@keyframes pulso { from { opacity:.7; scale:1 } to { opacity:0; scale:2.4 } }

.chat { position:fixed; z-index:240; inset-inline-end:18px;
  inset-block-end: calc(86px + var(--alto-app) + env(safe-area-inset-bottom));
  inline-size:min(364px, calc(100vw - 36px)); max-block-size:min(540px, 72dvh);
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--papel); border-radius:20px;
  box-shadow: inset 0 0 0 1px var(--linea), 0 30px 60px -22px rgb(1 36 83 / .42); }
.chat[hidden] { display:none; }
.chat-cab { display:flex; align-items:center; gap:10px; padding:13px 14px;
  background:var(--navy); color:#fff; flex:none; }
.chat-cab img { inline-size:30px; block-size:auto; }
.chat-cab b { font-size:14.5px; display:block; line-height:1.2; }
.chat-cab small { font-size:11.5px; color:rgb(255 255 255 / .66);
  display:flex; align-items:center; gap:5px; }
.chat-cab small::before { content:""; inline-size:7px; block-size:7px;
  border-radius:50%; background:#22e06a; }
.chat-cab .icono { margin-inline-start:auto; inline-size:34px; block-size:34px; }
.chat-hilo { flex:1; overflow-y:auto; padding:14px; display:grid; gap:9px;
  align-content:start; background:var(--crema); }
.chat-msg { max-inline-size:84%; padding:10px 13px; border-radius:15px;
  font-size:14px; line-height:1.45; }
.chat-msg[data-de="bot"] { background:var(--papel); justify-self:start;
  border-end-start-radius:5px; box-shadow: inset 0 0 0 1px var(--linea); }
.chat-msg[data-de="yo"] { background:var(--navy); color:#fff; justify-self:end;
  border-end-end-radius:5px; }
.chat-aviso { font-size:11.5px; color:var(--tinta-2); text-align:center;
  padding:2px 10px; }
.chat-acc { display:flex; flex-wrap:wrap; gap:6px; justify-self:start;
  max-inline-size:94%; }
.chat-acc button, .chat-acc a { padding:7px 12px; border-radius:var(--pill);
  font-size:12.5px; font-weight:600; cursor:pointer; border:0;
  background:var(--esm-bg); color:var(--esm-t); }
.chat-pie { display:flex; gap:7px; padding:10px; flex:none;
  border-block-start:1px solid var(--linea); background:var(--papel); }
.chat-pie input { flex:1; min-inline-size:0; padding:11px 14px; font:inherit;
  font-size:14px; border-radius:var(--pill); border:1px solid var(--linea);
  background:var(--crema); color:var(--tinta); }
.chat-pie button { inline-size:42px; block-size:42px; border-radius:50%; border:0;
  background:var(--esmeralda); color:var(--navy); cursor:pointer;
  display:grid; place-items:center; flex:none; }
.escribiendo { display:flex; gap:4px; padding:13px; }
.escribiendo i { inline-size:6px; block-size:6px; border-radius:50%;
  background:var(--tinta-2); animation: punto 1.1s infinite; }
.escribiendo i:nth-child(2) { animation-delay:.15s }
.escribiendo i:nth-child(3) { animation-delay:.3s }
@keyframes punto { 0%,60%,100% { opacity:.25 } 30% { opacity:1 } }

/* ══════════════════════════════════════════════════════════════════════════
   PORTADA
   Lo que posiciona a un distribuidor es el SURTIDO, no el inventario del día.
   Por eso las cifras del héroe son el catálogo entero y la disponibilidad baja
   a una línea gris dentro de la tarjeta, como en cualquier tienda.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 9 · héroe ──────────────────────────────────────────────────────────── */
.heroe { background:var(--noche); color:#fff; position:relative; overflow:hidden;
  padding-block: clamp(40px,6vw,86px) clamp(52px,7vw,96px); }
/* Un solo halo esmeralda arriba a la derecha. El gradiente de marca aparece
   una vez en toda la página y es aquí. */
.heroe::before { content:""; position:absolute; inset-block-start:-34%;
  inset-inline-end:-14%; inline-size:58%; aspect-ratio:1; border-radius:50%;
  background: radial-gradient(circle, rgb(6 198 146 / .30), transparent 68%);
  pointer-events:none; }
.heroe .env { position:relative; z-index:1; display:grid; gap:clamp(28px,4vw,56px);
  grid-template-columns: minmax(0,1.08fr) minmax(0,1fr); align-items:center; }
.heroe .cejilla { color:var(--esmeralda); }
.heroe h1 { font-size:var(--t-heroe); margin-block-start:16px; }
.heroe h1 em { font-style:normal; color:var(--esmeralda); }
.heroe .entrada { margin-block-start:20px; max-inline-size:46ch; font-size:17px;
  color:rgb(255 255 255 / .76); }
.heroe-foto { border-radius:var(--r); overflow:hidden; aspect-ratio:4/3; }
.heroe-foto img { inline-size:100%; block-size:100%; object-fit:cover; }

.cifras { display:flex; gap:clamp(22px,4vw,54px); margin-block-start:clamp(28px,4vw,44px);
  flex-wrap:wrap; }
.cifras div { display:flex; flex-direction:column; gap:4px; }
.cifras dt { font-family:var(--dato); font-size:clamp(28px,3.4vw,40px);
  font-weight:500; letter-spacing:-.04em; line-height:1; }
.cifras dd { font-size:12px; color:rgb(255 255 255 / .6); }

@media (width < 900px) {
  .heroe .env { grid-template-columns:1fr; }
  .heroe-foto { aspect-ratio:16/10; order:-1; } }

/* ── 10 · cinta de avales ───────────────────────────────────────────────── */
.aval { border-block-end:1px solid var(--linea); background:var(--papel); }
.aval .env { display:flex; flex-wrap:wrap; gap:10px clamp(16px,3vw,38px);
  justify-content:space-between; padding-block:16px; font-size:13.5px;
  color:var(--tinta-2); }
.aval span { display:flex; align-items:center; gap:7px; }
.aval b { color:var(--tinta); font-weight:700; }

/* ── 11 · departamentos ─────────────────────────────────────────────────────
   Uno por línea comercial, y el conteo sale del dato. Así no puede volver a
   pasar que los departamentos no sumen el total del catálogo. */
.deptos { display:grid; gap:14px; grid-template-columns:repeat(4,minmax(0,1fr)); }
.depto { border-radius:var(--r); padding:24px; min-block-size:210px;
  position:relative; overflow:hidden; display:flex; flex-direction:column;
  color:var(--navy); transition: transform .2s ease; }
.depto:hover { transform:translateY(-3px); }
.depto h3 { font-size:20px; max-inline-size:11ch; }
.depto p { margin-block-start:6px; font-size:13.5px; max-inline-size:18ch;
  color: color-mix(in oklab, var(--navy) 66%, transparent); }
.depto .n { margin-block-start:auto; font-family:var(--dato); font-size:12px; }
.depto img { position:absolute; inset-block-end:-6px; inset-inline-end:10px;
  block-size:132px; inline-size:auto; max-inline-size:38%; object-fit:contain;
  object-position:100% 100%;
  filter: drop-shadow(var(--luz-sesgo) var(--luz-aplano) 12px rgb(1 36 83 / .22)); }
@media (width < 1040px) { .deptos { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (width < 560px)  { .deptos { grid-template-columns:1fr; }
  .depto { min-block-size:170px; } }

/* ── 12 · rejilla de más vendidos (portada) ─────────────────────────────── */
.rej { display:grid; gap:14px;
  grid-template-columns:repeat(auto-fill, minmax(min(100%,218px),1fr)); }
@media (width < 700px) { .rej { gap:10px;
  grid-template-columns:repeat(auto-fill, minmax(min(100%,148px),1fr)); } }
.pie-c { display:flex; align-items:center; justify-content:space-between;
  gap:8px; margin-block-start:10px; flex-wrap:wrap; }
.pie-c .boton { min-block-size:38px; padding:7px 14px; font-size:13px; }
.entrega { display:inline-flex; align-items:center; gap:6px; font-size:11.5px;
  color:var(--esm-t); }
.entrega i { inline-size:6px; block-size:6px; border-radius:50%;
  background:var(--esmeralda); flex:none; }
.cinta-top { position:absolute; inset-block-start:9px; inset-inline-start:9px;
  z-index:2; background:var(--miel); color:#5c4310; padding:4px 10px;
  border-radius:var(--pill); font-size:11px; font-weight:700; }

/* ── 13 · filas de línea ────────────────────────────────────────────────── */
.fila { display:grid; gap:clamp(22px,4vw,54px); align-items:center;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
.fila + .fila { margin-block-start:clamp(40px,6vw,70px); }
.fila[data-lado="der"] .fila-foto { order:2; }
.fila-foto { position:relative; border-radius:var(--r); overflow:hidden;
  aspect-ratio:5/4; }
.fila-foto img { position:absolute; inset:0; inline-size:100%; block-size:100%; }
.fila-foto img.obj { object-fit:contain; padding:12% 9%;
  filter: drop-shadow(var(--luz-sesgo) var(--luz-aplano) 20px rgb(1 36 83 / .26)); }
.fila-foto img.foto { object-fit:cover; }
.fila h3 { font-size:clamp(25px,3.2vw,40px); }
.fila p { margin-block-start:14px; color:var(--tinta-2); max-inline-size:44ch; }
.chips { display:flex; gap:7px; flex-wrap:wrap; margin-block-start:18px; }
.chips span { padding:6px 13px; border-radius:var(--pill); font-size:12.5px;
  color:var(--tinta-2); box-shadow: inset 0 0 0 1px var(--linea); }
@media (width < 820px) {
  .fila { grid-template-columns:1fr; }
  .fila[data-lado="der"] .fila-foto { order:0; } }

/* ── 14 · reseñas ───────────────────────────────────────────────────────────
   La sección está lista para conectarse al perfil de Google Business del
   negocio. Mientras no exista ese perfil, el contenido va rotulado como
   ejemplo y así se queda: publicar reseñas inventadas como si fueran reales es
   engañoso con el comprador, y el daño cae sobre Envasia. */
.resenas { background:var(--papel); }
.res-cab { display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  margin-block-end:28px; }
.res-nota { display:flex; align-items:baseline; gap:10px; }
.res-nota b { font-family:var(--dato); font-size:44px; font-weight:500;
  letter-spacing:-.04em; line-height:1; }
.estrellas { display:inline-flex; gap:2px; color:#f5a623; }
.estrellas svg { inline-size:17px; block-size:17px; }
.estrellas[data-vacias] svg:nth-last-child(-n+1) { opacity:.28; }
.res-fuente { font-size:13px; color:var(--tinta-2); }
.res-ejemplo { margin-inline-start:auto; font-size:11px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; padding:7px 13px;
  border-radius:var(--pill); background:var(--miel); color:#5c4310; }
.res-rejilla { display:grid; gap:14px;
  grid-template-columns:repeat(auto-fit, minmax(min(100%,268px),1fr)); }
.resena { background:var(--crema); border-radius:var(--r); padding:22px;
  box-shadow: inset 0 0 0 1px var(--linea); display:flex; flex-direction:column;
  gap:12px; }
.resena p { font-size:14.5px; }
.resena footer { margin-block-start:auto; display:flex; align-items:center; gap:10px; }
.resena .ini { inline-size:34px; block-size:34px; border-radius:50%; flex:none;
  display:grid; place-items:center; background:var(--navy); color:#fff;
  font-weight:700; font-size:13px; }
.resena b { font-size:13.5px; display:block; line-height:1.3; }
.resena small { font-size:11.5px; color:var(--tinta-2); }

/* ── 15 · pasos y preguntas ─────────────────────────────────────────────── */
.pasos { display:grid; gap:16px; grid-template-columns:repeat(3,minmax(0,1fr));
  counter-reset:p; }
.paso { background:var(--papel); border-radius:var(--r); padding:26px;
  box-shadow: inset 0 0 0 1px var(--linea); counter-increment:p; }
.paso::before { content:counter(p); display:grid; place-items:center;
  inline-size:30px; block-size:30px; border-radius:50%;
  font-family:var(--dato); font-size:13px; color:var(--esm-t);
  background:var(--esm-bg); margin-block-end:16px; }
.paso h3 { font-size:18px; }
.paso p { margin-block-start:8px; font-size:14.5px; color:var(--tinta-2); }
@media (width < 820px) { .pasos { grid-template-columns:1fr; } }

.faq { display:grid; gap:10px; }
.faq details { background:var(--papel); border-radius:var(--r); padding:4px 22px;
  box-shadow: inset 0 0 0 1px var(--linea); }
.faq summary { cursor:pointer; font-weight:600; font-size:16px; list-style:none;
  padding-block:18px; display:flex; justify-content:space-between; gap:16px;
  align-items:center; min-block-size:44px; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; font-family:var(--dato); font-size:20px;
  color:var(--tinta-2); flex:none; }
.faq details[open] summary::after { content:"−"; }
.faq details p { padding-block-end:18px; color:var(--tinta-2); font-size:14.5px;
  max-inline-size:62ch; }

/* ── 16 · visítanos y cierre ────────────────────────────────────────────── */
.visita { display:grid; gap:clamp(22px,4vw,46px);
  grid-template-columns: minmax(0,1fr) minmax(0,.85fr); align-items:center; }
.contacto { display:grid; gap:12px; }
.contacto div { display:flex; flex-direction:column; gap:2px; }
.contacto dt { font-family:var(--dato); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--tinta-2); }
.contacto dd { font-size:15.5px; font-weight:600; }
.contacto dd a { display:inline-block; padding-block:5px; }
.mapa { border-radius:var(--r); min-block-size:270px; display:grid;
  place-items:center; text-align:center; padding:34px;
  box-shadow: inset 0 0 0 1px var(--linea); background:var(--crema); }
@media (width < 820px) { .visita { grid-template-columns:1fr; } }

.cierre { background:var(--esmeralda); color:var(--navy); }
.cierre .env { padding-block:clamp(46px,7vw,86px); display:grid; gap:30px;
  grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); align-items:center; }
.cierre h2 { font-size:clamp(29px,4.4vw,54px); }
.cierre p { margin-block-start:14px; max-inline-size:40ch;
  color: color-mix(in oklab, var(--navy) 84%, transparent); }
.cierre .contacto dt { color: color-mix(in oklab, var(--navy) 70%, transparent); }
.cierre .contacto dd, .cierre .contacto dd a { color:var(--navy); }
@media (width < 820px) { .cierre .env { grid-template-columns:1fr; } }

/* ── 17 · pie ───────────────────────────────────────────────────────────── */
.pie { background:var(--navy); color:rgb(255 255 255 / .64); }
.pie .env { padding-block:40px 46px; display:grid; gap:28px;
  grid-template-columns: 1.3fr repeat(3, minmax(0,1fr)); }
.pie-lockup { inline-size:190px; block-size:auto; margin-block-end:14px; }
.pie h4 { font-family:var(--dato); font-size:11px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:rgb(255 255 255 / .42);
  margin-block-end:14px; }
.pie ul { display:grid; gap:2px; font-size:13.5px; }
.pie li a { display:inline-block; padding-block:7px; }
.pie a:hover { color:#fff; }
.pie p { font-size:13.5px; }
.pie-redes { display:flex; gap:8px; margin-block-start:16px; }
.pie-redes a { display:grid; place-items:center; inline-size:38px; block-size:38px;
  border-radius:50%; background:rgb(255 255 255 / .09); color:#fff; }
.pie-redes a:hover { background:rgb(255 255 255 / .2); }
.pie-redes svg { inline-size:17px; block-size:17px; }
.pie-legal { grid-column:1 / -1; padding-block-start:24px; font-size:12px;
  border-block-start:1px solid rgb(255 255 255 / .12); color:rgb(255 255 255 / .46); }
@media (width < 900px) { .pie .env { grid-template-columns:1fr 1fr; } }
@media (width < 560px) { .pie .env { grid-template-columns:1fr; } }

/* ══════════════════════════════════════════════════════════════════════════
   PÁGINA DE ENVASE  ·  /envase/<molde>-<nombre>.html
   Una por producto. Es la página que contesta la búsqueda de Google
   "botella bordalesa 750 ml Mérida", así que lleva la ficha completa, el
   JSON-LD de producto y el camino a cotizar sin volver atrás.
   ══════════════════════════════════════════════════════════════════════════ */

.miga { font-size:12.5px; color:var(--tinta-2); padding-block:18px 0; }
.miga ol { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.miga li::after { content:"/"; margin-inline-start:6px; opacity:.5; }
.miga li:last-child::after { content:none; }
.miga a:hover { color:var(--tinta); text-decoration:underline; }
.miga [aria-current] { color:var(--tinta); }

.envase { display:grid; gap:clamp(24px,4vw,56px); padding-block:clamp(22px,3vw,40px);
  grid-template-columns: minmax(0,.9fr) minmax(0,1fr); align-items:start; }

/* La foto se queda pegada mientras se recorre la ficha: en un envase alto la
   tabla mide más que la imagen y perderla de vista es perder la referencia. */
.envase-foto { position:sticky; inset-block-start: calc(var(--alto-barra) + 16px);
  background:var(--vitrina); border-radius:var(--r); aspect-ratio:4/5;
  overflow:hidden; }
.envase-foto img { position:absolute; inset:0; inline-size:100%; block-size:100%;
  object-fit:contain; padding:9% 12%;
  filter: drop-shadow(var(--luz-sesgo) var(--luz-aplano) 18px rgb(1 36 83 / .26)); }
@media (width < 820px) {
  .envase { grid-template-columns:1fr; }
  .envase-foto { position:static; aspect-ratio:1; } }

.envase h1 { font-size:clamp(28px,3.8vw,46px); margin-block-start:10px; }
.envase-med { margin-block-start:14px; font-family:var(--dato); font-size:15px;
  color:var(--tinta-2); }
.envase .pills-fila { display:flex; flex-wrap:wrap; gap:7px; margin-block-start:18px; }

.tabla { margin-block-start:26px; border-block-start:1px solid var(--linea); }
.tabla div { display:grid; grid-template-columns: 11rem 1fr; gap:14px;
  padding-block:13px; border-block-end:1px solid var(--linea); }
.tabla dt { font-size:13.5px; color:var(--tinta-2); }
.tabla dd { font-size:14.5px; font-weight:600; }
.tabla .cod { font-weight:500; }
@media (width < 520px) { .tabla div { grid-template-columns:1fr; gap:2px; } }

.envase-acc { display:flex; gap:10px; flex-wrap:wrap; margin-block-start:26px; }
.nota { margin-block-start:18px; padding:14px 16px; border-radius:var(--r-s);
  background:var(--esm-bg); color:var(--esm-t); font-size:13.5px; }
.nota[data-t="aviso"] { background: color-mix(in oklab, var(--miel) 60%, transparent);
  color:#5c4310; }

/* Hermanos: mismos milímetros de corona. Es la recirculación que de verdad
   sirve en este catálogo — quien busca un envase busca el que le queda a su
   tapa, no el que se le parece. */
.hermanos { padding-block:clamp(40px,6vw,76px); }

/* ── herramienta · buscador por tapa ────────────────────────────────────────
   "Tengo esta tapa, ¿qué envases le quedan?" es la pregunta con la que llega
   el comprador, y hasta hoy se contestaba a mano por WhatsApp. */
.tapa { background:var(--papel); border-radius:var(--r); padding:clamp(22px,3vw,34px);
  box-shadow: inset 0 0 0 1px var(--linea); }
.tapa-campos { display:flex; gap:10px; flex-wrap:wrap; margin-block-start:20px; }
.campo { display:flex; flex-direction:column; gap:6px; min-inline-size:148px; flex:1; }
.campo span { font-family:var(--dato); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--tinta-2); }
.campo select, .campo input { padding:12px 14px; font:inherit; font-size:15px;
  border-radius:var(--r-s); border:1px solid var(--linea);
  background:var(--crema); color:var(--tinta); min-block-size:46px; }
.tapa-res { margin-block-start:22px; }
.tapa-res .rej { margin-block-start:14px; }
.tapa-vacio { padding:22px; border-radius:var(--r-s); background:var(--crema);
  color:var(--tinta-2); font-size:14.5px; }

/* ── herramienta · comparador ───────────────────────────────────────────────
   Dos o tres envases a escala real sobre la misma línea de piso. El --mmpx lo
   escribe el JS por elemento, igual que en el estante. */
.comparador { display:flex; gap:clamp(18px,4vw,46px); align-items:flex-end;
  justify-content:center; padding:clamp(22px,4vw,40px) 20px 0;
  background:var(--vitrina); border-radius:var(--r); overflow-x:auto;
  position:relative; }
.comparador::after { content:""; position:absolute; inset-inline:0;
  inset-block-end:52px; block-size:1px;
  background: linear-gradient(90deg, transparent, var(--vitrina-l) 14%,
              var(--vitrina-l) 86%, transparent); }
.comp-pieza { text-align:center; flex:none; position:relative; z-index:1; }
.comp-pieza img { block-size: calc(var(--mm) * var(--mmpx, .8px)); inline-size:auto;
  margin-inline:auto; object-fit:contain;
  filter: drop-shadow(var(--luz-sesgo) var(--luz-aplano) 14px rgb(1 36 83 / .26)); }
.comp-pieza figcaption { padding-block:10px 20px; color:var(--vitrina-t); }
.comp-pieza b { display:block; font-size:13px; max-inline-size:16ch; }
.comp-pieza small { font-family:var(--dato); font-size:11px; color:var(--vitrina-2); }
@media (width < 700px) { .comparador { --mmpx:.52px; } }

/* ========================================================================
   LO QUE SE CONSERVA DEL SISTEMA ANTERIOR
   Estos bloques son el catalogo y la tarjeta: ya pasaron una revision
   adversarial y catalogo.js depende de sus nombres de clase. Se traen
   tal cual; hablan la paleta vieja por los alias de la seccion 1b.
   ======================================================================== */

/* -- conservado - escena y sombra proyectada ---------------------- */
/* ── 7. escena y sombra proyectada (el elemento firma) ──────────────────
   La escena es una CAJA de tamaño conocido, no una imagen a tamaño natural.
   Dejar que cada recorte se pintara a su tamaño intrínseco hacía que el frasco
   de pimiento ocupara el 29 % de su baldosa y la bordalesa el 79 %: la rejilla
   se veía como fotos sueltas, no como una sesión. Con la caja fija más
   object-fit: contain, cada envase crece hasta donde su silueta lo permite y
   todos apoyan en la misma línea de piso.                                   */

.escena { position: relative; }

.escena img.cuerpo, .escena img.proyeccion {
  inline-size: 100%; block-size: 100%;
  max-inline-size: none; max-block-size: none;
  object-fit: contain;
  object-position: 50% 100%;   /* apoyados en el piso, no flotando al centro */
}

/* La proyección es el MISMO recorte alfa del envase, ennegrecido, achatado
   contra el piso y sesgado. Al compartir --luz-* con las otras 180, todas las
   sombras caen hacia el mismo lado y con la misma dureza. El origen de la
   transformación es el pie de la caja, o sea la base del envase. */
.proyeccion {
  position: absolute; inset: 0;
  transform-origin: 50% 100%;
  transform: skewX(var(--luz-sesgo)) scaleY(var(--luz-aplano));
  filter: brightness(0) blur(var(--luz-difuso));
  opacity: var(--luz-fuerza);
  pointer-events: none;
}

/* La sombra de contacto: dura y corta, justo donde el vidrio toca. Sin ella el
   envase flota sobre su propia proyección. */
.escena::after {
  content: ""; position: absolute;
  inset-block-end: -3px; inset-inline-start: 50%;
  translate: -50% 0;
  inline-size: 46%; block-size: 9px;
  background: radial-gradient(closest-side ellipse,
              color-mix(in oklab, var(--vitrina-t) 32%, transparent), transparent);
  filter: blur(2px);
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .escena img.cuerpo, .proyeccion { transition: translate var(--t-carta), scale var(--t-carta); }
}

/* -- conservado - existencias ------------------------------- */
/* Existencias: misma columna que las de detección, arriba del todo. El punto
   lleva el esmeralda de marca; el texto no puede llevarlo (2.2:1 sobre blanco),
   por eso va en --stock-t. La esquina derecha queda libre para el botón. */
.pill[data-uso="stock"], .pill-stock {
  background: color-mix(in oklab, var(--stock-f) 92%, transparent);
  color: var(--stock-t);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--stock) 34%, transparent);
}
.pill[data-uso="stock"] i, .pill-stock i {
  inline-size: 7px; block-size: 7px; border-radius: 50%;
  background: var(--stock); flex: none;
}
/* Fuera de la tarjeta —en la ficha y en la lista— es texto corrido. */
.pill-stock {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 9px 4px 7px; border-radius: var(--r-pill);
  font-size: 11px; font-weight: 600; vertical-align: 1px;
}
.pill-stock[data-tam="ch"] { padding: 3px 7px 3px 5px; font-size: 10px; }

/* -- conservado - pastillas --------------------------------------- */
/* ── 8. pastillas ───────────────────────────────────────────────────────── */

/* Dos familias con dos trabajos distintos: navegar y reconocer. */

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: var(--r-pill); white-space: nowrap;
}

/* NAVEGACIÓN — pastilla blanca centrada sobre la foto. Dice a dónde lleva. */
.pill[data-uso="nav"] {
  padding: 11px 22px;
  background: var(--vitrina-p); color: var(--vitrina-t);
  font-size: 14px; font-weight: 600; letter-spacing: -.005em;
  box-shadow: 0 2px 9px rgb(23 20 18 / .15), 0 1px 2px rgb(23 20 18 / .08);
  transition: scale var(--t-suave), box-shadow var(--t-suave);
}
.pill[data-uso="nav"][data-tam="ch"] { padding: 8px 15px; font-size: 12.5px; }

/* DETECCIÓN — arriba a la izquierda de la baldosa, siempre visible, máximo dos.
   Su trabajo es que reconozcas el envase sin leer la ficha. */
.pill[data-uso="det"] {
  padding: 4px 9px 4px 8px;
  background: color-mix(in oklab, var(--vitrina-p) 84%, transparent);
  -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--vitrina-t) 11%, transparent);
  color: var(--vitrina-t);
  font-size: 11px; font-weight: 600; letter-spacing: -.003em;
}
.pill[data-uso="det"] i {
  inline-size: 9px; block-size: 9px; border-radius: 50%;
  background: var(--c);
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / .22);
  flex: none;
}
.pill[data-uso="det"][data-estado="pendiente"] {
  color: var(--vitrina-2); font-weight: 500;
}

.pills-det {
  position: absolute; inset-block-start: 12px; inset-inline-start: 12px;
  z-index: 2; display: flex; flex-direction: column;
  align-items: flex-start; gap: 5px;
  /* Techo de ancho: el botón de agregar vive en la esquina derecha y una
     pastilla larga se le metía debajo. 54px es el botón más su aire. */
  max-inline-size: calc(100% - 54px);
}
.pills-det .pill {
  max-inline-size: 100%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* -- conservado - tarjeta de producto ----------------------------- */
/* ── 9. tarjeta de producto ─────────────────────────────────────────────── */

.rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 236px), 1fr));
  gap: 30px 26px;
}
/* Cuatro por fila, no seis: la referencia usa seis porque los cosméticos son
   anchos; con envases esbeltos en baldosa vertical, cuatro respira. */
.rejilla[data-cols="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.pieza { position: relative; }

.baldosa {
  position: relative;
  aspect-ratio: 4 / 5;      /* vertical: 91 de 139 recortes son >2.2× más altos que anchos */
  background: var(--vitrina);
  border-radius: var(--r-m);
  overflow: hidden;
  display: grid;
  transition: box-shadow var(--t-suave);
}
/* La escena se ancla por insets, no por porcentaje de alto: en una fila de
   rejilla dimensionada por su contenido, un block-size en % es circular y el
   navegador lo resolvía en 974 px sobre una baldosa de 388. Los insets se
   resuelven contra la caja de la baldosa, que sí es definida por aspect-ratio. */
.baldosa .escena {
  position: absolute;
  inset-inline: 13%;
  inset-block: 13% 9%;
}

.pieza-liga { display: block; }
.pieza-txt {
  padding-block-start: 15px; text-align: center;
}
.pieza-txt h3 {
  font-size: 14.5px; font-weight: 500; line-height: 1.32;
  letter-spacing: -.008em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-block-size: 2.64em;
}
/* Donde la referencia pone el precio va la medida: el catálogo no publica
   precios y la medida es el dato que decide la compra. */
.pieza-txt .medida {
  margin-block-start: 4px; font-size: 13px; color: var(--tinta-2);
}
.pieza-txt .mold { margin-block-start: 7px; }

@media (hover: hover) {
  .pieza:hover .baldosa { box-shadow: 0 14px 30px -12px rgb(23 20 18 / .26); }
  .pieza:hover img.cuerpo { translate: 0 -7px; scale: 1.025; }
  .pieza:hover .proyeccion { scale: 1.07 1; opacity: calc(var(--luz-fuerza) * .72); }
}

/* Acción de cotizar: aparece al pasar el cursor, pero existe siempre para
   teclado y lector de pantalla. */
.cotizar-b {
  position: absolute; inset-block-start: 10px; inset-inline-end: 10px; z-index: 3;
  display: grid; place-items: center;
  inline-size: 34px; block-size: 34px; border-radius: var(--r-pill);
  background: var(--vitrina-p); color: var(--vitrina-t);
  box-shadow: 0 2px 8px rgb(23 20 18 / .18);
  opacity: 0; scale: .82;
  transition: opacity var(--t-micro), scale var(--t-micro), background var(--t-micro);
}
.pieza:hover .cotizar-b, .cotizar-b:focus-visible { opacity: 1; scale: 1; }
.cotizar-b svg { inline-size: 16px; block-size: 16px; }
.cotizar-b[aria-pressed="true"] {
  opacity: 1; scale: 1; background: var(--senal); color: #fff;
}

/* Diferir el pintado de lo que está fuera de pantalla: con 181 baldosas, cada
   una con su sombra desenfocada, esto es la diferencia entre fluido y pesado. */
.rejilla > .pieza {
  content-visibility: auto;
  /* Medido, no estimado: el alto real de la tarjeta por tramo. Antes decía
     380 px para todos y en escritorio ancho se quedaba un 22 % corto. */
  contain-intrinsic-size: auto 470px;
}

/* -- conservado - buscador y paneles ------------------------------ */
/* ── 15. buscador y paneles ─────────────────────────────────────────────── */

/* El panel vive en la CAPA SUPERIOR, no dentro de su desplegable. Colgado del
   DOM, la cinta de filtros —que se desliza en horizontal y por tanto es
   contenedor de scroll— lo recortaba a su propio alto: 43 px, es decir nada.
   Un popover no lo recorta ningún ancestro. Va en modo manual porque 'auto' se
   cierra con el primer clic en cualquier sitio, incluido el chip que lo abre.
   La posición la calcula catalogo.js del rectángulo del chip, que es lo mismo
   que resolvía este CSS cuando el panel era hijo suyo. */
.desplegable { position: relative; }
.panel {
  position: fixed; margin: 0; inset: auto;
  z-index: 70; min-inline-size: 232px; max-block-size: min(60vh, 420px);
  overflow-y: auto; overscroll-behavior: contain;
  padding: 10px; border-radius: var(--r-m);
  background: var(--papel);
  box-shadow: 0 1px 2px rgb(23 20 18 / .1), 0 12px 34px -8px rgb(23 20 18 / .26);
  border: 1px solid var(--linea);
  opacity: 1; translate: 0 0; scale: 1;
  transition: opacity var(--t-micro), translate var(--t-micro),
              scale var(--t-micro), display var(--t-micro);
  transition-behavior: allow-discrete;
}
@starting-style {
  .panel:popover-open { opacity: 0; translate: 0 -6px; scale: .98; }
}
.panel:not(:popover-open) { opacity: 0; translate: 0 -6px; scale: .98; }
/* En el teléfono ocupa el ancho útil: un panel de 232 px anclado al chip se
   sale por la derecha cuando el chip está al final de la cinta. */
@media (width < 560px) {
  .panel { inline-size: calc(100vw - var(--canal) * 2); min-inline-size: 0; }
}

.panel-op {
  display: flex; align-items: center; gap: 10px;
  inline-size: 100%; padding: 9px 11px; border-radius: var(--r-s);
  font-size: 14px; text-align: start;
  transition: background var(--t-micro);
}
.panel-op:hover { background: var(--nata); }
.panel-op[aria-checked="true"] { background: var(--senal-cl); color: var(--senal); font-weight: 600; }
.panel-op .n { margin-inline-start: auto; font-size: 12px; color: var(--tinta-3); }
.panel-op[aria-checked="true"] .n { color: inherit; }

.buscador {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 15px; border-radius: var(--r-pill);
  background: var(--nata);
  box-shadow: inset 0 0 0 1px var(--linea);
  transition: box-shadow var(--t-micro), background var(--t-micro);
}
.buscador:focus-within { box-shadow: inset 0 0 0 1px var(--tinta); background: var(--papel); }
.buscador svg { inline-size: 17px; block-size: 17px; color: var(--tinta-3); flex: none; }
.buscador input {
  border: 0; background: none; outline: none;
  inline-size: 100%; font-size: 14px;
}
.buscador input::placeholder { color: var(--tinta-3); }

/* -- conservado - catalogo ---------------------------------------- */
/* ── 16. página de catálogo ─────────────────────────────────────────────── */

.filtros {
  position: sticky; inset-block-start: var(--barra-h); z-index: 50;
  background: color-mix(in oklab, var(--papel) 90%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  border-block-end: 1px solid var(--linea);
}
.filtros-in {
  display: flex; align-items: center; gap: 10px;
  padding-block: 14px; flex-wrap: wrap;
}
.filtros .buscador { inline-size: min(310px, 100%); margin-inline-end: auto; }

/* La cinta agrupa todas las pastillas. En escritorio se comporta como una fila
   más de la barra; en pantalla chica se convierte en el carril que se desliza. */
.filtros-cinta {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  min-inline-size: 0;
}

/* En el teléfono los filtros no se apilan: se deslizan. Apilados ocupaban tres
   renglones y, con la cabecera encima, se comían el 40 % del alto útil. */
@media (width < 860px) {
  .filtros-in { flex-direction: column; align-items: stretch; padding-block: 11px; gap: 9px; }
  .filtros .buscador { inline-size: 100%; margin-inline-end: 0; }
  .filtros-cinta {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    /* El canal lateral se absorbe en el padding para que la primera y la última
       pastilla no queden pegadas al borde al desplazar. */
    margin-inline: calc(var(--canal) * -1);
    padding-inline: var(--canal);
  }
  .filtros-cinta::-webkit-scrollbar { display: none; }
  .filtros-cinta > * { flex: none; }
}

.chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: var(--r-pill);
  font-size: 13.5px; font-weight: 500; color: var(--tinta-2);
  box-shadow: inset 0 0 0 1px var(--linea);
  transition: box-shadow var(--t-micro), color var(--t-micro), background var(--t-micro);
}
.chip:hover { color: var(--tinta); box-shadow: inset 0 0 0 1px var(--tinta-3); }
.chip[aria-expanded="true"], .chip[data-activo="1"] {
  color: var(--senal); background: var(--senal-cl);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--senal) 38%, transparent);
  font-weight: 600;
}
.chip svg { inline-size: 14px; block-size: 14px; }
.chip .n { color: var(--tinta-3); font-size: 12px; }
.chip[data-activo="1"] .n { color: inherit; }

.pt-stock {
  inline-size: 7px; block-size: 7px; border-radius: 50%;
  background: var(--stock); flex: none;
}
.chip:has(.pt-stock)[data-activo="1"] {
  color: var(--stock-t); background: var(--stock-f);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--stock) 38%, transparent);
}

.resumen {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding-block: 24px 26px;
  font-size: 13.5px; color: var(--tinta-2);
}
.resumen b { color: var(--tinta); font-size: 15px; }
.resumen .res-stock {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--stock-t); font-weight: 600;
}
.res-stock i {
  inline-size: 7px; block-size: 7px; border-radius: 50%; background: var(--stock);
}

.vacio {
  padding-block: 90px; text-align: center; color: var(--tinta-2);
}
.vacio h3 { font-size: 22px; color: var(--tinta); margin-block-end: 8px; }

.pieza.oculta { display: none; }

/* Reserva de alto SOLO mientras la rejilla está vacía. Las 181 tarjetas las
   pinta catalogo.js, y hasta que entran el div mide cero: todo lo que va
   debajo saltaba de golpe. Medido: CLS 0.9488 sin esto, 0.0001 con esto.
   :empty deja de casar en cuanto entra la primera tarjeta, así que un filtro
   que devuelve tres resultados no arrastra una reserva que ya no toca. */
.rejilla:empty { min-block-size: 180vh; }

/* -- conservado - cotizacion -------------------------------------- */
/* ── 17. cotización ─────────────────────────────────────────────────────── */

dialog.hoja {
  margin: 0 0 0 auto; block-size: 100dvh; max-block-size: none;
  inline-size: min(430px, 100%); max-inline-size: none;
  border: 0; padding: 0;
  background: var(--papel); color: var(--tinta);
  box-shadow: -20px 0 60px -20px rgb(23 20 18 / .3);
  translate: 0 0;
  transition: translate var(--t-suave), display var(--t-suave), overlay var(--t-suave);
  transition-behavior: allow-discrete;
}
dialog.hoja:not([open]) { translate: 100% 0; }
@starting-style { dialog.hoja[open] { translate: 100% 0; } }
dialog.hoja::backdrop {
  background: rgb(23 20 18 / .34);
  opacity: 1;
  transition: opacity var(--t-suave), display var(--t-suave), overlay var(--t-suave);
  transition-behavior: allow-discrete;
}
dialog.hoja:not([open])::backdrop { opacity: 0; }
@starting-style { dialog.hoja[open]::backdrop { opacity: 0; } }

.hoja-in { display: grid; grid-template-rows: auto 1fr auto; block-size: 100%; }
.hoja-cab {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 22px 24px; border-block-end: 1px solid var(--linea);
}
.hoja-cab h2 { font-size: 18px; font-weight: 600; }
/* align-content: start o la rejilla reparte el alto sobrante entre los
   renglones y con dos envases quedan separados media pantalla. */
.hoja-lista { overflow-y: auto; padding: 12px 16px; display: grid; gap: 4px; align-content: start; }
.hoja-pie { padding: 20px 24px; border-block-start: 1px solid var(--linea); display: grid; gap: 10px; }

.renglon {
  display: grid; grid-template-columns: 54px minmax(0, 1fr) auto auto;
  align-items: center; gap: 12px; padding: 9px 8px; border-radius: var(--r-s);
  transition: background var(--t-micro);
}
.renglon:hover { background: var(--nata); }
.renglon .mini {
  aspect-ratio: 1; border-radius: var(--r-s);
  background: var(--vitrina); display: grid; place-items: center; padding: 5px;
}
.renglon .mini img { max-block-size: 100%; max-inline-size: 100%; inline-size: auto; }
.renglon-txt { min-inline-size: 0; }
.renglon h4 { font-size: 13px; font-weight: 500; line-height: 1.3; }
.renglon p { font-size: 11.5px; color: var(--tinta-2); }
.renglon .quitar { color: var(--tinta-3); padding: 6px; }
.renglon .quitar:hover { color: var(--alerta); }

/* Cantidad por renglón: el cliente de a pie pide piezas y el mayorista pide
   tarimas. Una lista sin cantidad obliga a preguntarlo por WhatsApp igual. */
.cant input {
  inline-size: 62px; padding: 7px 8px;
  border: 0; border-radius: var(--r-s);
  background: var(--nata); color: inherit;
  box-shadow: inset 0 0 0 1px var(--linea);
  font: inherit; font-size: 13px; font-variant-numeric: tabular-nums;
  text-align: center;
}
.cant input:focus-visible { box-shadow: inset 0 0 0 2px var(--senal); outline: none; }

.aviso {
  position: fixed; inset-block-end: 26px; inset-inline-start: 50%;
  translate: -50% 0; z-index: 120;
  padding: 12px 22px; border-radius: var(--r-pill);
  background: var(--tinta); color: var(--papel);
  font-size: 13.5px; font-weight: 500;
  box-shadow: 0 10px 30px -8px rgb(23 20 18 / .4);
  transition: opacity var(--t-suave), translate var(--t-suave), display var(--t-suave);
  transition-behavior: allow-discrete;
}
/* En reposo se apaga, pero NO con display:none ni hidden: el nodo tiene que
   seguir en el árbol o el lector de pantalla no tiene dónde oír el cambio. */
.aviso[data-visible="0"] {
  opacity: 0; translate: -50% 12px;
  visibility: hidden; pointer-events: none;
}

.vaciar {
  grid-column: 1 / -1;
  padding: 10px; border-radius: var(--r-s);
  font-size: 13px; font-weight: 500; color: var(--tinta-3);
}
.vaciar:hover { color: var(--alerta); }
.vaciar[data-confirmar="1"] { color: var(--alerta); font-weight: 600; }

.pie-contacto {
  background: var(--nata);
  box-shadow: inset 0 0 0 1px var(--linea);
  padding: 20px 22px; min-inline-size: min(300px, 100%);
}
.pie-contacto dt { color: var(--tinta-3); }
.pie-contacto dd { color: var(--tinta); }

/* -- conservado - movimiento reducido ----------------------------- */
/* ── 19. movimiento reducido ────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
  .pieza:hover img.cuerpo, .linea-c:hover .linea-foto img, .bote:hover .escena {
    translate: none; scale: none;
  }
}

/* Impresión: el cliente va a imprimir esto para la junta. */
@media print {
  .barra, .filtros, .cotizar-b, .saltar, dialog, .aviso { display: none !important; }
  .seccion { padding-block: 24px; }
  .rejilla > .pieza { content-visibility: visible; }
  body { background: #fff; color: #000; }
}

/* -- conservado - piezas sueltas ---------------------------------- */
/* ── 20. piezas que faltaban del sistema ────────────────────────────────── */

/* Escala real del héroe: 1 mm de vidrio = --mmpx en pantalla. Es la única
   medida del sitio que no es decorativa. */
.vitral { --mmpx: 1.06px; }
@media (width < 1180px) { .vitral { --mmpx: .88px; } }
@media (width < 900px)  { .vitral { --mmpx: .95px; } }
@media (width < 520px)  { .vitral { --mmpx: .74px; } }

/* Los 42 sin ficha no tienen recorte alfa: su foto trae fondo blanco. La
   baldosa se pone blanca para que ese fondo no se lea como un parche, y se
   quedan sin sombra proyectada en vez de llevar una inventada. */
.baldosa[data-alfa="0"] { --vitrina: var(--papel); box-shadow: inset 0 0 0 1px var(--linea); }
.baldosa[data-alfa="0"] .escena::after { display: none; }
.baldosa[data-alfa="0"] .escena { inset-inline: 9%; inset-block: 8% 6%; }

/* Revelado escalonado al entrar en pantalla. La clase la pone JS: sin JS el
   contenido se ve igual, solo que sin animación. */
@media (prefers-reduced-motion: no-preference) {
  .revela {
    opacity: 0; translate: 0 16px;
    transition: opacity .55s cubic-bezier(.22,.61,.36,1) var(--d, 0ms),
                translate .55s cubic-bezier(.22,.61,.36,1) var(--d, 0ms);
  }
  .revela.vista { opacity: 1; translate: 0 0; }
}

/* Punto de color en el desplegable de colores del vidrio. */
.panel-op .pt {
  inline-size: 11px; block-size: 11px; border-radius: 50%;
  background: var(--c); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .2);
  flex: none;
}
.panel-op > span:first-of-type { flex: 1; }

.resumen span { color: var(--tinta-3); }

/* -- conservado - ficha del envase -------------------------------- */
/* ── 21. ficha del envase ───────────────────────────────────────────────── */

dialog.ficha {
  inline-size: min(880px, calc(100vw - 40px));
  max-inline-size: none; max-block-size: min(88dvh, 720px);
  padding: 0; border: 0; border-radius: var(--r-l);
  background: var(--papel); color: var(--tinta);
  box-shadow: 0 30px 80px -20px rgb(23 20 18 / .4);
  overflow: visible;
  opacity: 1; scale: 1;
  transition: opacity var(--t-suave), scale var(--t-suave),
              display var(--t-suave), overlay var(--t-suave);
  transition-behavior: allow-discrete;
}
dialog.ficha:not([open]) { opacity: 0; scale: .97; }
@starting-style { dialog.ficha[open] { opacity: 0; scale: .97; } }
dialog.ficha::backdrop {
  background: rgb(23 20 18 / .38);
  opacity: 1;
  transition: opacity var(--t-suave), display var(--t-suave), overlay var(--t-suave);
  transition-behavior: allow-discrete;
}
dialog.ficha:not([open])::backdrop { opacity: 0; }
@starting-style { dialog.ficha[open]::backdrop { opacity: 0; } }

.ficha-x {
  position: absolute; inset-block-start: 12px; inset-inline-end: 12px; z-index: 3;
  background: var(--papel);
  box-shadow: 0 2px 8px rgb(23 20 18 / .16);
}
.ficha-in {
  display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1fr);
  border-radius: inherit; overflow: hidden; max-block-size: inherit;
}
.ficha-foto {
  background: var(--vitrina);
  display: grid; place-items: center;
  padding: 34px 24px;
  min-block-size: 340px;
}
.ficha-foto[data-alfa="0"] { --vitrina: var(--nata); }
.ficha-foto[data-alfa="0"] .escena::after { display: none; }
.ficha-foto .escena { inline-size: 76%; block-size: min(400px, 46vh); margin-block-end: 24px; }

.ficha-txt { padding: 34px 34px 30px; overflow-y: auto; }
.ficha-txt h2 { font-size: clamp(22px, 2.4vw, 30px); margin-block-start: 10px; }

.pills-fila { display: flex; flex-wrap: wrap; gap: 6px; margin-block-start: 16px; }
.pills-fila .pill[data-uso="det"] {
  --vitrina-p: var(--nata); --vitrina-t: var(--tinta); --vitrina-2: var(--tinta-2);
  background: var(--nata); -webkit-backdrop-filter: none; backdrop-filter: none;
}

.ficha-tabla { margin-block-start: 22px; border-block-start: 1px solid var(--linea); }
.ficha-tabla div {
  display: flex; justify-content: space-between; align-items: baseline; gap: 18px;
  padding-block: 11px; border-block-end: 1px solid var(--linea);
}
.ficha-tabla dt { font-size: 13.5px; color: var(--tinta-2); }
.ficha-tabla dd { font-size: 14.5px; font-weight: 600; text-align: end; }

.ficha-liga { margin-block-start: 16px; font-size: 13px; }
.ficha-liga a { color: var(--senal); text-decoration: underline; text-underline-offset: 3px; }

.nota-ficha {
  margin-block-start: 18px; padding: 13px 15px; border-radius: var(--r-s);
  background: var(--nata); font-size: 13px; color: var(--tinta-2); line-height: 1.45;
}
.ficha-acc { display: flex; gap: 10px; margin-block-start: 24px; flex-wrap: wrap; }

@media (width < 780px) {
  .ficha-in { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .ficha-foto { min-block-size: 240px; padding: 22px; }
  .ficha-foto .escena { block-size: 190px; }
  .ficha-txt { padding: 24px; }
}

/* -- conservado - pantalla de carga ------------------------------- */
/* ═══════════════════════════════════════════════════════════════════════
   26. PANTALLA DE CARGA — una botella que se llena

   Va en el HTML, no la inyecta JS: si se pintara desde JS el usuario vería
   primero la página y luego el velo encima, que es peor que no tenerlo.

   El seguro está en CSS, no en JS. Si el script falla o nunca carga, la
   animación `salir-carga` la retira igual a los 4 s. Una pantalla de carga
   que depende de JS para quitarse es una pantalla que puede dejar el sitio
   inservible, y esto lo va a ver un cliente.
   ═══════════════════════════════════════════════════════════════════════ */

.carga {
  position: fixed; inset: 0; z-index: 300;
  display: grid; place-items: center;
  background: var(--papel);
  animation: salir-carga .55s cubic-bezier(.4,0,1,1) 4s forwards;
}
.carga[data-listo="1"] { animation: salir-carga .5s cubic-bezier(.4,0,1,1) forwards; }
@keyframes salir-carga {
  to { opacity: 0; visibility: hidden; pointer-events: none; }
}
/* Si ya se vio en esta sesión, ni se pinta. */
:root[data-carga="vista"] .carga { display: none; }

.carga-in { display: grid; justify-items: center; gap: 20px; }

.botella {
  inline-size: auto; block-size: clamp(128px, 20vh, 172px);
  color: color-mix(in oklab, var(--tinta) 32%, transparent);
  overflow: visible;
}
/* El líquido sube dentro de la silueta recortada. Se anima translate, que
   corre en el compositor; animar y o height forzaría layout en cada cuadro. */
.botella .nivel {
  translate: 0 300px;
  animation: llenar 1.85s cubic-bezier(.36,.06,.24,1) .18s forwards;
}
@keyframes llenar { to { translate: 0 40px; } }

.botella .brillo { opacity: 0; animation: destello 1s ease-out 1.8s forwards; }
@keyframes destello {
  0%   { opacity: 0; translate: -30px 0; }
  55%  { opacity: .8; }
  100% { opacity: 0; translate: 26px 0; }
}

.carga-marca {
  font-family: "Familjen Grotesk", sans-serif;
  font-size: 19px; font-weight: 700; letter-spacing: -.02em;
}
.carga-nota { font-size: 12.5px; color: var(--tinta-3); margin-block-start: -14px; }

@media (prefers-reduced-motion: reduce) {
  .botella .nivel { translate: 0 40px; animation: none; }
  .botella .brillo { display: none; }
  .carga { animation-delay: .8s; animation-duration: .2s; }
}

/* -- conservado - objetivos tactiles ------------------------------ */
/* ── 29. objetivos táctiles ─────────────────────────────────────────────
   En pantalla táctil el mínimo son 44×44. Se agranda el área que se toca,
   no el dibujo: los iconos crecen y el botón de cotizar estira su zona
   sensible con un pseudo-elemento, para no engordar la tarjeta. */

@media (pointer: coarse) {
  /* El botón de cotizar aparecía solo con :hover. En pantalla táctil no hay
     hover, así que en celular era sencillamente invisible. */
  .cotizar-b { opacity: 1; scale: 1; }

  .icono { inline-size: 44px; block-size: 44px; }
  .barra .boton { padding-block: 12px; }
  .chip { padding-block: 11px; }
  .cotizar-b { inline-size: 40px; block-size: 40px; }
  .cotizar-b::after { content: ""; position: absolute; inset: -4px; }
  .panel-op { padding-block: 12px; }
}
/* -- conservado - paginas sueltas (404 y aviso de privacidad) ---- */
/* ── 13c. páginas sueltas (404 y aviso de privacidad) ────────────────────
   Una sola columna de texto, sin rejillas ni fotos. Miden 66 caracteres de
   ancho porque es texto para leer de corrido, no para escanear. */

.suelta {
  padding-block: clamp(70px, 9vw, 120px) var(--aire);
  max-inline-size: 68ch;
}
.suelta h1 { margin-block-start: 10px; font-size: clamp(32px, 4vw, 56px); }
.suelta > p { margin-block-start: 18px; color: var(--tinta-2); }
.suelta .heroe-acc { margin-block-start: 34px; }

.legal h2 {
  margin-block: 40px 12px;
  font-family: "Familjen Grotesk", sans-serif;
  font-size: 19px; font-weight: 600; letter-spacing: -.01em;
  color: var(--tinta);
}
.legal p, .legal li { color: var(--tinta-2); line-height: 1.65; }
.legal p + p { margin-block-start: 12px; }
.legal b { color: var(--tinta); font-weight: 600; }
.legal ul { margin-block-start: 12px; display: grid; gap: 8px; padding-inline-start: 20px; }
.legal li { list-style: disc; }
.legal a { color: var(--senal); text-decoration: underline; text-underline-offset: 3px; }
.legal-fecha { margin-block-start: 14px; font-size: 13px; color: var(--tinta-3); }

/* -- conservado - adaptacion del catalogo ------------------------------- */
@media (width < 1180px) {
  .rejilla[data-cols="4"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (width < 900px) {
  :root { --canal: 22px; }
  .cabezal { flex-direction: column; align-items: flex-start; gap: 16px; }
}
@media (width < 680px) {
  .rejilla, .rejilla[data-cols="4"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 14px; }
  .cifras { gap: 20px; flex-wrap: wrap; }
  dialog.hoja { inline-size: 100%; }
}