/* OSVI Fragances — portada cinematográfica.
   Base: la portada funciona como página normal (sin JS o con «reducir movimiento»).
   Con .con-gsap (portada.js) la historia se ancla y se cuenta con el scroll, y con
   .con-escena3d (escena3d.js) los frascos se dibujan en 3D sobre sus muelles. */

/* ---------- Capas fijas: escena 3D y estela ---------- */
.escena3d { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 30; pointer-events: none; }
.estela { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 29; pointer-events: none; }

/* Cuando el frasco 3D está listo, la foto o el respaldo del muelle se ocultan */
[data-frasco3d] > img { transition: opacity .6s var(--ease); }
[data-frasco3d].con-3d > img { opacity: 0; }

/* ---------- Precarga ---------- */
.precarga { display: none; }
.js-mov .precarga {
  position: fixed; inset: 0; z-index: 300; display: grid; place-content: center; justify-items: center; gap: 22px;
  background: radial-gradient(60% 60% at 50% 45%, #0b2019, var(--verde-noche) 70%);
}
.precargando body { overflow: hidden; }
.precarga__estrella { width: clamp(90px, 14vw, 150px); overflow: visible; }
.precarga__estrella path { fill: none; stroke: url(#oroPrecarga); stroke-width: 1.4; stroke-linejoin: miter; }
.precarga__estrella .precarga__interior { fill: url(#oroPrecarga); stroke: none; }
.precarga__marca { font: 500 clamp(18px, 2vw, 22px)/1 var(--f-titulo); letter-spacing: .38em; color: var(--champan); padding-left: .38em; }
.precarga__marca span { display: block; margin-top: 10px; font: 400 10px/1 var(--f-texto); letter-spacing: .5em; color: var(--tinta-suave); text-align: center; }
.precarga__cuenta { position: fixed; right: var(--gutter); bottom: 28px; font: 300 clamp(40px, 7vw, 92px)/1 var(--f-titulo); color: rgba(210, 166, 92, .28); font-variant-numeric: tabular-nums; }

/* ---------- Historia ---------- */
.titulo--l { font-size: clamp(30px, 4.4vw, 64px); line-height: 1.04; }
.historia { position: relative; background: var(--verde-noche); }
.historia__escenario { position: relative; padding-block: clamp(28px, 4vw, 56px); }
.historia__fondo { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.historia__fondo::before { content: ""; position: absolute; inset: 0; background: radial-gradient(45% 60% at 72% 48%, rgba(210, 166, 92, .16), transparent 65%); }
.historia__tinte { position: absolute; inset: 0; opacity: 0; visibility: hidden; background: radial-gradient(70% 80% at 50% 50%, var(--tono), transparent 85%); }
.historia__halo { position: absolute; left: 70%; top: 40%; width: 60vmax; height: 60vmax; translate: -50% -50%; border-radius: 50%; opacity: 0; visibility: hidden;
  background: radial-gradient(closest-side, rgba(243, 221, 164, .42), rgba(210, 166, 92, .12) 55%, transparent); }
.historia__frasco { display: none; }
.historia__acto { position: relative; display: grid; gap: 22px; justify-items: start; max-width: 620px; padding: 40px var(--gutter); margin-inline: auto; width: 100%; }
.historia__acto[data-acto="1"] { max-width: var(--ancho); }
.historia__acto[data-acto="1"] > * { max-width: 620px; }
.historia__num { font: 500 12px/1 var(--f-texto); letter-spacing: .3em; color: var(--oro); display: flex; align-items: center; gap: 14px; }
.historia__num::after { content: ""; width: 48px; height: 1px; background: var(--oro-viejo); }
.capas { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 18px; width: 100%; }
.capa { position: relative; padding-left: 22px; border-left: 1px solid var(--linea); }
.capa::before { content: ""; position: absolute; left: -1px; top: 0; width: 2px; height: 100%; background: var(--oro-grad); transform-origin: top; transform: scaleY(var(--barra, 0)); }
.capa__nombre { font: 500 clamp(18px, 1.8vw, 24px)/1.2 var(--f-titulo); letter-spacing: .08em; color: var(--champan); }
.capa__cuando { font: italic 400 17px/1.4 var(--f-serif); color: var(--tinta-suave); }
.notas-orbita, .historia__progreso, .historia__desliza { display: none; }

.con-gsap .historia__escenario { height: calc(100vh - var(--cab, 0px)); height: calc(100svh - var(--cab, 0px)); padding: 0; overflow: hidden; }
.con-gsap .historia__frasco { display: block; position: absolute; z-index: 1; }
.con-gsap .historia__respaldo { position: absolute; inset: 22%; width: 56%; height: 56%; object-fit: contain; opacity: 0; }
/* El isotipo solo se ve si el 3D no puede correr */
.sin-3d .historia__respaldo, .historia__frasco.sin-3d .historia__respaldo { opacity: .5; }
.con-gsap .historia__acto { position: absolute; z-index: 2; top: 50%; translate: 0 -50%; margin: 0; padding: 0; width: min(560px, 42vw); }
.con-gsap .historia__acto[data-acto="1"] { left: var(--gutter); width: min(640px, 46vw); max-width: none; }
.con-gsap .historia__acto[data-acto="1"] > * { max-width: none; }
.con-gsap .historia__acto[data-acto="2"] { left: 54%; }
.con-gsap .historia__acto[data-acto="3"], .con-gsap .historia__acto[data-acto="4"], .con-gsap .historia__acto[data-acto="5"] { left: var(--gutter); }
.con-gsap .historia__acto[data-acto="4"] { width: min(400px, 28vw); }
.con-gsap .capa { opacity: .35; }

.con-gsap .notas-orbita { display: block; position: absolute; z-index: 2; left: 50%; top: 50%; width: min(64vw, 820px); aspect-ratio: 1.5; translate: -50% -50%; pointer-events: none; }
.nota-flota { position: absolute; padding: 10px 18px; border: 1px solid rgba(243, 221, 164, .35); border-radius: 40px; background: rgba(4, 17, 14, .5); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  font: italic 500 clamp(17px, 1.6vw, 22px)/1 var(--f-serif); color: var(--champan); white-space: nowrap; }
.nota-flota[data-i="0"] { left: 74%; top: 16%; }
.nota-flota[data-i="1"] { left: 86%; top: 46%; }
.nota-flota[data-i="2"] { left: 72%; top: 76%; }

.con-gsap .historia__progreso { display: grid; gap: 10px; position: absolute; z-index: 3; right: var(--gutter); top: 50%; translate: 0 -50%; list-style: none; margin: 0; padding: 0; }
.historia__progreso li { width: 6px; height: 6px; border-radius: 50%; background: rgba(210, 166, 92, .3); transition: background .3s, scale .3s; }
.historia__progreso li.activo { background: var(--oro); scale: 1.6; }
.con-gsap .historia__desliza { display: flex; flex-direction: column; align-items: center; gap: 10px; position: absolute; z-index: 3; left: 50%; bottom: 26px; translate: -50% 0;
  font: 500 10px/1 var(--f-texto); letter-spacing: .35em; text-transform: uppercase; color: var(--tinta-suave); animation: aparecer 1s ease both 1.6s; }
.historia__desliza span { width: 1px; height: 46px; background: linear-gradient(var(--oro), transparent); animation: desliza 2s var(--ease) infinite; transform-origin: top; }
@keyframes desliza { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

@media (max-width: 900px) {
  .con-gsap .historia__acto, .con-gsap .historia__acto[data-acto] { left: 0; right: 0; top: auto; bottom: 0; translate: none; width: 100%; padding: 70px var(--gutter) 34px; gap: 14px;
    background: linear-gradient(180deg, transparent, rgba(4, 17, 14, .92) 34%); }
  .con-gsap .historia__acto[data-acto="1"] .subtitulo { font-size: 18px; }
  .con-gsap .historia__acto[data-acto="1"] .hero__pie { display: none; }
  .con-gsap .historia__acto .lead { font-size: 17px; }
  .con-gsap .capas { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .capa { padding-left: 10px; }
  .capa__cuando { font-size: 13px; }
  .con-gsap .notas-orbita { top: 28%; width: 94vw; }
  .nota-flota { font-size: 15px; padding: 7px 12px; }
  .nota-flota[data-i="0"] { left: 2%; top: 4%; }
  .nota-flota[data-i="1"] { left: 62%; top: 30%; }
  .nota-flota[data-i="2"] { left: 6%; top: 62%; }
  .con-gsap .historia__progreso { top: 12%; translate: none; }
  .con-gsap .historia__desliza { display: none; }
  .historia__halo { left: 50%; top: 28%; }
}

/* ---------- Vitrina horizontal ---------- */
.vitrina { position: relative; background: var(--verde-noche); overflow: hidden; }
.vitrina__escenario { position: relative; padding-block: clamp(56px, 7vw, 96px); }
.vitrina__fondo { position: absolute; inset: 0; pointer-events: none; }
.vitrina__fondo i { position: absolute; inset: 0; opacity: 0; transition: opacity 1s var(--ease); background: radial-gradient(60% 70% at 40% 55%, var(--tono), transparent 85%); }
.vitrina__fondo i.activo { opacity: 1; }
.vitrina__cabeza { position: relative; display: flex; justify-content: space-between; align-items: baseline; gap: 20px; margin-bottom: clamp(20px, 3vw, 40px); }
.vitrina__contador { font: 500 14px/1 var(--f-titulo); letter-spacing: .2em; color: var(--tinta-suave); white-space: nowrap; }
.vitrina__contador span { color: var(--champan); font-size: 22px; }
.vitrina__pista { position: relative; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-inline: var(--gutter); gap: 0; }
.pieza { flex: 0 0 min(88vw, 1080px); scroll-snap-align: center; position: relative; display: grid; grid-template-columns: 1.05fr 1fr; align-items: center; gap: clamp(20px, 4vw, 64px); padding: 20px clamp(12px, 3vw, 48px); min-height: 62vh; }
.pieza__num { position: absolute; left: 2%; top: 50%; translate: 0 -50%; font: 500 clamp(160px, 24vw, 360px)/1 var(--f-titulo); color: transparent; -webkit-text-stroke: 1px rgba(210, 166, 92, .22); pointer-events: none; user-select: none; }
.pieza__frasco { position: relative; height: clamp(300px, 56vh, 560px); display: grid; place-items: center; }
.pieza__frasco::after { content: ""; position: absolute; inset: 18% 22%; border-radius: 50%; background: var(--brillo); filter: blur(60px); opacity: .32; z-index: -1; }
.pieza__frasco > img, .pieza__frasco > svg { max-height: 100%; width: auto; max-width: 80%; object-fit: contain; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .5)); }
.pieza__info { position: relative; display: grid; gap: 12px; justify-items: start; }
.pieza__marca { font: 600 12px/1 var(--f-texto); letter-spacing: .28em; text-transform: uppercase; color: var(--oro); }
.pieza__nombre { font: 500 clamp(34px, 4.6vw, 66px)/1.02 var(--f-titulo); letter-spacing: .02em; margin: 0; color: var(--marfil); }
.pieza__meta { font: italic 400 20px/1.3 var(--f-serif); color: var(--tinta-suave); }
.pieza__notas { font-size: 14px; color: var(--tinta); max-width: 30em; }
.pieza__precio { font: 500 20px/1 var(--f-titulo); color: var(--champan); margin-top: 6px; }
.pieza__acciones { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.vitrina__barra { position: relative; margin: clamp(16px, 2vw, 28px) var(--gutter) 0; height: 1px; background: var(--linea); }
.vitrina__barra span { position: absolute; inset: 0; background: var(--oro-grad); transform-origin: left; transform: scaleX(0); }

.con-gsap .vitrina__escenario { height: calc(100vh - var(--cab, 0px)); height: calc(100svh - var(--cab, 0px)); display: flex; flex-direction: column; justify-content: center; padding-block: 24px; }
.con-gsap .vitrina__pista { overflow: visible; scroll-snap-type: none; width: max-content; padding-inline: calc((100vw - min(88vw, 1080px)) / 2); will-change: transform; }
.con-gsap .pieza { min-height: 0; }

@media (max-width: 900px) {
  .pieza { flex-basis: 100vw; grid-template-columns: 1fr; gap: 6px; padding-inline: var(--gutter); }
  .con-gsap .vitrina__pista { padding-inline: 0; }
  .pieza__frasco { height: 36vh; }
  .pieza__num { top: 22%; font-size: 46vw; }
  .pieza__nombre { font-size: 34px; }
  .pieza__meta { font-size: 17px; }
  .pieza__notas { display: none; }
  .vitrina__cabeza .titulo { font-size: 26px; }
  .con-gsap .vitrina__escenario { padding-block: 16px; }
}

/* ---------- Encuentra tu firma ---------- */
.firma__grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(28px, 5vw, 80px); align-items: start; }
.firma__pasos { list-style: none; display: flex; gap: 8px; padding: 0; margin: 8px 0 0; }
.firma__pasos li { width: 42px; height: 2px; background: var(--linea); transition: background .4s; }
.firma__pasos li.activo { background: var(--acento); }
.firma__panel { min-height: 420px; }
.pregunta { border: 0; margin: 0; padding: 0; display: grid; gap: 12px; }
.pregunta legend { font: 500 clamp(22px, 2.4vw, 32px)/1.2 var(--f-titulo); color: var(--tinta-fuerte); margin-bottom: 18px; padding: 0; }
.pregunta button { text-align: left; font: 500 16px/1.4 var(--f-texto); color: var(--tinta); background: var(--panel); border: 1px solid var(--linea); border-radius: var(--radio);
  padding: 20px 24px 20px 58px; position: relative; cursor: pointer; transition: border-color .3s, transform .3s var(--ease), background .3s; }
.pregunta button::before { content: ""; position: absolute; left: 24px; top: 50%; width: 16px; height: 16px; translate: 0 -50%; border: 1px solid var(--oro-viejo);
  clip-path: polygon(50% 0, 66% 34%, 100% 50%, 66% 66%, 50% 100%, 34% 66%, 0 50%, 34% 34%); background: transparent; transition: background .3s; }
.pregunta button:hover { border-color: var(--oro-viejo); transform: translateX(6px); }
.pregunta button:hover::before, .pregunta button.elegido::before { background: var(--oro-grad); }
.pregunta button.elegido { border-color: var(--acento); background: #fff; }
.pregunta button:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.pregunta.entra > * { animation: subir .6s var(--ease) both; }
.pregunta.entra > :nth-child(3) { animation-delay: .06s; }
.pregunta.entra > :nth-child(4) { animation-delay: .12s; }
.pregunta.entra > :nth-child(5) { animation-delay: .18s; }
/* El resultado es un panel oscuro dentro de una sección clara: recupera los tonos oscuros */
.resultado { --fondo: var(--verde-noche); --tinta: #EEE6D4; --tinta-fuerte: var(--marfil); --tinta-suave: #A9A28F; --acento: var(--oro); --linea: rgba(210, 166, 92, .24); --panel: var(--esmeralda); }
.resultado { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(20px, 3vw, 44px); align-items: center; background: var(--verde-noche); color: var(--tinta);
  border-radius: 6px; padding: clamp(22px, 3vw, 40px); position: relative; overflow: hidden; }
.resultado::before { content: ""; position: absolute; left: -20%; top: -20%; width: 70%; height: 140%; background: radial-gradient(closest-side, rgba(210, 166, 92, .25), transparent); pointer-events: none; }
.resultado.entra { animation: subir .8s var(--ease) both; }
.resultado__frasco, .resultado__muelle { position: relative; height: clamp(260px, 32vw, 380px); display: grid; place-items: center; }
.resultado__muelle { width: 100%; }
.resultado__foto { max-height: 100%; max-width: 86%; object-fit: contain; filter: drop-shadow(0 24px 30px rgba(0, 0, 0, .5)); }
.resultado__info { position: relative; display: grid; gap: 10px; justify-items: start; }
.resultado__eti { font: 600 11px/1 var(--f-texto); letter-spacing: .3em; text-transform: uppercase; color: var(--oro); }
.resultado__marca { font: italic 400 20px/1 var(--f-serif); color: var(--tinta-suave); }
.resultado__nombre { font: 500 clamp(28px, 3.2vw, 44px)/1.05 var(--f-titulo); color: var(--marfil); margin: 0; }
.resultado__nombre:focus { outline: none; }
.resultado__porque { font-size: 14px; line-height: 1.7; }
.resultado__precio { font: 500 18px/1 var(--f-titulo); color: var(--champan); }
.resultado__alt { font: italic 400 16px/1.4 var(--f-serif); color: var(--tinta-suave); }
.resultado__otra { background: none; border-width: 0 0 1px; cursor: pointer; color: var(--oro); }
@media (max-width: 900px) {
  .firma__grid, .resultado { grid-template-columns: 1fr; }
  .firma__panel { min-height: 0; }
  .pregunta button { padding: 16px 18px 16px 50px; font-size: 15px; }
  .pregunta button::before { left: 20px; }
}

/* ---------- Tarjeta de lealtad viva ---------- */
.tarjeta-viva { perspective: 1400px; width: 100%; max-width: 520px; justify-self: center; }
.tarjeta-viva__giro { position: relative; aspect-ratio: 9 / 5; transform-style: preserve-3d; transform: rotateY(180deg) rotateZ(-2.5deg); }
.tarjeta-frente, .tarjeta-viva .tarjeta-lealtad { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.tarjeta-viva .tarjeta-lealtad { transform: rotateY(180deg); max-width: none; }
.tarjeta-frente { border-radius: 10px; background: radial-gradient(80% 120% at 0% 0%, rgba(210, 166, 92, .18), transparent 55%), var(--verde-noche); border: 1px solid rgba(210, 166, 92, .35);
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .8); display: grid; grid-template-columns: auto 1px 1fr; align-items: center; gap: 8%; padding: 6% 9%; }
.tarjeta-frente img { width: clamp(80px, 12vw, 130px); height: auto; }
.tarjeta-frente__linea { height: 70%; background: linear-gradient(transparent, var(--oro), transparent); }
.tarjeta-frente p { font: 500 clamp(11px, 1.3vw, 14px)/1.9 var(--f-texto); letter-spacing: .08em; color: var(--champan); }
.sellos span { position: relative; }
.estampa { position: absolute; inset: -1px; border-radius: 50%; background: var(--oro-grad); box-shadow: 0 0 18px rgba(243, 221, 164, .35); opacity: 0; visibility: hidden; }
.sellos span:not(.regalo) .estampa::after { content: ""; position: absolute; inset: 26%; background: var(--verde-noche);
  clip-path: polygon(50% 0, 66% 34%, 100% 50%, 66% 66%, 50% 100%, 34% 66%, 0 50%, 34% 34%); opacity: .8; }
.sellos .regalo .estampa { background: radial-gradient(circle, rgba(243, 221, 164, .9), rgba(210, 166, 92, .3) 60%, transparent 72%); box-shadow: none; z-index: -1; inset: -30%; }
.tarjeta-viva.completa .regalo { animation: regalo 1.6s ease-in-out infinite; }
@keyframes regalo { 50% { filter: drop-shadow(0 0 14px rgba(243, 221, 164, .9)); scale: 1.08; } }

/* ---------- Frasco de autor ---------- */
.autor__frasco { position: relative; width: 220px; height: 280px; margin-inline: auto; display: grid; place-items: center; }
.autor__frasco > img { width: 64px; }