/* ==========================================================================
   DeductHound, sistema visual de la web.
   Los tokens salen tal cual de ~/Desktop/Nimbo-design/brand/tokens.css: la web
   y la app son la MISMA marca. Tinta azul de libro de cuentas, papel frio, y
   un solo acento calido de oro reservado a los importes y al boton de accion.
   Regla de marca: el sabueso es concepto de naming. Aqui no se dibuja ningun
   perro. El wordmark es tipografico.
   ========================================================================== */

:root {
  /* ---------- tinta: la familia neutra, nunca gris ---------- */
  --ink-900: #0B1B2B;
  --ink-800: #12293E;
  --ink-700: #1B394F;
  --ink-600: #2E4A62;
  --ink-500: #47617A;
  --ink-450: #4E657E;
  --ink-400: #64798F;
  --ink-300: #8FA0B2;
  --ink-200: #BDC8D4;
  --ink-100: #DDE4EC;
  --ink-50:  #EEF2F7;

  /* ---------- papel: los fondos ---------- */
  --paper-0:   #FFFFFF;
  --paper-50:  #FAFBFD;
  --paper-100: #F4F7FA;
  --paper-200: #EAEFF5;
  --paper-300: #DDE5EE;
  --paper-400: #CBD6E2;

  /* ---------- azul: estructura ---------- */
  --blue-50:  #EAF2FD;
  --blue-100: #D3E4FB;
  --blue-200: #A9C8F3;
  --blue-300: #6FA2E6;
  --blue-400: #3C7BD1;
  --blue-500: #1F5FBA;
  --blue-600: #164B99;
  --blue-700: #113C7C;
  --blue-800: #0C2E5F;

  /* ---------- oro: dinero y CTA, nunca decorativo ---------- */
  --gold-50:  #FDF5E6;
  --gold-100: #FAE9C6;
  --gold-200: #F4D48D;
  --gold-300: #EDBB52;
  --gold-350: #E0A226;
  --gold-400: #C98A12;
  --gold-500: #AC7410;
  --gold-700: #7D5506;

  /* ---------- verde de contable: deduccion y ahorro ---------- */
  --green-50:  #E9F6F0;
  --green-100: #CDEBDF;
  --green-300: #6FC5A2;
  --green-500: #128A63;
  --green-600: #0D6E4E;
  --green-700: #0A573E;

  /* ---------- rojo: solo destructivo y campo obligatorio ---------- */
  --red-50:  #FDEEEC;
  --red-100: #FAD9D5;
  --red-500: #C0362B;
  --red-600: #9E271E;

  /* ---------- semanticos ---------- */
  --bg-canvas: var(--paper-100);
  --bg-surface: var(--paper-0);
  --bg-surface-alt: var(--paper-50);
  --bg-sunken: var(--paper-200);
  --bg-sunken-strong: var(--paper-300);
  --bg-tint-blue: var(--blue-50);
  --bg-tint-gold: var(--gold-50);
  --bg-tint-green: var(--green-50);
  --bg-tint-red: var(--red-50);
  --bg-inverse: var(--ink-900);

  --text-primary: var(--ink-900);
  --text-secondary: var(--ink-600);
  --text-tertiary: var(--ink-450);
  --text-on-accent: var(--ink-900);
  --text-on-brand: #FFFFFF;
  --text-on-inverse: var(--paper-100);
  --text-accent: var(--blue-600);
  --text-accent-strong: var(--blue-700);
  --text-money: var(--gold-700);
  --text-success: var(--green-700);
  --text-danger: var(--red-600);

  --accent: var(--gold-350);
  --accent-hover: var(--gold-400);
  --accent-soft: var(--gold-100);
  --brand: var(--blue-600);
  --brand-soft: var(--blue-50);
  --brand-strong: var(--blue-700);

  --border-hairline: rgba(11, 27, 43, 0.08);
  --border-soft: rgba(11, 27, 43, 0.13);
  --border-strong: rgba(11, 27, 43, 0.22);
  --border-accent: var(--gold-350);
  --border-brand: var(--blue-400);

  --cat-1: var(--blue-600);
  --cat-2: var(--blue-400);
  --cat-3: var(--blue-300);
  --cat-4: var(--green-500);
  --cat-5: var(--gold-350);
  --cat-6: var(--gold-500);
  --cat-rest: var(--ink-300);

  --grad-cta: linear-gradient(180deg, var(--gold-300) 0%, var(--gold-350) 100%);
  --grad-brand: linear-gradient(180deg, var(--blue-500) 0%, var(--blue-700) 100%);
  --grad-hero-bg: linear-gradient(180deg, #E9F1FA 0%, var(--paper-100) 74%);
  --grad-paper: linear-gradient(180deg, var(--paper-0) 0%, var(--paper-50) 100%);
  --grad-ink-block: linear-gradient(160deg, var(--ink-700) 0%, var(--ink-900) 100%);

  /* ---------- tipografia: SF Pro y nada mas, cero serif ---------- */
  --font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ---------- espaciado, escala estricta de 4pt ---------- */
  --s-1: 2px;  --s-2: 4px;  --s-3: 8px;  --s-4: 12px; --s-5: 16px; --s-6: 20px;
  --s-7: 24px; --s-8: 32px; --s-9: 40px; --s-10: 48px; --s-11: 64px; --s-12: 80px;
  --s-13: 104px;
  --gutter: 20px;

  /* ---------- radios cortos y sobrios ---------- */
  --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 18px; --r-xl: 24px; --r-pill: 999px;

  /* ---------- sombras: llevan la tinta de la marca, nunca negro ---------- */
  --shadow-xs: 0 1px 2px rgba(11, 27, 43, 0.06);
  --shadow-sm: 0 2px 6px rgba(11, 27, 43, 0.07), 0 1px 2px rgba(11, 27, 43, 0.05);
  --shadow-md: 0 6px 18px rgba(11, 27, 43, 0.09), 0 2px 5px rgba(11, 27, 43, 0.05);
  --shadow-lg: 0 16px 40px rgba(11, 27, 43, 0.15), 0 4px 10px rgba(11, 27, 43, 0.07);
  --shadow-accent: 0 6px 16px rgba(201, 138, 18, 0.30);
  --shadow-paper: 0 3px 12px rgba(11, 27, 43, 0.13), 0 1px 3px rgba(11, 27, 43, 0.08);

  --receipt-paper: #FFFDF7;
  --receipt-line: #D8D2C4;
  --receipt-ink: #6B6355;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 140ms;
  --dur-base: 240ms;

  --wrap: 1120px;
  --wrap-narrow: 720px;
  --tap-min: 44px;
}

/* ==========================================================================
   Reset minimo
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}
body {
  margin: 0;
  background: var(--bg-canvas);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: 17px;
  line-height: 1.62;
  letter-spacing: -0.009em;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--text-accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--text-accent-strong); }
button { font: inherit; }
hr { border: 0; border-top: 1px solid var(--border-hairline); margin: var(--s-9) 0; }

/* Numeros tabulares en TODO importe. No es pulido, es la marca. */
.num, .money, .kpi-v, .res-v, .q-amt, .plan-price, table td.num, .bar-v {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.wrap-narrow { width: 100%; max-width: var(--wrap-narrow); margin: 0 auto; padding: 0 var(--gutter); }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink-900); color: var(--paper-0);
  padding: var(--s-4) var(--s-6); border-radius: 0 0 var(--r-md) 0;
}
.skip-link:focus { left: 0; }

:focus-visible {
  outline: 3px solid var(--blue-500);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ==========================================================================
   Tipografia
   ========================================================================== */
h1, h2, h3, h4 { font-family: var(--font-display); margin: 0; }
h1 {
  font-size: clamp(34px, 5.1vw, 52px);
  line-height: 1.08;
  font-weight: 760;
  letter-spacing: -0.028em;
}
h2 {
  font-size: clamp(26px, 3.2vw, 34px);
  line-height: 1.16;
  font-weight: 740;
  letter-spacing: -0.024em;
  margin: 0 0 var(--s-5);
}
h3 {
  font-size: clamp(20px, 2.1vw, 23px);
  line-height: 1.24;
  font-weight: 700;
  letter-spacing: -0.016em;
  margin: 0 0 var(--s-4);
}
h4 {
  font-size: 17px; line-height: 1.3; font-weight: 640;
  letter-spacing: -0.011em; margin: 0 0 var(--s-3);
}
p { margin: 0 0 var(--s-6); }
.lede {
  font-size: clamp(18px, 2vw, 21px);
  line-height: 1.55;
  color: var(--text-secondary);
  letter-spacing: -0.012em;
}
.kicker {
  font-size: 12px; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--text-accent);
  margin: 0 0 var(--s-4);
}
.kicker-gold { color: var(--text-money); }
.small { font-size: 15px; line-height: 1.55; color: var(--text-secondary); }
.tiny { font-size: 13px; line-height: 1.5; color: var(--text-tertiary); }

/* ==========================================================================
   Wordmark. Tipografico, sin dibujo. El nombre vive en el HTML generado.
   ========================================================================== */
.wordmark {
  display: inline-flex; align-items: center; gap: var(--s-3);
  font-family: var(--font-display); font-weight: 760;
  font-size: 19px; letter-spacing: -0.026em;
  color: var(--text-primary); text-decoration: none;
}
.wordmark:hover { color: var(--text-primary); }
.wordmark .mark {
  width: 26px; height: 26px; flex: 0 0 26px;
  border-radius: 8px; background: var(--grad-ink-block);
  display: grid; place-items: center;
  box-shadow: var(--shadow-xs);
}
.wordmark .mark::after {
  content: ""; width: 12px; height: 14px; border-radius: 2px;
  background: var(--gold-300);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 78% 88%, 56% 100%, 34% 88%, 12% 100%, 0 88%);
}

/* ==========================================================================
   Cabecera y pie
   ========================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 20;
  background: rgba(244, 247, 250, 0.92);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--border-hairline);
}
.site-header .wrap {
  display: flex; align-items: center; gap: var(--s-6);
  min-height: 64px;
}
.site-nav { margin-left: auto; display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.site-nav a {
  display: inline-flex; align-items: center;
  min-height: var(--tap-min); padding: var(--s-3) var(--s-4);
  font-size: 15px; font-weight: 500; letter-spacing: -0.005em;
  color: var(--text-secondary); text-decoration: none; border-radius: var(--r-sm);
}
.site-nav a:hover { color: var(--text-primary); background: var(--bg-sunken); }
.nav-cta {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--tap-min); padding: var(--s-3) var(--s-6);
  margin-left: var(--s-3); border-radius: var(--r-sm);
  background: var(--grad-cta); color: var(--text-on-accent);
  font-size: 15px; font-weight: 700; letter-spacing: -0.005em;
  text-decoration: none; box-shadow: var(--shadow-accent); white-space: nowrap;
}
.nav-cta:hover { color: var(--text-on-accent); background: var(--gold-400); }

.site-footer {
  background: var(--bg-inverse); color: var(--text-on-inverse);
  margin-top: var(--s-13); padding: var(--s-11) 0 var(--s-9);
}
.site-footer a { color: var(--ink-100); text-decoration: none; }
.site-footer a:hover { color: var(--paper-0); text-decoration: underline; }
.footer-cols {
  display: grid; gap: var(--s-8);
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.footer-cols h4 {
  font-size: 12px; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--ink-300); font-weight: 700; margin-bottom: var(--s-4);
}
.footer-cols ul { list-style: none; margin: 0; padding: 0; }
.footer-cols li { margin-bottom: var(--s-1); }
.footer-cols li a {
  display: inline-flex; align-items: center; min-height: var(--tap-min);
  font-size: 15px; line-height: 1.35;
}
.footer-bottom {
  margin-top: var(--s-9); padding-top: var(--s-6);
  border-top: 1px solid rgba(200, 220, 240, 0.14);
  display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-7);
  align-items: center; justify-content: space-between;
  font-size: 13px; color: var(--ink-200);
}
.footer-bottom p { margin: 0; }

/* ==========================================================================
   Botones
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-3);
  min-height: 52px; padding: var(--s-4) var(--s-8);
  border-radius: var(--r-lg); border: 1px solid transparent;
  font-family: var(--font-display); font-size: 19px; font-weight: 700;
  letter-spacing: -0.014em; text-decoration: none; cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.btn:active { transform: translateY(1px); }
/* El CTA es oro con la letra en tinta. 9,81:1 arriba del degradado y 7,77:1
   abajo. Pasa AAA en los dos extremos, con el acento a plena saturacion. */
.btn-primary {
  background: var(--grad-cta); color: var(--text-on-accent);
  box-shadow: var(--shadow-accent);
}
.btn-primary:hover { background: var(--gold-400); color: var(--text-on-accent); }
.btn-secondary {
  background: var(--bg-surface); color: var(--text-primary);
  border-color: var(--border-strong); box-shadow: var(--shadow-xs);
}
.btn-secondary:hover { background: var(--bg-sunken); color: var(--text-primary); }
.btn-ghost {
  background: transparent; color: var(--text-accent);
  border-color: var(--border-brand); font-size: 17px; min-height: var(--tap-min);
  padding: var(--s-3) var(--s-6);
}
.btn-ghost:hover { background: var(--brand-soft); color: var(--text-accent-strong); }
.btn-block { width: 100%; }

/* ==========================================================================
   Secciones y bloques
   ========================================================================== */
.section { padding: var(--s-12) 0; }
.section-tight { padding: var(--s-11) 0; }
.section-alt { background: var(--bg-surface); border-block: 1px solid var(--border-hairline); }
.section-ink { background: var(--grad-ink-block); color: var(--text-on-inverse); }
.section-ink h2, .section-ink h3 { color: var(--paper-0); }
.section-ink p { color: var(--ink-100); }
.section-head { max-width: 680px; margin-bottom: var(--s-9); }
.section-head p { margin-bottom: 0; }

.hero {
  background: var(--grad-hero-bg);
  padding: var(--s-12) 0 var(--s-12);
  border-bottom: 1px solid var(--border-hairline);
}
.hero-grid {
  display: grid; gap: var(--s-10);
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;
}
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } }
.hero h1 { margin-bottom: var(--s-5); }
.hero .lede { margin-bottom: var(--s-8); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: center; }
.hero-note { margin: var(--s-6) 0 0; font-size: 14px; color: var(--text-tertiary); }

.cards {
  display: grid; gap: var(--s-6);
  grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
}
.card {
  background: var(--bg-surface); border: 1px solid var(--border-hairline);
  border-radius: var(--r-lg); padding: var(--s-7);
  box-shadow: var(--shadow-sm);
}
.card h3 { margin-bottom: var(--s-3); }
.card p:last-child { margin-bottom: 0; }
.card-num {
  display: inline-grid; place-items: center;
  width: 34px; height: 34px; border-radius: var(--r-sm);
  background: var(--brand-soft); color: var(--text-accent);
  font-weight: 700; font-size: 15px; margin-bottom: var(--s-5);
  font-variant-numeric: tabular-nums;
}
.card-gold .card-num { background: var(--bg-tint-gold); color: var(--text-money); }
.card-green .card-num { background: var(--bg-tint-green); color: var(--text-success); }

.trust {
  display: grid; gap: var(--s-5);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.trust-item {
  border-left: 3px solid var(--border-accent);
  padding-left: var(--s-5);
}
.trust-item h4 { margin-bottom: var(--s-2); }
.trust-item p { margin-bottom: 0; font-size: 15px; color: var(--text-secondary); }

.kpis {
  display: grid; gap: var(--s-5);
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.kpi {
  background: var(--bg-surface); border: 1px solid var(--border-hairline);
  border-radius: var(--r-md); padding: var(--s-6);
}
.kpi-v {
  font-family: var(--font-display); font-size: 34px; line-height: 1.1;
  font-weight: 730; letter-spacing: -0.03em; color: var(--text-money);
  display: block; margin-bottom: var(--s-2);
}
.kpi-l { font-size: 14px; color: var(--text-secondary); margin: 0; line-height: 1.4; }

.callout {
  background: var(--bg-tint-blue); border: 1px solid var(--blue-100);
  border-left: 4px solid var(--blue-500);
  border-radius: var(--r-md); padding: var(--s-6) var(--s-7);
  margin: var(--s-8) 0;
}
.callout p:last-child { margin-bottom: 0; }
.callout-gold { background: var(--bg-tint-gold); border-color: var(--gold-100); border-left-color: var(--gold-350); }
.callout-green { background: var(--bg-tint-green); border-color: var(--green-100); border-left-color: var(--green-500); }

.disclaimer {
  background: var(--bg-sunken); border: 1px solid var(--border-soft);
  border-radius: var(--r-md); padding: var(--s-5) var(--s-6);
  font-size: 14px; line-height: 1.55; color: var(--text-secondary);
  margin: var(--s-8) 0 0;
}
.disclaimer strong { color: var(--text-primary); }

/* ==========================================================================
   Mockup de recibo. Geometria propia, ni foto ni imagen generada.
   ========================================================================== */
.receipt-stack { position: relative; padding: var(--s-6) 0; }
.receipt {
  background: var(--receipt-paper);
  border-radius: var(--r-sm) var(--r-sm) 3px 3px;
  box-shadow: var(--shadow-paper);
  padding: var(--s-6) var(--s-6) var(--s-8);
  max-width: 300px; margin: 0 auto;
  position: relative;
  font-variant-numeric: tabular-nums;
}
.receipt::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 8px;
  background: var(--receipt-paper);
  clip-path: polygon(0 0, 100% 0, 100% 40%, 92% 100%, 84% 40%, 76% 100%, 68% 40%, 60% 100%, 52% 40%, 44% 100%, 36% 40%, 28% 100%, 20% 40%, 12% 100%, 4% 40%, 0 100%);
}
.receipt-store {
  font-family: var(--font-mono); font-size: 13px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--receipt-ink); text-align: center; margin: 0 0 var(--s-5);
}
.receipt-rule { border-top: 1px dashed var(--receipt-line); margin: var(--s-4) 0; }
.receipt-row {
  display: flex; justify-content: space-between; gap: var(--s-5);
  font-family: var(--font-mono); font-size: 12px; line-height: 1.9;
  color: var(--receipt-ink);
}
.receipt-row.is-total {
  font-size: 14px; font-weight: 700; color: var(--ink-800);
  padding-top: var(--s-2);
}
.receipt-tags { margin-top: var(--s-6); display: grid; gap: var(--s-3); }
.receipt-tag {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  background: var(--bg-surface); border: 1px solid var(--border-hairline);
  border-radius: var(--r-sm); padding: var(--s-3) var(--s-4);
  box-shadow: var(--shadow-xs);
  font-size: 13px; color: var(--text-secondary);
}
.receipt-tag b {
  color: var(--text-primary); font-weight: 640;
  font-variant-numeric: tabular-nums;
}
.receipt-tag.is-cat b { color: var(--text-accent); }
.receipt-tag.is-money b { color: var(--text-money); }

/* ==========================================================================
   Capturas del prototipo
   ========================================================================== */
.shots {
  display: grid; gap: var(--s-7);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  align-items: start;
}
.shot { text-align: center; }
.shot img {
  width: 100%; max-width: 260px; margin: 0 auto var(--s-4);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  background: var(--bg-surface);
}
.shot figcaption {
  font-size: 14px; line-height: 1.45; color: var(--text-secondary);
  max-width: 260px; margin: 0 auto;
}
.shot figcaption b { color: var(--text-primary); font-weight: 640; display: block; }

/* ==========================================================================
   Calculadora. La joya. Todo el calculo pasa en el navegador.
   ========================================================================== */
.calc {
  background: var(--bg-surface); border: 1px solid var(--border-soft);
  border-radius: var(--r-xl); box-shadow: var(--shadow-md);
  overflow: hidden;
}
.calc-steps {
  display: flex; gap: var(--s-2); padding: var(--s-5) var(--s-7);
  background: var(--bg-sunken); border-bottom: 1px solid var(--border-hairline);
  flex-wrap: wrap;
}
.calc-step {
  display: inline-flex; align-items: center; gap: var(--s-3);
  min-height: var(--tap-min); padding: var(--s-2) var(--s-5);
  border-radius: var(--r-pill); border: 1px solid transparent;
  font-size: 14px; font-weight: 600; color: var(--text-tertiary);
  background: transparent; cursor: pointer;
}
.calc-step[aria-current="step"] {
  background: var(--bg-surface); color: var(--text-primary);
  border-color: var(--border-soft); box-shadow: var(--shadow-xs);
}
.calc-step .n {
  display: grid; place-items: center; width: 22px; height: 22px;
  border-radius: var(--r-pill); background: var(--ink-100); color: var(--ink-600);
  font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.calc-step[aria-current="step"] .n { background: var(--blue-600); color: #FFFFFF; }
.calc-step.is-done .n { background: var(--green-600); color: #FFFFFF; }

.calc-body { padding: var(--s-8) var(--s-7); }
.calc-panel[hidden] { display: none; }
.calc-panel h3 { margin-bottom: var(--s-2); }
.calc-panel > p.small { margin-bottom: var(--s-7); }

.field { margin-bottom: var(--s-7); }
.field > label, .field > .field-label {
  display: block; font-size: 15px; font-weight: 600;
  letter-spacing: -0.005em; color: var(--text-primary); margin-bottom: var(--s-3);
}
.field .hint { display: block; font-size: 13px; color: var(--text-tertiary); font-weight: 400; margin-top: var(--s-1); }
.input-money { position: relative; display: flex; align-items: center; }
.input-money::before {
  content: "$"; position: absolute; left: var(--s-5);
  font-size: 19px; font-weight: 640; color: var(--text-tertiary); pointer-events: none;
}
.input-money input { padding-left: 34px; }
input[type="text"], input[type="email"], input[type="number"], select {
  width: 100%; min-height: 52px;
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--border-soft); border-radius: var(--r-md);
  background: var(--bg-surface-alt); color: var(--text-primary);
  font-family: var(--font-ui); font-size: 19px; font-weight: 600;
  letter-spacing: -0.011em; font-variant-numeric: tabular-nums;
}
select { font-size: 17px; font-weight: 500; }
input:focus, select:focus { border-color: var(--blue-400); background: var(--bg-surface); }
input::placeholder { color: var(--ink-300); font-weight: 400; }

.choices { display: grid; gap: var(--s-3); }
.choice {
  display: flex; align-items: flex-start; gap: var(--s-4);
  min-height: var(--tap-min); padding: var(--s-4) var(--s-5);
  border: 1px solid var(--border-soft); border-radius: var(--r-md);
  background: var(--bg-surface-alt); cursor: pointer;
}
.choice:hover { background: var(--bg-sunken); }
.choice input { width: auto; min-height: 0; margin: 3px 0 0; accent-color: var(--blue-600); }
.choice-t { font-size: 16px; font-weight: 600; color: var(--text-primary); display: block; }
.choice-d { font-size: 13px; color: var(--text-tertiary); display: block; margin-top: var(--s-1); }
.choice:has(input:checked) { border-color: var(--blue-400); background: var(--bg-tint-blue); }

.calc-actions {
  display: flex; gap: var(--s-4); flex-wrap: wrap;
  padding-top: var(--s-3);
}

/* respuesta rapida, arriba del todo */
.answer {
  background: var(--grad-ink-block); color: var(--text-on-inverse);
  border-radius: var(--r-xl); padding: var(--s-8) var(--s-7);
  margin-bottom: var(--s-9);
}
.answer .kicker { color: var(--gold-200); }
.answer h2 { color: var(--paper-0); margin-bottom: var(--s-4); }
.answer p { color: var(--ink-100); margin-bottom: 0; }
.answer p + p { margin-top: var(--s-4); }
.answer strong { color: var(--gold-200); }

/* resultados */
.res-head {
  display: grid; gap: var(--s-6);
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  margin-bottom: var(--s-8);
}
.res-big {
  background: var(--bg-tint-gold); border: 1px solid var(--gold-100);
  border-radius: var(--r-lg); padding: var(--s-7);
}
.res-big .res-l { font-size: 14px; font-weight: 600; color: var(--text-money); text-transform: uppercase; letter-spacing: 0.07em; margin: 0 0 var(--s-3); }
.res-big .res-v {
  font-family: var(--font-display); font-size: clamp(34px, 4.6vw, 44px); line-height: 1.04;
  font-weight: 740; letter-spacing: -0.032em; color: var(--ink-900); margin: 0;
}
.res-big .res-s { font-size: 14px; color: var(--ink-600); margin: var(--s-3) 0 0; }
.res-big.is-blue { background: var(--bg-tint-blue); border-color: var(--blue-100); }
.res-big.is-blue .res-l { color: var(--text-accent); }
.res-big.is-green { background: var(--bg-tint-green); border-color: var(--green-100); }
.res-big.is-green .res-l { color: var(--text-success); }

.res-table { width: 100%; border-collapse: collapse; margin: 0 0 var(--s-7); }
.res-table th, .res-table td {
  text-align: left; padding: var(--s-4) var(--s-3);
  border-bottom: 1px solid var(--border-hairline); font-size: 15px;
}
.res-table th { font-weight: 600; color: var(--text-secondary); }
.res-table td.num { text-align: right; font-weight: 640; color: var(--text-primary); }
.res-table tr.is-total td { border-top: 2px solid var(--border-strong); border-bottom: 0; font-weight: 700; font-size: 17px; }
.res-table tr.is-total td.num { color: var(--text-money); }
.res-table caption { text-align: left; font-size: 14px; color: var(--text-tertiary); padding-bottom: var(--s-3); }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.quarters { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-bottom: var(--s-8); }
.quarter {
  border: 1px solid var(--border-hairline); border-radius: var(--r-md);
  padding: var(--s-5); background: var(--bg-surface-alt);
}
.quarter.is-next { border-color: var(--border-accent); background: var(--bg-tint-gold); }
.quarter .q-l { font-size: 12px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-tertiary); margin: 0 0 var(--s-2); }
.quarter.is-next .q-l { color: var(--text-money); }
.quarter .q-amt {
  font-family: var(--font-display); font-size: 26px; font-weight: 700;
  letter-spacing: -0.022em; color: var(--text-primary); margin: 0;
}
.quarter .q-d { font-size: 13px; color: var(--text-secondary); margin: var(--s-2) 0 0; }

.chart-wrap {
  background: var(--bg-surface-alt); border: 1px solid var(--border-hairline);
  border-radius: var(--r-lg); padding: var(--s-7) var(--s-6) var(--s-6);
  margin-bottom: var(--s-8);
}
.chart-wrap h4 { margin-bottom: var(--s-6); }
.chart-legend { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6); margin-top: var(--s-6); }
.chart-legend span { display: inline-flex; align-items: center; gap: var(--s-3); font-size: 14px; color: var(--text-secondary); }
.chart-legend i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }

/* ==========================================================================
   Formulario de email
   ========================================================================== */
.capture {
  background: var(--bg-surface); border: 1px solid var(--border-accent);
  border-radius: var(--r-lg); padding: var(--s-8) var(--s-7);
  box-shadow: var(--shadow-sm);
}
.capture h3 { margin-bottom: var(--s-3); }
.capture > p { color: var(--text-secondary); font-size: 16px; }
.capture-row { display: flex; gap: var(--s-4); flex-wrap: wrap; margin-bottom: var(--s-5); }
.capture-row .input-money, .capture-row > label { flex: 1 1 260px; }
.capture-row input[type="email"] { font-size: 17px; font-weight: 500; }
.capture-row .btn { flex: 0 0 auto; }
.consent { display: flex; align-items: flex-start; gap: var(--s-4); font-size: 14px; color: var(--text-secondary); min-height: var(--tap-min); }
.consent input { width: auto; min-height: 0; margin: 3px 0 0; accent-color: var(--blue-600); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-msg { margin: var(--s-5) 0 0; font-size: 15px; font-weight: 600; min-height: 22px; }
.form-msg.is-ok { color: var(--text-success); }
.form-msg.is-err { color: var(--text-danger); }

/* ==========================================================================
   FAQ en acordeon
   ========================================================================== */
.faq { border-top: 1px solid var(--border-hairline); }
.faq details {
  border-bottom: 1px solid var(--border-hairline);
}
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-5);
  min-height: 60px; padding: var(--s-5) 0; cursor: pointer;
  font-family: var(--font-display); font-size: 17px; font-weight: 640;
  letter-spacing: -0.011em; color: var(--text-primary);
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: 0 0 12px; width: 12px; height: 12px;
  border-right: 2px solid var(--ink-450); border-bottom: 2px solid var(--ink-450);
  transform: rotate(45deg) translate(-3px, -3px);
  transition: transform var(--dur-base) var(--ease-out);
}
.faq details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.faq .faq-a { padding: 0 0 var(--s-6); max-width: 68ch; }
.faq .faq-a p:last-child { margin-bottom: 0; }

/* ==========================================================================
   Articulos y prosa
   ========================================================================== */
.prose { max-width: 68ch; }
.prose h2 { margin-top: var(--s-11); }
.prose h3 { margin-top: var(--s-9); }
.prose ul, .prose ol { margin: 0 0 var(--s-6); padding-left: var(--s-7); }
.prose li { margin-bottom: var(--s-3); }
.prose blockquote {
  margin: var(--s-8) 0; padding: var(--s-5) var(--s-7);
  border-left: 4px solid var(--gold-350); background: var(--bg-tint-gold);
  border-radius: 0 var(--r-md) var(--r-md) 0; color: var(--text-secondary);
}
.prose blockquote p:last-child { margin-bottom: 0; }
.article-meta {
  display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6);
  font-size: 14px; color: var(--text-tertiary); margin: var(--s-6) 0 0;
}
.article-cta {
  background: var(--bg-tint-blue); border: 1px solid var(--blue-100);
  border-radius: var(--r-lg); padding: var(--s-8) var(--s-7); margin: var(--s-11) 0;
}
.article-cta h2 { margin-top: 0; }
.post-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-6); }
.post-list li {
  background: var(--bg-surface); border: 1px solid var(--border-hairline);
  border-radius: var(--r-lg); padding: var(--s-7); box-shadow: var(--shadow-xs);
}
.post-list h3 { margin-bottom: var(--s-3); }
.post-list h3 a { color: var(--text-primary); text-decoration: none; }
.post-list h3 a:hover { color: var(--text-accent); }
.post-list p { margin-bottom: 0; color: var(--text-secondary); font-size: 16px; }

.pill-row { display: flex; flex-wrap: wrap; gap: var(--s-3); margin: 0 0 var(--s-7); }
.pill {
  display: inline-flex; align-items: center; min-height: 34px;
  padding: var(--s-2) var(--s-5); border-radius: var(--r-pill);
  background: var(--bg-sunken); border: 1px solid var(--border-hairline);
  font-size: 14px; font-weight: 600; color: var(--text-secondary);
}
.pill-gold { background: var(--bg-tint-gold); border-color: var(--gold-100); color: var(--text-money); }
.pill-green { background: var(--bg-tint-green); border-color: var(--green-100); color: var(--text-success); }

/* ==========================================================================
   Precio
   ========================================================================== */
.plans { display: grid; gap: var(--s-6); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); max-width: 720px; }
.plan {
  background: var(--bg-surface); border: 1px solid var(--border-soft);
  border-radius: var(--r-lg); padding: var(--s-7); position: relative;
}
.plan.is-popular { border: 2px solid var(--gold-350); box-shadow: var(--shadow-accent); }
.plan-badge {
  position: absolute; top: -12px; left: var(--s-7);
  background: var(--grad-cta); color: var(--text-on-accent);
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  padding: var(--s-2) var(--s-4); border-radius: var(--r-pill);
}
.plan-name { font-size: 15px; font-weight: 600; color: var(--text-secondary); margin: 0 0 var(--s-3); }
.plan-price {
  font-family: var(--font-display); font-size: 40px; font-weight: 740;
  letter-spacing: -0.032em; color: var(--text-primary); margin: 0 0 var(--s-2); line-height: 1.05;
}
.plan-price small { font-size: 17px; font-weight: 600; color: var(--text-tertiary); letter-spacing: -0.011em; }
.plan-sub { font-size: 15px; color: var(--text-secondary); margin: 0; }
.plan-sub s { color: var(--text-tertiary); }

/* ==========================================================================
   Legales
   ========================================================================== */
.legal { max-width: 74ch; }
.legal h2 { font-size: clamp(22px, 2.4vw, 27px); margin-top: var(--s-10); }
.legal h3 { font-size: 19px; margin-top: var(--s-8); }
.legal ul { padding-left: var(--s-7); margin-bottom: var(--s-6); }
.legal li { margin-bottom: var(--s-3); }
.legal table { width: 100%; border-collapse: collapse; margin: 0 0 var(--s-7); font-size: 15px; }
.legal th, .legal td { text-align: left; padding: var(--s-4) var(--s-3); border-bottom: 1px solid var(--border-hairline); vertical-align: top; }
.legal th { font-weight: 640; color: var(--text-secondary); }
.legal .updated { font-size: 14px; color: var(--text-tertiary); margin-bottom: var(--s-9); }

/* ==========================================================================
   Sources
   ========================================================================== */
.sources { font-size: 14px; }
.sources ol { padding-left: var(--s-7); margin: 0; }
.sources li { margin-bottom: var(--s-3); color: var(--text-secondary); line-height: 1.5; }
.sources a { word-break: break-word; }

/* La cabecera en dos filas por debajo de 720 px. Con la marca, tres enlaces y
   el CTA en una sola fila, en un iPhone de 390 la cabecera se partia en tres
   lineas y ocupaba 280 px antes de que empezara el titular. */
@media (max-width: 720px) {
  .site-header .wrap {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "mark cta" "nav nav";
    align-items: center;
    gap: var(--s-2) var(--s-4);
    min-height: 0;
    padding-top: var(--s-3);
    padding-bottom: var(--s-2);
  }
  .site-header .wordmark { grid-area: mark; font-size: 18px; }
  .site-header .nav-cta { grid-area: cta; margin-left: 0; }
  .site-nav {
    grid-area: nav; margin-left: 0;
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
  }
  .site-nav::-webkit-scrollbar { display: none; }
  .site-nav a { white-space: nowrap; padding: var(--s-2) var(--s-4); }
  .hero { padding: var(--s-9) 0 var(--s-11); }
}

@media (max-width: 640px) {
  :root { --gutter: 18px; }
  .section { padding: var(--s-11) 0; }
  .calc-body { padding: var(--s-7) var(--s-5); }
  .calc-steps { padding: var(--s-4) var(--s-5); }
  .capture { padding: var(--s-7) var(--s-5); }
  .answer { padding: var(--s-7) var(--s-6); }
  .site-nav a { font-size: 14px; }
  .nav-cta { padding: var(--s-3) var(--s-5); font-size: 14px; }
}

/* ==========================================================================
   Impresion. Existe por una razon concreta: la calculadora ofrece guardar el
   desglose en PDF, y el PDF lo genera el NAVEGADOR de la visitante, no un
   servidor nuestro. Asi el desglose se puede llevar sin que una sola cifra
   salga de su maquina, que es la promesa de toda esta pagina.
   ========================================================================== */
@media print {
  .site-header, .site-footer, .calc-steps, .calc-actions, .capture,
  .skip-link, .hero-actions, .article-cta, .disclaimer { display: none !important; }
  body { background: #FFFFFF; font-size: 12pt; }
  .section, .section-tight { padding: 0 0 18pt; }
  .calc { border: 0; box-shadow: none; }
  .calc-body { padding: 0; }
  .calc-panel[hidden] { display: none !important; }
  .res-big, .quarter, .chart-wrap, .callout {
    break-inside: avoid; box-shadow: none;
  }
  .res-table { font-size: 10pt; }
  .answer { background: #FFFFFF; color: #0B1B2B; border: 1pt solid #DDE5EE; }
  .answer h2, .answer p, .answer strong { color: #0B1B2B; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #4E657E; }
}

/* ==========================================================================
   Correcciones medidas por bin/audit.py, no por opinion.
   ========================================================================== */

/* Un enlace dentro de una seccion de tinta heredaba --text-accent (#164B99),
   que sobre el degradado oscuro medía 1,30:1. El oro claro de la marca da
   13,03:1 sobre ese mismo fondo, que es el peldano que BRAND.md reserva
   justo para esto. */
.section-ink a, .answer a {
  color: var(--gold-200);
  text-decoration-color: rgba(244, 212, 141, 0.55);
}
.section-ink a:hover, .answer a:hover { color: var(--gold-100); }
.section-ink strong, .section-ink b { color: var(--paper-0); }
.section-ink .trust-item p, .section-ink .card p { color: var(--ink-100); }

/* El wordmark de la cabecera medía 31 px de alto y es un destino de
   navegacion, no un enlace en linea: sube a 44. */
.wordmark { min-height: var(--tap-min); }

/* ==========================================================================
   Tira de enlaces del final. En un sitio de 15 paginas esto ES el indice, y
   es el mecanismo que hace que cada landing de dinero reciba enlace desde
   todas las demas paginas.
   ========================================================================== */
.related { padding-top: var(--s-11); border-top: 1px solid var(--border-hairline); }
.related-h {
  font-size: 12px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--text-tertiary); margin: 0 0 var(--s-5);
}
.related-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 0 var(--s-7);
  grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
}
.related-list li { margin: 0; }
.related-list a {
  display: flex; align-items: center; min-height: var(--tap-min);
  font-size: 15px; color: var(--text-secondary); text-decoration: none;
  border-bottom: 1px solid var(--border-hairline);
}
.related-list a:hover { color: var(--text-accent); }