/* ============================================================================
   iura.cl — Página Profesional · SHARED DESIGN KIT
   Embed this verbatim inside each prototype's <style>, then extend per concept.
   Inherited iura.cl tokens (design-brief.md "Humanist Confiable"). One accent,
   earned: TEAL = interaction, BRONZE = brand warmth / large+graphical ONLY
   (~3.6:1 on white → never body or small text), NAVY = structure/ink.
   Add to <head> of every page:
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700;800;900&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
   ========================================================================== */
:root {
  --navy: #0A1628;
  --teal: #006D77;          /* interaction */
  --teal-700: #00555E;      /* interaction hover (higher contrast) */
  --bronze: #B07C3A;        /* brand accent — large/graphical only */
  --bronze-soft: #E9DCC6;   /* faint bronze fill for pills */
  --ink: #16202E;
  --ink-muted: #5B6470;     /* keep ≥4.5:1 — do not lighten further */
  --paper: #FBF8F2;         /* warm ivory — the trust-surface ground */
  --surface: #FFFFFF;
  --line: rgba(10, 22, 40, 0.10);
  --line-strong: rgba(10, 22, 40, 0.18);
  --trust: #2A5434;         /* ✓Verificado / vigente */
  --ring: #006D77;
  --shadow-sm: 0 1px 2px rgba(10,22,40,.06), 0 2px 6px rgba(10,22,40,.06);
  --shadow-md: 0 6px 14px rgba(10,22,40,.10), 0 14px 38px rgba(10,22,40,.12);
  --shadow-lg: 0 18px 50px rgba(10,22,40,.22);
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --font-display: 'Inter Tight', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.55;
}
h1, h2, h3, .display { font-family: var(--font-display); line-height: 1.04; letter-spacing: -0.02em; }
img { display: block; max-width: 100%; }
a { color: var(--teal); text-decoration: none; }
a:hover { color: var(--teal-700); }

/* Accessibility floor */
:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; border-radius: 4px; }
.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;
}

/* Shared atoms ------------------------------------------------------------- */

/* ✓Verificado — calm, geometric; trust green; never a gold shield */
.verified {
  display: inline-flex; align-items: center; gap: .4em;
  font: 600 0.82rem/1 var(--font-body); letter-spacing: .01em;
  color: var(--trust); background: rgba(42,84,52,.10);
  padding: .42em .7em; border-radius: var(--radius-pill);
  border: 1px solid rgba(42,84,52,.22);
}
.verified svg { width: 1em; height: 1em; }

/* Práctica area pill — bronze-soft fill, ink text (accessible) */
.area {
  display: inline-flex; align-items: center;
  font: 500 0.86rem/1 var(--font-body);
  color: var(--ink); background: var(--bronze-soft);
  padding: .5em .85em; border-radius: var(--radius-pill);
}

/* WhatsApp — the one confident, saturated CTA (teal) */
.wa {
  display: inline-flex; align-items: center; gap: .6em;
  font: 600 1rem/1 var(--font-body);
  color: #fff; background: var(--teal);
  padding: .95em 1.4em; border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm); border: none; cursor: pointer;
  transition: transform var(--ease-out) .18s, background .18s, box-shadow .18s;
}
.wa:hover { background: var(--teal-700); transform: translateY(-2px); box-shadow: var(--shadow-md); color:#fff; }
.wa svg { width: 1.15em; height: 1.15em; fill: currentColor; }

/* Monospace meta line (folio/place/years) — never the RUT */
.meta { font: 500 0.8rem/1.4 var(--font-mono); color: var(--ink-muted); letter-spacing: .02em; }

/* Portrait helper: gradient fallback shows if the <img> fails to load.
   Use real photo via <img> on top, object-fit:cover. */
.portrait { background: linear-gradient(150deg, var(--navy), var(--teal) 70%, var(--bronze)); }

/* MOTION: every animation/parallax MUST be inside this guard. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}
