/* =========================================================
   DECOM — sistema visual «Circuito de decisiones»
   Base compartida por el index y las páginas de servicio.
   ========================================================= */

@font-face{font-family:"Bricolage";src:url("../fonts/bricolage.woff2") format("woff2");font-weight:200 800;font-stretch:75% 100%;font-display:swap}
@font-face{font-family:"Instrument";src:url("../fonts/instrument-sans.woff2") format("woff2");font-weight:400 700;font-stretch:75% 100%;font-display:swap}

:root{
  /* Paleta derivada del logo (cerebro-circuito) */
  --paper:#f4f6fc;      /* fondo frío */
  --surface:#ffffff;
  --tint:#e9edfb;       /* superficies secundarias */
  --tint-2:#dde3f8;
  --ink:#121a3a;        /* texto y fondos oscuros: azul tinta del logo */
  --ink-2:#1c2550;
  --muted:#535c7c;      /* texto secundario (AA sobre blanco y papel) */
  --line:#d9deef;
  --indigo:#4a43d6;     /* acción principal */
  --indigo-2:#3a33bf;
  --violet:#8b6ff0;
  --signal:#2ec5f2;     /* la «señal»: trazas y estados activos, nunca texto sobre claro */
  --danger:#b42335;

  --display:"Bricolage","Instrument",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --text:"Instrument",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  --r-s:10px; --r-m:16px; --r-l:28px; --r-xl:40px;
  --ease:cubic-bezier(.22,.8,.24,1);
  --wrap:1200px;
  --nav-h:72px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 16px);-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);font:400 17px/1.55 var(--text);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
:focus-visible{outline:2.5px solid var(--indigo);outline-offset:3px;border-radius:6px}
::selection{background:var(--signal);color:var(--ink)}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
section{padding:56px 0}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:16px;top:-60px;z-index:100;background:var(--ink);color:#fff;padding:10px 16px;border-radius:var(--r-s);transition:top .2s}
.skip:focus{top:12px}

/* ---------- Tipografía ---------- */
h1,h2,h3,h4{font-family:var(--display);color:var(--ink);font-weight:600;text-wrap:balance}
h1{font-size:clamp(42px,6.4vw,84px);line-height:.98;letter-spacing:-.035em;font-variation-settings:"wdth" 92}
h2{font-size:clamp(32px,4.4vw,56px);line-height:1.02;letter-spacing:-.03em;font-variation-settings:"wdth" 94}
h3{font-size:22px;line-height:1.2;letter-spacing:-.015em;font-weight:600}
p{text-wrap:pretty}
.lead{font-size:19px;line-height:1.5;color:var(--muted);max-width:56ch}
.center{text-align:center}.center .lead{margin:18px auto 0}

/* Etiqueta de sección: frase corta en minúscula con un nodo hexagonal */
.eb{display:inline-flex;align-items:center;gap:10px;font:600 15px/1.3 var(--text);color:var(--indigo);margin-bottom:18px}
.eb::before{content:"";width:11px;height:12px;flex:none;background:currentColor;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.center .eb{justify-content:center}

/* ---------- Botones ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;font:600 16px/1.2 var(--text);padding:15px 24px;border-radius:12px;border:0;cursor:pointer;white-space:nowrap;
  transition:background-color .2s var(--ease),color .2s,box-shadow .2s,transform .15s var(--ease)}
.btn:active{transform:scale(.97)}
.btn.go{background:var(--indigo);color:#fff;box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 8px 20px -10px rgba(74,67,214,.7)}
.btn.go:hover{background:var(--indigo-2)}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn.ghost:hover{background:var(--ink);color:#fff}
.btn.ink{background:var(--ink);color:#fff}.btn.ink:hover{background:var(--ink-2)}
.btn.signal{background:var(--signal);color:var(--ink)}.btn.signal:hover{background:#6bd8f8}
.btn:disabled{opacity:.6;cursor:progress}
.btn svg{width:18px;height:18px;flex:none}

/* ---------- Anuncio ---------- */
.ann{background:var(--ink);color:#e4e8ff;font-size:14.5px;text-align:center;padding:10px 52px;position:relative}
.ann a{color:#fff;font-weight:600;text-decoration:underline;text-decoration-color:var(--signal);text-underline-offset:4px;text-decoration-thickness:2px}
.ann button{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:36px;height:36px;border-radius:8px;background:none;border:0;font-size:22px;line-height:1;cursor:pointer;color:#fff}
.ann button:hover{background:rgba(255,255,255,.1)}

/* ---------- Navegación ---------- */
.nav{position:sticky;top:0;z-index:40;transition:background-color .3s,box-shadow .3s,backdrop-filter .3s}
.nav.scrolled{background:rgba(244,246,252,.82);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);box-shadow:0 1px 0 var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:var(--nav-h);gap:24px}
.brand{display:inline-flex;align-items:center;gap:10px;font:700 21px var(--display);letter-spacing:-.02em}
.brand img{width:40px;height:40px;transition:transform .5s var(--ease)}
.brand:hover img{transform:rotate(-12deg) scale(1.06)}
.links{position:relative;display:flex;gap:4px;font-size:15.5px;font-weight:500}
.links a{position:relative;padding:8px 14px;border-radius:10px;color:var(--muted);transition:color .2s}
.links a:hover,.links a[aria-current]{color:var(--ink)}
.links .ind{position:absolute;bottom:2px;left:0;height:2px;width:0;border-radius:2px;background:var(--signal);transition:transform .45s var(--ease),width .45s var(--ease),opacity .3s;opacity:0;pointer-events:none}
.cta{display:flex;gap:8px;align-items:center}
.cta .txt{font-size:15.5px;font-weight:500;padding:10px 14px;border-radius:10px;color:var(--muted)}
.cta .txt:hover{color:var(--ink)}
.cta .btn{padding:12px 18px;font-size:15px}
.menu-btn{display:none;width:46px;height:46px;border-radius:12px;border:0;background:var(--ink);cursor:pointer;flex-direction:column;align-items:center;justify-content:center}
.menu-btn span{display:block;width:20px;height:2px;background:#fff;border-radius:2px;transition:transform .3s var(--ease),opacity .2s}
.menu-btn span+span{margin-top:5px}
.menu-btn[aria-expanded=true] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-btn[aria-expanded=true] span:nth-child(2){opacity:0}
.menu-btn[aria-expanded=true] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Menú móvil a pantalla completa */
.mmenu{position:fixed;inset:0;z-index:39;background:var(--ink);color:#fff;padding:var(--mt,96px) 24px 32px;display:flex;flex-direction:column;gap:6px;overflow-y:auto;
  clip-path:circle(0 at var(--mx,calc(100% - 47px)) var(--my,36px));visibility:hidden;transition:clip-path .55s var(--ease),visibility 0s .55s}
.mmenu.open{clip-path:circle(150% at var(--mx,calc(100% - 47px)) var(--my,36px));visibility:visible;transition:clip-path .6s var(--ease)}
.mmenu a{font:600 clamp(30px,8vw,44px)/1.15 var(--display);letter-spacing:-.03em;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.08);opacity:0;transform:translateY(14px);transition:opacity .35s,transform .45s var(--ease)}
.mmenu.open a{opacity:1;transform:none}
.mmenu.open a:nth-child(2){transition-delay:.05s}.mmenu.open a:nth-child(3){transition-delay:.1s}.mmenu.open a:nth-child(4){transition-delay:.15s}.mmenu.open a:nth-child(5){transition-delay:.2s}
.mmenu .btn{margin-top:auto;font-size:17px;padding:18px}
.mmenu .mfoot{color:#aab3d9;font-size:14px;margin-top:14px}
body.menu-open{overflow:hidden}
body.menu-open .nav{background:transparent;box-shadow:none;backdrop-filter:none}
body.menu-open .brand{color:#fff}
body.menu-open .menu-btn{background:var(--signal)}
body.menu-open .menu-btn span{background:var(--ink)}

@media(max-width:1000px){.links,.cta .txt{display:none}.menu-btn{display:flex}}
@media(max-width:520px){.cta .btn{display:none}}

/* ---------- Superficies compartidas ---------- */
.big{background:var(--tint);border-radius:var(--r-xl);padding:56px}
@media(max-width:700px){.big{padding:32px 18px;border-radius:var(--r-l)}}

.panel{background:var(--surface);border-radius:var(--r-m);overflow:hidden;box-shadow:0 0 0 1px var(--line),0 24px 48px -32px rgba(18,26,58,.35)}
.chrome{display:flex;gap:6px;padding:13px 16px;background:#f3f5fc;border-bottom:1px solid var(--line)}
.chrome b{width:10px;height:10px;border-radius:50%;background:var(--tint-2)}
.chrome b:first-child{background:#ff8a8a}.chrome b:nth-child(2){background:#ffcf5c}.chrome b:nth-child(3){background:#5fd39a}

/* Banda de llamada a la acción (tinta con trazas de circuito) */
.band{position:relative;overflow:hidden;margin-top:56px;background:var(--ink);color:#fff;border-radius:var(--r-xl);padding:56px;display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap;isolation:isolate}
.band h3{color:#fff;font-size:clamp(24px,3vw,34px);line-height:1.15;letter-spacing:-.025em;max-width:640px;font-weight:600}
.band .btn.ink{background:var(--signal);color:var(--ink)}
.band .btn.ink:hover{background:#6bd8f8}
.band .circuit{position:absolute;inset:0;z-index:-1;width:100%;height:100%;opacity:.55;pointer-events:none}
.band .circuit path{fill:none;stroke:#3c4785;stroke-width:1.5}
.band .circuit .pulse{stroke:var(--signal);stroke-width:2;stroke-dasharray:60 900;stroke-linecap:round;animation:pulse 6s linear infinite}
.band .circuit .pulse:nth-of-type(2n){animation-delay:-2.5s;animation-duration:7.5s}
.band .circuit circle{fill:#3c4785}
@keyframes pulse{from{stroke-dashoffset:960}to{stroke-dashoffset:0}}
@media(max-width:700px){.band{padding:36px 24px;border-radius:var(--r-l)}}

/* ---------- Formularios ---------- */
label{font-size:14.5px;font-weight:500;color:var(--ink);display:block}
input,textarea,select{width:100%;margin-top:6px;padding:13px 14px;font:400 16px var(--text);color:var(--ink);background:var(--surface);border:0;border-radius:var(--r-s);outline:0;box-shadow:inset 0 0 0 1.5px var(--line);transition:box-shadow .2s,background-color .2s}
input:hover,textarea:hover,select:hover{box-shadow:inset 0 0 0 1.5px #b9c1dd}
input:focus,textarea:focus,select:focus{box-shadow:inset 0 0 0 2px var(--indigo),0 0 0 4px rgba(74,67,214,.12)}

/* ---------- Pie ---------- */
footer{position:relative;overflow:hidden;background:var(--ink);color:#c9d0ee;border-radius:var(--r-xl) var(--r-xl) 0 0;margin-top:96px;padding:80px 0 0}
footer .brand{color:#fff}
.fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:48px}
footer p{max-width:320px;font-size:15.5px;margin-top:16px;color:#aab3d9}
footer .fh{font:600 15px var(--text);letter-spacing:0;color:#fff;margin-bottom:16px}
footer ul{list-style:none}
footer li{margin-bottom:10px;font-size:15.5px}
footer li a{color:#c9d0ee;transition:color .2s}
footer li a:hover{color:var(--signal)}
.copy{margin-top:64px;padding:24px 0 28px;border-top:1px solid rgba(255,255,255,.08);font-size:14px;color:#8d96bf;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.wordmark{font:800 clamp(90px,22vw,320px)/.78 var(--display);letter-spacing:-.06em;font-variation-settings:"wdth" 80;color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.1);text-align:center;margin-top:48px;user-select:none;white-space:nowrap}
@media(max-width:900px){.fgrid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.fgrid{grid-template-columns:1fr;gap:32px}footer{border-radius:var(--r-l) var(--r-l) 0 0}}

/* ---------- WhatsApp flotante ---------- */
.wa{position:fixed;right:20px;bottom:20px;z-index:35;width:56px;height:56px;border-radius:50%;background:#1fae5b;color:#fff;display:grid;place-items:center;box-shadow:0 10px 24px -8px rgba(18,26,58,.5);transform:translateY(90px);transition:transform .45s var(--ease),background-color .2s}
.wa.show{transform:none}
.wa:hover{background:#189a50}
.wa svg{width:28px;height:28px}

/* ---------- Traza de circuito (recorrido por la página, escritorio) ---------- */
.trace{position:absolute;left:max(16px,calc((100vw - var(--wrap)) / 2 - 36px));top:0;width:2px;pointer-events:none;z-index:1;display:none}
.trace .rail{position:absolute;inset:0;background:repeating-linear-gradient(to bottom,var(--line) 0 6px,transparent 6px 12px)}
.trace .fill{position:absolute;inset:0;background:linear-gradient(var(--violet),var(--signal));transform-origin:top;transform:scaleY(0)}
.trace .node{position:absolute;left:50%;width:14px;height:16px;margin-left:-7px;background:var(--paper);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);transition:background-color .35s}
.trace .node::after{content:"";position:absolute;inset:2.5px;background:var(--line);clip-path:inherit;transition:background-color .35s}
.trace .node.on::after{background:var(--signal)}
.trace .node.on{background:var(--indigo)}
@media(min-width:1320px){.trace{display:block}}

/* ---------- Revelado discreto de encabezados ---------- */
.js [data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js [data-reveal].in{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .js [data-reveal]{opacity:1;transform:none}
}