/* ── TIPOGRAFÍA ───────────────────────────────────────────────────────────────
   Manrope self-hosted, igual que la pantalla de espera. La CSP es
   `font-src 'self'`: Google Fonts no carga, y tampoco queremos depender de que
   Google esté arriba para que la tienda se vea bien. Es variable (200-800), así
   que la jerarquía entera se resuelve con peso y sin una segunda familia.
   🔴 Las URL van ABSOLUTAS con la base: un url('manrope-latin.woff2') relativo,
   servido desde /ar/microfonos, el navegador lo pide a /ar/manrope-latin.woff2. */
@font-face{font-family:'Manrope';src:url('/manrope-latin.woff2') format('woff2');
  font-weight:200 800;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Manrope';src:url('/manrope-latin-ext.woff2') format('woff2');
  font-weight:200 800;font-style:normal;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ── TOKENS · CLARO ──────────────────────────────────────────────────────────
   Los diez de la paleta con su nombre, y arriba los roles. Ningún color se
   define SÓLO adentro del bloque de oscuro: todo nace acá y allá se redefine. */
:root{
  color-scheme:light;
  /* paleta (paleta_corp_skyla_extendida.png) */
  --negro:#11141a; --titulo:#22272f; --oscuro:#3c4552; --suave:#6b747f;
  --segundo:#c0c6ca; --linea:#dcdee1; --acento:#92c0e4; --celeste:#d0dfef;
  --bandeja:#dde7f2; --fondo:#f1f5fa; --fondo2:#e4ecf5; --blanco:#ffffff;
  /* roles */
  --pag:#ffffff;        /* fondo de la página */
  --sup:#ffffff;        /* superficie: cards, cabecera */
  --ink:#22272f;        /* títulos, nombres, PRECIOS */
  --ink2:#3c4552;       /* texto fuerte secundario */
  --muted:#6b747f;      /* texto suave — SÓLO sobre superficie blanca */
  /* ⭐ 27-09 · EL MISMO GRIS, PERO PARA SUPERFICIE CON TINTE.
     `--muted` dice de sí mismo «SÓLO sobre superficie blanca» y tiene razón:
     sobre `--fondo` (#f1f5fa) da 4,33:1, abajo del 4,5 de AA. El problema es
     que el pie legal lo usaba igual, y ahí el fondo NO es blanco — la regla se
     rompía por COMPOSICIÓN (el ancestro pinta, el descendiente escribe), que
     es justo lo que `CO-8` no puede ver: busca los dos en el MISMO bloque.
     🔴 Medido el 27-09 con `medir_pantalla.mjs` sobre el banco vivo, a 390 px:
        `p.cst-legal-cp` daba 4,33:1 en el inicio, en /contacto y en el carrito.
     ⭐ No se toca `--muted`: su regla sigue siendo cierta y hay tres
        afirmaciones que la miden. Se agrega el hermano para el tinte, que es
        el mismo gris cinco puntos más oscuro — imperceptible, y 4,66:1.
     ⚠️ Alcanza para `--fondo`. Sobre `--fondo2` (4,28) y `--bandeja` (4,07)
        NO alcanza: ahí va `--ink2`. */
  --muted-f:#666f7a;    /* texto suave sobre --fondo (tinte claro) */
  --line:#dcdee1;
  --line2:#e9ebee;
  /* 🔴 27-09 · ESTE TOKEN NO CUMPLIA SU PROPIA DEFINICION. Decia «oscurecido
     hasta pasar AA en 13 px» y era cierto SOBRE BLANCO (4,86:1). Pero el
     rótulo de sección (`.cst-kicker`, «LO MÁS PEDIDO») cae sobre `--fondo2`, y
     ahí el mismo color daba **4,07:1** — medido el 27-09 pintando la portada a
     390 px, no leyendo la hoja.
     ⭐ Se oscurece de `#2c76b0` a `#25689c`: 4,98:1 sobre `--fondo2` y 5,93
        sobre blanco. Es el mismo azul un 7 % más profundo, imperceptible al
        lado, y ahora el token hace lo que su comentario dice que hace.
     ⚠️ Es el mismo defecto que `--muted`: un color afinado para UNA superficie
        y usado sobre otra. La diferencia es que aquel lo decía en su comentario
        y éste creía estar cubierto. */
  --acento-txt:#25689c; /* el acento oscurecido hasta pasar AA en 13 px, sobre blanco Y sobre los tintes */
  /* 🟢 EL VERDE — 05-10. Era `#0b7d5a` y pasaba AA sobre BLANCO (5,13) pero NO
     sobre su propio tinte: la pastilla del AHORRO de la ficha —acá NO se
     escribe su texto con el signo de pesos y los puntos suspensivos, porque
     este comentario vive DENTRO de la cadena PHP de la hoja y ese signo abre
     una interpolación: lo cacé el 05-10 con un `Undefined variable` en esta
     misma línea, y lo puso rojo `prueba_carrito_alineado`— se dibuja con
     `color:var(--ok)` encima de `color-mix(--ok 13%, --sup)`, y ese 13 % le
     baja el fondo lo justo para quedar en **4,29 contra el piso de 4,5**.
     Medido en producción con Chrome, a 390, 1.440 y 2.560 px: el único
     hallazgo de contraste de las cinco pantallas del día 1, y sale en TODAS
     las fichas de producto.
     ⚠️ ES EL MISMO DEFECTO QUE `--acento-txt` Y QUE `--muted`, por tercera vez:
        un color afinado para UNA superficie y usado sobre otra. Acá no hace
        falta un token nuevo —sobre blanco ya pasaba— sino que el que hay pase
        sobre las DOS. Se oscurece 1,2 puntos de luminosidad (L 26,7 % → 25,5 %),
        imperceptible al lado, y queda en 4,60 sobre su tinte y 5,55 sobre
        blanco.
     ⭐ Y MEJORA donde `--ok` es RELLENO con texto blanco encima (`.cst-cta-ok`):
        ese par sube de 5,13 a 5,55. Oscurecer no rompe ninguno de los 24 usos.
     🔴 Las otras TRES pastillas con la misma fórmula —`.cst-ok`, el chip de
        envío gratis del carrito y el de la grilla— tenían el mismo 4,29 y
        quedan arregladas por el mismo cambio, que es justamente por qué se
        toca el token y no la regla. */
  --ok:#0b7756; --bad:#c23434;
  /* 🟢 12-10 noche · D5 del plan 130 · EL VERDE DE WHATSAPP, APARTE DE --ok.
     Diego: «el logo de WhatsApp esta bien el diseno pero le falta mas verde
     claro». --wa es el #25D366 oficial y pinta SOLO el disco del globo; el
     glifo blanco va encima con un filo de --wa-osc (#075E54, el verde oscuro
     de la misma marca) que le da el borde que el blanco solo no tiene sobre
     ese verde (1,98:1 a secas; el filo da 4,0:1 contra el disco y 7,9:1 contra
     el blanco). --wa-ico es el verde del simbolo suelto sobre blanco: mas
     claro que --ok y todavia 3,1:1, el piso de un icono. */
  --wa:#25d366; --wa-osc:#075e54; --wa-ico:#1da851;
  /* 🟠 EL ÁMBAR — 16-09. Diego, mirando producción: «los colores no me cierran,
     el marrón queda fuera de tono». Era #9a5f0d: H35 S84% L33%, o sea MOSTAZA, y
     en una hoja que por lo demás es azul, verde y rojo suaves, ese era el único
     tono terroso. Pasa a NARANJA QUEMADO #a34b00 (H28 S100% L32%) — el mismo
     significado (ámbar = falta que hagas algo) sin la parte embarrada, que venía
     de la saturación baja a esa luminosidad.

     🔻 ESTABA A MEDIAS Y SE VEÍA. El cambio se había hecho SÓLO adentro de «Mi
     cuenta», con un `.cst-cu-pant{--warn:#a34b00}` local, y el token global
     seguía en mostaza. La pantalla del PEDIDO comparte este token: el mismo
     estado del mismo pedido se veía de dos colores distintos según por dónde
     hubieras entrado. Subirlo acá alinea las dos y deja aquel override como lo
     que ahora es: redundante e inofensivo (mismo valor).

     📏 MEDIDO EN LAS CINCO PANTALLAS QUE LO USAN, no sólo en las dos del
     reporte — este token también pinta «quedan pocas» en la GRILLA, la FICHA y
     el CARRITO. Contraste WCAG del nuevo contra el viejo, siempre mejor:
       · sobre --sup blanco (grilla · ficha · carrito · rótulo del pedido ·
         «Mi cuenta»)                                   5,23 → 5,89:1   AA ✓
       · blanco sobre el chip sólido (pedido/checkout)  5,23 → 5,89:1   AA ✓
       · sobre su relleno al 14% (#f2e6db, «Mi cuenta») 4,34 → 4,80:1   AA ✓
       · sobre su relleno al 15% (#f1e4d9, hero pedido) 4,27 → 4,73:1   AA ✓
       · sobre --fondo #f1f5fa                          4,78 → 5,38:1   AA ✓

     ⏳ LO ÚNICO QUE NO LLEGA, y ya no llegaba antes: la COLA del degradé de la
     barrita de stock (`.cst-bar-i`), `color-mix(45% warn, #e6b877)` = #c88741
     sobre --fondo2, da 2,52:1 (antes 2,37:1). El arranque de la barra sí pasa
     (4,94:1) y el dato lo dice el texto de al lado —«quedan pocas»—, así que la
     barra es refuerzo y no el único portador; por eso 1.4.11 no la obliga. No se
     toca acá: cambiar el degradé es una decisión de diseño y va con mockup y OK
     de Diego, no de arrastrón adentro de un cambio de token. */
  --warn:#a34b00;
  /* Texto sobre el verde SÓLIDO (el tilde del retiro). En claro el verde es
     oscuro y el blanco entra; en oscuro el verde es claro y el blanco NO entra:
     va la tinta del fondo. Son dos valores porque son dos fondos distintos, no
     por gusto. */
  --ok-txt:#ffffff;
  /* 🔵 EL AZUL DE MARCA (VP-64). Regla de Diego (06-09), textual: «mismo tema de
     mucho negro; en oferta y botón debería ser azul» · «el % digo que está
     negro». El chip de descuento y el botón de comprar eran #22272f sólido y en
     una card blanca pesaban como un ladrillo sin decir nada de la marca.
     🔴 NO CAMBIA CON EL TEMA, y es a propósito: en la card se apoya sobre la
     bandeja de foto, que sigue clara en oscuro (ver la nota de abajo), y en la
     ficha va con texto blanco encima en los dos temas. Un solo azul evita que
     el mismo chip tenga dos identidades según el tema.
     Medido: blanco sobre #2563c9 da 5,64:1 (AA en cualquier tamaño), y el chip
     contra el fondo oscuro #0e1116 da 3,35:1 (pasa el 3:1 de 1.4.11 para un
     componente). El tachado NO se pinta: sigue en --muted gris, porque dos
     cosas gritando al lado del precio no se leen ninguna de las dos. */
  --marca:#2563c9; --marca-txt:#ffffff;
  /* ❤️ VP-19 · EL CORAZON GUARDADO. Tiene token PROPIO y no reusa `--bad`
     aunque hoy valgan lo mismo: `--bad` significa «algo salio mal» y un
     favorito no es un error. Con nombre propio, el dia que Diego quiera otro
     color se cambia UNA linea y no se toca ningun mensaje de error.
     🔴 Y NO ES `--marca`: ese azul es el de «Agregar», que vive en la misma
     bandeja a 56 px de distancia. Dos controles del mismo color y en la misma
     foto se leen como el mismo control repetido.
     Medido: #c23434 sobre el blanco de la pastilla da 5,48:1 — pasa AA para
     texto chico, y de sobra el 3:1 que pide un componente. */
  --fav:#c23434;
  /* La bandeja de foto y todo lo que se apoya ENCIMA de ella no cambia con el
     tema: la bandeja sigue clara en oscuro (02_DISENO §11 bug #7), así que sus
     chips y su botón tienen que seguir siendo legibles sobre claro. */
  --tile:#ffffff;
  --chip-sup:#ffffff; --chip-txt:#6b747f;
  /* Tinta fuerte para lo que se apoya en la bandeja (que es blanca en los DOS
     temas, igual que --chip-sup): #3c4552 sobre blanco da 9,73:1. Fija a
     propósito — si siguiera al tema, en oscuro sería gris claro sobre blanco. */
  --chip-ink:#3c4552;
  --chip-ok:#0b7d5a;  --chip-off-sup:var(--marca); --chip-off-txt:var(--marca-txt);
  --tray-btn:var(--marca); --tray-btn-txt:var(--marca-txt);
  --sw-aro:#ffffff;     /* aro interior del punto de color — NO cambia con el tema */
  /* ⭐⭐ EL HALO, EN UN TOKEN — sky-estetica · 10-10-2026 ────────────────────
     El halo de color en los bordes es LA FIRMA DE LA CASA: es lo unico que
     Diego rescato de una pantalla que por lo demas rechazo entero («las
     sombras celestes en los bordes, eso me gusto, es lo mejor del diseño»).
     Y hasta hoy estaba escrito a mano: el acento en decimal aparecia 29 veces
     entre esta hoja y la de Mi cuenta. O sea que Diego podia pasar la tienda a
     rosa y la firma de la casa seguia saliendo CELESTE en los 29 lugares.
     🔴 SON TRES NUMEROS Y NO UN COLOR, a proposito: las sombras necesitan el
        mismo tono con nueve opacidades distintas, y rgba(var(--halo),.34) es
        la unica forma de dar las dos cosas con un solo token.
     🔴 Y SE DECLARA ACA, EN LA HOJA, NO SOLO EN EL OVERRIDE DEL PANEL. Un
        var() sin definir NO cae a un color: deja la propiedad invalida y la
        sombra desaparece entera. Es lo que le paso a --bad en el panel el
        05-10, donde el aviso que no se veia era justo el de contraste.
     ⚠️ Medido en Chrome antes de escribirlo: con el token puesto, la sombra
        sale pintada del tono pedido. */
  --halo:146,192,228;
  /* sombras SIEMPRE teñidas de celeste, nunca negro puro. Es la firma de la
     casa: sombra de color, no barra de acento al costado. */
  --sh-1:0 1px 2px rgba(60,69,82,.05), 0 6px 18px rgba(var(--halo),.34);
  --sh-2:0 4px 10px rgba(60,69,82,.05), 0 14px 34px rgba(var(--halo),.46);
  --sh-3:0 8px 20px rgba(60,69,82,.07), 0 26px 58px rgba(var(--halo),.62);
  /* ── VP-70.2 · EL HALO DE LA FOTO ────────────────────────────────────────
     Diego lo pidió TRES veces: «más sombra de luz en la imagen del producto»
     (grilla y cajón). Es un halo propio, más corto y más cerrado que --sh-1:
     la bandeja de foto tiene que despegarse de la card, no flotar tanto como
     la card se despega de la página. Si los dos halos midieran lo mismo, no se
     leería una cosa apoyada sobre otra: se leerían dos cosas sueltas. */
  --sh-foto:0 1px 2px rgba(60,69,82,.06), 0 8px 22px rgba(var(--halo),.52);
  /* ── VP-68 · EL GLOBITO DEL CARRITO NO ES UN BOTÓN ───────────────────────
     Diego: «el azul para agregar al carrito, comprar y dto toma el mismo tono
     que el azul del número de unidades del carrito». Tenía razón y el motivo
     es de jerarquía, no de gusto: el globito INFORMA («tenés 2») y el botón
     PIDE UN TOQUE («agregá»). Con los dos en azul compiten, y el que gana es
     el que está más arriba en la pantalla — o sea el que NO queremos que
     toquen. Un solo azul fuerte por pantalla, y es el del botón.
     Acá va el chrome invertido: oscuro con número blanco en claro, claro con
     número oscuro en oscuro. Se lee como un contador de sistema —nunca como
     algo apretable— y en los dos temas se recorta contra la cabecera.
     Medido: #ffffff sobre #3c4552 = 9,73:1 · #11141a sobre #eef2f7 = 16,4:1. */
  --pip:#3c4552; --pip-txt:#ffffff;
  /* El cajón entra desde la derecha: su halo tiene que caer a la IZQUIERDA,
     hacia el contenido. Mismos valores que --sh-3, girados. */
  --sh-cj:-2px 0 10px rgba(60,69,82,.07), -26px 0 58px rgba(var(--halo),.62);
  /* 🎈 VOTO-02 · LOS SEIS COLORES DEL FESTEJO. Diego, 13-09, sobre los globos
     de la pantalla de después de comprar: «en multicolor» — no los pasteles de
     la marca, que es justo lo que había antes y lo que él rechazó (seis tonos
     del mismo celeste no es un festejo). Son TOKENS y no hex sueltos en la hoja
     de `checkout.php` por la misma razón que el resto de esta lista: la prueba
     `prueba_checkout.php` cuenta cuántos colores quedan escritos a mano en esa
     hoja y no deja pasar más de dos — moviéndolos acá adentro, la hoja del
     checkout sigue sin ninguno. NO son de uso general: son sólo para
     `.cst-pd-g1`…`.cst-pd-g8`, la única cosa de toda la tienda que es
     deliberadamente NO pastel. */
  --conf-rojo:#ef4444; --conf-oro:#eab308; --conf-verde:#22c55e;
  --conf-violeta:#a855f7; --conf-rosa:#ec4899; --conf-naranja:#f59e0b;
  /* ── ⭐ J9 · EL ORO DE LAS ESTRELLAS ────────────────────────
     Diego lo pidió CUATRO veces: «más amarillo dorado» (05-10), «el color de
     las estrellas no me copa no me cierra; ni en la preview del producto ni
     entrando» (pedido 142), otra vez hoy —y al votar el mockup
     `rep2_estrellas_donde.html` el 09-10 16:37 (diseño 9, claridad 9, colores
     8, tipografía 9, VA ASI) lo dejó ELEGIDO con el dedo:

       «el; punto 3 el no va solo opcion 1 va como piña»

     🔴 ESO ES UNA ELECCIÓN, Y PARA VERLA HAY QUE ABRIR EL MOCKUP. Sus tres
        secciones están NUMERADAS (1 la ficha · 2 la card · 3 el oro) y las seis
        ubicaciones de la card están rotuladas con LETRAS (—, A, B, C, D, E).
        Así que «punto 3» y «opción 1» sólo pueden caer en la sección 3, EL ORO,
        que tiene exactamente tres opciones — y la primera lleva como cartel,
        escrito con esas palabras, «no va solo»:

          opción 1 · #E8B10A relleno PELADO, sin contorno · cartel «no va solo»
          opción 2 · #C28B02 sin contorno, el máximo que pasa solo (3,01:1)
          opción 3 · #E8B10A con contorno #8A6200 — la que recomendaba el mockup

        Eligió la 1. Le mostramos los tres números medidos y el cartel que
        desaconsejaba justo ésa, y la eligió igual: es el dueño y está
        informado. LA ESTRELLA VA DE ORO PLENO Y SIN CONTORNO.

     ⭐ POR ESO AHORA SON DOS TOKENS Y NO TRES. Se fue el tercero, el que
        existía sólo para pintar el contorno que Diego acaba de sacar. Quedan:
          --oro     el relleno de la estrella llena. Es la marca de reputación.
          --oro-bo  el NÚMERO («4,6») y las sombras: 5,49 sobre blanco y 5,01
                    sobre el fondo. Es TEXTO de 12 px, su piso es 4,5. Pasa.

     🔴 LO QUE SOSTIENE QUE ESTO NO ROMPE NADA: acá la estrella es
        DECORATIVA. El valor lo lleva el número pegado al lado —en --oro-bo,
        que pasa de sobra— y la frase entera para el lector de pantalla, que la
        escribe quien dibuja. 1.4.11 le pide 3:1 a un gráfico **necesario para
        entender el contenido**, y éste no lo es: tapate las cinco estrellas y
        la pantalla sigue diciendo 4,6 de 5 sobre 1.915 opiniones. Es el mismo
        dibujo que hacen Amazon y Mercado Libre.
     ⚠️ LO QUE SÍ SE TIENE QUE CUMPLIR SIEMPRE, Y LO MIDE LA BATERÍA: donde se
        dibuje una estrella llena tiene que haber, al lado, el valor en texto.
        El día que alguien ponga cinco estrellas solas —sin número visible y sin
        frase para el lector— el dibujo pasa a SER el dato y este oro deja de
        alcanzar. Esa es la condición, no el hex.
     ⚠️ LA ESTRELLA VACÍA NO ES LA MISMA EN GRIS: es de CONTORNO SOLO, sin
        relleno. Llena y vacía se distinguen por la FORMA además del color, que
        es lo que pide 1.4.1 — la misma decisión que los dos corazones de
        VP-19. Su color es --muted, que sobre blanco da 4,74. */
  --oro:#E8B10A; --oro-bo:#8A6200;
  --r-s:.75rem; --r-m:1.125rem; --r-l:1.625rem; --r-x:2.125rem;
  --ease:cubic-bezier(.16,.84,.44,1);
  --f:'Manrope',-apple-system,BlinkMacSystemFont,system-ui,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
}
/* ── NO HAY TOKENS DE OSCURO, Y ES A PROPÓSITO ───────────────────────────────
   Diego, 08-09, textual: «acordate: tema oscuro, sacarlo, no lo queremos».

   Acá vivía `html[data-mk="dark"]` con sus treinta tokens. Se fue entero, junto
   con el script que leía `localStorage` y las tres reglas sueltas que pintaban
   el logo y el ícono del carrito vacío.

   🔴 SACAR UN TEMA NO ES SÓLO BORRAR: es que de ahora en más **cada color tiene
   UN SOLO VALOR**, y con eso desaparece una familia entera de bugs. El último
   fue el del 07-09: el tilde verde del retiro necesitaba texto blanco en claro
   y texto oscuro en oscuro, porque el verde cambia de luminosidad entre temas.
   Con un solo tema, `--ok-txt` es blanco y se terminó la discusión.

   🔴 Y POR ESO `color-scheme:light` ARRIBA NO ES DECORACIÓN. Borrar los tokens
   no alcanza: sin esa línea, al que tiene el sistema operativo en oscuro el
   NAVEGADOR le pinta por su cuenta lo que nosotros no declaramos —el fondo de
   los `input` y los `select`, la barra de scroll, el autocompletado— y queda un
   híbrido: nuestra tienda clara con controles oscuros adentro. `color-scheme`
   es lo que le dice al navegador que acá se pinta en claro y punto.

   ⚠️ EL PANEL NO CAMBIA. `app.php` sigue con los dos temas: es regla dura de
   CLAUDE.md. Esto es SÓLO la tienda.

   ⚠️ Y el mockup aprobado (`documentacion/web/mockups/tienda_corpskyla.html`)
   TIENE modo oscuro, con su paso 13 y todo. Esa parte del mockup ya no aplica:
   Diego lo decidió después. */

/* ── BASE ────────────────────────────────────────────────────────────────── */
*{box-sizing:border-box}
/* 📱 EL ZOOM QUE NADIE PIDIÓ (06-09). El meta `user-scalable=no` de la cabeza es
   la mitad floja del asunto —iOS lo ignora—; lo que de verdad lo evita es esto:
   · `text-size-adjust:100%` frena que iOS agrande SOLO el texto de las columnas
     angostas al girar el teléfono. Se ve como si la tipografía cambiara de
     tamaño sola, y es lo que más se nota.
   · `touch-action:manipulation` mata el doble-toque-para-agrandar y, de yapa,
     los ~300 ms que Safari esperaba en CADA toque por si venía un segundo: la
     tienda pasa a sentirse instantánea.
   Ninguno de los dos toca el pinch, que es accesibilidad y se queda. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;touch-action:manipulation;
  scroll-behavior:smooth;overflow-x:hidden;overflow-x:clip}
/* 🔴 `clip` Y NO `hidden`, Y NO ES COSMETICO. `overflow-x:hidden` convierte al
   elemento en CONTENEDOR DE SCROLL, y eso MATA `position:sticky` en todo lo
   que tenga adentro: el resumen de la compra decia `position:sticky` y se iba
   con el scroll igual (medido: top -538 al bajar 700). `clip` corta el
   desborde exactamente igual pero NO crea contenedor, asi que el sticky
   revive. La linea `hidden` queda ARRIBA a proposito: el navegador que no
   conozca `clip` descarta la segunda y se queda con el comportamiento viejo,
   que es el que veniamos teniendo. Nunca al reves. */
/* 🔴 ÉSTA ES LA CAUSA REAL DEL «SALTA LA PANTALLA»: Safari hace zoom al enfocar
   un campo cuyo texto mide MENOS de 16 px, y después la página queda corrida.
   `max()` y no `16px` pelado para que el día que alguien suba la letra base, el
   campo la acompañe en vez de quedar clavado abajo.
   ⚠️ Esta regla es de TIPO y pierde contra cualquier regla de CLASE — que es
   exactamente el bug de cascada que ya se comió este proyecto. Los tres campos
   que estaban por debajo (.cst-qty-v, .cst-car-qv y .cst-env-cp, todos entre
   13 y 15,2 px) llevan el piso en SU propia regla; acá abajo, cada uno con su
   nota. Si mañana aparece un campo nuevo con una clase que fije `font-size`,
   hay que mirarlo también. */
input,select,textarea,button{font-size:max(16px,1rem)}
body{
  margin:0;min-height:100dvh;display:flex;flex-direction:column;
  background:var(--pag);color:var(--ink);
  font-family:var(--f);font-size:.9375rem;font-weight:500;line-height:1.55;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;overflow-x:clip;
  padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right);
}
.cst-main{flex:1 0 auto;padding-bottom:clamp(3rem,6vw,5.5rem)}
.cst-sprite{display:none}
.cst-ico{width:1em;height:1em;flex:none;display:inline-block;vertical-align:-.125em}
.cst-num{font-variant-numeric:tabular-nums}
.cst-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* El anillo de foco: 2 px con 3 px de aire (AC-05). --acento-txt da 4,86:1
   sobre blanco; el acento pelado (1,93:1) no llega ni al 3:1 de WCAG 1.4.11. */
:focus-visible{outline:2px solid var(--acento-txt);outline-offset:3px;border-radius:.5rem}
.cst-salto{position:absolute;left:-9999px;top:0;z-index:120;background:var(--negro);
  color:#fff;padding:.75rem 1.15rem;border-radius:0 0 .75rem 0;font-weight:700;font-size:.8125rem}
.cst-salto:focus{left:0}
/* ═══ EL ANCHO DE LA CASA ════════════════════════════════════════════════════
   🔴 SE ENSANCHÓ EL 11-09. Diego, mirando el inicio en vivo: *«tiene mucho
   espacio en los bordes»*. Estaba clavado en `min(80rem, 100% - 3rem)` — 1280 px
   como techo— y ese techo es el que sobraba, no el aire: en una notebook de 1440
   dejaba 80 px muertos de cada lado y en un monitor de 27" la tienda entera
   quedaba flaca en el medio de la pantalla, con la grilla de 4 columnas apretada
   contra sí misma mientras a los costados no pasaba nada.

   🔴 Y SE VOLVIÓ A TOCAR EL MISMO DÍA, porque el `clamp(90rem, 84vw, 102rem)`
   tenía un ESCALÓN que se veía: abajo de 1512 mandaba el `100% - 4rem` (o sea
   el 96–98 % de la pantalla) y arriba pasaba a mandar el `84vw`. Medido: 1512
   dejaba 36 px de margen y 1728 saltaba a **138**, sin que nada lo justificara
   más que el cruce de dos fórmulas. En 2560 el margen llegaba a **464 px por
   lado** — que es lo que Diego señaló como *«el header debe aprovechar bien el
   ancho de los dispositivos»*.

   Ahora es UNA sola regla y crece siempre para el mismo lado:
     · `100% - 4rem`  → 32 px de aire de cada lado, a cualquier ancho;
     · `108rem` (1728) → el techo, para que una grilla de 4 columnas no termine
       con cards de 600 px en un monitor de 27".
   Cómo queda, medido: 1440 → 1376 (igual que antes) · 1512 → 1440 (igual) ·
   1728 → **1664** (antes 1452) · 1920 → **1728** (antes 1613) · 2560 → **1728**
   (antes 1632). En ningún ancho es más angosto que antes.

   ⚠️ EL `min()` ES EL SEGURO ANTI-DESBORDE y no se toca: pase lo que pase con el
   techo, el bloque nunca puede medir más que `100% - 4rem`. El desborde
   horizontal de esta tienda ya llegó a producción una vez. */
.cst-wrap{width:min(108rem,100% - 4rem);margin-inline:auto}
@media (max-width:40rem){.cst-wrap{width:min(108rem,100% - 2rem)}}
/* ── ⭐ LA CABECERA VA MÁS ANCHA QUE EL CONTENIDO, Y ES A PROPÓSITO ──────────
   Diego, 11-09: *«el header debe aprovechar bien el ancho de los dispositivos y
   trabajar correctamente el responsive»*. Y son dos cosas distintas:

   · El CONTENIDO tiene un ancho de lectura. Cards de 600 px o un renglón de
     texto de 2.400 px no son «aprovechar la pantalla», son ilegibles. Por eso
     el techo de arriba existe.
   · La CABECERA no tiene ancho de lectura: es una barra con la marca pegada a
     un borde y los controles pegados al otro. Encajonada en el medio de un
     monitor de 27" se lee como una ventana chica adentro de la pantalla — que
     es exactamente lo que pasaba, con 464 px muertos de cada lado.

   Techo propio de 120rem (1920). Abajo de eso manda el mismo `100% - 4rem` que
   todo lo demás, así que hasta 1984 px de pantalla la cabecera y el contenido
   miden EXACTAMENTE igual y no hay ningún escalón que explicar. El desfasaje
   sólo aparece donde hace falta: en 2560, cabecera 1920 contra contenido 1728,
   96 px de cada lado. Se lee como una decisión, no como un desalineo.
   ⚠️ Alcanza también al panel ancho del menú (`.cst-mm-in` lleva `.cst-wrap`),
   que tiene que quedar alineado con la barra de la que cuelga — si no, las
   subcategorías arrancarían corridas respecto de su categoría. */
.cst-hd .cst-wrap{width:min(120rem,100% - 4rem)}
@media (max-width:40rem){.cst-hd .cst-wrap{width:min(120rem,100% - 2rem)}}

/* ── 🔴 TODO `:hover` DE ESTE ARCHIVO VA DENTRO DE `@media (hover:hover) and
   (pointer:fine)`. LAS 36 REGLAS. NO SE AGREGA UNA SUELTA ────────────────────
   Bug real que reportó Diego el 06-09 con una captura: «el botón de más
   unidades en el carrito del celular está roto, está más grande». No crecía: se
   quedaba PINTADO. En iOS (y en Android) el `:hover` de un elemento que tocaste
   SE QUEDA APLICADO hasta que tocás otra cosa — el navegador no tiene de dónde
   sacar un «se fue el mouse» porque no hay mouse. Así, un `background` de hover
   es un botón que queda marcado como si estuviera activo, en el carrito, al
   lado de la plata.

   Por eso no alcanzaba con arreglar `.cst-car-qb`: la misma trampa la tenían
   `.cst-car-qv`, `.cst-car-x`, `.cst-qty-b`, `.cst-cj-x` y las otras treinta.
   `(pointer:fine)` además saca de la ecuación al híbrido (notebook con pantalla
   táctil que se está usando con el dedo).

   ⚠️ Lo que NO se envolvió, a propósito, porque no depende del mouse:
   `.cst-nav-a[aria-current="page"]::after` (el subrayado de la sección donde
   estás) y los dos `:focus-within` de la card (el teclado). Compartían regla
   con un `:hover` y se separaron: envolverlos habría apagado el subrayado de la
   categoría actual y el foco de teclado en todo celular.
   En táctil el estado que vale es `:active`, que sí se va solo. */

/* AC-12: si el sistema pide menos movimiento, se apaga TODO. No es opcional. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  html{scroll-behavior:auto}
}

/* ═══ ⭐ PN-82b · LA CINTA DE VISTA PREVIA ════════════════════════════════════
   `webRenderCintaPreview()` la arma; acá sólo el estilo. Fondo OSCURO y no un
   pastel de la casa A PROPÓSITO: tiene que leerse como HERRAMIENTA, nunca como
   contenido de la tienda — confundirla con un banner de verdad es exactamente
   lo que este cartel existe para evitar.
   `--prevh` es la ÚNICA fuente de la altura: la usa esta cinta (a través del
   padding de `.cst-prevw-in`) y la cabecera un poco más abajo (`top`), para
   que las dos sigan sincronizadas si el día de mañana cambia una medida. */
:root{ --prevh:calc(2.75rem + env(safe-area-inset-top)); }
.cst-prevw{position:sticky;top:0;z-index:71;background:var(--negro);
  box-shadow:0 6px 18px color-mix(in srgb,var(--negro) 32%,transparent)}
.cst-prevw-in{display:flex;align-items:center;gap:.6rem;min-height:2.75rem;
  padding:.45rem 0;padding-top:calc(.45rem + env(safe-area-inset-top))}
.cst-prevw-ic{flex:none;display:grid;place-items:center;font-size:1.05rem;color:var(--acento)}
/* Un solo renglón, siempre: recorta con puntos suspensivos antes que pasar a
   una segunda línea (ver el aviso grande de `webRenderCintaPreview()`). */
.cst-prevw-t{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
  margin:0;font-size:.8rem;color:#fff}
.cst-prevw-t b{font-weight:800;letter-spacing:-.01em}
.cst-prevw-v{color:color-mix(in srgb,#fff 62%,transparent);font-weight:600}
/* El botón se ancla al borde (regla de Diego): nada flotando sin razón. Tinta
   OSCURA sobre el acento — blanco ahí no entra (medido, paleta extendida). */
.cst-prevw-salir{flex:none;margin-left:auto;display:inline-flex;align-items:center;gap:.35rem;
  padding:.4rem .8rem;border-radius:999px;background:var(--acento);color:var(--titulo);
  font-family:var(--f);font-size:.78rem;font-weight:800;text-decoration:none;white-space:nowrap;
  transition:filter .2s var(--ease)}
@media (hover:hover) and (pointer:fine){
  .cst-prevw-salir:hover{filter:brightness(.94)}
}
.cst-prevw-salir:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* ── CABECERA ────────────────────────────────────────────────────────────── */
.cst-hd{position:sticky;top:0;z-index:70;background:color-mix(in srgb,var(--pag) 84%,transparent);
  -webkit-backdrop-filter:saturate(180%) blur(18px);backdrop-filter:saturate(180%) blur(18px);
  border-bottom:1px solid var(--line2)}
/* ⭐ Con la cinta arriba, la cabecera deja de pegarse al techo del todo: se
   corre exactamente lo que mide la cinta. `body` no lleva la clase salvo que
   `webTiendaRender()` la ponga (vista previa activa) — el resto de la tienda
   no cambia un píxel. */
body.cst-prevw-on .cst-hd{top:var(--prevh)}
/* `position:relative` para que el panel del buscador (VP-77) cuelgue del MARGEN
   DE LA PÁGINA y no del ancho de la lupa. Ver la nota de `.cst-bus`. */
/* 🔴 MÁS ALTO desde el 11-09. Diego: *«el header debería ser más alto»*. Estaba
   en 4,25 rem (68 px) y con el logo a 2,05 rem se leía como una barra de
   herramientas, no como la cabecera de una tienda: el logo casi tocaba los dos
   bordes y no había aire entre el menú y el buscador.
   Crece con la pantalla —4,75 rem (76 px) en el teléfono, 5,75 rem (92 px) en
   monitor— porque en 390 px un header de 92 px se come un sexto de la primera
   pantalla. El logo acompaña la subida, si no el aire nuevo queda todo arriba y
   abajo de una marca que sigue chica. */
.cst-hd-in{position:relative;display:flex;align-items:center;gap:clamp(.75rem,2vw,1.6rem);
  min-height:clamp(4.75rem,5.4vw,5.75rem);padding:.7rem 0}
.cst-marca{display:block;flex:none;height:clamp(2.05rem,2.4vw,2.6rem);color:var(--negro);
  --logo-bg:var(--pag);border-radius:.4rem}
.cst-marca svg{height:100%;width:auto;display:block}
/* 🗳️ VOTO-10 (14-09) · CABECERA VOTADA — Directo en PC, Central en celular.
   UNA SOLA ESTRUCTURA (marca, nav, buscador, `.cst-hd-r`), nunca dos cabeceras
   distintas escondidas con CSS: eso duplicaría el buscador en el DOM —dos
   campos con el mismo `name`, el lector de pantalla leyendo todo dos veces, el
   contador del carrito en dos lugares para sincronizar— así que se resuelve
   puro CSS, reacomodando la MISMA fila.
   Abajo de 56,25 rem (el mismo corte de `.cst-nav`/`.cst-ham` de siempre, y NO
   uno nuevo: dos cortes distintos —éste y el de 75rem que tenía el buscador—
   son la «zona muerta» que denunció PN-80, con el ☰ ya afuera y el buscador
   todavía encogido a una lupa) la fila se envuelve: arriba marca + `.cst-hd-r`
   (☰, carrito, cuenta), abajo el buscador entero, de punta a punta — «como
   barra grande y protagonista», que es lo que votó Diego para Central. */
@media (max-width:56.25rem){
  .cst-hd-in{flex-wrap:wrap;row-gap:.65rem}
}
/* ═══ ⭐ VP-02 · LA CINTA DE ANUNCIOS ════════════════════════════════════════
   Diego: *«esa típica que se mueve sola… que repite en círculo como si girara»*.

   · **Gira sin JavaScript.** La lista va DOS veces en el HTML y la animación
     corre el `<ul>` un −50 %: al terminar la primera copia, la segunda está
     exactamente donde arrancó la primera. Sin script, sin `setInterval`, y sin
     nada que pueda fallar y dejar la cinta quieta a medio camino.
   · **Celeste y no oscuro.** Es la única banda de la tienda que podía ser un
     rectángulo negro de anuncio, y sería el único elemento oscuro de toda la
     casa. `--celeste` (#d0dfef) con la tinta `--ink` (#22272f) da 11,4:1 — y de
     paso queda del lado pastel, que es el idioma.
     🔴 NUNCA `--acento` de fondo con texto blanco encima: está medido y es
     ilegible. El acento es para acentos.
   · **`overflow:hidden` en la banda.** Es lo que impide que un `<ul>` de ancho
     `max-content` empuje la página a lo ancho — el desborde horizontal de esta
     tienda ya llegó a producción una vez.
   · **Se frena al pasar el mouse y al tabular adentro.** Un aviso que se está
     yendo justo cuando lo querías leer es peor que no tenerlo. */
.cst-fr{position:relative;overflow:hidden;background:var(--celeste);
  border-bottom:1px solid color-mix(in srgb,var(--acento) 45%,transparent)}
.cst-fr-abajo{border-bottom:0;border-top:1px solid color-mix(in srgb,var(--acento) 45%,transparent)}
.cst-fr-l{display:flex;width:max-content;align-items:center;
  list-style:none;margin:0;padding:0;
  animation:cst-franja var(--frs,30s) linear infinite;will-change:transform}
@keyframes cst-franja{from{transform:none}to{transform:translateX(-50%)}}
/* ⭐ LAS PUNTAS SE DISUELVEN. Es el mismo recurso que la cinta de la barra de
   confianza, y por el mismo motivo: una cinta que gira tiene, en todo momento,
   un mensaje cortado al ras en cada borde. En una captura —o con el mouse
   encima, que la frena— eso se lee como texto tapado, no como movimiento. Con
   el degradé, lo que entra y lo que sale se desvanecen y el corte deja de
   existir.
   `color-mix(… 0%, transparent)` y no `transparent` pelado: el segundo
   interpola por negro transparente en motores viejos y deja un velo gris. */
.cst-fr::before,.cst-fr::after{content:'';position:absolute;z-index:2;top:0;bottom:0;
  width:clamp(1.25rem,5vw,2.5rem);pointer-events:none}
.cst-fr::before{left:0;
  background:linear-gradient(90deg,var(--celeste),color-mix(in srgb,var(--celeste) 0%,transparent))}
.cst-fr::after{right:0;
  background:linear-gradient(270deg,var(--celeste),color-mix(in srgb,var(--celeste) 0%,transparent))}
.cst-fr-i{flex:none;display:flex;align-items:center}
/* El separador es un `::before` y no un carácter del texto: escrito adentro del
   <li> se lo lee el lector de pantalla («punto medio, envío gratis, punto
   medio…»). Acá es dibujo, y el lector no lo ve. */
.cst-fr-i::before{content:'';flex:none;width:.3125rem;height:.3125rem;margin:0 1.15rem;
  border-radius:50%;background:color-mix(in srgb,var(--ink) 34%,transparent)}
.cst-fr-a{display:block;padding:.5rem 0;font-size:.8125rem;font-weight:700;
  letter-spacing:.01em;color:var(--ink);text-decoration:none;white-space:nowrap}
a.cst-fr-a{text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:color-mix(in srgb,var(--ink) 30%,transparent)}
a.cst-fr-a:focus-visible{outline:2px solid var(--acento-txt);outline-offset:2px;border-radius:.4rem}
@media (hover:hover) and (pointer:fine){
  .cst-fr:hover .cst-fr-l{animation-play-state:paused}
  a.cst-fr-a:hover{text-decoration-color:var(--ink)}
}
.cst-fr:focus-within .cst-fr-l{animation-play-state:paused}
/* 🔴 QUIEN PIDIÓ QUE NADA SE MUEVA, VE LOS MENSAJES QUIETOS — no ve una banda
   vacía ni un renglón cortado. Se apaga la animación, se esconde la COPIA
   (`aria-hidden`, que sin movimiento sería el mismo aviso dos veces) y la lista
   pasa a envolver: los avisos quedan todos a la vista, en uno o dos renglones.
   Ese es el punto de `prefers-reduced-motion`: menos movimiento, no menos
   contenido. */
@media (prefers-reduced-motion:reduce){
  .cst-fr-l{animation:none;width:auto;flex-wrap:wrap;justify-content:center;
    padding-inline:1rem}
  .cst-fr-i[aria-hidden="true"]{display:none}
  /* Sin movimiento no hay nada entrando ni saliendo: los degradés de las puntas
     sólo taparían el primer y el último aviso. */
  .cst-fr::before,.cst-fr::after{display:none}
}

/* ═══ VP-22 · EL MENÚ DE DOS NIVELES ════════════════════════════════════════
   Especificación: `documentacion/web/02_DISENO.md` §6.1. Dos comportamientos
   distintos y a propósito, porque en celular NO HAY HOVER:
     · > 900 px → barra de categorías + PANEL ANCHO alineado al `.wrap`
     · ≤ 900 px → cajón del ☰ desde la izquierda, con ACORDEÓN adentro

   🔴 EL PANEL NO CUELGA DE LA BARRA, CUELGA DE `.cst-hd`. Y no es un capricho
   de maquetación: `.cst-nav` es (era) una fila con `overflow-x:auto`, y un
   `position:absolute` adentro de un contenedor que scrollea QUEDA RECORTADO.
   Se probó colgándolo de cada categoría y no se veía NINGUNO. Colgado de la
   cabecera además cumple lo que pide §6.1 —«alineado al `.wrap`, no un dropdown
   flaco pegado al link»— y entra a cualquier ancho.

   ⚠️ `.cst-hd` es `position:sticky`, o sea que YA es un bloque de referencia
   para lo absoluto de adentro. No hace falta —ni conviene— agregarle un
   `position:relative` que le pisaría el sticky. */
/* ⭐ 19-09 · E5 · EL GRUPO QUE JUNTA LA BARRA Y EL LINK «NOSOTROS».
   Diego, mirando la cabecera: *«un bug, el botón nosotros está al lado del
   buscador y no a la derecha del menú»*. Tenía razón: vivía en `.cst-hd-r`,
   pegado al carrito, a 31 px del buscador y a 200 px de la última categoría.

   🔴 ESTE `<div>` ES LO QUE PERMITE MOVERLO SIN METERLO ADENTRO DEL `<nav>`.
   El `<nav>` se anuncia `aria-label="Categorías"` y «Nosotros» NO es una
   categoría: adentro le mentiría al lector de pantalla, y encima se iría con el
   scroll de la barra cuando las categorías no entran. Acá el link es HERMANO
   del `<nav>`, no hijo: se ve pegado a «Celular y PC» y no es una categoría.

   ⭐ Y ADEMÁS NO SE PUEDE ESCONDER SOLO: `flex:none` en el link y `flex:0 1
   auto` en la barra. Cuando el ancho aprieta, lo que se scrollea son las
   categorías —que tienen su máscara de degradé avisando— y el link se queda
   quieto y entero. Al revés sería un link que desaparece sin avisar.

   🔴 EL COSTO EN PÍXELES ESTÁ MEDIDO Y NO SE MAQUILLA (§ 46/62): el link deja
   `.cst-hd-r` —donde ocupaba 82 px de espacio FIJO— y entra acá, así que la
   fila no paga un hueco nuevo, sólo la diferencia de separación. Medido con
   `pruebas/medir_sobre.mjs`, que pregunta `scrollWidth`/`clientWidth` porque
   esta barra falla scrolleando y no desbordando: en un PNG no se ve. */
.cst-hd-nav{display:none}
@media (min-width:56.25rem){
  .cst-hd-nav{display:flex;align-items:center;gap:.15rem;margin-left:.25rem;
    flex:0 1 auto;min-width:0}
}
.cst-nav{display:flex;align-items:center;gap:.15rem;
  flex:0 1 auto;min-width:0;
  /* ⭐ La válvula de seguridad, y AHORA SÍ SE PUEDE TENER: el panel cuelga de
     `.cst-hd`, no de la barra, así que este `overflow` ya no lo recorta —que es
     exactamente lo que pasaba antes—. Si el árbol crece y las categorías no
     entran, la fila se corre en vez de meterse abajo del buscador. */
  overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.cst-nav::-webkit-scrollbar{display:none}
/* ⚠️ 18-09 · EL CORTE SUBIÓ DE 75rem A 82rem (1.200 → 1.312 px), Y SE VIO EN
   UNA CAPTURA. Esta máscara es la que avisa «hay más, deslizá» cuando las
   categorías no entran. Estaba puesta sólo abajo de 1.200, y la barra deja de
   entrar bastante antes: a 1.280 las 5 categorías miden 724 px y tienen 626, o
   sea que el corte caía en el medio de «Celular y PC» **sin ningún degradé** —
   se leía «C», a secas, como si la palabra estuviera rota.
   Medido: la barra entra a 1.440 (sobran 58) y a 1.366 le faltan 12 px, que es
   el padding del chevron y no se nota; de 1.312 para abajo ya falta de verdad,
   y ahí la máscara tiene que estar. Arriba de 82rem NO se pone, a propósito:
   con la barra entera el degradé apagaría el final de la última categoría sin
   que haya nada escondido. */
@media (max-width:82rem){
  .cst-nav{-webkit-mask-image:linear-gradient(90deg,#000 92%,transparent 100%);
           mask-image:linear-gradient(90deg,#000 92%,transparent 100%)}
}
/* ≤900 px las categorías se van al cajón: la barra desaparece y aparece el ☰. */
@media (max-width:56.25rem){ .cst-nav{display:none} }
.cst-nav-i{position:relative;flex:none}
.cst-nav-a{position:relative;display:inline-flex;align-items:center;gap:.3rem;
  min-height:2.75rem;padding:.55rem .7rem;font-size:.8438rem;font-weight:600;
  color:var(--ink2);border:0;background:none;font-family:inherit;cursor:pointer;
  border-radius:.7rem;white-space:nowrap;text-decoration:none;transition:color .25s var(--ease)}
/* ⭐ NS-2 · 20-09 · EL MISMO SUBRAYADO PARA LAS CATEGORÍAS Y PARA «NOSOTROS».
   Diego: «en el header Nosotros no tiene el efecto en el hover». Se define UNA
   vez para los dos, así son idénticos POR CONSTRUCCIÓN y no por coincidencia:
   dos reglas iguales escritas en dos lugares son dos que un día se despegan.
   🔴 Y SE DEFINE ACÁ, NO ALLÁ ABAJO CON EL RESTO DE `.cst-hd-sobre`: esas
      reglas viven adentro del bloque `cs-bloque:pagina-confianza`, donde rige
      «nada de fondos de acento — el celeste es LUZ, nunca relleno». La regla
      es buena y apunta a los BLOQUES de esa página; una línea de 2 px de la
      cabecera no es eso, pero el filtro no puede distinguirlo. La salida
      honesta no es esquivar el filtro: es poner la regla donde de verdad va,
      que es junto a su hermana. Sólo el ancho se ajusta allá abajo, porque el
      link tiene menos padding (y ESO sí está medido: ver la nota de PN-46).
   ⚠️ Abajo de 56,25 rem `.cst-hd-sobre` está en `display:none`, así que este
      `::after` no dibuja nada en celular. */
.cst-nav-a::after,
.cst-hd-sobre::after{content:'';position:absolute;left:.7rem;right:.7rem;bottom:.3rem;height:2px;
  background:var(--acento);border-radius:2px;transform:scaleX(0);transform-origin:left;
  transition:transform .35s var(--ease)}
@media (hover:hover) and (pointer:fine){
  .cst-nav-a:hover{color:var(--ink)}
  .cst-nav-a:hover::after{transform:scaleX(1)}
}
.cst-nav-a[aria-current="page"]::after,
.cst-nav-a[aria-expanded="true"]::after{transform:scaleX(1)}
.cst-nav-a[aria-current="page"],
.cst-nav-a[aria-expanded="true"]{color:var(--ink)}
.cst-nav-a:focus-visible{outline:2px solid var(--acento-txt);outline-offset:-2px}
.cst-chev{width:1em;height:1em;flex:none;opacity:.6;transition:transform .28s var(--ease)}
.cst-nav-a[aria-expanded="true"] .cst-chev{transform:rotate(180deg)}

/* ── EL PANEL ANCHO ──────────────────────────────────────────────────────── */
.cst-mm{position:absolute;left:0;right:0;top:100%;z-index:69;
  background:var(--sup);border-bottom:1px solid var(--line2);
  box-shadow:var(--sh-2);
  opacity:0;transform:translateY(-8px);pointer-events:none;
  transition:opacity .22s var(--ease),transform .26s var(--ease)}
/* §6.1: «Baja 8 px y aparece, con --ease. Sin rebote.» */
.cst-mm[data-abierto="1"]{opacity:1;transform:none;pointer-events:auto}
.cst-mm[hidden]{display:none!important}
.cst-mm-in{display:flex;gap:clamp(1.5rem,4vw,3rem);align-items:flex-start;
  padding:1.35rem 0 1.6rem}
.cst-mm-l{flex:1 1 auto;min-width:0;list-style:none;margin:0;padding:0;
  display:grid;gap:.1rem .75rem;
  /* 2 o 3 columnas según cuántas sean (§6.1). Lo decide el PHP con --cols. */
  grid-template-columns:repeat(var(--cols,2),minmax(0,1fr))}
.cst-mm-a{display:flex;align-items:baseline;gap:.45rem;min-height:2.5rem;
  padding:.45rem .7rem;border-radius:.65rem;font-size:.875rem;font-weight:600;
  color:var(--ink2);text-decoration:none;
  transition:background .18s var(--ease),color .18s var(--ease)}
@media (hover:hover) and (pointer:fine){
  .cst-mm-a:hover{background:var(--fondo);color:var(--ink)}
}
.cst-mm-a:focus-visible{outline:2px solid var(--acento-txt);outline-offset:-2px}
.cst-mm-a[aria-current="page"]{background:var(--fondo);color:var(--ink)}
.cst-mm-n{font-size:.6875rem;font-weight:700;color:var(--muted);
  font-variant-numeric:tabular-nums}
/* «Ver todo en X» va primero y se distingue: sin él la categoría madre queda
   inalcanzable desde el menú (§6.1). */
/* ⚠️ El hijo de la grilla es el <li>, NO el <a>. `grid-column` puesto en el <a>
   no hace absolutamente nada y «Ver todo» quedaba como una celda más, perdido
   entre las subcategorías en vez de encabezar el panel. */
.cst-mm-l > .cst-mm-li-todo{grid-column:1/-1}
.cst-mm-todo{color:var(--acento-txt);font-weight:750}
.cst-mm-todo .cst-mm-n{color:var(--acento-txt);opacity:.75}
/* La portada. Sólo se dibuja si HAY foto: hoy `PN-25` no cargó ninguna y el
   panel queda de subcategorías solas, que es lo correcto — dato que no
   tenemos, dato que no se muestra. */
.cst-mm-p{flex:0 0 15rem;max-width:15rem;text-decoration:none;display:block;
  border-radius:var(--r-m);overflow:hidden;background:var(--tile);
  box-shadow:var(--sh-foto);transition:transform .3s var(--ease)}
@media (hover:hover) and (pointer:fine){ .cst-mm-p:hover{transform:translateY(-3px)} }
.cst-mm-p:focus-visible{outline:2px solid var(--acento-txt);outline-offset:3px}
.cst-mm-p img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.cst-mm-p b{display:block;padding:.7rem .9rem .15rem;font-size:.8125rem;
  font-weight:750;color:var(--chip-ink)}
.cst-mm-p span{display:block;padding:0 .9rem .8rem;font-size:.75rem;color:var(--muted)}
@media (max-width:62.5rem){ .cst-mm-p{display:none} }

/* ── 🧭 Q2 · LAS OTRAS TRES FORMAS DEL DESPLEGABLE ───────────────────────────
   La de arriba (`panel`) es la que corre desde que la tienda abrió y no se
   tocó. Estas tres se prenden desde Canales → Web → Diseño → Menú, y las
   cuatro comparten contenedor, `id`, `data-abierto` y la clase `.cst-mm-a` de
   cada link — así el teclado, el hover y el Escape son los mismos POR
   CONSTRUCCIÓN, no por haberlos copiado bien tres veces.
   🔴 Nada de esto se ve abajo de 900 px: ahí la barra está en `display:none`
      y el menú es el cajón del ☰. */

/* El fondo, la línea y la sombra son del CONTENEDOR en las formas que ocupan
   todo el ancho, y de la CAJA de adentro en la lista, que es angosta. */
.cst-mm[data-forma="lista"]{background:none;border-bottom:0;box-shadow:none}

/* ── B · LISTA ─────────────────────────────────────────────────────────────
   Columna angosta colgada del nombre de la categoría. `--mm-x` lo escribe el
   JS al abrir con la posición del disparador; sin JS cae en 0 y la columna
   queda pegada al borde — fea pero entera. */
/* 🔴 EL CORRIMIENTO VA TOPEADO, Y ESTO LO DESTAPO UNA MEDICION CON CHROME.
   Primera escritura: `margin-left:var(--mm-x)` pelado. Con la ultima categoria
   de la barra como disparador, `--mm-x` vale casi el ancho de la pantalla y la
   columna de 17,5rem se iba ENTERA para afuera -medido: el borde derecho caia
   en 476 px con 390 de pantalla-. El `max-width` no salvaba nada porque lo que
   empuja es el margen, no el ancho.
   El tope es puro CSS: nunca mas a la derecha que el ancho del contenedor menos
   la columna y un respiro. `min()` elige el menor de los dos, asi que mientras
   entra manda `--mm-x` y cuando no, manda el tope. */
/* ⚠️ `display:block` EXPLÍCITO, Y ES UNA COLISIÓN DE CASCADA EVITADA A TIEMPO.
   Este elemento lleva también `.cst-mm-in`, que vale `display:flex` con
   `gap:clamp(1.5rem,4vw,3rem)`. Sin declarar nada, la caja de la lista queda
   siendo un contenedor flex que funciona DE CASUALIDAD, porque hoy tiene un
   solo hijo —el `<ul>`— y con un hijo el `gap` no se nota. El día que alguien
   le agregue un segundo elemento (un título, un «ver más»), aparecen tres
   centímetros de aire entre los dos y nadie va a saber de dónde salen. Las dos
   reglas tienen la misma especificidad y ésta gana sólo por venir después en
   el archivo: eso no es una regla, es una coincidencia de orden. */
.cst-mm-lista{display:block;width:17.5rem;max-width:calc(100% - 2rem);
  margin-left:min(var(--mm-x,0px), max(0px, calc(100% - 17.5rem - 1rem)));
  padding:.4rem;
  background:var(--sup);border-radius:var(--r-m);border:1px solid var(--line2);
  box-shadow:var(--sh-2)}
.cst-mm-lista ul{list-style:none;margin:0;padding:0}
.cst-mm-lista .cst-mm-a{display:flex;align-items:center;gap:.5rem}
.cst-mm-lista .cst-mm-n{margin-left:auto}
/* «Ver todo» encabeza y se separa con una hairline, no con un fondo: un bloque
   lleno adentro de una caja chica se come la caja. */
.cst-mm-lista .cst-mm-todo{border-bottom:1px solid var(--line2);
  border-radius:.65rem .65rem 0 0;margin-bottom:.25rem}

/* ── C · CHIPS ─────────────────────────────────────────────────────────────
   La misma pastilla que ya usa la portada de cada categoría (§6.2). Cada una
   flota con su propia sombra celeste y sube al hover: halo, no barra al
   costado. Es la que menos tapa de las cuatro (80 px medidos a 1440). */
.cst-mm-chips{display:flex;flex-wrap:wrap;gap:.55rem;padding:1.05rem 0 1.15rem}
.cst-mm-chip{display:inline-flex;align-items:center;gap:.5rem;min-height:2.75rem;
  padding:.55rem 1rem;border-radius:999px;background:var(--sup);box-shadow:var(--sh-1);
  font-size:.85rem;font-weight:700;color:var(--ink2);text-decoration:none;
  transition:transform .26s var(--ease),box-shadow .26s var(--ease),color .2s var(--ease)}
@media (hover:hover) and (pointer:fine){
  .cst-mm-chip:hover{transform:translateY(-2px);box-shadow:var(--sh-2);color:var(--ink);background:var(--sup)}
}
.cst-mm-chip[aria-current="page"]{color:var(--ink);box-shadow:var(--sh-2)}
/* 🔴 «Ver todo» en celeste CLARO con tinta oscura, nunca blanco sobre
   `--acento`: está medido que blanco sobre #92c0e4 es ilegible. Y un solo azul
   fuerte por pantalla — el fuerte es el de «Agregar al carrito» (VP-68). */
.cst-mm-chip-todo{background:var(--celeste);color:var(--ink);font-weight:800}
.cst-mm-chip-todo .cst-mm-n{color:var(--acento-txt);opacity:1}
@media (hover:hover) and (pointer:fine){
  .cst-mm-chip-todo:hover{background:var(--celeste)}
}

/* ── D · BANDEJAS ──────────────────────────────────────────────────────────
   Grilla de dos columnas de bloques grandes: la más fácil de tocar. Sin dibujo
   por categoría, porque el árbol no guarda ícono — lleva la cantidad de
   productos, que es un dato que sí tenemos. */
/* 🔴 LA GRILLA VA TOPEADA, Y ESTO LO DESTAPO UNA CAPTURA MIRADA. Primera
   escritura: dos columnas del ancho del `.cst-wrap`. A 1440 cada bandeja medía
   casi 700 px y el nombre quedaba a NOVECIENTOS PÍXELES de su propio número —
   se leían como dos datos sueltos en vez de uno. Es el «parece re poco
   importante» al revés: ocupa muchísimo y no dice más.
   Dos columnas, sí, pero de un ancho que se pueda leer de una mirada. */
/* 🔴 SE TOPEAN LAS COLUMNAS, NO EL TOTAL — y esto lo corrigio la SEGUNDA
   captura. Con `max-width` en este mismo elemento la grilla quedaba CENTRADA,
   porque este elemento ES el `.cst-wrap` y el wrap se centra solo: el menu
   terminaba flotando en el medio de la pantalla, despegado del logo y de la
   barra. Diego ya lo dijo una vez con todas las letras: «esta muy en el medio,
   no esta a la derecha» — lo que se dibuja se ancla, no flota.
   Topeando la COLUMNA el bloque arranca donde arranca todo lo demas y las
   bandejas se quedan de un ancho que se lee de una mirada. */
.cst-mm-band{display:grid;grid-template-columns:repeat(2,minmax(0,23rem));
  justify-content:start;gap:.5rem;padding:1.1rem 0 1.25rem}
.cst-mm-tile{display:flex;align-items:center;gap:.75rem;min-height:3.5rem;
  padding:.7rem .9rem;border-radius:var(--r-m);background:var(--sup);box-shadow:var(--sh-1);
  text-decoration:none;color:var(--ink2);
  transition:transform .26s var(--ease),box-shadow .26s var(--ease)}
@media (hover:hover) and (pointer:fine){
  .cst-mm-tile:hover{transform:translateY(-2px);box-shadow:var(--sh-2);color:var(--ink)}
}
.cst-mm-tile[aria-current="page"]{color:var(--ink);box-shadow:var(--sh-2)}
.cst-mm-tile em{font-style:normal;font-size:.875rem;font-weight:700;min-width:0;
  overflow-wrap:anywhere}
/* El número es el que manda en la bandeja, así que va en el tono del área y
   con cifras de ancho fijo — no es una aclaración al costado del nombre. */
.cst-mm-tile .cst-mm-n{margin-left:auto;font-size:1rem;font-weight:800;
  color:var(--acento-txt);letter-spacing:-.02em}
.cst-mm-tile-todo{grid-column:1/-1;background:var(--celeste);color:var(--ink)}
@media (hover:hover) and (pointer:fine){
  .cst-mm-tile-todo:hover{background:var(--celeste)}
}
/* A una sola columna cuando no entran dos sin partir los nombres. */
@media (max-width:62.5rem){ .cst-mm-band{grid-template-columns:minmax(0,23rem)} }

/* ── EL CAJÓN DEL ☰ (celular, ≤900 px) ───────────────────────────────────────
   §6.1: entra DESDE LA IZQUIERDA a min(88vw, 380px), con ACORDEÓN adentro.
   No es una pila de pantallas: con dos niveles, el acordeón deja ver dónde
   estás y qué más hay sin gestos de volver. */
/* 🔴 `.cst-hd-r .cst-ham` Y NO `.cst-ham` A SECAS. Es una colisión de cascada de
   manual y ya se comió una revisión: `.cst-ham{display:none}` (0,1,0) vive en la
   línea 762 y `.cst-ib{…display:grid…}` (0,1,0) en la 866. Misma especificidad →
   gana el ÚLTIMO → el ☰ se dibujaba en el monitor, al lado del carrito. No se ve
   leyendo el CSS: hay que mirar la pantalla o contar especificidades. Con el
   padre adelante son (0,2,0) y le gana sin depender del orden. */
.cst-hd-r .cst-ham{display:none}
@media (max-width:56.25rem){ .cst-hd-r .cst-ham{display:grid} }

/* ═══ ⭐ M2 · 11-10 · LA CABECERA DEL CELULAR SE QUEDA CON CUATRO COSAS ══════
                                                       (sky-menu2 · pedido 193)
   Diego lo dijo TRES VECES: *«el header está sobrepasado de cosas; podemos
   meter cosas como lo de la cuenta y el botón de salir en el menú
   desplegable»*. En el teléfono la fila tenía ☰ + carrito + cuenta + «Salir»
   apretados contra el borde derecho, más el logo y el buscador. Ahora quedan
   LOGO · BUSCADOR · CARRITO · ☰, y la cuenta y las dos salidas viven adentro
   del cajón, que es el menú de la cabecera en celular.

   🔴 SÓLO EN CELULAR, Y NO ES UN MATIZ: arriba de 56,25 rem **no hay ☰**
   —`.cst-hd-r .cst-ham` está en `display:none` dos renglones más arriba—, así
   que no hay cajón que abrir. Esconder la cuenta en el monitor la dejaría sin
   NINGUNA puerta. El corte es el de siempre, el mismo de `.cst-nav`: un solo
   escalón en toda la hoja.

   🔴🔴 `:not(.cst-hd-volver)` NO ES DECORACIÓN. La salida de la puerta legal
   —la única que tiene esa pantalla, la que lleva a «Abrimos pronto»— comparte
   la clase `.cst-salir` con el «Salir» del pase. Sin esa exclusión, a 390 px la
   página legal se quedaba SIN UN SOLO CONTROL, que es exactamente el defecto
   que se arregló el 09-10. Y ahí tampoco hay cajón donde ponerla: con la puerta
   legal el árbol del menú viene en cero a propósito.

   ⚠️ La cabecera NO se queda sin el dato: el ancla de las dos mitades es la
   misma de `.cst-hd-sobre` / «Nosotros» —escondido de un lado, fila del cajón
   del otro—. Lo mide `prueba_menu_cabecera.php`, que exige que la cuenta esté
   en UNO de los dos a cada ancho, nunca en ninguno. */
@media (max-width:56.25rem){
  .cst-hd-r .cst-cu,
  .cst-hd-r > .cst-cu-b,
  .cst-hd-r .cst-salir:not(.cst-hd-volver){display:none}
}

/* === HD2 · 11-10 · EL LOGO AL CENTRO (voto de Diego, opcion 2) =============
                                                              (sky-hd2c)
   Diego voto el mockup hd2 con «VA ASI»: *«opcion 2 logo al centro»*. En el
   telefono y en el iPad parado la fila de arriba queda MENU · LOGO · CARRITO,
   un boton contra cada borde y la marca centrada de verdad, y el buscador
   sigue abajo, entero, como hoy. El alto del header no cambia ni un pixel.

   COMO SE CENTRA SIN MENTIR: la fila es UNA celda de grilla y en esa misma
   celda viven dos cosas superpuestas.
     · el grupo de controles (.cst-hd-r) ocupa la celda entera, con el menu
       empujado contra el borde izquierdo por su margen automatico y el
       carrito contra el derecho;
     · el logo se centra en la celda (justify-self:center).
   Como la celda mide lo mismo que la fila, el logo queda a la MISMA distancia
   de los dos bordes de la pantalla sin importar cuanto midan los botones de
   cada lado. Una grilla de tres columnas con el logo en la del medio
   centraria contra los botones, no contra la pantalla.

   POR QUE NO display:contents EN EL GRUPO, que seria lo mas corto: un
   elemento con display:contents no tiene caja, asi que su rectangulo mide
   cero, y medir_asoma.mjs mide el hueco muerto de la derecha justamente con
   el rectangulo de .cst-hd-r. Con contents esa medicion daria la fila
   entera como hueco. El grupo sigue siendo una caja real y llega al borde.

   EL LOGO PINTA ARRIBA DEL GRUPO, y no es decoracion: el grupo cubre la fila
   entera y viene despues en el HTML, asi que si los dos pintaran en el mismo
   plano el dedo que toca el logo le pegaria a la caja del grupo, que no lleva
   a ningun lado. Hoy ya lo sostiene el position:relative que le pone al logo
   el bloque del area de toque (el del ::after de 44 px, mas abajo); el
   z-index lo dice aca para no depender de ese otro bloque: en un item de
   grilla el z-index vale aunque el logo quede sin posicion. Medido: sin las
   DOS cosas, el centro del logo es de la caja del grupo (HM-105 en rojo); con
   cualquiera de las dos, es del logo.
   El menu y el carrito no se tocan con el logo en ningun ancho: a 320 quedan
   63 px de aire de cada lado (HM-102).

   EL ORDEN DEL TABULADOR NO CAMBIA: es el mismo de hoy (logo, buscador,
   menu, carrito). Mover el menu en el HTML para que vaya primero cambiaria
   tambien el escritorio, donde la regla es no mover un pixel.

   SOLO DEBAJO DE 56,25 rem, el corte de siempre (donde existe el menu).
   Arriba de eso la cabecera es la de escritorio y queda IDENTICA: se mide a
   1.440 y a 2.560 antes y despues, al pixel.
   Y NO CON LA PUERTA LEGAL: esa cabecera no tiene menu ni carrito, solo el
   logo y la salida a la pantalla de apertura, y un logo centrado con un solo
   boton al costado dejaria un hueco sin razon. */
@media (max-width:56.25rem){
  .cst-hd:not(.cst-hd-legal) .cst-hd-in{display:grid;grid-template-columns:minmax(0,1fr)}
  .cst-hd:not(.cst-hd-legal) .cst-hd-in > .cst-marca{grid-row:1;grid-column:1;
    justify-self:center;z-index:1}
  .cst-hd:not(.cst-hd-legal) .cst-hd-r{grid-row:1;grid-column:1;margin:0;
    justify-content:flex-end}
  .cst-hd:not(.cst-hd-legal) .cst-hd-r .cst-ham{margin-right:auto}
  .cst-hd:not(.cst-hd-legal) .cst-hd-in > .cst-bus{grid-row:2;grid-column:1}
}
/* El velo. Tocar afuera cierra (§6.1). */
.cst-velo{position:fixed;inset:0;z-index:88;background:color-mix(in srgb,var(--negro) 42%,transparent);
  opacity:0;pointer-events:none;transition:opacity .3s var(--ease)}
.cst-velo[data-abierto="1"]{opacity:1;pointer-events:auto}
.cst-velo[hidden]{display:none!important}
.cst-caj{position:fixed;top:0;left:0;z-index:89;
  width:min(88vw,380px);
  /* 🔴 100dvh y no 100vh: en iOS la barra del navegador se mete y con `vh` el
     último ítem del cajón queda debajo del borde, imposible de tocar. */
  height:100dvh;
  display:flex;flex-direction:column;
  background:var(--sup);
  /* El halo cae hacia la DERECHA, que es adonde está el contenido. */
  box-shadow:2px 0 10px rgba(60,69,82,.07), 26px 0 58px rgba(var(--halo),.62);
  transform:translateX(-100%);
  transition:transform .38s var(--ease);
  padding-top:env(safe-area-inset-top);
  padding-bottom:env(safe-area-inset-bottom);
  padding-left:env(safe-area-inset-left)}
.cst-caj[data-abierto="1"]{transform:none}
.cst-caj[hidden]{display:none!important}
.cst-caj-h{display:flex;align-items:center;gap:.75rem;flex:none;
  padding:.75rem 1rem;border-bottom:1px solid var(--line2)}
.cst-caj-h .cst-marca{height:1.8rem;--logo-bg:var(--sup)}
.cst-caj-x{margin-left:auto}
/* 🔴 SCROLL PROPIO + `overscroll-behavior:contain`. Con cinco categorías
   desplegadas no entra en una pantalla, y sin `contain` el dedo termina
   scrolleando LA PÁGINA DE ATRÁS al llegar al final del cajón. */
.cst-caj-l{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  list-style:none;margin:0;padding:.5rem .6rem 1.5rem}
.cst-caj-l li{border-bottom:1px solid var(--line2)}
.cst-caj-l li:last-child{border-bottom:0}
/* 🔴 DOS ZONAS, Y ES LA REGLA MÁS IMPORTANTE DE ACÁ (§6.1): el NOMBRE navega a
   la categoría y el CHEVRON abre el acordeón. Que toda la fila haga una sola
   cosa es el bug más frecuente de los menús de celular — o no podés entrar a la
   madre, o no podés ver qué tiene adentro. */
.cst-caj-f{display:flex;align-items:stretch;gap:.25rem}
.cst-caj-a{flex:1;min-width:0;display:flex;align-items:center;
  min-height:44px;padding:.6rem .7rem;border-radius:.7rem;
  font-size:.9375rem;font-weight:650;color:var(--ink);text-decoration:none}
.cst-caj-a[aria-current="page"]{color:var(--acento-txt)}
.cst-caj-a:focus-visible,.cst-caj-b:focus-visible,.cst-caj-s:focus-visible{
  outline:2px solid var(--acento-txt);outline-offset:-2px}
/* 44×44 de verdad para el chevron (§6.1 · AC-14). */
.cst-caj-b{flex:none;width:44px;height:44px;align-self:center;
  display:grid;place-items:center;border:0;background:none;cursor:pointer;
  color:var(--ink2);border-radius:.7rem;font-size:1rem}
.cst-caj-b .cst-chev{transition:transform .3s var(--ease);opacity:.7}
.cst-caj-b[aria-expanded="true"] .cst-chev{transform:rotate(180deg)}
/* El acordeón: `grid-template-rows` de 0fr a 1fr anima el alto DE VERDAD, sin
   tener que medirlo con JavaScript ni clavar un max-height a ojo. */
.cst-caj-sub{display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .3s var(--ease)}
.cst-caj-sub[data-abierto="1"]{grid-template-rows:1fr}
.cst-caj-sub > ul{min-height:0;overflow:hidden;list-style:none;margin:0;padding:0}
.cst-caj-sub li{border-bottom:0}
.cst-caj-s{display:flex;align-items:center;gap:.5rem;min-height:44px;
  padding:.55rem .7rem .55rem 1.4rem;border-radius:.7rem;
  font-size:.875rem;font-weight:600;color:var(--ink2);text-decoration:none}
.cst-caj-s[aria-current="page"]{color:var(--acento-txt);font-weight:750}
.cst-caj-s .cst-mm-n{margin-left:auto}
.cst-caj-todo{color:var(--acento-txt);font-weight:750}
.cst-hd-r{display:flex;align-items:center;gap:.25rem;flex:none;margin-left:.35rem}
/* AC-14: 44×44 de verdad, no 38. */
/* Salir: un link de texto, no un botón de acción. Sacar la sesión no es algo
   que uno quiera apretar sin querer, así que no compite visualmente con nada.
   44 px de alto para el dedo (AC-14). */
/* Paginador. Los extremos apagados se muestran igual, en gris: si desaparecen,
   los botones cambian de lugar entre páginas y el dedo falla. */
.cst-pag{display:flex;align-items:center;justify-content:center;gap:1rem;
  flex-wrap:wrap;margin-top:2.2rem}
.cst-pag-b{display:inline-flex;align-items:center;gap:.4rem;min-height:44px;
  padding:0 1rem;border-radius:12px;border:1px solid var(--line);
  background:var(--sup);color:var(--ink);text-decoration:none;
  font-size:.9rem;font-weight:650}
@media (hover:hover) and (pointer:fine){
  .cst-pag-b:hover{border-color:var(--acento);
    box-shadow:0 4px 14px color-mix(in srgb,var(--acento) 30%,transparent)}
}
.cst-pag-b:focus-visible{outline:2px solid var(--acento-txt);outline-offset:3px}
.cst-pag-off{opacity:.38;box-shadow:none}
.cst-pag-n{font-size:.85rem;color:var(--suave);font-variant-numeric:tabular-nums}
/* El globito del carrito. Va pegado arriba a la derecha del ícono y no empuja
   nada: si moviera el ícono, el encabezado bailaría al agregar un producto. */
.cst-cart{position:relative}
/* 🔴 VP-68 · VA EN --pip, NO EN UN AZUL. El globito informa; el botón de
   «Agregar» pide un toque. Ver la nota larga en el bloque de tokens.
   ⚠️ Y el aro va en `var(--sup)`: hasta hoy decía `var(--superficie)`, un token
   que NO EXISTE en este archivo — el navegador tiraba la declaración entera y
   el globito se quedaba sin su aro, pegado al ícono del carrito. */
.cst-cart-n{position:absolute;top:2px;right:2px;min-width:17px;height:17px;
  padding:0 4px;border-radius:9px;background:var(--pip);color:var(--pip-txt);
  font-size:.62rem;font-weight:800;line-height:17px;text-align:center;
  font-variant-numeric:tabular-nums;box-shadow:0 0 0 2px var(--sup)}
.cst-salir{display:inline-flex;align-items:center;min-height:44px;padding:0 .7rem;
  font-size:.85rem;font-weight:600;color:var(--suave);text-decoration:none;
  border-radius:10px;white-space:nowrap}
@media (hover:hover) and (pointer:fine){
  .cst-salir:hover{color:var(--titulo);background:var(--fondo)}
}
.cst-salir:focus-visible{outline:2px solid var(--acento-txt);outline-offset:3px}

/* ═══ SKY-MENU · LA SALIDA DE UNA PAGINA SERVIDA POR LA PUERTA LEGAL ═════════
   Con la tienda cerrada y sin pase, la cabecera de las seis paginas legales se
   queda con el logo, Nosotros y ESTO. Es el unico control de esa pantalla que
   no rebota, asi que tiene que verse como un destino y no como un renglon mas:
   pildora con halo celeste -la firma de la casa- y la letra en el acento
   oscurecido, que es el que pasa AA. NUNCA el acento de fondo con texto encima.
   El ancla a la DERECHA: con el buscador fuera, nada empuja al grupo de
   controles contra el borde, y un control se apoya en un borde. */
.cst-hd-legal .cst-hd-r{margin-left:auto}
.cst-hd-volver{color:var(--acento-txt);font-weight:700;
  padding:0 .85rem;border-radius:999px;background:var(--sup);
  box-shadow:0 1px 2px color-mix(in srgb,var(--acento) 55%,transparent),
             0 6px 18px color-mix(in srgb,var(--acento) 38%,transparent)}
@media (hover:hover) and (pointer:fine){
  .cst-hd-volver:hover{color:var(--acento-txt);background:var(--sup);
    box-shadow:0 1px 2px color-mix(in srgb,var(--acento) 70%,transparent),
               0 10px 26px color-mix(in srgb,var(--acento) 52%,transparent)}
}
@media (max-width:30rem){
  /* A 390 la cabecera son dos filas y el logo ya se lleva la mitad: la pildora
     se achica de letra, no de area de toque. Los 44 px de alto los sigue
     poniendo .cst-salir. */
  .cst-hd-volver{font-size:.8rem;padding:0 .7rem}
}

/* ═══ 👤 CU-21 · LA CUENTA, EN LA CABECERA ═══════════════════════════════════
   Diego, 12-09: *«¿no está el botón de crear cuenta en el header?»*. No estaba.
   `/ar/cuenta` funcionaba, estaba probada, y NO LA LINKEABA NADIE: `grep` de la
   ruta en este archivo y en `tienda.php` daba **cero**. Se llegaba escribiendo
   la dirección a mano. Es, otra vez, la forma que ya se pagó cinco veces esta
   semana — construido, probado, y sin camino.

   🔴 UNA PUERTA, NO DOS. «Entrar» y «Crear cuenta» compitiendo en la cabecera
   es ruido y además jerarquía falsa: las dos llevan a LA MISMA pantalla, que es
   la que ya explica las tres salidas (entrar, crear, y comprar sin cuenta, que
   pesa igual que las otras dos a propósito). La cabecera tiene un solo trabajo
   acá: que la cuenta exista.

   🔴 PESA COMO EL CARRITO, NI UN GRAMO MÁS: mismo alto, mismo gris `--ink2`,
   mismo hover. Lo único que grita en esta tienda es «Agregar al carrito». Una
   cuenta pintada de acento le sacaría el turno a la única acción que da plata —
   y el acento, además, está reservado: es el halo, no el relleno.

   📱 ABAJO DE 56,25 rem SE VA EL TEXTO Y QUEDA EL ÍCONO, 44×44 de verdad. Lo
   que NO pasa nunca es que desaparezca: ése es exactamente el agujero por el
   que se cae `.cst-nav`, que a esa misma medida se esconde entera. Una cuenta
   que sólo existe en el monitor es la ausencia de hoy con otra forma. */
.cst-cu{position:relative;flex:none}
/* 🗳️ VOTO-10 (14-09) · SÓLO EL ÍCONO, SIEMPRE — votado con el header nuevo
   (Directo en PC, Central en celular): «sólo el ícono de usuario, sin la
   palabra "Entrar"». Antes era una pastilla de ancho libre —cuadrada sin
   nombre, más ancha con el nombre adentro— que se achicaba abajo de 56,25 rem.
   Ahora es UN solo cuadrado, a cualquier ancho: el mismo tamaño que el carrito
   y el ☰ (2,75 rem, AC-14), así la cabecera no cambia de alto ni de forma
   cuando alguien entra a su cuenta. El nombre no se pierde — se mudó adentro
   del panel, ver `.cst-cu-nom`. */
.cst-cu-b{display:inline-flex;align-items:center;justify-content:center;
  width:2.75rem;min-width:2.75rem;height:2.75rem;min-height:2.75rem;padding:0;
  border-radius:.85rem;color:var(--ink2);border:0;background:none;cursor:pointer;
  font-family:inherit;line-height:1;list-style:none;
  transition:background .25s var(--ease),color .25s var(--ease),transform .25s var(--ease)}
/* El triángulo nativo del <summary>, en los dos motores. Sin las dos líneas
   aparece un ▸ del sistema al lado del ícono — el mismo problema que los emojis
   de control: lo dibuja el sistema operativo y no se parece a nada nuestro. */
.cst-cu-b::-webkit-details-marker{display:none}
.cst-cu-b::marker{content:""}
.cst-cu-b .cst-ico{font-size:1.125rem;flex:none}
@media (hover:hover) and (pointer:fine){
  .cst-cu-b:hover{background:var(--fondo2);color:var(--ink);transform:translateY(-2px)}
}
.cst-cu-b:focus-visible{outline:2px solid var(--acento-txt);outline-offset:3px}
.cst-cu[open] > .cst-cu-b{background:var(--fondo2);color:var(--ink)}
/* ⭐ EL PANEL FLOTA, Y FLOTA CON EL HALO DE LA CASA. Es lo único de este bloque
   que lleva color: `--sh-3`, el mismo halo celeste de las cards. Sin borde de
   acento, sin barra al costado — el color vive en la sombra.
   🔴 ANCLADO AL BORDE DERECHO (`right:0`), no centrado bajo el control: es la
   regla de Diego («está muy en el medio, no está a la derecha»), y además es lo
   único que garantiza que a 390 px el panel no se salga de la pantalla. */
.cst-cu-p{position:absolute;top:calc(100% + .5rem);right:0;z-index:80;
  /* 🔴 `width:max-content` + `break-word`, y NO `overflow-wrap:anywhere`.
     `anywhere` es el único de los dos que ACHICA el ancho intrínseco, así que
     el panel se encogía hasta el `min-width` y partía el mail al medio —
     «diegolanzzavechia@corpskyla.» / «com»— teniendo lugar de sobra al lado.
     `break-word` parte igual la palabra impartible cuando de verdad no entra,
     pero no miente sobre cuánto mide. Se vio en el render, no en el código. */
  width:max-content;min-width:13.5rem;max-width:min(21rem,calc(100vw - 2rem));
  padding:.4rem;border-radius:1rem;background:var(--sup);
  /* «Más halo, menos borde»: la línea no es gris, es el MISMO celeste del halo
     bajado a un 22 %. Sirve para que el panel blanco se despegue de una ficha
     de producto blanca, y no agrega un color más a la pantalla. */
  border:1px solid color-mix(in srgb,var(--acento) 22%,transparent);
  box-shadow:var(--sh-3)}
/* 📱 EN EL CELULAR EL PANEL SE ANCLA AL BORDE DE LA PÁGINA, NO AL BOTÓN.
   Diego: «está muy en el medio, no está a la derecha». Colgado del control, el
   panel quedaba flotando en el medio-izquierda —el botón es el tercero de
   cuatro—, y se lee como si se hubiera caído ahí.
   El truco es el mismo que ya usa el buscador y está explicado en su bloque:
   con `position:static` el bloque de referencia deja de ser este control y pasa
   a ser `.cst-hd-in`, que ES el margen de la página. Así `right:0` significa el
   borde de la pantalla y calza exacto a cualquier ancho — sin un número mágico
   que se rompa el día que «Salir» desaparezca. */
@media (max-width:56.25rem){ .cst-cu{position:static} }
/* 🗳️ VOTO-10 · EL NOMBRE, MUDADO ACÁ ADENTRO. Vivía al lado del ícono en la
   cabecera; con el ícono desnudo se lee apenas se abre el panel — primera
   línea, antes del mail. Ver la nota grande de `.cst-cu-b`. */
.cst-cu-nom{margin:0;padding:.6rem .65rem 0;font-size:.9375rem;font-weight:800;
  color:var(--ink);overflow-wrap:break-word;line-height:1.3}
.cst-cu-m{margin:0;padding:.5rem .65rem .55rem;font-size:.75rem;font-weight:600;
  color:var(--suave);
  /* 🔴 EL MAIL LARGO SE CORTA DONDE HAGA FALTA. Sin esto, `unaDireccionMuy
     LargaSinEspacios@…` estira el panel y a 390 px se lleva la pantalla puesta:
     `overflow-wrap` sola no alcanza en una palabra sin ningún punto de corte. */
  overflow-wrap:break-word;line-height:1.35}
.cst-cu-sep{height:1px;margin:.15rem .3rem .3rem;background:var(--line2)}
.cst-cu-a{display:flex;align-items:center;gap:.55rem;width:100%;
  min-height:2.75rem;padding:.5rem .65rem;border-radius:.7rem;
  border:0;background:none;cursor:pointer;font-family:inherit;text-align:left;
  font-size:.875rem;font-weight:650;color:var(--ink);text-decoration:none}
.cst-cu-a .cst-ico{font-size:1rem;color:var(--ink2);flex:none}
@media (hover:hover) and (pointer:fine){
  .cst-cu-a:hover{background:var(--fondo)}
}
.cst-cu-a:focus-visible{outline:2px solid var(--acento-txt);outline-offset:-2px}
/* 🔴 14-09 · SALIR, EN ROJO. Diego: «al apretar en el header el botón de perfil,
   el de salir debe verse rojo, para distinguirlo mejor». Acá decía lo contrario
   —«no se pinta de rojo»— y el argumento (que salir no es destructivo) no era el
   problema que él estaba mirando: en gris `--suave`, «Salir» se leía como una
   tercera línea de información abajo del mail, no como la única acción que
   cambia de estado del panel. El rojo no está avisando «peligro»: está
   SEPARANDO. Es el único renglón del panel que hace algo irreversible de un
   toque, y tiene que distinguirse de «Mis pedidos» a primera vista.
   ⚠️ Y ES EL DE LA CUENTA, NO EL DE LA COMPUERTA. `.cst-salir` —el pase, que
   desaparece el día que la tienda abra— queda EXACTAMENTE como estaba: pintarlo
   también sería dos rojos en la misma cabecera diciendo cosas distintas.
   📐 Contraste MEDIDO (no estimado): #c23434 sobre --sup (#ffffff) = 5,48:1 y
   sobre el fondo del hover (--fondo #f1f5fa) = 5,00:1 → los dos pasan AA para
   texto chico (pide 4,5).
   El ícono acompaña al texto: un `--suave` al lado de un rojo se lee como que
   algo quedó a medio pintar. */
.cst-cu-s{color:var(--bad);font-weight:700}
.cst-cu-s .cst-ico{color:var(--bad)}
@media (hover:hover) and (pointer:fine){
  /* El halo de la casa, en el tono del renglón. Más halo, menos borde. */
  .cst-cu-s:hover{background:color-mix(in srgb,var(--bad) 8%,transparent)}
}
.cst-cu-s:focus-visible{outline-color:var(--bad)}
.cst-cu-f{margin:0}
.cst-ib{width:2.75rem;height:2.75rem;border-radius:.85rem;display:grid;place-items:center;
  font-size:1.125rem;color:var(--ink2);border:0;background:none;cursor:pointer;
  transition:background .25s var(--ease),color .25s var(--ease),transform .25s var(--ease)}
@media (hover:hover) and (pointer:fine){
  .cst-ib:hover{background:var(--fondo2);color:var(--ink);transform:translateY(-2px)}
}
/* ── VP-60 · LA LUNITA SE FUE, Y DESPUÉS SE FUE EL TEMA ENTERO ──────────────
   Primero (07-09) Diego pidió sacar el interruptor: «recordá sacar la luna de
   modo noche tanto en PC como en celular». Se fueron `.cst-luna`, `.cst-sol`,
   el <button data-cs-tema>, su oyente y los símbolos `i-moon`/`i-sun` del
   sprite. Borrados, no escondidos con `display:none`: una regla sin nadie que
   la use es la forma en que un archivo empieza a mentir sobre lo que hace.

   Después (08-09) pidió el resto: «tema oscuro, sacarlo, no lo queremos». Así
   que ya no quedan ni los tokens — ver la nota grande arriba, donde vivían.

   📌 Queda anotado el orden porque explica por qué durante un día hubo tokens
   de oscuro que no se podían encender: no fue un descuido, fue el estado
   intermedio entre dos pedidos. */

/* ── VP-77 · VOTO-10 · EL BUSCADOR ──────────────────────────────────────────
   UN SOLO formulario, sin un script para mostrarlo u ocultarlo — antes era una
   lupa de 44×44 que al tocarla desplegaba el campo como panel; el header
   votado (Central en celular) lo cambia por la barra ENTERA, siempre puesta:
     · celular (Central)  → la barra completa, de punta a punta, en su propio
                             renglón debajo de la marca y los íconos — «grande
                             y protagonista», como votó Diego;
     · monitor (Directo)  → el mismo campo, compacto, al lado de los íconos
                             (ver `@media (min-width:56.25rem)` más abajo).
   El campo YA NO SE COLAPSA en ningún ancho, así que tampoco hace falta el
   truco de ancho-0-y-opacidad-0 que necesitaba para seguir siendo enfocable
   estando «cerrado»: ahora está simplemente abierto siempre. El `<label
   for="cst-q">` de siempre queda como ícono decorativo en celular —tocarlo
   enfoca el campo, de yapa, por HTML puro— y se sigue ocultando en monitor.
   `position:relative` en `.cst-bus`: la barra ES el bloque de referencia del
   desplegable de sugerencias en los dos anchos, porque en los dos anchos la
   barra ocupa el ancho real de la fila — ya no hace falta colgar del margen de
   la página con un `position:static` en el padre. */
/* 🔴 SIN ARO NI BORDE FINITO — Diego lo rechazó explícitamente para este
   header (VOTO-10): en el mockup votado (hd1/hd3) el buscador es sombra pura,
   sin un solo `inset`. VOTO-03 (13-09) le había puesto un aro interior tenue
   del acento; acá se saca a propósito, es más halo y CERO borde, ni siquiera
   uno de un `color-mix` casi invisible. */
.cst-bus{position:relative;display:flex;align-items:center;flex:1 1 100%;order:5;
  margin-left:0;height:3rem;padding:0 .3rem 0 1rem;border-radius:99px;
  background:var(--sup);
  box-shadow:0 1px 2px rgba(60,69,82,.05), 0 6px 18px rgba(var(--halo),.55);
  transition:box-shadow .3s var(--ease)}
.cst-bus:focus-within{box-shadow:0 1px 2px rgba(60,69,82,.05), 0 10px 26px rgba(var(--halo),.8)}
.cst-bus-l{display:grid;place-items:center;width:1.9rem;height:2.75rem;flex:none;
  font-size:1.05rem;color:var(--ink2);cursor:pointer}
/* 🔴 14-09 · Diego: «el buscador de la web tiene bordes cuadrados». Causa
   real: este <input> es el que de verdad se ve —en monitor dibuja su PROPIA
   superficie y sombra, override de acá abajo en
   `@media (min-width:56.25rem)`— y nunca tuvo radio propio; el único radio
   vivía en `.cst-bus`, el envoltorio, que en monitor pasa a
   `background:none` y deja de pintar nada. Un solo radio ACÁ, 99px —el mismo
   de `.cst-bus` y el de los chips de filtro de esta misma página— alcanza
   para los dos anchos: en celular el fondo de este <input> es `background:
   none` (no se ve, así que no cambia nada) y en monitor es la esquina que
   faltaba. Sin aro nuevo: `border-color` sigue en `transparent`, como ya
   estaba. */
/* 🔴 AC-17 · 27-09 · `align-self:stretch`: EL CAMPO TIENE QUE SER LA PASTILLA.
   Medido con el navegador, no leído: a 390 px la pastilla daba 358×48 y el
   `<input>` de adentro **267×20**. Los 14 px de arriba y los 14 de abajo eran
   pastilla pintada y nada más: un `<form>` no enfoca a su hijo, así que el
   dedo que cae ahí NO escribe. Y era al revés de lo que uno esperaría —a 1024
   y 1440 el campo ya medía 40 de 40 y llenaba—: andaba en la notebook y
   fallaba en el teléfono, que es donde se busca («la gente compra mucho y
   mira mucho por celular»).
   La causa es `align-items:center` en `.cst-bus`: centra a los hijos en vez de
   estirarlos, y este `<input>` no tiene alto propio, así que se quedaba con el
   de su renglón de texto. `align-self:stretch` le devuelve el alto de la caja
   —48 px, el de la pastilla— sin tocar nada más: el texto de un `<input>` de
   una línea lo centra el navegador solo, así que NO se mueve un píxel de lo
   que se ve. Medido después: 358×48 la pastilla, 267×48 el campo.
   ⚠️ En monitor no cambia nada: ahí el alto del renglón lo pone este mismo
   campo con su `padding` (40 px) y estirarlo a 40 es quedarse donde estaba. */
.cst-bus-i{position:static;flex:1;align-self:stretch;min-width:0;width:auto;
  padding:0 .4rem;
  opacity:1;pointer-events:auto;transform:none;border-radius:99px;
  border:1px solid transparent;background:none;color:var(--ink);
  font-family:var(--f);font-size:max(16px,1rem);font-weight:600}
.cst-bus-i::placeholder{color:var(--muted);font-weight:600}
/* El botón de mandar: en celular vive DENTRO de la barra, a la vista siempre
   —círculo sólido, porque sin mouse no hay nada que lo revele—; en monitor
   vuelve a ser el ícono discreto de adentro del campo (override abajo).

   ⭐ VP-63 · 16-09 · VA EN `--marca`, YA NO EN `--negro`. Diego: *«mucho negro
   en la web… podríamos poner más azul»*. Era el negro más grande que le queda
   al celular —38×38 macizos en el encabezado de TODAS las páginas— y el
   celular es donde se mira («la gente compra mucho y mira mucho por celular»).

   🔴 El argumento no es «había que sacar negro»: es que ESTE MISMO BOTÓN, dos
   líneas más abajo, YA ERA AZUL en monitor (`color:var(--acento-txt)`, ver el
   override del breakpoint). Los dos anchos se contradecían y el que quedaba
   negro era el que más se usa. Esto los pone de acuerdo.

   ⚠️ Y NO COMPITE CON EL HERO: buscar y comprar son las dos «tocá acá», que es
   justo lo que el azul significa en esta tienda; la jerarquía entre ellas la
   hace el TAMAÑO —38 px contra un botón de ancho completo, casi nueve veces
   más área— y no un segundo color. El que NO se toca es el globito del
   carrito: ése INFORMA y sigue en `--pip` (regla VP-68 de Diego).

   📐 Medido: #ffffff sobre #2563c9 = 5,67:1 (AA), y el círculo contra el
   blanco del campo = 5,67:1, muy por encima del 3:1 de 1.4.11. */
.cst-bus-b{position:relative;flex:none;width:2.35rem;height:2.35rem;margin-left:.15rem;
  display:grid;place-items:center;
  border:0;background:var(--marca);color:var(--marca-txt);font-size:1rem;
  opacity:1;pointer-events:auto;cursor:pointer;border-radius:99px}
/* 🔴 EL AREA DE TOQUE DE 44 px VIVE ACA, EN LA BASE, Y NO SOLO EN MONITOR.
   Medido el 02-10 con el dedo de verdad —preguntandole al navegador quien
   recibe el toque en cada punto, que es lo unico que ve un ::after invisible—:
   a 390 px este boton recibia el toque en un area de 37x39, y en monitor en una
   de 44x44. O sea que la ampliacion existia JUSTO DONDE HAY MOUSE y faltaba
   donde hay dedo, que es al reves de para que se invento. El breakpoint de
   abajo ya tenia este mismo ::after escrito con el argumento correcto —«2,4rem
   son 38,4 px: MENOS que los 44 de AC-14»—; lo unico que pasaba es que el
   argumento no alcanzaba a la base. Subirlo aca lo arregla para los dos anchos
   y deja de hacer falta repetirlo abajo.
   ⚠️ `position:relative` en vez de `static`: sin un ancestro posicionado el
   ::after se colgaria de la pastilla y no del boton. No mueve un pixel de lo
   que se dibuja —el boton no tiene `top`/`left`— y el override de monitor, que
   viene despues, lo pisa con su `absolute` igual que antes. */
.cst-bus-b::after{content:'';position:absolute;top:50%;left:50%;width:44px;height:44px;
  transform:translate(-50%,-50%)}
/* ⚠️ EL ARO DE FOCO VIENE CON EL ALTO NUEVO, no es un cambio aparte. Tenía
   `border-radius:.4rem` y `outline-offset:2px`, que estaban bien cuando el
   campo era la tira de 20 px escondida en el medio de la pastilla: un
   rectangulito con esquinas chicas, flotando. Con el campo llenando sus 48 px
   ese mismo aro pasa a ser un rectángulo de esquinas casi rectas montado sobre
   una pastilla redonda Y sobresaliendo 2 px arriba y abajo — mirado en la
   captura a 390, no deducido. Dos correcciones, las dos de una línea:
     · fuera el `.4rem`, para que el aro tome el radio del propio campo (99px);
     · `-2px` en vez de `2px`, para que caiga JUSTO ADENTRO del campo y no se
       salga de la pastilla que lo contiene.
   En monitor mejora lo mismo, que ya estaba mal ahí desde antes: el campo es
   un 99px y el aro le dibujaba esquinas de 6,4. */
/* ═══ 🔵 M2b · 11-10 · EL BORDE AZUL DEL BUSCADOR  (sky-menu2 · pedido 193) ═══
   Diego lo dijo DOS veces: *«cuando querés usar el buscador se pone un borde
   azul»* y después *«el borde azul en el buscador sigue estando»*. Tenía razón:
   con `outline-offset:-2px` el aro se dibuja ADENTRO del campo, así que no se
   lee como un anillo de foco sino como el BORDE del campo — y un borde que
   aparece solo es el dibujo de un error de validación.

   🔴 Y NO SE PUEDE BORRAR A SECAS: un campo sin contorno de foco es
   inalcanzable para quien navega con teclado, y lo mide FV-2f de
   `prueba_foco_visible.php` contando las paradas del Tab que se quedan SIN
   contorno — la afirmación existe justamente para que nadie lo apague.

   ⭐ LA SALIDA ES SEPARAR LAS DOS MANERAS DE LLEGAR, no apagar el foco:
     · con PUNTERO FINO (mouse y teclado) el aro se queda, y pasa al tono de
       la MARCA en vez del acento oscurecido: es la casa, no el azul del
       sistema;
     · con el DEDO el aro no se dibuja, y lo que marca el campo activo es el
       HALO de la pastilla, que se hace más grande y más presente. Es la regla
       de la casa escrita tal cual: más halo, menos borde — y es lo único que
       Diego rescató entero de una pantalla que por lo demás rechazó.

   🔴 POR QUE EL `:focus-visible` SOLO NO ALCANZA, Y ESTA MEDIDO: en un campo de
   TEXTO el navegador hace coincidir `:focus-visible` SIEMPRE que el campo tome
   el foco, venga del teclado o de un dedo — es así por especificación, porque
   en un campo de texto se espera que después venga el teclado. O sea que
   cambiar `:focus` por `:focus-visible` acá no saca nada: el dedo lo prende
   igual. Lo que de verdad distingue las dos maneras de llegar es el puntero.

   ⚠️ LO QUE SE PIERDE, DICHO EN VOZ ALTA Y NO ESCONDIDO: en una tableta con
   teclado físico —que informa `pointer:coarse`— quien llegue a ESTE campo con
   el Tab va a ver el halo y no el aro. Es un campo, no todos: el resto de la
   tienda conserva su aro a cualquier ancho. Se eligió así porque la pantalla
   que Diego mira y la que usa el 83 % de las visitas es la del dedo, y porque
   el halo sí cambia y sí se ve. El día que haya una forma de preguntar «este
   foco vino de un teclado» sin JavaScript, esto se reemplaza por eso. */
@media (hover:hover) and (pointer:fine){
  .cst-bus-i:focus-visible{outline:2px solid var(--marca);outline-offset:-2px}
}
@media (hover:none) and (pointer:coarse){
  /* 🔴 HACE FALTA APAGARLO EXPLICITAMENTE, Y ESTO SE MIDIO: la hoja tiene un
     `:focus-visible` GLOBAL (0,1,0) unos miles de renglones más arriba, que le
     pone a TODO un aro de 2 px en `--acento-txt`. Con sólo no declarar nada
     acá, el aro no desaparecía: lo volvía a poner el global, y la captura a
     402 con el dedo seguía mostrando el borde azul exacto que Diego señaló dos
     veces. Es la colisión de cascada de siempre, que no se ve leyendo el
     renglón de al lado.
     ⚠️ Un `outline:none` es lo que FV-2f existe para prohibir, y por eso está
     acotado al puntero grueso y dicho acá: el aro del teclado sigue entero en
     `(pointer:fine)`, que es el ancho y el puntero donde FV-2f cuenta. */
  .cst-bus-i:focus-visible{outline:none}
  /* Y el campo activo se marca con el halo, no con un aro: la sombra pasa de
     18 a 34 px y de .55 a .95 de presencia, sin agregar una línea nueva. */
  .cst-bus:focus-within{box-shadow:0 1px 2px rgba(60,69,82,.06), 0 14px 34px rgba(var(--halo),.95)}
}
/* La lupa SI es un botón, y ahí `:focus-visible` distingue de verdad el clic
   del Tab: el aro se queda a cualquier ancho. Pasa al tono de la marca por lo
   mismo que el campo. */
.cst-bus-b:focus-visible{outline:2px solid var(--marca);outline-offset:2px}
/* ═══ VP-37 · EL DESPLEGABLE DE SUGERENCIAS ══════════════════════════════════
   Cuelga de `.cst-bus`, que ahora es el bloque de referencia en los DOS
   anchos —la barra entera en celular, el campo compacto en monitor (override
   más abajo)—: ya no hace falta que el padre finja ser el margen de la
   página, como cuando el campo vivía colapsado en una lupa. */
.cst-sug{position:absolute;z-index:81;left:0;right:0;top:calc(100% + .5rem);
  max-height:min(19rem,60vh);overflow-y:auto;overscroll-behavior:contain;
  padding:.35rem;border-radius:var(--r-m);background:var(--sup);
  border:1px solid var(--line2);box-shadow:var(--sh-2);scrollbar-width:thin}
.cst-sug[hidden]{display:none!important}
.cst-sug-o{display:flex;align-items:center;gap:.7rem;padding:.5rem;
  border-radius:.75rem;text-decoration:none;color:inherit;cursor:pointer}
@media (hover:hover) and (pointer:fine){ .cst-sug-o:hover{background:var(--fondo)} }
/* 🔴 `data-marcado` y NO `:focus`: el foco NO SE MUEVE del campo. Si se moviera,
   en el celular se cerraría el teclado en la primera flecha y habría que volver
   a tocar el campo para seguir escribiendo. La marca es visual; quién está
   marcada se lo cuenta al lector de pantalla `aria-activedescendant`. */
.cst-sug-o[data-marcado="1"]{background:var(--fondo)}
.cst-sug-f{flex:none;width:3.1rem;height:3.1rem;border-radius:.65rem;
  background:var(--tile);   /* BLANCA: «las fotos reales son blancas» */
  box-shadow:var(--sh-foto);display:grid;place-items:center;overflow:hidden}
.cst-sug-f img{width:100%;height:100%;object-fit:contain;display:block;
  mix-blend-mode:multiply}
.cst-sug-f .cst-ico{font-size:1.2rem;color:var(--segundo)}
.cst-sug-c{min-width:0;flex:1}
.cst-sug-n{margin:0;font-size:.8125rem;font-weight:650;line-height:1.35;color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* La parte que coincide, resaltada: es lo que explica POR QUÉ está esa fila. */
.cst-sug-n mark{background:color-mix(in srgb,var(--acento) 42%,transparent);
  color:inherit;border-radius:.2rem;padding:0 .1em;font-weight:800}
.cst-sug-p{display:flex;align-items:baseline;gap:.4rem;margin-top:.15rem;flex-wrap:wrap}
.cst-sug-pr{font-size:.875rem;font-weight:800;color:var(--ink);letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
.cst-sug-ta{font-size:.6875rem;color:var(--muted);text-decoration:line-through;
  font-variant-numeric:tabular-nums}
.cst-sug-dt{font-size:.6875rem;font-weight:800;color:var(--marca)}
.cst-sug-pie{display:flex;align-items:center;gap:.45rem;margin-top:.25rem;
  padding:.6rem .75rem;border-top:1px solid var(--line2);
  font-size:.8125rem;font-weight:700;color:var(--acento-txt);
  text-decoration:none;cursor:pointer;border-radius:.6rem}
.cst-sug-pie[data-marcado="1"]{background:var(--fondo)}
@media (hover:hover) and (pointer:fine){ .cst-sug-pie:hover{background:var(--fondo)} }
.cst-sug-pie .cst-ico{width:1em;height:1em;flex:none}
/* 🔴 SIN RESULTADOS SE DICE CON PALABRAS. Un desplegable vacío se lee como que
   se rompió, y la persona vuelve a escribir lo mismo esperando otra cosa. */
.cst-sug-nada{padding:1.15rem .9rem 1rem;text-align:center}
.cst-sug-nada-t{margin:0;font-size:.875rem;font-weight:700;color:var(--ink)}
.cst-sug-nada-p{margin:.3rem 0 0;font-size:.8125rem;color:var(--muted)}
.cst-sug-carg{display:flex;align-items:center;gap:.5rem;padding:.85rem .75rem;
  font-size:.8125rem;font-weight:600;color:var(--muted)}
.cst-sug-punto{width:.4rem;height:.4rem;border-radius:50%;background:var(--acento);
  flex:none;animation:cstLat 1s var(--ease) infinite}
@keyframes cstLat{0%,100%{opacity:.3;transform:scale(.8)}50%{opacity:1;transform:scale(1)}}

/* Safari le pone una ✕ propia al type=search que se pisa con nuestra lupa. */
.cst-bus-i::-webkit-search-decoration,.cst-bus-i::-webkit-search-cancel-button{-webkit-appearance:none}
/* Monitor: el campo vive en la barra y la lupa-label sobra.
   🗳️ VOTO-10 (14-09) · 56,25rem (900 px) Y NO 75rem (1200) COMO ANTES.
   El header votado es Directo en PC y Central en celular, con UN SOLO corte —
   el mismo de siempre para `.cst-nav`/`.cst-ham` (§6.1)—, no dos escalones
   distintos. Con el buscador recién expandiéndose a 1200 quedaba una franja
   entre 900 y 1200 donde YA no había barra de categorías (se fue al ☰) pero
   el buscador SEGUÍA siendo una lupa de 44×44: la cabecera se veía vacía justo
   donde más aire libre tenía — la «zona muerta» detrás de PN-80 («el header no
   aprovecha el ancho»). Unificando el corte, arriba de 900 entra de una el
   campo compacto exactamente cuando se va la barra de categorías, sin
   escalón intermedio que explicar. */
@media (min-width:56.25rem){
  /* En monitor el campo vive en la barra y la lupa-label sobra. Acá SÍ manda
     `.cst-bus` como bloque de referencia: el botón de lupa va adentro del campo. */
  .cst-bus{position:relative;flex:0 1 auto;order:0;margin-left:auto;
    height:auto;padding:0;background:none;box-shadow:none}
  .cst-bus:focus-within{box-shadow:none}
  .cst-bus-l{display:none}
  /* 🔴 12,5rem y no 11,5. Medido: el `placeholder` «Buscar productos» ocupa
     135 px con la tipografía de la barra, y con 11,5rem quedaban 128 px útiles
     (184 − 14,4 de sangría − 41,6 de la lupa) — o sea que el texto salía
     CORTADO a media palabra, «Buscar product…», en la primera pantalla de la
     tienda. A 12,5rem quedan 144 y entra con aire. Es el tipo de detalle que
     no se ve leyendo el código y sí se ve en la captura. */
  /* ⭐ VOTO-03 (13-09) · EL CAMPO FLOTA, NO SE HUNDE.
     Diego: *«no me cierra el color de fondo»* del buscador. Estaba relleno de
     `--fondo` (#f1f5fa) sobre una cabecera `--sup` (#ffffff): 2 % de diferencia
     de luminancia, o sea un control que casi no se ve. Y al enfocarlo pasaba a
     blanco — desaparecía JUSTO cuando se usa, que es lo peor que puede hacer un
     campo de búsqueda. Se resuelve con la firma de la casa y no con más gris:
     halo de color, no borde. El campo va en superficie y se despega de la
     cabecera con la misma sombra celeste que usan las cards. Al enfocarlo el
     halo CRECE: se levanta en vez de borrarse.
     🔴 VOTO-10 (14-09) · SIN ARO. Hasta acá el halo venía acompañado de un aro
     interior tenue del acento (`inset`) que le dibujaba el límite. El mockup
     del header nuevo lo rechaza de punta a punta —ni hd1 ni hd3 llevan un solo
     `inset`, es sombra pura— y Diego lo bajó explícito: «el buscador sin aro ni
     borde finito». Se saca del todo, con la MISMA sombra de siempre.
     ⚠️ `border-color:transparent` y no `border:0`: el borde de la regla base
     sigue ocupando su píxel, así que el campo no cambia de tamaño al entrar en
     este breakpoint. Sacarlo movería el ancho y el `placeholder` volvería a
     cortarse, que es el bug que arregló el 12,5rem de acá arriba.
     Medido: el texto sigue en --ink sobre --sup (15:1) y el placeholder en
     --muted sobre --sup (4,74:1, AA) — el aro no aportaba nada al contraste,
     era sólo el límite visual, que ahora traza el halo solo. */
  .cst-bus-i{position:static;width:12.5rem;padding:.62rem 2.6rem .62rem .9rem;opacity:1;
    pointer-events:auto;transform:none;background:var(--sup);border-color:transparent;
    flex:none;
    box-shadow:0 1px 2px rgba(60,69,82,.05), 0 5px 16px rgba(var(--halo),.55);
    transition:width .3s var(--ease),box-shadow .3s var(--ease)}
  .cst-bus:focus-within .cst-bus-i{width:15rem;
    box-shadow:0 1px 2px rgba(60,69,82,.05), 0 10px 26px rgba(var(--halo),.82)}
  /* ⚠️ 2,4rem son 38,4 px: MENOS que los 44 de AC-14. Se ve chico a propósito
     —tiene que entrar adentro del campo— y el área que se TOCA la agranda un
     ::after invisible, el mismo recurso que ya usan «Agregar» y los puntos de
     color. Importa en el iPad, que entra por este breakpoint Y tiene dedo.
     🔴 Y vuelve a ser el ÍCONO DISCRETO de siempre —`position:absolute`,
     `background:none`— y no el círculo sólido de celular: la base de acá
     arriba nace redonda y rellena (desde el 16-09, en `--marca`) para la barra
     grande de Central, así que el override tiene que devolverle las CUATRO
     cosas que cambian. El azul no se pierde: acá lo lleva la TINTA del ícono
     (`--acento-txt`), que es la misma familia sin el peso de un relleno. */
  .cst-bus-b{position:absolute;top:50%;bottom:auto;transform:translateY(-50%);
    height:2.4rem;width:2.4rem;margin-left:0;
    opacity:1;pointer-events:auto;right:.15rem;
    background:none;color:var(--acento-txt);border-radius:.85rem}
  /* El desplegable se ancla al CAMPO y arranca justo abajo. En celular
     (arriba) usa `.5rem`: acá lleva su propio ancho porque, pegado al campo de
     14rem, quedaría demasiado angosto para dos renglones de nombre. */
  .cst-sug{left:auto;right:0;width:23rem;top:calc(100% + .55rem)}
}

/* ── ENCABEZADO DE SECCIÓN ───────────────────────────────────────────────── */
/* ⭐ El respiro creció con el ancho (11-09). Con el contenido a 1280 px, 48 px
   entre secciones alcanzaban; a 1376/1612 px las secciones se tocaban y la
   portada se leía como una lista continua en vez de tres cosas distintas. La
   regla es de proporción, no de gusto: cuanto más ancha la columna, más aire
   necesita arriba para que se lea como un corte. */
.cst-sec{padding-top:clamp(2rem,4.6vw,4rem)}
/* ⚠️ SIN BARRA DE CONFIANZA, LA SECCIÓN VA PEGADA AL HERO. La barra sólo se
   dibuja si hay algo cierto que decir, y hoy puede no haber nada: sin ella se
   sumaban el respiro de abajo del hero (72 px) y el de arriba de la sección
   (48 px), y quedaban 120 px de nada en el medio de la portada — que es
   justo lo que hace que una página con poco contenido parezca vacía en vez de
   tranquila. Con el selector de hermano adyacente esto se acomoda solo, esté o
   no la barra, sin que nadie tenga que acordarse. */
.cst-hero + .cst-sec{padding-top:clamp(.5rem,1.6vw,1.25rem)}
.cst-sec-h{display:flex;align-items:flex-end;gap:1rem;flex-wrap:wrap;
  margin-bottom:clamp(1rem,2.4vw,1.6rem)}
.cst-kicker{display:block;font-size:.6875rem;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--acento-txt);margin-bottom:.35rem}
.cst-h2{margin:0;font-size:clamp(1.375rem,3.2vw,2rem);font-weight:800;letter-spacing:-.03em;
  line-height:1.15;color:var(--ink);text-wrap:balance}
.cst-cuenta{margin:0 0 0 auto;font-size:.8125rem;font-weight:700;color:var(--muted)}
/* ⭐ LA BAJADA DE LA SECCIÓN. Diego, 11-09: *«falta mucho de diseño»*. Un `<h2>`
   pelado arriba de una grilla es un rótulo, no un encabezado: no dice por qué
   estás mirando eso. Del mockup aprobado se toma la ESTRUCTURA —volanta + título
   + bajada + enlace al borde—, nunca los colores.
   ⚠️ --ink2 y no --muted: la bajada se apoya en `--fondo` (#f1f5fa), donde
   #6b747f da 4,33:1 y NO pasa AA en 15 px. #3c4552 da 8,9:1. */
.cst-sub{margin:.45rem 0 0;max-width:56ch;font-size:.9375rem;line-height:1.55;
  color:var(--ink2)}
/* ⭐ EL ENLACE DE LA SECCIÓN VA ANCLADO AL BORDE DERECHO. Regla de Diego
   («está muy en el medio, no está a la derecha»): un control no flota en el
   medio de un bloque, se apoya en un borde. `margin-left:auto` como
   `.cst-cuenta`, que es el otro habitante de este renglón — y por eso nunca
   conviven: uno cuenta y el otro lleva. */
/* El bloque de la derecha del encabezado: lo que ancla al borde es ÉL, y por
   eso sus hijos ya no llevan `margin-left:auto` propio. */
.cst-sec-h-d{display:flex;align-items:center;gap:.75rem;margin:0 0 .1rem auto;
  flex-wrap:wrap;justify-content:flex-end}
.cst-sec-h-d .cst-cuenta{margin:0}
.cst-vertodo{display:inline-flex;align-items:center;gap:.45rem;
  flex:0 0 auto;padding:.52rem 1rem;border-radius:999px;
  background:var(--sup);border:1px solid var(--line);box-shadow:var(--sh-1);
  font-size:.8125rem;font-weight:800;color:var(--acento-txt);text-decoration:none;
  white-space:nowrap}
.cst-vertodo .cst-ico{width:1em;height:1em}
.cst-vertodo:focus-visible{outline:2px solid var(--acento-txt);outline-offset:3px}
@media (hover:hover) and (pointer:fine){
  .cst-vertodo{transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
  /* Sube y le crece el halo: el mismo gesto de las cards. Sombra de color, no
     borde de color — la firma de la casa. */
  .cst-vertodo:hover{transform:translateY(-2px);box-shadow:var(--sh-2)}
}
/* ⭐ EL RITMO: UNA SECCIÓN SOBRE SU PROPIO PISO ──────────────────────────────
   El inicio se leía como UNA columna larga: mismo fondo de arriba a abajo, y
   entonces las góndolas, la grilla y los flyers parecían tres partes de la
   misma lista en vez de tres cosas distintas. Es el `sec alt` del mockup: la
   sección del medio se apoya en la superficie blanca y de ancho completo, y
   eso sola dibuja el corte — sin una línea divisoria más.
   🔴 NADA DE `100vw` PARA SANGRAR AL BORDE. `100vw` incluye la barra de scroll
   y devuelve el desborde horizontal que ya llegó a producción una vez. El
   ancho completo sale de que la `<section>` es hija del `<div class="cst-home">`
   y no tiene ancho propio: el que limita es el `.cst-wrap` de ADENTRO.

   🔴 Y EL PISO VA MÁS OSCURO, NO BLANCO. Es la trampa de la que casi me caigo:
   las cards de producto SON blancas, así que una sección blanca se las come —
   se pierde la bandeja y con ella la sombra celeste, que es lo único que Diego
   rescató del diseño. Con `--fondo2` (#e4ecf5), medio tono por debajo del
   `--fondo` de la página, las cards blancas resaltan MÁS y el halo se ve mejor.
   Sin línea divisoria: el corte lo hace el color, no un borde (regla de la casa
   — más halo, menos borde). */
.cst-sec-alt{background:var(--fondo2);
  padding-bottom:clamp(2rem,4.6vw,4rem);margin-top:clamp(2rem,4.6vw,4rem)}
/* `.cst-sec` ya trae el aire de arriba; el margen es para separarse del bloque
   ANTERIOR, que está sobre el otro piso. Pegada al hero no hace falta: el hero
   ya termina en su propio corte de color. */
.cst-hero + .cst-sec-alt{margin-top:0}

/* ═══ VP-03 · EL HERO ════════════════════════════════════════════════════════
   ⭐ EL HALO ES LA PIEZA. Diego, 04-09, textual: «las sombras celestes en los
   bordes, eso me gustó, es lo mejor del diseño». Acá el halo hace DOS trabajos
   a la vez: le da peso a la primera pantalla y separa el hero de la barra de
   confianza que viene abajo — sin agregar ni un borde ni un elemento más.
   Por eso también se fueron los tres anillos decorativos del mockup: hacían
   esto mismo con tres nodos y un color de la paleta vieja. */
.cst-hero{position:relative;overflow:hidden;
  /* El lavado celeste que se disuelve en blanco. Es el mismo halo, estirado:
     arranca en el fondo suave de la paleta y a los dos tercios ya es la página,
     así que la barra blanca de abajo se recorta sola contra él. */
  background:linear-gradient(180deg,var(--fondo2) 0%,var(--pag) 72%);
  /* 🔴 MÁS ALTO desde el 11-09 («el encuadre del header de inicio, mejorarlo»).
     La primera pantalla tiene que respirar: con 64 px arriba el `<h1>` arrancaba
     pegado a la cabecera y la promesa —que es el motivo de la pantalla— compartía
     peso con la barra de confianza que asomaba abajo. */
  padding:clamp(2.25rem,6vw,5.25rem) 0 clamp(2.5rem,6.5vw,5.5rem)}
/* El halo redondo, arriba a la derecha, detrás de todo. `overflow:hidden` del
   padre es lo que impide que un círculo de 54rem empuje la página a lo ancho —
   que es EXACTAMENTE el desborde horizontal que ya llegó a producción una vez.
   ⭐ Creció con el `.cst-wrap`: con el contenido a 1376/1612 px, el halo de 46rem
   quedaba chico y el celeste ya no llegaba a tocar la foto. Es la firma de la
   casa («las sombras celestes en los bordes, eso me gustó») y tiene que alcanzar
   a lo que ilumina. */
.cst-hero::before{content:'';position:absolute;z-index:0;pointer-events:none;
  width:min(54rem,130%);aspect-ratio:1;right:-10%;top:-44%;border-radius:50%;
  background:radial-gradient(circle,
    color-mix(in srgb,var(--acento) 44%,transparent) 0%,transparent 66%)}
/* `minmax(0,…)` en las dos columnas: sin eso, una foto ancha puede estirar su
   columna por encima de la fracción y empujar la página. */
.cst-hero-in{position:relative;z-index:1;display:grid;align-items:center;
  grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:clamp(1.5rem,4vw,3.5rem)}
/* SIN FOTO NO QUEDA UN HUECO: una sola columna, centrada. Un rectángulo vacío
   al lado del título es lo que hay que evitar mientras no se subió la imagen. */
.cst-hero-solo .cst-hero-in{grid-template-columns:1fr;justify-items:center;text-align:center;
  max-width:46rem}
/* ⚠️ Acá vivía `.cst-hero-ojo`, la píldora «92 productos publicados». La sacó
   Diego el 11-09 y se fue también su regla: una clase muerta en una hoja de 3000
   líneas es una invitación a volver a usarla sin preguntar.
   `overflow-wrap` no es paranoia: el título lo escribe el panel (hasta 80
   caracteres) y una sola palabra larga a 390 px empuja la página a lo ancho.
   Ese desborde ya llegó a producción una vez. */
.cst-hero-t{margin:0;font-size:clamp(2rem,5.4vw,3.9rem);font-weight:800;
  letter-spacing:-.04em;line-height:1.03;color:var(--ink);text-wrap:balance;
  overflow-wrap:break-word}
/* --ink2 y no --muted: la bajada se apoya en el lavado celeste (#e4ecf5) y
   #6b747f ahí no llega a AA. #3c4552 sobre #e4ecf5 da 8,4:1. */
.cst-hero-b{margin:1rem 0 0;max-width:44ch;font-size:clamp(.9375rem,1.6vw,1.0625rem);
  font-weight:500;line-height:1.65;color:var(--ink2)}
.cst-hero-ctas{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.6rem}
.cst-hero-solo .cst-hero-ctas{justify-content:center}
/* 🔴 DOS CLASES, Y LA OTRA GANABA. `.cst-cta` (el botón del estado vacío) se
   declara MÁS ABAJO en esta misma hoja, así que con `.cst-hero-cta{}` a secas
   —misma especificidad, definida antes— el padding y el tamaño del hero no
   entraban nunca. Con el padre adelante la especificidad sube a 0,2,0 y gana
   sin depender del orden. Es la colisión de cascada de siempre. */
.cst-hero-ctas .cst-cta{margin-top:0;padding:.85rem 1.6rem;font-size:.9375rem}
.cst-hero-cta2{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:2.75rem;padding:.85rem 1.5rem;border-radius:99px;
  background:var(--sup);border:1px solid var(--line);box-shadow:var(--sh-1);
  color:var(--ink);font-size:.9375rem;font-weight:800;text-decoration:none;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease)}
@media (hover:hover) and (pointer:fine){
  .cst-hero-cta2:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:var(--acento)}
}
.cst-hero-ctas .cst-cta:focus-visible,
.cst-hero-cta2:focus-visible{outline:2px solid var(--acento-txt);outline-offset:3px}
/* 13-10 · SKY-HERO1 · El rotulo corto del boton («Ver catalogo») es del
   telefono; en monitor se queda el largo. El que no se ve va con display:none,
   asi que el lector de pantalla lee uno solo. */
.cst-hero-cta-c{display:none}

/* ── LA FOTO QUE FLOTA ──────────────────────────────────────────────────── */
/* ⭐ 34rem y no 30. Con el `.cst-wrap` ensanchado, la columna de la foto mide
   ~660 px y una foto de 480 dejaba 160 px de nada entre el texto y la imagen:
   dos bloques mirándose de lejos, que es justo lo que se lee como «falta
   diseño». A 544 px la foto ocupa su columna y el hero se cierra.

   🔴 APAISADO (4/3) Y NO CUADRADO — el encuadre que pidió Diego el 11-09.
   Medido antes de tocar nada, a 1440: la caja cuadrada daba 544 × 544 y el
   bloque de texto de al lado mide 251 px de alto. Con las dos columnas
   centradas eso dejaba **146 px de nada arriba y 146 abajo** del texto, y un
   hero de 716 px que era, en más de un tercio, aire. No es «poco contenido»:
   es una caja que impone su alto a una columna que no lo necesita.
   A 4/3 la caja mide 544 × 408, el sobrante baja a 78 px por lado y el hero
   queda en 580 — la foto sigue igual de grande a lo ancho, que es lo que se
   mira. Lo que se fue es el vacío, no la imagen.
   ⚠️ Abajo de 60rem esto vuelve a `auto`: en el teléfono la foto ya va a lo
   ancho y cualquier proporción impuesta deja bandas vacías (ver el @media). */
.cst-hero-art{position:relative;display:grid;place-items:center;
  width:100%;max-width:min(34rem,100%);aspect-ratio:4/3;justify-self:end}
/* El halo propio de la foto, más cerrado que el de la banda: la foto tiene que
   despegarse del fondo, no flotar tanto como el fondo se despega de la página.
   Mismo criterio que --sh-foto en la card. */
/* Se centra a mano con left/top + translate y NO con el `place-items` del
   padre: un hijo `position:absolute` no es un ítem de grid, así que
   `justify-items` no lo alinea y quedaba pegado arriba a la izquierda. */
/* ⚠️ Se mide por el ALTO y no por el ancho. Con la caja apaisada, un círculo de
   82% del ancho es más alto que la caja: se salía por arriba y por abajo y le
   pasaba por encima al título. Atado al alto, el halo sigue envolviendo la
   bandeja —que también se mide por el alto— sin importar la proporción. */
.cst-hero-art::before{content:'';position:absolute;z-index:0;pointer-events:none;
  left:50%;top:50%;transform:translate(-50%,-50%);
  height:104%;width:auto;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,
    color-mix(in srgb,var(--acento) 52%,transparent) 0%,transparent 68%);
  filter:blur(6px)}
.cst-hero-foto{position:relative;z-index:1;display:block;width:92%;max-height:100%}
/* 🔴 LA FOTO NO LLEVA `aspect-ratio` PROPIO. El contrato pide 1600×1600, pero
   «pide» no es «obliga»: con un cuadrado forzado, una imagen que llega 660×547
   queda con dos franjas vacías arriba y abajo —dentro del `contain`— y en el
   teléfono eso se lee como un hueco de carga. Se ve con la proporción que
   tiene; el que reserva el lugar es el contenedor. */
/* `max-height` y no `height`: la foto sigue mandando su proporción, pero ya no
   puede pasarse del alto de la caja apaisada. */
.cst-hero-foto img{display:block;width:100%;height:auto;max-height:100%;object-fit:contain}
/* El banner del panel es PNG con fondo transparente (§2 del contrato): flota
   suelto y la sombra la lleva el recorte, no una caja.
   ⚠️ El `border-radius` es un seguro barato: sobre un PNG transparente no se
   ve —recorta esquinas que ya son invisibles—, pero el día que alguien suba
   uno OPACO (el panel lo pide transparente, no lo puede obligar) evita que la
   primera pantalla sea un rectángulo blanco de esquinas duras. */
.cst-hero-art:not(.cst-hero-art-p) .cst-hero-foto img{
  border-radius:var(--r-x);
  filter:drop-shadow(0 26px 46px rgba(var(--halo),.72))}
/* La foto de RESPALDO es del catálogo —fondo blanco de Mercado Libre— y suelta
   quedaría un cuadrado duro sobre el celeste. Va en la misma bandeja blanca y
   redondeada que usa la card: la tienda ya se ve así en las otras pantallas. */
/* 🔴 LA BANDEJA SE MIDE POR EL ALTO, no por el ancho. Con la caja apaisada
   (4/3), un cuadrado del 88% del ANCHO no entra: sería más alto que la caja y
   se comería el hero para arriba. Atada al alto, la bandeja es un cuadrado de
   lado = alto de la caja, o sea 0,75 × el ancho, y queda centrada con
   (100% − 75%)/2 = **12,5% de margen a cada lado**. Ese 12,5% no es un número
   a ojo: es el que usa `.cst-hero-chip` para colgarse del borde REAL de la
   bandeja. Si mañana cambia el `aspect-ratio` de la caja, cambian los dos. */
.cst-hero-art-p .cst-hero-foto{height:100%;width:auto;aspect-ratio:1/1;
  display:grid;place-items:center;
  background:var(--tile);border-radius:var(--r-x);overflow:hidden;box-shadow:var(--sh-foto)}
/* Acá el cuadrado SÍ va, pero en la BANDEJA, no en la foto: la bandeja es
   blanca, así que lo que sobra alrededor de una foto no cuadrada es bandeja y
   no un hueco. Es la misma solución que usa la card de la grilla. */
.cst-hero-art-p .cst-hero-foto img{width:100%;height:100%;padding:7%}
@media (hover:hover) and (pointer:fine){
  .cst-hero-foto{transition:transform .5s var(--ease)}
  a.cst-hero-foto:hover{transform:translateY(-7px)}
}
a.cst-hero-foto:focus-visible{outline:2px solid var(--acento-txt);outline-offset:6px;border-radius:var(--r-x)}

/* ═══ ⭐ LA FOTO QUE FLOTA Y EL HALO QUE LATE ════════════════════════════════
   Es el comportamiento del mockup aprobado (`floaty` + `glow`), traído tal cual:
   estructura y movimiento, NUNCA los colores —la paleta de ese archivo está
   descartada—. Diego, 11-09: *«falta mucho de diseño»*, y esto es lo que separa
   una foto pegada de un producto que está ahí.

   🔴 EL MOVIMIENTO VA EN EL `<img>`, NO EN `.cst-hero-foto`. La bandeja tiene un
   `:hover` que la levanta 7 px con `transform`, y una animación de `transform`
   sobre el MISMO elemento le gana siempre a la transición: el hover dejaba de
   funcionar y nadie se enteraba hasta pasar el mouse. Adentro conviven: la
   bandeja se levanta, el producto flota.
   ⚠️ 12 px de recorrido contra los ~29 px de `padding:7%` de la bandeja: nunca
   toca el borde, así que `overflow:hidden` no recorta nada.
   El `prefers-reduced-motion` global de arriba apaga las dos. */
@keyframes cst-flota{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes cst-late{
  0%,100%{opacity:.78;transform:translate(-50%,-50%) scale(1)}
  50%    {opacity:1;  transform:translate(-50%,-50%) scale(1.06)}}
@media (prefers-reduced-motion:no-preference){
  .cst-hero-foto img{animation:cst-flota 8.5s ease-in-out infinite;will-change:transform}
  .cst-hero-art::before{animation:cst-late 7s ease-in-out infinite}
  /* La entrada, escalonada. Es tiempo, no scroll: termina sí o sí, así que el
     hero NUNCA puede quedarse invisible por más que algo falle. */
  .cst-hero-txt{animation:cst-entra .7s var(--ease) both}
  .cst-hero-art{animation:cst-entra .7s var(--ease) .12s both}
}
@keyframes cst-entra{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* ═══ ⭐ LAS SECCIONES QUE APARECEN AL SCROLLEAR ════════════════════════════
   El tercer comportamiento del mockup (`.rv` + IntersectionObserver), pero SIN
   UNA LÍNEA DE JAVASCRIPT: `animation-timeline:view()` lo hace el compositor.

   🔴 Y ESO NO ES UN LUJO, ES LO QUE LO HACE SEGURO. El mockup esconde con CSS
   (`.rv{opacity:0}`) y revela con JS: si el script no corre —CSP, un error
   arriba, JavaScript apagado— la tienda queda EN BLANCO con el contenido
   presente pero invisible. Acá, sin soporte de `animation-timeline`, el
   `@supports` no aplica y todo se ve siempre. El peor caso es que no haya
   animación, nunca que no haya tienda.
   ⚠️ Lo que ya está a la vista al cargar arranca con el rango cumplido: se
   dibuja entero, no espera un scroll que quizá no pase.
   Soporte real: Chrome 115+, Safari 26+. En iOS viejo, sin animación. */
@keyframes cst-aparece{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    /* 🔻 PN-82b · DESCENDIENTE, YA NO HIJO DIRECTO. En vista previa cada
       sección viene envuelta en `.cst-prevedit` (el gancho de «tocá para
       editar», ver `webRenderHome()`), así que `.cst-sec`/`.cst-conf` dejan de
       ser hijas DIRECTAS de `.cst-home`. Con `>` la animación se apagaba SOLA
       en vista previa —sin ningún error, la sección se veía siempre, nunca
       apareciendo al scrollear— y una vista previa que anima distinto que la
       tienda real le miente a quien la mira para decidir si publica. El
       combinador flojo matchea IGUAL en la tienda real —hoy `.cst-sec` y
       `.cst-conf` son siempre hijas directas ahí, cero cambio visible— y
       además sigue en vista previa. */
    /* ⭐ 08-10 · EL RANGO SE CIERRA ANTES, Y ES UNA MEDICIÓN, NO UN GUSTO.
       Decía `cover 20%` y el margen SIEMPRE fue de un 4 %: a 2.560x1.440 la
       sección de productos arrancaba en y=894 contra un rango de 567 px, o sea
       que al cargar se pintaba a 0,96 — pasaba el piso de 0,9 por dos puntos.
       El 08-10 la banda de confianza ganó jerarquía (de 221 a 327 px) y empujó
       la sección 106 px hacia abajo: con eso el rango quedó al 78 % y la
       primera fila de productos se dibujaba **al 82 % de opacidad en la pantalla
       de Diego**, al cargar y sin deslizar. Lo cazó `CD-1c` de
       `prueba_card_dice.php`, que mide exactamente eso.
       ✅ Con `cover 10%` el rango mide 283 px y la sección termina de entrar
          cuando asoma la mitad de lo que asoma hoy: la animación sigue
          existiendo —lo que está abajo del pliegue sigue apareciendo al
          scrollear, que es para lo que se hizo— pero deja de ser un velo sobre
          lo que YA está en la primera pantalla.
       🔴 Por qué NO se apagó la animación de los tres primeros bloques, que es
          lo que hace el teléfono dos bloques más abajo: ahí el pliegue está a
          664 px y los tres primeros SIEMPRE entran enteros en la primera
          pantalla. En monitor no: a 1.440x900 la sección de productos arranca
          63 px ABAJO del pliegue, así que apagarla le sacaría la aparición a un
          bloque que de verdad aparece. Se achica el rango, no se saca la regla. */
    .cst-home .cst-sec,
    .cst-home .cst-conf{animation:cst-aparece linear both;
      animation-timeline:view();animation-range:entry 0% cover 10%}
  }
}
/* UN chip, no tres. El sello, el nombre y el precio hablan de la misma cosa.
   🔴 EL `left:0` ERA UN ACCIDENTE VISIBLE. El chip se apoya en `.cst-hero-art`,
   pero la bandeja blanca mide el 88% de eso y va centrada: su borde izquierdo
   cae en el 6%. Con `left:0` el chip salía 6% (≈33 px) MÁS a la izquierda que la
   bandeja, colgando en el aire sin relación con nada. Ahora se descuelga 1 rem
   del borde de la bandeja —una sangría elegida, no un resto de cuenta— y se lee
   como una tarjeta apoyada sobre la foto. */
/* ⚠️ `width:max-content` CON SU TECHO, y no sólo el techo. Sin esto la caja se
   encogía a lo que midiera el nombre recortado —unos 155 px— y entonces el
   renglón de cuotas, que es más largo, se partía en dos: «6 x $4.666,67 sin /
   interés». El techo sigue mandando (17rem o el 86 % de la bandeja, lo que sea
   menor), así que no hay forma de que la card se coma la foto. */
/* ⭐ 08-10 · LA CARD BAJA Y SE DESCUELGA DE LA BANDEJA. Diego, mirando
   corpskyla.com: *«el cartel flotante que dice EL MÁS VENDIDO podría estar más
   abajo»*. Y tenía razón por dos motivos que se miden:
     · Con `bottom:6%` la card quedaba DENTRO de la bandeja —a 2.560 terminaba
       24 px arriba del borde de abajo— o sea apoyada sobre el micrófono, justo
       en la parte baja de la foto, que es donde está el cuerpo del producto.
     · Y una card que no toca ningún borde no se lee como flotando: se lee como
       una etiqueta pegada adentro. Descolgada, el borde de la bandeja le pasa
       por detrás y recién ahí hay dos planos.
   🔴 ES SÓLO DE 481 PX PARA ARRIBA, Y NO HACE FALTA UNA MEDIA QUERY: abajo de
      30rem el hero es una FILA y esta misma clase ya pasa a `position:static`
      (ver el bloque del pliegue del teléfono), así que `bottom` no la toca.
      El teléfono no se mueve un píxel — es lo que mide PR-3c/PR-3d.
   ⚠️ El valor no puede crecer sin mirar: `.cst-hero` lleva `overflow:hidden` y
      abajo de la bandeja sólo quedan los ~88 px del respiro del hero. Medido a
      2.560 con −2,25rem: la card termina en y=597 y el hero en 673. */
.cst-hero-chip{position:absolute;z-index:2;left:calc(12.5% - 1rem);bottom:-2.25rem;max-width:min(17rem,86%);
  width:max-content;display:block;padding:.7rem 1rem;border-radius:var(--r-m);
  background:color-mix(in srgb,var(--sup) 90%,transparent);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid var(--line);box-shadow:var(--sh-2)}
/* 🔴 EL SELLO ES UNA PASTILLA RELLENA, NO UN RÓTULO LAVADO — ES LA MITAD DE POR
   QUÉ LA CARD «SE SENTÍA VACÍA». Eran nueve píxeles de versalitas en celeste
   sobre vidrio: la cosa más importante que dice la primera pantalla sobre el
   producto, dicha con la voz más chica de la hoja. Medido el 06-10 contra los
   cuatro mockups de 10/10: los que Diego votó bien tienen RELLENOS SÓLIDOS con
   el acento en luminosidad 26-58 %; el de 3 no tenía ninguno. `--acento-txt`
   (#25689c) con el texto en blanco da 5,51:1 — AA de sobra. */
.cst-hero-sello{display:inline-block;font-size:.5625rem;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--blanco);background:var(--acento-txt);
  padding:.2rem .5rem;border-radius:99px;margin-bottom:.45rem;line-height:1.4}
/* Dos renglones y corta: el nombre lo escribe el catálogo y algunos pasan los
   80 caracteres. Sin el corte, el chip le come la foto entera. */
.cst-hero-chip-n{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;font-size:.8125rem;font-weight:700;color:var(--ink2);line-height:1.3}
/* ⭐ EL PRECIO ES EL NÚMERO HERO DE LA CARD y se comporta como tal: sube de
   17 a 22 px, se cierra el interletrado y los dígitos van tabulares, igual que
   en la card de producto y en la ficha. Un precio del mismo cuerpo que el
   nombre no es un precio, es otro renglón. */
.cst-hero-chip-p{display:block;margin-top:.3rem;font-size:1.375rem;font-weight:800;
  letter-spacing:-.03em;color:var(--titulo);line-height:1.1;
  font-variant-numeric:tabular-nums}
/* El plan de cuotas DE ESTE producto. `--ink2` y no `--muted`: son 12 px y el
   chip es vidrio sobre una foto, donde `--muted` no llega a AA en ningún caso. */
.cst-hero-chip-c{display:block;margin-top:.15rem;font-size:.75rem;font-weight:700;
  color:var(--ink2);line-height:1.35;font-variant-numeric:tabular-nums}

@media (max-width:60rem){
  /* Una columna. El texto primero: el mensaje no se lee después de una foto de
     pantalla completa, se lee antes. */
  .cst-hero-in{grid-template-columns:1fr;justify-items:center;text-align:center;
    gap:1.75rem}
  .cst-hero-b{margin-inline:auto}
  .cst-hero-ctas{justify-content:center}
  /* 🔴 SE VA EL CUADRADO. En monitor el `aspect-ratio:1/1` le da aire al halo;
     en el teléfono, con la foto ya a lo ancho, ese cuadrado dejaba una banda
     vacía arriba y abajo de la imagen que se leía como un error de carga. Acá
     la caja mide lo que mide la foto y el halo respira con un padding. */
  .cst-hero-art{justify-self:center;max-width:24rem;aspect-ratio:auto;padding-block:4%}
  /* Sin proporción impuesta no hay alto del que colgarse: la bandeja vuelve a
     medirse por el ancho, como antes del apaisado. */
  .cst-hero-art-p .cst-hero-foto{width:88%;height:auto}
  /* El chip vuelve al eje: colgando a la izquierda de una foto centrada queda
     mordido por el margen en 390 px.
     ⚠️ Y SE DESCUELGA MENOS QUE EN MONITOR, por una medición: en una columna el
     hero deja apenas 49 px abajo de la bandeja (medido en iPad, 768x1024), contra
     los 88 que deja en dos columnas. Con los 36 px de monitor quedaban 13 px
     hasta el borde del hero, que lleva `overflow:hidden`: alcanza, pero no deja
     margen para un nombre de producto más alto. Con 24 quedan 25. */
  .cst-hero-chip{left:50%;transform:translateX(-50%);text-align:left;bottom:-1.5rem}
}
@media (max-width:26rem){
  /* En el teléfono más angosto los dos botones van a lo ancho: dos pastillas
     de media línea cada una no se aciertan con el pulgar. */
  .cst-hero-ctas{flex-direction:column;align-self:stretch;width:100%}
  .cst-hero-cta,.cst-hero-cta2{width:100%}
}

/* ═══ VP-04 · LA BARRA DE CONFIANZA ══════════════════════════════════════════
   Banda blanca entre dos hairlines: se recorta contra el lavado celeste del
   hero sin necesitar un color propio.
   🔴 EL FONDO ES BLANCO A PROPÓSITO, no por gusto: el renglón chico va en
   --muted (#6b747f), que sobre blanco da 4,74:1 y pasa AA — sobre --fondo
   (#f1f5fa) da 4,33:1 y NO pasa. Está medido en la cabecera del archivo. */
/* ⭐ `--conf-bg` EXISTE PARA QUE EL DEGRADÉ DE LA CINTA NO SE DESPEGUE DEL FONDO.
   La marquesina disuelve sus dos puntas con un gradiente hacia el color de la
   banda. Ese color estaba escrito TRES veces (el fondo y los dos
   pseudo-elementos), así que el día que la banda cambió de color en monitor —hoy—
   las puntas habrían seguido disolviéndose hacia blanco sobre un fondo que ya no
   era blanco: dos barras claras en los bordes, justo donde el degradé existe para
   que no se vea nada. Ahora el color se declara UNA vez y los tres lo leen. */
.cst-conf{--conf-bg:var(--sup);background:var(--conf-bg);border-block:1px solid var(--line)}
/* Grid en columnas: con pocos ítems se reparten el ancho, con muchos empujan y
   la banda se corre con el dedo. No hay animación (ver webRenderConfianza). */
.cst-conf-l{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(13.5rem,1fr);
  list-style:none;margin-inline:auto;padding:0;
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;
  scrollbar-width:none;-ms-overflow-style:none}
.cst-conf-l::-webkit-scrollbar{display:none}
.cst-conf-l > li{min-width:0;scroll-snap-align:start}
.cst-conf-i{display:flex;align-items:center;gap:.75rem;height:100%;
  padding:1.05rem 1.15rem;text-decoration:none;color:inherit}
/* El separador va por sombra interior y no por `border-left`: así el primero no
   necesita una regla que se lo saque, y en el scroller no suma un píxel de
   ancho que después falta para que entre el último ítem. */
.cst-conf-l > li + li .cst-conf-i{box-shadow:inset 1px 0 0 var(--line2)}
/* 🔴 EL ÍCONO VA RELLENO, NO LAVADO — Y ESTÁ MEDIDO, NO ES GUSTO. El 06-10 se
   comparó el CSS de los cuatro mockups que Diego votó 10/10/10/10 contra uno que
   sacó 3 en colores: los de 10 tienen entre 2 y 9 RELLENOS SÓLIDOS y los acentos
   en luminosidad 26-58 %; el de 3 tenía CERO rellenos y los cinco acentos entre
   69 y 81 % — pastel sobre pastel. Esta banda era el caso de manual: cinco
   pastillas `--celeste` (#d0dfef) con el glifo en `--acento-txt` sobre una banda
   blanca. Todo neblina, nada de tinta, y por eso los cinco ítems se leían como
   uno solo repetido cinco veces.
   ⭐ Ahora el relleno es `--acento-txt` (#25689c) con el glifo en blanco: 5,51:1
   medido, AA de sobra. Y NO es `--marca`: en esta tienda el azul lleno de marca
   quiere decir UNA cosa —«tocá acá para comprar»—, y una promesa de envío no es
   un botón de compra. El halo celeste de abajo queda igual: la regla de la casa
   es sombra de color, y la tinta no la reemplaza, la completa. */
.cst-conf-ic{flex:none;display:grid;place-items:center;width:2.35rem;height:2.35rem;
  border-radius:.8rem;background:var(--acento-txt);color:var(--blanco);
  box-shadow:0 6px 16px color-mix(in srgb,var(--acento) 55%,transparent);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.cst-conf-x{min-width:0}
.cst-conf-t{display:block;font-size:.8125rem;font-weight:800;letter-spacing:-.01em;
  line-height:1.25;color:var(--ink)}
.cst-conf-s{display:block;margin-top:.1rem;font-size:.6875rem;font-weight:600;
  line-height:1.35;color:var(--muted)}
@media (hover:hover) and (pointer:fine){
  a.cst-conf-i:hover .cst-conf-ic{transform:translateY(-2px);
    box-shadow:0 10px 22px color-mix(in srgb,var(--acento) 60%,transparent)}
  a.cst-conf-i:hover .cst-conf-t{color:var(--acento-txt)}
}
a.cst-conf-i:focus-visible{outline:2px solid var(--acento-txt);outline-offset:-2px;
  border-radius:var(--r-s)}

/* ═══ ⭐ LA MARQUESINA — SÓLO CUANDO NO ENTRA ════════════════════════════════
   La cinta del mockup (`animation:mq`), pero con la condición que le faltaba.
   La cabecera de `webRenderConfianza()` explica por qué acá no había animación,
   y los tres motivos SIGUEN EN PIE — por eso ninguno se ignoró, se resolvieron:

     1. «Con pocos ítems la cinta se ve rota» → el JS MIDE antes de encender. Si
        los ítems entran (hoy, en monitor: cinco ítems en 1376 px, entran), la
        banda queda quieta y repartida, exactamente como está. La cinta aparece
        donde YA estaba cortada: el teléfono.
     2. «Texto que se mueve no se lee» → sólo se mueve lo que no se podía leer
        entero igual, y se FRENA con el mouse encima y con el foco adentro.
     3. «El contenido duplicado se anuncia dos veces» → la copia va con
        `aria-hidden="true"` y sus links con `tabindex="-1"`.

   Y con el JavaScript apagado no pasa nada: sin `data-mq` esto no existe y la
   banda sigue siendo el scroller de siempre.
   ⚠️ `translateX(-50%)` es exactamente UNA copia porque el contenido está
   duplicado una sola vez. Si alguien clona dos veces, hay que cambiar el 50%. */
.cst-conf[data-mq="1"]{position:relative;overflow:hidden}
/* 🔴 LOS BORDES SE DISUELVEN, Y NO ES ADORNO. Una cinta en movimiento tiene, en
   todo momento, un ítem cortado al ras en cada punta: quieta —en una captura, o
   con el mouse encima— eso se lee EXACTAMENTE igual que el bug que veníamos a
   arreglar («6 cuotas sin…» cortado por el borde). Con el degradé, lo que entra
   y lo que sale se desvanecen y el corte deja de existir.
   ⚠️ El degradé va en dos pseudo-elementos y NO en un `mask` sobre `.cst-conf`:
   la banda tiene fondo blanco y una línea arriba y otra abajo, y un `mask` se
   comería también el fondo y las líneas en las puntas — la banda parecería no
   llegar al borde de la pantalla.
   `color-mix(… 0%, transparent)` y no `transparent` pelado: el segundo
   interpola por negro transparente en motores viejos y deja un velo gris. */
.cst-conf[data-mq="1"]::before,
.cst-conf[data-mq="1"]::after{content:'';position:absolute;z-index:2;top:0;bottom:0;
  width:clamp(1.5rem,6vw,3rem);pointer-events:none}
.cst-conf[data-mq="1"]::before{left:0;
  background:linear-gradient(90deg,var(--conf-bg),color-mix(in srgb,var(--conf-bg) 0%,transparent))}
.cst-conf[data-mq="1"]::after{right:0;
  background:linear-gradient(270deg,var(--conf-bg),color-mix(in srgb,var(--conf-bg) 0%,transparent))}
.cst-conf-l[data-mq="1"]{display:flex;width:max-content;margin-inline:0;
  overflow:visible;scroll-snap-type:none;
  animation:cst-cinta var(--mqs,40s) linear infinite;will-change:transform}
.cst-conf-l[data-mq="1"] > li{flex:none;scroll-snap-align:none}
@keyframes cst-cinta{from{transform:none}to{transform:translateX(-50%)}}
@media (hover:hover) and (pointer:fine){
  .cst-conf[data-mq="1"]:hover .cst-conf-l{animation-play-state:paused}
}
.cst-conf[data-mq="1"]:focus-within .cst-conf-l{animation-play-state:paused}

/* ═══ ⭐ 08-10 · LA BANDA, MÁS ALTA Y CON CARDS — DE 481 PX PARA ARRIBA ═══════
   Diego, votando la portada el 07-10: «a lo de las cuotas, despacho, eso podría
   ser más alto y con mucho mejor diseño». Tenía razón, y el defecto tenía
   nombre: la banda era una tira de 90 px entre dos hairlines, con cinco
   columnas idénticas separadas por una raya de 1 px. Cinco promesas distintas
   dichas con la misma voz, en un renglón que se leía como un pie de página.

   Qué cambia, y por qué cada cosa:
     · LA BANDA SE APOYA EN EL TINTE DE LA PÁGINA y deja de ser blanca. El hero
       termina disolviéndose en `--pag`; con la banda del mismo color deja de ser
       una tira pegada abajo y pasa a ser el piso donde se apoyan las cards.
     · SE VAN LAS DOS HAIRLINES y la raya entre ítems: son TRES bordes haciendo
       el trabajo que acá hace el halo. Regla de la casa, más halo menos borde.
     · CADA ÍTEM ES UNA CARD QUE FLOTA y sube al hover, con la sombra celeste de
       siempre. Es el MISMO lenguaje que las cards de producto de más abajo: la
       portada deja de hablar dos idiomas en la misma pantalla.
     · Y la banda gana alto de verdad (padding propio), que es lo que pidió.

   🔴 EL TELÉFONO NO SE TOCA. Abajo de 480 px la banda sigue siendo exactamente
      la de hoy —el carrusel al 86 %—, porque ahí el alto es lo más caro que hay:
      la primera card de producto asoma 112 px arriba del pliegue a 390x664 y
      23 px a 320x568, y eso se acaba de arreglar. Un hueco entre ítems más una
      sombra se comen esos 23 px enteros. Lo único que el teléfono SÍ se lleva es
      la tinta del ícono, que no cuesta un píxel de alto.

   ⚠️ `.cst-conf-l > li + li .cst-conf-i` SE REPITE ACÁ A PROPÓSITO. La regla de
      arriba que pinta el separador lleva dos clases y dos etiquetas: le gana por
      especificidad a `.cst-conf-i` a secas, así que sin esta segunda mitad la
      card quedaba sin sombra y sin bordes redondeados a partir de la segunda —
      y en el código no se vería nada raro. Es la colisión de cascada que esta
      casa ya pagó más de una vez.
   ⚠️ El `padding-block` de la lista tampoco es adorno: `overflow-x:auto` hace
      que el eje vertical también recorte, y sin ese aire el halo de las cards
      se cortaba al ras arriba y abajo. */
@media (min-width:30.0625rem){
  .cst-conf{--conf-bg:var(--fondo);border-block:0;
    padding-block:clamp(1.4rem,3vw,2.35rem)}
  /* 🔴 Y SE VA EL HUECO BLANCO QUE QUEDABA DEBAJO. Con la banda convertida en
     sección, el `margin-top` de la grilla más el `padding-top` de la sección
     sumaban ~128 px de nada entre dos bloques que ya están separados por un
     cambio de color. Es el mismo tratamiento que ya tenía el hero una línea más
     arriba del archivo (`.cst-hero + .cst-sec-alt{margin-top:0}`), por el mismo
     motivo: quien termina en su propio corte de color no necesita además un
     margen. Va ACÁ ADENTRO y no en la regla general a propósito — en el
     teléfono ese margen ya está recortado a 1rem y es lo que mide el sabotaje
     10 de `sabotear_portada_asoma.py`; pisarlo desde afuera lo dejaría sin
     poder morder. */
  .cst-conf + .cst-sec-alt{margin-top:0}
  .cst-conf-l{grid-auto-columns:minmax(14.5rem,1fr);gap:clamp(.6rem,1.1vw,1rem);
    padding-block:.9rem}

  /* ══ ⭐ 08-10 · LA JERARQUÍA, QUE ES LO QUE FALTABA ════════════════════════
     Diego, mirando corpskyla.com: *«lo de "Despacho el mismo día / Retiro sin
     cargo" podría ser más grande y más visual»*. Y la banda ACABA de crecer —de
     90 a 221 px, con la tinta en el ícono y las cards flotando—, así que el
     pedido no es más alto: es que **el contenido no creció con la caja**.

     Está medido, no opinado. A 2.560, antes de esto:
       · la card medía 333 x 90 px y lo que había adentro ocupaba una tira de
         38 px de ícono y dos renglones de 14 y 12 px, pegada arriba a la
         izquierda. El resto era aire;
       · el salto entre el dato y la etiqueta era de 14 a 12 px —un factor de
         1,17—, que a dos metros de un monitor de 27" es **el mismo cuerpo**.
         Cinco promesas distintas dichas con la misma voz.

     Las tres cosas que cambian, y qué contesta cada una:
       · QUÉ DICE PRIMERO · la card se APILA. El ícono deja de compartir
         renglón y pasa a ser la primera línea; abajo el dato y abajo la
         explicación. Se lee de arriba abajo en vez de a los saltos, y la caja
         deja de ser una tira con aire a la derecha.
       · EL DATO CONTRA LA ETIQUETA · 21 px contra 14 (factor 1,5, antes 1,17)
         y el interletrado cerrado. «Despacho el mismo día» pasa a ser lo
         primero que se ve de la banda; «comprando antes de las 14:00» lo que se
         lee después, que es el orden en que esas dos cosas importan.
       · CUÁNTO PESA EL ÍCONO · de 2,35 a 3,25 rem, con el glifo a 1,5 rem
         adentro (de un 40 % de la pastilla a un 46 %). Sigue siendo
         `--acento-txt` relleno: la tinta no se toca, es lo que PR-2b mide.
     ⭐ Y EL HALO REEMPLAZA A LA SOMBRA NEUTRA. `--sh-1` es gris; acá la card
        pasa a llevar el halo celeste de la casa, el mismo que la fila del hero
        en el teléfono y el que Diego señaló como «lo mejor del diseño». No se
        agrega un elemento: se cambia el color de uno que ya estaba.
     🔴 EL TELÉFONO SIGUE SIN TOCARSE: todo esto vive adentro del
        `min-width:30.0625rem`, igual que el bloque de arriba. Lo mide PR-3a/3b
        (la banda a 390 px tiene que seguir midiendo ≤120 y SIN flotar) y, del
        otro lado, PA-2b: los 92 px de producto que asoman sin deslizar. */
  .cst-conf-i,
  .cst-conf-l > li + li .cst-conf-i{flex-direction:column;align-items:flex-start;
    justify-content:flex-start;gap:clamp(.7rem,1vw,1rem);
    padding:clamp(1.25rem,1.5vw,1.75rem) clamp(1.15rem,1.4vw,1.6rem);
    border-radius:var(--r-m);background:var(--sup);
    box-shadow:0 .85rem 2rem -.7rem color-mix(in srgb,var(--acento) 70%,transparent);
    transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
  /* El glifo crece con la pastilla: `.cst-ico` mide 1em, así que lo que lo
     mueve es el `font-size` de acá y no un alto. Sin esto la pastilla crecía y
     el dibujo de adentro se quedaba en 15 px, nadando. */
  .cst-conf-ic{width:clamp(2.75rem,3vw,3.25rem);height:clamp(2.75rem,3vw,3.25rem);
    border-radius:1rem;font-size:1.5rem;
    box-shadow:0 .65rem 1.3rem color-mix(in srgb,var(--acento) 60%,transparent)}
  /* `.cst-conf-x` es el bloque de texto: a lo ancho de la card, ya no al lado
     del ícono. Sin esto se quedaba en el ancho de su contenido. */
  .cst-conf-x{width:100%}
  .cst-conf-t{font-size:clamp(1.0625rem,.42vw + .92rem,1.3125rem);line-height:1.2;
    letter-spacing:-.02em}
  /* 🔴 `--ink2` Y NO `--muted`. A 14 px el renglón de abajo deja de ser una
     nota al pie y pasa a ser texto que se lee: `--muted` (#6b747f) sobre la
     card blanca da 4,74:1 —pasa AA raspando— y acá tiene que sostener la mitad
     de la promesa. `--ink2` (#3c4552) da 9,1:1 y además separa por COLOR lo que
     ya se separa por cuerpo y por peso, sin apagarlo en gris. */
  .cst-conf-s{margin-top:.3rem;font-size:clamp(.8125rem,.14vw + .78rem,.875rem);
    line-height:1.4;color:var(--ink2)}
  @media (hover:hover) and (pointer:fine){
    a.cst-conf-i:hover,
    .cst-conf-l > li + li a.cst-conf-i:hover{transform:translateY(-3px);
      box-shadow:0 1.3rem 2.6rem -.7rem color-mix(in srgb,var(--acento) 85%,transparent)}
  }
}

/* ═══ VP-05 · LAS GÓNDOLAS DEL INICIO ════════════════════════════════════════
   Cada categoría es una baldosa con su nombre encima. La foto de portada la
   carga el panel (`PN-25`); hoy no hay ninguna, así que casi todas se ven con
   el DEGRADÉ de respaldo del §5 del contrato — que no es un placeholder gris,
   es la cara que tiene la categoría hasta que tenga foto. */
.cst-gond{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.25rem;
  list-style:none;margin:0;padding:0}
/* ⭐ FILAS ENTERAS — la baldosa huérfana ─────────────────────────────────────
   Con 4 columnas fijas y 5 categorías, la quinta queda SOLA en la segunda fila
   con tres huecos al lado. No se lee como «hay cinco»: se lee como «tres fotos
   no cargaron», que es justo lo que hay que evitar con el catálogo chico de
   hoy. Quien dibuja elige cuántas columnas para que la última fila SIEMPRE esté
   llena (`webRFilasEnteras()`), y estas clases lo aplican.
   🔴 EL ORDEN DE ESTAS TRES REGLAS IMPORTA. Las tres son de una sola clase, o
   sea misma especificidad: gana la última. Por eso el `@media` del celular va
   DESPUÉS de `-c2`/`-c3`, o una home de 6 baldosas se quedaría en 3 columnas a
   390 px. Es la colisión de cascada de siempre. */
.cst-gond-c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cst-gond-c3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:62.5rem){.cst-gond{grid-template-columns:repeat(2,minmax(0,1fr));gap:.875rem}}
.cst-gond-a{position:relative;display:block;aspect-ratio:4/3;border-radius:var(--r-l);
  overflow:hidden;text-decoration:none;box-shadow:var(--sh-2);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
/* 🔴🔴 15-10 (pedido 287) · EL NOMBRE SALÍA VIOLETA, Y LA CAUSA NO ERA UN COLOR.
   La tinta de la baldosa viajaba en un atributo style del enlace («color:
   blanco» con foto; el degradé y su tinta sin foto), y la CSP de esta tienda
   es style-src con nonce SIN unsafe-inline: el navegador BORRA ese atributo
   entero, sin un error a la vista. Sin color propio el enlace quedaba con el
   del navegador: azul #0000ee y, en una categoría ya visitada, VIOLETA
   #551a8b — Diego las había tocado todas. Medido con Chrome por CDP sobre la
   portada del banco: color pintado rgb(0,0,238) con el atributo en el HTML.
   Por eso el color vive ACÁ, en la hoja, y lo único que es de cada slug (el
   degradé sin foto) va en un style con nonce que arma webRenderGondolas().
   Con foto: tinta clara sobre el velo oscuro, el mismo criterio que el resto
   de los textos sobre foto de la tienda (.cst-th-play, .cst-th-seg).
   ⚠️ .cst-gond-sf va DESPUÉS: misma especificidad, gana la última. */
.cst-gond-a{color:#fff;background:var(--bandeja)}
.cst-gond-sf{color:var(--ink);background:linear-gradient(135deg,var(--fondo2),var(--celeste))}
@media (hover:hover) and (pointer:fine){
  .cst-gond-a:hover{transform:translateY(-8px);box-shadow:var(--sh-3)}
}
.cst-gond-a:focus-visible{outline:2px solid var(--acento-txt);outline-offset:3px}
.cst-gond-f{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .7s var(--ease)}
@media (hover:hover) and (pointer:fine){
  .cst-gond-a:hover .cst-gond-f{transform:scale(1.06)}
}
/* 🔴 CON FOTO VA UN VELO, SIN FOTO NO. Encima de una foto cualquiera el texto
   no se lee y no hay forma de saber de antemano qué foto va a subir Diego; el
   velo lo resuelve sin depender de la foto. Sobre el degradé NO va: los siete
   pares tinta/fondo del §5 ya pasan AA calculado, y un velo encima los
   ensuciaría para arreglar un problema que no tienen. */
.cst-gond-velo{position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 34%,rgba(17,20,26,.72) 100%)}
/* ⭐ EL ORBE DE LA BALDOSA SIN FOTO ─────────────────────────────────────────
   Hoy NINGUNA categoría tiene portada cargada, así que esto no es el caso raro:
   es lo que se ve. Cuatro rectángulos celestes en fila con el nombre abajo se
   leen como cuatro fotos que no cargaron. Con el orbe —el halo de la casa,
   adentro— se leen como cuatro baldosas de color, que es lo que son.
   Se pinta con `currentColor`, o sea con la tinta que le tocó al tono: en los
   tres tonos claros es un velo oscuro suave, en los dos oscuros es un resplandor
   blanco. Un solo valor, cinco resultados correctos, cero colores nuevos. */
.cst-gond-orbe{position:absolute;pointer-events:none;
  right:-18%;top:-30%;width:76%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,
    color-mix(in srgb,currentColor 15%,transparent) 0%,transparent 68%);
  transition:transform .7s var(--ease)}
@media (hover:hover) and (pointer:fine){
  .cst-gond-a:hover .cst-gond-orbe{transform:scale(1.12) translate(-4%,4%)}
}
/* Con foto el nombre queda pegado abajo; sin foto sube de tamaño y respira,
   porque ahí el nombre ES la baldosa. */
.cst-gond-t{position:absolute;left:1rem;right:3.4rem;bottom:.9rem;
  font-size:clamp(.9375rem,1.6vw,1.0625rem);font-weight:800;letter-spacing:-.02em;
  line-height:1.2;text-wrap:balance;overflow-wrap:break-word}
.cst-gond-sf .cst-gond-t{bottom:1.05rem;font-size:clamp(1rem,1.9vw,1.25rem);
  letter-spacing:-.03em}
.cst-gond-n{display:block;margin-top:.15rem;font-size:.6875rem;font-weight:700;
  opacity:.78;font-variant-numeric:tabular-nums}
/* La flecha: dice que se toca. Va anclada al borde, no flotando en el medio. */
.cst-gond-ir{position:absolute;right:1rem;bottom:1rem;display:grid;place-items:center;
  width:2.1rem;height:2.1rem;border-radius:50%;
  border:1px solid color-mix(in srgb,currentColor 34%,transparent);
  background:color-mix(in srgb,currentColor 9%,transparent);
  transition:transform .4s var(--ease),background-color .4s var(--ease)}
.cst-gond-ir .cst-ico{width:1.05em;height:1.05em}
@media (hover:hover) and (pointer:fine){
  .cst-gond-a:hover .cst-gond-ir{transform:translateX(3px);
    background:color-mix(in srgb,currentColor 20%,transparent)}
}
/* ⭐ 287 · LA BALDOSA SIN EL NOMBRE ENCIMA (lo apaga Diseño, y nace apagado).
   La foto queda limpia: sin nombre y SIN VELO, que sólo estaba para que el
   texto se leyera — oscurecer una foto ya diseñada para nada es ensuciarla.
   La flecha se queda (es lo que dice que se toca), pero sin velo debajo no
   hay garantía de contraste sobre una foto clara: lleva su propio disco de
   vidrio oscuro. Al 46 % del negro de marca, el blanco de la flecha da más
   de 3:1 aun sobre una foto blanca, que es lo que pide un ícono de control.
   El nombre no se pierde: el enlace lo dice con aria-label y la foto con su alt. */
.cst-gond-nn .cst-gond-ir{border-color:color-mix(in srgb,#fff 42%,transparent);
  background:color-mix(in srgb,#11141a 46%,transparent);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
@media (hover:hover) and (pointer:fine){
  .cst-gond-nn.cst-gond-a:hover .cst-gond-ir{background:color-mix(in srgb,#11141a 58%,transparent)}
}

/* ═══ VP-08 · LA FRANJA DE FLYERS ════════════════════════════════════════════ */
.cst-bans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem;
  list-style:none;margin:0;padding:0}
@media (max-width:47.5rem){.cst-bans{grid-template-columns:1fr;gap:.875rem}}
.cst-ban{display:block;border-radius:var(--r-l);overflow:hidden;box-shadow:var(--sh-2);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
@media (hover:hover) and (pointer:fine){
  .cst-ban[href]:hover{transform:translateY(-6px);box-shadow:var(--sh-3)}
}
.cst-ban:focus-visible{outline:2px solid var(--acento-txt);outline-offset:3px}
/* La medida del contrato: 1280×640 en monitor, 1080×810 en celular. Se declara
   con `aspect-ratio` para que el hueco esté reservado ANTES de que baje la
   imagen y la página no salte cuando llega. */
.cst-ban img{display:block;width:100%;height:auto;aspect-ratio:2/1;object-fit:cover}
@media (max-width:47.5rem){ .cst-ban img{aspect-ratio:4/3} }

/* ═══ ⭐ SKY-TF · EL BLOQUE DE TEXTO CON FOTO ════════════════════════════════
   Dos columnas que se parten en una. Tres decisiones, con el porqué:

   · **La figura va PRIMERA en el HTML y se manda al otro lado con `order`.**
     Así en el celular la foto queda ARRIBA del texto sin un segundo bloque de
     reglas, y en la pantalla ancha se la puede poner de cualquiera de los dos
     lados con una sola clase. La foto es decorativa (`alt=""`), así que mover
     su lugar visual no desordena nada para quien escucha la página.
   · **El texto tiene tope de medida (`62ch`) aunque la columna sea más ancha.**
     En el monitor de 2.560 la caja mide casi 830 px y un renglón de 140
     caracteres no se lee: el ojo pierde el principio de la línea siguiente. El
     tope es de LECTURA, no de layout — por eso va en el párrafo y no en la
     columna.
   · **`white-space:pre-line`.** Los renglones sueltos que escribió Diego se
     respetan (una dirección en tres renglones sale en tres renglones) sin que
     el bloque tenga que aceptar una sola etiqueta de HTML.

   ⚠️ Sin foto NO queda media pantalla vacía: `cst-tf-solo` pasa a una columna
      angosta y centrada, que es una forma terminada. */
.cst-tf{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1.25rem,3.2vw,3rem);align-items:center}
.cst-tf-der .cst-tf-f{order:2}
.cst-tf-solo{grid-template-columns:minmax(0,1fr);max-width:54rem;margin-inline:auto}
.cst-tf-f{margin:0;min-width:0}
.cst-tf-f picture{display:block}
.cst-tf-f img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
  border-radius:var(--r-l);box-shadow:var(--sh-2)}
.cst-tf-c{min-width:0}
.cst-tf-c .cst-h2{margin:0 0 .8rem}
.cst-tf-c p{margin:0 0 .9rem;max-width:62ch;color:var(--ink2);
  font-size:clamp(.9375rem,1.2vw,1.0625rem);line-height:1.7;
  white-space:pre-line;overflow-wrap:break-word}
.cst-tf-c p:last-child{margin-bottom:0}
@media (max-width:47.5rem){
  .cst-tf{grid-template-columns:minmax(0,1fr);gap:1.1rem}
  .cst-tf-der .cst-tf-f{order:0}
  .cst-tf-f img{aspect-ratio:16/10}
}

/* ═══ ⭐ SKY-PF · LAS PREGUNTAS FRECUENTES ═══════════════════════════════════
   Plegables de verdad: `<details>` + `<summary>`. Cuatro decisiones:

   · **Lista, no cards.** Cada pregunta es un renglón separado por una línea,
     como un índice. Doce cards una abajo de la otra se leen como doce bloques
     y el bloque entero deja de escanearse de un vistazo, que es para lo que
     existe.
   · **La flecha gira al abrir** y es la ÚNICA señal de estado: sin ella, un
     plegable cerrado no se distingue de un título suelto.
   · **Sin `list-style`.** Safari e iOS dibujan un triangulito propio en el
     `summary` que no se puede estilar y que compite con la flecha. Se apaga con
     `::-webkit-details-marker` y con `display:block`, que son los dos caminos
     por los que aparece.
   · **El cursor y el foco son del `summary` entero**, no de la flecha: el área
     que se toca con el dedo es el renglón completo. */
.cst-faq{border-top:1px solid var(--line);max-width:60rem}
.cst-faq-i{border-bottom:1px solid var(--line)}
.cst-faq-i>summary{display:flex;align-items:flex-start;gap:1rem;cursor:pointer;
  list-style:none;padding:1rem .25rem;font-size:clamp(.9375rem,1.4vw,1.0625rem);
  font-weight:700;letter-spacing:-.01em;line-height:1.35;color:var(--ink);
  transition:color .2s var(--ease)}
.cst-faq-i>summary::-webkit-details-marker{display:none}
.cst-faq-i>summary:focus-visible{outline:2px solid var(--acento-txt);outline-offset:2px;
  border-radius:var(--r-s)}
@media (hover:hover) and (pointer:fine){
  .cst-faq-i>summary:hover{color:var(--acento-txt)}
}
.cst-faq-i>summary .cst-ico{margin-left:auto;flex:none;width:1.1em;height:1.1em;
  margin-top:.15em;color:var(--muted);transition:transform .25s var(--ease)}
.cst-faq-i[open]>summary .cst-ico{transform:rotate(180deg)}
.cst-faq-r{padding:0 2.1rem 1.1rem .25rem;max-width:62ch;color:var(--ink2);
  font-size:clamp(.9375rem,1.2vw,1rem);line-height:1.7;white-space:pre-line;
  overflow-wrap:break-word}

/* ═══ 🔴 EL MOLDE DE UNA SECCIÓN VACÍA — SÓLO DETRÁS DEL PASE ════════════════
   PN-82a. Pedido de Diego (11-09): ver la nota de `webRenderHueco()`. Cuatro
   decisiones de dibujo, y las cuatro se pueden discutir con el resultado a la
   vista:

   · **Punteado y no relleno.** Un rectángulo gris sólido se lee como una foto
     que no cargó —o sea, como un error—; la línea de puntos se lee como un
     molde. Es la diferencia entre «se rompió» y «acá va algo».
   · **LA MISMA FORMA QUE TENDRÍA LA SECCIÓN.** La proporción llega por `--har`
     (2/1 los flyers, 4/3 las góndolas, 3/4 las cards…) y las columnas por
     `--hcols`. El molde sirve justamente para ver cuánto ocupa: si midiera otra
     cosa, mentiría — y entonces no serviría para maquetar, que es su único
     motivo de existir.
   · **Sin sombra y sin hover.** No flota y no sube: no es una card, no se toca
     y no lleva a ningún lado. Todo lo que parece apretable y no lo es enseña a
     desconfiar de lo que sí lo es.
   · **En el teléfono, una columna y más bajo.** Cuatro moldes apilados a 4/3 en
     390 px son cuatro pantallas de rectángulos punteados: se achatan a 5/2 y se
     ponen en una sola columna, que sigue mostrando la forma sin ocupar el día.

   ⚠️ `--har` y `--hcols` se validan en PHP antes de entrar al `style`: salen de
   una tabla nuestra, pero un `style` es tan peligroso como un `src`. */
.cst-huecos{display:grid;grid-template-columns:repeat(var(--hcols,2),minmax(0,1fr));
  gap:1.25rem;list-style:none;margin:0;padding:0}
/* 🔴 `minmax(0,1fr)` Y NO `1fr` A SECAS, TAMBIÉN EN CELULAR. Un `1fr` pelado es
   `minmax(auto,1fr)`: su mínimo es el min-content del hijo, así que el molde
   —que con `aspect-ratio` y `min-height` pide 400 px de ancho— ESTIRABA LA
   COLUMNA y se llevaba la página con él. Medido a 390: `body.scrollWidth` 416
   contra 390. Es el blowout clásico de grid, y es la segunda forma que encontró
   el mismo molde de producir scroll lateral en diez minutos. */
@media (max-width:47.5rem){ .cst-huecos{grid-template-columns:minmax(0,1fr);gap:.875rem} }
.cst-hueco{display:grid;place-content:center;justify-items:center;gap:.15rem;
  aspect-ratio:var(--har,2 / 1);padding:1rem;text-align:center;
  border:2px dashed color-mix(in srgb,var(--acento) 62%,transparent);
  border-radius:var(--r-l);background:var(--fondo)}
/* 🔴🔴 `width:100%` NO ES DECORATIVO: ES EL SEGURO ANTI-DESBORDE, y está acá
   porque ME MORDIÓ AL ESCRIBIR ESTO. El `min-height` de abajo es el seguro del
   texto —una proporción muy apaisada (16/1, la franja de anuncios) deja una caja
   de 90 px donde no entra ni el ícono—, pero con el ancho en `auto` el navegador
   resolvió el `aspect-ratio` al revés: tomó los 176 px del `min-height` y calculó
   un ANCHO de 16 × 176 = **2.816 px**. Medido por CDP a 1440: `body.scrollWidth`
   2848 contra `clientWidth` 1440, o sea 1.408 px de scroll lateral — exactamente
   la clase de bug que ya llegó a producción una vez en esta tienda.
   Con el ancho fijado en 100 %, la proporción sólo puede mover el ALTO, y el
   `min-height` gana cuando la proporción no alcanza. */
.cst-hueco{width:100%;min-height:11rem;height:auto}
@media (max-width:47.5rem){ .cst-hueco{aspect-ratio:5 / 2;min-height:10rem} }
/* ⏳ La sección que todavía NO SE DIBUJA de este lado. Se distingue del molde
   de «falta contenido» porque son dos problemas distintos y tienen dos
   soluciones distintas: uno se arregla cargando algo, el otro escribiendo
   código. Mismo punteado —sigue siendo un molde— pero apagado: no hay nada que
   Diego pueda hacer ahí, y un molde que grita pide una acción que no existe. */
.cst-hueco-x{border-color:color-mix(in srgb,var(--segundo) 82%,transparent);
  background:color-mix(in srgb,var(--fondo2) 70%,transparent)}
.cst-hueco-x .cst-hueco-ic{background:var(--fondo2);color:var(--ink2);box-shadow:none}
.cst-hueco-x .cst-hueco-m{color:var(--ink2)}
.cst-hueco-ic{display:grid;place-items:center;width:2.9rem;height:2.9rem;margin-bottom:.45rem;
  border-radius:1rem;background:var(--celeste);color:var(--acento-txt);font-size:1.4rem;
  box-shadow:0 8px 20px color-mix(in srgb,var(--acento) 42%,transparent)}
.cst-hueco-t{font-size:.9375rem;font-weight:800;letter-spacing:-.01em;color:var(--ink)}
/* El número es el motivo del hueco: va grande y en el tono del área, como
   cualquier dato que manda en su pantalla. `tabular-nums` viene de `.cst-num`. */
.cst-hueco-m{font-size:clamp(1.5rem,3.4vw,2.125rem);font-weight:800;letter-spacing:-.03em;
  line-height:1.1;color:var(--acento-txt)}
/* ⚠️ --ink2 y no --muted: el detalle se apoya en `--fondo` (#f1f5fa), donde
   #6b747f da 4,33:1 y NO pasa AA. #3c4552 sobre #f1f5fa da 8,9:1. */
.cst-hueco-d{max-width:34ch;font-size:.75rem;font-weight:600;color:var(--ink2);line-height:1.45}
/* Dónde se carga: la instrucción, no el dato. Va más chica y separada — si
   pesara lo mismo que el «falta X», competirían y no se leería ninguna de las
   dos. `--muted` sobre `--fondo` no pasa AA en 12 px, así que va `--ink2` con
   opacidad: el mismo color, menos peso, y el contraste sigue siendo 8,9:1
   contra el fondo porque la opacidad se resuelve contra él. */
.cst-hueco-w{margin-top:.5rem;padding:.28rem .6rem;border-radius:999px;
  background:var(--sup);border:1px solid var(--line);
  font-size:.6875rem;font-weight:700;color:var(--ink2)}
/* El aviso de que esto no lo ve nadie más. Va en el encabezado de la sección,
   pegado a la derecha —`margin-left:auto`, como `.cst-cuenta`— porque es un
   estado de la pantalla, no un subtítulo del bloque. */
.cst-hueco-chip{display:inline-flex;align-items:center;gap:.35rem;margin:0 0 0 auto;
  padding:.32rem .7rem;border-radius:999px;
  background:var(--sup);border:1px solid var(--line);box-shadow:var(--sh-1);
  font-size:.6875rem;font-weight:700;color:var(--ink2)}

/* ═══ ⭐ PN-82b §6 bis · EL GANCHO DE EDICIÓN ════════════════════════════════
   Sólo existe en vista previa (`webRenderPrevEditable()`). El halo —no un
   borde duro— es la firma de la casa: se nota al pasar el mouse o al llegar
   con el teclado, y desaparece del todo en reposo.
   ⚠️ `.cst-prevedit` es a propósito FULL-BLEED (sin `.cst-wrap` propio): el
   hero y la barra de confianza dibujan su fondo de borde a borde, y ponerle acá
   un ancho angosto los recortaría en vista previa nada más — layout distinto
   al real es mentirle a quien está mirando para decidir si publica. */
.cst-prevedit{position:relative;border-radius:var(--r-l);transition:box-shadow .2s var(--ease)}
.cst-prevedit:hover,.cst-prevedit:focus-within{
  box-shadow:0 0 0 3px color-mix(in srgb,var(--acento) 55%,transparent),
             0 26px 54px -16px color-mix(in srgb,var(--acento) 46%,transparent)}
/* La píldora SÍ se alinea con el contenido (no con el borde de la pantalla):
   mismo cálculo que usa `.cst-wrap` para su margen, para que en un monitor de
   27" no quede flotando sola en el margen vacío. */
.cst-prevedit-tag{position:absolute;top:.85rem;z-index:5;
  right:calc((100% - min(108rem,100% - 4rem))/2 + .85rem);
  display:inline-flex;align-items:center;gap:.35rem;
  padding:.4rem .8rem;border:0;border-radius:999px;cursor:pointer;
  background:var(--negro);color:#fff;font-family:var(--f);
  font-size:.72rem;font-weight:800;letter-spacing:.01em;white-space:nowrap;
  box-shadow:0 10px 22px color-mix(in srgb,var(--negro) 40%,transparent);
  opacity:.85;transition:opacity .2s var(--ease),transform .2s var(--ease)}
.cst-prevedit:hover .cst-prevedit-tag{opacity:1}
@media (hover:hover) and (pointer:fine){
  .cst-prevedit-tag:hover{transform:translateY(-1px);opacity:1}
}
/* En el celular no hay hover: la píldora tiene que arrancar bien visible, no
   sólo al tocar — si no, nadie descubre que la sección se puede editar. */
@media (hover:none){ .cst-prevedit-tag{opacity:1} }
.cst-prevedit-tag:focus-visible{outline:2px solid var(--acento-txt,var(--acento));outline-offset:2px}

/* ═══ VP-13 · VP-14 · LOS FILTROS Y EL ORDEN ═════════════════════════════════
   🔴 ES UN <form method="get"> DE VERDAD, no una fila de botones con JavaScript.
   Tres razones, en orden de peso:
     · Sin JS sigue andando. El botón «Aplicar» está ahí para eso.
     · La URL queda compartible y se puede volver con el botón de atrás. Una
       grilla que se filtra sólo en el navegador pierde las dos cosas.
     · Lo que se ve sale del SERVIDOR, así que no hay una segunda versión del
       filtrado escrita en JavaScript esperando a desincronizarse de la de PHP.
   El JS de abajo sólo lo manda solo al tocar algo, para que se sienta instantáneo. */
.cst-fil{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;
  margin:0 0 clamp(1rem,2.4vw,1.5rem)}
/* ══ ⭐ 08-10 · EL RIEL — UNA PISTA HUNDIDA, NO SEIS PÍLDORAS QUE FLOTAN ═══
   Diego: *«parecen botones sueltos»*. Eran seis objetos idénticos —blanco,
   borde, halo, 999px— con jerarquías distintas. Ahora los interruptores y el
   rango viven adentro de UNA pista de `--fondo2`, que es el gris celeste de la
   paleta, y la píldora blanca de adentro es la que está PRENDIDA.

   🔴 LA PISTA NO LLEVA HALO, Y ES A PROPÓSITO. En esta fila el halo celeste
   —la firma de la casa— se lo queda la promesa de entrega (`.cst-ent`), que es
   lo único que vende. Si las dos cosas flotan igual, el cartel de despacho se
   lee como un séptimo botón, que es exactamente la queja.

   📐 Y LAS ETIQUETAS PASAN DE `--muted` A `--ink2`, QUE NO ES UN GUSTO:
   #6b747f sobre `--fondo2` (#e4ecf5) da **3,98:1** y AA pide 4,5 — lo dice el
   propio comentario del token tres mil líneas más arriba: «sobre --fondo2
   (4,28) y --bandeja (4,07) NO alcanza: ahí va --ink2». Medido: `--ink2` da
   **8,14:1** y `--acento-txt` (el prendido) **4,98:1**. */
.cst-fil-riel{display:flex;align-items:center;flex-wrap:wrap;gap:.2rem;
  padding:.25rem;border-radius:999px;background:var(--fondo2);
  width:fit-content;max-width:100%}
/* La raya entre familia y familia: una forma de 1 px, no un carácter. */
.cst-fil-ray{flex:none;width:1px;height:1.25rem;margin:0 .3rem;border-radius:1px;
  background:var(--segundo)}
.cst-fil-rango{display:inline-flex;align-items:center;gap:.2rem}
/* 🔴 EN EL TELÉFONO LA RAYA SE VA Y EL RANGO BAJA ENTERO. Medido a 390: con el
   riel partido en dos renglones, la raya quedaba colgando al final del primero
   —«Envío gratis |»— separando el borde de la nada. Es el mismo defecto que ya
   se arregló el 08-10 en los links legales del pie, con otra ropa: apilados no
   hace falta separarlos, ya los separa el renglón. Se saca la marca y se fuerza
   el corte, que es un elemento menos y no uno más. */
@media (max-width:40rem){
  .cst-fil-ray{display:none}
  .cst-fil-rango{flex:1 0 100%;justify-content:flex-start}
  /* 12-10 · A2 · Partido en dos renglones, el radio de pildora lo dibujaba
     como un ovalo. Esto es la barra SIN JavaScript del telefono; con JS el
     riel vive en la hoja y ahi no tiene fondo ni radio. */
  .cst-fil-riel{border-radius:1.25rem}
}
.cst-fil-chip{position:relative;display:inline-flex;align-items:center;gap:0;
  min-height:2.5rem;padding:0 .85rem;border-radius:999px;
  background:transparent;border:0;box-shadow:none;
  font-size:.8125rem;font-weight:650;color:var(--ink2);cursor:pointer;
  transition:background .25s var(--ease),box-shadow .25s var(--ease),
             color .25s var(--ease)}
@media (hover:hover) and (pointer:fine){
  /* Adentro de una pista no se levanta nada: el `translateY` de antes hacía
     saltar a un vecino que comparte el riel. Se aclara el fondo y listo. */
  .cst-fil-chip:hover{background:color-mix(in srgb,var(--sup) 55%,transparent);
    color:var(--ink)}
}
/* El foco vive en el <input> escondido: se pinta el pill, que es lo que se ve. */
.cst-fil-chip:focus-within{outline:2px solid var(--acento-txt);outline-offset:2px}
/* 🔴 Prendido = la píldora BLANCA que se levanta de la pista, más tinta de
   acento y el tilde. Sigue sin haber un relleno azul lleno —la regla de la
   casa—: lo que cambia de color es la LETRA, no la caja. */
.cst-fil-chip[data-on="1"]{color:var(--acento-txt);background:var(--sup);
  box-shadow:0 1px 2px rgba(60,69,82,.07),
             0 2px 10px color-mix(in srgb,var(--acento) 42%,transparent)}
/* ⚠️ EL TILDE NO RESERVA LUGAR CUANDO ESTÁ APAGADO. Con `opacity:0` ocupaba
   13 px + 6,4 de hueco en cada uno de los tres, o sea casi 60 px de aire
   invisible — y a 390 px esos 60 px son justo la diferencia entre que los tres
   interruptores entren en un renglón o en dos. */
.cst-fil-chip .cst-ico{width:0;height:1em;margin-right:0;opacity:0;
  transition:width .2s var(--ease),margin .2s var(--ease),opacity .2s var(--ease)}
.cst-fil-chip[data-on="1"] .cst-ico{width:1em;margin-right:.4rem;opacity:1}
.cst-fil-pre{display:inline-flex;align-items:center;gap:.35rem;min-height:2.5rem;
  padding:0 .4rem 0 .6rem;border-radius:999px;background:transparent;
  border:0;box-shadow:none;
  font-size:.8125rem;font-weight:650;color:var(--ink2)}
.cst-fil-pre input{width:5.2rem;min-height:2rem;padding:0 .4rem;border:0;background:none;
  color:var(--ink);font-family:var(--f);font-size:max(16px,.8125rem);font-weight:700;
  font-variant-numeric:tabular-nums}
.cst-fil-pre input:focus-visible{outline:2px solid var(--acento-txt);outline-offset:1px;
  border-radius:.4rem}
.cst-fil-pre input::-webkit-outer-spin-button,
.cst-fil-pre input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
/* ⭐ 08-10 · «ORDENAR» ES LA TERCERA FAMILIA Y QUEDA FUERA DEL RIEL. No filtra
   nada: no saca productos de la grilla, los reordena. Por eso es un objeto
   aparte —anclado al borde derecho, como manda la regla de la casa— pero del
   MISMO material que la pista: los dos son controles, y eso tiene que leerse.
   El que flota en esta fila es uno solo, y es la promesa de entrega.
   📐 `--ink2` y no `--muted`: ver la nota del riel, 3,98:1 contra 8,14:1. */
.cst-fil-ord{display:inline-flex;align-items:center;gap:.4rem;min-height:2.5rem;
  margin-left:auto;padding:0 .5rem 0 .9rem;border-radius:999px;background:var(--fondo2);
  border:0;box-shadow:none;
  font-size:.8125rem;font-weight:650;color:var(--ink2)}
@media (max-width:40rem){ .cst-fil-ord{margin-left:0} }
/* ═══ CK-35 CORREGIDO 14-09 · EL DISPARADOR SE ESTILA, EL NATIVO ABRE LA LISTA
   Diego, mirando la web en vivo: «las listas desplegables, ejemplo la de
   ordenar por relevancia u otros, es genérica de Google. A todos los
   desplegables de la web deben ser con diseño». Invierte lo que decía CK-35
   (11-09, documentacion/web/13_PLAN_ETAPAS.md): `<select>` nativo A SECAS,
   sin `appearance:none`.

   La razón de aquella regla sigue siendo cierta, así que no se ignora:
   `appearance:none` cambia la CAJA CERRADA nada más —en el celular el
   `<select>` sigue abriendo la rueda del sistema, que es lo que la regla
   vieja quería proteger—. Acá se hacen las dos cosas a la vez: se le saca el
   cromado de fábrica (la flechita gris de Chrome/Android, que es la parte
   «de Google») y la LISTA la sigue abriendo el `<select>` real, en el
   celular como rueda nativa y en escritorio como lista nativa.

   🔴 No se dibuja un panel propio encima. Con UN SOLO `<select>` en toda esta
   pantalla, montar un listbox de mentira —reimplementar flechas, Home/End,
   tipeo-para-buscar y lo que un lector de pantalla anuncia— es agregar
   riesgo real por una fila. El día que haga falta ese panel en escritorio,
   se dibuja ENCIMA de este mismo `<select>`, que sigue mandando el valor:
   no se reemplaza (mirado antes de escribir esto: el enhancer `csx` del
   panel, que sí reemplaza el select entero — más pieza de la que hace falta
   acá para un solo control).

   El peso también baja, 700→500 (el cuerpo de texto de toda la tienda):
   «Relevancia» es el VALOR elegido, no un título, y a 700 le ganaba a su
   propia etiqueta «Ordenar» (650). */
.cst-fil-ord select{min-height:2.4rem;padding:0 .4rem;border:0;background:none;
  color:var(--ink);font-family:var(--f);font-size:max(16px,.8125rem);font-weight:500;
  cursor:pointer;appearance:none;-webkit-appearance:none;-moz-appearance:none}
/* Firefox dibuja un aro punteado ADENTRO del texto cuando `appearance:none`
   le saca el cromado nativo (que antes lo incluía). Sin esto el select
   quedaría con un aro que ningún otro control de la tienda tiene. */
.cst-fil-ord select::-moz-focusring{color:transparent;text-shadow:0 0 0 var(--ink)}
.cst-fil-ord select:focus-visible{outline:2px solid var(--acento-txt);outline-offset:1px;
  border-radius:.4rem}
.cst-fil-ok{min-height:2.5rem;padding:0 1rem;border-radius:999px;border:0;
  background:var(--marca);color:var(--marca-txt);font-family:var(--f);
  font-size:.8125rem;font-weight:750;cursor:pointer}
/* ⚠️ `[hidden]` es DÉBIL: cualquier `display:` propio le gana. Este componente
   define el suyo, así que tiene que definir también su `[hidden]` — es el bug
   nº 4 de la lista de cascada del mockup, el del globito del carrito. */
.cst-fil-ok[hidden]{display:none!important}
/* 📐 `--muted-f` y no `--muted`: «Limpiar» es el único control de esta fila que
   NO tiene caja propia, así que se apoya directo en `--fondo` (#f1f5fa), donde
   `--muted` da 4,33:1 y AA pide 4,5. Es el mismo gris cinco puntos más oscuro
   que ya se agregó el 27-09 para el pie legal, por la misma causa. */
.cst-fil-limpiar{display:inline-flex;align-items:center;min-height:2.5rem;padding:0 .7rem;
  font-size:.8125rem;font-weight:700;color:var(--muted-f);text-decoration:none;border-radius:999px}
@media (hover:hover) and (pointer:fine){ .cst-fil-limpiar:hover{color:var(--ink)} }
.cst-fil-limpiar:focus-visible{outline:2px solid var(--acento-txt);outline-offset:2px}

/* ═══ ⭐ 13-10 · #236 · EN LA PC, EL MISMO LENGUAJE QUE LA HOJA DEL TELEFONO ═══
   Diego, con la captura de /tienda en su monitor: «hay que arreglar eso que
   dice con oferta, en stock, los filtros: los arreglamos en mobile, no en PC,
   hay que meterle aca tambien!!!». En el telefono ya esta la opcion 1 de
   fil2_hoja_filtros (chips y segmentos, c36d496a); en la PC seguia la pista
   gris de 08-10, con las palabras sueltas adentro y el prendido como una
   pildora blanca que casi no se distingue de la pista.
   ✅ Ahora son CHIPS: cada interruptor es una pildora blanca con contorno
      fino; el prendido lleva contorno y letra en --marca (el azul del boton
      Agregar, el mismo lenguaje de la card nueva: contorno que se llena de
      color al elegir), halo suave y el tilde. El rango son dos campos con contorno y «Ordenar» es el mismo
      material, anclado al borde derecho. Es el dibujo de la hoja, sin la hoja.
   🔴 SIN FONDO LLENO: la pista gris se va y nada se rellena de color. El
      color es contorno, letra y halo, que es la regla de la casa.
   🔴 SOLO ARRIBA DE 40rem, que es exactamente donde la barra deja de ser la
      hoja: el telefono (con y sin JavaScript) no cambia un pixel.
   ⚠️ NO SE REDECLARA display, NI box-shadow DEL RIEL, NI EL COLOR DE LAS
      ETIQUETAS: los sabotajes 4, 6 y 7 de sabotear_pie_y_filtros cambian esas
      tres cosas en la regla de base, y una segunda declaracion aca abajo les
      ganaria por venir despues y los dejaria sin morder.
   Los nodos y las clases son los mismos: el ::after de 44 px de AC-14, el
   JS de la barra y los parametros GET no se tocan. */
@media (min-width:40.0625rem){
  .cst-fil-riel{gap:.5rem;padding:0;border-radius:0;background:none}
  .cst-fil-ray{margin:0 .25rem;background:var(--line)}
  .cst-fil-chip{padding:0 1rem;background:var(--sup);font-weight:700;
    box-shadow:inset 0 0 0 1px var(--line)}
  .cst-fil-chip[data-on="1"]{color:var(--marca);background:var(--sup);
    box-shadow:inset 0 0 0 1.5px var(--marca),0 1px 2px rgba(60,69,82,.07),
               0 6px 16px color-mix(in srgb,var(--marca) 22%,transparent)}
  .cst-fil-pre{padding:0 .5rem 0 .9rem;background:var(--sup);cursor:text;
    box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .2s var(--ease)}
  /* El signo pesos lo dibuja el campo, como en la hoja: asi «Desde $ 20000»
     se lee como un precio tambien con el numero puesto. El signo pesos de ayuda del
     campo vacio se apaga para que no salga dos veces. */
  .cst-fil-pre::before{content:"$";order:1;flex:none;font-weight:700;color:var(--ink2)}
  .cst-fil-pre input{order:2;width:6rem}
  .cst-fil-pre input::placeholder{color:transparent}
  .cst-fil-pre:focus-within{box-shadow:inset 0 0 0 1.5px var(--marca),
    0 6px 16px color-mix(in srgb,var(--marca) 18%,transparent)}
  .cst-fil-ord{padding:0 .6rem 0 1rem;background:var(--sup);
    box-shadow:inset 0 0 0 1px var(--line)}
}
@media (min-width:40.0625rem) and (hover:hover) and (pointer:fine){
  .cst-fil-chip:hover,.cst-fil-ord:hover,.cst-fil-pre:hover{background:var(--sup);color:var(--ink);
    box-shadow:inset 0 0 0 1px var(--segundo),
               0 4px 12px color-mix(in srgb,var(--acento) 35%,transparent)}
  .cst-fil-chip[data-on="1"]:hover{color:var(--marca);
    box-shadow:inset 0 0 0 1.5px var(--marca),
               0 8px 20px color-mix(in srgb,var(--marca) 28%,transparent)}
  .cst-fil-pre:focus-within:hover{box-shadow:inset 0 0 0 1.5px var(--marca),
    0 6px 16px color-mix(in srgb,var(--marca) 18%,transparent)}
}

/* ═══ ⭐ 11-10 · EN EL TELEFONO SE FILTRA COMO EN UN TELEFONO ═══════════════
   Diego, mirando la tienda en su iPhone: *«cuando estas en una seccion o mismo
   en todos los productos, los filtros de arriba se ven MUY GRANDES Y MUY FEOS.
   Ocupan media pantalla»*.

   📐 EL NUMERO, medido a 402x874 con el dedo acreditado y la grilla con fotos:
   la barra media 139 px en TRES renglones y el primer producto arrancaba en el
   pixel 395. O sea que casi la mitad de su telefono se iba en controles antes
   de que se viera un microfono.

   🔴 NO SE ACHICO LA LETRA: SE CAMBIO LA FORMA. Tres movimientos:
     1 · el disparador («Filtrar», con cuantos hay puestos) se va al renglon
         del TITULO, anclado al borde derecho — regla de Diego, un control no
         flota en el medio. Ahi no gasta un renglon propio: el renglon ya
         existia;
     2 · los controles de siempre —el riel con los interruptores y el rango, y
         «Ordenar»— se mudan a una HOJA que sube desde abajo. Al ser
         `position:fixed` esta FUERA DEL FLUJO, y por eso no empuja un pixel;
     3 · lo que esta puesto se ve SIN abrir nada, como chips que se sacan de a
         uno.

   🔴 NO SE PIERDE NI UN FILTRO NI LA FORMA VIEJA. El riel, los chips, el rango
   y «Ordenar» son LOS MISMOS NODOS: cambian de lugar, no de identidad. Y la
   clase que arma la hoja la pone el JAVASCRIPT, no el HTML — igual que
   «Aplicar» —, asi que sin JavaScript no hay hoja, el disparador no se dibuja
   y la barra de siempre queda entera y usable. Es la misma promesa que ya
   hacia este componente: filtra el servidor, el JS solo ahorra un clic.

   📐 LA HOJA CERRADA QUEDA LAYOUTEADA PERO FUERA DE ALCANCE. `visibility` la
   saca del arbol de accesibilidad y del tabulador, e `inert` la saca de
   cualquier otra forma de llegar. NO se usa `display:none`, y es a proposito:
   sus hijos tienen que seguir teniendo medidas porque hay baterias que las
   miden. Esconder algo y borrarlo del layout no son lo mismo.

   🟦 Y SIN UN SOLO FONDO LLENO DE COLOR: la hoja es superficie, el halo
   celeste es lo que la levanta del fondo, y el unico relleno solido de toda la
   fila es el numerito de cuantos filtros hay puestos —que es tinta, no
   neblina: es el dato que se tiene que leer de un vistazo—.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── EL DISPARADOR. Vive en el renglon del titulo (.cst-sec-h-d) ────────── */
/* \U0001f534 1,5rem DE DIBUJO Y 2,75rem DE AREA DE TOQUE, Y LOS DOS NUMEROS ESTAN
   MEDIDOS. El renglon del titulo lo marca la caja del `<h2>`, que mide 25 px:
   cualquier control mas alto que eso AGRANDA el renglon, y cada pixel de ese
   renglon es un pixel que el primer producto baja. Medido a 402x874: con el
   boton en 2rem el primer producto arrancaba en 256; en 1,5rem arranca en 247.
   \u26a0\ufe0f Y ACHICAR EL DIBUJO NO ACHICA EL DEDO: el area de toque la da el
   `::after` de 2,75rem, que son los 44 px de siempre. Es el mismo truco que ya
   usan el rango y «Ordenar» — se agranda lo que recibe el toque, no lo que se
   ve —, y es tambien la jerarquia correcta: el motivo de la pantalla son los
   productos, y filtrar es secundario. */
.cst-filab{position:relative;display:none;align-items:center;gap:.3rem;flex:none;
  min-height:1.5rem;padding:0 .55rem;border-radius:999px;border:0;
  background:var(--fondo2);color:var(--ink2);
  font-family:var(--f);font-size:.75rem;font-weight:700;cursor:pointer;
  transition:background .25s var(--ease),color .25s var(--ease)}
.cst-filab::after{content:'';position:absolute;left:0;right:0;top:50%;
  height:2.75rem;transform:translateY(-50%)}
.cst-filab[hidden]{display:none!important}
.cst-filab .cst-ico{width:1em;height:1em}
.cst-filab:focus-visible{outline:2px solid var(--acento-txt);outline-offset:2px}
@media (hover:hover) and (pointer:fine){
  .cst-filab:hover{background:var(--segundo);color:var(--ink)}
}
/* El numerito: el UNICO relleno solido de la fila. Un contador en gris no se
   lee de un vistazo, y de un vistazo es exactamente como se lee. */
.cst-filab-n{display:inline-flex;align-items:center;justify-content:center;
  min-width:1rem;height:1rem;padding:0 .22rem;border-radius:999px;
  background:var(--marca);color:var(--marca-txt);
  font-size:.6875rem;font-weight:800;font-variant-numeric:tabular-nums;
  line-height:1}
.cst-filab-n[hidden]{display:none}
/* 14-10 · Diego, mirando /tienda en el celular: el boton Filtrar tiene un
   fondo gris celeste que «no le cierra». Pasa al MISMO material que los
   chips de la PC (fil2, #236): pildora blanca con contorno fino. Cuando hay
   filtros puestos el boton lleva contorno y letra en --marca y un halo
   suave, igual que un chip prendido: el estado se lee sin relleno de color.
   El unico relleno solido sigue siendo el numerito.
   Va en una regla aparte, y no editando la de arriba, para no mover el
   texto que miran los sabotajes de la hoja. */
.cst-filab{background:var(--sup);color:var(--ink2);
  box-shadow:inset 0 0 0 1px var(--line);
  transition:color .25s var(--ease),box-shadow .25s var(--ease)}
.cst-filab:has(.cst-filab-n:not([hidden])){color:var(--marca);
  box-shadow:inset 0 0 0 1.5px var(--marca),
             0 4px 12px color-mix(in srgb,var(--marca) 20%,transparent)}
@media (hover:hover) and (pointer:fine){
  .cst-filab:hover{background:var(--sup);color:var(--ink);
    box-shadow:inset 0 0 0 1px var(--segundo),
               0 4px 12px color-mix(in srgb,var(--acento) 35%,transparent)}
}

/* ── LOS FILTROS PUESTOS, VISIBLES SIN ABRIR NADA ───────────────────────── */
/* 🔴 ESTE RENGLON SOLO EXISTE CUANDO HAY ALGO QUE MOSTRAR. Un contenedor vacio
   que igual reserva su alto es justo el defecto que se esta sacando. Lo dibuja
   PHP o no lo dibuja nadie. */
.cst-filpuestos{display:none;gap:.4rem;margin:0 0 .75rem;
  overflow-x:auto;overflow-y:hidden;scrollbar-width:none;
  -webkit-overflow-scrolling:touch}
.cst-filpuestos::-webkit-scrollbar{display:none}
.cst-filp-chip{position:relative;display:inline-flex;align-items:center;gap:.3rem;
  flex:none;min-height:2rem;padding:0 .5rem 0 .7rem;border-radius:999px;
  background:var(--sup);color:var(--acento-txt);text-decoration:none;
  font-size:.75rem;font-weight:700;white-space:nowrap;
  box-shadow:0 1px 2px rgba(60,69,82,.07),
             0 2px 10px color-mix(in srgb,var(--acento) 42%,transparent)}
.cst-filp-chip::after{content:'';position:absolute;left:0;right:0;top:50%;
  height:2.75rem;transform:translateY(-50%)}
.cst-filp-chip:focus-visible{outline:2px solid var(--acento-txt);outline-offset:2px}
.cst-filp-x{width:.85em;height:.85em;opacity:.75}

/* ── LA HOJA ────────────────────────────────────────────────────────────── */
/* El velo no es decoracion: sin el, tocar «afuera» no cierra nada y la unica
   salida es la cruz.
   12-10 · A2 · EL VELO Y LA HOJA VAN ARRIBA DEL ENCABEZADO (86 y 87, abajo del
   cajon del menu, que es 88 y 89). Con 59 y 60 el encabezado (70) quedaba
   encendido arriba del velo: con la hoja abierta se podia tocar el carrito o el
   menu, y la hoja dejaba de ser lo unico en pantalla. El mockup votado la
   dibuja como el cajon del menu: todo lo de atras, apagado. */
.cst-filvelo{position:fixed;inset:0;z-index:86;border:0;padding:0;
  background:color-mix(in srgb,var(--negro) 38%,transparent);
  opacity:0;transition:opacity .28s var(--ease)}
.cst-filvelo[hidden]{display:none}
.cst-filvelo[data-abierta="1"]{opacity:1}
/* La cabecera y los dos botones de la hoja NO existen en escritorio: ahi la
   barra se dibuja como siempre y una cabecera suelta seria un objeto de mas. */
.cst-fh-cab,.cst-fh-ok,.cst-fh-k,.cst-fh-seg{display:none}

@media (max-width:40rem){
  /* 🔴 LA CLASE LA PONE EL JS. Sin JavaScript nada de esto se enciende y la
     barra se dibuja como el primer dia. */
  .cst-filhoja{position:fixed;left:0;right:0;bottom:0;z-index:87;
    display:block;margin:0;
    max-height:min(82dvh,40rem);overflow-y:auto;overscroll-behavior:contain;
    padding:.375rem 1rem calc(1rem + env(safe-area-inset-bottom));
    border-radius:1.25rem 1.25rem 0 0;background:var(--sup);
    box-shadow:0 -1px 2px rgba(60,69,82,.06),
               0 -12px 44px color-mix(in srgb,var(--acento) 52%,transparent);
    transform:translateY(100%);visibility:hidden;
    transition:transform .28s var(--ease),visibility .28s var(--ease)}
  .cst-filhoja[data-abierta="1"]{transform:translateY(0);visibility:visible}
  /* ═══ 12-10 · A2 · LA HOJA DE LA OPCION 1, LA QUE DIEGO VOTO ══════════════
     Mockup fil2_hoja_filtros.html, voto 8/9/9/8: «va asi la opcion 1, la de
     chips y segmentos». Lo que se fue, mirado en la captura de antes: el riel
     de pildora que al partirse en dos renglones se dibujaba como un OVALO;
     Desde y Hasta sin campo, que se leian como rotulos sueltos; el valor de
     Ordenar flotando en el medio de su pildora; Limpiar como un enlace gris
     suelto abajo; y la recarga con cada toque, que cerraba la hoja despues de
     cada filtro.
     Lo que queda, en tres bloques con su rotulo: MOSTRAR (tres chips con
     borde, el prendido con el borde y la letra en el tono y el halo de la
     casa), PRECIO (dos campos de verdad, con borde y su signo) y ORDENAR (un
     control segmentado). Limpiar sube al lado de la cruz.
     LOS NODOS SON LOS MISMOS: el riel, los chips y los dos campos
     cambian de dibujo, no de identidad. El select de Ordenar sigue adentro
     del formulario y es el que viaja: los segmentos solo lo eligen.
     SIN FONDO LLENO: lo unico solido es el boton de abajo, que es
     la llamada a la accion. El color del elegido es borde, letra y halo. */
  .cst-filhoja .cst-fil-riel{display:flex;flex-wrap:wrap;align-items:stretch;gap:.5rem;
    width:100%;max-width:100%;padding:0;border-radius:0;background:none}
  .cst-filhoja .cst-fh-k{display:block;flex:1 0 100%;margin:.875rem 0 .5rem;
    font-size:.6875rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
    line-height:1.2;color:var(--acento-txt)}
  .cst-filhoja .cst-fil-riel .cst-fh-k{margin:.375rem 0 0}
  .cst-filhoja .cst-fil-riel .cst-fh-k:first-child{margin-top:.25rem}
  /* Los tres chips se reparten el renglon en partes iguales. Si en un
     telefono angosto la palabra no entra, se parte en dos renglones ADENTRO
     del chip, que sigue midiendo lo mismo: un chip que se cae solo a un
     renglon propio rompe la grilla de tres. */
  .cst-filhoja .cst-fil-chip{flex:1 1 0;min-width:0;justify-content:center;
    min-height:2.75rem;padding:0 .375rem;text-align:center;line-height:1.15;
    background:var(--sup);box-shadow:inset 0 0 0 1px var(--line);font-weight:700}
  .cst-filhoja .cst-fil-chip[data-on="1"]{color:var(--acento-txt);background:var(--sup);
    box-shadow:inset 0 0 0 1.5px var(--acento-txt),0 1px 2px rgba(60,69,82,.07),
               0 6px 16px color-mix(in srgb,var(--acento) 60%,transparent)}
  .cst-filhoja .cst-fil-chip[data-on="1"] .cst-ico{flex:none;width:.875rem;height:.875rem;
    margin-right:.375rem}
  /* El precio: dos campos con borde y el signo adelante. El signo es un
     pseudo-elemento y no un caracter del HTML, porque en escritorio la barra
     sigue igual al pixel y ahi no va. */
  .cst-filhoja .cst-fil-rango{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:.625rem;flex:1 0 100%}
  .cst-filhoja .cst-fil-pre{display:flex;align-items:center;gap:.375rem;min-height:3rem;
    padding:0 .875rem;border-radius:.875rem;background:var(--sup);
    box-shadow:inset 0 0 0 1px var(--line);cursor:text;
    font-size:.8125rem;font-weight:600;color:var(--ink2);
    transition:box-shadow .2s var(--ease)}
  .cst-filhoja .cst-fil-pre::before{content:"$";order:1;flex:none;
    font-size:1rem;font-weight:700;color:var(--ink2)}
  .cst-filhoja .cst-fil-pre input{order:2;flex:1 1 0;width:0;min-width:0;
    height:2.75rem;min-height:0;padding:0;font-weight:800}
  .cst-filhoja .cst-fil-pre input::placeholder{color:var(--muted);font-weight:600;opacity:1}
  .cst-filhoja .cst-fil-pre:focus-within{box-shadow:inset 0 0 0 1.5px var(--acento-txt),
    0 1px 2px rgba(60,69,82,.07),0 6px 16px color-mix(in srgb,var(--acento) 60%,transparent)}
  .cst-filhoja .cst-fil-pre input:focus-visible{outline:0}
  /* El select y el enlace de Limpiar de la barra de escritorio no se dibujan
     en la hoja: el select lo eligen los segmentos y Limpiar subio arriba. */
  .cst-filhoja .cst-fil-ord,.cst-filhoja .cst-fil-limpiar{display:none}
  /* Ordenar, segmentado: tres arriba y los dos de precio abajo, como en el
     mockup. Los textos son los de la lista blanca, uno por uno. */
  .cst-filhoja .cst-fh-seg{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
    gap:.25rem;padding:.25rem;border-radius:1rem;background:var(--fondo)}
  /* 13-10 · #236 · Diego: «no me cierra el FONDO». La pista gris celeste del
     segmentado se va: misma grilla votada (tres arriba, dos abajo), pero cada
     segmento pasa a ser un chip blanco con contorno, como los de Mostrar, y
     el elegido lleva contorno, letra y halo en el tono. Regla aparte para no
     mover el texto que miran los sabotajes de la hoja. */
  .cst-filhoja .cst-fh-seg{gap:.5rem;padding:0;border-radius:0;background:none}
  .cst-filhoja .cst-fh-sb{background:var(--sup);box-shadow:inset 0 0 0 1px var(--line)}
  .cst-filhoja .cst-fh-sb[aria-pressed="true"]{background:var(--sup);
    box-shadow:inset 0 0 0 1.5px var(--acento-txt),0 1px 2px rgba(60,69,82,.07),
               0 6px 16px color-mix(in srgb,var(--acento) 60%,transparent)}
  .cst-fh-sb{grid-column:span 2;min-height:2.75rem;padding:0 .25rem;border:0;
    border-radius:.75rem;background:none;color:var(--ink2);font-family:var(--f);
    font-size:.8125rem;font-weight:650;line-height:1.2;cursor:pointer;
    transition:background .2s var(--ease),box-shadow .2s var(--ease),color .2s var(--ease)}
  .cst-fh-sb:nth-child(n+4){grid-column:span 3}
  .cst-fh-sb[aria-pressed="true"]{background:var(--sup);color:var(--acento-txt);font-weight:800;
    box-shadow:0 1px 2px rgba(60,69,82,.07),
               0 6px 16px color-mix(in srgb,var(--acento) 60%,transparent)}
  .cst-fh-sb:focus-visible{outline:2px solid var(--acento-txt);outline-offset:2px}
  /* La cabecera y «Ver los productos» se encienden SOLO con la clase de hoja,
     que la pone el JS. Medido el 12-10 con el JavaScript apagado a 402: la
     cruz y «Ver los productos» se dibujaban en la barra y no hacian nada (son
     botones sin envio), al lado del Aplicar que si anda. */
  .cst-filhoja .cst-fh-cab{display:flex;align-items:center;gap:.25rem;min-height:3.25rem;margin:0}
  .cst-fh-t{flex:1;min-width:0;font-size:1.0625rem;font-weight:800;letter-spacing:-.02em;
    line-height:1.2;color:var(--ink)}
  /* Limpiar al lado de la cruz: un boton de texto en el tono, que solo
     aparece cuando hay algo que limpiar en lo que se esta eligiendo. */
  .cst-fh-lim{flex:none;min-height:2.75rem;padding:0 .75rem;border:0;border-radius:.75rem;
    background:none;color:var(--acento-txt);font-family:var(--f);font-size:.875rem;
    font-weight:700;line-height:1;cursor:pointer}
  .cst-fh-lim[hidden]{display:none!important}
  .cst-fh-lim:focus-visible{outline:2px solid var(--acento-txt);outline-offset:-2px}
  .cst-fh-x{position:relative;display:inline-flex;align-items:center;justify-content:center;
    flex:none;width:2rem;height:2rem;border:0;border-radius:999px;background:var(--fondo2);
    color:var(--ink2);cursor:pointer}
  .cst-fh-x::after{content:'';position:absolute;left:50%;top:50%;
    width:2.75rem;height:2.75rem;transform:translate(-50%,-50%)}
  .cst-fh-x .cst-ico{width:1.05em;height:1.05em}
  .cst-fh-x:focus-visible{outline:2px solid var(--acento-txt);outline-offset:2px}
  /* «Ver los productos» es AHORA el que aplica: en la hoja nada se aplica
     hasta aca. Es el unico relleno solido de la hoja, con su halo del mismo
     color, porque es la llamada a la accion. */
  .cst-filhoja .cst-fh-ok{display:flex;align-items:center;justify-content:center;width:100%;
    min-height:3.25rem;margin:1.375rem 0 0;border:0;border-radius:999px;
    background:var(--marca);color:var(--marca-txt);font-family:var(--f);
    font-size:.9375rem;font-weight:800;letter-spacing:-.01em;line-height:1;cursor:pointer;
    box-shadow:0 10px 26px color-mix(in srgb,var(--marca) 38%,transparent)}
  .cst-fh-ok:focus-visible{outline:2px solid var(--acento-txt);outline-offset:2px}
  /* El disparador y los chips SOLO en el telefono. */
  .cst-filab{display:inline-flex}
  /* \U0001f534 11-10 · EL AREA DE TOQUE TAMBIEN TIENE ANCHO, NO SOLO ALTO.
     El ::after de arriba copiaba el ancho del boton (left 0, right 0) y solo
     le agrandaba el alto. Mientras la palabra se ve, el boton mide 71 px y
     no pasa nada; pero abajo de 22rem la palabra se esconde, queda el embudo
     solo, y el dedo tenia 25 px de ancho para acertarle: medido a 320x568
     con el dedo acreditado, toque 25x45 (D44-40 de prueba_dedo_44, en la
     grilla y en el buscador).
     Se centra y se le pone un piso de 2,75rem: crece 9,5 px por lado, que
     entran en los 12 px de hueco que separan al boton de la cuenta y de
     «Ver todo el catalogo», asi que no le pisa el toque a nadie. El dibujo
     no cambia ni un pixel, y donde el boton ya es mas ancho (71 px con la
     palabra) el maximo deja todo exactamente como estaba. */
  .cst-filab::after{left:50%;right:auto;width:max(100%,2.75rem);
    transform:translate(-50%,-50%)}
  .cst-filpuestos{display:flex}
  /* \U0001f534 QUE EL TITULO PUEDA ENCOGER, O EL BOTON SE CAE A UN RENGLON PROPIO.
     Un hijo de flex no baja de su ancho de contenido salvo que se le diga, asi
     que un titulo largo -«Microfonos de condensador»- empujaba al bloque de la
     derecha abajo, y ahi el boton deja de ser gratis y vuelve a costar 44 px.
     Medido a 402: con «Todos los productos» ya se partia.
     \u26a0\ufe0f `:has()` lo ata al UNICO encabezado que tiene boton de filtrar: las
     gondolas del inicio comparten esta clase y no se tocan. */
  .cst-sec-h:has(.cst-filab) > div{min-width:0}
}
/* \U0001f534 EL CORTE VA EN 22rem (352 px) Y NO EN 30 (480), Y LA DIFERENCIA ES
   TODA LA GRACIA: a 480 la palabra se escondia en TODOS los telefonos -el de
   Diego mide 402- y el boton quedaba siendo un embudo pelado en la unica
   pantalla donde importa. Medido a 402 con el titulo «Todos los productos»:
   con la palabra puesta el renglon mide 382 px de los 402 que hay, asi que
   entra. Abajo de 352 ya no entra y ahi si se cae a solo el embudo, que sigue
   teniendo su nombre accesible por `aria-label`. */
@media (max-width:30rem){
  /* \U0001f534 LA PALABRA SE VA CUANDO APARECE EL NUMERITO, Y NO ANTES. Medido a 402
     con «Todos los productos»: sin filtros puestos el renglon cierra en 382 de
     402 y la palabra entra; con el globito puesto se pasa, el renglon se parte
     en dos y el primer producto se va de 248 a 321 px. Asi que se cede
     exactamente ahi, y se cede lo que sobra: una vez que filtraste, lo que
     importa es CUANTOS hay puestos -y abajo estan los chips diciendo CUALES-,
     no la palabra que ya leiste. El nombre accesible no se mueve: lo da
     `aria-label`. */
  .cst-filab:has(.cst-filab-n:not([hidden])) .cst-filab-t{display:none}
}
/* 12-10 · A2 · LA HOJA EN LOS TELEFONOS ANGOSTOS. Medido con la hoja abierta
   y los tres interruptores prendidos: «Envio gratis» con su tilde necesita
   112 px y se partia en dos renglones en todo chip mas angosto (104 a 360,
   109 a 375, el iPhone SE y el mini); a 320 tambien «En oferta», el precio
   100000 quedaba 4 px cortado en el campo Desde y «Mas vendidos» apretado
   (en negrita) se partia en el segmentado. Se ajusta el aire y la letra, no
   la forma: los chips siguen siendo tres iguales y los campos siguen siendo
   dos. El corte de los chips va en 24,5rem (392 px): a 390 el chip mide 114
   y entra con 2 px de aire, poco para fiarse de como redondea cada telefono.
   La letra de lo que se escribe NO baja de 16 px: el iPhone agranda la pagina
   al enfocar un campo con letra mas chica. */
@media (max-width:24.5rem){
  .cst-filhoja .cst-fil-chip{padding:0 .25rem;font-size:.75rem}
  .cst-filhoja .cst-fil-chip[data-on="1"] .cst-ico{width:.75rem;height:.75rem;margin-right:.25rem}
}
@media (max-width:22rem){
  .cst-filab-t{display:none}
  .cst-filab{padding:0 .4rem}
  .cst-filhoja .cst-fil-pre{padding:0 .625rem;gap:.1875rem;font-size:.75rem}
  .cst-fh-sb{padding:0 .125rem;font-size:.75rem;letter-spacing:-.01em}
}

/* ═══ GRILLA (VP-12) ═════════════════════════════════════════════════════════
   4 columnas de escritorio para arriba, 2 en celular. `minmax(0,1fr)` y no
   `1fr`: con `1fr` el ancho mínimo de una columna es su contenido, y un nombre
   largo sin cortar (VP-15) desborda la fila entera. Ese es EL bug que ya llegó
   a producción una vez. */
.cst-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.25rem;
  grid-auto-rows:1fr;
  list-style:none;margin:0;padding:0}
/* Las mismas filas enteras que las góndolas, y SÓLO en el inicio: una góndola
   del inicio es una vidriera elegida —mostrar 4 de 7 es normal— mientras que la
   grilla de una categoría es un LISTADO paginado, donde la última fila a medias
   se entiende sola («los últimos 3 de 37») y recortarla sería esconder
   productos. Por eso la clase la pone quien llama, no la hoja. */
.cst-grid-c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cst-grid-c3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:62.5rem){.cst-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.875rem}}
.cst-grid-li{min-width:0;display:flex}

/* ═══ CARD DE PRODUCTO (VP-15) ═══════════════════════════════════════════════
   La card FLOTA en reposo con halo celeste y sube 8 px al hover. Sin barra de
   acento al costado, sin ::before de color: el color es la sombra.

   VP-74 · Diego: «falta sombra de luz en las cards de todos los productos». El
   halo en reposo pasa de --sh-1 a --sh-2: con --sh-1 la card se apoyaba en el
   fondo casi sin despegarse y lo único que la separaba era su borde de 1 px —
   o sea un borde haciendo el trabajo de una sombra, que es al revés de la regla
   de la casa. Ahora hay DOS halos y dicen cosas distintas: el de la card la
   separa de la página, el de la bandeja separa la foto de la card.

   🔴 `overflow:visible` Y NO `hidden`. Con `hidden` la card le cortaba el halo
   a su propia bandeja de foto —que ahora va metida a .5rem del borde, con una
   sombra de 22 px— y se veía un corte duro en el aire, justo lo contrario de lo
   que se buscaba. Ya no hace falta clipear nada acá: la bandeja tiene su propio
   `overflow:hidden` y es la única que lo necesita (el zoom del hover). */
/* ⭐ 13-10 · SIN BORDE (voto est9): el halo hace de borde. El pixel queda,
   transparente, para que la card mida lo mismo con el ajuste «Borde: si» de
   Diseno > Estilo, que es el que lo vuelve a pintar (marca.php). */
.cst-card{position:relative;display:flex;flex-direction:column;width:100%;min-width:0;
  background:var(--sup);border:1px solid transparent;border-radius:var(--r-l);
  box-shadow:var(--sh-2);overflow:visible;text-align:left;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s var(--ease)}
.cst-card:focus-within{transform:translateY(-8px);box-shadow:var(--sh-3)}
@media (hover:hover) and (pointer:fine){
  .cst-card:hover{transform:translateY(-8px);box-shadow:var(--sh-3)}
}

/* ── LA BANDEJA DE FOTO ─────────────────────────────────────────────────────
   VP-70.2 · Diego lo pidió TRES veces: «más sombra de luz en la imagen del
   producto». Antes la foto iba a sangre contra los bordes de la card: blanco
   sobre blanco, sin un borde ni una sombra que la despegara — «pegada como una
   calcomanía», que es exactamente lo que marcó. Ahora la bandeja está METIDA
   adentro de la card, con su propio radio y su propio halo (--sh-foto).
   Es un halo, no un borde: «más halo, menos borde» es la firma de la casa.

   VP-70.1 · Y ES CUADRADA EN TODOS LOS ANCHOS. Diego: «en un inicio los
   productos muy rectangulares las cards». La bandeja 4/5 que había en celular
   le sumaba 42 px de alto a cada card para ganar aire vertical que —ahora que
   la foto ya no se recorta (ver el <img> más abajo)— casi ninguna foto usa.
   ⚠️ EL PRECIO DE ESTO: una foto de Mercado Libre (660×1065) entra por el ALTO
   y deja aire a los costados. Es a propósito y es la regla de Diego en VP-69:
   «en una tienda, recortar el producto es peor que dejar aire». */
.cst-media{position:relative;aspect-ratio:1/1;margin:.5rem .5rem 0;
  background:var(--tile);border-radius:calc(var(--r-l) - .5rem);overflow:hidden;
  box-shadow:var(--sh-foto)}
/* El aire de adentro. Sin `display:grid`: era justo el grid el que rompía el
   encuadre (la nota del <img>, abajo). */
.cst-ph{position:absolute;inset:0;padding:5%}
/* ── VP-63 · EN CELULAR LA FOTO MANDA ────────────────────────────────────────
   Diego (06-09), textual: «las fotos quedan muy chicas, texto muy grande, botón
   de carrito enorme». Medido en la grilla de 2 columnas a 390 px: la card medía
   413 px de alto y la foto sólo 170 — el texto (243 px, con el nombre en SEIS
   renglones) le ganaba a lo único que hace parar el pulgar.

   La solución de entonces fue estirar la bandeja a 4/5 «porque una cuadrada le
   recorta un 24 % a una foto vertical». Ese recorte era REAL, pero no venía de
   la forma de la bandeja: venía del bug que está explicado acá abajo. Arreglado
   el bug, la bandeja vuelve a ser cuadrada (VP-70.1) y no recorta nada.
   Lo que SÍ se queda de VP-63: el aire de adentro, que bajó de 9 % a 5 % en
   celular, y el nombre a dos renglones. */
@media (max-width:62.5rem){
  .cst-ph{padding:4%}
}
/* ═══ 🔴🔴 VP-69 · POR QUÉ ACÁ NO VA `max-height:100%` ══════════════════════
   Diego (07-09): «hay algunas fotos que no están encuadradas en su caja; el
   cable de guitarra se ve cortada a la mitad. Los cordones y los cables también
   se ven mal».

   La regla de antes decía `max-width:100%;max-height:100%;width:auto;height:auto`
   con la bandeja en `display:grid` + `place-items:center`. Se lee como algo que
   no puede recortar. Recortaba igual, y esto es lo medido a 390 px:

     bandeja 170×212,5 · caja de contenido 149,6×192,1
     p3.jpg  660×1057 → la foto salía 149,6×239,6  (se comía 27 px)
     p5.jpg  660×1065 → 149,6×241,4                (29 px)
     cable   660×1400 → 149,6×317,4                (¡105 px!)

   🔴 EL MOTIVO: `max-height` en PORCENTAJE necesita que el alto del bloque
   contenedor sea DEFINIDO. En un grid item ese bloque es el ÁREA de la reja, y
   acá la reja no declara filas: la única fila es implícita y mide `auto`, o sea
   INDEFINIDA. Un porcentaje contra algo indefinido se comporta como `none`, así
   que el tope no existía; la fila crecía hasta el alto natural de la foto y el
   `overflow:hidden` de la bandeja le cortaba lo que sobraba — arriba y abajo,
   por partes iguales. Cuanto más vertical la foto, peor: por eso justo el cable
   y los cordones, y por eso «cortada a la mitad».

   Que la bandeja tuviera `aspect-ratio` y la caja de la foto `inset:0` no
   alcanza: el contenedor tiene alto definido, la FILA no.

   🔴 LA FORMA QUE NO PUEDE FALLAR: caja de tamaño fijo (`width/height:100%` de
   la caja de contenido, que es el `inset:0` menos el padding) y que la foto se
   acomode ADENTRO con `object-fit:contain`. Ahí no hay ningún porcentaje que
   resolver contra un alto indefinido: la caja mide lo que mide y `contain`
   nunca recorta, sólo deja aire. Es el MISMO patrón que ya usaban la ficha, las
   miniaturas, el carrito y el cajón —los cuatro con `position:absolute` + medidas
   explícitas— y que por eso nunca tuvieron este bug. Esta era la única que
   quedaba con el patrón viejo.

   ⚠️ NO VOLVER A `max-height:100%` «porque es más simple». Es más simple y está
   mal: el navegador no avisa, y lo que se pierde es el producto. */
.cst-ph img{width:100%;height:100%;display:block;
  object-fit:contain;object-position:center;
  /* 🔴 `multiply` es EL truco premium del mockup (02_DISENO §5.6): hace
     desaparecer el fondo blanco de la foto dentro de la bandeja y deja el
     producto flotando, sin recuadro. Requiere que el fondo de la foto sea
     BLANCO PURO. Las fotos de ML lo son casi siempre, pero si alguna viene en
     #f7f7f7 vuelve el recuadro gris (bug #6). El arreglo es del lado del
     pipeline de fotos (TE-14), no de acá.
     Y ahora hace falta MÁS que antes: con `contain` la foto deja aire a los
     costados, y `multiply` es lo que hace que ese aire no se vea como un
     rectángulo pegado sobre la bandeja. */
  mix-blend-mode:multiply;
  transition:transform .8s var(--ease),filter .4s var(--ease),opacity .4s var(--ease)}
@media (hover:hover) and (pointer:fine){
  .cst-card:hover .cst-ph img{transform:scale(1.07)}
}
.cst-ph-no{display:grid;place-items:center;width:100%;height:100%;color:var(--segundo);font-size:3.5rem}
.cst-card-sin .cst-ph img{filter:grayscale(1);opacity:.45}

/* Chips sobre la bandeja. Fondos OPACOS: sobre una foto, un chip translúcido
   deja de tener contraste medible. */
.cst-tags{position:absolute;top:.7rem;left:.7rem;z-index:2;display:flex;flex-direction:column;
  gap:.35rem;align-items:flex-start;pointer-events:none;max-width:calc(100% - 1.4rem)}
/* 🔴 VP-19 · CON CORAZON, EL CHIP NO LLEGA HASTA EL BORDE. Medido a 390: el
   chip «Envio gratis» mide 102 px sobre 131 de ancho util y se metia 6 px por
   abajo del corazon. Los 2,85rem son el circulo (2,25) mas el aire (.6). La
   clase la pone la card SOLO cuando dibuja el corazon, asi que una grilla sin
   favoritos conserva el ancho entero. */
.cst-card-fav .cst-tags{max-width:calc(100% - 1.4rem - 2.85rem)}
.cst-tag{display:inline-flex;align-items:center;gap:.3rem;padding:.3rem .55rem;
  border-radius:.6rem;font-size:.6875rem;font-weight:800;letter-spacing:.01em;
  line-height:1.25;box-shadow:0 2px 8px rgba(17,20,26,.12)}
.cst-tag-free{background:var(--chip-sup);color:var(--chip-ok)}
.cst-tag-sin{background:var(--chip-sup);color:var(--chip-txt)}

/* ── VP-70.3 · «HAY MÁS DE UN COLOR» ────────────────────────────────────────
   Diego: «mostrar de alguna forma que hay más de un color». Hasta hoy el
   micrófono negro y el rosa eran dos cards IDÉNTICAS salvo la foto, y nadie
   entendía que era el mismo producto: se leían como dos productos parecidos.

   🔴 VA SOBRE LA BANDEJA, NO EN EL CUERPO DE LA CARD. Un renglón más abajo del
   precio le sumaba ~26 px de alto a las 92 cards — o sea peleaba con VP-70.1
   («acercala al cuadrado»), que Diego pidió en el mismo mensaje. Acá abajo a la
   izquierda no cuesta un solo píxel de alto, y queda al lado de la foto, que es
   de lo que está hablando.

   🔴 Y ES UN CARTEL, NO UN CONTROL: `pointer-events:none`. Los datos que manda
   el catálogo (`webCatColoresPara`) traen etiqueta y tono, pero NO la foto ni
   la URL del hermano — a propósito, para no multiplicar el peso de la grilla.
   Sin foto no hay nada que intercambiar y sin URL no hay adónde ir: un botón
   que no hace nada es peor que ningún botón. El toque cae en el link del
   nombre, que cubre la card entera y lleva a la ficha — que es justo donde
   están los colores de verdad. */
.cst-fam{position:absolute;left:.65rem;bottom:.65rem;z-index:2;pointer-events:none;
  display:inline-flex;align-items:center;gap:.32rem;max-width:calc(100% - 1.3rem);
  padding:.26rem .5rem;border-radius:99px;background:var(--chip-sup);
  box-shadow:0 2px 10px rgba(17,20,26,.16)}
/* 🔴 ES UN <svg>, NO UN <span>, Y NO ES CAPRICHO: el tono va en el `fill` del
   círculo porque la CSP de la tienda (`style-src` atado a un nonce) BORRA los
   atributos `style`, y con el `style` borrado los tres puntos salían
   transparentes. Está medido en `MS-3e`. El `fill` del CSS es el color de
   respaldo para el punto que viene sin tono: el atributo del HTML le gana. */
.cst-fam-p{flex:none;width:.62rem;height:.62rem;border-radius:50%;display:block;
  fill:var(--segundo);
  /* Mismos dos aros que los puntos grandes: el interior blanco recorta un
     «Negro» contra la bandeja, el exterior gris lo cierra contra un «Blanco». */
  border:1.5px solid var(--sw-aro);box-shadow:0 0 0 1px var(--segundo)}
.cst-fam-n{flex:none;font-size:.625rem;font-weight:800;line-height:1;
  letter-spacing:.02em;color:var(--chip-ink);font-variant-numeric:tabular-nums}
/* ══ 🔴🔴 11-10 · EL PISO DE LA BANDEJA TIENE LUGAR PARA UNO, Y ERAN TRES ═══
   Diego, mirando la grilla en su iPhone 17 Pro (402 px): «el rediseño de la
   card de productos está mal, está movido en cualquier lado los colores de la
   variante». En la captura los circulitos quedaron FLOTANDO A MEDIA ALTURA
   encima del micrófono.

   🔴 EL 10-10 SE MIDIÓ UNA COSA Y SE ROMPIÓ OTRA. Ese día las dos pastillas se
      pisaban 340 px² y se las movió hasta que ese número dio CERO. Dio cero y
      la pantalla quedó peor: los colores se subieron 56 px —el 35 % de la
      bandeja— y el puntaje se salió 1 px por el borde izquierdo. Una
      afirmación que mide la relación entre dos piezas no dice NADA de dónde
      quedó cada pieza. Por eso ahora se mide también cuánto tapa cada una de
      la foto y cuánto se asoma de la caja.

   🔴 Y LA CUENTA QUE NADIE HABÍA HECHO. A 402 px la bandeja mide 160 px. Sus
      inquilinos piden: colores 75, puntaje 104, círculo de «Agregar» 40, más
      los aires. Son 239 px de cosas en 160 px de piso. No entran, y ninguna
      combinación de corrimientos los hace entrar: el 10-10 se estuvo moviendo
      muebles en un cuarto que no alcanza.

   ✅ EL PISO QUEDA CON DOS: LOS COLORES, ANCLADOS AL RINCÓN DE ABAJO A LA
      IZQUIERDA —que es donde los colores se leen como colores, la convención
      de cualquier tienda— Y EL BOTÓN, en el suyo. El puntaje sube al riel de
      chips de arriba a la izquierda, que es una COLUMNA: ahí sumar una pastilla
      cuesta alto de riel, no ancho de piso. Sigue estando «sobre la foto», que
      es lo que Diego votó 9/9/8/9 en `rep2_estrellas_donde.html`, y el oro no
      se toca.
   ⚠️ `margin:0` NO ES COSMÉTICA: es un `<p>`, y traía el margen de párrafo del
      navegador. De los 56 px que lo tenían flotando, 16 eran ESE margen que
      nadie puso a propósito. Va sólo en el teléfono, porque en el escritorio
      esos 16 px son parte de la pantalla que Diego ya aprobó y la regla es que
      el escritorio no se mueve.
   ⚠️ `hover:none` Y ancho, las dos mitades: sin mouse es cuando «Agregar» está
      SIEMPRE visible (ahí nace el apriete) y hasta 480 px es donde la bandeja
      es tan angosta que no entran. Una ventana de escritorio angosta no tiene
      el botón permanente y no necesita nada de esto. */
@media (hover:none) and (max-width:30rem){
  .cst-fam{margin:0;bottom:.65rem}
}

/* ══════════════════════════════════════════════════════════════════════════
   🧩 SKY-SETS · LOS TRES PEDAZOS QUE CONVIERTEN UNA CARD EN UN SET
   ══════════════════════════════════════════════════════════════════════════
   Mockup cb3_sets_portada.html, votado por Diego el 07-10. Ninguna de estas
   reglas pinta nada en una card normal: la clase cst-card-set la pone la card
   solo cuando el producto trae su combo, asi que la vidriera sale igual.

   Nota para el que venga: en este archivo el CSS vive adentro de una plantilla
   de JavaScript, asi que ningun comentario de aca puede llevar una comilla
   invertida — ni para citar un nombre de clase. Ya dejo el panel en blanco dos
   veces. Los nombres se escriben pelados. */

/* 1 · EL CHIP «N PRODUCTOS», abajo a la izquierda de la bandeja.
   Mismo lugar y misma forma que el cartel de la familia (cst-fam): sobre la
   foto no cuesta un pixel de alto, y el alto es lo que el telefono no tiene.
   🔴 Los dos nunca coinciden: un combo no esta en una familia de colores. */
.cst-set-n{position:absolute;left:.65rem;bottom:.65rem;z-index:2;pointer-events:none;
  margin:0;max-width:calc(100% - 1.3rem)}
.cst-set-n > span[aria-hidden]{display:inline-flex;align-items:center;gap:.3rem;
  padding:.26rem .55rem;border-radius:99px;background:var(--chip-sup);
  box-shadow:0 2px 10px rgba(17,20,26,.16);
  font-size:.625rem;font-weight:800;letter-spacing:.02em;line-height:1;
  color:var(--chip-ink)}
.cst-set-n .cst-ico{width:.72rem;height:.72rem;flex:none;color:var(--chip-txt)}
.cst-set-n b{font-weight:800}

/* 2 · LA TIRA DE LAS PARTES, entre la bandeja y el cuerpo.
   Son las fotos que Diego tildo en el panel, una por producto que trae el kit.
   No se envuelven: si no entran, entra el +N. Envolver agregaria un renglon de
   alto que mueve el pliegue del telefono, que es justo lo que no se toca. */
.cst-set-t{display:flex;gap:.3rem;padding:.5rem .7rem 0;min-width:0;overflow:hidden}
.cst-set-f{flex:0 0 auto;width:2.1rem;height:2.1rem;border-radius:.5rem;
  background:var(--tile);padding:.18rem;
  box-shadow:0 1px 2px rgba(60,69,82,.05), 0 4px 12px color-mix(in srgb,var(--acento) 42%,transparent);
  display:grid;place-items:center}
.cst-set-f img{width:100%;height:100%;object-fit:contain;display:block;
  /* multiply por lo mismo que la foto grande: las fotos vienen con fondo
     blanco y sin esto el aire de los costados se ve como un rectangulo. */
  mix-blend-mode:multiply}
.cst-set-mas{font-size:.625rem;font-weight:800;color:var(--muted);
  font-variant-numeric:tabular-nums}

/* 3 · LA PASTILLA DEL AHORRO, con la razon adentro.
   🟦 SOMBRA DE COLOR, NUNCA FONDO LLENO. La pastilla va arriba del boton de
   comprar: un bloque verde macizo le ganaria en peso al unico control que
   importa. El verde va en la tinta del numero y en el halo, que es la regla de
   la casa y lo unico que Diego rescato de una pantalla que por lo demas
   volteo entera.
   🔴 Y el texto va sobre la superficie, no sobre el verde: blanco sobre un
   acento pastel no llega a AA y en esta casa ya se midio dos veces. */
.cst-set-ah{display:inline-flex;align-items:center;gap:.35rem;align-self:flex-start;
  margin:.1rem 0 0;padding:.3rem .6rem;border-radius:99px;
  /* 🔴 EL TOKEN ES --sup, NO --surface. El del panel se llama --surface y el de
     la tienda --sup: escribir el del panel acá no rompe nada a la vista -CSS se
     come una variable que no existe sin chistar- y deja la pastilla SIN CUERPO,
     transparente sobre la card. Lo cazo ST-3g midiendo el color que calculo el
     navegador, no el que dice la hoja; un grep del nombre de la clase habria
     dicho que estaba. */
  background:var(--sup);color:var(--ok);
  font-size:.75rem;font-weight:800;line-height:1.3;letter-spacing:-.01em;
  box-shadow:0 1px 2px color-mix(in srgb,var(--ok) 14%,transparent),
             0 8px 20px color-mix(in srgb,var(--ok) 20%,transparent)}
.cst-set-ah-i{width:.8rem;height:.8rem;flex:none}
.cst-set-ah b{font-weight:800}
/* La razon, en el tono del texto comun: lo que tiene que saltar es el numero.
   Si «porque es combo» fuera del mismo verde, serian dos cosas gritando. */
.cst-set-ah-p{font-weight:700;color:var(--ink2,var(--muted))}

/* 🔴 A 390 PX LA CARD TIENE 2 COLUMNAS Y TODO ESTO TIENE QUE ENTRAR IGUAL.
   Las miniaturas bajan a 1.75rem y la pastilla pierde algo de aire: con los
   valores de escritorio, cuatro miniaturas mas el +N desbordaban la card de
   131 px utiles. Se mide el BORDE DERECHO de cada elemento, no scrollWidth:
   html y body llevan overflow-x clip y el ancho del documento siempre
   devuelve el de la ventana. */
@media (max-width:30rem){
  .cst-set-t{gap:.26rem;padding:.4rem .6rem 0}
  .cst-set-f{width:1.75rem;height:1.75rem;border-radius:.42rem}
  .cst-set-ah{font-size:.6875rem;padding:.26rem .5rem;gap:.28rem}
}

/* ══════════════════════════════════════════════════════════════════════════
   🎁 LA PROMOCION (2x1 · NxM · por cantidad) — 10-10-2026
   ══════════════════════════════════════════════════════════════════════════
   MISMO CUERPO que la pastilla del combo, que Diego ya voto: sombra de color y
   el texto sobre la superficie, nunca sobre el acento. Lo que cambia es el
   TONO -la marca, no el verde- porque dice otra cosa: el ahorro de un combo ES
   el producto y no se termina nunca; una promocion VENCE. Dos ahorros
   distintos del mismo color se leen como el mismo.

   🔴 Y EL CARTEL VA EN TINTA SOLIDA, no en neblina. Es la unica parte que
   tiene que leerse de lejos en una grilla de dos columnas a 390 px, y es el
   mismo relleno que ya usa la pastilla de descuento de la ficha (.cst-f-off):
   el par marca / marca-txt, con el contraste medido y un piso de 4.5 que
   webRMarcaSirve() no deja bajar. Blanco sobre el acento pastel no se usa en
   ningun lado de esta casa. */
.cst-pro{display:inline-flex;align-items:center;gap:.4rem;align-self:flex-start;
  margin:.1rem 0 0;padding:.28rem .6rem .28rem .28rem;border-radius:99px;
  background:var(--sup);color:var(--ink);
  font-size:.75rem;font-weight:700;line-height:1.3;letter-spacing:-.01em;
  box-shadow:0 1px 2px color-mix(in srgb,var(--marca) 14%,transparent),
             0 8px 20px color-mix(in srgb,var(--marca) 22%,transparent)}
.cst-pro-c{flex:none;padding:.14rem .44rem;border-radius:99px;
  background:var(--marca);color:var(--marca-txt);
  font-size:.72rem;font-weight:800;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.cst-pro b{font-weight:800;font-variant-numeric:tabular-nums}
/* La frase, en el tono del texto comun: lo que tiene que saltar es el cartel y
   el numero. Si la explicacion fuera del mismo azul serian tres cosas gritando. */
.cst-pro-p{font-weight:700;color:var(--ink2,var(--muted))}
/* En la ficha hay lugar: el mismo objeto, un escalon mas grande. */
.cst-pro-f{font-size:.8125rem;margin:.85rem 0 0;padding:.34rem .7rem .34rem .34rem}
.cst-pro-f .cst-pro-c{font-size:.78rem;padding:.16rem .5rem}
@media (max-width:30rem){
  .cst-pro{font-size:.6875rem;padding:.24rem .5rem .24rem .24rem;gap:.3rem}
  .cst-pro-c{font-size:.6875rem;padding:.12rem .38rem}
  .cst-pro-f{font-size:.75rem;padding:.3rem .6rem .3rem .3rem}
}
/* C4 · plan 128 · «Ver condiciones» de la promo, en la ficha. Un plegable
   chico: el summary en el tono de la marca (es un enlace, no un boton lleno),
   44 px de toque con o sin mouse, y el texto en ink2. Sin fondo: la lista es
   letra chica debajo de la pastilla, no otra caja. Solo clases propias. */
.cst-pcond{margin:.15rem 0 0;font-size:.8125rem;color:var(--ink2,var(--muted))}
.cst-pcond-s{display:inline-flex;align-items:center;gap:.3rem;min-height:2.75rem;
  padding:0 .1rem;cursor:pointer;list-style:none;font-weight:700;color:var(--marca);
  -webkit-tap-highlight-color:transparent}
.cst-pcond-s::-webkit-details-marker{display:none}
.cst-pcond-s::marker{content:''}
.cst-pcond-s:focus-visible{outline:2px solid var(--acento-txt);outline-offset:2px;border-radius:.4rem}
.cst-pcond-cv{width:1em;height:1em;flex:none;transition:transform .25s var(--ease)}
.cst-pcond[open] .cst-pcond-cv{transform:rotate(180deg)}
.cst-pcond-l{margin:0 0 .4rem;padding:0 0 0 1.1rem;line-height:1.55}
.cst-pcond-i{margin:0 0 .25rem;overflow-wrap:break-word}
.cst-pcond-i:last-child{margin-bottom:0}
/* 🧾 EL RENGLON DEL CARRITO. Vive adentro de .cst-car-fila -la misma fila que
   el Subtotal- y lo unico propio es el tono del numero: el dato en el color de
   su area, que es la regla de la casa. */
/* 🔴 DOS CLASES Y NO UNA, Y NO ES PROLIJIDAD: .cst-car-fila-v se declara 1.700
   renglones MAS ABAJO con color ink. Con una sola clase las dos valen lo mismo
   y gana la de abajo, asi que este renglon saldria del color de siempre y el
   codigo diria que es de la marca. Es la colision de cascada que ya mordio en
   esta casa: se arregla en la especificidad, no moviendo el bloque de lugar
   -mover bloques es como se reordena una hoja hasta que nadie sabe quien gana-. */
.cst-car-fila-v.cst-car-pro-v{color:var(--marca);white-space:nowrap}
.cst-car-pro-k{display:inline-flex;align-items:center;gap:.4rem;min-width:0}
/* C7c · el nombre del producto en el renglon de su promo: una linea, cortado. */
.cst-car-dsg{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
/* C7b · la pastilla «2x1» en la esquina de la foto de la fila. Sin fondo
   lleno: la letra en el tono de la marca sobre el blanco de la foto y un halo
   de su color (regla de la casa). */
.cst-car-ph-pr{position:absolute;left:.3rem;bottom:.3rem;z-index:1;padding:.06rem .4rem;
  border-radius:99px;background:var(--tile);color:var(--marca);
  font-size:.6875rem;font-weight:800;line-height:1.3;letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;white-space:nowrap;pointer-events:none;
  box-shadow:0 0 0 1px color-mix(in srgb,var(--marca) 30%,transparent),
             0 4px 10px color-mix(in srgb,var(--marca) 20%,transparent)}
/* C3 · la regla de la promo debajo de su renglon: letra chica, sin caja. */
.cst-car-pro-n{margin:-.15rem 0 .35rem;font-size:.75rem;line-height:1.45;color:var(--ink2);
  overflow-wrap:anywhere}

/* VP-16 · «Agregar» aparece al hover sobre la foto. Con mouse eso está bien: en
   reposo la foto se ve entera y el botón es una recompensa al pasar por encima. */
/* ── ⭐🗳️ 13-10 · «AGREGAR», AL PIE Y DE CONTORNO (voto est9, VA 8/8/8/8) ──
   Diego: «que al apretar el boton o al hacerle hover se vuelva azul como P1,
   pero de base como P3; cuando el articulo tiene 2x1 es como P3 el diseno
   pero sin la palabra Agregar, con 2x1 en el medio centrado».
   · DE BASE, CONTORNO: «Agregar» en el color de la marca, fondo transparente
     y el anillo de 1,5 px adentro (inset: no le suma un pixel a la caja).
   · CON EL MOUSE (solo hover:hover y pointer:fine) Y AL APRETAR (:active) se
     LLENA en la marca con la letra clara. En el telefono no hay hover: el
     relleno aparece mientras el dedo esta apoyado.
   · 44 DE ALTO EN TODOS LOS ANCHOS y el ancho entero de la card: el toque es
     la caja que se ve, sin un ::after que la agrande.
   · SIEMPRE A LA VISTA, AL PIE: ya no aparece al pasar el mouse ni tapa la
     foto. `margin-top:auto` lo baja al piso de la card, asi que en la PC
     (donde las cards de una fila se estiran) los botones quedan alineados.
   🔴 EL AJUSTE «Boton Agregar: Relleno» DE DISENO > ESTILO lo vuelve macizo
      (marca.php, webEstCss). El de la casa ahora es Contorno.
   ⚠️ SIN COLOR ESCRITO A MANO: todo sale de --marca y --marca-txt, que siguen
      a la paleta de Diseno > Estilo. */
.cst-add-w{margin:auto 0 0;padding-top:.25rem;position:relative;z-index:2}
.cst-add{position:relative;display:flex;align-items:center;justify-content:center;gap:.45rem;
  width:100%;min-height:2.75rem;padding:0 .75rem;border:0;border-radius:99px;cursor:pointer;
  background:transparent;color:var(--marca);
  box-shadow:inset 0 0 0 1.5px var(--marca);
  font-family:var(--f);font-size:.8125rem;font-weight:800;letter-spacing:-.01em;line-height:1;
  -webkit-tap-highlight-color:transparent;
  transition:background-color .2s var(--ease),color .2s var(--ease),
             box-shadow .2s var(--ease),transform .15s var(--ease)}
@media (hover:hover) and (pointer:fine){
  .cst-add:hover{background:var(--marca);color:var(--marca-txt);
    box-shadow:inset 0 0 0 1.5px var(--marca),0 4px 12px color-mix(in srgb,var(--marca) 26%,transparent)}
}
.cst-add:active{background:var(--marca);color:var(--marca-txt);transform:scale(.97);
  box-shadow:inset 0 0 0 1.5px var(--marca),0 4px 12px color-mix(in srgb,var(--marca) 26%,transparent)}
/* El 2x1, solo y centrado. 🗳️ 13-10 (mas tarde) · Diego: «el boton del 2x1,
   que la tipografia sea azul, no blanco con azul: fondo blanco». Hasta este
   pedido era una pastilla maciza (fondo en la marca, letra clara) adentro del
   boton de contorno. Ahora el «2x1» es letra y nada mas: hereda el color del
   boton, asi que en reposo va en la marca sobre el fondo de la card, igual que
   «Agregar», y con el mouse o al apretar el boton se llena y la letra pasa a
   --marca-txt sola, sin una regla aparte que la de vuelta. */
.cst-add-c{display:inline-flex;align-items:center;padding:.2rem .6rem;border-radius:99px;
  background:transparent;color:inherit;font-size:.8125rem;font-weight:800;
  letter-spacing:-.01em;line-height:1.2}
@media (min-width:62.5625rem){
  .cst-add{font-size:.875rem}
  .cst-add-c{font-size:.875rem}
}

/* ── ❤️ VP-19 · EL CORAZON DE FAVORITOS, Y DONDE VA ──────────────────────────
   render.php decia hasta hoy, en la lista de lo que se saco del mockup: «es un
   segundo control peleandole el mismo lugar a Agregar sobre la foto». Esa duda
   es la que freno esta fila la primera vez, asi que se contesto MIDIENDO y no
   opinando. A 390 px, con la bandeja de 154x154 y el layout de celular:

     · Agregar es un circulo de 40 abajo a la DERECHA, y lo que de verdad
       recibe el toque son 45x45 — su ::after invisible de 44x44, que el
       rectangulo del elemento no ve. De esos 1.936 puntos, HOY son suyos los
       1.936.
     · Con el corazon ARRIBA A LA DERECHA: Agregar conserva 1.936 de 1.936.
       Ni un punto. Quedan 56 px de borde a borde y sus dos cuadrados de 44 no
       comparten un solo pixel.
     · Con el corazon AL LADO de Agregar (que es el miedo que estaba escrito):
       el area de Agregar baja de 45x45 a 44x45 y el hueco queda en 6 px. O
       sea: el problema nunca fue «sobre la foto», fue «al lado de Agregar».
     · Con el corazon en el CUERPO de la card, abajo: no le saca nada a
       Agregar, pero se superpone 36x36 con el bloque del PRECIO en las cuatro
       cards medidas, a 390 y a 1440. Hoy no tapa letras de casualidad, porque
       los digitos no llegan hasta ahi; con un precio de siete cifras si.

   Por eso va ARRIBA A LA DERECHA, que es el unico rincon vacio de la bandeja:
   los chips van arriba a la izquierda, el cartel de colores abajo a la
   izquierda y Agregar abajo a la derecha.

   🔴 Y LOS CHIPS LE RESERVAN EL HUECO (es la linea de `.cst-tags` de arriba).
   Sin eso, el chip de «Envio gratis» mide 102 px sobre 131 de ancho util y se
   le mete 6 px por abajo del corazon. No le roba el toque —los chips son
   pointer-events:none— pero se le dibuja encima, que para quien mira es lo
   mismo que estar roto.

   ⚠️ 44x44 DE AREA TACTIL, igual que Agregar y por la misma regla de la casa
   (AC-14): el circulo que se VE mide 36 y el ::after invisible lo lleva a 44.
   El piso de esta tienda son 44 y un control nuevo no puede nacer abajo. */
.cst-fav-w{position:absolute;top:.7rem;right:.7rem;z-index:4;margin:0;line-height:0}
.cst-fav{position:relative;
  display:grid;place-items:center;width:2.25rem;height:2.25rem;padding:0;border:0;
  border-radius:50%;cursor:pointer;background:var(--chip-sup);color:var(--chip-txt);
  font:inherit;
  /* La firma de la casa: halo de color, no borde. Diego: «las sombras celestes
     en los bordes, eso me gusto, es lo mejor del diseño». */
  box-shadow:0 2px 10px color-mix(in srgb,var(--acento) 70%,transparent),
             0 1px 2px rgba(60,69,82,.10);
  transition:transform .22s var(--ease),color .22s var(--ease),box-shadow .22s var(--ease)}
.cst-fav::after{content:'';position:absolute;top:50%;left:50%;width:44px;height:44px;
  transform:translate(-50%,-50%)}
.cst-fav svg{width:1.125rem;height:1.125rem;display:block}
.cst-fav:active{transform:scale(.9)}
/* Guardado: el corazon se llena y toma el tono propio, y la pastilla levanta su
   halo en el mismo color. El dato en el tono, como en todo el panel. */
.cst-fav[aria-pressed="true"]{color:var(--fav);
  box-shadow:0 2px 12px color-mix(in srgb,var(--fav) 34%,transparent),
             0 1px 2px rgba(60,69,82,.10)}
@media (hover:hover) and (pointer:fine){
  .cst-fav:hover{color:var(--fav);transform:translateY(-1px)}
}
/* Mientras viaja el pedido no se puede volver a tocar: un doble toque no puede
   dejar el corazon diciendo una cosa y la base otra. */
.cst-fav[aria-busy="true"]{opacity:.55;pointer-events:none}
@media (prefers-reduced-motion:reduce){
  .cst-fav{transition:none}
}

/* El cuerpo */
.cst-b{display:flex;flex-direction:column;gap:.5rem;flex:1;
  padding:1rem 1.05rem 1.15rem}
@media (max-width:62.5rem){.cst-b{padding:.85rem .85rem 1rem}}
/* ── VP-63 · EL NOMBRE, A DOS RENGLONES ─────────────────────────────────────
   🔴 ESTO REEMPLAZA A LA REGLA VP-15 («el nombre NUNCA se corta»), y la que la
   dio de baja es la misma persona que la había puesto. Diego, 06-09, mirando la
   grilla en su celular: «texto muy grande»; y sobre el corte: «El nombre a 2
   renglones. El nombre completo vive en la ficha, donde alguien ya decidió
   mirar». Medido: «X2 Micrófono Corbatero Inalámbrico - Receptor Usb-c Y
   Adaptador Lightning - Color Negro» ocupaba SEIS renglones (113 px) a 390 y
   cuatro en escritorio — más alto que la foto en los dos casos.

   Va en TODOS los anchos, no sólo en celular: el motivo («el nombre entero está
   a un toque de distancia») no depende del tamaño de la pantalla, y en la reja
   de 4 columnas el mismo nombre ocupaba 4 renglones. De yapa: con el `min-height`
   de dos renglones, los precios de una misma fila quedan todos a la misma altura
   — hoy bailaban según el largo del nombre.

   `-webkit-line-clamp` sigue siendo la forma que entienden todos los
   navegadores; `line-height:2` es la moderna. Van las dos, y `text-overflow`
   detrás por si alguna cae a una sola línea. */
/* ⭐ 13-10 · voto est9: «el nombre en dos renglones, chico y peso normal». El
   protagonista de la card es el precio; el nombre se lee entero en la ficha. */
.cst-n{margin:0;font-size:.75rem;font-weight:500;line-height:1.45;letter-spacing:0;
  color:var(--ink);overflow-wrap:break-word;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;
  overflow:hidden;text-overflow:ellipsis;min-height:2.9em}
@media (min-width:62.5625rem){.cst-n{font-size:.8125rem}}
.cst-n-a{color:inherit;text-decoration:none;transition:color .25s var(--ease)}
@media (hover:hover) and (pointer:fine){
  .cst-n-a:hover{color:var(--acento-txt)}
}
/* El link del nombre cubre toda la card para que el toque en celular sea
   grande, pero se queda DEBAJO de los puntos de color y del botón (z-index). */
.cst-n-a::after{content:'';position:absolute;inset:0;z-index:1}
/* ⭐ 13-10 · EL PRECIO (voto est9, «el descuento como en el tachado en el P4»).
   `.cst-pz-a` es el renglon de arriba: el precio de antes, chico y tachado, y
   el «-20 %» en la marca. Ocupa su renglon entero aunque este vacio, para que
   los precios de una fila queden a la misma altura. El precio de verdad, solo
   y grande, abajo. */
.cst-pz{margin:0;display:flex;align-items:baseline;gap:0 .45rem;flex-wrap:wrap}
.cst-pz-a{flex:0 0 100%;display:flex;align-items:baseline;gap:.4rem;min-width:0;
  min-height:1.1rem;line-height:1.1rem}
.cst-pz-off{font-size:.75rem;font-weight:800;color:var(--marca)}
.cst-now{font-size:1.1875rem;font-weight:800;letter-spacing:-.03em;line-height:1.15;color:var(--ink)}
.cst-was{font-size:.75rem;color:var(--muted);text-decoration:line-through}
@media (min-width:62.5625rem){.cst-now{font-size:1.3125rem}}
/* ══ ⭐ 10-10 · DOS COSAS DE LA CARD EN EL TELÉFONO, LAS DOS MEDIDAS ═════════

   4 · «LA CARD QUEDÓ MUY LARGA. FIJATE EL ESPACIO MUERTO» (Diego).
   Medido a 402 px: **48 px de nada** entre el último dato y el borde de abajo,
   en tres de cada cuatro cards. A 1.440 son 29 y a 2.560 también: el teléfono
   es el peor, y encima ahí la card entera mide 325, así que el hueco es el
   15 % de la card.
   🔴 LA CAUSA NO ES QUE SOBRE AIRE: es que `.cst-grid` declara
      `grid-auto-rows:1fr` y `.cst-grid-li` se estira, así que TODAS las cards
      de la fila se alargan hasta el alto de la más alta — y la más alta es la
      que tiene cuotas. La que no las tiene se estira igual, y el estiramiento
      cae ENTERO debajo del precio: justo donde Diego apuntó.

   ✅ EN EL TELÉFONO LA CARD DEJA DE ESTIRARSE: `align-items:flex-start` en el
      `<li>`. Así cada card mide lo que tiene adentro y el hueco no se muda, se
      VA. Medido a 402: la card sin cuotas pasa de **325 a 278 px** —47 menos,
      un 14 %— y el espacio muerto de **48 px a 1**. Contesta las dos mitades de
      lo que dijo Diego: la card es más corta Y no tiene el hueco.
   🔴 SE PROBARON LAS DOS Y SE MIRÓ LA CAPTURA, QUE ES LO QUE DECIDIÓ. El primer
      intento fue anclar el precio abajo (`margin-top:auto`): mataba el hueco
      igual, pero la card seguía midiendo 325 —o sea, no contestaba «quedó muy
      larga»— y encima dejaba el precio de las dos cards de la fila a distinta
      altura, con un pozo entre el nombre y el precio. En la captura se veía
      peor que el defecto. Sin estiramiento, en cambio, los precios de la fila
      quedan ALINEADOS solos, porque todo fluye desde arriba.
   ⚠️ El borde de abajo desparejo no es un descuido: es el patrón de cualquier
      vidriera donde cada card dice lo suyo, y con el halo de la casa se lee
      como que la card terminó, no como que se rompió.

   5 · «LA OFERTA SE VE EN GRIS, NO LLAMA LA ATENCIÓN EL PRECIO TACHADO».
   Medido: `--muted` (#6b747f) sobre blanco da **4,74:1** — pasa AA raspando y
   es, con todas las letras, neblina. La regla de la casa está escrita en
   CLAUDE.md desde el 06-10: **el color tiene que ser tinta, no neblina**.
   ✅ Los dígitos pasan a `--ink2` (#3c4552, **9,73:1**) y la raya se pinta con
      el azul de marca, el mismo relleno sólido que ya usa el chip «-20 %» en
      la foto: así la oferta se lee como una sola cosa en los dos lugares.
   🔴 Y NO LE GRITA MÁS FUERTE AL PRECIO DE VERDAD, que es el riesgo: el
      tachado sigue en 13 px peso 500 y el precio real está en 21 px peso 800 y
      en `--ink`. Lo que cambia es que el tachado se LEE; el que manda sigue
      siendo el otro. */
@media (max-width:30rem){
  .cst-grid-li{align-items:flex-start}
  .cst-was{color:var(--ink2);text-decoration-color:var(--chip-off-sup);
    text-decoration-thickness:2px}
}
/* ── ⭐ «LO QUE DICEN LOS QUE COMPRARON», EN LA CARD ────────────────
   ⚠️ SE LLAMA `cst-dice` Y NO ES CAPRICHO: `medir_card_dice.mjs` la busca por
      ese nombre desde el 08-10, cuando la frase todavía no existía y se dejó
      el instrumento esperando. Ponerle otro nombre habría dejado al medidor
      contestando «no hay frase» CON LA FRASE DIBUJADA — un cero del
      instrumento, que es el defecto que esta casa paga más caro.
   Diego lo pidió votando `ns7_nosotros_bloques` el 07-10 —«lo que dicen los que
   compraron eso se podría poner de los productos en la card de productos, se
   vería bien»— y lo repitió hoy.

   🔴 ES TEXTO PELADO, NO UNA CAJA. En la ficha esta misma cita vive adentro
      de `.cst-fq`, que tiene superficie y halo celeste — y ahí está bien,
      porque es un bloque suelto en una columna ancha. Acá adentro la card YA
      es la caja: meterle otra superficie con su sombra es la pantalla «muy
      sucia, muy contaminada de cosas», y encima le sacaría peso al precio, que
      es el motivo de la card. Lo que la hace leer como cita son las comillas
      angulares, que van en el TEXTO — un `::before` con una comilla no lo lee
      un lector de pantalla y acá es lo único que dice que esto es una cita.
   ⚠️ DOS RENGLONES Y CORTA. Uno solo, a 390 px, son veinte caracteres: no
      alcanza para una frase y queda un cabo colgando. Dos es lo mínimo que
      dice algo, y es el mismo recorte que la ficha.
   ⚠️ SIN FIRMA, al revés que en la ficha: a 171 px de ancho el nombre se come
      medio renglón de lo único que vale, que es la frase. Quién la dijo está a
      un toque, en la ficha. */
.cst-dice{margin:.1rem 0 0;font-size:.75rem;line-height:1.45;color:var(--ink2);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* VP-17 · puntos de color. El botón mide 44×44 (AC-14) aunque el punto sea de
   18 px: el margen negativo recorta el AIRE, no el área de toque. */
.cst-sws{display:flex;align-items:center;gap:0;flex-wrap:wrap;
  position:relative;z-index:2}
.cst-sw{width:2.75rem;height:2.75rem;display:grid;place-items:center;
  border:0;background:none;padding:0;cursor:pointer;margin-inline:-.7rem}
.cst-sw-p{width:1.15rem;height:1.15rem;border-radius:50%;display:block;
  /* 🔴 Dos aros, y ninguno de los dos sigue al tema. Con el aro interior en
     --sup y el exterior en --line, en OSCURO un punto «Negro» (#11141a) sobre
     una card #171b22 desaparecía: se veía un agujero, no un color.
     Interior --sw-aro (blanco fijo) = el punto siempre se recorta contra algo
     claro; exterior --segundo (gris medio en los dos temas) = lo cierra tanto
     sobre blanco como sobre negro. */
  border:2px solid var(--sw-aro);box-shadow:0 0 0 1.5px var(--segundo);
  transition:box-shadow .25s var(--ease),transform .25s var(--ease)}
@media (hover:hover) and (pointer:fine){
  .cst-sw:hover .cst-sw-p{transform:scale(1.15)}
}
.cst-sw[aria-pressed="true"] .cst-sw-p{box-shadow:0 0 0 2px var(--acento-txt)}
.cst-sws-n{font-size:.6875rem;font-weight:700;color:var(--muted);margin-left:1.25rem;white-space:nowrap}

/* VP-18 · estados de stock. En la card queda SÓLO el aviso de que quedan
   pocas: «Con stock» se fue con VP-74 y `.cst-st-ok` se borró con él —era la
   única regla que lo pintaba—. En la FICHA sigue existiendo («Con stock», con
   su propia clase `.cst-f-st-ok`): ahí es una sola línea en una sola pantalla,
   de alguien que ya eligió el producto y está por gastar plata; el ruido de
   repetirlo 90 veces es un problema de la grilla, no de la ficha. */
.cst-st{margin:auto 0 0;padding-top:.3rem;display:flex;align-items:center;gap:.45rem;
  font-size:.72rem;font-weight:700}
.cst-st-low{color:var(--warn)}
.cst-bar{height:4px;border-radius:99px;background:var(--fondo2);overflow:hidden;
  flex:1;max-width:4rem;min-width:2rem}
.cst-bar-i{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--warn),color-mix(in srgb,var(--warn) 45%,#e6b877))}

/* ═══ 🟢 VP-66 · EL GLOBO DE WHATSAPP QUE FLOTA ══════════════════════════════
   Diego, 16-09: «el globo de WhatsApp que flota debe estar y funcionar, con un
   numero que ponemos en datos de la tienda en canales web».

   ⭐ EL NUMERO NO ESTA EN EL CODIGO. Sale de `web_ajuste.whatsapp_numero`, que
   se edita en Canales → Web → «Datos del negocio». Sin numero cargado, este
   elemento NO SE DIBUJA: un globo que abre un chat con un numero que no existe
   es peor que no tener globo — el que lo toca cree que escribio y no escribio.

   🟢 EL VERDE ES `--ok`, EL DE LA CASA, NO EL #25D366 DE WHATSAPP. Medido:
   blanco sobre #25D366 da 1,98:1 y el disco contra la pagina blanca tambien
   1,98:1 — no llega ni al 3:1 que pide 1.4.11 para un componente, o sea que el
   boton oficial de WhatsApp es ilegible para media pantalla al sol. Con `--ok`
   (#0b7d5a) el glifo blanco da 5,13:1 y el disco contra el blanco 5,13:1, y de
   paso no se suma un color de marca nuevo (regla de la paleta). El GLIFO es el
   que hace el reconocimiento, no el fondo.

   📱 8 DE CADA 10 PAGINAS SE ABREN DESDE UN CELULAR, asi que se resuelve ahi
   primero:
     · `env(safe-area-inset-*)` en las dos direcciones — con la barra de gestos
       del iPhone, un `bottom:.85rem` pelado lo deja debajo de la barra;
     · `z-index:39`, UNO MENOS que la barra fija de pagar (`.cst-ck-pagar`, 40)
       y muy por debajo del cajon del carrito (100): si algun dia el globo llega
       a una pantalla con barra, gana la barra, porque la barra es el boton de
       pagar;
     · y se APARTA SOLO cuando el boton de comprar esta en pantalla (ver el
       script del pie). Sin JavaScript se queda quieto y visible, que es el
       comportamiento de siempre y no rompe nada.
   ═══════════════════════════════════════════════════════════════════════════ */
.cst-wa-fab{position:fixed;z-index:39;
  right:calc(.85rem + env(safe-area-inset-right));
  bottom:calc(.85rem + env(safe-area-inset-bottom));
  width:3.1rem;height:3.1rem;border-radius:50%;
  display:grid;place-items:center;
  background:var(--wa);color:#fff;text-decoration:none;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--wa-osc) 30%,transparent),
             0 2px 6px rgba(60,69,82,.16),
             0 12px 30px -8px color-mix(in srgb,var(--wa) 70%,transparent);
  transition:transform .28s var(--ease),box-shadow .28s var(--ease),
             opacity .22s linear,visibility .22s linear}
.cst-wa-fab svg{width:1.55rem;height:1.55rem;display:block;fill:currentColor}
/* D5 del 130 · el filo de --wa-osc que le da borde al glifo blanco sobre el
   #25D366. Regla aparte: la de arriba es la que miden prueba_wasap_barrido
   (WA-VERDE3) y su saboteador, letra por letra. */
.cst-wa-fab>svg{filter:drop-shadow(0 0 .6px var(--wa-osc))
  drop-shadow(0 1px 1px color-mix(in srgb,var(--wa-osc) 55%,transparent))}
@media (hover:hover) and (pointer:fine){
  .cst-wa-fab:hover{transform:translateY(-3px);
    box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--wa-osc) 30%,transparent),
               0 4px 10px rgba(60,69,82,.18),
               0 20px 44px -10px color-mix(in srgb,var(--wa) 80%,transparent)}
}
.cst-wa-fab:focus-visible{outline:3px solid var(--acento-txt);outline-offset:3px}
/* 🔴 «QUE NO TAPE EL BOTON DE COMPRAR». Con el CTA en pantalla el globo se va;
   `visibility` ademas de `opacity` para que no siga siendo tocable invisible. */
.cst-wa-fab[data-tapa="1"]{opacity:0;visibility:hidden;pointer-events:none;
  transform:translateY(10px) scale(.9)}
@media (min-width:900px){
  .cst-wa-fab{width:3.4rem;height:3.4rem;
    right:calc(1.4rem + env(safe-area-inset-right));
    bottom:calc(1.4rem + env(safe-area-inset-bottom))}
  .cst-wa-fab svg{width:1.7rem;height:1.7rem}
}
/* 🔴🔴 EL GLOBO LE ROBABA EL TOQUE A «AGREGAR» — medido con elementFromPoint
   en el centro de cada control, que es el hit-test de verdad y no una
   comparación de rectángulos. El globo se quedaba con el toque de 13 controles
   en 11 de las 15 combinaciones de pantalla por ancho: Agregar en portada,
   grilla, carrito y ficha, Compartir, Sumar uno y Calcular el envío.
   El motivo es geométrico: SIN MOUSE, el «Agregar» de la card es un círculo
   abajo a la derecha de la foto — el mismo rincón donde vive el globo.
   Con el globo a la izquierda: de 13 robados a 1.
   ⚠️ EL QUE QUEDA ES «Quitar uno», abajo a la izquierda. O sea que un globo
      fijo en CUALQUIER rincón le roba el toque a alguien: esto es un paliativo
      bueno para los doce, no el arreglo de fondo. Que el globo se corra solo
      cuando hay algo debajo es comportamiento, y eso lo vota Diego.
   🔴 VA POR ID Y NO POR CLASE A PROPÓSITO. `right` está declarado DOS veces
      —acá arriba y otra vez dentro de la media query de 900 px—, así que una
      regla de clase puesta acá abajo empataría en especificidad y la de 900
      seguiría mandando en el iPad. El id gana a las dos.
   ⚠️ Y `right:auto` ANTES de `left`: sin eso quedan los dos puestos y el
      elemento se estira de borde a borde. */
@media (hover:none){
  #cst-wa-fab{right:auto;left:calc(.85rem + env(safe-area-inset-left))}
}
/* 🔴 13-10 · Y «QUITAR UNO», EL QUE QUEDABA, SE QUEDA CON SU TOQUE SIN JAVASCRIPT.
   La pastilla de cantidad de la ficha vive abajo a la izquierda, en el rincon
   del globo: medido con elementFromPoint a 390 px (PU-4b de
   prueba_movil_pulgar), al pasar por ahi el toque a «Quitar uno» abria
   WhatsApp. El script del pie aparta el globo cuando el boton de comprar esta
   a la vista, pero un toque no puede depender de que un observador ya haya
   corrido. La pastilla sube a 40, el mismo escalon que la barra fija de pagar:
   arriba del globo (39) y abajo de la cabecera pegajosa (70), del cajon del
   carrito y de las hojas (86-89), asi que no se le monta a nada fijo. Mientras
   se cruzan, la pastilla se dibuja encima del circulo verde y el toque es
   suyo: es lo que ya pasa con la barra de pagar en el checkout. */
@media (hover:none){
  .cst-qty{position:relative;z-index:40}
}
@media (prefers-reduced-motion:reduce){ .cst-wa-fab{transition:none} }
@media print{ .cst-wa-fab{display:none} }

/* ═══ FICHA DE PRODUCTO ══════════════════════════════════════════════════════
   VP-21 migas · VP-24 galería · VP-26 precio · VP-27 cuotas · VP-28 cantidad ·
   VP-30 stock · VP-31 acordeones · VP-32 relacionados · VP-55 hermanos.

   LA IDEA DE LA PANTALLA, en una línea: la foto manda a la izquierda y la
   compra manda a la derecha, y las dos FLOTAN con halo celeste y SIN borde
   — «más halo, menos borde». Todo lo demás (migas, cuotas, acordeones) es
   texto plano alrededor: no compite, no tiene caja, no suma un elemento más.
   Son DOS objetos con peso en toda la pantalla, no doce cajitas.

   Sigue siendo hermana de la grilla: la misma bandeja blanca con
   `mix-blend-mode:multiply`, los mismos `--sh-*` celestes, el mismo
   `--acento-txt` para las cuotas, las mismas pastillas de 44 px. */

/* ── Migas (VP-21) ──────────────────────────────────────────────────────────
   Si no entran, el que se corre es el <nav>, NUNCA la página (AC-15). */
.cst-mig{display:flex;align-items:center;gap:0;padding:1rem 0 0;min-width:0;
  overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  font-size:.78rem;font-weight:600;color:var(--muted)}
.cst-mig::-webkit-scrollbar{display:none}
/* `gap:0` + `padding:.5rem` deja el MISMO aire que antes, pero el area de
   toque de «Inicio» pasa de 38 a 49 px de ancho (AC-14). Es el truco que ya
   usan los puntos de color de la card: se recorta el AIRE, no el área de toque. */
.cst-mig-a{display:inline-flex;align-items:center;flex:none;min-height:2.75rem;padding:0 .5rem;
  color:var(--muted);text-decoration:none;white-space:nowrap;border-radius:.4rem;
  transition:color .25s var(--ease)}
@media (hover:hover) and (pointer:fine){
  .cst-mig-a:hover{color:var(--acento-txt)}
}
.cst-mig-s{flex:none;color:var(--segundo);font-size:.8em}
/* El último eslabón es el producto y su nombre puede ser larguísimo. Es el
   ÚNICO que encoge (`flex:0 1 auto` + `min-width:0`): así la fila nunca
   desborda y el que se corta con puntos es el nombre, que el <h1> de abajo dice
   entero igual. Con `max-width` fijo se cortaba a los 26 caracteres incluso en
   un monitor de 27", donde entraba de sobra.
   (La regla de «nunca cortar el nombre» es de la CARD, donde no hay otro lado
   donde leerlo.) */
.cst-mig-h{display:inline-block;flex:0 1 auto;min-width:0;padding:0 .5rem;line-height:2.75rem;
  color:var(--ink2);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ── La reja ────────────────────────────────────────────────────────────────
   🔴 `minmax(0,…fr)` y no `…fr`: con `1fr` el mínimo de la columna es su
   contenido y un nombre largo sin cortar desborda la fila. Es EL bug que ya
   llegó a producción una vez en la grilla. */
.cst-f{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(1.75rem,4vw,3.5rem);align-items:start;
  padding:clamp(.75rem,2vw,1.5rem) 0 clamp(2rem,5vw,3.5rem)}
@media (max-width:62.5rem){.cst-f{grid-template-columns:minmax(0,1fr);gap:1.5rem}}

/* ── Galería (VP-24) ───────────────────────────────────────────────────────
   En escritorio queda PEGADA mientras se leen los acordeones: el producto no
   se va de la pantalla. En celular las miniaturas pasan abajo, en una fila que
   se corre con el dedo — el scroll es de la fila, no de la página. */
.cst-gal{display:grid;grid-template-columns:4.875rem minmax(0,1fr);gap:.8rem;
  position:sticky;top:calc(4.25rem + 1.25rem);align-self:start;min-width:0}
@media (max-width:62.5rem){.cst-gal{position:static}}
@media (max-width:35rem){.cst-gal{grid-template-columns:minmax(0,1fr)}}
/* Un solo producto sin galería no tiene miniaturas: sin esto la foto grande
   caería en la columna de 78 px y quedaría del tamaño de una estampilla. */
.cst-gal-solo{grid-template-columns:minmax(0,1fr)}
.cst-ths{display:flex;flex-direction:column;gap:.55rem;min-width:0}
@media (max-width:35rem){
  .cst-ths{order:2;flex-direction:row;gap:.5rem;overflow-x:auto;padding-bottom:.15rem;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;
    /* Se desvanece a la derecha para que se vea que la fila SIGUE. Sin esto,
       una galería de 5 parece de 4 y la quinta foto no la busca nadie. Es el
       mismo recurso que ya usa el menú de categorías en celular.
       🔴 El degradado es de ANCHO FIJO (1.5rem), no un %: con 4 miniaturas que
       entran justas, un `86%` le comía el borde a la última y parecía un error
       de render. Fijo, cae sobre el aire que sobra y no se ve. */
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 1.5rem),transparent 100%);
            mask-image:linear-gradient(90deg,#000 calc(100% - 1.5rem),transparent 100%)}
  .cst-ths::-webkit-scrollbar{display:none}
}
.cst-th{width:4.875rem;height:4.875rem;flex:none;position:relative;overflow:hidden;
  padding:0;cursor:pointer;scroll-snap-align:start;
  background:var(--tile);border:1px solid var(--line);border-radius:var(--r-s);
  transition:transform .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease)}
.cst-th img{position:absolute;inset:13%;width:74%;height:74%;display:block;
  object-fit:contain;mix-blend-mode:multiply}
@media (hover:hover) and (pointer:fine){
  .cst-th:hover{transform:translateY(-2px);
    border-color:color-mix(in srgb,var(--acento) 70%,transparent)}
}
.cst-th[aria-pressed="true"]{border-color:var(--acento);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--acento-txt) 50%,transparent),
             0 6px 16px color-mix(in srgb,var(--acento) 45%,transparent)}
/* ══ 🔴 10-10 · «LA FOTO SELECCIONADA TIENE UN MARCO AZUL RARO E INCOMPLETO» ══
   Diego, sobre la ficha en el teléfono. Y «incompleto» es literal, no una
   impresión: el anillo de arriba es un `box-shadow` con 2 px de EXPANSIÓN, o
   sea que se dibuja FUERA de la caja de la miniatura. En el teléfono la tira
   de miniaturas (`.cst-ths`) deja de ser una columna y pasa a ser un scroller
   horizontal con `overflow-x:auto` —y un scroller RECORTA todo lo que se sale
   de su caja—. La primera miniatura está pegada al borde izquierdo del
   scroller, así que su anillo se corta ahí. Encima la tira lleva un
   `mask-image` que desvanece la derecha: del otro lado pasa lo mismo.
   Resultado: un marco azul al que le faltan pedazos.

   ✅ EL ANILLO SE VA PARA ADENTRO (`inset`). Lo que se dibuja dentro de la
      caja no se puede recortar, así que el marco se ve ENTERO en cualquier
      posición de la tira, también en la primera y en la última. Se queda el
      halo de color difuso —la firma de la casa, lo único que Diego rescató de
      una pantalla que por lo demás rechazó— porque ése SÍ puede sobresalir: si
      se corta no se nota, es una sombra difusa y no un borde.
   ⚠️ 35rem y no 30: ese es el corte en el que `.cst-ths` se convierte en
      scroller, o sea exactamente donde empieza el recorte. Un corte distinto
      dejaría una franja de anchos con el marco roto. */
@media (max-width:35rem){
  .cst-th[aria-pressed="true"]{
    box-shadow:inset 0 0 0 2px var(--acento-txt),
               0 6px 16px color-mix(in srgb,var(--acento) 45%,transparent)}
}
/* La foto grande. SIN borde: la define el halo, que es la firma de la casa. */
.cst-f-main{position:relative;aspect-ratio:1/1;min-width:0;overflow:hidden;
  background:var(--tile);border-radius:var(--r-x);box-shadow:var(--sh-2)}
/* ── VP-65 · EN UNA SOLA COLUMNA, LA FOTO NO SE PUEDE COMER LA PANTALLA ──────
   Diego (06-09), textual: «al entrar a la card de un producto en el celular la
   foto del producto es muy grande». Medido a 390: la foto salía 358×358 y, con
   la cabecera, las migas y las miniaturas arriba, el NOMBRE terminaba en el px
   768 y el PRECIO en el 824 — o sea fuera de la primera pantalla de cualquier
   iPhone con la barra de Safari puesta. El precio es la mitad de la decisión de
   compra y llegaba después de un scroll.

   Y se topea el ANCHO con el mismo número: con `aspect-ratio:1/1`, topear sólo
   el alto deja una bandeja apaisada con la foto perdida en el medio (en un iPad
   en vertical quedaba de 736×410). Con los dos topes iguales sigue siendo un
   cuadrado, centrado, del tamaño que entre.

   ═══ 🔴🔴 VP-67 · EL TOPE ES FIJO. NI `dvh`, NI `vh`, NI `svh`, NI `lvh` ════
   Diego (07-09): «la foto de acá se mueve, al moverse se agranda raro; un
   tamaño fijo y ya».

   El tope era `max(14rem,38dvh)` y la culpa la tenía el `dvh`. `dvh` mide la
   ventana VISIBLE, y en el iPhone la ventana visible CAMBIA sola: apenas
   scrolleás, Safari esconde su barra de abajo y el alto crece ~60 px. O sea que
   38dvh crecía mientras el dedo se movía, y con él la foto. Medido en el banco
   con la ventana emulada a 844 y a 664 de alto: la misma foto salía 320,7 px y
   252,3 px. La página parecía respirar.

   `dvh` era, además, la respuesta correcta a OTRA pregunta. Se eligió (VP-65)
   contra `vh` porque `vh` mide la pantalla SIN barra y por eso miente al abrir.
   Los dos miden la ventana; la ventana es justo lo que no se puede usar acá.

   Un tope en `rem` no se mueve nunca: no depende de la ventana, sólo de la
   letra base, y acompaña el zoom del navegador (que es lo que uno quiere).
     · 20rem = 320 px en vertical — prácticamente lo mismo que se venía viendo
       en un iPhone con la barra puesta, así que no cambia lo que Diego aprobó;
     · 14rem = 224 px ACOSTADO, que es el caso que el piso viejo cuidaba: en un
       teléfono horizontal la pantalla tiene 390 px de alto y una foto de 320 se
       come todo. `orientation` describe la FORMA del aparato, no el alto de la
       ventana: no cambia porque se esconda una barra, que es la diferencia que
       importa acá. */
@media (max-width:62.5rem){
  /* 🔴 EL `width:100%` NO SOBRA. Adentro de esta bandeja lo único que hay es un
     <img> `position:absolute`, que no aporta ancho intrínseco: en cuanto los
     márgenes automáticos apagan el `stretch` de la reja, el ancho se calcula
     como «lo que ocupe el contenido» = 0, y la foto DESAPARECE. Con el ancho
     declarado, el tope recorta y los márgenes se comen lo que sobra. */
  .cst-f-main{--f-tope:20rem;width:100%;
    max-height:var(--f-tope);max-width:var(--f-tope);margin-inline:auto}
}
@media (max-width:62.5rem) and (orientation:landscape){
  .cst-f-main{--f-tope:14rem}
}
/* Y las miniaturas, que en celular son una fila ABAJO de la foto, bajan de 78 a
   56 px. Son el control secundario de la pantalla —la foto grande ya se ve— y
   esos 22 px estaban comprándose el renglón del precio. 56 px sigue siendo
   bastante más que los 44 de AC-14. */
@media (max-width:35rem){
  .cst-th{width:3.5rem;height:3.5rem}
}
.cst-f-main img{position:absolute;inset:6%;width:88%;height:88%;display:block;
  object-fit:contain;mix-blend-mode:multiply;transition:transform .8s var(--ease)}
@media (hover:hover) and (pointer:fine){
  .cst-f-main:hover img{transform:scale(1.06)}
}
/* Sin `cursor:zoom-in`: no hay lupa todavía y un cursor que promete un zoom
   que no existe es una mentira chiquita que se nota. */
/* Sin stock: gris y apagado, PERO se tiene que seguir viendo el producto.
   La card usa .45 y a 270 px funciona; acá la foto mide 500 y con .45 el
   micrófono blanco desaparecía contra la bandeja blanca — se leía «la foto no
   cargó», no «no hay». Va a .68, y las miniaturas acompañan: la mitad gris y la
   mitad a todo color era lo que quedaba antes. */
.cst-gal-sin .cst-f-main img,
.cst-gal-sin .cst-th img{filter:grayscale(1);opacity:.68}
.cst-f-no{position:absolute;inset:0;display:grid;place-items:center;
  color:var(--segundo);font-size:clamp(3rem,9vw,5rem)}

/* ── Columna de compra ─────────────────────────────────────────────────────── */
.cst-f-r{display:flex;flex-direction:column;min-width:0}
.cst-f-chips{display:flex;flex-wrap:wrap;gap:.4rem;margin:0 0 .95rem}
.cst-f-chip{display:inline-flex;align-items:center;gap:.35rem;padding:.38rem .72rem;
  border-radius:99px;font-size:.72rem;font-weight:800;letter-spacing:.01em;line-height:1.3}
/* ── VP-64/VP-65 · el cartel de la oferta, azul y sobre la foto ─────────────
   Antes era `.cst-f-chip-off` en la fila de chips: tinta sobre blanco, o sea
   negro sólido, que es justo lo que Diego marcó («mismo tema de mucho negro»).
   Ahora va arriba a la derecha de la foto, en el azul de marca. Sobre la
   bandeja —que es blanca en los dos temas— el azul se recorta parejo siempre.
   El halo azul difuso debajo del chip es la firma de la casa: el color pesa por
   la sombra, no por un borde. */
.cst-f-off,.cst-f-free{position:absolute;top:.85rem;z-index:2;
  display:inline-flex;align-items:center;gap:.3rem;
  padding:.34rem .62rem;border-radius:.65rem;
  font-size:.75rem;font-weight:800;letter-spacing:.01em;line-height:1.25}
.cst-f-off{right:.9rem;background:var(--marca);color:var(--marca-txt);
  box-shadow:0 4px 14px color-mix(in srgb,var(--marca) 45%,transparent)}
/* «Envío gratis» acompaña al descuento arriba de la foto, del lado de afuera —
   exactamente como en la card de la grilla. No es un capricho de simetría: era
   la única cosa que quedaba en la fila de chips, y una fila entera (42 px justo
   arriba del nombre, en la parte más cara de la pantalla) para sostener una
   pastilla es el «elemento más» que hay que sacar. Blanco sobre la bandeja
   —blanca en los dos temas— con el halo que lo despega. */
.cst-f-free{left:.9rem;background:var(--chip-sup);color:var(--chip-ok);
  box-shadow:0 2px 10px rgba(17,20,26,.14)}
/* `.cst-f-chip-free` se BORRÓ, no se dejó por las dudas: el envío gratis se
   mudó a la bandeja (.cst-f-free) y una regla sin nadie que la use es la forma
   en que un archivo empieza a mentir sobre lo que hace. */
.cst-f-chip-no{background:color-mix(in srgb,var(--muted) 16%,var(--sup));color:var(--ink2)}
.cst-f-h1{margin:0;font-size:clamp(1.5rem,3.4vw,2.25rem);font-weight:800;
  letter-spacing:-.03em;line-height:1.14;color:var(--ink);
  text-wrap:balance;overflow-wrap:break-word}

/* VP-26 · el precio es el número hero de la pantalla */
.cst-f-pz{margin:1.15rem 0 0;display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap}
.cst-f-now{font-size:clamp(2rem,4.6vw,2.75rem);font-weight:800;letter-spacing:-.035em;
  line-height:1;color:var(--ink)}
.cst-f-was{font-size:.95rem;color:var(--muted);text-decoration:line-through}
.cst-f-save{padding:.3rem .62rem;border-radius:.5rem;font-size:.72rem;font-weight:800;
  color:var(--ok);background:color-mix(in srgb,var(--ok) 13%,var(--sup))}

/* VP-27 · cuotas: la de la publicación grande, el resto como pastillas que flotan */
.cst-f-cuo{margin:.65rem 0 0;display:flex;align-items:center;gap:.45rem;
  font-size:.95rem;font-weight:700;color:var(--acento-txt)}
.cst-f-cuo b{font-weight:800}
.cst-f-cuos{margin:.7rem 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:.4rem}
.cst-f-cuoc{display:inline-flex;align-items:baseline;gap:.3rem;padding:.35rem .68rem;
  border-radius:99px;font-size:.72rem;font-weight:700;color:var(--ink2);
  background:var(--sup);border:1px solid var(--line);
  box-shadow:0 3px 10px color-mix(in srgb,var(--acento) 26%,transparent)}
.cst-f-cuoc b{font-weight:800;color:var(--ink)}

/* ── 🔻 VP-83 · EL VIDEO SE MUDÓ ADENTRO DE LA GALERÍA ──────────────────────
   Las reglas `.cst-vid`, `.cst-vid-t`, `.cst-vid-l`, `.cst-vid-i` y
   `.cst-vid-p` se BORRARON, no se dejaron por las dudas: la sección propia
   debajo de la ficha ya no existe (Diego: «el video se ve grande abajo… debe
   verse en el lugar donde normalmente se vería la foto»). Una regla sin nadie
   que la use es la forma en que un archivo empieza a mentir sobre lo que hace.

   Lo que sigue es el video como ÍTEM DE GALERÍA: una miniatura en la tira y el
   reproductor adentro de la MISMA bandeja cuadrada de la foto. El tamaño ya no
   se discute — hereda el tope medido de `VP-65`/`VP-67` y no puede crecer solo,
   que era la mitad de la queja. */

/* La miniatura del video. Es una `.cst-th` con dos cosas encima, así que el
   tamaño, el borde, el hover y el estado elegido salen gratis de ahí: un
   segundo objeto parecido sería un segundo objeto que mantener. */
.cst-th-v{background:var(--tile)}
/* 🔴 La portada del video NO lleva `mix-blend-mode:multiply`. Las fotos de
   producto vienen recortadas sobre blanco y el multiply las funde con la
   bandeja; el cuadro de un video es una escena real —con negros— y el multiply
   se los come, dejando una mancha sucia. Y ocupa el cuadrado entero (`cover`),
   no el 74% con aire: una portada centrada con margen se lee como una foto de
   producto más y justamente lo que hay que decir es que ES OTRA COSA. */
.cst-th-v img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;mix-blend-mode:normal}
/* El triángulo. Redondo, tinta clara sobre un velo oscuro: se lee sobre una
   portada clara y sobre una oscura sin tener que saber cuál es. */
.cst-th-play{position:absolute;inset:0;display:grid;place-items:center;
  color:#fff;font-size:.9rem;
  background:radial-gradient(circle at 50% 50%,
             color-mix(in srgb,#11141a 52%,transparent) 0 42%,
             color-mix(in srgb,#11141a 22%,transparent) 60%,transparent 75%);
  transition:transform .3s var(--ease)}
@media (hover:hover) and (pointer:fine){
  .cst-th-v:hover .cst-th-play{transform:scale(1.12)}
}
/* Sin portada el velo no tiene contra qué contrastar: se pone tinta de marca
   sobre la bandeja y listo. `:not(:has(img))` con respaldo — `:has` todavía no
   está en todos lados, así que el caso sin portada además pinta la bandeja. */
.cst-th-v:not(:has(img)) .cst-th-play{background:none;
  color:var(--acento-txt);font-size:1.1rem}
/* La duración, abajo a la derecha. Es el dato que decide si alguien lo toca
   ahora o no, y son cuatro caracteres. */
.cst-th-seg{position:absolute;right:.2rem;bottom:.2rem;
  padding:.05rem .28rem;border-radius:.35rem;
  font-size:.58rem;font-weight:800;line-height:1.5;letter-spacing:.01em;
  color:#fff;background:color-mix(in srgb,#11141a 72%,transparent)}
@media (max-width:35rem){ .cst-th-seg{display:none} }   /* a 56 px no entra */

/* ── EL REPRODUCTOR, EN LA BANDEJA DE LA FOTO ──────────────────────────────
   `inset:0` y no el 6% de la foto: una foto de producto necesita aire alrededor
   para respirar; un video es una imagen que ya viene compuesta y el aire lo
   único que hace es achicarla. `object-fit:contain` sobre la bandeja deja el
   clip entero —un reel vertical letterboxea a los costados— porque recortar un
   video de producto es cortarle el producto. */
.cst-f-vid{position:absolute;inset:0;z-index:3;border-radius:inherit;
  background:var(--tile);overflow:hidden}
.cst-f-vid video{display:block;width:100%;height:100%;
  background:var(--tile);object-fit:contain}
/* 🔴 Sin esto el video ignora el `hidden`: `.cst-f-vid` no declara `display`,
   pero la lista de abajo sí lo hace explícito. Ver `[hidden]`. */

/* 🔊 El botón de sonido. Vive arriba a la izquierda —abajo están los controles
   nativos— y SÓLO mientras el video está muteado: el JavaScript lo saca en
   cuanto se usa. Tinta clara sobre velo oscuro para que se lea sobre cualquier
   cuadro, con el halo de siempre para despegarlo de la imagen. */
.cst-f-snd{position:absolute;top:.6rem;left:.6rem;z-index:4;
  display:inline-flex;align-items:center;gap:.35rem;
  min-height:2.2rem;padding:.3rem .7rem;
  border:0;border-radius:99px;cursor:pointer;
  font-family:var(--f);font-size:.72rem;font-weight:800;letter-spacing:.01em;
  color:#fff;background:color-mix(in srgb,#11141a 68%,transparent);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  box-shadow:0 4px 14px color-mix(in srgb,#11141a 38%,transparent);
  transition:transform .25s var(--ease),background .25s var(--ease)}
@media (hover:hover) and (pointer:fine){
  .cst-f-snd:hover{transform:translateY(-1px);
    background:color-mix(in srgb,#11141a 82%,transparent)}
}
.cst-f-snd:focus-visible{outline:2px solid #fff;outline-offset:2px}
/* ⚠️ Con el video puesto, los dos chips de la bandeja se van. Un «−13%» y un
   «Envío gratis» flotando sobre un video que corre son dos elementos de más
   sobre lo único que la persona pidió mirar — y los dos datos están enteros en
   la columna de al lado. Vuelven solos al volver a la foto. */
.cst-f-main-v .cst-f-off,
.cst-f-main-v .cst-f-free{opacity:0;visibility:hidden;
  transition:opacity .2s var(--ease),visibility .2s var(--ease)}
/* Y el zoom al pasar por encima NO se aplica sobre un video: mover una imagen
   que ya se mueve es mareador, y el `scale` recortaría el clip. */
.cst-f-main-v img{transform:none!important}

/* ── La caja de compra ──────────────────────────────────────────────────────
   El motivo de la pantalla. Un solo objeto que flota (halo, cero borde) con el
   stock, la cantidad y los dos botones adentro: cuatro controles sueltos serían
   cuatro elementos; agrupados son UNO. */
.cst-f-box{margin-top:1.5rem;padding:1.1rem 1.1rem 1.2rem;border-radius:var(--r-l);
  background:var(--sup);box-shadow:var(--sh-2)}
/* VP-30 · estados de stock. null → esta línea no existe. */
.cst-f-st{margin:0 0 .9rem;display:flex;align-items:center;gap:.45rem;
  font-size:.82rem;font-weight:700}
.cst-f-st-ok{color:var(--ok)}
.cst-f-st-low{color:var(--warn)}
.cst-f-st-no{color:var(--muted)}
.cst-f-buy{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
/* ⭐ SKY-C04 · «Avisame cuando vuelva». Vive ADENTRO de la caja de compra,
   pegado al chip gris: cuando no se puede comprar, esto es el motivo de la
   pantalla.
   🟦 SIN FONDO LLENO Y SIN BARRA AL COSTADO. El color va en el HALO, que es la
   regla de la casa («las sombras celestes en los bordes, eso me gustó, es lo
   mejor del diseño» — Diego, 04-09) y la forma de darle peso a lo importante
   sin agregar un elemento más. Un bloque con fondo azul compite con todo lo que
   tiene al lado y le saca jerarquía al dato: es la regla del 22-09, «nada de
   fondo azul, eso para todo el panel».
   ⚠️ El halo es más fuerte que el de la caja que lo contiene (--sh-2) a
   propósito: adentro de una card que ya flota, un halo más suave desaparece. */
.cst-rep{margin:0 0 1rem;padding:.95rem 1rem 1.05rem;border-radius:var(--r-m);
  background:var(--sup);
  box-shadow:0 1px 2px color-mix(in srgb,var(--negro) 6%,transparent),
             0 12px 30px color-mix(in srgb,var(--acento) 55%,transparent)}
.cst-rep-t{margin:0;display:flex;align-items:center;gap:.45rem;
  font-size:.9375rem;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
/* El ícono en el tono del área, no el texto: sobre blanco el acento pelado no
   llega a AA para texto chico, y el oscurecido ya existe para eso. */
.cst-rep-t .cst-ico{flex:none;color:var(--acento-txt)}
.cst-rep-s{margin:.35rem 0 0;font-size:.8125rem;line-height:1.55;color:var(--muted)}
.cst-rep-s b{color:var(--ink2);font-weight:700}
.cst-rep-mal{margin:.55rem 0 0;font-size:.8125rem;line-height:1.5;
  color:var(--bad);font-weight:600}
.cst-rep-f{display:flex;flex-wrap:wrap;gap:.5rem;margin:.8rem 0 0}
/* 🔴 16 px DE PISO (1rem), NO .9375rem. Por menos de 16, Safari hace zoom al
   tocar el campo y la ficha queda corrida — el «salta la pantalla» de Diego,
   que ya se pagó en el selector de cantidad de dos bloques más arriba. */
.cst-rep-i{flex:1 1 11rem;min-width:0;height:2.85rem;padding:0 .85rem;
  font:inherit;font-size:1rem;color:var(--ink);
  background:var(--pag);border:1px solid var(--line);border-radius:.75rem;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.cst-rep-i::placeholder{color:var(--segundo)}
.cst-rep-i:focus{outline:none;border-color:var(--acento);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--acento) 38%,transparent)}
.cst-rep-i:focus-visible{outline:2px solid var(--acento-txt);outline-offset:2px}
/* 2,85rem = 45,6 px de alto: AC-14 pide 44. */
.cst-rep-b{flex:0 0 auto;min-height:2.85rem;padding:0 1.15rem;
  display:inline-flex;align-items:center;justify-content:center;
  font:inherit;font-size:.9375rem;font-weight:700;letter-spacing:-.01em;
  color:var(--marca-txt);background:var(--marca);
  border:0;border-radius:.75rem;cursor:pointer;
  box-shadow:0 6px 16px color-mix(in srgb,var(--negro) 18%,transparent);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
@media (hover:hover) and (pointer:fine){
  .cst-rep-b:hover{transform:translateY(-1px);
    box-shadow:0 10px 22px color-mix(in srgb,var(--negro) 26%,transparent)}
}
.cst-rep-b:active{transform:scale(.98)}
.cst-rep-b:focus-visible{outline:2px solid var(--acento-txt);outline-offset:3px}
/* La trampa del bot: fuera de pantalla, fuera del tabulador, fuera del lector. */
.cst-rep-h{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* 🔴 A 390 px el campo y el botón NO entran en un renglón: el campo se lleva el
   ancho entero y el botón baja a lo ancho. Con el ajuste de linea solo, el botón
   quedaría de 90 px pegado al borde. */
@media (max-width:26rem){
  .cst-rep-i{flex:1 1 100%}
  .cst-rep-b{flex:1 1 100%}
}


/* ════════════════════════════════════════════════════════════════════════
   ⭐ J9 · LAS ESTRELLAS — EL ORO, Y DÓNDE SE APOYAN
   ════════════════════════════════════════════════════════════════════════
   El porqué —con el voto de Diego, las tres opciones que le mostramos y por
   qué la que eligió no rompe nada— está arriba, donde se definen los dos
   tokens. Acá queda lo que hace falta para leer estas dos líneas:

   ⭐ LA LLENA ES ORO MACIZO Y NADA MÁS. Ni contorno, ni `color`, ni trazo: el
      relleno ES el dibujo. Cinco de éstas al lado de un «4,6» se leen como una
      calificación a dos metros, que es lo que Diego pidió cuatro veces.
   ⭐ LA VACÍA ES LA QUE CONSERVA EL TRAZO, y es la única que lo necesita: sin
      relleno, lo único que la dibuja es el contorno. Va en --muted (4,74 sobre
      blanco) y no en el gris de las líneas, que daría 1,35 y haría leer cinco
      estrellas como tres.

   ⚠️ `fill` y `stroke` ENTRAN POR HERENCIA al contenido del símbolo — por eso
      `i-star-g` no lleva ni un atributo de pintura. Un `fill` escrito en el
      símbolo le ganaría a esto y el oro no llegaría nunca.
   ⚠️ Y el `stroke:none` de la llena SE ESCRIBE, no se deja al default: así la
      regla dice sola que la falta de contorno es una decisión, y la batería la
      puede afirmar. */
.cst-est-on{fill:var(--oro);stroke:none}
/* La que falta: contorno SOLO, sin relleno. Lleno y vacío se distinguen por la
   FORMA además del color (1.4.1), igual que los dos corazones de VP-19.
   --muted sobre blanco da 4,74 y pasa el 3:1 de un gráfico; --line daría 1,35
   y las cinco estrellas se leerían como tres. */
.cst-est-off{color:var(--muted);fill:none;stroke:currentColor;
  stroke-width:1.5;stroke-linejoin:round}

/* ── EL RENGLÓN DE PUNTAJE, QUE ES EL MISMO EN LOS DOS LADOS ───────────────
   Las estrellas, el promedio y —cuando entra— el conteo. En la ficha es un
   link al detalle; en la card es un cartel y nada más. */
.cst-es{display:inline-flex;align-items:center;gap:.3rem;flex:none}
.cst-es-st{display:inline-flex;align-items:center;gap:.05rem}
.cst-es .cst-ico{width:.75rem;height:.75rem}
.cst-es b{font-size:.75rem;font-weight:800;color:var(--oro-bo);
  font-variant-numeric:tabular-nums;letter-spacing:-.01em;line-height:1}
/* El conteo entre paréntesis. `--ink2` y NO `--muted`: a 11 px el gris suave
   queda en 4,74 sobre blanco y en 4,33 sobre el celeste de la página — abajo
   del 4,5 de AA en cuanto la card se apoya en otra superficie. Es la misma
   decisión que ya tomó el pie de la sección de opiniones. */
.cst-es i{font-style:normal;font-size:.6875rem;font-weight:600;color:var(--ink2);
  font-variant-numeric:tabular-nums}
/* ── ⭐ UBICACIÓN A · SOBRE LA FOTO, ABAJO A LA DERECHA ─────────────────────
   🔴 ES LA QUE NO LE SUMA UN PÍXEL DE ALTO A LA GRILLA, y eso no es un detalle:
      VP-74 sacó el cartel de «Con stock» para que las cards fueran MÁS BAJAS
      («así pueden ser menos altas y están más proporcionadas»). Una estrella
      en un renglón nuevo del cuerpo le devolvería ese alto a las 39 cards, o
      sea le estaría sacando a Diego algo que él mismo pidió para darle otra
      cosa que también pidió.
   🟦 Sin fondo lleno de color: la pastilla es blanca —la misma `--chip-sup` de
      «Envío gratis», que vive en la misma bandeja— y el color del dato va en
      la SOMBRA y en el número. Es la regla de la casa.
   ⚠️ Va a la DERECHA porque a la izquierda, abajo, vive el cartel de colores
      (`.cst-fam`): son los dos únicos inquilinos del piso de la bandeja y cada
      uno tiene su esquina. */
.cst-es-foto{position:absolute;right:.4rem;bottom:.4rem;z-index:2;
  max-width:calc(100% - .8rem);
  /* ⚠️ NO SE PUEDE TOCAR, igual que el cartel de colores de la otra esquina:
     toda la bandeja es el link a la ficha y una pastilla que se come el toque
     deja un agujero muerto justo donde el dedo apunta. En PC, al pasar el
     mouse, la barra de «Agregar» (z-index 3) le pasa por encima — que es lo
     mismo que ya le pasa a `.cst-fam`. */
  pointer-events:none;
  gap:.25rem;min-height:1.625rem;padding:0 .55rem 0 .45rem;border-radius:99px;
  background:var(--chip-sup);color:var(--marca);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--marca) 16%,transparent),
             0 3px 10px color-mix(in srgb,var(--marca) 26%,transparent),
             0 10px 22px color-mix(in srgb,var(--acento) 45%,transparent)}
/* ⭐ 13-10 · voto est9: la estrella y el numero en el COLOR DE LA MARCA (antes
   oro), y al lado la cantidad de opiniones en gris de lectura. La estrella de
   la ficha sigue en oro: esto es solo la pina de la card. */
.cst-es-foto .cst-es-1{width:.875rem;height:.875rem;fill:var(--marca);stroke:none}
.cst-es-foto b{font-size:.8125rem;color:var(--marca)}
.cst-es-foto i{font-size:.75rem;font-weight:500;color:var(--ink2)}
/* ⭐🗳️ 13-10 · LA PINA VUELVE ABAJO A LA DERECHA EN TODOS LOS ANCHOS (est9).
   Con el voto de est3 (11-10) vivia arriba a la derecha en el telefono para
   no pisar el «-20 %»; ese chip ya no esta sobre la foto (el % va al lado del
   tachado), asi que la pina vuelve al piso de la bandeja, como en el mockup.
   🔴 Y AHORA LLEVA EL CONTEO, asi que en el telefono NO ENTRA al lado del
      cartel de colores ni del «N productos» de un combo, que viven en la otra
      esquina del piso (104 + 75 px en una bandeja de 139 a 174).
   🔴 NO SE SUBEN UN RENGLON: probado y medido, quedaban del 66 al 77 % del
      alto de la bandeja, encima del producto. Es exactamente lo que Diego
      marco el 10-10 («esta movido en cualquier lado») y lo que mide MS-3c de
      prueba_movil_seis: ninguna pastilla en la franja central.
   ✅ SE MUDAN AL RINCON DE ARRIBA A LA DERECHA, que en el telefono queda libre
      (el «-20 %» ya no esta sobre la foto). El riel de chips de la izquierda
      («Envio gratis», «Sin stock») baja un renglon para no pisarlos, igual que
      hacia con la pina de est3. Con el corazon de Favoritos, van debajo de el.
      Sin pina, o sin colores, nada se mueve. */
@media (max-width:30rem){
  .cst-card-es.cst-card-fam .cst-fam,
  .cst-card-es.cst-card-set .cst-set-n{top:.65rem;right:.65rem;left:auto;bottom:auto}
  .cst-card-es.cst-card-fam .cst-tags,.cst-card-es.cst-card-set .cst-tags{top:2.3rem}
  .cst-card-fav.cst-card-es.cst-card-fam .cst-fam,
  .cst-card-fav.cst-card-es.cst-card-set .cst-set-n{top:3.3rem}
}

/* Las otras cuatro ubicaciones del mockup, listas por si Diego vota distinto.
   Cuál se dibuja lo decide UNA línea en `webRenderCard()`. */
.cst-es-pz{margin-left:auto}
.cst-es-pie{margin-top:.15rem;padding-top:.5rem;box-shadow:inset 0 1px 0 var(--line2)}

/* ── ⭐ EL RESUMEN DE LA FICHA, ARRIBA — «cuando entrás» ────────────────────
   Diego lo pidió con esas palabras. Es un link al ancla de la sección de
   opiniones: el que mira el 4,6 arriba y quiere ver de dónde sale, toca y
   baja. Sin él, el dato está dos pantallas abajo y no lo ve nadie.
   ⚠️ `align-self:flex-start` para que la zona de toque mida lo que mide el
   contenido y no el ancho entero de la columna. */
.cst-fop{display:inline-flex;align-items:center;gap:.5rem;align-self:flex-start;
  margin:.6rem 0 0;padding:.3rem .1rem;border-radius:var(--r-s);text-decoration:none}
.cst-fop .cst-ico{width:1rem;height:1rem}
.cst-fop .cst-es-st{gap:.08rem}
.cst-fop b{font-size:1rem;font-weight:800;color:var(--oro-bo);
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.cst-fop span{font-size:.78125rem;font-weight:600;color:var(--ink2)}
@media (hover:hover) and (pointer:fine){
  .cst-fop:hover span{text-decoration:underline}
}

/* ── ⭐ 08-10 · LA FILA DEL TÍTULO: OPINIONES A LA IZQUIERDA, COMPARTIR AL BORDE
   El botón de compartir vivía abajo del botón de comprar, justo arriba de
   «Medios de entrega», y Diego lo marcó dos veces. Sube acá, al aire que ya
   sobraba al lado del resumen de opiniones: a 2.560 ese resumen mide 230 px de
   una columna de 794, así que el control entra SIN que la ficha gane un renglón.
   ⚠️ `margin-left:auto` y no `justify-content:space-between`: con las opiniones
      apagadas esta fila no se dibuja, y el día que se agregue un tercer dato al
      renglón el botón tiene que seguir pegado al borde, no repartirse el ancho.
      Es la regla de Diego sobre los controles: «está muy en el medio, no está a
      la derecha».
   ⚠️ `flex-wrap` porque en 390 px las dos piezas no entran en un renglón: ahí el
      botón baja y queda a la derecha igual. No cuesta alto nuevo — en el
      teléfono el botón YA ocupaba su propio renglón donde estaba antes. */
.cst-f-meta{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem 1rem;
  margin-top:.6rem}
.cst-f-meta .cst-fop{margin-top:0}
.cst-f-meta .cst-sh{margin-left:auto;align-self:center}
/* Y cuando NO hay opiniones el botón va suelto —sin la fila, para no dejar un
   envoltorio vacío— pero al mismo borde. Si no, la ficha tendría el control a la
   derecha o a la izquierda según si el espejo de ML está prendido: el mismo
   control en dos lugares distintos, decidido por un dato que no tiene nada que
   ver con él. */
.cst-f-r > .cst-sh{align-self:flex-end}

/* ── ⭐ 08-10 · «ALGO QUE ALGUIEN DIJO» ─────────────────────────────────────
   La frase de una reseña NUESTRA, abajo de las estrellas. Dos renglones y
   corta: es una muestra que invita a bajar a la sección, no la sección.

   🔴 SIN BORDE AL COSTADO. El reflejo para una cita es una barra a la
      izquierda, y es exactamente lo que esta casa no hace: el color va por
      sombra. La card se apoya en `--sup` sobre el blanco de la ficha, así que
      lo único que la dibuja es el halo celeste — «más halo, menos borde», que
      es lo único que Diego rescató entero de un diseño.
   ⚠️ El recorte a dos renglones va por `-webkit-line-clamp`, que necesita el
      `display:-webkit-box` en el PÁRRAFO y no en el link: el link tiene que
      seguir siendo un bloque normal para poder llevar abajo la firma. */
.cst-fq{display:block;margin-top:.7rem;max-width:40rem;padding:.75rem .9rem;
  border-radius:var(--r-m);background:var(--sup);text-decoration:none;color:inherit;
  box-shadow:0 .7rem 1.6rem -.6rem color-mix(in srgb,var(--acento) 70%,transparent);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.cst-fq-t{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;font-size:.9375rem;font-weight:600;line-height:1.45;color:var(--ink)}
.cst-fq-p{display:flex;align-items:baseline;gap:.4rem;margin-top:.35rem}
.cst-fq-a{font-size:.8125rem;font-weight:800;color:var(--ink2)}
/* El renglón que dice de quién es la frase. Es lo que separa a esta cita de las
   del espejo de Mercado Libre, que son del CATÁLOGO: acá sólo entran las de
   `web_resena`, o sea gente que compró en esta tienda. */
.cst-fq-v{font-size:.75rem;font-weight:600;color:var(--muted)}
@media (hover:hover) and (pointer:fine){
  .cst-fq:hover{transform:translateY(-2px);
    box-shadow:0 1rem 2.2rem -.6rem color-mix(in srgb,var(--acento) 85%,transparent)}
}

/* ── ⭐ 10-10 · LAS OPINIONES QUE ALTERNAN ──────────────────────────────────
   Diego: «falta abajo de las estrellas que alternen opiniones de texto, como
   gente opinando del producto». La cita de UNA ya estaba desde el 08-10; esto
   es que sean VARIAS sin que la página se mueva.

   🔴 LAS TRES VIVEN EN LA MISMA CELDA DE LA GRILLA, y no es un gusto de
      maquetado: es lo único que hace que la caja tome el alto de la MÁS LARGA
      y no cambie nunca. Mostrando y escondiendo en flujo normal, una opinión
      de un renglón después de una de tres le levanta el precio 40 px justo
      cuando alguien lo está por tocar — y una página que salta sola se siente
      rota aunque no lo esté.
   🔴 SE ESCONDE POR `visibility`, NO POR `opacity`. Un elemento a opacidad 0
      sigue recibiendo el dedo: quedarían dos enlaces invisibles encima del que
      se ve. `visibility:hidden` además lo saca del árbol que lee un lector de
      pantalla y del recorrido del tabulador.
   🔴 LA MARCA LA LLEVA LA QUE SE ESCONDE (`.cst-fq-off`), NO la que se ve. Así
      la primera sale del servidor sin una clase de más —byte a byte como salía
      cuando había una sola— y sin JavaScript se ve ésa y nada más. Marcar la
      visible obligaría a un `:first-child` que después hay que anular con otra
      regla de la MISMA especificidad: la colisión de cascada que este proyecto
      ya pagó varias veces.
   🟦 Sin fondo lleno y sin barra al costado: la cita se sigue apoyando en su
      halo celeste, que es la regla de la casa y lo único que Diego rescató
      entero de un diseño. El control va en la tinta, no en una caja de color. */
.cst-fqs{margin-top:.7rem;max-width:40rem}
.cst-fqs-c{display:grid;align-items:start}
.cst-fqs-c>.cst-fq{grid-area:1/1;margin-top:0;max-width:100%}
.cst-fqs-c>.cst-fq.cst-fq-off{visibility:hidden}
/* La barra del control, ANCLADA AL BORDE DERECHO. Diego, sobre otra pantalla:
   «está muy en el medio, no está a la derecha». */
.cst-fqs-b{display:flex;align-items:center;justify-content:flex-end;
  gap:.45rem;margin-top:.1rem}
.cst-fqs-n{font-size:.75rem;font-weight:700;color:var(--muted);
  font-variant-numeric:tabular-nums}
/* 👆 EL BOTÓN MIDE 44x44 Y EL DIBUJO 28: el área de toque es la regla que esta
   casa se puso (el mínimo de Apple) y el círculo chico es lo que se ve. El
   tamaño va en el BOTÓN y no en un pseudo-elemento, que es como se termina
   invadiendo al control de al lado sin que el tamaño lo delate. */
.cst-fqs-p{display:inline-flex;align-items:center;justify-content:center;
  width:2.75rem;height:2.75rem;padding:0;border:0;background:none;
  color:var(--ink2);cursor:pointer;-webkit-tap-highlight-color:transparent}
.cst-fqs-p[hidden]{display:none}
.cst-fqs-p>span{display:inline-flex;align-items:center;justify-content:center;
  width:1.75rem;height:1.75rem;border-radius:999px;background:var(--sup);
  box-shadow:0 .4rem 1rem -.45rem color-mix(in srgb,var(--acento) 80%,transparent)}
.cst-fqs-p .cst-ico{width:1em;height:1em}
.cst-fqs-p>.cst-fqs-i-r{display:none}
.cst-fqs-p.cst-fqs-off>.cst-fqs-i-p{display:none}
.cst-fqs-p.cst-fqs-off>.cst-fqs-i-r{display:inline-flex}


/* ── ⭐ SKY-OPINION · LAS OPINIONES DEL PRODUCTO ────────────────────────────
   Una sección entera, no un renglón: cuando hay 1.915 opiniones con 4,6 de
   promedio, ese dato vende tanto como la foto.

   🟦 SIN FONDO LLENO Y SIN BARRA AL COSTADO, igual que «Avisame»: el color va
      en el HALO y en el NÚMERO. Es la regla del 22-09 —«nada de fondo azul, eso
      para todo el panel»— y la del lenguaje estético: sombra de color, nunca
      border-left de acento.
   ⭐ EL PROMEDIO ES EL NÚMERO HERO: grande, en el tono, con tabular-nums para
      que 4,6 y 4,8 ocupen lo mismo y la columna no baile.
   ⚠️ Las barras de la distribución llevan GRADIENTE, no relleno plano, que es
      la regla de la casa para cualquier barra de progreso. */
.cst-ops{margin:2rem 0 0;padding:1.25rem 1.25rem 1.35rem;border-radius:var(--r-l);
  background:var(--sup);
  box-shadow:0 1px 2px color-mix(in srgb,var(--negro) 6%,transparent),
             0 14px 34px color-mix(in srgb,var(--acento) 48%,transparent)}
.cst-ops-h{margin:0 0 1rem;display:flex;align-items:center;gap:.45rem;
  font-size:1rem;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
/* El ícono en el tono oscurecido, no el acento pelado: sobre blanco el acento
   no llega a AA en tamaño chico. Mismo criterio que el título de la card de
   reputación, acá arriba.
   ⚠️ Y SIN ESCRIBIR EL NOMBRE DE ESA CLASE: `prueba_avisame` le saca su bloque
      a la hoja entera y exige que no quede UN solo rastro de él, justamente
      para que no termine escrito en dos lugares. Un comentario que la nombra
      cuenta como rastro, y la roja aparece en la batería de otro. Medido el
      04-10. */
.cst-ops-h .cst-ico{flex:none;color:var(--oro-bo)}
.cst-ops-in{display:flex;flex-wrap:wrap;gap:1.4rem;align-items:center}
.cst-ops-res{flex:0 0 auto;min-width:7.5rem;text-align:center}
/* ⭐ J9 · EL NÚMERO HERO PASA AL ORO OSCURO. Era `--acento-txt`, el celeste de
   la casa, y el 05-10 Diego pidió las estrellas «más amarillo dorado»: un 4,6
   celeste con cinco estrellas doradas debajo son dos colores para un solo
   dato. #8A6200 sobre `--sup` da 5,49:1, de sobra para 44 px. */
.cst-ops-n{display:block;font-size:2.75rem;line-height:1;font-weight:800;
  letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--oro-bo)}
.cst-ops-st{display:flex;justify-content:center;gap:.1rem;margin:.45rem 0 0}
.cst-ops-st .cst-ico{width:1.05rem;height:1.05rem}
/* 🔴 LAS ESTRELLAS VACÍAS NO VAN EN EL GRIS DE LAS LÍNEAS. Son un gráfico y
   el piso de un gráfico es 3:1, pero ese gris sobre `--sup` da **1,35:1** —
   o sea que a contraluz las cinco estrellas se leen como tres y el promedio
   que dibujan es otro. Lo cazó `CO-55` el 04-10, que mide el par ancestro-hijo
   de verdad y no el que uno cree. `--muted` sobre esa superficie pasa, y es el
   que ahora pone `.cst-est-off` para TODAS las estrellas de la tienda. */
.cst-ops-q{display:block;margin:.4rem 0 0;font-size:.8125rem;color:var(--muted);
  font-variant-numeric:tabular-nums}
.cst-ops-d{flex:1 1 14rem;min-width:0;display:grid;gap:.3rem}
.cst-ops-f{display:grid;grid-template-columns:2.4rem 1fr 2.6rem;align-items:center;gap:.5rem}
.cst-ops-f-k{font-size:.75rem;color:var(--ink2);font-weight:700;
  font-variant-numeric:tabular-nums;white-space:nowrap;
  display:inline-flex;align-items:center;gap:.18rem}
/* La estrellita del renglón («5 ⭐»): 11 px. Es la MISMA que las de arriba
   —mismo oro, mismo contorno— y no una tercera estrella de otro color. */
.cst-ops-f-k .cst-ico{width:.6875rem;height:.6875rem}
.cst-ops-b{height:.5rem;border-radius:99px;background:var(--fondo2);overflow:hidden}
.cst-ops-b > i{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--oro),var(--oro-bo))}
.cst-ops-f-n{font-size:.75rem;color:var(--muted);text-align:right;
  font-variant-numeric:tabular-nums}
/* ⚠️ --ink2 y no --muted: 12 px en #6b747f no llega a AA, y este renglón es el
   que dice de cuándo es el número — justo el que no se puede perder. */
.cst-ops-p{margin:1rem 0 0;font-size:.75rem;line-height:1.5;color:var(--ink2)}
/* ══ ⭐ 10-10 · «ESTÁ MUY ALTO, OCUPA MUCHO Y CORTA EL DINAMISMO» ════════════
   Diego, sobre este bloque en la ficha del teléfono, y con una aclaración que
   manda: *«me gusta cómo quedó»*. O sea que NO se rehace — se achica.
   Medido a 402×874: median **357 px, el 41 % de su pantalla**, con el número
   hero en 44 px. A 1.440 median 229, que ahí es el 25 % y está bien.
   Lo que se achica es el AIRE y la escala, nunca el dato: el promedio, las
   cinco estrellas, las cinco barras y el pie de «de cuándo es» siguen todos.
   🔴 El número baja de 44 a 34 px y sigue siendo el hero del bloque por lejos
      —el renglón de al lado mide 12— así que la jerarquía no se toca. */
@media (max-width:30rem){
  .cst-ops{margin-top:1.25rem;padding:.9rem .9rem 1rem}
  .cst-ops-h{margin-bottom:.6rem}
  .cst-ops-in{gap:.7rem}
  .cst-ops-n{font-size:2.125rem}
  .cst-ops-st{margin-top:.3rem}
  .cst-ops-d{gap:.18rem}
  .cst-ops-p{margin-top:.6rem}
  /* 🔴 LO QUE SE PROBÓ Y NO SE DEJÓ, porque NO MOVIÓ UN PÍXEL. La idea era la
     misma que arregló el bloque de envío: el promedio y las cinco barras se
     apilan, así que bajarle la base de flex a `.cst-ops-d` tendría que haberlos
     puesto en un renglón y ahorrado unos 70 px. Se escribió, se midió y el
     bloque siguió en 313 px exactos. Una regla de CSS que no cambia el número
     es CSS muerto —que en este repo tiene su propia batería— así que se sacó en
     vez de dejarla «por las dudas». Queda escrito para que el próximo no
     gaste la vuelta: el apilado de este bloque no lo decide esa base, y hay
     que medir QUÉ lo decide antes de volver a intentarlo. */
}
/* ═══ ⭐ SKY-PROPIAS · LAS OPINIONES DE NUESTROS COMPRADORES ═════════════
   Sin fondo lleno y sin barra al costado: cada opinión se separa de la de
   abajo con una línea y nada más. Son texto para leer, no cards — cinco cajas
   con sombra una abajo de la otra compiten entre ellas y no se lee ninguna.
   El resumen de arriba reusa `.cst-ops-res`, `.cst-ops-d` y compañía tal cual:
   es el MISMO dibujo, con otro origen. */
.cst-opw{margin:1.1rem 0 0;padding:0;list-style:none;display:grid;gap:0}
.cst-opw-i{padding:.9rem 0;border-top:1px solid var(--linea)}
.cst-opw-i:first-child{border-top:0;padding-top:.2rem}
.cst-opw-c{margin:0;display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.cst-opw-st{display:inline-flex;gap:.08rem;flex:none}
.cst-opw-st .cst-ico{width:.875rem;height:.875rem}
.cst-opw-a{font-size:.8125rem;font-weight:750;color:var(--ink)}
/* ⚠️ --ink2 y no --muted, por lo mismo que el renglón de la fecha de arriba:
   12 px en el gris claro no llega a AA. */
.cst-opw-f{font-size:.75rem;color:var(--ink2);font-variant-numeric:tabular-nums;
  margin-left:auto}
.cst-opw-t{margin:.4rem 0 0;font-size:.875rem;line-height:1.6;color:var(--ink2);
  /* 🔴 El texto lo escribe cualquiera y puede venir sin un solo espacio.
     Sin esto, una palabra de doscientos caracteres estira la sección entera y
     aparece el scroll horizontal que `overflow-x` del sitio tapa pero no
     arregla. */
  overflow-wrap:anywhere;max-width:72ch}
@media (max-width:26rem){
  .cst-ops-in{gap:1rem}
  .cst-ops-res{flex:1 1 100%}
}

/* ═══ ⭐ 13-10 · PEDIDO 142 · OPINIONES Y RELACIONADOS CON ANCHO DE LECTURA ═══
   Diego, textual: «las resenas ocupan toda la pantalla le falat mas esteica no
   pued e oucpar todo el ancho, lo mismo va para el los produc tos recomendados
   relaiconados».
   🔴 MEDIDO ANTES, NO SUPUESTO (prueba_ficha_ancho_lectura): adentro del marco
      ya estaban desde el 08-10, pero el marco mide 1.376 px a 1.440 y 1.728 a
      2.560, y las dos secciones lo llenaban entero: el resumen arriba, la lista
      de opiniones abajo a 1.688 px de renglon, y cuatro cards de 417 px.
   ⭐ LO QUE CAMBIA, SOLO EN PC (64 rem para arriba; el telefono queda como
      estaba, que ya lo habia afinado Diego a 402):
      1) Las dos secciones comparten UN ancho de lectura, --cst-lect (72 rem =
         1.152 px), centrado en el marco: debajo de la foto y la columna de
         compra quedan las dos alineadas entre si.
      2) Opiniones pasa a dos columnas: el resumen de estrellas AL COSTADO y la
         lista a la derecha, cada opinion en su tarjeta con aire y sombra de
         color (no barra al costado, no fondo azul lleno).
      3) Relacionados: la misma grilla y la misma card del listado, en la tira
         de 72 rem.
   ⚠️ Se escribe con :has() y no tocando el HTML: las baterias de opiniones y
      sus saboteadores anclan en el HTML de la seccion, y el dibujo de dos
      columnas es solo de PC. Un navegador sin :has() ve lo de antes, acotado
      igual por el max-width. */
.cst-ops,#cst-rel{--cst-lect:72rem}
@media (min-width:64rem){
  .cst-ops{max-width:var(--cst-lect);margin-inline:auto;padding-inline:1.75rem}
  #cst-rel{max-width:var(--cst-lect);margin-inline:auto}
  /* Sin lista de opiniones (solo el resumen): las barras no se estiran a mil
     pixeles, que una barra larga se lee como mas gente de la que hay. */
  .cst-ops-d{max-width:30rem}
  .cst-ops:has(> .cst-opw){display:grid;
    grid-template-columns:minmax(14rem,18rem) minmax(0,1fr);
    grid-template-rows:auto auto auto auto auto 1fr;
    column-gap:clamp(2rem,3.5vw,3rem);align-items:start}
  .cst-ops:has(> .cst-opw) > *{grid-column:1}
  .cst-ops:has(> .cst-opw) > .cst-ops-h{grid-column:1 / -1}
  .cst-ops:has(> .cst-opw) > .cst-opw{grid-column:2;grid-row:2 / -1;margin-top:0;gap:.85rem}
  .cst-ops:has(> .cst-opw) .cst-ops-res{flex:1 1 100%}
  .cst-ops:has(> .cst-opw) .cst-ops-d{flex:1 1 100%}
  /* Con las dos mitades prendidas (las nuestras y las del espejo) los dos
     resumenes van uno abajo del otro en la columna: una linea fina los separa,
     que si no el segundo numero se pega al pie del primero. */
  .cst-ops:has(> .cst-opw) > .cst-ops-p + .cst-ops-in{margin-top:1.25rem;padding-top:1.25rem;
    border-top:1px solid var(--linea)}
  .cst-ops:has(> .cst-opw) .cst-opw-i,
  .cst-ops:has(> .cst-opw) .cst-opw-i:first-child{padding:1rem 1.15rem 1.1rem;border-top:0;
    border-radius:var(--r-m);background:var(--sup);
    box-shadow:0 1px 2px color-mix(in srgb,var(--negro) 5%,transparent),
               0 8px 22px color-mix(in srgb,var(--acento) 30%,transparent)}
}


/* VP-28 · cantidad. Es un <input type="number"> de verdad: anda sin JavaScript,
   el teclado del celular sale numérico y el lector de pantalla lo anuncia como
   campo. Los −/+ son de 44 px (AC-14). */
.cst-qty{display:flex;align-items:center;flex:none;overflow:hidden;
  background:var(--sup);border:1px solid var(--line);border-radius:99px}
.cst-qty-b{width:2.75rem;height:2.75rem;display:grid;place-items:center;flex:none;
  padding:0;border:0;background:none;cursor:pointer;color:var(--ink2);font-size:.95rem;
  transition:background .2s var(--ease),color .2s var(--ease)}
@media (hover:hover) and (pointer:fine){
  .cst-qty-b:hover:enabled{background:var(--fondo2);color:var(--ink)}
}
.cst-qty-b:disabled{opacity:.3;cursor:default}
/* El anillo va HACIA ADENTRO: la pastilla recorta (overflow:hidden) y un
   outline-offset positivo se comería el foco (AC-05). */
.cst-qty-b:focus-visible{outline:2px solid var(--acento-txt);outline-offset:-4px;border-radius:99px}
/* 2,85rem = 45,6 px: con 2,6rem el campo medía 42 y se quedaba a 2 px de AC-14. */
/* ⚠️ 16 px DE PISO, NO .95rem (=15,2). Por 0,8 px Safari hacía zoom al tocar la
   cantidad y la ficha quedaba corrida — el «salta la pantalla» de Diego. Los
   45,6 px de ancho aguantan «99» en 16 px de sobra. */
.cst-qty-v{width:2.85rem;height:2.75rem;padding:0;border:0;background:none;
  text-align:center;color:var(--ink);font-family:var(--f);font-size:max(16px,1rem);
  font-weight:800;font-variant-numeric:tabular-nums;
  -moz-appearance:textfield;appearance:textfield}
.cst-qty-v::-webkit-outer-spin-button,
.cst-qty-v::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.cst-qty-v:focus-visible{outline:2px solid var(--acento-txt);outline-offset:-3px}

.cst-f-b{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:2.75rem;padding:.8rem 1.25rem;border:0;border-radius:99px;cursor:pointer;
  font-family:var(--f);font-size:.9rem;font-weight:800;letter-spacing:-.01em;
  text-decoration:none;white-space:nowrap;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
@media (hover:hover) and (pointer:fine){
  .cst-f-b:hover{transform:translateY(-3px)}
}
.cst-f-b:active{transform:scale(.98)}
/* Es LA acción de la pantalla: se queda con todo el ancho que sobra.
   🔵 VP-64 · azul, no negro. Es el MISMO botón que el de la card («Agregar»),
   así que tiene que ser el mismo color: dos azules distintos para la misma
   acción, o uno azul y otro negro, se lee como dos cosas distintas. */
.cst-f-add{flex:1 1 12rem;background:var(--marca);color:var(--marca-txt);
  box-shadow:0 10px 26px color-mix(in srgb,var(--marca) 32%,transparent)}
@media (hover:hover) and (pointer:fine){
  .cst-f-add:hover{box-shadow:0 18px 38px color-mix(in srgb,var(--marca) 42%,transparent)}
}
.cst-f-add:disabled{opacity:.42;box-shadow:none;transform:none;cursor:default}
/* ═══ 🔴 06-10 · LA FILA DE COMPRA SE PARTE EN DOS, Y HAY QUE DECIDIRLO ══════
   Medido en Chrome barriendo el ancho de a 2 px de 320 a 900, preguntando el
   innerWidth en cada paso: la fila entra entera hasta 406 px y SE PARTE de 404
   para abajo. O sea que se parte en los telefonos —390, 393, 384, 375, 360— y
   no se parte en ninguna otra pantalla.

   🔴 Y NO ES EL TEXTO. El boton lleva white-space nowrap, asi que su palabra no
   se corta nunca: 1 renglon en los 17 anchos medidos. Tampoco es el icono
   (14,39 px) ni el hueco (9,6 px). Es la ARITMETICA del renglon: la cantidad
   mide 135,59 px fijos y el boton pide un flex-basis de 12 rem = 192 px, o sea
   337,19 px contra una caja de 322,81 a 390. Faltan 14,38 px. Y no alcanza con
   bajarle el basis: el piso real del boton —su contenido con el padding— es
   187 px, asi que aun en el minimo faltarian 9,38. A 390 NO ENTRAN, punto.

   ⭐ POR ESO EL ARREGLO NO PELEA LA ARITMETICA: la acepta y la ORDENA. Lo que
   se veia mal no era que hubiera dos renglones —un boton de comprar a todo lo
   ancho abajo de la cantidad es lo normal en un telefono— sino que la cantidad
   quedaba sola con 187,22 px de hueco muerto al lado, mas de la mitad del
   renglon vacia. Con flex 1 1 100 % la cantidad se queda con su renglon entero
   y el hueco pasa a 0.

   ⚠️ EL CORTE ES EL MEDIDO, NO UN NUMERO REDONDO: 25,25 rem = 404 px es el
   ultimo ancho en el que la fila YA se partia sola. Un corte mas arriba
   forzaria una partida donde hoy no la hay, que es peor que el hueco. */
@media (max-width:25.25rem){
  /* ⭐ Y REPARTIDA, NO AMONTONADA A LA IZQUIERDA. Estirar la pastilla sin
     tocar el reparto mueve el hueco de afuera a ADENTRO: menos, uno y mas
     quedan apretados a la izquierda y el resto de la pastilla, vacio. Con
     space-between el menos va al borde izquierdo, el mas al derecho y el
     numero al medio — que ademas separa los dos botones y es mas dificil
     tocar el que no se queria. */
  .cst-qty{flex:1 1 100%;justify-content:space-between}
}
/* ── Contacto por WhatsApp ───────────────────────────────────────────────────
   🔴 REGLA DE DIEGO (06-09), textual: «sin botón de WhatsApp debería funcionar
   todo igual. El botón de WhatsApp es un mero contacto».

   Era un botón de acción al lado de «Agregar al carrito» y competía con él.
   NO es la forma de comprar: la forma de comprar es el carrito. Baja a link
   discreto al pie de la caja — misma forma que el link a Mercado Libre — y su
   ausencia no deja NADA roto. */
/* ⚠️ 08-10 · SE SACARON la clase cst-wa-c, su variante de hover y su variante
   de oculto: eran tres reglas que bajaba TODO EL MUNDO y no pintaban nada. El
   link de WhatsApp lo dibuja cst-car-wa, que tiene sus propias reglas mas
   abajo, y ningun lugar del codigo que dibuja pone ya cst-wa-c. Lo unico vivo
   de esta familia es el icono, que si se usa y queda aca abajo.
   Lo mide prueba_clases_muertas.php, afirmaciones CM-5 y CM-7. */
/* El verde de la marca (#25D366) da 1,9:1 sobre blanco y no pasa ni cerca.
   12-10 noche (D5 del 130): va --wa-ico, el verde claro que todavia da 3,1:1,
   el piso de un icono; antes iba --ok, que Diego vio demasiado oscuro. */
.cst-wa-c-i{flex:none;font-size:1.05rem;color:var(--wa-ico)}

/* ── VP-35 · COMPARTIR ──────────────────────────────────────────────────────
   Hermano del link de WhatsApp y con el mismo peso: los dos son SECUNDARIOS.
   La forma de comprar sigue siendo «Agregar al carrito» y nada de lo de acá
   compite con ese halo.

   Es una pastilla de contorno —no un relleno de color— porque un bloque
   pintado al lado del precio le roba jerarquia al numero, que es lo que la
   persona vino a mirar. Al pasar el mouse sube un pelo y aparece una sombra
   de color: el lenguaje de la casa.

   NACE ESCONDIDO Y LO DESTAPA EL SCRIPT. Sin JavaScript no hay forma de
   compartir ni de copiar, asi que dibujarlo seria poner un control que no
   hace nada — que es exactamente el defecto que cazo prueba_copiar.php en el
   boton «Copiar» del pedido. Si el script no corre, la ficha queda entera y
   no falta nada.

   ⚠️ OJO AL EDITAR ESTE COMENTARIO: vive adentro del heredoc de webRCss(),
   que INTERPOLA. El signo peso seguido de una palabra, suelto aca, dispara
   «Undefined variable» en cada carga de cada pagina. Las variables PHP se
   nombran con palabras. */
.cst-sh{display:inline-flex;align-items:center;gap:.5rem;align-self:flex-start;
  min-height:2.4rem;margin-top:.1rem;padding:.35rem .95rem;
  border:1px solid var(--line);border-radius:99px;background:var(--sup);
  color:var(--ink2);font:inherit;font-size:.78rem;font-weight:700;cursor:pointer;
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease),transform .25s var(--ease)}
@media (hover:hover) and (pointer:fine){
  .cst-sh:hover{transform:translateY(-1px);
    border-color:color-mix(in srgb,var(--acento) 60%,transparent);
    box-shadow:0 6px 16px color-mix(in srgb,var(--acento) 26%,transparent)}
}
.cst-sh:focus-visible{outline:2px solid var(--acento-txt,var(--acento));outline-offset:2px}
.cst-sh-i{flex:none;font-size:1rem;color:var(--muted)}
/* Mientras dice «Link copiado» el tilde se pone verde: es la MISMA señal que
   usa toda la tienda para «salio bien», y --ok ya esta medido en 5,13:1. */
.cst-sh-ok .cst-sh-i{color:var(--ok)}
/* Regla 3 de 02_DISENO §11: el que define su display define su [hidden]. */
.cst-sh[hidden]{display:none!important}
/* ── ⭐ 08-10 · EN EL TELÉFONO, SÓLO EL ÍCONO — Y ES UNA MEDICIÓN ───────────
   Con el botón arriba, a 390 px la fila del título mide 230 px de opiniones más
   120 de «Compartir»: 350 contra una columna de 358, así que con el hueco entre
   los dos NO entra y el botón se va a un segundo renglón. Medido: 82 px de fila
   en vez de 40. Cuarenta y dos píxeles de alto, en un teléfono, para repetir en
   palabras lo que el ícono universal de compartir ya dice.
   🔴 LA PALABRA NO SE BORRA, SE ESCONDE A LA VISTA. Con `display:none` el botón
      se quedaría SIN NOMBRE accesible —su nombre es justamente ese texto— y un
      lector de pantalla anunciaría «botón» a secas. Se usa el mismo recorte que
      `.cst-sr` en toda la tienda: queda en el árbol, lo lee el lector, y el
      JavaScript que lo cambia por «Link copiado» lo sigue encontrando (lo que
      se ve en pantalla es, además, el tilde verde de `.cst-sh-ok`).
   ⚠️ Y SE VUELVE CUADRADO CON 2,75 rem DE LADO: sin el texto, el `padding`
      lateral dejaba una pastilla de 38 px, abajo del mínimo de 44 que necesita
      un dedo. */
@media (max-width:30rem){
  .cst-sh{min-width:2.75rem;min-height:2.75rem;justify-content:center;padding:.35rem}
  .cst-sh [data-cst-sh-t]{position:absolute;width:1px;height:1px;margin:-1px;
    padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .cst-sh-i{font-size:1.15rem}
}

/* ── ENVÍO Y RETIRO (VP-33) ────────────────────────────────────────────────
   🔴 HOY VA DESCONECTADO. El lugar existe y se ve; el cotizador se enchufa en
   la Etapa 5 (Rapiboy + la card de Envíos del panel). Ver el PHP.

   Es SECUNDARIO a propósito: línea fina, cero halo. El halo está reservado para
   lo que manda —la caja de compra— y si todo flota, no flota nada.

   ⚠️ Las filas NO llevan fondo `--fondo`: `--muted` sobre `#f1f5fa` da 4,33:1 y
   NO pasa AA en texto chico (está medido en la cabecera de este archivo). Sobre
   la superficie blanca da 4,74:1 y sí. Por eso se separan con una línea, no con
   un relleno — que además es un elemento menos. */
/* ── VP-73 · SIN RELLENO DE COLOR ──────────────────────────────────────────
   Diego (07-09): «el color de fondo de calcular envío no me cierra para nada.
   Más profesional». El encabezado del bloque tenía la barra en --fondo2
   (#e4ecf5), o sea el mismo celeste pastel que ya había marcado como el que no
   le gusta, y encima era el ÚNICO relleno de color de toda la ficha: se leía
   como un cartel pegado, no como parte de la pantalla.
   Ahora recibe el mismo trato que el resto de las cards: superficie, una línea
   fina y una sombra suave. El color pesa por la sombra, no por el relleno —que
   es la regla de la casa. */
.cst-env{margin-top:.9rem;background:var(--sup);
  border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden;
  box-shadow:var(--sh-1)}
.cst-env-h{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;
  padding:.5rem .6rem;border-bottom:1px solid var(--line2);
  font-size:.8rem;font-weight:700;color:var(--ink)}
/* La pastilla «PRONTO» se queda —Diego la dejó explícitamente: «eso SÍ hay que
   decirlo, una vez»—, pero en gris. Era el segundo celeste de la misma esquina
   y, sacado el fondo, un chip azul ahí arriba volvía a ser el único color.
   Tinta --ink2 sobre el tinte gris: 8,4:1 en claro, 9,1:1 en oscuro. */
.cst-env-pronto{flex:none;padding:.26rem .55rem;border-radius:99px;
  font-size:.64rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink2);background:color-mix(in srgb,var(--muted) 16%,var(--sup))}
/* Con el cotizador vivo el campo viaja adentro de un <form> de verdad, para que
   ande sin JavaScript. `display:flex` y no `contents`: con `contents` el <form>
   desaparece del árbol de accesibilidad en varios navegadores. */
.cst-env-f{display:flex;flex:none;gap:.4rem;margin-left:auto}
/* ⚠️ 16 px de piso, igual que los otros dos campos. Hoy va `disabled` y no puede
   recibir el foco, así que el zoom todavía no se dispara — pero el día que la
   Etapa 5 lo encienda se dispararía, y nadie se acordaría de por qué. */
/* 9,5rem y no 8: con la letra en 16 px el «Código postal» del placeholder ya no
   entraba en 128 px y salía cortado en «Código posta». El ancho acompaña al
   piso de 16 px, no al revés.
   🔴🔴 27-09 · ESTE COMENTARIO SE QUEDÓ SOLO, Y EL BUG QUE DESCRIBE VOLVIÓ.
      El valor decía `7.5rem` = 120 px, o sea MENOS que los 128 que el propio
      comentario dice que no alcanzaban. Con el padding y los bordes quedaban
      ~102 px de texto para un placeholder que mide ~112, así que la ficha
      mostraba «Código posta» — exactamente el sintoma que esta nota nombra.
      Las dos cosas pasaron en el MISMO commit (68517a7): se bajó el ancho y se
      dejó la explicación de por qué no se podía bajar.
   ⚠️ Y no se vio en ninguna prueba porque ninguna MIRABA la ficha dibujada:
      lo encontré sacándole una foto a la pantalla del comprador. Ahora hay una
      afirmación que ata el ancho al texto (`prueba_entrega.php`), así que el
      día que alguien lo vuelva a bajar se pone roja sola.
   ⚠️ Si algún día se acorta el placeholder, el ancho puede bajar — pero la
      cuenta se rehace, no se adivina: el piso es el TEXTO, no el número. */
.cst-env-cp{flex:none;width:9.5rem;min-height:2.5rem;margin-left:auto;padding:.4rem .6rem;
  box-sizing:border-box;
  border:1px solid var(--line);border-radius:.7rem;background:var(--sup);color:var(--ink);
  font-family:var(--f);font-size:max(16px,1rem);font-weight:700;font-variant-numeric:tabular-nums}
.cst-env-cp::placeholder{color:var(--muted);font-weight:600}
.cst-env-cp:focus-visible{outline:2px solid var(--acento-txt);outline-offset:2px}
/* 🔴 Adentro del <form> el `margin-left:auto` lo empuja contra el botón y le
   come el hueco: el que separa del título es el `margin-left:auto` del FORM.
   Dos `auto` en fila son un `auto` de más — y era el bug de espaciado clásico
   de este proyecto: la regla existe, se ve en el código y la cancela otra. */
.cst-env-f .cst-env-cp{margin-left:0}
/* ── VP-56b · el botón de calcular ─────────────────────────────────────────
   Mismo objeto que el del carrito (`.cst-car-env-b`): cuadrado de 44 px con la
   flecha en SVG. No dice «Calcular» con letras a propósito — al lado de un
   campo que ya dice «Código postal», la palabra es un elemento más para decir
   lo que la flecha ya dice. El nombre lo lleva el `aria-label`. */
/* 🔴 EL COMENTARIO DE ARRIBA DICE 44 px Y LA REGLA DECIA 40, Y GANABA LA
   REGLA. Medido el 02-10 a 390: el toque caia en 41x41. Es el boton del codigo
   postal —un paso del camino de compra, en la ficha y en el carrito— asi que
   no es un detalle de adorno.
   ⭐ Se agranda lo que se TOCA y no lo que se DIBUJA: el cuadrado sigue
   midiendo 2,5rem al lado de un campo de 40 px de alto, que es como se voto, y
   el ::after invisible le da los 44 de AC-14. Es el mismo recurso que usan el
   boton de la lupa y los puntos de color. */
.cst-env-go{position:relative;flex:none;width:2.5rem;height:2.5rem;display:grid;place-items:center;
  padding:0;border:1px solid var(--line);border-radius:.7rem;cursor:pointer;
  background:var(--sup);color:var(--ink2);font-size:.95rem;
  transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease)}
@media (hover:hover) and (pointer:fine){
  .cst-env-go:hover{background:var(--fondo2);color:var(--ink);
    border-color:color-mix(in srgb,var(--acento) 60%,transparent)}
}
.cst-env-go::after{content:'';position:absolute;top:50%;left:50%;width:44px;height:44px;
  transform:translate(-50%,-50%)}
.cst-env-go:focus-visible{outline-offset:2px;border-radius:.7rem}
/* ── 🔴 CA-21 · EL ROJO, Y SÓLO PARA EL DATO QUE FALTA ─────────────────────
   Va pegado al campo y arriba de las opciones, porque habla DEL CAMPO. Nunca
   se usa para «no tenemos tarifa para ese CP»: eso es un resultado y vive
   abajo, en gris. --bad sobre --sup da 5,4:1 en claro y 7,1:1 en oscuro. */
.cst-env-err{display:flex;align-items:flex-start;gap:.45rem;margin:0;
  padding:.6rem .85rem;border-bottom:1px solid var(--line2);
  font-size:.78rem;font-weight:700;line-height:1.5;color:var(--bad)}
.cst-env-err-i{flex:none;margin-top:.15em;font-size:.95rem}
/* ── 12-10 · C2 · «Usamos el CP de tu dirección (1425)» ─────────────────────
   Pegado al campo, chico y sin fondo: el dato ya está en el campo, esto sólo
   dice de dónde salió. --ink2 sobre --sup da 9,7:1; el ícono va en --marca. */
.cst-env-cu{display:flex;align-items:center;gap:.35rem;margin:0;
  padding:.4rem .6rem;border-bottom:1px solid var(--line2);
  font-size:.75rem;font-weight:600;line-height:1.4;color:var(--ink2)}
.cst-env-cu[hidden]{display:none}
.cst-env-cu b{font-weight:800;color:var(--ink)}
.cst-env-cu-i{flex:none;font-size:.9rem;color:var(--marca)}
.cst-car-r .cst-env-cu{padding-left:0;padding-right:0}
.cst-env-cp[aria-invalid="true"]{border-color:var(--bad);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--bad) 18%,transparent)}
/* Apagado: raya cortada + tinta legible. Un campo gris ilegible se lee «roto»;
   uno punteado se lee «todavía no». (Y --ink2 sobre --fondo da 9:1, no 4,33.) */
.cst-env-cp:disabled{border-style:dashed;background:var(--fondo);color:var(--ink2);cursor:not-allowed}
.cst-env-cp:disabled::placeholder{color:var(--ink2);opacity:1}
/* ══ LAS OPCIONES DE ENTREGA — FILAS DE VERDAD SELECCIONABLES ══════════════
   🔻 `.cst-env-b` y `.cst-env-o` eran RENGLONES INFORMATIVOS: se dibujaron en
   `VP-56` cuando no había cotizador y su trabajo era decir «enviamos a todo el
   país» sin prometer nada. Cuando `VP-56b` les enchufó el motor empezaron a
   mostrar precios, y ahí pasaron a leerse como opciones — Diego, 07-09: «la
   opción de retiro no se puede ni tildar… es confuso». Tenía razón: un renglón
   que dice «Retiro en Palermo · Gratis» y no se toca es un botón roto.

   Ahora cada fila es un `<label>` con su `<input type="radio">` adentro, así
   que **el área de toque es la fila entera** — muy por encima de los 44 px de
   `AC-14` y sin depender de acertarle a un círculo de 14 px. */
/* 🔻 MÁS CHICO. Diego, 07-09: «es muy grande el apartado para poner el código».
   En un resumen de carrito, el paso de elegir entrega no puede ocupar más que
   el Total. Se le sacó aire por todos lados —gaps, padding, altura de fila— sin
   tocar los 44 px de área de toque que pide `AC-14`. */
.cst-env-ops{display:flex;flex-direction:column;gap:.3rem;padding:.4rem .45rem .5rem}
/* ⏳ El esqueleto de «calculando». Es una fila de verdad —mismo alto, mismo
   ícono, mismo nombre— con el precio en espera: así el bloque no salta de alto
   cuando llega la respuesta, se COMPLETA. Latido lento y apagado: un esqueleto
   que parpadea fuerte se lee como un error. */
.cst-env-sk .cst-env-o{cursor:default}
.cst-env-sk .cst-env-fila{opacity:.75}
.cst-env-sk .cst-env-tick{border-style:dashed}
.cst-env-sk-p{width:4.5rem;height:.85rem;border-radius:.35rem;
  background:color-mix(in srgb,var(--muted) 24%,transparent);
  animation:cst-env-lat 1.4s var(--ease) infinite}
@keyframes cst-env-lat{0%,100%{opacity:.45}50%{opacity:.9}}
/* 🔴 Con el movimiento reducido, NADA parpadea: el latido se apaga y queda la
   barra quieta. Sigue diciendo «esto todavía no está» sin marear a nadie. */
@media (prefers-reduced-motion:reduce){
  .cst-env-sk-p{animation:none}
}
/* Mientras se calcula, el bloque baja un poco y el botón no se puede volver a
   tocar: dos toques seguidos son dos llamadas a Rapiboy por el mismo dato. */
[data-cst-env-cargando] .cst-env-go{opacity:.55;pointer-events:none}
[data-cst-env-cargando] .cst-env-cp{opacity:.7}
.cst-env-o{display:block;position:relative;margin:0;cursor:pointer}
/* El radio no se esconde con `display:none` —eso lo saca del orden de tabulación
   y del lector de pantalla—: se hace transparente y se estira sobre la fila. */
.cst-env-r{position:absolute;inset:0;width:100%;height:100%;margin:0;
  opacity:0;cursor:pointer;appearance:none;-webkit-appearance:none}
.cst-env-fila{display:flex;align-items:center;gap:.5rem;min-height:2.75rem;
  padding:.4rem .6rem;border-radius:var(--r-s);background:var(--sup);
  border:1px solid var(--line);
  transition:box-shadow .25s var(--ease),border-color .25s var(--ease),
             transform .25s var(--ease)}
@media (hover:hover) and (pointer:fine){
  .cst-env-o:hover .cst-env-fila{transform:translateY(-1px);
    border-color:color-mix(in srgb,var(--acento) 65%,transparent)}
}
/* ⭐ LA ELEGIDA SE VE ELEGIDA — Y CON EL LENGUAJE DE LA CASA: sombra de color
   difusa y el número en el tono del área. 🔴 NUNCA una barra al costado: la
   regla de Diego es «sombra de color, no `border-left`», y el halo celeste en
   los bordes es lo único que rescató de una pantalla que rechazó entera. */
.cst-env-r:checked + .cst-env-fila{
  --tono:var(--acento); --tono-fuerte:var(--marca); --tono-fuerte-txt:var(--marca-txt);
  border-color:color-mix(in srgb,var(--tono) 85%,transparent);
  box-shadow:0 2px 8px color-mix(in srgb,var(--tono) 30%,transparent),
             0 12px 28px color-mix(in srgb,var(--tono) 46%,transparent)}
/* 🔴 LA SOMBRA DEL RETIRO ES VERDE, NO AZUL. Diego, 07-09: «la sombra del retiro
   debe ser verde, no azul».
   Y es coherente con lo de abajo: en esa fila **el verde ya es el color del
   dato** —«Gratis» y el pin—, así que envolverla en un halo azul la parte en
   dos ideas. La sombra de color es cómo esta casa dice «esto está elegido»; que
   sea del tono de la fila hace que la fila entera se lea como una sola cosa.
   Se resuelve moviendo UNA variable, no duplicando la regla: si mañana cambia
   la forma de la sombra, cambia en un solo lugar para las dos filas. */
.cst-env-r:checked + .cst-env-fila:has(.cst-env-fr){--tono:var(--ok);
  --tono-fuerte:var(--ok); --tono-fuerte-txt:var(--ok-txt)}
/* 🔴 EL PRECIO SE REPINTA AL ELEGIR — PERO «GRATIS» NO.
   Diego, 07-09: «que el "Gratis" se mantenga en verde y no cambie». Y el
   criterio vale para todo el sitio: **el verde ahí significa "no te cuesta
   nada", que es un hecho del ENVÍO, no del estado del control**. Un dato que
   cambia de color según lo que tengas tildado se lee como que el dato cambió.
   Lo que dice «elegida» son el tilde, el borde y la sombra — no repintar el
   número. Por eso el `:not(.cst-env-fr)`. */
.cst-env-r:checked + .cst-env-fila .cst-env-p:not(.cst-env-fr){color:var(--acento-txt)}
.cst-env-r:focus-visible + .cst-env-fila{outline:2px solid var(--acento-txt);outline-offset:2px}
/* El tilde. Vacío es un círculo de línea; elegido, el azul de marca con el
   check adentro — SVG, nunca un carácter suelto. */
.cst-env-tick{flex:none;width:1.15rem;height:1.15rem;display:grid;place-items:center;
  border-radius:50%;border:1.5px solid var(--line);background:var(--sup);
  color:transparent;font-size:.62rem;
  transition:background .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease)}
/* 🔴 EL TILDE TAMBIÉN SE TIÑE. Diego, 07-09: «el botón de seleccionado también
   en verde». Mismo criterio que la sombra: en la fila del retiro el verde ya es
   el color del dato, y un tilde azul adentro de un halo verde vuelve a partir la
   fila en dos ideas. Se resuelve con las mismas variables — el default sigue
   siendo el azul de marca, así que el envío no cambia. */
.cst-env-r:checked + .cst-env-fila .cst-env-tick{background:var(--tono-fuerte);
  border-color:var(--tono-fuerte);color:var(--tono-fuerte-txt)}
.cst-env-ico{flex:none;font-size:1.05rem;color:var(--acento-txt)}
.cst-env-t{min-width:0;flex:1 1 auto;font-size:.82rem;font-weight:700;line-height:1.4;color:var(--ink)}
.cst-env-d{display:block;font-size:.76rem;font-weight:500;color:var(--muted);
  overflow-wrap:break-word}
/* 🔴 `tabular-nums` (viene de `.cst-num`) + `margin-left:auto`: los precios de
   dos filas distintas tienen que alinearse por la derecha y no bailar según
   cuántos dígitos tenga cada uno. */
.cst-env-p{flex:none;margin-left:auto;font-size:.86rem;font-weight:800;color:var(--ink);
  font-variant-numeric:tabular-nums;letter-spacing:-.01em}
/* ⭐ Y EL VERDE SALE DEL TOKEN, en los dos temas: `--ok` es #0b7d5a en claro
   (5,0:1 sobre la superficie blanca, AA) y #4cc79c en oscuro. Un verde escrito
   a mano queda apagado en uno de los dos y no hay forma de que se note hasta
   que alguien mira la pantalla equivocada. */
.cst-env-fr{color:var(--ok)}
/* El pin de la fila del retiro, del MISMO verde que su «Gratis»: así la fila
   se lee como una sola idea —«esto no te cuesta nada»— y no como un ícono azul
   al lado de un precio verde. Diego: «lo mismo el logo de mapas verde también».
   `:has()` con respaldo: donde no esté, el pin queda en el azul de siempre, que
   es el estado de antes y no rompe nada. */
.cst-env-fila:has(.cst-env-fr) .cst-env-ico{color:var(--ok)}
/* «A confirmar» no es un precio: no va en tinta de precio ni en tabular. */
/* «Se calcula al finalizar» ocupa el lugar del precio pero NO es un precio: sin
   tabular, más chico, tinta tenue y con permiso para cortar en dos renglones —
   a 390 px no entra de una y estirar la fila es mejor que desbordarla. */
.cst-env-nn{max-width:7.5rem;font-size:.7rem;font-weight:700;color:var(--muted);
  letter-spacing:0;line-height:1.3;text-align:right;font-variant-numeric:normal}
.cst-env-n{display:flex;align-items:flex-start;gap:.45rem;margin:0;
  padding:.5rem .6rem .6rem;border-top:1px solid var(--line2);
  font-size:.74rem;line-height:1.5;color:var(--muted)}
.cst-env-n-i{flex:none;margin-top:.2em;font-size:.95rem;color:var(--acento-txt)}
/* `.cst-env-a` se borró con el párrafo que lo contenía (VP-73): era el link a
   WhatsApp de la nota de «todavía no». */
/* En celular el campo no entra al lado del título y se baja solo. Pegado a la
   derecha en su propia fila queda huérfano; a lo ancho se lee como lo que es,
   un campo de formulario. */
@media (max-width:35rem){
  .cst-env-f{width:100%;margin-left:0}
  .cst-env-cp{width:100%;margin-left:0}
  /* 🔴 `min-width:0` en el campo: dentro de un flex, el ancho mínimo de un
     <input> es su `size` (≈20 caracteres), no su `width`. Sin esto el campo se
     niega a achicarse, el botón lo empuja y la fila se pasa de los 390 px —
     que es el desborde horizontal que ya llegó a producción una vez. */
  .cst-env-f .cst-env-cp{flex:1 1 auto;width:auto;min-width:0}
}

/* `.cst-f-ml` (el link «Verlo en Mercado Libre») se BORRÓ con VP-75. El motivo
   está en el PHP de la ficha, donde estaba el botón: mandar a ML a alguien que
   ya está en nuestra tienda es regalarle ~13 % a un tercero. */

/* ── VP-66 · «OTROS COLORES»: LA FOTO Y LA PALABRA, NO EL NOMBRE ────────────
   Diego (06-09), viéndolo andar por primera vez, textual: «Otros colores
   debería estar más arriba, de envíos; sin el texto: la foto del producto y
   variante de color».

   Era una pastilla con un puntito de 32 px y el NOMBRE ENTERO al lado. Y los
   nombres de una familia son casi el mismo: «X2 Micrófono Corbatero
   Inalámbrico - Receptor Usb-c Y Adaptador Lightning - Color Negro» contra
   «… - Color Rosa». Son 70 caracteres para llegar a la única palabra que
   cambia, dos veces, una debajo de la otra. Una foto de un micrófono rosa se
   entiende sin leer nada.

   Ahora es una FOTO cuadrada del producto con la etiqueta corta abajo
   («Negro», «Rosa»). Misma bandeja blanca y mismo `multiply` que la galería y
   la card: es el mismo producto, se muestra igual en todos lados.

   El que se está mirando queda marcado con el aro y el halo celestes — el
   mismo lenguaje que la miniatura elegida de la galería, tres cm más arriba.
   Sin barra al costado: el color lo pone la sombra. */
.cst-herm{margin-top:1.5rem}
.cst-herm-t{margin:0 0 .6rem;font-size:.6875rem;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted)}
.cst-herm-l{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:.6rem}
/* Toda la baldosa es el área de toque: 4,5rem de ancho por ~6rem de alto, muy
   por encima de los 44×44 de AC-14 sin necesidad de un solo px de relleno. */
.cst-herm-a{display:flex;flex-direction:column;align-items:center;gap:.3rem;width:4.5rem;
  padding:.3rem .3rem .45rem;border-radius:var(--r-s);text-decoration:none;
  background:var(--sup);border:1px solid var(--line);color:var(--ink2);
  box-shadow:0 4px 14px color-mix(in srgb,var(--acento) 22%,transparent);
  transition:transform .3s var(--ease),border-color .3s var(--ease),
             box-shadow .3s var(--ease),color .3s var(--ease)}
@media (hover:hover) and (pointer:fine){
  .cst-herm-a:hover{transform:translateY(-3px);color:var(--ink);
    border-color:color-mix(in srgb,var(--acento) 65%,transparent);
    box-shadow:0 12px 28px color-mix(in srgb,var(--acento) 42%,transparent)}
}
.cst-herm-a[aria-current="page"]{color:var(--ink);border-color:var(--acento);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--acento-txt) 50%,transparent),
             0 6px 16px color-mix(in srgb,var(--acento) 45%,transparent)}
/* La bandeja de la miniatura. `aspect-ratio` y no un alto fijo: así acompaña si
   alguien cambia el ancho de la baldosa y no hay dos números que mantener. */
.cst-herm-f{position:relative;width:100%;aspect-ratio:1/1;overflow:hidden;
  border-radius:calc(var(--r-s) - .25rem);background:var(--tile)}
.cst-herm-f img{position:absolute;inset:6%;width:88%;height:88%;display:block;
  object-fit:contain;mix-blend-mode:multiply}
/* Sin foto: el color pelado, que sigue diciendo algo. Nunca un hueco roto. */
.cst-herm-p{position:relative;width:100%;aspect-ratio:1/1;display:block;
  border-radius:calc(var(--r-s) - .25rem);background:var(--fondo2);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--segundo) 60%,transparent)}
/* La etiqueta corta. Un color largo («Azul petróleo») se corta con puntos: el
   nombre completo lo dice el `alt` de la foto y lo escucha el lector. */
.cst-herm-e{max-width:100%;font-size:.72rem;font-weight:700;line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* VP-31 · acordeones. <details>/<summary> de verdad: abren y cierran sin una
   línea de JavaScript y el lector de pantalla ya sabe leerlos (AC-07). */
.cst-acc-w{margin-top:1.7rem;border-top:1px solid var(--line)}
.cst-acc{border-bottom:1px solid var(--line)}
/* 🔴 10-10 · EL PARPADEO GRIS QUE VIO DIEGO (iPhone 17 Pro, 402×874). Los tres
   acordeones de la ficha son `<summary>` de verdad — es lo que los hace andar
   sin una línea de JavaScript— pero un `<summary>` ES un control nativo, y
   WebKit/Blink le pintan SOLOS una superposición translúcida al tocarlo (el
   «tap highlight») salvo que se la apague. Es la MISMA causa que ya se
   resolvió acá mismo para el botón de cantidad (`.cst-fqs-p`, más arriba en
   esta hoja): el control estaba bien armado y el gris no vivía en ninguna
   regla de color de esta casa — lo pintaba el navegador por su cuenta. */
.cst-acc-s{display:flex;align-items:center;gap:.6rem;min-height:3.25rem;
  padding:.85rem .15rem;cursor:pointer;list-style:none;
  font-size:.9rem;font-weight:700;color:var(--ink);-webkit-tap-highlight-color:transparent}
.cst-acc-s::-webkit-details-marker{display:none}
.cst-acc-s::marker{content:''}
.cst-acc-s:focus-visible{outline:2px solid var(--acento-txt);outline-offset:-2px}
.cst-acc-cv{margin-left:auto;flex:none;color:var(--muted);transition:transform .3s var(--ease)}
.cst-acc[open] .cst-acc-s .cst-acc-cv{transform:rotate(90deg)}
.cst-acc-c{padding:0 .15rem 1.25rem;font-size:.875rem;line-height:1.72;color:var(--ink2)}
/* Clase propia en cada <p>: en este archivo NO se estilan etiquetas (02_DISENO
   §11) — un `.cst-acc-c p` le ganaría a cualquier clase que venga después. */
.cst-acc-p{margin:0 0 .85rem;overflow-wrap:break-word}
.cst-acc-p:last-child{margin-bottom:0}
.cst-specs{margin:0;padding:0;display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(1rem,3vw,2.25rem)}
@media (max-width:35rem){.cst-specs{grid-template-columns:minmax(0,1fr)}}
.cst-spec{display:flex;align-items:baseline;justify-content:space-between;gap:.75rem;
  min-width:0;padding:.7rem 0;border-bottom:1px solid var(--line2)}
.cst-spec-k{flex:none;font-size:.8rem;color:var(--muted)}
.cst-spec-v{margin:0;min-width:0;font-size:.8rem;font-weight:700;color:var(--ink);
  text-align:right;overflow-wrap:break-word}
/* SKY-FICHA2 . LAS CARACTERISTICAS comparten la reja de las especificaciones y
   cambian lo unico que las diferencia: aca el valor es TEXTO, no un numero.
   Por eso no va alineado a la derecha ni lleva cst-num, y la reja arranca en
   UNA columna: un par de cuatro palabras partido en dos columnas angostas se
   lee peor que uno debajo del otro. A 60rem ya hay ancho y van de a dos.
   🔴 VA DESPUES de la media query de .cst-specs A PROPOSITO: misma
      especificidad, asi que manda el orden. Puesto antes, a mas de 35rem
      ganaria la reja de dos columnas y esta clase no pintaria nada. */
.cst-cara{grid-template-columns:minmax(0,1fr)}
@media (min-width:60rem){.cst-cara{grid-template-columns:repeat(2,minmax(0,1fr))}}
.cst-cara .cst-spec-k{flex:0 1 auto}
.cst-cara .cst-spec-v{text-align:left;font-weight:600}

/* Regla 3 de 02_DISENO §11: el que define su `display` define su `[hidden]`. */
.cst-mig[hidden],.cst-f[hidden],.cst-gal[hidden],.cst-ths[hidden],.cst-th[hidden],
.cst-f-main[hidden],.cst-f-no[hidden],.cst-f-r[hidden],.cst-f-chips[hidden],
.cst-f-off[hidden],.cst-f-free[hidden],.cst-herm[hidden],.cst-herm-e[hidden],.cst-add-t[hidden],
.cst-f-chip[hidden],.cst-f-pz[hidden],.cst-f-cuo[hidden],.cst-f-cuos[hidden],
.cst-f-cuoc[hidden],.cst-f-buy[hidden],.cst-qty[hidden],.cst-qty-b[hidden],
.cst-f-b[hidden],.cst-f-st[hidden],.cst-herm-l[hidden],
.cst-herm-a[hidden],.cst-acc-s[hidden],.cst-specs[hidden],.cst-spec[hidden],
.cst-f-vid[hidden],.cst-f-main img[hidden],.cst-f-snd[hidden],.cst-th-seg[hidden],
.cst-mig-a[hidden],.cst-mig-h[hidden],.cst-env[hidden],.cst-env-h[hidden],
.cst-env-b[hidden],.cst-env-o[hidden],.cst-env-n[hidden],.cst-env-cp[hidden],
.cst-env-err[hidden],.cst-env-go[hidden],.cst-env-ops[hidden],.cst-env-o[hidden],
.cst-env-sk[hidden],
.cst-env-pronto[hidden]{display:none!important}

/* ── «Lo agregamos» (VP-34) ──────────────────────────────────────────────────
   Vuelve del POST con `ok=1`. Sin este cartel, el que aprieta «Agregar» no sabe
   si pasó algo: el carrito está en otra página y la ficha se ve igual que antes.
   Verde y corto — es una confirmación, no una alarma. */
.cst-ok{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;
  margin:1rem 0 0;padding:.75rem .5rem .75rem .95rem;border-radius:var(--r-m);
  background:color-mix(in srgb,var(--ok) 13%,var(--sup));
  font-size:.84rem;font-weight:700;color:var(--ink)}
.cst-ok-i{flex:none;font-size:1.05rem;color:var(--ok)}
.cst-ok-a{display:inline-flex;align-items:center;gap:.35rem;margin-left:auto;
  min-height:2.75rem;padding:0 .8rem;border-radius:99px;
  background:var(--sup);color:var(--acento-txt);text-decoration:none;
  font-size:.8rem;font-weight:800;
  box-shadow:0 3px 10px color-mix(in srgb,var(--acento) 28%,transparent);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
@media (hover:hover) and (pointer:fine){
  .cst-ok-a:hover{transform:translateY(-2px);
    box-shadow:0 10px 22px color-mix(in srgb,var(--acento) 42%,transparent)}
}
.cst-ok[hidden],.cst-ok-a[hidden]{display:none!important}

/* ═══ CARRITO (CA-03 · CA-07 · CA-11 · CA-12 · CA-13) ════════════════════════
   Anda SIN JavaScript: cada acción es un <form method="post">. Por eso el
   selector de cantidad son TRES formularios que se ven como una sola pastilla
   (ver el PHP) — con un solo form, el `qty` del campo y el `qty` del botón
   viajan los dos y gana el que el servidor elija. Con plata de por medio, eso
   no se deja librado a la suerte.

   Misma jerarquía que la ficha: el RESUMEN flota con halo y sin borde (es el
   total, el motivo de la pantalla), y las filas de producto son texto tranquilo
   separado por una línea. Dos objetos con peso, no diez cajitas. */
.cst-car-h{display:flex;align-items:flex-end;gap:1rem;flex-wrap:wrap;
  padding-top:clamp(1.5rem,4vw,2.5rem);margin-bottom:clamp(1rem,2.5vw,1.5rem)}

/* CA-11 · avisos. NO son un error: son cosas que ya pasaron y se resolvieron
   solas. Cero rojo, cero ícono de alarma — mismo criterio que webRenderAviso(). */
.cst-car-avs{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1.15rem}
.cst-car-av{display:flex;align-items:flex-start;gap:.6rem;margin:0;
  padding:.8rem .95rem;border-radius:var(--r-m);
  background:color-mix(in srgb,var(--acento) 16%,var(--sup));
  font-size:.84rem;line-height:1.55;color:var(--ink)}
.cst-car-av-i{flex:none;margin-top:.15em;font-size:1rem;color:var(--acento-txt)}

.cst-car{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);
  gap:clamp(1.25rem,3vw,2.5rem);align-items:start;
  padding-bottom:clamp(2rem,5vw,3.5rem)}
@media (max-width:62.5rem){.cst-car{grid-template-columns:minmax(0,1fr);gap:1.5rem}}
.cst-car-l{min-width:0}
/* ⭐ VOTO-04 · EL CARRITO A CARDS (aprobado por Diego «en PC», con dos
   correcciones — ver abajo). Misma firma que el cajón (CA-18) y que la
   grilla: sombra DE COLOR, nunca `border-left`, separadas por AIRE. El
   `gap` del `<ul>` reemplaza al `border-bottom` que tenía cada fila — un
   solo lugar decide la separación, y no queda ninguna línea divisoria. */
.cst-car-ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:.85rem}
/* ⭐ 14-10 · EL AVISO DEL CARRITO (web_banner, posicion «carrito»). El panel
   lo dejaba subir desde el primer dia y la tienda no lo leia nunca: Diego
   subia la imagen, el panel decia «En vivo» y en la web no aparecia. Va abajo
   de los productos, que es lo que el panel promete («abajo de los
   productos»), con la forma 32:9 que el panel le pide al subirlo y el halo de
   la casa en vez de un borde. Sin link es una imagen; con link, se toca.
   Uno solo: el panel lo declara asi (cuantos 1). */
.cst-car-aviso{margin:1rem 0 0}
.cst-car-aviso-a{display:block;overflow:hidden;border-radius:1.125rem;background:var(--sup);
  box-shadow:0 1px 2px rgba(60,69,82,.06),0 10px 26px color-mix(in srgb,var(--acento) 32%,transparent);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.cst-car-aviso-a img{display:block;width:100%;height:auto;aspect-ratio:32/9;object-fit:cover}
a.cst-car-aviso-a:focus-visible{outline:2px solid var(--acento-txt);outline-offset:3px}
@media (hover:hover) and (pointer:fine){
  a.cst-car-aviso-a:hover{transform:translateY(-2px);
    box-shadow:0 2px 4px rgba(60,69,82,.07),0 16px 34px color-mix(in srgb,var(--acento) 45%,transparent)}
}

/* Una card. En escritorio: foto · datos · cantidad · plata · quitar.
   En celular son TRES renglones — foto+datos+quitar / cantidad / plata —, y
   el porqué de que la plata baje a su propio renglón está en el comentario
   de la media query, dos bloques más abajo.
   🔴 El ✕ va SIEMPRE arriba a la derecha, lejos del −: si estuvieran pegados,
   apretar «uno menos» y borrar la línea serían el mismo gesto con 3 mm de
   diferencia. «Lo apretás y cambiás, mirá si apretás sin querer.»

   ⭐⭐ VOTO-04 · CORRECCIÓN 1 DE DIEGO — textual: «fijate de que estén
   alineados los botones para subir cantidad y los botones para bajar:
   algunos están como desfasados en columna».
   🔴 MEDIDO, no a ojo: `getBoundingClientRect().left` del «−» de cada card
   contra las demás (ver `tienda_web/pruebas/prueba_carrito_alineado.php`).
   La causa: acá las columnas «q» (cantidad) y «pz» (plata) vivían en
   `max-content`, que NO es una tabla — cada `.cst-car-it` es su PROPIO grid,
   así que `max-content` se mide card por card, no entre cards. Con «inf»
   (nombre) como única columna `1fr` A LA IZQUIERDA de «q», la card con la
   plata más ancha (un tachado, un «Ahorrás …» — justo lo que agrega la
   corrección 2) angostaba SU «inf» para hacerle lugar a SU «pz», y eso corría
   el arranque de «q» hacia la izquierda EN ESA card. Cada una alineaba sus
   botones consigo misma; entre cards, no.
   Se arregla dándole a «q» y a «pz» un ANCHO PROPIO Y FIJO — no `max-content`,
   no empujando con márgenes: con eso «inf» mide SIEMPRE lo mismo, así que «q»
   arranca siempre en el mismo píxel, tenga la card de al lado descuento o no. */
.cst-car-it{display:grid;align-items:start;gap:.55rem .9rem;
  padding:1.05rem 1.1rem;border-radius:var(--r-m);background:var(--sup);
  box-shadow:0 1px 2px rgba(60,69,82,.05),
             0 10px 24px -10px color-mix(in srgb,var(--acento) 58%,transparent);
  transition:transform .22s var(--ease),box-shadow .22s var(--ease);
  grid-template-columns:5.5rem minmax(0,1fr) 9rem 9rem 2.5rem;
  grid-template-areas:"ph inf q pz x"}
@media (hover:hover) and (pointer:fine){
  .cst-car-it:hover{transform:translateY(-2px);
    box-shadow:0 2px 6px rgba(60,69,82,.06),
               0 18px 38px -10px color-mix(in srgb,var(--acento) 76%,transparent)}
}
@media (max-width:44rem){
  /* La plata baja a SU PROPIO renglón, a todo el ancho — no comparte fila con
     la pastilla de cantidad como antes. Es la MISMA trampa de «q»/«pz» en
     `max-content`, pero en celular no hay ninguna columna `1fr` de la que
     robarle ancho a «pz» sin apretar a «q»: con la plata angosta (foto de
     4.5rem, poco margen) el tachado + «Ahorrás …» de la corrección 2 hubiera
     dejado la pastilla de cantidad recortada contra el borde. A todo el
     ancho, la plata nunca compite por espacio con la cantidad. */
  .cst-car-it{grid-template-columns:4.5rem minmax(0,1fr) 2.5rem;
    grid-template-areas:"ph inf x" "ph q q" "pz pz pz";
    row-gap:.65rem;column-gap:.7rem;padding:.95rem}
}
/* ══ ⭐ 10-10 · «DOS PRODUCTOS YA OCUPAN TODA LA PANTALLA» ═══════════════════
   Diego, sobre el carrito en el teléfono: *«está bien, es estético, pero dos
   productos ya ocupan toda la pantalla. Comprimir un poco»*. Medido a 402×874:
   las dos primeras líneas suman **472 px, el 54 % de la pantalla**, y eso es
   ANTES de la cabecera, de la promesa de entrega y del resumen con el total.
   Con dos productos no se ve el total, que es lo único que el comprador quiere
   mirar en esa pantalla.

   ✅ Se comprime el AIRE, no el dato: el relleno, los dos espacios entre filas
      y la foto. No se saca ni un renglón, ni el nombre entero, ni el tachado,
      ni «Ahorrás …», ni la pastilla de cantidad — que son las cosas por las
      que alguien mira el carrito.
   🔴 LA PASTILLA DE CANTIDAD Y LA X NO SE ACHICAN: son controles, y los
      controles de esta tienda tienen un piso de toque de 44 px que midió AC-14
      con el dedo. Comprimir una card no es hacerla más difícil de tocar. Por
      eso se tocan `padding` y `gap`, y la columna de la X sigue en 2,5rem. */
@media (max-width:30rem){
  .cst-car-it{padding:.7rem .75rem;row-gap:.45rem;column-gap:.6rem;
    grid-template-columns:3.6rem minmax(0,1fr) 2.5rem}
}
.cst-car-ph{grid-area:ph;position:relative;aspect-ratio:1/1;overflow:hidden;
  border-radius:var(--r-m);background:var(--tile);box-shadow:var(--sh-1);
  display:block}
.cst-car-ph img{position:absolute;inset:8%;width:84%;height:84%;display:block;
  object-fit:contain;mix-blend-mode:multiply}
.cst-car-ph-no{position:absolute;inset:0;display:grid;place-items:center;
  color:var(--segundo);font-size:1.6rem}
.cst-car-inf{grid-area:inf;min-width:0;display:flex;flex-direction:column;gap:.25rem}
/* El nombre entero, sin puntos suspensivos — misma regla que la card. */
.cst-car-n{margin:0;font-size:.875rem;font-weight:700;line-height:1.35;
  letter-spacing:-.01em;color:var(--ink);overflow-wrap:break-word}
.cst-car-n-a{color:inherit;text-decoration:none}
@media (hover:hover) and (pointer:fine){
  .cst-car-n-a:hover{color:var(--acento-txt)}
}
/* El bloque intocable: nombre + color. `.cst-car-sku` se borró con el renglón
   del SKU (VP-76) — la regla no quedó «por las dudas». */
.cst-car-inf-t{min-width:0;display:flex;flex-direction:column;gap:.2rem}
/* VP-71 · el color, afuera del título y en su propio renglón. El valor va en
   negrita y en la tinta fuerte: es lo que distingue esta línea de la de al
   lado, así que tiene que pesar más que la palabra «Color». */
.cst-car-col{margin:0;font-size:.75rem;font-weight:600;color:var(--muted);
  overflow-wrap:break-word}
.cst-car-col b{font-weight:800;color:var(--ink2)}
.cst-car-st{margin:0;display:flex;align-items:center;gap:.35rem;
  font-size:.72rem;font-weight:700}
.cst-car-st-low{color:var(--warn)}
.cst-car-st-nd{color:var(--muted)}

/* CA-03 · la cantidad. Tres <form> que se ven como una pastilla: los bordes de
   adentro se apagan y el conjunto queda con uno solo. */
/* 🔴 `justify-self:start` — EL HUECO DE LA CAPTURA DE DIEGO. En celular la reja
   de la fila es `"ph inf x" / "ph q pz"`, así que la pastilla cae en la columna
   `minmax(0,1fr)` y se ESTIRABA a todo el ancho que sobraba: medido, 197,5 px
   de pastilla para 133,6 px de botones. Los 63,9 px restantes eran un cacho de
   pastilla vacía a la derecha del «+», que es exactamente lo que se ve en la
   captura. Con `start` la pastilla mide lo que miden sus tres botones.
   `position:relative` es para el «Actualizar» de más abajo. */
.cst-car-q{grid-area:q;display:flex;align-items:center;align-self:center;
  justify-self:start;position:relative;
  border:1px solid var(--line);border-radius:99px;background:var(--sup);overflow:hidden}
.cst-car-qf{display:flex;margin:0}
.cst-car-qb{width:2.75rem;height:2.75rem;display:grid;place-items:center;flex:none;
  padding:0;border:0;background:none;cursor:pointer;color:var(--ink2);font-size:.95rem;
  transition:background .2s var(--ease),color .2s var(--ease)}
@media (hover:hover) and (pointer:fine){
  .cst-car-qb:hover:enabled{background:var(--fondo2);color:var(--ink)}
}
.cst-car-qb:disabled{opacity:.3;cursor:default}
/* ── VP-72 bis · CÓMO SE VE «ESTOY MANDANDO» ────────────────────────────────
   Mientras viaja el pedido se apagan los DOS BOTONES, nunca el número: el
   número es justo lo que se acaba de adelantar y lo que la persona está
   mirando para saber si la escucharon. Apagarlo era la mitad de lo «tosco»
   que marcó Diego.
   Y el borde de la pastilla se tiñe apenas: alcanza para decir «esto está
   pasando» sin mover un píxel de sitio (nada de spinners que empujen). */
.cst-car-q[aria-busy="true"]{border-color:color-mix(in srgb,var(--acento) 75%,transparent)}
.cst-car-q[aria-busy="true"] .cst-car-qb{opacity:.38}
/* El anillo va hacia ADENTRO: la pastilla recorta y un offset positivo se comería
   el foco (AC-05). */
.cst-car-qb:focus-visible{outline:2px solid var(--acento-txt);outline-offset:-4px;border-radius:99px}
/* ⚠️ Mismo piso de 16 px que .cst-qty-v, y por el mismo motivo: éste es el campo
   MÁS caro de los dos, porque el zoom saltaba con el carrito ya cargado. */
.cst-car-qv{width:2.85rem;height:2.75rem;padding:0;border:0;background:none;
  text-align:center;color:var(--ink);font-family:var(--f);font-size:max(16px,1rem);
  font-weight:800;font-variant-numeric:tabular-nums;
  -moz-appearance:textfield;appearance:textfield}
.cst-car-qv::-webkit-outer-spin-button,
.cst-car-qv::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
/* Que se VEA que se puede escribir. Sin esto el campo es idéntico a un
   número impreso —sin borde, sin fondo— y nadie intenta tocarlo: es la mitad
   del «no puedo editar escribiendo» que reportó Diego el 06-09. */
.cst-car-qv{cursor:text;border-radius:8px;transition:background .15s var(--ease),box-shadow .15s var(--ease)}
/* Mientras el cambio viaja al servidor: se opaca y no se puede volver a tocar.
   Sin esto, quien toca «+» tres veces rápido no sabe si lo escuchó. */
.cst-car-q[aria-busy="true"],.cst-car-qf[aria-busy="true"]{pointer-events:none}
@media (prefers-reduced-motion:no-preference){
  .cst-car-q,.cst-car-qf{transition:opacity .12s var(--ease)}
}
@media (hover:hover) and (pointer:fine){
  .cst-car-qv:hover{background:var(--fondo2)}
}
.cst-car-qv:focus{background:var(--fondo2);box-shadow:inset 0 -2px 0 var(--acento-txt)}
.cst-car-qv:focus-visible{outline:2px solid var(--acento-txt);outline-offset:-3px}
/* «Actualizar» del campo a mano: no ocupa lugar hasta que alguien lo tabula, y
   ahí aparece. Sin esto sería un botón invisible en el orden de tabulación, que
   es una trampa; con esto es el mismo recurso que el «Saltar al contenido». */
.cst-car-ok{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* 🔴 AL RECIBIR EL FOCO, TAPA LA PASTILLA — NO SE METE ADENTRO. Antes pasaba a
   `position:static` y entraba en la fila flex: medido, la pastilla pasaba de
   133,6 a 221,9 px de contenido dentro de una caja de 197,5 con `overflow:
   hidden`, o sea que el «+» se salía y quedaba CORTADO. Un botón de sumar que
   desaparece cuando tabulás es peor que no tener «Actualizar».
   Absoluto e `inset:0` sobre la pastilla (que ahora es `position:relative`): la
   pastilla no cambia de tamaño, nada se mueve, y se lee clarísimo — el selector
   de cantidad se convierte en «Actualizar» mientras lo tenés enfocado. */
/* 🔴 `:focus-visible` Y NO `:focus`. Con `:focus` a secas, CUALQUIER foco lo
   agranda — incluido el que cae ahí solo después de repintar la pastilla— y
   como se pone con `inset:0` y `z-index:2` queda TAPANDO el número: los clics
   le pegan al botón y el campo de cantidad deja de responder. Diego, 07-09:
   «en el carrito no deja hacer clic; si pusiste X unidades y querés cambiarlo
   escribiendo, no te deja».
   `:focus-visible` sólo matchea cuando el navegador decide que hay que mostrar
   el anillo de foco — es decir, con TECLADO. Que es justo para quien existe
   este botón: el que no puede usar el mouse. Con mouse no aparece y no molesta. */
.cst-car-ok:focus-visible{inset:0;width:auto;height:auto;clip:auto;margin:0;z-index:2;
  display:grid;place-items:center;
  padding:0 .8rem;border-radius:99px;background:var(--ink);color:var(--pag);
  font-family:var(--f);font-size:.78rem;font-weight:800;cursor:pointer}

.cst-car-pz{grid-area:pz;align-self:center;display:flex;flex-direction:column;
  align-items:flex-end;gap:.1rem;text-align:right}
@media (max-width:44rem){.cst-car-pz{align-self:center}}
.cst-car-linea{font-size:1rem;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
/* ⭐ VOTO-04 · CORRECCIÓN 2 — el tachado y el ahorro de CADA línea. Mismo
   patrón que `.cst-f-was`/`.cst-f-save` de la ficha (VP-26): el tachado se
   queda en --muted gris —dos cosas gritando al lado del precio no se leen
   ninguna de las dos (VP-64)— y el ahorro es la ÚNICA pastilla de color de
   la fila, en --ok. */
.cst-car-was{font-size:.72rem;font-weight:600;color:var(--muted);text-decoration:line-through}
.cst-car-uni{font-size:.72rem;color:var(--muted);white-space:nowrap}
.cst-car-save{display:inline-block;margin-top:.1rem;padding:.15rem .45rem;border-radius:.5rem;
  font-size:.7rem;font-weight:800;color:var(--ok);
  background:color-mix(in srgb,var(--ok) 13%,var(--sup));white-space:nowrap}

/* ══ ⭐🔴🔴 11-10 · «SIGUEN SIENDO ENORMES», Y EL GRUESO NO ERA EL RELLENO ═══
   Diego, sobre el carrito en su iPhone 17 Pro: *«cada producto en el carrito
   tampoco está arreglado, siguen siendo enormes!!!»*. Tenía razón: el intento
   del 10-10 comprimió el aire y bajó 29 px —de 472 a 443 en dos líneas—, o sea
   el 6 %. Comprimir aire era arreglar lo que NO pesaba.

   🔴 DÓNDE ESTABAN LOS PÍXELES, MEDIDO PIEZA POR PIEZA A 402×874 CON EL DEDO:
      de los 231 px de una línea, **89 eran la plata** —el 39 %—, porque se
      dibujaba en CUATRO RENGLONES APILADOS: el precio, el precio tachado, el
      «c/u» y la pastilla «Ahorrás …», uno abajo del otro, en una columna de
      346 px de ancho que quedaba vacía a los costados. El relleno de la card
      entera eran 22.

   ✅ LA PLATA SE ACUESTA: la misma columna pasa a ser una FILA que envuelve,
      apoyada en el borde derecho y alineada por la base de los números. Los
      cuatro datos caben en uno o dos renglones en vez de cuatro, y **no se va
      ni uno solo**: el precio sigue siendo el más grande, el tachado sigue
      tachado, el «c/u» sigue diciendo c/u y «Ahorrás …» sigue siendo la única
      pastilla de color de la fila. Lo que se saca son renglones vacíos, no
      datos.
   🔴 `align-items:baseline` Y NO `center`: con cuatro tamaños distintos en la
      misma fila, centrar deja los números bailando a cuatro alturas. Por la
      base se leen como un renglón de precio, que es lo que son.
   🔴 LA PASTILLA DE CANTIDAD Y LA ✕ NO SE ACHICAN, otra vez: son controles y
      tienen piso de toque de 44 px (AC-14, medido con el dedo). Comprimir una
      card no es hacerla más difícil de tocar.
   ⚠️ VA DESPUÉS DE `.cst-car-save` A PROPÓSITO. `.cst-car-pz` y sus cuatro
      hijos se declaran ARRIBA, y una media query con la misma especificidad
      que viene ANTES pierde: el override quedaría escrito, correcto y sin
      efecto. Es la colisión de cascada que este proyecto ya pagó. */
@media (max-width:30rem){
  .cst-car-pz{flex-direction:row;flex-wrap:wrap;align-items:baseline;
    justify-content:flex-end;gap:.15rem .45rem}
  /* El margen de arriba era para separarla del renglón anterior; acostada, ese
     margen la desalinea de la base de los otros tres. */
  .cst-car-save{margin-top:0;padding:.1rem .4rem}
  /* El nombre y el color, un punto más chicos: dos renglones de 17,5 px en vez
     de dos de 19. ⚠️ Desde el 12-10 el nombre se corta a DOS renglones en el
     teléfono, como en la card de la grilla (VP-63): ver el bloque de abajo,
     «el primer item esta muy grande», que dice por qué. */
  .cst-car-n{font-size:.84rem;line-height:1.3}
  .cst-car-col{font-size:.72rem}
}

/* ══ 🔴🔴 12-10 · «EL PRIMER ITEM ESTA MUY GRANDE Y EL RESTO MAS CHICO» ═══════
   Diego, en su iPhone 17 Pro (402x874): «sigue pasando que esta mal, el primer
   item esta muy grande y el resto mas chico».

   🔴 NO HABIA NINGUNA REGLA DE PRIMERA LINEA. Medido con el dedo emulado y un
      carrito de cuatro productos distintos (nombre largo con color y «Quedan
      2» · nombre corto sin oferta · color con oferta · nombre largo con 2x1):
      a 402 las lineas median 202,8 · 151,5 · 163,5 · 160 px. La foto (57,6
      px), la pastilla (46) y la X (44) median IGUAL en las cuatro. Lo que
      cambiaba era la FILA 1 de la reja: la reja del telefono era «ph inf x /
      ph q q / pz pz pz», la foto cruzaba las dos primeras filas y no le ponia
      el alto a ninguna, asi que la fila 1 la ponia el TEXTO. Cada renglon de
      nombre sumaba 17,5 px, el color 15,6 y el aviso de stock 15,6, uno arriba
      del otro. La primera linea tenia 95,3 px de texto contra los 44 de la X
      en la segunda: los 51,3 px de diferencia son exactamente esos. A 360 se
      sumaba la plata: precio, tachado, «c/u» y «Ahorras» no entraban en un
      renglon y bajaban a dos (23 px mas), solo en la linea que los tenia.

   ✅ LA CARD TIENE UNA FORMA FIJA Y EL CONTENIDO ENTRA EN ELLA:
      · fila 1 = foto | nombre y datos | quitar. La FOTO pone el alto (72 px,
        una fila de reja fija) y el texto entra al lado: el nombre en dos
        renglones como mucho —la regla de la card de la grilla desde VP-63,
        «el nombre completo vive en la ficha»—, el color en uno y el aviso en
        uno. Los tres juntos miden 70,8 px, asi que hasta la linea que lleva
        TODO cabe al lado de la foto y ningun dato agranda la card.
      · fila 2 = cantidad a la izquierda | plata a la derecha (la forma del
        carrito de Mercado Libre). La plata va en renglones fijos: arriba el
        total grande con su tachado al lado —el antes y el ahora de ESA linea,
        siempre contra el borde derecho— y abajo el «c/u» y «Ahorras». La fila
        reserva lugar para tres renglones en TODAS las lineas, tengan oferta o
        no: asi la linea que no entra en dos —a 360, «c/u» y «Ahorras» ya no
        caben juntos— mide lo mismo que la que lleva solo el precio.
   🔴🔴 SEGUNDA VUELTA, 12-10: EL ORDEN DE LA PLATA DECIDE CUANTOS RENGLONES
      OCUPA. La primera version ponia arriba «c/u» y total, y abajo tachado y
      «Ahorras». Con seis cifras por unidad ninguna de esas dos parejas entra en
      los 158 px que la pastilla le deja a la plata a 360: «$103.992 c/u» mas
      «$207.984» suman 160,8 px con su aire, y el tachado mas «Ahorras $51.996»
      176,8. Cada dato bajaba solo a su renglon —CUATRO, 63,4 px, en una fila
      que reserva tres de 50— y la primera linea volvia a medir 165 contra 152.
      La pareja que mas cerca queda es el tachado con el total: 141,8 px con
      seis cifras, porque el tachado va en letra chica. Asi la plata entra en
      tres renglones con cualquier total de linea menor a un millon, y el
      tachado queda pegado al numero del que habla, que es la convencion de
      cualquier tienda. Medido con el dedo a 360, 375, 380, 384, 393, 402 y
      430, con seis cifras por unidad y hasta tres unidades: 152 en todas las
      lineas. El limite que queda, dicho con el numero: entre 360 y 370 px,
      una linea con oferta, mas de una unidad y un total de SIETE cifras
      (tachado mas total: 168,8 px) vuelve a cuatro renglones y mide 165;
      desde 375 entra.
   🔴 LA PASTILLA Y LA X NO SE ACHICAN: siguen con 44 px de toque (AC-14).
   🔴 EL TOPE DE LA PLATA ES EL ANCHO DE LA PASTILLA MAS SU AIRE (9,1rem): la
      plata y la cantidad comparten la fila, y sin ese tope un precio largo se
      le subiria encima al boton de sumar.
   ⚠️ SOLO TELEFONO: todo vive adentro de max-width 30rem. El escritorio y la
      tableta no se mueven un pixel. Y va DESPUES de los dos bloques de arriba a
      proposito: misma especificidad, gana el que viene despues. */
@media (max-width:30rem){
  .cst-car-it{grid-template-columns:4.5rem minmax(0,1fr) 2.5rem;
    grid-template-rows:4.5rem minmax(3.125rem,auto);
    grid-template-areas:"ph inf x" "bt bt bt"}
  .cst-car-inf{gap:.15rem}
  .cst-car-inf-t{gap:.15rem}
  .cst-car-n{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
    line-clamp:2;overflow:hidden}
  /* El anillo del foco va hacia ADENTRO: el nombre recortado lleva overflow
     hidden y un anillo de afuera quedaria cortado contra su propia caja. */
  .cst-car-n-a:focus-visible{outline-offset:-2px}
  .cst-car-col{line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .cst-car-st{line-height:1.35;white-space:nowrap;overflow:hidden}
  .cst-car-q{grid-area:bt}
  .cst-car-pz{grid-area:bt;justify-self:end;align-self:center;
    max-width:calc(100% - 9.1rem);row-gap:0;line-height:1.2}
  .cst-car-was{order:1}
  .cst-car-linea{order:2}
  .cst-car-pz::after{content:"";order:3;flex-basis:100%;height:0}
  .cst-car-uni{order:4}
  .cst-car-save{order:5}
}

.cst-car-xf{grid-area:x;margin:0;justify-self:end}
.cst-car-x{width:2.75rem;height:2.75rem;display:grid;place-items:center;
  padding:0;border:0;border-radius:.85rem;background:none;cursor:pointer;
  color:var(--muted);font-size:.95rem;
  transition:background .25s var(--ease),color .25s var(--ease)}
@media (hover:hover) and (pointer:fine){
  .cst-car-x:hover{background:var(--fondo2);color:var(--bad)}
}

/* 🔻 12-10 noche · D3 del plan 130 · «Vaciar el carrito» (CA-12) SE SACO con
   todo su CSS. Diego: «el boton de vaciar carrito es necesario? Lo veo raro»
   y despues «si, sacalo». Cada fila ya se quita con su cruz. */

/* ── EL RESUMEN. Flota con halo y sin borde: es el total. ── */
.cst-car-r{min-width:0;position:sticky;top:calc(4.25rem + 1.25rem);align-self:start;
  padding:1.15rem 1.15rem 1.3rem;border-radius:var(--r-l);
  background:var(--sup);box-shadow:var(--sh-2)}
@media (max-width:62.5rem){.cst-car-r{position:static}}
.cst-car-r-t{margin:0;font-size:.6875rem;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted)}

/* CA-07 · la barra del envío gratis. Con gradiente, nunca relleno plano. */
.cst-car-fg{margin:0 0 1.1rem}
.cst-car-fg-t{margin:0 0 .5rem;display:flex;align-items:center;gap:.45rem;
  font-size:.78rem;font-weight:700;color:var(--ink2);line-height:1.45}
.cst-car-fg-t b{font-weight:800;color:var(--ink)}
.cst-car-fg-ok{color:var(--ok)}
/* 🔴 `display:block` NO es decorativo: es un <span>, y un elemento en línea
   IGNORA `height`. Sin esto la barra existe en el HTML y no se ve ni un píxel
   — que es exactamente lo que pasó en el primer render. */
.cst-car-fg-bar{display:block;height:6px;border-radius:99px;background:var(--fondo2);overflow:hidden}
.cst-car-fg-in{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--acento),color-mix(in srgb,var(--acento) 55%,var(--acento-txt)))}
.cst-car-fg-in-ok{background:linear-gradient(90deg,var(--ok),color-mix(in srgb,var(--ok) 45%,var(--acento)))}

.cst-car-fila{display:flex;align-items:baseline;justify-content:space-between;
  gap:.75rem;padding:.4rem 0;font-size:.84rem;color:var(--ink2)}
.cst-car-fila-v{font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.cst-car-fila-fr{color:var(--ok);font-weight:800}
.cst-car-tot{display:flex;align-items:baseline;justify-content:space-between;gap:.75rem;
  margin-top:.6rem;padding-top:.85rem;border-top:1px solid var(--line)}
.cst-car-tot-k{font-size:.9rem;font-weight:800;color:var(--ink)}
/* 🔻 `.cst-car-tot-p` se BORRÓ con el párrafo que la usaba: el total ya no
   lleva aclaración abajo, porque el número es firme. Una regla sin nadie que la
   use es la forma en que un archivo empieza a mentir sobre lo que hace. */
.cst-car-tot-v{font-size:clamp(1.5rem,3.4vw,1.875rem);font-weight:800;
  letter-spacing:-.03em;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
/* ⭐⭐ 14-09 · DIEGO — el tachado del total y el ahorro, en la MISMA pila que
   ya usa cada línea del carrito (`.cst-car-pz`/`-was`/`-save`, VOTO-04
   corrección 2): arriba el número grande, abajo el «antes» chico y tachado, y
   la pastilla verde — nunca los tres del mismo tamaño, porque el que tiene
   que ganar es el de arriba.
   Clases PROPIAS (no las de cada línea) a propósito y no por prolijidad: el
   script de `webRenderEnvioBloque()` las busca por `document.querySelector`
   cuando el envío cambia en vivo (más abajo en este archivo, y ver el PHP del
   total) — si compartieran clase con la primera línea del carrito, ese script
   escondería el tachado DE ESA LÍNEA, no el del total. */
/* 🔻 12-10 noche · D2 del plan 130 · Diego: «en el total, lo de ahorras de
   abajo se ve raro». Eran TRES pisos en la columna del numero —el total, el
   tachado y una pastilla verde con su propio fondo— y la pastilla quedaba
   corrida respecto del tachado y de los renglones de arriba. NO se saca: el
   desglose dice el 2x1 y el cupon, pero no el ahorro por oferta de cada fila,
   asi que este es el UNICO lugar del resumen con el ahorro entero. Se vuelve
   UN renglon debajo del numero, a plomo con el: el antes tachado y «Ahorras»
   en el verde, letra de renglon y sin caja.
   ⚠️ Grilla y no flex: con el renglon de abajo adentro de la misma pila, la
   pila se ensanchaba y le comia lugar al rotulo, y «Total sin el envio» se
   partia en dos renglones a 402. En la grilla el rotulo solo comparte fila
   con el numero, y el renglon del ahorro va en la fila de abajo, entero. */
.cst-car-tot{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:.5rem;row-gap:.2rem;
  align-items:baseline}
.cst-car-tot-pz{display:contents}
.cst-car-tot-k{grid-column:1;grid-row:1}
.cst-car-tot-v{grid-column:2;grid-row:1;text-align:right}
.cst-car-tot-ah{grid-column:1 / -1;grid-row:2;justify-self:end;display:flex;align-items:baseline;
  gap:.45rem}
.cst-car-tot-was{font-size:.75rem;font-weight:600;color:var(--muted);text-decoration:line-through}
.cst-car-tot-save{font-size:.75rem;font-weight:700;color:var(--ok);white-space:nowrap}
.cst-car-tot-save b{font-weight:800}

/* ══ ⭐🔴 11-10 · EL PRECIO ANTERIOR, DEL MISMO COLOR EN TODA LA TIENDA ══════
   Diego, el 10-10: *«la oferta se ve en gris, no llama la atención el precio
   tachado»*. Se arregló en la card (`.cst-was`) y ahí quedó — pero el precio
   anterior se dibuja con CUATRO clases distintas, una por pantalla, y las
   otras tres siguieron con el gris viejo. Medido el 11-10 a 402×874 sobre la
   pantalla pintada, en la MISMA página del carrito: `.cst-was` daba
   rgb(60,69,82) con 9,7 de contraste y `.cst-car-was`, a cuatro centímetros,
   rgb(107,116,127) con **4,74**. El mismo producto, el mismo dato, dos
   colores, según dónde lo mires.

   ✅ Las cuatro quedan con el tratamiento que ya estaba votado: los dígitos en
      `--ink2` (#3c4552, 9,73:1 sobre blanco) y la raya en el azul de marca,
      que es el mismo relleno sólido del chip «−20 %». Tinta, no neblina.
   🔴 SÓLO EN EL TELÉFONO (≤30rem), igual que la card: en escritorio el tachado
      sigue en `--muted` y eso lo cuida MS-PC4, que lo exige al píxel. Diego
      pidió «no tocar la versión web, sólo en estado celular».
   🔴 Y SIGUE SIN GRITARLE MÁS FUERTE AL PRECIO QUE SE PAGA: el tachado está en
      11,5 px peso 600 y el de verdad en 16 px peso 800. Lo que cambia es que
      se LEE; el que manda sigue siendo el otro. Lo mide MS-5d.
   ⚠️ Van las cuatro JUNTAS y en un solo lugar a propósito: el defecto fue
      exactamente que se arregló una y las otras tres quedaron. Si mañana nace
      una quinta clase de precio anterior, el grupo MS-11 la caza, porque busca
      por la PROPIEDAD —quién tiene la raya— y no por el nombre de la clase. */
@media (max-width:30rem){
  .cst-car-was,.cst-car-tot-was,.cst-f-was,.cst-sug-ta{
    color:var(--ink2);text-decoration-color:var(--chip-off-sup);
    text-decoration-thickness:2px}
}
/* CA-13 · el mini resumen de cuotas, sobre el total */
.cst-car-cuo{margin:.5rem 0 0;display:flex;align-items:center;gap:.4rem;
  font-size:.82rem;font-weight:700;color:var(--acento-txt)}
.cst-car-cuo b{font-weight:800}
/* 🔻 `.cst-car-ahorro` (VOTO-04 corrección 2: el «Ahorrás …» en banda verde
   de ANCHO COMPLETO, debajo del total) SE BORRÓ. Diego, 14-09, mirándolo ya
   deployado: «que el ahorro se vea; si está grande es raro» — una banda del
   ancho de la columna competía con el total, que es el número que manda ahí.
   El mismo dato hoy es `.cst-car-tot-save`, el renglon chico de arriba,
   pegada al número que explica: mismo verde, tamaño de nota al pie — no de
   cartel. Una regla sin nadie que la use es la forma en que un archivo
   empieza a mentir sobre lo que hace. */

/* ═══ CA-17 · EL CUPÓN ═══════════════════════════════════════════════════════
   Diego: «los códigos se crean en el panel en la sección web, así la gente no
   inventa». Acá sólo se escribe uno y se ve qué contestó el servidor.

   🔴 EL DESCUENTO LO CALCULA EL SERVIDOR. webCarResumen() devuelve el cupón con
   su descuento YA restado del total y re-validado contra el subtotal de ahora.
   Acá no se multiplica nada: se dibuja el número que vino.

   TRES estados y UN solo elemento — nunca los dos a la vez, que es lo que
   ensucia un resumen:
     · sin cupón  → un renglón de texto que se abre (details, sin una sola línea
                    de JavaScript, igual que «vaciar el carrito»);
     · con cupón  → la fila del descuento con su ✕, y el campo desaparece:
                    ya no hay nada que escribir;
     · con error  → el details vuelve ABIERTO y con lo tecleado adentro, y el
                    motivo se lee arriba, en los avisos de siempre. */
/* ⭐⭐ 14-09 · DIEGO: «en el carrito, donde está el resumen, queda como una
   card dentro de otra — lo digo por lo de la entrega y el cupón». Tenía
   razón: el resumen llegó a tener CUATRO bordes anidados (la card grande del
   resumen → esta caja del cupón → la caja de «medios de entrega» → cada
   opción con SU marco). Cada borde dice «objeto separado», y con los cuatro
   diciéndolo a la vez nada se destacaba.

   Acá, y de acá para abajo, el cupón deja de ser su propia caja (CA-20 le
   había puesto borde, radio y fondo) y pasa a ser un RENGLÓN de la única
   superficie que es `.cst-car-r`: una línea fina arriba —la separa del
   subtotal— y aire, nunca un marco propio. Sigue siendo un control de
   verdad: cursor, chevrón que gira al abrir, cambia de tinta al pasar el
   mouse — lo único que se fue es lo que lo hacía leerse como un objeto
   aparte. */
.cst-car-cup{margin:.5rem 0 0;padding-top:.5rem;border-top:1px solid var(--line2)}
.cst-car-cup-s{display:flex;align-items:center;gap:.45rem;min-height:2.75rem;
  margin:0;padding:0;cursor:pointer;list-style:none;
  font-size:.78rem;font-weight:700;color:var(--ink2);
  transition:color .25s var(--ease)}
.cst-car-cup-s::-webkit-details-marker{display:none}
.cst-car-cup-s::marker{content:''}
.cst-car-cup-ch{margin-left:auto;font-size:.9rem;color:var(--muted);
  transition:transform .25s var(--ease)}
.cst-car-cup[open] .cst-car-cup-ch{transform:rotate(90deg)}
.cst-car-cup-s:focus-visible{outline-offset:2px;border-radius:.5rem}
@media (hover:hover) and (pointer:fine){
  .cst-car-cup-s:hover{color:var(--acento-txt)}
}
.cst-car-cup-f{display:flex;gap:.4rem;margin:.3rem 0 .2rem}
/* ⚠️ min-width:0 NO ES DECORATIVO. Un campo de texto trae su ancho intrínseco y
   en una fila flex NO se achica por debajo de él: a 360 px la pastilla
   «Aplicar» se salía de la card y aparecía el scroll lateral que ya llegó una
   vez a producción. Es la trampa de flex de siempre; va con box-sizing. */
.cst-car-cup-i{flex:1 1 auto;min-width:0;box-sizing:border-box;min-height:2.75rem;
  padding:.5rem .75rem;border:1px solid var(--line);border-radius:.7rem;
  background:var(--sup);color:var(--ink);font-family:var(--f);
  font-size:max(16px,1rem);font-weight:800;letter-spacing:.05em;text-transform:uppercase}
.cst-car-cup-i::placeholder{color:var(--muted);font-weight:600;letter-spacing:0;text-transform:none}
/* El anillo global de :focus-visible ADEMÁS fija border-radius:.5rem, así que
   sin esta línea el campo se achata de .7rem a .5rem justo al enfocarlo: el
   borde salta bajo el dedo. Misma colisión de cascada de siempre, esta vez
   entre una regla propia y una global. */
.cst-car-cup-i:focus-visible{outline-offset:2px;border-radius:.7rem}
.cst-car-cup-b{flex:none;min-height:2.75rem;padding:0 .95rem;border:0;border-radius:99px;
  cursor:pointer;background:var(--fondo2);color:var(--ink);
  font-family:var(--f);font-size:.8rem;font-weight:800;
  transition:background .2s var(--ease),color .2s var(--ease)}
@media (hover:hover) and (pointer:fine){
  /* Higiene: era `color:#22272f` escrito a mano. Es exactamente `--ink`. */
  .cst-car-cup-b:hover{background:var(--acento);color:var(--ink)}
}
.cst-car-cup-b:focus-visible{border-radius:99px}
/* La fila del cupón puesto. Verde: un descuento es una buena noticia, no una
   alarma. El ✕ tiene su propio botón y su propio aire — sacar el cupón es
   reversible (se vuelve a escribir), pero no puede pasar de rozar el total.
   Misma línea arriba que el renglón SIN cupón (`.cst-car-cup`): son el mismo
   renglón lógico en sus dos estados, y el divisor no puede aparecer en uno y
   faltar en el otro. */
.cst-car-cup-p{display:flex;align-items:center;gap:.5rem;margin:.5rem 0 0;
  padding:.4rem 0 0;border-top:1px solid var(--line2);
  font-size:.84rem;color:var(--ink2)}
.cst-car-cup-k{min-width:0;overflow-wrap:anywhere}
.cst-car-cup-k b{font-weight:800;color:var(--ink);letter-spacing:.03em}
.cst-car-cup-v{margin-left:auto;font-weight:800;color:var(--ok);white-space:nowrap;
  font-variant-numeric:tabular-nums}
/* ⚠️ 44 px DE VERDAD, metidos con margen negativo. El ✕ dibujado mide 2,2 rem
   de tinta, pero el área que se toca es 2,75 rem como TODOS los controles del
   archivo — 35 px es un blanco chico para un pulgar. El margen negativo la mete
   dentro del aire que ya tenía la fila, así que el área crece y el ritmo del
   resumen no se mueve: lo que se solapa arriba y abajo es texto, no otro botón,
   así que no se puede errar el toque hacia un control vecino. */
.cst-car-cup-xf{flex:none;margin:-.5rem -.6rem -.5rem 0}
.cst-car-cup-x{width:2.75rem;height:2.75rem;display:grid;place-items:center;
  padding:0;border:0;border-radius:.7rem;background:none;cursor:pointer;
  color:var(--muted);font-size:.78rem;
  transition:background .25s var(--ease),color .25s var(--ease)}
@media (hover:hover) and (pointer:fine){
  .cst-car-cup-x:hover{background:var(--fondo2);color:var(--bad)}
}
.cst-car-cup-x:focus-visible{outline-offset:-2px;border-radius:.7rem}

/* 🔻 EL BLOQUE DE ENVÍO DEL CARRITO SE FUE A `webRenderEnvioBloque()`.
   Las reglas `.cst-car-env`, `-e`, `-f`, `-i`, `-b`, `-r`, `-e2` y `-ret` se
   BORRARON, no se dejaron por las dudas: eran una segunda copia del mismo
   componente y por eso Diego reportó los mismos dos problemas —«el retiro no se
   puede tildar» y «el diseño no acompaña»— primero en el carrito y diez minutos
   después en la ficha. Ahora las dos pantallas dibujan `.cst-env-*` y se
   arreglan juntas. Una regla sin nadie que la use es la forma en que un archivo
   empieza a mentir sobre lo que hace. */

/* ⭐⭐ 14-09 · DIEGO, mismo pedido de arriba: «medios de entrega» era la
   TERCERA card anidada del resumen (`.cst-env` trae su propio fondo, borde,
   radio y sombra —correcto en la FICHA, donde es la única card de su
   columna—) y cada una de sus DOS opciones traía una CUARTA: «Retiro en
   Palermo» y «Llega mañana» eran dos tarjetas con marco propio adentro de esa
   caja. Acá abajo, SÓLO adentro de `.cst-car-r` (la ficha no se toca: sigue
   con `.cst-env` a secas, más arriba en este archivo), el bloque entero pasa
   a ser un renglón más de la única superficie: sin fondo, sin borde, sin
   sombra — una línea fina arriba lo separa del cupón, y el título y las
   opciones quedan a plomo con «Subtotal» y «Total» (ver el margen negativo de
   `.cst-env-fila`, más abajo: el padding volvió con la segunda mirada de
   Diego, y ya no corre el contenido). */
.cst-car-r .cst-env{margin-top:.5rem;padding-top:.5rem;background:none;
  border:0;border-radius:0;box-shadow:none;overflow:visible}
.cst-car-r .cst-env-h,.cst-car-r .cst-env-err,
.cst-car-r .cst-env-ops,.cst-car-r .cst-env-n{padding-left:0;padding-right:0}
/* Las opciones («a domicilio» / «retiro») eran DOS CARDS con borde propio:
   Diego, textual, son «una elección, no dos tarjetas». Sin fondo ni borde en
   reposo — sólo el tilde y el ícono dicen qué es cada fila, igual que en
   cualquier lista nativa de radios. El orden importa: `:hover` va ANTES que
   `:checked` en el archivo para que, si las dos coinciden (pasar el mouse por
   la que ya está elegida), gane la de `:checked` — la misma trampa de
   cascada de siempre, resuelta como ya se resuelve acá abajo. */
/* 🔻 14-09 · SEGUNDA MIRADA DE DIEGO, mirando ESTO ya deployado: «los
   círculos para seleccionar están muy al borde izquierdo de la caja que se
   pinta, y lo mismo pero del lado derecho pasa con el precio del envío y el
   gratis de retiro». El `padding-left:0;padding-right:0` de la primera vuelta
   de hoy sacó el marco Y el aire de adentro a la vez — y el aire de adentro
   era del TINTE, no del marco: sin relleno propio, el tilde toca el borde
   izquierdo de la caja que se pinta al elegir, y el precio el derecho.
   🔴 SE DEVUELVE EL RELLENO, CANCELADO CON UN MARGEN NEGATIVO IGUAL — mismo
   truco que ya usa `.cst-car-cup-xf` más arriba en este archivo (el margen
   negativo mete el control DENTRO del aire que ya tenía la fila, sin mover el
   ritmo de lo de al lado). El padding es el `.6rem` de siempre, el mismo que
   ya usa esta fila en la FICHA (arriba, `.cst-env-fila` a secas); el margen
   negativo lo resta de vuelta, así el tilde arranca en el MISMO píxel que
   «Subtotal» — la alineación de la nota de arriba no se pierde. Lo único que
   crece es la CAJA QUE SE PINTA —el fondo del tinte—, que es justo lo que
   Diego señaló, no el contenido.
   ⚠️ Y VA EN LA REGLA BASE, no adentro de `:checked`: el padding no puede
   depender del estado, o la fila elegida y la sin elegir miden distinto y el
   contenido SALTA al cambiar de opción — que se nota más que el problema
   original. Medido con Puppeteer, `getBoundingClientRect()` del tilde y del
   precio: mismo `left`/`right` en los dos estados. */
.cst-car-r .cst-env-fila{margin:0 -.6rem;padding-left:.6rem;padding-right:.6rem;
  background:none;border-color:transparent}
@media (hover:hover) and (pointer:fine){
  .cst-car-r .cst-env-o:hover .cst-env-fila{transform:none;
    background:var(--fondo2);border-color:transparent}
}
/* La elegida SÍ se distingue —es estado, y el estado se muestra— pero con el
   mínimo: un tinte suave del mismo tono (`--tono`, ya lo resuelve la regla de
   la ficha unas líneas más arriba: azul para «a domicilio», verde para
   «retiro») y el tilde relleno. Nunca el marco completo + halo de una card
   seleccionada — eso ya no son cards. */
.cst-car-r .cst-env-r:checked + .cst-env-fila{
  background:color-mix(in srgb,var(--tono) 14%,var(--sup));
  border-color:transparent;box-shadow:none}

/* ═══ ⭐ FINALIZAR COMPRA ════════════════════════════════════════════════════
   Es el motivo de la pantalla, así que domina la pantalla: --marca lleno, ancho
   completo y el halo de la casa. El mismo azul de acción que «Agregar al
   carrito» y que «Ir al carrito» del cajón — uno solo por pantalla, y es éste.
   Blanco sobre #2563c9 = 5,64:1, AA en cualquier tamaño.

   🔴 SÓLO EXISTE SI checkout_url VINO CON ALGO. Con checkout_on = 0 la clave
   llega vacía y acá NO hay botón: uno que no lleva a ningún lado es peor que
   ninguno. Ése es el plan de vuelta atrás en un clic (regla 5 de §9.4), y por
   eso el aviso de «todavía no cobramos» sigue vivo y ocupa este mismo lugar el
   día que el cobro esté apagado. */
.cst-car-ir{display:flex;align-items:center;justify-content:center;gap:.5rem;
  width:100%;box-sizing:border-box;min-height:3.1rem;margin-top:1.15rem;
  padding:.8rem 1.2rem;border-radius:99px;text-decoration:none;
  background:var(--marca);color:var(--marca-txt);
  font-size:.95rem;font-weight:800;letter-spacing:-.01em;
  box-shadow:0 10px 26px color-mix(in srgb,var(--marca) 42%,transparent);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
@media (hover:hover) and (pointer:fine){
  .cst-car-ir:hover{transform:translateY(-3px);
    box-shadow:0 18px 40px color-mix(in srgb,var(--marca) 52%,transparent)}
}
.cst-car-ir:focus-visible{outline-offset:3px;border-radius:99px}
/* El estado del PAGO. Mismo criterio que el bloque de envío de la ficha: el
   lugar existe, dice en qué estado está y no promete nada. Antes acá había un
   «Comprá por WhatsApp» grande, y eso hacía de WhatsApp la forma de comprar —
   que es justo lo que Diego corrigió el 06-09. */
/* 🔻 Era una caja con fondo, ícono y tres renglones — y ocupaba MÁS QUE EL
   TOTAL. Ahora el estado lo dice el botón apagado de arriba y esto es lo que
   queda: una línea, centrada debajo, en tono tenue. */
.cst-car-pago{margin:.5rem 0 0;text-align:center;
  font-size:.74rem;line-height:1.5;color:var(--muted)}
/* El botón cuando todavía no se puede pagar. MISMO objeto que el vivo —mismo
   alto, mismo radio, mismo lugar— para que encenderlo no mueva nada. Sin halo y
   sin subir al hover: un botón que flota invita a tocarlo. */
.cst-car-ir-off{border:0;font-family:var(--f);cursor:not-allowed;
  background:color-mix(in srgb,var(--muted) 24%,var(--sup));
  color:var(--muted);box-shadow:none}
@media (hover:hover) and (pointer:fine){
  .cst-car-ir-off:hover{transform:none;box-shadow:none}
}
/* WhatsApp: CONTACTO, no cierre de compra. Contorno, no relleno — que se vea
   que no es el botón principal, porque no lo es. */
.cst-car-wa{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  width:100%;min-height:2.75rem;margin-top:.7rem;padding:.6rem 1rem;
  border:1px solid var(--line);border-radius:99px;background:var(--sup);
  color:var(--ink2);text-decoration:none;font-size:.82rem;font-weight:700;
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease)}
@media (hover:hover) and (pointer:fine){
  .cst-car-wa:hover{border-color:color-mix(in srgb,var(--acento) 60%,transparent);
    box-shadow:0 6px 16px color-mix(in srgb,var(--acento) 26%,transparent)}
}
/* 🔻 «Seguir comprando» pasó por acá dos veces. Primero (07-09) bajó de
   botón ancho completo a link chico y tenue, arriba del resumen. Segunda
   (14-09), Diego mirándolo ya deployado: «¿por qué hay un botón de seguir
   comprando? Ese lo podríamos sacar» — y esta vez se fue entero.
   `.cst-car-seguir` SE BORRÓ (no queda ningún `<a>` con esa clase en este
   archivo, ver `webRenderCarrito()`): el header cubre la vuelta al catálogo
   —el logo va al INICIO en toda página, y el ☰ de celular abre el árbol
   completo de categorías (`webTiendaNav()`, siempre poblado para
   `/carrito`)— y el botón de atrás del navegador cubre el resto.
   `.cst-car-r-h` se queda: sigue siendo el encabezado del resumen, ahora con
   un solo hijo.
   ⚠️ OJO AL EDITAR ESTE COMENTARIO: va adentro del heredoc `<<<CSS` de
   `webRCss()`, que INTERPOLA — el signo peso seguido de una palabra, suelto
   acá, dispara «Undefined variable» en cada carga de cada página (el mismo
   bug que ya pasó dos veces antes de esta línea, VOTO-04). Nombrar una
   variable PHP en un comentario de acá se escribe en palabras. */
.cst-car-r-h{display:flex;align-items:center;justify-content:space-between;
  gap:.75rem;margin:0 0 .9rem}
.cst-car-nota{margin:.9rem 0 0;font-size:.72rem;line-height:1.55;color:var(--muted);
  text-align:center}

/* Regla 3 de 02_DISENO §11: el que define su `display` define su `[hidden]`. */
.cst-car[hidden],.cst-car-h[hidden],.cst-car-avs[hidden],.cst-car-av[hidden],
.cst-car-l[hidden],.cst-car-ul[hidden],.cst-car-it[hidden],.cst-car-ph[hidden],
.cst-car-inf[hidden],.cst-car-n[hidden],.cst-car-st[hidden],.cst-car-q[hidden],
.cst-car-qf[hidden],.cst-car-qb[hidden],.cst-car-pz[hidden],.cst-car-x[hidden],
.cst-car-xf[hidden],
.cst-car-r[hidden],.cst-car-fila[hidden],.cst-car-tot[hidden],.cst-car-cuo[hidden],
.cst-car-tot-was[hidden],.cst-car-tot-save[hidden],
.cst-car-wa[hidden],.cst-car-pago[hidden],.cst-car-fg-t[hidden],
.cst-car-cup-s[hidden],.cst-car-cup-f[hidden],.cst-car-cup-p[hidden],.cst-car-cup-x[hidden],
.cst-car-ir[hidden]{display:none!important}

/* ═══ A1 · 12-10 · EL CARRITO DEL CELULAR, COMO LO VOTO DIEGO ════════════════
   Mockup car3_carrito_acordeon.html, voto 9/9/9/9 con cambios: «es la opcion
   1, filas que se abren, pero el boton para ir a pagar el de la opcion 4, tipo
   delivery».

   LA IDEA: el motivo de esta pantalla es pagar. Con las lineas de 152 px, tres
   productos ya empujaban el total y el boton fuera de la pantalla. Ahora:
     · cada producto es una fila de 64 px, toda del mismo alto, con la foto, el
       nombre en dos renglones, color y unidades, el precio y su tachado (o el
       «c/u»). Se toca y se abre ahi mismo: la pastilla de cantidad, el ahorro
       de esa linea y Quitar. Una abierta por vez;
     · abajo, fijo, UN boton con las unidades y el total adentro, y arriba de
       el una linea chica con el ahorro. Siempre a la vista.

   🔴 SOLO TELEFONO, Y EL ESCRITORIO AL PIXEL. Las piezas nuevas no se dibujan
      afuera de max-width 30rem, y los dos envoltorios (el panel de la fila y
      la barra) son display contents: la reja de la linea y el resumen quedan
      exactamente como estaban. Medido antes y despues a 768, 1.024, 1.440 y
      2.560 (ver prueba_carrito_acordeon.php).
   🔴 NO SE PIERDE UN DATO: precio, tachado, «c/u», cantidad y color en la fila
      cerrada; el ahorro y Quitar al abrirla. Ninguno se calcula de nuevo: son
      los mismos numeros que ya dibujaba la linea.
   🔴 TOQUES DE 44: la fila entera es el blanco para abrirla (64 px de alto),
      la pastilla y Quitar no se achican.
   🔴 SIN :has() NO HAY ACORDEON: todo lo de la fila cerrada vive adentro de
      @supports. Un navegador viejo ve la linea de antes, entera y abierta, que
      anda. Sin JavaScript el acordeon anda igual: es un details.
   ⚠️ VA DESPUES DE TODAS las reglas del carrito a proposito: pisa las del
      bloque de 30rem del 12-10 (misma especificidad, gana la que viene
      despues). Es la colision de cascada que este proyecto ya pago. */
.cst-car-ab,.cst-car-cu,.cst-car-pa-d,.cst-car-x-it,.cst-car-x-t,.cst-car-n-t,
.cst-car-pagar-l,.cst-car-ir-n,.cst-car-ir-m,.cst-car-ir-t{display:none}
.cst-car-pa,.cst-car-pagar{display:contents}
.cst-car-pagar-se[hidden],.cst-car-pagar-ah[hidden],.cst-car-pa[hidden],.cst-car-pagar[hidden]{display:none!important}

@media (max-width:30rem){
  /* ── EL BOTON DE PAGAR, TIPO DELIVERY (opcion 4) ─────────────────────────
     El mismo enlace de «Finalizar compra», clavado abajo como la barra del
     checkout: z-index 40, el globo de WhatsApp es 39. El halo celeste hacia
     arriba es la firma de la casa: separa la barra del contenido sin una
     linea. */
  .cst-car-pagar{position:fixed;left:0;right:0;bottom:0;z-index:40;
    display:flex;flex-direction:column;gap:.5rem;
    padding:.625rem calc(1rem + env(safe-area-inset-right))
            calc(.75rem + env(safe-area-inset-bottom)) calc(1rem + env(safe-area-inset-left));
    border-radius:1.375rem 1.375rem 0 0;background:var(--sup);
    box-shadow:0 -1px 2px rgba(60,69,82,.04),
               0 -14px 32px -10px color-mix(in srgb,var(--acento) 75%,transparent)}
  .cst-car-pagar-l{display:block;margin:0;text-align:center;
    font-size:.72rem;font-weight:700;line-height:1.2;color:var(--ok)}
  .cst-car-pagar-l:not(:has(> :not([hidden]))){display:none}
  .cst-car-pagar-se{color:var(--ink2)}
  .cst-car-pagar-se:not([hidden]) + .cst-car-pagar-ah::before{content:"·";margin:0 .35em;color:var(--ink2)}
  .cst-car-pagar-ah b{font-weight:800}
  .cst-car-pagar .cst-car-ir{margin:0;min-height:3.5rem;justify-content:flex-start;gap:.75rem;
    padding:0 1.25rem 0 .625rem;font-size:1rem}
  .cst-car-ir-k,.cst-car-pagar .cst-car-ir>.cst-ico{display:none}
  .cst-car-ir-n{display:grid;place-items:center;flex:none;box-sizing:border-box;
    min-width:2.25rem;height:2.25rem;padding:0 .375rem;border-radius:99px;
    background:color-mix(in srgb,var(--marca-txt) 22%,transparent);font-size:.9375rem}
  .cst-car-ir-m{display:inline}
  .cst-car-ir-t{display:inline;margin-left:auto;white-space:nowrap}
  /* La barra tapa los ultimos 100 px de la pantalla: el pie se corre para
     arriba lo mismo, o el libro de quejas -obligatorio- queda abajo de ella
     sin posicion de scroll que lo salve (medido en el checkout el 02-10). */
  body:has(.cst-car-pagar) .cst-ft{padding-bottom:calc(6.75rem + env(safe-area-inset-bottom))}
  /* El globo de WhatsApp ya se apartaba con el boton de pagar a la vista, y
     ahora el boton esta a la vista siempre. Se dice aca y no solo en el
     observador: cuando el carrito se repinta, el boton es un nodo nuevo que
     el observador no mira, y el globo volvia DETRAS de la barra. */
  body:has(.cst-car-pagar) .cst-wa-fab{display:none}

  /* La lista se disuelve en la grilla de la pagina (el pie del mockup). Aca
     abajo viajaba «Vaciar el carrito», que se saco el 12-10 (D3 del 130). */
  .cst-car-l{display:contents}
  /* 14-10 · disuelta la lista, el aviso del carrito pasa a ser un casillero
     de la grilla y ya lleva el hueco de la grilla arriba: su margen propio
     sumaba 40 px entre las filas y el aviso. */
  .cst-car-aviso{margin-top:0}

  /* ── LAS FILAS QUE SE ABREN (opcion 1) ─────────────────────────────────── */
  @supports selector(:has(*)){
    .cst-car-ul{gap:.5rem}
    .cst-car-it{grid-template-columns:3rem minmax(0,1fr) auto 1.25rem;
      grid-template-rows:1.5rem 1.5rem auto;
      grid-template-areas:"ph inf pz ch" "ph inf pz ch" "pa pa pa pa";
      column-gap:.625rem;row-gap:0;padding:.5rem .625rem .5rem .5rem;border-radius:1rem}
    /* La abierta pesa mas con el halo, no con un borde. */
    .cst-car-it:has(> .cst-car-ab[open]){
      box-shadow:0 2px 6px rgba(60,69,82,.06),
                 0 16px 34px -10px color-mix(in srgb,var(--marca) 40%,transparent)}
    /* LA FOTO Y EL NOMBRE NO SON CONTROLES EN LA FILA CERRADA. Toda la
       cabecera es el disparador, asi que un enlace debajo de el es un control
       que se ve y no se puede tocar. El enlace de la foto pasa a display
       contents (sin caja: la foto se dibuja sola en su casillero) y el del
       nombre se recorta a un pixel, con el mismo nombre como texto al lado;
       al enfocarlo con el teclado aparece entero. Abierta la fila, la FOTO
       sube por encima del disparador y lleva a la ficha: el resto de la
       cabecera la vuelve a cerrar. */
    .cst-car-ph{display:contents}
    .cst-car-ph img,.cst-car-ph-no{grid-area:ph;position:static;inset:auto;align-self:center;
      box-sizing:border-box;width:3rem;height:3rem;padding:.25rem;border-radius:.75rem;
      background:var(--tile);box-shadow:var(--sh-1);object-fit:contain}
    .cst-car-ph-no{display:grid;place-items:center;font-size:1.2rem}
    /* C7b · con la foto en display contents, la pastilla se para en el MISMO
       casillero que la foto (se superponen, no suma ni fila ni columna). */
    .cst-car-ph-pr{grid-area:ph;position:relative;left:auto;bottom:auto;z-index:3;
      align-self:end;justify-self:start;margin:0 0 -.1rem -.2rem;
      padding:.02rem .3rem;font-size:.5625rem}
    .cst-car-it:has(> .cst-car-ab[open]) .cst-car-ph img{position:relative;z-index:2}
    /* Con DOS clases a proposito: al final de la hoja, el bloque de los
       44 px le pone position relative y un ::after de 44 a .cst-car-n-a, y con
       una sola clase esa regla, que viene despues, ganaba y el enlace seguia
       entero debajo del disparador (medido: 449 px de ancho). */
    .cst-car-n .cst-car-n-a{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
      overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
    .cst-car-n .cst-car-n-a::after{content:none}
    .cst-car-n .cst-car-n-a:focus-visible{position:static;width:auto;height:auto;margin:0;
      overflow:visible;clip:auto;white-space:normal}
    .cst-car-n:has(.cst-car-n-a:focus-visible) .cst-car-n-t{display:none}
    .cst-car-n-t{display:inline}
    /* Nombre en dos renglones y debajo UN renglon: color · unidades · stock.
       Lo que no entra se corta con puntos: la fila no crece nunca. */
    .cst-car-inf{grid-area:inf;align-self:center;min-width:0;display:grid;
      grid-template-columns:minmax(0,max-content) minmax(0,max-content) minmax(0,1fr);
      column-gap:.3rem;row-gap:.1rem}
    .cst-car-inf-t{display:contents}
    .cst-car-n{grid-column:1/-1;font-size:.8125rem;line-height:1.2}
    .cst-car-col,.cst-car-cu,.cst-car-st{display:block;min-width:0;margin:0;
      font-size:.7rem;font-weight:600;line-height:1.3;color:var(--ink2);
      white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .cst-car-st-low{color:var(--warn)}
    .cst-car-col::after{content:" ·"}
    .cst-car-st::before{content:"· "}
    .cst-car-st .cst-ico{vertical-align:-.15em}
    /* La plata, contra el borde derecho: el total de la linea y debajo el
       tachado y el «c/u», cada uno en su renglon. Con oferta y mas de una
       unidad son tres renglones y entran en los 48 px de la foto (17 + 13 +
       13): medido a 360 con seis cifras. El ahorro va al panel. Nada se corta
       con puntos: es plata. */
    .cst-car-pz{grid-area:pz;align-self:center;justify-self:end;max-width:none;
      flex-direction:column;flex-wrap:nowrap;align-items:flex-end;justify-content:center;
      gap:0;line-height:1.15}
    .cst-car-pz::after{content:none}
    .cst-car-linea{order:0;font-size:.9375rem}
    .cst-car-was{order:1;font-size:.72rem}
    .cst-car-uni{order:2;font-size:.72rem}
    .cst-car-save{display:none}
    /* El disparador: la cabecera ENTERA, con los margenes negativos que la
       llevan hasta el borde de la card, por encima de la foto y del nombre
       (z-index 1). */
    .cst-car-ab{display:block;grid-area:1/1/3/-1;align-self:stretch;justify-self:stretch;
      position:relative;z-index:1;margin:-.5rem -.625rem -.5rem -.5rem}
    .cst-car-ab-s{position:absolute;inset:0;display:flex;align-items:center;justify-content:flex-end;
      box-sizing:border-box;padding:0 .625rem 0 0;
      list-style:none;cursor:pointer;border-radius:1rem;-webkit-tap-highlight-color:transparent}
    .cst-car-ab-s::-webkit-details-marker{display:none}
    .cst-car-ab-s::marker{content:''}
    .cst-car-ab-s:focus-visible{outline:2px solid var(--acento-txt);outline-offset:-2px;border-radius:1rem}
    .cst-car-ab-i{width:1.25rem;height:1.25rem;color:var(--ink2);transition:transform .25s var(--ease)}
    .cst-car-ab[open] .cst-car-ab-i{transform:rotate(180deg)}
    /* El panel: la pastilla, el ahorro y Quitar, separados de la cabecera por
       una linea fina. Quitar va al otro extremo, lejos del menos. */
    .cst-car-pa{grid-area:pa;display:none;flex-wrap:wrap;align-items:center;gap:.5rem .25rem;
      margin-top:.5rem;padding-top:.5rem;border-top:1px solid var(--line2)}
    .cst-car-it:has(> .cst-car-ab[open]) > .cst-car-pa{display:flex}
    .cst-car-pa .cst-car-q{flex:none}
    /* La base de 4.25rem es el ahorro partido en dos renglones: con eso la tira
       entra en UN renglon desde 360 px con seis cifras, y solo en un telefono
       de 320 Quitar baja abajo, contra el borde. Nunca se pisan. */
    .cst-car-pa-d{display:flex;flex:1 1 4.25rem;align-items:center;min-width:0}
    .cst-car-pa-d:empty{display:none}
    /* El ahorro entra en un renglon; si a 360 la cifra es de seis o siete
       digitos y no entra al lado de la pastilla y de Quitar, parte en dos
       adentro de su propia pastilla. Nunca se corta con puntos: es plata. */
    .cst-car-pa-s{padding:.15rem .35rem;border-radius:.5rem;font-size:.7rem;font-weight:800;
      line-height:1.2;color:var(--ok);background:color-mix(in srgb,var(--ok) 13%,var(--sup))}
    .cst-car-pa .cst-car-xf{margin:0 0 0 auto}
    /* Quitar tiene el MISMO ancho armado y sin armar (min-width): si al primer
       toque el boton cambiara de tamanio, se correria de debajo del dedo y el
       segundo toque caeria en otro lado. */
    .cst-car-x{display:flex;align-items:center;justify-content:center;width:auto;min-width:5.75rem;
      gap:.375rem;padding:0 .5rem;border-radius:.75rem;color:var(--ink2);
      font-family:var(--f);font-size:.8125rem;font-weight:700;white-space:nowrap}
    .cst-car-x-ix{display:none}
    .cst-car-x-it{display:inline-block}
    .cst-car-x-t{display:inline}
    /* Armado: el primer toque lo pone rojo y pregunta «¿Quitar?»; el segundo
       quita. Lo hace el script del final (sin el, quita de un toque, pero
       recien despues de abrir la fila). */
    .cst-car-x[data-arm]{color:var(--bad);background:color-mix(in srgb,var(--bad) 10%,var(--sup))}
    /* ABIERTA, LA FILA DICE ENTERO LO QUE CERRADA CORTA CON PUNTOS. Cerrada
       mide 64 siempre, y con un total de siete cifras el renglon de abajo del
       nombre se queda sin lugar: a 360 «Color: Gris Espacial Oscuro» decia
       «Color: Ne...» y a 320 «Col...», y abrir la fila no lo mostraba en
       ningun lado (lo encontro el verificador el 12-10). Abierta, ese renglon
       -color, unidades, aviso de stock- pasa a ser texto corrido que parte
       donde hace falta, y la cabecera crece lo justo. Si todo entraba en un
       renglon, abierta y cerrada se dibujan igual: no salta nada. El nombre
       sigue en dos renglones, como en el mockup votado: entero esta en la
       ficha, a un toque de la foto. */
    .cst-car-it:has(> .cst-car-ab[open]){grid-template-rows:minmax(1.5rem,auto) minmax(1.5rem,auto) auto}
    .cst-car-it:has(> .cst-car-ab[open]) .cst-car-inf{display:block;font-size:.7rem;line-height:1.3}
    .cst-car-it:has(> .cst-car-ab[open]) .cst-car-n{margin-bottom:.1rem}
    .cst-car-it:has(> .cst-car-ab[open]) :is(.cst-car-col,.cst-car-cu){display:inline;
      overflow:visible;white-space:normal;overflow-wrap:anywhere}
    /* El aviso de stock va en bloque chico: si no entra al lado de las
       unidades baja entero al renglon de abajo, y el icono no queda
       huerfano al final de un renglon con el texto en el siguiente. Y una
       palabra mas ancha que la columna (a 320, con siete cifras, la columna
       del texto mide 60 px y «disponibilidad» 80) se parte antes que
       salirse. */
    .cst-car-it:has(> .cst-car-ab[open]) .cst-car-st{display:inline-block;max-width:100%;
      overflow:visible;white-space:normal;overflow-wrap:anywhere}
    .cst-car-it:has(> .cst-car-ab[open]) .cst-car-cu,
    .cst-car-it:has(> .cst-car-ab[open]) .cst-car-col::after,
    .cst-car-it:has(> .cst-car-ab[open]) .cst-car-st::before{white-space:nowrap}
  }
}

/* ═══ B4 · 12-10 · LA PROMO NxM, DE UN TOQUE ══════════════════════════════════
   Diego: «si hay algo en 2x1 y agregas uno solo al carrito, estaria bueno que
   tengas un boton para agregar directamente la promo, no tener que poner dos
   unidades». Dos piezas, y ninguna es un componente nuevo de verdad: son la
   pastilla de la promo (.cst-pro, solida en el cartel, halo de la marca) hecha
   boton.

   · FICHA · .cst-f-nxm, debajo de «Agregar al carrito», a todo el ancho de la
     caja. Superficie con HALO, no relleno: la accion fuerte de la caja sigue
     siendo la azul, y dos botones azules llenos uno arriba del otro se leen
     como el mismo boton dos veces. El color va en el cartel (tinta solida) y
     en el mas (en el tono de la marca).
   · CARRITO · .cst-car-nxm, un renglon propio debajo de la linea que no llega
     a la promo. El aviso ES el boton: una frase y un circulo con el mas. En la
     computadora arranca alineado con el nombre (columna 2); en el telefono, de
     borde a borde de la fila.

   🔴 44 PX DE ALTO las dos (2.75rem), con o sin mouse.
   🔴 Ningun selector de etiqueta: solo clases propias, para no entrar en la
      cascada de nadie. El cartel adentro del boton de la ficha va con DOS
      clases porque .cst-pro-c se achica a 11 px en el telefono y aca es la
      palabra que dice que hace el boton. */
.cst-f-nxm{flex:1 1 100%;margin:.6rem 0 0}
.cst-f-nxm-b{width:100%;background:var(--sup);color:var(--ink);
  box-shadow:0 1px 2px color-mix(in srgb,var(--marca) 14%,transparent),
             0 8px 22px color-mix(in srgb,var(--marca) 26%,transparent)}
@media (hover:hover) and (pointer:fine){
  .cst-f-nxm-b:hover{box-shadow:0 2px 4px color-mix(in srgb,var(--marca) 16%,transparent),
                                0 14px 32px color-mix(in srgb,var(--marca) 36%,transparent)}
}
.cst-f-nxm-i{color:var(--marca)}
.cst-f-nxm-b .cst-pro-c{font-size:.8125rem;padding:.16rem .55rem}
.cst-f-nxm-b[aria-busy="true"]{opacity:.55;pointer-events:none}

.cst-car-nxm{grid-column:2/-1;justify-self:start;min-width:0;max-width:100%;margin:0}
.cst-car-nxm-b{display:inline-flex;align-items:center;gap:.55rem;max-width:100%;
  min-height:2.75rem;padding:.25rem 1rem .25rem .375rem;box-sizing:border-box;
  border:0;border-radius:99px;cursor:pointer;text-align:left;
  background:var(--sup);color:var(--ink);font-family:var(--f);
  font-size:.8125rem;font-weight:700;line-height:1.25;letter-spacing:-.01em;
  box-shadow:0 1px 2px color-mix(in srgb,var(--marca) 14%,transparent),
             0 8px 20px color-mix(in srgb,var(--marca) 24%,transparent);
  transition:transform .22s var(--ease),box-shadow .22s var(--ease)}
@media (hover:hover) and (pointer:fine){
  .cst-car-nxm-b:hover{transform:translateY(-2px);
    box-shadow:0 2px 4px color-mix(in srgb,var(--marca) 16%,transparent),
               0 14px 30px color-mix(in srgb,var(--marca) 34%,transparent)}
}
.cst-car-nxm-b:active{transform:scale(.98)}
.cst-car-nxm-b b{font-weight:800;color:var(--marca);font-variant-numeric:tabular-nums}
.cst-car-nxm-i{display:grid;place-items:center;flex:none;width:2rem;height:2rem;
  border-radius:99px;background:var(--marca);color:var(--marca-txt);font-size:.95rem}
.cst-car-nxm-b:focus-visible{outline:2px solid var(--acento-txt);outline-offset:2px}
@media (max-width:44rem){
  .cst-car-nxm{grid-column:1/-1}
}
/* En la fila que se abre del telefono la reja no tiene hueco entre renglones
   (row-gap 0): el aviso se separa de la cabecera por su cuenta. */
@media (max-width:30rem){
  .cst-car-nxm{margin-top:.5rem}
}

/* ═══ CA-08 · «SUMÁ ESTO», ABAJO DE TODO ════════════════════════════════════
   Cuatro reglas y ni una más, porque la góndola NO es un componente nuevo: es
   la MISMA `webRenderGrilla()` de la vidriera, con la misma card y el mismo
   botón de agregar. Lo único que hace falta es acomodarla adentro del carrito.

   🔴 DÓNDE VA, QUE ES LA DECISIÓN DE VERDAD: **después** de la grilla del
   carrito, o sea abajo de la lista Y abajo del resumen. A 390 px las dos
   columnas se apilan, así que cualquier cosa metida entre medio le empuja
   «Finalizar compra» para abajo — y el motivo de esta pantalla es pagar, no
   mirar más productos. Puesta al final, el que vino a pagar no la cruza nunca
   y el que ya scrolleó la encuentra. Diego, de otra pantalla: «parece re poco
   importante» — acá es al revés, lo secundario tiene que ir donde se lee como
   secundario.

   1) El `.cst-wrap` que la sección trae adentro se anula: ya estamos adentro
      de uno (`#cst-car-zona` ES un `.cst-wrap`) y anidarlos metía 2 rem de
      más por lado — a 390 px eso le come 64 px a dos cards que ya están
      justas. No se toca `webRenderGrilla()`: el que se adapta es el que lo
      mete adentro.
   2) El aire de arriba es el del carrito, no el de una sección de portada.
   3) Una línea fina arriba —no una caja, no un fondo— que dice «esto es otra
      cosa». 🟦 Nada de fondo azul: el bloque respira con el mismo fondo de la
      página y el peso lo pone el halo de cada card, que ya lo traen.
   4) El título, un escalón más chico que el del carrito: abajo de «Tu carrito»
      no puede haber otro encabezado del mismo tamaño compitiendo. */
/* 🔴 SE LLAMA `cst-xsell` Y NO `cst-sug`, Y NO ES UN CAPRICHO: `.cst-sug` YA
   EXISTE en este archivo —es el desplegable de sugerencias del BUSCADOR, línea
   1718— y viene con `position:absolute`, `z-index:81` y `top:calc(100% + .5rem)`.
   Escrito con ese nombre, la góndola del carrito salía flotando encima de otra
   cosa sin que una sola línea de MI código lo dijera. Es la colisión de cascada
   de siempre, cazada contando las apariciones de la clase ANTES de subir. */
.cst-xsell{margin-top:clamp(2.25rem,5vw,3.5rem);
  padding-top:clamp(1.5rem,3.5vw,2.25rem);border-top:1px solid var(--linea)}
.cst-xsell .cst-wrap{width:100%;margin-inline:0}
.cst-xsell .cst-sec{padding-top:0}
.cst-xsell .cst-sec-h{margin-bottom:clamp(1rem,2.4vw,1.5rem)}
.cst-xsell .cst-h2{font-size:clamp(1.25rem,2.6vw,1.6rem)}
.cst-xsell[hidden]{display:none!important}

/* ═══ EL CAJÓN DEL CARRITO (VP-59) ══════════════════════════════════════════
   Diego, 06-09: «si agregás algo al carrito te manda al carrito de una; debía
   abrirse el carrito al costado y vos decidir ir al carrito, no que te lleve».

   Entra desde la derecha con lo que hay adentro y deja DOS salidas: cerrarlo y
   seguir, o ir al carrito. El que iba a llevar tres cosas deja de irse con una.

   🔴 ES UNA MEJORA, NO EL CAMINO. Sin JavaScript el <form> postea igual y el
   303 de siempre sigue siendo el plan B: la compra no se pierde. Por eso el
   cajón nace `hidden`, y el script lo SACA del HTML si en la página no hay ni
   un «Agregar» que interceptar.

   El halo cae a la IZQUIERDA (--sh-cj): es el mismo celeste de la casa girado
   hacia donde está el contenido. Sombra de color, nunca un borde al costado.

   En celular ocupa casi todo, pero NUNCA todo: quedan 44 px de fondo a la
   izquierda. Ese pedacito es la salida más rápida —se toca afuera y se cierra—
   y además dice, sin escribirlo, que la página sigue ahí atrás. */
.cst-cj-w{position:fixed;inset:0;z-index:100;display:flex;justify-content:flex-end}
.cst-cj-f{position:absolute;inset:0;background:color-mix(in srgb,var(--negro) 46%,transparent);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  opacity:0;transition:opacity .3s var(--ease)}
.cst-cj{position:relative;display:flex;flex-direction:column;
  width:min(27rem,100% - 2.75rem);height:100dvh;max-height:100dvh;
  background:var(--sup);border-radius:var(--r-l) 0 0 var(--r-l);
  box-shadow:var(--sh-cj);transform:translateX(102%);
  transition:transform .34s var(--ease)}
/* El cajón recibe el foco al abrir para que el lector anuncie el diálogo. Es un
   destino de foco, no un control: no lleva anillo. Los controles de adentro sí. */
.cst-cj:focus{outline:none}
.cst-cj-w.cst-cj-on .cst-cj-f{opacity:1}
.cst-cj-w.cst-cj-on .cst-cj{transform:none}

.cst-cj-h{flex:none;display:flex;align-items:center;gap:.5rem;
  padding:calc(1rem + env(safe-area-inset-top)) .75rem 1rem 1.35rem;
  border-bottom:1px solid var(--line2)}
.cst-cj-t{margin:0;display:flex;align-items:center;gap:.5rem;min-width:0;
  font-size:.95rem;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.cst-cj-t-i{flex:none;font-size:1.1rem;color:var(--ok)}
.cst-cj-x{width:2.75rem;height:2.75rem;flex:none;margin-left:auto;display:grid;
  place-items:center;padding:0;border:0;border-radius:.85rem;background:none;
  cursor:pointer;color:var(--muted);font-size:1rem;
  transition:background .25s var(--ease),color .25s var(--ease)}
@media (hover:hover) and (pointer:fine){
  .cst-cj-x:hover{background:var(--fondo2);color:var(--ink)}
}

/* El servidor manda el adentro entero (lista + subtotal + salidas) y acá se
   pega tal cual. La lista scrollea; el subtotal y los botones NO se van de
   pantalla por más productos que haya. */
.cst-cj-b{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.cst-cj-in{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.cst-cj-sc{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;padding:.25rem 1.35rem .75rem}
.cst-cj-p{flex:none;padding:1rem 1.35rem calc(1.15rem + env(safe-area-inset-bottom));
  border-top:1px solid var(--line2)}

/* ⭐ EL CAJÓN A CARDS. Diego ya había aprobado «cards» para este cajón en un
   mockup anterior y quedó pendiente de codear — no es un rediseño nuevo, es
   terminar uno ya aprobado. Cada renglón pasa de fila-con-línea-divisoria a
   card propia: fondo, radio y sombra DE COLOR (la firma de la casa — nunca
   `border-left` ni una raya al costado), separadas por aire en vez de una
   línea. `gap` en el `<ul>` en vez de `margin` en cada `<li>`: un solo lugar
   decide la separación. */
.cst-cj-ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:.65rem}
/* ── CA-18 · DESLIZAR PARA QUE APAREZCA EL TACHO ───────────────────────────
   El <li> es sólo el marco: recorta y guarda el tacho a la derecha. Lo que se
   mueve es `.cst-cj-desl`, la capa de adentro. Así el renglón se corre entero
   —foto, nombre y precio juntos— y no se desarma mientras el dedo lo empuja.
   🔴 `overflow:hidden` Y `box-shadow` CONVIVEN BIEN: el shadow de una caja no
   lo recorta su propio `overflow` (sólo recorta a los HIJOS) — es el mismo
   truco que ya usa `.cst-cj-ph` un poco más abajo. */
.cst-cj-it{position:relative;overflow:hidden;border-radius:var(--r-m);
  background:var(--sup);box-shadow:var(--sh-1)}
.cst-cj-desl{position:relative;z-index:1;
  display:grid;grid-template-columns:3.5rem minmax(0,1fr) max-content;
  gap:.85rem;align-items:center;
  /* Antes era `.9rem 0` (a lo ancho de la fila, sin aire a los costados: el
     borde de la card no existía). El padding lateral es SEGURO acá adentro:
     no cambia el ANCHO de la caja ni su posición, así que el gesto de
     deslizar (`translateX(-3.85rem)`, más abajo) sigue destapando el tacho
     exactamente igual. */
  padding:.9rem 1rem;
  background:var(--sup);
  /* 🔴 `pan-y` LE DEVUELVE EL SCROLL VERTICAL AL CAJON. Con `touch-action`
     suelto, el navegador podía llevarse el gesto para los dos lados; con
     `pan-y` el navegador se queda SÓLO con el vertical y lo horizontal es
     nuestro. Es la mitad de «el deslizamiento no puede robarle el scroll a la
     página»; la otra mitad es el ángulo, que decide el script. */
  touch-action:pan-y;
  transition:transform .26s var(--ease)}
/* La transición se apaga mientras el dedo está apoyado: si no, el renglón
   persigue al dedo con 260 ms de atraso y se siente elástico, no agarrado. */
.cst-cj-it.cst-cj-dedo .cst-cj-desl{transition:none}
/* Abierto: por el gesto (la clase), por el mouse o por el teclado. Tres formas
   de llegar al mismo tacho — el gesto es comodidad, no el único camino. */
.cst-cj-it.cst-cj-abierto .cst-cj-desl{transform:translateX(-3.85rem)}
.cst-cj-it:focus-within .cst-cj-desl{transform:translateX(-3.85rem)}
@media (hover:hover) and (pointer:fine){
  .cst-cj-it:hover .cst-cj-desl{transform:translateX(-3.85rem)}
}
/* ⚠️ SE LLAMA `-tacho` Y NO `-x`: `.cst-cj-x` YA ERA la ✕ que cierra el cajón
   (está 50 líneas más arriba). Reusar el nombre pintaba de rojo el botón de
   cerrar y, peor, hacía que `document.querySelector(".cst-cj-x")` del script
   agarrara el de cerrar en vez del tacho. Es la colisión de cascada de siempre,
   y esta vez se cayó del lado del JavaScript. */
.cst-cj-tf{position:absolute;top:0;right:0;bottom:0;display:flex;align-items:center;z-index:0}
/* El tacho es lo único rojo de la tienda, y tiene que serlo: es la única acción
   que no se puede deshacer sola. Blanco sobre --bad da 4,6:1 en claro y el
   ícono es un trazo grueso, así que se lee sin esfuerzo. */
/* 🔴 UN BOTÓN, NO UN PAREDÓN. Con `min-height:100%` el tacho copiaba el alto
   del renglón, y un renglón del cajón con el título en cuatro líneas mide 190 px:
   quedaba un bloque rojo enorme al costado de un producto de $18.900. Un
   cuadrado redondeado de 52 px, centrado, dice lo mismo sin gritar — y sigue
   midiendo bastante más que los 44 px de área táctil que pide AC-14. */
.cst-cj-tacho{width:3.25rem;height:3.25rem;margin-right:.3rem;
  display:grid;place-items:center;border-radius:1.1rem;
  border:0;cursor:pointer;background:var(--bad);color:#fff;font-size:1.15rem;
  box-shadow:0 6px 16px color-mix(in srgb,var(--bad) 42%,transparent);
  transition:filter .2s var(--ease)}
@media (hover:hover) and (pointer:fine){
  .cst-cj-tacho:hover{filter:brightness(1.08)}
}
.cst-cj-tacho:focus-visible{outline:2px solid var(--ink);outline-offset:-4px}
/* ── El «Deshacer», arriba del hueco y afuera de él ────────────────────────
   🔴 VIVE FUERA DE `#cst-cj-b` A PROPÓSITO: ese hueco lo reemplaza entero el
   servidor en cada repintado, y el aviso tiene que sobrevivir justo al
   repintado que lo provocó. */
/* Sin relleno de color, por el mismo motivo que el bloque de envío (VP-73):
   --fondo2 es el celeste pastel que Diego marcó. Superficie, línea fina y una
   sombra suave — el color lo pone el botón, que es lo que se toca. */
.cst-cj-desh{flex:none;display:flex;align-items:center;gap:.6rem;
  margin:.15rem 1.35rem .5rem;padding:.55rem .55rem .55rem .85rem;border-radius:.95rem;
  background:var(--sup);border:1px solid var(--line);box-shadow:var(--sh-1);
  font-size:.78rem;color:var(--ink2)}
.cst-cj-desh-t{min-width:0;flex:1;line-height:1.35;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.cst-cj-desh-b{flex:none;min-height:2.25rem;padding:0 .75rem;border:0;border-radius:.6rem;
  background:var(--marca);color:var(--marca-txt);cursor:pointer;
  font-family:var(--f);font-size:.78rem;font-weight:800}
.cst-cj-desh-b:focus-visible{outline:2px solid var(--acento-txt);outline-offset:2px}
.cst-cj-desh[hidden]{display:none!important}
.cst-cj-ph{position:relative;aspect-ratio:1/1;overflow:hidden;border-radius:var(--r-s);
  background:var(--tile);box-shadow:var(--sh-1);display:block}
.cst-cj-ph img{position:absolute;inset:8%;width:84%;height:84%;display:block;
  object-fit:contain;mix-blend-mode:multiply}
.cst-cj-ph-no{position:absolute;inset:0;display:grid;place-items:center;
  color:var(--segundo);font-size:1.15rem}
.cst-cj-inf{min-width:0;display:flex;flex-direction:column;gap:.15rem}
/* El nombre entero, igual que en la card y en el carrito. Nada de puntos
   suspensivos: el que acaba de agregar algo tiene derecho a leer qué agregó. */
.cst-cj-n{margin:0;font-size:.82rem;font-weight:700;line-height:1.35;
  letter-spacing:-.01em;color:var(--ink);overflow-wrap:break-word}
.cst-cj-col{margin:0;font-size:.72rem;font-weight:600;color:var(--muted);overflow-wrap:break-word}
.cst-cj-col b{font-weight:800;color:var(--ink2)}
.cst-cj-q{margin:0;font-size:.72rem;color:var(--muted);font-variant-numeric:tabular-nums}
.cst-cj-pz{font-size:.88rem;font-weight:800;letter-spacing:-.02em;color:var(--ink);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.cst-cj-vac{margin:1.75rem 0;text-align:center;font-size:.85rem;line-height:1.6;
  color:var(--muted)}

.cst-cj-sub{display:flex;align-items:baseline;justify-content:space-between;gap:.75rem}
.cst-cj-sub-k{font-size:.84rem;font-weight:700;color:var(--ink2)}
.cst-cj-sub-v{font-size:1.35rem;font-weight:800;letter-spacing:-.03em;color:var(--ink);
  font-variant-numeric:tabular-nums}
/* ── VP-68 · «IR AL CARRITO» VA EN EL AZUL DE ACCIÓN ────────────────────────
   Diego, textual: «cuando se abre el menú lateral de carrito también cambiar el
   azul de ir al carrito». Reusaba `.cst-cta` —celeste --acento con tinta
   oscura—, que es la pastilla de los CTA secundarios («Ver el catálogo» del
   estado vacío). Pero en el cajón ése no es un CTA secundario: es LA acción de
   todo el panel, la que se quiere que toquen. Va en --marca, igual que
   «Agregar» y «Comprar».
   🔻 16-09 · ACÁ YA NO SE PISA NINGÚN COLOR. Cuando se escribió esto, `.cst-cta`
   era celeste y había que taparlo; desde VP-63/VP-64 `.cst-cta` YA nace en
   `--marca` (ver su bloque, más abajo), así que de esta regla sólo queda vivo
   lo que nunca fue color: el ancho completo y el margen del cajón. Se deja el
   `background`/`color` escrito a propósito —cuesta cero y documenta que este
   botón es de la familia azul— pero no está corrigiendo nada.
   Blanco sobre #2563c9 = 5,67:1, AA en cualquier tamaño. */
/* ⚠️ `.cst-cta.cst-cj-ir` Y NO `.cst-cj-ir` A SECAS. Las dos clases pesan lo
   mismo (0,1,0) y `.cst-cta` está declarada 70 líneas MÁS ABAJO en esta misma
   hoja, así que a igualdad de peso ganaba ella y el botón seguía saliendo
   celeste — la colisión de cascada de siempre, esta vez sin que se vea nada raro
   en el código. Con las dos clases juntas (0,2,0) el orden deja de importar. */
.cst-cta.cst-cj-ir{width:100%;margin-top:.9rem;
  background:var(--marca);color:var(--marca-txt);
  box-shadow:0 10px 26px color-mix(in srgb,var(--marca) 42%,transparent)}
@media (hover:hover) and (pointer:fine){
  .cst-cta.cst-cj-ir:hover{box-shadow:0 18px 40px color-mix(in srgb,var(--marca) 52%,transparent)}
}
/* «Seguir comprando» es la salida tranquila: mismo peso que el «Seguir
   comprando» del carrito, y CIERRA — no navega a ningún lado. */
.cst-cj-seg{display:flex;align-items:center;justify-content:center;gap:.4rem;
  width:100%;min-height:2.75rem;margin-top:.35rem;padding:0 .8rem;border:0;
  border-radius:99px;background:none;cursor:pointer;font-family:var(--f);
  font-size:.82rem;font-weight:700;color:var(--muted);
  transition:color .25s var(--ease)}
@media (hover:hover) and (pointer:fine){
  .cst-cj-seg:hover{color:var(--acento-txt)}
}

/* Mientras el pedido viaja: el botón se opaca y no se puede volver a tocar.
   Sin esto, el que aprieta «Agregar» tres veces rápido no sabe si lo escuchó. */
.cst-add[aria-busy="true"],.cst-f-add[aria-busy="true"]{opacity:.55;pointer-events:none}
/* Con el cajón abierto la página de atrás no scrollea: si scrollea, el dedo
   mueve el fondo y el cajón parece pegado a la nada. */
html.cst-cj-nsc,html.cst-cj-nsc body{overflow:hidden}
/* El molde que viaja en /carrito para que el cajón lo copie. Nunca se ve. */
.cst-cj-molde{display:none!important}

/* Regla 3 de 02_DISENO §11: el que define su `display` define su `[hidden]`. */
.cst-cj-w[hidden],.cst-cj[hidden],.cst-cj-h[hidden],.cst-cj-t[hidden],
.cst-cj-x[hidden],.cst-cj-b[hidden],.cst-cj-in[hidden],.cst-cj-sc[hidden],
.cst-cj-p[hidden],.cst-cj-ul[hidden],.cst-cj-it[hidden],.cst-cj-ph[hidden],
.cst-cj-inf[hidden],.cst-cj-n[hidden],.cst-cj-sub[hidden],.cst-cj-ir[hidden],
.cst-cj-seg[hidden]{display:none!important}

/* ═══ ESTADO VACÍO (VP-39) ═══════════════════════════════════════════════════
   Nunca una pantalla muda. */
.cst-vacio{display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:.75rem;max-width:44rem;margin-inline:auto;
  padding:clamp(2.5rem,7vw,4rem) 1.5rem;background:var(--sup);
  border:1px solid var(--line);border-radius:var(--r-l);box-shadow:var(--sh-2)}
.cst-vacio-ico{width:4rem;height:4rem;border-radius:50%;display:grid;place-items:center;
  background:var(--celeste);color:var(--acento-txt);font-size:1.75rem;
  box-shadow:0 10px 30px rgba(var(--halo),.55)}
.cst-vacio-t{margin:.35rem 0 0;font-size:1.125rem;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.cst-vacio-p{margin:0;max-width:42ch;font-size:.875rem;color:var(--muted);line-height:1.6}
/* ═══ ⭐ VP-63/VP-64 · EL BOTÓN PRINCIPAL DEJA DE SER PASTEL ═════════════════
   Diego, dos veces: *«mucho negro en la web… podríamos poner más azul, y el
   color de fondo que está en ese texto no me gusta; EN GENERAL ESE COLOR PARA
   FONDOS ES MUY PASTEL»*.

   🔴 Y NO ES SÓLO GUSTO, ESTÁ MEDIDO. Esto era `background:var(--acento)`
   (#92c0e4) y **el relleno contra la página da 1,93:1**. El texto de adentro
   pasaba de sobra (#22272f sobre #92c0e4 = 7,78:1) y por eso nadie lo había
   cazado: lo que NO pasaba era el botón contra el blanco. La WCAG 1.4.11 pide
   **3:1 para el borde de un control**, y 1,93 es menos de la mitad. O sea que
   el objeto más importante de la pantalla **no se recortaba del fondo** — que
   es, palabra por palabra, el otro reproche de Diego: *«parece re poco
   importante»*. Es el MISMO 1,93:1 que ya había obligado a inventar
   `--acento-txt` para el texto: el acento es para ACENTOS, no para rellenos.

   ⭐ AHORA VA EN `--marca`, que ya existía y ya es el azul de «Agregar al
   carrito», «Finalizar compra» y del chip de descuento. **Un solo azul y un
   solo significado: si es azul lleno, es LA acción de esa pantalla.** No se
   inventó ningún tono nuevo y no se tocó el navy viejo.

   🔵 `.cst-cta` se usa en cinco lugares y en los cinco es la acción principal
   de SU pantalla: el botón grande del hero, «Ver el catálogo» del carrito
   vacío y de la búsqueda sin resultados, el del cajón y el de la página de
   arrepentimiento. Por eso el cambio va en la clase base y no en cinco reglas.

   📐 Medido: #ffffff sobre #2563c9 = **5,67:1** (AA en cualquier tamaño) y el
   relleno contra la página = **5,67:1** sobre blanco, **5,17:1** sobre
   `--fondo` y **4,75:1** sobre `--fondo2` — los tres bien por encima del 3:1.

   ⚠️ EL HALO SIGUE SIENDO LA FIRMA DE LA CASA, sólo que ahora está teñido del
   azul del botón y no del celeste: un halo celeste debajo de un relleno azul
   se lee como dos objetos distintos. Sombra de color, nunca barra al costado. */
.cst-cta{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:2.75rem;margin-top:.5rem;padding:.75rem 1.4rem;border-radius:99px;
  background:var(--marca);color:var(--marca-txt);font-size:.875rem;font-weight:800;
  text-decoration:none;box-shadow:0 10px 26px color-mix(in srgb,var(--marca) 34%,transparent);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
@media (hover:hover) and (pointer:fine){
  .cst-cta:hover{transform:translateY(-3px);
    box-shadow:0 18px 40px color-mix(in srgb,var(--marca) 44%,transparent)}
}

/* ═══ AVISO ══════════════════════════════════════════════════════════════════
   No es un error: es una explicación. Misma card que el estado vacío, misma
   sombra celeste, sin un solo rojo. Lo único que cambia es la jerarquía: acá el
   título es lo que domina la pantalla, porque el motivo ES el contenido. */
.cst-aviso{max-width:44rem;margin:clamp(2.5rem,8vw,5rem) auto;padding:clamp(2rem,5vw,3.25rem) clamp(1.25rem,4vw,3rem);
  background:var(--sup);border:1px solid var(--line);border-radius:var(--r-l);
  box-shadow:var(--sh-2);text-align:center}
.cst-aviso-t{margin:0;font-size:clamp(1.375rem,4vw,2rem);font-weight:800;letter-spacing:-.03em;
  line-height:1.18;color:var(--ink);text-wrap:balance}
.cst-aviso-p{margin:1rem 0 0;font-size:.9375rem;line-height:1.7;color:var(--ink2);
  text-align:left;max-width:52ch;margin-inline:auto}
.cst-aviso-p + .cst-aviso-p{margin-top:.85rem}
/* El botón de la página de arrepentimiento: debajo de la tarjeta y centrado con
   ella, no pegado al borde de la pantalla. */
.cst-arrep-cta{max-width:44rem;margin:-1.5rem auto clamp(2.5rem,8vw,5rem);text-align:center}
.cst-arrep-cta .cst-cta{margin-top:0}
/* ═══ ⭐ VP-65 · LA ENTREGA ═══════════════════════════════════════════════════
   UN objeto, no cuatro renglones: ícono, la frase grande y la letra chica.
   🔴 SOMBRA DE COLOR, NUNCA BARRA AL COSTADO. El color lo pone el halo teñido
   de `--marca` —la firma de la casa— y la frase, que va en el azul de marca.
   Un `border-left` de acento sería el cliché que Diego sacó del panel.
   📐 #2563c9 sobre blanco = 5,64:1 (AA en cualquier tamaño). El pastel
   `--acento` NO se usa de relleno acá: da 1,93:1 y ya costó un rediseño. */
.cst-ent{display:flex;align-items:center;gap:.7rem;
  padding:.7rem .85rem;border-radius:var(--r-m);background:var(--sup);
  box-shadow:var(--sh-1)}
.cst-ent-ic{flex:none;display:grid;place-items:center;width:2.25rem;height:2.25rem;
  border-radius:50%;color:var(--marca);
  background:color-mix(in srgb,var(--marca) 11%,var(--sup))}
.cst-ent-ic .cst-ico{font-size:1.05rem}
/* 🔴 08-10 · `flex:1 1 0` Y NO `1 1 auto`. Con base `auto` el bloque de texto
   pide el ancho de su contenido —la letra chica es una oración larga— y a
   390 px no entraba al lado del ícono: el círculo se quedaba SOLO en un renglón
   y el texto caía abajo. Un ícono flotando solo arriba de un título es, otra
   vez, un elemento que parece que sobró. Con base 0 el texto se achica hasta lo
   que haya y el objeto vuelve a ser UNO: 116 → 90 px de alto a 390. */
.cst-ent-x{min-width:0;flex:1 1 0}
.cst-ent-t{display:block;font-size:.9375rem;font-weight:800;letter-spacing:-.02em;
  line-height:1.25;color:var(--marca)}
/* 📐 `--ink2` y NO `--muted`, y está medido: la banda de la ficha se apoya en un
   tinte de marca al 6 % (#f2f6fc), y ahí `--muted` (#6b747f) da **4,37:1** — por
   debajo del 4,5 que pide AA para 12 px. Sobre blanco daba 4,74 y pasaba, que es
   justo cómo se cuela un fallo de contraste: anda en dos de las tres pantallas.
   `--ink2` da 8,49:1 sobre el tinte y 9,73:1 sobre blanco. Es el mismo criterio
   que ya usa `.cst-env-pronto` sobre su tinte. */
.cst-ent-s{display:block;margin-top:.1rem;font-size:.75rem;font-weight:600;
  line-height:1.4;color:var(--ink2);overflow-wrap:anywhere}
/* 🔻 12-10 · la acción del cartel («Calculá cuándo llega») se fue, y con ella
   su CSS: ver `webRenderEntrega()`. */
/* ══ 🔴🔴 10-10 · EL BLOQUE DE ENVÍO DE LA FICHA ESTABA ROTO EN EL TELÉFONO ══
   Diego, textual: *«dentro de un producto la información de envío está rota,
   quedó súper alta ocupando todo la pantalla casi»*. Y no era gusto: medido a
   402×874 —su iPhone— el bloque medía **297 px, el 34 % de la pantalla**, con
   «Despachamos el mismo día» partido en **CUATRO renglones** para cuatro
   palabras y la letra chica cortada palabra por palabra en **DOCE**.

   🔴 LA CAUSA ERA ESTE ARCHIVO, DOS RENGLONES MÁS ARRIBA: `.cst-ent-x` tenía
      `flex:1 1 0`. Con base CERO, el bloque de texto declara que no necesita
      ancho, así que los tres hijos —ícono, texto y acción— SIEMPRE entran en
      un renglón y `flex-wrap:wrap` no se dispara NUNCA. El texto se quedaba
      con lo que sobraba después del ícono (36 px) y de «Calculá cuándo llega»
      (149 px, `flex:none`): **58 px de ancho** adentro de la caja de compra,
      que en el teléfono mide 335. Cuatro palabras en 58 px son cuatro
      renglones. Es decir: el `flex-wrap` que este mismo bloque declaraba para
      bajar la acción estaba ahí desde el principio y no podía funcionar.

   ✅ Con base 60 % el texto SÍ pide ancho, la acción ya no entra al lado y baja
      sola — que es lo que el comentario de abajo decía que pasaba y no pasaba.
      Y cuando hay lugar de verdad no cambia NADA: con un solo renglón manda
      `flex-grow`, así que el ancho final es idéntico. Medido: a 768, 1.440 y
      2.560 el bloque sigue en 73 px y una línea, al píxel.

   🔴 Y VA HASTA 30rem, NO 26,25. El corte viejo (420 px) dejaba afuera al
      iPhone 15/16/17 Pro Max, que mide **430**: ahí el bloque medía 142 px con
      el título en DOS renglones. Un corte de «teléfono» que no cubre al
      teléfono más grande no cubre teléfonos. 480 px no toca ninguna pantalla
      de escritorio ni el iPad. */
@media (max-width:30rem){
  /* 12-10 · sin la acción (se fue, ver `webRenderEntrega()`) quedan dos hijos,
     ícono y texto, y con dos hijos esta base ya no aprieta nada: es el mismo
     dibujo que la base 0 de arriba. Se deja por si vuelve un tercer hijo. */
  .cst-ent{flex-wrap:wrap;row-gap:.2rem}
  .cst-ent-x{flex:1 1 60%}
}
/* En la caja de compra el objeto ya está adentro de otra card: sin halo propio
   —dos sombras anidadas se ven sucias— y con un tinte plano que lo separa. */
.cst-f-box .cst-ent{margin:0 0 .9rem;padding:.6rem .7rem;box-shadow:none;
  background:color-mix(in srgb,var(--marca) 6%,var(--sup))}
/* ⭐ 13-10 · #236 · SIN EL CELESTE. «Retiro sin cargo en Palermo» (y el
   cartel de despacho, que es el mismo objeto) se dibujaba con un tinte de
   marca lleno adentro de la caja de compra: un bloque de fondo azul, que va
   contra la regla de Diego para toda la tienda y el panel. Queda BLANCO con
   un contorno fino en el tono —sigue sin halo propio: esta adentro de otra
   card y dos sombras anidadas se ven sucias— y el color se lo quedan el
   icono y la frase, que ya iban en --marca. El disco del icono tambien deja
   de estar relleno: es un aro.
   Va en una regla aparte, y no editando la de arriba, para no mover el
   texto que miran otras pruebas. Vale tambien en el telefono: es el mismo
   bloque y la misma regla. 📐 --ink2 sobre blanco da 9,73:1. */
.cst-f-box .cst-ent{background:var(--sup);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--marca) 20%,var(--line))}
.cst-f-box .cst-ent-ic{background:var(--sup);
  box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--marca) 30%,transparent)}
/* En la grilla y en el carrito sí flota, y se despega de lo que tiene arriba. */
/* En la grilla el objeto se ajusta a su contenido: estirado a 1440 px queda un
   recuadro casi vacío con cuatro palabras a la izquierda, y eso se lee como un
   contenedor sin terminar, no como una promesa. Es un chip que flota. */
/* ⭐ 08-10 · AIRE DE VERDAD ENTRE LOS CONTROLES Y LA PROMESA. Eran 25 px a
   1.440 y **17 px a 390**: con ese hueco y la misma forma de píldora, el cartel
   de despacho se leía como un filtro más — que es, con todas las letras, lo
   que dijo Diego. Ahora son 24 px a 390 y 32 a 1.440 —el margen del riel se come al más
   chico de los dos, así que tenía que ser el de acá el que mandara—, el riel es
   una pista hundida y esto
   sigue siendo lo único que flota: tres señales distintas diciendo lo mismo. */
.cst-sec > .cst-wrap > .cst-ent{margin:clamp(1.5rem,3vw,2rem) 0 1.15rem;
  width:fit-content;max-width:100%}
.cst-car-r .cst-ent{margin:0 0 .9rem}
/* ══ ⭐ 10-10 · «EL CARTEL DE DESPACHAMOS SE VE RARO AHÍ DE LA NADA» ══════════
   Diego, sobre la grilla en el teléfono. Y tenía razón por una razón que se
   mide: a 402 px el cartel quedaba a **25 px de los filtros y 18 de la
   grilla** — o sea, EQUIDISTANTE. Un objeto que está igual de cerca de las dos
   cosas que tiene al lado no pertenece a ninguna, y entonces parece que cayó
   ahí. Encima arriba tiene dos píldoras redondeadas (los filtros) y él es un
   tercer bulto redondeado del mismo ancho: tres formas iguales seguidas.

   ✅ No se saca ni se le agrega nada: se lo PEGA a lo que encabeza. 20 px
      arriba y 7 abajo lo convierten en el título de la lista de productos, que
      es lo que de verdad es —«esto que vas a ver, sale hoy»—. Y se achica el
      círculo del ícono, que a 402 era un disco de 36 px al lado de una frase
      de 15: en el teléfono la promesa es la frase, no el adorno.
   🔴 Sólo en el teléfono y sólo en la grilla: el mismo objeto en la ficha
      (`.cst-f-box .cst-ent`) y en el carrito (`.cst-car-r .cst-ent`) tienen sus
      propios márgenes y no los toca esta regla. */
@media (max-width:30rem){
  .cst-sec > .cst-wrap > .cst-ent{margin:1.25rem 0 .45rem;padding:.6rem .7rem}
  .cst-sec > .cst-wrap > .cst-ent .cst-ent-ic{width:1.9rem;height:1.9rem}
  .cst-sec > .cst-wrap > .cst-ent .cst-ent-ic .cst-ico{font-size:.9rem}
}
/* ══ ⭐ 13-10 · #236 · EN LA PC, EL DESPACHO ES UN RENGLON, NO UNA CARD ═══════
   Diego, sobre /tienda en su monitor: «lo de despachamos en el dia se ve raro
   tambien». Era una tarjeta blanca con halo, suelta entre los filtros y la
   grilla: con los filtros convertidos en chips blancos, una caja blanca mas
   en esa franja se lee como un control mas, que es la misma queja del 08-10.
   ✅ Pasa a ser un renglon chico: el icono en --marca, sin disco; la frase en
      el tono y la letra chica al lado, en el mismo renglon. Sin caja, sin
      halo, sin fondo. Encabeza la grilla —14 px arriba de las cards— igual
      que en el telefono desde el 10-10.
   El TEXTO no se toca: sale de webRenderEntrega(), como siempre.
   🔴 Solo arriba de 40rem: en el telefono sigue la card de siempre.
   ⚠️ El margen de ARRIBA no se redeclara: es el que mira el sabotaje 8 de
   sabotear_pie_y_filtros (PF-7), y una segunda declaracion le ganaria. */
@media (min-width:40.0625rem){
  .cst-sec > .cst-wrap > .cst-ent{margin-bottom:.9rem;padding:0;gap:.5rem;
    border-radius:0;background:none;box-shadow:none}
  .cst-sec > .cst-wrap > .cst-ent .cst-ent-ic{width:auto;height:auto;
    border-radius:0;background:none}
  .cst-sec > .cst-wrap > .cst-ent .cst-ent-ic .cst-ico{font-size:1.05rem}
  /* Frase y letra chica en el MISMO renglon de texto corrido, no en una
     fila flex: medido a 768, con flex la letra chica bajaba entera y el
     punto separador quedaba colgando al principio del segundo renglon. */
  .cst-sec > .cst-wrap > .cst-ent .cst-ent-x{display:block;line-height:1.45}
  .cst-sec > .cst-wrap > .cst-ent .cst-ent-t{display:inline;font-size:.875rem}
  .cst-sec > .cst-wrap > .cst-ent .cst-ent-s{display:inline;margin-top:0;
    font-size:.8125rem}
  .cst-sec > .cst-wrap > .cst-ent .cst-ent-s::before{content:"·";
    margin:0 .5rem;color:var(--muted-f)}
}
/* ══ 12-10 noche · D1 del plan 130 · EL RESUMEN DEL CARRITO, COMPACTO ══════
   Diego, en el celular: «en el resumen sigue estando muy grande lo del envio.
   Mismo el 2x1, el cartel. Todo ocupa mucha pantalla». Medido a 402 con el
   dedo acreditado: 794 px de resumen, 301 del bloque de envio y 93 del cartel
   de despacho, que era una card con halo ADENTRO de otra card.
   ✅ Se aprietan aires y letra, nada mas: ningun dato se va, ningun monto se
      toca, y los blancos de toque (opciones, campo del CP, cupon) siguen en
      44 px. El cartel de despacho pasa a ser un renglon mas de la superficie,
      igual que ya es el bloque de envio desde el 14-09.
   🔴 Solo adentro de .cst-car-r: la ficha tiene su propio bloque y su propio
      techo medido (MS-6), y no se toca desde aca. */
.cst-car-r .cst-car-fg{margin:0 0 .55rem}
.cst-car-r .cst-car-fg-t{margin:0 0 .3rem}
.cst-car-r .cst-car-fila{padding:.26rem 0}
.cst-car-r .cst-car-pro-n{margin:-.1rem 0 .15rem;font-size:.6875rem;line-height:1.35}
.cst-car-r .cst-ent{margin:.3rem 0 0;padding:.35rem 0;gap:.5rem;flex-wrap:nowrap;
  background:none;box-shadow:none;border-radius:0}
.cst-car-r .cst-ent-ic{width:1.6rem;height:1.6rem}
.cst-car-r .cst-ent-ic .cst-ico{font-size:.85rem}
.cst-car-r .cst-ent-t{font-size:.84rem}
.cst-car-r .cst-ent-s{margin-top:0;font-size:.7rem;line-height:1.35}
.cst-car-r .cst-env{margin-top:.15rem;padding-top:.3rem}
.cst-car-r .cst-env-h{padding-top:.15rem;padding-bottom:.35rem;row-gap:.3rem}
.cst-car-r .cst-env-cu{padding-top:.2rem;padding-bottom:.2rem;font-size:.7rem}
.cst-car-r .cst-env-ops{gap:.1rem;padding-top:.2rem;padding-bottom:.2rem}
.cst-car-r .cst-env-fila{padding-top:.2rem;padding-bottom:.2rem}
.cst-car-r .cst-env-d{font-size:.7rem}
.cst-car-r .cst-env-n{padding-top:.3rem;padding-bottom:0;font-size:.6875rem;line-height:1.4}

/* ═══ VP-47 · LA PANTALLA QUE NO ENCONTRÓ NADA ═══════════════════════════════
   Misma card que el aviso (superficie, halo celeste, cero rojo), pero con las
   dos salidas que convierten: el buscador y las categorías. */
.cst-nohay{max-width:44rem;margin:clamp(2rem,6vw,4rem) auto clamp(2.5rem,8vw,5rem);
  padding:clamp(1.6rem,4.5vw,2.75rem) clamp(1.15rem,4vw,2.75rem);
  background:var(--sup);border:1px solid var(--line);border-radius:var(--r-l);
  box-shadow:var(--sh-2);text-align:center}
.cst-nohay .cst-kicker{text-align:center}
.cst-nohay-t{margin:.2rem 0 0;font-size:clamp(1.3rem,4vw,1.875rem);font-weight:800;
  letter-spacing:-.03em;line-height:1.18;color:var(--ink);text-wrap:balance}
.cst-nohay-p{margin:.7rem auto 0;max-width:46ch;font-size:.9375rem;line-height:1.6;
  color:var(--ink2)}
/* El buscador: campo pill + botón, como el de la cabecera. `min-height` de
   16 px de letra para que iOS no haga zoom al tocarlo. */
.cst-nohay-f{position:relative;display:flex;gap:.5rem;align-items:center;
  margin:1.3rem auto 0;max-width:30rem}
.cst-nohay-fi{position:absolute;left:.95rem;top:50%;transform:translateY(-50%);
  font-size:1.05rem;color:var(--muted);pointer-events:none}
.cst-nohay-i{flex:1 1 auto;min-width:0;min-height:2.875rem;box-sizing:border-box;
  padding:.5rem .9rem .5rem 2.6rem;font-family:inherit;font-size:1rem;color:var(--ink);
  background:var(--fondo);border:1px solid var(--line);border-radius:99px}
.cst-nohay-i::placeholder{color:var(--muted)}
.cst-nohay-i:focus-visible{outline:2px solid var(--marca);outline-offset:2px}
.cst-nohay-b{flex:none;min-height:2.875rem;padding:0 1.15rem;border:0;border-radius:99px;
  background:var(--marca);color:var(--marca-txt);font-family:inherit;font-size:.875rem;
  font-weight:800;cursor:pointer;
  box-shadow:0 8px 20px color-mix(in srgb,var(--marca) 30%,transparent);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
@media (hover:hover) and (pointer:fine){
  .cst-nohay-b:hover{transform:translateY(-2px);
    box-shadow:0 14px 30px color-mix(in srgb,var(--marca) 40%,transparent)}
}
.cst-nohay-o{margin:1.5rem 0 .7rem;font-size:.75rem;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted)}
.cst-nohay-cs{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;
  gap:.5rem;justify-content:center}
/* Las categorías como pastillas que flotan sobre su halo, no como una lista de
   links: es el mismo lenguaje de los chips del resto de la tienda. */
.cst-nohay-c{display:inline-flex;align-items:center;gap:.4rem;min-height:2.5rem;
  padding:0 .95rem;border-radius:99px;text-decoration:none;
  background:var(--sup);color:var(--ink);font-size:.8125rem;font-weight:700;
  box-shadow:var(--sh-1);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),color .2s var(--ease)}
.cst-nohay-c .cst-num{font-size:.75rem;font-weight:800;color:var(--muted)}
@media (hover:hover) and (pointer:fine){
  .cst-nohay-c:hover{transform:translateY(-3px);color:var(--marca);
    box-shadow:0 14px 30px color-mix(in srgb,var(--marca) 26%,transparent)}
}
.cst-nohay-cta{margin-top:1.5rem}

/* ═══ VP-50/51 · LA PORTADA DE UNA CATEGORÍA ═════════════════════════════════
   🔴 SIN FOTO NO HAY HUECO: `.cst-cpo-f` (la clase que sólo se pone cuando hay
   foto de verdad) es lo único que abre la segunda columna. Sin ella el texto
   ocupa el ancho entero y la pantalla se ve terminada igual. */
.cst-cpo{padding-top:clamp(1.6rem,3.6vw,2.75rem)}
.cst-cpo-x{display:grid;gap:clamp(1rem,2.5vw,2rem);align-items:center}
.cst-cpo-f .cst-cpo-x{grid-template-columns:minmax(0,1fr)}
@media (min-width:48rem){
  .cst-cpo-f .cst-cpo-x{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
}
.cst-cpo-tx{min-width:0}
/* La madre como volanta Y como link. El chevron mira a la izquierda: es volver. */
a.cst-cpo-k{display:inline-flex;align-items:center;gap:.2rem;text-decoration:none;
  border-radius:99px;transition:color .2s var(--ease)}
a.cst-cpo-k .cst-ico{font-size:.85rem}
@media (hover:hover) and (pointer:fine){ a.cst-cpo-k:hover{color:var(--marca)} }
.cst-cpo-t{margin:.25rem 0 0;font-size:clamp(1.6rem,5vw,2.75rem);font-weight:800;
  letter-spacing:-.03em;line-height:1.08;color:var(--ink);text-wrap:balance}
.cst-cpo-b{margin:.6rem 0 0;max-width:52ch;font-size:clamp(.9375rem,1.4vw,1.0625rem);
  line-height:1.6;color:var(--ink2)}
/* La foto flota sobre su halo, como todo lo demás. `aspect-ratio` fijo para que
   la portada no cambie de alto según qué archivo subieron. */
.cst-cpo-fig{margin:0;border-radius:var(--r-l);overflow:hidden;background:var(--bandeja);
  aspect-ratio:16/9;box-shadow:var(--sh-foto)}
.cst-cpo-fig img{display:block;width:100%;height:100%;object-fit:cover}
/* 216 · con foto de celular la imagen va adentro de un picture: que llene igual. */
.cst-cpo-fig picture{display:block;width:100%;height:100%}
.cst-cpo-subs{list-style:none;margin:clamp(1rem,2.4vw,1.5rem) 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:.5rem}
.cst-cpo-sub{display:inline-flex;align-items:center;gap:.4rem;min-height:2.5rem;
  padding:0 .9rem;border-radius:99px;text-decoration:none;
  background:var(--sup);color:var(--ink2);font-size:.8125rem;font-weight:700;
  box-shadow:var(--sh-1);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),color .2s var(--ease)}
.cst-cpo-sub .cst-num{font-style:normal;font-size:.75rem;font-weight:800;color:var(--muted)}
/* La que estás mirando: tinta de marca y halo de marca. Se distingue por el
   HALO, no por un relleno — el pastel de relleno ya se midió en 1,93:1. */
.cst-cpo-sub-on{color:var(--marca);cursor:default;
  box-shadow:0 8px 20px color-mix(in srgb,var(--marca) 28%,transparent)}
.cst-cpo-sub-on .cst-num{color:var(--marca)}
@media (hover:hover) and (pointer:fine){
  a.cst-cpo-sub:hover{transform:translateY(-3px);color:var(--marca);
    box-shadow:0 14px 30px color-mix(in srgb,var(--marca) 26%,transparent)}
}
/* Con portada, la grilla de abajo no repite el título: arranca más pegada. */
.cst-cpo + .cst-sec{padding-top:clamp(1.2rem,2.6vw,2rem)}

.cst-code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,'Liberation Mono',monospace;
  font-size:.85em;padding:.12em .42em;border-radius:.375rem;
  /* El fondo se mezcla con la tinta sobre la superficie: se separa igual en
     claro y en oscuro sin un token nuevo por tema. */
  background:color-mix(in srgb,var(--ink) 11%,var(--sup));
  color:var(--ink);white-space:nowrap;overflow-wrap:break-word}

/* ═══ PIE ════════════════════════════════════════════════════════════════════ */
/* ⭐ 08-10 · EL AIRE DE ARRIBA BAJA DE 56 A 40 px. Diego, mirando la tienda:
   *«El footer está enorme, con muchas cosas. No me cierra en absoluto el espacio
   que tiene y lo alto que es»*. Medido antes de tocar nada: el pie medía 633 px a
   2.560 y a 1.440, y **961 px a 390×664, o sea una ventana y media de teléfono**.
   De eso, 57 px eran sólo la sangría de arriba. */
/* ⭐ 10-10 · EL ÚNICO CAMBIO DE ESTE TRABAJO QUE TOCA EL ESCRITORIO, y está
   pedido: Diego dijo del pie *«en PC se ve mal, en celular peor»*, así que acá
   —y sólo acá— vale bajarlo en las dos. Es AIRE y nada más: el relleno de
   arriba del pie y la separación entre sus bloques. No se saca un link, no se
   achica un control, no se toca una letra. Medido a 1.440 y a 2.560: el pie
   pasa de 418 px a 390. Todo lo demás del escritorio queda al píxel, y eso lo
   cuida el grupo MS-PC de `prueba_movil_seis.php`. */
/* 🖥️ 15-10 · PIE7 (opcion 3, votada el 14-10). El pie de la PC pasa al idioma
   del telefono que Diego voto en pie6: fondo blanco y SIN raya de corte arriba
   —lo separa el halo celeste hacia arriba, la firma de la casa— y 22 px de aire
   arriba en vez de 30. Son los mismos valores que el bloque del telefono ya
   ponia abajo de 30rem, asi que alli no cambia nada: aquel bloque viene despues
   y sigue mandando el padding-top en 0. El aire de abajo NO va aca (el telefono
   lo hereda de esta regla): lo pone la tarjeta legal con su margen. */
.cst-ft{flex:none;background:var(--pag);
  box-shadow:0 -1px 0 var(--line2),0 -10px 24px -14px rgba(var(--halo),.75);
  padding:clamp(1.125rem,1.6vw,1.375rem) 0 0;
  padding-bottom:env(safe-area-inset-bottom)}
/* ══ 🖥️ PIE7 · EL RENGLON DE ARRIBA ════════════════════════════════════════
   Mockup: documentacion/web/mockups/pie7_footer_pc.html, opcion 3. Antes eran
   dos columnas —la de marca con su frase y la de Ayuda en dos columnas de
   links apilados— y median 260 px de los 440 del pie. Ahora es UN renglon:
   la marca, los links de ayuda corridos uno al lado del otro y WhatsApp
   anclado al borde derecho («esta muy en el medio, no esta a la derecha»).
   🔴 LA LETRA DEL PIE ES UNA ESCALA CERRADA: 15 para la navegacion, 13 para lo
      legal y los botones, 12 para lo fiscal; pesos 500 y 700, nada mas. Es la
      del telefono que Diego voto 8/8 en tipografia; pie7 saco 5 con la letra
      chica y gris de la maqueta (CLAUDE.md, «por que un mockup saca 3/10»).
   👆 Los links siguen midiendo 44 de alto (AC-14, la regla del 0,78rem de mas
      abajo): en un iPad este pie se toca con el dedo.
   ⚠️ flex-wrap a proposito: abajo de unos 1.000 px los links no entran al lado
      de la marca y caen a su propio renglon, con la marca y WhatsApp arriba. */
.cst-ft-g{display:flex;flex-wrap:wrap;align-items:center;gap:0 2rem}
.cst-ft-g > *{min-width:0}
.cst-ft-marca{display:block;flex:none;height:1.625rem;color:var(--negro);--logo-bg:var(--pag)}
.cst-ft-marca svg{height:100%;width:auto;display:block}
.cst-ft-col{flex:1 1 auto}
/* El titulo de la columna lo lee el lector de pantalla y no se dibuja: con una
   sola columna, «AYUDA» en mayusculas espaciadas decia lo obvio y sumaba un
   renglon. Es el recorte de .cst-sr, escrito aca porque la clase del titulo la
   miden prueba_paginas y prueba_catalogo letra por letra. */
.cst-ft-h{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
  font-size:.8125rem;font-weight:700}
.cst-ft-ul{margin:0;padding:0;list-style:none;
  display:flex;flex-wrap:wrap;column-gap:1.5rem}
.cst-ft-a{display:inline-block;padding:.35rem 0;font-size:.9375rem;font-weight:500;
  line-height:1.3;color:var(--ink);text-decoration:none;transition:color .25s var(--ease)}
/* WhatsApp: el logo REAL en su verde de icono (--wa-ico, 3,1:1 sobre blanco; el
   --wa a secas es el del disco y da 1,98) y un halo verde suave. Es la misma
   pastilla del pie del telefono, con su propia clase: si compartieran clase, el
   primero del HTML seria siempre el de la PC y el medidor del telefono lo
   encontraria escondido. */
.cst-ft-wa{position:relative;flex:none;margin-left:auto;display:inline-flex;align-items:center;gap:.5rem;
  min-height:2.125rem;padding:0 .875rem 0 .6875rem;border-radius:99px;
  background:var(--sup);color:var(--ink);font-size:.8125rem;font-weight:700;line-height:1.5;
  white-space:nowrap;text-decoration:none;
  box-shadow:0 0 0 1px var(--line2),0 4px 14px color-mix(in srgb,var(--wa) 24%,transparent);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.cst-ft-wa .cst-ft-wa-i{width:1.125rem;height:1.125rem;flex:none;color:var(--wa-ico)}
.cst-ft-wa::after{content:'';position:absolute;left:0;right:0;top:50%;
  height:2.75rem;transform:translateY(-50%)}
/* Abajo de 60rem los links no entran al lado de la marca: bajan a su propio
   renglon y arriba quedan la marca a la izquierda y WhatsApp a la derecha. Sin
   esto WhatsApp caia SOLO a un tercer renglon (medido a 768). */
@media (max-width:60rem){
  .cst-ft-col{order:3;flex-basis:100%}
}
@media (hover:hover) and (pointer:fine){
  .cst-ft-a:hover{color:var(--marca);text-decoration:underline;text-underline-offset:3px}
  .cst-ft-wa:hover{transform:translateY(-1px);
    box-shadow:0 0 0 1px var(--line2),0 8px 20px color-mix(in srgb,var(--wa) 36%,transparent)}
}
/* ── 🔴 NS-1 · 20-09 · ACÁ VIVÍA `.cst-ft-sobre`, EL BOTÓN «Nosotros» DEL PIE.
      Lo sacó Diego, textual: *«en el footer hay un botón del lado izquierdo que
      dice "Nosotros" también, afuera, no tiene sentido»*.

      Y tiene razón por dos motivos que se suman:
        · es el MISMO destino que el link de la cabecera, que desde E5 está a la
          derecha del menú y se ve en todas las pantallas. Dos botones para el
          mismo lugar en la misma página no son dos caminos, son una duda;
        · colgaba solo abajo de la bajada de marca, sin un título arriba ni nada
          al lado. Un botón con halo y borde flotando en una columna de texto se
          lee como que alguien lo dejó ahí — que es, palabra por palabra, el
          «está muy en el medio, no está a la derecha» de siempre.

      ⚠️ EL LINK DE LA CABECERA NO SE TOCÓ. Es `.cst-hd-sobre` / `.cst-hd-nav`,
      está medido a cinco anchos en `62_PAGINA_NOSOTROS.md` §1 y sigue siendo el
      único camino a la página. `webRSobreLink()` tampoco se tocó: lo leen la
      cabecera y el cajón del celular.
      Lo guarda el grupo 19 de `prueba_contacto.php` y el sabotaje 39. */
.cst-socs{display:flex;gap:.5rem;margin-top:1.15rem}
.cst-soc{width:2.75rem;height:2.75rem;border-radius:.85rem;border:1px solid var(--line);
  display:grid;place-items:center;color:var(--ink2);text-decoration:none;
  transition:.3s var(--ease)}
@media (hover:hover) and (pointer:fine){
  .cst-soc:hover{color:var(--acento-txt);border-color:var(--acento);transform:translateY(-3px)}
}
.cst-pays{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:1.3rem}
.cst-pay{height:1.65rem;padding:0 .55rem;border-radius:.375rem;border:1px solid var(--line);
  display:grid;place-items:center;font-size:.5625rem;font-weight:800;color:var(--ink2);
  letter-spacing:.03em;background:var(--sup)}
/* ══ 🖥️ PIE7 · LA TARJETA LEGAL (opcion 3, voto del 14-10) ══════════════════
   La idea es la de VOTO-10 (14-09): lo legal en SU PROPIA tarjeta, elevada con
   el halo celeste de la casa —sombra de color, nunca un border acá—. Lo que
   cambia es que deja de tener dos filas con una raya en el medio y pasa a ser
   UNA fila, de izquierda a derecha:
     quien es (el escudo de ARCA + la razon social, el CUIT y el ano)
     · los documentos (Terminos, Privacidad, Cambios, Libro de quejas, Defensa)
     · el Boton de arrepentimiento, apoyado en el borde derecho.
   Abajo de 88rem no entra en una fila (medido: la fila entera pide 1.324 px
   de tarjeta, o sea una pantalla de 1.388): la identidad y el boton quedan arriba y
   los documentos bajan a su propio renglon. Abajo de 34rem, uno abajo del
   otro. La grilla y no flex-wrap: con flex-wrap el primero en caerse seria el
   boton, que es el que tiene que quedar apoyado en el borde. */
.cst-legal{display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  grid-template-areas:"id links cta";align-items:center;gap:.25rem 1.25rem;
  margin:.625rem 0 1rem;padding:.5rem .75rem .5rem .5rem;
  border-radius:var(--r-m);background:var(--sup);
  box-shadow:0 0 0 1px var(--line2),0 10px 26px rgba(var(--halo),.45);
  font-size:.8125rem;line-height:1.5;color:var(--ink2)}
.cst-legal-top{grid-area:id;display:flex;align-items:center;gap:.75rem;min-width:0}
/* El CUIT en 12 y en --muted: va sobre la tarjeta BLANCA (--sup), donde ese gris
   da 4,74:1. Sobre --fondo no llegaria (CO-33), y por eso el pie ya no se pinta
   de --fondo. */
.cst-legal-id{margin:0;font-size:.75rem;color:var(--muted);font-variant-numeric:tabular-nums;
  white-space:nowrap}
.cst-legal-id b{display:block;font-size:.8125rem;font-weight:700;color:var(--ink)}
.cst-legal-cp{white-space:nowrap}
.cst-legal-cta{grid-area:cta;justify-self:end}
/* 🔴 EL BOTON DE ARREPENTIMIENTO, COMO BURBUJA. Diego, votando pie7 el 14-10:
   «sin el borde negro, que se sienta como burbuja». Hasta hoy era una pastilla
   rellena de --ink2 (VOTO-10, 16-09), y en la maqueta un contorno de 1 px en
   --ink2: las dos leian como un control duro pegado a la tarjeta.
   Ahora es blanca, sin contorno oscuro, y FLOTA: la separa de la tarjeta un halo
   en el azul de la casa, no una linea. La tinta va donde se lee —la letra en
   --ink y en 700, el icono de la vuelta en --marca—, no en un relleno.
   ⚠️ NUNCA relleno azul: en esta tienda el azul lleno quiere decir «compra», y
      esto es una obligacion legal (Res. 424/2020), no una oferta. Tampoco
      --acento de fondo: blanco sobre celeste no se lee.
   📐 --ink sobre blanco: 15,0:1; el icono en --marca, 5,67:1. El area de toque sigue en 44 con el after de
   la tanda AC-14 (mas abajo, .cst-legal-cta .cst-legal-a::after). */
.cst-legal-cta .cst-legal-a{display:inline-flex;align-items:center;gap:.5rem;
  min-height:2.25rem;padding:0 1rem 0 .75rem;border-radius:99px;
  background:var(--sup);color:var(--ink);font-size:.8125rem;font-weight:700;line-height:1.5;
  white-space:nowrap;text-decoration:none;
  box-shadow:0 0 0 1px color-mix(in srgb,var(--marca) 10%,transparent),
             0 6px 18px color-mix(in srgb,var(--marca) 22%,transparent);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
/* El icono de la vuelta, en --marca: el mismo dibujo que el simbolo i-vue del
   sprite, como mascara. Va en la hoja y no como un svg adentro del link a
   proposito: el HTML del boton tiene que seguir siendo el link con su nombre
   pegado, que es lo que leen las baterias legales. La CSP deja data: en img-src,
   que es la que gobierna las mascaras. */
.cst-legal-cta .cst-legal-a::before{content:'';flex:none;width:1rem;height:1rem;
  background:var(--marca);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M4.5 9h11a4 4 0 0 1 0 8H9%22/%3E%3Cpath d=%22M8 5.5 4.5 9 8 12.5%22/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M4.5 9h11a4 4 0 0 1 0 8H9%22/%3E%3Cpath d=%22M8 5.5 4.5 9 8 12.5%22/%3E%3C/svg%3E") center/contain no-repeat}
@media (hover:hover) and (pointer:fine){
  .cst-legal-cta .cst-legal-a:hover{transform:translateY(-2px);
    box-shadow:0 0 0 1px color-mix(in srgb,var(--marca) 14%,transparent),
               0 10px 24px color-mix(in srgb,var(--marca) 32%,transparent)}
}
@media (max-width:88rem){
  .cst-legal{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"id cta" "links links";
    padding-bottom:.25rem}
}
@media (max-width:34rem){
  .cst-legal{grid-template-columns:minmax(0,1fr);grid-template-areas:"id" "links" "cta";
    padding-bottom:.75rem}
  .cst-legal-cta{justify-self:start}
}
/* 🔴 12-09 · EL ESCUDO DE ARCA NO ES CUADRADO, Y NO PUEDE SER CHICO.
   Diego, al cargarlo: «se ve muy recortado el QR, no todo el cartel de ARCA».
   Medido: data-fiscal.jpg es 239 × 327 (vertical, relacion 0,73). Es una
   CREDENCIAL, no un icono: el QR se tiene que poder escanear y el cartel leer.
   Por eso manda el ALTO (4rem, el piso de prueba_ck_pasos) y el ancho sale de
   la proporcion real de la imagen.
   pie7: el escudo es lo que da el alto de la tarjeta; el contorno pasa de border
   a sombra de 1 px, la misma linea sin sumar un pixel de caja. */
.cst-fisc{height:4rem;width:auto;border-radius:.375rem;
  display:inline-flex;flex:none;overflow:hidden;background:var(--sup);
  box-shadow:0 0 0 1px var(--line);
  transition:box-shadow .25s var(--ease)}
/* Es un LINK a la verificacion de ARCA, no una estampita: tiene que avisar que
   se puede tocar y tiene que mostrar el foco (AC-04/AC-05). */
@media (hover:hover) and (pointer:fine){
  .cst-fisc:hover{box-shadow:0 0 0 1px var(--acento),
    0 4px 14px color-mix(in srgb,var(--acento) 34%,transparent)}
}
.cst-fisc:focus-visible{outline:2px solid var(--acento-txt);outline-offset:3px}
/* aspect-ratio con los numeros REALES del archivo: asi el navegador reserva
   el lugar exacto antes de que la imagen cargue y el pie no pega un salto. */
.cst-fisc img{height:100%;width:auto;aspect-ratio:239/327;object-fit:contain;display:block}

/* cs-bloque:pagina-confianza · ABRE ─────────────────────────────────────────
   🔴 ESTE MARCADOR NO ES DECORACIÓN Y NO SE BORRA. `pruebas/prueba_contacto.php`
   §10 recorta con él el pedazo de hoja al que le aplica las reglas duras de la
   tienda (cero border-left, cero fondo celeste, cero marrón, cero hex suelto,
   cero modo oscuro). Antes recortaba buscando el TÍTULO del comentario de abajo
   —o sea, midiendo una frase en prosa—, y el día que ese título cambió por un
   cambio de diseño honesto, la batería se puso roja sin que nada estuviera mal:
   la forma exacta del defecto que este proyecto ya anotó («una prueba que mide
   la FORMA»). Un marcador declarado no se rompe con una redacción.
   ───────────────────────────────────────────────────────────────────────────── */
/* ═══ ⭐ CT-01 · QUIÉNES SOMOS (· dónde estamos · cómo nos escribís) ════════
   UNA sección, UN link. El porqué está en webRenderContacto() y en
   documentacion/web/46_PAGINA_CONFIANZA.md.

   🔴 LO QUE ESTA HOJA NO TIENE, Y ES LA MITAD DEL DISEÑO:
     · ni un fondo celeste. El celeste de esta casa es LUZ —el halo del borde—,
       nunca relleno de un bloque. Lo que separa acá es la sombra, el aire y una
       línea de --line. Es la misma regla que ya rige la card de producto.
     · ni una barra de acento al costado. Cero border-left en todo el archivo.
     · ni un ámbar, ni un marrón. Fuera de la paleta desde el 16-09.
   ───────────────────────────────────────────────────────────────────────────

   🔴 18-09 · EL ENCABEZADO, EN DOS COLUMNAS — y por qué NO es «ensanchar».
   Diego: *«el título y tres párrafos ocupan la mitad izquierda y la mitad
   derecha queda vacía»*. El ancho de lectura seguía siendo el correcto (68ch:
   un renglón de 1.376 px no se lee, se escanea y se abandona); lo que estaba
   mal era que ese bloque fuera LO ÚNICO. Entonces el mismo texto se repartió en
   dos columnas: título a la izquierda, párrafos a la derecha.

   🔴🔴 19-09 · Y ESO TAMPOCO ERA. Diego lo miró otra vez: *«el contenido de la
   sección le falta muchísimo diseño… y NO ESTÁ CENTRADO. Más profesional»*.
   Las dos columnas llenaban el ancho pero la pantalla seguía leyéndose como un
   documento volcado a la izquierda: el título arrancaba pegado al borde, el
   `<h1>` y la prosa competían por la misma altura, y no había un eje.

   AHORA EL ENCABEZADO ES UN HERO CENTRADO, que es como se ve una página de
   «nosotros» hecha por alguien: marca chica, título grande, una frase, y abajo
   los dos párrafos en UNA columna de lectura centrada.
     · El BLOQUE ocupa el ancho entero —el aire queda de los DOS lados, no de
       uno: ésa es la diferencia entre «centrado» y «la mitad derecha vacía», y
       es lo que mide `pruebas/medir_llenado.mjs` desde hoy (asimetría).
     · El RENGLÓN no: sigue midiendo lo que se puede leer (66ch). Un renglón de
       1.376 px no se lee, se escanea y se abandona — eso no cambió.
     · Los párrafos van alineados a la IZQUIERDA adentro de la columna centrada.
       Texto centrado de seis renglones se lee peor: el ojo pierde el arranque
       de cada línea. Centrado va lo corto —kicker, título, frase—, que es donde
       el centrado se ve y no molesta.
   ⭐ Y la pantalla queda con un ritmo: angosto (la intro) → ancho (los números,
   las pruebas, el mapa). Antes era todo del mismo ancho y por eso se leía
   plana. */
/* ═══ 🔴🔴 19-09 · ACÁ ESTABA «NO ESTÁ CENTRADO», Y ERA UNA LÍNEA ═══════════
   MEDIDO con Chrome, no mirado: `.cst-wrap` es `width:min(108rem, 100% - 4rem)`,
   o sea **1.376 px** a 1440. Las piezas de esta sección tienen techo de 72rem
   (1.152 px) —que está bien y está medido— pero **ninguna tenía
   `margin-inline:auto`**: un `max-width` sin margen automático no centra nada,
   arranca pegado a la izquierda. Resultado a 1440: el contenido iba de x=32 a
   x=1.184 y quedaban **224 px de papel en blanco SÓLO del lado derecho**, en
   todas y cada una de las bandas.

   Eso es, literal, lo que Diego señaló dos veces: *«la mitad derecha queda
   vacía»* (18-09) y *«no está centrado»* (19-09). No era el reparto adentro de
   cada bloque —eso se arregló el 18— era que **el bloque entero estaba corrido**.

   ⚠️ Y NO SE VEÍA EN NINGUNA MEDICIÓN: `medir_llenado.mjs` compara los bloques
   ENTRE SÍ, y como estaban los cinco corridos lo mismo, todos daban llenado 1 y
   la batería decía que la página usaba el ancho entero. Por eso desde hoy
   también mide ASIMETRÍA —cuánto aire queda de cada lado—, que es lo único que
   caza un bloque parejo por dentro y corrido por fuera.

   ⚠️⚠️ Y OJO CON LA CASCADA, QUE ACÁ MUERDE: tres de estos bloques declaran
   más abajo un `margin:` CORTO (`margin:2rem 0 0`), y ese atajo **reescribe los
   cuatro lados**, así que le pisaría el `auto` a esta regla y el arreglo se
   vería deshecho sin que nadie toque esta línea. Por eso esos tres llevan
   `auto` adentro de su propio atajo y no alcanzan con esta regla sola.
   ═══════════════════════════════════════════════════════════════════════════ */
.cst-ct-top,.cst-ct-ns,.cst-ct-ps,.cst-ct-e,.cst-ct-d{margin-inline:auto}
.cst-ct-top{max-width:72rem;text-align:center}
/* 🔴 `width:100%` EN LOS DOS HIJOS, A PROPÓSITO. El bloque tiene que ocupar el
   ancho que tiene aunque el texto de adentro sea angosto: lo que se centra es
   el CONTENIDO, no el contenedor. Si el contenedor se achicara con el texto,
   volvería el defecto del 18-09 —una pieza de 620 px al lado de otra de 1.152—
   y encima la medición del reparto se quedaría verde sin mirar nada. */
.cst-ct-tl,.cst-ct-tr{width:100%;min-width:0}
.cst-ct-t{margin:0;font-size:clamp(2rem,5.6vw,3.25rem);font-weight:800;
  letter-spacing:-.03em;line-height:1.05;color:var(--ink);text-wrap:balance}
.cst-ct-p{margin:0 0 1rem;font-size:1rem;line-height:1.7;color:var(--ink2);
  text-align:left}
.cst-ct-p:last-child{margin-bottom:0}
/* La frase que contesta «¿quiénes son?» va un punto más grande: la jerarquía de
   esta pantalla la hace el TAMAÑO, no un segundo color. */
.cst-ct-lead{margin:1rem auto 0;font-size:clamp(1.0625rem,2.4vw,1.3125rem);
  line-height:1.55;color:var(--ink2);max-width:46ch;text-wrap:balance}
/* 🪟 EL LINK DEL ENCABEZADO Y LA BAJADA DE LOS CANALES. Las dos piezas que el
   panel ofrecía escribir y que no tenían dónde salir. Son texto, no cajas: el
   acento va en el color y en el subrayado del hover, sin fondo lleno y sin
   barra al costado — el mismo idioma que `.cst-nsw-todos`, que es el otro link
   de esta pantalla. */
.cst-ct-cta{display:inline-flex;align-items:center;gap:.4rem;margin-top:1.25rem;
  font-size:1rem;font-weight:700;color:var(--acento-txt);text-decoration:none}
.cst-ct-cta .cst-ico{width:1em;height:1em;flex:none}
.cst-ct-cta:hover{text-decoration:underline}
.cst-ct-cta:focus-visible{outline:2px solid var(--acento-txt);outline-offset:3px}
.cst-ct-sub{margin:.5rem auto 0;max-width:60ch;font-size:1rem;line-height:1.6;
  color:var(--ink2)}
/* La columna de lectura, centrada. 66ch es el techo de lo legible; el `min()`
   con 100% es lo que evita que a 390 px se pase del `.cst-wrap` — el desborde
   horizontal de esta tienda ya llegó a producción una vez. */
.cst-ct-tr{max-width:min(66ch,100%);margin-inline:auto;
  margin-top:clamp(1.25rem,2.6vw,1.75rem)}

/* ── ⭐ E8 · LOS NÚMEROS ─────────────────────────────────────────────────────
   Diego, 19-09: *«el nosotros debe ser más llamativo: mostrar contador de
   ventas, reputación, clientes satisfechos»*. Esto es «lo llamativo»: la única
   pieza de la pantalla con un dato grande adentro.

   🔴 Y SE DIBUJA SÓLO SI HAY UN NÚMERO REAL DETRÁS. El contenedor entero sale
   del HTML cuando la lista viene vacía (`webTiendaNumerosConfianza()`), así que
   esta hoja nunca tiene que resolver un «bloque vacío»: no existe.

   El idioma es el de la casa, igual que en el panel:
     · el número en el TONO del acento, 800, `-.03em`, `tabular-nums` (sin eso,
       «17.413» y «99 %» bailan de ancho entre sí y con el hover);
     · la card FLOTA con el halo celeste y sube al tocarla — mismo gesto que la
       card de producto y que las pruebas de acá abajo. Si acá fuera otro, se
       leerían como dos cosas distintas;
     · CERO barra de acento al costado, cero fondo de color. El color lo pone el
       número y el halo, que es la firma.
   ⚠️ `auto-fit` y no un número fijo de columnas: pueden ser 1, 2, 3 o 5 según
   qué datos existan ese día, y con `repeat(3,…)` el caso de 2 dejaría un hueco
   del tamaño de una card al final de la fila. */
.cst-ct-ns{display:grid;gap:clamp(.75rem,1.6vw,1rem);
  grid-template-columns:repeat(auto-fit,minmax(min(13rem,100%),1fr));
  max-width:72rem;margin:clamp(1.75rem,4vw,2.5rem) auto 0;padding:0;list-style:none}
.cst-ct-n{display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:.15rem;padding:1.25rem 1rem;border-radius:var(--r-m);background:var(--sup);
  border:1px solid var(--line);box-shadow:var(--sh-1);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
@media (hover:hover) and (pointer:fine){
  .cst-ct-n:hover{transform:translateY(-2px);box-shadow:var(--sh-2)}
}
/* El número hero. `--acento-txt` (#2c76b0) y no `--acento` (#92c0e4): el celeste
   claro sobre blanco no llega a AA ni en 40 px, y un número que no se lee no es
   un número. El celeste queda donde corresponde — en el halo. */
.cst-ct-nv{display:block;font-size:clamp(1.875rem,4.4vw,2.5rem);font-weight:800;
  letter-spacing:-.03em;line-height:1.05;color:var(--acento-txt);
  font-variant-numeric:tabular-nums}
.cst-ct-nt{display:block;margin-top:.35rem;font-size:.9375rem;font-weight:800;
  letter-spacing:-.01em;color:var(--ink);line-height:1.25}
/* 🔴 DE DÓNDE SALE EL NÚMERO. No es un pie de foto decorativo: un número sin
   fuente en la página de confianza es el «+1000 clientes» con mejor tipografía.
   ⚠️ --ink2 y no --muted: 12,5 px en #6b747f no llega a AA sobre todos los
   fondos claros de esta casa. */
.cst-ct-nd{display:block;margin-top:.3rem;font-size:.78125rem;font-weight:600;
  color:var(--ink2);line-height:1.4;max-width:24ch}

/* ── LAS PRUEBAS ─────────────────────────────────────────────────────────────
   🔴 ESTE BLOQUE ES EL QUE SOSTIENE LA PÁGINA VACÍA. Las cuatro afirmaciones
   que llegan acá no dependen de ningún ajuste del panel, así que son las únicas
   que pueden llenar el ancho el lunes si Diego no carga nada. Antes eran
   pastillas de tres palabras apoyadas abajo del texto — y una pastilla que dice
   «Depósito propio en Palermo» no prueba nada; la que explica qué significa, sí.

   `auto-fit` y no un número de columnas: son 4 con punto de retiro e identidad
   fiscal cargados, 3 sin uno de los dos y 2 sin ninguno. Con `repeat(4,…)` el
   caso de 3 dejaba un hueco del tamaño de una card al final de la fila, que es
   el mismo «media pantalla vacía» en chico.
   ⚠️ `min(17rem,100%)` y no `17rem` pelado: a 390 px una pista de 272 px + el
   padding del wrap desborda, y el desborde horizontal ya llegó a producción una
   vez en esta tienda. */
.cst-ct-ps{display:grid;gap:clamp(.75rem,1.6vw,1rem);
  grid-template-columns:repeat(auto-fit,minmax(min(17rem,100%),1fr));
  max-width:72rem;margin:clamp(1.75rem,4vw,2.75rem) auto 0;padding:0;list-style:none}
.cst-ct-pi{display:flex;align-items:flex-start;gap:.85rem;
  padding:1rem 1.05rem;border-radius:var(--r-m);background:var(--sup);
  border:1px solid var(--line);box-shadow:var(--sh-1);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
@media (hover:hover) and (pointer:fine){
  /* Flotan y suben, como la card de producto. Es el mismo gesto en toda la
     tienda: si acá fuera otro, se leerían como dos cosas distintas. */
  .cst-ct-pi:hover{transform:translateY(-2px);box-shadow:var(--sh-2)}
}
.cst-ct-pic{flex:none;display:grid;place-items:center;width:2.25rem;height:2.25rem;
  border-radius:50%;background:var(--fondo);color:var(--acento-txt)}
.cst-ct-pic .cst-ico{width:1.125rem;height:1.125rem;flex:none}
.cst-ct-px{min-width:0}
.cst-ct-pt{display:block;font-size:.9375rem;font-weight:800;letter-spacing:-.01em;
  color:var(--ink);line-height:1.3}
/* ⚠️ --ink2 y no --muted: #6b747f en 13 px no llega a AA sobre todos los fondos
   claros de esta casa, y esta frase es la que hace el trabajo de la card. */
.cst-ct-pd{display:block;margin-top:.3rem;font-size:.8125rem;font-weight:600;
  color:var(--ink2);line-height:1.5}

/* ── ⭐ 19-09 · LAS DOS BANDAS DE ABAJO: «cómo nos escribís» y «dónde estamos»
   ───────────────────────────────────────────────────────────────────────────
   🔴 ACÁ HABÍA UNA GRILLA DE DOS COLUMNAS (`.cst-ct-g`) Y SE FUE. El 18-09 se
   la había arreglado —de dos pistas fijas a `auto-fit`, que era el bug de «la
   cajita chiquita sola»— y ese arreglo era correcto. Lo que el 19-09 dejó de
   servir es la FORMA: Diego pidió el mapa, y un mapa metido en media columna de
   560 px no es «dónde estamos», es una miniatura. Con el mapa de protagonista
   las dos piezas no pueden compartir fila.

   Ahora son DOS BANDAS APILADAS, cada una del ancho entero y con el título
   centrado. Se lee como una página compuesta y no como dos cajas puestas al
   lado. Y el caso vacío sigue resuelto sin ninguna regla especial: si no hay
   canales, esa banda no se dibuja y la de abajo no se entera — que era todo el
   trabajo que hacía el `auto-fit`, ahora gratis.

   ⚠️ EL TECHO DE 72rem NO ES CAPRICHO, SE VIO MIDIENDO. Sin él, en 1440 el
   encabezado medía 68ch (~620 px) y justo abajo la grilla se abría a 1.376 px:
   el doble. Ese salto es lo que hacía que la pantalla se leyera desbalanceada.
   Las CINCO piezas —encabezado, números, pruebas y las dos bandas— comparten el
   mismo techo, y eso es lo que las hace una sola pantalla. */
.cst-ct-e,.cst-ct-d{max-width:72rem;margin-top:clamp(2rem,4.5vw,3rem);
  text-align:center}
/* 🔴 EL TÍTULO DE BANDA VA CENTRADO — es la mitad de «no está centrado».
   Centrado se banca un `<h2>` de dos o tres palabras; la prosa de abajo no, y
   por eso cada párrafo se realinea a la izquierda cuando es largo. */
.cst-ct-h{margin:0 0 1.1rem;font-size:clamp(1.25rem,3vw,1.75rem);font-weight:800;
  letter-spacing:-.025em;color:var(--ink);line-height:1.15;text-wrap:balance}
/* Los `id` de los bloques ya no los linkea nadie —el pie tiene UN solo link y
   sin ancla (E1)—, pero siguen siendo direcciones válidas de la página y el
   navegador scrollea hasta y=0, que es justo ABAJO de la cabecera pegada.

   🔴 MEDIDO CON CHROME, Y ESTABA CORTO — Y JUSTO EN EL CELULAR.
   `pruebas/probar_anclas.mjs` abre `/contacto#donde` de verdad y compara dónde
   aterrizó el bloque contra lo que ocupa la barra pegada:
     · a 390 px la cabecera son DOS filas (logo + buscador) y llega hasta los
       126 px. Los 6rem (96 px) de antes dejaban «Dónde estamos» 30 px ABAJO de
       la barra;
     · arriba de 56,25rem el buscador sube a la misma fila, la cabecera baja a
       79 px y 6rem vuelven a sobrar.
   Nada de esto se ve pidiendo el HTML: los `id` están, el link anda, y el que
   lo toca igual aterriza mirando el medio de un párrafo.
   ⚠️ El corte es el MISMO 56,25rem del buscador (.cst-bus), a propósito: si un
   día se mueve ese, éste tiene que moverse con él. */
.cst-ct-top,.cst-ct-e,.cst-ct-d,.cst-ct-anc{scroll-margin-top:8.5rem}
@media (min-width:56.25rem){
  .cst-ct-top,.cst-ct-e,.cst-ct-d,.cst-ct-anc{scroll-margin-top:6rem}
}

/* ── Los canales. Tres objetos iguales; lo que jerarquiza es el ORDEN y el
      renglón de abajo, no un segundo color. El halo es el de la casa.
   ⭐ 19-09 · AHORA SON UNA FILA Y NO UNA PILA. Con la banda a 1.152 px, tres
   tarjetas apiladas dejaban 800 px de papel a la derecha de cada una: la
   «cajita chiquita sola» de Diego, tres veces. `auto-fit` las reparte —3, 2 o 1
   según cuántos canales estén cargados— y el `min()` es lo que evita que a
   390 px la pista mínima se pase del `.cst-wrap`. */
.cst-ct-cs{display:grid;gap:.7rem;margin:0;padding:0;list-style:none;
  grid-template-columns:repeat(auto-fit,minmax(min(18rem,100%),1fr))}
.cst-ct-c{display:flex;align-items:center;gap:.85rem;text-align:left;
  padding:.85rem .95rem;border-radius:var(--r-m);background:var(--sup);
  border:1px solid var(--line);box-shadow:var(--sh-1);text-decoration:none;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
@media (hover:hover) and (pointer:fine){
  /* Sube y le crece el halo: el mismo gesto que la card de producto. */
  .cst-ct-c:hover{transform:translateY(-2px);box-shadow:var(--sh-2);text-decoration:none}
}
.cst-ct-c:focus-visible{outline:2px solid var(--acento-txt);outline-offset:3px}
.cst-ct-ci{flex:none;display:grid;place-items:center;width:2.5rem;height:2.5rem;
  border-radius:50%;background:var(--fondo);color:var(--acento-txt)}
.cst-ct-ci .cst-ico{width:1.25rem;height:1.25rem;flex:none}
/* 🟢 El verde del WhatsApp NO es el verde de «entró la plata»: es la identidad
   del canal, la misma que ya tiene el globo flotante (.cst-wa-fab). Que los dos
   se vean iguales es lo que hace que se lean como la MISMA cosa. Es un ícono de
   2,5 rem, nunca un bloque de color. */
.cst-ct-c--wa .cst-ct-ci{color:var(--wa-ico)}
.cst-ct-c--wa .cst-ct-ci .cst-ico{fill:currentColor}
.cst-ct-cx{min-width:0}
.cst-ct-ct{display:block;font-size:.9375rem;font-weight:800;letter-spacing:-.01em;
  color:var(--ink);line-height:1.25}
/* ⚠️ --ink2 y no --muted: se apoya en --sup blanco, pero el mismo renglón puede
   caer sobre --fondo en otra pantalla y #6b747f ahí no llega a AA en 13 px. */
.cst-ct-cs2{display:block;margin-top:.15rem;font-size:.8125rem;font-weight:600;
  color:var(--ink2);line-height:1.35;overflow-wrap:anywhere}

/* ── Dónde estamos ─────────────────────────────────────────────────────────
   Todo lo de esta banda va centrado sobre el mismo eje que el título: la
   dirección, el horario y —cuando hay mapa— el link «Cómo llegar». Es UNA
   columna de datos cortos, que es lo único que se centra bien. */
.cst-ct-dir{margin:0 auto;font-size:clamp(1.0625rem,2.2vw,1.25rem);font-weight:800;
  letter-spacing:-.015em;color:var(--ink);line-height:1.35;max-width:42ch}
/* ⚠️ `inline-flex` Y ENVUELTO EN UN CENTRADO, no `flex`: como bloque de ancho
   completo el ícono quedaba pegado al borde izquierdo de 1.152 px y el texto
   al lado, o sea el renglón arrancaba a la izquierda en una banda centrada.
   `inline-flex` hace que la pastilla mida lo que dice, y el `text-align` del
   contenedor la centra. */
.cst-ct-hor{display:inline-flex;align-items:center;gap:.45rem;margin:.85rem 0 0;
  font-size:.9375rem;font-weight:700;color:var(--ink2)}
.cst-ct-hor .cst-ico{width:1em;height:1em;flex:none;color:var(--acento-txt)}

/* ── EL MAPA ─────────────────────────────────────────────────────────────────
   Arranca APAGADO: lo que se ve es esta caja, y el iframe de Google recién
   existe cuando alguien toca el botón. Sin toque no hay pedido a Google, no
   hay cookie de Google y no viaja un megabyte de JavaScript ajeno — que en el
   83 % de las visitas, que son de celular, es casi todo el peso de la página.
   🔴 Y la caja ES la misma que el mapa: mismo alto, mismo radio. Así al
   encenderlo no salta nada abajo (el corrimiento de contenido que se siente
   como que la página se rompió). */
/* 🔴 `max-height` — MEDIDO EN 1440 Y CORREGIDO. Con `aspect-ratio:16/9` a
   secas, en una columna de 975 px el mapa reservaba **548 px de alto**: medio
   metro de rectángulo blanco vacío en el medio de la página de confianza. Un
   mapa más alto que eso no muestra más ciudad, muestra más mapa — y un
   placeholder de ese tamaño se lee como que algo no cargó. El techo lo deja en
   384 px, que es donde una manzana entra entera y el bloque sigue siendo un
   elemento de la página y no la página. */
/* ⭐ 19-09 · Y AHORA ES EL PROTAGONISTA DE SU BANDA, NO UN RECUADRO EN MEDIA
   COLUMNA. Diego pidió «el mapa» con todas las letras: ocupa el ancho entero de
   la sección (1.152 px a 1440), con el radio grande de la casa y el HALO
   celeste fuerte — que es lo único que Diego rescató del diseño anterior:
   *«las sombras celestes en los bordes, eso me gustó»*. El borde se va: con el
   halo puesto, la línea de 1 px sólo ensucia el canto.
   ⚠️ El techo de 24rem (384 px) está medido y no se toca: a 1.152 px de ancho,
   un 16/9 sin techo reservaría 648 px de rectángulo vacío antes de encenderse
   — medio metro de nada en el medio de la página de confianza. Un mapa más alto
   no muestra más ciudad, muestra más mapa. */
/* ══════════════════════════════════════════════════════════════════════════
   🗺️🔴 SKY-NSFIX · 07-10 · EL ALTO SE ELIGE DESDE EL PANEL, Y ANTES NO
   ══════════════════════════════════════════════════════════════════════════
   Lo de arriba sigue siendo cierto —un mapa sin techo reserva medio metro de
   rectángulo vacío— y por eso el techo NO se va: se vuelve un número que
   alguien eligió en vez de uno escrito acá.

   🔴 DIEGO SE QUEJÓ DE QUE EL MAPA ERA CHICO TRES VECES, y las tres tuvo
      razón. Medido con el navegador antes de tocar una línea: 269 px a 390 de
      ancho, 288 a 768, 374 a 1440 y 384 a 2560 — clavado en las 24rem de este
      renglón. Y NO HABÍA UN SOLO CAMPO DEL PANEL QUE LLEGARA A ESE NÚMERO: lo
      que él podía mover no era lo que decidía, así que tocaba, guardaba,
      miraba y no pasaba nada.

   🔴🔴 Y ESTÁ DECLARADO DOS VECES: acá (`max-height`) y en la media query de
      abajo (`height`), que es la que gana de 36rem para arriba. Cambiar una
      sola deja la mitad de las pantallas igual que antes y el defecto se
      «arregla» sin moverse — en este repo ya pasó con un sabotaje de CSS que
      no mordía porque la propiedad estaba dos veces. Las DOS leen la misma
      variable.

   ⚠️ EL DEFAULT ES 420 Y NO 384 a propósito: la queja es «es chico». Un
      default igual a lo que había arreglaría el campo y no el defecto.
      El valor de verdad lo emite `webRMapaAltoEstilo()` con el nonce de la
      CSP — un `style=` suelto en el elemento lo bloquearía el navegador, que
      acá no admite estilos en línea.
   ══════════════════════════════════════════════════════════════════════════ */
.cst-ct-m{position:relative;margin-top:clamp(1.25rem,2.6vw,1.75rem);
  border-radius:var(--r-l);
  --cst-mapa-h:420px;
  overflow:hidden;background:var(--sup);border:0;
  box-shadow:var(--sh-2);aspect-ratio:4/3;min-height:13rem;max-height:var(--cst-mapa-h)}
/* 🔴🔴 ARRIBA DE 36rem SE VA EL `aspect-ratio` Y VA UNA ALTURA. NO ES ESTILO,
   ES UN DEFECTO QUE SE VIO EN LA CAPTURA Y QUE NO SE VE LEYENDO EL CSS:
   `aspect-ratio` + `max-height` no recorta el alto, **recalcula el ancho**. Con
   el mapa metido en media columna de 560 px el alto daba 315 y nadie se
   enteraba; el 19-09, al pasar a banda de 1.152 px, el 16/9 pedía 648 de alto,
   el techo de 384 lo frenaba… y el ancho se desplomó a **682 px**. O sea: el
   mapa que Diego pidió «ancho» salía a 6 décimos del ancho, corrido a la
   izquierda, con 470 px de papel al lado. Con `height` explícita el ancho es el
   del bloque y el alto es el que se quiso.
   ⚠️ Abajo de 36rem el `aspect-ratio:4/3` se queda: ahí el ancho es el del
   teléfono (358 px) y el alto que sale (268) nunca toca el techo. */
/* 🗺️ LA SEGUNDA DECLARACIÓN — la que de verdad manda de 36rem para arriba, o
   sea en todas las pantallas donde Diego dijo que el mapa era chico.
   🔴 ACÁ ESTABA LA MITAD INVISIBLE DEL DEFECTO: `clamp(18rem,26vw,24rem)` NO
   es «el alto que se eligió», es un alto que depende del ancho de la ventana y
   que encima topa en las mismas 24rem. A 1440 daba 374 y a 2560 daba 384; o
   sea que la pantalla grande —la de Diego— no sólo no ganaba alto: topaba.
   Ahora el número del panel ES el alto, sin intermediarios: lo que se escribe
   es lo que se mide. El piso y el techo los pone el panel (300 a 760), que es
   donde se puede explicar por qué. */
@media (min-width:36rem){
  .cst-ct-m{aspect-ratio:auto;height:var(--cst-mapa-h);max-height:none}
}
.cst-ct-m iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
/* ══════════════════════════════════════════════════════════════════════════
   📍 LA FICHA DEL MAPA — el mapa y su pie, UNA sola caja  (sky-ns5 · 09-10)
   ══════════════════════════════════════════════════════════════════════════
   Diego: *«al diseño del mapa en Nosotros podemos mejorarlo»*. Medido a 2.560
   antes de tocar nada: la banda eran cuatro objetos sueltos —título, un
   renglón de dirección, un rectángulo de 1.152 × 420 y un link de 111 × 23
   flotando abajo—. El contenido es exactamente el mismo; lo que cambia es que
   ahora el mapa, la dirección y el botón son UNA pieza.

   🔴 EL HALO SE MUDA DE LA FOTO A LA FICHA, y ésa es toda la idea. «Las
      sombras celestes en los bordes» es lo que Diego rescató de esta estética,
      y hasta hoy envolvía sólo el rectángulo de Google: el dato y la acción
      quedaban afuera del objeto que flotaba. Ahora el halo envuelve lo que
      importa. Por eso el mapa pierde SU sombra y SU radio — dos halos a 1 px
      de distancia no se leen como una cosa apoyada en otra, se leen como dos
      cosas sueltas (es la misma nota que `--sh-foto` tiene escrita).

   ⚠️ EL BORDE DE PELO NO ES DECORACIÓN: la ficha es blanca (`--sup`) sobre una
      página blanca, así que sin la línea su único límite sería el halo, que a
      2.560 px se lee como una mancha. Es el mismo par —`1px solid var(--line)`
      + `var(--sh-2)`— que usan todas las cards de esta hoja.
   ══════════════════════════════════════════════════════════════════════════ */
.cst-ct-ficha{margin-top:clamp(1.25rem,2.6vw,1.75rem);
  border-radius:var(--r-l);overflow:hidden;background:var(--sup);
  border:1px solid var(--line);box-shadow:var(--sh-2);text-align:left}
/* 🔴 ADENTRO DE LA FICHA EL MAPA NO FLOTA SOLO. Va con dos clases de
   especificidad (0,2,0) para ganarle a la base y a la media query, que son
   (0,1,0): en este repo la colisión de cascada es el defecto más frecuente y
   `.cst-ct-m` está declarada DOS veces seguidas. Ninguna de las dos toca el
   radio ni la sombra, así que esto no pelea con el alto que manda el panel. */
.cst-ct-ficha .cst-ct-m{margin-top:0;border-radius:0;box-shadow:none}
/* El pie: el dato a la izquierda, el botón anclado al borde derecho.
   `flex-wrap` para que una dirección larga no empuje al botón afuera. */
.cst-ct-pie{display:flex;align-items:center;justify-content:space-between;
  gap:.85rem 1.25rem;flex-wrap:wrap;
  padding:clamp(.9rem,1.9vw,1.15rem) clamp(1rem,2.2vw,1.5rem);
  border-top:1px solid var(--line2)}
/* La dirección deja de ser un renglón centrado y suelto: es el dato del pie.
   `min-width:0` para que pueda encogerse antes de empujar al botón. */
.cst-ct-pie .cst-ct-dir{margin:0;flex:1 1 16rem;min-width:0;max-width:46ch;
  text-align:left;font-size:clamp(1rem,1.9vw,1.125rem)}
@media (max-width:33.9375rem){
  /* En el teléfono no hay lugar para dos columnas: se apila y el botón toma el
     ancho entero, que además es lo que lo vuelve fácil de tocar con el pulgar. */
  .cst-ct-pie{flex-direction:column;align-items:stretch;text-align:center}
  .cst-ct-pie .cst-ct-dir{flex:0 0 auto;max-width:none;text-align:center}
}
/* ══════════════════════════════════════════════════════════════════════════
   🗺️ 21-09 · ACÁ VIVÍA LA TAPA DEL MAPA — «Ver el mapa» — Y SE FUE
   ══════════════════════════════════════════════════════════════════════════
   Diego, mirando la página: *«el mapa tenés que tocarlo para que te muestre la
   dirección cargada… el mapa se debería mostrar de por sí, no tener que
   hacerle click»*. Es su pantalla y su decisión.

   🔴 Y ERA UNA DECISIÓN MÍA, NO UN PEDIDO SUYO. La tapa se puso para no
   pedirle nada a Google hasta el toque —ni cookie ni el megabyte de JavaScript
   ajeno, que en el 83 % de las visitas (celular) es más que toda nuestra
   página junta—. El costo lo pagaba el visitante: la página de confianza le
   mostraba un rectángulo gris donde esperaba un mapa, y tenía que adivinar que
   había que apretar.

   ⭐ LO QUE QUEDA EN SU LUGAR: el `<iframe>` va en el HTML con
   `loading="lazy"`. En la compu está a la vista y carga solo; en el teléfono
   el navegador no lo pide hasta que se acerca al scroll. O sea: se ve sin
   tocar nada, y el peso sigue sin pagarse en la primera pintada.
   Y no hace falta NADA de JavaScript, así que anda igual con el JS apagado —
   antes, sin JS, el botón no hacía nada.
   ══════════════════════════════════════════════════════════════════════════ */
/* «Cómo llegar» — el que de verdad usa el que está en la calle: abre la app de
   mapas del teléfono. Va SIEMPRE, con mapa o sin mapa, y es un link, no un
   botón: se va del sitio. */
.cst-ct-ir{display:inline-flex;align-items:center;gap:.45rem;margin-top:1rem;
  font-size:.9375rem;font-weight:800;color:var(--acento-txt);text-decoration:none}
.cst-ct-ir .cst-ico{width:1em;height:1em;flex:none}
.cst-ct-ir:hover{text-decoration:underline}
.cst-ct-ir:focus-visible{outline:2px solid var(--acento-txt);outline-offset:3px}
/* ══════════════════════════════════════════════════════════════════════════
   🔵 Y ADENTRO DEL PIE ES UN BOTÓN DE VERDAD        (sky-ns5 · 09-10)
   ══════════════════════════════════════════════════════════════════════════
   🔴 EL COLOR TIENE QUE SER TINTA, NO NEBLINA. La regla de la casa —sombra de
      color, no barra de acento— es cierta y esta banda se había quedado con
      esa mitad sola: todo pastel, todo halo, y la única acción de la pantalla
      era un link de texto de 23 px de alto flotando abajo del mapa. La tienda
      real hace las DOS cosas: halo celeste Y el botón en `--marca` sólido.
      Es el mismo relleno, el mismo radio y el mismo halo teñido que `.cst-cta`
      —el botón del estado vacío—, así que no es un botón nuevo: es el de la
      casa, puesto donde faltaba.

   📐 Medido en la hoja: `#ffffff` sobre `#2563c9` da **5,64:1**, que pasa AA en
      cualquier tamaño. El halo va teñido del azul del botón y no del celeste
      de la casa: un halo celeste abajo de un relleno azul se lee como dos
      objetos (está escrito en la nota de `.cst-cta`).

   ⚠️ EL `::after` DE 2,75rem SIGUE DONDE ESTABA, en la lista de más arriba, y
      no se toca: `sabotear_dedo_44.py` está anclado a ese renglón. Acá el
      botón YA mide 44 px por su propio relleno, así que el área invisible le
      queda calcada encima y no agranda nada.
   ══════════════════════════════════════════════════════════════════════════ */
.cst-ct-pie .cst-ct-ir{flex:0 0 auto;justify-content:center;margin-top:0;
  min-height:2.75rem;padding:.7rem 1.3rem;border-radius:999px;
  background:var(--marca);color:var(--marca-txt);font-size:.875rem;
  box-shadow:0 10px 26px color-mix(in srgb,var(--marca) 34%,transparent);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.cst-ct-pie .cst-ct-ir:focus-visible{outline:2px solid var(--marca);outline-offset:3px}
@media (hover:hover) and (pointer:fine){
  /* Sube al pasar por encima, como todo lo que flota en esta tienda. Y el
     subrayado de la base se apaga acá: con relleno sólido no es un link de
     texto, es un botón. */
  .cst-ct-pie .cst-ct-ir:hover{transform:translateY(-2px);text-decoration:none;
    box-shadow:0 18px 40px color-mix(in srgb,var(--marca) 44%,transparent)}
}
@media (prefers-reduced-motion:reduce){
  .cst-ct-pie .cst-ct-ir{transition:none}
}
/* 🔴 ACÁ VIVÍA UN `width:100%` PARA EL TELÉFONO, Y SOBRABA. El pie se apila con
   `align-items:stretch`, que YA le da el ancho entero al botón: con las dos
   reglas puestas, sacar cualquiera de ellas dejaba la pantalla igual — o sea
   que la afirmación que mide «el botón toma el ancho del pie» no se podía
   poner roja tocando una sola. Se midió con el saboteador de esta banda, que
   es para lo que existe. Dos reglas que hacen lo mismo no son seguridad: son
   un defecto que no se puede cazar. */
/* Sin dirección cargada NO se dibuja un mapa roto ni un recuadro vacío: se
   dibuja esto, que es una frase corta y verdadera. Sin ícono de alerta y sin
   rojo — no pasó nada malo, sólo falta un dato.

   🔴 18-09 · Y YA NO ES UNA CAJA. Diego: *«"Dónde estamos" es una cajita
   chiquita con borde, sola»*. Tenía fondo, borde, sombra y radio: el envase de
   una card para tres renglones de texto — el «parece re poco importante» dado
   vuelta, un marco enorme para nada adentro. Es una frase: se dibuja como una
   frase, al mismo tamaño que la dirección que ocupa su lugar cuando la cargan.
   Lo que le da peso a este bloque son las cuatro pruebas de arriba. */
.cst-ct-sd{margin:0 auto;font-size:clamp(1rem,2.1vw,1.0625rem);line-height:1.6;
  color:var(--ink2);max-width:52ch}

/* ── 🔴 NS-2 · 20-09 · ACÁ VIVÍA `.cst-ct-f`, LA LÍNEA FISCAL DE «NOSOTROS».
      Diego, textual: *«en nosotros repetir cosas como "Corp Skyla S.R.L · CUIT
      30718909526" no tiene sentido, eso ya está en el footer»*.

      El comentario que estaba acá decía, el 18-09, que repetir el escudo de
      ARCA y el botón de arrepentimiento sería «el mismo dato tres veces en una
      pantalla» — y dejaba la razón social con el CUIT, que era exactamente el
      mismo dato DOS veces. El argumento estaba bien escrito y aplicado a medias.

      ⚖️ NO SE PIERDE NADA LEGAL. La RG 104/2005 pide que la identidad fiscal
      esté a la vista, y sigue estándolo: `webRenderPie()` la dibuja en la
      tarjeta legal de TODAS las páginas públicas —ésta incluida— junto al
      escudo de Data Fiscal y al botón de arrepentimiento. Lo que se fue es la
      SEGUNDA copia, veinte centímetros más arriba de la primera.
      Lo guarda el grupo 16 de `prueba_contacto.php` y el sabotaje 40. */
@media (prefers-reduced-motion:reduce){
  .cst-ct-c,.cst-ct-pi,.cst-ct-n{transition:none}
}

/* ═══════════════════════════════════════════════════════════════════════════
   ⭐ NS-W · LOS CUATRO BLOQUES QUE PRENDE EL PANEL — la visual
   ═══════════════════════════════════════════════════════════════════════════
   Plano: `documentacion/web/mockups/ns5_nosotros_widgets.html`, votado CON
   CAMBIOS 8/10 — *«es la versión que mejor me gusta hasta ahora»*.

   Los cuatro comparten el idioma de la casa y no inventan uno nuevo:
     · SOMBRA DE COLOR, nunca fondo lleno ni barra al costado. El halo celeste
       difuso en el borde es la firma, y es lo único que Diego rescató de una
       pantalla que por lo demás rechazó entera;
     · el número y el rótulo en el TONO del área (`--acento-txt`), no el bloque;
     · las piezas FLOTAN y suben al hover, como la card de producto y como las
       pruebas de esta misma pantalla. Si acá fuera otro gesto, se leerían como
       dos cosas distintas.

   🔴 NI UN RECTÁNGULO CELESTE. Diego, textual: *«las imágenes no pueden ir con
      fondo celeste»*. Las fotos de «Lo que vendemos» se apoyan en BLANCO puro
      (`--tile`, que no cambia con el tema) y flotan por una sombra elipsoidal,
      no por una bandeja de color. Lo que las despega es la sombra, no un tinte.
   ─────────────────────────────────────────────────────────────────────────── */
.cst-nsw{max-width:72rem;margin:clamp(2rem,4.5vw,3rem) auto 0}

/* ── W2 · VENTAS CONCRETADAS ────────────────────────────────────────────────
   Diego, las dos frases que mandan acá:
     *«"ventas concretadas" que no diga en Meli, ventas concretadas y ya»*
     *«no ponemos el número así midiendo vos, esto es decisión nuestra. Desde el
       panel debo poner hasta qué número mostrar»*

   🔴 ES EL NÚMERO MÁS GRANDE DE LA PÁGINA, Y A PROPÓSITO. Las pastillas de
   arriba (`.cst-ct-nv`) llegan a 2,5rem; éste arranca en 3,5 y llega a 6. Si
   midieran parecido, el bloque que Diego pidió como lo llamativo competiría con
   el que ya estaba en vez de mandar — que es, palabra por palabra, el *«parece
   re poco importante»*.
   ⚠️ `--acento-txt` y no `--acento`: el celeste claro sobre blanco no llega a
   AA ni en 96 px. El celeste va al halo, que es donde se ve y no hay que leer. */
.cst-nsw-cnt{display:flex;align-items:flex-end;gap:clamp(1.25rem,3vw,2.5rem);
  flex-wrap:wrap;padding:clamp(1.5rem,3.4vw,2.5rem) clamp(1.25rem,3vw,2.25rem);
  border-radius:var(--r-l);background:var(--sup);border:1px solid var(--line);
  box-shadow:var(--sh-2);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
@media (hover:hover) and (pointer:fine){
  .cst-nsw-cnt:hover{transform:translateY(-2px);box-shadow:var(--sh-3)}
}
.cst-nsw-cnt-x{min-width:0}
.cst-nsw-lab{display:block;font-size:.6875rem;font-weight:800;letter-spacing:.11em;
  text-transform:uppercase;color:var(--acento-txt);margin-bottom:.45rem}
/* `tabular-nums` no es un adorno: sin eso el número baila de ancho mientras
   sube y el bloque entero se mueve a cada cuadro. */
.cst-nsw-n{display:block;font-size:clamp(3.5rem,11vw,6rem);line-height:.92;
  font-weight:800;letter-spacing:-.045em;color:var(--acento-txt);
  font-variant-numeric:tabular-nums}
.cst-nsw-n i{font-style:normal;font-size:.52em;letter-spacing:-.02em;
  vertical-align:.24em;margin-right:.04em}
.cst-nsw-pie{margin:.75rem 0 0;font-size:.875rem;line-height:1.55;
  color:var(--ink2);max-width:42ch}
/* 15-10 · acá estaba .cst-nsw-de, el sello «El número lo ponemos nosotros».
   Diego lo mandó sacar de la tienda (commit 2352de72) y quedó sin nadie que lo
   ponga: CM-5 de prueba_clases_muertas lo marcaba como clase muerta. */

/* ── W2-b · EL ACORDEON DE VENTAS CONCRETADAS ───────────────────────────────
   Diego, 09-10, textual: *«ventas concretadas en nosotros la seccion deberia
   ser como un acordeon que desde el panel la edite, vea la pre view en la web
   y ahi funcione»*.

   QUE QUEDA A LA VISTA CON EL ACORDEON CERRADO, Y ES UNA DECISION:
     · el rotulo, el NUMERO entero y el sello de donde sale. El sello NO se
       esconde nunca. Un numero cuya fuente hay que ir a buscar con un clic es
       el «+1000 clientes» con mejor tipografia, que es justo lo que esta
       pagina existe para no ser;
     · y el renglon «Como lo contamos» al lado del chevron, para que se vea que
       HAY algo atras. Un chevron solo no dice que se gana apretandolo.
   Lo que se abre es la explicacion: el pie y el detalle, los dos del panel.

   🔴 SIN CUERPO NO HAY BOTON. Si Diego no escribio ni pie ni detalle, el
   bloque se dibuja como siempre —sin boton, sin chevron y sin aria— porque un
   control que no hace nada es peor que no tener control. Lo decide el PHP de
   abajo, no esta hoja.

   🔴 LA ALTURA SE ANIMA CON `grid-template-rows` de 0fr a 1fr, que es el mismo
   idioma que ya usa el cajon de categorias (`.cst-caj-sub`). Sin JavaScript
   que mida alturas y sin un `max-height` puesto a ojo que corta el texto
   largo el dia que alguien escriba tres renglones mas.
   ⚠️ Y `visibility` ADEMAS del alto: con solo `overflow:hidden` el texto
      cerrado sigue EN EL ARBOL DE ACCESIBILIDAD, asi que un lector de pantalla
      lee en voz alta lo que la pantalla esconde. `visibility:hidden` lo saca; el
      `transition` de 0s con retardo lo deja salir recien cuando termino de
      cerrarse, para que no desaparezca de golpe a mitad de la animacion. */
.cst-nsw-cnt.ac{display:block;padding:0}
/* 🔴 44 px DE VERDAD, Y NO POR CASUALIDAD. La cabecera es alta porque adentro
   vive un numero de 3,5rem, pero el `min-height` se escribe igual: el dia que
   alguien achique el numero, el area tactil no se achica con el. Es la misma
   regla del chevron del cajon (§6.1 · AC-14). */
.cst-nsw-cab{display:flex;align-items:flex-end;gap:clamp(1.25rem,3vw,2.5rem);
  flex-wrap:wrap;width:100%;min-height:44px;text-align:left;
  padding:clamp(1.5rem,3.4vw,2.5rem) clamp(1.25rem,3vw,2.25rem);
  border:0;background:none;cursor:pointer;color:inherit;font:inherit;
  border-radius:var(--r-l)}
.cst-nsw-cab:focus-visible{outline:2px solid var(--acento-txt);outline-offset:-3px}
/* Adentro del boton el rotulo y el numero se apilan igual que antes: el
   `<div>` paso a ser `<span>` para poder vivir en un `<button>`, y un span es
   en linea por defecto. */
.cst-nsw-cab .cst-nsw-cnt-x{display:block;flex:0 1 auto}
/* El sello y el abridor se anclan al BORDE derecho, no flotan en el medio.
   Diego: *«esta muy en el medio, no esta a la derecha»*.
   🔴 EL `margin-left:auto` VA EN EL ENVOLTORIO Y NO EN CADA UNO. Con uno en
      cada hijo, el hueco libre se REPARTE entre los dos y el sello se despega
      del abridor en la pantalla grande; y a 390, donde cada uno cae en su
      propio renglon, el de abajo se va a la izquierda. Asi se mueven como una
      sola pieza en todos los anchos. Medido a 2560 y a 390. */
.cst-nsw-cab-r{margin-left:auto;display:flex;align-items:center;
  gap:clamp(.6rem,1.6vw,1rem);flex-wrap:wrap;justify-content:flex-end}
.cst-nsw-abr{display:inline-flex;align-items:center;gap:.4rem;min-height:44px;
  font-size:.8125rem;font-weight:800;color:var(--acento-txt);white-space:nowrap}
.cst-nsw-abr .cst-chev{width:1em;height:1em;flex:none;
  transition:transform .3s var(--ease)}
.cst-nsw-cab[aria-expanded="true"] .cst-chev{transform:rotate(180deg)}
.cst-nsw-cue{display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .3s var(--ease)}
.cst-nsw-cue[data-abierto="1"]{grid-template-rows:1fr}
.cst-nsw-cue-x{min-height:0;overflow:hidden;visibility:hidden;
  transition:visibility 0s linear .3s}
.cst-nsw-cue[data-abierto="1"] .cst-nsw-cue-x{visibility:visible;transition:visibility 0s}
.cst-nsw-cue-y{padding:0 clamp(1.25rem,3vw,2.25rem) clamp(1.5rem,3.4vw,2.5rem);
  border-top:1px solid var(--line);margin-top:.25rem;padding-top:clamp(1rem,2.4vw,1.5rem)}
/* Adentro del acordeon el pie puede respirar: ya no compite con el numero. */
.cst-nsw-cue-y .cst-nsw-pie{margin:0}
.cst-nsw-det{margin:.85rem 0 0;font-size:.9375rem;line-height:1.65;
  color:var(--ink2);max-width:62ch;white-space:pre-line}

/* ── W4 · LO QUE VENDEMOS ───────────────────────────────────────────────────
   🔴 LAS FOTOS SE APOYAN EN BLANCO. Los JPG del catálogo vienen con fondo
   blanco, así que `multiply` lo borra y el producto queda recortado sin tener
   que pedirle a nadie un PNG. Lo que lo despega del papel es la elipse borrosa
   de abajo — una sombra, no una bandeja.
   ⚠️ `--tile` y no `--sup`: `--tile` está fijo en blanco en los DOS temas, que
   es lo que `multiply` necesita. Sobre una superficie oscura el blanco del JPG
   se comería la foto entera. */
.cst-nsw-pr{padding-top:clamp(.5rem,1.4vw,1rem)}
.cst-nsw-enc{display:flex;align-items:flex-end;gap:1.25rem;flex-wrap:wrap;
  margin-bottom:.35rem}
.cst-nsw-enc .cst-ct-h{margin:0}
/* El link al catálogo se ancla a la DERECHA del encabezado. Diego: *«está muy
   en el medio, no está a la derecha»* — los controles se anclan al borde. */
.cst-nsw-todos{margin-left:auto;display:inline-flex;align-items:center;gap:.4rem;
  font-size:.8125rem;font-weight:800;color:var(--acento-txt);text-decoration:none}
.cst-nsw-todos .cst-ico{width:1em;height:1em;flex:none}
.cst-nsw-todos:hover{text-decoration:underline}
.cst-nsw-todos:focus-visible{outline:2px solid var(--acento-txt);outline-offset:3px}
/* Scroll horizontal ADENTRO de la tira, que es lo que evita que empuje la
   página a lo ancho en el teléfono. El desborde horizontal de esta tienda ya
   llegó a producción una vez. */
/* `flex-start` y no `flex-end`: la bandeja tiene alto fijo, así que alinear por
   arriba deja los cinco productos apoyados en la MISMA línea. Con `flex-end` se
   alinean los pies, y entonces el que tiene el nombre en dos renglones sube el
   producto — medido en la captura a 1440: los cinco a alturas distintas. */
.cst-nsw-tira{display:flex;align-items:flex-start;gap:clamp(.75rem,2vw,1.25rem);
  margin:0;padding:1rem .125rem 1.75rem;list-style:none;
  overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}
.cst-nsw-tira::-webkit-scrollbar{display:none}
.cst-nsw-tira li{flex:none;margin:0}
.cst-nsw-p{position:relative;display:block;width:clamp(7rem,20vw,10.5rem);
  text-align:center;text-decoration:none;color:inherit;
  transition:transform .3s var(--ease)}
@media (hover:hover) and (pointer:fine){
  .cst-nsw-p:hover{transform:translateY(-3px)}
  .cst-nsw-p:hover .cst-nsw-pn{color:var(--acento-txt)}
}
.cst-nsw-p:focus-visible{outline:2px solid var(--acento-txt);outline-offset:4px;
  border-radius:var(--r-s)}
.cst-nsw-pf{position:relative;display:grid;place-items:center;
  height:clamp(8rem,22vw,11.5rem);background:var(--tile);border-radius:var(--r-s)}
/* La elipse borrosa: es la sombra que apoya el producto en el papel. Va en
   `::after` del contenedor y por debajo de la foto (`z-index`), así que no hay
   ningún rectángulo de color en ningún lado. */
.cst-nsw-pf::after{content:"";position:absolute;left:50%;bottom:.35rem;
  transform:translateX(-50%);width:62%;height:.8rem;border-radius:50%;
  background:rgba(34,39,47,.17);filter:blur(7px)}
.cst-nsw-pf img{position:relative;z-index:1;max-width:100%;max-height:100%;
  width:auto;height:auto;object-fit:contain;mix-blend-mode:multiply}
.cst-nsw-pn{margin-top:.5rem;font-size:.75rem;font-weight:700;
  line-height:1.35;color:var(--ink2);
  /* Dos renglones y corta: un nombre de catálogo de ML puede tener 90
     caracteres y descolgaría toda la fila. */
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden}

/* ── W5 · CÓMO TRABAJAMOS ───────────────────────────────────────────────────
   Pelos de 1 px, CERO cards. Tres cajas menos en una pantalla que ya tiene
   cards arriba (las pruebas) y abajo (los canales): *«muy sucia, muy
   contaminada de cosas»*. Acá lo que separa es una línea, no un envase. */
/* 🔴 EL `auto` VA ADENTRO DE SU PROPIO ATAJO, y esto ya mordió en esta misma
   pantalla. `.cst-nsw` centra con `margin:… auto 0`, pero un `margin:0` corto
   acá REESCRIBE LOS CUATRO LADOS y le pisa el `auto` — el bloque queda pegado
   a la izquierda y sin aire arriba, sin que se vea nada raro en el código.
   🔴 MEDIDO, NO SUPUESTO: en la captura a 1440 los pasos arrancaban en x=32
   mientras el título de arriba arrancaba en x=145. Es el mismo defecto que ya
   está anotado más arriba para `.cst-ct-e` y compañía. */
/* 🔴 EL PELO LO DIBUJA EL HUECO DE LA GRILLA, NO UN `border-left`. La regla
   dura de esta casa dice, sin excepciones, CERO barra al costado —y la mide el
   grupo 10 de `prueba_contacto.php`, que me la puso en rojo con el primer
   intento—. Un `border-left` en una columna es exactamente la forma que Diego
   sacó de todas las cards, y que acá fuera «sólo un separador» no lo cambia:
   una regla con una excepción deja de ser una regla.
   ⭐ Y sale mejor: con `gap:1px` y el fondo de la lista en `--line`, el pelo lo
   dibuja el hueco. Eso arregla solo el caso apilado —al colapsar a una columna
   el mismo hueco queda HORIZONTAL, que es donde va— sin una media query que
   tenga que acordarse de cambiarle el lado a un borde. */
.cst-nsw-ps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(16rem,100%),1fr));
  gap:1px;background:var(--line);margin:clamp(2rem,4.5vw,3rem) auto 0;padding:0;
  list-style:none}
/* Cada paso tapa el fondo de la lista: lo único que queda a la vista del fondo
   es el hueco de 1 px. Sin este fondo, la lista entera sería un rectángulo gris
   —o sea un fondo lleno, que es la otra mitad de la misma regla. */
.cst-nsw-ps li{background:var(--pag);padding:0 clamp(1rem,2.4vw,1.625rem)}
.cst-nsw-ps li:first-child{padding-left:0}
.cst-nsw-ps li:last-child{padding-right:0}
.cst-nsw-num{display:block;font-size:.75rem;font-weight:800;letter-spacing:.1em;
  color:var(--acento-txt);font-variant-numeric:tabular-nums;margin-bottom:.55rem}
.cst-nsw-pt{display:block;font-size:1.0625rem;font-weight:800;letter-spacing:-.02em;
  color:var(--ink);line-height:1.25}
.cst-nsw-pd{display:block;margin-top:.4rem;font-size:.84375rem;line-height:1.55;
  color:var(--ink2)}
@media (max-width:56rem){
  .cst-nsw-ps li{padding:1.125rem 0}
  .cst-nsw-ps li:first-child{padding-top:0}
}

/* ── ⭐ 14-10 · LOS TRES NUEVOS DE nos1 ─────────────────────────────────────
   Historia, Cuándo te llega y Preguntas. Mismo idioma que el resto de la
   página: el dato en el tono del área (--acento-txt), el halo de la casa en
   vez de borde, y nada de fondo lleno. */
.cst-nsw-hi{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:clamp(1.5rem,4vw,3.5rem);align-items:start}
.cst-nsw-hi--solo{grid-template-columns:minmax(0,1fr);max-width:46rem}
.cst-nsw-hi .cst-nsw-kick{display:block;margin-bottom:.5rem}
.cst-nsw-hp{margin:0 0 .85rem;font-size:.9375rem;line-height:1.65;color:var(--ink2);max-width:60ch}
.cst-nsw-hl{display:grid;gap:.75rem;margin:0;padding:0;list-style:none}
.cst-nsw-hl li{display:flex;align-items:baseline;gap:1rem;padding:1rem 1.25rem;
  border-radius:var(--r-m,1rem);background:var(--sup);
  box-shadow:0 1px 2px rgba(60,69,82,.06),0 10px 26px color-mix(in srgb,var(--acento) 26%,transparent)}
.cst-nsw-ha{flex:none;min-width:3.25rem;font-size:1.25rem;font-weight:800;letter-spacing:-.02em;
  color:var(--acento-txt);font-variant-numeric:tabular-nums}
.cst-nsw-ht{font-size:.9375rem;font-weight:700;color:var(--ink);line-height:1.4}
.cst-nsw-llg{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(14rem,100%),1fr));
  gap:clamp(.75rem,2vw,1.25rem);margin:0;padding:0;list-style:none}
.cst-nsw-llg li{display:flex;flex-direction:column;gap:.3rem;padding:clamp(1.1rem,2.6vw,1.5rem);
  border-radius:var(--r-l);background:var(--sup);
  box-shadow:0 1px 2px rgba(60,69,82,.06),0 12px 30px color-mix(in srgb,var(--acento) 30%,transparent);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
@media (hover:hover) and (pointer:fine){
  .cst-nsw-llg li:hover{transform:translateY(-2px);
    box-shadow:0 2px 4px rgba(60,69,82,.07),0 18px 38px color-mix(in srgb,var(--acento) 42%,transparent)}
}
.cst-nsw-lt{font-size:clamp(1.75rem,4vw,2.25rem);line-height:1;font-weight:800;letter-spacing:-.03em;
  color:var(--acento-txt);font-variant-numeric:tabular-nums}
.cst-nsw-lz{margin-top:.35rem;font-size:1rem;font-weight:800;color:var(--ink)}
.cst-nsw-ld{font-size:.84375rem;line-height:1.5;color:var(--ink2)}
.cst-nsw-fq .cst-faq{max-width:52rem}
/* ── ⭐ 14-10 · NUESTRO EQUIPO ──────────────────────────────────────────────
   La inicial va en un círculo LLENO: es el único color sólido de la tarjeta y
   alterna la marca, el acento oscuro y la tinta. Blanco encima, los tres pasan
   AA. La cabecera usa la del depósito (cst-nsw-dpe): mismo título, misma frase
   anclada a la derecha. */
.cst-nsw-eqg{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(15rem,100%),1fr));
  gap:clamp(.75rem,2vw,1.25rem);margin:0;padding:0;list-style:none}
.cst-nsw-eqg li{display:flex;align-items:center;gap:1rem;padding:clamp(1rem,2.4vw,1.375rem);
  border-radius:var(--r-l);background:var(--sup);
  box-shadow:0 1px 2px rgba(60,69,82,.06),0 12px 30px color-mix(in srgb,var(--acento) 30%,transparent);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
@media (hover:hover) and (pointer:fine){
  .cst-nsw-eqg li:hover{transform:translateY(-2px);
    box-shadow:0 2px 4px rgba(60,69,82,.07),0 18px 38px color-mix(in srgb,var(--acento) 42%,transparent)}
}
.cst-nsw-eqa{flex:none;display:grid;place-items:center;width:3.25rem;height:3.25rem;border-radius:50%;
  font-size:1.25rem;font-weight:800;color:var(--marca-txt);background:var(--marca);
  box-shadow:0 10px 22px -10px var(--marca)}
.cst-nsw-eqg li:nth-child(3n+2) .cst-nsw-eqa{background:var(--acento-txt);box-shadow:0 10px 22px -10px var(--acento-txt)}
.cst-nsw-eqg li:nth-child(3n) .cst-nsw-eqa{background:var(--ink2);box-shadow:0 10px 22px -10px var(--ink2)}
.cst-nsw-eqx{min-width:0;display:flex;flex-direction:column;gap:.15rem}
.cst-nsw-eqn{font-size:1rem;font-weight:800;color:var(--ink);letter-spacing:-.01em}
.cst-nsw-eqr{font-size:.84375rem;line-height:1.45;color:var(--ink2)}

/* ── ⭐ 14-10 · LO QUE DICEN ────────────────────────────────────────────────
   Tarjetas con el halo de la casa; las estrellas son las de la ficha
   (cst-est-on), así cambian juntas si cambia el color. La firma se apoya al
   pie de la tarjeta para que las tres terminen a la misma altura. */
.cst-nsw-rsg{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(17rem,100%),1fr));
  gap:clamp(.75rem,2vw,1.25rem);margin:0;padding:0;list-style:none}
.cst-nsw-rsg li{display:flex}
.cst-nsw-rsf{display:flex;flex-direction:column;gap:.75rem;width:100%;margin:0;
  padding:clamp(1.1rem,2.6vw,1.5rem);border-radius:var(--r-l);background:var(--sup);
  box-shadow:0 1px 2px rgba(60,69,82,.06),0 12px 30px color-mix(in srgb,var(--acento) 30%,transparent);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
@media (hover:hover) and (pointer:fine){
  .cst-nsw-rsf:hover{transform:translateY(-2px);
    box-shadow:0 2px 4px rgba(60,69,82,.07),0 18px 38px color-mix(in srgb,var(--acento) 42%,transparent)}
}
.cst-nsw-rse{display:inline-flex;gap:.15rem}
.cst-nsw-rse .cst-ico{width:1rem;height:1rem}
.cst-nsw-rsq{margin:0}
.cst-nsw-rsq p{margin:0;font-size:.9375rem;line-height:1.6;color:var(--ink)}
.cst-nsw-rsc{margin-top:auto;display:flex;flex-direction:column;gap:.1rem;padding-top:.75rem;
  border-top:1px solid var(--line)}
.cst-nsw-rsa{font-size:.875rem;font-weight:800;color:var(--ink)}
.cst-nsw-rsp{font-size:.8125rem;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:47.5rem){
  .cst-nsw-rsg{display:flex;gap:.75rem;overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;padding:.25rem .25rem 1.5rem;scrollbar-width:none}
  .cst-nsw-rsg::-webkit-scrollbar{display:none}
  .cst-nsw-rsg li{flex:0 0 84%;scroll-snap-align:start}
}

/* ── ⭐ 14-10 · RETIRO EN PERSONA ───────────────────────────────────────────
   La tarjeta flota con el halo de la casa; el dato es la dirección. El plano es
   papel, no un bloque azul: calles blancas sobre un gris celeste muy bajo, y el
   pin en el color de la marca, que es el único lleno de la tarjeta junto con el
   botón. */
.cst-nsw-rtc{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  border-radius:var(--r-l);overflow:hidden;background:var(--sup);
  box-shadow:0 1px 2px rgba(60,69,82,.06),0 16px 40px color-mix(in srgb,var(--acento) 34%,transparent)}
.cst-nsw-rtc--solo{grid-template-columns:minmax(0,1fr)}
.cst-nsw-rti{padding:clamp(1.25rem,3vw,2.25rem)}
.cst-nsw-rti .cst-nsw-kick{margin-bottom:.5rem}
.cst-nsw-rti .cst-ct-h{margin-bottom:.75rem}
.cst-nsw-rtd{margin:0;font-size:clamp(1.25rem,2.6vw,1.625rem);line-height:1.25;font-weight:800;
  letter-spacing:-.02em;color:var(--ink)}
.cst-nsw-rtp{margin:.6rem 0 0;font-size:.9375rem;line-height:1.6;color:var(--ink2);max-width:46ch}
.cst-nsw-rth{margin:1.1rem 0 0;display:grid;gap:.15rem}
.cst-nsw-rth div{display:flex;justify-content:space-between;gap:1rem;padding:.6rem 0;
  border-bottom:1px solid var(--line)}
.cst-nsw-rth dt{font-size:.84375rem;font-weight:700;color:var(--ink2)}
.cst-nsw-rth dd{margin:0;font-size:.84375rem;font-weight:800;color:var(--acento-txt);text-align:right;
  font-variant-numeric:tabular-nums}
.cst-nsw-rtb{display:inline-flex;align-items:center;gap:.4rem;min-height:44px;margin-top:1.25rem;
  padding:0 1.25rem;border-radius:999px;background:var(--marca);color:var(--marca-txt);
  font-size:.875rem;font-weight:800;text-decoration:none;
  box-shadow:0 12px 26px -12px color-mix(in srgb,var(--marca) 85%,transparent);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.cst-nsw-rtb .cst-ico{width:1em;height:1em;flex:none}
@media (hover:hover) and (pointer:fine){
  .cst-nsw-rtb:hover{transform:translateY(-1px);box-shadow:0 16px 30px -12px color-mix(in srgb,var(--marca) 95%,transparent)}
}
.cst-nsw-rtb:focus-visible,.cst-nsw-rtm:focus-visible{outline:2px solid var(--acento-txt);outline-offset:3px}
.cst-nsw-rtm{position:relative;display:block;min-height:15rem;
  background:
    linear-gradient(28deg,transparent 46%,var(--sup) 46.5%,var(--sup) 49%,transparent 49.5%),
    linear-gradient(118deg,transparent 30%,var(--sup) 30.4%,var(--sup) 32.6%,transparent 33%),
    linear-gradient(118deg,transparent 64%,var(--sup) 64.4%,var(--sup) 66%,transparent 66.4%),
    repeating-linear-gradient(28deg,transparent 0 46px,color-mix(in srgb,var(--sup) 70%,transparent) 46px 49px),
    repeating-linear-gradient(118deg,transparent 0 58px,color-mix(in srgb,var(--sup) 70%,transparent) 58px 61px),
    color-mix(in srgb,var(--acento) 16%,var(--sup))}
.cst-nsw-rtpin{position:absolute;left:50%;top:46%;width:3.25rem;height:3.25rem;margin:-1.625rem 0 0 -1.625rem;
  display:grid;place-items:center;border-radius:50%;background:var(--marca);color:var(--marca-txt);
  box-shadow:0 0 0 .5rem color-mix(in srgb,var(--marca) 16%,transparent),0 14px 26px -8px color-mix(in srgb,var(--marca) 70%,transparent)}
.cst-nsw-rtpin .cst-ico{width:1.5rem;height:1.5rem}
@media (max-width:47.5rem){
  .cst-nsw-rtc{grid-template-columns:minmax(0,1fr)}
  .cst-nsw-rtm{order:-1;min-height:10rem}
}
/* 14-10 · garantia y cambios: las tarjetas de «Cuando te llega», con el link a
   Cambios anclado a la derecha del titulo. */
.cst-nsw-ga .cst-nsw-enc{margin-bottom:clamp(1rem,2.4vw,1.5rem)}

/* ── ⭐ 14-10 · EL DEPÓSITO POR DENTRO (nos1, tanda 2) ──────────────────────
   Las fotos flotan con el halo de la casa, sin marco ni borde. La primera es la
   grande; el mosaico cambia con la cantidad para que nunca quede un hueco. En
   el celular, una fila que se desliza y deja asomar la siguiente. */
.cst-nsw-dpe{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;
  gap:.5rem 2rem;margin-bottom:clamp(1rem,2.4vw,1.5rem)}
.cst-nsw-dpe .cst-ct-h{margin:0}
.cst-nsw-dpt{margin:0;max-width:46ch;font-size:.9375rem;line-height:1.6;color:var(--ink2)}
.cst-nsw-dpg{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr);
  grid-auto-rows:clamp(9rem,15vw,15rem);gap:clamp(.625rem,1.4vw,.875rem);
  margin:0;padding:0;list-style:none}
.cst-nsw-dpf{position:relative;margin:0;min-width:0;border-radius:var(--r-l);overflow:hidden;
  background:var(--tile);
  box-shadow:0 1px 2px rgba(60,69,82,.06),0 14px 34px color-mix(in srgb,var(--acento) 30%,transparent)}
.cst-nsw-dpf picture,.cst-nsw-dpf img{display:block;width:100%;height:100%}
.cst-nsw-dpf img{object-fit:cover;transition:transform .6s var(--ease)}
@media (hover:hover) and (pointer:fine){
  .cst-nsw-dpf:hover img{transform:scale(1.035)}
}
.cst-nsw-dpg--1{grid-template-columns:minmax(0,1fr);grid-auto-rows:clamp(14rem,34vw,30rem)}
.cst-nsw-dpg--2{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:clamp(12rem,26vw,24rem)}
.cst-nsw-dpg--3{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
.cst-nsw-dpg--3 .cst-nsw-dpf:first-child,
.cst-nsw-dpg--4 .cst-nsw-dpf:first-child,
.cst-nsw-dpg--5 .cst-nsw-dpf:first-child{grid-row:span 2}
.cst-nsw-dpg--4 .cst-nsw-dpf:last-child{grid-column:span 2}
.cst-nsw-dpg--6{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:47.5rem){
  .cst-nsw-dpg,.cst-nsw-dpg--1,.cst-nsw-dpg--2,.cst-nsw-dpg--3,.cst-nsw-dpg--6{display:flex;
    gap:.75rem;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
    padding:.25rem .25rem 1.5rem;scrollbar-width:none}
  .cst-nsw-dpg::-webkit-scrollbar{display:none}
  .cst-nsw-dpf{flex:0 0 78%;aspect-ratio:4/5;scroll-snap-align:start}
  .cst-nsw-dpg--1 .cst-nsw-dpf{flex-basis:100%;aspect-ratio:4/3}
}
@media (max-width:56rem){
  .cst-nsw-hi{grid-template-columns:minmax(0,1fr)}
}

/* ── W6 · LA FRANJA ─────────────────────────────────────────────────────────
   Diego: *«banners más trabajados, más diseño»*.

   🔴 EL TRABAJO ESTÁ EN LA ESCALA Y EN EL HALO, NO EN AGREGAR PIEZAS. Es el
   SEGUNDO banner de la página, así que tiene que leerse distinto del primero o
   son dos veces lo mismo: tipografía más grande que cualquier otro título de
   acá, medida de lectura corta (19ch, como el titular de un aviso), rótulo en
   el tono del área, y el halo celeste haciendo el borde. Cero fondo lleno.

   ⏳ SIN FOTO, y es un límite del panel dicho en voz alta: la solapa Nosotros
   le da a este bloque dos campos, título y frase. No hay ninguna imagen que
   Diego haya elegido para acá, y colgarle la del banner de la portada sería el
   mismo archivo diciendo dos cosas. La grilla ya es de dos columnas: el día que
   exista el campo, la foto entra a la derecha sin tocar nada más. */
.cst-nsw-fr{display:grid;gap:clamp(.75rem,2vw,1.5rem);
  grid-template-columns:minmax(0,1fr);align-items:center;
  padding:clamp(1.75rem,4vw,2.75rem) clamp(1.25rem,3vw,2.25rem);
  border-radius:var(--r-l);background:var(--sup);border:1px solid var(--line);
  box-shadow:var(--sh-2)}
.cst-nsw-kick{display:block;font-size:.6875rem;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--acento-txt);margin-bottom:.7rem}
.cst-nsw-ft{margin:0;font-size:clamp(1.5rem,4.4vw,2.125rem);line-height:1.14;
  font-weight:800;letter-spacing:-.035em;color:var(--ink);max-width:19ch;
  text-wrap:balance}
.cst-nsw-fp{margin:.8rem 0 0;font-size:.9375rem;line-height:1.6;color:var(--ink2);
  max-width:46ch}

/* ── SKY-BANNER · 13-10 · EL BANNER GRANDE DE NOSOTROS ──────────────────────
   Una foto a todo el ancho del contenido, o varias en una pista que se desliza.
   SIN FONDO AZUL: el marco es la foto con el halo de la casa (--sh-2) y el
   radio grande. La pista es scroll-snap, asi que SIN JAVASCRIPT se ve la
   primera y las demas se deslizan; los controles nacen ocultos y los muestra
   el script.
   A TODO EL ANCHO DEL CONTENIDO (max-width:none): los demas bloques de
   Nosotros se quedan en 72rem para que el texto se lea; una foto no se lee,
   se mira, y el pedido fue «un banner grande».
   PC 8:3; en el celular 4:5 si TODAS tienen su foto de celular, y 4:3 si
   alguna no (la de PC se recorta al centro, no se aplasta). */
.cst-nbn{max-width:none;margin:clamp(1.5rem,3.5vw,2.5rem) auto 0}
.cst-nbn-mar{position:relative;border-radius:var(--r-l);overflow:hidden;
  box-shadow:var(--sh-2);background:var(--sup)}
.cst-nbn-pista{display:flex;margin:0;padding:0;list-style:none;
  overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.cst-nbn-pista::-webkit-scrollbar{display:none}
.cst-nbn-f{flex:0 0 100%;min-width:0;scroll-snap-align:start;aspect-ratio:8/3}
.cst-nbn-f picture{display:block;width:100%;height:100%}
.cst-nbn-f img{display:block;width:100%;height:100%;object-fit:cover}
.cst-nbn-t{position:absolute;left:clamp(.75rem,2.5vw,1.75rem);bottom:clamp(.75rem,2.5vw,1.75rem);
  margin:0;max-width:min(32ch,calc(100% - 1.5rem));padding:.6rem 1rem;border-radius:var(--r-m);
  background:var(--sup);color:var(--ink);box-shadow:var(--sh-1);
  font-size:clamp(1rem,2.2vw,1.375rem);font-weight:800;line-height:1.2;letter-spacing:-.02em}
.cst-nbn-ctl{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.25rem;margin-top:.6rem}
.cst-nbn-ctl[hidden]{display:none}
.cst-nbn-b{display:inline-flex;align-items:center;justify-content:center;
  width:2.75rem;height:2.75rem;padding:0;border:1px solid var(--line);border-radius:50%;
  background:var(--sup);color:var(--ink);box-shadow:var(--sh-1);cursor:pointer}
.cst-nbn-b .cst-ico{width:1.125rem;height:1.125rem}
.cst-nbn-pts{display:flex;flex-wrap:wrap;justify-content:center;align-items:center}
.cst-nbn-pt{position:relative;width:2.75rem;height:2.75rem;padding:0;border:0;
  background:none;cursor:pointer}
.cst-nbn-pt::before{content:"";position:absolute;left:50%;top:50%;width:.5rem;height:.5rem;
  margin:-.25rem 0 0 -.25rem;border-radius:50%;background:var(--linea)}
.cst-nbn-pt[aria-current="true"]::before{width:1.375rem;margin-left:-.6875rem;
  border-radius:.25rem;background:var(--acento-txt)}
@media (max-width:47.5rem){
  .cst-nbn-f{aspect-ratio:4/3}
  .cst-nbn--cel .cst-nbn-f{aspect-ratio:4/5}
}
@media (prefers-reduced-motion:reduce){
  .cst-nbn-pista{scroll-behavior:auto}
}

@media (prefers-reduced-motion:reduce){
  .cst-nsw-cnt,.cst-nsw-p{transition:none}
  /* El acordeon sigue abriendo y cerrando: lo que se apaga es el viaje,
     no la funcion. Un control que deja de funcionar con el movimiento
     reducido prendido es un control roto para quien lo necesita. */
  .cst-nsw-cue,.cst-nsw-abr .cst-chev,.cst-nsw-cue-x{transition:none}
}

/* ═══ ⭐ E4 · EL LINK A «QUIÉNES SOMOS» EN LA CABECERA Y EN EL CAJÓN ═════════
   Diego, 18-09: la página existía y para él **no existía**, porque el único
   link vivía en el pie y al pie no baja nadie.

   🔴 POR QUÉ NO ESTÁ ADENTRO DE `.cst-nav`, MEDIDO (pruebas/medir_header.mjs,
   que inyecta un ítem de verdad con la tipografía real en vez de estimar):
     1440 → la barra tiene 864 px y las 5 categorías miden 724: sobran 140.
     1400 → 826 / 724: sobran 102.   1366 → 794 / 724: sobran 70.
     1280 → 708 / 724: 🔴 FALTAN 16 — la barra de categorías YA se desborda hoy,
            sin que nadie haya agregado nada.
   «Quiénes somos» mide 122 px y «Nosotros» 82: por eso el link se llama
   «Nosotros» — 40 px menos, el mismo significado, y es uno de los dos nombres
   que puso Diego. Con él puesto: a 1440 la barra sigue entrando (sobran 58 px),
   a 1366 le faltan 12 y a 1280 —donde YA le faltaban 16 antes de este trabajo—
   le faltan 98. Eso último es el defecto viejo de `.cst-nav`, que manda al
   «Más ▾» por CANTIDAD de ítems y no por ancho; está anotado en
   `46_PAGINA_CONFIANZA.md` §5.2.
   Y hay una segunda razón que no depende del ancho: ese `<nav>` se anuncia
   `aria-label="Categorías"`, y esto no es una categoría.

   Acá es un link de utilidad, pegado al borde derecho, con el mismo aspecto que
   `.cst-salir`, que ya vive en ese grupo. */
.cst-hd-sobre{display:none}
@media (min-width:56.25rem){
  /* Mismo alto y misma tipografía que `.cst-nav-a` a propósito: se lee como
     parte de la misma fila, que es lo que pidió Diego. Lo que lo separa de las
     categorías es AIRE (`margin-left`) y peso (750 contra 600), no una línea ni
     un recuadro: en esta hoja no entra un `border-left` —es la regla de la casa
     y la batería la mide— y un marco más en una cabecera que ya tiene siete
     objetos sería justo lo contrario de «menos elementos».
     🔴 LOS NÚMEROS DE ESTA REGLA NO SON DE GUSTO — SE ELIGIERON MIRANDO UNA
     CAPTURA A 1366. Con `padding:.7rem` y `margin-left:.55rem` el movimiento le
     costaba 12 px a la barra, y a 1366 —donde ya faltaban 12— eso se comía el
     **chevron de «Celular y PC»**: la flechita que avisa «esto abre un panel»
     desaparecía en cualquier notebook de 13". Con `.5rem` de padding y `.1rem`
     de margen el link mide 79,8 px contra los 82 que ocupaba en `.cst-hd-r`
     (+2,4 del gap de la barra): **el movimiento sale gratis, medido**, y a 1366
     la barra se pasa lo mismo que antes de tocar nada.
     ⚠️ Entonces lo que lo separa de las categorías NO es espacio —no hay de
     dónde sacarlo— es el PESO: 750 contra 600. Se ve en la captura. */
  /* ══════════════════════════════════════════════════════════════════════
     🔴 NS-2 · 20-09 (noche) · SE VE IGUAL QUE UNA CATEGORÍA, PORQUE ES UN LINK
     ══════════════════════════════════════════════════════════════════════
     Diego, mirando la cabecera: *«en el header Nosotros es de otro color, no
     tiene el efecto en el hover, otra tipografía»*. Las tres son ciertas y las
     tres estaban puestas A PROPÓSITO: acá arriba decía *«lo que lo separa de
     las categorías NO es espacio, es el PESO: 750 contra 600»*.

     ⭐ Y ES LA DECISIÓN LA QUE ESTABA MAL, no la ejecución. El peso extra no se
        lee como «esto es distinto»: se lee como **un link roto**, que es
        exactamente lo que reportó el dueño mirando su propia tienda. Un matiz
        que hay que explicar no separa nada — molesta. Medido contra
        `.cst-nav-a`: mismo `font-size` y mismo `color` base ya eran iguales;
        lo que cambiaba era `font-weight` (750 vs 600), el `letter-spacing` y
        —la que más se nota— que NO tenía el subrayado que aparece al pasar el
        mouse por una categoría.

     ⚠️ EL PADDING NO SE TOCA, y no es pereza: está MEDIDO. Con `.7rem` (el de
        `.cst-nav-a`) el link crece ~6 px y a 1366 se come el chevron de
        «Celular y PC» —la flechita que avisa «esto abre un panel»—. Por eso
        queda en `.5rem` y el subrayado se dibuja a `.5rem` de cada lado, para
        que caiga debajo del texto y no desalineado.
     ⚠️ Lo que lo separa de las categorías pasa a ser sólo el AIRE y el lugar:
        es hermano del `<nav>`, no hijo, y el `<nav>` sigue anunciándose
        `aria-label="Categorías"`. Un lector de pantalla los sigue
        distinguiendo aunque a la vista se lean igual.
     ══════════════════════════════════════════════════════════════════════ */
  .cst-hd-sobre{position:relative;display:inline-flex;align-items:center;min-height:2.75rem;
    padding:.55rem .5rem;margin-left:.1rem;white-space:nowrap;flex:none;
    font-size:.8438rem;font-weight:600;
    color:var(--ink2);text-decoration:none;border-radius:.7rem;
    transition:color .25s var(--ease)}
  /* Sólo el ANCHO: el subrayado entero se define arriba, junto al de las
     categorías. Acá se corre a .5rem porque este link tiene menos padding —y
     eso está medido: con el de las categorías, a 1366 se come el chevron de
     «Celular y PC»—. Ni un color en esta regla: el bloque de la página de
     confianza no admite fondos de acento, y hace bien. */
  .cst-hd-sobre::after{left:.5rem;right:.5rem}
  @media (hover:hover) and (pointer:fine){
    .cst-hd-sobre:hover{color:var(--ink);text-decoration:none}
    .cst-hd-sobre:hover::after{transform:scaleX(1)}
  }
  .cst-hd-sobre[aria-current="page"]{color:var(--ink)}
  .cst-hd-sobre[aria-current="page"]::after{transform:scaleX(1)}
  .cst-hd-sobre:focus-visible{outline:2px solid var(--acento-txt);outline-offset:-2px}
}
/* 🔴 ABAJO DE 56,25 rem NO SE DIBUJA: la cabecera del celular son dos filas de
   126 px con ☰ + carrito + cuenta y no entra una palabra más. Ahí el link es una
   fila del cajón — que ES el menú de la cabecera en celular. UN SOLO CORTE, el
   mismo de siempre: `VOTO-10` no se parte en dos.
   La línea de arriba lo separa de las categorías sin agregar un elemento: es un
   borde, no un título ni un encabezado de grupo. */
/* ═══ ⭐ M2 · 11-10 · «NOSOTROS» DEJÓ DE TENER HOJA PROPIA ═══════════════════
   Diego, por tercera vez: *«no entiendo por qué Nosotros está abajo de todo»*.
   Hasta hoy esta clase lo clavaba al pie del cajón con un borde arriba, afuera
   del `<ul>` que scrollea. Lo que lo hacía ver «separado» no era el orden: era
   ESTE trato distinto —otro contenedor, otro padding, una línea propia—.

   ⭐ AHORA ES UNA FILA MÁS DE LA LISTA y hereda `.cst-caj-a` entera: el mismo
   alto de 44 px, el mismo borde entre filas, la misma tipografía que una
   categoría sin hijas. Por eso esta clase **no declara ninguna propiedad**: lo
   que queda de ella es el ancla con la que las baterías encuentran la fila sin
   buscarla por el texto, que es la regla de la casa (un ancla por id, no por
   prosa). Una regla vacía sería una regla muerta; una clase sin regla, no.
   🔴 Lo que abajo del pliegue no puede quedar es la CUENTA, y por eso esa sí
   vive afuera del `<ul>`, en `.cst-caj-pie`. */

/* ═══ ⭐ M2 · EL PIE DEL CAJÓN: LA CUENTA Y LAS DOS SALIDAS ══════════════════
   Diego: *«el header está sobrepasado de cosas… la cuenta y el botón de salir
   en el menú desplegable»*, *«abajo irían cosas como cuenta, nombre de
   usuario»*, *«el salir del modo de prueba IGUAL dentro del menú»*.

   🔴 CLAVADO ABAJO Y AFUERA DEL `<ul>`, por la razón que la fila de «Nosotros»
   ya no necesita: `.cst-caj-l` tiene `overflow-y:auto`, y con cinco categorías
   desplegadas la cuenta se iría abajo del pliegue. Lo que se vino a hacer acá
   es mirar productos; tu cuenta tiene que estar donde siempre, sin scrollear.

   🔴 Y SIN UN SOLO FONDO LLENO (regla de la casa): lo que separa al bloque del
   pase es el HALO —la sombra de color, la firma de Diego— y no un rectángulo
   pintado que le robaría jerarquía a todo lo que tiene al lado. */
.cst-caj-pie{flex:none;display:flex;flex-direction:column;gap:.1rem;
  padding:.45rem .6rem calc(.7rem + env(safe-area-inset-bottom));
  border-top:1px solid var(--line2)}
/* === HD2 · 11-10 · TU CUENTA, DESPLEGABLE (voto de Diego, opcion 6) ======
                                                              (sky-hd2c)
   Diego, antes de votar: *«Mis pedidos y Cerrar sesion desplegados no quedan
   bien. Deberia abrirse como un desplegable»*. Y voto la 6: una fila con tu
   nombre que al tocarla abre las dos opciones.

   LA FILA AHORA SI ES UN CONTROL, Y POR ESO AHORA SI LO PARECE: 56 px de
   alto, radio, y el mismo chevron de las categorias, en la misma columna y
   con la misma opacidad. Hasta hoy el nombre no se podia apretar y por eso no
   tenia nada de eso; ahora abre y cierra, y un control que no parece control
   es el mismo defecto al reves.

   NACE CERRADO Y VUELVE A CERRARSE CADA VEZ QUE SE CIERRA EL MENU (lo hace
   webRMenuJs). Es la regla de Diego *«lo apretas y cambias, mira si apretas
   sin querer»*: Cerrar sesion queda siempre a DOS toques, nunca a uno, y el
   segundo toque esta en un lugar que antes no estaba.

   LO CERRADO SALE DEL ARBOL DE ACCESIBILIDAD: el panel lleva el atributo
   hidden, no una altura cero. Con altura cero los dos controles seguirian en
   el recorrido del tabulador y el lector de pantalla los leeria sin que se
   vean, que es justo el defecto que tiene el acordeon de categorias de arriba
   (su submenu cerrado se colapsa con la grilla y sigue siendo tabulable).

   SIN UN SOLO FONDO DE COLOR: abierto, el bloque pasa a ser una tarjeta que
   FLOTA con el halo celeste de la casa (la sombra de color, la firma), sobre
   la misma superficie del cajon. Mas halo, menos borde. Cerrado no tiene ni
   sombra ni fondo: es una fila mas del menu.

   LAS COLUMNAS SE ALINEAN AL PIXEL: el avatar arranca en la misma columna que
   el texto de las categorias (1,3 rem del borde del cajon), el chevron cae en
   la misma columna que los chevrons de arriba, y los iconos de Mis pedidos y
   Cerrar sesion se centran debajo del avatar con el texto alineado al nombre.
   Son las cuentas de .cst-caj-cup .cst-caj-pa, escritas abajo. */
.cst-caj-cu{display:flex;flex-direction:column;padding:.25rem;border-radius:var(--r-m);
  transition:background-color .25s var(--ease),box-shadow .3s var(--ease)}
.cst-caj-cu[data-abierto="1"]{background:var(--sup);
  box-shadow:0 4px 10px rgba(60,69,82,.05), 0 14px 34px rgba(var(--halo),.46)}
/* El boton se iguala a la fila a mano: sin font:inherit el navegador le pone
   su letra, y sin text-align:left centra el nombre. */
.cst-caj-yo{position:relative;display:flex;align-items:center;gap:.6rem;width:100%;min-width:0;
  min-height:3.5rem;margin:0;padding:.5rem 2.5rem .5rem .45rem;border:0;border-radius:.875rem;
  background:none;cursor:pointer;font:inherit;color:inherit;text-align:left;
  -webkit-tap-highlight-color:transparent}
.cst-caj-yo:focus-visible{outline:2px solid var(--acento-txt);outline-offset:-2px}
/* El chevron, en la columna de los de las categorias: .6 de relleno del pie,
   .25 de la tarjeta y .625 de aca dan el mismo centro que el boton de 44 px
   de una categoria. */
.cst-caj-yo .cst-caj-yo-c{position:absolute;right:.625rem;top:50%;margin-top:-.5rem;
  font-size:1rem;color:var(--ink2);opacity:.7;transition:transform .3s var(--ease)}
.cst-caj-yo[aria-expanded="true"] .cst-caj-yo-c{transform:rotate(180deg)}
.cst-caj-av{flex:none;width:2.25rem;height:2.25rem;border-radius:50%;
  display:grid;place-items:center;font-size:1rem;color:var(--acento-txt);
  background:var(--sup);
  box-shadow:0 1px 2px rgba(60,69,82,.05), 0 4px 14px rgba(var(--halo),.6)}
.cst-caj-yo-t{min-width:0;display:flex;flex-direction:column;gap:.05rem}
/* El nombre y el mail se cortan con puntos suspensivos y NO parten el cajon:
   un mail largo sin min-width:0 arriba estira el flex y empuja el ancho. */
.cst-caj-yo-n{font-size:.9375rem;font-weight:800;letter-spacing:-.01em;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cst-caj-yo-m{font-size:.75rem;font-weight:600;color:var(--ink2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* === HD2 · EL SUBRAYADO DEL NOMBRE Y DEL MAIL (captura de Diego, iPhone) ===
   En la captura el nombre y el mail del pie salian SUBRAYADOS, con una raya
   del color del texto pero mas palida. Medido en esta hoja: ninguna regla
   subraya nada ahi (text-decoration en none en el elemento y en cada uno de
   sus padres), y el HTML no tiene un solo enlace en ese bloque. Lo que dibuja
   esa raya es el telefono: el detector de datos de Safari en el iPhone
   encuentra el mail, lo envuelve en un enlace propio con
   x-apple-data-detectors y le pone, en linea, el color del texto y un
   subrayado del mismo tono al 38 por ciento. Ademas el nombre y el mail iban
   PEGADOS en el texto (sin un solo espacio entre los dos: el textContent
   decia Valentinavalentina.sosa@...), y un detector que lee el texto corrido
   ve UN solo mail que empieza en el nombre.
   SE SACA EN LOS DOS LADOS:
     · el HTML pone un espacio entre el nombre y el mail (webRCajonPie), que
       en una columna flex no se dibuja pero corta el texto en dos palabras;
     · y si el detector igual envuelve algo, el enlace que agrega hereda el
       color, pierde la raya y NO recibe el toque: el toque es de la fila, que
       abre tu cuenta, y no de un mail que abriria la app de correo.
   Los important no son pereza: el detector escribe color y subrayado EN LINEA
   en su enlace, y una regla de hoja sin important no le gana a un estilo en
   linea. Es la misma salida que usa todo el mundo en los mails, donde Apple
   hace lo mismo. Va tambien para el nombre y el mail del panel de la cuenta
   de la cabecera (iPad acostado), que tiene el mismo texto. */
.cst-caj-yo-t a,.cst-cu-nom a,.cst-cu-m a{color:inherit!important;
  text-decoration:none!important;pointer-events:none}
/* Las filas del pie: mismo alto y misma tipografia que una categoria, porque
   son lo mismo, filas de un menu. El boton del formulario se iguala al enlace
   a mano: sin font-family:inherit el navegador le pone la suya. */
.cst-caj-pa{display:flex;align-items:center;gap:.55rem;width:100%;min-height:44px;
  padding:.55rem .7rem;border-radius:.7rem;border:0;background:none;cursor:pointer;
  font-family:inherit;font-size:.9375rem;font-weight:650;color:var(--ink);
  text-align:left;text-decoration:none}
.cst-caj-pa .cst-ico{color:var(--ink2);font-size:1rem}
.cst-caj-pa:focus-visible{outline:2px solid var(--acento-txt);outline-offset:-2px}
.cst-caj-cuf{margin:0}
/* El panel que abre la fila. La linea de arriba lo separa del nombre adentro
   de la tarjeta; el [hidden] hace falta escrito porque display:flex le gana
   a la hoja del navegador y sin esto el panel cerrado se dibujaria igual. */
.cst-caj-cup{display:flex;flex-direction:column;border-top:1px solid var(--line2);
  animation:cst-caj-cup-in .24s var(--ease)}
.cst-caj-cup[hidden]{display:none}
@keyframes cst-caj-cup-in{from{opacity:0;transform:translateY(-.25rem)}to{opacity:1;transform:none}}
/* El icono, centrado debajo del avatar: .45 rem de relleno del boton mas la
   mitad del avatar (1,125) menos la mitad del icono (.5) = 1,075 rem. El
   texto, en la columna del nombre: .45 + 2,25 + .6 de separacion menos 1,075
   menos el icono = 1,225 rem. */
.cst-caj-cup .cst-caj-pa{padding-left:1.075rem;gap:1.225rem}
/* 🔴 EL «SALIR» DE LA CUENTA VA EN EL ROJO DE LA CASA, igual que el de la
   cabecera (`.cst-cu-s`). Es el que se queda para siempre, y el color es una
   de las cinco cosas que lo separan del otro. */
.cst-caj-sal{color:var(--bad)}
.cst-caj-sal .cst-ico{color:var(--bad)}
/* 🔑 EL «SALIR» DEL MODO DE PRUEBA, QUE ES OTRA COSA Y SE TIENE QUE VER OTRA
   COSA. Bloque propio con halo, candado en vez de puerta, tinta suave en vez
   de rojo, y una línea abajo que dice adónde lleva. El miércoles que la tienda
   abra, el que llama deja de pasar `salir_url` y este bloque no se dibuja más:
   la regla se queda sin elemento y se borra, no se apaga. */
.cst-caj-pase{display:flex;align-items:center;gap:.6rem;min-height:44px;
  margin-top:.4rem;padding:.55rem .7rem;border-radius:var(--r-m);
  background:var(--sup);text-decoration:none;
  box-shadow:0 1px 2px rgba(60,69,82,.05), 0 6px 18px rgba(var(--halo),.52)}
.cst-caj-pase-ic{flex:none;display:grid;place-items:center;
  width:1.75rem;height:1.75rem;font-size:.9375rem;color:var(--ink2)}
.cst-caj-pase-t{min-width:0;display:flex;flex-direction:column;gap:.05rem}
.cst-caj-pase-n{font-size:.875rem;font-weight:750;letter-spacing:-.01em;color:var(--ink)}
.cst-caj-pase-d{font-size:.6875rem;font-weight:600;color:var(--ink2)}
.cst-caj-pase:focus-visible{outline:2px solid var(--acento-txt);outline-offset:2px}
/* cs-bloque:pagina-confianza · CIERRA (ver el marcador de arriba) */

/* cs-bloque:paginas-legales · ABRE ───────────────────────────────────────────
   ⚖️ LG · TÉRMINOS · PRIVACIDAD · CAMBIOS · ARREPENTIMIENTO
   Contrato: documentacion/web/57_LEGALES_PAGINAS.md

   🔴 ESTE MARCADOR NO SE BORRA. `pruebas/prueba_legales.php` recorta con él el
   pedazo de hoja al que le aplica las reglas duras de la tienda (cero modo
   oscuro, cero color crudo fuera de los tokens, cero barra de acento al
   costado). Se aprendió caro en la página de confianza: recortar buscando el
   TÍTULO del comentario deja la batería roja el día que alguien mejora una
   frase. Un marcador declarado no se rompe con una redacción.

   🔴 POR QUÉ UNA COLUMNA DE LECTURA CENTRADA Y NO EL ANCHO ENTERO. Un documento
   legal se lee de arriba abajo, renglón por renglón, y un renglón de 1.300 px
   no se lee: se escanea y se abandona. Pero la queja de Diego sobre /contacto
   («la mitad derecha queda vacía») es real y no se puede repetir. La respuesta
   son DOS zonas distintas: el encabezado es una franja de borde a borde, que
   llena la pantalla de entrada; y abajo, el índice y el texto van como un par
   CENTRADO, que es la forma que tiene cualquier documento y no se lee como un
   hueco. El texto nunca se estira.
   ─────────────────────────────────────────────────────────────────────────── */

/* ── El encabezado ancho ─────────────────────────────────────────────────── */
.cst-lg-cab{background:var(--fondo);border-bottom:1px solid var(--line2);
  padding:clamp(2rem,5vw,3.5rem) 0 clamp(1.75rem,4vw,2.75rem)}
/* 🔴 EL ENCABEZADO SE ALINEA CON EL CUERPO, Y NO ES UN CAPRICHO. Con el
   encabezado pegado al borde izquierdo y el texto centrado más abajo, la
   página tiene DOS ejes y se lee como dos pantallas pegadas. Las medidas de
   abajo son las mismas que arma la grilla (15 + 3 + 42 = 60 rem), así que el
   título arranca exactamente donde arranca el índice. */
.cst-lg-cab-in{max-width:56rem}
@media (min-width:66rem){ .cst-lg-cab-in{max-width:60rem;margin-inline:auto} }
.cst-lg-h1{margin:0;font-size:clamp(1.75rem,5vw,2.75rem);font-weight:800;
  letter-spacing:-.03em;line-height:1.12;color:var(--ink)}
.cst-lg-baj{margin:.85rem 0 0;max-width:46ch;font-size:clamp(.9375rem,2.2vw,1.0625rem);
  line-height:1.65;color:var(--ink2)}
/* La fecha, como pastilla flotando: es un dato de servicio, no parte del texto.
   Va en pastilla y no en gris de 12 px para que se pueda encontrar sin buscarla
   — el apartado de vigencia de los términos se apoya en ella. */
.cst-lg-rev{display:inline-flex;align-items:center;gap:.4rem;margin:1.15rem 0 0;
  padding:.42rem .85rem;border-radius:99px;background:var(--sup);
  border:1px solid var(--line2);box-shadow:var(--sh-1);
  font-size:.8125rem;font-weight:700;color:var(--ink2)}
.cst-lg-rev-i{width:1em;height:1em;flex:none;color:var(--acento-txt)}

/* ── La grilla: índice + texto, centrados ────────────────────────────────── */
.cst-lg-sec{padding-bottom:clamp(2.5rem,7vw,4.5rem)}
.cst-lg{display:grid;gap:clamp(1.5rem,4vw,3rem)}
.cst-lg-c{min-width:0;max-width:42rem}
/* Arriba de 66 rem entra el índice al costado: 15 + 3 de hueco + 42 de texto =
   60 rem, y el par va CENTRADO. El corte es 66 y no 64 a propósito — a 64 rem
   justos el `.cst-wrap` mide 60 rem exactas (100% menos 4 rem de margen) y la
   grilla entraría pegada a los dos bordes, sin un pixel de aire. Con 66 quedan
   2 rem de cada lado y nunca se pasa: medido a 1366, 1440 y 1024. */
@media (min-width:66rem){
  .cst-lg{grid-template-columns:15rem 42rem;justify-content:center;
    align-items:start}
}

/* ── El índice ───────────────────────────────────────────────────────────── */
.cst-lg-ix{min-width:0;padding:1.1rem 1.25rem;border-radius:var(--r-m);
  background:var(--sup);border:1px solid var(--line2);box-shadow:var(--sh-1)}
.cst-lg-ix-t{margin:0 0 .6rem;font-size:.6875rem;font-weight:800;
  letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.cst-lg-ix ol{margin:0;padding:0;list-style:none;counter-reset:lgix}
.cst-lg-ix li{counter-increment:lgix}
.cst-lg-ix li + li{margin-top:.15rem}
.cst-lg-ix a{display:block;padding:.34rem 0 .34rem 1.65rem;position:relative;
  font-size:.8125rem;line-height:1.45;color:var(--ink2);text-decoration:none;
  border-radius:.4rem;transition:color .2s var(--ease)}
.cst-lg-ix a::before{content:counter(lgix);position:absolute;left:0;top:.34rem;
  width:1.15rem;font-size:.6875rem;font-weight:800;color:var(--muted);
  font-variant-numeric:tabular-nums}
@media (hover:hover) and (pointer:fine){
  .cst-lg-ix a:hover{color:var(--acento-txt)}
  .cst-lg-ix a:hover::before{color:var(--acento-txt)}
}
/* Pegado al scrollear, pero sólo donde hay lugar: en el celular el índice va
   arriba del texto y quedarse pegado sería taparle media pantalla al que lee. */
@media (min-width:66rem){
  .cst-lg-ix{position:sticky;top:6.5rem}
}

/* ── El texto ────────────────────────────────────────────────────────────── */
/* El respiro de arriba del ancla: la cabecera de la tienda está pegada y sin
   esto el título aterriza DEBAJO de ella. Los dos valores están medidos en la
   página de confianza: 126 px de cabecera a 390 y 79 px a 1440. */
.cst-lg-b{scroll-margin-top:8.5rem}
@media (min-width:56.25rem){ .cst-lg-b{scroll-margin-top:6rem} }
.cst-lg-b + .cst-lg-b{margin-top:clamp(1.75rem,4vw,2.5rem);
  padding-top:clamp(1.75rem,4vw,2.5rem);border-top:1px solid var(--line2)}
.cst-lg-h2{margin:0 0 .75rem;font-size:clamp(1.125rem,2.6vw,1.375rem);font-weight:800;
  letter-spacing:-.02em;line-height:1.25;color:var(--ink)}
.cst-lg-p{margin:0 0 .85rem;font-size:.9375rem;line-height:1.75;color:var(--ink2)}
.cst-lg-p:last-child{margin-bottom:0}
.cst-lg-p b, .cst-lg-ul b{font-weight:750;color:var(--ink)}
.cst-lg-ul{margin:0 0 .95rem;padding:0 0 0 1.15rem;list-style:none}
.cst-lg-ul li{position:relative;margin-bottom:.5rem;font-size:.9375rem;
  line-height:1.7;color:var(--ink2)}
.cst-lg-ul li:last-child{margin-bottom:0}
/* La viñeta es un punto dibujado y no el `list-style` del navegador: así tiene
   el color de la casa y queda alineada con la primera línea aunque el renglón
   se parta en tres. */
.cst-lg-ul li::before{content:"";position:absolute;left:-1.15rem;top:.62rem;
  width:.3125rem;height:.3125rem;border-radius:50%;background:var(--acento)}

/* ── La nota ─────────────────────────────────────────────────────────────── */
/* Fondo y no color de alerta: en una página legal todo importa, así que si el
   énfasis fuera rojo la página entera sería roja y el énfasis no diría nada. */
.cst-lg-nota{display:flex;gap:.7rem;margin:0 0 .95rem;padding:.9rem 1.05rem;
  border-radius:var(--r-s);background:var(--fondo);border:1px solid var(--line2)}
.cst-lg-nota-i{width:1.05em;height:1.05em;flex:none;margin-top:.15rem;color:var(--acento-txt)}
.cst-lg-nota p{margin:0;font-size:.875rem;line-height:1.7;color:var(--ink2)}

/* ── La tarjeta de datos del titular ─────────────────────────────────────── */
/* `auto-fit` y no dos pistas fijas: con un solo dato cargado ocupa el ancho
   entero en vez de dejar media tarjeta en blanco. Es, letra por letra, el
   defecto que Diego señaló en /contacto y que se arregló ahí — no se vuelve a
   sembrar acá. El `min()` adentro del `minmax` es lo que impide el desborde a
   390 px cuando la pista mínima no entra. */
.cst-lg-datos{display:grid;gap:.1rem .5rem;margin:0 0 .95rem;padding:1rem 1.15rem;
  border-radius:var(--r-m);background:var(--sup);border:1px solid var(--line2);
  box-shadow:var(--sh-1);
  grid-template-columns:repeat(auto-fit,minmax(min(15rem,100%),1fr))}
.cst-lg-dato{padding:.42rem 0;min-width:0}
.cst-lg-dato dt{margin:0;font-size:.6875rem;font-weight:800;letter-spacing:.07em;
  text-transform:uppercase;color:var(--muted)}
.cst-lg-dato dd{margin:.12rem 0 0;font-size:.9375rem;font-weight:700;
  line-height:1.45;color:var(--ink);overflow-wrap:anywhere}
.cst-lg-dato dd a{color:var(--acento-txt);text-decoration:none}
@media (hover:hover) and (pointer:fine){ .cst-lg-dato dd a:hover{text-decoration:underline} }

/* ── El link «seguir leyendo» ────────────────────────────────────────────── */
.cst-lg-mas{margin:0 0 .85rem}
.cst-lg-mas:last-child{margin-bottom:0}
.cst-lg-a{display:inline-flex;align-items:center;gap:.35rem;
  font-size:.875rem;font-weight:750;color:var(--acento-txt);text-decoration:none}
.cst-lg-a-i{width:.9em;height:.9em;flex:none;transition:transform .25s var(--ease)}
@media (hover:hover) and (pointer:fine){
  .cst-lg-a:hover{text-decoration:underline}
  .cst-lg-a:hover .cst-lg-a-i{transform:translateX(3px)}
}

/* ── ⚖️ LG-19 · EL LIBRO DE QUEJAS, la caja donde se escribe ─────────────── */
/* Misma ropa que la tarjeta del titular (`--sup` + `--line2` + `--sh-1`): la
   página legal se lee como un cuerpo de documentos y un formulario con estilo
   propio la partiría en dos. Sin fondo de color lleno — el acento va en el
   botón y en el foco, no en un bloque que compita con el texto de al lado. */
.cst-lq{margin:0 0 .95rem;padding:clamp(1.05rem,3vw,1.4rem);border-radius:var(--r-m);
  background:var(--sup);border:1px solid var(--line2);box-shadow:var(--sh-1)}
/* `auto-fit` con `min()`: a 390 px las tres pistas colapsan a una sola y no hay
   desborde; a 1440 el nombre y el mail comparten renglón. */
.cst-lq-fila{display:grid;gap:.85rem;margin:0 0 .85rem;
  grid-template-columns:repeat(auto-fit,minmax(min(15rem,100%),1fr))}
.cst-lq-c{display:block;min-width:0}
.cst-lq-t{display:block;margin:0 0 .3rem;font-size:.6875rem;font-weight:800;
  letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.cst-lq-i,.cst-lq-a{display:block;width:100%;box-sizing:border-box;
  padding:.72rem .85rem;border-radius:var(--r-s);border:1px solid var(--line);
  background:var(--fondo);color:var(--ink);font:inherit;font-size:1rem;
  line-height:1.5;transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
/* 🔴 `font-size:1rem` Y NO MENOS: Safari en iPhone hace ZOOM al enfocar
   cualquier campo de menos de 16 px, y el zoom no se deshace solo. La persona
   queda con la página corrida justo cuando está escribiendo la queja. */
.cst-lq-a{min-height:9.5rem;resize:vertical}
.cst-lq-i:focus,.cst-lq-a:focus{outline:none;border-color:var(--acento);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--acento) 22%, transparent)}
.cst-lq-ay{display:block;margin:.35rem 0 0;font-size:.8125rem;line-height:1.55;color:var(--muted)}
.cst-lq-pie{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;margin:.35rem 0 0}
/* 🔴 `--marca`/`--marca-txt` Y NO `--acento`: `--acento` es el pastel #92c0e4,
   y letra blanca encima no llega a AA ni de cerca. Son los mismos dos tokens
   del botón «Agregar» de la card y del botón grande del checkout (`--tray-btn`
   sale de ahí), así que ésta es LA acción de la pantalla y se ve como las otras
   acciones de la tienda — y ni un `#fff` hardcodeado, que rompe el oscuro. */
.cst-lq-b{display:inline-flex;align-items:center;gap:.4rem;padding:.8rem 1.35rem;
  border:0;border-radius:var(--r-s);background:var(--marca);color:var(--marca-txt);
  font:inherit;font-size:.9375rem;font-weight:800;cursor:pointer;
  box-shadow:0 8px 20px color-mix(in srgb,var(--marca) 30%,transparent);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),filter .2s var(--ease)}
@media (hover:hover) and (pointer:fine){
  .cst-lq-b:hover{transform:translateY(-1px);filter:brightness(1.06);box-shadow:var(--sh-2)}
}
.cst-lq-b:active{transform:translateY(0)}
.cst-lq-n{flex:1 1 12rem;min-width:0;font-size:.8125rem;line-height:1.55;color:var(--muted)}
/* 🪤 La trampa del bot. `position:absolute` + `left:-9999px` y no `display:none`:
   varios bots saltean lo que está en `display:none` justamente porque saben que
   es una trampa, y un campo fuera de pantalla lo llenan igual. `aria-hidden` +
   `tabindex="-1"` lo sacan del lector de pantalla y del tabulador, así que una
   persona no lo puede tocar ni por accidente. */
.cst-lq-h{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ── El arrepentimiento: la acción primero ───────────────────────────────── */
/* ⚖️ Disposición 954/2025 art. 1: se tiene que poder EJERCER, no leer sobre el
   derecho. Por eso los canales van arriba de todo, con peso, y las secciones
   que explican vienen después. */
.cst-arr-hoy{padding:clamp(1.25rem,3.5vw,1.85rem);border-radius:var(--r-l);
  background:var(--sup);border:1px solid var(--line2);box-shadow:var(--sh-2)}
.cst-arr-h2{margin-top:0}
.cst-arr-can{display:grid;gap:.7rem;margin-top:1.15rem;
  grid-template-columns:repeat(auto-fit,minmax(min(13rem,100%),1fr))}
.cst-arr-ch{display:grid;grid-template-columns:auto 1fr;gap:.1rem .7rem;
  align-items:center;padding:.85rem 1rem;border-radius:var(--r-m);
  background:var(--fondo);border:1px solid var(--line2);text-decoration:none;
  transition:transform .28s var(--ease),box-shadow .28s var(--ease),border-color .28s var(--ease)}
.cst-arr-ch-i{grid-row:1/3;width:1.35em;height:1.35em;color:var(--acento-txt)}
.cst-arr-ch-t{font-size:.9375rem;font-weight:800;color:var(--ink);line-height:1.3}
/* 🔴 NO VA `--muted` A SECAS, Y ESTÁ MEDIDO. La hoja tiene escrito al lado del
   token que --muted es «SÓLO sobre superficie blanca»: sobre el gris de la
   tarjeta (--fondo) da 4,33:1 y el piso de WCAG para texto chico es 4,5.
   `medir_pantalla.mjs` lo cazó en la primera corrida. Se oscurece con los
   tokens que ya existen —nada de un hex nuevo suelto— y queda en 5,9:1. */
.cst-arr-ch-s{font-size:.75rem;line-height:1.4;overflow-wrap:anywhere;
  color:color-mix(in srgb,var(--muted) 72%,var(--ink))}
@media (hover:hover) and (pointer:fine){
  .cst-arr-ch:hover{transform:translateY(-2px);box-shadow:var(--sh-1);
    border-color:color-mix(in srgb,var(--acento) 55%,transparent)}
}
.cst-arr-hor{display:inline-flex;align-items:center;gap:.4rem;margin:1.1rem 0 0;
  font-size:.8125rem;font-weight:700;color:var(--ink2)}
.cst-arr-hor-i{width:1em;height:1em;flex:none;color:var(--acento-txt)}
/* La tarjeta de la accion es el primer `.cst-lg-b` de la pagina y NO lleva la
   raya separadora de arriba: es una tarjeta con su propio borde, y una raya
   encima de una tarjeta se lee como un renglon suelto. La raya arranca recien
   en el bloque siguiente, que es donde empieza el texto explicativo. */
.cst-lg-arr .cst-arr-hoy + .cst-lg-b{margin-top:clamp(1.75rem,4vw,2.5rem);
  padding-top:clamp(1.75rem,4vw,2.5rem);border-top:1px solid var(--line2)}

/* ── Los links legales del pie ───────────────────────────────────────────── */
/* Van en la MISMA fila que el arrepentimiento y el de reclamos, que es donde ya
   vivía lo legal. No se revive la columna «CORP SKYLA» que Diego sacó: aquella
   eran tres nombres para UNA página; éstos son tres documentos distintos. */
/* pie7: es la columna del medio de la tarjeta (o su segundo renglon, abajo de
   85rem). Sin raya arriba: la tarjeta pasa a ser una sola fila. */
.cst-legal-links{grid-area:links;display:flex;flex-wrap:wrap;align-items:center;
  column-gap:1.125rem;min-width:0}
/* 🔴 `display:inline-block` + sangria arriba y abajo: SIN ESTO EL TOQUE MIDE
   21 px. Medido el 02-10 en las nueve pantallas del camino, preguntandole al
   navegador quien recibe el toque: estos cuatro enlaces daban 21 y 22 px de
   alto, abajo del piso de 24 de WCAG 2.2 AA (2.5.8). No es la excepcion del
   texto corrido —no estan adentro de una oracion, son una fila de nombres
   sueltos separados por una raya— asi que la excepcion no los cubre.
   ⭐ Los 0,35rem son los MISMOS que ya usa `.cst-ft-a` dos bloques mas arriba,
   su vecino en el mismo pie: con eso el toque pasa a 32 px, igual que el de al
   lado, y no hay una medida nueva que explicar. */
.cst-legal-links a{display:inline-block;padding:.35rem 0;
  font-size:.8125rem;font-weight:500;color:var(--ink2);
  text-decoration:none}
/* Defensa lleva la balanza, como en el pie del telefono. */
.cst-legal-links .cst-legal-def{display:inline-flex;align-items:center;gap:.375rem}
.cst-legal-def .cst-legal-def-i{width:.875rem;height:.875rem;flex:none}
/* 🔴 EL SEPARADOR ES UNA RAYA DIBUJADA, NO UN PUNTO DE TEXTO. La primera
   versión era un «·» pintado con --line, y `medir_pantalla.mjs` lo midió en
   1,35:1 contra el blanco: invisible. Un separador invisible no separa nada —
   los tres nombres se leen como una sola frase larga. Un `::before` con
   `background` es una forma, no texto: se ve, y no arrastra la regla de
   contraste de texto a un elemento que no dice nada. */
/* ══ 🔴🔴 10-10 · EL PIE: «OCUPA TODA LA PANTALLA, PARECE UNA SECCIÓN» ═══════
   Diego, y aclarando que lo viene diciendo hace rato: *«el footer se ve muy
   mal, perdón por decirlo, pero hace mucho vengo con eso: que en PC se ve mal,
   en celular peor aún, ocupa toda la pantalla, parece una sección no un
   footer, no puede tener tanto contenido ni ser tan grande»*.

   MEDIDO ANTES DE TOCAR NADA, con el pie de producción (sus dos columnas de
   links, sus cuatro links legales y el escudo fiscal):

     402×874   757 px = **0,87 de su pantalla**
     1440×900  418 px = 0,46
     2560×1440 418 px = 0,29

   🔴🔴 Y DÓNDE VIVEN ESOS PÍXELES, QUE ES LO QUE DICE QUÉ SE PUEDE SACAR. A
      402: el bloque de columnas 397 y el bloque legal 279, y adentro del legal
      la fila de links legales sola se lleva **155** (a 1.440 se lleva 60: se
      apila).

   🔴🔴 LO QUE NO SE TOCÓ, Y POR QUÉ — ESTO IMPORTA MÁS QUE LO QUE SE TOCÓ:
     · **Los 44 px de alto de cada enlace.** No son aire: son el piso de toque
       que AC-14 le puso a los enlaces cortos y que `medir_dedo.mjs` cuida.
       Apretarlos bajaría el pie rompiendo la accesibilidad, que es bajar el
       número y empeorar la pantalla.
     · **Los cuatro links legales, el escudo de Data Fiscal y el botón de
       arrepentimiento.** Un pie más bajo porque se fue Defensa del Consumidor
       no es un pie mejor: es un pie ilegal.
     · **La columna «Comprar».** Es la que de verdad sobra —son las mismas
       categorías que ya están en el menú de arriba y en la barra de
       categorías, o sea el mismo camino tres veces, que es justo lo que Diego
       ya hizo sacar una vez (E1, 18-09)—. Sacarla son ~170 px de una. Pero no
       es una decisión de CSS: la arma `webTiendaPieColumnas()`, la afirman
       CUATRO baterías (`prueba_catalogo` ×4, `prueba_paginas`) y
       `prueba_puerta_legal` la usa como superficie legal, porque el menú y el
       pie beben de la misma función. Eso se saca con el sí de Diego, no por
       mi cuenta.

   ✅ LO QUE SÍ SE SACÓ Y SE APRETÓ, sin tocar un control ni un link:
     1. **La prosa de marca** (`.cst-ft-p`) se va EN EL TELÉFONO. Son 44 px de
        párrafo publicitario en el lugar donde alguien busca un link. Es,
        textual, «no puede tener tanto contenido». En el monitor se queda: ahí
        la columna de marca es ancha y el párrafo no le quita lugar a nadie.
     2. **Los links legales pasan a DOS columnas** en el teléfono, con la misma
        sangría de 44 px y sin tocar el área de toque: la misma lista en la
        mitad de los renglones. Es el mismo recurso que el 08-10 ya usó en las
        columnas de arriba.
     3. **El aire**: relleno del pie, separación entre bloques y el margen de
        los títulos. Nada de esto se toca con el dedo.
   ⚠️ LA RAYA SEPARADORA SE ESCONDE EN EL TELÉFONO: en una fila separa, en dos
      columnas queda colgando al final de un renglón y se lee como un error.
      Es decorativa (`aria-hidden`), así que esconderla no le saca nada a
      nadie. */
/* 🧹 15-10 · pie7: las reglas que vivian aca estilaban EL PIE DE PC EN EL
   TELEFONO, y desde pie6 (13-10) ese pie abajo de 30rem es display:none — el
   telefono dibuja su propio bloque, .cst-pm. Quedaban como hoja muerta que
   viaja a cada comprador, y tres nombraban clases que pie7 saco (la frase de
   marca, la raya separadora, la fila de acciones). Se van las reglas; la
   historia de arriba se queda porque explica los numeros. */
@media (hover:hover) and (pointer:fine){
  .cst-legal-links a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
}
/* 🧹 15-10 · pie7: aca vivian la raya separadora y la grilla de dos columnas
   de los documentos abajo de 40rem. La raya se fue (pie7 no la lleva) y la
   grilla era para el telefono, que desde pie6 pliega los documentos en
   «Legales». Entre 30 y 40rem la tarjeta de pie7 se acomoda sola (ver
   .cst-legal, el corte de 34rem). */
/* cs-bloque:paginas-legales · CIERRA (ver el marcador de arriba) */

/* ═══ 📱 VP-90 · QUE EL PRODUCTO SE ASOME EN LA PRIMERA PANTALLA ═════════════
   Diego, 07-10: «el responsive que no sea sólo responsive; que sea acomodar las
   cosas en celular como se vería y como la gente usuaria y confiaría, no poner
   por poner».

   🔴 EL NÚMERO QUE LO MOTIVA, MEDIDO CON EL DEDO ACREDITADO Y CON EL ALTO REAL
      DE UN TELÉFONO (no los 844 px de maqueta con los que midió siempre este
      proyecto): a 390x664 —un iPhone con la barra de Chrome puesta— la primera
      card de producto arrancaba en y=753 y se veían CERO píxeles de producto.
      A 360x650 y a 320x568, también cero. El que entraba a la tienda desde el
      teléfono veía 502 px de cabecera, promesa y banda de confianza, y ni una
      foto, ni un precio, ni un botón de comprar.

   ⚠️ ESTO ES SÓLO TELÉFONO (30rem = 480 px). PC, notebook e iPad no cambian un
      píxel: lo que sigue son proporciones de monitor aplicadas a una pantalla
      de 390 px, no medidas que estuvieran mal pensadas.

   ⭐ LO QUE SE SACA, Y POR QUÉ — que es la mitad que importa:
      · La volanta de cada sección de la portada (LO MÁS PEDIDO) encima de su
        propio título (Los que más se venden). En monitor son dos renglones que
        se leen como volanta y titular; en 390 px es la MISMA frase dicha dos
        veces, apilada, y son 19 px de la primera pantalla. Es «muy contaminada
        de cosas» en su forma más barata de arreglar: se saca un elemento, no se
        achica una letra.
      · Nada más se saca: todo el resto es la misma pantalla, acomodada.      */
@media (max-width:56.25rem){
  /* 🔴 87 PX MUERTOS A LA DERECHA, MEDIDOS a 390: en la fila de arriba el logo
     y el grupo de controles iban empaquetados a la izquierda —el grupo
     terminaba en x=303 y el envoltorio en 374— porque nada los separaba. Regla
     de Diego: «está muy en el medio, no está a la derecha». Un control se apoya
     en un borde. No gana un solo píxel de alto y es el defecto más visible de
     los tres. */
  .cst-hd-r{margin-left:auto}
}
@media (max-width:30rem){
  /* La cabecera es PEGAJOSA: cada píxel que se lleva lo cobra en todas las
     pantallas de la tienda, no sólo en la portada. El aire que pidió Diego el
     11-09 («el header debería ser más alto») ya se lo da el envolver en dos
     filas, que acá mide 102 px por sí solo; el relleno de 11 px era el de una
     fila sola. */
  .cst-hd-in{padding:.45rem 0;row-gap:.45rem}
  .cst-bus{height:2.875rem}

  /* ── EL HERO ──────────────────────────────────────────────────────────────
     Los 36/40 px de respiro son proporción de monitor. En 390 px el título ya
     se despega de la cabecera con 20, y lo que sobraba se leía como un hueco,
     no como aire. El halo celeste —la firma de la casa— no se toca: sigue
     entero, que es lo que le da peso a la pantalla sin agregar un elemento. */
  /* ══ 13-10 · SKY-HERO1 · LA FOTO MANDA, SOBRE BLANCO (voto hero2: «entre la v6 y la v8»)
     Diego voto CON CAMBIOS 8/5/5/4 el mockup hero2_inicio_celular.html y dijo
     cuales: de la v8 la foto que FLOTA en su halo sobre blanco puro; de la v6 la
     pastilla blanca con el sello y el precio apoyada sobre la foto, y abajo el
     titular corto en UN renglon con «Ver catalogo» de contorno a la derecha. Y en
     hero1, con dos signos: «recorda que el fondo es blanco!!».
     Lo que se va del telefono y por que:
        · el LAVADO celeste y el circulo del halo de fondo: eran la banda de color
          que Diego dijo que no. El color queda en la SOMBRA de la foto, en el
          precio y en el boton -la regla de la casa: sombra de color, tinta en el
          dato-.
        · la FILA del 08-10 (foto de 108 px + card): resolvia que no asomara
          ningun producto, y Diego eligio otra cosa: que la foto del producto SEA
          la primera pantalla (~50 %, medido en el mockup).
        · la BAJADA: la franja de despacho y retiro, justo abajo, ya lo dice.
        · el nombre y las cuotas de la card: la pastilla de la v6 dice dos cosas,
          el sello y el precio. El nombre sigue en el alt de la foto y en la ficha.
     OJO: la pastilla NO es un link aparte y no lo necesita: lleva
        pointer-events:none, asi que el toque le pasa de largo y cae en la foto,
        que es el link a la ficha. Un solo destino, un solo tab.
     OJO: ARRIBA DE 30rem NO CAMBIA NADA: todo vive en este bloque. */
  .cst-hero{padding:.5rem 0 1.25rem;background:var(--pag)}
  .cst-hero::before{display:none}
  .cst-hero-in{gap:1.125rem;justify-items:stretch;text-align:left}
  .cst-hero-art{order:-1;width:100%;max-width:100%;padding:0;aspect-ratio:auto;justify-self:stretch;
    display:block;animation:none}
  .cst-hero-art::before{display:none}
  /* La bandeja: blanca, redonda y con el halo de la v8 debajo. Mide por el ALTO
     de la pantalla y no por el ancho: lo que se pide es la mitad de la primera
     pantalla, y svh es la pantalla CON las barras de Safari puestas. 25rem de
     techo = los 400 px del mockup a 402x720. */
  .cst-hero .cst-hero-art .cst-hero-foto{width:100%;height:min(25rem,56vh);height:min(25rem,56svh);
    max-height:none;aspect-ratio:auto;display:grid;place-items:center;
    background:var(--tile);border-radius:var(--r-x);overflow:hidden;
    box-shadow:0 1.875rem 3.75rem -1.25rem color-mix(in srgb,var(--acento) 95%,transparent),
      0 0 0 1px color-mix(in srgb,var(--acento) 30%,transparent)}
  .cst-hero .cst-hero-art .cst-hero-foto img{width:100%;height:100%;max-height:none;
    object-fit:contain;padding:7%;border-radius:0;filter:none}
  /* La pastilla de la v6: blanca, abajo a la izquierda, con la sombra chica del
     mismo celeste. Dos renglones: sello y precio. */
  .cst-hero-chip{position:absolute;z-index:2;left:.875rem;bottom:.875rem;right:auto;top:auto;transform:none;
    width:max-content;max-width:calc(100% - 1.75rem);padding:.5rem .875rem;
    border:0;border-radius:var(--r-m);background:var(--tile);pointer-events:none;
    -webkit-backdrop-filter:none;backdrop-filter:none;
    box-shadow:0 .625rem 1.5rem -.75rem color-mix(in srgb,var(--acento) 80%,transparent),
      0 .125rem .375rem -.1875rem color-mix(in srgb,var(--acento) 50%,transparent)}
  .cst-hero-chip-n,.cst-hero-chip-c{display:none}
  /* El sello sigue siendo la pastilla RELLENA de la casa (blanco sobre el
     celeste oscuro, 5,51:1): el color es tinta, no neblina. Solo sube a 12 px,
     el chico de la escala del mockup. */
  .cst-hero-sello{font-size:.75rem;letter-spacing:.08em;margin-bottom:.25rem}
  .cst-hero-chip-p{margin-top:.125rem;font-size:1.25rem;font-weight:800;letter-spacing:-.03em;
    line-height:1.2;color:var(--marca)}
  /* Abajo de la foto, UN renglon: el titular que se escribe en Diseno a la
     izquierda y el catalogo de contorno anclado al borde derecho. */
  /* justify-self y width: sin foto (cst-hero-solo) la grilla centra a sus hijos
     y el renglon se medía por su contenido, que con el titular en nowrap se pasa
     del ancho de la pantalla. Medido a 390 por MC-M, la bateria del color de marca. */
  .cst-hero-txt{display:flex;align-items:center;justify-content:space-between;gap:.625rem;
    min-width:0;width:100%;justify-self:stretch}
  .cst-hero-b{display:none}

  /* ══ 🔴 LA PRIMERA PANTALLA NO SE ANIMA: YA ESTA ═══════════════════════════
     `cst-aparece` entra cada bloque con opacity 0 → translateY(26px). Para lo que
     esta abajo del pliegue es una entrada; para los bloques de la PRIMERA
     pantalla es un VELO PERMANENTE, porque sin deslizar la animacion no termina
     nunca. Medido el 08-10: al cargar, la seccion de productos se pinta a
     opacidad 0,33 y corrida 17 px. O sea que los pixeles que uno gana acomodando
     el hero se verian a un tercio. Son los TRES primeros bloques, que es
     exactamente lo que entra en 664 px; del cuarto para abajo la entrada sigue,
     que es donde tiene sentido.
     ⚠️ Va despues de la regla que la declara (PN-82b, mas arriba en esta hoja):
        misma especificidad, gana la que viene ultima. */
  .cst-home > :nth-child(-n+3){animation:none}

  /* La bajada de seccion, en la portada y en el telefono, NO. En monitor explica
     de que va la seccion; en 390 px son 44 px -dos renglones- entre el titulo y
     el primer producto, diciendo con otras palabras lo que el titulo ya dijo.
     Mismo criterio que la volanta dos lineas mas abajo: se saca un elemento, no
     se achica una letra. Y al irse, la pastilla de «Ver todos» deja de necesitar
     un renglon propio y sube al lado del titulo: el encabezado pasa de 119 a 37. */
  .cst-home .cst-sub{display:none}
  /* 🔴 EL PISO DEL TÍTULO ERA FIJO Y POR ESO EL TELÉFONO CHICO SUFRÍA MÁS.
     clamp(2rem,5.4vw,3.9rem): a 390 px, 5,4vw da 21 px, así que mandaba el piso
     de 2rem y el título medía 32 px EN TODOS los teléfonos — el de 320 px lo
     partía en tres renglones. A 1,75rem sigue siendo, lejos, lo más grande de
     la pantalla (el h2 de sección mide 22 px y la bajada 15), que es lo que
     pide la regla de que el motivo de la pantalla la domine. */
  /* 13-10 · UN RENGLON A 20 PX. Titular de una linea (voto hero2): si el que
     escribe Diego en Diseno no entra, se corta con puntos suspensivos antes que
     partir la fila y empujar el resto de la pantalla. */
  .cst-hero-t{flex:1 1 auto;min-width:0;font-size:1.25rem;line-height:1.2;letter-spacing:-.02em;
    white-space:nowrap;text-wrap:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* El boton deja de ser el relleno grande y pasa a CONTORNO: es el segundo
     camino de la pantalla, el primero es la foto. 44 px de alto igual -el dedo-. */
  .cst-hero-ctas{flex:none;flex-direction:row;width:auto;align-self:auto;margin-top:0}
  .cst-hero-ctas .cst-cta{width:auto;min-height:2.75rem;margin:0;padding:0 .875rem;font-size:.75rem;
    background:transparent;color:var(--marca);
    box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--marca) 45%,transparent)}
  .cst-hero-ctas .cst-cta .cst-ico{display:none}
  .cst-hero-cta-l{display:none}
  .cst-hero-cta-c{display:inline}

  /* ── LA BANDA DE CONFIANZA ────────────────────────────────────────────────
     🔴 CORTABA LAS PALABRAS Y NO AVISABA QUE SE DESLIZA. Las columnas eran de
     13,5rem (216 px) y el ítem entraba entero en la pantalla, así que al que
     compra le llegaba «Te atendem» y «Consultanos p» cortados contra el borde,
     sin un solo indicio de que hubiera más al costado. Técnicamente el
     carrusel estaba bien; para el que compra era un error — y un error en la
     banda que existe para dar CONFIANZA es el peor lugar donde tenerlo.
     ⭐ Con la columna al 86 % pasan las dos cosas de una: el texto entra entero
        (el renglón chico deja de partirse en dos y la banda baja 23 px) y el
        borde del ítem siguiente asoma a ~50 px, que es la señal de que se
        desliza. El indicio es el contenido mismo, no una flecha más. */
  /* ⭐ Y EL MARGEN QUE NO ELIGIO NADIE. `.cst-conf-l` pone `padding:0` pero NO
     `margin-block`, asi que se queda el del navegador para un `<ul>`: 1em arriba
     y 1em abajo, o sea 30 px. En monitor no se notan; en 664 px son 30 de los 90
     que mide la banda, puestos por omision y no por diseno. La banda baja a 71
     SIN tocar una sola cosa suya -ni el padding, ni los iconos, ni las dos
     hairlines, ni la columna al 86 %-, que es lo que Diego voto el 07-10. */
  .cst-conf-l{grid-auto-columns:86%;margin-block:.35rem}
  .cst-conf-i{padding:.75rem .9rem;gap:.6rem}
  .cst-conf-ic{width:2.1rem;height:2.1rem}

  /* ── EL ENCABEZADO DE LA SECCIÓN ──────────────────────────────────────────
     Era lo más caro de todo: 158 px de volanta, título, bajada y la pastilla
     de «Ver todo» en un renglón propio, antes del primer producto. */
  .cst-sec{padding-top:.6rem}
  .cst-sec-alt{margin-top:.6rem;padding-bottom:1.5rem}
  .cst-home .cst-kicker{display:none}
  .cst-sec-h{gap:.5rem;margin-bottom:.5rem}
  .cst-sub{margin-top:.3rem;line-height:1.45}
  .cst-vertodo{padding:.45rem .85rem;font-size:.78rem}
}
/* 🔴 EL TELÉFONO MÁS ANGOSTO NO ES UN 390 ENCOGIDO: TODO SE PARTE EN MÁS
   RENGLONES. Medido a 320x568 con el recorte de arriba ya puesto: la banda de
   confianza medía 104 px y no 90 porque el renglón chico se parte en dos, y el
   título se va a tres renglones. Con la columna al 92 % el texto de la banda
   vuelve a entrar entero y el borde del siguiente sigue asomando. */
@media (max-width:22.5rem){
  .cst-conf-l{grid-auto-columns:92%}
  .cst-conf-i{padding:.65rem .8rem}
  /* El resto es la MISMA proporción, un escalón más abajo. No se saca ningún
     elemento acá: lo que se achica es el aire, que en 320 px es lo único que
     sobra. Medido: con esto la primera card arranca arriba del pliegue en un
     iPhone SE, que es la pantalla más chica que todavía compra. */
  .cst-hd-in{padding:.35rem 0}
  .cst-hero{padding:.375rem 0 1rem}
  .cst-hero-in{gap:1rem}
  /* SKY-HERO1 · a 360 el renglon del titular mide 42 px menos que a 402. Medido
     con el titular del mockup («Audio e imagen para crear», 25 letras): a 20 px
     pide 240 y quedan 213, o sea que se cortaba con puntos. Un escalon de letra
     (18 px) y el boton un poco mas angosto lo dejan ENTERO en una linea. */
  .cst-hero-t{font-size:1.125rem;letter-spacing:-.03em}
  .cst-hero-ctas .cst-cta{padding:0 .75rem}
  /* 13-10 · Aca vivia la fila del destacado a 96 px. Con la foto protagonista
     (SKY-HERO1) el escalon de 360 no la achica: la bandeja ya se mide por el alto
     de la pantalla, que en un telefono chico es lo que se achica solo. */
  /* De 360 para abajo la pastilla de «Ver todos» ya no entra al lado del titulo y
     se cae a un renglon propio: 30 px para repetir el boton del hero. A 390 SI
     entra y se queda, porque es el unico acceso al orden de esta seccion. */
  .cst-home .cst-sec-h-d{display:none}
  .cst-sec{padding-top:.5rem}
  .cst-sec-alt{margin-top:.4rem}
  .cst-sec-h{gap:.4rem;margin-bottom:.55rem}
  .cst-sub{font-size:.875rem;line-height:1.4}
  .cst-vertodo{padding:.4rem .75rem;font-size:.75rem}
}

/* ═══════════════════════════════════════════════════════════════════════════
   👆 AC-14 · 44x44 DE AREA DE TOQUE EN TODO LO QUE SE TOCA     (08-10-2026)

   🔴 POR QUE ESTE BLOQUE EXISTE Y POR QUE ESTA AL FINAL DE LA HOJA.
   La fila AC-14 del plan decia «targets tactiles >= 44 px» y estaba cerrada al
   100 %. Medido el 08-10 con el dedo ACREDITADO -emulacion tactil prendida y
   despues PREGUNTADA con matchMedia; fijar el ancho en 390 deja a hover y a
   pointer contestando mouse- a 390x664, 360x650 y 320x568, que son los altos
   de verdad de un telefono (844 le regala 180 px a la tienda), y contando el
   area que de verdad recibe el toque -quien contesta elementFromPoint en cada
   punto alrededor del centro, que es lo unico que ve un pseudo-elemento
   invisible-, en las doce pantallas publicas habia NOVENTA Y SIETE controles
   por debajo de 44 px, siete de ellos por debajo de los 24 de WCAG 2.2 AA.
   Diez de los que faltaban estan en el pie y en la cabecera, o sea en TODAS
   las pantallas a la vez.
   ⚠️ El medidor que respaldaba AC-14 tenia el piso en 24 y por eso daba verde:
   un piso puesto por debajo de lo que ya hay felicita al defecto.

   ⭐ NO SE AGRANDA EL DIBUJO, SE AGRANDA EL AREA. La regla de la casa para esto
   ya estaba escrita y usada -el boton de la lupa, el de Agregar, los puntos de
   color, el de calcular el envio-: un ::after transparente que extiende el
   blanco alrededor. El enlace se ve igual y se toca bien.

   🔴 Y VA AL FINAL DE LA HOJA A PROPOSITO. Varias de estas clases se vuelven a
   declarar adentro de las media queries de arriba (.cst-vertodo tiene dos). Un
   bloque puesto en el medio lo pisaria la que viene despues con la misma
   especificidad, que es la colision de cascada mas comun de este proyecto:
   no se ve en el codigo y cancela la regla sin avisar.

   ⚠️ EL ESTIRON ES SOLO VERTICAL (left:0 / right:0). Lo horizontal ya llega en
   todos estos casos -el mas angosto mide 67 px- y estirar a lo ancho lo unico
   que haria es pisar al vecino de al lado. Un dedo que cae en el control
   equivocado es PEOR que un objetivo chico: el chico se falla y se reintenta;
   el pisado te lleva a otro lado sin que te enteres.

   🔴🔴 Y POR ESO NO TODOS LLEVAN ::after: DONDE NO HAY AIRE, EL PSEUDO SE PISA
   CON EL VECINO. Medido el hueco libre de cada uno contra el control de arriba
   y el de abajo:
     · el indice de las legales   12 renglones de 30 px con 2,4 px de aire
     · los links legales del pie   5 nombres de 31 px con 2,4 px de aire
     · las categorias del pie      renglones de 31 px pegados, 0 de aire
   En esos tres, un ::after de 44 se superpondria 12 px con el de arriba y 12
   con el de abajo. Asi que ahi se agranda el AIRE -la sangria de arriba y
   abajo del enlace-, que no cambia ni la letra ni el color ni el peso: lo
   unico que pasa es que la lista respira. Es lo mismo que ya hace su vecino
   `.cst-ft-a`, con el mismo numero.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1 · Los que tienen aire de sobra: ::after y el dibujo no se mueve ──── */
.cst-marca,.cst-vertodo,.cst-ct-ir,.cst-lg-a,.cst-n-a,.cst-car-n-a,
.cst-fil-chip,.cst-fil-pre,.cst-fil-ord,.cst-fil-ok,.cst-fil-limpiar,
.cst-legal-cta .cst-legal-a{position:relative}
.cst-marca::after,.cst-vertodo::after,.cst-ct-ir::after,.cst-lg-a::after,
.cst-n-a::after,.cst-car-n-a::after,
.cst-fil-chip::after,.cst-fil-pre::after,.cst-fil-ord::after,
.cst-fil-ok::after,.cst-fil-limpiar::after,
.cst-legal-cta .cst-legal-a::after{content:'';position:absolute;
  left:0;right:0;top:50%;height:2.75rem;transform:translateY(-50%)}

/* ── 2 · Los que no tienen aire: se agranda el aire, no la letra ────────── */
/* 0,78rem arriba y abajo sobre 19,2 px de renglon dan los 44 justos. El
   numerito del indice se cuelga de la misma sangria, asi que se mueve con
   ella o queda flotando arriba del texto. */
.cst-lg-ix a{padding-top:.78rem;padding-bottom:.78rem}
.cst-lg-ix a::before{top:.78rem}
.cst-ft-a,.cst-legal-links a{padding-top:.78rem;padding-bottom:.78rem}

/* ── 3 · Los campos: un ::after no les sirve ────────────────────────────── */
/* 🔴 UN input NI UN select ACEPTAN ::after: son elementos reemplazados y el
   navegador no les dibuja pseudo-elementos. Son los unicos de toda la tanda
   donde hay que mover el dibujo, y se mueve lo MINIMO:
     · el codigo postal de la ficha y del carrito   40 → 44 (2,5 → 2,75rem)
     · los campos del checkout                      43 → 44 (un pixel)
     · el campo y el boton del cupon                39 → 44
   Los dos campos de precio de la grilla y el orden NO entran aca: viven
   adentro de una etiqueta que los envuelve, asi que el ::after de la etiqueta
   -que si acepta pseudo- les presta su area y la pildora sigue midiendo 40. */
.cst-env-cp{min-height:2.75rem}

/* ── 4 · El salto al contenido ──────────────────────────────────────────── */
.cst-salto{min-height:2.75rem;display:inline-flex;align-items:center}

/* ══ 📱 PIE6 · OPCION 3 «TODO EN LA LISTA» · SOLO CELULAR (13-10) ══════════
   Votado por Diego el 13-10 (diseno 9, claridad 9, colores 8, tipografia 8):
   «opcion 3 esta ok». Mockup: documentacion/web/mockups/pie6_footer.html.
   La lista de pie5 con un renglon mas: Ayuda y Legales plegados como
   renglones (details nativo: anda sin JavaScript) y el Boton de
   arrepentimiento como un renglon del MISMO tamanio, con su icono, SIEMPRE a
   la vista sin abrir nada (Res. 424/2020: visible y accesible desde la
   pagina de inicio). WhatsApp con el logo real en --wa. Fondo blanco.
   Letra: SOLO 12, 13 y 15 px, pesos 500 y 700, nada debajo de 12,
   interlineado 1,5. Alto cerrado medido en el mockup: 258 px a 402.

   🔴 SOLO TELEFONO. El pie de PC queda como esta (Diego: «cerremos primero
   mobile y despues PC»). Por eso este bloque es APARTE y no una reforma del
   de escritorio: abajo del corte de 30rem se esconde el de PC y se muestra
   este; arriba del corte este no existe (display:none, ni el lector de
   pantalla lo lee) y el de PC sale al pixel igual que antes. El corte es el
   mismo 30rem que ya usa el pie para el telefono.

   👆 44 px de toque: los renglones miden 44 de verdad; WhatsApp, el escudo y
   Defensa agrandan el area con un ::after transparente sin mover el dibujo
   (el mismo truco de la tanda AC-14), porque el alto cerrado tiene tope. */
.cst-pm{display:none}
@media (max-width:30rem){
  .cst-ft{padding-top:0;border-top:0;background:var(--pag);
    box-shadow:0 -1px 0 var(--line2),0 -10px 24px -14px rgba(var(--halo),.75)}
  .cst-ft-g,.cst-legal,.cst-legal-cp{display:none}
  .cst-pm{display:grid;padding:1.125rem 0 .875rem;color:var(--ink2);
    font-size:.8125rem;font-weight:500;line-height:1.5}
}
.cst-pm>*{min-width:0}
.cst-pm b{font-weight:700}
.cst-pm-mk{display:flex;align-items:center;justify-content:space-between;gap:.75rem}
.cst-pm-lg{display:block;flex:none;height:1.5rem;color:var(--negro);--logo-bg:var(--pag)}
.cst-pm-lg svg{height:100%;width:auto;display:block}
.cst-pm-wa{position:relative;display:inline-flex;align-items:center;gap:.5rem;
  min-height:2.125rem;padding:0 .875rem 0 .6875rem;border-radius:99px;
  background:var(--sup);color:var(--ink);font-weight:700;white-space:nowrap;
  text-decoration:none;box-shadow:0 0 0 1px var(--line2),0 4px 14px color-mix(in srgb,var(--wa) 24%,transparent)}
/* El logo suelto sobre blanco va en --wa-ico (el verde de WhatsApp para el
   simbolo sin disco, 3,1:1, el piso de un icono): el #25D366 de --wa a secas
   da 1,98:1 sobre blanco y es el del disco del globo (D5 del plan 130). */
.cst-pm-wa .cst-pm-wa-i{width:1.125rem;height:1.125rem;flex:none;color:var(--wa-ico)}
.cst-pm-pl{margin-top:.75rem;box-shadow:inset 0 1px var(--line2)}
.cst-pm-fila{display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  min-height:2.75rem;font-size:.9375rem;color:var(--ink);text-decoration:none;
  box-shadow:inset 0 -1px var(--line2)}
.cst-pm-pl summary{list-style:none;cursor:pointer}
.cst-pm-pl summary::-webkit-details-marker{display:none}
.cst-pm-chev{width:1rem;height:1rem;flex:none;color:var(--muted);transition:transform .25s var(--ease)}
.cst-pm-pl details[open] .cst-pm-chev{transform:rotate(180deg)}
.cst-pm-ln{display:flex;flex-wrap:wrap;column-gap:1rem;padding:.25rem 0 .625rem;
  box-shadow:inset 0 -1px var(--line2)}
.cst-pm-ln a{display:inline-flex;align-items:center;min-height:2.75rem;white-space:nowrap;
  color:var(--ink2);text-decoration:none}
.cst-pm-ve-t{display:inline-flex;align-items:center;gap:.625rem}
.cst-pm-ve-i{width:1rem;height:1rem;flex:none;color:var(--marca)}
.cst-pm-bt{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-top:.75rem}
.cst-pm-id{display:flex;align-items:center;gap:.625rem;min-width:0}
.cst-pm-esc{position:relative;display:block;flex:none;width:1.25rem}
.cst-pm-esc img{display:block;width:100%;height:auto;border-radius:3px;
  background:var(--sup);box-shadow:0 0 0 1px var(--line)}
.cst-pm-rz{margin:0;min-width:0;font-size:.75rem;color:var(--muted);font-variant-numeric:tabular-nums}
.cst-pm-rz b{display:block;color:var(--ink)}
.cst-pm-def{position:relative;display:inline-flex;align-items:flex-start;gap:.375rem;
  max-width:9.375rem;font-size:.75rem;color:var(--muted);text-decoration:none}
.cst-pm-def-i{width:.8125rem;height:.8125rem;flex:none;margin-top:.1875rem}
.cst-pm-wa::after,.cst-pm-esc::after,.cst-pm-def::after{content:'';position:absolute;
  left:50%;top:50%;width:max(100%,2.75rem);height:2.75rem;transform:translate(-50%,-50%)}
.cst-pm a:focus-visible,.cst-pm summary:focus-visible{outline:2px solid var(--acento-txt);
  outline-offset:2px;border-radius:.375rem}
.cst-pm summary:focus:not(:focus-visible){outline:none}
/* pie6: el globo se aparta cuando se ve el final del pie del telefono (ver el guion del globo) */
.cst-wa-fab[data-pie="1"]{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(10px) scale(.9)}
/* pie7: y en la PC, cuando se ve la tarjeta legal (le tapaba el Boton de arrepentimiento) */
.cst-wa-fab[data-legal="1"]{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(10px) scale(.9)}
@media (hover:hover) and (pointer:fine){
  .cst-pm-ln a:hover,.cst-pm-def:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
}

/* ═══ 🗳️ 13-10 · LA FICHA EN EL TELEFONO: «BARRA FIJA» (voto ficha1, VA 9/9/9/9) ═══
   Diego: «me gusta Barra fija y mostrando la foto en grande mejor! con el fondo
   blanco, pero la foto asi grande se ve clave».
   🔴 SOLO ABAJO DE 35rem, el corte de telefono de la ficha (el mismo de la tira
      de miniaturas). Las tres piezas nuevas nacen display none, asi que de ahi
      para arriba la ficha se dibuja exactamente como antes: lo mide EQ de
      prueba_ficha_barra (la huella de 1.440 y 2.560 contra la de antes).
   🔴 VA AL FINAL DE LA HOJA A PROPOSITO: pisa las reglas de la foto (VP-65/67),
      del boton de compartir y del precio con la misma especificidad, y gana la
      que viene despues. */
.cst-fbar,.cst-fcu,.cst-f-pct{display:none}
@media (max-width:35rem){
  /* LA FOTO, GRANDE Y DE BORDE A BORDE, SOBRE BLANCO PURO. Se come el gutter de
     1rem de cada lado (margen negativo, el mismo ancho que el gutter: sin
     scroll lateral) y deja el halo y las esquinas: contra el borde de la
     pantalla una sombra no separa nada. El tope fijo de VP-67 se va (lo que
     Diego voto es justamente la foto grande) pero sigue SIN dvh ni vh: el alto
     sale del ancho, que no cambia cuando Safari esconde su barra. */
  .cst-f{position:relative}
  .cst-f-main{width:calc(100% + 2rem);max-width:none;max-height:none;margin-inline:-1rem;
    aspect-ratio:1/.92;border-radius:0;box-shadow:none;background:var(--tile)}
  /* El % ya va al lado del tachado: en la foto estaria dos veces. */
  .cst-f-off{display:none}
  /* COMPARTIR, SOBRE LA FOTO ARRIBA A LA DERECHA (lo que propuso est5). Un
     circulo de 44 con la palabra escondida a la vista (sigue siendo su nombre
     para el lector y el guion la sigue encontrando). */
  .cst-f .cst-sh{position:absolute;z-index:3;top:calc(clamp(.75rem,2vw,1.5rem) + .75rem);right:0;
    margin:0;padding:0;width:2.75rem;height:2.75rem;min-width:2.75rem;min-height:2.75rem;
    justify-content:center;border:0;border-radius:50%;background:var(--sup);
    box-shadow:0 1px 3px rgba(60,69,82,.12),0 8px 20px color-mix(in srgb,var(--acento) 55%,transparent)}
  .cst-f .cst-sh [data-cst-sh-t]{position:absolute;width:1px;height:1px;margin:-1px;
    padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .cst-f .cst-sh-i{font-size:1.15rem;color:var(--ink2)}
  /* EL ORDEN: nombre, estrellas, precio y cuotas, y DESPUES las opiniones de
     texto que rotan. Con order y no moviendo el HTML: la PC no se entera. */
  .cst-f-r > .cst-f-chips,.cst-f-r > .cst-f-h1,.cst-f-r > .cst-f-meta,
  .cst-f-r > .cst-f-pz,.cst-f-r > .cst-f-cuo{order:-1}
  /* LAS ESTRELLAS EN EL COLOR DE LA MARCA, con el numero y la cantidad (est9 y
     lo que se aprendio de est5/est6): si en Diseno cambia la marca, cambian
     con el boton. La vacia sigue de contorno gris (1.4.1). */
  .cst-fop .cst-est-on{fill:var(--marca)}
  .cst-fop b{color:var(--marca)}
  /* EL PRECIO: el tachado chico ARRIBA con el % en la marca, y el precio grande
     solo en su renglon. «Ahorras» se apaga: el % ya lo dice. */
  .cst-f-pz{column-gap:.5rem;row-gap:.25rem}
  .cst-f-was{order:-2;font-size:.8125rem}
  .cst-f-pct{display:inline;order:-1;font-size:.8125rem;font-weight:800;color:var(--marca)}
  .cst-f-now{flex:0 0 100%}
  .cst-f-save{display:none}
  /* La caja de compra se queda con el stock y la entrega; los dos forms siguen
     ahi (los mandan los botones de la barra) pero no se dibujan. */
  .cst-f-conbar .cst-f-buy,.cst-f-conbar .cst-f-nxm{display:none}
  /* LA BARRA: el precio y «Agregar» lleno en la marca, clavados abajo. z-index
     41: arriba del globo (39) y de los controles que se suben a 40 para que el
     globo no les robe el toque (abajo), y abajo de la cabecera (70), del cajon
     y de las hojas. El halo celeste hacia arriba la separa del contenido sin
     una linea. */
  .cst-fbar{position:fixed;left:0;right:0;bottom:0;z-index:41;
    display:flex;align-items:center;gap:.75rem;margin:0;
    padding:.625rem calc(1rem + env(safe-area-inset-right))
            calc(.625rem + env(safe-area-inset-bottom)) calc(1rem + env(safe-area-inset-left));
    border-radius:1.375rem 1.375rem 0 0;background:var(--sup);
    box-shadow:0 -1px 2px rgba(60,69,82,.04),
               0 -14px 32px -10px color-mix(in srgb,var(--acento) 75%,transparent)}
  .cst-fbar-p{display:flex;flex-direction:column;flex:none;margin:0;min-width:0}
  .cst-fbar-now{font-size:1.25rem;font-weight:800;letter-spacing:-.02em;line-height:1.1;color:var(--ink)}
  .cst-fbar-cu{font-size:.6875rem;font-weight:700;line-height:1.3;color:var(--ok);white-space:nowrap}
  .cst-fbar-b{flex:1 1 0;min-width:0;min-height:3rem;padding:.75rem 1rem;
    background:var(--marca);color:var(--marca-txt);
    box-shadow:0 10px 26px color-mix(in srgb,var(--marca) 32%,transparent)}
  .cst-fbar-b2{padding-inline:.75rem}
  /* La barra tapa los ultimos ~70 px: el pie se corre para arriba lo mismo,
     y el globo de WhatsApp sube ARRIBA de la barra (no la tapa ni se esconde
     detras). Por id, porque el globo declara su lugar con id en el telefono. */
  /* 8,75rem = la barra (~68 px) + el globo (50) + aire: al fondo de la pagina
     el ultimo renglon del pie (Defensa, el escudo) queda ARRIBA de los dos.
     Con 5,5rem el globo se paraba encima de «Defensa de las y los
     consumidores» (D44-50b de prueba_dedo_44, medido). */
  body:has(.cst-fbar) .cst-ft{padding-bottom:calc(8.75rem + env(safe-area-inset-bottom))}
  /* EL TOQUE NO DEPENDE DEL OBSERVADOR (la regla de la pastilla de cantidad,
     arriba): la flecha de «Calcular el envio» y los dos renglones de la
     eleccion suben a 40, encima del globo (39) y debajo de la barra (41).
     Medido con elementFromPoint a 390, 360 y 320 (PU-4b de prueba_movil_pulgar):
     el globo de la derecha se quedaba con el toque de la flecha. */
  .cst-f .cst-env-go{z-index:40}
  .cst-fcu-o{position:relative;z-index:40}
  /* Y del lado DERECHO, como en el mockup: a la izquierda, arriba de la barra,
     se paraba encima del precio grande al abrir la ficha (medido a 402). El
     globo se habia mudado a la izquierda porque el circulo de Agregar de la
     card vivia abajo a la derecha; en la ficha con barra ese boton no existe,
     y el texto de la columna arranca a la izquierda. */
  body:has(.cst-fbar) #cst-wa-fab{bottom:calc(5.25rem + env(safe-area-inset-bottom));
    left:auto;right:calc(.85rem + env(safe-area-inset-right))}
}
/* LA ELECCION 1 / 2x1 necesita :has() para cambiar el boton sin JavaScript.
   Sin :has() la eleccion no se dibuja y la barra muestra los dos botones. */
@supports selector(:has(*)){
  @media (max-width:35rem){
    .cst-f-r:has(> .cst-fcu) > .cst-pro-f{display:none}
    .cst-fcu{display:grid;gap:.5rem;min-width:0;margin:.9rem 0 0;padding:0;border:0}
    .cst-fcu-o{display:flex;align-items:center;gap:.75rem;min-height:3.5rem;padding:.65rem .9rem;
      border-radius:var(--r-m);background:var(--sup);cursor:pointer;
      box-shadow:inset 0 0 0 1.5px var(--line);transition:box-shadow .2s var(--ease)}
    .cst-fcu-o:has(:checked){box-shadow:inset 0 0 0 2px var(--marca),
      0 8px 22px color-mix(in srgb,var(--marca) 22%,transparent)}
    .cst-fcu-r{flex:none;width:1.25rem;height:1.25rem;margin:0;accent-color:var(--marca)}
    .cst-fcu-r:focus-visible{outline:2px solid var(--acento-txt);outline-offset:2px}
    .cst-fcu-t{display:flex;flex-direction:column;gap:.1rem;min-width:0;font-size:.75rem;color:var(--ink2)}
    .cst-fcu-t b{font-size:.875rem;font-weight:800;color:var(--ink)}
    .cst-fcu-p{margin-left:auto;font-size:.9375rem;font-weight:800;color:var(--ink)}
    .cst-fcu-c{margin-left:auto}
    .cst-fbar-b2{display:none}
    .cst-f:has(.cst-fcu-n:checked) .cst-fbar-b1{display:none}
    .cst-f:has(.cst-fcu-n:checked) .cst-fbar-b2{display:inline-flex}
  }
}