:root {
    /* Fondo cálido en vez de blanco clínico, y tinta café en vez de negro
       puro. Es el cambio que más hace: la misma estructura deja de parecer
       una hoja de cálculo. Se evita a propósito el crema #F4F1EA con
       terracota, que es el par más reconocible de página hecha por IA. */
    --papel: #fbfaf8;
    --tarjeta: #ffffff;
    --humo: #f2f3f5;
    /* Más marcada de lo que pedía el gusto: con un fondo crema, una línea
       demasiado suave desaparece y las superficies dejan de leerse. */
    --linea: #e0e3e8;
    --tinta: #2d343e;
    --gris: #5f6875;

    /* Verde bosque: marca, entrega y envío gratis. */
    --marca: #465e53;
    --marca-tenue: #e8efea;

    /* Superficies de color pleno y el texto que va ENCIMA de cada una.
       Sin este par, un literal como #fbf9f6 sobre una superficie que cambia
       con el tema deja texto claro sobre fondo claro. Pasó, y no se leía. */
    --marca-solida: #2d343e;
    --sobre-marca: #fbfaf8;
    --tinta-solida: #2d343e;
    --sobre-tinta: #fbfaf8;
    --sobre-calido: #ffffff;

    /* Los cuatro acentos salen del logo: el ámbar, el coral y el azul de los
       productos del carro, y el verde de las hojas. Miden 1,7 a 2,5 a 1 sobre
       el papel, así que NO sirven para texto ni enlaces: van como mancha, con
       tinta encima. */
    --ambar: #fdb941;
    --coral: #fd7a7e;
    --azul: #68a3e3;
    --hoja: #6eb15e;

    /* El logo se da vuelta con el tema: los dos carbones son variables, los
       colores de los productos no. */
    --logo-tinta: #2d343e;
    --logo-tinta-2: #1e252f;

    /* Ámbar quemado: solo ofertas y llamadas a la acción destacadas.
       Nunca decorativo, o deja de significar algo. */
    --calido: #8a5a12;
    --calido-tenue: #fdf3e2;

    --aviso: #8a4b00;
    --aviso-tenue: #fbf1e3;
    --error: #a83b3e;

    --t-xs: 0.75rem;
    --t-s: 0.8125rem;
    --t-m: 0.9375rem;
    --t-l: 1.125rem;
    --t-xl: 1.5rem;
    --t-2xl: 2rem;
    --t-3xl: clamp(2.25rem, 7vw, 3.5rem);

    --gutter: 20px;
    --max: 1180px;
    --tap: 44px;  /* mínimo táctil */

    /* Movimiento: dos curvas y tres duraciones para toda la página.
       Las de CSS por defecto son demasiado débiles para motion deliberado. */
    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
    --t-presion: 140ms;
    --t-rapido: 180ms;
    --t-medio: 260ms;

    --fuente: "Archivo", "Helvetica Neue", Arial, sans-serif;
    --display: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --papel: #14161a;
      --tarjeta: #1c1f25;
      --humo: #1b1e24;
      --linea: #2b3039;
      --tinta: #eef0f3;
      --gris: #98a1af;
      --marca: #8fbfa4;
      --marca-tenue: #1b2a22;
      --marca-solida: #3d6b56;
      --sobre-marca: #eef0f3;
      --tinta-solida: #272c34;
      --sobre-tinta: #eef0f3;
      --sobre-calido: #2a2118;

    /* Los cuatro acentos salen del logo: el ámbar, el coral y el azul de los
       productos del carro, y el verde de las hojas. Miden 1,7 a 2,5 a 1 sobre
       el papel, así que NO sirven para texto ni enlaces: van como mancha, con
       tinta encima. */
    --ambar: #fdb941;
    --coral: #fd7a7e;
    --azul: #68a3e3;
    --hoja: #6eb15e;

    --logo-tinta: #eef0f3;
    --logo-tinta-2: #cfd4db;
      --calido: #e6b36a;
      --calido-tenue: #2a2318;
      --aviso: #e6b36a;
      --aviso-tenue: #2a2318;
      --error: #fd9a9d;
    }
  }

  :root[data-theme="dark"] {
    --papel: #14161a;
    --tarjeta: #1c1f25;
    --humo: #1b1e24;
    --linea: #2b3039;
    --tinta: #eef0f3;
    --gris: #98a1af;
    --marca: #8fbfa4;
    --marca-tenue: #1b2a22;
    --marca-solida: #3d6b56;
    --sobre-marca: #eef0f3;
    --tinta-solida: #272c34;
    --sobre-tinta: #eef0f3;
    --sobre-calido: #2a2118;

    /* Los cuatro acentos salen del logo: el ámbar, el coral y el azul de los
       productos del carro, y el verde de las hojas. Miden 1,7 a 2,5 a 1 sobre
       el papel, así que NO sirven para texto ni enlaces: van como mancha, con
       tinta encima. */
    --ambar: #fdb941;
    --coral: #fd7a7e;
    --azul: #68a3e3;
    --hoja: #6eb15e;

    --logo-tinta: #eef0f3;
    --logo-tinta-2: #cfd4db;
    --calido: #e6b36a;
    --calido-tenue: #2a2318;
    --aviso: #e6b36a;
    --aviso-tenue: #2a2318;
    --error: #fd9a9d;
  }

  * { box-sizing: border-box; }

  body {
    margin: 0;
    background: var(--papel);
    color: var(--tinta);
    font-family: var(--fuente);
    font-size: var(--t-m);
    line-height: 1.6;
    font-variation-settings: "wdth" 100;
  }

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

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

  /* Saltar al contenido: lo primero que recibe el tabulador. */
  .saltar {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--tinta);
    color: var(--papel);
    padding: 12px 18px;
    border-radius: 0 0 8px 0;
    z-index: 100;
  }

  .saltar:focus { left: 0; }

  /* Feedback de presión en todo lo que se puede pulsar. */
  .boton:active,
  .nav__carro:active,
  .filtro:active,
  .categoria:active,
  .cantidad button:active {
    transform: scale(0.97);
  }

  .boton, .nav__carro, .filtro, .categoria, .cantidad button {
    transition: transform var(--t-presion) var(--ease-out),
                opacity var(--t-presion) var(--ease-out),
                background-color var(--t-presion) var(--ease-out);
  }

  .envoltura {
    max-width: var(--max);
    margin: 0 auto;
    padding-inline: var(--gutter);
  }

  /* ---------- Cintillo de anuncios ---------- */

  .cintillo {
    background: var(--tinta-solida);
    color: var(--sobre-tinta);
    font-size: var(--t-s);
    text-align: center;
    position: relative;
    height: 40px;
    overflow: hidden;
  }

  .cintillo__item {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding-inline: 16px;
    opacity: 0;
    transition: opacity var(--t-medio) var(--ease-out);
  }

  .cintillo__item[data-visible="si"] { opacity: 1; }

  .cintillo b { color: #fff; }

  /* Sin movimiento automático: se muestra solo el primero, completo. */
  @media (prefers-reduced-motion: reduce) {
    .cintillo__item { opacity: 0; }
    .cintillo__item:first-child { opacity: 1; }
  }

  /* ---------- Barra superior ---------- */

  /* La barra tiene que LEERSE como una barra. En blanco sobre crema el
     contraste era 1,05:1 —el mismo color a la vista— y desaparecía. */
  .barra {
    position: sticky;
    top: env(safe-area-inset-top, 0px);
    z-index: 50;
    background: var(--tarjeta);
    border-bottom: 1px solid var(--linea);
    box-shadow: 0 1px 0 rgba(28, 25, 23, 0.04), 0 6px 18px rgba(28, 25, 23, 0.05);
  }

  .barra__fila {
    display: flex;
    align-items: center;
    gap: 24px;
    height: 60px;
  }

  .marca {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: var(--display);
    font-variation-settings: "opsz" 40;
    font-size: 1.45rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    background: none;
    border: 0;
    padding: 0;
    min-height: var(--tap);
    color: var(--tinta);
    cursor: pointer;
    flex-shrink: 0;
  }

  /* El icono trae su propio fondo verde y sus esquinas redondeadas, así que
     acá no se le pinta nada encima: solo se reserva su tamaño. */
  /* El logo real, en SVG, definido una sola vez como <symbol> y usado con
     <use> en la barra y en el pie. Los dos carbones son variables, así que
     se da vuelta solo en tema oscuro; los colores de los productos no. */
  .logo-def { position: absolute; width: 0; height: 0; overflow: hidden; }

  /* En claro se ofrece la luna (lo que vas a activar); en oscuro, el sol. */
  .nav__tema .tema-sol { display: none; }
  :root[data-theme="dark"] .nav__tema .tema-sol { display: block; }
  :root[data-theme="dark"] .nav__tema .tema-luna { display: none; }

  /* Para que los controles del navegador (scrollbar, campos) sigan al tema
     elegido y no a la preferencia del sistema. */
  :root[data-theme="light"] { color-scheme: light; }
  :root[data-theme="dark"] { color-scheme: dark; }

  /* Sin aspect-ratio el SVG colapsa a alto cero: no tiene tamaño intrínseco. */
  .marca__logo {
    display: block;
    aspect-ratio: 1118 / 361;
    width: 132px;
    flex-shrink: 0;
  }

  @media (max-width: 620px) { .marca__logo { width: 112px; } }


  .nav {
    display: flex;
    gap: 18px;
    margin-inline-start: auto;
    align-items: center;
  }

  /* El carrito y la cuenta son un par: van juntos, separados del resto. */
  .nav__carro + .nav__cuenta { margin-inline-start: -10px; }

  .nav__enlace {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap);
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: var(--gris);
    cursor: pointer;
    border-bottom: 2px solid transparent;
  }

  .nav__enlace[aria-current="page"] { color: var(--tinta); border-bottom-color: var(--tinta); }

  .nav__carro {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: var(--tap);
    background: var(--tinta);
    color: var(--papel);
    border: 0;
    border-radius: 999px;
    padding: 0 18px;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    font-variant-numeric: tabular-nums;
  }

  /* Va a la derecha del carrito, donde el ojo ya lo busca en cualquier
     tienda. Redondo y solo con icono para no competir con el carrito, que
     es la acción que de verdad importa. */
  .nav__cuenta {
    display: inline-grid;
    place-items: center;
    width: var(--tap);
    height: var(--tap);
    flex-shrink: 0;
    border: 1px solid var(--linea);
    border-radius: 50%;
    background: var(--tarjeta);
    color: var(--tinta);
    cursor: pointer;
    transition: border-color var(--t-presion) var(--ease-out),
                color var(--t-presion) var(--ease-out),
                transform var(--t-presion) var(--ease-out);
  }

  .nav__cuenta:hover { border-color: var(--marca); color: var(--marca); }
  .nav__cuenta:active { transform: scale(0.94); }
  .nav__cuenta[aria-current="page"] { border-color: var(--tinta); }

  /* Cuando entra algo al carrito, el contador late una vez. Es el único
     aviso de que la acción funcionó, porque ya no cambiamos de pantalla. */
  .nav__carro--acusa { animation: acusar 380ms var(--ease-out); }

  @keyframes acusar {
    0%   { transform: scale(1); }
    38%  { transform: scale(1.14); }
    100% { transform: scale(1); }
  }

  /* ---------- Promesas ---------- */

  .promesas {
    background: var(--marca-tenue);
    border-bottom: 1px solid var(--linea);
  }

  .promesas__lista {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .promesas__item {
    padding: 14px 0;
    font-size: var(--t-s);
    color: var(--gris);
  }

  .promesas__item b { color: var(--tinta); font-weight: 600; }

  /* ---------- Portada ---------- */

  /* ---------- Hero ---------- */

  /* ---------- Carrusel del hero ---------- */

  .hero {
    position: relative;
    background: var(--marca-solida);
    color: var(--sobre-marca);
    overflow: hidden;
    isolation: isolate;
  }

  .hero__lamina {
    position: absolute;
    inset: 0;
    opacity: 0;
    /* Solo opacidad y transform: nada que provoque recálculo de diseño. */
    transition: opacity 700ms var(--ease-out);
    pointer-events: none;
    z-index: 0;
  }

  .hero__lamina[data-activa="si"] { opacity: 1; }

  .hero__lamina img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* Un zoom lentísimo mientras la lámina está en pantalla: da vida sin
       que nadie lo note conscientemente. */
    transform: scale(1.06);
    transition: transform 9s linear;
  }

  .hero__lamina[data-activa="si"] img { transform: scale(1); }

  /* El velo es lo que hace legible el texto sobre cualquier foto. Más
     opaco a la izquierda, que es donde vive el contenido. */
  .hero__velo {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
      linear-gradient(100deg,
        color-mix(in srgb, #151b23 93%, transparent) 0%,
        color-mix(in srgb, #151b23 86%, transparent) 28%,
        color-mix(in srgb, #151b23 34%, transparent) 72%,
        color-mix(in srgb, #151b23 18%, transparent) 100%);
  }

  .hero__reja { position: relative; z-index: 2; }

  /* Texto e imágenes cambian juntos: se desvanecen y suben un poco. */
  .hero__texto > * {
    transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-out);
  }

  .hero[data-cambiando="si"] .hero__texto > * {
    opacity: 0;
    transform: translateY(10px);
  }

  .hero__mando {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 26px;
  }

  .hero__puntos { display: flex; gap: 8px; }

  .hero__punto-btn {
    width: 40px;
    height: 4px;
    border: 0;
    padding: 0;
    border-radius: 999px;
    background: color-mix(in srgb, var(--sobre-marca) 30%, transparent);
    cursor: pointer;
    transition: background-color var(--t-rapido) var(--ease-out);
  }

  /* El área táctil crece sin engordar la barrita. */
  .hero__punto-btn::before {
    content: "";
    position: absolute;
    inset: -20px -4px;
  }

  .hero__punto-btn { position: relative; }
  .hero__punto-btn[aria-current="true"] { background: var(--sobre-marca); }

  /* A la izquierda, junto a los puntos: a la derecha chocaban con el botón
     flotante del chat. */
  .hero__flechas { display: flex; gap: 8px; }

  .hero__mando::after {
    content: "";
    flex: 1;
    min-width: 170px;   /* espacio reservado para el botón del chat */
  }

  .hero__flecha {
    width: var(--tap);
    height: var(--tap);
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--sobre-marca) 34%, transparent);
    background: color-mix(in srgb, var(--sobre-marca) 8%, transparent);
    color: var(--sobre-marca);
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background-color var(--t-presion) var(--ease-out),
                transform var(--t-presion) var(--ease-out);
  }

  .hero__flecha:hover { background: color-mix(in srgb, var(--sobre-marca) 20%, transparent); }
  .hero__flecha:active { transform: scale(0.94); }

  .hero__reja {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
    padding-block: 44px 34px;
  }

  .hero__marca {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(251, 249, 246, 0.14);
    border-radius: 999px;
    padding: 6px 14px;
    font-size: var(--t-s);
    font-weight: 600;
    margin-bottom: 20px;
  }

  .hero__punto {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #8fe3b6;
  }

  .hero__titulo {
    font-family: var(--display);
    font-variation-settings: "opsz" 144;
    font-size: clamp(2.3rem, 5vw, 3.6rem);
    font-weight: 700;
    line-height: 0.98;
    letter-spacing: -0.03em;
    margin: 0 0 18px;
    text-wrap: balance;
  }

  /* Se reserva el alto de TRES líneas aunque el texto ocupe dos. Sin esto
     la lámina más larga medía 15 px más que las otras y la página daba un
     salto en cada rotación. Reservar espacio es más robusto que ajustar el
     texto: mañana alguien escribe una frase larga y vuelve el salto. */
  .hero__bajada {
    margin: 0 0 26px;
    font-size: var(--t-l);
    line-height: 1.55;
    opacity: 0.9;
    max-width: 40ch;
    min-height: calc(3 * 1.55em);
  }

  /* Misma idea para el título: dos líneas reservadas. */
  .hero__titulo { min-height: calc(2 * 0.98em); }

  .hero__acciones { display: flex; flex-wrap: wrap; gap: 10px; }

  .hero__acciones .boton {
    background: var(--sobre-marca);
    color: var(--marca-solida);
    width: auto;
  }

  .hero__acciones .boton--calado {
    background: none;
    color: var(--sobre-marca);
    border-color: color-mix(in srgb, var(--sobre-marca) 50%, transparent);
  }

  .hero__datos {
    display: flex;
    gap: 28px;
    flex-wrap: wrap;
    margin-top: 26px;
    padding-top: 20px;
    border-top: 1px solid rgba(251, 249, 246, 0.22);
  }

  .hero__dato strong {
    display: block;
    font-size: var(--t-xl);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
  }

  .hero__dato span { font-size: var(--t-xs); opacity: 0.78; }

  /* La mercadería entra en el primer pantallazo: cuatro productos reales,
     no una foto de banco de imágenes. */
  .hero__muestra {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 13px;
    max-width: 460px;
    margin-inline-start: auto;
  }

  .hero__pieza {
    background: var(--tarjeta);
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    border: 0;
    padding: 0;
    text-align: start;
    font: inherit;
    color: var(--tinta);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
    transition: transform var(--t-rapido) var(--ease-out),
                box-shadow var(--t-rapido) var(--ease-out);
  }

  .hero__pieza:hover { box-shadow: 0 16px 42px rgba(0, 0, 0, 0.26); }

  .hero__pieza:nth-child(2) { transform: translateY(16px); }
  .hero__pieza:nth-child(3) { transform: translateY(-16px); }
  .hero__pieza:hover { transform: translateY(-4px); }
  .hero__pieza:nth-child(2):hover { transform: translateY(14px); }
  .hero__pieza:nth-child(3):hover { transform: translateY(-26px); }

  .hero__pieza svg { display: block; width: 100%; height: auto; }
  .hero__pieza img { display: block; width: 100%; height: auto; }

  .hero__pie {
    padding: 11px 13px 13px;
    display: grid;
    gap: 3px;
  }

  /* Dos líneas reservadas SIEMPRE. Acá estaba el salto del carrusel: en la
     lámina de Hogar los nombres son largos, hacían dos líneas y estiraban
     las tarjetas 15 px. La columna de texto no tenía nada que ver. */
  .hero__pie b {
    font-size: var(--t-xs);
    font-weight: 500;
    line-height: 1.3;
    color: var(--gris);
    min-height: calc(2 * 1.3em);
    display: block;
  }

  .hero__pie span {
    font-size: var(--t-m);
    font-weight: 800;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
  }

  @media (max-width: 900px) {
    .hero__reja { grid-template-columns: 1fr; gap: 36px; padding-block: 44px; }
    .hero__pieza:nth-child(2), .hero__pieza:nth-child(3) { transform: none; }
    .hero__pieza:nth-child(2):hover, .hero__pieza:nth-child(3):hover { transform: translateY(-4px); }
  }

  @media (max-width: 620px) {
    .hero__datos { gap: 18px; }
    .hero__acciones .boton { flex: 1 1 100%; }
  }

  .portada {
    padding-block: 48px 8px;
  }

  /* Bricolage Grotesque: formas algo irregulares a propósito, se ve hecha a
     mano sin dejar de ser limpia. Solo en los títulos grandes; el resto de
     la interfaz sigue en Archivo. */
  .portada__titulo {
    font-family: var(--display);
    font-size: var(--t-3xl);
    line-height: 1.02;
    letter-spacing: -0.025em;
    font-weight: 700;
    font-variation-settings: "opsz" 128;
    margin: 0 0 16px;
    text-wrap: balance;
    max-width: 15ch;
  }

  .seccion__titulo, .titulo-pagina, .ficha__titulo {
    font-family: var(--display);
    font-variation-settings: "opsz" 48;
  }

  .portada__bajada {
    margin: 0;
    max-width: 58ch;
    color: var(--gris);
    font-size: var(--t-l);
  }

  .portada__acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
  }

  .seccion {
    padding-block: 40px;
  }

  /* La sección editorial respira más que las grillas: son fotos grandes y
     pegadas al hero se leían como una continuación de él, no como una
     sección propia. */
  .seccion--aire { padding-block: 72px 64px; }

  .seccion--aire .seccion__cabeza { margin-bottom: 28px; }

  @media (max-width: 760px) {
    .seccion--aire { padding-block: 48px 44px; }
  }

  /* Franja promocional del envío gratis. Es el único bloque con fondo
     sólido de la portada: por eso se ve, y por eso hay solo uno. */
  /* Verde marca, no negro: en una página cálida el negro sólido se ve como
     un agujero. Es el único bloque de color pleno de la portada. */
  .franja {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    background: var(--marca-solida);
    color: var(--sobre-marca);
    border-radius: 14px;
    padding: 30px 34px;
    margin-bottom: 44px;
  }

  .franja strong {
    display: block;
    font-family: var(--display);
    font-variation-settings: "opsz" 60;
    font-size: var(--t-2xl);
    letter-spacing: -0.02em;
    line-height: 1.12;
  }

  .franja span { opacity: 0.82; font-size: var(--t-s); }

  .franja .boton {
    background: var(--sobre-marca);
    color: var(--marca-solida);
    flex-shrink: 0;
  }

  .confianzas {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    border-top: 1px solid var(--linea);
    padding-top: 28px;
  }

  .confianza strong { display: block; margin-bottom: 3px; }
  .confianza span { color: var(--gris); font-size: var(--t-s); }

  .seccion__cabeza {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
  }

  .seccion__titulo {
    font-size: var(--t-xl);
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0;
  }

  .enlace-texto {
    background: none;
    border: 0;
    /* Sin este padding el enlace mide 21 px de alto y no alcanza el objetivo
       tactil de 24. El inline-block es lo que hace que el padding cuente. */
    display: inline-block;
    padding-block: 3px;
    padding-inline: 0;
    font: inherit;
    color: var(--tinta);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
  }

  /* ---------- Retícula de productos ---------- */

  .grilla {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px 20px;
  }

  /* Columna con altura completa: en táctil el botón va al final y así todas
     las tarjetas de una fila lo alinean, aunque los nombres midan distinto. */
  .producto {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    /* Permite anclar el botón al borde de la FOTO, que es cuadrada y por
       tanto mide de alto lo que la tarjeta mide de ancho. Sin esto el botón
       caía sobre el precio y lo tapaba. */
    container-type: inline-size;
  }

  .producto__ir {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    background: none;
    border: 0;
    padding: 0;
    text-align: start;
    font: inherit;
    color: inherit;
    cursor: pointer;
  }

  /* Agregar sin entrar al producto. Aparece al pasar el mouse y también al
     llegar con el tabulador, que es la mitad que se suele olvidar. */
  /* 100cqw es el ancho de la tarjeta, que es también el alto de la foto
     cuadrada. Así la acción queda sobre la imagen y nunca sobre el precio. */
  .producto__accion {
    position: absolute;
    top: calc(100cqw - 48px);
    right: 10px;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity var(--t-rapido) var(--ease-out),
                transform var(--t-rapido) var(--ease-out);
  }

  .producto__rapido {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 36px;
    padding: 0 14px;
    border: 0;
    border-radius: 999px;
    background: var(--tinta);
    color: var(--papel);
    font: inherit;
    font-size: var(--t-xs);
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.22);
    transition: background-color var(--t-presion) var(--ease-out),
                transform var(--t-presion) var(--ease-out);
  }

  .producto__rapido:active { transform: scale(0.95); }

  /* El contador ocupa el mismo lugar que el botón: es el mismo control en
     otro estado, no un elemento nuevo que aparece al lado. */
  .producto__contador {
    display: inline-flex;
    align-items: center;
    background: var(--tinta);
    color: var(--papel);
    border-radius: 999px;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.22);
    overflow: hidden;
  }

  .producto__contador button {
    min-width: 36px;
    min-height: 36px;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color var(--t-presion) var(--ease-out);
  }

  .producto__contador button:hover { background: rgba(255, 255, 255, 0.16); }
  .producto__contador button:active { background: rgba(255, 255, 255, 0.26); }

  .producto__contador span {
    min-width: 22px;
    text-align: center;
    font-size: var(--t-s);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }

  /* Solo donde hay puntero de verdad. En pantalla táctil no existe el
     «pasar por encima», así que la acción vive siempre visible. */
  @media (hover: hover) {
    .producto:hover .producto__accion,
    .producto:focus-within .producto__accion {
      opacity: 1;
      transform: translateY(0);
    }

    /* Si ya hay unidades, el contador se queda visible aunque el mouse no
       esté encima: es información, no solo un atajo. */
    .producto__accion:has(.producto__contador) { opacity: 1; transform: none; }
  }

  @media (hover: none) {
    .producto__accion {
      position: static;
      opacity: 1;
      transform: none;
      margin-top: auto;
      inset: auto;
    }

    .producto__rapido, .producto__contador { width: 100%; justify-content: center; }
    .producto__contador span { flex: 1; }
    .producto__ir { margin-bottom: 10px; }
  }

  .producto__foto {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 10px;
    background: var(--humo);
    position: relative;
    display: block;
  }

  /* La foto se acerca un poco al pasar el mouse. El recorte lo hace el
     contenedor, así que nada se sale de su cuadro. */
  .producto__foto svg,
  .producto__foto img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-rapido) var(--ease-out); }
  .producto:hover .producto__foto svg,
  .producto:hover .producto__foto img { transform: scale(1.04); }

  .sello {
    position: absolute;
    top: 10px;
    left: 10px;
    background: var(--tarjeta);
    color: var(--tinta);
    border: 1px solid var(--linea);
    border-radius: 999px;
    padding: 3px 10px;
    font-size: var(--t-xs);
    font-weight: 600;
    line-height: 1.5;
  }

  /* Ámbar solo acá y en las ofertas: si lo usara también de adorno,
     dejaría de querer decir «esto destaca». */
  .sello--top { background: var(--calido); color: var(--sobre-calido); border-color: var(--calido); }

  .producto__foto svg { display: block; width: 100%; height: 100%; }

  .producto__nombre {
    font-weight: 500;
    line-height: 1.35;
  }

  .producto__precio {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
  }

  .entrega {
    color: var(--marca);
    font-size: var(--t-s);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
  }

  .entrega--neutra { color: var(--gris); font-weight: 400; }

  /* ---------- Filtros ---------- */

  .filtros {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 24px;
  }

  .filtro {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap);
    background: none;
    border: 1px solid var(--linea);
    border-radius: 999px;
    padding: 0 18px;
    font: inherit;
    font-size: var(--t-s);
    color: var(--gris);
    cursor: pointer;
  }

  .filtro[aria-pressed="true"] {
    background: var(--tinta);
    border-color: var(--tinta);
    color: var(--papel);
  }

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

  .ficha {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 48px;
    padding-block: 32px;
    align-items: start;
  }

  .ficha__foto {
    aspect-ratio: 1 / 1;
    border-radius: 8px;
    overflow: hidden;
    background: var(--humo);
    position: sticky;
    top: 92px;
  }

  .ficha__foto svg,
  .ficha__foto img { display: block; width: 100%; height: 100%; object-fit: cover; }

  .ficha__titulo {
    font-size: var(--t-2xl);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.12;
    margin: 0 0 6px;
    text-wrap: balance;
  }

  .ficha__precio {
    font-size: var(--t-2xl);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.03em;
    margin: 18px 0 4px;
  }

  /* La apuesta del diseño: entrega y precio final con peso real, no letra chica. */
  .certeza {
    border-top: 1px solid var(--linea);
    border-bottom: 1px solid var(--linea);
    margin: 22px 0;
    padding: 4px 0;
  }

  .certeza__fila {
    display: flex;
    gap: 14px;
    align-items: baseline;
    padding: 12px 0;
  }

  .certeza__fila + .certeza__fila { border-top: 1px solid var(--linea); }

  .certeza__rotulo {
    color: var(--gris);
    font-size: var(--t-s);
    min-width: 108px;
    flex-shrink: 0;
  }

  .certeza__dato { font-weight: 600; font-variant-numeric: tabular-nums; }

  .certeza__dato small {
    display: block;
    font-weight: 400;
    font-size: var(--t-s);
    color: var(--gris);
  }

  .boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    background: var(--tinta);
    color: var(--papel);
    border: 0;
    border-radius: 6px;
    padding: 15px 24px;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: opacity var(--t-presion) var(--ease-out);
  }

  .boton:hover { opacity: 0.86; }

  .boton--calado {
    background: none;
    color: var(--tinta);
    border: 1px solid var(--tinta);
  }

  .boton--hecho { background: var(--marca); }

  .ficha__contexto {
    margin-top: 12px;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
  }

  .ficha__contexto img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

  .ficha__contexto span {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    padding: 24px 14px 11px;
    font-size: var(--t-xs);
    color: #fbfaf8;
    background: linear-gradient(to top, rgba(12, 10, 8, 0.8), rgba(12, 10, 8, 0));
  }

  .acciones-ficha { display: grid; grid-template-columns: 1.4fr 1fr; gap: 10px; }

  .ficha__llevas {
    margin: 10px 0 0;
    font-size: var(--t-s);
    color: var(--marca);
    min-height: 1.4em;   /* reservado: sin esto el detalle salta al agregar */
  }

  .ficha__llevas b { font-weight: 700; }

  .detalle {
    margin-top: 26px;
    color: var(--gris);
    max-width: 62ch;
  }

  /* Las casillas nativas miden 13x13 y quedan muy por debajo del objetivo
     tactil. Se agrandan y se les da el color de marca al marcarse. */
  input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin: 2px;
    accent-color: var(--marca-solida);
    cursor: pointer;
  }

  .detalle h2 {
    color: var(--tinta);
    font-size: var(--t-m);
    font-weight: 600;
    margin: 0 0 6px;
  }

  /* ---------- Carrito ---------- */

  .dos-columnas {
    display: grid;
    grid-template-columns: 1.55fr 1fr;
    gap: 48px;
    padding-block: 32px;
    align-items: start;
  }

  .titulo-pagina {
    font-size: var(--t-2xl);
    font-weight: 700;
    letter-spacing: -0.03em;
    margin: 0 0 20px;
  }

  .linea-carro {
    display: grid;
    grid-template-columns: 76px 1fr auto;
    gap: 16px;
    padding: 18px 0;
    border-top: 1px solid var(--linea);
    align-items: start;
  }

  .linea-carro__foto {
    width: 76px;
    aspect-ratio: 1 / 1;
    border-radius: 5px;
    overflow: hidden;
    background: var(--humo);
  }

  .linea-carro__foto svg,
  .linea-carro__foto img { display: block; width: 100%; height: 100%; object-fit: cover; }

  .linea-carro__precio {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: end;
  }

  .cantidad {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--linea);
    border-radius: 5px;
    margin-top: 8px;
  }

  /* 44px de lado: por debajo de eso se falla el toque en el teléfono,
     y errar el «−» en un carrito borra un producto. */
  .cantidad button {
    background: none;
    border: 0;
    color: var(--tinta);
    font: inherit;
    font-size: var(--t-l);
    line-height: 1;
    min-width: var(--tap);
    min-height: var(--tap);
    padding: 0;
    cursor: pointer;
  }

  .cantidad span {
    min-width: 32px;
    text-align: center;
    font-variant-numeric: tabular-nums;
    font-size: var(--t-s);
  }

  /* ---------- Barra de envío gratis: el único movimiento de la página ---------- */

  .envio-gratis {
    border: 1px solid var(--linea);
    border-radius: 8px;
    padding: 14px 16px;
    margin-bottom: 20px;
    font-size: var(--t-s);
  }

  .envio-gratis--logrado {
    border-color: var(--marca);
    background: var(--marca-tenue);
    color: var(--marca);
    font-weight: 600;
  }

  .envio-gratis--bloqueado {
    border-color: var(--aviso);
    background: var(--aviso-tenue);
    color: var(--aviso);
  }

  .envio-gratis__pista {
    height: 5px;
    background: var(--linea);
    border-radius: 999px;
    overflow: hidden;
    margin-top: 10px;
  }

  .envio-gratis__avance {
    height: 100%;
    width: 100%;
    background: var(--marca);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--t-medio) var(--ease-out);
  }

  .resumen {
    border: 1px solid var(--linea);
    border-radius: 10px;
    padding: 22px;
    background: var(--tarjeta);
    position: sticky;
    top: 92px;
  }

  .resumen__fila {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 7px 0;
    font-variant-numeric: tabular-nums;
  }

  .resumen__fila--total {
    border-top: 1px solid var(--linea);
    margin-top: 10px;
    padding-top: 14px;
    font-size: var(--t-l);
    font-weight: 800;
    letter-spacing: -0.02em;
  }

  .resumen__nota {
    color: var(--gris);
    font-size: var(--t-xs);
    margin: 14px 0 0;
  }

  /* ---------- Checkout ---------- */

  .formulario {
    display: grid;
    gap: 16px;
    max-width: 560px;
  }

  .paso {
    font-size: var(--t-l);
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 12px 0 0;
  }

  .campo { display: grid; gap: 5px; }

  .campo label { font-size: var(--t-s); color: var(--gris); }

  /* El error va BAJO su campo, no en un resumen arriba: así se lee sin
     tener que buscar a qué campo se refiere. */
  .campo__error {
    color: var(--error);
    font-size: var(--t-s);
    font-weight: 500;
  }

  .campo--malo input { border-color: var(--error); }
  .campo--malo label { color: var(--error); }

  .campo input,
  .campo select {
    min-height: var(--tap);
    border: 1px solid var(--linea);
    border-radius: 6px;
    padding: 11px 13px;
    font: inherit;
    font-size: 16px; /* 16px evita que iOS haga zoom al enfocar */
    background: var(--tarjeta);
    color: var(--tinta);
    width: 100%;
  }

  .par {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }

  .casilla {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 14px;
    border: 1px solid var(--linea);
    border-radius: 6px;
  }

  .casilla input { margin-top: 3px; flex-shrink: 0; }

  .casilla span { font-size: var(--t-s); }

  .pagos { display: grid; gap: 10px; }

  .pago {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    border: 1px solid var(--linea);
    border-radius: 6px;
    padding: 14px;
    cursor: pointer;
  }

  .pago input { margin-top: 3px; flex-shrink: 0; }

  .pago small { display: block; color: var(--gris); }

  .aviso-legal {
    color: var(--gris);
    font-size: var(--t-xs);
    max-width: 62ch;
  }

  /* ---------- Buscador ---------- */

  .buscador {
    flex: 1 1 220px;
    max-width: 320px;
    position: relative;
  }

  .buscador input {
    width: 100%;
    min-height: var(--tap);
    border: 1px solid var(--linea);
    border-radius: 999px;
    padding: 0 18px;
    font: inherit;
    font-size: 16px;
    background: var(--humo);
    color: var(--tinta);
  }

  .buscador input::placeholder { color: var(--gris); }

  /* ---------- Categorías de la portada ---------- */

  .categorias {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
  }

  /* Con la foto del producto más vendido de cada rubro. Sin ella eran seis
     cajas de texto, el bloque más pobre de la portada. */
  .categoria {
    border: 1px solid var(--linea);
    border-radius: 12px;
    padding: 0;
    overflow: hidden;
    text-align: start;
    background: var(--tarjeta);
    font: inherit;
    color: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 14px;
    transition: border-color var(--t-rapido) var(--ease-out),
                transform var(--t-rapido) var(--ease-out);
  }

  .categoria:hover { border-color: var(--marca); transform: translateY(-2px); }

  .categoria__foto {
    width: 82px;
    height: 82px;
    flex-shrink: 0;
    overflow: hidden;
  }

  .categoria__foto img,
  .categoria__foto svg { width: 100%; height: 100%; object-fit: cover; display: block; }

  .categoria__texto { display: grid; gap: 2px; padding-inline-end: 14px; }

  .categoria strong {
    font-family: var(--display);
    font-variation-settings: "opsz" 36;
    font-size: var(--t-l);
    letter-spacing: -0.015em;
  }

  .seccion__apunte {
    margin: 2px 0 0;
    color: var(--gris);
    font-size: var(--t-s);
  }

  .confianza__icono {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    background: var(--marca-tenue);
    color: var(--marca);
    margin-bottom: 11px;
  }
  .categoria span { color: var(--gris); font-size: var(--t-s); }

  /* ---------- Confirmación ---------- */

  .confirmacion { max-width: 620px; padding-block: 44px; }

  .confirmacion__sello {
    display: inline-block;
    background: var(--marca-tenue);
    color: var(--marca);
    border-radius: 999px;
    padding: 5px 14px;
    font-size: var(--t-s);
    font-weight: 600;
    margin-bottom: 14px;
  }

  .datos-pedido {
    border: 1px solid var(--linea);
    border-radius: 8px;
    margin: 22px 0;
  }

  .datos-pedido__fila {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 13px 18px;
    font-variant-numeric: tabular-nums;
  }

  .datos-pedido__fila + .datos-pedido__fila { border-top: 1px solid var(--linea); }
  .datos-pedido__fila span:first-child { color: var(--gris); }
  .datos-pedido__fila strong { font-weight: 600; }

  .crear-cuenta {
    border: 1px solid var(--tinta);
    border-radius: 8px;
    padding: 20px;
    margin-top: 28px;
  }

  .crear-cuenta h2 { font-size: var(--t-l); margin: 0 0 6px; letter-spacing: -0.02em; }
  .crear-cuenta p { margin: 0 0 14px; color: var(--gris); font-size: var(--t-s); }

  /* ---------- Seguimiento ---------- */

  .rastreo { max-width: 620px; padding-block: 36px; }

  .pasos { margin: 26px 0 0; padding: 0; list-style: none; }

  .paso-envio {
    display: grid;
    grid-template-columns: 22px 1fr;
    gap: 16px;
    padding-bottom: 26px;
    position: relative;
  }

  .paso-envio:last-child { padding-bottom: 0; }

  /* La línea que une los hitos, salvo bajo el último. */
  .paso-envio:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 10px;
    top: 22px;
    bottom: 4px;
    width: 2px;
    background: var(--linea);
  }

  .paso-envio--hecho:not(:last-child)::before { background: var(--marca); }

  .hito {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid var(--linea);
    background: var(--tarjeta);
    z-index: 1;
  }

  .paso-envio--hecho .hito { border-color: var(--marca); background: var(--marca); }
  .paso-envio--ahora .hito { border-color: var(--marca); border-width: 6px; }

  .paso-envio__texto strong { display: block; }
  .paso-envio__texto span { color: var(--gris); font-size: var(--t-s); }
  .paso-envio--pendiente .paso-envio__texto strong { color: var(--gris); font-weight: 500; }

  /* ---------- Preguntas ---------- */

  .preguntas { max-width: 700px; padding-block: 36px; }

  .pregunta {
    border-bottom: 1px solid var(--linea);
    padding: 4px 0;
  }

  .pregunta summary {
    cursor: pointer;
    padding: 14px 0;
    font-weight: 500;
    list-style: none;
    display: flex;
    justify-content: space-between;
    gap: 16px;
  }

  .pregunta summary::-webkit-details-marker { display: none; }
  .pregunta summary::after { content: "+"; color: var(--gris); font-size: var(--t-l); line-height: 1; }
  .pregunta[open] summary::after { content: "–"; }
  .pregunta p { margin: 0 0 16px; color: var(--gris); max-width: 62ch; }

  /* ---------- Mi cuenta ---------- */

  .pedido-fila {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 16px;
    align-items: center;
    border: 1px solid var(--linea);
    border-radius: 8px;
    padding: 16px 18px;
    margin-bottom: 12px;
  }

  .pedido-fila__estado {
    font-size: var(--t-s);
    font-weight: 600;
    color: var(--marca);
  }

  .pedido-fila__estado--cerrado { color: var(--gris); }

  /* ---------- Aviso de cookies ---------- */

  /* La Ley 21.719 pide consentimiento previo, por categoria, sin casillas
     premarcadas y revocable; y «Rechazar todas» tiene que pesar lo mismo en
     pantalla que «Aceptar todas», asi que los dos botones comparten estilo. */
  .cookies {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 90;
    padding: 0 var(--gutter) calc(16px + env(safe-area-inset-bottom, 0px));
  }

  .cookies__caja {
    max-width: 760px;
    margin: 0 auto;
    background: var(--tarjeta);
    border: 1px solid var(--linea);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 10px 40px rgba(20, 22, 26, 0.22);
  }

  .cookies__titulo {
    margin: 0 0 6px;
    font-family: var(--display);
    font-size: var(--t-l);
    font-weight: 600;
  }

  .cookies__texto { margin: 0; color: var(--gris); font-size: var(--t-s); line-height: 1.55; }

  .cookies__opciones { display: grid; gap: 12px; margin-top: 16px; }

  .cookies__op {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: var(--t-s);
    color: var(--gris);
    cursor: pointer;
  }

  .cookies__op b { color: var(--tinta); font-weight: 600; }
  .cookies__op input { margin-top: 1px; flex-shrink: 0; }
  .cookies__op input:disabled { cursor: not-allowed; }

  .cookies__botones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

  /* Mismo tamaño, mismo color, mismo peso: ninguna de las dos decisiones
     puede verse mas facil de tomar que la otra. */
  .cookies__botones button[data-cookies="rechazar"],
  .cookies__botones button[data-cookies="aceptar"] {
    flex: 1 1 200px;
    min-height: var(--tap);
    padding-inline: 18px;
    border: 0;
    border-radius: 12px;
    background: var(--marca-solida);
    color: var(--sobre-marca);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
  }

  .cookies__mas {
    min-height: var(--tap);
    padding-inline: 14px;
    border: 1px solid var(--linea);
    border-radius: 12px;
    background: none;
    color: var(--tinta);
    font: inherit;
    cursor: pointer;
  }

  @media (max-width: 560px) {
    .cookies__botones button[data-cookies="rechazar"],
    .cookies__botones button[data-cookies="aceptar"],
    .cookies__mas { flex: 1 1 100%; }
  }

  /* Mientras el aviso esta abierto, el boton de ayuda se corre para no quedar
     tapado por el. */
  .cookies:not([hidden]) ~ .chat-abrir {
    bottom: calc(230px + env(safe-area-inset-bottom, 0px));
  }

  /* ---------- Chat ---------- */

  /* El carro del logo va sobre un fondo sólido oscuro, así que su tinta pasa
     a ser la del texto del botón. Los productos de colores no se tocan: son
     claros y se leen igual encima. */
  .chat-abrir {
    --logo-tinta: var(--sobre-marca);
    --logo-tinta-2: var(--sobre-marca);
    position: fixed;
    right: 20px;
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    z-index: 80;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 52px;
    padding: 0 20px;
    border: 0;
    border-radius: 999px;
    background: var(--marca-solida);
    color: var(--sobre-marca);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 6px 22px rgba(28, 25, 23, 0.18);
    transition: transform var(--t-presion) var(--ease-out);
  }

  .chat-abrir__logo {
    width: 27px;
    aspect-ratio: 370 / 361;
    flex-shrink: 0;
    display: block;
  }

  .chat-abrir:hover { transform: translateY(-2px); }
  .chat-abrir:active { transform: scale(0.97); }

  .chat {
    position: fixed;
    right: 20px;
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    z-index: 90;
    width: min(380px, calc(100vw - 40px));
    max-height: min(560px, calc(100vh - 100px));
    display: flex;
    flex-direction: column;
    background: var(--tarjeta);
    border: 1px solid var(--linea);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 16px 48px rgba(28, 25, 23, 0.22);

    /* Nace desde el botón que lo abrió, no desde el centro. Y nunca desde
       scale(0): nada en el mundo real aparece de la nada. */
    transform-origin: bottom right;
    transform: scale(0.94) translateY(8px);
    opacity: 0;
    pointer-events: none;
    transition: transform var(--t-medio) var(--ease-out),
                opacity var(--t-rapido) var(--ease-out);
  }

  .chat[data-abierto="si"] {
    transform: scale(1) translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  .chat__cabeza {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 15px 16px;
    border-bottom: 1px solid var(--linea);
    background: var(--marca-solida);
    color: var(--sobre-marca);
  }

  .chat__titulo { font-weight: 700; line-height: 1.2; }
  .chat__estado { font-size: var(--t-xs); opacity: 0.85; }

  .chat__cerrar {
    margin-inline-start: auto;
    /* Con blanco al 16% sobre la cabecera verde del tema oscuro, la X medía
       3,74:1. En negro pesa lo mismo en pantalla y sube a 6,83. */
    background: rgba(0, 0, 0, 0.16);
    border: 0;
    color: inherit;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
  }

  .chat__cuerpo {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .burbuja {
    max-width: 82%;
    padding: 10px 14px;
    border-radius: 14px;
    font-size: var(--t-s);
    line-height: 1.5;
  }

  .burbuja--bot {
    align-self: flex-start;
    background: var(--humo);
    border-bottom-left-radius: 5px;
  }

  .burbuja--yo {
    align-self: flex-end;
    background: var(--marca-solida);
    color: var(--sobre-marca);
    border-bottom-right-radius: 5px;
  }

  .burbuja strong { font-weight: 600; }

  .escribiendo {
    align-self: flex-start;
    display: flex;
    gap: 4px;
    padding: 13px 14px;
    background: var(--humo);
    border-radius: 14px;
    border-bottom-left-radius: 5px;
  }

  .escribiendo i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--gris);
    animation: puntear 1.1s infinite;
  }

  .escribiendo i:nth-child(2) { animation-delay: 0.16s; }
  .escribiendo i:nth-child(3) { animation-delay: 0.32s; }

  @keyframes puntear {
    0%, 60%, 100% { opacity: 0.3; }
    30% { opacity: 1; }
  }

  .chat__sugerencias {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    padding: 0 16px 12px;
  }

  .sugerencia {
    background: none;
    border: 1px solid var(--linea);
    border-radius: 999px;
    padding: 8px 13px;
    font: inherit;
    font-size: var(--t-xs);
    color: var(--tinta);
    cursor: pointer;
  }

  .sugerencia:hover { border-color: var(--marca); color: var(--marca); }

  .chat__pie {
    display: flex;
    gap: 8px;
    padding: 12px;
    border-top: 1px solid var(--linea);
  }

  .chat__pie input {
    flex: 1;
    min-height: var(--tap);
    border: 1px solid var(--linea);
    border-radius: 999px;
    padding: 0 16px;
    font: inherit;
    font-size: 16px;
    background: var(--papel);
    color: var(--tinta);
  }

  .chat__enviar {
    min-width: var(--tap);
    min-height: var(--tap);
    border: 0;
    border-radius: 50%;
    background: var(--tinta);
    color: var(--papel);
    font-size: 1.1rem;
    cursor: pointer;
  }

  .chat__aviso {
    font-size: var(--t-xs);
    color: var(--gris);
    text-align: center;
    padding: 0 16px 10px;
  }

  @media (max-width: 620px) {
    .chat {
      right: 10px;
      left: 10px;
      width: auto;
      max-height: min(72vh, 520px);
    }

    /* Solo el icono: con la etiqueta, el botón tapaba el texto del hero. */
    .chat-abrir {
      right: 14px;
      width: 52px;
      padding: 0;
      justify-content: center;
    }

    .chat-abrir span { display: none; }
  }

  /* ---------- En uso ----------
     Lo único que separaba esta tienda de las mejores de Shopify: ellas
     muestran el producto en una casa, con alguien usándolo. */

  .enuso {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: 14px;
  }

  .enuso__col { display: grid; gap: 14px; }

  .enuso__pieza {
    position: relative;
    border: 0;
    padding: 0;
    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;
    background: var(--humo);
    font: inherit;
    color: inherit;
    display: block;
    width: 100%;
  }

  .enuso__pieza img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 420ms var(--ease-out);
  }

  .enuso__pieza:hover img { transform: scale(1.03); }

  .enuso__pieza--alta img { aspect-ratio: 4 / 5; }
  .enuso__pieza--baja img { aspect-ratio: 16 / 10; }

  /* El texto vive sobre un degradado propio, no sobre la foto pelada:
     una foto clara dejaría el nombre ilegible. */
  .enuso__pie {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    padding: 34px 18px 16px;
    text-align: start;
    background: linear-gradient(to top, rgba(12, 10, 8, 0.85), rgba(12, 10, 8, 0));
    color: #fbfaf8;
    display: grid;
    gap: 2px;
  }

  .enuso__pie b { font-size: var(--t-m); font-weight: 600; }
  .enuso__pie span { font-size: var(--t-s); opacity: 0.86; font-variant-numeric: tabular-nums; }

  @media (max-width: 760px) {
    .enuso { grid-template-columns: 1fr; }
    .enuso__pieza--alta img { aspect-ratio: 16 / 11; }
  }

  /* ---------- Cinta de despachos ----------
     La idea es de Graza, que al pie del hero dice de qué cosecha vienen sus
     aceitunas. Un dato verdadero y cambiante demuestra que hay alguien real
     detrás, y cuesta menos que cualquier sello de confianza. */

  .cinta-real {
    border-top: 1px solid var(--linea);
    border-bottom: 1px solid var(--linea);
    background: var(--tarjeta);
    font-size: var(--t-s);
    overflow: hidden;
  }

  .cinta-real__fila {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 52px;
    padding-block: 10px;
  }

  .cinta-real__latido {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--marca);
    flex-shrink: 0;
    position: relative;
  }

  .cinta-real__latido::after {
    content: "";
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    border: 1px solid var(--marca);
    opacity: 0;
    animation: latir 2.6s ease-out infinite;
  }

  @keyframes latir {
    0% { opacity: 0.65; transform: scale(0.6); }
    70%, 100% { opacity: 0; transform: scale(1); }
  }

  @media (prefers-reduced-motion: reduce) {
    .cinta-real__latido::after { animation: none; }
  }

  .cinta-real__dato { color: var(--gris); }
  .cinta-real__dato b { color: var(--tinta); font-weight: 600; }

  .cinta-real__sello {
    margin-inline-start: auto;
    color: var(--gris);
    font-size: var(--t-xs);
    white-space: nowrap;
  }

  @media (max-width: 620px) {
    .cinta-real__sello { display: none; }
  }

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

  .pie {
    border-top: 1px solid var(--linea);
    margin-top: 64px;
    color: var(--gris);
    font-size: var(--t-s);
  }

  /* Los cuatro sellos: lo que un comprador chileno pregunta antes de pagar.
     Van arriba del todo porque son la razón por la que sigue leyendo el pie. */
  .pie__sellos {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--linea);
    border-bottom: 1px solid var(--linea);
  }

  .pie__sello {
    background: var(--papel);
    padding: 20px 18px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
  }

  .pie__sello svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    stroke: var(--marca);
    fill: none;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    margin-top: 1px;
  }

  .pie__sello b {
    display: block;
    color: var(--tinta);
    font-weight: 600;
    margin-bottom: 2px;
  }

  .pie__sello span { font-size: var(--t-xs); line-height: 1.45; }

  .pie__cuerpo {
    display: grid;
    grid-template-columns: minmax(230px, 1.4fr) repeat(3, 1fr);
    gap: 40px 32px;
    padding-block: 44px 36px;
  }

  .pie__nombre {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--display);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--tinta);
    letter-spacing: -0.01em;
    margin-bottom: 12px;
  }

  .pie__frase {
    margin: 0 0 20px;
    line-height: 1.55;
    max-width: 30ch;
  }

  .pie__aviso {
    display: flex;
    gap: 8px;
    max-width: 320px;
  }

  .pie__aviso input {
    flex: 1;
    min-width: 0;
    min-height: var(--tap);
    padding: 0 12px;
    border: 1px solid var(--linea);
    border-radius: 10px;
    background: var(--papel);
    color: var(--tinta);
    font: inherit;
  }

  .pie__aviso input:focus-visible { outline: 2px solid var(--marca); outline-offset: 1px; }

  .pie__aviso button {
    min-height: var(--tap);
    padding-inline: 16px;
    border: 0;
    border-radius: 10px;
    background: var(--marca-solida);
    color: var(--sobre-marca);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    flex-shrink: 0;
  }

  .pie__gracias {
    margin: 8px 0 0;
    color: var(--marca);
    font-size: var(--t-xs);
  }

  .pie__titulo {
    margin: 0 0 14px;
    font-size: var(--t-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tinta);
  }

  .pie__lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 3px;
  }

  .pie__lista a,
  .pie__lista button,
  .pie__lista span {
    background: none;
    border: 0;
    /* El texto solo medía 15 px de alto, bajo el objetivo tactil de 24. Va
       acá y no en una regla aparte porque el shorthand padding:0 de esta
       regla pisaba al padding-block escrito mas arriba. */
    display: inline-block;
    padding-inline: 0;
    padding-block: 7px;
    font: inherit;
    color: var(--gris);
    text-align: start;
    text-decoration: none;
    cursor: pointer;
  }

  .pie__lista a:hover,
  .pie__lista button:hover { color: var(--marca); text-decoration: underline; }

  /* Los medios de pago van como texto y no como logotipos ajenos: se lee
     igual de claro y no se usan marcas de terceros sin permiso. */
  .pie__medios {
    display: flex;
    flex-wrap: wrap;
    gap: 24px 40px;
    padding-block: 22px;
    border-top: 1px solid var(--linea);
  }

  .pie__medios > div { display: grid; gap: 10px; }

  .pie__fichas { display: flex; flex-wrap: wrap; gap: 6px; }

  .pie__ficha {
    border: 1px solid var(--linea);
    border-radius: 6px;
    padding: 4px 9px;
    font-size: var(--t-xs);
    color: var(--tinta);
    background: var(--papel);
    white-space: nowrap;
  }

  .pie__legal {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px 24px;
    padding-block: 18px 40px;
    border-top: 1px solid var(--linea);
    font-size: var(--t-xs);
  }

  .pie__legal p { margin: 0; }

  /* Dato que todavía no existe. Se marca en vez de inventarse: así Andrés ve
     exactamente qué le falta reunir antes de publicar. */
  .pie__falta {
    border-bottom: 1px dashed currentColor;
    opacity: 0.75;
    cursor: help;
  }

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

  /* Visible para el lector de pantalla, no para el ojo. */
  .visualmente-oculto {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  @media (max-width: 900px) {
    .pie__sellos { grid-template-columns: repeat(2, 1fr); }
    .pie__cuerpo { grid-template-columns: repeat(2, 1fr); gap: 34px 28px; }
    .pie__marca { grid-column: 1 / -1; }
  }

  @media (max-width: 560px) {
    .pie__sellos { grid-template-columns: 1fr; }
    /* En una sola columna la sangría interna ya no separa nada de nada, y
       descuadra los sellos respecto del resto del pie. */
    .pie__sello { padding-inline: 0; }
    .pie__cuerpo { grid-template-columns: 1fr; }
    /* Siete categorías en fila vertical estiran el pie sin motivo: los
       nombres son cortos y entran de a dos. */
    .pie__lista--corta { grid-template-columns: 1fr 1fr; }
    .pie__legal { justify-content: flex-start; }
  }

  .maqueta {
    background: var(--humo);
    border-top: 1px solid var(--linea);
    padding-block: 14px;
    font-size: var(--t-xs);
    color: var(--gris);
  }

  /* ---------- Adaptaciones ---------- */

  @media (max-width: 900px) {
    .grilla { grid-template-columns: repeat(3, 1fr); }
    .ficha, .dos-columnas { grid-template-columns: 1fr; gap: 28px; }
    .ficha__foto, .resumen { position: static; }
    .categorias { grid-template-columns: repeat(2, 1fr); }
    .confianzas { grid-template-columns: 1fr; gap: 18px; }
  }

  @media (max-width: 620px) {
    .grilla { grid-template-columns: repeat(2, 1fr); gap: 22px 14px; }
    .promesas__lista { grid-template-columns: 1fr; gap: 0; }
    .promesas__item { padding: 9px 0; border-bottom: 1px solid var(--linea); }
    .promesas__item:last-child { border-bottom: 0; }
    .nav__enlace { display: none; }
    /* En 390 px la frase larga se cortaba a media palabra y el carrito se
       salía de la pantalla. Se recorta el texto accesorio, no el sentido. */
    .solo-ancho { display: none; }
    .nav__carro { padding: 0 14px; gap: 7px; }
    .nav { gap: 10px; }
    .marca { font-size: 1.2rem; }
    .cintillo { font-size: var(--t-xs); }
    .par { grid-template-columns: 1fr; }
    .portada { padding-block: 32px 4px; }
    .categorias { grid-template-columns: repeat(2, 1fr); }
    .barra__fila { height: auto; padding-block: 12px; flex-wrap: wrap; }
    .buscador { order: 3; flex-basis: 100%; max-width: none; }
    .franja { padding: 20px; }
    .franja .boton { width: 100%; }
    .portada__acciones .boton { flex: 1 1 100%; }
  }