/* Estilo "consola de IA": siempre oscuro. */
:root{
  --fondo:#0a0e13;--fondo2:#0f141b;--panel:#121922;--panel2:#18212c;--borde:#223042;--borde2:#2f4258;
  --texto:#e6edf3;--suave:#93a1b0;--tenue:#6b7a8a;
  --verde:#3ee08f;--verde2:#2bb673;--cian:#5cc8ff;--violeta:#a78bfa;--ambar:#f2b84b;--rojo:#ff6b6b;
  --mono:ui-monospace,"Cascadia Code","JetBrains Mono","SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --brillo:0 0 0 1px #3ee08f33,0 8px 30px #3ee08f14;--sombra:0 20px 60px #0000004d;--rejilla:#ffffff06;
  color-scheme:dark
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--fondo);color:var(--texto);font-family:var(--sans);line-height:1.65;
  background-image:radial-gradient(60rem 30rem at 85% -10%,#5cc8ff14,transparent 60%),radial-gradient(50rem 30rem at -10% 10%,#3ee08f10,transparent 60%);
  background-attachment:fixed}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;
  background-image:linear-gradient(var(--rejilla) 1px,transparent 1px),linear-gradient(90deg,var(--rejilla) 1px,transparent 1px);background-size:32px 32px;
  -webkit-mask-image:linear-gradient(#000,transparent 70%);mask-image:linear-gradient(#000,transparent 70%)}
a{color:var(--cian);text-underline-offset:4px}
a:hover{color:var(--verde)}
header,main,footer{max-width:1150px;margin:auto;padding:24px;position:relative}

/* Encabezado */
header{display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid var(--borde)}
.marca{display:block;font-family:var(--mono);font-size:19px;font-weight:600;color:var(--texto);text-decoration:none;line-height:1.2}
.marca:hover{color:var(--texto)}
.marca>span{color:var(--verde);margin-right:8px}
.marca::after{content:"";display:inline-block;width:.55em;height:1.05em;margin-left:3px;vertical-align:-3px;background:var(--verde);animation:cursor 1.1s steps(1) infinite}
.marca small{display:none}
@keyframes cursor{50%{opacity:0}}
nav{display:flex;gap:22px;font-family:var(--mono);font-size:13px}
nav a{text-decoration:none;color:var(--suave)}
nav a::before{content:"./";color:var(--tenue)}
nav a:hover{color:var(--verde)}

/* Portada */
.portada{padding:70px 0 55px;max-width:900px}
.ceja{font-family:var(--mono);text-transform:lowercase;font-size:12px;font-weight:500;letter-spacing:.5px;color:var(--verde);margin:0}
.ceja::before{content:"// "}
h1{font-weight:650;font-size:clamp(34px,5vw,62px);line-height:1.08;letter-spacing:-1.5px;margin:18px 0}
h1 em{font-style:normal;background:linear-gradient(90deg,var(--verde),var(--cian) 55%,var(--violeta));-webkit-background-clip:text;background-clip:text;color:transparent}
.bajada{font-size:19px;max-width:620px;color:var(--suave)}
.boton{display:inline-flex;align-items:center;gap:8px;background:var(--verde);color:#04140b;border:0;border-radius:10px;padding:13px 22px;font:600 15px var(--mono);text-decoration:none;cursor:pointer;transition:transform .15s,box-shadow .15s}
.boton:hover{color:#04140b;box-shadow:0 0 0 4px #3ee08f33;transform:translateY(-1px)}
.boton:disabled{opacity:.5;cursor:wait;transform:none}
.indicadores{margin-top:32px;font-family:var(--mono);font-size:12.5px;color:var(--suave);background:var(--panel);border:1px solid var(--borde);border-radius:10px;padding:12px 16px;display:block;width:fit-content;max-width:100%}
.indicadores::before{content:"$ indicadores --hoy  ";color:var(--verde)}

/* Tarjetas */
.tarjetas{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:16px}
.tarjeta{background:linear-gradient(180deg,var(--panel),var(--fondo2));border:1px solid var(--borde);border-radius:14px;padding:22px 22px 26px;text-decoration:none;color:var(--texto);position:relative;transition:border-color .15s,box-shadow .15s,transform .15s}
.tarjeta:hover{color:var(--texto);border-color:var(--verde2);box-shadow:var(--brillo);transform:translateY(-2px)}
.tarjeta span{font-family:var(--mono);font-size:11px;color:var(--cian);background:#5cc8ff14;border:1px solid #5cc8ff33;border-radius:6px;padding:2px 8px}
.tarjeta h2::first-letter{text-transform:uppercase}
.tarjeta h2{font-size:20px;font-weight:600;line-height:1.25;margin:14px 0 8px}
.tarjeta p{font-size:13.5px;color:var(--suave);margin:0 0 18px}
.tarjeta b{position:absolute;right:20px;bottom:14px;font-family:var(--mono);font-size:18px;color:var(--tenue)}
.tarjeta:hover b{color:var(--verde)}
.panel{background:var(--panel);border:1px dashed var(--borde2);border-radius:14px;padding:28px;margin-top:40px}
.panel h2{margin:8px 0}
.panel p:not(.ceja){color:var(--suave)}

/* Página de calculadora */
.migas{font-family:var(--mono);font-size:12px;color:var(--tenue);margin:10px 0 30px}
.migas::before{content:"~/ "}
.intro{max-width:860px}
.intro h1{font-size:clamp(30px,4vw,46px)}
.intro>p:not(.ceja){color:var(--suave)}
.fuente{font-size:12.5px;line-height:1.8}
.alerta{font-family:var(--mono);padding:11px 15px;background:#f2b84b12;border:1px solid #f2b84b40;border-left:3px solid var(--ambar);border-radius:8px;font-size:12.5px;color:var(--texto)}
.alerta::before{content:"⚠ ";color:var(--ambar)}
.alerta.ok{background:#3ee08f10;border-color:#3ee08f40;border-left-color:var(--verde)}
.alerta.ok::before{content:"✓ ";color:var(--verde)}

.calculadora{display:grid;grid-template-columns:1.35fr 1fr;border:1px solid var(--borde);background:var(--panel);border-radius:14px;overflow:hidden;margin-top:22px;box-shadow:var(--sombra);position:relative;padding-top:38px}
.calculadora::before{content:"●  ●  ●     calculadora";position:absolute;top:0;left:0;right:0;height:38px;display:flex;align-items:center;padding:0 16px;font-family:var(--mono);font-size:12px;color:var(--tenue);background:var(--panel2);border-bottom:1px solid var(--borde);white-space:pre}
.calculadora form{padding:28px;min-width:0}
.campos{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:26px}
.campos label{display:flex;flex-direction:column;gap:7px;font-size:12.5px;font-weight:500;color:var(--suave);min-width:0}
.campos input,.campos select{width:100%;min-width:0;border:1px solid var(--borde2);border-radius:8px;padding:11px 12px;font:16px var(--mono);color:var(--texto);background:var(--fondo2);transition:border-color .15s,box-shadow .15s}
.campos input:focus,.campos select:focus{outline:none;border-color:var(--verde);box-shadow:0 0 0 3px #3ee08f2e}
.campos .check{grid-column:1/-1;flex-direction:row;align-items:flex-start;font-weight:400}
.check input{width:18px;flex:0 0 18px;margin-top:4px;accent-color:var(--verde)}
.resultado{background:var(--fondo2);border-left:1px solid var(--borde);padding:28px;min-width:0;font-family:var(--mono)}
#resultado{color:var(--suave);font-size:13.5px}
.resultado dl{margin:16px 0}
.resultado dt{font-size:12px;margin-top:14px;color:var(--tenue)}
.resultado dt::before{content:"> ";color:var(--verde)}
.resultado dd{margin:2px 0 0;font-size:21px;font-weight:600;color:var(--texto);overflow-wrap:anywhere}
.resultado dd:first-of-type{font-size:34px;color:var(--verde);text-shadow:0 0 24px #3ee08f40}
.secundario{border:1px solid var(--borde2);background:none;border-radius:8px;color:var(--texto);padding:11px 16px;cursor:pointer;font:500 13px var(--mono)}
.secundario:hover:not(:disabled){border-color:var(--verde);color:var(--verde)}
.secundario:disabled{opacity:.4;cursor:default}
.pequeno{font-size:11.5px;color:var(--tenue)}
#error{color:var(--rojo);font-size:13px;font-family:var(--mono)}

/* Lectura */
.lectura{max-width:800px;margin:45px auto}
.lectura h1{font-size:clamp(28px,4vw,40px)}
.lectura h2{font-size:21px;font-weight:600;margin:36px 0 10px}
.lectura h2::before{content:"# ";font-family:var(--mono);color:var(--verde)}
.lectura p{color:var(--suave);font-size:15px}
.lectura details{padding:14px 0;border-bottom:1px solid var(--borde)}
summary{cursor:pointer;font-weight:500}
summary::marker{color:var(--verde)}
.relacionadas{display:flex;flex-wrap:wrap;gap:10px;font-size:12.5px}
.relacionadas a{font-family:var(--mono);text-decoration:none;border:1px solid var(--borde);border-radius:999px;padding:5px 12px;color:var(--suave)}
.relacionadas a:hover{border-color:var(--verde);color:var(--verde)}
.tabla-scroll{overflow:auto;border:1px solid var(--borde);border-radius:10px}
table{border-collapse:collapse;font-size:12.5px;width:100%;font-family:var(--mono)}
td,th{text-align:left;padding:10px 12px;border-bottom:1px solid var(--borde)}
th{background:var(--panel2);color:var(--suave);font-weight:500}

footer{border-top:1px solid var(--borde);margin-top:40px;font-size:13px;padding-bottom:45px;color:var(--suave)}
footer strong{color:var(--texto)}
.salto{position:absolute;top:-100px;background:var(--panel);color:var(--texto);padding:10px;z-index:5}
.salto:focus{top:0}
:focus-visible{outline:2px solid var(--verde);outline-offset:3px}

@media(max-width:800px){.tarjetas{grid-template-columns:1fr 1fr}.calculadora{grid-template-columns:1fr}.resultado{border-left:0;border-top:1px solid var(--borde);padding:24px}}
@media(max-width:560px){
  header,main,footer{padding:16px}
  header{align-items:flex-start;flex-direction:column;gap:14px}
  nav{gap:18px}
  .portada{padding:30px 0}.portada h1{font-size:42px}.bajada{font-size:17px}
  .tarjetas{grid-template-columns:1fr}.tarjeta{padding:20px}
  .intro h1{font-size:32px;letter-spacing:-.5px}
  .campos{grid-template-columns:1fr;gap:16px}
  .calculadora form,.resultado{padding:20px}
  .lectura{margin:30px 0}.migas{margin:5px 0 22px}
  .resultado dd:first-of-type{font-size:30px}
  .indicadores{display:block}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.marca::after{animation:none}*{transition:none!important}}