/* ══════════════════════════════════════════════
   Blog · El Papán Huasteco
   Reutiliza el design system "Selva y Mesa".
══════════════════════════════════════════════ */
:root{
  --blanco:#ffffff; --crema-0:#fdfaf5; --crema-1:#f5f0e8; --crema-2:#ede5d8;
  --tierra-claro:#c4956a; --tierra:#a0724a; --tierra-dark:#7a5035;
  --verde:#3a5c3e; --verde-dark:#253d28;
  --negro:#1a1510; --gris-1:#3d3530; --gris-2:#6b605a; --gris-3:#9c9390;
  --font-display:'Cormorant Garamond',Georgia,serif;
  --font-ui:'DM Sans',system-ui,sans-serif;
  --font-body:'Libre Baskerville',Georgia,serif;
  --content-w:740px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;font-size:16px;}
body{font-family:var(--font-ui);background:var(--crema-0);color:var(--gris-1);-webkit-font-smoothing:antialiased;line-height:1.75;}
img{display:block;max-width:100%;}
a{color:var(--tierra);text-decoration:none;}
a:hover{color:var(--tierra-dark);}

/* ── Nav ── */
.blog-nav{position:sticky;top:0;z-index:50;border-bottom:1px solid var(--crema-2);background:rgba(253,250,245,0.92);backdrop-filter:blur(8px);}
.blog-nav-inner{max-width:1100px;margin:0 auto;padding:1rem 1.5rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;}
.blog-nav-inner .brand{display:flex;align-items:center;gap:0.7rem;}
.blog-nav-inner .brand img{height:38px;width:auto;}
.blog-nav-inner .brand b{font-family:var(--font-display);font-size:1.1rem;font-weight:500;color:var(--negro);}
.blog-nav-links{display:flex;gap:1.5rem;align-items:center;}
.blog-nav-links a{font-size:0.82rem;letter-spacing:0.04em;color:var(--gris-2);}
.blog-nav-links a:hover{color:var(--tierra);}
.blog-nav-links .cta{background:var(--tierra);color:#fff;padding:0.55rem 1.1rem;border-radius:2px;}
.blog-nav-links .cta:hover{background:var(--tierra-dark);color:#fff;}
@media(max-width:640px){.blog-nav-links a:not(.cta){display:none;}}

/* ── Encabezado del índice ── */
.blog-hero{max-width:var(--content-w);margin:0 auto;padding:clamp(2.5rem,6vw,4.5rem) 1.5rem 1.5rem;text-align:center;}
.blog-eyebrow{font-size:0.7rem;font-weight:500;letter-spacing:0.22em;text-transform:uppercase;color:var(--tierra);}
.blog-hero h1{font-family:var(--font-display);font-weight:300;font-size:clamp(2.4rem,6vw,4rem);line-height:1.05;color:var(--negro);margin:0.6rem 0;}
.blog-hero p{font-family:var(--font-body);font-size:1.02rem;color:var(--gris-2);max-width:560px;margin:0 auto;}

/* ── Grid de artículos ── */
.blog-grid{max-width:1100px;margin:2.5rem auto;padding:0 1.5rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem;}
.post-card{background:var(--blanco);border:1px solid var(--crema-2);overflow:hidden;display:flex;flex-direction:column;transition:transform .3s,box-shadow .3s;}
.post-card:hover{transform:translateY(-4px);box-shadow:0 12px 30px rgba(0,0,0,0.07);}
.post-card-img{aspect-ratio:16/10;width:100%;object-fit:cover;}
.post-card-body{padding:1.4rem 1.5rem 1.7rem;display:flex;flex-direction:column;gap:0.6rem;flex:1;}
.post-card-cat{font-size:0.66rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--tierra);}
.post-card-body h2{font-family:var(--font-display);font-weight:400;font-size:1.45rem;line-height:1.15;color:var(--negro);}
.post-card-body p{font-family:var(--font-body);font-size:0.9rem;color:var(--gris-2);flex:1;}
.post-card-body .read{font-size:0.8rem;letter-spacing:0.05em;color:var(--tierra);font-weight:500;}

/* ── Artículo ── */
.article-hero{max-width:var(--content-w);margin:0 auto;padding:clamp(2.5rem,6vw,4rem) 1.5rem 0;}
.article-hero .cat{font-size:0.7rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--tierra);}
.article-hero h1{font-family:var(--font-display);font-weight:300;font-size:clamp(2.2rem,5.5vw,3.6rem);line-height:1.08;color:var(--negro);margin:0.6rem 0;}
.article-meta{font-size:0.8rem;color:var(--gris-3);letter-spacing:0.04em;}
.article-cover{max-width:1000px;margin:2rem auto;padding:0 1.5rem;}
.article-cover img{width:100%;aspect-ratio:16/8;object-fit:cover;}
.article-body{max-width:var(--content-w);margin:0 auto;padding:0 1.5rem 3rem;}
.article-body p{font-family:var(--font-body);font-size:1.06rem;line-height:1.85;color:var(--gris-1);margin-bottom:1.3rem;}
.article-body h2{font-family:var(--font-display);font-weight:400;font-size:1.85rem;color:var(--negro);margin:2.4rem 0 0.9rem;line-height:1.15;}
.article-body h3{font-family:var(--font-ui);font-weight:600;font-size:1.05rem;color:var(--negro);margin:1.8rem 0 0.6rem;}
.article-body ul,.article-body ol{margin:0 0 1.4rem 1.3rem;}
.article-body li{font-family:var(--font-body);font-size:1.04rem;line-height:1.75;margin-bottom:0.6rem;}
.article-body strong{color:var(--negro);}
.article-body blockquote{border-left:3px solid var(--tierra-claro);padding:0.4rem 0 0.4rem 1.3rem;margin:1.6rem 0;font-family:var(--font-display);font-style:italic;font-size:1.3rem;color:var(--tierra-dark);}

/* ── CTA dentro/al final del artículo ── */
.article-cta{max-width:var(--content-w);margin:2.5rem auto;padding:2rem 1.5rem;background:var(--verde-dark);color:#fff;text-align:center;}
.article-cta h3{font-family:var(--font-display);font-weight:400;font-size:1.7rem;margin-bottom:0.5rem;color:#fff;}
.article-cta p{font-size:0.92rem;color:rgba(255,255,255,0.75);margin-bottom:1.2rem;}
.article-cta .btns{display:flex;gap:0.8rem;justify-content:center;flex-wrap:wrap;}
.btn{display:inline-flex;align-items:center;gap:0.4rem;font-family:var(--font-ui);font-size:0.82rem;font-weight:500;letter-spacing:0.04em;padding:0.8rem 1.5rem;border-radius:2px;cursor:pointer;transition:all .3s;}
.btn--tierra{background:var(--tierra);color:#fff;}
.btn--tierra:hover{background:var(--tierra-claro);color:#fff;}
.btn--ghost{border:1px solid rgba(255,255,255,0.4);color:#fff;}
.btn--ghost:hover{background:rgba(255,255,255,0.1);color:#fff;}

/* ── Otros artículos ── */
.more-posts{max-width:1100px;margin:0 auto 3rem;padding:2rem 1.5rem 0;border-top:1px solid var(--crema-2);}
.more-posts h2{font-family:var(--font-display);font-weight:400;font-size:1.6rem;color:var(--negro);margin-bottom:1.5rem;text-align:center;}

/* ── Footer ── */
.blog-footer{background:#0d0b08;color:rgba(255,255,255,0.4);text-align:center;padding:2.2rem 1.5rem;font-size:0.78rem;}
.blog-footer a{color:rgba(255,255,255,0.6);}
.blog-footer a:hover{color:#fff;}

/* ── Foco visible (a11y) ── */
a:focus-visible,button:focus-visible{outline:2px solid var(--tierra);outline-offset:3px;border-radius:2px;}

/* ── Respeto a "reducir movimiento" (a11y) ── */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important;}
  .post-card:hover{transform:none;}
}