/* ═══════════════════════════════════════════════════════════════════
   EMPORIO PERFUME — hoja compartida
   Orden: tokens · base · cabecera · portada · piezas · fichas · pie
   El movimiento se controla con --p (0→1) que el motor de scroll
   escribe en cada escena; el CSS sólo lo lee.
   ═══════════════════════════════════════════════════════════════════ */

/* :root es el tema OSCURO. El claro va en html[data-tema="claro"] y es
   el que fija tema.js antes de pintar, así que es el predeterminado
   real. Se hace así para que un visitante sin JS vea el oscuro entero
   en vez de una página a medio pintar. */
:root{
  --oro:#C08A2E; --oro-cl:#E3B266; --ambar:#C4761B;
  --fondo:#0C0906; --fondo2:#120E09; --sup:#191310;
  --tx:#F8F1E7; --tx2:#B4A392; --tx3:#A2907D;
  --linea:rgba(255,255,255,.11); --linea2:rgba(255,255,255,.055);
  --sobre-oro:#1A1207;
  --velo-foto:linear-gradient(180deg,transparent 38%,rgba(12,9,6,.55) 70%,rgba(12,9,6,.94));
  --sombra:0 40px 90px -42px rgba(0,0,0,.92);
  --rejilla:rgba(255,255,255,.05);
  --placa:#FFFFFF;
  --video-op:.30;
}
html[data-tema="claro"]{
  --oro:#8A5A12; --oro-cl:#8A5A12; --ambar:#9B5A0E;
  --fondo:#F8F2E9; --fondo2:#F0E6D8; --sup:#FFFFFF;
  --tx:#1A130C; --tx2:#5B4C3F; --tx3:#6E5B4A;
  --linea:rgba(26,19,12,.15); --linea2:rgba(26,19,12,.07);
  --sobre-oro:#FFFFFF;
  --velo-foto:linear-gradient(180deg,transparent 34%,rgba(30,20,10,.38) 66%,rgba(30,20,10,.80));
  --sombra:0 40px 90px -46px rgba(70,45,15,.34);
  --rejilla:rgba(26,19,12,.05);
  --placa:transparent;
  --video-op:.46;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--fondo); color:var(--tx);
  font-family:"Inter",system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
  transition:background .45s ease,color .45s ease;
}
h1,h2,h3,h4{
  font-family:"Playfair Display","Times New Roman",serif;
  font-weight:600; margin:0; letter-spacing:-.025em; line-height:1;
}
p{margin:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
img{max-width:100%;display:block}
.mono{
  font-family:"Space Mono","SFMono-Regular",ui-monospace,monospace;
  font-size:11.5px; letter-spacing:.20em; text-transform:uppercase;
}
.env{max-width:1240px;margin:0 auto;padding:0 34px}
.env-ancho{max-width:1680px}
.eyebrow{color:var(--oro-cl);font-weight:500}

/* Revelado al entrar en pantalla. */
.rev{opacity:0;transform:translateY(26px);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1)}
.rev.visto{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rev{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* ── Cabecera ──────────────────────────────────────────────────── */
.techo{position:fixed;inset:0 0 auto;z-index:60}
.barra{
  position:relative;
  display:flex;align-items:center;gap:22px;
  padding:14px 34px;
  border-bottom:1px solid transparent;
  transition:background .3s ease,border-color .3s ease,padding .3s ease;
}
.barra.pegada{
  background:color-mix(in srgb,var(--fondo) 86%,transparent);
  backdrop-filter:blur(14px) saturate(1.5);
  border-bottom-color:var(--linea2);
}
.marca{display:flex;align-items:baseline;gap:.42em;font-family:"Playfair Display",serif;font-size:21px;letter-spacing:-.02em}
.marca i{font-style:normal;color:var(--oro-cl)}
.menu{display:flex;gap:2px;margin-left:auto;font-size:14px}
.menu a{position:relative;padding:0 12px;color:var(--tx2);transition:color .25s}
.menu a:hover,.menu a[aria-current="page"]{color:var(--tx)}
.menu a[aria-current="page"]::after{
  content:"";position:absolute;left:12px;right:12px;bottom:-6px;height:1.5px;
  background:linear-gradient(90deg,var(--oro),var(--ambar));
}
.util{display:flex;align-items:center;gap:10px}
.tema{
  width:38px;height:38px;display:grid;place-items:center;border-radius:50%;
  border:1px solid var(--linea);color:var(--tx2);transition:border-color .25s,color .25s
}
.tema:hover{border-color:var(--oro-cl);color:var(--oro-cl)}
.tema svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7}
html[data-tema="claro"] .tema .luna{display:none}
html:not([data-tema="claro"]) .tema .sol{display:none}

.btn{
  display:inline-flex;align-items:center;gap:9px;
  padding:13px 24px;border-radius:100px;font-size:14px;font-weight:500;
  border:1px solid var(--linea);color:var(--tx);
  transition:transform .3s cubic-bezier(.16,1,.3,1),border-color .3s,background .3s;
}
.btn:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--oro) 55%,transparent)}
.btn-full{background:var(--oro);color:var(--sobre-oro);border-color:transparent;font-weight:600}
.btn-full:hover{background:var(--ambar)}

.menu-boton{display:none}
.menu-panel{
  display:none;flex-direction:column;
  background:color-mix(in srgb,var(--fondo) 97%,transparent);
  backdrop-filter:blur(16px) saturate(1.5);
  border-bottom:1px solid var(--linea2);
  padding:6px 22px 18px;
}
.menu-panel[hidden]{display:none}
.menu-panel a{
  display:flex;align-items:center;min-height:52px;
  font-size:17px;font-family:"Playfair Display",serif;
  border-bottom:1px solid var(--linea2);color:var(--tx2);
}
.menu-panel a:last-child{border-bottom:0}

/* ── Portada con vídeo ligado al scroll ────────────────────────── */
.portada{position:relative;height:420vh}
.portada-fondo{position:sticky;top:0;height:100svh;overflow:hidden;z-index:0}
.portada-video{
  position:absolute;inset:0;display:block;
  width:100%;height:100%;object-fit:cover;object-position:50% 50%;
  /* El frasco viene centrado en el encuadre 16:9 y ahi choca con el
     titular. Se corre a la derecha con transform en vez de con
     object-position, porque a esta relacion de aspecto el recorte de
     cover es vertical y object-position no mueve nada en horizontal.
     La escala evita que asome el borde por la izquierda. */
  transform:scale(1.16) translateX(13%);
  background:#EADFCF url("../img/portada-poster.jpg") 50% 50%/cover no-repeat;
}
/* Velo direccional: el frasco se ve entero a la derecha y el fondo se
   apaga bajo el titular. Va POR ENCIMA del vídeo y por debajo del texto,
   que es lo que permite que el objeto invada la zona de lectura. */
.portada-velo{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(96deg,
     var(--fondo) 0%, var(--fondo) 26%,
     color-mix(in srgb,var(--fondo) 88%,transparent) 38%,
     color-mix(in srgb,var(--fondo) 52%,transparent) 52%,
     color-mix(in srgb,var(--fondo) 16%,transparent) 66%,
     transparent 78%);
}
.portada-actos{position:absolute;inset:0;z-index:2;display:flex;align-items:center;pointer-events:none}
.acto{width:100%;padding:0 34px;pointer-events:auto}
.acto-env{max-width:1240px;margin:0 auto}
.acto h1{
  font-size:clamp(46px,7.4vw,116px); line-height:.94; letter-spacing:-.035em;
  max-width:15ch;
}
.acto h1 em{font-style:italic;color:var(--oro-cl)}
.acto p{margin-top:22px;max-width:44ch;font-size:clamp(15px,1.25vw,18px);line-height:1.62;color:var(--tx2)}
.acto .mono{display:block;margin-bottom:20px}
.acto-bot{display:flex;gap:12px;margin-top:34px;flex-wrap:wrap}

/* Los dos actos se relevan con el progreso. El segundo empieza oculto. */
.acto-2{position:absolute;inset:0;display:flex;align-items:center}

.bajar{
  position:absolute;left:50%;bottom:30px;z-index:3;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:9px;color:var(--tx3);
}
.bajar span{font-family:"Space Mono",monospace;font-size:10px;letter-spacing:.2em}
.bajar i{display:block;width:1px;height:34px;background:linear-gradient(var(--tx3),transparent);animation:cae 2.1s ease-in-out infinite}
@keyframes cae{0%,100%{opacity:.25;transform:scaleY(.5)}50%{opacity:1;transform:scaleY(1)}}

/* ── Marquesina de casas ───────────────────────────────────────── */
.cinta{
  position:relative;z-index:2;background:var(--fondo);
  border-block:1px solid var(--linea2);padding:20px 0;overflow:hidden;
  display:flex;flex-direction:column;gap:10px;
}
.fila-cinta{overflow:hidden}
.cinta-in{display:flex;width:max-content;white-space:nowrap;animation:desfila 38s linear infinite}
.cinta-in span{display:flex;align-items:center;gap:44px;padding-right:44px;color:var(--tx3)}
.cinta-in b{color:var(--oro-cl);font-weight:400}
.rev-dir .cinta-in{animation-direction:reverse;animation-duration:46s}
@keyframes desfila{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.cinta-in{animation:none}}

/* ── Secciones ─────────────────────────────────────────────────── */
.seccion{position:relative;z-index:2;background:var(--fondo);padding:clamp(80px,12vh,150px) 0}
.cab{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;flex-wrap:wrap}
.cab h2{font-size:clamp(32px,4.6vw,64px);line-height:1.02}
.cab p{max-width:46ch;font-size:15.5px;line-height:1.64;color:var(--tx2)}

/* ── Manifiesto palabra por palabra ────────────────────────────── */
.manifiesto{height:260vh;position:relative;z-index:2;background:var(--fondo2)}
.manifiesto-fijo{position:sticky;top:0;height:100svh;display:grid;place-items:center;padding:0 34px}
.manifiesto-txt{
  max-width:19ch;margin:0 auto;text-align:center;
  font-family:"Playfair Display",serif;font-weight:500;
  font-size:clamp(30px,5.4vw,78px);line-height:1.1;letter-spacing:-.03em;
}
.manifiesto-txt i{
  font-style:normal;
  /* El piso nunca baja de .18 o el párrafo se vuelve ilegible. */
  opacity:clamp(.18, calc((var(--p,0) * var(--n) - var(--i)) * .55 + .18), 1);
  transition:opacity .12s linear;
}
.manifiesto-txt em{font-style:italic;color:var(--oro-cl)}

/* ── Banda cinematográfica ──────────────────────────────────────────
   Una sola sección oscura a sangre. Es el sitio donde cabe un render
   oscuro sin romper el tema claro del resto: no se aclara el metraje
   para que encaje, se le da una sección propia. En tema oscuro sigue
   funcionando igual porque ya es oscura de nacimiento. */
.banda{position:relative;z-index:2;min-height:78svh;display:grid;align-items:center;overflow:hidden;background:#0B0805}
.banda-video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:68% 50%;
  background:#0B0805 url("../img/banda-poster.jpg") 68% 50%/cover no-repeat;
}
/* El texto vive a la izquierda y el prompt reserva ahi el hueco oscuro,
   pero el velo garantiza el contraste aunque el plano se mueva. */
.banda-velo{
  position:absolute;inset:0;
  background:linear-gradient(95deg,#0B0805 0%,#0B0805 24%,
     rgba(11,8,5,.86) 40%, rgba(11,8,5,.45) 58%, transparent 76%);
}
.banda .env{position:relative;z-index:1;padding-block:clamp(70px,11vh,120px)}
.banda .mono{color:#E3B266}
.banda h2{margin-top:16px;font-size:clamp(30px,4.8vw,68px);line-height:1.02;color:#F8F1E7;max-width:16ch}
.banda h2 em{font-style:italic;color:#E3B266}
.banda p{margin-top:20px;max-width:46ch;font-size:clamp(15px,1.2vw,17.5px);line-height:1.66;color:#C6B4A0}
.banda .btn{margin-top:30px;border-color:rgba(255,255,255,.24);color:#F8F1E7}
.banda .btn:hover{border-color:#E3B266}
@media (max-width:760px){
  .banda{min-height:auto}
  .banda-video{object-position:60% 50%}
  .banda-velo{background:linear-gradient(2deg,#0B0805 0%,#0B0805 34%,rgba(11,8,5,.80) 54%,rgba(11,8,5,.34) 72%,transparent 88%)}
  .banda .env{padding-block:clamp(220px,42vh,340px) clamp(48px,8vh,76px)}
  .banda h2{max-width:13ch}
}

/* ── Riel horizontal ───────────────────────────────────────────── */
.riel{height:340vh;position:relative;z-index:2;background:var(--fondo)}
.riel-fijo{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center}
.riel-cab{padding:0 34px;margin-bottom:30px;max-width:1240px;margin-inline:auto;width:100%}
.riel-pista{
  display:flex;gap:22px;padding:0 34px;
  transform:translate3d(calc(var(--p,0) * var(--recorrido,0px) * -1),0,0);
  will-change:transform;
}

/* ── Ficha de decant ───────────────────────────────────────────── */
.ficha{
  flex:0 0 clamp(260px,25vw,330px);
  border:1px solid var(--linea2);border-radius:20px;overflow:hidden;
  background:var(--sup);display:flex;flex-direction:column;
  transition:transform .55s cubic-bezier(.16,1,.3,1),border-color .3s,box-shadow .55s;
}
.ficha:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--oro) 40%,transparent);box-shadow:var(--sombra)}
.ficha-vidrio{
  position:relative;aspect-ratio:4/5;display:grid;place-items:center;
  background:
    radial-gradient(120% 90% at 50% 8%, hsl(var(--c) / .20), transparent 62%),
    linear-gradient(180deg, color-mix(in srgb,var(--fondo2) 70%,transparent), var(--fondo2));
  overflow:hidden;
}
.ficha-ml{
  position:absolute;top:14px;left:14px;z-index:2;
  padding:5px 10px;border-radius:100px;background:var(--fondo);
  border:1px solid var(--linea2);color:var(--tx3);font-size:10px;
}
.ficha-agotado{
  position:absolute;top:14px;right:14px;z-index:2;
  padding:5px 10px;border-radius:100px;font-size:10px;
  background:color-mix(in srgb,var(--tx) 12%,transparent);color:var(--tx2);
}
.ficha-ultimas{background:color-mix(in srgb,var(--ambar) 18%,transparent);color:var(--ambar)}
html[data-tema="claro"] .ficha-ultimas{color:#8A3D06}
.ficha-txt{padding:20px 22px 24px;display:flex;flex-direction:column;flex:1}
.ficha-marca{color:var(--tx3);font-size:10.5px}
.ficha-txt h3{margin-top:8px;font-size:23px;letter-spacing:-.02em}
.ficha-fam{margin-top:6px;font-size:12.5px;color:var(--tx3)}
.ficha-notas{display:flex;flex-wrap:wrap;gap:6px;margin-top:15px}
.ficha-notas span{
  padding:4px 10px;border-radius:100px;border:1px solid var(--linea2);
  font-size:11px;color:var(--tx2);
}
.ficha-pie{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:auto;padding-top:20px}
.ficha-precio{white-space:nowrap}
.ficha-precio{font-family:"Playfair Display",serif;font-size:26px;letter-spacing:-.02em}
.ficha-precio i{font-style:normal;font-size:14px;color:var(--tx3);margin-left:4px}
.ficha .btn{padding:10px 18px;font-size:13px}
.ficha.sin .ficha-vidrio{opacity:.45;filter:grayscale(.7)}
.ficha.sin .btn{opacity:.42;pointer-events:none}

/* El decant: SVG dibujado, no una foto. Un atomizador real es un tubo
   de vidrio muy esbelto (12,5 x 1,8 cm) con collar metalico engarzado y
   pulsador; por eso el elemento se dimensiona por ALTURA y no por ancho:
   con width daba un frasco achatado que no se parecia a nada. */
.frasco{width:19.5%;height:auto;overflow:visible;
        transition:transform .6s cubic-bezier(.16,1,.3,1)}
.frasco .vidrio{fill:hsl(var(--c) / .13);stroke:hsl(var(--c) / .48);stroke-width:1.1}
.frasco .liquido{fill:hsl(var(--c) / .42)}
.frasco .tubo{fill:hsl(var(--c) / .30)}
/* El collar y el pulsador son metal, no del color de la fragancia: en
   los atomizadores reales son aluminio dorado, plateado o negro. */
.frasco .collar{fill:#C9A253}
.frasco .pulsador{fill:#B08F45}
.frasco .collar-aro{fill:#8E7132;opacity:.55}
.frasco .collar-luz{fill:#F2E2B8;opacity:.75}
.frasco .brillo{fill:#fff;opacity:.24}
html[data-tema="claro"] .frasco .brillo{opacity:.60}
.ficha:hover .frasco{transform:translateY(-5px) rotate(-1.2deg)}

/* ── Rejilla de catálogo ───────────────────────────────────────── */
.rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:22px}
.rejilla .ficha{flex:initial}

/* ── Medidor fijado ────────────────────────────────────────────── */
.medidor{height:300vh;position:relative;z-index:2;background:var(--fondo2)}
.medidor-fijo{position:sticky;top:0;height:100svh;display:grid;place-items:center;padding:0 34px}
.medidor-in{max-width:940px;width:100%;text-align:center}
.medidor-cifra{
  font-family:"Playfair Display",serif;font-weight:600;
  font-size:clamp(72px,17vw,220px);line-height:.86;letter-spacing:-.05em;
  color:var(--oro-cl);
}
.medidor-cifra sup{font-size:.28em;vertical-align:super;letter-spacing:0}
.medidor h2{margin-top:22px;font-size:clamp(26px,3.6vw,50px);line-height:1.06}
.medidor p:not(.medidor-cifra){margin:18px auto 0;max-width:52ch;font-size:16px;line-height:1.64;color:var(--tx2)}
.barras{display:grid;gap:12px;margin-top:44px;text-align:left}
.barra-fila{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;font-size:13px}
.barra-fila b{font-weight:500;color:var(--tx2);min-width:11ch}
.pista{height:5px;border-radius:100px;background:var(--linea2);overflow:hidden}
.relleno{height:100%;border-radius:100px;background:linear-gradient(90deg,var(--oro),var(--ambar));transform-origin:left;transform:scaleX(var(--f,0));transition:transform .1s linear}
.barra-fila u{text-decoration:none;font-family:"Space Mono",monospace;color:var(--tx3);font-size:12px}

/* ── Puertas a las páginas interiores ──────────────────────────── */
.puertas{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2px;border:1px solid var(--linea2);border-radius:20px;overflow:hidden;background:var(--linea2)}
.puerta{
  display:flex;flex-direction:column;justify-content:space-between;gap:44px;
  padding:34px 30px;background:var(--fondo);min-height:250px;
  transition:background .35s ease;
}
.puerta:hover{background:var(--fondo2)}
.puerta h3{font-size:27px;margin-top:12px}
.puerta p{margin-top:11px;font-size:14px;line-height:1.6;color:var(--tx2)}
.flecha{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--oro-cl)}
.puerta:hover .flecha svg{transform:translate(3px,-3px)}
.flecha svg{transition:transform .35s cubic-bezier(.16,1,.3,1)}

/* ── Lienzo de vaporización ────────────────────────────────────── */
.vapor{position:relative;z-index:2;background:var(--fondo);padding:clamp(70px,10vh,120px) 0;overflow:hidden}
.vapor-lienzo{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.vapor .env{position:relative;z-index:1}

/* ── Cabecera de página interior ───────────────────────────────── */
.encabezado{position:relative;padding:clamp(130px,18vh,190px) 0 clamp(46px,7vh,80px);overflow:hidden}
.encabezado::after{content:"";position:absolute;inset:0;background:radial-gradient(90% 120% at 78% 10%, color-mix(in srgb,var(--oro) 14%,transparent), transparent 62%);pointer-events:none}
.encabezado .env{position:relative;z-index:1}
.encabezado h1{font-size:clamp(40px,6.6vw,92px);line-height:.98;letter-spacing:-.035em}
.encabezado p{margin-top:20px;max-width:52ch;font-size:16.5px;line-height:1.64;color:var(--tx2)}
.encabezado .mono{display:block;margin-bottom:18px}

/* ── Bloques de texto ──────────────────────────────────────────── */
.dos{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,70px)}
.prosa p{font-size:16px;line-height:1.75;color:var(--tx2)}
.prosa p + p{margin-top:18px}
.prosa b{color:var(--tx);font-weight:600}
.tarjetas{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
.tarjeta{padding:28px 26px;border-radius:18px;border:1px solid var(--linea2);background:var(--sup)}
.tarjeta h3{font-size:21px}
.tarjeta p{margin-top:11px;font-size:14.5px;line-height:1.62;color:var(--tx2)}
.tarjeta .num{font-family:"Space Mono",monospace;font-size:11px;color:var(--oro-cl);letter-spacing:.18em}

.faq details{border-bottom:1px solid var(--linea2);padding:22px 0}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:20px;cursor:pointer;list-style:none;font-size:17.5px;font-family:"Playfair Display",serif}
.faq summary::-webkit-details-marker{display:none}
.faq summary svg{flex:0 0 auto;transition:transform .3s}
.faq details[open] summary svg{transform:rotate(180deg)}
.faq p{margin-top:14px;max-width:70ch;font-size:15px;line-height:1.7;color:var(--tx2)}

/* ── Pie ───────────────────────────────────────────────────────── */
.pie{position:relative;z-index:2;background:var(--fondo2);border-top:1px solid var(--linea2);padding:clamp(56px,8vh,88px) 0 30px}
.pie-rej{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:34px}
.pie-rej h4{font-size:12px;font-family:"Space Mono",monospace;letter-spacing:.18em;text-transform:uppercase;color:var(--tx3);font-weight:400}
.pie-rej ul{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:11px}
.pie-rej a{font-size:14px;color:var(--tx2)}
.pie-rej a:hover{color:var(--oro-cl)}
.pie-lema{max-width:34ch;margin-top:14px;font-size:14px;line-height:1.62;color:var(--tx2)}
.pie-fin{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:52px;padding-top:22px;border-top:1px solid var(--linea2);font-size:12.5px;color:var(--tx3)}
.pie-legal{display:flex;gap:20px;flex-wrap:wrap}

/* ── Aviso de maqueta ──────────────────────────────────────────── */
.aviso{
  position:relative;z-index:70;background:var(--oro);color:var(--sobre-oro);
  padding:9px 34px;text-align:center;font-size:11.5px;letter-spacing:.14em;
  font-family:"Space Mono",monospace;text-transform:uppercase;
}

/* ── Ficha de producto ──────────────────────────────────────────────
   Vista de e-commerce: visual grande a la izquierda, todo lo que hace
   falta para decidir a la derecha, y debajo la pirámide olfativa. */
.miga{padding:calc(clamp(96px,14vh,140px)) 0 0}
.miga .env{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--tx3)}
.miga a{color:var(--tx3)}
.miga a:hover{color:var(--oro-cl)}
.miga i{font-style:normal;opacity:.5}
.miga span{color:var(--tx2)}

.producto{padding:clamp(26px,4vh,46px) 0 clamp(48px,7vh,80px)}
.prod-rej{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);gap:clamp(30px,5vw,80px);align-items:center}

.prod-escena{
  position:relative;aspect-ratio:1/1.06;border-radius:26px;overflow:hidden;
  display:grid;place-items:center;
  border:1px solid var(--linea2);
  background:
    radial-gradient(130% 96% at 50% 6%, hsl(var(--c) / .26), transparent 64%),
    linear-gradient(180deg, var(--sup), var(--fondo2));
}
.prod-vapor{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.frasco-xl{width:16%;height:auto;position:relative;z-index:1;
  filter:drop-shadow(0 30px 40px hsl(var(--c) / .30))}
.prod-ml{
  position:absolute;top:18px;left:18px;z-index:2;
  padding:6px 12px;border-radius:100px;background:var(--fondo);
  border:1px solid var(--linea2);color:var(--tx3);font-size:11px;
}

.prod-txt h1{font-size:clamp(34px,4.6vw,62px);line-height:1;letter-spacing:-.035em;margin-top:12px}
.prod-fam{margin-top:12px;font-size:15px;color:var(--tx3)}
.prod-precio{display:flex;align-items:baseline;flex-wrap:wrap;gap:10px;margin-top:26px}
.prod-cifra{font-family:"Playfair Display",serif;font-size:clamp(34px,4vw,50px);letter-spacing:-.03em}
.prod-por{font-size:15px;color:var(--tx3)}
.prod-precio .ficha-agotado{position:static;margin-left:6px}
.prod-nota{margin-top:18px;max-width:44ch;font-size:16px;line-height:1.66;color:var(--tx2)}
.prod-bot{margin-top:26px}
.btn-ancho{width:100%;justify-content:center}
.prod-micro{margin-top:12px;font-size:12.5px;line-height:1.55;color:var(--tx3);max-width:44ch}

.prod-datos{display:grid;grid-template-columns:1fr 1fr;gap:0;margin:32px 0 0;
  border-top:1px solid var(--linea2)}
.prod-datos .dato{display:flex;justify-content:space-between;gap:14px;
  padding:13px 0;border-bottom:1px solid var(--linea2)}
.prod-datos .dato:nth-child(odd){padding-right:22px}
.prod-datos dt{font-size:13px;color:var(--tx3)}
.prod-datos dd{margin:0;font-size:13.5px;text-align:right;color:var(--tx)}
.aviso-nota{margin-top:16px;padding:11px 14px;border-radius:11px;font-size:12.5px;
  border:1px solid color-mix(in srgb,var(--ambar) 40%,transparent);color:var(--tx2)}

/* ── Pirámide olfativa ─────────────────────────────────────────── */
.piramide{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;
  border:1px solid var(--linea2);border-radius:20px;overflow:hidden;background:var(--linea2)}
.capa{padding:28px 26px 26px;background:var(--fondo)}
.capa ul{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:9px}
.capa li{font-family:"Playfair Display",serif;font-size:20px;letter-spacing:-.02em}
.capa p{margin-top:18px;font-size:13px;line-height:1.6;color:var(--tx3)}

/* ── Franja de garantías ───────────────────────────────────────── */
.franja{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;
  margin-top:clamp(40px,6vh,70px);padding-top:26px;border-top:1px solid var(--linea2)}
.franja b{display:block;font-size:15px;font-weight:600}
.franja span{display:block;margin-top:6px;font-size:13.5px;line-height:1.55;color:var(--tx2)}

/* ── La tarjeta ahora es enlace ────────────────────────────────── */
.ficha-lienzo{display:block}
.ficha-vidrio{display:grid}
.ficha-tit{display:block}
.ficha-tit:hover h3{color:var(--oro-cl)}
.ficha-txt h3{transition:color .25s}
.btn-chico{padding:10px 16px;font-size:13px}

@media (max-width:1080px){
  .prod-rej{grid-template-columns:1fr;gap:30px}
  .prod-escena{aspect-ratio:1/.82;max-width:520px;margin-inline:auto;width:100%}
  .frasco-xl{width:12.5%}
  .piramide{grid-template-columns:1fr}
  .franja{grid-template-columns:1fr;gap:18px}
}
@media (max-width:760px){
  .miga{padding-top:clamp(88px,13vh,120px)}
  .miga .env{font-size:12px}
  .prod-datos{grid-template-columns:1fr}
  .prod-datos .dato:nth-child(odd){padding-right:0}
  .capa{padding:22px 20px}
  .capa li{font-size:18px}
  .prod-escena{aspect-ratio:1/1}
  .frasco-xl{width:15%}
}

/* ── Vídeo de producto en la tarjeta ────────────────────────────────
   El póster hace de imagen fija; el clip sólo corre al pasar el ratón
   (o al entrar en pantalla, en móvil). Como el metraje viene en 9:16 y
   la caja es 4/5, `cover` recorta arriba y abajo: por eso el prompt pide
   el frasco en el 60% central del encuadre. */
.ficha-video{
  display:block;width:100%;height:100%;object-fit:cover;object-position:50% 50%;
  background:var(--fondo2);
  transition:transform .7s cubic-bezier(.16,1,.3,1),filter .5s ease;
}
.ficha-lienzo:hover .ficha-video{transform:scale(1.045)}
.prod-escena .ficha-video{border-radius:0}
/* Sin metraje la caja pintaba su degradado; con metraje sobra y sólo
   ensucia los bordes del vídeo. */
.ficha-vidrio:has(.ficha-video),
.prod-escena:has(.ficha-video){background:var(--fondo2)}
.prod-escena:has(.ficha-video){padding:0}
.prod-escena .ficha-video{position:absolute;inset:0}

/* ── El producto real, en vídeo ─────────────────────────────────── */
.real{padding:clamp(46px,7vh,84px) 0 0}
.marco{
  margin:0;position:relative;border-radius:24px;overflow:hidden;
  border:1px solid var(--linea2);background:var(--fondo2);
}
.marco video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.marco figcaption{
  position:absolute;inset:auto 0 0;padding:clamp(22px,3vw,40px);
  display:flex;align-items:flex-end;
  /* El metraje es claro por arriba y por abajo, así que el pie necesita
     su propio fondo oscuro: no basta con confiar en el vídeo. */
  background:linear-gradient(0deg,rgba(11,8,5,.92) 0%,rgba(11,8,5,.72) 46%,transparent 100%);
}
.marco figcaption h3{margin-top:10px;font-size:clamp(21px,2.4vw,30px);color:#F8F1E7}
.marco figcaption p{margin-top:10px;max-width:56ch;font-size:14.5px;line-height:1.6;color:#C6B4A0}
.marco figcaption .eyebrow{color:#E3B266}
@media (max-width:760px){
  .marco video{aspect-ratio:4/5}
  .marco figcaption{padding:20px 18px}
  .marco figcaption p{font-size:13.5px}
}

/* ═══ Tablet ═══════════════════════════════════════════════════ */
@media (max-width:1080px){
  .pie-rej{grid-template-columns:1fr 1fr}
  .dos{grid-template-columns:1fr}
}

/* Objetivos táctiles: una tablet de 820 px también se navega con el
   dedo, así que el bloque va en 940 y no en el de móvil. */
@media (max-width:940px){
  .menu a{min-height:44px;display:flex;align-items:center;padding:0 10px}
  .tema{width:44px;height:44px}
  .marca{min-height:44px;display:flex;align-items:center}
  .pie-rej a,.pie-legal a{min-height:44px;display:inline-flex;align-items:center}
  .miga a{min-height:44px;display:inline-flex;align-items:center}
  .btn{min-height:44px}
  .ficha .btn{min-height:44px}
}

@media (max-width:860px){
  .menu-boton{display:grid}
  .menu-panel:not([hidden]){display:flex}
  .solo-ancho{display:none}
  .env{padding:0 22px}
  .barra{padding:11px 22px;gap:14px}
  .menu{display:none}
  .acto{padding:0 22px}
  .riel-cab,.riel-pista{padding:0 22px}
  .aviso{padding:9px 22px;font-size:10px;letter-spacing:.1em}
}

/* ═══ Móvil ════════════════════════════════════════════════════ */
@media (max-width:760px){
  /* lvh y no svh: svh es la altura CON la barra de direcciones a la
     vista; al plegarse durante el scroll la ventana crece y queda una
     franja del color de fondo por debajo. */
  .portada{height:380vh}
  .portada-fondo{height:100lvh}
  .portada-video{
    object-position:50% 50%;
    transform:none;              /* el 9:16 ya viene encuadrado */
    background-image:url("../img/portada-mov-poster.jpg");
  }
  /* En vertical el velo va de abajo arriba: el frasco queda arriba y el
     texto se lee sobre la zona baja, ya apagada. */
  .portada-velo{
    background:linear-gradient(3deg,
       var(--fondo) 0%, var(--fondo) 26%,
       color-mix(in srgb,var(--fondo) 78%,transparent) 44%,
       color-mix(in srgb,var(--fondo) 26%,transparent) 62%,
       transparent 78%);
  }
  .portada-actos{align-items:flex-end;padding-bottom:clamp(70px,13vh,120px)}
  .acto h1{font-size:clamp(38px,10.6vw,58px);max-width:12ch}
  .acto p{font-size:15px;max-width:38ch}
  .acto-bot{margin-top:26px}
  .acto-bot .btn{flex:1 1 auto;justify-content:center}
  .bajar{display:none}

  .manifiesto{height:230vh}
  .riel{height:300vh}
  .medidor{height:260vh}
  .riel-fijo{justify-content:flex-start;padding-top:clamp(80px,14vh,130px)}
  .ficha{flex:0 0 78vw}
  .rejilla{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px}
  .ficha-txt{padding:16px 16px 18px}
  .ficha-txt h3{font-size:19px}
  .ficha-precio{font-size:22px}
  .ficha-notas span{font-size:10.5px;padding:3px 8px}
  .barra-fila{grid-template-columns:1fr;gap:7px}
  .barra-fila b{min-width:0}
  .pie-rej{grid-template-columns:1fr;gap:26px}
  .pie-fin{font-size:11.5px}
  .mono{font-size:10.5px}
  .cinta-in span{gap:28px;padding-right:28px}
}

/* La rejilla de dos columnas en móviles muy estrechos se ahoga. */
@media (max-width:400px){
  .rejilla{grid-template-columns:1fr}
}