/* Reutiliza las variables del index */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;1,9..40,300&family=DM+Serif+Display:ital@0;1&display=swap');

:root {
  --forest:#2A3E27;--sage:#4A6741;--sage-light:#7A9E70;
  --mist:#B0C8A8;--cream:#F8F5EE;--warm:#FAF8F3;
  --terra:#C07858;--sand:#E8DDD0;--sand-deep:#D4C4B0;
  --ink:#2C2C2C;--gray:#6A7A65;--border:rgba(74,103,65,.13);
  --serif:'DM Serif Display',serif;--sans:'DM Sans',sans-serif;
  --ease:cubic-bezier(0.25,0.46,0.45,0.94);
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--sans);font-weight:300;background:var(--cream);color:var(--ink);overflow-x:hidden}

/* BLOG INDEX */
.blog-main{max-width:1200px;margin:0 auto;padding:120px 40px 80px}
.blog-header{text-align:center;margin-bottom:64px}
.blog-hero-title{font-family:var(--serif);font-size:clamp(2.4rem,5vw,4rem);color:var(--forest);font-weight:400;margin-bottom:16px;line-height:1.1}
.blog-hero-title em{font-style:italic;color:var(--terra)}
.blog-hero-sub{font-size:16px;color:var(--gray);max-width:520px;margin:0 auto;line-height:1.75}
.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:32px}
.blog-card{background:white;border-radius:20px;overflow:hidden;border:1px solid var(--border);transition:transform .3s var(--ease),box-shadow .3s}
.blog-card:hover{transform:translateY(-6px);box-shadow:0 24px 56px rgba(42,62,39,.1)}
.blog-card-img-link{display:block;aspect-ratio:3/2;overflow:hidden}
.blog-card-img-link img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.blog-card:hover .blog-card-img-link img{transform:scale(1.05)}
.blog-card-body{padding:24px 28px}
.blog-meta{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--gray);margin-bottom:12px;flex-wrap:wrap}
.blog-tag{background:var(--sand);color:var(--forest);padding:3px 10px;border-radius:100px;font-size:10.5px;font-weight:500;letter-spacing:.08em}
.blog-card h2{font-family:var(--serif);font-size:1.2rem;font-weight:400;color:var(--forest);margin-bottom:10px;line-height:1.35}
.blog-card h2 a{text-decoration:none;color:inherit;transition:color .2s}
.blog-card h2 a:hover{color:var(--terra)}
.blog-card p{font-size:13.5px;color:var(--gray);line-height:1.75;margin-bottom:16px}
.blog-read-more{font-size:13px;color:var(--terra);text-decoration:none;font-weight:400;letter-spacing:.04em;transition:gap .2s}

/* POST INDIVIDUAL */
.post-wrap{max-width:720px;margin:0 auto;padding:100px 24px 80px}
.post-header{margin-bottom:48px}
.post-title{font-family:var(--serif);font-size:clamp(2rem,5vw,3.2rem);font-weight:400;color:var(--forest);line-height:1.1;margin:16px 0}
.post-lead{font-size:17px;color:var(--gray);line-height:1.8;font-weight:300;margin-bottom:32px}
.post-hero-img{border-radius:16px;overflow:hidden}
.post-hero-img img{width:100%;display:block}
.post-content{font-size:16px;line-height:1.85;color:#3A4A38}
.post-content h2{font-family:var(--serif);font-size:1.7rem;color:var(--forest);margin:48px 0 18px;font-weight:400}
.post-content h3{font-family:var(--serif);font-size:1.3rem;color:var(--forest);margin:36px 0 14px;font-weight:400}
.post-content p{margin-bottom:22px}
.post-content a{color:var(--terra);text-decoration:underline;text-underline-offset:3px}
.post-content a:hover{color:var(--forest)}
.post-content strong{font-weight:500;color:var(--forest)}
.post-content ul,.post-content ol{padding-left:24px;margin-bottom:22px;display:flex;flex-direction:column;gap:8px}
.post-figure{margin:40px 0;border-radius:12px;overflow:hidden}
.post-figure img{width:100%;display:block}
.post-figure figcaption{font-size:12.5px;color:var(--gray);padding:10px 0 0;font-style:italic;text-align:center}
.post-cta{background:var(--forest);border-radius:20px;padding:36px;text-align:center;margin:56px 0;color:var(--cream)}
.post-cta p{font-size:16px;margin-bottom:20px;color:var(--mist);line-height:1.65}
.post-cta .btn-primary{display:inline-flex}
.related-posts{margin-top:64px;padding-top:40px;border-top:1px solid var(--border)}
.related-posts h3{font-family:var(--serif);font-size:1.4rem;color:var(--forest);margin-bottom:24px}
.related-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.related-card{display:flex;flex-direction:column;gap:12px;text-decoration:none;color:var(--forest)}
.related-card img{border-radius:12px;width:100%;aspect-ratio:3/2;object-fit:cover;transition:transform .3s}
.related-card:hover img{transform:scale(1.03)}
.related-card span{font-size:13.5px;font-weight:400;line-height:1.5;transition:color .2s}
.related-card:hover span{color:var(--terra)}