:root{
  --bg:#000; --ink:#fff; --mute:#9b9faf; --line:rgba(255,255,255,.14);
  --accent:#00a5ff; --paper:#f1f1f3; --paper-ink:#0a0a0e; --paper-mute:#585a66;
  --r:18px; --gut:clamp(20px,5vw,72px);
  --display:'Bricolage Grotesque',system-ui,sans-serif;
  --body:'roc-grotesk','Hanken Grotesk',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-weight:400;line-height:1.55;overflow-x:hidden}
img,video,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
em{font-style:normal;color:var(--accent)}
section{position:relative}
.eyebrow{font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;color:var(--mute);font-weight:500}
.eyebrow.dark{color:var(--paper-mute)}
.h2{font-family:var(--display);font-weight:800;font-size:clamp(2rem,5.2vw,4rem);line-height:1;letter-spacing:-.04em;margin-top:.8rem;max-width:20ch}
.mega{font-family:var(--display);font-weight:800;font-size:clamp(2.2rem,6.6vw,5.6rem);line-height:.98;letter-spacing:-.045em;max-width:18ch}
.lead{color:var(--mute);font-size:clamp(1rem,1.5vw,1.2rem);max-width:50ch;margin-top:1.2rem}
.lead.dark{color:var(--paper-mute)}
.head{padding:0 var(--gut)}

.btn{display:inline-flex;align-items:center;gap:.6rem;padding:1rem 1.7rem;border-radius:999px;background:var(--ink);color:#000;font-weight:600;font-size:.98rem;transition:transform .25s,box-shadow .25s;cursor:pointer;border:0}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 40px rgba(0,165,255,.35)}

/* nav */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;padding:calc(14px + env(safe-area-inset-top)) var(--gut) 14px;transition:background .3s,backdrop-filter .3s}
.nav.solid{background:rgba(0,0,0,.7);backdrop-filter:blur(14px)}
.brand img{height:30px;width:auto}
.brand-fallback{font-family:var(--display);font-weight:800;letter-spacing:.3em}

/* hero */
.hero{min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;isolation:isolate;background:#000}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.hero-shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,0) 30%,rgba(0,0,0,.35) 65%,rgba(0,0,0,.9) 100%)}
.hero-inner{padding:0 var(--gut) clamp(60px,10vh,110px);width:100%}
.hero-title{font-family:var(--display);font-weight:800;font-size:clamp(2.4rem,8.6vw,7.4rem);line-height:.96;letter-spacing:-.05em}
.hero-title .line{display:block;overflow:hidden;padding-bottom:.1em}
.hero-title .line>span{display:block;transform:translateY(105%);animation:lineUp 1.2s cubic-bezier(.2,.8,.2,1) .3s forwards}
.hero-title .line:nth-child(2)>span{animation-delay:.5s}
@keyframes lineUp{to{transform:none}}
.scroll-hint{position:absolute;right:var(--gut);bottom:34px;width:26px;height:44px;border:1px solid rgba(255,255,255,.4);border-radius:20px;display:none}
.scroll-hint span{position:absolute;left:50%;top:8px;width:3px;height:8px;margin-left:-1.5px;border-radius:2px;background:#fff;animation:wheel 1.8s infinite}
@keyframes wheel{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(16px)}}

/* secciones claras */
.light{background:var(--paper);color:var(--paper-ink)}
.light em{color:#0086d1}
.propuesta{padding:clamp(80px,13vw,170px) var(--gut)}
.rows{display:grid;margin-top:clamp(40px,6vw,80px);border-top:1px solid rgba(0,0,0,.18)}
.row{display:grid;grid-template-columns:2.4rem 1fr;gap:.2rem 1.4rem;padding:1.7rem 0;border-bottom:1px solid rgba(0,0,0,.18)}
.row b{grid-row:span 2;font-family:var(--display);font-weight:800;font-size:1rem;color:#0086d1;padding-top:.3rem}
.row h3{font-family:var(--display);font-weight:700;font-size:clamp(1.3rem,2.4vw,1.9rem);letter-spacing:-.03em;line-height:1.1}
.row p{color:var(--paper-mute);max-width:46ch}
.rows.three .row p{color:var(--paper-ink);font-size:1.1rem}
.rows.three .row b{grid-row:auto}

/* universos */
.universes{padding:clamp(80px,12vw,160px) 0 clamp(60px,9vw,120px);background:#000;overflow:hidden}
.uni{margin:clamp(30px,5vw,60px) var(--gut) 0;display:grid;gap:1.4rem;perspective:1400px}
.uni-frame{--glow:#3fd0ff;position:relative;width:100%;aspect-ratio:var(--ar);max-height:72vh;margin:0 auto;border-radius:10px;overflow:hidden;background:#000;box-shadow:0 0 0 1px rgba(255,255,255,.18),0 0 120px -10px var(--glow),0 30px 120px -20px var(--glow);transition:aspect-ratio .6s cubic-bezier(.2,.8,.2,1),box-shadow .8s;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));will-change:transform}
.uni-frame video{width:100%;height:100%;object-fit:cover;transition:opacity .35s}
.uni-frame video.swap{opacity:0}
.uni-pick{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.pick{width:clamp(82px,14vw,150px);aspect-ratio:16/10;border-radius:10px;overflow:hidden;border:2px solid transparent;opacity:.55;background:#111;cursor:pointer;padding:0;transition:.3s}
.pick img{width:100%;height:100%;object-fit:cover}
.pick:hover{opacity:.9}
.pick.on{opacity:1;border-color:#fff;transform:translateY(-3px)}

/* salón 3D */
.venue{padding:clamp(60px,9vw,120px) 0 clamp(80px,12vw,150px);background:#000}
.rig{position:relative;margin:clamp(24px,4vw,50px) auto 0;width:min(1000px,calc(100% - 2 * var(--gut)));aspect-ratio:4/3;touch-action:none;cursor:grab;background:#02030a;overflow:hidden;border-radius:var(--r);border:1px solid var(--line)}
@media (min-width:820px){.rig{aspect-ratio:16/9;width:min(1000px,calc(100% - 2 * var(--gut)),calc(66vh * 1.7778))}}
@media (pointer:coarse){.rig{touch-action:pan-y}}
.rig:active{cursor:grabbing}
#gl{position:absolute;inset:0;width:100%;height:100%;display:block}
.tilt-wrap{position:absolute;right:12px;bottom:34px;display:grid;grid-template-columns:repeat(3,40px);grid-template-rows:repeat(2,40px);gap:5px;z-index:5}
.tilt{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:rgba(0,0,0,.55);color:#fff;font-size:.78rem;cursor:pointer;backdrop-filter:blur(6px);touch-action:none;user-select:none;-webkit-user-select:none}
.tilt:hover,.tilt:active{border-color:#fff;background:rgba(255,255,255,.18)}
.tilt[data-d="up"]{grid-area:1/2}
.tilt[data-d="left"]{grid-area:2/1}
.tilt[data-d="down"]{grid-area:2/2}
.tilt[data-d="right"]{grid-area:2/3}
.rig-hint{position:absolute;left:0;right:0;bottom:8px;text-align:center;font-size:.78rem;color:rgba(255,255,255,.55);pointer-events:none}
.rig-fallback{position:absolute;inset:0;display:grid;place-items:center;color:var(--mute);padding:2rem;text-align:center}
.ctrl{display:grid;gap:1.2rem;justify-items:center;margin:1.6rem var(--gut) 0}
.namefield{display:grid;gap:.4rem;width:min(420px,100%);font-size:.8rem;letter-spacing:.08em;color:var(--mute);text-align:center}
.namefield input{width:100%;text-align:center;background:rgba(255,255,255,.06);border:1px solid var(--line);color:#fff;font:inherit;font-size:1.1rem;padding:.85rem 1rem;border-radius:999px;outline:none}
.namefield input:focus{border-color:var(--accent)}
.seg{position:relative;display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;padding:5px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid var(--line);max-width:100%}
.seg button{position:relative;z-index:1;background:transparent;border:0;color:var(--mute);font:inherit;font-size:.95rem;padding:.7rem 1.3rem;border-radius:999px;cursor:pointer;transition:color .3s;white-space:nowrap}
.seg button.on{color:#000}
.seg .thumb{position:absolute;z-index:0;top:5px;bottom:5px;left:5px;width:80px;border-radius:999px;background:#fff;transition:transform .45s cubic-bezier(.2,.8,.2,1),width .45s cubic-bezier(.2,.8,.2,1)}
.switches{display:flex;gap:1.6rem;flex-wrap:wrap;justify-content:center}
.sw{display:inline-flex;align-items:center;gap:.7rem;cursor:pointer;user-select:none}
.sw input{position:absolute;opacity:0;pointer-events:none}
.sw b{font-weight:500;font-size:.98rem}
.track{position:relative;width:50px;height:30px;border-radius:999px;background:rgba(255,255,255,.14);border:1px solid var(--line);transition:background .3s,border-color .3s}
.track i{position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.sw input:checked + .track{background:var(--accent);border-color:var(--accent)}
.sw input:checked + .track i{transform:translateX(20px)}
.sw input:focus-visible + .track{outline:2px solid #fff;outline-offset:2px}

/* proceso */
.process{padding:clamp(70px,10vw,130px) var(--gut);background:#000;border-top:1px solid var(--line)}
.steps{list-style:none;margin-top:2.6rem;border-top:1px solid var(--line)}
.steps li{display:grid;grid-template-columns:4.2rem 1fr;gap:.3rem 1.4rem;padding:1.8rem 0;border-bottom:1px solid var(--line)}
.steps b{grid-row:span 2;font-family:var(--display);font-size:clamp(2rem,6vw,3.6rem);font-weight:800;line-height:1;color:var(--accent);letter-spacing:-.04em}
.steps h3{font-family:var(--display);font-size:1.5rem;font-weight:700;letter-spacing:-.03em}
.steps p{color:var(--mute);max-width:46ch}

/* necesitamos */
.needs{padding:clamp(80px,12vw,160px) var(--gut)}
.needs .mega{margin-top:.8rem}
.needs-note{margin-top:2.2rem;max-width:48ch;color:var(--paper-ink);font-size:1.05rem}

/* galería */
.work{padding:clamp(70px,10vw,130px) 0 clamp(60px,8vw,100px);background:#000}
.gallery{display:grid;grid-template-columns:repeat(2,1fr);grid-auto-rows:112px;grid-auto-flow:dense;gap:8px;padding:clamp(28px,4vw,50px) var(--gut) 0}
.tile{position:relative;border-radius:12px;overflow:hidden;background:#0c0c10;border:0;padding:0;cursor:default;grid-row:span 2}
.tile.xw{grid-column:span 2;grid-row:span 1}
.tile.big{grid-column:span 2;grid-row:span 2}
.tile video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s}
.tile:hover video{transform:scale(1.06)}
.tile::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);border-radius:12px;pointer-events:none}
/* contacto */
.contact{background:#000;overflow:hidden;isolation:isolate;padding-top:clamp(80px,12vw,150px)}
.stars{position:absolute;inset:0;width:100%;height:100%;z-index:-1}
.contact-wrap{display:grid;gap:3rem;padding:0 var(--gut) clamp(60px,8vw,100px)}
.links{margin-top:1.6rem;color:var(--mute);font-size:.95rem}
.links a{border-bottom:1px solid var(--line)}
.wa{display:grid;gap:1.1rem;background:rgba(12,14,20,.72);backdrop-filter:blur(16px);border:1px solid var(--line);border-radius:24px;padding:clamp(20px,3vw,34px)}
.wa label,.wa .field>span{display:grid;gap:.45rem;font-size:.82rem;letter-spacing:.06em;color:var(--mute)}
.wa input,.wa textarea{width:100%;background:rgba(255,255,255,.06);border:1px solid var(--line);color:#fff;font:inherit;font-size:1rem;padding:.85rem 1rem;border-radius:12px;outline:none;resize:vertical;color-scheme:dark}
.wa input:focus,.wa textarea:focus{border-color:var(--accent)}
.two{display:grid;gap:1.1rem}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.45rem}
.chips button{background:transparent;color:var(--ink);border:1px solid var(--line);padding:.55rem 1rem;border-radius:999px;font:inherit;font-size:.9rem;cursor:pointer;transition:.2s}
.chips button.on{background:#fff;color:#000;border-color:#fff}
.bubble{background:#0b3d2c;border-radius:14px 14px 14px 4px;padding:.9rem 1.1rem;color:#e8fff3;font-size:.92rem}
.bubble small{display:block;color:#8fd5b4;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;margin-bottom:.3rem}
.bubble p{white-space:pre-line}
.wa .btn{justify-content:center;background:#25d366;color:#04210f}
.foot{padding:1.4rem var(--gut);border-top:1px solid var(--line);color:var(--mute);font-size:.8rem}

/* reveal */
.reveal{opacity:0;transform:translateY(34px);transition:opacity .9s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.8,.2,1)}
.reveal.in{opacity:1;transform:none}

@media (min-width:820px){
  .rig{aspect-ratio:16/10}
  .scroll-hint{display:block}
  .brand img{height:36px}
  .rows{grid-template-columns:repeat(2,1fr);column-gap:clamp(30px,5vw,80px)}
  .rows.three{grid-template-columns:repeat(3,1fr)}
  .rows.three .row{grid-template-columns:1fr}
  .steps{display:grid;grid-template-columns:repeat(4,1fr);border-top:0;gap:20px}
  .steps li{grid-template-columns:1fr;border:1px solid var(--line);border-radius:var(--r);padding:1.8rem;background:#0a0a0f}
  .steps b{grid-row:auto;margin-bottom:1rem}
  .gallery{grid-template-columns:repeat(4,1fr);grid-auto-rows:170px;gap:10px}
  .contact-wrap{grid-template-columns:1fr 1fr;align-items:start;gap:5rem}
  .two{grid-template-columns:1fr 1fr}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
  .hero-title .line>span{transform:none}
}
.rig-fallback[hidden]{display:none}

@media (max-width:480px){
  .seg button{padding:.65rem .85rem;font-size:.88rem}
}