/* Estilos del blog de ReformasB — páginas estáticas autocontenidas.
   Reutilizan los tokens (--color-*, --font-*) del CSS principal del sitio,
   que debe cargarse ANTES que este archivo. Sin dependencia de React. */

.blog-main{background:var(--color-paper)}

.blog-container{width:100%;max-width:840px;margin:0 auto;padding:0 clamp(16px,4vw,32px)}
.blog-container-wide{max-width:1120px}

.blog-article{padding:38px 0 64px}

.blog-breadcrumbs{font-size:.84rem;color:var(--color-muted);margin:0 0 22px}
.blog-breadcrumbs a{color:var(--color-copper);font-weight:700;text-decoration:none}
.blog-breadcrumbs a:hover{text-decoration:underline}
.blog-breadcrumbs span{margin:0 6px;color:var(--color-line)}

.blog-article h1{font-family:var(--font-epilogue),var(--font-sans),Arial,sans-serif;font-size:clamp(1.85rem,4vw,2.6rem);line-height:1.14;letter-spacing:-.015em;color:var(--color-ink);margin:8px 0 16px;font-weight:800}

.blog-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:.85rem;color:var(--color-muted);margin:0 0 26px}
.blog-meta .blog-meta-sep{color:var(--color-line)}

.blog-standfirst{font-size:clamp(1.04rem,1.4vw,1.2rem);line-height:1.62;color:var(--color-muted);margin:0 0 30px;max-width:46em}

.blog-hero{margin:0 0 38px;border-radius:14px;overflow:hidden;box-shadow:0 18px 40px #18201d21}
.blog-hero img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block}
.blog-hero figcaption{font-size:.82rem;color:var(--color-muted);padding:10px 14px;background:var(--color-soft)}

.blog-body{font-size:1.02rem;line-height:1.72;color:#2c332f}
.blog-body h2{font-family:var(--font-epilogue),var(--font-sans),Arial,sans-serif;font-size:clamp(1.34rem,2.2vw,1.66rem);line-height:1.25;color:var(--color-ink);margin:46px 0 14px;font-weight:800}
.blog-body h3{font-size:1.12rem;color:var(--color-ink);margin:30px 0 10px;font-weight:800}
.blog-body p{margin:0 0 18px}
.blog-body ul,.blog-body ol{margin:0 0 20px;padding-left:22px}
.blog-body li{margin:0 0 9px}
.blog-body a{color:var(--color-copper);font-weight:700;text-decoration:underline;text-underline-offset:2px}
.blog-body a:hover{color:#8a4d31}
.blog-body strong{color:var(--color-ink)}

.blog-table-wrap{overflow-x:auto;margin:0 0 24px}
.blog-body table{width:100%;border-collapse:collapse;font-size:.94rem;min-width:480px}
.blog-body th,.blog-body td{border:1px solid var(--color-line);padding:10px 12px;text-align:left;vertical-align:top}
.blog-body th{background:var(--color-soft);color:var(--color-ink)}

.blog-note{border-left:4px solid var(--color-copper);background:var(--color-soft);padding:16px 18px;border-radius:0 10px 10px 0;margin:0 0 22px}
.blog-note p:last-child{margin-bottom:0}

.blog-figure{margin:26px 0;border-radius:12px;overflow:hidden}
.blog-figure img{width:100%;height:auto;display:block}
.blog-figure figcaption{font-size:.82rem;color:var(--color-muted);padding:9px 12px;background:var(--color-soft)}

.blog-cta{background:var(--color-ink);color:#e7e4dc;border-radius:14px;padding:30px clamp(20px,3.4vw,36px);margin:42px 0}
.blog-cta h2{font-family:var(--font-epilogue),var(--font-sans),Arial,sans-serif;color:#fff;margin:0 0 10px;font-size:clamp(1.25rem,2vw,1.5rem);line-height:1.25}
.blog-cta p{margin:0 0 20px;line-height:1.6}
.blog-cta-buttons{display:flex;gap:12px;flex-wrap:wrap}
.blog-cta-buttons a{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:12px 22px;font-weight:800;font-size:.95rem;text-decoration:none;transition:transform .16s ease,background .16s ease}
.blog-cta-buttons a:hover{transform:translateY(-1px)}
.blog-cta-btn-primary{background:var(--color-copper);color:#fff}
.blog-cta-btn-primary:hover{background:#b56c49}
.blog-cta-btn-ghost{background:#ffffff14;color:#fff;border:1px solid #ffffff3d}
.blog-cta-btn-ghost:hover{background:#ffffff24}

.blog-faq{margin:44px 0 0}
.blog-faq h2{font-family:var(--font-epilogue),var(--font-sans),Arial,sans-serif;font-size:clamp(1.3rem,2.1vw,1.6rem);color:var(--color-ink);margin:0 0 16px;font-weight:800}
.blog-faq details{border:1px solid var(--color-line);border-radius:10px;background:#fff;margin:0 0 10px;overflow:hidden}
.blog-faq summary{cursor:pointer;font-weight:800;color:var(--color-ink);padding:14px 16px;list-style:none;position:relative;padding-right:38px}
.blog-faq summary::-webkit-details-marker{display:none}
.blog-faq summary:after{content:"+";position:absolute;right:16px;top:50%;transform:translateY(-50%);color:var(--color-copper);font-size:1.2rem;font-weight:800}
.blog-faq details[open] summary:after{content:"−"}
.blog-faq .faq-a{padding:0 16px 16px;color:#2c332f;line-height:1.65}
.blog-faq .faq-a p{margin:0 0 10px}
.blog-faq .faq-a p:last-child{margin-bottom:0}
.blog-faq .faq-a a{color:var(--color-copper);font-weight:700}

.blog-related{margin:46px 0 0;border-top:1px solid var(--color-line);padding-top:28px}
.blog-related h2{font-size:1.05rem;letter-spacing:.06em;text-transform:uppercase;color:var(--color-muted);margin:0 0 16px;font-weight:800}
.blog-related-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.blog-related-card{display:block;border:1px solid var(--color-line);border-radius:12px;padding:16px 18px;background:#fff;text-decoration:none;color:var(--color-ink);font-weight:800;line-height:1.4;transition:transform .16s ease,box-shadow .16s ease}
.blog-related-card:hover{transform:translateY(-2px);box-shadow:0 12px 26px #18201d1c}
.blog-related-card span{display:block;font-size:.74rem;color:var(--color-copper);text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px}

/* ---------- Índice del blog ---------- */

.blog-list-head{padding:44px 0 6px}
.blog-list-head h1{font-family:var(--font-epilogue),var(--font-sans),Arial,sans-serif;font-size:clamp(2rem,4.4vw,2.9rem);line-height:1.1;letter-spacing:-.015em;color:var(--color-ink);margin:8px 0 14px;font-weight:800}
.blog-list-head p{font-size:clamp(1rem,1.3vw,1.15rem);line-height:1.62;color:var(--color-muted);max-width:52em;margin:0}

.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px;margin:34px 0 64px}
.blog-card{border:1px solid var(--color-line);border-radius:14px;overflow:hidden;background:#fff;display:flex;flex-direction:column;text-decoration:none;color:inherit;transition:transform .18s ease,box-shadow .18s ease}
.blog-card:hover{transform:translateY(-3px);box-shadow:0 18px 38px #18201d1f}
.blog-card img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block}
.blog-card-body{padding:18px 18px 22px;display:flex;flex-direction:column;gap:9px;flex:1}
.blog-card-tag{font-size:.74rem;color:var(--color-copper);text-transform:uppercase;letter-spacing:.08em;font-weight:800}
.blog-card-body h2{font-family:var(--font-epilogue),var(--font-sans),Arial,sans-serif;font-size:1.18rem;line-height:1.3;color:var(--color-ink);margin:0;font-weight:800}
.blog-card-body p{font-size:.93rem;line-height:1.58;color:var(--color-muted);margin:0;flex:1}
.blog-card-more{font-size:.88rem;font-weight:800;color:var(--color-copper)}

@media (max-width:560px){
  .blog-article{padding:26px 0 52px}
  .blog-hero{border-radius:10px}
  .blog-cta-buttons a{width:100%;justify-content:center}
}