/* ═══════════════════════════════════════════════════════════════════
   TANDIL SHOES · PORTAL MAYORISTA — hoja generada
   NO EDITAR ESTE ARCHIVO: se pisa en cada build.
   Editá src/css/*.css y corré  bash build.sh
   ═══════════════════════════════════════════════════════════════════ */

/* ┌───────── src/css/01-tokens.css ─────────┐ */
/* ═══════════════════════════════════════════════════════════════════════════
   1 · TOKENS — Sistema de diseño del portal mayorista
   ───────────────────────────────────────────────────────────────────────────
   Salido de auditar los 6 sitios de Endurances IT con 9 agentes el 27/08/2026:
   marca y neutros de tandilshoes.com, geometría B2B y movimiento de starx +
   endurances.com.ar, accesibilidad de casareyes (que es el techo de la casa).
   Informes: scratchpad/analisis/00-SPEC-PORTAL.md
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   TANDIL SHOES · PORTAL MAYORISTA — sistema de diseño
   Marca y neutros: theme real de tandilshoes.com (app/globals.css @theme).
   Geometría B2B y movimiento: starx.endurances.ar + endurances.com.ar.
   Accesibilidad: casareyes.com.ar (el techo de la casa).
   ═══════════════════════════════════════════════════════════════════════════ */
:root{

  /* ── 1.1 MARCA — los 5 valores que un día podría editar el panel ─────────── */
  --primary:#202223;        /* ink   · texto, botones, hero oscuro, footer      */
  --secondary:#434951;      /* slate · texto secundario, hover del primario     */
  --accent:#f6c3aa;         /* peach · eyebrow, CTA del hero, ::selection       */
  --accent-deep:#e8a27f;    /* durazno oscurecido · SOLO fondos, foco y hover    */
  /* El durazno como TEXTO no pasa AA: #e8a27f sobre blanco da 2,12:1. Este es
     el mismo tono llevado a 5,05:1 (y 4,61:1 sobre el cream del footer), para
     los eyebrows, la marca de la ficha y los números del marquee. */
  --accent-text:#a85a28;
  --peach-soft:#fbe3d6;     /* fondo suave · fila activa de la tabla, chips     */
  --bg:#ffffff;

  /* ── 1.2 NEUTROS CÁLIDOS — fijos. NUNCA grises fríos ────────────────────── */
  --cream:#f7f4f1;          /* superficie de sección, hover de icon-btn, skeleton */
  --surface:#f7f4f1;        /* alias operativo de --cream                        */
  --surface-2:#fbfaf9;      /* superficie más clara (ratebar, celdas de tabla)   */
  --line:#e9e4df;           /* EL borde. Uno solo, 1px, en todo el portal        */
  --line-2:#f1eeeb;         /* separador interno de tabla/lista                  */
  /* PROHIBIDOS: #f7f7f8 · #e7e7ea · #d5d5da (los del portal actual).
     El énfasis de un borde se hace cambiando el COLOR a --primary,
     jamás subiendo el grosor ni oscureciendo el gris.                           */

  /* ── 1.3 TINTA — 3 niveles, siempre con guion ───────────────────────────── */
  --ink:#202223;
  --ink-2:#434951;
  --ink-3:#6b7077;          /* 4,99:1 sobre blanco y 4,55:1 sobre --cream. El
                               #6f747b anterior daba 4,30:1 sobre cream: todo el
                               footer quedaba abajo de AA. */
  --ink-4:#9aa0a6;          /* SOLO decorativo: iconos apagados, nunca texto      */

  /* ── 1.4 SEMÁNTICOS — una semántica cada uno, no se mezclan ─────────────── */
  --ok:#0f7b3e;      --ok-tint:#e8f5ed;   --ok-dot:#1ba672;   /* stock / éxito   */
  --green:31,170,82;                       --green-lit:#34d17f;/* rampa escalón  */
  --warn:#a35a00;    --warn-tint:#fdf3e6;  --warn-dot:#e0902f; /* pocas unidades */
  --no:#d92d20;      --no-tint:#fef3f2;                        /* error de campo */
  --sale:#e11d48;    --sale-sh:0 2px 8px rgba(225,29,72,.35);  /* oferta         */
  --urgent:#b42318;                                            /* últimas N      */
  --curva:#4338ca;   --curva-tint:#eef2ff; --curva-dot:#6366f1;/* curva completa */
  --lock:#06b6d4;    --lock-deep:#0096c7;                      /* control fijado */
  --wa:#25d366;
  /* StarX USA --no/--no-tint y NUNCA los define: 4 declaraciones muertas y el
     estado de error del checkout no se pinta. Acá nacen definidos.              */

  /* ── 1.5 TIPOGRAFÍA ─────────────────────────────────────────────────────── */
  --ff-display:"Outfit","Outfit Fallback",system-ui,sans-serif;
  --ff-text:"Inter","Inter Fallback",system-ui,-apple-system,"Segoe UI",sans-serif;
  --fw-medium:500; --fw-semibold:600; --fw-bold:700; --fw-black:900;
  /* NO existe 800 ni 300 en este sistema. El 900 es lo que hace la identidad.   */

  /* Escala FIJA de UI — enteros, cero decimales de px.
     10 11 12 13 14 16 18 20 24 30 36 48 60 72 y nada más.                       */
  --fs-10:10px; --fs-11:11px; --fs-12:12px; --fs-13:13px; --fs-14:14px;
  --fs-16:16px; --fs-18:18px; --fs-20:20px; --fs-24:24px; --fs-30:30px;
  --fs-36:36px; --fs-48:48px; --fs-60:60px; --fs-72:72px;

  /* Escala FLUIDA — SOLO títulos, precios grandes y padding de sección.
     Anclada 360px → 1440px. Jamás en texto de UI: las columnas de precio
     de un B2B tienen que alinear y un font-size fluido las hace bailar.         */
  --fs-hero:  clamp(2.25rem, 1.75rem + 2.22vw, 3.75rem);   /* 36 → 60 */
  --fs-h1:    clamp(1.875rem, 1.61rem + 1.16vw, 2.25rem);  /* 30 → 36 */
  --fs-h2:    clamp(1.5rem,  1.29rem + 0.93vw, 1.875rem);  /* 24 → 30 */
  --fs-h3:    clamp(1.125rem, 1.07rem + 0.23vw, 1.25rem);  /* 18 → 20 */
  --fs-price-pdp: clamp(1.75rem, 1.54rem + 0.93vw, 2.375rem); /* 28 → 38 */
  --fs-panel:  clamp(2.5rem, 1.94rem + 2.5vw, 4.5rem);     /* 40 → 72 · panel hero */
  --pad-sec:  clamp(3.5rem, 2.72rem + 3.47vw, 5rem);       /* 56 → 80 */

  /* Line-height y tracking */
  --lh-hero:1.02; --lh-tight:1.25; --lh-snug:1.375; --lh-base:1.5; --lh-relaxed:1.625;
  --tr-tight:-.025em;    /* TODO título display                                  */
  --tr-wide:.025em;      /* TODO uppercase de botón y nav                        */
  --tr-eyebrow:.2em;     /* eyebrow de sección — el token de más personalidad     */
  --tr-foot:.18em;       /* títulos de columna del footer                         */
  /* Uppercase sin tracking está PROHIBIDO. Y los .05em/.06em/.07em sueltos
     del portal actual no existen en la referencia: se eliminan.                  */

  /* ── 1.6 ESPACIADO — base 4px ───────────────────────────────────────────── */
  --sp-1:4px;   --sp-2:8px;   --sp-3:12px;  --sp-4:16px;  --sp-5:20px;
  --sp-6:24px;  --sp-8:32px;  --sp-10:40px; --sp-12:48px; --sp-14:56px;
  --sp-16:64px; --sp-20:80px; --sp-24:96px;

  /* ── 1.7 LAYOUT ─────────────────────────────────────────────────────────── */
  --shell:1280px;        /* header · hero · secciones · footer (= max-w-7xl)     */
  --shell-cat:1440px;    /* SOLO catálogo: sidebar 256px + grilla                */
  --shell-pdp:1180px;    /* ficha de producto                                    */
  --shell-page:1100px;   /* texto largo: condiciones, ayuda, alta de cuenta      */
  --pad:14px;            /* padding lateral — se reescribe por breakpoint        */
  --sidebar:256px;

  --hdr-h:56px;          /* 56 → 64 (620) → 80 (1024)                            */
  --ratebar-h:44px;
  --bottomnav-h:56px;
  --tierbar-h:64px;
  --tierbar-off:0px;     /* lo escribe el JS: 0 o --tierbar-h                    */
  --safe-b:env(safe-area-inset-bottom, 0px);
  --safe-l:env(safe-area-inset-left, 0px);
  --safe-r:env(safe-area-inset-right, 0px);
  --tap:44px;            /* área táctil mínima — innegociable                    */
  --tvz:1;               /* factor de zoom del documento (TV). 1 = sin tocar     */

  /* Grilla de producto */
  --grid-gap-x:10px;     /* 10 → 12 (620) → 16 (768) → 24 (1280)                 */
  --grid-gap-y:28px;     /* 28 → 32 (620) → 40 (768). SIEMPRE ~2,5x el horizontal */

  /* ── 1.8 RADIOS — cerrados. Cinco valores y ninguno más ────────────────── */
  --r-pill:999px;        /* TODO lo interactivo chico: botón, chip, badge, contador */
  --r-input:8px;         /* inputs, celdas de talle, cajas de mensaje            */
  --r-panel:12px;        /* paneles chicos, popovers, líneas del carrito         */
  --r-card:16px;         /* TARJETA DE PRODUCTO, imágenes, cajas medianas        */
  --r-block:32px;        /* panel del hero, cupón, bloques grandes               */
  /* Se eliminan los 9 radios del portal actual (14,20,11,10,9,7,6,5,999).       */

  /* ── 1.9 SOMBRAS — dos capas, la segunda con SPREAD NEGATIVO ───────────── */
  --sh-1:0 1px 3px rgba(32,34,35,.04), 0 8px 24px -8px rgba(32,34,35,.10);
  --sh-2:0 4px 12px rgba(32,34,35,.06), 0 22px 44px -12px rgba(32,34,35,.22);
  --sh-3:0 2px 8px rgba(32,34,35,.05), 0 18px 40px -16px rgba(32,34,35,.20);
  --sh-deep:0 1px 3px rgba(32,34,35,.04), 0 18px 44px -16px rgba(32,34,35,.28);
  --sh-drawer:-18px 0 54px rgba(32,34,35,.24);
  --sh-sheet:0 -18px 54px rgba(32,34,35,.24);
  --sh-buybar:0 -8px 26px rgba(32,34,35,.09);
  --sh-toast:0 14px 34px rgba(32,34,35,.32);
  --sh-brand:0 12px 40px -12px rgba(232,162,127,.45);   /* hover teñido de marca */
  /* El spread negativo es lo que evita el halo gris. La sombra del portal
     actual (0 8px 24px rgba(...,.06), sin spread) hace que la tarjeta
     no levante nunca.                                                           */

  /* ── 1.10 MOVIMIENTO — 5 duraciones, 5 curvas, nada más ────────────────── */
  --t-1:150ms;   /* botones, chips, segmented, inputs                           */
  --t-2:200ms;   /* subrayado del nav, marks de la barra de escalón             */
  --t-3:300ms;   /* hover de tarjeta, header al scrollear, drawer, scrim        */
  --t-4:500ms;   /* zoom de foto, escalera de escalón, crossfade                */
  --t-5:700ms;   /* .fadeup — única animación de entrada                        */
  --ease:cubic-bezier(.4,0,.2,1);          /* default                           */
  --ease-out:cubic-bezier(0,0,.2,1);       /* hover / press                     */
  --ease-overlay:cubic-bezier(.2,.8,.2,1); /* drawer, modal, sheet, toast       */
  --ease-enter:cubic-bezier(.22,1,.36,1);  /* easeOutQuint — la curva de marca  */
  --ease-pulse:cubic-bezier(.4,0,.6,1);    /* SOLO skeleton                     */
  /* ease-in NO existe en ninguno de los 6 sitios de la casa.
     transition:.18s (sin propiedad) ES transition:all: prohibido. Siempre
     se enumeran las propiedades que transicionan.                              */

  /* Tiempos de feedback, en ms (los usa el JS) */
  --ms-btn-ok:1100; --ms-toast:2600; --ms-anuncio:3500; --ms-debounce:250;

  /* ── 1.11 Z-INDEX — escalera cerrada. Ningún número fuera de esta lista ── */
  --z-banner:30;   /* barra de cookies / aviso inferior                          */
  --z-fixed:40;    /* bottomnav · tierbar · buybar · WhatsApp flotante           */
  --z-sticky:50;   /* wrapper sticky (header + ratebar) · drawer de menú mobile  */
  --z-drawer:60;   /* drawer del pedido                                          */
  --z-search:70;   /* overlay del buscador                                       */
  --z-zoom:80;     /* lightbox de foto                                           */
  --z-gate:90;     /* gate y bottom sheet de precios                             */
  --z-toast:100;   /* toast — siempre lo último                                  */
  /* El portal actual usa 90/100/150/180/200: números sin sistema, con el
     header por encima de la tierbar. Se reemplaza entera.                       */

  /* ── 1.12 BREAKPOINTS — documentales (CSS no los interpola en @media).
        Fuente única para el JS (matchMedia) y para no inventar números. ─────── */
  --bp-xs:400px;  --bp-sm:620px;  --bp-tab:768px;  --bp-tab-lg:900px;
  --bp-lg:1024px; --bp-xl:1280px; --bp-2xl:1536px; --bp-3xl:1800px;
  --bp-4xl:2400px; --bp-5xl:3400px;

  /* ── 1.13 BLUR ──────────────────────────────────────────────────────────── */
  --blur-sm:8px; --blur-md:12px; --blur-lg:14px; --blur-xl:24px;
}

/* Sobre fondo oscuro (hero, gate, footer) los tokens de tinta se invierten y
   todo lo que los usa se adapta solo, sin duplicar una sola regla. */
.sobre-oscuro{
  --ink:#ffffff;
  --ink-2:rgba(255,255,255,.74);
  --ink-3:rgba(255,255,255,.56);
  --ink-4:rgba(255,255,255,.4);
  --line:rgba(255,255,255,.14);
  --line-2:rgba(255,255,255,.08);
  --surface:rgba(255,255,255,.06);
  --surface-2:rgba(255,255,255,.09);
  --cream:rgba(255,255,255,.06);
  --bg:#17181a;
  color:#fff;
}

/* ┌───────── src/css/02-base.css ─────────┐ */
/* ═══════════════════════════════════════════════════════════════════════════
   2 · BASE — reset, tipografía, keyframes y reduced-motion
   Generado desde scratchpad/analisis/00-SPEC-PORTAL.md (auditoría de 9 agentes
   sobre los 6 sitios de Endurances IT, 27/08/2026).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1.14 Base obligatoria (va inmediatamente después del `:root`) ─────────────────────────────────────── */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}

/* clip, NUNCA hidden: hidden crea un contenedor de scroll y mata el
   position:sticky del header en mobile. Está comentado así en globals.css. */
html{overflow-x:clip;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  overflow-x:clip;max-width:100vw;
  font-family:var(--ff-text);font-size:var(--fs-14);line-height:var(--lh-base);
  background:var(--bg);color:var(--ink);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
h1,h2,h3,.font-display{
  font-family:var(--ff-display);font-weight:var(--fw-black);
  letter-spacing:var(--tr-tight);line-height:var(--lh-tight);margin:0;
}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
a{color:inherit;text-decoration:none}
[hidden]{display:none !important}   /* sin esto, cualquier display lo pisa */
::selection{background:var(--accent);color:var(--ink)}
section[id]{scroll-margin-top:calc(var(--hdr-h) + var(--ratebar-h) + 16px)}

.no-scrollbar{-ms-overflow-style:none;scrollbar-width:none}
.no-scrollbar::-webkit-scrollbar{display:none}

/* Foco visible GLOBAL. En un portal donde se cargan 40 celdas de talle con
   teclado esto NO es opcional. La referencia no lo tiene; acá sí. */
:focus-visible{outline:2px solid var(--accent-deep);outline-offset:2px;border-radius:3px}
[role="dialog"][tabindex="-1"]:focus{outline:none}
.skip{position:absolute;left:-9999px;top:0;z-index:calc(var(--z-toast) + 1);
  background:var(--primary);color:#fff;padding:12px 18px;border-radius:0 0 var(--r-panel) 0}
.skip:focus{left:0}

/* ── 1.15 Tipografías — autohospedadas, cero CDN ─────────────────────────────────────── */
@font-face{font-family:"Outfit";src:url(/assets/fonts/outfit-var.woff2) format("woff2-variations");
  font-weight:400 900;font-display:swap;font-style:normal}
@font-face{font-family:"Inter";src:url(/assets/fonts/inter-var.woff2) format("woff2-variations");
  font-weight:400 700;font-display:swap;font-style:normal}
@font-face{font-family:"Outfit Fallback";src:local(Arial);
  ascent-override:100.18%;descent-override:26.05%;line-gap-override:0%;size-adjust:99.82%}
@font-face{font-family:"Inter Fallback";src:local(Arial);
  ascent-override:90.20%;descent-override:22.48%;line-gap-override:0%;size-adjust:107.40%}

/* ── 4.2 Keyframes (los únicos del portal) ─────────────────────────────────────── */
@keyframes fadeup{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes pop   {from{opacity:0;transform:translateY(10px) scale(.99)}to{opacity:1;transform:none}}
@keyframes mfade {from{opacity:0}to{opacity:1}}
@keyframes slide {from{transform:translateX(100%)}to{transform:none}}
@keyframes mslide{from{transform:translateX(100%)}to{transform:none}}
@keyframes sup   {from{transform:translateY(100%)}to{transform:none}}
@keyframes pulse {50%{opacity:.5}}
@keyframes spin  {to{transform:rotate(1turn)}}
@keyframes bump  {0%{transform:scale(1)}30%{transform:scale(1.45)}60%{transform:scale(.9)}to{transform:scale(1)}}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.fadeup{animation:fadeup var(--t-5) var(--ease-enter) both}
.fadeup-1{animation-delay:.10s} .fadeup-2{animation-delay:.20s}
.fadeup-3{animation-delay:.30s} .fadeup-4{animation-delay:.45s}
.animate-marquee{animation:marquee 32s linear infinite}
.marquee-pause:hover .animate-marquee{animation-play-state:paused}

/* ── 4.4 Bloqueo de fondo contando capas (iOS) ─────────────────────────────────────── */
body.noscroll{overflow:hidden;position:fixed;left:0;right:0;width:100%}

/* ── 4.6 `prefers-reduced-motion` — el reset completo ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* ┌───────── src/css/03-layout.css ─────────┐ */
/* ═══════════════════════════════════════════════════════════════════════════
   3 · LAYOUT — anuncio, header, ratebar, buscador y footer
   Generado desde scratchpad/analisis/00-SPEC-PORTAL.md (auditoría de 9 agentes
   sobre los 6 sitios de Endurances IT, 27/08/2026).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 3.1 Barra de anuncio (`.topbar`) ─────────────────────────────────────── */
.topbar{background:var(--primary);color:#fff}
.topbar__row{display:flex;align-items:center;justify-content:center;gap:1.4em;
  min-height:36px;max-width:var(--shell);margin-inline:auto;padding-inline:var(--pad);
  font-size:var(--fs-11);font-weight:var(--fw-semibold);
  letter-spacing:var(--tr-foot);text-transform:uppercase}
@media(max-width:639.98px){.topbar__row{min-height:32px;font-size:var(--fs-10);letter-spacing:.06em}}

/* ── 3.2 Header (`.hdr`) + nav mobile ─────────────────────────────────────── */
.stickytop{position:sticky;top:0;z-index:var(--z-sticky)}
.hdr{background:#fff;border-bottom:1px solid transparent;
  transition:background var(--t-3) var(--ease),border-color var(--t-3) var(--ease),
             box-shadow var(--t-3) var(--ease)}
.hdr.is-scrolled{background:rgba(255,255,255,.9);backdrop-filter:saturate(180%) blur(var(--blur-md));
  border-bottom-color:var(--line);box-shadow:0 6px 24px rgba(32,34,35,.05)}
.hdr__row{height:var(--hdr-h);display:flex;align-items:center;gap:18px;
  max-width:var(--shell);margin-inline:auto;padding-inline:var(--pad)}
.brand{display:flex;align-items:center;gap:9px;flex:0 0 auto;min-height:var(--tap)}
.brand img{height:30px;object-fit:contain}
@media(min-width:1024px){.brand img{height:44px}}
.brand__tag{font-family:var(--ff-display);font-size:var(--fs-10);font-weight:var(--fw-black);
  letter-spacing:var(--tr-wide);text-transform:uppercase;background:var(--primary);color:#fff;
  padding:3px 9px;border-radius:var(--r-pill)}

/* Nav desktop, con el subrayado animado de la referencia */
.nav{display:none;align-items:center;gap:28px}
@media(min-width:1024px){.nav{display:flex}}
.nav a{position:relative;font-size:var(--fs-13);font-weight:var(--fw-semibold);
  text-transform:uppercase;letter-spacing:var(--tr-wide);padding-block:6px}
.nav a::after{content:"";position:absolute;left:0;bottom:0;height:1.5px;width:0;
  background:currentColor;transition:width var(--t-3) var(--ease-out)}
@media(hover:hover){.nav a:hover::after{width:100%}}
.nav a[aria-current="page"]::after{width:100%}

.iconbtn{width:var(--tap);height:var(--tap);display:grid;place-items:center;
  border-radius:var(--r-pill);position:relative;color:var(--ink);
  transition:background-color var(--t-1) var(--ease)}
.iconbtn:hover{background:var(--cream)}
.iconbtn svg{width:22px;height:22px}
.cart__count{position:absolute;top:2px;right:2px;min-width:20px;height:20px;padding:0 5px;
  background:var(--primary);color:#fff;border-radius:var(--r-pill);
  font-size:var(--fs-11);font-weight:var(--fw-bold);display:grid;place-items:center}
.cart__count[data-zero="1"]{background:var(--ink-4)}
.cart__count.is-bump{animation:bump 420ms var(--ease)}

@media(max-width:1023.98px){
  .hdr__row{height:auto;flex-wrap:wrap;gap:10px;padding-block:8px}
  .brand{order:2;flex:1;justify-content:center}
  .burger{order:1} .hdr__acts{order:3}
  .hdr__row .search{order:4;flex:0 0 100%;max-width:none}
  body.hdr-min .search{display:none}
}

/* ── 3.2 Header (`.hdr`) + nav mobile ─────────────────────────────────────── */
.bottomnav{position:fixed;inset-inline:0;bottom:0;z-index:var(--z-fixed);display:flex;
  align-items:stretch;justify-content:space-around;
  height:calc(var(--bottomnav-h) + var(--safe-b));padding-bottom:var(--safe-b);
  border-top:1px solid var(--line);background:rgba(255,255,255,.95);backdrop-filter:blur(var(--blur-sm))}
.bottomnav a,.bottomnav button{flex:1 1 0;min-width:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:2px;font-size:var(--fs-10);font-weight:var(--fw-medium)}
.bottomnav svg{width:22px;height:22px}
.bottomnav .is-on{color:var(--ink)} .bottomnav a{color:var(--ink-3)}
@media(min-width:1024px){.bottomnav{display:none}}

/* ── 3.3 Ratebar (`.ratebar`) — la franja de precios B2B ─────────────────────────────────────── */
.ratebar{background:var(--surface-2);border-top:1px solid var(--line-2);
  border-bottom:1px solid var(--line)}
.ratebar__in{max-width:var(--shell-cat);margin-inline:auto;padding:0 var(--pad);
  min-height:var(--ratebar-h);display:flex;align-items:center;justify-content:center;
  gap:0;flex-wrap:wrap;font-size:var(--fs-13)}
.cg{display:flex;align-items:center;gap:9px;padding:2px 22px;border-left:1px solid var(--line)}
.cg:first-child{border-left:0}
.cg__lbl{color:var(--ink-3);font-size:var(--fs-12);font-weight:var(--fw-medium)}
.rb-dolar{display:flex;align-items:center;gap:8px}
.rbdot{width:8px;height:8px;border-radius:50%;background:var(--ok-dot);
  box-shadow:0 0 0 3px rgba(27,166,114,.18)}
@media(max-width:1023.98px){.ratebar{display:none}}
/* Entre 1024 y 1279 la barra envuelve: se apagan los labels */
@media(min-width:1024px) and (max-width:1279.98px){
  .cg{padding:2px 13px;gap:7px}.cg__lbl{display:none}
  .segmented button{padding:5px 10px;font-size:var(--fs-12)}
}

/* Segmentado CHICO — moneda e impuesto: solo cambian la unidad de medida */
.segmented{display:inline-flex;align-items:center;background:#fff;
  border:1px solid var(--line);border-radius:var(--r-pill);padding:3px}
.segmented button{border:0;background:none;color:var(--ink-3);font-weight:var(--fw-semibold);
  font-size:var(--fs-12);padding:5px 12px;border-radius:var(--r-pill);white-space:nowrap;line-height:1;
  transition:background-color var(--t-1) var(--ease),color var(--t-1) var(--ease)}
.segmented button:hover:not(.is-on){color:var(--ink-2)}
.segmented button.is-on{background:var(--primary);color:#fff}
.segmented button[disabled]{opacity:.4;cursor:not-allowed}   /* sin cotización */

/* Segmentado GRANDE — nivel de cuenta: el que mueve la plata */
.payseg button{font-weight:var(--fw-bold);font-size:var(--fs-12);padding:6px 13px}
.payseg button.is-on{background:linear-gradient(90deg,var(--accent-deep),var(--accent));
  color:var(--primary);text-shadow:0 1px 1px rgba(255,255,255,.35)}

/* BLOQUEADO por la cuenta ("tu lista la fija tu vendedor", "facturás A") */
.segmented.is-locked{border-color:var(--lock);box-shadow:0 0 0 2px rgba(6,182,212,.18);cursor:not-allowed}
.segmented.is-locked button.is-on{background:linear-gradient(90deg,var(--lock),var(--lock-deep));
  color:#fff;cursor:not-allowed}
.segmented.is-locked button.is-off{color:var(--ink-3);opacity:.5;cursor:not-allowed}

/* Destello: le enseña al usuario dónde está la palanca. 1.5s × 3 = 4,5 s */
.ratebar.rb-destello .segmented{position:relative;overflow:hidden;animation:rb-halo 1.5s ease-in-out 3}
.ratebar.rb-destello .segmented::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 35%,rgba(232,162,127,.45) 50%,transparent 65%);
  transform:translateX(-130%);animation:rb-barrido 1.5s ease-in-out 3}
@keyframes rb-halo{0%,to{box-shadow:0 0 0 0 rgba(232,162,127,0)}45%{box-shadow:0 0 0 4px rgba(232,162,127,.35)}}
@keyframes rb-barrido{60%,to{transform:translateX(130%)}}

/* ── 3.3 Ratebar (`.ratebar`) — la franja de precios B2B ─────────────────────────────────────── */
.mbar{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:7px max(14px,var(--safe-l)) 7px max(14px,var(--safe-r));
  background:var(--surface-2);border-bottom:1px solid var(--line)}
.mbar__chip{display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 14px;
  border-radius:var(--r-pill);border:1.5px solid var(--line);background:#fff;
  font-size:var(--fs-12);font-weight:var(--fw-semibold);white-space:nowrap;max-width:64%}
@media(min-width:1024px){.mbar{display:none}}

.sheet{position:fixed;inset:0;z-index:var(--z-gate)}
.sheet__panel{position:absolute;inset-inline:0;bottom:0;background:#fff;
  border-radius:var(--r-block) var(--r-block) 0 0;box-shadow:var(--sh-sheet);
  padding:10px max(18px,var(--safe-l)) calc(18px + var(--safe-b));
  max-height:88dvh;overflow-y:auto;animation:sup 280ms var(--ease-overlay) forwards}
.sheet__grab{width:44px;height:4px;border-radius:3px;background:var(--line);margin:0 auto 14px}
.segmented--sheet{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;width:100%;
  border-radius:var(--r-pill);padding:4px}
.segmented--sheet button{height:44px;font-size:var(--fs-13)}

/* ── 3.4 Buscador ─────────────────────────────────────── */
.search{position:relative;flex:1;max-width:560px}
.search__ico{position:absolute;left:16px;top:50%;transform:translateY(-50%);
  width:19px;height:19px;color:var(--ink-3);pointer-events:none}
.search input{width:100%;height:44px;padding:0 16px 0 44px;
  background:var(--cream);border:1.5px solid transparent;border-radius:var(--r-pill);
  font-size:var(--fs-14);outline:0;
  transition:background-color var(--t-1) var(--ease),border-color var(--t-1) var(--ease)}
.search input:focus{background:#fff;border-color:var(--ink)}
/* El borde de 1.5px nace transparente para que el input NO salte al foco */

.searchoverlay{position:fixed;inset:0;z-index:var(--z-search)}
.searchoverlay__scrim{position:absolute;inset:0;background:rgba(32,34,35,.4);
  backdrop-filter:blur(var(--blur-sm));animation:mfade var(--t-2) both}
.searchoverlay__panel{position:absolute;inset-inline:0;top:0;max-height:90dvh;overflow-y:auto;
  background:#fff;padding:16px var(--pad);box-shadow:var(--sh-3);
  animation:fadeup var(--t-3) var(--ease-overlay) both}

/* ── 3.18 Footer ─────────────────────────────────────── */
.foot{background:var(--primary);color:rgba(255,255,255,.72);padding:64px 0 0;margin-top:var(--pad-sec)}
.foot__grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:36px;
  max-width:var(--shell);margin-inline:auto;padding:0 var(--pad) 40px;
  border-bottom:1px solid rgba(255,255,255,.10)}
@media(max-width:1023.98px){.foot__grid{grid-template-columns:1.4fr 1fr 1fr;gap:32px}}
@media(max-width:767.98px){.foot__grid{grid-template-columns:1fr 1fr}}
@media(max-width:619.98px){.foot__grid{grid-template-columns:1fr;gap:28px}}
.foot h5{font-size:var(--fs-11);font-weight:var(--fw-black);letter-spacing:var(--tr-foot);
  text-transform:uppercase;color:#fff;margin:0 0 16px}
.foot a{color:rgba(255,255,255,.72);min-height:var(--tap);display:inline-flex;align-items:center;
  transition:color var(--t-1) var(--ease)}
.foot a:hover{color:var(--accent)}
.foot__social a{width:40px;height:40px;justify-content:center;border-radius:50%;
  border:1px solid rgba(255,255,255,.16)}
.foot__social a:hover{background:var(--accent);border-color:var(--accent);color:var(--ink)}
.foot__legal{max-width:var(--shell);margin-inline:auto;padding:20px var(--pad);
  font-size:var(--fs-12);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.foot-credit{text-align:center;padding:18px 0 calc(18px + var(--safe-b));
  border-top:1px solid rgba(255,255,255,.06);background:rgba(0,0,0,.35);
  font-size:var(--fs-13);color:rgba(255,255,255,.55)}
.foot-credit b{font-weight:var(--fw-black);color:#22B981}    /* AA sobre oscuro */
.foot-credit a:hover b{color:#34D399}
@media(max-width:1023.98px){.foot{padding-bottom:calc(var(--bottomnav-h) + var(--safe-b))}}

/* ┌───────── src/css/04-componentes.css ─────────┐ */
/* ═══════════════════════════════════════════════════════════════════════════
   4 · COMPONENTES
   Generado desde scratchpad/analisis/00-SPEC-PORTAL.md (auditoría de 9 agentes
   sobre los 6 sitios de Endurances IT, 27/08/2026).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 3.5 Card de producto (`.card`) — el 80 % de lo que se ve ─────────────────────────────────────── */
.card{display:flex;flex-direction:column;position:relative}
.card__frame{position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:var(--r-card);
  border:1px solid var(--line);background:#fff;box-shadow:var(--sh-1);
  transition:transform var(--t-3) var(--ease-out),box-shadow var(--t-3) var(--ease-out),
             border-color var(--t-3) var(--ease-out)}
.card__img{width:100%;height:100%;object-fit:contain;padding:6%;display:block;
  transition:transform var(--t-4) var(--ease-out)}
.card__frame.sin-img{background:var(--cream);display:grid;place-items:center}
.card__frame.sin-img::after{content:"Sin imagen";color:var(--ink-3);
  font-size:var(--fs-11);font-weight:var(--fw-semibold)}
.card__flags{position:absolute;left:10px;top:10px;display:flex;flex-direction:column;
  gap:6px;align-items:flex-start;z-index:2}
.card__cta{position:absolute;left:8px;right:8px;bottom:8px;z-index:2;
  border-radius:var(--r-pill);background:rgba(255,255,255,.95);backdrop-filter:blur(var(--blur-sm));
  box-shadow:0 10px 15px -3px rgba(32,34,35,.1);padding:12px 0;
  font-size:var(--fs-13);font-weight:var(--fw-semibold);text-transform:uppercase;
  letter-spacing:var(--tr-wide);color:var(--ink);
  opacity:0;transform:translateY(6px);transition:opacity var(--t-2),transform var(--t-2)}
@media(hover:hover){.card:hover .card__cta{opacity:1;transform:none}}
@media(hover:none){.card__cta{opacity:1;transform:none}}
.card__cta:active{transform:scale(.97)}

.card__body{padding-top:12px;display:flex;flex-direction:column;gap:4px;flex:1}
.card__brand{font-size:var(--fs-11);font-weight:var(--fw-bold);letter-spacing:var(--tr-wide);
  text-transform:uppercase;color:var(--ink-3)}
.card__name{font-family:var(--ff-display);font-size:var(--fs-14);font-weight:var(--fw-bold);
  line-height:1.3;min-height:38px;display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden}
@media(min-width:640px){.card__name{font-size:var(--fs-16);min-height:42px}}
.card__sku{font-size:var(--fs-10);color:var(--ink-3);letter-spacing:.03em}
.card__prices{margin-top:6px}
.card__sizes{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px}

/* ── 3.5 Card de producto (`.card`) — el 80 % de lo que se ve ─────────────────────────────────────── */
.price{font-family:var(--ff-display);font-size:var(--fs-20);font-weight:var(--fw-bold);
  letter-spacing:-.5px;line-height:1.1;font-variant-numeric:tabular-nums;display:block}
.price__off{display:inline-block;margin-left:6px;background:var(--ok-tint);color:var(--ok);
  font-size:var(--fs-11);font-weight:var(--fw-bold);padding:2px 8px;border-radius:var(--r-pill);
  vertical-align:middle}
.price__cap{display:block;font-size:var(--fs-11);color:var(--ink-3);margin-top:2px}
.price__margin{display:block;font-size:var(--fs-12);color:var(--ink-2);margin-top:6px}
.price__margin b{color:var(--ok);font-weight:var(--fw-bold)}
.price__lock{font-size:var(--fs-13);color:var(--ink-2);display:flex;align-items:center;gap:6px}

/* ── 3.6 Badges y flags ─────────────────────────────────────── */
.flag{display:inline-flex;align-items:center;gap:5px;font-size:var(--fs-11);
  font-weight:var(--fw-semibold);padding:3px 9px;border-radius:var(--r-pill);width:fit-content}
.flag i{width:6px;height:6px;border-radius:50%;display:inline-block}
.flag--ok    {background:var(--ok-tint);   color:var(--ok)}     .flag--ok i{background:var(--ok-dot)}
.flag--low   {background:var(--warn-tint); color:var(--warn)}   .flag--low i{background:var(--warn-dot)}
.flag--curva {background:var(--curva-tint);color:var(--curva)}  .flag--curva i{background:var(--curva-dot)}
.flag--out   {background:var(--cream);     color:var(--ink-3)}
.flag--ship  {background:var(--ok-dot);    color:#fff}          /* sin punto, con icono */
.badge--sale {background:var(--sale);color:#fff;font-family:var(--ff-display);
  font-weight:var(--fw-black);font-size:var(--fs-12);padding:4px 10px;
  border-radius:var(--r-pill);box-shadow:var(--sale-sh)}

/* ── 3.7 Grilla y catálogo ─────────────────────────────────────── */
.catalog{display:grid;grid-template-columns:var(--sidebar) 1fr;gap:26px;align-items:start}
@media(max-width:1023.98px){.catalog{grid-template-columns:1fr}}

.side{border:1px solid var(--line);border-radius:var(--r-card);padding:20px;background:#fff;
  position:sticky;top:calc(var(--hdr-h) + var(--ratebar-h) + 12px);
  max-height:calc(100dvh - var(--hdr-h) - var(--ratebar-h) - 24px);overflow-y:auto}
@media(max-width:1023.98px){.side{position:static;max-height:none}}
.side h4{font-size:var(--fs-13);font-weight:var(--fw-bold);padding:13px 0;margin:0;
  border-top:1px solid var(--line);user-select:none;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between}
.side h4:first-child{border-top:0;padding-top:0}
.fopt{display:flex;align-items:center;gap:10px;font-size:var(--fs-13);color:var(--ink-2);
  padding:6px 0;width:100%;text-align:left;min-height:var(--tap);
  transition:color var(--t-1) var(--ease)}
.fopt input{width:17px;height:17px;accent-color:var(--primary);pointer-events:none}
.fopt.is-on{font-weight:var(--fw-semibold);color:var(--ink)}
.fopt .cnt{margin-left:auto;font-size:var(--fs-12);color:var(--ink-3);font-variant-numeric:tabular-nums}
.fsearch{width:100%;background:var(--cream);border:1.5px solid transparent;border-radius:var(--r-input);
  padding:8px 12px;font-size:var(--fs-13);outline:0;margin-bottom:8px}
.fsearch:focus{background:#fff;border-color:var(--ink)}
.fscroll{max-height:240px;overflow-y:auto;padding-right:4px;margin-right:-4px}
.fscroll::-webkit-scrollbar{width:6px}
.fscroll::-webkit-scrollbar-thumb{background:var(--line);border-radius:6px}

/* ── 3.7 Grilla y catálogo ─────────────────────────────────────── */
.chiprow{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.chip{display:inline-flex;align-items:center;gap:6px;background:var(--cream);color:var(--ink);
  font-size:var(--fs-12);font-weight:var(--fw-semibold);padding:6px 12px;
  border-radius:var(--r-pill);border:1px solid var(--line);min-height:32px}
.chip .x{opacity:.6;transition:opacity var(--t-1)}
.chip:hover .x{opacity:1}
.chip--clear{background:transparent;border-color:transparent;color:var(--ink-3);
  text-decoration:underline;text-underline-offset:3px}

/* ── 3.9 Selector de talles — la matriz talle × cantidad ─────────────────────────────────────── */
.sizegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:9px}
.sizecell{border:1px solid var(--line);border-radius:var(--r-input);padding:9px;
  text-align:center;display:grid;gap:6px;
  transition:border-color var(--t-1) var(--ease),background-color var(--t-1) var(--ease)}
.sizecell__t{font-family:var(--ff-display);font-size:var(--fs-18);font-weight:var(--fw-bold)}
.sizecell__s{font-size:var(--fs-11);color:var(--ink-2)}
.sizecell.is-on{border-color:var(--ink);background:var(--peach-soft)}
/* Sin stock: NO es un botón muerto — abre "pedir reposición" */
.sizecell--0{opacity:.45;background:var(--cream);border-style:dashed;
  text-decoration:line-through;cursor:pointer}
.sizecell--0 .stepper{pointer-events:none;opacity:.5}
.sizecell--0 .sizecell__s{text-decoration:none}

.stepper{display:flex;align-items:center;justify-content:center;gap:2px}
.stepper button{width:30px;height:30px;border:1px solid var(--line);border-radius:var(--r-pill);
  display:grid;place-items:center;font-size:16px;line-height:1;
  transition:border-color var(--t-1) var(--ease),background-color var(--t-1) var(--ease)}
.stepper button:hover:not(:disabled){border-color:var(--ink);background:var(--cream)}
.stepper button:disabled{opacity:.3;cursor:not-allowed}
.stepper input{width:44px;height:30px;text-align:center;border:1px solid var(--line);
  border-radius:var(--r-input);font-size:var(--fs-13);font-weight:var(--fw-semibold);
  outline:0;-moz-appearance:textfield;font-variant-numeric:tabular-nums}
.stepper input::-webkit-outer-spin-button,.stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
@media(max-width:1023.98px){.stepper button{width:44px;height:44px;font-size:19px}
  .stepper input{width:52px;height:44px;font-size:15px}}

/* ── 3.9 Selector de talles — la matriz talle × cantidad ─────────────────────────────────────── */
.curvas{display:flex;flex-wrap:wrap;gap:9px}
.curva{border:1px solid var(--line);border-radius:var(--r-pill);padding:12px 18px;text-align:left;
  display:grid;gap:3px;min-width:170px;min-height:var(--tap);
  transition:border-color var(--t-1) var(--ease),background-color var(--t-1) var(--ease)}
.curva:hover{border-color:var(--ink);background:var(--cream)}
.curva__n{font-family:var(--ff-display);font-weight:var(--fw-bold);font-size:var(--fs-14)}
.curva__d{font-size:var(--fs-12);color:var(--ink-2)}
.curva.is-parcial .curva__d{color:var(--warn)}

/* ── 3.10 Barra de escalón (`.tierbar`) — la pieza estrella ─────────────────────────────────────── */
.tierbar{position:fixed;inset-inline:0;z-index:var(--z-fixed);background:var(--primary);color:#fff;
  box-shadow:0 -6px 24px rgba(32,34,35,.18)}
.tierbar__in{max-width:var(--shell-cat);margin-inline:auto;padding:11px var(--pad);
  display:flex;align-items:center;gap:20px;min-height:var(--tierbar-h)}
.tierbar__pares{font-family:var(--ff-display);font-size:var(--fs-20);font-weight:var(--fw-black);
  line-height:1;font-variant-numeric:tabular-nums}
.tierbar__tier{font-size:var(--fs-12);color:rgba(255,255,255,.72)}

/* Track: 5 segmentos, UN solo verde con rampa de opacidad. Nada de semáforo. */
.tb-track{flex:1;min-width:160px;display:flex;gap:6px;position:relative}
.tb-seg{flex:1;height:6px;border-radius:var(--r-pill);background:rgba(255,255,255,.15);
  transition:background-color var(--t-4) var(--ease),box-shadow var(--t-4) var(--ease)}
.tb-seg[data-on="1"]{background:rgba(var(--green),.40)}   /*  3 pares · −19 % */
.tb-seg[data-on="2"]{background:rgba(var(--green),.55)}   /*  6 pares · −28 % */
.tb-seg[data-on="3"]{background:rgba(var(--green),.70)}   /* 12 pares · −34 % */
.tb-seg[data-on="4"]{background:rgba(var(--green),.85)}   /* 24 pares · −39 % */
.tb-seg[data-on="5"]{background:rgba(var(--green),1);
  box-shadow:0 0 8px rgba(var(--green),.55)}              /* 48 pares · −44 % */
.tb-seg.just-hit{animation:pop var(--t-2) var(--ease-overlay)}
.tb-lbl{font-size:var(--fs-10);font-weight:var(--fw-bold);text-transform:uppercase;
  letter-spacing:var(--tr-wide);color:rgba(255,255,255,.6)}
.tb-lbl.is-on{color:var(--green-lit)}
.tierbar__next{font-size:var(--fs-13);line-height:1.35;max-width:320px}
.tierbar__next b{color:var(--green-lit)}
@media(max-width:619.98px){.tb-track,.tierbar__next{display:none}
  .tierbar__in{justify-content:space-between}}
@media(min-width:620px) and (max-width:1023.98px){.tierbar__next{display:none}}

/* ── 3.11 Drawer del pedido ─────────────────────────────────────── */
.drawer{position:fixed;inset:0;z-index:var(--z-drawer);pointer-events:none}
.drawer.is-open{pointer-events:auto}
.drawer__scrim{position:absolute;inset:0;background:rgba(32,34,35,.4);opacity:0;
  transition:opacity var(--t-3) var(--ease)}
.drawer.is-open .drawer__scrim{opacity:1}
.drawer__panel{position:absolute;right:0;top:0;bottom:0;width:100%;background:#fff;
  display:flex;flex-direction:column;box-shadow:var(--sh-drawer);
  transform:translateX(100%);transition:transform var(--t-3) var(--ease-overlay);
  padding-right:var(--safe-r)}
.drawer.is-open .drawer__panel{transform:none}
@media(min-width:620px) {.drawer__panel{width:min(460px,92%)}}
@media(min-width:1536px){.drawer__panel{width:480px}}
@media(min-width:1800px){.drawer__panel{width:520px}}
.drawer__head{display:flex;align-items:center;justify-content:space-between;
  padding:16px 18px;border-bottom:1px solid var(--line)}
.drawer__body{flex:1;overflow:auto;padding:16px 18px}
.drawer__foot{border-top:1px solid var(--line);padding:16px 18px;background:var(--cream);
  padding-bottom:calc(16px + var(--safe-b))}
.line{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid var(--line)}
.line:last-child{border-bottom:0}
.line__img{width:56px;height:70px;border-radius:var(--r-input);object-fit:contain;
  background:var(--cream);flex:0 0 auto;padding:4px}
.tot{display:flex;justify-content:space-between;font-size:var(--fs-13);padding:4px 0}
.tot--big{font-family:var(--ff-display);font-size:var(--fs-20);font-weight:var(--fw-black);
  padding-top:10px;margin-top:6px;border-top:1px solid var(--line)}
.tot--save{color:var(--ok);font-weight:var(--fw-semibold)}

/* ── 3.12 Botones ─────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:var(--tap);padding:12px 24px;border-radius:var(--r-pill);
  font-family:var(--ff-text);font-size:var(--fs-14);font-weight:var(--fw-semibold);
  text-transform:uppercase;letter-spacing:var(--tr-wide);white-space:nowrap;
  border:1px solid var(--line);background:#fff;color:var(--ink);
  transition:background-color var(--t-1) var(--ease),border-color var(--t-1) var(--ease),
             color var(--t-1) var(--ease),transform var(--t-1) var(--ease-out)}
.btn:active:not(:disabled){transform:scale(.97)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.btn--primary{background:var(--primary);color:#fff;border-color:var(--primary)}
.btn--primary:hover{background:var(--secondary);border-color:var(--secondary)}
.btn--accent{background:var(--accent);color:var(--primary);border-color:var(--accent);
  font-family:var(--ff-display);font-weight:var(--fw-black)}
.btn--accent:hover{filter:brightness(.95)}       /* NO otro hex */
.btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.3)}
.btn--wa{background:var(--wa);color:#0b2e17;border-color:var(--wa);
  box-shadow:0 6px 18px rgba(37,211,102,.35)}
.btn--sm{min-height:var(--tap);padding:10px 18px;font-size:var(--fs-13)}  /* el ALTO no baja de 44 */
.btn--block{width:100%}
.btn.is-loading{pointer-events:none;opacity:.7}
.btn.is-ok{background:var(--ok);border-color:var(--ok);color:#fff}
.linkbtn{color:var(--ink);font-weight:var(--fw-semibold);font-size:var(--fs-13);
  text-decoration:underline;text-underline-offset:3px;min-height:var(--tap);
  display:inline-flex;align-items:center}

/* ── 3.13 Inputs y formularios ─────────────────────────────────────── */
.field{display:grid;gap:6px;margin-bottom:14px}
.field label{font-size:var(--fs-12);font-weight:var(--fw-semibold);color:var(--ink-2)}
.field input,.field select,.field textarea{
  width:100%;min-height:var(--tap);padding:12px 14px;font-size:var(--fs-16);
  border:1.5px solid var(--line);border-radius:var(--r-input);background:#fff;outline:0;
  transition:border-color var(--t-1) var(--ease),box-shadow var(--t-1) var(--ease)}
.field input::placeholder{color:var(--ink-3)}
.field input:focus{border-color:var(--ink);box-shadow:0 0 0 4px rgba(246,195,170,.55)}
.field input:-webkit-autofill{transition:background-color 5000s ease-in-out 0s}
.field--2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:619.98px){.field--2{grid-template-columns:1fr}}
.campo--err input,.campo--err select{border-color:var(--no);background:var(--no-tint)}
.campo--err .hint{color:var(--no)}
.hint{font-size:var(--fs-12);color:var(--ink-3);margin-top:4px}

/* Tarjeta de opción (entrega, pago, curva) */
.opcion{display:flex;gap:12px;align-items:flex-start;border:1.5px solid var(--line);
  border-radius:var(--r-panel);padding:14px 16px;cursor:pointer;min-height:var(--tap);
  transition:border-color var(--t-1) var(--ease),background-color var(--t-1) var(--ease)}
.opcion:hover{border-color:var(--ink-3)}
.opcion.is-sel{border-color:var(--ink);background:var(--peach-soft)}
.opcion input{margin:2px 0 0;accent-color:var(--ink);width:18px;height:18px;flex:0 0 auto}
.opcion__tag{font-size:var(--fs-10);font-weight:var(--fw-bold);letter-spacing:var(--tr-wide);
  text-transform:uppercase;color:var(--ok);background:var(--ok-tint);
  padding:2px 8px;border-radius:var(--r-pill)}

/* Los dos selects del sistema */
.select{appearance:none;background:#fff no-repeat right 14px center/16px
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23434951' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  border:1.5px solid var(--line);border-radius:var(--r-input);height:48px;padding:0 40px 0 14px;
  font-size:var(--fs-14);cursor:pointer}
.select-pill{appearance:none;background:#fff no-repeat right 13px center/12px
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23202223' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  border:1.5px solid var(--line);border-radius:var(--r-pill);padding:9px 34px 9px 16px;
  font-size:var(--fs-13);font-weight:var(--fw-semibold);min-height:var(--tap);cursor:pointer}

/* ── 3.14 Tablas de precio ─────────────────────────────────────── */
.tiertable{width:100%;border-collapse:collapse;font-size:var(--fs-13);
  font-variant-numeric:tabular-nums}
.tiertable th{text-align:left;font-size:var(--fs-11);text-transform:uppercase;
  letter-spacing:var(--tr-wide);color:var(--ink-3);padding:0 0 8px;font-weight:var(--fw-semibold)}
.tiertable td{padding:10px 0;border-top:1px solid var(--line-2)}
.tiertable td:last-child{text-align:right;font-family:var(--ff-display);font-weight:var(--fw-bold)}
.tiertable tr.is-on td{background:var(--peach-soft);font-weight:var(--fw-bold)}
.tiertable tr.is-on td:first-child{border-radius:var(--r-input) 0 0 var(--r-input);padding-left:10px}
.tiertable tr.is-on td:last-child{border-radius:0 var(--r-input) var(--r-input) 0;padding-right:10px}
.tt-off{color:var(--ok);font-size:var(--fs-12);font-weight:var(--fw-bold)}

/* ── 3.14 Tablas de precio ─────────────────────────────────────── */
@media(max-width:1023.98px){
  .tabla-ficha,.tabla-ficha tbody,.tabla-ficha tr,.tabla-ficha td{display:block;width:100%}
  .tabla-ficha thead{display:none}
  .tabla-ficha tr{border:1px solid var(--line);border-radius:var(--r-panel);
    padding:9px 12px;margin-bottom:10px}
  .tabla-ficha td{border:0;padding:5px 0;display:flex;align-items:center;
    justify-content:space-between;gap:14px;text-align:right;font-size:var(--fs-13)}
  .tabla-ficha td::before{content:attr(data-l);color:var(--ink-3);
    font-weight:var(--fw-semibold);font-size:var(--fs-12);text-align:left}
  .tabla-ficha td:last-child{font-weight:var(--fw-bold)}
}

/* ── 3.15 Toast ─────────────────────────────────────── */
.toast{position:fixed;left:12px;right:12px;bottom:calc(14px + var(--safe-b) + var(--tierbar-off));
  z-index:var(--z-toast);display:flex;align-items:center;gap:10px;
  max-width:min(520px,92vw);margin-inline:auto;
  background:var(--primary);color:#fff;border-radius:var(--r-panel);padding:11px 12px 11px 14px;
  box-shadow:var(--sh-toast);transform:translateY(150%);opacity:0;pointer-events:none;
  transition:transform var(--t-3) var(--ease-overlay),opacity var(--t-2) linear}
.toast.is-on{transform:none;opacity:1;pointer-events:auto}
.toast__ok{width:22px;height:22px;flex:0 0 auto;border-radius:50%;background:var(--ok);
  display:grid;place-items:center;font-size:12px;font-weight:var(--fw-bold)}
.toast__t{flex:1;font-size:var(--fs-13);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.toast__a{flex:0 0 auto;background:#fff;color:var(--primary);border-radius:var(--r-pill);
  font-size:var(--fs-12);font-weight:var(--fw-bold);padding:8px 13px;min-height:36px}
@media(max-width:1023.98px){.toast{bottom:calc(14px + var(--bottomnav-h) + var(--safe-b) + var(--tierbar-off))}}

/* ── 3.16 Skeletons ─────────────────────────────────────── */
.sk{animation:pulse 2s var(--ease-pulse) infinite}
.sk__img{aspect-ratio:4/5;width:100%;border-radius:var(--r-card);
  background:var(--cream);border:1px solid var(--line)}
.sk__l{height:14px;border-radius:6px;background:var(--line);margin-top:12px}
.sk__l--m{width:75%} .sk__l--s{height:12px;width:50%;background:var(--cream);margin-top:8px}
.sk__l--p{height:20px;width:40%;margin-top:12px;background:var(--line)}
@keyframes pulse{50%{opacity:.5}}

/* ── 3.17 Estados vacíos ─────────────────────────────────────── */
.empty{display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:80px 20px;color:var(--ink-2)}
.empty__ico{width:56px;height:56px;border-radius:50%;background:var(--cream);color:var(--ink-2);
  display:grid;place-items:center;margin-bottom:16px}
.empty__t{font-family:var(--ff-display);font-size:var(--fs-18);font-weight:var(--fw-bold);
  color:var(--ink);margin:0 0 4px}
.empty__d{font-size:var(--fs-14);margin:0 0 20px;max-width:38ch}

/* ┌───────── src/css/05-vistas.css ─────────┐ */
/* ═══════════════════════════════════════════════════════════════════════════
   5 · VISTAS — gate y ficha de producto
   Generado desde scratchpad/analisis/00-SPEC-PORTAL.md (auditoría de 9 agentes
   sobre los 6 sitios de Endurances IT, 27/08/2026).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 3.8 Ficha de producto (`.pdp`) ─────────────────────────────────────── */
.gal{display:flex;flex-direction:column-reverse;gap:12px}
@media(min-width:640px){.gal{flex-direction:row}}
.gal__main{display:flex;aspect-ratio:4/5;scroll-snap-type:x mandatory;overflow-x:auto;
  border-radius:var(--r-card);border:1px solid var(--line);background:#fff}
.gal__main img{flex:0 0 100%;width:100%;height:100%;object-fit:contain;padding:6%;scroll-snap-align:start}
.gal__thumbs{display:flex;gap:8px;overflow-x:auto}
@media(min-width:640px){.gal__thumbs{flex-direction:column}}
.gal__thumbs button{width:64px;height:80px;border-radius:var(--r-input);border:1px solid var(--line);
  background:#fff;padding:4px;flex:0 0 auto}
.gal__thumbs button[aria-current="true"]{box-shadow:0 0 0 2px var(--ink)}
.gal__dots{display:flex;justify-content:center;gap:6px;height:24px;align-items:center}
@media(min-width:640px){.gal__dots{display:none}}
.gal__dots i{height:6px;width:6px;border-radius:var(--r-pill);background:var(--line);
  transition:width var(--t-2) var(--ease-out)}
.gal__dots i.is-on{width:20px;background:var(--ink)}

/* ── 3.8 Ficha de producto (`.pdp`) ─────────────────────────────────────── */
.pdp__grid{display:grid;grid-template-columns:1fr;gap:22px}
@media(min-width:1024px){.pdp__grid{grid-template-columns:460px minmax(0,1fr);gap:32px}}
@media(min-width:1280px){.pdp__grid{gap:38px}}
@media(min-width:1536px){.pdp__grid{grid-template-columns:520px minmax(0,1fr)}}
@media(min-width:1800px){.pdp__grid{grid-template-columns:560px minmax(0,1fr)}}
.pdp__box{border:1px solid var(--line);border-radius:var(--r-card);padding:18px;margin-bottom:18px}
.pdp__box h3{display:flex;align-items:center;gap:10px;font-size:var(--fs-h3);
  font-weight:var(--fw-bold);margin:0 0 12px}
.pdp__n{width:26px;height:26px;flex:0 0 auto;border-radius:50%;background:var(--peach-soft);
  color:var(--ink);display:grid;place-items:center;font-size:var(--fs-13);font-weight:var(--fw-bold)}
.pdp__price{font-family:var(--ff-display);font-size:var(--fs-price-pdp);
  font-weight:var(--fw-black);letter-spacing:var(--tr-tight);font-variant-numeric:tabular-nums}
.pdp__save{display:inline-flex;align-items:center;gap:6px;background:var(--ok-tint);color:var(--ok);
  font-size:var(--fs-13);font-weight:var(--fw-bold);padding:6px 14px;border-radius:var(--r-pill)}

/* ── 3.8 Ficha de producto (`.pdp`) ─────────────────────────────────────── */
.spec{display:grid;grid-template-columns:max-content 1fr;gap:0 20px}
.spec dt{font-size:var(--fs-13);color:var(--ink-2);padding:9px 0;border-bottom:1px solid var(--line)}
.spec dd{font-size:var(--fs-13);font-weight:var(--fw-semibold);margin:0;padding:9px 0;
  border-bottom:1px solid var(--line)}

/* ── 3.8 Ficha de producto (`.pdp`) ─────────────────────────────────────── */
.buybar{display:none;position:fixed;inset-inline:0;z-index:var(--z-fixed);align-items:center;gap:12px;
  padding:10px max(14px,var(--safe-l)) 10px max(14px,var(--safe-r));
  background:rgba(255,255,255,.97);backdrop-filter:blur(var(--blur-lg));
  border-top:1px solid var(--line);box-shadow:var(--sh-buybar)}
@media(max-width:1023.98px){
  .buybar{display:flex}
  .pdp__actions .add{display:none}
  .pdp__actions::before{content:"Cantidad";font-size:var(--fs-13);font-weight:var(--fw-semibold);color:var(--ink-2)}
}

/* ── 5.1 GATE — "¿Cómo querés ver los precios?" ─────────────────────────────────────── */
.gate{position:fixed;inset:0;z-index:var(--z-gate);display:grid;place-items:center;padding:24px;
  background:rgba(32,34,35,.34);backdrop-filter:blur(6px)}
.gate__card{width:min(680px,100%);background:#fff;border-radius:var(--r-block);
  box-shadow:var(--sh-deep);padding:44px 44px 26px;text-align:center;
  animation:pop 340ms var(--ease-overlay) forwards}
.opt{position:relative;border:1.5px solid var(--line);border-radius:var(--r-card);
  padding:22px 20px;display:flex;flex-direction:column;gap:8px;text-align:left;background:#fff;
  transition:border-color var(--t-1) var(--ease),box-shadow var(--t-1) var(--ease),
             transform var(--t-1) var(--ease-out)}
.opt:hover{border-color:var(--ink);box-shadow:var(--sh-1);transform:translateY(-2px)}
.opt__ico{width:46px;height:46px;border-radius:var(--r-panel);display:grid;place-items:center;
  background:var(--cream);border:1px solid var(--line)}
.opt--primary .opt__ico{background:var(--accent);border-color:var(--accent);color:var(--ink)}
.opt__tag{position:absolute;top:14px;right:14px;font-size:var(--fs-10);font-weight:var(--fw-bold);
  letter-spacing:var(--tr-wide);text-transform:uppercase;color:var(--ink);
  background:var(--peach-soft);padding:4px 9px;border-radius:var(--r-pill)}
body.gate-open{overflow:hidden}

/* ┌───────── src/css/06-responsive.css ─────────┐ */
/* ═══════════════════════════════════════════════════════════════════════════
   6 · RESPONSIVE — celular · tablet · notebook · desktop · TV
   Generado desde scratchpad/analisis/00-SPEC-PORTAL.md (auditoría de 9 agentes
   sobre los 6 sitios de Endurances IT, 27/08/2026).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Dos queries que NO son de ancho (y que hoy faltan) ─────────────────────────────────────── */
/* Teléfono acostado: un iPhone en horizontal deja 390px de ALTO. El gate del
   portal tiene ~340px de contenido y no entra. Se mira el alto, no el ancho.
   Y va 100dvh, nunca 100vh. */
@media (max-height:520px){
  .gate{padding:10px;align-items:center}
  .gate__card{padding:18px 20px 14px;max-height:calc(100dvh - 20px);overflow-y:auto}
  .gate__title{font-size:var(--fs-18);margin-bottom:4px}
  .gate__lead{font-size:var(--fs-13);margin-bottom:14px;max-width:none}
  .opt{padding:12px 14px;gap:8px}
  .opt__ico{width:34px;height:34px;margin-bottom:0}
  .sheet__panel{max-height:calc(100dvh - 20px)}
}
@media (max-width:1023.98px) and (max-height:520px){
  .search{display:none}.searchtoggle{display:grid}
}
/* pointer:coarse cubre el iPad horizontal: 1024px de ancho, pero es un dedo. */

/* ── 2.3 El bloque táctil (textual de casareyes.com.ar — especificidad 0, sin `!important`) ─────────────────────────────────────── */
@media (max-width:1023.98px),(pointer:coarse){
  :where(button,[role=button],summary,select){min-height:2.75rem}          /* 44px */
  :where(button,[role=button]){display:inline-flex;align-items:center;justify-content:center}
  input[type=checkbox],input[type=radio]{width:1.25rem;height:1.25rem}      /* 20px */
  :where(label:has(>input[type=checkbox]),label:has(>input[type=radio])){min-height:2.75rem}
  input:not([type=checkbox]):not([type=radio]),select,textarea{
    font-size:1rem;line-height:1.35;min-height:2.75rem}   /* 16px = iOS no hace zoom */
  .iconbtn,.burger{width:44px;height:44px}
  .search input{font-size:16px;height:46px;padding:0 16px 0 44px}
  .sizecell,.stepper button{min-height:44px}
  .stepper input{height:44px;font-size:15px}
}

/* ── 2.4 Contenedores y padding ─────────────────────────────────────── */
.shell{max-width:var(--shell);margin-inline:auto;
  padding-inline:max(var(--pad),var(--safe-l)) max(var(--pad),var(--safe-r))}
.shell--cat{max-width:var(--shell-cat)}
.shell--pdp{max-width:var(--shell-pdp)}
.shell--page{max-width:var(--shell-page)}

@media (min-width:400px) {:root{--pad:16px; --grid-gap-x:12px; --grid-gap-y:32px}}
@media (min-width:620px) {:root{--pad:24px; --hdr-h:64px}}
@media (min-width:768px) {:root{--grid-gap-x:16px; --grid-gap-y:40px}}
@media (min-width:1024px){:root{--hdr-h:80px}}
@media (min-width:1280px){:root{--pad:32px; --grid-gap-x:24px}}
@media (min-width:1536px){:root{--pad:40px}}
@media (min-width:1800px){:root{--pad:56px;
  --shell:max(1440px,min(93vw,3040px)); --shell-cat:max(1720px,min(94vw,3040px));
  --shell-pdp:1500px; --shell-page:1320px}}
@media (min-width:2400px){:root{--pad:64px}}

/* ── 2.5 Grilla de producto (columnas explícitas hasta 1799) ─────────────────────────────────────── */
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:var(--grid-gap-x);row-gap:var(--grid-gap-y)}
@media (min-width:620px) {.grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:900px) {.grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:1536px){.grid{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media (min-width:1800px){.grid{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}}
@media (min-width:2400px){.grid{grid-template-columns:repeat(auto-fill,minmax(232px,1fr))}}

/* ── 2.6 TV y pantallas grandes ─────────────────────────────────────── */
@media (min-width:2400px) and (max-width:3399.98px) and (max-resolution:1.39dppx){
  :root{--tvz:1.25}}
@media (min-width:2400px) and (max-width:3399.98px) and (min-resolution:1.4dppx){
  :root{--tvz:1.45}}
@media (min-width:3400px) and (min-height:1600px){:root{--tvz:2.35}}   /* TV 55" 4K */
@media (min-width:3400px) and (max-height:1599.98px){:root{--tvz:1.60}} /* ultrawide */
@media (min-width:2400px){
  :root{--shell:calc(94vw / var(--tvz));--shell-cat:calc(96vw / var(--tvz));
        --shell-pdp:calc(70vw / var(--tvz));--shell-page:calc(58vw / var(--tvz))}
  body{zoom:var(--tvz)}
}
/* Palanca manual: la TV a 1080p reporta 1920px y NINGÚN media query la distingue
   de una notebook. Ctrl+ no sirve (al 200% el viewport cae a 960 y salta el
   layout de tablet). Va como botón "Modo TV" en el drawer del menú, guardado en
   localStorage: el portal se muestra en reuniones y en el mostrador. */
html[data-tv="1"]{--tvz:1.35} html[data-tv="2"]{--tvz:1.70}
html[data-tv]{--shell:calc(94vw / var(--tvz));--shell-cat:calc(96vw / var(--tvz));
              --shell-pdp:calc(70vw / var(--tvz));--shell-page:calc(58vw / var(--tvz))}
html[data-tv] body{zoom:var(--tvz)}
/* zoom NO escala vw/vh: hay que dividirlos a mano. Son exactamente estos 3. */
@media (min-width:2400px){
  body .side{max-height:calc((100dvh - var(--hdr-h)) / var(--tvz))}
  body .drawer__body{max-height:calc(80dvh / var(--tvz))}
  body .modal__card{max-height:calc(88dvh / var(--tvz))}
}
html[data-tv] body .side{max-height:calc((100dvh - var(--hdr-h)) / var(--tvz))}
html[data-tv] body .drawer__body{max-height:calc(80dvh / var(--tvz))}
html[data-tv] body .modal__card{max-height:calc(88dvh / var(--tvz))}

/* ── 2.7 Apilado de barras fijas ─────────────────────────────────────── */
body.has-tierbar{--tierbar-off:var(--tierbar-h)}

@media (max-width:1023.98px){
  .tierbar,.buybar{bottom:calc(var(--bottomnav-h) + var(--safe-b))}
  body{padding-bottom:calc(var(--bottomnav-h) + var(--safe-b))}
  body.has-tierbar{padding-bottom:calc(var(--bottomnav-h) + var(--tierbar-h) + var(--safe-b))}
  body.has-buybar{padding-bottom:calc(var(--bottomnav-h) + 72px + var(--safe-b))}
}
@media (min-width:1024px){
  .tierbar{bottom:0;padding-bottom:calc(11px + var(--safe-b))}
  body.has-tierbar{padding-bottom:calc(var(--tierbar-h) + var(--safe-b))}
}

/* ── 2.8 Hover solo donde hay mouse ─────────────────────────────────────── */
@media (hover:hover) and (pointer:fine){
  .card:hover .card__frame{transform:translateY(-4px);box-shadow:var(--sh-2)}
  .card:hover .card__img{transform:scale(1.05)}
  .chip:hover{border-color:var(--ink)}
  .btn:hover{border-color:var(--ink);background:var(--cream)}
}
/* En táctil el hover se reemplaza por :active — si no, queda pegado tras el tap */
.chip:active,.burger:active,.mbar__chip:active{border-color:var(--ink);color:var(--ink)}

/* ┌───────── src/css/07-vistas.css ─────────┐ */
/* ═══════════════════════════════════════════════════════════════════════════
   7 · VISTAS — hero, secciones, catálogo, gate, capas y utilidades
   ───────────────────────────────────────────────────────────────────────────
   Completa lo que la spec deja planteado en prosa. Todo con los tokens de
   01-tokens.css: acá no nace ni un color, ni un radio, ni una duración nueva.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Utilidades ──────────────────────────────────────────────────────────── */
.muted { color: var(--ink-3); }
.eyebrow {
  display: block; font-size: var(--fs-11); font-weight: var(--fw-bold);
  letter-spacing: var(--tr-eyebrow); text-transform: uppercase; color: var(--accent-text);
}
.eyebrow-pill {
  display: inline-block; background: var(--accent); color: var(--primary);
  font-size: var(--fs-12); font-weight: var(--fw-black);
  letter-spacing: var(--tr-eyebrow); text-transform: uppercase;
  padding: 6px 16px; border-radius: var(--r-pill);
}
.sec__head { margin-bottom: var(--sp-6); }
.sec__h2 { font-size: var(--fs-h2); margin-top: var(--sp-2); }
.chk { display: flex; align-items: center; gap: 9px; font-size: var(--fs-14); cursor: pointer; user-select: none; padding-block: 3px; }
.chk input { accent-color: var(--primary); cursor: pointer; }

/* ── HERO ────────────────────────────────────────────────────────────────── */
.hero { position: relative; background: var(--primary); overflow: hidden; }
.hero__in {
  position: relative; z-index: 1;
  display: grid; gap: var(--sp-8);
  padding-block: var(--sp-12) var(--sp-14);
}
@media (min-width: 1024px) {
  .hero__in { grid-template-columns: 1.15fr 1fr; align-items: center; gap: var(--sp-12); }
}
/* Los blobs dan profundidad sin pesar: son dos divs con blur, no una imagen. */
.hero__blob {
  position: absolute; border-radius: 50%; filter: blur(64px);
  pointer-events: none; opacity: .5;
}
.hero__blob--1 { width: 420px; height: 420px; background: var(--accent); top: -140px; right: -80px; }
.hero__blob--2 { width: 320px; height: 320px; background: var(--accent-deep); bottom: -160px; left: -100px; opacity: .3; }

.hero__h1 {
  font-size: var(--fs-hero); line-height: var(--lh-hero);
  text-transform: uppercase; margin: var(--sp-4) 0 var(--sp-4);
}
/* El resaltador durazno debajo de la última línea, como el hero de la tienda. */
.hero__h1 .marca { position: relative; display: inline-block; }
.hero__h1 .marca::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: .18em;
  background: color-mix(in srgb, var(--accent) 70%, transparent); z-index: -1;
}
.hero__lead { font-size: var(--fs-16); line-height: var(--lh-relaxed); color: rgba(255,255,255,.78); max-width: 54ch; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6); }
.hero__trust { margin-top: var(--sp-5); font-size: var(--fs-12); color: rgba(255,255,255,.55); }
.hero__trust i { font-style: normal; margin-inline: 6px; opacity: .5; }

.hero__panel {
  border-radius: var(--r-block); border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.05); padding: var(--sp-6);
  backdrop-filter: blur(var(--blur-md)); -webkit-backdrop-filter: blur(var(--blur-md));
}
.hero__panel-lbl { font-size: var(--fs-11); text-transform: uppercase; letter-spacing: var(--tr-eyebrow); color: rgba(255,255,255,.6); }
.hero__panel-n {
  font-family: var(--ff-display); font-weight: var(--fw-black);
  font-size: var(--fs-panel); line-height: 1; margin: var(--sp-2) 0 4px;
  font-variant-numeric: tabular-nums; letter-spacing: var(--tr-tight);
}
.hero__panel-cap { font-size: var(--fs-13); color: rgba(255,255,255,.62); }

.pasos { list-style: none; margin: var(--sp-5) 0 0; padding: 0; display: grid; gap: var(--sp-2); }
.pasos li {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  background: rgba(255,255,255,.05); border-radius: var(--r-card); padding: 14px;
}
.pasos__n {
  flex: 0 0 auto; width: 32px; height: 32px; border-radius: var(--r-pill);
  display: grid; place-items: center; background: var(--accent); color: var(--primary);
  font-family: var(--ff-display); font-weight: var(--fw-black); font-size: var(--fs-14);
}
.pasos b { display: block; font-size: var(--fs-14); }
.pasos span { font-size: var(--fs-13); color: rgba(255,255,255,.62); line-height: var(--lh-snug); }

/* ── Barra del cliente final ─────────────────────────────────────────────── */
.finalbar { background: var(--accent); color: var(--primary); }
.finalbar__in {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5); padding-block: 11px; font-size: var(--fs-13); font-weight: var(--fw-medium);
}

/* ── Marquee de marcas ───────────────────────────────────────────────────── */
.marquee { overflow: hidden; border-block: 1px solid var(--line); background: var(--cream); padding-block: var(--sp-5); }
.marquee__t { display: flex; width: max-content; gap: var(--sp-12); align-items: center; }
.marquee__i {
  display: inline-flex; align-items: baseline; gap: 8px;
  font-family: var(--ff-display); font-size: var(--fs-24); font-weight: var(--fw-black);
  color: var(--ink-4); letter-spacing: var(--tr-tight); text-transform: uppercase;
  transition: color var(--t-1) var(--ease);
}
.marquee__i b { font-size: var(--fs-13); color: var(--accent-text); }

/* ── Cupón + value props ─────────────────────────────────────────────────── */
.bloque-b2b { display: grid; gap: var(--sp-5); padding-block: var(--pad-sec); }
@media (min-width: 1024px) { .bloque-b2b { grid-template-columns: 340px 1fr; align-items: center; } }

.cupon {
  position: relative; background: var(--primary); color: #fff;
  border-radius: var(--r-block); padding: var(--sp-6) var(--sp-5);
  text-align: center; display: grid; gap: 4px; overflow: hidden;
}
/* Las dos muescas del ticket, sin imagen: dos círculos del color del fondo. */
.cupon::before, .cupon::after {
  content: ""; position: absolute; width: 26px; height: 26px; border-radius: 50%;
  background: var(--bg); top: 50%; transform: translateY(-50%);
}
.cupon::before { left: -13px; } .cupon::after { right: -13px; }
.cupon__top { font-size: var(--fs-11); font-weight: var(--fw-bold); letter-spacing: var(--tr-eyebrow); text-transform: uppercase; color: var(--accent); }
.cupon__n { font-family: var(--ff-display); font-weight: var(--fw-black); font-size: var(--fs-48); line-height: 1; letter-spacing: var(--tr-tight); }
.cupon__cap { font-size: var(--fs-12); color: rgba(255,255,255,.6); }
.cupon__serial { margin-top: var(--sp-3); font-size: var(--fs-10); letter-spacing: var(--tr-foot); color: rgba(255,255,255,.4); font-variant-numeric: tabular-nums; }

.vprops { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
@media (min-width: 900px) { .vprops { grid-template-columns: repeat(4, 1fr); } }
.vprop { padding: var(--sp-4); border: 1px solid var(--line); border-radius: var(--r-card); display: grid; gap: 5px; align-content: start; }
.vprop b { font-family: var(--ff-display); font-weight: var(--fw-bold); font-size: var(--fs-14); }
.vprop span { font-size: var(--fs-13); color: var(--ink-3); line-height: var(--lh-snug); }

/* ── Catálogo ────────────────────────────────────────────────────────────── */
.catalogo { padding-block: var(--pad-sec); scroll-margin-top: calc(var(--hdr-h) + 16px); }
.catalog-top {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  flex-wrap: wrap; margin-bottom: var(--sp-4);
}
.count { font-size: var(--fs-13); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.sortwrap { display: flex; align-items: center; gap: var(--sp-2); }
.sortlbl { font-size: var(--fs-12); color: var(--ink-3); }
.select-pill {
  height: 38px; padding: 0 34px 0 14px; border: 1px solid var(--line); border-radius: var(--r-pill);
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236f747b' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center / 15px;
  appearance: none; font-size: var(--fs-13); font-weight: var(--fw-semibold); cursor: pointer;
}
.chiprow { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: var(--sp-4); }

.catalog { display: grid; gap: var(--sp-8); }
@media (min-width: 1024px) { .catalog { grid-template-columns: var(--sidebar) minmax(0, 1fr); } }
.catalog__main { min-width: 0; }

.side { display: none; align-content: start; gap: var(--sp-6); position: sticky; top: calc(var(--hdr-h) + var(--ratebar-h) + 16px); max-height: calc(100dvh - var(--hdr-h) - 40px); overflow-y: auto; }
@media (min-width: 1024px) { .side { display: grid; } }
.side__g { display: grid; gap: var(--sp-2); }
.side__t { font-size: var(--fs-11); font-weight: var(--fw-bold); letter-spacing: var(--tr-foot); text-transform: uppercase; color: var(--ink-3); font-family: var(--ff-text); margin: 0 0 4px; }
.tallefiltro { display: flex; flex-wrap: wrap; gap: 6px; }
.tallefiltro button {
  min-width: 40px; min-height: 34px; padding: 0 9px;
  border: 1px solid var(--line); border-radius: var(--r-input);
  font-size: var(--fs-13); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums;
  transition: border-color var(--t-1) var(--ease), background-color var(--t-1) var(--ease), color var(--t-1) var(--ease);
}
.tallefiltro button.is-on { background: var(--primary); color: #fff; border-color: var(--primary); }
.tallefiltro button:disabled { opacity: .35; cursor: not-allowed; }

.vermas { display: grid; justify-items: center; gap: var(--sp-3); margin-top: var(--sp-10); }
.vacio { text-align: center; padding: var(--sp-16) var(--sp-5); color: var(--ink-3); }
.vacio b { display: block; font-family: var(--ff-display); font-weight: var(--fw-black); font-size: var(--fs-20); color: var(--ink); margin-bottom: 6px; }
.vacio__ico { font-size: 42px; opacity: .28; margin-bottom: var(--sp-3); }

/* ── Chips de marca (celular) ────────────────────────────────────────────── */
.catbar {
  display: none; gap: 8px; overflow-x: auto; scroll-snap-type: x proximity;
  padding: var(--sp-3) max(var(--pad), var(--safe-l));
  border-bottom: 1px solid var(--line);
  -ms-overflow-style: none; scrollbar-width: none;
}
.catbar::-webkit-scrollbar { display: none; }
@media (max-width: 1023.98px) { .catbar { display: flex; } }
.chip {
  flex: 0 0 auto; scroll-snap-align: start;
  padding: 8px 16px; border: 1px solid var(--line); border-radius: var(--r-pill);
  font-size: var(--fs-13); font-weight: var(--fw-medium); white-space: nowrap; min-height: 38px;
  display: inline-flex; align-items: center; gap: 6px;
  transition: border-color var(--t-1) var(--ease), background-color var(--t-1) var(--ease), color var(--t-1) var(--ease);
}
.chip.is-on { background: var(--primary); color: #fff; border-color: var(--primary); }
.chip__x { opacity: .6; font-size: var(--fs-16); line-height: 1; }

/* ── Tarjetas de condiciones B2B ─────────────────────────────────────────── */
.b2bcards { display: grid; gap: var(--sp-4); padding-block: var(--pad-sec); }
@media (min-width: 900px) { .b2bcards { grid-template-columns: repeat(3, 1fr); } }
.b2bcard {
  position: relative; padding: var(--sp-6); border-radius: var(--r-card);
  background: color-mix(in srgb, var(--tone) 9%, var(--bg));
  border: 1px solid color-mix(in srgb, var(--tone) 26%, transparent);
}
.b2bcard::before {
  content: ""; position: absolute; left: var(--sp-6); top: 0; width: 40px; height: 3px;
  background: var(--tone); border-radius: 0 0 var(--r-pill) var(--r-pill);
}
.b2bcard h3 { font-size: var(--fs-18); margin-bottom: 6px; }
.b2bcard p { font-size: var(--fs-14); color: var(--ink-2); line-height: var(--lh-relaxed); }

/* ── Buscador: chip de limpiar y sugerencias ─────────────────────────────── */
/* Solo lo que agrega. El flex y el max-width viven en las media queries de
   03-layout: sin query, esta regla ganaba por orden y el buscador nunca bajaba
   a su propia fila en celular. */
.search { position: relative; }
.search__clear {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; border-radius: var(--r-pill); color: var(--ink-3);
  display: grid; place-items: center;
}
.search__clear:hover { background: var(--cream); color: var(--ink); }
.search__clear svg { width: 16px; height: 16px; }
.sugg {
  position: absolute; inset-inline: 0; top: calc(100% + 8px); z-index: var(--z-search);
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-card);
  box-shadow: var(--sh-3); overflow: hidden; max-height: 62vh; overflow-y: auto;
  animation: pop 200ms var(--ease-overlay) both;
}
.sugg__it { display: flex; align-items: center; gap: var(--sp-3); width: 100%; padding: 9px var(--sp-3); text-align: left; border-bottom: 1px solid var(--line-2); }
.sugg__it:last-child { border-bottom: 0; }
.sugg__it:hover, .sugg__it[aria-selected="true"] { background: var(--cream); }
.sugg__img { width: 42px; height: 42px; border-radius: var(--r-input); object-fit: contain; background: var(--cream); flex: 0 0 auto; }
.sugg__t { flex: 1; min-width: 0; }
.sugg__n { font-size: var(--fs-14); font-weight: var(--fw-semibold); line-height: 1.25; }
.sugg__m { font-size: var(--fs-11); color: var(--ink-3); }
.sugg__p { font-family: var(--ff-display); font-weight: var(--fw-bold); font-size: var(--fs-14); white-space: nowrap; font-variant-numeric: tabular-nums; }
.sugg__vacio { padding: var(--sp-5); text-align: center; color: var(--ink-3); font-size: var(--fs-13); }
/* La lupa reemplaza al buscador SOLO cuando el buscador no se muestra: en
   celular acostado. Va con la misma especificidad que la regla que la enciende
   (06-responsive) y ANTES en el archivo, así la media query gana. */
.hdr__acts .searchtoggle { display: none; }
@media (max-width: 1023.98px) and (max-height: 520px) {
  .hdr__acts .searchtoggle { display: grid; }
}

/* ── Chip de modo ────────────────────────────────────────────────────────── */
.modechip {
  display: none; flex-direction: column; align-items: flex-start; line-height: 1.15;
  padding: 5px 14px; border: 1px solid var(--line); border-radius: var(--r-pill);
  transition: border-color var(--t-1) var(--ease), background-color var(--t-1) var(--ease);
}
@media (min-width: 1024px) { .modechip { display: flex; } }
.modechip:hover { border-color: var(--ink); background: var(--cream); }
.modechip__lbl { font-size: var(--fs-10); color: var(--ink-3); text-transform: uppercase; letter-spacing: var(--tr-wide); }
.modechip__val { font-size: var(--fs-13); font-weight: var(--fw-bold); font-family: var(--ff-display); }

/* ── Barras fijas: piezas que faltaban ───────────────────────────────────── */
.tierbar__now { display: flex; flex-direction: column; gap: 2px; flex: 0 0 auto; min-width: 104px; }
.tierbar__track { flex: 1; min-width: 110px; display: flex; gap: 3px; }
@media (max-width: 767.98px) { .tierbar__track, .tierbar__next { display: none; } }

.bn__wa { background: var(--wa); color: #fff; width: 30px; height: 30px; border-radius: var(--r-pill); display: grid; place-items: center; }
.bn__wa svg { width: 18px; height: 18px; }
.bn__n {
  position: absolute; top: 4px; right: 22%; min-width: 17px; height: 17px; padding: 0 4px;
  background: var(--accent); color: var(--primary); border-radius: var(--r-pill);
  font-size: var(--fs-10); font-weight: var(--fw-bold); display: grid; place-items: center;
}
.bottomnav a { position: relative; }

.wa-float {
  position: fixed; right: 20px; bottom: calc(20px + var(--tierbar-off)); z-index: var(--z-fixed);
  width: 52px; height: 52px; border-radius: var(--r-pill);
  background: var(--wa); color: #fff; display: grid; place-items: center;
  box-shadow: 0 8px 24px rgba(37,211,102,.34);
  transition: transform var(--t-1) var(--ease-out), bottom var(--t-3) var(--ease);
}
.wa-float:hover { transform: scale(1.06); }
.wa-float svg { width: 27px; height: 27px; }
@media (max-width: 1023.98px) { .wa-float { display: none; } }

.mbar__dolar { font-size: var(--fs-12); color: var(--ink-3); }

/* ── Bottom sheet de ajustes (celular) ───────────────────────────────────── */
.sheet { position: fixed; inset: 0; z-index: var(--z-gate); }
.sheet__panel {
  position: absolute; inset-inline: 0; bottom: 0;
  background: #fff; border-radius: var(--r-block) var(--r-block) 0 0;
  padding: var(--sp-3) var(--sp-5) calc(var(--sp-5) + var(--safe-b));
  box-shadow: var(--sh-sheet); animation: sup 300ms var(--ease-overlay) both;
  max-height: 84dvh; overflow-y: auto;
}
.sheet__grip { width: 40px; height: 4px; border-radius: var(--r-pill); background: var(--line); margin: 0 auto var(--sp-4); }
.sheet__g { margin-bottom: var(--sp-5); }
.sheet__t { font-size: var(--fs-11); font-weight: var(--fw-bold); letter-spacing: var(--tr-foot); text-transform: uppercase; color: var(--ink-3); margin-bottom: var(--sp-2); }

/* ── Modal ───────────────────────────────────────────────────────────────── */
.modal { position: fixed; inset: 0; z-index: var(--z-gate); display: grid; place-items: center; padding: var(--sp-5); }
.modal__scrim { position: absolute; inset: 0; background: rgba(32,34,35,.42); backdrop-filter: blur(4px); animation: mfade var(--t-3) var(--ease) both; }
.modal__card {
  position: relative; background: #fff; border-radius: var(--r-block);
  box-shadow: var(--sh-deep); width: min(560px, 100%);
  padding: var(--sp-8) var(--sp-6) var(--sp-6); max-height: 88dvh; overflow-y: auto;
  animation: pop 320ms var(--ease-overlay) both;
}
.modal__card h2 { font-size: var(--fs-h2); margin-bottom: 6px; }

/* ── Gate ────────────────────────────────────────────────────────────────── */
.gate__logo { height: 52px; width: auto; object-fit: contain; margin: 0 auto var(--sp-5); display: block; }
.gate__title { font-size: var(--fs-24); font-weight: var(--fw-black); margin-bottom: var(--sp-2); }
.gate__lead { max-width: 440px; margin: 0 auto var(--sp-6); color: var(--ink-3); font-size: var(--fs-14); line-height: var(--lh-relaxed); }
.gate__opts { display: grid; gap: var(--sp-3); }
@media (min-width: 620px) { .gate__opts { grid-template-columns: 1fr 1fr; } }
.opt__name { font-family: var(--ff-display); font-weight: var(--fw-black); font-size: var(--fs-18); }
.opt__desc { font-size: var(--fs-13); color: var(--ink-3); line-height: var(--lh-snug); }
.gate__foot { margin-top: var(--sp-6); font-size: var(--fs-12); color: var(--ink-4); }
.gate__link { margin-top: var(--sp-2); color: var(--ink-3); }

/* ── Menú lateral (celular) ──────────────────────────────────────────────── */
.drawer__panel--izq { left: 0; right: auto; width: min(380px, 88%); box-shadow: 18px 0 54px rgba(32,34,35,.24); animation-name: mslide; }
.drawer__panel--izq { transform: none; }
.menu__link { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: 14px 0; border-bottom: 1px solid var(--line-2); font-size: var(--fs-16); font-weight: var(--fw-semibold); min-height: var(--tap); }
.menu__sec { font-size: var(--fs-11); font-weight: var(--fw-bold); letter-spacing: var(--tr-foot); text-transform: uppercase; color: var(--ink-3); margin: var(--sp-6) 0 var(--sp-2); }

/* ── Footer ──────────────────────────────────────────────────────────────── */
.foot { margin-top: var(--pad-sec); border-top: 1px solid var(--line); background: var(--cream); }
.foot__cols { display: grid; gap: var(--sp-8); padding-block: var(--pad-sec) var(--sp-10); }
@media (min-width: 620px)  { .foot__cols { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .foot__cols { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; } }
.foot__logo { height: 34px; width: auto; object-fit: contain; margin-bottom: var(--sp-3); }
.foot__txt { font-size: var(--fs-13); color: var(--ink-3); line-height: var(--lh-relaxed); max-width: 42ch; }
.foot h4 { font-size: var(--fs-11); font-weight: var(--fw-bold); letter-spacing: var(--tr-foot); text-transform: uppercase; color: var(--ink-3); margin-bottom: var(--sp-3); font-family: var(--ff-text); }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.foot li a, .foot li span, .foot li button { font-size: var(--fs-14); color: var(--ink-3); display: inline-flex; align-items: center; min-height: 30px; text-align: left; }
.foot li a:hover, .foot li button:hover { color: var(--ink); }

.creditos { background: var(--primary); color: rgba(255,255,255,.62); font-size: var(--fs-12); }
.creditos__in {
  display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5);
  align-items: center; justify-content: space-between;
  padding-block: var(--sp-4); padding-bottom: calc(var(--sp-4) + var(--safe-b));
}
.creditos a { color: #fff; font-weight: var(--fw-semibold); }
.creditos a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* En celular el footer no puede quedar tapado por la nav de abajo. */
@media (max-width: 1023.98px) { .creditos__in { padding-bottom: calc(var(--sp-4) + var(--safe-b)); } }

/* ── Correcciones sobre lo generado ──────────────────────────────────────── */

/* El <a> que cubre la tarjeta tiene que ser una capa, no un elemento en el
   flujo: si no, empuja la foto fuera del marco. */
.card__link { position: absolute; inset: 0; z-index: 1; }
.card__img  { position: absolute; inset: 0; }
.card__frame--out .card__img { opacity: .45; filter: grayscale(.35); }
.card__name a { display: block; }

/* El resaltador del hero tiene que sobrevivir al salto de línea: con
   box-decoration-break se pinta en cada línea y no una sola caja gigante. */
.hero__h1 .marca { position: static; background-image: linear-gradient(transparent 68%, color-mix(in srgb, var(--accent) 70%, transparent) 0); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.hero__h1 .marca::after { content: none; }
.hero__h1 { overflow-wrap: break-word; hyphens: none; max-width: 15ch; }
@media (max-width: 619.98px) { .hero__h1 { max-width: none; font-size: clamp(1.75rem, 1.2rem + 4vw, 2.5rem); } }

/* Barra de escalón: track arriba, etiquetas abajo, alineadas al mismo grid. */
.tierbar__prog { flex: 1; min-width: 160px; display: grid; gap: 5px; }
.tb-lbls { display: flex; gap: 6px; }
.tb-lbls .tb-lbl { flex: 1; text-align: center; }
@media (max-width: 619.98px) { .tierbar__prog { display: none; } }

/* La barra es oscura: lo que va adentro tiene que leerse sobre oscuro. */
.tierbar .btn--accent { border-color: var(--accent); }
.tierbar__now { min-width: 96px; }

/* El resaltador es una franja baja, no un bloque: con line-height .9 el 68 %
   pintaba casi toda la letra. */
.hero__h1 .marca { background-image: linear-gradient(transparent 76%, color-mix(in srgb, var(--accent) 65%, transparent) 0); }

/* El marquee: el gap entre la última y la primera copia rompía el loop, porque
   -50% no caía justo. El aire va DENTRO de cada ítem. */
.marquee__t { gap: 0; }
.marquee__i { padding-inline: calc(var(--sp-12) / 2); }

/* ── Chips de talle de la tarjeta ────────────────────────────────────────── */
/* El mayorista mira ESTO antes que el precio: qué talles hay y cuántos. */
.sz {
  display: inline-flex; align-items: baseline; gap: 2px;
  font-size: var(--fs-11); font-weight: var(--fw-semibold);
  padding: 3px 7px; border-radius: var(--r-input);
  background: var(--cream); border: 1px solid var(--line); color: var(--ink-2);
  font-variant-numeric: tabular-nums; line-height: 1.2;
}
.sz b { color: var(--ink-3); font-weight: var(--fw-medium); font-size: var(--fs-10); }
.sz--0 { opacity: .38; text-decoration: line-through; }
.sz--low { border-color: color-mix(in srgb, var(--warn) 35%, transparent); background: var(--warn-tint); color: var(--warn); }
.sz--low b { color: var(--warn); }

/* ── Flags de la tarjeta ─────────────────────────────────────────────────── */
.flag {
  font-size: var(--fs-10); font-weight: var(--fw-bold); letter-spacing: .02em;
  padding: 4px 9px; border-radius: var(--r-pill); white-space: nowrap;
  backdrop-filter: blur(var(--blur-sm));
}
.flag--ok     { background: var(--ok-tint);    color: var(--ok); }
.flag--urgent { background: var(--warn-tint);  color: var(--urgent); }
.flag--curva  { background: var(--curva-tint); color: var(--curva); }
.flag--out    { background: rgba(255,255,255,.9); color: var(--ink-3); }

/* ── Chips chicos de la ficha ────────────────────────────────────────────── */
.chip--sm { padding: 5px 12px; font-size: var(--fs-12); min-height: 30px; }
.chip--curva { background: var(--curva-tint); color: var(--curva); border-color: color-mix(in srgb, var(--curva) 28%, transparent); }

/* El resaltador va sobre DOS palabras, no sobre el párrafo entero: si abarca
   varias líneas se convierte en un bloque de color y deja de ser un subrayado. */
.hero__h1 .marca { background-image: linear-gradient(transparent calc(100% - .2em), color-mix(in srgb, var(--accent) 78%, transparent) 0); }

/* En celular los dos CTAs del hero miden lo mismo: dos botones de anchos
   distintos apilados se leen como si uno fuera más importante por accidente. */
@media (max-width: 619.98px) {
  .hero__ctas { display: grid; gap: var(--sp-2); }
  .hero__ctas .btn { width: 100%; }
}

/* El gate tiene que poder scrollear: en un celular de 760px de alto el link de
   "ya tengo cuenta" quedaba abajo del borde y no había forma de llegar. */
.gate { overflow-y: auto; align-items: center; }
@media (max-width: 619.98px) { .gate { padding: var(--sp-4); } .gate__card { padding: var(--sp-6) var(--sp-5) var(--sp-4); } }

/* ── Sección de curvas ───────────────────────────────────────────────────── */
.curvas-sec { padding-block: var(--pad-sec); scroll-margin-top: calc(var(--hdr-h) + 16px); }
.sec__lead { font-size: var(--fs-16); color: var(--ink-2); line-height: var(--lh-relaxed); max-width: 68ch; margin-top: var(--sp-3); }
.curvas-grid { display: grid; gap: var(--sp-4); }
@media (min-width: 768px) { .curvas-grid { grid-template-columns: repeat(3, 1fr); } }
.curva-card { border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--sp-5); display: grid; gap: var(--sp-2); align-content: start; }
.curva-card h3 { font-size: var(--fs-18); }
.curva-card__n { font-size: var(--fs-12); color: var(--ink-3); }
.curva-card__t { display: flex; flex-wrap: wrap; gap: 5px; margin-block: var(--sp-2); }
.curva-card__e { font-size: var(--fs-13); font-weight: var(--fw-semibold); padding: 8px 12px; border-radius: var(--r-input); }
.curva-card__e.ok { background: var(--ok-tint); color: var(--ok); }
.curva-card__e.no { background: var(--warn-tint); color: var(--warn); }

/* ── Skeletons ───────────────────────────────────────────────────────────── */
.skel {
  background: linear-gradient(90deg, var(--cream) 25%, #fff 50%, var(--cream) 75%);
  background-size: 220% 100%;
  animation: shimmer 1.4s linear infinite;
  border-radius: var(--r-input);
}
@keyframes shimmer { from { background-position: 180% 0; } to { background-position: -180% 0; } }
.skel--media { aspect-ratio: 4 / 5; border-radius: var(--r-card); }
.skel--linea { height: 12px; margin-top: 8px; }
@media (prefers-reduced-motion: reduce) { .skel { animation: none; } }

/* Los links del nav no se parten: "MI CUENTA" en dos líneas se lee como dos
   ítems distintos. Se nota sobre todo con el modo TV puesto. */
.nav a { white-space: nowrap; }

/* ═══════════════ LISTA DE PRECIOS IMPRIMIBLE ═══════════════ */
/* Vive oculta hasta que se pide imprimir: entonces se esconde el portal entero
   y queda sola en la hoja. */
#listaPrint { display: none; }
body.imprimiendo > *:not(#listaPrint) { display: none !important; }
body.imprimiendo #listaPrint { display: block; }
body.imprimiendo { padding: 0; }

.lp { font-family: var(--ff-text); color: #000; padding: 14px; }
.lp-h { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; border-bottom: 2px solid #000; padding-bottom: 10px; margin-bottom: 12px; }
.lp-h h1 { font-family: var(--ff-display); font-size: 20px; font-weight: 900; margin: 8px 0 2px; letter-spacing: -.02em; }
.lp-h p { font-size: 11px; color: #444; }
.lp-f { text-align: right; font-size: 11px; display: grid; gap: 2px; }
.lp-f b { font-size: 14px; }
.lp-t2 { width: 100%; border-collapse: collapse; font-size: 10px; }
.lp-t2 th { text-align: left; border-bottom: 1px solid #000; padding: 5px 4px; font-size: 9px; text-transform: uppercase; letter-spacing: .05em; }
.lp-t2 td { border-bottom: 1px solid #ddd; padding: 5px 4px; vertical-align: top; }
.lp-t2 tr { break-inside: avoid; }
.lp-m { font-weight: 700; text-transform: uppercase; font-size: 9px; white-space: nowrap; }
.lp-n { font-weight: 600; min-width: 130px; }
.lp-n small { font-weight: 400; color: #666; font-size: 8px; }
.lp-t { font-size: 9px; line-height: 1.7; max-width: 190px; }
.lp-t sup { font-size: 7px; color: #666; }
.lp-p { text-align: center; font-weight: 700; }
th.lp-\$, td.lp-\$ { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
td.lp-\$ { font-weight: 600; }
.lp-t2 td.lp-\$:last-child { font-weight: 800; }
.lp-pie { margin-top: 12px; padding-top: 8px; border-top: 1px solid #000; font-size: 9px; color: #444; display: grid; gap: 4px; }

@media print {
  @page { size: A4 landscape; margin: 10mm; }
  #listaPrint { display: block; }
  body > *:not(#listaPrint) { display: none !important; }
  .lp-h { position: running(head); }
}

/* ── Correcciones de accesibilidad (auditoría del 27/08/2026) ────────────── */

/* El buscador tenía outline:0 y ganaba sobre :focus-visible: quien navega con
   teclado no veía dónde estaba parado. */
.search input:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 2px; }

/* El durazno como texto, en todos lados donde quedó. */
.eyebrow, .pdp__brand { color: var(--accent-text); }
.marquee__i b { color: var(--accent-text); }

/* ── El swap de foto de la tarjeta ───────────────────────────────────────── */
/* Las dos fotos estaban en position:absolute con opacity 1: la segunda pintaba
   encima y la principal —la que eligió quien cargó el producto— no se veía
   NUNCA. Medido: 22 de 24 tarjetas mostraban la foto equivocada. */
.card__img--2 { opacity: 0; transition: opacity var(--t-2) var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .card__frame:hover .card__img--2 { opacity: 1; }
}
/* Sin mouse no hay hover posible: la segunda foto ni se descarga. */
@media (hover: none) { .card__img--2 { display: none; } }

/* ── Variantes del toast ─────────────────────────────────────────────────── */
/* Estaban en el JS y no en el CSS: el toast salía sin color. */
.toast--ok   { background: var(--ok);      color: #fff; }
.toast--warn { background: var(--warn);    color: #fff; }
.toast--info { background: var(--primary); color: #fff; }

/* ── Botón de filtros (celular y tablet) ─────────────────────────────────── */
.filtrosbtn { display: none; gap: 7px; }
@media (max-width: 1023.98px) { .filtrosbtn { display: inline-flex; } }
.filtrosbtn__n {
  min-width: 20px; height: 20px; padding: 0 6px;
  background: var(--primary); color: #fff; border-radius: var(--r-pill);
  font-size: var(--fs-11); font-weight: var(--fw-bold);
  display: grid; place-items: center;
}

/* ── Header en pantallas muy angostas (iPhone SE, 320px) ─────────────────── */
/* A 320 el header se partía en cuatro filas y se comía el 34 % de la pantalla:
   la marca tomaba flex:1 y empujaba las acciones a una fila propia. */
@media (max-width: 389.98px) {
  .hdr__row { gap: 6px; }
  .brand { flex: 1 1 auto; justify-content: flex-start; min-width: 0; }
  .brand__logo { height: 24px; }
  .brand__tag { display: none; }   /* el modo ya lo dice la barra de abajo */
  .hdr__acts { gap: 0; }
  .topbar__row { font-size: 9px; letter-spacing: .04em; }
}

/* ── Celular acostado: 390px de alto para TODO ───────────────────────────── */
/* Con la topbar, el header, la barra de moneda, los chips de marca, la barra de
   escalón y la nav de abajo, el cromo se comía 330 de los 390px y no quedaba
   pantalla para una zapatilla. Se apaga lo que se puede consultar de otra forma:
   la moneda está en el menú y las marcas en el filtro. */
@media (max-width: 1023.98px) and (max-height: 520px) {
  .topbar, .mbar, .catbar { display: none; }
  .hdr__row { padding-block: 4px; }
  .brand__logo { height: 22px; }
  .bottomnav { height: calc(46px + var(--safe-b)); }
  .bottomnav svg { width: 18px; height: 18px; }
  .bottomnav__lbl, .bottomnav a span:last-child { font-size: 9px; }
  :root { --bottomnav-h: 46px; --tierbar-h: 54px; }
  .tierbar__in { padding-block: 6px; min-height: 54px; }
  .hero__in { padding-block: var(--sp-6); }
}

/* ── Las acciones del header ─────────────────────────────────────────────── */
/* No tenían NINGUNA regla de layout: sin display:flex los hijos se apilaban uno
   abajo del otro (se veía en celular acostado, con la lupa arriba del carrito). */
.hdr__acts {
  display: flex; align-items: center; gap: 4px;
  margin-left: auto; flex: 0 0 auto;
}

/* ── El drawer tiene que caber SIEMPRE ───────────────────────────────────── */
/* El panel no tenía overflow ni sus hijos flex-shrink: cuando cabecera + lista +
   pie no entraban, el sobrante se cortaba y no había forma de llegar. Medido en
   844×390: el pie con "CONFIRMAR PEDIDO" terminaba 43px abajo del viewport y la
   lista del pedido quedaba en una franja de 32px. */
.drawer__panel { overflow: hidden; }
.drawer__head, .drawer__foot { flex: 0 0 auto; }
.drawer__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
@media (max-height: 520px) {
  .drawer__foot { max-height: 62dvh; overflow-y: auto; }
  .drawer__head { padding-block: 10px; }
}

/* Los blancos táctiles que quedaban abajo de 44px. */
.chip { min-height: var(--tap); }
.foot li a, .foot li span, .foot li button { min-height: var(--tap); }
.card__name a { display: block; padding-block: 6px; }

/* El botón de la lista entra en la misma fila que el resto de la barra: en
   1400px "Bajar la lista" la hacía envolver y quedaba colgado solo. */
.btnlista { padding: 5px 12px; font-size: var(--fs-12); min-height: 32px; gap: 5px; }
.ratebar__in { row-gap: 4px; }
/* En celular el botón queda solo con el ícono: la barra ya lleva el de filtros. */
@media (max-width: 479.98px) { .btnlista { font-size: 0; padding: 8px 10px; } }

/* ── El panel del hero, primero en celular ───────────────────────────────── */
/* Medido a 390x844: el panel "Tu precio hoy" arrancaba en y=850, o sea nunca se
   veía. La primera pantalla del teléfono era titular + párrafo + dos botones:
   cero mecanismo. Ahora el número va arriba, que es lo que se viene a ver. */
@media (max-width: 1023.98px) {
  .hero__in { display: flex; flex-direction: column; }
  .hero__txt { display: contents; }
  .eyebrow-pill { order: 1; align-self: flex-start; }
  .hero__h1 { order: 2; }
  .hero__panel { order: 3; margin-block: var(--sp-4); }
  .hero__lead { order: 4; }
  .hero__ctas { order: 5; }
  .hero__trust { order: 6; }
}

/* ── Una sola barra en celular (antes eran dos) ──────────────────────────── */
/* Medido a 390×844: el cromo fijo se comía 327 de 844 px (39 %), y 396 con la
   barra de escalón (47 %). Dos de esas filas mostraban cosas que se miran una
   vez por sesión: la cotización y el nivel de cuenta. Ahora van juntas, y la
   cotización pasó al panel de ajustes que ya existía. */
.mobar {
  display: flex; align-items: center; gap: 8px;
  padding: 7px max(var(--pad), var(--safe-l)) 7px 0;
  padding-left: max(var(--pad), var(--safe-l));
  border-bottom: 1px solid var(--line); background: var(--surface-2);
  min-height: 46px;
}
@media (min-width: 1024px) { .mobar { display: none; } }
.mobar .catbar { border-bottom: 0; padding: 0; flex: 1; min-width: 0; }
.mobar .mbar__chip { flex: 0 0 auto; height: 34px; padding: 0 12px; }
.sheet__fx { font-size: var(--fs-12); color: var(--ink-3); text-align: center; margin-bottom: var(--sp-4); }

/* La barra de anuncio se recoge al scrollear. En celular son 32 de los 844px de
   alto, y el mensaje ya se leyó. Vuelve al subir. */
.topbar {
  overflow: hidden;
  max-height: 60px;
  transition: max-height var(--t-3) var(--ease), opacity var(--t-2) var(--ease);
}
@media (max-width: 1023.98px) {
  body.scrolleado .topbar { max-height: 0; opacity: 0; }
}
/* Y el header, un poco más compacto en celular: el buscador ya tiene su fila. */
@media (max-width: 1023.98px) {
  .hdr__row { padding-block: 6px; row-gap: 6px; }
  .search input { height: 42px; }
}

/* ┌───────── src/css/08-ficha.css ─────────┐ */
/* ═══════════════════════════════════════════════════════════════════════════
   8 · FICHA, PEDIDO Y FORMULARIOS
   ───────────────────────────────────────────────────────────────────────────
   Lo que el chasis de la spec deja planteado y todavía no tenía estilo.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Ficha ───────────────────────────────────────────────────────────────── */
.pdp { padding-block: var(--sp-6) var(--pad-sec); }

.crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; font-size: var(--fs-13); color: var(--ink-3); margin-bottom: var(--sp-5); }
.crumb a { color: var(--ink-3); }
.crumb a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.crumb b { color: var(--ink); font-weight: var(--fw-semibold); }

/* La foto vive DENTRO de su marco: sin alto propio se desbordaba encima del
   bloque de compra y tapaba la ficha entera. */
.pdp__media { position: sticky; top: calc(var(--hdr-h) + var(--sp-5)); }
@media (max-width: 1023.98px) { .pdp__media { position: static; } }
.pdp__img {
  /* height:auto es obligatorio: con width y height en el HTML, aspect-ratio se
     ignora y la foto queda clavada en 750px de alto en cualquier pantalla. */
  width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: contain; padding: 5%;
  border: 1px solid var(--line); border-radius: var(--r-card);
  background: #fff; box-shadow: var(--sh-1);
}
.pdp__info { min-width: 0; }
.pdp__brand { font-size: var(--fs-12); font-weight: var(--fw-bold); letter-spacing: var(--tr-wide); text-transform: uppercase; color: var(--accent-text); }
.pdp__title { font-size: var(--fs-h1); margin: 6px 0 var(--sp-3); }
.pdp__chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: var(--sp-4); }
.pdp__precio { margin-bottom: var(--sp-4); }
.pdp__precio .price { font-size: var(--fs-price-pdp); font-weight: var(--fw-black); }

/* ── Panel ───────────────────────────────────────────────────────────────── */
.panel { border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--sp-5); background: #fff; }
.panel + .panel { margin-top: var(--sp-4); }
.panel--cream { background: var(--cream); border-color: transparent; }
.panel__t { font-size: var(--fs-h3); font-weight: var(--fw-bold); font-family: var(--ff-display); margin: 0 0 var(--sp-3); }

/* ── Notas ───────────────────────────────────────────────────────────────── */
.nota { font-size: var(--fs-13); color: var(--ink-3); line-height: var(--lh-relaxed); margin-top: var(--sp-3); }
.nota b { color: var(--ink-2); }
.nota--ok   { background: var(--ok-tint);   color: var(--ok);   padding: 9px 14px; border-radius: var(--r-input); font-weight: var(--fw-medium); }
.nota--warn { background: var(--warn-tint); color: var(--warn); padding: 9px 14px; border-radius: var(--r-input); font-weight: var(--fw-medium); }
.nota--ok b, .nota--warn b { color: inherit; }

/* ── Talles ──────────────────────────────────────────────────────────────── */
.sizegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: var(--sp-2); }
.sizecell {
  border: 1px solid var(--line); border-radius: var(--r-input);
  padding: 10px 8px; text-align: center; display: grid; gap: 5px; align-content: center;
  transition: border-color var(--t-1) var(--ease), background-color var(--t-1) var(--ease),
              box-shadow var(--t-1) var(--ease);
}
.sizecell--0 { opacity: .6; background: var(--cream); }
.sizecell--activo { border-color: var(--ink); background: var(--peach-soft); box-shadow: 0 0 0 1px var(--ink); }
.sizecell__t { font-family: var(--ff-display); font-size: var(--fs-20); font-weight: var(--fw-black); font-variant-numeric: tabular-nums; line-height: 1; }
.sizecell__s { font-size: var(--fs-11); color: var(--ink-3); }
.sizecell__s.poco { color: var(--warn); font-weight: var(--fw-bold); }
.sizecell__rep { font-size: var(--fs-11); color: var(--ink-3); text-decoration: underline; text-underline-offset: 2px; line-height: 1.3; }
.sizecell__rep:hover { color: var(--ink); }

.stepper { display: flex; align-items: center; justify-content: center; gap: 3px; }
.stepper button {
  width: 30px; height: 30px; flex: 0 0 auto;
  border: 1px solid var(--line); border-radius: var(--r-input);
  display: grid; place-items: center; font-size: 17px; font-weight: var(--fw-bold); line-height: 1;
  transition: border-color var(--t-1) var(--ease), background-color var(--t-1) var(--ease);
}
.stepper button:hover:not(:disabled) { border-color: var(--ink); background: var(--cream); }
.stepper button:disabled { opacity: .3; cursor: not-allowed; }
.stepper input {
  width: 44px; height: 30px; min-width: 0; text-align: center;
  border: 1px solid var(--line); border-radius: var(--r-input);
  font-size: var(--fs-14); font-weight: var(--fw-bold); outline: 0;
  -moz-appearance: textfield; font-variant-numeric: tabular-nums;
}
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stepper input:focus { border-color: var(--ink); }

/* ── Curvas ──────────────────────────────────────────────────────────────── */
.curvas { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--sp-2); }
.curva {
  border: 1px solid var(--line); border-radius: var(--r-input);
  padding: 12px 14px; text-align: left; display: grid; gap: 3px;
  transition: border-color var(--t-1) var(--ease), background-color var(--t-1) var(--ease);
}
.curva--ok { border-color: color-mix(in srgb, var(--curva) 34%, transparent); background: var(--curva-tint); }
.curva__n { font-family: var(--ff-display); font-weight: var(--fw-bold); font-size: var(--fs-14); }
.curva__d { font-size: var(--fs-12); color: var(--ink-3); }
.curva--ok .curva__d { color: var(--curva); font-weight: var(--fw-semibold); }

/* ── Tabla de escalones ──────────────────────────────────────────────────── */
.ptiers { width: 100%; border-collapse: collapse; font-size: var(--fs-14); }
.ptiers th { text-align: left; font-size: var(--fs-11); text-transform: uppercase; letter-spacing: var(--tr-foot); color: var(--ink-3); padding: 0 0 var(--sp-2); font-weight: var(--fw-bold); }
.ptiers td { padding: 10px 0; border-top: 1px solid var(--line-2); }
.ptiers td:last-child { text-align: right; font-family: var(--ff-display); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.ptiers tr.on td { background: linear-gradient(90deg, var(--peach-soft), transparent); font-weight: var(--fw-bold); }
.ptiers tr.futuro td { color: var(--ink-3); }
.ptiers .off { color: var(--ok); font-size: var(--fs-13); font-weight: var(--fw-bold); }

/* ── Barra de compra (celular) ───────────────────────────────────────────── */
.buybar__t { display: flex; flex-direction: column; line-height: 1.2; flex: 1; }
.buybar__t b { font-family: var(--ff-display); font-size: var(--fs-16); font-weight: var(--fw-black); }
.buybar__t span { font-size: var(--fs-11); color: var(--ink-3); }

/* ── Líneas del pedido ───────────────────────────────────────────────────── */
.linea { display: flex; gap: var(--sp-3); padding: var(--sp-3) 0; border-bottom: 1px solid var(--line-2); }
.linea:last-child { border-bottom: 0; }
.linea__img { width: 60px; height: 60px; border-radius: var(--r-input); object-fit: contain; background: var(--cream); flex: 0 0 auto; padding: 4px; }
.linea__b { flex: 1; min-width: 0; display: grid; gap: 3px; align-content: start; }
.linea__n { font-size: var(--fs-14); font-weight: var(--fw-semibold); line-height: var(--lh-snug); }
.linea__m { font-size: var(--fs-12); color: var(--ink-3); }
.linea__m b { color: var(--ink-2); }
.linea__p { text-align: right; font-family: var(--ff-display); font-weight: var(--fw-bold); font-size: var(--fs-14); white-space: nowrap; font-variant-numeric: tabular-nums; }
.linea__x { color: var(--ink-3); font-size: var(--fs-12); text-decoration: underline; text-underline-offset: 2px; justify-self: start; min-height: 28px; display: inline-flex; align-items: center; }
.linea__x:hover { color: var(--no); }

/* ── Formularios ─────────────────────────────────────────────────────────── */
.campo { display: grid; gap: 5px; margin-bottom: var(--sp-3); }
.campo label { font-size: var(--fs-13); font-weight: var(--fw-semibold); color: var(--ink-2); }
.campo input, .campo select, .campo textarea {
  height: var(--tap); padding: 0 var(--sp-3);
  border: 1px solid var(--line); border-radius: var(--r-input);
  background: #fff; font-size: var(--fs-14); outline: 0; width: 100%;
  transition: border-color var(--t-1) var(--ease), box-shadow var(--t-1) var(--ease);
}
.campo textarea { height: auto; padding: var(--sp-3); min-height: 92px; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  border-color: var(--ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink) 9%, transparent);
}
.campo--err input, .campo--err select { border-color: var(--no); background: var(--no-tint); }
.campo__err { font-size: var(--fs-11); color: var(--no); font-weight: var(--fw-semibold); }
.campo--2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
@media (max-width: 479.98px) { .campo--2 { grid-template-columns: 1fr; } }

.opciones { display: grid; gap: var(--sp-2); }
.opcion {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  border: 1px solid var(--line); border-radius: var(--r-input);
  padding: 12px 14px; cursor: pointer; min-height: var(--tap);
  transition: border-color var(--t-1) var(--ease), background-color var(--t-1) var(--ease);
}
.opcion:has(input:checked) { border-color: var(--ink); background: var(--cream); }
.opcion input { accent-color: var(--primary); margin-top: 3px; flex: 0 0 auto; }
.opcion span { display: grid; gap: 2px; flex: 1; }
.opcion b { font-size: var(--fs-14); font-weight: var(--fw-semibold); }
.opcion small { font-size: var(--fs-12); color: var(--ink-3); }
.opcion__tag {
  flex: 0 0 auto; align-self: center;
  font-size: var(--fs-10); font-weight: var(--fw-bold); letter-spacing: var(--tr-wide);
  text-transform: uppercase; background: var(--ok-tint); color: var(--ok);
  padding: 4px 9px; border-radius: var(--r-pill);
}

/* ── Totales ─────────────────────────────────────────────────────────────── */
.tot { display: flex; justify-content: space-between; gap: var(--sp-4); font-size: var(--fs-14); padding: 4px 0; }
.tot--save { color: var(--ok); font-weight: var(--fw-semibold); }
.tot--big {
  font-family: var(--ff-display); font-size: var(--fs-24); font-weight: var(--fw-black);
  padding-top: var(--sp-3); margin-top: var(--sp-2); border-top: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
}

/* ── Botón grande ────────────────────────────────────────────────────────── */
.btn--lg { padding: 14px 26px; font-size: var(--fs-16); }
.hero__txt { min-width: 0; }

/* La celda tiene que contener al stepper: 30+44+30+gaps = 110px no entra en 88.
   Sin esto el botón "+" se monta sobre la celda de al lado. */
.sizegrid { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); }
@media (max-width: 419.98px) { .sizegrid { grid-template-columns: repeat(auto-fill, minmax(98px, 1fr)); } .stepper input { width: 36px; } }

/* ── Galería de la ficha ─────────────────────────────────────────────────── */
.pdp__thumbs { display: flex; gap: var(--sp-2); margin-top: var(--sp-2); overflow-x: auto; -ms-overflow-style: none; scrollbar-width: none; }
.pdp__thumbs::-webkit-scrollbar { display: none; }
.pdp__th {
  width: 68px; height: 84px; flex: 0 0 auto; padding: 4px;
  border: 1px solid var(--line); border-radius: var(--r-input); background: #fff;
  transition: box-shadow var(--t-1) var(--ease), border-color var(--t-1) var(--ease);
}
.pdp__th img { width: 100%; height: 100%; object-fit: contain; }
.pdp__th.is-on { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.pdp__desc { font-size: var(--fs-14); color: var(--ink-2); line-height: var(--lh-relaxed); }
.card__sku { font-weight: var(--fw-medium); color: var(--ink-3); letter-spacing: 0; text-transform: none; }

/* Una curva que hoy entra a menos del 75 % se muestra apagada: sirve para que
   el comerciante vea que existe, no para hacerle perder el tiempo. */
.curva--flaca { opacity: .62; }
.curva--flaca .curva__d { color: var(--warn); }

/* ── P0 · La buybar tapaba ENTERA a la barra de escalón ──────────────────── */
/* Las dos son fixed, con el mismo z-index y el mismo bottom: ganaba la que va
   después en el DOM. Resultado: en toda ficha de celular la pieza estrella del
   portal —el escalón que baja el precio— era invisible y su botón no se podía
   tocar. En vez de apilar tres barras en un celular, se fusionan: la buybar
   muestra las dos cosas. */
@media (max-width: 1023.98px) {
  body.has-buybar .tierbar { display: none; }
  body.has-buybar.has-tierbar { padding-bottom: calc(var(--bottomnav-h) + 84px + var(--safe-b)); }
}
.buybar__esc {
  display: flex; align-items: baseline; gap: 6px;
  font-size: var(--fs-11); color: var(--ok); font-weight: var(--fw-bold);
}
.buybar__esc b { font-family: var(--ff-display); font-size: var(--fs-13); }

/* ── Áreas táctiles reales ───────────────────────────────────────────────── */
/* El bloque táctil de 06-responsive usa :where(), que tiene especificidad 0 a
   propósito — y por eso pierde contra cualquier clase. Medido a 390px: los − y +
   de cada talle median 30px de ancho, y son el control que más se usa en todo el
   portal (cargar pares, con una caja en la otra mano). */
@media (max-width: 1023.98px), (pointer: coarse) {
  .stepper button { width: 44px; height: 44px; }
  .stepper input  { width: 48px; height: 44px; }
  /* 44 + 48 + 44 + gaps = 142: la celda tiene que crecer o el + se monta sobre
     la celda de al lado. */
  .sizegrid { grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); }
  .crumb a { min-height: var(--tap); display: inline-flex; align-items: center; }
}

/* ── Cantidades dentro del pedido ────────────────────────────────────────── */
.linea__talles {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 6px; padding: 0 0 var(--sp-4) 72px;
  border-bottom: 1px solid var(--line-2); margin-bottom: var(--sp-2);
}
.linea__t { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.linea__t > span { font-size: var(--fs-12); color: var(--ink-3); white-space: nowrap; }
/* Con los steppers táctiles de 44px, "Talle 35" + 44+48+44 = ~200px: dos
   columnas no entran en un celular y el "+" quedaba cortado. */
@media (max-width: 559.98px) { .linea__talles { padding-left: 0; grid-template-columns: 1fr; } }