/* ═══════════════════════════════════════════════════════
   PDH PLUS — SISTEMA DE DISEÑO COMPLETO
   Tipografía: Barlow Condensed (titulares) · Lora (cuerpo) · Source Sans 3 (UI)
   Paleta: Rojo #E8000D · Negro #0A0A0A · Blanco #FFFFFF
   ═══════════════════════════════════════════════════════ */

/* ─── VARIABLES ─────────────────────────────────────────── */
:root {
    --rojo:       #E8000D;
    --rojo-dark:  #B5000A;
    --negro:      #0A0A0A;
    --g1:         #1A1A1A;
    --g2:         #2C2C2C;
    --g3:         #3D3D3D;
    --g4:         #777777;
    --g5:         #AAAAAA;
    --border:     #E4E2DD;
    --bg:         #F8F6F3;
    --blanco:     #FFFFFF;
    --fh:         'Barlow Condensed', sans-serif;
    --fb:         'Lora', serif;
    --fu:         'Source Sans 3', sans-serif;
    --max-width:  1200px;
    --radius:     0;
}

/* ─── RESET ─────────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
    font-family: var(--fu);
    background: var(--blanco);
    color: var(--negro);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--rojo); }
button { cursor: pointer; }

/* ─── CONTAINER ─────────────────────────────────────────── */
.container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 16px;
}

/* ─── TOPBAR ─────────────────────────────────────────────── */
.topbar {
    background: var(--negro);
    padding: 6px 0;
}
.topbar-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.topbar-links {
    display: flex;
    gap: 18px;
    list-style: none;
}
.topbar-links a,
.topbar-links li a {
    font-family: var(--fu);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #666;
    transition: color .15s;
}
.topbar-links a:hover { color: #fff; }
.topbar-date {
    font-family: var(--fu);
    font-size: 10px;
    color: #444;
}

/* ─── NAVBAR ─────────────────────────────────────────────── */
.navbar {
    background: var(--negro);
    border-bottom: 3px solid var(--rojo);
    position: sticky;
    top: 0;
    z-index: 200;
}
.navbar-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 16px;
    display: flex;
    align-items: center;
    height: 58px;
    gap: 0;
}

/* LOGO */
.logo-area {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-right: 26px;
    flex-shrink: 0;
    text-decoration: none;
}
.logo-img-wrap { width: 46px; height: 46px; overflow: hidden; }
.logo-img-wrap img { width: 46px; height: 46px; object-fit: contain; }
.logo-placeholder {
    background: var(--rojo);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--fh); font-size: 16px; font-weight: 900; color: #fff;
}
.logo-wordmark { display: flex; flex-direction: column; line-height: 1; }
.logo-pdh { font-family: var(--fh); font-size: 20px; font-weight: 900; color: #fff; line-height: 1; }
.logo-plus { color: var(--rojo); }
.logo-sub { font-family: var(--fu); font-size: 7px; color: rgba(255,255,255,.3); text-transform: uppercase; letter-spacing: .12em; margin-top: 2px; }

/* NAV LINKS */
.nav-links { display: flex; align-items: center; flex: 1; }
.nav-links a,
.nav-link {
    font-family: var(--fh);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: rgba(255,255,255,.55);
    padding: 0 11px;
    height: 58px;
    display: flex;
    align-items: center;
    border-bottom: 3px solid transparent;
    margin-bottom: -3px;
    transition: color .15s, border-color .15s;
    white-space: nowrap;
}
.nav-links a:hover,
.nav-link:hover { color: #fff; }
.nav-links a.active,
.nav-link.active { color: #fff; border-bottom-color: var(--rojo); }

/* Soporte menús WordPress */
.nav-links ul { display: none; } /* ocultar submenús por ahora */

.btn-sub {
    background: var(--rojo);
    color: #fff;
    border: none;
    padding: 7px 16px;
    font-family: var(--fh);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    margin-left: auto;
    transition: background .15s;
}
.btn-sub:hover { background: var(--rojo-dark); }

/* HAMBURGER (móvil) */
.hamburger {
    display: none;
    background: none;
    border: none;
    flex-direction: column;
    gap: 5px;
    padding: 6px;
    margin-left: 12px;
}
.hamburger span { width: 22px; height: 2px; background: #fff; display: block; transition: .2s; }
.hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* MOBILE DRAWER */
.mobile-drawer {
    background: var(--negro);
    border-bottom: 1px solid #222;
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease;
}
.mobile-drawer.open { max-height: 500px; }
.mobile-drawer nav { padding: 6px 0; }
.mobile-drawer a {
    display: block;
    font-family: var(--fh);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: rgba(255,255,255,.7);
    padding: 11px 18px;
    border-bottom: 1px solid #1a1a1a;
    border-left: 3px solid transparent;
    transition: .15s;
}
.mobile-drawer a:hover { color: #fff; border-left-color: var(--rojo); padding-left: 15px; }

/* ─── TICKER ─────────────────────────────────────────────── */
.ticker {
    background: var(--rojo);
    padding: 7px 0;
    overflow: hidden;
}
.ticker-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.ticker-lbl {
    font-family: var(--fh);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
    background: var(--negro);
    color: #fff;
    padding: 3px 8px;
    flex-shrink: 0;
}
.ticker-wrap { flex: 1; overflow: hidden; }
.ticker-txt {
    font-family: var(--fu);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    display: inline-block;
    color: #fff;
    animation: ticker-scroll 35s linear infinite;
}
.ticker-txt a { color: #fff; }
@keyframes ticker-scroll {
    0%   { transform: translateX(100vw); }
    100% { transform: translateX(-100%); }
}

/* ─── SECTION HEADER ─────────────────────────────────────── */
.sec-hdr {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 22px 0 12px;
}
.sec-acc     { width: 4px; height: 20px; background: var(--rojo); flex-shrink: 0; }
.sec-acc-dark{ width: 4px; height: 20px; background: var(--negro); flex-shrink: 0; }
.sec-ttl {
    font-family: var(--fh);
    font-size: 15px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--negro);
}
.sec-ln  { flex: 1; height: 1px; background: var(--border); }
.sec-more {
    font-family: var(--fu);
    font-size: 11px;
    font-weight: 600;
    color: var(--rojo);
    text-transform: uppercase;
    letter-spacing: .06em;
}
.sec-more:hover { color: var(--rojo-dark); }

/* ─── IA BADGE ────────────────────────────────────────────── */
.ia-badge {
    font-family: var(--fh);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    background: var(--rojo);
    color: #fff;
    padding: 2px 6px;
    display: inline-block;
    vertical-align: middle;
}

/* ─── HERO GRID ───────────────────────────────────────────── */
.hero { padding: 16px 0 0; }
.hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 290px;
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
}
.hero-main { background: var(--blanco); grid-row: span 2; }
.hero-img {
    width: 100%;
    height: 280px;
    display: flex;
    align-items: flex-end;
    position: relative;
    background: var(--g1);
}
.hero-img::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,.92) 0%, rgba(0,0,0,.2) 58%, transparent 100%);
}
.hero-img-body { position: relative; z-index: 1; padding: 16px; width: 100%; }
.hero-tag-pill {
    font-family: var(--fh);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    background: #fff;
    color: var(--rojo);
    padding: 2px 7px;
    display: inline-block;
    margin-bottom: 8px;
}
.hero-h1 { font-family: var(--fh); font-size: 28px; font-weight: 900; line-height: 1.04; color: #fff; }
.hero-h1 a { color: #fff; }
.hero-h1 a:hover { color: rgba(255,255,255,.85); }
.hero-dek { font-family: var(--fb); font-size: 13px; font-style: italic; color: rgba(255,255,255,.7); margin-top: 7px; line-height: 1.55; }
.hero-meta { display: flex; align-items: center; gap: 8px; margin-top: 9px; font-family: var(--fu); font-size: 10px; color: rgba(255,255,255,.45); }
.hero-body { padding: 14px; border-top: 2px solid var(--rojo); }
.hero-excerpt { font-family: var(--fb); font-size: 13px; color: var(--g3); line-height: 1.65; }
.hero-leer {
    font-family: var(--fu);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--rojo);
    display: inline-block;
    margin-top: 8px;
    border-bottom: 1px solid var(--rojo);
    padding-bottom: 1px;
}

/* SECUNDARIAS */
.hero-sec { background: var(--blanco); }
.sec-art-top { border-bottom: 1px solid var(--border); }
.sec-art-img { width: 100%; height: 130px; background: var(--g1); }
.sec-art-body { padding: 12px; }
.art-tag {
    font-family: var(--fu);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--rojo);
    display: block;
    margin-bottom: 4px;
}
.art-ttl { font-family: var(--fh); font-size: 17px; font-weight: 700; line-height: 1.1; color: var(--negro); }
.art-ttl a { color: var(--negro); }
.art-ttl a:hover { color: var(--rojo); }
.art-meta { font-family: var(--fu); font-size: 10px; color: var(--g4); margin-top: 5px; }
.sec-art-row { display: flex; gap: 10px; padding: 12px; border-top: 1px solid var(--border); align-items: flex-start; }
.row-thumb { width: 76px; height: 58px; flex-shrink: 0; background: var(--g1); }

/* SIDEBAR LO MÁS LEÍDO */
.sidebar-box { background: var(--blanco); grid-row: span 2; }
.sb-lbl {
    font-family: var(--fh);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
    background: var(--negro);
    color: #fff;
    padding: 6px 12px;
    display: block;
}
.sb-item {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    display: flex;
    gap: 10px;
    align-items: flex-start;
}
.sb-item:last-child { border-bottom: none; }
.sb-n { font-family: var(--fh); font-size: 26px; font-weight: 900; color: var(--border); line-height: 1; flex-shrink: 0; width: 24px; }
.sb-t { font-family: var(--fh); font-size: 14px; font-weight: 700; line-height: 1.1; color: var(--negro); }
.sb-t a { color: var(--negro); }
.sb-t a:hover { color: var(--rojo); }
.sb-m { font-family: var(--fu); font-size: 10px; color: var(--g4); margin-top: 3px; }

/* ─── 3 COLUMNAS ─────────────────────────────────────────── */
.grid3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    margin-bottom: 22px;
}
.card { background: var(--blanco); padding: 14px; }
.card-img { width: calc(100% + 28px); height: 130px; margin: -14px -14px 12px; background: var(--g1); }
.c-tag { font-family: var(--fu); font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--rojo); display: block; margin-bottom: 4px; }
.c-ttl { font-family: var(--fh); font-size: 18px; font-weight: 700; line-height: 1.1; color: var(--negro); margin-bottom: 5px; }
.c-ttl a { color: var(--negro); }
.c-ttl a:hover { color: var(--rojo); }
.c-body { font-family: var(--fb); font-size: 12px; color: var(--g3); line-height: 1.6; margin-bottom: 7px; }
.c-meta { font-family: var(--fu); font-size: 10px; color: var(--g4); }

/* ─── ANÁLISIS TÁCTICO FEATURE ───────────────────────────── */
.two-col { display: grid; grid-template-columns: 1fr 290px; gap: 22px; padding-bottom: 22px; }
.feat { border: 1px solid var(--border); }
.feat-img { width: 100%; height: 200px; background: var(--g1); position: relative; }
.feat-img::after {
    content: 'ANÁLISIS TÁCTICO';
    position: absolute; bottom: 10px; left: 10px;
    font-family: var(--fh); font-size: 9px; font-weight: 900; letter-spacing: .12em;
    background: var(--rojo); color: #fff; padding: 3px 8px;
}
.feat-body { padding: 14px; }
.feat-kicker { font-family: var(--fu); font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--rojo); margin-bottom: 5px; }
.feat-ttl { font-family: var(--fh); font-size: 24px; font-weight: 800; line-height: 1.08; color: var(--negro); margin-bottom: 8px; }
.feat-ttl a { color: var(--negro); }
.feat-ttl a:hover { color: var(--rojo); }
.feat-dek { font-family: var(--fb); font-size: 14px; font-style: italic; color: var(--g3); line-height: 1.65; border-left: 2px solid var(--rojo); padding-left: 10px; margin-bottom: 10px; }
.feat-excerpt { font-family: var(--fb); font-size: 12px; color: var(--g3); line-height: 1.6; }
.feat-meta { font-family: var(--fu); font-size: 10px; color: var(--g4); margin-top: 10px; border-top: 1px solid var(--border); padding-top: 10px; display: flex; align-items: center; gap: 7px; }

/* RAIL */
.rail-box { border: 1px solid var(--border); }
.rail-hdr {
    background: var(--negro);
    color: #fff;
    font-family: var(--fh);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 7px;
}
.rail-hdr::before { content: ''; width: 7px; height: 7px; background: var(--rojo); display: inline-block; }
.rail-item { padding: 10px 12px; border-bottom: 1px solid var(--border); display: flex; gap: 9px; }
.rail-item:last-child { border-bottom: none; }
.rail-thumb { width: 60px; height: 48px; flex-shrink: 0; background: var(--g1); }
.rail-tag { font-family: var(--fu); font-size: 9px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--rojo); display: block; margin-bottom: 2px; }
.rail-ttl { font-family: var(--fh); font-size: 13px; font-weight: 700; line-height: 1.15; color: var(--negro); }
.rail-ttl a { color: var(--negro); }
.rail-ttl a:hover { color: var(--rojo); }
.rail-meta { font-family: var(--fu); font-size: 10px; color: var(--g4); margin-top: 2px; }

/* ─── HISTORIA ───────────────────────────────────────────── */
.hist4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    margin-bottom: 22px;
}
.h-card { background: var(--blanco); padding: 14px; }
.h-img { width: calc(100% + 28px); height: 90px; margin: -14px -14px 10px; background: var(--g1); }
.h-num { font-family: var(--fh); font-size: 32px; font-weight: 900; color: var(--border); line-height: 1; margin-bottom: 3px; }
.h-tag { font-family: var(--fu); font-size: 9px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--g4); margin-bottom: 4px; display: block; }
.h-ttl { font-family: var(--fh); font-size: 14px; font-weight: 700; line-height: 1.15; color: var(--negro); }
.h-ttl a { color: var(--negro); }
.h-ttl a:hover { color: var(--rojo); }

/* ─── SECCIÓN BANNER ─────────────────────────────────────── */
.sec-banner { background: var(--negro); border-bottom: 4px solid var(--rojo); }
.sec-banner-inner {
    padding: 18px 16px;
    display: flex;
    align-items: center;
    gap: 16px;
}
.sec-icon {
    width: 56px; height: 56px;
    background: var(--rojo);
    display: flex; align-items: center; justify-content: center;
    font-size: 24px; flex-shrink: 0;
}
.sec-banner-name { font-family: var(--fh); font-size: 36px; font-weight: 900; color: #fff; line-height: 1; }
.sec-banner-name span { color: var(--rojo); }
.sec-banner-sub { font-family: var(--fu); font-size: 11px; color: rgba(255,255,255,.4); margin-top: 4px; text-transform: uppercase; letter-spacing: .08em; }

/* SUB-NAV */
.sec-subnav { background: var(--g1); border-bottom: 1px solid #333; }
.sec-subnav-inner { display: flex; overflow-x: auto; scrollbar-width: none; }
.sec-subnav-inner::-webkit-scrollbar { display: none; }
.sec-subnav a, .sec-subnav-inner a {
    font-family: var(--fh);
    font-size: 12px; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase;
    color: rgba(255,255,255,.5);
    padding: 10px 14px;
    border-bottom: 3px solid transparent;
    white-space: nowrap;
    transition: color .15s;
}
.sec-subnav a:hover, .sec-subnav-inner a:hover { color: #fff; }
.sec-subnav a.on, .sec-subnav-inner a.on { color: #fff; border-bottom-color: var(--rojo); }

/* ─── LEAD SECTION ───────────────────────────────────────── */
.lead-layout {
    display: grid;
    grid-template-columns: 1fr 285px;
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    margin-bottom: 20px;
}
.lead-art { background: var(--blanco); }
.lead-img {
    width: 100%; height: 290px;
    display: flex; align-items: flex-end;
    position: relative; background: var(--g1);
}
.lead-img::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,.92) 0%, rgba(0,0,0,.2) 55%, transparent 100%);
}
.lead-img-body { position: relative; z-index: 1; padding: 16px; width: 100%; }
.lead-body { padding: 14px; border-top: 3px solid var(--rojo); }
.lead-excerpt { font-family: var(--fb); font-size: 13px; color: var(--g3); line-height: 1.65; }
.lead-leer {
    font-family: var(--fu); font-size: 11px; font-weight: 600;
    letter-spacing: .05em; text-transform: uppercase;
    color: var(--rojo); display: inline-block;
    margin-top: 8px; border-bottom: 1px solid var(--rojo); padding-bottom: 1px;
}
.lead-side { background: var(--blanco); display: flex; flex-direction: column; }
.side-hdr {
    background: var(--negro); color: #fff;
    font-family: var(--fh); font-size: 10px; font-weight: 900;
    letter-spacing: .12em; text-transform: uppercase; padding: 8px 12px;
}
.side-item { padding: 11px 12px; border-bottom: 1px solid var(--border); display: flex; gap: 9px; align-items: flex-start; }
.side-item:last-child { border-bottom: none; }
.side-thumb { width: 66px; height: 50px; flex-shrink: 0; background: var(--g1); }
.side-tag { font-family: var(--fu); font-size: 9px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--rojo); display: block; margin-bottom: 2px; }
.side-ttl { font-family: var(--fh); font-size: 14px; font-weight: 700; line-height: 1.15; color: var(--negro); }
.side-ttl a { color: var(--negro); }
.side-ttl a:hover { color: var(--rojo); }
.side-meta { font-family: var(--fu); font-size: 10px; color: var(--g4); margin-top: 2px; }

/* ─── TABLA ───────────────────────────────────────────────── */
.tabla-box { border: 1px solid var(--border); }
.tabla-hdr {
    background: var(--negro); color: #fff;
    font-family: var(--fh); font-size: 11px; font-weight: 900;
    letter-spacing: .1em; text-transform: uppercase;
    padding: 8px 14px; display: flex; justify-content: space-between; align-items: center;
}
.tabla-hdr span:last-child { font-family: var(--fu); font-size: 10px; font-weight: 400; color: rgba(255,255,255,.5); }
.tabla-box table { width: 100%; border-collapse: collapse; }
.tabla-box th {
    font-family: var(--fu); font-size: 10px; font-weight: 700;
    letter-spacing: .07em; text-transform: uppercase; color: var(--g4);
    padding: 6px 8px; border-bottom: 1px solid var(--border); text-align: center;
}
.tabla-box th:nth-child(2) { text-align: left; padding-left: 12px; }
.tabla-box td {
    padding: 8px 8px; border-bottom: 1px solid var(--border);
    text-align: center; font-family: var(--fu); font-size: 12px; color: var(--g2);
}
.tabla-box td:nth-child(2) { text-align: left; padding-left: 12px; font-family: var(--fh); font-size: 13px; font-weight: 700; color: var(--negro); }
.tabla-box tr:last-child td { border-bottom: none; }
.tabla-box tr.lib td:nth-child(2) { border-left: 3px solid var(--rojo); }
.tabla-box tr.cl  td:nth-child(2) { border-left: 3px solid #1a6e2e; }
.pts { font-family: var(--fh) !important; font-size: 15px !important; font-weight: 900 !important; color: var(--negro) !important; }

/* ─── AGENDA ─────────────────────────────────────────────── */
.agenda-box { border: 1px solid var(--border); }
.agenda-hdr {
    background: var(--negro); color: #fff;
    font-family: var(--fh); font-size: 11px; font-weight: 900;
    letter-spacing: .1em; text-transform: uppercase;
    padding: 8px 12px; display: flex; align-items: center; gap: 7px;
}
.agenda-hdr::before { content: ''; width: 7px; height: 7px; background: var(--rojo); display: inline-block; }
.agenda-item { padding: 11px 12px; border-bottom: 1px solid var(--border); }
.agenda-item:last-child { border-bottom: none; }
.agenda-fecha { font-family: var(--fu); font-size: 9px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--g4); margin-bottom: 4px; }
.agenda-partido { font-family: var(--fh); font-size: 15px; font-weight: 700; color: var(--negro); display: flex; align-items: center; justify-content: space-between; }
.agenda-hora { font-family: var(--fh); font-size: 13px; font-weight: 700; color: var(--rojo); }
.agenda-comp { font-family: var(--fu); font-size: 10px; color: var(--g4); margin-top: 2px; }

/* ─── PAGINACIÓN ─────────────────────────────────────────── */
.pagination { padding: 20px 0 28px; }
.pagination .page-numbers {
    display: inline-flex; gap: 4px; list-style: none;
    flex-wrap: wrap;
}
.pagination .page-numbers li a,
.pagination .page-numbers li span {
    font-family: var(--fh); font-size: 13px; font-weight: 700;
    padding: 6px 12px; border: 1px solid var(--border); color: var(--g3);
    display: inline-block; transition: .15s;
}
.pagination .page-numbers li a:hover { border-color: var(--rojo); color: var(--rojo); }
.pagination .page-numbers li .current { background: var(--rojo); border-color: var(--rojo); color: #fff; }

/* ─── FOOTER STRIP ───────────────────────────────────────── */
.fstrip { background: var(--rojo); padding: 7px 0; margin-top: 8px; }
.fstrip-inner {
    max-width: var(--max-width); margin: 0 auto; padding: 0 16px;
    display: flex; justify-content: space-between; align-items: center;
}
.fstrip-txt { font-family: var(--fu); font-size: 10px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: rgba(255,255,255,.85); }
.fstrip-badge { font-family: var(--fh); font-size: 10px; font-weight: 900; background: var(--negro); color: #fff; padding: 2px 9px; }

/* ─── FOOTER ─────────────────────────────────────────────── */
.site-footer { background: var(--negro); color: #fff; padding: 26px 0 16px; }
.footer-inner { max-width: var(--max-width); margin: 0 auto; padding: 0 16px; }
.footer-top {
    display: grid;
    grid-template-columns: 220px 1fr 1fr 1fr;
    gap: 28px;
    padding-bottom: 18px;
    border-bottom: 1px solid #222;
}
.footer-logo-row { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.footer-logo-row img { width: 36px; height: 36px; object-fit: contain; }
.footer-wordmark { font-family: var(--fh); font-size: 22px; font-weight: 900; color: #fff; }
.footer-wordmark span { color: var(--rojo); }
.footer-tagline { font-family: var(--fu); font-size: 11px; color: #555; line-height: 1.5; margin-top: 6px; }
.footer-social { display: flex; gap: 6px; margin-top: 12px; }
.footer-social a {
    font-family: var(--fu); font-size: 9px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
    border: 1px solid #333; color: #777; padding: 3px 7px; transition: .15s;
}
.footer-social a:hover { color: #fff; border-color: #666; }
.footer-col-title {
    font-family: var(--fh); font-size: 10px; font-weight: 900;
    letter-spacing: .1em; text-transform: uppercase; color: #555;
    margin-bottom: 9px; padding-bottom: 6px; border-bottom: 1px solid #222;
}
.footer-links { list-style: none; display: flex; flex-direction: column; gap: 5px; }
.footer-links a { font-family: var(--fu); font-size: 12px; color: #888; transition: .15s; }
.footer-links a:hover { color: #fff; }
.footer-bottom {
    display: flex; justify-content: space-between; align-items: center;
    padding-top: 12px; font-family: var(--fu); font-size: 10px; color: #444;
}
.f-ia-badge {
    font-family: var(--fh); font-size: 9px; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase;
    background: var(--rojo); color: #fff; padding: 2px 8px;
}

/* ─── BREADCRUMB ─────────────────────────────────────────── */
.breadcrumb { background: var(--bg); border-bottom: 1px solid var(--border); padding: 8px 0; }
.bc-inner {
    display: flex; align-items: center; gap: 6px;
    font-family: var(--fu); font-size: 11px; font-weight: 500;
    letter-spacing: .04em; text-transform: uppercase; color: var(--g5);
}
.bc-inner a { color: var(--g5); transition: .15s; }
.bc-inner a:hover { color: var(--rojo); }
.bc-sep { color: var(--g5); }
.bc-current { color: var(--rojo); font-weight: 600; }

/* ─── RESPONSIVE ─────────────────────────────────────────── */
@media ( max-width: 1024px ) {
    .hero-grid { grid-template-columns: 1fr 1fr; }
    .sidebar-box { display: none; }
    .two-col { grid-template-columns: 1fr; }
    .footer-top { grid-template-columns: 1fr 1fr; }
    .hist4 { grid-template-columns: repeat(2, 1fr); }
}

@media ( max-width: 768px ) {
    .topbar { display: none; }
    .nav-links { display: none; }
    .hamburger { display: flex; }
    .btn-sub { padding: 5px 10px; font-size: 10px; }
    .hero-grid { grid-template-columns: 1fr; }
    .hero-img { height: 240px; }
    .grid3 { grid-template-columns: 1fr; }
    .lead-layout { grid-template-columns: 1fr; }
    .lead-side { display: none; }
    .hist4 { grid-template-columns: 1fr 1fr; }
    .footer-top { grid-template-columns: 1fr; gap: 20px; }
    .art-layout { grid-template-columns: 1fr; }
    .art-sidebar { display: none; }
    .related-grid { grid-template-columns: 1fr; }
    .art-h1 { font-size: 28px; }
    .fstrip-inner { flex-direction: column; gap: 4px; text-align: center; }
}

@media ( max-width: 480px ) {
    .hero-h1 { font-size: 22px; }
    .hist4 { grid-template-columns: 1fr; }
    .art-h1 { font-size: 24px; }
    .art-dek { font-size: 15px; }
}