/* ORIGEN · CAPA CINE sobre la landing real
   No sustituye nada: transforma. Contenido, VSL, escáner, Cal.com y tracking siguen intactos debajo. */

/* ---------- letterbox + HUD ---------- */
.cinefilm .lb{ position:fixed; left:0; right:0; height:clamp(12px,2.6vh,26px); z-index:120; background:#000; pointer-events:none; }
.cinefilm .lb--top{ top:0; } .cinefilm .lb--bot{ bottom:0; }
.cinefilm .hud{ position:fixed; z-index:121; font-family:var(--body); font-size:10.5px; letter-spacing:.26em; text-transform:uppercase; color:var(--ink-3); pointer-events:none; text-shadow:0 1px 10px rgba(0,0,0,.9); }
.cinefilm .hud--rec{ bottom:calc(clamp(12px,2.6vh,26px) + 14px); left:18px; display:flex; align-items:center; gap:7px; }
.cinefilm .recdot{ width:6px; height:6px; border-radius:50%; background:var(--acc); }
@media(prefers-reduced-motion:no-preference){ .cinefilm .recdot{ animation:cf-rec 2.4s ease-in-out infinite; } }
@keyframes cf-rec{ 0%,100%{ opacity:1; } 50%{ opacity:.25; } }
.cinefilm .journey{ top:clamp(12px,2.6vh,26px); height:2px; }
.cinefilm .journey__label{ top:12px; right:16px; background:transparent; border:none; backdrop-filter:none; letter-spacing:.26em; font-size:10.5px; color:var(--ink-3); text-shadow:0 1px 10px rgba(0,0,0,.9); padding:0; }
@media(max-width:760px){ .cinefilm .hud{ font-size:9px; letter-spacing:.2em; } .cinefilm .hud--rec{ left:12px; } }
.cinefilm .topbar{ margin-top:clamp(12px,2.6vh,26px); }

/* ---------- foco móvil + brasa ---------- */
.cinefilm .camf{ position:fixed; inset:0; z-index:0; pointer-events:none; background:radial-gradient(60% 48% at var(--cx,50%) var(--cy,26%), rgba(244,241,234,.10), transparent 74%); }
.cinefilm .brasaf{ position:fixed; left:0; right:0; bottom:0; height:42vh; z-index:0; pointer-events:none; background:linear-gradient(0deg, var(--brasa, rgba(229,35,43,.08)), transparent 80%); transition:background 1.2s ease; }

/* ---------- cada sección es una escena ---------- */
.cinefilm .section{ min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; justify-content:center; padding-block:clamp(80px,11vh,140px); position:relative; z-index:2; }
.cinefilm .section--tight{ min-height:auto; padding-block:clamp(50px,8vh,90px); }
.cinefilm .hero{ min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; justify-content:center; position:relative; z-index:2; }
.cinefilm .camf, .cinefilm .brasaf{ z-index:0 !important; }
.cinefilm .head, .cinefilm .topbar, .cinefilm footer, .cinefilm .foot{ position:relative; z-index:3; }
.cinefilm #reserva, .cinefilm .section:has(.faq), .cinefilm .section:has(.tl){ min-height:auto; }

/* ---------- tipografía de cine ---------- */
.cinefilm .h1, .cinefilm .hero__h1{ font-size:clamp(34px,min(7vw,9vh),104px) !important; line-height:.95 !important; letter-spacing:-.045em !important; }
.cinefilm .h2{ font-size:clamp(28px,min(5.4vw,7.4vh),80px) !important; line-height:.99 !important; letter-spacing:-.04em !important; }
.cinefilm .h3{ letter-spacing:-.02em; }
.cinefilm .eyebrow{ letter-spacing:.34em; font-size:clamp(10px,1.1vw,12px); }
.cinefilm .lead{ font-size:clamp(16px,min(1.9vw,2.5vh),24px); line-height:1.5; }

/* ---------- ACTO I · los dolores, cada uno con su número ---------- */
.cinefilm .hits{ border:none; background:transparent; gap:clamp(20px,3.4vh,40px); margin-top:clamp(30px,5vh,56px); }
.cinefilm .hit{ position:relative; background:transparent; border-top:1px solid var(--hair); padding:clamp(20px,3vh,34px) 0 clamp(20px,3vh,34px) clamp(58px,7vw,104px); align-items:flex-start; }
.cinefilm .hit::before{ content:attr(data-n); position:absolute; left:0; top:clamp(14px,2.2vh,26px); font-family:var(--display); font-weight:800; font-size:clamp(30px,min(4.4vw,6vh),64px); line-height:.8; letter-spacing:-.05em; color:transparent; -webkit-text-stroke:1.3px rgba(247,244,238,.2); }
.cinefilm .hit__x{ display:none; }
.cinefilm .hit__txt p:first-child{ font-family:var(--display); font-weight:800; font-size:clamp(19px,min(2.9vw,3.9vh),38px); line-height:1.12; letter-spacing:-.03em; color:var(--ink); }
.cinefilm .hit__txt p:first-child b{ color:var(--acc); }
.cinefilm .hit--mio{ border-top-color:var(--acc-line); }
.cinefilm .hit--mio::before{ -webkit-text-stroke-color:var(--acc); color:transparent; }
.cinefilm .hit__yo{ margin-top:16px; display:inline-flex; align-items:center; gap:10px; font-family:var(--body); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); background:transparent; border:1px solid var(--hair); border-radius:999px; padding:11px 19px; cursor:pointer; transition:border-color .25s,color .25s,background .25s,transform .2s; }
.cinefilm .hit__yo:hover{ border-color:var(--acc); color:var(--ink); }
.cinefilm .hit__yo:active{ transform:scale(.97); }
.cinefilm .hit__yo.si{ background:var(--acc); border-color:var(--acc); color:var(--acc-ink); }
.cinefilm .hit__yo .bx{ width:13px; height:13px; border:1.4px solid currentColor; border-radius:3px; display:grid; place-items:center; font-size:9px; line-height:1; }
.cinefilm .vered{ margin-top:clamp(26px,4vh,44px); display:flex; flex-wrap:wrap; align-items:center; gap:14px 26px; padding:clamp(18px,2.6vh,26px) clamp(20px,3vw,30px); border:1px solid var(--acc-line); border-radius:14px; background:var(--acc-soft); opacity:0; transform:translateY(10px); transition:opacity .6s ease, transform .6s ease; }
.cinefilm .vered.on{ opacity:1; transform:none; }
.cinefilm .vered__n{ font-family:var(--display); font-weight:800; font-size:clamp(40px,6vw,76px); line-height:.85; letter-spacing:-.05em; color:var(--acc); font-variant-numeric:tabular-nums; }
.cinefilm .vered__t{ font-size:clamp(15px,1.7vw,19px); color:var(--ink); margin:0; max-width:34ch; }

/* ---------- ACTO II · la cuenta, cifra gigante ---------- */
.cinefilm .calc{ border:none; background:transparent; padding:0; margin-top:clamp(34px,5vh,60px); }
.cinefilm .calc__head{ border:none; padding:0 0 clamp(22px,3.4vh,34px); }
.cinefilm .calc__title{ font-family:var(--display); font-weight:800; font-size:clamp(20px,2.6vw,32px); letter-spacing:-.02em; }
.cinefilm .calc__body{ display:grid; grid-template-columns:1fr; gap:clamp(28px,4vh,48px); align-items:center; border:none; padding:0; }
@media(min-width:900px){ .cinefilm .calc__body{ grid-template-columns:minmax(0,.9fr) minmax(0,1fr); gap:clamp(40px,5vw,80px); } }
.cinefilm .calc__result{ border:none; background:transparent; padding:0; text-align:center; }
.cinefilm .calc__big{ font-family:var(--display); font-weight:800; font-size:clamp(72px,min(15vw,21vh),210px) !important; line-height:.8; letter-spacing:-.06em; color:var(--acc); text-shadow:0 0 70px rgba(229,35,43,.3); font-variant-numeric:tabular-nums; }
.cinefilm .calc__big.pum{ animation:cf-pum .7s cubic-bezier(.22,1,.36,1); }
@keyframes cf-pum{ 0%{ transform:scale(1); } 26%{ transform:scale(1.09); } 100%{ transform:scale(1); } }
.cinefilm .calc__text{ font-family:var(--serif); font-size:clamp(15px,1.8vw,21px); line-height:1.45; max-width:30ch; margin-inline:auto; }
.cinefilm .calc__foot{ border:none; text-align:center; padding-top:clamp(20px,3vh,32px); font-size:11.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-3); }

/* ---------- ACTO III · el giro ---------- */
.cinefilm #deseo .h2{ font-size:clamp(30px,min(6.4vw,8.6vh),104px) !important; letter-spacing:-.05em !important; }
.cinefilm #deseo .h2 .acc{ display:inline-block; }

/* ---------- la cortina antes/después ---------- */
.cinefilm .cortina{ position:relative; width:100%; max-width:1000px; margin:clamp(30px,5vh,56px) auto 0; aspect-ratio:16/9; overflow:hidden; border-radius:4px; cursor:ew-resize; touch-action:pan-y; user-select:none; box-shadow:0 30px 90px rgba(0,0,0,.65); }
.cinefilm .cortina img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none; }
.cinefilm .cortina__b{ clip-path:inset(0 0 0 var(--x,80%)); }
.cinefilm .cortina__r{ position:absolute; top:0; bottom:0; left:var(--x,80%); width:2px; background:var(--acc); box-shadow:0 0 22px rgba(229,35,43,.85); pointer-events:none; }
.cinefilm .cortina__a{ position:absolute; top:50%; left:var(--x,80%); transform:translate(-50%,-50%); width:clamp(42px,4.6vw,56px); aspect-ratio:1; border-radius:50%; background:var(--acc); color:var(--acc-ink); display:grid; place-items:center; font-size:clamp(15px,1.7vw,19px); pointer-events:none; box-shadow:0 6px 30px rgba(229,35,43,.5); }
.cinefilm .cortina__tg{ position:absolute; top:14px; font-family:var(--body); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; padding:7px 13px; border-radius:999px; pointer-events:none; }
.cinefilm .cortina__tg--a{ left:14px; background:rgba(8,8,10,.8); color:var(--ink-2); }
.cinefilm .cortina__tg--b{ right:14px; background:var(--acc); color:var(--acc-ink); }
.cinefilm .cortina__pie{ text-align:center; font-family:var(--serif); font-size:clamp(14px,1.6vw,18px); color:var(--ink-3); margin:clamp(16px,2.4vh,26px) auto 0; max-width:46ch; }
.cinefilm .cortina__pie b{ color:var(--ink); font-weight:600; }

/* ---------- ACTO V · quién soy, tu foto a sangre ---------- */
.cinefilm #quien{ padding:0; overflow:hidden; }
.cinefilm #quien > .wrap{ position:relative; min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; justify-content:flex-end; padding-block:clamp(70px,10vh,120px); }
.cinefilm #quien .quien{ display:block; }
.cinefilm #quien .foto{ position:absolute; inset:0; width:100%; height:100%; aspect-ratio:auto; border:none; border-radius:0; z-index:0; margin:0; }
.cinefilm #quien .foto__img{ width:100%; height:100%; object-fit:cover; object-position:center 22%; filter:grayscale(1) contrast(1.06); }
@media(prefers-reduced-motion:no-preference){ .cinefilm #quien .foto__img{ animation:cf-respira 24s ease-in-out infinite alternate; } @keyframes cf-respira{ from{ transform:scale(1); } to{ transform:scale(1.06); } } }
.cinefilm #quien .foto::after{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(8,8,10,.62) 0%, rgba(8,8,10,.2) 30%, rgba(8,8,10,.95) 84%); }
.cinefilm #quien .foto__deco{ display:none; }
.cinefilm #quien .eyebrow, .cinefilm #quien .h2{ position:relative; z-index:2; }
.cinefilm #quien .quien__body{ position:relative; z-index:2; max-width:58ch; }
.cinefilm .manuc{ font-family:var(--serif); font-style:italic; font-size:clamp(20px,min(3vw,4.2vh),42px); line-height:1.24; color:var(--ink); margin:0 0 clamp(16px,2.4vh,26px); max-width:20ch; clip-path:inset(0 100% 0 0); }
.cinefilm .manuc.puesta{ clip-path:inset(0 0 0 0); transition:clip-path 2.2s cubic-bezier(.4,0,.2,1); }
.cinefilm .manuc .acc{ color:var(--acc-hi); }

/* ---------- el método: número hueco ---------- */
.cinefilm .dd__title{ font-size:clamp(20px,2.8vw,34px); }

/* ---------- garantía y reserva ---------- */
.cinefilm #garantia .h2{ font-size:clamp(26px,min(4.8vw,6.6vh),72px) !important; }
.cinefilm .reserva__h{ font-size:clamp(28px,min(5.4vw,7.4vh),82px) !important; }

/* RED DE SEGURIDAD: ningún contenido depende del observer para ser visible. */
.cinefilm .reveal.pre{ opacity:1 !important; transform:none !important; }
.cinefilm .h1.reveal.pre, .cinefilm .h2.reveal.pre{ -webkit-mask-position:0 0 !important; mask-position:0 0 !important; transform:none !important; }

/* ---------- entradas: se AÑADEN, nunca ocultan ---------- */
@media(prefers-reduced-motion:no-preference){
  .cinefilm .escena.viva .reveal{ animation:cf-entra .95s cubic-bezier(.16,1,.3,1) both; }
  .cinefilm .escena.viva .reveal:nth-child(2){ animation-delay:.09s; }
  .cinefilm .escena.viva .reveal:nth-child(3){ animation-delay:.18s; }
  .cinefilm .escena.viva .reveal:nth-child(4){ animation-delay:.27s; }
  .cinefilm .escena.viva .reveal:nth-child(5){ animation-delay:.36s; }
  @keyframes cf-entra{ from{ opacity:0; transform:translateY(28px); filter:blur(11px); } to{ opacity:1; transform:none; filter:blur(0); } }
}

/* ---------- el VSL, más cine ---------- */
.cinefilm .vsl{ max-width:1000px; box-shadow:0 30px 90px rgba(0,0,0,.6); }
@media(prefers-reduced-motion:no-preference){ .cinefilm .vsl{ transition:transform .9s cubic-bezier(.22,1,.36,1), box-shadow .9s; } .cinefilm .vsl.is-playing{ transform:scale(1.015); box-shadow:0 40px 110px rgba(0,0,0,.7); } }

@media(prefers-reduced-motion:reduce){ .cinefilm .section, .cinefilm .hero, .cinefilm #quien > .wrap{ min-height:auto; } .cinefilm .manuc{ clip-path:none; } }


/* ---------- cortina: placeholder cuando aún no hay fotos de producto ---------- */
.cinefilm .cortina{ background:repeating-linear-gradient(45deg, #17171b 0 14px, #131316 14px 28px); }
.cinefilm .cortina::before{ content:"[ foto de producto pendiente ]"; position:absolute; inset:0; z-index:0;
  display:grid; place-items:center; text-align:center; padding:0 8%; font-family:var(--body);
  font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3); }
/* la img que sí cargue tapa el placeholder; la que falle deja ver el rayado + rótulo */
.cinefilm .cortina img{ background:repeating-linear-gradient(45deg, #17171b 0 14px, #131316 14px 28px); z-index:1; }
.cinefilm .cortina img:not([src]), .cinefilm .cortina img[src=""]{ opacity:0; }


/* ============================================================
   EL VIAJE · Antes/Después inmersivo (el punto de Origen recorre el camino)
   ============================================================ */
.cinefilm .viaje{ position:relative; max-width:760px; margin:clamp(36px,5vw,60px) auto 0; padding-left:clamp(46px,6vw,72px); }
.cinefilm .viaje__rail{ position:absolute; left:clamp(15px,2vw,24px); top:6px; bottom:6px; width:2px; background:rgba(247,244,238,.12); border-radius:2px; }
.cinefilm .viaje__fill{ position:absolute; left:0; top:0; width:100%; height:calc(var(--vp,0)*100%); background:linear-gradient(180deg,var(--acc-hi,#FB4148),var(--rojo,#E5232B)); border-radius:2px; box-shadow:0 0 16px rgba(229,35,43,.6); transition:height .7s cubic-bezier(.4,0,.2,1); }
.cinefilm .viaje__dot{ position:absolute; left:50%; top:calc(var(--vp,0)*100%); transform:translate(-50%,-50%); color:var(--acc-hi); transition:top .7s cubic-bezier(.4,0,.2,1); filter:drop-shadow(0 0 8px rgba(229,35,43,.8)); }
.cinefilm .viaje__mark{ position:relative; padding:6px 0 6px 0; }
.cinefilm .viaje__mark--start{ margin-bottom:8px; }
.cinefilm .viaje__mark--end{ margin-top:8px; }
.cinefilm .viaje__tag{ font-family:var(--mono,'Roboto Mono',monospace); font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-3); }
.cinefilm .viaje__tag--b{ color:var(--acc-hi); }
.cinefilm .via{ position:relative; padding:clamp(18px,2.6vh,28px) 0; }
.cinefilm .via__node{ position:absolute; left:calc(-1*clamp(46px,6vw,72px) + clamp(15px,2vw,24px) + 1px); top:clamp(26px,3.4vh,38px); width:11px; height:11px; border-radius:50%; transform:translate(-50%,-50%); background:#1a1a1e; border:2px solid rgba(247,244,238,.2); transition:background .5s,border-color .5s,box-shadow .5s; }
.cinefilm .via.on .via__node{ background:var(--acc); border-color:var(--acc-hi); box-shadow:0 0 12px rgba(229,35,43,.7); }
.cinefilm .via__card{ position:relative; }
.cinefilm .via__hoy{ font-size:clamp(17px,2vw,21px); line-height:1.4; color:var(--ink-3); transition:opacity .5s,transform .5s,filter .5s; }
.cinefilm .via.on .via__hoy{ opacity:.32; transform:translateY(-4px); text-decoration:line-through; text-decoration-color:rgba(247,244,238,.25); }
.cinefilm .via__sis{ font-size:clamp(18px,2.2vw,24px); line-height:1.35; font-family:var(--display,'Archivo',sans-serif); font-weight:600; letter-spacing:-.01em; color:var(--ink); margin-top:8px; opacity:0; transform:translateY(10px); max-height:0; overflow:hidden; transition:opacity .6s ease .1s,transform .6s cubic-bezier(.2,.8,.2,1) .1s,max-height .6s ease; }
.cinefilm .via__sis b{ color:var(--acc-hi); }
.cinefilm .via.on .via__sis{ opacity:1; transform:none; max-height:180px; }
@media(prefers-reduced-motion:reduce){
  .cinefilm .via__sis{ opacity:1; transform:none; max-height:none; }
  .cinefilm .viaje__fill,.cinefilm .viaje__dot{ transition:none; }
}