/* ============================================================
   BLOG · Plaza Redondel — estilos compartidos
   ============================================================ */
:root{
  --bg:#ffffff; --soft:#F4F7FB; --soft-2:#EAF1F9;
  --ink:#06162E; --ink-2:#0A1F3B;
  --orange:#F6873A; --orange-dp:#EE6A2C; --orange-dk:#C2521B;
  --blue:#2C84D8; --blue-lt:#5EB0EE;
  --text:#0A1F3B; --muted:#5A6B82;
  --line:rgba(6,22,46,.10); --line-2:rgba(6,22,46,.06);
  --display:"Bebas Neue", sans-serif;
  --body:"DM Sans", system-ui, -apple-system, sans-serif;
  --mono:"JetBrains Mono", monospace;
  --ease-out:cubic-bezier(0.16,1,0.3,1);
  --sh-soft:0 0 0 .5px rgba(6,22,46,.05), 0 4px 30px rgba(6,22,46,.08);
  --sh-card:0 30px 60px -34px rgba(6,22,46,.5);
  --maxw:760px;
}
*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{ font-family:var(--body); background:var(--bg); color:var(--text); line-height:1.65; -webkit-font-smoothing:antialiased; }
img{ display:block; max-width:100%; }
a{ color:var(--orange-dk); text-decoration:none; }
a:hover{ text-decoration:underline; }

/* NAV */
.bnav{ position:sticky; top:0; z-index:50; background:rgba(255,255,255,.9); backdrop-filter:blur(14px); border-bottom:1px solid var(--line); }
.bnav__in{ max-width:1100px; margin:0 auto; padding:0 22px; height:66px; display:flex; align-items:center; justify-content:space-between; }
.bnav__brand{ display:flex; align-items:center; gap:10px; }
.bnav__brand img{ width:40px; height:40px; object-fit:contain; }
.bnav__brand b{ font-family:var(--display); font-size:23px; color:var(--ink); letter-spacing:.5px; }
.bnav__links{ display:flex; gap:22px; font-weight:600; font-size:14.5px; }
.bnav__links a{ color:var(--ink-2); }
.bnav__cta{ background:var(--ink); color:#fff!important; padding:10px 18px; border-radius:999px; font-size:14px; }
.bnav__cta:hover{ text-decoration:none; }
@media(max-width:640px){ .bnav__links a:not(.bnav__cta){ display:none; } }

/* ARTICLE */
.article{ max-width:var(--maxw); margin:0 auto; padding:0 22px; }
.article__head{ padding:48px 0 14px; }
.crumbs{ font-family:var(--mono); font-size:12px; letter-spacing:.5px; color:var(--muted); margin-bottom:18px; }
.crumbs a{ color:var(--muted); }
.article__kick{ font-family:var(--mono); font-size:12px; letter-spacing:2px; text-transform:uppercase; color:var(--orange-dk); font-weight:700; }
.article h1{ font-family:var(--display); font-size:clamp(38px,6.5vw,62px); line-height:1.02; color:var(--blue); letter-spacing:.5px; margin:12px 0 14px; }
.article__meta{ font-size:14px; color:var(--muted); display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
.article__cover{ margin:26px 0 6px; border-radius:22px; overflow:hidden; box-shadow:var(--sh-card); aspect-ratio:16/9; }
.article__cover img{ width:100%; height:100%; object-fit:cover; }
.article__body{ padding:18px 0 10px; font-size:18px; }
.article__body p{ margin:18px 0; }
.article__body h2{ font-family:var(--display); font-size:clamp(28px,4.5vw,38px); color:var(--blue); letter-spacing:.5px; margin:42px 0 6px; line-height:1.1; }
.article__body h2 em{ font-style:normal; color:var(--orange); }
.article__body h3{ font-size:21px; color:var(--blue); margin:28px 0 4px; }
.article__body ul{ margin:16px 0 16px 4px; padding-left:22px; }
.article__body li{ margin:9px 0; }
.article__body img{ border-radius:18px; box-shadow:var(--sh-soft); margin:26px 0; }
.article__body strong{ color:var(--ink); }
.tip{ background:var(--soft); border-left:4px solid var(--orange); border-radius:0 14px 14px 0; padding:18px 22px; margin:28px 0; font-size:16px; }
.tip b{ color:var(--orange-dk); }

/* CTA box -> back to plaza */
.plaza-cta{ margin:46px 0; background:linear-gradient(160deg,#0A1F3B,#06162E 75%); color:#fff; border-radius:24px; padding:36px 30px; text-align:center; position:relative; overflow:hidden; }
.plaza-cta::before{ content:""; position:absolute; top:-40%; right:-15%; width:70%; height:70%; background:radial-gradient(circle,rgba(246,135,58,.3),transparent 70%); }
.plaza-cta h3{ font-family:var(--display); font-size:32px; letter-spacing:.5px; color:#fff; position:relative; }
.plaza-cta p{ color:#cdd9ea; font-size:15.5px; margin:8px 0 20px; position:relative; }
.plaza-cta a{ display:inline-block; background:linear-gradient(120deg,var(--orange),var(--orange-dp)); color:#2a1404!important; font-weight:700; padding:13px 26px; border-radius:999px; position:relative; }
.plaza-cta a:hover{ text-decoration:none; transform:translateY(-2px); }

/* BLOG INDEX */
.bhero{ max-width:1100px; margin:0 auto; padding:54px 22px 10px; }
.bhero h1{ font-family:var(--display); font-size:clamp(40px,7vw,72px); color:var(--blue); letter-spacing:.5px; line-height:1; }
.bhero h1 em{ font-style:normal; color:var(--orange); }
.bhero p{ font-size:18px; color:var(--muted); margin-top:12px; max-width:60ch; }
.bgrid{ max-width:1100px; margin:0 auto; padding:30px 22px 60px; display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:24px; }
.bpost{ display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:22px; overflow:hidden; box-shadow:var(--sh-soft); transition:transform .35s var(--ease-out), box-shadow .35s; }
.bpost:hover{ transform:translateY(-5px); box-shadow:var(--sh-card); text-decoration:none; }
.bpost__img{ aspect-ratio:16/10; overflow:hidden; }
.bpost__img img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease-out); }
.bpost:hover .bpost__img img{ transform:scale(1.06); }
.bpost__body{ padding:22px 22px 26px; }
.bpost__tag{ font-family:var(--mono); font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:var(--orange-dk); font-weight:700; }
.bpost__body h2{ font-family:var(--display); font-size:26px; color:var(--blue); letter-spacing:.4px; margin:8px 0 8px; line-height:1.05; }
.bpost__body p{ font-size:14.5px; color:var(--muted); line-height:1.5; }

/* FOOTER */
.bfoot{ background:var(--ink); color:#9fb3cc; text-align:center; padding:40px 22px; margin-top:30px; }
.bfoot b{ font-family:var(--display); color:#fff; font-size:22px; letter-spacing:.5px; }
.bfoot p{ font-size:13.5px; margin-top:8px; }
.bfoot a{ color:var(--orange); }