@font-face{font-family:"Big Shoulders Display";font-weight:700;font-display:swap;src:url("../fonts/BigShouldersDisplay-700.woff2") format("woff2")}
@font-face{font-family:"Big Shoulders Display";font-weight:800;font-display:swap;src:url("../fonts/BigShouldersDisplay-800.woff2") format("woff2")}
@font-face{font-family:"Big Shoulders Display";font-weight:900;font-display:swap;src:url("../fonts/BigShouldersDisplay-900.woff2") format("woff2")}
@font-face{font-family:"Aileron";font-weight:300;font-display:swap;src:url("../fonts/Aileron-Light.otf") format("opentype")}
@font-face{font-family:"Aileron";font-weight:400;font-display:swap;src:url("../fonts/Aileron-Regular.otf") format("opentype")}
@font-face{font-family:"Aileron";font-weight:600;font-display:swap;src:url("../fonts/Aileron-SemiBold.otf") format("opentype")}
@font-face{font-family:"Aileron";font-weight:700;font-display:swap;src:url("../fonts/Aileron-Bold.otf") format("opentype")}
:root{
  --bg:#050507; --surface:#0b0b11; --line:rgba(255,255,255,.12); --edge:rgba(255,255,255,.38);
  --azul:#2547D0; --azul-luz:#7C97EE; --metal:#b9bdc7; --metal-os:#5d616c;
  --text:#f4f5f8; --muted:#b6b8c6;
  --titulo:"Big Shoulders Display","Oswald","Arial Narrow",sans-serif;
  --texto:"Aileron",-apple-system,"Segoe UI",sans-serif;
  --gutter:clamp(20px,5vw,40px);
  --ease:cubic-bezier(.2,.7,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg);scroll-behavior:smooth;scroll-padding-top:68px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:400 1.0625rem/1.65 var(--texto);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--azul-luz);outline-offset:3px}
.wrap{width:100%;max-width:1160px;margin:0 auto;padding:0 var(--gutter)}
h1,h2,h3{margin:0;font-family:var(--titulo);font-weight:800;text-transform:uppercase;line-height:.95;letter-spacing:.012em}
p{margin:0}
.skip{position:absolute;left:12px;top:-60px;z-index:60;background:#fff;color:#000;padding:10px 14px;text-decoration:none;font:600 .9rem var(--texto)}
.skip:focus{top:12px}
.tex{position:fixed;left:0;top:0;width:100%;height:100%;z-index:49;pointer-events:none;opacity:.01}
.grain{position:fixed;inset:0;z-index:50;pointer-events:none;opacity:.03;
  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='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
/* esquinas metálicas de case */
.corners{position:relative}
.corners::after{content:"";position:absolute;inset:-1px;pointer-events:none;
  --m:linear-gradient(var(--metal),var(--metal));
  background:
   var(--m) 0 0/20px 3px no-repeat,var(--m) 0 0/3px 20px no-repeat,
   var(--m) 100% 0/20px 3px no-repeat,var(--m) 100% 0/3px 20px no-repeat,
   var(--m) 0 100%/20px 3px no-repeat,var(--m) 0 100%/3px 20px no-repeat,
   var(--m) 100% 100%/20px 3px no-repeat,var(--m) 100% 100%/3px 20px no-repeat}
.eyebrow{font:600 .78rem/1 var(--texto);letter-spacing:.3em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:14px}
.eyebrow::after{content:"";height:1px;width:48px;background:var(--azul)}

/* cabecera */
.topbar{position:fixed;inset:0 0 auto;z-index:20;border-bottom:1px solid transparent;background:linear-gradient(rgba(5,5,7,.7),rgba(5,5,7,0));transition:background .3s,border-color .3s}
.topbar.scrolled{background:rgba(5,5,7,.74);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom-color:var(--line)}
.bar{display:flex;align-items:center;justify-content:space-between;height:66px}
.bar .logo img{height:38px;width:auto}
.menu{display:flex;align-items:center;gap:clamp(18px,3vw,36px)}
.menu a{text-decoration:none;font:700 .78rem/1 var(--texto);letter-spacing:.2em;text-transform:uppercase;color:#f1f2f6;padding:12px 0;transition:color .2s}
.menu a:hover{color:var(--azul-luz)}
.btn{display:inline-flex;align-items:center;gap:12px;background:var(--azul);color:#fff;text-decoration:none;border:0;cursor:pointer;font:700 .78rem/1 var(--texto);letter-spacing:.2em;text-transform:uppercase;padding:18px 28px;min-height:50px;transition:background .25s,transform .25s var(--ease)}
.btn:hover{background:#3557D8;transform:translateY(-2px)}
.btn svg{width:16px;height:16px;transition:transform .25s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.menu .btn{padding:13px 18px;min-height:0;color:#fff}
.menu .btn:hover{color:#fff}
@media(max-width:700px){.menu a:not(.btn):not(.keep){display:none}.menu{gap:18px}}

/* banner: se enciende el escenario */
.hero{position:relative;min-height:100svh;display:grid;place-items:center;padding:calc(var(--truss,76px) + var(--th,34px) + var(--fw,58px)*1.25 + clamp(18px,3svh,36px)) 0 clamp(36px,6svh,56px);overflow:hidden;isolation:isolate;text-align:center}
.stage{position:absolute;inset:0;z-index:-1;pointer-events:none;perspective:1100px;perspective-origin:50% 0;will-change:transform,opacity}
.haze{position:absolute;inset:-10%;opacity:0;transition:opacity 4s var(--ease) 1s;
  background:radial-gradient(40% 36% at 30% 46%,rgba(220,228,255,.6),transparent 70%),radial-gradient(44% 40% at 72% 56%,rgba(220,228,255,.5),transparent 70%);
  animation:deriva 52s ease-in-out infinite alternate}
.ready .haze{opacity:.007}
@keyframes deriva{from{transform:translate3d(-3%,0,0) scale(1)}to{transform:translate3d(3%,-2%,0) scale(1.08)}}
.stage{--truss:76px;--th:clamp(24px,2.4vw,36px);--fw:calc(var(--th)*1.7);--ww:calc(var(--th)*1.75)}
/* truss de caja: dos cordones y celosía en zigzag, con el grosor proporcional a los equipos */
.truss{position:absolute;z-index:0;left:0;right:0;top:var(--truss);height:var(--th);
  background:
   linear-gradient(#aeb2bd,#6b6f7a 45%,#33353d) top/100% 5px no-repeat,
   linear-gradient(#33353d,#5b5f6b 55%,#aeb2bd) bottom/100% 5px no-repeat,
   repeating-linear-gradient(45deg,transparent 0 calc(var(--th)*.5 - 1px),rgba(150,155,168,.95) calc(var(--th)*.5 - 1px) calc(var(--th)*.5 + .8px),transparent calc(var(--th)*.5 + .8px) var(--th)),
   repeating-linear-gradient(-45deg,transparent 0 calc(var(--th)*.5 - 1px),rgba(150,155,168,.95) calc(var(--th)*.5 - 1px) calc(var(--th)*.5 + .8px),transparent calc(var(--th)*.5 + .8px) var(--th)),
   linear-gradient(#0c0d11,#0c0d11);
  box-shadow:0 12px 26px rgba(0,0,0,.55)}
/* cara trasera de la caja (se ve a través de la celosía) y cara inferior en perspectiva */
.truss::before{content:"";position:absolute;inset:5px 0;z-index:-1;opacity:.5;
  background:
   repeating-linear-gradient(45deg,transparent 0 calc(var(--th)*.25),rgba(110,114,126,.9) calc(var(--th)*.25) calc(var(--th)*.25 + 1px),transparent calc(var(--th)*.25 + 1px) calc(var(--th)*.5)),
   repeating-linear-gradient(-45deg,transparent 0 calc(var(--th)*.25),rgba(110,114,126,.9) calc(var(--th)*.25) calc(var(--th)*.25 + 1px),transparent calc(var(--th)*.25 + 1px) calc(var(--th)*.5))}
.truss::after{content:"";position:absolute;left:0;right:0;top:100%;height:calc(var(--th)*.3);
  background:
   repeating-linear-gradient(90deg,transparent 0 calc(var(--th)*.5 - 1px),rgba(120,124,136,.85) calc(var(--th)*.5 - 1px) calc(var(--th)*.5 + 1px),transparent calc(var(--th)*.5 + 1px) var(--th)),
   linear-gradient(#262830,#101116);
  clip-path:polygon(0 0,100% 0,100% 65%,0 100%);opacity:.9}
/* haces frontales: nacen de tres focos del truss y se mueven por programa */
/* wash LED en 3D real: la base cuelga fija del truss; el yugo (brazos) gira en PAN sobre el eje vertical
   y la cabeza se inclina en TILT sobre el eje horizontal que cruza los brazos. Unidad: u = ancho/70. */
.wash{position:absolute;top:calc(var(--truss) + var(--th));width:0;height:0;transform-style:preserve-3d}
.wbox{--u:calc(var(--ww)/70);position:absolute;left:calc(var(--ww)/-2);top:0;width:var(--ww);height:calc(var(--u)*80);transform-style:preserve-3d;perspective:1800px;perspective-origin:50% 45%}
.wb{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.pan,.tilt,.head,.arm{transform-style:preserve-3d}
.pan{position:absolute;inset:0;transform-origin:calc(var(--u)*35) calc(var(--u)*16)}
.tilt{position:absolute;inset:0;transform-origin:calc(var(--u)*35) calc(var(--u)*42)}
.pan b,.pan i,.head b{display:block;position:absolute}
.arm{position:absolute;top:calc(var(--u)*14);width:calc(var(--u)*7);height:calc(var(--u)*46)}
.arm.l{left:calc(var(--u)*8)}.arm.r{left:calc(var(--u)*55)}
.arm b{background:linear-gradient(90deg,#24262d,#5b5f6b 55%,#2a2c33);border:1px solid #6b6f7a;box-sizing:border-box;backface-visibility:visible}
.arm .f{inset:0;transform:translateZ(calc(var(--u)*6))}
.arm .o,.arm .n{top:0;width:calc(var(--u)*12);height:100%;transform-origin:0 0;transform:translateZ(calc(var(--u)*6)) rotateY(90deg);background:linear-gradient(180deg,#3a3d46,#1c1d23)}
.arm.l .o{left:0}.arm.l .n{left:calc(var(--u)*7)}
.arm.r .o{left:calc(var(--u)*7)}.arm.r .n{left:0}
.arm.l .o::after,.arm.r .o::after{content:"";position:absolute;left:50%;top:calc(var(--u)*28 - 1px);width:calc(var(--u)*5);height:calc(var(--u)*5);margin-left:calc(var(--u)*-2.5);border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#b9bdc7 45%,#5d616c)}
.bridge{left:calc(var(--u)*8);top:calc(var(--u)*12);width:calc(var(--u)*54);height:calc(var(--u)*6);background:linear-gradient(#34363e,#1b1c23);border:1px solid #6b6f7a;box-sizing:border-box;transform:translateZ(calc(var(--u)*6.6))}
.head b{backface-visibility:visible;box-sizing:border-box}
.hf,.hb{left:calc(var(--u)*15.8);top:calc(var(--u)*26);width:calc(var(--u)*38.4);height:calc(var(--u)*38);border-radius:calc(var(--u)*13);background:linear-gradient(180deg,#22242b,#14151a);border:1px solid #7b7f8b}
.hf{transform:translateZ(calc(var(--u)*10))}
.hb{transform:translateZ(calc(var(--u)*-10));background:#0f1015}
.hl,.hr{top:calc(var(--u)*30);width:calc(var(--u)*20);height:calc(var(--u)*30);transform-origin:0 0;transform:translateZ(calc(var(--u)*10)) rotateY(90deg);background:repeating-linear-gradient(180deg,#1a1b21 0 calc(var(--u)*5),#2b2d35 calc(var(--u)*5) calc(var(--u)*6))}
.hl{left:calc(var(--u)*15.8)}.hr{left:calc(var(--u)*54.2)}
.lens{left:calc(var(--u)*15);top:calc(var(--u)*64);width:calc(var(--u)*40);height:calc(var(--u)*20);margin-top:calc(var(--u)*-10);border-radius:50%;
  background:radial-gradient(circle,#fff 0,#dfe6ff 18%,#0b0c10 19%) , repeating-radial-gradient(circle,#0b0c10 0 calc(var(--u)*2),#cfd9ff calc(var(--u)*2) calc(var(--u)*3));
  background:radial-gradient(circle at 50% 50%,#ffffff 0,#cfd9ff 38%,#5f7fff 70%,#14151a 72%);
  border:1px solid #b9bdc7;transform:rotateX(90deg)}
/* sin JavaScript o con «reducir movimiento»: ángulos fijos */
.w1 .pan{transform:rotateY(-28deg)}.w3 .pan{transform:rotateY(28deg)}
.tilt{transform:rotateX(44deg)}
.beam{--bw:min(30vw,340px);position:absolute;left:calc(var(--u)*35);top:calc(var(--u)*64);width:0;height:0;transform-style:preserve-3d}
.beam i{position:absolute;left:calc(var(--bw)/-2);top:0;width:var(--bw);height:112svh;transform-origin:50% 0;
  background:linear-gradient(180deg,rgba(238,242,255,.42),rgba(165,185,255,.13) 56%,transparent 90%);
  clip-path:polygon(46% 0,54% 0,100% 100%,0 100%);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent);mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent)}
.beam i+i{transform:rotateY(90deg)}
.w1{left:36%}.w2{left:50%}.w3{left:64%}
.beam{opacity:0}
.ready .b1{animation:enciende 1.6s steps(1,end) 1.5s forwards}
.ready .b2{animation:enciende 1.6s steps(1,end) 1.8s forwards}
.ready .b3{animation:enciende 1.6s steps(1,end) 2.1s forwards}
@keyframes enciende{0%{opacity:0}12%{opacity:.9}20%{opacity:.15}34%{opacity:.8}44%{opacity:.3}60%,100%{opacity:1}}
/* cabezas móviles arriba: haces a separación fija que giran en 3D */
.rig{position:absolute;top:calc(var(--truss) + var(--th));width:0;height:0;transform-style:preserve-3d}
.rig.l{left:19%}.rig.r{left:81%}
.cones{opacity:0}
.ready .rig.l .cones{animation:enciende 1.6s steps(1,end) 2.0s forwards}
.ready .rig.r .cones{animation:enciende 1.6s steps(1,end) 2.3s forwards}
.cones{position:absolute;left:calc(var(--u)*35);top:calc(var(--u)*64);width:0;height:0;transform-style:preserve-3d}
.tilt.side{transform:rotateX(0deg)}
.cone{position:absolute;left:0;top:0;width:0;height:0;transform-style:preserve-3d;transform:rotateY(var(--a)) rotateX(27deg)}
.cone i{position:absolute;left:-150px;top:0;width:300px;height:96svh;transform-origin:50% 0;
  background:linear-gradient(180deg,rgba(238,242,255,.46),rgba(165,185,255,.12) 55%,transparent 90%);
  clip-path:polygon(47% 0,53% 0,100% 100%,0 100%);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 30%,#000 70%,transparent);mask-image:linear-gradient(90deg,transparent,#000 30%,#000 70%,transparent)}
.cone i+i{transform:rotateY(90deg)}
@media(max-width:700px){.cone i{opacity:.55}}
.floor{position:absolute;left:-10%;right:-10%;bottom:-30%;height:56%;background:radial-gradient(50% 50% at 50% 50%,rgba(170,190,255,.08),transparent 70%);opacity:0;transition:opacity 2s var(--ease) 2.2s}
.ready .floor{opacity:1}
.hero-logo{height:min(27svh,240px);width:auto;max-width:78vw;margin:0 auto clamp(14px,2.6svh,26px);clip-path:inset(0 100% 0 0);transition:clip-path 1.2s var(--ease) 2.3s}
.ready .hero-logo{clip-path:inset(0 0 0 0)}
.hero h1{font-size:clamp(1.9rem,min(5.2vw,8.6svh),4.3rem);font-weight:900;line-height:.94}
.hero h1 .l{display:block;overflow:hidden;padding:.24em 0 .06em;margin-top:-.2em}
.hero h1 .l>span{display:block;transform:translateY(140%);transition:transform 1s var(--ease)}
.ready .hero h1 .l>span{transform:none}
.hero h1 .l:nth-child(1)>span{transition-delay:2.8s}
.hero h1 .l:nth-child(2)>span{transition-delay:2.95s}
.hero h1 mark{background:var(--azul);color:#fff;padding:0 .12em;margin:0 .02em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.hero .wrap{position:relative}
.hero .wrap::before{content:"";position:absolute;left:50%;top:52%;width:min(980px,130%);height:96%;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(5,5,7,.6),transparent);z-index:-1;pointer-events:none}
.hero .lead{text-shadow:0 1px 14px rgba(5,5,7,.9);color:#e4e6ee;max-width:48ch;margin:clamp(12px,2svh,20px) auto clamp(16px,3svh,26px);color:#cfd1dc;font-size:clamp(.9rem,1.15vw,1rem);line-height:1.55}
.hero .btn{opacity:0;transform:translateY(10px);transition:opacity .9s var(--ease) 3.4s,transform .9s var(--ease) 3.4s,background .25s}
.hero .lead{opacity:0;transition:opacity .9s var(--ease) 3.3s}
.ready .hero .lead,.ready .hero .btn{opacity:1;transform:none}

.fade{opacity:1}
.js .fade{opacity:0;transform:translateY(18px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--d,0s)}
.js .fade.in,.all-in .fade{opacity:1;transform:none}

/* secciones */
section{padding:clamp(64px,9vw,112px) 0;position:relative}
section h2{font-size:clamp(2.6rem,6.2vw,5rem);font-weight:900;line-height:1;margin-top:20px;text-wrap:balance}
.nosotros{border-block:1px solid var(--line);background:var(--surface)}
.nosotros .enunciado{font:300 clamp(1.7rem,3.6vw,3.05rem)/1.22 var(--texto);text-transform:none;letter-spacing:0;max-width:24em;margin-top:26px;text-wrap:balance}
.nosotros .enunciado b{font-weight:600}
.formatos{display:grid;grid-template-columns:repeat(4,1fr);margin:clamp(44px,6vw,76px) 0 0;padding:0;list-style:none;border-top:1px solid var(--edge)}
.formatos li{padding:22px 20px 0 0;font:800 clamp(1.15rem,1.85vw,1.5rem)/1.1 var(--titulo);text-transform:uppercase;letter-spacing:.015em}
@media(max-width:760px){.formatos{grid-template-columns:1fr 1fr;row-gap:8px}}

.servicios .intro{margin-bottom:40px}
.pilares{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--edge)}
.pilares h3{padding:26px 20px 30px 0;font-size:clamp(1.6rem,2.9vw,2.5rem);font-weight:900;white-space:nowrap}
@media(max-width:900px){.pilares h3{white-space:normal}}
@media(max-width:760px){.pilares{grid-template-columns:1fr}.pilares h3{padding:18px 0;border-bottom:1px solid var(--line)}}

/* carril que se desliza */
.marq{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.servicios .marq{border-block:1px solid var(--line);padding:24px 0}
.marq{cursor:grab;-webkit-user-select:none;user-select:none;touch-action:pan-y}
.marq.drag{cursor:grabbing}
.track{display:flex;width:max-content;animation:marq var(--v,60s) linear infinite;will-change:transform}
.js .track{animation:none}
.track ul{display:flex;list-style:none;margin:0;padding:0}
.track li{display:flex;align-items:center;white-space:nowrap;font:800 clamp(2rem,4.6vw,3.6rem)/1.1 var(--titulo);text-transform:uppercase;letter-spacing:.015em;padding-right:clamp(28px,4vw,56px)}
.track li::after{content:"";width:11px;height:11px;margin-left:clamp(28px,4vw,56px);border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,var(--metal) 45%,var(--metal-os));flex:none}
.track li.o{color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.95)}
@keyframes marq{to{transform:translateX(-50%)}}

.eventos .rejilla{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:clamp(150px,20vw,260px);gap:10px;margin-top:44px}
.foto{position:relative;margin:0;overflow:hidden;background:#0b0b11}
.foto img{display:block;width:100%;height:100%;object-fit:cover}
.foto:nth-child(1){grid-row:span 2}
@media(max-width:700px){.eventos .rejilla{grid-template-columns:1fr 1fr}.foto:nth-child(1){grid-column:span 2;grid-row:span 1}}


.contacto{background:radial-gradient(70% 90% at 100% 100%,rgba(185,189,199,.1),transparent 70%),var(--surface);border-top:1px solid var(--line)}
.contacto .grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(36px,7vw,100px)}
.datos{margin:34px 0 0;display:grid;gap:22px}
.datos dt{font:600 .72rem/1 var(--texto);letter-spacing:.3em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.datos dd{margin:0;font:800 1.7rem/1.1 var(--titulo);letter-spacing:.02em;text-transform:uppercase}
.datos a{text-decoration:none;border-bottom:1px solid var(--azul)}
.datos a:hover{color:var(--azul-luz)}
.redes{display:flex;gap:22px;flex-wrap:wrap;margin-top:30px}
.redes a{font:600 .74rem/1 var(--texto);letter-spacing:.22em;text-transform:uppercase;text-decoration:none;padding:8px 0;border-bottom:1px solid var(--edge);transition:border-color .2s,color .2s}
.redes a:hover{border-color:var(--azul-luz);color:var(--azul-luz)}
form{display:grid;gap:18px}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
label{font:600 .72rem/1 var(--texto);letter-spacing:.24em;text-transform:uppercase;color:var(--muted);display:block}
input,textarea,select{display:block;width:100%;margin-top:10px;background:rgba(255,255,255,.04);border:1px solid var(--edge);border-radius:2px;color:var(--text);font:400 1.05rem/1.4 var(--texto);padding:14px 16px;min-height:52px;transition:border-color .2s,background .2s}
select{appearance:none;-webkit-appearance:none;background:rgba(255,255,255,.04) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%239a9cab' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 16px center;padding-right:44px}
select option{background:#0b0b11}
input:focus,textarea:focus,select:focus{outline:0;border-color:var(--azul-luz);background-color:rgba(108,141,255,.08)}
textarea{min-height:140px;resize:vertical}
form .btn{justify-self:start;margin-top:8px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
@media(max-width:820px){.contacto .grid{grid-template-columns:1fr}.f2{grid-template-columns:1fr}}

footer{padding:30px 0 36px;color:var(--muted);font-size:.88rem;border-top:1px solid var(--line)}
footer .wrap{display:flex;justify-content:space-between;align-items:center;gap:10px 28px;flex-wrap:wrap}
.credit{letter-spacing:.2em;text-transform:uppercase;font-size:.72rem}
.legal-links{display:flex;gap:20px;flex-wrap:wrap}
.legal-links a,.consent a{text-underline-offset:3px}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .beam,.cones,.floor{opacity:1}.hero .lead,.hero .btn{opacity:1;transform:none}
  .haze{opacity:.4;animation:none}
  .rig .pan{transform:rotateY(18deg)}
  .hero-logo{clip-path:none}.hero h1 .l>span{transform:none}
  .js .fade{opacity:1;transform:none}
  .js .cases .case{opacity:1;transform:none}
  .track{width:auto;flex-wrap:wrap}.track ul[aria-hidden]{display:none}
  .marq{-webkit-mask-image:none;mask-image:none}
}

/* formulario: consentimiento, verificación y estado */
.chk{display:flex;gap:12px;align-items:flex-start;text-transform:none;letter-spacing:0;font:400 .95rem/1.5 var(--texto);color:#dfe1ea}
.chk input{width:22px;height:22px;min-height:0;margin:2px 0 0;flex:none;accent-color:var(--azul)}
.ts{min-height:0}
.f-status{min-height:1.5em;font:600 1rem/1.5 var(--texto);color:#e9ebf5}
.f-status.ok{color:#9fd8a8}
.f-status.err{color:#ffb4a8}
.f-status a{text-underline-offset:3px}
form [aria-invalid="true"]{border-color:#ff8a78}

/* instagram: enlace grande, sin cargar nada de terceros */
.insta{background:var(--surface);border-block:1px solid var(--line);padding:clamp(48px,7vw,88px) 0}
.insta-link{display:inline-flex;align-items:center;gap:clamp(14px,2vw,26px);margin-top:20px;text-decoration:none;font:900 clamp(2.2rem,7.2vw,6rem)/1 var(--titulo);text-transform:uppercase;letter-spacing:.012em;color:#fff;border-bottom:3px solid var(--azul);padding-bottom:.08em;transition:color .25s,border-color .25s}
.insta-link svg{width:.6em;height:.6em;flex:none;transition:transform .25s var(--ease)}
.insta-link:hover{color:var(--azul-luz);border-color:var(--azul-luz)}
.insta-link:hover svg{transform:translateX(8px)}

.ig-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:28px;max-width:880px}
.ig-grid[hidden]{display:none}
.ig-item{position:relative;display:block;aspect-ratio:1;overflow:hidden;background:#0b0b11}
.ig-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--ease),opacity .3s}
.ig-item:hover img,.ig-item:focus-visible img{transform:scale(1.05);opacity:.85}
@media(max-width:560px){.ig-grid{gap:6px}}

/* clips verticales (grabados con celular: se muestran como «historias»), en una tira que se desliza */
.clips{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin-top:10px;cursor:grab;touch-action:pan-x pan-y}
.clips::-webkit-scrollbar{display:none}
.clips.drag{cursor:grabbing;scroll-snap-type:none}
.clip{flex:0 0 clamp(150px,19vw,250px);position:relative;margin:0;aspect-ratio:9/16;overflow:hidden;background:#0b0b11;scroll-snap-align:start}
.clip video{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}
@media(max-width:700px){.clips{margin-inline:calc(var(--gutter)*-1);padding-inline:var(--gutter)}.clip{flex-basis:56vw}}

/* banner más sobrio: botón y bloque de texto proporcionales al logo */
.hero .btn{padding:15px 24px;min-height:46px;font-size:.74rem}

/* secuencia de entrada (≈5 s): los equipos de los extremos pasan de blanco a azul y vuelven a blanco, dos veces; luego quedan blancos */
.cone i::after{content:"";position:absolute;inset:0;opacity:0;
  background:linear-gradient(180deg,rgba(88,120,232,.7),rgba(37,71,208,.24) 55%,transparent 90%)}
.rig .lens::after{content:"";position:absolute;inset:0;border-radius:50%;opacity:0;
  background:radial-gradient(circle,#a3b5f0 0,#2a4fd2 62%,transparent 74%)}
.ready .rig .cone i::after,.ready .rig .lens::after{animation:azul 7.5s linear 3.2s both}
@keyframes azul{0%,24.21%{opacity:0;visibility:visible}32.53%,45.01%{opacity:1}53.33%,72.27%{opacity:0}80.59%,93.07%{opacity:1}99.31%{opacity:0;visibility:visible}100%{opacity:0;visibility:hidden}}

/* guion: 1) se arma la escena (truss y equipos), 2) se encienden las luces y quedan encendidas, 3) aparecen logo y texto */
.js .truss{clip-path:inset(0 50% 0 50%)}
.ready .truss{clip-path:inset(0);transition:clip-path 1.1s var(--ease) .1s}
.js .wbox{opacity:0;transform:translateY(-16px)}
.ready .wbox{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .9s var(--ease)}
.ready .rig.l .wbox{transition-delay:.55s}.ready .w1 .wbox{transition-delay:.7s}.ready .w2 .wbox{transition-delay:.85s}.ready .w3 .wbox{transition-delay:1s}.ready .rig.r .wbox{transition-delay:1.15s}
.js .lens{filter:brightness(.1)}
@keyframes lente{0%{filter:brightness(.1)}12%{filter:brightness(1)}20%{filter:brightness(.2)}34%{filter:brightness(.9)}44%{filter:brightness(.3)}60%,100%{filter:brightness(1)}}
.ready .w1 .lens{animation:lente 1.6s steps(1,end) 1.5s forwards}
.ready .w2 .lens{animation:lente 1.6s steps(1,end) 1.8s forwards}
.ready .w3 .lens{animation:lente 1.6s steps(1,end) 2.1s forwards}
.ready .rig.l .lens{animation:lente 1.6s steps(1,end) 2.0s forwards}
.ready .rig.r .lens{animation:lente 1.6s steps(1,end) 2.3s forwards}
@media(prefers-reduced-motion:reduce){.js .truss{clip-path:none}.js .wbox{opacity:1;transform:none}.js .lens{filter:none}}

/* con JavaScript activo cada haz es un único plano orientado a la cámara (el segundo plano sobra) */
.bb .cone i+i,.bb .beam i+i{display:none}
.bb .beam i{background:linear-gradient(180deg,rgba(238,242,255,.58),rgba(165,185,255,.18) 56%,transparent 90%)}
.bb .cone i{background:linear-gradient(180deg,rgba(238,242,255,.62),rgba(165,185,255,.18) 55%,transparent 90%)}

/* halos laterales más anchos y con más cuerpo: nunca deben verse como una línea */
.bb .cone i{background:linear-gradient(180deg,rgba(238,242,255,.66),rgba(185,200,255,.34) 48%,rgba(165,185,255,.12) 84%,transparent 100%)}

/* dos tipos de equipo, dos looks (los coloca site.js en 2D):
   WASH (centro): halo ancho, denso y neblinoso, sin rayos. BEAM (costados): varios rayos finos y nítidos, como los de un prisma. */
.fx2 .beam,.fx2 .cones{visibility:hidden}
.fx{position:absolute;inset:0;pointer-events:none}
.fb{position:absolute;top:0;transform-origin:50% 0;opacity:0;height:var(--L);width:calc(var(--L)*var(--k));left:calc(var(--L)*var(--k)*-.5);will-change:transform,opacity}
.fb.c{--L:min(100svh,820px);--k:.66;background:conic-gradient(from 163deg at 50% 0,transparent 0deg,rgba(160,180,255,.14) 4deg,rgba(195,210,255,.4) 10deg,rgba(230,238,255,.66) 17deg,rgba(195,210,255,.4) 24deg,rgba(160,180,255,.14) 30deg,transparent 34deg);
  -webkit-mask-image:linear-gradient(180deg,#000 0,rgba(0,0,0,.9) 38%,rgba(0,0,0,.5) 74%,transparent 100%);mask-image:linear-gradient(180deg,#000 0,rgba(0,0,0,.9) 38%,rgba(0,0,0,.5) 74%,transparent 100%)}
.fb.r{--L:min(96svh,800px);--k:.2;filter:opacity(var(--zb,1));
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 80%,transparent 100%);mask-image:linear-gradient(180deg,#000 0,#000 80%,transparent 100%)}
.fb.r::before,.fb.r::after{content:"";position:absolute;inset:0}
.fb.r::before{background:conic-gradient(from 174.3deg at 50% 0,transparent 0deg,rgba(200,215,255,.05) 2deg,rgba(215,228,255,.28) 4.6deg,rgba(240,246,255,.85) 5.3deg,#fff 5.7deg,rgba(240,246,255,.85) 6.1deg,rgba(215,228,255,.28) 6.8deg,rgba(200,215,255,.05) 9.4deg,transparent 11.4deg)}
.fb.r::after{opacity:0;background:conic-gradient(from 174.3deg at 50% 0,transparent 0deg,rgba(37,71,208,.05) 2deg,rgba(52,90,214,.3) 4.6deg,rgba(72,105,222,.88) 5.3deg,rgba(118,146,238,1) 5.7deg,rgba(72,105,222,.88) 6.1deg,rgba(52,90,214,.3) 6.8deg,rgba(37,71,208,.05) 9.4deg,transparent 11.4deg)}
/* entrada: los mismos rayos blancos viran a azul, vuelven a blanco, azul otra vez y quedan blancos */
.ready .fb.r::before{animation:blanco 7.5s linear 3.2s both}
.ready .fb.r::after{animation:azul 7.5s linear 3.2s both}
@keyframes blanco{0%,24.21%{opacity:1}32.53%,45.01%{opacity:0}53.33%,72.27%{opacity:1}80.59%,93.07%{opacity:0}99.31%,100%{opacity:1}}
.ready .fb.k1{animation:enciende 1.6s steps(1,end) 1.5s forwards}
.ready .fb.k2{animation:enciende 1.6s steps(1,end) 1.8s forwards}
.ready .fb.k3{animation:enciende 1.6s steps(1,end) 2.1s forwards}
.ready .fb.kl{animation:enciende 1.6s steps(1,end) 2.0s forwards}
.ready .fb.kr{animation:enciende 1.6s steps(1,end) 2.3s forwards}
@media(max-width:700px){.fb.c{filter:opacity(.8)}}
/* indicador de deslizar bajo los clips verticales */
.rail-hint{display:flex;align-items:center;gap:12px;margin-top:14px;color:var(--muted);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase}
.rail-hint svg{width:28px;height:10px;flex:none;animation:empuja 1.8s ease-in-out infinite}
.rail-hint.used .rh-t,.rail-hint.used svg{opacity:0;transition:opacity .5s}
.rh-bar{position:relative;flex:1;height:2px;background:rgba(255,255,255,.12);overflow:hidden}
.rh-bar b{position:absolute;top:0;height:100%;width:30%;background:#fff}
@keyframes empuja{0%,100%{transform:translateX(0)}50%{transform:translateX(7px)}}
@media(prefers-reduced-motion:reduce){.rail-hint svg{animation:none}}
.clips{-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
.clips.at-end{-webkit-mask-image:none;mask-image:none}
@media(max-width:700px){.bb .beam i{opacity:.8}.bb .cone i{opacity:.7}}

/* composición: un solo eje central en todo el sitio (igual que el hero) */
.eyebrow{justify-content:center}
.eyebrow::before{content:"";height:1px;width:48px;background:var(--azul)}
main section .wrap{text-align:center}
main section h2{text-align:center}
.nosotros .enunciado{margin-inline:auto}
.formatos li,.pilares h3{padding-inline:12px}
.formatos li{padding-top:22px}
.pilares h3{padding-block:26px 30px}
.ig-grid{margin-inline:auto}
.insta-link{margin-top:28px}
.contacto .grid{display:block}
.contacto .datos{justify-items:center}
.contacto .redes{justify-content:center}
.contacto form{max-width:720px;margin:48px auto 0;text-align:left}
.contacto .f-status{text-align:center}
footer .wrap{flex-direction:column;text-align:center;gap:10px}
footer .legal-links{justify-content:center}
@media(max-width:760px){.pilares h3{padding-inline:0}}

/* entrada: los equipos nunca vuelven a «transform:none» (evita el salto por cambio de capa al terminar) */
.ready .wbox{transform:translate3d(0,0,0)}
.wbox{will-change:transform,opacity}
.contacto form .btn{display:flex;width:fit-content;margin:8px auto 0}
.contacto form .ts{display:flex;justify-content:center}
@media(prefers-reduced-motion:reduce){.fb{opacity:1;animation:none}.fb.r::after{display:none}.fb.r::before{animation:none}}


@media(max-width:700px){.fb.r{--L:min(72svh,620px);filter:opacity(calc(var(--zb,1)*.7))}}
/* los planos 3D del método anterior ya no existen: ni siquiera la animación azul puede volver a mostrarlos */
.fx2 .cone,.fx2 .beam i{display:none}

/* line array a escala real. Referencia: L-Acoustics K2 = 1338 × 354 × 400 mm (ancho × alto × fondo), caja trapezoidal con ángulo
   entre módulos de 0,25° a 10°, laterales de aluminio fundido y frente de rejilla de acero.
   Escala: un equipo de luz mide ~55 cm (--ww = 1,75·th), así que 1 m = 3,2·th. Racimo de 6 módulos colgado del truss. */
.la{--m:calc(var(--th)*3.2);--lw:calc(var(--m)*1.338);--lh:calc(var(--m)*.354);--ld:calc(var(--m)*.4);
  position:absolute;top:calc(var(--truss) + var(--th));width:0;height:0;transform-style:preserve-3d}
.la.l{left:calc(var(--lw)*.5 + 2.2vw);transform:rotateY(11deg)}
.la.r{left:calc(100% - var(--lw)*.5 - 2.2vw);transform:rotateY(-11deg)}
.lbox{position:absolute;left:calc(var(--lw)/-2);top:0;width:var(--lw);height:calc(var(--m)*.6);transform-style:preserve-3d;perspective:3200px;perspective-origin:50% 20%}
.lbox i,.mod b{position:absolute;display:block}
/* dos cadenas con eslabones y el bastidor de vuelo (bumper) */
.chain{top:0;width:calc(var(--m)*.045);height:calc(var(--m)*.52);min-width:3px;background:repeating-linear-gradient(180deg,#b4b8c2 0 33%,#4a4d57 33% 60%,#8a8e99 60% 100%)}
.chain.a{left:20%}.chain.b{right:20%}
.bump{left:-1.5%;right:-1.5%;top:calc(var(--m)*.5);height:calc(var(--m)*.1);background:linear-gradient(180deg,#a3a7b2,#4c4f5a 55%,#2b2d34);border:1px solid #b8bcc6;box-sizing:border-box;border-radius:2px;box-shadow:0 2px 6px rgba(0,0,0,.5)}
.bump::before,.bump::after{content:"";position:absolute;top:22%;width:12%;height:56%;border-radius:50%;background:#15161a;box-shadow:inset 0 0 0 1px #6b6f7a}
.bump::before{left:14%}.bump::after{right:14%}
/* módulos anidados: cada uno cuelga del anterior y se inclina un poco más (curva del racimo) */
.mod{position:absolute;left:0;top:calc(var(--m)*.6);width:100%;height:var(--lh);transform-style:preserve-3d;transform-origin:50% 0}
.mod .mod{top:100%;left:0;transform:rotateX(-2.6deg)}
.mf{inset:0;transform:translateZ(calc(var(--ld)/2));border:1px solid #7f8490;box-sizing:border-box;border-radius:3px;
  box-shadow:inset 0 0 0 calc(var(--m)*.014) #0a0b0e,inset 0 1px 0 rgba(255,255,255,.22);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n' x='0' y='0' width='100%' height='100%'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85 1.25' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42  0 0 0 0 .45  0 0 0 0 .52  0 0 0 .95 -.4'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23n)'/%3E%3C/svg%3E"),
    repeating-linear-gradient(45deg,rgba(255,255,255,.035) 0 1px,rgba(0,0,0,.35) 1px 2px),
    repeating-linear-gradient(-45deg,rgba(255,255,255,.025) 0 1px,rgba(0,0,0,.35) 1px 2px),
    linear-gradient(180deg,#191b20,#0f1014 55%,#0a0b0d);
  background-size:160px 160px,auto,auto,auto}
/* brillo sedoso de la tela */
.mf::after{content:"";position:absolute;inset:0;border-radius:2px;background:linear-gradient(104deg,transparent 28%,rgba(255,255,255,.07) 44%,rgba(255,255,255,.02) 56%,transparent 70%)}
.ml,.mr{top:0;width:var(--ld);height:100%;transform-origin:0 50%;transform:translateZ(calc(var(--ld)/-2)) rotateY(-90deg);
  clip-path:polygon(0 8%,100% 0,100% 100%,0 92%);background:linear-gradient(90deg,#4a4e5a,#8a8f9a 40%,#666b77);border:1px solid #aeb2bc;box-sizing:border-box}
/* aluminio fundido: asa empotrada y nervios de rigging */
.ml::after,.mr::after{content:"";position:absolute;left:30%;right:30%;top:36%;height:28%;border-radius:999px;background:#17181d;box-shadow:inset 0 1px 2px #000,0 0 0 1px rgba(255,255,255,.18)}
.ml::before,.mr::before{content:"";position:absolute;left:0;right:0;top:0;height:100%;background:linear-gradient(90deg,transparent 0 12%,rgba(0,0,0,.35) 12% 14%,transparent 14% 86%,rgba(0,0,0,.35) 86% 88%,transparent 88%)}
.ml{left:0}.mr{left:var(--lw)}
/* entrada: el racimo cae y cada pieza (no el grupo 3D) hace su fundido, para que no se aplane y «salte» al terminar */
.js .lbox{transform:translateY(-16px)}
.ready .lbox{transform:translate3d(0,0,0);transition:transform .9s var(--ease) .3s}
.ready .la.r .lbox{transition-delay:.4s}
.js .lbox :is(b,i){opacity:0}
.ready .lbox :is(b,i){opacity:1;transition:opacity .7s var(--ease) .3s}
.ready .la.r .lbox :is(b,i){transition-delay:.4s}
@media(prefers-reduced-motion:reduce){.js .lbox{transform:none}.js .lbox :is(b,i){opacity:1}}
/* móvil: el racimo se reduce (≈62 %) y baja a 4 módulos para no tapar el centro */

/* cables de señal entre módulos: lazos de cable negro que cuelgan por el borde exterior */
.cab{width:calc(var(--m)*.1);height:calc(var(--m)*.17);top:calc(100% - var(--m)*.03);border:calc(var(--m)*.02) solid #1b1c21;border-top:0;border-radius:0 0 999px 999px;
  box-shadow:0 1px 0 rgba(170,175,190,.4),-1px 0 0 rgba(120,125,140,.25),1px 0 0 rgba(120,125,140,.25),inset 0 -1px 0 rgba(255,255,255,.1);transform:translateZ(calc(var(--ld)/-2 - 1px));min-width:6px}
.la.l .cab{left:calc(var(--m)*-.19)}.la.r .cab{right:calc(var(--m)*-.19)}
.cab::before{content:"";position:absolute;top:calc(var(--m)*-.02);left:calc(var(--m)*-.02);width:calc(var(--m)*.04);height:calc(var(--m)*.05);background:#17181d;border-radius:2px;box-shadow:inset 0 0 0 1px #4a4d57}
.cab::after{content:"";position:absolute;top:calc(var(--m)*-.02);right:calc(var(--m)*-.02);width:calc(var(--m)*.04);height:calc(var(--m)*.05);background:#17181d;border-radius:2px;box-shadow:inset 0 0 0 1px #4a4d57}

/* niebla DELANTE de los line array: velo de luz difusa + leve desenfoque de profundidad sobre los racimos */
.fog{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity 2.4s var(--ease) 1.1s;
  background:
    radial-gradient(14% 38% at 7% 32%,rgba(190,205,240,.085),transparent 72%),
    radial-gradient(14% 38% at 93% 32%,rgba(190,205,240,.085),transparent 72%),
    linear-gradient(90deg,rgba(185,200,235,.035),transparent 22%,transparent 78%,rgba(185,200,235,.035))}
.fog::before{content:"";position:absolute;inset:0;
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 17%,transparent 25%,transparent 75%,#000 83%,#000 100%);
  mask-image:linear-gradient(90deg,#000 0,#000 17%,transparent 25%,transparent 75%,#000 83%,#000 100%)}
.ready .fog{opacity:1}
@media(max-width:700px){.fog{background:radial-gradient(28% 34% at 9% 24%,rgba(190,205,240,.1),transparent 74%),radial-gradient(28% 34% at 91% 24%,rgba(190,205,240,.1),transparent 74%)}
  .fog::before{-webkit-mask-image:linear-gradient(90deg,#000 0,#000 24%,transparent 34%,transparent 66%,#000 76%,#000 100%);mask-image:linear-gradient(90deg,#000 0,#000 24%,transparent 34%,transparent 66%,#000 76%,#000 100%)}}

/* agarre realista (según prácticas de vuelo de L-Acoustics, d&b, Martin Audio y Meyer): tecle de cadena sujeto al truss,
   cadena de carga, grillete de arco al punto central del bastidor y cable de seguridad secundario independiente */
.hoist{left:calc(50% - var(--m)*.13);top:0;width:calc(var(--m)*.26);height:calc(var(--m)*.3);border:1px solid #6b6f7a;border-radius:calc(var(--m)*.03);
  background:repeating-linear-gradient(180deg,transparent 0 calc(var(--m)*.035),rgba(0,0,0,.4) calc(var(--m)*.035) calc(var(--m)*.042)),linear-gradient(90deg,#14151a,#3d4049 16%,#24262d 50%,#14151a)}
.hoist::before{content:"";position:absolute;left:30%;right:30%;top:calc(var(--m)*-.06);height:calc(var(--m)*.1);border:calc(var(--m)*.014) solid #b9bdc7;border-bottom:0;border-radius:999px 999px 0 0}
.hoist::after{content:"";position:absolute;left:12%;right:12%;top:38%;height:22%;border-radius:2px;background:linear-gradient(180deg,#262830,#17181d);box-shadow:inset 0 0 0 1px #5b5f6b}
.bag{left:calc(50% + var(--m)*.16);top:calc(var(--m)*.06);width:calc(var(--m)*.17);height:calc(var(--m)*.32);border:1px solid #2f3139;border-radius:2px 2px 999px 999px / 2px 2px calc(var(--m)*.07) calc(var(--m)*.07);
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.04) 0 1px,transparent 1px 3px),linear-gradient(90deg,#121317,#2a2c33 45%,#0f1014)}
.bag::before{content:"";position:absolute;left:0;right:0;top:calc(var(--m)*.045);border-top:1px dashed #5b5f6b}
.lchain{left:calc(50% - var(--m)*.012);top:calc(var(--m)*.3);width:calc(var(--m)*.024);min-width:3px;height:calc(var(--m)*.16);
  background:repeating-linear-gradient(180deg,#c3c7d1 0 30%,#4a4d57 30% 55%,#9a9ea9 55% 100%)}
.shk{left:calc(50% - var(--m)*.032);top:calc(var(--m)*.44);width:calc(var(--m)*.064);min-width:8px;height:calc(var(--m)*.1);border:calc(var(--m)*.016) solid #c3c7d1;border-radius:999px;min-height:10px;box-shadow:0 1px 3px rgba(0,0,0,.6)}
.safe{left:13%;top:0;width:calc(var(--m)*.014);min-width:2px;height:calc(var(--m)*.52);background:linear-gradient(90deg,#5b5f6b,#d3d6de,#5b5f6b)}
.safe::before,.safe::after{content:"";position:absolute;left:50%;width:calc(var(--m)*.045);min-width:6px;height:calc(var(--m)*.06);min-height:7px;margin-left:calc(var(--m)*-.0225);border:calc(var(--m)*.012) solid #c3c7d1;border-radius:999px}
.safe::before{top:0}.safe::after{bottom:calc(var(--m)*-.02)}

/* escenario: piso (último quinto) hecho de tarimas iguales de 2 × 1 m sobre un plano en perspectiva real, y charcos de luz donde cae cada haz */
.deck{position:absolute;left:0;right:0;bottom:0;height:21%;overflow:hidden;pointer-events:none;opacity:0;transition:opacity 1.6s var(--ease) .2s;perspective:560px;perspective-origin:50% -55%;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 38%,#000 100%);mask-image:linear-gradient(180deg,transparent 0,#000 38%,#000 100%)}
.ready .deck{opacity:1}
.deckplane{position:absolute;left:50%;bottom:-8%;width:320%;height:620px;margin-left:-160%;transform-origin:50% 100%;transform:rotateX(74deg);
  --u:170px;
  background:
    linear-gradient(90deg,rgba(255,255,255,.16) 0,rgba(255,255,255,.16) 3px,rgba(0,0,0,.55) 3px,rgba(0,0,0,.55) 6px,transparent 6px) 0 0/calc(var(--u)*2) var(--u),
    linear-gradient(180deg,rgba(255,255,255,.16) 0,rgba(255,255,255,.16) 3px,rgba(0,0,0,.55) 3px,rgba(0,0,0,.55) 6px,transparent 6px) 0 0/calc(var(--u)*2) var(--u),
    repeating-conic-gradient(rgba(255,255,255,.028) 0 25%,rgba(0,0,0,0) 0 50%) 0 0/calc(var(--u)*4) calc(var(--u)*2),
    linear-gradient(180deg,#171923,#20222d)}
.fp{position:absolute;left:-100px;top:-100px;width:200px;height:200px;border-radius:50%;opacity:0;pointer-events:none;will-change:transform,opacity}
.fp.c{background:radial-gradient(closest-side,rgba(228,236,255,.62),rgba(190,205,250,.26) 52%,transparent 100%)}
.fp.r{filter:opacity(var(--zb,1))}
.fp.r::before,.fp.r::after{content:"";position:absolute;inset:0;border-radius:50%}
.fp.r::before{background:radial-gradient(closest-side,#fff,rgba(225,234,255,.55) 42%,rgba(190,205,250,.16) 72%,transparent 100%)}
.fp.r::after{opacity:0;background:radial-gradient(closest-side,rgba(165,190,255,1),rgba(88,120,232,.6) 42%,rgba(37,71,208,.18) 72%,transparent 100%)}
.ready .fp.r::before{animation:blanco 7.5s linear 3.2s both}
.ready .fp.r::after{animation:azul 7.5s linear 3.2s both}
.ready .fp.k1{animation:enciende 1.6s steps(1,end) 1.5s forwards}
.ready .fp.k2{animation:enciende 1.6s steps(1,end) 1.8s forwards}
.ready .fp.k3{animation:enciende 1.6s steps(1,end) 2.1s forwards}
.ready .fp.kl{animation:enciende 1.6s steps(1,end) 2.0s forwards}
.ready .fp.kr{animation:enciende 1.6s steps(1,end) 2.3s forwards}
@media(prefers-reduced-motion:reduce){.deck{opacity:1;transition:none}.fp{opacity:1;animation:none}.fp.r::after{display:none}.fp.r::before{animation:none}}

/* pantalla LED de fondo: 9 × 4,5 m (18 × 9 gabinetes de 50 × 50 cm, 2:1), sin estructura a la vista. En móvil: 6 × 4 m (12 × 8, 3:2).
   Apagada es un objeto oscuro con uniones y malla de píxeles. */
.led{--cols:18;--rows:9;--varimg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 9' preserveAspectRatio='none'%3E%3Crect x='0' y='0' width='1' height='1' fill='white' fill-opacity='0.0040'/%3E%3Crect x='1' y='0' width='1' height='1' fill='white' fill-opacity='0.0040'/%3E%3Crect x='2' y='0' width='1' height='1' fill='white' fill-opacity='0.0099'/%3E%3Crect x='4' y='0' width='1' height='1' fill='white' fill-opacity='0.0040'/%3E%3Crect x='6' y='0' width='1' height='1' fill='white' fill-opacity='0.0066'/%3E%3Crect x='7' y='0' width='1' height='1' fill='white' fill-opacity='0.0066'/%3E%3Crect x='8' y='0' width='1' height='1' fill='white' fill-opacity='0.0040'/%3E%3Crect x='11' y='0' width='1' height='1' fill='white' fill-opacity='0.0149'/%3E%3Crect x='14' y='0' width='1' height='1' fill='white' fill-opacity='0.0066'/%3E%3Crect x='17' y='0' width='1' height='1' fill='white' fill-opacity='0.0149'/%3E%3Crect x='1' y='1' width='1' height='1' fill='white' fill-opacity='0.0066'/%3E%3Crect x='2' y='1' width='1' height='1' fill='white' fill-opacity='0.0149'/%3E%3Crect x='5' y='1' width='1' height='1' fill='white' fill-opacity='0.0040'/%3E%3Crect x='6' y='1' width='1' height='1' fill='white' fill-opacity='0.0099'/%3E%3Crect x='7' y='1' width='1' height='1' fill='white' fill-opacity='0.0149'/%3E%3Crect x='8' y='1' width='1' height='1' fill='white' fill-opacity='0.0149'/%3E%3Crect x='10' y='1' width='1' height='1' fill='white' fill-opacity='0.0099'/%3E%3Crect x='11' y='1' width='1' height='1' fill='white' fill-opacity='0.0099'/%3E%3Crect x='12' y='1' width='1' height='1' fill='white' fill-opacity='0.0099'/%3E%3Crect x='13' y='1' width='1' height='1' fill='white' fill-opacity='0.0099'/%3E%3Crect x='15' y='1' width='1' height='1' fill='white' fill-opacity='0.0099'/%3E%3Crect x='16' y='1' width='1' height='1' fill='white' fill-opacity='0.0099'/%3E%3Crect x='0' y='2' width='1' height='1' fill='white' fill-opacity='0.0040'/%3E%3Crect x='3' y='2' width='1' height='1' fill='white' fill-opacity='0.0099'/%3E%3Crect x='5' y='2' width='1' height='1' fill='white' fill-opacity='0.0040'/%3E%3Crect x='7' y='2' width='1' height='1' fill='white' fill-opacity='0.0099'/%3E%3Crect x='8' y='2' width='1' height='1' fill='white' fill-opacity='0.0040'/%3E%3Crect x='12' y='2' width='1' height='1' fill='white' fill-opacity='0.0149'/%3E%3Crect x='13' y='2' width='1' height='1' fill='white' fill-opacity='0.0040'/%3E%3Crect x='15' y='2' width='1' height='1' fill='white' fill-opacity='0.0149'/%3E%3Crect x='17' y='2' width='1' height='1' fill='white' fill-opacity='0.0099'/%3E%3Crect x='0' y='3' width='1' height='1' fill='white' fill-opacity='0.0149'/%3E%3Crect x='2' y='3' width='1' height='1' fill='white' fill-opacity='0.0099'/%3E%3Crect x='3' y='3' width='1' height='1' fill='white' fill-opacity='0.0040'/%3E%3Crect x='4' y='3' width='1' height='1' fill='white' fill-opacity='0.0066'/%3E%3Crect x='5' y='3' width='1' height='1' fill='white' fill-opacity='0.0040'/%3E%3Crect x='6' y='3' width='1' height='1' fill='white' fill-opacity='0.0066'/%3E%3Crect x='8' y='3' width='1' height='1' fill='white' fill-opacity='0.0099'/%3E%3Crect x='9' y='3' width='1' height='1' fill='white' fill-opacity='0.0149'/%3E%3Crect x='13' y='3' width='1' height='1' fill='white' fill-opacity='0.0099'/%3E%3Crect x='14' y='3' width='1' height='1' fill='white' fill-opacity='0.0149'/%3E%3Crect x='0' y='4' width='1' height='1' fill='white' fill-opacity='0.0066'/%3E%3Crect x='1' y='4' width='1' height='1' fill='white' fill-opacity='0.0149'/%3E%3Crect x='2' y='4' width='1' height='1' fill='white' fill-opacity='0.0040'/%3E%3Crect x='3' y='4' width='1' height='1' fill='white' fill-opacity='0.0099'/%3E%3Crect x='4' y='4' width='1' height='1' fill='white' fill-opacity='0.0099'/%3E%3Crect x='5' y='4' width='1' height='1' fill='white' fill-opacity='0.0066'/%3E%3Crect x='6' y='4' width='1' height='1' fill='white' fill-opacity='0.0149'/%3E%3Crect x='7' y='4' width='1' height='1' fill='white' fill-opacity='0.0066'/%3E%3Crect x='8' y='4' width='1' height='1' fill='white' fill-opacity='0.0099'/%3E%3Crect x='9' y='4' width='1' height='1' fill='white' fill-opacity='0.0149'/%3E%3Crect x='10' y='4' width='1' height='1' fill='white' fill-opacity='0.0149'/%3E%3Crect x='12' y='4' width='1' height='1' fill='white' fill-opacity='0.0040'/%3E%3Crect x='13' y='4' width='1' height='1' fill='white' fill-opacity='0.0149'/%3E%3Crect x='14' y='4' width='1' height='1' fill='white' fill-opacity='0.0040'/%3E%3Crect x='15' y='4' width='1' height='1' fill='white' fill-opacity='0.0066'/%3E%3Crect x='17' y='4' width='1' height='1' fill='white' fill-opacity='0.0099'/%3E%3Crect x='0' y='5' width='1' height='1' fill='white' fill-opacity='0.0149'/%3E%3Crect x='1' y='5' width='1' height='1' fill='white' fill-opacity='0.0099'/%3E%3Crect x='2' y='5' width='1' height='1' fill='white' fill-opacity='0.0066'/%3E%3Crect x='4' y='5' width='1' height='1' fill='white' fill-opacity='0.0066'/%3E%3Crect x='5' y='5' width='1' height='1' fill='white' fill-opacity='0.0040'/%3E%3Crect x='6' y='5' width='1' height='1' fill='white' fill-opacity='0.0099'/%3E%3Crect x='10' y='5' width='1' height='1' fill='white' fill-opacity='0.0066'/%3E%3Crect x='11' y='5' width='1' height='1' fill='white' fill-opacity='0.0099'/%3E%3Crect x='13' y='5' width='1' height='1' fill='white' fill-opacity='0.0099'/%3E%3Crect x='14' y='5' width='1' height='1' fill='white' fill-opacity='0.0066'/%3E%3Crect x='16' y='5' width='1' height='1' fill='white' fill-opacity='0.0099'/%3E%3Crect x='17' y='5' width='1' height='1' fill='white' fill-opacity='0.0066'/%3E%3Crect x='1' y='6' width='1' height='1' fill='white' fill-opacity='0.0066'/%3E%3Crect x='4' y='6' width='1' height='1' fill='white' fill-opacity='0.0099'/%3E%3Crect x='5' y='6' width='1' height='1' fill='white' fill-opacity='0.0149'/%3E%3Crect x='6' y='6' width='1' height='1' fill='white' fill-opacity='0.0149'/%3E%3Crect x='7' y='6' width='1' height='1' fill='white' fill-opacity='0.0149'/%3E%3Crect x='11' y='6' width='1' height='1' fill='white' fill-opacity='0.0040'/%3E%3Crect x='12' y='6' width='1' height='1' fill='white' fill-opacity='0.0149'/%3E%3Crect x='13' y='6' width='1' height='1' fill='white' fill-opacity='0.0066'/%3E%3Crect x='14' y='6' width='1' height='1' fill='white' fill-opacity='0.0066'/%3E%3Crect x='16' y='6' width='1' height='1' fill='white' fill-opacity='0.0149'/%3E%3Crect x='17' y='6' width='1' height='1' fill='white' fill-opacity='0.0149'/%3E%3Crect x='1' y='7' width='1' height='1' fill='white' fill-opacity='0.0099'/%3E%3Crect x='3' y='7' width='1' height='1' fill='white' fill-opacity='0.0066'/%3E%3Crect x='4' y='7' width='1' height='1' fill='white' fill-opacity='0.0040'/%3E%3Crect x='5' y='7' width='1' height='1' fill='white' fill-opacity='0.0149'/%3E%3Crect x='8' y='7' width='1' height='1' fill='white' fill-opacity='0.0040'/%3E%3Crect x='9' y='7' width='1' height='1' fill='white' fill-opacity='0.0149'/%3E%3Crect x='10' y='7' width='1' height='1' fill='white' fill-opacity='0.0040'/%3E%3Crect x='11' y='7' width='1' height='1' fill='white' fill-opacity='0.0066'/%3E%3Crect x='12' y='7' width='1' height='1' fill='white' fill-opacity='0.0040'/%3E%3Crect x='15' y='7' width='1' height='1' fill='white' fill-opacity='0.0040'/%3E%3Crect x='16' y='7' width='1' height='1' fill='white' fill-opacity='0.0040'/%3E%3Crect x='0' y='8' width='1' height='1' fill='white' fill-opacity='0.0149'/%3E%3Crect x='1' y='8' width='1' height='1' fill='white' fill-opacity='0.0099'/%3E%3Crect x='2' y='8' width='1' height='1' fill='white' fill-opacity='0.0099'/%3E%3Crect x='3' y='8' width='1' height='1' fill='white' fill-opacity='0.0149'/%3E%3Crect x='4' y='8' width='1' height='1' fill='white' fill-opacity='0.0149'/%3E%3Crect x='6' y='8' width='1' height='1' fill='white' fill-opacity='0.0099'/%3E%3Crect x='7' y='8' width='1' height='1' fill='white' fill-opacity='0.0040'/%3E%3Crect x='8' y='8' width='1' height='1' fill='white' fill-opacity='0.0040'/%3E%3Crect x='11' y='8' width='1' height='1' fill='white' fill-opacity='0.0066'/%3E%3Crect x='12' y='8' width='1' height='1' fill='white' fill-opacity='0.0066'/%3E%3Crect x='14' y='8' width='1' height='1' fill='white' fill-opacity='0.0099'/%3E%3Crect x='15' y='8' width='1' height='1' fill='white' fill-opacity='0.0040'/%3E%3Crect x='16' y='8' width='1' height='1' fill='white' fill-opacity='0.0149'/%3E%3C/svg%3E");
  position:absolute;left:50%;bottom:19.5%;height:min(57%,34vw);aspect-ratio:2/1;transform:translateX(-50%);pointer-events:none;opacity:0;transition:opacity 1.4s var(--ease) .5s}
.ready .led{opacity:1}
.lscr{position:absolute;inset:0;border-radius:2px;
  --seam:rgba(0,0,0,.65);--edge:rgba(255,255,255,.085);
  background:
    linear-gradient(115deg,rgba(255,255,255,.055) 0,rgba(255,255,255,0) 34%,rgba(255,255,255,.025) 62%,rgba(255,255,255,0) 100%),
    repeating-linear-gradient(0deg,rgba(0,0,0,.3) 0 1px,transparent 1px 3px),
    repeating-linear-gradient(90deg,rgba(0,0,0,.3) 0 1px,transparent 1px 3px),
    linear-gradient(90deg,var(--edge) 0,var(--edge) 1px,var(--seam) 1px,var(--seam) 2px,transparent 2px) 0 0/calc(100%/var(--cols)) 100%,
    linear-gradient(180deg,var(--edge) 0,var(--edge) 1px,var(--seam) 1px,var(--seam) 2px,transparent 2px) 0 0/100% calc(100%/var(--rows)),
    var(--varimg) 0 0/100% 100%,
    linear-gradient(180deg,#0b0d14,#06070b);
  box-shadow:0 0 0 1px rgba(255,255,255,.08),0 0 0 2px rgba(0,0,0,.6),0 0 60px rgba(90,110,190,.06)}
.lglow{position:absolute;inset:-14%;opacity:0;background:radial-gradient(closest-side,rgba(200,215,255,.55),rgba(120,150,255,.3) 38%,rgba(80,110,230,.1) 68%,transparent 100%)}
.llogo{position:absolute;inset:0;opacity:0;
  filter:drop-shadow(0 0 1px rgba(255,255,255,.95)) drop-shadow(0 0 9px rgba(205,220,255,.5)) drop-shadow(0 0 30px rgba(120,150,255,.3))}
/* blanco LED: núcleo sólido y nítido, con una malla de píxeles apenas visible */
.llogo::before{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.13) 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,rgba(0,0,0,.13) 0 1px,transparent 1px 3px),#fff;
  -webkit-mask:url(../img/logo-blanco.png) center/auto 66% no-repeat;mask:url(../img/logo-blanco.png) center/auto 66% no-repeat}
/* entrada: la pantalla enciende con el logo de T60, parpadea, y se apaga a oscuro cuando entra el logo frontal */
.ready .llogo,.ready .lglow{animation:ledlogo 1.7s linear .8s both}
@keyframes ledlogo{0%{opacity:0}4%{opacity:1}8%{opacity:.2}12%{opacity:1}16%{opacity:.45}20%,58%{opacity:1}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.led{opacity:1;transition:none}.llogo,.lglow{animation:none;opacity:0}}

/* contacto compacto: todo el formulario, con su botón, a la vista sin tener que bajar */
.contacto{padding-block:clamp(34px,3.8vw,56px)}
.contacto h2{font-size:clamp(2rem,3.9vw,3.1rem);margin-top:12px}
.contacto .datos{margin-top:18px;gap:14px}
.contacto .datos dd{font-size:1.5rem}
.contacto .redes{margin-top:14px}
.contacto .redes a{padding:5px 0}
.contacto form{margin-top:20px;gap:11px}
.contacto .f2{gap:11px}
.contacto input,.contacto select,.contacto textarea{margin-top:8px;padding:10px 14px;min-height:44px}
.contacto textarea{min-height:76px}
.contacto form .btn{margin-top:4px}

/* rendimiento: aislamiento del escenario y modo ligero (solo se activa solo si el equipo va justo) */
.stage{contain:layout paint}
html.lite .fog,html.lite .grain{display:none}
html.lite .haze{animation:none}
html.lite .lscr{box-shadow:0 0 0 1px rgba(255,255,255,.08)}
html.lite2 .fb.off,html.lite2 .fp.off{display:none}
html.lite2 .llogo{filter:none}

/* equipos más realistas: cabeza de 10 caras (cuerpo cilíndrico), aro de lente, tapa trasera con ventilador, brazos redondeados con motor de pivote */
.hs{left:calc(var(--u)*(35 - var(--w)/2));top:calc(var(--u)*28);width:calc(var(--u)*var(--w));height:calc(var(--u)*34);
  transform:translate3d(calc(var(--u)*var(--x)),0,calc(var(--u)*var(--z))) rotateY(var(--a));
  background:linear-gradient(180deg,var(--c1),var(--c2));border-left:1px solid rgba(0,0,0,.35);border-right:1px solid rgba(255,255,255,.05);box-sizing:border-box}
.hs::before{content:"";position:absolute;left:0;right:0;top:0;height:calc(var(--u)*3);background:linear-gradient(180deg,rgba(255,255,255,.14),transparent);border-radius:1px}
.hs::after{content:"";position:absolute;left:0;right:0;bottom:0;height:calc(var(--u)*4);background:linear-gradient(0deg,rgba(0,0,0,.45),transparent)}
.hs.vent{background:repeating-linear-gradient(180deg,rgba(0,0,0,.55) 0 calc(var(--u)*.7),transparent calc(var(--u)*.7) calc(var(--u)*2.4)),linear-gradient(180deg,var(--c1),var(--c2))}
.hs.lab::before{height:auto;left:18%;right:18%;top:38%;bottom:auto;height:calc(var(--u)*7);background:linear-gradient(180deg,#d9dce6,#9ea2ad);border-radius:1px;opacity:.55}
.hcap,.bez{left:calc(var(--u)*(35 - 18));width:calc(var(--u)*36);height:calc(var(--u)*22);transform:rotateX(90deg);border-radius:50%}
.hcap{top:calc(var(--u)*(28 - 11));background:radial-gradient(circle,#0a0a0d 0 16%,#3a3d46 18% 22%,#101116 24% 46%,#262830 48% 52%,#15161b 54% 100%);border:1px solid #5b5f6b}
.bez{left:calc(var(--u)*(35 - 20.2));width:calc(var(--u)*40.4);height:calc(var(--u)*25);top:calc(var(--u)*(62.6 - 12.5));background:radial-gradient(closest-side,#0b0c10 0 80%,#9aa0ac 84%,#3a3d46 92%,#14151a 100%)}
.lens{left:calc(var(--u)*17.4);top:calc(var(--u)*(63.2 - 10));width:calc(var(--u)*35.2);height:calc(var(--u)*20);margin-top:0;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,#ffffff 0,#e3eaff 22%,#b6c6ff 40%,#5f7fff 68%,#23273b 70%),repeating-radial-gradient(circle at 50% 50%,rgba(0,0,0,.28) 0 1.2px,transparent 1.2px 4px);
  background-blend-mode:normal;border:1px solid #cfd2dc;transform:rotateX(90deg)}
/* beam: cabeza más esbelta y lente más chica que el wash */
.rig .head{transform-origin:calc(var(--u)*35) calc(var(--u)*45);transform:scale3d(.82,.96,.82)}
.rig .lens{background:radial-gradient(circle at 50% 50%,#ffffff 0,#f2f5ff 30%,#cfd9ff 52%,#4a64d8 70%,#1b1f30 72%)}
/* brazos: esquinas redondeadas y motor del pivote con anillos */
.arm .f{border-radius:calc(var(--u)*3.2) calc(var(--u)*3.2) calc(var(--u)*6) calc(var(--u)*6)}
.arm.l .o::after,.arm.r .o::after{width:calc(var(--u)*8.5);height:calc(var(--u)*8.5);margin-left:calc(var(--u)*-4.25);top:calc(var(--u)*27 - 1px);
  background:radial-gradient(circle at 50% 50%,#2a2c34 0 14%,#b9bdc7 16% 21%,#23252c 23% 48%,#6b6f7a 50% 56%,#17181d 58% 100%);box-shadow:0 0 0 1px #8a8e9a}
.arm .o{background:repeating-linear-gradient(180deg,rgba(0,0,0,.35) 0 calc(var(--u)*.6),transparent calc(var(--u)*.6) calc(var(--u)*2.2)) 0 0/100% calc(var(--u)*14) no-repeat,linear-gradient(180deg,#3a3d46,#1c1d23)}
.bridge{border-radius:calc(var(--u)*2.4);background:linear-gradient(180deg,#4a4d58,#23252c 60%,#1a1b21)}
/* el checkbox de consentimiento no debe heredar la altura de los campos de texto */
.contacto .chk input{width:22px;height:22px;min-height:0;margin:1px 0 0;padding:0;flex:none}
.contacto .chk{align-items:flex-start}

/* móvil: «alejar la cámara». Todo el escenario usa la escala de escritorio, solo que más pequeño (--th sale del ancho de pantalla) */
@media(max-width:700px){
  .stage{--th:clamp(13px,4.1vw,24px)}
  .la .mod .mod .mod .mod .mod{display:none}
  .led{height:min(57%,38vw);bottom:20.5%}
  .la.l{left:calc(var(--lw)*.5 + 2.4vw)}.la.r{left:calc(100% - var(--lw)*.5 - 2.4vw)}
  .fb.c{--k:.4;background:conic-gradient(from 169deg at 50% 0,transparent 0deg,rgba(160,180,255,.14) 3deg,rgba(195,210,255,.4) 6deg,rgba(230,238,255,.66) 11deg,rgba(195,210,255,.4) 16deg,rgba(160,180,255,.14) 19deg,transparent 22deg)}
}

/* móvil: equipos más cerca del centro (el wash central no se mueve) y perspectiva proporcional al ancho para que los racimos se vean como en escritorio */
@media(max-width:700px){
  .stage{perspective:calc(100vw*.764)}
  .w1{left:40%}.w3{left:60%}
  .rig.l{left:27%}.rig.r{left:73%}
  .wbox{perspective:calc(var(--ww)*30)}
  .lbox{perspective:calc(100vw*2.2)}
  .la{--m:calc(var(--th)*2.85)}
  .la.l{left:calc(var(--lw)*.5 + 5.2vw)}.la.r{left:calc(100% - var(--lw)*.5 - 5.2vw)}
}