/* =====================================================================
   nerds.ai · Tools — capa de componentes
   Depende de tokens.css (cargar ANTES). Usa solo variables canónicas.
   Regla de marca: titulares en Vastago Grotesk Medium (500) máx.
   Palabra acento en Behind The Nineties itálica, púrpura sólido.
   ===================================================================== */

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--frost); color:var(--nerds-ink-soft);
  font-family:var(--nerds-font-sans); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{ color:var(--purple-700); text-decoration:none; }
h1,h2,h3,h4{ font-family:var(--nerds-font-sans); font-weight:500; color:var(--nerds-ink); line-height:1.12; letter-spacing:-.015em; margin:0; }
p{ margin:0 0 1em; }
.muted{ color:var(--nerds-ink-muted); }
.center{ text-align:center; }
.accent-word{ font-family:var(--nerds-font-display); font-style:italic; font-weight:500; color:var(--purple-600); }
.accent-word.on-dark{ color:var(--purple-400); }

/* ---------- Layout ---------- */
.wrap{ max-width:1120px; margin:0 auto; padding:0 24px; }
.narrow{ max-width:780px; }

/* numeric / data uses Inter */
.data{ font-family:var(--nerds-font-data); }

/* ---------- Section label (punto + uppercase) ---------- */
.seclbl{
  font-family:var(--nerds-font-sans); font-weight:600; font-size:12px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--purple-700); display:inline-flex; align-items:center; gap:10px; margin-bottom:14px;
}
.seclbl::before{ content:""; width:8px; height:8px; border-radius:999px; background:var(--purple-600); }
.seclbl.on-dark{ color:var(--purple-300); }
.seclbl.on-dark::before{ background:var(--purple-400); }

/* ---------- Top nav (oscuro, como el sitio) ---------- */
.nv{ position:sticky; top:0; z-index:60; background:rgba(7,6,20,.85); backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.08); }
.nv .wrap{ display:flex; align-items:center; gap:22px; height:64px; }
.nv .logo img{ height:24px; display:block; }
.nv .back{ color:rgba(255,255,255,.82); font-weight:500; font-size:14.5px; }
.nv .back:hover{ color:var(--purple-300); }
.nv .sp{ margin-left:auto; }
.nv .cta{ background:var(--nerds-primary); color:#fff; padding:10px 18px; border-radius:999px;
  font-weight:500; font-size:14.5px; transition:background .15s; }
.nv .cta:hover{ background:var(--nerds-primary-hover); }
@media(max-width:620px){
  .nv .wrap{ gap:12px; height:56px; padding:0 16px; }
  .nv .logo{ flex:0 0 auto; }
  .nv .logo img{ height:21px; }
  .nv .back{ display:none; }
  .nv .cta{ flex:0 0 auto; padding:8px 14px; font-size:13.5px; white-space:nowrap; }
}

/* ---------- Buttons ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:var(--nerds-font-sans);
  font-weight:500; font-size:15px; line-height:1; padding:14px 24px; border-radius:999px; border:1.5px solid transparent;
  cursor:pointer; transition:background .15s, box-shadow .2s, transform .1s; white-space:nowrap; }
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:var(--nerds-primary); color:#fff; box-shadow:0 8px 22px rgba(105,94,255,.32); }
.btn-primary:hover{ background:var(--nerds-primary-hover); }
.btn-ghost{ background:transparent; color:var(--nerds-ink); border-color:var(--nerds-border-light); }
.btn-ghost:hover{ border-color:var(--purple-400); color:var(--purple-700); }
.btn-ghost-dark{ background:transparent; color:#fff; border-color:var(--nerds-border-onDark); }
.btn-ghost-dark:hover{ background:var(--graphite); }
.btn-sm{ padding:9px 16px; font-size:13.5px; }
.btn-block{ width:100%; }

/* ---------- Hero (cabecera de cada tool) ---------- */
.hero{ position:relative; overflow:hidden; background:var(--nerds-stage-deep); color:#fff; padding:44px 0 124px; }
.hero .glow{ position:absolute; border-radius:999px; pointer-events:none; filter:blur(18px); }
.hero .glow-1{ width:560px; height:560px; top:-220px; right:-160px;
  background:radial-gradient(circle, rgba(105,94,255,.5) 0%, rgba(105,94,255,0) 65%); }
.hero .glow-2{ width:380px; height:380px; bottom:-200px; left:-120px;
  background:radial-gradient(circle, rgba(255,172,121,.28) 0%, rgba(255,172,121,0) 65%); }
.hero .wrap{ position:relative; z-index:2; }
.hero h1{ color:#fff; font-size:clamp(28px,4.4vw,46px); max-width:780px; }
.hero .lede{ color:var(--powercoat); font-size:clamp(16px,2.1vw,19px); max-width:640px; margin-top:14px; line-height:1.55; }
.hero .persona{ margin-top:20px; font-size:13.5px; color:var(--powercoat); }
.hero .persona b{ color:#fff; font-weight:500; }

/* card subida sobre el hero */
.stage{ margin-top:-92px; position:relative; z-index:3; padding-bottom:30px; }
.card{ background:#fff; border:1px solid var(--nerds-border-light); border-radius:var(--nerds-radius-lg);
  box-shadow:var(--nerds-shadow-card); padding:30px; }
.card + .card{ margin-top:22px; }
.card h2{ font-size:23px; margin-bottom:6px; }
.card .sub{ color:var(--nerds-ink-muted); margin-bottom:22px; font-size:15px; }

.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.grid3{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
@media(max-width:860px){ .grid2,.grid3{ grid-template-columns:1fr; } .stage{ margin-top:-72px; } }

/* split inputs | results */
.split{ display:grid; grid-template-columns:1fr 1fr; }
.split .pane{ padding:30px; }
.split .pane-in{ border-right:1px solid var(--nerds-border-light); }
.split .pane-out{ background:linear-gradient(180deg,#FBFAFF,#F3F1FD); border-radius:0 var(--nerds-radius-lg) var(--nerds-radius-lg) 0; }
@media(max-width:860px){ .split{ grid-template-columns:1fr; } .split .pane-in{ border-right:none; border-bottom:1px solid var(--nerds-border-light);} .split .pane-out{ border-radius:0 0 var(--nerds-radius-lg) var(--nerds-radius-lg);} }

/* ---------- Form controls ---------- */
.field{ margin-bottom:20px; }
.field > label{ display:block; font-family:var(--nerds-font-sans); font-weight:500; font-size:14px; color:var(--nerds-ink); margin-bottom:7px; }
.field .hint{ font-size:12.5px; color:var(--nerds-ink-muted); margin-top:6px; }
.control{ position:relative; }
input[type=text],input[type=number],input[type=tel],select,textarea{
  width:100%; font-family:var(--nerds-font-data); font-size:15.5px; color:var(--nerds-ink); background:#fff;
  border:1.5px solid var(--nerds-border-light); border-radius:var(--nerds-radius-sm); padding:12px 14px;
  transition:border .15s, box-shadow .15s; outline:none; }
input:focus,select:focus,textarea:focus{ border-color:var(--purple-500); box-shadow:0 0 0 4px rgba(130,121,255,.15); }
input.input-prefix,select.input-prefix{ padding-left:42px; }
.prefix{ position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--nerds-ink-muted); font-weight:600; pointer-events:none; font-family:var(--nerds-font-data); font-size:14px; }
.row-inline{ display:flex; gap:10px; align-items:center; }
.row-inline > *{ flex:1; }

input[type=range]{ -webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:999px; background:var(--purple-100); outline:none; margin-top:8px; }
input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:22px; height:22px; border-radius:50%; background:var(--purple-600); border:3px solid #fff; box-shadow:0 2px 6px rgba(105,94,255,.5); cursor:pointer; }
input[type=range]::-moz-range-thumb{ width:18px; height:18px; border-radius:50%; background:var(--purple-600); border:3px solid #fff; cursor:pointer; }
.range-val{ float:right; font-family:var(--nerds-font-data); font-weight:700; color:var(--purple-700); }

.seg{ display:inline-flex; background:var(--plume); border-radius:999px; padding:5px; gap:3px; flex-wrap:wrap; }
.seg button{ border:none; background:transparent; font-family:var(--nerds-font-sans); font-weight:500; font-size:14px; color:var(--nerds-ink-muted); padding:8px 16px; border-radius:999px; cursor:pointer; transition:.15s; }
.seg button.on{ background:var(--purple-600); color:#fff; }

/* choice cards (quiz) */
.choices{ display:grid; gap:10px; }
.choice{ display:flex; gap:12px; align-items:flex-start; border:1.5px solid var(--nerds-border-light); border-radius:var(--nerds-radius-md); padding:14px 16px; cursor:pointer; transition:.15s; background:#fff; }
.choice:hover{ border-color:var(--purple-300); background:#FCFBFF; }
.choice.on{ border-color:var(--purple-600); background:var(--purple-100); box-shadow:0 0 0 3px rgba(105,94,255,.12); }
.choice .dot{ flex:0 0 auto; width:20px; height:20px; border-radius:50%; border:2px solid var(--purple-300); margin-top:2px; }
.choice.on .dot{ border-color:var(--purple-600); background:var(--purple-600); box-shadow:inset 0 0 0 3px #fff; }
.choice .txt{ font-size:14.5px; color:var(--nerds-ink-soft); }
.choice .txt b{ color:var(--nerds-ink); font-weight:500; }

/* ---------- Results ---------- */
.metric{ margin-bottom:18px; }
.metric .lbl{ font-size:12.5px; font-weight:600; color:var(--nerds-ink-muted); text-transform:uppercase; letter-spacing:.06em; }
.metric .big{ font-family:var(--nerds-font-data); font-size:clamp(30px,5vw,46px); font-weight:700; color:var(--purple-700); letter-spacing:-.03em; line-height:1.05; }
.metric .big.ember{ color:var(--ember-700); }
.metric .big.crit{ color:var(--nerds-danger); }
.metric .big.good{ color:var(--highland); }
.metric .note{ font-size:13px; color:var(--nerds-ink-muted); }

.statline{ display:flex; justify-content:space-between; gap:12px; padding:11px 0; border-bottom:1px dashed var(--nerds-border-light); font-size:14.5px; }
.statline:last-child{ border-bottom:none; }
.statline b{ color:var(--nerds-ink); font-family:var(--nerds-font-data); font-weight:600; }

.badge{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; padding:5px 12px; border-radius:999px; }
.badge.purple{ background:var(--purple-100); color:var(--purple-900); }
.badge.ember{ background:var(--ember-200); color:var(--ember-900); }
.badge.good{ background:#DDEFE7; color:var(--highland); }
.badge.crit{ background:#FBE0E4; color:#A11437; }
.badge.info{ background:#DFF3EA; color:var(--highland); }

.bar{ height:12px; background:var(--plume); border-radius:999px; overflow:hidden; }
.bar > i{ display:block; height:100%; border-radius:999px; background:var(--grad-accent-word); transition:width .6s cubic-bezier(.2,.8,.2,1); }

.callout{ border-left:4px solid var(--purple-600); background:var(--purple-100); border-radius:0 var(--nerds-radius-sm) var(--nerds-radius-sm) 0; padding:14px 16px; font-size:14px; color:var(--purple-950); }
.callout.ember{ border-color:var(--ember-500); background:var(--ember-200); color:var(--ember-900); }
.callout b{ color:var(--nerds-ink); }

.reco{ display:flex; gap:12px; padding:13px 0; border-bottom:1px solid var(--nerds-border-light); }
.reco:last-child{ border-bottom:none; }
.reco .n{ flex:0 0 auto; width:26px; height:26px; border-radius:50%; background:var(--purple-600); color:#fff; font-family:var(--nerds-font-data); font-weight:700; font-size:13px; display:flex; align-items:center; justify-content:center; }
.reco .rtxt{ font-size:14px; }

.hidden{ display:none !important; }
.empty-out{ color:var(--nerds-ink-muted); text-align:center; padding:34px 12px; font-size:14.5px; }

.codebox{ position:relative; background:var(--purple-1000); color:var(--purple-100); border-radius:var(--nerds-radius-md); padding:18px; font-family:var(--nerds-font-mono); font-size:12.5px; line-height:1.55; overflow:auto; white-space:pre-wrap; word-break:break-word; }
.copybtn{ position:absolute; top:10px; right:10px; }

/* ---------- CTA band ---------- */
.cta-band{ position:relative; overflow:hidden; background:var(--nerds-stage); border-radius:var(--nerds-radius-lg); padding:38px; color:#fff; text-align:center; margin-top:26px; }
.cta-band .glow{ position:absolute; width:520px; height:520px; border-radius:999px; top:-300px; left:50%; transform:translateX(-50%); background:radial-gradient(circle, rgba(105,94,255,.45) 0%, rgba(105,94,255,0) 65%); filter:blur(20px); }
.cta-band > *{ position:relative; z-index:1; }
.cta-band h3{ color:#fff; font-size:26px; margin-bottom:8px; }
.cta-band p{ color:var(--powercoat); max-width:540px; margin:0 auto 22px; }

/* ---------- Footer ---------- */
.ft{ background:var(--nerds-stage-deep); color:var(--powercoat); padding:40px 0 30px; margin-top:50px; }
.ft .wrap{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:18px; }
.ft img{ height:22px; opacity:.95; }
.ft a{ color:var(--purple-200); }
.ft .links{ display:flex; gap:18px; flex-wrap:wrap; font-size:14px; }
.ft small{ display:block; width:100%; color:var(--slate); font-size:12.5px; margin-top:12px; }

.disclaimer{ font-size:12px; color:var(--slate); margin-top:14px; line-height:1.5; }
.quadrant{ width:100%; height:auto; }

/* ---------- Hub ---------- */
.hub-hero{ position:relative; overflow:hidden; background:var(--nerds-stage-deep); color:#fff; padding:60px 0 70px; }
.hub-hero .glow-1{ position:absolute; width:620px; height:620px; border-radius:999px; top:-240px; right:-140px; background:radial-gradient(circle, rgba(105,94,255,.5) 0%, rgba(105,94,255,0) 65%); filter:blur(18px); }
.hub-hero .glow-2{ position:absolute; width:420px; height:420px; border-radius:999px; bottom:-260px; left:-120px; background:radial-gradient(circle, rgba(255,172,121,.26) 0%, rgba(255,172,121,0) 65%); filter:blur(18px); }
.hub-hero .wrap{ position:relative; z-index:2; }
.hub-hero h1{ color:#fff; font-size:clamp(32px,5vw,54px); max-width:840px; }
.hub-hero p{ color:var(--powercoat); font-size:19px; max-width:640px; margin-top:14px; }
.tool-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:26px; }
@media(max-width:900px){ .tool-grid{ grid-template-columns:1fr 1fr; } }
@media(max-width:620px){ .tool-grid{ grid-template-columns:1fr; } }
.tool-card{ position:relative; background:#fff; border:1px solid var(--nerds-border-light); border-radius:var(--nerds-radius-lg); padding:26px 24px; box-shadow:var(--nerds-shadow-card); transition:transform .15s, box-shadow .2s; display:flex; flex-direction:column; overflow:hidden; }
.tool-card::before{ content:""; position:absolute; top:0; left:0; right:0; height:4px; background:var(--grad-accent-word); }
.tool-card:hover{ transform:translateY(-4px); box-shadow:var(--nerds-shadow-elevated); }
.tool-card .ic{ width:48px; height:48px; border-radius:14px; background:var(--purple-100); display:flex; align-items:center; justify-content:center; font-size:23px; margin-bottom:14px; }
.tool-card h3{ font-size:19px; margin-bottom:6px; }
.tool-card p{ font-size:14px; color:var(--nerds-ink-muted); flex:1; }
.tool-card .who{ font-size:11.5px; font-weight:600; color:var(--purple-700); text-transform:uppercase; letter-spacing:.06em; margin-top:16px; }
.section-title{ font-family:var(--nerds-font-sans); font-weight:500; font-size:24px; color:var(--nerds-ink); margin:46px 0 0; }