/* ---- estilo.css ---- */
/* MIAMI — el modelo boutique (indumentaria, deco, regalería).
   Base del modelo: lo que comparten todas sus pantallas. */

/* ===========================================================
   LA PALETA Y LAS TIPOGRAFÍAS DEL MODELO
   ===========================================================
   Vive acá y en ningún otro lado. Estuvo copiada en las seis
   hojas de pantalla y ya se había separado en cuatro versiones
   —ninguna con valores distintos todavía, pero unas declaraban
   variables que otras no—, que es como empieza siempre: el día
   que alguien toque un color, lo toca en una y el resto de las
   pantallas queda con el viejo.

   Y es lo que hace posible el personalizador: una paleta que se
   cambia desde un solo lugar es una paleta que se puede cambiar.
   =========================================================== */
:root {
    /* CIRUELA Y ROSA. El acento era jade —un verde azulado— sobre una base que
       ya era rosada: el nombre de la variable quedó (`--jade`) porque lo usan
       cuarenta reglas de este modelo y renombrarlo sería tocar cuarenta lugares
       para no cambiar nada. Lo que cambia es el color.

       `--alerta` y `--alerta-suave` NO se tocan: son el aviso de "última
       unidad" y tienen que seguir leyéndose como un aviso en las dieciocho
       paletas. */
    --tinta:         #2a1f2d;
    --ciruela:       #6d3a55;
    --jade:          #c2477a;
    --rosa:          #e9d3dc;
    --rosa-suave:    #f7e9ef;
    --nacar:         #fdf8fa;
    --blanco:        #ffffff;
    --gris:          #8b7d85;
    --display:       "Jost", system-ui, sans-serif;
    --texto:         "Lora", Georgia, serif;
    --alerta:        #9a5b2d;
    --jade-suave:    #fbe6ee;
    --alerta-suave:  #f7eee4;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: var(--texto);
    background: var(--nacar);
    color: var(--tinta);
    font-size: 15px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

:focus-visible {
    outline: 2px solid var(--jade);
    outline-offset: 3px;
}

.rotulo {
    font-family: var(--display);
    font-weight: 400;
    font-size: 11px;
    letter-spacing: 0.26em;
    text-transform: uppercase;
}

/* ---------- Pie ---------- */

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
}

/* ===========================================================
   LO QUE ESTE MODELO LE OFRECE AL PERSONALIZADOR
   ===========================================================
   Ver la nota larga en `nueva-york/estilo.css`: las tres
   líneas de `:root` son todo lo que el JavaScript sabe de este
   modelo, y los colores no se repiten en ningún otro lado.
   =========================================================== */

:root {
    --p-modelo: "miami";
    --p-paletas: "original|Ciruela y rosa · oscura, noche|Negro y oro · oscura, tinta|Tinta · oscura, grafito|Grafito · oscura, salvia|Salvia · neutra, oliva|Oliva · neutra, terracota|Terracota · viva, coral|Coral · viva, turquesa|Turquesa · viva, lima|Lima · viva, arena|Arena · clara, nieve|Nieve · clara, crema|Crema · clara, lavanda|Lavanda · pastel, menta|Menta · pastel, glicina|Glicina · pastel, rosa|Rosa · viva, fucsia|Fucsia · viva, nude|Nude · pastel";
    --p-letras: "original|Jost + Lora, playfair|Playfair + Inter, cormorant|Cormorant + Montserrat, merriweather|Merriweather + Lato, libre|Libre Baskerville + Lato, dm|DM Serif + DM Sans, raleway|Raleway + Inter, nunito|Nunito";
    --p-variantes: "clasico|Clásico, moderno|Moderno";
}

/* -----------------------------------------------------------
   LOS TRES COLORES DEL CUADRADITO DEL PANEL
   -----------------------------------------------------------
   Van declarados en `.p-muestra` y NO en `:root`, y la
   diferencia no es de estilo: un `var()` adentro de una custom
   property se resuelve EN EL ELEMENTO DONDE SE DECLARA. Puesto
   en `:root`, `--p-m2` quedaría valiendo el acento de la paleta
   original y lo heredarían las cuatro muestras — o sea que el
   panel mostraría los mismos tres colores cuatro veces y no
   habría nada que elegir. Declarado acá, la muestra ya lleva su
   `data-paleta` encima y el `var()` resuelve al de ESA paleta.

   Es también lo que evita tener los colores escritos dos veces:
   el panel no sabe ninguno, los saca de la hoja del modelo.

   El nombre del acento cambia en cada modelo —acá --jade—,
   y por eso esta línea vive en la hoja del modelo y no en la
   del personalizador, que es común a todos.
   ----------------------------------------------------------- */
.p-muestra {
    --p-m1: var(--tinta);
    --p-m2: var(--jade);
    --p-m3: var(--rosa);
}

/* -----------------------------------------------------------
   LAS PALETAS
   -----------------------------------------------------------
   `--alerta` y `--alerta-suave` no se tocan: son el aviso de
   "última unidad" y tienen que seguir leyéndose como un aviso
   en las cuatro paletas.

   `--jade` es el acento —precio, botón, disponibilidad— así que
   es el que de verdad cambia el carácter de la tienda; el resto
   acompaña. Los fondos se mantienen muy claros a propósito: es
   una tienda de textil y la foto del producto tiene que ser lo
   único que pese en la pantalla.
   ----------------------------------------------------------- */

[data-paleta="arena"] {
    --tinta:        #33261e;
    --ciruela:      #6b5344;
    --jade:         #a1592f;
    --rosa:         #e8d9c8;
    --rosa-suave:   #f4ece2;
    --nacar:        #fbf8f4;
    --gris:         #8d8074;
    --jade-suave:   #f2e4d9;
}

[data-paleta="salvia"] {
    --tinta:        #222a24;
    --ciruela:      #4d5a4e;
    --jade:         #5c7d63;
    --rosa:         #dbe2d7;
    --rosa-suave:   #eef1ea;
    --nacar:        #f9faf7;
    --gris:         #7f887f;
    --jade-suave:   #e6ece4;
}

[data-paleta="noche"] {
    --tinta:        #1a1a1a;
    --ciruela:      #4a4a4a;
    --jade:         #9a7b33;
    --rosa:         #e6e0d3;
    --rosa-suave:   #f3efe7;
    --nacar:        #faf8f4;
    --gris:         #857f75;
    --jade-suave:   #efe8d8;
}

/* -----------------------------------------------------------
   LAS TIPOGRAFÍAS
   -----------------------------------------------------------
   Las cuatro combinan una de título con una de lectura, y las
   cuatro piden la CURSIVA de la de lectura: este modelo la usa
   para la descripción del producto, y sin el archivo el
   navegador la inclina a la fuerza — se nota, y se nota mal.
   ----------------------------------------------------------- */

/* Merriweather es la serif de lectura más usada de Google, y acompaña con Lato
   —la cuarta más usada del catálogo entero—. Reemplazó a Fraunces, que es
   preciosa y la conoce muy poca gente. */
[data-letras="merriweather"] {
    --display: "Merriweather", Georgia, serif;
    --texto:   "Lato", system-ui, sans-serif;
    --p-fuente: "https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&family=Merriweather:wght@400;700&display=swap";
}

[data-letras="nunito"] {
    --display: "Nunito", system-ui, sans-serif;
    --texto:   "Nunito Sans", system-ui, sans-serif;
    --p-fuente: "https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&family=Nunito+Sans:wght@300;400;600&display=swap";
}

[data-letras="cormorant"] {
    --display: "Cormorant Garamond", Georgia, serif;
    --texto:   "Montserrat", system-ui, sans-serif;
    --p-fuente: "https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Montserrat:wght@300;400;500&display=swap";
}

[data-letras="dm"] {
    --display: "DM Serif Display", Georgia, serif;
    --texto:   "DM Sans", system-ui, sans-serif;
    --p-fuente: "https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;1,9..40,400&family=DM+Serif+Display:ital@0;1&display=swap";
}

/* ===========================================================
   =========  RETOQUES 088  ==================================
   =========================================================== */

/* -----------------------------------------------------------
   EL BUSCADOR — NO TENÍA NI UNA REGLA
   -----------------------------------------------------------
   El `<input type="search">` salía con el estilo por defecto
   del navegador: borde gris de sistema, esquinas rectas y una
   tipografía que no es ninguna de las dos del modelo. En una
   boutique, donde todo lo demás está cuidado, ese campo era lo
   único que se veía sin terminar.

   `appearance: none` primero: Safari le dibuja al `type=search`
   una lupa y un aspecto propios que ignoran casi todo lo que se
   le declare encima.
   ----------------------------------------------------------- */
.buscador {
    display: flex;
    align-items: center;
    gap: 8px;
}

.buscador input[type="search"] {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    min-width: 0;
    padding: 11px 15px;
    border: 1px solid var(--rosa);
    border-radius: 999px;
    background: var(--nacar);
    color: var(--tinta);
    font-family: var(--texto);
    /* 16px es el mínimo con el que iOS NO hace zoom al enfocar: abajo
       de eso la pantalla se corre sola y queda media afuera. */
    font-size: 16px;
    line-height: 1.3;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.buscador input[type="search"]::placeholder {
    color: var(--gris);
    opacity: 1;
}

.buscador input[type="search"]:focus {
    outline: none;
    border-color: var(--jade);
    box-shadow: 0 0 0 3px var(--jade-suave);
}

.buscador button {
    flex: 0 0 auto;
    padding: 11px 20px;
    border: 0;
    border-radius: 999px;
    background: var(--tinta);
    color: var(--blanco);
    font-family: var(--display);
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    min-height: 44px;
}

.buscador button:hover { background: var(--ciruela); }

/* -----------------------------------------------------------
   LA LUPA QUE DESPLIEGA EL BUSCADOR EN EL CELULAR
   -----------------------------------------------------------
   En la computadora NO EXISTE: el campo está siempre a la vista,
   que es lo que este modelo tenía. Se prende en la media query
   de `index.css` y de `ficha.css`, que son las que saben a qué
   ancho la cabecera deja de entrar en una línea.

   Va acá, en la hoja base, porque las dos pantallas la dibujan
   igual: escrita en las dos se separa sola.
   ----------------------------------------------------------- */
.buscador-lupa {
    display: none;              /* lo prende la media query */
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: none;
    color: inherit;
    cursor: pointer;
}

.buscador-lupa svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
}

.buscador-lupa:hover { background: var(--rosa-suave); }

/* -----------------------------------------------------------
   EL LOGO USA LA BARRA, QUE ES PARA LO QUE ESTÁ
   -----------------------------------------------------------
   El andamio lo acota en 44 de alto y 190 de ancho, que es una
   medida pensada para una cabecera compacta. Acá el logo está
   CENTRADO y es lo único que hay en esa celda, así que un
   cuadrado de 44px se ve perdido en el medio de una barra vacía.

   HAY QUE LEVANTAR LOS DOS TOPES: un logo apaisado toca el ancho
   antes que el alto, así que subir sólo `max-height` no cambia
   nada —ya se aprendió en el modelo denso, medido—. Y va con
   `.encabezado` adelante porque `tienda.css` se sirve DESPUÉS:
   con la misma especificidad ganaría por orden y la medida
   seguiría siendo la del andamio.

   El relleno de la barra baja para acompañar: con 26px arriba,
   agrandar el logo sólo hacía la cabecera más alta.
   ----------------------------------------------------------- */
.encabezado .tienda-logo { max-height: 62px; max-width: 260px; }

.encabezado .logo {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* -----------------------------------------------------------
   "VOLVER AL CATÁLOGO" TIENE QUE PARECER UN ENLACE
   -----------------------------------------------------------
   Este modelo le pone `color: inherit` y `text-decoration: none`
   a todos los `<a>`, así que ese renglón salía con la misma
   tinta que el párrafo de al lado y sin subrayado: un texto que
   resulta que se toca. Y pegado al carrusel de similares, sin
   nada que lo separe de lo de arriba.
   ----------------------------------------------------------- */
.volver-catalogo {
    margin: 30px 0 8px;
    padding-top: 22px;
    border-top: 1px solid var(--rosa);
}

.volver-catalogo a {
    display: inline-block;
    padding: 10px 0;
    font-family: var(--display);
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-decoration: underline;
    text-underline-offset: 5px;
    color: var(--ciruela);
}

.volver-catalogo a:hover { color: var(--tinta); }

/* -----------------------------------------------------------
   LA BARRA DEL PEDIDO — TAMPOCO ESTABA
   -----------------------------------------------------------
   Mismo caso que el corralón: la plantilla la dibuja y la hoja
   no la conocía, así que caía al flujo del documento como un
   bloque suelto al final de la página.
   ----------------------------------------------------------- */
.barra-pedido {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 40;
    background: var(--blanco);
    border-top: 1px solid var(--rosa);
    padding: 12px 22px calc(12px + env(safe-area-inset-bottom));
    box-shadow: 0 -6px 26px rgba(42, 31, 45, 0.10);
}

.barra-pedido-fila {
    max-width: 1120px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 16px;
}

.barra-pedido .resumen { flex: 1; min-width: 0; }
.barra-pedido .cuenta  { font-size: 12px; color: var(--gris); letter-spacing: 0.04em; }

.barra-pedido .total {
    font-family: var(--display);
    font-size: 21px;
    font-weight: 600;
    line-height: 1.2;
}

.barra-pedido .btn-pedir,
.barra-pedido button {
    background: var(--jade);
    color: var(--blanco);
    border: 0;
    border-radius: 999px;
    padding: 14px 30px;
    font-family: var(--display);
    font-size: 14px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
    min-height: 48px;
}
.barra-pedido .btn-pedir:hover,
.barra-pedido button:hover { opacity: 0.9; }

/* EL HUECO PARA LA BARRA LO DA EL PIE, NO EL BODY.

   Acá había un `body { padding-bottom: 92px }` para que la barra fija no
   tapara los últimos productos. Desde que el pie existe (088) y cierra toda
   pantalla, ese hueco lo da él: son 130px de relleno abajo contra una barra
   de 75. El del body quedaba DESPUÉS del pie —o sea abajo de todo, un vacío
   del color del fondo que no separa nada— y en `cuenta.php`, que ni siquiera
   tiene barra, era espacio muerto y nada más.

   El denso nunca lo tuvo en el body sino en `.contenedor`, que va ARRIBA del
   pie: por eso ese modelo se veía bien y éste no. */

/* -----------------------------------------------------------
   EL CONTROL DE AGREGAR: EL BOTÓN Y EL STEPPER
   -----------------------------------------------------------
   ESTO NO ESTABA ESTILADO. Las dos plantillas de este modelo
   dibujan `<button class="sumar">` y un `.paso` con − / valor /
   +, y la hoja no los nombraba: salían con el dibujo por
   defecto del navegador —19px de alto, el − y el + de 12px de
   ancho— en medio de una tienda diseñada. Y como `.paso` es un
   div sin reglas, ocupaba el ancho entero de la tarjeta y el +
   se iba hasta el borde derecho.

   Es el mismo modo de fallar que `.barra-pedido`: una clase que
   la plantilla dibuja y la hoja no conoce. No hay error, no hay
   regla rota — hay una clase que no existe.

   El idioma es el de este modelo: jade, píldora y 48px de alto,
   los mismos de `.barra-pedido button`.
   ----------------------------------------------------------- */

.sumar {
    width: 100%;
    background: var(--jade);
    color: var(--blanco);
    border: 0;
    border-radius: 999px;
    padding: 13px 24px;
    font-family: var(--display);
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    /* 48px es el mínimo de un blanco que se toca con el dedo, y es el
       mismo número que ya usa la barra del pedido. */
    min-height: 48px;
    transition: opacity 0.15s;
}

.sumar:hover { opacity: 0.9; }
.sumar:active { background: var(--tinta); }

.sumar[disabled] {
    background: var(--rosa-suave);
    color: var(--gris);
    cursor: not-allowed;
}

/* El stepper. `display: flex` es lo que lo saca del ancho completo:
   `carrito.js` lo muestra con `style.display = ''`, o sea que la
   hoja es la que decide qué es — y sin regla era un bloque. */
.paso {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--rosa);
    border-radius: 999px;
    overflow: hidden;
    background: var(--blanco);
}

.paso button {
    /* Cuadrado y con medida propia: sin esto los dos botones se
       reparten el ancho del contenedor y el + termina donde
       termine la tarjeta. */
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border: 0;
    background: none;
    color: var(--tinta);
    font-family: var(--display);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.paso button:hover { background: var(--rosa-suave); }
.paso button:active { background: var(--rosa); }

.paso .valor {
    min-width: 40px;
    text-align: center;
    font-family: var(--display);
    font-size: 16px;
    color: var(--tinta);
}

/* -----------------------------------------------------------
   LA ETIQUETA DE DESCUENTO (088)
   ----------------------------------------------------------- */
.precio-anterior {
    margin-left: 8px;
    color: var(--gris);
    text-decoration: line-through;
    font-size: 0.85em;
}

.precio-etiqueta {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--jade);
    color: var(--blanco);
    font-family: var(--display);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    vertical-align: middle;
}

/* ===========================================================
   PALETAS NUEVAS (088)
   =========================================================== */
[data-paleta="tinta"] {
    --tinta: #1e2733; --ciruela: #3c4a5c; --jade: #2b6f8f;
    --rosa: #d3dce4; --rosa-suave: #eaf0f5; --nacar: #f8fafc;
    --gris: #7c8794; --jade-suave: #e2eef4; --alerta: #a05a2c; --alerta-suave: #f6eee5;
}

[data-paleta="terracota"] {
    --tinta: #3a2620; --ciruela: #5c4038; --jade: #b3603c;
    --rosa: #e6d5cc; --rosa-suave: #f4ebe5; --nacar: #fbf7f4;
    --gris: #8d7d75; --jade-suave: #f2e3da; --alerta: #93502a; --alerta-suave: #f7eee6;
}

[data-paleta="oliva"] {
    --tinta: #29301f; --ciruela: #47533a; --jade: #6b7f3f;
    --rosa: #dbdfcd; --rosa-suave: #eef1e6; --nacar: #fafbf6;
    --gris: #838a76; --jade-suave: #e9eedd; --alerta: #96662c; --alerta-suave: #f6efe3;
}

[data-paleta="lavanda"] {
    --tinta: #2b2438; --ciruela: #4a3f61; --jade: #6a5ba0;
    --rosa: #ddd6e8; --rosa-suave: #f0ecf6; --nacar: #faf9fc;
    --gris: #877f96; --jade-suave: #ece7f5; --alerta: #96602c; --alerta-suave: #f6eee4;
}

/* ===========================================================
   COMBINACIONES DE LETRA NUEVAS (088)
   =========================================================== */
[data-letras="playfair"] {
    --display: "Playfair Display", Georgia, serif;
    --texto:   "Inter", system-ui, sans-serif;
    --p-fuente: "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Playfair+Display:wght@500;600;700&display=swap";
}

[data-letras="libre"] {
    --display: "Libre Baskerville", Georgia, serif;
    --texto:   "Lato", system-ui, sans-serif;
    --p-fuente: "https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Libre+Baskerville:wght@400;700&display=swap";
}

[data-letras="raleway"] {
    --display: "Raleway", system-ui, sans-serif;
    --texto:   "Inter", system-ui, sans-serif;
    --p-fuente: "https://fonts.googleapis.com/css2?family=Inter:wght@400;500&family=Raleway:wght@500;600;700&display=swap";
}

/* ===========================================================
   LAS DOS VARIANTES (088)
   ===========================================================
   `clasico` es el diseño de siempre y no necesita una línea.
   `moderno` cambia el carácter editorial —serif, mucho aire,
   mayúsculas espaciadas— por uno más de tienda: sans en todo,
   tarjetas con sombra y botones redondos.
   =========================================================== */
[data-variante="moderno"] {
    --texto: var(--display);
}

[data-variante="moderno"] .producto {
    border: 0;
    border-radius: 18px;
    padding: 20px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(42, 31, 45, 0.06), 0 8px 24px rgba(42, 31, 45, 0.06);
    transition: box-shadow 0.18s ease, transform 0.18s ease;
}
[data-variante="moderno"] .producto:hover {
    box-shadow: 0 12px 34px rgba(42, 31, 45, 0.14);
    transform: translateY(-2px);
}

[data-variante="moderno"] .lienzo { border-radius: 0; }

[data-variante="moderno"] .portada h1 {
    letter-spacing: -0.01em;
    text-transform: none;
}

[data-variante="moderno"] .encabezado {
    box-shadow: 0 1px 0 rgba(42, 31, 45, 0.07);
    border-bottom: 0;
}


/* -----------------------------------------------------------
   LAS OCHO PALETAS NUEVAS (A5)
   -----------------------------------------------------------
   Vivas, claras, pasteles y una oscura, para que la lista deje
   de ser ocho variaciones del mismo tono. Los colores se
   eligieron UNA vez por rol —tinta, acento, papel, borde— y de
   ahí salieron las tres hojas: escritas a mano tres veces, la
   "coral" de un modelo terminaria con otro naranja que la de
   otro.

   OSCURA ES UNA TINTA PROFUNDA, NO UN MODO OSCURO. Los tres
   modelos dan por sentado tinta oscura sobre papel claro —el
   cajon del celular, la burbuja del carrito y la barra de
   anuncio estan escritos asi— y darlo vuelta es otra tarea, no
   una paleta. */

[data-paleta="coral"] {
    --tinta:        #2b1e1b;
    --ciruela:      #7a3b2c;
    --jade:         #ff5a3c;
    --rosa:         #e8d8d3;
    --rosa-suave:   #ffe9e3;
    --nacar:        #fff5f2;
    --gris:         #8b7a75;
    --jade-suave:   #ffe3dc;
}

[data-paleta="turquesa"] {
    --tinta:        #0f2f2c;
    --ciruela:      #14544c;
    --jade:         #00b3a4;
    --rosa:         #cfe4e0;
    --rosa-suave:   #e2f4f1;
    --nacar:        #f0faf8;
    --gris:         #6f8a86;
    --jade-suave:   #dcf3f0;
}

[data-paleta="lima"] {
    --tinta:        #1e2a13;
    --ciruela:      #4a6b1e;
    --jade:         #7cb518;
    --rosa:         #dde5cf;
    --rosa-suave:   #ecf3dd;
    --nacar:        #f5faec;
    --gris:         #7e8a70;
    --jade-suave:   #eaf4d6;
}

[data-paleta="nieve"] {
    --tinta:        #2f3438;
    --ciruela:      #2c4c73;
    --jade:         #3a7bd5;
    --rosa:         #e2e6ea;
    --rosa-suave:   #f1f4f7;
    --nacar:        #fdfdfe;
    --gris:         #7d858c;
    --jade-suave:   #e6eefa;
}

[data-paleta="crema"] {
    --tinta:        #3a3226;
    --ciruela:      #6d5a34;
    --jade:         #c08a3e;
    --rosa:         #e9e0d0;
    --rosa-suave:   #f5efe1;
    --nacar:        #fdfaf3;
    --gris:         #8d8375;
    --jade-suave:   #f6ecd9;
}

[data-paleta="menta"] {
    --tinta:        #2c3a35;
    --ciruela:      #43705f;
    --jade:         #6fbf9a;
    --rosa:         #d9e8e1;
    --rosa-suave:   #e8f4ee;
    --nacar:        #f5fbf8;
    --gris:         #7f918a;
    --jade-suave:   #e4f3ec;
}

[data-paleta="glicina"] {
    --tinta:        #332b40;
    --ciruela:      #5d4a80;
    --jade:         #9b8ad4;
    --rosa:         #e2dced;
    --rosa-suave:   #efeaf9;
    --nacar:        #f8f6fd;
    --gris:         #857d94;
    --jade-suave:   #ede8f8;
}

[data-paleta="grafito"] {
    --tinta:        #14161a;
    --ciruela:      #2a2f38;
    --jade:         #d9a441;
    --rosa:         #d5d8dd;
    --rosa-suave:   #e6e8ec;
    --nacar:        #f2f3f5;
    --gris:         #6b7078;
    --jade-suave:   #f6ecd7;
}

/* ===========================================================
   LAS TRES PALETAS ROSADAS
   ===========================================================
   Ver la nota del modelo denso: los colores se eligieron una
   vez por ROL y de ahí salieron las tres hojas, así que la
   "rosa" de este modelo es la misma que la de los otros dos.
   Acá el acento es `--jade` —el nombre quedó del original y no
   se renombra: lo usan cuarenta reglas de este modelo—.
   =========================================================== */

[data-paleta="rosa"] {
    --tinta:        #3d2430;
    --ciruela:      #7d3352;
    --jade:         #e0568a;
    --rosa:         #f0d9e2;
    --rosa-suave:   #fdeaf1;
    --nacar:        #fff7fa;
    --gris:         #8a7480;
    --jade-suave:   #fce4f1;
}

[data-paleta="nude"] {
    --tinta:        #4a3a3d;
    --ciruela:      #8d6b71;
    --jade:         #c98b98;
    --rosa:         #ecdcdd;
    --rosa-suave:   #f7ebe9;
    --nacar:        #fdf8f7;
    --gris:         #9c8a8d;
    --jade-suave:   #f3e3e2;
}

[data-paleta="fucsia"] {
    --tinta:        #2f1b2c;
    --ciruela:      #8a1250;
    --jade:         #d81b7c;
    --rosa:         #f2d5e6;
    --rosa-suave:   #fce4f1;
    --nacar:        #fff9fc;
    --gris:         #8b7385;
    --jade-suave:   #fbdcee;
}

/* ---- ficha.css ---- */
/* Lo propio de esta pantalla. Va después de la base, así gana. */

/* ---------- Encabezado ---------- */

.aviso {
    background: var(--tinta);
    color: var(--rosa);
    text-align: center;
    padding: 9px 20px;
}

.aviso .rotulo { font-size: 10px; letter-spacing: 0.2em; }

.encabezado {
    background: var(--nacar);
    padding: 26px 32px 20px;
    border-bottom: 1px solid var(--rosa);
    position: sticky;
    top: 0;
    z-index: 20;
}

.encabezado-fila {
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 20px;
}

.logo {
    font-family: var(--display);
    font-weight: 300;
    font-size: 27px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    text-align: center;
    grid-column: 2;
    line-height: 1;
}

.logo small {
    display: block;
    font-size: 9px;
    letter-spacing: 0.34em;
    color: var(--gris);
    margin-top: 7px;
}

.nav-izquierda { display: flex; gap: 26px; }

.nav-derecha { display: flex; gap: 22px; justify-content: flex-end; align-items: center; }

.nav-izquierda a, .nav-derecha a, .nav-derecha button {
    font-family: var(--display);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--tinta);
    background: none;
    border: 0;
    cursor: pointer;
    padding: 4px 0;
    border-bottom: 1px solid transparent;
}

.nav-izquierda a:hover, .nav-derecha a:hover, .nav-derecha button:hover { border-bottom-color: var(--tinta); }

.bolsa { display: inline-flex; align-items: center; gap: 7px; }

.bolsa i {
    font-style: normal;
    background: var(--jade);
    color: var(--blanco);
    width: 18px; height: 18px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 10px;
    font-family: var(--display);
}

/* ---------- Migas ---------- */

.migas {
    max-width: 1280px;
    margin: 0 auto;
    padding: 22px 32px 0;
    font-family: var(--display);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gris);
}

.migas a:hover { color: var(--tinta); }

.migas span { margin: 0 8px; }

/* ---------- Ficha ---------- */

.ficha {
    max-width: 1280px;
    margin: 0 auto;
    padding: 26px 32px 72px;
    display: grid;
    /* Las dos pistas con `minmax(0, …)`: un `1fr` pelado es
       `minmax(auto, 1fr)`, y ese `auto` es el contenido mínimo de lo que
       tenga adentro. En la columna de datos está el carrusel de similares
       —doce tarjetas en fila— así que la pista se estiraba a lo que midiera
       el carrusel: medido, 2024px de documento en un viewport de 1280. */
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 56px;
    align-items: start;
}

/* Galería */

.galeria { display: grid; grid-template-columns: 76px 1fr; gap: 14px; }

.miniaturas { display: flex; flex-direction: column; gap: 10px; }

.miniaturas button {
    aspect-ratio: 1;
    border: 1px solid var(--rosa);
    background: var(--rosa-suave);
    cursor: pointer;
    padding: 0;
    display: grid;
    place-items: center;
    font-family: var(--display);
    font-size: 8.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ciruela);
}

.miniaturas button.activa { border-color: var(--tinta); border-width: 2px; }

.principal {
    aspect-ratio: 4 / 5;
    background: linear-gradient(160deg, #efe9e4 0%, #ddd3ca 100%);
    position: relative;
    display: grid;
    place-items: center;
    overflow: hidden;
}

.principal figure {
    position: absolute;
    inset: 12% 18%;
    background: rgba(255,255,255,0.5);
    border: 1px solid rgba(255,255,255,0.85);
    display: grid;
    place-items: center;
}

.principal figure span {
    font-family: var(--display);
    font-size: 11px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--ciruela);
}

.marcador {
    position: absolute;
    top: 16px; left: 16px;
    font-family: var(--display);
    font-size: 9.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    background: var(--tinta);
    color: var(--nacar);
    padding: 6px 12px;
    z-index: 2;
}

/* Datos */

.marca {
    font-family: var(--display);
    font-size: 10px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--gris);
    margin-bottom: 10px;
}

.ficha h1 {
    font-family: var(--display);
    font-weight: 300;
    font-size: 36px;
    line-height: 1.12;
    letter-spacing: -0.01em;
    margin-bottom: 6px;
}

.bajada {
    font-style: italic;
    color: var(--ciruela);
    margin-bottom: 22px;
}

/* SIGNATURE — La ficha del tejido.
   En blanquería los hilos y la composición son el dato que decide
   la compra, igual que el tono en coloración. Va arriba del precio. */

.tejido {
    display: flex;
    gap: 0;
    border: 1px solid var(--rosa);
    margin-bottom: 26px;
}

.tejido div {
    flex: 1;
    padding: 12px 14px;
    border-right: 1px solid var(--rosa);
}

.tejido div:last-child { border-right: 0; }

.tejido dt {
    font-family: var(--display);
    font-size: 9px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gris);
    margin-bottom: 3px;
}

.tejido dd {
    font-family: var(--display);
    font-size: 17px;
    font-weight: 400;
}

.precio-bloque {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

.precio {
    font-family: var(--display);
    font-size: 32px;
    font-weight: 400;
    letter-spacing: 0.01em;
}

.precio-antes { color: var(--gris); text-decoration: line-through; }

.ahorro {
    font-family: var(--display);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    background: var(--jade);
    color: var(--blanco);
    padding: 4px 10px;
}

.cuotas { font-size: 14px; color: var(--ciruela); margin-bottom: 28px; }

/* Variantes */

.variante { margin-bottom: 24px; }

.variante-titulo {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 11px;
}

.variante-titulo .rotulo { font-size: 10px; letter-spacing: 0.2em; }

.variante-titulo .elegido { font-size: 14px; font-style: italic; color: var(--ciruela); }

.colores { display: flex; gap: 11px; flex-wrap: wrap; }

.colores button {
    width: 40px; height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,0.14);
    cursor: pointer;
    padding: 0;
    position: relative;
}

.colores button.activo { box-shadow: 0 0 0 2px var(--nacar), 0 0 0 3px var(--tinta); }

.colores button[disabled] { cursor: not-allowed; opacity: 0.35; }

.colores button[disabled]::after {
    content: "";
    position: absolute;
    inset: 50% -3px auto;
    height: 1px;
    background: var(--tinta);
    transform: rotate(-45deg);
}

.medidas { display: flex; gap: 9px; flex-wrap: wrap; }

.medidas button {
    font-family: var(--display);
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border: 1px solid var(--rosa);
    background: var(--blanco);
    color: var(--tinta);
    padding: 12px 18px;
    cursor: pointer;
    text-align: left;
    line-height: 1.3;
}

.medidas button small {
    display: block;
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: none;
    color: var(--gris);
    margin-top: 2px;
}

.medidas button:hover { border-color: var(--tinta); }

.medidas button.activo { border-color: var(--tinta); background: var(--tinta); color: var(--nacar); }

.medidas button.activo small { color: var(--rosa); }

.medidas button[disabled] {
    cursor: not-allowed;
    color: var(--gris);
    background: var(--rosa-suave);
    text-decoration: line-through;
}

.medidas button[disabled] small { text-decoration: none; }

/* Disponibilidad de la variante elegida */

.disponible {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 14px;
    color: var(--jade);
    margin-bottom: 22px;
}

.disponible.poco { color: var(--alerta); }

.disponible b {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: currentColor;
    display: block;
}

.compra { display: flex; gap: 12px; margin-bottom: 16px; }

/* -----------------------------------------------------------
   EL CONTROL DE AGREGAR NO OCUPA LA COLUMNA ENTERA
   -----------------------------------------------------------
   Esta hoja fue dibujada para el marcado de la demo, donde el
   stepper y el botón conviven adentro de un `.compra` y están
   los dos a la vista. La tienda usa otro: `carrito.js` muestra
   el botón y, al agregar, lo esconde y saca el stepper — es la
   misma interacción en los tres modelos.

   El envoltorio de esa interacción es un div suelto, así que
   ocupaba los 540px de la columna: medido, el botón salía de
   540 y el stepper también. En una ficha eso no es un botón,
   es una franja.

   `max-content` lo deja del ancho de lo que tiene adentro, que
   es lo que hace `.compra` en la demo con `flex`. Y el margen
   de abajo, porque el "Volver al catálogo" quedaba pegado: el
   hueco medía CERO.

   Va scopeado a `.datos` —la columna de la ficha— aunque esta
   hoja sólo se cargue acá: el listado usa el mismo marcado y su
   botón SÍ tiene que ocupar la tarjeta entera.
   ----------------------------------------------------------- */
.datos [data-control] {
    width: max-content;
    margin-bottom: 10px;
}

.paso {
    display: flex;
    border: 1px solid var(--tinta);
    flex: 0 0 auto;
}

.paso button {
    width: 46px;
    border: 0;
    background: none;
    font-family: var(--display);
    font-size: 19px;
    color: var(--tinta);
    cursor: pointer;
}

.paso .valor {
    width: 46px;
    display: grid;
    place-items: center;
    font-family: var(--display);
    font-size: 16px;
    border-left: 1px solid var(--rosa);
    border-right: 1px solid var(--rosa);
}

.btn-principal {
    flex: 1;
    font-family: var(--display);
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    background: var(--tinta);
    color: var(--nacar);
    border: 1px solid var(--tinta);
    padding: 16px;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-principal:hover { background: var(--ciruela); border-color: var(--ciruela); }

.nota-envio {
    font-size: 13.5px;
    color: var(--gris);
    font-style: italic;
    padding-bottom: 26px;
    border-bottom: 1px solid var(--rosa);
    margin-bottom: 4px;
}

/* Desplegables */

.detalle-item { border-bottom: 1px solid var(--rosa); }

.detalle-item summary {
    font-family: var(--display);
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    padding: 18px 0;
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.detalle-item summary::-webkit-details-marker { display: none; }

.detalle-item summary::after { content: "+"; font-size: 18px; font-weight: 300; }

.detalle-item[open] summary::after { content: "–"; }

.detalle-item p, .detalle-item ul { padding-bottom: 20px; color: var(--ciruela); font-size: 14.5px; }

.detalle-item ul { padding-left: 18px; }

.pie {
    background: var(--tinta);
    color: var(--rosa);
    padding: 56px 32px 40px;
}

.pie-fila {
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 36px;
}

.pie h3 { color: var(--blanco); margin-bottom: 12px; font-weight: 400; }

.pie p, .pie a { font-size: 14px; line-height: 1.9; }

.pie a:hover { color: var(--blanco); }

@media (max-width: 900px) {
    /* Con una sola columna el `minmax(0, …)` hace todavía más falta: ver
       la nota de la regla de arriba. Sin él, a 390px la ficha desbordaba
       1362px y la caja de la imagen se iba a 1720. */
    .ficha { grid-template-columns: minmax(0, 1fr); gap: 34px; }

    /* La misma cabecera de una línea que el listado — ver la nota larga en
       `index.css`. Está escrita dos veces porque el encabezado de este modelo
       ya lo estaba: las dos hojas lo definen entero, cada una para su
       pantalla. */
    .encabezado { padding: 10px 14px; }
    .encabezado-fila { grid-template-columns: auto 1fr auto; gap: 10px; }
    .nav-izquierda { gap: 4px; }
    .nav-derecha { gap: 14px; }
    /* EL LOGO EN TEXTO TIENE QUE PODER ACHICARSE. A 27px con
       `letter-spacing: 0.3em`, un nombre como "TAGA DESARROLLO" declara 238px
       de ancho mínimo —medido— y empuja el carrito fuera de la pantalla: la
       fila medía 411px en un viewport de 390. Un ítem de grid no baja de su
       contenido mínimo sin `min-width: 0`, así que las dos cosas van juntas.
       Con un logo en imagen no pasa: `.tienda-logo` ya viene acotado. Pasa con
       el nombre en texto, que es lo que ve toda tienda que no subió el suyo. */
    .logo {
        grid-column: 2;
        font-size: 15px;
        letter-spacing: 0.14em;
        min-width: 0;
        overflow: hidden;
    }
    .encabezado .tienda-logo { max-height: 38px; max-width: 150px; }

    .buscador-lupa { display: inline-flex; }
    .nav-izquierda .buscador { display: none; }

    .encabezado.buscador-abierto .nav-izquierda .buscador {
        display: block;
        position: absolute;
        left: 14px;
        right: 14px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 3;
        background: var(--nacar);
    }

    /* EL NOMBRE DEL PRODUCTO, MÁS CHICO Y SÓLO ACÁ. En la computadora la ficha
       de este modelo se ve como tiene que verse y no se toca: lo que no entra
       es un título de revista en 390px de ancho, donde un nombre de catálogo
       —que viene en MAYÚSCULA (055)— se come tres renglones antes del precio. */
    .datos h1 { font-size: 24px; letter-spacing: 0; }
    .galeria { grid-template-columns: 1fr; }
    .miniaturas { flex-direction: row; order: 2; }
    .miniaturas button { width: 64px; }
    .tejido { flex-wrap: wrap; }
    .tejido div { flex: 1 1 50%; border-bottom: 1px solid var(--rosa); }
}

/* ---- tienda.css ---- */
/* ===========================================================
   EL ANDAMIO DE LA TIENDA — común a los tres modelos
   ===========================================================
   Lo que NO es del rubro: la pantalla de entrar, el enlace a la
   cuenta. Es el gemelo de `demos/demo.css`, que hace lo mismo
   con la barra de la demo.

   Va en UNA hoja y no en los tres `estilo.css` por lo mismo que
   el `:root` de la boutique salió de sus seis pantallas: escrito
   tres veces se separa solo, y el día que se toque quedaría bien
   en un modelo y mal en los otros dos.

   -----------------------------------------------------------
   SÓLO USA `--tinta`, QUE ES LA ÚNICA VARIABLE QUE TIENEN LOS
   TRES MODELOS
   -----------------------------------------------------------
   El acento se llama distinto en cada uno (`--senal`, `--jade`,
   `--fuego`), así que una hoja común no lo puede nombrar sin
   quedar atada a un modelo. Lo que sí hereda es la TIPOGRAFÍA,
   que es lo que hace que esta pantalla se sienta parte de la
   tienda y no de otro sitio.

   Se sirve DESPUÉS de la hoja del modelo (ver `tienda/estilo.php`).
   =========================================================== */

/* ===========================================================
   EL ATRIBUTO `hidden` GANA SIEMPRE
   ===========================================================
   El navegador lo aplica con `[hidden] { display: none }` desde
   su HOJA DE USUARIO, que pierde contra cualquier declaración
   del autor — no es cuestión de especificidad: pierde y punto.
   Así que un `<div class="asist-panel" hidden>` queda A LA VISTA,
   porque `.asist-panel` dice `display: flex`.

   NO ES TEÓRICO: el panel del asistente NUNCA SE PUDO ESCONDER.
   Se dibujaba abierto al cargar cualquier pantalla, el botón
   flotante "lo abría" porque ya estaba, y la ✕ no hacía nada. Sin
   ningún error y sin ninguna regla mal escrita.

   `tienda/carrito.js` y `tienda/checkout.js` ya evitaban `hidden`
   por esto mismo y usan `style.display`, con la nota escrita — o
   sea que la lección estaba aprendida acá adentro y el componente
   siguiente la volvió a pagar. Por eso la regla va ARRIBA Y PARA
   TODA LA TIENDA, con el mismo criterio que la de `app.css`:
   `hidden` es la forma en que se pliegan las cosas —el panel del
   asistente, las flechas de los dos carruseles— y el modelo o el
   componente que se agregue mañana no tiene por qué acordarse.

   LA TIENDA NO CARGA `app.css`: son dos raíces y dos hojas, así
   que la regla que el ERP tiene desde la ficha del artículo no
   llegaba hasta acá. =========================================== */
[hidden] { display: none !important; }

.cuenta-web {
    max-width: 380px;
    margin: 0 auto;
    padding: 28px 18px 60px;
}

.cuenta-web h1 {
    font-family: var(--display, inherit);
    font-size: 26px;
    line-height: 1.15;
    margin: 18px 0 8px;
    color: var(--tinta, #1a1a1a);
}

.cuenta-web p { margin: 0 0 12px; }

.cuenta-web-ayuda {
    font-size: 14px;
    line-height: 1.5;
    opacity: 0.75;
}

.cuenta-web-dato {
    font-size: 16px;
    font-weight: 600;
    word-break: break-all;
}

/* Los dos avisos: uno dice que algo salió bien y el otro que no.
   Con el mismo color, el comprador no distingue "revisá tu mail"
   de "ese código no sirve". */
.cuenta-web-aviso,
.cuenta-web-error {
    font-size: 14px;
    line-height: 1.45;
    padding: 10px 12px;
    border-radius: 10px;
}
.cuenta-web-aviso { background: #e8f3ec; color: #1d5c38; }
.cuenta-web-error { background: #fdeeea; color: #97341f; }

/* ---- El formulario ---- */

.cuenta-web-form { display: grid; gap: 6px; margin-top: 16px; }

.cuenta-web-form label {
    font-size: 13px;
    font-weight: 600;
    opacity: 0.8;
}

.cuenta-web-form input {
    width: 100%;
    /* 16px o iOS hace zoom solo al enfocar y la pantalla queda corrida. */
    font-size: 16px;
    font-family: inherit;
    padding: 13px 14px;
    border: 1px solid rgba(0, 0, 0, 0.16);
    border-radius: 12px;
    background: #fff;
    color: var(--tinta, #1a1a1a);
    /* 48px de alto: el objetivo es el pulgar. */
    min-height: 48px;
}
.cuenta-web-form input:focus {
    outline: 0;
    border-color: var(--tinta, #1a1a1a);
}

/* El código se lee de un vistazo y se compara contra el mail: separado
   y grande, seis dígitos se verifican sin contar con el dedo. */
.cuenta-web-codigo {
    text-align: center;
    font-size: 30px !important;
    letter-spacing: 0.28em;
    /* El espaciado corre el texto a la derecha del centro: se compensa
       con el mismo valor de sangría a la izquierda. */
    text-indent: 0.28em;
    font-variant-numeric: tabular-nums;
}

.cuenta-web-form button {
    margin-top: 8px;
    width: 100%;
    font-family: var(--display, inherit);
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    background: var(--tinta, #1a1a1a);
    border: 0;
    border-radius: 12px;
    padding: 15px;
    cursor: pointer;
    min-height: 52px;
}
.cuenta-web-form button:hover { opacity: 0.88; }

/* Lo secundario NO parece un botón: con dos botones iguales, el
   comprador no sabe cuál es el que lo hace entrar. */
.cuenta-web-secundario { margin-top: 14px; text-align: center; }
.cuenta-web-secundario button,
.cuenta-web-salir {
    border: 0;
    background: none;
    font-family: inherit;
    font-size: 14px;
    color: inherit;
    opacity: 0.7;
    text-decoration: underline;
    cursor: pointer;
    padding: 8px;
}
.cuenta-web-secundario button:hover,
.cuenta-web-salir:hover { opacity: 1; }

.cuenta-web-salir { margin-top: 18px; padding-left: 0; }

/* ---- El enlace a la cuenta, en el encabezado de cada modelo ----
   Sin colores propios: hereda el del encabezado donde se cuelgue,
   que es distinto en los tres.

   EN LA COMPUTADORA ES TEXTO Y EN EL CELULAR UN ÍCONO, y los dos
   los dibuja `tiendaCuenta()`: acá sólo se elige cuál se ve. Ver
   la nota larga de esa función — el ícono existe porque la ficha
   de producto no tiene cajón donde meter "Mi cuenta". */
.tienda-cuenta {
    display: inline-flex;
    align-items: center;
    color: inherit;
    text-decoration: none;
    font-size: 13px;
    white-space: nowrap;
    flex-shrink: 0;
}
.tienda-cuenta:hover { text-decoration: underline; }

.tienda-cuenta-icono { display: none; }

.tienda-cuenta-icono svg {
    width: 24px;
    height: 24px;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (max-width: 820px) {
    /* El ícono no se subraya: no hay texto que subrayar y el
       subrayado le pasaría por debajo al dibujo. */
    .tienda-cuenta:hover { text-decoration: none; opacity: 0.75; }
    .tienda-cuenta-icono { display: block; }
    .tienda-cuenta-texto { display: none; }
}


/* ===========================================================
   EL PEDIDO — checkout y "mis pedidos"
   ===========================================================
   Mismas reglas que arriba: sólo `--tinta`, y la tipografía se
   hereda del modelo. Los estados usan los tres colores que ya
   están definidos para los avisos, en vez de una paleta nueva
   para tres estados — que es la lección del semáforo de
   vencimientos del ERP.
   =========================================================== */

/* El checkout es más ancho que la pantalla de entrar: acá hay una
   tabla de renglones, y a 380px una descripción larga se parte en
   cuatro líneas. */
.tienda-checkout,
.tienda-pedidos { max-width: 560px; }

.cuenta-web-form select,
.cuenta-web-form textarea {
    font: inherit;
    padding: 10px 12px;
    border: 1px solid rgba(0, 0, 0, 0.18);
    border-radius: 8px;
    background: #fff;
    color: inherit;
    width: 100%;
    box-sizing: border-box;
}
.cuenta-web-form select:focus,
.cuenta-web-form textarea:focus {
    outline: none;
    border-color: var(--tinta);
}

.tienda-resumen { margin-top: 8px; }

.tienda-resumen-tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    margin: 10px 0 4px;
}
.tienda-resumen-tabla td,
.tienda-resumen-tabla th {
    padding: 7px 6px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    text-align: left;
    vertical-align: top;
}
/* Los importes alineados a la derecha y con cifras de ancho fijo:
   una columna de precios que no alinea obliga a leerla número por
   número. `tabular-nums` es lo que hace que el 1 ocupe lo mismo
   que el 8. */
.tienda-resumen-tabla .num {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.tienda-resumen-tabla tfoot th {
    border-bottom: none;
    border-top: 2px solid rgba(0, 0, 0, 0.18);
    font-size: 15px;
}

/* Los datos para transferir se pegan y se copian, así que van en
   monoespaciada y con el texto seleccionable —el CBU se copia, no
   se tipea— sobre un fondo que los separa del resto. */
.tienda-datos-transf {
    margin: 10px 0;
    padding: 10px 12px;
    background: rgba(0, 0, 0, 0.04);
    border-radius: 8px;
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    font-size: 13px;
    line-height: 1.6;
    user-select: text;
    word-break: break-word;
}

/* ---- Mis pedidos ---- */
.tienda-pedido {
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 14px;
}
/* El estado se dice CON PALABRAS y el color sólo lo acompaña: un
   pedido cancelado no puede depender de que alguien distinga el
   rojo del verde. */
.tienda-pedido-espera { border-left: 4px solid #c9962c; }
.tienda-pedido-ok     { border-left: 4px solid #1d5c38; }
.tienda-pedido-mal    { border-left: 4px solid #97341f; }

.tienda-pedido-cabecera {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 6px;
}
.tienda-pedido-fecha { font-size: 12px; opacity: 0.6; }
.tienda-pedido-estado { margin: 0 0 4px; }

/* El nombre se escribe en MAYÚSCULA, como todo nombre del catálogo del ERP.
   Esto es sólo lo que se ve: el valor lo fuerza `Texto::mayusculas()` en el
   servicio, que es la capa que no se puede saltear. */
.text-upper { text-transform: uppercase; }


/* ===========================================================
   EL PIE LEGAL — arrepentimiento y datos del comercio
   ===========================================================
   Lo dibuja `tiendaDocumentoFin()`, así que aparece en TODAS las
   pantallas de la tienda y en los tres modelos.

   Discreto pero encontrable: el botón de arrepentimiento tiene
   que estar VISIBLE (Res. 424/2020), y esconderlo en un color
   que no se lee sería cumplir la letra y no la cosa. Va con el
   subrayado puesto, que es lo que hace que se vea como algo que
   se puede tocar sin necesitar un color de marca —que acá no se
   puede usar: el acento se llama distinto en cada modelo—.
   =========================================================== */

.tienda-legal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 18px;
    max-width: 1100px;
    margin: 40px auto 0;
    padding: 18px;
    border-top: 1px solid rgba(0, 0, 0, 0.12);
    font-size: 13px;
    line-height: 1.5;
}

.tienda-arrepentimiento {
    color: inherit;
    text-decoration: underline;
    font-weight: 600;
    white-space: nowrap;
}

.tienda-legal-enlace {
    color: inherit;
    text-decoration: underline;
    white-space: nowrap;
}

/* La leyenda toma el lugar que queda y baja sola en pantalla
   angosta: es texto de lectura, no un control. */
.tienda-legal-nota {
    flex: 1 1 260px;
    opacity: 0.72;
}

/* =====================================================================
   EL PAGINADOR DEL CATÁLOGO
   =====================================================================
   Vive acá y no en la hoja de cada modelo porque es uno solo para los tres
   (ver `plantillas/_paginacion.php`). USA SÓLO `--tinta`, que es la única
   variable que los tres declaran con ese nombre: el acento se llama distinto
   en cada uno y nombrarlo lo ataría a un modelo.

   El color sale de `currentColor` y las opacidades, así que el paginador toma
   el tono del modelo sin conocerlo. Es el mismo recurso con el que los iconos
   de la columna de acciones del ERP heredan el color en vez de fijarlo.
   ===================================================================== */
.tienda-paginacion {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 28px 0 8px;
    color: var(--tinta);
    font-size: 0.95rem;
}

/* 40px de lado: es la medida mínima con la que un dedo acierta sin
   agrandar la pantalla, y acá el paginador se usa sobre todo en el
   teléfono. Los números y los saltos miden lo mismo para que la fila no
   se desalinee cuando la página actual pasa de 9 a 10. */
.tienda-pag-num,
.tienda-pag-salto {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border: 1px solid currentColor;
    border-radius: 6px;
    color: inherit;
    text-decoration: none;
    line-height: 1;
}

.tienda-pag-num { padding: 0 8px; }

.tienda-pag-num:hover,
.tienda-pag-salto:hover { opacity: 0.7; }

/* La página actual va sólida y NO es un enlace: un botón que lleva a donde
   ya estás es un clic que no hace nada, y en un paginador eso se lee como
   que no funciona. */
.tienda-pag-actual {
    background: var(--tinta);
    color: #fff;
    border-color: var(--tinta);
    font-weight: 600;
}

/* Apagado, no ausente: en la primera página el "Anterior" tiene que seguir
   ocupando su lugar, o los números se corren y la fila salta al pasar de
   página. Es la misma regla que el hueco de la columna de acciones. */
.tienda-pag-apagado {
    opacity: 0.35;
    border-style: dashed;
    cursor: default;
}

.tienda-pag-hueco {
    padding: 0 2px;
    opacity: 0.5;
}

/* El total se va al final de la fila y baja solo en pantalla angosta:
   es texto de lectura, no un control. */
.tienda-pag-total {
    margin-left: auto;
    opacity: 0.7;
}

@media (max-width: 520px) {
    .tienda-pag-total {
        margin-left: 0;
        flex-basis: 100%;
    }
}

/* =====================================================================
   ENTRAR CON GOOGLE (maestra 008)
   =====================================================================
   El separador y el botón del atajo. Usan `--tinta` como el resto de esta
   hoja: el acento se llama distinto en cada modelo y nombrarlo ataría la
   pantalla de ingreso a uno solo.

   El botón va SECUNDARIO —borde, no relleno— a propósito: el camino que anda
   siempre y en toda instalación es el código por correo, y ése es el que
   tiene que verse como la acción principal. Google es el atajo.
   ===================================================================== */
.cuenta-web-separador {
    margin: 16px 0 12px;
    text-align: center;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.5;
}

.cuenta-web-google {
    width: 100%;
    /* 48px: la medida con la que un dedo acierta sin agrandar la pantalla.
       La mayoría de los compradores entra desde el celular. */
    min-height: 48px;
}

/* =====================================================================
   EL LOGO DEL COMERCIO (088)
   =====================================================================
   NO HAY DOS CASOS: HAY UNO CON `max-height`.

   Un logo cuadrado y uno apaisado se resuelven con la misma regla — la
   ALTURA la fija el header y el ANCHO sale de la imagen—. El cuadrado
   ocupa un cuadrado, el apaisado ocupa lo que mida, y el header no se
   deforma con ninguno de los dos. Por eso no hay ninguna columna en la
   base que diga qué forma tiene: la proporción ya está en el archivo.

   `object-fit: contain` para el caso raro y real: un logo con la
   proporción muy fuera de lo normal se achica en vez de recortarse. A un
   producto se le puede recortar el fondo; a una marca, no.
   ===================================================================== */
.tienda-logo {
    display: block;
    height: auto;
    max-height: 44px;
    max-width: 190px;
    width: auto;
    object-fit: contain;
}

/* El header del celular es más bajo: un logo de 44px se come la barra. */
@media (max-width: 700px) {
    .tienda-logo { max-height: 34px; max-width: 140px; }
}

/* =====================================================================
   EL HERO DE LA PORTADA (088)
   =====================================================================
   SIN IMAGEN NO DESAPARECE: cae a una banda con el color de la marca, que
   es un hero digno y el que va a tener casi toda tienda el primer día. Lo
   que lo apaga es el interruptor, no un archivo que falta — si la
   ausencia de imagen lo apagara, el comercio lo prendería, no vería nada
   y no tendría cómo saber por qué.

   El velo oscuro de `.con-imagen` NO es decoración: es lo único que
   garantiza que el título se lea sobre CUALQUIER foto que suban. Sin él,
   una imagen clara deja el texto blanco invisible, y eso se descubre con
   la tienda publicada.
   ===================================================================== */
.tienda-hero {
    position: relative;
    background: var(--tinta);
    color: #fff;
    background-size: cover;
    background-position: center;
    padding: clamp(38px, 8vw, 84px) 20px;
    text-align: center;
}

.tienda-hero.con-imagen::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.30), rgba(0,0,0,0.55));
}

.tienda-hero-caja {
    position: relative;   /* por encima del velo */
    max-width: 720px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.tienda-hero-titulo {
    font-family: var(--display, inherit);
    /* `clamp` y no un tamaño fijo: el hero se mira en un celular de 360px
       y en un monitor de 27", y un solo número no sirve para los dos. */
    font-size: clamp(1.7rem, 4.6vw, 3rem);
    line-height: 1.08;
    letter-spacing: -0.01em;
    margin: 0;
    text-wrap: balance;
}

.tienda-hero-bajada {
    font-size: clamp(0.98rem, 1.7vw, 1.15rem);
    line-height: 1.5;
    margin: 0;
    max-width: 56ch;
    opacity: 0.94;
}

.tienda-hero-boton {
    display: inline-block;
    margin-top: 4px;
    padding: 13px 30px;
    background: #fff;
    color: var(--tinta);
    border-radius: 999px;
    font-weight: 600;
    text-decoration: none;
    /* 48px de alto efectivo: la medida con la que un dedo acierta. */
    min-height: 48px;
    line-height: 22px;
}

.tienda-hero-boton:hover { opacity: 0.9; }

/* =====================================================================
   EL PIE CON LOS DATOS DEL COMERCIO (088)
   =====================================================================
   Tres columnas —quién vende, cómo se lo contacta, y los derechos del
   comprador— que en el celular se apilan. Usa `currentColor` y `--tinta`
   y nada más: el acento se llama distinto en cada modelo, así que
   nombrarlo ataría este pie a uno solo. Es la misma regla con la que el
   paginador toma el tono del modelo sin conocerlo.
   ===================================================================== */
.tienda-pie {
    margin-top: 48px;
    padding: 34px 20px calc(130px + env(safe-area-inset-bottom));
    background: var(--tinta);
    color: #fff;
    font-size: 0.88rem;
    line-height: 1.55;
}

.tienda-pie-caja {
    max-width: 1180px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 26px 34px;
}

.tienda-pie-titulo {
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 0.78rem;
    opacity: 0.72;
    margin-bottom: 8px;
}

.tienda-pie-dato { opacity: 0.92; }
.tienda-pie-dato a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.28); }
.tienda-pie-dato a:hover { border-bottom-color: currentColor; }

/* El botón de arrepentimiento es obligatorio (Res. 424/2020) y por eso se
   ve como un botón y no como un renglón más: tiene que encontrarse. */
.tienda-arrepentimiento {
    display: inline-block;
    margin-bottom: 10px;
    padding: 9px 16px;
    border: 1px solid rgba(255,255,255,0.55);
    border-radius: 8px;
    color: inherit;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.85rem;
}
.tienda-arrepentimiento:hover { background: rgba(255,255,255,0.12); }

/* =====================================================================
   EL AVISO DE "SE AGREGÓ" (toast)
   =====================================================================
   Sin esto, tocar "agregar" cambia un número chico en una barra de abajo
   y nada más: en el celular eso queda fuera del campo visual y se lee
   como que el toque no se registró — que es exactamente lo que hace que
   alguien lo toque tres veces y termine con tres unidades.

   ABAJO Y NO ARRIBA: es donde está el pulgar y donde ya vive la barra del
   pedido, así que la confirmación aparece cerca de lo que confirma. En un
   monitor sube a la esquina, que es donde no tapa el catálogo.

   `aria-live="polite"` para que un lector de pantalla lo anuncie sin
   interrumpir lo que esté leyendo.
   ===================================================================== */
.tienda-toast {
    position: fixed;
    left: 50%;
    bottom: calc(84px + env(safe-area-inset-bottom));
    transform: translate(-50%, 14px);
    z-index: 60;

    display: flex;
    align-items: center;
    gap: 10px;
    max-width: min(420px, calc(100vw - 32px));

    padding: 12px 18px;
    border-radius: 12px;
    background: var(--tinta);
    color: #fff;
    box-shadow: 0 10px 30px rgba(0,0,0,0.22);

    font-size: 0.92rem;
    line-height: 1.35;

    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.tienda-toast.visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* El tilde va dibujado y no como emoji: cada sistema operativo pinta el
   suyo con distinto alto y el renglón deja de alinear. Es el mismo motivo
   por el que los iconos del ERP son SVG y no emojis. */
.tienda-toast-tilde {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    color: var(--tinta);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 12px;
}

.tienda-toast-texto { min-width: 0; }
.tienda-toast-texto strong { font-weight: 600; }

@media (min-width: 900px) {
    .tienda-toast {
        left: auto;
        right: 24px;
        bottom: 24px;
        transform: translate(0, 14px);
    }
    .tienda-toast.visible { transform: translate(0, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .tienda-toast { transition: none; }
}

/* =====================================================================
   EL DETALLE DEL PRODUCTO (090)
   =====================================================================
   Va en la hoja del ANDAMIO y no en la de cada modelo por lo mismo que el
   paginador: es cromo, no marcado del rubro, y escrito en las dos fichas se
   separa solo — el día que alguien arregle el interlineado lo arreglaría en
   una y en la otra no.

   No nombra ninguna variable de color: la línea va con el `rgba` negro que ya
   usan los otros ocho separadores de esta hoja, y el texto hereda el color y la
   tipografía del modelo. `color-mix()` sería más elegante y no se usa en ningún
   otro lado del proyecto: en un navegador que no lo entiende la declaración
   entera se descarta y el bloque queda SIN línea, o sea peor que el rgba.
   ===================================================================== */

.detalle-producto {
    margin: 20px 0 0;
    padding-top: 18px;
    border-top: 1px solid rgba(0, 0, 0, 0.12);
    max-width: 62ch;   /* el renglón largo cansa: se lee peor que el texto chico */
}

.detalle-producto h2 {
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.62;
}

.detalle-producto p {
    margin: 0;
    font-size: 15px;
    line-height: 1.62;
    /* El texto viene de un textarea: puede traer palabras largas (un código,
       una URL) que en un teléfono desbordarían la columna. */
    overflow-wrap: anywhere;
}

/* ===========================================================
   EL CARRITO DE LA CABECERA
   ===========================================================
   Lo dibuja `tiendaCarritoBoton()` y lo estiliza esta hoja, que
   es común a los tres modelos. Sólo `--tinta` y `currentColor`:
   el acento se llama distinto en cada uno (`--senal`, `--jade`,
   `--fuego`) y nombrarlo ataría el andamio a un modelo.

   ANTES EL CARRITO ERA SÓLO LA BARRA DE ABAJO, y en escritorio
   eso deja la puerta al pedido fuera del campo visual: se agrega
   algo y hay que buscar dónde quedó. Arriba es donde la busca
   cualquiera que compró alguna vez por internet.
   =========================================================== */

/* SÓLO EL ÍCONO, sin el rótulo "Mi carrito" que llevaba debajo.
   El carrito de una tienda es el dibujo que todo el mundo busca en
   esa esquina desde hace veinte años, y el rótulo costaba dos
   renglones de alto en una cabecera que en el celular queda fija
   arriba — o sea que se lo comía al catálogo, que es a lo que el
   comprador vino. Lo que dice de qué es sigue estando en el
   `aria-label`, que es lo que lee quien no ve el ícono. */
.tienda-carrito {
    display: inline-flex;
    align-items: center;
    color: inherit;
    text-decoration: none;
    line-height: 1.1;
    flex-shrink: 0;
}

.tienda-carrito:hover { opacity: 0.75; }

/* `relative` para la burbuja, que va colgada de la esquina del ícono. */
.tienda-carrito-icono { position: relative; display: block; }

.tienda-carrito-icono svg {
    width: 24px;
    height: 24px;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* LA BURBUJA NO PUEDE USAR `currentColor` DE FONDO, y es la trampa de esto:
   `currentColor` ES el color del texto del propio elemento, así que un fondo de
   `currentColor` con la letra heredada deja el número invisible. Van los dos
   declarados: la tinta del modelo de fondo —la única variable que los tres
   tienen— y blanco arriba, que es lo que corresponde sobre cualquiera de las
   tres, porque las tres son oscuras. */
.tienda-carrito-burbuja {
    position: absolute;
    top: -6px;
    right: -9px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--tinta);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
}

/* En cero la burbuja se ve más apagada: sigue estando —el tamaño de la
   cabecera no puede cambiar cuando entra el primer producto— pero no compite
   con el resto de la barra cuando no hay nada que contar. */
.tienda-carrito-burbuja.vacio { opacity: 0.45; }


/* ===========================================================
   LA BARRA DE ABAJO: SÓLO EN CELULAR
   ===========================================================
   Con el carrito arriba, en escritorio las dos dicen lo mismo y
   la de abajo tapa el último renglón del catálogo. En el celular
   se queda: es la zona del pulgar y es donde de verdad se toca.

   NO HACE FALTA `!important` y conviene saber por qué: `carrito.js`
   escribe `style.display = ''` cuando hay algo adentro, o sea que
   BORRA la declaración en línea en vez de poner una — y entonces
   manda la hoja. Cuando el carrito está vacío escribe `'none'`,
   que dice lo mismo que esta regla.
   =========================================================== */

@media (min-width: 821px) {
    .barra-pedido { display: none; }
}


/* ===========================================================
   EL CAJÓN DE CATEGORÍAS DEL CELULAR
   ===========================================================
   El cajón ES el `<nav>` de categorías de cada modelo, movido de
   lugar: acá no se dibuja ninguna categoría. Con un segundo menú
   escrito para el celular habría dos listas y el día que una sume
   algo la otra queda vieja.

   Por eso los selectores son `[data-menu-categorias]` y no
   `.rubros` ni `.nav-izquierda`: Nueva York y Tokio usan la
   primera y Miami la segunda, y el andamio no puede conocerlas.

   EL CAJÓN ES UNA HOJA BLANCA a propósito. Los tres modelos
   tienen la barra de categorías clara con letra oscura, así que
   `#fff` + `--tinta` funciona en los tres; un modelo con la barra
   oscura tendrá que declarar su propio fondo acá adentro, y este
   comentario es para que el que lo escriba sepa dónde mirar.
   =========================================================== */

.tienda-burger {
    display: none;              /* lo prende la media query */
    align-items: center;
    background: none;
    border: 0;
    padding: 8px 10px 8px 0;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

/* LAS TRES RAYAS SON UN SVG Y NO SE PUEDEN DEFORMAR.
   Eran una caja de 18×12 hecha con `border-top` y `border-bottom`, y como es un
   ítem flex con el `flex-shrink: 1` de fábrica, en una cabecera angosta la fila
   la comprimía: las rayas salían de distinto largo. Con la medida puesta acá y
   `flex-shrink: 0`, el dibujo manda sobre lo que le quede a la fila.

   Sigue sin haber CDN ni fuente de iconos, que es el criterio de siempre: la
   tienda de un cliente puede estar detrás de un proxy que no llega a ningún
   lado, y un ícono que no carga deja un cuadrado vacío donde va el menú. */
.tienda-burger-rayas {
    width: 20px;
    height: 16px;
    display: block;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
}

.tienda-velo {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 55;
    opacity: 0;
    /* Apagado NO EXISTE para el mouse: una capa invisible a pantalla completa
       se comería todos los toques de la tienda. Es la misma regla que el velo
       de `partials/cargando.php` en el ERP. */
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

body.menu-categorias-abierto .tienda-velo {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

@media (max-width: 820px) {
    .tienda-burger { display: inline-flex; }

    /* Con el cajón abierto la pantalla de atrás no scrollea: si no, el dedo
       que quiere recorrer las categorías termina moviendo el catálogo. */
    body.menu-categorias-abierto { overflow: hidden; }

    [data-menu-categorias] {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        width: min(78vw, 300px);
        z-index: 60;
        background: #fff;
        color: var(--tinta);
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 14px 0;
        box-shadow: 2px 0 18px rgba(0, 0, 0, 0.18);
        transform: translateX(-100%);
        transition: transform 0.22s ease;
    }

    body.menu-categorias-abierto [data-menu-categorias] { transform: translateX(0); }

    /* El contenedor de adentro es distinto en cada modelo —`.rubros-fila`, un
       `<form>`, o el propio `<nav>`— así que se aplanan los dos niveles en vez
       de nombrar ninguno. */
    [data-menu-categorias],
    [data-menu-categorias] > *,
    [data-menu-categorias] > * > form {
        display: block;
    }

    /* Una categoría por renglón, a lo ancho: es lo que hace que el dedo no
       tenga que apuntar. 44px de alto, que es la medida de lo que se toca. */
    [data-menu-categorias] a,
    [data-menu-categorias] button {
        display: block;
        width: 100%;
        min-height: 44px;
        text-align: left;
        padding: 12px 20px;
        border: 0;
        border-radius: 0;
        border-bottom: 1px solid rgba(0, 0, 0, 0.07);
        background: none;
        color: inherit;
        font: inherit;
        white-space: normal;
    }

    /* La activa se marca con una barra al costado y no con el subrayado ni el
       fondo lleno que usa cada modelo en su barra horizontal: acá el renglón
       ya ocupa todo el ancho y un fondo lleno se lee como un botón apretado. */
    [data-menu-categorias] a.activo,
    [data-menu-categorias] button.activo {
        box-shadow: inset 3px 0 0 currentColor;
        font-weight: 700;
        background: none;
        color: inherit;
    }
}


/* ===========================================================
   LAS CATEGORÍAS EN UNA SOLA LÍNEA, CON CHEVRON
   ===========================================================
   En la computadora la barra de categorías no se parte en tres
   renglones: queda en UNA línea que se desliza a lo ancho, con
   el scroll escondido y un chevron redondo en cada punta.

   POR QUÉ EL CHEVRON Y NO SÓLO EL SCROLL. Una barra que se
   desliza sin barra de scroll no tiene cómo decir que sigue: con
   el mouse no hay gesto de deslizar —hay rueda, que scrollea la
   página— así que las categorías de la derecha son invisibles y
   además inalcanzables. El chevron es la única señal, y por eso
   aparece SÓLO cuando de verdad hay algo más allá del borde.

   POR QUÉ ESTÁ EN EL ANDAMIO Y NO EN CADA MODELO. Es cromo: un
   circulito con una flecha, sin nada del rubro adentro. Escrito
   tres veces se separa solo, y el día que alguien arregle el
   arrastre en uno los otros dos se quedan viejos — es lo mismo
   que ya se decidió con el paginador.

   Sólo `--tinta` y `currentColor`: el acento se llama distinto
   en cada modelo y nombrarlo ataría el andamio a uno.

   =======================================================
   LA PISTA SE DECLARA, NO SE ADIVINA
   =======================================================
   Qué elemento scrollea es distinto en los tres —el corralón
   tiene un `.rubros-fila` adentro, la boutique usa el `<nav>`
   mismo y el catálogo rápido un `<form>`— así que cada plantilla
   marca el suyo con `data-rubros-pista`. Deducirlo acá sería
   adivinar, y el día que un modelo agregue un `<div>` en el
   medio la barra dejaría de deslizarse sin ninguna regla rota
   que mirar.

   VA SÓLO EN LA COMPUTADORA: abajo de 821px este mismo `<nav>`
   ES el cajón, o sea una columna vertical, y ahí una fila que se
   desliza a lo ancho no significa nada. Por eso las reglas van
   adentro de la media query y no sueltas con un `override`
   después: el cajón se dibuja más arriba en esta hoja y ganaría
   por orden. */

@media (min-width: 821px) {
    [data-menu-categorias] { position: relative; }

    [data-rubros-pista] {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;          /* Firefox */
        -ms-overflow-style: none;       /* Edge viejo */
    }

    [data-rubros-pista]::-webkit-scrollbar { display: none; }

    /* Sin esto, los chips se comprimen para entrar todos en el
       ancho visible en vez de desbordar: la barra "entra" siempre
       y no hay nada que deslizar — con los nombres largos
       apretados a la mitad, que es peor que el problema. */
    [data-rubros-pista] > * { flex: 0 0 auto; }

    .tienda-rubros-flecha {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 2;
        width: 30px;
        height: 30px;
        border-radius: 999px;
        border: 1px solid rgba(0, 0, 0, 0.12);
        background: #fff;
        color: var(--tinta);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        cursor: pointer;
        box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12);
    }

    .tienda-rubros-flecha:hover { background: #f4f4f4; }

    .tienda-rubros-flecha svg {
        width: 16px;
        height: 16px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .tienda-rubros-flecha-izq  { left: 6px; }
    .tienda-rubros-flecha-der  { right: 6px; }

    /* LA QUE NO PUEDE MOVER NADA SE ESCONDE, y acá sí —al revés
       que en el carrusel de similares, donde se apagan—: éstas
       flotan ENCIMA de las categorías, así que una flecha muerta
       taparía un rubro que se podría tocar. Escondidas no corren
       a la otra de lugar, porque las dos están ancladas a su
       punta. */
    .tienda-rubros-flecha[hidden] { display: none; }
}


/* ===========================================================
   LA BARRA DE ANUNCIO (092)
   ===========================================================
   La franja de arriba de todo: "Envío gratis a partir de
   $15.000". La dibuja `tiendaDocumentoInicio()`, así que está
   en TODAS las pantallas de la tienda y no sólo en la portada.

   Va con la tinta del modelo de fondo y letra clara. Es la
   única variable que los tres tienen, y de paso es lo que hace
   que la franja se lea como parte de la tienda y no como un
   cartel pegado encima.
   =========================================================== */

.tienda-anuncio {
    background: var(--tinta);
    color: #fff;
    text-align: center;
    padding: 7px 16px;
    font-size: 12px;
    letter-spacing: 0.03em;
    line-height: 1.35;
}


/* ===========================================================
   LA TIRA DE CONFIANZA (092)
   ===========================================================
   Hasta cuatro bloques —ícono, título y bajada— debajo del
   hero. Es lo que contesta, antes de que el comprador
   pregunte, cómo llega, cómo se paga y qué pasa si no le
   gusta.

   EN CELULAR NO SE APILA EN CUATRO RENGLONES: scrollea a lo
   ancho. Apilados ocupan media pantalla arriba del catálogo, y
   lo que el comprador vino a ver son los productos. Con el
   scroll horizontal se ve el primero y medio del segundo, que
   es lo que dice que hay más y no tapa nada.
   =========================================================== */

.tienda-beneficios {
    background: var(--tinta);
    /* 6% de blanco encima de la tinta: un tono apenas distinto de la franja
       de anuncio, para que las dos no se lean como una sola banda. */
    background-image: linear-gradient(rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.06));
    color: #fff;
}

.tienda-beneficios-fila {
    max-width: 1280px;
    margin: 0 auto;
    padding: 16px 20px;
    display: flex;
    gap: 28px;
    justify-content: space-between;
}

.tienda-beneficio {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1 1 0;
}

.tienda-beneficio-icono svg {
    width: 26px;
    height: 26px;
    display: block;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    /* Apagado a propósito: el ícono ubica, el que tiene que leerse es el
       título. A opacidad plena compiten y gana el dibujo, que no dice nada. */
    opacity: 0.8;
}

.tienda-beneficio-texto {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.tienda-beneficio-texto strong {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.25;
}

.tienda-beneficio-texto span {
    font-size: 11.5px;
    opacity: 0.72;
    line-height: 1.3;
}

@media (max-width: 820px) {
    .tienda-beneficios-fila {
        padding: 12px 16px;
        gap: 22px;
        justify-content: flex-start;
        overflow-x: auto;
        /* Un renglón por bloque y no una tarjeta por pantalla: se para en cada
           uno al deslizar, así ninguno queda cortado al soltar el dedo. */
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
    }
    .tienda-beneficios-fila::-webkit-scrollbar { display: none; }
    .tienda-beneficios-fila { scrollbar-width: none; }

    .tienda-beneficio {
        flex: 0 0 auto;
        scroll-snap-align: start;
    }
    /* Los textos dejan de envolver: en una tira que scrollea, un bloque de
       tres renglones estira los otros tres. */
    .tienda-beneficio-texto strong,
    .tienda-beneficio-texto span { white-space: nowrap; }
}


/* ===========================================================
   "¡SOLO QUEDAN 3 UNIDADES!" (B)
   ===========================================================
   El aviso de stock bajo. Va en el andamio y no en cada modelo
   porque la urgencia se lee igual en los tres: lo que cambia
   entre ellos es el catálogo, no qué tan poco queda.

   NO USA `--tinta` NI EL ACENTO DEL MODELO, y es lo único de
   esta hoja que declara un color propio. Los dos motivos:

   · El acento de cada modelo YA ES el del precio y el del
     botón de agregar. Con el mismo color, el aviso se lee como
     un renglón más de la tarjeta y deja de avisar.
   · La urgencia es roja en todos lados. Un comprador no tiene
     que aprender qué significa el naranja de ESTA tienda.

   Es el mismo criterio por el que el consultor de precios del
   POS es violeta: no se parece a ninguna otra pantalla del
   sistema justamente para que no se confunda con una venta.
   =========================================================== */

.tienda-pocas {
    display: inline-block;
    margin: 6px 0;
    padding: 3px 9px;
    border-radius: 999px;
    background: #fdecea;
    color: #a3231b;
    border: 1px solid #f3c6c1;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.01em;
    /* La tarjeta puede ser angosta y el texto llega a dos renglones: sin esto
       el aviso se estiraría a lo ancho y empujaría el precio. */
    max-width: 100%;
}


/* ===========================================================
   EL REGALO SOBRE LA FOTO (094)
   ===========================================================
   La contraparte de `.tienda-pocas`: aquél es un aviso al lado
   del precio y éste va ENCIMA de la imagen, porque lo que hace
   comprar es ver qué se lleva de más.

   `.tienda-lienzo` es la clase de andamio que las plantillas le
   ponen al contenedor de la foto —cada modelo lo llama distinto:
   .producto-imagen, .lienzo, .miniatura— y lo único que hace es
   darle el `position: relative` contra el que esto se posiciona.
   Sin ella el cartel se colgaría del primer ancestro posicionado,
   que puede ser la tarjeta entera o el body. Es el mismo recurso
   que `.barra-pedido`: una clase del andamio dentro del marcado
   del modelo.

   NO USA EL ACENTO DEL MODELO, por lo mismo que el aviso de stock
   bajo: el acento ya es el del precio y el del botón de agregar,
   así que con él el cartel se leería como un renglón más de la
   tarjeta en vez de como lo que es. El verde dice "te llevás algo
   de más" en cualquier tienda, sin que nadie tenga que aprender
   qué significa el color de ÉSTA.
   =========================================================== */

.tienda-lienzo { position: relative; }

.tienda-regalo {
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid #bfe3c8;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    /* La foto de abajo puede ser de cualquier color: sin el fondo casi opaco,
       el cartel se vuelve ilegible justo en los productos que mejor se ven. */
    backdrop-filter: blur(2px);
    text-align: left;
    /* Es un cartel, no un botón: el clic tiene que seguir siendo el del enlace
       de la tarjeta, que es lo que lleva a la ficha. */
    pointer-events: none;
}

.tienda-regalo-foto {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 7px;
    background-color: #eef6f0;
    background-size: cover;
    background-position: center;
    border: 1px solid #cfe6d6;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tienda-regalo-foto svg {
    width: 19px;
    height: 19px;
    stroke: #2e7d4f;
    fill: none;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tienda-regalo-texto {
    min-width: 0;
    line-height: 1.25;
}

.tienda-regalo-texto strong {
    display: block;
    font-size: 11.5px;
    font-weight: 800;
    color: #1f6b41;
    letter-spacing: 0.01em;
}

/* El nombre del regalo se recorta a un renglón: en una tarjeta angosta, una
   descripción larga empujaría el cartel hasta taparle media foto al producto,
   que es justamente lo que vino a acompañar. La descripción entera queda en el
   `title`. */
.tienda-regalo-texto span {
    display: block;
    font-size: 10.5px;
    color: #4a5a52;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* En la ficha la foto es grande y el cartel puede respirar. */
.tienda-ficha-regalo .tienda-regalo {
    position: static;
    display: inline-flex;
    margin-top: 10px;
    padding: 8px 10px;
    box-shadow: none;
}

.tienda-ficha-regalo .tienda-regalo-texto strong { font-size: 13px; }
.tienda-ficha-regalo .tienda-regalo-texto span   { font-size: 12px; white-space: normal; }
.tienda-ficha-regalo .tienda-regalo-foto { width: 44px; height: 44px; }


/* ===========================================================
   EL CARRUSEL DE SIMILARES (pie de la ficha)
   ===========================================================
   Como el paginador y el pie: cromo del andamio, con --tinta y
   currentColor, así toma el tono del modelo sin conocerlo.
   =========================================================== */

.tienda-similares {
    margin: 32px 0 8px;
    /* Se despega del bloque de arriba con una línea y no con aire solo: la
       ficha termina en el detalle del producto y esto es otra cosa. */
    border-top: 1px solid rgba(0, 0, 0, 0.09);
    padding-top: 20px;
}

.tienda-similares-encabezado {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.tienda-similares-encabezado h2 {
    margin: 0;
    font-size: 17px;
    letter-spacing: 0.01em;
    color: var(--tinta);
}

.tienda-similares-flechas { display: flex; gap: 6px; }

.tienda-similares-flecha {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    background: transparent;
    color: var(--tinta);
    border: 1px solid rgba(0, 0, 0, 0.16);
    border-radius: 999px;
}

.tienda-similares-flecha svg {
    width: 15px;
    height: 15px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tienda-similares-flecha:disabled { opacity: 0.3; cursor: default; }

.tienda-similares-pista {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    /* Cada tarjeta se acomoda sola al soltar el dedo, que es lo que hace que un
       carrusel no quede a medio camino entre dos productos. */
    scroll-snap-type: x proximity;
    /* El foco del teclado dibuja su anillo fuera de la tarjeta: sin este
       colchón, la de arriba y la de abajo lo recortan. */
    padding: 4px 2px 10px;
    scrollbar-width: thin;
}

.tienda-similar {
    scroll-snap-align: start;
    /* NO CRECE NI SE ENCOGE: `flex: 0 0` es lo que hace que la última quede
       cortada a la derecha, y ese corte es lo único que dice que hay más. Con
       `flex: 1` las tarjetas se repartirían el ancho y el carrusel se leería
       como una grilla de cuatro. */
    flex: 0 0 150px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-decoration: none;
    color: inherit;
}

.tienda-similar-foto {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 130px;
    border-radius: 10px;
    background-color: rgba(0, 0, 0, 0.04);
    background-size: cover;
    background-position: center;
    border: 1px solid rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.tienda-similar-agua {
    padding: 8px;
    font-size: 10.5px;
    line-height: 1.3;
    text-align: center;
    opacity: 0.55;
    /* Sin foto, el nombre hace de marca de agua — pero acotado, o una
       descripción larga desborda la caja y empuja el precio. */
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Dos renglones y no uno: a un ancho de 150px, un renglón corta casi todos los
   nombres de este catálogo justo donde empiezan a distinguirse ("SHAMPOO
   NUTRI…"). Y el alto queda FIJO para que los precios de la fila alineen. */
.tienda-similar-nombre {
    font-size: 12px;
    line-height: 1.3;
    min-height: 2.6em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tienda-similar-precio {
    font-weight: 800;
    font-size: 14px;
    color: var(--tinta);
}

@media (max-width: 820px) {
    .tienda-similares { margin-top: 24px; }
    .tienda-similar { flex-basis: 132px; }
    .tienda-similar-foto { height: 112px; }
    /* En el celular el carrusel se recorre con el dedo: las flechas ocupan
       lugar en el encabezado y no las usa nadie. */
    .tienda-similares-flechas { display: none; }
}


/* ===========================================================
   LAS ESTRELLAS DE LA TIENDA (094)
   ===========================================================
   Dos widgets con el mismo dibujo y usos opuestos: las que se
   ELIGEN (radios, en opinar.php) y las que se MUESTRAN (el
   promedio, en la tarjeta y en la ficha).
   =========================================================== */

/* --- Las que se eligen ------------------------------------ */

.tienda-estrellas {
    display: inline-flex;
    /* AL REVÉS, y no es un capricho: los radios se dibujan de 5 a 1 en el
       marcado para poder pintar "esta y todas las anteriores" con el selector
       de hermano siguiente (`~`), que es el único que CSS tiene. Sin esto haría
       falta JavaScript para algo que es puro dibujo. */
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: 2px;
}

/* Los radios existen y funcionan —el teclado y los lectores de pantalla los
   usan— pero no se dibujan: lo que se ve son las etiquetas. */
.tienda-estrellas input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.tienda-estrellas label {
    cursor: pointer;
    line-height: 0;
    padding: 2px;
}

.tienda-estrellas svg {
    width: 30px;
    height: 30px;
    fill: rgba(0, 0, 0, 0.14);
    transition: fill 0.12s;
}

/* La elegida y todas las de su derecha en el marcado —o sea las de menor
   valor, que con el `row-reverse` quedan a su izquierda en pantalla. */
.tienda-estrellas input:checked ~ label svg { fill: #f0a500; }

/* Al pasar el mouse se previsualiza. `:hover ~ label` alcanza a las siguientes
   del marcado por lo mismo que arriba. */
.tienda-estrellas:hover label svg { fill: rgba(0, 0, 0, 0.14); }
.tienda-estrellas label:hover svg,
.tienda-estrellas label:hover ~ label svg { fill: #f0a500; }

/* EL FOCO SE TIENE QUE VER. El radio está escondido, así que sin esto quien
   navega con el teclado no sabe dónde está parado. */
.tienda-estrellas input:focus-visible + label svg {
    outline: 2px solid currentColor;
    outline-offset: 2px;
    border-radius: 4px;
}

/* El texto para los lectores de pantalla: fuera de la vista pero presente. */
.tienda-estrellas-texto {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* --- Las que se muestran ---------------------------------- */

.tienda-puntaje {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    line-height: 1;
}

.tienda-puntaje-estrellas {
    position: relative;
    display: inline-block;
    color: rgba(0, 0, 0, 0.16);
    letter-spacing: 1px;
    white-space: nowrap;
}

/* LA MEDIA ESTRELLA SE DIBUJA CON UN RECORTE, no con un icono aparte: un 4,5
   pintado como 5 redondea en la única dirección que le conviene al que vende, y
   este proyecto no hace eso ni con el redondeo de una etiqueta de góndola. */
.tienda-puntaje-llenas {
    position: absolute;
    inset: 0;
    overflow: hidden;
    color: #f0a500;
    white-space: nowrap;
}

.tienda-puntaje-texto {
    color: var(--tinta);
    font-weight: 700;
}

/* La cantidad va SIEMPRE al lado del promedio y atenuada: "4,5" con dos
   opiniones y con doscientas son cosas distintas, y sin el número el comprador
   no tiene cómo saber cuál está mirando. */
.tienda-puntaje-texto span {
    font-weight: 400;
    opacity: 0.6;
}

/* --- El bloque de opiniones de la ficha -------------------- */

.tienda-opiniones {
    margin: 28px 0 8px;
    border-top: 1px solid rgba(0, 0, 0, 0.09);
    padding-top: 20px;
}

.tienda-opiniones-encabezado {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.tienda-opiniones-encabezado h2 {
    margin: 0;
    font-size: 17px;
    color: var(--tinta);
}

.tienda-opiniones-lista {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.tienda-opiniones-lista li {
    border-left: 3px solid rgba(0, 0, 0, 0.1);
    padding-left: 12px;
}

.tienda-opiniones-lista p { margin: 4px 0 0; font-size: 14px; }

.tienda-opinion-cabeza {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 12px;
}

.tienda-opinion-quien { font-weight: 700; }
.tienda-opinion-fecha { opacity: 0.55; }
.tienda-opiniones-vacio { font-size: 14px; opacity: 0.7; }

/* --- La pantalla de opinar --------------------------------- */

.tienda-opinar {
    max-width: 640px;
    margin: 0 auto;
    padding: 24px 16px 48px;
}

.tienda-opinar h1 { margin: 0 0 8px; }
.tienda-opinar-bajada { margin: 0 0 20px; opacity: 0.75; }

.tienda-opinar-error {
    background: #fdecea;
    color: #a3231b;
    border: 1px solid #f3c6c1;
    border-radius: 8px;
    padding: 10px 12px;
}

.tienda-opinar-bloque {
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    padding: 14px 16px 16px;
    margin: 0 0 16px;
}

.tienda-opinar-bloque legend {
    font-weight: 800;
    padding: 0 6px;
}

.tienda-opinar-ayuda {
    margin: 0 0 8px;
    font-size: 13px;
    opacity: 0.7;
}

.tienda-opinar-producto {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 10px 0;
    border-top: 1px solid rgba(0, 0, 0, 0.07);
}

.tienda-opinar-producto:first-of-type { border-top: 0; }

.tienda-opinar-foto {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    border-radius: 8px;
    background-color: rgba(0, 0, 0, 0.05);
    background-size: cover;
    background-position: center;
}

.tienda-opinar-producto-datos {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tienda-opinar-texto-corto,
.tienda-opinar textarea {
    width: 100%;
    /* 16px o iOS hace zoom solo al enfocar y la pantalla queda corrida con la
       mitad afuera. No es tipografía: es la misma regla del POS móvil. */
    font: inherit;
    font-size: 16px;
    padding: 8px 10px;
    border: 1px solid rgba(0, 0, 0, 0.18);
    border-radius: 8px;
    background: #fff;
    color: var(--tinta);
}

.tienda-opinar-enviar {
    width: 100%;
    min-height: 52px;
    font: inherit;
    font-size: 16px;
    font-weight: 800;
    cursor: pointer;
    border: 0;
    border-radius: 10px;
    background: var(--tinta);
    color: #fff;
}

.tienda-opinar-volver {
    display: inline-block;
    margin-top: 8px;
    color: var(--tinta);
}

/* =====================================================================
   EL ASISTENTE DE LA TIENDA (108)
   =====================================================================
   Botón flotante abajo a la derecha y su panel de chat.

   VA EN ESTA HOJA —el andamio— y no en la de cada modelo, por lo mismo que el
   paginador: lo dibuja `tiendaDocumentoFin()`, o sea que es de la tienda y no
   del rubro. Escrito tres veces se separa solo.

   Y USA ÚNICAMENTE `--tinta`, que es la única variable que los tres modelos
   declaran con ese nombre: el acento se llama distinto en cada uno (`--senal`,
   `--jade`, `--fuego`), así que nombrarlo ataría esta hoja a un modelo. El resto
   sale de `currentColor`.
   ===================================================================== */

.asist-boton {
    position: fixed;
    right: 1rem;
    /* Arriba de la barra del carrito, que en el celular vive abajo de todo y
       mide unos 75px. Sin este despeje el botón le queda encima justo en la
       pantalla donde menos lugar hay. */
    bottom: 5.5rem;
    z-index: 70;

    width: 3.25rem;
    height: 3.25rem;
    /* Cuadrado por `aspect-ratio` y no por dos medidas iguales: es lo que hace
       que el círculo no se deforme cuando la fila de al lado crece. Es la
       lección del botón de la lupa de las fotos. */
    aspect-ratio: 1;
    border-radius: 999px;
    border: none;

    background: var(--tinta);
    color: #fff;
    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .28);
}
.asist-boton svg { width: 1.5rem; height: 1.5rem; }
.asist-boton.abierto { transform: scale(.92); }

.asist-panel {
    position: fixed;
    right: 1rem;
    bottom: 9.5rem;
    z-index: 71;

    width: min(23rem, calc(100vw - 2rem));
    /* Alto acotado: la charla scrollea adentro y el campo de texto queda
       siempre a la vista. Sin el tope, seis respuestas largas empujan el campo
       abajo del pliegue y no hay dónde escribir la séptima. */
    max-height: min(30rem, calc(100vh - 12rem));

    display: flex;
    flex-direction: column;
    background: #fff;
    color: var(--tinta);
    border-radius: .75rem;
    box-shadow: 0 10px 32px rgba(0, 0, 0, .22);
    overflow: hidden;
}

.asist-barra {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .6rem .9rem;
    background: var(--tinta);
    color: #fff;
}
.asist-titulo { font-weight: 600; font-size: .95rem; }

.asist-cerrar {
    background: none;
    border: none;
    color: inherit;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 .25rem;
}

.asist-charla {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: .9rem;
    display: flex;
    flex-direction: column;
    gap: .55rem;
}

.asist-msg {
    max-width: 85%;
    padding: .5rem .7rem;
    border-radius: .7rem;
    font-size: .9rem;
    line-height: 1.45;
    /* La respuesta viene con saltos de línea del modelo y se dibuja con
       `textContent`: sin esto quedan todos en un renglón. Y `break-word` para
       que un código de producto largo no ensanche la burbuja. */
    white-space: pre-wrap;
    overflow-wrap: break-word;
}
.asist-de-ellos { background: rgba(0, 0, 0, .06); align-self: flex-start; }
.asist-de-mi    { background: var(--tinta); color: #fff; align-self: flex-end; }
.asist-esperando { opacity: .6; font-style: italic; }

.asist-form {
    display: flex;
    gap: .4rem;
    padding: .6rem;
    border-top: 1px solid rgba(0, 0, 0, .08);
}
.asist-form input {
    flex: 1 1 auto;
    /* 16px: abajo de eso iOS hace ZOOM SOLO al enfocar y deja la mitad de la
       tienda afuera de la pantalla. Es la misma regla que siguen los campos del
       POS móvil y del editor de horarios. */
    font-size: 16px;
    padding: .5rem .7rem;
    border: 1px solid rgba(0, 0, 0, .18);
    border-radius: .5rem;
    min-width: 0;
}
.asist-form button {
    flex: 0 0 auto;
    width: 2.5rem;
    aspect-ratio: 1;
    border: none;
    border-radius: .5rem;
    background: var(--tinta);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.asist-form button svg { width: 1.05rem; height: 1.05rem; }
.asist-form button:disabled { opacity: .5; cursor: default; }

.asist-nota {
    margin: 0;
    padding: 0 .9rem .6rem;
    font-size: .72rem;
    opacity: .6;
    text-align: center;
}

@media (max-width: 480px) {
    /* En un celular el panel ocupa el ancho útil: con el ancho de escritorio
       quedaría un margen a los costados que no le sirve a nadie, y la burbuja
       de una respuesta larga se parte en demasiados renglones. */
    .asist-panel { right: .5rem; left: .5rem; width: auto; bottom: 9rem; }
}