/* ═══════════════════════════════════════════════════════════
   HALO ESSENCE · Tienda

   Decisión de composición: el catálogo empieza en el primer
   viewport. No hay portada alta que empuje los productos abajo.
   Lo que abre es una franja de tres datos y la barra de la
   colección; después, grilla densa de 5 por fila.

   La jerarquía se construye con tres cosas, no con espacio:
     · escalera de grises cálidos (fondo → tarjeta → peana)
     · el precio como el elemento más fuerte de cada ficha
     · una ficha destacada que ocupa dos columnas y rompe la
       repetición de la grilla
   ═══════════════════════════════════════════════════════════ */

/* ── Encabezado ─────────────────────────────────────────────── */
.cabecera {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: color-mix(in srgb, var(--fondo) 88%, transparent);
  backdrop-filter: blur(16px) saturate(1.4);
  border-bottom: 1px solid var(--linea-fina);
}
.cabecera__interior {
  position: relative;   /* ancla del menú desplegable en móvil */
  display: flex;
  align-items: center;
  gap: var(--e-4);
  height: 3.9rem;
}

.logo { display: flex; align-items: center; gap: 0.55rem; flex-shrink: 0; }
.logo img { width: 1.95rem; height: 1.95rem; border-radius: 50%; background: none; }
.logo__texto { display: flex; flex-direction: column; line-height: 1; }
.logo__nombre { font-family: var(--display); font-size: var(--t-display); letter-spacing: 0.04em; font-weight: 600; }
.logo__bajada {
  font-size: var(--t-3xs);
  letter-spacing: 0.32em;
  color: var(--oro);
  text-transform: uppercase;
  margin-top: 2px;
}

/* El buscador vive en el encabezado: es la primera acción real.
   A la derecha de la navegación y antes de las acciones, que es donde
   lo espera cualquiera que haya comprado algo por internet. */
.cabecera .buscador { flex: 1 1 10rem; max-width: 24rem; margin-left: auto; }

/* La tecla "/" enfoca el buscador. Se muestra la pista, como en
   cualquier herramienta que se usa seguido. */
.buscador__atajo {
  position: absolute;
  right: 0.5rem; top: 50%;
  transform: translateY(-50%);
  min-width: 1.3rem;
  padding: 0.05rem 0.3rem;
  border: 1px solid var(--linea);
  border-radius: var(--r-sm);
  background: var(--tarjeta);
  font-family: var(--ui);
  font-size: var(--t-2xs);
  color: var(--texto-3);
  text-align: center;
  pointer-events: none;
  transition: opacity var(--vel) var(--curva);
}
.buscador .control:focus ~ .buscador__atajo { opacity: 0; }
@media (max-width: 940px) { .buscador__atajo { display: none; } }

/* Los atajos van en versalitas espaciadas: es donde Jost se luce, y
   los separa visualmente del texto corrido de la página. */
.nav { display: flex; gap: 0.15rem; flex-shrink: 0; align-items: center; }
.nav a, .nav button {
  font-family: inherit;
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--texto-2);
  padding: 0.45rem 0.7rem;
  border-radius: var(--r-sm);
  white-space: nowrap;
  transition: color var(--vel) var(--curva), background var(--vel) var(--curva);
}
.nav a:hover, .nav button:hover { color: var(--oro-alto); background: var(--realce); }

/* Preguntas no es un filtro del catálogo: va del otro lado de un
   separador, con el mismo peso visual que el resto. */
.nav a:last-child {
  margin-left: 0.55rem;
  padding-left: 1.1rem;
  position: relative;
}
.nav a:last-child::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 1px; height: 0.9rem;
  background: var(--linea);
}

.acciones-cabecera { display: flex; align-items: center; gap: 0.2rem; flex-shrink: 0; }

.burbuja {
  position: absolute;
  top: 1px; right: 1px;
  min-width: 1.05rem;
  height: 1.05rem;
  padding: 0 0.25rem;
  border-radius: var(--r-full);
  background: var(--oro);
  color: var(--tinta-oro);
  font-size: var(--t-2xs);
  font-weight: 700;
  display: grid;
  place-items: center;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 2px var(--fondo);
}
/* mueve-igual: el latido es la confirmación de que algo entró a la
   bolsa, así que sobrevive a prefers-reduced-motion. Es un pulso corto
   de escala, no un movimiento en el espacio. */
.burbuja.late { animation: late 420ms var(--curva); }
@keyframes late {
  0%   { transform: scale(1); }
  38%  { transform: scale(1.55); }
  100% { transform: scale(1); }
}

.btn-menu { display: none; }

@media (max-width: 940px) {
  /* El buscador baja a una segunda fila a todo el ancho. Antes se
     ocultaba, y en un catálogo de 157 fragancias buscar es la primera
     cosa que alguien quiere hacer desde el teléfono. */
  .cabecera__interior {
    height: auto;
    flex-wrap: wrap;
    row-gap: 0.5rem;
    padding-block: 0.55rem;
  }
  .logo { order: 1; }
  .acciones-cabecera { order: 2; margin-left: auto; }
  .cabecera .buscador { order: 3; flex: 1 1 100%; max-width: none; margin-left: 0; }

  /* El menú cuelga del encabezado, así no hay que calcular su altura. */
  .nav {
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    order: 4;
    flex-direction: column;
    gap: 0;
    background: var(--tarjeta);
    border-bottom: 1px solid var(--linea);
    padding: var(--e-2) var(--margen) var(--e-4);
    transform: translateY(-120%);
    box-shadow: var(--sombra);
    z-index: -1;

    /* El z-index negativo no alcanza para esconderlo: .cabecera lleva
       backdrop-filter, y eso crea un contexto de apilado, así que el
       menú se dibuja ARRIBA del fondo del encabezado en vez de atrás.
       Con el menú de seis opciones ya no entraba en el corrimiento y
       se leía "OFERTAS" y "PREGUNTAS" encima del logo.

       visibility lo saca de la pantalla sin depender del apilado, y
       como es animable, el deslizamiento se mantiene. */
    visibility: hidden;
    transition:
      transform var(--vel-2) var(--curva),
      visibility var(--vel-2);
  }
  .nav.abierta { transform: none; visibility: visible; }
  .nav a, .nav button {
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--linea-fina);
    border-radius: 0;
    text-align: left;
    width: 100%;
  }
  .nav a:last-child { margin-left: 0; padding-left: 0; border-bottom: none; }
  .nav a:last-child::before { display: none; }
  .btn-menu { display: grid; }
}

/* ── Franja de garantías ────────────────────────────────────
   Tres hechos, una línea, sin ocupar pantalla. Reemplaza a la
   portada de 700 px de alto que tenía antes. */
.franja-datos {
  border-bottom: 1px solid var(--linea-fina);
  background:
    linear-gradient(90deg, var(--oro-velo), transparent 45%),
    var(--hueco);
}

.franja-datos__interior {
  display: flex;
  align-items: center;
  gap: var(--e-5);
  padding-block: 0.6rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.franja-datos__interior::-webkit-scrollbar { display: none; }

.franja-datos b {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texto-2);
  white-space: nowrap;
}
.franja-datos b i { color: var(--oro); font-size: 0.85em; }
.franja-datos b strong { color: var(--texto); font-weight: 600; }

.franja-datos a {
  margin-left: auto;
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--oro);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.franja-datos a:hover { color: var(--oro-alto); }

/* ── Portada ────────────────────────────────────────────────
   Banda baja, no un hero de pantalla completa: la frase de la marca
   entra en unos 210 px y el catálogo sigue arrancando en el primer
   pliegue. El halo de la marca aparece detrás, tenue. */
.portada {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--linea-fina);
  /* Bajo a propósito: la frase tiene que estar, pero una fila entera de
     productos tiene que entrar igual en el primer pliegue. */
  padding-block: clamp(1.3rem, 2.6vw, 2rem);
}
.portada::before {
  content: '';
  position: absolute;
  top: 50%; left: 12%;
  width: min(520px, 70vw);
  aspect-ratio: 1;
  transform: translateY(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, var(--oro-velo) 0%, transparent 62%);
  pointer-events: none;
}

.portada__interior {
  position: relative;
  display: grid;
  gap: var(--e-2);
  max-width: 48rem;
}

.portada__frase {
  font-family: var(--display);
  font-size: clamp(1.7rem, 4.2vw, 2.9rem);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.015em;
}
.portada__frase em { font-style: italic; color: var(--oro); }

.portada__texto {
  color: var(--texto-2);
  font-size: var(--t-md);
  max-width: 44rem;
}

.portada__pie {
  display: flex;
  align-items: center;
  gap: var(--e-4);
  flex-wrap: wrap;
  margin-top: var(--e-1);
}
.portada__dato { font-size: var(--t-xs); color: var(--texto-3); }
.portada__dato strong {
  font-size: var(--t-lg);
  font-weight: 700;
  color: var(--oro-alto);
  margin-right: 0.2rem;
}

@media (max-width: 620px) {
  .portada__texto { display: none; }   /* la frase alcanza en el teléfono */
}

/* ── Barra de la colección ─────────────────────────────────── */
.coleccion { padding-block: var(--e-5) var(--e-8); }

.barra {
  position: sticky;
  top: 3.9rem;
  z-index: var(--z-barra);
  display: flex;
  gap: var(--e-2);
  align-items: center;
  flex-wrap: wrap;
  padding-block: var(--e-3);
  margin-bottom: var(--e-4);
  background: color-mix(in srgb, var(--fondo) 92%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--linea-fina);
}

/* Va después de la definición de .barra a propósito: si la regla móvil
   se escribe antes, la definición de arriba la pisa por orden de
   cascada y la barra sigue pegajosa en el teléfono. */
@media (max-width: 940px) {
  .barra {
    position: static;
    background: none;
    backdrop-filter: none;
  }
}

/* En el teléfono la barra ocupaba dos filas de 114 px antes de que
   apareciera el primer producto. Se aprieta y el orden pasa a ser un
   control chico: lo que importa arriba es el conmutador y los filtros. */
@media (max-width: 620px) {
  .barra { gap: 0.4rem; padding-block: var(--e-2) var(--e-3); }
  .barra__titulo { font-size: var(--t-lg); margin-right: 0; }
  .barra__pico { display: none; }
  .barra select.control { min-width: 0; flex: 1; font-size: var(--t-sm); padding-block: 0.45rem; }
}

.barra__titulo {
  font-family: var(--display);
  font-size: var(--t-xl);
  font-weight: 600;
  margin-right: var(--e-2);
  white-space: nowrap;
}
.barra__cuenta {
  font-family: var(--ui);
  font-size: var(--t-xs);
  color: var(--texto-3);
  margin-left: 0.4rem;
  font-variant-numeric: tabular-nums;
}

/* .segmentos vive en componentes.css: lo usan la tienda y el panel. */

.barra__pico { flex: 1; }

/* .buscador vive en componentes.css: lo usan la tienda y el panel. */
.buscador__limpiar {
  position: absolute;
  right: 0.4rem; top: 50%;
  transform: translateY(-50%);
  width: 1.6rem; height: 1.6rem;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  color: var(--texto-3);
  font-size: var(--t-xs);
}
.buscador__limpiar:hover { background: var(--realce); color: var(--texto); }

.barra .control { width: auto; }
.barra select.control { min-width: 10rem; }

.btn-filtros { position: relative; }
.btn-filtros .cuenta {
  min-width: 1.1rem; height: 1.1rem;
  padding: 0 0.24rem;
  border-radius: var(--r-full);
  background: var(--oro);
  color: var(--tinta-oro);
  font-size: var(--t-2xs);
  font-weight: 700;
  display: grid; place-items: center;
}

/* ── Filtros ────────────────────────────────────────────────── */
.filtros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--e-5);
  padding: var(--e-5);
  margin-bottom: var(--e-5);
  background: var(--tarjeta);
  border: 1px solid var(--linea);
  border-radius: var(--r);
}
.filtros__grupo { display: flex; flex-direction: column; gap: var(--e-3); min-width: 0; }
.filtros__nube { display: flex; flex-wrap: wrap; gap: 0.35rem; max-height: 11rem; overflow-y: auto; }
.filtros__precio { display: flex; align-items: center; gap: var(--e-2); }
.filtros__precio .control { width: 100%; min-width: 0; }
.filtros__pie {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  gap: var(--e-2);
  padding-top: var(--e-4);
  border-top: 1px solid var(--linea-fina);
}

.resumen-filtros {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-bottom: var(--e-4);
}

/* ── Grilla ─────────────────────────────────────────────────
   5 por fila en escritorio, 2 en teléfono. La ficha destacada
   ocupa dos columnas: es lo que corta la repetición. */
.grilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
  gap: var(--e-3);
}

@media (min-width: 1180px) {
  .grilla { grid-template-columns: repeat(5, 1fr); }
}

.producto {
  display: flex;
  flex-direction: column;
  background: var(--tarjeta);
  border: 1px solid var(--linea-fina);
  border-radius: var(--r);
  overflow: hidden;
  transition:
    border-color var(--vel-2) var(--curva),
    transform var(--vel-2) var(--curva),
    box-shadow var(--vel-2) var(--curva);
}
.producto:hover {
  border-color: var(--linea);
  transform: translateY(-3px);
  box-shadow: var(--sombra);
}

/* La peana clara: el plano donde apoya la foto. Resuelve dos cosas de
   una: integra las fotos con fondo blanco y le da a la grilla el salto
   de claro a oscuro que le faltaba. */
.producto__figura {
  position: relative;
  aspect-ratio: 1;
  background:
    radial-gradient(115% 95% at 50% 0%, #fbf8f1, var(--peana-foto) 55%, var(--peana-foto-hondo) 100%);
  cursor: pointer;
  overflow: hidden;
  /* Confina el multiply de la foto a esta caja. Sin esto la mezcla se
     hace contra el fondo negro de la página y la peana se pierde. */
  isolation: isolate;
}
/* Absoluta y no en flujo: es la única forma de que el alto sea SIEMPRE
   el de la peana. Con `height: 100%` el porcentaje se resuelve contra
   una altura indefinida en los casos donde la caja la fija el
   aspect-ratio o el estirado del flex, la foto vuelve a su proporción
   natural y una foto vertical se sale de la caja: el overflow la
   recorta y parece que estuviera con zoom. */
.producto__figura img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 7%;
  /* Multiply hace que el blanco del fondo de la foto desaparezca
     dentro de la peana en vez de quedar como un rectángulo. */
  mix-blend-mode: multiply;
  transition: transform var(--vel-3) var(--curva);
}
.producto:hover .producto__figura img { transform: scale(1.06); }

.producto__marcas {
  position: absolute;
  top: 0.5rem; left: 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.28rem;
  pointer-events: none;
}

.producto__cuerpo {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.7rem 0.75rem 0;
  flex: 1;
}

.producto__marca {
  font-size: var(--t-2xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texto-3);
}

.producto__nombre {
  font-family: var(--ui);
  font-size: var(--t-sm);
  font-weight: 500;
  line-height: 1.3;
  cursor: pointer;
  /* Dos líneas como máximo: si no, las fichas quedan desparejas. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.4em;
}
.producto__nombre:hover { color: var(--oro-alto); }

/* El precio es lo más fuerte de la ficha: serif, grande, oro. */
.producto__precio {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  margin-top: auto;
  padding-top: 0.35rem;
}
.producto__precio strong {
  font-family: var(--ui);
  font-size: var(--precio);
  font-weight: 700;
  line-height: 1;
  color: var(--oro-alto);
  font-variant-numeric: tabular-nums;
}
.producto__precio del {
  color: var(--texto-3);
  font-size: var(--t-xs);
  text-decoration-thickness: 1px;
}

.producto__pie { display: flex; gap: 0.35rem; padding: 0.6rem 0.75rem 0.75rem; }
.producto__pie .btn { flex: 1; min-width: 0; }

/* ── Ficha destacada: dos columnas, foto al lado del texto ── */
.producto--destacado {
  grid-column: span 2;
  flex-direction: row;
  background:
    linear-gradient(100deg, var(--peana), var(--tarjeta) 58%);
  border-color: var(--oro-borde);
}
.producto--destacado .producto__figura {
  flex: 0 0 44%;
  aspect-ratio: auto;
}
/* El texto arriba y el botón abajo, sin un hueco muerto en el medio. */
.producto--destacado .producto__medio {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
  min-width: 0;
}
.producto--destacado .producto__cuerpo { padding: var(--e-4) var(--e-4) 0; gap: 0.3rem; flex: 0 0 auto; }
.producto--destacado .producto__precio { margin-top: var(--e-4); }
.producto--destacado .producto__nombre {
  font-family: var(--display);
  font-size: 1.4rem;
  font-weight: 600;
  -webkit-line-clamp: 3;
  min-height: 0;
}
.producto--destacado .producto__precio strong { font-size: var(--precio-alto); }
.producto--destacado .producto__pie { padding: var(--e-4); }
.producto--destacado .producto__notas {
  font-size: var(--t-xs);
  color: var(--texto-2);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 0.3rem;
  line-height: 1.55;
}

/* Los datos que llenan el alto de la ficha destacada. Son los mismos
   que ya trae el producto, no relleno decorativo. */
.producto--destacado .producto__datos {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: var(--e-3);
  padding-top: var(--e-3);
  border-top: 1px solid var(--linea-fina);
}
.producto--destacado .producto__datos span {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  font-size: var(--t-xs);
  color: var(--texto-2);
}
.producto--destacado .producto__datos i { color: var(--texto-3); width: 0.9rem; flex-shrink: 0; }
.producto--destacado .producto__datos .dato--ok { color: var(--ok); }
.producto--destacado .producto__datos .dato--ok i { color: var(--ok); }
.producto--destacado .producto__datos .dato--pedido { color: var(--alerta); }
.producto--destacado .producto__datos .dato--pedido i { color: var(--alerta); }

/* En el teléfono la grilla es de dos columnas, así que una ficha
   destacada a dos columnas se come la pantalla entera: quedaba un solo
   producto y ningún precio en el primer pliegue. Justo lo contrario de
   "más productos a la vista". Abajo de 620 px vuelve a ser una ficha
   común. */
@media (max-width: 620px) {
  .producto--destacado {
    grid-column: auto;
    flex-direction: column;
    background: var(--tarjeta);
    border-color: var(--linea-fina);
  }
  .producto--destacado .producto__figura { flex: none; aspect-ratio: 1; }
  .producto--destacado .producto__medio { display: contents; }
  .producto--destacado .producto__cuerpo { padding: 0.6rem 0.6rem 0; }
  /* Las notas Y el bloque de datos: los dos son relleno del alto de la
     versión de escritorio. En el teléfono sumaban 100 px y empujaban el
     precio fuera del primer pliegue. */
  .producto--destacado .producto__notas,
  .producto--destacado .producto__datos { display: none; }
  .producto--destacado .producto__nombre {
    font-family: var(--ui);
    font-size: var(--t-sm);
    font-weight: 500;
    -webkit-line-clamp: 2;
    min-height: 2.4em;
  }
  .producto--destacado .producto__precio { margin-top: auto; }
  .producto--destacado .producto__precio strong { font-size: var(--precio-chico); }
  .producto--destacado .producto__pie { padding: 0.5rem 0.6rem 0.6rem; }
}

/* ── Tamaños del decant ─────────────────────────────────────── */
.tamanos { display: flex; gap: 0.25rem; margin-top: 0.3rem; }
.tamanos button {
  flex: 1;
  padding: 0.28rem;
  border: 1px solid var(--linea);
  border-radius: var(--r-sm);
  font-size: 0.7rem;
  color: var(--texto-2);
  transition: all var(--vel) var(--curva);
}
.tamanos button:hover:not(:disabled) { border-color: var(--oro-borde); color: var(--texto); }
.tamanos button[aria-pressed="true"] {
  border-color: var(--oro-borde);
  background: var(--oro-velo);
  color: var(--oro-alto);
}
.tamanos button:disabled { opacity: 0.3; cursor: not-allowed; }

/* ── Explicación del decant, dentro de la grilla ────────────
   Ocupa dos celdas. Así se explica sin una sección aparte. */
.celda-nota {
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  justify-content: center;
  padding: var(--e-5);
  background:
    linear-gradient(140deg, var(--oro-velo), transparent 60%),
    var(--hueco);
  border: 1px solid var(--oro-borde);
  border-radius: var(--r);
}
.celda-nota i { color: var(--oro); font-size: 1.3rem; }
.celda-nota h3 { font-family: var(--display); font-size: var(--t-display); font-weight: 600; }
.celda-nota p { font-size: var(--t-xs); color: var(--texto-2); line-height: 1.55; }
.celda-nota button { align-self: flex-start; margin-top: 0.2rem; }

@media (max-width: 620px) {
  .grilla { grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
  .producto__cuerpo { padding: 0.6rem 0.6rem 0; }
  .producto__pie { padding: 0.5rem 0.6rem 0.6rem; }
  .producto__precio strong { font-size: var(--precio-chico); }
}

.ver-mas { display: grid; place-items: center; margin-top: var(--e-6); }

/* ── Ficha del producto ─────────────────────────────────────── */
.ficha { display: grid; grid-template-columns: 1fr 1.1fr; gap: var(--e-5); }
@media (max-width: 700px) { .ficha { grid-template-columns: 1fr; } }

.ficha__figura {
  position: relative;
  background: radial-gradient(115% 95% at 50% 0%, #fbf8f1, var(--peana-foto) 55%, var(--peana-foto-hondo) 100%);
  border-radius: var(--r);
  aspect-ratio: 1;
  overflow: hidden;
  isolation: isolate;
}
/* Misma razón que en .producto__figura img: absoluta para que el alto
   de la foto sea el de la caja y no el suyo propio. */
.ficha__figura img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 6%;
  mix-blend-mode: multiply;
  cursor: zoom-in;
  transition: transform var(--vel-3) var(--curva);
}
.ficha__figura img.ampliada { transform: scale(1.85); cursor: zoom-out; }

.ficha__cuerpo { display: flex; flex-direction: column; gap: var(--e-3); min-width: 0; }
.ficha__marca { font-size: var(--t-xs); letter-spacing: 0.18em; text-transform: uppercase; color: var(--oro); }
.ficha__nombre { font-family: var(--display); font-size: 1.85rem; font-weight: 600; line-height: 1.08; }
.ficha__etiquetas { display: flex; gap: 0.3rem; flex-wrap: wrap; }

.ficha__dato { border-top: 1px solid var(--linea-fina); padding-top: var(--e-3); }
.ficha__dato dt {
  font-size: var(--t-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texto-3);
  margin-bottom: 0.25rem;
}
.ficha__dato dd { font-size: var(--t-sm); color: var(--texto-2); line-height: 1.6; }

.ficha__compra {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  margin-top: auto;
  padding-top: var(--e-4);
  border-top: 1px solid var(--linea);
  flex-wrap: wrap;
}
.ficha__precio {
  font-family: var(--ui);
  font-size: var(--precio-alto);
  font-weight: 700;
  color: var(--oro-alto);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  margin-right: auto;
}
.ficha__precio del {
  font-size: var(--t-sm);
  color: var(--texto-3);
  margin-left: var(--e-2);
  font-family: var(--ui);
  font-weight: 400;
}

/* ── Bolsa ──────────────────────────────────────────────────── */
.carrito {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(420px, 100%);
  z-index: var(--z-panel);
  background: var(--tarjeta);
  border-left: 1px solid var(--linea);
  box-shadow: var(--sombra-lg);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--vel-2) var(--curva);
}
.carrito.abierto { transform: none; }

.carrito__velo {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-panel) - 1);
  background: rgba(4,3,2,.68);
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--vel-2) var(--curva), visibility var(--vel-2);
}
.carrito__velo.abierto { opacity: 1; visibility: visible; }

.carrito__cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--e-4) var(--e-5);
  border-bottom: 1px solid var(--linea-fina);
}
.carrito__cabecera h2 { font-family: var(--display); font-size: var(--t-xl); font-weight: 600; }

.carrito__lista { flex: 1; overflow-y: auto; padding: var(--e-4) var(--e-5); display: flex; flex-direction: column; gap: var(--e-4); }

.linea { display: grid; grid-template-columns: 3.2rem 1fr auto; gap: var(--e-3); align-items: start; }
/* Sin mix-blend-mode acá: el fondo claro está en la propia imagen, y
   multiply mezclaría contra el panel oscuro en vez de contra el claro. */
.linea__img {
  width: 3.2rem; height: 3.2rem;
  border-radius: var(--r-sm);
  background: var(--peana-foto);
  object-fit: contain;
  padding: 3px;
}
.linea__nombre { font-size: var(--t-sm); line-height: 1.3; }
.linea__precio { font-size: var(--t-xs); color: var(--texto-3); font-variant-numeric: tabular-nums; }
.linea__derecha { display: flex; flex-direction: column; align-items: flex-end; gap: 0.25rem; }
.linea__derecha strong { font-family: var(--ui); font-size: var(--t-lg); color: var(--oro-alto); }
.linea__quitar { font-size: var(--t-xs); color: var(--texto-3); text-decoration: underline; text-underline-offset: 3px; }
.linea__quitar:hover { color: var(--oferta); }

.carrito__pie { padding: var(--e-4) var(--e-5) var(--e-5); border-top: 1px solid var(--linea); display: flex; flex-direction: column; gap: var(--e-3); }
.carrito__total { display: flex; justify-content: space-between; align-items: baseline; }
.carrito__total strong {
  font-family: var(--ui);
  font-size: var(--precio-total);
  font-weight: 700;
  color: var(--oro-alto);
  font-variant-numeric: tabular-nums;
}

/* .nota vive en componentes.css: la usan la bolsa y el generador con IA. */

/* ── La foto que vuela a la bolsa ───────────────────────────
   El único momento animado de la tienda. Confirma la acción
   sin un cartel: el producto se va físicamente al carrito. */
.vuela {
  position: fixed;
  z-index: calc(var(--z-panel) + 5);
  border-radius: var(--r-sm);
  object-fit: contain;
  background: var(--peana-foto);
  padding: 6%;
  pointer-events: none;
  will-change: transform, opacity;
  box-shadow: var(--sombra);
}

/* ── Acceso al panel ────────────────────────────────────────
   Solo se muestra si hay sesión de Admin: el JavaScript le quita el
   hidden. Va abajo a la izquierda, del lado opuesto a la bolsa, para no
   competir con la compra. */
.acceso-panel {
  position: fixed;
  left: var(--e-4);
  bottom: var(--e-4);
  z-index: 95;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: 2.7rem;
  padding: 0 0.95rem;
  border-radius: var(--r-full);
  background: var(--realce);
  border: 1px solid var(--oro-borde);
  color: var(--oro-alto);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  box-shadow: var(--sombra);
  transition: background var(--vel) var(--curva), transform var(--vel) var(--curva);
}
.acceso-panel i { font-size: 0.95rem; }
.acceso-panel:hover {
  background: var(--oro-velo);
  transform: translateY(-2px);
}

/* ── Preguntas ──────────────────────────────────────────────── */
.preguntas { padding-block: var(--e-7); border-top: 1px solid var(--linea-fina); }
.preguntas h2 { font-size: var(--t-2xl); margin-bottom: var(--e-4); }
.preguntas h2 em { font-style: italic; color: var(--oro); }
.preguntas__grilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 0 var(--e-7); }

.pregunta { border-bottom: 1px solid var(--linea-fina); }
.pregunta summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  padding: 0.85rem 0;
  cursor: pointer;
  font-size: var(--t-md);
  font-weight: 500;
  list-style: none;
}
.pregunta summary::-webkit-details-marker { display: none; }
.pregunta summary::marker { content: ''; }
.pregunta summary i { color: var(--oro); font-size: var(--t-xs); transition: transform var(--vel-2) var(--curva); }
.pregunta[open] summary i { transform: rotate(45deg); }
.pregunta p { padding-bottom: var(--e-4); color: var(--texto-2); font-size: var(--t-sm); max-width: var(--ancho-texto); }

/* ── Pie ────────────────────────────────────────────────────── */
.pie {
  border-top: 1px solid var(--linea-fina);
  padding-block: var(--e-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  flex-wrap: wrap;
  font-size: var(--t-xs);
  color: var(--texto-3);
}
.pie a:hover { color: var(--oro); }
.pie__enlaces { display: flex; gap: var(--e-4); }

/* ── WhatsApp ───────────────────────────────────────────────
   Vive en la cabecera, que es pegajosa: está siempre a la vista y no
   tapa nada, porque no hay contenido que pase por debajo.

   Antes era un botón flotante abajo a la derecha. Cualquier elemento
   fijo termina apoyado sobre el contenido que scrollea: en el teléfono
   se comía el "Agregar" de la columna derecha, y en escritorio volvía a
   pisar la quinta columna en cuanto la ventana bajaba de ~1480 px, donde
   el margen de la página se agota. Moverlo a la cabecera lo resuelve en
   todos los anchos en vez de reducir el roce. */
.btn-wa {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  height: 2.3rem;
  padding: 0 0.85rem;
  border-radius: var(--r-sm);
  background: var(--wa);
  color: var(--tinta-verde);
  font-size: var(--t-sm);
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background var(--vel) var(--curva);
}
.btn-wa i { font-size: 1.05rem; }
.btn-wa:hover { background: var(--wa-alto); }

/* En pantallas chicas queda solo el ícono: el espacio de la cabecera
   se necesita para el carrito y el menú. */
@media (max-width: 760px) {
  .btn-wa { width: 2.3rem; padding: 0; justify-content: center; }
  .btn-wa span { display: none; }
}