@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:#1F4DFF; --azul-luz:#6C8DFF; --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:#3d63ff;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:12%}.rig.r{left:88%}
.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}.rig.l{left:7%}.rig.r{left:93%}}
.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(96,136,255,.7),rgba(31,77,255,.24) 55%,transparent 90%)}
.rig .lens::after{content:"";position:absolute;inset:0;border-radius:50%;opacity:0;
  background:radial-gradient(circle,#a9bcff 0,#2f5bff 62%,transparent 74%)}
.ready .rig .cone i::after,.ready .rig .lens::after{animation:azul 5.2s linear 3.2s both}
@keyframes azul{0%,8%{opacity:0;visibility:visible}20%,38%{opacity:1}50%,60%{opacity:0}72%,90%{opacity:1}99%{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%)}