:root{
  --pri:#1E3A8A; --pri-600:#2743A6; --ok:#16A34A; --warn:#F59E0B; --bad:#DC2626;
  --bg:#F8FAFC; --surf:#FFFFFF; --surf-2:#F3F4F6; --surf-3:#E5E7EB; --text:#111827; --text-2:#374151; --muted:#6B7280;
  --r:14px; --r-sm:10px; --shadow: 0 16px 40px rgba(2,6,23,.12), 0 4px 12px rgba(2,6,23,.06);
}
[data-theme="dark"]{
  --bg:#0B1220; --surf:#0F172A; --surf-2:#111827; --surf-3:#1F2937; --text:#E5E7EB; --text-2:#CBD5E1; --muted:#94A3B8;
  --shadow: 0 16px 40px rgba(0,0,0,.5), 0 4px 12px rgba(0,0,0,.35);
}
*{box-sizing:border-box} html,body,#root{height:100%}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;background:var(--bg);color:var(--text)}
.container{max-width:1100px;margin:0 auto;padding:0 20px}
.row{display:flex;align-items:center} .spread{justify-content:space-between} .gap{gap:.6rem}
.grid2{display:grid;grid-template-columns:1.1fr .9fr;gap:24px} @media (max-width:900px){.grid2{grid-template-columns:1fr}}
/* grid-3: 3 columnas responsivo */
.grid-3{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 900px){
  .grid-3{ grid-template-columns: 1fr; }
}

/* steps: cards sencillos en 3 columnas */
.steps{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 900px){
  .steps{ grid-template-columns: 1fr; }
}
.step{
  background: var(--surf);
  border: 1px solid var(--surf-3);
  border-radius: var(--r-sm);
  padding: 14px;
}

/* que los iconos dentro de feature NO usen el estilo .icon del botón */
.feature .icon{
  width:auto; height:auto; border:0; background:transparent; box-shadow:none;
  display:inline-flex; align-items:center; justify-content:center;
  color: var(--text-2);
}

/* FAQ */
.faq details{
  border:1px solid var(--surf-3);
  background: var(--surf);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  margin: 8px 0;
}
.faq summary{
  cursor:pointer;
  font-weight:600;
  outline:none;
}
.btn{display:inline-flex;align-items:center;gap:.5rem;background:var(--pri);color:#fff;border:none;padding:.85rem 1.1rem;border-radius:999px;cursor:pointer;font-weight:600;text-decoration:none;box-shadow:var(--shadow)}
.btn:hover{background:var(--pri-600)} .btn.ghost{background:transparent;color:var(--pri);border:1px solid var(--pri)}
.tag{font-size:.8rem;padding:.25rem .6rem;border-radius:999px;background:var(--surf-2);color:var(--text-2);border:1px solid var(--surf-3)}
.icon{width:40px;height:40px;border-radius:10px;border:1px solid var(--surf-3);background:var(--surf);cursor:pointer}
.skip{position:absolute;left:-9999px;top:auto} .skip:focus{left:10px;top:10px}
.hdr{
  position:sticky;
  top:0;
  z-index:10;
  border-bottom:1px solid var(--surf-3);
  background: var(--surf); /* fondo sólido acorde al tema */
}
.hero{padding:72px 0 24px;background:radial-gradient(900px 320px at 80% -10%, rgba(30,58,138,.18), transparent 60%),radial-gradient(900px 280px at 10% -5%, rgba(22,163,74,.12), transparent 60%)}
.card{background:var(--surf);border:1px solid var(--surf-3);border-radius:var(--r);box-shadow:var(--shadow);padding:20px}
.feature{padding:14px;border:1px solid var(--surf-3);border-radius:var(--r-sm);background:var(--surf)}
.section{padding:48px 0}
.ftr{border-top:1px solid var(--surf-3);padding:24px 0;color:var(--text-2)}
.logo{
  height:36px;width:36px;border-radius:10px;
  background: var(--pri);      /* 👈 chip azul oscuro detrás */
  object-fit:contain;padding:4px;box-shadow:var(--shadow);
}
.lead{font-size:1.1rem;color:var(--text-2)} .hint{font-size:.85rem;color:var(--muted)} .muted{color:var(--text-2)}
.field{margin:10px 0} .field label{font-weight:600;display:block;margin-bottom:6px}
.field input{flex:0 0 200px;padding:.7rem;border-radius:10px;border:1px solid var(--surf-3);background:var(--surf);color:var(--text)}
.field output{font-variant-numeric:tabular-nums}
.gauge{
  aspect-ratio:1/1;
  border-radius:999px;
  display:grid;
  place-items:center;
  width: 220px;
  height: 220px;
  margin: 0 auto;
}
.gauge-in{
  width:70%;
  height:70%;
  border-radius:999px;
  background:var(--surf);
  display:grid;
  place-items:center;
}
.gauge-num{
  font-size:2rem;
  font-weight:800;
}
.pill{margin-top:6px;font-weight:700;border-radius:999px;padding:.2rem .6rem;border:1px solid var(--surf-3);display:inline-block}
.pill.ok{color:var(--ok)} .pill.warn{color:var(--warn)} .pill.bad{color:var(--bad)}
.bar{
  position:relative;
  height:10px; /* más visible */
  border-radius:999px;
  background: linear-gradient(
    to right,
    var(--bad) 0%,
    var(--warn) 50%,
    var(--ok) 100%
  );
  margin-top:12px;
}
.bar-mk{
  position:absolute;
  top:-4px;
  width:2px;
  height:18px;
  background:#111; /* marcador */
}
.mt-sm{margin-top:8px}

/* hace que todos los anclajes desplacen suave (fallback JS ya incluido) */
html { scroll-behavior: smooth; }

/* evita que el header tape el inicio de cada sección al anclar */
.section, #simulador, #caracteristicas, #cta {
  scroll-margin-top: 84px; /* ≈ alto del header (ajusta si cambia) */
}
.input-rounded {
  flex: 1 1 220px;
  padding: 0.9rem 1rem;
  border: 1px solid var(--surf-3);
  border-radius: 999px;   /* 👈 esquinas redondas */
  background: var(--surf);
  color: var(--text);
  font-size: 1rem;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.input-rounded:focus {
  border-color: var(--pri);
  box-shadow: 0 0 0 3px rgba(30, 58, 138, 0.15);
}


/*# sourceMappingURL=styles.f4b94e296ffac6f30cb6.css.map*/