/* ============================================================
   Confi — sistema compartido (dark-only, "búnker con una sola luz")
   Disciplina Modal: el mint es la ÚNICA fuente de luz viva.
   Todo lo demás = grises tintados de verde. Semáforo reservado.
   ============================================================ */
:root{
  /* superficies — negro-verde, de más hondo a más elevado */
  --void:#05100C;        /* canvas más profundo */
  --ground:#0A130F;      /* fondo base */
  --carbon:#0E1814;      /* nav, superficie elevada */
  --carbon-2:#12211B;    /* tarjetas */
  --carbon-3:#182A23;    /* tarjetas internas / hover */
  --line:#1C2A23;        /* hairline */
  --line-2:#28382F;      /* borde marcado */

  /* texto — escala de verde-grises (nunca gris puro) */
  --ink:#EAF4EE;         /* texto primario, títulos */
  --sage:#9DB2A6;        /* cuerpo — verde-gris legible */
  --moss:#7B9084;        /* secundario */
  --fern:#5C7167;        /* labels, micro-copy */
  --pine:#42544A;        /* muy tenue, deshabilitado */

  /* la única luz viva */
  --mint:#45F5C2;
  --mint-2:#8BFFDD;
  --verde:#13B98A;
  --verde-deep:#0C7C63;
  --mint-dim:rgba(69,245,194,.11);
  --mint-line:rgba(69,245,194,.26);

  /* semáforo — reservado SOLO para veredictos */
  --critica:#FF5A47; --alta:#FF9245; --media:#F2C33D; --baja:#6D7E74;
  --confia:#2FE0A6;  --cuidado:#F2B33D; --peligro:#FF5A47;
  --critica-soft:rgba(255,90,71,.13); --alta-soft:rgba(255,146,69,.12);
  --media-soft:rgba(242,195,61,.12);  --confia-soft:rgba(47,224,166,.12);
  --cuidado-soft:rgba(242,179,61,.13);--peligro-soft:rgba(255,90,71,.12);

  --glow:0 0 0 1px rgba(69,245,194,.09), 0 26px 64px -30px rgba(19,185,138,.4);
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 22px 54px -26px rgba(0,0,0,.82);
  --shadow-s:0 1px 2px rgba(0,0,0,.5);

  --r-s:10px; --r-m:14px; --r-l:22px; --r-xl:28px;
  --maxw:1080px;

  /* familias tipográficas */
  --f-ui:"General Sans","Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-serif:"Sentient","Fraunces",Georgia,serif;         /* mundo Personal */
  --f-geo:"Cabinet Grotesk","General Sans",sans-serif;   /* mundo Code */
  --f-mono:"JetBrains Mono","IBM Plex Mono",ui-monospace,monospace;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--f-ui); line-height:1.62; font-size:16px;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
.shell{max-width:var(--maxw);margin:0 auto;padding:0 clamp(18px,4vw,34px)}
.mono{font-family:var(--f-mono)}
.tnums{font-variant-numeric:tabular-nums}
::selection{background:rgba(69,245,194,.26);color:#04140F}

/* eyebrow mono compartido */
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--f-mono);font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mint);
  background:var(--mint-dim);border:1px solid var(--mint-line);
  padding:6px 13px;border-radius:100px;font-weight:500;
}

/* ---------------- NAV compartido con switch Personal|Code ---------------- */
header.nav{
  position:sticky;top:0;z-index:80;
  backdrop-filter:blur(18px) saturate(150%);
  background:color-mix(in srgb,var(--ground) 78%,transparent);
  border-bottom:1px solid var(--line);
}
.nav .shell{display:flex;align-items:center;gap:16px;height:62px}
.brand{display:flex;align-items:center;gap:9px;font-family:var(--f-serif);
  font-weight:700;font-size:21px;letter-spacing:-.02em}
.brand .i{color:var(--mint)}
.brand svg{width:29px;height:29px;filter:drop-shadow(0 0 12px rgba(69,245,194,.5))}

/* el switch: el navbar que "maneja" los dos mundos */
.switch{display:inline-flex;background:var(--carbon);border:1px solid var(--line-2);
  border-radius:100px;padding:3px;gap:2px}
.switch a{
  font-family:var(--f-mono);font-size:12.5px;font-weight:500;letter-spacing:.03em;
  color:var(--moss);padding:7px 16px;border-radius:100px;transition:color .16s,background .16s;
  display:inline-flex;align-items:center;gap:7px;line-height:1;
}
.switch a .d{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.5}
.switch a:hover{color:var(--ink)}
.switch a.on{color:#04140F;background:var(--mint)}
.switch a.on .d{opacity:1;background:#04140F}
.switch a.code.on{background:var(--mint)}

.navright{margin-left:auto;display:flex;align-items:center;gap:22px}
.navright a.l{font-size:14px;color:var(--sage);font-weight:500;transition:color .15s}
.navright a.l:hover{color:var(--ink)}
.navright .pill{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--mint);border:1px solid var(--mint-line);
  padding:6px 12px;border-radius:100px}
.navright .cta{font-family:var(--f-ui);font-size:14px;font-weight:600;color:#04140F;
  background:var(--mint);padding:9px 17px;border-radius:100px;transition:transform .15s,box-shadow .15s}
.navright .cta:hover{transform:translateY(-1px);box-shadow:0 10px 26px -12px rgba(69,245,194,.6)}
@media(max-width:720px){.navright a.l{display:none}.nav .shell{gap:10px}
  .switch a{padding:7px 13px;font-size:12px}}
@media(max-width:420px){.brand span.txt{display:none}}

/* ---------------- botón base ---------------- */
.btn{font-family:var(--f-ui);font-size:15.5px;font-weight:600;cursor:pointer;
  padding:15px 26px;border-radius:var(--r-m);border:none;background:var(--mint);
  color:#04140F;white-space:nowrap;transition:transform .15s,box-shadow .15s;
  display:inline-flex;align-items:center;justify-content:center;gap:8px}
.btn:hover{transform:translateY(-1px);box-shadow:0 12px 30px -12px rgba(69,245,194,.55)}
.btn:disabled{opacity:.5;cursor:default;transform:none;box-shadow:none}

/* ---------------- footer compartido ---------------- */
footer.foot{border-top:1px solid var(--line);background:var(--void);
  padding:52px 0 34px;color:var(--fern);font-size:13px;line-height:1.7;margin-top:0}
.foot .frow{display:flex;justify-content:space-between;gap:28px;flex-wrap:wrap;align-items:flex-start}
.foot .brand{color:var(--ink);font-size:19px}
.foot .tag{color:var(--moss);margin-top:9px;max-width:34ch;font-size:13.5px;font-family:var(--f-ui)}
.foot .fcol h4{font-family:var(--f-mono);font-size:10.5px;text-transform:uppercase;
  letter-spacing:.08em;color:var(--mint);margin:0 0 12px;font-weight:500}
.foot .fcol a{display:block;font-size:13.5px;color:var(--sage);margin-bottom:9px;
  transition:color .15s;font-family:var(--f-ui)}
.foot .fcol a:hover{color:var(--ink)}
.foot .legal{margin-top:38px;padding-top:20px;border-top:1px solid var(--line);
  font-size:12px;color:var(--pine);line-height:1.6;display:flex;justify-content:space-between;
  gap:16px;flex-wrap:wrap}

/* ---------------- utilidades de sección ---------------- */
.kicker{font-family:var(--f-mono);font-size:12px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--mint);font-weight:500}
.reduced-safe{}
@media(prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;animation-iteration-count:1!important}}