:root{
  --bg:#05060b; --bg2:#0b0d16; --ink:#f2f1f6; --soft:#a6a8b8; --line:rgba(255,255,255,.14);
  --acc:#ff4fd8; --acc-ink:#0a0812; --ice:#5fb4ff;
  --f-n:'Monoton',cursive; --f-c:'Big Shoulders Display',Impact,'Arial Narrow',sans-serif;
  --f-d:'Michroma',ui-sans-serif,system-ui,sans-serif;
  --f-b:'Manrope',ui-sans-serif,system-ui,-apple-system,sans-serif;
  --pad:clamp(20px,5vw,72px); --max:1240px; --r:2px;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;background:var(--bg)}
body{background:var(--bg);color:var(--ink);font-family:var(--f-b);font-weight:400;font-size:16px;line-height:1.6;overflow-x:clip;-webkit-font-smoothing:antialiased}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
svg[stroke="currentColor"]{width:1em;height:1em;vertical-align:-.15em;flex:none}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}

/* ---------- barra ---------- */
.bar{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:calc(env(safe-area-inset-top) + 14px) var(--pad) 14px;transition:background .4s,backdrop-filter .4s}
.bar.solid{background:rgba(5,6,11,.72);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.mark{font-family:var(--f-d);font-size:12px;letter-spacing:.22em;white-space:nowrap;text-shadow:0 1px 12px rgba(0,0,0,.5)}
.mark-n{color:var(--acc)}
.bar-r{display:flex;align-items:center;gap:10px}
.lang{display:flex;border:1px solid var(--line);border-radius:var(--r);background:rgba(5,6,11,.35)}
.lang button{font-size:11px;font-weight:600;letter-spacing:.14em;padding:7px 9px;color:var(--soft)}
.lang button[aria-pressed="true"]{color:var(--ink);background:rgba(255,255,255,.1)}

/* ---------- botones ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;white-space:nowrap;background:var(--acc);color:var(--acc-ink);
  font-weight:600;font-size:14px;letter-spacing:.06em;text-transform:uppercase;padding:14px 20px;border-radius:var(--r);
  box-shadow:0 0 0 1px rgba(255,255,255,.08),0 10px 40px -12px var(--acc);transition:transform .25s var(--ease),box-shadow .25s,background .4s}
.btn:hover{transform:translateY(-1px);box-shadow:0 0 0 1px rgba(255,255,255,.15),0 14px 50px -10px var(--acc)}
.btn svg{font-size:16px}
.btn-sm{padding:9px 12px;font-size:11px}
.btn-line{background:rgba(5,6,11,.35);color:var(--ink);box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.btn-line:hover{box-shadow:inset 0 0 0 1px var(--acc)}
.btn-xl{font-size:15px;padding:18px 26px}

/* ---------- película ---------- */
.film{position:relative;height:1500vh}
.stage{position:sticky;top:0;height:100vh;height:100svh;width:100%;overflow:hidden;background:#000}
.shots,.shot,.cam,.layer{position:absolute;inset:0}
.shot{visibility:hidden}
.shot.on{visibility:visible}
.cam{transform-origin:50% 50%;will-change:transform}
.layer img,.layer video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.layer{opacity:1}
.layer canvas{position:absolute;left:0;top:0;width:100%;height:100%}
.shot[data-id="j1"] .layer{background:#05060b url(f/j1-poster.jpg?v=b3) center/cover no-repeat}
.hud{position:absolute;inset:0;pointer-events:none}
/* gradación nocturna: azules y magentas de Miami */
.grade{position:absolute;inset:0;pointer-events:none;mix-blend-mode:soft-light;
  background:linear-gradient(160deg,rgba(40,60,190,.38),rgba(10,10,30,0) 45%,rgba(190,40,150,.30))}
.vig{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 45%,transparent 55%,rgba(0,0,0,.55) 100%),
  linear-gradient(to bottom,rgba(3,4,10,.55),transparent 22%,transparent 70%,rgba(3,4,10,.7))}
.grain{position:absolute;inset:-50%;pointer-events:none;opacity:.12;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");
  animation:grain .9s steps(4) infinite}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-1%)}100%{transform:translate(0,0)}}

/* portada sobre la primera toma */
.hero{position:absolute;left:0;right:0;top:0;z-index:5;padding:calc(env(safe-area-inset-top) + 92px) var(--pad) 0;max-width:760px;transition:opacity .35s,transform .35s}
.hero::before{content:"";position:absolute;z-index:-1;left:-30vw;top:-10vh;width:min(150vw,1500px);height:min(95vh,780px);pointer-events:none;
  background:radial-gradient(ellipse 60% 55% at 38% 40%,rgba(4,5,14,.82),rgba(4,5,14,.5) 55%,rgba(4,5,14,0) 100%)}
.hero.off{opacity:0;transform:translateY(-14px);pointer-events:none}
.hero-mark{font-family:var(--f-d);font-size:clamp(20px,5.4vw,40px);letter-spacing:.16em;line-height:1.2;margin-bottom:14px;text-shadow:0 2px 24px rgba(0,0,0,.55)}
.hero-mark span{color:var(--acc)}
.hero h1{font-weight:300;font-size:clamp(25px,3.6vw,46px);line-height:1.15;letter-spacing:-.01em;max-width:18ch;text-shadow:0 2px 30px rgba(0,0,0,.6)}
.hero-sub{margin-top:12px;color:#d9dae6;font-size:clamp(14px,1.3vw,17px);max-width:44ch;text-shadow:0 1px 16px rgba(0,0,0,.7)}
.hero-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}

/* subtítulos de cine */
.caps{position:absolute;inset:0;z-index:6;pointer-events:none}
.cap{position:absolute;left:var(--pad);right:var(--pad);bottom:calc(env(safe-area-inset-bottom) + 46px);max-width:620px;opacity:0;transform:translateY(10px)}
.cap.top{bottom:auto;top:calc(env(safe-area-inset-top) + 86px)}
.cap.on{opacity:1;transform:none;transition:opacity .5s .1s,transform .6s .1s var(--ease)}
.cap-k{font-family:var(--f-d);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--acc);margin-bottom:8px}
.cap-t{font-weight:300;font-size:clamp(20px,2.6vw,34px);line-height:1.25;text-shadow:0 2px 24px rgba(0,0,0,.8)}
.cap-s{margin-top:6px;font-size:14px;color:#cfd0dc;text-shadow:0 1px 12px rgba(0,0,0,.8)}
/* línea de avance de la película, sin números */
.tc{position:absolute;left:var(--pad);right:var(--pad);bottom:calc(env(safe-area-inset-bottom) + 22px);height:1px;background:rgba(255,255,255,.16);z-index:6}
.tc i{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--acc);box-shadow:0 0 10px var(--acc)}

/* marcadores HUD */
.mk{position:absolute;left:0;top:0;width:0;height:0;opacity:0;transition:opacity .45s}
.shot.on .mk.vis{opacity:1}
.mk-dot{position:absolute;left:-6px;top:-6px;width:12px;height:12px;border-radius:50%;border:1px solid #fff;background:rgba(255,255,255,.18);box-shadow:0 0 0 0 rgba(255,255,255,.5)}
.mk-dot::after{content:"";position:absolute;inset:3px;border-radius:50%;background:#fff}
.shot.on .mk-dot{animation:pulse 2.2s var(--ease) infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.55)}70%{box-shadow:0 0 0 14px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}
.mk-ln{position:absolute;left:6px;top:-0.5px;height:1px;width:0;background:rgba(255,255,255,.85);transform-origin:0 0;transform:rotate(-32deg);transition:width .5s .15s var(--ease)}
.shot.on .mk.vis .mk-ln{width:44px}
.mk-lb{position:absolute;left:44px;top:-37px;white-space:nowrap;font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  padding:5px 8px;background:rgba(5,6,11,.62);border:1px solid rgba(255,255,255,.22);border-left:2px solid var(--acc);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  opacity:0;transform:translateX(-6px);transition:opacity .35s .45s,transform .45s .45s var(--ease)}
.shot.on .mk.vis .mk-lb{opacity:1;transform:none}
.mk.l .mk-ln{left:auto;right:6px;transform-origin:100% 0;transform:rotate(32deg)}
.mk.l .mk-lb{left:auto;right:44px;border-left:1px solid rgba(255,255,255,.22);border-right:2px solid var(--acc)}
.chip{position:absolute;right:var(--pad);top:calc(env(safe-area-inset-top) + 74px);z-index:7;font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  display:flex;align-items:center;gap:8px;padding:6px 10px;border:1px solid rgba(255,255,255,.22);background:rgba(5,6,11,.5)}
.chip[hidden]{display:none}
.chip i{width:9px;height:9px;border-radius:50%;background:currentColor;box-shadow:0 0 10px currentColor}

/* ---------- secciones ---------- */
.sec{position:relative;padding:clamp(80px,12vw,150px) 0}
.sec h2{font-family:var(--f-d);font-weight:400;font-size:clamp(22px,3.4vw,40px);letter-spacing:.04em;line-height:1.2}
.sec-head{display:grid;gap:18px;margin-bottom:clamp(40px,6vw,72px);max-width:760px}
.sec-head p{color:var(--soft);font-size:clamp(15px,1.4vw,18px);max-width:52ch}

.services{background:linear-gradient(to bottom,#000,var(--bg) 120px)}
.svgroup{margin-top:36px}
.grp{font-size:11px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--acc);padding-bottom:14px;border-bottom:1px solid var(--line)}
.svlist{list-style:none}
.sv{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center;padding:22px 0;border-bottom:1px solid var(--line)}
.sv-t{display:grid;grid-template-columns:28px 1fr;column-gap:14px;row-gap:4px;align-items:start}
.sv-i{grid-row:span 2;font-size:22px;color:var(--acc);margin-top:2px}
.sv-n{font-family:var(--f-d);font-size:clamp(13px,1.5vw,17px);letter-spacing:.06em;line-height:1.35}
.sv-d{color:var(--soft);font-size:14.5px;max-width:52ch}
.sv-ph{width:clamp(96px,22vw,300px);aspect-ratio:4/5;overflow:hidden;border-radius:var(--r);background:#111}
.sv-ph img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.sv:hover .sv-ph img{transform:scale(1.05)}
.sv.wide .sv-ph{aspect-ratio:16/10;width:clamp(130px,34vw,460px)}

.color{display:grid;grid-template-columns:1.25fr 1fr;align-items:center;gap:0;padding:0;min-height:100svh;background:#000}
.color-media{position:relative;height:100%;min-height:100svh;overflow:hidden}
.color-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:40% 30%}
.color-tint{position:absolute;inset:0;mix-blend-mode:color;background:var(--acc);opacity:.92;transition:background .5s}
.color-media::after{content:"";position:absolute;inset:0;background:linear-gradient(to right,transparent 60%,#000)}
.color-copy{padding:var(--pad);display:grid;gap:18px;max-width:520px}
.color-copy p{color:var(--soft)}
.swatches{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}
.sw{width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.25);position:relative;transition:transform .25s var(--ease)}
.sw::after{content:"";position:absolute;inset:7px;border-radius:50%;background:var(--c);box-shadow:0 0 18px var(--c)}
.sw[aria-checked="true"]{border-color:#fff;transform:scale(1.08)}
.sw-name{font-size:11px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--acc)}

.shop{min-height:92svh;display:flex;align-items:center;overflow:hidden;background:#000}
.shop-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5}
.shop::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,#000,rgba(0,0,0,.2) 30%,rgba(0,0,0,.35) 70%,var(--bg));pointer-events:none}
.shop-in{position:relative;z-index:2;width:100%}
.shop h2{max-width:16ch}
.shop-cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,5vw,80px);margin-top:44px;max-width:860px}
.shop-col{border-top:1px solid rgba(255,255,255,.3);padding-top:18px}
.shop-col svg{font-size:26px;color:var(--acc)}
.shop-col h3{font-family:var(--f-d);font-weight:400;font-size:14px;letter-spacing:.1em;text-transform:uppercase;margin:14px 0 6px}
.shop-col p{color:#cfd0dc;font-size:15px}

.reel{position:relative;height:340vh;background:var(--bg)}
.reel-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center;gap:28px}
.reel-head{width:100%;display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:10px}
.reel-head h2{font-family:var(--f-d);font-weight:400;font-size:clamp(22px,3.4vw,40px);letter-spacing:.04em}
.reel-head p{color:var(--soft)}
.reel-track{display:flex;gap:10px;padding:0 var(--pad);will-change:transform}
.fr{flex:none;height:min(62svh,620px);position:relative;overflow:hidden;background:#111;border-radius:var(--r)}
.fr img{height:100%;width:auto;max-width:none;object-fit:cover}
.fr figcaption{position:absolute;left:12px;bottom:10px;font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.9)}

.contact{background:radial-gradient(80% 60% at 50% 100%,color-mix(in srgb,var(--acc) 22%,transparent),transparent 70%),var(--bg)}
.contact-in{text-align:center;display:grid;justify-items:center;gap:20px}
.contact-in > p{color:var(--soft);max-width:46ch}
.ct-list{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 26px;margin-top:20px}
.ct-list a{display:inline-flex;align-items:center;gap:8px;padding:8px 2px;border-bottom:1px solid transparent;font-size:15px}
.ct-list a:hover{border-color:var(--acc)}
.ct-list svg{color:var(--acc);font-size:18px}
.ct-area{font-size:11px !important;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--soft)}

.foot{border-top:1px solid var(--line);padding:30px 0 calc(env(safe-area-inset-bottom) + 30px)}
.foot-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px}
.foot-mark{font-family:var(--f-d);font-size:12px;letter-spacing:.22em}
.foot-mark span{color:var(--acc)}
.foot-c{color:var(--soft);font-size:13px}
.credit{display:inline-flex;align-items:center;gap:8px;color:var(--soft);font-size:12px}
.credit img{height:15px;width:auto}

/* revelado al entrar */
.js .rv{opacity:0;transform:translateY(18px);transition:opacity .8s var(--ease),transform .9s var(--ease)}
.js .rv.in{opacity:1;transform:none}

/* ---------- teléfono ---------- */
@media (max-width:900px){
  .color{grid-template-columns:1fr;min-height:0}
  .color-media{min-height:62svh}
  .color-media::after{background:linear-gradient(to bottom,transparent 55%,#000)}
  .color-copy{padding:28px var(--pad) 70px}
}
@media (max-width:760px){
  .mark{font-size:10.5px;letter-spacing:.16em}
  .mark-w{display:none}
  .hero{padding-top:calc(env(safe-area-inset-top) + 80px)}
  .hero h1{max-width:16ch}
  .hero-sub{max-width:34ch}
  .btn{padding:13px 16px;font-size:13px}
  .sv{grid-template-columns:1fr 96px;gap:14px}
  .sv.wide{grid-template-columns:1fr}
  .sv.wide .sv-ph{width:100%;order:-1}
  .sv-ph{width:96px}
  .color{grid-template-columns:1fr;min-height:0}
  .color-media{min-height:62svh}
  .color-media::after{background:linear-gradient(to bottom,transparent 55%,#000)}
  .color-copy{padding:28px var(--pad) 70px}
  .shop-cols{grid-template-columns:1fr}
  .reel{height:420vh}
  .fr{height:52svh}
  .chip{top:calc(env(safe-area-inset-top) + 64px)}
  .cap{bottom:calc(env(safe-area-inset-bottom) + 40px)}
}
@media (max-width:360px){ .btn-sm{padding:8px 9px;font-size:10px} .lang button{padding:6px 7px} }

@media (prefers-reduced-motion:reduce){
  .grain{animation:none}
  .shot.on .mk-dot{animation:none}
  .js .rv{opacity:1;transform:none;transition:none}
  .cam{will-change:auto}
}

/* ===== 6-oct-2026: pantalla de inicio estilo videojuego + garaje de color ===== */
.hero.title{max-width:none;right:0;bottom:0;padding:calc(env(safe-area-inset-top) + 96px) var(--pad) calc(env(safe-area-inset-bottom) + 34px);display:flex;flex-direction:column}
.hero.title::before{left:-20vw;width:min(120vw,1300px)}
.hud-frame{position:absolute;inset:calc(env(safe-area-inset-top) + 74px) calc(var(--pad) * .5) calc(env(safe-area-inset-bottom) + 18px);pointer-events:none}
.hud-frame i{position:absolute;width:26px;height:26px;border:1.5px solid var(--acc);opacity:.75;filter:drop-shadow(0 0 6px var(--acc))}
.hud-frame i:nth-child(1){left:0;top:0;border-right:0;border-bottom:0}.hud-frame i:nth-child(2){right:0;top:0;border-left:0;border-bottom:0}
.hud-frame i:nth-child(3){left:0;bottom:0;border-right:0;border-top:0}.hud-frame i:nth-child(4){right:0;bottom:0;border-left:0;border-top:0}
.t-meta{display:flex;gap:18px;font-family:var(--f-d);font-size:10px;letter-spacing:.3em;color:var(--soft);margin-bottom:18px}
.t-meta span:last-child{color:var(--acc)}
.hero.title .hero-mark{font-size:clamp(30px,6.4vw,84px);letter-spacing:.12em;line-height:1.05;margin-bottom:10px}
.neon{color:#fff;text-shadow:0 0 6px rgba(255,255,255,.55),0 0 18px var(--acc),0 0 44px var(--acc),0 2px 24px rgba(0,0,0,.6);animation:neonOn 1.6s steps(1) .2s both}
.neon span{color:var(--acc)}
@keyframes neonOn{0%{opacity:.15}8%{opacity:1}12%{opacity:.3}18%{opacity:1}26%{opacity:.5}30%,100%{opacity:1}}
.t-tag{font-weight:300 !important;font-size:clamp(14px,1.5vw,19px) !important;letter-spacing:.02em;max-width:40ch !important;color:#dfe0ea;margin-bottom:clamp(22px,4vh,40px)}
.gmenu{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.gm{display:flex;align-items:center;gap:14px;font-family:var(--f-d);font-size:clamp(17px,2.3vw,28px);letter-spacing:.14em;color:rgba(255,255,255,.55);padding:6px 14px 6px 4px;border-left:2px solid transparent;transition:color .2s,transform .25s var(--ease),background .25s;text-shadow:0 2px 18px rgba(0,0,0,.7)}
.gm b{font-size:.6em;color:var(--acc);opacity:0;transform:translateX(-6px);transition:opacity .2s,transform .2s;filter:drop-shadow(0 0 6px var(--acc))}
.gm.on{color:#fff;transform:translateX(8px);background:linear-gradient(90deg,color-mix(in srgb,var(--acc) 28%,transparent),transparent 85%);border-left-color:var(--acc)}
.gm.on b{opacity:1;transform:none;animation:caret 1s steps(2) infinite}
@keyframes caret{50%{opacity:.25}}
.press{margin-top:auto;align-self:center;font-family:var(--f-d);font-size:clamp(12px,1.3vw,15px);letter-spacing:.42em;color:#fff;padding:12px 20px;text-shadow:0 0 12px var(--acc),0 2px 14px rgba(0,0,0,.8);animation:blink 1.15s ease-in-out infinite}
.press::before,.press::after{content:"—";color:var(--acc);margin:0 .8em;letter-spacing:0}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.18}}
.k-mob{display:none}
@media (hover:none),(max-width:760px){.k-desk{display:none}.k-mob{display:inline}}

/* panel flotante de color durante la película */
.ghud{position:absolute;z-index:7;right:var(--pad);bottom:calc(env(safe-area-inset-bottom) + 46px);display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.ghud-t{display:flex;align-items:center;gap:9px;font-family:var(--f-d);font-size:10px;letter-spacing:.24em;text-transform:uppercase;padding:10px 13px;
  background:rgba(5,6,11,.55);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:var(--r)}
.ghud-t i{width:14px;height:14px;border-radius:50%;background:conic-gradient(red,#ff0,#0f0,#0ff,#00f,#f0f,red);box-shadow:0 0 10px var(--acc)}
.ghud-p{display:none;width:min(300px,calc(100vw - 2 * var(--pad)));padding:16px;background:rgba(5,6,11,.72);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-radius:var(--r)}
.ghud.open .ghud-p{display:grid;gap:14px}
.hero.title:not(.off) ~ .ghud{opacity:0;pointer-events:none}
.ghud{transition:opacity .35s}
@media (max-width:760px){.ghud{bottom:auto;top:calc(env(safe-area-inset-top) + 66px)}}

/* controles (garaje y panel) */
.g-row{display:grid;gap:8px}
.g-lb{font-family:var(--f-d);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--soft)}
.g-sl{-webkit-appearance:none;appearance:none;width:100%;height:12px;border-radius:12px;background:var(--trk);outline-offset:4px;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.g-sl::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;background:#fff;border:3px solid #05060b;box-shadow:0 0 0 1px #fff,0 0 14px var(--acc)}
.g-sl::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#fff;border:3px solid #05060b;box-shadow:0 0 0 1px #fff,0 0 14px var(--acc)}
.g-bt{display:flex;flex-wrap:wrap;gap:6px}
.g-bt button{font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;padding:7px 10px;color:var(--soft);box-shadow:inset 0 0 0 1px var(--line);border-radius:var(--r)}
.g-bt button.on{color:var(--acc-ink);background:var(--acc);box-shadow:none}

/* sección garaje */
.garage{background:radial-gradient(70% 60% at 30% 60%,color-mix(in srgb,var(--acc) 16%,transparent),transparent 70%),#04050a}
.g-k{font-family:var(--f-d);font-size:11px !important;letter-spacing:.4em;color:var(--acc) !important;margin-bottom:6px}
.g-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:clamp(20px,3vw,44px);align-items:center;margin-top:clamp(20px,3vw,36px)}
.g-view{position:relative;padding:14px}
.g-view canvas{display:block;width:100%;height:auto;border-radius:var(--r);box-shadow:0 30px 80px -30px color-mix(in srgb,var(--acc) 60%,transparent)}
.g-view .hud-frame{inset:0}
.g-ctl{display:grid;gap:26px}
@media (max-width:860px){.g-grid{grid-template-columns:1fr}}


/* la película se ve tal cual salió del video: sin tinte ni grano; solo sombra arriba y abajo para leer los textos */
.film .grade,.film .grain{display:none}
.film .vig{background:linear-gradient(to bottom,rgba(3,4,10,.45),transparent 18%,transparent 72%,rgba(3,4,10,.62))}
.layer canvas{image-rendering:auto}

/* ===== Miami Nights: letrero de neón hecho a mano ===== */
.mark{font-family:var(--f-c);font-weight:700;font-size:15px;letter-spacing:.2em}
.neon-sign{position:relative;margin:0 0 clamp(14px,2.6vh,26px);line-height:1}
.hero.title .hero-mark{display:flex;flex-direction:column;align-items:flex-start;gap:0;margin:0;letter-spacing:0;text-shadow:none;animation:none}
.hero.title .hero-mark .n305{font-family:var(--f-n);font-weight:400;font-size:clamp(54px,9.5vw,124px);line-height:.95;letter-spacing:.06em;color:#fff5fb;
  text-shadow:0 0 2px #fff,0 0 7px #fff,0 0 14px var(--acc),0 0 34px var(--acc),0 0 70px var(--acc),0 0 120px color-mix(in srgb,var(--acc) 70%,transparent);animation:neonOn 2.2s steps(1) .15s both}
.hero.title .hero-mark .nstar{font-family:var(--f-c);font-weight:700;font-size:clamp(24px,4.4vw,58px);letter-spacing:.34em;margin:4px 0 0 .2em;color:#eef7ff;
  text-shadow:0 0 2px #fff,0 0 6px #fff,0 0 12px var(--ice),0 0 28px var(--ice),0 0 56px var(--ice);animation:neonOn 2.2s steps(1) .6s both}
.hero.title .hero-mark.reflect{position:absolute;left:0;top:100%;transform:scaleY(-1) translateY(-6px);opacity:.28;filter:blur(2.5px);pointer-events:none;
  -webkit-mask-image:linear-gradient(to top,rgba(0,0,0,.9),transparent 62%);mask-image:linear-gradient(to top,rgba(0,0,0,.9),transparent 62%)}
.hero.title .hero-mark.reflect .n305,.hero.title .hero-mark.reflect .nstar{animation:none}
.neon-line{position:absolute;left:0;right:auto;top:calc(100% + 10px);width:min(62vw,560px);height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--acc),var(--ice) 70%,transparent);box-shadow:0 0 8px var(--acc),0 0 18px var(--acc),0 0 30px var(--ice);animation:lineOn 1.4s var(--ease) .9s both}
@keyframes lineOn{from{transform:scaleX(0);transform-origin:left}to{transform:scaleX(1);transform-origin:left}}
.hero.title .t-meta{font-family:var(--f-c);font-weight:500;font-size:13px;letter-spacing:.36em}
.hero.title .t-tag{font-family:var(--f-b);margin-top:clamp(26px,4.4vh,44px)}
/* menú: letra alta condensada con tubo de neón al seleccionar */
.gmenu{gap:2px;margin-top:4px}
.gm{font-family:var(--f-c);font-weight:700;font-size:clamp(26px,3.6vw,46px);letter-spacing:.1em;color:rgba(255,255,255,.5);padding:4px 18px 4px 0;border-left:0;background:none;gap:16px;transform:none}
.gm b{width:34px;height:3px;border-radius:2px;background:var(--acc);box-shadow:0 0 6px var(--acc),0 0 14px var(--acc),0 0 26px var(--acc);opacity:0;transform:scaleX(.2);transform-origin:left;transition:opacity .2s,transform .25s var(--ease);font-size:0;filter:none}
.gm.on{color:#fff;background:none;border-left:0;transform:translateX(6px);text-shadow:0 0 2px #fff,0 0 10px var(--acc),0 0 24px var(--acc),0 0 48px color-mix(in srgb,var(--acc) 60%,transparent)}
.gm.on b{opacity:1;transform:none;animation:tube 1.1s ease-in-out infinite}
@keyframes tube{50%{opacity:.55}}
.press{font-family:var(--f-c);font-weight:700;font-size:clamp(14px,1.5vw,19px);letter-spacing:.3em;color:#fff;text-shadow:0 0 2px #fff,0 0 10px var(--ice),0 0 24px var(--ice)}
.press::before,.press::after{content:"•";color:var(--acc);text-shadow:0 0 8px var(--acc),0 0 16px var(--acc);margin:0 .9em}
.hud-frame i{border-radius:3px;border-color:var(--ice);opacity:.7;filter:drop-shadow(0 0 5px var(--ice))}
.cap-k,.g-lb,.ghud-t,.g-k,.foot-mark{font-family:var(--f-c);font-weight:700;letter-spacing:.3em}
.cap-k{font-size:13px}
.cap-t{font-family:var(--f-c);font-weight:500;font-size:clamp(26px,3.4vw,46px);letter-spacing:.03em;line-height:1.1}
@media (max-width:760px){.hero.title .hero-mark .n305{font-size:clamp(58px,19vw,84px)}.hero.title .hero-mark .nstar{font-size:clamp(22px,7vw,30px);letter-spacing:.3em}.neon-line{width:78vw}}

.gm:focus-visible{outline:none}
/* teléfono: la pantalla de inicio cabe entera (logo, menú y PRESS START) */
@media (max-width:760px){
  .hero.title{padding-top:calc(env(safe-area-inset-top) + 74px);padding-bottom:calc(env(safe-area-inset-bottom) + 22px)}
  .hero.title .t-meta{font-size:11px;margin-bottom:10px}
  .hero.title .hero-mark .n305{font-size:clamp(50px,16vw,72px)}
  .hero.title .hero-mark .nstar{font-size:clamp(19px,6vw,26px);letter-spacing:.28em}
  .neon-sign{margin-bottom:16px}
  .hero.title .t-tag{margin-top:14px;margin-bottom:14px;font-size:14px !important;max-width:30ch !important}
  .gmenu{gap:0}
  .gm{font-size:clamp(22px,6.4vw,28px);padding:3px 12px 3px 0;gap:12px;letter-spacing:.09em}
  .gm b{width:22px}
  .press{font-size:12px;letter-spacing:.24em;padding:8px 10px;margin-top:auto}
  .press::before,.press::after{margin:0 .5em}
  .hud-frame{inset:calc(env(safe-area-inset-top) + 60px) 10px calc(env(safe-area-inset-bottom) + 12px)}
}
@media (max-width:760px) and (max-height:700px){
  .hero.title .hero-mark .n305{font-size:46px}.hero.title .hero-mark .nstar{font-size:18px}.gm{font-size:21px}.hero.title .t-tag{display:none}
}

/* ===== menú de juego v2: fichas numeradas, tubo de neón que se desliza, borde en diagonal ===== */
.gmenu{position:relative;display:flex;flex-direction:column;gap:6px;width:min(100%,440px);margin-top:4px;padding-left:16px}
.gm-tube{position:absolute;left:0;top:0;width:3px;height:0;border-radius:3px;background:var(--acc);box-shadow:0 0 6px var(--acc),0 0 16px var(--acc),0 0 30px var(--acc);transition:top .32s var(--ease),height .32s var(--ease);animation:tube 1.2s ease-in-out infinite}
.gmenu .gm{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;width:100%;padding:9px 22px 9px 14px;transform:none;border-left:0;
  font-family:var(--f-c);font-weight:700;font-size:clamp(22px,2.6vw,32px);letter-spacing:.1em;color:rgba(255,255,255,.58);text-shadow:0 2px 14px rgba(0,0,0,.7);
  background:linear-gradient(90deg,rgba(255,255,255,.04),rgba(255,255,255,0));clip-path:polygon(0 0,100% 0,calc(100% - 16px) 100%,0 100%);transition:color .2s,background .25s,transform .25s var(--ease)}
.gmenu .gm b{display:none}
.gm-n{font-family:var(--f-c);font-weight:500;font-style:normal;font-size:.5em;letter-spacing:.2em;color:var(--acc);opacity:.75;text-shadow:0 0 8px var(--acc)}
.gm-l{display:flex;flex-direction:column;align-items:flex-start;line-height:1.05;text-align:left}
.gm-l small{font-family:var(--f-b);font-weight:400;font-size:12.5px;letter-spacing:.02em;text-transform:none;color:rgba(255,255,255,.55);margin-top:3px;opacity:0;transform:translateY(-4px);transition:opacity .25s,transform .25s var(--ease)}
.gm-a{font-size:18px;color:var(--acc);opacity:0;transform:translateX(-8px);transition:opacity .2s,transform .25s var(--ease);filter:drop-shadow(0 0 6px var(--acc))}
.gmenu .gm.on{color:#fff;transform:translateX(6px);background:linear-gradient(90deg,color-mix(in srgb,var(--acc) 22%,rgba(255,255,255,.06)),rgba(255,255,255,.03) 70%,transparent);
  text-shadow:0 0 2px #fff,0 0 10px var(--acc),0 0 24px var(--acc);box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.gmenu .gm.on .gm-l small{opacity:1;transform:none}
.gmenu .gm.on .gm-a{opacity:1;transform:none}
.gmenu .gm.on .gm-n{opacity:1}
.keys{display:none;margin-top:10px;padding-left:14px;font-family:var(--f-c);font-weight:500;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.45);align-items:center;gap:6px}
.keys kbd{font:inherit;font-weight:700;color:#fff;padding:2px 6px;border:1px solid rgba(255,255,255,.3);border-radius:3px;margin-right:2px}
.keys span{margin:0 10px 0 2px}
@media (hover:hover) and (min-width:761px){.keys{display:flex}}
@media (max-width:760px){.gmenu{gap:3px;width:100%;padding-left:12px}.gmenu .gm{font-size:clamp(19px,5.6vw,24px);padding:7px 16px 7px 10px;gap:10px}.gm-l small{font-size:11.5px}.gm-a{font-size:15px}}
@media (max-width:760px) and (max-height:700px){.gmenu .gm{font-size:19px;padding:5px 14px 5px 10px}.gm-l small{display:none}}

@media (min-width:761px){.gmenu .gm{font-size:clamp(24px,2.9vw,36px);padding:10px 24px 10px 16px}.gmenu{width:min(100%,470px)}}

/* ===== Inicio "calm": limpio, asimétrico, sin ruido. Logo y menú a la izquierda, el carro respira a la derecha ===== */
.hero.calm{max-width:none;right:0;bottom:0;display:flex;flex-direction:column;justify-content:flex-end;gap:0;
  padding:calc(env(safe-area-inset-top) + 96px) var(--pad) calc(env(safe-area-inset-bottom) + 44px)}
.hero.calm::before{left:-20vw;top:auto;bottom:-10vh;width:min(110vw,1200px);height:min(120vh,900px)}
.hero.calm .hero-mark{display:block;margin:0 0 14px;font-family:var(--f-d);font-size:clamp(22px,3.4vw,44px);letter-spacing:.16em;line-height:1.15;color:#fff;
  text-shadow:0 2px 24px rgba(0,0,0,.6),0 0 28px color-mix(in srgb,var(--acc) 35%,transparent);animation:none}
.hero.calm .hero-mark span{color:var(--acc)}
.hero.calm .t-tag{margin:0 0 clamp(34px,6vh,64px);font-size:clamp(15px,1.45vw,19px) !important;max-width:36ch !important;color:#d9dae6}
.hero.calm .gmenu{position:static;display:flex;flex-direction:column;align-items:flex-start;gap:10px;width:auto;padding:0;margin:0}
.hero.calm .gmenu .gm{display:flex;align-items:center;gap:16px;width:auto;padding:4px 0;background:none;clip-path:none;box-shadow:none;transform:none;
  font-family:var(--f-c);font-weight:500;font-size:clamp(20px,2.2vw,30px);letter-spacing:.2em;color:rgba(255,255,255,.5);text-shadow:0 2px 14px rgba(0,0,0,.7);transition:color .25s,transform .3s var(--ease)}
.hero.calm .gmenu .gm i{display:block;width:0;height:1px;background:var(--acc);box-shadow:0 0 8px var(--acc);transition:width .3s var(--ease)}
.hero.calm .gmenu .gm.on{color:#fff;transform:translateX(4px);text-shadow:0 2px 14px rgba(0,0,0,.7),0 0 18px color-mix(in srgb,var(--acc) 45%,transparent)}
.hero.calm .gmenu .gm.on i{width:34px}
.hero.calm .press{margin:clamp(30px,5vh,56px) 0 0;align-self:flex-start;padding:0;font-family:var(--f-c);font-weight:500;font-size:12px;letter-spacing:.42em;color:rgba(255,255,255,.85);text-shadow:0 1px 10px rgba(0,0,0,.8);animation:breathe 2.4s ease-in-out infinite}
.hero.calm .press::before,.hero.calm .press::after{content:none}
@keyframes breathe{0%,100%{opacity:1}50%{opacity:.3}}
@media (max-width:760px){
  .hero.calm{padding-top:calc(env(safe-area-inset-top) + 80px);padding-bottom:calc(env(safe-area-inset-bottom) + 30px);justify-content:flex-start}
  .hero.calm .hero-mark{font-size:clamp(20px,6.2vw,26px);letter-spacing:.14em}
  .hero.calm .t-tag{margin-bottom:26px;font-size:14px !important;max-width:30ch !important}
  .hero.calm .gmenu{gap:6px}.hero.calm .gmenu .gm{font-size:clamp(19px,5.8vw,24px);letter-spacing:.18em}
  .hero.calm .press{margin-top:auto;font-size:11px;letter-spacing:.34em}
}

/* =====================================================================
   REDISEÑO 6-oct-2026 — blanco premium, menú de juego estilo Gran Turismo
   (la película de arriba no se toca)
   ===================================================================== */
:root{--w-bg:#f5f4f1; --w-bg2:#ffffff; --w-ink:#0c0d11; --w-soft:#5b5e69; --w-line:rgba(12,13,17,.09); --w-acc:color-mix(in srgb,var(--acc) 72%,#000)}
.gt{background:var(--w-bg);color:var(--w-ink)}
.sec-gt{padding:clamp(90px,12vw,170px) 0}
.gt-head{display:grid;gap:16px;max-width:820px;margin-bottom:clamp(44px,6vw,84px)}
.gt-kick{display:flex;align-items:center;gap:12px;font-family:var(--f-d);font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--w-soft)}
.gt-tag{display:inline-grid;place-items:center;min-width:34px;height:22px;padding:0 8px;border-radius:999px;background:var(--w-ink);color:#fff;font-family:var(--f-d);font-size:10px;letter-spacing:.12em}
.gt h2{font-family:var(--f-b);font-weight:300;font-size:clamp(34px,5.2vw,72px);line-height:1.02;letter-spacing:-.035em;color:var(--w-ink)}
.gt-head > p:not(.gt-kick){font-size:clamp(16px,1.35vw,19px);line-height:1.6;color:var(--w-soft);max-width:54ch}

/* capítulos de servicios */
.chs{display:grid;gap:clamp(60px,9vw,130px)}
.ch{display:grid;grid-template-columns:1.25fr 1fr;align-items:center;gap:clamp(28px,5vw,80px)}
.ch.flip{grid-template-columns:1fr 1.25fr}
.ch.flip .ch-ph{order:2}
.ch-ph{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:18px;background:#e9e8e4;box-shadow:0 40px 80px -40px rgba(12,13,17,.35)}
.ch-ph img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.ch:hover .ch-ph img{transform:scale(1.04)}
.ch-card{display:grid;gap:18px;padding:clamp(4px,1vw,10px) 0}
.ch-n{display:flex;align-items:center;gap:14px;font-family:var(--f-d);font-size:12px;letter-spacing:.2em;color:var(--w-soft)}
.ch-n span:first-child{font-size:clamp(28px,3vw,40px);letter-spacing:.02em;color:var(--w-ink)}
.ch-n i{flex:1;max-width:120px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--acc),transparent)}
.ch-zone{display:inline-flex;align-items:center;gap:8px;align-self:start;width:max-content;padding:6px 12px;border-radius:999px;border:1px solid var(--w-line);background:var(--w-bg2);font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--w-soft)}
.ch-zone .sv-i{font-size:15px;color:var(--w-acc);margin:0;grid-row:auto}
.ch-t{font-family:var(--f-b);font-weight:400;font-size:clamp(26px,2.9vw,40px);line-height:1.1;letter-spacing:-.02em}
.ch-list{list-style:none;display:grid;gap:0;border-top:1px solid var(--w-line)}
.ch-list li{display:grid;gap:4px;padding:16px 0;border-bottom:1px solid var(--w-line)}
.ch-list b{font-weight:600;font-size:16px}
.ch-list span{color:var(--w-soft);font-size:15px;line-height:1.55}
@media (max-width:860px){.ch,.ch.flip{grid-template-columns:1fr}.ch.flip .ch-ph{order:0}.ch-ph{aspect-ratio:5/4}}

/* garaje: pantalla de personalización */
.garage-gt{background:linear-gradient(180deg,var(--w-bg),#eceae6)}
.garage-gt .g-grid{grid-template-columns:1.55fr 1fr;gap:clamp(24px,4vw,60px)}
.garage-gt .g-view{padding:0}
.garage-gt .g-view canvas{border-radius:18px;box-shadow:0 50px 90px -40px rgba(12,13,17,.45),0 0 0 1px var(--w-line)}
.g-cap{margin-top:14px;font-family:var(--f-d);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--w-soft)}
.garage-gt .g-ctl{padding:clamp(22px,2.6vw,34px);border-radius:18px;background:var(--w-bg2);box-shadow:0 30px 60px -40px rgba(12,13,17,.3),0 0 0 1px var(--w-line);gap:30px}
.garage-gt .g-lb{color:var(--w-ink);font-family:var(--f-d);font-weight:400;font-size:11px;letter-spacing:.24em}
.garage-gt .g-sl{height:10px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.garage-gt .g-sl::-webkit-slider-thumb{background:#fff;border:3px solid var(--w-ink);box-shadow:0 4px 14px rgba(0,0,0,.25)}
.garage-gt .g-sl::-moz-range-thumb{background:#fff;border:3px solid var(--w-ink)}
.garage-gt .g-bt button{color:var(--w-soft);box-shadow:inset 0 0 0 1px var(--w-line);border-radius:999px;padding:8px 14px}
.garage-gt .g-bt button.on{background:var(--w-ink);color:#fff}
@media (max-width:860px){.garage-gt .g-grid{grid-template-columns:1fr}}

/* taller / a domicilio: dos fichas grandes */
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.4vw,30px)}
.tile{position:relative;overflow:hidden;border-radius:18px;background:#111;aspect-ratio:4/5;box-shadow:0 40px 80px -40px rgba(12,13,17,.4)}
.tile .tile-v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tile::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(5,6,11,.82),rgba(5,6,11,.1) 55%,transparent)}
.tile-t{position:absolute;left:clamp(20px,2.4vw,32px);right:clamp(20px,2.4vw,32px);bottom:clamp(20px,2.4vw,32px);z-index:1;color:#fff;display:grid;gap:8px}
.tile-t .gt-tag{background:#fff;color:var(--w-ink);justify-self:start}
.tile-t h3{font-family:var(--f-b);font-weight:400;font-size:clamp(24px,2.4vw,34px);letter-spacing:-.02em}
.tile-t p:not(.gt-tag){color:rgba(255,255,255,.82);font-size:15px;max-width:34ch}
@media (max-width:760px){.tiles{grid-template-columns:1fr}.tile{aspect-ratio:4/4.4}}

/* trabajos recientes */
.gt.reel{background:var(--w-bg2)}
.gt .reel-head{display:grid;gap:14px}
.gt .reel-head h2{font-size:clamp(34px,5vw,68px)}
.gt .reel-head p:not(.gt-kick){color:var(--w-soft)}
.gt .fr{border-radius:16px;background:#e9e8e4;box-shadow:0 30px 60px -36px rgba(12,13,17,.4)}
.gt .fr figcaption{left:14px;bottom:14px;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.92);color:var(--w-ink);text-shadow:none;font-family:var(--f-d);font-weight:400;font-size:10px;letter-spacing:.18em}

/* contacto */
.gt.contact{background:var(--w-bg)}
.gt.contact .contact-in{display:grid;justify-items:center;text-align:center;gap:18px}
.gt.contact h2{font-size:clamp(38px,6vw,84px)}
.gt.contact .contact-in > p{color:var(--w-soft);max-width:46ch}
.gt.contact .btn{background:var(--w-ink);color:#fff;border-radius:999px;box-shadow:0 20px 40px -18px rgba(12,13,17,.55);padding:18px 30px}
.gt.contact .btn:hover{background:#000}
.gt.contact .ct-list a{color:var(--w-ink)}
.gt.contact .ct-list a:hover{border-color:var(--w-ink)}
.gt.contact .ct-list svg{color:var(--w-acc)}
.gt.contact .ct-area{color:var(--w-soft)}

/* pie y barra sobre las secciones blancas */
.foot{background:var(--w-bg);color:var(--w-ink);border-top:1px solid var(--w-line)}
.foot .foot-mark,.foot .foot-c,.foot .credit{color:var(--w-soft)}
.foot .foot-mark{color:var(--w-ink)}
.bar.solid{background:rgba(245,244,241,.82);color:var(--w-ink);box-shadow:0 1px 0 var(--w-line)}
.bar.solid .mark{color:var(--w-ink);text-shadow:none}
.bar.solid .lang{background:rgba(255,255,255,.6);border-color:var(--w-line)}
.bar.solid .lang button{color:var(--w-soft)}
.bar.solid .lang button[aria-pressed="true"]{color:var(--w-ink);background:rgba(12,13,17,.08)}
.bar.solid .btn{background:var(--w-ink);color:#fff;box-shadow:none;border-radius:999px}
.rv{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}}

/* ===== Portada estilo menú de Gran Turismo 7: título arriba, fichas de cristal abajo ===== */
.hero.gt7{max-width:none;right:0;bottom:0;display:flex;flex-direction:column;justify-content:space-between;
  padding:calc(env(safe-area-inset-top) + 104px) var(--pad) calc(env(safe-area-inset-bottom) + 30px)}
.hero.gt7::before{left:-10vw;top:-10vh;width:min(90vw,1000px);height:min(70vh,620px)}
.hero.gt7::after{content:"";position:absolute;z-index:-1;left:0;right:0;bottom:0;height:46%;pointer-events:none;background:linear-gradient(to top,rgba(3,4,10,.72),transparent)}
.hero.gt7 .hero-mark{display:block;margin:0 0 12px;font-family:var(--f-b);font-weight:200;font-size:clamp(34px,5vw,72px);letter-spacing:-.03em;line-height:1;color:#fff;text-shadow:0 2px 30px rgba(0,0,0,.55);animation:none}
.hero.gt7 .hero-mark span{font-weight:600;color:#fff}
.hero.gt7 .t-tag{margin:0;font-size:clamp(15px,1.3vw,18px) !important;max-width:40ch !important;color:rgba(255,255,255,.82)}
.t-bottom{display:grid;gap:16px}
.hero.gt7 .press{align-self:start;justify-self:start;display:inline-flex;align-items:center;gap:10px;margin:0;padding:8px 14px 8px 10px;border-radius:999px;
  background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  font-family:var(--f-d);font-weight:400;font-size:10px;letter-spacing:.28em;color:#fff;text-shadow:none;animation:none}
.hero.gt7 .press i{width:8px;height:8px;border-radius:50%;background:#fff;box-shadow:0 0 10px #fff;animation:breathe 1.8s ease-in-out infinite}
.hero.gt7 .press::before,.hero.gt7 .press::after{content:none}
.hero.gt7 .gmenu{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;width:100%;max-width:1180px;padding:0;margin:0}
.hero.gt7 .gmenu .gm{display:grid;align-content:space-between;gap:10px;min-height:118px;padding:16px 18px;border-radius:16px;text-align:left;transform:none;clip-path:none;
  background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);-webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);
  color:#fff;text-shadow:none;transition:background .3s,color .3s,transform .35s var(--ease),box-shadow .3s}
.hero.gt7 .gmenu .gm i{display:none}
.gm-top{display:flex;align-items:center;justify-content:space-between}
.hero.gt7 .gm-num{display:block !important;width:auto;height:auto;background:none;box-shadow:none;font-style:normal;font-family:var(--f-d);font-size:10px;letter-spacing:.2em;opacity:.7}
.gm-top svg{font-size:18px;opacity:.8}
.gm-ti{font-family:var(--f-b);font-weight:600;font-size:clamp(15px,1.2vw,18px);letter-spacing:.14em}
.hero.gt7 .gm small{display:block;opacity:.72;font-size:12.5px;font-weight:400;letter-spacing:0;text-transform:none;margin-top:-4px}
.hero.gt7 .gmenu .gm.on{background:#fff;color:var(--w-ink);transform:translateY(-6px);box-shadow:0 24px 50px -20px rgba(0,0,0,.6)}
.hero.gt7 .gmenu .gm.on .gm-num,.hero.gt7 .gmenu .gm.on small{opacity:.6}
.hero.gt7 .gmenu .gm.on .gm-top svg{color:var(--w-acc);opacity:1}
@media (max-width:760px){
  .hero.gt7{padding-top:calc(env(safe-area-inset-top) + 84px);padding-bottom:calc(env(safe-area-inset-bottom) + 18px)}
  .hero.gt7 .hero-mark{font-size:clamp(30px,9vw,40px)}
  .hero.gt7 .t-tag{font-size:14px !important;max-width:28ch !important}
  .hero.gt7 .gmenu{grid-template-columns:1fr 1fr;gap:8px}
  .hero.gt7 .gmenu .gm{min-height:84px;padding:12px 13px;border-radius:14px;gap:6px}
  .gm-ti{font-size:13.5px;letter-spacing:.1em}
  .hero.gt7 .gm small{font-size:11px}
  .hero.gt7 .gmenu .gm.on{transform:none}
}
@media (max-width:760px) and (max-height:700px){.hero.gt7 .gm small{display:none}.hero.gt7 .gmenu .gm{min-height:64px}}

/* arreglo: las fichas no heredan las columnas del menú anterior + toque épico */
.hero.gt7 .gmenu .gm{grid-template-columns:1fr;grid-template-rows:auto 1fr auto;align-content:stretch;font-family:var(--f-b);position:relative;overflow:hidden;letter-spacing:normal}
.hero.gt7 .gm-ti{align-self:end}
.hero.gt7 .gmenu .gm::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.55) 48%,transparent 62%);transform:translateX(-120%);pointer-events:none}
.hero.gt7 .gmenu .gm.on::after{animation:sweep 1.1s var(--ease) .05s}
@keyframes sweep{to{transform:translateX(120%)}}
.hero.gt7 .gmenu .gm::before{content:"";position:absolute;left:18px;right:18px;bottom:10px;height:2px;border-radius:2px;background:var(--acc);box-shadow:0 0 10px var(--acc);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.hero.gt7 .gmenu .gm.on::before{transform:scaleX(1)}
.hero.gt7 .gmenu .gm{opacity:0;animation:tileIn .7s var(--ease) both}
.hero.gt7 .gmenu .gm:nth-child(1){animation-delay:.35s}.hero.gt7 .gmenu .gm:nth-child(2){animation-delay:.45s}.hero.gt7 .gmenu .gm:nth-child(3){animation-delay:.55s}.hero.gt7 .gmenu .gm:nth-child(4){animation-delay:.65s}
@keyframes tileIn{from{opacity:0;transform:translateY(24px)}to{opacity:1}}
.hero.gt7 .gmenu .gm.on{animation:tileIn .7s var(--ease) both}
.hero.gt7 .hero-mark{animation:markIn 1s var(--ease) .1s both}
@keyframes markIn{from{opacity:0;letter-spacing:.06em;filter:blur(6px)}to{opacity:1;letter-spacing:-.03em;filter:none}}
/* botón de sonido en la barra */
.snd{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 11px;border-radius:999px;font-size:10px;font-weight:600;letter-spacing:.18em;color:#fff;background:rgba(5,6,11,.35);box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
.snd svg{font-size:14px}
.snd .off{display:none}.snd[aria-pressed="false"] .on{display:none}.snd[aria-pressed="false"] .off{display:inline}
.bar.solid .snd{color:var(--w-ink);background:rgba(255,255,255,.6);box-shadow:inset 0 0 0 1px var(--w-line)}
@media (max-width:420px){.snd span{display:none}}
@media (prefers-reduced-motion:reduce){.hero.gt7 .gmenu .gm,.hero.gt7 .hero-mark{animation:none;opacity:1}}

/* ===== Escudo 3D ===== */
.logo3d{position:absolute;z-index:4;right:clamp(16px,6vw,110px);top:calc(env(safe-area-inset-top) + 96px);width:clamp(150px,22vw,330px);height:clamp(160px,23.5vw,352px);pointer-events:none;
  filter:drop-shadow(0 30px 40px rgba(0,0,0,.55));transition:opacity .4s}
.hero.off ~ .logo3d,.logo3d.off{opacity:0}
@media (max-width:760px){.logo3d{width:96px;height:104px;right:12px;top:calc(env(safe-area-inset-top) + 74px)}}
.logo3d-ct{display:block;width:150px;height:160px;margin:0 auto 6px;filter:drop-shadow(0 24px 30px rgba(12,13,17,.35))}
.mark{display:inline-flex;align-items:center;gap:9px}
.mark-shield{width:24px;height:auto;animation:shieldSpin 6s linear infinite;transform-style:preserve-3d;filter:drop-shadow(0 2px 6px rgba(0,0,0,.4))}
@keyframes shieldSpin{to{transform:rotateY(360deg)}}
.foot-mark{display:inline-flex;align-items:center;gap:10px}
.foot-shield{width:28px;height:auto;animation:shieldSpin 7s linear infinite}
@media (prefers-reduced-motion:reduce){.mark-shield,.foot-shield{animation:none}}

/* ===== Selector ◀ ▶ estilo elegir auto en un juego ===== */
.t-bottom{display:flex;align-items:flex-end;justify-content:space-between;gap:20px}
.hero.gt7 .press{align-self:flex-end;margin-bottom:6px}
.gsel{display:flex;align-items:center;gap:12px;width:min(470px,100%)}
.gs-arr{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;color:#fff;font-size:20px;
  background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 1px rgba(255,255,255,.3);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:background .25s,transform .25s var(--ease)}
.gs-arr:hover{background:#fff;color:var(--w-ink);transform:scale(1.06)}
.gs-arr:active{transform:scale(.94)}
.gs-card{position:relative;flex:1;display:grid;gap:12px;padding:20px 22px 18px;border-radius:20px;overflow:hidden;color:var(--w-ink);background:rgba(255,255,255,.94);
  box-shadow:0 34px 70px -28px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.6);touch-action:pan-y;animation:tileIn .8s var(--ease) .3s both}
.gs-card::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.9) 50%,transparent 65%);transform:translateX(-130%);pointer-events:none}
.gs-card.to-r::after,.gs-card.to-l::after{animation:sweep .9s var(--ease)}
.gs-card.to-r .gs-txt{animation:gsInR .45s var(--ease)}
.gs-card.to-l .gs-txt{animation:gsInL .45s var(--ease)}
@keyframes gsInR{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}
@keyframes gsInL{from{opacity:0;transform:translateX(-28px)}to{opacity:1;transform:none}}
.gs-n{display:flex;align-items:baseline;gap:8px;font-family:var(--f-d);font-size:11px;letter-spacing:.2em;color:var(--w-soft)}
.gs-n b{font-weight:400;font-size:13px;color:var(--w-ink)}
.gs-ti{font-family:var(--f-b);font-weight:600;font-size:clamp(28px,2.7vw,40px);letter-spacing:.06em;line-height:1}
.gs-sub{margin-top:6px;font-size:14px;color:var(--w-soft)}
.gs-bar{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.gs-bar i{height:4px;border-radius:4px;background:rgba(12,13,17,.12);cursor:pointer;transition:background .3s}
.gs-bar i.past{background:rgba(12,13,17,.35)}
.gs-bar i.on{background:var(--acc);box-shadow:0 0 10px var(--acc)}
.gs-go{justify-self:start;display:inline-flex;align-items:center;gap:10px;padding:11px 18px;border-radius:999px;background:var(--w-ink);color:#fff;font-weight:600;font-size:13px;letter-spacing:.14em;text-transform:uppercase;transition:transform .25s var(--ease),background .25s}
.gs-go:hover{transform:translateX(3px);background:#000}
.gs-go svg{font-size:16px}
@media (max-width:760px){
  .t-bottom{flex-direction:column;align-items:stretch;gap:12px}
  .hero.gt7 .press{align-self:flex-start;margin:0}
  .gsel{width:100%;gap:8px}
  .gs-arr{width:40px;height:40px;font-size:18px}
  .gs-card{padding:16px 16px 14px;gap:10px;border-radius:18px}
  .gs-ti{font-size:26px}
  .logo3d{top:calc(env(safe-area-inset-top) + 170px);width:88px;height:96px}
}
@media (prefers-reduced-motion:reduce){.gs-card{animation:none}}

/* ===== Menú ARCADE (vertical, estilo juego de carreras): texto fantasma, barra inclinada al seleccionar ===== */
.t-bottom{display:flex;align-items:flex-end;justify-content:space-between;gap:20px}
.hero.gt7 .gmenu.arcade{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:auto;max-width:none;padding:0 0 0 6px;margin:0}
.hero.gt7 .gmenu.arcade .gm{position:relative;display:grid;grid-template-columns:auto auto 1fr;grid-template-areas:"num ti chev" "num sub chev";column-gap:14px;align-items:center;
  min-height:0;padding:7px 34px 7px 18px;border-radius:0;background:none;box-shadow:none;clip-path:none;-webkit-backdrop-filter:none;backdrop-filter:none;overflow:visible;
  transform:skewX(-10deg);transform-origin:left bottom;opacity:1;animation:none;color:rgba(255,255,255,.42);text-shadow:none;transition:color .25s,transform .35s var(--ease)}
.hero.gt7 .gmenu.arcade .gm > *{transform:skewX(10deg)}
.hero.gt7 .gmenu.arcade .gm::before,.hero.gt7 .gmenu.arcade .gm::after{content:none}
.hero.gt7 .gmenu.arcade .gm-bar{grid-area:auto;position:absolute;left:0;top:0;bottom:0;width:0;transform:none;background:linear-gradient(90deg,color-mix(in srgb,var(--acc) 92%,#fff),color-mix(in srgb,var(--acc) 35%,transparent) 70%,transparent);
  box-shadow:0 0 24px color-mix(in srgb,var(--acc) 60%,transparent);transition:width .4s var(--ease),opacity .3s;opacity:0}
.hero.gt7 .gmenu.arcade .gm-num{grid-area:num;display:block;font-family:var(--f-d);font-style:normal;font-size:11px;letter-spacing:.2em;opacity:.7;margin-right:4px;width:auto;height:auto;background:none;box-shadow:none}
.hero.gt7 .gmenu.arcade .gm-ti{grid-area:ti;font-family:var(--f-c);font-weight:900;font-size:clamp(34px,4.6vw,66px);line-height:.92;letter-spacing:.02em;
  color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.55);transition:color .25s,-webkit-text-stroke .25s}
.hero.gt7 .gmenu.arcade .gm small{grid-area:sub;display:block;margin:4px 0 0;font-family:var(--f-b);font-weight:500;font-size:12px;letter-spacing:.12em;text-transform:uppercase;opacity:0;transform:skewX(10deg) translateY(-4px);transition:opacity .25s,transform .3s var(--ease)}
.hero.gt7 .gmenu.arcade .gm-chev{grid-area:chev;justify-self:start;font-family:var(--f-c);font-weight:900;font-size:1.6em;line-height:1;color:var(--acc);opacity:0;transform:skewX(10deg) translateX(-10px);transition:opacity .25s,transform .3s var(--ease);text-shadow:0 0 12px var(--acc)}
.hero.gt7 .gmenu.arcade .gm.on{color:#fff;transform:skewX(-10deg) translateX(10px)}
.hero.gt7 .gmenu.arcade .gm.on .gm-bar{width:100%;opacity:1}
.hero.gt7 .gmenu.arcade .gm.on .gm-ti{color:#fff;-webkit-text-stroke:0;text-shadow:0 4px 20px rgba(0,0,0,.5)}
.hero.gt7 .gmenu.arcade .gm.on small{opacity:.9;transform:skewX(10deg)}
.hero.gt7 .gmenu.arcade .gm.on .gm-chev{opacity:1;transform:skewX(10deg);animation:chev 1s ease-in-out infinite}
@keyframes chev{50%{transform:skewX(10deg) translateX(5px);opacity:.5}}
.hero.gt7 .gmenu.arcade .gm.on .gm-num{opacity:1;color:#fff}
.hero.gt7 .gmenu.arcade .gm{animation:menuIn .6s var(--ease) both}
.hero.gt7 .gmenu.arcade .gm:nth-child(1){animation-delay:.3s}.hero.gt7 .gmenu.arcade .gm:nth-child(2){animation-delay:.4s}.hero.gt7 .gmenu.arcade .gm:nth-child(3){animation-delay:.5s}.hero.gt7 .gmenu.arcade .gm:nth-child(4){animation-delay:.6s}
@keyframes menuIn{from{opacity:0;transform:skewX(-10deg) translateX(-40px)}to{opacity:1}}
.hero.gt7 .gmenu.arcade .gm.on{animation:menuInOn .6s var(--ease) both}
@keyframes menuInOn{from{opacity:0;transform:skewX(-10deg) translateX(-40px)}to{opacity:1;transform:skewX(-10deg) translateX(10px)}}
.hero.gt7 .press{align-self:flex-end;margin-bottom:8px}
.logo3d{pointer-events:auto;cursor:pointer}
.logo3d:focus-visible{outline:none}
.logo3d{width:clamp(180px,26vw,400px);height:clamp(190px,27.5vw,420px);right:clamp(16px,5vw,90px);top:calc(env(safe-area-inset-top) + 72px)}
@media (max-width:760px){
  .t-bottom{flex-direction:column;align-items:stretch;gap:10px}
  .hero.gt7 .gmenu.arcade{padding-left:2px;gap:0}
  .hero.gt7 .gmenu.arcade .gm{padding:5px 26px 5px 12px;column-gap:10px}
  .hero.gt7 .gmenu.arcade .gm-ti{font-size:clamp(28px,8.6vw,36px);-webkit-text-stroke:1.2px rgba(255,255,255,.55)}
  .hero.gt7 .gmenu.arcade .gm small{font-size:10.5px}
  .hero.gt7 .press{align-self:flex-start;margin:0}
  .logo3d{width:110px;height:118px;right:10px;top:calc(env(safe-area-inset-top) + 150px)}
}
@media (max-width:760px) and (max-height:700px){.hero.gt7 .gmenu.arcade .gm small{display:none}.hero.gt7 .gmenu.arcade .gm-ti{font-size:26px}}
@media (prefers-reduced-motion:reduce){.hero.gt7 .gmenu.arcade .gm{animation:none;opacity:1}.hero.gt7 .gmenu.arcade .gm.on .gm-chev{animation:none}}

.logo3d{z-index:6}

/* menú a la izquierda, PRESS START a la derecha (como antes) */
.hero.gt7 .gmenu.arcade{order:0}
.hero.gt7 .t-bottom .press{order:1}
@media (max-width:760px){.hero.gt7 .t-bottom .press{order:0}.hero.gt7 .gmenu.arcade{order:1}}

/* ===== Fuente épica para el menú y la portada: Orbitron (futurista, de videojuego de carreras) ===== */
:root{--f-e:'Orbitron','Michroma',ui-sans-serif,sans-serif}
.hero.gt7 .hero-mark{font-family:var(--f-e);font-weight:900;font-size:clamp(28px,4.2vw,60px);letter-spacing:.06em;text-transform:uppercase;
  background:linear-gradient(180deg,#fff 30%,#c9ccd6 70%,#8d919c);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 2px 0 rgba(0,0,0,.35)) drop-shadow(0 10px 30px rgba(0,0,0,.6));animation:none}
.hero.gt7 .hero-mark span{font-weight:900;background:linear-gradient(180deg,#fff,var(--acc) 55%,color-mix(in srgb,var(--acc) 70%,#000));-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.hero.gt7 .gmenu.arcade .gm-ti{font-family:var(--f-e);font-weight:900;font-size:clamp(26px,3.3vw,48px);letter-spacing:.05em;line-height:1;-webkit-text-stroke:1.2px rgba(255,255,255,.5)}
.hero.gt7 .gmenu.arcade .gm.on .gm-ti{background:linear-gradient(180deg,#fff 35%,#d6d9e2);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;-webkit-text-stroke:0;filter:drop-shadow(0 0 14px color-mix(in srgb,var(--acc) 55%,transparent)) drop-shadow(0 4px 12px rgba(0,0,0,.6))}
.hero.gt7 .gmenu.arcade .gm-num{font-family:var(--f-e);font-weight:700;font-size:11px}
.hero.gt7 .gmenu.arcade .gm small{font-family:var(--f-e);font-weight:500;font-size:10.5px;letter-spacing:.16em}
.hero.gt7 .gmenu.arcade .gm-chev{font-family:var(--f-e)}
.hero.gt7 .press{font-family:var(--f-e);font-weight:700;letter-spacing:.3em}
.mark,.foot-mark,.gt-kick,.g-k,.cap-k,.g-lb,.ghud-t{font-family:var(--f-e);font-weight:700}
.mark{font-size:13px;letter-spacing:.18em}
.cap-k{font-size:11px;letter-spacing:.26em}
.gt h2{font-family:var(--f-e);font-weight:700;font-size:clamp(28px,4.2vw,58px);letter-spacing:.02em;line-height:1.08}
.gt.contact h2{font-size:clamp(30px,4.8vw,66px)}
.ch-t{font-family:var(--f-e);font-weight:700;font-size:clamp(20px,2.2vw,30px);letter-spacing:.02em}
.ch-n span:first-child{font-family:var(--f-e);font-weight:900}
.tile-t h3{font-family:var(--f-e);font-weight:700;font-size:clamp(18px,1.8vw,26px)}
.gt .reel-head h2{font-size:clamp(28px,4vw,54px)}
@media (max-width:760px){
  .hero.gt7 .hero-mark{font-size:clamp(22px,7vw,30px);letter-spacing:.04em}
  .hero.gt7 .gmenu.arcade .gm-ti{font-size:clamp(22px,6.8vw,28px)}
  .gt h2{font-size:clamp(24px,7vw,34px)}
}

/* ===== ESTILO ELEGIDO (6-oct): portada "calm" con fuente épica Orbitron ===== */
.hero.calm.epic .hero-mark{font-family:var(--f-e);font-weight:900;font-size:clamp(26px,3.8vw,54px);letter-spacing:.08em;text-transform:uppercase;line-height:1.1;
  background:linear-gradient(180deg,#fff 30%,#d2d5de 70%,#9a9ea9);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 2px 0 rgba(0,0,0,.3)) drop-shadow(0 10px 30px rgba(0,0,0,.6));text-shadow:none}
.hero.calm.epic .hero-mark span{background:linear-gradient(180deg,#fff,var(--acc) 55%,color-mix(in srgb,var(--acc) 70%,#000));-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.hero.calm.epic .gmenu .gm{font-family:var(--f-e);font-weight:700;font-size:clamp(18px,2vw,28px);letter-spacing:.2em;color:rgba(255,255,255,.5)}
.hero.calm.epic .gmenu .gm.on{color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.7),0 0 22px color-mix(in srgb,var(--acc) 55%,transparent)}
.hero.calm.epic .gmenu .gm i{height:2px;box-shadow:0 0 10px var(--acc)}
.hero.calm.epic .gmenu .gm.on i{width:40px}
.hero.calm.epic .press{font-family:var(--f-e);font-weight:700;font-size:12px;letter-spacing:.4em}
.hero.calm.epic .gmenu .gm{opacity:0;animation:menuIn2 .6s var(--ease) both}
.hero.calm.epic .gmenu .gm:nth-child(1){animation-delay:.3s}.hero.calm.epic .gmenu .gm:nth-child(2){animation-delay:.4s}.hero.calm.epic .gmenu .gm:nth-child(3){animation-delay:.5s}.hero.calm.epic .gmenu .gm:nth-child(4){animation-delay:.6s}
@keyframes menuIn2{from{opacity:0;transform:translateX(-24px)}to{opacity:1}}
.hero.calm.epic .gmenu .gm.on{animation:menuIn2on .6s var(--ease) both}
@keyframes menuIn2on{from{opacity:0;transform:translateX(-24px)}to{opacity:1;transform:translateX(4px)}}
.hero.calm.epic .hero-mark{animation:markIn 1s var(--ease) .1s both}
.hero.calm ~ .logo3d{top:auto;bottom:calc(env(safe-area-inset-bottom) + 70px);right:clamp(24px,6vw,120px);width:clamp(170px,24vw,360px);height:clamp(180px,25.5vw,380px)}
@media (max-width:760px){
  .hero.calm.epic .hero-mark{font-size:clamp(20px,6.4vw,26px);letter-spacing:.06em}
  .hero.calm.epic .gmenu .gm{font-size:clamp(16px,5.4vw,22px);letter-spacing:.18em}
  .hero.calm ~ .logo3d{top:calc(env(safe-area-inset-top) + 64px);bottom:auto;right:10px;width:100px;height:108px}
}
@media (prefers-reduced-motion:reduce){.hero.calm.epic .gmenu .gm,.hero.calm.epic .hero-mark{animation:none;opacity:1}}

/* ===== Logo nuevo (techo de estrellas): canvas ancho, ícono estrella en barra y pie ===== */
.mark-star{width:22px;height:22px;animation:starTwinkle 2.6s ease-in-out infinite;filter:drop-shadow(0 0 6px rgba(255,255,255,.7))}
.foot-star{width:24px;height:24px}
@keyframes starTwinkle{0%,100%{transform:scale(1) rotate(0deg);opacity:1}50%{transform:scale(.82) rotate(45deg);opacity:.75}}
.mark-shield,.foot-shield{display:none}
#logo3d{top:calc(env(safe-area-inset-top) + 80px);bottom:auto;right:clamp(20px,4vw,70px);width:clamp(340px,40vw,680px);height:calc(clamp(340px,40vw,680px) * .32);z-index:6}
.logo3d-ct{display:block;width:min(92vw,760px);height:calc(min(92vw,760px) * .32);margin:0 auto 18px}
@media (max-width:760px){
  #logo3d{top:auto;bottom:calc(env(safe-area-inset-bottom) + 66px);right:8px;width:min(64vw,270px);height:calc(min(64vw,270px) * .32)}
  .mark-star{width:20px;height:20px}
}
@media (prefers-reduced-motion:reduce){.mark-star{animation:none}}

/* ===== Marca en barra y pie: "305" con el degradado neón del logo, STARLIGHTS en cromo/tinta ===== */
.mark-n,.foot-mark span{background:linear-gradient(90deg,#ff4fd8,#4fa8ff);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;font-style:italic;font-weight:900}
.mark-n{filter:drop-shadow(0 0 6px rgba(255,79,216,.55))}
.mark-w{color:#eef0f5}
.bar.solid .mark-w{color:var(--w-ink)}

/* ===== Logo plano (imagen tal cual): portada y contacto ===== */
#logo3d{height:auto;aspect-ratio:1900/1163;object-fit:contain;cursor:pointer;filter:drop-shadow(0 10px 28px rgba(0,0,0,.55));transition:transform .6s var(--ease)}
#logo3d:hover{transform:perspective(900px) rotateY(-8deg) rotateX(4deg) scale(1.02)}
#logo3d.gira{animation:logoGira 1s var(--ease)}
@keyframes logoGira{to{transform:perspective(900px) rotateY(360deg)}}
.logo3d-ct{height:auto;aspect-ratio:1900/1163;object-fit:contain;filter:drop-shadow(0 18px 26px rgba(12,13,17,.22))}
.mark-n,.foot-mark span{background:none;-webkit-background-clip:initial;background-clip:initial;color:var(--acc);-webkit-text-fill-color:currentColor;font-style:normal;font-weight:700;filter:none}
.mark-star{display:inline-block}.foot-star{display:inline-block}

/* ===== Volumen de la música: barrita junto a SOUND (aparece al pasar el mouse / siempre en teléfono) ===== */
.snd-wrap{position:relative;display:inline-flex;align-items:center;gap:8px}
.vol{-webkit-appearance:none;appearance:none;width:0;opacity:0;height:3px;border-radius:3px;background:rgba(255,255,255,.35);outline:none;transition:width .35s var(--ease),opacity .3s;cursor:pointer}
.snd-wrap:hover .vol,.snd-wrap:focus-within .vol,.snd-wrap.open .vol{width:74px;opacity:1}
.vol::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;border-radius:50%;background:#fff;box-shadow:0 0 0 2px rgba(5,6,11,.4),0 0 10px var(--acc)}
.vol::-moz-range-thumb{width:13px;height:13px;border:0;border-radius:50%;background:#fff;box-shadow:0 0 0 2px rgba(5,6,11,.4)}
.bar.solid .vol{background:rgba(12,13,17,.25)}
.bar.solid .vol::-webkit-slider-thumb{background:var(--w-ink);box-shadow:none}
@media (max-width:760px){.vol,.snd-wrap .vol{width:52px;opacity:1}}
@media (hover:none){.vol{width:52px;opacity:1}}

/* sin título repetido en la portada (ya lo dice el logo): la frase pasa a ser el titular */
.hero.calm.epic .t-tag{font-size:clamp(20px,2.1vw,30px);font-weight:300;line-height:1.25;max-width:26ch;color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.55)}
@media (max-width:760px){.hero.calm.epic .t-tag{font-size:clamp(17px,4.8vw,21px)}}

/* ===== Logo neón plano (imagen tal cual de Higgsfield) ===== */
#logo3d{aspect-ratio:1522/664;filter:drop-shadow(0 6px 24px rgba(0,0,0,.5));height:auto}
#logo3d{width:clamp(340px,36vw,620px)}
@media (max-width:760px){#logo3d{width:min(62vw,260px)}}
/* en Contacto (fondo blanco) el neón va sobre una placa oscura, como un letrero */
.logo3d-ct{aspect-ratio:auto;width:min(88vw,560px);height:auto;padding:clamp(18px,3vw,34px) clamp(22px,4vw,46px);margin:0 auto 22px;background:radial-gradient(120% 140% at 50% 40%,#16171f,#07080b);border-radius:22px;box-shadow:0 24px 50px rgba(12,13,17,.28),inset 0 0 0 1px rgba(255,255,255,.06);filter:none;box-sizing:border-box}
/* teléfono angosto: la barrita de volumen ocupa el lugar del "305" de la barra (el logo ya está en la portada) */
@media (max-width:440px){.mark .mark-n{display:none}.vol,.snd-wrap .vol{width:46px}}

/* ===== Logo neón nítido: el "305" es la imagen (ampliada ×3) y STARLIGHTS es TEXTO real (Montserrat Light, siempre nítido) ===== */
.logo-neon{display:flex;flex-direction:column;align-items:center;gap:.2em;container-type:inline-size}
.logo-neon img{display:block;width:100%;height:auto}
.logo-neon span{font-family:'Montserrat',sans-serif;font-weight:300;font-size:10.6cqw;letter-spacing:.24em;padding-left:.24em;line-height:1;
  background:linear-gradient(180deg,#ffffff 20%,#c9ccd4 60%,#9da1ab);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 6px rgba(255,255,255,.18));white-space:nowrap}
#logo3d.logo-neon{aspect-ratio:auto;height:auto;width:clamp(320px,33vw,560px);padding-left:7%}
@media (max-width:760px){#logo3d.logo-neon{width:min(60vw,250px)}}
.logo3d-ct.logo-neon{padding:clamp(20px,3vw,34px) clamp(26px,4.5vw,52px) clamp(22px,3.2vw,36px)}

/* 9-oct-2026: efecto TV "hormiga" QUITADO de toda la web a pedido de Sebastian (respaldo styles.css.bak-antes-fluidez-09oct). */

/* ===== ESTILO C (7-oct-2026): Inter Tight + palabra en cursiva Instrument Serif. Reemplaza Orbitron/Michroma/Big Shoulders/Manrope.
   El logo grande (imagen 305 + STARLIGHTS en Montserrat Light) NO cambia. ===== */
:root{
  --f-c:'Inter Tight',ui-sans-serif,system-ui,-apple-system,sans-serif;
  --f-d:'Inter Tight',ui-sans-serif,system-ui,-apple-system,sans-serif;
  --f-e:'Inter Tight',ui-sans-serif,system-ui,-apple-system,sans-serif;
  --f-b:'Inter Tight',ui-sans-serif,system-ui,-apple-system,sans-serif;
  --f-s:'Instrument Serif',Georgia,serif;
}
body{font-family:var(--f-b)}
.gt h2{font-weight:600;letter-spacing:-.035em;line-height:1.02}
.ch-t,.tile-t h3{font-weight:600;letter-spacing:-.03em}
.gt h2 em.it,.ch-t em.it,.tile-t h3 em.it{font-family:var(--f-s);font-style:italic;font-weight:400;letter-spacing:-.005em}
.ch-n span:first-child{font-weight:500;letter-spacing:-.02em}
.hero.gt7 .hero-mark,.hero.calm.epic .hero-mark{font-weight:600;letter-spacing:.12em}
.hero.gt7 .gmenu.arcade .gm-ti{font-weight:600;letter-spacing:.1em}
.hero.calm.epic .gmenu .gm,.gm{font-weight:500;letter-spacing:.16em}
.hero.gt7 .press,.hero.calm.epic .press,.press{font-weight:500}
.mark,.foot-mark,.gt-kick,.g-k,.cap-k,.g-lb,.ghud-t{font-weight:600}
.cap-t{font-weight:500;letter-spacing:-.02em}

/* ===================================================================================================
   8-oct-2026 · ESTILO VIDEOJUEGO DE AUTOS (tipo Gran Turismo) + CRISTAL LÍQUIDO (receta de la demo de M3)
   Menú en placas de cristal con número y flecha · barra de abajo en panel de cristal · marca y botones en cápsulas
   de cristal · fotos con canto de cristal brillante · video con más brillo y contraste
   =================================================================================================== */
:root{
  --lq-hi:inset 0 0 0 1.2px rgba(255,255,255,.34),inset 0 2px 2px rgba(255,255,255,.55),inset 0 -8px 12px -8px rgba(255,255,255,.3),inset 0 0 18px rgba(255,255,255,.06);
  --lq-bg:linear-gradient(180deg,rgba(255,255,255,.2) 0%,rgba(255,255,255,.07) 48%,rgba(255,255,255,.12) 100%);
  --lq-blur:blur(14px) saturate(170%);
}
/* --- video más claro y con más contraste --- */
/* brillo y contraste: Sebastian prefirió dejarlos como estaban (8-oct) */

/* --- CÁPSULAS DE CRISTAL: marca, sonido, idioma, cotizar, color, press start --- */
.bar .mark,.snd,.lang,.bar .js-quote,.ghud-t,.hero.calm.epic .press{border:0!important;border-radius:999px!important;
  background:var(--lq-bg)!important;box-shadow:var(--lq-hi),0 10px 24px -12px rgba(0,0,0,.55)!important;
  -webkit-backdrop-filter:var(--lq-blur);backdrop-filter:var(--lq-blur);color:#fff}
.bar .mark{padding:9px 16px 9px 12px;display:inline-flex;align-items:center;gap:8px}
.lang{padding:3px;gap:2px}
.lang button{border-radius:999px!important;border:0;background:transparent;color:rgba(255,255,255,.62);padding:7px 12px}
.lang button[aria-pressed="true"]{color:#05060b;background:linear-gradient(180deg,#fff,#e7ecf5)!important;box-shadow:inset 0 1.5px 1px #fff,inset 0 -5px 8px -5px rgba(0,0,0,.18)}
.bar .js-quote{color:#fff!important;padding:11px 20px!important;
  background:linear-gradient(180deg,rgba(255,170,236,.75) 0%,color-mix(in srgb,var(--acc) 82%,transparent) 50%,color-mix(in srgb,var(--acc) 92%,#000) 100%)!important;
  box-shadow:inset 0 0 0 1.4px rgba(255,255,255,.6),inset 0 3px 3px rgba(255,255,255,.65),inset 0 -8px 10px -5px rgba(255,255,255,.35),0 0 0 1px color-mix(in srgb,var(--acc) 40%,transparent),0 12px 26px -10px var(--acc)!important}
.bar .js-quote:hover{transform:translateY(-1px)}
/* sobre las secciones claras la barra pasa a cristal claro con texto oscuro */
.bar.solid .mark,.bar.solid .snd,.bar.solid .lang{background:linear-gradient(180deg,rgba(255,255,255,.82),rgba(240,242,246,.6))!important;color:#0c0d11;box-shadow:inset 0 0 0 1.2px rgba(255,255,255,.95),inset 0 2px 2px #fff,inset 0 -7px 9px -6px rgba(12,13,17,.14),0 0 0 1px rgba(12,13,17,.08),0 10px 20px -12px rgba(12,13,17,.4)!important}

/* --- MENÚ tipo videojuego: placas de cristal con número, título y flecha --- */
.hero.calm.epic .gmenu{counter-reset:gm;display:grid;gap:10px;width:min(430px,100%)}
.hero.calm.epic .gmenu .gm{counter-increment:gm;position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;width:100%;
  padding:14px 18px 14px 16px;border-radius:18px;text-align:left;letter-spacing:.18em;color:rgba(255,255,255,.72);
  background:linear-gradient(100deg,rgba(255,255,255,.14),rgba(255,255,255,.04) 70%);box-shadow:var(--lq-hi),0 14px 28px -18px rgba(0,0,0,.7);
  -webkit-backdrop-filter:var(--lq-blur);backdrop-filter:var(--lq-blur);transition:transform .25s var(--ease),background .25s,color .25s,box-shadow .25s}
.hero.calm.epic .gmenu .gm::before{content:counter(gm,decimal-leading-zero);font-size:.48em;letter-spacing:.12em;font-weight:600;color:var(--acc);opacity:.9}
.hero.calm.epic .gmenu .gm::after{content:"";width:12px;height:12px;border-right:2px solid currentColor;border-top:2px solid currentColor;transform:rotate(45deg);opacity:.35;margin-right:4px;transition:opacity .25s,transform .25s}
.hero.calm.epic .gmenu .gm i{position:absolute;left:0;top:14%;bottom:14%;width:3px!important;height:auto!important;border-radius:3px;background:var(--acc);opacity:0;transition:opacity .25s}
.hero.calm.epic .gmenu .gm.on,.hero.calm.epic .gmenu .gm:hover{color:#05060b;text-shadow:none;transform:translateX(6px);
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(232,238,248,.82));
  box-shadow:inset 0 0 0 1.4px #fff,inset 0 3px 3px #fff,inset 0 -9px 12px -7px rgba(12,13,17,.16),0 0 0 1px color-mix(in srgb,var(--acc) 45%,transparent),0 0 30px -6px var(--acc),0 18px 30px -16px rgba(0,0,0,.6)}
.hero.calm.epic .gmenu .gm.on::before,.hero.calm.epic .gmenu .gm:hover::before{color:color-mix(in srgb,var(--acc) 85%,#000)}
.hero.calm.epic .gmenu .gm.on::after,.hero.calm.epic .gmenu .gm:hover::after{opacity:1;transform:rotate(45deg) translate(2px,-2px)}
.hero.calm.epic .gmenu .gm.on i,.hero.calm.epic .gmenu .gm:hover i{opacity:1}
.hero.calm.epic .press{padding:12px 22px;margin-top:22px;animation:pressGlow 2.2s ease-in-out infinite}
@keyframes pressGlow{0%,100%{box-shadow:var(--lq-hi),0 0 0 0 color-mix(in srgb,var(--acc) 0%,transparent)}50%{box-shadow:var(--lq-hi),0 0 24px -2px color-mix(in srgb,var(--acc) 70%,transparent)}}
@media (max-width:760px){.hero.calm.epic .gmenu{gap:8px;width:min(330px,100%)}.hero.calm.epic .gmenu .gm{padding:11px 14px;border-radius:15px}}

/* --- BARRA DE ABAJO (texto de cada escena): panel de cristal con etiqueta tipo HUD --- */
.cap{max-width:min(640px,calc(100vw - 2 * var(--pad) - 120px));padding:18px 22px 20px;border-radius:22px;
  background:linear-gradient(120deg,rgba(255,255,255,.16),rgba(255,255,255,.05) 60%,rgba(255,255,255,.1));
  box-shadow:var(--lq-hi),0 20px 40px -22px rgba(0,0,0,.8);-webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%)}
.cap-k{display:inline-flex;align-items:center;gap:8px;padding:5px 11px;border-radius:999px;margin-bottom:10px;color:#fff;
  background:color-mix(in srgb,var(--acc) 30%,rgba(255,255,255,.08));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--acc) 65%,transparent),0 0 16px -4px var(--acc)}
.cap-k::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--acc);box-shadow:0 0 8px var(--acc)}
.cap-t{text-shadow:0 2px 16px rgba(0,0,0,.45)}
.tc{height:4px;border-radius:4px;background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.tc i{border-radius:4px;background:linear-gradient(90deg,color-mix(in srgb,var(--acc) 60%,#fff),var(--acc));box-shadow:0 0 12px var(--acc)}
.ghud-t{padding:11px 16px!important;font-size:10.5px}
.ghud-p{border-radius:20px;background:linear-gradient(160deg,rgba(255,255,255,.16),rgba(255,255,255,.05))!important;box-shadow:var(--lq-hi),0 20px 40px -20px rgba(0,0,0,.8)!important;-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%)}
@media (max-width:760px){.cap{max-width:calc(100vw - 2 * var(--pad));padding:14px 16px 16px;border-radius:18px}}

/* --- FOTOS con canto de cristal líquido (receta de M3): esquinas redondas, filo brillante y reflejo --- */
.ch-ph,.g-view,.tile,.fr{border-radius:28px!important;position:relative;overflow:hidden;isolation:isolate;
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 24px 46px -24px rgba(10,12,20,.55),0 6px 14px -8px rgba(10,12,20,.3)}
.ch-ph::after,.g-view::after,.tile::after,.fr::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:5;
  box-shadow:inset 6px 6px 14px -6px rgba(255,255,255,.62),inset -6px -6px 14px -6px rgba(255,255,255,.45),inset 0 0 22px 2px rgba(255,255,255,.12);
  background:linear-gradient(155deg,rgba(255,255,255,.26) 0%,rgba(255,255,255,.06) 16%,rgba(255,255,255,0) 32%),radial-gradient(120% 60% at 85% 108%,rgba(255,255,255,.16),rgba(255,255,255,0) 60%)}
.ch-ph::before,.g-view::before,.tile::before,.fr::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:2.5px;z-index:6;pointer-events:none;
  background:conic-gradient(from 300deg,#fff 0deg,rgba(255,255,255,.95) 28deg,rgba(255,255,255,.28) 70deg,rgba(255,255,255,.12) 120deg,rgba(255,255,255,.75) 168deg,#fff 190deg,rgba(255,255,255,.8) 214deg,rgba(255,255,255,.2) 262deg,rgba(255,255,255,.14) 318deg,#fff 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  filter:drop-shadow(0 0 3px rgba(255,255,255,.7))}
.tile-t,.tile .gt-tag{z-index:7}
@media (max-width:640px){.ch-ph,.g-view,.tile,.fr{border-radius:22px!important}}
/* botones de las secciones (cotizar grande, opciones del garaje) también en cristal */
.btn-xl,.g-bt button{border-radius:999px!important}
.btn-xl{box-shadow:inset 0 0 0 1.4px rgba(255,255,255,.55),inset 0 3px 3px rgba(255,255,255,.4),inset 0 -8px 10px -5px rgba(255,255,255,.25),0 14px 28px -12px rgba(0,0,0,.5)!important}

.bar.solid .lang button[aria-pressed="true"]{color:#fff;background:linear-gradient(180deg,#2a2c34,#0c0d11)!important;box-shadow:inset 0 1.5px 1px rgba(255,255,255,.35),inset 0 -5px 8px -5px rgba(255,255,255,.2)!important}
.bar.solid .lang button{color:var(--w-soft)}
.bar.solid .btn.js-quote{border-radius:999px!important}
/* tarjetas de "dónde trabajamos": el brillo de cristal ENCIMA del degradado oscuro que deja leer el texto */
.tile::after{background:linear-gradient(155deg,rgba(255,255,255,.24) 0%,rgba(255,255,255,.05) 16%,rgba(255,255,255,0) 32%),linear-gradient(to top,rgba(5,6,11,.82),rgba(5,6,11,.1) 55%,transparent)!important}
/* teléfono: la marca de arriba no muestra texto → sin cápsula vacía */
@media (max-width:760px){.bar .mark{background:none!important;box-shadow:none!important;-webkit-backdrop-filter:none;backdrop-filter:none;padding:4px}}
/* garaje: el cristal va solo alrededor de la foto; el rótulo queda afuera, con aire */
.garage-gt .g-view canvas{border-radius:0!important;box-shadow:none!important}
.g-cap{padding-left:6px}
.g-pic{min-width:0}

/* 8-oct: CANTO DE VIDRIO más visible SIN ensanchar el marco (pedido de Sebastian, referencia: filo blanco fino que sigue la curva).
   filo brillante de 1.5 px + banda del grosor del vidrio (3-4 px, apenas clara) + reflejo en la esquina de arriba-izquierda y abajo-derecha
   + sombra fina de refracción del lado contrario */
.ch-ph::before,.g-view::before,.tile::before,.fr::before{padding:1.6px!important;
  background:conic-gradient(from 290deg,#fff 0deg,#fff 22deg,rgba(255,255,255,.55) 55deg,rgba(255,255,255,.22) 100deg,rgba(255,255,255,.5) 150deg,#fff 182deg,#fff 205deg,rgba(255,255,255,.5) 240deg,rgba(255,255,255,.2) 285deg,#fff 360deg)!important;
  filter:drop-shadow(0 0 1.5px rgba(255,255,255,.95)) drop-shadow(0 0 5px rgba(255,255,255,.45))!important}
.ch-ph::after,.g-view::after,.tile::after,.fr::after{
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35),
    inset 0 0 0 4px rgba(255,255,255,.1),
    inset 3px 3px 2px -1px rgba(255,255,255,.75),
    inset -3px -3px 2px -1px rgba(255,255,255,.55),
    inset 9px 9px 14px -10px rgba(255,255,255,.55),
    inset -10px -10px 16px -12px rgba(0,0,0,.35)!important}

/* 8-oct: WIDGET DE COLOR — botones redondos de cristal con el color de la luz */
.g-sw{display:flex;flex-wrap:wrap;gap:10px;margin:4px 0 2px}
.g-sw button{width:30px;height:30px;border-radius:50%;border:0;position:relative;cursor:pointer;background:var(--c);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.75),inset 0 3px 4px rgba(255,255,255,.55),inset 0 -5px 7px -3px rgba(0,0,0,.35),0 0 14px -2px var(--c);transition:transform .2s var(--ease),box-shadow .2s}
.g-sw button:hover{transform:scale(1.1)}
.g-sw button.on{transform:scale(1.12);box-shadow:inset 0 0 0 1.5px #fff,inset 0 3px 4px rgba(255,255,255,.6),0 0 0 2.5px rgba(255,255,255,.95),0 0 0 4.5px var(--c),0 0 22px var(--c)}
.garage-gt .g-sw button{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.8),inset 0 3px 4px rgba(255,255,255,.55),inset 0 -5px 7px -3px rgba(0,0,0,.3),0 0 0 1px rgba(12,13,17,.12),0 4px 10px -4px var(--c)}
.garage-gt .g-sw button.on{box-shadow:inset 0 0 0 1.5px #fff,0 0 0 2.5px #fff,0 0 0 4.5px var(--c),0 6px 16px -4px var(--c)}
.g-bt button.js-auto.on{background:conic-gradient(from 0deg,#ff3b3b,#ffe14a,#3dff6e,#3fd6ff,#4a5bff,#b24aff,#ff4fd8,#ff3b3b)!important;color:#05060b!important;text-shadow:0 0 6px rgba(255,255,255,.9)}

/* 8-oct: GALERÍA que se pasa de lado (no secuestra el scroll de la página) */
.reel,.gt.reel{height:auto!important;padding:clamp(70px,10vh,120px) 0}
.reel-stage{position:static!important;height:auto!important;overflow:visible!important;gap:26px}
.reel-box{position:relative}
.reel-track{transform:none!important;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding-inline:var(--pad);
  overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-block:18px 30px;scroll-behavior:smooth}
.reel-track::-webkit-scrollbar{display:none}
.reel-track .fr{scroll-snap-align:start}
.reel-btn{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:54px;height:54px;border-radius:50%;border:0;cursor:pointer;display:grid;place-items:center;color:#0c0d11;
  background:linear-gradient(180deg,rgba(255,255,255,.88),rgba(236,240,247,.62));box-shadow:inset 0 0 0 1.4px #fff,inset 0 3px 3px #fff,inset 0 -8px 10px -6px rgba(12,13,17,.18),0 0 0 1px rgba(12,13,17,.08),0 12px 26px -12px rgba(12,13,17,.55);
  -webkit-backdrop-filter:blur(14px) saturate(170%);backdrop-filter:blur(14px) saturate(170%);transition:opacity .25s,transform .2s var(--ease)}
.reel-btn svg{width:22px;height:22px}
.reel-btn.prev{left:calc(var(--pad) - 8px)}.reel-btn.next{right:calc(var(--pad) - 8px)}
.reel-btn:hover{transform:translateY(-50%) scale(1.06)}
.reel-btn:disabled{opacity:0;pointer-events:none}
.reel-dots{display:flex;justify-content:center;gap:8px;margin-top:-6px}
.reel-dots button{width:8px;height:8px;border-radius:99px;border:0;padding:0;cursor:pointer;background:rgba(12,13,17,.18);transition:width .25s var(--ease),background .25s}
.reel-dots button.on{width:26px;background:var(--acc);box-shadow:0 0 10px var(--acc)}
@media (max-width:760px){.reel-btn{width:44px;height:44px}.reel-btn svg{width:18px;height:18px}}

/* 8-oct: VISOR de fotos a pantalla completa (tocar una foto de la galería) */
.reel-track .fr{cursor:zoom-in}
.vz{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:calc(env(safe-area-inset-top) + 64px) clamp(14px,6vw,96px) calc(env(safe-area-inset-bottom) + 56px);
  background:rgba(4,5,10,.86);-webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);opacity:0;transition:opacity .25s ease}
.vz.on{opacity:1}
.vz[hidden]{display:none}
.vz-fig{margin:0;display:grid;gap:12px;justify-items:center;max-width:100%;max-height:100%;transform:scale(.97);transition:transform .3s var(--ease)}
.vz.on .vz-fig{transform:none}
.vz-fig img{display:block;max-width:100%;max-height:calc(100svh - 190px);width:auto;height:auto;object-fit:contain;border-radius:22px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.4),0 30px 80px -30px rgba(0,0,0,.9)}
.vz-fig figcaption{display:flex;gap:14px;align-items:center;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.82)}
.vz-n{color:rgba(255,255,255,.5)}
.vz-x{position:absolute;top:calc(env(safe-area-inset-top) + 14px);right:14px;width:48px;height:48px;border-radius:50%;border:0;display:grid;place-items:center;cursor:pointer;color:#fff;
  background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,.08));box-shadow:inset 0 0 0 1.2px rgba(255,255,255,.4),inset 0 2px 2px rgba(255,255,255,.4)}
.vz-x svg{width:20px;height:20px}
.vz .reel-btn{position:absolute}
.vz .vz-prev{left:clamp(8px,2vw,28px)}.vz .vz-next{right:clamp(8px,2vw,28px)}
html.vz-open,html.vz-open body{overflow:hidden}
@media (max-width:760px){.vz .reel-btn{top:auto;bottom:calc(env(safe-area-inset-bottom) + 10px);transform:none}.vz .reel-btn:hover{transform:none}.vz-fig img{max-height:calc(100svh - 230px)}}
.vz-back{position:absolute;top:calc(env(safe-area-inset-top) + 14px);left:14px;height:48px;padding:0 18px 0 12px;border-radius:999px;border:0;display:inline-flex;align-items:center;gap:6px;cursor:pointer;color:#fff;
  font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,.08));box-shadow:inset 0 0 0 1.2px rgba(255,255,255,.4),inset 0 2px 2px rgba(255,255,255,.4);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.vz-back svg{width:20px;height:20px}
.gh-back{justify-self:start;display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 14px 0 9px;border-radius:999px;border:0;cursor:pointer;color:#fff;
  font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,.08));box-shadow:inset 0 0 0 1.2px rgba(255,255,255,.38),inset 0 2px 2px rgba(255,255,255,.35)}
.gh-back svg{width:16px;height:16px}

/* ===== 10-oct-2026: apartados de servicios con carrusel de fotos reales, visor con zoom, videos, nosotros, pasos y preguntas ===== */
/* carrusel dentro de la foto del capítulo: 2 fotos verticales a la vez (1 en teléfonos muy angostos), pasa de lado */
.ch-ph.cx{aspect-ratio:5/4;background:#0c0d11}
.cx-track{position:absolute;inset:0;display:flex;gap:6px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.cx-track::-webkit-scrollbar{display:none}
.cx-s{flex:0 0 calc(50% - 3px);height:100%;margin:0;position:relative;scroll-snap-align:start;overflow:hidden}
.cx-o{display:block;width:100%;height:100%;padding:0;border:0;cursor:zoom-in;background:#15161c}
.cx-o img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.ch:hover .ch-ph.cx img{transform:none}
.cx-o:hover img{transform:scale(1.035)}
.cx-s figcaption{position:absolute;left:12px;bottom:12px;z-index:2;max-width:calc(100% - 24px);padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.92);color:var(--w-ink);
  font-family:var(--f-d);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}
.cx-b{position:absolute;top:50%;z-index:8;width:44px;height:44px;margin-top:-22px;border-radius:50%;border:0;display:grid;place-items:center;cursor:pointer;color:#0c0d11;
  background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.78));box-shadow:0 8px 24px -8px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.7);transition:opacity .25s,transform .25s var(--ease)}
.cx-b svg{width:18px;height:18px}
.cx-b.prev{left:12px}.cx-b.next{right:12px}
.cx-b:hover{transform:scale(1.06)}
.cx.static .cx-b{opacity:0;pointer-events:none}
@media (max-width:760px){.cx-b{width:40px;height:40px;margin-top:-20px}.cx-b.prev{left:8px}.cx-b.next{right:8px}}
.cx-dots{position:absolute;left:0;right:0;top:14px;z-index:8;display:flex;justify-content:center;gap:6px;pointer-events:none}
.cx-dots button{pointer-events:auto;width:7px;height:7px;border-radius:99px;border:0;padding:0;cursor:pointer;background:rgba(255,255,255,.5);box-shadow:0 0 0 1px rgba(0,0,0,.18);transition:width .25s var(--ease),background .25s}
.cx-dots button.on{width:20px;background:#fff}
.cx-dots button[hidden]{display:none}
.cx-soon{display:grid;place-content:center;justify-items:center;gap:10px;padding:24px;text-align:center;color:#fff;
  background:radial-gradient(70% 70% at 50% 40%,color-mix(in srgb,var(--acc) 26%,transparent),transparent 72%),#0c0d11}
.cx-soon .sv-i{font-size:54px;color:#fff;margin:0 0 6px;filter:drop-shadow(0 0 14px var(--acc))}
.cx-soon-t{font-family:var(--f-d);font-size:13px;letter-spacing:.3em;text-transform:uppercase}
.cx-soon-s{max-width:30ch;color:rgba(255,255,255,.72);font-size:15px;line-height:1.5}
@media (max-width:860px){.ch-ph.cx{aspect-ratio:5/4}}
@media (max-width:420px){.ch-ph.cx{aspect-ratio:4/5}.cx-s{flex-basis:100%}}

/* visor con zoom */
.vx .vx-st{position:relative;touch-action:none;display:grid;place-items:center;max-width:100%}
.vx .vx-img{display:block;max-width:100%;max-height:calc(100svh - 190px);width:auto;height:auto;border-radius:22px;transform-origin:50% 50%;will-change:transform;cursor:zoom-in;user-select:none;-webkit-user-select:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.4),0 30px 80px -30px rgba(0,0,0,.9)}
.vx.zoomed .vx-img{cursor:grab;border-radius:0}
.vx{overflow:hidden}
.vx.zoomed figcaption,.vx.zoomed .reel-btn{opacity:0;pointer-events:none}
.vx.solo .reel-btn{display:none}
.vx-hint{color:rgba(255,255,255,.45);letter-spacing:.08em;text-transform:none;font-size:11.5px}
@media (hover:hover){.vx-hint{display:none}}
@media (max-width:760px){.vx .vx-img{max-height:calc(100svh - 230px)}.vz-fig figcaption{flex-wrap:wrap;justify-content:center;row-gap:4px;text-align:center}}

/* videos */
.vd{display:grid;grid-template-columns:minmax(0,1fr) 150px;gap:14px;align-items:start}
.vd-stage{position:relative;aspect-ratio:16/9;border-radius:28px;overflow:hidden;background:#0c0d11;box-shadow:0 40px 80px -40px rgba(12,13,17,.45)}
.vd-v{width:100%;height:100%;object-fit:cover;background:#0c0d11}
.vd-cap{position:absolute;left:18px;bottom:22px;display:grid;gap:2px;padding:10px 14px;border-radius:16px;color:#fff;background:rgba(5,6,11,.5);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.vd-cap b{font-family:var(--f-d);font-weight:400;font-size:11px;letter-spacing:.2em;text-transform:uppercase}
.vd-cap span{font-size:14px;color:rgba(255,255,255,.82)}
.vd-bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.18)}
.vd-bar i{display:block;height:100%;width:0;background:var(--acc);box-shadow:0 0 10px var(--acc)}
.vd-list{display:grid;gap:8px}
.vd-t{position:relative;display:block;width:100%;aspect-ratio:16/9;border-radius:16px;overflow:hidden;border:0;padding:0;cursor:pointer;background:#0c0d11;opacity:.55;transition:opacity .25s,box-shadow .25s}
.vd-t img{width:100%;height:100%;object-fit:cover}
.vd-t span{position:absolute;left:8px;bottom:7px;font-family:var(--f-d);font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.9)}
.vd-t:hover{opacity:.85}
.vd-t.on{opacity:1;box-shadow:0 0 0 2px var(--w-bg),0 0 0 4px var(--acc)}
.vd.vert{grid-template-columns:1fr}
.vd.vert .vd-stage{aspect-ratio:9/16;max-height:78svh;width:auto;justify-self:center}
.vd.vert .vd-list{grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.vd.vert .vd-t{aspect-ratio:1/1;border-radius:12px}
.vd.vert .vd-t span{display:none}
@media (max-width:980px){.vd{grid-template-columns:1fr}.vd-list{grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}.vd-t span{display:none}}

/* nosotros */
.ab-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(30px,6vw,90px);align-items:start}
.ab-txt{display:grid;gap:18px;font-size:clamp(16px,1.3vw,18px);line-height:1.65;color:var(--w-soft)}
.ab-why{list-style:none;display:grid;border-top:1px solid var(--w-line);margin-top:8px}
.ab-why li{display:grid;gap:3px;padding:14px 0;border-bottom:1px solid var(--w-line)}
.ab-why b{color:var(--w-ink);font-weight:600;font-size:16px}
.ab-why span{font-size:15px}
.ab-work{display:grid;gap:16px;padding:clamp(22px,3vw,34px);border-radius:28px;background:#0c0d11;color:#fff;box-shadow:0 40px 80px -40px rgba(12,13,17,.5)}
.ab-k{font-family:var(--f-d);font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.ab-star{display:grid;gap:8px;padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,.14)}
.ab-star h3{font-family:var(--f-b);font-weight:400;font-size:clamp(24px,2.4vw,32px);letter-spacing:-.02em}
.ab-star p:not(.ab-k){color:rgba(255,255,255,.78);font-size:15px;line-height:1.55}
.ab-nums{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,.14)}
.ab-nums div{display:grid;gap:4px}
.ab-nums b{font-family:var(--f-b);font-weight:300;font-size:clamp(38px,4vw,54px);line-height:1;color:#fff;text-shadow:0 0 22px color-mix(in srgb,var(--acc) 50%,transparent)}
.ab-nums span{font-size:13.5px;color:rgba(255,255,255,.75);line-height:1.45}
.ab-cars{list-style:none;display:flex;flex-wrap:wrap;gap:6px}
.ab-cars li{padding:6px 11px;border-radius:999px;border:1px solid rgba(255,255,255,.2);font-size:12.5px;color:rgba(255,255,255,.88)}
.ab-art{font-size:15px;line-height:1.6;color:#fff}
@media (max-width:860px){.ab-grid{grid-template-columns:1fr}}

/* cómo trabajamos */
.steps{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.steps li{display:grid;align-content:start;gap:8px;padding:22px 20px;border-radius:22px;background:var(--w-bg2);box-shadow:0 20px 50px -34px rgba(12,13,17,.35)}
.st-n{font-family:var(--f-d);font-size:12px;letter-spacing:.18em;color:var(--w-acc)}
.steps b{font-weight:600;font-size:17px;color:var(--w-ink)}
.steps p{font-size:14.5px;line-height:1.55;color:var(--w-soft)}
.how-notes{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px}
.how-notes p{padding:18px 20px;border-radius:18px;border:1px solid var(--w-line);font-size:15px;line-height:1.55;color:var(--w-soft)}
.how-notes b{color:var(--w-ink);font-weight:600}
@media (max-width:1060px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.steps,.how-notes{grid-template-columns:1fr}}

/* dónde trabajamos: zonas, horario, pagos */
.where{display:grid;grid-template-columns:2fr 1fr 1fr;gap:12px;margin-top:18px}
.where div{padding:18px 20px;border-radius:18px;background:var(--w-bg2);box-shadow:0 20px 50px -34px rgba(12,13,17,.3)}
.where dt{font-family:var(--f-d);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--w-soft);margin-bottom:6px}
.where dd{font-size:15px;line-height:1.55;color:var(--w-ink)}
@media (max-width:860px){.where{grid-template-columns:1fr}}

/* preguntas */
.faq{display:grid;border-top:1px solid var(--w-line);max-width:900px}
.fq{border-bottom:1px solid var(--w-line)}
.fq summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:20px 2px;cursor:pointer;font-size:clamp(16px,1.4vw,19px);font-weight:500;color:var(--w-ink)}
.fq summary::-webkit-details-marker{display:none}
.fq summary svg{font-size:20px;color:var(--w-acc);transition:transform .3s var(--ease)}
.fq[open] summary svg{transform:rotate(45deg)}
.fq p{padding:0 2px 22px;max-width:70ch;font-size:15.5px;line-height:1.65;color:var(--w-soft)}
/* 10-oct-2026 (prueba completa): con la foto ampliada, la X y "Volver" quedaban DEBAJO de la imagen y no se podían tocar */
.vx .vz-fig{position:relative;z-index:1}
.vx .vz-x,.vx .vz-back,.vx .reel-btn{z-index:5}

/* --- 11-oct-2026 (Sebastian): los recuadros de texto de la película = VIDRIO CLARO, transparente pero que se note que es vidrio:
   casi sin esmerilado (se ve el auto detrás), canto brillante, reflejo diagonal y sombra de texto para que se lea --- */
.cap{background:linear-gradient(135deg,rgba(255,255,255,.10),rgba(255,255,255,.025) 42%,rgba(255,255,255,.015) 70%,rgba(255,255,255,.07));
  -webkit-backdrop-filter:blur(2.5px) saturate(150%) brightness(.9);backdrop-filter:blur(2.5px) saturate(150%) brightness(.9);
  box-shadow:inset 0 0 0 1.2px rgba(255,255,255,.42),inset 0 1.5px 0 rgba(255,255,255,.7),inset 0 -1px 0 rgba(255,255,255,.18),
    inset 0 -14px 22px -16px rgba(255,255,255,.28),0 22px 40px -26px rgba(0,0,0,.75);overflow:hidden}
.cap::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(112deg,rgba(255,255,255,.26) 0%,rgba(255,255,255,.08) 16%,rgba(255,255,255,0) 30%,rgba(255,255,255,0) 64%,rgba(255,255,255,.07) 80%,rgba(255,255,255,0) 92%)}
.cap::after{content:"";position:absolute;left:8%;right:8%;top:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.95),transparent)}
.cap>*{position:relative}
.cap-t{text-shadow:0 1px 2px rgba(0,0,0,.55),0 2px 18px rgba(0,0,0,.6)}

/* --- 11-oct-2026 (Sebastian): progreso de la película = RIEL VERTICAL a la derecha (estilo juego de carreras):
   línea fina, una marca por escena que se enciende al pasar, punto de luz que baja con el scroll y la escena actual --- */
.tc{left:auto!important;right:calc(var(--pad) * .55 + 6px)!important;top:calc(env(safe-area-inset-top) + 118px)!important;
  bottom:calc(env(safe-area-inset-bottom) + 112px)!important;width:2px!important;height:auto!important;border-radius:2px;
  background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.22) 6%,rgba(255,255,255,.22) 94%,rgba(255,255,255,0))!important;
  box-shadow:none!important;overflow:visible}
.tc i{left:0!important;right:0!important;top:0!important;bottom:auto!important;width:auto!important;height:calc(var(--g,0) * 100%);
  border-radius:2px;background:linear-gradient(180deg,color-mix(in srgb,var(--acc) 30%,transparent),var(--acc))!important;box-shadow:0 0 10px var(--acc)!important}
.tc i::after{content:"";position:absolute;left:50%;bottom:-6px;width:12px;height:12px;border-radius:50%;transform:translateX(-50%);
  background:radial-gradient(circle,#fff 0 35%,color-mix(in srgb,var(--acc) 85%,#fff) 60%,var(--acc));
  box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 35%,transparent),0 0 18px 2px var(--acc)}
.tc .tk{position:absolute;left:50%;width:10px;height:2px;border-radius:2px;transform:translate(-50%,-50%);background:rgba(255,255,255,.45);transition:background .3s,box-shadow .3s,width .3s}
.tc .tk.past{width:14px;background:var(--acc);box-shadow:0 0 8px var(--acc)}
.tc .tn{position:absolute;right:16px;top:calc(var(--g,0) * 100%);transform:translateY(-50%);white-space:nowrap;
  font-family:var(--f-e),system-ui,sans-serif;font-weight:600;font-size:10.5px;letter-spacing:.18em;color:#fff;padding:5px 9px;border-radius:999px;
  background:linear-gradient(135deg,rgba(255,255,255,.16),rgba(255,255,255,.04));box-shadow:inset 0 0 0 1px rgba(255,255,255,.35),inset 0 1px 0 rgba(255,255,255,.6),0 6px 16px -8px rgba(0,0,0,.6);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);text-shadow:0 1px 6px rgba(0,0,0,.5)}
@media (max-width:760px){
  .tc{right:10px!important;top:calc(env(safe-area-inset-top) + 128px)!important;bottom:calc(env(safe-area-inset-bottom) + 200px)!important}
  .tc .tn{font-size:9.5px;padding:4px 7px;right:12px}
}

/* ===== 12-oct-2026 (Sebastian eligió "B · doble tubo de neón"): TODOS los botones = dos líneas de neón rosado→azul
   (arriba y abajo, como los tubos del logo 305), sin bordes redondos, cristal muy leve. Activo/encima: líneas más
   gruesas y encendidas + relleno de color. Menú principal con letras de CRISTAL (Michroma). Los círculos de color del
   garaje y los puntitos de los carruseles se quedan redondos (son muestras/indicadores). ===== */
:root{--npk:#ff3fb4;--nbl:#4f9dff;--ng:linear-gradient(90deg,var(--npk),var(--nbl));--ngs:linear-gradient(90deg,rgba(255,63,180,.6),rgba(79,157,255,.6))}
:is(.hero .gmenu .gm,.hero .press,.bar .btn,.hero .btn,.snd,.lang,#_n){
  border-radius:0!important;border:0!important;box-shadow:none!important;clip-path:none!important;transform:none!important;opacity:1!important;
  -webkit-backdrop-filter:blur(3px)!important;backdrop-filter:blur(3px)!important;color:#fff!important;animation:none;
  background:var(--ngs) 0 0/100% 1px no-repeat,var(--ngs) 0 100%/100% 1px no-repeat,linear-gradient(90deg,rgba(255,255,255,.06),rgba(255,255,255,.02))!important}
:is(.hero .press,.bar .btn,.hero .btn,.snd,.lang,#_n)::before{content:none!important}
:is(.hero .press,#_n)::after{content:none!important}
:is(.hero .gmenu .gm,#_n)>i{display:none!important}
:is(.hero .gmenu .gm.on,.hero .gmenu .gm:hover,.lang button[aria-pressed="true"],.bar .btn:hover,.hero .btn:hover,.bar .btn.js-quote,.hero .btn.js-quote,.hero .press:hover,.snd:hover,#_n){
  background:var(--ng) 0 0/100% 2px no-repeat,var(--ng) 0 100%/100% 2px no-repeat,linear-gradient(90deg,rgba(255,63,180,.17),rgba(79,157,255,.17))!important;
  box-shadow:0 -7px 16px -11px var(--npk),0 7px 16px -11px var(--nbl)!important}
/* textos chicos: Montserrat fino y ancho, como "STARLIGHTS" */
:is(.hero .press,.bar .btn,.hero .btn,.lang button,#_n){font-family:Montserrat,var(--f-b),sans-serif!important;font-weight:400!important;text-transform:uppercase;letter-spacing:.3em!important;text-shadow:0 1px 6px rgba(0,0,0,.6)!important}
:is(.hero .press,#_n){letter-spacing:.42em!important;font-weight:300!important;padding:14px 22px!important}
:is(.bar .btn,.hero .btn,#_n){padding:12px 18px!important}:is(.bar .btn-sm,#_n){padding:10px 14px!important}
:is(.lang,#_n){padding:2px!important;gap:2px}
:is(.lang button,#_n){background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;color:rgba(255,255,255,.6)!important;padding:7px 10px!important}
:is(.lang button[aria-pressed="true"],#_n){color:#fff!important;background:none!important;box-shadow:none!important;text-shadow:0 0 8px var(--npk),0 0 14px var(--nbl)!important}
:is(.bar .btn:hover,.hero .btn:hover,.bar .btn.js-quote,.hero .btn.js-quote,.hero .press:hover,#_n){text-shadow:0 0 8px var(--npk),0 0 14px var(--nbl)!important}
:is(.snd svg,#_n){color:#fff;filter:drop-shadow(0 0 4px rgba(255,63,180,.6))}
/* menú principal: letras de CRISTAL (Michroma) */
:is(.hero .gmenu .gm,#_n){padding:13px 18px 13px 14px!important}
:is(.hero .gmenu .gm,#_n)>span{font-family:Michroma,var(--f-c),sans-serif!important;font-weight:400!important;letter-spacing:.06em!important;text-transform:uppercase;
  color:transparent!important;-webkit-text-stroke:1px rgba(255,255,255,.88);
  background:linear-gradient(170deg,rgba(255,255,255,.85),rgba(255,255,255,.14) 50%,rgba(255,255,255,.6)),linear-gradient(100deg,transparent 30%,rgba(255,255,255,.95) 46%,transparent 58%);
  background-size:100% 100%,250% 100%;-webkit-background-clip:text;background-clip:text;text-shadow:none!important;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.55));animation:vidrioLetra 3.4s ease-in-out infinite}
:is(.hero .gmenu .gm.on,#_n)>span{-webkit-text-stroke:1.2px #fff;filter:drop-shadow(0 0 6px rgba(255,63,180,.85)) drop-shadow(0 0 14px rgba(79,157,255,.75))}
:is(.hero .gmenu .gm,#_n)::before{font-family:Montserrat,sans-serif!important;font-weight:300!important;color:rgba(255,255,255,.75)!important;opacity:1!important;letter-spacing:.25em!important}
:is(.hero .gmenu .gm,#_n)::after{color:#c9b8ff;opacity:.7!important}
:is(.hero .gmenu .gm.on,#_n)::after{color:#fff;opacity:1!important;filter:drop-shadow(0 0 5px var(--npk))}
@keyframes vidrioLetra{0%{background-position:0 0,140% 0}60%,100%{background-position:0 0,-60% 0}}
@media (prefers-reduced-motion:reduce){:is(.hero .gmenu .gm,#_n)>span{animation:none}}
/* 12-oct (Sebastian: "el botón de cotizar que sea el más llamativo"): Cotizar / Get a quote = tubos gruesos siempre
   encendidos, relleno de neón más fuerte, letras blancas con brillo y un latido suave de luz. */
:is(.bar .js-quote,.hero .js-quote,#_n){
  background:var(--ng) 0 0/100% 3px no-repeat,var(--ng) 0 100%/100% 3px no-repeat,linear-gradient(90deg,rgba(255,63,180,.42),rgba(79,157,255,.42))!important;
  box-shadow:0 -8px 18px -10px var(--npk),0 8px 18px -10px var(--nbl),0 0 26px -6px rgba(200,110,255,.65)!important;
  font-weight:500!important;color:#fff!important;text-shadow:0 0 6px #fff,0 0 12px var(--npk),0 0 20px var(--nbl)!important;
  animation:cotizaLate 2.2s ease-in-out infinite!important;display:inline-flex!important;visibility:visible!important}
:is(.bar .js-quote:hover,.hero .js-quote:hover,#_n){background:var(--ng) 0 0/100% 3px no-repeat,var(--ng) 0 100%/100% 3px no-repeat,linear-gradient(90deg,rgba(255,63,180,.6),rgba(79,157,255,.6))!important}
@keyframes cotizaLate{0%,100%{box-shadow:0 -8px 18px -10px var(--npk),0 8px 18px -10px var(--nbl),0 0 22px -8px rgba(200,110,255,.5)}50%{box-shadow:0 -10px 22px -8px var(--npk),0 10px 22px -8px var(--nbl),0 0 34px -4px rgba(200,110,255,.85)}}
@media (prefers-reduced-motion:reduce){:is(.bar .js-quote,.hero .js-quote,#_n){animation:none!important}}
/* 12-oct (Sebastian): debajo del menú, Cotizar (el más llamativo) + WhatsApp directo, uno al lado del otro */
.hero-cta{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:clamp(18px,3vh,30px)}
.hero.calm .hero-cta .press{margin:0!important;align-self:auto!important}
:is(.hero-cta .wa-btn,#_n){gap:9px;letter-spacing:.3em!important;animation:none!important}
:is(.hero-cta .wa-btn,#_n) svg{width:16px;height:16px;flex:none;color:#7dffb0;filter:drop-shadow(0 0 5px rgba(37,211,102,.8))}
@media (max-width:760px){.hero-cta{margin-top:auto;gap:8px}:is(.hero-cta .press,#_n){padding:13px 14px!important;font-size:11px!important;letter-spacing:.24em!important}}
:is(.hero-cta .press,#_n){display:inline-flex!important;align-items:center;justify-content:center;gap:10px!important}
@media (max-width:760px){.hero-cta{margin-top:18px!important}.hero.calm .hero-cta{margin-bottom:0}}
/* 12-oct (Sebastian, captura): el recuadro de texto de la película, su etiqueta y la marca de arriba también al estilo
   NUEVO (doble tubo de neón, sin bordes redondos). El vidrio claro se conserva por dentro. */
:is(#_n){border-radius:0!important;
  background:var(--ng) 0 0/100% 2px no-repeat,var(--ngs) 0 100%/100% 1px no-repeat,linear-gradient(135deg,rgba(255,255,255,.09),rgba(255,255,255,.02) 45%,rgba(255,255,255,.05))!important;
  box-shadow:0 -8px 18px -12px var(--npk),0 22px 40px -26px rgba(0,0,0,.75)!important}
:is(#_n)::before{border-radius:0!important}
:is(#_n)::after{left:0!important;right:0!important;height:2px!important;background:var(--ng)!important;box-shadow:0 0 10px var(--npk),0 0 16px var(--nbl)}
:is(#_n){border-radius:0!important;border:0!important;box-shadow:none!important;padding:6px 12px!important;
  background:var(--ngs) 0 0/100% 1px no-repeat,var(--ngs) 0 100%/100% 1px no-repeat,linear-gradient(90deg,rgba(255,63,180,.16),rgba(79,157,255,.16))!important;
  font-family:Montserrat,var(--f-b),sans-serif!important;font-weight:400!important;letter-spacing:.3em!important;text-shadow:0 0 8px var(--npk)}
:is(#_n)::before{border-radius:0!important;width:5px!important;height:5px!important;transform:rotate(45deg);background:linear-gradient(135deg,var(--npk),var(--nbl))!important;box-shadow:0 0 8px var(--npk)!important}
:is(.bar .mark,.mark,#_n){border-radius:0!important;border:0!important;box-shadow:none!important;
  background:var(--ngs) 0 0/100% 1px no-repeat,var(--ngs) 0 100%/100% 1px no-repeat,linear-gradient(90deg,rgba(255,255,255,.06),rgba(255,255,255,.02))!important;
  -webkit-backdrop-filter:blur(3px)!important;backdrop-filter:blur(3px)!important}
:is(.mark .mark-n,#_n){background:var(--ng);-webkit-background-clip:text;background-clip:text;color:transparent!important;filter:drop-shadow(0 0 6px rgba(255,63,180,.6))}
:is(.mark .mark-w,#_n){font-family:Montserrat,sans-serif!important;font-weight:400!important;letter-spacing:.3em!important}
/* 12-oct: solo los que no tienen posición propia necesitan "relative" (el visor y las flechas conservan la suya) */
:is(.hero .gmenu .gm,.hero .press,.bar .btn,.hero .btn,.lang,#_n){position:relative}
/* 12-oct (Sebastian: "no se puede leer cuando el fondo es blanco"): sobre fondo claro (barra al bajar, secciones
   blancas, pie, panel del garaje) las letras van OSCURAS y sin brillo; los tubos de neón se quedan. Cotizar se rellena
   con el degradado entero y letras blancas, para que siga siendo el más llamativo. */
:is(.bar.solid,#_n) :is(.snd,.lang button,.bar .btn,.hero .btn,.hero .press,#_n){
  color:var(--w-ink)!important;text-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
:is(.bar.solid,#_n) :is(.lang button,#_n){color:var(--w-soft)!important}
:is(.bar.solid,#_n) :is(.lang button[aria-pressed="true"],#_n){color:var(--w-ink)!important;font-weight:600!important}
:is(.bar.solid,#_n) :is(#_n){color:var(--w-ink)!important;font-weight:600!important}
:is(.bar.solid,#_n) :is(.snd svg,#_n){color:var(--w-ink)!important;filter:none!important}
:is(.bar.solid,#_n) :is(.bar .js-quote,.hero .js-quote,#_n){color:#fff!important;font-weight:600!important;text-shadow:0 1px 2px rgba(0,0,0,.35)!important;
  background:var(--ng)!important;box-shadow:0 8px 20px -8px var(--npk),0 8px 20px -8px var(--nbl)!important}
:is(.bar.solid .mark-star,#_n){filter:invert(1) brightness(.2)}
/* 12-oct (Sebastian: "este 305 que esté aquí", arriba a la izquierda, asimétrico): en computadora el logo grande sube
   a la izquierda debajo de la marca (ya no choca con el contador 01/07 de la derecha). El teléfono queda igual. */
@media (min-width:761px){
  #logo3d.logo-neon{left:clamp(20px,4vw,70px)!important;right:auto!important;top:calc(env(safe-area-inset-top) + 74px)!important;
    width:clamp(260px,min(28vw,42vh),480px)!important;padding-left:0!important;align-items:flex-start}
  #logo3d.logo-neon span{padding-left:.6em}
}
/* 12-oct (Sebastian, captura "04 / 07"): el contador del riel también con doble tubo de neón, sin redondo (conserva su lugar) */
:is(#_n){border-radius:0!important;border:0!important;box-shadow:none!important;white-space:nowrap;
  background:var(--ng) 0 0/100% 1.5px no-repeat,var(--ng) 0 100%/100% 1.5px no-repeat,linear-gradient(90deg,rgba(255,63,180,.18),rgba(79,157,255,.18)),rgba(5,6,11,.35)!important;
  font-family:Montserrat,sans-serif!important;font-weight:500!important;color:#fff!important;text-shadow:0 0 8px var(--npk),0 0 14px var(--nbl)!important}
/* ===== 12-oct (Sebastian: "los cuadros hazlo como los widgets y botones pero manteniendo el efecto liquid en los
   bordes" + "en todas las fotos, en todos los marcos y widgets"): fotos, videos, visor, paneles y logo de contacto
   SIN esquinas redondas, con el doble tubo de neón (arriba y abajo) y conservando el canto de cristal líquido
   (filo blanco brillante + reflejo). Las etiquetas de los autos pasan a placa de neón oscura. ===== */
:is(#_n){border-radius:0!important}
:is(#_n)::before{border-radius:0!important}
:is(#_n)::after{border-radius:0!important;
  background:var(--ng) 0 0/100% 2px no-repeat,var(--ng) 0 100%/100% 2px no-repeat,
    linear-gradient(155deg,rgba(255,255,255,.26) 0%,rgba(255,255,255,.06) 16%,rgba(255,255,255,0) 32%),radial-gradient(120% 60% at 85% 108%,rgba(255,255,255,.16),rgba(255,255,255,0) 60%)!important}
:is(#_n)::after{border-radius:0!important;
  background:var(--ng) 0 0/100% 2px no-repeat,var(--ng) 0 100%/100% 2px no-repeat,
    linear-gradient(155deg,rgba(255,255,255,.24) 0%,rgba(255,255,255,.05) 16%,rgba(255,255,255,0) 32%),linear-gradient(to top,rgba(5,6,11,.82),rgba(5,6,11,.1) 55%,transparent)!important}
:is(#_n){box-shadow:0 -10px 22px -16px var(--npk),0 24px 46px -24px rgba(10,12,20,.55),0 10px 22px -14px var(--nbl)!important}
/* videos, visor, paneles: tubos de neón + filo de cristal */
:is(#_n){
  box-shadow:inset 0 2px 0 0 var(--npk),inset 0 -2px 0 0 var(--nbl),inset 0 0 0 1.2px rgba(255,255,255,.45),inset 0 3px 6px -2px rgba(255,255,255,.5),0 24px 46px -24px rgba(10,12,20,.55)!important}
:is(#_n){box-shadow:inset 0 1.5px 0 0 rgba(255,63,180,.7),inset 0 -1.5px 0 0 rgba(79,157,255,.7)!important}
:is(#_n){box-shadow:inset 0 3px 0 0 var(--npk),inset 0 -3px 0 0 var(--nbl),0 0 16px -4px var(--npk)!important}
/* etiquetas de los autos sobre las fotos: placa oscura de neón */
:is(#_n){border-radius:0!important;padding:6px 11px!important;color:#fff!important;text-shadow:0 0 8px var(--npk)!important;
  font-family:Montserrat,sans-serif!important;font-weight:500!important;letter-spacing:.24em!important;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  background:var(--ng) 0 0/100% 1.5px no-repeat,var(--ng) 0 100%/100% 1.5px no-repeat,rgba(5,6,11,.62)!important}
/* 12-oct (Sebastian: "esta línea mejórala, con el estilo de ahora"): riel de progreso = tubo de neón rosado→azul.
   Riel apagado = doble línea fina de cristal; lo recorrido = tubo encendido; el punto = rombo de luz; las marcas de
   escena = rayitas de neón que se encienden al pasar. Sin redondos. */
:is(#_n){width:4px!important;border-radius:0!important;-webkit-mask:none!important;mask:none!important;
  background:linear-gradient(180deg,transparent,rgba(255,63,180,.45) 6%,rgba(255,63,180,.45) 94%,transparent) 0 0/1px 100% no-repeat,
    linear-gradient(180deg,transparent,rgba(79,157,255,.45) 6%,rgba(79,157,255,.45) 94%,transparent) 100% 0/1px 100% no-repeat!important}
:is(#_n){border-radius:0!important;background:linear-gradient(180deg,var(--npk),#c78bff 55%,var(--nbl))!important;
  box-shadow:0 0 6px var(--npk),0 0 14px rgba(79,157,255,.8)!important}
:is(#_n)::after{width:12px!important;height:12px!important;border-radius:0!important;bottom:-6px!important;transform:translateX(-50%) rotate(45deg)!important;
  background:radial-gradient(circle,#fff 0 30%,#ffd2f1 45%,var(--npk) 70%,var(--nbl))!important;
  box-shadow:0 0 0 2px rgba(255,255,255,.35),0 0 12px 2px var(--npk),0 0 22px 4px var(--nbl)!important}
:is(#_n){width:12px!important;height:1.5px!important;border-radius:0!important;background:linear-gradient(90deg,rgba(255,63,180,.55),rgba(79,157,255,.55))!important;box-shadow:none!important}
:is(#_n){width:18px!important;height:2px!important;background:var(--ng)!important;box-shadow:0 0 6px var(--npk),0 0 10px var(--nbl)!important}
@media (max-width:760px){:is(.bar .js-quote,#_n){letter-spacing:.14em!important;padding:10px 12px!important;font-size:11px!important;white-space:nowrap}}
/* 12-oct (Sebastian: "esto quítalo porque ya tenemos el logo"): fuera la marca 305 STARLIGHTS de la barra */
:is(.bar:not(.solid) .mark,#_n){display:none!important}   /* 12-oct: solo aparece al terminar la película (barra clara) */
:is(.bar.solid .mark,#_n){display:inline-flex!important;animation:markIn .45s var(--ease) both}
@keyframes markIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
:is(.snd,#_n){position:relative}
/* 12-oct (Sebastian: "los botones de pasar hacia el lado que se vean bien, nítidos"): flechas de los carruseles, del
   visor y de la galería = placa oscura de cristal firme + tubos de neón encendidos + flecha blanca gruesa con brillo. */
:is(#_n){
  background:var(--ng) 0 0/100% 2px no-repeat,var(--ng) 0 100%/100% 2px no-repeat,rgba(5,6,11,.62)!important;
  -webkit-backdrop-filter:blur(10px) saturate(140%)!important;backdrop-filter:blur(10px) saturate(140%)!important;
  box-shadow:0 -6px 14px -10px var(--npk),0 6px 14px -10px var(--nbl),0 8px 22px -10px rgba(0,0,0,.7)!important;opacity:1!important}
:is(#_n){color:#fff!important;stroke-width:2.6;width:22px!important;height:22px!important;
  filter:drop-shadow(0 0 2px #fff) drop-shadow(0 0 6px var(--npk)) drop-shadow(0 1px 2px rgba(0,0,0,.8))!important}
:is(#_n){background:var(--ng) 0 0/100% 3px no-repeat,var(--ng) 0 100%/100% 3px no-repeat,linear-gradient(90deg,rgba(255,63,180,.35),rgba(79,157,255,.35)),rgba(5,6,11,.62)!important}
:is(#_n) :is(#_n){color:#fff!important}
:is(#_n) :is(#_n){color:#fff!important;filter:drop-shadow(0 0 2px #fff) drop-shadow(0 0 6px var(--npk))!important}
/* 12-oct (fluidez en teléfono, medido: 4.8 % trabados con los botones nuevos): lo que se repintaba en cada cuadro de la
   película pasa a ser barato. (1) El latido de Cotizar ya no anima la sombra: un brillo aparte que solo cambia de
   opacidad (lo mueve la tarjeta gráfica). (2) En teléfono los botones no desenfocan el fondo (fondo oscuro fijo, se ve
   igual) y la letra de cristal no anima su reflejo. */
:is(.bar .js-quote,.hero .js-quote,#_n){animation:none!important}
.bar .js-quote::after,.hero .js-quote::after{content:""!important;position:absolute;inset:-6px;pointer-events:none;z-index:-1;opacity:.35;will-change:opacity;
  background:radial-gradient(60% 90% at 50% 50%,rgba(200,110,255,.55),transparent 70%);animation:cotizaBrillo 2.2s ease-in-out infinite}
@keyframes cotizaBrillo{0%,100%{opacity:.25}50%{opacity:.85}}
@media (prefers-reduced-motion:reduce){.bar .js-quote::after,.hero .js-quote::after{animation:none}}
@media (max-width:760px),(hover:none){
  :is(.hero .gmenu .gm,.hero .press,.bar .btn,.hero .btn,.snd,.lang,#_n){-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  :is(.bar .snd,.bar .lang,.hero .gmenu .gm,.hero-cta .press,#_n){background-color:rgba(5,6,11,.55)!important}
  :is(#_n){background-color:rgba(5,6,11,.45)!important}
  :is(.hero .gmenu .gm,#_n)>span{animation:none!important}
}
@media (max-width:760px),(hover:none){
  :is(#_n){box-shadow:none!important}
  :is(#_n)::after{box-shadow:0 0 0 2px rgba(255,255,255,.35)!important}
  :is(#_n){box-shadow:none!important}
  :is(#_n)::after{box-shadow:none!important}
}
/* ===== 13-oct-2026 (Sebastian, imagen 31): textos de la película con el estilo de los títulos de las secciones:
   pastilla con el número + etiqueta espaciada, título en negrita con la última palabra en cursiva (Instrument Serif),
   SIN recuadro ni neón. Sobre el video: pastilla blanca, letras blancas con sombra para que se lean.
   El neón se queda SOLO en la portada, la barra de arriba y el menú. ===== */
.cap{background:none!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  border-radius:0!important;padding:0!important;overflow:visible!important}
.cap::before,.cap::after{content:none!important}
.cap-k{display:flex!important;align-items:center;gap:12px;padding:0!important;margin-bottom:12px!important;border-radius:0!important;
  background:none!important;box-shadow:none!important;border:0!important;
  font-family:var(--f-e)!important;font-weight:600!important;font-size:11px!important;letter-spacing:.32em!important;text-transform:uppercase;
  color:rgba(255,255,255,.86)!important;text-shadow:0 1px 10px rgba(0,0,0,.7)!important}
.cap-k::before{content:none!important}
.cap-n{display:inline-grid;place-items:center;min-width:34px;height:22px;padding:0 9px;border-radius:999px;background:#fff;color:#0b0b0e;
  font-family:var(--f-e);font-weight:600;font-size:10px;letter-spacing:.08em;text-shadow:none;box-shadow:0 4px 14px -6px rgba(0,0,0,.6)}
.cap-t{font-family:var(--f-e)!important;font-weight:600!important;letter-spacing:-.03em!important;line-height:1.05!important;
  font-size:clamp(26px,3.6vw,52px)!important;color:#fff!important;text-shadow:0 2px 6px rgba(0,0,0,.55),0 4px 30px rgba(0,0,0,.65)!important}
.cap-t em.it{font-family:var(--f-s);font-style:italic;font-weight:400;letter-spacing:-.005em}
.cap-s{color:rgba(255,255,255,.82)}
@media (max-width:760px){.cap-t{font-size:clamp(24px,7vw,32px)!important}.cap-k{font-size:10px!important;letter-spacing:.26em!important}}

/* ===== 28-oct-2026: FORMULARIO DE COTIZACIÓN (ventana sobre la página, mismo estilo de las secciones blancas) ===== */
html.qf-on,html.qf-on body{overflow:hidden}
.qf{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:calc(env(safe-area-inset-top) + 16px) 16px calc(env(safe-area-inset-bottom) + 16px);
  background:rgba(4,5,10,.78);-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);opacity:0;transition:opacity .22s ease;overscroll-behavior:contain}
.qf.on{opacity:1}
.qf[hidden]{display:none}
.qf-card{position:relative;width:100%;max-width:640px;max-height:100%;overflow:auto;-webkit-overflow-scrolling:touch;background:var(--w-bg2);color:var(--w-ink);border-radius:22px;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.85),inset 0 0 0 1px rgba(255,255,255,.6);transform:translateY(10px) scale(.985);transition:transform .25s var(--ease)}
.qf.on .qf-card{transform:none}
.qf-in{padding:clamp(26px,4vw,40px)}
.qf-x{position:absolute;top:14px;right:14px;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;color:var(--w-ink);background:var(--w-bg);z-index:2}
.qf-x svg{width:18px;height:18px}
.qf-x:hover{background:#ebeae6}
.qf .gt-kick{font-size:10.5px;letter-spacing:.3em;margin-bottom:14px}
.qf h2{font-family:var(--f-e);font-weight:600;font-size:clamp(28px,4.4vw,40px);line-height:1.04;letter-spacing:-.035em;padding-right:40px}
.qf h2 em.it{font-family:var(--f-s);font-style:italic;font-weight:400;letter-spacing:-.005em}
.qf-lead{margin:10px 0 22px;color:var(--w-soft);font-size:15px;line-height:1.55;max-width:48ch}
.qf-g{display:grid;grid-template-columns:1fr 1fr;gap:14px 14px}
.qf-l{display:grid;gap:6px;min-width:0}
.qf-l>span{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--w-soft)}
.qf-w{grid-column:1/-1}
.qf input,.qf select,.qf textarea{width:100%;font:inherit;font-size:16px;color:var(--w-ink);background:var(--w-bg);border:1px solid var(--w-line);border-radius:12px;padding:12px 14px;
  outline:none;transition:border-color .2s,box-shadow .2s;-webkit-appearance:none;appearance:none}
.qf select{background-image:linear-gradient(45deg,transparent 50%,var(--w-soft) 50%),linear-gradient(135deg,var(--w-soft) 50%,transparent 50%);
  background-position:calc(100% - 20px) 52%,calc(100% - 15px) 52%;background-size:5px 5px;background-repeat:no-repeat;padding-right:36px}
.qf textarea{resize:vertical;min-height:84px}
.qf input:focus,.qf select:focus,.qf textarea:focus{border-color:var(--w-ink);box-shadow:0 0 0 3px rgba(12,13,17,.08)}
.qf-hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0}
.qf-ph{margin-top:16px}
.qf-pl{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--w-soft);margin-bottom:8px}
.qf-thumbs{display:flex;gap:10px;flex-wrap:wrap}
.qf-thumbs:empty{display:none}
.qf-th{position:relative;width:78px;height:78px;border-radius:12px;overflow:hidden;background:var(--w-bg)}
.qf-th img{width:100%;height:100%;object-fit:cover}
.qf-th button{position:absolute;top:4px;right:4px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:rgba(12,13,17,.72);color:#fff}
.qf-th button svg{width:12px;height:12px}
.qf-add{display:inline-flex;align-items:center;gap:10px;margin-top:10px;padding:11px 16px;border:1px dashed rgba(12,13,17,.28);border-radius:12px;cursor:pointer;font-size:14px;font-weight:500}
.qf-add[hidden]{display:none}
.qf-add svg{width:20px;height:20px}
.qf-add:hover{border-color:var(--w-ink)}
.qf-ts{margin-top:14px}
.qf-ts:empty{display:none}
.qf-msg{margin-top:14px;padding:10px 14px;border-radius:10px;background:#fdecef;color:#9b1630;font-size:14px}
.qf-acts{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:20px}
.qf-send{justify-content:center;min-width:220px}
.qf-send[disabled]{opacity:.6;pointer-events:none}
.qf-wa{font-size:14px;color:var(--w-soft);text-decoration:underline;text-underline-offset:3px}
.qf-wa:hover{color:var(--w-ink)}
.qf-priv{margin-top:14px;font-size:12px;color:var(--w-soft)}
.qf-ok{text-align:center;padding:clamp(40px,7vw,64px) clamp(26px,4vw,40px);display:grid;justify-items:center;gap:12px}
.qf-ok[hidden]{display:none}
.qf-okic{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:var(--w-ink);color:#fff}
.qf-okic svg{width:26px;height:26px}
.qf-ok h3{font-family:var(--f-e);font-weight:600;font-size:28px;letter-spacing:-.03em}
.qf-ok p{color:var(--w-soft);max-width:38ch}
.qf-done{margin-top:8px}
@media (max-width:560px){
  .qf{padding:calc(env(safe-area-inset-top) + 10px) 10px calc(env(safe-area-inset-bottom) + 10px)}
  .qf-g{grid-template-columns:1fr}
  .qf-send{width:100%}
  .qf-acts{justify-content:center}
}
@media (prefers-reduced-motion:reduce){.qf,.qf-card{transition:none}}
[hidden].gt{display:none!important}

/* ===== 29-oct-2026: formulario con COTIZADOR y CITAS ===== */
.qf-card{max-width:720px}
.qf-modo{display:inline-flex;gap:4px;padding:4px;border-radius:999px;background:var(--w-bg);margin:0 0 18px}
.qf-modo button{padding:9px 16px;border-radius:999px;font-size:14px;font-weight:600;color:var(--w-soft)}
.qf-modo button.on{background:var(--w-ink);color:#fff}
.qf-sec{border:0;margin:0 0 6px;padding:16px 0 10px;border-top:1px solid var(--w-line);min-width:0}
.qf-sec legend{float:left;width:100%;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--w-ink);margin-bottom:12px}
.qf-sec legend+*{clear:both}
.qf-solo-cita{display:none}
.qf.modo-cita .qf-solo-cita{display:block}
.qf-g3{display:grid;grid-template-columns:1.2fr 1.2fr .7fr;gap:12px}
.qf-sub{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--w-soft);margin:12px 0 8px}
.qf-chips{display:flex;flex-wrap:wrap;gap:8px}
.qf-chip{position:relative;cursor:pointer}
.qf-chip input{position:absolute;opacity:0;pointer-events:none}
.qf-chip span{display:inline-block;padding:9px 13px;border-radius:999px;border:1px solid var(--w-line);background:var(--w-bg);font-size:14px;line-height:1.25;transition:background .15s,border-color .15s,color .15s}
.qf-chip input:checked+span{background:var(--w-ink);border-color:var(--w-ink);color:#fff}
.qf-chip input:focus-visible+span{outline:2px solid var(--acc);outline-offset:2px}
.qf-est{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;align-items:baseline;margin-top:14px;padding:14px 16px;border-radius:14px;background:var(--w-ink);color:#fff}
.qf-est[hidden]{display:none}
.qf-est-k{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;opacity:.75}
.qf-est-v{font-size:22px;font-weight:700;letter-spacing:-.02em;justify-self:end}
.qf-est small{grid-column:1/-1;font-size:12px;opacity:.75}
.qf-ops{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px}
.qf-op{position:relative;cursor:pointer}
.qf-op input{position:absolute;opacity:0;pointer-events:none}
.qf-op-in{display:flex;flex-direction:column;gap:3px;height:100%;padding:12px 14px;border-radius:14px;border:1px solid var(--w-line);background:var(--w-bg);transition:border-color .15s,box-shadow .15s}
.qf-op-in b{font-size:14px}
.qf-op-in small{font-size:12.5px;color:var(--w-soft);line-height:1.4}
.qf-op input:checked+.qf-op-in{border-color:var(--w-ink);box-shadow:inset 0 0 0 1px var(--w-ink);background:#fff}
.qf-op input:focus-visible+.qf-op-in{outline:2px solid var(--acc);outline-offset:2px}
.qf-donde{display:grid;gap:12px;margin-top:14px}
.qf-donde[hidden],.qf-otro[hidden],.qf-recibe[hidden]{display:none}
.qf-gps-r{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.qf-gps{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:12px;border:1px solid var(--w-ink);font-size:14px;font-weight:600;color:var(--w-ink)}
.qf-gps svg{width:18px;height:18px}
.qf-gps[disabled]{opacity:.5}
.qf-mapa{font-size:14px;text-decoration:underline;text-underline-offset:3px;color:var(--w-ink)}
.qf-mapa[hidden]{display:none}
.qf-gps-msg{font-size:13px;color:var(--w-soft);margin:-4px 0 0}
.qf-gps-msg[hidden]{display:none}
.qf-dias{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 8px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.qf-dia{flex:none;scroll-snap-align:start;display:grid;justify-items:center;gap:1px;min-width:64px;padding:9px 6px;border-radius:14px;border:1px solid var(--w-line);background:var(--w-bg)}
.qf-dia small{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--w-soft)}
.qf-dia b{font-size:20px;font-weight:700}
.qf-dia.on{background:var(--w-ink);border-color:var(--w-ink);color:#fff}
.qf-dia.on small{color:rgba(255,255,255,.75)}
.qf-horas{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
.qf-hora{padding:10px 6px;border-radius:12px;border:1px solid var(--w-line);background:var(--w-bg);font-size:14px;font-weight:600}
.qf-hora.on{background:var(--w-ink);border-color:var(--w-ink);color:#fff}
.qf-ok-p{color:var(--w-soft);max-width:42ch}
.ct-book{background:var(--w-ink);color:#fff;box-shadow:none}
.ct-book[hidden]{display:none}
@media (max-width:560px){
  .qf-g3{grid-template-columns:1fr 1fr}
  .qf-g3 .qf-l:first-child{grid-column:1/-1}
  .qf-ops{grid-template-columns:1fr}
  .qf-modo{display:flex}
  .qf-modo button{flex:1}
}
/* 29-oct: estados del calendario (disponible / ocupada / no disponible) */
.qf-dia.off{opacity:.35;cursor:not-allowed;background:transparent}
.qf-hora.ocupada{color:var(--w-soft);background:repeating-linear-gradient(-45deg,var(--w-bg),var(--w-bg) 5px,#e7e5e0 5px,#e7e5e0 10px);text-decoration:line-through;cursor:not-allowed;text-align:center}
.qf-hora.nohab{color:#b9b7b2;background:transparent;border-style:dashed;cursor:not-allowed;text-align:center}
span.qf-hora{display:block}
.qf-ley{display:flex;gap:14px;flex-wrap:wrap;margin-top:10px;font-size:12px;color:var(--w-soft)}
.qf-ley i{display:inline-block;width:12px;height:12px;border-radius:4px;margin-right:6px;vertical-align:-2px;border:1px solid var(--w-line)}
.qf-ley i.l{background:var(--w-bg)}
.qf-ley i.o{background:repeating-linear-gradient(-45deg,var(--w-bg),var(--w-bg) 2px,#d6d4ce 2px,#d6d4ce 4px)}
.qf-ley i.x{border-style:dashed;background:transparent}