/* ─────────────────────────────────────────────────────────────────────────
   Millanel Escalada — distribuidora oficial de Millanel en Remedios de
   Escalada, de Stella Pol.

   1. El papel es el rosado de las fotos de Millanel (#FEF6F9): todas vienen
      sobre ese fondo, así que con la página del mismo color los frascos
      quedan sueltos, sin recuadro. Cabecera, pie y paneles, en blanco.
   2. El fucsia de la marca, un punto más hondo (#C2185B, de marca.json),
      para lo que se toca: botones, links y la palabra resaltada. Con letra
      blanca da 5,9:1.
   3. Fraunces para los títulos y, sobre todo, para los números: las
      alternativas de Millanel se piden por número ("el 201") y el número es
      la pieza de la casa. Figtree para todo lo que se lee y se toca.
   4. La etiqueta del número, en la tapa: negra con filete dorado, como las
      cajas de las alternativas de Millanel. Es lo único en negro y oro de
      toda la tienda.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  /* ── Color ───────────────────────────────────────────────────────────── */
  --papel: #FFFFFF;
  --fondo: #FEF6F9;          /* el rosado de las fotos de Millanel */
  --foto: #FEF6F9;           /* detrás de toda foto de producto */
  --tinta: #221A1F;
  /* 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: #221A1FCC;
  --tinta-suave: #221A1FB3;
  --raya: #221A1F24;
  --raya-suave: #221A1F12;

  --rosa: #F6D3E0;           /* bandas */
  --rosa-medio: #FAE3EC;
  --rosa-claro: #FDF0F5;

  /* El fucsia de los botones y los links. Sale de datos/marca.json
     (`color` y `colorHondo`), igual que el botón de los mails. */
  --acento: #C2185B;
  --acento-hondo: #9C1149;
  --verde: #2D6A4F;
  --naranja: #B4610E;
  /* La caja de las alternativas: sólo en la etiqueta del número. */
  --caja: #141113;
  --oro: #CDAE6B;

  /* ── Letra ───────────────────────────────────────────────────────────── */
  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --cuerpo: "Figtree", "Segoe UI", system-ui, sans-serif;
  --rotulo: "Figtree", "Segoe UI", system-ui, sans-serif;
  --firma: "Fraunces", Georgia, serif;

  --h1: clamp(30px, 4vw, 52px);
  --h2: clamp(24px, 2.6vw, 32px);
  --h3: 20px;
  --h4: 18px;
  --h5: 15px;
  --h6: 13px;

  /* ── Medidas ─────────────────────────────────────────────────────────── */
  --ancho: 1280px;
  --aire: clamp(16px, 4vw, 40px);
  --paso: clamp(48px, 6vw, 80px);
  --radio: 10px;
  --radio-chico: 6px;
  --radio-boton: 999px;      /* botones en pastilla */
  --radio-medio: 14px;
  --arco: var(--radio);
  --borde: 1px solid var(--raya);
  --raya-fuerte: var(--raya);
}

*, *::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.6 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 Fraunces, en minúscula y apretados: se leen como una etiqueta de perfume, no como un cartel. */
h1, h2 { font-family: var(--display); font-weight: 600; font-optical-sizing: auto; letter-spacing: -.01em; }
h3, h4, h5, h6 { font-family: var(--cuerpo); font-weight: 700; }
h1 em, h2 em, h3 em { font-style: italic; font-weight: 500; color: var(--acento); }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

: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: 700 12px/1.4 var(--rotulo);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--acento-hondo);
}

/* ── El logotipo ─────────────────────────────────────────────────────────
   "millanel" en minúscula, como la marca, con la flor de cuatro pétalos
   arriba de la doble ele, y "Escalada" en cursiva abajo, como en la foto de
   la cuenta oficial. 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-grid; grid-template-columns: auto; justify-items: center; padding-top: 1.4em; color: var(--tinta); font-size: 12px; line-height: 1; white-space: nowrap; }
.logotipo .palabra { position: relative; font: 600 2.6em/1 var(--display); letter-spacing: -.02em; color: var(--acento); }
.logotipo .palabra::before { content: ""; position: absolute; left: 50%; top: -.55em; width: .36em; height: .36em; transform: translateX(-50%); background: radial-gradient(circle at 50% 18%, currentColor .07em, transparent .075em), radial-gradient(circle at 50% 82%, currentColor .07em, transparent .075em), radial-gradient(circle at 18% 50%, currentColor .07em, transparent .075em), radial-gradient(circle at 82% 50%, currentColor .07em, transparent .075em); }
.logotipo .monograma { display: none; }
.logotipo .firma { margin-top: .12em; font: italic 500 1.35em/1 var(--firma); color: var(--tinta); letter-spacing: .02em; }
.logotipo.con-imagen { padding-top: 0; }
.logotipo.con-imagen img { display: block; width: auto; height: 5.6em; }
.logotipo.con-imagen .firma { display: grid; justify-items: center; gap: .2em; margin-top: .5em; font: 500 max(.92em, 10px)/1.05 var(--cuerpo); font-style: normal; letter-spacing: 0; color: var(--acento); }
.logotipo.con-imagen .firma span:last-child { font-weight: 700; }

/* ── La barra de anuncios ────────────────────────────────────────────────
   Lila lleno, un mensaje por vez y flechas a los costados, como la de Bagués. */

.adbar { background: var(--acento); color: #fff; font: 600 12.5px/1.35 var(--rotulo); letter-spacing: .12em; text-transform: uppercase; }
.adbar-fila { display: flex; align-items: center; justify-content: center; gap: 12px; padding-block: 9px; }
.adbar-mensajes { flex: 0 1 620px; min-height: 1.35em; text-align: center; }
.adbar-flecha {
  flex: none; width: 32px; height: 32px; display: grid; place-items: center;
  background: none; border: 0; padding: 0; color: #fff; cursor: pointer; opacity: .85;
}
.adbar-flecha:hover { opacity: 1; }
.adbar-flecha svg { width: 16px; height: 16px; }

/* La banda que corre (tienda.js, cintaHTML). Cada mensaje lleva una flor
   adelante, la de Millanel; la palabra entre asteriscos va en negrita. */
.cinta { overflow: hidden; }
.cinta-pista { display: flex; width: max-content; animation: correr-cinta 60s linear infinite; }
.cinta:hover .cinta-pista { animation-play-state: paused; }
.cinta-tramo { display: flex; margin: 0; padding-block: 9px; }
.cinta-tramo span { white-space: nowrap; padding-inline: 28px 0; }
.cinta-tramo span::before { content: "✿"; margin-right: 28px; opacity: .7; font-size: 1.1em; }
.cinta em { font-style: normal; font-weight: 800; }
@keyframes correr-cinta { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .cinta-pista { animation: none; width: auto; justify-content: center; }
  .cinta-tramo + .cinta-tramo, .cinta-tramo span:not(:first-child) { display: none; }
  .cinta-tramo span { white-space: normal; text-align: center; padding-inline: 16px; }
  .cinta-tramo span::before { content: none; }
}

/* ── 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(--papel); border-bottom: 1px solid var(--raya-suave);
}

/* Arriba: la lupa, el logo al medio y la cuenta 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: 18px 14px; }

.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, con una raya fina
   arriba que las separa del logo. */
.fila-menu { border-top: 1px solid var(--raya-suave); }
.menu {
  display: flex; justify-content: center; gap: 0 clamp(18px, 2.4vw, 36px);
  font: 600 12px/1.4 var(--rotulo); letter-spacing: .12em; text-transform: uppercase;
}
.menu.contenedor { padding-block: 0; }
.item-menu { position: relative; }
.item-menu.solo-celu { display: none; }
.item-menu > a { display: block; padding: 14px 0 13px; white-space: nowrap; border-bottom: 1.5px solid transparent; transition: border-color .15s, color .15s; }
.item-menu > a:hover, .item-menu:focus-within > a { color: var(--acento-hondo); border-bottom-color: var(--acento); }

/* Las secciones de una categoría (Femeninas, Masculinas) cuelgan al pasar. */
.hijas {
  position: absolute; top: 100%; left: -20px; z-index: 50; min-width: 210px;
  padding: 10px 0; background: var(--papel); border: 1px solid var(--raya-suave);
  box-shadow: 0 18px 40px #1C1A2114;
  display: none;
}
.item-menu:hover .hijas, .item-menu:focus-within .hijas { display: block; }
.hijas a { display: block; padding: 9px 20px; 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(--acento-hondo); }

/* Las cuatro entradas del menú, en negrita como las pidió Stella. */
.menu > .item-menu > a { font-weight: 800; }
/* "Productos" despliega todas las categorías en columnas, cada una con sus
   secciones abajo. */
.hijas.mega { width: min(820px, calc(100vw - 48px)); padding: 22px 8px 14px; }
.cats-menu { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 0; }
.cat-menu > a { font: 700 15px var(--cuerpo); color: var(--tinta); }
.cat-menu ul a { padding-block: 5px; font-size: 14px; }
.cat-menu.todos { grid-column: 1 / -1; border-top: 1px solid var(--raya-suave); padding-top: 8px; }
.cat-menu.todos a { color: var(--acento-hondo); font-weight: 700; }

.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:hover { color: var(--acento-hondo); }
.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 cuenta
   y la bolsa del derecho. */
.utilidad.buscar { display: flex; gap: 10px; }
.rotulo-utilidad { font: 600 12px var(--rotulo); letter-spacing: .12em; text-transform: uppercase; }

.globito {
  position: absolute; top: -7px; right: -9px;
  display: grid; place-items: center;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  background: var(--acento); color: #fff;
  font: 800 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-suave); background: var(--papel); }
.buscador { display: flex; align-items: stretch; }
.buscador.contenedor { padding-block: 12px; }
.buscador input {
  flex: 1; min-width: 0; height: 48px; padding: 0 18px;
  border: var(--borde); border-right: 0; border-radius: 0; background: var(--fondo);
  font: 400 15px var(--cuerpo); color: var(--tinta);
}
.buscador input:focus { outline: none; border-color: var(--acento); background: var(--papel); }
.buscador input::placeholder { color: var(--tinta-suave); }
.buscador button {
  flex: none; width: 52px; display: grid; place-items: center;
  background: var(--acento); border: 0; cursor: pointer; color: #fff;
}
.buscador button:hover { background: var(--acento-hondo); }
.buscador svg { width: 19px; height: 19px; }

/* ── Botones ─────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 11px 22px; min-height: 44px;
  background: var(--acento); color: #fff; border: 0; border-radius: var(--radio-boton);
  font: 700 14.5px var(--cuerpo); letter-spacing: .01em; cursor: pointer; text-align: center;
  transition: background .15s, color .15s, box-shadow .15s;
}
.btn:hover { background: var(--acento-hondo); }
.btn svg { width: 16px; height: 16px; flex: none; }
/* Pedir por WhatsApp, en el carrito: el ícono un poco más grande y la aclaración abajo. */
.btn-whatsapp svg { width: 20px; height: 20px; }
.nota-pedido { margin: 10px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--tinta-suave); text-align: center; }
.btn[disabled], .btn.apagado {
  background: #EDE3E7; color: var(--tinta-suave);
  cursor: not-allowed; pointer-events: none;
}
.btn.grande { min-height: 50px; padding: 13px 30px; font: 700 15px var(--cuerpo); letter-spacing: 0; }
.btn.ancho { width: 100%; }
.btn.borde { background: none; color: var(--acento-hondo); box-shadow: inset 0 0 0 1.5px var(--acento); }
.btn.borde:hover { background: var(--acento); 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(--acento-hondo); }

/* ── El nombre, el número y la equivalencia ──────────────────────────────
   El nombre en Figtree, como se lee. En las alternativas, el número en
   Fraunces grande y abajo a qué original equivale, con el original en
   negrita: es lo que la persona vino a buscar. */

.lockup { display: block; min-width: 0; }
.lockup .nombre-producto {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  font: 600 15px/1.35 var(--cuerpo); color: var(--tinta);
}
.lockup .equivale {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  margin-top: 3px; font: 400 13.5px/1.4 var(--cuerpo); color: var(--tinta-suave);
}
.lockup .equivale b { font-weight: 700; color: var(--tinta); }
.lockup.con-numero .nombre-producto {
  font: 600 30px/1 var(--display); font-variant-numeric: lining-nums; letter-spacing: -.01em; color: var(--tinta);
}
.lockup .tamanos { display: block; margin-top: 4px; font: 600 12px/1.4 var(--rotulo); letter-spacing: .06em; color: var(--acento-hondo); }

/* ── La tarjeta de producto ──────────────────────────────────────────────
   Sin marco: la foto sobre el rosado de la página (es el mismo de la foto,
   así queda el frasco solo), el botón justo abajo, y después el nombre y el
   precio, centrados. */

.tarjeta { position: relative; display: flex; flex-direction: column; text-align: center; }
.tarjeta .marco { position: relative; display: block; overflow: hidden; }
.tarjeta .marco img {
  width: 100%; height: auto; aspect-ratio: 1; object-fit: contain;
  mix-blend-mode: normal; /* el fondo de la foto es el de la página */
  transition: transform .4s cubic-bezier(.2,.7,.3,1);
}
.tarjeta:hover .marco img { transform: scale(1.04); }
@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: 8px; left: 8px; z-index: 2;
  padding: 6px 10px; border-radius: 999px; background: var(--acento); color: #fff;
  font: 700 11.5px/1 var(--rotulo); letter-spacing: .06em;
}
.sello.apagado { background: var(--tinta); }
.etiquetas { position: absolute; top: 8px; left: 8px; z-index: 2; display: flex; flex-direction: column; gap: 4px; }
.etiqueta-chica { padding: 6px 10px; border-radius: 999px; background: var(--tinta); color: #fff; font: 700 11.5px/1 var(--rotulo); letter-spacing: .06em; }

/* 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: 10px; width: 100%; min-height: 42px; padding: 10px 12px;
  background: none; color: var(--acento-hondo); box-shadow: inset 0 0 0 1.5px var(--acento);
  font: 700 13.5px/1.3 var(--cuerpo);
}
.tarjeta:hover .btn, .tarjeta .btn:focus-visible { background: var(--acento); color: #fff; }
.tarjeta .btn:hover { background: var(--acento-hondo); color: #fff; }
.tarjeta .btn.apagado { background: none; box-shadow: inset 0 0 0 1px var(--raya); color: var(--tinta-suave); }
.tarjeta .lockup { margin: 16px 0 0; }
/* El precio va al pie de la tarjeta: en una fila, los precios quedan a la
   misma altura aunque un nombre ocupe dos renglones y otro uno. */
.tarjeta .precio { margin: auto 0 0; padding-top: 6px; }
.tarjeta .cuotas { margin: 2px 0 0; }

.precio .con {
  display: block; font: 700 18px/1.3 var(--cuerpo); color: var(--tinta);
  font-variant-numeric: tabular-nums;
}
.precio .con .desde { font: 500 13px var(--cuerpo); color: var(--tinta-suave); }
.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; }
/* El porcentaje en pastilla, como el "40% OFF" al lado del precio en Bagués. */
.precio .off { display: inline-block; padding: 2px 8px; border-radius: 999px; background: var(--acento); color: #fff; font: 800 11px/1.4 var(--cuerpo); }
.cuotas { font: 700 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 ──────────────────────────────────────────────
   Cada sección separada por una raya fina, con el título centrado. */

.seccion { padding: var(--paso) 0; }
/* Entre dos secciones seguidas, una raya fina del ancho del contenido (no
   de punta a punta, que corta la página como una hoja de cálculo). */
.seccion + .seccion {
  background: linear-gradient(var(--raya), var(--raya)) top center / calc(min(100%, var(--ancho)) - 2 * var(--aire)) 1px no-repeat;
}
.seccion > .contenedor { padding-top: 0; padding-bottom: 0; }

/* Todos los títulos de sección iguales: Fraunces en tinta, centrados. El
   fucsia queda para lo que se toca y para la palabra resaltada. */
.titulo-seccion {
  text-align: center; color: var(--tinta);
  font: 600 clamp(26px, 3vw, 36px)/1.15 var(--display); letter-spacing: -.01em;
  margin: 0 0 clamp(26px, 3vw, 38px); text-wrap: balance;
}
.titulo-seccion + .filtro-genero { margin-top: calc(clamp(26px, 3vw, 38px) * -0.4); }
.titulo-chico {
  text-align: center; font: 700 13px/1.4 var(--rotulo); letter-spacing: .14em; text-transform: uppercase;
  margin: 0 0 18px;
}
.cabeza-seccion { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; margin-bottom: clamp(26px, 3vw, 40px); }
.cabeza-seccion .titulo-seccion { margin: 0; }
.cabeza-seccion .btn { flex: none; white-space: nowrap; }
.ver-todo { text-align: center; margin-top: clamp(28px, 3vw, 40px); }

/* Todas / Mujer / Hombre: pastillas con borde, la elegida llena. */
.filtro-genero { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 clamp(28px, 3vw, 40px); }
.filtro-genero button {
  min-width: 92px; height: 36px; padding: 0 18px; border-radius: 999px;
  border: 1px solid var(--raya); background: none; color: var(--tinta-media); cursor: pointer;
  font: 600 13.5px var(--rotulo);
  transition: border-color .15s, background .15s, color .15s;
}
.filtro-genero button:hover { border-color: var(--acento); color: var(--acento-hondo); }
.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 * 24px) / 5);
  gap: 24px; 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: 28%; z-index: 3;
  width: 44px; height: 44px; display: grid; place-items: center;
  background: var(--papel); border: 0; border-radius: 999px;
  cursor: pointer; color: var(--tinta); box-shadow: 0 4px 16px #1C1A2122;
}
.flecha:hover { color: var(--acento); }
.flecha[hidden] { display: none; }
.flecha.antes { left: -18px; }
.flecha.despues { right: -18px; }
.flecha svg { width: 18px; height: 18px; }

.puntos { display: flex; justify-content: center; gap: 9px; margin-top: 24px; }
.puntos button {
  width: 8px; height: 8px; padding: 0; border-radius: 999px;
  border: 0; background: #1C1A2133; cursor: pointer;
}
.puntos button[aria-current="true"] { background: var(--acento); }

/* ── Los banners ─────────────────────────────────────────────────────────
   Arriba de la tapa, de borde a borde, como los de bagues.com.ar: 8:3 en la
   computadora y 3:4 en el teléfono (la imagen la elige el <picture>). Están
   uno encima del otro en la misma celda; el activo aparece fundiéndose y su
   imagen se acomoda apenas, de un poco más grande a su tamaño. */
.banners { position: relative; overflow: hidden; background: var(--fondo); }
.banners-pista { display: grid; }
.banner {
  grid-area: 1 / 1; display: block; opacity: 0; visibility: hidden;
  transition: opacity .9s ease, visibility 0s .9s;
}
.banner.activo { opacity: 1; visibility: visible; z-index: 1; transition: opacity .9s ease, visibility 0s; }
.banner img { display: block; width: 100%; height: auto; transform: scale(1.04); transition: transform 1.6s cubic-bezier(.2, .7, .2, 1); }
.banner.activo img { transform: none; }
.banner:focus-visible { outline: 3px solid var(--acento); outline-offset: -3px; }

/* Los puntos, abajo a la derecha sobre la imagen: el del banner que se ve
   se va llenando en los cinco segundos (y al llenarse pasa al siguiente,
   tienda.js). Van sobre una pastilla oscura para verse sobre cualquier color. */
.banners-puntos {
  position: absolute; z-index: 2; right: clamp(12px, 2vw, 28px); bottom: clamp(12px, 2vw, 24px);
  display: flex; gap: 2px; padding: 3px 6px; border-radius: 999px; background: #221A1F59;
}
.banners-puntos button { width: 26px; height: 26px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.banners-puntos svg { width: 12px; height: 12px; rotate: -90deg; }
.banners-puntos circle { fill: none; stroke: #fff; stroke-width: 2.4; }
.banners-puntos .aro { fill: #FFFFFF66; stroke: none; }
.banners-puntos .avance { stroke-dasharray: 37.7; stroke-dashoffset: 37.7; }
.banners-puntos [aria-current="true"] .aro { fill: none; stroke: #FFFFFF59; }
.banners-puntos [aria-current="true"] .avance { animation: llenar-punto var(--duracion-banner, 5s) linear forwards; }
.banners.quieto .avance { animation-play-state: paused !important; }
@keyframes llenar-punto { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .banner, .banner.activo, .banner img { transition: none; transform: none; }
  /* Sin el aro que corre, no pasa solo: el punto del que se ve queda lleno. */
  .banners-puntos [aria-current="true"] .avance { animation: none; stroke-dashoffset: 0; }
}

/* ── La tapa: el buscador del número ─────────────────────────────────────
   A la izquierda la pregunta y el buscador; a la derecha la etiqueta del
   número, negra con filete dorado como las cajas de las alternativas: la
   foto arriba, sobre el rosado de siempre, y abajo "Si te gusta Good Girl,
   pedí el Nº 201". Pasa sola de un ejemplo a otro. */

.tapa { background: var(--fondo); border-bottom: 1px solid var(--raya-suave); }
.tapa-fila.contenedor {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .9fr); align-items: center;
  gap: clamp(28px, 5vw, 80px); padding-block: clamp(36px, 5vw, 72px);
}
.tapa .dicho { min-width: 0; }
.tapa .etiqueta { color: var(--acento-hondo); }
.titulo-tapa {
  margin: 14px 0 0; max-width: 13em;
  font: 600 var(--h1)/1.04 var(--display); letter-spacing: -.02em; color: var(--tinta); text-wrap: balance;
}
.titulo-tapa em { display: block; }
.tapa .bajada { margin: 18px 0 0; max-width: 40ch; font-size: 17px; color: var(--tinta-media); }

.buscador-numero { position: relative; margin-top: 28px; max-width: 560px; }
.buscador-numero .caja-busqueda {
  display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 20px;
  background: var(--papel); border-radius: 999px; box-shadow: 0 0 0 1.5px var(--tinta), 0 14px 34px #C2185B14;
}
.buscador-numero .caja-busqueda:focus-within { box-shadow: 0 0 0 2px var(--acento), 0 14px 34px #C2185B24; }
.buscador-numero .caja-busqueda > svg { width: 20px; height: 20px; flex: none; color: var(--tinta-suave); }
.buscador-numero input {
  flex: 1; min-width: 0; height: 46px; border: 0; background: none; outline: none;
  font: 500 17px var(--cuerpo); color: var(--tinta);
}
.buscador-numero input::placeholder { color: var(--tinta-suave); font-weight: 400; }
.buscador-numero input::-webkit-search-cancel-button { display: none; }
.buscador-numero .btn { flex: none; min-height: 46px; padding-inline: 24px; }

.sugerencias {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 30;
  padding: 6px; background: var(--papel); border-radius: var(--radio-medio);
  box-shadow: 0 0 0 1px var(--raya-suave), 0 22px 48px #221A1F24;
}
.sugerencias a { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: var(--radio-chico); }
.sugerencias a:hover, .sugerencias a:focus-visible { background: var(--rosa-claro); outline: none; }
.sugerencias img { width: 44px; height: 44px; object-fit: contain; flex: none; background: var(--foto); border-radius: var(--radio-chico); }
.sugerencias .que { font-size: 14.5px; line-height: 1.35; color: var(--tinta-media); }
.sugerencias .que b { font: 600 17px var(--display); color: var(--tinta); margin-right: 4px; }

.atajos { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 22px; max-width: 600px; }
.atajos > span { width: 100%; font: 700 12px var(--rotulo); letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-suave); }
.atajos a {
  display: inline-flex; align-items: baseline; gap: 6px; padding: 7px 14px; border-radius: 999px;
  background: var(--papel); box-shadow: inset 0 0 0 1px var(--raya); font-size: 14px; color: var(--tinta-media);
  transition: box-shadow .15s, color .15s;
}
.atajos a b { font: 600 15px var(--display); color: var(--acento-hondo); }
.atajos a:hover { box-shadow: inset 0 0 0 1.5px var(--acento); color: var(--tinta); }

.etiqueta-numero {
  display: flex; flex-direction: column; width: min(100%, 380px); justify-self: center;
  background: var(--caja); color: #fff; border-radius: 4px; padding: 10px;
  box-shadow: 0 30px 60px #221A1F38;
  transition: transform .3s cubic-bezier(.2,.7,.3,1);
}
.etiqueta-numero:hover { transform: translateY(-4px); }
.foto-numero { display: block; background: var(--foto); border-radius: 2px; }
.foto-numero img { width: 100%; height: auto; aspect-ratio: 5 / 4; object-fit: contain; padding-block: 4%; transition: opacity .3s; }
.rotulo-numero {
  display: grid; justify-items: center; gap: 2px; margin-top: 10px; padding: 18px 16px 20px;
  border: 1px solid var(--oro); outline: 1px solid var(--oro); outline-offset: -5px; text-align: center;
}
.rotulo-numero .si-te-gusta, .rotulo-numero .es-el { font: 600 11px/1.5 var(--rotulo); letter-spacing: .22em; text-transform: uppercase; color: var(--oro); }
.rotulo-numero .original { font: italic 500 clamp(22px, 2.2vw, 28px)/1.15 var(--display); color: #fff; margin-bottom: 6px; }
.rotulo-numero .numero { font: 600 clamp(52px, 5.4vw, 76px)/.95 var(--display); letter-spacing: -.02em; color: var(--oro); font-variant-numeric: lining-nums; }
.rotulo-numero .original, .rotulo-numero .numero { transition: opacity .3s; }
.etiqueta-numero.cambiando img, .etiqueta-numero.cambiando .original, .etiqueta-numero.cambiando .numero { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .etiqueta-numero, .etiqueta-numero:hover { transition: none; transform: none; }
}

/* ── La semana de las cuotas ─────────────────────────────────────────────
   Lo propio de Aylén: una franja blanca con los siete días; los de cuotas,
   llenos de lila, y el de hoy, marcado. */

.semana { background: var(--papel); border-bottom: 1px solid var(--raya-suave); }
.semana-fila.contenedor { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px 40px; padding-block: 18px; }
.semana-texto { flex: 1 1 320px; font-size: 15px; color: var(--tinta-media); }
.semana-texto b { color: var(--tinta); font-weight: 800; }
.semana.es-hoy .semana-texto b { color: var(--acento-hondo); }
/* Los siete días en fila: los de cuotas, en lila lleno; los demás, sólo la
   letra. Hoy lleva una rayita debajo, adentro de su casilla. */
.semana .dias { display: grid; grid-template-columns: repeat(7, 48px); gap: 4px; margin: 0; padding: 0; list-style: none; }
.semana .dias li {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  height: 50px; color: var(--tinta-suave);
  font: 500 11px var(--rotulo); letter-spacing: .12em; text-transform: uppercase;
}
.semana .dias li.con { background: var(--acento); color: #fff; }
.semana .dias li small { font: 700 9.5px/1 var(--cuerpo); letter-spacing: .02em; text-transform: none; opacity: .92; }
.semana .dias li.hoy { color: var(--tinta); font-weight: 600; }
.semana .dias li.hoy.con { color: #fff; }
.semana .dias li.hoy::after {
  content: ""; position: absolute; left: 30%; right: 30%; bottom: 6px; height: 2px;
  background: currentColor;
}

/* ── Las categorías ──────────────────────────────────────────────────────── */

.categorias-grilla { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(18px, 3vw, 40px) 18px; }
.categoria { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.foto-categoria {
  display: block; width: 100%; aspect-ratio: 1; padding: 10%;
  background: var(--foto); transition: box-shadow .2s;
}
.foto-categoria img { width: 100%; height: 100%; object-fit: contain; transition: transform .4s cubic-bezier(.2,.7,.3,1); }
.categoria:hover .foto-categoria { box-shadow: inset 0 0 0 1.5px var(--acento); }
.categoria:hover img { transform: scale(1.05); }
.nombre-categoria { font: 600 19px/1.2 var(--display); letter-spacing: -.01em; }
.categoria:hover .nombre-categoria { color: var(--acento-hondo); }
@media (prefers-reduced-motion: reduce) { .foto-categoria img, .categoria:hover img { transition: none; transform: none; } }

/* ── La banda de revendedoras ────────────────────────────────────────────
   En fucsia lleno: sumarse al equipo de Stella y los pedidos de las que ya
   revenden, con tres productos en una vidriera rosada. */

.banda-emprende { background: var(--acento); color: #fff; }
.banda-fila.contenedor {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center;
  gap: clamp(28px, 5vw, 64px); padding-block: clamp(48px, 6vw, 80px);
}
.banda-emprende h2 { font: 600 clamp(30px, 3.4vw, 44px)/1.08 var(--display); letter-spacing: -.01em; color: #fff; text-wrap: balance; }
.banda-emprende h2 em { color: #fff; }
.banda-emprende .bajada { margin-top: 16px; font-size: 17px; color: #FFFFFFE6; max-width: 46ch; }
.ventajas { margin: 24px 0 0; display: grid; gap: 16px; }
.ventajas li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; }
.ventajas svg { width: 22px; height: 22px; margin-top: 1px; }
.ventajas b { display: block; font-size: 16.5px; font-weight: 800; }
.ventajas span { display: block; font-size: 15px; color: #FFFFFFE0; }
.banda-emprende .botones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
/* Tres frascos enteros sobre una tarjeta blanca, el del medio más grande.
   Las fotos traen mucho blanco alrededor: se enciman un poco (se
   multiplican, así el blanco de una no tapa a la otra) en vez de agrandarse
   y quedar cortadas por el borde. */
.vidriera {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr) minmax(0, 1fr); align-items: end;
  padding: 9% 7% 8%; background: linear-gradient(160deg, var(--rosa-claro), var(--rosa-medio));
}
.vidriera::after {
  content: ""; position: absolute; left: 12%; right: 12%; bottom: 13%; height: 10%;
  background: radial-gradient(closest-side, #6B0F3A2E, transparent);
}
.vidriera img { position: relative; z-index: 1; }
.vidriera img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; mix-blend-mode: multiply; transform: scale(1.3); transform-origin: 50% 100%; }
.vidriera img:first-child, .vidriera img:last-child { width: 116%; max-width: none; }
.vidriera img:last-child { margin-left: -16%; }

/* ── Envíos, pagos y atención ────────────────────────────────────────────
   La franja de garantías de Bagués, en blanco de punta a punta, con los
   datos de Aylén. Cada columna arranca arriba con su ícono y su rótulo, así
   las cuatro quedan alineadas aunque digan cosas de distinto largo. */

.entregas { background: var(--papel); border-block: 1px solid var(--raya-suave); }
.entregas .contenedor { padding-block: clamp(36px, 4.5vw, 56px); }
.garantias-fila { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.garantias-fila li { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 4px clamp(16px, 2vw, 28px); text-align: center; }
.garantias-fila li + li { border-left: 1px solid var(--raya-suave); }
.garantias-fila svg { width: 26px; height: 26px; color: var(--acento); margin-bottom: 4px; }
.garantias-fila h3 { font: 600 18px/1.25 var(--display); }
.garantias-fila p { font-size: 14.5px; line-height: 1.55; color: var(--tinta-media); max-width: 30ch; }
.garantias-fila a { color: var(--acento-hondo); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }

/* ── La banda de promoción (opcional) ────────────────────────────────────── */

.banda { background: var(--rosa); }
.banda .envoltorio { padding-block: clamp(40px, 6vw, 76px); text-align: center; }
.banda .dicho { min-width: 0; }
.banda h2 { font-size: var(--h2); margin: 12px auto 0; max-width: 22em; text-wrap: balance; }
.banda p { margin: 16px auto 0; font-size: 17px; color: var(--tinta-media); max-width: 44ch; }
.banda .btn { margin-top: 26px; }
.banda.promo { background: var(--tinta); color: #fff; }
.banda.promo .etiqueta { color: var(--rosa); }
.banda.promo p { color: #FFFFFFCC; }

/* ── Dónde estamos ───────────────────────────────────────────────────────
   Abajo de todo de la portada, sobre blanco para separarla de la banda de
   redes: un mapa por punto de retiro, en tarjetas lado a lado (una abajo de
   la otra en el teléfono). */
.mapa-locales { background: var(--papel); border-top: 1px solid var(--raya-suave); }
.mapa-locales .contenedor { padding-block: clamp(48px, 6vw, 76px); }
.mapa-locales .titulo-seccion { text-align: center; margin-bottom: clamp(24px, 3vw, 36px); }
.locales { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: clamp(16px, 2vw, 24px); }
.local { display: flex; flex-direction: column; border: 1px solid var(--raya-suave); border-radius: var(--radio); overflow: hidden; background: var(--fondo); }
.local iframe { display: block; width: 100%; height: clamp(240px, 26vw, 320px); border: 0; background: var(--rosa-claro); }
.datos-local { display: flex; flex-direction: column; gap: 4px; padding: 20px 22px 22px; flex: 1; }
.datos-local h3 { font: 700 var(--h4)/1.3 var(--cuerpo); margin: 0 0 4px; }
.datos-local p { margin: 0; font-size: 15px; color: var(--tinta-media); }
.datos-local .calle { font-weight: 600; color: var(--tinta); }
.datos-local .btn { align-self: flex-start; margin-top: auto; }
.datos-local p:last-of-type { margin-bottom: 16px; }
.datos-local .btn svg { width: 18px; height: 18px; }

/* ── La banda de redes ───────────────────────────────────────────────────── */

/* Va entre la banda lila y el pie blanco: en el gris de la página, para que
   no queden dos lilas pegados. */
.social { background: var(--fondo); }
.social .contenedor { padding-block: clamp(48px, 6vw, 76px); text-align: center; }
.social .titulo-seccion { margin-bottom: 14px; }
.social .contenedor > p { margin: 0 auto; max-width: 54ch; color: var(--tinta-media); }
.social .puertas { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 28px; }
.social .puerta {
  display: inline-flex; align-items: center; gap: 10px; min-height: 46px;
  padding: 0 20px; background: var(--papel); color: var(--tinta); box-shadow: inset 0 0 0 1px var(--raya-suave);
  font: 600 14.5px var(--cuerpo); transition: box-shadow .15s, color .15s;
}
.social .puerta:hover { color: var(--acento-hondo); box-shadow: inset 0 0 0 1px var(--acento); }
.social .puerta.llena { background: var(--acento); color: #fff; }
.social .puerta.llena:hover { background: var(--acento-hondo); color: #fff; }
.social .puerta svg { width: 19px; height: 19px; }

/* ── 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: 1px solid transparent; background: var(--foto); cursor: pointer; display: block; overflow: hidden; }
.galeria .miniaturas button[aria-current="true"] { border-color: var(--acento); }
.galeria .miniaturas img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; }
.galeria .grande { position: relative; background: var(--foto); overflow: hidden; padding: 6%; }
.galeria .grande img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; }
.galeria .contador { position: absolute; bottom: 14px; right: 18px; font: 500 11px var(--rotulo); letter-spacing: .12em; color: var(--tinta-suave); }
.galeria .grande .etiquetas { top: 14px; left: 14px; }

.ficha .datos { min-width: 0; }
.ficha .migas { margin-bottom: 16px; }
.ficha h1, .ficha h2, .ficha h3, .pagina .ficha h1 { color: var(--tinta); font: 600 clamp(28px, 3vw, 40px)/1.1 var(--display); letter-spacing: -.01em; }

.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: 800; color: var(--acento-hondo); }
.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-size: clamp(28px, 3vw, 34px); font-weight: 800; }
.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; }
/* Los sets que se arman con la fragancia que quiera: qué tiene que decir al pedir. */
.ficha .aviso-elegir { margin-top: 18px; padding: 12px 14px; font-size: 14.5px; line-height: 1.5; color: var(--tinta-media); background: var(--rosa-claro); border-radius: var(--radio-chico); }
.ficha .aviso-elegir b { color: var(--tinta); }
.ficha .aviso-elegir a { color: var(--acento-hondo); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.ficha .ver-detalles { font-size: 14px; color: var(--acento-hondo); 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); background: var(--papel); }
.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: 50px; font-size: 15px; }

.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(--acento); }
.garantia b { display: block; font-size: 15px; font-weight: 700; }
.garantia span { font-size: 14px; color: var(--tinta-media); }

.envio-caja { margin-top: 26px; padding-top: 24px; border-top: var(--borde); }
.envio-caja label { display: block; font: 600 12px var(--rotulo); letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-suave); margin-bottom: 10px; }
.envio-caja .fila { display: flex; gap: 10px; }
.envio-caja input {
  flex: 1; min-width: 0; height: 48px; padding: 0 16px; font: 400 15px var(--cuerpo);
  border: var(--borde); background: var(--papel); color: var(--tinta);
}
.envio-caja input:focus { border-color: var(--acento); outline: none; }
.envio-caja button {
  flex: none; padding: 0 22px; background: none; cursor: pointer; color: var(--acento-hondo);
  border: 1.5px solid var(--acento); font: 700 14px var(--cuerpo);
}
.envio-caja button:hover { background: var(--acento); color: #fff; }
.envio-caja .resultado { font-size: 14px; margin-top: 12px; color: var(--tinta-media); }

.variantes { margin-top: 26px; }
.rotulo-variantes { font: 600 12px var(--rotulo); letter-spacing: .12em; 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); border-radius: 999px;
  font: 400 14px var(--cuerpo); cursor: pointer;
}
.botones-variantes button:hover { border-color: var(--acento); }
.botones-variantes button[aria-pressed="true"] { border-color: var(--acento); background: var(--acento); 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); }
.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 16px; font: 400 15px var(--cuerpo);
  border: var(--borde); background: var(--papel); color: var(--tinta);
}
.avisame button[type="submit"] {
  flex: none; padding: 0 22px; background: var(--acento); color: #fff; border: 0; cursor: pointer;
  font: 700 14px var(--cuerpo);
}
.avisame button[type="submit"]:hover { background: var(--acento-hondo); }
.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); }

/* En la portada la ficha va resumida: foto, nombre, precio, compra y notas.
   El calculador de envío y las garantías ya están en la franja de abajo. */
.destacado .envio-caja, .destacado .garantias, .destacado .ver-detalles { display: none; }
.destacado .ficha { align-items: center; }
.destacado .ficha .galeria { position: static; }
.ver-ficha {
  display: inline-flex; margin-top: 22px; padding-bottom: 3px; border-bottom: 1px solid currentColor;
  font: 600 12px var(--rotulo); letter-spacing: .12em; text-transform: uppercase; color: var(--acento-hondo);
}
.ver-ficha:hover { color: var(--tinta); }

/* 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: 800 var(--h4)/1.2 var(--cuerpo); }
.tramo b::before { content: counter(tramo) " · "; color: var(--acento); }
.tramo span { font: 600 11.5px var(--rotulo); letter-spacing: .12em; 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(--acento); }

@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(--acento-hondo); }
.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: 600 11px var(--rotulo); letter-spacing: .12em; 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); border-radius: 0; 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='%231C1A21' 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(--acento); }

.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: 600 11px var(--rotulo); letter-spacing: .12em; 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(--acento-hondo); }
.grupo-filtro a[aria-current="page"] { color: var(--acento-hondo); font-weight: 800; }
.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(--acento-hondo);
}

.grilla { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(30px, 3vw, 44px) 24px; }
.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); }
.bajada-listado { margin-top: 14px; max-width: 62ch; font-size: 16px; line-height: 1.5; color: var(--tinta-media); }
@media (max-width: 900px) { .bajada-listado { margin-top: 16px; font-size: 14px; } }

/* ── 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: 800; color: var(--tinta); }
.texto .pregunta {
  font: 800 var(--h4)/1.3 var(--cuerpo); 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; }

/* ── Acerca de nosotros ──────────────────────────────────────────────────
   El texto de Stella en primera persona, con su foto al lado (sin foto, el
   texto solo, angosto para leerse bien). Después, las fotos del equipo, y
   abajo, el local en una tarjeta blanca. */
.nosotros-fila { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; max-width: 1100px; }
.nosotros-fila.con-foto { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
.nosotros-fila.espacio { margin-top: clamp(40px, 6vw, 72px); padding: clamp(24px, 4vw, 48px); background: var(--papel); border-radius: var(--radio); }
.relato { max-width: 62ch; }
.relato h2 { font-size: var(--h2); margin: 0 0 20px; }
.relato h2 em { color: var(--acento-hondo); }
.texto.relato p { font-size: 17px; line-height: 1.65; }
.texto.relato .primero { font-size: 20px; line-height: 1.5; color: var(--tinta); }
.texto.relato .firma-stella { margin-top: 28px; font: italic 500 28px var(--firma); color: var(--acento-hondo); }
.texto.relato .direccion-nosotros { font: 600 20px/1.45 var(--cuerpo); color: var(--tinta); }
.texto.relato .horario-nosotros { font-size: 15px; color: var(--tinta-suave); }
.relato .botones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.foto-nosotros { margin: 0; }
.foto-nosotros img { display: block; width: 100%; height: auto; border-radius: var(--radio); background: var(--rosa-claro); }
.foto-nosotros figcaption { margin-top: 10px; font-size: 13px; color: var(--tinta-suave); }
.foto-nosotros figcaption b { display: block; color: var(--tinta-media); font-weight: 700; }
/* Stella, con un rosado corrido detrás, como una foto apoyada. */
.foto-nosotros.retrato img { box-shadow: 14px 14px 0 var(--rosa); }
.foto-nosotros.retrato figcaption { margin-top: 24px; }
/* El local es ancho: lleva la columna grande. */
.nosotros-fila.espacio.con-foto { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: center; }
/* El equipo: las cuatro fotos cuadradas en fila (2 × 2 en el teléfono). */
.equipo-nosotros { margin-top: clamp(48px, 7vw, 88px); max-width: 1100px; }
.cabeza-equipo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-bottom: 22px; }
.cabeza-equipo h2 { font-size: var(--h2); margin: 0; }
.cabeza-equipo h2 em { color: var(--acento-hondo); }
.cabeza-equipo .btn { flex: none; white-space: nowrap; }
.grilla-equipo { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(8px, 1.4vw, 16px); }
.grilla-equipo img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: var(--radio); background: var(--rosa-claro); }
@media (max-width: 900px) {
  .nosotros-fila.con-foto, .nosotros-fila.espacio.con-foto { grid-template-columns: minmax(0, 1fr); }
  .foto-nosotros { max-width: 460px; }
  .foto-nosotros.retrato { max-width: 400px; margin-right: 14px; }
  .nosotros-fila.espacio .foto-nosotros { max-width: none; }
  .grilla-equipo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Oportunidades ───────────────────────────────────────────────────────
   Cada oferta del final del catálogo en una tarjeta blanca: la página de la
   revista a la izquierda (se abre grande al tocarla) y a la derecha el
   precio, la condición, el botón de WhatsApp y los productos que entran,
   como fichitas con el número y el original. */
.oferta {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(20px, 3.5vw, 48px);
  padding: clamp(18px, 3vw, 36px); background: var(--papel); border-radius: var(--radio);
  scroll-margin-top: calc(var(--alto-fijo, 120px) + 16px);
}
.oferta + .oferta { margin-top: clamp(20px, 3vw, 32px); }
.pagina-catalogo { position: relative; align-self: start; display: block; border-radius: var(--radio-chico); overflow: hidden; box-shadow: 0 10px 30px #221A1F1F; }
.pagina-catalogo img { display: block; width: 100%; height: auto; }
.rotulo-paginas { position: absolute; left: 10px; bottom: 10px; padding: 4px 10px; border-radius: 999px; background: #FFFFFFE6; font: 600 12px var(--rotulo); letter-spacing: .06em; color: var(--tinta-media); }
.detalle-oferta h2 { font-size: var(--h2); margin: 10px 0 14px; }
.precio-oferta { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin: 0 0 14px; }
.precio-oferta .con { font: 600 clamp(34px, 4vw, 46px)/1 var(--display); color: var(--acento-hondo); }
.precio-oferta .antes { font-size: 15px; color: var(--tinta-suave); }
.detalle-oferta .condicion { font-size: 16.5px; color: var(--tinta-media); margin: 0 0 22px; max-width: 48ch; }
.grupo-oferta { margin-top: 26px; }
.grupo-oferta h3 { font: 700 15px var(--cuerpo); margin: 0 0 10px; }
.grupo-oferta h3 span { font-weight: 500; color: var(--tinta-suave); margin-left: 6px; }
.chips { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 8px; max-height: 292px; overflow-y: auto; }
.chip-producto { display: flex; align-items: center; gap: 10px; padding: 6px 10px 6px 6px; border-radius: var(--radio-chico); background: var(--fondo); transition: background .15s; }
.chip-producto:hover { background: var(--rosa-medio); }
.chip-producto img { width: 44px; height: 44px; flex: none; mix-blend-mode: multiply; }
.chip-producto .que { display: flex; flex-direction: column; min-width: 0; font-size: 13px; line-height: 1.25; }
.chip-producto .que b { font-weight: 700; color: var(--tinta); }
.chip-producto .que span { color: var(--tinta-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 900px) {
  .oferta { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .chip-producto { gap: 8px; padding-right: 6px; }
  .chip-producto img { width: 36px; height: 36px; }
  .chip-producto .que { font-size: 12.5px; }
}

/* ── 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); }
/* Las placas de Stella (Sé revendedora, Contacto): enteras, con el texto que traen. */
.placa-marca { display: block; width: 100%; max-width: 960px; height: auto; margin: 0 0 clamp(28px, 4vw, 44px); border-radius: var(--radio); }
.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); 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); } }

.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: .2em; width: 18px; height: 18px; background: var(--acento);
  -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); }

.invitacion {
  background: var(--acento); color: #fff; padding: clamp(26px, 4vw, 40px);
  margin: 40px 0 0; text-align: center;
}
.invitacion .etiqueta { color: #fff; }
.texto .invitacion .frase, .invitacion .frase {
  font: 800 clamp(19px, 2vw, 23px)/1.3 var(--cuerpo);
  color: #fff; margin: 12px auto 24px; max-width: 28ch;
}
.invitacion .botones { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.invitacion .btn { background: #fff; color: var(--acento-hondo); }
.invitacion .btn:hover { background: var(--rosa-claro); }
.invitacion .btn.borde { background: none; color: #fff; box-shadow: inset 0 0 0 1.5px #fff; }
.invitacion .btn.borde:hover { background: #fff; color: var(--acento-hondo); }

/* ── 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(--acento); }
.contacto .datos a:hover { color: var(--acento-hondo); }
.contacto form { max-width: 520px; }
.campo { margin-bottom: 18px; }
.campo label { display: block; font: 600 12px var(--rotulo); letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-suave); margin-bottom: 8px; }
.campo input, .campo textarea {
  width: 100%; padding: 13px 16px; font: 400 15px var(--cuerpo); color: var(--tinta);
  border: var(--borde); background: var(--papel);
}
.campo input:focus, .campo textarea:focus { border-color: var(--acento); 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; 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: 800 28px var(--cuerpo); letter-spacing: .12em; color: var(--tinta); margin-bottom: 18px; }

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

.telon {
  position: fixed; inset: 0; z-index: 60; background: #1C1A2173;
  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-size: 15px; letter-spacing: .18em; }
.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; }
.panel .pie-panel { padding: 18px 26px 26px; border-top: var(--borde); }

.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(--foto); overflow: hidden; align-self: start; }
.linea-carrito img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; mix-blend-mode: normal; }
.linea-carrito h4 { font: 600 14.5px/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: 700; color: var(--acento-hondo); }
.linea-carrito .importe { font: 700 15px var(--cuerpo); font-variant-numeric: tabular-nums; }
.quitar {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-size: 13px; color: var(--tinta-suave); text-decoration: underline;
}
.quitar:hover { color: var(--acento-hondo); }

.cuentas { margin: 18px 0; 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: 16px; font-weight: 700; border-top: var(--borde);
  margin-top: 10px; padding-top: 14px; align-items: baseline;
}
.cuentas .total > span:last-child { font: 800 var(--h4) var(--cuerpo); }
.aviso-envio {
  font-size: 13.5px; background: var(--rosa-claro);
  padding: 13px 15px; margin-bottom: 10px; color: var(--tinta-media);
}
.aviso-envio b { color: var(--tinta); font-weight: 800; }

/* ── Pie ─────────────────────────────────────────────────────────────────
   Blanco, como el de Bagués, con los títulos en mayúsculas separadas. */

.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-suave); }
/* Si la banda de redes va justo arriba, el pie se le pega. */
#social + .pie, main:has(> #social:last-child) + .pie, .pagina + .pie { margin-top: 0; }
.pie a:hover { color: var(--acento-hondo); }
.pie-grilla { display: grid; grid-template-columns: 1.4fr 1fr 1.1fr; gap: clamp(28px, 4vw, 56px); }
.pie .marca { display: inline-block; }
.pie .logotipo { font-size: 13px; }
.pie .lema { margin: 22px 0 24px; color: var(--tinta-media); max-width: 36ch; }
.pie .redes { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; }
.pie .redes a { display: grid; place-items: center; width: 40px; height: 40px; border: var(--borde); border-radius: 999px; }
.pie .redes a:hover { background: var(--acento); border-color: var(--acento); color: #fff; }
.pie .redes svg { width: 17px; height: 17px; }
.pie h5 { font: 600 12px var(--rotulo); letter-spacing: .12em; text-transform: uppercase; color: var(--tinta); margin-bottom: 18px; }
.pie .datos li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; margin-bottom: 14px; color: var(--tinta-media); }
.pie .datos svg { width: 15px; height: 15px; margin-top: 5px; color: var(--acento); }
.pie .enlaces li { margin-bottom: 11px; }
.pie .enlaces a { color: var(--tinta-media); }

/* Abajo deja lugar para el botón de WhatsApp (54px a 20px del borde). */
/* La raya de arriba, del ancho del texto y no del de la caja con su relleno. */
.legal {
  margin-top: var(--paso); padding-block: 26px 92px; font-size: 12.5px; line-height: 1.7; color: var(--tinta-suave);
  background: linear-gradient(var(--raya-suave), var(--raya-suave)) 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: 54px; height: 54px; border-radius: 999px;
  background: var(--acento); color: #fff; display: grid; place-items: center;
  box-shadow: 0 8px 22px #2A165440;
}
.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(--papel); }
.cabecera-flujo .envoltorio {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding-block: 16px;
}
.cabecera-flujo nav a { font: 600 12px var(--rotulo); letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-media); }
.cabecera-flujo nav a:hover { color: var(--acento-hondo); }

/* 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 16px; 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: 11.5px; letter-spacing: .12em; }
  .carrusel { grid-auto-columns: calc((100% - 3 * 22px) / 4); gap: 22px; }
}

/* 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 14px; font-size: 10.5px; letter-spacing: .08em; }
}

@media (max-width: 1100px) {
  .grilla { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .categorias-grilla { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px 16px; }
  .garantias-fila { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .garantias-fila li { padding-block: 20px; }
  .garantias-fila li:nth-child(3) { border-left: 0; }
  .garantias-fila li:nth-child(n+3) { border-top: 1px solid var(--raya-suave); }
}

@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 cuenta y la bolsa. */
  .fila-cabecera { gap: 8px; }
  .fila-cabecera.contenedor { padding-block: 10px; }
  .hamburguesa { display: block; }
  .fila-cabecera .logotipo { font-size: 9.5px; }
  .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: 9.5px; }
  /* En el teléfono el logo de Stella queda con "Remedios de Escalada" solo, sin "Distribuidora". */
  .fila-cabecera .logotipo.con-imagen, .cabecera-flujo .logotipo.con-imagen { font-size: 10.5px; }
  .fila-cabecera .logotipo.con-imagen .firma span:first-child, .cabecera-flujo .logotipo.con-imagen .firma span:first-child { display: none; }

  .fila-menu { display: none; max-height: calc(100vh - 120px); overflow-y: auto; }
  .fila-menu[data-abierto="si"] { display: block; }
  .menu { flex-direction: column; align-items: stretch; gap: 0; font-size: 12.5px; letter-spacing: .14em; }
  .menu.contenedor { padding-block: 4px 12px; }
  .item-menu.solo-celu { display: block; }
  .item-menu > a, .item-menu > a:hover { padding: 13px 0; border-bottom: 1px solid var(--raya-suave); }
  .hijas { position: static; display: block; min-width: 0; padding: 4px 0 8px 16px; border: 0; box-shadow: none; background: none; }
  .hijas a { padding: 8px 0; }
  .hijas a:hover { background: none; }
  /* Las categorías de Productos, en dos columnas y sin sus secciones. */
  .hijas.mega { width: auto; padding: 4px 0 10px 16px; }
  .cats-menu { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
  .cat-menu ul { display: none; }
  .cat-menu > a { font-size: 14.5px; font-weight: 600; color: var(--tinta-media); }
  .cat-menu.todos { padding-top: 4px; }

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

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

  .lockup .nombre-producto { font-size: 14px; }
  .lockup.con-numero .nombre-producto { font-size: 26px; }
  .lockup .equivale { font-size: 13px; }
  .precio .con { font-size: 17px; }
  .tarjeta .btn { font-size: 13px; padding-inline: 8px; }

  .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; }

  /* La tapa en el teléfono: los frascos arriba y el texto abajo, centrado. */
  .tapa-fila.contenedor { grid-template-columns: minmax(0, 1fr); padding-block: 28px 40px; }
  .titulo-tapa { font-size: clamp(30px, 8.4vw, 40px); }
  .tapa .bajada { font-size: 15.5px; }
  .buscador-numero .caja-busqueda { padding-left: 14px; }
  .buscador-numero .btn { padding-inline: 16px; }
  .etiqueta-numero { width: min(100%, 320px); }
  .diapositiva .btn { margin-top: 20px; }

  .semana-fila.contenedor { justify-content: center; text-align: center; }

  .banda-fila.contenedor { grid-template-columns: minmax(0, 1fr); }
  .vidriera { max-width: 440px; }

  .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: 560px) {
  .categorias-grilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .garantias-fila { grid-template-columns: minmax(0, 1fr); }
  .garantias-fila li { padding-block: 22px; }
  .garantias-fila li:first-child { padding-top: 0; }
  .garantias-fila li:last-child { padding-bottom: 0; }
  .garantias-fila li + li { border-left: 0; border-top: 1px solid var(--raya-suave); }
  .nombre-categoria { font-size: 17px; }
  .titulo-seccion { font-size: 26px; }
  /* Las redes de a dos y el WhatsApp entero abajo, en vez de renglones
     desparejos. */
  .social .puertas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .social .puerta { justify-content: center; gap: 7px; padding: 0 8px; font-size: 13px; white-space: nowrap; }
  .social .puerta svg { width: 17px; height: 17px; }
  .social .puerta.llena { grid-column: 1 / -1; }
  /* Los siete días tienen que entrar en 343px: se achican y el "3 cuotas" se va. */
  .semana .dias { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; width: 100%; }
  .semana .dias li { height: 46px; font-size: 10.5px; letter-spacing: .04em; }
  .semana .dias li small { display: none; }
  .semana-texto { font-size: 14.5px; }
  .banda-emprende .botones .btn { flex: 1 1 100%; }
  .filtro-genero { gap: 8px; }
  .adbar { font-size: 11px; letter-spacing: .08em; }
  .adbar-fila { gap: 4px; padding-block: 7px; }
  .cinta-tramo { padding-block: 7px; }
  .cinta-tramo span { padding-left: 20px; }
  .cinta-tramo span::before { margin-right: 20px; }
  .filtro-genero button { min-width: 0; flex: 1; padding: 0 12px; }
}

/* ── 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: 600 12px var(--rotulo); letter-spacing: .12em; 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: 600 12px var(--rotulo); letter-spacing: .12em; 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: 800 var(--h4)/1.3 var(--cuerpo); color: var(--tinta); margin-bottom: 10px; }
.hueco p + p { margin: 8px auto 0; max-width: 46ch; }
.hueco p a:not(.btn) { color: var(--acento-hondo); text-decoration: underline; text-underline-offset: 3px; }
.hueco .btn { margin-top: 14px; }