/* ═══════════════════════════════════════════════════════════════════════════ RIA CHECKPOINT · piel (fork de la de Station, vestida para la puerta el 2026-11-02) La noche, el marfil y el dorado son los de la casa y no cambian. El acento del producto es el HIELO: el azul frío de la luz de una lectora de patentes de noche, #5db6ff, el hex que fijaron las marcas (scripts/construir-marcas.py). Las tres señales del producto viven al lado del acento sin mezclarse: VERDE = pasa / en vivo · ÁMBAR = revisar, lo que hay que mirar (la palabra en ámbar de las fichas) · ROJO = sólo lista de exclusión y pánico. LAVANDA = las cámaras y la infraestructura que ya está. Cada color vive DOS veces: en hex (lo sólido) y como tripleta -rgb (los rgba() y el canvas, que lee estos tokens con getComputedStyle). Ningún color se escribe a mano fuera de este bloque. Contrastes medidos sobre --fondo #0e0c1a (texto chico ≥ 4,5:1): marfil 15,8 · marfil-lo 7,9 · hielo 8,8 · ámbar 10,8 · verde 9,6 · rojo 5,5 · lavanda 7,4 · marca 8,9 · brasa 8,3. Sobre el hielo, el texto oscuro --fondo0 da 9,9 (las cabeceras del carnet, que se pintan con el color del veredicto, llevan texto oscuro). 🔴 --salvia, --terracota, --cielo y --espera conservan el NOMBRE de Grit porque el canvas los lee por ese nombre (TOKEN en motor.js), pero acá son lavanda, brasa, hielo y ámbar: ver el comentario de cada uno. ═══════════════════════════════════════════════════════════════════════════ */ :root{ --fondo:#0e0c1a; --fondo-rgb:14,12,26; /* la noche de RIA */ --fondo2:#16142c; --fondo2-rgb:22,20,44; /* superficie de tarjeta / pantalla */ --fondo0:#07060f; --fondo0-rgb:7,6,15; /* el fondo de los paneles = --eclipse-fondo: el cierre funde sin salto */ --aire:#040309; --aire-rgb:4,3,9; /* el borde del aire, en la película */ --marfil:#f0ece0; --marfil-rgb:240,236,224; /* el blanco cálido de la casa */ --marfil-lo:#aaa59a; --marfil-lo-rgb:170,165,154; --linea:#2a2744; --linea-rgb:42,39,68; --linea-fuerte:#4a4672; --linea-fuerte-rgb:74,70,114; --salvia:#a39db8; --salvia-rgb:163,157,184; /* ya no es salvia: LAVANDA. Las cámaras, los postes, la infraestructura que ya está */ --terracota:#ff8a4c; --terracota-rgb:255,138,76; /* ya no es terracota: BRASA. El atardecer y las luces de la playa de camiones */ --cielo:#5db6ff; --cielo-rgb:93,182,255; /* ya no es el azul de la casa: el HIELO, lo que se lee y se cuenta (= el acento) */ --ok:#3ecf7a; --ok-rgb:62,207,122; /* VERDE: PASA, en vivo, la barrera abierta */ --espera:#f4b740; --espera-rgb:244,183,64; /* ya no es espera: ÁMBAR, REVISAR y lo que hay que mirar. Más naranja que el dorado de --marca */ --alarma:#f0503f; --alarma-rgb:240,80,63; /* ROJO: sólo la lista de exclusión y el pánico */ --marca:#EF9F27; --marca-rgb:239,159,39; /* el dorado de RIA Labs: no cambia de piel */ --eclipse-fondo:#07060f; --eclipse-acento:#ffc670; --eclipse-brillo:#fff8ea; --hielo:#5db6ff; --hielo-rgb:93,182,255; /* el acento de RIA Checkpoint: el de marcas/ria-checkpoint.svg */ --ambar:var(--espera); --ambar-rgb:var(--espera-rgb); --acento:var(--hielo); --acento-rgb:var(--hielo-rgb); --border:rgba(var(--linea-fuerte-rgb),.36); --border-soft:rgba(var(--linea-rgb),.6); --display:'Geist','Helvetica Neue',system-ui,sans-serif; --sans:'Space Grotesk','Helvetica Neue',system-ui,sans-serif; --mono:'Geist Mono','SFMono-Regular',Menlo,Consolas,monospace; --mudo:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 9h4l5-4v14l-5-4H4z' fill='%23fff'/%3E%3Cpath d='M17 9.5l4 5M21 9.5l-4 5' stroke='%23fff' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); --suena:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 9h4l5-4v14l-5-4H4z' fill='%23fff'/%3E%3Cpath d='M16.5 9a4.2 4.2 0 0 1 0 6M19 6.5a7.6 7.6 0 0 1 0 11' stroke='%23fff' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:auto} body{ background:var(--fondo); color:var(--marfil); font-family:var(--sans); font-weight:300; overflow-x:clip; -webkit-font-smoothing:antialiased; } ::selection{background:var(--acento); color:var(--fondo)} a{color:var(--acento); text-decoration:none} .mono{font-family:var(--mono); font-variant-ligatures:none} img{max-width:100%} /* granulado sutil */ body::after{ content:''; position:fixed; inset:0; pointer-events:none; z-index:3; opacity:.04; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E"); } /* ── tipografía de la casa ── */ .kicker{ font-family:var(--mono); font-size:11px; font-weight:400; letter-spacing:.3em; text-transform:uppercase; color:var(--acento); } .kicker i{font-style:normal; padding:0 .9em; color:var(--linea-fuerte)} h1{ font-family:var(--display); font-weight:300; font-size:clamp(2.5rem,6.6vw,5.4rem); line-height:1.04; letter-spacing:-.025em; margin:22px 0 0; } h1 b{font-weight:600; color:var(--marfil)} h2{ font-family:var(--display); font-weight:300; font-size:clamp(1.8rem,4vw,2.9rem); line-height:1.14; letter-spacing:-.02em; max-width:19em; } h2 b{font-weight:600} .lede{ color:var(--marfil-lo); font-size:clamp(1rem,1.5vw,1.16rem); line-height:1.75; font-weight:300; max-width:40em; margin-top:22px; } .lede b{color:var(--marfil); font-weight:500} /* ── documento ── */ section{position:relative; padding:clamp(80px,13vh,160px) 6vw} .wrap{max-width:1180px; margin:0 auto; position:relative; z-index:2} .rule{height:1px; background:linear-gradient(90deg,transparent,var(--border) 18%,var(--border) 82%,transparent); max-width:1180px; margin:0 auto} .num{font-family:var(--mono); font-size:11px; color:var(--marfil-lo); letter-spacing:.3em; margin-bottom:14px} footer{ border-top:1px solid var(--border-soft); padding:34px 6vw 44px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px; font-family:var(--mono); font-size:10.5px; letter-spacing:.2em; color:var(--marfil-lo); } footer a{color:var(--marfil-lo)} footer a:hover{color:var(--acento)} footer .lockup{height:26px; width:auto; display:block; opacity:.92} footer .frase{font-family:var(--sans); font-weight:300; font-size:11px; letter-spacing:.04em; text-transform:none; color:var(--marfil-lo)} @media(max-width:640px){footer{justify-content:center; text-align:center}} /* el sello: HOY / EN DESARROLLO / A MEDIDA */ .sello{ display:inline-flex; align-items:center; gap:.6em; font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; padding:5px 12px; border-radius:20px; border:1px solid var(--border-soft); white-space:nowrap; } .sello::before{content:''; width:6px; height:6px; border-radius:50%; background:currentColor; box-shadow:0 0 8px currentColor; flex:none} .sello.hoy{color:var(--ok); border-color:rgba(var(--ok-rgb),.4)} .sello.dev{color:var(--espera); border-color:rgba(var(--espera-rgb),.42)} .sello.medida{color:var(--cielo); border-color:rgba(var(--cielo-rgb),.4)} /* fichas del documento */ .caps{display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:12px; margin-top:40px} .cap{ border:1px solid var(--border-soft); border-radius:14px; padding:20px 22px; background:linear-gradient(160deg, rgba(var(--fondo2-rgb),.6), rgba(var(--fondo0-rgb),.32)); display:flex; align-items:center; justify-content:space-between; gap:16px; } .cap h4{flex:1; font-weight:400; font-size:.96rem; line-height:1.4; color:var(--marfil)} .cap .via{display:block; margin-top:4px; font-family:var(--mono); font-size:9.5px; letter-spacing:.14em; color:var(--marfil-lo); text-transform:uppercase} .doc .rem{margin-top:30px; color:var(--marfil-lo); font-size:.95rem; line-height:1.7; max-width:44em} .doc .rem b{color:var(--marfil); font-weight:500} .actores{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:16px; margin-top:44px} .actor{ border:1px solid var(--border-soft); border-radius:14px; padding:26px 26px 24px; background:linear-gradient(160deg, rgba(var(--fondo2-rgb),.6), rgba(var(--fondo0-rgb),.32)); } .actor .who{font-family:var(--mono); font-size:11px; letter-spacing:.26em; text-transform:uppercase; color:var(--acento); margin-bottom:13px; display:block} .actor p{color:var(--marfil-lo); font-size:.93rem; line-height:1.66} .actor p b{color:var(--marfil); font-weight:500} .cta{ display:inline-block; padding:15px 38px; border:1px solid var(--acento); border-radius:40px; color:var(--acento); font-family:var(--mono); font-size:11.5px; letter-spacing:.26em; text-transform:uppercase; transition:background .4s, color .4s, box-shadow .4s; } .cta:hover{background:var(--acento); color:var(--fondo); box-shadow:0 0 40px rgba(var(--acento-rgb),.32)} .cta.suave{border-color:var(--border-soft); color:var(--marfil-lo)} .cta.suave:hover{background:transparent; color:var(--marfil); border-color:var(--acento); box-shadow:none} @media(max-width:760px){ .cap{flex-direction:column; align-items:flex-start; gap:10px} } /* ═══════════════════════════════════════════════════════════════════════════ LA PELÍCULA — el contenedor alto con el panel pegado. 🔴 Si cambia esta altura, cambiar -1300/-1100 en scripts/capturar.sh. ═══════════════════════════════════════════════════════════════════════════ */ .film{position:relative; padding:0; height:1400vh} @media(max-width:760px){.film{height:1200vh}} .pin{position:sticky; top:0; height:100svh; overflow:hidden; background:var(--fondo)} #peli{position:absolute; inset:0; width:100%; height:100%; z-index:0; display:block} .pin .veil{ position:absolute; inset:0; z-index:1; pointer-events:none; background: radial-gradient(ellipse 84% 66% at 50% 48%, transparent 40%, rgba(var(--fondo-rgb),.38) 82%, var(--fondo) 100%), linear-gradient(180deg, rgba(var(--fondo-rgb),.66), transparent 20%, transparent 66%, rgba(var(--fondo-rgb),.82)); } .brandbar{ position:absolute; top:0; left:0; right:0; z-index:4; display:flex; align-items:center; justify-content:space-between; padding:24px 6vw; font-family:var(--mono); font-size:11px; letter-spacing:.24em; color:var(--marfil-lo); } .brandbar .l{display:flex; align-items:center; gap:12px} .brandbar .l a{color:var(--marfil-lo)} .brandbar .led{width:8px; height:8px; border-radius:50%; background:var(--acento); box-shadow:0 0 10px rgba(var(--acento-rgb),.7); animation:respira 3.2s ease-in-out infinite} @keyframes respira{50%{opacity:.4; box-shadow:0 0 3px rgba(var(--acento-rgb),.3)}} .brandbar a{color:var(--marfil-lo); transition:color .4s} .brandbar a:hover{color:var(--acento)} .brandbar .logo{height:18px; width:auto; display:block; opacity:.9} /* el título del preludio */ .titulo{ position:absolute; inset:0; z-index:3; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:0 6vw; will-change:opacity,transform; pointer-events:none; } .titulo .sub{margin-top:26px; color:rgba(var(--marfil-rgb),.86); font-size:clamp(1rem,1.6vw,1.2rem); line-height:1.7; max-width:36em; font-weight:300; text-shadow:0 0 3px rgba(var(--fondo0-rgb),.95), 0 1px 14px rgba(var(--fondo0-rgb),.9)} /* el título se lee SOBRE el mundo (la tira de locales le pasa por detrás a la bajada): un halo de noche detrás del bloque. Vive adentro de .titulo, así que hereda su opacidad y se va con él cuando arranca la película; el mundo queda a la vista en los bordes. (Matías, 02/11: «se lee poco») */ .titulo::before{ content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; background:radial-gradient(ellipse 50% 42% at 50% 56%, rgba(var(--fondo-rgb),.88) 0%, rgba(var(--fondo-rgb),.72) 52%, rgba(var(--fondo-rgb),0) 100%); } .titulo .sub b{color:var(--marfil); font-weight:500} .titulo .word{margin-bottom:24px} /* el lockup del producto: el isotipo de Checkpoint (marcas/ria-checkpoint.svg —el umbral—, inline provisorio que se reemplaza por el archivo al cargar) + «RIA Checkpoint» con la construcción del wordmark de la casa: Saira, RIA en 500 y la segunda palabra en 300 —como «Labs»—, pero en el hielo del producto. */ .word{display:flex; align-items:center; justify-content:center; gap:.42em; font-size:clamp(1.45rem,2.8vw,2.15rem)} .word .anillo{width:1.3em; height:1.3em; flex:none; display:block; filter:drop-shadow(0 0 .35em rgba(var(--acento-rgb),.35))} .word .nom{font-family:'Saira',var(--display); font-weight:500; font-size:1em; line-height:1; letter-spacing:.08em; color:var(--marfil); white-space:nowrap} .word .nom b{font-weight:300; letter-spacing:.03em; color:var(--acento)} /* el botón de reproducir: el único elemento del título que se puede tocar */ .titulo .play{ pointer-events:auto; margin-top:34px; display:inline-flex; align-items:center; gap:14px; padding:16px 34px 16px 26px; border:1px solid rgba(var(--acento-rgb),.6); border-radius:40px; background:rgba(var(--fondo0-rgb),.55); color:var(--marfil); cursor:pointer; font-family:var(--mono); font-size:11.5px; letter-spacing:.26em; text-transform:uppercase; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); transition:background .4s, color .4s, box-shadow .4s, border-color .4s; } .titulo .play::before{content:''; width:0; height:0; border-left:12px solid var(--acento); border-top:7px solid transparent; border-bottom:7px solid transparent} .titulo .play:hover{background:var(--acento); color:var(--fondo); box-shadow:0 0 40px rgba(var(--acento-rgb),.35)} .titulo .play:hover::before{border-left-color:var(--fondo)} /* fichas: por umbral de progreso, abajo a la izquierda */ .ficha{ position:absolute; z-index:4; left:6vw; bottom:13vh; width:min(440px,82vw); padding:22px 26px 24px; border-radius:8px; border:1px solid var(--border); background:linear-gradient(155deg, rgba(var(--fondo2-rgb),.9), rgba(var(--fondo-rgb),.8)); backdrop-filter:blur(16px) saturate(1.2); -webkit-backdrop-filter:blur(16px) saturate(1.2); box-shadow:0 30px 80px rgba(0,0,0,.5); opacity:0; transform:translateY(24px); will-change:opacity,transform; } .ficha::before{content:''; position:absolute; left:0; top:18px; bottom:18px; width:2px; background:var(--acento); box-shadow:0 0 10px rgba(var(--acento-rgb),.6)} .ficha .k{font-family:var(--mono); font-size:10px; letter-spacing:.3em; color:var(--acento); text-transform:uppercase; display:block; margin-bottom:14px} .ficha h3{font-family:var(--display); font-weight:300; font-size:clamp(1.3rem,2.3vw,1.72rem); line-height:1.2; letter-spacing:-.02em; color:var(--marfil)} .ficha h3 b{font-weight:600} .ficha h3 em, .ficha p em{font-style:normal; color:var(--ambar)} /* la palabra que importa, en ámbar, como en la familia */ .ficha p{margin-top:12px; color:var(--marfil-lo); font-size:.92rem; line-height:1.62} .ficha p b{color:var(--marfil); font-weight:500} .ficha .dato{display:block; margin-top:14px; font-family:var(--mono); font-size:10px; letter-spacing:.14em; color:var(--marfil-lo); line-height:1.7; text-transform:uppercase} .ficha .dato i{font-style:normal; color:var(--ambar)} .ficha.prologo{bottom:30vh} .ficha.derecha{left:auto; right:6vw} /* las fichas viven a la DERECHA (como en Station): el carnet ocupa la esquina de arriba a la izquierda */ body.fichas-derecha .ficha{left:auto; right:6vw} body.fichas-derecha .ficha::before{left:auto; right:0} @media(max-width:760px){ .ficha{left:5vw; right:5vw; width:auto; bottom:9vh; padding:18px 18px 20px} .ficha p{font-size:.9rem; line-height:1.6} .ficha.prologo{bottom:4vh} .ficha.derecha{left:5vw; right:5vw} body.fichas-derecha .ficha{left:5vw; right:5vw} } /* los momentos de marca */ .marca{ position:absolute; inset:0; z-index:6; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:26px; pointer-events:none; opacity:0; visibility:hidden; will-change:opacity,transform; } .marca .ria-svg{width:min(300px,42vw); height:auto; display:block} .marca-linea{font-family:var(--mono); font-size:11px; letter-spacing:.34em; text-transform:uppercase; color:var(--marca); opacity:.85; text-align:center} .final{justify-content:flex-start; gap:0; padding:0 6vw} .final .hueco{height:calc(38vh + 24vmin); flex:none} .final .marcaGrande{font-family:var(--display); font-weight:300; font-size:clamp(2.2rem,7vw,4.4rem); letter-spacing:.14em; color:var(--eclipse-brillo); line-height:1; text-shadow:0 0 44px rgba(255,158,48,.35)} .final .marcaGrande b{font-weight:600; letter-spacing:.04em; margin-right:.3em} .final .marca-linea{margin-top:16px; color:var(--eclipse-acento); opacity:.9} .final .frase{margin-top:32px; font-family:var(--mono); font-size:clamp(1rem,2.2vw,1.5rem); letter-spacing:.06em; color:var(--eclipse-brillo); text-align:center; max-width:32em; line-height:1.45; text-shadow:0 0 30px rgba(255,198,112,.35)} .final .lema{margin-top:14px; font-family:var(--display); font-weight:500; font-size:clamp(.95rem,1.9vw,1.3rem); letter-spacing:.06em; text-transform:uppercase; color:var(--eclipse-brillo); text-align:center; line-height:1.4} .final .lema b{color:var(--acento); font-weight:600} .final .firma{margin-top:16px; font-family:var(--mono); font-size:10px; letter-spacing:.26em; text-transform:uppercase; color:rgba(255,248,234,.62); text-align:center} .final .acciones{pointer-events:auto; margin-top:30px; display:flex; gap:12px; flex-wrap:wrap; justify-content:center} .final .acciones a{ display:inline-block; padding:12px 26px; border:1px solid rgba(255,198,112,.55); border-radius:40px; color:var(--eclipse-brillo); font-family:var(--mono); font-size:10.5px; letter-spacing:.24em; text-transform:uppercase; transition:background .4s, color .4s; } .final .acciones a:hover{background:var(--eclipse-acento); color:var(--eclipse-fondo)} .final .cuenta{margin-top:14px; font-family:var(--mono); font-size:10px; letter-spacing:.2em; color:rgba(255,248,234,.5); text-transform:uppercase} @media(max-width:760px){ .marca .ria-svg{width:58vw} .marca-linea{font-size:9.5px; letter-spacing:.26em} .final .hueco{height:calc(38vh + 20vmin)} .final .frase{margin-top:22px} } /* instrumentos: barra, marcas, HUD */ .barra{position:absolute; top:0; left:0; height:2px; z-index:6; width:0; background:linear-gradient(90deg,rgba(var(--acento-rgb),.55),var(--acento)); box-shadow:0 0 12px rgba(var(--acento-rgb),.55)} .marcas{position:absolute; z-index:5; top:0; left:0; right:0; height:2px; pointer-events:none} .marcas i{position:absolute; top:0; width:1px; height:6px; background:rgba(var(--marfil-rgb),.35)} .marcas i.v{height:9px; background:rgba(var(--marca-rgb),.7)} .hud{ position:absolute; z-index:5; top:72px; left:6vw; right:6vw; display:flex; justify-content:space-between; align-items:baseline; gap:20px; font-family:var(--mono); font-size:11px; letter-spacing:.24em; color:var(--marfil-lo); pointer-events:none; } .hud .l{display:flex; flex-direction:column; gap:6px} .hud .tray{font-size:9.5px; letter-spacing:.3em; color:var(--marfil-lo); opacity:.8} .hud .acto{color:var(--acento); text-transform:uppercase} .hud, .brandbar{transition:opacity .5s ease} .hud .reloj{ color:var(--marfil); font-size:15px; letter-spacing:.1em; font-variant-numeric:tabular-nums; white-space:nowrap; padding:6px 12px; border:1px solid var(--border-soft); border-radius:4px; background:rgba(var(--fondo0-rgb),.55); } .hud .reloj::before{content:''; display:inline-block; width:6px; height:6px; border-radius:1px; background:var(--acento); margin-right:10px; vertical-align:2px; box-shadow:0 0 8px rgba(var(--acento-rgb),.7); animation:respira 1.6s steps(1) infinite} @media(max-width:760px){ .hud{top:58px; font-size:9.5px; letter-spacing:.18em} .hud .reloj{font-size:12px; padding:5px 9px} .hud .tray{font-size:8.5px} .brandbar{padding:18px 5vw; font-size:9.5px; letter-spacing:.18em} .titulo .kicker{font-size:9.5px; letter-spacing:.2em; max-width:24em; line-height:1.9} .titulo .kicker i{display:none} .titulo .kicker span{display:block} .titulo .sub{margin-top:20px} .titulo::before{background:radial-gradient(ellipse 95% 46% at 50% 56%, rgba(var(--fondo-rgb),.9) 0%, rgba(var(--fondo-rgb),.74) 55%, rgba(var(--fondo-rgb),0) 100%)} } @media(max-width:520px){ .brandbar .r{display:none} } /* los dos interruptores: reproducir / pausa (abajo a la izquierda) y sonido (abajo a la derecha) */ .son, .ctl{ position:absolute; z-index:7; bottom:34px; display:flex; align-items:center; gap:9px; padding:9px 16px 9px 13px; background:rgba(var(--fondo0-rgb),.6); border:1px solid var(--border-soft); border-radius:4px; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); font-family:var(--mono); font-size:10px; letter-spacing:.26em; text-transform:uppercase; color:var(--marfil-lo); cursor:pointer; transition:color .4s, border-color .4s, opacity .5s; } .son{right:6vw} .ctl{left:6vw} .son:hover, .ctl:hover{color:var(--marfil); border-color:var(--border)} .son.nuevo{color:var(--marfil); border-color:rgba(var(--acento-rgb),.4)} .son .ico{width:13px; height:13px; flex:none; background:currentColor; -webkit-mask:var(--mudo) center/contain no-repeat; mask:var(--mudo) center/contain no-repeat} .son[aria-pressed="true"]{color:var(--acento); border-color:rgba(var(--acento-rgb),.45)} .son[aria-pressed="true"] .ico{-webkit-mask-image:var(--suena); mask-image:var(--suena)} .ctl .ico{width:0; height:0; border-left:10px solid currentColor; border-top:6px solid transparent; border-bottom:6px solid transparent; flex:none} .ctl[aria-pressed="true"]{color:var(--acento); border-color:rgba(var(--acento-rgb),.45)} .ctl[aria-pressed="true"] .ico{border:0; width:9px; height:12px; border-left:3px solid currentColor; border-right:3px solid currentColor} @media(max-width:760px){ .son{right:5vw; bottom:26px} .ctl{left:5vw; bottom:26px} .son .txt, .ctl .txt{display:none} .son, .ctl{padding:8px 11px} } @media (prefers-reduced-motion:reduce){ .son, .ctl{display:none} } .scrollcue{ position:absolute; bottom:34px; left:50%; transform:translateX(-50%); z-index:4; font-family:var(--mono); font-size:10px; letter-spacing:.3em; color:var(--marfil-lo); display:flex; flex-direction:column; align-items:center; gap:10px; transition:opacity .6s; } .scrollcue::after{content:''; width:1px; height:44px; background:linear-gradient(180deg,var(--acento),transparent); animation:cae 2.2s ease-in-out infinite} @keyframes cae{0%{transform:scaleY(0); transform-origin:top}55%{transform:scaleY(1); transform-origin:top}56%{transform-origin:bottom}100%{transform:scaleY(0); transform-origin:bottom}} @media (prefers-reduced-motion: reduce){ *{animation:none!important} .film{height:auto} .pin{position:relative; height:100svh} .ficha{display:none} } /* ═══════════════════════════════════════════════════════════════════════════ CHECKPOINT · lo propio de esta película (en Station vivía en el