/* ─────────────────────────────────────────────────────────────────────────
   Mary Carpio · Bagués Superación — asesora Bagués en Bell Ville, Córdoba.

   Una boutique de perfumería íntima, no un supermercado de cosmética (brief
   de marca del 10/10/2026):

   1. Fondo blanco rosado, mucho aire y el producto protagonista sobre un
      rosa suave. Las fotos vienen con fondo blanco y se multiplican contra
      ese rosa, así queda el frasco solo.
   2. Un solo color fuerte, el magenta del corazón de su logo, reservado
      para lo que importa: sumar al pedido, los descuentos y WhatsApp. Los
      demás botones son de tinta o de borde.
   3. Tres letras, cada una con su trabajo: Allura sólo para "Mary Carpio",
      Bodoni Moda para los títulos (con la itálica para el énfasis) y
      Montserrat para todo lo que se lee y los rótulos.
   4. Botones pastilla, esquinas redondas y movimiento lento.

   El magenta (#D6176B, de marca.json) da 5:1 con letra blanca. El rosa
   (--rosa) va de fondo, nunca de texto.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  /* ── Color ───────────────────────────────────────────────────────────── */
  --papel: #FFFFFF;
  --fondo: #FBF7F8;          /* el blanco rosado de la página */
  --tinta: #1B1418;
  /* Los grises son la tinta con transparencia: el "suave" no baja del 70%
     para que el texto chico pase 4,5:1 sobre blanco y sobre el fondo. */
  --tinta-media: #1B1418CC;
  --tinta-suave: #1B1418B3;
  --raya: #EADDE2;           /* bordes y divisores */
  --raya-suave: #F2E9ED;
  --raya-campo: #9E8B93;     /* el borde de un campo: tiene que verse (3:1) */

  --ciruela: #4A1F35;        /* la banda de Emprendé y los fondos profundos */
  --rosa: #FBE3EE;           /* el fondo de las fotos de producto */
  --rosa-medio: #F7D3E3;
  --rosa-claro: #FDF1F6;

  /* El magenta de sumar al pedido, los descuentos y WhatsApp. Sale de
     datos/marca.json (`color` y `colorHondo`). */
  --acento: #D6176B;
  --acento-hondo: #B00F57;
  --verde: #2D6A4F;
  --naranja: #B4610E;

  /* ── Letra ───────────────────────────────────────────────────────────── */
  --titulo: "Bodoni Moda", "Bodoni MT", Didot, Georgia, serif;
  --cuerpo: "Montserrat", "Segoe UI", system-ui, sans-serif;
  --rotulo: "Montserrat", "Segoe UI", system-ui, sans-serif;
  --display: "Montserrat", "Segoe UI", system-ui, sans-serif;
  --firma: "Allura", "Segoe Script", cursive;

  --h1: clamp(32px, 4vw, 48px);
  --h2: clamp(26px, 2.8vw, 34px);
  --h3: 22px;
  --h4: 18px;
  --h5: 15px;
  --h6: 13px;

  /* ── Medidas ─────────────────────────────────────────────────────────── */
  --ancho: 1240px;
  --aire: clamp(18px, 4vw, 44px);
  --paso: clamp(56px, 7.5vw, 108px);
  --radio: 20px;
  --radio-chico: 12px;
  --radio-boton: 999px;
  --radio-medio: 16px;
  --borde: 1px solid var(--raya);
  --borde-campo: 1px solid var(--raya-campo);
  --lento: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }

/* Una clase con display propio le gana al [hidden] del navegador y el
   elemento sigue a la vista aunque el JS lo haya escondido. Esto lo evita. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font: 400 16px/1.65 var(--cuerpo);
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4, h5, h6 { margin: 0; line-height: 1.2; }
/* Los títulos, en Bodoni; lo resaltado va en su itálica y no en color. */
h1, h2 { font-family: var(--titulo); font-weight: 500; letter-spacing: -.01em; line-height: 1.1; }
h3, h4, h5, h6 { font-family: var(--cuerpo); font-weight: 600; }
h1 em, h2 em, h3 em { font-style: italic; font-weight: 400; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
blockquote, figure { margin: 0; }

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

.contenedor, .envoltorio { max-width: var(--ancho); margin: 0 auto; padding-inline: var(--aire); }
.contenedor { padding-block: 24px; }

.solo-lectores, .solo-lector {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ── El rótulo ───────────────────────────────────────────────────────────── */

.etiqueta {
  font: 600 11.5px/1.4 var(--rotulo);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}

/* ── El logotipo ─────────────────────────────────────────────────────────
   "Mary Carpio" en manuscrita con el corazón magenta al lado y "Bagués
   Superación" abajo, en mayúsculas con aire. Todo en em: el tamaño se cambia
   con el font-size de .logotipo. (Cada regla en un renglón: armar-marca.mjs
   las copia así para sacar las imágenes del logo.) */

.logotipo { display: inline-flex; flex-direction: column; align-items: center; color: var(--tinta); font-size: 12px; line-height: 1; white-space: nowrap; }
.logotipo .firma { display: inline-flex; align-items: flex-start; padding: .1em .08em 0 .12em; font: 400 3.2em/1 var(--firma); letter-spacing: 0; }
.logotipo .corazon { flex: none; width: .24em; height: .24em; margin: .16em 0 0 .1em; color: var(--acento); }
.logotipo .palabra { margin: .2em -.34em 0 0; font: 600 .8em/1 var(--rotulo); letter-spacing: .34em; text-transform: uppercase; }

/* ── La barra de anuncios ────────────────────────────────────────────────
   En tinta, un mensaje por vez y flechas a los costados. Cambia solo. */

.adbar { background: var(--tinta); color: #fff; font: 500 11.5px/1.35 var(--rotulo); letter-spacing: .18em; text-transform: uppercase; }
.adbar-fila { display: flex; align-items: center; justify-content: center; gap: 12px; padding-block: 7px; }
.adbar-mensajes { flex: 0 1 620px; min-height: 1.35em; display: grid; text-align: center; }
.adbar-mensajes > span {
  grid-area: 1 / 1; opacity: 0; translate: 0 9px; visibility: hidden;
  transition: opacity .3s ease, translate 0s linear .3s, visibility 0s linear .3s;
}
.adbar-mensajes > .va { opacity: 1; translate: 0 0; visibility: visible; transition: opacity .6s ease .15s, translate .8s var(--lento) .15s; }
@media (prefers-reduced-motion: reduce) {
  .adbar-mensajes > span, .adbar-mensajes > .va { translate: none; transition: none; }
}
.adbar-flecha {
  flex: none; width: 32px; height: 32px; display: grid; place-items: center;
  background: none; border: 0; padding: 0; color: #fff; cursor: pointer; opacity: .7;
  transition: opacity .25s;
}
.adbar-flecha:hover { opacity: 1; }
.adbar-flecha svg { width: 15px; height: 15px; }

/* ── Cabecera ────────────────────────────────────────────────────────────── */

/* Pegada arriba, pero corrida hacia arriba lo que mide la barra de anuncios
   (--alto-anuncios, lo mide tienda.js): al bajar se va y queda la cabecera. */
.cabecera {
  position: sticky; top: calc(-1 * var(--alto-anuncios, 0px)); z-index: 40;
  background: var(--fondo); border-bottom: 1px solid var(--raya);
}

/* Arriba: la lupa, el logo al medio y la bolsa. Las dos puntas miden lo
   mismo (1fr) para que el logo quede centrado de verdad. */
.fila-cabecera {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center;
  gap: 16px;
}
.fila-cabecera.contenedor { padding-block: 14px 12px; }

.marca { display: block; line-height: 1; flex: none; }
.fila-cabecera .marca { justify-self: center; }
.fila-cabecera .logotipo { font-size: 13px; }

.hamburguesa { display: none; background: none; border: 0; padding: 8px; cursor: pointer; color: var(--tinta); }
.hamburguesa svg { width: 24px; height: 24px; display: block; }

/* Abajo, las categorías en un solo renglón, centradas. */
.menu {
  display: flex; justify-content: center; gap: 0 clamp(18px, 2.4vw, 36px);
  font: 500 11.5px/1.4 var(--rotulo); letter-spacing: .16em; text-transform: uppercase;
}
.menu.contenedor { padding-block: 0; }
.item-menu { position: relative; }
.item-menu.solo-celu { display: none; }
.item-menu > a { display: block; padding: 10px 0 14px; white-space: nowrap; border-bottom: 1.5px solid transparent; }
.item-menu > a:hover, .item-menu:focus-within > a { border-bottom-color: currentColor; }

/* Las secciones de una categoría (50 ml, Unlock, mini tallas) cuelgan al pasar. */
.hijas {
  position: absolute; top: 100%; left: -22px; z-index: 50; min-width: 230px;
  padding: 10px; background: var(--papel); border: var(--borde); border-radius: var(--radio-medio);
  box-shadow: 0 24px 50px #4A1F351F;
  display: none;
}
.item-menu:hover .hijas, .item-menu:focus-within .hijas { display: block; }
.hijas a { display: block; padding: 9px 14px; border-radius: 10px; font: 400 14.5px var(--cuerpo); letter-spacing: 0; text-transform: none; color: var(--tinta-media); }
.hijas a:hover { background: var(--rosa-claro); color: var(--tinta); }

.utilidades { display: flex; align-items: center; gap: 6px; }
.utilidades.izquierda { justify-self: start; margin-left: -8px; }
.utilidades.derecha { justify-self: end; margin-right: -8px; }
.utilidad {
  display: grid; place-items: center; min-width: 40px; height: 40px;
  background: none; border: 0; padding: 0 8px; cursor: pointer; color: var(--tinta);
}
.utilidad svg { width: 22px; height: 22px; display: block; }
.utilidad .redondel { position: relative; display: block; }
/* La lupa con su palabra al lado: del lado izquierdo equilibra la bolsa. */
.utilidad.buscar { display: flex; gap: 10px; }
.rotulo-utilidad { font: 500 11.5px var(--rotulo); letter-spacing: .16em; text-transform: uppercase; }

.globito {
  position: absolute; top: -7px; right: -10px;
  display: grid; place-items: center;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  background: var(--acento); color: #fff;
  font: 700 10.5px/1 var(--cuerpo);
}
.globito.en-cero { display: none; }

/* El buscador: se abre con la lupa, en una fila debajo de la cabecera. */
.fila-buscar { border-top: 1px solid var(--raya); background: var(--fondo); }
.buscador { position: relative; display: flex; align-items: stretch; }
.buscador.contenedor { padding-block: 12px; }
.buscador input {
  flex: 1; min-width: 0; height: 50px; padding: 0 60px 0 22px;
  border: var(--borde-campo); border-radius: 999px; background: var(--papel);
  font: 400 15px var(--cuerpo); color: var(--tinta);
}
.buscador input:focus { outline: none; border-color: var(--tinta); }
.buscador input::placeholder { color: var(--tinta-suave); }
.buscador button {
  position: absolute; top: 50%; right: calc(var(--aire) + 5px); transform: translateY(-50%);
  width: 40px; height: 40px; display: grid; place-items: center; border-radius: 999px;
  background: var(--tinta); border: 0; cursor: pointer; color: #fff; transition: background .25s;
}
.buscador button:hover { background: var(--ciruela); }
.buscador svg { width: 18px; height: 18px; }

/* ── El movimiento de la cabecera y de la página ─────────────────────────
   Como en bagues.com.ar. Las clases las pone tienda.js en <html>:
   `bajo` cuando la página ya bajó, `cabecera-oculta` mientras se baja (la
   cabecera se esconde y vuelve al subir) y `sobre-oscuro` cuando la
   diapositiva de la tapa es la ciruela. */

.cabecera { transition: transform .45s var(--lento), background-color .35s ease, border-color .35s ease; }
.cabecera-oculta .cabecera { transform: translateY(-100%); }
.logotipo, .utilidad, .hamburguesa, .item-menu > a { transition: color .4s ease, border-color .3s; }
/* La foto de la ficha va pegada debajo de la cabecera: si se esconde, sube. */
.ficha .galeria { transition: top .45s var(--lento); }
.cabecera-oculta .ficha .galeria { top: 24px; }

/* En la portada, arriba de todo, la cabecera es transparente y la tapa se
   ve por debajo. Vuelve a su fondo al pasarle el mouse, al usarla con el
   teclado o con el menú o el buscador abiertos. */
html:not(.bajo) .con-tapa .cabecera:not(:hover, :focus-within, :has(.fila-menu[data-abierto="si"]), :has(.fila-buscar:not([hidden]))) {
  background-color: transparent; border-bottom-color: transparent;
}
html.sobre-oscuro:not(.bajo) .con-tapa .cabecera:not(:hover, :focus-within, :has(.fila-menu[data-abierto="si"]), :has(.fila-buscar:not([hidden]))) :is(.logotipo, .utilidad, .hamburguesa, .item-menu > a) {
  color: #fff; transition-delay: .3s;
}

/* Lo que aparece al entrar en la pantalla (montarRevelado, en tienda.js):
   sube un poco y se aclara; lo que entra junto sale escalonado (--demora). */
@media (prefers-reduced-motion: no-preference) {
  .revelar { opacity: 0; translate: 0 26px; }
  .revelar.visto {
    opacity: 1; translate: 0 0;
    transition: opacity .8s ease var(--demora, 0ms), translate 1s var(--lento) var(--demora, 0ms);
  }
}

/* ── Botones ─────────────────────────────────────────────────────────────
   Pastilla. El lleno magenta es para sumar al pedido, ver el catálogo y
   WhatsApp; el de tinta (.tinta) y el de borde (.borde), para todo lo demás. */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 12px 24px; min-height: 46px;
  background: var(--acento); color: #fff; border: 0; border-radius: var(--radio-boton);
  font: 600 14px/1.25 var(--cuerpo); letter-spacing: .01em; cursor: pointer; text-align: center;
  transition: background .3s ease, color .3s ease, box-shadow .3s ease;
}
.btn:hover { background: var(--acento-hondo); }
.btn svg { width: 17px; height: 17px; flex: none; }
.btn[disabled], .btn.apagado {
  background: var(--raya-suave); color: var(--tinta-suave);
  cursor: not-allowed; pointer-events: none;
}
.btn.grande { min-height: 54px; padding: 15px 30px; font-size: 14.5px; }
.btn.grande svg { width: 19px; height: 19px; }
.btn.ancho { width: 100%; }
.btn.tinta { background: var(--tinta); }
.btn.tinta:hover { background: var(--ciruela); }
.btn.borde { background: none; color: var(--tinta); box-shadow: inset 0 0 0 1.5px var(--tinta); }
.btn.borde:hover { background: var(--tinta); color: #fff; }
.btn.borde-blanco { background: none; color: #fff; box-shadow: inset 0 0 0 1.5px #fff; }
.btn.borde-blanco:hover { background: #fff; color: var(--ciruela); }
.btn-whatsapp svg { width: 20px; height: 20px; }

/* ── El nombre y la equivalencia ─────────────────────────────────────────
   El nombre del producto y, abajo, qué original versiona ("type") o el
   formato. */

.lockup { display: block; min-width: 0; }
.lockup .nombre-producto {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  font: 600 14.5px/1.35 var(--cuerpo); color: var(--tinta);
}
.lockup .equivale {
  margin-top: 3px;
  font: 400 13px/1.4 var(--cuerpo);
  color: var(--tinta-suave);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.lockup .equivale b { font-weight: 600; color: var(--tinta-media); }

/* ── La tarjeta de producto ──────────────────────────────────────────────
   La foto sobre el rosa, el nombre, el precio y el botón al pie. El nombre
   se estira (flex: 1): en una fila, los precios y los botones quedan a la
   misma altura aunque un nombre ocupe dos renglones y otro uno. */

.tarjeta { position: relative; display: flex; flex-direction: column; }
.tarjeta .marco { position: relative; display: block; overflow: hidden; border-radius: var(--radio); background: var(--rosa); }
/* --k, --dx y --dy son el encuadre de cada foto (encuadreDe, en tienda.js):
   el producto queda centrado y del mismo tamaño que los de su forma. */
.tarjeta .marco img {
  width: 100%; height: auto; aspect-ratio: 1; object-fit: contain;
  mix-blend-mode: multiply; scale: var(--k, 1); translate: var(--dx, 0) var(--dy, 0);
  transition: transform .9s var(--lento);
}
.tarjeta:hover .marco img { transform: scale(1.05); }
@media (prefers-reduced-motion: reduce) {
  .tarjeta .marco img, .tarjeta:hover .marco img { transition: none; transform: none; }
}

/* El sello de arriba a la izquierda: "40% off" o "Sin stock". */
.sello {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  padding: 6px 11px; border-radius: 999px; background: var(--acento); color: #fff;
  font: 600 11px/1 var(--rotulo); letter-spacing: .1em; text-transform: uppercase;
}
.sello.apagado { background: var(--tinta); }
.sello.especial { background: var(--ciruela); }
.etiquetas { position: absolute; top: 12px; left: 12px; z-index: 2; display: flex; flex-direction: column; gap: 4px; }
.etiqueta-chica { padding: 6px 11px; border-radius: 999px; background: var(--tinta); color: #fff; font: 600 11px/1 var(--rotulo); letter-spacing: .1em; text-transform: uppercase; }

.tarjeta .nombre { display: block; flex: 1; margin-top: 14px; padding-inline: 2px; }
.tarjeta .precio { margin-top: 8px; padding-inline: 2px; }
.tarjeta .cuotas { margin: 2px 0 0; }

/* Cómo llega: entrega inmediata (lo que hay en el showroom), por encargo o
   preventa. Una línea chica bajo el precio; en la ficha y el carrito, con la
   explicación. */
.disponible { margin: 6px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--tinta-suave); }
.disponible b { font-weight: 600; color: var(--tinta-media); }
.disponible::before { content: ""; display: inline-block; width: 7px; height: 7px; margin: 0 7px 1px 0; border-radius: 50%; background: var(--raya-campo); }
.disponible.inmediata b { color: var(--verde); }
.disponible.inmediata::before { background: var(--verde); }
.disponible.preventa b { color: var(--ciruela); }
.disponible.preventa::before { background: var(--ciruela); }
.tarjeta .disponible { padding-inline: 2px; }
.ficha .disponible { margin-top: 12px; font-size: 13.5px; }
.linea-carrito .disponible { margin: -2px 0 8px; font-size: 12px; }

/* Debajo de "Iniciar compra": lo que no se resuelve en la web, por WhatsApp. */
.pedir-whatsapp { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; font-size: 13px; color: var(--tinta-media); text-align: center; text-decoration: none; }
.pedir-whatsapp svg { width: 18px; height: 18px; flex: none; color: var(--verde); }
.pedir-whatsapp b { font-weight: 600; color: var(--tinta); text-decoration: underline; text-underline-offset: 3px; }
.garantia span a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
/* El botón de la tarjeta, de borde: en una fila de cinco, cinco botones
   llenos se comen las fotos. Se llena al pasar por la tarjeta. */
.tarjeta .btn {
  margin-top: 12px; width: 100%; min-height: 42px; padding: 9px 12px;
  background: none; color: var(--acento-hondo); box-shadow: inset 0 0 0 1.5px var(--acento);
  font-size: 13px; white-space: nowrap;
}
.tarjeta:hover .btn, .tarjeta .btn:focus-visible { background: var(--acento); color: #fff; }
.tarjeta .btn:hover { background: var(--acento-hondo); color: #fff; }
.tarjeta .btn.borde, .tarjeta:hover .btn.borde { background: none; color: var(--tinta); box-shadow: inset 0 0 0 1.5px var(--raya-campo); }
.tarjeta .btn.borde:hover { background: var(--tinta); color: #fff; box-shadow: inset 0 0 0 1.5px var(--tinta); }
.tarjeta .btn.apagado { background: none; box-shadow: inset 0 0 0 1px var(--raya); color: var(--tinta-suave); }

.precio .con {
  display: block; font: 600 17px/1.3 var(--cuerpo); color: var(--tinta);
  font-variant-numeric: tabular-nums;
}
.precio .con small { font: 500 10.5px var(--rotulo); letter-spacing: .12em; text-transform: uppercase; display: block; margin-top: 3px; }
.precio .plata { display: block; font: 400 13.5px var(--cuerpo); color: var(--tinta-media); margin-top: 3px; }
.precio .promo { color: var(--verde); }
.precio .antes { color: var(--tinta-suave); text-decoration: line-through; margin-right: 7px; }
.precio .off { display: inline-block; padding: 2px 9px; border-radius: 999px; background: var(--acento); color: #fff; font: 700 11px/1.5 var(--cuerpo); }
.cuotas { font: 600 13px var(--cuerpo); color: var(--acento-hondo); margin-top: 5px; }
.aviso-stock { font: 600 11px var(--rotulo); color: var(--naranja); margin-top: 8px; text-transform: uppercase; letter-spacing: .12em; }

/* ── Secciones y carruseles ──────────────────────────────────────────────
   Las secciones se separan con aire y alternando el blanco rosado con el
   blanco, sin rayas de punta a punta. */

.seccion { padding: var(--paso) 0; }
.seccion > .contenedor { padding-top: 0; padding-bottom: 0; }

/* El título de una sección de la portada: el rótulo arriba y el título en
   Bodoni, con la itálica para lo que importa. */
.titulo-grande {
  margin-top: 12px;
  font: 500 clamp(30px, 3.7vw, 48px)/1.06 var(--titulo); letter-spacing: -.015em; text-wrap: balance;
}
.titulo-grande em { font-style: italic; font-weight: 400; }
.cabeza-centrada { text-align: center; margin-bottom: clamp(32px, 4vw, 56px); }

/* El de las demás páginas ("También te puede gustar"). */
.titulo-seccion {
  text-align: center; color: var(--tinta);
  font: 500 clamp(26px, 2.8vw, 34px)/1.15 var(--titulo); letter-spacing: -.01em;
  margin: 0 0 clamp(26px, 3vw, 38px); text-wrap: balance;
}
.titulo-chico {
  text-align: center; font: 600 12px/1.4 var(--rotulo); letter-spacing: .2em; text-transform: uppercase;
  margin: 0 0 18px;
}
.ver-todo { text-align: center; margin-top: clamp(28px, 3vw, 40px); }

/* Mujer / Hombre: pastillas, la elegida en tinta. */
.filtro-genero { display: flex; flex-wrap: wrap; gap: 8px; }
.filtro-genero button {
  min-width: 96px; height: 40px; padding: 0 20px; border-radius: 999px;
  border: var(--borde-campo); background: none; color: var(--tinta-media); cursor: pointer;
  font: 500 13.5px var(--cuerpo);
  transition: border-color .3s, background .3s, color .3s;
}
.filtro-genero button:hover { border-color: var(--tinta); color: var(--tinta); }
.filtro-genero button[aria-pressed="true"] { background: var(--tinta); border-color: var(--tinta); color: #fff; }

.carrusel-caja { position: relative; }
.carrusel {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: calc((100% - 4 * 22px) / 5);
  gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; -ms-overflow-style: none;
}
.carrusel::-webkit-scrollbar { display: none; }
.carrusel > * { scroll-snap-align: start; }

.flecha {
  position: absolute; top: 26%; z-index: 3;
  width: 46px; height: 46px; display: grid; place-items: center;
  background: var(--papel); border: 0; border-radius: 999px;
  cursor: pointer; color: var(--tinta); box-shadow: 0 6px 20px #4A1F3526;
  transition: background .3s, color .3s;
}
.flecha:hover { background: var(--tinta); color: #fff; }
.flecha[hidden] { display: none; }
.flecha.antes { left: -20px; }
.flecha.despues { right: -20px; }
.flecha svg { width: 18px; height: 18px; }

.puntos { display: flex; justify-content: center; gap: 9px; margin-top: 26px; }
.puntos button {
  width: 8px; height: 8px; padding: 0; border-radius: 999px;
  border: 0; background: #1B141833; cursor: pointer; transition: background .3s, width .3s;
}
.puntos button[aria-current="true"] { background: var(--tinta); width: 22px; }

/* ── La tapa ─────────────────────────────────────────────────────────────
   Un carrusel de punta a punta, como el de bagues.com.ar, que pasa por
   debajo de la cabecera: una diapositiva por vez, cada una con su fondo
   (rosa, rosa claro o ciruela), el texto a la izquierda y hasta tres
   productos parados sobre un mismo piso. Las fotos traen fondo blanco y se
   multiplican contra el fondo: por eso el fondo lo pinta la diapositiva
   misma y no un envoltorio, y los productos van uno al lado del otro sin
   pisarse (dos fotos multiplicadas, una encima de la otra, se mezclan).

   El cambio: la nueva aparece encima de la que estaba; el texto sube de a
   un renglón y después se paran los productos. */

.tapa { position: relative; z-index: 1; background: var(--rosa); color: var(--tinta); transition: color .4s ease .3s; }
.tapa.oscura { color: #fff; }
/* La tapa sube hasta quedar debajo de la cabecera (--alto-fijo lo mide tienda.js). */
.con-tapa .tapa, .con-tapa #tapa:empty { margin-top: calc(-1 * var(--alto-fijo, 0px)); }
/* Mientras carga, el lugar ya está ocupado: la página no salta. */
#tapa:empty { min-height: clamp(520px, 46vw, 660px); background: var(--rosa); }

.diapos { display: grid; overflow: hidden; touch-action: pan-y; }
.diapo {
  grid-area: 1 / 1; min-width: 0; display: grid;
  background: var(--rosa); color: var(--tinta);
  opacity: 0; visibility: hidden;
  /* La que se va se queda quieta debajo hasta que la nueva termina de aparecer. */
  transition: opacity 0s linear 1s, visibility 0s linear 1s;
}
.diapo.actual { z-index: 1; opacity: 1; visibility: visible; transition: opacity 1s ease; }
.tono-claro { background: var(--rosa-claro); }
.tono-ciruela { background: var(--ciruela); color: #fff; }

.diapo-fila.contenedor {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center;
  gap: clamp(24px, 4vw, 72px);
  min-height: clamp(520px, 46vw, 660px);
  padding-block: calc(var(--alto-fijo, 0px) + clamp(16px, 1.9vw, 28px)) clamp(60px, 5.4vw, 76px);
}
.diapo .dicho { min-width: 0; }
.tono-ciruela .etiqueta { color: #FFFFFFD9; }
.titulo-tapa {
  margin-top: 18px;
  font: 500 clamp(36px, 4.4vw, 62px)/1.04 var(--titulo); letter-spacing: -.02em; text-wrap: balance;
}
.titulo-tapa em { font-style: italic; font-weight: 400; }
.tono-ciruela .titulo-tapa { color: #fff; }
.tono-ciruela .titulo-tapa em { color: var(--rosa); }
.diapo .bajada { margin-top: 22px; font-size: 17px; line-height: 1.7; color: var(--tinta-media); max-width: 46ch; }
.tono-ciruela .bajada { color: #FFFFFFE0; }
/* Los precios van siempre en Montserrat: en Bodoni el 4 y el 1 se confunden. */
.desde-diapo { margin-top: 20px; font-size: 15px; color: var(--tinta-media); }
.desde-diapo b { margin-left: 4px; font: 600 clamp(28px, 3vw, 38px)/1 var(--cuerpo); letter-spacing: -.01em; color: var(--tinta); font-variant-numeric: tabular-nums; }
.desde-diapo s { margin-left: 8px; font-size: 17px; color: var(--tinta-suave); }
.diapo .botones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.tono-ciruela .btn.borde { color: #fff; box-shadow: inset 0 0 0 1.5px #fff; }
.tono-ciruela .btn.borde:hover { background: #fff; color: var(--ciruela); }

/* Los productos, en una fila centrada y todos del mismo alto: el primero al
   medio y los otros dos a los lados. Cada foto trae su producto en otro
   tamaño y con otro margen, así que el lugar y el tamaño de cada una los
   calcula tienda.js (acomodarEscena) con la caja del producto adentro de la
   foto, y los deja en --lado, --izq y --arriba. Hasta entonces no se ve. */
.escena { position: relative; justify-self: center; width: 100%; max-width: 620px; aspect-ratio: 1 / .66; }
.escena .foto {
  position: absolute; left: var(--izq, 0); top: var(--arriba, 0);
  width: var(--lado, 30%); height: auto; max-width: none;
  aspect-ratio: 1; object-fit: contain; mix-blend-mode: multiply;
  opacity: 0; translate: 0 28px;
  transition: opacity .35s ease, translate 0s linear .35s;
}
.escena .foto-1 { --d: .25s; }
.escena .foto-2 { --d: .38s; }
.escena .foto-3 { --d: .5s; }
.diapo.actual .foto.medida {
  opacity: 1; translate: 0 0;
  transition: opacity 1s ease var(--d), translate 1.5s var(--lento) var(--d);
}
/* En la ciruela las fotos no se pueden multiplicar contra el fondo: van
   sobre un paño rosa, con las esquinas de las tarjetas. */
.tono-ciruela .escena { max-width: 520px; padding: 6% 5%; border-radius: calc(var(--radio) + 8px); background: var(--rosa); }

/* El texto de una vista (diapositiva o testimonio) sube al entrar, un
   renglón después del otro, y se va rápido al salir. */
.sube { opacity: 0; translate: 0 26px; transition: opacity .35s ease, translate 0s linear .35s; }
[data-vista].actual .sube {
  opacity: 1; translate: 0 0;
  transition: opacity .9s ease var(--d, .25s), translate 1.2s var(--lento) var(--d, .25s);
}
.dicho > .sube:nth-child(2) { --d: .34s; }
.dicho > .sube:nth-child(3) { --d: .43s; }
.dicho > .sube:nth-child(4) { --d: .52s; }
.dicho > .sube:nth-child(5) { --d: .61s; }

/* Los puntos, abajo a la derecha: el del medio marca cuál va y el anillo se
   cierra en lo que dura la diapositiva. Esa animación es el reloj del
   carrusel (montarPase, en tienda.js): pausarla es pausarlo. */
.tapa-mando.contenedor {
  position: absolute; left: 0; right: 0; bottom: clamp(14px, 1.6vw, 22px); z-index: 2;
  display: flex; align-items: center; justify-content: flex-end; gap: 2px;
  padding-block: 0; pointer-events: none;
}
.tapa-mando > * { pointer-events: auto; }
.pase-puntos { display: flex; align-items: center; }
.pase-puntos button, .pase-pausa {
  width: 30px; height: 30px; display: grid; place-items: center;
  padding: 0; border: 0; background: none; color: inherit; cursor: pointer;
}
.pase-puntos svg { width: 20px; height: 20px; rotate: -90deg; }
.pase-puntos circle { fill: none; stroke: currentColor; stroke-width: 1.5; }
.pase-puntos .centro { fill: currentColor; stroke: none; opacity: .32; transition: opacity .3s; }
.pase-puntos button:hover .centro, .pase-puntos [aria-current="true"] .centro { opacity: 1; }
.pase-puntos .avance { stroke-dasharray: 44; stroke-dashoffset: 44; stroke-linecap: round; }
.pase-puntos [aria-current="true"] .avance { animation: avance var(--dura, 7s) linear forwards; }
.en-pausa .avance, .detenido .avance { animation-play-state: paused !important; }
@keyframes avance { to { stroke-dashoffset: 0; } }
.pase-pausa { opacity: .7; transition: opacity .3s; }
.pase-pausa:hover { opacity: 1; }
.pase-pausa svg { width: 15px; height: 15px; }
.pase-pausa svg:last-child, .pase-pausa[aria-pressed="true"] svg:first-child { display: none; }
.pase-pausa[aria-pressed="true"] svg:last-child { display: block; }

/* La flecha redonda a caballo del borde de abajo: baja a los productos. */
.bajar {
  position: absolute; left: 50%; bottom: 0; z-index: 3;
  width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%;
  background: var(--papel); color: var(--tinta); box-shadow: 0 8px 24px #4A1F3526;
  translate: -50% 50%; transition: background .3s, color .3s;
}
.bajar:hover { background: var(--tinta); color: #fff; }
.bajar svg { width: 18px; height: 18px; animation: asoma 2.4s ease-in-out infinite; }
@keyframes asoma { 0%, 100% { translate: 0 -1px; } 50% { translate: 0 3px; } }

@media (prefers-reduced-motion: reduce) {
  .diapo, .diapo.actual { transition: none; }
  .sube, [data-vista].actual .sube { translate: none; transition: opacity .2s; }
  .escena .foto, .diapo.actual .foto.medida { translate: none; transition: opacity .2s; }
  .avance, .bajar svg { animation: none !important; }
  .pase-pausa { display: none; }
}

/* ── Cómo funciona ───────────────────────────────────────────────────────
   El problema y los tres beneficios de un lado; del otro, un pedido de
   muestra como le llega a Mary por WhatsApp. */

.motivo { background: var(--fondo); }
.motivo-fila.contenedor {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: center;
  gap: clamp(36px, 6vw, 104px);
}
.problema { margin-top: 22px; font-size: 17px; line-height: 1.7; color: var(--tinta-media); max-width: 54ch; }
.beneficios-portada { margin-top: clamp(28px, 3vw, 40px); border-bottom: var(--borde); }
.beneficios-portada li {
  display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.3fr); align-items: baseline; gap: 6px 28px;
  padding: 20px 0; border-top: var(--borde);
}
.beneficios-portada h3 { font: italic 400 clamp(20px, 1.8vw, 23px)/1.2 var(--titulo); }
.beneficios-portada p { font-size: 15px; line-height: 1.6; color: var(--tinta-media); }

.charla { justify-self: center; width: min(100%, 410px); }
.charla-cabeza {
  display: flex; align-items: center; gap: 12px; padding: 14px 20px;
  background: var(--ciruela); color: #fff; border-radius: 26px 26px 0 0;
}
.charla-foto { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 999px; background: var(--rosa); color: var(--ciruela); font: 400 27px/1 var(--firma); padding-top: 4px; }
.charla-quien b { display: block; font: 600 14px/1.3 var(--cuerpo); }
.charla-quien small { display: block; font: 400 11.5px/1.3 var(--cuerpo); opacity: .8; }
.charla-cabeza svg { margin-left: auto; width: 21px; height: 21px; opacity: .85; }
.charla-cuerpo { display: flex; justify-content: flex-end; padding: 24px 18px 28px; background: var(--rosa); border-radius: 0 0 26px 26px; }
.globo {
  max-width: 94%; padding: 15px 17px; background: var(--papel); border-radius: 18px 18px 4px 18px;
  font-size: 13.5px; line-height: 1.65; color: var(--tinta); box-shadow: 0 12px 30px #4A1F3517;
  overflow-wrap: anywhere;
}
.charla figcaption { margin-top: 16px; font-size: 13.5px; line-height: 1.5; color: var(--tinta-suave); text-align: center; text-wrap: balance; }

/* ── Las categorías ──────────────────────────────────────────────────────
   Tres por fila y dos filas: la foto de un producto sobre el rosa, el
   nombre en Bodoni, qué hay adentro y cuántos productos. */

.categorias-grilla { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(32px, 4vw, 52px) clamp(18px, 2.2vw, 30px); }
.categoria { display: flex; flex-direction: column; color: var(--tinta); }
.foto-categoria { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--radio); background: var(--rosa); }
.foto-categoria img {
  position: absolute; inset: 0; margin: auto; height: 100%; width: auto; max-width: none; aspect-ratio: 1; object-fit: contain;
  mix-blend-mode: multiply; transition: transform 1.1s var(--lento);
  scale: var(--k, 1.18); translate: var(--dx, 0) var(--dy, 0);
}
.categoria:hover .foto-categoria img { transform: scale(1.06); }
.dicho-categoria { display: flex; flex-direction: column; flex: 1; padding: 18px 2px 0; }
.nombre-categoria { font: 500 clamp(22px, 2vw, 26px)/1.15 var(--titulo); letter-spacing: -.01em; }
.texto-categoria { margin-top: 8px; font-size: 14.5px; line-height: 1.6; color: var(--tinta-media); }
.ver-categoria {
  margin-top: auto; padding-top: 14px; display: inline-flex; align-items: center; gap: 7px;
  font: 600 11.5px var(--rotulo); letter-spacing: .16em; text-transform: uppercase; color: var(--tinta);
}
.ver-categoria svg { width: 13px; height: 13px; transition: transform .4s var(--lento); }
.categoria:hover .ver-categoria svg { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) {
  .foto-categoria img, .categoria:hover .foto-categoria img { transition: none; }
}

/* ── Regalos, combos y promos ────────────────────────────────────────────
   Lo que Mary arma desde /panel. Las tarjetas son las de siempre, centradas:
   pueden ser una sola o varias. */
.especiales { background: var(--rosa-claro); }
.especiales .cabeza-centrada { margin-bottom: clamp(26px, 3vw, 40px); }
.especiales .cabeza-centrada .bajada { margin: 14px auto 0; max-width: 52ch; color: var(--tinta-media); }
.especiales-grilla { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(28px, 3vw, 40px) 22px; }
.especiales-grilla .tarjeta { width: calc((100% - 66px) / 4); min-width: 210px; max-width: 290px; }
@media (max-width: 640px) {
  .especiales-grilla { gap: 28px 12px; }
  .especiales-grilla .tarjeta { width: calc((100% - 12px) / 2); min-width: 0; }
}

/* La foto que se sube desde el panel llena el marco y va tal cual, sin
   multiplicarse contra el rosa. */
img.foto-propia, .tarjeta .marco img.foto-propia, .galeria .grande img.foto-propia, .linea-carrito img.foto-propia {
  object-fit: cover; mix-blend-mode: normal; scale: none; translate: none;
}
.galeria .grande:has(.foto-propia) { padding: 0; }
/* Un combo sin foto propia: los productos que trae, juntos en el marco. */
.collage { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: center; aspect-ratio: 1; }
.collage img {
  width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; mix-blend-mode: multiply;
  scale: var(--k, 1); translate: var(--dx, 0) var(--dy, 0);
}
.collage img:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: 50%; }
/* "Qué trae", en la ficha de un combo. */
.incluye ul { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 10px; }
.incluye a { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; align-items: center; color: var(--tinta); }
.incluye .foto { display: block; background: var(--rosa); border-radius: var(--radio-chico); overflow: hidden; }
.incluye .foto img {
  display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; mix-blend-mode: multiply;
  scale: var(--k, 1); translate: var(--dx, 0) var(--dy, 0);
}

/* ── Las filas de productos ──────────────────────────────────────────────
   Como las de bagues.com.ar: el título al centro, las pestañas, el precio
   desde de lo que se ve (con el tachado, si lo hay) y el carrusel. Abajo,
   la aclaración de los precios y el enlace a todo. */

.fila-productos { background: var(--papel); }
.fila-productos .cabeza-centrada { margin-bottom: clamp(26px, 3vw, 40px); }
.fila-productos .filtro-genero { justify-content: center; margin-top: 26px; }
.desde-promo { margin-top: 18px; min-height: 32px; font-size: 14.5px; color: var(--tinta-media); }
/* Los precios van siempre en Montserrat: en Bodoni el 4 y el 1 se confunden. */
.desde-promo b { margin-left: 4px; font: 600 clamp(24px, 2.5vw, 31px)/1 var(--cuerpo); letter-spacing: -.01em; color: var(--tinta); font-variant-numeric: tabular-nums; }
.desde-promo s { margin-left: 8px; font-size: 16px; color: var(--tinta-suave); }
.pie-promo {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 18px 40px;
  margin-top: clamp(26px, 3vw, 36px); padding-top: 24px; border-top: var(--borde);
}
.nota-promo { flex: 1 1 320px; max-width: 64ch; font-size: 13px; line-height: 1.6; color: var(--tinta-suave); }
.pie-promo .btn { flex: none; white-space: nowrap; }
.fila-productos .puntos { margin-top: 22px; }

/* ── Los envíos ──────────────────────────────────────────────────────────
   Las zonas en fila sobre una línea que sale de Bell Ville (el punto lleno)
   y se aleja: Córdoba, Catamarca y el resto del país. */

.envios { background: var(--papel); }
.zonas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.zonas li { position: relative; padding: 30px clamp(16px, 2.4vw, 36px) 0 0; border-top: 1px solid var(--tinta); }
.zonas li::before {
  content: ""; position: absolute; top: -6px; left: 0; width: 11px; height: 11px; border-radius: 999px;
  background: var(--papel); box-shadow: inset 0 0 0 1.5px var(--tinta);
}
.zonas li:first-child::before { background: var(--acento); box-shadow: none; }
.zonas h3 { font: italic 400 clamp(22px, 2.1vw, 27px)/1.15 var(--titulo); text-wrap: balance; }
.zonas p { margin-top: 10px; font-size: 15px; line-height: 1.6; color: var(--tinta-media); max-width: 27ch; }

/* ── Los testimonios ─────────────────────────────────────────────────────
   De a uno y cambiando solos: la frase grande al centro y, abajo, quién la
   dice. Cada nombre es un botón, con una línea que se llena mientras dura
   su frase (el mismo reloj que los puntos de la tapa). */

.dichos { display: grid; max-width: 920px; margin-inline: auto; touch-action: pan-y; }
.dicho-testimonio {
  grid-area: 1 / 1; display: grid; align-items: center; text-align: center;
  visibility: hidden; transition: visibility 0s linear .35s;
}
.dicho-testimonio.actual { visibility: visible; transition: none; }
.dicho-testimonio p { font: italic 400 clamp(24px, 3vw, 40px)/1.3 var(--titulo); letter-spacing: -.01em; text-wrap: balance; }
.quienes { display: flex; justify-content: center; gap: clamp(16px, 3vw, 44px); margin-top: clamp(32px, 4vw, 54px); }
.quienes button {
  position: relative; flex: 0 1 250px; padding: 16px 0 0;
  background: none; border: 0; border-top: 1px solid var(--raya-campo);
  text-align: left; cursor: pointer; color: var(--tinta-suave);
}
.quienes b { display: block; font: 600 14.5px/1.4 var(--cuerpo); transition: color .3s; }
.quienes span { display: block; margin-top: 2px; font-size: 13px; line-height: 1.45; }
.quienes button:hover b, .quienes [aria-current="true"] b { color: var(--tinta); }
.quienes .avance { position: absolute; top: -1.5px; left: 0; width: 100%; height: 2px; background: var(--tinta); transform: scaleX(0); transform-origin: left; }
.quienes [aria-current="true"] .avance { animation: avance-linea var(--dura, 8s) linear forwards; }
@keyframes avance-linea { to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  .quienes [aria-current="true"] .avance { transform: scaleX(1); }
}
/* El aviso de que todavía son de ejemplo: a la vista, para que no se publiquen así. */
.de-ejemplo {
  display: inline-block; margin-top: 18px; padding: 7px 16px; border-radius: 999px;
  border: 1px dashed var(--acento); font-size: 12.5px; line-height: 1.4; color: var(--acento-hondo);
}

/* ── La banda de Emprendé conmigo ────────────────────────────────────────
   En ciruela, de punta a punta: el título grande de un lado y la invitación
   del otro. */

.banda-emprende { background: var(--ciruela); color: #fff; }
.banda-fila.contenedor {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center;
  gap: clamp(24px, 5vw, 88px); padding-block: clamp(60px, 8vw, 116px);
}
.banda-emprende h2 { font: 500 clamp(44px, 6vw, 84px)/.98 var(--titulo); letter-spacing: -.025em; color: #fff; }
.banda-emprende h2 em { display: block; color: var(--rosa); }
.banda-emprende .bajada { font-size: 18px; line-height: 1.65; color: #FFFFFFE0; max-width: 44ch; }
.banda-emprende .botones { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 30px; margin-top: 30px; }
.enlace-banda {
  display: inline-flex; align-items: center; gap: 7px; padding-bottom: 4px; border-bottom: 1px solid #FFFFFF73;
  font: 600 11.5px var(--rotulo); letter-spacing: .16em; text-transform: uppercase; color: #fff;
  transition: border-color .3s;
}
.enlace-banda:hover { border-bottom-color: #fff; }
.enlace-banda svg { width: 13px; height: 13px; }

/* ── Ficha de producto ───────────────────────────────────────────────────── */

.ficha { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(28px, 4vw, 64px); align-items: start; }

.galeria { display: grid; gap: 16px; }
.ficha .galeria { position: sticky; top: calc(var(--alto-fijo, 120px) + 24px); }
.galeria.con-miniaturas { grid-template-columns: 64px minmax(0, 1fr); }
.galeria .miniaturas { display: flex; flex-direction: column; gap: 10px; }
.galeria .miniaturas button { padding: 0; border: 1.5px solid transparent; border-radius: var(--radio-chico); background: var(--rosa); cursor: pointer; display: block; overflow: hidden; transition: border-color .3s; }
.galeria .miniaturas button[aria-current="true"] { border-color: var(--tinta); }
.galeria .miniaturas img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; mix-blend-mode: multiply; scale: var(--k, 1); translate: var(--dx, 0) var(--dy, 0); }
/* La foto grande sobre el rosa, como en las tarjetas. */
.galeria .grande { position: relative; background: var(--rosa); border-radius: calc(var(--radio) + 6px); overflow: hidden; padding: 5%; }
.galeria .grande img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; mix-blend-mode: multiply; scale: var(--k, 1); translate: var(--dx, 0) var(--dy, 0); }
.galeria .contador { position: absolute; bottom: 14px; right: 18px; font: 500 11px var(--rotulo); letter-spacing: .12em; color: var(--tinta-suave); }
.galeria .grande .etiquetas, .galeria .grande .sello { top: 18px; left: 18px; }

.ficha .datos { min-width: 0; }
.ficha .migas { margin-bottom: 16px; }
.ficha h1, .ficha h2, .ficha h3, .pagina .ficha h1 { margin: 0; color: var(--tinta); font: 500 clamp(32px, 3.8vw, 50px)/1.05 var(--titulo); letter-spacing: -.015em; }

.ficha .equivalencia {
  margin-top: 18px; padding: 16px 0; border-block: var(--borde);
  font: 400 15px/1.5 var(--cuerpo); color: var(--tinta-media);
  display: flex; flex-wrap: wrap; gap: 8px 24px;
}
.ficha .equivalencia b { font-weight: 600; color: var(--tinta); }
.ficha .equivalencia .dato { display: inline-flex; align-items: baseline; gap: 7px; }
.ficha .equivalencia .dato span { color: var(--tinta-suave); }

.ficha .precio { margin-top: 22px; }
.ficha .precio .con { font: 600 clamp(26px, 2.8vw, 32px)/1.1 var(--cuerpo); letter-spacing: -.01em; }
.ficha .precio .plata { font-size: 15px; }
.ficha .sin-impuestos { font-size: 12.5px; color: var(--tinta-suave); margin-top: 8px; }
.ficha .cuotas { font-size: 14.5px; margin-top: 10px; }
.ficha .descuento { font-size: 14.5px; margin-top: 12px; color: var(--tinta-media); }
.ficha .descuento b { color: var(--tinta); font-weight: 700; }
.ficha .ver-detalles { font-size: 14px; color: var(--tinta-media); text-decoration: underline; text-underline-offset: 3px; display: inline-block; margin-top: 10px; }
.ficha .vendidos { font-size: 12px; color: var(--tinta-suave); margin-bottom: 8px; }

.compra { display: flex; gap: 12px; margin-top: 26px; }
.cantidad { display: flex; align-items: center; flex: none; border: var(--borde-campo); border-radius: 999px; background: var(--papel); overflow: hidden; }
.cantidad button { width: 42px; height: 50px; background: none; border: 0; cursor: pointer; font-size: 18px; }
.cantidad button:hover { color: var(--acento); }
.cantidad button[disabled] { opacity: .35; cursor: default; }
.cantidad span { min-width: 26px; text-align: center; font: 700 15px var(--cuerpo); }
.compra .btn { flex: 1; min-height: 52px; font-size: 15px; white-space: nowrap; }
.ficha .consultar { margin-top: 12px; font-size: 14px; color: var(--tinta-media); }

.garantias { margin-top: 28px; display: grid; gap: 16px; }
.garantia { display: grid; grid-template-columns: 22px 1fr; gap: 13px; align-items: start; }
.garantia svg { width: 22px; height: 22px; color: var(--tinta); }
.garantia b { display: block; font-size: 15px; font-weight: 600; }
.garantia span { font-size: 14px; color: var(--tinta-media); }

.envio-caja { margin-top: 26px; padding-top: 24px; border-top: var(--borde); }
.envio-caja label, .rotulo-envio { display: block; font: 600 11.5px var(--rotulo); letter-spacing: .2em; text-transform: uppercase; color: var(--tinta-suave); margin-bottom: 10px; }
/* Cómo llega a cada zona, cuando no hay nada que calcular por código postal. */
.zonas-ficha li { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: 4px 16px; padding: 11px 0; border-top: 1px solid var(--raya-suave); font-size: 14px; line-height: 1.5; }
.zonas-ficha li:first-child { border-top: 0; padding-top: 2px; }
.zonas-ficha b { font-weight: 600; }
.zonas-ficha span { color: var(--tinta-media); }
.envio-caja .fila { display: flex; gap: 10px; }
.envio-caja input {
  flex: 1; min-width: 0; height: 48px; padding: 0 20px; font: 400 15px var(--cuerpo);
  border: var(--borde-campo); border-radius: 999px; background: var(--papel); color: var(--tinta);
}
.envio-caja input:focus { border-color: var(--tinta); outline: none; }
.envio-caja button {
  flex: none; padding: 0 24px; background: none; cursor: pointer; color: var(--tinta);
  border: 1.5px solid var(--tinta); border-radius: 999px; font: 600 14px var(--cuerpo);
  transition: background .3s, color .3s;
}
.envio-caja button:hover { background: var(--tinta); color: #fff; }
.envio-caja .resultado { font-size: 14px; margin-top: 12px; color: var(--tinta-media); }

.variantes { margin-top: 26px; }
.rotulo-variantes { font: 600 11.5px var(--rotulo); letter-spacing: .2em; text-transform: uppercase; color: var(--tinta-suave); margin: 0 0 12px; }
.rotulo-variantes b { color: var(--tinta); font-weight: 600; }
.botones-variantes { display: flex; flex-wrap: wrap; gap: 9px; }
.botones-variantes button {
  min-height: 44px; min-width: 56px; padding: 8px 18px;
  background: var(--papel); border: var(--borde-campo); border-radius: 999px;
  font: 400 14px var(--cuerpo); cursor: pointer; transition: border-color .3s, background .3s, color .3s;
}
.botones-variantes button:hover { border-color: var(--tinta); }
.botones-variantes button[aria-pressed="true"] { border-color: var(--tinta); background: var(--tinta); color: #fff; }
.botones-variantes button.sin { color: var(--tinta-suave); text-decoration: line-through; }
.botones-variantes button.sin[aria-pressed="true"] { background: var(--papel); color: var(--tinta-suave); border-color: var(--raya); }

.avisame { margin-top: 18px; padding: 22px; background: var(--papel); border: var(--borde); border-radius: var(--radio); }
.avisame label { display: block; font-size: 14px; margin-bottom: 12px; color: var(--tinta-media); }
.avisame label b, .avisame .listo b { display: block; font: 700 var(--h5) var(--cuerpo); color: var(--tinta); margin-bottom: 4px; }
.avisame .fila { display: flex; gap: 10px; }
.avisame input {
  flex: 1; width: 0; min-width: 0; height: 48px; padding: 0 20px; font: 400 15px var(--cuerpo);
  border: var(--borde-campo); border-radius: 999px; background: var(--papel); color: var(--tinta);
}
.avisame button[type="submit"] {
  flex: none; padding: 0 22px; background: var(--tinta); color: #fff; border: 0; border-radius: 999px; cursor: pointer;
  font: 600 14px var(--cuerpo);
}
.avisame button[type="submit"]:hover { background: var(--ciruela); }
.avisame button[type="submit"][disabled] { opacity: .6; cursor: default; }
.avisame .resultado { font-size: 13px; margin: 10px 0 0; color: var(--tinta-media); }
.avisame .resultado:empty { display: none; }
.avisame .listo { font-size: 14px; margin: 0; color: var(--tinta-media); }
.avisame .otro-numero { margin-top: 10px; padding: 0; background: none; border: 0; font-size: 13px; text-decoration: underline; cursor: pointer; color: var(--tinta-suave); }

.descripcion { margin-top: var(--paso); max-width: 68ch; }
.descripcion h2 { font-size: var(--h2); margin-bottom: 18px; }
.descripcion p { font-size: 16px; margin-bottom: 14px; color: var(--tinta-media); }

/* Las notas olfativas: tres tramos en el orden en que se sienten. Es la
   única lista numerada de la tienda porque es lo único que va en orden. */
.notas {
  margin-top: var(--paso); padding-top: 28px; border-top: var(--borde);
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 2.2fr); gap: clamp(24px, 4vw, 56px);
}
.cabeza-notas h2 { font-size: var(--h2); margin-top: 8px; }
.familia-notas { display: flex; align-items: center; gap: 9px; margin-top: 16px; font-size: 14px; color: var(--tinta-media); }
.familia-notas .muestra { width: 12px; height: 12px; border-radius: 999px; flex: none; }
.tramos { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); counter-reset: tramo; }
.tramos li { counter-increment: tramo; padding: 0 clamp(14px, 2vw, 26px); border-left: var(--borde); }
.tramos li:first-child { padding-left: 0; border-left: 0; }
.tramo { display: grid; gap: 4px; margin-bottom: 14px; }
.tramo b { font: italic 400 24px/1.2 var(--titulo); }
.tramo b::before { content: counter(tramo) ". "; font-style: normal; color: var(--tinta-suave); }
.tramo span { font: 500 11.5px var(--rotulo); letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-suave); }
.lista-notas { font-size: 16px; line-height: 1.6; color: var(--tinta-media); }
.lista-notas .punto { color: var(--tinta-suave); }

@media (max-width: 900px) {
  .notas { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .tramos { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .tramos li, .tramos li:first-child { padding: 16px 0; border-left: 0; border-top: 1px solid var(--raya-suave); }
}

/* ── Migas ───────────────────────────────────────────────────────────────── */

.migas { font-size: 13px; color: var(--tinta-suave); margin-bottom: 10px; }
.migas a:hover { color: var(--tinta); text-decoration: underline; text-underline-offset: 3px; }
.migas .separador { margin: 0 8px; }

/* ── Listado de productos ────────────────────────────────────────────────── */

.pagina { padding-bottom: var(--paso); }
.encabezado-listado { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.encabezado-listado h1 { font-size: var(--h1); }
.encabezado-listado h1 + .total-listado { margin-right: auto; padding-bottom: 7px; }
/* En la computadora: el título con la cantidad debajo, y el orden a la
   derecha, abajo de todo, en la línea de la cantidad. */
@media (min-width: 901px) {
  .encabezado-listado { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 6px 24px; }
  .pagina .encabezado-listado h1 { grid-column: 1; margin: 0; }
  .encabezado-listado h1 + .total-listado { grid-column: 1; grid-row: 2; padding: 0; }
  .encabezado-listado .orden { grid-column: 2; grid-row: 1 / span 2; }
}
.orden { display: flex; flex-direction: column; gap: 6px; font: 500 11px var(--rotulo); letter-spacing: .18em; text-transform: uppercase; color: var(--tinta-suave); }
/* El desplegable con su propia flechita, la misma línea fina de los íconos,
   en lugar de la del sistema. */
.orden select {
  width: 200px; height: 42px; padding: 0 38px 0 14px; font: 400 14px var(--cuerpo);
  color: var(--tinta); border: var(--borde-campo); border-radius: 999px; cursor: pointer;
  -webkit-appearance: none; appearance: none;
  background: var(--papel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B1418' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 12px center / 16px no-repeat;
}
.orden select:hover, .orden select:focus { border-color: var(--tinta); }

.catalogo { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); margin-top: 32px; }
.filtros h2 { font: 600 12px var(--rotulo); letter-spacing: .18em; text-transform: uppercase; color: var(--tinta); margin-bottom: 18px; }
.grupo-filtro { margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--raya-suave); }
.grupo-filtro h6 { font: 500 11px var(--rotulo); letter-spacing: .18em; text-transform: uppercase; color: var(--tinta-suave); margin-bottom: 12px; }
.grupo-filtro li { margin-bottom: 4px; }
.grupo-filtro a, .grupo-filtro label { font-size: 15px; cursor: pointer; color: var(--tinta-media); display: block; padding: 3px 0; }
.grupo-filtro a:hover { color: var(--tinta); }
.grupo-filtro a[aria-current="page"] { color: var(--tinta); font-weight: 600; }
.grupo-filtro .oculto { display: none; }
.grupo-filtro[data-abierto="si"] .oculto { display: block; }
.ver-mas {
  background: none; border: 0; padding: 6px 0 0; cursor: pointer;
  font: 400 13px var(--cuerpo); text-decoration: underline; color: var(--tinta-media);
}

.grilla { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(32px, 3.4vw, 48px) 22px; }
.hueco { grid-column: 1 / -1; padding: 56px 0; text-align: center; color: var(--tinta-media); }
.zona-mas { text-align: center; margin-top: 44px; }
.total-listado { font-size: 13px; color: var(--tinta-suave); }

/* ── Páginas de texto ────────────────────────────────────────────────────── */

.pagina h1 { font-size: var(--h1); margin-bottom: 28px; }
.pagina > .migas + .etiqueta { margin: 26px 0 10px; }
.texto { max-width: 74ch; }
.texto p { font-size: 16px; margin-bottom: 18px; color: var(--tinta-media); }
.texto ul { list-style: none; padding: 0; margin: 32px 0 14px; }
.texto li { font-size: 16px; margin-bottom: 10px; }
.texto li strong, .texto strong { font-weight: 600; color: var(--tinta); }
.texto a:not(.btn) { color: var(--tinta); text-decoration: underline; text-underline-offset: 3px; }
.texto .pregunta {
  font: 500 clamp(22px, 2.2vw, 26px)/1.2 var(--titulo); letter-spacing: -.01em; color: var(--tinta);
  margin: 40px 0 14px; padding-top: 24px; border-top: var(--borde);
}
.texto .pregunta:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

/* ── Emprendé y por mayor ────────────────────────────────────────────────── */

.texto .bajada-emprende { font-size: 19px; color: var(--tinta); max-width: 46ch; }

.cabeza-pagina { margin: 8px 0 clamp(28px, 4vw, 44px); }
.cabeza-pagina h1, .pagina .cabeza-pagina h1 { margin-bottom: 14px; }
.cabeza-pagina .bajada-emprende { font-size: 18px; color: var(--tinta-media); max-width: 52ch; }

/* Por mayor y el equipo, lado a lado en dos tarjetas blancas. La
   invitación va al pie de cada una (margin-top: auto) para que las dos
   bandas lilas queden a la misma altura. */
.caminos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); align-items: stretch; }
.camino { display: flex; flex-direction: column; padding: clamp(24px, 3.5vw, 44px); background: var(--papel); border-radius: var(--radio); scroll-margin-top: calc(var(--alto-fijo, 120px) + 16px); }
.camino h2 { font-size: var(--h2); margin: 12px 0 18px; }
.camino .bajada-emprende { font-size: 16.5px; color: var(--tinta-media); max-width: 46ch; }
.camino .beneficios { margin: 22px 0 32px; }
.camino .beneficios li { font-size: 15.5px; }
.camino .invitacion { margin-top: auto; }
@media (max-width: 900px) { .caminos { grid-template-columns: minmax(0, 1fr); } }
/* Emprendé conmigo: los tres pilares en fila y, abajo, la invitación a lo ancho. */
.pilares { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); align-items: stretch; }
.pilares .camino h2 { font-size: clamp(24px, 2.3vw, 30px); margin: 0 0 14px; }
.cierre-emprende { margin-top: clamp(16px, 2vw, 24px); align-items: center; text-align: center; }
.cierre-emprende .bajada-emprende { margin-inline: auto; }
.cierre-emprende .invitacion { margin-top: 26px; align-self: stretch; }
@media (max-width: 900px) { .pilares { grid-template-columns: minmax(0, 1fr); } }

.beneficios { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 12px; }
.beneficios li { position: relative; padding-left: 30px; font-size: 16.5px; color: var(--tinta-media); }
.beneficios li::before {
  content: ""; position: absolute; left: 0; top: .25em; width: 18px; height: 18px; background: var(--tinta);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.beneficios strong { color: var(--tinta); }

/* La invitación al pie de un camino: sobre el rosa, con el botón magenta
   porque abre WhatsApp. */
.invitacion {
  background: var(--rosa); color: var(--tinta); padding: clamp(26px, 4vw, 40px);
  margin: 40px 0 0; border-radius: var(--radio); text-align: center;
}
.texto .invitacion .frase, .invitacion .frase {
  font: italic 400 clamp(22px, 2.2vw, 27px)/1.25 var(--titulo);
  color: var(--tinta); margin: 12px auto 24px; max-width: 26ch; text-wrap: balance;
}
.invitacion .botones { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

/* ── La página de error ──────────────────────────────────────────────────── */

.perdida { padding-top: clamp(40px, 7vw, 96px); }
.perdida h1 { margin: 12px 0 16px; font-size: var(--h1); max-width: 20em; }
.perdida .bajada { font-size: 17px; color: var(--tinta-media); max-width: 52ch; }
.buscador-grande { margin-top: 32px; max-width: 560px; margin-inline: 0; }
.buscador-grande input { height: 56px; font-size: 16px; }
.buscador-grande button { width: 56px; height: 56px; }
.atajos-titulo { margin-top: 44px; color: var(--tinta-suave); }
.atajos { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }

.contacto { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); }
.contacto .datos li { display: grid; grid-template-columns: 18px 1fr; gap: 14px; font-size: 15px; margin-bottom: 18px; color: var(--tinta-media); }
.contacto .datos svg { width: 17px; height: 17px; margin-top: 4px; color: var(--tinta); }
.contacto .datos a:hover { text-decoration: underline; text-underline-offset: 3px; }
.contacto form { max-width: 520px; }
.campo { margin-bottom: 18px; }
.campo label { display: block; font: 600 11.5px var(--rotulo); letter-spacing: .2em; text-transform: uppercase; color: var(--tinta-suave); margin-bottom: 8px; }
.campo input, .campo textarea {
  width: 100%; padding: 13px 20px; font: 400 15px var(--cuerpo); color: var(--tinta);
  border: var(--borde-campo); border-radius: 999px; background: var(--papel);
}
.campo textarea { border-radius: var(--radio-medio); }
.campo input:focus, .campo textarea:focus { border-color: var(--tinta); outline: none; }
.campo textarea { min-height: 140px; resize: vertical; }
.campo input::placeholder, .campo textarea::placeholder { color: var(--tinta-suave); }
.aviso-arrepentimiento { font-size: 14px; margin-bottom: 20px; padding: 16px 20px; border-radius: var(--radio-medio); background: var(--rosa-claro); color: var(--tinta-media); }
.arrepentimiento-listo p { font-size: 15px; margin-bottom: 10px; color: var(--tinta-media); }
.arrepentimiento-listo .codigo { font: 700 28px var(--cuerpo); letter-spacing: .12em; color: var(--tinta); margin-bottom: 18px; }

/* ── Carrito ─────────────────────────────────────────────────────────────── */

.telon {
  position: fixed; inset: 0; z-index: 60; background: #1B141873;
  opacity: 0; transition: opacity .3s;
}
.telon[data-abierto="si"] { opacity: 1; }

.panel {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 70;
  width: min(440px, 100%); background: var(--papel);
  display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .34s ease;
}
.panel[data-abierto="si"] { transform: none; }
.panel .cabeza {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 26px 18px; border-bottom: var(--borde);
}
.panel .cabeza h2 { font: italic 400 28px/1 var(--titulo); letter-spacing: 0; }
.panel .cerrar { background: none; border: 0; cursor: pointer; padding: 8px; margin-right: -8px; }
.panel .cerrar svg { width: 22px; height: 22px; display: block; }
.panel .adentro { flex: 1; overflow-y: auto; padding: 8px 26px; }
/* El pie del pedido lleva las cuentas, dónde lo recibe, cómo paga y el
   botón: en una pantalla baja no tiene que comerse la lista. */
.panel .adentro { min-height: 110px; }
.panel .pie-panel { flex: none; max-height: 70%; overflow-y: auto; padding: 16px 26px 22px; border-top: var(--borde); }
.panel .pie-panel:empty { display: none; }

.linea-carrito {
  display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 14px;
  padding: 18px 0; border-bottom: 1px solid var(--raya-suave);
}
.linea-carrito .foto { background: var(--rosa); border-radius: var(--radio-chico); overflow: hidden; align-self: start; }
.linea-carrito img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; mix-blend-mode: multiply; scale: var(--k, 1); translate: var(--dx, 0) var(--dy, 0); }
.linea-carrito h4 { font: 600 14px/1.4 var(--cuerpo); margin-bottom: 2px; }
.linea-carrito .variante-linea { font-size: 13px; color: var(--tinta-suave); margin: 0 0 8px; }
.linea-carrito .variante-linea b { font-weight: 600; color: var(--tinta-media); }
.linea-carrito .importe { font: 600 15px var(--cuerpo); font-variant-numeric: tabular-nums; }
.linea-carrito .cantidad button { width: 34px; height: 36px; font-size: 16px; }
.quitar {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-size: 13px; color: var(--tinta-suave); text-decoration: underline;
}
.quitar:hover { color: var(--tinta); }

.cuentas { margin: 4px 0 14px; font-size: 15px; }
.cuentas > div { display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; }
.cuentas > div > span:last-child { font-variant-numeric: tabular-nums; }
.cuentas .ahorro { color: var(--verde); }
.cuentas .total {
  font-size: 15px; font-weight: 600; border-top: var(--borde);
  margin-top: 10px; padding-top: 14px; align-items: baseline;
}
.cuentas .total:first-child { border-top: 0; margin-top: 0; padding-top: 4px; }
.cuentas .total > span:last-child { font: 600 22px/1 var(--cuerpo); letter-spacing: -.01em; }

/* El final del pedido por WhatsApp: dónde lo recibe y cómo paga. */
.para-pedir { display: grid; gap: 12px; margin-bottom: 16px; }
.campo-pedido { display: grid; gap: 6px; }
.campo-pedido > span { font: 600 11px var(--rotulo); letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-suave); }
.campo-pedido select, .campo-pedido input {
  width: 100%; height: 46px; padding: 0 20px; font: 400 15px var(--cuerpo); color: var(--tinta);
  border: var(--borde-campo); border-radius: 999px; background-color: var(--papel);
}
.campo-pedido select {
  padding-right: 44px; cursor: pointer; -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B1418' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; background-size: 16px;
}
.campo-pedido select:focus, .campo-pedido input:focus { border-color: var(--tinta); outline: none; }
.falta-zona { margin-bottom: 10px; font-size: 13.5px; font-weight: 600; color: var(--acento-hondo); }
.nota-pedido { margin-top: 10px; font-size: 12.5px; line-height: 1.5; color: var(--tinta-suave); text-align: center; text-wrap: balance; }
.aviso-envio {
  font-size: 13.5px; background: var(--rosa-claro); border-radius: var(--radio-chico);
  padding: 13px 15px; margin-bottom: 10px; color: var(--tinta-media);
}
.aviso-envio b { color: var(--tinta); font-weight: 600; }

/* ── Pie ─────────────────────────────────────────────────────────────────
   Blanco, con los datos del brief: quién es, de dónde, cómo escribirle y la
   aclaración de los precios. */

.pie { background: var(--papel); color: var(--tinta); font-size: 15px; padding: var(--paso) 0 0; margin-top: var(--paso); border-top: 1px solid var(--raya); }
/* Si arriba va la banda de Emprendé o una página de texto, el pie se le pega. */
main:has(.banda-emprende) + .pie { margin-top: 0; border-top: 0; }
.pagina + .pie { margin-top: 0; }
.pie a:hover { text-decoration: underline; text-underline-offset: 3px; }
.pie-grilla { display: grid; grid-template-columns: 1.3fr 1.1fr 1fr; gap: clamp(28px, 4vw, 64px); }
.pie .marca { display: inline-block; }
.pie .marca:hover { text-decoration: none; }
.pie .logotipo { font-size: 15px; align-items: flex-start; }
.pie .lema { margin: 22px 0 0; color: var(--tinta-media); max-width: 36ch; }
.pie h5 { font: 600 11.5px var(--rotulo); letter-spacing: .2em; text-transform: uppercase; color: var(--tinta-suave); margin-bottom: 18px; }
.pie .datos li { display: grid; grid-template-columns: 18px 1fr; gap: 12px; margin-bottom: 14px; color: var(--tinta-media); }
.pie .datos svg { width: 16px; height: 16px; margin-top: 5px; color: var(--tinta); }
.pie .enlaces li { margin-bottom: 11px; }
.pie .enlaces a { color: var(--tinta-media); }

/* Abajo deja lugar para el botón de WhatsApp (56px a 20px del borde). */
.legal {
  margin-top: var(--paso); padding-block: 26px 96px; font-size: 12.5px; line-height: 1.7; color: var(--tinta-suave);
  background: linear-gradient(var(--raya), var(--raya)) top center / calc(100% - 2 * var(--aire)) 1px no-repeat;
}
.legal a { text-decoration: underline; text-underline-offset: 3px; }
.legal p { margin-bottom: 6px; }

/* ── El botón de WhatsApp ────────────────────────────────────────────────── */

.wa {
  position: fixed; right: 20px; bottom: 20px; z-index: 50;
  width: 56px; height: 56px; border-radius: 999px;
  background: var(--acento); color: #fff; display: grid; place-items: center;
  box-shadow: 0 10px 26px #4A1F3540; transition: background .3s, transform .5s var(--lento);
}
.wa:hover { transform: translateY(-2px); }
.wa:hover { background: var(--acento-hondo); }
.wa svg { width: 26px; height: 26px; }

/* ── Checkout y seguimiento ──────────────────────────────────────────────
   Llevan la misma ropa pero su propio esqueleto, y una cabecera sin
   buscador ni carrito, porque quien está acá ya eligió. */

.cabecera-flujo { border-bottom: var(--borde); background: var(--fondo); }
.cabecera-flujo .envoltorio {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding-block: 16px;
}
.cabecera-flujo nav a { font: 500 12px var(--rotulo); letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-media); }
.cabecera-flujo nav a:hover { color: var(--tinta); }

/* Una opción que hoy no se puede elegir (la tarjeta sin Mercado Pago, el
   efectivo con envío por correo): se ve, pero apagada, y dice por qué. */
.opcion.apagada { opacity: .6; cursor: not-allowed; }
.opcion.apagada:hover { border-color: var(--raya); }

.error {
  background: #B4610E12; border: 1px solid #B4610E66; color: #8A4A0B;
  padding: 14px 18px; border-radius: var(--radio-chico); font-size: 15px; margin-bottom: 20px;
}
.vacio { padding: 56px 0; text-align: center; color: var(--tinta-media); }

/* ── Teléfono y tablet ───────────────────────────────────────────────────── */

@media (max-width: 1180px) {
  .menu { gap: 0 18px; font-size: 11px; letter-spacing: .12em; }
  .carrusel { grid-auto-columns: calc((100% - 3 * 20px) / 4); gap: 20px; }
}

/* Entre la tablet y la notebook chica el menú se aprieta para seguir en
   un solo renglón. */
@media (max-width: 1040px) and (min-width: 901px) {
  .menu { gap: 0 13px; font-size: 10px; letter-spacing: .08em; }
}

@media (max-width: 1100px) {
  .grilla { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  /* Con letra de menos de 16px el iPhone agranda la página al tocar un campo
     y después no vuelve. */
  html body input:not([type="checkbox"]):not([type="radio"]),
  html body select, html body textarea { font-size: 16px; }

  /* Hamburguesa y lupa, el logo al medio y la bolsa. */
  .fila-cabecera { gap: 8px; }
  .fila-cabecera.contenedor { padding-block: 8px; }
  .hamburguesa { display: block; }
  .fila-cabecera .logotipo { font-size: 10px; }
  .utilidades { gap: 0; }
  .utilidades.izquierda { margin-left: -10px; }
  .utilidades.derecha { margin-right: -10px; }
  .utilidad { min-width: 40px; padding: 0 8px; }
  .rotulo-utilidad { display: none; }
  .cabecera-flujo .marca, .pie .marca { justify-self: start; }
  .cabecera-flujo .logotipo { font-size: 10px; }

  .fila-menu { display: none; max-height: calc(100vh - 120px); overflow-y: auto; border-top: 1px solid var(--raya); }
  .fila-menu[data-abierto="si"] { display: block; }
  .menu { flex-direction: column; align-items: stretch; gap: 0; font-size: 12px; letter-spacing: .14em; }
  .menu.contenedor { padding-block: 4px 12px; }
  .item-menu.solo-celu { display: block; }
  .item-menu > a, .item-menu > a:hover { padding: 14px 0; border-bottom: 1px solid var(--raya); }
  .hijas { position: static; display: block; min-width: 0; padding: 4px 0 8px 16px; border: 0; border-radius: 0; box-shadow: none; background: none; }
  .hijas a { padding: 8px 0; }
  .hijas a:hover { background: none; }

  .carrusel { grid-auto-columns: calc((100% - 14px) / 2); gap: 14px; }
  .flecha { display: none; }

  .catalogo { grid-template-columns: minmax(0, 1fr); }
  .grilla { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 14px; }

  .lockup .nombre-producto { font-size: 13.5px; }
  .lockup .equivale { font-size: 12.5px; }
  .precio .con { font-size: 16px; }
  .tarjeta .marco { border-radius: var(--radio-medio); }
  .tarjeta .btn { font-size: 12px; padding-inline: 6px; }

  .ficha { grid-template-columns: minmax(0, 1fr); }
  .ficha .galeria { position: static; }
  .galeria .grande { width: min(100%, 58vh, 600px); margin-inline: auto; }
  .galeria { grid-template-columns: minmax(0, 1fr); }
  .galeria.con-miniaturas { grid-template-columns: minmax(0, 1fr); }
  .galeria .miniaturas { flex-direction: row; order: 2; gap: 10px; justify-content: center; }
  .galeria .miniaturas button { width: 60px; flex: none; }

  .motivo-fila.contenedor { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .categorias-grilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .zonas { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }

  .banda-fila.contenedor { grid-template-columns: minmax(0, 1fr); }
  .banda-emprende h2 em { display: inline; }

  .contacto { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .pie-grilla { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .encabezado-listado { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; }
  .encabezado-listado h1 { flex: 1 1 100%; }
}

@media (max-width: 640px) {
  .beneficios-portada li { grid-template-columns: minmax(0, 1fr); }

  /* Las categorías de a una, en renglón: la foto a la izquierda y el texto al lado. */
  .categorias-grilla { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .categoria { flex-direction: row; align-items: center; gap: 16px; padding: 14px 0; border-top: var(--borde); }
  .categoria:last-child { border-bottom: var(--borde); }
  .foto-categoria { flex: none; width: 104px; aspect-ratio: 1; border-radius: var(--radio-medio); }
  .dicho-categoria { padding: 0; }
  .nombre-categoria { font-size: 21px; }
  .texto-categoria { margin-top: 4px; font-size: 13.5px; line-height: 1.5; }
  .ver-categoria { padding-top: 8px; font-size: 10.5px; }
  .pie-promo .btn { flex: 1 1 100%; }

  /* Las zonas una debajo de la otra: la línea pasa a ser vertical. */
  .zonas { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .zonas li { padding: 0 0 30px 30px; border-top: 0; border-left: 1px solid var(--tinta); }
  .zonas li:last-child { padding-bottom: 0; border-left-color: transparent; }
  .zonas li::before { top: 4px; left: -6px; }
  .zonas h3 { line-height: 1; }
  .zonas p { max-width: none; }
}

@media (max-width: 560px) {
  .banda-emprende .botones .btn { flex: 1 1 100%; }
  .filtro-genero button { min-width: 0; flex: 1; padding: 0 12px; }
  .adbar { font-size: 10px; letter-spacing: .08em; }
  .adbar-fila { gap: 4px; padding-block: 5px; }
}

/* ── El listado en el teléfono ───────────────────────────────────────────
   Título y cantidad arriba, y una barra de dos botones: Filtrar y Ordenar.
   En la computadora esa barra no existe y los filtros van al costado. */

.abrir-filtros, .cerrar-filtros, .orden-actual { display: none; }
.barra-listado { display: contents; }

@media (max-width: 900px) {
  .barra-listado {
    display: grid; grid-template-columns: 1fr 1fr; flex-basis: calc(100% + 2 * var(--aire));
    margin: 12px calc(var(--aire) * -1) 0; border-block: var(--borde); background: var(--papel);
  }
  .abrir-filtros {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    height: 54px; background: none; border: 0; border-right: var(--borde);
    font: 500 12px var(--rotulo); letter-spacing: .16em; text-transform: uppercase; cursor: pointer;
  }
  .abrir-filtros svg { width: 17px; height: 17px; }
  .barra-listado .orden {
    position: relative; height: 54px; align-items: center; justify-content: center;
    gap: 0; cursor: pointer;
  }
  .barra-listado .orden select {
    position: absolute; inset: 0; width: 100%; height: 100%;
    opacity: 0; font-size: 16px; cursor: pointer; border: 0;
  }
  .orden-actual { display: block; font: 500 12px var(--rotulo); letter-spacing: .14em; text-transform: uppercase; color: var(--tinta); }

  .catalogo { margin-top: 18px; }
  .filtros {
    position: fixed; inset: 0; z-index: 70; overflow-y: auto;
    background: var(--papel); padding: 0 var(--aire) 32px;
    transform: translateX(-100%); visibility: hidden;
    transition: transform .3s ease, visibility 0s linear .3s;
  }
  .filtros[data-abierto="si"] { transform: none; visibility: visible; transition: transform .3s ease; }
  .cabeza-filtros {
    position: sticky; top: 0; z-index: 1; background: var(--papel);
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 0; margin-bottom: 16px; border-bottom: var(--borde);
  }
  .cabeza-filtros h2 { margin: 0; }
  .cerrar-filtros { display: block; background: none; border: 0; padding: 8px; margin-right: -8px; cursor: pointer; }
  .cerrar-filtros svg { width: 22px; height: 22px; display: block; }
}

@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  .filtros, .filtros[data-abierto="si"] { transition: none; }
}

/* ── Búsqueda sin resultados ─────────────────────────────────────────────── */

.hueco .hueco-titulo { font: italic 400 26px/1.2 var(--titulo); color: var(--tinta); margin-bottom: 12px; }
.hueco p + p { margin: 8px auto 0; max-width: 46ch; }
.hueco p a:not(.btn) { color: var(--tinta); text-decoration: underline; text-underline-offset: 3px; }
.hueco .btn { margin-top: 14px; }

/* ── La portada en el teléfono ───────────────────────────────────────────── */

@media (max-width: 900px) {
  /* La tapa: el texto arriba y los productos parados abajo. */
  .diapo-fila.contenedor {
    grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 12px;
    min-height: 0; padding-block: calc(var(--alto-fijo, 0px) + 18px) 68px;
  }
  .escena { align-self: center; max-width: 440px; aspect-ratio: 1 / .6; }
  .tono-ciruela .escena { max-width: 400px; }
  .tapa-mando.contenedor { justify-content: center; bottom: 28px; }
}

@media (max-width: 640px) {
  .quienes { flex-direction: column; gap: 0; max-width: 440px; margin-inline: auto; }
  .quienes button { flex: none; padding: 14px 0; }
}

@media (max-width: 560px) {
  .titulo-tapa { font-size: clamp(32px, 9.4vw, 42px); }
  .diapo .bajada { margin-top: 16px; font-size: 15.5px; line-height: 1.6; }
  .desde-diapo { margin-top: 14px; }
  .diapo .botones { margin-top: 24px; }
  .diapo .botones .btn { flex: 1 1 100%; }
  .dicho-testimonio p { font-size: clamp(22px, 6.4vw, 26px); }
}