/* ═══════════════════════════════════════════════════════════════════
   VIDEO-SCROLL — ver assets/js/video-scroll.js. Se copia TAL CUAL.
   Cada demo pone su letra y su color en el style de la sección:
     style="--vs-titulo:'Cormorant Garamond',serif; --vs-acento:#2FC4C0"
   Sólo se anima opacity y transform (regla 7).
   ═══════════════════════════════════════════════════════════════════ */
.vscroll{position:relative;background:#05080a;color:#fff}
.vscroll__escena{position:relative;min-height:70vh;overflow:hidden}
.vscroll__cuadro{position:absolute;inset:0;background:#0b0f12 center/cover no-repeat}
.vscroll__cuadro video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:center/cover no-repeat}
.vscroll__escena::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(0,0,0,.72) 0%,rgba(0,0,0,.28) 34%,transparent 58%),
             linear-gradient(to right,rgba(0,0,0,.55) 0%,rgba(0,0,0,.2) 40%,transparent 62%)}

.vscroll__txt{position:relative;z-index:2;max-width:min(640px,86vw);padding:48px clamp(20px,6vw,96px)}
.vscroll__volanta{display:block;margin:0 0 14px;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--vs-acento,#fff)}
.vscroll__titulo{display:block;margin:0;font-family:var(--vs-titulo,inherit);font-weight:var(--vs-peso,600);font-size:clamp(32px,4.6vw,66px);line-height:1.04;letter-spacing:-.01em;text-wrap:balance}
.vscroll__titulo em{font-style:italic;color:var(--vs-acento,#fff)}
.vscroll__bajada{display:block;margin:16px 0 0;font-size:clamp(16px,1.3vw,19px);line-height:1.5;color:rgba(255,255,255,.84);max-width:46ch}

/* ── Con JS: sección alta, escenario pegado, textos que entran y salen ── */
.vs-js .vscroll{height:320vh}
.vs-js .vscroll__escena{position:sticky;top:0;height:100vh;height:100svh;min-height:0}
.vs-js .vscroll__txt{position:absolute;left:clamp(20px,6vw,96px);bottom:clamp(48px,12vh,140px);padding:0;
  opacity:0;transform:translateY(34px);transition:opacity .7s ease,transform .9s cubic-bezier(.16,1,.3,1)}
.vs-js .vscroll__txt.is-on{opacity:1;transform:none}
.vs-js .vscroll__txt.is-ido{opacity:0;transform:translateY(-34px)}

/* ── Teléfono: el video ENTERO en una caja 16:9 (como Aberturas), el
   póster desenfocado de fondo y el texto abajo de la caja. En cover, un
   16:9 sobre una pantalla parada muestra un cuarto del cuadro. ── */
@media (max-width:760px){
  .vs-js .vscroll{height:240vh}
  .vscroll__escena::before{content:"";position:absolute;inset:-60px;z-index:0;
    background:var(--vs-fondo,none) center/cover no-repeat;filter:blur(30px) brightness(.42) saturate(1.15);transform:scale(1.15)}
  .vscroll__escena::after{background:linear-gradient(to bottom,rgba(0,0,0,.2),rgba(0,0,0,.55))}
  .vs-js .vscroll__cuadro{inset:auto;top:calc(64px + max(18px,(100svh - 64px - 56.25vw - 250px) / 2));left:12px;
    width:calc(100% - 24px);aspect-ratio:16/9;border-radius:18px;overflow:hidden;z-index:2;
    box-shadow:0 18px 50px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.08)}
  .vs-js .vscroll__txt{left:20px;right:20px;bottom:auto;
    top:calc(64px + max(18px,(100svh - 64px - 56.25vw - 250px) / 2) + (100vw - 24px) * .5625 + 26px)}
  .vscroll__titulo{font-size:clamp(28px,8vw,38px)}
  .vscroll__bajada{font-size:16px}
}
@media (prefers-reduced-motion:reduce){
  .vs-js .vscroll__txt{transition:opacity .3s ease;transform:none}
  .vs-js .vscroll__txt.is-ido{transform:none}
}

/* ── PORTADA (.vscroll--portada): el video ES el hero (Marena, 2026-10-03).
   Velo más liviano que en una sección del medio (Jope: «que no quede muy
   oscuro»): la legibilidad la da una sombra en el texto, no tapar el video.
   El primer texto lleva `is-on` en el HTML (se ve sin esperar a JS) y entra
   con vs-entra una sola vez. Sin la clase `hero`: ver el comentario en el HTML. ── */
.vscroll--portada .vscroll__escena::after{
  background:linear-gradient(to top,rgba(0,0,0,.5) 0%,rgba(0,0,0,.14) 38%,transparent 60%),
             linear-gradient(to right,rgba(0,0,0,.32) 0%,transparent 50%)}
.vs-js .vscroll--portada{height:280vh}
.vscroll__txt--portada{max-width:min(720px,88vw)}
.vscroll__txt--portada .eyebrow{color:var(--vs-acento,#fff)}
.vscroll__txt--portada .h1{margin:.2em 0 .45em;color:#fff;text-wrap:balance}
.vscroll__txt--portada .h1 em{font-style:italic;color:var(--vs-acento,#fff)}
.vscroll__txt--portada .lead{color:rgba(255,255,255,.9);max-width:44ch;margin-bottom:1.6rem}
.vscroll__txt--portada .h1,.vscroll__txt--portada .lead,.vscroll__txt--portada .eyebrow,
.vscroll--portada .vscroll__titulo,.vscroll--portada .vscroll__bajada{text-shadow:0 2px 22px rgba(0,0,0,.45),0 1px 3px rgba(0,0,0,.35)}
.vscroll__txt--portada > *{animation:vs-entra 1s cubic-bezier(.16,1,.3,1) both}
.vscroll__txt--portada > :nth-child(2){animation-delay:.12s}
.vscroll__txt--portada > :nth-child(3){animation-delay:.24s}
.vscroll__txt--portada > :nth-child(4){animation-delay:.36s}
@keyframes vs-entra{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.portada__bajar{position:absolute;z-index:2;right:clamp(20px,5vw,72px);bottom:clamp(28px,6vh,56px);
  font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:rgba(255,255,255,.75);
  transition:opacity .5s ease;opacity:calc(1 - var(--p,0) * 12)}
@media (max-width:760px){
  .vs-js .vscroll--portada{height:220vh}
  .vs-js .vscroll--portada .vscroll__cuadro{top:76px}
  .vs-js .vscroll--portada .vscroll__txt{top:calc(76px + (100vw - 24px) * .5625 + 22px)}
  .vscroll__txt--portada .h1{font-size:clamp(30px,8.6vw,40px);line-height:1.06}
  .vscroll__txt--portada .lead{font-size:15.5px;line-height:1.5;margin-bottom:1.2rem}
  .vscroll__txt--portada .hero__acciones .btn{flex:1 1 auto;justify-content:center}
  .portada__bajar{display:none}
}
@media (prefers-reduced-motion:reduce){ .vscroll__txt--portada > *{animation:none} }
/* Ajuste medido en Marena (1440×900): el bloque arrancaba sobre la nieve
   y la volanta no se leía. Más abajo, un pelo más chico y una sombra SÓLO
   detrás del texto (no un velo sobre todo el video). */
.vs-js .vscroll--portada .vscroll__txt{bottom:clamp(34px,7vh,90px)}
.vscroll__txt--portada .h1{font-size:clamp(38px,3.8vw,62px)}
.vscroll__txt--portada::before,.vscroll--portada .vscroll__txt::before{content:"";position:absolute;z-index:-1;inset:-14% -22% -16% -34%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(2,12,16,.46),rgba(2,12,16,.18) 60%,transparent)}
@media (max-width:760px){
  .vs-js .vscroll--portada .vscroll__txt{bottom:auto}
  .vscroll__txt--portada::before,.vscroll--portada .vscroll__txt::before{display:none}
  .vscroll__txt--portada .hero__acciones{gap:.6rem}
  .vscroll__txt--portada .btn--lg{padding-block:.85rem}
  .vscroll__txt--portada .h1{font-size:clamp(28px,8.4vw,36px)}
}
@media (max-width:760px) and (max-height:780px){
  .vs-js .vscroll--portada .vscroll__cuadro{top:68px}
  .vs-js .vscroll--portada .vscroll__txt{top:calc(68px + (100vw - 24px) * .5625 + 16px)}
  .vscroll__txt--portada .eyebrow{font-size:10.5px}
  .vscroll__txt--portada .h1{font-size:28px;margin:.15em 0 .35em}
  .vscroll__txt--portada .lead{font-size:14.5px;line-height:1.45;margin-bottom:.9rem}
  .vscroll__txt--portada .btn--lg{padding-block:.7rem}
}

/* ── VIDEO CLARO (.vscroll--claro): Casa Lumé (2026-10-03), paredes crema.
   Con letra blanca no se leía nada: letra oscura y un velo crema abajo a
   la izquierda, en vez del negro. ── */
.vscroll--claro{background:#efe6da;color:#2a1f17}
.vscroll--claro .vscroll__escena::after{
  background:linear-gradient(to top,rgba(246,239,229,.72) 0%,rgba(246,239,229,.25) 30%,transparent 52%),
             linear-gradient(to right,rgba(246,239,229,.5) 0%,rgba(246,239,229,.12) 36%,transparent 55%)}
.vscroll--claro .vscroll__bajada{color:rgba(42,31,23,.82)}
@media (max-width:760px){
  .vscroll--claro .vscroll__escena::before{filter:blur(30px) brightness(1.02) saturate(1.05)}
  .vscroll--claro .vscroll__escena::after{background:linear-gradient(to bottom,rgba(246,239,229,.25),rgba(246,239,229,.6))}
  .vscroll--claro .vs-js .vscroll__cuadro,.vs-js .vscroll--claro .vscroll__cuadro{box-shadow:0 18px 50px rgba(80,55,30,.25),0 0 0 1px rgba(0,0,0,.05)}
}
/* Casa Lumé, segunda medida: con el velo liviano, «para tu piel» quedaba
   bronce sobre la sábana blanca. Una mancha crema SÓLO detrás del texto y
   el acento un tono más hondo. */
.vscroll--claro .vscroll__txt::before{content:"";position:absolute;z-index:-1;inset:-22% -20% -26% -30%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(246,239,229,.82),rgba(246,239,229,.4) 62%,transparent)}
.vscroll--claro .vscroll__titulo em{color:#7d4f2b}
.vscroll--claro .vscroll__volanta{color:#7d4f2b}
@media (max-width:760px){ .vscroll--claro .vscroll__txt::before{display:none} }
/* Quinda (2026-10-03): la lata termina ocupando todo el ancho y el texto
   caía encima de «Frutos rojos» de la etiqueta. Toda sección (no sólo la
   portada) lleva la sombra local detrás del texto; la clara tiene la suya. */
.vscroll:not(.vscroll--claro) .vscroll__txt::before{content:"";position:absolute;z-index:-1;inset:-18% -22% -20% -34%;pointer-events:none;
  background:radial-gradient(ellipse closest-side,rgba(0,0,0,.55),rgba(0,0,0,.25) 55%,transparent)}
.vscroll .vscroll__titulo,.vscroll .vscroll__bajada{text-shadow:0 2px 20px rgba(0,0,0,.4)}
.vscroll--claro .vscroll__titulo,.vscroll--claro .vscroll__bajada{text-shadow:none}
@media (max-width:760px){ .vscroll .vscroll__txt::before{display:none} }
/* .vscroll--panel: cuando el objeto del video termina ocupando todo el
   cuadro (la lata de Quinda), ninguna sombra alcanza: el texto va en un
   panel de color sólido translúcido. Sólo en la compu. */
@media (min-width:761px){
  .vscroll--panel .vscroll__txt{padding:26px 30px 28px;border-radius:20px;max-width:min(560px,86vw);
    background:var(--vs-panel,rgba(28,4,16,.66));box-shadow:0 20px 60px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.08)}
  .vscroll--panel .vscroll__txt::before{display:none}
  .vscroll--panel .vscroll__titulo{font-size:clamp(30px,3.4vw,52px)}
}
/* .vscroll--lado (Quinda, 2026-10-04): el video en un recuadro 16:9 al
   lado de un texto, sin escenario pegado ni velo; avanza mientras pasa la
   sección (data-vscroll="lado", ver el JS). Pisa lo del teléfono de arriba. */
.vscroll--lado,.vs-js .vscroll--lado{height:auto;margin:0;background:none;border-radius:22px;
  box-shadow:0 26px 70px rgba(0,0,0,.42),0 0 70px var(--vs-luz,rgba(255,255,255,.12)),inset 0 0 0 1px rgba(255,255,255,.1)}
.vscroll--lado .vscroll__escena,.vs-js .vscroll--lado .vscroll__escena{position:relative;top:auto;height:auto;min-height:0;aspect-ratio:16/9;border-radius:inherit}
.vscroll--lado .vscroll__escena::before,.vscroll--lado .vscroll__escena::after{display:none}
.vscroll--lado .vscroll__cuadro,.vs-js .vscroll--lado .vscroll__cuadro{inset:0;top:0;left:0;width:auto;aspect-ratio:auto;border-radius:0;box-shadow:none}
/* .vscroll__txt--arriba: texto centrado arriba, para cuando el objeto
   termina abajo y en el medio (las cinco latas de la portada de Quinda).
   Sólo en la compu: en el teléfono el texto ya va abajo de la caja. */
@media (min-width:761px){
  .vs-js .vscroll__txt--arriba{top:clamp(92px,13vh,150px);bottom:auto;left:0;right:0;margin-inline:auto;text-align:center}
  .vscroll__txt--arriba .vscroll__bajada{margin-inline:auto}
}
/* ── TELÉFONO, SEGUNDA VUELTA (2026-10-04, Jope: «queda muchísimo espacio
   vacío» abajo del texto). La caja deja de ser 16:9 (207 px de alto en un
   390): es CUADRADA (4:3 en las portadas, que llevan más texto) y el video
   va en cover con el foco en --vs-foco (x del object-position; cada demo lo
   pone en el style si lo importante no está al medio). Caja + texto van
   CENTRADOS en la pantalla (--vs-texto = lo que se le reserva al texto) y
   una barra fina al pie de la caja avanza con el scroll (--p, transform). ── */
@media (max-width:760px){
  .vscroll{--vs-prop:1;--vs-texto:230px;--vs-caja:calc((100vw - 24px) / var(--vs-prop));
    --vs-top:calc(64px + max(14px,(100svh - 64px - var(--vs-caja) - var(--vs-texto)) / 2))}
  .vscroll--portada{--vs-prop:1.3333;--vs-texto:330px}
  .vs-js .vscroll .vscroll__cuadro,.vs-js .vscroll--portada .vscroll__cuadro{top:var(--vs-top);height:var(--vs-caja);aspect-ratio:auto}
  .vs-js .vscroll .vscroll__txt,.vs-js .vscroll--portada .vscroll__txt{top:calc(var(--vs-top) + var(--vs-caja) + 26px)}
  .vscroll__cuadro video{object-position:var(--vs-foco,50%) 50%}
  .vs-js .vscroll__cuadro{background-position:var(--vs-foco,50%) 50%}
  .vs-js .vscroll__cuadro::before{content:"";position:absolute;z-index:3;left:0;right:0;bottom:0;height:3px;
    background:var(--vs-acento,#fff);transform-origin:0 50%;transform:scaleX(var(--p,0));opacity:.9;pointer-events:none}
  .vs-js .vscroll--lado .vscroll__cuadro{height:auto;top:0}
  .vs-js .vscroll--lado .vscroll__cuadro::before{display:none}
}
@media (max-width:760px) and (max-height:780px){
  .vscroll{--vs-prop:1.15;--vs-texto:230px}
  .vscroll--portada{--vs-prop:1.7778;--vs-texto:300px}
}