/* =========================================================
   ACTIA BLOG · hoja de estilos compartida
   Usa los mismos tokens de marca que el sitio principal
   (ink / paper / bone / flame / ember) para que el blog se
   sienta como una extensión de Actia, no como un microsite aparte.
========================================================= */
:root{
  --ink:#1A1A1A;
  --paper:#FFFFFF;
  --bone:#F7F5F0;
  --flame:#FF7A33;
  --ember:#FF4500;
  --ink-soft:rgba(26,26,26,.64);
  --ink-faint:rgba(26,26,26,.42);
  --line:rgba(26,26,26,.1);
  --line-on-ink:rgba(255,255,255,.14);
  --font-d:'Montserrat',sans-serif;
  --font-b:'Poppins',sans-serif;
  --font-m:'Montserrat',sans-serif;
  --radius:14px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} *{animation-duration:.001ms !important; transition-duration:.001ms !important;} }
body{
  margin:0; font-family:var(--font-b); color:var(--ink); background:var(--paper);
  -webkit-font-smoothing:antialiased; line-height:1.55;
}
h1,h2,h3,.font-d{font-family:var(--font-d);}
.mono{font-family:var(--font-m); font-weight:600;}
a{color:inherit;text-decoration:none;}
:focus-visible{outline:3px solid var(--flame); outline-offset:2px; border-radius:4px;}
img,svg{display:block;}
img{max-width:100%;}

.wrap{max-width:1180px; margin:0 auto; padding:0 32px;}
.wrap-narrow{max-width:760px; margin:0 auto; padding:0 32px;}
@media (max-width:720px){ .wrap{padding:0 20px;} .wrap-narrow{padding:0 20px;} }

section{padding:96px 0;}
@media (max-width:720px){ section{padding:56px 0;} }

.eyebrow-mono{
  font-family:var(--font-m); font-size:12.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--flame); margin:0 0 16px; display:flex; align-items:center; gap:10px;
}
.eyebrow-mono::before{content:'';width:22px;height:1px;background:var(--flame);}
.eyebrow-mono.on-ink{color:var(--ember);}
.eyebrow-mono.on-ink::before{background:var(--ember);}

h2.section-title{font-size:clamp(28px,4vw,42px); font-weight:600; line-height:1.12; letter-spacing:-.01em; margin:0 0 20px; color:var(--ink);}
p.section-lede{font-size:18px; color:var(--ink-soft); max-width:640px; margin:0 0 40px; line-height:1.6;}

.btn{
  font-family:var(--font-b); font-weight:600; font-size:15px; border-radius:10px; border:none;
  padding:14px 26px; cursor:pointer; display:inline-flex; align-items:center; gap:8px; transition:transform .15s ease, opacity .15s ease;
}
.btn:active{transform:scale(.97);}
.btn-flame{background:var(--flame); color:#fff;}
.btn-flame:hover{opacity:.9;}
.btn-ghost-ink{background:transparent; color:var(--ink); border:1.5px solid var(--line);}
.btn-ghost-ink:hover{border-color:var(--ink);}
.btn-ghost-paper{background:transparent; color:var(--paper); border:1.5px solid var(--line-on-ink);}
.btn-ghost-paper:hover{border-color:var(--paper);}

.mark{flex-shrink:0;}
.mark path, .mark circle{fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round;}

/* ---- nav (idéntico al sitio principal) ---- */
header.nav{position:sticky; top:0; z-index:40; background:var(--ink); color:var(--paper);}
.nav-row{display:flex; align-items:center; justify-content:space-between; height:76px;}
.nav-brand{display:flex; align-items:center; gap:10px; font-family:var(--font-d); font-weight:600; font-size:19px;}
.nav-brand .tag{font-family:var(--font-m); font-size:10px; background:rgba(255,255,255,.08); color:rgba(255,255,255,.5); padding:2px 7px; border-radius:20px; letter-spacing:.05em; margin-left:4px;}
.nav-links{display:flex; gap:28px; font-size:14.5px; color:rgba(255,255,255,.68);}
.nav-links a{transition:color .15s ease;}
.nav-links a:hover, .nav-links a.active{color:var(--paper);}
.nav-actions{display:flex; align-items:center; gap:14px; margin-left:8px;}
@media (max-width:780px){ .nav-links{display:none;} }

.nav-toggle{display:none; background:none; border:none; cursor:pointer; padding:10px; margin-right:-10px;}
.nav-toggle span{display:block; width:22px; height:2px; background:var(--paper); border-radius:2px; transition:transform .2s ease, opacity .2s ease;}
.nav-toggle span + span{margin-top:5px;}
.nav-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-open .nav-toggle span:nth-child(2){opacity:0;}
.nav-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.nav-drawer{display:none; border-top:1px solid var(--line-on-ink); padding:6px 0 24px; max-height:calc(100vh - 76px); overflow-y:auto;}
.nav-open .nav-drawer{display:block;}
.nav-drawer a{display:block; padding:15px 0; font-size:16px; color:rgba(255,255,255,.75); border-bottom:1px solid var(--line-on-ink);}
.nav-drawer .btn{margin-top:20px; width:100%; justify-content:center;}
@media (max-width:780px){ .nav-toggle{display:block;} .nav-actions{display:none;} }

/* ---- footer (idéntico al sitio principal) ---- */
.foot-grid{display:grid; grid-template-columns:1.4fr .8fr .8fr .9fr; gap:40px;}
@media (max-width:820px){ .foot-grid{grid-template-columns:1fr 1fr; gap:32px;} }
@media (max-width:520px){ .foot-grid{grid-template-columns:1fr;} }
.foot-col h4{font-family:var(--font-m); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.4); margin:0 0 14px;}
.foot-col a{display:block; padding:6px 0; font-size:14.5px; color:rgba(255,255,255,.62);}
.foot-col a:hover{color:var(--paper);}

/* =========================================================
   BLOG · portada / índice
========================================================= */
.blog-hero{padding:76px 0 64px; border-bottom:1px solid var(--line);}
.blog-hero h1{font-size:clamp(34px,5vw,54px); font-weight:600; line-height:1.08; letter-spacing:-.015em; margin:0 0 20px; color:var(--ink);}
.blog-hero p{font-size:18.5px; color:var(--ink-soft); max-width:600px; margin:0; line-height:1.6;}

.blog-filter-row{display:flex; flex-wrap:wrap; gap:9px; margin-top:34px;}
.blog-filter{font-family:var(--font-m); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-soft); border:1px solid var(--line); border-radius:99px; padding:8px 16px; background:var(--paper); cursor:default;}

.blog-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:0;}
@media (max-width:980px){ .blog-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:640px){ .blog-grid{grid-template-columns:1fr;} }

.blog-card{
  display:flex; flex-direction:column; background:var(--paper); border:1px solid var(--line); border-radius:18px;
  overflow:hidden; transition:transform .25s cubic-bezier(.2,.8,.3,1), box-shadow .25s ease;
}
.blog-card:hover{transform:translateY(-6px); box-shadow:0 18px 34px rgba(26,26,26,.12);}
.blog-card-top{background:var(--ink); padding:26px 24px 22px; position:relative; overflow:hidden;}
.blog-card-top::before{
  content:''; position:absolute; right:-40px; top:-46px; width:140px; height:140px; border-radius:50%;
  border:16px solid var(--flame); opacity:.16;
}
.blog-card-num{font-family:var(--font-m); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ember); position:relative; z-index:1; margin:0 0 10px;}
.blog-card-top h3{font-size:19px; font-weight:600; color:var(--paper); line-height:1.32; margin:0; position:relative; z-index:1;}
.blog-card-body{padding:22px 24px 26px; flex:1; display:flex; flex-direction:column;}
.blog-card-body p{font-size:14.5px; color:var(--ink-soft); line-height:1.6; margin:0 0 18px; flex:1;}
.blog-card-meta{display:flex; align-items:center; justify-content:space-between; font-size:12.5px; color:var(--ink-faint); font-family:var(--font-m);}
.blog-card-link{color:var(--flame); font-weight:600; display:inline-flex; align-items:center; gap:6px;}
.blog-card:hover .blog-card-link{gap:9px;}
.blog-card-link svg{transition:transform .2s ease;}
.blog-card:hover .blog-card-link svg{transform:translateX(2px);}

.blog-cta-strip{
  margin-top:80px; background:var(--ink); border-radius:24px; padding:52px 48px;
  display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap;
}
.blog-cta-strip h3{color:var(--paper); font-size:26px; font-weight:600; margin:0 0 8px; max-width:420px; line-height:1.28;}
.blog-cta-strip p{color:rgba(255,255,255,.65); font-size:15px; margin:0; max-width:420px;}

/* =========================================================
   BLOG · artículo individual
========================================================= */
.art-hero{padding:52px 0 40px; border-bottom:1px solid var(--line);}
.art-breadcrumb{font-family:var(--font-m); font-size:12.5px; color:var(--ink-faint); margin:0 0 22px; display:flex; align-items:center; gap:8px;}
.art-breadcrumb a{color:var(--ink-faint);}
.art-breadcrumb a:hover{color:var(--flame);}
.art-hero h1{font-size:clamp(30px,4.4vw,46px); font-weight:600; line-height:1.12; letter-spacing:-.012em; margin:0 0 22px; color:var(--ink);}
.art-lede{font-size:18px; color:var(--ink-soft); line-height:1.62; margin:0 0 26px; max-width:680px;}
.art-meta-row{display:flex; align-items:center; gap:18px; flex-wrap:wrap; font-family:var(--font-m); font-size:12.5px; color:var(--ink-faint);}
.art-meta-row .dot{width:4px;height:4px;border-radius:50%;background:var(--ink-faint);}
.art-tag{color:var(--flame); font-weight:600; letter-spacing:.06em; text-transform:uppercase;}

.art-body{max-width:720px; margin:0 auto; padding:64px 32px 0;}
@media (max-width:720px){ .art-body{padding:48px 20px 0;} }

.art-body h2{
  font-family:var(--font-d); font-weight:600; font-size:clamp(23px,3vw,29px); line-height:1.28;
  letter-spacing:-.01em; color:var(--ink); margin:52px 0 18px;
}
.art-body h2:first-child{margin-top:0;}
.art-body h3{
  font-family:var(--font-d); font-weight:600; font-size:19px; line-height:1.35; color:var(--ink); margin:32px 0 12px;
}
.art-body p{font-size:16.5px; line-height:1.75; color:rgba(26,26,26,.82); margin:0 0 20px;}
.art-body strong{color:var(--ink); font-weight:600;}
.art-body ul, .art-body ol{margin:0 0 22px; padding-left:22px;}
.art-body li{font-size:16.5px; line-height:1.7; color:rgba(26,26,26,.82); margin-bottom:9px;}
.art-body li::marker{color:var(--flame);}
.art-body a:not(.btn){color:var(--flame); text-decoration:underline; text-decoration-color:rgba(255,122,51,.35); text-underline-offset:2px;}
.art-body a:not(.btn):hover{text-decoration-color:var(--flame);}

.art-body table{width:100%; border-collapse:collapse; margin:8px 0 30px; font-size:14.5px;}
.art-body th{
  text-align:left; font-family:var(--font-m); font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-faint); padding:10px 14px; border-bottom:2px solid var(--line); background:var(--bone);
}
.art-body td{padding:12px 14px; border-bottom:1px solid var(--line); color:rgba(26,26,26,.82); line-height:1.5;}
.art-body table.art-table-scroll{display:block; overflow-x:auto; white-space:nowrap;}

.art-body pre{
  background:var(--ink); color:rgba(255,255,255,.88); border-radius:12px; padding:20px 22px; overflow-x:auto;
  font-family:ui-monospace,Menlo,Consolas,monospace; font-size:13.5px; line-height:1.65; margin:0 0 26px;
}
.art-body code{font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.92em;}
.art-body p code, .art-body li code{background:var(--bone); padding:2px 7px; border-radius:6px; color:var(--ember);}

.art-callout{
  border-left:3px solid var(--flame); background:var(--bone); border-radius:0 12px 12px 0;
  padding:18px 22px; margin:0 0 26px; font-size:15.5px; line-height:1.65; color:var(--ink-soft);
}
.art-callout strong{color:var(--ink);}

.art-check{list-style:none; margin:0 0 26px; padding:0;}
.art-check li{
  font-size:16px; line-height:1.6; color:rgba(26,26,26,.82); padding:9px 0 9px 30px; position:relative;
  border-bottom:1px solid var(--line);
}
.art-check li::before{content:'☐'; position:absolute; left:0; color:var(--flame); font-size:17px;}
.art-check li:first-child{padding-top:0;}

hr.art-divider{border:none; border-top:1px solid var(--line); margin:44px 0;}

.art-cta{
  background:var(--ink); border-radius:20px; padding:40px 40px; margin:56px 0 8px;
  display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap;
}
.art-cta-copy p{color:rgba(255,255,255,.68); font-size:15px; margin:6px 0 0; max-width:420px;}
.art-cta h3{color:var(--paper); font-size:22px; font-weight:600; margin:0; max-width:420px; line-height:1.3;}

.art-footer-nav{
  max-width:720px; margin:0 auto; padding:56px 32px 0; display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
}
@media (max-width:720px){ .art-footer-nav{padding:40px 20px 0;} }
.art-footer-nav a{
  font-family:var(--font-m); font-size:13px; letter-spacing:.04em; color:var(--ink-soft);
  border:1px solid var(--line); border-radius:99px; padding:10px 18px; transition:border-color .2s ease, color .2s ease;
}
.art-footer-nav a:hover{border-color:var(--flame); color:var(--flame);}

.art-share{margin:64px 0 0; padding-top:28px; border-top:1px solid var(--line); display:flex; align-items:center; gap:14px;}
.art-share span{font-family:var(--font-m); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint);}

.reveal{opacity:0; transform:translateY(24px); transition:opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1);}
.reveal.is-visible{opacity:1; transform:translateY(0);}