/* ═════════════════════════════════════════════════
   ODISEO · gramática Linear sobre base clara
   tipo: 13/14/16/18/20 · display 42–74
   espacio: 8/16/24/32/48/64/96/128
   radios: 6 chip · 12 card · 16 panel · 10 botón
   acento: un solo ritual verde + interacción
   ═════════════════════════════════════════════════ */
:root{
  --paper:#FAFAF8; --paper-2:#F1F1EC; --card:#FFFFFF;
  --line:#E4E4DE; --line-2:#D2D2C9;
  --ink:#0A0A0F; --ink-2:#4C4C55; --ink-3:#63636C;
  --g:#34A853; --g-dk:#137333; --g-hv:#157A38; --g-lt:#5FC97E; --g-soft:#E7F4EB;
  --dark:#08090A; --dark-2:#16171C; --dark-3:#1E1F25;
  --dark-line:rgba(255,255,255,.07);
  --dark-tx:#F7F8F8; --dark-tx2:#9CA3AF;
  --r-s:6px; --r-m:12px; --r-l:16px; --r-btn:var(--r-m);
  --sh:0 1px 2px rgba(10,10,15,.04);
  --ease:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box}
html{scroll-behavior:auto}
@media (prefers-reduced-motion:no-preference){ html{scroll-behavior:smooth} }
[id]{scroll-margin-top:90px}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:'Poppins',ui-sans-serif,system-ui,sans-serif;
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
.wrap{max-width:1180px; margin:0 auto; padding:0 28px; position:relative}
.narrow{max-width:840px}
h1,h2,h3,h4{margin:0; font-family:'Poppins',sans-serif; text-wrap:balance}
h1{letter-spacing:-.032em} h2{letter-spacing:-.024em} h3,h4{letter-spacing:-.01em}
p{margin:0; text-wrap:pretty}
a{color:inherit}
:focus-visible{outline:2px solid var(--g-dk); outline-offset:3px; border-radius:var(--r-s)}
.dk :focus-visible,.cierre :focus-visible,footer :focus-visible{outline-color:var(--g-lt)}

/* microtipografía mono — 3 tokens */
.chip{font-family:'JetBrains Mono',monospace; font-size:10px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase}
.idx{font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:500;
  letter-spacing:.08em; text-transform:uppercase}
.meta{font-family:'JetBrains Mono',monospace; font-size:12px; font-weight:400;
  letter-spacing:.06em}

/* ═══ NAV ═══ */
nav{position:fixed; top:0; left:0; right:0; z-index:70; background:rgba(250,250,248,.86);
  backdrop-filter:blur(14px); border-bottom:1px solid var(--line)}
nav .wrap{display:flex; align-items:center; justify-content:space-between; height:72px; gap:24px}
.logo{display:flex; align-items:center; gap:10px; text-decoration:none; flex-shrink:0}
.logo .mk{width:26px; height:26px; border-radius:50%; border:2px solid var(--g);
  display:grid; place-items:center; flex-shrink:0}
.logo .mk::after{content:''; width:2px; height:11px; background:var(--g);
  transform:rotate(38deg); border-radius:2px}
.logo b{font-family:'Poppins',sans-serif; font-weight:700; font-size:20px; letter-spacing:.02em}
.menu{display:flex; gap:26px; font-size:12px; color:var(--ink-2);
  text-transform:uppercase; letter-spacing:.1em; font-weight:500; align-items:center}
.menu a{text-decoration:none; position:relative; padding:4px 0; transition:color .15s ease-out}
.menu a::after{content:''; position:absolute; left:0; bottom:-2px; width:100%; height:1.5px;
  background:var(--g-dk); transform:scaleX(0); transform-origin:left;
  transition:transform .2s var(--ease)}
.menu a:hover{color:var(--g-dk)}
.menu a:hover::after{transform:scaleX(1)}
.crt{display:inline-block; font-size:11px; opacity:.55; margin-left:1px;
  transition:transform .15s ease-out}
.menu a:hover .crt{transform:translateY(2px)}
.drop{position:relative}
.drop > a{display:inline-flex; align-items:center; gap:4px}
.drop .panel{position:absolute; top:calc(100% + 12px); left:-18px; min-width:240px;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-m);
  box-shadow:0 20px 50px -20px rgba(10,10,15,.25); padding:8px; z-index:90;
  opacity:0; transform:translateY(8px); pointer-events:none;
  transition:opacity .2s var(--ease), transform .2s var(--ease)}
.drop::after{content:''; position:absolute; top:100%; left:0; right:0; height:14px}
.drop:hover .panel,.drop:focus-within .panel{opacity:1; transform:none; pointer-events:auto}
.drop:hover .crt{transform:rotate(180deg)}
.panel a{display:block; padding:10px 14px; border-radius:8px; font-size:12px;
  letter-spacing:.06em; color:var(--ink-2); text-decoration:none;
  transition:background .15s ease-out, color .15s ease-out}
.panel a::after{display:none}
.panel a:hover{background:var(--paper-2); color:var(--g-dk)}
nav.espacial .drop .panel{background:var(--dark-2); border-color:var(--dark-line);
  box-shadow:0 20px 50px -20px rgba(0,0,0,.6)}
nav.espacial .panel a{color:var(--dark-tx2)}
nav.espacial .panel a:hover{background:var(--dark-3); color:var(--g-lt)}

/* botones — primario verde de marca, un solo tratamiento */
.btn{display:inline-flex; align-items:center; gap:8px; background:var(--g-dk); color:#fff;
  padding:12px 22px; border-radius:var(--r-btn); font-weight:500; font-size:14px;
  text-decoration:none; border:1px solid var(--g-dk); white-space:nowrap;
  font-family:'Poppins',sans-serif;
  transition:background .15s ease-out,border-color .15s ease-out,transform .15s ease-out,box-shadow .15s ease-out}
.btn:hover{background:var(--g-hv); border-color:var(--g-hv); transform:translateY(-1px);
  box-shadow:0 4px 12px -4px rgba(10,10,15,.15)}
.btn:active{transform:translateY(0) scale(.98); transition-duration:.07s}
.btn.gh{background:transparent; color:var(--ink); border-color:var(--line-2)}
.btn.gh:hover{background:var(--card); border-color:var(--ink); color:var(--ink); box-shadow:none}
.btn.gh-dark{background:transparent; color:var(--dark-tx); border-color:var(--dark-line)}
.btn.gh-dark:hover{background:var(--dark-2); border-color:var(--dark-tx2); color:var(--dark-tx); box-shadow:none}

/* ═══ HERO ═══ */
.hero{padding:96px 0 80px; border-bottom:1px solid var(--line)}
.hgrid{display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:64px; align-items:center}
.tagchip{display:inline-flex; align-items:center; gap:9px; border:1px solid var(--line-2);
  border-radius:var(--r-s); padding:7px 14px 7px 11px; margin-bottom:32px; background:var(--card)}
.tagchip i{width:7px; height:7px; border-radius:50%; background:var(--g); position:relative}
.tagchip i::after{content:''; position:absolute; inset:-4px; border-radius:50%;
  border:1px solid var(--g); animation:ping 2.6s cubic-bezier(0,0,.2,1) infinite}
@keyframes ping{0%{transform:scale(.6);opacity:.9}80%,100%{transform:scale(2.2);opacity:0}}
h1{font-size:clamp(42px,6.3vw,72px); line-height:1.04; font-weight:700; max-width:17ch}
h1 b{font-weight:700}
.hero .lead{margin-top:24px; font-size:18px; color:var(--ink-2); max-width:52ch; line-height:1.6}
.odiseo{margin-top:32px; padding-left:20px; border-left:2px solid var(--g);
  font-family:'Poppins',sans-serif; font-size:22px; font-weight:500;
  letter-spacing:-.015em; max-width:38ch; line-height:1.35}
.cta-row{display:flex; gap:12px; margin-top:40px; flex-wrap:wrap; align-items:center}
.cta-note{margin-top:16px; font-size:13px; color:var(--ink-3)}

/* artefacto del hero: la IA citando a un cliente */
.ia-proof{background:var(--card); border:1px solid var(--line); border-radius:var(--r-l);
  box-shadow:var(--sh); overflow:hidden}
.ia-proof .hd{display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 18px; border-bottom:1px solid var(--line); background:var(--paper-2)}
.ia-proof .hd .chip{color:var(--ink-3)}
.ia-proof .hd .chip.ok{color:var(--g-dk)}
.ia-proof .q{padding:16px 18px 0; font-family:'JetBrains Mono',monospace; font-size:12px;
  color:var(--ink-2); line-height:1.5}
.ia-proof .q::before{content:'› '; color:var(--g-dk)}
.ia-proof .a{padding:14px 18px 18px; font-size:14px; color:var(--ink-2); line-height:1.65}
.ia-proof .cite{display:inline-flex; align-items:center; gap:5px; background:var(--g-soft);
  color:var(--g-dk); border-radius:var(--r-s); padding:1px 8px;
  font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:600; vertical-align:baseline}
.ia-proof .srcs{display:flex; gap:6px; padding:0 18px 16px; flex-wrap:wrap}
.ia-proof .srcs span{font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--ink-3);
  border:1px solid var(--line); border-radius:var(--r-s); padding:3px 8px}
.ia-proof .srcs span.on{color:var(--g-dk); border-color:var(--g); background:var(--g-soft)}
.ia-proof .ft{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding:12px 18px; border-top:1px solid var(--line); background:var(--paper-2)}
.ia-proof .ft span{font-family:'JetBrains Mono',monospace; font-size:10px;
  letter-spacing:.06em; color:var(--ink-3)}

/* ═══ LOGOS ═══ */
.logos{border-bottom:1px solid var(--line); background:var(--card); padding:32px 0; overflow:hidden}
.logos .cap{text-align:center; margin-bottom:24px; color:var(--ink-3)}
.marq{overflow:hidden; position:relative;
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marq-track{display:flex; gap:64px; width:max-content; animation:marq 32s linear infinite;
  align-items:center}
.marq:hover .marq-track{animation-play-state:paused}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.lg{font-family:'Poppins',sans-serif; font-size:19px; font-weight:600; color:var(--ink-3);
  white-space:nowrap; letter-spacing:-.01em; transition:color .15s ease-out}
.lg:hover{color:var(--ink)}
.lg small{display:block; margin-top:2px; font-family:'JetBrains Mono',monospace; font-size:10px;
  font-weight:400; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3)}

/* ═══ MÉTRICAS con atribución ═══ */
.mband{border-bottom:1px solid var(--line); background:var(--paper-2)}
.mband .wrap{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;
  padding-top:52px; padding-bottom:52px}
.metric{background:var(--card); border:1px solid var(--line); border-radius:16px;
  padding:28px 26px; box-shadow:var(--sh)}
.metric b{display:flex; align-items:center; gap:12px;
  font-family:'Poppins',sans-serif; font-size:48px; font-weight:700;
  line-height:1; color:var(--ink); letter-spacing:-.03em; font-variant-numeric:tabular-nums}
.metric b::before{content:''; width:3px; height:34px; background:var(--g);
  border-radius:2px; flex-shrink:0}
.metric span{display:block; margin-top:12px; font-size:14px; color:var(--ink-2); line-height:1.5}
.metric .src{display:block; margin-top:8px; font-family:'JetBrains Mono',monospace;
  font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3)}

/* ═══ SECCIONES ═══ */
section{padding:clamp(88px,13vh,128px) 0}
section.mayor{padding:clamp(120px,17vh,168px) 0}
section.util{padding:clamp(64px,9vh,92px) 0}
.eyebrow{font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--g-dk); margin-bottom:20px}
h2{font-size:clamp(30px,3.6vw,42px); line-height:1.14; font-weight:700; max-width:24ch}
.sub{margin-top:22px; font-size:18px; color:var(--ink-2); max-width:62ch; line-height:1.62}
h3{font-size:17px; font-weight:600}
.head-row{display:flex; justify-content:space-between; align-items:flex-end; gap:32px; flex-wrap:wrap}
.link-more{font-size:14px; color:var(--g-dk); text-decoration:none; font-weight:500;
  white-space:nowrap; border-bottom:1px solid transparent; transition:border-color .15s ease-out}
.link-more:hover{border-color:var(--g-dk)}

/* ═══ SECCIÓN OSCURA · Linear puro ═══ */
.dk{background:var(--dark); color:var(--dark-tx); position:relative; overflow:hidden}
.dk h2,.dk h3{color:var(--dark-tx)}
.dk .sub{color:var(--dark-tx2)}
.dk h2 b{color:var(--g-lt); font-weight:700}
#net{position:absolute; inset:0; width:100%; height:100%; opacity:.3; pointer-events:none;
  mask-image:linear-gradient(180deg,transparent,#000 6%,#000 94%,transparent);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 6%,#000 94%,transparent)}
.dk .wrap{z-index:2}
.dk .answer{margin-top:24px; padding:22px 26px; background:var(--dark-2);
  border:1px solid var(--dark-line); border-radius:var(--r-m); max-width:76ch}
.dk .answer p{font-size:16px; color:var(--dark-tx2); line-height:1.65}
.dk .answer strong{color:var(--dark-tx); font-weight:600}
.eng{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1px;
  background:var(--dark-line); border:1px solid var(--dark-line); border-radius:var(--r-l);
  overflow:hidden; margin-top:64px}
.eng > div{background:var(--dark-2); padding:28px 26px; transition:background .15s ease-out}
.eng > div:hover{background:var(--dark-3)}
.eng .nm{display:block; margin-bottom:14px; color:var(--g-lt)}
.eng p{margin-top:10px; font-size:14px; color:var(--dark-tx2); line-height:1.6}
.pasos{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:28px; margin-top:64px}
.paso{border-top:1px solid var(--dark-line); padding-top:20px}
.paso .n{display:block; margin-bottom:12px; color:var(--g-lt)}
.paso h3{font-size:17px; margin-bottom:8px}
.paso p{font-size:14px; color:var(--dark-tx2); line-height:1.6}

/* ═══ BANDA CTA ═══ */
.cta-band{background:var(--g-soft); border-bottom:1px solid var(--line)}
.cta-band .wrap{display:flex; align-items:center; justify-content:space-between; gap:24px;
  flex-wrap:wrap; padding-top:36px; padding-bottom:36px}
.cta-band p{font-family:'Poppins',sans-serif; font-size:18px; font-weight:500;
  letter-spacing:-.01em}

/* ═══ SERVICIOS ═══ */
.svc-main{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:var(--r-l);
  overflow:hidden; margin-top:clamp(44px,7vh,60px)}
.svc-main a{background:var(--card); padding:40px 36px; text-decoration:none; display:block;
  transition:background .15s ease-out,transform .15s ease-out}
.svc-main a:hover{background:var(--paper-2)}
.svc-main a:active{transform:scale(.995); transition-duration:.07s}
.svc-main h3{font-size:20px; margin-bottom:12px}
.svc-main p{font-size:15px; color:var(--ink-2); line-height:1.6}
.svc-main ul{list-style:none; margin:18px 0 0; padding:16px 0 0;
  border-top:1px solid var(--line); display:flex; flex-direction:column; gap:8px}
.svc-main li{font-size:14px; color:var(--ink-2); padding-left:16px; position:relative}
.svc-main li::before{content:'›'; position:absolute; left:0; color:var(--g-dk)}
.svc-main .arrow{margin-top:18px; font-size:14px; color:var(--g-dk); font-weight:500;
  display:inline-block; transition:transform .15s ease-out}
.svc-main a:hover .arrow{transform:translateX(4px)}
.svc-index{margin-top:32px; display:grid; grid-template-columns:1fr 1fr; gap:0 48px}
.svc-index a{display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:16px 4px; border-bottom:1px solid var(--line); text-decoration:none;
  transition:background .15s ease-out}
.svc-index a:hover{background:var(--paper-2)}
.svc-index h3{font-size:16px; font-weight:500}
.svc-index .arrow{font-size:14px; color:var(--g-dk); transition:transform .15s ease-out; flex-shrink:0}
.svc-index a:hover .arrow{transform:translateX(4px)}

/* ═══ INDUSTRIAS · índice tipográfico ═══ */
.ind-index{margin-top:clamp(44px,7vh,60px); display:grid; grid-template-columns:repeat(3,1fr); gap:0 48px}
.ind-index a{display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  padding:15px 4px; border-bottom:1px solid var(--line); text-decoration:none;
  transition:background .15s ease-out}
.ind-index a:hover{background:var(--card)}
.ind-index h3{font-size:16px; font-weight:500}
.ind-index .k{color:var(--ink-3); flex-shrink:0}

/* ═══ MATRIZ ═══ */
.matriz{margin-top:clamp(44px,7vh,60px); overflow-x:auto; border:1px solid var(--line);
  border-radius:var(--r-l); background:var(--card); box-shadow:var(--sh)}
.matriz table{border-collapse:collapse; width:100%; min-width:680px; font-size:14px}
.matriz th,.matriz td{padding:14px 16px; text-align:left; border-bottom:1px solid var(--line);
  border-right:1px solid var(--line)}
.matriz th:last-child,.matriz td:last-child{border-right:0}
.matriz tr:last-child td{border-bottom:0}
.matriz thead th{font-family:'JetBrains Mono',monospace; font-size:10px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); background:var(--paper-2)}
.matriz tbody th{font-weight:600; font-family:'Poppins',sans-serif; font-size:14px;
  background:var(--paper-2); white-space:nowrap}
.matriz td{color:var(--ink-2); line-height:1.5; transition:background .15s ease-out}
.matriz tbody tr:hover td{background:var(--g-soft)}

/* ═══ MÉTODO ═══ */
.metodo{display:flex; flex-direction:column; gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--r-l); overflow:hidden; margin-top:clamp(44px,7vh,60px)}
.fase{background:var(--card); padding:28px 32px; display:grid; grid-template-columns:96px 1fr;
  gap:28px; align-items:start; transition:background .15s ease-out}
.fase:hover{background:var(--paper-2)}
.fase .f{padding-top:4px; color:var(--ink-3)}
.fase h3{font-size:17px}
.fase p{margin-top:8px; font-size:15px; color:var(--ink-2); line-height:1.62; max-width:74ch}

/* ═══ RESULTADOS ═══ */
.res-hero{margin-top:clamp(44px,7vh,60px); background:var(--card); border:1px solid var(--line);
  border-radius:var(--r-l); box-shadow:var(--sh); padding:48px;
  display:grid; grid-template-columns:auto 1fr; gap:48px; align-items:center}
.res-hero .big{font-family:'Poppins',sans-serif; font-size:clamp(64px,8vw,96px);
  font-weight:700; line-height:.92; letter-spacing:-.04em; font-variant-numeric:tabular-nums;
  display:flex; align-items:center; gap:16px}
.res-hero .big::before{content:''; width:4px; height:72px; background:var(--g); border-radius:2px}
.res-hero h3{font-size:20px; margin-bottom:10px}
.res-hero p{font-size:15px; color:var(--ink-2); line-height:1.6; max-width:52ch}
.res-hero .src{display:block; margin-top:14px; color:var(--ink-3)}
.res-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:20px}
.res-card{background:var(--card); border:1px solid var(--line); border-radius:var(--r-m);
  box-shadow:var(--sh); padding:32px}
.res-card .big{font-family:'Poppins',sans-serif; font-size:44px; font-weight:700;
  line-height:1; letter-spacing:-.03em; font-variant-numeric:tabular-nums;
  display:flex; align-items:center; gap:12px}
.res-card .big::before{content:''; width:3px; height:32px; background:var(--g); border-radius:2px}
.res-card p{margin-top:14px; font-size:14px; color:var(--ink-2); line-height:1.6}
.res-card .src{display:block; margin-top:12px; color:var(--ink-3)}

/* ═══ MANIFIESTO ═══ */
.manifiesto{text-align:center}
.manifiesto .quote{font-family:'Poppins',sans-serif; font-size:clamp(34px,5vw,58px);
  font-weight:600; line-height:1.12; letter-spacing:-.028em; max-width:22ch; margin:0 auto}
.manifiesto .quote b{font-weight:700}
.manifiesto .story{margin:48px auto 0; max-width:920px; text-align:left;
  columns:2; column-gap:64px; font-size:16px; color:var(--ink-2); line-height:1.7}
.manifiesto .story p{margin-bottom:16px; break-inside:avoid}
.valores{display:grid; grid-template-columns:1fr 1fr; gap:48px 64px; margin-top:80px;
  text-align:left; max-width:920px; margin-left:auto; margin-right:auto}
.valor{border-top:2px solid var(--g); padding-top:16px}
.valor h3{font-size:17px; margin-bottom:8px}
.valor p{font-size:14px; color:var(--ink-2); line-height:1.6}

/* ═══ EQUIPO ═══ */
.team-marq{margin-top:clamp(44px,7vh,60px)}
.tm{display:flex; align-items:center; gap:16px; background:var(--card);
  border:1px solid var(--line); border-radius:var(--r-m); box-shadow:var(--sh);
  padding:18px 26px 18px 18px; white-space:nowrap}
.tm .av{width:52px; height:52px; border-radius:50%; background:var(--dark);
  color:var(--dark-tx); display:grid; place-items:center;
  font-family:'Poppins',sans-serif; font-weight:700; font-size:18px; flex-shrink:0}
.tm b{display:block; font-family:'Poppins',sans-serif; font-size:15px; font-weight:600}
.tm span{color:var(--ink-3)}

/* ═══ RECURSOS ═══ */
.rec{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:20px; margin-top:clamp(44px,7vh,60px)}
.rc{background:var(--card); border:1px solid var(--line); border-radius:var(--r-m);
  box-shadow:var(--sh); padding:28px 26px; text-decoration:none;
  display:flex; flex-direction:column; gap:12px;
  transition:background .15s ease-out,border-color .15s ease-out,transform .15s ease-out}
a.rc:hover{background:var(--paper-2); border-color:var(--line-2)}
a.rc:active{transform:scale(.995); transition-duration:.07s}
.rc .tp{color:var(--ink-3)}
.rc h3{font-size:18px; line-height:1.3}
.rc p{font-size:14px; color:var(--ink-2); line-height:1.55}
.rc .arrow{margin-top:auto; padding-top:8px; font-size:14px; color:var(--g-dk);
  font-weight:500; display:inline-block; transition:transform .15s ease-out}
a.rc:hover .arrow{transform:translateX(4px)}

/* ═══ FAQ ═══ */
.faq{margin-top:44px; border-top:1px solid var(--line)}
details{border-bottom:1px solid var(--line)}
details summary{cursor:pointer; list-style:none; padding:24px 46px 24px 0; font-size:18px;
  font-family:'Poppins',sans-serif; font-weight:500; letter-spacing:-.01em;
  position:relative; transition:color .15s ease-out}
details summary::-webkit-details-marker{display:none}
details summary:hover,details summary:active{color:var(--g-dk)}
details summary::after{content:'+'; position:absolute; right:8px; top:21px; font-size:24px;
  color:var(--g-dk); font-weight:300; line-height:1; transition:transform .3s var(--ease)}
details[open] summary::after{transform:rotate(45deg)}
details .body{padding:0 0 26px; max-width:78ch}
details p{color:var(--ink-2); font-size:16px; line-height:1.68}
details p + p{margin-top:13px}
@supports (interpolate-size:allow-keywords){
  :root{interpolate-size:allow-keywords}
  details::details-content{block-size:0; overflow-y:clip;
    transition:block-size .35s var(--ease), content-visibility .35s allow-discrete}
  details[open]::details-content{block-size:auto}
}

/* ═══ CIERRE ═══ */
.cierre{background:var(--dark); color:var(--dark-tx); padding:128px 0; text-align:center}
.cierre h2{color:var(--dark-tx); font-size:clamp(38px,5vw,58px); letter-spacing:-.028em;
  max-width:16ch; margin:0 auto}
.cierre h2 b{color:var(--g-lt); font-weight:700}
.cierre-line{margin-top:18px; font-family:'Poppins',sans-serif; font-size:24px;
  font-weight:500; letter-spacing:-.015em; color:var(--dark-tx)}
.cierre .sub{color:var(--dark-tx2); margin:16px auto 0; text-align:center}
.cierre .cta-row{justify-content:center}

/* ═══ FOOTER ═══ */
footer{background:var(--dark); color:var(--dark-tx2); padding:0 0 46px; font-size:14px}
footer .wrap{border-top:1px solid var(--dark-line); padding-top:64px}
.f-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr 1fr; gap:40px; margin-bottom:48px}
.f-grid h3{margin:0 0 18px; color:var(--dark-tx); font-size:inherit}
.f-grid ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px}
.f-grid a{text-decoration:none; transition:color .15s ease-out}
.f-grid a:hover{color:var(--g-lt)}
.f-grid .logo b{color:var(--dark-tx)}
.f-ubi{display:flex; gap:28px; flex-wrap:wrap; padding:22px 0; border-top:1px solid var(--dark-line)}
.f-ubi span:first-child{color:var(--dark-tx)}
.f-ubi a{text-decoration:none; transition:color .15s ease-out}
.f-ubi a:hover{color:var(--g-lt)}
.f-ubi .sp{margin-left:auto}
.f-bot{display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  padding-top:24px; border-top:1px solid var(--dark-line)}
.credito{display:inline-flex; align-items:center; gap:9px; color:var(--dark-tx2);
  text-decoration:none; transition:color .2s}
.credito:hover{color:var(--g-lt)}
.credito svg{fill:#F2F7F3; flex-shrink:0}


/* ═══ CAPA CINEMATOGRÁFICA ═══ */
#carga{position:fixed; inset:0; z-index:300; background:var(--dark);
  display:flex; flex-direction:column; justify-content:space-between;
  padding:clamp(24px,4vw,48px); transition:transform .9s cubic-bezier(.77,0,.18,1) .1s}
#carga.fuera{transform:translateY(-101%); pointer-events:none; visibility:hidden;
  transition:transform .9s cubic-bezier(.77,0,.18,1) .1s, visibility 0s 1.1s}
#carga .arriba{display:flex; justify-content:space-between; gap:16px;
  font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--dark-tx2)}
#carga .num{font-family:'Poppins',sans-serif; font-size:clamp(72px,16vw,190px);
  font-weight:800; line-height:.85; color:var(--dark-tx); letter-spacing:-.04em;
  font-variant-numeric:tabular-nums; align-self:flex-end}
#carga .num i{font-style:normal; color:var(--g-lt)}
html:not(.js) #carga{display:none}
@media (prefers-reduced-motion:reduce){ #carga{display:none} }

.velo-grano{position:fixed; inset:0; z-index:60; pointer-events:none; opacity:.35;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.85' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .03 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E")}

@media (pointer:fine){
  .cur-d{position:fixed; top:0; left:0; width:8px; height:8px; border-radius:50%;
    background:#fff; mix-blend-mode:difference; z-index:250; pointer-events:none;
    transform:translate(-50%,-50%)}
  .cur-o{position:fixed; top:0; left:0; width:36px; height:36px; border-radius:50%;
    border:1.5px solid #fff; mix-blend-mode:difference; z-index:249; pointer-events:none;
    transform:translate(-50%,-50%); transition:width .3s var(--ease),height .3s var(--ease)}
  .cur-o.gr{width:68px; height:68px}
.cur-o::after{content:''; position:absolute; left:82%; top:82%; width:10px;
    height:1.5px; background:#fff; border-radius:2px; transform:rotate(45deg);
    transform-origin:left center; transition:width .3s var(--ease)}
.cur-o.gr::after{width:15px}
}
@media (prefers-reduced-motion:reduce),(pointer:coarse){ .cur-d,.cur-o{display:none} }

/* entrada del hero tras el telón */
.js .hero .hgrid > *{opacity:0; transform:translateY(28px);
  transition:opacity .9s var(--ease), transform .9s var(--ease)}
.js .hero .hgrid > *:nth-child(2){transition-delay:.15s}
.js.lanzado .hero .hgrid > *{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  .js .hero .hgrid > *{opacity:1; transform:none; transition:none}
}

/* manifiesto palabra por palabra */
.manifiesto .quote .w{display:inline-block; overflow:hidden; vertical-align:top;
  padding-bottom:.12em; margin-bottom:-.12em}
.manifiesto .quote .w i{display:inline-block; font-style:normal; transform:translateY(112%);
  transition:transform .7s cubic-bezier(.77,0,.18,1)}
.manifiesto .quote.va .w i{transform:none}
html:not(.js) .manifiesto .quote .w i{transform:none}
@media (prefers-reduced-motion:reduce){ .manifiesto .quote .w i{transform:none !important} }

/* hover-fill verde en los índices (tipo estudio) */
.svc-index a,.ind-index a{position:relative; isolation:isolate; overflow:hidden}
.svc-index a::before,.ind-index a::before{content:''; position:absolute; inset:0;
  background:var(--g-dk); transform:scaleY(0); transform-origin:bottom;
  transition:transform .35s var(--ease); z-index:-1}
@media (hover:hover){
  .svc-index a:hover::before,.ind-index a:hover::before{transform:scaleY(1)}
  .svc-index a:hover,.ind-index a:hover{background:transparent}
  .svc-index a:hover h3,.ind-index a:hover h3,
  .svc-index a:hover .arrow{color:#fff}
  .ind-index a:hover .k{color:rgba(255,255,255,.75)}
  .svc-index a:hover{padding-left:14px} .ind-index a:hover{padding-left:14px}
  .svc-index a,.ind-index a{transition:background .15s ease-out, padding-left .35s var(--ease)}
}

/* botones magnéticos */
[data-mag]{will-change:transform}

/* ═══ EL MAPA DE RUTAS (diagrama radial propio) ═══ */
.ruta-cabeceras{display:flex; justify-content:space-between; gap:20px; margin-bottom:8px}
.ruta-cabeceras span{font-family:'JetBrains Mono',monospace; font-size:10px; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3)}
.lienzo{position:relative; display:grid; grid-template-columns:1fr minmax(280px,360px) 1fr;
  gap:0 12px; align-items:center; margin-top:24px}
#rutasvg{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible}
#rutasvg path{fill:none; stroke:var(--g); stroke-width:1.5; stroke-dasharray:2 7;
  stroke-linecap:round; opacity:.55}
@media (prefers-reduced-motion:no-preference){
  #rutasvg path{animation:corriente 1.6s linear infinite}
  @keyframes corriente{to{stroke-dashoffset:-18}}
  #rutasvg circle{opacity:.9}
}
@media (prefers-reduced-motion:reduce){ #rutasvg circle{display:none} }
.lado{display:flex; flex-direction:column; gap:14px; position:relative; z-index:2}
.itemR{display:flex; align-items:center; gap:14px; background:var(--card);
  border:1px solid var(--line); border-radius:var(--r-m); box-shadow:var(--sh);
  padding:13px 16px; transition:transform .25s var(--ease), border-color .25s}
.itemR:hover{transform:translateY(-3px); border-color:var(--g)}
.lado.der .itemR{flex-direction:row-reverse; text-align:right}
.itemR .ib{width:38px; height:38px; border-radius:50%; flex-shrink:0;
  border:1.5px solid var(--g-dk); display:grid; place-items:center; background:var(--g-soft)}
.lado.der .itemR .ib{border-color:var(--ink-2); background:var(--paper-2)}
.itemR .ib svg{width:18px; height:18px; stroke:var(--g-dk); fill:none;
  stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.lado.der .itemR .ib svg{stroke:var(--ink)}
.itemR b{display:block; font-family:'Poppins',sans-serif; font-weight:700; font-size:14.5px;
  letter-spacing:-.01em}
.itemR span{display:block; font-size:12px; color:var(--ink-3); line-height:1.35}
.disco{position:relative; z-index:2; aspect-ratio:1; border-radius:50%;
  background:var(--card); border:1px solid var(--line); box-shadow:0 30px 70px -40px rgba(10,10,15,.35);
  display:grid; place-items:center; margin:34px auto; width:min(100%,330px)}
.disco .anillo{position:absolute; inset:-30px}
@media (prefers-reduced-motion:no-preference){
  .disco .anillo{animation:girar 30s linear infinite}
  @keyframes girar{to{transform:rotate(360deg)}}
}
.disco .anillo text{font-family:'JetBrains Mono',monospace; font-size:9.2px;
  letter-spacing:.32em; text-transform:uppercase; fill:var(--ink-3); font-weight:500}
.disco .nucleo{text-align:center; padding:26px}
.disco .aguja{width:44px; height:44px; border-radius:50%; border:2.5px solid var(--g);
  margin:0 auto 14px; display:grid; place-items:center; position:relative}
.disco .aguja::after{content:''; width:3px; height:19px; background:var(--g);
  transform:rotate(38deg); border-radius:2px}
.disco .nucleo b{display:block; font-family:'Poppins',sans-serif; font-weight:800;
  font-size:18px; letter-spacing:-.02em}
.disco .nucleo em{font-style:italic; color:var(--ink-2); font-size:15px}
.disco .nucleo .mini{margin-top:12px; font-family:'JetBrains Mono',monospace;
  font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--g-dk)}
@media (max-width:940px){
  .lienzo{grid-template-columns:1fr}
  #rutasvg{display:none}
  .ruta-cabeceras{display:none}
  .lado.der .itemR{flex-direction:row; text-align:left}
  .lado.der .itemR .ib{order:0}
  .disco{margin:28px auto}
}


/* ═══ HERO ESPACIAL · la carta de navegación ═══ */
.hero{background:var(--dark); color:var(--dark-tx); min-height:100svh;
  display:flex; flex-direction:column; position:relative; overflow:hidden;
  border-bottom:1px solid var(--dark-line); padding:110px 0 34px}
#cielo{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; opacity:.85}
.hero .wrap{display:flex; flex-direction:column; flex:1; z-index:2}
.hero .coord{display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
  font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.2em;
  text-transform:uppercase; color:#5F7168}
.hero .coord b{color:var(--dark-tx2); font-weight:500}
.hero .centro{flex:1; display:flex; flex-direction:column; justify-content:center;
  align-items:flex-start; text-align:left; padding:34px 0}
.titan{font-family:'Archivo Black','Poppins',sans-serif; font-weight:400; letter-spacing:-.01em;
  font-size:clamp(44px,9.6vw,132px); line-height:.92; flex-direction:column; align-items:flex-start; color:var(--dark-tx);
  user-select:none; display:flex}
.titan .fila1{display:flex}
.titan .fila2{display:flex}
.titan .tapa{overflow:hidden; display:inline-block; padding-bottom:.06em; margin-bottom:-.06em}
.titan i{display:inline-block; font-style:normal; transform:translateY(112%);
  transition:transform 1s cubic-bezier(.77,0,.18,1)}
.titan .tapa:nth-child(2) i{transition-delay:.05s}
.titan .tapa:nth-child(3) i{transition-delay:.1s}
.titan .tapa:nth-child(4) i{transition-delay:.15s}
.titan .tapa:nth-child(5) i{transition-delay:.2s}
.titan .tapa:nth-child(6) i{transition-delay:.25s}
.titan .tapa:nth-child(7) i{transition-delay:.3s}
.titan .fila2 .tapa:nth-child(1) i{transition-delay:.4s}
.titan .fila2 .tapa:nth-child(2) i{transition-delay:.46s}
.titan .fila2 .tapa:nth-child(3) i{transition-delay:.52s}
.titan .fila2 .tapa:nth-child(4) i{transition-delay:.58s; color:var(--g-lt)}
.js.lanzado .titan i{transform:none}
html:not(.js) .titan i{transform:none}
.bajo-grid{display:grid; grid-template-columns:1.1fr auto; align-items:end;
  gap:40px; width:100%; margin-top:clamp(30px,5vh,54px)}
.cta-col{display:flex; flex-direction:column; align-items:flex-end; gap:6px; text-align:right}
.cta-col .cta-row{margin-top:14px; justify-content:flex-end}
@media (max-width:860px){
  .bajo-grid{grid-template-columns:1fr; gap:26px}
  .cta-col{align-items:flex-start; text-align:left}
  .cta-col .cta-row{justify-content:flex-start}
}
.hero .sub-hero{font-family:'Poppins',sans-serif; font-weight:400; letter-spacing:0;
  font-size:clamp(15px,1.6vw,19px); line-height:1.6; color:var(--dark-tx2);
  max-width:40ch; margin:0; text-wrap:pretty}
.hero .sub-hero strong{color:var(--dark-tx); font-weight:600}
.mani-hero{margin:0; font-family:'Poppins',sans-serif; font-weight:600;
  letter-spacing:-.015em; font-size:clamp(15px,1.8vw,20px); color:var(--dark-tx2)}
.mani-hero b{color:var(--g-lt); font-weight:700}
.hero .cta-row{margin-top:0}
.hero .cta-note{margin-top:10px; font-size:12px; color:#5F7168}
.hero .abajo{display:flex; justify-content:space-between; align-items:flex-end; gap:14px;
  font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.2em;
  text-transform:uppercase; color:#5F7168}
.hero .lin{width:1px; height:40px; background:var(--dark-line); position:relative;
  overflow:hidden; margin:0 auto}
.hero .lin::after{content:''; position:absolute; left:0; top:-50%; width:100%; height:50%;
  background:var(--g-lt); animation:gotea 2s var(--ease) infinite}
@keyframes gotea{to{top:110%}}
.hero .navega{display:flex; flex-direction:column; align-items:center; gap:8px}
/* entrada tras el telón */
.js .hero .centro > *:not(.titan){opacity:0; transform:translateY(22px);
  transition:opacity .8s var(--ease) .5s, transform .8s var(--ease) .5s}
.js.lanzado .hero .centro > *:not(.titan){opacity:1; transform:none}
/* nav transparente sobre el hero */
nav.espacial{background:transparent; border-bottom-color:transparent; backdrop-filter:none}
nav.espacial.sdk{background:rgba(8,9,10,.85); border-bottom-color:var(--dark-line); backdrop-filter:blur(14px)}
nav.espacial .logo b{color:var(--dark-tx)}
nav.espacial .logo .mk{border-color:var(--g-lt)}
nav.espacial .logo .mk::after{background:var(--g-lt)}
nav.espacial .menu{color:var(--dark-tx2)}
nav.espacial .menu a:hover{color:var(--g-lt)}
nav.espacial .menu a::after{background:var(--g-lt)}
@media (prefers-reduced-motion:reduce){
  .titan i{transform:none !important}
  .js .hero .centro > *:not(.titan){opacity:1; transform:none; transition:none}
  #cielo{display:none}
  .hero .lin::after{animation:none}
}
@media (max-width:640px){
  .hero{padding:96px 0 24px}
  .hero .coord span:nth-child(2){display:none}
}

/* ═══ HERO ESTILO STAFF · resaltador verde ═══ */
.hero .centro{align-items:center; text-align:center}
.staff-h{font-family:'Poppins',sans-serif; font-weight:700; letter-spacing:-.03em;
  font-size:clamp(28px,4.5vw,60px); line-height:1.26; color:var(--dark-tx); max-width:22ch}
.staff-h .ln{display:block; overflow:hidden; padding-bottom:.06em; margin-bottom:-.06em}
.staff-h .ln i{display:block; font-style:normal; transform:translateY(110%);
  transition:transform .9s cubic-bezier(.77,0,.18,1)}
.staff-h .ln:nth-child(2) i{transition-delay:.1s}
.staff-h .ln:nth-child(3) i{transition-delay:.2s}
.js.lanzado .staff-h .ln i{transform:none}
html:not(.js) .staff-h .ln i{transform:none}
.hl{display:inline; background:var(--g); color:var(--dark);
  padding:.06em .2em .09em; border-radius:.18em; box-decoration-break:clone;
  -webkit-box-decoration-break:clone}
.hero .sub-hero{max-width:52ch; margin:26px auto 0; text-align:center}
.hero .cta-row{margin-top:34px; justify-content:center}
.hero .cta-note{text-align:center}
.rueda{position:absolute; right:clamp(18px,3vw,44px); bottom:14px; width:94px;
  height:94px; z-index:3; pointer-events:none}
@media (max-width:900px), (max-height:640px){ .rueda{display:none} }
.rueda svg{width:100%; height:100%; overflow:visible}
.rueda text{font-family:'JetBrains Mono',monospace; font-size:10.5px;
  letter-spacing:.3em; text-transform:uppercase; fill:var(--dark-tx2)}
.rueda .flecha{position:absolute; inset:0; display:grid; place-items:center;
  font-size:22px; color:var(--g-lt)}
@media (prefers-reduced-motion:no-preference){
  .rueda svg{animation:girar 16s linear infinite}
}
@media (max-width:860px){ .rueda{display:none} }
@media (prefers-reduced-motion:reduce){ .staff-h .ln i{transform:none !important} }

/* ═══ IMPACTO: nebulosas + título vivo ═══ */
.nebu{position:absolute; border-radius:50%; filter:blur(90px); pointer-events:none; z-index:0}
.nebu.n1{width:56vw; height:56vw; left:-16vw; top:-12vw;
  background:radial-gradient(circle, rgba(23,146,74,.21), transparent 65%)}
.nebu.n2{width:48vw; height:48vw; right:-14vw; bottom:-16vw;
  background:radial-gradient(circle, rgba(61,213,116,.13), transparent 65%)}
@media (prefers-reduced-motion:no-preference){
  .nebu.n1{animation:nebular 16s ease-in-out infinite}
  .nebu.n2{animation:nebular 20s ease-in-out infinite reverse}
  @keyframes nebular{0%,100%{transform:translate(0,0) scale(1); opacity:.9}
    50%{transform:translate(4vw,2vw) scale(1.12); opacity:1}}
}
.titan{position:relative; will-change:transform}
.titan i{background:linear-gradient(100deg, var(--dark-tx) 42%, #BFF5D2 50%, var(--dark-tx) 58%);
  background-size:280% 100%; background-position:120% 0;
  -webkit-background-clip:text; background-clip:text; color:transparent}
.titan .fila2 .tapa:nth-child(4) i{background:none; color:var(--g-lt);
  text-shadow:0 0 42px rgba(61,213,116,.65)}
@media (prefers-reduced-motion:no-preference){
  .js.lanzado .titan i{animation:destello 5.5s var(--ease) 1.4s infinite}
  @keyframes destello{0%{background-position:120% 0}
    14%{background-position:-60% 0}
    100%{background-position:-60% 0}}
}
.hero .centro{will-change:transform}
@media (prefers-reduced-motion:reduce){
  .nebu{animation:none}
  .titan i{background:none; color:var(--dark-tx)}
}

/* ═══ MAPA NOCTURNO · carta de navegación ═══ */
.mapa-dk{background:var(--dark); border-top:1px solid var(--dark-line);
  border-bottom:1px solid var(--dark-line); position:relative; overflow:hidden}
.mapa-dk .eyebrow{color:var(--g-lt)}
.mapa-dk h2{color:var(--dark-tx)}
.mapa-dk .sub{color:var(--dark-tx2)}
.mapa-dk .ruta-cabeceras span{color:var(--dark-tx2)}
.mapa-dk .lienzo::before{content:''; position:absolute; inset:-60px; pointer-events:none;
  background:repeating-radial-gradient(circle at 50% 50%, transparent 0 88px,
  rgba(233,243,236,.045) 88px 89px)}
.mapa-dk .itemR{background:var(--dark-2); border-color:var(--dark-line); box-shadow:none}
.mapa-dk .itemR:hover{border-color:var(--g-lt); background:var(--dark-3)}
.mapa-dk .itemR b{color:var(--dark-tx)}
.mapa-dk .itemR span span{color:var(--dark-tx2)}
.mapa-dk .itemR .ib{background:rgba(61,213,116,.08); border-color:var(--g-lt)}
.mapa-dk .itemR .ib svg{stroke:var(--g-lt)}
.mapa-dk .lado.der .itemR .ib{background:var(--dark-3); border-color:var(--dark-tx2)}
.mapa-dk .lado.der .itemR .ib svg{stroke:var(--dark-tx)}
.mapa-dk #rutasvg path{stroke:var(--g-lt); opacity:.38;
  filter:drop-shadow(0 0 5px rgba(61,213,116,.55))}
.mapa-dk #rutasvg circle{fill:var(--g-lt)}
.mapa-dk .disco{background:var(--dark-2); border-color:var(--dark-line);
  box-shadow:0 0 110px -20px rgba(61,213,116,.22), inset 0 0 60px rgba(0,0,0,.5)}
.mapa-dk .disco .anillo text{fill:var(--dark-tx2)}
.mapa-dk .nucleo{position:relative; z-index:3}
.mapa-dk .nucleo b{color:var(--dark-tx)}
.mapa-dk .nucleo em{color:var(--dark-tx2)}
.mapa-dk .nucleo .mini{color:var(--g-lt)}
.mapa-dk .disco .aguja{border-color:var(--g-lt); box-shadow:0 0 20px rgba(61,213,116,.4)}
.mapa-dk .disco .aguja::after{background:var(--g-lt)}
.barrido{position:absolute; inset:0; border-radius:50%; overflow:hidden; z-index:1;
  pointer-events:none}
.barrido::before{content:''; position:absolute; inset:0;
  background:conic-gradient(from 0deg, rgba(61,213,116,.3), rgba(61,213,116,.06) 55deg,
  transparent 80deg)}
@media (prefers-reduced-motion:no-preference){
  .barrido::before{animation:girar 6s linear infinite}
  .mapa-dk .lado.der .itemR .ib{animation:eco 6s ease-out infinite}
  .mapa-dk .lado.der .itemR:nth-child(1) .ib{animation-delay:.2s}
  .mapa-dk .lado.der .itemR:nth-child(2) .ib{animation-delay:1.2s}
  .mapa-dk .lado.der .itemR:nth-child(3) .ib{animation-delay:2.2s}
  .mapa-dk .lado.der .itemR:nth-child(4) .ib{animation-delay:3.2s}
  .mapa-dk .lado.der .itemR:nth-child(5) .ib{animation-delay:4.2s}
  .mapa-dk .lado.der .itemR:nth-child(6) .ib{animation-delay:5.2s}
  @keyframes eco{0%{box-shadow:0 0 0 0 rgba(61,213,116,.55)}
    10%{box-shadow:0 0 0 12px rgba(61,213,116,0)}
    100%{box-shadow:0 0 0 0 rgba(61,213,116,0)}}
}
@media (prefers-reduced-motion:reduce){ .barrido{display:none} }


/* ═══ MAPA · pulido PRO ═══ */
.mapa-dk .lienzo{grid-template-columns:1fr minmax(280px,320px) 1fr; gap:0 52px}
.mapa-dk .lienzo::before{background:repeating-radial-gradient(circle at 50% 50%,
  transparent 0 118px, rgba(233,243,236,.035) 118px 119px)}
.mapa-dk .itemR,.mapa-dk .lado.der .itemR{background:transparent; border:0; border-radius:0;
  box-shadow:none; padding:17px 6px; border-bottom:1px solid var(--dark-line); gap:16px}
.mapa-dk .lado .itemR:first-child{border-top:1px solid var(--dark-line)}
.mapa-dk .itemR:hover{background:transparent; transform:translateX(6px); border-color:var(--dark-line)}
.mapa-dk .lado.der .itemR:hover{transform:translateX(-6px)}
.mapa-dk .itemR:hover b{color:var(--g-lt)}
.mapa-dk .itemR .ib,.mapa-dk .lado.der .itemR .ib{width:34px; height:34px;
  background:transparent; border-width:1px}
.mapa-dk .disco{width:min(100%,300px); border-color:rgba(233,243,236,.12);
  box-shadow:0 0 130px -30px rgba(61,213,116,.28)}
.mapa-dk .disco .anillo{inset:-34px}
.mapa-dk .disco .anillo text{font-size:8.6px; letter-spacing:.44em; fill:var(--tx-3, #5F7168);
  fill:rgba(157,179,166,.75)}
.mapa-dk .nucleo .mini{display:block; margin-top:14px}
.barrido::before{background:conic-gradient(from 0deg, rgba(61,213,116,.17),
  rgba(61,213,116,.04) 45deg, transparent 72deg); filter:blur(7px)}
.rosa{width:42px; height:42px; display:block; margin:0 auto 12px;
  filter:drop-shadow(0 0 14px rgba(61,213,116,.65))}
@media (prefers-reduced-motion:no-preference){
  .rosa{animation:rosaPulsa 4s ease-in-out infinite}
  @keyframes rosaPulsa{0%,100%{filter:drop-shadow(0 0 8px rgba(61,213,116,.4))}
    50%{filter:drop-shadow(0 0 20px rgba(61,213,116,.85))}}
}


/* ═══ CASO DESTACADO (Marcela) ═══ */
.caso-dest{margin-top:clamp(44px,7vh,60px); background:var(--card); border:1px solid var(--line);
  border-radius:var(--r-l); box-shadow:var(--sh); padding:clamp(28px,4vw,48px);
  display:grid; grid-template-columns:1fr 1.15fr; gap:clamp(28px,4vw,56px); align-items:center}
@media (max-width:900px){ .caso-dest{grid-template-columns:1fr} }
.caso-dest .etq{font-family:'JetBrains Mono',monospace; font-size:10px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--g-dk); margin-bottom:16px;
  display:block}
.caso-dest h3{font-family:'Poppins',sans-serif; font-size:clamp(22px,2.4vw,30px);
  font-weight:700; letter-spacing:-.02em; line-height:1.15; margin-bottom:16px}
.caso-dest .gran{font-family:'Poppins',sans-serif; font-weight:800;
  font-size:clamp(44px,5vw,64px); letter-spacing:-.035em; line-height:1; color:var(--ink);
  display:flex; align-items:center; gap:14px; margin-bottom:16px}
.caso-dest .gran::before{content:''; width:4px; height:46px; background:var(--g); border-radius:2px}
.caso-dest .gran small{font-family:'Poppins',sans-serif; font-weight:400; font-size:15px;
  letter-spacing:0; color:var(--ink-2); max-width:16ch; line-height:1.35}
.caso-dest p{font-size:15px; color:var(--ink-2); line-height:1.65; max-width:46ch}
.caso-dest .ctags{display:flex; gap:7px; flex-wrap:wrap; margin-top:20px}
.caso-dest .ctags span{font-family:'JetBrains Mono',monospace; font-size:10px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--g-dk);
  border:1px solid var(--g); border-radius:100px; padding:5px 12px; background:var(--g-soft)}
.caso-dest .ctags span.n{color:var(--ink-2); border-color:var(--line-2); background:var(--paper-2)}
.ch-panel{background:var(--paper-2); border:1px solid var(--line); border-radius:var(--r-m);
  padding:22px 22px 16px}
.ch-panel .ch-head{display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap;
  font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:14px}
.ch-panel .ch-head b{color:var(--g-dk); font-weight:600}
.ch-panel .viz2{width:100%}
.ch-panel svg{width:100%; height:auto; overflow:visible; display:block}

/* ═══ MENÚ HAMBURGUESA ═══ */
.burger{display:flex; align-items:center; gap:11px; padding:10px 6px;
  background:none; border:0; cursor:pointer; z-index:95; border-radius:8px}
.burger .mtx{font-family:'Poppins',sans-serif; font-size:13.5px; font-weight:700;
  letter-spacing:.08em; color:var(--ink); transition:color .2s}
nav.espacial .burger .mtx{color:var(--dark-tx)}
html.menu-abierto .burger .mtx{display:none}
.burger .rayas{display:flex; flex-direction:column; gap:6px; align-items:flex-end}
.burger .rayas span{display:block; width:25px; height:2.5px; border-radius:2px; background:var(--ink);
  transition:transform .3s var(--ease), width .3s var(--ease), height .3s var(--ease), background .2s}
.burger .rayas span:nth-child(1){width:15px}
.burger:hover .rayas span:nth-child(1){width:25px}
nav.espacial .burger .rayas span{background:var(--dark-tx)}
html.menu-abierto .burger .rayas span{background:var(--dark-tx)}
html.menu-abierto .burger .rayas span{height:1.5px}
html.menu-abierto .burger .rayas span:nth-child(1){width:25px; transform:translateY(3.75px) rotate(45deg)}
html.menu-abierto .burger .rayas span:nth-child(2){transform:translateY(-3.75px) rotate(-45deg)}
#velomenu{position:fixed; inset:0; z-index:80; background:var(--dark);
  display:flex; flex-direction:column; justify-content:center;
  padding:96px clamp(26px,6vw,110px) 40px;
  opacity:0; pointer-events:none; transition:opacity .35s var(--ease)}
html.menu-abierto #velomenu{opacity:1; pointer-events:auto}
html.menu-abierto{overflow:hidden}
.velo-grid{display:grid; grid-template-columns:1.15fr .9fr; gap:clamp(36px,5.5vw,96px);
  width:100%; max-width:1240px; margin:0 auto; align-items:center}
.vlinks{display:flex; flex-direction:column}
/* el marcador: fila con número, texto que se pinta y dato */
#velomenu a.item{display:flex; align-items:baseline; gap:clamp(14px,2vw,24px);
  padding:clamp(12px,1.9vh,17px) 6px; border-bottom:1px solid var(--dark-line);
  text-decoration:none; opacity:0; transform:translateY(16px);
  transition:opacity .45s var(--ease), transform .45s var(--ease)}
#velomenu a.item:first-child{border-top:1px solid var(--dark-line)}
#velomenu a.item u{font-family:'JetBrains Mono',monospace; font-size:11px; color:#5F7168;
  text-decoration:none; letter-spacing:.12em; flex-shrink:0; transition:color .25s}
#velomenu a.item b{font-family:'Poppins',sans-serif; font-weight:800;
  text-transform:uppercase; letter-spacing:.01em; font-size:clamp(21px,2.6vw,36px);
  line-height:1.15; color:var(--dark-tx);
  background:linear-gradient(var(--g),var(--g)) no-repeat left 58% / 0% 78%;
  padding:.03em .14em; margin-left:-.14em; border-radius:.13em;
  transition:background-size .38s var(--ease), color .22s ease .06s}
#velomenu a.item i{font-style:normal; font-family:'JetBrains Mono',monospace;
  font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--g-lt);
  margin-left:auto; flex-shrink:0; opacity:0; transform:translateX(10px);
  transition:opacity .3s, transform .3s var(--ease)}
#velomenu a.item:hover b,#velomenu a.item:focus-visible b{background-size:100% 78%; color:var(--dark)}
#velomenu a.item:hover u{color:var(--g-lt)}
#velomenu a.item:hover i,#velomenu a.item:focus-visible i{opacity:1; transform:none}
html.menu-abierto #velomenu a.item{opacity:1; transform:none}
html.menu-abierto #velomenu a.item:nth-child(2){transition-delay:.06s}
html.menu-abierto #velomenu a.item:nth-child(3){transition-delay:.12s}
html.menu-abierto #velomenu a.item:nth-child(4){transition-delay:.18s}
html.menu-abierto #velomenu a.item:nth-child(5){transition-delay:.24s}
html.menu-abierto #velomenu a.item:nth-child(6){transition-delay:.3s}
html.menu-abierto #velomenu a.item:nth-child(7){transition-delay:.36s}
/* el buscador: la tarjeta que responde */
.vpanel{background:var(--card); border:1px solid var(--dark-line); border-radius:18px;
  padding:clamp(20px,2.4vw,28px); display:flex; flex-direction:column;
  opacity:0; transform:translateY(20px);
  transition:opacity .5s var(--ease) .22s, transform .5s var(--ease) .22s}
html.menu-abierto .vpanel{opacity:1; transform:none}
.vp-busca{display:flex; align-items:center; gap:12px; background:#0A0F0C;
  border:1px solid #24352B; border-radius:999px; padding:13px 19px;
  font-family:'Poppins',sans-serif; font-size:13px; font-weight:500;
  color:var(--dark-tx)}
.vp-busca svg{flex-shrink:0}
.vp-caret{width:1.5px; height:16px; background:var(--g-lt); flex-shrink:0}
@media (prefers-reduced-motion:no-preference){
  .vp-caret{animation:parpadeo 1.05s steps(2) infinite}
  @keyframes parpadeo{50%{opacity:0}}
}
.vp-sugs{display:flex; flex-direction:column; margin-top:12px}
.vp-sug{display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:12px;
  color:var(--dark-tx2); font-size:14px; font-weight:500; text-decoration:none;
  transition:background .2s, color .2s}
.vp-sug svg{flex-shrink:0}
.vp-sug svg circle,.vp-sug svg line{stroke:#5F7168; transition:stroke .2s}
.vp-sug:hover{background:#14201A; color:var(--dark-tx)}
.vp-sug:hover svg circle,.vp-sug:hover svg line{stroke:var(--g-lt)}
.vp-motores{display:flex; gap:8px; flex-wrap:wrap; margin-top:14px;
  padding-top:14px; border-top:1px solid var(--dark-line)}
.vp-motores span{font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:.16em;
  text-transform:uppercase; color:#5F7168; border:1px solid var(--dark-line);
  border-radius:999px; padding:6px 12px}
.vp-wsp{display:flex; justify-content:space-between; align-items:center; gap:12px;
  background:var(--g-lt); color:var(--dark); font-weight:700; font-size:14.5px;
  text-decoration:none; border-radius:13px; padding:15px 20px; margin-top:14px;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease)}
.vp-wsp:hover{transform:translateY(-2px); box-shadow:0 14px 34px rgba(61,213,116,.22)}
.vp-wsp i{font-style:normal}
.vp-mailito{margin-top:12px; text-align:center; font-size:13px; color:var(--dark-tx2);
  text-decoration:none; transition:color .2s}
.vp-mailito:hover{color:var(--g-lt)}
.vp-busca input{background:none; border:0; outline:none; padding:0; min-width:2ch;
  color:var(--dark-tx); font:500 13px 'Poppins',sans-serif}
.vp-busca input::placeholder{color:var(--dark-tx); opacity:1}
.vp-busca.activo input{flex:1; width:auto !important}
.vp-busca:focus-within{border-color:var(--g)}
.vp-busca:focus-within .vp-caret,.vp-busca.activo .vp-caret{display:none}
.vp-preg{display:flex; align-items:center; gap:8px; margin-top:10px; padding:12px 14px;
  border:1px dashed var(--g); border-radius:12px; color:var(--g-lt); font-size:13.5px;
  font-weight:600; text-decoration:none; transition:background .2s}
.vp-preg b{color:var(--dark-tx); font-weight:600; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; max-width:22ch}
.vp-preg:hover{background:#0F1B13}
.vp-res{display:flex; flex-direction:column; margin-top:12px}
.vp-res:empty{display:none; margin:0}
.vp-error{margin-top:12px; padding:12px 14px; border:1px dashed #24352B; border-radius:12px;
  color:var(--dark-tx2); font-size:13px; line-height:1.55}
.vp-error b{color:var(--dark-tx)}
.oculto{display:none !important}

.busca-bar{flex:1; max-width:420px; display:flex; align-items:center; gap:10px;
  background:#0A0F0C; border:1px solid #24352B; border-radius:999px; padding:10px 16px;
  cursor:pointer; transition:border-color .25s, opacity .25s var(--ease)}
.busca-bar:hover{border-color:var(--g)}
.busca-bar svg{flex-shrink:0}
.busca-bar{position:relative}
.busca-bar input{background:none; border:0; outline:none; padding:0; min-width:2ch;
  color:var(--dark-tx); font:500 12.5px 'Poppins',sans-serif}
.busca-bar input::placeholder{color:var(--dark-tx); opacity:1}
.busca-bar.activo input{flex:1; width:auto !important}
.busca-bar:focus-within{border-color:var(--g)}
.busca-bar:focus-within .busca-caret,.busca-bar.activo .busca-caret{display:none}
.bar-drop{position:absolute; top:calc(100% + 10px); left:0; right:0; z-index:96;
  background:var(--card); border:1px solid var(--dark-line); border-radius:14px;
  padding:8px; box-shadow:0 20px 50px rgba(0,0,0,.5); display:none; cursor:default}
.bar-drop .vp-error{margin-top:0}
.bar-drop .vp-preg{margin-top:6px}
html.menu-abierto .bar-drop{display:none !important}
.busca-caret{width:1.5px; height:14px; background:var(--g-lt); flex-shrink:0}
.busca-tecla{margin-left:auto; font-family:'JetBrains Mono',monospace; font-size:9px;
  color:#5F7168; border:1px solid #24352B; border-radius:6px; padding:2px 7px; flex-shrink:0}
@media (prefers-reduced-motion:no-preference){
  .busca-caret{animation:parpadeo 1.05s steps(2) infinite}
}
@media (max-width:820px){ .busca-bar{display:none} }
html.menu-abierto .busca-bar{opacity:0; pointer-events:none}
.menu{display:none}
@media (max-width:860px){
  .velo-grid{grid-template-columns:1fr; gap:30px; align-items:start}
  #velomenu{padding:88px 22px 32px; overflow-y:auto; justify-content:flex-start}
  #velomenu a.item{font-size:20px; padding:12px 2px}
}
@media (max-width:640px){
  #velomenu a.item i{display:none}
}
@media (max-height:780px){
  #velomenu{padding-top:84px; padding-bottom:26px}
  #velomenu a.item{font-size:clamp(19px,2.2vw,28px); padding:10px 4px}
  .vp-sug{padding:8px 10px}
  .vp-busca{padding:11px 17px}
  .vp-wsp{padding:13px 18px}
}
@media (prefers-reduced-motion:reduce){
  .burger span,#velomenu,#velomenu a.item,.vpanel,.vp-caret{transition:none; animation:none}
}

/* ═══ PROGRESO + FAB ═══ */

/* ═══ MARQUESINA DE SERVICIOS (tipo Enova) ═══ */
.svc-marq{border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:var(--card); padding:28px 0; overflow:hidden}
.svc-marq .track{display:flex; gap:56px; width:max-content; align-items:baseline;
  animation:marq 46s linear infinite}
.svc-marq:hover .track{animation-play-state:paused}
.svc-marq span{font-family:'Poppins',sans-serif; font-size:clamp(40px,5.5vw,72px);
  font-weight:700; letter-spacing:-.03em; white-space:nowrap; line-height:1; color:var(--ink)}
.svc-marq span.out{color:transparent; -webkit-text-stroke:1.5px var(--line-2)}
.svc-marq i{width:10px; height:10px; border-radius:50%; background:var(--g);
  align-self:center; flex-shrink:0}

/* zona de ilustración de las cards destacadas */
.svc-main .viz{height:190px; background:var(--paper-2); border-radius:var(--r-m);
  display:grid; place-items:center; margin-bottom:24px; overflow:hidden}
.svc-main .viz svg{width:82%; height:auto; max-height:150px; overflow:visible}

/* animaciones de los vectores */
@media (prefers-reduced-motion:no-preference){
  .viz .draw{stroke-dasharray:420; stroke-dashoffset:420}
  .stagger.rv.on .viz .draw{animation:dibujar 1.4s var(--ease) .3s forwards}
  @keyframes dibujar{to{stroke-dashoffset:0}}
  .viz .dot{opacity:0}
  .stagger.rv.on .viz .dot{animation:aparecer .4s var(--ease) forwards}
  .stagger.rv.on .viz .dot:nth-of-type(2){animation-delay:.7s}
  .stagger.rv.on .viz .dot:nth-of-type(3){animation-delay:1s}
  .stagger.rv.on .viz .dot:nth-of-type(4){animation-delay:1.3s}
  @keyframes aparecer{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}
  .viz .pulse{transform-origin:center; transform-box:fill-box;
    animation:latir 2.6s ease-in-out infinite}
  @keyframes latir{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.35);opacity:.55}}
  .viz .node{transform-origin:center; transform-box:fill-box;
    animation:latir 3s ease-in-out infinite}
  .viz .node.n2{animation-delay:.5s} .viz .node.n3{animation-delay:1s}
  .viz .node.n4{animation-delay:1.5s} .viz .node.n5{animation-delay:2s}
  .viz .shine{animation:brillar 2.8s ease-in-out infinite}
  @keyframes brillar{0%,100%{opacity:.35}50%{opacity:1}}
  .viz .spark{transform-origin:center; transform-box:fill-box;
    animation:chispear 2.2s ease-in-out infinite}
  @keyframes chispear{0%,100%{transform:scale(.7) rotate(0deg);opacity:.4}
    50%{transform:scale(1.15) rotate(20deg);opacity:1}}
}

#prog{position:fixed; top:0; left:0; height:2px; width:0; z-index:90; background:var(--g)}
/* #25D366 = verde oficial de WhatsApp — excepción de marca de tercero, no forma parte de la paleta */
.wa-fab{position:fixed; right:20px; bottom:20px; z-index:80; width:54px; height:54px;
  border-radius:50%; background:#25D366; display:grid; place-items:center;
  box-shadow:0 4px 16px -4px rgba(10,10,15,.3); opacity:0; transform:translateY(12px);
  pointer-events:none; transition:opacity .3s var(--ease),transform .3s var(--ease)}
.wa-fab.show{opacity:1; transform:none; pointer-events:auto}
.wa-fab:hover{transform:translateY(-2px)}
.wa-fab:active{transform:scale(.95); transition-duration:.07s}
.wa-fab svg{width:28px; height:28px; fill:#fff}

/* ═══ RESPONSIVE ═══ */
@media (max-width:960px){
  .hgrid{grid-template-columns:1fr; gap:48px}
  .f-grid{grid-template-columns:1fr 1fr; gap:32px}
  .mband .wrap{grid-template-columns:1fr; gap:14px; padding-top:36px; padding-bottom:36px}
  .ind-index{grid-template-columns:1fr 1fr}
  .res-hero{grid-template-columns:1fr; gap:24px; padding:32px}
  .manifiesto .story{columns:1}
  .valores{grid-template-columns:1fr; gap:32px}
}
@media (max-width:640px){
  body{font-size:15px}
  section{padding:72px 0}
  section.mayor{padding:88px 0}
  section.util{padding:60px 0}
  .hero{padding:56px 0 48px}
  .fase{grid-template-columns:1fr; gap:8px}
  .f-grid{grid-template-columns:1fr}
  .svc-index,.ind-index{grid-template-columns:1fr}
  .res-grid{grid-template-columns:1fr}
  .res-hero .big{font-size:56px}
  .cierre{padding:88px 0}
}

/* ═══ MOTION ═══ */
@media (prefers-reduced-motion:no-preference){
  .js .rv{opacity:0; transform:translateY(14px);
    transition:opacity .4s var(--ease),transform .4s var(--ease)}
  .js .rv.on{opacity:1; transform:none}
  .js .stagger.rv > *{opacity:0; transform:translateY(14px);
    transition:opacity .4s var(--ease),transform .4s var(--ease)}
  .js .stagger.rv.on > *{opacity:1; transform:none}
  .js .stagger.rv.on > *:nth-child(2){transition-delay:40ms}
  .js .stagger.rv.on > *:nth-child(3){transition-delay:80ms}
  .js .stagger.rv.on > *:nth-child(4){transition-delay:120ms}
  .js .stagger.rv.on > *:nth-child(5){transition-delay:160ms}
  .js .stagger.rv.on > *:nth-child(n+6){transition-delay:200ms}
}
@media (prefers-reduced-motion:reduce){
  .tagchip i::after{animation:none}
  #net{display:none}
  .marq-track{animation:none}
}

/* ═══ MAPA · móvil ═══ */
@media (max-width:940px){
  .mapa-dk .lienzo{grid-template-columns:1fr; gap:0}
  .mapa-dk .lienzo::before{display:none}
  .mapa-dk .disco{order:-1; margin:4px auto 40px; width:min(78vw,260px)}
  .mapa-dk .disco .anillo{inset:-20px}
  .mapa-dk .disco .anillo text{font-size:9.4px; letter-spacing:.34em}
  .mapa-dk .nucleo b{font-size:16px}
  .rosa{width:36px; height:36px; margin-bottom:10px}
  .lado{position:relative}
  .lado::before{content:attr(data-t); display:block; font-family:'JetBrains Mono',monospace;
    font-size:10px; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
    color:var(--g-lt); margin:26px 0 4px}
  .lado.izq::before{margin-top:0}
  .mapa-dk .itemR:hover,.mapa-dk .lado.der .itemR:hover{transform:none}
}

/* ═══════════════════════════════════════════
   TEMA ESPACIAL TOTAL · todo el home en la noche
   (override final de tokens — manda sobre todo)
   ═══════════════════════════════════════════ */
:root{
  --paper:#08090A;
  --paper-2:#0D1410;
  --card:#101812;
  --line:rgba(233,243,236,.09);
  --line-2:rgba(233,243,236,.17);
  --ink:#F2F7F3;
  --ink-2:#AFC2B5;
  --ink-3:#7E9186;
  --g-dk:#3FCF77;
  --g-hv:#5FE08F;
  --g-soft:rgba(61,213,116,.12);
  --sh:0 1px 2px rgba(0,0,0,.5), 0 14px 34px -18px rgba(0,0,0,.7);
}
nav{background:rgba(8,9,10,.85)}
nav.espacial{background:transparent}
.btn{color:#06180D}
.btn:hover{color:#06180D}
.btn.gh{color:var(--ink)}
.cta-band{background:rgba(61,213,116,.07); border-top:1px solid var(--line)}
.cta-band p{color:var(--ink)}
.logos{background:var(--paper-2)}
.mband{background:var(--paper-2)}
.metric b{color:var(--ink)}
.svc-marq{background:var(--paper-2)}
.svc-marq span{color:var(--ink)}
.svc-marq span.out{-webkit-text-stroke-color:var(--ink-3)}
.matriz thead th{background:var(--paper-2)}
.matriz tbody th{background:var(--paper-2)}
.matriz tbody tr:hover td{background:rgba(61,213,116,.08)}
details summary::after{color:var(--g-dk)}
.res-hero,.res-card,.caso-dest{background:var(--card)}
.ch-panel{background:var(--paper-2)}
.svc-main a:hover,.svc-index a:hover{background:var(--paper-2)}
.rc,.tm{background:var(--card)}
a.rc:hover{background:var(--paper-2)}
.tm .av{background:var(--g-soft); color:var(--g-dk)}
.valor{border-top-color:var(--g)}
.drop .panel{background:var(--card); border-color:var(--line-2)}
.panel a:hover{background:var(--paper-2); color:var(--g-dk)}
.viz{background:var(--paper-2)}
.disco{background:var(--card)}
.velo-grano{opacity:.25}
/* ═══ ESPACIO PROFUNDO: viñeta + partículas desenfocadas ═══ */
.vineta{position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(120% 92% at 50% 42%, transparent 52%, rgba(0,0,0,.45) 100%)}
.bokeh{position:absolute; border-radius:50%; pointer-events:none; z-index:2}
.bokeh.k1{width:26px; height:26px; left:11%; top:62%; background:#BFF5D2;
  opacity:.09; filter:blur(11px)}
.bokeh.k2{width:14px; height:14px; right:15%; top:32%; background:#E9F3EC;
  opacity:.08; filter:blur(7px)}
.bokeh.k3{width:40px; height:40px; left:68%; bottom:10%; background:#3DD574;
  opacity:.05; filter:blur(18px)}
@media (prefers-reduced-motion:no-preference){
  .bokeh.k1{animation:deriva1 26s ease-in-out infinite}
  .bokeh.k2{animation:deriva2 34s ease-in-out infinite}
  .bokeh.k3{animation:deriva1 42s ease-in-out infinite reverse}
  @keyframes deriva1{50%{transform:translate(32px,-24px)}}
  @keyframes deriva2{50%{transform:translate(-28px,20px)}}
}

/* ═══ MENÚ ABIERTO: la barra flota sobre el velo (logo + CERRAR ✕) ═══ */
html.menu-abierto nav{z-index:90; background:transparent;
  border-bottom-color:transparent; backdrop-filter:none}
html.menu-abierto nav .logo b{color:var(--dark-tx)}
html.menu-abierto nav .logo .mk{border-color:var(--g-lt)}
html.menu-abierto nav .logo .mk::after{background:var(--g-lt)}

/* ═══ PORTADA COMPACTA en pantallas bajas ═══ */
@media (max-height:780px){
  .hero{padding-top:92px}
  .staff-h{font-size:clamp(25px,3.9vw,50px)}
  .sub-hero{margin-top:16px}
  .hero .cta-row{margin-top:26px}
  .hero .cta-note{margin-top:10px}
}
/* ═══ BOTONES PILL — referencia Hablemos ═══ */
:root{--btn:#12A85F; --btn-h:#0C8F4E}
.btn{background:var(--btn); border-color:var(--btn); color:#fff;
  padding:12px 22px; border-radius:999px; font-weight:600; font-size:14px; gap:8px}
.btn i{font-style:normal}
.btn:hover{background:var(--btn-h); border-color:var(--btn-h); color:#fff;
  transform:translateY(-2px); box-shadow:0 12px 30px rgba(18,168,95,.32)}
.btn.gh-dark{background:transparent; border-color:var(--dark-line); color:var(--dark-tx)}
.btn.gh-dark:hover{background:var(--dark-2); border-color:var(--dark-tx2);
  color:var(--dark-tx); box-shadow:none}
nav .wrap > .btn{padding:10px 18px; font-size:13px}
.vp-wsp{background:var(--btn); color:#fff; border-radius:999px; padding:13px 20px}
.vp-wsp:hover{background:var(--btn-h); box-shadow:0 12px 30px rgba(18,168,95,.28)}
@media (max-height:780px){ .vp-wsp{padding:14px 20px} }

/* ═══════════ PÁGINAS INTERNAS ═══════════ */
body.interna{padding-top:72px}
.miga{display:flex; gap:8px; flex-wrap:wrap; align-items:center;
  font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:#5F7168; padding:26px 0 0}
.miga a{color:var(--dark-tx2); text-decoration:none; transition:color .2s}
.miga a:hover{color:var(--g-lt)}
.miga i{font-style:normal; color:#3A4A40}
.ph{padding:34px 0 44px; border-bottom:1px solid var(--dark-line)}
.ph .eyebrow{margin-bottom:14px}
.ph h1{font-family:'Poppins',sans-serif; font-weight:700; letter-spacing:-.025em;
  font-size:clamp(30px,4.4vw,54px); line-height:1.18; max-width:22ch; text-wrap:balance}
.ph .lede{color:var(--dark-tx2); font-size:clamp(15.5px,1.7vw,18px); line-height:1.65;
  max-width:62ch; margin-top:18px}
.ph .lede b{color:var(--dark-tx); font-weight:600}
.cuerpo{padding:44px 0 70px}
.prosa{max-width:68ch}
.prosa p{color:var(--dark-tx2); font-size:15.5px; line-height:1.75; margin-bottom:18px}
.prosa p b, .prosa p strong{color:var(--dark-tx); font-weight:600}
.prosa h2{font-family:'Poppins',sans-serif; font-weight:700; letter-spacing:-.02em;
  font-size:clamp(21px,2.4vw,28px); margin:38px 0 14px}
.bloques{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
  gap:14px; margin:26px 0 8px}
.bloque{background:var(--card); border:1px solid var(--dark-line); border-radius:16px;
  padding:20px 22px}
.bloque h3{font-size:15.5px; font-weight:600; margin-bottom:7px}
.bloque h3 a{color:inherit; text-decoration:none; transition:color .2s}
.bloque h3 a:hover{color:var(--g-lt)}
.bloque p{color:var(--dark-tx2); font-size:13.5px; line-height:1.6}
.bloque .chip{margin-bottom:10px; display:inline-block}
.bloque .arrow{display:inline-block; margin-top:12px; font-size:13px; font-weight:600;
  color:var(--g-lt)}
a.bloque{display:block; text-decoration:none; color:inherit;
  transition:border-color .25s, transform .25s var(--ease)}
a.bloque:hover{border-color:var(--g-dk); transform:translateY(-3px)}
.cta-banda{margin:54px 0 0; background:var(--card); border:1px solid var(--dark-line);
  border-radius:20px; padding:clamp(26px,3.4vw,42px);
  display:flex; align-items:center; justify-content:space-between; gap:22px; flex-wrap:wrap}
.cta-banda h2{font-family:'Poppins',sans-serif; font-weight:700; letter-spacing:-.02em;
  font-size:clamp(20px,2.4vw,28px); max-width:22ch}
.cta-banda h2 b{color:var(--g-lt)}
.cta-banda p{color:#5F7168; font-size:13px; margin-top:8px}
.faqs-int{margin-top:46px; max-width:760px}
.faqs-int h2{font-family:'Poppins',sans-serif; font-weight:700; font-size:clamp(20px,2.3vw,26px);
  margin-bottom:8px}
.rel{margin-top:46px}
.rel h2{font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color:#5F7168; margin-bottom:16px}
.rel .fila-rel{display:flex; gap:10px; flex-wrap:wrap}
.rel a{border:1px solid var(--dark-line); border-radius:999px; padding:9px 16px;
  color:var(--dark-tx2); font-size:13px; font-weight:500; text-decoration:none;
  transition:color .2s, border-color .2s}
.rel a:hover{color:var(--g-lt); border-color:var(--g-dk)}
@media (max-width:640px){ .ph{padding:24px 0 34px} .cuerpo{padding:34px 0 54px} }

/* ═══════════ VECTORES VIVOS ═══════════ */
.ph{display:grid; grid-template-columns:1.18fr .82fr; gap:clamp(24px,4vw,60px); align-items:center}
.ph .ph-tx{min-width:0}
.ph .vivo{justify-self:end; width:100%; max-width:350px}
.ph .vivo svg{width:100%; height:auto; display:block}
@media (max-width:860px){
  .ph{grid-template-columns:1fr}
  .ph .vivo{justify-self:center; max-width:250px; margin-top:8px}
}
@keyframes vTrazo{to{stroke-dashoffset:0}}
@keyframes vTrazoLoop{0%{stroke-dashoffset:420}100%{stroke-dashoffset:-420}}
@keyframes vAparece{to{opacity:1; transform:scale(1)}}
@keyframes vGira{to{transform:rotate(360deg)}}
@keyframes vPulso{0%,100%{transform:scale(1)}50%{transform:scale(1.14)}}
@keyframes vFlota{50%{transform:translateY(-7px)}}
@keyframes vParpadeo{50%{opacity:.2}}
@keyframes vOscila{0%,100%{transform:rotate(-13deg)}50%{transform:rotate(10deg)}}
@keyframes vCrece{to{transform:scaleY(1)}}
@keyframes vCreceX{to{transform:scaleX(1)}}
@keyframes vOnda{0%,100%{transform:translateY(0); opacity:.75}50%{transform:translateY(-7px); opacity:.2}}
@keyframes vLatir{0%{transform:scale(.5); opacity:.9}100%{transform:scale(1.7); opacity:0}}
.vivo .tz{stroke-dasharray:620; stroke-dashoffset:620; animation:vTrazo 1.9s var(--ease) forwards}
.vivo .tzloop{stroke-dasharray:150 270; animation:vTrazoLoop 2.8s linear infinite}
.vivo .ap{opacity:0; transform:scale(.4); transform-box:fill-box; transform-origin:center;
  animation:vAparece .5s var(--ease) forwards}
.vivo .gira{animation:vGira 26s linear infinite; transform-box:fill-box; transform-origin:center}
.vivo .pulso{animation:vPulso 2.4s ease-in-out infinite; transform-box:fill-box; transform-origin:center}
.vivo .ap.pulso{animation:vAparece .5s var(--ease) forwards, vPulso 2.4s ease-in-out 1s infinite}
.vivo .flota{animation:vFlota 4.5s ease-in-out infinite; transform-box:fill-box; transform-origin:center}
.vivo .titila{animation:vParpadeo 1.6s ease-in-out infinite}
.vivo .oscila{animation:vOscila 3.8s ease-in-out infinite; transform-box:fill-box; transform-origin:center}
.vivo .sube{transform:scaleY(0); transform-box:fill-box; transform-origin:bottom;
  animation:vCrece .8s var(--ease) forwards}
.vivo .larga{transform:scaleX(0); transform-box:fill-box; transform-origin:left;
  animation:vCreceX .7s var(--ease) forwards}
.vivo .onda{animation:vOnda 2.8s ease-in-out infinite}
.vivo .lat{transform-box:fill-box; transform-origin:center; animation:vLatir 2.2s ease-out infinite}
@media (prefers-reduced-motion:reduce){
  .vivo *{animation:none !important; opacity:1 !important; transform:none !important;
    stroke-dashoffset:0 !important}
}

/* ═══ BARRA SÓLIDA OSCURA (páginas internas) ═══ */
nav.sdk{background:rgba(8,9,10,.92); border-bottom:1px solid var(--dark-line);
  backdrop-filter:blur(14px)}
nav.sdk .logo b{color:var(--dark-tx)}
nav.sdk .logo .mk{border-color:var(--g-lt)}
nav.sdk .logo .mk::after{background:var(--g-lt)}
nav.sdk .burger .mtx{color:var(--dark-tx)}
nav.sdk .burger .rayas span{background:var(--dark-tx)}

/* ═══ SWITCHER DE IDIOMA ═══ */
.lang-sw{font-family:'JetBrains Mono',monospace; font-size:10.5px; font-weight:600;
  letter-spacing:.14em; color:var(--dark-tx2); text-decoration:none;
  border:1px solid var(--dark-line); border-radius:999px; padding:8px 13px;
  flex-shrink:0; transition:color .2s, border-color .2s}
.lang-sw:hover{color:var(--g-lt); border-color:var(--g)}
@media (max-width:640px){ .lang-sw{display:none} }