.blog-hero{padding:64px 48px;background:var(--navy);text-align:center;}
.blog-hero h1{color:#fff;font-size:40px;font-weight:700;margin-bottom:12px;}
.blog-hero p{color:rgba(247,243,234,.75);font-size:15px;max-width:520px;margin:0 auto;}

.blog-grid{padding:64px 48px 96px;display:grid;grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));gap:28px;max-width:1200px;margin:0 auto;}
.blog-card{background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 18px 34px -18px rgba(23,22,30,.2);display:flex;flex-direction:column;transition:transform .25s ease;}
.blog-card:hover{transform:translateY(-6px);}
.blog-card .thumb{width:100%;height:190px;object-fit:cover;background:var(--cream);display:block;}
.blog-card .body{padding:22px;display:flex;flex-direction:column;flex:1;}
.blog-card h2{font-size:19px;font-weight:700;margin-bottom:8px;line-height:1.3;}
.blog-card p{font-size:13.5px;color:#5b5870;line-height:1.55;margin-bottom:16px;flex:1;}
.blog-card time{font-size:11.5px;color:#8b8578;text-transform:uppercase;letter-spacing:.05em;margin-bottom:10px;}
.blog-card .link{align-self:flex-start;font-size:13px;font-weight:700;color:var(--azul);}
.blog-empty{padding:96px 48px;text-align:center;color:#5b5870;}

.blog-article{max-width:760px;margin:0 auto;padding:56px 24px 96px;box-sizing:border-box;overflow-x:hidden;}
.blog-article .thumb{display:block;width:100%;max-width:100%;height:360px;object-fit:cover;border-radius:18px;margin-bottom:32px;box-sizing:border-box;}
.blog-article time{display:block;font-size:12px;color:#8b8578;text-transform:uppercase;letter-spacing:.05em;margin-bottom:10px;}
.blog-article h1{font-size:36px;font-weight:700;line-height:1.15;margin-bottom:24px;}
.blog-article .content{font-size:16px;line-height:1.75;color:#2b2938;}
.blog-article .content p{margin-bottom:20px;}
.blog-article .content h2{font-size:24px;font-weight:700;margin:32px 0 14px;}
.blog-article .content h3{font-size:19px;font-weight:700;margin:26px 0 12px;}
.blog-article .content img{max-width:100%;border-radius:12px;margin:20px 0;}
.blog-article .content a{text-decoration:underline;}
.blog-article .back{display:inline-block;margin-bottom:28px;font-size:13px;font-weight:700;color:var(--azul);}

/* Acordeón nativo (<details>/<summary>) para páginas tipo FAQ (ej. /tramites). */
.blog-article .content details{border:1px solid #e4e0d8;border-radius:12px;padding:14px 18px;margin-bottom:12px;}
.blog-article .content details[open]{padding-bottom:18px;}
.blog-article .content summary{cursor:pointer;font-weight:700;color:var(--azul);list-style:none;}
.blog-article .content summary::-webkit-details-marker{display:none;}
.blog-article .content details[open] summary{margin-bottom:10px;}
.blog-article .content details p:last-child{margin-bottom:0;}

@media(max-width:640px){
  /* Este archivo nunca había tenido un breakpoint mobile -- el padding de 48px dejaba menos
     ancho disponible que el minmax(300px) del grid, así que las tarjetas se desbordaban
     (scroll horizontal) en vez de acomodarse a una columna. */
  .blog-hero{padding:48px 22px;}
  .blog-hero h1{font-size:clamp(28px,8vw,40px);}
  .blog-grid{grid-template-columns:1fr;padding:40px 22px 64px;gap:20px;}
  .blog-empty{padding:64px 22px;}
  /* margin:0 auto (regla base, para centrar el artículo bajo max-width:760px en desktop) hacía
     que el navegador centrara el artículo contra un ancho de bloque contenedor mal calculado en
     mobile -- probablemente por el cajón del menú, que vive fuera de pantalla vía transform. En
     mobile el artículo ya ocupa todo el ancho disponible, no hace falta centrarlo -- se anula. */
  .blog-article{margin:0;padding:40px 20px 64px;}
  .blog-article .thumb{height:220px;}
  .blog-article h1{font-size:clamp(24px,7vw,36px);line-height:1.2;text-wrap:balance;}
}