/* ============================================================
   Nuvaus — Sistema de diseño reset-2026 (grafito + esmeralda)
   Fuente de verdad visual extraída de index.html (relanzamiento).
   Identidad oficial: grafito #0a0a0c + esmeralda #46b394 + logo Portal,
   Hanken Grotesk (sans) + IBM Plex Mono (labels). SIN serif.
   Usar en TODA página pública. Cargar después de la fuente de Google.
   ============================================================ */

:root{
  /* superficies */
  --bg-base:#0a0a0c; --bg-subtle:#101014; --bg-surface:#141419;
  --bg-elevated:#1b1b21; --bg-hover:#24242c;
  /* texto */
  --fg:#f4f5f7; --fg-muted:#a7aab2; --fg-dim:#7b7f88; --fg-faint:#7e828a;
  /* marca esmeralda */
  --brand:#46b394; --brand-soft:#9be7cc; --brand-deep:#16795f;
  --accent:#1f9b78; --accent-soft:#5bc4a3; --accent-deep:#0c5847;
  /* bordes */
  --border:rgba(255,255,255,.07); --border-strong:rgba(255,255,255,.12);
  --brand-border:rgba(159,231,204,.22);
  /* gradientes */
  --grad-text:linear-gradient(110deg,#9be7cc 0%,#46b394 45%,#16795f 100%);
  --grad-btn:linear-gradient(135deg,#9be7cc 0%,#46b394 48%,#16795f 100%);
  /* estados */
  --danger:#eb5757; --on-brand:#06231a;
  --ease-out:cubic-bezier(.16,.84,.44,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;color-scheme:dark}
body{
  font-family:'Hanken Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-weight:400;letter-spacing:-0.011em;line-height:1.55;
  background:var(--bg-base);color:var(--fg);
  min-height:100vh;min-height:100dvh;position:relative;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
[x-cloak]{display:none!important}
a{color:inherit}
img,svg{display:block;max-width:100%}

/* ===== Fondo cálido (halo esmeralda + grano + viñeta) ===== */
.bg-stage{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:var(--bg-base)}
.bg-fallback{position:absolute;inset:0;
  background:
    radial-gradient(46vw 46vw at 16% 14%, rgba(70,179,148,.18), transparent 60%),
    radial-gradient(42vw 42vw at 86% 86%, rgba(31,155,120,.16), transparent 62%),
    radial-gradient(38vw 30vw at 50% 50%, rgba(155,231,204,.06), transparent 70%)}
.grain{position:fixed;inset:0;z-index:1;pointer-events:none;mix-blend-mode:overlay;opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.vignette{position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse at 50% 40%,transparent 38%,rgba(5,5,7,.62) 100%)}

/* ===== Layout ===== */
.wrap{position:relative;z-index:5;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
.container{width:100%;max-width:1140px;margin:0 auto;padding:0 clamp(1.25rem,4vw,3rem)}
.section{padding:clamp(3rem,7vw,5.5rem) 0}

/* ===== Topbar / nav ===== */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.5rem clamp(1.25rem,4vw,3rem)}
.logo-lockup{height:30px;width:auto;display:block;color:var(--fg)}
@media (max-width:560px){.logo-lockup{height:26px}}
.nav-links{display:inline-flex;align-items:center;gap:1.5rem}
.nav-links a{font-family:'Hanken Grotesk',sans-serif;font-weight:500;font-size:.9rem;
  color:var(--fg-muted);text-decoration:none;transition:color .2s}
.nav-links a:hover{color:var(--fg)}

/* botón pill secundario (acceso clientes, links nav) */
.client-access{display:inline-flex;align-items:center;gap:.5rem;
  font-family:'Hanken Grotesk',sans-serif;font-weight:600;font-size:.875rem;color:var(--fg);
  text-decoration:none;padding:.55rem 1.1rem;border-radius:9999px;
  border:1px solid var(--border-strong);background:rgba(159,231,204,.035);
  transition:border-color .25s,background .25s,transform .25s var(--ease-out);white-space:nowrap}
.client-access:hover{border-color:var(--brand-border);background:rgba(159,231,204,.09);transform:translateY(-1px)}
.client-access svg{width:15px;height:15px;stroke:var(--brand)}

/* ===== Tipografía ===== */
.eyebrow{display:inline-flex;align-items:center;gap:.6rem;
  font-family:'IBM Plex Mono',monospace;font-weight:500;font-size:.74rem;
  text-transform:uppercase;letter-spacing:.18em;color:var(--brand-soft)}
.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 10px var(--accent),0 0 20px rgba(31,155,120,.5)}
h1,.h1{font-family:'Hanken Grotesk',sans-serif;font-weight:800;letter-spacing:-0.032em;
  font-size:clamp(2rem,5.4vw,3.6rem);line-height:1.08}
h2,.h2{font-family:'Hanken Grotesk',sans-serif;font-weight:800;letter-spacing:-0.022em;
  font-size:clamp(1.6rem,3.6vw,2.5rem);line-height:1.12}
h3,.h3{font-family:'Hanken Grotesk',sans-serif;font-weight:700;letter-spacing:-0.015em;
  font-size:clamp(1.15rem,2.2vw,1.4rem);line-height:1.2}
.accent{font-weight:800;font-style:normal;
  background:var(--grad-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  padding-right:.04em}
.lead{font-family:'Hanken Grotesk',sans-serif;font-weight:400;color:var(--fg-muted);
  font-size:clamp(1rem,2.1vw,1.18rem);line-height:1.6}
.lead b{color:var(--fg);font-weight:600}
.mono{font-family:'IBM Plex Mono',monospace}
.muted{color:var(--fg-muted)}

/* prose para páginas de texto (privacy, terms, changelog) */
.prose{max-width:46rem;color:var(--fg-muted);line-height:1.7}
.prose h2{margin:2.2rem 0 .8rem;color:var(--fg)}
.prose h3{margin:1.6rem 0 .6rem;color:var(--fg)}
.prose p{margin:.8rem 0}
.prose ul,.prose ol{margin:.8rem 0 .8rem 1.3rem}
.prose li{margin:.35rem 0}
.prose a{color:var(--brand-soft);text-decoration:underline;text-underline-offset:2px}
.prose a:hover{color:var(--brand)}
.prose strong{color:var(--fg);font-weight:600}

/* ===== Botones ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;flex-shrink:0;position:relative;overflow:hidden;
  font-family:'Hanken Grotesk',sans-serif;font-weight:700;font-size:.95rem;color:var(--on-brand);
  background:var(--grad-btn);border:none;border-radius:9999px;padding:.75rem 1.6rem;cursor:pointer;
  text-decoration:none;white-space:nowrap;
  transition:transform .2s var(--ease-out),filter .2s,box-shadow .25s}
.btn::after{content:"";position:absolute;top:0;left:-130%;width:60%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-18deg);transition:left .6s var(--ease-out)}
.btn:hover{transform:translateY(-1px);filter:brightness(1.05);box-shadow:0 10px 30px -8px rgba(70,179,148,.5)}
.btn:hover::after{left:130%}
.btn:disabled{opacity:.6;cursor:not-allowed;transform:none}
.btn-outline{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:'Hanken Grotesk',sans-serif;font-weight:600;font-size:.95rem;color:var(--fg);
  background:rgba(159,231,204,.035);border:1px solid var(--border-strong);border-radius:9999px;
  padding:.72rem 1.5rem;cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:border-color .25s,background .25s,transform .25s var(--ease-out)}
.btn-outline:hover{border-color:var(--brand-border);background:rgba(159,231,204,.09);transform:translateY(-1px)}

/* ===== Formularios ===== */
.field{display:flex;gap:.5rem;width:100%;background:rgba(20,20,25,.66);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid var(--border-strong);border-radius:9999px;padding:.4rem .4rem .4rem 1.25rem;
  transition:border-color .25s,box-shadow .25s}
.field:focus-within{border-color:var(--brand);box-shadow:0 0 0 4px rgba(70,179,148,.13)}
.field input,.field textarea,.field select{flex:1;min-width:0;background:transparent;border:none;outline:none;color:var(--fg);
  font-family:'Hanken Grotesk',sans-serif;font-size:1rem;font-weight:400}
.field input::placeholder,.field textarea::placeholder{color:var(--fg-faint)}
.input{width:100%;background:rgba(20,20,25,.66);border:1px solid var(--border-strong);border-radius:.85rem;
  padding:.8rem 1rem;color:var(--fg);font-family:'Hanken Grotesk',sans-serif;font-size:1rem;outline:none;
  transition:border-color .25s,box-shadow .25s}
.input:focus{border-color:var(--brand);box-shadow:0 0 0 4px rgba(70,179,148,.13)}
.label{font-family:'IBM Plex Mono',monospace;font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;color:var(--fg-dim)}

/* ===== Cards ===== */
.card{background:var(--bg-surface);border:1px solid var(--border);border-radius:1rem;padding:1.5rem;
  transition:border-color .25s,transform .25s var(--ease-out)}
.card:hover{border-color:var(--border-strong);transform:translateY(-2px)}
.badge{display:inline-flex;align-items:center;gap:.4rem;font-family:'IBM Plex Mono',monospace;
  font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--brand-soft);
  background:rgba(159,231,204,.08);border:1px solid var(--brand-border);border-radius:9999px;padding:.35rem .8rem}

/* chip */
.bchip{display:inline-flex;align-items:center;gap:.5rem;font-family:'IBM Plex Mono',monospace;
  font-weight:500;font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--fg-muted);
  background:rgba(20,20,25,.55);border:1px solid var(--border);border-radius:9999px;padding:.5rem .95rem;
  transition:border-color .25s,color .25s,transform .25s var(--ease-out),background .25s}
.bchip:hover{border-color:var(--brand-border);color:var(--fg);transform:translateY(-2px);background:rgba(159,231,204,.06)}
.bchip .bdot{width:5px;height:5px;border-radius:50%;background:var(--accent);box-shadow:0 0 7px var(--accent)}

/* ===== Feedback ===== */
.success{display:flex;flex-direction:column;align-items:center;gap:.6rem;text-align:center;
  background:rgba(31,155,120,.10);border:1px solid var(--brand-border);
  border-radius:1rem;padding:1.5rem 1.75rem;max-width:30rem}
.success .ico{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--grad-btn)}
.success .ico svg{width:24px;height:24px;stroke:var(--on-brand)}
.msg-error{font-size:.85rem;color:var(--danger)}
.spinner{width:18px;height:18px;border:2px solid rgba(6,35,26,.35);border-top-color:var(--on-brand);
  border-radius:50%;animation:nv-spin .7s linear infinite}
@keyframes nv-spin{to{transform:rotate(360deg)}}

/* ===== Footer ===== */
.footer{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem;
  padding:1.4rem clamp(1.25rem,4vw,3rem);border-top:1px solid var(--border)}
.footer .fbrand{font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--fg-muted);display:inline-flex;align-items:center;gap:.5rem}
.footer .fbrand .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent)}
.footer .ftag{font-family:'IBM Plex Mono',monospace;font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--fg-dim)}
.footer .ftag b{color:var(--brand-soft);font-weight:500}
.footer .flinks{display:inline-flex;align-items:center;gap:1.25rem}
.footer a{color:var(--fg-muted);text-decoration:none;font-size:.8rem;display:inline-flex;align-items:center;gap:.4rem;transition:color .2s}
.footer a:hover{color:var(--fg)}
.footer a svg{width:16px;height:16px;stroke:currentColor;fill:none}
@media (max-width:640px){.footer{justify-content:center;text-align:center}.footer .ftag{order:3;width:100%}}

/* atribución Nuvaus (sello de autoría) */
.nv-attrib{font-family:'IBM Plex Mono',monospace;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-dim)}
.nv-attrib a{color:var(--fg-muted);text-decoration:none;transition:color .2s}
.nv-attrib a:hover{color:var(--brand-soft)}

/* ===== Animación de entrada + a11y ===== */
.reveal{opacity:0;transform:translateY(16px);filter:blur(6px)}
.ready .reveal{animation:nv-reveal .95s var(--ease-out) forwards;animation-delay:var(--d,0s)}
@keyframes nv-reveal{to{opacity:1;transform:none;filter:none}}
*:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:4px}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:var(--bg-base)}
::-webkit-scrollbar-thumb{background:var(--bg-hover);border-radius:5px;border:2px solid var(--bg-base)}
::-webkit-scrollbar-thumb:hover{background:#34343d}
@media (prefers-reduced-motion:reduce){
  .eyebrow .dot{animation:none!important}
  .reveal{opacity:1!important;transform:none!important;filter:none!important;animation:none!important}
  html{scroll-behavior:auto}
}

/* ============================================================
   Compat: utilidades Tailwind legacy nv-* → esmeralda
   Para páginas con Tailwind compilado (diagnostico, ai-factory).
   Fuerza tokens/fuentes legacy (#0D0D14, Plus Jakarta, Inter…) al
   sistema reset-2026 sin reescribir el Tailwind purgado. !important
   vence a las utilidades Tailwind (no-important) sin importar el orden.
   ============================================================ */
.bg-nv-base{background-color:var(--bg-base)!important}
.bg-nv-subtle{background-color:var(--bg-subtle)!important}
.bg-nv-surface{background-color:var(--bg-surface)!important}
.bg-nv-surface\/50,.bg-nv-surface\/60{background-color:rgba(20,20,25,.6)!important}
.bg-nv-elevated{background-color:var(--bg-elevated)!important}
.bg-nv-elevated\/60{background-color:rgba(27,27,33,.6)!important}
.text-nv-text{color:var(--fg)!important}
.text-nv-muted{color:var(--fg-muted)!important}
.text-nv-purple{color:var(--brand)!important}
.text-nv-cyan{color:var(--brand-soft)!important}
.border-nv-border{border-color:var(--border)!important}
.border-nv-border-strong{border-color:var(--border-strong)!important}
.border-nv-purple{border-color:var(--brand)!important}
.border-nv-cyan{border-color:var(--accent-soft)!important}
.from-nv-purple{--tw-gradient-from:var(--brand)!important}
.from-nv-cyan{--tw-gradient-from:var(--accent-soft)!important}
.to-nv-cyan{--tw-gradient-to:var(--brand-soft)!important}
.to-nv-pink{--tw-gradient-to:var(--accent)!important}
.focus\:border-nv-purple:focus{border-color:var(--brand)!important}
/* fuentes legacy (Plus Jakarta / Inter / Satoshi / Clash) → Hanken / IBM Plex Mono */
.font-heading{font-family:'Hanken Grotesk',-apple-system,BlinkMacSystemFont,sans-serif!important}
.font-body{font-family:'Hanken Grotesk',-apple-system,BlinkMacSystemFont,sans-serif!important}
.font-mono{font-family:'IBM Plex Mono',ui-monospace,monospace!important}