/* Interactive Zone · v3 · hero rehecho (intro + reel + nav tipo Fantasy). Fuentes alojadas en /fonts (regla 29). */
@font-face{font-family:'Outfit';src:url(../fonts/outfit-latin.woff2) format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Bricolage Grotesque';src:url(../fonts/bricolage-latin.woff2) format('woff2');font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:'Unbounded';src:url(../fonts/unbounded-latin.woff2) format('woff2');font-weight:200 900;font-style:normal;font-display:swap}
@property --a{syntax:'<angle>';inherits:false;initial-value:0deg}

:root{
  --ink:#050607; --paper:#F4F4F2; --white:#fff;
  --accent:#4479D5; --accent-soft:#8FB0F0; --accent-deep:#2F5FB8; --brand:#4479D5; --navy:#0E1A3A;
  --muted:#8A8A90; --line-d:rgba(255,255,255,.14); --line-l:rgba(7,7,8,.14);
  --font-display:'Unbounded','Outfit',system-ui,sans-serif;
  --font-body:'Outfit',system-ui,sans-serif;
  --pad:clamp(20px,4vw,56px);
  --ease:cubic-bezier(.2,.8,.2,1);
  --r:20px; /* radio único de esquinas: poner 0 para esquinas rectas */
  /* silueta del símbolo como máscara (core = relleno, rim = relleno + borde para la luz) */
  --m-core:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-8 -8 116 116'%3E%3Cpath d='M0 100L55 0V100Z'/%3E%3Crect x='63' y='0' width='20' height='55'/%3E%3Cpath d='M63 100V63A37 37 0 0 1 100 100Z'/%3E%3C/svg%3E");
  --m-rim:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-8 -8 116 116'%3E%3Cg stroke='%23000' stroke-width='5' stroke-linejoin='round'%3E%3Cpath d='M0 100L55 0V100Z'/%3E%3Crect x='63' y='0' width='20' height='55'/%3E%3Cpath d='M63 100V63A37 37 0 0 1 100 100Z'/%3E%3C/g%3E%3C/svg%3E");
  --m-line:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-8 -8 116 116'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M0 100L55 0V100Z'/%3E%3Crect x='63' y='0' width='20' height='55'/%3E%3Cpath d='M63 100V63A37 37 0 0 1 100 100Z'/%3E%3C/g%3E%3C/svg%3E");
}
*{box-sizing:border-box;margin:0;padding:0}
html:not(.lenis){scroll-behavior:smooth}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
body{font-family:var(--font-body);background:var(--ink);color:var(--white);font-size:1.06rem;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.lock{overflow:hidden}
a{color:inherit;text-decoration:none}
ul{list-style:none}
img,svg{display:block;max-width:100%}
p{margin:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{padding-inline:var(--pad);max-width:1480px;margin-inline:auto}
section{position:relative}
.dark{background:var(--ink);color:var(--white)}
.light{background:var(--paper);color:var(--ink)}
.eyebrow{font-size:.95rem;letter-spacing:.28em;text-transform:uppercase;font-weight:300;opacity:.75}
.display{font-family:var(--font-display);font-weight:700;letter-spacing:-.04em;line-height:.95}
.light .acc{color:var(--accent-deep)}
.dark .acc{color:var(--accent)}

/* ───────── barra superior: enlaces visibles + botón (mezcla Vercel / Framer). El menú a pantalla completa solo en celular ───────── */
.nav{position:fixed;inset:0 0 auto 0;z-index:70;display:flex;align-items:center;padding:22px var(--pad);color:var(--white);transition:color .35s;animation:navIn .7s .8s both}
.nav.on-light{color:var(--ink)}
.nav.open{color:var(--white)}
@keyframes navIn{from{opacity:0;transform:translateY(-8px)}}
.logo{display:flex;align-items:center;gap:16px}
.logo .mark{width:42px;height:42px;overflow:visible}
.logo .mark .tri,.logo .mark .bar{fill:currentColor}
.logo .mark .arc{fill:var(--accent)}
.nav.on-light:not(.open) .logo .mark .arc{fill:var(--accent-deep)}
.logo .mark path,.logo .mark rect{transition:transform .5s var(--ease)}
.logo:hover .tri{transform:translate(-4px,4px)}
.logo:hover .bar{transform:translateY(-6px)}
.logo:hover .arc{transform:translate(6px,2px)}
.logo .word{font-size:1rem;letter-spacing:.34em;font-weight:400;text-transform:uppercase;white-space:nowrap}
.links{display:flex;gap:clamp(22px,2.6vw,40px);margin-left:clamp(36px,5vw,84px);margin-right:auto;font-size:1rem}
.links a{opacity:.78;transition:opacity .2s,color .2s}
.links a:hover{opacity:1;color:var(--accent)}
.nav.on-light:not(.open) .links a:hover{color:var(--accent-deep)}
.ncta{font-weight:600;font-size:.95rem;padding:12px 24px;border-radius:99px;background:var(--white);color:var(--ink);transition:background .3s,color .3s,transform .3s var(--ease)}
.ncta:hover{background:var(--accent);transform:translateY(-1px)}
.nav.on-light:not(.open) .ncta{background:var(--ink);color:var(--white)}
.nav.on-light:not(.open) .ncta:hover{background:var(--accent-deep)}
.menu{display:none;margin-left:auto;font:600 15px/1 var(--font-body);color:inherit;background:rgba(255,255,255,.16);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:0;border-radius:10px;padding:14px 22px;cursor:pointer}
.nav.on-light:not(.open) .menu{background:rgba(7,7,8,.1)}

/* menú a pantalla completa (solo celular) */
.mm{position:fixed;inset:0;z-index:60;background:var(--ink);color:var(--white);display:flex;flex-direction:column;justify-content:center;padding:0 var(--pad);visibility:hidden;transform:translateY(-100%);transition:transform .8s var(--ease),visibility 0s .8s}
.mm.open{transform:none;visibility:visible;transition:transform .8s var(--ease)}
.mm ul{display:grid;gap:clamp(6px,1.6vh,16px)}
.mm li{overflow:hidden}
.mm a{display:flex;align-items:baseline;gap:18px;font-family:var(--font-display);font-weight:700;letter-spacing:-.04em;line-height:1.05;font-size:clamp(2.2rem,11vw,3.8rem);transform:translateY(105%);transition:transform .9s var(--ease),color .25s}
.mm.open a{transform:none}
.mm.open li:nth-child(2) a{transition-delay:.06s,0s}
.mm.open li:nth-child(3) a{transition-delay:.12s,0s}
.mm.open li:nth-child(4) a{transition-delay:.18s,0s}
.mm a small{font-family:var(--font-body);font-size:.95rem;font-weight:300;letter-spacing:.2em;opacity:.6}
.mm a:hover{color:var(--accent)}
.mm .mail{margin-top:clamp(28px,6vh,56px);font-size:1rem;opacity:.75}
.mm .mail a{display:inline;font:inherit;transform:none;letter-spacing:0;text-decoration:underline}

/* ───────── hero ───────── */
.heroZone{position:relative;height:200svh}
.hero{position:sticky;top:0;height:100svh;min-height:560px;background:#000;overflow:hidden;color:var(--white)}
.hero[data-t=light] .lema,.hero[data-t=light] .down,.hero[data-t=light] .cap{color:var(--ink)}
.stage{position:absolute;inset:0}
.scene{position:absolute;inset:0;opacity:0;transform:scale(1.07);transition:opacity 1.2s ease,transform 1.8s var(--ease);--u:min(.82vw,1.35vh);--ui:var(--accent)}
.scene.on{opacity:1;transform:none}
.scene[data-s=a]{background:#07090c}
.scene[data-s=b]{background:#e9e9e4;--ui:var(--accent-deep)}
.scene[data-s=c]{background:var(--accent);--ui:#050607}
.dev{position:absolute;background:#0c0f12;border:1px solid rgba(255,255,255,.16);will-change:transform}
.scene[data-s=c] .dev{border-color:rgba(7,7,8,.4)}
.dev .scr{position:absolute;inset:calc(var(--u)*1.3);overflow:hidden}
.scr b{display:block;height:calc(var(--u)*1.5);width:62%;border-radius:calc(var(--u)*.35);background:var(--ui);margin-bottom:calc(var(--u)*.9)}
.scr b.s{width:38%;opacity:.55}
.scr i{display:block;height:calc(var(--u)*.65);border-radius:calc(var(--u)*.3);background:rgba(255,255,255,.26);margin-bottom:calc(var(--u)*.65)}
.scr i.w{width:80%}
.scr i.n{width:55%}
.scr u{display:block;width:42%;height:calc(var(--u)*2.4);border-radius:99px;background:var(--ui);margin-top:calc(var(--u)*1.4)}
.scr .img{height:calc(var(--u)*9);border-radius:calc(var(--u)*.8);background:rgba(255,255,255,.1);margin-bottom:calc(var(--u)*1.2)}
.scr .row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:calc(var(--u)*.8);margin-top:calc(var(--u)*1.4)}
.scr .row em{height:calc(var(--u)*6);border-radius:calc(var(--u)*.6);background:rgba(255,255,255,.1)}
.scene[data-s=c] .scr i{background:rgba(255,255,255,.3)}
.scene[data-s=c] .scr .img,.scene[data-s=c] .scr .row em{background:rgba(255,255,255,.14)}
.scene[data-s=c] .scr b{background:var(--accent)}
.scene[data-s=c] .scr u{background:var(--accent)}
.scene[data-s=b] .scr i{background:rgba(255,255,255,.3)}
.phone{width:calc(var(--u)*17);height:calc(var(--u)*36);border-radius:calc(var(--u)*3)}
.laptop{width:calc(var(--u)*56);height:calc(var(--u)*35);border-radius:calc(var(--u)*1.2)}
.laptop::after{content:"";position:absolute;left:-6%;right:-6%;bottom:calc(var(--u)*-2.2);height:calc(var(--u)*1.7);background:#0c0f12;border:1px solid rgba(255,255,255,.16);border-radius:0 0 calc(var(--u)*1.4) calc(var(--u)*1.4)}
.tablet{width:calc(var(--u)*62);height:calc(var(--u)*42);border-radius:calc(var(--u)*2)}
/* escena A: dos teléfonos inclinados */
.scene[data-s=a] .p1{left:50%;top:40%;margin:calc(var(--u)*-18) 0 0 calc(var(--u)*-4);transform:perspective(1400px) rotateY(-24deg) rotateX(9deg) rotateZ(5deg)}
.scene[data-s=a] .p2{left:50%;top:40%;margin:calc(var(--u)*-12) 0 0 calc(var(--u)*-26);transform:perspective(1400px) rotateY(-24deg) rotateX(9deg) rotateZ(5deg) scale(.82);opacity:.55}
/* escena B: tableta sobre fondo claro */
.scene[data-s=b] .t1{left:50%;top:39%;margin:calc(var(--u)*-21) 0 0 calc(var(--u)*-31);transform:perspective(1600px) rotateY(16deg) rotateX(10deg) rotateZ(-5deg)}
/* escena C: laptop sobre color plano */
.scene[data-s=c] .l1{left:50%;top:40%;margin:calc(var(--u)*-19) 0 0 calc(var(--u)*-28);transform:perspective(1700px) rotateY(-18deg) rotateX(7deg) rotateZ(3deg)}
.scene[data-s=c] .p3{left:50%;top:40%;margin:calc(var(--u)*-4) 0 0 calc(var(--u)*14);transform:perspective(1400px) rotateY(-18deg) rotateX(7deg) rotateZ(3deg);width:calc(var(--u)*13);height:calc(var(--u)*27)}

.hcopy{position:absolute;left:var(--pad);bottom:clamp(28px,5vh,56px);z-index:10;animation:navIn .8s 3.2s both}
.hl{font-family:var(--font-display);font-weight:700;letter-spacing:-.04em;line-height:1;font-size:clamp(2.2rem,4.6vw,4.4rem)}
.hbtns{display:flex;gap:10px;margin-top:clamp(18px,3vh,30px)}
.hbtns a{padding:14px 26px;border-radius:99px;font-weight:600;font-size:1rem;transition:background .3s,color .3s,transform .3s var(--ease)}
.hbtns a:hover{transform:translateY(-2px)}
.hbtns .bw{background:var(--white);color:var(--ink)}
.hbtns .bw:hover{background:var(--accent)}
.hbtns .bg{background:rgba(255,255,255,.14);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.hbtns .bg:hover{background:rgba(255,255,255,.26)}
.hero[data-t=light] .hcopy,.hero[data-t=light] .hfacts{color:var(--ink)}
.hero[data-t=light] .hbtns .bw{background:var(--ink);color:var(--white)}
.hero[data-t=light] .hbtns .bw:hover{background:var(--accent-deep)}
.hero[data-t=light] .hbtns .bg{background:rgba(7,7,8,.1)}
.hero[data-t=light] .hbtns .bg:hover{background:rgba(7,7,8,.2)}
.hfacts{position:absolute;right:var(--pad);bottom:clamp(28px,5vh,56px);z-index:10;display:grid;gap:12px;font-size:clamp(.95rem,1.2vw,1.1rem);text-align:right;animation:navIn .8s 3.3s both}
.hfacts li{opacity:.9}
.cap{position:absolute;left:50%;bottom:34px;transform:translateX(-50%);z-index:10;font-size:.95rem;letter-spacing:.14em;text-transform:uppercase;opacity:.55;white-space:nowrap;animation:navIn .8s 3.3s both}
.hero[data-t=light] .cap{color:var(--ink)}

/* intro: las tres piezas se ensamblan en blanco, se apagan a negro con luz de borde, salen ondas y entra el reel */
.intro{position:absolute;inset:0;z-index:5;display:grid;place-items:center;overflow:hidden;pointer-events:none}
.portal{position:absolute;inset:0;width:100%;height:100%;overflow:hidden}
@keyframes introOut{to{opacity:0;visibility:hidden}}
.symbox{position:relative;width:min(30vmin,300px);aspect-ratio:1}
.symbox i{position:absolute;inset:0;-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
.build{position:absolute;inset:0;width:100%;height:100%;overflow:visible;fill:#fff;animation:buildOut .35s 4.2s ease forwards}
.build .p1{animation:inL 1s 2.75s var(--ease) both}
.build .p2{animation:inT 1s 2.9s var(--ease) both}
.build .p3{animation:inR 1s 3.05s var(--ease) both}
@keyframes inL{from{transform:translateX(-60px);opacity:0}}
@keyframes inT{from{transform:translateY(-60px);opacity:0}}
@keyframes inR{from{transform:translateX(60px);opacity:0}}
@keyframes buildOut{to{opacity:0}}
.sym{position:absolute;inset:0;opacity:0;animation:symIn .5s 1.45s ease forwards,symOut .6s 2.6s ease forwards}
@keyframes symIn{to{opacity:1}}
@keyframes symOut{to{opacity:0;transform:scale(1.07)}}
.sym .core{--m:var(--m-core);background:#000}
.sym .rim,.sym .glow{--m:var(--m-rim);background:conic-gradient(from var(--a),transparent 0deg,transparent 140deg,rgba(68,121,213,.5) 215deg,#4479D5 262deg,#fff 288deg,rgba(68,121,213,.4) 318deg,transparent 350deg),linear-gradient(rgba(68,121,213,.2),rgba(68,121,213,.2));animation:spin 3.2s linear infinite}
.sym .glow{filter:blur(24px);opacity:1}
@keyframes spin{to{--a:360deg}}
.ring{--m:var(--m-line);background:var(--accent);opacity:0;animation:ring 1.4s var(--ease) forwards;animation-delay:2.3s}
.ring.r2{animation-delay:2.52s}
.ring.r3{animation-delay:2.74s}
@keyframes ring{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(2.4)}}
.iw{position:absolute;top:calc(50% + min(15vmin,150px) + 44px);font-weight:300;font-size:clamp(1rem,1.7vw,1.35rem);letter-spacing:.62em;margin-right:-.62em;text-transform:uppercase;color:#fff;white-space:nowrap;animation:iwIn .8s .8s ease both,iwOut .35s 1.95s ease forwards}
@keyframes iwIn{from{opacity:0;letter-spacing:.9em}}
@keyframes iwOut{to{opacity:0}}

/* ───────── resto de la página (v1, se rehace sección por sección) ───────── */
.rv{opacity:0;transform:translateY(32px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv.in{opacity:1;transform:none}
.btn{display:inline-flex;align-items:center;gap:10px;padding:13px 24px;border-radius:99px;font-weight:600;font-size:.95rem;border:1px solid currentColor;transition:background .3s,color .3s,transform .3s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn.solid{background:var(--accent);color:var(--ink);border-color:var(--accent)}
.btn.solid:hover{background:var(--white);border-color:var(--white)}
.light .btn.solid{background:var(--ink);color:var(--white);border-color:var(--ink)}
.light .btn.solid:hover{background:var(--accent);color:var(--ink);border-color:var(--accent)}
.marquee{overflow:hidden;border-block:1px solid var(--line-d);padding:22px 0;background:var(--ink)}
.marquee .track{display:flex;gap:48px;width:max-content;animation:mq 32s linear infinite}
.marquee span{font-family:var(--font-display);font-size:clamp(1.6rem,3.4vw,2.8rem);font-weight:600;letter-spacing:-.03em;white-space:nowrap;display:flex;align-items:center;gap:48px}
.marquee span::after{content:"";width:12px;height:12px;border-radius:50%;background:var(--accent)}
@keyframes mq{to{transform:translateX(-50%)}}
.block{padding-block:clamp(80px,12vw,180px)}
.block h2{font-size:clamp(2.4rem,6.2vw,5.6rem);max-width:16ch;margin-top:20px}
.cols3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,64px);margin-top:clamp(48px,7vw,96px)}
.cols3 article{border-top:1px solid var(--line-l);padding-top:24px}
.cols3 .num{font-family:var(--font-display);font-size:.95rem;letter-spacing:.2em;opacity:.55}
.cols3 h3{font-family:var(--font-display);font-size:clamp(1.5rem,2.4vw,2.1rem);letter-spacing:-.03em;line-height:1.05;margin:18px 0 14px}
.cols3 p{opacity:.72;max-width:36ch}
.svc{margin-top:clamp(40px,6vw,80px);border-top:1px solid var(--line-d)}
.svc li{border-bottom:1px solid var(--line-d)}
.svc a{display:grid;grid-template-columns:70px 1.1fr 1fr 40px;gap:24px;align-items:center;padding:clamp(22px,3vw,40px) 0;transition:padding .45s var(--ease),color .3s}
.svc a:hover{padding-left:clamp(10px,2vw,28px);color:var(--accent)}
.svc .no{font-size:.95rem;opacity:.5;letter-spacing:.2em}
.svc h3{font-family:var(--font-display);font-size:clamp(1.7rem,4.2vw,3.6rem);letter-spacing:-.04em;line-height:1}
.svc p{opacity:.65;font-size:.95rem;max-width:38ch}
.svc .ar{font-size:1.6rem;transition:transform .4s var(--ease)}
.svc a:hover .ar{transform:translate(6px,-6px)}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:clamp(48px,7vw,90px)}
.plan{border:1px solid var(--line-l);border-radius:var(--r);padding:clamp(24px,3vw,40px);display:flex;flex-direction:column;gap:20px;background:var(--white);transition:transform .5s var(--ease)}
.plan:hover{transform:translateY(-8px)}
.plan.feat{background:var(--ink);color:var(--white);border-color:var(--ink)}
.plan h3{font-family:var(--font-display);font-size:1.7rem;letter-spacing:-.03em}
.plan .tag{font-size:.95rem;letter-spacing:.24em;text-transform:uppercase;opacity:.6;font-weight:400}
.plan .price{font-family:var(--font-display);font-size:clamp(2.4rem,4vw,3.4rem);letter-spacing:-.04em;line-height:1}
.plan .price small{font-size:.95rem;font-weight:400;letter-spacing:0;opacity:.6;margin-left:6px}
.plan .from{font-size:.95rem;opacity:.6;margin-top:-10px}
.plan ul{display:grid;gap:10px;font-size:.95rem;flex:1}
.plan li{display:flex;gap:10px}
.plan li::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--accent-deep);margin-top:.55em}
.plan.feat li::before{background:var(--accent)}
.plan .btn{justify-content:center}
.stack{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(36px,5vw,64px)}
.stack span{border:1px solid var(--line-d);border-radius:99px;padding:12px 24px;font-size:1.05rem;transition:background .3s,color .3s,border-color .3s}
.stack span:hover{background:var(--accent);color:var(--ink);border-color:var(--accent)}
.work{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:clamp(40px,6vw,80px)}
.card{aspect-ratio:4/5;border-radius:var(--r);padding:24px;display:flex;flex-direction:column;justify-content:space-between;background:#16161a;border:1px solid var(--line-d);overflow:hidden;position:relative;transition:transform .5s var(--ease)}
.card:hover{transform:translateY(-8px)}
.card .top{display:flex;justify-content:space-between;font-size:.95rem;letter-spacing:.2em;text-transform:uppercase;opacity:.6;position:relative}
.card h3{font-family:var(--font-display);font-size:clamp(1.6rem,2.6vw,2.2rem);letter-spacing:-.03em;line-height:1;position:relative}
.card p{opacity:.6;font-size:.95rem;margin-top:6px;position:relative}
footer{padding-block:clamp(80px,12vw,160px) 36px}
footer .big{font-family:var(--font-display);font-weight:700;letter-spacing:-.05em;line-height:.9;font-size:clamp(3.4rem,13vw,12rem)}
footer .big a{display:inline-block;transition:color .3s}
footer .big a:hover{color:var(--accent)}
footer .info{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;margin-top:clamp(48px,7vw,96px);padding-top:28px;border-top:1px solid var(--line-d);font-size:.95rem}
footer .info div{display:grid;gap:6px}
footer .info span{opacity:.5;font-size:.95rem;letter-spacing:.24em;text-transform:uppercase}
footer .by{margin-top:48px;display:flex;justify-content:space-between;opacity:.55;font-size:.95rem;flex-wrap:wrap;gap:12px}
@media (max-width:900px){
  .cols3,.plans,.work{grid-template-columns:1fr}
  .svc a{grid-template-columns:40px 1fr 30px}.svc p{display:none}
  .card{aspect-ratio:5/4}
  .cap{display:none}
  .hfacts{display:none}
  .links,.ncta{display:none}
  .menu{display:block}
  .logo .mark{width:34px;height:34px}
  .logo .word{font-size:.95rem;letter-spacing:.3em}
  .hcopy{right:var(--pad)}
  .scene{--u:min(1.4vw,1.5vh)}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .intro{display:none}
  .rv{opacity:1;transform:none}
  .nav,.tag,.cap,.down{opacity:1}
}

/* ───────── v3 · mecánicas de scroll (A3 A4 A5 A6 A7 A10). Las secciones nuevas son transparentes: el fondo lo cambia la página (A6). ───────── */
.tdark{color:var(--white)}
.tlight{color:var(--ink)}
.scene video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

.msg{padding-block:clamp(110px,18vw,260px)}
.msg .eyebrow{margin-bottom:clamp(24px,4vw,48px)}
.statement{font-family:var(--font-display);font-weight:600;letter-spacing:-.035em;line-height:1.05;font-size:clamp(2rem,5.2vw,4.8rem);max-width:24ch}
.statement .w{display:inline-block;white-space:pre}

/* A4 · sección fija */
.pin{min-height:100svh}
.pin-in{height:100svh;display:grid;grid-template-columns:1fr 1.15fr;align-items:center;gap:clamp(24px,5vw,80px);padding-inline:var(--pad);max-width:1480px;margin-inline:auto;overflow:hidden}
.pin-text .eyebrow{margin-bottom:clamp(20px,3vw,36px)}
.steps{position:relative;min-height:clamp(220px,34vh,320px)}
.st{position:absolute;inset:0 auto auto 0;max-width:30em}
.st .n{font-family:var(--font-display);font-size:.95rem;letter-spacing:.2em;opacity:.55}
.st h3{font-family:var(--font-display);font-weight:700;letter-spacing:-.04em;line-height:1;font-size:clamp(2rem,4.2vw,3.8rem);margin:14px 0 18px}
.st p{opacity:.75;font-size:clamp(1rem,1.3vw,1.2rem);max-width:34ch}
.vis{--u:min(.82vw,1.4vh);--ui:var(--accent);display:grid;place-items:center;min-height:0}
.vis .dev{position:relative}
.vis .scr{position:absolute;inset:calc(var(--u)*1.3)}
.pdev{transform-origin:50% 50%;transform:perspective(1600px) rotateY(-14deg) rotateX(7deg) rotateZ(2deg)}
.pdev .scr{opacity:0}
.pdev .scr.s0{opacity:1}

/* A5 · paneles de servicio */
.pnl{position:sticky;top:0;height:100svh;min-height:560px;display:flex;align-items:center;overflow:hidden}
.veil{position:absolute;inset:0;background:#000;opacity:0;pointer-events:none;z-index:20}
.stg{display:block;will-change:transform}
#mensaje{position:relative;z-index:2;margin-top:-100svh}
#valor{position:relative;z-index:2}
.pnl+.pnl{margin-top:-25svh}
#mas{position:relative;z-index:2;margin-top:-100svh}
.pnl>.wrap{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,80px);align-items:center}
.pnl .no{font-family:var(--font-display);font-size:.95rem;letter-spacing:.2em;opacity:.6}
.ptitle{font-family:var(--font-display);font-weight:700;letter-spacing:-.045em;line-height:.95;font-size:clamp(3rem,8.4vw,8rem);margin:18px 0 26px}
.ptitle .ln{display:block;overflow:hidden;padding-bottom:.1em}
.ptitle .ln>span{display:block}
.pd{max-width:36ch;font-size:clamp(1rem,1.35vw,1.2rem);opacity:.8}
.pbtn{display:inline-flex;margin-top:30px;padding:14px 26px;border-radius:10px;font-weight:600;font-size:.95rem;background:rgba(255,255,255,.16);transition:background .3s}
.pbtn:hover{background:rgba(255,255,255,.3)}
.tlight .pbtn{background:rgba(7,7,8,.1)}
.tlight .pbtn:hover{background:rgba(7,7,8,.2)}
.pnl .vis{--u:min(.68vw,1.2vh)}
.pv1{transform:perspective(1400px) rotateY(-22deg) rotateX(8deg) rotateZ(5deg)}
.pv2{transform:perspective(1700px) rotateY(-16deg) rotateX(6deg) rotateZ(3deg)}
.pv3{transform:perspective(1600px) rotateY(16deg) rotateX(8deg) rotateZ(-4deg)}
.pv4{transform:perspective(1400px) rotateY(-20deg) rotateX(8deg) rotateZ(5deg)}

@media (max-width:900px){
  .pin-in{grid-template-columns:1fr;grid-template-rows:auto 1fr;align-content:center;gap:24px;padding-top:80px}
  .vis{--u:min(1.3vw,1.2vh)}
  .pnl>.wrap{grid-template-columns:1fr}
  .pnl{padding-block:100px 60px;min-height:100svh}
  .pnl .vis{--u:min(1.3vw,1.1vh)}
  .ptitle{font-size:clamp(2.8rem,14vw,5rem)}
}
@media (prefers-reduced-motion:reduce){
  .statement .w{opacity:1!important}
  .st{position:relative;margin-bottom:28px}
  .pdev .scr{opacity:1;position:relative}
}

/* ───────── barra compacta al bajar: solo logo + Cotizar; vuelve completa al subir ───────── */
.links{max-width:640px;white-space:nowrap;transition:opacity .35s ease,transform .5s var(--ease),max-width .7s var(--ease),margin .7s var(--ease)}
.logo{transition:gap .6s var(--ease)}
.logo .word{display:inline-block;max-width:220px;overflow:hidden;transition:opacity .35s ease,max-width .6s var(--ease)}
.nav.compact .links{overflow:hidden;opacity:0;transform:translateY(-12px);max-width:0;margin-left:0;pointer-events:none}
.nav.compact .logo .word{opacity:0;max-width:0}
.nav.compact .logo{gap:0}

/* ───────── Zoom con paralaje: siete ventanas con animación o video; la central crece hasta llenar la pantalla ───────── */
.zoomsec{position:relative;z-index:2;padding-top:clamp(90px,14vw,200px)}
.zhead{text-align:center}
.zhead .display{font-size:clamp(2.4rem,6vw,5.4rem);max-width:15ch;margin:20px auto 0}
.znote{margin-top:22px;font-size:.95rem;letter-spacing:.14em;text-transform:uppercase;opacity:.5}
.zrun{position:relative;height:300svh;margin-top:clamp(40px,8vw,100px)}
.zstick{position:sticky;top:0;height:100svh;overflow:hidden}
.zl{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;will-change:transform}
.zt{--m:1;position:relative;overflow:hidden;container-type:size;background:#0c0f12;
  width:calc(var(--w,25vw)*var(--m));height:var(--h,25vh);left:calc(var(--x,0vw)*var(--m));top:var(--y,0vh)}
.zt video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2}
.z0{background:#0c0f12}
.z1{--x:5vw;--y:-30vh;--w:35vw;--h:30vh;background:#0E1A3A}
.z2{--x:-25vw;--y:-10vh;--w:20vw;--h:45vh;background:var(--accent)}
.z3{--x:27.5vw;--w:25vw;--h:25vh;background:#16161a}
.z4{--x:5vw;--y:27.5vh;--w:20vw;--h:25vh;background:#E9E9E4}
.z5{--x:-22.5vw;--y:27.5vh;--w:30vw;--h:25vh;background:#050607}
.z6{--x:25vw;--y:22.5vh;--w:15vw;--h:15vh;background:var(--accent-deep)}

/* z0 · página que se desplaza */
.rolling{animation:rollY 10s linear infinite}
@keyframes rollY{to{transform:translateY(-50%)}}
.b-hero{height:36cqh;background:var(--accent);margin:4cqh 6cqw}
.b-hero.s{background:#1b2024}
.b-line{display:block;height:3cqh;width:72cqw;margin:2cqh 6cqw;background:rgba(255,255,255,.3)}
.b-line.n{width:50cqw}
.b-row{display:grid;grid-template-columns:repeat(3,1fr);gap:3cqw;margin:4cqh 6cqw}
.b-row i{display:block;height:20cqh;background:#1b2024}
.b-btn{width:30cqw;height:7cqh;border-radius:99px;background:var(--accent);margin:4cqh 6cqw}
/* z1 · barras */
.bars{display:flex;align-items:flex-end;gap:5cqw;height:100%;padding:12cqh 10cqw}
.bars i{flex:1;height:100%;background:var(--accent);transform-origin:bottom;animation:bar 2.4s ease-in-out infinite alternate;animation-delay:calc(var(--n)*-.5s)}
@keyframes bar{from{transform:scaleY(.18)}to{transform:scaleY(1)}}
/* z2 · filas que se deslizan */
.rows i{display:block;height:8cqh;width:62cqw;margin:5cqh 0 0 10cqw;border-radius:99px;background:#050607;animation:slideX 3s ease-in-out infinite alternate;animation-delay:calc(var(--n)*-.45s)}
.rows i:first-child{margin-top:7cqh}
@keyframes slideX{from{transform:translateX(0)}to{transform:translateX(20cqw)}}
/* z3 · líneas que se escriben */
.code i{display:block;height:3.6cqh;width:var(--lw);margin:3.6cqh 0 0 8cqw;background:var(--accent);transform-origin:left;animation:typeX 3.6s steps(14) infinite;animation-delay:calc(var(--n)*.3s)}
.code i.w{background:rgba(255,255,255,.55)}
.code i:first-child{margin-top:8cqh}
@keyframes typeX{0%{transform:scaleX(0)}55%,100%{transform:scaleX(1)}}
/* z4 · anillos */
.ring{position:absolute;left:50%;top:50%;width:46cqmin;height:46cqmin;margin:-23cqmin 0 0 -23cqmin;border-radius:50%;border:2.4cqmin solid #050607;animation:pulse 3.2s ease-out infinite}
.ring.r2{animation-delay:-1.6s}
@keyframes pulse{0%{transform:scale(.2);opacity:1}100%{transform:scale(1.5);opacity:0}}
/* z5 · píldoras que corren */
.pills{overflow:hidden;margin-top:14cqh}
.pills.b{margin-top:8cqh;opacity:.45}
.pills>div{display:flex;gap:4cqw;width:max-content;animation:mq2 7s linear infinite}
.pills.b>div{animation-direction:reverse;animation-duration:9s}
.pills i{display:block;width:24cqw;height:15cqh;border-radius:99px;background:var(--accent)}
@keyframes mq2{to{transform:translateX(-50%)}}
/* z6 · carga */
.ld{position:absolute;left:14cqw;right:14cqw;top:50%;height:11cqh;margin-top:-5.5cqh;border-radius:99px;background:rgba(255,255,255,.3);overflow:hidden}
.ld::after{content:"";position:absolute;inset:0;background:#fff;transform-origin:left;animation:fillX 2.6s ease-in-out infinite}
@keyframes fillX{0%{transform:scaleX(0)}70%,100%{transform:scaleX(1)}}
@media (max-width:900px){.zt{--m:1.7}.zrun{height:260svh}}

/* ───────── videos reales dentro de los dispositivos ───────── */
.dev .scr.v{inset:calc(var(--u)*.85);background:#000;overflow:hidden}
.phone .scr.v{border-radius:calc(var(--u)*2.2)}
.laptop .scr.v{inset:calc(var(--u)*.7);border-radius:calc(var(--u)*.5)}
.tablet .scr.v{inset:calc(var(--u)*.9);border-radius:calc(var(--u)*1.1)}
.scr.v video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.pdev .scr.v{background:#000}

/* ───────── escena inmersiva (videos a pantalla completa, transición por portal) ───────── */
.imm{position:relative;z-index:2;margin-top:-100svh;height:330svh}
.imm-stick{position:sticky;top:0;height:100svh;overflow:hidden;background:#000}
.iscene{position:absolute;inset:0;overflow:hidden;background:#000}
.iscene+.iscene{visibility:hidden}
.iscene video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;transform-origin:50% 50%}
.iveil{position:absolute;inset:0;background:rgba(0,0,0,.62)}
.icopy{position:absolute;left:var(--pad);bottom:clamp(48px,11vh,120px);max-width:min(820px,88vw);z-index:3}
.icopy .display{font-size:clamp(2.6rem,7vw,6.4rem);margin:16px 0 22px}
.ip{max-width:46ch;font-size:clamp(1rem,1.35vw,1.2rem);opacity:.88}
.icred{position:absolute;right:var(--pad);bottom:clamp(48px,11vh,120px);z-index:3;font-size:.95rem;letter-spacing:.2em;text-transform:uppercase;opacity:.6}
.iring{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:6}

/* ───────── acordeón de proyectos (de MS&S) ───────── */
.proj{position:relative;z-index:2;padding-block:clamp(90px,12vw,170px)}
.proj .display{font-size:clamp(2.4rem,6vw,5.4rem);max-width:14ch;margin:20px 0 clamp(36px,5vw,64px)}
.acordeon{display:flex;gap:10px;height:min(72vh,640px)}
.ha-panel{position:relative;flex:1 1 0;min-width:0;overflow:hidden;background:#16161a;border-radius:var(--r);transition:flex-grow .7s var(--ease);cursor:pointer}
.ha-panel.active{flex-grow:7}
.ha-img,.ha-img video{position:absolute;inset:0;width:100%;height:100%}
.ha-img video{object-fit:cover;object-position:top center}
.ha-panel::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.55);transition:opacity .6s ease;pointer-events:none}
.ha-panel.active::after{opacity:0}
.ha-label{position:absolute;left:22px;bottom:22px;z-index:2;font-family:var(--font-display);font-weight:700;letter-spacing:-.03em;font-size:clamp(1.3rem,2.4vw,2.2rem);white-space:nowrap;transition:transform .6s var(--ease)}
.ha-panel:not(.active) .ha-label{transform-origin:left bottom;transform:rotate(-90deg) translate(0,22px);left:28px;bottom:26px}
.ha-go{position:absolute;right:20px;bottom:20px;z-index:3;padding:12px 22px;border-radius:99px;background:var(--white);color:var(--ink);font-weight:600;font-size:.95rem;opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity .4s ease .15s,transform .5s var(--ease) .15s}
.ha-panel.active .ha-go{opacity:1;transform:none;pointer-events:auto}
.ha-go:hover{background:var(--accent)}
@media (max-width:900px){
  .acordeon{flex-direction:column;height:84vh}
  .ha-panel:not(.active) .ha-label{transform:none;left:22px;bottom:50%;margin-bottom:-.6em}
  .imm{height:300svh}
}

/* ───────── contacto con mapa interactivo ───────── */
footer{position:relative;overflow:hidden}
#mapa{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
footer>.wrap{position:relative;z-index:1}

/* ───────── hero claro con coreografía de tarjetas de video (v10) ───────── */
.hero{background:#F4F4F2;color:var(--ink)}
.stage{background:#F4F4F2}
#reel{position:absolute;inset:0;width:100%;height:100%;display:block}
.reelsrc{position:absolute;left:0;top:0;width:2px;height:2px;overflow:hidden;opacity:.01;pointer-events:none}
.reelsrc video{width:2px;height:2px}
.rcopy{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:10;text-align:center;pointer-events:none;opacity:0;animation:navIn .9s 3.9s both}
.rey{font-size:.95rem;letter-spacing:.24em;text-transform:uppercase;opacity:.6;margin-bottom:.9em}
.rh{font-family:var(--font-display);font-weight:700;letter-spacing:-.035em;line-height:1.02}
.rbtns{position:absolute;left:50%;z-index:10;display:flex;gap:10px;transform:translateX(-50%);opacity:0;animation:navIn .9s 4.1s both}
.rbtns a{padding:14px 26px;border-radius:99px;font-weight:600;font-size:1rem;transition:background .3s,color .3s,transform .3s var(--ease)}
.rbtns a:hover{transform:translateY(-2px)}
.rbtns .bw{background:var(--ink);color:var(--white)}
.rbtns .bw:hover{background:var(--accent-deep)}
.rbtns .bg{background:rgba(7,7,8,.08)}
.rbtns .bg:hover{background:rgba(7,7,8,.16)}
.rhint{margin-top:1.1em;font-size:.95rem;letter-spacing:.24em;text-transform:uppercase;opacity:.5}
/* durante el intro negro, la barra se ve clara */
.intro-on .nav,.intro-on .nav.on-light{color:#fff}
.intro-on .nav.on-light:not(.open) .ncta{background:#fff;color:var(--ink)}
.intro-on .nav.on-light:not(.open) .logo .mark .arc{fill:var(--accent)}
@media (max-width:900px){.rhint{display:none}}

.rbtns a{white-space:nowrap}
@media (max-width:900px){.rbtns a{padding:13px 20px;font-size:.95rem}}

/* ───────── HERO 2 · pila de capas en 3D ───────── */
.s3d{position:absolute;transform-style:preserve-3d;will-change:transform}
.pl{position:absolute;inset:0;transform-style:preserve-3d;border-radius:var(--r);overflow:hidden;background:#fff;border:1px solid rgba(7,7,8,.14);will-change:transform,opacity;opacity:0}
.pl video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.h2top{position:absolute;left:0;right:0;top:clamp(86px,12vh,120px);z-index:10;text-align:center;pointer-events:none;opacity:0;animation:navIn .9s 3.4s both}
.h2t{font-family:var(--font-display);font-weight:700;letter-spacing:-.04em;line-height:1;font-size:clamp(2.2rem,5.2vw,4.8rem);padding-inline:var(--pad)}
.hero .h2t .acc{color:var(--accent-deep)}
.h2card{position:absolute;left:var(--pad);bottom:clamp(28px,6vh,60px);z-index:10;width:min(330px,80vw);background:#fff;border:1px solid rgba(7,7,8,.1);border-radius:var(--r);padding:20px 22px;opacity:0;animation:navIn .9s 3.7s both}
.h2card .c1{font-size:.95rem;letter-spacing:.2em;opacity:.55}
.h2card h3{font-family:var(--font-display);font-size:1.5rem;letter-spacing:-.03em;margin:6px 0 4px;transition:opacity .25s,transform .35s var(--ease)}
.h2card p{font-size:.95rem;opacity:.75;transition:opacity .25s,transform .35s var(--ease);min-height:2.9em}
.h2card.sw h3,.h2card.sw p{opacity:0;transform:translateY(8px)}
.cbars{display:flex;gap:6px;margin-top:14px}
.cbars i{flex:1;height:4px;background:rgba(7,7,8,.12);transition:background .4s}
.cbars i.on{background:var(--accent-deep)}
.h2btns{position:absolute;right:var(--pad);bottom:clamp(28px,6vh,60px);z-index:10;display:flex;gap:10px;opacity:0;animation:navIn .9s 3.9s both}
.h2btns a{padding:14px 26px;border-radius:99px;font-weight:600;font-size:1rem;white-space:nowrap;transition:background .3s}
.h2btns .bw{background:var(--ink);color:var(--white)}
.h2btns .bw:hover{background:var(--accent-deep)}
.h2btns .bg{background:rgba(7,7,8,.08)}
.h2btns .bg:hover{background:rgba(7,7,8,.16)}
@media (max-width:700px){.h2btns{display:none}.h2card{width:min(300px,72vw)}}

/* ───────── HERO 3 · nombre gigante y ventana de video ───────── */
.h3sub{position:absolute;left:0;right:0;text-align:center;font-size:.95rem;letter-spacing:.2em;text-transform:uppercase;opacity:0;z-index:2;animation:navIn .9s 3.4s both}
.wm{position:absolute;left:var(--pad);right:var(--pad);z-index:2;font-family:var(--font-display);font-weight:700;letter-spacing:-.045em;line-height:.8;white-space:nowrap;transform-origin:50% 0;opacity:0;animation:navIn .9s 3.2s both}
.wm span{display:inline-block}
.win{position:absolute;bottom:0;overflow:hidden;background:#111;z-index:3;cursor:pointer;border-radius:var(--r)}
.wv{position:absolute;inset:0}
.wv+.wv{clip-path:inset(100% 0 0 0)}
.wv video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.wlbl{position:absolute;left:24px;bottom:24px;z-index:5;color:#fff;background:rgba(7,7,8,.62);padding:14px 20px;border-radius:var(--r);display:grid;gap:2px;transition:opacity .3s}
.wlbl b{font-family:var(--font-display);font-size:1.25rem;letter-spacing:-.02em}
.wlbl span{font-size:.95rem;opacity:.8}
.wlbl.sw{opacity:0}

/* conmutador temporal para comparar los tres heros */
.hsw{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);z-index:90;display:flex;gap:6px;background:rgba(7,7,8,.86);padding:6px;border-radius:99px}
.hsw a{padding:8px 16px;border-radius:99px;color:#fff;font-size:.95rem;font-weight:600}
.hsw a.on{background:var(--accent);color:var(--ink)}

/* intro: primero las letras, luego el símbolo */
.lets{position:absolute;top:50%;left:0;right:0;transform:translateY(-50%);text-align:center;font-weight:300;font-size:clamp(1.6rem,4.2vw,3.4rem);letter-spacing:.5em;margin-right:-.5em;color:#fff;white-space:nowrap;animation:letsOut .45s 2.3s ease forwards}
.lets span{display:inline-block;opacity:0;transform:translateY(.5em);animation:letIn .6s calc(.15s + var(--i)*.065s) var(--ease) forwards}
@keyframes letIn{to{opacity:1;transform:none}}
@keyframes letsOut{to{opacity:0;transform:scale(1.06)}}
.pre{position:absolute;inset:0;background:#000;animation:preOut .01s 4.15s forwards}
@keyframes preOut{to{opacity:0;visibility:hidden}}

/* hero simple (texto) */
.heroZone{height:auto}
.hero0{position:relative;display:grid;place-items:center;text-align:center;background:#F4F4F2;color:var(--ink)}
.h0{position:relative;z-index:3;max-width:960px;padding:0 24px;animation:navIn .9s 5.1s both}
.h0 .eyebrow{color:var(--ink);opacity:.6;margin-bottom:22px}
.h0t{font-family:var(--font-display);font-weight:700;letter-spacing:-.035em;line-height:1.02;font-size:clamp(2.6rem,7vw,6rem)}
.h0t .acc{color:var(--accent-deep)}
.h0p{margin:26px auto 0;max-width:560px;font-size:clamp(1rem,1.5vw,1.2rem);opacity:.75}
.h0b{display:flex;gap:10px;justify-content:center;margin-top:34px;flex-wrap:wrap}
.h0b a{padding:14px 26px;border-radius:99px;font-weight:600;font-size:1rem;white-space:nowrap}
.h0b .bw{background:var(--ink);color:var(--white)}
.h0b .bg{background:rgba(7,7,8,.08)}

/* la barra de navegación aparece solo cuando el símbolo terminó de abrirse */
.intro-on .nav{opacity:0;visibility:hidden;animation:none}
.nav{animation:navIn .7s 0s both}
.hero0 + .marquee{margin-top:0}

/* ───────── submenú de Servicios ───────── */
.links{align-items:center}
.dd{position:relative}
.ddt{display:inline-flex;align-items:center;gap:7px}
.ddt svg{width:10px;height:6px;transition:transform .3s var(--ease)}
.dd:hover .ddt svg,.dd:focus-within .ddt svg{transform:rotate(180deg)}
.mega{position:absolute;top:100%;left:-28px;padding-top:26px;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .25s ease,transform .35s var(--ease),visibility 0s .25s;white-space:normal;z-index:80}
.dd:hover .mega,.dd:focus-within .mega{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.mi{display:grid;grid-template-columns:1fr 1fr;gap:12px 44px;width:min(760px,92vw);padding:30px 34px 22px;background:#0E0E10;color:var(--white);border-radius:var(--r);box-shadow:0 40px 90px rgba(0,0,0,.4)}
.mi .mh{display:block;font-family:var(--font-display);font-weight:700;font-size:1.35rem;letter-spacing:-.02em;opacity:1;color:var(--white)}
.mi .mh:hover{color:var(--accent)}
.mi p{margin:8px 0 14px;font-size:.95rem;line-height:1.45;opacity:.6}
.mi ul{display:grid;gap:2px}
.mi li a{display:block;padding:7px 0;font-size:.95rem;opacity:.82;color:var(--white)}
.mi li a:hover{opacity:1;color:var(--accent)}
.mi .mall{grid-column:1/-1;margin-top:8px;padding-top:16px;font-size:.95rem;font-weight:600;color:var(--accent);opacity:1}
.nav.compact .mega{display:none}
.mm .sub a{font-size:clamp(1.3rem,6vw,1.9rem);opacity:.7;padding-left:42px}

/* ───────── dos líneas (index) ───────── */
.slead{max-width:60ch;margin-top:22px;font-size:clamp(1rem,1.4vw,1.2rem);line-height:1.55;opacity:.75}
.ulk{text-decoration:underline;text-underline-offset:4px}
.lns{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,28px);margin-top:clamp(40px,6vw,80px)}
.ln{display:flex;flex-direction:column;padding:clamp(28px,3.4vw,52px);border-radius:var(--r);min-height:560px}
.ln.web{background:#F4F4F2;color:var(--ink)}
.ln.sw{background:#0E1A3A;color:var(--white)}
.ln .eyebrow{opacity:.6}
.ln h3{margin-top:18px;font-family:var(--font-display);font-weight:700;letter-spacing:-.04em;line-height:1;font-size:clamp(2rem,3.6vw,3.4rem)}
.ln .lt{margin-top:16px;max-width:42ch;line-height:1.5;opacity:.75;font-size:clamp(1rem,1.2vw,1.1rem)}
.ln ul{margin-top:30px;display:grid}
.ln li a{display:flex;justify-content:space-between;align-items:center;padding:13px 0;font-size:1.05rem;font-weight:500;transition:padding .35s var(--ease),color .3s}
.ln li a:hover{padding-left:10px}
.ln.web li a:hover{color:var(--accent-deep)}
.ln.sw li a:hover{color:var(--accent)}
.ln .lgo{margin-top:auto;align-self:flex-start;padding:14px 26px;border-radius:99px;font-weight:600;font-size:1rem}
.ln.web .lgo{background:var(--ink);color:var(--white)}
.ln.sw .lgo{background:var(--white);color:var(--ink)}
.ln ul{margin-bottom:34px}
@media (max-width:900px){.lns{grid-template-columns:1fr}.ln{min-height:0}}

/* ───────── página de servicios ───────── */
.sub .sphead{min-height:78svh;height:auto;padding-top:120px;padding-bottom:60px}
.sub .h0{animation-delay:.1s}
.dets{margin-top:clamp(40px,6vw,80px)}
.det{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(24px,5vw,80px);padding:clamp(32px,4.4vw,64px) 0;scroll-margin-top:100px}
.dark .det{border-top:1px solid var(--line-d)}
.light .det{border-top:1px solid rgba(7,7,8,.14)}
.det .no{font-family:var(--font-display);font-size:.95rem;letter-spacing:.2em;opacity:.55}
.det h3{margin-top:12px;font-family:var(--font-display);font-weight:700;letter-spacing:-.04em;line-height:1;font-size:clamp(2rem,3.8vw,3.6rem)}
.det .dl{margin-top:14px;font-size:1.1rem;opacity:.7}
.det .db p{line-height:1.6;font-size:clamp(1rem,1.25vw,1.15rem);opacity:.85}
.det .db ul{margin-top:22px;display:grid;gap:10px}
.det .db li{position:relative;padding-left:22px;line-height:1.45;font-size:1rem}
.det .db li:before{content:"";position:absolute;left:0;top:.55em;width:8px;height:8px;background:var(--accent)}
.light .det .db li:before{background:var(--accent-deep)}
.sbtn{display:inline-block;margin-top:clamp(28px,4vw,56px);padding:15px 30px;border-radius:99px;font-weight:600;font-size:1rem}
.dark .sbtn{background:var(--white);color:var(--ink)}
.light .sbtn{background:var(--ink);color:var(--white)}
.steps{margin-top:clamp(40px,6vw,80px);display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,44px)}
.steps .no{font-family:var(--font-display);font-size:.95rem;letter-spacing:.2em;opacity:.55}
.steps h3{margin-top:14px;font-family:var(--font-display);font-weight:700;letter-spacing:-.03em;font-size:1.5rem}
.steps p{margin-top:10px;line-height:1.5;opacity:.7}
@media (max-width:900px){.det{grid-template-columns:1fr}.steps{grid-template-columns:1fr 1fr}}
.steps{list-style:none;padding:0}

/* ───────── tipos de servicio (sin precios) ───────── */
.tipos{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2vw,28px);margin-top:clamp(40px,6vw,80px)}
.tp{padding:clamp(26px,3vw,44px);background:var(--white);border-radius:var(--r);display:flex;flex-direction:column;gap:14px}
.tp .tag{font-family:var(--font-display);font-size:.95rem;letter-spacing:.2em;opacity:.55}
.tp h3{font-family:var(--font-display);font-weight:700;letter-spacing:-.035em;line-height:1;font-size:clamp(1.8rem,2.8vw,2.6rem)}
.tp p{line-height:1.55;opacity:.75;max-width:46ch}
.tp ul{margin-top:8px;display:grid;gap:9px}
.tp li{position:relative;padding-left:22px;line-height:1.4}
.tp li:before{content:"";position:absolute;left:0;top:.55em;width:8px;height:8px;background:var(--accent-deep)}
.tcta{display:flex;align-items:center;gap:28px;flex-wrap:wrap;margin-top:clamp(32px,4vw,56px)}
.tcta .sbtn{margin-top:0}
@media (max-width:900px){.tipos{grid-template-columns:1fr}}

/* ───────── hero 3D (símbolo de vidrio negro + paisaje en blanco y negro) ───────── */
.hero0{display:block;background:#000;color:#fff}
.st4{position:absolute;inset:0;z-index:1;background:#000}
.st4 canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.st4 #sym{z-index:2}
.symfb{position:absolute;left:50%;top:46%;width:min(34vmin,320px);transform:translate(-50%,-50%)}
.h0{position:absolute;left:var(--pad);bottom:clamp(40px,9vh,96px);z-index:6;max-width:min(780px,60vw);text-align:left;padding:0}
.h0 .eyebrow{color:#fff;opacity:.7;margin-bottom:20px}
.h0t{font-size:clamp(2.4rem,5.6vw,5.2rem)}
.h0t .acc{color:#fff;opacity:.62}
.h0p{margin:22px 0 0;max-width:46ch;font-size:clamp(1rem,1.3vw,1.15rem);opacity:.78}
.h0b{position:absolute;right:var(--pad);bottom:clamp(40px,9vh,96px);z-index:6;display:flex;gap:10px;margin:0;opacity:0;animation:navIn .9s 5.3s both}
.h0b .bw{background:#fff;color:#000}
.h0b .bg{background:rgba(255,255,255,.16);color:#fff}
.h0b .bg:hover{background:rgba(255,255,255,.28)}
@media (max-width:900px){.h0{max-width:none;right:var(--pad);bottom:clamp(110px,18vh,160px)}.h0b{left:var(--pad);right:auto;bottom:clamp(36px,6vh,60px)}}

/* ───────── marca Interactive Zone ───────── */
.logo{gap:14px}
.logo .mark{width:auto;height:46px}
.logo .word{height:20px;width:auto;max-width:300px;overflow:hidden;transition:opacity .35s,max-width .6s var(--ease)}
.nav.on-light{--lw:#0E1A3A}
.nav.open{--lw:#fff}
.nav.compact .logo .word{opacity:0;max-width:0}
.build .lw{}
.lets{font-weight:300;letter-spacing:.42em;margin-right:-.42em}

/* ───────── hero: el mundo ───────── */
.hname{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);z-index:5;text-align:center;font-family:var(--font-display);font-weight:700;letter-spacing:-.045em;line-height:.9;text-transform:uppercase;font-size:clamp(2.6rem,9.2vw,9.6rem);color:#fff;mix-blend-mode:difference;pointer-events:none;white-space:nowrap;animation:navIn 1s 5.2s both}
.h0{left:var(--pad);bottom:clamp(36px,7vh,80px);max-width:min(560px,56vw);animation:navIn .9s 5.5s both}
.h0 .eyebrow{margin-bottom:12px}
.h0p{margin:0;font-size:clamp(1.1rem,1.7vw,1.5rem);font-weight:400;opacity:.9;line-height:1.35}
.h0b{bottom:clamp(36px,7vh,80px);animation:navIn .9s 5.7s both}
.symfb{position:absolute;left:50%;top:46%;width:min(34vmin,300px);transform:translate(-50%,-50%);height:auto}
@media (max-width:900px){.hname{font-size:clamp(2rem,10vw,5rem);white-space:normal;line-height:.95}.h0{max-width:none;right:var(--pad);bottom:clamp(100px,16vh,150px)}.h0b{bottom:clamp(32px,5vh,56px)}}

.h0b{opacity:1}

/* ───────── la apertura es el propio logo; los aros de luz ya no se usan ───────── */
#rg0,#rg1,#rg2{display:none}
.hero0,.st4,.pre{background:#050607}

/* ───────── color de marca activo ───────── */
.ncta{background:var(--accent);color:#fff}
.ncta:hover{background:var(--accent-soft);color:var(--ink)}
.nav.on-light:not(.open) .ncta{background:var(--accent-deep);color:#fff}
.nav.on-light:not(.open) .ncta:hover{background:var(--ink)}
.h0 .eyebrow{color:var(--accent-soft);opacity:1}
.h0b .bw{background:var(--accent);color:#fff}
.h0b .bw:hover{background:var(--accent-soft);color:var(--ink)}
.h0b .bg{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.45)}
.h0b .bg:hover{background:rgba(255,255,255,.12)}

/* ───────── apertura con cometa: ya no hay círculo ni hueco ───────── */
.pre,.portal{display:none}
.intro{background:#050607}
.build{animation:buildOut .35s 99s ease forwards}
#comet{position:fixed;left:0;top:0;width:100vw;height:100vh;z-index:90;pointer-events:none}
.hname{animation:navIn 1s 5.0s both}
.h0{animation:navIn .9s 5.2s both}
.h0b{animation:navIn .9s 5.4s both}

/* ───────── menú centrado (como la referencia): logo a la izquierda, enlaces en el centro, botón a la derecha ───────── */
@media (min-width:901px){
  .nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
  .logo{justify-self:start}
  .links{margin:0;justify-self:center;padding:13px 30px;border-radius:99px;background:rgba(255,255,255,.08);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);gap:clamp(20px,2.4vw,36px);transition:opacity .35s ease,transform .5s var(--ease),max-width .7s var(--ease),padding .7s var(--ease),background .35s}
  .ncta{justify-self:end}
  .nav.on-light:not(.open) .links{background:rgba(12,15,20,.07)}
  .nav.compact .links{padding:0;background:transparent}
}

/* ───────── botón para volver arriba ───────── */
.totop{position:fixed;right:clamp(16px,2.4vw,32px);bottom:clamp(16px,2.4vw,32px);z-index:80;width:52px;height:52px;border-radius:50%;border:0;cursor:pointer;background:var(--accent);color:#fff;display:grid;place-items:center;opacity:0;visibility:hidden;transform:translateY(14px);transition:opacity .35s ease,transform .45s var(--ease),visibility 0s .35s,background .25s}
.totop.on{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.totop:hover{background:var(--accent-soft);color:var(--ink);transform:translateY(-3px)}
.totop svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.intro-on .totop{display:none}

/* ───────── tipografía Unbounded: tamaños ajustados (es ancha) y nada de letra chica ───────── */
.display{font-weight:600;letter-spacing:-.03em;line-height:1.08}
.block h2{font-size:clamp(1.9rem,4.4vw,4rem);max-width:19ch;line-height:1.08}
.ln h3{font-size:clamp(1.6rem,2.7vw,2.5rem);line-height:1.1;font-weight:600;letter-spacing:-.03em}
.det h3{font-size:clamp(1.6rem,3vw,2.7rem);line-height:1.1;font-weight:600;letter-spacing:-.03em}
.tp h3{font-size:clamp(1.4rem,2.1vw,1.9rem);line-height:1.12;font-weight:600;letter-spacing:-.03em}
.steps h3{font-size:1.2rem;font-weight:600;letter-spacing:-.02em;line-height:1.2}
.cols3 h3{font-size:clamp(1.2rem,1.8vw,1.6rem);font-weight:600;letter-spacing:-.02em;line-height:1.15}
.mi .mh{font-size:1.1rem;font-weight:600;letter-spacing:-.015em}
.marquee span{font-size:clamp(1.3rem,2.7vw,2.2rem);font-weight:500;letter-spacing:-.02em}
.ha-label{font-size:clamp(1.1rem,1.9vw,1.7rem);font-weight:600;letter-spacing:-.02em}
.mm a{font-size:clamp(1.7rem,8.4vw,2.8rem);font-weight:600;letter-spacing:-.03em}
footer .big{font-size:clamp(2.6rem,10vw,9.4rem);font-weight:600;letter-spacing:-.05em;line-height:1}
.hname{font-size:clamp(1.9rem,6.6vw,7.2rem);font-weight:600;letter-spacing:-.04em;line-height:1}
.h0p{font-size:clamp(1.15rem,1.7vw,1.5rem)}
.eyebrow{font-size:.95rem;letter-spacing:.2em}
.h0 .eyebrow{font-size:.95rem}
.znote,.zhead .eyebrow,.proj .eyebrow{font-size:.95rem}
.slead{font-size:clamp(1.05rem,1.4vw,1.25rem)}
footer .info span,footer .by{font-size:.95rem}
.mi p{font-size:.95rem}
.mi li a{font-size:1rem}

/* ───────── logo un poco más grande ───────── */
.logo .mark{height:56px}
.logo .word{height:25px}

/* ───────── menú: el desplegable queda centrado bajo la cápsula ───────── */
@media (min-width:901px){
  .links{position:relative}
  .dd{position:static}
  .mega{left:50%;transform:translate(-50%,8px)}
  .dd:hover .mega,.dd:focus-within .mega{transform:translate(-50%,0)}
}
.links a{padding:9px 18px;border-radius:99px;opacity:.9;transition:background .3s var(--ease),color .3s,opacity .2s,transform .3s var(--ease)}
.links a:hover{opacity:1;color:#fff;background:rgba(255,255,255,.14);transform:translateY(-1px)}
.nav.on-light:not(.open) .links a:hover{color:var(--ink);background:rgba(5,6,7,.09)}
.links .ddt{gap:9px}
.mi li a{display:flex;justify-content:space-between;align-items:center;padding:9px 14px;margin:0 -14px;border-radius:12px;transition:background .25s,color .25s,padding .3s var(--ease)}
.mi li a::after{content:"→";opacity:0;transform:translateX(-8px);transition:opacity .25s,transform .3s var(--ease)}
.mi li a:hover{background:rgba(255,255,255,.08);color:#fff;opacity:1;padding-left:18px}
.mi li a:hover::after{opacity:1;transform:none}

/* ───────── botones: relleno que barre, flecha que avanza y elevación ───────── */
.bw,.bg,.ncta,.sbtn,.lgo{position:relative;overflow:hidden;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:10px;transition:color .4s var(--ease),transform .4s var(--ease),box-shadow .4s var(--ease),background .3s}
.bw::before,.bg::before,.ncta::before,.sbtn::before,.lgo::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--fill,#fff);transform:translateX(-102%);transition:transform .5s var(--ease)}
.bw::after,.bg::after,.ncta::after,.sbtn::after,.lgo::after{content:"→";display:inline-block;transition:transform .4s var(--ease)}
.bw:hover::before,.bg:hover::before,.ncta:hover::before,.sbtn:hover::before,.lgo:hover::before{transform:none}
.bw:hover::after,.bg:hover::after,.ncta:hover::after,.sbtn:hover::after,.lgo:hover::after{transform:translateX(6px)}
.bw:hover,.bg:hover,.ncta:hover,.sbtn:hover,.lgo:hover{transform:translateY(-3px)}
.bw:active,.bg:active,.ncta:active,.sbtn:active,.lgo:active{transform:translateY(0)}
/* azul sobre fondo oscuro: al pasar el mouse se llena de blanco */
.ncta,.h0b .bw{--fill:#fff}
.ncta:hover,.h0b .bw:hover{background:var(--accent);color:var(--ink);box-shadow:0 14px 34px -10px rgba(68,121,213,.7)}
.h0b .bg{--fill:#fff}
.h0b .bg:hover{background:transparent;color:var(--ink)}
/* en secciones oscuras */
.dark .sbtn{--fill:var(--accent)}
.dark .sbtn:hover{background:#fff;color:#fff}
.ln.sw .lgo{--fill:var(--accent)}
.ln.sw .lgo:hover{color:#fff}
/* en secciones claras */
.light .sbtn,.ln.web .lgo{--fill:var(--accent)}
.light .sbtn:hover,.ln.web .lgo:hover{color:#fff}
.nav.on-light:not(.open) .ncta{--fill:var(--ink)}
.nav.on-light:not(.open) .ncta:hover{background:var(--accent-deep);color:#fff}
.totop{transition:opacity .35s ease,transform .45s var(--ease),visibility 0s .35s,background .25s,box-shadow .3s}
.totop:hover{box-shadow:0 14px 30px -8px rgba(68,121,213,.7)}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent-soft);outline-offset:3px}

/* ───────── fondo casi negro y contrastes ───────── */
html,body{background:#050607}

.hname{mix-blend-mode:normal;text-shadow:0 0 44px rgba(5,6,7,.7)}

.links .mi .mh,.links .mi .mall{padding:0;border-radius:0;background:none;transform:none}
.links .mi .mh:hover,.links .mi .mall:hover{background:none;transform:none}

/* ───────── el cometa parte la pantalla en dos ───────── */
.cut{position:absolute;inset:0;background:#050607;will-change:transform}
.hname{animation:navIn 1s 6.0s both}
.h0{animation:navIn .9s 6.2s both}
.h0b{animation:navIn .9s 6.4s both}

/* ═══════════ escala tipográfica: base de 18 px (todo en rem crece con ella) ═══════════ */
html{font-size:112.5%}
body{font-size:1rem;line-height:1.55}
.links a{font-size:1.02rem}
.ncta{font-size:1.05rem;padding:15px 32px;font-weight:600;letter-spacing:.005em;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.ncta::after{display:none}
.ncta:hover{box-shadow:0 14px 34px -10px rgba(68,121,213,.7),inset 0 0 0 1px rgba(255,255,255,.4)}
.h0b a{font-size:1.05rem;padding:16px 32px}
.eyebrow{font-size:.9rem}
.mi li a{font-size:1.02rem}
.mi p{font-size:.95rem}
.logo .word{height:26px}

/* ═══════════ Valor: filas grandes que se inundan de azul al pasar el mouse ═══════════ */
.val{background:#050607}
.val .display{max-width:20ch}
.vrows{list-style:none;margin:clamp(40px,6vw,84px) calc(var(--pad)*-1) 0}
.vr{display:grid;grid-template-columns:clamp(60px,8vw,120px) minmax(0,1.05fr) minmax(0,1.35fr) 56px;gap:clamp(16px,3vw,48px);align-items:center;padding:clamp(26px,3.4vw,48px) var(--pad);border-top:1px solid rgba(255,255,255,.16);position:relative;isolation:isolate;transition:color .5s var(--ease)}
.vr:last-child{border-bottom:1px solid rgba(255,255,255,.16)}
.vr::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--accent);transform:scaleY(0);transform-origin:50% 100%;transition:transform .55s var(--ease)}
.vr:hover::before{transform:scaleY(1)}
.vn{font-family:var(--font-display);font-size:1.05rem;color:var(--accent-soft);transition:color .4s}
.vr h3{font-family:var(--font-display);font-weight:600;letter-spacing:-.03em;line-height:1.12;font-size:clamp(1.35rem,2.3vw,2.2rem)}
.vr p{font-size:clamp(1.05rem,1.35vw,1.28rem);line-height:1.5;opacity:.78}
.va{justify-self:end;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font-size:1.4rem;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.35);transition:transform .45s var(--ease),background .4s,color .4s}
.vr:hover .vn{color:#fff}.vr:hover p{opacity:1}
.vr:hover .va{background:#fff;color:var(--accent);transform:translateX(6px);box-shadow:none}
@media (max-width:900px){.vr{grid-template-columns:48px 1fr;row-gap:10px}.vr p{grid-column:2}.va{display:none}}

/* ═══════════ Tecnologías: carrusel de logotipos en dos filas ═══════════ */
.tech{background:#050607;padding:clamp(40px,6vw,84px) 0 clamp(44px,6vw,90px);overflow:hidden}
.tech-h{padding:0 var(--pad);margin-bottom:clamp(22px,3vw,40px);font-size:.95rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent-soft)}
.trow{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.trow+.trow{margin-top:18px}
.tk{display:flex;gap:18px;width:max-content;animation:tkL 70s linear infinite;will-change:transform}
.trow.r .tk{animation-name:tkR;animation-duration:78s}
.tech:hover .tk{animation-play-state:paused}
@keyframes tkL{to{transform:translateX(-50%)}}
@keyframes tkR{from{transform:translateX(-50%)}to{transform:none}}
.tt{display:flex;align-items:center;gap:18px;padding:22px 34px;border-radius:var(--r);background:rgba(255,255,255,.045);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);color:rgba(255,255,255,.72);transition:background .35s,color .35s,transform .4s var(--ease),box-shadow .35s}
.tt svg{width:40px;height:40px;fill:currentColor;flex:none;transition:fill .35s}
.tt span{font-size:1.2rem;font-weight:500;white-space:nowrap}
.tt:hover{background:rgba(255,255,255,.1);color:#fff;transform:translateY(-5px);box-shadow:inset 0 0 0 1px var(--c)}
.tt:hover svg{fill:var(--c)}
@media (prefers-reduced-motion:reduce){.tk{animation:none}}
@media (max-width:700px){.tt{padding:16px 22px}.tt svg{width:30px;height:30px}.tt span{font-size:1.05rem}}

/* ═══════════ apertura: telón más lento y a la vista ═══════════ */
.cut{box-shadow:0 0 120px rgba(0,0,0,.95)}
.hname{animation:navIn 1s 6.4s both}
.h0{animation:navIn .9s 6.7s both}
.h0b{animation:navIn .9s 6.9s both}

.h0,.h0b{text-shadow:0 0 16px #050607,0 0 5px #050607}
.h0b a{text-shadow:none}

/* ═══════════ Tecnologías: banda clara con logotipos a todo color ═══════════ */
.tech{background:#F4F4F2;color:var(--ink);padding:clamp(48px,6vw,96px) 0 clamp(52px,6vw,100px)}
.tech-h{color:var(--ink);opacity:.7;font-size:.95rem}
.trow{-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.trow+.trow{margin-top:clamp(20px,3vw,40px)}
.tk{gap:clamp(48px,6vw,96px);padding-right:clamp(48px,6vw,96px)}
.tt{flex-direction:column;gap:14px;padding:6px 0;background:none;box-shadow:none;border-radius:0;color:var(--ink);min-width:96px;align-items:center}
.tt svg{width:clamp(52px,5vw,72px);height:clamp(52px,5vw,72px);fill:var(--c);transition:transform .45s var(--ease)}
.tt span{font-size:1.05rem;font-weight:500;letter-spacing:.01em;opacity:.8;transition:opacity .3s,color .3s}
.tt:hover{background:none;box-shadow:none;transform:none;color:var(--ink)}
.tt:hover svg{fill:var(--c);transform:translateY(-8px) scale(1.14)}
.tt:hover span{opacity:1;color:var(--accent-deep)}
@media (max-width:700px){.tt svg{width:44px;height:44px}.tt span{font-size:1rem}}

/* ───────── apertura: letras fluidas y logo que se parte junto con la pantalla ───────── */
.lets{animation:none}
.lets span{animation:none;opacity:0}
.cut{display:grid;place-items:center;overflow:hidden}
.cutline{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hname{animation:navIn 1s 6.9s both}

/* ═══════════ Declaración: frase grande y un proyecto que sube con el scroll ═══════════ */
.decl{padding-bottom:clamp(40px,5vw,80px)}
.decl-top{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(24px,5vw,90px);align-items:end}
.decl-h{font-family:var(--font-display);font-weight:600;letter-spacing:-.04em;line-height:1.06;font-size:clamp(2rem,4.6vw,4.4rem)}
.decl-p{font-size:clamp(1.1rem,1.5vw,1.4rem);line-height:1.5;opacity:.82;max-width:34ch}
.decl-win{position:relative;margin-top:clamp(40px,6vw,90px);aspect-ratio:16/8.4;border-radius:var(--r);overflow:hidden;background:#0c0f14;will-change:transform}
.decl-win video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.decl-tag{position:absolute;left:clamp(18px,2.4vw,34px);bottom:clamp(16px,2vw,28px);padding:12px 20px;border-radius:99px;background:rgba(5,6,7,.78);font-size:1rem;font-weight:500;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
@media (max-width:900px){.decl-top{grid-template-columns:1fr}}

/* ═══════════ Cierre: banda azul + pie con el nombre a todo el ancho ═══════════ */
.band{background:var(--accent);color:#fff;padding:clamp(70px,10vw,160px) 0}
.band .eyebrow{opacity:.85}
.bandh{font-family:var(--font-display);font-weight:600;letter-spacing:-.045em;line-height:1;font-size:clamp(3rem,10vw,9.5rem);margin-top:20px}
.bandp{margin-top:22px;font-size:clamp(1.15rem,1.7vw,1.5rem);max-width:36ch;line-height:1.45}
.bandb{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(28px,4vw,52px)}
.bandb a{display:inline-flex;align-items:center;gap:12px;padding:18px 36px;border-radius:99px;font-weight:600;font-size:1.1rem;position:relative;overflow:hidden;isolation:isolate;transition:color .4s var(--ease),transform .4s var(--ease)}
.bandb a::before{content:"";position:absolute;inset:0;z-index:-1;transform:translateX(-102%);transition:transform .5s var(--ease)}
.bandb a:hover::before{transform:none}.bandb a:hover{transform:translateY(-3px)}
.bandb a::after{content:"→";transition:transform .4s var(--ease)}.bandb a:hover::after{transform:translateX(6px)}
.bandb .b1{background:#fff;color:var(--ink)}.bandb .b1::before{background:var(--ink)}.bandb .b1:hover{color:#fff}
.bandb .b2{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.7);color:#fff}.bandb .b2::before{background:#fff}.bandb .b2:hover{color:var(--accent)}
footer#pie{padding-block:clamp(48px,7vw,100px) 36px}
footer#pie .giant{font-family:var(--font-display);font-weight:600;text-transform:uppercase;letter-spacing:-.045em;line-height:1;white-space:nowrap;font-size:clamp(1.6rem,8.1vw,9.4rem);margin-top:clamp(48px,6vw,96px);text-align:center;overflow:hidden}
footer#pie .info{margin-top:0}

/* ═══════════ apertura sin letras: solo el logo, el cometa y el telón ═══════════ */
.build .p1{animation-delay:.5s}.build .p2{animation-delay:.65s}.build .p3{animation-delay:.8s}
.hname{animation:navIn 1s 4.7s both}

/* ═══════════ el mundo 3D queda fijo detrás de todo; las secciones transparentes lo dejan ver ═══════════ */
.st4{position:fixed;inset:0;z-index:0;background:transparent;pointer-events:none}
main,footer,.band{position:relative;z-index:1}
.hero0{background:transparent}
.chap{position:relative;background:transparent}
.chap .pin{position:sticky;top:0;height:100svh;overflow:hidden}

/* ── Declaración: las palabras se encienden con el scroll y el proyecto sube ── */
.decl{height:320svh}
.decl .pin{padding:15svh var(--pad) 0}
.decl-stage{max-width:min(980px,58%)}
.decl-stage .eyebrow{color:var(--accent-soft);margin-bottom:22px}
.decl-h{font-family:var(--font-display);font-weight:600;letter-spacing:-.04em;line-height:1.08;font-size:clamp(2rem,4.2vw,4rem)}
.decl-h .w{display:inline-block;opacity:.16;will-change:opacity}
.decl-p{margin-top:clamp(18px,2.4vw,32px);max-width:36ch;font-size:clamp(1.1rem,1.4vw,1.35rem);line-height:1.5;opacity:.82}
.decl-win{position:absolute;left:var(--pad);right:var(--pad);bottom:5svh;height:46svh;border-radius:var(--r);overflow:hidden;background:#0c0f14;will-change:transform}
.decl-win video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.decl-tag{position:absolute;left:clamp(18px,2.4vw,34px);bottom:clamp(16px,2vw,28px);padding:12px 20px;border-radius:99px;background:rgba(5,6,7,.78);font-size:1rem;font-weight:500}

/* ── Valor: tres pasos; el mundo cambia con cada uno ── */
.val{height:380svh}
.val .pin{display:grid;grid-template-columns:1fr 1fr;align-items:center;padding:0 var(--pad)}
.val-r{grid-column:2;position:relative;padding-left:clamp(20px,3vw,56px)}
.val-r .eyebrow{color:var(--accent-soft);margin-bottom:20px}
.val-h{font-family:var(--font-display);font-weight:600;letter-spacing:-.04em;line-height:1.08;font-size:clamp(1.8rem,3.4vw,3.2rem);max-width:16ch}
.vsteps{list-style:none;margin-top:clamp(28px,4vw,56px);display:grid;gap:6px}
.vs{display:grid;grid-template-columns:54px 1fr;gap:14px;padding:16px 0;opacity:.32;transition:opacity .5s var(--ease)}
.vs h3{font-family:var(--font-display);font-weight:600;letter-spacing:-.03em;line-height:1.15;font-size:clamp(1.15rem,1.7vw,1.6rem);transition:color .4s}
.vs p{max-height:0;overflow:hidden;opacity:0;margin-top:0;font-size:clamp(1.02rem,1.2vw,1.18rem);line-height:1.5;max-width:44ch;transition:max-height .7s var(--ease),opacity .5s,margin .5s}
.vs .vn{font-family:var(--font-display);font-size:1rem;color:var(--accent-soft);padding-top:.35em}
.vs.on{opacity:1}
.vs.on h3{color:#fff}
.vs.on p{max-height:9em;opacity:.85;margin-top:12px}
.vrail{position:absolute;left:0;top:8%;bottom:8%;width:3px;background:rgba(255,255,255,.14);border-radius:3px;overflow:hidden}
.vrail i{position:absolute;left:0;top:0;width:100%;height:0;background:var(--accent)}
@media (max-width:900px){.decl-stage{max-width:100%}.val .pin{grid-template-columns:1fr}.val-r{grid-column:1}}

/* ═══════════ sin letreros pequeños encima de los títulos ═══════════ */
.eyebrow{display:none}

/* ═══════════ Dos líneas: la pantalla se parte y cada línea toma su turno con el scroll ═══════════ */
.dos{height:560svh;--big:min(9.2vw,17svh)}
.dsL{position:absolute;inset:0}
.dsA{clip-path:inset(0 50% 0 0)}
.dsB{background:var(--accent);color:#fff;clip-path:inset(0 0 0 100%);--pb:50%}
.dsC{position:absolute;top:0;bottom:0;display:flex;flex-direction:column;padding-top:13svh}
.dsA .dsC{left:var(--pad);width:min(60vw,980px)}
.dsB .dsC{left:calc(var(--pb) + var(--pad));right:var(--pad)}
.dsT{font-family:var(--font-display);font-weight:600;letter-spacing:-.055em;line-height:.98;transform-origin:0 0;white-space:nowrap;will-change:transform,opacity}
.dsT span{display:block;font-size:var(--big)}
.dsT em{display:block;font-style:normal;font-size:calc(var(--big)*.46);letter-spacing:-.045em;margin-top:.12em;color:var(--accent-soft)}
.dsB .dsT em{color:var(--ink)}
.dsP{margin-top:clamp(18px,3svh,34px);max-width:40ch;font-size:clamp(1.2rem,1.6vw,1.5rem);line-height:1.5;opacity:0;will-change:opacity,transform}
.dsU{list-style:none;margin:clamp(16px,3svh,34px) 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(20px,3vw,48px);opacity:0;pointer-events:none;will-change:opacity}
.dsU li a{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:clamp(12px,2.2svh,22px) 0;font-size:clamp(1.2rem,1.55vw,1.5rem);font-weight:500;border-top:1px solid rgba(255,255,255,.22);transition:padding .4s var(--ease),color .3s}
.dsB .dsU li a{border-color:rgba(255,255,255,.45)}
.dsU li a i{font-style:normal;opacity:0;transform:translateX(-12px);transition:opacity .3s,transform .45s var(--ease)}
.dsU li a:hover{padding-left:14px;color:var(--accent-soft)}
.dsB .dsU li a:hover{color:var(--ink)}
.dsU li a:hover i{opacity:1;transform:none}
.dsG{align-self:flex-start;margin-top:clamp(26px,5svh,56px);position:relative;overflow:hidden;isolation:isolate;display:inline-flex;align-items:center;gap:12px;padding:18px 36px;border-radius:99px;font-weight:600;font-size:1.1rem;background:#fff;color:var(--ink);transition:color .4s var(--ease),box-shadow .4s var(--ease);will-change:transform,opacity}
.dsG::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--accent);transform:translateX(-102%);transition:transform .5s var(--ease)}
.dsG::after{content:"→";transition:transform .4s var(--ease)}
.dsG:hover::before{transform:none}.dsG:hover{color:#fff}.dsG:hover::after{transform:translateX(6px)}
.dsB .dsG::before{background:var(--ink)}
.dsV{position:absolute;top:50%;writing-mode:vertical-rl;font-family:var(--font-display);font-weight:600;letter-spacing:-.02em;white-space:nowrap;font-size:clamp(1.5rem,2.6vw,2.6rem);opacity:0;pointer-events:none;transform:translate(-50%,-50%);transition:color .3s}
.dsA .dsV{transform:translate(-50%,-50%) rotate(180deg);color:rgba(255,255,255,.6)}
.dsB .dsV{left:75%;color:rgba(255,255,255,.7)}
.dsL.cmp{cursor:pointer}
.dsA.cmp:hover .dsV{color:var(--accent-soft)}
.dsB.cmp:hover .dsV{color:var(--ink)}
.dsline{position:absolute;top:0;bottom:0;left:50%;width:2px;margin-left:-1px;background:#fff;transform:scaleY(0);will-change:transform;pointer-events:none}
.dsTi{position:absolute;inset:0;display:grid;place-items:center;text-align:center;pointer-events:none;will-change:transform,opacity}
.dsTi h2{font-family:var(--font-display);font-weight:600;letter-spacing:-.055em;line-height:1;font-size:clamp(2.6rem,9vw,9.6rem)}
.dsTi.l{clip-path:inset(0 50% 0 0)}
.dsTi.r{clip-path:inset(0 0 0 50%)}
@media (max-width:900px){.dsU{grid-template-columns:1fr}.dsA .dsC{width:80vw}.dsP{display:none}}

/* ═══════════ cierre del trabajo seleccionado: un botón del ancho de la página ═══════════ */
.pfcta{position:relative;z-index:2;background:#050607;padding:0 var(--pad) clamp(60px,8vw,120px)}
.pfbig{position:relative;isolation:isolate;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:clamp(28px,4.4vw,64px) 0;border-top:1px solid rgba(255,255,255,.24);border-bottom:1px solid rgba(255,255,255,.24);font-family:var(--font-display);font-weight:600;letter-spacing:-.055em;line-height:1;font-size:clamp(2.2rem,7.6vw,7.6rem);transition:color .4s}
.pfbig::before{content:"";position:absolute;top:0;bottom:0;left:calc(var(--pad)*-1);right:calc(var(--pad)*-1);z-index:-1;background:var(--accent);transform:scaleY(0);transform-origin:50% 100%;transition:transform .6s var(--ease)}
.pfbig:hover::before{transform:scaleY(1)}
.pfbig span{transition:transform .6s var(--ease)}
.pfbig i{font-style:normal;transition:transform .6s var(--ease)}
.pfbig:hover span{transform:translateX(clamp(8px,1.4vw,24px))}
.pfbig:hover i{transform:translateX(clamp(-24px,-1.4vw,-8px))}

/* ═══════════ página de portafolio ═══════════ */
.pf .sphead{display:none}
.pfh{padding:clamp(130px,17vw,220px) var(--pad) 0}
.pft{font-family:var(--font-display);font-weight:600;letter-spacing:-.06em;line-height:.9;font-size:clamp(3.6rem,15.5vw,16rem)}
.pfs{margin-top:clamp(20px,2.6vw,36px);max-width:40ch;font-size:clamp(1.15rem,1.6vw,1.5rem);line-height:1.5;opacity:.8}
.pfidx{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);padding:clamp(44px,6vw,90px) var(--pad) clamp(70px,9vw,140px);align-items:start}
.pflist{border-top:1px solid rgba(255,255,255,.22)}
.pfrow{position:relative;isolation:isolate;display:grid;grid-template-columns:clamp(48px,6vw,92px) minmax(0,1fr) auto;align-items:center;gap:clamp(12px,2vw,28px);padding:clamp(20px,3.4svh,36px) 0;border-bottom:1px solid rgba(255,255,255,.22)}
.pfrow::before{content:"";position:absolute;top:-1px;bottom:-1px;left:calc(var(--pad)*-1);right:0;z-index:-1;background:var(--accent);transform:scaleX(0);transform-origin:0 50%;transition:transform .65s var(--ease)}
.pfrow.on::before{transform:none}
.pfn{font-family:var(--font-display);font-size:1.05rem;color:var(--accent-soft);transition:color .4s,transform .6s var(--ease)}
.pfm{font-family:var(--font-display);font-weight:600;letter-spacing:-.05em;line-height:1;font-size:clamp(2rem,4.8vw,5rem);transition:transform .6s var(--ease)}
.pfm small{display:block;margin-top:.5em;font-family:var(--font-body,Outfit,sans-serif);font-weight:400;letter-spacing:0;font-size:1.05rem;opacity:.7}
.pfa{width:clamp(46px,4.4vw,64px);height:clamp(46px,4.4vw,64px);border-radius:50%;display:grid;place-items:center;font-size:1.5rem;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.4);transition:transform .5s var(--ease),background .4s,color .4s,box-shadow .4s}
.pfrow.on .pfn{color:#fff;transform:translateX(10px)}
.pfrow.on .pfm{transform:translateX(18px)}
.pfrow.on .pfm small{opacity:.95}
.pfrow.on .pfa{background:#fff;color:var(--accent);box-shadow:none;transform:translateX(-10px)}
.pfprev{position:sticky;top:14svh;height:min(66svh,640px);border-radius:var(--r);overflow:hidden;background:#0c0f14}
.pfpv{position:absolute;inset:0;opacity:0;transition:opacity .55s var(--ease);pointer-events:none}
.pfpv.on{opacity:1;pointer-events:auto}
.pfpv video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pfvis{position:absolute;left:clamp(16px,2vw,28px);bottom:clamp(16px,2vw,28px);padding:14px 24px;border-radius:99px;background:rgba(5,6,7,.82);font-size:1.02rem;font-weight:600;transition:background .3s,color .3s,transform .4s var(--ease)}
.pfvis:hover{background:#fff;color:var(--ink);transform:translateY(-3px)}
.pfc{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(24px,5vw,80px);align-items:center;min-height:100svh;padding:clamp(60px,9svh,110px) var(--pad);border-top:1px solid rgba(255,255,255,.14)}
.pfc:nth-child(even){grid-template-columns:minmax(0,1fr) minmax(0,1.5fr)}
.pfc:nth-child(even) .pfc-m{order:2}
.pfc-m{position:relative;aspect-ratio:16/10;border-radius:var(--r);overflow:hidden;background:#0c0f14;will-change:clip-path}
.pfc-m video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pfc-n{font-family:var(--font-display);font-size:1.05rem;color:var(--accent-soft)}
.pfc h2{margin-top:14px;font-family:var(--font-display);font-weight:600;letter-spacing:-.055em;line-height:.95;font-size:clamp(2.6rem,6.6vw,7rem)}
.pfc-k{margin-top:20px;font-size:clamp(1.1rem,1.4vw,1.35rem);opacity:.78}
.pfc .sbtn{margin-top:clamp(24px,3.4vw,44px)}
@media (max-width:900px){.pfidx{grid-template-columns:1fr}.pfprev{display:none}.pfc,.pfc:nth-child(even){grid-template-columns:1fr;min-height:0}.pfc:nth-child(even) .pfc-m{order:0}}

/* ═══════════ el logo y el botón de subir se adaptan al color de cada sección ═══════════ */
.nav.on-blue{--lw:#fff;--lb:#050607;--lc:#fff}
.nav.on-blue:not(.open) .links{background:rgba(5,6,7,.3)}
.nav.on-blue:not(.open) .ncta{background:#fff;color:var(--ink);box-shadow:none}
.nav.on-blue:not(.open) .ncta:hover{background:var(--ink);color:#fff}
.nav.on-blue:not(.open) .ncta::before{background:var(--ink)}
.totop.on-blue{background:#fff;color:var(--accent-deep)}
.totop.on-blue:hover{background:var(--ink);color:#fff}
.totop.on-light{background:var(--ink);color:#fff}
.totop.on-light:hover{background:var(--accent-deep)}

/* ═══════════ Valor: los tres pasos con letra grande ═══════════ */
.vs{grid-template-columns:clamp(64px,6.4vw,104px) 1fr;gap:clamp(8px,1vw,18px);padding:clamp(14px,2svh,24px) 0}
.vs .vn{font-size:clamp(1.5rem,2.6vw,2.6rem);padding-top:.1em;line-height:1}
.vs h3{font-size:clamp(1.55rem,2.6vw,2.6rem);line-height:1.1}
.vs p{font-size:clamp(1.2rem,1.6vw,1.55rem);max-width:40ch}
.vs.on p{max-height:11em}
.val-r{padding-left:clamp(28px,3.6vw,64px)}
.val-h{font-size:clamp(2rem,3.8vw,3.6rem)}

/* ═══════════ lente de cursor: junto al puntero las letras cambian por otras ═══════════ */
.lensed:not(.hname){position:relative}
.lensed .lb{display:block;-webkit-mask-image:radial-gradient(circle at var(--lx,0px) var(--ly,0px),transparent calc(var(--lr,0px) - 1px),#000 var(--lr,0px));mask-image:radial-gradient(circle at var(--lx,0px) var(--ly,0px),transparent calc(var(--lr,0px) - 1px),#000 var(--lr,0px))}
.lensed .lt{position:absolute;inset:0;display:block;pointer-events:none;text-shadow:none;clip-path:circle(var(--lr,0px) at var(--lx,0px) var(--ly,0px))}
.hname .lt{color:var(--accent)}
.bandh .lt{color:var(--ink)}
.pft .lt{color:var(--accent-soft)}

/* ═══════════ portafolio: columnas de proyectos que suben con el scroll ═══════════ */
.wall{height:300svh;--g:clamp(10px,1.2vw,18px)}
.wall-pin{position:sticky;top:0;height:100svh;overflow:hidden;background:#050607}
.wcols{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--g);padding:0 var(--g)}
.wcol{display:flex;flex-direction:column;gap:var(--g);will-change:transform}
.wt{position:relative;display:block;border-radius:var(--r);overflow:hidden;background:#0c0f14;aspect-ratio:16/10}
.wcol .wt:nth-child(4n+2){aspect-ratio:3/4}
.wcol .wt:nth-child(4n+3){aspect-ratio:1/1}
.wcol .wt:nth-child(4n){aspect-ratio:4/3}
.wcol:nth-child(2) .wt:nth-child(4n+1){aspect-ratio:1/1}
.wcol:nth-child(2) .wt:nth-child(4n+2){aspect-ratio:16/10}
.wcol:nth-child(3) .wt:nth-child(4n+1){aspect-ratio:4/3}
.wcol:nth-child(3) .wt:nth-child(4n+3){aspect-ratio:3/4}
.wt video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.wt:hover video{transform:scale(1.06)}
.wt span{position:absolute;left:14px;bottom:14px;padding:9px 18px;border-radius:99px;background:rgba(5,6,7,.78);font-size:1rem;font-weight:500;transition:background .3s}
.wt:hover span{background:var(--accent)}
.wveil{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 70% 55% at 50% 50%,rgba(5,6,7,.82),rgba(5,6,7,.5) 55%,rgba(5,6,7,.15))}
.wtitle{position:absolute;left:0;right:0;top:50%;transform:translateY(-54%);text-align:center;pointer-events:none;padding:0 var(--pad)}
.wtitle .pft{font-size:clamp(3.4rem,14vw,14.5rem);line-height:.95}
.wtitle .pfs{margin:clamp(14px,2vw,28px) auto 0;max-width:34ch;text-align:center}
@media (max-width:700px){.wcols{grid-template-columns:repeat(2,minmax(0,1fr))}.wcol:nth-child(3){display:none}}
.wcols{align-items:start}
.wt::after{content:"";position:absolute;inset:0;background:rgba(5,6,7,.22);pointer-events:none;transition:background .4s}
.wt:hover::after{background:rgba(5,6,7,0)}
.wt span{z-index:2}
.wveil{background:radial-gradient(ellipse 75% 60% at 50% 50%,rgba(5,6,7,.9),rgba(5,6,7,.55) 58%,rgba(5,6,7,.18))}

/* ═══════════ Cómo trabajamos: tarjetas que se apilan, cada paso con su ilustración ═══════════ */
.proc{height:560svh}
.procI{position:absolute;left:var(--pad);top:50%;transform:translateY(-58%);max-width:70%}
.procH{font-family:var(--font-display);font-weight:600;letter-spacing:-.055em;line-height:.95;font-size:clamp(3rem,9vw,9.6rem)}
.procS{margin-top:clamp(16px,2vw,28px);font-size:clamp(1.3rem,2vw,2rem);opacity:.8}
.pc{position:absolute;left:0;right:0;bottom:0;height:calc(100svh - var(--t));top:var(--t);border-radius:var(--r) var(--r) 0 0;display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);align-items:center;gap:clamp(16px,3vw,56px);padding:0 var(--pad);overflow:hidden;will-change:transform;transform:translateY(100%);--c:0;transform-origin:50% 0}
.pc1{--t:9svh;background:#0c0f14;color:#fff;box-shadow:0 -1px 0 rgba(255,255,255,.14)}
.pc2{--t:13svh;background:var(--accent);color:#fff}
.pc3{--t:17svh;background:#F4F4F2;color:var(--ink)}
.pc4{--t:21svh;background:#0E1A3A;color:#fff}
.pn{font-family:var(--font-display);font-weight:600;letter-spacing:-.08em;line-height:.8;font-size:min(26vw,48svh);margin-left:-.04em}
.pc1 .pn{color:var(--accent)}.pc2 .pn{color:var(--ink)}.pc3 .pn{color:var(--accent)}.pc4 .pn{color:var(--accent-soft)}
.ptx h3{font-family:var(--font-display);font-weight:600;letter-spacing:-.05em;line-height:1;font-size:clamp(2.2rem,4.8vw,5.2rem)}
.ptx p{margin-top:clamp(16px,2.2vw,32px);max-width:28ch;font-size:clamp(1.3rem,1.9vw,1.9rem);line-height:1.45;opacity:.9}
.pvz{position:absolute;right:calc(var(--pad) + 1vw);bottom:clamp(20px,6svh,60px);width:min(22vw,30svh);height:auto;opacity:.9}
.pc1 .pvz{color:var(--accent-soft)}.pc2 .pvz{color:#fff}.pc3 .pvz{color:var(--accent)}.pc4 .pvz{color:var(--accent-soft)}
.pdt{list-style:none;position:absolute;left:var(--pad);bottom:clamp(20px,5svh,48px);display:flex;gap:8px}
.pdt li{width:clamp(28px,3vw,48px);height:6px;border-radius:6px;background:currentColor;opacity:.22}
.pdt li.on{opacity:1}
/* ilustraciones: se dibujan con el avance de cada tarjeta (--c va de 0 a 1) */
.pvz .d{stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--c))}
.pvz .d2{stroke-dasharray:1;stroke-dashoffset:calc(1 - max(0, var(--c)*2 - 1))}
.pvz .v1{transform-origin:100px 100px;transform:scale(calc(.2 + var(--c)*.8*var(--k,1)));opacity:var(--c)}
.pvz .b{transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(calc(.04 + var(--c)*var(--h,1)*.96))}
@media (max-width:900px){.pc{grid-template-columns:1fr;align-content:center}.pn{font-size:30vw}.pvz{display:none}}

/* ═══════════ navegación: barra mínima + menú central a pantalla completa ═══════════ */
.links,.mega{display:none!important}
.nav .ncta{margin-left:auto}
.menu{display:inline-flex!important;align-items:center;gap:12px;margin-left:12px;padding:13px 22px;border-radius:99px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.3);color:inherit;font:600 1.02rem/1 var(--font-body);cursor:pointer;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:background .3s,border-color .3s,color .3s}
.menu:hover{background:#fff;color:var(--ink);border-color:#fff}
.nav.on-light:not(.open) .menu{background:rgba(5,6,7,.06);border-color:rgba(5,6,7,.28)}
.nav.on-light:not(.open) .menu:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.nav.on-blue:not(.open) .menu{background:rgba(5,6,7,.22);border-color:rgba(255,255,255,.4)}
.mb-ic{position:relative;width:20px;height:10px;display:block}
.mb-ic b{position:absolute;left:0;right:0;height:2px;border-radius:2px;background:currentColor;transition:transform .5s var(--ease)}
.mb-ic b:first-child{top:0}.mb-ic b:last-child{bottom:0}
.nav.open .mb-ic b:first-child{transform:translateY(4px) rotate(45deg)}
.nav.open .mb-ic b:last-child{transform:translateY(-4px) rotate(-45deg)}
.nav.open{--lw:#fff;--lb:#050607;--lc:#fff}
.nav.open .ncta{background:#fff;color:var(--ink)}
.nav.open .menu{border-color:rgba(255,255,255,.7)}
.mm{background:var(--accent);color:#fff;align-items:center;justify-content:center;text-align:center;padding:0;transform:none;clip-path:circle(0px at calc(100% - 7.5rem) 3.3rem);transition:clip-path .9s cubic-bezier(.76,0,.24,1),visibility 0s .9s}
.mm.open{clip-path:circle(150% at calc(100% - 7.5rem) 3.3rem);transition:clip-path .9s cubic-bezier(.76,0,.24,1)}
.mm ul{list-style:none;padding:0;display:grid;gap:clamp(2px,1vh,10px);width:100%}
.mm li{overflow:hidden;padding:.04em 0}
.mm li>a{display:inline-flex;justify-content:center;align-items:flex-start;gap:clamp(10px,1.4vw,22px);font-family:var(--font-display);font-weight:600;letter-spacing:-.06em;line-height:1.02;font-size:clamp(2.8rem,9.4vw,9.8rem);transform:translateY(108%);transition:transform 1s var(--ease),opacity .3s,color .3s,letter-spacing .5s var(--ease)}
.mm.open li>a{transform:none}
.mm.open li:nth-child(1)>a{transition-delay:.25s,0s,0s,0s}
.mm.open li:nth-child(2)>a{transition-delay:.33s,0s,0s,0s}
.mm.open li:nth-child(3)>a{transition-delay:.41s,0s,0s,0s}
.mm li>a small{font-family:var(--font-body);font-size:1.05rem;font-weight:500;letter-spacing:.04em;margin-top:.9em;opacity:.8}
.mm ul:hover li>a{opacity:.38}
.mm ul li>a:hover{opacity:1;color:var(--ink);letter-spacing:-.04em}
.mm-sub{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:6px;padding-bottom:6px;opacity:0;transform:translateY(12px);transition:opacity .5s,transform .7s var(--ease)}
.mm.open .mm-sub{opacity:1;transform:none;transition-delay:.75s}
.mm-sub a{font:600 1.08rem/1 var(--font-body)!important;letter-spacing:0!important;border:1.5px solid rgba(255,255,255,.75);border-radius:99px;padding:12px 24px;transform:none!important;opacity:1!important;color:#fff!important;transition:background .3s,color .3s,border-color .3s!important}
.mm-sub a:hover{background:#fff;color:var(--accent)!important;border-color:#fff}
.mm .mail{position:absolute;left:0;right:0;bottom:clamp(20px,4.5vh,44px);margin:0;font-size:1.05rem;opacity:.9}
.mm .mail a{display:inline;font:inherit;letter-spacing:0;transform:none;text-decoration:underline;text-underline-offset:4px;color:#fff}

/* ═══════════ cortina de página: barras inclinadas que cruzan la pantalla al cambiar de página ═══════════ */
#ptr{position:fixed;inset:0;z-index:500;pointer-events:none;visibility:hidden;overflow:hidden}
#ptr i{position:absolute;inset:0;display:block;will-change:clip-path}
#ptr i:nth-child(1){background:#12337A}#ptr i:nth-child(2){background:#4479D5}#ptr i:nth-child(3){background:#EAF0FD}#ptr i:nth-child(4){background:#050607}
.ptr-in #ptr{visibility:visible}
.no-intro .intro{display:none}
.no-intro .hname{animation:navIn .9s .25s both}
@media (min-width:901px){.nav{display:flex!important;justify-content:flex-end}.nav .logo{margin-right:auto}.nav .ncta,.nav .menu{flex:0 0 auto}}

.hname{animation:none!important;opacity:1}
.hname .ch{display:inline-block;will-change:transform,opacity,filter}

/* ═══════════ botones de la barra: mismo tamaño; Contáctanos se esconde al bajar, Menú se queda ═══════════ */
.nav .ncta,.nav .menu{height:50px;min-width:136px;padding:0 26px;display:inline-flex;align-items:center;justify-content:center;gap:12px;border-radius:99px;font-size:1.02rem;font-weight:600;line-height:1;box-sizing:border-box}
.nav .ncta{box-shadow:none}
.nav .ncta,.nav .menu{transition:opacity .4s,transform .5s var(--ease),min-width .5s var(--ease),padding .5s var(--ease),margin .5s var(--ease),background .3s,color .3s,border-color .3s}
.nav.compact:not(.open) .ncta{opacity:0;transform:translateY(-14px);pointer-events:none;min-width:0;width:0;padding:0;margin-left:0;overflow:hidden;border-width:0}

/* ═══════════ menú: la animación la maneja main.js (4 variantes para elegir) ═══════════ */
.mm,.mm.open{clip-path:none;transition:none;transform:none}
.mm{visibility:hidden;background:var(--accent)}
.mm.open,.mm.closing{visibility:visible}
.mm.v-cortina{background:transparent}
.mm>*{position:relative;z-index:1}
.mm-bars{position:absolute!important;inset:0;z-index:0!important;pointer-events:none;overflow:hidden;display:none}
.mm.v-cortina .mm-bars{display:block}
.mm-bars i{position:absolute;top:-12%;bottom:-12%;width:23%;background:var(--accent);transform:translateY(100%) skewX(-12deg);will-change:transform}
.mm-bars i:nth-child(1){left:-9%}.mm-bars i:nth-child(2){left:6%}.mm-bars i:nth-child(3){left:21%}.mm-bars i:nth-child(4){left:36%}.mm-bars i:nth-child(5){left:51%}.mm-bars i:nth-child(6){left:66%}.mm-bars i:nth-child(7){left:81%}
.mm li>a{transition:opacity .3s,color .3s,letter-spacing .5s var(--ease)!important;transition-delay:0s!important}
.mm li>a.cur::before{content:"";display:inline-block;width:.2em;height:.2em;border-radius:50%;background:currentColor;align-self:center;margin-right:.05em;flex:0 0 auto}
.mm-var{position:absolute!important;left:var(--pad);bottom:clamp(20px,4.5vh,44px);display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:1rem;z-index:2}
.mm-var span{opacity:.85;margin-right:4px}
.mm-var button{font:600 1rem/1 var(--font-body);color:#fff;background:transparent;border:1.5px solid rgba(255,255,255,.55);border-radius:99px;padding:9px 16px;cursor:pointer;transition:background .25s,color .25s}
.mm-var button:hover,.mm-var button.on{background:#fff;color:var(--accent)}
@media (max-width:900px){.mm-var{display:none}}

/* ═══════════ lente de cursor: efectos ═══════════ */
.fx-liquido .lt{color:transparent;background:linear-gradient(100deg,#4479D5 0%,#fff 20%,#8FB0F0 38%,#2AC2E7 56%,#4479D5 76%,#fff 100%);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;animation:izliq 2.6s linear infinite}
.bandh.fx-liquido .lt{background-image:linear-gradient(100deg,#050607 0%,#fff 25%,#050607 50%,#fff 75%,#050607 100%)}
@keyframes izliq{to{background-position:-300% 0}}
.fx-video .lt{background:none}
.fx-contorno .lt{color:transparent;-webkit-text-stroke:2px #fff}
.fx-warp .lt{filter:url(#iz-warp);color:var(--accent-soft)}
.fx-scramble .lt{color:var(--accent-soft)}
.mm .mail{left:auto!important;right:var(--pad);text-align:right;bottom:clamp(26px,5vh,50px)!important}

/* ═══════════ títulos: revelado por palabras con máscara y marcador azul ═══════════ */
.rw{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .02em .1em;margin-bottom:-.1em}
.rw>span{display:inline-block;transform:translateY(112%);transition:transform 1.05s var(--ease)}
[data-rise].in .rw>span{transform:none}
.mk{color:inherit;background:linear-gradient(transparent 62%,rgba(68,121,213,.95) 62% 94%,transparent 94%) no-repeat 0 0/0% 100%;transition:background-size .9s var(--ease) .75s;padding:0 .06em}
.in .mk,[data-rise].in .mk{background-size:100% 100%}
.zhead .display .mk{background-image:linear-gradient(transparent 62%,rgba(68,121,213,.95) 62% 94%,transparent 94%)}

/* ═══════════ hero: palabras que rotan y mundo que se abre al mantener presionado ═══════════ */
.hrot{position:absolute;left:0;right:0;top:calc(50% + clamp(2.6rem,5vw,5.4rem));height:1.4em;overflow:hidden;text-align:center;font-family:var(--font-display);font-weight:600;letter-spacing:-.04em;font-size:clamp(1.5rem,3vw,3.2rem);color:var(--accent-soft);z-index:5;pointer-events:none;opacity:0;transition:opacity 1s .5s}
.hrot span{position:absolute;left:0;right:0;top:0}
.hero0.hin .hrot{opacity:1}
.hhold{position:absolute;left:0;right:0;bottom:clamp(24px,5vh,48px);text-align:center;font-size:1.05rem;z-index:5;pointer-events:none;opacity:0;transition:opacity 1s 1.4s;display:flex;gap:12px;align-items:center;justify-content:center}
.hhold i{width:12px;height:12px;border-radius:50%;background:var(--accent);animation:hh 1.8s ease-in-out infinite}
@keyframes hh{50%{transform:scale(1.7);opacity:.35}}
.hero0.hin .hhold{opacity:.75}
.hero0.held .hhold{opacity:0;transition-delay:0s}
.hero0{cursor:grab}.hero0.holding{cursor:grabbing}

/* ═══════════ tecnologías: banda inclinada en azul suave ═══════════ */
.tech{background:transparent;padding:clamp(60px,7vw,120px) 0;overflow:hidden}
.tech-band{background:#DCE7FB;color:var(--ink);width:116%;margin-left:-8%;transform:rotate(-2.2deg);padding:clamp(40px,5vw,76px) 0;box-shadow:0 30px 80px -30px rgba(0,0,0,.6)}
.tech-band .tech-h{padding-left:calc(8% + var(--pad))}

/* ═══════════ servicios: cada detalle es una tarjeta que se apila ═══════════ */
.dets{position:relative}
.dets .det{position:sticky;top:calc(92px + var(--i,0)*18px);min-height:58svh;align-content:center;padding:clamp(28px,4vw,60px);border-radius:var(--r);margin-bottom:clamp(20px,3vw,40px);border-top:0!important}
.dark .dets .det{background:#0c0f14;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 -18px 50px rgba(0,0,0,.55)}
.light .dets .det{background:#fff;box-shadow:inset 0 0 0 1px rgba(5,6,7,.1),0 -18px 50px rgba(5,6,7,.14)}
@media (max-width:900px){.dets .det{position:relative;top:auto;min-height:0}}

/* ═══════════ portafolio: nombres gigantes, vista previa que sigue al cursor y casos con cursor "Ver" ═══════════ */
.pf .sphead{display:none}
.pfT{padding:clamp(130px,17vw,220px) var(--pad) clamp(30px,4vw,60px);position:relative}
.pft{font-family:var(--font-display);font-weight:600;letter-spacing:-.065em;line-height:.9;font-size:clamp(3.6rem,15.5vw,16rem);position:relative}
.pfs{margin-top:clamp(20px,2.6vw,36px);max-width:40ch;font-size:clamp(1.15rem,1.6vw,1.5rem);line-height:1.5;opacity:.8}
.pfL{padding:clamp(24px,3vw,50px) var(--pad) clamp(70px,9vw,140px)}
.pflist{border-top:1px solid rgba(255,255,255,.2)}
.pfr{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:clamp(10px,1.6vw,26px) 0;border-bottom:1px solid rgba(255,255,255,.2);transition:opacity .4s}
.pfn{font-family:var(--font-display);font-weight:600;letter-spacing:-.065em;line-height:1;font-size:clamp(3rem,10.2vw,11rem);display:block;transition:transform .7s var(--ease),color .3s;will-change:transform}
.pfx{display:flex;flex-direction:column;align-items:flex-end;text-align:right;gap:6px;font-size:1.1rem;opacity:.75;max-width:16ch}
.pfx small{font-family:var(--font-display);font-size:1.05rem;color:var(--accent-soft)}
.pflist:hover .pfr{opacity:.25}
.pflist .pfr:hover{opacity:1}
.pfr:hover .pfn{transform:translateX(clamp(8px,2.4vw,40px));color:var(--accent-soft);filter:url(#pf-warp)}
.pfP{position:fixed;left:0;top:0;width:clamp(260px,24vw,380px);aspect-ratio:16/10;z-index:60;pointer-events:none;border-radius:var(--r);overflow:hidden;background:#0c0f14;opacity:0;transform:translate3d(-999px,-999px,0) scale(.7);transition:opacity .3s,scale .4s;box-shadow:0 30px 80px -20px rgba(0,0,0,.8);will-change:transform}
.pfP.on{opacity:1}
.pfP video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .35s}
.pfP video.on{opacity:1}
.pfcases{border-top:1px solid rgba(255,255,255,.14)}
.pfk{padding:clamp(60px,9vw,130px) var(--pad) 0}
.pfk-m{display:block;position:relative;aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;background:#0c0f14;cursor:none;will-change:clip-path}
.pfk-m video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pfk-t{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-top:clamp(18px,2.4vw,34px)}
.pfk-n{font-family:var(--font-display);font-size:1.05rem;color:var(--accent-soft)}
.pfk h2{margin-top:10px;font-family:var(--font-display);font-weight:600;letter-spacing:-.06em;line-height:.95;font-size:clamp(2.6rem,7vw,7.4rem)}
.pfk-t p{margin-top:12px;font-size:clamp(1.1rem,1.4vw,1.35rem);opacity:.78}
.pfk .sbtn{margin-top:0}
.pfk:last-child{padding-bottom:clamp(60px,8vw,120px)}
.pcur{position:fixed;left:0;top:0;width:96px;height:96px;margin:-48px 0 0 -48px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font-weight:600;font-size:1.1rem;z-index:80;pointer-events:none;opacity:0;transform:translate3d(-999px,-999px,0) scale(.3);transition:opacity .3s,scale .35s var(--ease);will-change:transform}
.pcur.on{opacity:1;scale:1}
@media (hover:none){.pfk-m{cursor:pointer}.pcur,.pfP{display:none}}
@media (max-width:900px){.pfx{display:none}}
.pfr::before{display:none}
.pfr .pfn{color:#fff}
.pfr:hover .pfn{color:var(--accent-soft)}

/* ═══════════ tonos de azul de la marca (el azul principal sigue siendo --accent; los demás acompañan) ═══════════ */
:root{--b-navy:#0B1A3F;--b-deep:#12337A;--b-steel:#2F5FB8;--b-peri:#A9B9F0;--b-mist:#C9D8F7;--b-ice:#EAF0FD}

/* ═══════════ menú tarjeta (idea del menú de Legacy Media): tarjeta clara con capas de azul que sale de la esquina del botón ═══════════ */
.mx-bd{position:fixed;inset:0;z-index:58;visibility:hidden;opacity:0;pointer-events:none;
  background:radial-gradient(70% 60% at 88% 0%,rgba(68,121,213,.5),transparent 70%),radial-gradient(60% 70% at 8% 100%,rgba(18,51,122,.75),transparent 70%),rgba(4,7,16,.84);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.mx-bd.open{visibility:visible;pointer-events:auto}
.mx{position:fixed;z-index:60;top:clamp(84px,11vh,104px);right:var(--pad);width:min(1240px,calc(100vw - var(--pad)*2));max-height:calc(100svh - clamp(84px,11vh,104px) - 22px);visibility:hidden;pointer-events:none;display:block;padding:0;background:none;transform:none;transition:none;color:var(--b-navy);overflow:visible}
.mx.open,.mx.closing{visibility:visible}
.mx.open{pointer-events:auto}
.mx-st{position:absolute;inset:0;border-radius:var(--r);display:block}
.mx-s1{background:var(--b-deep)}
.mx-s2{background:var(--accent)}
.mx-card{position:relative;background:var(--b-ice);border-radius:var(--r);max-height:inherit;overflow:auto;overscroll-behavior:contain;
  padding:clamp(22px,2.6vw,40px);display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.65fr);gap:clamp(20px,3vw,52px);align-items:start}
.mx-nav{display:grid;gap:2px;list-style:none;margin:0;padding:0}
.mx-nav li{overflow:visible}
.mx .mx-nav a{display:flex;align-items:baseline;gap:14px;font-family:var(--font-display);font-weight:600;font-size:clamp(1.7rem,2.5vw,2.45rem);letter-spacing:-.045em;line-height:1.2;color:var(--b-navy);padding:5px 0;transform:none;transition:color .25s,padding-left .45s var(--ease)}
.mx .mx-nav a small{font-family:var(--font-body);font-size:.95rem;font-weight:500;letter-spacing:.06em;opacity:.5;min-width:1.9em}
.mx .mx-nav a:hover{color:var(--accent);padding-left:12px}
.mx .mx-nav a.cur{color:var(--accent-deep)}
.mx .mx-nav a.cur::after{content:"";width:.22em;height:.22em;border-radius:50%;background:currentColor;align-self:center;flex:0 0 auto}
.mx-svc{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,30px)}
.mx-col ul{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:2px}
.mx .mx-h{display:flex;align-items:center;justify-content:space-between;gap:10px;font-family:var(--font-display);font-weight:600;font-size:1.12rem;letter-spacing:-.03em;color:var(--b-navy);padding:0 12px 12px;border-bottom:1.5px solid rgba(11,26,63,.16);transform:none;transition:color .25s}
.mx .mx-h::after{content:"→";transition:transform .4s var(--ease)}
.mx .mx-h:hover{color:var(--accent-deep)}.mx .mx-h:hover::after{transform:translateX(5px)}
.mx .mx-col li a{display:block;font-family:var(--font-body);font-size:1rem;font-weight:400;letter-spacing:0;line-height:1.35;color:rgba(11,26,63,.66);padding:9px 12px;border-radius:12px;transform:none;transition:background .25s,color .25s}
.mx .mx-col li a b{display:block;font-weight:600;font-size:1.05rem;color:var(--b-navy);transition:color .25s}
.mx .mx-col li a:hover{background:#fff}
.mx .mx-col li a:hover b{color:var(--accent-deep)}
.mx-cta{grid-column:1/-1;display:flex;align-items:center;gap:clamp(14px,2vw,28px);padding:clamp(14px,1.6vw,22px) clamp(18px,2vw,28px);border-radius:calc(var(--r) - 6px);color:#fff;
  background:radial-gradient(60% 160% at 100% 0%,rgba(68,121,213,.9),transparent 70%),linear-gradient(105deg,var(--b-navy) 0%,#10286A 60%,var(--b-steel) 130%)}
.mx-cta p{flex:1;margin:0;font-family:var(--font-display);font-weight:500;font-size:clamp(1.05rem,1.5vw,1.35rem);letter-spacing:-.03em;line-height:1.2}
.mx-lang{display:flex;gap:4px;padding:4px;border-radius:99px;background:rgba(255,255,255,.12)}
.mx-lang button{font:600 .95rem/1 var(--font-body);color:#fff;background:transparent;border:0;border-radius:99px;padding:9px 14px;cursor:pointer;transition:background .25s,color .25s}
.mx-lang button:hover{background:rgba(255,255,255,.22)}
.mx-lang button.on{background:#fff;color:var(--b-navy)}
.mx .mx-b{display:inline-flex;align-items:center;gap:10px;font:600 1.05rem/1 var(--font-body);color:var(--b-navy);background:#fff;border-radius:99px;padding:15px 26px;transform:none;letter-spacing:0;transition:background .3s,color .3s,transform .4s var(--ease)}
.mx .mx-b::after{content:"→";transition:transform .4s var(--ease)}
.mx .mx-b:hover{background:var(--accent);color:#fff;transform:translateY(-2px)}.mx .mx-b:hover::after{transform:translateX(5px)}
@media (max-width:1100px){.mx-card{grid-template-columns:1fr}.mx-svc{grid-template-columns:1fr 1fr}.mx-nav{grid-template-columns:repeat(2,1fr)}}
@media (max-width:760px){.mx-svc{grid-template-columns:1fr}.mx-cta{flex-wrap:wrap}}

.nav.open{--lw:#fff;--lb:#4479D5;--lc:#2AC2E7}

/* ═══════════ tecnologías: carrusel continuo, sin pausa ni selección ═══════════ */
.tech:hover .tk{animation-play-state:running}
.trow{pointer-events:none}
.tk{animation-duration:var(--d,80s)}
.trow.r .tk{animation-duration:var(--d,80s)}
.tech-band .tech-h{font-family:var(--font-display);font-weight:600;font-size:clamp(1.9rem,3.6vw,3.4rem);letter-spacing:-.045em;line-height:1.05;text-transform:none;color:var(--b-navy);opacity:1;margin-bottom:clamp(26px,3.4vw,52px);max-width:22ch}
.tech-band .tech-h .mk{color:inherit}
.tt{transition:none}
.tt svg{width:clamp(46px,4.4vw,62px);height:clamp(46px,4.4vw,62px)}
.tk{gap:clamp(40px,5vw,78px);padding-right:clamp(40px,5vw,78px)}

/* ═══════════ lente de cursor v3: mancha irregular + materiales (la forma la dibuja js/lente.js con clip-path) ═══════════ */
.lensed .lb{-webkit-mask-image:none;mask-image:none}
.lensed .lt{clip-path:none;visibility:hidden}
.fx-cromo .lt{color:transparent;-webkit-background-clip:text;background-clip:text;
  background-image:linear-gradient(105deg,transparent 34%,rgba(255,255,255,.95) 48%,transparent 62%),linear-gradient(180deg,#fff 0%,#cfe0ff 13%,#7f9fe0 29%,#1d2f63 46%,#070d22 51%,#5d7fd0 58%,#dbe8ff 74%,#9db8f0 88%,#fff 100%);
  background-size:50% 100%,100% 100%;background-repeat:no-repeat;background-position:calc(var(--lx,0px) - 25%) 0,0 0;filter:drop-shadow(0 2px 12px rgba(68,121,213,.6))}
.fx-mercurio .lt{color:transparent;-webkit-background-clip:text;background-clip:text;
  background-image:radial-gradient(40% 110% at var(--lx,50%) var(--ly,50%),#fff 0,#dce6f8 12%,#93a8d2 36%,#5e75a3 62%,#3a4d7c 100%);filter:url(#iz-merc)}
.fx-tinta .lt{color:#050b1f;filter:url(#iz-ink)}
.fx-cristal .lt{color:transparent;-webkit-background-clip:text;background-clip:text;
  background-image:linear-gradient(155deg,rgba(255,255,255,.98) 0%,#d6e5ff 28%,#8fb0f0 56%,#eaf2ff 80%,#fff 100%);-webkit-text-stroke:1.5px rgba(255,255,255,.9);filter:drop-shadow(0 8px 28px rgba(68,121,213,.7))}
.fx-acero .lt{color:transparent;-webkit-background-clip:text;background-clip:text;
  background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.2) 0 1px,transparent 1px 3px),linear-gradient(100deg,#2a3550 0%,#c3cde3 24%,#56648a 46%,#e9eefb 62%,#34415f 82%,#aeb9d4 100%);
  background-size:auto,230% 100%;background-position:0 0,calc(var(--lx,0px)*-.45) 0}

/* ═══════════ hero: aviso "mantén presionado" y anillo del cursor ═══════════ */
.hhold{left:50%;right:auto;transform:translateX(-50%);width:max-content;padding:9px 22px 9px 12px;border-radius:99px;background:rgba(9,15,34,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-size:1.05rem;gap:12px}
.hhold::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;background:conic-gradient(from var(--hha,0deg),rgba(143,176,240,0) 0deg,var(--accent) 150deg,#fff 190deg,rgba(143,176,240,0) 200deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);animation:hha 3.2s linear infinite}
@property --hha{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes hha{to{--hha:360deg}}
.hh-ic{width:36px;height:36px;overflow:visible;flex:none}
.hh-ic ellipse{fill:none;stroke:var(--accent-soft);stroke-width:1.7;transform-box:view-box;transform-origin:24px 24px;animation:hho 3.2s var(--ease) infinite}
.hh-ic ellipse+ellipse{stroke:#fff;opacity:.75;animation-delay:.2s}
.hh-ic circle{fill:#fff}
@keyframes hho{0%,16%{transform:rotate(-24deg) scale(.5)}56%,76%{transform:rotate(-24deg) scale(1.22)}100%{transform:rotate(-24deg) scale(.5)}}
.hero0.hin .hhold{opacity:1}
.hring{position:fixed;left:0;top:0;width:96px;height:96px;margin:-48px 0 0 -48px;z-index:90;pointer-events:none;opacity:0;transform:translate3d(-200px,-200px,0) scale(.5);transition:opacity .3s}
.hring.on{opacity:1}
.hring svg{width:100%;height:100%;overflow:visible;animation:hrr 5s linear infinite}
.hring circle{fill:none;stroke:#fff;stroke-width:3;stroke-dasharray:2 9;stroke-linecap:round}
.hring circle+circle{stroke:var(--accent-soft);stroke-dasharray:10 24;stroke-width:2.5;animation:hrr 3s linear infinite reverse;transform-origin:center}
@keyframes hrr{to{transform:rotate(360deg)}}

/* ═══════════ proyectos que hablan por nosotros: cada ventana es un cartel (fondo en tonos de azul + pantalla del sitio + nombre) ═══════════ */
.pj{background:var(--b-navy);color:#fff;font-family:var(--font-display)}
.pj-n{position:absolute;left:7cqw;bottom:5.5cqh;z-index:1;font-weight:700;font-size:min(14cqh,9cqw);line-height:1;letter-spacing:-.05em;white-space:nowrap;text-transform:uppercase}
.pj-s{position:absolute;margin:0;left:7cqw;right:7cqw;top:9cqh;bottom:27cqh;z-index:2;border-radius:3cqmin;overflow:hidden;background:#000;box-shadow:0 2.2cqmin 6cqmin rgba(2,6,20,.5)}
.pj .pj-s video{inset:0;object-fit:cover;object-position:50% 0}
.pj.ph .pj-s{left:50%;right:auto;width:calc((100cqh - 9cqh - 27cqh)*.462);margin-left:calc((100cqh - 9cqh - 27cqh)*-.231);border-radius:4cqmin}
.pj-a{background:radial-gradient(90% 120% at 100% 0%,var(--accent) 0%,var(--b-deep) 55%,var(--b-navy) 100%)}
.pj-b{background:linear-gradient(145deg,var(--b-ice) 0%,var(--b-peri) 100%);color:var(--b-navy)}
.pj-c{background:var(--accent)}
.pj-c .pj-n{left:auto;right:7cqw}
.pj-d{background:radial-gradient(80% 100% at 0% 100%,var(--b-steel) 0%,var(--b-navy) 70%)}
.pj-e{background:linear-gradient(160deg,var(--b-mist),#8EA7EA);color:var(--b-navy)}
.pj-e .pj-n{left:auto;right:7cqw}
.pj-f{background:linear-gradient(120deg,var(--b-navy) 0%,var(--b-deep) 60%,var(--accent) 140%)}
.pj-g{background:radial-gradient(100% 100% at 50% 100%,var(--accent) 0%,var(--b-deep) 70%);display:flex;align-items:center;justify-content:center}
.pj-k{width:44cqmin;height:44cqmin;fill:#fff}
.pj-k path{fill:#fff}

.zl{will-change:auto}
.pj-n,.pj-s{backface-visibility:hidden}

/* ═══════════ servicios v2: encabezado con dos paneles + capítulos con ilustración que cambia con el scroll ═══════════ */
.sv-hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;padding:clamp(100px,14vh,140px) 0 clamp(26px,4.5vh,52px);overflow:hidden;
  background:radial-gradient(70% 55% at 88% 6%,rgba(68,121,213,.3),transparent 70%),radial-gradient(55% 60% at 0% 100%,rgba(18,51,122,.55),transparent 72%),#050607}
.sv-hi{position:relative;z-index:1;width:100%}
.sv-t{font-family:var(--font-display);font-weight:700;letter-spacing:-.05em;line-height:.96;font-size:clamp(2.7rem,min(8.2vw,14.5vh),8.6rem);max-width:13ch}
.sv-t em{font-style:normal;background:linear-gradient(100deg,var(--accent-soft) 0%,var(--accent) 45%,var(--b-peri) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.sv-t .rw{padding-bottom:.08em}
.sv-p{margin-top:clamp(12px,2vh,22px);max-width:54ch;font-size:clamp(1.12rem,1.5vw,1.38rem);line-height:1.45;opacity:.84}
.sv-lines{display:flex;gap:16px;margin-top:clamp(20px,3.6vh,40px);height:clamp(230px,33vh,330px)}
.svl{position:relative;flex:1 1 0;min-width:0;border-radius:var(--r);overflow:hidden;padding:clamp(18px,2vw,30px);display:flex;flex-direction:column;justify-content:space-between;color:#fff;
  transition:flex-grow .8s var(--ease),transform .5s var(--ease),box-shadow .5s}
.svl:hover{flex-grow:1.6;transform:translateY(-6px);box-shadow:0 30px 70px -26px rgba(68,121,213,.6)}
.sv-lines:hover .svl:not(:hover){flex-grow:.75}
.svl-a{background:radial-gradient(90% 130% at 100% 0%,#2257b8 0%,var(--b-deep) 45%,var(--b-navy) 100%)}
.svl-b2{background:radial-gradient(90% 130% at 0% 0%,#7ba3ec 0%,var(--accent) 48%,var(--b-steel) 100%)}
.svl-n{position:relative;z-index:1;font-family:var(--font-display);font-weight:600;font-size:clamp(2.2rem,3.8vw,3.6rem);letter-spacing:-.05em;line-height:1}
.svl-n small{font:500 1.05rem var(--font-body);letter-spacing:0;margin-left:10px;opacity:.75}
.svl-b{position:relative;z-index:1}
.svl h2{font-family:var(--font-display);font-weight:600;font-size:clamp(1.5rem,2.5vw,2.5rem);letter-spacing:-.045em;line-height:1.04}
.svl p{max-width:36ch;margin-top:8px;font-size:1.1rem;line-height:1.4;opacity:.88}
.svl-u{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:8px;max-height:0;opacity:0;overflow:hidden;transition:max-height .7s var(--ease),opacity .45s,margin .5s}
.svl:hover .svl-u{max-height:130px;opacity:1;margin-top:14px}
.svl-u li{font-size:.98rem;font-weight:500;padding:6px 14px;border-radius:99px;background:rgba(255,255,255,.16);box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}
.svl-go{position:absolute;z-index:1;right:clamp(16px,1.8vw,26px);top:clamp(16px,1.8vw,26px);width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font-size:1.4rem;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55);transition:background .35s,color .35s,transform .5s var(--ease)}
.svl:hover .svl-go{background:#fff;color:var(--b-navy);transform:translateY(5px)}
.svl-v{position:absolute;right:3%;top:20%;width:30%;color:#fff;opacity:.3;transition:transform .9s var(--ease),opacity .5s;pointer-events:none}
.svl:hover .svl-v{transform:scale(1.14) rotate(-3deg);opacity:.55}
.svl-v .sc{width:100%;display:block}

.svc{position:relative;padding:clamp(70px,9vw,140px) 0 clamp(60px,8vw,120px)}
.svc.dk{background:#050607;color:#fff}
.svc.lt{background:var(--b-ice);color:var(--b-navy)}
.svc-in{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,5vw,88px);align-items:start}
.svc-h{padding-bottom:clamp(20px,4vw,50px)}
.svc-h .display{font-size:clamp(2.6rem,5.6vw,5.6rem);max-width:11ch;margin:0}
.svc .slead{max-width:46ch;opacity:.8}
.svi{min-height:min(74vh,720px);display:flex;flex-direction:column;justify-content:center;padding:clamp(26px,5vh,56px) 0;border-top:1.5px solid rgba(255,255,255,.14);opacity:.36;transition:opacity .6s;scroll-margin-top:40px}
.svc.lt .svi{border-color:rgba(11,26,63,.16)}
.svi.on{opacity:1}
.svn{font-family:var(--font-display);font-weight:500;font-size:1.1rem;letter-spacing:.06em;color:var(--accent)}
.svc.lt .svn{color:var(--b-steel)}
.svi h3{font-family:var(--font-display);font-weight:600;font-size:clamp(2rem,3.7vw,3.7rem);letter-spacing:-.05em;line-height:1.03;margin:10px 0 8px}
.svm{font-size:1.28rem;font-weight:500;color:var(--accent-soft)}
.svc.lt .svm{color:var(--b-steel)}
.svd{margin-top:16px;max-width:54ch;font-size:1.14rem;line-height:1.55;opacity:.86}
.svu{list-style:none;padding:0;margin-top:20px;display:grid;gap:9px;max-width:54ch}
.svu li{position:relative;padding-left:24px;font-size:1.05rem;line-height:1.4}
.svu li::before{content:"";position:absolute;left:0;top:.5em;width:9px;height:9px;border-radius:2px;background:var(--accent)}
.svc.lt .svu li::before{background:var(--b-steel)}
.svc .sbtn{margin-top:clamp(18px,3vw,36px)}
.svc.dk .sbtn{background:var(--accent);color:#fff;--fill:#fff}
.svc.dk .sbtn:hover{color:var(--b-navy)}
.svc.lt .sbtn{background:var(--b-navy);color:#fff;--fill:var(--accent)}
.svc-r{position:relative;align-self:stretch}
.svv{position:sticky;top:calc(50vh - min(270px,37vh));height:min(540px,74vh);border-radius:var(--r);overflow:hidden;color:#fff;
  background:radial-gradient(90% 90% at 100% 0%,#2a5fc4 0%,var(--b-deep) 50%,var(--b-navy) 100%)}
.svc.lt .svv{background:radial-gradient(90% 90% at 0% 0%,#86aaf0 0%,var(--accent) 50%,var(--b-steel) 100%)}
.svv .sc{position:absolute;left:50%;top:44%;width:min(64%,360px);height:auto;margin:0;transform:translate(-50%,-46%) scale(.9);opacity:0;transition:opacity .6s,transform .9s var(--ease);color:#fff;overflow:visible}
.svv .sc.on{opacity:1;transform:translate(-50%,-50%)}
.svv-t{position:absolute;left:clamp(18px,2vw,30px);right:clamp(18px,2vw,30px);bottom:clamp(16px,1.8vw,26px);display:flex;align-items:baseline;gap:14px;font-family:var(--font-display);font-weight:600;font-size:clamp(1.2rem,1.7vw,1.7rem);letter-spacing:-.04em}
.svv-t b{font-weight:500;opacity:.7;font-size:1rem}
.sc .fl{fill:rgba(255,255,255,.14)}
.sc .fa{fill:var(--b-mist);stroke:none}
/* animaciones de las ilustraciones: solo corren las visibles */
.dsh{stroke-dasharray:7 9;animation:scflow 1.8s linear infinite}
@keyframes scflow{to{stroke-dashoffset:-32}}
.pls{transform-box:fill-box;transform-origin:center;animation:scpls 2.6s ease-in-out infinite;animation-delay:calc(var(--n,0)*.3s)}
@keyframes scpls{50%{transform:scale(1.12)}}
.drp{transform-box:fill-box;transform-origin:center;animation:scdrop 2.6s ease-in infinite;animation-delay:calc(var(--n,0)*.42s)}
@keyframes scdrop{0%{transform:translateY(-16px);opacity:0}15%{opacity:1}100%{transform:translateY(120px);opacity:0}}
.grw{transform-box:fill-box;transform-origin:50% 100%;animation:scgrw 3s ease-in-out infinite alternate;animation-delay:calc(var(--n,0)*-.6s)}
@keyframes scgrw{from{transform:scaleY(.3)}to{transform:scaleY(1)}}
.drw{stroke-dasharray:1;stroke-dashoffset:1;animation:scdrw 3.4s ease-in-out infinite}
@keyframes scdrw{0%{stroke-dashoffset:1}55%,100%{stroke-dashoffset:0}}
.sld{animation:scsld 5s ease-in-out infinite alternate}
@keyframes scsld{from{transform:translateY(0)}to{transform:translateY(-22px)}}
.svc .sc:not(.on) *,.svl .sc *{animation-play-state:paused}
.svc .sc.on *,.svl:hover .sc *{animation-play-state:running}
@media (prefers-reduced-motion:reduce){.sc *{animation:none!important}.drw{stroke-dashoffset:0}}
@media (max-width:1000px){.svc-in{grid-template-columns:1fr}.svc-r{display:none}.svi{min-height:0;opacity:1}.sv-lines{flex-direction:column;height:auto}.svl{min-height:230px}.svl:hover{flex-grow:1}}

/* ═══════════ portafolio: trabajos en zig-zag (referencia: trionn.com/work) ═══════════ */
.pfcases{display:none}
.pfw-sec{position:relative;padding:clamp(70px,9vw,140px) var(--pad) clamp(40px,6vw,90px);border-top:1px solid rgba(255,255,255,.12);overflow:hidden}
.pfw-h{font-size:clamp(2.6rem,6.4vw,6.4rem);max-width:14ch;margin:0 0 clamp(36px,6vw,90px)}
.pfw{position:relative;display:flex;flex-direction:column;gap:clamp(50px,7vw,120px)}
.pfw-line{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:0}
.pfw-line path{fill:none;stroke:rgba(143,176,240,.5);stroke-width:1.3;stroke-linecap:round}
.pfk{position:relative;z-index:1;padding:0;width:var(--w,46vw)}
.pfk:nth-child(5n+1){align-self:flex-start;--w:min(50vw,760px)}
.pfk:nth-child(5n+2){align-self:flex-end;--w:min(38vw,580px);margin-top:clamp(-170px,-9vw,-40px)}
.pfk:nth-child(5n+3){align-self:flex-start;--w:min(42vw,640px);margin-left:clamp(0px,5vw,90px)}
.pfk:nth-child(5n+4){align-self:flex-end;--w:min(50vw,760px);margin-top:clamp(-150px,-7vw,-30px)}
.pfk:nth-child(5n){align-self:flex-start;--w:min(34vw,520px);margin-left:clamp(0px,9vw,160px)}
.pfk-m{display:block;position:relative;aspect-ratio:16/10;border-radius:var(--r);overflow:hidden;background:#0c1224;cursor:none;will-change:clip-path;box-shadow:0 30px 70px -34px rgba(68,121,213,.45)}
.pfk-m video,.pfk-m img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0;transition:transform 1.1s var(--ease)}
.pfk-m:hover video,.pfk-m:hover img{transform:scale(1.06)}
.pfk-i{position:absolute;left:16px;top:16px;z-index:2;min-width:44px;height:44px;padding:0 12px;border-radius:99px;display:grid;place-items:center;font-family:var(--font-display);font-weight:500;font-size:1rem;color:#fff;background:rgba(5,6,7,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.pfk-t{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-top:clamp(14px,1.8vw,24px)}
.pfk-t h3{font-family:var(--font-display);font-weight:600;font-size:clamp(1.6rem,2.4vw,2.4rem);letter-spacing:-.05em;line-height:1.05}
.pfk-t p{margin-top:8px;font-size:1.1rem;line-height:1.4;color:var(--accent-soft);max-width:36ch}
.pfk-go{flex:none;display:inline-flex;align-items:center;gap:12px;padding:8px 0;font-size:.98rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;border-bottom:1.5px solid rgba(255,255,255,.5);transition:border-color .3s,color .3s,gap .4s var(--ease)}
.pfk-go i{font-style:normal;transition:transform .4s var(--ease)}
.pfk-go:hover{color:var(--accent-soft);border-color:var(--accent-soft);gap:18px}
.pfk-go:hover i{transform:translateX(4px)}
.pfk-c{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin-top:14px}
.pfk-c li{padding:6px 14px;border-radius:99px;font-size:.98rem;box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
.pfs-empty{width:min(100%,900px);padding:clamp(28px,4vw,56px);border-radius:var(--r);background:radial-gradient(80% 140% at 100% 0%,rgba(68,121,213,.35),transparent 70%),#0b1226;box-shadow:inset 0 0 0 1.5px rgba(143,176,240,.35)}
.pfs-empty p{font-family:var(--font-display);font-weight:500;font-size:clamp(1.3rem,2.4vw,2.2rem);letter-spacing:-.04em;line-height:1.2;max-width:28ch}
.pfs-empty .sbtn{background:var(--accent);color:#fff;--fill:#fff}
.pfs-empty .sbtn:hover{color:var(--b-navy)}
@media (max-width:900px){.pfk,.pfk:nth-child(n){width:100%;align-self:stretch;margin:0}.pfw-line{display:none}}

/* ═══════════ equipo: fichas de programadores ═══════════ */
.eqT{padding:clamp(130px,17vw,220px) var(--pad) clamp(30px,4vw,60px);position:relative}
.eqt{font-family:var(--font-display);font-weight:600;letter-spacing:-.065em;line-height:.9;font-size:clamp(3.6rem,15.5vw,16rem);position:relative}
.eqs{margin-top:clamp(20px,2.6vw,36px);max-width:40ch;font-size:clamp(1.15rem,1.6vw,1.5rem);line-height:1.5;opacity:.8}
.eqL{padding:clamp(24px,3vw,50px) var(--pad) clamp(50px,7vw,100px)}
.eq .pfn{font-size:clamp(2.4rem,7vw,7.4rem)}
.eqp{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.3fr);gap:clamp(28px,5vw,90px);padding:clamp(60px,8vw,120px) var(--pad);border-top:1px solid rgba(255,255,255,.14);scroll-margin-top:20px}
.eqp-a{position:relative}
.eqp-f{position:sticky;top:calc(50vh - min(260px,36vh));aspect-ratio:4/5;max-height:72vh;border-radius:var(--r);overflow:hidden;display:grid;place-items:center;background:radial-gradient(90% 90% at 100% 0%,#2a5fc4 0%,var(--b-deep) 55%,var(--b-navy) 100%)}
.eqp-f img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.eqp-ini{font-family:var(--font-display);font-weight:600;font-size:clamp(5rem,12vw,11rem);letter-spacing:-.06em;color:rgba(255,255,255,.92)}
.eqp-no{font-family:var(--font-display);font-size:1.05rem;color:var(--accent-soft)}
.eqp-n{font-size:clamp(2.4rem,5vw,5rem);margin:10px 0 0;max-width:14ch}
.eqp-rol{margin-top:14px;font-size:clamp(1.15rem,1.5vw,1.4rem);color:var(--accent-soft);font-weight:500}
.eqp-res{margin-top:20px;max-width:56ch;font-size:1.15rem;line-height:1.55;opacity:.88}
.eqp-b h3{margin:clamp(30px,4vw,52px) 0 14px;font-family:var(--font-display);font-weight:600;font-size:1.3rem;letter-spacing:-.03em}
.eqp-sk{display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0}
.eqp-sk li{padding:8px 18px;border-radius:99px;font-size:1.02rem;font-weight:500;box-shadow:inset 0 0 0 1.5px rgba(143,176,240,.5);transition:background .3s,color .3s}
.eqp-sk li:hover{background:var(--accent);color:#fff;box-shadow:none}
.eqp-ce,.eqp-sy{list-style:none;padding:0;display:grid;gap:12px}
.eqp-ce li,.eqp-sy li{display:grid;gap:4px;padding:16px 20px;border-radius:var(--r);background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);transition:background .3s,transform .5s var(--ease)}
.eqp-ce li:hover,.eqp-sy li:hover{background:rgba(68,121,213,.22);transform:translateX(6px)}
.eqp-ce img{width:100%;max-width:340px;border-radius:12px;margin-bottom:8px}
.eqp-ce b,.eqp-sy b{font-size:1.15rem;font-weight:600}
.eqp-ce span,.eqp-sy span{font-size:1.02rem;opacity:.78;line-height:1.45}
.eqp-sy em{font-style:normal;font-size:.98rem;color:var(--accent-soft)}
.eqp-ac{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:clamp(24px,3vw,40px)}
.eqp-ac .sbtn{margin-top:0;background:var(--accent);color:#fff;--fill:#fff}
.eqp-ac .sbtn:hover{color:var(--b-navy)}
.eqp-l2{font-weight:600;border-bottom:1.5px solid rgba(255,255,255,.5);padding:6px 0;transition:color .3s,border-color .3s}
.eqp-l2:hover{color:var(--accent-soft);border-color:var(--accent-soft)}
.eqE{padding:clamp(30px,5vw,80px) var(--pad) clamp(80px,10vw,150px)}
.eqE-in{width:min(100%,980px);padding:clamp(28px,4vw,60px);border-radius:var(--r);background:radial-gradient(80% 140% at 100% 0%,rgba(68,121,213,.35),transparent 70%),#0b1226;box-shadow:inset 0 0 0 1.5px rgba(143,176,240,.35)}
.eqE-in p{font-family:var(--font-display);font-weight:500;font-size:clamp(1.4rem,2.6vw,2.4rem);letter-spacing:-.04em;line-height:1.2;max-width:26ch}
.eqE-in .sbtn{background:var(--accent);color:#fff;--fill:#fff}
.eqE-in .sbtn:hover{color:var(--b-navy)}
.eq-aviso{position:relative;z-index:3;margin:0;padding:12px var(--pad);background:var(--accent);color:#fff;font-weight:600;text-align:center}
@media (max-width:900px){.eqp{grid-template-columns:1fr}.eqp-f{position:relative;top:auto;max-height:50vh}}
.pfw-h{max-width:none}
footer#pie .giant{font-size:clamp(1.6rem,min(6.7vw,5.75rem),9rem)}

/* ═══════════ riel de scroll propio (reemplaza la barra del navegador) ═══════════ */
html{scrollbar-width:none;-ms-overflow-style:none}
html::-webkit-scrollbar,body::-webkit-scrollbar{display:none;width:0}
.riel{position:fixed;right:clamp(6px,.8vw,14px);top:50%;transform:translateY(-50%);width:34px;height:min(62vh,540px);z-index:85;opacity:.55;transition:opacity .4s;cursor:pointer;touch-action:none}
.riel.on,.riel:hover,.riel.drag{opacity:1}
.riel-pista{position:absolute;right:13px;top:0;bottom:0;width:3px;border-radius:3px;background:rgba(150,170,210,.34);transition:width .3s var(--ease),right .3s var(--ease),background .3s}
.riel:hover .riel-pista,.riel.drag .riel-pista{width:7px;right:11px;background:rgba(150,170,210,.42)}
.riel-pt{position:absolute;right:11px;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:rgba(190,205,235,.8);box-shadow:0 0 0 2px rgba(5,6,7,.35);transition:background .3s,transform .3s;pointer-events:none}
.riel-pt.on{background:var(--accent-soft)}
.riel:hover .riel-pt{right:9px;transform:scale(1.2)}
.riel-pulgar{position:absolute;right:11px;top:0;width:7px;border-radius:7px;background:linear-gradient(180deg,var(--accent-soft),var(--accent) 55%,var(--b-steel));box-shadow:0 0 18px rgba(68,121,213,.55);will-change:transform;transition:width .3s var(--ease),right .3s var(--ease)}
.riel:hover .riel-pulgar,.riel.drag .riel-pulgar{width:11px;right:9px}
.riel-et{position:absolute;right:calc(100% + 14px);top:50%;transform:translateY(-50%) translateX(8px);white-space:nowrap;padding:8px 16px;border-radius:99px;background:var(--b-ice);color:var(--b-navy);font-weight:600;font-size:.95rem;opacity:0;transition:opacity .3s,transform .4s var(--ease);pointer-events:none}
.riel:hover .riel-et,.riel.drag .riel-et{opacity:1;transform:translateY(-50%)}
@media (max-width:900px){.riel{height:min(50vh,420px)}}

.sv-lines{height:clamp(250px,38vh,380px)}
.svl p{max-height:64px;overflow:hidden;transition:max-height .5s var(--ease),opacity .3s,margin .4s}
.svl:hover .svl-b p{max-height:0;opacity:0;margin-top:0}
.svl:hover .svl-u{max-height:150px}
.svl-n{transition:font-size .5s var(--ease)}
.svl:hover .svl-n{font-size:clamp(1.8rem,3vw,2.8rem)}

.hero0.held .hhold{opacity:0;transition-delay:0s}

/* ═══════════ sistemas: tarjeta con ilustración mientras no hay captura real ═══════════ */
.pfk-esc{display:grid;place-items:center;cursor:default;background:radial-gradient(90% 100% at 100% 0%,#2a5fc4 0%,var(--b-deep) 55%,var(--b-navy) 100%);color:#fff}
.pfk-esc .sc{position:relative;width:min(46%,260px);height:auto;color:#fff;overflow:visible}
a.pfk-m{cursor:none}

/* ═══════════ ajustes (ronda 3): sin flechas →, riel oculto en la apertura, selección de texto, menú con más diseño, banderas ═══════════ */
.bw::after,.bg::after,.ncta::after,.sbtn::after,.lgo::after,.bandb a::after,.dsG::after,.mx .mx-h::after,.mx .mx-b::after,.mi li a::after{content:none!important}
.pfbig i,.pfk-go i,.dsU li a i,.mall{display:none!important}
.hero0,.hero0 *{-webkit-user-select:none;user-select:none;-webkit-user-drag:none}
.hero0 ::selection{background:transparent}
body.intro-on .riel{opacity:0!important;visibility:hidden;pointer-events:none}
.riel{transition:opacity .5s .2s,visibility 0s}
/* barra: al abrir el menú desaparece el Contáctanos de arriba (queda el del menú) */
.nav .ncta{transition:opacity .35s,transform .5s var(--ease),min-width .5s var(--ease),padding .5s var(--ease),margin .5s var(--ease),background .3s,color .3s,border-color .3s}
.nav.open .ncta{opacity:0;transform:translateY(-14px);pointer-events:none;min-width:0;width:0;padding:0;margin-left:0;overflow:hidden;border-width:0}
/* menú: cada servicio se enciende con un barrido de azul */
.mx .mx-col li a{position:relative;overflow:hidden;isolation:isolate;transition:color .3s,padding-left .5s var(--ease)}
.mx .mx-col li a::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:12px;background:linear-gradient(100deg,var(--b-navy) 0%,var(--b-deep) 55%,var(--accent) 120%);transform:scaleX(0);transform-origin:0 50%;transition:transform .55s var(--ease)}
.mx .mx-col li a::after{content:"";position:absolute;left:0;top:50%;width:4px;height:0;margin-top:0;border-radius:4px;background:var(--b-mist);transition:height .4s var(--ease),margin-top .4s var(--ease)}
.mx .mx-col li a:hover{background:transparent;padding-left:22px}
.mx .mx-col li a:hover::before{transform:scaleX(1)}
.mx .mx-col li a:hover::after{height:56%;margin-top:-28%}
.mx .mx-col li a:hover b{color:#fff}
.mx .mx-col li a:hover{color:rgba(255,255,255,.82)}
.mx .mx-nav a:hover{padding-left:0}
.mx .mx-nav a{position:relative;transition:color .3s,letter-spacing .5s var(--ease)}
.mx .mx-nav a:hover{letter-spacing:-.02em}
/* idiomas con bandera */
.mx-lang{gap:6px;padding:5px}
.mx-lang button{display:inline-flex;align-items:center;gap:8px;padding:6px 14px 6px 6px;font-size:.95rem}
.mx-lang button svg{width:26px;height:26px;border-radius:50%;flex:none;box-shadow:0 0 0 1.5px rgba(255,255,255,.55)}
.mx-lang button.on svg{box-shadow:0 0 0 2px var(--accent)}

/* ═══════════ servicios v3: cintas que se cruzan + franjas verticales que se expanden (ideas de tricks.de y Phobos) ═══════════ */
.sv-hero{align-items:stretch}
.sv-hi{display:flex;flex-direction:column;min-height:calc(100svh - clamp(126px,18vh,190px))}
.sv-rib{position:relative;margin-top:auto;height:clamp(230px,38vh,380px);margin-inline:calc(var(--pad)*-1)}
.rib{position:absolute;left:-6%;right:-6%;top:50%;height:clamp(64px,9.5vh,100px);margin-top:calc(clamp(64px,9.5vh,100px)/-2);overflow:hidden;display:flex;align-items:center;color:#fff;transition:transform .6s var(--ease),filter .4s,box-shadow .5s}
.rib-a{background:linear-gradient(100deg,var(--b-deep),var(--accent) 60%,#6F98E8);transform:rotate(-4.2deg);z-index:2;box-shadow:0 24px 60px -24px rgba(68,121,213,.7)}
.rib-b{background:var(--b-ice);color:var(--b-navy);transform:rotate(3.6deg);z-index:1}
.rib:hover{filter:brightness(1.08)}
.rib-a:hover{transform:rotate(-4.2deg) scale(1.025)}.rib-b:hover{transform:rotate(3.6deg) scale(1.025);z-index:3}
.rib-t{display:flex;align-items:center;width:max-content;gap:clamp(22px,2.6vw,44px);padding-right:clamp(22px,2.6vw,44px);font-family:var(--font-display);font-weight:600;font-size:clamp(1.5rem,2.9vw,2.9rem);letter-spacing:-.045em;white-space:nowrap;animation:ribA 46s linear infinite}
.rib-b .rib-t{animation-direction:reverse;animation-duration:54s}
.rib-t span{display:block}
.rib-h{opacity:.7}
.rib-t i{display:block;width:.34em;height:.34em;background:currentColor;transform:rotate(45deg);flex:none;opacity:.8}
@keyframes ribA{to{transform:translateX(-50%)}}

.acc{position:relative;height:calc(100svh + var(--n)*60vh);padding:0}
.acc.dk{background:#050607;color:#fff}
.acc.lt{background:var(--b-ice);color:var(--b-navy)}
.acc-pin{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;gap:clamp(12px,2vh,24px);padding:clamp(86px,12vh,118px) var(--pad) clamp(18px,3vh,32px)}
.acc-h{display:flex;justify-content:space-between;align-items:flex-end;gap:24px}
.acc-h .display{font-size:clamp(2.2rem,min(4.6vw,8vh),5rem);max-width:none;margin:0;line-height:1}
.acc-h .slead{margin-top:10px;max-width:56ch;font-size:clamp(1rem,1.3vw,1.2rem);opacity:.8}
.acc-ct{font-family:var(--font-display);font-weight:500;font-size:clamp(1.4rem,2.2vw,2.2rem);letter-spacing:-.04em;opacity:.9;white-space:nowrap}
.acc-ct b{font-weight:600;color:var(--accent)}
.acc.lt .acc-ct b{color:var(--b-steel)}
.acc-row{flex:1;min-height:0;display:flex;gap:12px}
.acs{position:relative;flex:0 0 clamp(64px,6vw,100px);border-radius:var(--r);overflow:hidden;color:#fff;background:linear-gradient(160deg,var(--t1,#0B1A3F),var(--t2,#12337A));transition:flex-basis .9s var(--ease),flex-grow .9s var(--ease),filter .4s}
.acs.on{flex:1 1 0}
.acs:not(.on):hover{filter:brightness(1.18)}
.acs:nth-child(6n+1){--t1:#0B1A3F;--t2:#12337A}.acs:nth-child(6n+2){--t1:#12337A;--t2:#2F5FB8}.acs:nth-child(6n+3){--t1:#1B3F8F;--t2:#4479D5}
.acs:nth-child(6n+4){--t1:#2F5FB8;--t2:#6F98E8}.acs:nth-child(6n+5){--t1:#0E2559;--t2:#2A5FC4}.acs:nth-child(6n){--t1:#163A82;--t2:#3E6FCB}
.acc.lt .acs:nth-child(6n+1){--t1:#4479D5;--t2:#2F5FB8}.acc.lt .acs:nth-child(6n+2){--t1:#12337A;--t2:#2F5FB8}.acc.lt .acs:nth-child(6n+3){--t1:#2F5FB8;--t2:#6F98E8}
.acc.lt .acs:nth-child(6n+4){--t1:#0B1A3F;--t2:#1B3F8F}.acc.lt .acs:nth-child(6n+5){--t1:#4479D5;--t2:#86AAF0}
.acs-b{position:absolute;inset:0;z-index:2;border:0;background:none;color:inherit;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:clamp(14px,2vh,22px) 0;transition:opacity .35s}
.acs.on .acs-b{opacity:0;pointer-events:none}
.acs-bn{font-family:var(--font-display);font-weight:500;font-size:1rem;opacity:.8}
.acs-vn{writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--font-display);font-weight:600;font-size:clamp(1.15rem,1.7vw,1.7rem);letter-spacing:-.03em;white-space:nowrap}
.acs-c{position:absolute;left:0;top:0;bottom:0;min-width:min(940px,66vw);width:100%;padding:clamp(22px,2.6vw,44px);display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(16px,2.4vw,40px);align-items:center;opacity:0;transform:translateX(30px);transition:opacity .35s,transform .5s var(--ease)}
.acs.on .acs-c{opacity:1;transform:none;transition:opacity .6s .45s,transform .9s .4s var(--ease)}
.acs-n{font-family:var(--font-display);font-weight:500;font-size:1.1rem;letter-spacing:.06em;color:var(--b-mist)}
.acs-t h3{font-family:var(--font-display);font-weight:600;font-size:clamp(2rem,min(3.6vw,6.4vh),3.7rem);letter-spacing:-.05em;line-height:1.02;margin:8px 0 6px}
.acs-t .svm{font-size:clamp(1.05rem,1.4vw,1.3rem);font-weight:500;color:var(--b-mist)}
.acs-t .svd{margin-top:12px;max-width:50ch;font-size:clamp(1rem,1.15vw,1.12rem);line-height:1.5;opacity:.9}
.acs-t .svu{margin-top:14px;gap:6px}
.acs-t .svu li{font-size:clamp(.95rem,1.05vw,1.04rem)}
.acs-t .svu li::before{background:var(--b-mist)}
.acs-v{display:grid;place-items:center;min-width:0}
.acs-v .sc{width:min(100%,max(46vh,260px));height:auto;color:#fff;overflow:visible;stroke-width:3}
.acs:not(.on) .sc *{animation-play-state:paused}
.acc-a{position:absolute;left:0;width:1px;height:1px;pointer-events:none}
.acc-bar{height:3px;border-radius:3px;background:rgba(150,170,210,.3);overflow:hidden;flex:none}
.acc-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--b-deep),var(--accent),var(--b-peri));transform-origin:0 50%;transform:scaleX(0)}
.svc{display:none}
@media (max-width:1000px){
  .acc{height:auto}.acc-pin{position:relative;height:auto;padding-top:clamp(60px,10vw,100px)}
  .acc-row{flex-direction:column}.acs{flex:none}.acs-b{display:none}.acs-c{position:relative;opacity:1;transform:none;grid-template-columns:1fr;min-width:0}
  .acc-bar,.acc-ct{display:none}.sv-rib{height:240px}
}

/* ═══════════ portafolio v3: como trionn.com/work (fondo negro, mockups sueltos, textos pequeños, curvas finas) ═══════════ */
.pfw-sec{border-top:0;padding:clamp(60px,8vw,130px) var(--pad) clamp(30px,4vw,70px)}
.pfw-h{font-size:clamp(2.4rem,5.2vw,5.2rem);margin-bottom:clamp(30px,5vw,80px)}
.pfw{gap:clamp(70px,10vw,170px);padding-bottom:clamp(20px,4vw,60px)}
.pfw-line path{stroke:rgba(190,205,235,.55);stroke-width:1}
.pfk:nth-child(5n+1){align-self:flex-start;--w:min(36vw,600px);margin-left:clamp(0px,2vw,40px)}
.pfk:nth-child(5n+2){align-self:flex-end;--w:min(31vw,520px);margin-top:clamp(-120px,-6vw,-30px);margin-right:clamp(0px,3vw,60px)}
.pfk:nth-child(5n+3){align-self:flex-start;--w:min(33vw,560px);margin-left:clamp(0px,16vw,260px)}
.pfk:nth-child(5n+4){align-self:flex-end;--w:min(38vw,640px);margin-top:clamp(-120px,-5vw,-20px)}
.pfk:nth-child(5n){align-self:flex-start;--w:min(28vw,480px);margin-left:clamp(0px,6vw,100px)}
.pfk-m{aspect-ratio:auto;border-radius:calc(var(--r)*.45);background:none;box-shadow:none;overflow:hidden}
.pfk-m img{position:relative;display:block;width:100%;height:auto;object-fit:cover;object-position:50% 0;transition:transform 1.2s var(--ease)}
.pfk-m:hover img{transform:scale(1.04)}
.pfk-st{border-radius:calc(var(--r)*.45)}
.pfk-t{margin-top:clamp(12px,1.4vw,20px);align-items:flex-end}
.pfk-t h3{font-family:var(--font-body);font-weight:500;font-size:clamp(1.3rem,1.7vw,1.7rem);letter-spacing:-.01em;line-height:1.15}
.pfk-t p{margin-top:8px;font-size:.98rem;line-height:1.4;color:rgba(255,255,255,.62);max-width:34ch}
.pfk-go{padding:6px 0;font-size:.92rem;font-weight:500;letter-spacing:.12em;border-bottom:1px solid rgba(255,255,255,.55)}
.pfk-go:hover{gap:12px}
.pfk-c{margin-top:12px}
.pfP{aspect-ratio:auto;width:clamp(260px,24vw,380px);height:auto;background:none;border-radius:calc(var(--r)*.45)}
.pfP img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .35s}
.pfP img.on{opacity:1}
.pfP{aspect-ratio:16/10}
@media (max-width:900px){.pfk,.pfk:nth-child(n){margin:0;width:100%}}

/* ═══════════ contacto: formulario propio ═══════════ */
.ct{position:relative;min-height:100svh;display:flex;align-items:center;padding:clamp(110px,15vh,150px) var(--pad) clamp(50px,8vh,90px);overflow:hidden;
  background:radial-gradient(60% 55% at 90% 8%,rgba(68,121,213,.32),transparent 70%),radial-gradient(50% 60% at 0% 100%,rgba(18,51,122,.55),transparent 72%),#050607}
.ct-in{position:relative;z-index:1;width:100%;max-width:1480px;margin-inline:auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(30px,5vw,90px);align-items:center}
.ctt{font-family:var(--font-display);font-weight:600;letter-spacing:-.06em;line-height:.9;font-size:clamp(3rem,min(5.6vw,12vh),7.6rem);position:relative}
.cts{margin-top:clamp(18px,2.4vw,32px);max-width:30ch;font-size:clamp(1.2rem,1.7vw,1.6rem);line-height:1.45;opacity:.85}
.ct-mail{margin-top:clamp(24px,3vw,44px);display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px}
.ct-mail span{font-size:1.02rem;opacity:.6}
.ct-mail b{font-weight:600;font-size:clamp(1.1rem,1.5vw,1.4rem)}
.ct-mail button{font:600 .98rem/1 var(--font-body);color:#fff;background:transparent;border:1.5px solid rgba(255,255,255,.5);border-radius:99px;padding:9px 18px;cursor:pointer;transition:background .3s,color .3s,border-color .3s}
.ct-mail button:hover,.ct-mail button.on{background:#fff;color:var(--b-navy);border-color:#fff}
.ct-card{position:relative;background:var(--b-ice);color:var(--b-navy);border-radius:var(--r);padding:clamp(22px,3vw,46px);box-shadow:0 40px 90px -40px rgba(68,121,213,.6)}
.ct-card::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(11,26,63,.06)}
.ct-g{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.6vw,22px) clamp(14px,1.8vw,26px)}
.f{position:relative;display:block}
.f input,.f textarea{width:100%;font:500 1.1rem/1.3 var(--font-body);color:var(--b-navy);background:#fff;border:0;border-radius:14px;padding:26px 16px 10px;outline:0;box-shadow:inset 0 0 0 1.5px rgba(11,26,63,.12);transition:box-shadow .3s,background .3s;resize:vertical}
.f textarea{min-height:130px}
.f span{position:absolute;left:17px;top:17px;font-size:1.05rem;color:rgba(11,26,63,.55);pointer-events:none;transition:transform .3s var(--ease),font-size .3s,color .3s;transform-origin:0 0}
.f input:focus+span,.f input:not(:placeholder-shown)+span,.f textarea:focus+span,.f textarea:not(:placeholder-shown)+span{transform:translateY(-10px);font-size:.82rem;font-weight:600;color:var(--b-steel)}
.f input:focus,.f textarea:focus{box-shadow:inset 0 0 0 2px var(--accent),0 10px 30px -14px rgba(68,121,213,.7)}
.f-t{margin-top:clamp(14px,1.6vw,22px)}
.ct-op{border:0;margin:clamp(16px,2vw,26px) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 10px}
.ct-op legend{float:left;width:100%;font-family:var(--font-display);font-weight:600;font-size:1.05rem;letter-spacing:-.02em;margin-bottom:10px}
.ct-op label{cursor:pointer}
.ct-op input{position:absolute;opacity:0;pointer-events:none}
.ct-op span{display:block;padding:10px 18px;border-radius:99px;font-weight:500;font-size:1.02rem;background:#fff;box-shadow:inset 0 0 0 1.5px rgba(11,26,63,.14);transition:background .3s,color .3s,box-shadow .3s,transform .4s var(--ease)}
.ct-op label:hover span{transform:translateY(-2px);box-shadow:inset 0 0 0 1.5px var(--accent)}
.ct-op input:checked+span{color:#fff;background:linear-gradient(100deg,var(--b-navy),var(--b-deep) 60%,var(--accent));box-shadow:none}
.ct-op input:focus-visible+span{outline:2px solid var(--accent);outline-offset:3px}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0}
.ct-ac{display:flex;align-items:center;gap:12px;margin-top:clamp(14px,1.8vw,22px);font-size:1.02rem;cursor:pointer}
.ct-ac input{position:absolute;opacity:0}
.ct-ac i{flex:none;width:24px;height:24px;border-radius:8px;background:#fff;box-shadow:inset 0 0 0 1.5px rgba(11,26,63,.25);position:relative;transition:background .3s,box-shadow .3s}
.ct-ac i::after{content:"";position:absolute;left:8px;top:4px;width:6px;height:11px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg) scale(0);transition:transform .3s var(--ease)}
.ct-ac input:checked+i{background:var(--accent);box-shadow:none}
.ct-ac input:checked+i::after{transform:rotate(45deg) scale(1)}
.ct-ac a{text-decoration:underline;text-underline-offset:3px;color:var(--b-steel)}
.err input[type=text],.err input[type=email],.err textarea{box-shadow:inset 0 0 0 2px #D9534F}
.f.err span{color:#D9534F}
.ct-op.err legend{color:#D9534F}.ct-ac.err i{box-shadow:inset 0 0 0 2px #D9534F}
.ct-st{min-height:1.5em;margin-top:14px;font-size:1.02rem;font-weight:500;opacity:0;transition:opacity .3s}
.ct-st.on{opacity:1}.ct-st.mal{color:#C0392B}
.ct-go{position:relative;display:inline-flex;align-items:center;justify-content:center;margin-top:6px;min-width:220px;padding:17px 34px;border:0;border-radius:99px;font:600 1.08rem/1 var(--font-body);color:#fff;cursor:pointer;overflow:hidden;isolation:isolate;background:linear-gradient(100deg,var(--b-navy),var(--b-deep) 60%,var(--accent));transition:transform .4s var(--ease),box-shadow .4s}
.ct-go::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,var(--accent),var(--sky,#6F98E8));transform:translateX(-101%);transition:transform .55s var(--ease)}
.ct-go:hover{transform:translateY(-3px);box-shadow:0 18px 40px -16px rgba(68,121,213,.9)}
.ct-go:hover::before{transform:none}
.ct-go.load{pointer-events:none}
.ct-go.load span{opacity:.0}
.ct-go.load::after{content:"";position:absolute;width:22px;height:22px;border-radius:50%;border:3px solid rgba(255,255,255,.35);border-top-color:#fff;animation:ctsp .7s linear infinite}
@keyframes ctsp{to{transform:rotate(360deg)}}
.ct-ok{text-align:left;padding:clamp(10px,2vw,30px) 0}
.ct-ok[hidden],.ct-f[hidden]{display:none}
.ct-ok svg{width:84px;height:84px;fill:none;stroke:var(--accent);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.ct-ok svg *{stroke-dasharray:1;stroke-dashoffset:1}
.ct-ok.in svg circle{animation:ctd .9s var(--ease) forwards}.ct-ok.in svg path{animation:ctd .6s .55s var(--ease) forwards}
@keyframes ctd{to{stroke-dashoffset:0}}
.ct-ok h2{margin-top:18px;font-family:var(--font-display);font-weight:600;font-size:clamp(2rem,3.6vw,3.4rem);letter-spacing:-.05em;line-height:1}
.ct-ok p{margin-top:14px;max-width:40ch;font-size:1.15rem;line-height:1.5;opacity:.8}
.ct-ok .ct-pv{padding:12px 16px;border-radius:12px;background:rgba(68,121,213,.14);font-size:.98rem;opacity:1;color:var(--b-deep)}
.ct-ok .ct-go{margin-top:22px}
@media (max-width:1000px){.ct-in{grid-template-columns:1fr}.ct{align-items:flex-start}}
@media (max-width:640px){.ct-g{grid-template-columns:1fr}}

/* ═══════════ ronda 4: fondos orgánicos (sin puntos), pantallitas de servicios, portafolio con hoja y tinta ═══════════ */
.ondas{position:absolute;right:-16%;top:-12%;width:80%;height:128%;pointer-events:none;z-index:0;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 38%);mask-image:linear-gradient(90deg,transparent 0,#000 38%)}
.ondas svg{width:100%;height:100%;display:block}
.ondas-ct{right:auto;left:-26%;top:18%;width:78%;height:104%;opacity:.55;-webkit-mask-image:none;mask-image:none}
.sv-hi,.ct-in{z-index:1}
.cont{position:absolute;right:-12%;top:-30%;width:84%;height:160%;pointer-events:none;opacity:.8}
.cont svg{width:100%;height:100%}
.cont g{transform-origin:50% 50%;animation:controt 140s linear infinite}
@keyframes controt{to{transform:rotate(360deg)}}
.eqT{overflow:hidden}
.eqt,.eqs{position:relative;z-index:1}

/* servicios: la derecha es una pantallita con funciones y etiquetas que flotan encima */
.acs-c{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
.acc.lt .acs-c{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
.acc.lt .acs-v{order:-1}
.acs-v{position:relative;display:grid;place-items:center;min-width:0}
.scr{position:relative;width:min(92%,calc(max(46vh,250px)*1.62))}
.scn{display:block;width:100%;height:auto;border-radius:18px;box-shadow:0 34px 80px -28px rgba(2,8,28,.8)}
.fch{position:absolute;z-index:3;display:flex;align-items:center;gap:10px;padding:10px 18px 10px 14px;border-radius:99px;background:var(--b-ice);color:var(--b-navy);font-weight:600;font-size:1rem;line-height:1.1;white-space:nowrap;box-shadow:0 20px 44px -16px rgba(2,8,28,.75);animation:fch 6s ease-in-out infinite}
.fch::before{content:"";flex:none;width:10px;height:10px;border-radius:3px;background:var(--accent)}
.fch1{top:-7%;right:-5%;animation-delay:-1s}
.fch2{left:-9%;top:44%;animation-delay:-2.8s}
.fch3{bottom:-8%;right:7%;animation-delay:-4.4s}
.acc.lt .fch1{right:auto;left:-5%}.acc.lt .fch2{left:auto;right:-9%}.acc.lt .fch3{right:auto;left:7%}
.acc.lt .fch{background:var(--b-navy);color:#fff}
@keyframes fch{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-12px) rotate(1.2deg)}}
.acs:not(.on) .scn *,.acs:not(.on) .fch{animation-play-state:paused}
.rowp{animation:rowp 3s ease-in-out infinite;animation-delay:calc(var(--n,0)*.28s)}
@keyframes rowp{0%,100%{opacity:.3}50%{opacity:1}}
.mvc{animation:mvc 3.6s ease-in-out infinite alternate}
@keyframes mvc{0%,14%{transform:translate(0,0) rotate(0)}50%{transform:translate(70px,-34px) rotate(-3deg)}86%,100%{transform:translate(154px,-8px) rotate(0)}}
.pbar{transform-box:fill-box;transform-origin:0 50%;animation:pbar 4s ease-in-out infinite;animation-delay:calc(var(--n,0)*-.8s)}
@keyframes pbar{0%{transform:scaleX(.2)}60%,100%{transform:scaleX(1)}}
.dnt{stroke-dasharray:100;stroke-dashoffset:100;animation:dnt 3.8s ease-in-out infinite}
@keyframes dnt{0%{stroke-dashoffset:100}60%,100%{stroke-dashoffset:30}}
.scn .sld{animation:scsld2 9s ease-in-out infinite alternate}
@keyframes scsld2{from{transform:translateY(0)}to{transform:translateY(-96px)}}
.tl1,.tl2{transform-box:fill-box;animation:tlf 6s ease-in-out infinite}.tl2{animation-delay:-3s}
@keyframes tlf{50%{transform:translateY(-10px)}}

/* portafolio: mockups más grandes, hoja y tinta */
.pfk:nth-child(5n+1){--w:min(46vw,780px)}
.pfk:nth-child(5n+2){--w:min(40vw,680px)}
.pfk:nth-child(5n+3){--w:min(44vw,740px);margin-left:clamp(0px,10vw,170px)}
.pfk:nth-child(5n+4){--w:min(48vw,800px)}
.pfk:nth-child(5n){--w:min(38vw,640px);margin-left:clamp(0px,5vw,90px)}
.pfk-m{transform-style:preserve-3d;will-change:transform}
.pfk{will-change:transform}
.pfw-line path{stroke:rgba(180,198,235,.5);stroke-width:1}
.pfw-sec>*:not(.tinta){position:relative;z-index:1}
.tinta{position:fixed!important;inset:0;overflow:hidden;pointer-events:none;z-index:0!important;opacity:0;transition:opacity .6s;filter:url(#iz-goo)}
.tinta.on{opacity:1}
.tinta i{position:absolute;left:0;top:0;border-radius:50%;background:radial-gradient(circle at 50% 50%,#6F98E8 0%,#4479D5 45%,#2F5FB8 100%);opacity:.55;will-change:transform}

.scr{width:min(100%,calc(max(60vh,320px)*1.62))}
.acs-c{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr)}
.acc.lt .acs-c{grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr)}

.tinta i{opacity:.62}

/* ═══════════ ronda 5: tinta con rastro, líneas gruesas del portafolio, pantallas sin encimarse, banderas con aire ═══════════ */
.pfw{gap:clamp(110px,12vw,190px)}
.pfk,.pfk:nth-child(n){margin-top:0}
.pfw-line{overflow:visible}
.pfw-line path{fill:none;stroke:url(#pfg);stroke-linecap:round;filter:drop-shadow(0 0 7px rgba(143,176,240,.45))}
.pfw-line .l1{stroke-width:5}.pfw-line .l2{stroke-width:3;opacity:.8}
canvas.tinta{position:fixed;left:0;top:0;width:100vw;height:100vh;pointer-events:none;z-index:0;opacity:0;transition:opacity .5s;filter:url(#iz-goo)}
canvas.tinta.on{opacity:.9}

/* servicios: el título se ajusta a su columna y nada se encima */
.acs-t{container-type:inline-size;min-width:0}
.acs-t h3{font-size:clamp(1.5rem,var(--hs,9cqw),3.5rem);overflow-wrap:break-word}
.acs-v{padding-left:clamp(14px,2.4vw,40px)}
.acc.lt .acs-v{padding-left:0;padding-right:clamp(14px,2.4vw,40px)}
.fch2{left:-2%;top:50%}.acc.lt .fch2{left:auto;right:-2%}
.fch1{right:-2%}.acc.lt .fch1{left:-2%}
.scr{width:min(100%,calc(max(52vh,300px)*1.62))}
.scn.obj{box-shadow:none;border-radius:0;overflow:visible}

/* idiomas: banderas más grandes y separadas */
.mx-lang{gap:16px;padding:0;background:none}
.mx-lang button{flex-direction:column;gap:6px;padding:0;background:none;border-radius:0;font-size:.82rem;letter-spacing:.08em;color:rgba(255,255,255,.75)}
.mx-lang button svg{width:40px;height:40px;box-shadow:0 0 0 2px rgba(255,255,255,.35);transition:transform .4s var(--ease),box-shadow .3s}
.mx-lang button:hover{background:none;color:#fff}.mx-lang button:hover svg{transform:translateY(-3px)}
.mx-lang button.on{background:none;color:#fff}.mx-lang button.on svg{box-shadow:0 0 0 3px var(--accent),0 0 0 6px rgba(255,255,255,.25)}

/* ═══════════ escenas con objetos de los servicios ═══════════ */
.rot{animation:rotg 12s linear infinite}.rotr{animation:rotg 9.6s linear infinite reverse}
@keyframes rotg{to{transform:rotate(360deg)}}
.cinta{animation:cinta 5s linear infinite}
@keyframes cinta{to{transform:translateX(-70px)}}
.aguja{animation:aguja 4.2s cubic-bezier(.5,0,.2,1) infinite alternate;transform:rotate(-70deg)}
@keyframes aguja{0%,10%{transform:rotate(-78deg)}70%,100%{transform:rotate(58deg)}}
.gauge{stroke-dashoffset:100;animation:gauge 4.2s cubic-bezier(.5,0,.2,1) infinite alternate}
@keyframes gauge{0%,10%{stroke-dashoffset:100}70%,100%{stroke-dashoffset:12}}
.ticket{animation:tick 4s ease-in-out infinite alternate}
@keyframes tick{from{transform:translateY(60px)}to{transform:translateY(0)}}
.rayo{animation:rayo 2.2s ease-in-out infinite alternate;filter:drop-shadow(0 0 6px #FF4D6D)}
@keyframes rayo{from{transform:translateY(0)}to{transform:translateY(46px)}}
.tarj{animation:tarj 5s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:center}
@keyframes tarj{from{transform:rotate(-6deg) translateY(4px)}to{transform:rotate(6deg) translateY(-8px)}}
.acs:not(.on) .rot,.acs:not(.on) .rotr,.acs:not(.on) .cinta,.acs:not(.on) .aguja,.acs:not(.on) .gauge,.acs:not(.on) .ticket,.acs:not(.on) .rayo,.acs:not(.on) .tarj{animation-play-state:paused}

/* servicios: etiquetas flotantes siempre dentro de su franja; texto que se ajusta a laptops de poca altura */
.fch1{top:-6%;right:3%}.fch2{left:3%;top:52%}.fch3{bottom:-7%;right:12%}
.acc.lt .fch1{right:auto;left:3%}.acc.lt .fch2{left:auto;right:3%}.acc.lt .fch3{right:auto;left:12%}
.acs-v{overflow:visible}
.acs-t .svd{font-size:clamp(.95rem,min(1.15vw,2.1vh),1.12rem)}
.acs-t .svu li{font-size:clamp(.95rem,min(1.05vw,1.95vh),1.04rem)}
.acs-c{padding:clamp(18px,min(2.6vw,3.4vh),44px)}
@media (max-height:820px){
  .acs-t h3{margin:4px 0 4px}.acs-t .svd{margin-top:8px;line-height:1.4}.acs-t .svu{margin-top:10px;gap:4px}
  .acs-t .svu li:nth-child(n+4){display:none}
  .scr{width:min(100%,calc(max(46vh,260px)*1.62))}
}

.acc{--cw:calc(100vw - var(--pad)*2 - (var(--n) - 1)*(clamp(64px,6vw,100px) + 12px))}
.acs-c{min-width:0;width:var(--cw)}

@media (max-height:820px){.acs-t .svd{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}.acs-t .svu li:nth-child(n+3){display:none}}

/* ═══════════ ronda 6: páginas legales, 404 y aviso de cookies ═══════════ */
.ft-ck{display:block;font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;text-align:left;opacity:.9;transition:opacity .3s,color .3s}
.ft-ck:hover{opacity:1;color:var(--accent-soft)}
.lgT{position:relative;overflow:hidden;padding:clamp(130px,17vw,200px) var(--pad) clamp(30px,4vw,56px)}
.lgT>*{position:relative;z-index:1}.lgT .cont{position:absolute;z-index:0}
.lgt{font-family:var(--font-display);font-weight:600;letter-spacing:-.06em;line-height:.95;font-size:clamp(2.6rem,7.2vw,7.4rem);max-width:14ch}
.lgf{margin-top:20px;font-size:1.05rem;opacity:.6}
.lgi{margin-top:18px;max-width:54ch;font-size:clamp(1.15rem,1.5vw,1.4rem);line-height:1.5;opacity:.86}
.lg-in{display:grid;grid-template-columns:minmax(200px,260px) minmax(0,1fr);gap:clamp(30px,5vw,80px);padding:clamp(24px,4vw,56px) var(--pad) clamp(70px,9vw,130px);max-width:1380px;margin-inline:auto}
.lg-ix{position:sticky;top:110px;align-self:start}
.lg-ix ul{list-style:none;padding:0;margin:0;display:grid;gap:4px;border-left:2px solid rgba(255,255,255,.14)}
.lg-ix a{display:block;padding:8px 16px;font-size:1.02rem;opacity:.7;border-left:2px solid transparent;margin-left:-2px;transition:opacity .3s,color .3s,border-color .3s,padding-left .4s var(--ease)}
.lg-ix a:hover{opacity:1;color:var(--accent-soft);border-left-color:var(--accent);padding-left:22px}
.lg-tx article{padding:clamp(24px,3vw,40px) 0;border-top:1px solid rgba(255,255,255,.14);scroll-margin-top:100px}
.lg-tx h2{font-family:var(--font-display);font-weight:600;font-size:clamp(1.5rem,2.3vw,2.2rem);letter-spacing:-.045em;line-height:1.1;margin-bottom:14px}
.lg-tx p{max-width:68ch;font-size:1.12rem;line-height:1.65;opacity:.88}
.lg-tx p+p{margin-top:12px}
.lg-tb{margin-top:18px;overflow-x:auto;border-radius:var(--r);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.lg-tb table{width:100%;border-collapse:collapse;font-size:1.02rem}
.lg-tb th{text-align:left;padding:14px 18px;font-family:var(--font-display);font-weight:500;font-size:.95rem;background:rgba(68,121,213,.22)}
.lg-tb td{padding:14px 18px;border-top:1px solid rgba(255,255,255,.12);vertical-align:top}
.lg-tb code{font-family:ui-monospace,Consolas,monospace;font-size:.95rem;color:var(--accent-soft)}
.lg-btn{margin-top:20px;font:600 1.05rem/1 var(--font-body);color:#fff;background:linear-gradient(100deg,var(--b-navy),var(--b-deep) 60%,var(--accent));border:0;border-radius:99px;padding:16px 30px;cursor:pointer;transition:transform .4s var(--ease),box-shadow .4s}
.lg-btn:hover{transform:translateY(-3px);box-shadow:0 18px 40px -16px rgba(68,121,213,.9)}
@media (max-width:900px){.lg-in{grid-template-columns:1fr}.lg-ix{display:none}}

.nf{position:relative;min-height:100svh;display:flex;align-items:center;padding:clamp(100px,14vh,140px) var(--pad);overflow:hidden;background:radial-gradient(60% 55% at 90% 8%,rgba(68,121,213,.3),transparent 70%),#050607}
.nf-in{position:relative;z-index:1}
.nf-n{font-family:var(--font-display);font-weight:700;letter-spacing:-.07em;line-height:.8;font-size:clamp(7rem,26vw,24rem);position:relative}
.nf-in h2{margin-top:clamp(10px,2vw,24px);font-family:var(--font-display);font-weight:600;font-size:clamp(1.8rem,3.6vw,3.4rem);letter-spacing:-.05em}
.nf-in p{margin-top:12px;max-width:44ch;font-size:clamp(1.15rem,1.5vw,1.4rem);line-height:1.5;opacity:.85}
.nf-b{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(20px,3vw,36px)}
.nf-b .sbtn{margin-top:0;background:rgba(255,255,255,.12);color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.4)}
.nf-b .sbtn:first-child{background:var(--accent);box-shadow:none}

/* aviso de cookies: una galleta que se deja morder */
.ck{position:fixed;z-index:95;left:clamp(14px,2vw,32px);bottom:clamp(14px,2.4vh,32px);width:min(440px,calc(100vw - 28px));display:grid;grid-template-columns:96px 1fr;gap:16px;padding:18px 20px 18px 14px;border-radius:var(--r);background:var(--b-ice);color:var(--b-navy);
  box-shadow:0 40px 90px -30px rgba(2,8,28,.9),0 0 0 1px rgba(255,255,255,.06);opacity:0;transform:translateY(34px) scale(.97);transition:opacity .6s,transform .8s var(--ease)}
.ck.in{opacity:1;transform:none}
.ck.fuera{opacity:0;transform:translateY(40px) scale(.96);transition:opacity .6s,transform .7s var(--ease)}
.ck-a{position:relative;display:grid;place-items:center}
.ck-g{width:86px;height:86px;overflow:visible;animation:ckb 5s ease-in-out infinite;filter:drop-shadow(0 10px 14px rgba(18,51,122,.4))}
@keyframes ckb{0%,100%{transform:rotate(-6deg) translateY(0)}50%{transform:rotate(7deg) translateY(-7px)}}
.bt{transform-box:fill-box;transform-origin:center;transform:scale(0);transition:transform .28s cubic-bezier(.3,1.6,.5,1)}
.ck.mordida .b1{transform:scale(1)}.ck.mordida .b2{transform:scale(1);transition-delay:.3s}.ck.mordida .b3{transform:scale(1);transition-delay:.6s}
.ck.mordida .ck-g{animation:ckm .5s .85s ease-in forwards}
@keyframes ckm{to{transform:scale(.3) rotate(40deg);opacity:0}}
.ck.migas .ck-g{animation:ckd .7s ease-in forwards}
@keyframes ckd{40%{transform:scale(1.15) rotate(10deg)}100%{transform:scale(.15) rotate(90deg);opacity:0}}
.mig{position:absolute;left:50%;top:50%;width:7px;height:7px;margin:-3px;border-radius:50%;background:#6F98E8;opacity:0}
.mig.m2{background:#EAF0FD;box-shadow:0 0 0 1px #A9B9F0}.mig.m4{background:#12337A}.mig.m5{width:5px;height:5px}
.ck.mordida .mig,.ck.migas .mig{animation:ckfall .9s ease-in forwards}
.mig.m1{--x:-34px;animation-delay:.05s!important}.mig.m2{--x:22px;animation-delay:.2s!important}.mig.m3{--x:40px;animation-delay:.38s!important}.mig.m4{--x:-14px;animation-delay:.5s!important}.mig.m5{--x:-44px;animation-delay:.65s!important}.mig.m6{--x:8px;animation-delay:.8s!important}
@keyframes ckfall{0%{opacity:1;transform:translate(0,0)}100%{opacity:0;transform:translate(var(--x),120px)}}
.ck-b h2{font-family:var(--font-display);font-weight:600;font-size:1.28rem;letter-spacing:-.04em;line-height:1.1}
.ck-b p{margin-top:8px;font-size:1rem;line-height:1.45;color:rgba(11,26,63,.78)}
.ck-v2{display:none}.ck.cfg .ck-v1{display:none}.ck.cfg .ck-v2{display:block}
.ck-bt{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.ck-bt button{font:600 .98rem/1 var(--font-body);border:0;border-radius:99px;padding:12px 18px;cursor:pointer;transition:transform .35s var(--ease),background .3s,color .3s,box-shadow .3s}
.ck-p{color:#fff;background:linear-gradient(100deg,var(--b-navy),var(--b-deep) 60%,var(--accent))}
.ck-p:hover{transform:translateY(-2px);box-shadow:0 12px 26px -12px rgba(68,121,213,.9)}
.ck-s{color:var(--b-navy);background:#fff;box-shadow:inset 0 0 0 1.5px rgba(11,26,63,.18)}
.ck-s:hover{background:var(--b-navy);color:#fff}
.ck-l{color:var(--b-steel);background:none;padding-inline:8px!important;text-decoration:underline;text-underline-offset:3px}
.ck-t{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:12px;cursor:pointer}
.ck-t span{display:grid;gap:2px}.ck-t b{font-size:1.02rem}.ck-t em{font-style:normal;font-size:.95rem;color:rgba(11,26,63,.7);line-height:1.3}
.ck-t input{position:absolute;opacity:0}
.ck-t i{flex:none;width:46px;height:26px;border-radius:99px;background:rgba(11,26,63,.2);position:relative;transition:background .3s}
.ck-t i::after{content:"";position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.3);transition:transform .35s var(--ease)}
.ck-t input:checked+i{background:var(--accent)}.ck-t input:checked+i::after{transform:translateX(20px)}
.ck-t input:disabled+i{opacity:.55}
.ck-m{font-size:.95rem!important}.ck-m a{color:var(--b-steel);text-decoration:underline;text-underline-offset:3px}
@media (max-width:520px){.ck{grid-template-columns:1fr}.ck-a{display:none}}

/* ═══════════ ronda 7: cinco efectos de nombres colocados en cinco lugares + versiones del botón de subir ═══════════ */
/* el efecto de agua se retira */
.pfr:hover .pfn,.pfr .pfn{filter:none!important}
.pfr:hover .pfn{transform:none;color:#fff}
.eq .pfr:hover .pfn{transform:none;color:#fff}

/* A · giro de letras (lista del portafolio) */
.fxA{white-space:nowrap}
.fxA .ch{display:inline-block;overflow:hidden;height:1.12em;vertical-align:top}
.fxA .ch>span{display:block;height:1.12em;line-height:1.12;transition:transform .6s cubic-bezier(.7,0,.2,1);transition-delay:calc(var(--i)*28ms)}
.fxA .ch>span+span{color:var(--accent-soft)}
.pfr:hover .fxA .ch>span{transform:translateY(-100%)}

/* B · letras que se apartan (nombre gigante del pie) */
footer#pie .giant{overflow:visible}
.fxB .ch{display:inline-block;will-change:transform}

/* botón de volver arriba: versiones A, B (se ven con ?btn=A, ?btn=B) */
.totop{overflow:visible}
.totop.vA .roll{display:block;height:22px;overflow:hidden}
.totop.vA .rl{display:grid;animation:rollA 1.9s cubic-bezier(.7,0,.2,1) infinite}
.totop.vA .rl svg{display:block}
@keyframes rollA{0%,35%{transform:translateY(0)}65%,100%{transform:translateY(-50%)}}
.totop.vA::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid rgba(143,176,240,.6);animation:pulseA 2.4s ease-out infinite;pointer-events:none}
@keyframes pulseA{0%{transform:scale(.9);opacity:1}100%{transform:scale(1.4);opacity:0}}
.totop.vB .pt{position:absolute;left:50%;top:50%;width:9px;height:9px;margin:-4.5px;border-radius:50%;background:var(--accent-soft);pointer-events:none;will-change:transform}


/* ═══════════ ronda 8: efectos de material, humo, banderas cuadradas ═══════════ */
/* humo del cursor en el portafolio */
canvas.tinta.humo{filter:blur(1.3px);transition:opacity .8s}
canvas.tinta.humo.on{opacity:1}



/* banderas CUADRADAS del mismo tamaño: las dos del par se ven completas, una junto a la otra */
.mx-lang{gap:22px;padding:0 8px 0 0}
.mx-lang button{gap:9px}
.mx-lang button svg{width:100%;height:100%;border-radius:0;box-shadow:none}
.mx-lang button:hover svg{transform:none}
.mx-lang .bd{display:flex;gap:6px;padding:6px;border-radius:14px;background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.28);transition:transform .4s var(--ease),background .3s,box-shadow .3s}
.mx-lang .bd .sq,.mx-lang .bd .ci{position:static;display:block;width:36px;height:36px;border-radius:8px;overflow:hidden;box-shadow:none;flex:none}
.mx-lang button:hover .bd{transform:translateY(-3px);background:rgba(255,255,255,.2)}
.mx-lang button.on .bd{background:rgba(255,255,255,.22);box-shadow:inset 0 0 0 2.5px var(--accent),0 0 0 3px rgba(255,255,255,.22)}

/* botón de volver arriba: versiones F–J (?btn=F … ?btn=J) */
.totop.vF{overflow:hidden;background:linear-gradient(180deg,#fff 0%,#9fb7e8 30%,#1d2f63 50%,#6b8fdc 62%,#e8f0ff 100%);color:#0B1A3F}
.totop.vF .sh{position:absolute;inset:-20%;background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.95) 50%,transparent 62%);animation:shF 3s ease-in-out infinite}
@keyframes shF{0%{transform:translateX(-90%)}60%,100%{transform:translateX(90%)}}
.totop.vF svg{position:relative;z-index:1}


/* ═══════════ ronda 9: agua (se prueba solo en hover_opciones.html) ═══════════ */
.ag{position:relative}
.ag-t{display:block;color:transparent}
.ag-c{position:absolute;display:block;pointer-events:none;z-index:2}
/* botón de volver arriba: K ondas · L gota · M ondas de cromo (?btn=K, ?btn=L, ?btn=M) */
.totop.vK .rg,.totop.vM .rg{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(169,185,240,.9);opacity:0;animation:rgK 3.3s cubic-bezier(.2,.6,.3,1) infinite;pointer-events:none}
.totop.vK .rg+.rg,.totop.vM .rg+.rg{animation-delay:1.1s}.totop.vK .rg+.rg+.rg,.totop.vM .rg+.rg+.rg{animation-delay:2.2s}
@keyframes rgK{0%{transform:scale(.95);opacity:.95}100%{transform:scale(2.3);opacity:0}}
.totop.vK svg,.totop.vM svg{animation:bobK 3.3s ease-in-out infinite}
@keyframes bobK{0%,100%{transform:translateY(1.5px)}50%{transform:translateY(-2px)}}
.totop.vK{background:radial-gradient(circle at 50% 30%,#6F98E8,#4479D5 60%,#2F5FB8)}
.totop.vK:hover{background:radial-gradient(circle at 50% 30%,#8FB0F0,#4479D5 60%,#2F5FB8);color:#fff}
.totop.vM,.totop.vM:hover{background:linear-gradient(180deg,#fff 0%,#9fb7e8 30%,#1d2f63 50%,#6b8fdc 62%,#e8f0ff 100%);color:#0B1A3F}
.totop.vM .rg{border-color:rgba(214,228,255,.95)}
.totop.vL,.totop.vL:hover{background:radial-gradient(circle at 34% 28%,#fff 0 5%,#cfe0ff 9%,#6F98E8 40%,#2F5FB8 78%,#12337A 100%);color:#fff;box-shadow:inset -6px -8px 14px rgba(11,26,63,.45),inset 4px 5px 10px rgba(255,255,255,.5),0 14px 26px -8px rgba(68,121,213,.75);animation:dropL 4.2s ease-in-out infinite}
.totop.vL .gt{position:absolute;left:11px;top:8px;width:15px;height:8px;border-radius:50%;background:rgba(255,255,255,.9);transform:rotate(-32deg);filter:blur(.6px);pointer-events:none}
@keyframes dropL{0%,100%{border-radius:50% 50% 50% 50%/56% 56% 44% 44%;transform:scale(1,1)}25%{border-radius:46% 54% 52% 48%/52% 60% 40% 48%;transform:scale(1.04,.97)}50%{border-radius:52% 48% 46% 54%/60% 52% 48% 40%;transform:scale(.97,1.04)}75%{border-radius:48% 52% 54% 46%/54% 56% 44% 46%;transform:scale(1.03,.98)}}

/* ═══════════ ronda 9b: lámpara de lava + variantes del giro de letras (se prueba solo en hover_opciones.html) ═══════════ */
/* Q · giro de letras con la letra nueva en cromo */
.fxQ .ch>span+span{color:transparent;background:linear-gradient(180deg,#fff 0%,#cfe0ff 14%,#7f9fe0 30%,#1d2f63 47%,#070d22 52%,#5d7fd0 60%,#dbe8ff 76%,#fff 100%);-webkit-background-clip:text;background-clip:text}
/* R · giro que sigue al puntero (cada letra gira según qué tan cerca pasa el puntero) */
.fxR{white-space:nowrap}
.fxR .ch{display:inline-block;overflow:hidden;height:1.12em;vertical-align:top}
.fxR .ch>span{display:block;height:1.12em;line-height:1.12;transform:translateY(calc(var(--k,0) * -100%));will-change:transform}
.fxR .ch>span+span{color:transparent;background:linear-gradient(180deg,#fff 0%,#cfe0ff 14%,#7f9fe0 30%,#1d2f63 47%,#070d22 52%,#5d7fd0 60%,#dbe8ff 76%,#fff 100%);-webkit-background-clip:text;background-clip:text}

/* Botón de volver arriba · lámpara de lava (?btn=1, ?btn=2, ?btn=3):
   una burbuja que se deforma sin parar y suelta pedacitos cerca de ella que se estiran y vuelven a unirse (filtro "goo") */
.totop.vL1,.totop.vL1:hover,.totop.vL2,.totop.vL2:hover,.totop.vL3,.totop.vL3:hover{background:none!important;box-shadow:none!important;overflow:visible;color:#fff}
.totop.vL1,.totop.vL2{filter:drop-shadow(0 10px 12px rgba(68,121,213,.5))}
.totop .lv{position:absolute;inset:-34px;filter:url(#iz-goo);pointer-events:none}
.totop .lv i{position:absolute;left:50%;top:50%;border-radius:50%;will-change:transform}
.totop .lv .c1{width:46px;height:46px;margin:-23px 0 0 -23px;animation:lvA 5s ease-in-out infinite}
.totop .lv .c2{width:30px;height:30px;margin:-15px 0 0 -15px;animation:lvB 6.5s ease-in-out infinite}
.totop .lv .c3{width:22px;height:22px;margin:-11px 0 0 -11px;animation:lvC 7.7s ease-in-out infinite}
.totop .lv .d{width:13px;height:13px;margin:-6.5px 0 0 -6.5px;animation:lvD 5s ease-in-out infinite}
.totop .lv .d1{--x:-37px;--y:-16px;animation-duration:4.8s}
.totop .lv .d2{--x:33px;--y:-27px;animation-duration:5.6s;animation-delay:-1.2s}
.totop .lv .d3{--x:5px;--y:-43px;animation-duration:4.3s;animation-delay:-2s}
.totop .lv .d4{--x:40px;--y:11px;animation-duration:6s;animation-delay:-3s}
.totop .lv .d5{--x:-30px;--y:30px;animation-duration:5.2s;animation-delay:-.6s}
.totop .lv .d6{--x:-4px;--y:41px;animation-duration:4.6s;animation-delay:-3.6s}
@keyframes lvA{0%,100%{transform:scale(1,1)}25%{transform:scale(1.07,.95) translate(1px,-1px)}50%{transform:scale(.95,1.07)}75%{transform:scale(1.05,.97) translate(-1px,1px)}}
@keyframes lvB{0%,100%{transform:translate(9px,-6px)}25%{transform:translate(-7px,-10px)}50%{transform:translate(-10px,7px)}75%{transform:translate(7px,10px)}}
@keyframes lvC{0%,100%{transform:translate(-9px,8px) scale(1)}33%{transform:translate(10px,3px) scale(1.15)}66%{transform:translate(-2px,-12px) scale(.9)}}
@keyframes lvD{0%,8%{transform:translate(0,0) scale(.5)}40%{transform:translate(calc(var(--x) * .7),calc(var(--y) * .7)) scale(1)}62%{transform:translate(var(--x),var(--y)) scale(.85)}82%{transform:translate(calc(var(--x) * .4),calc(var(--y) * .4)) scale(.6)}100%{transform:translate(0,0) scale(.5)}}
.totop .lv i{background:linear-gradient(160deg,#7FA6EE,#4479D5 55%,#2F5FB8)}
.totop.vL1 svg,.totop.vL2 svg,.totop.vL3 svg{position:relative;z-index:2}
.totop.vL1::after,.totop.vL2::after{content:"";position:absolute;left:12px;top:9px;width:16px;height:8px;border-radius:50%;background:rgba(255,255,255,.62);transform:rotate(-30deg);filter:blur(1px);z-index:1;pointer-events:none;animation:lvH 5s ease-in-out infinite}
@keyframes lvH{0%,100%{transform:rotate(-30deg) translate(0,0)}50%{transform:rotate(-24deg) translate(2px,2px)}}
.totop:hover .lv{transform:scale(1.08)}
.totop .lv{transition:transform .5s cubic-bezier(.2,.9,.3,1.3)}
/* 2 · lava que sube: los pedacitos nacen arriba y suben encogiéndose */
.totop.vL2 .lv i{background:linear-gradient(180deg,#A9B9F0,#6F98E8 45%,#3E6CCB)}
.totop.vL2 .lv .c2{animation-name:lvB2}
.totop.vL2 .lv .d{animation-name:lvR}
.totop.vL2 .lv .d1{--x:-14px}.totop.vL2 .lv .d2{--x:13px}.totop.vL2 .lv .d3{--x:-2px}.totop.vL2 .lv .d4{--x:20px}.totop.vL2 .lv .d5{--x:-22px}.totop.vL2 .lv .d6{--x:6px}
@keyframes lvB2{0%,100%{transform:translate(2px,10px)}50%{transform:translate(-3px,-12px)}}
@keyframes lvR{0%{transform:translate(0,8px) scale(.2)}22%{transform:translate(var(--x),-12px) scale(1)}72%{transform:translate(calc(var(--x) * 1.5),-42px) scale(.7)}100%{transform:translate(calc(var(--x) * 1.7),-56px) scale(.1)}}
/* 3 · lava de cromo */
.totop.vL3 .lv i{background:linear-gradient(180deg,#ffffff 0%,#c9daf8 36%,#7fa0e0 62%,#e6efff 100%)}
.totop.vL3{color:#0B1A3F;filter:drop-shadow(0 10px 12px rgba(143,176,240,.45))}

/* pincel de tinta (cursor del Portafolio, ver js/tinta.js): sólido, por encima del contenido, invierte los colores */
canvas.tinta.pincel{position:fixed;left:0;top:0;width:100vw;height:100vh;z-index:35!important;pointer-events:none;mix-blend-mode:difference;filter:none;opacity:0;transition:none}
canvas.tinta.pincel.on{opacity:1}

/* ═══════════ lanzamiento: Servicios simple (sin franjas ni escenas), dos bloques con descripción y lista ═══════════ */
.sv-hero.corto{min-height:72svh}
.svB{position:relative;padding:clamp(70px,10vw,150px) 0}
.svB.dk{background:#050607;color:#fff}
.svB.lt{background:var(--b-ice);color:var(--b-navy)}
.svB .display{font-size:clamp(2.4rem,6vw,5.6rem);max-width:16ch}
.svB-l{margin-top:clamp(18px,2.4vw,30px);max-width:58ch;font-size:clamp(1.1rem,1.5vw,1.35rem);line-height:1.55;opacity:.86}
.svB-u{list-style:none;margin:clamp(30px,4vw,56px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,22px)}
.svB-u li{scroll-margin-top:110px;padding:clamp(18px,2vw,28px);border-radius:var(--r);border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.04)}
.svB.lt .svB-u li{border-color:rgba(11,26,63,.14);background:rgba(255,255,255,.62)}
.svB-u h3{font-family:var(--font-display);font-weight:600;letter-spacing:-.04em;font-size:clamp(1.25rem,1.8vw,1.7rem);line-height:1.1}
.svB-u p{margin-top:8px;font-size:1.05rem;line-height:1.4;opacity:.78}
.svB .sbtn{margin-top:clamp(30px,3.6vw,50px)}
.svB.lt .sbtn{background:var(--b-navy);color:#fff;--fill:var(--accent)}
@media (max-width:1000px){.svB-u{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.svB-u{grid-template-columns:1fr}}

/* ═══════════ celular y tableta vertical (hasta 820 px) ═══════════ */
@media (max-width:820px){
  html{overflow-x:hidden}
  body{overflow-x:visible}
  .totop{right:38px;bottom:30px}
  .bandh{font-size:clamp(2.4rem,12.5vw,4.4rem);line-height:1.02}
  .bandb{flex-direction:column;align-items:stretch}
  .bandb a{justify-content:center;padding:16px 20px;font-size:1rem;text-align:center}
  .nav{padding:12px 16px}
  .logo .mark{height:38px}
  .logo .word{height:16px}
  .nav .ncta{display:none!important}
  .nav .menu{height:44px;min-width:0;padding:0 18px;margin-left:auto;font-size:.98rem}
  /* hero: el nombre en dos renglones, el mundo centrado detrás */
  .hname{font-size:11.6vw;line-height:.98;white-space:normal;padding:0 4vw}
  .hrot{top:calc(50% + 12vw);font-size:7vw;height:1.3em}
  .hhold{font-size:.95rem;bottom:calc(env(safe-area-inset-bottom,0px) + 26px);padding:8px 18px 8px 10px}
  /* aviso de cookies compacto */
  .ck{left:10px;right:10px;bottom:10px;width:auto;padding:14px 16px;gap:8px}
  .ck-b h2{font-size:1.08rem}
  .ck-b p{margin-top:5px;font-size:.92rem;line-height:1.38}
  .ck-bt{margin-top:10px}
  .ck-bt button{padding:11px 16px;font-size:.95rem}
}

@media (max-width:820px){
  .hname .hw{display:inline-block;white-space:nowrap}
  /* Dos líneas: dos bloques uno debajo del otro */
  .dos{height:auto}
  .dos .pin{position:relative;height:auto;overflow:visible}
  .dsL{position:relative;inset:auto;clip-path:none!important}
  .dsA{background:#050607}
  .dsC{position:relative;left:auto!important;right:auto!important;width:auto!important;padding:64px 22px 56px}
  .dsT{transform:none!important;opacity:1!important;white-space:normal}
  .dsT span{font-size:13.5vw}
  .dsT em{font-size:6.4vw}
  .dsP{display:block;opacity:.88!important;transform:none!important;margin-top:18px;font-size:1.1rem}
  .dsU{opacity:1!important;pointer-events:auto;grid-template-columns:1fr;margin-top:18px}
  .dsU li a{padding:14px 0;font-size:1.1rem}
  .dsG{opacity:1!important;transform:none!important;pointer-events:auto;margin-top:26px;padding:15px 28px;font-size:1rem}
  .dsV,.dsline,.dsTi{display:none}
  /* Cómo trabajamos: tarjetas apiladas normales */
  .proc{height:auto}
  .proc .pin{position:relative;height:auto;overflow:visible;padding:76px 0 20px}
  .procI{position:relative;left:auto;top:auto;transform:none!important;opacity:1!important;max-width:none;padding:0 22px 26px}
  .procH{font-size:11.6vw}
  .procS{font-size:1.15rem}
  .pc{position:relative;top:auto;bottom:auto;height:auto;transform:none!important;grid-template-columns:1fr;gap:6px;padding:26px 22px 28px;margin:0 12px 12px;border-radius:var(--r);--c:1}
  .pn{font-size:20vw}
  .ptx h3{font-size:8vw}
  .ptx p{font-size:1.1rem;max-width:none;margin-top:12px}
  .pdt{display:none}
  /* Proyectos: lista vertical */
  .zoomsec{padding-top:70px}
  .zhead .display{font-size:11.5vw}
  .znote{font-size:.8rem;letter-spacing:.1em;padding:0 16px}
  .zrun{height:auto;margin-top:34px}
  .zstick{position:relative;height:auto;overflow:visible;display:grid;gap:14px;padding:0 14px 60px}
  .zl{position:relative;inset:auto;display:block;transform:none!important}
  .zt{--m:1;width:100%!important;height:auto!important;left:auto!important;top:auto!important;aspect-ratio:4/3.1;border-radius:var(--r)}
  .zt.ph{aspect-ratio:4/4.6}
  .zl:nth-child(n+6){display:none}
}


@media (max-width:820px){
  /* menú: una columna, primero la navegación y el contacto, luego los servicios */
  .mx{top:70px;left:12px;right:12px;width:auto;max-height:calc(100svh - 82px)}
  .mx-nav{grid-template-columns:1fr!important}
  .mx .mx-nav a{font-size:2.05rem;padding:4px 0}
  .mx-cta{order:2}
  .mx-svc{order:3;grid-template-columns:1fr}
  .mx .mx-col li a{padding:7px 12px}
  .mx .mx-col li a span{display:none}
  .mx-card{grid-template-columns:minmax(0,1fr)!important}
  .mx-cta{min-width:0;flex-wrap:wrap;padding:16px}
  .mx-lang{gap:14px;padding:0}
  .mx-lang .bd{padding:5px;gap:4px}
  .mx-lang .bd .sq,.mx-lang .bd .ci{width:28px;height:28px;border-radius:6px}
}

@media (max-width:820px){
  /* la ventana de la declaración cabe completa y el video vertical se ve entero */
  .decl-win{left:16px;right:16px;bottom:3svh;height:min(64svh,560px)}
  .decl-win video{object-position:50% 0}
  .decl-tag{left:12px;right:12px;bottom:12px;width:auto;font-size:.95rem;padding:10px 16px;text-align:center}
  /* la barra superior tiene fondo para que el logo no se encime con el texto al bajar */
  .nav::before{content:"";position:absolute;left:0;right:0;top:0;bottom:-16px;z-index:-1;pointer-events:none;background:linear-gradient(to bottom,rgba(5,6,7,.94) 62%,rgba(5,6,7,0));transition:background .35s}
  .nav.on-light::before{background:linear-gradient(to bottom,rgba(234,240,253,.96) 62%,rgba(234,240,253,0))}
  .nav.on-blue::before{background:linear-gradient(to bottom,rgba(68,121,213,.96) 62%,rgba(68,121,213,0))}
  .nav.open::before{background:none}
}

/* idiomas: solo iniciales ES · EN · PT con un globo como referencia (sin banderas) */
.mx-lang{display:flex;align-items:center;gap:6px;padding:5px;border-radius:99px;background:rgba(255,255,255,.12);width:max-content}
.mx-lang .lg-g{width:22px;height:22px;margin:0 6px 0 8px;fill:none;stroke:rgba(255,255,255,.8);stroke-width:1.6;stroke-linecap:round;flex:none}
.mx-lang button{display:inline-flex;align-items:center;justify-content:center;gap:0;flex-direction:row;min-width:46px;height:40px;padding:0 14px;border:0;border-radius:99px;background:transparent;color:#fff;font:700 .98rem/1 var(--font-body);letter-spacing:.08em;cursor:pointer;transition:background .25s,color .25s}
.mx-lang button:hover{background:rgba(255,255,255,.22);color:#fff}
.mx-lang button.on{background:#fff;color:var(--b-navy)}
.mx-lang button svg,.mx-lang .bd{display:none}
@media (max-width:820px){.mx-lang{gap:4px}.mx-lang button{min-width:44px;height:40px;padding:0 12px}}

@media (max-width:820px){
  .decl-win{aspect-ratio:auto;width:auto}
  .val .pin{grid-template-columns:minmax(0,1fr)}
  .val-r{min-width:0;padding-left:0;padding-right:0}
  .vs p,.vs h3{min-width:0;overflow-wrap:break-word}
}
@media (max-width:820px){
  .vs{grid-template-columns:40px minmax(0,1fr);gap:10px}
  .vs h3{font-size:1.18rem}
  .vs p{font-size:1.02rem}
}


/* portafolio: el sexto proyecto va a la derecha para seguir el zigzag (izquierda, derecha, izquierda, derecha...) */
@media (min-width:821px){.pfk:nth-child(6){align-self:flex-end;--w:min(40vw,660px);margin-left:0;margin-right:clamp(0px,4vw,70px);margin-top:clamp(-130px,-6vw,-30px)}}