/* ===== TRAFPAY · sistema de diseño (paleta Manual de Marca 2023) ===== */
:root{
  --azul:#5461F8; --azul-claro:#858EFA; --turquesa:#68F2E1;
  --celeste:#5EA9EC; --violeta:#9767F7;
  --grad:linear-gradient(120deg,#68F2E1 0%,#5EA9EC 100%);
  --grad-txt:linear-gradient(120deg,#68F2E1 0%,#5EA9EC 46%,#858EFA 100%);
  --bg-0:#07031A; --bg-1:#0C0526;
  --glass:linear-gradient(180deg,rgba(255,255,255,.062) 0%,rgba(255,255,255,.018) 100%);
  --glass-b:rgba(255,255,255,.10); --glass-b-on:rgba(94,169,236,.6);
  --t-1:#FFF; --t-2:rgba(255,255,255,.75); --t-3:rgba(255,255,255,.56);
  --font:'Outfit','Outfit Fallback',system-ui,-apple-system,sans-serif;
  --wrap:1180px; --gut:clamp(18px,4.2vw,28px); --pad-sec:clamp(64px,9vw,112px);
  --head-h:clamp(64px,8vw,80px); --r:14px; --r-lg:clamp(16px,2.4vw,24px); --tap:44px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg-0);color:var(--t-1);font-family:var(--font);
  font-size:clamp(16px,.4vw + 15px,17px);line-height:1.62;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;overflow-wrap:break-word}
body.nav-open{overflow:hidden}
img,video,svg{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3{margin:0;line-height:1.14;font-weight:600;letter-spacing:-.012em;
  word-spacing:.06em;text-wrap:balance}
p{margin:0}
.wrap{max-width:var(--wrap);margin:0 auto;position:relative;z-index:2;padding-inline:max(var(--gut),env(safe-area-inset-left))}
:focus-visible{outline:2px solid var(--turquesa);outline-offset:3px}
.skip{position:absolute;left:-9999px;top:0;background:var(--celeste);color:#06112B;padding:12px 18px;z-index:2000}
.skip:focus{left:0;top:0}

.glow{position:absolute;border-radius:50%;filter:blur(clamp(50px,8vw,90px));pointer-events:none;z-index:0}
.g-azul{background:radial-gradient(circle,rgba(84,97,248,.55),transparent 68%)}
.g-cel{background:radial-gradient(circle,rgba(94,169,236,.42),transparent 68%)}
.g-viol{background:radial-gradient(circle,rgba(151,103,247,.3),transparent 68%)}
.dots{position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.055) 1px,transparent 1px);background-size:30px 30px;
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 0%,#000 20%,transparent 75%);
  mask-image:radial-gradient(ellipse 90% 70% at 50% 0%,#000 20%,transparent 75%)}

.h1{font-size:clamp(1.72rem,6.2vw,3.85rem);word-spacing:.09em;letter-spacing:-.01em}
.h2{font-size:clamp(1.6rem,4.6vw,2.7rem);word-spacing:.075em}
.h3{font-size:clamp(1.08rem,2.6vw,1.32rem);word-spacing:.04em}
.h4{font-size:clamp(1rem,2.2vw,1.1rem);font-weight:600;margin:0;line-height:1.2;letter-spacing:-.008em;word-spacing:.04em}
.lede{font-size:clamp(.99rem,1.9vw,1.12rem);font-weight:300;color:var(--t-2);max-width:58ch;margin:18px 0 0;text-wrap:pretty}
.body-lg{font-size:clamp(1rem,2vw,1.14rem);font-weight:300;color:var(--t-2);line-height:1.72;text-wrap:pretty}
/* Segunda línea del titular: MISMO tamaño y peso que el titular,
   solo cambia el color a degradado. No es un subtítulo. */
.deck{display:block;font-size:inherit;font-weight:inherit;line-height:inherit;
  letter-spacing:inherit;word-spacing:inherit;margin-top:.06em;text-wrap:balance;
  background:var(--grad-txt);-webkit-background-clip:text;background-clip:text;color:transparent}
.sec-head .h2{max-width:32ch;margin-left:auto;margin-right:auto}
.panel-txt .h2{font-size:clamp(1.32rem,2.7vw,1.78rem)}
.def-k .h2{font-size:clamp(1.5rem,3.2vw,2.25rem)}
.gt{background:var(--grad-txt);-webkit-background-clip:text;background-clip:text;color:transparent}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:clamp(.68rem,1.6vw,.74rem);font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--t-2);background:rgba(255,255,255,.05);
  border:1px solid var(--glass-b);border-radius:99px;padding:7px 15px;margin:0 0 20px;max-width:100%}
.eyebrow .pip{width:6px;height:6px;border-radius:50%;background:var(--turquesa);flex:none;animation:pip 2.2s infinite}
@keyframes pip{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(104,242,225,.55)}50%{opacity:.4;box-shadow:0 0 0 5px rgba(104,242,225,0)}}

.glass{position:relative;background:var(--glass);border:1px solid var(--glass-b);border-radius:var(--r-lg);
  overflow:hidden;transition:border-color .28s,transform .28s,box-shadow .28s}
.glass::before{content:"";position:absolute;top:0;left:12%;right:12%;height:1px;z-index:2;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.42),transparent)}
.glass>.gl{position:absolute;left:50%;bottom:-58%;width:78%;aspect-ratio:1;transform:translateX(-50%);
  background:radial-gradient(circle,rgba(84,97,248,.5),transparent 64%);filter:blur(34px);
  opacity:.5;transition:opacity .3s;pointer-events:none;z-index:0}
.glass>*:not(.gl){position:relative;z-index:1}
@media (hover:hover){
  .glass:hover{border-color:var(--glass-b-on);transform:translateY(-4px);box-shadow:0 18px 46px rgba(84,97,248,.2)}
  .glass:hover>.gl{opacity:.95}
  .glass-static:hover{transform:none}
}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:inherit;
  font-size:clamp(.9rem,1.9vw,.95rem);font-weight:600;min-height:var(--tap);padding:13px clamp(20px,4vw,26px);
  border-radius:99px;border:1px solid transparent;text-decoration:none;cursor:pointer;transition:.24s;position:relative}
.btn-1{background:var(--grad);color:#06112B;box-shadow:0 0 0 1px rgba(104,242,225,.55),0 8px 30px rgba(94,169,236,.4)}
.btn-2{background:rgba(255,255,255,.05);color:#fff;border-color:rgba(94,169,236,.45)}
.btn-ring::after{content:"";position:absolute;inset:-4px;border-radius:99px;pointer-events:none;
  border:1px solid rgba(104,242,225,.4);opacity:.85;transition:.24s}
@media (hover:hover){
  .btn-1:hover{box-shadow:0 0 0 1px rgba(104,242,225,.9),0 12px 42px rgba(104,242,225,.55);transform:translateY(-1px)}
  .btn-2:hover{background:rgba(94,169,236,.14);border-color:var(--celeste)}
  .btn-ring:hover::after{inset:-6px;border-color:rgba(104,242,225,.75)}
  .btn:hover .arw{transform:translateX(4px)}
}
.arw{transition:transform .2s}

.ico{width:22px;height:22px;stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;
  stroke-linejoin:round;flex:none;overflow:visible}
.ico-badge{width:38px;height:38px;border-radius:50%;background:rgba(94,169,236,.16);color:var(--celeste);
  display:flex;align-items:center;justify-content:center;flex:none;transition:.2s}
.ico-tile{width:clamp(52px,9vw,64px);aspect-ratio:1;border-radius:clamp(14px,2.4vw,18px);
  background:rgba(94,169,236,.13);border:1px solid rgba(94,169,236,.3);color:var(--celeste);
  display:flex;align-items:center;justify-content:center;flex:none;box-shadow:0 10px 28px rgba(94,169,236,.24)}
.ico-tile .ico{width:46%;height:46%;stroke-width:1.5}

#pre{position:fixed;inset:0;z-index:1500;background:var(--bg-0);display:flex;align-items:center;justify-content:center;transition:opacity .45s,visibility .45s}
#pre img{width:clamp(100px,26vw,140px);filter:invert(1) hue-rotate(180deg)}
#pre.off{opacity:0;visibility:hidden;pointer-events:none}
.vdark{filter:invert(1) hue-rotate(180deg) saturate(1.2) contrast(1.06);mix-blend-mode:screen}

.topbar{background:rgba(255,255,255,.04);border-bottom:1px solid var(--glass-b);
  font-size:clamp(.76rem,1.8vw,.85rem);font-weight:300;padding:9px 0;color:var(--t-2)}
.topbar .wrap{display:flex;justify-content:space-between;gap:10px 18px;flex-wrap:wrap;align-items:center}
.topbar a{text-decoration:none;display:inline-flex;align-items:center;gap:9px}
.topbar .pip{width:6px;height:6px;border-radius:50%;background:var(--turquesa);flex:none;animation:pip 2.2s infinite}
.topbar .meta{color:var(--t-3)}

.head{position:sticky;top:0;z-index:900;background:rgba(7,3,26,.78);backdrop-filter:blur(16px);border-bottom:1px solid var(--glass-b)}
.head .wrap{display:flex;align-items:center;height:var(--head-h);gap:20px}
.brandlogo{display:flex;align-items:center;min-height:var(--tap)}
.brandlogo img{height:clamp(26px,4.4vw,34px);width:auto}
.nav{margin-left:auto;display:flex;align-items:center;gap:2px;list-style:none;margin-block:0;padding:0}
.nav>li{position:relative}
.nav a:not(.btn),.nav .top{display:inline-flex;align-items:center;gap:7px;text-decoration:none;font-size:.95rem;
  font-weight:400;padding:11px 14px;border-radius:99px;color:var(--t-2);background:none;border:0;
  font-family:inherit;cursor:pointer;white-space:nowrap;position:relative}
.nav .menu-label{min-width:0}
.nav>li>a[aria-current="page"]{color:#fff}
.nav .btn{margin-left:12px;white-space:nowrap}
.nav .caret{width:14px;height:14px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.nav .top[aria-expanded="true"] .caret{transform:rotate(180deg)}
.nav .top[aria-expanded="true"]{background:rgba(255,255,255,.07);color:#fff}
@media (hover:hover){.nav a:not(.btn):hover,.nav .top:hover{background:rgba(255,255,255,.07);color:#fff}}
.nav .sub{position:absolute;top:100%;left:0;min-width:340px;background:rgba(12,5,38,.97);backdrop-filter:blur(20px);
  border:1px solid var(--glass-b);border-radius:var(--r-lg);box-shadow:0 26px 60px rgba(0,0,0,.6);
  padding:12px;margin:10px 0 0;list-style:none;opacity:0;visibility:hidden;transform:translateY(-8px);transition:.22s}
.nav li:hover>.sub,.nav li:focus-within>.sub,.nav .sub.open{opacity:1;visibility:visible;transform:none}
.nav .sub a{display:flex;align-items:center;justify-content:flex-start;gap:14px;padding:11px 13px;border-radius:var(--r);
  font-size:.95rem;line-height:1.34;color:var(--t-2);min-height:var(--tap);white-space:normal;text-align:left}
.nav .sub .menu-label{flex:1;overflow-wrap:anywhere}
.nav .sub a[aria-current="page"]{background:rgba(94,169,236,.14);color:#fff}
.nav .sub a[aria-current="page"] .ico-badge{background:var(--grad);color:#06112B}
@media (hover:hover){
  .nav .sub a:hover{background:rgba(94,169,236,.12);color:#fff}
  .nav .sub a:hover .ico-badge{background:var(--grad);color:#06112B}
}
.burger{margin-left:auto;display:none;background:rgba(255,255,255,.05);border:1px solid var(--glass-b);
  border-radius:99px;width:var(--tap);height:var(--tap);cursor:pointer;align-items:center;justify-content:center;flex-direction:column;padding:0}
.burger span{display:block;width:18px;height:2px;background:#fff;margin:2.5px 0;border-radius:2px;transition:.24s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.sec{position:relative;padding:var(--pad-sec) 0;overflow:hidden}
.sec-1{background:var(--bg-1)}
.sec-head{max-width:64ch;margin:0 auto clamp(36px,5.5vw,58px);text-align:center}
.sec-head .lede{margin-left:auto;margin-right:auto}

.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;list-style:none;margin:0 0 22px;padding:0;
  font-size:clamp(.76rem,1.7vw,.82rem);color:var(--t-3)}
.crumbs a{text-decoration:none;color:var(--t-3)}
.crumbs a:hover{color:var(--celeste)}
.crumbs li+li::before{content:"/";margin-right:8px;color:rgba(255,255,255,.28)}
.crumbs [aria-current]{color:var(--t-2)}

.svc-hero{position:relative;overflow:hidden;padding:clamp(44px,7vw,76px) 0 clamp(56px,8vw,88px)}
.svc-hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(32px,5vw,60px);align-items:center}
.svc-hero .h1{max-width:24ch;font-size:clamp(1.68rem,5vw,3.1rem)}
.svc-hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(26px,4vw,34px)}
.svc-art{position:relative;aspect-ratio:1;display:flex;align-items:center;justify-content:center;overflow:visible}
.svc-art .ring{position:absolute;border:1px solid rgba(94,169,236,.22);border-radius:50%}
.svc-art .r1{inset:7%}.svc-art .r2{inset:18%}.svc-art .r3{inset:32%}
.svc-art .core{width:44%;aspect-ratio:1;border-radius:28%;background:rgba(94,169,236,.12);
  border:1px solid rgba(94,169,236,.35);display:flex;align-items:center;justify-content:center;
  color:var(--celeste);box-shadow:0 20px 60px rgba(94,169,236,.35)}
.svc-art .core .ico{width:46%;height:46%;stroke-width:1.3}
/* Onda de radar: pulsos que nacen en el núcleo y se expanden hacia
   afuera, escalonados. La curva de aceleración es rápida al salir y
   lenta al final, que es lo que le da la sensación orgánica. */
.svc-art .wave{position:absolute;inset:32%;border-radius:50%;
  border:1px solid var(--celeste);opacity:0;pointer-events:none;
  will-change:transform,opacity}
.svc-art .core{z-index:2}
.svc-art .ring{z-index:1}

@media (prefers-reduced-motion:no-preference){
  .svc-art .wave{animation:radar 6s cubic-bezier(.18,.62,.28,1) infinite}
  .svc-art .w2{animation-delay:2s}
  .svc-art .w3{animation-delay:4s}
  /* Los aros fijos respiran muy lento, en sentidos opuestos */
  .svc-art .r1{animation:breathe 11s ease-in-out infinite}
  .svc-art .r3{animation:breathe 8.5s ease-in-out infinite reverse}
  .svc-art .core{animation:corepulse 6s ease-in-out infinite}
}
@keyframes radar{
  0%   {transform:scale(1.16);opacity:0}
  8%   {opacity:.5}
  55%  {opacity:.16}
  85%  {opacity:.03}
  100% {transform:scale(2.62);opacity:0}
}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.028)}}
@keyframes corepulse{
  0%,100%{box-shadow:0 20px 60px rgba(94,169,236,.35)}
  50%    {box-shadow:0 20px 74px rgba(94,169,236,.55)}
}

/* Bloque de definición: titular corto + párrafo.
   La columna izquierda queda anclada arriba con una línea de acento y el
   párrafo se limita a 62ch, para que no quede un vacío enorme al centro. */
.def{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(22px,3.6vw,48px);align-items:start;
  padding-top:clamp(22px,3vw,30px);border-top:1px solid var(--glass-b)}
.def-k{position:relative;padding-left:clamp(16px,2vw,22px)}
.def-k::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:2px;border-radius:2px;background:var(--grad)}
.def-k .h2{max-width:13ch}
.def-v{max-width:62ch}
.def-v .body-lg{font-size:clamp(.98rem,1.75vw,1.06rem);line-height:1.66}
.def-v p+p{margin-top:15px}
/* Estas secciones llevan poco contenido: menos aire vertical. */
.sec:has(.def){padding:clamp(48px,7vw,84px) 0}

.benefits{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:clamp(12px,1.8vw,18px)}
.benefit{padding:clamp(24px,3.4vw,32px) clamp(22px,3vw,28px);display:flex;flex-direction:column}
.benefit .ico-tile{margin-bottom:clamp(16px,2.6vw,22px)}
.benefit .h3{margin-bottom:10px}
.benefit p{color:var(--t-2);font-size:clamp(.92rem,1.9vw,.96rem);font-weight:300}

.panel{display:grid;grid-template-columns:1fr 1fr;overflow:hidden}
.panel-txt{padding:clamp(30px,4.6vw,52px) clamp(26px,4vw,46px);display:flex;flex-direction:column;justify-content:center}
.panel-med{position:relative;display:flex;align-items:center;justify-content:center;padding:clamp(20px,3vw,38px);
  background:radial-gradient(ellipse 80% 70% at 50% 50%,rgba(84,97,248,.22),transparent 70%),rgba(0,0,0,.28);
  border-left:1px solid var(--glass-b);min-height:300px}

.xnav{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:clamp(12px,1.8vw,18px)}
.xcard{padding:clamp(22px,3vw,28px);display:flex;flex-direction:column;text-decoration:none}
.xcard .ico-badge{margin-bottom:16px}
.xcard .h4{margin-bottom:8px}
.xcard p{color:var(--t-2);font-size:.92rem;font-weight:300;margin-bottom:18px}
.xcard .go{margin-top:auto;color:var(--celeste);font-size:.9rem;font-weight:500;display:inline-flex;gap:8px;align-items:center}

.cta{position:relative;overflow:hidden;padding:clamp(74px,11vw,120px) 0;text-align:center}
.cta-veil{position:absolute;inset:0;z-index:1;background:radial-gradient(ellipse 70% 90% at 50% 100%,rgba(94,169,236,.36),transparent 62%),rgba(7,3,26,.72)}
.cta .h2{max-width:28ch;margin:0 auto;font-size:clamp(1.5rem,3.4vw,2.25rem)}
.cta .lede{margin:20px auto 0}
.cta-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:clamp(26px,4vw,36px)}

.foot{position:relative;overflow:hidden;background:var(--bg-1);border-top:1px solid var(--glass-b);
  padding:clamp(50px,8vw,76px) 0 calc(26px + env(safe-area-inset-bottom));
  font-size:clamp(.92rem,1.9vw,.95rem);font-weight:300;color:var(--t-2)}
.foot .g1{width:min(700px,120vw);aspect-ratio:1;bottom:-58vw;left:50%;transform:translateX(-50%);opacity:.6}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:clamp(28px,4vw,38px)}
.foot img.fl{height:clamp(30px,5vw,38px);width:auto}
.foot-bio{max-width:36ch;margin:16px 0 0}
.foot h3{font-size:.75rem;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:#fff;margin:0 0 16px}
.foot ul{margin:0;padding:0;list-style:none}
.foot li{margin-bottom:9px}
.foot a{text-decoration:none;display:inline-block;padding:3px 0}
@media (hover:hover){.foot a:hover{color:var(--turquesa)}}
.foot-bot{display:flex;justify-content:space-between;gap:12px 18px;flex-wrap:wrap;
  margin-top:clamp(36px,6vw,54px);padding-top:22px;border-top:1px solid var(--glass-b);font-size:.82rem;color:var(--t-3)}

.rv{opacity:0;transform:translateY(20px);transition:opacity .65s ease,transform .65s ease}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .pip,.svc-art .r1,.svc-art .r3{animation:none}
  .scene .orbit *,.scene .chip,.scene .spark,.core-panel,.svc-art .wave{animation:none}
  .scene .spark{opacity:.7}
  #pre{display:none}
}

@media (max-width:1180px){.nav .sub{min-width:300px}.nav a:not(.btn),.nav .top{padding:11px 11px;font-size:.92rem}}
@media (max-width:1024px){
  .burger{display:flex}
  .nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:2px;
    background:rgba(12,5,38,.98);backdrop-filter:blur(20px);border-bottom:1px solid var(--glass-b);
    padding:14px var(--gut) calc(24px + env(safe-area-inset-bottom));
    max-height:calc(100dvh - var(--head-h) - 40px);overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;
    box-shadow:0 26px 60px rgba(0,0,0,.6)}
  .nav.open{display:flex}
  .nav a:not(.btn),.nav .top{width:100%;justify-content:space-between;font-size:1rem;padding:13px 14px;min-height:var(--tap)}
  .nav>li,.nav .sub>li{width:100%;min-width:0;max-width:100%}
  .nav .sub{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;
    background:rgba(255,255,255,.03);border-radius:var(--r);margin:2px 0 6px;padding:6px;
    width:100%;min-width:0;max-width:100%;display:none;overflow:hidden}
  .nav .sub.open{display:block}
  .nav .sub a{align-items:center;justify-content:flex-start;gap:12px;width:100%;min-width:0;max-width:100%;
    padding:11px 12px;white-space:normal;overflow-wrap:anywhere}
  .nav .sub .ico-badge{flex:0 0 38px;align-self:center}
  .nav .btn{margin:14px 0 0;width:100%}
  .svc-hero-grid,.def,.panel{grid-template-columns:1fr}
  .svc-art{max-width:380px;margin:0 auto;order:-1}
  .panel-med{order:-1;border-left:0;border-bottom:1px solid var(--glass-b);min-height:0;aspect-ratio:16/9}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .nav{padding-inline:max(14px,env(safe-area-inset-left),env(safe-area-inset-right))}
  .nav .sub{padding:5px}
  .nav .sub a{gap:10px;padding:10px;font-size:.96rem;line-height:1.28}
  .sec-head{text-align:left}
  .sec-head .lede,.sec-head .h2{margin-left:0;max-width:none}
  .sec-head .deck{margin-left:0;max-width:none}
  .svc-art{max-width:248px}
  .panel-txt{padding:28px 22px 32px}
  .panel-med{padding:22px}
  .eyebrow{font-size:.66rem;letter-spacing:.09em;padding:7px 13px;line-height:1.45}
  .ico-tile{width:52px}
  .benefit{padding:24px 22px 26px}
  .crumbs{font-size:.74rem;gap:6px}
  .def-v p+p{margin-top:13px}
  .def{padding-top:20px}
  .def-k{padding-left:14px}
  .def-k .h2{max-width:none}
  .def-v{max-width:none}
  .svc-hero .h1{max-width:none}
  .svc-hero-cta .btn,.cta-btns .btn{flex:1 1 100%}
  .cta .h2{max-width:none}
  .hero .h1,.svc-hero .h1{max-width:none}.cta,.cta .lede{text-align:center}
  .topbar .meta{display:none}
  .panel-med{aspect-ratio:4/3}
  .logo-box{width:118px;height:38px}
  .logo-track{gap:26px;animation-duration:32s}
  .marquee{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%)}
  .trust{padding:34px 0}
  .trust h2{margin-bottom:22px}
}
@media (max-width:420px){
  .foot-grid{grid-template-columns:1fr}
  .eyebrow{letter-spacing:.08em;font-size:.63rem}
  .svc-art{max-width:206px}
  .panel-med{aspect-ratio:1/1;padding:18px}
  .h1{letter-spacing:-.025em}
}

/* ==================================================================
   BLOQUES EXCLUSIVOS DEL HOME
   ================================================================== */

.hero{position:relative;overflow:hidden;padding:clamp(56px,9vw,104px) 0 0}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.34;z-index:0}
.hero-veil{position:absolute;inset:0;z-index:1;background:linear-gradient(100deg,var(--bg-0) 8%,rgba(7,3,26,.84) 52%,rgba(19,4,63,.5) 100%)}
.hero .g1{width:min(760px,110vw);aspect-ratio:1;top:-22vw;left:-18vw}
.hero .g2{width:min(600px,90vw);aspect-ratio:1;top:-10vw;right:-16vw}
.hero .h1{max-width:24ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(26px,4vw,36px)}

.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.6vw,14px);
  margin-top:clamp(46px,7vw,78px);padding-bottom:clamp(50px,7vw,70px)}
.metric{padding:clamp(18px,2.6vw,24px) clamp(16px,2.4vw,22px) clamp(20px,2.8vw,26px)}
.metric .k{font-size:clamp(1.22rem,3.4vw,1.95rem);font-weight:600;letter-spacing:-.025em}
.metric .l{font-size:clamp(.66rem,1.6vw,.75rem);letter-spacing:.1em;text-transform:uppercase;color:var(--t-3);margin-top:8px}
.metric .d{font-size:clamp(.72rem,1.7vw,.8rem);color:var(--turquesa);margin-top:5px}

.trust{padding:clamp(38px,6vw,52px) 0;border-top:1px solid var(--glass-b);border-bottom:1px solid var(--glass-b);background:rgba(255,255,255,.018)}
.trust h2{font-size:clamp(.7rem,1.7vw,.76rem);font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--t-3);text-align:center;margin:0 0 clamp(20px,3.4vw,30px)}
/* Cada logo vive en una caja de tamaño fijo y se ajusta por dentro con
   object-fit. Así conviven marcas apaisadas y cuadradas sin que unas se
   vean tres veces más grandes que otras. */
.logo-box{flex:none;display:flex;align-items:center;justify-content:center;
  width:clamp(124px,16vw,164px);height:clamp(38px,5vw,50px)}
.logo-box img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;
  filter:brightness(0) invert(1);opacity:.55;transition:opacity .3s;
  transform:scale(var(--s,1));transform-origin:center}
@media (hover:hover){.logo-box:hover img{opacity:1}}

/* Logos sin canal alfa (JPG o PNG con fondo sólido). El filtro normal les
   pinta el rectángulo completo. Aquí se invierte la imagen —el fondo blanco
   pasa a negro— y el blend "screen" descarta ese negro contra el fondo. */
.logo-box.opaque img{filter:invert(1) grayscale(1) brightness(1.6) contrast(1.3);
  mix-blend-mode:screen;opacity:.8}
@media (hover:hover){.logo-box.opaque:hover img{opacity:1}}

/* Cinta continua: la pista lleva la lista duplicada y se desplaza un 50%,
   con lo que el bucle es invisible. Las máscaras laterales la cortan
   difuminada contra el fondo. */
.marquee{position:relative;overflow:hidden;background:#0B081E;
  margin-inline:calc(-1 * max(var(--gut),env(safe-area-inset-left)));
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%)}
.logo-track{display:flex;align-items:center;gap:clamp(28px,5vw,60px);
  width:max-content;margin:0;padding:0;list-style:none;
  animation:marquee 42s linear infinite;will-change:transform}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (hover:hover){.marquee:hover .logo-track{animation-play-state:paused}}
@media (prefers-reduced-motion:reduce){
  .logo-track{animation:none;width:auto;flex-wrap:wrap;justify-content:center}
  .marquee{-webkit-mask-image:none;mask-image:none}
  .logo-track .dup{display:none}
}

/* Fila estática, para bloques con pocos logos */
.logos{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:20px clamp(28px,6vw,48px);margin:0;padding:0;list-style:none}

.flip{max-width:1080px;margin:0 auto;perspective:1900px}
.flip-in{position:relative;transition:transform .85s cubic-bezier(.4,.1,.2,1),height .32s ease;transform-style:preserve-3d}
.flip.on .flip-in{transform:rotateY(180deg)}
.face{backface-visibility:hidden;display:grid;grid-template-columns:1.02fr .98fr;height:100%}
.face-b{position:absolute;inset:0;transform:rotateY(180deg)}
.face-txt{padding:clamp(28px,4.4vw,50px) clamp(24px,4vw,44px);display:flex;flex-direction:column;justify-content:center}
.face p{color:var(--t-2);font-size:clamp(.95rem,1.9vw,1rem);font-weight:300;margin:14px 0 0}
.face .eyebrow{margin:0 0 clamp(16px,2.4vw,20px)}
.face p strong{color:#fff;font-weight:500}
.flip-btn{margin-top:clamp(22px,3.4vw,30px);align-self:flex-start}
.face-med{position:relative;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(ellipse 80% 70% at 50% 50%,rgba(84,97,248,.22),transparent 70%),rgba(0,0,0,.3);
  border-left:1px solid var(--glass-b);padding:clamp(14px,2.4vw,26px);overflow:hidden}
.face-med video{width:100%;height:100%;object-fit:contain}

.bento{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.8vw,18px);min-width:0}
.b-lg{grid-column:span 2}
.cell{width:100%;min-width:0;padding:clamp(24px,3.6vw,34px) clamp(22px,3.4vw,32px) clamp(24px,3.2vw,30px);display:flex;flex-direction:column}
.cell .ico-tile{margin-bottom:clamp(16px,2.8vw,24px)}
.cell .h3{margin-bottom:10px;overflow-wrap:anywhere}
.cell p{color:var(--t-2);font-size:clamp(.93rem,1.9vw,.97rem);font-weight:300;margin:0 0 20px;max-width:52ch}
.tags{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 22px;padding:0;list-style:none}
.tags li{font-size:clamp(.71rem,1.7vw,.76rem);color:var(--celeste);background:rgba(94,169,236,.12);
  border:1px solid rgba(94,169,236,.24);border-radius:99px;padding:5px 12px}
.cell-link{margin-top:auto;align-self:flex-start;text-decoration:none;font-weight:500;
  font-size:clamp(.9rem,1.9vw,.95rem);color:var(--celeste);display:inline-flex;gap:8px;align-items:center;min-height:var(--tap)}
@media (hover:hover){.cell-link:hover{color:var(--turquesa)}}

.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.8vw,18px)}
.step{padding:clamp(22px,3.2vw,28px) clamp(20px,2.8vw,24px)}
.step-k{font-size:clamp(.68rem,1.6vw,.72rem);font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--celeste);margin:0 0 11px}
.step-t{font-size:clamp(1rem,2.2vw,1.06rem);font-weight:600;margin:0 0 14px}
.step ul{margin:0;padding:0;list-style:none}
.step li{font-size:clamp(.84rem,1.9vw,.88rem);font-weight:300;color:var(--t-2);padding:8px 0;border-top:1px solid rgba(255,255,255,.08)}
.step-core{border-color:rgba(104,242,225,.45)}
.step-core>.gl{opacity:1;background:radial-gradient(circle,rgba(94,169,236,.7),transparent 62%)}
.step-core .step-k{color:var(--turquesa)}

.secure{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,56px);align-items:start}
.chips{display:flex;flex-wrap:wrap;gap:9px;margin:clamp(22px,3.4vw,30px) 0 0;padding:0;list-style:none}
.chips li{font-size:clamp(.78rem,1.8vw,.83rem);border:1px solid var(--glass-b);background:rgba(255,255,255,.04);
  border-radius:99px;padding:9px 16px;color:var(--t-2)}
.checks{margin:0;padding:0;list-style:none}
.checks li{display:flex;gap:13px;padding:15px 0;border-top:1px solid rgba(255,255,255,.08);
  color:var(--t-2);font-size:clamp(.92rem,1.9vw,.95rem);font-weight:300}
.checks .ico{color:var(--turquesa);width:20px;height:20px;margin-top:3px}
.checks b{color:#fff;font-weight:500}

.cta video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.3;z-index:0}

.contact{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(36px,5vw,56px);align-items:start}
.form{padding:clamp(26px,3.8vw,36px) clamp(22px,3.4vw,34px)}
.field{margin-bottom:16px}
.field label{display:block;font-size:clamp(.69rem,1.6vw,.73rem);font-weight:500;letter-spacing:.08em;
  text-transform:uppercase;color:var(--t-3);margin-bottom:8px;line-height:1.3}
.field input,.field textarea,.field select{width:100%;font-family:inherit;font-size:16px;color:#fff;
  background:rgba(255,255,255,.05);border:1px solid var(--glass-b);border-radius:var(--r);
  padding:13px 15px;min-height:var(--tap);transition:.18s}
.field input::placeholder,.field textarea::placeholder{color:rgba(255,255,255,.35)}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--celeste);background:rgba(255,255,255,.09)}
.field select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%235EA9EC' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:15px;padding-right:44px;cursor:pointer}
.field select option{background:#0C0526;color:#fff}
.field textarea{resize:vertical;min-height:96px}
.err{display:none;font-size:.8rem;color:#FF9A8F;margin:6px 0 0}
.field.bad input,.field.bad textarea{border-color:#FF9A8F}
.field.bad .err{display:block}
.ok{display:none;background:rgba(104,242,225,.1);border:1px solid rgba(104,242,225,.4);border-radius:var(--r);padding:16px 18px;font-size:.94rem;margin-bottom:20px}
.ok.on{display:block}
.form-note{font-size:.82rem;font-weight:300;color:var(--t-3);margin:14px 0 0}
.form-note a{color:var(--celeste)}
.ways{margin:clamp(22px,3.4vw,30px) 0 0;padding:0;list-style:none}
.ways li{padding:15px 0;border-top:1px solid rgba(255,255,255,.09);font-size:clamp(.92rem,1.9vw,.96rem);color:var(--t-2)}
.ways .wk{display:block;font-size:.73rem;font-weight:500;letter-spacing:.11em;text-transform:uppercase;color:var(--t-3);margin-bottom:5px}
.ways a{color:var(--celeste);text-decoration:none;font-weight:500;display:inline-block;min-height:28px}
@media (hover:hover){.ways a:hover{color:var(--turquesa)}}

/* --- vistas del enrutador --- */
.view{display:none}
.view.on{display:block}

/* --- responsive del home --- */
@media (max-width:1024px){
  .metrics{grid-template-columns:repeat(2,1fr)}
  .bento{grid-template-columns:repeat(2,minmax(0,1fr))}
    .flow{grid-template-columns:repeat(2,1fr)}
  .secure,.contact{grid-template-columns:1fr}
}
@media (max-width:820px){
  .bento{grid-template-columns:minmax(0,1fr)}
  .bento .b-lg{grid-column:auto}
  .face{grid-template-columns:1fr;grid-template-rows:auto auto;height:auto;align-content:start}
  .face-b{bottom:auto}
  .face-med{order:-1;width:100%;border-left:0;border-bottom:1px solid var(--glass-b);aspect-ratio:16/9;max-height:none}
  .face-med video{width:100%;height:100%;max-height:none}
  .flip-btn{align-self:stretch}
}
@media (max-width:640px){
  .bento,.flow{grid-template-columns:1fr}
  .posts{grid-template-columns:minmax(0,1fr)}
  .hero-veil{background:linear-gradient(180deg,rgba(7,3,26,.8) 0%,rgba(7,3,26,.9) 100%)}
  .hero .h1{max-width:none}
  .hero-cta .btn{flex:1 1 100%}
}
@media (max-width:420px){
  .metrics{grid-template-columns:1fr}
  .face-med{aspect-ratio:4/3}
}


/* ==================================================================
   BLOG
   ================================================================== */
.blog-hero{position:relative;overflow:hidden;padding:clamp(48px,7vw,84px) 0 clamp(28px,4vw,44px);text-align:center}
.blog-hero .h1{max-width:26ch;margin:0 auto}
.blog-hero .lede{margin:20px auto 0;max-width:58ch}

.filters{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin:clamp(26px,4vw,36px) 0 0;padding:0;list-style:none}
.filters button{font-family:inherit;font-size:clamp(.78rem,1.8vw,.85rem);font-weight:500;color:var(--t-2);
  background:rgba(255,255,255,.05);border:1px solid var(--glass-b);border-radius:99px;
  padding:9px 18px;min-height:40px;cursor:pointer;transition:.2s}
.filters button[aria-pressed="true"]{background:var(--grad);color:#06112B;border-color:transparent;
  box-shadow:0 6px 22px rgba(94,169,236,.35)}
@media (hover:hover){.filters button:hover{border-color:var(--celeste);color:#fff}
  .filters button[aria-pressed="true"]:hover{color:#06112B}}

.posts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,292px),1fr));gap:clamp(14px,1.8vw,18px)}
.post{display:flex;min-width:0;flex-direction:column;text-decoration:none;overflow:hidden}
.post[hidden]{display:none}
.post-thumb{position:relative;aspect-ratio:16/10;overflow:hidden;flex:none;
  background:linear-gradient(135deg,rgba(84,97,248,.35),rgba(104,242,225,.18))}
.post-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .55s cubic-bezier(.2,.6,.3,1)}
.post-thumb::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 45%,rgba(7,3,26,.55) 100%)}
.post-thumb .fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.5)}
.post-thumb .fallback .ico{width:34%;height:34%;stroke-width:1}
@media (hover:hover){.post:hover .post-thumb img{transform:scale(1.06)}}
.post-body{padding:clamp(20px,2.8vw,26px) clamp(20px,2.6vw,26px) clamp(22px,3vw,28px);
  display:flex;flex-direction:column;flex:1}
.post-cat{display:inline-flex;align-items:center;gap:7px;align-self:flex-start;font-size:.7rem;font-weight:500;
  letter-spacing:.11em;text-transform:uppercase;color:var(--celeste);background:rgba(94,169,236,.12);
  border:1px solid rgba(94,169,236,.24);border-radius:99px;padding:5px 12px;margin-bottom:14px}
.post-cat .ico{width:13px;height:13px;stroke-width:2}
.post-title{font-size:clamp(1.04rem,2.3vw,1.22rem);font-weight:600;line-height:1.26;margin:0 0 10px;letter-spacing:-.008em;word-spacing:.04em}
.post-date{display:inline-flex;align-items:center;gap:7px;font-size:.78rem;color:var(--t-3);margin-bottom:12px}
.post-date .ico{width:14px;height:14px;stroke-width:1.8}
.post-exc{color:var(--t-2);font-size:clamp(.9rem,1.9vw,.94rem);font-weight:300;margin:0 0 20px}
.post-more{margin-top:auto;align-self:flex-start;color:var(--celeste);font-size:.88rem;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;display:inline-flex;gap:8px;align-items:center}
@media (hover:hover){.post:hover .post-more{color:var(--turquesa)}}

/* Compatibilidad con listados antiguos: incluso una tarjeta marcada como
   destacada conserva el formato vertical y la imagen 16:10. */
.featured{display:flex;flex-direction:column;overflow:hidden;margin-bottom:0}
.featured .post-thumb{aspect-ratio:16/10;min-height:0;height:auto}
.featured .post-thumb::after{background:linear-gradient(180deg,transparent 45%,rgba(7,3,26,.55) 100%)}
.featured .post-body{padding:clamp(20px,2.8vw,26px) clamp(20px,2.6vw,26px) clamp(22px,3vw,28px);justify-content:flex-start}
.featured .post-title{font-size:clamp(1.04rem,2.3vw,1.22rem);line-height:1.26;margin-bottom:10px}
.featured .post-exc{font-size:clamp(.9rem,1.9vw,.94rem);max-width:none}

/* ==================================================================
   NOSOTROS
   ================================================================== */
.purpose{text-align:center;padding:clamp(38px,6vw,64px) clamp(26px,5vw,60px);max-width:900px;margin:0 auto}
.purpose .ico-tile{margin:0 auto clamp(18px,2.6vw,24px)}
.purpose .h2{max-width:28ch;margin:0 auto}

/* ==================================================================
   CONTACTO
   ================================================================== */
.contact-grid .h1{font-size:clamp(1.55rem,3.9vw,2.55rem);max-width:22ch;word-spacing:.09em}
.contact-grid .lede{font-size:clamp(.96rem,1.8vw,1.06rem);max-width:46ch}
.contact-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(32px,5vw,60px);align-items:start}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.contact-cards{display:grid;gap:12px;margin:clamp(24px,3.4vw,32px) 0 0}
.ccard{display:flex;gap:15px;align-items:flex-start;padding:18px 20px;text-decoration:none}
.ccard .ico-badge{margin-top:2px;width:34px;height:34px}
.ccard .ico-badge .ico{width:18px;height:18px}
/* El contenedor y sus tres líneas deben ser bloques: como <span> en línea
   el margin-top no aplicaba y valor y descripción quedaban en la misma línea. */
.ccard-txt{display:block;min-width:0;flex:1}
.ccard .k{display:block;font-size:.68rem;font-weight:500;letter-spacing:.11em;text-transform:uppercase;
  color:var(--t-3);margin:0 0 5px;line-height:1.2}
.ccard .v{display:block;font-size:clamp(.93rem,1.8vw,.99rem);color:#fff;font-weight:500;
  line-height:1.3;overflow-wrap:anywhere}
.ccard .s{display:block;font-size:.83rem;color:var(--t-2);font-weight:300;margin-top:6px;line-height:1.45}
@media (hover:hover){.ccard:hover .v{color:var(--turquesa)}}

@media (max-width:1024px){
  .contact-grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  .field-row{grid-template-columns:1fr}
  .contact-grid .h1{font-size:clamp(1.5rem,6.4vw,1.92rem);max-width:none}
  .contact-grid .lede{max-width:none}
  .purpose,.purpose .h2{text-align:left}
  .purpose .h2{margin-left:0;max-width:none}
  .purpose .ico-tile{margin-left:0}
}


/* ==================================================================
   COMPONENTES DE LAS LANDINGS DE INFRAESTRUCTURA Y SOC
   ================================================================== */

/* Aviso normativo: informativo, nunca alarmista */
.notice{display:grid;grid-template-columns:auto 1fr;gap:clamp(16px,2.6vw,22px);align-items:start;
  padding:clamp(22px,3.4vw,30px) clamp(22px,3.4vw,32px);max-width:920px;margin:0 auto}
.notice .ico-tile{background:rgba(252,255,118,.1);border-color:rgba(252,255,118,.28);color:var(--amarillo,#FCFF76)}
.notice .k{display:block;font-size:.7rem;font-weight:500;letter-spacing:.13em;text-transform:uppercase;
  color:var(--t-3);margin-bottom:9px}
.notice p{color:var(--t-2);font-size:clamp(.94rem,1.9vw,1.02rem);font-weight:300;line-height:1.62}
.notice p+p{margin-top:10px}
.notice strong{color:#fff;font-weight:500}

/* Etiquetas de sector, con pictograma */
.sectors{display:flex;flex-wrap:wrap;gap:10px;margin:clamp(22px,3.4vw,30px) 0 0;padding:0;list-style:none}
.sectors li{display:inline-flex;align-items:center;gap:9px;font-size:clamp(.82rem,1.8vw,.88rem);
  font-weight:400;color:var(--t-2);background:rgba(255,255,255,.045);border:1px solid var(--glass-b);
  border-radius:99px;padding:9px 16px 9px 12px;transition:.22s}
.sectors .ico{width:17px;height:17px;color:var(--celeste);stroke-width:1.6}
@media (hover:hover){.sectors li:hover{border-color:rgba(94,169,236,.5);color:#fff;background:rgba(94,169,236,.1)}}

/* Ficha de modelo de entrega: pares dato / valor */
.specs{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:clamp(12px,1.8vw,18px)}
.spec{padding:clamp(22px,3vw,28px) clamp(20px,2.8vw,26px)}
.spec .k{display:block;font-size:.7rem;font-weight:500;letter-spacing:.13em;text-transform:uppercase;
  color:var(--celeste);margin-bottom:11px}
.spec .v{display:block;font-size:clamp(1rem,2.1vw,1.12rem);font-weight:600;color:#fff;line-height:1.32;letter-spacing:-.01em}
.spec p{color:var(--t-2);font-size:.9rem;font-weight:300;margin-top:8px}

/* Cita de posicionamiento */
.pull{max-width:820px;margin:0 auto;text-align:center;padding:clamp(30px,4.6vw,48px) clamp(24px,4vw,52px)}
.pull q{display:block;font-size:clamp(1.25rem,3vw,1.85rem);font-weight:600;line-height:1.3;
  letter-spacing:-.012em;word-spacing:.06em;quotes:"\201C" "\201D";
  background:var(--grad-txt);-webkit-background-clip:text;background-clip:text;color:transparent}
.pull .src{display:block;font-size:.76rem;font-weight:500;letter-spacing:.13em;text-transform:uppercase;
  color:var(--t-3);margin-top:16px}

/* Lista de alcance del servicio */
.scope{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:0 clamp(28px,4vw,48px);
  max-width:960px;margin:0 auto;padding:0;list-style:none}
.scope li{display:flex;gap:14px;padding:16px 0;border-top:1px solid rgba(255,255,255,.09);
  color:var(--t-2);font-size:clamp(.93rem,1.9vw,.97rem);font-weight:300}
.scope li::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--grad);margin-top:9px}
.scope b{color:#fff;font-weight:500}

@media (max-width:1024px){
  .flow[style*="repeat(3"]{grid-template-columns:repeat(2,1fr)!important}
  .specs{grid-template-columns:1fr}
}
@media (max-width:640px){
  .notice{grid-template-columns:1fr}
  .flow[style*="repeat(3"]{grid-template-columns:1fr!important}
  .sectors{justify-content:flex-start!important}
  .sectors li{font-size:.8rem;padding:8px 14px 8px 11px}
  .pull q{font-size:clamp(1.12rem,4.6vw,1.4rem)}
  .spec .v{font-size:1rem}
  .scope{grid-template-columns:1fr}
  .pull{text-align:left}
}


/* ==================================================================
   ESCENA DE PRODUCTO
   Composición del hero de cada servicio: órbitas, núcleo de vidrio,
   chips satélite y destellos. Todo SVG y CSS, sin imágenes.
   ================================================================== */
.scene{position:relative}
.scene .orbit{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:0}
.scene .orbit *{fill:none}
.scene .o-dash{stroke:rgba(94,169,236,.45);stroke-width:1.1;stroke-dasharray:.6 8;stroke-linecap:round;
  transform-origin:100px 100px}
.scene .o-thin{stroke:rgba(94,169,236,.14);stroke-width:1;transform-origin:100px 100px}
.scene .o-arc{stroke:var(--turquesa);stroke-width:1.4;stroke-linecap:round;opacity:.55;
  transform-origin:100px 100px}
.scene .link{stroke:rgba(94,169,236,.3);stroke-width:1;stroke-dasharray:3 4}

/* Núcleo: panel de vidrio, no un cuadrado plano */
.core-panel{position:relative;width:44%;aspect-ratio:1;border-radius:27%;z-index:4;
  display:flex;align-items:center;justify-content:center;color:var(--celeste);
  background:linear-gradient(158deg,rgba(255,255,255,.115) 0%,rgba(255,255,255,.028) 60%,rgba(94,169,236,.08) 100%);
  border:1px solid rgba(94,169,236,.4);backdrop-filter:blur(7px);
  box-shadow:0 26px 72px rgba(94,169,236,.34),inset 0 1px 0 rgba(255,255,255,.3),
             inset 0 -22px 40px rgba(94,169,236,.1)}
.core-panel::before{content:"";position:absolute;top:13%;left:24%;right:24%;height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent)}
.core-panel::after{content:"";position:absolute;left:16%;right:16%;bottom:-9%;height:16%;border-radius:50%;
  background:radial-gradient(ellipse,rgba(104,242,225,.5),transparent 70%);filter:blur(9px)}
.core-panel .ico{width:42%;height:42%;stroke-width:1.25}

/* Chips satélite */
.scene .chip{position:absolute;width:20.5%;aspect-ratio:1;border-radius:31%;z-index:5;
  display:flex;align-items:center;justify-content:center;color:var(--turquesa);
  background:linear-gradient(158deg,rgba(255,255,255,.1),rgba(255,255,255,.025));
  border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(6px);
  box-shadow:0 14px 34px rgba(7,3,26,.55),inset 0 1px 0 rgba(255,255,255,.24)}
.scene .chip .ico{width:44%;height:44%;stroke-width:1.5}
.scene .c1{top:4%;left:3%}
.scene .c2{top:28%;right:3%}
.scene .c3{bottom:8%;left:17%}

/* Destellos */
.scene .spark{position:absolute;width:6px;height:6px;border-radius:50%;z-index:3;
  background:var(--turquesa);box-shadow:0 0 12px 3px rgba(104,242,225,.55)}
.scene .s1{top:16%;right:16%}
.scene .s2{bottom:24%;right:6%;background:var(--azul-claro);box-shadow:0 0 12px 3px rgba(133,142,250,.5)}
.scene .s3{top:44%;left:1%;width:4px;height:4px}

@media (prefers-reduced-motion:no-preference){
  .scene .o-dash{animation:orbita 58s linear infinite}
  .scene .o-thin{animation:orbita 44s linear infinite reverse}
  .scene .o-arc{animation:orbita 22s linear infinite}
  .scene .c1{animation:flota 7.2s ease-in-out infinite}
  .scene .c2{animation:flota 8.6s ease-in-out infinite .9s}
  .scene .c3{animation:flota 6.4s ease-in-out infinite 1.7s}
  .core-panel{animation:flota 9.5s ease-in-out infinite}
  .scene .spark{animation:destello 4.2s ease-in-out infinite}
  .scene .s2{animation-delay:1.4s}
  .scene .s3{animation-delay:2.6s}
}
@keyframes orbita{to{transform:rotate(360deg)}}
@keyframes flota{0%,100%{transform:translateY(0)}50%{transform:translateY(-7%)}}
@keyframes destello{0%,100%{opacity:.35;transform:scale(.85)}50%{opacity:1;transform:scale(1.15)}}

@media (max-width:640px){
  .scene .chip{width:23%}
  .core-panel{width:47%}
  .scene .spark{width:5px;height:5px}
}


/* ==================================================================
   ICONOGRAFÍA ANIMADA
   Los iconos se dibujan trazo a trazo al entrar a cada vista.
   pathLength="1" en el sprite normaliza todas las longitudes, así
   una sola curva de tiempo funciona para cualquier icono.
   El último fotograma retira el dasharray, de modo que si un
   navegador antiguo ignora pathLength el icono igual queda sólido.
   ================================================================== */
.view.on .ico-anim{animation:trazo 1.05s cubic-bezier(.6,.05,.25,1) both}
.view.on .core-panel .ico-anim{animation-delay:.16s;animation-duration:1.25s}
.view.on .chip:nth-of-type(1) .ico-anim{animation-delay:.42s}
.view.on .chip:nth-of-type(2) .ico-anim{animation-delay:.56s}
.view.on .chip:nth-of-type(3) .ico-anim{animation-delay:.70s}
.view.on .cell:nth-child(1) .ico-anim{animation-delay:.10s}
.view.on .cell:nth-child(2) .ico-anim{animation-delay:.20s}
.view.on .cell:nth-child(3) .ico-anim{animation-delay:.30s}
.view.on .cell:nth-child(4) .ico-anim{animation-delay:.40s}
.view.on .cell:nth-child(5) .ico-anim{animation-delay:.50s}
.view.on .benefit:nth-child(1) .ico-anim{animation-delay:.06s}
.view.on .benefit:nth-child(2) .ico-anim{animation-delay:.16s}
.view.on .benefit:nth-child(3) .ico-anim{animation-delay:.26s}
.view.on .benefit:nth-child(4) .ico-anim{animation-delay:.36s}
.view.on .benefit:nth-child(5) .ico-anim{animation-delay:.46s}

@keyframes trazo{
  0%  {stroke-dasharray:1;stroke-dashoffset:1;opacity:.15}
  25% {opacity:1}
  99% {stroke-dasharray:1;stroke-dashoffset:0;opacity:1}
  100%{stroke-dasharray:none;stroke-dashoffset:0;opacity:1}
}

/* El núcleo suma un barrido de luz que recorre el panel */
.core-panel .sheen{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none}
.core-panel .sheen::after{content:"";position:absolute;top:-60%;left:-120%;width:60%;height:220%;
  transform:rotate(22deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent)}

@media (prefers-reduced-motion:no-preference){
  .core-panel .sheen::after{animation:barrido 7s cubic-bezier(.5,0,.5,1) infinite 1.2s}
}
@keyframes barrido{0%{left:-120%}45%,100%{left:180%}}

@media (prefers-reduced-motion:reduce){
  .view.on .ico-anim{animation:none}
  .core-panel .sheen{display:none}
}


/* ==================================================================
   DESPLEGABLE PROPIO
   El <select> nativo abre una lista dibujada por el sistema
   operativo que no acepta estilos: fondo claro, resaltado azul del
   sistema y tipografía ajena. Aquí se conserva el <select> real
   para el envío del formulario y se dibuja encima un control propio.
   Si el JS no corre, el nativo sigue funcionando.
   ================================================================== */
.sel{position:relative}
.sel.on select{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;clip:rect(0 0 0 0)}
.sel-btn{display:none;width:100%;align-items:center;gap:12px;font-family:inherit;font-size:16px;
  font-weight:400;color:#fff;text-align:left;background:rgba(255,255,255,.05);
  border:1px solid var(--glass-b);border-radius:var(--r);padding:13px 15px;
  min-height:var(--tap);cursor:pointer;transition:border-color .18s,background .18s}
.sel.on .sel-btn{display:flex}
.sel-btn .val{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sel-btn.empty .val{color:rgba(255,255,255,.35)}
.sel-btn .caret{flex:none;width:15px;height:15px;stroke:var(--celeste);stroke-width:2;fill:none;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .22s}
.sel-btn[aria-expanded="true"]{border-color:var(--celeste);background:rgba(255,255,255,.09)}
.sel-btn[aria-expanded="true"] .caret{transform:rotate(180deg)}

.sel-list{position:absolute;z-index:60;top:calc(100% + 6px);left:0;right:0;margin:0;padding:6px;
  list-style:none;background:rgba(12,5,38,.985);backdrop-filter:blur(20px);
  border:1px solid var(--glass-b);border-radius:var(--r);box-shadow:0 24px 56px rgba(0,0,0,.62);
  max-height:min(320px,50vh);overflow-y:auto;overscroll-behavior:contain;
  display:none;opacity:0;transform:translateY(-6px);transition:opacity .16s,transform .16s}
.sel.open .sel-list{display:block}
.sel.open.shown .sel-list{opacity:1;transform:none}
.sel-list li{padding:11px 13px;border-radius:10px;font-size:.95rem;line-height:1.36;
  color:var(--t-2);cursor:pointer;min-height:var(--tap);display:flex;align-items:center;gap:10px}
.sel-list li .tick{flex:none;width:15px;height:15px;stroke:var(--celeste);stroke-width:2.2;fill:none;
  stroke-linecap:round;stroke-linejoin:round;opacity:0}
.sel-list li[aria-selected="true"]{background:rgba(94,169,236,.16);color:#fff}
.sel-list li[aria-selected="true"] .tick{opacity:1}
.sel-list li.active{background:rgba(255,255,255,.09);color:#fff}
.sel-list li.ph{color:rgba(255,255,255,.42)}
@media (prefers-reduced-motion:reduce){.sel-list{transition:none}}


/* ===== Animaciones de escena por servicio (video loop generado en Higgsfield) =====
   Reemplaza la escena CSS por un mp4 en loop. Usa el cargador lazy existente
   (.lazyvid): solo carga/reproduce cuando su vista #view-* está activa.
   Para autohospedar: cambia el host de data-src/poster por tu servidor/CDN. */
.svc-art.has-anim{overflow:visible}
/* Integracion sin recuadro: 'screen' funde el fondo oscuro del video con la
   pagina (solo quedan brillos, anillos y tiles) y la mascara radial circular
   (closest-side) difumina el borde en circulo. Autohospedaje: cambiar host en
   data-src/poster de los <video class="lazyvid svc-anim">. */
.svc-anim{width:100%;height:100%;aspect-ratio:1;object-fit:cover;display:block;
  mix-blend-mode:screen;
  -webkit-mask-image:radial-gradient(circle closest-side at 50% 47%,#000 54%,rgba(0,0,0,.5) 78%,transparent 100%);
          mask-image:radial-gradient(circle closest-side at 50% 47%,#000 54%,rgba(0,0,0,.5) 78%,transparent 100%)}
@media (max-width:900px){ .svc-anim{max-width:460px;margin-inline:auto} }

/* Integración WordPress */
.admin-bar .head{top:32px}
.trafpay-crm-form{display:block}
.trafpay-crm-form .nm-crm-form__fields{display:grid;gap:0}
.trafpay-crm-form .nm-crm-field{display:block}
.trafpay-crm-form .nm-crm-field__control{display:block}
.trafpay-crm-form .nm-crm-field__error{font-size:.8rem;color:#FF9A8F;margin:6px 0 0}
.trafpay-crm-form .nm-crm-form__messages{margin:0 0 20px}
.trafpay-crm-form .nm-crm-form__actions{display:block}
.trafpay-crm-form .nm-crm-form__submit{width:100%;border:1px solid transparent;border-radius:999px;background:var(--grad);color:#06112B;box-shadow:0 0 0 1px rgba(104,242,225,.55),0 8px 30px rgba(94,169,236,.4);cursor:pointer;font-family:inherit;font-size:clamp(.9rem,1.9vw,.95rem);font-weight:600;min-height:var(--tap);padding:13px clamp(20px,4vw,26px);transition:.24s}
.trafpay-crm-form .nm-crm-form__submit:hover{box-shadow:0 0 0 1px rgba(104,242,225,.9),0 12px 42px rgba(104,242,225,.55);filter:none;transform:translateY(-1px)}
.trafpay-crm-form .nm-crm-form__after{margin-top:14px}
.trafpay-crm-contacto .nm-crm-form__fields{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:14px}
.trafpay-crm-contacto .trafpay-full{grid-column:1/-1}
.nav .sub .trafpay-menu-icon{display:block;font-size:20px;line-height:1}
.nav .sub .trafpay-menu-svg{display:block;width:20px;height:20px;fill:none;stroke:currentColor}
.nm-thank-you{min-height:70vh;padding-top:var(--head-h)}
.nm-thank-you .nm-shell{width:min(1160px,calc(100% - 40px));margin-inline:auto}
.nm-thank-you__hero{padding:clamp(80px,12vw,150px) 0 70px;text-align:center}
.nm-thank-you__inner{max-width:760px;margin-inline:auto}
.nm-thank-you .nm-section-label{color:var(--celeste);font-size:.75rem;letter-spacing:.13em;text-transform:uppercase}
.nm-thank-you__title{font-size:clamp(2.8rem,8vw,6rem);line-height:.95;margin:20px 0}
.nm-thank-you__excerpt{color:var(--t-2);font-size:clamp(1rem,2vw,1.2rem);line-height:1.7}
.nm-thank-you__actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:32px}
.nm-thank-you .nm-btn{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--glass-b);border-radius:999px;color:#fff;min-height:48px;padding:12px 24px;text-decoration:none}
.nm-thank-you .nm-btn--primary{background:var(--grad);border-color:transparent}
.nm-thank-you__body-section{padding:0 0 100px}
.nm-thank-you__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.nm-thank-you__panel,.nm-thank-you__content{background:var(--glass);border:1px solid var(--glass-b);border-radius:var(--r2);padding:clamp(24px,4vw,40px)}
.nm-thank-you__panel span{color:var(--celeste);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase}
.nm-thank-you__panel h2{font-size:clamp(1.35rem,3vw,2rem);margin:12px 0}
.nm-thank-you__panel p{color:var(--t-2);line-height:1.7;margin:0}
.nm-thank-you__content{margin-top:18px}
.nav .menu-item-has-children>.top{cursor:pointer}
.nav .current-menu-item>a,.nav .current-menu-ancestor>.top{color:#fff;background:rgba(255,255,255,.07)}
.header-cta{margin-left:12px;white-space:nowrap}
.widget{margin:0}.widget-title{font-size:.75rem;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:#fff;margin:0 0 16px}
.widget ul{margin:0;padding:0;list-style:none}
.pagination{display:flex;justify-content:center;gap:8px;margin-top:36px}.pagination .page-numbers{display:inline-flex;min-width:44px;min-height:44px;align-items:center;justify-content:center;border:1px solid var(--glass-b);border-radius:999px;text-decoration:none}.pagination .current{background:var(--grad);color:#06112b;border-color:transparent}
@media(max-width:782px){.admin-bar .head{top:46px}}
@media(max-width:1024px){.header-cta{display:none}}
@media(max-width:566px){.trafpay-crm-contacto .nm-crm-form__fields{grid-template-columns:1fr}.trafpay-crm-contacto .trafpay-full{grid-column:auto}}
@media(max-width:700px){.nm-thank-you__grid{grid-template-columns:1fr}}