/* ============================================================
   Comparador de Hipotecas — design system compartido (guías + /en/)
   Mismos tokens que la home (index.html). Estiliza la estructura
   de las guías con el nuevo lenguaje fintech.
   ============================================================ */
:root {
  --emerald-50:#e7f6ef; --emerald-100:#c8ecdb; --emerald-300:#6fd6a6; --emerald-400:#34d399;
  --emerald-500:#10b981; --emerald-600:#059669; --emerald-700:#047857; --emerald-800:#036249; --emerald-900:#064e3b;
  --cat-a:#0ea5e9; --cat-b:#d97706; --cat-c:#8b5cf6; --cat-d:#059669; --cat-e:#ec4899;
  --cat-f:#f97316; --cat-g:#06b6d4; --cat-h:#65a30d; --cat-i:#d946ef; --cat-j:#ef4444;
  /* LIGHT */
  --bg:#f5f8f7; --bg-tint:#eef4f1; --surface:#ffffff; --surface-2:#f1f5f4; --surface-3:#e8eeec; --surface-inset:#f6f9f8;
  --border:#e4eae8; --border-strong:#cdd8d4;
  --ink:#0d1b18; --ink-secondary:#3f4d4a; --muted:#66756f; --faint:#93a09b;
  --accent:var(--emerald-700); --accent-hover:var(--emerald-800); --accent-press:var(--emerald-900);
  --accent-contrast:#ffffff; --accent-soft:var(--emerald-50); --accent-soft-bd:var(--emerald-100); --accent-ink:var(--emerald-800);
  --info:#0369a1; --info-soft:#e6f1f8; --warning:#b45309; --warning-soft:#fbf0e2;
  --danger:#c2362c; --danger-soft:#fae9e8;
  --ring:color-mix(in srgb, var(--emerald-600) 45%, transparent);
  --font-display:"Sora",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;
  --fs-hero:clamp(1.85rem,1.3rem + 2.6vw,2.7rem);
  --fs-h2:clamp(1.2rem,1.05rem + .7vw,1.5rem);
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px;
  --space-8:32px; --space-10:40px; --space-12:48px; --space-16:64px; --space-20:80px;
  --container:1200px; --container-prose:820px; --gutter:clamp(16px,4vw,32px);
  --r-xs:6px; --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:20px; --r-2xl:28px; --r-pill:999px;
  --shadow-xs:0 1px 2px rgba(13,27,24,.05);
  --shadow-sm:0 1px 3px rgba(13,27,24,.07),0 1px 2px rgba(13,27,24,.04);
  --shadow-md:0 6px 20px -6px rgba(13,27,24,.12),0 2px 6px -2px rgba(13,27,24,.06);
  --shadow-lg:0 20px 50px -16px rgba(13,27,24,.20),0 6px 16px -8px rgba(13,27,24,.10);
  --ease-out:cubic-bezier(.22,.61,.36,1); --dur-fast:.12s; --dur:.2s;
}
:root[data-theme="dark"] {
  --bg:#0a1117; --bg-tint:#0d1822; --surface:#111c22; --surface-2:#182530; --surface-3:#20303b; --surface-inset:#0d171d;
  --border:#243441; --border-strong:#324656;
  --ink:#e9eef0; --ink-secondary:#c2cdd2; --muted:#91a0a8; --faint:#6c7d86;
  --accent:var(--emerald-400); --accent-hover:var(--emerald-300); --accent-press:var(--emerald-500);
  --accent-contrast:#04231a; --accent-soft:rgba(52,211,153,.13); --accent-soft-bd:rgba(52,211,153,.26); --accent-ink:var(--emerald-300);
  --info:#38bdf8; --info-soft:rgba(56,189,248,.14); --warning:#fbbf24; --warning-soft:rgba(251,191,36,.13);
  --danger:#f87171; --danger-soft:rgba(248,113,113,.14);
  --ring:color-mix(in srgb, var(--emerald-400) 55%, transparent);
  --shadow-xs:0 1px 2px rgba(0,0,0,.35);
  --shadow-sm:0 1px 3px rgba(0,0,0,.45),0 1px 2px rgba(0,0,0,.35);
  --shadow-md:0 8px 24px -8px rgba(0,0,0,.55),0 2px 6px -2px rgba(0,0,0,.4);
  --shadow-lg:0 24px 56px -16px rgba(0,0,0,.65),0 8px 18px -10px rgba(0,0,0,.5);
}

*,*::before,*::after { box-sizing:border-box; }
* { margin:0; padding:0; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} *,*::before,*::after{transition:none !important;animation:none !important;} }
body {
  font-family:var(--font-sans); background:var(--bg); color:var(--ink);
  line-height:1.6; font-size:15px; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  transition:background .25s ease, color .25s ease;
}
.wrap { max-width:var(--container); margin:0 auto; padding:0 var(--gutter); }
a { color:var(--accent-ink); }
::selection { background:var(--accent-soft); color:var(--accent-ink); }
:focus-visible { outline:none; box-shadow:0 0 0 3px var(--ring); border-radius:var(--r-sm); }
h1,h2,h3 { font-family:var(--font-display); letter-spacing:-0.02em; line-height:1.14; }

/* ============ HEADER ============ */
.site-header {
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--bg) 85%, transparent);
  backdrop-filter:saturate(160%) blur(12px); -webkit-backdrop-filter:saturate(160%) blur(12px);
  border-bottom:1px solid var(--border);
}
.header-inner { display:flex; align-items:center; justify-content:space-between; gap:16px; height:64px; }
.brand { display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); }
.brand__mark { width:34px; height:34px; border-radius:10px; display:block; box-shadow:var(--shadow-sm); }
.brand__text { display:flex; flex-direction:column; line-height:1.05; }
.brand__name { font-family:var(--font-display); font-weight:700; font-size:1rem; letter-spacing:-0.02em; }
.brand__tag { font-size:.7rem; color:var(--muted); letter-spacing:.02em; }
@media (max-width:520px){ .brand__tag{ display:none; } }
.header-actions { display:inline-flex; align-items:center; gap:8px; flex:0 0 auto; }
.lang-switcher {
  display:inline-flex; align-items:center; gap:2px; padding:3px;
  background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-pill);
}
.lang-switcher a { width:30px; height:30px; display:grid; place-items:center; border-radius:50%; text-decoration:none; opacity:.5; transition:opacity .15s, background .15s; }
.lang-switcher a:hover { opacity:1; }
.lang-switcher a[aria-current="page"] { opacity:1; background:var(--surface); box-shadow:var(--shadow-xs), 0 0 0 1px var(--border); }
.lang-switcher img { width:19px; height:13px; display:block; border-radius:2px; }
.theme-toggle {
  flex:0 0 auto; background:var(--surface-2); border:1px solid var(--border); color:var(--ink);
  border-radius:var(--r-pill); height:36px; padding:0 14px; cursor:pointer; font-size:.85rem; font-weight:500;
  display:inline-flex; align-items:center; gap:7px; white-space:nowrap; transition:border-color .15s, background .15s;
}
.theme-toggle:hover { border-color:var(--border-strong); background:var(--surface-3); }
@media (max-width:560px){ .theme-toggle span:last-child { display:none; } .theme-toggle { padding:0 10px; width:36px; justify-content:center; } }

/* ============ HERO (guía) ============ */
.guide-main { max-width:var(--container-prose); margin:0 auto; padding:0 var(--gutter) clamp(40px,6vw,72px); }
.guide-hero { padding:clamp(28px,5vw,52px) 0 clamp(18px,3vw,28px); }
.guide-hero h1 { font-size:var(--fs-hero); font-weight:700; letter-spacing:-0.03em; line-height:1.08; color:var(--ink); }
.guide-hero h1 em { font-style:normal; color:var(--accent); }
.updated { margin-top:14px; color:var(--muted); font-size:.85rem; }
.updated time { color:var(--ink-secondary); }

/* ============ CARD / CONTENIDO EN PROSA ============ */
.card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl); padding:clamp(22px,4vw,40px); box-shadow:var(--shadow-sm); }
.card h2 { font-size:var(--fs-h2); font-weight:700; letter-spacing:-0.02em; margin:30px 0 12px; color:var(--ink); }
.card h2:first-child { margin-top:0; }
.card h3 { font-size:1.05rem; font-weight:600; margin:20px 0 8px; color:var(--ink); font-family:var(--font-display); }
.card p { color:var(--ink-secondary); margin-bottom:13px; font-size:.95rem; line-height:1.68; }
.card a { color:var(--accent-ink); text-decoration:underline; text-underline-offset:2px; text-decoration-color:var(--accent-soft-bd); }
.card a:hover { text-decoration-color:var(--accent); }
.card strong { color:var(--ink); font-weight:600; }
.card ul { margin:8px 0 16px; padding-left:0; list-style:none; color:var(--ink-secondary); font-size:.95rem; }
.card ul li { margin-bottom:9px; padding-left:26px; position:relative; line-height:1.62; }
.card ul li::before { content:""; position:absolute; left:2px; top:.6em; width:7px; height:7px; border-radius:2px; background:var(--accent); }
.card code { background:var(--surface-2); border:1px solid var(--border); border-radius:6px; padding:2px 7px; font-family:var(--font-mono); font-size:.86rem; }

/* tablas */
.card table { width:100%; border-collapse:collapse; margin:16px 0 20px; font-size:.9rem; border:1px solid var(--border); border-radius:var(--r-md); overflow:hidden; }
.card th, .card td { padding:11px 14px; text-align:left; border-bottom:1px solid var(--border); line-height:1.5; }
.card td { color:var(--ink-secondary); }
.card tbody tr:last-child td { border-bottom:none; }
.card tbody tr:nth-child(even) { background:var(--surface-inset); }
.card thead th { font-family:var(--font-display); font-weight:700; color:var(--ink); background:var(--surface-2); border-bottom:1px solid var(--border-strong); }
.card th strong, .card td strong { color:var(--ink); }

/* aviso / nota (callout info) */
.note {
  display:block; margin:16px 0; padding:14px 16px;
  background:var(--info-soft); border:1px solid color-mix(in srgb,var(--info) 25%, transparent);
  border-radius:var(--r-md); font-size:.88rem; line-height:1.6; color:var(--ink-secondary);
}
.note strong { color:var(--ink); }

/* CTA */
.cta {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  margin:6px 0 8px; padding:0 18px; min-height:46px;
  background:var(--accent); color:var(--accent-contrast); font-weight:600; font-size:.92rem;
  border-radius:var(--r-md); text-decoration:none; transition:background var(--dur-fast) var(--ease-out), transform var(--dur-fast);
}
.cta:hover { background:var(--accent-hover); }
.cta:active { transform:translateY(1px); }
/* mayor especificidad que `.card a` para que el texto del CTA use siempre el color de contraste */
.card a.cta, .card a.cta:hover { color:var(--accent-contrast); text-decoration:none; }

/* relacionados */
.related {
  margin-top:22px; padding:16px 18px; background:var(--surface-inset);
  border:1px solid var(--border); border-radius:var(--r-md); font-size:.92rem; line-height:1.6; color:var(--ink-secondary);
}
.related strong { color:var(--ink); }
.related a { color:var(--accent-ink); }

.disclaimer { margin-top:18px; font-size:.82rem; color:var(--muted); line-height:1.55; }
.back { display:inline-block; margin-top:18px; color:var(--accent-ink); text-decoration:none; font-size:.9rem; font-weight:500; }
.back:hover { text-decoration:underline; }

/* AdSense */
.ad-slot { margin:24px auto; min-height:90px; display:grid; place-items:center stretch; background:var(--surface-2); border:1px dashed var(--border); border-radius:var(--r-md); color:var(--faint); font-size:.78rem; overflow:hidden; }
.ad-slot ins { display:block; width:100%; }
.ad-slot:has(ins[data-ad-status="unfilled"]) { display:none; }

/* footer */
footer.site-footer {
  max-width:var(--container-prose); margin:0 auto; padding:28px var(--gutter) 40px; border-top:1px solid var(--border);
  color:var(--muted); font-size:.84rem; display:flex; flex-wrap:wrap; gap:10px 20px; justify-content:space-between; align-items:center;
}
footer.site-footer a { color:var(--ink-secondary); text-decoration:none; }
footer.site-footer a:hover { color:var(--accent-ink); text-decoration:underline; }