/* ============================================================
   PUNTO CERO — "VIDRIO SOBRE LUZ"
   Intro-lente intacta · resto: glassmorphism editorial
   ============================================================ */
:root{
  --bg:#050505; --bg-2:#000; --ink:#fff; --mut:#a3a3a3; --dim:#5f5f5f;
  --line:rgba(255,255,255,.08);
  --red:#FF0000;
  --glass:rgba(255,255,255,.05);
  --glass-2:rgba(255,255,255,.025);
  --gbord:rgba(255,255,255,.10);
  --ghigh:rgba(255,255,255,.16);
  --blur:20px;
  --rad:22px;
  --font-d:'Archivo',Helvetica,sans-serif; --font-m:'IBM Plex Mono',monospace;
  --ease:cubic-bezier(.16,1,.3,1); --nav-h:76px;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 30px)}
body{background:var(--bg);color:var(--ink);font-family:var(--font-d);font-size:16px;line-height:1.55;overflow-x:hidden;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
img{display:block;max-width:100%;-webkit-user-drag:none;user-select:none}
a{color:inherit} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul,ol{list-style:none}
::selection{background:var(--red);color:#fff}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}
main{position:relative;z-index:1}
[id]{scroll-margin-top:100px}

/* Grano cinematográfico */
body::after{content:"";position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E")}

/* ============================================================
   AMBIENTES — luz que el vidrio refracta (inyectado por JS)
   ============================================================ */
.ambient{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.a-orb{position:absolute;border-radius:50%;filter:blur(90px);will-change:transform;opacity:.55}
.a1{width:46vmax;height:46vmax;left:-14vmax;top:-16vmax;
  background:radial-gradient(circle,rgba(255,0,0,.16),transparent 62%);
  animation:drift1 28s ease-in-out infinite alternate}
.a2{width:40vmax;height:40vmax;right:-12vmax;top:28%;
  background:radial-gradient(circle,rgba(255,255,255,.075),transparent 60%);
  animation:drift2 34s ease-in-out infinite alternate}
.a3{width:44vmax;height:44vmax;left:16vmax;bottom:-18vmax;
  background:radial-gradient(circle,rgba(255,0,0,.11),transparent 62%);
  animation:drift3 40s ease-in-out infinite alternate}
@keyframes drift1{to{transform:translate(9vmax,7vmax) scale(1.18)}}
@keyframes drift2{to{transform:translate(-8vmax,10vmax) scale(.9)}}
@keyframes drift3{to{transform:translate(-10vmax,-8vmax) scale(1.12)}}

/* ---------- Tipografía ---------- */
.hd{font-family:var(--font-d);font-weight:850;font-stretch:114%;text-transform:uppercase;letter-spacing:-.02em;line-height:.96}
.hd em{font-style:normal;color:var(--red)}
.mono{font-family:var(--font-m);font-size:11px;letter-spacing:.18em;text-transform:uppercase}
.kdot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--red);margin-right:12px;vertical-align:middle;animation:kpulse 2.8s ease-in-out infinite;box-shadow:0 0 10px rgba(255,0,0,.6)}
@keyframes kpulse{0%,100%{transform:scale(1)}50%{transform:scale(1.35)}}
.skip{position:fixed;top:-60px;left:16px;z-index:600;background:#fff;color:#000;padding:10px 18px;font-family:var(--font-m);font-size:12px;transition:top .3s}
.skip:focus{top:12px}

/* Spotlight: luz que sigue al cursor dentro del panel */
.ql-row,.srv,.value,.wa,.filo-block,.flt,.prj-media{position:relative;overflow:hidden}
.ql-row::before,.srv::before,.value::before,.wa::before,.filo-block::before,.flt::before,.prj-media::before{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;transition:opacity .45s;
  background:radial-gradient(260px circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.10),transparent 62%)}
.ql-row:hover::before,.srv:hover::before,.srv:focus-visible::before,.value:hover::before,
.wa:hover::before,.filo-block:hover::before,.flt:hover::before,.prj-media:hover::before{opacity:1}
.ql-row>*,.srv>*{position:relative;z-index:3}

/* ---------- Reveal ---------- */
.io{transition:none}
.mask{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.mask>span{display:block;transform:translateY(115%);transition:transform 1.1s var(--ease) var(--d,0s)}
.arrived .mask>span{transform:translateY(0)}
.mask:nth-child(2)>span{transition-delay:.12s}

/* ---------- Iris (transición de página) ---------- */
.iris-hole{position:fixed;left:50%;top:50%;z-index:500;width:20px;height:20px;border-radius:50%;
  box-shadow:0 0 0 300vmax #000;border:1.5px solid var(--red);
  transform:translate(-50%,-50%) scale(var(--s,0));pointer-events:none;
  transition:transform .75s cubic-bezier(.6,0,.2,1)}
.iris-hole.no-t{transition:none}

/* ---------- Botón glass ---------- */
.btn{position:relative;isolation:isolate;display:inline-flex;align-items:center;gap:14px;padding:17px 30px;
  border:1px solid var(--gbord);border-radius:999px;color:#fff;font-family:var(--font-m);font-size:11px;letter-spacing:.24em;
  text-transform:uppercase;text-decoration:none;overflow:hidden;transition:color .35s,border-color .35s,box-shadow .35s;
  background:var(--glass);backdrop-filter:blur(var(--blur)) saturate(140%);-webkit-backdrop-filter:blur(var(--blur)) saturate(140%);
  box-shadow:inset 0 1px 0 var(--ghigh)}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:#fff;transform:scaleY(0);transform-origin:bottom;transition:transform .45s cubic-bezier(.7,0,.2,1)}
.btn:hover::before,.btn:focus-visible::before{transform:scaleY(1)}
.btn:hover,.btn:focus-visible{color:#000;border-color:#fff}
.btn svg{width:16px;height:16px;transition:transform .35s}
.btn:hover svg{transform:translateX(5px)}
.b-dot{width:7px;height:7px;border-radius:50%;background:var(--red);transition:transform .35s;box-shadow:0 0 8px rgba(255,0,0,.7)}
.btn:hover .b-dot{transform:scale(1.5)}

/* ---------- Cursor visor de cámara ---------- */
body.has-cursor,body.has-cursor a,body.has-cursor button,body.has-cursor [data-cursor],body.has-cursor .srv{cursor:none}
#cursor{position:fixed;left:0;top:0;z-index:400;width:36px;height:36px;margin:-18px 0 0 -18px;pointer-events:none;opacity:0}
.c-ring{position:absolute;inset:0;border:1.5px solid rgba(255,255,255,.85);border-radius:50%;transition:all .35s var(--ease)}
.c-ring::before,.c-ring::after{content:"";position:absolute;background:#fff;transition:opacity .3s}
.c-ring::before{left:50%;top:-7px;width:1px;height:4px;transform:translateX(-50%);box-shadow:0 40px 0 #fff}
.c-ring::after{top:50%;left:-7px;height:1px;width:4px;transform:translateY(-50%);box-shadow:40px 0 0 #fff}
.c-dot{position:absolute;left:50%;top:50%;width:4px;height:4px;margin:-2px;border-radius:50%;background:var(--red);transition:transform .3s;box-shadow:0 0 8px rgba(255,0,0,.8)}
.cursor-label{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--font-m);font-size:9px;letter-spacing:.14em;color:#fff;opacity:0;transition:opacity .25s;user-select:none}
#cursor.c-hov .c-ring{transform:scale(1.5);border-color:rgba(255,255,255,.5)}
#cursor.c-tag{width:78px;height:78px;margin:-39px 0 0 -39px}
#cursor.c-tag .c-ring{border-color:var(--red);background:rgba(255,0,0,.14)}
#cursor.c-tag .c-dot,#cursor.c-tag .c-ring::before,#cursor.c-tag .c-ring::after{opacity:0}
#cursor.c-tag .cursor-label{opacity:1}

/* ---------- Nav píldora de cristal ---------- */
#nav{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:120;
  width:min(1380px,calc(100% - 24px));display:flex;align-items:center;justify-content:space-between;
  padding:14px clamp(18px,3vw,26px);border-radius:20px;
  background:rgba(9,9,9,.55);backdrop-filter:blur(22px) saturate(150%);-webkit-backdrop-filter:blur(22px) saturate(150%);
  border:1px solid var(--gbord);box-shadow:inset 0 1px 0 var(--ghigh),0 14px 44px rgba(0,0,0,.5);
  transition:padding .4s ease,background .4s}
#nav.is-scrolled{padding-top:9px;padding-bottom:9px;background:rgba(6,6,6,.74)}
.nav-brand{display:flex;align-items:center;gap:14px;text-decoration:none}
.nav-brand .mono{font-size:10px;letter-spacing:.3em}
.logo-nav{height:32px;width:auto;object-fit:contain}
.nav-links{display:flex;gap:clamp(14px,2.2vw,30px)}
.nav-link{position:relative;text-decoration:none;color:var(--mut);font-size:10px;padding:8px 2px;transition:color .3s}
.nav-link::before{content:"";position:absolute;left:-13px;top:50%;width:6px;height:6px;border-radius:50%;background:var(--red);transform:translateY(-50%) scale(0);transition:transform .3s var(--ease);box-shadow:0 0 8px rgba(255,0,0,.7)}
.nav-link:hover{color:#fff}
.nav-link.is-active{color:#fff}
.nav-link.is-active::before{transform:translateY(-50%) scale(1)}

/* ---------- Botón ACCEDER (nav) ---------- */
#nav .nav-links a.nav-cta{
  display:inline-flex;align-items:center;gap:10px;
  padding:10px 22px;border-radius:999px;
  border:1px solid rgba(255,0,0,.55);
  background:rgba(255,0,0,.09);color:#fff;
  text-decoration:none;
  font-family:var(--font-m);font-size:10px;
  letter-spacing:.2em;text-transform:uppercase;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
  transition:background .3s,border-color .3s,transform .3s,box-shadow .3s;
}
#nav .nav-links a.nav-cta i{
  width:6px;height:6px;border-radius:50%;flex:none;
  background:var(--red);box-shadow:0 0 8px rgba(255,0,0,.8);
  animation:kpulse 2.8s ease-in-out infinite;
}
#nav .nav-links a.nav-cta::before{content:none;display:none}
#nav .nav-links a.nav-cta:hover{
  background:var(--red);border-color:var(--red);
  transform:translateY(-2px);
  box-shadow:0 10px 30px rgba(255,0,0,.35);
}
#mnav nav a[href*="panel"]{color:var(--red)}
.menu-open #mnav nav a:nth-child(7){transition-delay:.45s}

#burger{display:none;flex-direction:column;gap:7px;padding:10px;z-index:130}
#burger span{display:block;width:26px;height:1.5px;background:#fff;transition:transform .4s var(--ease)}
.menu-open #burger span:first-child{transform:translateY(4.25px) rotate(45deg)}
.menu-open #burger span:last-child{transform:translateY(-4.25px) rotate(-45deg)}
#mnav{position:fixed;inset:0;z-index:110;background:rgba(5,5,5,.88);backdrop-filter:blur(24px) saturate(140%);-webkit-backdrop-filter:blur(24px) saturate(140%);
  display:flex;flex-direction:column;justify-content:center;padding:0 clamp(24px,8vw,60px);
  clip-path:inset(0 0 100% 0);transition:clip-path .6s cubic-bezier(.7,0,.2,1);visibility:hidden}
.menu-open #mnav{clip-path:inset(0);visibility:visible}
#mnav nav{display:flex;flex-direction:column;gap:2px}
#mnav nav a{display:flex;align-items:baseline;gap:18px;text-decoration:none;font-family:var(--font-d);font-weight:850;font-stretch:114%;
  text-transform:uppercase;font-size:clamp(2rem,9vw,3.6rem);line-height:1.15;color:#fff;opacity:0;transform:translateY(24px);
  transition:opacity .5s ease,transform .6s var(--ease),color .3s}
#mnav nav a .mono{color:var(--dim);font-size:11px}
#mnav nav a:hover{color:var(--red)}
.menu-open #mnav nav a{opacity:1;transform:none}
.menu-open #mnav nav a:nth-child(1){transition-delay:.15s}.menu-open #mnav nav a:nth-child(2){transition-delay:.2s}
.menu-open #mnav nav a:nth-child(3){transition-delay:.25s}.menu-open #mnav nav a:nth-child(4){transition-delay:.3s}
.menu-open #mnav nav a:nth-child(5){transition-delay:.35s}.menu-open #mnav nav a:nth-child(6){transition-delay:.4s}
.mnav-foot{position:absolute;bottom:30px;left:clamp(24px,8vw,60px);color:var(--dim)}
html.menu-open,body.menu-open{overflow:hidden}

/* ============================================================
   EL LENTE — intacto (barril metálico, iris, reflejos)
   ============================================================ */
.lens{position:absolute;left:50%;top:42%;width:min(66vmin,560px);aspect-ratio:1;transform:translate(-50%,-50%);will-change:transform}
.lens-halo{position:absolute;inset:-18%;border-radius:50%;z-index:0;pointer-events:none;
  background:radial-gradient(circle,rgba(255,255,255,.07),transparent 60%),
             radial-gradient(circle at 66% 74%,rgba(255,0,0,.06),transparent 46%)}
.lens-barrel{position:absolute;inset:0;border-radius:50%;z-index:1;
  background:conic-gradient(from 205deg,
    #414147,#121215 18%,#4e4e55 32%,#0e0e11 48%,#3b3b41 62%,#111114 76%,#48484f 88%,#414147);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.16),
    inset 0 2px 3px rgba(255,255,255,.28),
    inset 0 -3px 6px rgba(0,0,0,.9),
    inset 0 0 0 6px rgba(255,255,255,.05),
    inset 0 0 0 8px #08080a,
    inset 0 0 0 9px rgba(255,255,255,.08),
    inset 0 0 0 34px #141418,
    inset 0 0 0 35px rgba(255,255,255,.05),
    0 34px 90px rgba(0,0,0,.85)}
.lens-barrel::after{content:"";position:absolute;inset:2px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 30% 14%,rgba(255,255,255,.16),transparent 26%),
             radial-gradient(circle at 72% 90%,rgba(255,0,0,.10),transparent 22%)}
.lens-grip{position:absolute;inset:8px;border-radius:50%;opacity:.95;pointer-events:none;
  background:repeating-conic-gradient(rgba(255,255,255,.13) 0deg .7deg,rgba(0,0,0,.45) .7deg 2.2deg,rgba(255,255,255,.06) 2.2deg 2.9deg,rgba(0,0,0,.4) 2.9deg 4.6deg);
  -webkit-mask:radial-gradient(circle,transparent 0 81%,#000 82% 100%);
  mask:radial-gradient(circle,transparent 0 81%,#000 82% 100%);
  animation:spin 90s linear infinite}
.lens-rot{position:absolute;inset:4%;z-index:2;pointer-events:none;animation:spin 70s linear infinite}
.lens-ticks{position:absolute;inset:0;border-radius:50%;border:1px dashed rgba(255,255,255,.20)}
.lens-ticks.t2{inset:5.5%;border-style:solid;border-color:rgba(255,255,255,.08);animation:spin 90s linear infinite reverse}
.lens-text{position:absolute;inset:3%;z-index:2;pointer-events:none;animation:spin 60s linear infinite reverse}
.lens-text text{font-family:var(--font-m);font-size:6.3px;letter-spacing:3px;fill:rgba(255,255,255,.42)}
.lens-glass{position:absolute;inset:13.5%;border-radius:50%;overflow:hidden;z-index:3;
  background:
    radial-gradient(circle at 30% 22%,rgba(255,255,255,.15),transparent 24%),
    radial-gradient(circle at 74% 86%,rgba(255,0,0,.08),transparent 30%),
    radial-gradient(circle at 50% 50%,#020203 0%,#050507 32%,#0a0b0e 54%,#14151a 72%,#08090c 88%,#030304 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.10),
    inset 0 0 0 10px rgba(0,0,0,.92),
    inset 0 0 0 11px rgba(255,255,255,.06),
    inset 0 28px 60px rgba(0,0,0,.85),
    inset 0 -16px 44px rgba(255,255,255,.03);
  transition:filter .6s}
.lens:hover .lens-glass{filter:brightness(1.22)}
.lens-glass::before{content:"";position:absolute;left:-70%;top:-25%;width:65%;height:150%;z-index:5;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.14) 45%,transparent 72%);
  transform:rotate(16deg);animation:glint 8s ease-in-out infinite;pointer-events:none}
@keyframes glint{0%,58%{left:-70%}78%,100%{left:140%}}
.refl{position:absolute;left:11%;top:7%;width:40%;height:26%;border-radius:50%;z-index:4;
  background:radial-gradient(ellipse at 42% 40%,rgba(255,255,255,.30),rgba(255,255,255,.06) 55%,transparent 75%);
  transform:rotate(-22deg);filter:blur(3px);pointer-events:none}
.refl::after{content:"";position:absolute;right:4%;bottom:6%;width:16%;height:22%;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.55),transparent 70%);filter:blur(1px)}
.blades{position:absolute;inset:0;display:block}
.blade{position:absolute;left:50%;top:50%;width:62%;height:62%;margin:-31% 0 0 -31%;border-radius:50%;
  background:radial-gradient(circle at 50% 16%,#17181d 0%,#0b0c0f 44%,#060708 80%,#040405 100%);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 8px 20px rgba(0,0,0,.55),inset 0 -1px 0 rgba(255,255,255,.17),inset 0 1px 0 rgba(255,255,255,.05);
  transform:rotate(var(--a)) translateY(0);
  transition:transform 1.4s cubic-bezier(.6,0,.2,1) .75s}
.arrived .blade{transform:rotate(var(--a)) translateY(-93%)}
.core{position:absolute;left:50%;top:50%;width:30px;height:30px;transform:translate(-50%,-50%);z-index:6}
.core i{position:absolute;inset:5px;border-radius:50%;background:var(--red);
  box-shadow:0 0 2px rgba(255,0,0,.9),0 0 18px rgba(255,0,0,.55);
  transform:scale(0);transition:transform .65s cubic-bezier(.3,1.5,.5,1) 1.8s}
.arrived .core i{transform:scale(1)}
.arrived .core i::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--red);animation:breath 3.2s ease-in-out 2.8s infinite}
@keyframes breath{0%,100%{transform:scale(1)}50%{transform:scale(1.25)}}
.pring{position:absolute;inset:5px;border-radius:50%;border:1px solid var(--red);opacity:0}
.arrived .pring{animation:pring 3.4s cubic-bezier(.2,.6,.3,1) 3s infinite}
.arrived .pring.p2{animation-delay:4.7s}
@keyframes pring{0%{transform:scale(1);opacity:.55}100%{transform:scale(5);opacity:0}}
@keyframes spin{to{transform:rotate(360deg)}}
.lens-meta{position:absolute;left:50%;bottom:-38px;transform:translateX(-50%);color:#555;font-size:9px;white-space:nowrap;z-index:2}

/* Logotipo completo + ícono dentro del lente */
.lens-logo{--dot-pos:91%;--dot-nudge:0px;
  position:absolute;left:50%;top:50%;z-index:3;
  height:clamp(84px,15vmin,140px);width:auto;
  transform:translate(calc(-50% + var(--dot-nudge)),calc(var(--dot-pos) * -1));
  opacity:0;pointer-events:none;
  filter:drop-shadow(0 8px 26px rgba(0,0,0,.55));
  transition:opacity .9s ease 2.1s}
.arrived .lens-logo{opacity:1}
.lens:hover .lens-logo{filter:drop-shadow(0 8px 26px rgba(0,0,0,.55)) brightness(1.15)}
.h-logo-main{margin:0 0 28px;width:min(92vw,840px)}
.h-logo-main img{display:block;width:100%;height:auto;filter:drop-shadow(0 12px 44px rgba(0,0,0,.6))}

/* ---------- Hero (intacto) ---------- */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;
  align-items:center;justify-content:flex-end;overflow:hidden;background:var(--bg-2);padding:0 20px 15vh}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.08) 1px,transparent 1.4px);background-size:36px 36px;
  -webkit-mask-image:radial-gradient(62% 58% at 50% 44%,#000 25%,transparent 78%);
  mask-image:radial-gradient(62% 58% at 50% 44%,#000 25%,transparent 78%)}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(520px circle at var(--mx,50%) var(--my,42%),rgba(255,60,60,.05),transparent 70%)}
.hero-core{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;z-index:2}
.h-sub{margin-top:16px;color:var(--mut);letter-spacing:.55em;text-indent:.55em}
.h-tag{display:flex;align-items:center;gap:18px;margin-top:30px;font-weight:700;font-stretch:110%;
  text-transform:uppercase;font-size:clamp(.8rem,2vw,1.05rem);letter-spacing:.14em}
.h-tag em{font-style:normal;color:var(--red)}
.t-line{display:block;width:clamp(20px,5vw,46px);height:1px;background:#3a3a3a}
.h-fade{opacity:0;transform:translateY(22px);transition:opacity 1s ease var(--d,0s),transform 1.1s var(--ease) var(--d,0s)}
.arrived .h-fade{opacity:1;transform:none}
.hero-foot{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:flex-end;justify-content:space-between;
  gap:20px;padding:0 clamp(20px,4.5vw,52px) 30px;z-index:2}
.h-phrase{max-width:300px;font-size:13px;color:var(--mut);text-align:left}
.scr{display:flex;flex-direction:column;align-items:center;gap:12px;text-decoration:none;will-change:transform}
.scr .mono{font-size:9px;letter-spacing:.34em;color:var(--mut)}
.scr-line{position:relative;width:1px;height:46px;background:#2c2c2c;overflow:hidden}
.scr-line::after{content:"";position:absolute;left:0;top:-45%;width:100%;height:45%;background:var(--red);animation:scrdrop 2.1s cubic-bezier(.55,0,.35,1) infinite}
@keyframes scrdrop{to{top:115%}}
.tc{display:flex;align-items:center;gap:10px;color:var(--mut);font-size:10px}
.tc i{width:8px;height:8px;border-radius:50%;background:var(--red);animation:blinkc 1.2s steps(1) infinite;box-shadow:0 0 8px rgba(255,0,0,.8)}
@keyframes blinkc{50%{opacity:.15}}

/* ---------- Ticker glass ---------- */
.marq{overflow:hidden;padding:18px 0;margin:0 clamp(16px,3vw,40px);
  border-block:1px solid var(--line);border-radius:0;
  background:var(--glass-2);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.marq-t{display:flex;width:max-content;animation:marq 26s linear infinite}
.marq:hover .marq-t{animation-play-state:paused}
.marq-g{display:flex;align-items:center;gap:34px;padding-right:34px;font-size:clamp(1.2rem,3vw,2rem);color:#4a4a4a;white-space:nowrap;font-weight:800;font-stretch:114%}
.marq-g i{width:8px;height:8px;border-radius:50%;background:var(--red);flex:none;box-shadow:0 0 10px rgba(255,0,0,.7)}
@keyframes marq{to{transform:translateX(-50%)}}

/* ---------- Secciones ---------- */
.sec{padding:clamp(90px,14vh,170px) clamp(20px,5vw,72px);position:relative}
.sec-head{position:relative;margin-bottom:clamp(48px,7vw,90px);max-width:1200px}
.sec-head--center{margin-left:auto;margin-right:auto;text-align:center}
.kicker{display:inline-flex;align-items:center;padding:11px 20px;border-radius:999px;margin-bottom:28px;
  color:var(--mut);background:var(--glass-2);border:1px solid var(--gbord);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:inset 0 1px 0 var(--ghigh)}
.sec-title{font-size:clamp(2.5rem,7.2vw,6.4rem)}
.sec-sub{margin-top:26px;max-width:44ch;color:var(--mut);font-size:clamp(.95rem,1.4vw,1.1rem)}
.sec-head--center .sec-sub{margin-left:auto;margin-right:auto}

/* ---------- Bandas de portada ---------- */
.band{min-height:64vh;display:flex;flex-direction:column;justify-content:flex-end;position:relative;
  padding:calc(var(--nav-h) + 80px) clamp(20px,5vw,72px) clamp(60px,9vh,100px);overflow:hidden}
.band::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 70% at 22% 100%,rgba(255,0,0,.10),transparent 70%)}
.band::after{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.06) 1px,transparent 1.4px);background-size:36px 36px;
  -webkit-mask-image:radial-gradient(70% 80% at 30% 100%,#000,transparent 75%);
  mask-image:radial-gradient(70% 80% at 30% 100%,#000,transparent 75%)}
.band-title{font-size:clamp(3rem,9vw,8rem);position:relative;z-index:1}
.band-sub{margin-top:22px;color:var(--mut);max-width:46ch;position:relative;z-index:1}
.band-ring{position:absolute;right:-12vmin;top:50%;width:44vmin;height:44vmin;border-radius:50%;
  border:1px dashed rgba(255,255,255,.16);animation:spin 80s linear infinite}
.band-ring::before{content:"";position:absolute;inset:14%;border-radius:50%;border:1px solid rgba(255,255,255,.07)}
.band-ring::after{content:"";position:absolute;left:50%;top:-4px;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:var(--red);box-shadow:0 0 12px rgba(255,0,0,.8)}
.band-tc{position:absolute;top:calc(var(--nav-h) + 34px);right:clamp(20px,5vw,72px);z-index:1}

/* ---------- Accesos: tarjetas de cristal con tilt ---------- */
.ql{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:1200px}
.ql-row{display:flex;flex-direction:column;align-items:flex-start;gap:12px;position:relative;
  padding:28px 28px 32px;text-decoration:none;border-radius:var(--rad);
  background:linear-gradient(150deg,var(--glass),var(--glass-2));
  border:1px solid var(--gbord);
  backdrop-filter:blur(var(--blur)) saturate(150%);-webkit-backdrop-filter:blur(var(--blur)) saturate(150%);
  box-shadow:inset 0 1px 0 var(--ghigh),0 24px 60px rgba(0,0,0,.45);
  transition:border-color .4s,box-shadow .4s,transform .2s ease-out;will-change:transform}
.ql-row:hover{border-color:rgba(255,0,0,.45);box-shadow:inset 0 1px 0 var(--ghigh),0 24px 70px rgba(0,0,0,.55),0 0 40px rgba(255,0,0,.07)}
.ql-num{color:var(--dim);font-size:11px}
.ql-name{font-size:clamp(1.6rem,3.2vw,2.5rem);font-weight:830;transition:transform .5s var(--ease)}
.ql-note{color:var(--mut);font-size:10px}
.ql-ar{position:absolute;right:24px;top:24px;width:26px;height:26px;color:#5a5a5a;transition:transform .45s var(--ease),color .35s}
.ql-ar svg{width:100%;height:100%}
.ql-row:hover .ql-name{transform:translateX(10px)}
.ql-row:hover .ql-ar{transform:translate(5px,-5px);color:var(--red)}

/* ---------- Manifiesto ---------- */
.mani{height:230vh;position:relative}
.mani-sticky{position:sticky;top:0;height:100vh;height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4vh;padding:0 6vw;text-align:center}
.mani-l1,.mani-l2{font-size:clamp(1.9rem,6.4vw,5.4rem);max-width:16ch}
.mani .w{display:inline-block;margin:0 .14em;opacity:.06;will-change:opacity,filter}
.mani .rw{color:var(--red);text-shadow:0 0 40px rgba(255,0,0,.35)}

/* ---------- Lab ---------- */
.lab{padding:clamp(90px,14vh,170px) 0}
.lab .sec-head{padding:0 clamp(20px,5vw,72px)}
#labCanvas{display:block;width:100%;height:clamp(400px,68vh,640px);touch-action:pan-y;
  background:var(--glass-2);border-block:1px solid var(--line)}
.lab-foot{padding:34px clamp(20px,5vw,72px) 0;text-align:center}
.lab-code{font-size:clamp(1.1rem,3vw,1.8rem);letter-spacing:.06em;color:#e8e8e8;display:flex;align-items:center;justify-content:center;gap:16px;
  font-family:var(--font-m)}
.caret{width:11px;height:1.3em;background:var(--red);display:inline-block;animation:blinkc 1.05s steps(1) infinite}
.lab-note{margin-top:20px;color:var(--dim);font-size:10px}

/* ---------- CTA final glass ---------- */
.cta-end{text-align:center}
.cta-end .cta-kick{color:var(--mut);margin-bottom:34px}
.cta-big{display:inline-flex;flex-direction:column;align-items:center;gap:22px;text-decoration:none;
  font-size:clamp(2.6rem,9vw,7rem);padding:clamp(36px,6vw,70px) clamp(30px,7vw,90px);border-radius:calc(var(--rad) * 1.8);
  background:linear-gradient(150deg,var(--glass),var(--glass-2));border:1px solid var(--gbord);
  backdrop-filter:blur(var(--blur)) saturate(150%);-webkit-backdrop-filter:blur(var(--blur)) saturate(150%);
  box-shadow:inset 0 1px 0 var(--ghigh),0 30px 80px rgba(0,0,0,.5);
  transition:transform .5s var(--ease),border-color .4s,box-shadow .4s}
.cta-big svg{width:clamp(30px,5vw,52px);height:clamp(30px,5vw,52px);color:var(--red);transition:transform .5s var(--ease)}
.cta-big:hover{transform:scale(1.02);border-color:rgba(255,0,0,.4);box-shadow:inset 0 1px 0 var(--ghigh),0 30px 90px rgba(0,0,0,.6),0 0 60px rgba(255,0,0,.08)}
.cta-big:hover svg{transform:translateX(14px)}
.cta-note{display:block;margin-top:26px;color:var(--mut);letter-spacing:.22em}

/* ---------- Origen ---------- */
.origen-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(36px,6vw,110px);max-width:1200px}
.poema p{font-weight:750;font-stretch:110%;text-transform:uppercase;font-size:clamp(1.15rem,2.4vw,1.7rem);line-height:1.5;color:#d9d9d9;
  opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .8s var(--ease)}
.poema p:nth-child(1){transition-delay:.05s}.poema p:nth-child(2){transition-delay:.13s}.poema p:nth-child(3){transition-delay:.21s}
.poema p:nth-child(4){transition-delay:.29s}.poema p:nth-child(5){transition-delay:.37s}
.poema p:nth-child(6){transition-delay:.5s}.poema p:nth-child(7){transition-delay:.63s}
.io.in .poema p{opacity:1;transform:none}
.poema-gap{margin-top:1.2em;color:var(--mut)!important;font-weight:500!important}
.poema-red{color:var(--red)!important;text-shadow:0 0 30px rgba(255,0,0,.25)}
.origen-lead{font-size:clamp(1.1rem,1.9vw,1.45rem);line-height:1.55;color:#c9c9c9;max-width:44ch}
.origen-lead+.origen-lead{margin-top:1.1em;color:var(--mut)}
.origen-lead strong{color:#fff;font-weight:700}
.chain{display:flex;align-items:center;justify-content:center;gap:clamp(10px,2.4vw,22px);max-width:880px;margin:clamp(70px,10vh,130px) auto 0;white-space:nowrap}
.ch-node{width:14px;height:14px;display:grid;place-items:center;flex:none}
.ch-node i{width:12px;height:12px;border-radius:50%;background:var(--red);box-shadow:0 0 12px rgba(255,0,0,.7);opacity:0;transform:scale(0);transition:opacity .5s,transform .6s cubic-bezier(.3,1.4,.5,1) .15s}
.ch-line{display:block;width:clamp(26px,7vw,90px);height:1px;background:rgba(255,255,255,.18);transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease)}
.ch-line:nth-of-type(1){transition-delay:.4s}.ch-line:nth-of-type(3){transition-delay:.9s}.ch-line:nth-of-type(5){transition-delay:1.4s}
.ch-word{color:var(--mut);opacity:0;transform:translateX(-8px);transition:opacity .6s ease,transform .7s var(--ease)}
.ch-word:nth-of-type(2){transition-delay:.65s;color:#fff}.ch-word:nth-of-type(4){transition-delay:1.15s}
.ch-word:nth-of-type(6){transition-delay:1.65s;color:var(--red)}
.chain.io.in .ch-node i{opacity:1;transform:scale(1)}
.chain.io.in .ch-line{transform:scaleX(1)}
.chain.io.in .ch-word{opacity:1;transform:none}
.orb-wrap{margin-top:clamp(90px,13vh,160px);text-align:center}
.orb-title{font-size:clamp(2.4rem,7vw,5.6rem);display:inline-flex;align-items:center;gap:26px}
.orb-dot{width:clamp(16px,2.4vw,26px);height:clamp(16px,2.4vw,26px);border-radius:50%;background:var(--red);flex:none;animation:kpulse 3s ease-in-out infinite;box-shadow:0 0 24px rgba(255,0,0,.6)}
.orb{position:relative;height:clamp(300px,44vh,440px);max-width:980px;margin:26px auto 0;border-radius:var(--rad);
  background:linear-gradient(150deg,var(--glass),var(--glass-2));border:1px solid var(--gbord);
  backdrop-filter:blur(var(--blur)) saturate(150%);-webkit-backdrop-filter:blur(var(--blur)) saturate(150%);
  box-shadow:inset 0 1px 0 var(--ghigh),0 24px 70px rgba(0,0,0,.45)}
.orb-word{position:absolute;transform:translate(-50%,-50%);white-space:nowrap;font-family:var(--font-m);
  font-size:clamp(10px,1.6vw,14px);letter-spacing:.3em;color:#d6d6d6;opacity:0;filter:blur(6px);
  transition:opacity .7s ease,filter .7s ease;pointer-events:none}
.orb-word.on{opacity:1;filter:blur(0)}
.orb-note{margin-top:18px;color:var(--dim);font-size:10px}

/* ---------- Servicios: barras de cristal ---------- */
.band .srv-count{display:flex;align-items:flex-end;gap:16px;margin-top:26px;position:relative;z-index:1}
.srv-count-num{font-size:clamp(3rem,7vw,6rem);line-height:.85;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.35);font-variant-numeric:tabular-nums}
.srv-count-lbl{color:var(--dim);font-size:10px;line-height:1.7;padding-bottom:6px}
.srv-list{display:grid;gap:14px;max-width:1200px}
.srv{display:grid;grid-template-columns:22px 64px 1fr minmax(230px,30%) 44px;align-items:center;
  gap:clamp(12px,2.5vw,30px);padding:clamp(20px,3vw,30px) clamp(18px,2.5vw,28px);border-radius:18px;
  background:linear-gradient(150deg,var(--glass),var(--glass-2));border:1px solid var(--gbord);
  backdrop-filter:blur(var(--blur)) saturate(150%);-webkit-backdrop-filter:blur(var(--blur)) saturate(150%);
  box-shadow:inset 0 1px 0 var(--ghigh);
  transition:opacity .8s ease,transform .9s var(--ease),border-color .4s,background .4s}
.srv:hover,.srv:focus-visible{border-color:rgba(255,0,0,.4);background:rgba(255,255,255,.07)}
.srv.io{opacity:0;transform:translateY(30px)}
.srv.io.in{opacity:1;transform:none}
.srv-dot{width:9px;height:9px;border-radius:50%;background:var(--red);justify-self:center;transition:transform .4s cubic-bezier(.3,1.5,.5,1);box-shadow:0 0 10px rgba(255,0,0,.6)}
.srv-num{color:var(--dim);font-size:12px;transition:color .35s,transform .4s var(--ease)}
.srv-name{font-size:clamp(1.25rem,3.1vw,2.2rem);font-weight:800;transition:transform .5s var(--ease)}
.srv-desc{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--ease)}
.srv-desc>span{display:block;overflow:hidden;color:var(--mut);font-size:14px;line-height:1.5;opacity:0;transform:translateY(6px);transition:opacity .4s ease .1s,transform .5s var(--ease) .1s}
.srv-arrow{justify-self:end;color:#5a5a5a;transition:color .35s,transform .4s var(--ease)}
.srv-arrow svg{width:22px;height:22px;display:block}
.srv:hover .srv-dot,.srv:focus-visible .srv-dot{transform:scale(1.7)}
.srv:hover .srv-num,.srv:focus-visible .srv-num{color:var(--red);transform:translateX(6px)}
.srv:hover .srv-name,.srv:focus-visible .srv-name{transform:translateX(14px)}
.srv:hover .srv-desc,.srv:focus-visible .srv-desc{grid-template-rows:1fr}
.srv:hover .srv-desc>span,.srv:focus-visible .srv-desc>span{opacity:1;transform:none}
.srv:hover .srv-arrow,.srv:focus-visible .srv-arrow{color:var(--red);transform:translateX(6px)}

/* ---------- Red ---------- */
.net-block{margin-top:clamp(80px,12vh,150px);max-width:1200px}
.net{position:relative;margin-top:34px;height:clamp(360px,56vw,580px);overflow:hidden;border-radius:var(--rad);
  background:var(--glass-2);border:1px solid var(--gbord);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  box-shadow:inset 0 1px 0 var(--ghigh),0 24px 70px rgba(0,0,0,.4)}
.net::before,.net::after{content:"+";position:absolute;color:#4a4a4a;font-family:var(--font-m);font-size:14px;line-height:1;z-index:3}
.net::before{top:12px;left:16px}.net::after{bottom:12px;right:16px}
.net-px{position:absolute;inset:0;will-change:transform}
.net-svg{position:absolute;inset:0;width:100%;height:100%}
.net-svg line{stroke:rgba(255,255,255,.22);stroke-width:1;vector-effect:non-scaling-stroke;stroke-dasharray:110;stroke-dashoffset:110;
  transition:stroke-dashoffset 1.5s var(--ease) calc(.15s + var(--i,0)*.09s),stroke .35s,stroke-width .35s}
.net.io.in .net-svg line{stroke-dashoffset:0}
.net-svg line.lit{stroke:var(--red);stroke-width:1.6;filter:drop-shadow(0 0 6px rgba(255,0,0,.8))}
.net-node{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:9px;
  font-family:var(--font-m);font-size:clamp(9px,1.5vw,13px);letter-spacing:.2em;color:#cfcfcf;opacity:0;
  transition:opacity .6s ease calc(.9s + var(--i,0)*.1s),color .3s;cursor:default;z-index:2}
.net.io.in .net-node{opacity:1}
.net-node i{width:7px;height:7px;border-radius:50%;background:#e8e8e8;transition:background .3s,transform .3s,box-shadow .3s}
.net-node:hover{color:#fff}
.net-node:hover i{background:var(--red);transform:scale(1.6);box-shadow:0 0 12px rgba(255,0,0,.8)}
.net-core{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:12px;z-index:2}
.net-core i{width:16px;height:16px;border-radius:50%;background:var(--red);animation:kpulse 3s ease-in-out infinite;box-shadow:0 0 20px rgba(255,0,0,.7)}
.net-core .mono{font-size:10px;color:#fff;letter-spacing:.3em}

/* ---------- Timeline audiovisual ---------- */
.avl{margin-top:clamp(80px,12vh,150px);max-width:1100px;margin-left:auto;margin-right:auto}
.avl-cap{color:var(--mut);margin-bottom:56px}
.avl-labels{display:flex;justify-content:space-between;color:#555;font-size:10px;margin-bottom:26px}
.avl-labels span{transition:color .25s,transform .25s}
.avl-labels span.on{color:#fff;transform:translateY(-3px);text-shadow:0 0 14px rgba(255,255,255,.35)}
.avl-track{position:relative;height:1px;background:rgba(255,255,255,.15)}
.avl-dot{position:absolute;top:50%;left:50%;width:11px;height:11px;border-radius:50%;background:var(--red);transform:translate(-50%,-50%);will-change:left;box-shadow:0 0 14px rgba(255,0,0,.8)}

/* ---------- Proceso: nodos glass ---------- */
.process{padding:clamp(90px,14vh,170px) clamp(20px,5vw,72px)}
.tl{position:relative;max-width:1060px;margin:clamp(40px,7vh,90px) auto 0}
.tl-line{position:absolute;left:50%;top:10px;bottom:10px;width:1px;background:rgba(255,255,255,.12);transform:translateX(-50%)}
.tl-fill{position:absolute;inset:0;background:var(--red);transform:scaleY(0);transform-origin:top;will-change:transform;box-shadow:0 0 12px rgba(255,0,0,.6)}
.tl-dot{position:absolute;left:50%;top:0;width:15px;height:15px;border-radius:50%;background:var(--red);transform:translate(-50%,-50%);will-change:top;box-shadow:0 0 18px rgba(255,0,0,.8)}
.tl-dot::after{content:"";position:absolute;inset:-7px;border:1px solid var(--red);border-radius:50%;opacity:0}
.tl-dot.burst::after{animation:tring 1.2s ease-out forwards}
@keyframes tring{0%{transform:scale(.4);opacity:.9}100%{transform:scale(4);opacity:0}}
.tl-stages{display:flex;flex-direction:column;gap:clamp(40px,7vh,80px)}
.stage{position:relative;width:50%;padding:26px 30px;border-radius:20px;
  background:linear-gradient(150deg,var(--glass),var(--glass-2));border:1px solid var(--gbord);
  backdrop-filter:blur(var(--blur)) saturate(150%);-webkit-backdrop-filter:blur(var(--blur)) saturate(150%);
  box-shadow:inset 0 1px 0 var(--ghigh);transition:border-color .5s,box-shadow .5s}
.stage:nth-child(odd){align-self:flex-start;text-align:right;margin-right:calc(50% + 34px)}
.stage:nth-child(even){align-self:flex-end;text-align:left;margin-left:calc(50% + 34px)}
.stage.is-active{border-color:rgba(255,0,0,.4);box-shadow:inset 0 1px 0 var(--ghigh),0 0 44px rgba(255,0,0,.06)}
.st-node{position:absolute;top:32px;width:11px;height:11px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.06);transition:background .4s,border-color .4s,box-shadow .4s}
.stage:nth-child(odd) .st-node{right:calc(-34px - 5px);transform:translateX(50%)}
.stage:nth-child(even) .st-node{left:calc(-34px - 5px);transform:translateX(-50%)}
.stage.is-active .st-node{background:var(--red);border-color:var(--red);box-shadow:0 0 16px rgba(255,0,0,.8)}
.st-num{display:block;font-size:clamp(2.6rem,6vw,4.6rem);line-height:1;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.22);transition:-webkit-text-stroke-color .5s}
.stage.is-active .st-num{-webkit-text-stroke-color:var(--red)}
.st-body{margin-top:14px;opacity:.4;transform:translateY(10px);transition:opacity .6s ease,transform .7s var(--ease)}
.stage.is-active .st-body{opacity:1;transform:none}
.st-k{color:var(--dim);font-size:10px;display:block;margin-bottom:10px}
.stage h3{font-size:clamp(1.4rem,3vw,2.2rem)}
.stage p{margin-top:12px;color:var(--mut);font-size:15px;max-width:38ch;display:inline-block}

/* ---------- Filosofía: paneles glass ---------- */
.filo{max-width:1000px;margin-inline:auto;display:grid;gap:22px}
.filo-block{padding:clamp(30px,5vw,56px);border-radius:calc(var(--rad) + 4px);
  background:linear-gradient(150deg,var(--glass),var(--glass-2));border:1px solid var(--gbord);
  backdrop-filter:blur(var(--blur)) saturate(150%);-webkit-backdrop-filter:blur(var(--blur)) saturate(150%);
  box-shadow:inset 0 1px 0 var(--ghigh),0 24px 70px rgba(0,0,0,.45);transition:border-color .4s}
.filo-lbl{color:var(--mut);margin-bottom:26px}
.pull{font-size:clamp(1.6rem,4.2vw,3.2rem);max-width:24ch}
.more{display:inline-flex;align-items:center;gap:12px;margin-top:30px;padding:13px 22px;border-radius:999px;
  border:1px solid var(--gbord);color:var(--mut);font-size:10px;background:var(--glass-2);
  transition:color .3s,border-color .3s}
.more:hover,.more[aria-expanded="true"]{color:#fff;border-color:rgba(255,0,0,.5)}
.more-arrow{display:inline-block;transition:transform .4s var(--ease)}
.more[aria-expanded="true"] .more-arrow{transform:rotate(180deg)}
.more-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s var(--ease)}
.more-body>div{overflow:hidden}
.more-body p{padding-top:28px;color:#bdbdbd;font-size:15px;line-height:1.7;max-width:66ch}
.more-body p.you{color:#fff;border-left:2px solid var(--red);padding-left:16px;margin-top:16px}
.filo-block.is-open .more-body{grid-template-rows:1fr}

/* ---------- Valores: acordeón glass ---------- */
.values{display:grid;gap:14px;max-width:1200px}
.value{border-radius:18px;
  background:linear-gradient(150deg,var(--glass),var(--glass-2));border:1px solid var(--gbord);
  backdrop-filter:blur(var(--blur)) saturate(150%);-webkit-backdrop-filter:blur(var(--blur)) saturate(150%);
  box-shadow:inset 0 1px 0 var(--ghigh);transition:opacity .45s ease,border-color .4s}
.values:has(.value:hover) .value:not(:hover),
.values:has(.value:focus-within) .value:not(:focus-within){opacity:.3}
.value.is-open{border-color:rgba(255,0,0,.4)}
.value-head{width:100%;display:flex;align-items:center;gap:clamp(14px,2.5vw,26px);padding:clamp(18px,2.8vw,26px) clamp(18px,3vw,28px);text-align:left}
.v-dot{flex:none;width:10px;height:10px;border-radius:50%;background:var(--red);transform:scale(0);transition:transform .45s cubic-bezier(.3,1.5,.5,1);box-shadow:0 0 12px rgba(255,0,0,.7)}
.v-name{font-size:clamp(1.7rem,5.6vw,4rem);font-weight:830;color:#e6e6e6;transition:transform .5s var(--ease),color .35s}
.v-idx{margin-left:auto;color:#4a4a4a;font-size:11px}
.v-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--ease)}
.v-body-in{overflow:hidden}
.v-body-in p{color:var(--mut);font-size:15px;max-width:62ch;padding:0 clamp(18px,3vw,28px) clamp(18px,2.8vw,28px) clamp(38px,5vw,54px)}
.value.is-open .v-dot,.value-head:hover .v-dot,.value-head:focus-visible .v-dot{transform:scale(1)}
.value.is-open .v-name,.value-head:hover .v-name,.value-head:focus-visible .v-name{transform:translateX(clamp(8px,2vw,20px));color:#fff}
.value.is-open .v-body{grid-template-rows:1fr}

/* ---------- Pasos "¿qué pasa cuando nos escribes?" ---------- */
.steps{max-width:1200px;margin-bottom:clamp(40px,6vw,70px)}
.steps .kicker{margin-bottom:26px}
.steps ol{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.step{padding:26px 24px;border-radius:18px;
  background:linear-gradient(150deg,var(--glass),var(--glass-2));border:1px solid var(--gbord);
  backdrop-filter:blur(var(--blur)) saturate(150%);-webkit-backdrop-filter:blur(var(--blur)) saturate(150%);
  box-shadow:inset 0 1px 0 var(--ghigh);transition:border-color .4s,transform .4s var(--ease)}
.step:hover{border-color:rgba(255,0,0,.4);transform:translateY(-4px)}
.sp-n{color:var(--dim);font-size:11px}
.step h3{font-size:1.25rem;margin-top:12px}
.step p{margin-top:10px;color:var(--mut);font-size:14px}

/* ---------- Proyectos: marcos de cristal ---------- */
.flts{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:clamp(40px,6vw,70px)}
.flt{padding:12px 20px;border-radius:999px;color:var(--mut);font-size:10px;
  border:1px solid var(--gbord);background:var(--glass-2);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:inset 0 1px 0 var(--ghigh);
  transition:color .3s,border-color .3s,background .3s}
.flt:hover{color:#fff;border-color:rgba(255,255,255,.3)}
.flt.is-on{color:#fff;border-color:rgba(255,0,0,.55);background:rgba(255,0,0,.10)}
.prj-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,3.4vw,46px);transition:opacity .3s ease,transform .3s ease}
.prj-grid.is-fading{opacity:0;transform:translateY(10px)}
.prj{opacity:0;transform:translateY(34px);transition:opacity .8s ease,transform .9s var(--ease);cursor:pointer}
.prj.in{opacity:1;transform:none}
.prj:nth-child(2n){margin-top:clamp(30px,5vw,72px)}
.prj-media{border-radius:calc(var(--rad) + 4px);padding:10px;
  background:linear-gradient(150deg,var(--glass),var(--glass-2));border:1px solid var(--gbord);
  backdrop-filter:blur(var(--blur)) saturate(150%);-webkit-backdrop-filter:blur(var(--blur)) saturate(150%);
  box-shadow:inset 0 1px 0 var(--ghigh),0 24px 70px rgba(0,0,0,.5);
  transition:border-color .4s;will-change:transform}
.prj:hover .prj-media{border-color:rgba(255,0,0,.35)}
.prj-media img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:calc(var(--rad) - 6px);
  transform:scale(1.01);filter:grayscale(.25) contrast(1.04);transition:transform .9s var(--ease),filter .6s ease}
.prj:hover .prj-media img,.prj:focus-visible .prj-media img{transform:scale(1.05);filter:none}
.prj-media::before{border-radius:inherit;z-index:3}
.prj-scrim{position:absolute;inset:10px;border-radius:calc(var(--rad) - 6px);background:rgba(0,0,0,.42);opacity:0;transition:opacity .45s;z-index:2}
.prj-live{position:absolute;top:26px;left:26px;width:11px;height:11px;border-radius:50%;background:var(--red);opacity:0;animation:kpulse 2s ease-in-out infinite;transition:opacity .4s;z-index:4;box-shadow:0 0 10px rgba(255,0,0,.8)}
.prj:hover .prj-scrim,.prj:focus-visible .prj-scrim{opacity:1}
.prj:hover .prj-live,.prj:focus-visible .prj-live{opacity:1}
.prj-meta{display:flex;align-items:center;gap:14px;margin-top:16px;padding:0 6px}
.prj-cat{color:var(--mut);font-size:10px}
.prj-year{margin-left:auto;color:#4a4a4a;font-size:10px}
.prj-title{font-size:clamp(1.3rem,2.6vw,2rem);margin-top:6px;padding:0 6px;transition:color .3s}
.prj:hover .prj-title{color:var(--red)}

/* Lightbox glass */
.lb{position:fixed;inset:0;z-index:180;background:rgba(0,0,0,.6);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  display:grid;place-items:center;padding:clamp(14px,4vw,50px);
  clip-path:circle(0% at var(--lx,50%) var(--ly,50%));transition:clip-path .75s cubic-bezier(.7,0,.2,1);visibility:hidden}
.lb.is-open{clip-path:circle(142% at var(--lx,50%) var(--ly,50%));visibility:visible}
.lb-close{position:absolute;top:18px;right:18px;z-index:5;width:52px;height:52px;border:1px solid var(--gbord);border-radius:50%;display:grid;place-items:center;color:#fff;
  background:var(--glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  transition:background .3s,border-color .3s,transform .3s}
.lb-close:hover{background:var(--red);border-color:var(--red);transform:rotate(90deg)}
.lb-close svg{width:18px;height:18px}
.lb-panel{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);width:min(1060px,100%);max-height:86vh;align-items:center;
  padding:clamp(16px,2.5vw,28px);border-radius:calc(var(--rad) + 6px);
  background:linear-gradient(150deg,rgba(255,255,255,.07),rgba(255,255,255,.02));border:1px solid var(--gbord);
  backdrop-filter:blur(28px) saturate(150%);-webkit-backdrop-filter:blur(28px) saturate(150%);
  box-shadow:inset 0 1px 0 var(--ghigh),0 40px 100px rgba(0,0,0,.6)}
.lb-media{overflow:hidden;border-radius:var(--rad);border:1px solid var(--line)}
.lb-media img{width:100%;height:auto;max-height:78vh;object-fit:cover}
.lb-kicker{color:var(--mut);margin-bottom:20px}
.lb-info h3{font-size:clamp(1.9rem,4.6vw,3.4rem)}
.lb-desc{margin:22px 0 34px;color:var(--mut);font-size:15px;max-width:46ch}

/* ---------- Finale (contacto) — intacto ---------- */
.finale{height:300vh;position:relative}
.fin-sticky{position:sticky;top:0;height:100vh;height:100dvh;overflow:hidden;display:grid;place-items:center}
.fin-dot,.fin-ring{position:absolute;left:50%;top:50%;border-radius:50%;transform:translate(-50%,-50%);will-change:transform,opacity}
.fin-dot{width:15px;height:15px;background:var(--red);box-shadow:0 0 30px rgba(255,0,0,.7)}
.fin-ring{width:15px;height:15px;border:1px solid var(--red);opacity:0}
.fin-f1,.fin-f2{position:absolute;text-align:center;font-size:clamp(1.7rem,5.4vw,4.2rem);opacity:0;will-change:opacity,transform;padding:0 6vw}
.fin-end{position:absolute;text-align:center;opacity:0;visibility:hidden;padding:0 6vw;display:flex;flex-direction:column;align-items:center;gap:26px;will-change:opacity,transform}
.fin-tag{font-size:clamp(2.3rem,7vw,5.6rem)}
.fin-sub{color:var(--mut)}

/* ---------- Contacto: tarjetas glass ---------- */
.wa-list{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:1200px}
.wa{display:grid;grid-template-columns:1fr auto;align-items:center;gap:6px 22px;padding:clamp(28px,4vw,42px) clamp(22px,3vw,32px);
  border-radius:var(--rad);text-decoration:none;
  background:linear-gradient(150deg,var(--glass),var(--glass-2));border:1px solid var(--gbord);
  backdrop-filter:blur(var(--blur)) saturate(150%);-webkit-backdrop-filter:blur(var(--blur)) saturate(150%);
  box-shadow:inset 0 1px 0 var(--ghigh),0 24px 70px rgba(0,0,0,.45);
  transition:border-color .4s,background .4s}
.wa:hover,.wa:focus-visible{border-color:rgba(255,0,0,.45);background:rgba(255,255,255,.07)}
.wa-role{grid-column:1;color:var(--dim);font-size:10px;margin-bottom:8px}
.wa-num{grid-column:1;font-size:clamp(1.6rem,4.5vw,3.2rem);font-weight:830;transition:transform .5s var(--ease),color .3s}
.wa-ic{grid-row:1/3;grid-column:2;width:clamp(48px,6vw,60px);height:clamp(48px,6vw,60px);border:1px solid var(--gbord);border-radius:50%;
  display:grid;place-items:center;color:#fff;background:var(--glass-2);
  transition:background .35s,border-color .35s,transform .4s var(--ease)}
.wa-ic svg{width:22px;height:22px}
.wa:hover .wa-num,.wa:focus-visible .wa-num{transform:translateX(14px);color:var(--red)}
.wa:hover .wa-ic,.wa:focus-visible .wa-ic{background:var(--red);border-color:var(--red);transform:scale(1.08)}

/* ---------- Footer ---------- */
.footer{position:relative;z-index:1;padding:0 clamp(20px,5vw,72px);
  background:linear-gradient(180deg,rgba(255,255,255,.03),transparent 60%);border-top:1px solid var(--line)}
.ft-bottom{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;padding:28px 0;color:#555;font-size:10px}
.ft-bottom .kdot{width:6px;height:6px;margin-right:8px}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1024px){
  .lens{width:min(58vmin,480px);top:38%}
  .hero{padding-bottom:16vh}
  .h-logo-main{width:min(84vw,620px)}
  .band{min-height:56vh}
  .band-ring{width:52vmin}
}
@media (max-width:1000px){
  .srv{grid-template-columns:20px 48px 1fr 36px;grid-template-rows:auto auto;padding-top:20px;padding-bottom:20px}
  .srv-desc{grid-column:3/4;grid-row:2}
  .srv-desc>span{opacity:1;transform:none}
  .srv-arrow{grid-row:1}
  .steps ol{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .nav-links{display:none}
  #burger{display:flex}
  .origen-grid{grid-template-columns:1fr}
  .ql{grid-template-columns:1fr}
  .wa-list{grid-template-columns:1fr}
  .lb-panel{grid-template-columns:1fr;overflow-y:auto;max-height:88vh;align-items:start}
  .band-tc{display:none}
  .mnav-foot{bottom:calc(30px + env(safe-area-inset-bottom,0px))}
  #mnav{padding-bottom:env(safe-area-inset-bottom,0px)}
}
@media (max-width:820px){
  .tl-line{left:7px;transform:none}
  .tl-dot{left:7px}
  .stage,.stage:nth-child(odd),.stage:nth-child(even){
    width:auto;margin:0 0 0 34px;align-self:auto;text-align:left;padding:22px 22px}
  .stage:nth-child(odd)::before,.stage:nth-child(even)::before{content:"";position:absolute;left:-28px;top:28px;width:22px;height:1px;background:rgba(255,255,255,.2)}
  .stage:nth-child(odd) .st-node,.stage:nth-child(even) .st-node{left:-34px;right:auto;transform:translateX(-50%)}
}
@media (max-width:640px){
  .hero{justify-content:flex-end;padding:0 18px calc(120px + env(safe-area-inset-bottom,0px));min-height:100dvh}
  .lens{top:31%;width:min(72vw,320px)}
  .lens-meta{bottom:-26px;font-size:8px}
  .lens-logo{height:clamp(60px,19vw,88px)}
  .h-logo-main{width:min(94vw,430px);margin-bottom:16px}
  .h-tag{gap:10px;font-size:.72rem;letter-spacing:.1em;margin-top:0}
  .t-line{width:16px}
  .hero-foot{flex-direction:column;align-items:center;gap:14px;padding:0 18px calc(18px + env(safe-area-inset-bottom,0px))}
  .scr{order:1}.scr-line{height:34px}
  .h-phrase{order:2;max-width:34ch;text-align:center;font-size:12px}
  .marq{margin:0 12px;padding:14px 0}
  .marq-g{gap:22px;padding-right:22px;font-size:1rem}
  .sec{padding:70px 20px}
  .kicker{margin-bottom:18px;padding:9px 16px}
  .sec-head{margin-bottom:40px}
  .sec-sub{margin-top:16px}
  .band{min-height:52vh;padding-bottom:44px}
  .band-ring{display:none}
  .ql-row{padding:22px 22px 26px}
  .ql-ar{right:18px;top:18px;width:22px;height:22px}
  .srv{gap:10px;padding:18px 16px}
  .srv-name{font-size:1.05rem}
  .srv-desc>span{font-size:13px}
  .srv-count-num{font-size:2.6rem}
  .net{height:78vw;min-height:300px}
  .net-node{font-size:8px;gap:6px}
  .net-core .mono{font-size:8px}
  .avl-cap{margin-bottom:34px}
  .avl-labels{font-size:8px;margin-bottom:18px;letter-spacing:.08em}
  .process{padding:70px 20px}
  .tl-stages{gap:26px}
  .st-num{font-size:2.4rem}
  .stage h3{font-size:1.3rem}
  .stage p{font-size:14px}
  .mani{height:190vh}
  .mani-l1,.mani-l2{font-size:clamp(1.5rem,7.4vw,2.6rem)}
  .pull{font-size:clamp(1.35rem,6vw,2rem)}
  .more{padding:14px 18px;min-height:44px}
  .value-head{padding:18px 16px;gap:12px;min-height:56px}
  .v-name{font-size:1.45rem}
  .v-body-in p{padding:0 16px 20px 38px;font-size:14px}
  .lab .sec-head{padding:0 20px}
  #labCanvas{height:min(64vh,440px)}
  .flts{gap:8px}
  .flt{padding:12px 16px;min-height:44px}
  .prj-grid{grid-template-columns:1fr;gap:34px}
  .prj:nth-child(2n){margin-top:0}
  .prj-meta{margin-top:12px}
  .lb{padding:14px}
  .lb-media img{max-height:42vh}
  .lb-info h3{font-size:1.7rem}
  .lb-desc{font-size:14px;margin:16px 0 24px}
  .finale{height:240vh}
  .fin-tag{font-size:clamp(1.9rem,8.5vw,3rem)}
  .fin-f1,.fin-f2{font-size:clamp(1.4rem,6.6vw,2.4rem)}
  .wa{padding:24px 20px;gap:4px 16px}
  .wa-num{font-size:1.6rem}
  .wa-ic{width:46px;height:46px}
  .wa-ic svg{width:18px;height:18px}
  .ft-bottom{flex-direction:column;gap:8px;text-align:center}
  .steps ol{grid-template-columns:1fr}
}
@media (max-width:400px){
  .lens{width:80vw}
  .h-logo-main{width:96vw}
  .band-title,.sec-title{font-size:2.2rem}
  .v-name{font-size:1.25rem}
  .ql-name{font-size:1.4rem}
  .wa-num{font-size:1.4rem}
}
@media (max-height:480px) and (orientation:landscape){
  .lens{top:40%;width:min(38vh,300px)}
  .hero{padding-bottom:12vh}
  .hero-foot{flex-direction:row;justify-content:center}
  .h-phrase{display:none}
  .h-logo-main{width:min(52vw,380px);margin-bottom:10px}
  .band{min-height:78vh}
}
@media (pointer:coarse){
  .btn{min-height:48px}
  .scr{padding:10px}
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important}
  .iris-hole,.ambient{display:none}
  .mask>span,.h-fade,.poema p,.srv.io,.prj,.fin-end{opacity:1!important;transform:none!important}
  .blade{transform:rotate(var(--a)) translateY(-106%)!important}
  .core i{transform:scale(1)!important}
  .mani .w{opacity:1!important;filter:none!important}
  .fin-f1,.fin-f2,.fin-dot,.fin-ring{display:none}
  #cursor{display:none}
  body.has-cursor,body.has-cursor a,body.has-cursor button{cursor:auto}
}