/* Recorrido de portada.
   Base (sin JS, sin WebGL, movimiento reducido): tres momentos en flujo normal, foto real + texto.
   html.story-3d: escenario fijo (sticky) con el canvas; los textos los mueve la timeline. */

.story{position:relative;padding:0;background:#0f201a;color:var(--cream)}
.story-canvas{display:none}
.story-nav,.story-hud,.story-skip,.story-hint{display:none}

.beat{position:relative;min-height:calc(100svh - var(--hh,68px));display:flex;align-items:flex-end;overflow:hidden;isolation:isolate}
.beat-photo,.beat-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.beat-photo{z-index:0}
.beat::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
 background:linear-gradient(180deg,rgba(9,22,17,.38) 0%,rgba(9,22,17,0) 26%,rgba(9,22,17,0) 46%,rgba(9,22,17,.86) 100%)}
.beat-llegada .beat-photo img{object-position:46% 58%}
.beat-jardin .beat-photo img{object-position:44% 56%;transform:scale(1.16);transform-origin:43% 50%}
.beat-quinta .beat-photo img{object-position:50% 30%}
.beat-ceremonia .beat-photo img{object-position:50% 45%}
.beat-recorre .beat-photo img{object-position:62% 50%}

/* guía de lectura (solo en modo inmersivo): capítulo, progreso, saltar, deslizar */
.story-3d .story-hud{display:flex;flex-direction:column;gap:.45rem;position:absolute;z-index:4;
 top:clamp(.9rem,2.5vh,1.4rem);left:max(1.25rem,calc(50% - 560px));width:min(15rem,46vw);pointer-events:none}
.hud-chapter{margin:0;font-size:.74rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--cream);text-shadow:0 1px 10px rgba(0,0,0,.5);font-variant-numeric:tabular-nums}
.hud-chapter .hud-num{color:#F3D3C3}
.hud-chapter .hud-total{opacity:.7}
.hud-chapter .hud-name{margin-left:.45rem}
.hud-bar{height:2px;background:rgba(247,242,234,.25);border-radius:2px;overflow:hidden}
.hud-bar i{display:block;height:100%;background:#F3D3C3;transform-origin:0 50%;transform:scaleX(0)}
.story-3d .story-skip{display:inline-flex;align-items:center;position:absolute;z-index:4;top:clamp(.6rem,2vh,1.1rem);right:max(1rem,calc(50% - 560px));
 min-height:40px;padding:0 .9rem;border-radius:999px;border:1px solid rgba(247,242,234,.45);background:rgba(9,22,17,.35);
 color:var(--cream);font-size:.82rem;font-weight:600;text-decoration:none}
@media(hover:hover) and (pointer:fine){.story-skip:hover{background:rgba(9,22,17,.6)}}
.story-3d .story-hint{display:flex;flex-direction:column;align-items:center;gap:.55rem;position:absolute;z-index:4;left:50%;bottom:clamp(1.2rem,4vh,2.2rem);
 transform:translateX(-50%);pointer-events:none;color:var(--cream);font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;text-shadow:0 1px 10px rgba(0,0,0,.5)}
.story-hint i{width:1.5px;height:38px;background:linear-gradient(rgba(247,242,234,0),#F7F2EA);transform-origin:50% 0;animation:hint 1.8s cubic-bezier(.23,1,.32,1) infinite}
@keyframes hint{0%{transform:scaleY(0);opacity:0}35%{opacity:1}100%{transform:scaleY(1) translateY(10px);opacity:0}}
@media(min-width:768px){.story-3d .story-hint{left:auto;right:clamp(4.5rem,8vw,7rem);transform:none}}
@media(max-width:767px){
 .story-3d .story-hint{bottom:auto;top:44%;left:auto;right:1rem;transform:none;writing-mode:vertical-rl;flex-direction:row;font-size:.7rem}
 .story-hint i{height:30px}
}
.beat-recepcion .beat-photo img{object-position:60% 40%}
.beat-noche .beat-photo img{object-position:50% 40%}
.beat-final h2{font-size:clamp(2.1rem,4.8vw,3.8rem)}
.btn-lg{min-height:60px;padding:1rem 2.2rem;font-size:1.08rem;box-shadow:0 10px 30px rgba(0,0,0,.28)}

.beat-copy{position:relative;z-index:3;width:min(1120px,100% - 2.5rem);margin:0 auto;padding:0 0 clamp(2.25rem,7vh,4.5rem)}
.beat-copy .eyebrow{color:#F3D3C3;margin-bottom:.8rem}
.beat-copy h1{font-size:clamp(2.5rem,5vw,4.6rem);line-height:1.02;margin:0 0 .9rem;text-shadow:0 2px 24px rgba(6,16,12,.35)}
.beat-copy h1 em,.beat-copy h2 em{color:#F3D3C3}
.beat-copy h2{font-size:clamp(1.9rem,4.4vw,3.4rem);max-width:16ch;text-shadow:0 2px 24px rgba(6,16,12,.35)}
.beat-copy p{max-width:32rem;font-size:clamp(1.02rem,1.5vw,1.2rem)}
.beat-copy small{display:block;margin-top:.9rem;opacity:.9}
.beat-copy .btns{margin-top:1.4rem}

@media(min-width:768px){
 .beat::after{background:
  linear-gradient(90deg,rgba(9,22,17,.66) 0%,rgba(9,22,17,.28) 38%,rgba(9,22,17,0) 62%),
  linear-gradient(180deg,rgba(9,22,17,.32) 0%,rgba(9,22,17,0) 22%,rgba(9,22,17,0) 55%,rgba(9,22,17,.7) 100%)}
}

/* ---- modo inmersivo ---- */
.story-3d .story{height:var(--story-len,1080vh)}
.story-3d .story-stage{position:sticky;top:var(--hh,68px);height:calc(100svh - var(--hh,68px));overflow:hidden}
.story-3d .story-canvas{display:block;position:absolute;inset:0;width:100%;height:100%;z-index:1;opacity:0;visibility:hidden}
.story-3d .beat{position:absolute;inset:0;min-height:0;pointer-events:none;isolation:auto}
.story-3d .beat::after{display:none}
.story-3d .beat:not(.beat-llegada) .beat-photo{display:none}
.story-3d.story-live .beat-llegada .beat-photo{visibility:hidden}
.story-3d .story-stage::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
 background:linear-gradient(180deg,rgba(9,22,17,.3) 0%,rgba(9,22,17,0) 20%,rgba(9,22,17,0) 50%,rgba(9,22,17,.78) 100%)}
.story-3d .beat-copy{pointer-events:auto}
/* sombra suave detrás de cada bloque de texto (mesas iluminadas, manteles blancos): se mueve y se
   desvanece con el texto, así no oscurece la foto cuando no hace falta */
.story-3d .beat-copy::before{content:"";position:absolute;z-index:-1;inset:-18% -30% -14% -22%;pointer-events:none;
 background:radial-gradient(closest-side,rgba(8,20,15,.62),rgba(8,20,15,.3) 55%,rgba(8,20,15,0))}
.story-3d .beat-copy{isolation:isolate;max-width:min(1120px,100% - 2.5rem)}

.story-3d .story-nav{display:flex;flex-direction:column;gap:.35rem;position:absolute;z-index:4;right:clamp(1rem,2.5vw,2.25rem);top:50%;transform:translateY(-50%)}
.story-nav a{display:flex;align-items:center;justify-content:flex-end;gap:.7rem;min-height:40px;padding:0 .2rem;color:var(--cream);text-decoration:none;font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.story-nav a span{opacity:0;transform:translateX(6px);transition:opacity .2s cubic-bezier(.23,1,.32,1),transform .2s cubic-bezier(.23,1,.32,1);text-shadow:0 1px 10px rgba(0,0,0,.45)}
.story-nav a::after{content:"";width:8px;height:8px;border-radius:50%;border:1.5px solid rgba(247,242,234,.8);transition:background-color .2s ease,transform .2s cubic-bezier(.23,1,.32,1)}
.story-nav a[aria-current]::after{background:#F3D3C3;border-color:#F3D3C3;transform:scale(1.25)}
.story-nav a[aria-current] span,.story-nav a:focus-visible span{opacity:1;transform:none}
@media(hover:hover) and (pointer:fine){.story-nav a:hover span{opacity:1;transform:none}}

@media(min-width:768px){
 .story-3d .story-stage::after{background:
  linear-gradient(90deg,rgba(9,22,17,.6) 0%,rgba(9,22,17,.22) 36%,rgba(9,22,17,0) 60%),
  linear-gradient(180deg,rgba(9,22,17,.28) 0%,rgba(9,22,17,0) 18%,rgba(9,22,17,0) 58%,rgba(9,22,17,.62) 100%)}
}
@media(max-width:767px){
 .story-3d .story{--story-len:900vh}
 .story-3d .story-nav{display:none}
 /* el botón de WhatsApp flota a la derecha; el texto puede bajar a su altura sin chocar */
 .beat-copy{padding-bottom:calc(1.6rem + env(safe-area-inset-bottom,0px))}
 .beat-copy h1{font-size:clamp(2.2rem,10.5vw,2.9rem);margin-bottom:.6rem}
 .beat-copy p{font-size:1rem;margin-bottom:.4rem}
 .beat-copy .btns{margin-top:1rem}
 .beat-copy small{margin-top:.6rem;max-width:calc(100% - 4.5rem)}
}