/** Shopify CDN: Minification failed

Line 1349:0 Unexpected "<"

**/
/* ══════════════════════════════════════════════════════════════
   Caché Perfume · hero de escritorio + hero móvil (El Escaparate) + popup de Caché Match
   Los manejadores van como custom properties comentadas con ←. Los que además
   están en el schema de la sección se pisan con un <style> en línea.
   ══════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════
   INTERRUPTOR DE VISTAS
   Debajo del punto de cambio manda el HERO MÓVIL (el escaparate con cámara);
   por encima, el hero de escritorio con los puntos sobre la foto.
   Sólo cambia el HERO: de New Arrivals para abajo la página es la misma.
   ⚠️ El punto de cambio se mueve desde el schema de la sección, que reescribe
   estas dos media queries en línea.
   ══════════════════════════════════════════════════════════════ */
.v-m{ display:none; }
@media (max-width:767.98px){
  .v-d{ display:none; }
  .v-m{ display:block; }
}

/* Tokens que el popup de Caché Match necesita FUERA del scope .v-m: la ventana
   es la misma para las dos vistas y en escritorio .v-m está en display:none. */
:root{
  --beige-2:#E6D0AC;
  --bronce:#C68A50;
  --pad:20px;
  --app:520px;
}

.hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background-color:var(--beige);

  /* ═══ MANEJADORES DEL HERO ═══════════════════════════════════════
     Los dos son independientes: mover la foto NO cambia el alto.     */

  --hero-h:110svh;    /* ← ALTO del hero. Probá 100svh · 90svh · 900px  */

  --shot-y:85%;      /* ← MUEVE la foto dentro del hero. Va de 0% a 100%:
                              100% = foto pegada abajo (botellas arriba, cerca del menú)
                                0% = foto pegada arriba (botellas más abajo, lejos del menú)
                            Cualquier valor intermedio (70%, 40%…) nunca deja huecos. */

  --copy-y:30px;      /* ← MUEVE el bloque de texto (título + párrafo + botón):
                            negativo lo SUBE (-40px) · positivo lo BAJA (60px)
                            No cambia el alto del hero. */

  min-height:var(--hero-h);
}

/* La foto es un <img> (no background) para poder colgarle los puntos encima.
   Son DOS capas con la misma geometría: la foto abajo y los puntos arriba del texto
   (si los puntos fueran abajo, .shell les robaría el click).
   El par top + translateY negativo es la misma fórmula de background-position:
   con --shot-y entre 0% y 100% la foto siempre cubre el hero, sin huecos;
   sólo cambia qué parte se recorta. */
.hero__shot{
  position:absolute;
  left:0;
  top:var(--shot-y);
  transform:translateY(calc(-1 * var(--shot-y)));
  width:100%;
  pointer-events:none;                        /* sólo los dots reciben clicks */
}
.hero__shot--photo{ z-index:0; }
.hero__shot--dots{
  z-index:3;                                  /* encima de .shell (z-index:2) */
  aspect-ratio:1920/1324;                     /* misma proporción que la foto */
}
.hero__shot > img{ width:100%; height:auto; }

/* Velo crema a la izquierda: invisible sobre el fondo, protege la legibilidad
   del texto cuando el viewport es más angosto que 16:9 y la foto se recorta. */
/* .hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(90deg,
    rgba(238,220,190,.92) 0%,
    rgba(238,220,190,.55) 28%,
    rgba(238,220,190,0)   50%);
} */

.shell{
  position:relative;
  z-index:2;
  max-width:var(--maxw);
  margin-inline:auto;
}

/* ---------- Header ---------- */
.site-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
  padding-inline:var(--gutter);
  padding-block:clamp(20px, 2.2vw, 38px);
}

.logo{ display:block; }
.logo img{
  width:clamp(120px, 10vw, 192px);   /* ← tamaño del logo */
  height:auto;
  /* Es un SVG con fondo transparente, así que no necesita el mix-blend-mode:multiply
     que llevaba el PNG anterior para disimular su fondo blanco. */
}

.nav{ display:flex; align-items:center; gap:clamp(14px, 1.7vw, 33px); }
.nav a{
  position:relative;
  font-size:clamp(13px, .95vw, 18px);
  font-weight:500;
  white-space:nowrap;
  padding-block:6px;
}
.nav a::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:1.5px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .25s ease;
}
.nav a:hover::after{ transform:scaleX(1); }

.actions{ display:flex; align-items:center; gap:clamp(12px, 1.4vw, 26px); }
.actions button{
  display:grid;
  place-items:center;
  width:clamp(34px, 2.6vw, 46px);
  height:clamp(34px, 2.6vw, 46px);
  border-radius:50%;
  transition:background-color .2s ease;
}
.actions button:hover{ background:rgba(17,17,17,.08); }
.actions svg{ width:clamp(20px, 1.55vw, 29px); height:auto; }

/* ---------- Copy ---------- */
.hero__copy{
  max-width:min(52%, 1000px);
  padding-inline:var(--gutter-copy);
  padding-block:clamp(24px, 5.2vw, 100px) clamp(40px, 5vw, 90px);
  transform:translateY(var(--copy-y));        /* ← manejador --copy-y (arriba, en .hero) */
}

.hero__title{
  margin:0 0 0 0;
  font-size:65px;                             /* ← Ajusta el tamaño del título (más pequeño: 60px, más grande: 120px) */
  font-weight:var(--h1-weight);
  line-height:1.03;
  letter-spacing:-.028em;
}
.hero__title span{
  display:inline-block;
  white-space:nowrap;
}
.hero__title em{
  font-family:var(--serif);
  font-style:italic;
  font-weight:700;
  letter-spacing:-.005em;
}

.hero__text{
  margin:clamp(18px, 1.9vw, 36px) 0 0;
  max-width:34ch;
  font-size:clamp(15px, 1.1vw, 21px);
  font-weight:500;
  line-height:1.75;
  color:var(--ink-soft);
}

.btn{
  display:inline-flex;
  align-items:center;
  gap:clamp(14px, 1.3vw, 26px);
  margin-top:clamp(26px, 2.6vw, 50px);
  padding:clamp(15px, 1.45vw, 28px) clamp(24px, 2.3vw, 44px);
  border-radius:999px;
  background:var(--btn);
  color:#fff;
  font-size:clamp(15px, 1.15vw, 22px);
  font-weight:500;
  transition:transform .22s ease, background-color .22s ease;
}
.btn:hover{ background:#262626; transform:translateY(-2px); }
.btn svg{ width:clamp(20px, 1.5vw, 29px); height:auto; transition:transform .22s ease; }
.btn:hover svg{ transform:translateX(4px); }

/* La foto se reutiliza como bloque sólo en mobile */
.hero__media{ display:none; }

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .nav{ display:none; }
}

@media (max-width:900px){
  .hero{
    min-height:0;
  }
  .hero__shot{ display:none; }               /* en mobile la foto va como bloque (.hero__media) */
  .hero::before{ display:none; }

  .hero__copy{
    max-width:none;
    padding-inline:var(--gutter);
    padding-block:24px 0;
    transform:none;                          /* en mobile el texto no se desplaza */
  }
  .hero__text{ max-width:46ch; }

  .hero__media{
    display:block;
    margin-top:36px;
  }
  .hero__media img{ width:100%; }
}

/* ============================================================
   Puntos interactivos sobre la foto
   ============================================================ */

/* POSICIONES — %  medidos SOBRE LA FOTO (0% = borde izquierdo/arriba de la foto)
   --x: izquierda → derecha   |   --y: arriba → abajo                         */
/* Fila de arriba, de izquierda a derecha */
.hotspot[data-perfume="hawas"]    { --x:49.4%; --y:41.2%; }   /* Hawas Reina (negro→magenta) */
.hotspot[data-perfume="uomo"]     { --x:62.9%; --y:44.6%; }   /* Valentino Coral Fantasy (tachas) */
.hotspot[data-perfume="khair"]    { --x:77.6%; --y:43.1%; }   /* Khair Fusion (rosa, tapa dorada) */
.hotspot[data-perfume="9pm"]      { --x:91.3%; --y:41.9%; }   /* 9 PM Night Out (negro, tapa bola) */
/* Fila de abajo, de izquierda a derecha */
.hotspot[data-perfume="candee"]   { --x:46.4%; --y:82.3%; }   /* Odyssey Candee (rosa a rayas) */
.hotspot[data-perfume="mandarin"] { --x:60.9%; --y:72.9%; }   /* Odyssey Mandarin Sky (naranja) */
.hotspot[data-perfume="pacific"]  { --x:74.8%; --y:71.4%; }   /* Pacific Aura (azul/verde) */
.hotspot[data-perfume="lightblue"]{ --x:86%;   --y:73.3%; }   /* Light Blue mini (esmerilado) */

.hotspot{
  position:absolute;
  left:var(--x);
  top:var(--y);
  --dot:clamp(12px, 1.1vw, 18px);      /* ← tamaño del punto */
  --dot-glass:rgba(255,255,255,.55);   /* ← transparencia del punto: bajá el .55 para más vidrioso, subilo para más blanco */
  --dot-blur:6px;                      /* ← intensidad del desenfoque del vidrio */
  --card-w:clamp(210px, 18vw, 262px);  /* ← ancho de la tarjeta */
  --offset:20px;                        /* ← distancia entre el punto y la tarjeta */
}

/* ---------- El punto ---------- */
.hotspot__dot{
  position:absolute;
  left:0; top:0;
  width:var(--dot);
  height:var(--dot);
  transform:translate(-50%, -50%);
  border-radius:50%;
  /* Efecto vidrio: translúcido + desenfoque de lo que hay detrás */
  background:var(--dot-glass);
  -webkit-backdrop-filter:blur(var(--dot-blur)) saturate(150%);
  backdrop-filter:blur(var(--dot-blur)) saturate(150%);
  box-shadow:
    inset 0 1px 1.5px rgba(255,255,255,.9),    /* brillo superior del vidrio */
    0 0 0 1px rgba(255,255,255,.65),           /* aro claro: lo separa de las botellas oscuras */
    0 0 0 2px rgba(17,17,17,.22),              /* aro oscuro: lo separa de las botellas claras */
    0 4px 14px rgba(17,17,17,.26);             /* sombra suave */
  pointer-events:auto;
  transition:transform .25s ease, box-shadow .25s ease, background-color .25s ease;
}
.hotspot__dot::after{                   /* halo que respira */
  content:"";
  position:absolute;
  inset:-6px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.6);
  animation:dot-halo 2.6s ease-out infinite;
}
.hotspot__dot:hover{
  transform:translate(-50%, -50%) scale(1.18);
  background:rgba(255,255,255,.8);
  box-shadow:
    inset 0 1px 1.5px rgba(255,255,255,1),
    0 0 0 1px rgba(255,255,255,.85),
    0 0 0 2px rgba(17,17,17,.24),
    0 6px 20px rgba(17,17,17,.32);
}
.hotspot.is-open .hotspot__dot{
  background:rgba(17,17,17,.85);        /* casi sólido cuando está abierto */
  transform:translate(-50%, -50%) scale(1.1);
  box-shadow:
    inset 0 1px 1.5px rgba(255,255,255,.35),
    0 0 0 1px rgba(255,255,255,.8),
    0 6px 20px rgba(17,17,17,.36);
}
.hotspot.is-open .hotspot__dot::after{ animation:none; opacity:0; }

@keyframes dot-halo{
  0%   { transform:scale(.85); opacity:.9; }
  70%  { transform:scale(1.55); opacity:0; }
  100% { transform:scale(1.55); opacity:0; }
}

/* ---------- La tarjeta del perfume ---------- */
.hotspot__card{
  position:absolute;
  left:0;
  top:var(--offset);
  width:var(--card-w);
  margin-left:calc(var(--card-w) / -2);       /* centrada sobre el punto */
  padding:clamp(15px, 1.2vw, 22px);
  background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  border:1px solid rgba(17,17,17,.07);
  border-radius:14px;
  box-shadow:0 18px 44px rgba(17,17,17,.16);
  opacity:0;
  visibility:hidden;
  transform:translateY(-6px);
  transition:opacity .28s ease, transform .28s ease, visibility .28s;
  pointer-events:none;
}
.hotspot--up .hotspot__card{                  /* abre hacia arriba */
  top:auto;
  bottom:var(--offset);
  transform:translateY(6px);
}
.hotspot--left .hotspot__card{                /* pegada a la izquierda del punto */
  margin-left:calc(var(--card-w) * -.82);
}
.hotspot.is-open .hotspot__card{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
  pointer-events:auto;
}

.card__name{
  margin:0;
  font-size:clamp(15px, 1.05vw, 19px);
  font-weight:600;
  line-height:1.25;
  letter-spacing:-.01em;
}
.card__meta{
  margin:6px 0 0;
  font-size:clamp(10px, .68vw, 12px);
  font-weight:600;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--ink-soft);
  opacity:.72;
}
.card__notes{
  margin:12px 0 0;
  font-size:clamp(12px, .82vw, 14px);
  line-height:1.6;
  color:var(--ink-soft);
}
.card__foot{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  margin-top:14px;
  padding-top:12px;
  border-top:1px solid rgba(17,17,17,.09);
}
.card__price{
  font-size:clamp(14px, 1vw, 18px);
  font-weight:700;
}

/* ============================================================
   Caché Match — tarjeta cuadrada que gira
   ============================================================ */
/* Era una pastilla alargada (cuadrito + texto al lado) y el dueño la pidió como un solo CUADRADO:
   de frente sólo la botella con un badge de flecha, y al PASAR EL MOUSE la tarjeta GIRA y muestra
   el texto con su llamada a la acción.

   El giro es 3D de CSS: .match pone la perspectiva, .match__card rota 180° y cada cara lleva
   backface-visibility:hidden para que sólo se vea la que mira al frente.

   La cara de adelante NO es interactiva (es un <div>): lo único que se puede clicar o enfocar es el
   CTA de atrás. Eso simplificó bastante — antes la de adelante era un botón y hacía falta el
   atributo `inert` para que la cara oculta no quedara en el tabulador. Ahora sólo hay un elemento
   focalizable en toda la tarjeta y `:focus-within` la gira cuando le llega el turno. */
.match{
  /* ═══ MANEJADORES ═══ */
  --match-top:clamp(20px, 2vw, 34px);    /* ← separación con el botón "Explore Perfumes" */
  --match-size:min(175px, 34vw);         /* ← LADO del cuadrado. Chico a propósito: al lado van a
                                                ir MÁS recuadros, así que la tarjeta no puede
                                                comerse el ancho del hero. Si lo subís, medí que el
                                                texto del dorso siga cabiendo (la cara recorta con
                                                overflow:hidden y se corta en silencio). */
  --match-flip:.62s;                     /* ← cuánto tarda el giro (.3s rápido · 1s lento) */
  --match-radius:clamp(18px, 1.6vw, 26px);/* ← redondeo de la tarjeta */
  --match-glass:.36;                     /* ← CUÁNTO VIDRIO: cuanto MÁS BAJO, más se ve el fondo y
                                                más cristal parece. .28 apenas velado · .36 vidrio
                                                marcado · .6 lechoso · 1 blanco opaco */
  --match-blur:30px;                     /* ← desenfoque del vidrio. Cuanto más alto, más "helado"
                                                y más legible el texto encima. Es lo que compensa
                                                bajar --match-glass sin perder el contraste */
  /* La botella, dentro de la cara de adelante */
  --match-zoom:1.12;                     /* ← tamaño de la botella. El PNG trae margen vacío propio
                                                (~11% arriba y abajo), así que hace falta pasar de 1
                                                para que llene el cuadrado */
  --match-tilt:-9deg;                    /* ← inclinación (negativo gira a la izquierda) */
  --match-shift-x:0%;                    /* ← corre la botella a los lados */
  --match-shift-y:-2%;                   /* ← negativo la sube */

  width:var(--match-size);
  aspect-ratio:1;                        /* el cuadrado */
  margin-top:var(--match-top);
  perspective:1200px;                    /* la profundidad del giro vive acá */
}

.match__card{
  position:relative;
  width:100%;
  height:100%;
  transform-style:preserve-3d;
  transition:transform var(--match-flip) cubic-bezier(.4, .05, .2, 1);
}
/* GIRA AL PASAR EL MOUSE. Tres disparadores, y cada uno cubre un caso:
     · :hover          → escritorio. Va dentro de @media (hover:hover) porque en táctil el :hover
                         se queda "pegado" después de tocar y la tarjeta no volvería.
     · :focus-within   → teclado. Al tabular hasta el CTA la tarjeta gira sola y el enlace queda a
                         la vista; si no, el foco caería en algo invisible.
     · .is-flip        → táctil, donde no hay hover: lo pone el JS al tocar la tarjeta. Sin esto el
                         CTA sería inalcanzable en un teléfono. */
.match:focus-within .match__card,
.match.is-flip .match__card{ transform:rotateY(180deg); }

@media (hover:hover) and (pointer:fine){
  .match:hover .match__card{ transform:rotateY(180deg); }
}

/* ---------- Las dos caras ---------- */
.match__face{
  position:absolute;
  inset:0;
  border-radius:var(--match-radius);
  overflow:hidden;
  -webkit-backface-visibility:hidden;
          backface-visibility:hidden;

  /* Vidrio: degradado diagonal en vez de blanco plano, para que se lea como cristal */
  background:linear-gradient(135deg,
    rgba(255,255,255,calc(var(--match-glass) + .09)) 0%,
    rgba(255,255,255,var(--match-glass)) 52%,
    rgba(255,255,255,calc(var(--match-glass) - .05)) 100%);
  -webkit-backdrop-filter:blur(var(--match-blur)) saturate(185%) brightness(1.06);
          backdrop-filter:blur(var(--match-blur)) saturate(185%) brightness(1.06);
  /* El aro claro en TODO el borde es lo que da el canto de cristal; sólo con el brillo de arriba
     se leía como una caja blanca. */
  /* Sólo luces interiores: el canto de cristal y el reflejo de abajo. Sin sombra proyectada, a
     pedido del dueño — la tarjeta se apoya en el fondo en vez de flotar sobre él. */
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.62),
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -14px 26px rgba(255,255,255,.16);
}
.match__back{ transform:rotateY(180deg); }

/* ---------- Cara de adelante: la botella y el badge ---------- */
.match__front{
  display:grid;
  place-items:center;
  padding:clamp(8px, .8vw, 13px);        /* apretado: la botella tiene que llenar el cuadrado */
  cursor:pointer;
}
.match__bottle{
  width:100%;
  height:100%;
  object-fit:contain;
  /* El PNG trae su propio margen vacío en el lienzo, así que el zoom compensa */
  transform:translate(var(--match-shift-x), var(--match-shift-y))
            rotate(var(--match-tilt))
            scale(var(--match-zoom));
  transition:transform .45s cubic-bezier(.2,.7,.3,1);
  filter:drop-shadow(0 14px 22px rgba(17,17,17,.22));
}
/* El badge de la esquina, como la referencia: círculo oscuro con la flecha en diagonal.
   Es lo único que dice "esto se puede clicar", así que no es decorativo de más. */
.match__badge{
  position:absolute;
  top:clamp(10px, .9vw, 15px);
  right:clamp(10px, .9vw, 15px);
  display:grid;
  place-items:center;
  width:clamp(26px, 2vw, 32px);
  aspect-ratio:1;
  border-radius:50%;
  background:var(--btn);
  color:#fff;
}
.match__badge svg{ width:44%; height:auto; }

/* ---------- Cara de atrás: el texto y el CTA ---------- */
.match__back{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:clamp(5px, .5vw, 8px);
  padding:clamp(12px, 1.1vw, 15px);
  text-align:left;
}
.match__title{
  margin:0;
  font-size:clamp(19px, 1.5vw, 24px);
  font-weight:500;
  line-height:1.15;
  letter-spacing:-.02em;
}
.match__title em{
  font-family:var(--serif);
  font-style:italic;
  font-weight:700;
  letter-spacing:-.005em;
}
.match__sub{
  margin:0;
  font-size:clamp(12.5px, .9vw, 14px);
  font-weight:500;
  line-height:1.4;
  color:var(--ink-soft);
}
.match__cta{
  display:inline-flex;
  align-items:center;
  gap:8px;
  align-self:flex-start;
  margin-top:clamp(6px, .7vw, 12px);
  padding:clamp(8px, .8vw, 12px) clamp(14px, 1.2vw, 20px);
  border-radius:999px;
  background:var(--btn);
  color:#fff;
  font-size:clamp(13px, .92vw, 15px);
  font-weight:600;
  white-space:nowrap;
  transition:opacity .2s ease;
}
.match__cta svg{ width:18px; height:auto; transition:transform .25s ease; }
.match__cta:hover{ opacity:.86; }
.match__cta:hover svg{ transform:translateX(4px); }

.match__cta:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }

@media (prefers-reduced-motion:reduce){
  .match__card{ transition:none; }
  .match__bottle,
  .match__cta svg{ transition:none; }
}

/* ══════════════════════════════════════════════════════════════
   HERO MÓVIL — El Escaparate
   Cámara sobre la misma foto del hero: cada botella queda bajo un foco.
   Todo va prefijado con .v-m para que no se pise con el hero de escritorio.
   ══════════════════════════════════════════════════════════════ */
.v-m{
  --beige:#EEDCBE;
  --beige-2:#E6D0AC;          /* beige un punto más tostado, para separar bloques */
  --ink:#111111;
  --ink-soft:#2E2E2E;
  --btn:#0E0E0E;
  --bronce:#C68A50;

  --sans:"Raleway", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --serif:"Times New Roman", Times, serif;

  --pad:20px;                 /* ← margen lateral de toda la página */
  --app:520px;                /* ← ancho máximo. En un monitor la demo queda centrada */
}

.v-m *, .v-m *::before, .v-m *::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
.v-m{
  margin:0;
  font-family:var(--sans);
  font-weight:500;
  color:var(--ink);
  background:var(--beige);
}
.v-m img{ display:block; max-width:100%; }
.v-m a{ color:inherit; text-decoration:none; }
.v-m button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
.v-m :focus-visible{ outline:2px solid var(--ink); outline-offset:3px; border-radius:4px; }

.v-m .app{ max-width:var(--app); margin-inline:auto; position:relative; }

.v-m .em{ font-family:var(--serif); font-style:italic; font-weight:700; letter-spacing:-.005em; }

/* ============================================================
   2 · Cabecera
   ============================================================ */
.v-m .bar{
  position:sticky;
  top:0;
  z-index:60;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:14px var(--pad);
  background:rgba(238,220,190,0);
  transition:background-color .3s ease, box-shadow .3s ease, backdrop-filter .3s ease;
}
.v-m .bar.is-stuck{                                  /* al hacer scroll se vuelve vidrio */
  background:rgba(238,220,190,.72);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  backdrop-filter:blur(16px) saturate(160%);
  box-shadow:0 1px 0 rgba(17,17,17,.08);
}
.v-m .bar__logo img{ width:118px; height:auto; }
.v-m .bar__tools{ display:flex; align-items:center; gap:4px; }
.v-m .icon{
  position:relative;
  display:grid;
  place-items:center;
  width:42px; height:42px;
  border-radius:50%;
  transition:background-color .2s ease;
}
.v-m .icon:active{ background:rgba(17,17,17,.08); }
.v-m .icon svg{ width:23px; height:23px; }
.v-m .icon__count{                                    /* contador del carrito */
  position:absolute;
  top:4px; right:3px;
  min-width:17px; height:17px;
  padding:0 4px;
  border-radius:999px;
  background:var(--ink);
  color:#fff;
  font-size:10px;
  font-weight:700;
  line-height:17px;
  text-align:center;
  transform:scale(0);
  transition:transform .28s cubic-bezier(.2,1.4,.4,1);
}
.v-m .icon__count.is-on{ transform:scale(1); }

/* Menú desplegable */
.v-m .menu{
  position:fixed;
  left:50%; top:0;
  z-index:59;
  width:min(100%, var(--app));
  padding:74px var(--pad) 26px;
  transform:translateX(-50%) translateY(-102%);
  background:rgba(238,220,190,.94);
  -webkit-backdrop-filter:blur(22px) saturate(170%);
  backdrop-filter:blur(22px) saturate(170%);
  box-shadow:0 24px 60px rgba(17,17,17,.18);
  border-radius:0 0 26px 26px;
  transition:transform .42s cubic-bezier(.5,.05,.2,1);
}
.v-m .menu.is-open{ transform:translateX(-50%) translateY(0); }
.v-m .menu a{
  display:block;
  padding:11px 0;
  font-size:19px;
  border-bottom:1px solid rgba(17,17,17,.09);
}
.v-m .menu a:last-child{ border-bottom:0; }

/* ============================================================
   3 · Bloque de texto del hero
   ============================================================ */
.v-m .mh{ padding:6px var(--pad) 0; text-align:center; }

.v-m .mh__title{
  margin:0;
  font-size:clamp(38px, 11.4vw, 54px);   /* ← tamaño del título. Sin nowrap: en móvil
                                              tiene que poder cortar solo */
  font-weight:500;
  line-height:1.06;
  letter-spacing:-.03em;
}
.v-m .mh__text{
  margin:16px auto 0;
  max-width:30ch;
  font-size:16px;
  line-height:1.62;
  color:var(--ink-soft);
}

.v-m .cta{
  display:inline-flex;
  align-items:center;
  gap:14px;
  margin-top:26px;
  padding:17px 30px;
  border-radius:999px;
  background:var(--btn);
  color:#fff;
  font-size:16.5px;
  transition:transform .2s ease, box-shadow .2s ease;
  box-shadow:0 12px 26px rgba(17,17,17,.22);
}
.v-m .cta:active{ transform:translateY(1px) scale(.985); }
.v-m .cta svg{ width:26px; height:12px; }

/* Pastilla de Caché Match (misma receta de vidrio que en escritorio) */
.v-m .mm{
  --pad-g:12px;                 /* ← aire entre el borde de la pastilla y el cuadrito */
  --radius:18px;                /* ← redondeo del cuadrito. El de la pastilla se calcula solo */
  --thumb:74px;                 /* ← tamaño del cuadrito */
  --zoom:1.5;                   /* ← tamaño de la botella dentro del cuadrito */
  display:flex;
  align-items:center;
  gap:14px;
  width:100%;
  margin-top:22px;
  padding:var(--pad-g);
  padding-right:22px;
  text-align:left;
  border-radius:calc(var(--radius) + var(--pad-g));   /* radios concéntricos */
  background:linear-gradient(135deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,.34) 52%, rgba(255,255,255,.3) 100%);
  -webkit-backdrop-filter:blur(20px) saturate(170%);
  backdrop-filter:blur(20px) saturate(170%);
  border:1px solid rgba(255,255,255,.5);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.8),
    0 0 0 1px rgba(17,17,17,.05),
    0 14px 36px rgba(17,17,17,.13);
  transition:transform .2s ease;
}
.v-m .mm:active{ transform:scale(.985); }
.v-m .mm__thumb{
  flex:0 0 auto;
  display:grid; place-items:center;
  width:var(--thumb); height:var(--thumb);
  padding:calc(var(--thumb) * .05);
  border-radius:var(--radius);
  overflow:visible;
  background:
    radial-gradient(115% 95% at 20% 15%, rgba(255,255,255,.45) 0%, rgba(255,255,255,0) 58%),
    linear-gradient(140deg, #E3B67D 0%, #C68A50 50%, #A96B37 100%);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.35), inset 0 -6px 14px rgba(90,50,20,.18);
}
.v-m .mm__thumb img{
  width:100%; height:100%;
  object-fit:contain;
  transform:translate(2%, -6%) rotate(-13deg) scale(var(--zoom));
  filter:drop-shadow(0 6px 12px rgba(70,38,12,.38));
}
.v-m .mm__copy{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.v-m .mm__title{ font-size:22px; line-height:1.1; letter-spacing:-.02em; }
.v-m .mm__sub{ font-size:13.5px; line-height:1.35; color:var(--ink-soft); }

/* ============================================================
   4 · EL ESCAPARATE
   ------------------------------------------------------------
   .stage  ventana fija (lo que se ve)
   .lens   la foto entera, ampliada y desplazada por transform. Es la cámara.
   .spot   el foco: círculo transparente con una sombra gigante alrededor,
           por eso oscurece todo menos la botella activa.

   El JS calcula --z (zoom), --cxu/--cyu (a dónde apunta la cámara, ya
   limitados para no salirse de la foto) y --sx/--sy (dónde cae la botella
   dentro de la ventana, en px). Ver el bloque "cámara" más abajo.
   ============================================================ */
.v-m .shelf{ margin-top:38px; }

.v-m .eyebrow{
  display:flex; align-items:center; gap:10px;
  padding:0 var(--pad);
  font-size:11px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-soft); opacity:.62;
}
.v-m .eyebrow::after{ content:""; flex:1; height:1px; background:currentColor; opacity:.35; }

.v-m .shelf__hint{
  margin:9px 0 14px;
  padding:0 var(--pad);
  font-size:14px;
  line-height:1.5;
  color:var(--ink-soft);
}

.v-m .stage{
  --z:3.05;                  /* ← ZOOM de la cámara. 2.2 se ve casi toda la repisa ·
                                   3.05 una botella con sus vecinas · 4 una sola botella
                                   (y la foto empieza a verse blanda) */
  --sx:50%; --sy:50%;        /* posición de la botella dentro de la ventana (lo pone el JS) */
  --cxu:50%; --cyu:50%;      /* a dónde apunta la cámara (lo pone el JS). Estos valores son
                                sólo el arranque, antes de que el JS haga la primera cuenta */
  --spot:104px;              /* ← ancho del foco de luz. El alto es --spot-h */
  --spot-h:1.72;             /* ← proporción del foco: 1 es un círculo, 1.72 tiene forma de botella */
  --dim:rgba(40,25,10,.52);   /* ← cuánto oscurece lo que queda fuera del foco */

  position:relative;
  margin-inline:var(--pad);
  aspect-ratio:1 / 1.05;     /* ← forma de la ventana. Más alto = 1/1.25 */
  overflow:hidden;
  border-radius:24px;
  background:var(--beige);
  box-shadow:0 20px 50px rgba(17,17,17,.16), 0 0 0 1px rgba(17,17,17,.06);
  touch-action:pan-y;        /* deja el swipe horizontal para nosotros */
}

.v-m .lens{
  position:absolute;
  left:50%; top:50%;
  width:100%;
  aspect-ratio:1920 / 1324;
  transform-origin:var(--cxu) var(--cyu);
  /* Con el origen puesto en el punto al que apuntamos, el scale no lo mueve,
     y el translate lo lleva exactamente al centro de la ventana. */
  transform:translate(calc(-1 * var(--cxu)), calc(-1 * var(--cyu))) scale(var(--z));
  transition:transform .78s cubic-bezier(.52,.03,.16,1);
  will-change:transform;
}
.v-m .lens img{ width:100%; height:auto; }

/* Las tres copias de la foto no deben ser arrastrables: si el navegador arranca su
   propio "drag" de imagen, el swipe sobre el escaparate se cancela a mitad. */
.v-m .lens img, .v-m .chip__crop img, .v-m .res__crop img, .v-m .sheet__shot img{
  pointer-events:none;
  -webkit-user-drag:none;
  user-select:none;
  -webkit-user-select:none;
}

/* El foco */
.v-m .spot{
  position:absolute;
  left:0; top:0;
  width:calc(var(--spot) * 2);
  height:calc(var(--spot) * 2 * var(--spot-h));
  border-radius:50%;
  transform:translate3d(calc(var(--sx) - 50%), calc(var(--sy) - 50%), 0);
  background:radial-gradient(ellipse closest-side,
    rgba(40,25,10,0) 40%, rgba(40,25,10,.10) 60%, rgba(40,25,10,.30) 82%, var(--dim) 100%);
  box-shadow:0 0 0 999px var(--dim);   /* mismo color que el final del degradado: no se ve el corte */
  pointer-events:none;
  transition:transform .78s cubic-bezier(.52,.03,.16,1);
}
/* Velo de arriba: el nombre tiene que leerse aunque detrás haya una botella clara */
.v-m .stage::before{
  content:"";
  position:absolute; inset:0 0 auto;
  height:38%;
  z-index:3;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(24,14,4,.42) 0%, rgba(24,14,4,.12) 55%, transparent 100%);
}

/* Destello que cruza la ventana cada vez que cambia el perfume */
.v-m .stage::after{
  content:"";
  position:absolute; inset:0;
  z-index:4;
  pointer-events:none;
  background:linear-gradient(105deg, transparent 38%, rgba(255,255,255,.34) 50%, transparent 62%);
  opacity:0;
}
.v-m .stage.is-moving::after{ animation:sweep .8s ease-out; }
@keyframes sweep{
  0%   { opacity:0; transform:translateX(-42%); }
  35%  { opacity:1; }
  100% { opacity:0; transform:translateX(42%); }
}

/* Nombre y marca, arriba a la izquierda */
.v-m .stage__meta{
  position:absolute;
  left:18px; top:16px; right:18px;
  z-index:5;
  color:#fff;
  text-shadow:0 2px 14px rgba(20,12,4,.55);
  pointer-events:none;
}
.v-m .stage__brand{
  font-size:10.5px; font-weight:700;
  letter-spacing:.19em; text-transform:uppercase;
  opacity:.85;
}
.v-m .stage__name{
  margin-top:5px;
  font-size:21px; font-weight:500;
  line-height:1.15; letter-spacing:-.015em;
}

/* Pastilla del precio: sigue a la botella en horizontal */
.v-m .stage__tag{
  position:absolute;
  left:0; bottom:16px;
  z-index:5;
  display:flex; align-items:baseline; gap:8px;
  padding:9px 16px;
  border-radius:999px;
  transform:translate3d(calc(var(--tagx, var(--sx)) - 50%), 0, 0);
  background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  backdrop-filter:blur(14px) saturate(160%);
  box-shadow:0 8px 26px rgba(17,17,17,.24), inset 0 1px 0 rgba(255,255,255,.9);
  transition:transform .78s cubic-bezier(.52,.03,.16,1);
  pointer-events:none;
}
.v-m .stage__price{ font-size:17px; font-weight:700; letter-spacing:-.01em; }
.v-m .stage__size{ font-size:11px; font-weight:600; color:var(--ink-soft); opacity:.7; }

/* Flechas de la cámara */
.v-m .arrow{
  position:absolute;
  top:50%; z-index:6;
  display:grid; place-items:center;
  width:38px; height:38px;
  margin-top:-19px;
  border-radius:50%;
  background:rgba(255,255,255,.34);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.45);
  color:#fff;
  transition:opacity .25s ease, transform .2s ease;
}
.v-m .arrow:active{ transform:scale(.9); }
.v-m .arrow svg{ width:17px; height:17px; }
.v-m .arrow--prev{ left:12px; }
.v-m .arrow--next{ right:12px; }
.v-m .arrow[disabled]{ opacity:0; pointer-events:none; }

/* Los 8 puntos, dentro de la cámara.
   Se colocan en % SOBRE LA FOTO, igual que en la versión de escritorio, y se
   escalan al revés (1/--z) para que no crezcan con el zoom. */
.v-m .dot{
  position:absolute;
  left:var(--x); top:var(--y);
  z-index:2;
  width:34px; height:34px;              /* área de toque, invisible */
  transform:translate(-50%, -50%) scale(calc(1 / var(--z)));
  border-radius:50%;
}
.v-m .dot::before{                            /* el punto que se ve */
  content:"";
  position:absolute; inset:10px;
  border-radius:50%;
  background:rgba(255,255,255,.62);
  box-shadow:
    inset 0 1px 1.5px rgba(255,255,255,.9),
    0 0 0 1px rgba(255,255,255,.7),
    0 0 0 2px rgba(17,17,17,.22),
    0 3px 10px rgba(17,17,17,.3);
  transition:background-color .3s ease, transform .3s ease;
}
.v-m .dot::after{                             /* halo que respira */
  content:"";
  position:absolute; inset:6px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.65);
  animation:halo 2.8s ease-out infinite;
}
.v-m .dot{ transition:opacity .5s ease; }
.v-m .dot.is-on{ opacity:0; pointer-events:none; }   /* el foco ya señala la botella activa */
.v-m .dot.is-on::after{ animation:none; }
@keyframes halo{
  0%   { transform:scale(.8); opacity:.85; }
  70%  { transform:scale(1.9); opacity:0; }
  100% { transform:scale(1.9); opacity:0; }
}

/* ============================================================
   6 · Slider de perfumes
   ============================================================ */
.v-m .rail{
  display:flex;
  gap:12px;
  margin-top:16px;
  padding:4px var(--pad) 10px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
}
.v-m .rail::-webkit-scrollbar{ display:none; }

.v-m .chip{
  --w:118px;                  /* ← ancho de cada tarjeta del slider */
  --box:calc(var(--w) * 1.15);/* alto del recuadro de la botella */
  flex:0 0 auto;
  width:var(--w);
  scroll-snap-align:center;
  text-align:left;
  transition:transform .3s ease;
}
.v-m .chip__crop{
  display:grid;                 /* son <span>: sin display no tienen alto */
  place-items:end center;
  position:relative;
  height:var(--box);
  padding:9px 9px 13px;
  overflow:hidden;
  border-radius:16px;
  /* Baldosa de luz: un poco más clara arriba, como el fondo del estudio */
  background:
    radial-gradient(120% 80% at 50% 8%, rgba(255,255,255,.62) 0%, rgba(255,255,255,0) 62%),
    linear-gradient(170deg, #F3E3C7 0%, var(--beige-2) 100%);
  box-shadow:0 0 0 1px rgba(17,17,17,.07);
  transition:box-shadow .3s ease, transform .3s ease;
}
.v-m .chip__crop::after{             /* sombra en el suelo, para que la botella se apoye */
  content:"";
  position:absolute;
  left:50%; bottom:9px;
  width:66%; height:11px;
  transform:translateX(-50%);
  border-radius:50%;
  background:radial-gradient(ellipse closest-side, rgba(90,55,20,.34), rgba(90,55,20,0) 100%);
}
/* La botella se dibuja a su tamaño real relativo (--h) para que el set se lea
   como una repisa y no como iconos del mismo porte. */
.v-m .chip__crop img{
  position:relative;
  z-index:1;
  width:auto;
  max-width:100%;
  height:calc(var(--box) * .78 * var(--h));
  object-fit:contain;
  filter:drop-shadow(0 6px 10px rgba(70,38,12,.28));
}
.v-m .chip__name{
  margin:9px 0 0;
  font-size:12.5px;
  font-weight:600;
  line-height:1.28;
  letter-spacing:-.01em;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  min-height:2.56em;
}
.v-m .chip__price{
  display:block;
  margin-top:3px;
  font-size:13.5px;
  font-weight:700;
}
.v-m .chip.is-on .chip__crop{
  box-shadow:0 0 0 2px var(--ink), 0 12px 26px rgba(17,17,17,.22);
  transform:translateY(-4px);
}
.v-m .chip.is-on .chip__price{ color:var(--ink); }
.v-m .chip:not(.is-on) .chip__crop{ opacity:.78; }

.v-m .swipe-hint{
  display:flex; align-items:center; gap:7px;
  padding:0 var(--pad);
  margin-top:-2px;
  font-size:12px; font-weight:600;
  letter-spacing:.05em;
  color:var(--ink-soft); opacity:.6;
  transition:opacity .4s ease;
}
.v-m .swipe-hint.is-off{ opacity:0; }
.v-m .swipe-hint svg{ width:26px; height:9px; animation:nudge 1.9s ease-in-out infinite; }
@keyframes nudge{ 0%,100%{transform:translateX(0)} 50%{transform:translateX(5px)} }

/* ============================================================
   7 · Ficha del perfume activo
   ============================================================ */
.v-m .sheet{
  margin:20px var(--pad) 0;
  padding:20px 20px 22px;
  border-radius:22px;
  background:rgba(255,255,255,.5);
  border:1px solid rgba(255,255,255,.6);
  box-shadow:0 10px 30px rgba(17,17,17,.08);
}
.v-m .sheet__top{ display:flex; flex-wrap:wrap; gap:7px; }
.v-m .pill{
  padding:6px 11px;
  border-radius:999px;
  background:rgba(17,17,17,.06);
  font-size:11px; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase;
}
.v-m .pill--bronce{ background:rgba(198,138,80,.2); color:#7A4A1E; }
.v-m .sheet__body{ display:flex; align-items:center; gap:16px; margin-top:14px; }
.v-m .sheet__shot{
  --box:120px;                /* ← alto de la botella en la ficha */
  flex:0 0 84px;
  display:grid; place-items:end center;
  height:var(--box);
  position:relative;
}
.v-m .sheet__shot::after{
  content:"";
  position:absolute; left:50%; bottom:-2px;
  width:74%; height:11px;
  transform:translateX(-50%);
  border-radius:50%;
  background:radial-gradient(ellipse closest-side, rgba(90,55,20,.28), rgba(90,55,20,0) 100%);
}
.v-m .sheet__shot img{
  position:relative; z-index:1;
  width:auto; max-width:100%;
  height:calc(var(--box) * var(--h));
  object-fit:contain;
  filter:drop-shadow(0 8px 14px rgba(70,38,12,.26));
}
.v-m .sheet__notes{
  margin:0;
  font-size:15px;
  line-height:1.62;
  color:var(--ink-soft);
}
.v-m .sheet__foot{
  display:flex; align-items:center; gap:14px;
  margin-top:18px;
  padding-top:16px;
  border-top:1px solid rgba(17,17,17,.1);
}
.v-m .add{
  flex:1;
  display:flex; align-items:center; justify-content:center; gap:9px;
  padding:16px 18px;
  border-radius:999px;
  background:var(--btn);
  color:#fff;
  font-size:15.5px; font-weight:600;
  transition:transform .18s ease;
}
.v-m .add:active{ transform:scale(.975); }
.v-m .add b{ font-weight:700; }
.v-m .like{
  display:grid; place-items:center;
  width:52px; height:52px;
  border-radius:50%;
  background:rgba(17,17,17,.05);
  transition:background-color .2s ease, transform .2s ease;
}
.v-m .like svg{ width:22px; height:22px; }
.v-m .like.is-on{ background:rgba(198,138,80,.22); color:#8A4B2A; transform:scale(1.06); }


/* ============================================================
   5 · GEOMETRÍA DE LOS 8 PERFUMES
   ------------------------------------------------------------
   Un solo sitio para todo lo que es posición. Cada clase la usan tres cosas
   a la vez: el punto sobre la foto, la cámara del escaparate y el recorte de
   la miniatura del slider.

     --x / --y    dónde va el PUNTO sobre la botella
     --cx / --cy  a dónde APUNTA la cámara (el centro visual de la botella)
     --h          alto de la botella respecto de la más alta (1 = la más alta).
                  Es lo que mantiene las proporciones reales entre perfumes.

   Los dos pares van en % sobre la foto: 0% es el borde izquierdo / superior.
   Para mover algo, cambiá el número. Nada más.
   ============================================================ */
/* Fila de arriba, de izquierda a derecha */
.p--hawas{ --x:49.4%; --y:41.2%; --cx:49.0%; --cy:45.5%; --h:0.979; }
.p--uomo{ --x:62.9%; --y:44.6%; --cx:63.2%; --cy:46.8%; --h:0.874; }
.p--khair{ --x:77.6%; --y:43.1%; --cx:77.6%; --cy:47.5%; --h:1; }
.p--9pm{ --x:91.3%; --y:41.9%; --cx:91.0%; --cy:47.0%; --h:0.886; }
/* Fila de abajo, de izquierda a derecha */
.p--candee{ --x:46.4%; --y:82.3%; --cx:47.4%; --cy:76.6%; --h:0.819; }
.p--mandarin{ --x:60.9%; --y:72.9%; --cx:58.9%; --cy:75.8%; --h:0.817; }
.p--pacific{ --x:74.8%; --y:71.4%; --cx:74.5%; --cy:78.0%; --h:0.81; }
.p--lightblue{ --x:86.0%; --y:73.3%; --cx:85.4%; --cy:78.5%; --h:0.679; }


/* ============================================================
   9 · Caché Match (buscador de 3 pasos)
   ============================================================ */
.mq{
  position:fixed; inset:0; z-index:100;
  display:flex; align-items:flex-end; justify-content:center;
}
.mq[hidden]{ display:none; }
.mq__back{
  position:absolute; inset:0;
  background:rgba(17,17,17,.5);
  -webkit-backdrop-filter:blur(4px);
  backdrop-filter:blur(4px);
  opacity:0;
  transition:opacity .32s ease;
}
.mq__panel{
  position:relative;
  width:min(var(--app), 100%);
  max-height:88svh;
  overflow:auto;
  padding:26px var(--pad) calc(26px + env(safe-area-inset-bottom));
  background:var(--beige);
  border-radius:26px 26px 0 0;
  box-shadow:0 -20px 60px rgba(17,17,17,.3);
  transform:translateY(102%);
  transition:transform .42s cubic-bezier(.5,.05,.2,1);
}
.mq.is-open .mq__back{ opacity:1; }
.mq.is-open .mq__panel{ transform:translateY(0); }
.mq__grip{
  width:44px; height:4px;
  margin:0 auto 18px;
  border-radius:999px;
  background:rgba(17,17,17,.18);
}
.mq__close{
  position:absolute; top:18px; right:16px;
  display:grid; place-items:center;
  width:34px; height:34px;
  border-radius:50%;
  background:rgba(17,17,17,.07);
}
.mq__close::before, .mq__close::after{
  content:""; position:absolute; width:13px; height:1.6px; background:var(--ink);
}
.mq__close::before{ transform:rotate(45deg); }
.mq__close::after{ transform:rotate(-45deg); }

.q__step{ font-size:11px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft); opacity:.6; }
.q__title{ margin:8px 0 0; font-size:27px; font-weight:500; line-height:1.15; letter-spacing:-.02em; }
.q__opts{ display:grid; gap:10px; margin-top:20px; }
.q__opt{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:17px 20px;
  border-radius:16px;
  background:rgba(255,255,255,.55);
  border:1px solid rgba(255,255,255,.7);
  font-size:16.5px;
  text-align:left;
  transition:transform .18s ease, background-color .2s ease;
}
.q__opt:active{ transform:scale(.985); background:rgba(255,255,255,.85); }
.q__opt span{ font-size:12px; font-weight:600; color:var(--ink-soft); opacity:.65; }

/* Resultado */
.res{ display:none; text-align:center; }
.res.is-on{ display:block; }
.res__crop{
  display:grid; place-items:end center;
  position:relative;
  --box:198px;
  width:172px; height:var(--box);
  margin:16px auto 0;
  padding:14px 14px 18px;
  overflow:hidden;
  border-radius:20px;
  background:
    radial-gradient(120% 80% at 50% 8%, rgba(255,255,255,.62) 0%, rgba(255,255,255,0) 62%),
    linear-gradient(170deg, #F3E3C7 0%, var(--beige-2) 100%);
  box-shadow:0 16px 36px rgba(17,17,17,.22);
}
.res__crop::after{
  content:"";
  position:absolute; left:50%; bottom:14px;
  width:64%; height:13px;
  transform:translateX(-50%);
  border-radius:50%;
  background:radial-gradient(ellipse closest-side, rgba(90,55,20,.34), rgba(90,55,20,0) 100%);
}
.res__crop img{
  position:relative; z-index:1;
  width:auto; max-width:100%;
  height:calc(var(--box) * .78 * var(--h));
  object-fit:contain;
  filter:drop-shadow(0 8px 14px rgba(70,38,12,.3));
}
.res__name{ margin:16px 0 0; font-size:25px; font-weight:500; letter-spacing:-.02em; }
.res__why{ margin:8px auto 0; max-width:32ch; font-size:14.5px; line-height:1.6; color:var(--ink-soft); }
.res__go{
  display:inline-flex; align-items:center; gap:10px;
  margin-top:20px;
  padding:16px 26px;
  border-radius:999px;
  background:var(--btn); color:#fff;
  font-size:15.5px; font-weight:600;
}
.res__go svg{ flex:0 0 auto; width:26px; height:12px; }
.res__price{ margin:4px 0 0; font-size:17px; font-weight:700; }
.res__again{ display:block; margin:14px auto 0; font-size:13.5px; text-decoration:underline; color:var(--ink-soft); }

/* Aviso flotante */
.toast{
  position:fixed;
  left:50%; bottom:26px;
  z-index:120;
  display:flex; align-items:center; gap:9px;
  padding:13px 20px;
  border-radius:999px;
  background:rgba(17,17,17,.92);
  color:#fff;
  font-size:14px;
  white-space:nowrap;
  transform:translate(-50%, 26px);
  opacity:0;
  pointer-events:none;
  transition:transform .3s ease, opacity .3s ease;
}
.toast.is-on{ transform:translate(-50%, 0); opacity:1; }



/* ── El mismo popup, centrado, de 768px para arriba ────────────── */
@media (min-width:768px){
  .mq{ align-items:center; }
  .mq__panel{
    width:min(560px, 92vw);
    max-height:86svh;
    padding:34px 40px 40px;
    border-radius:26px;
    box-shadow:0 30px 90px rgba(17,17,17,.34);
    transform:translateY(26px) scale(.97);
    opacity:0;
    transition:transform .38s cubic-bezier(.2,.8,.2,1), opacity .28s ease;
  }
  .mq.is-open .mq__panel{ transform:none; opacity:1; }
  .mq__grip{ display:none; }
  .q__title{ font-size:clamp(24px, 2.4vw, 32px); }
  .q__opt{ cursor:pointer; }
  .q__opt:hover{ background:rgba(255,255,255,.85); }
  .res__go{ cursor:pointer; transition:transform .18s ease; }
  .res__go:hover{ transform:translateY(-2px); }
}

/* El contador del carrito sobre el icono de la barra móvil */
.v-m .icon .cart-dot{ top:2px; right:1px; }

/* ============================================================
   10 · Preferencia de movimiento reducido
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .v-m *, .v-m *::before, .v-m *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}

</style>

/* ══════════════════════════════════════════════════════════════
   Logo en SVG en línea (snippets/cache-logo.liquid)
   Se usa cuando la sección no tiene imagen cargada: el image_picker de Shopify
   no lista SVG. Hereda el mismo tamaño que llevaba el <img>.
   ══════════════════════════════════════════════════════════════ */
.logo .logo__svg{ width:clamp(120px, 10vw, 192px); height:auto; display:block; }
.v-m .bar__logo .logo__svg{ width:118px; height:auto; display:block; }