/* =====================================================================
   BELLA SUIZA — ESTILOS DEL BLOG  ·  blog/blog.css
   Reutiliza las variables de ../assets/css/style.css
   ===================================================================== */

/* ---------- CABECERA DEL LISTADO ---------- */
.blog-hero{
  background:linear-gradient(140deg,var(--forest),var(--ink) 70%);
  color:var(--txt-inv);padding:clamp(70px,9vw,120px) 0 clamp(60px,7vw,96px);
  text-align:center;position:relative;overflow:hidden;
}
.blog-hero::after{
  content:'';position:absolute;right:-90px;top:-90px;width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle,rgba(223,182,72,.22),transparent 70%);
}
.blog-hero .wrap{position:relative;z-index:2}
.blog-hero h1{color:#fff;margin:.4em 0 .5em;font-size:clamp(2.1rem,4.6vw,3.6rem)}
.blog-hero .lead{color:var(--txt-inv-mut)}
.blog-hero .eyebrow{color:var(--gold-soft);justify-content:center}
.blog-hero .eyebrow::before{background:var(--gold)}

/* ---------- TARJETAS DEL LISTADO ---------- */
.posts{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:clamp(18px,2.4vw,28px)}
.post{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-l);
  overflow:hidden;box-shadow:var(--shadow-s);
  transition:transform .45s var(--ease-out),box-shadow .45s,border-color .35s;
}
.post:hover{transform:translateY(-6px);box-shadow:var(--shadow-l);border-color:var(--sand-2)}
.post-link{display:block;padding:clamp(24px,2.8vw,34px);height:100%}
.post-emoji{
  display:grid;place-items:center;width:56px;height:56px;border-radius:17px;
  background:var(--gold-soft);font-size:1.6rem;margin-bottom:18px;
}
.post-cat{
  display:block;font-size:.7rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold-deep);margin-bottom:10px;
}
.post h2{font-size:clamp(1.24rem,1.9vw,1.55rem);margin-bottom:.55em;line-height:1.22}
.post p{font-size:.92rem;color:var(--txt-mut);line-height:1.7;margin-bottom:20px}
.post-more{
  display:inline-flex;align-items:center;gap:.5em;font-size:.86rem;font-weight:600;color:var(--gold-deep);
}
.post-more svg{width:15px;height:15px;transition:transform .35s var(--ease)}
.post:hover .post-more svg{transform:translateX(4px)}

/* ---------- ARTÍCULO ---------- */
.art{padding:clamp(28px,4vw,54px) 0 clamp(60px,7vw,100px)}
.art-wrap{max-width:820px}
.crumbs{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  font-size:.79rem;color:var(--txt-mut);margin-bottom:26px;
}
.crumbs a{color:var(--txt-mut);transition:color .25s}
.crumbs a:hover{color:var(--gold-deep)}
.crumbs span:last-child{color:var(--ink);font-weight:500}

.art-hd{margin-bottom:clamp(28px,3.6vw,44px);padding-bottom:clamp(24px,3vw,34px);border-bottom:1px solid var(--line)}
.art-hd .eyebrow{margin-bottom:.7em}
.art-hd h1{font-size:clamp(1.95rem,4.2vw,3rem);line-height:1.12;margin-bottom:.55em}
.art-meta{display:flex;gap:10px;flex-wrap:wrap;font-size:.82rem;color:var(--txt-mut);align-items:center}
.art-meta b{color:var(--ink);font-weight:600}

.art-body{font-size:clamp(1rem,1.15vw,1.075rem);line-height:1.82;color:var(--txt)}
.art-body > p:first-of-type{font-size:1.14em;color:var(--txt-mut);line-height:1.75}
.art-body h2{
  font-size:clamp(1.36rem,2.5vw,1.78rem);margin:2em 0 .6em;
  padding-top:.2em;scroll-margin-top:calc(var(--hdr) + 20px);
}
.art-body h3{font-size:clamp(1.1rem,1.7vw,1.28rem);margin:1.6em 0 .5em}
.art-body p{margin-bottom:1.15em}
.art-body b{font-weight:600;color:var(--ink)}
.art-body ul,.art-body ol{margin:0 0 1.3em 0;padding-left:0;display:grid;gap:.6em}
.art-body ul li,.art-body ol li{
  position:relative;padding-left:1.7em;line-height:1.7;
}
.art-body ul li::before{
  content:'';position:absolute;left:.35em;top:.68em;width:6px;height:6px;border-radius:50%;background:var(--gold);
}
.art-body ol{counter-reset:n}
.art-body ol li{counter-increment:n}
.art-body ol li::before{
  content:counter(n);position:absolute;left:0;top:.06em;
  width:1.2em;height:1.2em;border-radius:50%;background:var(--gold-soft);color:var(--gold-deep);
  display:grid;place-items:center;font-size:.72rem;font-weight:700;
}
.art-body a{color:var(--gold-deep);font-weight:500;text-decoration:underline;text-underline-offset:2px}
.art-body a:hover{color:var(--ink)}

/* CTA dentro del artículo */
.art-cta{
  margin:clamp(34px,4.4vw,54px) 0;padding:clamp(28px,3.4vw,44px);
  background:linear-gradient(135deg,var(--forest),var(--ink));
  border-radius:var(--radius-l);color:var(--txt-inv);text-align:center;
  position:relative;overflow:hidden;
}
.art-cta::after{
  content:'';position:absolute;left:-70px;bottom:-90px;width:280px;height:280px;border-radius:50%;
  background:radial-gradient(circle,rgba(223,182,72,.2),transparent 70%);
}
.art-cta > *{position:relative;z-index:2}
.art-cta h3{color:#fff;margin-bottom:.4em;font-size:clamp(1.28rem,2.2vw,1.62rem)}
.art-cta p{color:var(--txt-inv-mut);font-size:.94rem;max-width:52ch;margin:0 auto 24px}

/* artículos relacionados */
.art-rel{margin-top:clamp(44px,5.5vw,72px);padding-top:clamp(30px,4vw,44px);border-top:1px solid var(--line)}
.art-rel h2{font-size:clamp(1.2rem,2vw,1.5rem);margin-bottom:24px}
.rel-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.rel-card{
  display:block;padding:18px 20px;border-radius:var(--radius);border:1.5px solid var(--line);
  background:var(--cream);transition:all .35s var(--ease);
}
.rel-card:hover{border-color:var(--gold);background:#fff;transform:translateY(-3px);box-shadow:var(--shadow)}
.rel-card span{font-size:1.4rem;display:block;margin-bottom:9px}
.rel-card b{display:block;font-size:.9rem;font-weight:600;line-height:1.35;margin-bottom:5px;color:var(--ink)}
.rel-card i{font-style:normal;font-size:.73rem;color:var(--txt-mut)}

@media(max-width:620px){
  .art-body{font-size:1rem}
  .crumbs{font-size:.74rem}
}