/* ─────────────────────────────────────────────────────────────────────────
   Manhattan By Bagués — fragancias y cosmética, Río Cuarto, Córdoba.

   La idea de la que sale todo lo demás: en esta tienda cada fragancia es una
   versión de otra conocida, y el catálogo lo dice con todas las letras. El
   dato ya estaba partido en dos campos (`nombre` y `original`): "Abu Dabi" y
   "Oud for Greatness". La tienda vieja los pegoteaba en un solo renglón en
   mayúsculas. Acá son una pieza fija de dos líneas —el nombre grande, abajo
   "type" y el original en monoespaciada— que se repite en la tarjeta, en la
   ficha y en el carrito. Esa pieza es la marca; todo lo demás se calla.

   Tres decisiones que conviene no deshacer sin pensarlo:

   1. El papel es blanco. Las fotos de producto están tomadas sobre blanco:
      con un fondo crema se convierten en cientos de recuadros recortados.
      El color lo pone el marco (cabecera, bandas, pie), no el papel.
   2. No hay ninguna serif. El rubro entero usa serif de alto contraste para
      decir "perfume caro"; el negocio de esta tienda es justamente el
      contrario. Negarle la serif es el diseño estando de acuerdo con el
      negocio.
   3. Cajas rectas y botones redondos del todo. El redondeo de 8px en todo
      era del tema que venía de antes; este par —panel recto, botón pastilla—
      es de acá.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  /* ── Color ───────────────────────────────────────────────────────────── */
  --papel: #FFFFFF;
  --tinta: #2E1B33;          /* berenjena: la voz de la marca, 15.8:1 sobre blanco */
  /* Los dos grises son la tinta con transparencia. El "suave" no baja del 70%
     porque abajo de ahí el texto de 12px deja de llegar a 4.5:1 sobre blanco. */
  --tinta-media: #2E1B33CC;
  --tinta-suave: #2E1B33B3;
  --raya: #2E1B3326;
  --raya-suave: #2E1B3314;

  --rubor: #FAEFF4;          /* el fondo de las fotos y de las bandas claras */
  --rubor-hondo: #F2DFE9;

  /* El magenta del sello de la clienta. Los dos valores salen de
     datos/marca.json (`color` y `colorHondo`), de donde los toman también el
     favicon y los mails: cambiar el magenta es cambiarlo ahí. El de ahora da
     4,6:1 sobre blanco —pasa el piso de 4,5, pero por poco—, así que los
     hover y los textos chicos usan el hondo, de 6,9:1. */
  --flor: #DB2D71;
  --flor-honda: #A8225A;
  --pino: #0C6B4E;           /* el precio con transferencia — 6.5:1 */
  --miel: #E8B33F;           /* la segunda barra de anuncios y los detalles del pie, con tinta encima — 8.3:1 */
  --naranja: #B4610E;        /* últimas unidades y pedidos esperando — 4.5:1 justo */

  /* ── Letra ───────────────────────────────────────────────────────────── */
  --display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --cuerpo: "Hanken Grotesk", -apple-system, "Segoe UI", Roboto, sans-serif;
  /* La monoespaciada es la que hace el trabajo de marca: la línea "type", los
     rótulos y los precios. Da lectura de lista honesta y no de vidriera. */
  --mono: "DM Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --h1: clamp(38px, 6vw, 66px);
  --h2: clamp(28px, 4vw, 42px);
  --h3: clamp(23px, 3vw, 31px);
  --h4: 21px;
  --h5: 17px;
  --h6: 14px;

  /* ── Medidas ─────────────────────────────────────────────────────────── */
  --ancho: 1240px;
  --aire: clamp(18px, 4vw, 40px);   /* el margen lateral */
  --paso: clamp(52px, 7vw, 104px);  /* la separación entre secciones */
  --radio: 0;                       /* paneles, campos y fotos: rectos */
  --radio-chico: 0;
  --radio-boton: 999px;             /* los botones, pastilla */
  --radio-medio: 0;
  --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(--papel);
  color: var(--tinta);
  font: 400 15px/1.55 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; font-family: var(--display); font-weight: 700; line-height: 1.05; letter-spacing: -.02em; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

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

.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 monoespaciado ─────────────────────────────────────────────
   La pieza de estructura que se repite en todas las pantallas: dice de qué
   se trata lo que viene abajo. Nunca lleva números de orden: acá nada es una
   secuencia. */

.etiqueta {
  font: 500 11px var(--mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--flor);
}

/* ── Las dos barras de anuncio ───────────────────────────────────────────
   Pasan de largo sin parar. Una sola tira de mensajes repetida dos veces
   alcanza para que el bucle no tenga costura. */

.adbar { overflow: hidden; font: 400 11px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.adbar-uno { background: var(--tinta); color: var(--papel); padding: 11px 8px; }
.adbar-dos { background: var(--miel); color: var(--tinta); padding: 8px; }

.adbar .tira {
  display: flex; align-items: center; width: max-content; gap: 28px;
  animation: correr 44s linear infinite;
}
.adbar .flor { display: grid; place-items: center; opacity: .75; }
.adbar .flor svg { width: 11px; height: 11px; display: block; }
.adbar-dos .tira { animation-duration: 34s; }
.adbar span { white-space: nowrap; }

@keyframes correr { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .adbar .tira { animation: none; justify-content: center; width: 100%; gap: 32px; flex-wrap: wrap; }
  .adbar .tira > .repetida { display: none; }
}

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

/* Pegada arriba, pero corrida hacia arriba lo que miden las barras de anuncios
   (--alto-anuncios, lo mide tienda.js): al bajar se van y queda el logo con
   el menú. */
.cabecera {
  position: sticky; top: calc(-1 * var(--alto-anuncios, 0px)); z-index: 40;
  background: var(--papel); border-bottom: 1px solid var(--raya-suave);
}

.fila-cabecera {
  display: flex; align-items: center; gap: 20px;
  padding-top: 18px; padding-bottom: 18px;
}

/* El logotipo repite el logo de la clienta como está en su Canva: la flor
   arriba, "Manhattan" en magenta y "BAGUÉS" en negro, chico y espaciado. La
   flor es su dibujo, en vector. Las letras son las de la casa: la del logo
   es TAN Nimbus, una letra de Canva que no se puede usar en una web. */
.marca { display: block; line-height: 1; flex: none; }
.marca .sello { display: block; width: 15px; height: 17px; margin: 0 auto 4px; color: var(--flor); }
.marca .sello svg { display: block; width: 100%; height: 100%; }
.marca .palabra {
  display: block;
  font: 800 27px/1 var(--display);
  letter-spacing: -.035em;
  color: var(--flor);
}
/* El espaciado estira "BAGUÉS" hasta el ancho del nombre de arriba, como en
   el sello. El último espacio sobra al final: lo compensa el margen
   negativo, si no la palabra queda corrida a la izquierda. */
.marca .rubro {
  display: block; margin-top: 5px; margin-right: -.34em;
  font: 400 10px var(--mono); letter-spacing: .34em; text-transform: uppercase;
  color: var(--tinta);
  text-align: center;
}

.hamburguesa { display: none; background: none; border: 0; padding: 8px; cursor: pointer; }
/* Sin tamaño propio el dibujo quedaba en cero y el botón no se veía. */
.hamburguesa svg { width: 24px; height: 24px; display: block; }

/* El buscador es una sola pastilla con el botón adentro: son cientos de productos
   y buscar es la forma más corta de llegar a uno. */
.buscador {
  flex: 1; display: flex; align-items: center; max-width: 520px;
  border: 1px solid var(--raya); border-radius: var(--radio-boton);
  padding-left: 18px; background: var(--papel);
}
.buscador:focus-within { border-color: var(--tinta); }
.buscador input {
  flex: 1; min-width: 0; height: 42px; padding: 0; border: 0; background: none;
  font: 400 14px var(--cuerpo); color: var(--tinta);
}
.buscador input:focus { outline: none; }
.buscador input::placeholder { color: var(--tinta-suave); }
.buscador button {
  flex: none; width: 42px; height: 42px; display: grid; place-items: center;
  background: none; border: 0; cursor: pointer; color: var(--tinta); border-radius: var(--radio-boton);
}
.buscador button:hover { color: var(--flor); }
.buscador svg { width: 17px; height: 17px; }

.utilidades { margin-left: auto; display: flex; align-items: center; gap: 22px; }

.utilidad {
  display: flex; align-items: center; gap: 9px;
  background: none; border: 0; padding: 0; cursor: pointer; text-align: left;
}
.utilidad .redondel { position: relative; flex: none; display: grid; place-items: center; color: var(--tinta); }
.utilidad .redondel svg { width: 21px; height: 21px; }
.utilidad:hover .redondel { color: var(--flor); }
.utilidad .rotulo { display: block; font: 400 11px/1.35 var(--mono); letter-spacing: .04em; color: var(--tinta-media); }
.utilidad .rotulo b { display: block; font-weight: 500; color: var(--tinta); text-transform: uppercase; letter-spacing: .1em; font-size: 10px; }

/* La cuenta del carrito sobre el ícono. En la computadora no hace falta, el
   rótulo ya la dice; en el teléfono el rótulo no entra y queda sólo esto. */
.globito { display: none; }
@media (max-width: 900px) { .globito { display: grid; } }
.globito {
  position: absolute; top: -6px; right: -10px;
  place-items: center;
  min-width: 17px; height: 17px; padding: 0 5px; border-radius: 999px;
  background: var(--flor); color: #fff;
  font: 500 10px/1 var(--mono);
}

/* ── La fila de categorías ───────────────────────────────────────────────
   En la computadora es una tira; en el teléfono se despliega desde la
   hamburguesa. Se desliza al costado en vez de cortarse: son diez. */

.fila-menu { border-bottom: 1px solid var(--raya-suave); background: var(--papel); }
.menu {
  display: flex; align-items: center; gap: 26px;
  padding-top: 13px; padding-bottom: 13px;
  font: 400 11px var(--mono); letter-spacing: .14em; text-transform: uppercase;
  overflow-x: auto; scrollbar-width: none;
}
.menu::-webkit-scrollbar { display: none; }
.menu > a, .categorias > a { padding: 4px 0; white-space: nowrap; color: var(--tinta-media); }
.menu > a:hover, .categorias > a:hover { color: var(--flor); }
.categorias { position: relative; flex: none; }
.categorias > a { display: flex; align-items: center; gap: 7px; color: var(--tinta); }
.categorias svg { width: 10px; height: 10px; }

.desplegable {
  position: absolute; top: calc(100% + 13px); left: -16px; min-width: 280px; z-index: 50;
  background: var(--papel); border: var(--borde);
  padding: 10px 0;
  box-shadow: 0 16px 40px #2E1B331F;
}
.categorias:not([data-abierto="si"]) .desplegable { display: none; }
.desplegable a { display: block; padding: 9px 22px; font-size: 13px; font-family: var(--cuerpo); letter-spacing: 0; text-transform: none; color: var(--tinta); }
.desplegable a:hover { background: var(--rubor); color: var(--flor); }
.desplegable .hija a { padding-left: 38px; color: var(--tinta-media); }

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

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 9px 20px; min-height: 36px;
  background: var(--flor); color: #fff; border: 0; border-radius: var(--radio-boton);
  font: 500 13px var(--cuerpo); cursor: pointer; text-align: center;
  transition: background .15s;
}
.btn:hover { background: var(--flor-honda); }
.btn[disabled], .btn.apagado {
  background: none; color: var(--tinta-suave); border: 1px solid var(--raya);
  cursor: not-allowed; pointer-events: none;
}
.btn.grande { min-height: 48px; padding: 14px 28px; font-size: 15px; }
.btn.ancho { width: 100%; }
/* El botón callado: mismo lugar, menos peso. */
.btn.borde { background: none; color: var(--tinta); border: 1px solid var(--raya); }
.btn.borde:hover { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }

/* ── La equivalencia ─────────────────────────────────────────────────────
   La pieza de la casa. El nombre propio arriba, y abajo qué es: "type" y la
   fragancia que versiona, o el formato cuando no versiona ninguna (los
   aceites, los aromatizantes, el maquillaje). El renglón de abajo nunca
   queda vacío y nunca dice algo que el catálogo no sepa. */

.lockup { display: block; min-width: 0; }
.lockup .nombre-producto {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  font: 700 var(--h5)/1.1 var(--display);
  letter-spacing: -.025em; text-transform: uppercase; color: var(--tinta);
}
.lockup .equivale {
  margin-top: 7px;
  font: 400 11px/1.4 var(--mono); letter-spacing: .03em;
  color: var(--tinta-suave);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.lockup .equivale b { color: var(--flor); font-weight: 500; }

/* ── La tarjeta de producto ──────────────────────────────────────────────
   La foto se apoya en una lámina de rubor y se multiplica contra ella: las
   fotos vienen con fondo blanco, y multiplicando el blanco desaparece y
   queda el frasco solo sobre el color de la casa. Es lo que hace que una
   grilla de fotos ajenas se vea como una tienda y no como un listado. */

.tarjeta { position: relative; display: flex; flex-direction: column; }
.tarjeta .marco { position: relative; display: block; background: var(--rubor); }
/* height: auto porque el alto del HTML le gana al aspect-ratio y en el
   teléfono la foto quedaba estirada para abajo. */
.tarjeta .marco img {
  width: 100%; height: auto; aspect-ratio: 1; object-fit: contain;
  mix-blend-mode: multiply;
  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; }
}

.etiquetas {
  position: absolute; top: 0; left: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: flex-start; gap: 0;
}
.etiqueta-chica {
  font: 500 10px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase;
  padding: 6px 9px;
  background: var(--tinta); color: var(--papel);
}

.tarjeta .lockup { margin: 15px 0 0; }
.tarjeta .precio { margin-top: 12px; }

/* El precio con transferencia primero y grande: es el que la tienda cobra en
   la mayoría de las ventas, y es el motivo por el que alguien compra acá. */
.precio .con {
  display: block; font: 700 var(--h5)/1.1 var(--display); color: var(--pino);
  letter-spacing: -.02em;
}
.precio .con small { font: 400 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--pino); display: block; margin-top: 3px; }
.precio .plata { display: block; font: 400 13px var(--mono); color: var(--tinta-media); margin-top: 6px; }
.precio .antes { font: 400 12px var(--mono); color: var(--tinta-suave); text-decoration: line-through; margin-right: 7px; }
.precio .off { font: 500 11px var(--mono); color: var(--flor); margin-left: 7px; }
.cuotas { font: 400 11px var(--mono); color: var(--tinta-suave); margin-top: 5px; }
.aviso-stock { font: 500 11px var(--mono); color: var(--naranja); margin-top: 8px; text-transform: uppercase; letter-spacing: .1em; }

.tarjeta .btn { align-self: stretch; margin-top: 14px; }

/* ── Secciones y carruseles ──────────────────────────────────────────────
   El título de sección cuelga a la izquierda con su rótulo: el ritmo ya no
   es todo centrado como antes. */

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

.cabeza-seccion { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 26px; }
.titulo-seccion { font-size: var(--h2); margin-top: 8px; }

.carrusel-caja { position: relative; }
.carrusel {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: calc((100% - 3 * 22px) / 4);
  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: 34%; z-index: 3;
  width: 40px; height: 40px; display: grid; place-items: center;
  background: var(--papel); border: 1px solid var(--raya); border-radius: 999px;
  cursor: pointer; color: var(--tinta);
}
.flecha:hover { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }
.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: 8px; margin-top: 26px; }
.puntos button {
  width: 7px; height: 7px; padding: 0; border-radius: 999px;
  border: 1px solid var(--tinta-suave); background: none; cursor: pointer;
}
.puntos button[aria-current="true"] { background: var(--flor); border-color: var(--flor); }

/* ── Las bandas de la portada ────────────────────────────────────────────
   Reemplazan a las dos imágenes que venían armadas de afuera. No tenemos
   material de la clienta, así que la tapa se arma con las fotos de producto
   que ya están en el catálogo —son de lo que la tienda vende de verdad— y
   el resto es tipografía. La banda de promoción no lleva fotos: sobre
   berenjena las fotos de fondo blanco serían recuadros blancos. */

.banda { background: var(--rubor); }
.banda .envoltorio {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(28px, 5vw, 64px); align-items: center;
  padding-block: clamp(40px, 6vw, 76px);
}
/* El ancho del bloque no se limita en ch: el ch se mide con la letra del
   bloque (15px) y no con la del título, y el título quedaba de a una palabra. */
.banda .dicho { min-width: 0; }
.banda h1, .banda h2 { font-size: var(--h1); margin: 12px 0 0; max-width: 13em; text-wrap: balance; }
.banda p { margin: 18px 0 0; font-size: 16px; color: var(--tinta-media); max-width: 38ch; }
.banda .btn { margin-top: 26px; }

/* La línea arriba de la tapa: el rubro y la dirección del local, en el
   magenta hondo (sobre rubor el de marca no llega a 4,5:1 con letra de 11px). */
.banda .presentacion .etiqueta { margin: 0; max-width: none; font-size: 11px; color: var(--flor-honda); }
/* En el teléfono la línea no entra entera: que corte en el punto y no en el
   medio de "Río Cuarto". */
.presentacion .etiqueta span { white-space: nowrap; }
.banda .presentacion + h1 { margin-top: 14px; }

/* El estante: los frascos apoyados en la lámina, de distinto alto, como en
   una vidriera. Multiplican igual que en las tarjetas. */
.estante { display: flex; align-items: flex-end; justify-content: flex-end; gap: clamp(8px, 1.6vw, 20px); }
/* Las fotos traen mucho aire blanco alrededor del frasco: se agrandan dentro
   de su lugar para que el estante se lea como frascos y no como márgenes. */
.estante img {
  width: 100%; height: auto; aspect-ratio: 1; object-fit: contain;
  mix-blend-mode: multiply;
  transform: scale(1.55); transform-origin: 50% 80%;
}
.estante a { display: block; flex: 1 1 0; min-width: 0; }
/* Alturas alternadas: parado, un poco más bajo, parado. */
.estante a:nth-child(even) { padding-bottom: clamp(14px, 2.5vw, 34px); }

.banda.promo { background: var(--tinta); color: var(--papel); }
.banda.promo .envoltorio { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.banda.promo .etiqueta { color: var(--miel); }
.banda.promo p { color: #FFFFFFCC; }
.banda.promo .btn { background: var(--papel); color: var(--tinta); }
.banda.promo .btn:hover { background: var(--miel); color: var(--tinta); }
/* El número de la promo, grande y solo: es toda la oferta en una cifra. */
.banda.promo .cifra {
  font: 800 clamp(64px, 12vw, 148px)/0.82 var(--display);
  letter-spacing: -.05em; color: var(--miel); text-align: right;
}
.banda.promo .cifra small { display: block; font: 400 12px var(--mono); letter-spacing: .2em; text-transform: uppercase; color: #FFFFFFB3; margin-top: 14px; }

/* ── Los mensajes institucionales ───────────────────────────────────────── */

.institucional { text-align: center; }
.institucional .contenedor { padding-block: clamp(40px, 6vw, 72px); }
.institucional .lamina:not([data-visible="si"]) { display: none; }
.institucional h3 { font-size: var(--h3); margin: 12px 0 0; }
.institucional p { font-size: 16px; margin: 16px auto 0; max-width: 56ch; color: var(--tinta-media); }

/* ── La banda de redes ───────────────────────────────────────────────────
   Antes acá había seis fotos del Instagram del negocio anterior, con el link
   a sus posteos. No tenemos material de la clienta y no se puede mostrar el
   de otro, así que quedan las dos puertas por las que esta tienda vende de
   verdad: Instagram y WhatsApp. */

/* Va sobre rubor y no sobre berenjena: la sigue el pie, que es oscuro, y dos
   bloques oscuros con una franja blanca en el medio se leían cortados. */
.social { background: var(--rubor); }
.social .contenedor { padding-block: clamp(40px, 6vw, 72px); text-align: center; }
.social h2 { font-size: var(--h2); margin: 12px 0 0; }
.social .contenedor > p:not(.etiqueta) { margin: 16px auto 0; max-width: 46ch; color: var(--tinta-media); }

.social .puertas { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 30px; }
.social .puerta {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 15px 28px; border: 1px solid var(--tinta); border-radius: var(--radio-boton);
  font: 500 14px var(--cuerpo); color: var(--tinta);
}
.social .puerta:hover { background: var(--tinta); color: var(--papel); }
.social .puerta svg { width: 20px; height: 20px; }

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

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

/* La columna de miniaturas sólo existe cuando hay más de una foto: si no,
   la foto grande caía adentro de los 64px de las miniaturas. */
.galeria { display: grid; gap: 16px; }
/* La columna de datos mide el doble que la foto: sin esto, al bajar a las
   notas y al envío quedaba media pantalla vacía a la izquierda. */
.ficha .galeria { position: sticky; top: calc(var(--alto-fijo, 150px) + 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(--rubor); cursor: pointer; display: block;
}
.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; }
.galeria .grande { position: relative; background: var(--rubor); }
.galeria .grande img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; mix-blend-mode: multiply; }
.galeria .contador {
  position: absolute; bottom: 12px; right: 12px;
  font: 400 11px var(--mono); letter-spacing: .1em; color: var(--tinta-suave);
}

.ficha .datos { min-width: 0; }
.ficha .migas { margin-bottom: 16px; }
.ficha h1, .ficha h2 { font-size: var(--h2); text-transform: uppercase; }

/* En la ficha la equivalencia se despliega: deja de ser un renglón chico y
   pasa a ser el bloque que explica qué se está comprando. */
.ficha .equivalencia {
  margin-top: 16px; padding: 16px 0; border-block: var(--borde);
  font: 400 13px/1.5 var(--mono); letter-spacing: .02em; color: var(--tinta-media);
  display: flex; flex-wrap: wrap; gap: 8px 20px;
}
.ficha .equivalencia b { color: var(--flor); font-weight: 500; }
.ficha .equivalencia .dato { display: inline-flex; gap: 7px; }
.ficha .equivalencia .dato span { color: var(--tinta-suave); }

.ficha .precio { margin-top: 24px; }
.ficha .precio .con { font-size: var(--h2); }
.ficha .precio .plata { font-size: 15px; }
.ficha .sin-impuestos { font: 400 11px var(--mono); color: var(--tinta-suave); margin-top: 8px; }
.ficha .cuotas { font-size: 12px; margin-top: 10px; }
.ficha .descuento { font-size: 14px; margin-top: 14px; color: var(--tinta-media); }
.ficha .descuento b { color: var(--pino); font-weight: 600; }
.ficha .ver-detalles { font-size: 13px; color: var(--flor); text-decoration: underline; text-underline-offset: 3px; display: inline-block; margin-top: 10px; }
.ficha .vendidos { font: 400 11px var(--mono); color: var(--tinta-suave); margin-bottom: 8px; }

.compra { display: flex; gap: 12px; margin-top: 26px; }
.cantidad {
  display: flex; align-items: center; flex: none;
  border: 1px solid var(--raya); border-radius: var(--radio-boton);
}
.cantidad button { width: 40px; height: 48px; background: none; border: 0; cursor: pointer; font-size: 17px; border-radius: var(--radio-boton); }
.cantidad button:hover { color: var(--flor); }
.cantidad span { min-width: 26px; text-align: center; font: 500 14px var(--mono); }
.compra .btn { flex: 1; min-height: 48px; font-size: 15px; }

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

.envio-caja { margin-top: 26px; padding-top: 24px; border-top: var(--borde); }
.envio-caja label { display: block; font: 500 11px var(--mono); letter-spacing: .14em; 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: 46px; padding: 0 16px; font: 400 14px var(--cuerpo);
  border: 1px solid var(--raya); border-radius: var(--radio-boton); background: var(--papel); color: var(--tinta);
}
.envio-caja button {
  flex: none; padding: 0 22px; background: none; cursor: pointer; color: var(--tinta);
  border: 1px solid var(--raya); border-radius: var(--radio-boton); font: 500 13px var(--cuerpo);
}
.envio-caja button:hover { background: var(--tinta); color: var(--papel); }
.envio-caja .resultado { font-size: 13px; margin-top: 12px; color: var(--tinta-media); }

/* Las variantes (tamaño, tono, color). La elegida lleva el borde de la
   tinta; las agotadas, tachadas, pero se pueden tocar para pedir el aviso. */
.variantes { margin-top: 26px; }
.rotulo-variantes { font: 400 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-suave); margin: 0 0 12px; }
.rotulo-variantes b { color: var(--tinta); font-weight: 500; }
.botones-variantes { display: flex; flex-wrap: wrap; gap: 9px; }
.botones-variantes button {
  min-height: 42px; min-width: 56px; padding: 8px 18px;
  background: none; border: 1px solid var(--raya); border-radius: var(--radio-boton);
  font: 400 13px var(--cuerpo); cursor: pointer;
}
.botones-variantes button:hover { border-color: var(--tinta); }
.botones-variantes button[aria-pressed="true"] { border-color: var(--tinta); background: var(--tinta); color: var(--papel); }
.botones-variantes button.sin { color: var(--tinta-suave); text-decoration: line-through; }
.botones-variantes button.sin[aria-pressed="true"] { background: none; color: var(--tinta-suave); border-color: var(--raya); box-shadow: inset 0 0 0 1px var(--raya); }

/* "Avisame cuando vuelva", debajo del botón apagado de "Sin stock". */
.avisame { margin-top: 18px; padding: 20px; background: var(--rubor); }
.avisame label { display: block; font-size: 13px; margin-bottom: 12px; color: var(--tinta-media); }
.avisame label b, .avisame .listo b { display: block; font: 700 var(--h5) var(--display); color: var(--tinta); margin-bottom: 4px; letter-spacing: -.02em; }
.avisame .fila { display: flex; gap: 10px; }
/* width: 0 con flex: 1: el campo crece igual, pero su ancho propio (unos
   veinte caracteres) ya no empuja la columna. */
.avisame input {
  flex: 1; width: 0; min-width: 0; height: 46px; padding: 0 16px; font: 400 14px var(--cuerpo);
  border: 1px solid var(--raya); border-radius: var(--radio-boton); background: var(--papel); color: var(--tinta);
}
.avisame button[type="submit"] {
  flex: none; padding: 0 22px; background: var(--flor); color: #fff; border: 0; cursor: pointer;
  font: 500 13px var(--cuerpo); border-radius: var(--radio-boton);
}
.avisame button[type="submit"]:hover { background: var(--flor-honda); }
.avisame button[type="submit"][disabled] { opacity: .6; cursor: default; }
.avisame .resultado { font-size: 12px; margin: 10px 0 0; color: var(--tinta-media); }
.avisame .resultado:empty { display: none; }
.avisame .listo { font-size: 13px; margin: 0; color: var(--tinta-media); }
.avisame .otro-numero { margin-top: 10px; padding: 0; background: none; border: 0; font-size: 12px; text-decoration: underline; cursor: pointer; color: var(--tinta-suave); }

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

/* Las notas olfativas: tres tramos en fila, de izquierda a derecha en el orden
   en que se sienten. Es la única lista numerada de la tienda porque es la
   única cosa que de verdad 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(--h3); margin-top: 8px; }
.familia-notas { display: flex; align-items: center; gap: 9px; margin-top: 16px; font: 400 12px var(--mono); letter-spacing: .04em; 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: 700 var(--h5)/1.1 var(--display); letter-spacing: -.02em; }
.tramo b::before { content: counter(tramo, decimal-leading-zero) " "; font: 500 11px var(--mono); color: var(--flor-honda); letter-spacing: .08em; vertical-align: 3px; }
.tramo span { font: 400 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-suave); }
.lista-notas { font-size: 15px; line-height: 1.6; color: var(--tinta-media); }
.lista-notas .punto { color: var(--flor); }

@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: 400 11px var(--mono); letter-spacing: .06em; color: var(--tinta-suave); margin-bottom: 10px; }
.migas a:hover { color: var(--flor); }
.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(--h2); text-transform: uppercase; }
/* La cantidad va pegada al título y el orden se va a la derecha: suelta en el
   medio de la fila no se sabía de qué era. */
.encabezado-listado h1 + .total-listado { margin-right: auto; padding-bottom: 5px; }
.orden { display: flex; flex-direction: column; gap: 6px; font: 400 10px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-suave); }
.orden select {
  width: 190px; height: 40px; padding: 0 12px; font: 400 13px var(--cuerpo);
  color: var(--tinta); background: var(--papel);
  border: 1px solid var(--raya); border-radius: var(--radio-boton);
}

.catalogo { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); margin-top: 32px; }
.filtros h2 { font: 500 11px var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--tinta-suave); margin-bottom: 18px; }
.grupo-filtro { margin-bottom: 24px; }
.grupo-filtro h6 { font: 500 10px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-suave); margin-bottom: 14px; }
.grupo-filtro li { margin-bottom: 4px; }
.grupo-filtro a, .grupo-filtro label { font-size: 14px; cursor: pointer; color: var(--tinta-media); display: block; padding: 3px 0; }
.grupo-filtro a:hover { color: var(--flor); }
.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 12px var(--mono); letter-spacing: .06em; text-decoration: underline; color: var(--flor);
}

.grilla { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.5vw, 34px) 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: 400 12px var(--mono); color: var(--tinta-suave); }

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

.pagina h1 { font-size: var(--h2); margin-bottom: 28px; text-transform: uppercase; }
/* El rótulo arriba del título, cuando lo hay: separado de las migas, pegado al título. */
.pagina > .migas + .etiqueta { margin: 26px 0 10px; }
.texto { max-width: 74ch; padding-bottom: var(--paso); }
.texto p { font-size: 15px; margin-bottom: 18px; color: var(--tinta-media); }
.texto ul { list-style: none; padding: 0; margin: 32px 0 14px; }
.texto li { font-size: 15px; margin-bottom: 10px; }
/* Las preguntas: el rótulo monoespaciado de la casa, no una viñeta. */
.texto li strong, .texto strong { font-weight: 600; color: var(--tinta); }
.texto .pregunta {
  font: 700 var(--h4) var(--display); letter-spacing: -.02em; 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é con nosotras ───────────────────────────────────────────────
   Las condiciones van como la ficha técnica de un producto: el rótulo en
   monoespaciada a la izquierda y el dato a la derecha. Es la misma lectura de
   lista honesta que tiene el resto de la tienda, y cada condición se
   encuentra sin leer párrafos. Lo único numerado es el pago, porque es un
   orden: seña, saldo, entrega. */

/* Con .texto adelante: si no, el .texto p de arriba le gana el tamaño y el color. */
.texto .cifra-emprende {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  font: 800 clamp(64px, 11vw, 120px)/.9 var(--display); letter-spacing: -.05em;
  color: var(--flor-honda); margin: 30px 0 12px;
}
.cifra-emprende small {
  font: 500 13px var(--mono); letter-spacing: .04em; color: var(--tinta-media); text-transform: uppercase;
}

.condiciones { margin: 18px 0 0; border-top: var(--borde); }
.condiciones > div {
  display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 20px;
  padding: 14px 0; border-bottom: var(--borde);
}
.condiciones dt {
  font: 500 11px/1.9 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-suave);
}
.condiciones dd { margin: 0; font-size: 15px; color: var(--tinta-media); }
/* La raya de abajo de la última la pone el título que sigue. */
.condiciones > div:last-child { border-bottom: 0; }

.pasos { list-style: none; counter-reset: paso; padding: 0; margin: 18px 0 0; display: grid; gap: 16px; }
.pasos li {
  counter-increment: paso; position: relative; padding-left: 44px;
  font-size: 15px; color: var(--tinta-media);
}
.pasos li::before {
  content: counter(paso); position: absolute; left: 0; top: -2px;
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  font: 500 12px var(--mono); color: var(--papel); background: var(--tinta);
}

.invitacion {
  background: var(--rubor); padding: clamp(24px, 4vw, 36px);
  margin: 40px 0 0; text-align: center;
}
.invitacion .frase {
  font: 700 var(--h3)/1.1 var(--display); letter-spacing: -.02em;
  color: var(--tinta); margin: 12px auto 24px; max-width: 24ch;
}

@media (max-width: 560px) {
  .condiciones > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}

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

.perdida { padding-top: clamp(40px, 7vw, 96px); }
.perdida h1 { margin: 12px 0 16px; font-size: var(--h1); text-transform: none; max-width: 14em; }
.perdida .bajada { font-size: 16px; color: var(--tinta-media); max-width: 52ch; }
.buscador-grande { margin-top: 32px; max-width: 560px; }
.buscador-grande input { height: 54px; font-size: 16px; }
.buscador-grande button { width: 54px; height: 54px; }
.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: 300px minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); padding-bottom: var(--paso); }
.contacto .datos li { display: grid; grid-template-columns: 18px 1fr; gap: 14px; font-size: 14px; margin-bottom: 18px; color: var(--tinta-media); }
.contacto .datos svg { width: 16px; height: 16px; margin-top: 4px; color: var(--flor); }
.contacto .datos a:hover { color: var(--flor); }
.contacto form { max-width: 520px; }
.campo { margin-bottom: 18px; }
.campo label { display: block; font: 500 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-suave); margin-bottom: 8px; }
.campo input, .campo textarea {
  width: 100%; padding: 13px 16px; font: 400 14px var(--cuerpo); color: var(--tinta);
  border: 1px solid var(--raya); border-radius: var(--radio); background: var(--papel);
}
.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: 13px; margin-bottom: 20px; padding: 16px; background: var(--rubor); color: var(--tinta-media); }
.arrepentimiento-listo p { font-size: 14px; margin-bottom: 10px; color: var(--tinta-media); }
.arrepentimiento-listo .codigo { font: 500 26px var(--mono); letter-spacing: .1em; color: var(--tinta); margin-bottom: 18px; }

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

.telon {
  position: fixed; inset: 0; z-index: 60; background: #2E1B3373;
  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: 24px 26px 18px; border-bottom: var(--borde);
}
.panel .cabeza h2 { font-size: var(--h4); text-transform: uppercase; }
.panel .cerrar { background: none; border: 0; cursor: pointer; padding: 8px; margin-right: -8px; }
/* Sin tamaño propio la X quedaba en cero y el botón de cerrar no se veía. */
.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(--rubor); }
.linea-carrito img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; mix-blend-mode: multiply; }
.linea-carrito h4 { font: 700 14px/1.15 var(--display); letter-spacing: -.02em; text-transform: uppercase; margin-bottom: 4px; }
.linea-carrito .variante-linea { font: 400 11px var(--mono); color: var(--tinta-suave); margin: 0 0 8px; }
.linea-carrito .importe { font: 500 14px var(--mono); }
.quitar {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: 400 11px var(--mono); color: var(--tinta-suave); text-decoration: underline;
}
.quitar:hover { color: var(--flor); }

.cuentas { margin: 18px 0; font-size: 14px; }
.cuentas > div { display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; }
.cuentas > div > span:last-child { font-family: var(--mono); font-size: 13px; }
.cuentas .ahorro { color: var(--pino); }
.cuentas .total {
  font-size: 16px; font-weight: 600; border-top: var(--borde);
  margin-top: 10px; padding-top: 14px;
}
.cuentas .total > span:last-child { font: 700 var(--h4) var(--display); letter-spacing: -.02em; }
.aviso-envio {
  font: 400 12px var(--mono); background: var(--rubor);
  padding: 13px 15px; margin-bottom: 12px; color: var(--tinta-media);
}
.aviso-envio b { color: var(--pino); font-weight: 500; }

/* ── Pie ─────────────────────────────────────────────────────────────────── */

.pie { background: var(--tinta); color: var(--papel); font-size: 14px; padding: var(--paso) 0 0; margin-top: var(--paso); }
.pie a:hover { color: var(--miel); }
.pie-grilla { display: grid; grid-template-columns: 1.4fr 1fr 1.2fr; gap: clamp(28px, 4vw, 56px); }
/* inline-block: como bloque ocupaba toda la columna y "BAGUÉS", centrado,
   quedaba corrido a la derecha del nombre en vez de abajo. */
.pie .marca { display: inline-block; }
.pie .marca .palabra { color: var(--papel); font-size: 34px; }
/* Sobre la berenjena del pie el negro del sello no se vería: va en papel, el
   mismo color que el nombre de arriba, como en el original. */
.pie .marca .rubro { color: var(--papel); }
.pie .lema { margin: 18px 0 24px; color: #FFFFFFB3; font-size: 14px; max-width: 30ch; }
.pie .redes { display: flex; gap: 14px; margin-bottom: 26px; }
.pie .redes a { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid #FFFFFF40; border-radius: 999px; }
.pie .redes a:hover { background: var(--papel); color: var(--tinta); border-color: var(--papel); }
.pie .redes svg { width: 16px; height: 16px; }
.pie h5 { font: 500 11px var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--miel); margin-bottom: 18px; }
.pie .datos li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; margin-bottom: 14px; color: #FFFFFFCC; }
.pie .datos svg { width: 14px; height: 14px; margin-top: 4px; }
.pie .enlaces li { margin-bottom: 12px; }
.pie .enlaces a { color: #FFFFFFCC; }
.pie .boletin { margin-top: 30px; }
.pie .boletin form { display: flex; max-width: 340px; border: 1px solid #FFFFFF40; border-radius: var(--radio-boton); padding: 4px; }
.pie .boletin input {
  flex: 1; min-width: 0; height: 38px; padding: 0 14px; border: 0; background: none;
  font: 400 14px var(--cuerpo); color: var(--papel);
}
.pie .boletin input:focus { outline: none; }
.pie .boletin input::placeholder { color: #FFFFFF99; }
.pie .boletin button {
  flex: none; padding: 0 18px; background: var(--papel); color: var(--tinta);
  border: 0; border-radius: var(--radio-boton); cursor: pointer; font: 500 13px var(--cuerpo);
}
.pie .boletin button:hover { background: var(--miel); }
.pie .boletin p { color: #FFFFFFCC; }

/* Abajo deja lugar para el botón de WhatsApp (52px a 20px del borde): si no,
   al llegar al final tapaba el renglón del CUIT. */
.legal { border-top: 1px solid #FFFFFF26; margin-top: var(--paso); padding-block: 26px 92px; font: 400 11px/1.7 var(--mono); color: #FFFFFF99; }
.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: 52px; height: 52px; border-radius: 999px;
  background: var(--tinta); color: #fff; display: grid; place-items: center;
  box-shadow: 0 6px 20px #2E1B3340;
  /* El borde claro lo separa del pie, que es del mismo berenjena. */
  border: 2px solid var(--papel);
}
.wa:hover { background: var(--flor); }
.wa svg { width: 26px; height: 26px; }

/* ── Checkout y seguimiento ──────────────────────────────────────────────
   Las dos pantallas que no existían en la tienda vieja: allá el cobro pasaba
   por afuera. 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); }
.cabecera-flujo .envoltorio {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding-block: 20px;
}
.cabecera-flujo nav a { font: 400 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-media); }
.cabecera-flujo nav a:hover { color: var(--flor); }

.error {
  background: #D8306F14; border: 1px solid #D8306F4D; color: var(--flor-honda);
  padding: 14px 16px; font-size: 14px; margin-bottom: 20px;
}
.vacio { padding: 56px 0; text-align: center; color: var(--tinta-media); }

/* ── Teléfono ─────────────────────────────────────────────────────────────
   El logotipo se centra, aparece la hamburguesa, la fila de categorías se
   esconde y las tarjetas van de a dos. */

@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. Los "html body" le ganan a las reglas de cada
     pantalla, que también fijan el tamaño. */
  html body input:not([type="checkbox"]):not([type="radio"]),
  html body select, html body textarea { font-size: 16px; }

  .fila-cabecera { flex-wrap: wrap; gap: 12px; padding-block: 14px; }
  .hamburguesa { display: block; order: 1; margin-left: -8px; }
  .marca { order: 2; margin: 0 auto; text-align: center; }
  /* En checkout y seguimiento no hay hamburguesa: el logotipo centrado se
     iba a la derecha y "Volver a la tienda" quedaba adelante. */
  .cabecera-flujo .marca, .pie .marca { order: 0; margin: 0; text-align: left; }
  .utilidades { order: 3; margin-left: 0; gap: 18px; }
  .utilidad .rotulo { display: none; }
  .buscador { order: 4; flex-basis: 100%; max-width: none; }

  .fila-menu { display: none; }
  .fila-menu[data-abierto="si"] { display: block; }
  .menu { flex-direction: column; align-items: flex-start; gap: 0; overflow: visible; padding-block: 8px 16px; }
  .menu > a, .categorias > a { padding: 11px 0; }
  .categorias { width: 100%; }
  .desplegable { position: static; border: 0; box-shadow: none; padding: 0 0 8px 14px; min-width: 0; }
  .desplegable a { padding: 9px 0; }
  .desplegable .hija a { padding-left: 16px; }
  .categorias[data-abierto="si"] > a svg { transform: rotate(180deg); }

  .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: 26px 16px; }

  .ficha { grid-template-columns: minmax(0, 1fr); }
  .ficha .galeria { position: static; }
  /* En una tablet o un teléfono acostado la foto cuadrada llenaba la pantalla
     y el nombre y el precio quedaban abajo del pliegue. Además las fotos
     miden 600px: más grandes se estiraban. */
  .galeria .grande { width: min(100%, 58vh, 600px); margin-inline: auto; }
  .galeria { grid-template-columns: minmax(0, 1fr); }
  /* La foto grande arriba y las miniaturas en fila abajo. La regla de dos
     clases de la computadora le ganaba a la de una y la foto caía adentro de
     la columna de 64px de las miniaturas. */
  .galeria.con-miniaturas { grid-template-columns: minmax(0, 1fr); }
  .galeria .miniaturas { flex-direction: row; order: 2; gap: 10px; }
  .galeria .miniaturas button { width: 60px; flex: none; }

  .banda .envoltorio { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .banda .dicho { max-width: none; }
  .banda.promo .envoltorio { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .banda.promo .cifra { text-align: left; }
  /* En el teléfono la cifra sube arriba del texto: si queda debajo del botón,
     el botón invita a una promo que todavía no se leyó. */
  .banda.promo .cifra { order: -1; }
  .estante { justify-content: flex-start; }

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

/* ── 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);
  }
  .abrir-filtros {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    height: 54px; background: none; border: 0; border-right: var(--borde);
    font: 400 11px var(--mono); letter-spacing: .14em; 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;
  }
  /* El select queda encima, invisible: el teléfono abre su propia lista. */
  .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 11px var(--mono); letter-spacing: .1em; 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: 700 var(--h4)/1.15 var(--display); letter-spacing: -.02em; color: var(--tinta); margin-bottom: 10px; }
.hueco p + p { margin: 8px auto 0; max-width: 46ch; }
.hueco p a:not(.btn) { color: var(--flor-honda); text-decoration: underline; text-underline-offset: 3px; }
.hueco .btn { margin-top: 14px; }