/* Estilos propios de esta calculadora. Lo comun esta en site.css y calc.css. */

:root{
  --bg:#fbf9f5; --surface:#ffffff; --surface-2:#f4f1ea; --border:#e6e0d5;
  --ink:#16181c; --ink-2:#4a4f57; --ink-muted:#6f737b;
  --accent:#0e6e7a; --accent-ink:#ffffff;
  --c-grav:#0e6e7a; --c-roll:#c84a28; --c-aero:#3c9084;
  --good:#0e6e4a; --warn:#a8541c;
  --radius:14px; --shadow:0 1px 2px rgba(0,0,0,.05),0 8px 24px rgba(0,0,0,.05);
}
html[data-theme="dark"]{
  --bg:#101312; --surface:#1a1d1c; --surface-2:#242826; --border:#333733;
  --ink:#f2f2ef; --ink-2:#c2c2bc; --ink-muted:#8f8f88;
  --accent:#3fb3c0; --accent-ink:#0d0f12;
  --c-grav:#3fb3c0; --c-roll:#f2795a; --c-aero:#6cb8ab;
  --good:#4fc79a; --warn:#e0a05c;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35);
}
/* header */
header.site{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}
.brand{display:flex;align-items:center;gap:9px;font-weight:700;letter-spacing:-.02em;color:var(--ink);text-decoration:none}
/* hero */
.hero{padding:34px 0 10px;max-width:760px}
/* ad slots */
.ad{margin:26px 0;min-height:100px;display:flex;align-items:center;justify-content:center;
  border:1px dashed var(--border);border-radius:var(--radius);background:var(--surface-2);
  color:var(--ink-muted);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase}
/* layout */
.app{display:grid;grid-template-columns:1fr;gap:20px;margin-top:8px}
/* content */
section.content{max-width:820px}
details.faq{border:1px solid var(--border);border-radius:11px;padding:14px 16px;margin-bottom:10px;background:var(--surface)}
footer.site{border-top:1px solid var(--border);margin-top:56px;padding:28px 0 40px;font-size:.85rem;color:var(--ink-muted)}