/* Base compartida de las piezas de contenido.
   Marca Data Insights: navy de fondo, cian de acento, Exo 2 en titulares y
   Manrope en cuerpo a 17px, que es el minimo legible en un telefono de gama
   baja — que es donde se abre casi todo esto. */
:root{
  --navy:#06192e; --panel:#0d2b4a; --panel2:#0a2340;
  --cyan:#72f5eb; --sobre-cyan:#04202b; --muted:#9db4c9; --borde:#16406e;
  --alerta:#f87171; --ambar:#fbbf24; --verde:#34d399;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--navy);color:#eaf3fb;
  font-family:Manrope,system-ui,-apple-system,sans-serif;font-size:17px;line-height:1.7}
h1,h2,h3,.cifra{font-family:"Exo 2",Manrope,sans-serif;font-weight:800;
  line-height:1.15;text-wrap:balance}
a{color:var(--cyan)}
a:focus-visible,button:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;
  border-radius:6px}
.env{max-width:720px;margin:0 auto;padding:0 20px}
header{padding:58px 0 30px}
.marca{font-size:12px;letter-spacing:.22em;color:var(--cyan);font-weight:700;margin:0}
h1{font-size:clamp(31px,6.5vw,48px);margin:16px 0 0}
.bajada{font-size:20px;color:var(--muted);margin:18px 0 0;text-wrap:pretty}
p{margin:0 0 20px}
h2{font-size:clamp(23px,4.5vw,30px);margin:44px 0 16px}
h3{font-size:20px;margin:30px 0 10px}
.destacado{border-left:3px solid var(--cyan);padding:2px 0 2px 20px;margin:30px 0;
  font-size:19px}
.destacado cite{display:block;font-size:14px;color:var(--muted);font-style:normal;
  margin-top:10px}
.tarj{border:1px solid var(--borde);border-radius:16px;background:var(--panel);
  padding:24px;margin:26px 0}
.tarj h3{margin-top:0}
.nota{font-size:15px;color:var(--muted)}

.cta{margin:46px 0 60px;padding:28px;border:1px solid var(--cyan);border-radius:16px;
  background:linear-gradient(180deg,rgba(114,245,235,.08),transparent)}
.cta h2{font-size:22px;margin:0 0 10px}
.cta p{color:var(--muted);font-size:16px;margin:0 0 18px}
.btn{display:inline-block;background:var(--cyan);color:var(--sobre-cyan);padding:14px 26px;
  border-radius:10px;font-weight:700;text-decoration:none;font-size:15px}
.btn2{display:inline-block;margin:14px 0 0 14px;color:var(--cyan);text-decoration:none;
  font-size:15px}
footer{border-top:1px solid var(--borde);padding:26px 0 46px;color:var(--muted);
  font-size:13px;margin-top:40px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ── Calculadoras ────────────────────────────────────────────────────────── */
.calc{border:1px solid var(--borde);border-radius:16px;background:var(--panel);
  padding:24px;margin:30px 0}
.campos{display:grid;gap:22px}
@media (min-width:680px){.campos{grid-template-columns:1fr 1fr}}
.campo label{display:block;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);font-weight:700;margin:0 0 5px}
.campo .lectura{display:flex;align-items:baseline;gap:8px;margin:0 0 6px}
.campo .lectura b{font-family:"Exo 2",sans-serif;font-size:28px;color:var(--cyan);
  font-variant-numeric:tabular-nums;line-height:1}
.campo .lectura span{font-size:13.5px;color:var(--muted)}
.campo input[type=range]{width:100%;accent-color:var(--cyan);height:26px;display:block}
.campo .pista{margin:2px 0 0;font-size:13px;color:var(--muted)}
.res{margin:26px 0 0;padding:22px 0 0;border-top:1px solid var(--borde)}
.res .et{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan);
  font-weight:700;margin:0 0 4px}
.res .gran{font-family:"Exo 2",sans-serif;font-weight:800;font-size:clamp(38px,9vw,58px);
  color:var(--cyan);line-height:1;margin:0;font-variant-numeric:tabular-nums}
.res .bajo{margin:10px 0 0;font-size:16.5px;color:#d5e4f2}
.res .bajo b{color:#eaf3fb}
.segundo{display:grid;gap:12px;margin:22px 0 0}
@media (min-width:620px){.segundo{grid-template-columns:1fr 1fr}}
.segundo div{border:1px solid var(--borde);border-radius:12px;padding:16px 18px;
  background:var(--panel2)}
.segundo .k{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  font-weight:700;margin:0 0 4px}
.segundo .v{font-family:"Exo 2",sans-serif;font-weight:800;font-size:24px;margin:0;
  font-variant-numeric:tabular-nums}
.segundo p:last-child{margin:6px 0 0;font-size:14.5px;color:#c9dcec}