/* Landing VR Cinema · Marcas — página de campaña. Modo "Oscuro · producto" del Manual de Marca v1.4 */
[hidden]{display:none!important}
:root{
  --violeta:#7448FF; --luz:#BBB1FF; --prof:#250B6A; --niebla:#E8E8E9; --carbon:#393540; --grafito:#24212B; --noche:#1a1720;
  --lima:#DEFF66; --fucsia:#E94FC0; --aurora:#45D9BE;
  --h-uv:#9C20D6; --h-mag:#F31BBF; --h-cian:#00E5FF; --h-rosa:#FF97F4;
  --holo:linear-gradient(120deg,var(--h-cian),var(--h-uv) 45%,var(--h-mag) 75%,var(--h-rosa));
  --text:#F4F2F8; --muted:#C9C4D6;
  --f-title:"Montserrat",Arial,sans-serif; --f-motion:"Fira Sans",Arial,sans-serif; --f-quote:"Lora",Georgia,serif; --f-body:"Hind Madurai",Arial,sans-serif;
  --r:14px; --gut:max(clamp(16px,4vw,56px),env(safe-area-inset-left,0px),env(safe-area-inset-right,0px));
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--grafito);color:var(--text);font:400 17px/1.6 var(--f-body);overflow-x:hidden;transition:background-color .8s ease}
img,video{max-width:100%;display:block}
a{color:inherit}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:1240px;margin:0 auto;padding:0 var(--gut)}
.wrap--narrow{max-width:860px}
section{position:relative}
em{font-family:var(--f-quote);font-style:italic;font-weight:600;color:var(--luz)}
.h2{font:800 clamp(32px,4.6vw,60px)/1.06 var(--f-title);letter-spacing:-.02em;margin:0 0 .5em;max-width:18ch;text-wrap:balance}
.h2 em{font-weight:600;letter-spacing:0}
.lead{font-size:clamp(17px,1.5vw,19px);color:var(--muted);max-width:56ch}
.ph{background:rgba(222,255,102,.14);color:var(--lima);border:1px dashed rgba(222,255,102,.5);border-radius:6px;padding:0 .3em;font-size:.92em;white-space:nowrap}
.ph--big{white-space:normal;display:block;padding:1em;text-align:center}

/* grano */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:90;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* botones: rectángulo r14, vidrio oscuro y contorno holográfico */
.btn{--b:2px;position:relative;display:inline-flex;align-items:center;gap:.6em;padding:1.05em 1.5em;border-radius:var(--r);
  font:800 italic clamp(16px,1.3vw,18px)/1.1 var(--f-motion);color:#fff;text-decoration:none;border:0;cursor:pointer;
  background:linear-gradient(rgba(26,23,32,.78),rgba(26,23,32,.78)) padding-box,var(--holo) border-box;border:var(--b) solid transparent;
  box-shadow:0 10px 40px -10px rgba(243,27,191,.55),0 0 0 0 rgba(0,229,255,0);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:box-shadow .3s,transform .3s}
.btn:hover{box-shadow:0 14px 50px -8px rgba(243,27,191,.75),0 0 30px rgba(0,229,255,.35)}
.btn:focus-visible,a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,.hot:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--h-cian);outline-offset:3px}
.btn--sm{padding:.75em 1.1em;font-size:15px}
.btn--lg{padding:1.2em 1.9em;font-size:clamp(18px,1.6vw,22px)}
.btn--full{width:100%;justify-content:center}

/* ===== intro ===== */
.intro{position:fixed;inset:0;z-index:100;background:var(--grafito);display:grid;place-items:center;overflow:hidden}
.intro.is-gone{display:none}
.intro__mark{width:92px}
.intro__mark img{width:100%}
.intro__txt{position:absolute;top:calc(50% + 70px);font:900 italic 18px var(--f-motion);letter-spacing:.04em;color:var(--luz);margin:0}
.intro__skip{position:absolute;right:20px;bottom:20px;background:none;border:1px solid rgba(187,177,255,.4);color:var(--luz);border-radius:10px;padding:.5em .9em;font:600 14px var(--f-body);cursor:pointer}

/* haces de luz en X con el ángulo del isotipo */
.beam{position:absolute;left:50%;top:50%;width:260vmax;height:3px;pointer-events:none;opacity:0;
  background:linear-gradient(90deg,transparent,var(--h-cian) 30%,#fff 50%,var(--h-mag) 70%,transparent);
  box-shadow:0 0 18px var(--h-mag),0 0 40px var(--h-cian);transform-origin:center}
.beam--a{transform:translate(-50%,-50%) rotate(44.7deg) scaleX(0)}
.beam--b{transform:translate(-50%,-50%) rotate(-44.7deg) scaleX(0)}

/* ===== cursor ===== */
.cursor{position:fixed;inset:0;pointer-events:none;z-index:95;display:none}
@media (hover:hover) and (pointer:fine){.cursor{display:block} body.has-js, body.has-js a, body.has-js button{cursor:none} body.has-js input,body.has-js textarea,body.has-js select{cursor:text}}
.cursor__dot,.cursor__ring{position:fixed;left:0;top:0;border-radius:50%;transform:translate(-50%,-50%)}
.cursor__dot{width:6px;height:6px;background:var(--luz)}
.cursor__ring{width:38px;height:38px;border:1.5px solid var(--luz);transition:width .25s,height .25s,background .25s,border-color .25s}
.cursor.is-hover .cursor__ring{width:66px;height:66px;background:rgba(187,177,255,.12);border-color:var(--h-cian)}
.cursor.is-lens .cursor__ring{opacity:0}

/* ===== barra superior ===== */
.top{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;justify-content:space-between;align-items:center;padding:calc(18px + env(safe-area-inset-top,0px)) var(--gut) 18px;transition:background .3s,padding .3s}
.top.is-scrolled{background:rgba(26,23,32,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);padding:10px var(--gut)}
.top__logo img{width:clamp(150px,14vw,200px);height:auto}

/* ===== hero ===== */
.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.hero__stage{position:absolute;inset:0}
.hero__real,.hero__virtual,.hero__virtual video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero__real{filter:saturate(.95) contrast(1.05)}
.hero__virtual{clip-path:polygon(0 0,0 0,0 0);will-change:clip-path}
.hero__virtual video{filter:saturate(1.15) contrast(1.05)}
.hero__lensline{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;filter:drop-shadow(0 0 10px rgba(243,27,191,.8)) drop-shadow(0 0 22px rgba(0,229,255,.5))}
.hero__shade{position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(90deg,rgba(18,15,24,.92) 0%,rgba(18,15,24,.72) 34%,rgba(18,15,24,.1) 62%,rgba(18,15,24,0) 100%),
  linear-gradient(0deg,rgba(18,15,24,.85),rgba(18,15,24,0) 30%)}
.hero__content{position:relative;z-index:2;padding:120px var(--gut) 90px;max-width:820px;pointer-events:none}
.hero__content a,.hero__content .btn{pointer-events:auto}
.hero__title{font:900 clamp(40px,6.2vw,84px)/1.0 var(--f-title);letter-spacing:-.03em;margin:0 0 .4em;text-wrap:balance}
.hero__title em{display:inline;font-weight:600;letter-spacing:-.01em;text-shadow:0 0 30px rgba(243,27,191,.35)}
.hero__title .w{display:inline-block;opacity:0;transform:translateY(.4em)}
.hero__sub{font-size:clamp(17px,1.4vw,19px);color:#E2DEEC;max-width:52ch;margin:0 0 1.6em}
.hero__actions{display:flex;flex-direction:column;align-items:flex-start;gap:.7em}
.hero__note{margin:0;font-size:15px;color:var(--muted)}
.hero__wa{font-size:15px;color:var(--luz);text-underline-offset:4px}
.hero__hint{position:absolute;z-index:3;right:var(--gut);bottom:32px;margin:0;font:600 italic 14px var(--f-motion);color:var(--luz);letter-spacing:.02em;display:flex;align-items:center;gap:.5em}
.hero__hint::before{content:"";width:28px;height:1px;background:var(--holo)}
.hint-touch{display:none}
/* Complemento exacto de finePointer en cinema-vr-marcas.js: (hover:hover) and (pointer:fine) */
@media not all and (hover:hover) and (pointer:fine){.hint-desk{display:none}.hint-touch{display:inline}}
.hero__scroll{position:absolute;left:50%;bottom:22px;width:22px;height:36px;border:1.5px solid rgba(187,177,255,.6);border-radius:12px;transform:translateX(-50%);z-index:3}
.hero__scroll span{position:absolute;left:50%;top:7px;width:3px;height:7px;border-radius:2px;background:var(--luz);transform:translateX(-50%);animation:sc 1.6s infinite}
@keyframes sc{0%{opacity:0;transform:translate(-50%,0)}40%{opacity:1}100%{opacity:0;transform:translate(-50%,12px)}}

/* ===== 2 · qué vive ===== */
.live__pin{min-height:100vh;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,5vw,80px);align-items:center;padding:110px var(--gut) 60px;max-width:1300px;margin:0 auto}
.live__steps{list-style:none;padding:0;margin:1.5em 0;display:grid;gap:1.1em}
.live__step{display:grid;grid-template-columns:1fr;gap:1em;opacity:.35;transition:opacity .4s}
.live__step.is-on{opacity:1}
.live__step .num{font:900 italic 15px var(--f-motion);color:var(--luz);padding-top:.35em}
.live__step h3{font:800 22px/1.2 var(--f-title);margin:0 0 .25em}
.live__step p{margin:0;color:#DDD8E8}
.scrub .wd{opacity:.18;transition:opacity .2s}
.live__foot{font-family:var(--f-quote);font-style:italic;color:var(--luz);max-width:48ch;margin:0}
.live__visor{display:grid;place-items:center}
.visor{position:relative;width:min(100%,420px);aspect-ratio:9/14;border-radius:28px;overflow:hidden;background:#000;
  box-shadow:0 0 0 2px rgba(187,177,255,.25),0 40px 120px -30px rgba(156,32,214,.7),0 0 80px -20px rgba(0,229,255,.4)}
.visor::before{content:"";position:absolute;inset:-2px;border-radius:30px;padding:2px;background:var(--holo);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;z-index:3;pointer-events:none}
.visor__clip{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s}
.visor__clip.is-on{opacity:1}
.visor .beam{width:200%}
.visor__label{position:absolute;left:16px;bottom:16px;z-index:4;font:800 italic 14px var(--f-motion);color:#fff;background:rgba(26,23,32,.7);border-radius:10px;padding:.4em .7em;backdrop-filter:blur(6px)}

/* ===== 2b · visor 360 ===== */
.pano{padding:120px 0 120px}
.pano__head{margin-bottom:36px}
.pano__frame{position:relative;height:min(72vh,680px);margin:0 var(--gut);border-radius:24px;overflow:hidden;background:#0d0b12 center/cover;touch-action:pan-y;cursor:grab}
.pano__frame:active{cursor:grabbing}
.pano__frame canvas{display:block;width:100%!important;height:100%!important}
.pano__frame::after{content:"";position:absolute;inset:0;border-radius:24px;padding:2px;background:var(--holo);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;opacity:.8}
.pano__ui{position:absolute;left:0;right:0;bottom:18px;display:flex;justify-content:center;gap:10px;flex-wrap:wrap;z-index:2;pointer-events:none}
.pano__drag,.pano__gyro{pointer-events:auto;display:inline-flex;align-items:center;gap:.5em;font:800 italic 14px var(--f-motion);color:#fff;background:rgba(26,23,32,.72);backdrop-filter:blur(8px);border-radius:12px;padding:.6em .9em;border:1px solid rgba(187,177,255,.35)}
.pano__drag svg{width:20px;height:20px}
.pano__gyro{cursor:pointer}

/* ===== 3 · pilares ===== */
.pillars{padding:120px 0}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:40px;perspective:1000px}
.card{position:relative;min-height:420px;border-radius:22px;overflow:hidden;background:rgba(57,53,64,.45);transform-style:preserve-3d;
  border:1px solid rgba(187,177,255,.18);display:flex;align-items:flex-end;isolation:isolate}
.card video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.22;transition:opacity .7s;z-index:-2}
.card::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(18,15,24,.95) 25%,rgba(18,15,24,.35))}
.card::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s;mix-blend-mode:screen;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(0,229,255,.28),rgba(243,27,191,.18) 35%,transparent 60%)}
.card:hover video{opacity:.75}
.card:hover::after{opacity:1}
/* Sin puntero fino no hay hover fiable: las tarjetas se quedan encendidas (misma detección que finePointer en el JS) */
@media not all and (hover:hover) and (pointer:fine){.card video{opacity:.75}.card::after{opacity:1}}
.card__body{padding:28px;transform:translateZ(40px)}
.card__n{font:900 italic 15px var(--f-motion);color:var(--luz)}
.card h3{font:800 26px/1.15 var(--f-title);margin:0 0 .4em}
.card p{margin:0;color:#DDD8E8}

/* ===== 4 · tu marca ===== */
.brand{padding:120px 0}
.brand__grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(24px,5vw,72px);align-items:center}
.brand__try{margin-top:28px;padding:24px;border-radius:20px;background:rgba(26,23,32,.55);border:1px solid rgba(187,177,255,.22)}
.brand__try label{display:block;font:700 15px var(--f-title);margin-bottom:.5em}
.brand__try input{width:100%}
.hold{display:flex;align-items:center;gap:18px;margin-top:18px}
.hold__btn{position:relative;width:96px;height:96px;flex:none;border-radius:50%;border:0;background:rgba(37,11,106,.6);cursor:pointer;touch-action:none;user-select:none;-webkit-user-select:none}
.hold__btn svg{position:absolute;inset:0;transform:rotate(-90deg)}
.hold__track{fill:none;stroke:rgba(187,177,255,.2);stroke-width:5}
.hold__fill{fill:none;stroke:url(#holo);stroke:var(--h-mag);stroke-width:5;stroke-linecap:round;stroke-dasharray:339.3;stroke-dashoffset:339.3}
.hold__btn img{position:absolute;left:50%;top:50%;width:40px;transform:translate(-50%,-50%)}
.hold__btn.is-holding img{transform:scale(1.08);transition:transform .3s}
.hold p{margin:0;color:#DDD8E8;font-size:16px}
.brand__disclaimer{margin:14px 0 0;font:500 italic 15px var(--f-quote);color:var(--luz)}
.pano__frame--brand{margin:0;height:min(64vh,560px)}
.flash{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;background:radial-gradient(circle,#fff,rgba(243,27,191,.8) 40%,rgba(0,229,255,.2) 70%,transparent);mix-blend-mode:screen}

/* ===== 5 · llave en mano ===== */
.turnkey__pin{min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:100px 0 60px;overflow:hidden}
.turnkey__head{padding:0 var(--gut);max-width:1300px;width:100%;margin:0 auto}
.turnkey__line{height:2px;background:rgba(187,177,255,.18);border-radius:2px;margin:6px 0 36px;overflow:hidden}
.turnkey__line span{display:block;height:100%;width:0;background:var(--holo);box-shadow:0 0 12px var(--h-mag)}
.turnkey__track{display:flex;gap:24px;padding:0 var(--gut);width:max-content}
.tk{width:min(78vw,380px);flex:none}
.tk__media{aspect-ratio:4/5;border-radius:20px;overflow:hidden;background:#000;border:1px solid rgba(187,177,255,.2)}
.tk__media img,.tk__media video{width:100%;height:100%;object-fit:cover}
.tk__media--out img{filter:grayscale(1) brightness(.75)}
.tk__n{display:block;margin-top:16px;font:900 italic 15px var(--f-motion);color:var(--luz)}
.tk h3{font:800 24px/1.2 var(--f-title);margin:16px 0 .3em}
.tk p{margin:0;color:#DDD8E8}
.tk--end{display:flex;flex-direction:column;justify-content:center;gap:24px;width:min(80vw,420px)}
.tk__close{font:600 italic clamp(26px,2.6vw,34px)/1.25 var(--f-quote);color:var(--luz);margin:0}

/* ===== 6 · casos ===== */
.cases{padding:120px 0 80px}
.case-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:22px;margin-top:40px}
.case{border-radius:22px;overflow:hidden;background:rgba(57,53,64,.4);border:1px solid rgba(187,177,255,.18);display:flex;flex-direction:column}
.case__media{position:relative;aspect-ratio:4/5;background:#000}
.case__media video{width:100%;height:100%;object-fit:cover;filter:saturate(.9);transition:filter .5s,transform .8s}
.case:hover .case__media video{filter:saturate(1.15);transform:scale(1.04)}
.case--empty .case__media{display:grid;place-items:center;background:repeating-linear-gradient(45deg,rgba(187,177,255,.05) 0 12px,transparent 12px 24px)}
.case__tag{position:absolute;left:14px;top:14px;font:800 italic 13px var(--f-motion);background:rgba(26,23,32,.78);padding:.45em .7em;border-radius:10px}
.case blockquote{margin:0;padding:22px 24px 26px;font:500 italic 19px/1.45 var(--f-quote);color:#EEE}
.case cite{display:block;margin-top:.8em;font:600 normal 14px var(--f-body);color:var(--muted)}
.marquee{margin-top:72px;overflow:hidden;border-block:1px solid rgba(187,177,255,.15);padding:22px 0;mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.marquee__track{display:flex;align-items:center;gap:36px;width:max-content;animation:mq 36s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__track span{font:800 clamp(20px,2.4vw,30px) var(--f-title);color:#E9E5F2;white-space:nowrap}
.marquee__track .ph{font-size:16px}
.marquee__track i{width:16px;height:16px;flex:none;background:url(../img/projects/cinema-vr-marcas/isotipo.svg) center/contain no-repeat;opacity:.8}
@keyframes mq{to{transform:translateX(-50%)}}

/* ===== 7 · qué necesitas ===== */
.needs{padding:120px 0}
.needs__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,72px);align-items:center}
.needs__info{margin:28px 0 18px;padding:22px 24px;border-radius:18px;background:rgba(26,23,32,.5);border-left:3px solid var(--h-cian);min-height:120px}
.needs__info dt{font:800 20px var(--f-title);margin-bottom:.3em}
.needs__info dd{margin:0;color:#DDD8E8}
.needs__cap{color:var(--muted);margin:0}
.plan svg{width:100%;max-width:520px;margin:0 auto;display:block;overflow:visible}
.plan__draw{fill:none;stroke:var(--luz);stroke-width:1.6;stroke-dasharray:1400;stroke-dashoffset:1400}
.plan__inner{stroke:var(--h-cian);stroke-width:1.2}
.plan.is-in .plan__draw{animation:draw 2.4s ease forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.plan__seats circle{fill:rgba(187,177,255,.12);stroke:rgba(187,177,255,.5)}
.hot{cursor:pointer;outline:none}
.hot circle{fill:var(--h-mag);stroke:#fff;stroke-width:2;filter:drop-shadow(0 0 8px var(--h-mag));transform-box:fill-box;transform-origin:center;animation:pulse 2s infinite}
.hot text{font:900 italic 12px var(--f-motion);fill:#fff;text-anchor:middle;pointer-events:none}
.hot.is-on circle,.hot:hover circle,.hot:focus circle{fill:var(--h-cian);filter:drop-shadow(0 0 12px var(--h-cian))}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}

/* ===== 8 · formulario ===== */
.quote{padding:120px 0}
.quote__grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(24px,5vw,72px);align-items:start}
.form{position:relative;padding:clamp(22px,3vw,36px);border-radius:24px;background:rgba(36,33,43,.78);backdrop-filter:blur(14px)}
.form::before{content:"";position:absolute;inset:0;border-radius:24px;padding:1.5px;background:var(--holo);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;opacity:.7}
.form__progress{height:3px;border-radius:3px;background:rgba(187,177,255,.15);overflow:hidden;margin-bottom:12px}
.form__progress span{display:block;height:100%;width:50%;background:var(--holo);box-shadow:0 0 12px var(--h-mag);transition:width .6s cubic-bezier(.6,0,.2,1)}
.form__step-label{margin:0 0 18px;font:800 italic 14px var(--f-motion);color:var(--luz)}
.step{border:0;padding:0;margin:0;display:none}
.step.is-on{display:block;animation:stepIn .45s ease}
@keyframes stepIn{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
.field{margin-bottom:20px}
.field--row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field__label{display:block;font:700 15px/1.3 var(--f-title);margin-bottom:.55em}
.field__label small{font:400 14px var(--f-body);color:var(--muted)}
.field__help{display:block;margin-top:.35em;font-size:14px;color:var(--muted)}
.field__err{margin:.35em 0 0;font-size:14px;color:#FF97F4;min-height:0}
input[type=text],input[type=email],input[type=tel],input[type=date],select,textarea{width:100%;min-height:48px;padding:.7em .9em;border-radius:12px;border:1.5px solid rgba(187,177,255,.3);
  background:rgba(18,15,24,.7);color:#fff;font:400 17px var(--f-body);transition:border-color .2s,box-shadow .2s}
input:focus,select:focus,textarea:focus{border-color:var(--h-cian);box-shadow:0 0 0 3px rgba(0,229,255,.18),0 0 24px rgba(243,27,191,.25);outline:none}
input[aria-invalid=true],select[aria-invalid=true]{border-color:#FF97F4}
input[type=date]::-webkit-calendar-picker-indicator{filter:invert(1)}
::placeholder{color:#8f89a0}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips label{position:relative}
.chips input{position:absolute;opacity:0;inset:0;cursor:pointer}
.chips span{display:inline-block;padding:.6em .95em;border-radius:12px;border:1.5px solid rgba(187,177,255,.3);font:500 16px var(--f-body);transition:all .2s;min-height:44px;line-height:1.6}
.chips input:checked+span{border-color:transparent;background:linear-gradient(rgba(37,11,106,.9),rgba(37,11,106,.9)) padding-box,var(--holo) border-box;color:#fff;box-shadow:0 0 18px rgba(243,27,191,.35)}
.chips input:focus-visible+span{outline:3px solid var(--h-cian);outline-offset:2px}
.check{display:flex;align-items:center;gap:.5em;margin-top:.5em;font-size:15px;color:var(--muted)}
.check input{width:18px;height:18px;accent-color:var(--h-mag)}
.tel{display:flex;align-items:stretch}
.tel span{display:grid;place-items:center;padding:0 .8em;border:1.5px solid rgba(187,177,255,.3);border-right:0;border-radius:12px 0 0 12px;background:rgba(57,53,64,.6);font-weight:600}
.tel input{border-radius:0 12px 12px 0}
.hp{position:absolute;left:-9999px}
.form__actions{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.form__back{background:none;border:0;color:var(--luz);font:600 16px var(--f-body);cursor:pointer;padding:.6em 0}
.form__legal{font-size:14px;color:var(--muted);margin:16px 0 0}
.form__done{text-align:center;padding:30px 10px}
.form__done img{width:64px;margin:0 auto 14px}
.form__done h3{font:800 28px var(--f-title);margin:0 0 .4em}
.form__done p{color:#DDD8E8;margin:0 auto;max-width:44ch}

/* ===== 9 · faq ===== */
.faq{padding:120px 0}
.faq details{border-bottom:1px solid rgba(187,177,255,.2)}
.faq summary{list-style:none;cursor:pointer;padding:22px 40px 22px 0;position:relative;font:700 clamp(18px,1.6vw,21px)/1.35 var(--f-title)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:6px;top:50%;width:14px;height:14px;border-right:2px solid var(--luz);border-bottom:2px solid var(--luz);transform:translateY(-70%) rotate(45deg);transition:transform .3s}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq details p{margin:0 0 22px;color:#DDD8E8;max-width:62ch}

/* ===== 10 · cierre ===== */
.close{min-height:92vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:120px var(--gut);overflow:hidden;isolation:isolate}
.close__glow{position:absolute;inset:-20%;z-index:-1;opacity:.75;filter:blur(70px);
  background:conic-gradient(from 0deg at 50% 55%,var(--h-uv),var(--h-mag),var(--h-rosa),var(--h-cian),var(--h-uv));animation:spin 18s linear infinite;mask-image:radial-gradient(closest-side,#000 30%,transparent 75%)}
@keyframes spin{to{transform:rotate(1turn)}}
.close__mark{width:110px;margin-bottom:24px;filter:drop-shadow(0 0 24px rgba(243,27,191,.6))}
.close__title{font:900 clamp(36px,5.6vw,76px)/1.04 var(--f-title);letter-spacing:-.03em;max-width:16ch;margin:0 0 .6em;text-wrap:balance}
.close__sub{margin:22px 0 0;color:#E2DEEC}

.foot{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;padding:36px var(--gut) 100px;background:#120f18;border-top:1px solid rgba(187,177,255,.12)}
.foot__logo{width:150px}
.foot nav{display:flex;gap:22px;flex-wrap:wrap}
.foot a{color:var(--muted);font-size:15px}

.sticky-cta{position:fixed;left:var(--gut);right:var(--gut);bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:60;display:none;justify-content:center;gap:.5em;padding:1em;border-radius:var(--r);text-decoration:none;
  font:800 italic 17px var(--f-motion);color:#fff;background:linear-gradient(rgba(26,23,32,.92),rgba(26,23,32,.92)) padding-box,var(--holo) border-box;border:2px solid transparent;
  box-shadow:0 10px 30px -6px rgba(243,27,191,.6);transform:translateY(140%);transition:transform .35s}
.sticky-cta.is-on{transform:none}


/* revelado: solo oculta si hay JS */
.has-js .reveal{transform:translateY(34px)}

/* ===== responsivo ===== */
@media (max-width:980px){
  .live__pin,.brand__grid,.needs__grid,.quote__grid{grid-template-columns:1fr}
  .cards,.case-grid{grid-template-columns:1fr}
  .card{min-height:340px}
  .live__visor{order:-1}
  .visor{width:min(100%,300px)}
  .turnkey__pin{min-height:0;padding:90px 0 40px}
  .turnkey__track{width:auto;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px;scrollbar-width:none}
  .turnkey__track::-webkit-scrollbar{display:none}
  .tk{scroll-snap-align:start}
}
.beam{transform:none}
.beam--a,.beam--b{transform:none}
@media (max-width:700px){
  body{font-size:16px}
  .hero{justify-content:flex-end}
  .hero__shade{background:linear-gradient(0deg,rgba(18,15,24,.96) 10%,rgba(18,15,24,.75) 45%,rgba(18,15,24,.15) 75%,rgba(18,15,24,.4))}
  .hero__content{padding:110px var(--gut) 96px}
  .hero__hint{left:var(--gut);right:auto;top:84px;bottom:auto}
  .hero__content{padding-top:46vh}
  .hero__scroll{display:none}
  .field--row{grid-template-columns:1fr}
  .sticky-cta{display:flex}
  .pano__frame{height:62vh}
  .live__pin{padding-top:90px}
  .foot{padding-bottom:100px}
}

/* movimiento reducido */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .has-js .reveal{opacity:1;transform:none}
  .hero__virtual,.hero__lensline,.hero__hint{display:none}
  .intro{display:none}
  .plan__draw{stroke-dashoffset:0}
}
.close__title,.close__sub{text-shadow:0 2px 28px rgba(18,15,24,.75)}

/* Hero en escritorio: texto sobre fondo sólido a la izquierda y video a la derecha; al bajar, el video se expande */
@media (min-width:981px){
  .hero{background:radial-gradient(60% 70% at 12% 60%,rgba(37,11,106,.55),transparent 70%),var(--grafito)}
  .hero__stage{left:42%;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14%);mask-image:linear-gradient(90deg,transparent 0,#000 14%)}
  .hero__shade{background:linear-gradient(0deg,rgba(18,15,24,.6),rgba(18,15,24,0) 25%)}
  .hero__content{max-width:min(46vw,640px);padding-right:0}
  .hero__title{font-size:clamp(40px,4.6vw,72px)}
}

/* Hero en teléfono: video con el lente arriba y texto abajo sobre fondo sólido */
@media (max-width:980px){
  .hero{display:block;min-height:0;background:var(--grafito)}
  .hero__stage{position:relative;inset:auto;height:min(58svh,560px);-webkit-mask-image:linear-gradient(180deg,#000 78%,transparent);mask-image:linear-gradient(180deg,#000 78%,transparent)}
  .hero__shade{background:linear-gradient(180deg,rgba(18,15,24,.55),rgba(18,15,24,0) 22%)}
  .hero__content{padding:8px var(--gut) 48px;max-width:none}
  .hero__title{font-size:clamp(36px,10vw,60px)}
  .hero__hint{top:auto;bottom:auto;position:absolute;left:var(--gut);right:var(--gut);top:calc(min(58svh,560px) - 44px)}
  .hero__scroll{display:none}
}