/* ==========================================================================
   Contadores EC — Identidad oficial (Bloque A, oct-2026)
   Blanco + negro #171717 + dorado #C58B22 + naranja #FF9C00 + Poppins.
   Se carga al final: para volver al diseño anterior basta quitar este <link>.
   ========================================================================== */

:root {
  /* Las secciones oscuras pasan de azul marino a negro corporativo */
  --navy-900: #171717;
  --navy-800: #1f1f1f;
  --navy-700: #2b2b2b;
  --navy-600: #3d3d3d;
  /* Dorado corporativo; -700 es la versión legible para texto sobre blanco */
  --gold-500: #C58B22;
  --gold-600: #a8751a;
  --gold-700: #8a5f12;
  --cta: #FF9C00;
  --cta-600: #e68a00;
  --ink: #171717;
  /* Párrafos: gris oscuro accesible; #969696 solo para textos secundarios pequeños */
  --ink-muted: #5c5c5c;
  --ink-soft: #969696;
  --line: #e8e8e8;
  --surface-alt: #f7f7f7;
  --shadow-card: 0 10px 30px rgba(23, 23, 23, 0.07);
  --shadow-card-hover: 0 16px 40px rgba(23, 23, 23, 0.12);
  --font-body: "Poppins", "Segoe UI", Arial, sans-serif;
}

/* ---------- Botones: naranja para llamadas a la acción ---------- */
.btn-gold { background: var(--cta); color: var(--ink); }
.btn-gold:hover { background: var(--cta-600); box-shadow: 0 10px 24px rgba(255, 156, 0, 0.3); }
.btn-outline { color: var(--ink); border-color: var(--ink); }
.btn-outline:hover { border-color: var(--gold-500); color: var(--gold-700); }
.section--navy .btn-outline, .cta-banner .btn-outline, .firmas .btn-outline { color: #fff; border-color: rgba(255,255,255,0.4); }
.section--navy .btn-outline:hover, .cta-banner .btn-outline:hover, .firmas .btn-outline:hover { border-color: #fff; color: #fff; }
.step .step-num, .help-box .icon-tile { color: #fff; }
.skip-link { color: #fff; }
.field input:focus, .field select:focus { box-shadow: 0 0 0 3px rgba(197, 139, 34, 0.25); }
.tool-card .tag, .firmas-teaser .precios-mini span b { background: #f8efe0; }
.firmas-tabla li.top { background: rgba(197, 139, 34, 0.12); }
.firmas-tabla .tag { color: #fff; }

/* ---------- Encabezado blanco ---------- */
.site-header { background: #fff; border-bottom: 1px solid var(--line); }
.site-header .brand { color: var(--ink); }
.site-header .brand .brand-ec { color: var(--gold-600); }
.main-nav a { color: var(--ink); }
.main-nav a:hover, .main-nav a[aria-current="page"] { color: var(--gold-700); border-color: var(--gold-500); }
.nav-toggle { color: var(--ink); }
@media (max-width: 1080px) {
  .main-nav { background: #fff; }
  .main-nav a { border-bottom-color: var(--line); }
}

/* ---------- Portada: fondo blanco ---------- */
.hero {
  background: linear-gradient(135deg, rgba(255,255,255,0.95), rgba(250,247,241,0.92)), url('../img/fondo.jpg');
  background-size: cover;
  background-position: center;
  color: var(--ink);
}
.hero h1 { color: var(--ink); }
.hero h1 .accent { color: var(--gold-600); }
.hero p.lead { color: var(--ink-muted); }
.hero-kicker { background: rgba(197,139,34,0.1); color: var(--gold-700); border-color: rgba(197,139,34,0.35); }
.hero-checks { color: var(--ink-muted); }
.quick-calc { box-shadow: 0 24px 60px rgba(23,23,23,0.12); border: 1px solid var(--line); }

/* Franja de confianza clara */
.trust-strip { background: var(--surface-alt); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.trust-item strong { color: var(--ink); }
.trust-item span { color: var(--ink-soft); }

/* Encabezado de páginas internas en blanco */
.page-hero { background: var(--surface-alt); color: var(--ink); border-bottom: 1px solid var(--line); }
.page-hero h1 { color: var(--ink); }
.page-hero p { color: var(--ink-muted); }
.breadcrumb { color: var(--ink-soft); }
.breadcrumb a:hover { color: var(--gold-700); }

/* ---------- Enlaces táctiles más cómodos en celular ---------- */
@media (max-width: 900px) {
  .quick-calc .qc-foot a.link, .tool-card .go, .res-actions a { display: inline-flex; align-items: center; min-height: 44px; }
}