/* Variables y base */
:root{
  --ink:#1a1d2b; --muted:#64748b; --brand:#81bd00; --morado:#a200bd;
  --card:#ffffff; --stroke:rgba(0,0,0,.08);
  --shadow:0 12px 28px rgba(0,0,0,.06); --shadow-2:0 18px 46px rgba(0,0,0,.08);
  
}
*{box-sizing:border-box} html,body{margin:0;padding:0}
body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,sans-serif; color:var(--ink); background:#fff; line-height:1.6}
a{text-decoration:none;color:inherit}

.blog-main{padding:0 16px 48px} .wrap{max-width:var(--maxw); margin:0 auto}

/* Hero */
.blog-hero{padding:64px 0 16px; background:#fff; position:relative; overflow:hidden}
.blog-title{color:#111; font-weight:800; font-size:clamp(28px,5vw,46px); line-height:1.15; position:relative; display:inline-block; padding-bottom:.5em; margin:0 0 .6rem}
.blog-title::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:12px;
  background-color: currentColor;
  -webkit-mask-image: url('/assets/brush-siena.png'); -webkit-mask-repeat: repeat-x; -webkit-mask-position:left center; -webkit-mask-size:auto 12px;
          mask-image: url('/assets/brush-siena.png');         mask-repeat: repeat-x;          mask-position:left center;          mask-size:auto 12px;
  transform: rotate(-1.1deg); opacity:.95;
}
.blog-lead{margin:0 0 14px; color:var(--muted)}
.blog-search{display:flex; gap:10px; align-items:center; margin:12px 0 8px}
.blog-search input{flex:1; padding:.9rem 1rem; border-radius:12px; border:1px solid var(--stroke); outline:0}
.blog-search .btn{white-space:nowrap}

/* Grid */
.blog-grid{padding:24px 0}
.grid{display:grid; gap:18px; grid-template-columns:repeat(3, minmax(0, 1fr))}
@media (max-width:1024px){ .grid{grid-template-columns:repeat(2, minmax(0,1fr))} }
@media (max-width:680px){ .grid{grid-template-columns:1fr} }

.post-card{position:relative; background:var(--card); border:1px solid var(--stroke); border-radius:16px; overflow:hidden; box-shadow:var(--shadow); transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease}
.post-card:hover{ transform: translateY(-3px); box-shadow:var(--shadow-2); border-color: rgba(129,189,0,.35) }
.pc-link{ display:grid; grid-template-rows:auto 1fr; color:inherit }
.pc-thumb{ aspect-ratio:16/9; background:#f4f6f8; background-image:var(--img); background-size:cover; background-position:center }
.pc-body{ padding:14px }
.pc-date{ font-size:.8rem; color:#5b677a }
.pc-title{ font-size:1.1rem; margin:.15rem 0 .3rem; font-weight:800 }
.pc-excerpt{ margin:0; color:#5b677a }
.pc-cta{ display:inline-block; margin-top:.6rem; font-weight:700; opacity:.9 }

/* Paginación */
.pager{display:flex; justify-content:center; margin:8px 0 24px}
.pager ul{list-style:none; margin:0; padding:0; display:flex; gap:8px}
.pager a{display:inline-block; padding:.55rem .9rem; border:1px solid var(--stroke); border-radius:999px; font-weight:700}
.pager a.is-active{ background:linear-gradient(90deg,#eaffc4,#d9f99d); border-color:rgba(129,189,0,.45) }

/* Single */
.single{ max-width:900px; margin:0 auto; padding:24px 0 }
.single-head{ margin-bottom:12px }
.single-date{ color:#5b677a; margin:0 0 4px }
.single-title{ color:#111; font-weight:800; font-size:clamp(28px,5vw,42px); line-height:1.15; position:relative; display:inline-block; padding-bottom:.5em; margin:.15rem 0 .6rem }
.single-title::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:12px;
  background-color: currentColor;  
  transform: rotate(-1.1deg); opacity:.95;
}
.single-cover{ width:100%; aspect-ratio:16/9; background:#f4f6f8; background-image:var(--img); background-size:cover; background-position:center; border-radius:14px; border:1px solid var(--stroke) }
.single-content{ margin-top:14px }
.single-content p{ margin:0 0 1rem }
.single-content h2{ font-size:1.25rem; margin:1.2rem 0 .5rem }
.single-content img{ max-width:100%; height:auto; border-radius:12px }

/* Botones */
.btn{display:inline-block; padding:.9rem 1.2rem; border-radius:999px; font-weight:800; text-decoration:none; cursor:pointer; border:0}
.btn-primary{ color:#0b1020; background:linear-gradient(90deg,#eaffc4,#d9f99d); box-shadow:0 10px 28px rgba(129,189,0,.28) }
.btn-ghost{ background:#0b1020; color:#fff; border:1.5px solid rgba(255,255,255,.62); box-shadow:0 6px 20px rgba(0,0,0,.15) }
.back-wrap{ max-width:900px; margin:0 auto; padding-top:12px }