@import url('fonts.css');

/* ============================================================
   HD ADVISORY — Blog · Hoja base compartida
   Tokens tomados 1:1 del sitio principal (identidad Scandia + navy).
   ============================================================ */
:root{
  --navy:#032744; --navy-deep:#021a2e; --navy-deepest:#01111f;
  --navy-soft:#0a3a5c; --ink-black:#1a1a2e;
  --ink:#ffffff; --ink-muted:#9CB4C4; --ink-dim:#6a7d8e;
  --bone:#EDF0F2; --bone-warm:#f5f3ee; --paper:#ffffff;
  --ink-dark:#032744; --ink-dark-muted:#475a6e; --ink-dark-dim:#8a9ba8;
  --accent:#9CB4C4; --accent-on-dark:#B8CCD9;
  --border-dark:rgba(156,180,196,.12); --border-dark-strong:rgba(156,180,196,.25);
  --border-light:rgba(3,39,68,.1); --border-light-strong:rgba(3,39,68,.22);
  --font-sans:'Scandia',system-ui,-apple-system,sans-serif;
  --font-display:'Scandia',system-ui,-apple-system,sans-serif;
  --container:1340px; --container-read:760px;
  --gutter:clamp(20px,4vw,56px);
  --radius-sm:6px; --radius:14px; --radius-lg:24px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:var(--font-sans);font-weight:400;
  background:var(--navy-deepest);color:var(--ink);
  line-height:1.6;-webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;overflow-x:hidden;
}
a{color:inherit}
img{max-width:100%;display:block}
::selection{background:var(--accent);color:var(--navy-deepest)}

/* Foco visible para accesibilidad (WCAG) */
a:focus-visible,button:focus-visible{
  outline:2px solid var(--accent-on-dark);outline-offset:3px;border-radius:2px;
}

.wrap{max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
.read{max-width:var(--container-read);margin:0 auto;padding:0 var(--gutter)}
.skip-link{
  position:absolute;left:-999px;top:0;background:var(--accent);color:var(--navy-deepest);
  padding:10px 16px;z-index:100;border-radius:0 0 var(--radius-sm) 0;font-weight:500;
}
.skip-link:focus{left:0}

/* ---------- Header / nav ---------- */
.site-head{
  position:sticky;top:0;z-index:50;
  background:rgba(1,17,31,.82);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border-dark);
}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;height:68px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;font-weight:500;letter-spacing:.02em}
.brand .mark{
  width:30px;height:30px;border-radius:7px;flex:none;
  background:linear-gradient(135deg,var(--accent-on-dark),var(--accent));
  color:var(--navy-deepest);display:grid;place-items:center;font-weight:700;font-size:14px;
}
.brand span{color:var(--ink);font-size:16px}
.brand small{color:var(--ink-muted);font-weight:400}
.site-head nav{display:flex;gap:26px;align-items:center}
.site-head nav a{
  text-decoration:none;color:var(--ink-muted);font-size:14.5px;
  transition:color .2s;white-space:nowrap;
}
.site-head nav a:hover{color:var(--ink)}
.site-head .cta{
  padding:9px 18px;border:1px solid var(--border-dark-strong);border-radius:var(--radius-sm);
  color:var(--ink);transition:background .2s,border-color .2s;
}
.site-head .cta:hover{background:var(--navy-soft);border-color:var(--accent)}
@media(max-width:640px){.site-head nav a.nav-hide{display:none}}

/* ---------- Footer ---------- */
.site-foot{
  border-top:1px solid var(--border-dark);
  padding:56px 0 40px;color:var(--ink-dim);font-size:14px;background:var(--navy-deep);
}
.site-foot .wrap{display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;align-items:center}
.site-foot a{color:var(--ink-muted);text-decoration:none}
.site-foot a:hover{color:var(--ink)}
.site-foot .foot-links{display:flex;gap:22px;flex-wrap:wrap}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;text-decoration:none;
  padding:13px 24px;border-radius:var(--radius-sm);font-weight:500;font-size:15px;
  transition:transform .2s,background .2s,border-color .2s;
}
.btn-primary{background:var(--accent);color:var(--navy-deepest)}
.btn-primary:hover{background:var(--accent-on-dark);transform:translateY(-2px)}
.btn-ghost{border:1px solid var(--border-dark-strong);color:var(--ink)}
.btn-ghost:hover{background:var(--navy-soft);border-color:var(--accent)}

/* ---------- Índice del blog ---------- */
.blog-hero{padding:clamp(60px,10vw,120px) 0 44px}
.blog-hero .eyebrow{
  color:var(--accent);font-size:13px;letter-spacing:.18em;text-transform:uppercase;
  font-weight:500;margin-bottom:20px;
}
.blog-hero h1{
  font-family:var(--font-display);font-weight:700;line-height:1.08;letter-spacing:-.02em;
  font-size:clamp(34px,5.5vw,60px);max-width:16ch;
}
.blog-hero h1 em{color:var(--accent);font-style:italic}
.blog-hero .lede{
  margin-top:22px;color:var(--ink-muted);font-size:clamp(17px,2.2vw,20px);
  font-weight:300;max-width:56ch;line-height:1.6;
}

.post-list{padding:24px 0 90px;display:grid;gap:26px}
.post-card{
  display:grid;grid-template-columns:1fr;gap:14px;
  padding:34px;border:1px solid var(--border-dark);border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(10,58,92,.16),rgba(10,58,92,0));
  text-decoration:none;color:inherit;position:relative;overflow:hidden;
  transition:border-color .25s,transform .25s,background .25s;
}
.post-card::before{
  content:"";position:absolute;left:0;top:0;height:2px;width:100%;
  background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .3s;
}
.post-card:hover{border-color:var(--border-dark-strong);transform:translateY(-3px)}
.post-card:hover::before{transform:scaleX(1)}
.post-meta{display:flex;gap:14px;align-items:center;flex-wrap:wrap;font-size:12.5px}
.tag{
  color:var(--accent-on-dark);border:1px solid var(--border-dark-strong);
  padding:4px 11px;border-radius:100px;letter-spacing:.04em;
}
.post-meta time{color:var(--ink-dim)}
.post-card h2{
  font-family:var(--font-display);font-weight:500;letter-spacing:-.01em;
  font-size:clamp(21px,2.8vw,27px);line-height:1.24;
}
.post-card p{color:var(--ink-muted);font-weight:300;font-size:16px;max-width:70ch}
.read-more{
  display:inline-flex;align-items:center;gap:8px;color:var(--accent-on-dark);
  font-size:14.5px;font-weight:500;margin-top:4px;transition:gap .2s;
}
.post-card:hover .read-more{gap:13px}

/* ---------- Artículo ---------- */
.article-head{padding:clamp(50px,8vw,96px) 0 30px}
.crumbs{font-size:13.5px;color:var(--ink-dim);margin-bottom:26px;display:flex;gap:9px;flex-wrap:wrap}
.crumbs a{color:var(--ink-muted);text-decoration:none}
.crumbs a:hover{color:var(--ink)}
.article-head .post-meta{margin-bottom:22px}
.article-head h1{
  font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;
  font-size:clamp(30px,4.6vw,50px);line-height:1.1;
}
.article-head h1 em{color:var(--accent);font-style:italic}
.article-head .standfirst{
  margin-top:22px;color:var(--ink-muted);font-weight:300;
  font-size:clamp(18px,2.4vw,22px);line-height:1.55;
}
.article-body{padding:14px 0 40px;font-size:18px;line-height:1.75;color:var(--bone)}
.article-body>*+*{margin-top:1.35em}
.article-body h2{
  font-family:var(--font-display);font-weight:500;color:var(--ink);
  font-size:clamp(22px,3vw,30px);line-height:1.2;letter-spacing:-.01em;
  margin-top:2em;
}
.article-body h3{font-weight:500;color:var(--ink);font-size:20px;margin-top:1.6em}
.article-body p{color:var(--bone)}
.article-body strong{color:var(--ink);font-weight:500}
.article-body em{font-style:italic;color:var(--accent-on-dark)}
.article-body ul,.article-body ol{padding-left:1.3em;color:var(--bone)}
.article-body li+li{margin-top:.5em}
.article-body li::marker{color:var(--accent)}
.article-body a{color:var(--accent-on-dark);text-underline-offset:3px}
.pull{
  border-left:3px solid var(--accent);padding:6px 0 6px 24px;margin:2em 0;
  font-family:var(--font-display);font-weight:300;font-style:italic;
  font-size:clamp(21px,2.8vw,27px);line-height:1.35;color:var(--ink);
}
.article-cta{
  margin:56px 0 20px;padding:36px;border:1px solid var(--border-dark);
  border-radius:var(--radius);background:linear-gradient(180deg,rgba(10,58,92,.22),rgba(10,58,92,0));
}
.article-cta h3{font-family:var(--font-display);font-weight:500;font-size:23px;color:var(--ink);margin-bottom:10px}
.article-cta p{color:var(--ink-muted);font-weight:300;margin-bottom:22px;max-width:56ch}
.article-cta .btn-row{display:flex;gap:14px;flex-wrap:wrap}
.article-nav{
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:34px 0 10px;border-top:1px solid var(--border-dark);margin-top:20px;
}
.article-nav a{color:var(--ink-muted);text-decoration:none;font-size:15px}
.article-nav a:hover{color:var(--ink)}