/* ============================================================
   CALCULATUNOTA — Base: tokens, reset y utilidades de layout
   Paleta: índigo profundo + verde menta suave sobre marfil frío
   Display: Fraunces (serif moderno) · UI: Space Grotesk · Texto: Inter
   ============================================================ */

/* ---------- 1. Tokens y variables ---------- */
:root{
  --ink:#1a1d2b;          /* texto principal, casi negro azulado */
  --ink-soft:#565b73;     /* texto secundario */
  --paper:#f6f5f1;        /* fondo marfil frío */
  --paper-2:#eeedf3;      /* fondo alternativo lila muy claro */
  --card:#ffffff;
  --indigo:#3a3aff;       /* acento principal */
  --indigo-deep:#1e1b4b;  /* fondo hero oscuro */
  --indigo-soft:#e6e6ff;
  --mint:#1fb892;         /* éxito / verde suave */
  --mint-soft:#dff5ee;
  --amber:#e8923b;        /* justo */
  --amber-soft:#fcefe0;
  --coral:#e8556b;        /* complicado */
  --coral-soft:#fce3e7;
  --line:#e4e3dd;
  --line-2:#d7d6e6;

  --r-lg:28px;
  --r-md:20px;
  --r-sm:14px;
  --shadow-sm:0 2px 10px rgba(26,29,43,.05);
  --shadow:0 14px 40px -16px rgba(26,29,43,.22);
  --shadow-lg:0 40px 80px -30px rgba(30,27,75,.35);

  --font-display:'Fraunces',Georgia,serif;
  --font-ui:'Space Grotesk',system-ui,sans-serif;
  --font-body:'Inter',system-ui,sans-serif;

  --maxw:1180px;
}

/* ---------- 2. Reset ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--paper);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}
input,select{font-family:inherit}
/* quitar las flechas nativas de los campos numéricos (desentonan con el diseño) */
input[type=number]{-moz-appearance:textfield;appearance:textfield}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
:focus-visible{outline:3px solid var(--indigo);outline-offset:2px;border-radius:6px}

/* fondo decorativo con burbujas suaves */
body::before{
  content:"";position:fixed;inset:0;z-index:-2;
  background:
    radial-gradient(60vw 50vw at 85% -5%, rgba(58,58,255,.10), transparent 60%),
    radial-gradient(50vw 40vw at -10% 30%, rgba(31,184,146,.10), transparent 55%),
    radial-gradient(45vw 45vw at 110% 80%, rgba(58,58,255,.07), transparent 55%);
}

/* ---------- 3. Utilidades de layout ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.section{padding:96px 0}
.section-head{max-width:660px;margin:0 auto 56px;text-align:center}
.eyebrow{
  font-family:var(--font-ui);font-weight:600;font-size:.78rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--indigo);
  display:inline-block;margin-bottom:16px;
}
h1,h2,h3{font-family:var(--font-display);font-weight:500;line-height:1.08;letter-spacing:-.02em}
.section-head h2{font-size:clamp(2rem,4vw,2.9rem)}
.section-head p{color:var(--ink-soft);font-size:1.08rem;margin-top:16px}