/* =============================================================================
   Blog — el detalle de un artículo (/blog/<slug>/). SOLO lo que esta vista
   agrega a assets/css/blog.css (componentes compartidos) y a style.css.

   CSS portado literalmente del diseño aprobado, en el mismo orden (bloque
   «BLOG · ARTÍCULO» y su media query). Ante cualquier diferencia visual, el
   diseño gana. Fuente: Nuevo_estilo_mpc/MPC_blog/MPC Blog Articulo standalone.html

   El cuerpo del artículo es la salida de the_content(): todo su estilo cuelga
   de `.prose` (los bloques nativos y los 2 patrones del tema), y el contenido
   no lleva estilos en línea.

   Ajustes respecto del diseño, por la cascada del tema y sin cambiar un valor:
   - `.band` no se redeclara: es idéntica a la de style.css (mismo rojo y mismo
     recorte, en escritorio y a 900px).
   - A 900px, los H2 de «Equipos mencionados» y de la banda llevan !important,
     porque style.css trae `section h2 { font-size:28px !important }`.
   ========================================================================== */

/* ══ BLOG · ARTÍCULO ══ */
#read-progress { position:absolute; left:0; bottom:-3px; height:3px; width:0; background:#CD2122; transition:width .12s linear; z-index:2; }
.art-head .glow { background:radial-gradient(circle at 50% 50%,rgba(205,33,34,.22),transparent 62%); }
.art-head-in { position:relative; padding-top:30px; padding-bottom:150px; }
.art-tags { margin-top:40px; display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.tag-red { 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; }
.tag-red:hover { background:#DD3333; color:#fff; }
.tag-line { padding:7px 14px; border:1px solid #3A3A3A; font-family:Montserrat,sans-serif; font-weight:700; font-size:11px; letter-spacing:1.6px; text-transform:uppercase; color:#C6C6C6; }
.art-head h1 { margin:22px 0 0; font-family:Montserrat,sans-serif; font-weight:800; font-size:54px; line-height:1.04; letter-spacing:-1.6px; max-width:20ch; text-wrap:balance; }
.art-desc { margin:20px 0 0; font-size:19px; line-height:1.6; color:#C6C6C6; max-width:56ch; text-wrap:pretty; }
.byline { margin-top:32px; padding-top:22px; border-top:1px solid rgba(255,255,255,.14); display:flex; align-items:center; justify-content:space-between; gap:20px 32px; flex-wrap:wrap; }
.by-au { display:flex; align-items:center; gap:14px; }
.avatar { width:46px; height:46px; flex:0 0 46px; background:#CD2122; color:#fff; display:flex; align-items:center; justify-content:center; font-family:Montserrat,sans-serif; font-weight:800; font-size:13px; letter-spacing:.5px; }
.by-txt { display:flex; flex-direction:column; gap:4px; }
.by-name { font-family:Montserrat,sans-serif; font-weight:700; font-size:14.5px; }
.by-meta { font-size:13px; color:#9A9A9A; }
.share { display:flex; align-items:center; gap:8px; }
.share-lbl { font-size:12.5px; color:#9A9A9A; margin-right:4px; }
.sh { width:40px; height:40px; display:flex; align-items:center; justify-content:center; border:1px solid #3A3A3A; background:transparent; color:#E8E8E8; cursor:pointer; padding:0; }
.sh:hover { border-color:#CD2122; color:#fff; }
.sh.light { width:44px; height:44px; border-color:#DCDCDC; background:#fff; color:#3A3A3A; }
.sh.light:hover { border-color:#CD2122; color:#CD2122; }

.art-grid { padding-bottom:88px; display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:64px; align-items:start; }
.art-main { min-width:0; display:flex; flex-direction:column; gap:22px; }
.art-fig { position:relative; z-index:1; margin:-110px 0 10px; background:#262626; }
.art-fig img { width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; display:block; }
.art-fig figcaption { padding:12px 16px; background:#F5F5F5; font-size:13px; line-height:1.5; color:#5B5B5B; }
.art-summary { background:#F5F5F5; border-top:4px solid #CD2122; padding:26px 28px 28px; }
.art-summary h2 { margin:0; font-family:Montserrat,sans-serif; font-weight:700; font-size:11px; letter-spacing:1.8px; text-transform:uppercase; color:#CD2122; }
.art-summary ul, .prose ul { margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:10px; }
.art-summary ul { margin-top:16px; gap:12px; }
.art-summary li, .prose ul li { position:relative; padding-left:18px; font-size:17px; line-height:1.7; color:#2E2E2E; }
.art-summary li { font-size:16px; }
.art-summary li::before, .prose ul li::before { content:""; position:absolute; left:0; top:11px; width:6px; height:6px; background:#CD2122; }

/* Cuerpo (salida de the_content) */
.prose { display:flex; flex-direction:column; gap:22px; }
.prose > * { margin:0; }
.prose p { font-size:17px; line-height:1.78; color:#2E2E2E; text-wrap:pretty; }
.prose p.lead { font-size:19px; color:#141414; }
.prose h2, .art-h2 { margin:30px 0 0; font-family:Montserrat,sans-serif; font-weight:800; font-size:30px; line-height:1.15; letter-spacing:-.7px; scroll-margin-top:104px; text-wrap:balance; }
.prose .wp-block-table { border:1px solid #E6E6E6; overflow-x:auto; }
.prose table { width:100%; min-width:640px; border-collapse:collapse; }
.prose thead tr { background:#141414; color:#fff; }
.prose thead th { padding:14px 16px; text-align:left; font-family:Montserrat,sans-serif; font-weight:700; font-size:10.5px; letter-spacing:1.5px; text-transform:uppercase; color:#9A9A9A; }
.prose tbody tr { background:#fff; }
.prose tbody tr:nth-child(even) { background:#FAFAFA; }
.prose tbody th { padding:14px 16px; text-align:left; font-family:Montserrat,sans-serif; font-weight:700; font-size:13.5px; color:#141414; white-space:nowrap; border-top:1px solid #EDEDED; }
.prose tbody tr:first-child th { color:#B31C1D; }
.prose tbody td { padding:14px 16px; font-size:14px; line-height:1.5; color:#3A3A3A; border-top:1px solid #EDEDED; }
.prose td strong { color:#141414; font-weight:600; }
.prose .wp-block-table figcaption { margin:0; padding:12px 16px; text-align:left; font-size:13px; color:#6E6E6E; background:#FAFAFA; border-top:1px solid #EDEDED; }
.prose blockquote { margin:10px 0; padding:6px 0; border:0; display:flex; flex-direction:column; gap:14px; }
.prose blockquote::before { content:"\201C"; font-family:Montserrat,sans-serif; font-weight:800; font-size:64px; line-height:.6; color:#CD2122; }
.prose blockquote p { margin:0; font-family:Montserrat,sans-serif; font-weight:700; font-size:26px; line-height:1.3; letter-spacing:-.5px; color:#141414; max-width:30ch; text-wrap:balance; }
.prose blockquote cite { font-style:normal; font-size:13.5px; color:#6E6E6E; }

/* Patrón: producto recomendado */
.prose .art-rec { margin:10px 0; display:grid; grid-template-columns:220px minmax(0,1fr); background:#141414; color:#fff; border-top:4px solid #CD2122; }
.art-rec-ph { background:#262626; display:flex; align-items:center; justify-content:center; padding:18px; }
.art-rec-ph img { max-width:100%; max-height:170px; object-fit:contain; display:block; }
.art-rec-body { padding:24px 26px 26px; display:flex; flex-direction:column; gap:10px; }
.art-rec .kick { color:#FF6B6B; }
.art-rec-name { font-family:Montserrat,sans-serif; font-weight:800; font-size:22px; letter-spacing:-.4px; }
.prose .art-rec p { margin:0; font-size:14.5px; line-height:1.6; color:#C6C6C6; max-width:52ch; }
.art-rec-ctas, .eq-ctas { display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.art-rec-ctas { margin-top:6px; }
.btn-sm { padding:13px 22px; font-size:11.5px; }
.lnk-w { font-family:Montserrat,sans-serif; font-weight:700; font-size:11.5px; letter-spacing:1.4px; text-transform:uppercase; color:#fff; }
.lnk-w:hover { color:#FF6B6B; }

/* Patrón: zonas de severidad ISO */
.zones { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:2px; background:#EDEDED; border:1px solid #EDEDED; }
.zone { background:#fff; padding:18px 18px 20px; display:flex; flex-direction:column; gap:10px; border-top:4px solid #CD2122; }
.zone b { font-family:Montserrat,sans-serif; font-weight:800; font-size:26px; line-height:1; }
.zone span { font-size:14px; line-height:1.5; color:#3A3A3A; }
.zone.za { border-top-color:#2E7D32; } .zone.zb { border-top-color:#7CB342; } .zone.zc { border-top-color:#F2A900; } .zone.zd { border-top-color:#CD2122; }

/* Imán de prospectos */
.lead-box { margin:18px 0 6px; background:#34495E; color:#fff; padding:32px 32px 34px; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); gap:24px 36px; align-items:center; }
.lead-box h2 { margin:12px 0 0; font-family:Montserrat,sans-serif; font-weight:800; font-size:24px; line-height:1.2; letter-spacing:-.5px; text-wrap:balance; }
.lead-box p { margin:12px 0 0; font-size:14.5px; line-height:1.6; color:#D3DCE5; }
.lead-form { display:flex; flex-direction:column; gap:10px; }
.lead-form input { height:52px; padding:0 16px; border:0; font-size:15px; color:#141414; outline:none; }
.lead-form input:focus-visible { box-shadow:inset 0 0 0 2px #CD2122; }
.lead-form button { height:52px; border:0; background:#CD2122; color:#fff; font-family:Montserrat,sans-serif; font-weight:700; font-size:12.5px; letter-spacing:1.4px; text-transform:uppercase; cursor:pointer; }
.lead-form button:hover { background:#DD3333; }
/* 25-oct: el aviso del formulario de descarga; mismo estilo que el del boletín
   del índice (blog-index.css). `.lead-box p` le pondría gris y margen. */
.lead-box .form-estado { margin:2px 0 0; padding:10px 14px; border-left:3px solid #2E8B57; background:rgba(255,255,255,.08); font-size:13.5px; line-height:1.5; color:#fff; }
.lead-box .form-estado[data-bien="0"] { border-left-color:#FF6B6B; }

/* Preguntas frecuentes (sin JS) */
.faq { border-bottom:1px solid #DCDCDC; }
.faq details { border-top:1px solid #DCDCDC; }
.faq summary { list-style:none; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:20px 0; cursor:pointer; font-family:Montserrat,sans-serif; font-weight:700; font-size:17px; line-height:1.35; color:#141414; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary:focus-visible { outline:2px solid #CD2122; outline-offset:2px; }
.faq .pm { flex:0 0 32px; width:32px; height:32px; display:flex; align-items:center; justify-content:center; border:1px solid #DCDCDC; font-size:20px; font-weight:400; color:#CD2122; transition:transform .2s; }
.faq details[open] .pm { transform:rotate(45deg); border-color:#CD2122; }
.faq p { margin:0 0 22px; font-size:16px; line-height:1.72; color:#3A3A3A; text-wrap:pretty; }

.art-foot { margin-top:12px; display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; }
.tags { margin:0; padding:0; list-style:none; display:flex; gap:8px; flex-wrap:wrap; }
.tags a { display:inline-flex; align-items:center; min-height:36px; padding:0 14px; border:1px solid #DADADA; font-size:13px; font-weight:600; color:#3A3A3A; }
.tags a:hover { border-color:#CD2122; color:#CD2122; }
.author { margin-top:10px; background:#F5F5F5; padding:26px 28px; display:flex; gap:20px; align-items:flex-start; }
.author .avatar { width:64px; height:64px; flex:0 0 64px; background:#141414; font-size:16px; }
.au-txt { display:flex; flex-direction:column; gap:8px; min-width:0; }
.au-name { font-family:Montserrat,sans-serif; font-weight:800; font-size:19px; }
.author p { margin:0; font-size:14.5px; line-height:1.65; color:#3A3A3A; max-width:60ch; }
.au-links { margin-top:4px; display:flex; gap:22px; flex-wrap:wrap; }

/* Barra lateral: índice con scroll-spy + CTA */
.art-aside { position:sticky; top:102px; display:flex; flex-direction:column; gap:2px; padding-top:40px; }
.toc { background:#F5F5F5; padding:24px 22px 22px; }
.toc-t { margin:0 0 12px; font-family:Montserrat,sans-serif; font-weight:700; font-size:11px; letter-spacing:1.8px; text-transform:uppercase; color:#6E6E6E; }
.toc-list { margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:2px; }
.toc-list a { display:flex; gap:10px; align-items:baseline; padding:9px 10px; border-left:3px solid transparent; color:#4A4A4A; font-size:13.5px; line-height:1.35; }
.toc-list a:hover { color:#141414; }
.toc-list .n { font-family:Montserrat,sans-serif; font-weight:800; font-size:11px; color:#9A9A9A; flex:0 0 20px; }
.toc-list a.done .n { color:#CD2122; }
.toc-list a.on { border-left-color:#CD2122; background:#fff; color:#141414; font-weight:700; }
.toc-bar { margin-top:16px; height:3px; background:#E1E1E1; }
#toc-fill { display:block; height:3px; width:0; background:#CD2122; transition:width .12s linear; }
.aside-cta { background:#34495E; color:#fff; padding:26px 22px 24px; display:flex; flex-direction:column; gap:12px; }
.btn-ghost { padding:13px 18px; border:1px solid rgba(255,255,255,.4); color:#fff; font-size:13px; font-weight:600; display:flex; align-items:center; justify-content:center; gap:9px; }
.btn-ghost:hover { border-color:#fff; color:#fff; }

/* Equipos mencionados (mismo componente que "Líneas estrella" del Home) */
.eq-in { padding-top:84px; padding-bottom:88px; }
.eq-head { display:flex; align-items:flex-end; justify-content:space-between; gap:32px; flex-wrap:wrap; margin-bottom:40px; }
.eq-head h2 { margin:14px 0 0; font-family:Montserrat,sans-serif; font-weight:800; font-size:38px; line-height:1.1; letter-spacing:-1px; max-width:22ch; text-wrap:balance; }
.eq-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.eq { background:#1D1D1D; display:flex; flex-direction:column; position:relative; }
.eq-ph { height:210px; background:#262626; display:flex; align-items:center; justify-content:center; padding:18px; }
.eq-ph img { max-width:100%; max-height:100%; object-fit:contain; display:block; }
.eq-flag { position:absolute; top:0; right:0; padding:8px 14px; background:#CD2122; color:#fff; font-family:Montserrat,sans-serif; font-weight:700; font-size:10px; letter-spacing:1.5px; text-transform:uppercase; }
.eq-body { padding:28px 26px 30px; display:flex; flex-direction:column; flex:1; }
.eq-body .kick { letter-spacing:1.6px; color:#8A8A8A; }
.eq h3 { margin:10px 0 0; font-family:Montserrat,sans-serif; font-weight:800; font-size:24px; letter-spacing:-.5px; }
.eq p { margin:12px 0 0; font-size:14.5px; line-height:1.65; color:#B4B4B4; }
.eq ul { margin:18px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:8px; }
.eq li { display:flex; gap:10px; align-items:flex-start; font-size:13.5px; color:#D2D2D2; line-height:1.5; }
.eq li::before { content:""; width:5px; height:5px; background:#CD2122; margin-top:7px; flex:0 0 5px; }
.eq-ctas { margin-top:auto; padding-top:24px; }

.rel-in { padding-top:76px; padding-bottom:84px; }
.rel-in .link-up { margin-left:auto; }
.rel-grid { margin-top:30px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:2px; }

.band-in { padding-top:76px; padding-bottom:70px; display:flex; align-items:center; justify-content:space-between; gap:56px; flex-wrap:wrap; }
.band h2 { margin:0; font-family:Montserrat,sans-serif; font-weight:800; font-size:40px; line-height:1.1; letter-spacing:-1px; text-wrap:balance; }
.band p { margin:16px 0 0; font-size:17px; line-height:1.65; color:#FFD9D9; text-wrap:pretty; }
.band-ctas { display:flex; flex-direction:column; gap:16px; min-width:320px; }
.btn-white { padding:20px 34px; background:#fff; color:#B31C1D; font-family:Montserrat,sans-serif; font-weight:800; font-size:14px; letter-spacing:1.5px; text-transform:uppercase; text-align:center; }
.btn-white:hover { background:#141414; color:#fff; }
.btn-wa { padding:18px 34px; border:2px solid rgba(255,255,255,.55); color:#fff; font-family:Montserrat,sans-serif; font-weight:700; font-size:13px; letter-spacing:.6px; display:flex; align-items:center; justify-content:center; gap:10px; }
.btn-wa:hover { border-color:#fff; background:rgba(0,0,0,.12); color:#fff; }

/* Móvil: índice fijo bajo el header + barra inferior de conversión */
#m-toc { display:none; position:fixed; left:0; right:0; top:52px; z-index:55; background:#F5F5F5; border-bottom:1px solid #E1E1E1; box-shadow:0 8px 18px rgba(0,0,0,.06); }
#m-toc.show { display:block; }
#m-toc-btn { width:100%; height:48px; padding:0 16px; display:flex; align-items:center; justify-content:space-between; gap:10px; background:transparent; border:0; cursor:pointer; color:#141414; text-align:left; }
.mt-l { display:flex; align-items:center; gap:10px; min-width:0; }
.mt-k { font-family:Montserrat,sans-serif; font-weight:700; font-size:9.5px; letter-spacing:1.8px; text-transform:uppercase; color:#6E6E6E; flex:0 0 auto; }
#m-toc-cur { font-family:Montserrat,sans-serif; font-weight:700; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#m-toc-btn svg { flex:0 0 auto; transition:transform .2s; }
#m-toc-btn[aria-expanded="true"] svg { transform:rotate(180deg); }
#m-toc-list { display:none; padding:6px 8px 12px; border-top:1px solid #E1E1E1; max-height:60vh; overflow:auto; }
#m-toc.open #m-toc-list { display:flex; }
.m-bar { display:none; position:fixed; left:0; right:0; bottom:0; z-index:70; background:#fff; border-top:1px solid #E1E1E1; box-shadow:0 -10px 24px rgba(0,0,0,.10); padding:10px 12px calc(14px + env(safe-area-inset-bottom)); gap:8px; }
.m-bar .wa { width:52px; height:48px; flex:0 0 52px; border:1px solid #DCDCDC; display:flex; align-items:center; justify-content:center; color:#141414; }
.m-bar .wa:hover { border-color:#CD2122; color:#CD2122; }
.m-bar .q { flex:1; height:48px; display:flex; align-items:center; justify-content:center; font-size:12px; }

@media (max-width: 900px) {
  .art-head-in { padding-top:16px; padding-bottom:64px; }
  .crumb .c-home { display:none; }
  .crumb ol { font-size:11px; gap:8px; }
  .art-tags { margin-top:16px; gap:8px; }
  .tag-red { padding:6px 11px; font-size:9.5px; letter-spacing:1.6px; }
  .tag-line { padding:5px 10px; font-size:9.5px; letter-spacing:1.4px; }
  .art-head h1 { margin-top:14px; font-size:27px; line-height:1.08; letter-spacing:-.8px; }
  .art-desc, .share { display:none; }
  .byline { margin-top:16px; padding-top:0; border-top:0; }
  .by-au { gap:10px; }
  .avatar { width:34px; height:34px; flex:0 0 34px; font-size:10px; }
  .by-txt { gap:2px; }
  .by-name { font-size:12.5px; }
  .by-meta { font-size:11px; }
  .by-pub { display:none; }

  .art-grid { grid-template-columns:minmax(0,1fr); gap:0; padding-bottom:56px; }
  .art-aside { display:none; }
  .art-main { gap:18px; }
  .art-fig { margin:-48px 0 0; }
  .art-fig figcaption { font-size:12px; padding:10px 14px; }
  .art-summary { padding:16px 16px 18px; }
  .art-summary h2 { font-size:10px; }
  .art-summary ul { margin-top:10px; gap:8px; }
  .art-summary li { font-size:14px; line-height:1.6; padding-left:15px; }
  .art-summary li::before { top:9px; width:5px; height:5px; }
  .prose { gap:18px; }
  .prose p { font-size:16px; line-height:1.7; }
  .prose p.lead { font-size:17px; }
  .prose h2, .art-h2 { margin-top:18px; font-size:22px; line-height:1.2; letter-spacing:-.4px; scroll-margin-top:116px; }
  .prose ul li { font-size:15.5px; line-height:1.6; padding-left:15px; }
  .prose ul li::before { top:9px; width:5px; height:5px; }
  .prose table { min-width:560px; }
  .prose blockquote p { font-size:21px; }
  .prose .art-rec { grid-template-columns:1fr; }
  .art-rec-ph { height:140px; padding:12px; }
  .art-rec-ph img { max-height:100%; }
  .art-rec-body { padding:16px 16px 18px; gap:8px; }
  .art-rec-name { font-size:18px; }
  .zones { grid-template-columns:1fr 1fr; }
  .zone { padding:14px 14px 16px; }
  .zone b { font-size:22px; }
  .zone span { font-size:13px; }
  .lead-box { padding:24px 20px 26px; gap:18px; }
  .lead-box h2 { font-size:21px; }
  .faq summary { font-size:15px; padding:16px 0; gap:14px; }
  .faq .pm { width:28px; height:28px; flex:0 0 28px; font-size:18px; }
  .faq p { font-size:15px; margin-bottom:18px; }
  .author { padding:18px; gap:14px; }
  .author .avatar { width:42px; height:42px; flex:0 0 42px; font-size:11px; }
  .au-name { font-size:16px; }
  .author p { font-size:13.5px; }

  .eq-in { padding-top:56px; padding-bottom:60px; }
  .eq-head { margin-bottom:28px; gap:16px; }
  .eq-head h2 { font-size:26px; letter-spacing:-.6px; }
  .eq-grid { grid-template-columns:1fr; gap:16px; }
  .eq-ph { height:180px; }
  .eq-body { padding:22px 20px 24px; }
  .rel-in { padding-top:48px; padding-bottom:56px; }
  .rel-grid { margin:20px -20px 0; grid-template-columns:1fr; }
  .band-in { padding-top:56px; padding-bottom:52px; gap:28px; }
  .band h2 { font-size:27px; letter-spacing:-.6px; }
  .band p { font-size:15px; }
  .band-ctas { min-width:0; width:100%; }

  .m-bar { display:flex; }
  body { padding-bottom:74px; }
}
@media (max-width: 900px) {
  .eq-head h2 { font-size:26px !important; }
  .band h2 { font-size:27px !important; }
}

/* El bloque «Tabla» del núcleo carga su propia hoja (wp-block-table) con
   `border:1px solid` en cada celda y 3px bajo el <thead>; el diseño no los
   tiene: sólo la línea #EDEDED arriba de cada fila del cuerpo, que sigue
   viniendo de `.prose tbody th/td`. Comprobado en la comparación contra el
   standalone (las celdas medían 1px más). */
.prose .wp-block-table thead { border-bottom:0; }
.prose .wp-block-table th, .prose .wp-block-table td { border-left:0; border-right:0; border-bottom:0; }
.prose .wp-block-table thead th { border-top:0; }

/* Una entrada sin imagen destacada (el diseño no trae el caso): el padding
   inferior del encabezado existe para que la imagen se monte encima, y sin ella
   quedaría una franja oscura vacía. */
.art-head.sin-foto .art-head-in { padding-bottom:64px; }
@media (max-width: 900px) {
  .art-head.sin-foto .art-head-in { padding-bottom:40px; }
}