/* ============================================
   L'ESSENCE PARFUM – ESTILOS PREMIUM
   Paleta: Fondo #FBF9F5 / #F9F6F0
           Negro #1A1A1A
           Dorado suave #C8A96B
           Verde WhatsApp #25D366
   ============================================ */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', sans-serif;
  background-color: #FBF9F5;
  color: #1A1A1A;
  line-height: 1.6;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  text-decoration: none;
  color: inherit;
}

ul {
  list-style: none;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- BANNER SUPERIOR DE ENVÍO GRATIS ---------- */
.top-banner {
  background: #1A1A1A;
  color: #C8A96B;
  padding: 8px 0;
  overflow: hidden;
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.banner-track {
  display: flex;
  gap: 60px;
  animation: scrollBanner 20s linear infinite;
  width: max-content;
}

.banner-track span {
  white-space: nowrap;
}

@keyframes scrollBanner {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ---------- HEADER ---------- */
.header {
  background: #FFFFFF;
  padding: 16px 0;
  border-bottom: 1px solid #E8E2D9;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 1px 4px rgba(0,0,0,0.02);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.logo a {
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  font-size: 1.4rem;
  letter-spacing: 4px;
  color: #1A1A1A;
}

.nav ul {
  display: flex;
  gap: 32px;
  align-items: center;
}

.nav ul li a {
  font-size: 0.85rem;
  font-weight: 500;
  color: #1A1A1A;
  letter-spacing: 0.5px;
  transition: color 0.2s;
}

.nav ul li a:hover {
  color: #C8A96B;
}


.header-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.icon-btn {
  background: none;
  border: none;
  font-size: 1.2rem;
  color: #1A1A1A;
  cursor: pointer;
  padding: 4px;
  transition: color 0.2s;
}

.icon-btn:hover {
  color: #C8A96B;
}

.btn-whatsapp-header {
  background: #25D366;
  color: #FFFFFF;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 30px;
  letter-spacing: 0.5px;
  transition: background 0.2s;
}

.btn-whatsapp-header:hover {
  background: #1DA851;
}

.hamburger {
  display: none;
  flex-direction: column;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}

.hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: #1A1A1A;
  transition: 0.2s;
}

/* ============================================================
   HERO INTERACTIVO – PERFUMES FLOTANTES
   Namespace propio (.hero-lux) para no chocar con las reglas
   heredadas de .hero-content / .hero-full que hay más abajo.
   ============================================================ */

.hero-lux {
  --oro: #C0A063;
  --oro-osc: #9A7B34;
  --oro-claro: #E4CE9C;
  --tinta: #17140F;
  --marmol: #F7F5F0;
  position: relative;
  /* La ALTURA la marca la foto, no la pantalla. Con una altura fija (88vh) en
     un móvil el hero quedaba mucho más alto que ancho, el navegador recortaba
     los lados de la imagen y las botellas se desplazaban al centro, justo
     debajo del texto. Siguiendo la proporción de la foto se ve entera siempre
     y la composición (texto izquierda / perfumes derecha) se mantiene igual a
     cualquier ancho. Actualizar si cambia la foto. */
  aspect-ratio: 1672 / 940;
  /* `width: 100%` es obligatorio: con aspect-ratio y un max-height que llega a
     aplicarse, el navegador encoge TAMBIÉN el ancho para conservar la
     proporción, y aparecía una franja de fondo a la derecha en pantallas
     anchas. Fijando el ancho, el tope de altura solo recorta la foto. */
  width: 100%;
  height: auto;
  min-height: 0;
  max-height: 88vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  background: var(--marmol);
  isolation: isolate;
}

/* ---------- Escenario: mármol blanco pulido ---------- */
.hero-lux-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* Blanco a la izquierda (donde va el texto) y cálido dorado a la derecha,
     que es donde ocurre la escena. Así el fondo se siente dorado sin que el
     titular pierda contraste. */
  background:
    radial-gradient(95% 80% at 78% 38%, rgba(246, 214, 152, 0.55) 0%, rgba(240, 214, 165, 0.22) 45%, transparent 75%),
    radial-gradient(115% 85% at 70% 28%, #FFFFFF 0%, #FDFAF3 38%, #F6F1E4 70%, #EBE4D5 100%),
    linear-gradient(155deg, #FFFEFC 0%, #FAF7EF 55%, #F2EDE1 100%);
}

/* Con foto, TODAS las capas generadas por CSS sobran: la imagen ya trae su
   mármol, sus vetas y sus destellos. */
.hero-lux.has-photo .hero-cssbg { display: none; }

/* ============================================================
   LAS 3 ESCENAS DEL HERO (carrusel)
   Cada escena es una foto temática con sus propias zonas clicables y su
   propio texto. Se cruzan en fundido: la que lleva .is-activa se ve, las
   demás quedan ocultas Y SIN PODER PULSARSE.
   ============================================================ */
.hero-lux-slides {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.hero-lux-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  /* `visibility` además de `opacity`: sin ella las escenas ocultas siguen
     capturando clics y el visitante pulsa botellas que no ve. Va con retardo
     para que no desaparezcan de golpe a mitad del fundido. */
  visibility: hidden;
  pointer-events: none;
  /* LA ESCENA ACTIVA SIEMPRE VA ENCIMA. Sin esto, el orden de pintado lo
     decide el orden del HTML, y la escena que se está yendo puede quedar
     tapando a la que entra mientras dura el fundido — se ve al pulsar los
     puntos deprisa, o si el navegador interrumpe una transición a medias:
     durante un instante manda la foto equivocada. Apilando la activa arriba,
     la que entra cubre a la que sale y el cruce es siempre correcto. */
  z-index: 0;
  transition: opacity 1.1s ease, visibility 0s linear 1.1s;
}

.hero-lux-slide.is-activa {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index: 1;
  transition: opacity 1.1s ease, visibility 0s linear 0s;
}

/* Escena cuya foto no llegó a cargar: fuera de la rotación y fuera de la
   vista, para no enseñar un hueco blanco. */
.hero-lux-slide.sin-foto { display: none; }

/* Relleno del fondo: la MISMA foto de la escena, ampliada y desenfocada. Solo
   asoma en las franjas que puedan sobrar cuando la ventana no tiene la
   proporción exacta de la imagen. Evita bandas de color plano sin recortar
   nada importante. */
.hero-lux-relleno {
  position: absolute;
  inset: 0;
  background: var(--hero-photo) center / cover no-repeat;
  filter: blur(34px) saturate(1.06);
  transform: scale(1.14);
  z-index: 0;
}

/* Velo claro sobre el lado izquierdo, para que el titular tenga contraste
   sobre la foto sin apagar la escena de la derecha.
   Va DENTRO del escenario y no en el hero porque el escenario es la caja
   exacta de la imagen: así el velo se estira y se recorta con ella y siempre
   cubre la misma zona de la foto, sea cual sea la ventana.
   HASTA DÓNDE LLEGA NO ES ARBITRARIO: la botella más a la izquierda de las
   tres escenas (Oud For Glory) empieza en el 41% del ancho, así que el velo
   tiene que haberse desvanecido antes de ahí o le lavaría el color. */
.hero-lux-velo {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(100deg,
    rgba(255, 253, 248, 0.92) 0%,
    rgba(255, 253, 248, 0.84) 16%,
    rgba(255, 253, 248, 0.52) 28%,
    rgba(255, 253, 248, 0.16) 36%,
    transparent 42%);
}

/* ---------- Puntos para cambiar de escena ---------- */
.hero-lux-puntos {
  position: absolute;
  left: 50%;
  bottom: clamp(8px, 1.6vw, 22px);
  transform: translateX(-50%);
  display: flex;
  gap: clamp(6px, 0.7vw, 10px);
  z-index: 12;
}

.hero-punto {
  width: clamp(7px, 0.75vw, 10px);
  height: clamp(7px, 0.75vw, 10px);
  padding: 0;
  border: 1px solid rgba(154, 123, 52, 0.55);
  border-radius: 50%;
  background: rgba(255, 253, 248, 0.55);
  cursor: pointer;
  transition: background 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
}
.hero-punto:hover { transform: scale(1.2); }

/* El punto activo se alarga en vez de solo cambiar de color: a este tamaño el
   color solo no se distingue sobre el mármol claro. */
.hero-punto.is-activo {
  width: clamp(20px, 2.1vw, 28px);
  border-radius: 60px;
  border-color: transparent;
  background: linear-gradient(135deg, #C9AC70 0%, #A9863B 55%, #8C6C28 100%);
}

.hero-cssbg { position: absolute; inset: 0; }

/* Vetas del mármol (el SVG está en el HTML del hero).
   Se rota y amplía para que las vetas caigan en diagonal, como el mármol real. */
.hero-marble {
  position: absolute;
  left: -25%; top: -25%;
  width: 150%; height: 150%;
  transform: rotate(-18deg);
  transform-origin: center;
}

/* Vetas doradas dibujadas: son el rasgo que hace que lea como mármol
   de lujo y no como una superficie lisa. */
.hero-veins {
  position: absolute;
  left: -6%; top: -6%;
  width: 112%; height: 112%;
  opacity: 0.9;
  transform: rotate(-4deg);
}

/* Muy baja a propósito: el mármol blanco es un susurro de textura, no un
   estampado. Subir estos valores hace que parezca tela o cebra. */
.hero-marble-grey { opacity: 0.07; }
.hero-marble-gold { opacity: 0.10; }

/* Halos de luz cálida — el dorado entra por la iluminación, no por el relleno */
.hero-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  will-change: transform, opacity;
}

.hero-glow-1 {
  width: 44vw; height: 44vw;
  left: 52%; top: -6%;
  background: radial-gradient(circle, rgba(226, 186, 108, 0.22) 0%, rgba(226, 186, 108, 0.07) 46%, transparent 72%);
  animation: heroGlowA 28s ease-in-out infinite;
}

.hero-glow-2 {
  width: 34vw; height: 34vw;
  left: 70%; top: 46%;
  background: radial-gradient(circle, rgba(255, 246, 228, 0.6) 0%, rgba(230, 208, 162, 0.07) 50%, transparent 74%);
  animation: heroGlowB 36s ease-in-out infinite;
}

/* Halo dorado bajo y cálido: ancla la composición contra el suelo */
.hero-glow-3 {
  width: 52vw; height: 26vw;
  left: 44%; top: 58%;
  background: radial-gradient(ellipse, rgba(206, 168, 96, 0.16) 0%, rgba(206, 168, 96, 0.05) 52%, transparent 76%);
  animation: heroGlowA 32s ease-in-out infinite reverse;
}

@keyframes heroGlowA {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1);      opacity: 0.9; }
  50%      { transform: translate3d(-3%, 4%, 0) scale(1.12); opacity: 1; }
}
@keyframes heroGlowB {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1.05);   opacity: 0.7; }
  50%      { transform: translate3d(4%, -5%, 0) scale(0.95); opacity: 1; }
}

/* Haces de luz cruzando el escenario, como en un set de fotografía */
.hero-ray {
  position: absolute;
  top: -30%;
  height: 160%;
  transform: rotate(14deg);
  filter: blur(26px);
  background: linear-gradient(90deg, transparent 0%, rgba(255, 246, 226, 0.9) 50%, transparent 100%);
}
.hero-ray-1 { left: 46%; width: 150px; opacity: 0.6;  animation: heroRay 22s ease-in-out infinite; }
.hero-ray-2 { left: 72%; width: 90px;  opacity: 0.45; animation: heroRay 30s ease-in-out infinite reverse; }
.hero-ray-3 {
  left: 88%; width: 56px; opacity: 0.4;
  background: linear-gradient(90deg, transparent 0%, rgba(226, 190, 116, 0.75) 50%, transparent 100%);
  animation: heroRay 26s ease-in-out infinite;
}

@keyframes heroRay {
  0%, 100% { transform: rotate(14deg) translateX(0);     opacity: 0.3; }
  50%      { transform: rotate(14deg) translateX(-30px); opacity: 0.62; }
}

/* ---------- Bokeh dorado ----------
   Círculos desenfocados que simulan luces fuera de foco. Son decorativos
   y no representan ningún producto: las únicas botellas del hero son las
   imágenes reales de .hero-bottle. */
.hero-bokeh {
  position: absolute;
  border-radius: 50%;
  /* Sobre mármol claro un bokeh blanco no se ve: el círculo lleva núcleo
     luminoso y anillo dorado saturado para leerse sobre el fondo. */
  background: radial-gradient(circle at 36% 34%,
              rgba(255, 250, 232, 1) 0%,
              rgba(244, 214, 148, 0.95) 26%,
              rgba(214, 172, 92, 0.7) 52%,
              rgba(190, 148, 70, 0.28) 74%,
              transparent 84%);
  box-shadow: 0 0 40px rgba(226, 186, 110, 0.45);
  animation-name: heroBokeh;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

.hero-bokeh-1 { width: 160px; height: 160px; left: 55%; top: 10%; filter: blur(15px); opacity: 0.72; animation-duration: 19s; animation-delay: -2s; }
.hero-bokeh-2 { width: 104px; height: 104px; left: 83%; top: 30%; filter: blur(10px); opacity: 0.85; animation-duration: 24s; animation-delay: -7s; }
.hero-bokeh-3 { width: 230px; height: 230px; left: 70%; top: 74%; filter: blur(22px); opacity: 0.55; animation-duration: 28s; animation-delay: -12s; }
.hero-bokeh-4 { width: 72px;  height: 72px;  left: 46%; top: 48%; filter: blur(7px);  opacity: 0.8;  animation-duration: 16s; animation-delay: -4s; }
.hero-bokeh-5 { width: 130px; height: 130px; left: 95%; top: 58%; filter: blur(13px); opacity: 0.62; animation-duration: 22s; animation-delay: -9s; }
.hero-bokeh-6 { width: 58px;  height: 58px;  left: 62%; top: 30%; filter: blur(5px);  opacity: 0.9;  animation-duration: 14s; animation-delay: -6s; }
.hero-bokeh-7 { width: 88px;  height: 88px;  left: 38%; top: 18%; filter: blur(9px);  opacity: 0.6;  animation-duration: 26s; animation-delay: -1s; }
.hero-bokeh-8 { width: 46px;  height: 46px;  left: 78%; top: 54%; filter: blur(4px);  opacity: 0.95; animation-duration: 12s; animation-delay: -8s; }

@keyframes heroBokeh {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1);        }
  50%      { transform: translate3d(-14px, -22px, 0) scale(1.14); }
}

/* Polvo dorado suspendido (lo inyecta el JS) */
.hero-lux-particles { position: absolute; inset: 0; }

/* Núcleo blanco + halo dorado: sobre un fondo cálido una partícula dorada
   se pierde, así que el punto brillante tiene que ser casi blanco. */
.hero-particle {
  position: absolute;
  border-radius: 50%;
  background: #FFFDF6;
  box-shadow:
    0 0 4px 1px rgba(255, 250, 232, 0.95),
    0 0 12px 3px rgba(246, 208, 130, 0.75),
    0 0 26px 6px rgba(226, 176, 90, 0.35);
  animation-name: heroParticle;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

@keyframes heroParticle {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-30px) scale(1.45); }
}

/* Superficie pulida: banda inferior algo más fría, con brillo especular */
.hero-lux-floor {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 44%;
  background:
    linear-gradient(to top, rgba(190, 186, 176, 0.30) 0%, rgba(212, 208, 200, 0.10) 42%, transparent 100%),
    radial-gradient(70% 100% at 64% 100%, rgba(255, 252, 244, 0.8) 0%, transparent 62%);
}

/* Línea de horizonte: separa la pared del plano pulido donde flotan las
   botellas. Es lo que hace que el fondo lea como un set y no como un
   degradado plano. */
.hero-lux-horizon {
  position: absolute;
  left: 0; right: 0;
  bottom: 40%;
  height: 220px;
  /* Difuminado en los dos sentidos: insinúa el plano sin dibujar una línea */
  background: linear-gradient(to bottom,
    transparent 0%,
    rgba(158, 148, 128, 0.07) 45%,
    rgba(190, 180, 160, 0.03) 70%,
    transparent 100%);
}

/* Viñeta clara: oscurece apenas los bordes sin ensuciar el mármol.
   El negro del sitio entra aquí, en las esquinas, no en el fondo. */
.hero-lux-vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(85% 78% at 64% 44%, transparent 46%, rgba(88, 80, 66, 0.16) 82%, rgba(52, 46, 36, 0.26) 100%),
    linear-gradient(90deg, rgba(250, 249, 245, 0.9) 0%, rgba(250, 249, 245, 0.5) 26%, transparent 50%);
}

/* ---------- Líneas de luz doradas del fondo ---------- */
.hero-lightlines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  mix-blend-mode: multiply;
  opacity: 0.55;
}

/* ============================================================
   INSTALACIÓN DE MÁRMOL (pedestales)
   Da suelo a las botellas: sin esto parecen recortes pegados.
   ============================================================ */
.hero-stage-set {
  position: absolute;
  inset: 0;
  z-index: 1;          /* delante del fondo, detrás de las botellas */
  pointer-events: none;
}

.plinth {
  position: absolute;
  left: var(--px);
  bottom: var(--pb);
  width: var(--pw);
  height: var(--ph);
  transform: translateX(-50%);
}

/* Lateral del cilindro: el degradado horizontal simula el volumen redondo */
.plinth-body {
  position: absolute;
  left: 0; right: 0;
  top: calc(var(--pe) / 2);
  bottom: 0;
  background: linear-gradient(90deg,
    #BDB3A0 0%, #E4DED1 12%, #FBF9F4 34%, #FFFFFF 46%, #F0EBE0 66%, #DAD2C1 84%, #B5AB96 100%);
  /* La base se curva para cerrar el cilindro */
  border-radius: 0 0 50% 50% / 0 0 var(--pe) var(--pe);
  box-shadow:
    0 30px 46px rgba(88, 76, 54, 0.28),
    0 8px 16px rgba(88, 76, 54, 0.16),
    inset 0 -16px 26px rgba(140, 122, 88, 0.22);
}

/* Filo dorado en la base del cilindro */
.plinth-body::after {
  content: '';
  position: absolute;
  left: 4%; right: 4%;
  bottom: 0;
  height: var(--pe);
  border-radius: 50%;
  border-bottom: 1.5px solid rgba(190, 154, 84, 0.5);
  filter: blur(0.4px);
}

/* Disco superior: la superficie donde se apoya la botella */
.plinth-top {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: var(--pe);
  border-radius: 50%;
  background:
    radial-gradient(60% 70% at 42% 34%, rgba(255,255,255,0.95) 0%, transparent 62%),
    linear-gradient(150deg, #FFFFFF 0%, #F4F0E6 34%, #E6DECD 68%, #D6CCB6 100%);
  /* Canto dorado + brillo especular en el borde */
  box-shadow:
    0 0 0 2px rgba(186, 149, 76, 0.85),
    0 0 0 4px rgba(255, 250, 238, 0.65),
    0 0 14px rgba(198, 164, 94, 0.35),
    inset 0 4px 10px rgba(255, 255, 255, 0.95),
    inset 0 -10px 18px rgba(150, 128, 88, 0.26);
}

/* Vetas doradas sobre el disco, para que sea mármol y no plástico */
.plinth-top::after {
  content: '';
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  opacity: 0.5;
  background:
    linear-gradient(112deg, transparent 34%, rgba(186, 150, 82, 0.32) 36%, transparent 39%),
    linear-gradient(96deg,  transparent 58%, rgba(160, 145, 118, 0.26) 60%, transparent 62.5%),
    linear-gradient(130deg, transparent 70%, rgba(198, 164, 94, 0.22) 72%, transparent 74%);
}

/* Profundidad: lo que está más atrás se desenfoca y se aclara */
.plinth-back  { filter: blur(2.5px) brightness(1.03); opacity: 0.75; }
.plinth-mid   { filter: blur(1.2px); opacity: 0.9; }
.plinth-front { z-index: 2; }

/* ---------- Escenario: LA CAJA EXACTA DE LA FOTO ----------
   Tiene la misma proporción que la foto de su escena y se centra dentro del
   hero, así que la imagen se ve ENTERA y nítida: ninguna botella queda
   cortada por muy ancha o baja que sea la ventana. Antes iba a pantalla
   completa con `cover` y el recorte se comía la botella de arriba.
   Como este contenedor coincide con la imagen, las zonas clicables pueden
   situarse con un simple % — no hacen falta cálculos en vw.
   LAS TRES FOTOS SON 1672x940 a propósito: al compartir proporción, basta con
   un único aspect-ratio aquí para las tres escenas. */
.hero-lux-stage {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: auto;
  aspect-ratio: 1672 / 940;   /* <- actualizar si cambia la foto */
  background: var(--hero-photo) center / 100% 100% no-repeat;
  z-index: 2;
}

/* El hero es 88vh de alto, así que su proporción es (ancho / 0.88·alto).
   Cuando es MÁS ancho que la foto, la caja se estira a lo ancho y el sobrante
   de alto lo recorta el `overflow:hidden` del hero, repartido arriba y abajo
   por el centrado. Cuando es más alto, se estira a lo alto.
   El resultado es un "cover" hecho con la caja: la foto llena la pantalla sin
   franjas Y las zonas clicables siguen siendo un % exacto de la imagen.
   1565/1000 es el punto donde el hero deja de ser más ancho que la foto. */
@media (max-aspect-ratio: 1565 / 1000) {
  .hero-lux-stage {
    width: auto;
    height: 100%;
  }
}

/* ============================================================
   ZONAS CLICABLES SOBRE LA FOTO
   Los perfumes vienen dentro de la foto de cada escena. Estas áreas son
   transparentes y se colocan encima de cada botella para poder pulsarla.
   Van en % del escenario, que es la caja exacta de la imagen, así que la zona
   sigue a su botella en cualquier pantalla. Los 4 valores (--hl/--hw/--ht/--hh)
   se calculan con las fórmulas de CLAUDE.md §4b a partir de los píxeles de esa
   foto concreta: al cambiarla hay que recalcularlos.
   ============================================================ */
.hero-hotspot {
  position: absolute;
  left: var(--hl);
  top: var(--ht);
  width: var(--hw);
  height: var(--hh);
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  z-index: 3;
  -webkit-tap-highlight-color: transparent;
}
.hero-hotspot:focus-visible { outline: none; }

/* El resplandor va en un pseudo-elemento MÁS GRANDE que la zona y en forma
   de anillo difuminado: brilla ALREDEDOR de la botella y deja su centro
   limpio.
   Antes se pintaba un degradado de fondo dentro del propio botón y eso daba
   dos problemas que el dueño detectó: se veía el cuadrado del botón, y el
   velo claro sobre las botellas oscuras (Asad, 9PM) las hacía parecer
   transparentes. Sin relleno central, conservan su color real. */
.hero-hotspot::before {
  content: '';
  position: absolute;
  inset: -24%;
  border-radius: 50%;
  background: radial-gradient(closest-side,
              transparent 38%,
              rgba(255, 226, 158, 0.42) 62%,
              rgba(233, 191, 116, 0.20) 78%,
              transparent 94%);
  filter: blur(16px);
  opacity: 0;
  transform: scale(0.94);
  transition: opacity 0.32s ease, transform 0.32s ease;
  pointer-events: none;
}

.hero-hotspot:hover::before,
.hero-hotspot:focus-visible::before {
  opacity: 1;
  transform: scale(1);
}

.hero-hotspot.is-active::before {
  opacity: 1;
  transform: scale(1.06);
  background: radial-gradient(closest-side,
              transparent 34%,
              rgba(255, 236, 180, 0.6) 60%,
              rgba(233, 191, 116, 0.3) 78%,
              transparent 94%);
}

/* Punto dorado discreto que insinúa que cada botella es pulsable */
/* El punto va DENTRO de la caja, pegado abajo. Si se saca fuera (bottom
   negativo), en las botellas del borde inferior queda fuera de pantalla. */
.hero-hotspot::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: 9px;
  height: 9px;
  margin-left: -4.5px;
  border-radius: 50%;
  background: rgba(255, 250, 235, 0.9);
  box-shadow: 0 0 0 2px rgba(198, 164, 94, 0.75), 0 0 12px rgba(226, 186, 110, 0.8);
  opacity: 0.75;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.hero-hotspot:hover::after,
.hero-hotspot.is-active::after {
  opacity: 1;
  transform: scale(1.35);
}

/* Las botellas se anclan por ABAJO, no por arriba.
   El fondo va con background-position: center bottom, así que el suelo y
   los pedestales quedan pegados al borde inferior del hero y escalan con
   el ANCHO de la ventana. Midiendo --y desde abajo y en unidades vw, cada
   botella queda clavada sobre su plataforma en cualquier pantalla.
   Si se midiera con top en %, al cambiar la altura del hero las botellas
   se despegarían de los pedestales. */
.hero-bottle {
  position: absolute;
  left: var(--x);
  bottom: var(--y);
  width: var(--size);
  height: var(--size);
  transform: translateX(-50%);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* Capa intermedia: solo se encarga de flotar, para no pisar el
   translate(-50%,-50%) del contenedor ni la escala de la imagen. */
.hero-bottle-float {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  animation-name: var(--fname);
  animation-duration: var(--fdur);
  animation-delay: var(--fdelay);
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  will-change: transform;
}

.hero-bottle-img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: rotate(var(--tilt, 0deg));
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), filter 0.45s ease;
  /* Sombra de contacto suave sobre el mármol + rim light dorado */
  filter:
    drop-shadow(0 20px 22px rgba(84, 72, 52, 0.30))
    drop-shadow(0 4px 6px rgba(84, 72, 52, 0.18))
    drop-shadow(0 0 18px rgba(214, 178, 108, 0.22));

  /* Solo para fotos SIN recortar: difumina el rectángulo contra el mármol.
     Las botellas con data-cutout="true" no la usan (regla de abajo). */
  -webkit-mask-image: radial-gradient(ellipse 58% 66% at 50% 47%, #000 42%, rgba(0,0,0,0.72) 60%, rgba(0,0,0,0.25) 74%, transparent 86%);
          mask-image: radial-gradient(ellipse 58% 66% at 50% 47%, #000 42%, rgba(0,0,0,0.72) 60%, rgba(0,0,0,0.25) 74%, transparent 86%);
}

/* PNG recortado: sin máscara, con sombra proyectada real */
.hero-bottle[data-cutout="true"] .hero-bottle-img {
  -webkit-mask-image: none;
          mask-image: none;
}

/* ---------- Sombra de contacto sobre el mármol (la crea el JS) ----------
   Elipse difuminada justo bajo la botella. Sin ella el recorte parece
   pegado encima del fondo por muy bueno que sea el reflejo. */
.hero-bottle-shadow {
  position: absolute;
  left: 50%;
  bottom: -2%;
  width: 62%;
  height: 8%;
  transform: translateX(-50%);
  border-radius: 50%;
  /* El fondo real trae un suelo de mármol pulido, así que la sombra vuelve a
     tener sentido — pero suave: la luz de la escena es difusa. */
  background: radial-gradient(ellipse at center,
    rgba(104, 84, 54, 0.34) 0%,
    rgba(118, 98, 66, 0.18) 44%,
    rgba(130, 112, 80, 0.05) 68%,
    transparent 80%);
  filter: blur(7px);
  z-index: 0;
  transition: opacity 0.45s ease, transform 0.45s ease;
}

.hero-bottle.is-back .hero-bottle-shadow { opacity: 0.4; }
.hero-bottle.is-active .hero-bottle-shadow {
  transform: translateX(-50%) scale(1.12);
  opacity: 0.85;
}

/* ---------- Reflejo sobre el mármol (lo crea el JS) ---------- */
.hero-bottle-reflect {
  position: absolute;
  left: 0;
  top: 96%;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0.11;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.2) 30%, transparent 58%);
          mask-image: linear-gradient(to bottom, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.2) 30%, transparent 58%);
  transition: opacity 0.45s ease;
}

.hero-bottle-reflect img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: scaleY(-1) rotate(var(--tilt, 0deg));
  filter: blur(3px) saturate(0.75);
}

/* ---------- Planos de profundidad ---------- */
/* Delante: nítida, grande, sombra más marcada */
.hero-bottle.is-front { z-index: 4; }
.hero-bottle.is-front .hero-bottle-img {
  filter:
    drop-shadow(0 26px 28px rgba(84, 72, 52, 0.34))
    drop-shadow(0 6px 8px rgba(84, 72, 52, 0.20))
    drop-shadow(0 0 22px rgba(214, 178, 108, 0.24));
}

/* Plano medio */
.hero-bottle.is-mid { z-index: 3; }

/* Al fondo: desenfocada y desaturada → profundidad de campo */
.hero-bottle.is-back { z-index: 1; }
.hero-bottle.is-back .hero-bottle-img {
  filter: drop-shadow(0 14px 20px rgba(84, 72, 52, 0.22)) blur(3.5px) saturate(0.7);
  opacity: 0.42;
}

/* Al fondo Y sin recortar (hoy solo Eclaire): se disimula más, porque su
   foto arrastra el fondo editorial oscuro y sobre el mármol se nota.
   En cuanto tenga data-cutout="true" esta regla deja de aplicarle sola. */
.hero-bottle.is-back:not([data-cutout="true"]) .hero-bottle-img {
  filter: drop-shadow(0 14px 20px rgba(84, 72, 52, 0.18)) blur(6px) saturate(0.45);
  opacity: 0.26;
}
.hero-bottle.is-back .hero-bottle-reflect { opacity: 0.08; }

/* Hover: insinúa que es clicable, sin robarle protagonismo al click */
.hero-bottle:hover .hero-bottle-img,
.hero-bottle:focus-visible .hero-bottle-img {
  transform: rotate(var(--tilt, 0deg)) scale(1.06);
  filter:
    drop-shadow(0 26px 26px rgba(84, 72, 52, 0.32))
    drop-shadow(0 0 26px rgba(214, 178, 108, 0.45));
}
.hero-bottle.is-back:hover .hero-bottle-img,
.hero-bottle.is-back:focus-visible .hero-bottle-img { opacity: 0.8; }

.hero-bottle:focus-visible { outline: none; }

/* Seleccionada: se detiene la flotación, crece y gana halo dorado */
.hero-bottle.is-active { z-index: 6; }
.hero-bottle.is-active .hero-bottle-float { animation-play-state: paused; }
.hero-bottle.is-active .hero-bottle-img {
  transform: rotate(var(--tilt, 0deg)) scale(1.14);
  filter:
    drop-shadow(0 30px 30px rgba(84, 72, 52, 0.34))
    drop-shadow(0 0 16px rgba(255, 240, 208, 0.9))
    drop-shadow(0 0 40px rgba(200, 162, 88, 0.55));
  opacity: 1;
}
.hero-bottle.is-active .hero-bottle-reflect { opacity: 0.3; }

/* ---------- Animaciones de flotación (una distinta por botella) ---------- */
@keyframes floatA {  /* vertical lento */
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-18px); }
}
@keyframes floatB {  /* vertical + rotación mínima */
  0%, 100% { transform: translateY(0) rotate(-1.4deg); }
  50%      { transform: translateY(-22px) rotate(1.4deg); }
}
@keyframes floatC {  /* recorrido más amplio, la pieza protagonista */
  0%, 100% { transform: translateY(6px) rotate(0.8deg); }
  50%      { transform: translateY(-20px) rotate(-0.8deg); }
}
@keyframes floatD {  /* el más lento y sutil */
  0%, 100% { transform: translateY(-6px); }
  50%      { transform: translateY(12px); }
}
@keyframes floatE {  /* vertical + deriva lateral */
  0%, 100% { transform: translate(0, 0) rotate(1deg); }
  50%      { transform: translate(-12px, -16px) rotate(-1deg); }
}
@keyframes floatF {  /* fondo: apenas se mueve */
  0%, 100% { transform: translate(0, 8px); }
  50%      { transform: translate(8px, -10px); }
}

/* ---------- Animaciones "asentadas" ----------
   Las botellas apoyadas sobre los pedestales NO deben subir y bajar: si lo
   hacen se despegan de la superficie y vuelve la sensación de flotar. Estas
   curvas son de amplitud mínima (2-4px) y leen como micro-movimiento de
   cámara, no como levitación. */
@keyframes seatA {
  0%, 100% { transform: translateY(0)      rotate(0deg); }
  50%      { transform: translateY(-3px)   rotate(0.35deg); }
}
@keyframes seatB {
  0%, 100% { transform: translateY(-1px)   rotate(0.25deg); }
  50%      { transform: translateY(2px)    rotate(-0.3deg); }
}
@keyframes seatC {
  0%, 100% { transform: translate(0, 1px)  rotate(-0.3deg); }
  50%      { transform: translate(-2px, -3px) rotate(0.25deg); }
}

/* ---------- Tarjeta flotante de información ---------- */
.hero-card {
  position: absolute;
  z-index: 20;
  width: 340px;
  padding: 20px;
  border-radius: 20px;
  background: rgba(255, 254, 251, 0.80);
  -webkit-backdrop-filter: blur(22px) saturate(1.25);
          backdrop-filter: blur(22px) saturate(1.25);
  border: 1px solid rgba(192, 160, 99, 0.42);
  box-shadow:
    0 26px 60px rgba(78, 66, 46, 0.20),
    0 4px 14px rgba(78, 66, 46, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  color: var(--tinta);
  opacity: 0;
  transform: translateY(10px) scale(0.97);
  transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Filete dorado interior — detalle de marca, no un borde grueso */
.hero-card::after {
  content: '';
  position: absolute;
  inset: 6px;
  border-radius: 14px;
  border: 1px solid rgba(192, 160, 99, 0.22);
  pointer-events: none;
}

.hero-card.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.hero-card-close {
  position: absolute;
  top: 12px;
  right: 14px;
  z-index: 2;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid rgba(192, 160, 99, 0.35);
  background: rgba(255, 255, 255, 0.7);
  color: rgba(23, 20, 15, 0.55);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  transition: all 0.2s ease;
}
.hero-card-close:hover {
  background: var(--oro);
  border-color: var(--oro);
  color: #FFFFFF;
}

.hero-card-body {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.hero-card-thumb {
  flex: 0 0 76px;
  width: 76px;
  height: 94px;
  border-radius: 12px;
  overflow: hidden;
  padding: 6px;
  background: linear-gradient(160deg, #FFFFFF 0%, #F4F1EA 100%);
  border: 1px solid rgba(192, 160, 99, 0.28);
}
.hero-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.hero-card-text { min-width: 0; padding-right: 16px; }

.hero-card-text h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1.14rem;
  font-weight: 700;
  color: var(--tinta);
  line-height: 1.25;
  margin-bottom: 3px;
}

.hero-card-sub {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--oro-osc);
  font-weight: 600;
  margin-bottom: 9px;
}

.hero-card-text p {
  font-size: 0.82rem;
  line-height: 1.55;
  color: rgba(23, 20, 15, 0.68);
  font-weight: 400;
  margin-bottom: 11px;
}

.hero-card-price {
  display: block;
  font-family: 'Playfair Display', serif;
  font-size: 1.34rem;
  font-weight: 700;
  color: var(--oro-osc);
  margin-bottom: 11px;
}

.hero-card-tags { display: flex; flex-wrap: wrap; gap: 6px; }

.hero-card-tag {
  font-size: 0.67rem;
  letter-spacing: 0.5px;
  padding: 4px 11px;
  border-radius: 40px;
  border: 1px solid rgba(192, 160, 99, 0.4);
  background: rgba(192, 160, 99, 0.08);
  color: rgba(23, 20, 15, 0.7);
}

.hero-card-btn {
  position: relative;
  z-index: 2;
  display: block;
  margin-top: 16px;
  text-align: center;
  padding: 13px;
  border-radius: 40px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 1.4px;
  color: #FFFFFF;
  background: linear-gradient(135deg, #C9AC70 0%, #A9863B 55%, #8C6C28 100%);
  box-shadow: 0 8px 20px rgba(154, 123, 52, 0.28);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.hero-card-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(154, 123, 52, 0.42);
}

/* ---------- Columna de contenido ---------- */
/* Absoluto y centrado en vertical: así el texto NO empuja la altura del hero.
   Si estuviera en el flujo, en pantallas estrechas su alto obligaría al hero a
   crecer, el `aspect-ratio` dejaría de mandar y la foto volvería a recortarse
   por los lados llevándose las botellas al centro. */
.hero-lux-inner {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 100%;
  pointer-events: none; /* deja pasar el clic al fondo/botellas */
}

.hero-lux-copy {
  max-width: 470px;
  pointer-events: auto;
}

/* En escritorio el texto se pega más al borde izquierdo que el resto del sitio.
   El .container normal lo centraría en 1200px y dejaba el bloque demasiado
   hacia el centro, tapando la botella de la izquierda. */
/* (Las reglas de posición del texto ya no dependen del tamaño: viven en la
   base, junto al resto del hero, porque el diseño es el mismo a todos los
   anchos. Ver "RESPONSIVE DEL HERO" más abajo.) */

.hero-lux-copy h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2.8rem, 5.4vw, 4.6rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -1px;
  color: var(--tinta);
  margin-bottom: 20px;
}

.hero-lux-copy h1 em {
  font-style: italic;
  font-weight: 400;
  background: linear-gradient(105deg, #B99447 0%, #8C6C28 40%, #C9A961 75%, #9A7B34 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-lux-copy > p {
  font-size: 1.08rem;
  font-weight: 400;
  line-height: 1.6;
  color: rgba(23, 20, 15, 0.62);
  margin-bottom: 30px;
}
.hero-lux-copy > p strong {
  color: var(--oro-osc);
  font-weight: 600;
}

.hero-lux-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 32px;
}

.hero-lux-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 34px;
  border-radius: 60px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: #FFFFFF;
  background: linear-gradient(135deg, #C9AC70 0%, #A9863B 55%, #8C6C28 100%);
  box-shadow: 0 10px 26px rgba(154, 123, 52, 0.30);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.hero-lux-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 34px rgba(154, 123, 52, 0.45);
}
.hero-lux-btn i { font-size: 0.75rem; transition: transform 0.25s ease; }
.hero-lux-btn:hover i { transform: translateX(4px); }

.hero-lux-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 15px 30px;
  border-radius: 60px;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--tinta);
  border: 1px solid rgba(23, 20, 15, 0.22);
  background: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  transition: all 0.25s ease;
}
.hero-lux-btn-ghost:hover {
  background: var(--tinta);
  border-color: var(--tinta);
  color: #FFFFFF;
  transform: translateY(-3px);
}

.hero-lux-perks {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  margin-bottom: 18px;
}
.hero-lux-perks li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  letter-spacing: 0.4px;
  color: rgba(23, 20, 15, 0.55);
}
.hero-lux-perks i { color: var(--oro-osc); font-size: 0.85rem; }

.hero-lux-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.74rem;
  font-style: italic;
  letter-spacing: 0.3px;
  color: rgba(154, 123, 52, 0.85);
}
.hero-lux-hint i { font-size: 0.8rem; }

/* Resto del bloque antiguo de 992 px. Sus reglas del hero se han quitado:
   el `padding-top` y el `max-width: 100%` del texto venían del diseño apilado
   anterior y hoy contradicen la proporción fija del hero. */
@media (max-width: 992px) {
  .hero-card { width: 300px; }
}

/* En móvil el texto va arriba y las botellas ocupan una franja inferior
   propia, para que nunca tapen el titular ni los botones. */
/* ============================================================
   RESPONSIVE DEL HERO — UN SOLO DISEÑO A TODOS LOS TAMAÑOS

   Texto SIEMPRE a la izquierda y perfumes SIEMPRE a la derecha. No hay
   versión apilada: cuando la pantalla se estrecha, la composición no cambia,
   solo se encoge en bloque.

   Antes había tres diseños distintos (apilado en teléfono, apilado en tablet,
   superpuesto en escritorio) y el dueño lo rechazó: al ajustar la ventana la
   página se reorganizaba y "se veían demasiados errores". Ahora todo va en
   unidades `vw`, así que las proporciones se mantienen idénticas de 360 px a
   2560 px y no hay saltos de maquetación.

   La foto se ve completa siempre (ver .hero-lux-stage), por eso las zonas
   clicables usan un único juego de coordenadas: --hl/--hw/--ht/--hh.
   ============================================================ */

/* El texto arranca pegado al borde izquierdo y nunca supera el 33% del ancho.
   En la foto la botella de la izquierda (9PM) empieza en el 37%, así que con
   ese tope siempre queda holgura entre el texto y los perfumes. */
.hero-lux-inner {
  max-width: none;
  padding-left: 4.5vw;
  padding-right: 0;
}
.hero-lux-copy { max-width: min(470px, 33vw); }

/* Tipografía en vw: es lo que hace que el bloque encoja en proporción en vez
   de romperse. Los mínimos en rem existen solo para que en pantallas muy
   estrechas el texto siga siendo legible. */
.hero-lux-copy h1 {
  font-size: clamp(1.45rem, 4.3vw, 4.6rem);
  line-height: 1.04;
  margin-bottom: clamp(8px, 1.4vw, 20px);
}
.hero-lux-copy > p {
  font-size: clamp(0.68rem, 1.15vw, 1.08rem);
  line-height: 1.5;
  margin-bottom: clamp(12px, 2.1vw, 30px);
}

.hero-lux-actions {
  gap: clamp(6px, 0.9vw, 14px);
  margin-bottom: clamp(12px, 2.2vw, 32px);
}
.hero-lux-btn,
.hero-lux-btn-ghost {
  padding: clamp(7px, 1.05vw, 15px) clamp(12px, 2.4vw, 34px);
  font-size: clamp(0.56rem, 0.86vw, 0.82rem);
  letter-spacing: clamp(0.4px, 0.11vw, 1.6px);
  gap: clamp(4px, 0.7vw, 10px);
}
.hero-lux-btn i { font-size: clamp(0.5rem, 0.75vw, 0.75rem); }

.hero-lux-perks {
  gap: clamp(7px, 1.5vw, 22px);
  margin-bottom: clamp(6px, 1.25vw, 18px);
}
.hero-lux-perks li { font-size: clamp(0.53rem, 0.82vw, 0.78rem); gap: clamp(3px, 0.55vw, 8px); }
.hero-lux-perks i { font-size: clamp(0.55rem, 0.88vw, 0.85rem); }

.hero-lux-hint { font-size: clamp(0.52rem, 0.78vw, 0.74rem); gap: clamp(3px, 0.55vw, 8px); }
.hero-lux-hint i { font-size: clamp(0.55rem, 0.85vw, 0.8rem); }

/* Por debajo de ~640 px los dos botones no caben uno al lado del otro dentro
   del 33% de ancho: se apilan, pero el bloque sigue en su columna izquierda. */
@media (max-width: 640px) {
  .hero-lux-actions { flex-direction: column; align-items: flex-start; }
  .hero-lux-btn,
  .hero-lux-btn-ghost { width: 100%; justify-content: center; }
  /* La altura del hero la marca la foto, así que en pantallas estrechas es
     baja (a 390 px son ~219 px) y no cabe todo el bloque de texto.
     Se sacrifican los TRES BENEFICIOS (ocupan 3 líneas al apilarse) y se
     conserva "Toca una botella…", que es lo que avisa de que los perfumes son
     pulsables — sin esa pista nadie descubre la interacción.
     NOTA: es un apaño por la proporción apaisada de la foto. La solución buena
     es una imagen vertical propia para teléfono (ver CLAUDE.md). */
  .hero-lux-perks { display: none; }

  /* Más aire entre el texto y la botella de la izquierda (9PM), que empieza en
     el 37% del ancho: con 33% quedaban a 15 px y se veían pegados. */
  .hero-lux-copy { max-width: 30vw; }
}

/* En teléfono el hero mide ~219 px de alto (lo marca la proporción de la foto)
   y la columna de texto es estrecha, así que el subtítulo se reparte en varias
   líneas. Estos mínimos más bajos y estos márgenes más justos son lo que hace
   que quepa TODO el bloque —titular, subtítulo, los dos botones y la pista de
   "toca una botella"— sin desbordarse por arriba ni por abajo. */
@media (max-width: 480px) {
  .hero-lux-copy h1 {
    font-size: clamp(1.02rem, 4.3vw, 4.6rem);
    margin-bottom: 5px;
  }
  .hero-lux-copy > p {
    font-size: clamp(0.56rem, 1.15vw, 1.08rem);
    line-height: 1.4;
    margin-bottom: 7px;
  }
  .hero-lux-actions { gap: 4px; margin-bottom: 7px; }
  .hero-lux-btn,
  .hero-lux-btn-ghost {
    padding: 5px 10px;
    font-size: clamp(0.5rem, 0.86vw, 0.82rem);
  }
  .hero-lux-hint { font-size: clamp(0.47rem, 0.78vw, 0.74rem); line-height: 1.35; }
}

/* NO poner min-height al hero: su altura la fija el `aspect-ratio` de la foto.
   Cualquier mínimo lo hace más alto que la imagen, el navegador recorta los
   lados y las botellas se desplazan al centro, debajo del texto. */

/* La tarjeta de producto sí se acopla al pie en pantallas pequeñas: ahí no hay
   sitio para mostrarla flotando junto a la botella. */
@media (max-width: 768px) {
  /* La ficha va FIJA a la ventana, no dentro del hero.
     El hero mide ~219 px de alto en un teléfono y recorta lo que sobresale
     (`overflow: hidden`), así que la tarjeta —que es bastante más alta— salía
     cortada por arriba. Con `position: fixed` escapa de ese recorte y se
     comporta como una hoja inferior, que además es el patrón normal en móvil.
     Funciona porque .hero-lux no tiene `transform` ni `filter`: si algún día se
     le añade uno, pasaría a ser el bloque contenedor y volvería a recortarla. */
  .hero-card.is-docked {
    position: fixed;
    left: 12px !important;
    right: 12px;
    top: auto !important;
    bottom: 12px;
    width: auto;
    max-height: 78vh;
    overflow-y: auto;
    z-index: 60;
  }
  .hero-card { width: 300px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-glow,
  .hero-ray,
  .hero-bokeh,
  .hero-particle,
  .hero-bottle-float { animation: none !important; }
  .hero-card { transition: opacity 0.2s ease; transform: none; }
  .hero-card.is-open { transform: none; }
  /* El carrusel tampoco pasa solo de escena (lo corta el JS); aquí se quita
     además el fundido, para que al pulsar un punto el cambio sea seco. */
  .hero-lux-slide,
  .hero-lux-slide.is-activa { transition: none; }
  .hero-punto { transition: none; }
}

/* Botones del hero antiguo — se conservan porque los usan otras secciones
   (p. ej. "¿No sabes cuál elegir?" usa .btn-hero-whatsapp). */
.hero-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.btn-hero-primary {
  display: inline-block;
  background: #FFFFFF;
  color: #1A1A1A;
  font-weight: 600;
  font-size: 0.85rem;
  padding: 14px 36px;
  border-radius: 60px;
  letter-spacing: 1px;
  transition: all 0.25s ease;
  border: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.btn-hero-primary:hover {
  background: #F0EAE0;
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}

.btn-hero-whatsapp {
  display: inline-block;
  background: #25D366;
  color: #FFFFFF;
  font-weight: 600;
  font-size: 0.85rem;
  padding: 14px 36px;
  border-radius: 60px;
  letter-spacing: 1px;
  transition: all 0.25s ease;
  border: none;
  box-shadow: 0 4px 12px rgba(37, 211, 102, 0.25);
}

.btn-hero-whatsapp:hover {
  background: #1DA851;
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(37, 211, 102, 0.35);
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 768px) {
  .btn-hero-primary,
  .btn-hero-whatsapp {
    padding: 12px 28px;
    font-size: 0.8rem;
  }
}

@media (max-width: 480px) {
  .btn-hero-primary,
  .btn-hero-whatsapp {
    width: 100%;
    text-align: center;
  }
}

/* ---------- SECCIÓN TÍTULOS ---------- */
.section-title {
  font-family: 'Playfair Display', serif;
  font-size: 2rem;
  font-weight: 600;
  color: #1A1A1A;
  text-align: center;
  margin-bottom: 48px;
  letter-spacing: 1px;
}

/* ---------- BARRA DE CONFIANZA ---------- */
.trust-bar {
  padding: 48px 0;
  background: #FFFFFF;
  border-top: 1px solid #E8E2D9;
  border-bottom: 1px solid #E8E2D9;
}

.trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  text-align: center;
}

@media (max-width: 768px) {
  .trust-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
  }
}

.trust-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.trust-item i {
  font-size: 2.2rem;
  color: #C8A96B;
  margin-bottom: 8px;
}

.trust-item h4 {
  font-weight: 600;
  font-size: 1.05rem;
  color: #1A1A1A;
  margin-bottom: 4px;
}

.trust-item p {
  font-size: 0.9rem;
  color: #5A5A5A;
}

/* ---------- MARCAS DESTACADAS (con descripciones) ---------- */
.brands-showcase {
  padding: 60px 0;
  background: #FBF9F5;
}

.brands-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.brand-card {
  background: #FFFFFF;
  border: 1px solid #E8E2D9;
  border-radius: 16px;
  overflow: hidden;
  transition: box-shadow 0.2s, transform 0.2s;
}

.brand-card:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,0.05);
  transform: translateY(-4px);
}

.brand-image img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.brand-info {
  padding: 20px 24px 24px;
  text-align: center;
}

.brand-info h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1.4rem;
  font-weight: 600;
  color: #1A1A1A;
  margin-bottom: 8px;
}

.brand-info p {
  font-size: 0.9rem;
  color: #5A5A5A;
  margin-bottom: 16px;
}

/* ============================================
   MARCAS QUE AMAMOS – BANNER ESTÁTICO PREMIUM
   ============================================ */

.brands-love-static {
  padding: 60px 0 40px;
  background: #FBF9F5;
}

.container-full {
  max-width: 100%;
  padding: 0 24px;
  margin: 0 auto;
}

.section-title {
  font-family: 'Playfair Display', serif;
  font-size: 2.2rem;
  font-weight: 600;
  color: #1A1A1A;
  text-align: center;
  margin-bottom: 48px;
  letter-spacing: 1.5px;
}

.brands-static-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.brand-static-card {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background: #E8E2D9;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.brand-static-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
}

.brand-static-image {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  position: absolute;
  inset: 0;
}

.brand-static-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(27, 27, 27, 0.6) 0%,
    rgba(27, 27, 27, 0.2) 60%,
    rgba(27, 27, 27, 0.4) 100%
  );
  padding: 28px 24px 32px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: #FFFFFF;
}

.brand-static-titles {
  margin-bottom: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.brand-static-main {
  font-family: 'Inter', sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
  line-height: 1.1;
}

.brand-static-sub {
  font-family: 'Playfair Display', serif;
  font-size: 1.8rem;
  font-weight: 700;
  color: #1A1A1A;
  text-shadow: 0 2px 8px rgba(255, 255, 255, 0.15);
  line-height: 1.1;
}

.brand-static-desc {
  font-size: 0.85rem;
  font-weight: 300;
  line-height: 1.4;
  margin-bottom: 16px;
  opacity: 0.92;
  max-width: 90%;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.15);
  font-family: 'Inter', sans-serif;
}

.brand-static-btn {
  display: inline-block;
  background: #1A1A1A;
  color: #FFFFFF;
  font-weight: 600;
  font-size: 0.7rem;
  padding: 8px 20px;
  border-radius: 40px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  transition: all 0.25s ease;
  text-align: center;
  width: fit-content;
  text-decoration: none;
  border: none;
}

.brand-static-btn:hover {
  background: #2E2E2E;
  transform: scale(1.02);
}

/* Línea dorada decorativa */
.brands-divider {
  max-width: 1200px;
  margin: 48px auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, #C8A96B, transparent);
  opacity: 0.5;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1024px) {
  .brands-static-grid {
    gap: 16px;
  }
  .brand-static-main {
    font-size: 1.3rem;
  }
  .brand-static-sub {
    font-size: 1.5rem;
  }
  .brand-static-desc {
    font-size: 0.75rem;
  }
  .brand-static-btn {
    font-size: 0.65rem;
    padding: 6px 16px;
  }
}

@media (max-width: 768px) {
  .brands-love-static {
    padding: 40px 0 24px;
  }
  .brands-static-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  .brand-static-card {
    aspect-ratio: 3 / 4;
  }
  .brand-static-overlay {
    padding: 20px 16px 24px;
  }
  .brand-static-main {
    font-size: 1.1rem;
  }
  .brand-static-sub {
    font-size: 1.3rem;
  }
  .brand-static-desc {
    font-size: 0.7rem;
    max-width: 100%;
  }
  .brand-static-btn {
    font-size: 0.6rem;
    padding: 5px 14px;
  }
  .brands-divider {
    margin-top: 32px;
  }
}

@media (max-width: 480px) {
  .brands-static-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .brand-static-card {
    aspect-ratio: 3 / 4;
    border-radius: 12px;
  }
  .brand-static-overlay {
    padding: 14px 12px 18px;
  }
  .brand-static-main {
    font-size: 0.9rem;
  }
  .brand-static-sub {
    font-size: 1rem;
  }
  .brand-static-desc {
    font-size: 0.6rem;
    margin-bottom: 10px;
  }
  .brand-static-btn {
    font-size: 0.5rem;
    padding: 4px 12px;
  }
  .section-title {
    font-size: 1.6rem;
    margin-bottom: 28px;
  }
}

/* ---------- SLIDER "LOS MÁS BUSCADOS" ---------- */
.top-fragrances {
  padding: 60px 0;
  background: #FBF9F5;
  overflow: hidden;
}

.slider-wrapper {
  position: relative;
  padding: 0 48px;
}

.slider-container {
  overflow: hidden;
  border-radius: 12px;
}

.slider-track {
  display: flex;
  gap: 24px;
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}

.fragrance-card {
  flex: 0 0 calc((100% - 48px) / 3);
  min-width: 0;
  background: #FFFFFF;
  border-radius: 16px;
  padding: 16px 12px 20px;
  text-align: center;
  border: 1px solid #E8E2D9;
  transition: border-color 0.2s;
  position: relative;
}

.fragrance-card:hover {
  border-color: #C8A96B;
}

.fragrance-card img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: 12px;
  background: #F7F3ED;
}

.top-badge {
  display: inline-block;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: #C8A96B;
  color: #FFFFFF;
  padding: 2px 10px;
  border-radius: 20px;
  margin-top: 8px;
}

.fragrance-name {
  font-weight: 500;
  font-size: 0.9rem;
  margin-top: 6px;
  color: #1A1A1A;
}

.slider-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: #FFFFFF;
  border: 1px solid #E8E2D9;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  z-index: 10;
  color: #1A1A1A;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.slider-btn:hover {
  border-color: #C8A96B;
  background: #F7F3ED;
}

.slider-btn.prev { left: 0; }
.slider-btn.next { right: 0; }

.slider-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 24px;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #D1CDC7;
  cursor: pointer;
  transition: background 0.2s;
}

.dot.active {
  background: #C8A96B;
}

/* ---------- CATÁLOGO CON SELECTOR DE VARIANTES ---------- */
.catalog {
  padding: 80px 0;
  background: #FFFFFF;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 30px;
}

.product-card {
  background: #FFFFFF;
  border: 1px solid #E8E2D9;
  border-radius: 16px;
  overflow: hidden;
  transition: box-shadow 0.25s ease, transform 0.2s ease;
  display: flex;
  flex-direction: column;
}

.product-card:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,0.05);
  transform: translateY(-4px);
}

.product-image {
  position: relative;
  background: #F9F6F0;
  overflow: hidden;
  aspect-ratio: 4 / 5;
}

.product-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.product-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: #C8A96B;
  color: #FFFFFF;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 20px;
  letter-spacing: 0.5px;
}

.product-info {
  padding: 18px 20px 22px;
  text-align: center;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.product-info h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1.05rem;
  font-weight: 600;
  color: #1A1A1A;
  margin-bottom: 3px;
}

.product-info .brand {
  font-size: 0.78rem;
  color: #8A8A8A;
  font-weight: 500;
  margin-bottom: 1px;
}

.product-info .family {
  font-size: 0.75rem;
  color: #ABA6A0;
  margin-bottom: 8px;
}

.product-info .price {
  font-size: 0.95rem;
  font-weight: 700;
  color: #1A1A1A;
  margin-bottom: 14px;
}

.variant-selector {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 16px;
}

.variant-btn {
  background: #FBF9F5;
  border: 1px solid #E8E2D9;
  border-radius: 30px;
  padding: 6px 16px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #1A1A1A;
  cursor: pointer;
  transition: all 0.2s;
}

.variant-btn:hover {
  border-color: #C8A96B;
}

.variant-btn.active {
  background: #1A1A1A;
  color: #FFFFFF;
  border-color: #1A1A1A;
}

.product-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: auto;
}

.btn-secondary {
  display: inline-block;
  background: transparent;
  color: #1A1A1A;
  font-weight: 600;
  font-size: 0.85rem;
  padding: 10px 16px;
  border: 1.5px solid #1A1A1A;
  border-radius: 40px;
  transition: background 0.2s, color 0.2s;
  text-align: center;
  letter-spacing: 0.3px;
}

.btn-secondary:hover {
  background: #1A1A1A;
  color: #FFFFFF;
}

.btn-whatsapp-small {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #25D366;
  color: #FFFFFF;
  font-weight: 600;
  font-size: 0.8rem;
  padding: 10px 16px;
  border-radius: 40px;
  transition: background 0.2s;
  text-align: center;
}

.btn-whatsapp-small i {
  font-size: 1rem;
}

.btn-whatsapp-small:hover {
  background: #1DA851;
}

/* ---------- PRODUCTO DESTACADO "NUEVO LANZAMIENTO" ---------- */
.featured-launch {
  padding: 60px 0;
  background: #FBF9F5;
}

.launch-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: #FFFFFF;
  border: 1px solid #E8E2D9;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,0.03);
}

.launch-image {
  position: relative;
  background: #F9F6F0;
}

.launch-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.launch-badge {
  position: absolute;
  top: 20px;
  left: 20px;
  background: #1A1A1A;
  color: #C8A96B;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 6px 16px;
  border-radius: 30px;
  letter-spacing: 1px;
}

.launch-info {
  padding: 40px 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.launch-info h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1.2rem;
  font-weight: 400;
  color: #6B6B6B;
  letter-spacing: 2px;
  margin-bottom: 4px;
}

.launch-info h2 {
  font-family: 'Playfair Display', serif;
  font-size: 2.8rem;
  font-weight: 700;
  color: #1A1A1A;
  margin-bottom: 8px;
}

.launch-brand {
  font-size: 1rem;
  font-weight: 600;
  color: #C8A96B;
  margin-bottom: 24px;
}

/* ---------- CATEGORÍAS ---------- */
.categories {
  padding: 60px 0;
  background: #FFFFFF;
}

.category-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.category-card {
  background: #FBF9F5;
  border: 1px solid #E8E2D9;
  border-radius: 12px;
  padding: 28px 16px;
  text-align: center;
  transition: box-shadow 0.2s, border-color 0.2s;
}

.category-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.03);
  border-color: #C8A96B;
}

.category-card i {
  font-size: 2rem;
  color: #1A1A1A;
  margin-bottom: 8px;
}

.category-card span {
  font-weight: 500;
  font-size: 1rem;
  color: #1A1A1A;
}

/* ---------- CTA FINAL ---------- */
.cta-final {
  padding: 80px 0;
  background: #FBF9F5;
  text-align: center;
  border-top: 1px solid #E8E2D9;
}

.cta-final h2 {
  font-family: 'Playfair Display', serif;
  font-size: 2.2rem;
  font-weight: 600;
  color: #1A1A1A;
  margin-bottom: 32px;
}

/* ---------- FOOTER ---------- */
.footer {
  background: #FFFFFF;
  padding: 60px 0 32px;
  border-top: 1px solid #E8E2D9;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 40px;
}

.footer-brand h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1.4rem;
  letter-spacing: 2px;
  color: #1A1A1A;
  margin-bottom: 4px;
}

.footer-brand p {
  color: #6B6B6B;
  font-size: 0.9rem;
}

.footer-links h4 {
  font-weight: 600;
  font-size: 0.95rem;
  color: #1A1A1A;
  margin-bottom: 12px;
}

.footer-links ul li {
  margin-bottom: 8px;
}

.footer-links ul li a {
  font-size: 0.9rem;
  color: #4D4D4D;
  transition: color 0.2s;
}

.footer-links ul li a:hover {
  color: #C8A96B;
}

.footer-bottom {
  text-align: center;
  border-top: 1px solid #E8E2D9;
  padding-top: 24px;
  font-size: 0.8rem;
  color: #6B6B6B;
}

/* ---------- WHATSAPP FLOTANTE ---------- */
.whatsapp-float {
  position: fixed;
  bottom: 28px;
  right: 28px;
  background: #25D366;
  color: #FFFFFF;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  transition: background 0.2s, transform 0.2s;
  z-index: 999;
}

.whatsapp-float:hover {
  background: #1DA851;
  transform: scale(1.05);
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1200px) {
  .brands-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 992px) {
  .hero-full {
    height: 70vh;
  }
  .hero-content h1 {
    font-size: 2.8rem;
  }
  .trust-grid {
    grid-template-columns: 1fr 1fr;
  }
  .category-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .launch-card {
    grid-template-columns: 1fr;
  }
  .launch-info {
    padding: 32px 24px;
  }
  .brands-grid {
    grid-template-columns: 1fr 1fr;
  }
  .fragrance-card {
    flex: 0 0 calc((100% - 24px) / 2);
  }
  .slider-wrapper {
    padding: 0 40px;
  }
}

@media (max-width: 768px) {
  .nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #FFFFFF;
    padding: 20px 24px;
    border-bottom: 1px solid #E8E2D9;
    box-shadow: 0 4px 12px rgba(0,0,0,0.02);
  }
  .nav.open {
    display: block;
  }
  .nav ul {
    flex-direction: column;
    gap: 16px;
    align-items: center;
  }
  .hamburger {
    display: flex;
  }
  .hamburger.active span:nth-child(1) {
    transform: rotate(45deg) translate(4px, 4px);
  }
  .hamburger.active span:nth-child(2) {
    opacity: 0;
  }
  .hamburger.active span:nth-child(3) {
    transform: rotate(-45deg) translate(4px, -4px);
  }
  .header-actions .btn-whatsapp-header {
    display: none;
  }
  .logo a {
    font-size: 1.1rem;
    letter-spacing: 2px;
  }
  .hero-content h1 {
    font-size: 2.2rem;
  }
  .product-grid {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  .trust-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .brands-grid {
    grid-template-columns: 1fr;
  }
  .fragrance-card {
    flex: 0 0 160px;
  }
  .slider-wrapper {
    padding: 0 20px;
  }
  .slider-btn {
    width: 32px;
    height: 32px;
    font-size: 0.8rem;
  }
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .whatsapp-float {
    width: 50px;
    height: 50px;
    font-size: 1.6rem;
    bottom: 20px;
    right: 20px;
  }
  .launch-info h2 {
    font-size: 2rem;
  }
}

@media (max-width: 480px) {
  .product-grid {
    grid-template-columns: 1fr;
  }
  .category-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .category-card {
    padding: 20px 12px;
  }
  .hero-content h1 {
    font-size: 1.8rem;
  }
  .hero-content p {
    font-size: 1rem;
  }
  .btn-primary, .btn-whatsapp {
    width: 100%;
    text-align: center;
  }
  .product-actions {
    flex-direction: column;
  }
  .fragrance-card {
    flex: 0 0 140px;
  }
  .brands-grid {
    grid-template-columns: 1fr;
  }
  .variant-selector {
    flex-wrap: wrap;
  }
  .launch-info {
    padding: 24px 16px;
  }
  .launch-info h2 {
    font-size: 1.6rem;
  }
}
/* ============================================
   MARCAS QUE AMAMOS – CON FRASCOS PNG
   ============================================ */

.brands-love {
  padding: 60px 0 40px;
  background: #FBF9F5;
}

.brands-scroll {
  display: flex;
  gap: 32px;
  overflow-x: auto;
  padding: 16px 4px 24px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

.brands-scroll::-webkit-scrollbar {
  height: 2px;
  background: transparent;
}

.brands-scroll::-webkit-scrollbar-thumb {
  background: #C8A96B;
  border-radius: 10px;
}

.brand-card {
  flex: 0 0 auto;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 80px;
  transition: transform 0.25s ease;
}

.brand-card:hover {
  transform: translateY(-6px);
}

/* Contenedor del frasco (altura fija para alinear bases) */
.bottle-container {
  height: 120px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
}

.bottle-container img {
  max-height: 100px;
  width: auto;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0px 10px 8px rgba(0, 0, 0, 0.08));
  transition: filter 0.3s ease, transform 0.3s ease;
  transform-origin: bottom center;
}

.brand-card:hover .bottle-container img {
  filter: drop-shadow(0px 16px 12px rgba(0, 0, 0, 0.12));
  transform: translateY(-5px);
}

/* Nombre de la marca */
.brand-name {
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: #1A1A1A;
  text-align: center;
  opacity: 0.8;
  transition: opacity 0.2s;
  white-space: nowrap;
}

.brand-card:hover .brand-name {
  opacity: 1;
}

/* ---------- RESPONSIVE (scroll horizontal en móvil) ---------- */
@media (max-width: 768px) {
  .brands-scroll {
    gap: 24px;
    padding: 12px 4px 20px;
  }
  .brand-card {
    min-width: 70px;
  }
  .bottle-container {
    height: 100px;
  }
  .bottle-container img {
    max-height: 80px;
  }
  .brand-name {
    font-size: 0.65rem;
  }
}

@media (max-width: 480px) {
  .brands-scroll {
    gap: 16px;
  }
  .brand-card {
    min-width: 60px;
  }
  .bottle-container {
    height: 90px;
  }
  .bottle-container img {
    max-height: 70px;
  }
  .brand-name {
    font-size: 0.6rem;
    letter-spacing: 0.8px;
  }
}
/* ---------- SUBTÍTULO DE SECCIÓN ---------- */
.section-subtitle {
  text-align: center;
  max-width: 560px;
  margin: -16px auto 40px;
  color: #6B6B6B;
  font-size: 0.95rem;
  line-height: 1.6;
}

/* ---------- ¿NO SABES CUÁL ELEGIR? ---------- */
.help-choose {
  padding: 56px 0;
  background: #1A1A1A;
}

.help-choose-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}

.help-choose-text h2 {
  font-family: 'Playfair Display', serif;
  font-size: 1.8rem;
  font-weight: 600;
  color: #FBF9F5;
  margin-bottom: 8px;
}

.help-choose-text p {
  color: #B8B8B8;
  font-size: 0.95rem;
  max-width: 480px;
  line-height: 1.6;
}

@media (max-width: 768px) {
  .help-choose-inner {
    flex-direction: column;
    text-align: center;
  }
  .help-choose-text p {
    max-width: none;
  }
}

/* ---------- CÓMO COMPRAR ---------- */
.how-to-buy {
  padding: 64px 0;
  background: #FFFFFF;
}

.how-to-buy-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 16px;
}

.how-to-buy-step {
  text-align: center;
  padding: 32px 20px;
  border: 1px solid #E8E2D9;
  border-radius: 16px;
  background: #FBF9F5;
  transition: box-shadow 0.2s, border-color 0.2s;
}

.how-to-buy-step:hover {
  border-color: #C8A96B;
  box-shadow: 0 8px 20px rgba(0,0,0,0.04);
}

.how-to-buy-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #1A1A1A;
  color: #C8A96B;
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: 16px;
}

.how-to-buy-step h4 {
  font-weight: 600;
  font-size: 1.05rem;
  color: #1A1A1A;
  margin-bottom: 8px;
}

.how-to-buy-step p {
  font-size: 0.9rem;
  color: #5A5A5A;
  line-height: 1.6;
}

@media (max-width: 768px) {
  .how-to-buy-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- BOTÓN PRIMARIO (CTA final) ---------- */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #25D366;
  color: #FFFFFF;
  font-weight: 600;
  font-size: 0.9rem;
  padding: 16px 40px;
  border-radius: 60px;
  letter-spacing: 0.5px;
  transition: all 0.25s ease;
  box-shadow: 0 4px 14px rgba(37, 211, 102, 0.25);
}

.btn-primary:hover {
  background: #1DA851;
  transform: translateY(-3px);
  box-shadow: 0 8px 22px rgba(37, 211, 102, 0.35);
}

/* ============================================
   PÁGINA DE PRODUCTO INDIVIDUAL
   ============================================ */
.breadcrumb {
  padding: 20px 0 0;
  font-size: 0.85rem;
  color: #6B6B6B;
}

.breadcrumb a {
  color: #6B6B6B;
  transition: color 0.2s;
}

.breadcrumb a:hover {
  color: #C8A96B;
}

.product-detail {
  padding: 40px 0 72px;
}

.product-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
}

.product-detail-gallery {
  position: sticky;
  top: 100px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* LA FOTO SE VE ENTERA, NO RECORTADA.
   Estas cajas llevan proporción fija 4/5 para que las dos fotos de la galería
   formen un bloque parejo, pero las fotos del proveedor NO vienen todas en esa
   proporción: de las 172 del catálogo, 89 son casi cuadradas, 39 son muy
   verticales (hasta 0.56) y solo 43 rondan el 4/5. Con `object-fit: cover`
   cada foto se ampliaba hasta llenar la caja y **se recortaba hasta un 30%**:
   a Khamrah le cortaba la caja por los lados y a Hawas la caja por arriba y el
   frasco por abajo. El dueño lo señaló — "las fotos de las plantillas quedan
   muy mal recortadas".
   Con `contain` la foto se ve completa y lo que sobra lo rellena el fondo
   crema, que es el mismo de la página, así que se lee como aire y no como un
   hueco. NO volver a poner `cover` aquí.
   (En las TARJETAS DEL CATÁLOGO sí se usa `cover` a propósito y debe quedarse
   así: ahí las fotos van en rejilla y el dueño ya rechazó el `contain` por
   dejar demasiado espacio vacío — ver CLAUDE.md §10.) */
.product-detail-main-img,
.product-detail-secondary-img {
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #F9F6F0;
}

.product-detail-main-img {
  border-radius: 20px 20px 4px 4px;
  box-shadow: 0 20px 45px -20px rgba(26, 26, 26, 0.18);
}

.product-detail-secondary-img {
  border-radius: 4px 4px 20px 20px;
  box-shadow: 0 20px 45px -20px rgba(26, 26, 26, 0.14);
}

.product-detail-main-img img,
.product-detail-secondary-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;   /* NO cambiar a cover: recorta el producto (ver arriba) */
  object-position: center;
  display: block;
}

.product-detail-badge {
  display: inline-block;
  background: #1A1A1A;
  color: #C8A96B;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 6px 16px;
  border-radius: 30px;
  letter-spacing: 1px;
  margin-bottom: 16px;
}

.product-detail-brand {
  font-size: 0.95rem;
  font-weight: 600;
  color: #C8A96B;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.product-detail-title {
  font-family: 'Playfair Display', serif;
  font-size: 2.4rem;
  font-weight: 700;
  color: #1A1A1A;
  margin-bottom: 12px;
  line-height: 1.15;
}

.product-detail-family {
  color: #5A5A5A;
  font-size: 1rem;
  margin-bottom: 28px;
}

.product-detail-price-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 10px;
}

.product-detail-price {
  font-family: 'Playfair Display', serif;
  font-size: 2rem;
  font-weight: 700;
  color: #1A1A1A;
}

.product-detail-availability {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  color: #2E8B57;
  margin-bottom: 32px;
}

.product-detail-availability::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2E8B57;
  display: inline-block;
}

.product-detail-desc {
  color: #4D4D4D;
  font-size: 0.98rem;
  line-height: 1.7;
  margin-bottom: 32px;
}

.product-detail-sizes {
  margin-bottom: 32px;
}

.product-detail-sizes h4 {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #1A1A1A;
  margin-bottom: 12px;
}

.size-options {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.size-option {
  border: 1px solid #E8E2D9;
  border-radius: 10px;
  padding: 12px 20px;
  background: #FBF9F5;
  cursor: default;
}

.size-option .size-ml {
  display: block;
  font-weight: 600;
  color: #1A1A1A;
  font-size: 0.95rem;
}

.size-option .size-price {
  display: block;
  font-size: 0.82rem;
  color: #6B6B6B;
  margin-top: 2px;
}

/* ---------- PIRÁMIDE OLFATIVA (diagrama dorado literal) ---------- */
.olfactory-pyramid {
  margin-bottom: 32px;
  padding: 34px 28px 28px;
  background: #FFFFFF;
  border: 1px solid #F0EAE0;
  border-radius: 20px;
  box-shadow: 0 16px 40px -12px rgba(26, 26, 26, 0.06);
}

.olfactory-title {
  text-align: center;
  font-family: 'Playfair Display', serif;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 1px;
  color: #1A1A1A;
  margin-bottom: 26px;
}

/* Diagrama triangular: 3 niveles apilados con clip-path, degradado dorado */
.pyramid-graphic {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 auto 24px;
}

.pyramid-tier {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  box-sizing: border-box;
}

/* ---------- ETIQUETAS DENTRO DEL TRIÁNGULO ----------
   EL PROBLEMA QUE RESUELVEN ESTAS MEDIDAS: el `clip-path` recorta, pero no
   estrecha la caja del texto. Con la geometría anterior la etiqueta de la
   SALIDA podía ocupar 104px mientras el triángulo, a la altura donde cae el
   texto, medía solo 74px: el resultado era que el texto se salía por los lados
   y se veía cortado. Al medirlo, **58 de las 64 fichas** desbordaban en la
   punta (y una en el corazón). No era un caso raro: la punta simplemente era
   demasiado estrecha para el contenido.

   LAS MEDIDAS DE LAS FRANJAS NO SE TOCAN. El primer intento fue agrandar la
   pirámide y subir la punta a 104px de alto para ganar sitio; el dueño lo
   rechazó ("queda súper ancho, súper feo") y con razón: al estirar la punta,
   las otras dos franjas quedaban como tiras finas y se perdía el equilibrio del
   dibujo. El desbordamiento se arregla por el lado del TEXTO, nunca ensanchando
   la figura.

   La solución tiene tres partes, y las tres hacen falta:

   1. `max-width` por nivel, en % del ancho de su franja. Es lo que impide por
      construcción que el texto sea más ancho que la figura, y lo que convierte
      un desbordamiento en un salto de línea. Los porcentajes salen de medir el
      ancho del recorte a la altura EXACTA donde empieza el texto (su punto más
      estrecho, porque la pirámide se cierra hacia arriba), en el peor caso, que
      es con la etiqueta a dos líneas; ver §2d del CLAUDE.md para la fórmula.
   2. Tipografía un punto más pequeña en la salida y el corazón. La del fondo
      apenas cambió: ahí nunca hubo problema, sobra sitio.
   3. La punta admite DOS LÍNEAS. Con una sola no caben dos notas a ningún
      tamaño legible sin ensanchar la pirámide, que es justo lo que no se puede
      hacer.

   Comprobado contra las 64 fichas reales: 0 desbordes, con 5px de margen en el
   caso más ajustado. Si se cambian tamaños de fuente, alturas o anchos hay que
   volver a comprobarlo midiendo, no mirando. */
.tier-label {
  color: #FFFFFF;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  text-align: center;
  text-shadow: 0 1px 3px rgba(26, 26, 26, 0.35);
}

/* Cada nota es indivisible: así la punta parte entre notas ("Frutos rojos ·" /
   "Manzana") y no a mitad de una ("Canela · Nuez" / "moscada"), que era como
   quedaba antes. El separador va pegado al final de la nota anterior para que
   ninguna línea empiece por "·". */
.tier-nota {
  white-space: nowrap;
}

/* Red de seguridad: si alguna vez una sola nota es más ancha que el hueco
   disponible, se parte por dentro en vez de salirse de la figura. Con esto y
   el `max-width`, el desbordamiento es imposible pase lo que pase con el
   contenido. */
.tier-label {
  overflow-wrap: break-word;
}

.tier-salida {
  width: 112px;
  height: 74px;
  padding-bottom: 10px;
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
  background: linear-gradient(135deg, var(--pyr-a, #F1E1BC) 0%, var(--pyr-b, #DCC08A) 100%);
}

.tier-salida .tier-label {
  font-size: 0.52rem;
  line-height: 1.2;
  max-width: 55%;
}

.tier-corazon {
  width: 212px;
  height: 68px;
  padding-bottom: 11px;
  clip-path: polygon(24% 0%, 76% 0%, 100% 100%, 0% 100%);
  background: linear-gradient(135deg, var(--pyr-b, #D9BA82) 0%, var(--pyr-c, #C8A253) 100%);
}

.tier-corazon .tier-label {
  font-size: 0.66rem;
  line-height: 1.3;
  max-width: 66%;
}

.tier-fondo {
  width: 300px;
  max-width: 100%;
  height: 64px;
  padding-bottom: 11px;
  clip-path: polygon(15% 0%, 85% 0%, 100% 100%, 0% 100%);
  background: linear-gradient(135deg, var(--pyr-c, #C4A05A) 0%, var(--pyr-d, #9C7B3D) 100%);
}

.tier-fondo .tier-label {
  font-size: 0.7rem;
  line-height: 1.3;
  max-width: 84%;
}

/* ---------- LEYENDA DE ETAPAS (debajo del diagrama) ---------- */
.pyramid-legend {
  display: flex;
  justify-content: center;
  gap: 22px;
  flex-wrap: wrap;
}

.pyramid-legend-row {
  display: flex;
  align-items: center;
  gap: 7px;
}

.legend-dot {
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.dot-salida { background: linear-gradient(135deg, var(--pyr-a, #F1E1BC), var(--pyr-b, #DCC08A)); }
.dot-corazon { background: linear-gradient(135deg, var(--pyr-b, #D9BA82), var(--pyr-c, #C8A253)); }
.dot-fondo { background: linear-gradient(135deg, var(--pyr-c, #C4A05A), var(--pyr-d, #9C7B3D)); }

.legend-label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #8A8478;
}

.product-detail-cta {
  margin-bottom: 32px;
}

.btn-whatsapp-large {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  background: #25D366;
  color: #FFFFFF;
  font-weight: 700;
  font-size: 1rem;
  padding: 18px 32px;
  border-radius: 60px;
  letter-spacing: 0.3px;
  transition: all 0.25s ease;
  box-shadow: 0 6px 18px rgba(37, 211, 102, 0.28);
  box-sizing: border-box;
}

.btn-whatsapp-large i {
  font-size: 1.3rem;
}

.btn-whatsapp-large:hover {
  background: #1DA851;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(37, 211, 102, 0.35);
}

.product-detail-trust {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  padding: 20px;
  background: #FBF9F5;
  border: 1px solid #E8E2D9;
  border-radius: 14px;
}

.product-detail-trust div {
  text-align: center;
  font-size: 0.8rem;
  color: #4D4D4D;
}

.product-detail-trust i {
  display: block;
  font-size: 1.3rem;
  color: #C8A96B;
  margin-bottom: 6px;
}

.related-products {
  padding: 56px 0 72px;
  background: #FFFFFF;
  border-top: 1px solid #E8E2D9;
}

@media (max-width: 900px) {
  .product-detail-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .product-detail-gallery {
    position: static;
  }
  .product-detail-title {
    font-size: 1.9rem;
  }
  .product-detail-trust {
    grid-template-columns: 1fr;
  }
  .btn-whatsapp-large {
    min-width: 100%;
  }
  .olfactory-pyramid {
    padding: 24px 20px;
  }
}

/* ---------- FICHA DE PRODUCTO EN TELÉFONO ----------
   El problema que resuelve: las dos fotos de la galería seguían ocupando el
   ancho completo con proporción 4/5, o sea ~420px de alto cada una. En un
   teléfono eso son casi dos pantallazos de fotos antes de ver el nombre, el
   precio o la descripción, y el cliente no llegaba a la información.

   Excepción deliberada a la plantilla: en escritorio las dos fotos van
   APILADAS (columna izquierda), pero por debajo de 640px se ponen LADO A LADO.
   Siguen leyéndose como un bloque continuo porque el radio de esquina se
   reparte entre las dos (izquierda redondeada a la izquierda, derecha a la
   derecha). Así la galería mide ~215px de alto y el precio queda a la vista
   sin desplazarse. */
@media (max-width: 640px) {
  .product-detail-grid { gap: 20px; }

  .product-detail-gallery {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .product-detail-main-img {
    border-radius: 14px 4px 4px 14px;
    box-shadow: 0 10px 24px -14px rgba(26, 26, 26, 0.18);
  }
  .product-detail-secondary-img {
    border-radius: 4px 14px 14px 4px;
    box-shadow: 0 10px 24px -14px rgba(26, 26, 26, 0.14);
  }

  .product-detail-title { font-size: 1.5rem; }
  .product-detail-price { font-size: 1.5rem; }

  /* La barra de confianza vuelve a 3 columnas: apilada gastaba tres líneas
     enteras justo debajo del botón de WhatsApp. */
  .product-detail-trust {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding: 16px 10px;
  }
  .product-detail-trust div { font-size: 0.62rem; line-height: 1.3; }
  .product-detail-trust i { font-size: 1rem; margin-bottom: 4px; }

  .perfect-for { padding: 18px 16px; margin-bottom: 24px; }
  .olfactory-pyramid { padding: 18px 14px; }

  /* "También te puede gustar": dos por fila, igual que el catálogo. Con
     minmax(280px,...) caía a una sola columna y cada relacionado ocupaba una
     pantalla. */
  .related-products { padding: 36px 0 48px; }
  .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 12px;
  }
  .product-info { padding: 12px 10px 16px; }
  .product-info h3 { font-size: 0.86rem; line-height: 1.25; }
  .product-info .brand { font-size: 0.66rem; }
  .product-info .family { font-size: 0.64rem; margin-bottom: 6px; }
  .product-info .price { font-size: 0.84rem; margin-bottom: 10px; }
  .product-actions { gap: 6px; }
  /* `white-space: nowrap` es imprescindible aquí: el texto de estos botones es
     "PEDIR POR WHATSAPP" (más largo que el "COMPRAR" del catálogo) y en una
     tarjeta de media pantalla partía en dos líneas, dejando los botones de la
     fila con alturas distintas. El tamaño está calculado para que quepa en una
     sola línea incluso a 360px. */
  .product-actions .btn-secondary,
  .product-actions .btn-whatsapp-small {
    font-size: 0.58rem;
    padding: 8px 4px;
    letter-spacing: 0.2px;
    white-space: nowrap;
  }
  .product-actions .btn-whatsapp-small { gap: 4px; }
  .product-actions .btn-whatsapp-small i { font-size: 0.72rem; }
}

/* ============================================
   PÁGINA DE CATÁLOGO COMPLETO
   ============================================ */
.catalog-header {
  padding: 48px 0 8px;
  text-align: center;
}

.catalog-header h1 {
  font-family: 'Playfair Display', serif;
  font-size: 2.4rem;
  font-weight: 700;
  color: #1A1A1A;
  margin-bottom: 10px;
}

.catalog-header p {
  color: #5A5A5A;
  font-size: 1rem;
  max-width: 560px;
  margin: 0 auto;
}

.catalog-filters {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 28px 0 8px;
}

.filter-chip {
  border: 1px solid #E8E2D9;
  background: #FFFFFF;
  color: #1A1A1A;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  padding: 10px 22px;
  border-radius: 40px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.filter-chip:hover {
  border-color: #C8A96B;
}

.filter-chip.active {
  background: #1A1A1A;
  color: #C8A96B;
  border-color: #1A1A1A;
}

.catalog-count {
  text-align: center;
  color: #6B6B6B;
  font-size: 0.85rem;
  padding-bottom: 8px;
}

.catalog-full .product-grid {
  grid-template-columns: repeat(4, 1fr);
  padding: 32px 0 72px;
}

.product-card[hidden] {
  display: none;
}

.stock-tag {
  font-size: 0.78rem;
  font-weight: 600;
  margin-bottom: 6px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.stock-tag.in-stock { color: #2E8B57; }
.stock-tag.on-request { color: #B8862B; }

.stock-tag::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  display: inline-block;
}

.empty-state {
  text-align: center;
  padding: 48px 20px;
  color: #6B6B6B;
  font-size: 0.95rem;
}

@media (max-width: 1100px) {
  .catalog-full .product-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .catalog-full .product-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  .catalog-header h1 {
    font-size: 1.9rem;
  }
}

@media (max-width: 480px) {
  .catalog-full .product-grid {
    grid-template-columns: 1fr;
  }
}

.catalog-view-all {
  text-align: center;
  margin-top: 40px;
}

/* ============================================
   TOOLBAR DE CATÁLOGO (FILTRAR + BUSCADOR)
   ============================================ */
/* La barra pasó de "botón a un lado, buscador al otro" a una FILA de atajos:
   Filtros + los chips. Por eso ya no reparte a los extremos (space-between)
   sino que alinea todo a la izquierda, como una barra de pestañas. */
.catalog-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 28px 0 0;
}

.btn-filter-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #FFFFFF;
  border: 1px solid #E8DFCF;
  color: #1A1A1A;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.4px;
  padding: 13px 24px;
  border-radius: 40px;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(26, 26, 26, 0.04);
  transition: all 0.25s ease;
}

.btn-filter-toggle i {
  color: #C8A96B;
  font-size: 0.85rem;
  transition: color 0.25s ease;
}

.btn-filter-toggle:hover {
  border-color: #C8A96B;
  box-shadow: 0 6px 18px rgba(200, 169, 107, 0.16);
}

.btn-filter-toggle.active {
  background: #1A1A1A;
  border-color: #1A1A1A;
  color: #FBF9F5;
}

.btn-filter-toggle.active i {
  color: #C8A96B;
}

.filter-count-badge {
  background: #C8A96B;
  color: #1A1A1A;
  font-size: 0.7rem;
  font-weight: 700;
  min-width: 19px;
  height: 19px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
}

.btn-filter-toggle.active .filter-count-badge {
  background: #FBF9F5;
  color: #1A1A1A;
}

.catalog-search {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #E8DFCF;
  border-radius: 40px;
  padding: 13px 22px;
  flex: 1;
  max-width: 340px;
  background: #FFFFFF;
  box-shadow: 0 2px 10px rgba(26, 26, 26, 0.04);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.catalog-search:focus-within {
  border-color: #C8A96B;
  box-shadow: 0 6px 18px rgba(200, 169, 107, 0.14);
}

.catalog-search i {
  color: #C8A96B;
  font-size: 0.85rem;
}

.catalog-search input {
  border: none;
  outline: none;
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  width: 100%;
  color: #1A1A1A;
  background: transparent;
}

.catalog-search input::placeholder {
  color: #B0AAA0;
}

/* ---------- PANEL DE FILTROS (TARJETA FLOTANTE, ACORDEÓN ELEGANTE) ---------- */
.filter-panel {
  margin-top: 22px;
  border: none;
  border-radius: 22px;
  background: #FFFFFF;
  overflow: hidden;
  box-shadow: 0 24px 60px -12px rgba(26, 26, 26, 0.14), 0 4px 16px rgba(26, 26, 26, 0.05);
}

.filter-group {
  border-bottom: 1px solid #F0EAE0;
}

.filter-group:last-of-type {
  border-bottom: none;
}

.filter-group-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: none;
  border: none;
  cursor: pointer;
  padding: 22px 28px;
  font-family: 'Playfair Display', serif;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.2px;
  color: #1A1A1A;
  transition: background 0.2s ease;
}

.filter-group-header:hover {
  background: #FBF9F5;
}

.filter-group-header .chevron-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #F5EFE3;
  transition: background 0.25s ease, transform 0.3s ease;
}

.filter-group-header i {
  color: #C8A96B;
  font-size: 0.75rem;
  transition: transform 0.3s ease;
}

.filter-group.open .filter-group-header .chevron-circle {
  background: #1A1A1A;
}

.filter-group.open .filter-group-header i {
  color: #C8A96B;
  transform: rotate(180deg);
}

.filter-group-body {
  display: none;
  padding: 4px 28px 26px;
  gap: 14px 22px;
  flex-wrap: wrap;
}

.filter-group-body-grid {
  display: none;
  grid-template-columns: repeat(3, 1fr);
}

.filter-group.open .filter-group-body {
  display: flex;
}

.filter-group.open .filter-group-body-grid {
  display: grid;
}

.filter-check {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: 'Inter', sans-serif;
  font-size: 0.88rem;
  color: #4D4D4D;
  cursor: pointer;
  user-select: none;
  padding: 6px 10px;
  margin: -6px -10px;
  border-radius: 30px;
  transition: background 0.2s ease, color 0.2s ease;
}

.filter-check:hover {
  background: #FBF9F5;
  color: #1A1A1A;
}

.filter-check input {
  width: 17px;
  height: 17px;
  accent-color: #C8A96B;
  cursor: pointer;
}

.btn-clear-filters {
  display: block;
  width: 100%;
  background: #FBF9F5;
  border: none;
  border-top: 1px solid #F0EAE0;
  color: #8A8478;
  font-family: 'Inter', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  padding: 16px;
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease;
}

.btn-clear-filters:hover {
  color: #C8A96B;
  background: #F5EFE3;
}

@media (max-width: 768px) {
  .catalog-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  .catalog-search {
    max-width: none;
  }
  .filter-group-body-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .filter-group-header {
    padding: 18px 22px;
  }
  .filter-group-body {
    padding: 4px 22px 22px;
  }
}


/* ============================================
   CATÁLOGO DINÁMICO — TARJETAS CON HOVER CROSSFADE
   (generadas por JS desde el array `products` en catalogo.html)
   ============================================ */
.perfume-grid-wrap {
  width: 100%;
  box-sizing: border-box;
  padding-left: 40px;
  padding-right: 40px;
}

.perfume-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
  padding: 8px 0 72px;
  box-sizing: border-box;
}

.perfume-card {
  background: #FFFFFF;
  text-align: center;
}

.perfume-image-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 14px;
  overflow: hidden;
  background: #F5F2EC;
}

.perfume-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.perfume-img-front {
  opacity: 1;
  z-index: 2;
  transition: opacity 400ms ease;
}

.perfume-img-back {
  opacity: 0;
  z-index: 1;
  transition: opacity 400ms ease;
}

.perfume-card:hover .perfume-img-front {
  opacity: 0;
}

.perfume-card:hover .perfume-img-back {
  opacity: 1;
}

.perfume-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 3;
  background: #C8A96B;
  color: #FFFFFF;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 20px;
  letter-spacing: 0.5px;
}

.perfume-name {
  font-family: 'Playfair Display', serif;
  font-size: 1rem;
  font-weight: 600;
  color: #1A1A1A;
  margin: 16px 0 2px;
}

.perfume-price {
  font-size: 0.95rem;
  font-weight: 700;
  color: #1A1A1A;
  margin: 0 0 4px;
}

.perfume-availability {
  font-size: 0.72rem;
  font-weight: 600;
  margin: 0 0 12px;
}

.perfume-availability.in-stock { color: #2E8B57; }
.perfume-availability.on-request { color: #B8862B; }

.perfume-rating {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-size: 0.75rem;
  color: #C8A96B;
  margin-bottom: 12px;
}

.perfume-rating .count {
  color: #9A9A9A;
  margin-left: 4px;
}

.perfume-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

@media (max-width: 1100px) {
  .perfume-grid-wrap {
    padding-left: 28px;
    padding-right: 28px;
  }
  .perfume-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 20px;
  }
}

/* ---------- TELÉFONO ----------
   Se mantienen DOS columnas hasta el ancho más pequeño. Antes aquí bajaba a
   una sola y cada tarjeta ocupaba la pantalla entera: se veía un perfume por
   pantallazo y había que desplazarse para llegar al precio. La regla es que el
   catálogo en móvil se lea igual que en escritorio —varios perfumes con su
   precio a la vista—, solo que todo más pequeño. Por eso aquí no se reorganiza
   nada: solo encogen la tipografía, los botones y los márgenes. */
@media (max-width: 560px) {
  .perfume-grid-wrap {
    padding-left: 14px;
    padding-right: 14px;
  }
  .perfume-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 12px;
    padding-bottom: 48px;
  }
  .perfume-image-wrap { border-radius: 10px; }
  .perfume-badge {
    top: 7px;
    left: 7px;
    font-size: 0.55rem;
    padding: 3px 8px;
  }
  .perfume-name {
    font-size: 0.86rem;
    margin: 10px 0 2px;
    line-height: 1.25;
  }
  .perfume-price { font-size: 0.84rem; margin-bottom: 2px; }
  .perfume-availability { font-size: 0.64rem; margin-bottom: 8px; }
  .perfume-actions { gap: 6px; }
  .perfume-actions .btn-secondary,
  .perfume-actions .btn-whatsapp-small {
    font-size: 0.66rem;
    padding: 8px 6px;
    letter-spacing: 0.2px;
  }
  .perfume-actions .btn-whatsapp-small { gap: 5px; }
  .perfume-actions .btn-whatsapp-small i { font-size: 0.8rem; }
}

/* Pantallas muy estrechas (360px y menos): mismas dos columnas, un punto más
   apretadas para que "VER DETALLE" y "COMPRAR" no partan en dos líneas. */
@media (max-width: 380px) {
  .perfume-grid-wrap {
    padding-left: 10px;
    padding-right: 10px;
  }
  .perfume-grid { gap: 18px 10px; }
  .perfume-name { font-size: 0.8rem; }
  .perfume-price { font-size: 0.79rem; }
  .perfume-actions .btn-secondary,
  .perfume-actions .btn-whatsapp-small {
    font-size: 0.61rem;
    padding: 7px 4px;
  }
}

/* ---------- "PERFECTO PARA USAR EN..." ---------- */
.perfect-for {
  margin-bottom: 32px;
  padding: 24px 26px;
  background: #FBF9F5;
  border: 1px solid #F0EAE0;
  border-radius: 18px;
}

.perfect-for-title {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #8A8478;
  margin-bottom: 14px;
}

.perfect-for-tags {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.perfect-for-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #FFFFFF;
  border: 1px solid #E8DFCF;
  color: #1A1A1A;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 7px 16px;
  border-radius: 30px;
}

.perfect-for-tag i {
  color: #C8A96B;
  font-size: 0.75rem;
}

.perfect-for-reason {
  font-size: 0.88rem;
  color: #5A5A5A;
  line-height: 1.65;
}

/* ============================================
   SECCIÓN HOMBRE / MUJER / UNISEX (index.html)
   ============================================ */
.gender-section {
  padding: 64px 0;
  background: #FFFFFF;
}

.gender-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 8px;
}

.gender-card {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  border-radius: 18px;
  overflow: hidden;
  background: #F5F2EC;
}

.gender-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.5s ease;
}

.gender-card:hover img {
  transform: scale(1.06);
}

.gender-card-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 24px;
  background: linear-gradient(to top, rgba(26,26,26,0.75) 0%, rgba(26,26,26,0.15) 55%, rgba(26,26,26,0) 100%);
}

.gender-card-label {
  font-family: 'Playfair Display', serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 6px;
}

.gender-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: #E9D4A8;
  text-transform: uppercase;
}

.gender-card-cta i {
  font-size: 0.7rem;
  transition: transform 0.25s ease;
}

.gender-card:hover .gender-card-cta i {
  transform: translateX(4px);
}

@media (max-width: 768px) {
  .gender-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .gender-card {
    aspect-ratio: 16 / 10;
  }
}

/* ============================================
   PÁGINAS LEGALES (privacidad y términos)
   ============================================
   Texto largo y denso: aquí lo único que importa es que se lea cómodo, así que
   la columna se limita a ~760px. Más ancho que eso cansa la vista; es la
   medida habitual para texto corrido. */
.legal {
  padding: 40px 0 72px;
  background: #FFFFFF;
}

.legal-inner {
  max-width: 760px;
}

.legal h1 {
  font-family: 'Playfair Display', serif;
  font-size: 2.2rem;
  font-weight: 700;
  color: #1A1A1A;
  line-height: 1.2;
  margin-bottom: 8px;
}

.legal-fecha {
  font-size: 0.82rem;
  color: #8A8478;
  margin-bottom: 28px;
}

.legal h2 {
  font-family: 'Playfair Display', serif;
  font-size: 1.25rem;
  font-weight: 600;
  color: #1A1A1A;
  margin: 34px 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #F0EAE0;
}

.legal p,
.legal li {
  font-size: 0.95rem;
  line-height: 1.75;
  color: #4D4D4D;
}

.legal p { margin-bottom: 14px; }

.legal ul,
.legal ol {
  margin: 0 0 16px 22px;
  padding: 0;
}

.legal li { margin-bottom: 8px; }
.legal ul li { list-style: disc; }
.legal ol li { list-style: decimal; }

.legal strong { color: #1A1A1A; font-weight: 600; }

.legal a {
  color: #B8862B;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Aviso de "esto todavía no está listo para publicar". Es deliberadamente
   llamativo: su única función es que sea imposible subir la página sin ver que
   faltan los datos del negocio. Se borra junto con los [COMPLETAR]. */
.legal-aviso {
  background: #FFF8E1;
  border: 1px solid #E8C86A;
  border-left: 4px solid #C8A96B;
  border-radius: 10px;
  padding: 14px 18px;
  margin-bottom: 30px;
  font-size: 0.9rem;
  line-height: 1.6;
  color: #6B5518;
}

/* Cada dato que solo puede rellenar el dueño va resaltado, por el mismo motivo
   que el aviso de arriba. */
.por-completar {
  background: #FFE9A8;
  color: #6B5518;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 4px;
}

@media (max-width: 640px) {
  .legal { padding: 26px 0 48px; }
  .legal h1 { font-size: 1.6rem; }
  .legal h2 { font-size: 1.08rem; margin-top: 26px; }
  .legal p,
  .legal li { font-size: 0.9rem; line-height: 1.7; }
  .legal ul,
  .legal ol { margin-left: 18px; }
}

/* ============================================
   BUSCADOR GLOBAL — MENÚ DESPLEGABLE DEL NAVBAR
   ============================================
   NO es una ventana modal. Se probó así y el dueño lo rechazó: quería el
   campo en la propia barra y un panel que cae justo debajo, como en la
   referencia que pasó. No volver a un overlay a pantalla completa. */

/* El campo del navbar: la palabra "Buscar" es el placeholder, la línea es el
   borde inferior y la lupa va a la derecha. */
.nav-buscar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid #D9D2C6;
  padding: 5px 2px;
  transition: border-color 0.2s;
}

.nav-buscar:focus-within { border-bottom-color: #C8A96B; }

.nav-buscar-campo {
  width: 130px;
  border: none;
  outline: none;
  background: none;
  font-family: 'Inter', sans-serif;
  font-size: 0.84rem;
  color: #1A1A1A;
  padding: 0;
}

.nav-buscar-campo::placeholder { color: #8A8478; letter-spacing: 0.3px; }

.nav-buscar i {
  font-size: 0.9rem;
  color: #8A8478;
  cursor: pointer;
  transition: color 0.2s;
}

.nav-buscar:focus-within i { color: #C8A96B; }

/* ---------- El panel ----------
   Se cuelga del <header>, que es `position: sticky` y por tanto sirve de
   bloque contenedor: así el panel acompaña a la barra al desplazarse. */
.bg-panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #FFFFFF;
  border-top: 1px solid #F0EAE0;
  border-bottom: 1px solid #E8E2D9;
  box-shadow: 0 24px 40px -18px rgba(26, 26, 26, 0.22);
  max-height: 76vh;
  overflow-y: auto;
  z-index: 120;
}

.bg-cols {
  max-width: 1180px;
  margin: 0 auto;
  padding: 22px 40px 26px;
  display: grid;
  grid-template-columns: 1fr 230px;
  gap: 34px;
}

.bg-titulo {
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: #8A8478;
  margin-bottom: 14px;
}

.bg-col-side .bg-titulo:not(:first-child) { margin-top: 22px; }

/* ---------- Resultados ----------
   Dos columnas, y la foto en 4/5 con buen tamaño: en la primera versión los
   pulgares medían 46px y el dueño dijo que no se apreciaban los perfumes. */
.bg-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 20px;
}

.bg-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px;
  border-radius: 12px;
  transition: background 0.15s;
}

.bg-item:hover { background: #FBF9F5; }

/* La foto manda: es lo que hace que el cliente reconozca el perfume de un
   vistazo, más que el nombre. Empezó en 46px, se subió a 62 y el dueño pidió
   más protagonismo todavía. */
.bg-item-foto {
  width: 84px;
  height: 105px;
  flex-shrink: 0;
  border-radius: 8px;
  overflow: hidden;
  background: #F5F2EC;
}

.bg-item-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.bg-item-txt { display: flex; flex-direction: column; min-width: 0; }

.bg-item-nombre {
  font-family: 'Playfair Display', serif;
  font-size: 0.96rem;
  font-weight: 600;
  color: #1A1A1A;
  line-height: 1.25;
}

.bg-item-marca { font-size: 0.74rem; color: #8A8478; margin-top: 2px; }

.bg-item-precio {
  font-size: 0.84rem;
  font-weight: 700;
  color: #B8862B;
  margin-top: 4px;
}

/* Lo escrito, resaltado dentro del resultado: explica de un vistazo por qué
   sale ese perfume, sobre todo cuando la coincidencia es aproximada. */
.bg-item-nombre mark {
  background: #FBEFD2;
  color: inherit;
  border-radius: 3px;
  padding: 0 1px;
}

/* ---------- Atajos y enlaces ---------- */
.bg-chips { display: flex; flex-wrap: wrap; gap: 8px; }

.bg-chip {
  background: #FBF9F5;
  border: 1px solid #EDE7DC;
  color: #4D4D4D;
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  padding: 8px 15px;
  border-radius: 40px;
  cursor: pointer;
  transition: all 0.18s;
}

.bg-chip:hover { border-color: #C8A96B; color: #1A1A1A; background: #FFFFFF; }

.bg-side-link {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 8px 0;
  background: none;
  border: none;
  font-family: 'Inter', sans-serif;
  font-size: 0.84rem;
  color: #4D4D4D;
  text-align: left;
  cursor: pointer;
  transition: color 0.15s;
}

.bg-side-link:hover { color: #B8862B; }
.bg-side-link i { font-size: 0.65rem; color: #C8A96B; }

/* ---------- Avisos y sin resultados ---------- */
.bg-aviso {
  font-size: 0.82rem;
  color: #8A8478;
  margin-bottom: 12px;
}

.bg-vacio { margin-bottom: 20px; }
.bg-vacio p { font-size: 0.92rem; color: #4D4D4D; margin-bottom: 6px; }

.bg-correccion {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-weight: 700;
  color: #B8862B;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.bg-todos {
  display: block;
  width: 100%;
  margin-top: 16px;
  padding: 12px;
  background: #1A1A1A;
  border: none;
  border-radius: 40px;
  color: #C8A96B;
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: background 0.2s;
}

.bg-todos:hover { background: #000000; }

/* ============================================
   FILTROS RÁPIDOS DEL CATÁLOGO (fila de chips)
   ============================================ */

/* Fila con desplazamiento lateral: en un teléfono los chips no caben, y es
   preferible que se arrastren en horizontal (como en cualquier tienda) a que
   se apilen en tres filas y empujen la rejilla fuera de la pantalla. */
.catalog-chips {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 2px 0;
}

.catalog-chips::-webkit-scrollbar { display: none; }

.cat-chip {
  flex-shrink: 0;
  background: #FFFFFF;
  border: 1px solid #E8DFCF;
  color: #4D4D4D;
  font-family: 'Inter', sans-serif;
  font-size: 0.84rem;
  font-weight: 500;
  padding: 12px 22px;
  border-radius: 40px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.cat-chip:hover { border-color: #C8A96B; color: #1A1A1A; }

/* El activo va en negro sólido, como en la referencia: se distingue de un
   vistazo sin necesidad de leer. */
.cat-chip.is-activa {
  background: #1A1A1A;
  border-color: #1A1A1A;
  color: #FFFFFF;
}

/* Chips TEMPORALES de marca y nota (Lattafa, Ariana Grande, Dulce…). La fila
   solo trae chips fijos de género y ocasión, así que un filtro de marca quedaba
   invisible: el cliente veía el catálogo recortado sin nada encendido y, al
   añadir otro filtro, un "no hay perfumes" que no se explicaba. Estos se pintan
   solos a partir de lo que haya marcado en el panel y se quitan de un clic.
   Reutilizan el negro de `.is-activa` a propósito —es el "activo" del sistema y
   no hace falta un color nuevo—; lo que los distingue es la ✕. */
.cat-chip-extra {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.cat-chip-x {
  font-size: 1.05rem;
  line-height: 1;
  opacity: 0.7;
}
.cat-chip-extra:hover .cat-chip-x { opacity: 1; }

@media (max-width: 900px) {
  .catalog-toolbar { padding-top: 18px; }
  .cat-chip { padding: 10px 18px; font-size: 0.8rem; }
  .btn-filter-toggle { padding: 11px 18px; font-size: 0.8rem; }
}

/* ============================================
   AVISO "CÓMO COMPRAR"
   ============================================
   Aquí SÍ es una ventana, al contrario que el buscador: el dueño pidió que
   explique los pasos sin sacar al cliente de donde esté (antes el enlace
   saltaba a la portada y, si estaba en una ficha, perdía el perfume). */
/* AVISO DE ESQUINA. Se probó como ventana centrada y como desplegable de la
   barra; las dos tapaban demasiado. Ahora es una tarjeta pequeña abajo a la
   IZQUIERDA — la derecha está ocupada por el botón flotante de WhatsApp, y
   solaparlos escondería el CTA principal del sitio.
   Al no tapar la página, se queda abierto mientras el cliente sigue mirando. */
.cc-aviso {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 300;
  width: 320px;
  max-width: calc(100vw - 40px);
  background: #FFFFFF;
  border: 1px solid #EDE7DC;
  border-radius: 16px;
  padding: 18px 20px 18px;
  box-shadow: 0 18px 44px -12px rgba(26, 26, 26, 0.28);
  animation: ccEntra 0.25s ease;
}

/* OBLIGATORIO al usar el atributo `hidden` en algo que tenga `display` propio o
   `position` fija: la regla `[hidden]{display:none}` del navegador pierde por
   especificidad y el elemento se queda visible. Ese fue el bug de "no cierra". */
.cc-aviso[hidden] { display: none; }

@keyframes ccEntra {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Zona de toque generosa: en una tarjeta pequeña la ✕ es el único control y
   tiene que acertarse a la primera, también con el dedo. */
.cc-cerrar {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: none;
  color: #A8A296;
  font-size: 0.95rem;
  cursor: pointer;
  padding: 8px;
  line-height: 1;
}

.cc-cerrar:hover { color: #1A1A1A; }

.cc-antetitulo {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: #C8A96B;
  margin-bottom: 3px;
}

.cc-titulo {
  font-family: 'Playfair Display', serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: #1A1A1A;
  margin-bottom: 14px;
}

.cc-pasos { list-style: none; margin: 0 0 16px; padding: 0; }

.cc-paso {
  display: flex;
  gap: 11px;
  padding: 9px 0;
  border-top: 1px solid #F4EFE6;
}

.cc-paso:first-child { border-top: none; padding-top: 0; }

.cc-num {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #FBF9F5;
  border: 1px solid #E8DFCF;
  color: #B8862B;
  font-size: 0.68rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cc-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }

.cc-txt strong {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.85rem;
  color: #1A1A1A;
  font-weight: 600;
}

.cc-txt strong i { color: #C8A96B; font-size: 0.78rem; }
.cc-txt span { font-size: 0.8rem; line-height: 1.45; color: #6B6B6B; }

.cc-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 11px;
  background: #25D366;
  border-radius: 40px;
  color: #FFFFFF;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  transition: background 0.2s;
}

.cc-cta:hover { background: #1DA851; }

@media (max-width: 640px) {
  /* En teléfono ocupa el ancho disponible pero sigue siendo una franja abajo,
     no una pantalla completa. Se sube un poco para no chocar con el botón
     flotante de WhatsApp. */
  /* EN TELÉFONO EL AVISO SUBE POR ENCIMA DEL BOTÓN DE WHATSAPP.
     En escritorio el aviso ocupa 320px a la izquierda y el botón flotante está
     a la derecha, así que no se rozan. En un teléfono la tarjeta pasa a ocupar
     todo el ancho (a 390px mide 366) y, con `bottom: 12px`, **tapaba el botón
     flotante de WhatsApp** — justo el CTA principal del sitio. Se midió: el
     aviso llegaba a y=842 y el botón empieza en x=320, y=760.
     Con `bottom: 92px` la tarjeta se queda por encima del botón y se ven los
     dos. Si se cambia el tamaño del botón flotante, hay que revisar este valor. */
  .cc-aviso {
    left: 12px;
    right: 12px;
    bottom: 92px;
    width: auto;
    max-width: none;
    padding: 16px 16px 16px;
  }
  .cc-txt span { font-size: 0.78rem; }
}

/* ---------- Campo del panel, solo en teléfono ----------
   En escritorio el campo vive en la barra; en móvil ahí solo cabe la lupa, así
   que el campo real se muestra aquí arriba del panel, a todo lo ancho. Los dos
   campos se mantienen sincronizados desde el JS. */
.bg-movil {
  display: none;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid #F0EAE0;
}

.bg-movil i { color: #C8A96B; font-size: 1rem; }

.bg-movil-campo {
  flex: 1;
  border: none;
  outline: none;
  background: none;
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  color: #1A1A1A;
  min-width: 0;
}

.bg-movil-campo::placeholder { color: #A8A296; }

/* Dice "Cancelar", no una ✕: junto a un campo con texto, un aspa se lee como
   "borrar lo escrito" y no como "cerrar el buscador". La palabra no deja duda. */
.bg-movil-cerrar {
  flex-shrink: 0;
  background: none;
  border: none;
  color: #8A8478;
  font-family: 'Inter', sans-serif;
  font-size: 0.82rem;
  padding: 6px 2px 6px 10px;
  line-height: 1;
  cursor: pointer;
}

.bg-movil-cerrar:hover { color: #1A1A1A; }

@media (max-width: 900px) {
  /* La columna lateral pasa debajo: a este ancho robaría sitio a los
     perfumes, que es lo que el cliente ha venido a ver. */
  .bg-cols { grid-template-columns: 1fr; gap: 22px; padding: 18px 24px 22px; }
}

@media (max-width: 640px) {
  /* EN TELÉFONO SOLO SE VE LA LUPA, NO EL CAMPO.
     El logo ocupa 199px de los ~350 útiles a 390px, así que el campo cabía
     como mucho a 66px: la palabra "Buscar" salía cortada y escribir ahí era
     incomodísimo. El dueño lo rechazó. Ahora la barra muestra únicamente la
     lupa, y al tocarla el campo aparece a ANCHO COMPLETO dentro del panel,
     que es donde de verdad hay sitio para escribir. */
  .nav-buscar {
    border-bottom: none;
    padding: 6px;
  }
  .nav-buscar-campo { display: none; }
  .nav-buscar i { font-size: 1.05rem; color: #1A1A1A; }

  .bg-cols { padding: 14px 16px 20px; }
  .bg-grid { grid-template-columns: 1fr; }
  .bg-panel { max-height: 82vh; }

  /* El campo del panel: solo existe en móvil (ver .bg-movil) */
  .bg-movil { display: block; }

  /* Aun en una sola columna la foto se mantiene grande: es el elemento que
     hace reconocible el perfume. */
  .bg-item-foto { width: 76px; height: 95px; }
}