/* Apertura a altura de ventana y recorrido breve para completar el giro visible. */
:root { --header-height:70px; }
.cinema { height:auto; background:#1d0a26; }
.cinema-sticky,.motion-reduced .cinema-sticky {
 position:relative; top:0; height:calc(100svh - var(--header-height)); min-height:560px;
}
.cinema-inner {
 position:relative; height:100%; padding-block:32px 40px;
 grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:0;
}
.cinema-copy { padding:0; align-self:center; }
.cinema-copy .eyebrow { margin-bottom:24px; color:#ddcbe6; }
.cinema h1 { font-size:clamp(32px,min(10.7cqw,7.8svh),72px); line-height:1.055; letter-spacing:-.055em; }
.cinema h1 .titulo-marca { margin-top:8px; }
.cinema-description { max-width:430px; margin-block:28px; color:#ddcbe6; }
.cinema-secondary { margin-top:20px; }
.cinema-grain {
 background:radial-gradient(ellipse at 80% 30%,#60235b50,transparent 50%),
 radial-gradient(ellipse at 95% 100%,#06356870,transparent 48%),
 linear-gradient(120deg,#1d0a26 5%,#230d31 65%,#16102c);
}
.device-stage { height:100%; max-height:none; min-height:0; perspective:1800px; isolation:isolate; }
.device-stage::before {
 content:''; position:absolute; z-index:-1; width:75%; height:8%; bottom:6%; left:17%;
 background:#05020d99; border-radius:50%; filter:blur(22px); transform:rotate(-8deg);
}
.stage-word {
 width:175%; left:-29%; top:50%; translate:var(--brand-x,0px) calc(-50% + var(--brand-y,0px));
 opacity:.4; filter:drop-shadow(12px 22px 12px #07031066); z-index:-2;
 transform:rotate(-9deg); transition:translate 800ms var(--curva);
}
.stage-glow { width:120%; height:85%; left:-10%; top:8%; z-index:-1; filter:blur(45px); opacity:.75; }
.device-entry {
 position:relative; width:284px; height:598px; grid-area:1/1;
 scale:var(--phone-scale,1); transform-origin:center;
}
.device-pivot { scale:1; translate:none; width:284px; height:598px; }
.phone-hardware { box-shadow:inset 0 0 0 1px #f2edf5,4px 2px 0 -1px #69656e,5px 3px 0 -1px #b0aab8,24px 36px 70px #08030eaa; }
.device-caption { bottom:0; gap:4px; color:#ddcbe6; }
.cinema-progress { display:none; }
/* Entrada finita. Los movimientos de scroll y ratón usan contenedores distintos. */
.cinema.is-entering .device-entry { animation:producto-entrada 1500ms cubic-bezier(.16,1,.3,1) both; }
.cinema.is-entering .stage-word { animation:marca-entrada 1800ms cubic-bezier(.16,1,.3,1) both; }
.cinema.is-entering .cinema-copy>* { animation:portada-entrada 900ms cubic-bezier(.16,1,.3,1) both; }
.cinema.is-entering .cinema-copy .eyebrow { animation-delay:60ms; }
.cinema.is-entering .cinema-copy h1 { animation-delay:140ms; }
.cinema.is-entering .cinema-copy .cinema-description { animation-delay:240ms; }
.cinema.is-entering .cinema-copy .cinema-cta { animation-delay:320ms; }
.cinema.is-entering .cinema-copy .cinema-secondary { animation-delay:380ms; }
.cinema.is-entering .screen-reflection { animation:cristal-entrada 1500ms 250ms ease-out both; }
@keyframes producto-entrada {
 from { opacity:0; transform:perspective(1200px) translate3d(65px,100px,0) rotateY(-26deg) rotateZ(12deg); }
 to { opacity:1; transform:perspective(1200px) translate3d(0,0,0) rotateY(0) rotateZ(0); }
}
@keyframes marca-entrada { from {opacity:0;transform:translate3d(100px,50px,0) rotate(-18deg) scale(.88);} to {opacity:.4;transform:translate3d(0,0,0) rotate(-9deg) scale(1);} }
@keyframes portada-entrada { from{opacity:0;transform:translateY(22px);} to{opacity:1;transform:translateY(0);} }
@keyframes cristal-entrada { from{translate:-110% 0;opacity:.65;} to{translate:110% 0;opacity:0;} }
@media(min-width:701px) and (max-width:1050px) {
 .cinema-inner { grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); }
 .cinema h1 { font-size:clamp(30px,10.7cqw,56px); }
 .cinema-description { font-size:16px; max-width:360px; }
 .stage-word { width:195%; left:-45%; }
}
@media(max-width:700px) {
 :root { --header-height:64px; }
 .cinema-sticky,.motion-reduced .cinema-sticky { height:calc(100svh - var(--header-height)); min-height:650px; }
 .cinema-inner { display:flex; padding-block:24px 12px; gap:4px; }
 .cinema-copy { width:100%; max-width:360px; padding:0; }
 .cinema-copy .eyebrow { font-size:10px; margin-bottom:16px; }
 .cinema h1 { font-size:clamp(26px,10.7cqw,39px); }
 .cinema h1 .titulo-marca { margin-top:4px; }
 .cinema-description { font-size:15px; line-height:1.55; max-width:330px; margin:16px auto; }
 .cinema-secondary { display:none; }
 .device-stage { flex:1; min-height:0; width:100%; }
 .device-entry { margin-top:-12px; }
 .stage-word { width:180%; left:-40%; top:50%; }
 .device-caption { font-size:10px; bottom:0; }
 .device-caption .motion-toggle { min-height:36px; }
 .device-stage::before { height:7%; bottom:12%; }
}
@media(max-width:700px) and (max-height:740px) {
 .cinema-sticky,.motion-reduced .cinema-sticky { min-height:610px; }
 .cinema-inner { padding-top:20px; }
 .cinema-copy .eyebrow { margin-bottom:12px; }
 .cinema-description { font-size:14px; margin-block:12px; }
}
@media(prefers-reduced-motion:reduce) {
 .cinema-sticky{position:relative;top:0;}
 .stage-word{transition:none;}
}
.interacciones-reducidas .stage-word {translate:0 -50%;}

/* La primera vista sigue midiendo una ventana. El recorrido extra pertenece a la animación. */
.cinema.has-scroll-scene { height:calc(var(--scene-height) + var(--scroll-travel)); }
.cinema.has-scroll-scene .cinema-sticky { position:sticky; top:var(--header-height); }
.cinema.has-scroll-scene .stage-word { rotate:calc(var(--scene-progress,0) * 8deg); }
@media(prefers-reduced-motion:reduce) {
 .cinema.has-scroll-scene { height:auto; }
 .cinema.has-scroll-scene .cinema-sticky { position:relative; top:0; }
 .cinema.has-scroll-scene .stage-word { rotate:0deg; }
}

.cinema { overflow-anchor:none; }

/* Del mockup a la app: el scroll aplica el diseño sobre el wireframe de la misma pantalla.
   La capa wireframe es un clon de .demo-app creado por cinema.js, así coincide al píxel. */
.phone-screen { background:#f7f4fb; }
.phone-screen > .demo-app:not(.demo-wire) { background:transparent; z-index:3; }
.demo-wire { z-index:2; background:#f1edf6; pointer-events:none;
 background-image:linear-gradient(#e6e0ee 1px,transparent 1px),linear-gradient(90deg,#e6e0ee 1px,transparent 1px);
 background-size:14px 14px; background-position:-1px -1px; }
.demo-wire * { color:transparent!important; box-shadow:none!important; text-shadow:none!important; }
.demo-wire p,.demo-wire b,.demo-wire small,.demo-wire .demo-row>span,.demo-wire .demo-brand>span:not(.demo-avatar),.demo-wire .demo-reserve,.demo-wire .demo-art>span {
 background-color:#d8d0e3; border-radius:4px; -webkit-box-decoration-break:clone; box-decoration-break:clone; }
.demo-wire .demo-title { background:#cfc5dc; border-radius:6px; }
.demo-wire img { opacity:0; }
.demo-wire .demo-brand img { opacity:1; filter:grayscale(1) brightness(1.6) contrast(.35); }
.demo-wire .demo-avatar,.demo-wire .demo-date { background:#ddd5e7; }
.demo-wire .demo-art { background:
  linear-gradient(33deg,transparent calc(50% - .75px),#b9adc9 calc(50% - .75px) calc(50% + .75px),transparent calc(50% + .75px)),
  linear-gradient(-33deg,transparent calc(50% - .75px),#b9adc9 calc(50% - .75px) calc(50% + .75px),transparent calc(50% + .75px)),#ebe6f1;
 outline:1.5px dashed #a79bb7; outline-offset:-1.5px; }
.demo-wire .art-orbit,.demo-wire .demo-art>b { display:none; }
.demo-wire .demo-art>span { background:#cfc5dc; }
.demo-wire .demo-booking { background:transparent; border:1.5px solid #cfc6da; }
.demo-wire .demo-reserve { background:transparent; outline:1.5px dashed #9c8fae; outline-offset:-1.5px; }
.demo-wire .demo-reserve span { background:none; }
.demo-wire .demo-nav span { background:none; }
.demo-wire .demo-nav span::before { content:""; }
.demo-wire .demo-nav small { background:#ddd5e7; }
/* Cotas y marcas de revisión del wireframe */
.wire-cota { position:absolute; z-index:4; font:600 8px/1 var(--texto); color:#d4005a; display:flex; align-items:center; gap:3px; pointer-events:none; }
.wire-cota.v { flex-direction:column; }
.wire-cota.v::before,.wire-cota.v::after { content:""; flex:1; min-height:6px; border-left:1px solid #ff0069; }
.wire-cota.h::before,.wire-cota.h::after { content:""; flex:1; min-width:6px; border-top:1px solid #ff0069; }
.wire-pin { position:absolute; z-index:4; width:18px; height:18px; border-radius:50% 50% 50% 2px; background:#ff0069; color:#fff; font:700 9px/18px var(--texto); text-align:center; box-shadow:0 3px 8px #ff006966; }
/* Cursor de diseño que recorre las piezas mientras se pintan */
.design-cursor { position:absolute; z-index:8; left:0; top:0; pointer-events:none; opacity:0; transition:opacity .25s; will-change:transform; }
.design-cursor svg { width:15px; height:15px; display:block; filter:drop-shadow(0 2px 3px #0004); }
.design-cursor span { position:absolute; left:12px; top:13px; white-space:nowrap; font:600 8px/1 var(--texto); color:#fff; padding:4px 6px; border-radius:2px 7px 7px 7px; background:linear-gradient(100deg,#852c86,#ff0069); }
.phone-screen .screen-reflection { z-index:9; }
/* Estado del pie del móvil */
.device-caption .fase { display:inline-flex; align-items:center; gap:7px; font-variant-numeric:tabular-nums; }
.device-caption .fase::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--fase-color,#b9adc9); box-shadow:0 0 0 3px color-mix(in srgb,var(--fase-color,#b9adc9) 25%,transparent); transition:background .3s; }
.motion-reduced .demo-wire,.motion-reduced .wire-cota,.motion-reduced .wire-pin,.motion-reduced .design-cursor { display:none; }
.demo-wire .demo-art::before,.demo-wire .demo-art::after { display:none; }
.demo-wire *,.demo-wire *::before,.demo-wire *::after { -webkit-text-fill-color:transparent!important; }
.demo-wire .demo-brand img { -webkit-text-fill-color:initial!important; }