/* Estilos del blog de MMF Consultores Mediadores.
   Comparte tipografías, color y lenguaje visual con la web principal
   (src/index.css) para que el blog no parezca otra empresa. */

/* Fuentes de marca auto-alojadas (mismas que la web principal). */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/manrope-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url('/fonts/schibsted-grotesk-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --blue:#1f5fd6; --blue-dark:#143f9e; --blue-soft:#eaf1fd;
  --ink:#0d1b33; --ink-2:#2a3a57; --muted:#5a6a85; --line:#e3e9f2; --surface:#f4f7fc; --bg:#fff;
  --font-head:'Schibsted Grotesk', system-ui, sans-serif;
  --font-body:'Manrope', system-ui, sans-serif;
  --r-md:16px; --r-lg:24px;
}
* { box-sizing:border-box; }
body {
  margin:0;
  font-family:var(--font-body);
  color:var(--ink-2);
  line-height:1.7;
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img { max-width:100%; }
a { color:var(--blue-dark); }

/* Barra superior */
header.bar { border-bottom:1px solid var(--line); position:sticky; top:0; background:color-mix(in oklab, #fff 82%, transparent); backdrop-filter:saturate(160%) blur(14px); z-index:10; }
header.bar .row { max-width:960px; margin:0 auto; padding:14px 22px; display:flex; align-items:center; gap:12px; }
header.bar img { width:42px; height:42px; object-fit:contain; }
header.bar .brand { font-family:var(--font-head); font-weight:700; font-size:17px; color:var(--ink); letter-spacing:-0.01em; }
header.bar .brand b { color:var(--blue-dark); }
header.bar nav { margin-left:auto; display:flex; align-items:center; gap:8px; font-size:.95rem; font-weight:600; }
header.bar nav a { color:var(--ink-2); text-decoration:none; padding:9px 14px; border-radius:9px; transition:color .15s, background .15s; }
header.bar nav a:hover { color:var(--blue); background:var(--blue-soft); }

.wrap { max-width:760px; margin:0 auto; padding:44px 22px 90px; }
.wrap.wide { max-width:960px; }

/* Breadcrumb */
.crumbs { font-size:.88rem; color:var(--muted); margin-bottom:18px; }
.crumbs a { color:var(--muted); }

h1, h2, h3 { font-family:var(--font-head); color:var(--ink); letter-spacing:-0.02em; text-wrap:balance; }
h1 { font-size:clamp(1.9rem,4vw,2.6rem); line-height:1.12; margin:0 0 10px; }
h2 { font-size:1.5rem; margin:40px 0 12px; letter-spacing:-0.01em; }
h3 { font-size:1.15rem; margin:26px 0 8px; letter-spacing:-0.01em; }
.lead { font-size:1.18rem; color:var(--ink-2); }
.meta { color:var(--muted); font-size:.9rem; margin-bottom:30px; }
p, li { color:var(--ink-2); }
blockquote { margin:22px 0; padding:16px 22px; border-left:4px solid var(--blue); background:var(--blue-soft); border-radius:0 12px 12px 0; color:var(--ink); }

/* Hero del índice */
.hero-blog { background:linear-gradient(180deg,var(--blue-soft),#fff); border-bottom:1px solid var(--line); }
.hero-blog .wrap { padding-bottom:40px; }

/* Tarjetas de artículos (índice) */
.cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:20px; }
.card { display:block; border:1px solid var(--line); border-radius:var(--r-lg); padding:26px; text-decoration:none; color:inherit; background:#fff; transition:transform .2s ease, box-shadow .2s ease, border-color .2s; }
.card:hover { transform:translateY(-4px); box-shadow:0 8px 24px rgba(13,27,51,.08), 0 2px 6px rgba(13,27,51,.05); border-color:color-mix(in oklab, var(--blue) 30%, var(--line)); }
.card .tag { display:inline-block; font-size:.78rem; font-weight:700; letter-spacing:.01em; color:var(--blue-dark); background:var(--blue-soft); padding:5px 12px; border-radius:999px; margin-bottom:14px; }
.card h2 { font-size:1.22rem; margin:0 0 8px; }
.card p { margin:0; color:var(--muted); font-size:.98rem; }

/* CTA */
.cta { margin:48px 0 0; padding:32px; background:var(--ink); color:#fff; border-radius:var(--r-lg); }
.cta h3 { color:#fff; margin:0 0 8px; }
.cta p { color:#c9d4e8; margin:0 0 18px; }
.btn {
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--font-body); background:var(--blue); color:#fff;
  text-decoration:none; font-weight:700; font-size:16px;
  padding:15px 26px; border-radius:999px;
  box-shadow:0 8px 22px -8px rgba(20,63,158,.8);
  transition:background .2s ease, transform .15s ease;
}
.btn:hover { background:var(--blue-dark); }
.btn:active { transform:translateY(1px); }

.disclaimer { margin-top:44px; padding-top:18px; border-top:1px solid var(--line); font-size:.85rem; color:var(--muted); }

/* Pie */
footer.foot { border-top:1px solid var(--line); background:var(--surface); }
footer.foot .row { max-width:960px; margin:0 auto; padding:28px 22px; font-size:.9rem; color:var(--muted); display:flex; flex-wrap:wrap; align-items:center; gap:8px 18px; }
footer.foot a { color:var(--muted); text-decoration:none; }
footer.foot a:hover { color:var(--blue-dark); }

/* Botón flotante de WhatsApp (inyectado por blog.js) */
.wa-fab {
  position:fixed; right:clamp(16px,3vw,28px); bottom:clamp(16px,3vw,28px); z-index:60;
  width:60px; height:60px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:999px; background:#25d366; color:#fff;
  box-shadow:0 12px 28px rgba(37,211,102,.45), 0 4px 12px rgba(0,0,0,.18);
  transition:transform .18s ease, box-shadow .2s ease;
}
.wa-fab svg { width:34px; height:34px; }
.wa-fab:hover { transform:translateY(-2px) scale(1.05); }
.wa-fab::after { content:""; position:absolute; inset:0; border-radius:inherit; background:#25d366; z-index:-1; animation:waPulse 2.6s cubic-bezier(.2,.7,.2,1) infinite; }
@keyframes waPulse { 0% { transform:scale(1); opacity:.5; } 70%,100% { transform:scale(1.75); opacity:0; } }
@media (max-width:600px) { .wa-fab { width:56px; height:56px; } .wa-fab svg { width:31px; height:31px; } }

@media (prefers-reduced-motion: reduce) {
  .wa-fab::after { animation:none; opacity:0; }
  .card, .btn, .wa-fab { transition:none; }
}