/* =============================================================================
   Blog — componentes que comparten el índice y el artículo (encabezado oscuro,
   migas, insignia, kicker, fila de H2 y la tarjeta de entrada `.post`). La
   encolan inc/blog.php en las dos vistas, ANTES de la hoja de cada una
   (blog-index.css / blog-article.css), que es el orden del standalone.

   CSS portado literalmente del diseño aprobado. No se redeclaran aquí: reset,
   topbar, header/nav, mega-menú, menú móvil, footer, .wrap, .mont, .btn-red
   ni .band — viven en style.css y los comparten todas las secciones.
   Fuente: Nuevo_estilo_mpc/MPC_blog/MPC Blog standalone.html y
           MPC Blog Articulo standalone.html (este bloque es idéntico en los dos).

   Un ajuste respecto del diseño, por la cascada del tema y sin cambiar un
   valor: `.h2-row h2` lleva !important a 900px, porque style.css trae
   `section h2 { font-size:28px !important }` para todas las secciones.
   ========================================================================== */

/* Lo que el «chrome global» de estos dos standalone trae distinto de la Home
   (style.css): el `.btn` a 13px —con el CTA del nav en sus 13.5px, como en
   las demás secciones interiores—, los campos de formulario con la tipografía
   del sitio y el desplazamiento suave de las anclas. */
input { font-family:inherit; }
html { scroll-behavior:smooth; }
.vh { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.btn { font-size:13px; }
.nav-cta { font-size:13.5px; }

/* ══ COMPONENTES COMPARTIDOS DEL BLOG (índice + artículo) ══ */
.dark-hero { position:relative; background:#141414; color:#fff; overflow:hidden; }
.glow { position:absolute; right:-160px; top:-200px; width:620px; height:620px; background:radial-gradient(circle at 50% 50%,rgba(205,33,34,.2),transparent 62%); pointer-events:none; }
.crumb ol { margin:0; padding:0; list-style:none; display:flex; gap:10px; align-items:center; flex-wrap:wrap; font-size:12.5px; color:#9A9A9A; }
.crumb a { color:#C6C6C6; } .crumb a:hover { color:#fff; }
.crumb .sep { color:#5B5B5B; }
.crumb [aria-current] { color:#fff; font-weight:600; }
.badge { display:inline-flex; align-items:center; gap:10px; padding:8px 16px; background:#CD2122; color:#fff; font-family:Montserrat,sans-serif; font-weight:700; font-size:11.5px; letter-spacing:2px; text-transform:uppercase; }
.kick { font-family:Montserrat,sans-serif; font-weight:700; font-size:10.5px; letter-spacing:1.8px; text-transform:uppercase; }
.h2-row { display:flex; align-items:baseline; gap:16px; }
.h2-row h2 { margin:0; font-family:Montserrat,sans-serif; font-weight:800; font-size:34px; letter-spacing:-.9px; }
.h2-line { height:3px; flex:1; background:#CD2122; max-width:120px; }
.link-up { font-family:Montserrat,sans-serif; font-weight:700; font-size:11.5px; letter-spacing:1.4px; text-transform:uppercase; color:#B31C1D; white-space:nowrap; }

/* Tarjeta de entrada (listado y "Sigue leyendo") */
.post { background:#fff; display:flex; flex-direction:column; }
.post[hidden] { display:none; }
.post-ph { display:block; background:#EFEFEF; }
.post-ph img { width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; display:block; }
.post-body { padding:22px 22px 24px; display:flex; flex-direction:column; gap:10px; flex:1; }
.post-topic { align-self:flex-start; color:#B31C1D; }
.post-topic:hover { color:#CD2122; }
.post h3 { margin:0; font-family:Montserrat,sans-serif; font-weight:700; font-size:18px; line-height:1.3; letter-spacing:-.2px; text-wrap:pretty; }
.post h3 a { color:#141414; } .post h3 a:hover { color:#CD2122; }
.post-ex { margin:0; font-size:14px; line-height:1.6; color:#5B5B5B; text-wrap:pretty; }
.post-meta { margin-top:auto; padding-top:14px; border-top:1px solid #EDEDED; font-size:12.5px; color:#6E6E6E; }

@media (max-width: 900px) {
  /* Tarjeta de entrada → fila compacta con miniatura (frames móviles) */
  .post { flex-direction:row; gap:12px; padding:12px 16px; }
  .post-ph { flex:0 0 84px; width:84px; height:64px; }
  .post-ph img { width:84px; height:64px; aspect-ratio:auto; }
  .post-body { padding:0; gap:5px; min-width:0; }
  .post-topic { font-size:9px; letter-spacing:1.4px; }
  .post h3 { font-size:13.5px; line-height:1.3; letter-spacing:0; }
  .post-ex { display:none; }
  .post-meta { margin-top:0; padding-top:0; border-top:0; font-size:11px; }
  .post-meta .d { display:none; }
  .h2-row h2 { font-size:24px; letter-spacing:-.6px; }
}
@media (max-width: 900px) {
  .h2-row h2 { font-size:24px !important; }
}