/* ===================================================================
   Fragancias On Top — sistema de diseño
=================================================================== */

:root{
  /* Fondo cálido casi-negro (café espresso, no negro plano de pantalla) —
     como el vidrio ahumado de un frasco visto a contraluz, no "modo oscuro". */
  --bg:#15100c;
  /* Las superficies (tarjetas, chips, modal...) van casi negras — no del
     mismo café tibio del fondo — para que el acento ámbar (bordes, precio,
     badges) tenga contraste de verdad encima, en vez de ámbar sobre café. */
  --card:#0c0a08;
  --card-2:#191510;
  /* Fondo del hueco donde va la foto del perfume — más claro que las
     tarjetas para que un frasco o caja oscura no se pierda contra el
     fondo (antes las fotos traían su propio fondo blanco de estudio;
     ahora que se recortan transparentes, el contraste depende de esto). */
  --art-bg:#2b2317;
  --hairline: rgba(232,199,138,.12);
  --text:#f6f1e7;
  --text-2:#b3a795;
  --text-3:#8a7d6a;

  /* Ámbar: el color real del líquido dentro del frasco — acento único,
     nunca un gradiente de dos tintas encima del texto. */
  --amber:#cf9552;
  --amber-deep:#a9713a;
  --amber-soft:#e8c78a;
  /* Musgo cálido: reservado para el estado "disponible" — no es decorativo,
     es una señal funcional (hay stock), coordinada con la paleta ambar. */
  --moss:#93a875;
  /* Rojo cálido: reservado para "agotado" — la única señal de alerta real
     del catálogo, por eso es el único rojo en todo el sistema. */
  --red:#e5584a;
  --wa:#30d158;

  --radius-lg: 26px;
  --radius-md: 18px;
  --radius-sm: 12px;
  --radius-plaque: 10px; /* botones: placa/etiqueta, no píldora de app */

  --shadow-card: 0 24px 48px -24px rgba(0,0,0,.7);
  --shadow-pop: 0 32px 64px -20px rgba(0,0,0,.8);

  --ease: cubic-bezier(.16,1,.3,1);
  --dur-fast: .18s;
  --dur-med: .42s;

  --container: 1240px;
  --gutter: clamp(20px, 5vw, 56px);

  /* Una sola familia en todo el sitio — la jerarquía se hace con peso,
     tamaño y tracking, no cambiando de tipografía. */
  --font-display: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ---------- reset ---------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ color-scheme: dark; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}
body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
button{ font-family:inherit; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,p{ margin:0; }
input, select{ font-family:inherit; }

:focus-visible{
  outline: 2px solid var(--amber);
  outline-offset: 3px;
  border-radius: 6px;
}

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

/* Una sola tinta cálida en itálica — no gradiente sobre el texto. Evoca la
   tipografía de un anuncio impreso de perfume, no un titular de app. */
.accent-word{
  color: var(--amber-soft);
  font-style: italic;
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.6em;
  font-family: var(--font-mono);
  font-weight:700;
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-2);
}
.eyebrow::before{
  content:"";
  width:5px; height:5px;
  background: var(--amber);
  flex-shrink:0;
}

.visually-hidden{
  position:absolute; width:1px; height:1px; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; padding:0;
}

/* ===================================================================
   Atmósfera — no son "blobs" decorativos flotando: es un foco cálido
   sobre la vitrina (como la luz de un mostrador de perfumería) más una
   textura de grano fino, como vidrio esmerilado.
=================================================================== */
.aurora{
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.aurora span{
  position:absolute;
  border-radius:50%;
  filter: blur(100px);
  will-change: transform;
}
/* foco principal: luz cálida centrada arriba, como iluminación de vitrina */
.aurora span:nth-child(1){
  width:70vw; height:46vw; max-width:980px; max-height:640px;
  background: radial-gradient(ellipse, rgba(207,149,82,.32) 0%, transparent 72%);
  top:-16%; left:50%;
  animation: driftGlowCentered 30s ease-in-out infinite;
}
/* dos brillos secundarios, muy tenues — sugieren profundidad, no arcoíris */
.aurora span:nth-child(2){
  width:36vw; height:36vw; max-width:520px; max-height:520px;
  background: radial-gradient(circle, rgba(147,168,117,.12) 0%, transparent 74%);
  top:38%; right:-12%;
  animation: driftGlow 40s ease-in-out infinite reverse;
}
.aurora span:nth-child(3){
  width:30vw; height:30vw; max-width:440px; max-height:440px;
  background: radial-gradient(circle, rgba(207,149,82,.1) 0%, transparent 76%);
  bottom:-14%; left:12%;
  animation: driftGlow 46s ease-in-out infinite;
}
@keyframes driftGlow{
  0%,100%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(2vw, 3vh) scale(1.06); }
}
@keyframes driftGlowCentered{
  0%,100%{ transform: translateX(-50%) translateY(0) scale(1); }
  50%{ transform: translateX(-50%) translateY(3vh) scale(1.05); }
}
@media (prefers-reduced-motion: reduce){
  .aurora span{ animation: none !important; }
}
/* grano fino sobre todo el sitio — vidrio esmerilado, no plano digital */
body::after{
  content:"";
  position: fixed;
  inset:0;
  z-index: 2;
  pointer-events:none;
  opacity:.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* everything above the aurora */
.nav, main, footer{ position:relative; z-index:1; }

/* ===================================================================
   Nav
=================================================================== */
.nav{
  position: sticky;
  top:0;
  z-index: 70; /* por encima del panel/backdrop del menú móvil: el botón
                  de abrir/cerrar debe seguir visible y clicable con el
                  menú abierto */
  /* Menos blur/saturación y más opacidad que antes — con fotos de
     producto de colores variados debajo, el efecto vidrio dejaba ver
     demasiado color/contraste de las tarjetas a través del nav, se
     sentía ruidoso. Sigue siendo translúcido, solo más sobrio. */
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  background: rgba(21,16,12,.92);
  border-bottom: 1px solid var(--hairline);
}
.nav-inner{
  position: relative; /* crea su propio stacking context */
  z-index: 67; /* por encima de .nav-backdrop (65) y .nav-links-mobile (66),
                  que son HERMANOS suyos dentro de <header class="nav"> —
                  el z-index del header no alcanza para eso, cada hijo
                  compite con sus hermanos directos */
  display:flex;
  align-items:center;
  gap: clamp(12px, 3vw, 32px);
  padding-block: 14px;
}
.brand{
  display:flex;
  align-items:center;
  margin-right:auto;
}
.brand img{ height: 44px; width:auto; }

.nav-links{
  display:flex;
  gap: 28px;
}
.nav-links a{
  font-size: .92rem;
  color: var(--text-2);
  transition: color var(--dur-fast) var(--ease);
  white-space:nowrap;
}
.nav-links a:hover{ color: var(--text); }

.nav-cta{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background: var(--wa);
  color:#04210d;
  font-family: var(--font-mono);
  font-weight:700;
  font-size:.82rem;
  padding: 10px 18px;
  border-radius: var(--radius-plaque);
  white-space:nowrap;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.nav-cta:hover{ transform: translateY(-1px); box-shadow: 0 10px 24px -10px rgba(48,209,88,.55); }

.nav-toggle{
  display:none;
  position: relative;
  width: 40px; height:40px;
  align-items:center; justify-content:center;
  background: var(--card);
  border:1px solid var(--hairline);
  border-radius: 50%;
  color: var(--text);
  cursor:pointer;
  flex-shrink:0;
}
/* Hamburguesa que se anima a X — la misma barrita del medio se desvanece
   y las otras dos rotan, para que quede claro cómo cerrar el menú. */
.nav-toggle-bar{
  position:absolute;
  left:50%; top:50%;
  width:16px; height:2px;
  background: currentColor;
  border-radius:2px;
  transform: translate(-50%,-50%) translateY(var(--bar-y, 0));
  transition: transform var(--dur-med) var(--ease), opacity var(--dur-fast) var(--ease);
}
.nav-toggle-bar:nth-child(1){ --bar-y: -5px; }
.nav-toggle-bar:nth-child(3){ --bar-y: 5px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1){
  transform: translate(-50%,-50%) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3){
  transform: translate(-50%,-50%) rotate(-45deg);
}
@media (prefers-reduced-motion: reduce){
  .nav-toggle-bar{ transition:none; }
}

/* Panel deslizante desde la izquierda (no un dropdown debajo del header) +
   fondo oscurecido — el mismo lenguaje de "overlay que se anima" que ya
   usa el modal de producto, para que se sienta parte del mismo sitio. */
.nav-backdrop{
  position: fixed;
  inset:0;
  z-index: 65;
  background: rgba(10,7,5,.6);
  opacity:0;
  pointer-events:none;
  transition: opacity var(--dur-med) var(--ease);
}
.nav-backdrop.is-open{ opacity:1; pointer-events:auto; }

.nav-links-mobile{
  position: fixed;
  top:0;
  left:0;
  height:100vh; /* respaldo para navegadores sin soporte de dvh */
  height:100dvh; /* alto real de la pantalla, sin contar la barra de
                     direcciones que aparece/desaparece en el celular —
                     con 100vh a secas el panel quedaba cortado o saltaba */
  width: min(78vw, 320px);
  z-index: 66;
  display:flex;
  flex-direction:column;
  background: var(--bg);
  border-right: 1px solid var(--hairline);
  padding: 96px 28px 24px;
  overflow-y:auto;
  transform: translateX(-100%);
  transition: transform var(--dur-med) var(--ease);
}
.nav-links-mobile.is-open{ transform: translateX(0); }
.nav-links-mobile a{
  padding: 14px 0;
  border-bottom: 1px solid var(--hairline);
  color: var(--text-2);
  font-size: 1rem;
}
.nav-links-mobile a:last-of-type{ border-bottom:0; }
/* El selector de arriba (.nav-links-mobile a) le gana en especificidad
   al color que .btn-wa le pone al botón — sin esto el texto salía en el
   gris apagado de los links del menú en vez del verde oscuro sobre el
   fondo verde brillante del botón, ilegible. */
.nav-links-mobile a.nav-links-mobile-cta{ color:#04210d; border-bottom:0; }
.nav-links-mobile-cta{ margin-top:20px; }

/* Ícono de WhatsApp junto al carrito, arriba en el header — no flotante
   sobre el catálogo. .nav-icons es "transparente" al layout en desktop
   (display:contents, sus hijos actúan como si fueran hijos directos de
   .nav-inner, sin cambiar nada del header actual) — en móvil pasa a ser
   un grupo real para acomodar los dos íconos juntos (ver @media abajo).
   .nav-wa mismo está oculto salvo en móvil: en desktop "Pedir por
   WhatsApp" ya cubre esto. */
.nav-icons{ display:contents; }
.nav-wa{
  display:none;
  align-items:center;
  justify-content:center;
  width:38px; height:38px;
  border-radius:50%;
  background: var(--wa);
  flex-shrink:0;
}
.nav-wa svg{ width:20px; height:20px; }

@media (max-width: 760px){
  .nav-links{ display:none; }
  .nav-cta{ display:none; }
  .nav-toggle{ display:flex; }
  /* logo centrado de verdad: dos columnas del mismo ancho a los costados
     balancean el centro — la derecha ahora carga 2 íconos (WhatsApp +
     carrito) en vez de 1, así que ambas columnas miden lo mismo que ese
     grupo (86px = 38px + 10px de gap + 38px), no ya 40px.
     grid-row explícito en todos es necesario: sin él, como el botón viene
     después del logo en el HTML pero pide una columna anterior (1 antes
     que 2), el auto-placement de grid los separaba en dos filas en vez de
     ponerlos juntos en la misma — eso era el bug real. */
  .nav-inner{
    display:grid;
    grid-template-columns: 86px 1fr 86px;
    align-items:center;
  }
  .nav-toggle{ grid-column: 1; grid-row: 1; }
  .brand{ grid-column: 2; grid-row: 1; justify-self:center; margin:0; }
  .nav-icons{
    display:flex;
    align-items:center;
    gap:10px;
    grid-column: 3; grid-row: 1; justify-self:end;
  }
  .nav-wa{ display:flex; }
  .nav-cart{ width:38px; height:38px; }
}
@media (prefers-reduced-motion: reduce){
  .nav-links-mobile, .nav-backdrop{ transition:none; }
}

/* ===================================================================
   Hero
=================================================================== */
.hero{
  padding-top: clamp(56px, 9vw, 108px);
  padding-bottom: clamp(48px, 8vw, 88px);
  display:grid;
  gap: clamp(28px, 5vw, 48px);
}
.hero-copy{ max-width: 760px; }
.hero-mark{
  height: clamp(80px, 15vw, 176px);
  width: auto;
  margin-bottom: 28px;
  filter: drop-shadow(0 12px 24px rgba(0,0,0,.45));
}
.hero-copy .eyebrow{ margin-bottom: 18px; }
.hero h1{
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.02;
  font-size: clamp(2.6rem, 6.4vw, 5rem);
}
.hero p.lede{
  margin-top: 22px;
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  color: var(--text-2);
  max-width: 52ch;
}
.hero-ctas{
  display:flex;
  flex-wrap:wrap;
  gap: 14px;
  margin-top: 34px;
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-family: var(--font-mono);
  font-weight:700;
  font-size: .9rem;
  padding: 15px 26px;
  border-radius: var(--radius-plaque);
  border:1px solid transparent;
  cursor:pointer;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.btn:active{ transform: scale(.98); }
.btn-primary{
  background: linear-gradient(155deg, var(--amber-soft), var(--amber-deep));
  color: #251706;
}
.btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 18px 36px -16px rgba(207,149,82,.5); }
.btn-ghost{
  background: transparent;
  border-color: var(--hairline);
  color: var(--text);
}
.btn-ghost:hover{ border-color: rgba(232,199,138,.32); background: rgba(232,199,138,.05); }
.btn-wa{
  background: var(--wa);
  color:#04210d;
}
.btn-wa:hover{ transform: translateY(-2px); box-shadow: 0 18px 36px -16px rgba(48,209,88,.5); }
.btn-gold{
  background: var(--amber);
  color:#241a06;
}
.btn-gold:hover{ transform: translateY(-2px); box-shadow: 0 18px 36px -16px rgba(207,149,82,.5); }
.btn[disabled]{
  opacity:.45;
  cursor:not-allowed;
  transform:none !important;
  box-shadow:none !important;
}
.btn-sm{ padding: 10px 18px; font-size:.78rem; border-radius: 9px; }
.btn-block{ width:100%; }

.hero-stats{
  display:flex;
  flex-wrap:wrap;
  gap: clamp(20px, 4vw, 44px);
  margin-top: 44px;
  padding-top: 28px;
  border-top: 1px solid var(--hairline);
}
.stat b{
  display:block;
  font-family: var(--font-mono);
  font-weight:700;
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  color: var(--amber-soft);
}
.stat span{
  color: var(--text-3);
  font-size: .78rem;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .04em;
}
/* La ubicación reemplaza el número grande por un ícono — se ve distinto
   del resto a propósito, para que quede claro que ahí sí se puede tocar. */
.stat-location b{ display:flex; align-items:center; gap:7px; transition: color var(--dur-fast) var(--ease); }
.stat-location:hover b{ color: var(--amber); }
.stat-location:hover span{ color: var(--text-2); }

.hero-shelf{
  display:flex;
  align-items:flex-end;
  gap: clamp(10px, 2.2vw, 22px);
  padding: 12px 4px 8px;
  overflow-x:auto;
  scrollbar-width:none;
  /* La última tarjeta suele quedar a medio mostrar contra el borde del
     contenedor (se puede seguir haciendo scroll para verla completa,
     pero en reposo se veía como si estuviera "cortada") — este degradado
     la desvanece en vez de partirla en seco. */
  -webkit-mask-image: linear-gradient(to right, black 0%, black 90%, transparent 100%);
  mask-image: linear-gradient(to right, black 0%, black 90%, transparent 100%);
}
.hero-shelf::-webkit-scrollbar{ display:none; }
.hero-shelf .bottle-wrap{
  flex: 0 0 auto;
  cursor:pointer;
  animation: floatY 6s ease-in-out infinite;
}
/* Cada foto ya viene recortada a su propio producto (caja+frasco juntos,
   solo el frasco, un set...), así que sus proporciones varían de una a
   otra. Se fija la ALTURA (no un lienzo width×height) para que todas se
   vean del mismo tamaño en el estante, como frascos reales alineados —
   el ancho se ajusta solo (hasta un tope) según la forma de cada foto. */
.hero-shelf .bottle-wrap img.card-photo{
  height: clamp(120px, 19vw, 200px);
  width:auto;
  max-width: clamp(140px, 24vw, 240px);
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 16px 28px -16px rgba(0,0,0,.65);
}
.hero-shelf .bottle-wrap svg{
  height: clamp(120px, 19vw, 200px);
  width: auto;
}
.hero-shelf .bottle-wrap:nth-child(2n){ animation-duration: 7.2s; animation-delay: -1.4s; }
.hero-shelf .bottle-wrap:nth-child(3n){ animation-duration: 5.4s; animation-delay: -2.8s; }
@keyframes floatY{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-8px); }
}
@media (prefers-reduced-motion: reduce){
  .hero-shelf .bottle-wrap{ animation:none; }
}

/* ===================================================================
   Brand marquee
=================================================================== */
.marquee{
  border-block: 1px solid var(--hairline);
  padding-block: 16px;
  overflow:hidden;
  white-space:nowrap;
  /* leve viñeta en los bordes: las etiquetas parecen desvanecerse hacia el
     resto de la vitrina en vez de cortarse en seco */
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.marquee-track{
  display:inline-flex;
  animation: scrollX var(--marquee-duration, 34s) linear infinite;
}
/* cada marca es una placa con su propio borde — como las etiquetas
   colgantes de un estante de perfumería, no texto flotando suelto */
.marquee-track span{
  font-family: var(--font-mono);
  font-weight:700;
  letter-spacing:.06em;
  text-transform: uppercase;
  font-size: .78rem;
  color: var(--text-3);
  padding-inline: 26px;
  border-right: 1px solid var(--hairline);
}
@keyframes scrollX{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){
  .marquee-track{ animation: none; }
  .marquee{ overflow-x:auto; }
}

/* ===================================================================
   Sección genérica
=================================================================== */
.section{
  padding-block: clamp(56px, 9vw, 104px);
  position: relative;
}
.section::before{
  content:"";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(232,199,138,.2) 25%, rgba(232,199,138,.2) 75%, transparent);
}
.section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 20px;
  margin-bottom: clamp(28px, 4vw, 44px);
  flex-wrap:wrap;
}
.section-head h2{
  font-family: var(--font-display);
  font-weight:700;
  letter-spacing:-0.02em;
  font-size: clamp(1.8rem, 3.6vw, 2.6rem);
}
.section-head p{
  color: var(--text-2);
  max-width: 46ch;
}

.reveal{
  opacity:0;
  transform: translateY(18px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.is-visible{ opacity:1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}

/* ===================================================================
   Catálogo — controles
=================================================================== */
.catalog-controls{
  position: sticky;
  top: 62px;
  z-index: 20;
  background: rgba(21,16,12,.78);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  padding: 16px;
  display:flex;
  flex-direction:column;
  margin-bottom: clamp(24px, 4vw, 36px);
  transition: padding var(--dur-med) var(--ease);
}
/* Compacta (script.js le agrega/quita la clase según si la barra ya está
   pegada arriba): mientras se navega el catálogo en scroll, sobre todo en
   móvil, la barra no debe tapar media pantalla — solo queda el buscador. */
.catalog-controls.is-compact{ padding-block: 10px; }
.search-row{
  display:flex;
  gap:10px;
}
.search-field{
  flex:1;
  display:flex;
  align-items:center;
  gap:10px;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  padding: 12px 16px;
}
.search-field svg{ flex-shrink:0; color: var(--text-3); }
.search-field input{
  flex:1;
  background:transparent;
  border:0;
  color: var(--text);
  font-size: .98rem;
}
.search-field input::placeholder{ color: var(--text-3); }
.search-field input:focus{ outline:none; }

.filters-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  justify-content:space-between;
  margin-top: 14px;
  max-height: 200px;
  opacity: 1;
  overflow: hidden;
  transition: max-height var(--dur-med) var(--ease), opacity var(--dur-fast) var(--ease), margin-top var(--dur-med) var(--ease);
}
.catalog-controls.is-compact .filters-row{
  max-height: 0;
  opacity: 0;
  margin-top: 0;
  pointer-events: none;
}
.chip-group{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.chip{
  border:1px solid var(--hairline);
  background: var(--card);
  color: var(--text-2);
  font-size: .84rem;
  font-weight:600;
  padding: 8px 16px;
  border-radius: 999px;
  cursor:pointer;
  transition: all var(--dur-fast) var(--ease);
}
.chip:hover{ border-color: rgba(232,199,138,.3); color: var(--text); }
.chip[aria-pressed="true"]{
  background: var(--amber);
  color:#241a06;
  border-color: transparent;
}
/* Chip de tamaño de decant — dos líneas (ml + atomizaciones aprox. en vez
   de una pill de una sola línea), para poder comparar los 3 tamaños de
   un vistazo sin tener que ir clickeando uno por uno. */
.chip-size{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  padding: 9px 16px 8px;
  line-height:1.2;
}
.chip-size-ml{ font-size:.92rem; }
.chip-size-sprays{ font-size:.66rem; font-weight:500; opacity:.72; letter-spacing:.01em; }
.select-group{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.select-wrap{
  position:relative;
}
.select-wrap select{
  appearance:none;
  background: var(--card);
  border:1px solid var(--hairline);
  color: var(--text);
  font-size:.84rem;
  font-weight:600;
  padding: 9px 34px 9px 14px;
  border-radius: 999px;
  cursor:pointer;
}
.select-wrap::after{
  content:"";
  position:absolute;
  right:14px; top:50%;
  width:7px; height:7px;
  border-right:2px solid var(--text-3);
  border-bottom:2px solid var(--text-3);
  transform: translateY(-70%) rotate(45deg);
  pointer-events:none;
}
.result-count{
  color: var(--text-3);
  font-size:.82rem;
  margin-top: 10px;
  max-height: 40px;
  opacity: 1;
  overflow: hidden;
  transition: max-height var(--dur-med) var(--ease), opacity var(--dur-fast) var(--ease), margin-top var(--dur-med) var(--ease);
}
.catalog-controls.is-compact .result-count{
  max-height: 0;
  opacity: 0;
  margin-top: 0;
  pointer-events: none;
}

/* ===================================================================
   Product grid + card
=================================================================== */
.catalog-grid{
  /* En Ofertas los chips de filtro no van dentro de la caja con padding
     que sí envuelve al buscador del catálogo/decants — sin este margen
     quedaban pegados al grid, y el hover de la tarjeta (translateY -4px)
     los acercaba todavía más. */
  margin-top: 28px;
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: clamp(14px, 2vw, 22px);
}
.card{
  position: relative;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  padding: 18px 18px 20px;
  display:flex;
  flex-direction:column;
  cursor:pointer;
  overflow: hidden;
  transition: transform var(--dur-med) var(--ease), border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
/* filo dorado sutil arriba — como el borde metálico de una etiqueta de
   perfume, aparece con más fuerza al pasar el mouse */
.card::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:2px;
  background: linear-gradient(90deg, transparent, var(--amber) 50%, transparent);
  opacity:.45;
  transition: opacity var(--dur-fast) var(--ease);
}
.card:hover::before{ opacity:1; }
.card:hover{
  transform: translateY(-4px);
  border-color: rgba(232,199,138,.25);
  background: var(--card-2);
}
.card-art{
  position: relative;
  aspect-ratio: 1 / 1;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom: 14px;
  background: radial-gradient(circle at 50% 30%, rgba(232,199,138,.08), transparent 70%), var(--art-bg);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.card-art svg{ width:56%; height:80%; filter: drop-shadow(0 14px 20px rgba(0,0,0,.5)); }
.card-art img{ width:96%; height:96%; object-fit: contain; border-radius: calc(var(--radius-sm) - 3px); }
.card-photo{ opacity:0; transition: opacity .5s var(--ease); }
.card-photo.is-loaded{ opacity:1; }
@media (prefers-reduced-motion: reduce){
  .card-photo{ transition:none; opacity:1; }
}
/* Agotado: la foto/ilustración se atenúa y se desatura — refuerza en la
   imagen la misma señal que ya da el badge rojo. */
.card-art[data-stock="agotado"]{ filter: grayscale(.6); }
.card-art[data-stock="agotado"] .card-photo.is-loaded{ opacity:.45; }
.card-art[data-stock="agotado"] svg{ opacity:.6; }
/* Funde el borde de la foto con la tarjeta oscura — evita que un fondo
   blanco de estudio se vea como un recorte brusco pegado en el diseño. */
.card-art::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: var(--radius-sm);
  box-shadow: inset 0 0 22px 9px var(--art-bg);
  pointer-events:none;
}
.card-badges{
  display:flex;
  gap:6px;
  margin-bottom:8px;
  flex-wrap:wrap;
}
.badge{
  font-family: var(--font-mono);
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  padding: 5px 10px;
  border-radius:999px;
  border: 1px solid transparent;
}
/* Fondo más saturado + borde + texto claro — antes el tinte era tan sutil
   que el texto se perdía contra el fondo oscuro de la tarjeta. */
.badge-disponible{ background: rgba(147,168,117,.24); color:#c7dcae; border-color: rgba(147,168,117,.45); }
.badge-pocas{ background: rgba(207,149,82,.24); color:#f2cd9c; border-color: rgba(207,149,82,.5); }
.badge-agotado{ background: rgba(229,88,74,.2); color:#f4a99e; border-color: rgba(229,88,74,.5); }
.badge-oferta{ background: var(--amber); color:#241a06; }
/* "Últimas unidades" + "Oferta" juntos no cabían en una sola línea en
   tarjetas angostas (2 columnas en móvil) — el grupo de badges pasaba a 2
   líneas y esa tarjeta quedaba más alta que sus vecinas en la misma fila,
   perdiendo la alineación. Versión más chica y corta ("Últimas uds.") solo
   para este caso puntual — sin oferta al lado, sigue mostrando el texto
   completo normal. */
.badge-pocas.is-with-oferta{
  font-size:.62rem;
  padding:4px 8px;
  letter-spacing:.02em;
}

.card-brand{
  font-family: var(--font-mono);
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color: var(--text-3);
}
.card-name{
  font-family: var(--font-display);
  font-weight:600;
  font-size: 1.08rem;
  letter-spacing:0;
  margin-top:2px;
  line-height:1.25;
  /* Reserva siempre el alto de 2 líneas — sin esto, un nombre que
     alcanzaba para 2 líneas desalineaba el precio/botón de esa tarjeta
     contra sus vecinas de una sola línea en la misma fila. Nombres muy
     largos (3+ líneas) se truncan con "…" en vez de seguir empujando. */
  min-height: 2.5em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-meta{
  color: var(--text-3);
  font-size:.78rem;
  font-family: var(--font-mono);
  margin-top:6px;
}
.card-price-row{
  margin-top:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:8px;
}
/* etiqueta de precio con fondo — el mismo lenguaje que ya usan los badges
   de stock (fondo ámbar tenue + texto ámbar), pero más grande y con más
   peso, para que sea lo primero que se lea al bajar la vista en la tarjeta */
.price{
  font-family: var(--font-mono);
  font-weight:800;
  font-size: 1.2rem;
  letter-spacing:-0.01em;
  color: var(--amber-soft);
  background: rgba(207,149,82,.14);
  padding: 4px 11px;
  border-radius: var(--radius-plaque);
}
.price-strike{
  color: var(--text-3);
  text-decoration: line-through;
  font-size:.86rem;
}
.card-cta{
  margin-top:14px;
}

/* En móvil, dos tarjetas por fila en vez de una sola gigante — todo se
   escala hacia abajo (paddings, tipografía) para que quepa sin que el
   contenido se sienta apretado. */
@media (max-width: 640px){
  .catalog-grid{
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .card{ padding: 10px 10px 12px; border-radius: var(--radius-sm); }
  .card-art{ margin-bottom: 8px; border-radius: calc(var(--radius-sm) - 2px); }
  .card-badges{ margin-bottom: 6px; gap:4px; }
  .badge{ font-size: .58rem; padding: 3px 7px; }
  .badge-pocas.is-with-oferta{ font-size:.56rem; padding:3px 7px; letter-spacing:.02em; }
  .card-brand{ font-size: .6rem; }
  .card-name{ font-size: .88rem; }
  .card-meta{ font-size: .66rem; margin-top: 4px; }
  .card-price-row{ margin-top: 8px; }
  .price{ font-size: .92rem; padding: 3px 8px; }
  .price-strike{ font-size: .68rem; }
}

/* ===================================================================
   Empty state / load more
=================================================================== */
.empty-state{
  text-align:center;
  padding: 64px 20px;
  color: var(--text-2);
}
.empty-state h3{
  font-family: var(--font-display);
  font-weight: 600;
  font-size:1.3rem;
  margin-bottom:8px;
  color: var(--text);
}
.load-more-wrap{
  display:flex;
  justify-content:center;
  margin-top: clamp(28px, 4vw, 44px);
}
.load-more-wrap[hidden]{ display:none; }

/* ===================================================================
   Apartado
=================================================================== */
.steps{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
}
.step-card{
  background: var(--card);
  border:1px solid var(--hairline);
  border-radius: var(--radius-md);
  padding: 26px 22px;
}
.step-num{
  font-family: var(--font-mono);
  font-weight:700;
  font-size: 1.7rem;
  color: var(--amber);
  line-height:1;
}
.step-card h3{
  font-family: var(--font-display);
  font-weight:600;
  font-size: 1.15rem;
  margin-top:14px;
}
.step-card p{
  color: var(--text-2);
  margin-top:8px;
  font-size:.94rem;
}
.apartado-cta{
  margin-top: 32px;
  display:flex;
  justify-content:center;
}

/* ===================================================================
   Decants (próximamente)
=================================================================== */
.coming-soon{
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: clamp(28px, 5vw, 44px);
  max-width: 640px;
  margin-inline: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.coming-soon p{
  color: var(--text-2);
  max-width: 48ch;
}

/* ===================================================================
   CTA final
=================================================================== */
.cta-final{
  text-align:center;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: clamp(40px, 7vw, 76px) clamp(20px, 6vw, 60px);
  margin-inline: var(--gutter);
}
.cta-final h2{
  font-family: var(--font-display);
  font-weight:700;
  letter-spacing:-0.02em;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
}
.cta-final p{
  color: var(--text-2);
  margin-top:12px;
  max-width: 48ch;
  margin-inline:auto;
}
.cta-final .btn{ margin-top: 28px; }

/* ===================================================================
   Footer
=================================================================== */
footer{
  border-top: 1px solid var(--hairline);
  padding-block: clamp(40px, 6vw, 64px);
  margin-top: clamp(56px, 8vw, 96px);
}
.footer-grid{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap: 32px;
}
.footer-brand img{ height:52px; width:auto; margin-bottom:18px; }
.footer-brand p{ color: var(--text-3); font-size:.86rem; max-width: 32ch; }
.footer-col h3{
  font-family: var(--font-mono);
  font-weight: 700;
  font-size:.74rem;
  text-transform:uppercase;
  letter-spacing:.1em;
  color: var(--text-3);
  margin-bottom:14px;
}
.footer-col a, .footer-col p{
  display:block;
  color: var(--text-2);
  font-size:.92rem;
  margin-bottom:10px;
  transition: color var(--dur-fast) var(--ease);
}
.footer-col a:hover{ color: var(--text); }
.footer-col a.footer-address{ display:inline-flex; align-items:center; gap:6px; }
.footer-address svg{ color: var(--amber-soft); flex-shrink:0; }
.footer-bottom{
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--hairline);
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:10px;
  color: var(--text-3);
  font-size:.78rem;
}
.footer-bottom a{ text-decoration: underline; text-underline-offset: 2px; transition: color var(--dur-fast) var(--ease); }
.footer-bottom a:hover{ color: var(--text); }

/* ===================================================================
   Botón flotante — Ofertas del mes
   Reemplaza al viejo flotante de WhatsApp (ya sobraba: "Pedir por
   WhatsApp" ya está siempre visible en el header). Mismo lugar en
   pantalla, mismo lenguaje de badge-oferta (ámbar sólido) — empuja a la
   sección que más urgencia/conversión tiene. Se muestra por JS solo
   cuando hay ofertas activas (ver applyOfertasFilter en script.js).
=================================================================== */
.offers-float{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 50;
  display:flex;
  align-items:center;
  gap:8px;
  padding: 13px 20px 13px 16px;
  border-radius: 999px;
  background: var(--amber);
  color:#241a06;
  font-family: var(--font-display);
  font-weight:700;
  font-size:.92rem;
  box-shadow: 0 14px 30px -8px rgba(207,149,82,.5);
  transition: transform var(--dur-fast) var(--ease), opacity var(--dur-med) var(--ease);
}
.offers-float:hover{ transform: scale(1.05); }
.offers-float svg{ flex-shrink:0; }
/* Se atenúa mientras se scrollea (ver script.js) para no taparle la
   vista a las tarjetas de producto que pasan por detrás — vuelve a su
   opacidad normal apenas el scroll se detiene. */
.offers-float.is-scrolling{ opacity:.4; }
.offers-float.is-hero-visible{ opacity:0; pointer-events:none; }
@media (prefers-reduced-motion: reduce){
  .offers-float{ transition: transform var(--dur-fast) var(--ease); }
}

/* ===================================================================
   Modal
=================================================================== */
.modal-overlay{
  position: fixed;
  inset:0;
  z-index: 100;
  background: rgba(10,7,5,.76);
  backdrop-filter: blur(6px);
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding: 0;
  opacity:0;
  pointer-events:none;
  transition: opacity var(--dur-med) var(--ease);
}
.modal-overlay.is-open{ opacity:1; pointer-events:auto; }
.modal{
  background: var(--card-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  width:100%;
  max-width: 720px;
  max-height: 92vh;
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior: contain;
  padding: clamp(22px, 4vw, 40px);
  transform: translateY(24px);
  transition: transform var(--dur-med) var(--ease);
}
/* "none" y no translateY(0): un transform activo en este mismo elemento
   (que también es el contenedor de scroll) rompe el cálculo de
   position:sticky de su hijo .modal-top, dejando el badge de
   disponibilidad tapado/cortado apenas termina la animación de apertura. */
.modal-overlay.is-open .modal{ transform: none; }
@media (min-width: 760px){
  .modal-overlay{ align-items:center; padding: 24px; }
  .modal{ border-radius: var(--radius-lg); }
}
.modal-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--card-2);
  padding-bottom: 10px;
}
.modal-close{
  background: var(--amber);
  border: none;
  color: #241a06;
  width:40px; height:40px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  flex-shrink:0;
  font-size: 1.1rem;
  line-height: 1;
  box-shadow: 0 4px 14px -4px rgba(0,0,0,.6);
}
.modal-close:hover{ background: var(--amber-soft); transform: scale(1.05); }
.modal-body{
  display:grid;
  grid-template-columns: 240px 1fr;
  gap: 28px;
  margin-top: 18px;
}
@media (max-width: 620px){
  .modal-body{ grid-template-columns: 1fr; }
  .modal-art{ max-width: 240px; margin-inline:auto; }
}
.modal-art{
  position: relative;
  aspect-ratio: 1/1;
  background: radial-gradient(circle at 50% 30%, rgba(232,199,138,.08), transparent 70%), var(--art-bg);
  border-radius: var(--radius-md);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow: hidden;
}
.modal-art svg{ width:60%; height:82%; filter: drop-shadow(0 18px 26px rgba(0,0,0,.55)); }
.modal-art img{ width:100%; height:100%; object-fit: contain; border-radius: calc(var(--radius-md) - 3px); }
.modal-art[data-stock="agotado"]{ filter: grayscale(.6); }
.modal-art[data-stock="agotado"] .card-photo.is-loaded{ opacity:.45; }
.modal-art[data-stock="agotado"] svg{ opacity:.6; }
.modal-art::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: var(--radius-md);
  box-shadow: inset 0 0 26px 11px var(--art-bg);
  pointer-events:none;
}
.modal-name{
  font-family: var(--font-display);
  font-weight:600;
  font-size: 1.6rem;
  letter-spacing:0;
  margin-top:6px;
}
.modal-meta{
  color: var(--text-3);
  font-size:.82rem;
  font-family: var(--font-mono);
  margin-top:6px;
}
.modal-price-row{
  display:flex;
  align-items:baseline;
  gap:10px;
  margin-top:16px;
}
.modal-price{
  font-family: var(--font-mono);
  font-weight:700;
  font-size: 1.5rem;
  color: var(--amber-soft);
}
.notes-list{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:16px;
}
/* Selector de tamaño (5/8/10ml) en la ficha de un decant — mismos .chip
   que los filtros, así elegir tamaño se siente parte del mismo sistema. */
.modal-sizes-label{
  display:flex; align-items:center; gap:8px;
  color: var(--text-2); font-size:.85rem; font-weight:600;
  margin-top:16px;
}
.modal-sizes{ margin-top:10px; }
/* .chip-group y .modal-sizes-label fijan su propio display:flex, que le
   gana en especificidad al atributo hidden (que de por sí solo trae
   display:none del user-agent stylesheet) — sin esto, la ficha de un
   producto normal seguía mostrando el selector de tamaño de un decant
   que se hubiera abierto antes en la misma sesión. */
.modal-sizes-label[hidden], .chip-group[hidden]{ display:none; }
.note-pill{
  border:1px solid var(--hairline);
  color: var(--text-2);
  font-family: var(--font-mono);
  font-size:.74rem;
  padding: 6px 12px;
  border-radius:999px;
}
.modal-desc{
  color: var(--text-2);
  margin-top:16px;
  font-size:.95rem;
}
.modal-actions{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:24px;
}

/* ===================================================================
   Carrito (varios perfumes en un solo pedido de WhatsApp)
=================================================================== */
/* Botón de texto debajo del precio — el "+" sobre la foto se perdía con
   el diseño (poco contraste, fácil de no ver). Esto es explícito. */
.card-add-btn{
  align-self:center;
  margin-top:10px;
  width:100%;
  background: var(--wa);
  border:1px solid transparent;
  color:#04210d;
  font-family: var(--font-mono);
  font-weight:700;
  font-size:.78rem;
  letter-spacing:.02em;
  padding: 10px 14px;
  border-radius: var(--radius-plaque);
  cursor:pointer;
  box-shadow: 0 10px 22px -10px rgba(48,209,88,.5);
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.card-add-btn:hover{ transform: translateY(-1px); box-shadow: 0 14px 28px -10px rgba(48,209,88,.6); }
/* Confirmación momentánea justo en el botón que se tocó — más notoria que
   el aviso de abajo solo. */
.card-add-btn.is-added, .btn.is-added{ animation: addedPulse .4s var(--ease); }
@keyframes addedPulse{
  0%{ transform: scale(1); }
  35%{ transform: scale(1.05); }
  100%{ transform: scale(1); }
}
@media (prefers-reduced-motion: reduce){
  .card-add-btn.is-added{ animation:none; }
}

/* Carrito en el header, arriba a la derecha — siempre visible (como
   Amazon), no solo cuando hay algo adentro; la placa numérica es lo que
   aparece/desaparece según el contenido. */
.nav-cart{
  position: relative;
  width: 42px; height:42px;
  border-radius: 50%;
  background: var(--card-2);
  border: 1px solid var(--hairline);
  color: var(--text);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  flex-shrink:0;
  transition: transform var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.nav-cart:hover{ transform: scale(1.06); border-color: rgba(232,199,138,.35); }
.cart-badge{
  position:absolute;
  top:-4px; right:-4px;
  min-width:20px; height:20px;
  padding-inline:4px;
  border-radius:999px;
  background: var(--amber);
  color:#241a06;
  font-family: var(--font-mono);
  font-weight:700;
  font-size:.72rem;
  display:flex;
  align-items:center;
  justify-content:center;
}
/* display:flex arriba le gana al display:none del atributo [hidden] del
   navegador (mismo puntaje de especificidad, gana el estilo de autor) —
   sin esto la placa "0" se quedaba visible aunque el carrito estuviera vacío. */
.cart-badge[hidden]{ display:none; }
.nav-cart.is-bumping{ animation: cartBump .4s var(--ease); }
@keyframes cartBump{
  0%{ transform: scale(1); }
  40%{ transform: scale(1.22); }
  100%{ transform: scale(1); }
}
@media (prefers-reduced-motion: reduce){
  .cart-float.is-bumping{ animation:none; }
}

/* Panel — mismo lenguaje que el modal de producto (bottom-sheet en móvil,
   centrado en desktop) para que se sienta parte del mismo sitio. */
.cart-overlay{
  position: fixed;
  inset:0;
  z-index: 100;
  background: rgba(10,7,5,.76);
  backdrop-filter: blur(6px);
  display:flex;
  align-items:flex-end;
  justify-content:center;
  opacity:0;
  pointer-events:none;
  transition: opacity var(--dur-med) var(--ease);
}
.cart-overlay.is-open{ opacity:1; pointer-events:auto; }
.cart-panel{
  background: var(--card-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  width:100%;
  max-width: 520px;
  max-height: 88vh;
  overflow-y:auto;
  overscroll-behavior: contain;
  padding: clamp(22px, 4vw, 32px);
  transform: translateY(24px);
  transition: transform var(--dur-med) var(--ease);
}
.cart-overlay.is-open .cart-panel{ transform: none; }
@media (min-width: 760px){
  .cart-overlay{ align-items:center; padding: 24px; }
  .cart-panel{ border-radius: var(--radius-lg); }
}

.cart-empty{
  color: var(--text-2);
  font-size:.92rem;
  margin-top:24px;
  text-align:center;
  padding: 20px 10px;
}

.cart-items{
  display:flex;
  flex-direction:column;
  gap:14px;
  margin-top:20px;
}
.cart-item{
  display:grid;
  grid-template-columns: 48px 1fr auto auto auto;
  align-items:center;
  gap:12px;
  padding-bottom:14px;
  border-bottom:1px solid var(--hairline);
}
/* Miniatura — mismo componente que .card-art, solo más chico. */
.cart-item-art{
  position:relative;
  width:48px; height:48px;
  border-radius: var(--radius-sm);
  background: radial-gradient(circle at 50% 30%, rgba(232,199,138,.08), transparent 70%), var(--art-bg);
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.cart-item-art svg{ width:70%; height:88%; }
.cart-item-art img{ width:92%; height:92%; object-fit:contain; border-radius: calc(var(--radius-sm) - 2px); }
.cart-item-art[data-stock="agotado"]{ filter: grayscale(.6); }
.cart-item-name{
  font-family: var(--font-display);
  font-weight:600;
  font-size:.94rem;
}
.cart-item-meta{
  color: var(--text-3);
  font-size:.78rem;
  font-family: var(--font-mono);
  margin-top:2px;
}
.cart-item-qty{
  display:flex;
  align-items:center;
  gap:8px;
  font-family: var(--font-mono);
  font-weight:700;
}
.cart-qty-btn{
  width:36px; height:36px;
  border-radius:50%;
  border:1px solid var(--hairline);
  background: var(--card);
  color: var(--text);
  cursor:pointer;
  font-size:1.1rem;
  line-height:1;
}
.cart-qty-btn:hover{ border-color: rgba(232,199,138,.4); }
.cart-item-subtotal{
  font-family: var(--font-mono);
  font-weight:700;
  color: var(--amber-soft);
  white-space:nowrap;
}
.cart-item-remove{
  background: rgba(232,199,138,.1);
  border:1px solid rgba(232,199,138,.25);
  border-radius:50%;
  color: var(--text-2);
  cursor:pointer;
  width:32px; height:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.cart-item-remove svg{ width:15px; height:15px; }
.cart-item-remove:hover{ color:#fff; background: var(--red); border-color: var(--red); }

.cart-footer{
  margin-top:20px;
  padding-top:20px;
  border-top:1px solid var(--hairline);
}
.cart-total-row{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  font-family: var(--font-display);
  font-weight:700;
  font-size:1.1rem;
}
.cart-total{
  font-family: var(--font-mono);
  color: var(--amber-soft);
  font-size:1.3rem;
}
.cart-name-field{
  display:block;
  margin-top:18px;
}
.cart-name-field span{
  display:block;
  font-size:.8rem;
  color: var(--text-2);
  margin-bottom:8px;
}
.cart-name-field input{
  width:100%;
  background: var(--card);
  border:1px solid var(--hairline);
  border-radius: var(--radius-plaque);
  color: var(--text);
  font-size:1rem;
  padding: 12px 14px;
}
.cart-name-field input::placeholder{ color: var(--text-3); }
.cart-name-field input:focus{ outline:none; border-color: rgba(232,199,138,.4); }
.cart-footer .btn{ margin-top:16px; }

@media (max-width: 640px){
  .cart-item{
    grid-template-columns: 44px 1fr auto;
    grid-template-areas: "art info remove" "art qty subtotal";
    row-gap:8px;
  }
  .cart-item-art{ grid-area: art; width:44px; height:44px; }
  .cart-item-info{ grid-area: info; }
  .cart-item-remove{ grid-area: remove; }
  .cart-item-qty{ grid-area: qty; }
  .cart-item-subtotal{ grid-area: subtotal; justify-self:end; }
}

/* Confirmación de "agregado al carrito" — aparece abajo, centrada, y se
   desvanece sola. Encima de los botones flotantes para que no se tape. */
/* Modal de confirmación — reemplaza el aviso chico de antes, que se
   perdía. Encima de todo lo demás (incluso del modal de producto, por si
   se agregó desde ahí) para que sea imposible no verlo. */
.added-overlay{
  position: fixed;
  inset:0;
  z-index: 110;
  background: rgba(10,7,5,.76);
  backdrop-filter: blur(6px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 20px;
  opacity:0;
  pointer-events:none;
  transition: opacity var(--dur-med) var(--ease);
}
.added-overlay.is-open{ opacity:1; pointer-events:auto; }
.added-modal{
  background: var(--card-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 4vw, 36px);
  max-width: 380px;
  width:100%;
  text-align:center;
  transform: scale(.94);
  transition: transform var(--dur-med) var(--ease);
}
.added-overlay.is-open .added-modal{ transform: scale(1); }
.added-check{
  width:52px; height:52px;
  border-radius:50%;
  background: rgba(48,209,88,.16);
  color: var(--wa);
  font-size:1.6rem;
  font-weight:800;
  display:flex;
  align-items:center;
  justify-content:center;
  margin: 0 auto 16px;
}
.added-title{
  font-family: var(--font-display);
  font-weight:700;
  font-size:1.2rem;
}
.added-product{
  display:flex;
  align-items:center;
  gap:12px;
  text-align:left;
  margin-top:20px;
  padding:12px;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
}
.added-art{
  position:relative;
  width:52px; height:52px;
  flex-shrink:0;
  border-radius: var(--radius-sm);
  background: var(--art-bg);
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}
.added-art svg{ width:70%; height:88%; }
.added-art img{ width:92%; height:92%; object-fit:contain; border-radius: calc(var(--radius-sm) - 2px); }
.added-name{
  font-family: var(--font-display);
  font-weight:600;
  font-size:.94rem;
}
.added-meta{
  color: var(--text-3);
  font-size:.8rem;
  font-family: var(--font-mono);
  margin-top:2px;
}
.added-actions{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:22px;
}
@media (prefers-reduced-motion: reduce){
  .added-overlay, .added-modal{ transition:none; }
}

/* ===================================================================
   Utilidades responsive
=================================================================== */
@media (max-width: 480px){
  .hero-ctas .btn{ flex:1; }
  .cta-final{ margin-inline: 14px; }
}