/* Fase B · Recorrido cinematográfico · 6-nov-2026 */
.rec{position:relative;height:620vh;background:#0b0b0b url(/m/materiales/concreto-w960.webp) center/cover fixed}
.rec-st{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.rec .sc{position:absolute;inset:0;margin:0;opacity:0;will-change:opacity,transform}
.rec .sc img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rec .sc.on{opacity:1}
.rec .s1 .nite{opacity:0}
.rec .car{position:absolute;bottom:7%;left:0;width:min(34vw,420px);z-index:6;will-change:transform;filter:drop-shadow(0 10px 18px rgba(0,0,0,.6))}
.rec .cel{position:absolute;inset:0;display:flex;z-index:7;pointer-events:none}
.rec .cel i{flex:1;background:#0b0b0b;transform:scaleY(0);transform-origin:top;border-right:3px solid #0b0b0b}
.rec .cel i:nth-child(4n+1){background:#F2EEE4}.rec .cel i:nth-child(4n+2){background:#DD0100}.rec .cel i:nth-child(4n+3){background:#FAC901}.rec .cel i:nth-child(4n){background:#225095}
.rec .cel i:nth-child(even){transform-origin:bottom}
.rec .win{position:absolute;inset:0;z-index:8;pointer-events:none;display:flex;opacity:0}
.rec .win i{flex:1;background:linear-gradient(135deg,rgba(34,80,149,.78),rgba(70,130,200,.55) 45%,rgba(34,80,149,.82));border:14px solid #0b0b0b;box-shadow:inset 0 0 0 2px rgba(255,255,255,.18);backdrop-filter:blur(2px)}
.rec .win i:after{content:"";position:absolute;width:6px;height:70px;background:#0b0b0b;top:50%;margin-top:-35px}
.rec .win .l:after{right:26px}.rec .win .r:after{left:26px}
.rec .win i{position:relative}
.rec .cap{position:absolute;left:clamp(16px,5vw,72px);bottom:clamp(90px,14vh,150px);z-index:10;width:min(620px,84vw);color:#fff}.rec .cap p{width:100%}
.rec .cap p{margin:0;position:absolute;bottom:0;left:0;opacity:0;transform:translateY(24px);transition:opacity .5s,transform .5s;text-shadow:0 2px 18px rgba(0,0,0,.75)}
.rec .cap p.on{opacity:1;transform:none}
.rec .cap small{display:inline-block;font:700 12px var(--sans);letter-spacing:.18em;text-transform:uppercase;background:#FAC901;color:#0b0b0b;padding:6px 10px;margin-bottom:10px}
.rec .cap b{display:block;font:400 clamp(28px,4.4vw,64px)/1.05 var(--ser)}
.rec .cap span{display:block;font-size:clamp(15px,1.3vw,19px);margin-top:10px;max-width:520px}
.rec .prog{position:absolute;right:clamp(12px,3vw,40px);top:50%;transform:translateY(-50%);z-index:10;display:grid;gap:10px}
.rec .prog i{width:12px;height:12px;border:2px solid #fff;background:transparent;transition:background .3s,transform .3s}
.rec .prog i.on{background:#FAC901;transform:scale(1.35)}
.rec .cta{position:absolute;right:clamp(16px,5vw,72px);bottom:clamp(90px,14vh,150px);z-index:11;opacity:0;pointer-events:none;transition:opacity .5s}
.rec .cta.on{opacity:1;pointer-events:auto}
.rec .hint{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:10;color:#fff;font:600 12px var(--sans);letter-spacing:.2em;text-transform:uppercase;animation:hb 1.6s ease-in-out infinite}
@keyframes hb{50%{transform:translate(-50%,8px)}}
.rec .shade{position:absolute;inset:0;z-index:5;background:linear-gradient(0deg,rgba(0,0,0,.7),transparent 55%);pointer-events:none}
.rec .lamp{position:absolute;z-index:4;width:10px;height:10px;border-radius:50%;background:#ffd36b;box-shadow:0 0 18px 8px rgba(255,200,90,.7);opacity:0}
/* portadas de video con marco Mondrian */
.vwrap{border:8px solid #0b0b0b;outline:2px solid #0b0b0b}
.vwrap:before,.vwrap:after{content:"";position:absolute;z-index:2;pointer-events:none}
.vwrap:before{top:-8px;left:-8px;width:22%;height:8px;background:#DD0100;animation:vb 6s ease-in-out infinite}
.vwrap:after{bottom:-8px;right:-8px;width:8px;height:30%;background:#225095;animation:vb2 7s ease-in-out infinite}
@keyframes vb{50%{width:48%;background:#FAC901}}@keyframes vb2{50%{height:60%;background:#DD0100}}
@media (prefers-reduced-motion:reduce){.rec{height:auto}.rec-st{position:relative;height:70vh}.rec .s1{opacity:1}.rec .car,.rec .cel,.rec .win,.rec .hint{display:none}}