/* ═══════════════════════════════════════════════════════════════════════════
   shop.css — sistema de diseño de Big Asere Shop · R2 (dirección de arte)
   CSS EXTERNO, sin handlers inline (convención del proyecto, CLAUDE.md).

   ── QUE CAMBIA EN R2 Y POR QUE ──────────────────────────────────────────
   R1 era correcto y demasiado prudente: casi todo era una tarjeta blanca
   sobre fondo claro, y a escritorio el contenido de móvil quedaba estirado
   en un lienzo ancho. Lo premium no es una tarjeta bonita repetida quince
   veces — es COMPOSICIÓN: bandas que alternan, tipografía con jerarquía real,
   y una ficha de producto que aguanta tanto una foto profesional como el
   marcador que hay hoy.

   R2 introduce tres cosas que R1 no tenía:
     1. un SISTEMA DE BANDAS (clara / templada / tinta) para dar ritmo
        vertical en vez de apilar tarjetas;
     2. una ESCALA TIPOGRÁFICA con saltos de verdad — R1 tenía cinco tamaños
        casi iguales entre 12 y 16px, que es lo que hace que un diseño se lea
        «de plantilla»;
     3. COMPOSICIONES DE ESCRITORIO propias: ficha de producto a dos columnas
        con panel de compra pegajoso, carrito y checkout con su resumen al
        lado, en vez de todo en una columna centrada.

   ── LA FIRMA R2 SE RETIRA (2026-09-25) ──────────────────────────────────
   Decision de Abraham (4): «retirar entero el estilo propio de Shop». Se van
   Geist Mono, el RAIL DE TICKET, las bandas templada y oscura, el halo del
   heroe, el sufijo del logotipo y el favicon propio. Shop se pinta con el
   sistema aprobado (ui-kit/tokens.css y kit.css @91e44d21, SISTEMA-DISENO
   aprobado el 2026-09-20). Lo que queda de R2 es la COMPOSICION: ficha a dos
   columnas, carrito y checkout con resumen al lado.

   Ningún nombre de clase ni de id cambia: el JS emite estas clases y una
   renombrada silenciosa rompería la interfaz sin que ninguna prueba lo viera.

   ── HONESTIDAD VISUAL ───────────────────────────────────────────────────
   No hay estrellas, ni «best seller», ni promesas de envío, ni contadores de
   clientes. Nada que el contrato real del servidor no dé. Una interfaz cara
   que miente es solo una mentira cara.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── PASE DE DISEÑO (diseno/shop-pase-valores, 2026-09-25) ──────────────────
   Ronda 1: solo los valores aprobados en SISTEMA-DISENO.md / ui-kit/tokens.css
   (produccion @91e44d21) que ademas coincidian con el sistema del diseñador
   de Services (autonomy/services-r1 @45be819b). Ronda 2, con las decisiones
   de Abraham del 2026-09-25 —(1) valores del sistema aprobado, (2) neutros
   del kit, (3) logotipo del kit, (4) fuera el estilo propio de Shop—: entran
   tambien la sombra de tarjeta, la cabecera 56/66, los cortes 640/1024 y el
   boton de 44, y donde el aprobado y el diseñador discrepan MANDA EL
   APROBADO (kit.css y SISTEMA-DISENO). Cada valor lleva su fuente al lado.

   LOS DOS UNICOS CORTES (tokens.css:278-293): @media (max-width:640px) es
   el movil y @media (min-width:1024px) el escritorio ancho; lo que no lleva
   @media es lo intermedio. Es el patron del kit (kit.css:350, :676).
   ─────────────────────────────────────────────────────────────────────── */

/* ── 1. TOKENS ─────────────────────────────────────────────────────────── */
:root {
  /* COPIAS EXACTAS con prefijo de ui-kit/tokens.css (decision de Abraham,
     2026-09-30, CLAUDE.md «Como se aplica»: «se aceptan copias exactas con
     prefijo de ui-kit/tokens.css (--shop-*, --svc-*), y el guard comprueba
     que lo sean»). El guard reconoce la copia por el NOMBRE: --shop-<n>
     copia a --<n> con el MISMO valor. Aqui solo las que Shop ya tenia con
     ese mismo valor bajo otro nombre; los nombres de Shop de siempre
     apuntan a ellas (mismo valor: cero cambio visual). Lo que no es copia
     exacta de un token no se toca (decision 9, pendiente de Abraham). */
  --shop-surface-sunken: #F7F7F8;                 /* = --surface-sunken */
  --shop-text:           #0E0E0E;                 /* = --text */
  --shop-text-muted:     #6B7280;                 /* = --text-muted */
  --shop-border:         #E4E4E7;                 /* = --border */
  --shop-border-field:   #848E9F;                 /* = --border-field */
  --shop-on-dark-line:   rgba(255, 255, 255, .14); /* = --on-dark-line */
  --shop-on-dark-muted:  rgba(255, 255, 255, .62); /* = --on-dark-muted */
  --shop-amber:          #F4A24C;                 /* = --amber */
  --shop-skel-shine:     rgba(255, 255, 255, .72); /* = --skel-shine */
  --shop-fs-label:       12px;                    /* = --fs-label */
  --shop-fs-secondary:   13px;                    /* = --fs-secondary */
  --shop-fs-body:        14px;                    /* = --fs-body */
  --shop-fs-input:       16px;                    /* = --fs-input */
  --shop-fs-card-title:  20px;                    /* = --fs-card-title */
  --shop-fs-screen:      28px;                    /* = --fs-screen */
  /* Y las de los tokens que el kit gano con los valores de hoy (PR del kit,
     #139; decision de Abraham del 2026-09-30: «tokens ampliados en
     ui-kit/tokens.css con los valores de hoy»). Cada una vale EXACTAMENTE lo
     que Shop ya pintaba en ese sitio: cero cambio visual. Un nombre de Shop
     que chocaba POR NOMBRE con el kit (--shop-ok, -ok-soft, -warn,
     -warn-soft, --shop-font-body, --shop-fw-body) se RENOMBRO en todos sus
     usos a la copia que de verdad es (el guard de tokens da un alias a otra
     cosa como «copia distinta»). La tabla de correspondencia (valor de hoy
     -> token -> copia) va en docs/autonomia/PR-KIT-CUERPO.md de esa PR. */
  --shop-text-on-dark: #FFFFFF;                   /* = --text-on-dark */
  --shop-on-dark-field: rgba(255, 255, 255, .32); /* = --on-dark-field */
  --shop-surface-glass: rgba(255, 255, 255, .96); /* = --surface-glass */
  --shop-inset-hairline: inset 0 0 0 1px;         /* = --inset-hairline */
  --shop-focus-halo: 0 0 0 3px rgba(0,0,0,.05);   /* = --focus-halo */
  --shop-st-ok-fg: #1A7C55;                       /* = --st-ok-fg (antes --shop-ok) */
  --shop-st-warn-fg: #A8620A;                     /* = --st-warn-fg (antes --shop-warn) */
  --shop-st-warn-bg: rgba(168,98,10,.10);         /* = --st-warn-bg (antes --shop-warn-soft) */
  --shop-amber-tint: rgba(244,162,76,.14);        /* = --amber-tint */
  --shop-amber-ink: #8A5209;                      /* = --amber-ink */
  --shop-font-head-tienda: 'Bricolage Grotesque', 'Geist Sans', system-ui, sans-serif; /* = --font-head-tienda */
  --shop-font-body-tienda: 'Geist Sans', 'Inter', system-ui, -apple-system, sans-serif; /* = --font-body-tienda (antes --shop-font-body) */
  --shop-t-nano: 10px;                            /* = --t-nano */
  --shop-t-logo: 1.25rem;                         /* = --t-logo */
  --shop-t-lede: 1.0625rem;                       /* = --t-lede */
  --shop-t-total: 1.5rem;                         /* = --t-total */
  --shop-t-step: 1.125rem;                        /* = --t-step */
  --shop-t-qty: 1.125rem;                         /* = --t-qty */
  --shop-t-edit-wide: 2.125rem;                   /* = --t-edit-wide */
  --shop-t-display-mobile: 2.75rem;               /* = --t-display-mobile */
  --shop-t-page-mobile: 2rem;                     /* = --t-page-mobile */
  --shop-t-edit-mobile: 1.75rem;                  /* = --t-edit-mobile */
  --shop-t-section-mobile: 1.25rem;               /* = --t-section-mobile */
  --shop-fs-screen-fluid: clamp(1.75rem, 1.2rem + 2vw, 2.5rem); /* = --fs-screen-fluid */
  --shop-header-h-mobile: 56px;                   /* = --header-h-mobile */
  --shop-header-h: 66px;                          /* = --header-h */
  --shop-peso-cuerpo: 400;                        /* = --peso-cuerpo (antes --shop-fw-body) */

  /* Superficies. La pagina es blanca y no hay bandas (se retiran, decision
     4): solo dos superficies claras, la de siempre y la hundida del kit. */
  --shop-bg:        var(--shop-surface);   /* lienzo: blanco, siempre. Antes #FAFAF9.
                                  tokens.css:91 + SISTEMA-DISENO 1.1 */
  --shop-surface:   #FFFFFF;   /* comercio: fichas, formularios, resúmenes.
                                  tokens.css:91 */
  /* NEUTROS DEL KIT (decision 2). El kit tiene UNA superficie hundida; las
     tres de Shop caen en ella. */
  --shop-warm:      var(--shop-surface-sunken);   /* antes #F1F0EC (banda templada, marco de foto,
                                  avisos tranquilos). tokens.css:92
                                  --surface-sunken; SISTEMA-DISENO 11 regla 3:
                                  la foto se encaja sobre --surface-sunken */
  --shop-surface-2: var(--shop-surface-sunken);   /* antes #F4F4F2 (hover, chips, cabecera de
                                  tabla). tokens.css:92 */
  --shop-surface-3: var(--shop-surface-sunken);   /* antes #EAEAE6 (esqueleto, boton
                                  deshabilitado, punto de linea de estado).
                                  tokens.css:92 */

  --shop-ink:       var(--shop-text);   /* tinta de marca. Antes #101012 (R1 usaba
                                  #1A1A1A). tokens.css:78 + SISTEMA-DISENO 4
                                  y C-5. Pinta tambien el heroe y el pie, las
                                  dos piezas oscuras (SISTEMA-DISENO 1.1). */
  /* El kit tiene DOS tintas de texto: --text y --text-muted. Los dos grises
     de Shop caen en el secundario: tokens.css:79, 128 usos; 4.83:1 sobre
     blanco y 4.52:1 sobre --surface-sunken (tokens.css:74-77). */
  --shop-ink-2:     var(--shop-text-muted);   /* antes #52525A. tokens.css:79 --text-muted */
  --shop-ink-3:     var(--shop-text-muted);   /* meta, antes #5F5F66. tokens.css:79 */
  /* Bordes del kit: el que SEPARA y el que DELIMITA un control (tokens.css:
     95-126, «el campo tiene que decir donde se escribe, la tarjeta solo
     separa»). */
  --shop-rule:      var(--shop-border);   /* antes rgba(0,0,0,.08). tokens.css:93 --border */
  --shop-rule-firm: var(--shop-border-field);   /* antes rgba(0,0,0,.15). tokens.css:126
                                  --border-field: 3.31:1 sobre blanco. Solo
                                  campos y cantidad; los botones, chips y
                                  separadores pasan a --shop-rule (kit.css
                                  .ba-btn--secondary y .ba-chip) */
  /* Sobre pieza oscura (heroe y pie). tokens.css:259-262. */
  --shop-rule-dark: var(--shop-on-dark-line);  /* = --on-dark-line, tokens.css:262 */
  --shop-on-dark:   var(--shop-on-dark-muted);  /* antes .70. --on-dark-muted, tokens.css:261 */
  --shop-on-dark-2: var(--shop-on-dark-muted);  /* antes .48. El kit tiene un solo
                                               secundario sobre oscuro, tokens.css:261 */

  /* Marca: el par de Big Asere. Antes #D62F3D / #B8202F, que no son de marca.
     --shop-red      = rojo de marca. tokens.css:46 · diseñador tokens.json:12
     --shop-red-dark = rojo oscuro.   tokens.css:47 · diseñador tokens.json:17
     EL PAR VA INVERTIDO (decision de Abraham, tokens.css:50-66): blanco sobre
     #E23744 da 4.32:1, por debajo de AA. Por eso REPOSAN en --shop-red-dark
     (blanco 5.35:1) el boton primario y la insignia del carrito, y el texto
     rojo pequeño (enlace en hover, pestaña activa) va en --shop-red-dark
     (5.35:1 sobre blanco). --shop-red queda para el hover del primario, el
     anillo de foco y el subrayado de la nav, donde basta 3:1 (4.32:1). El
     diseñador llega al mismo sitio: tokens.json:18 («todo texto rojo sobre
     surface») y decisiones.md:56 («el rojo que trabaja es #C82F3B»). */
  --shop-red:       #E23744;
  --shop-red-dark:  #C82F3B;
  --shop-ember:     var(--shop-amber);
  --shop-ember-soft:var(--shop-amber-tint);

  /* ok y cuidado: --shop-st-ok-fg / --shop-st-ok-bg y --shop-st-warn-fg /
     --shop-st-warn-bg (copias del kit, arriba y en §1 COLORES DE ESTADO). */
  --shop-err:       #B3261E;
  --shop-err-soft:  rgba(179,38,30,.08);

  /* Dos familias, las del sistema (tokens.css:159-164). Geist Mono se retira
     (decision 4): sus 19 declaraciones pasan a --shop-font-body, y los
     precios a --shop-font-display como .ba-card-price (kit.css:954).
     Con la tabla del kit, el texto va en --shop-font-body-tienda y los
     titulares en --shop-font-head-tienda (copias de arriba, la misma pila). */
  --shop-font-display:var(--shop-font-head-tienda);

  /* ── ESCALA TIPOGRÁFICA ───────────────────────────────────────────────
     Los TAMAÑOS no cambian en este pase. Cambia DONDE saltan: estos son los
     de lo intermedio (antes desde 768px); el movil los baja en §24 con
     @media (max-width:640px). El tercer escalon (antes desde 1240px: 76/48/
     36) desaparece, porque el sistema tiene dos cortes y no tres.          */
  --shop-t-display: 4rem;     /* 64 — héroe (44 en movil) */
  --shop-t-page:    2.5rem;   /* 40 — título de página (32 en movil) */
  --shop-t-edit:    2rem;     /* 32 — titular editorial (28 en movil) */
  --shop-t-section: 1.375rem; /* 22 — título de sección (20 en movil) */
  --shop-t-card:    .9375rem; /* 15 — nombre de producto */
  --shop-t-price:   1.0625rem;/* 17 — precio en ficha */
  --shop-t-price-lg:2rem;     /* 32 — precio en la ficha de producto */
  --shop-t-body:    1rem;     /* 16 */
  --shop-t-label:   .8125rem; /* 13 */
  --shop-t-meta:    .75rem;   /* 12 */
  --shop-t-micro:   .6875rem; /* 11 — raíl y ojos */
  /* Los cuatro que bajan en movil, con nombre PROPIO de Shop: las copias del
     kit (--shop-t-display, -page, -edit y -section) no se redefinen nunca;
     en movil (§24) cambian ESTOS, a las copias -mobile. */
  --shop-titular:          var(--shop-t-display);
  --shop-titulo-pagina:    var(--shop-t-page);
  --shop-titulo-editorial: var(--shop-t-edit);
  --shop-titulo-seccion:   var(--shop-t-section);

  /* Ritmo de 4px. */
  --shop-s1:4px;   --shop-s2:8px;   --shop-s3:12px;  --shop-s4:16px;
  --shop-s5:20px;  --shop-s6:24px;  --shop-s8:32px;  --shop-s10:40px;
  --shop-s12:48px; --shop-s16:64px; --shop-s20:80px; --shop-s24:96px;
  --shop-s32:128px;

  /* Curvatura: la escala 8/12/16/999 de Big Asere. Antes 6/10/14/18.
     SISTEMA-DISENO 1.5 (:154-155) dice como cae cada valor viejo: «10px y
     6px caen a 8px, 14px cae a 12px». 18 no lo nombra: cae por PAPEL al
     paso de contenedor grande (16), que es donde Shop lo usa.
     Los nombres no cambian (el JS y las pruebas los leen): xs y sm valen
     lo mismo desde hoy.                                                    */
  --shop-r-xs: 8px;     /* antes 6.  tokens.css:143 · tokens.json:152 */
  --shop-r-sm: 8px;     /* antes 10. tokens.css:143 · tokens.json:152 */
  --shop-r-md: 12px;    /* antes 14. tokens.css:144 · tokens.json:153 (tarjeta) */
  --shop-r-lg: 16px;    /* antes 18. tokens.css:145 · tokens.json:154 */
  --shop-r-pill: 999px; /* sin cambio. tokens.css:146 · tokens.json:155 */

  /* Elevación: UNA sola sombra en todo el sistema (SISTEMA-DISENO 12,
     :525-526), la doble de tokens.css:152. Los tres escalones de Shop
     (antes 0 1px 2px .04 / 0 6px 24px .06 / 0 18px 48px .14) caen en ella:
     el kit la usa igual en tarjeta, toast, modal y cajon (kit.css:341,
     :510, :769, :827). */
  --shop-shadow-card: 0 2px 8px rgba(0,0,0,.08), 0 1px 3px rgba(0,0,0,.06);
  --shop-e1: var(--shop-shadow-card);
  --shop-e2: var(--shop-shadow-card);
  --shop-e3: var(--shop-shadow-card);
  /* El brillo rojo del primario se RETIRA (antes 0 6px 20px rgba(214,47,61,.26)).
     SISTEMA-DISENO 5 (cero destellos) y 12 (sombras sutiles, nunca duras) ·
     diseñador README.md:35 y :71-79 (el primario es relleno, sin sombra).
     El nombre se conserva para no tocar las reglas que lo leen. */
  --shop-glow: none;

  --shop-m-micro: 130ms;
  --shop-m-std:   210ms;
  --shop-m-large: 280ms;
  --shop-ease:     cubic-bezier(.4,0,.2,1);
  --shop-ease-out: cubic-bezier(.16,1,.3,1);

  /* Anchos: uno editorial (ancho) y uno de comercio (más contenido). */
  --shop-w-wide:  1440px;
  --shop-w-main:  1240px;
  --shop-w-read:  680px;
  /* Cabecera 56 en movil e intermedio, 66 en escritorio (§7). Antes 64/76.
     tokens.css:272-273 · kit.css:667-676 · SISTEMA-DISENO 6 (:330).
     Las copias del kit (--shop-header-h-mobile 56 y --shop-header-h 66)
     estan arriba; la altura que se usa, la que cambia a 1024, lleva nombre
     propio. */
  --shop-cabecera-h: var(--shop-header-h-mobile);
  --shop-tap: 44px;             /* tokens.css:274 --touch-min */

  /* ── PANELES (V1d · DISENO-PANEL-VENDEDOR-V1D.md @a21cd8da) ──────────────
     La superficie de TRABAJO del sistema (SISTEMA-DISENO §1.3, decidido por
     Abraham el 2026-09-20; D3): Inter en los paneles, el logotipo sigue en
     Bricolage. Escala de paneles 14/13/12 y los campos a 16, porque con menos
     el iPhone hace zoom. Cada valor lleva su fuente; los del operador son los
     de ANTES, con nombre (el operador solo hereda los textos). */
  --shop-font-panel: 'Inter', 'Inter Respaldo', system-ui, -apple-system, sans-serif; /* = --font-panel, con la letra de respaldo (los tres @font-face, tras :root) */
  --shop-p-body:    var(--shop-fs-body);      /* tokens.css:192 --fs-body (copia exacta) */
  --shop-p-second:  var(--shop-fs-secondary);      /* tokens.css:191 --fs-secondary (copia exacta) */
  --shop-p-label:   var(--shop-fs-label);      /* tokens.css:190 --fs-label (copia exacta) */
  --shop-p-title:   var(--shop-fs-card-title);      /* tokens.css:196 --fs-card-title (copia exacta) */
  --shop-p-screen:  var(--shop-fs-screen);      /* tokens.css:197 --fs-screen (copia exacta) */
  --shop-p-input:   var(--shop-fs-input);      /* tokens.css:193 --fs-input (copia exacta) */
  /* D11: el peso del cuerpo es --shop-peso-cuerpo (la copia del kit, arriba). */
  --shop-fw-strong: 600;       /* tokens.css:190-191 (etiqueta y secundario) */
  --shop-fw-title:  700;       /* tokens.css:196 */
  --shop-lh:        1.5;       /* el interlineado de .shop-note y .shop-lede de antes */
  --shop-lh-tight:  1.4;       /* el de .shop-pill y .shop-card-sub de antes */
  --shop-lh-h1:     1.1;       /* el de .shop-h1 de antes */
  --shop-lh-h2:     1.2;       /* el de .shop-h2 de antes */
  --shop-hair:      1px;       /* el filete de todo el sistema (tokens.css:93-126) */
  --shop-on-ink:    var(--shop-text-on-dark);   /* texto sobre tinta: el #fff de .shop-step-n */
  --shop-overlay:   rgba(14,14,14,.42); /* tokens.css:257 --overlay (= .shop-scrim) */
  --shop-focus-w:   2px;       /* el anillo de foco de .shop-scope :focus-visible */
  --shop-pnav-w:    220px;     /* kit.css .ba-sidebar (nav lateral de los paneles) */
  --shop-pbar-h:    72px;      /* barra de accion: boton de 44 + 12 arriba y abajo */
  --shop-p-thumb:   56px;      /* miniatura de la fila de producto */
  --shop-p-icon:    20px;      /* el icono de .shop-icon-btn */
  --shop-p-icon-stroke: 1.7;   /* el trazo de .shop-icon-btn */
  --shop-p-form-w:  560px;     /* formulario de una columna: medida de lectura */
  --shop-p-price-w: 160px;     /* campo de precio o cantidad en una fila */
  --shop-p-yesno-w: 88px;      /* cada boton del Si/No (D-C1): cabe «No» y «Sí» con aire */
  --shop-p-sk-short: 60%;      /* la linea corta del esqueleto (.shop-sk-line.w60) */
  --shop-m-flash:   1600ms;    /* la fila cambiada se marca un momento */
  --shop-i18n-tope: 6000ms;    /* sin parpadeo: el texto se enseña igual si el JavaScript no llega */
  /* EL ESQUELETO DESDE EL PRIMER PINTADO (V1d, liston: «cargando en cada
     pantalla», sin salto al llegar los datos). El brillo es el de .shop-sk
     (kit.css:454-467), con nombre para usarlo en la seccion V1d. */
  --shop-sk-brillo: linear-gradient(90deg, var(--shop-surface-3) 25%, var(--shop-skel-shine) 37%, var(--shop-surface-3) 63%);
  --shop-sk-tam:    400% 100%;
  --shop-sk-anim:   shop-sk 1.5s ease-in-out infinite;
  --shop-p-sk-mid:  40%;       /* linea media del esqueleto */
  --shop-p-sk-long: 85%;       /* linea larga del esqueleto */
  --shop-p-sk-pill: 88px;      /* la pastilla de estado del esqueleto */
  --shop-p-sk-btn:  160px;     /* el boton del esqueleto */
  /* EL PIE EMPIEZA BAJO LA PRIMERA PANTALLA: lo que llega crece sin mover
     nada que ya se vea (el pie era el unico que saltaba en Catalogo,
     Inventario y Envio: medido, 0,013-0,059). */
  --shop-p-main-min: calc(100vh - var(--shop-cabecera-h));
  --shop-z-pbar:    45;        /* bajo la cabecera (50) */
  --shop-z-scrim:   54;
  --shop-z-pnav:    55;
  /* Los valores del panel de ANTES, con nombre (operador y vendedor). */
  --shop-p-h1-size: var(--shop-fs-screen-fluid);
  --shop-p-h1-gap:  .35rem;
  --shop-p-cell-y:  .625rem;
  --shop-p-cell-x:  .875rem;
  --shop-p-pill-gap: .375rem;
  --shop-p-pill-y:  .1875rem;
  --shop-p-notice-y: .875rem;
  --shop-p-lede-w:  60ch;
  --shop-p-note-w:  70ch;
  --shop-p-kv-dt:   12rem;
  --shop-p-card-min: 220px;
  --shop-p-media-min: 120px;
  --shop-p-th-track: .04em;
  --shop-p-h-track: -.02em;
  /* COLORES DE ESTADO (D8: «no se deciden en V1d; tokens con los de hoy»).
     Son EXACTAMENTE los que pintaba .shop-pill, ahora con nombre; los del
     kit siguen en PROPUESTA. */
  --shop-st-ok-bg:    rgba(26,124,85,.10);   /* = --st-ok-bg (y el de antes --shop-ok-soft) */
  --shop-st-ok-line:  rgba(26,124,85,.22);
  --shop-st-bad-bg:   rgba(214,47,61,.10);
  --shop-st-bad-fg:   #B8202F;
  --shop-st-bad-line: rgba(214,47,61,.22);
  --shop-st-wait-fg:  #8A5A16;
  --shop-st-wait-line: rgba(244,162,76,.30);
  --shop-notice-bad-line: rgba(214,47,61,.28);
  --shop-notice-bad-bg:   rgba(214,47,61,.05);
  --shop-notice-ok-line:  rgba(26,124,85,.28);
  --shop-notice-ok-bg:    rgba(26,124,85,.05);
}

/* LA LETRA DE RESPALDO DE INTER ('Inter Respaldo', en --shop-font-panel):
   los tres @font-face de ui-kit/tokens.css, copiados TAL CUAL (quien copia
   --font-panel copia tambien sus caras, dice el kit). Arial del propio
   equipo con las medidas de Inter: mientras Inter llega el texto ya ocupa
   lo mismo, y al llegar no salta. local() no es una peticion: la CSP no
   cambia. Lo que no cubre (Safari sin ascent-/descent-override, equipos
   sin Arial ni sus clones) lo dice el kit, junto a las caras. */
@font-face {
  font-family: 'Inter Respaldo';
  src: local('Arial'), local('ArialMT'), local('Arimo'), local('Arimo Regular'), local('Liberation Sans');
  font-weight: 400;
  size-adjust: 106.51%;
  ascent-override: 90.96%;
  descent-override: 22.65%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Inter Respaldo';
  src: local('Arial Bold'), local('Arial-BoldMT'), local('Arimo Bold'), local('Liberation Sans Bold');
  font-weight: 600;
  size-adjust: 101.24%;
  ascent-override: 95.68%;
  descent-override: 23.82%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Inter Respaldo';
  src: local('Arial Bold'), local('Arial-BoldMT'), local('Arimo Bold'), local('Liberation Sans Bold');
  font-weight: 700;
  size-adjust: 102.30%;
  ascent-override: 94.70%;
  descent-override: 23.58%;
  line-gap-override: 0%;
}

/* ── 2. BASE ───────────────────────────────────────────────────────────── */
.shop-scope *, .shop-scope *::before, .shop-scope *::after { box-sizing:border-box; }

body.shop-body {
  margin:0;
  background:var(--shop-bg);
  color:var(--shop-ink);
  font-family:var(--shop-font-body-tienda);
  font-size:var(--shop-t-body);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

/* ── EL RESET VA EN `:where()`, Y ESO IMPORTA ────────────────────────────
   `.shop-scope p{margin:0}` es (0,1,1) y GANABA a cualquier clase suelta
   (0,1,0): el margen inferior del subtitulo del heroe salia 0 y la llamada
   principal quedaba pegada al parrafo. Lo mismo afectaba al ojo de seccion,
   a las dos lineas del pie y a la meta de pedidos — seis clases silenciadas
   por el propio reset.

   Envolver el reset en `:where()` lo deja en especificidad CERO, asi que
   cualquier clase lo gana sin necesidad de prefijos. Es la forma correcta de
   escribir un reset, y elimina la trampa entera en vez de parchear caso por
   caso. (Los prefijos `.shop-scope` que ya existen siguen siendo validos.) */
:where(.shop-scope) :where(h1,h2,h3,h4) {
  font-family:var(--shop-font-display);
  font-weight:700;
  line-height:1.1;
  letter-spacing:-.025em;
  margin:0;
  text-wrap:balance;          /* titulares que no dejan una palabra huérfana */
}
:where(.shop-scope) :where(h1){font-size:var(--shop-titulo-pagina)}
:where(.shop-scope) :where(h2){font-size:var(--shop-titulo-editorial)}
:where(.shop-scope) :where(h3){font-size:var(--shop-titulo-seccion)}
:where(.shop-scope) :where(p){margin:0}
:where(.shop-scope) :where(img){max-width:100%;display:block}
:where(.shop-scope) :where(a){color:inherit;text-decoration:none}

/* Los NÚMEROS son tabulares: un precio nunca baila de ancho entre una ficha
   y la siguiente. Antes en Geist Mono; ahora en la letra del sistema con
   cifras de ancho fijo, como .ba-num y .ba-stat-value (kit.css:602, :653).
   El precio, en la de titular, como .ba-card-price (kit.css:954). */
.shop-num,.shop-price,.shop-total,.shop-rail,.shop-qty-val,.shop-order-num {
  font-family:var(--shop-font-body-tienda);
  font-variant-numeric:tabular-nums;
  letter-spacing:-.015em;
}
.shop-price{font-family:var(--shop-font-display)}

.shop-container{
  width:100%;max-width:var(--shop-w-main);
  margin-inline:auto;padding-inline:var(--shop-s8);
}
.shop-container-wide{max-width:var(--shop-w-wide)}
.shop-container-read{max-width:var(--shop-w-read)}
/* Antes 20 / 32 desde 768 / 40 desde 1100. Cortes del sistema: */
@media (max-width:640px){ .shop-container{padding-inline:var(--shop-s5)} }
@media (min-width:1024px){ .shop-container{padding-inline:var(--shop-s10)} }

.shop-sr{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.shop-scope [hidden]{display:none !important}

.shop-scope :focus-visible{
  outline:2px solid var(--shop-red);outline-offset:2px;border-radius:var(--shop-r-xs);
}
/* Sobre tinta el rojo se pierde: el foco se dibuja en blanco. */
.shop-hero :focus-visible,.shop-footer :focus-visible{
  outline-color:var(--shop-on-ink);
}
/* El boton es pildora (§5): la regla de foco de arriba le pondria radio 8 y
   el boton cambiaria de forma al recibir el foco del teclado. */
.shop-scope .shop-btn:focus-visible{border-radius:var(--shop-r-pill)}

.shop-scope a.shop-skip{
  position:absolute;left:var(--shop-s4);top:-100px;z-index:200;
  background:var(--shop-ink);color:var(--shop-on-ink);padding:var(--shop-s3) var(--shop-s4);
  border-radius:var(--shop-r-sm);font-size:var(--shop-t-label);font-weight:600;
  transition:top var(--shop-m-micro) var(--shop-ease);
}
.shop-scope a.shop-skip:focus{top:var(--shop-s4)}

/* ── 3. SECCIONES ─────────────────────────────────────────────────────── */
/* LAS BANDAS SE RETIRAN (decision 4). La pagina es blanca y lo oscuro es una
   pieza, nunca una franja de fondo: SISTEMA-DISENO 1.1 (:18-26). El unico
   bloque oscuro por pantalla es el heroe (§8) —index y tienda llevan uno
   cada una— ademas del pie. Las clases se conservan (el marcado las usa) y
   quedan en blanco; .shop-band-dark no la usa ninguna pagina ni arranque. */
.shop-band{ padding-block:var(--shop-s12); }
.shop-band-tight{ padding-block:var(--shop-s8); }
.shop-band-warm,.shop-band-dark{ background:var(--shop-bg); }
@media (min-width:1024px){
  .shop-band{ padding-block:var(--shop-s20); }
  .shop-band-tight{ padding-block:var(--shop-s12); }
}

.shop-eyebrow{
  font-family:var(--shop-font-body-tienda);font-size:var(--shop-t-micro);font-weight:500;
  text-transform:uppercase;letter-spacing:.18em;color:var(--shop-ink-3);
  margin-bottom:var(--shop-s3);
}
.shop-section-head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:var(--shop-s5);margin-bottom:var(--shop-s6);
}
@media (min-width:1024px){ .shop-section-head{margin-bottom:var(--shop-s8)} }
.shop-section-link{
  display:inline-flex;align-items:center;gap:6px;min-height:var(--shop-tap);
  font-size:var(--shop-t-label);font-weight:600;color:var(--shop-ink-2);
  white-space:nowrap;padding-inline:var(--shop-s2);margin-inline:calc(var(--shop-s2)*-1);
  transition:color var(--shop-m-micro) var(--shop-ease);
}
/* Texto rojo pequeño: el oscuro (5.35:1). tokens.css:58-59 · tokens.json:18 */
.shop-section-link:hover{color:var(--shop-red-dark)}
.shop-section-link::after{content:"→";font-family:var(--shop-font-body-tienda)}

/* ── 4. LINEA DE DATOS (antes el RAIL DE TICKET) ──────────────────────── */
/* El rail se retira como FORMA (decision 4): sin mayusculas espaciadas en
   mono y sin los filetes que partian la linea como un ticket. Los DATOS se
   quedan —recuento, existencias—, dichos como metadato del kit: 12px,
   secundario (kit.css .ba-card-sub :527, .ba-hint :196). El punto de estado
   se conserva: es el .ba-badge-dot del kit (kit.css:569), con la palabra al
   lado. Los colores de estado no se tocan. */
.shop-rail{
  display:flex;align-items:center;gap:var(--shop-s2);
  font-size:var(--shop-t-meta);
  color:var(--shop-ink-3);min-width:0;
}
.shop-rail > span:not(.shop-rail-sep){
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;
}
.shop-rail-sep{display:none}
.shop-rail-b{color:var(--shop-ink-2);font-weight:500}
.shop-rail-dot{width:6px;height:6px;border-radius:50%;background:var(--shop-st-ok-fg);flex:none}
.shop-rail-dot[data-state="low"]{background:var(--shop-ember)}
.shop-rail-dot[data-state="out"]{background:var(--shop-ink-3)}
.shop-rail-dot[data-state="unknown"]{background:transparent;box-shadow:var(--shop-inset-hairline) var(--shop-ink-3)}
/* Sobre el heroe (pieza oscura). */
.shop-hero .shop-eyebrow{color:var(--shop-ember)}
.shop-hero .shop-hint{color:var(--shop-on-dark-2)}

/* ── 5. BOTONES ────────────────────────────────────────────────────────── */
/* Cuatro variantes y ni una más: primaria, secundaria, discreta, icono.
   PILDORA (antes radio 10): tokens.css:146 + SISTEMA-DISENO 2 fila 4 ·
   diseñador tokens.json:155 y README.md:35. Alto minimo 44 a cualquier
   ancho: tokens.css:274 + SISTEMA-DISENO 6 · README.md:35 y :49. Los 40px
   de escritorio del diseñador (README.md:35) NO entran: el aprobado exige
   44 siempre (kit.css:36-37, .ba-btn min-height: var(--touch-min)). */
.shop-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--shop-s2);
  min-height:var(--shop-tap);padding:var(--shop-s3) var(--shop-s6);
  border:1px solid transparent;border-radius:var(--shop-r-pill);
  font-family:var(--shop-font-body-tienda);font-size:var(--shop-t-label);font-weight:600;
  letter-spacing:.01em;line-height:1;cursor:pointer;background:none;color:var(--shop-ink);
  transition:background var(--shop-m-micro) var(--shop-ease),
             border-color var(--shop-m-micro) var(--shop-ease),
             color var(--shop-m-micro) var(--shop-ease),
             transform var(--shop-m-micro) var(--shop-ease),
             box-shadow var(--shop-m-std) var(--shop-ease);
}
.shop-btn:disabled{cursor:not-allowed}
.shop-btn:not(:disabled):active{transform:scale(.985)}
.shop-btn-lg{min-height:52px;padding-inline:var(--shop-s8);font-size:var(--shop-t-body)}

/* `.shop-scope` a propósito: `.shop-scope a{color:inherit}` es (0,1,1) y
   ganaría a una clase suelta, dejando todo enlace-botón sin su blanco. */
/* El par invertido (tokens.css:50-66, kit.css .ba-btn--primary): REPOSA en
   el oscuro (blanco 5.35:1) y el hover sube al de marca (4.32:1, estado
   momentaneo sobre el de reposo, tokens.css:65). */
.shop-scope .shop-btn-primary{background:var(--shop-red-dark);color:var(--shop-on-ink);box-shadow:var(--shop-glow)}
.shop-scope .shop-btn-primary:not(:disabled):hover{background:var(--shop-red)}
/* Deshabilitado que SE LEE deshabilitado: sin brillo, plano y gris. */
.shop-scope .shop-btn-primary:disabled{
  background:var(--shop-surface-3);color:var(--shop-ink-3);box-shadow:none;
  border-color:var(--shop-rule);
}
/* Secundario: contorno gris del kit, el que separa (kit.css:71-72). */
.shop-scope .shop-btn-secondary{
  background:var(--shop-surface);border-color:var(--shop-rule);color:var(--shop-ink);
}
.shop-scope .shop-btn-secondary:not(:disabled):hover{
  background:var(--shop-ink);border-color:var(--shop-ink);color:var(--shop-on-ink);
}
.shop-scope .shop-btn-quiet{color:var(--shop-ink-2);padding-inline:var(--shop-s3)}
.shop-scope .shop-btn-quiet:not(:disabled):hover{color:var(--shop-ink);background:var(--shop-surface-2)}
.shop-btn-block{width:100%}

/* Sobre el heroe (pieza oscura) las variantes se invierten. */
.shop-hero .shop-btn-secondary{
  background:transparent;border-color:var(--shop-on-dark-field);color:var(--shop-on-ink);
}
.shop-hero .shop-btn-secondary:not(:disabled):hover{
  background:var(--shop-on-ink);border-color:var(--shop-on-ink);color:var(--shop-ink);
}

.shop-icon-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:var(--shop-tap);height:var(--shop-tap);
  border:1px solid transparent;border-radius:var(--shop-r-sm);
  background:none;color:var(--shop-ink);cursor:pointer;
  transition:background var(--shop-m-micro) var(--shop-ease);
}
.shop-icon-btn:hover{background:var(--shop-surface-2)}
.shop-icon-btn svg{width:20px;height:20px;stroke:currentColor;fill:none;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* ── 6. CAMPOS ─────────────────────────────────────────────────────────── */
.shop-field{display:flex;flex-direction:column;gap:var(--shop-s2)}
.shop-label{font-size:var(--shop-t-label);font-weight:600;color:var(--shop-ink)}
.shop-hint{font-size:var(--shop-t-meta);color:var(--shop-ink-3);line-height:1.45}
.shop-input,.shop-select{
  width:100%;min-height:48px;padding:var(--shop-s3) var(--shop-s4);
  background:var(--shop-surface);border:1px solid var(--shop-rule-firm);
  border-radius:var(--shop-r-sm);font-family:var(--shop-font-body-tienda);
  font-size:var(--shop-t-body);   /* 16px: evita el zoom automático de iOS */
  color:var(--shop-ink);
  transition:border-color var(--shop-m-micro) var(--shop-ease),
             box-shadow var(--shop-m-micro) var(--shop-ease);
}
.shop-input::placeholder{color:var(--shop-ink-3)}
.shop-input:focus,.shop-select:focus{
  outline:none;border-color:var(--shop-ink);box-shadow:var(--shop-focus-halo);
}
.shop-input[aria-invalid="true"]{border-color:var(--shop-err)}
.shop-err-txt{font-size:var(--shop-t-meta);color:var(--shop-err);font-weight:500}
.shop-select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%236B7280' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right var(--shop-s4) center;
  padding-right:var(--shop-s10);
}

/* ── 7. CABECERA GLOBAL ────────────────────────────────────────────────── */
/* La cabecera del kit (kit.css:667-676): fondo --surface OPACO y filete
   --border abajo. Antes translucida al 90 % con desenfoque (estilo propio,
   se retira). Alto 56 y 66 desde 1024 (antes 64 y 76 desde 900):
   tokens.css:272-273 · SISTEMA-DISENO 6 (:330). */
.shop-header{
  position:sticky;top:0;z-index:50;
  background:var(--shop-surface);
  border-bottom:1px solid var(--shop-rule);
}
.shop-header-in{display:flex;align-items:center;gap:var(--shop-s3);height:var(--shop-cabecera-h)}
@media (min-width:1024px){ :root{--shop-cabecera-h:var(--shop-header-h)} }

/* EL LOGOTIPO DEL KIT (decision 3): solo el nombre, en rojo de marca, peso
   800, 20px y -.8px (kit.css:678-686, .ba-logo; SISTEMA-DISENO 4 :257-260).
   Rojo de marca porque es TEXTO GRANDE (20px a 800), donde basta 3:1:
   4.32:1 (tokens.css:62-63). El sufijo «Shop» en mono se retira del marcado
   de las 22 paginas y sus reglas de aqui. «Big Asere» sigue con
   brand-notranslate y translate="no". En el pie va en blanco, como
   .ba-footer .ba-logo (kit.css:872). */
.shop-logo{
  display:flex;align-items:center;min-height:var(--shop-tap);
  font-family:var(--shop-font-display);font-weight:800;color:var(--shop-red);
  font-size:var(--shop-t-logo);letter-spacing:-.8px;white-space:nowrap;
}
.shop-logo-footer{color:var(--shop-on-ink)}
.shop-header-spacer{flex:1 1 auto}
.shop-header-nav{display:none;align-items:center;gap:var(--shop-s1)}
/* Zona tactil de 44 (antes ~43.5: 12+19.5+12). tokens.css:274 + SISTEMA-
   DISENO 6 · diseñador README.md:49. */
.shop-header-nav a{
  display:inline-flex;align-items:center;min-height:var(--shop-tap);
  padding:var(--shop-s3) var(--shop-s4);border-radius:var(--shop-r-xs);
  font-size:var(--shop-t-label);font-weight:500;color:var(--shop-ink-2);
  position:relative;
  transition:color var(--shop-m-micro) var(--shop-ease);
}
.shop-header-nav a:hover{color:var(--shop-ink)}
.shop-header-nav a[aria-current="page"],.shop-header-nav a[aria-current="true"]{color:var(--shop-ink);font-weight:600}
/* Subrayado corto en rojo: estado activo sin pintar el fondo entero. */
.shop-header-nav a[aria-current="page"]::after,.shop-header-nav a[aria-current="true"]::after{
  content:"";position:absolute;left:var(--shop-s4);right:var(--shop-s4);bottom:2px;
  height:2px;background:var(--shop-red);border-radius:2px;
}
/* La nav de cabecera aparece en escritorio ancho, como .ba-header-nav
   (kit.css:696). Antes desde 900. */
@media (min-width:1024px){ .shop-header-nav{display:flex} }

.shop-cart-btn{position:relative}
.shop-cart-count{
  position:absolute;top:2px;right:2px;min-width:18px;height:18px;padding:0 5px;
  display:flex;align-items:center;justify-content:center;
  /* Insignia de marca con cifra blanca: reposa en el oscuro (5.35:1).
     tokens.css:57-58 · tokens.json:17-18. */
  background:var(--shop-red-dark);color:var(--shop-on-ink);border-radius:var(--shop-r-pill);
  font-family:var(--shop-font-body-tienda);font-variant-numeric:tabular-nums;
  font-size:var(--shop-t-nano);font-weight:600;line-height:1;
  border:2px solid var(--shop-bg);
}
.shop-cart-count[hidden]{display:none}

/* Selector de idioma (SHOP-M2). Lo monta js/shop-i18n.js al final de
   .shop-header-in. Alto de toque completo (--shop-tap), ancho justo para
   «EN»/«ES»: en un movil de 375px la fila ya lleva marca, busqueda y carrito,
   y bajo 400px se estrecha el hueco entre piezas para que quepa sin
   desbordar. Texto en tinta sobre borde firme: se lee como control, no
   como adorno. */
.shop-lang-switch{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:40px;height:var(--shop-tap);padding:0 var(--shop-s2);
  /* Es un boton, no un campo: el borde que separa (kit.css:71-72). */
  border:1px solid var(--shop-rule);border-radius:var(--shop-r-sm);
  background:none;color:var(--shop-ink);cursor:pointer;
  font-family:var(--shop-font-body-tienda);font-size:var(--shop-t-label);font-weight:600;letter-spacing:.06em;
  transition:background var(--shop-m-micro) var(--shop-ease);
}
.shop-lang-switch:hover{background:var(--shop-surface-2)}
.shop-lang-switch:focus-visible{outline:2px solid var(--shop-ink);outline-offset:2px}
/* Antes bajo 400px; el corte de movil del sistema es 640 (tokens.css:281). */
@media (max-width:640px){ .shop-header-in{gap:var(--shop-s2)} }

/* Salir (SHOP-M6). Vive en la cabecera de las paginas de panel, FUERA de
   .shop-header-nav —que en movil se oculta—, para que se vea en el iPhone.
   Mismo alto de toque y mismo borde que el selector de idioma: son los dos
   controles de la fila. Nace [hidden]; lo destapa js/shop-panel.js solo con
   sesion de vendedor. */
.shop-signout{
  display:inline-flex;align-items:center;justify-content:center;
  height:var(--shop-tap);padding:0 var(--shop-s3);
  border:1px solid var(--shop-rule);border-radius:var(--shop-r-sm);
  background:none;color:var(--shop-ink);cursor:pointer;
  font-family:inherit;font-size:var(--shop-t-label);font-weight:600;white-space:nowrap;
  transition:background var(--shop-m-micro) var(--shop-ease);
}
.shop-signout[hidden]{display:none}
.shop-signout:hover{background:var(--shop-surface-2)}
.shop-signout:focus-visible{outline:2px solid var(--shop-ink);outline-offset:2px}
@media (max-width:640px){ .shop-signout{padding:0 var(--shop-s2)} }

/* Pagina de acceso de vendedor (SHOP-M6): una columna estrecha, movil
   primero; en escritorio no se estira a todo el ancho. */
.shop-acc{max-width:440px}
.shop-acc .shop-form-grid{margin:var(--shop-s5) 0}
.shop-acc .shop-btn-primary{width:100%;min-height:var(--shop-tap)}
/* El boton dentro de un aviso (p. ej. «Entrar como vendedor»). */
.shop-notice .shop-notice-action{margin-top:.75rem}

/* Navegación inferior — solo móvil, con área segura. */
/* S6 (peticion del dueño, 2026-10-07): CINCO pestañas —Inicio, Explorar,
   Buscar, Carrito, Cuenta—, cada una a su pagina real («Pedidos» pasa a
   Cuenta). En REJILLA, no en flex (V4 MB-C): con la compra cerrada (SHOP-018
   D1/D6) shop-ui oculta Carrito DESPUES de pintar, y en flex las demas se
   ensanchaban y se movian (medido en la traza de Lighthouse: CLS 0,28 en la
   portada). Y con COLUMNA FIJA por posicion: en rejilla automatica, retirar
   la 4.ª (Carrito) movia Cuenta de la 5.ª a la 4.ª columna; con grid-column
   explicito cada pestaña conserva su columna y nada salta (con la compra
   cerrada queda la 4.ª libre). A 375 px cada columna mide 75 px y cada
   pestaña 56 px de alto: objetivo tactil >= 44 px en los dos ejes. */
.shop-tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  display:grid;grid-template-columns:repeat(5,1fr);
  /* Opaca (antes --shop-surface-glass a .96 con desenfoque): sobre el esqueleto
     (#F7F7F8) el gris --shop-ink-3 daba 4.43:1 a 10px, y axe pide 4.5 (WCAG AA).
     Sobre blanco da 4.83:1. Con el 4 % de translucidez no se distingue. */
  background:var(--shop-surface);
  border-top:1px solid var(--shop-rule);
  padding-bottom:env(safe-area-inset-bottom,0);
}
.shop-tabbar a{
  flex:1 1 0;position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;min-height:56px;font-size:var(--shop-t-nano);font-weight:600;letter-spacing:.02em;
  color:var(--shop-ink-3);transition:color var(--shop-m-micro) var(--shop-ease);
}
.shop-tabbar a[hidden]{display:none}
.shop-tabbar a:nth-child(1){grid-column:1}
.shop-tabbar a:nth-child(2){grid-column:2}
.shop-tabbar a:nth-child(3){grid-column:3}
.shop-tabbar a:nth-child(4){grid-column:4}
.shop-tabbar a:nth-child(5){grid-column:5}
/* La insignia del carrito tambien en la pestaña (misma pieza que en la
   cabecera, §7): la cifra la pinta shop-ui en todo [data-shop-cart-count]. */
.shop-tabbar .shop-cart-count{top:6px;right:calc(50% - 22px)}
/* Pestaña activa = texto rojo pequeño: el oscuro. tokens.css:59 · tokens.json:18 */
.shop-tabbar a[aria-current="page"]{color:var(--shop-red-dark)}
/* aria-current="true" (S6): la SECCION actual sin ser la pagina (Pedidos, bajo Cuenta). */
.shop-tabbar a[aria-current="true"]{color:var(--shop-red-dark)}
.shop-tabbar svg{width:21px;height:21px;stroke:currentColor;fill:none;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
/* Se retira donde aparece la nav de cabecera (kit.css:696): antes 900. */
@media (min-width:1024px){ .shop-tabbar{display:none} }
/* EL PRINCIPAL NO QUEDA TAPADO: reserva el alto de la barra (56 px de
   pestaña + 1 px de borde, redondeado a 60) MAS el area segura del iPhone
   (la misma env() que la barra suma en su padding-bottom). */
.shop-main{flex:1 0 auto;padding-bottom:calc(60px + env(safe-area-inset-bottom,0))}
/* EL PIE NO SALTA (liston, CLS): el contenido llega despues (esqueleto -> datos,
   estado de error, vacio) y, si el cuerpo es mas bajo que la pantalla, el pie
   subia hasta verse y contaba como salto. Con el principal al menos a la altura
   de la pantalla menos la cabecera, el pie queda SIEMPRE bajo el pliegue, igual
   que ya hacen los paneles (.shop-seller .shop-main). */
.shop-main{min-height:var(--shop-p-main-min)}
/* EL AVISO DE «COMPRA CERRADA» NO EMPUJA LA PAGINA (liston, CLS): js/shop-ui.js
   lo inserta cuando el servidor contesta, y empujaba todo lo de abajo. Hasta
   que contesta (<body data-shop-gate> aun sin poner) se reserva su hueco; al
   contestar, el aviso ocupa ese hueco y el atributo retira la reserva en el
   MISMO fotograma. Si la compra esta abierta no hay aviso y el hueco se va. */
:root{--shop-banner-reserva:9.5rem}
body[data-shop-storefront]:not([data-shop-gate]) .shop-main::before{
  content:"";display:block;height:var(--shop-banner-reserva)}
@media (min-width:1024px){ .shop-main{padding-bottom:0} }
/* En el checkout la barra inferior compite con «Confirmar pedido»: se retira.
   Es puramente de superficie —sin rutas ni lógica— y la cabecera conserva
   toda la navegación. */
body[data-surface="checkout"] .shop-tabbar{display:none}
body[data-surface="checkout"] .shop-main{padding-bottom:0}

/* ── 8. HÉROE ─────────────────────────────────────────────────────────── */
/* EL UNICO BLOQUE OSCURO DE LA PANTALLA (ademas del pie): «lo oscuro es un
   elemento dentro de la pagina, nunca la pagina» (SISTEMA-DISENO 1.1 :24-26;
   13 :554, bloque de oferta oscuro). Solo index y tienda lo llevan, uno cada
   una. EL HALO SE RETIRA (decision 4): era un degradado radial de ambar en
   ::after, y SISTEMA-DISENO 5 (:313-314) prohibe los degradados
   decorativos. Fondo plano de tinta. */
.shop-hero{
  position:relative;background:var(--shop-ink);color:var(--shop-on-ink);overflow:hidden;
}
.shop-hero-in{position:relative;z-index:1;padding-block:var(--shop-s16) var(--shop-s12)}
.shop-hero h1{
  font-size:var(--shop-titular);letter-spacing:-.04em;line-height:1.02;
  margin-bottom:var(--shop-s5);max-width:14ch;
}
.shop-hero-sub{
  font-size:var(--shop-t-lede);line-height:1.55;color:var(--shop-on-dark);
  max-width:44ch;margin-bottom:var(--shop-s8);
}
.shop-hero-actions{display:flex;flex-wrap:wrap;gap:var(--shop-s3)}
/* El manifiesto: cifras del servidor o guiones. Nunca un número inventado.
   Era la version oscura del rail de ticket; se queda como linea de datos
   (sin mono, sin mayusculas espaciadas), con el filete sobre oscuro del kit
   (--on-dark-line, tokens.css:262). */
.shop-hero-rail{
  display:flex;flex-wrap:wrap;gap:var(--shop-s3) var(--shop-s8);
  margin-top:var(--shop-s12);padding-top:var(--shop-s5);
  border-top:1px solid var(--shop-rule-dark);
  font-family:var(--shop-font-body-tienda);font-size:var(--shop-t-meta);
  color:var(--shop-on-dark-2);
}
.shop-hero-rail b{color:var(--shop-on-ink);font-weight:600;font-size:var(--shop-t-label);font-variant-numeric:tabular-nums}

@media (min-width:1024px){
  /* Asimétrico: el mensaje ocupa 7 de 12 y respira contra el vacío. El vacío
     es parte de la composición, no contenido que falte. Antes desde 900, y
     6 de 12 desde 1200: ese tercer escalon se retira. */
  .shop-hero-in{
    display:grid;grid-template-columns:repeat(12,1fr);
    align-items:end;padding-block:var(--shop-s24) var(--shop-s16);
  }
  .shop-hero-copy{grid-column:1 / span 7}
  .shop-hero-rail{grid-column:1 / -1;margin-top:var(--shop-s16)}
}

/* Titular de seccion con presencia editorial: es el escalon entre el heroe y
   el catalogo. */
.shop-section-head h2{letter-spacing:-.03em}
@media (min-width:1024px){
  .shop-section-head{align-items:baseline}
  /* Mas aire ANTES del catalogo que despues del titular: el bloque se lee
     como una unidad en vez de como dos cosas pegadas. */
  .shop-band > .shop-container > .shop-section-head{margin-bottom:var(--shop-s10)}
}

/* ── 9. DESCUBRIMIENTO DE CATEGORÍAS ───────────────────────────────────── */
/* Baldosas de categoria: 2 columnas en movil, 3 en lo intermedio y 6 en
   escritorio ancho (antes 2 / 3 desde 640 / 6 desde 1000). */
.shop-cats{
  display:grid;gap:var(--shop-s3);
  grid-template-columns:repeat(3,minmax(0,1fr));
}
@media (max-width:640px){ .shop-cats{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1024px){ .shop-cats{grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--shop-s4)} }
.shop-cat{
  position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  min-height:104px;padding:var(--shop-s4);
  background:var(--shop-surface);border:1px solid var(--shop-rule);
  border-radius:var(--shop-r-md);overflow:hidden;
  transition:border-color var(--shop-m-std) var(--shop-ease),
             transform var(--shop-m-std) var(--shop-ease-out),
             box-shadow var(--shop-m-std) var(--shop-ease);
}
@media (min-width:1024px){ .shop-cat{min-height:132px} }
.shop-cat:hover{border-color:var(--shop-ink);box-shadow:var(--shop-e2)}
@media (hover:hover){ .shop-cat:hover{transform:translateY(-2px)} }
.shop-cat-idx{
  font-family:var(--shop-font-body-tienda);font-variant-numeric:tabular-nums;font-size:var(--shop-t-micro);
  color:var(--shop-ink-3);letter-spacing:.14em;margin-bottom:auto;
}
.shop-scope .shop-cat-name{
  font-family:var(--shop-font-display);font-weight:700;font-size:var(--shop-t-body);
  letter-spacing:-.02em;line-height:1.15;color:var(--shop-ink);
}

/* Chips: se conservan para el filtro lateral de categoría/búsqueda. */
.shop-chips{
  display:flex;gap:var(--shop-s2);overflow-x:auto;scrollbar-width:none;
  -webkit-overflow-scrolling:touch;padding-bottom:var(--shop-s1);
  scroll-snap-type:x proximity;
}
.shop-chips::-webkit-scrollbar{display:none}
/* La fila no cambia de alto entre esqueleto, chips y sin chips (liston, CLS). */
.shop-chips{min-height:38px}
.shop-chip{
  flex:none;scroll-snap-align:start;display:inline-flex;align-items:center;
  min-height:var(--shop-tap);padding:0 var(--shop-s5);
  /* Borde que separa, como .ba-chip (kit.css:573-575). */
  background:var(--shop-surface);border:1px solid var(--shop-rule);
  border-radius:var(--shop-r-pill);
  font-size:var(--shop-t-label);font-weight:500;color:var(--shop-ink-2);
  white-space:nowrap;cursor:pointer;
  transition:all var(--shop-m-micro) var(--shop-ease);
}
.shop-chip:hover{border-color:var(--shop-ink-3);color:var(--shop-ink)}
.shop-chip[aria-pressed="true"],.shop-chip[aria-current="page"]{
  background:var(--shop-ink);border-color:var(--shop-ink);color:var(--shop-on-ink);
}

/* ── 10. BUSCADOR ──────────────────────────────────────────────────────── */
.shop-search{position:relative;display:flex;align-items:center}
.shop-search svg{
  position:absolute;left:var(--shop-s5);width:19px;height:19px;
  stroke:var(--shop-ink-3);fill:none;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;pointer-events:none;
}
.shop-search input{
  width:100%;min-height:56px;
  padding:var(--shop-s3) var(--shop-s5) var(--shop-s3) var(--shop-s12);
  background:var(--shop-surface);border:1px solid var(--shop-rule-firm);
  border-radius:var(--shop-r-md);
  font-family:var(--shop-font-body-tienda);font-size:var(--shop-t-body);color:var(--shop-ink);
  transition:border-color var(--shop-m-micro) var(--shop-ease),
             box-shadow var(--shop-m-micro) var(--shop-ease);
}
.shop-search input:focus{
  outline:none;border-color:var(--shop-ink);box-shadow:var(--shop-focus-halo);
}

/* ── 11. REJILLA Y FICHA DE PRODUCTO — un solo sistema ─────────────────── */
/* TARJETAS FLOTANTES, no libro de registro. Cada ficha es su propia tarjeta:
   --surface, radio 12 y la sombra del sistema, sin borde (SISTEMA-DISENO 6
   :332; kit.css:510 .ba-card--raised: sombra y borde transparente). En la
   ronda 1 la sombra no entro porque el diseñador daba otra (tokens.json:161);
   ahora manda el aprobado (tokens.css:152).

   El hueco entre fichas es el de la rejilla del kit: 16px (kit.css:535,
   .ba-card-grid; antes 12). Columnas: 2 en movil, 3 en lo intermedio, 4 en
   escritorio (antes 2 / 3 desde 560 / 4 desde 900 / 5 desde 1240; el
   tercer escalon se retira, y 4 es lo que da el kit a 1160px de contenido:
   minmax(260px) en kit.css:536). */
.shop-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--shop-s4);
}
@media (max-width:640px){ .shop-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1024px){ .shop-grid{grid-template-columns:repeat(4,minmax(0,1fr))} }
/* Resultados escasos. Acotar solo el ancho no bastaba: la rejilla mantenia
   sus cinco columnas y la unica ficha quedaba espachurrada a 128px junto a un
   hueco blanco enorme. Con `auto-fit` y un tope por columna, una ficha ocupa
   su ancho natural y el contenedor se encoge hasta ella. */
.shop-grid[data-sparse="true"]{
  grid-template-columns:repeat(auto-fit,minmax(160px,280px));
  width:fit-content;max-width:100%;
}

.shop-card{
  position:relative;display:flex;flex-direction:column;
  padding:var(--shop-s4) var(--shop-s4) var(--shop-s5);
  background:var(--shop-surface);
  border:1px solid transparent;border-radius:var(--shop-r-md);
  box-shadow:var(--shop-shadow-card);
  transition:background var(--shop-m-std) var(--shop-ease);
}
/* Antes el relleno ancho empezaba en 560; ahora fuera del movil. */
@media (max-width:640px){ .shop-card{padding:var(--shop-s3) var(--shop-s3) var(--shop-s4)} }
.shop-card:hover{background:var(--shop-surface-2)}
.shop-card:focus-within{background:var(--shop-surface-2)}
.shop-card-link::after{content:"";position:absolute;inset:0;z-index:1}

/* Marco 4:3 estable (antes 1:1): la altura no depende de la imagen, así que
   no hay salto antes y después de cargar. 4:3 es la proporcion de producto
   en las dos fuentes: SISTEMA-DISENO 11 regla 1 (:477) · diseñador
   decisiones.md:83 («4:3 en toda la plataforma, sin excepción»). El hueco
   sin foto (.shop-media-empty) vive DENTRO del marco, así que mide lo mismo
   que una foto y conserva su comportamiento de hoy: SISTEMA-DISENO 11 regla
   5 · decisiones.md:85. */
/* La media pasa de «recorte a sangre» a MARCO: fondo templado y la foto
   contenida con aire alrededor. Con fotografia real de producto —fondo
   recortado, proporciones distintas— un `cover` a sangre corta el producto;
   `contain` sobre superficie templada lo presenta. Es la diferencia entre un
   listado y un catalogo. */
/* Filete de 1px en --border dentro del radio 8: separa la foto del fondo
   blanco aunque la foto sea casi blanca y disimula un recorte imperfecto
   (SISTEMA-DISENO 11 regla 2, :482-485). */
.shop-media{
  position:relative;aspect-ratio:4/3;
  background:var(--shop-warm);border-radius:var(--shop-r-sm);
  border:1px solid var(--shop-rule);
  overflow:hidden;margin-bottom:var(--shop-s4);
}
.shop-media img{
  width:100%;height:100%;object-fit:cover;
  transition:transform var(--shop-m-large) var(--shop-ease-out);
}
@media (hover:hover){ .shop-card:hover .shop-media img{transform:scale(1.02)} }
.shop-media-empty{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--shop-font-body-tienda);font-size:var(--shop-t-micro);
  letter-spacing:.16em;text-transform:uppercase;color:var(--shop-ink-3);
}

.shop-scope .shop-card-title{
  font-family:var(--shop-font-body-tienda);font-size:var(--shop-t-card);font-weight:500;
  line-height:1.4;letter-spacing:-.005em;color:var(--shop-ink-2);
  margin-bottom:var(--shop-s3);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
/* El nombre en peso medio y tinta secundaria; el PRECIO en negro y firme. En
   una rejilla, lo que decide es el precio, y R2 los tenia al mismo peso. */
.shop-card:hover .shop-card-title{color:var(--shop-ink)}
/* Marca (V4 03c/12d): solo el nombre, pequeña, encima del titulo. */
.shop-card-brand{
  margin:0 0 var(--shop-s1);font-family:var(--shop-font-body-tienda);
  font-size:var(--shop-t-micro);font-weight:600;text-transform:uppercase;
  letter-spacing:.14em;color:var(--shop-ink-3);overflow-wrap:anywhere;
}
.shop-eyebrow a{color:inherit;text-decoration:underline;text-underline-offset:3px}
/* Filtros del listado (V4 12c/13b): precio, marca y tipo. Estado en la URL. */
.shop-filters{display:grid;gap:var(--shop-s4);grid-template-columns:1fr;align-items:end}
.shop-filters .shop-field{min-width:0}
.shop-filters-price{display:grid;grid-template-columns:1fr 1fr;gap:var(--shop-s3)}
.shop-filters-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--shop-s3)}
.shop-filters-actions .shop-btn,.shop-filters-clear{min-height:var(--shop-tap)}
.shop-filters-clear{display:inline-flex;align-items:center;padding:0 var(--shop-s3);color:var(--shop-ink-2);text-decoration:underline;text-underline-offset:3px}
.shop-filters>.shop-err-txt{grid-column:1/-1;margin:0}
.shop-filters-type{margin:0 0 var(--shop-s2)}
/* Movil: columna unica; precio en dos columnas. Desde 1024: marca, precio y acciones en una fila. */
@media (min-width:1024px){.shop-filters{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) auto}}
.shop-card-foot{margin-top:auto;display:flex;flex-direction:column;gap:2px}
/* Ojo del precio: diminuto, en mayusculas, pegado al importe que califica. */
.shop-card-from{
  font-family:var(--shop-font-body-tienda);font-size:var(--shop-t-micro);
  text-transform:uppercase;letter-spacing:.14em;color:var(--shop-ink-3);
}
.shop-price{font-size:var(--shop-t-price);font-weight:700;color:var(--shop-ink);white-space:nowrap;letter-spacing:-.02em}
.shop-price-lg{font-size:var(--shop-t-price-lg);font-weight:700;letter-spacing:-.03em}
/* Un precio ausente es un GUION o una frase — nunca un cero. Y como es frase,
   fluye: con el `nowrap` del precio se cortaba a media palabra. */
.shop-price-none{
  color:var(--shop-ink-3);font-weight:500;white-space:normal;
  font-size:var(--shop-t-meta);line-height:1.3;font-family:var(--shop-font-body-tienda);
}
/* Existencias: sin el filete de ticket que las separaba del precio. */
.shop-card-rail{margin-top:var(--shop-s3)}
.shop-card-rail .shop-rail{gap:6px}
.shop-card-rail .shop-rail > span:last-of-type{flex:none}
@media (max-width:640px){
  /* Una letra con puntos suspensivos no es un dato: se retira el código y el
     raíl se queda con lo que decide una compra. */
  .shop-card-rail .shop-rail > span:first-child,
  .shop-card-rail .shop-rail-sep{display:none}
}

/* Cabecera de pagina de listado. R2 dejaba el titulo suelto sobre un lienzo
   muy ancho; aqui se acota la medida y se ata el recuento al titulo. */
.shop-page-head{max-width:52ch}
.shop-page-head .shop-rail{margin-top:var(--shop-s4)}
@media (min-width:1024px){
  .shop-page-head{margin-bottom:var(--shop-s8)}
}

/* ── 12. INSIGNIAS ─────────────────────────────────────────────────────── */
.shop-badge{
  display:inline-flex;align-items:center;gap:5px;padding:4px var(--shop-s2);
  border-radius:var(--shop-r-pill);
  font-family:var(--shop-font-body-tienda);font-size:var(--shop-t-micro);font-weight:500;
  text-transform:uppercase;letter-spacing:.08em;
  background:var(--shop-surface-2);color:var(--shop-ink-2);
}
.shop-badge-ok{background:var(--shop-st-ok-bg);color:var(--shop-st-ok-fg)}
.shop-badge-warn{background:var(--shop-st-warn-bg);color:var(--shop-st-warn-fg)}
.shop-badge-err{background:var(--shop-err-soft);color:var(--shop-err)}
.shop-badge-ember{background:var(--shop-ember-soft);color:var(--shop-amber-ink)}

/* ── 13. FICHA DE PRODUCTO — composición ───────────────────────────────── */
/* R1 ponía la media a todo lo ancho y la compra debajo: en escritorio había
   que hacer scroll para ver el precio de lo que estabas mirando. R2 usa dos
   columnas 55/45 con el panel de compra PEGAJOSO. */
/* Una columna hasta 1023 y dos en escritorio ancho (antes dos desde 820,
   con el hueco creciendo en 900 y 1240; ese tercer escalon se retira). */
.shop-pdp{display:grid;gap:var(--shop-s8);grid-template-columns:1fr}
@media (min-width:1024px){
  .shop-pdp{grid-template-columns:minmax(0,55fr) minmax(0,45fr);gap:var(--shop-s12);align-items:start}
  .shop-pdp-buy{position:sticky;top:calc(var(--shop-cabecera-h) + var(--shop-s6))}
}

/* La media de la ficha acepta cualquier proporción de origen sin deformar:
   `contain` sobre superficie templada. Un producto vertical, uno cuadrado y
   uno recortado conviven en el mismo marco.
   Marco 4:3 (antes 1:1 en dos columnas y la proporcion de la foto en una):
   la misma regla de producto que la rejilla, SISTEMA-DISENO 11 regla 1.
   En UNA columna la media se acota (58vh/440px arriba, 260px abajo): sin
   eso, a 768px salia un cartelon de 768px de alto y habia que hacer scroll
   para llegar al precio. Antes eso era max-width:819; ahora es la regla base
   y el escritorio la suelta.
   `width:100%` NO sobra: con el ancho en auto, aspect-ratio traslada el tope
   de alto al ancho y el marco se encogia (586px de 736 a 800px de pantalla,
   medido en captura). Con el ancho fijado, el marco ocupa la columna y es el
   alto el que se acota. */
.shop-pdp-media{
  position:relative;aspect-ratio:4/3;background:var(--shop-warm);
  border:1px solid var(--shop-rule);border-radius:var(--shop-r-lg);overflow:hidden;
  width:100%;max-height:min(58vh,440px);min-height:260px;
}
.shop-pdp-media img{
  width:100%;height:100%;object-fit:contain;padding:var(--shop-s6);
}
@media (min-width:1024px){
  .shop-pdp-media{max-height:none;min-height:0}
  .shop-pdp-media img{padding:var(--shop-s12)}
}

/* ── 13b. GALERIA DE LA FICHA (ACTA SHOP-020, fase 1) ──
   Miniaturas con las reglas de foto del sistema (SISTEMA-DISENO §11 @91e44d21):
   marco 4:3, radio 8px (--shop-r-xs), borde 1px (--shop-rule), fondo hundido
   (--shop-warm = #F7F7F8) y `contain`. 64x48: la zona tactil de 44 cabe en
   el alto. La elegida se marca con el borde en tinta (aria-pressed), no con
   un color nuevo; el foco usa el anillo comun de .shop-scope. */
.shop-pdp-gallery{min-width:0}
.shop-pdp-thumbs{display:flex;flex-wrap:wrap;gap:var(--shop-s2);margin-top:var(--shop-s3)}
.shop-pdp-thumb{
  width:64px;aspect-ratio:4/3;padding:0;background:var(--shop-warm);
  border:1px solid var(--shop-rule);border-radius:var(--shop-r-xs);overflow:hidden;cursor:pointer;
}
.shop-pdp-thumb img{display:block;width:100%;height:100%;object-fit:contain}
.shop-pdp-thumb[aria-pressed="true"]{border-color:var(--shop-ink)}

.shop-scope .shop-pdp-title{
  font-size:var(--shop-titulo-editorial);line-height:1.12;letter-spacing:-.03em;
  margin-bottom:var(--shop-s4);
}
@media (min-width:1024px){ .shop-scope .shop-pdp-title{font-size:var(--shop-t-edit-wide)} }
.shop-pdp-price{margin-bottom:var(--shop-s6)}
.shop-pdp-details{
  margin-top:var(--shop-s10);padding-top:var(--shop-s6);
  border-top:1px solid var(--shop-rule);
}
.shop-pdp-details p{color:var(--shop-ink-2);font-size:var(--shop-t-card);line-height:1.65;max-width:60ch}

/* ── 14. PANEL DE COMPRABILIDAD ────────────────────────────────────────── */
/* El servidor DECIDE; este panel solo MUESTRA. No recalcula jurisdicción,
   cobertura, inventario ni envío. */
.shop-buy{
  background:var(--shop-surface);border:1px solid var(--shop-rule);
  border-radius:var(--shop-r-lg);padding:var(--shop-s6);
}
@media (min-width:1024px){ .shop-buy{padding:var(--shop-s8)} }
.shop-buy-state{
  display:flex;align-items:flex-start;gap:var(--shop-s3);
  padding:var(--shop-s4);border-radius:var(--shop-r-sm);
  background:var(--shop-surface-2);margin-bottom:var(--shop-s6);
}
/* Una compuerta cerrada NO es un error de aplicación: «no enviamos ahí» es
   comercio normal y se dibuja tranquilo, no en rojo de alarma. */
.shop-buy-state[data-tone="ok"]{background:var(--shop-st-ok-bg)}
.shop-buy-state[data-tone="warn"]{background:var(--shop-warm)}
.shop-buy-state[data-tone="err"]{background:var(--shop-warm)}
.shop-buy-ic{flex:none;width:20px;height:20px;margin-top:1px}
.shop-buy-ic svg{width:20px;height:20px;stroke:currentColor;fill:none;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.shop-buy-state[data-tone="ok"] .shop-buy-ic{color:var(--shop-st-ok-fg)}
.shop-buy-state[data-tone="warn"] .shop-buy-ic{color:var(--shop-st-warn-fg)}
.shop-buy-state[data-tone="err"] .shop-buy-ic{color:var(--shop-ink-2)}
/* La compra cerrada (SHOP-018 D1): el aviso de cabecera de las cinco paginas
   publicas reutiliza el tono `warn` de arriba; aqui solo su hueco. */
.shop-closed-banner{margin:16px 0 0}
.shop-buy-t{display:block;font-size:var(--shop-t-label);font-weight:600;margin-bottom:3px}
.shop-buy-d{display:block;font-size:var(--shop-t-label);color:var(--shop-ink-2);line-height:1.5}
/* Sobre el verde suave del estado «se puede comprar» el gris del kit da
   4.23:1 (medido): por debajo de AA para 13px. El fondo es color de estado
   y no se toca; la frase pasa a la tinta (≈17:1). */
.shop-buy-state[data-tone="ok"] .shop-buy-d{color:var(--shop-ink)}
/* El código de máquina se conserva para diagnóstico (?diag=1), nunca como
   la experiencia. */
.shop-code{
  font-family:var(--shop-font-body-tienda);font-size:var(--shop-t-nano);letter-spacing:.08em;
  color:var(--shop-ink-3);margin-top:var(--shop-s2);display:block;
}
body:not([data-diag="1"]) .shop-code{display:none}

/* ── 15. CANTIDAD ──────────────────────────────────────────────────────── */
.shop-qty{
  display:inline-flex;align-items:center;border:1px solid var(--shop-rule-firm);
  border-radius:var(--shop-r-sm);background:var(--shop-surface);overflow:hidden;
}
.shop-qty button{
  width:48px;height:48px;display:flex;align-items:center;justify-content:center;
  background:none;border:none;color:var(--shop-ink);cursor:pointer;
  font-size:var(--shop-t-qty);line-height:1;
  transition:background var(--shop-m-micro) var(--shop-ease);
}
.shop-qty button:hover:not(:disabled){background:var(--shop-surface-2)}
.shop-qty button:disabled{opacity:.32;cursor:not-allowed}
.shop-qty-val{min-width:44px;text-align:center;font-size:var(--shop-t-label);font-weight:600}
/* Fila de compra: cantidad + llamada. La llamada manda y se lleva el resto. */
.shop-buy-actions{display:flex;gap:var(--shop-s3);align-items:stretch;flex-wrap:wrap}
.shop-buy-actions .shop-btn-primary{flex:1 1 200px;min-height:52px}

/* ── 16. LÍNEAS (carrito y pedidos) ────────────────────────────────────── */
.shop-lines{
  background:var(--shop-surface);border:1px solid var(--shop-rule);
  border-radius:var(--shop-r-md);overflow:hidden;
}
/* Tres columnas fuera del movil, dos en movil (antes el corte era 600). */
.shop-line{
  display:grid;grid-template-columns:96px minmax(0,1fr) auto;gap:var(--shop-s4);
  align-items:start;padding:var(--shop-s5);border-bottom:1px solid var(--shop-rule);
}
.shop-line:last-child{border-bottom:none}
@media (max-width:640px){
  .shop-line{grid-template-columns:80px minmax(0,1fr);align-items:stretch;padding:var(--shop-s4)}
}
/* Miniatura 4:3 (antes 1:1): SISTEMA-DISENO 11 regla 1 · decisiones.md:83. */
.shop-line-media{
  aspect-ratio:4/3;border-radius:var(--shop-r-sm);overflow:hidden;background:var(--shop-warm);
}
.shop-line-media img{width:100%;height:100%;object-fit:contain;padding:var(--shop-s2)}
.shop-line-t{font-size:var(--shop-t-card);font-weight:600;line-height:1.35}
.shop-line-meta{
  font-family:var(--shop-font-body-tienda);font-size:var(--shop-t-micro);color:var(--shop-ink-3);
  text-transform:uppercase;letter-spacing:.1em;margin-top:3px;
}
.shop-line-ctl{display:flex;align-items:center;gap:var(--shop-s3);margin-top:var(--shop-s4);flex-wrap:wrap}
.shop-line-ctl .shop-qty button{width:var(--shop-tap);height:var(--shop-tap)}
.shop-line-price{text-align:right;font-size:var(--shop-t-price);font-weight:600}
@media (max-width:640px){
  .shop-line-price{grid-column:2;text-align:left;margin-top:var(--shop-s3)}
}

/* Fila de pedido: de lista de administracion a algo de cliente. Sin cajas
   sueltas — comparten el filete del contenedor. */
.shop-order-row{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--shop-s4);
  align-items:center;padding:var(--shop-s6) var(--shop-s8);
  border-bottom:1px solid var(--shop-rule);
  transition:background var(--shop-m-micro) var(--shop-ease);
}
@media (max-width:640px){ .shop-order-row{padding:var(--shop-s5) var(--shop-s6)} }
.shop-order-row:last-child{border-bottom:none}
.shop-order-row:hover{background:var(--shop-surface-2)}
.shop-order-num{
  font-family:var(--shop-font-body-tienda);font-size:var(--shop-t-body);font-weight:600;
  letter-spacing:-.02em;
}
/* La fecha y el estado en el mismo renglon, separados por un punto: dos datos
   reales que caben en una linea y se escanean de un vistazo. */
.shop-order-meta{font-size:var(--shop-t-label);color:var(--shop-ink-3);margin-top:5px}
.shop-order-state{
  text-transform:capitalize;color:var(--shop-ink-2);font-weight:500;
}
.shop-order-state{text-transform:capitalize}
.shop-order-side{display:flex;align-items:center;gap:var(--shop-s4)}
.shop-order-total{font-size:var(--shop-t-price);font-weight:600}
.shop-order-go{
  font-family:var(--shop-font-body-tienda);color:var(--shop-ink-3);
  transition:transform var(--shop-m-micro) var(--shop-ease);
}
@media (hover:hover){ .shop-order-row:hover .shop-order-go{transform:translateX(3px)} }

/* ── 17. RESUMEN Y TOTALES ─────────────────────────────────────────────── */
.shop-summary{
  background:var(--shop-surface);border:1px solid var(--shop-rule);
  border-radius:var(--shop-r-lg);padding:var(--shop-s6);
}
.shop-sum-row{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--shop-s4);
  padding-block:var(--shop-s2);font-size:var(--shop-t-label);color:var(--shop-ink-2);
}
.shop-sum-row b{color:var(--shop-ink);font-weight:600}
.shop-sum-total{
  margin-top:var(--shop-s4);padding-top:var(--shop-s5);
  border-top:1px solid var(--shop-rule);   /* separa: --border (tokens.css:93) */
  font-size:var(--shop-t-body);color:var(--shop-ink);
}
.shop-sum-total b{font-size:var(--shop-t-total);font-weight:700;letter-spacing:-.03em}
/* Importe desconocido: se NOMBRA. Y como es frase, no viste el numeral
   grande — a 22px en negrita y partido en dos líneas parecía el diseño roto. */
.shop-sum-unknown{
  color:var(--shop-ink-3);font-style:normal;font-family:var(--shop-font-body-tienda);
  font-size:var(--shop-t-label);font-weight:500;letter-spacing:0;
  text-align:right;display:inline-block;max-width:22ch;line-height:1.35;
}

/* ── 18. CARRITO Y CHECKOUT — dos columnas ─────────────────────────────── */
.shop-checkout{display:grid;gap:var(--shop-s6)}
/* Dos columnas en escritorio ancho (antes desde 960). */
@media (min-width:1024px){
  /* 62/38: el contenido manda y el resumen acompaña sin competir. */
  .shop-checkout{grid-template-columns:minmax(0,62fr) minmax(0,38fr);gap:var(--shop-s10);align-items:start}
  .shop-checkout-aside{position:sticky;top:calc(var(--shop-cabecera-h) + var(--shop-s6))}
}
.shop-step{
  background:var(--shop-surface);border:1px solid var(--shop-rule);
  border-radius:var(--shop-r-lg);padding:var(--shop-s6);margin-bottom:var(--shop-s5);
}
@media (min-width:1024px){ .shop-step{padding:var(--shop-s8)} }
.shop-step:last-child{margin-bottom:0}
.shop-step-head{display:flex;align-items:center;gap:var(--shop-s3);margin-bottom:var(--shop-s6)}
.shop-step-n{
  flex:none;width:28px;height:28px;display:flex;align-items:center;justify-content:center;
  border-radius:var(--shop-r-pill);background:var(--shop-ink);color:var(--shop-on-ink);
  font-family:var(--shop-font-body-tienda);font-variant-numeric:tabular-nums;
  font-size:var(--shop-t-meta);font-weight:600;
}
.shop-scope .shop-step-t{
  font-family:var(--shop-font-display);font-size:var(--shop-t-step);font-weight:700;letter-spacing:-.02em;
}
.shop-form-grid{display:grid;gap:var(--shop-s5)}
/* Dos campos por fila fuera del movil (antes desde 560). */
.shop-form-2{grid-template-columns:1fr 1fr}
@media (max-width:640px){ .shop-form-2{grid-template-columns:1fr} }

/* Barra fija de acción SOLO donde ayuda: ficha, carrito, checkout. */
.shop-sticky{
  position:sticky;bottom:0;z-index:40;
  background:var(--shop-surface-glass);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--shop-rule);
  padding:var(--shop-s4) var(--shop-s4) calc(var(--shop-s4) + env(safe-area-inset-bottom,0));
  display:flex;align-items:center;gap:var(--shop-s3);
  margin-inline:calc(var(--shop-s5) * -1);
}
.shop-sticky .shop-btn{flex:1 1 auto;min-height:52px}
/* Deja de estar anclada en escritorio ancho, como .ba-actionbar (kit.css:
   399-401). Antes desde 960. */
@media (min-width:1024px){
  .shop-sticky{position:static;background:none;border:none;padding:0;margin-inline:0}
}

/* Lineas del pedido dentro del resumen del checkout. Miniatura con contador
   superpuesto: es el patron que el comercio premium usa porque cabe en una
   columna estrecha sin perder el «que estoy comprando». */
.shop-co-items{
  display:grid;gap:var(--shop-s4);
  padding-bottom:var(--shop-s5);margin-bottom:var(--shop-s2);
  border-bottom:1px solid var(--shop-rule);
}
.shop-co-item{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:var(--shop-s3);align-items:center}
/* Miniatura 4:3 (antes 48x48): mismo ancho, 36 de alto. SISTEMA-DISENO 11
   regla 1 · decisiones.md:83. */
.shop-co-item-media{
  position:relative;width:48px;height:36px;border-radius:var(--shop-r-xs);
  background:var(--shop-warm);border:1px solid var(--shop-rule);overflow:hidden;
}
.shop-co-item-media img{width:100%;height:100%;object-fit:contain;padding:4px}
.shop-co-item-q{
  position:absolute;top:-7px;right:-7px;min-width:20px;height:20px;padding:0 5px;
  display:flex;align-items:center;justify-content:center;
  background:var(--shop-ink);color:var(--shop-on-ink);border-radius:var(--shop-r-pill);
  font-family:var(--shop-font-body-tienda);font-variant-numeric:tabular-nums;font-size:var(--shop-t-nano);font-weight:600;
  border:2px solid var(--shop-surface);
}
.shop-co-item-t{
  font-size:var(--shop-t-label);font-weight:500;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.shop-co-item-p{font-size:var(--shop-t-label);font-weight:600;white-space:nowrap}

/* ── 19. LÍNEA DE ESTADO DEL PEDIDO ────────────────────────────────────── */
.shop-timeline{display:flex;flex-direction:column;gap:0}
.shop-tl-step{
  display:grid;grid-template-columns:26px minmax(0,1fr);gap:var(--shop-s4);
  position:relative;padding-bottom:var(--shop-s6);
}
.shop-tl-step:last-child{padding-bottom:0}
.shop-tl-step::before{
  content:"";position:absolute;left:12px;top:24px;bottom:0;width:1px;background:var(--shop-rule);
}
.shop-tl-step:last-child::before{display:none}
.shop-tl-dot{
  width:25px;height:25px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--shop-surface-3);color:var(--shop-ink-3);
  border:1px solid var(--shop-rule);
  font-family:var(--shop-font-body-tienda);font-variant-numeric:tabular-nums;
  font-size:var(--shop-t-nano);font-weight:600;position:relative;z-index:1;
}
.shop-tl-step[data-done="true"] .shop-tl-dot{background:var(--shop-st-ok-fg);border-color:var(--shop-st-ok-fg);color:var(--shop-on-ink)}
.shop-tl-step[data-current="true"] .shop-tl-dot{background:var(--shop-ink);border-color:var(--shop-ink);color:var(--shop-on-ink)}
.shop-tl-t{font-size:var(--shop-t-label);font-weight:600}
.shop-tl-d{font-size:var(--shop-t-meta);color:var(--shop-ink-3);margin-top:2px}

/* ── 20. ESQUELETO ─────────────────────────────────────────────────────── */
/* La geometría del esqueleto imita la de la ficha real: mismo marco 4:3
   (antes 1:1, sigue a .shop-media), mismos anchos de línea. Un esqueleto que
   no coincide provoca salto de diseño al llegar el contenido, que es justo lo
   que venía a evitar. */
/* Con los neutros del kit las tres superficies de Shop valen lo mismo, asi
   que el brillo que recorre el esqueleto es el del kit: --skel-shine,
   rgba(255,255,255,.72) sobre --surface-sunken (tokens.css:264-266,
   kit.css:454-467). */
.shop-sk{
  background:linear-gradient(90deg,
    var(--shop-surface-3) 25%, var(--shop-skel-shine) 37%, var(--shop-surface-3) 63%);
  background-size:400% 100%;animation:shop-sk 1.5s ease-in-out infinite;
  border-radius:var(--shop-r-sm);
}
@keyframes shop-sk{ 0%{background-position:100% 50%} 100%{background-position:0 50%} }
.shop-sk-media{aspect-ratio:4/3;margin-bottom:var(--shop-s4);border-radius:var(--shop-r-sm)}
.shop-sk-line{height:11px;margin-bottom:var(--shop-s2);border-radius:var(--shop-r-xs)}
.shop-sk-line.w60{width:60%} .shop-sk-line.w40{width:40%} .shop-sk-line.w85{width:85%}

/* ── 21. ESTADOS: VACÍO, ERROR, NO ENCONTRADO ──────────────────────────── */
/* Una familia, no cinco diseños sueltos. Y en escritorio ocupa el lienzo en
   vez de quedarse como una tarjetita en la esquina superior izquierda. */
.shop-state{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;min-height:340px;
  padding:var(--shop-s16) var(--shop-s6);
  background:var(--shop-surface);border:1px solid var(--shop-rule);
  border-radius:var(--shop-r-lg);
}
@media (min-width:1024px){ .shop-state{min-height:440px;padding:var(--shop-s20) var(--shop-s10)} }
.shop-state-ic{
  width:60px;height:60px;margin:0 auto var(--shop-s6);
  display:flex;align-items:center;justify-content:center;
  border-radius:var(--shop-r-pill);background:var(--shop-warm);color:var(--shop-ink-2);
}
.shop-state-ic svg{width:24px;height:24px;stroke:currentColor;fill:none;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.shop-state h2{font-size:var(--shop-titulo-editorial);margin-bottom:var(--shop-s4);letter-spacing:-.03em}
.shop-state p{
  font-size:var(--shop-t-label);color:var(--shop-ink-2);
  max-width:46ch;margin:0 auto var(--shop-s6);line-height:1.6;
}
.shop-state-err .shop-state-ic{background:var(--shop-err-soft);color:var(--shop-err)}

/* Confirmacion de pedido. Recompensa sin teatro: la marca de exito, el numero
   real, los importes que EXISTEN y el siguiente paso. Ni ETA, ni transportista,
   ni seguimiento — el contrato no los da. */
.shop-ok{display:grid;gap:var(--shop-s10)}
.shop-ok-head{text-align:center}
.shop-ok-mark{
  width:56px;height:56px;margin:0 auto var(--shop-s5);
  display:flex;align-items:center;justify-content:center;border-radius:var(--shop-r-pill);
  background:var(--shop-st-ok-bg);color:var(--shop-st-ok-fg);
}
.shop-ok-mark svg{width:26px;height:26px;stroke:currentColor;fill:none;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.shop-ok-head h1{margin-bottom:var(--shop-s3)}
.shop-ok-num{font-size:var(--shop-t-body);color:var(--shop-ink-2)}
.shop-ok-next h2{margin-bottom:var(--shop-s5)}
.shop-ok-actions{display:flex;gap:var(--shop-s3);flex-wrap:wrap;justify-content:center}
/* Antes 32 y 40 desde 700; ahora 40 fuera del movil. */
@media (max-width:640px){ .shop-ok{gap:var(--shop-s8)} }
/* Checkout que cobra: el campo de tarjeta lo dibuja Stripe (su iframe) dentro
   de este marco, con la altura de .shop-input. */
.shop-card-el{display:flex;align-items:center}
.shop-card-el>*{flex:1}
.shop-co-notice{margin:0 0 var(--shop-s3)}
/* DIRECCION VERIFICADA (2026-10-07). La escrita y la sugerida
   LADO A LADO; en movil (<=640) una encima de otra para no desbordar a 375.
   La sugerida marca lo que cambia con <mark> (y «cambia» para lector). */
.shop-addr-check{margin-top:var(--shop-s5)}
.shop-addr-check[hidden]{display:none}
.shop-addr-check .shop-buy-state{margin-bottom:var(--shop-s4)}
.shop-addr-cmp{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--shop-s3);margin-bottom:var(--shop-s4)}
@media (max-width:640px){ .shop-addr-cmp{grid-template-columns:minmax(0,1fr)} }
.shop-addr-card{
  border:1px solid var(--shop-rule);border-radius:var(--shop-r-sm);
  padding:var(--shop-s4);background:var(--shop-surface);overflow-wrap:anywhere;min-width:0;
}
.shop-addr-card[data-kind="suggested"]{border-color:var(--shop-rule-firm)}
.shop-addr-card h3{font-size:var(--shop-t-label);font-weight:600;margin:0 0 var(--shop-s2)}
.shop-addr-card p,.shop-addr-final p{margin:0;font-size:var(--shop-t-label);line-height:1.5;overflow-wrap:anywhere}
.shop-addr-card mark{background:var(--shop-st-warn-bg);color:var(--shop-ink);font-weight:600}
.shop-addr-acts{display:flex;flex-wrap:wrap;gap:var(--shop-s3)}
@media (max-width:640px){ .shop-addr-acts .shop-btn{flex:1 1 100%} }
.shop-ok-pay{margin:var(--shop-s4) 0}

/* ── 22. CAJÓN, DIÁLOGO, AVISO ─────────────────────────────────────────── */
.shop-scrim{
  /* Velo del kit (antes rgba(10,10,12,.46)): --overlay, tokens.css:257. */
  position:fixed;inset:0;z-index:90;background:var(--shop-overlay);
  opacity:0;pointer-events:none;transition:opacity var(--shop-m-std) var(--shop-ease);
}
.shop-scrim[data-open="true"]{opacity:1;pointer-events:auto}
.shop-drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:100;width:min(440px,100%);
  background:var(--shop-surface);border-left:1px solid var(--shop-rule);
  box-shadow:var(--shop-e3);display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform var(--shop-m-large) var(--shop-ease-out);
}
.shop-drawer[data-open="true"]{transform:translateX(0)}
.shop-drawer-head{
  display:flex;align-items:center;justify-content:space-between;gap:var(--shop-s3);
  padding:var(--shop-s5);border-bottom:1px solid var(--shop-rule);
}
.shop-drawer-body{flex:1 1 auto;overflow-y:auto;padding:var(--shop-s5)}
.shop-drawer-foot{
  padding:var(--shop-s5) var(--shop-s5) calc(var(--shop-s5) + env(safe-area-inset-bottom,0));
  border-top:1px solid var(--shop-rule);
}
.shop-toast-wrap{
  position:fixed;left:50%;bottom:calc(76px + env(safe-area-inset-bottom,0));
  transform:translateX(-50%);z-index:120;
  display:flex;flex-direction:column;gap:var(--shop-s2);
  width:min(440px,calc(100vw - 32px));pointer-events:none;
}
@media (min-width:1024px){ .shop-toast-wrap{bottom:var(--shop-s8)} }
.shop-toast{
  display:flex;align-items:center;gap:var(--shop-s3);
  padding:var(--shop-s4) var(--shop-s5);background:var(--shop-ink);color:var(--shop-on-ink);
  border-radius:var(--shop-r-sm);box-shadow:var(--shop-e3);
  font-size:var(--shop-t-label);font-weight:500;
  animation:shop-toast-in var(--shop-m-std) var(--shop-ease-out);pointer-events:auto;
}
@keyframes shop-toast-in{ from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} }
.shop-toast-ok{background:var(--shop-st-ok-fg)}
.shop-toast-err{background:var(--shop-err)}

/* ── 23. PIE ───────────────────────────────────────────────────────────── */
/* El pie es la otra pieza oscura permitida (SISTEMA-DISENO 1.1; kit.css:
   850-889, .ba-footer). Enlaces en blanco con subrayado al pasar, titulos y
   linea legal en --on-dark-muted: los valores del kit. Antes los enlaces
   iban al 70 % y la linea legal al 42 % de blanco (≈4:1, por debajo de
   AA para 12px); ahora 62 %, 7.6:1. */
.shop-footer{background:var(--shop-ink);color:var(--shop-on-dark);margin-top:auto}
/* Tres columnas fuera del movil (antes desde 700) y dos en movil. */
.shop-footer-in{padding-block:var(--shop-s16) var(--shop-s10)}
.shop-footer-grid{
  display:grid;gap:var(--shop-s8);
  grid-template-columns:1.5fr 1fr 1fr;
  padding-bottom:var(--shop-s10);border-bottom:1px solid var(--shop-rule-dark);
}
/* La nota dentro del pie (fondo tinta): el gris de meta no llega a AA sobre oscuro. */
.shop-footer .shop-note{color:var(--shop-on-dark-muted)}
.shop-footer-blurb{font-size:var(--shop-t-label);line-height:1.65;max-width:38ch;margin-top:var(--shop-s4)}
.shop-scope .shop-footer-h{
  font-family:var(--shop-font-body-tienda);font-size:var(--shop-t-micro);font-weight:500;
  text-transform:uppercase;letter-spacing:.18em;color:var(--shop-on-dark);
  margin:0 0 var(--shop-s4);
}
.shop-footer ul{list-style:none;margin:0;padding:0}
.shop-footer li + li{margin-top:var(--shop-s3)}
/* Zona tactil de 44 (antes el alto de la linea, ~20px). tokens.css:274 +
   SISTEMA-DISENO 6 · diseñador README.md:49 («también las filas de lista»).
   La separacion entre enlaces es la de hoy (12px; 8px en movil). */
.shop-footer a{display:inline-flex;align-items:center;min-height:var(--shop-tap);
  font-size:var(--shop-t-label);color:var(--shop-on-ink);transition:color var(--shop-m-micro) var(--shop-ease)}
.shop-footer a:hover{text-decoration:underline}
/* El pie de las paginas de panel solo lleva la linea legal; el enlace a
   Services va encima, en su propia lista. */
.shop-footer-mini{padding-top:var(--shop-s4)}
.shop-footer-mini + .shop-footer-legal{padding-top:var(--shop-s2)}
/* La linea de lanzamiento vive con la identidad, no con lo legal: es
   disponibilidad actual, no la razon social. */
.shop-footer-launch{
  font-family:var(--shop-font-body-tienda);font-size:var(--shop-t-micro);
  text-transform:uppercase;letter-spacing:.14em;color:var(--shop-ember);
  margin-top:var(--shop-s4);
}
.shop-footer-legal{
  padding-top:var(--shop-s6);font-size:var(--shop-t-meta);
  color:var(--shop-on-dark);line-height:1.7;
}

/* EL PIE MÓVIL DE R1 ERA ENORME: repetía el mapa del sitio completo, apilado
   en una columna, debajo de cada página — cuando la barra inferior ya lleva la
   navegación principal. R2 lo compacta por COMPOSICIÓN: dos columnas, tipo
   menor y menos aire.

   Se probó antes con <details> plegables. Se retiró: Chrome pintaba el
   contenido aunque `open` fuese false, así que el marcador «+» prometía abrir
   algo que ya estaba abierto. Un control que miente es peor que no tenerlo.
   Todos los enlaces siguen visibles y alcanzables por teclado. */
@media (max-width:640px){
  .shop-footer-in{padding-block:var(--shop-s8) var(--shop-s6)}
  .shop-footer-grid{
    grid-template-columns:1fr 1fr;gap:var(--shop-s6) var(--shop-s4);
    padding-bottom:var(--shop-s6);border-bottom:1px solid var(--shop-rule-dark);
  }
  /* La identidad ocupa las dos columnas; los dos bloques de enlaces se
     reparten la fila siguiente. */
  .shop-footer-grid > :first-child{grid-column:1 / -1}
  /* La frase de marca se retira en movil: no es navegacion, y el heroe ya la
     dice. Compacta el pie ~70px sin perder ni un enlace. */
  .shop-footer-blurb{display:none}
  .shop-scope .shop-footer-h{margin-bottom:var(--shop-s3)}
  .shop-footer li + li{margin-top:var(--shop-s2)}
  .shop-footer a{font-size:var(--shop-t-meta)}
  .shop-footer-legal{padding-top:var(--shop-s5)}
}

/* ── 24. ESCALA EN MOVIL ───────────────────────────────────────────────── */
/* Los mismos tamaños de antes, con los cortes del sistema: los de §1 valen
   fuera del movil (antes desde 768) y aqui bajan en movil. El escalon de
   1240 (76/48/36) se retira. Bajan los nombres de Shop (§1), no las copias
   del kit: una copia redefinida seria «copia distinta». */
@media (max-width:640px){
  :root{
    --shop-titular:var(--shop-t-display-mobile);            /* 44 */
    --shop-titulo-pagina:var(--shop-t-page-mobile);         /* 32 */
    --shop-titulo-editorial:var(--shop-t-edit-mobile);      /* 28 */
    --shop-titulo-seccion:var(--shop-t-section-mobile);     /* 20 */
  }
}

/* ── 25. MOVIMIENTO REDUCIDO ───────────────────────────────────────────── */
/* No es un apagado torpe: el esqueleto deja de latir, los paneles aparecen
   sin desplazarse, y todo sigue siendo utilizable. */
@media (prefers-reduced-motion:reduce){
  .shop-scope *,.shop-scope *::before,.shop-scope *::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
  .shop-sk{animation:none;background:var(--shop-surface-3)}
  .shop-drawer{transition:none}
  @media (hover:hover){
    .shop-card:hover .shop-media img{transform:none}
    .shop-cat:hover{transform:none}
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PANELES: Seller Center y operador.

   Se añaden porque la revisión RENDERIZADA los pilló sin estilo: las 824
   comprobaciones estáticas pasaban y la página estaba rota — las tablas sin
   formato y cada pastilla de estado inflada hasta ocupar media pantalla.
   La segunda captura enseñó el porqué: `.shop-state` YA EXISTE en la tienda
   del cliente como el bloque de estado vacío/error, con `min-height:440px`.
   Reutilizar ese nombre para una pastilla lo rompía. Se renombra a
   `.shop-pill` en vez de pelear con la regla anterior: el componente del
   cliente es de otra superficie y no se toca.

   Una prueba que lee el marcado no puede ver ninguna de las dos cosas; una
   captura sí, y por eso la revisión renderizada no es opcional.

   Reutilizan las variables ya definidas arriba: un panel que inventara sus
   propios grises acabaría discrepando del resto de la tienda en cuanto
   alguien ajustara la paleta en un solo sitio.
   ═══════════════════════════════════════════════════════════════════════ */

/* ══ PANELES V1d ══ (DISENO-PANEL-VENDEDOR-V1D.md @a21cd8da)
   Desde V1d esta seccion se escribe SOLO con tokens (§1): ningun color,
   familia ni medida suelta. La guarda de docs/shop/tests/textos-panel.test.mjs
   lee lo que hay entre esta marca y «FIN PANELES V1d» y cuenta los literales.
   PARTE A: las piezas de antes (vendedor y operador), con los MISMOS valores
   de antes, ahora con nombre. PARTE B: la superficie del vendedor (.shop-
   seller): Inter, escala 14/13/12, menu en cajon, filas apiladas, barra de
   accion, pestañas, pasos, Si/No y la lista del catalogo. */

/* ── PARTE A · lo comun ───────────────────────────────────────────────── */
.shop-h1{font-family:var(--shop-font-display);font-weight:var(--shop-fw-title);
  font-size:var(--shop-p-h1-size);line-height:var(--shop-lh-h1);letter-spacing:var(--shop-p-h-track);
  color:var(--shop-ink);margin:0 0 var(--shop-p-h1-gap)}
.shop-h2{font-family:var(--shop-font-display);font-weight:var(--shop-fw-title);
  font-size:var(--shop-p-title);line-height:var(--shop-lh-h2);color:var(--shop-ink);margin:0 0 var(--shop-s3)}
.shop-h3{font-family:var(--shop-font-display);font-weight:var(--shop-fw-title);
  font-size:var(--shop-t-body);color:var(--shop-ink);margin:var(--shop-s5) 0 var(--shop-s2)}
.shop-lede{color:var(--shop-ink-2);font-size:var(--shop-t-body);line-height:var(--shop-lh);margin:0 0 var(--shop-s6);
  max-width:var(--shop-p-lede-w)}
.shop-note{color:var(--shop-ink-3);font-size:var(--shop-p-body);line-height:var(--shop-lh);margin:0 0 var(--shop-s3);
  max-width:var(--shop-p-note-w)}
.shop-loading{color:var(--shop-ink-3);font-size:var(--shop-t-card);margin:var(--shop-s2) 0}
.shop-list{margin:var(--shop-s2) 0 var(--shop-s4);padding-left:var(--shop-s5);color:var(--shop-ink-2)}
.shop-list li{margin:var(--shop-s1) 0}

/* Las tablas ANCHAS se desplazan DENTRO de su contenedor. Sin esto, una tabla
   de inventario en un móvil empuja la página entera y el resto del panel
   queda fuera de la pantalla. (En el vendedor, bajo 640, pasan a filas
   apiladas: PARTE B.) */
.shop-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:var(--shop-hair) solid var(--shop-rule);border-radius:var(--shop-r-md);background:var(--shop-surface)}
.shop-table{width:100%;border-collapse:collapse;font-size:var(--shop-t-card);
  font-variant-numeric:tabular-nums}
.shop-table th,.shop-table td{padding:var(--shop-p-cell-y) var(--shop-p-cell-x);text-align:left;
  border-bottom:var(--shop-hair) solid var(--shop-rule);white-space:nowrap;vertical-align:middle}
.shop-table th{font-weight:var(--shop-fw-strong);color:var(--shop-ink-2);font-size:var(--shop-t-label);
  text-transform:uppercase;letter-spacing:var(--shop-p-th-track);background:var(--shop-surface-2)}
.shop-table tbody tr:last-child td{border-bottom:0}
.shop-table td{color:var(--shop-ink)}

/* Estado: una pastilla, no un bloque. El `display:inline-flex` con altura
   propia es justo lo que faltaba y lo que hinchaba las filas. Los colores son
   los de hoy, con nombre (D8). */
.shop-pill{display:inline-flex;align-items:center;gap:var(--shop-p-pill-gap);
  padding:var(--shop-p-pill-y) var(--shop-s2);border-radius:var(--shop-r-pill);font-size:var(--shop-t-label);line-height:var(--shop-lh-tight);
  background:var(--shop-surface-2);color:var(--shop-ink-2);
  border:var(--shop-hair) solid var(--shop-rule);white-space:nowrap}
.shop-pill[data-state="active"],.shop-pill[data-state="approved"],
.shop-pill[data-state="ready"],.shop-pill[data-state="paid"],
.shop-pill[data-state="settled"],.shop-pill[data-state="succeeded"],
.shop-pill[data-state="delivered"],.shop-pill[data-state="synced"],
.shop-pill[data-state="IN_AGREEMENT"],
.shop-pill[data-label="approved"],.shop-pill[data-label="published"]{background:var(--shop-st-ok-bg);
  color:var(--shop-st-ok-fg);border-color:var(--shop-st-ok-line)}
.shop-pill[data-state="suspended"],.shop-pill[data-state="error"],
.shop-pill[data-state="failed"],.shop-pill[data-state="blocked"],
.shop-pill[data-state="exhausted"],.shop-pill[data-state="PRICE_DRIFT"],
.shop-pill[data-state="NEVER_APPLIED"],.shop-pill[data-state="PROVIDER_AHEAD"],
.shop-pill[data-state="rejected"],.shop-pill[data-label="rejected"]{background:var(--shop-st-bad-bg);
  /* COLOR DE ESTADO: decision abierta de Abraham (D8), se queda como hoy. */
  color:var(--shop-st-bad-fg);border-color:var(--shop-st-bad-line)}
.shop-pill[data-state="proposed"],.shop-pill[data-state="pending"],
.shop-pill[data-state="requested"],.shop-pill[data-state="retrying"],
.shop-pill[data-state="awaiting_payment"],.shop-pill[data-state="draft"],
.shop-pill[data-state="processing"],.shop-pill[data-state="in_transit"],
.shop-pill[data-state="NEVER_SYNCED"],
.shop-pill[data-label="draft"],.shop-pill[data-label="awaiting"]{background:var(--shop-ember-soft);
  color:var(--shop-st-wait-fg);border-color:var(--shop-st-wait-line)}

/* Fichas de módulo y de estado.
   CHOQUE DE NOMBRES CORREGIDO (solo selector, solo presentacion): la ficha
   de PRODUCTO (js/shop-ui.js) tambien usa .shop-card-link y .shop-card-title,
   y estas reglas del panel, sin acotar, le pintaban una caja con borde,
   relleno y radio alrededor del titulo. Se acotan a .shop-grid-cards, que es
   donde viven las fichas del panel (vendedor.html y los arranques de
   vendedor y vendedor-canales). */
.shop-grid-cards{display:grid;gap:var(--shop-s3);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--shop-p-card-min)),1fr));margin:0 0 var(--shop-s6)}
/* HALLAZGO 1 DE LA Nº 6 (V1d): «Catalogo e Inventario abren Direccion de
   envio». La capa invisible `.shop-card-link::after` (§11: position:absolute;
   inset:0) necesita un contenedor POSICIONADO; aqui no lo tenia, asi que las
   cinco capas cubrian la primera pantalla y ganaba la ultima (envio). Con
   `position:relative` cada capa cubre SOLO su ficha. */
.shop-grid-cards .shop-card-link{position:relative;display:flex;flex-direction:column;gap:var(--shop-s1);padding:var(--shop-s4);
  border:var(--shop-hair) solid var(--shop-rule);border-radius:var(--shop-r-md);background:var(--shop-surface);
  text-decoration:none;color:inherit;transition:border-color var(--shop-m-micro) var(--shop-ease)}
.shop-grid-cards .shop-card-link:hover,.shop-grid-cards .shop-card-link:focus-visible{border-color:var(--shop-rule-firm)}
.shop-grid-cards .shop-card-title{font-weight:var(--shop-fw-strong);color:var(--shop-ink);font-size:var(--shop-t-card)}
.shop-card-sub{color:var(--shop-ink-3);font-size:var(--shop-t-label);line-height:var(--shop-lh-tight)}
.shop-card-value{margin-top:var(--shop-s1)}

/* Pares clave/valor de la inspección de operador. */
.shop-kv-list{margin:0 0 var(--shop-s4);padding:0}
.shop-kv{display:flex;gap:var(--shop-s3);padding:var(--shop-s2) 0;border-bottom:var(--shop-hair) solid var(--shop-rule)}
.shop-kv:last-child{border-bottom:0}
.shop-kv dt{color:var(--shop-ink-3);font-size:var(--shop-p-body);min-width:var(--shop-p-kv-dt)}
.shop-kv dd{margin:0;color:var(--shop-ink);font-size:var(--shop-t-card);
  font-variant-numeric:tabular-nums}

/* Avisos. El código de máquina sigue la misma regla que en el resto de la
   tienda: sólo visible en diagnóstico. */
.shop-notice{padding:var(--shop-p-notice-y) var(--shop-s4);border-radius:var(--shop-r-md);border:var(--shop-hair) solid var(--shop-rule);
  background:var(--shop-surface);margin:0 0 var(--shop-s4)}
.shop-notice p{margin:0;color:var(--shop-ink-2);font-size:var(--shop-t-card);line-height:var(--shop-lh)}
.shop-notice[data-kind="error"],.shop-notice[data-kind="blocked"]{
  border-color:var(--shop-notice-bad-line);background:var(--shop-notice-bad-bg)}
.shop-notice[data-kind="ok"]{border-color:var(--shop-notice-ok-line);background:var(--shop-notice-ok-bg)}
.shop-notice-code{margin-top:var(--shop-p-pill-gap)!important;font-size:var(--shop-t-meta)!important;
  color:var(--shop-ink-3)!important}
body:not([data-diag="1"]) .shop-notice-code{display:none}

@media (max-width:640px){
  .shop-kv{flex-direction:column;gap:0}
  .shop-kv dt{min-width:0}
}

/* ── Panel del catalogo: fotos (docs/shop/DISENO-PANEL-CATALOGO.md) ──
   Delante del §26 a proposito: las utilidades del §26 van al final
   (CORTE-PR115.md §6.1 @c903fed4). */
.shop-media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--shop-p-media-min),1fr));gap:var(--shop-s3);margin-block:var(--shop-s3)}
.shop-media-item{display:flex;flex-direction:column;gap:var(--shop-s2);align-items:flex-start}
.shop-media-item img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:var(--shop-r-sm);background:var(--shop-surface-2)}
.shop-media-pending{width:100%;aspect-ratio:1/1;display:grid;place-items:center;border-radius:var(--shop-r-sm);background:var(--shop-surface-2);color:var(--shop-ink-2);font-size:var(--shop-t-label)}

/* ── PARTE B · la superficie del vendedor (.shop-seller) ───────────────── */
/* Letra de trabajo y escala de paneles (D3, D11). El logotipo conserva
   Bricolage: .shop-logo lee --shop-font-display (§7). Los campos a 16. */
/* body.shop-body (§2) pesa (0,1,1): la superficie del vendedor tiene que
   pesar mas para que Inter gane (lo pillo el render: salia Geist). */
body.shop-body.shop-seller{font-family:var(--shop-font-panel);font-size:var(--shop-p-body);font-weight:var(--shop-peso-cuerpo)}
.shop-seller .shop-h1{font-family:var(--shop-font-panel);font-size:var(--shop-p-screen);letter-spacing:normal;
  margin:0 0 var(--shop-s2)}
.shop-seller .shop-h1:focus{outline:none}
.shop-seller .shop-h2{font-family:var(--shop-font-panel);font-size:var(--shop-p-title);letter-spacing:normal}
.shop-seller .shop-h3{font-family:var(--shop-font-panel);font-size:var(--shop-p-body);letter-spacing:normal}
.shop-seller .shop-lede{font-size:var(--shop-p-body)}
.shop-seller .shop-note,.shop-seller .shop-label{font-size:var(--shop-p-second)}
.shop-seller .shop-btn,.shop-seller .shop-signout,.shop-seller .shop-lang-switch{font-family:var(--shop-font-panel)}
.shop-seller .shop-input,.shop-seller .shop-select{font-family:var(--shop-font-panel);font-size:var(--shop-p-input)}
.shop-seller .shop-table{font-size:var(--shop-p-second)}
/* Cabeceras de tabla sin mayusculas (la escala de paneles). */
.shop-seller .shop-table th{font-size:var(--shop-p-label);text-transform:none;letter-spacing:normal}
.shop-seller .shop-pill{font-size:var(--shop-p-label)}
.shop-seller .shop-card-sub{font-size:var(--shop-p-label)}
.shop-seller .shop-notice p{font-size:var(--shop-p-second)}
.shop-seller .shop-main{padding-top:var(--shop-s6);padding-bottom:calc(var(--shop-pbar-h) + var(--shop-s6) + env(safe-area-inset-bottom,0))}
/* Un boton desactivado SE LEE desactivado (el «Anterior» de la pagina 1). */
.shop-seller .shop-btn:disabled,.shop-seller .shop-btn-secondary:disabled{background:var(--shop-surface-2);
  border-color:var(--shop-rule);color:var(--shop-ink-3);cursor:not-allowed}
/* EL SELECTOR DE FOTO CON NUESTRO TEXTO: el control nativo pinta el idioma
   del sistema («Seleccionar archivo»), no el del vendedor. El campo se queda
   (accesible y enfocable); lo que se ve es su etiqueta con forma de boton. */
.shop-pfile{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:var(--shop-s3)}
.shop-pfile input:focus-visible+label{outline:var(--shop-focus-w) solid var(--shop-red);outline-offset:var(--shop-focus-w)}
.shop-pfile-name{color:var(--shop-ink-2);font-size:var(--shop-p-second);overflow-wrap:anywhere}

/* MENU DEL PANEL (D7): de 6 a 9 destinos no caben en una barra inferior de 5,
   asi que es el nav lateral del kit (kit.css .ba-sidebar). Bajo 1024 es un
   CAJON que se abre desde la cabecera y cuelga debajo de ella (el boton
   sigue a la vista para cerrarlo); desde 1024, fijo a la izquierda y el
   contenido se aparta. Cerrado es `visibility:hidden`: sus enlaces no se
   alcanzan con el tabulador ni los lee el lector de pantalla. */
.shop-pnav-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--shop-s2);
  min-height:var(--shop-tap);min-width:var(--shop-tap);padding:0 var(--shop-s3);
  border:var(--shop-hair) solid var(--shop-rule);border-radius:var(--shop-r-sm);background:none;color:var(--shop-ink);
  font:inherit;font-size:var(--shop-p-second);font-weight:var(--shop-fw-strong);cursor:pointer}
.shop-pnav-btn:hover{background:var(--shop-surface-2)}
.shop-pnav-btn svg{width:var(--shop-p-icon);height:var(--shop-p-icon);stroke:currentColor;fill:none;
  stroke-width:var(--shop-p-icon-stroke);stroke-linecap:round}
.shop-pnav{position:fixed;top:var(--shop-cabecera-h);bottom:0;left:0;z-index:var(--shop-z-pnav);
  width:var(--shop-pnav-w);max-width:100%;overflow-y:auto;
  display:flex;flex-direction:column;gap:var(--shop-s1);
  padding:var(--shop-s4) var(--shop-s3) calc(var(--shop-s4) + env(safe-area-inset-bottom,0));
  background:var(--shop-surface);border-right:var(--shop-hair) solid var(--shop-rule);box-shadow:var(--shop-shadow-card);
  transform:translateX(-100%);visibility:hidden;
  transition:transform var(--shop-m-std) var(--shop-ease),visibility 0s linear var(--shop-m-std)}
.shop-pnav[data-open="true"]{transform:none;visibility:visible;transition:transform var(--shop-m-std) var(--shop-ease)}
.shop-scope .shop-pnav-link{display:flex;align-items:center;min-height:var(--shop-tap);padding:0 var(--shop-s3);
  border-radius:var(--shop-r-sm);color:var(--shop-ink);font-size:var(--shop-p-second);font-weight:var(--shop-fw-strong)}
.shop-scope .shop-pnav-link:hover{background:var(--shop-surface-2)}
.shop-scope .shop-pnav-link[aria-current="page"]{background:var(--shop-surface-2);color:var(--shop-red-dark)}
.shop-pnav-scrim{position:fixed;left:0;right:0;bottom:0;top:var(--shop-cabecera-h);z-index:var(--shop-z-scrim);
  background:var(--shop-overlay)}
@media (min-width:1024px){
  .shop-pnav-btn,.shop-pnav-scrim{display:none}
  .shop-pnav{transform:none;visibility:visible;box-shadow:none;transition:none}
  .shop-seller .shop-main,.shop-seller .shop-footer{margin-left:var(--shop-pnav-w)}
}

/* FILAS APILADAS BAJO 640 (hallazgo de la nº 6: 7 tablas desbordaban su caja,
   la mayor con 1.484 px de contenido en 333). Cada celda trae su etiqueta en
   `data-label` (js/shop-panel.js table()); la cabecera se queda para el
   lector de pantalla. */
@media (max-width:640px){
  .shop-seller .shop-table-wrap{overflow:visible;border:0;background:none;border-radius:0}
  .shop-seller .shop-table thead{position:absolute;width:var(--shop-hair);height:var(--shop-hair);overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .shop-seller .shop-table,.shop-seller .shop-table tbody,.shop-seller .shop-table tr,.shop-seller .shop-table td{display:block;width:100%}
  .shop-seller .shop-table tr{border:var(--shop-hair) solid var(--shop-rule);border-radius:var(--shop-r-md);background:var(--shop-surface);
    margin-bottom:var(--shop-s3);padding:var(--shop-s2) 0}
  .shop-seller .shop-table td,.shop-seller .shop-table tbody tr:last-child td{display:flex;justify-content:space-between;align-items:center;gap:var(--shop-s3);
    border:0;white-space:normal;overflow-wrap:anywhere;padding:var(--shop-s1) var(--shop-s4);text-align:right}
  .shop-seller .shop-table td::before{content:attr(data-label);flex:none;color:var(--shop-ink-3);
    font-size:var(--shop-p-label);font-weight:var(--shop-fw-strong);text-align:left}
}

/* CARGANDO, VACIO Y ERROR (SISTEMA-DISENO §8): esqueleto, vacio con titulo,
   frase y accion, y el error siempre con «Reintentar». */
.shop-psk{display:grid;gap:var(--shop-s3);padding:var(--shop-s3) 0}
.shop-psk-line{display:block;height:var(--shop-s10);border-radius:var(--shop-r-sm)}
.shop-psk-short{width:var(--shop-p-sk-short)}
.shop-pempty{padding:var(--shop-s6) var(--shop-s5);border:var(--shop-hair) solid var(--shop-rule);border-radius:var(--shop-r-md);
  background:var(--shop-surface);margin:0 0 var(--shop-s4)}
.shop-pempty-t{font-weight:var(--shop-fw-title);font-size:var(--shop-p-body);color:var(--shop-ink);margin:0 0 var(--shop-s1)}
.shop-pempty-p{color:var(--shop-ink-2);font-size:var(--shop-p-second);margin:0}
.shop-pempty-a{margin-top:var(--shop-s4)}
/* EL VACIO DE UNA TABLA MIDE UNA FILA (decision de Abraham del 2026-09-30,
   COLA:9322; .ba-table-empty del kit, PR #139). js/shop-panel.js pinta la
   cabecera y la fila del ESQUELETO de la zona como fantasma: sus celdas no
   se ven ni se leen, y el mensaje va encima, sin ocupar sitio. La zona mide
   lo mismo con el esqueleto, con datos y vacia: a 1024, la fila del
   esqueleto (con su pastilla o su boton); bajo 640, la tarjeta apilada, con
   el mensaje centrado en ella. */
.shop-pvacia td{visibility:hidden}
.shop-pvacia td:first-child{position:relative}
/* Y NO SE DESPLAZA: una tabla vacia no tiene nada que desplazar. La de
   Importar (seis columnas) no cabia en su caja de 641 a 1024 px (medido: +15
   a +244 px, lo mismo que su esqueleto), y una zona desplazable sin nada que
   enfocar es un fallo de axe (scrollable-region-focusable, medido en ES a
   1024). Columnas iguales, la cabecera en una linea con «…» si no cabe, y lo
   fantasma recortado en su celda: el alto no cambia. */
.shop-ptabla-vacia{table-layout:fixed}
.shop-ptabla-vacia th{overflow:hidden;text-overflow:ellipsis}
.shop-pvacia td:not(:first-child){overflow:hidden}
.shop-pvacia-msg{visibility:visible;position:absolute;top:0;bottom:0;left:0;margin:0;padding:0 var(--shop-p-cell-x);
  display:flex;align-items:center;white-space:nowrap;color:var(--shop-ink-2);font-size:var(--shop-p-second);line-height:var(--shop-lh)}
@media (max-width:640px){
  .shop-seller .shop-pvacia{position:relative}
  .shop-seller .shop-pvacia td:first-child{position:static}
  .shop-seller .shop-pvacia-msg{right:0;justify-content:center;text-align:center;white-space:normal;padding:0 var(--shop-s4)}
}

/* EL MENSAJE JUNTO AL BOTON (hallazgo 4: el resultado se ve donde se toco). */
.shop-pmsg{margin:0;font-size:var(--shop-p-second);color:var(--shop-ink-2);line-height:var(--shop-lh)}
.shop-pmsg:empty{display:none}
.shop-pmsg[data-kind="error"]{color:var(--shop-err)}
.shop-pmsg[data-kind="ok"]{color:var(--shop-st-ok-fg)}
[data-flash="true"]{animation:shop-flash var(--shop-m-flash) var(--shop-ease)}
@keyframes shop-flash{from{background:var(--shop-st-ok-bg)}to{background:var(--shop-surface)}}

/* D18: en un producto APROBADO, datos y fotos de solo lectura, con su aviso. */
.shop-plock{padding:var(--shop-s3) var(--shop-s4);border:var(--shop-hair) solid var(--shop-st-wait-line);border-radius:var(--shop-r-md);
  background:var(--shop-ember-soft);color:var(--shop-ink);font-size:var(--shop-p-second);line-height:var(--shop-lh);
  margin:0 0 var(--shop-s4)}

/* LA LISTA DEL CATALOGO: filtros, busqueda, filas que llevan al producto y
   paginas. La fila entera es el enlace (su ::after, dentro de una fila
   POSICIONADA: la leccion del hallazgo 1). */
.shop-phead{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--shop-s3);
  margin-bottom:var(--shop-s4)}
.shop-pchips{display:flex;gap:var(--shop-s2);overflow-x:auto;padding-bottom:var(--shop-s1);margin:0 0 var(--shop-s3)}
.shop-pchip{flex:none;display:inline-flex;align-items:center;gap:var(--shop-s1);min-height:var(--shop-tap);
  padding:0 var(--shop-s4);border:var(--shop-hair) solid var(--shop-rule);border-radius:var(--shop-r-pill);
  background:var(--shop-surface);color:var(--shop-ink-2);font:inherit;font-size:var(--shop-p-second);
  font-weight:var(--shop-fw-strong);cursor:pointer}
.shop-pchip[aria-pressed="true"]{background:var(--shop-ink);border-color:var(--shop-ink);color:var(--shop-on-ink)}
.shop-psearch{display:flex;gap:var(--shop-s2);margin:0 0 var(--shop-s4)}
.shop-psearch .shop-input{flex:1 1 auto;min-width:0}
.shop-plist{list-style:none;margin:0;padding:0;display:grid;gap:var(--shop-s2)}
.shop-prow{position:relative;display:grid;grid-template-columns:var(--shop-p-thumb) minmax(0,1fr);gap:var(--shop-s3);
  align-items:center;padding:var(--shop-s3);border:var(--shop-hair) solid var(--shop-rule);border-radius:var(--shop-r-md);
  background:var(--shop-surface)}
.shop-prow:hover{border-color:var(--shop-rule-firm)}
.shop-prow:focus-within{outline:var(--shop-focus-w) solid var(--shop-red);outline-offset:var(--shop-focus-w)}
.shop-prow-thumb{width:var(--shop-p-thumb);height:var(--shop-p-thumb);border-radius:var(--shop-r-sm);
  background:var(--shop-surface-2);display:flex;align-items:center;justify-content:center;overflow:hidden;
  color:var(--shop-ink-3);font-size:var(--shop-p-label)}
.shop-prow-thumb img{width:100%;height:100%;object-fit:cover}
.shop-prow-main{min-width:0;display:grid;gap:var(--shop-s1)}
.shop-scope .shop-prow-link{font-weight:var(--shop-fw-strong);color:var(--shop-ink);overflow-wrap:anywhere}
.shop-scope .shop-prow-link:focus-visible{outline:none}
.shop-prow-link::after{content:"";position:absolute;inset:0}
.shop-prow-meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--shop-s1) var(--shop-s3);
  color:var(--shop-ink-2);font-size:var(--shop-p-second)}
.shop-pmiss{color:var(--shop-st-wait-fg);font-size:var(--shop-p-second)}
.shop-pager{display:flex;align-items:center;justify-content:space-between;gap:var(--shop-s3);margin-top:var(--shop-s4)}
.shop-pager-n{color:var(--shop-ink-2);font-size:var(--shop-p-second)}

/* BARRA DE ACCION FIJA ABAJO, con el margen seguro del iPhone: la accion
   principal ya no se pierde en medio de la pagina. */
.shop-pbar{position:fixed;left:0;right:0;bottom:0;z-index:var(--shop-z-pbar);
  display:flex;align-items:center;justify-content:flex-end;gap:var(--shop-s3);
  padding:var(--shop-s3) var(--shop-s4) calc(var(--shop-s3) + env(safe-area-inset-bottom,0));
  background:var(--shop-surface);border-top:var(--shop-hair) solid var(--shop-rule)}
.shop-pbar-note{margin-right:auto;color:var(--shop-ink-2);font-size:var(--shop-p-second)}
.shop-pbar .shop-btn{flex:0 1 auto}
@media (max-width:640px){ .shop-pbar .shop-btn{flex:1 1 0} }
@media (min-width:1024px){ .shop-pbar{left:var(--shop-pnav-w)} }

/* LA PAGINA DEL PRODUCTO: volver, cabecera, pestañas y secciones. */
.shop-scope .shop-pback{display:inline-flex;align-items:center;min-height:var(--shop-tap);color:var(--shop-ink-2);
  font-size:var(--shop-p-second);font-weight:var(--shop-fw-strong)}
.shop-pphead{display:grid;gap:var(--shop-s2);margin-bottom:var(--shop-s2)}
.shop-ptabs{display:flex;gap:var(--shop-s1);border-bottom:var(--shop-hair) solid var(--shop-rule);overflow-x:auto;margin:var(--shop-s4) 0}
.shop-ptab{flex:none;min-height:var(--shop-tap);padding:0 var(--shop-s4);border:0;
  border-bottom:var(--shop-focus-w) solid transparent;background:none;color:var(--shop-ink-2);
  font:inherit;font-size:var(--shop-p-second);font-weight:var(--shop-fw-strong);cursor:pointer}
.shop-ptab[aria-selected="true"]{color:var(--shop-ink);border-bottom-color:var(--shop-red)}
/* Una columna que NO crece con su contenido: una tabla ancha se desplaza
   dentro de su caja en vez de empujar la pagina (lo pillo el render: la
   pestaña Existencias medía 1.183 px a 1024). */
.shop-ppanel{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--shop-s4)}

/* LOS PASOS DEL ALTA (se reutiliza .shop-step del pago para cada paso). */
/* POSICIONADA a proposito: el texto para el lector de pantalla de cada paso
   (.shop-sr, absoluto) quedaba fuera de la lista con desplazamiento y
   ensanchaba el documento a 409 px en un iPhone de 375 (lo pillo el render). */
.shop-psteps{position:relative;list-style:none;margin:0 0 var(--shop-s4);padding:0;display:flex;gap:var(--shop-s1);overflow-x:auto}
.shop-pstep{flex:none;display:flex;align-items:center;gap:var(--shop-s2);min-height:var(--shop-tap);
  padding:0 var(--shop-s3);border-radius:var(--shop-r-pill);color:var(--shop-ink-3);
  font-size:var(--shop-p-label);font-weight:var(--shop-fw-strong)}
.shop-pstep[aria-current="step"]{background:var(--shop-surface-2);color:var(--shop-ink)}
.shop-pstep[data-done="true"]{color:var(--shop-st-ok-fg)}

/* FORMULARIOS DEL PANEL: una columna de lectura; dos o cuatro campos por fila
   donde caben (bulto y tamaño). */
.shop-pform{display:grid;gap:var(--shop-s2);max-width:var(--shop-p-form-w)}
.shop-pform .shop-label{margin-top:var(--shop-s2)}
.shop-pgrid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--shop-s3)}
.shop-pgrid4{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--shop-s3)}
@media (min-width:1024px){ .shop-pgrid4{grid-template-columns:repeat(4,minmax(0,1fr))} }
.shop-pfield{display:grid;gap:var(--shop-s1);min-width:0}
.shop-pactions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--shop-s3);margin-top:var(--shop-s2)}

/* SI / NO (D-C1, «el Sí/No de inflamable pasa a dos botones»): dos botones
   de 44, no dos radios de 13 × 13. */
.shop-yesno{display:inline-flex;border:var(--shop-hair) solid var(--shop-rule-firm);border-radius:var(--shop-r-pill);overflow:hidden}
.shop-yesno button{min-height:var(--shop-tap);min-width:var(--shop-p-yesno-w);padding:0 var(--shop-s5);border:0;
  background:var(--shop-surface);color:var(--shop-ink);font:inherit;font-weight:var(--shop-fw-strong);cursor:pointer}
.shop-yesno button+button{border-left:var(--shop-hair) solid var(--shop-rule-firm)}
.shop-yesno button[aria-pressed="true"]{background:var(--shop-ink);color:var(--shop-on-ink)}
.shop-yesno button:disabled{color:var(--shop-ink-3);cursor:not-allowed}

/* LAS VARIANTES: una ficha por variante, con su precio, su bulto y sus
   existencias en la misma ficha (sin teclear ningun identificador). */
.shop-pvars{list-style:none;margin:0;padding:0;display:grid;gap:var(--shop-s3)}
.shop-pvar{display:grid;gap:var(--shop-s3);padding:var(--shop-s4);border:var(--shop-hair) solid var(--shop-rule);
  border-radius:var(--shop-r-md);background:var(--shop-surface)}
.shop-pvar-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--shop-s2)}
.shop-pvar-sku{font-weight:var(--shop-fw-strong);overflow-wrap:anywhere}
.shop-pvar-opts{color:var(--shop-ink-2);font-size:var(--shop-p-second)}
.shop-pvar-row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--shop-s2)}
.shop-pvar-row .shop-pfield{flex:1 1 var(--shop-p-price-w)}
.shop-pvar-row .shop-btn{flex:none}
.shop-pvar details>summary{min-height:var(--shop-tap);display:flex;align-items:center;cursor:pointer;
  font-weight:var(--shop-fw-strong);color:var(--shop-ink-2)}
/* RECEPCION DE MERCANCIA (V4 §35, Seller Center «Receiving»): las lineas de
   una recepcion dentro de su ficha — que, cuantas y su coste PRIVADO. */
.shop-rcv-lines{list-style:none;margin:0;padding:0;display:grid;gap:var(--shop-s1)}
.shop-rcv-line{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--shop-s1) var(--shop-s3);
  font-size:var(--shop-p-second);color:var(--shop-ink-2);line-height:var(--shop-lh)}
.shop-rcv-what{flex:1 1 var(--shop-p-price-w);min-width:0;color:var(--shop-ink);overflow-wrap:anywhere}
.shop-rcv-qty,.shop-rcv-cost{flex:none}
/* SIN PARPADEO DE IDIOMA (V1d; js/shop-lang-pre.js). Con el idioma guardado
   en español, el texto con data-i18n no se pinta hasta que client-i18n.js lo
   traduce (js/shop-panel.js quita la marca en DOMContentLoaded): visibility,
   que no mueve nada. Si el JavaScript no llegara, el texto aparece pasado
   --shop-i18n-tope, en su idioma de fabrica. */
html[data-shop-sin-traducir] [data-i18n],html[data-shop-sin-traducir] [data-i18n-placeholder]{visibility:hidden;
  animation-name:shop-i18n-revela;animation-delay:var(--shop-i18n-tope);animation-fill-mode:forwards}
@keyframes shop-i18n-revela{to{visibility:visible}}
/* ... Y EL CONTENIDO ENTERO ESPERA A ESTAR TRADUCIDO (V1d, sin salto). Al
   traducir, un texto que en español ocupa otra linea mueve lo de debajo; con
   el texto oculto eso no se veia, pero el esqueleto SI se ve y se moveria.
   Asi que en español <main> no se pinta hasta la traduccion (la misma marca
   y el mismo tope): aparece ya en su sitio. En ingles no cambia nada. */
html[data-shop-sin-traducir] main{visibility:hidden;
  animation-name:shop-i18n-revela;animation-delay:var(--shop-i18n-tope);animation-fill-mode:forwards}
/* EL ESQUELETO DESDE EL PRIMER PINTADO (V1d, liston: «estados vacio, cargando
   y error en cada pantalla»). Antes, cada zona que llena el servidor nacia
   VACIA y al llegar los datos empujaba lo de abajo (medido con sesion, en
   Chrome: Centro 0,247, Pedidos 0,206, Importar 0,163). Ahora cada zona trae
   en el HTML su esqueleto con las MISMAS piezas que lo que llega (la ficha,
   la fila, el aviso, el formulario), y el hueco queda reservado desde el
   primer pintado. Dos esqueletos por pantalla: [data-shop-sk="sesion"] (lo
   que llega con sesion) y [data-shop-sk="anon"] (el aviso de identificarse);
   la pista la pone js/shop-lang-pre.js y la corrige js/shop-panel.js en
   cuanto sabe. Todo esqueleto es aria-hidden y su zona lleva aria-busy: el
   lector no oye ninguna pieza vacia. */
html:not([data-shop-sesion]) [data-shop-sk="sesion"],html[data-shop-sesion] [data-shop-sk="anon"]{display:none}
[data-shop-sk]{pointer-events:none;user-select:none}
/* Una linea del esqueleto: el TEXTO FIJO va escrito (con su data-i18n, asi
   que parte las lineas igual que el de verdad en los dos idiomas) pero
   invisible; lo que es DATO va como barra. Los campos miden lo del control:
   el alto de linea `normal` de un <select> o un <input>. */
[data-shop-sk] .shop-sk{background-color:var(--shop-surface-3);background-image:var(--shop-sk-brillo);
  background-size:var(--shop-sk-tam);animation:var(--shop-sk-anim);border-color:transparent;box-shadow:none;color:transparent}
[data-shop-sk] .shop-input{line-height:normal}
[data-shop-sk] .shop-psk-sino{display:inline-flex;align-items:center;justify-content:center;min-height:var(--shop-tap);
  min-width:var(--shop-p-yesno-w);padding:0 var(--shop-s5);font-weight:var(--shop-fw-strong)}
[data-shop-sk] .shop-psk-in,.shop-pvacia .shop-psk-in{display:inline-block}
[data-shop-sk] .shop-psk-campo{display:block}
[data-shop-sk] .shop-psk-mid,.shop-pvacia .shop-psk-mid{width:var(--shop-p-sk-mid)}
[data-shop-sk] .shop-psk-long,.shop-pvacia .shop-psk-long{width:var(--shop-p-sk-long)}
[data-shop-sk] .shop-psk-pill,.shop-pvacia .shop-psk-pill{min-width:var(--shop-p-sk-pill)}
[data-shop-sk] .shop-psk-btn,.shop-pvacia .shop-psk-btn{min-width:var(--shop-p-sk-btn)}
.shop-seller .shop-main{min-height:var(--shop-p-main-min)}
@media (prefers-reduced-motion:reduce){ [data-shop-sk] .shop-sk{animation:none;background-image:none} }
/* ══ FIN PANELES V1d ══ */

/* ═══════════════════════════════════════════════════════════════════════════
   26. LO QUE ANTES ERA style="" EN LAS PAGINAS Y EN LOS ARRANQUES
   CSS externo, sin estilos en linea (convencion de CLAUDE.md). Son las 32
   declaraciones que vivian en atributos style de pages/shop/*.html (17),
   pages/shop/boot/*.js (14) y js/shop-ui.js (1), MOVIDAS TAL CUAL: el mismo
   valor en pixeles, escrito con el paso de la escala cuando lo hay (8 = s2,
   12 = s3, 16 = s4, 20 = s5, 24 = s6). No hay ni un valor nuevo aqui, salvo
   la proporcion del esqueleto de la ficha, que sigue a la foto (4:3).

   VAN AL FINAL A PROPOSITO. Un style="" ganaba a cualquier regla; estas
   clases (0,1,0) ganan a las de su mismo peso por ir despues, incluidas las
   de .shop-band y .shop-line dentro de @media, que son las que sustituian.
   ═══════════════════════════════════════════════════════════════════════ */

/* Aire: la banda que va pegada a la anterior, y los margenes sueltos. */
.shop-pt-0{padding-top:0}
.shop-pt-s2{padding-top:var(--shop-s2)}
.shop-pt-s6{padding-top:var(--shop-s6)}
.shop-mt-s4{margin-top:var(--shop-s4)}
.shop-mt-s5{margin-top:var(--shop-s5)}
.shop-mb-s3{margin-bottom:var(--shop-s3)}
.shop-mb-s5{margin-bottom:var(--shop-s5)}

/* Campos que no deben estirarse a todo el ancho. */
.shop-w-120{max-width:120px}
.shop-w-140{max-width:140px}
.shop-w-220{max-width:220px}

/* Fila de controles que se parte en dos lineas si no cabe (estado + ZIP). */
.shop-row-wrap{display:flex;gap:var(--shop-s2);flex-wrap:wrap;align-items:center}

/* Fila de listing del escaparate: titulo y enlace, sin columna de miniatura. */
.shop-line-listing{grid-template-columns:1fr auto}

/* Esqueletos con la forma de lo que viene. El de la media de la ficha lleva
   los mismos topes que la media real en una columna (§13), para que la carga
   no salte (SISTEMA-DISENO 6, :335). */
.shop-sk-pdp-media{aspect-ratio:4/3;border-radius:var(--shop-r-lg);
  width:100%;max-height:min(58vh,440px);min-height:260px}
@media (min-width:1024px){ .shop-sk-pdp-media{max-height:none;min-height:0} }
.shop-sk-buy{height:220px;border-radius:var(--shop-r-lg)}
.shop-sk-ok{height:240px;border-radius:var(--shop-r-lg)}
.shop-sk-chip{height:38px;width:110px;border-radius:var(--shop-r-pill)}
.shop-sk-cat{min-height:104px}
.shop-sk-h12{height:12px}
.shop-sk-h30{height:30px;margin-bottom:var(--shop-s5)}
.shop-sk-h34{height:34px;margin-bottom:var(--shop-s6)}
.shop-sk-h38{height:38px}
.shop-sk-h44{height:44px}
.shop-sk-h56{height:56px}
.shop-sk-h140{height:140px}

/* ═══════════════════════════════════════════════════════════════════════════
   27. PORTADA PREMIUM (V4 MB-C, 2026-10-06) — pages/shop/index.html

   La peticion del dueño: que la portada se sienta como una app de perfumeria
   premium, limpia y para comprar, con la arquitectura real de Big Asere. La
   referencia visual es UX/UI, no datos: aqui no hay estrellas, ni «mas
   populares», ni promociones, ni marcas de terceros (ACTA SHOP-020 puntos
   14, 15, 17; G6 en la agenda del abogado). Lo que se pinta sale del
   servidor: categorias de `taxonomy`, productos de `search` (ya sin
   agotados), colecciones de `collections`.

   TEMA: cada valor va por var(--shop-theme-*, respaldo del sistema). El tema
   vive en css/shop-tema.css (solo tokens) y lo carga la portada; sin el, la
   pieza oscura es la tinta del kit y el display la pila del sistema.
   Los cortes son los dos del sistema (640 / 1024). Sin degradados, sin halo.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 27.1 Cabecera: la marca «Big Asere Shop» ─────────────────────────── */
/* «Shop» pegado al logotipo del kit, pequeño, en mayusculas espaciadas y en
   tinta: el nombre del producto (peticion del dueño 2026-10-06: «marca Big
   Asere Shop»). No se traduce (translate="no", como «Services»). */
.shop-logo-tag{
  margin-left:var(--shop-s2);font-family:var(--shop-font-body-tienda);
  font-size:var(--shop-t-micro);font-weight:600;letter-spacing:var(--shop-theme-tracking,.16em);
  text-transform:uppercase;color:var(--shop-ink-2);align-self:center;
}

/* ── 27.2 Heroe oscuro con el buscador dentro ─────────────────────────── */
.shop-home-hero{
  position:relative;background:var(--shop-theme-ink,var(--shop-ink));
  color:var(--shop-theme-on-ink,var(--shop-on-ink));overflow:hidden;
}
.shop-home-hero-in{
  position:relative;display:grid;gap:var(--shop-s8);
  padding-block:var(--shop-s5) var(--shop-s10);
}
.shop-home-copy{display:grid;gap:var(--shop-s4);align-content:center}
.shop-home-hero .shop-eyebrow{
  color:var(--shop-theme-accent,var(--shop-ember));margin:0;
  letter-spacing:var(--shop-theme-tracking,.18em);
}
.shop-scope .shop-home-title{
  font-family:var(--shop-theme-font-display,var(--shop-font-display));
  font-weight:400;font-size:var(--shop-theme-t-hero,var(--shop-titular));
  line-height:var(--shop-theme-lh-title,1.05);letter-spacing:-.01em;
  margin:0;max-width:12ch;color:var(--shop-theme-on-ink,var(--shop-on-ink));
}
.shop-home-title em{font-style:italic;color:var(--shop-theme-accent,var(--shop-ember))}
.shop-home-actions{display:flex;flex-wrap:wrap;gap:var(--shop-s3);margin-top:var(--shop-s2)}
/* El boton del heroe: acento calido con la tinta encima (8,5:1), pill. */
.shop-scope .shop-btn-hero{
  min-height:var(--shop-theme-btn-h,var(--shop-tap));padding:0 var(--shop-s6);
  background:var(--shop-theme-accent,var(--shop-ember));
  color:var(--shop-theme-accent-ink,var(--shop-ink));
  border:1px solid transparent;border-radius:var(--shop-r-pill);
  font-weight:600;font-size:var(--shop-t-body);
}
.shop-scope .shop-btn-hero:hover{background:var(--shop-theme-on-ink,var(--shop-surface))}
.shop-home-hero .shop-btn-hero:focus-visible{
  outline:2px solid var(--shop-theme-on-ink,var(--shop-on-ink));outline-offset:3px;
}

/* ── 27.3 Categorias en circulos (fila que se desplaza) ───────────────── */
.shop-cat-row{
  display:flex;gap:var(--shop-s5);overflow-x:auto;scrollbar-width:none;
  -webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;
  padding:var(--shop-s1) var(--shop-s1) var(--shop-s2);margin-inline:calc(var(--shop-s1)*-1);
}
.shop-cat-row::-webkit-scrollbar{display:none}
.shop-cat-circle{
  flex:none;scroll-snap-align:start;display:flex;flex-direction:column;
  align-items:center;gap:var(--shop-s2);width:var(--shop-theme-cat-size,64px);
  min-width:var(--shop-tap);text-align:center;color:var(--shop-ink);
}
/* El disco: crema del tema con la inicial en display. Las categorias NO
   traen imagen (shop_categories no tiene esa columna), asi que el
   tratamiento es tipografico; si un dia la traen, cambia solo index.js. */
.shop-cat-disc{
  display:flex;align-items:center;justify-content:center;
  width:var(--shop-theme-cat-size,64px);height:var(--shop-theme-cat-size,64px);
  border-radius:var(--shop-theme-r-pill,var(--shop-r-pill));
  background:var(--shop-theme-cream,var(--shop-warm));
  border:1px solid var(--shop-theme-line,var(--shop-rule));
  font-family:var(--shop-theme-font-display,var(--shop-font-display));
  font-size:var(--shop-titulo-seccion);color:var(--shop-ink);
  transition:border-color var(--shop-m-std) var(--shop-ease),background var(--shop-m-std) var(--shop-ease);
}
.shop-cat-circle:hover .shop-cat-disc{border-color:var(--shop-ink);background:var(--shop-surface)}
.shop-cat-circle:focus-visible{outline:2px solid var(--shop-ink);outline-offset:3px;border-radius:var(--shop-r-sm)}
.shop-cat-circle-name{
  font-size:var(--shop-t-meta);font-weight:500;line-height:1.25;color:var(--shop-ink-2);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  overflow-wrap:anywhere;
}
.shop-sk-circle{
  width:var(--shop-theme-cat-size,64px);height:var(--shop-theme-cat-size,64px);
  border-radius:var(--shop-theme-r-pill,var(--shop-r-pill));flex:none;
}
@media (min-width:1024px){
  .shop-cat-row{gap:var(--shop-s8)}
  .shop-cat-circle,.shop-cat-disc,.shop-sk-circle{width:var(--shop-theme-cat-size-wide,88px)}
  .shop-cat-disc,.shop-sk-circle{height:var(--shop-theme-cat-size-wide,88px)}
  .shop-cat-circle-name{font-size:var(--shop-t-label)}
}

/* ── 27.4 Titulos de seccion de la portada, en el display del tema ────── */
.shop-scope .shop-home-section-title{
  font-family:var(--shop-theme-font-display,var(--shop-font-display));
  font-weight:400;font-size:var(--shop-theme-t-section,var(--shop-titulo-seccion));
  letter-spacing:0;
}

/* ── 27.5 Colecciones: bandas oscuras, solo con datos ─────────────────── */
/* La seccion entera nace [hidden] en el HTML y solo la destapa index.js si
   el servidor devuelve al menos una coleccion con productos. Sin datos no
   hay esqueleto ni estado vacio: silencio. */
.shop-coll-list{display:grid;gap:var(--shop-s4)}
.shop-coll-band{
  position:relative;display:grid;grid-template-columns:minmax(0,1fr) 40%;
  gap:var(--shop-s4);align-items:center;min-height:180px;
  padding:var(--shop-s6);border-radius:var(--shop-r-lg);overflow:hidden;
  background:var(--shop-theme-ink,var(--shop-ink));color:var(--shop-theme-on-ink,var(--shop-on-ink));
}
.shop-coll-band .shop-eyebrow{color:var(--shop-theme-accent,var(--shop-ember));margin-bottom:var(--shop-s2)}
.shop-scope .shop-coll-title{
  font-family:var(--shop-theme-font-display,var(--shop-font-display));
  font-weight:400;font-size:var(--shop-theme-t-band,var(--shop-titulo-editorial));
  line-height:var(--shop-theme-lh-title,1.1);letter-spacing:0;margin:0 0 var(--shop-s4);
  color:var(--shop-theme-on-ink,var(--shop-on-ink));overflow-wrap:anywhere;
}
.shop-coll-band .shop-btn{
  background:var(--shop-theme-on-ink,var(--shop-surface));color:var(--shop-theme-ink,var(--shop-ink));
  border-color:transparent;border-radius:var(--shop-r-pill);
}
.shop-coll-band .shop-btn:hover{background:var(--shop-theme-accent,var(--shop-ember))}
.shop-coll-band .shop-btn:focus-visible{outline:2px solid var(--shop-theme-on-ink,var(--shop-on-ink));outline-offset:3px}
.shop-coll-visual{
  aspect-ratio:1/1;border-radius:var(--shop-r-md);overflow:hidden;
  background:var(--shop-theme-ink-2,var(--shop-ink));
}
.shop-coll-visual img{width:100%;height:100%;object-fit:cover;display:block}
/* Sin foto en ningun producto de la coleccion: la banda es tipografica y la
   columna de la foto se retira (no hay un hueco oscuro vacio). */
.shop-coll-band[data-visual="none"]{grid-template-columns:minmax(0,1fr)}
.shop-coll-band[data-visual="none"] .shop-coll-visual{display:none}
/* El enlace cubre la banda entera; el boton visible es la etiqueta. */
.shop-coll-band > a.shop-coll-cover::after{content:"";position:absolute;inset:0}
@media (min-width:1024px){
  .shop-coll-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--shop-s6)}
  .shop-coll-band{min-height:260px;padding:var(--shop-s10)}
}

/* ── 27.6 Cabecera de la portada (referencia definitiva, 2026-10-06) ──── */
/* La marca centrada («Big» en tinta, «Asere» en el rojo de marca), el
   selector de secciones y el buscador. La nav de texto y el carrito solo
   desde 1024 (alli la barra inferior se retira): nunca las dos a la vez. */
.shop-home-header{position:relative}
.shop-home-header .shop-header-in{justify-content:center}
.shop-home-header-in{display:grid;gap:var(--shop-s3);padding-block:0 var(--shop-s4)}
.shop-home-brandrow{flex:1 1 auto;display:flex;align-items:center;justify-content:center;gap:var(--shop-s4)}
.shop-scope .shop-home-logo{color:var(--shop-ink);font-size:var(--shop-t-total)}
.shop-home-logo-accent{color:var(--shop-red)}
.shop-home-header .shop-header-nav{margin-left:auto}
.shop-sections{
  display:flex;justify-self:center;gap:var(--shop-s1);padding:var(--shop-s1);
  border:1px solid var(--shop-rule);border-radius:var(--shop-r-pill);background:var(--shop-surface);
}
.shop-sections-tab{
  display:inline-flex;align-items:center;justify-content:center;min-height:var(--shop-tap);
  padding:0 var(--shop-s5);border:0;border-radius:var(--shop-r-pill);background:transparent;
  font:inherit;font-size:var(--shop-t-label);font-weight:600;letter-spacing:var(--shop-theme-tracking,.08em);
  color:var(--shop-ink);cursor:pointer;
}
.shop-sections-tab[hidden]{display:none}
.shop-sections-tab[aria-current="page"]{
  background:var(--shop-theme-accent,var(--shop-ember));color:var(--shop-theme-accent-ink,var(--shop-ink));
}
.shop-sections-tab:hover{background:var(--shop-surface-sunken)}
.shop-sections-tab[aria-current="page"]:hover{background:var(--shop-theme-accent,var(--shop-ember))}
.shop-sections-tab:focus-visible{outline:2px solid var(--shop-ink);outline-offset:2px}
.shop-sections-notice{margin:0;text-align:center;font-size:var(--shop-t-label);color:var(--shop-ink-2)}
.shop-sections-notice[hidden]{display:none}
.shop-home-searchbar input{border-radius:var(--shop-r-pill);background:var(--shop-surface-sunken);border-color:transparent}
@media (min-width:1024px){
  .shop-home-brandrow{justify-content:space-between}
  .shop-home-header-in{grid-template-columns:auto 1fr;align-items:center;column-gap:var(--shop-s8)}
  .shop-sections{justify-self:start}
}

/* ── 27.7 Heroe desde datos: carrusel con encaje, sin avance automatico ─ */
.shop-hero-track{
  display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.shop-hero-track::-webkit-scrollbar{display:none}
.shop-hero-slide{position:relative;flex:0 0 100%;scroll-snap-align:start;min-height:320px;display:flex;align-items:center}
.shop-hero-slide .shop-home-hero-in{position:relative;z-index:1;width:100%}
/* La foto (si la pieza la trae) ocupa la mitad derecha; el texto, la
   izquierda sobre la tinta. En movil la foto queda detras del texto, a la
   derecha, y el texto conserva su contraste sobre la tinta. */
.shop-hero-media{position:absolute;top:0;right:0;bottom:0;width:55%}
.shop-hero-media img{width:100%;height:100%;object-fit:cover;display:block}
.shop-hero-slide[data-visual="photo"] .shop-home-copy{max-width:60%}
.shop-home-sub{margin:0;font-size:var(--shop-t-lede);line-height:1.5;color:var(--shop-theme-on-ink-muted,var(--shop-on-dark));max-width:40ch}
.shop-btn-hero svg,.shop-btn-band svg{width:18px;height:18px;margin-left:var(--shop-s2);stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.shop-hero-foot{display:grid;gap:var(--shop-s4);padding-bottom:var(--shop-s5)}
.shop-hero-foot:has(> [hidden] + [hidden]){display:none}
.shop-trust-row{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--shop-s3) var(--shop-s6)}
.shop-trust-row[hidden]{display:none}
.shop-trust-item{display:flex;align-items:center;gap:var(--shop-s2);font-size:var(--shop-t-label);line-height:1.3;color:var(--shop-theme-on-ink,var(--shop-on-ink))}
.shop-trust-item svg{flex:none;width:24px;height:24px;stroke:var(--shop-theme-accent,var(--shop-ember));fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.shop-hero-dots{display:flex;justify-content:center;gap:var(--shop-s2)}
.shop-hero-dots[hidden]{display:none}
.shop-hero-dot{
  width:var(--shop-tap);height:var(--shop-tap);padding:0;border:0;background:transparent;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
}
.shop-hero-dot::before{content:"";width:24px;height:4px;border-radius:var(--shop-r-pill);background:var(--shop-theme-line-on-ink,var(--shop-on-dark-line))}
.shop-hero-dot[aria-current="true"]::before{background:var(--shop-theme-accent,var(--shop-ember))}
.shop-hero-dot:focus-visible{outline:2px solid var(--shop-theme-on-ink,var(--shop-on-ink));outline-offset:-4px}
@media (min-width:1024px){
  .shop-hero-slide{min-height:420px}
  .shop-hero-media{width:45%}
}
@media (prefers-reduced-motion:reduce){ .shop-hero-track{scroll-behavior:auto} }

/* ── 27.8 Categoria con foto (dato de la portada) y «Todas» ───────────── */
.shop-cat-disc[data-visual="photo"]{overflow:hidden;padding:0}
.shop-cat-disc[data-visual="photo"] img{width:100%;height:100%;object-fit:cover;display:block}
.shop-cat-disc-all{background:var(--shop-theme-ink,var(--shop-ink));border-color:transparent}
.shop-cat-disc-all svg{width:28px;height:28px;stroke:var(--shop-theme-accent,var(--shop-ember));fill:none;stroke-width:1.6}

/* ── 27.9 Banner de coleccion desde datos ─────────────────────────────── */
.shop-home-band{
  position:relative;overflow:hidden;
  background:var(--shop-theme-ink,var(--shop-ink));color:var(--shop-theme-on-ink,var(--shop-on-ink));
}
.shop-home-band[hidden]{display:none}
.shop-home-band-media{position:absolute;top:0;right:0;bottom:0;width:50%}
.shop-home-band-media img{width:100%;height:100%;object-fit:cover;display:block}
.shop-home-band-in{position:relative;z-index:1;padding-block:var(--shop-s8)}
.shop-home-band-copy{display:grid;gap:var(--shop-s3);max-width:55%}
.shop-home-band[data-visual="none"] .shop-home-band-copy{max-width:none}
.shop-home-band .shop-eyebrow{color:var(--shop-theme-accent,var(--shop-ember));margin:0}
.shop-scope .shop-home-band-title{
  margin:0;font-family:var(--shop-theme-font-display,var(--shop-font-display));font-weight:400;
  font-size:var(--shop-theme-t-band,var(--shop-titulo-editorial));line-height:var(--shop-theme-lh-title,1.1);
  color:var(--shop-theme-on-ink,var(--shop-on-ink));overflow-wrap:anywhere;
}
.shop-scope .shop-btn-band{
  justify-self:start;min-height:var(--shop-tap);padding:0 var(--shop-s5);border-radius:var(--shop-r-pill);
  background:var(--shop-theme-on-ink,var(--shop-surface));color:var(--shop-theme-ink,var(--shop-ink));border-color:transparent;
}
.shop-scope .shop-btn-band:hover{background:var(--shop-theme-accent,var(--shop-ember))}
.shop-btn-band:focus-visible{outline:2px solid var(--shop-theme-on-ink,var(--shop-on-ink));outline-offset:3px}
@media (min-width:1024px){ .shop-home-band-in{padding-block:var(--shop-s16)} }

/* ── 27.10 Pie: la etiqueta «Shop» sobre la tinta (AA) ─────────────────── */
.shop-logo-footer .shop-logo-tag{color:var(--shop-on-ink)}


/* ── 27.11 Sin saltos al llegar el selector de idioma (liston, CLS) ──────
   js/shop-i18n.js monta el boton ES/EN al final de .shop-header-in. En la
   portada la marca va CENTRADA, y el boton la empujaba 24px a la izquierda
   (medido en la traza de Lighthouse). Aqui el boton va a la derecha sin
   ocupar sitio en la fila: la marca no se mueve. */
.shop-home-header .shop-header-in{position:relative}
.shop-home-header .shop-lang-switch{position:absolute;right:0;top:50%;transform:translateY(-50%)}

/* La fila de categorias tiene ALTO FIJO (liston, CLS): esqueleto, «Todos»
   solo y la fila completa miden lo mismo (disco + nombre en dos lineas). */
.shop-cat-row{min-height:calc(var(--shop-theme-cat-size,64px) + var(--shop-s2) + 2.5rem + var(--shop-s3))}
@media (min-width:1024px){ .shop-cat-row{min-height:calc(var(--shop-theme-cat-size-wide,88px) + var(--shop-s2) + 2.5rem + var(--shop-s3))} }

/* ── CUENTA (S6, pages/shop/cuenta.html) ────────────────────────────────
   Configuracion > Idioma y el enlace a Mis pedidos. Solo tokens. El
   conmutador ES/EN es un grupo de dos botones con aria-pressed (lo pinta
   boot/cuenta.js); cada uno de alto --shop-tap. */
.shop-acct-in{max-width:var(--shop-w-read)}
.shop-acct-h{font-size:var(--shop-t-label);font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--shop-ink-2);margin:0 0 var(--shop-s2)}
.shop-acct-card{background:var(--shop-surface);border:1px solid var(--shop-rule);border-radius:var(--shop-r-md)}
.shop-acct-list{list-style:none;margin:0;padding:0}
.shop-acct-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;
  gap:var(--shop-s3);padding:var(--shop-s3) var(--shop-s4)}
.shop-acct-label{font-size:var(--shop-t-body);color:var(--shop-ink)}
.shop-acct-seg{display:inline-flex;border:1px solid var(--shop-rule);border-radius:var(--shop-r-sm);overflow:hidden}
.shop-acct-opt{min-height:var(--shop-tap);min-width:var(--shop-tap);padding:0 var(--shop-s4);
  border:0;background:var(--shop-surface);color:var(--shop-ink);cursor:pointer;
  font-family:var(--shop-font-body-tienda);font-size:var(--shop-t-label);font-weight:600;
  transition:background var(--shop-m-micro) var(--shop-ease)}
.shop-acct-opt + .shop-acct-opt{border-left:1px solid var(--shop-rule)}
.shop-acct-opt:hover{background:var(--shop-surface-2)}
.shop-acct-opt[aria-pressed="true"]{background:var(--shop-ink);color:var(--shop-on-ink)}
.shop-acct-opt:focus-visible{outline:2px solid var(--shop-ink);outline-offset:2px}
.shop-acct-opt:disabled{cursor:not-allowed}
.shop-acct-link{display:flex;align-items:center;justify-content:space-between;gap:var(--shop-s3);
  min-height:var(--shop-tap);padding:var(--shop-s3) var(--shop-s4);color:var(--shop-ink);text-decoration:none}
.shop-acct-link:hover{background:var(--shop-surface-2)}
.shop-acct-link:focus-visible{outline:2px solid var(--shop-ink);outline-offset:-2px}
.shop-acct-link svg{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
/* Con la compra cerrada shop-ui oculta el enlace a pedidos.html; la seccion
   entera se retira en el mismo fotograma (el atributo lo pone storefrontGate).
   Va la ULTIMA en el principal: retirarla no mueve nada de arriba. */
body[data-shop-gate="closed"] #acctOrders{display:none}