/* ============================================================
   ONLYDERM · blog.css (usa tokens de ../styles.css)
   ============================================================ */

/* ---------- HERO DE ARTÍCULO / ÍNDICE ---------- */
.blog-hero{padding:clamp(120px,16vw,180px) 0 clamp(40px,5vw,64px)}
.blog-hero .chip{display:inline-block; background:var(--cream); border:1px solid var(--line-soft); color:var(--ink-soft); font-size:.78rem; padding:.4em 1em; border-radius:100px}
.byline{display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:1.3rem; font-size:.88rem; color:var(--ink-soft)}
.byline b{color:var(--ink); font-weight:600}
.byline .dot{width:3px; height:3px; border-radius:50%; background:var(--ink-soft)}
.byline .chip{background:var(--blush); border:none; color:var(--clay-deep); font-weight:600}

/* ---------- CUERPO DEL ARTÍCULO ---------- */
.art-body{max-width:720px; margin-inline:auto; padding-bottom:10px}
.art-body .lead{font-size:1.16rem; color:var(--ink-2); margin-bottom:1.4rem; line-height:1.65}
.art-body h2{font-size:clamp(1.5rem,3vw,2.05rem); margin:2.7rem 0 1rem; color:var(--ink)}
.art-body h3{font-family:var(--sans); font-weight:700; font-size:1.12rem; margin:1.8rem 0 .8rem; color:var(--ink)}
.art-body p{margin-bottom:1.15rem; color:var(--ink-2); font-size:1.02rem; line-height:1.72}
.art-body ul{margin:0 0 1.3rem 0; padding-left:0; list-style:none; display:flex; flex-direction:column; gap:.6rem}
.art-body ul li{position:relative; padding-left:1.5em; color:var(--ink-2); line-height:1.62}
.art-body ul li::before{content:""; position:absolute; left:0; top:.62em; width:6px; height:6px; border-radius:50%; background:var(--clay)}
.art-body ul li b{color:var(--ink); font-weight:700}
.art-body .note{background:var(--blush); border-left:3px solid var(--clay); padding:16px 22px; border-radius:4px 14px 14px 4px; margin:1.8rem 0; font-size:.95rem; color:var(--ink-2); line-height:1.6}
.art-body .note b{color:var(--clay-deep)}

.art-body .tbl{overflow-x:auto; margin:1.8rem 0; border-radius:16px; border:1px solid var(--line-soft); box-shadow:var(--shadow-sm)}
.art-body table{width:100%; border-collapse:collapse; font-size:.9rem}
.art-body th{background:var(--blush); text-align:left; padding:13px 18px; font-family:var(--sans); font-weight:700; color:var(--ink); white-space:nowrap}
.art-body td{padding:13px 18px; border-top:1px solid var(--line-soft); color:var(--ink-2)}
.art-body tr:hover td{background:var(--porcelain)}

.art-body .faq-list details{border-bottom:1px solid var(--line); padding:2px 0}
.art-body .faq-list summary{list-style:none; cursor:pointer; padding:18px 0; display:flex; justify-content:space-between; gap:18px; align-items:center; font-weight:600; font-size:1rem; font-family:var(--sans); color:var(--ink); transition:color .25s}
.art-body .faq-list summary:hover{color:var(--clay)}
.art-body .faq-list summary::-webkit-details-marker{display:none}
.art-body .faq-list summary .pm{width:20px; height:20px; flex:none; transition:transform .35s var(--ease); color:var(--clay)}
.art-body .faq-list details[open] summary .pm{transform:rotate(135deg)}
.art-body .faq-list details p{padding:0 0 20px; margin:0; color:var(--ink-soft); font-size:.96rem}

.art-body .aviso{font-size:.86rem; color:var(--ink-soft); font-style:italic; border-top:1px solid var(--line); padding-top:22px; margin-top:2.4rem}
.art-body .fuentes{margin-top:1.6rem; font-size:.84rem; color:var(--ink-soft)}
.art-body .fuentes h4{font-family:var(--sans); font-weight:700; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:.8rem}
.art-body .fuentes ol{margin-left:1.2rem; display:flex; flex-direction:column; gap:.4rem}

/* ---------- CTA de artículo ---------- */
.art-cta{padding:clamp(40px,6vw,80px) 0}
.art-cta .in{max-width:640px; margin-inline:auto; text-align:center; background:var(--ink); color:var(--cream); border-radius:28px; padding:clamp(42px,6vw,64px) clamp(26px,5vw,50px)}
.art-cta .eyebrow{color:oklch(0.95 0.04 351); justify-content:center}
.art-cta h2{color:var(--cream); font-size:clamp(1.8rem,4vw,2.5rem); margin-top:.9rem}
.art-cta h2 em{font-style:italic; color:oklch(0.88 0.09 351)}
.art-cta p{color:oklch(0.97 0.02 350 / .9); margin:1rem auto 0; max-width:44ch; font-size:1.02rem}
.art-cta .btn-primary{margin-top:1.8rem; background:var(--cream); color:var(--clay-deep)}
.art-cta .btn-primary:hover{background:oklch(0.95 0.02 70)}

/* ---------- RELACIONADOS ---------- */
.rel{padding:clamp(20px,4vw,40px) 0 clamp(80px,8vw,120px)}
.rel h2{font-size:clamp(1.7rem,3.6vw,2.5rem); margin-bottom:clamp(24px,3vw,38px)}

/* ---------- GRID / TARJETAS DE BLOG ---------- */
.blog-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.blog-card{display:block; background:var(--cream); border:1px solid var(--line-soft); border-radius:20px; padding:28px 26px; transition:transform .4s var(--ease), box-shadow .4s, border-color .4s}
.blog-card:hover{transform:translateY(-6px); box-shadow:var(--shadow); border-color:transparent}
.blog-card .cat{font-size:.68rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--clay)}
.blog-card h3{font-size:1.28rem; margin:.7rem 0 .6rem; line-height:1.16}
.blog-card p{color:var(--ink-soft); font-size:.92rem; line-height:1.55}
.blog-card .more{display:inline-flex; align-items:center; gap:.5em; margin-top:16px; font-weight:600; font-size:.86rem; color:var(--clay); transition:gap .25s}
.blog-card:hover .more{gap:.85em}

@media(max-width:960px){
  .blog-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
  .blog-grid{grid-template-columns:1fr}
}