/* =========================================================================
   PROMECANO · blog (home.php = listado y categorías, single.php = artículo)
   Se carga después de home.css (reutiliza .nov/.post, .cab-s, .contacto).
   ========================================================================= */

/* Cabecera oscura del blog y del artículo */
.bh{position:relative;background:var(--g0);color:#fff;overflow:hidden;isolation:isolate;padding:56px 0 64px}
.bh .glow{position:absolute;width:800px;height:800px;right:-280px;top:-420px;background:radial-gradient(circle,rgba(255,86,23,.24),transparent 62%);z-index:-1;pointer-events:none}
body.pm .bh h1{font-size:clamp(34px,4.4vw,56px);font-weight:700;margin:16px 0 0;color:#fff;max-width:900px}
.bh .estrecho h1,.bh .estrecho .meta-art{max-width:900px}
.meta-art{color:#AEB5C0;margin-top:18px;font-size:15.5px}
.meta-art b{color:#fff;font-weight:500}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:26px}
.chips a{padding:9px 16px;border-radius:999px;border:1px solid rgba(255,255,255,.16);color:#C4C9D1;font-family:var(--f1);font-size:14px;transition:.2s}
.chips a.on,.chips a:hover{background:#fff;color:var(--g0);border-color:#fff}

/* Tarjetas: título enlazado y "Leer artículo" */
.post h3 a:hover{color:var(--n)}
.post .leer{display:inline-block;margin-top:12px;font-family:var(--f1);font-weight:600;font-size:14.5px;color:var(--n)!important;padding:6px 0}
.post .f{display:block}
.paginas{margin-top:40px;display:flex;justify-content:center}
.paginas .nav-links{display:flex;gap:8px}
.paginas .page-numbers{min-width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:#fff;border:1px solid var(--lin-c);font-family:var(--f1)}
.paginas .current{background:var(--g1);color:#fff;border-color:var(--g1)}

/* Artículo */
.art-w{padding-top:56px}
.art{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:56px;align-items:start}
.destacada{margin:0 0 36px;border-radius:var(--r);overflow:hidden;box-shadow:0 30px 60px -28px rgba(11,13,16,.45);aspect-ratio:16/9;background:var(--claro)}
.destacada img{width:100%;height:100%;object-fit:cover}
.texto{font-size:18px;line-height:1.8;color:#2A2E35;max-width:720px}
.texto p{margin:0 0 1.2em}
.texto h2{font-size:28px;margin:1.6em 0 .6em}
.texto h3{font-size:22px;margin:1.4em 0 .5em}
.texto a{color:var(--n);border-bottom:1px solid rgba(255,86,23,.35)}
.texto ul,.texto ol{margin:0 0 1.2em 1.2em}
.texto .fuentes{margin-top:2em;padding:18px 22px;border-radius:14px;background:var(--claro);font-size:14.5px;color:var(--tx2);line-height:1.6}
.texto .fuentes a{word-break:break-all}
.lateral{position:sticky;top:120px}
.caja{background:var(--g1);color:#fff;border-radius:var(--r);padding:28px;display:flex;flex-direction:column;gap:10px;position:relative;overflow:hidden}
.caja::before{content:"";position:absolute;width:320px;height:320px;right:-140px;top:-160px;background:radial-gradient(circle,rgba(255,86,23,.3),transparent 65%)}
.caja h3{font-size:21px;font-weight:600;position:relative}
.caja p{color:#AEB5C0;font-size:15px;margin-bottom:8px;position:relative}
.caja .btn{justify-content:center;position:relative}

/* Páginas simples (legales) y 404 */
.texto.pagina{max-width:820px}
.texto.pagina h2{font-size:24px;margin:1.8em 0 .6em}
.texto.pagina h2:first-child{margin-top:0}
.texto.pagina ul{list-style:disc}
.texto.pagina .aviso-aaip{margin-top:2em;padding:18px 22px;border-left:3px solid var(--n);background:var(--claro);border-radius:0 12px 12px 0;font-size:15px;color:var(--tx2)}
.e404{padding:90px 0 110px}

@media (max-width:1100px){
  .art{grid-template-columns:1fr;gap:30px}
  .lateral{position:relative;top:0;margin-top:0}
}
@media (max-width:700px){
  .bh{padding:36px 0 48px}
  .art-w{padding-top:32px}
  .texto{font-size:17px}
}