/* Luz y Plano · landing pública, estilo B «Plano vivo» (mismos tokens que estancia/static/theme.css) */
:root{--cob:#1f3cff;--cob-dk:#1530d9;--ink:#0f1430;--muted:#4a5070;--line:#e3dfd6;--paper:#f6f4ef;--sand:#ead9bf;--white:#fff;--ok:#16a36a;--warn:#f0a020;
 --display:"Bricolage Grotesque",system-ui,sans-serif;--body:"Manrope",system-ui,sans-serif;--gut:clamp(16px,5vw,64px)}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font:16px/1.55 var(--body);background:var(--paper);color:var(--ink);overflow-x:hidden}
img,video{max-width:100%}
h1,h2,h3,.wordmark{font-family:var(--display);font-weight:800;letter-spacing:-.035em;margin:0}
h2{font-size:clamp(32px,4.4vw,58px);line-height:.98;text-wrap:balance}
h2 em,h1 em{font-style:normal}
h3{font-size:21px;letter-spacing:-.02em}
a{color:var(--cob)}
:focus-visible{outline:3px solid var(--warn);outline-offset:3px}
.skip{position:absolute;left:-9999px}.skip:focus{left:12px;top:12px;z-index:9;background:var(--white);padding:8px 12px}
.eyebrow{color:var(--cob);font-weight:800;letter-spacing:.16em;text-transform:uppercase;font-size:12px;margin:0 0 12px}
.eyebrow.light{color:var(--sand)}
.small{font-size:13px;color:var(--muted)}
.btn{display:inline-flex;align-items:center;gap:8px;border-radius:12px;padding:14px 22px;font:800 15px/1.2 var(--body);text-decoration:none;min-height:48px;background:var(--cob);color:var(--white);border:1.5px solid var(--cob);cursor:pointer}
.btn:hover{background:var(--cob-dk)}
.btn.light{background:var(--white);color:var(--cob);border-color:var(--white)}
.btn.line{background:transparent;border-color:rgba(255,255,255,.55);color:var(--white)}

/* banda azul con rejilla de plano */
.band{background:var(--cob);color:var(--white);position:relative;overflow:hidden}
.band:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);background-size:44px 44px;mask-image:linear-gradient(180deg,#000,transparent 95%);-webkit-mask-image:linear-gradient(180deg,#000,transparent 95%);pointer-events:none}
.top{position:relative;display:flex;align-items:center;gap:28px;max-width:1260px;margin:auto;padding:22px var(--gut)}
.wordmark{color:var(--white);font-size:28px;text-decoration:none;display:flex;align-items:baseline;gap:14px;white-space:nowrap}
.wordmark em{font-style:normal;color:var(--sand)}
.wordmark span{color:var(--sand);font:600 11px var(--body);letter-spacing:.18em;text-transform:uppercase}
.top nav{display:flex;gap:22px;margin-left:auto}
.top nav a{color:var(--white);text-decoration:none;font-weight:600;opacity:.85}
.top nav a:hover{opacity:1;text-decoration:underline;text-underline-offset:6px}
.navcta{background:var(--white);color:var(--cob);text-decoration:none;font-weight:800;border-radius:10px;padding:9px 16px}
.hero{position:relative;max-width:1260px;margin:auto;padding:30px var(--gut) 64px}
.hero-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:48px;align-items:center}
.kicker{color:var(--sand);font-weight:700;margin:0 0 14px}
.hero h1{font-size:clamp(44px,6.4vw,96px);line-height:.92;color:var(--white);text-wrap:balance}
.hero h1 em{color:var(--sand)}
.lede{color:rgba(255,255,255,.9);font-size:clamp(16px,1.4vw,19px);max-width:46ch;margin:24px 0 30px}
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap}
.stage{position:relative;perspective:1600px;min-height:280px}
.shot{border-radius:14px;overflow:hidden;box-shadow:0 50px 90px rgba(5,10,60,.55);transform:rotateX(14deg) rotateY(-16deg) rotateZ(2deg);transform-origin:50% 60%;animation:float 7s ease-in-out infinite;border:6px solid rgba(255,255,255,.92)}
.shot img{display:block;width:100%;height:auto}
@keyframes float{50%{transform:rotateX(10deg) rotateY(-12deg) rotateZ(1deg) translateY(-10px)}}
.polaroid{position:absolute;width:24%;border:5px solid var(--white);border-radius:10px;box-shadow:0 24px 50px rgba(5,10,60,.5);overflow:hidden;animation:pop .7s both}
.polaroid img{display:block;width:100%;height:auto;aspect-ratio:9/13;object-fit:cover;object-position:50% 40%}
.polaroid.p1{left:-6%;bottom:-14%;transform:rotate(-7deg);animation-delay:.5s}
.polaroid.p2{right:-3%;bottom:-18%;transform:rotate(6deg);animation-delay:1s}
.chip{position:absolute;background:var(--white);color:var(--ink);border-radius:12px;padding:10px 14px;font-size:13px;font-weight:700;box-shadow:0 14px 30px rgba(5,10,60,.35);display:flex;gap:10px;align-items:center;white-space:nowrap;animation:pop .6s both;line-height:1.3}
.chip i{width:10px;height:10px;border-radius:50%;background:var(--ok);flex:none}
.chip.w i{background:var(--warn)}
.chip small{display:block;font-weight:500;color:#5b6180;font-size:11px}
.c1{left:-3%;top:6%;animation-delay:.4s}.c2{right:1%;top:-6%;animation-delay:.9s}.c3{right:-2%;top:46%;animation-delay:1.4s}
@keyframes pop{from{opacity:0;translate:0 12px}}
.hero-stats{display:flex;gap:44px;flex-wrap:wrap;margin-top:84px;padding-top:24px;border-top:1px solid rgba(255,255,255,.25)}
.hero-stats b{display:block;font:800 36px/1 var(--display);letter-spacing:-.03em}
.hero-stats span{font-size:13px;color:rgba(255,255,255,.8)}

/* secciones */
.sec{max-width:1260px;margin:auto;padding:96px var(--gut) 0}
.sec-head{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:28px}
.sec-head p{max-width:42ch;color:var(--muted);margin:0}

/* el plano que se levanta */
.lift{height:300vh;position:relative;background:var(--paper)}
.lift-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.lift-stage canvas{position:absolute;inset:0;width:100%!important;height:100%!important;display:block}
.lift-fallback{display:none}
.lift-head{position:absolute;left:var(--gut);top:clamp(20px,5vh,56px);max-width:520px;pointer-events:none}
.lift-head h2{font-size:clamp(28px,3.6vw,50px)}
.lift-head h2 em{color:var(--cob)}
.lift-steps{position:absolute;left:var(--gut);bottom:clamp(24px,6vh,60px);margin:0;padding:0;list-style:none;width:min(440px,calc(100% - 2*var(--gut)));min-height:84px}
.lift-steps li{position:absolute;left:0;bottom:0;right:0;background:var(--white);border-radius:14px;padding:14px 16px;box-shadow:0 14px 34px rgba(15,20,48,.14);font-weight:700;display:flex;gap:12px;align-items:flex-start;opacity:0;translate:0 10px;transition:opacity .35s,translate .35s}
.lift-steps li.on{opacity:1;translate:0 0}
.lift-steps b{display:inline-grid;place-items:center;flex:none;width:28px;height:28px;border-radius:9px;background:var(--cob);color:var(--white);font:800 14px var(--display)}
.lift-labels{position:absolute;inset:0;pointer-events:none}
.lb{position:absolute;left:0;top:0;white-space:nowrap;font:700 12px/1.2 var(--body);color:var(--ink);transition:opacity .3s;text-align:center}
.lb small{display:block;font-weight:500;color:var(--muted)}
.lb.pill{background:rgba(255,255,255,.92);border-radius:10px;padding:5px 9px;box-shadow:0 6px 16px rgba(15,20,48,.15)}
.lb.big{background:var(--white);border-radius:12px;padding:9px 13px;box-shadow:0 14px 30px rgba(15,20,48,.22);font-size:15px}
.lb.big:before{content:"";display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--cob);margin-right:8px}
.lift-bar{position:absolute;right:var(--gut);top:50%;width:3px;height:120px;margin-top:-60px;background:rgba(15,20,48,.12);border-radius:3px}
.lift-bar i{display:block;width:100%;height:0;background:var(--cob);border-radius:3px}
/* sin animación (prefers-reduced-motion) o sin WebGL: el resultado final, quieto */
.lift.static{height:auto}
.lift.static .lift-stage{position:relative;height:auto;min-height:0;padding:96px var(--gut) 0;max-width:1260px;margin:auto;overflow:visible;display:flex;flex-direction:column}
.lift.static .lift-head{order:-1}
.lift.static canvas{position:relative!important;height:62vh!important;border-radius:18px}
.lift.static .lift-head{position:static;margin-bottom:22px;max-width:none}
.lift.static .lift-steps{position:static;width:auto;min-height:0;margin-top:18px;display:grid;gap:8px}
.lift.static .lift-steps li{position:static;opacity:1;translate:none;box-shadow:none;border:1px solid var(--line)}
.lift.static .lift-bar,.lift.nogl .lift-labels{display:none}
.lift.nogl .lift-fallback{display:block;width:100%;height:auto;border-radius:18px}

/* comparador */
.luz{display:grid;grid-template-columns:1fr minmax(260px,420px);gap:56px;align-items:center}
.luz-copy p{color:var(--muted);max-width:46ch}
.luz h2 em{color:var(--cob)}
.modes{display:flex;gap:8px;flex-wrap:wrap;margin:22px 0}
.modes button{font:700 14px var(--body);border-radius:999px;padding:10px 18px;min-height:44px;border:1.5px solid var(--cob);background:var(--white);color:var(--cob);cursor:pointer}
.modes button[aria-pressed=true]{background:var(--cob);color:var(--white)}
.ticks{padding:0;margin:0;list-style:none;display:grid;gap:8px}
.ticks li{padding-left:26px;position:relative}
.ticks li:before{content:"";position:absolute;left:0;top:.45em;width:12px;height:12px;border-radius:50%;background:var(--ok)}
.cmp{--pos:50%;position:relative;border-radius:20px;overflow:hidden;aspect-ratio:640/1138;max-height:82vh;margin-inline:auto;width:100%;background:#d9d6cf;touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:ew-resize;box-shadow:0 30px 60px rgba(15,20,48,.18)}
.cmp img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}
.cmp>picture,.cmp-before{position:absolute;inset:0}
.cmp-before{clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.cmp-line{position:absolute;top:0;bottom:0;left:var(--pos);width:3px;margin-left:-1.5px;background:var(--white);box-shadow:0 0 0 1px rgba(15,20,48,.15)}
.cmp-handle{position:absolute;top:50%;left:var(--pos);width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;background:var(--white);color:var(--cob);display:grid;place-items:center;font:800 18px var(--display);box-shadow:0 10px 24px rgba(15,20,48,.3)}
.cmp-tag{position:absolute;bottom:14px;background:var(--white);border-radius:999px;padding:5px 12px;font-size:12px;font-weight:800;pointer-events:none}
.cmp-tag.l{left:14px}.cmp-tag.r{right:14px;background:var(--cob);color:var(--white)}

/* vídeos */
.vgrid{display:grid;grid-template-columns:1.25fr 1fr;gap:14px;align-items:start}
.vid{margin:0;position:relative;border-radius:18px;overflow:hidden;background:var(--ink);box-shadow:0 18px 40px rgba(15,20,48,.18)}
.vid video{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.vid figcaption{position:absolute;left:12px;top:12px;background:var(--white);border-radius:999px;padding:5px 12px;font-size:12px;font-weight:800}

/* demo del editor */
.demo{display:grid;grid-template-columns:1fr 1.2fr;gap:48px;align-items:center}
.demo p{color:var(--muted);max-width:48ch}
.demo-shot{position:relative;display:block;border-radius:18px;overflow:hidden;box-shadow:0 30px 60px rgba(15,20,48,.18)}
.demo-shot img{display:block;width:100%;height:auto}
.chip.static{position:absolute;left:16px;bottom:16px;animation:none}

/* cómo funciona */
.steps{list-style:none;padding:0;margin:28px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.steps li{background:var(--white);border:1px solid var(--line);border-radius:20px;padding:24px}
.steps .n{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:11px;background:var(--cob);color:var(--white);font:800 17px var(--display);margin-bottom:16px}
.steps p{color:var(--muted);margin:8px 0 0}

/* packs */
.pack-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.pack{background:var(--white);border:1px solid var(--line);border-radius:20px;padding:26px;position:relative}
.pack.star{border:2px solid var(--cob);box-shadow:0 24px 50px rgba(31,60,255,.14)}
.prov{display:inline-block;background:var(--sand);color:var(--ink);border-radius:999px;padding:4px 10px;font-size:11px;font-weight:800;letter-spacing:.04em;margin-bottom:16px}
.price{font:800 48px/1 var(--display);letter-spacing:-.03em;margin:10px 0 16px;color:var(--cob)}
.pack ul{margin:0;padding-left:18px;color:var(--muted);display:grid;gap:6px}

/* preguntas */
.faq{max-width:900px}
.faq h2{margin-bottom:24px}
details{border-top:1px solid var(--line);padding:18px 0}
details:last-of-type{border-bottom:1px solid var(--line)}
summary{font:800 20px var(--display);letter-spacing:-.02em;cursor:pointer;list-style-position:outside}
details p{color:var(--muted);max-width:64ch;margin:10px 0 0}

/* avísame */
.band-soft{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;background:var(--cob);color:var(--white);border-radius:28px;padding:56px clamp(20px,5vw,64px);margin:96px auto 0;max-width:calc(1260px - 2*var(--gut));width:calc(100% - 2*var(--gut))}
.band-soft p{color:rgba(255,255,255,.88)}
#avisame-form{display:grid;gap:10px}
#avisame-form>label{font-weight:700}
#avisame-form input[type=email]{font:inherit;border:0;border-radius:12px;padding:14px;min-height:50px;width:100%}
fieldset{border:0;padding:0;margin:4px 0;display:flex;gap:14px;flex-wrap:wrap}
legend{font-weight:700;margin-bottom:6px;width:100%}
fieldset label{display:flex;gap:6px;align-items:center;min-height:32px}
#av-status{min-height:1.5em;font-weight:800;color:var(--sand);margin:0}

footer{max-width:1260px;margin:auto;padding:56px var(--gut) 40px;display:flex;gap:24px;justify-content:space-between;flex-wrap:wrap;color:var(--muted);font-size:13px}
.small-mark{color:var(--ink);font-size:20px}
.small-mark em{color:var(--cob)}

@media(max-width:900px){
 .hero-grid,.luz,.demo,.band-soft{grid-template-columns:1fr}
 .stage{margin:10px 6% 60px}.c1{left:0}.c2,.c3{right:0}
 .hero-stats{gap:24px;margin-top:40px}
 .vgrid,.steps,.pack-grid{grid-template-columns:1fr}
 .sec-head{display:block}.sec-head p{margin-top:12px}
 .cmp{max-width:420px}
}
@media(max-width:700px){
 .top{gap:12px;flex-wrap:wrap}.top nav{order:3;width:100%;margin:0;gap:18px;font-size:14px;overflow-x:auto}
 .navcta{margin-left:auto}.wordmark span{display:none}
 .polaroid{width:30%}
 .chip{font-size:12px;padding:8px 10px}
 .lift-bar{display:none}
 .lift-steps li{font-size:14px}
 .lb{font-size:10px}.lb.pill{padding:3px 6px}
 .sec{padding-top:72px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.shot,.chip,.polaroid{animation:none}.lift-steps li{transition:none}}

/* «Paséate por el piso» en modo cine (Edu 18-10: encima de las luces y «más caro») */
.cine{--night:#0a0e22;--gold:#e6cfa7;position:relative;isolation:isolate;color:#fff;padding:96px 0 84px;margin:0 0 64px}
.cine::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:100vw;margin-left:-50vw;z-index:-1;background:radial-gradient(110% 70% at 50% 0%,#1b2356 0%,#0a0e22 62%)}
.cine .eyebrow{color:var(--gold);letter-spacing:.32em;font-weight:600;font-size:12px;text-transform:uppercase}
.cine h2{font-size:clamp(44px,6.2vw,96px);line-height:.94;color:#fff;max-width:13ch;margin:6px 0 0;text-wrap:balance}
.cine h2 em{font-style:normal;color:var(--gold)}
.cine-lede{color:rgba(255,255,255,.72);max-width:54ch;font-size:clamp(16px,1.4vw,19px);margin:22px 0 46px}
.cine .vid{border-radius:22px;background:#000;outline:1px solid rgba(230,207,167,.28);outline-offset:-1px;box-shadow:0 40px 120px rgba(0,0,0,.55)}
.cine .vid video{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.cine .vid figcaption{position:absolute;left:20px;top:auto;bottom:18px;background:rgba(10,14,34,.55);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;border:1px solid rgba(255,255,255,.18);padding:10px 16px;border-radius:14px;font-weight:700;font-size:14px;line-height:1.25}
.cine .vid figcaption small{display:block;font-weight:500;font-size:12px;color:rgba(255,255,255,.7)}
.cine-row{display:grid;grid-template-columns:1.05fr 1fr;gap:28px;margin-top:24px;align-items:center}
.cine-specs{list-style:none;margin:0;padding:0;display:grid;gap:20px}
.cine-specs li{border-top:1px solid rgba(255,255,255,.14);padding-top:14px}
.cine-specs b{display:block;font-family:var(--display);font-weight:800;font-size:24px;letter-spacing:-.02em;color:var(--gold)}
.cine-specs span{color:rgba(255,255,255,.7);font-size:15px}
.cine .videos-cta{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:40px}
.cine .cine-btn{display:inline-flex;align-items:center;gap:8px;background:var(--gold);color:#0a0e22;border:0;border-radius:12px;padding:15px 24px;font-weight:800;text-decoration:none;min-height:50px}
.cine .cine-btn:hover{background:#f1dfbd}
.cine .videos-cta span{color:rgba(255,255,255,.6);font-size:13px}
@media(max-width:860px){.cine{padding:64px 0 56px}.cine-row{grid-template-columns:1fr}.cine .vid figcaption{left:12px;bottom:12px;padding:8px 12px}}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.av-legal{font-size:12px;opacity:.75;margin:10px 0 0;max-width:46ch}