/* =========================================================
   NYVEKO — agencia · negro + lima
   ========================================================= */
:root{
  --ink:#0A0A0A; --ink-2:#121212; --white:#F5F5F2; --lime:#C6FF3A; --lime-2:#9FDB17;
  --mute:#8A8A85; --line:rgba(245,245,242,.10);
  --ease:cubic-bezier(.22,1,.36,1);
  --display:"Archivo","Instrument Sans",sans-serif;
  --body:"Instrument Sans",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth; overflow-x:clip}
body{background:var(--white); color:var(--ink); font-family:var(--body); overflow-x:clip; max-width:100%; -webkit-font-smoothing:antialiased}
a{color:inherit; text-decoration:none}
img,video{display:block; max-width:100%}
::selection{background:var(--lime); color:var(--ink)}
[hidden]{display:none!important}

/* ===== NAV ===== */
.nav{position:fixed; inset:0 0 auto 0; z-index:50; display:flex; align-items:center; justify-content:space-between;
  padding:clamp(.5rem,1.3vw,.9rem) clamp(1.2rem,4vw,3.2rem); transition:background .4s var(--ease), backdrop-filter .4s}
.nav.scrolled{background:rgba(10,10,10,.72); backdrop-filter:blur(14px); border-bottom:1px solid var(--line)}
.nav__logo{display:flex; align-items:center}
.nav__logo img{height:30px; width:auto; display:block}
.nav__links{display:flex; gap:.2rem; align-items:center}
.nav__links a{font-family:var(--mono); font-size:.82rem; letter-spacing:.04em; text-transform:uppercase; color:var(--white); opacity:.85; padding:.55em .95em; border-radius:100px; transition:opacity .25s, background .25s}
.nav__links a:hover{opacity:1; background:rgba(245,245,242,.07)}
.nav__links a.is-active{opacity:1; color:var(--lime); background:rgba(198,255,58,.12)}
.mnav a.is-active{color:var(--lime)}
.nav__cta{display:flex; gap:.7rem; align-items:center}
.btn{display:inline-flex; align-items:center; gap:.5em; font-family:var(--mono); font-weight:600; font-size:.82rem; letter-spacing:.04em; text-transform:uppercase;
  padding:.9em 1.5em; border-radius:100px; background:var(--lime); color:var(--ink); cursor:pointer; border:0;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease)}
.btn:hover{transform:translateY(-3px); box-shadow:0 14px 30px -10px rgba(198,255,58,.5)}
.burger{display:none; position:relative; width:46px; height:46px; border-radius:50%; border:1px solid var(--line); background:transparent; cursor:pointer; z-index:60; transition:border-color .3s var(--ease), background .3s var(--ease)}
.burger span{position:absolute; left:14px; right:14px; height:2px; border-radius:2px; background:var(--white); transition:transform .38s var(--ease), background .3s var(--ease), top .38s var(--ease)}
.burger span:nth-child(1){top:20px}
.burger span:nth-child(2){top:26px}
.burger.is-open{border-color:var(--lime); background:rgba(198,255,58,.08)}
.burger.is-open span{background:var(--lime)}
.burger.is-open span:nth-child(1){top:23px; transform:rotate(45deg)}
.burger.is-open span:nth-child(2){top:23px; transform:rotate(-45deg)}
@media(max-width:920px){ .nav__links{display:none} .burger{display:block} }

/* ===== MENÚ MÓVIL · panel-índice ===== */
.mnav{position:fixed; inset:0; z-index:49; background:var(--ink); overflow:hidden;
  display:flex; flex-direction:column; justify-content:center; gap:clamp(1rem,3vh,1.7rem);
  padding:calc(env(safe-area-inset-top,0px) + 5.6rem) clamp(1.5rem,7vw,3rem) calc(env(safe-area-inset-bottom,0px) + 4.4rem);
  transform:translateY(-101%); transition:transform .55s var(--ease); will-change:transform}
.mnav.open{transform:none}
/* glow lima esquina superior derecha */
.mnav::before{content:""; position:absolute; top:-12%; right:-22%; width:80vw; height:80vw; pointer-events:none;
  background:radial-gradient(circle, rgba(198,255,58,.16), transparent 60%)}
/* rejilla blueprint difuminada */
.mnav__grid{position:absolute; inset:0; pointer-events:none; opacity:.6;
  background:
    linear-gradient(rgba(198,255,58,.05) 1px, transparent 1px) 0 0/100% 46px,
    linear-gradient(90deg, rgba(198,255,58,.05) 1px, transparent 1px) 0 0/46px 100%;
  -webkit-mask-image:radial-gradient(130% 95% at 82% 8%, #000 28%, transparent 76%);
  mask-image:radial-gradient(130% 95% at 82% 8%, #000 28%, transparent 76%)}
/* línea de escáner (firma) */
.mnav__scan{position:absolute; left:0; right:0; top:0; height:2px; opacity:0; pointer-events:none;
  background:linear-gradient(90deg, transparent, var(--lime), transparent);
  box-shadow:0 0 18px 2px rgba(198,255,58,.5)}
.mnav.open .mnav__scan{animation:mnavScan 1s var(--ease) .12s both}
@keyframes mnavScan{0%{opacity:0; transform:translateY(0)} 12%{opacity:1} 88%{opacity:1} 100%{opacity:0; transform:translateY(100vh)}}
/* meta arriba / abajo */
.mnav__top{position:absolute; top:calc(env(safe-area-inset-top,0px) + 4.6rem); left:clamp(1.5rem,7vw,3rem); right:clamp(1.5rem,7vw,3rem);
  display:flex; justify-content:space-between; align-items:center;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:var(--mute)}
.mnav__tag{display:inline-flex; align-items:center; gap:.55em; color:var(--white)}
.mnav__tag i{width:7px; height:7px; border-radius:50%; background:var(--lime); box-shadow:0 0 8px 1px rgba(198,255,58,.85); animation:mnavPulse 1.6s ease-in-out infinite}
@keyframes mnavPulse{0%,100%{opacity:1} 50%{opacity:.25}}
.mnav__foot{position:absolute; bottom:calc(env(safe-area-inset-bottom,0px) + 1.7rem); left:clamp(1.5rem,7vw,3rem); right:clamp(1.5rem,7vw,3rem);
  display:flex; justify-content:space-between; font-family:var(--mono); font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--mute); opacity:0; transition:opacity .5s var(--ease)}
.mnav.open .mnav__foot{opacity:1; transition-delay:.62s}
/* enlaces */
.mnav__links{position:relative; display:flex; flex-direction:column}
.mnav__lnk{position:relative; display:flex; align-items:center; gap:clamp(.85rem,3.5vw,1.3rem);
  padding:clamp(.75rem,2.3vh,1.15rem) 0; border-top:1px solid rgba(245,245,242,.13); text-decoration:none; color:var(--white)}
.mnav__lnk:last-of-type{border-bottom:1px solid rgba(245,245,242,.13)}
.mnav__num{font-family:var(--mono); font-size:.82rem; letter-spacing:.06em; color:var(--lime); align-self:flex-start; padding-top:.5em;
  opacity:0; transform:translateY(8px); transition:opacity .5s var(--ease), transform .5s var(--ease), color .25s}
.mnav__mask{overflow:hidden; display:block; line-height:.92}
.mnav__word{display:inline-block; font-family:var(--display); font-weight:800; text-transform:uppercase;
  font-size:clamp(2.2rem,11.5vw,3.5rem); letter-spacing:-.02em; transform:translateY(112%); transition:transform .6s var(--ease), color .25s}
.mnav__go{margin-left:auto; font-family:var(--mono); font-size:1.25rem; color:var(--lime);
  opacity:0; transform:translateX(-10px); transition:opacity .5s var(--ease), transform .35s var(--ease)}
/* estados abiertos + stagger (solo al abrir, para que el cierre sea instantáneo) */
.mnav.open .mnav__word{transform:none}
.mnav.open .mnav__num,.mnav.open .mnav__go{opacity:1; transform:none}
.mnav.open .mnav__lnk:nth-child(1) .mnav__word{transition-delay:.28s}
.mnav.open .mnav__lnk:nth-child(2) .mnav__word{transition-delay:.35s}
.mnav.open .mnav__lnk:nth-child(3) .mnav__word{transition-delay:.42s}
.mnav.open .mnav__lnk:nth-child(4) .mnav__word{transition-delay:.49s}
.mnav.open .mnav__lnk:nth-child(1) .mnav__num,.mnav.open .mnav__lnk:nth-child(1) .mnav__go{transition-delay:.34s}
.mnav.open .mnav__lnk:nth-child(2) .mnav__num,.mnav.open .mnav__lnk:nth-child(2) .mnav__go{transition-delay:.41s}
.mnav.open .mnav__lnk:nth-child(3) .mnav__num,.mnav.open .mnav__lnk:nth-child(3) .mnav__go{transition-delay:.48s}
.mnav.open .mnav__lnk:nth-child(4) .mnav__num,.mnav.open .mnav__lnk:nth-child(4) .mnav__go{transition-delay:.55s}
/* toque / sección activa */
.mnav__lnk:active .mnav__word,.mnav__lnk.is-active .mnav__word{color:var(--lime)}
.mnav__lnk:active .mnav__num,.mnav__lnk.is-active .mnav__num{color:var(--lime)}
.mnav__lnk:active .mnav__go{transform:translateX(5px)}
/* CTA */
.mnav__cta{position:relative; align-self:stretch; justify-content:center; margin-top:clamp(.5rem,2vh,1.1rem);
  padding:1.15em 1.5em; font-size:.95rem; opacity:0; transform:translateY(14px);
  transition:opacity .5s var(--ease), transform .5s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease)}
.mnav.open .mnav__cta{opacity:1; transform:none; transition-delay:.54s, .54s, 0s, 0s}
.mnav__cta span{transition:transform .3s var(--ease)}
.mnav__cta:active span{transform:translateX(5px)}
@media (prefers-reduced-motion: reduce){
  .mnav{transition:opacity .2s ease}
  .mnav,.mnav *{animation:none !important}
  .mnav__word,.mnav__num,.mnav__go,.mnav__cta,.mnav__foot{transform:none !important; opacity:1 !important; transition:none !important}
}

/* ===== HERO ===== */
.hero{position:relative; height:100svh; min-height:600px; overflow:hidden; background:var(--ink); border-radius:0}
.hero__video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0}
.hero__scrim{position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(58% 58% at 50% 48%, rgba(10,10,10,.10), rgba(10,10,10,.58) 82%),
    linear-gradient(180deg, rgba(10,10,10,.55), rgba(10,10,10,.05) 26%, rgba(10,10,10,.08) 68%, rgba(10,10,10,.72))}
/* halo lima detrás del logo 3D (el brillo, ahora que el bloom se quitó) */
.hero__glow{position:absolute; left:50%; top:32%; transform:translate(-50%,-50%); z-index:1; pointer-events:none;
  width:min(60vw,620px); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, rgba(198,255,58,.42), rgba(159,219,23,.16) 42%, transparent 68%);
  filter:blur(14px); mix-blend-mode:screen; animation:heroGlow 5.5s var(--ease) infinite}
@keyframes heroGlow{0%,100%{opacity:.7; transform:translate(-50%,-50%) scale(.94)} 50%{opacity:1; transform:translate(-50%,-50%) scale(1.06)}}
#logo3d{position:absolute; inset:0; z-index:2; width:100%; height:100%; cursor:none; touch-action:pan-y}

/* loader del logo 3D */
.hero__load{position:absolute; inset:0; z-index:3; display:grid; place-items:center; pointer-events:none; transition:opacity .7s ease}
.hero__load.hidden{opacity:0}
.hero__load span{font-family:var(--mono); font-size:.72rem; letter-spacing:.24em; text-transform:uppercase; color:var(--mute)}

/* eyebrow + scroll abajo */
.hero__eyebrow{margin:0; font-family:var(--mono); font-size:clamp(.7rem,1.1vw,.86rem); letter-spacing:.28em; text-transform:uppercase; color:var(--lime)}
/* bloque de copy (titular blanco + subtítulo lima) debajo del logo 3D */
.hero__copy{position:absolute; left:50%; bottom:clamp(7rem,18vh,12rem); transform:translateX(-50%); z-index:3; width:min(94%,960px); text-align:center; pointer-events:none;
  display:flex; flex-direction:column; align-items:center; gap:.9rem}
.hero__title{margin:0; font-family:var(--display); font-weight:800; text-transform:uppercase; color:var(--white);
  font-size:clamp(1.9rem,5.6vw,4.6rem); line-height:.96; letter-spacing:-.025em;
  text-shadow:0 6px 44px rgba(10,10,10,.6)}
.hero__cta{margin-top:.7rem; pointer-events:auto; font-size:.9rem; padding:1.05em 2em}

.hero__scroll{position:absolute; left:50%; bottom:1.6rem; transform:translateX(-50%); z-index:3; display:flex; flex-direction:column; align-items:center; gap:.5em;
  font-family:var(--mono); font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--mute); pointer-events:none}
.hero__scroll .ln{width:1px; height:38px; background:linear-gradient(var(--lime), transparent)}
@media(prefers-reduced-motion:reduce){ .hero__load{display:none} }

/* ===== CURSOR: BOLITA LIMA PEQUEÑA + RASTRO ===== */
@media (pointer:fine){ html, body, a, button, .btn, .burger { cursor:none } }
.cursor-ball{position:fixed; top:0; left:0; width:12px; height:12px; border-radius:50%; z-index:99999; pointer-events:none; will-change:transform;
  background:radial-gradient(circle at 35% 30%, #F6FFDC, #C6FF3A 55%, #9FDB17 100%);
  box-shadow:0 0 10px 2px rgba(198,255,58,.65), 0 0 20px 5px rgba(198,255,58,.3);
  transform:translate(-50%,-50%)}
.cursor-trail{position:fixed; top:0; left:0; border-radius:50%; z-index:99998; pointer-events:none; will-change:transform,opacity;
  background:radial-gradient(circle, rgba(198,255,58,.8), rgba(159,219,23,0) 70%)}
@media (pointer:coarse){ .cursor-ball, .cursor-trail{ display:none } }

/* ===== NYVEKO · PANTALLA DE CARGA (negro + lima) ===== */
.loader-container{position:fixed; inset:0; width:100%; height:100%; height:100dvh; background:var(--ink); padding:2.08vw; z-index:100000; transition:opacity .5s ease}
.loader-container.done{opacity:0; pointer-events:none}
.loader-wrapper{position:relative; width:100%; height:100%; display:grid; grid-template-columns:repeat(12,1fr); grid-column-gap:1.39vw; align-content:center; isolation:isolate}
.loader-svg{position:fixed; top:50%; left:50%; width:calc(100vw + clamp(20px,4vmin,64px)); height:calc(100vh + clamp(20px,4vmin,64px)); z-index:1; pointer-events:none; transform:translate(-50%,-50%) scale(0); transform-origin:center center}
.loader-text-wrapper{position:relative; z-index:0; color:var(--lime); font-family:var(--mono); font-size:clamp(.7rem,1vw,1rem); line-height:1.2; white-space:nowrap}
.loader-text-wrapper.el1{grid-column:1 / span 3; top:50%}
.loader-text-wrapper.el2{grid-column:4; top:50%}
.loader-text-wrapper.el3{grid-column:6 / span 3; top:50%}
.loader-text-wrapper.el4{grid-column:10; top:50%}
.loader-text-wrapper.el5{grid-column:12; top:50%}
.loader-text-wrapper.el6{position:absolute; bottom:0; left:44%}
.type-caret::after{content:"█"; display:inline-block; margin-left:.12em; animation:blink .7s steps(1,end) infinite}
@keyframes blink{0%,50%{opacity:1} 50.01%,100%{opacity:0}}
.loader-dot{position:absolute; width:.56vw; height:.56vw; min-width:6px; min-height:6px; background:var(--lime); z-index:2; opacity:0; animation:dot-flicker 2s steps(1,end) infinite; box-shadow:0 0 8px 1px rgba(198,255,58,.7)}
.loader-dot.el1{bottom:0; left:0; animation-delay:.3s}
.loader-dot.el2{top:0; left:0; animation-delay:.1s}
.loader-dot.el3{top:0; right:0; animation-delay:.1s}
.loader-dot.el4{bottom:0; right:0; animation-delay:.3s}
@keyframes dot-flicker{0%,10%{opacity:0} 20%{opacity:1} 30%{opacity:0} 40%{opacity:1} 50%{opacity:0} 60%{opacity:1} 70%{opacity:0} 80%{opacity:1} 90%{opacity:0} 100%{opacity:1}}

/* ===== ENTRADA DEL HERO (cuando termina la pantalla de carga) ===== */
@media (prefers-reduced-motion:no-preference){
  /* estado inicial oculto SOLO mientras carga (está debajo del overlay, no se ve) */
  body.loading .nav{opacity:0; transform:translateY(-18px)}
  body.loading #logo3d{opacity:0}
  body.loading .hero__copy > *{opacity:0; transform:translateY(32px)}
  body.loading .hero__scroll{opacity:0}
  /* al terminar la carga → todo entra con fundido + subida escalonada */
  body.loaded .nav{opacity:1; transform:none; transition:opacity .7s var(--ease), transform .8s var(--ease)}
  body.loaded #logo3d{opacity:1; transition:opacity 1.1s ease .15s}
  body.loaded .hero__copy > *{opacity:1; transform:none; transition:opacity .75s var(--ease), transform .85s var(--ease)}
  body.loaded .hero__copy > *:nth-child(1){transition-delay:.35s}
  body.loaded .hero__copy > *:nth-child(2){transition-delay:.5s}
  body.loaded .hero__copy > *:nth-child(3){transition-delay:.65s}
  body.loaded .hero__scroll{opacity:1; transition:opacity .6s ease .9s}
}

/* ===== 02 · SERVICIOS (menú halftone + corchetes, negro + lima) ===== */
/* sección alta: el recorrido de scroll mueve el menú mientras .svc__pin queda fija */
.svc{position:relative; height:400vh; background:var(--white); z-index:1}
.svc__pin{position:sticky; top:0; min-height:100svh; height:100svh; padding:clamp(4.5rem,9vh,7rem) clamp(1.4rem,4vw,3.2rem) clamp(1.4rem,4vw,3rem); display:flex; flex-direction:column; overflow:hidden}
.svc__pin::before{content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(90% 60% at 50% 122%, rgba(159,219,23,.12), transparent 62%)}
/* frase antes del menú */
.svc__intro{position:relative; z-index:2; margin-top:clamp(1.2rem,4vh,2.6rem);
  font-family:var(--display); font-weight:800; text-transform:uppercase; color:var(--ink);
  font-size:clamp(2.2rem,5.6vw,4.8rem); line-height:1; letter-spacing:-.02em}
.svc__intro em{font-style:normal; color:var(--lime-2)}
.svc__label{position:relative; z-index:2; display:flex; justify-content:space-between; align-items:center;
  font-family:var(--mono); font-size:.78rem; letter-spacing:.24em; text-transform:uppercase; color:var(--ink)}
.svc__label span:last-child{color:var(--mute)}
.svc__grid{position:relative; z-index:2; flex:1; display:grid; grid-template-columns:1.35fr 1fr; gap:clamp(1.5rem,4vw,3.5rem); align-items:center; margin-top:clamp(.5rem,2vh,1.5rem)}
.svc__menu{grid-column:1}
.svc__panels{grid-column:2}


/* menú grande (palabras apiladas + corchetes) */
.svc__menu{position:relative; padding:0 clamp(1.5rem,3.2vw,3.5rem)}
.svc__list{list-style:none; display:flex; flex-direction:column; align-items:flex-start; gap:.1em}
.svc__item{position:relative; text-align:left}
.svc__word{position:relative; display:inline-block; font-family:"Archivo",sans-serif; font-weight:800;
  font-size:clamp(1.9rem,5.8vw,4.8rem); text-transform:uppercase; letter-spacing:-.01em; color:var(--ink);
  transition:opacity .35s var(--ease), filter .35s var(--ease); filter:blur(5px); opacity:.24}
.svc__sub{font-family:var(--mono); font-size:.34em; letter-spacing:.12em; color:var(--mute);
  display:block; margin-top:.15em; filter:none; opacity:0; transition:opacity .35s}
.svc__item.is-active .svc__word{filter:blur(0); opacity:1; text-shadow:none}
.svc__item.is-active .svc__sub{opacity:1; color:var(--lime-2)}
.svc__item:hover .svc__word{filter:blur(0); opacity:.7}
.svc__bracket{position:absolute; top:0; left:0; font-family:"Archivo",sans-serif; font-weight:800;
  font-size:clamp(2.2rem,6.4vw,5.4rem); line-height:1; color:var(--lime-2); pointer-events:none;
  text-shadow:0 2px 10px rgba(159,219,23,.25)}
.svc__bracket--l{transform:translate(-100%,-50%)}
.svc__bracket--r{transform:translate(0,-50%)}
@keyframes glitch{0%{clip-path:inset(0 0 0 0); transform:translateX(0)} 20%{clip-path:inset(20% 0 40% 0); transform:translateX(-3px)} 40%{clip-path:inset(60% 0 10% 0); transform:translateX(3px)} 60%{clip-path:inset(10% 0 70% 0); transform:translateX(-2px)} 100%{clip-path:inset(0 0 0 0); transform:translateX(0)}}
.svc__item.glitching .svc__word{animation:glitch .28s steps(2,end)}
.svc__foot{position:relative; z-index:2; margin-top:auto; padding-top:1.5rem; display:flex; justify-content:space-between;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--mute)}
.svc__foot .lime{color:var(--lime-2)}

/* tarjeta de servicio (se abre al pasar el ratón) — negro + lima, estilo Nyveko */
.svc__panels{position:relative; display:grid; align-self:center}
.svc__detail{grid-area:1/1; opacity:0; visibility:hidden; transform:translateY(16px); pointer-events:none;
  transition:opacity .4s var(--ease), transform .4s var(--ease), visibility .4s;
  position:relative; padding:clamp(1.4rem,2.2vw,2.3rem); border:1px solid rgba(198,255,58,.4);
  background:
    linear-gradient(var(--lime),var(--lime)) 0 0/9px 9px no-repeat,
    linear-gradient(var(--lime),var(--lime)) 100% 0/9px 9px no-repeat,
    linear-gradient(var(--lime),var(--lime)) 0 100%/9px 9px no-repeat,
    linear-gradient(var(--lime),var(--lime)) 100% 100%/9px 9px no-repeat,
    var(--ink);
  box-shadow:0 34px 66px -34px rgba(10,10,10,.55)}
.svc__detail.is-shown{opacity:1; visibility:visible; transform:none; pointer-events:auto}
.svc__card-top{display:flex; justify-content:space-between; align-items:center}
.svc__card-tag{font-family:var(--mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--lime)}
.svc__card-x{font-family:var(--mono); font-size:.72rem; color:var(--mute)}
.svc__card-head{font-family:var(--display); font-weight:800; font-style:italic; color:var(--white);
  font-size:clamp(1.3rem,2.2vw,1.95rem); line-height:1.05; letter-spacing:-.01em; margin:1.1rem 0 .55rem}
.svc__card-desc{font-family:var(--body); color:#c9c9c1; font-size:.92rem; line-height:1.5; margin-bottom:1.15rem; max-width:26em}
.svc__card-list{list-style:none; display:flex; flex-direction:column; margin-bottom:1.35rem}
.svc__card-list li{position:relative; padding:.6em 0 .6em 1.8em; font-family:var(--mono); font-size:.82rem; color:var(--white);
  border-bottom:1px solid rgba(198,255,58,.14)}
.svc__card-list li::before{content:">>"; position:absolute; left:0; color:var(--lime); font-weight:600}
.svc__card-btn{display:inline-block; font-family:var(--mono); font-weight:600; font-size:.85rem; letter-spacing:.03em;
  background:var(--lime); color:var(--ink); padding:.85em 1.5em; border-radius:3px;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease)}
.svc__card-btn:hover{transform:translateY(-2px); box-shadow:0 12px 26px -10px rgba(198,255,58,.6)}

/* entrada al hacer scroll */
@media (prefers-reduced-motion:no-preference){
  .svc__bracket{transition:top .45s var(--ease), left .45s var(--ease), opacity .6s ease .4s}
  .svc:not(.is-in) .svc__intro{opacity:0; transform:translateY(24px)}
  .svc:not(.is-in) .svc__panels{opacity:0; transform:translateX(24px)}
  .svc__panels{transition:opacity .8s var(--ease), transform .8s var(--ease) .2s}
  .svc:not(.is-in) .svc__item{opacity:0; transform:translateY(42px)}
  .svc:not(.is-in) .svc__bracket{opacity:0}
  .svc:not(.is-in) .svc__label,.svc:not(.is-in) .svc__foot{opacity:0}
  .svc__intro{transition:opacity .8s var(--ease), transform .8s var(--ease)}
  .svc__item{transition:opacity .7s var(--ease), transform .7s var(--ease)}
  .svc__label,.svc__foot{transition:opacity .8s ease}
  .svc.is-in .svc__item:nth-child(1){transition-delay:.12s}
  .svc.is-in .svc__item:nth-child(2){transition-delay:.22s}
  .svc.is-in .svc__item:nth-child(3){transition-delay:.32s}
  .svc.is-in .svc__item:nth-child(4){transition-delay:.42s}
  .svc.is-in .svc__item:nth-child(5){transition-delay:.52s}
}

@media(max-width:820px){
  .svc__grid{grid-template-columns:1fr; gap:1.4rem}
  .svc__menu{grid-column:1; order:1; padding:0}
  .svc__panels{grid-column:1; order:2}
  .svc__list{align-items:flex-start}
  .svc__item{text-align:left}
  .svc__word{filter:blur(0); opacity:.5}
  .svc__bracket{display:none}
}

/* =========================================================
   04 PROCESO · 05 FAQ · 06 CTA · FOOTER  (añadido)
   ========================================================= */
/* ---- 04 · PROCESO (sección blanca) ---- */
.proc{--pink:#0A0A0A; --pmute:#63635E; --pline:rgba(10,10,10,.13);
  position:relative; z-index:2; background:var(--white); color:var(--pink);
  padding:clamp(7rem,13vh,10.5rem) clamp(1.4rem,4vw,3.2rem) clamp(5rem,10vh,8rem);
  border-top:0}
.proc__head{display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:1rem; margin-bottom:clamp(2.5rem,6vh,4rem)}
.proc__label{font-family:var(--mono); font-size:.78rem; letter-spacing:.24em; text-transform:uppercase; color:var(--pink)}
.proc__head .proc__label:first-child{color:var(--lime-2)}
.proc h2{font-family:var(--display); font-weight:900; text-transform:uppercase; color:var(--pink); font-size:clamp(2rem,5.5vw,4rem); letter-spacing:-.03em; line-height:.95}
.proc h2 em{font-style:normal; color:var(--lime-2)}
.proc__grid{display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--pline)}
@media(max-width:900px){ .proc__grid{grid-template-columns:repeat(2,1fr)} }
@media(max-width:520px){ .proc__grid{grid-template-columns:1fr} }
.proc__step{position:relative; padding:clamp(1.6rem,3vw,2.4rem) clamp(1.2rem,2vw,1.8rem) clamp(2.2rem,4vw,3rem); border-right:1px solid var(--pline); border-bottom:1px solid var(--pline); transition:background .3s}
.proc__step:hover{background:rgba(10,10,10,.035)}
.proc__n{font-family:var(--mono); font-size:.8rem; letter-spacing:.1em; color:var(--lime-2); margin-bottom:clamp(2rem,5vw,3.5rem)}
.proc__t{font-family:var(--display); font-weight:800; text-transform:uppercase; font-size:clamp(1.15rem,2vw,1.5rem); letter-spacing:-.01em; margin-bottom:.6rem; color:var(--pink)}
.proc__d{font-family:var(--mono); font-size:.78rem; line-height:1.6; color:var(--pmute)}
.proc__step::after{content:""; position:absolute; left:0; bottom:-1px; height:2px; width:0; background:var(--lime); box-shadow:0 0 10px rgba(159,219,23,.5); transition:width .4s var(--ease)}
.proc__step:hover::after{width:100%}

/* ---- 05 · FAQ (estilo terminal · ancho completo · izq→der) ---- */
.faq{position:relative; overflow:visible; background:var(--white); padding:clamp(2.8rem,6vh,4.5rem) clamp(1.4rem,4vw,3.2rem); border-top:1px solid rgba(10,10,10,.12)}
.faq__wrap{max-width:min(760px,60%); margin:0; position:relative; z-index:2}
/* globo 3D asomando por la esquina inferior derecha */
.faq__globe{position:absolute; right:0; bottom:0; width:min(60vw,720px); height:min(60vw,720px); z-index:1; touch-action:pan-y; transform:translate(12%,16%); border-radius:50%;
  background:radial-gradient(circle at 50% 50%, #0a0a0a 0 47%, rgba(10,10,10,.55) 60%, rgba(10,10,10,0) 73%)}
@media(max-width:820px){
  .faq__wrap{max-width:100%; position:relative; z-index:2}
  .faq__globe{width:86vw; height:86vw; opacity:.5; transform:translate(30%,44%)}
}
.faq__label{font-family:var(--mono); font-size:.72rem; letter-spacing:.24em; text-transform:uppercase; color:var(--lime-2); margin-bottom:.6rem}
.faq h2{font-family:var(--display); font-weight:900; text-transform:uppercase; color:var(--ink); font-size:clamp(1.5rem,3.6vw,2.6rem); letter-spacing:-.03em; line-height:.95; margin-bottom:clamp(1.4rem,3.5vh,2.4rem)}
.faq__list{border-top:1px solid rgba(10,10,10,.14)}
.faq__item{border-bottom:1px solid rgba(10,10,10,.14)}
.faq__q{width:100%; text-align:left; background:none; border:0; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:1.2rem;
  padding:clamp(.9rem,2.2vw,1.35rem) clamp(.2rem,1.5vw,1rem); font-family:var(--mono); font-weight:500; text-transform:uppercase; color:rgba(10,10,10,.62);
  font-size:clamp(.85rem,1.6vw,1.15rem); letter-spacing:.05em; line-height:1.15; transition:color .2s, padding-left .32s var(--ease)}
.faq__q:hover, .faq__item.open .faq__q{color:var(--ink)}
.faq__q:hover{padding-left:clamp(.8rem,2.2vw,1.8rem)}
.faq__q .sign{font-family:var(--mono); font-size:clamp(.78rem,1.4vw,1rem); font-weight:700; color:var(--lime-2); letter-spacing:.04em; flex:0 0 auto; transition:color .2s}
.faq__q .sign::before{content:"[ + ]"}
.faq__item.open .faq__q .sign::before{content:"[ \2013 ]"}
.faq__a{max-height:0; overflow:hidden; transition:max-height .45s var(--ease)}
.faq__a p{font-family:var(--mono); font-size:clamp(.8rem,1.3vw,.92rem); line-height:1.7; color:var(--mute); padding:0 0 clamp(1.2rem,2.6vw,1.7rem) clamp(.2rem,1.5vw,1rem); max-width:72ch}

/* ---- 06 · CTA (acción de compra) ---- */
.cta{position:relative; background:var(--ink); padding:clamp(5.5rem,12vh,9rem) clamp(1.4rem,4vw,3.2rem); overflow:hidden; text-align:center; border-radius:clamp(28px,3.6vw,54px)}
.cta::before{content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background:radial-gradient(58% 60% at 50% 52%, rgba(198,255,58,.12), transparent 62%)}
.cta__inner{position:relative; z-index:1; max-width:880px; margin:0 auto; display:flex; flex-direction:column; align-items:center; gap:clamp(1.2rem,3vh,2rem)}
.cta__ey{font-family:var(--mono); font-size:.78rem; letter-spacing:.24em; text-transform:uppercase; color:var(--lime)}
.cta h2{font-family:var(--display); font-weight:900; text-transform:uppercase; color:var(--white); font-size:clamp(2.4rem,7vw,5.5rem); letter-spacing:-.035em; line-height:.9}
.cta h2 em{font-style:normal; color:var(--lime)}
.cta p{font-family:var(--mono); font-size:.92rem; line-height:1.6; color:var(--mute); max-width:46ch}
.cta .btn{font-size:1rem; padding:1.1em 2.2em}

/* ---- FOOTER ---- */
.foot{position:relative; background:var(--white); border-top:1px solid rgba(10,10,10,.12); padding:clamp(3rem,6vh,4.5rem) clamp(1.4rem,4vw,3.2rem) clamp(1.5rem,3vh,2.2rem)}
.foot__grid{display:flex; flex-wrap:wrap; justify-content:center; text-align:center; gap:clamp(3rem,13vw,14rem); margin-bottom:clamp(2.5rem,6vh,4rem)}
@media(max-width:720px){ .foot__grid{grid-template-columns:1fr 1fr} }
@media(max-width:480px){ .foot__grid{grid-template-columns:1fr} }
/* wordmark ASCII del footer (caen y suben las letras al montar el logo) */
.foot__wordmark{position:relative; width:100%; margin-bottom:clamp(2.5rem,6vh,4rem)}
.foot__wordmark canvas{display:block; width:100%; height:auto}
.foot__logo{display:inline-flex; align-items:center; gap:.08em; font-family:var(--display); font-weight:800; font-size:1.75rem; letter-spacing:-.02em; text-transform:lowercase; color:var(--ink); margin-bottom:1rem}
.foot__star{color:var(--lime-2); font-size:.62em; transform:translateY(-.5em)}
.foot__brand p{font-family:var(--mono); font-size:.8rem; line-height:1.6; color:var(--mute); max-width:32ch}
.foot__legal{display:flex; flex-direction:column; gap:.1rem; margin-top:.2rem}
.foot__legal a{font-family:var(--mono); font-size:.82rem; color:var(--ink); opacity:.7; padding:.32em 0; width:fit-content; transition:color .2s, opacity .2s}
.foot__legal a:hover{color:var(--lime-2); opacity:1}
.foot__col h4{font-family:var(--mono); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--lime-2); margin-bottom:1rem}
.foot__col a{display:block; font-family:var(--mono); font-size:.85rem; color:var(--ink); opacity:.72; padding:.35em 0; transition:color .2s, opacity .2s}
.foot__col a:hover{color:var(--lime-2); opacity:1}
.foot__bar{display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:.6rem 1.4rem; text-align:center; padding-top:1.5rem; border-top:1px solid rgba(10,10,10,.12);
  font-family:var(--mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--mute)}
.foot__bar a:hover{color:var(--lime-2)}

/* =========================================================
   ANIMACIONES CREATIVAS (Proceso / FAQ / CTA / Footer)
   ========================================================= */
/* PROCESO: reveal escalonado + barra lima que se dibuja + glitch */
.proc__grid{position:relative}
.proc__step{opacity:0; transform:translateY(30px); transition:opacity .6s var(--ease), transform .6s var(--ease)}
.proc__grid.in .proc__step{opacity:1; transform:none}
.proc__grid.in .proc__step:nth-child(3){transition-delay:.1s}
.proc__grid.in .proc__step:nth-child(4){transition-delay:.2s}
.proc__grid.in .proc__step:nth-child(5){transition-delay:.3s}
.proc__bar{position:absolute; left:0; top:0; height:2px; width:0; background:var(--lime); box-shadow:0 0 12px rgba(198,255,58,.6); z-index:3; transition:width 1.1s var(--ease) .25s}
.proc__grid.in .proc__bar{width:100%}
@keyframes procGlitch{0%,100%{clip-path:inset(0 0 0 0); transform:none}30%{clip-path:inset(30% 0 40% 0); transform:translateX(-2px)}60%{clip-path:inset(60% 0 8% 0); transform:translateX(2px)}}
.proc__step:hover .proc__t{animation:procGlitch .3s steps(2)}
.proc__step:hover .proc__n{color:var(--pink)}

/* FAQ: prompt >>, glitch al hover, cursor de tecleo */
.faq__q .qtxt{position:relative}
.faq__q .qtxt::before{content:">> "; color:var(--lime-2); font-family:var(--mono); opacity:0; transition:opacity .2s}
.faq__item.open .faq__q .qtxt::before, .faq__q:hover .qtxt::before{opacity:1}
@keyframes faqGlitch{0%,100%{transform:none}25%{transform:translateX(-2px)}50%{transform:translateX(2px)}75%{transform:translateX(-1px)}}
.faq__q:hover{animation:faqGlitch .25s steps(2)}
.faq__cap{display:inline-block; width:.5em; height:1.05em; background:var(--lime-2); vertical-align:-.15em; margin-left:.12em; animation:capBlink .8s steps(1) infinite}
@keyframes capBlink{0%,50%{opacity:1}50.01%,100%{opacity:0}}

/* CTA: haz de escáner que sube y baja */
.cta__beam{position:absolute; left:0; right:0; height:2px; top:50%; z-index:1; pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--lime),transparent); box-shadow:0 0 18px 3px rgba(198,255,58,.45); opacity:.55; animation:ctaBeam 5.5s var(--ease) infinite}
@keyframes ctaBeam{0%,100%{top:16%}50%{top:84%}}
.cta .btn{position:relative; will-change:transform}

/* FOOTER: marquee de texto + hover glitch en links */
.foot__marq{overflow:hidden; border-top:1px solid rgba(10,10,10,.12); border-bottom:1px solid rgba(10,10,10,.12); padding:.7rem 0; margin-bottom:clamp(2.5rem,6vh,4rem);
  white-space:nowrap; -webkit-mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.foot__marq .track{display:inline-block; animation:marq 24s linear infinite; will-change:transform}
.foot__marq b{display:inline-block; font-family:var(--display); font-weight:900; text-transform:uppercase; font-size:clamp(1.4rem,4vw,2.6rem);
  letter-spacing:-.02em; color:transparent; -webkit-text-stroke:1px rgba(10,10,10,.5); padding:0 1.2rem}
.foot__marq b em{font-style:normal; -webkit-text-stroke:1px var(--lime-2); color:transparent}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.foot__clock{color:var(--lime-2)}

/* =========================================================
   PANEL DE CONTACTO (botón Hablemos) — negro + lima · escáner
   ========================================================= */
.cmodal{position:fixed; inset:0; z-index:200; display:grid; place-items:center; padding:clamp(1rem,4vw,2rem);
  opacity:0; visibility:hidden; transition:opacity .35s var(--ease), visibility .35s}
.cmodal.open{opacity:1; visibility:visible}
.cmodal__scrim{position:absolute; inset:0; background:rgba(5,5,5,.72); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px)}
.cmodal__panel{position:relative; z-index:1; width:min(560px,100%); max-height:92vh; overflow:auto;
  background:#0A0A0A; border:1px solid #232323; padding:clamp(1.7rem,4vw,2.6rem);
  transform:translateY(26px) scale(.985); opacity:0; transition:transform .45s var(--ease), opacity .45s;
  background-image:linear-gradient(rgba(198,255,58,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(198,255,58,.035) 1px,transparent 1px);
  background-size:100% 34px,34px 100%}
.cmodal.open .cmodal__panel{transform:none; opacity:1}
.cmodal__cn{position:absolute; width:15px; height:15px; border:2px solid var(--lime); opacity:.7; z-index:3; pointer-events:none}
.cmodal__cn.a{top:9px;left:9px;border-right:0;border-bottom:0}
.cmodal__cn.b{top:9px;right:9px;border-left:0;border-bottom:0}
.cmodal__cn.c{bottom:9px;left:9px;border-right:0;border-top:0}
.cmodal__cn.d{bottom:9px;right:9px;border-left:0;border-top:0}
.cmodal__scan{position:absolute; left:0; right:0; top:0; height:2px; z-index:3; pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--lime),transparent); box-shadow:0 0 12px 2px rgba(198,255,58,.5); animation:cmScan 4.2s var(--ease) infinite}
@keyframes cmScan{0%,100%{top:0; opacity:.25}50%{top:calc(100% - 2px); opacity:.85}}
.cmodal__top{position:relative; z-index:2; display:flex; justify-content:space-between; align-items:center; margin-bottom:1.1rem}
.cmodal__tag{font-family:var(--mono); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--lime)}
.cmodal__x{background:0; border:0; cursor:pointer; font-family:var(--mono); font-size:.9rem; letter-spacing:.05em; color:var(--mute); transition:color .2s}
.cmodal__x:hover{color:var(--lime)}
.cmodal__title{position:relative; z-index:2; font-family:var(--display); font-weight:900; text-transform:uppercase; color:#fff;
  font-size:clamp(1.7rem,4.6vw,2.5rem); line-height:.95; letter-spacing:-.02em; margin-bottom:.5rem}
.cmodal__title em{font-style:normal; color:var(--lime)}
.cmodal__sub{position:relative; z-index:2; font-family:var(--mono); font-size:.8rem; line-height:1.5; color:var(--mute); margin-bottom:1.5rem}
.cmodal__form{position:relative; z-index:2; display:flex; flex-direction:column; gap:1.05rem}
.cmodal__row{display:grid; grid-template-columns:1fr 1fr; gap:1.05rem}
@media(max-width:520px){ .cmodal__row{grid-template-columns:1fr} }
.cmodal__form label{display:flex; flex-direction:column; gap:.45rem; font-family:var(--mono); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--mute)}
.cmodal__form input, .cmodal__form textarea{font-family:var(--mono); font-size:.9rem; color:#fff; background:rgba(255,255,255,.03);
  border:1px solid #262626; padding:.72em .8em; transition:border-color .2s, background .2s; text-transform:none; letter-spacing:0}
.cmodal__form input::placeholder, .cmodal__form textarea::placeholder{color:#5a5a5a}
.cmodal__form input:focus, .cmodal__form textarea:focus{outline:0; border-color:var(--lime); background:rgba(198,255,58,.06)}
.cmodal__form textarea{resize:vertical; min-height:84px}
.cmodal__chips{display:flex; flex-wrap:wrap; gap:.5rem}
.cmodal__chips button{font-family:var(--mono); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:#cfcfcf;
  background:rgba(255,255,255,.03); border:1px solid #2a2a2a; padding:.5em .8em; cursor:pointer; transition:border-color .15s, color .15s, background .15s}
.cmodal__chips button:hover{border-color:var(--lime); color:var(--lime)}
.cmodal__chips button.on{background:var(--lime); color:var(--ink); border-color:var(--lime)}
.cmodal__send{justify-content:center; margin-top:.3rem; font-size:.85rem; padding:1.05em 1.6em}
.cmodal__done{position:relative; z-index:2; text-align:center; padding:1.4rem 0 .6rem; display:flex; flex-direction:column; align-items:center; gap:.85rem}
.cmodal__doneicon{width:54px; height:54px; display:grid; place-items:center; border:2px solid var(--lime); border-radius:50%; color:var(--lime); font-size:1.5rem; box-shadow:0 0 22px -4px rgba(198,255,58,.6)}
.cmodal__done h3{font-family:var(--display); font-weight:800; text-transform:uppercase; color:#fff; font-size:1.35rem; letter-spacing:-.01em}
.cmodal__done p{font-family:var(--mono); font-size:.82rem; line-height:1.5; color:var(--mute); max-width:34ch}
body.cmodal-open{overflow:hidden}

/* =========================================================
   ADAPTACIÓN MÓVIL
   ========================================================= */
/* nav: en móvil solo logo + burger (el "Hablemos" vive en el menú móvil) */
@media(max-width:920px){
  .nav__cta .btn{display:none}
  .nav{padding:.6rem 1.1rem}
}
@media(max-width:820px){
  /* ---- LOADER: pantalla negra completa + marco simple (el SVG escalado se rompía) ---- */
  .loader-container{padding:14px; height:100svh; height:100dvh}
  .loader-svg{display:none}
  .loader-wrapper{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.2rem; border:2px solid var(--lime)}
  .loader-text-wrapper{position:static !important; grid-column:auto !important; top:auto !important; text-align:center; white-space:normal}
  .loader-text-wrapper.el1,.loader-text-wrapper.el4,.loader-text-wrapper.el5,.loader-text-wrapper.el6{display:none}
  .loader-text-wrapper.el2{font-size:2.6rem}
  .loader-text-wrapper.el3{font-size:1rem; opacity:.9}
  .loader-dot{width:9px; height:9px; min-width:9px; min-height:9px}

  /* ---- SERVICIOS: MISMO efecto que en PC (frame fijo + El Equipo sube) — compacto ---- */
  .svc__pin{padding:clamp(3rem,8vh,4.2rem) clamp(1.3rem,5vw,1.8rem) clamp(1.4rem,4vh,2.2rem)}
  .svc__intro{font-size:clamp(1.5rem,6.6vw,2.3rem); margin:.3rem 0 .1rem}
  .svc__grid{grid-template-columns:1fr; gap:.7rem; align-content:center}
  .svc__menu{grid-column:1; order:1; padding:0}
  .svc__panels{grid-column:1; order:2}
  .svc__list{gap:0}
  .svc__word{filter:blur(0); opacity:.38; font-size:clamp(1.45rem,6vw,2.1rem)}
  .svc__item.is-active .svc__word{opacity:1}
  .svc__sub{display:none}
  .svc__bracket{display:none}
  .svc__foot{display:none}
  /* detalle compacto para que quepa en la pantalla fija */
  .svc__detail{padding:1rem 1.05rem}
  .svc__card-head{font-size:1.1rem; margin:.45rem 0 .3rem}
  .svc__card-desc{font-size:.8rem; line-height:1.4; margin-bottom:.6rem}
  .svc__card-list{margin-bottom:.6rem}
  .svc__card-list li{padding:.38em 0 .38em 1.6em; font-size:.74rem}
  .svc__card-btn{padding:.7em 1.2em; font-size:.76rem}

  /* ---- HERO: aire y tamaños ---- */
  .hero__copy{bottom:clamp(4.5rem,14vh,8rem); width:min(92%,520px)}

  /* ---- FAQ: globo más contenido/bajo para que no tape las preguntas ---- */
  .faq__globe{width:72vw; height:72vw; opacity:.32; transform:translate(26%,46%)}

  /* ---- CTA: menos padding lateral ---- */
  .cta{padding:clamp(4rem,10vh,6rem) clamp(1.3rem,5vw,2rem)}

  /* ---- POPUP HABLEMOS: que la ventana scrolle y los corchetes queden en las esquinas ---- */
  .cmodal{align-items:start; overflow-y:auto; padding:1rem .9rem}
  .cmodal__panel{max-height:none; overflow:visible; margin:auto}
}
/* móviles estrechos */
@media(max-width:560px){
  h1,h2{overflow-wrap:break-word}
  .cmodal__panel{padding:1.4rem 1.15rem}
}