/* HG Digital Strategy · estilos del sitio
   Colores y tipografía del design system en :root. */

/* Fuentes alojadas en el propio sitio (Montserrat y JetBrains Mono, licencia SIL OFL) */
@font-face{font-family:'Montserrat';font-style:normal;font-weight:400 700;font-display:swap;src:url(/fuentes/montserrat.woff2) format('woff2');unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 500;font-display:swap;src:url(/fuentes/jetbrains-mono.woff2) format('woff2');unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

/* ===== HG Digital Strategy · base compartida de las propuestas ===== */
:root{
  --mint:#6EE7B7; --neon:#72EC98; --forest:#0F3B25; --obsidian:#051A10;
  --white:#FFFFFF; --soft:#E6F4ED;
  --line:rgba(110,231,183,.16); --line-2:rgba(110,231,183,.32);
  --glass:rgba(15,59,37,.55);
  --f:'Montserrat',system-ui,sans-serif; --mono:'JetBrains Mono',ui-monospace,monospace;
  --maxw:1200px; --r:22px; --ease:cubic-bezier(.2,.7,.1,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:84px;-webkit-text-size-adjust:100%}
body{background:var(--obsidian);color:var(--soft);font:430 16px/1.5 var(--f);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}
@media (min-width:720px){.wrap{padding:0 32px}}
:focus-visible{outline:2px solid var(--mint);outline-offset:3px;border-radius:8px}
.skip{position:absolute;left:-999px;top:8px;background:var(--mint);color:var(--obsidian);padding:10px 16px;border-radius:10px;font-weight:600;z-index:200}
.skip:focus{left:16px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Tipografía */
.eyebrow{display:inline-flex;align-items:center;gap:12px;font:500 12px/1.5 var(--f);letter-spacing:.18em;text-transform:uppercase;color:var(--mint)}
.eyebrow::before{content:"";width:26px;height:1.5px;background:currentColor}
.h-sec{font:600 clamp(32px,4.4vw,52px)/1.12 var(--f);color:var(--white);letter-spacing:-.02em}
.sub{font:500 20px/1.4 var(--f);color:var(--white)}
.body{font:430 16px/1.5 var(--f);color:var(--soft)}
.lead{font:430 clamp(16px,1.6vw,19px)/1.6 var(--f);color:var(--soft);max-width:560px}
.grad{background:linear-gradient(90deg,var(--mint),var(--neon));-webkit-background-clip:text;background-clip:text;color:transparent}

/* Botones */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;font:600 15px/1 var(--f);padding:17px 26px;border-radius:999px;transition:background .25s,color .25s,border-color .25s,transform .35s var(--ease);white-space:nowrap;min-height:52px}
.btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--ease)}
.btn-p{background:var(--mint);color:var(--obsidian)}
.btn-p:hover{background:var(--neon)}
.btn-p:hover svg{transform:translateX(3px)}
.btn-g{border:1.5px solid var(--line-2);color:var(--white)}
.btn-g:hover{border-color:var(--mint);color:var(--mint)}

/* Navegación */
.nav{position:fixed;inset:0 0 auto;z-index:100;transition:background .3s,border-color .3s,backdrop-filter .3s;border-bottom:1px solid transparent}
.nav.solid{background:rgba(5,26,16,.78);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-color:var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:72px;gap:20px}
.nav .logo{padding:6px 0}
.nav .logo img{height:50px;width:auto}
.nav nav{display:none;gap:32px}
.nav nav a{font:500 14px/1 var(--f);color:var(--soft);padding:8px 0;position:relative}
.nav nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1.5px;background:var(--mint);transition:right .3s var(--ease)}
.nav nav a:hover{color:var(--white)}
.nav nav a:hover::after{right:0}
.nav .btn{padding:12px 20px;min-height:44px;font-size:14px}
@media (min-width:900px){.nav nav{display:flex}}

/* Secciones */
section{position:relative;padding:96px 0}
@media (min-width:900px){section{padding:140px 0}}
.sec-head{max-width:720px;margin-bottom:56px}
.sec-head .h-sec{margin:18px 0 18px}

/* Servicios: dos paneles distintos, no tarjetas iguales */
.svc{display:grid;gap:20px}
@media (min-width:960px){.svc{grid-template-columns:7fr 5fr}}
.panel{position:relative;border:1px solid var(--line);border-radius:var(--r);background:linear-gradient(160deg,rgba(15,59,37,.7),rgba(5,26,16,.6));overflow:hidden;padding:28px;display:flex;flex-direction:column;gap:22px;isolation:isolate}
@media (min-width:720px){.panel{padding:40px}}
.panel::before{content:"";position:absolute;inset:0;background:radial-gradient(500px 300px at var(--mx,80%) var(--my,0%),rgba(110,231,183,.14),transparent 60%);z-index:-1;transition:opacity .3s}
.panel .tag{font:500 12px/1 var(--mono);color:var(--mint);letter-spacing:.06em}
.panel h3{font:600 clamp(24px,2.6vw,32px)/1.2 var(--f);color:var(--white);letter-spacing:-.01em}
.panel p{max-width:460px}
.viz{margin-top:auto;border-radius:16px;border:1px solid var(--line);background:rgba(5,26,16,.7);padding:18px;font:400 12px/1.4 var(--mono);color:var(--soft)}

/* mini ERP */
.erp{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;position:relative}
.erp .mod{border:1px solid var(--line);border-radius:12px;padding:12px 10px;display:flex;flex-direction:column;gap:8px;background:rgba(15,59,37,.5);transition:border-color .4s,background .4s}
.erp .mod i{display:block;height:4px;border-radius:4px;background:var(--line-2);overflow:hidden;position:relative}
.erp .mod i::after{content:"";position:absolute;inset:0;width:var(--w,60%);background:var(--mint);border-radius:4px}
.erp .mod.hub{grid-column:2;grid-row:1/3;align-items:center;justify-content:center;text-align:center;background:var(--forest);border-color:var(--line-2);color:var(--white);font:600 13px/1.2 var(--f)}
.erp .mod.hub b{display:block;width:34px;height:34px;border-radius:50%;margin:0 auto 6px;background:radial-gradient(circle,var(--mint) 0 30%,rgba(110,231,183,.2) 31% 100%);box-shadow:0 0 0 6px rgba(110,231,183,.08)}
.erp .mod.on{border-color:var(--mint);background:rgba(110,231,183,.08)}
/* mini agente */
.bot{display:flex;flex-direction:column;gap:8px}
.bot .b{max-width:85%;padding:9px 12px;border-radius:14px;font:430 13px/1.4 var(--f)}
.bot .c{align-self:flex-end;background:var(--forest);color:var(--soft);border-bottom-right-radius:4px}
.bot .a{align-self:flex-start;background:rgba(110,231,183,.12);color:var(--white);border:1px solid var(--line);border-bottom-left-radius:4px}
.bot .ok{align-self:flex-start;display:inline-flex;gap:8px;align-items:center;font:500 12px/1 var(--mono);color:var(--obsidian);background:var(--mint);padding:8px 12px;border-radius:999px}
.wave{display:flex;align-items:center;gap:3px;height:28px}
.wave span{width:3px;border-radius:3px;background:var(--mint);height:30%;opacity:.8}

/* Enfoque */
#enfoque{background:var(--forest);overflow:hidden}
#enfoque::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:64px 64px;-webkit-mask-image:radial-gradient(ellipse at 80% 20%,#000,transparent 65%);mask-image:radial-gradient(ellipse at 80% 20%,#000,transparent 65%);opacity:.6}
.enf{position:relative;display:grid;gap:48px}
@media (min-width:960px){.enf{grid-template-columns:5fr 7fr;gap:80px;align-items:start}.enf .sec-head{position:sticky;top:120px;margin:0}}
.pil{list-style:none;border-top:1px solid var(--line-2)}
.pil li{display:grid;grid-template-columns:56px 1fr;gap:6px 18px;padding:28px 0;border-bottom:1px solid var(--line-2)}
.pil .n{font:500 13px/1.9 var(--mono);color:var(--mint)}
.pil h3{font:600 clamp(24px,3vw,34px)/1.2 var(--f);color:var(--white);letter-spacing:-.01em;transition:color .3s}
.pil p{grid-column:2;max-width:480px}
.pil li:hover h3{color:var(--mint)}

/* Proceso */
.steps{list-style:none;position:relative;display:grid;gap:36px;padding-left:40px}
.steps::before,.steps::after{content:"";position:absolute;left:11px;top:6px;width:2px;bottom:6px;background:var(--line);border-radius:2px}
.steps::after{background:linear-gradient(var(--mint),var(--neon));bottom:auto;height:calc((100% - 12px) * var(--p,1))}
.step{position:relative}
.step .dot{position:absolute;left:-40px;top:0;width:24px;height:24px;border-radius:50%;background:var(--obsidian);border:2px solid var(--line-2);display:grid;place-items:center;transition:border-color .4s,background .4s}
.step .dot::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--line-2);transition:background .4s}
.step.on .dot{border-color:var(--mint)}
.step.on .dot::after{background:var(--mint)}
.step .k{font:500 12px/1 var(--mono);color:var(--mint);display:block;margin-bottom:12px;padding-top:4px}
.step h3{font:500 22px/1.3 var(--f);color:var(--white);margin-bottom:8px}
@media (min-width:960px){
  .steps{grid-template-columns:repeat(4,1fr);gap:32px;padding:44px 0 0}
  .steps::before,.steps::after{left:0;right:0;top:11px;bottom:auto;width:auto;height:2px}
  .steps::after{width:calc(100% * var(--p,1));height:2px}
  .step .dot{left:0;top:-44px}
}

/* Contacto */
#contacto{overflow:hidden;background:radial-gradient(900px 500px at 15% 100%,rgba(110,231,183,.14),transparent 60%),linear-gradient(180deg,var(--obsidian),var(--forest))}
.cta{display:grid;gap:40px}
@media (min-width:960px){.cta{grid-template-columns:7fr 5fr;gap:72px;align-items:end}}
.cta .h-sec{font-size:clamp(36px,5.4vw,68px)}
.card{border:1px solid var(--line-2);border-radius:var(--r);background:rgba(5,26,16,.72);backdrop-filter:blur(8px);padding:28px;display:grid;gap:14px}
@media (min-width:720px){.card{padding:36px}}
.card small{font:500 12px/1 var(--f);letter-spacing:.16em;text-transform:uppercase;color:var(--mint)}
.card .mail{font:600 clamp(18px,2vw,22px)/1.3 var(--f);color:var(--white);word-break:break-word}
.card .mail:hover{color:var(--mint)}
.card .btn{width:100%}
.card dl{display:grid;gap:14px;border-top:1px solid var(--line);padding-top:20px;margin-top:6px}
.card dt{font:500 12px/1 var(--f);letter-spacing:.16em;text-transform:uppercase;color:var(--mint);margin-bottom:6px}
.card dd{font:430 15px/1.5 var(--f)}

/* Pie */
footer{border-top:1px solid var(--line);padding:44px 0;background:var(--obsidian)}
footer .wrap{display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;align-items:center}
footer img{height:50px;width:auto}
footer nav{display:flex;flex-wrap:wrap;gap:12px 24px}
footer nav a{font:500 13px/1 var(--f);padding:6px 0}
footer nav a:hover{color:var(--mint)}
footer p{font:430 13px/1.5 var(--f);opacity:.8}

/* Aparición al hacer scroll (solo si hay JS y movimiento permitido) */
.js .rv{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--d,0s)}
.js .rv.in{opacity:1;transform:none}


@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .rv{opacity:1;transform:none}
}

/* ===== Inicio: historia de nodos ===== */
.h1{font:600 clamp(36px,5.2vw,68px)/1.08 var(--f);color:var(--white);letter-spacing:-.025em;margin:22px 0 24px;max-width:13ch}
.ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.story{position:relative;background:radial-gradient(1000px 600px at 75% 40%,rgba(15,59,37,.9),transparent 70%),var(--obsidian)}
.stage{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;overflow:hidden;padding:110px 0 60px}
#red{position:absolute;inset:0;width:100%;height:100%;touch-action:pan-y;-webkit-mask-image:linear-gradient(transparent 0,#000 130px);mask-image:linear-gradient(transparent 0,#000 130px)}
.stage::after{content:"";position:absolute;inset:auto 0 0;height:40%;background:linear-gradient(transparent,rgba(5,26,16,.85));pointer-events:none}
.hero-txt{position:relative;z-index:2;width:100%;will-change:opacity,transform}
.caps{list-style:none;position:relative;z-index:3;display:grid;gap:22px;margin-top:56px}
.caps .k{font:500 12px/1 var(--mono);color:var(--mint);letter-spacing:.08em;text-transform:uppercase}
.caps h2{font:600 clamp(30px,4vw,52px)/1.1 var(--f);color:var(--white);letter-spacing:-.02em;margin:10px 0 10px}
.caps p{max-width:400px}
.meter{display:none}
.hint{display:none;transition:opacity .4s}
.js:not(.rm) .story{height:640vh}
@media (max-width:899px){.js:not(.rm) .story{height:560vh}}
.js:not(.rm) .stage{position:sticky;top:0;height:100svh;padding:0}
.js:not(.rm) .caps{position:absolute;left:20px;right:20px;bottom:9svh;margin:0;display:block;pointer-events:none}
.js:not(.rm) .caps li{position:absolute;left:0;right:0;bottom:0;opacity:0;transform:translateY(20px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.js:not(.rm) .caps li.on{opacity:1;transform:none}
.js:not(.rm) .meter{display:flex;opacity:0;transition:opacity .5s;gap:6px;position:absolute;z-index:3;left:20px;bottom:calc(9svh - 28px)}
.meter i{width:28px;height:3px;border-radius:3px;background:var(--line-2);overflow:hidden;position:relative}
.meter i b{position:absolute;inset:0;background:var(--mint);transform-origin:left;transform:scaleX(var(--f,0))}
.js:not(.rm) .hint{display:flex;align-items:center;gap:10px;position:absolute;z-index:3;left:50%;bottom:28px;transform:translateX(-50%);font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--soft);opacity:.75}
.hint span{width:1.5px;height:28px;background:linear-gradient(var(--mint),transparent);animation:drip 1.8s var(--ease) infinite}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.legend{position:absolute;z-index:3;right:20px;top:88px;font:400 11px/1 var(--mono);color:var(--soft);opacity:.55}
@media (min-width:900px){.js:not(.rm) .caps,.js:not(.rm) .meter{left:max(32px,calc((100vw - var(--maxw))/2 + 32px));right:auto;width:min(36vw,420px)}.js:not(.rm) .caps{bottom:auto;top:50%;transform:translateY(-30%)}.js:not(.rm) .meter{bottom:auto;top:calc(50% + 28px)}}

/* ===== Demostración del agente ===== */
/* Demo */
.demo{position:relative;max-width:560px;width:100%;justify-self:center}
.tabs{display:inline-flex;padding:4px;border:1px solid var(--line-2);border-radius:999px;background:rgba(5,26,16,.7);margin-bottom:14px}
.tabs button{font:500 13px/1 var(--f);padding:10px 16px;border-radius:999px;color:var(--soft);display:inline-flex;gap:8px;align-items:center;min-height:40px}
.tabs button svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tabs button[aria-selected=true]{background:var(--mint);color:var(--obsidian)}
.phone{border:1px solid var(--line-2);border-radius:28px;background:linear-gradient(180deg,rgba(15,59,37,.85),rgba(5,26,16,.95));box-shadow:0 40px 80px -30px rgba(0,0,0,.6),0 0 0 8px rgba(110,231,183,.04);overflow:hidden}
.ph-top{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line)}
.ph-top .av{width:36px;height:36px;border-radius:50%;background:radial-gradient(circle,var(--mint) 0 28%,rgba(110,231,183,.18) 30%);flex:none}
.ph-top b{display:block;font:600 14px/1.2 var(--f);color:var(--white)}
.ph-top small{font:400 11px/1.2 var(--mono);color:var(--mint)}
.ph-top .tm{margin-left:auto;font:400 12px/1 var(--mono);color:var(--soft);opacity:0}
.voice .ph-top .tm{opacity:.8}
.vwave{display:none;align-items:center;justify-content:center;gap:3px;height:64px;padding:0 18px;border-bottom:1px solid var(--line)}
.voice .vwave{display:flex}
.vwave span{width:3px;height:8%;border-radius:3px;background:var(--line-2);transition:height .12s}
.vwave.bot span{background:var(--mint)}
.vwave.cli span{background:var(--soft)}
.log{height:340px;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:10px;scroll-behavior:smooth;scrollbar-width:none}
.log::-webkit-scrollbar{display:none}
.msg{max-width:84%;padding:10px 14px;border-radius:16px;font:430 14px/1.45 var(--f);animation:pop .4s var(--ease) both}
.msg.cli{align-self:flex-end;background:var(--forest);color:var(--soft);border-bottom-right-radius:5px}
.msg.bot{align-self:flex-start;background:rgba(110,231,183,.12);border:1px solid var(--line);color:var(--white);border-bottom-left-radius:5px}
.voice .msg{max-width:100%;align-self:stretch;background:none;border:0;padding:0 0 0 14px;border-left:2px solid var(--line-2);border-radius:0}
.voice .msg.bot{border-color:var(--mint)}
.voice .msg::before{content:attr(data-who);display:block;font:500 10px/1.6 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mint)}
.typing{align-self:flex-start;display:inline-flex;gap:4px;padding:12px 14px;border-radius:16px;background:rgba(110,231,183,.08)}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--mint);animation:blink 1s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
.chips{display:flex;flex-wrap:wrap;gap:8px;padding:0 18px 18px;min-height:58px}
.chips button{font:500 13px/1 var(--f);padding:11px 14px;border:1.5px solid var(--mint);color:var(--mint);border-radius:999px;min-height:40px;animation:pop .4s var(--ease) both}
.chips button:hover{background:var(--mint);color:var(--obsidian)}
.chips .again{border-color:var(--line-2);color:var(--soft)}
@keyframes pop{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
@keyframes blink{0%,100%{opacity:.25}50%{opacity:1}}
/* Panel ERP */
.erp-live{margin-top:14px;border:1px solid var(--line-2);border-radius:18px;background:rgba(5,26,16,.92);padding:16px 18px;box-shadow:0 30px 60px -30px rgba(0,0,0,.7)}
@media (min-width:1000px){.erp-live{position:absolute;left:-56px;bottom:-40px;width:290px;margin:0}}
.erp-live header{display:flex;justify-content:space-between;align-items:center;font:500 11px/1 var(--mono);color:var(--mint);letter-spacing:.08em;text-transform:uppercase;margin-bottom:12px}
.erp-live header span{display:inline-flex;align-items:center;gap:6px}
.erp-live header span::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 4px rgba(110,231,183,.15)}
.erp-live ul{list-style:none;display:grid;gap:8px;min-height:120px}
.erp-live li{display:grid;grid-template-columns:18px 1fr;gap:10px;align-items:start;font:430 13px/1.4 var(--f);color:var(--soft);padding:8px 10px;border-radius:10px;background:rgba(15,59,37,.6);animation:pop .5s var(--ease) both}
.erp-live li b{display:block;color:var(--white);font-weight:600}
.erp-live li svg{width:16px;height:16px;margin-top:2px;stroke:var(--mint);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.erp-live li.new{box-shadow:0 0 0 1px var(--mint)}
.note{margin-top:14px;font:400 11px/1.5 var(--mono);color:var(--soft);opacity:.65}
@media (min-width:1000px){.note{margin-top:64px;padding-left:250px}}

/* ===== Tema claro: página en blanco =====
   Solo la barra superior y el pie de página (donde aparece el logo) son oscuros:
   el logo está hecho para fondo oscuro y siempre queda sobre verde obsidiana. */
:root{--paper:#FFFFFF;--ink:#051A10;--ink-2:#0F3B25;--rule:rgba(15,59,37,.12);--rule-2:rgba(15,59,37,.24)}
body{background:var(--paper);color:var(--ink-2)}

/* Barra superior: siempre oscura, difuminada hacia la página */
.nav,.nav.solid{background:var(--obsidian);border-color:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
.nav::after{content:"";position:absolute;left:0;right:0;top:100%;height:22px;pointer-events:none;
  background:linear-gradient(180deg,rgba(5,26,16,1) 0%,rgba(15,59,37,.78) 22%,rgba(15,59,37,.4) 45%,rgba(110,231,183,.16) 70%,rgba(230,244,237,.35) 85%,rgba(255,255,255,0) 100%)}

/* Textos sobre blanco */
main .eyebrow{color:var(--ink-2)}
main .eyebrow::before{background:var(--mint);height:2px}
main .h-sec,.h1{color:var(--ink)}
main .lead,main .body{color:var(--ink-2)}
.grad{color:var(--ink-2);-webkit-background-clip:border-box;background-clip:border-box;
  background:linear-gradient(transparent 64%,rgba(110,231,183,.6) 64%,rgba(110,231,183,.6) 90%,transparent 90%)}
main .btn-g{border-color:var(--rule-2);color:var(--ink)}
main .btn-g:hover{border-color:var(--ink-2);color:var(--ink-2)}
main .btn-p{box-shadow:0 10px 24px -12px rgba(15,59,37,.45)}

/* Historia de nodos */
.story{background:radial-gradient(900px 600px at 78% 45%,rgba(110,231,183,.14),transparent 70%),var(--paper)}
.stage::after{background:linear-gradient(rgba(255,255,255,0),rgba(255,255,255,.9))}
.caps h2{color:var(--ink)}
.caps .k{color:var(--ink-2)}
.meter i{background:var(--rule)}
.meter i b{background:var(--ink-2)}
.hint{color:var(--ink-2)}
.hint span{background:linear-gradient(var(--ink-2),transparent)}

/* Secciones */
:is(#servicios,#demo,#enfoque,#proceso,#contacto){background:var(--paper)}
:is(#demo,#enfoque,#proceso,#contacto){border-top:1px solid var(--rule)}

/* Servicios: paneles oscuros como "pantallas" sobre el blanco */
#servicios .panel{background:linear-gradient(160deg,#0F3B25,#051A10);border-color:transparent;box-shadow:0 40px 80px -40px rgba(5,26,16,.55)}
#servicios .panel .body{color:var(--soft)}

/* Demostración */
.demo-grid{display:grid;gap:36px;align-items:center}
.demo-grid .sec-head{margin:0}
@media (min-width:1000px){.demo-grid{grid-template-columns:5fr 7fr;gap:72px}}
#demo .tabs{border-color:var(--rule-2);background:var(--paper)}
#demo .tabs button{color:var(--ink-2)}
#demo .tabs button[aria-selected=true]{background:var(--ink-2);color:var(--white)}
#demo .note{color:var(--ink-2)}
#demo .phone{box-shadow:0 50px 90px -40px rgba(5,26,16,.6)}

/* Enfoque */
#enfoque::before{background-image:linear-gradient(var(--rule) 1px,transparent 1px),linear-gradient(90deg,var(--rule) 1px,transparent 1px);opacity:.7}
#enfoque .pil{border-top-color:var(--rule-2)}
#enfoque .pil li{border-bottom-color:var(--rule-2)}
#enfoque .pil .n{color:var(--ink-2)}
#enfoque .pil h3{color:var(--ink);transition:transform .4s var(--ease)}
#enfoque .pil li:hover h3{color:var(--ink);transform:translateX(6px)}

/* Proceso */
#proceso .steps::before{background:var(--rule)}
#proceso .step .dot{background:var(--paper);border-color:var(--rule-2)}
#proceso .step .dot::after{background:var(--rule-2)}
#proceso .step.on .dot{border-color:var(--ink-2)}
#proceso .step.on .dot::after{background:var(--mint)}
#proceso .step .k{color:var(--ink-2)}
#proceso .step h3{color:var(--ink)}

/* Contacto: tarjeta oscura sobre blanco */
#contacto .card{background:linear-gradient(160deg,#0F3B25,#051A10);border-color:transparent;box-shadow:0 40px 80px -40px rgba(5,26,16,.55)}
#contacto .card .btn-g{border-color:var(--line-2);color:var(--white)}
#contacto .card .btn-g:hover{border-color:var(--mint);color:var(--mint)}
#contacto .card dd{color:var(--soft)}
footer{color:var(--soft)}

/* ===== Aviso de privacidad ===== */
.legal-hero{padding:132px 0 48px;background:radial-gradient(800px 400px at 85% 0%,rgba(110,231,183,.14),transparent 65%),var(--paper);border-bottom:1px solid var(--rule)}
.legal-hero .wrap,.legal .wrap{max-width:820px}
.legal-hero h1{font:600 clamp(32px,4.4vw,52px)/1.12 var(--f);color:var(--ink);letter-spacing:-.02em;margin-bottom:14px}
.legal-hero p{font:430 15px/1.5 var(--f);color:var(--ink-2)}
.legal{background:var(--paper);padding:56px 0 112px}
.legal h2{font:500 20px/1.4 var(--f);color:var(--ink);margin:52px 0 16px;padding-top:36px;border-top:1px solid var(--rule)}
.legal h2:first-of-type{margin-top:0;padding-top:0;border-top:0}
.legal p{font:430 16px/1.6 var(--f);color:var(--ink-2);margin-bottom:16px}
.legal ul{list-style:none;margin:0 0 18px}
.legal li{position:relative;font:430 16px/1.6 var(--f);color:var(--ink-2);padding-left:26px;margin-bottom:10px}
.legal li::before{content:"";position:absolute;left:4px;top:.66em;width:8px;height:8px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 1.5px var(--ink-2)}
.legal strong,.legal .label{color:var(--ink);font-weight:600}
.legal .label{margin-bottom:10px}
.legal a{color:var(--ink-2);text-decoration:underline;text-decoration-color:var(--mint);text-decoration-thickness:2px;text-underline-offset:3px}
.legal a:hover{color:var(--ink)}
.back{display:inline-flex;align-items:center;gap:8px;font:500 14px/1 var(--f);color:var(--ink-2);margin-bottom:28px;padding:8px 0}
.back svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--ease)}
.back:hover svg{transform:translateX(-3px)}

/* Textos de cada acto: siempre legibles sobre la red de nodos */
.js:not(.rm) .caps li{background:rgba(255,255,255,.86);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);padding:18px 20px;margin-left:-20px;border-radius:18px}
#demo .note{opacity:1}

/* Selector de idioma y botón corto en celular */
.lang{display:flex;align-items:center;gap:6px;font:500 13px/1 var(--mono);color:rgba(230,244,237,.55);margin-left:auto}
.lang a{color:rgba(230,244,237,.75);padding:10px 4px;min-width:28px;text-align:center}
.lang a:hover{color:var(--mint)}
.lang a[aria-current]{color:var(--mint)}
.nav .btn .short{display:none}
@media (max-width:520px){.nav .btn .long{display:none}.nav .btn .short{display:inline}.nav .wrap{gap:12px}}
@media (min-width:900px){.lang{margin-left:0}}