/* ---------- Blog: listado ----------
   Cabecera en lila (el skincare manda en el blog), destacado grande y rejilla con la tarjeta común.
   Los artículos sin portada se pintan como ficha tipográfica en el color de su categoría. */
.blog-hero{background:var(--lilac);overflow:hidden}
.blog-hero .crumbs{padding-top:22px;color:#3e3340}
.blog-hero .crumbs [aria-current]{color:var(--ink)}
.blog-hero-row{position:relative;display:grid;grid-template-columns:auto 1fr;align-items:end;gap:12px 48px;padding:18px 0 40px}
.blog-hero h1{font-family:var(--display);font-weight:400;font-size:clamp(3.2rem,9vw,7.5rem);line-height:.86;letter-spacing:-.03em;text-transform:uppercase;margin:0}
.blog-hero p{margin:0 0 10px;font-size:17px;max-width:40ch;justify-self:end}
.blog-sticker{position:absolute;left:clamp(260px,40vw,600px);top:6px;background:var(--butter);font-family:var(--hand);font-size:clamp(20px,1.9vw,27px);line-height:.95;text-transform:uppercase;padding:11px 14px 9px;transform:rotate(-6deg);box-shadow:0 14px 24px -14px rgba(90,60,0,.55)}
.blog-sticker svg{width:.8em;height:.8em;vertical-align:-.05em;color:var(--berry)}

.feature{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,56px);align-items:center;margin:40px 0 8px}
.feature-pic{aspect-ratio:3/2;border-radius:var(--r-card);overflow:hidden;background:var(--mist)}
.feature-pic img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease-out)}
.feature:hover .feature-pic img{transform:scale(1.03)}
.feature-copy .post-cat{display:inline-block;margin-bottom:14px}
.feature h2{font-family:var(--display);font-weight:400;font-size:clamp(28px,3.2vw,46px);line-height:.98;letter-spacing:-.015em;text-transform:uppercase;margin:0 0 14px;text-wrap:balance;transition:color .2s}
.feature:hover h2{color:var(--berry)}
.feature p{margin:0 0 20px;color:var(--muted);font-size:16.5px;max-width:46ch}
.feature .more{color:var(--ink)}

.blog-bar{display:flex;justify-content:space-between;align-items:center;gap:20px;margin:44px 0 22px;padding-top:28px;border-top:1px solid var(--line)}
.blog-cats{display:flex;flex-wrap:wrap;gap:8px}
.bcat{display:inline-flex;align-items:center;height:40px;padding:0 18px;border-radius:var(--r-pill);border:1.5px solid #e6dbe1;font-weight:700;font-size:13.5px;transition:background .2s,border-color .2s,color .2s}
.bcat:hover{border-color:var(--ink)}
.bcat[aria-current="page"]{background:var(--ink);border-color:var(--ink);color:#fff}
.bcat .n{font-weight:500;opacity:.6;margin-left:4px}
.blog-count{margin:0;font-size:14.5px;color:var(--muted);white-space:nowrap}
.blog-count b{color:var(--ink)}
.blog-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 28px}
.blog-grid .post{animation:cardIn .5s var(--ease-out) both}
@keyframes cardIn{from{opacity:0;transform:translateY(10px)}}
.post time{font-size:13px;color:var(--muted)}
.post-row{display:flex;align-items:center;gap:10px}
.more-wrap{display:flex;justify-content:center;margin:44px 0 64px}

@media (max-width:1023px){
  .blog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .blog-bar{flex-direction:column;align-items:flex-start}
  .blog-cats{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 calc(-1 * var(--gut));padding:0 var(--gut);width:calc(100% + 2 * var(--gut))}
  .blog-cats::-webkit-scrollbar{display:none}
  .bcat{flex:none}
}
@media (max-width:767px){
  .blog-hero-row{grid-template-columns:1fr;padding:12px 0 28px}
  .blog-hero p{justify-self:start;font-size:15.5px}
  .blog-sticker{position:static;justify-self:start;font-size:19px;margin:4px 0 6px}
  .feature{grid-template-columns:1fr;margin-top:24px}
  .blog-grid{grid-template-columns:1fr;gap:30px}
  .blog-bar{margin-top:32px}
}
@media (prefers-reduced-motion:reduce){
  .blog-grid .post{animation:none}
}