/* ═══════════════════════════════════════════════════════════════════
   ZONA ZERO — GLOBAL CSS
   Accesibilidad + Responsive
   Aplicado a TODAS las páginas vía <link rel="stylesheet">
   ═══════════════════════════════════════════════════════════════════ */


/* ───────────────────────────────────────────────────────────────────
   0. PALETA GLOBAL — fondo blanco hueso unificado
   ─────────────────────────────────────────────────────────────────── */
html, body {
    background-color: #fbfaf7 !important;
}

/* ═══ STICKY AUDIO PLAYER ═══ */
#zz-audio {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 8400;
    background: #0a0a0a;
    color: #fff;
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(.25,.46,.45,.94);
    box-shadow: 0 -6px 24px rgba(0,0,0,0.2);
}
#zz-audio.show { transform: translateY(0); }
.zza-inner {
    max-width: 1260px;
    margin: 0 auto;
    padding: 12px 24px;
    display: grid;
    grid-template-columns: 48px 1fr 44px 2fr 38px;
    align-items: center;
    gap: 16px;
}
.zza-thumb {
    width: 48px; height: 48px;
    background: #2a2a2a;
    flex-shrink: 0;
    border-radius: 2px;
}
.zza-meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.zza-eyebrow { font-size: 0.52rem; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,0.5); }
.zza-title { font-family: 'Playfair Display', Georgia, serif; font-size: 0.92rem; font-weight: 700; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zza-play {
    width: 44px; height: 44px; border-radius: 50%;
    background: #fff; color: #111;
    border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.2s, color 0.2s;
}
.zza-play:hover { background: #2ecc71; color: #fff; }
.zza-progress-wrap { display: flex; align-items: center; gap: 10px; }
.zza-time { font-size: 0.7rem; color: rgba(255,255,255,0.6); font-variant-numeric: tabular-nums; min-width: 36px; }
.zza-bar { flex: 1; height: 4px; background: rgba(255,255,255,0.12); border-radius: 2px; cursor: pointer; position: relative; overflow: hidden; }
.zza-bar-fill { height: 100%; background: #2ecc71; width: 0%; transition: width 0.1s linear; }
.zza-close { background: transparent; border: none; color: rgba(255,255,255,0.5); cursor: pointer; font-size: 1.6rem; line-height: 1; padding: 6px 10px; transition: color 0.2s; }
.zza-close:hover { color: #fff; }

@media (max-width: 768px) {
    .zza-inner { grid-template-columns: 40px 1fr 40px 30px; padding: 10px 14px; gap: 10px; }
    .zza-thumb { width: 40px; height: 40px; }
    .zza-title { font-size: 0.82rem; }
    .zza-progress-wrap { display: none; }
    .zza-play { width: 40px; height: 40px; }
    .zza-close { padding: 4px 8px; font-size: 1.4rem; }
    #zz-audio.show { bottom: 68px; }
}
@media (max-width: 480px) {
    .zza-eyebrow { display: none; }
}

/* ═══ REVEAL ON SCROLL ═══ */
.zz-reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.55s cubic-bezier(.25,.46,.45,.94), transform 0.55s cubic-bezier(.25,.46,.45,.94);
}
.zz-reveal.zz-revealed {
    opacity: 1;
    transform: translateY(0);
}

/* ═══ STICKY NEWSLETTER (artículo) ═══ */
#sticky-nl {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 8500;
    background: #0a0a0a;
    color: #fff;
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(.25,.46,.45,.94);
    box-shadow: 0 -8px 30px rgba(0,0,0,0.18);
}
#sticky-nl.show { transform: translateY(0); }
.snl-inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 16px 24px 16px 32px;
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 22px;
    position: relative;
}
.snl-text { display: flex; flex-direction: column; gap: 4px; }
.snl-eyebrow { font-size: 0.52rem; font-weight: 800; letter-spacing: 2.5px; text-transform: uppercase; color: rgba(255,255,255,0.55); }
.snl-text strong { font-family: 'Playfair Display', Georgia, serif; font-size: 1.1rem; font-weight: 700; line-height: 1.25; color: #fff; }
.snl-form { display: flex; gap: 8px; }
.snl-form input {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.16);
    color: #fff;
    padding: 11px 14px;
    font-family: inherit;
    font-size: 0.84rem;
    min-width: 220px;
    outline: none;
}
.snl-form input::placeholder { color: rgba(255,255,255,0.4); }
.snl-form input:focus { border-color: rgba(255,255,255,0.4); }
.snl-form button {
    background: #fff; color: #111;
    border: none;
    padding: 11px 20px;
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.2s;
    white-space: nowrap;
}
.snl-form button:hover { background: #7a0000; color: #fff; }
.snl-close {
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.5);
    cursor: pointer;
    font-size: 1.6rem;
    line-height: 1;
    padding: 6px 10px;
    transition: color 0.2s;
}
.snl-close:hover { color: #fff; }

@media (max-width: 768px) {
    .snl-inner { grid-template-columns: 1fr auto; padding: 12px 12px 12px 18px; gap: 12px; }
    .snl-text strong { font-size: 0.92rem; }
    .snl-form { grid-column: 1/-1; }
    .snl-form input { min-width: 0; flex: 1; font-size: 0.78rem; padding: 10px 12px; }
    .snl-form button { padding: 10px 14px; font-size: 0.54rem; }
    .snl-close { position: absolute; top: 8px; right: 8px; padding: 4px 8px; font-size: 1.3rem; }
    /* No tapar el bottom nav */
    #sticky-nl.show { bottom: 68px; }
    /* Si hay también audio-player sticky encima del nav, sumar */
}

/* Páginas oscuras por diseño (Último Pase) — siempre oscuras, ignoran el modo claro */
body.dark-page,
html body.dark-page {
    background-color: #050505 !important;
}
body.dark-page .nav-bar { background-color: #0e0e0e !important; border-bottom-color: rgba(255,255,255,0.06) !important; }
body.dark-page .nav-links a { color: #aaa !important; }
body.dark-page .nav-links a:hover,
body.dark-page .nav-links a.active { color: #fff !important; border-bottom-color: #fff !important; }
body.dark-page .subscribe-bar { background-color: #161616 !important; border-bottom-color: rgba(255,255,255,0.06) !important; }
body.dark-page .subscribe-date { color: #b8b5ad !important; }
body.dark-page .ad-banner,
body.dark-page .ad-placeholder { background-color: #0e0e0e !important; border-color: rgba(255,255,255,0.08) !important; }
body.dark-page .ad-label,
body.dark-page .ad-cta-text,
body.dark-page .ad-cta-dim { color: rgba(255,255,255,0.5) !important; }
body.dark-page .sponsors-bar { background-color: #0a0a0a !important; }
body.dark-page .sponsor-logo { background-color: #181818 !important; color: #5a5a5a !important; border: 1px dashed rgba(255,255,255,0.08) !important; }
body.dark-page .sponsors-track-wrap::before { background: linear-gradient(to right, #0a0a0a, transparent) !important; }
body.dark-page .sponsors-track-wrap::after { background: linear-gradient(to left, #0a0a0a, transparent) !important; }

/* ───── DARK MODE ───── */
html.theme-dark, html.theme-dark body {
    background-color: #0e0e0e !important;
    color: #e8e6e1;
}
html.theme-dark .container,
html.theme-dark main,
html.theme-dark section,
html.theme-dark article { color: inherit; }

/* Texto general */
html.theme-dark h1, html.theme-dark h2, html.theme-dark h3,
html.theme-dark h4, html.theme-dark h5, html.theme-dark p,
html.theme-dark .meta, html.theme-dark .deck,
html.theme-dark .sec-article h3, html.theme-dark .main-article h1 {
    color: #e8e6e1 !important;
}
html.theme-dark .meta, html.theme-dark .excerpt,
html.theme-dark .deck { color: #a5a29a !important; }

/* Nav */
html.theme-dark .nav-bar { background: #161616 !important; border-bottom-color: rgba(255,255,255,0.08) !important; }
html.theme-dark .nav-links a { color: #aaa !important; }
html.theme-dark .nav-links a:hover, html.theme-dark .nav-links a.active { color: #fff !important; border-bottom-color: #fff !important; }

/* Subscribe-bar */
html.theme-dark .subscribe-bar { background-color: #1a1a1a !important; border-bottom-color: rgba(255,255,255,0.06) !important; }
html.theme-dark .subscribe-date { color: #c0bdb5 !important; }
html.theme-dark .btn-subscribe { background: #fff !important; color: #111 !important; }
html.theme-dark .btn-subscribe:hover { background: #c0392b !important; color: #fff !important; }

/* Cards & surfaces */
html.theme-dark .sec-article,
html.theme-dark .politics-card,
html.theme-dark .analysis-card,
html.theme-dark .opinion-item,
html.theme-dark .podcast-card,
html.theme-dark .nl-card,
html.theme-dark .indicador-card,
html.theme-dark .indicadores-panel,
html.theme-dark .agenda-item,
html.theme-dark .stereo-agenda-item,
html.theme-dark .acc-help,
html.theme-dark .mag-card,
html.theme-dark .stat-strip,
html.theme-dark .stat-cell {
    background-color: #181818 !important;
    border-color: rgba(255,255,255,0.08) !important;
    color: #e8e6e1 !important;
}
html.theme-dark .politics-card h3,
html.theme-dark .analysis-card h3,
html.theme-dark .nl-card h4 { color: #fff !important; }

/* Borders */
html.theme-dark hr,
html.theme-dark .divider,
html.theme-dark .section-header::after,
html.theme-dark .acc-section-head { border-color: rgba(255,255,255,0.12) !important; }

/* Footer queda como está (ya es oscuro) */

/* Welcome card en cuenta */
html.theme-dark .welcome-card { background: #1f1f1f !important; }

/* Account hero */
html.theme-dark .account-name,
html.theme-dark .account-info strong { color: #fff !important; }
html.theme-dark .account-info { color: #a5a29a !important; }
html.theme-dark .account-plan.free { background: #2a2a2a !important; color: #e8e6e1 !important; }
html.theme-dark .account-nav a { color: #c0bdb5 !important; }
html.theme-dark .account-nav a:hover { background: rgba(255,255,255,0.05) !important; color: #fff !important; }
html.theme-dark .account-nav a.active { background: rgba(255,255,255,0.07) !important; color: #fff !important; }

/* Inputs */
html.theme-dark input, html.theme-dark select, html.theme-dark textarea {
    background: #1f1f1f !important; color: #fff !important; border-color: rgba(255,255,255,0.15) !important;
}
html.theme-dark input::placeholder { color: #888 !important; }

/* Bottom mobile nav */
html.theme-dark #m-nav { background: rgba(20,20,20,0.96) !important; border-top-color: rgba(255,255,255,0.1) !important; }
html.theme-dark .m-nav-item { color: #aaa !important; }
html.theme-dark .m-nav-item.active { color: #ff6868 !important; }
html.theme-dark .m-nav-item:hover { color: #fff !important; }

/* Read-more / links */
html.theme-dark .read-more { color: #e8e6e1 !important; border-color: rgba(255,255,255,0.2) !important; }
html.theme-dark .read-more:hover { color: #ff6868 !important; border-color: #ff6868 !important; }

/* Toggle button: icon swap + visibilidad en header oscuro */
#theme-toggle { position: relative; color: #fff !important; }
#theme-toggle:hover { color: #fff !important; }
#theme-toggle svg { stroke: #fff !important; }
#theme-toggle .tt-sun { display: none; }
#theme-toggle .tt-moon { display: block; }
html.theme-dark #theme-toggle .tt-sun { display: block; }
html.theme-dark #theme-toggle .tt-moon { display: none; }

/* ───── DARK MODE — ajustes de contraste y secciones especiales ───── */

/* Body: negro más profundo para que cards destaquen */
html.theme-dark, html.theme-dark body {
    background-color: #050505 !important;
}

/* Cards: un escalón más arriba (gris muy oscuro) para destacar del body */
html.theme-dark .sec-article,
html.theme-dark .politics-card,
html.theme-dark .analysis-card,
html.theme-dark .opinion-item,
html.theme-dark .podcast-card,
html.theme-dark .nl-card,
html.theme-dark .indicador-card,
html.theme-dark .indicadores-panel,
html.theme-dark .agenda-item,
html.theme-dark .stereo-agenda-item,
html.theme-dark .acc-help,
html.theme-dark .mag-card,
html.theme-dark .stat-strip,
html.theme-dark .stat-cell,
html.theme-dark .dest-card,
html.theme-dark .up-item,
html.theme-dark .ep-card,
html.theme-dark .show-card,
html.theme-dark .formats-card,
html.theme-dark .columnist-band,
html.theme-dark .historia-section,
html.theme-dark .sobre-section,
html.theme-dark .related-item,
html.theme-dark .aside-card,
html.theme-dark .article-figure {
    background-color: #161616 !important;
    border-color: rgba(255,255,255,0.07) !important;
    color: #e8e6e1 !important;
}

/* Texto sobre cards: blanco neto para títulos */
html.theme-dark .sec-article h3,
html.theme-dark .politics-card h3,
html.theme-dark .analysis-card h3,
html.theme-dark .nl-card h4,
html.theme-dark .dest-card h4,
html.theme-dark .up-item h3,
html.theme-dark .article-title,
html.theme-dark .acc-section-title,
html.theme-dark .related-title { color: #ffffff !important; }

/* ── ÚLTIMO PASE wrapper: gradiente adaptado al dark ── */
html.theme-dark .up-wrapper {
    background: #000 !important;
}
html.theme-dark .up-wrapper::before,
html.theme-dark .up-wrapper::after {
    /* en dark, transición de body negro al wrapper más negro: muy sutil */
    background: linear-gradient(
        to bottom,
        #050505 0%,
        #000 100%
    ) !important;
}
html.theme-dark .up-wrapper::after {
    background: linear-gradient(
        to top,
        #050505 0%,
        #000 100%
    ) !important;
}

/* ── Ad banners ── */
html.theme-dark .ad-banner,
html.theme-dark .ad-placeholder {
    background-color: #0e0e0e !important;
    border-color: rgba(255,255,255,0.08) !important;
}
html.theme-dark .ad-label,
html.theme-dark .ad-cta-text,
html.theme-dark .ad-cta-dim,
html.theme-dark .ad-cta-icon { color: rgba(255,255,255,0.5) !important; }
html.theme-dark .ad-placeholder:hover { background-color: #161616 !important; }

/* ── Sponsors bar ── */
html.theme-dark .sponsors-bar {
    background-color: #0a0a0a !important;
    border-color: rgba(255,255,255,0.08) !important;
}
html.theme-dark .sponsors-label { color: rgba(255,255,255,0.4) !important; }
html.theme-dark .sponsors-header-line { background: rgba(255,255,255,0.1) !important; }
html.theme-dark .sponsor-item { color: rgba(255,255,255,0.4) !important; }

/* ── Divider y bordes generales ── */
html.theme-dark .divider,
html.theme-dark hr { background-color: rgba(255,255,255,0.08) !important; border-color: rgba(255,255,255,0.08) !important; }

/* ── Subscribe bar mejor contraste ── */
html.theme-dark .subscribe-bar { background-color: #111 !important; }
html.theme-dark .subscribe-date { color: #b8b5ad !important; }

/* ── Sec-img / portrait wrappers ── */
html.theme-dark .sec-img,
html.theme-dark .dest-card img,
html.theme-dark .politics-card img,
html.theme-dark .analysis-card img,
html.theme-dark .article-hero { opacity: 0.92; }

/* ── Tag chips y reading progress ── */
html.theme-dark .tag-chip { background: #1a1a1a !important; color: #c0bdb5 !important; border-color: rgba(255,255,255,0.1) !important; }
html.theme-dark .tag-chip:hover { background: #fff !important; color: #111 !important; }

/* ── Article body en dark ── */
html.theme-dark .article-body { color: #d8d5cd !important; }
html.theme-dark .article-body > p:first-of-type::first-letter { color: #ff6868 !important; }
html.theme-dark .article-body h2,
html.theme-dark .article-body h3 { color: #fff !important; }
html.theme-dark .article-body blockquote { color: #ff6868 !important; border-color: #ff6868 !important; }
html.theme-dark .article-body a { color: #ff6868 !important; border-color: #ff6868 !important; }
html.theme-dark .pull-quote { border-color: #fff !important; }
html.theme-dark .pull-quote .pq-text { color: #fff !important; }

/* ── Breadcrumbs en dark ── */
html.theme-dark .breadcrumbs,
html.theme-dark .breadcrumbs a { color: #888 !important; }
html.theme-dark .breadcrumbs .current { color: #e8e6e1 !important; }

/* ═══ BDR DARK MODE ═══ */
html.theme-dark .bdr-cronica { background: #0a1828 !important; }
html.theme-dark .bdr-cronica h2 { color: #fff !important; }
html.theme-dark .bdr-cronica .deck { color: #b5c2d4 !important; }
html.theme-dark .bdr-cronica-byline .name { color: #fff !important; }
html.theme-dark .bdr-cronica-byline .meta,
html.theme-dark .bdr-cronica-byline .by { color: #8a99ad !important; }
html.theme-dark .bdr-cronica-byline { border-bottom-color: rgba(255,255,255,0.1) !important; }
html.theme-dark .bdr-cronica-caption { color: #8a99ad !important; }
html.theme-dark .bdr-cronica-caption strong { color: #d5dde8 !important; }
html.theme-dark .bdr-cronica-body { color: #d5dde8 !important; }
html.theme-dark .bdr-cronica-body blockquote { color: #fff !important; }
html.theme-dark .bdr-cronica-actions { border-top-color: rgba(255,255,255,0.1) !important; }
html.theme-dark .bdr-cronica-actions button {
    background: transparent !important;
    border-color: rgba(255,255,255,0.3) !important;
    color: #fff !important;
}
html.theme-dark .bdr-cronica-actions button:hover { background: var(--dorado, #D4A84B) !important; color: #0a1828 !important; border-color: var(--dorado, #D4A84B) !important; }
html.theme-dark .bdr-cronica-actions button.primary { background: var(--dorado, #D4A84B) !important; color: #0a1828 !important; border-color: var(--dorado, #D4A84B) !important; }

html.theme-dark .bdr-formatos { background: #0a1828 !important; }
html.theme-dark .bdr-formatos-head h2 { color: #fff !important; }
html.theme-dark .bdr-formatos-head p { color: #b5c2d4 !important; }
html.theme-dark .bdr-formato-card {
    background: #141f30 !important;
    border-top-color: #D4A84B !important;
}
html.theme-dark .bdr-formato-card h4 { color: #fff !important; }
html.theme-dark .bdr-formato-card p { color: #b5c2d4 !important; }
html.theme-dark .bdr-formato-card .meta { border-top-color: rgba(255,255,255,0.1) !important; }
html.theme-dark .bdr-formato-card .icon { background: #1B4B6B !important; }

html.theme-dark .bdr-episodios { background: #0a1828 !important; }
html.theme-dark .bdr-section-header h2 { color: #fff !important; }
html.theme-dark .bdr-section-header .meta { color: #8a99ad !important; }
html.theme-dark .bdr-ep-card { background: #141f30 !important; }
html.theme-dark .bdr-ep-card h4 { color: #fff !important; }
html.theme-dark .bdr-ep-card p { color: #b5c2d4 !important; }
html.theme-dark .bdr-ep-stats { color: #8a99ad !important; border-top-color: rgba(255,255,255,0.1) !important; }

html.theme-dark .bdr-canales { background: #0a1828 !important; }
html.theme-dark .bdr-canal-card { background: #141f30 !important; }
html.theme-dark .bdr-canal-card:hover { background: #1c2c42 !important; }
html.theme-dark .bdr-canal-card h4 { color: #fff !important; }
html.theme-dark .bdr-canal-card p { color: #b5c2d4 !important; }

html.theme-dark .subscribe-bar { /* ya manejado */ }

/* ── Sponsor logos placeholders en dark ── */
html.theme-dark .sponsor-logo {
    background-color: #181818 !important;
    color: #5a5a5a !important;
    border: 1px dashed rgba(255,255,255,0.08) !important;
}

/* ── Mobile nav button container (no es item de link) ── */
html.theme-dark button.m-nav-item { background: transparent !important; }

/* ── Popups en dark ── */
html.theme-dark .adpop-modal { background: #161616 !important; color: #e8e6e1 !important; }
html.theme-dark .adpop-format-box { background: #0e0e0e !important; border-color: rgba(255,255,255,0.08) !important; color: #b0aea7 !important; }

/* ── Section headers en dark ── */
html.theme-dark .section-header h2,
html.theme-dark .sponsor-header h2 { color: #fff !important; }
html.theme-dark .section-header::after,
html.theme-dark .sponsor-header-line { background: rgba(255,255,255,0.15) !important; }

/* ── Zona Visión específico ── */
html.theme-dark .opinion-section { background-color: transparent !important; }
html.theme-dark .opinion-author-info .name { color: #fff !important; }
html.theme-dark .opinion-quote { color: #fff !important; }

/* ── Hero text en páginas de sección ── */
html.theme-dark .hero-text-col h1 { color: #fff !important; }
html.theme-dark .hero-text-col .deck { color: #b0aea7 !important; }

/* ── Dest cards (destacadas de la semana) ── */
html.theme-dark .dest-card-content,
html.theme-dark .dest-card h4 { color: #fff !important; }
html.theme-dark .dest-strip-label { color: rgba(255,255,255,0.55) !important; }

/* ── Subscribe bar inner separator dot ── */
html.theme-dark .subscribe-date .sd-sep { color: rgba(255,255,255,0.2) !important; }

/* ── Sponsors track gradient fade en dark ── */
html.theme-dark .sponsors-track-wrap::before {
    background: linear-gradient(to right, #0a0a0a, transparent) !important;
}
html.theme-dark .sponsors-track-wrap::after {
    background: linear-gradient(to left, #0a0a0a, transparent) !important;
}

/* ── Último Pase wrapper: gradients más cortos + match al nuevo body ── */
.up-wrapper::before,
.up-wrapper::after {
    height: 100px !important;
}
.up-wrapper::before {
    background: linear-gradient(
        to bottom,
        #fbfaf7 0%,
        rgba(251,250,247,0.85) 25%,
        rgba(120,120,118,0.4) 60%,
        rgba(10,10,10,0) 100%
    ) !important;
}
.up-wrapper::after {
    background: linear-gradient(
        to top,
        #fbfaf7 0%,
        rgba(251,250,247,0.85) 25%,
        rgba(120,120,118,0.4) 60%,
        rgba(10,10,10,0) 100%
    ) !important;
}
.up-wrapper {
    padding-top: 100px !important;
    padding-bottom: 110px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* En dark mode: gradients invisibles (todo es negro continuo) */
html.theme-dark .up-wrapper::before,
html.theme-dark .up-wrapper::after {
    background: transparent !important;
    height: 0 !important;
}

/* ── Theme toggle en mobile: ocultar del header, mostrar en drawer ── */
@media (max-width: 768px) {
    .header-right #theme-toggle { display: none !important; }
}
#menu-theme-toggle {
    position: absolute;
    /* Centrado vertical con el logo (height 50px, top padding 28px → center 53px, toggle 36px → top 35px) */
    top: 35px;
    left: 36px;
    width: 36px;
    height: 36px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.18s, border-color 0.18s;
}
#menu-theme-toggle:hover { background: rgba(255,255,255,0.12); }
#menu-theme-toggle svg { stroke: #fff; width: 16px; height: 16px; }
#menu-theme-toggle .tt-sun { display: none; }
#menu-theme-toggle .tt-moon { display: block; }
html.theme-dark #menu-theme-toggle .tt-sun { display: block; }
html.theme-dark #menu-theme-toggle .tt-moon { display: none; }

/* Logo del drawer mantiene su posición natural (no se desplaza) */
.menu-drawer .menu-logo { margin-left: 0; }

@media (max-width: 768px) {
    #menu-theme-toggle {
        width: 32px;
        height: 32px;
        top: 33px;
        left: 28px;
    }
    #menu-theme-toggle svg { width: 14px; height: 14px; }
}

/* Subscribe bar — gris cálido neutro que conecta el header negro con el fondo */
.subscribe-bar {
    background-color: #e8e6e1 !important;
    border-bottom-color: #d8d5cf !important;
}
.subscribe-date {
    color: #3a3a3a !important;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.subscribe-date .sd-sep { color: #b0aea7; font-weight: 600; opacity: 0.7; }
.subscribe-date .sd-weather { color: #7a0000; font-weight: 700; }
.subscribe-date .sd-fx,
.subscribe-date .sd-fx-2 { color: #1a4a2a; }
.subscribe-date strong { color: #111; font-weight: 700; }

/* Bottom mobile nav — fijo abajo en ≤768px */
#m-nav { display: none; }

@media (max-width: 768px) {
    /* Solo mostrar en mobile, no si no existe el body */
    #m-nav {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr);
        position: fixed;
        bottom: 0; left: 0; right: 0;
        z-index: 9000;
        background: rgba(255,255,255,0.96);
        -webkit-backdrop-filter: blur(14px);
        backdrop-filter: blur(14px);
        border-top: 1px solid rgba(0,0,0,0.08);
        padding: 6px 4px;
        padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
        box-shadow: 0 -2px 14px rgba(0,0,0,0.06);
    }
    .m-nav-item {
        background: transparent;
        border: none;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        padding: 8px 4px 6px;
        color: #555;
        text-decoration: none;
        font-family: 'Inter', system-ui, sans-serif;
        font-size: 0.52rem;
        font-weight: 700;
        letter-spacing: 0.6px;
        text-transform: uppercase;
        transition: color 0.18s, transform 0.18s;
        line-height: 1;
    }
    .m-nav-item svg { width: 22px; height: 22px; stroke-width: 1.7; }
    .m-nav-item.active { color: #7a0000; }
    .m-nav-item:hover { color: #111; }
    .m-nav-item:active { transform: scale(0.94); }

    /* Espacio para no tapar contenido con el bottom nav */
    body { padding-bottom: 68px; }

    /* Subscribe-bar mobile: reordenar y reducir */
    .subscribe-date {
        gap: 6px;
        font-size: 0.62rem !important;
        justify-content: center;
    }
    .subscribe-date .sd-place,
    .subscribe-date .sd-fx-2 { display: none; }
    .subscribe-date .sd-sep:nth-of-type(2),
    .subscribe-date .sd-sep:nth-of-type(4) { display: none; }
}

@media (max-width: 480px) {
    .subscribe-date { font-size: 0.58rem !important; gap: 5px; }
    .m-nav-item span { font-size: 0.48rem; }
}

/* Mini subscribe button en header — visible solo en mobile */
.btn-subscribe-mini {
    display: none;
    background: #fff;
    color: #111;
    border: none;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.5rem;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    padding: 6px 11px;
    border-radius: 2px;
    cursor: pointer;
    transition: background 0.18s, transform 0.18s;
}
.btn-subscribe-mini:hover { background: #7a0000; color: #fff; transform: translateY(-1px); }

/* Search field dentro del drawer — visible en todas las resoluciones */
.menu-search {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 8px;
    padding: 10px 14px;
    margin: 18px 0 10px;
    transition: border-color 0.18s, background 0.18s;
}
.menu-search:focus-within {
    border-color: rgba(255,255,255,0.4);
    background: rgba(255,255,255,0.12);
}
.menu-search-icon {
    color: rgba(255,255,255,0.55);
    flex-shrink: 0;
}
.menu-search input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: #fff;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.82rem;
    font-weight: 500;
    width: 100%;
    min-width: 0;
}
.menu-search input::placeholder { color: rgba(255,255,255,0.4); }
.menu-search input::-webkit-search-cancel-button { -webkit-appearance: none; }

/* Resultados del buscador */
.menu-search-results {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    max-height: 60vh;
    overflow-y: auto;
    margin-bottom: 14px;
    animation: msr-in 0.2s ease;
    flex-shrink: 0;
}
@keyframes msr-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.msr-item {
    display: block;
    padding: 14px 14px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    color: #fff;
    text-decoration: none;
    transition: background 0.15s, padding-left 0.15s;
}
.msr-item:last-child { border-bottom: none; }
.msr-item:hover { background: rgba(255,255,255,0.06); padding-left: 18px; }
.msr-kicker {
    display: block;
    font-size: 0.5rem;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.5);
    margin-bottom: 5px;
}
.msr-title {
    display: block;
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
    margin-bottom: 6px;
}
.msr-title mark { background: rgba(192, 57, 43, 0.5); color: #fff; padding: 0 2px; }
.msr-section {
    display: inline-block;
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #c0392b;
}
.msr-empty {
    padding: 18px;
    color: rgba(255,255,255,0.55);
    font-size: 0.82rem;
    text-align: center;
}
.msr-empty strong { color: #fff; }


/* ───────────────────────────────────────────────────────────────────
   1. ACCESIBILIDAD GLOBAL
   ─────────────────────────────────────────────────────────────────── */

/* Skip-to-content link (oculto hasta foco con teclado) */
.skip-link {
    position: absolute;
    top: -100px;
    left: 0;
    z-index: 10000;
    background: #7a0000;
    color: #fff;
    padding: 14px 22px;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-decoration: none;
    transition: top 0.2s ease;
}
.skip-link:focus {
    top: 0;
    outline: 3px solid #fff;
    outline-offset: -6px;
}

/* Focus visible global — accesibilidad keyboard */
*:focus { outline: none; }
*:focus-visible {
    outline: 2px solid #7a0000;
    outline-offset: 3px;
    border-radius: 1px;
}
button:focus-visible,
a:focus-visible {
    outline: 2px solid #7a0000;
    outline-offset: 3px;
}
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid #7a0000;
    outline-offset: 0;
}

/* Reduced motion (respeta preferencias del usuario) */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .ticker-content,
    .sponsors-track { animation: none !important; }
}

/* Scrollbar para webkit (sutil, no intrusivo) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.18); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.32); }


/* ───────────────────────────────────────────────────────────────────
   1.5 VIEWPORT TOGGLE WIDGET (dev/preview tool)
   ─────────────────────────────────────────────────────────────────── */

#vp-toggle {
    position: fixed;
    bottom: 16px; right: 16px;
    z-index: 10001;
    display: flex;
    gap: 1px;
    background: rgba(0,0,0,0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 4px;
    border-radius: 999px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.25);
    font-family: 'Inter', system-ui, sans-serif;
}
.vp-btn {
    display: flex; align-items: center; gap: 6px;
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.55);
    padding: 8px 14px;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    border-radius: 999px;
    transition: color 0.18s, background 0.18s;
}
.vp-btn:hover { color: #fff; }
.vp-btn.vp-active {
    background: #fff;
    color: #111;
}
.vp-btn svg { flex-shrink: 0; }
.vp-btn span { line-height: 1; }

@media (max-width: 480px) {
    #vp-toggle { bottom: 12px; right: 12px; padding: 3px; }
    .vp-btn { padding: 7px 10px; font-size: 0.55rem; }
    .vp-btn span { display: none; }
}

/* Overlay shell con iframe del tamaño deseado */
#vp-shell {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: #1a1a1a;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
#vp-shell.vp-active { display: flex; }
.vp-shell-bar {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 44px;
    background: rgba(0,0,0,0.95);
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 70px 0 24px;
    color: rgba(255,255,255,0.7);
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
.vp-shell-close {
    position: absolute;
    top: 4px; right: 8px;
    width: 36px; height: 36px;
    background: transparent;
    color: rgba(255,255,255,0.6);
    border: none;
    font-size: 1.6rem;
    cursor: pointer;
    transition: color 0.18s;
}
.vp-shell-close:hover { color: #fff; }
.vp-shell-frame-wrap {
    margin-top: 44px;
    padding: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.vp-shell-frame {
    background: #fff;
    border: 1px solid #333;
    border-radius: 18px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
    max-height: calc(100vh - 92px);
    transition: width 0.25s ease, height 0.25s ease;
}


/* ───────────────────────────────────────────────────────────────────
   2. TABLET (max-width: 1024px)
   ─────────────────────────────────────────────────────────────────── */

@media (max-width: 1024px) {

    .container,
    .header-inner,
    .nav-inner,
    .subscribe-bar-inner {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    /* Nav: si tiene muchos items, reducir tamaño de fuente */
    .nav-links a { font-size: 0.62rem !important; padding: 12px 10px !important; letter-spacing: 1px !important; }

    /* Portada principal: stack image grande + 2 col secundarias */
    .portada-grid {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
    }
    .main-article {
        padding-right: 0 !important;
        border-right: none !important;
        padding-bottom: 32px;
        border-bottom: 1px solid rgba(0,0,0,0.10);
    }
    .secondary-col {
        padding-left: 0 !important;
        grid-template-columns: 1fr 1fr !important;
    }

    /* Dest strip: 5→4 cards */
    .dest-row { grid-template-columns: repeat(4, 1fr) !important; }

    /* Politics, opinion, podcast → reducir columnas */
    .politics-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .opinion-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .podcast-grid { grid-template-columns: repeat(3, 1fr) !important; }

    /* Eco layout */
    .eco-layout { grid-template-columns: 1fr !important; gap: 24px !important; }

    /* Último Pase */
    .scoreboard { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
    .up-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; }

    /* Stereo mosaic */
    .stereo-mosaic { grid-template-columns: 1fr !important; }
    .stereo-side { grid-template-columns: 1fr 1fr; grid-template-rows: none !important; }
    .stereo-card.hero { height: 380px !important; }
    .stereo-card.med, .stereo-card.small { height: 240px !important; }
    .stereo-row { grid-template-columns: repeat(2, 1fr) !important; }

    /* Tables & finales */
    .tables-grid { grid-template-columns: 1fr !important; gap: 24px !important; }

    /* Footer */
    .footer-top { grid-template-columns: 1fr 1fr !important; gap: 32px !important; }
}


/* ───────────────────────────────────────────────────────────────────
   3. MOBILE (max-width: 768px)
   ─────────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {

    /* Container: reducir padding */
    .container,
    .header-inner,
    .nav-inner,
    .subscribe-bar-inner { padding-left: 16px !important; padding-right: 16px !important; }

    /* Header: más compacto */
    .header-inner { height: 60px !important; }
    .logo-container img { height: 44px !important; }

    /* Botones header: solo hamburger + logo + search (esconder perfil) */
    .header-right .btn-icon[aria-label="Perfil"] { display: none; }

    /* Ticker más chico */
    .ticker-bar { height: 28px !important; }
    .ticker-label { font-size: 0.5rem !important; padding: 0 12px !important; letter-spacing: 1.5px !important; }
    .ticker-content { font-size: 0.65rem !important; gap: 36px !important; }

    /* Nav top: OCULTAR — usar solo hamburger drawer */
    .nav-bar { display: none !important; }

    /* Subscribe bar: minimalista — solo la fecha centrada */
    .subscribe-bar { padding: 6px 16px !important; }
    .subscribe-bar-inner {
        flex-direction: row !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 0 !important;
        padding: 0 !important;
    }
    .subscribe-date {
        font-size: 0.68rem !important;
        text-align: center;
        width: 100%;
    }
    .subscribe-bar .btn-subscribe { display: none !important; }

    /* Header: esconder ícono de buscar y de perfil, mostrar mini-suscribir */
    .btn-search { display: none !important; }
    .header-right .btn-icon[aria-label="Mi cuenta"],
    .header-right .btn-icon[aria-label="Perfil"] { display: none !important; }
    .btn-subscribe-mini { display: inline-flex !important; align-items: center; }

    /* Search field dentro del drawer un poco más prominente en mobile */
    .menu-search { padding: 12px 14px !important; margin-top: 14px !important; }
    .menu-search input { font-size: 0.92rem !important; }

    /* Section headers compactos */
    .section-header { margin: 48px 0 24px 0 !important; gap: 12px !important; }
    .section-header h2 { font-size: 1.05rem !important; letter-spacing: 1.5px !important; white-space: normal !important; }
    .section-header .tag-section svg { width: 22px !important; height: 22px !important; }

    /* Sponsor header: stack — presented-by debajo */
    .sponsor-header {
        flex-wrap: wrap !important;
        gap: 10px 12px !important;
        margin: 48px 0 24px 0 !important;
    }
    .sponsor-header h2 { font-size: 1.05rem !important; letter-spacing: 1.5px !important; white-space: normal !important; flex: 1 1 auto; }
    .sponsor-header-line { display: none !important; }
    .presented-by { flex: 1 1 100%; justify-content: flex-start; padding-top: 8px; border-top: 1px solid rgba(0,0,0,0.06); }

    /* ═══ PORTADA ═══ */
    .portada { padding: 24px 0 0 0 !important; }
    .portada-grid { grid-template-columns: 1fr !important; gap: 28px !important; padding-bottom: 28px !important; }
    .main-article { padding-right: 0 !important; border-right: none !important; }
    .main-img { height: 240px !important; margin-bottom: 16px !important; }
    .main-article h1 { font-size: 1.8rem !important; line-height: 1.1 !important; letter-spacing: -0.5px !important; }
    .main-article .deck { font-size: 0.88rem !important; padding-left: 12px !important; }

    .secondary-col { padding-left: 0 !important; grid-template-columns: 1fr !important; gap: 20px !important; }
    .sec-col-header { padding-bottom: 8px !important; }
    .sec-img { height: 180px !important; }
    .sec-article h3 { font-size: 1rem !important; }

    /* Dest strip → carrusel horizontal */
    .dest-strip-wrap { overflow: hidden; position: relative; }
    .dest-row {
        display: flex !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 10px !important;
        padding-bottom: 4px !important;
        scrollbar-width: none !important;
        grid-template-columns: none !important;
    }
    .dest-row::-webkit-scrollbar { display: none !important; }
    .dest-card {
        flex: 0 0 70% !important;
        scroll-snap-align: start !important;
        aspect-ratio: 4/3 !important;
        border-radius: 8px !important;
        overflow: hidden !important;
    }
    .dest-card h4 { font-size: 0.78rem !important; }
    .dest-strip-label { padding: 12px 0 !important; }
    .dest-dots { display: flex !important; justify-content: center; gap: 6px; padding: 12px 0 4px; }

    /* Politics grid → 1 col */
    .politics-grid { grid-template-columns: 1fr !important; gap: 18px !important; }
    .politics-card img { height: 200px !important; }
    .politics-card-body { padding: 16px !important; }
    .politics-card h3 { font-size: 1.1rem !important; }

    /* Opinion → 1 col */
    .opinion-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
    .opinion-section { padding: 40px 0 !important; margin-top: 60px !important; }
    .opinion-item { padding: 18px !important; }

    /* Económica / indicadores */
    .eco-layout { grid-template-columns: 1fr !important; gap: 24px !important; }
    .eco-main-card { height: 280px !important; }
    .eco-overlay h2 { font-size: 1.4rem !important; }
    .eco-overlay { padding: 20px !important; }

    /* Indicadores (zona económica): grid 2×N — ajuste de tamaño */
    .indicadores-panel { padding: 16px !important; margin-bottom: 28px !important; }
    .indicadores-grid,
    .indicators-grid { grid-template-columns: 1fr 1fr !important; }
    .indicador-card { padding: 14px 12px !important; min-width: 0 !important; gap: 6px !important; }
    .indicador-label { font-size: 0.5rem !important; letter-spacing: 1.8px !important; }
    .indicador-row { gap: 6px !important; flex-wrap: wrap !important; }
    .indicador-value {
        font-size: 1rem !important;
        letter-spacing: -0.3px !important;
        word-break: break-word !important;
        min-width: 0 !important;
    }
    .indicador-arrow { font-size: 0.78rem !important; }

    /* ═══ ÚLTIMO PASE ═══ */
    .up-wrapper { padding: 140px 0 150px 0 !important; margin: 30px 0 !important; }
    .up-wrapper::before,
    .up-wrapper::after { height: 140px !important; }
    .up-title { font-size: 2.2rem !important; margin-bottom: 30px !important; }
    .scoreboard {
        grid-template-columns: 1fr 1fr !important;
        gap: 6px !important;
        padding: 12px !important;
        margin-bottom: 30px !important;
    }
    .match-card { padding: 12px !important; gap: 6px !important; }
    .match-teams { font-size: 0.7rem !important; }
    .match-score { font-size: 1.2rem !important; gap: 8px !important; }
    /* ═══ ÚLTIMO PASE — MOBILE CAROUSEL ═══ */
    .up-news-all { display: block !important; }
    .up-featured { display: block !important; margin-bottom: 18px !important; }
    .up-carousel-wrap { display: block !important; }

    /* Móvil: una columna limpia (el carrusel flex encogía las tarjetas en ciertos zoom/escalados) */
    .up-grid-wrap { overflow: visible !important; position: relative !important; }
    .up-grid-wrap > .up-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        overflow: visible !important;
        gap: 12px !important;
    }
    .up-grid-wrap > .up-grid > .up-item {
        width: auto !important;
        min-width: 0 !important;
        border-radius: 10px !important;
        overflow: hidden !important;
    }
    .up-featured .up-item { background: #111 !important; border-radius: 10px !important; overflow: hidden !important; }
    .up-featured .up-item img { height: 220px !important; }
    .up-featured .up-content { padding: 16px !important; }
    .up-featured .up-content h3 { font-size: 1.15rem !important; }

    .up-carousel-wrap { overflow: hidden !important; position: relative !important; }
    .up-carousel-track {
        display: flex !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 14px !important;
        padding-bottom: 8px !important;
        scrollbar-width: none !important;
    }
    .up-carousel-track::-webkit-scrollbar { display: none !important; }
    .up-carousel-track .up-item {
        flex: 0 0 82% !important;
        scroll-snap-align: start !important;
        background: #111 !important;
        border-radius: 10px !important;
        overflow: hidden !important;
    }
    .up-carousel-track .up-item img { height: 180px !important; }
    .up-carousel-track .up-content { padding: 14px !important; }
    .up-carousel-track .up-content h3 { font-size: 0.95rem !important; }

    .carousel-dots { display: flex !important; justify-content: center; gap: 6px; padding: 14px 0 4px; }
    .carousel-dot {
        width: 7px; height: 7px; border-radius: 50%;
        background: rgba(255,255,255,0.25); border: none; padding: 0; cursor: pointer;
        transition: background 0.3s, transform 0.3s;
    }
    .carousel-dot.active { background: rgba(255,255,255,0.85); transform: scale(1.3); }
    .stereo-dots .carousel-dot { background: rgba(0,0,0,0.15); }
    .stereo-dots .carousel-dot.active { background: rgba(0,0,0,0.6); }

    /* Tablas (último pase página) */
    .tables-grid { grid-template-columns: 1fr !important; gap: 18px !important; }
    .stand-table th, .stand-table td { font-size: 0.6rem !important; padding: 8px 4px !important; }
    .stand-table th.team, .stand-table td.team { padding-left: 10px !important; }
    .stand-table td.pts { font-size: 0.72rem !important; }

    /* Agenda deportiva / cultural / agenda items */
    .agenda-item,
    .stereo-agenda-item {
        grid-template-columns: 1fr !important;
        gap: 6px !important;
        padding: 14px 16px !important;
    }
    .agenda-date,
    .stereo-agenda-date { font-size: 0.68rem !important; }
    .agenda-name,
    .stereo-agenda-name { font-size: 0.85rem !important; }
    .agenda-location,
    .stereo-agenda-venue { font-size: 0.66rem !important; }
    .agenda-tag,
    .stereo-agenda-cat { margin-top: 4px; }

    /* Podcast grid */
    .podcast-grid { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
    .podcast-img { height: 110px !important; }
    .podcast-body { padding: 22px 12px 14px !important; }
    .podcast-body h4 { font-size: 0.78rem !important; }

    /* ═══ STEREO — MOBILE CAROUSEL ═══ */
    .stereo-cats { gap: 16px !important; padding-bottom: 12px !important; flex-wrap: wrap; }
    .stereo-cat { font-size: 0.54rem !important; letter-spacing: 1.5px !important; }

    .stereo-mosaic { display: block !important; }
    .stereo-card.hero { height: 280px !important; border-radius: 10px !important; }
    .stereo-card.hero .stereo-info { padding: 18px !important; }
    .stereo-card.hero h4 { font-size: 1.2rem !important; }
    .stereo-side { display: none !important; }

    .stereo-carousel-section { display: block !important; overflow: hidden; position: relative; margin-top: 12px; }
    .stereo-carousel-track {
        display: flex !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 12px !important;
        padding-bottom: 6px !important;
        scrollbar-width: none !important;
    }
    .stereo-carousel-track::-webkit-scrollbar { display: none !important; }
    .stereo-carousel-track .stereo-card.small {
        flex: 0 0 78% !important;
        scroll-snap-align: start !important;
        border-radius: 10px !important;
        height: 240px !important;
    }
    .stereo-carousel-track .stereo-card.small.mobile-only { display: block !important; }

    /* ═══ AD BANNER ═══ */
    .ad-banner { padding: 14px 0 !important; }
    .ad-placeholder { height: 70px !important; padding: 0 12px !important; }
    .ad-cta-text { font-size: 0.55rem !important; letter-spacing: 1.5px !important; }
    .ad-cta-dim { display: none !important; }

    /* ═══ SPONSORS ═══ */
    .sponsors-bar { padding: 28px 0 !important; }
    .sponsor-item { padding: 0 24px !important; }

    /* ═══ FOOTER ═══ */
    footer { padding: 48px 0 24px !important; margin-top: 60px !important; }
    .footer-top {
        grid-template-columns: 1fr 1fr !important;
        gap: 26px 22px !important;
        padding-bottom: 28px !important;
        margin-bottom: 22px !important;
    }
    .footer-col h4 { font-size: 0.62rem !important; }
    .footer-col ul li { font-size: 0.78rem !important; }
    .footer-col p { font-size: 0.74rem !important; }
    .footer-col img { height: 44px !important; margin-bottom: 14px !important; }
    .footer-input { font-size: 0.78rem !important; padding: 10px 12px !important; }
    .footer-btn { font-size: 0.68rem !important; padding: 10px 14px !important; }
    .footer-bottom { flex-direction: column !important; gap: 14px !important; text-align: center; }

    /* ═══ POPUPS ═══ */
    .popup-modal { padding: 38px 28px 32px !important; max-width: 92vw !important; }
    .popup-title { font-size: 1.55rem !important; }
    .popup-desc { font-size: 0.78rem !important; }
    .adpop-modal { padding: 32px 22px 26px !important; max-width: 94vw !important; }
    .adpop-title { font-size: 1.35rem !important; }
    .adpop-row { grid-template-columns: 1fr !important; }

    /* ═══ DRAWER MENU ═══ */
    .menu-drawer { width: 100% !important; max-width: 100vw !important; padding: 22px 24px 28px !important; }
    .menu-nav a { font-size: 1.15rem !important; }

    /* ═══ HEROS DE PÁGINAS ESPECÍFICAS ═══ */
    /* BDR hero / Radio Patagónica live-hero — más compactos */
    .show-hero,
    .live-hero { min-height: 70vh !important; height: auto !important; padding-bottom: 36px; }
    .hero-show-block { grid-template-columns: 1fr !important; gap: 20px !important; }
    .host-portrait { width: 100px !important; height: 140px !important; }
    .hero-title { font-size: 1.7rem !important; }
    .hero-desc { font-size: 0.85rem !important; }
    .hero-actions { flex-direction: row !important; align-items: stretch !important; flex-wrap: wrap; }
    .btn-primary, .btn-secondary { flex: 1 1 auto; justify-content: center; padding: 12px 18px !important; }

    /* YouTube Live (BDR) */
    .yt-inner { grid-template-columns: 1fr !important; gap: 20px !important; padding: 24px 16px !important; }
    .yt-sidebar { padding-top: 12px !important; }

    /* Featured layout (último pase página) */
    .featured-layout { grid-template-columns: 1fr !important; gap: 6px !important; }
    .featured-card { height: 320px !important; }
    .featured-overlay h2 { font-size: 1.4rem !important; }

    /* Hero section ultimo-pase página */
    .hero-section { padding: 50px 0 60px !important; }
    .pitch-bg { width: 600px !important; height: 400px !important; }

    /* Nota / artículo */
    .article-wrapper { grid-template-columns: 1fr !important; gap: 28px !important; padding: 32px 16px !important; }
    .article-main h1 { font-size: 1.8rem !important; }
}


/* ───────────────────────────────────────────────────────────────────
   4. MOBILE PEQUEÑO (max-width: 480px)
   ─────────────────────────────────────────────────────────────────── */

@media (max-width: 480px) {
    .main-article h1 { font-size: 1.5rem !important; }
    .up-title { font-size: 1.8rem !important; }
    .scoreboard { grid-template-columns: 1fr !important; }
    .podcast-grid { grid-template-columns: 1fr !important; }
    /* Indicadores: mantener 2 cols para no perder densidad — valor en línea separada */
    .indicadores-grid,
    .indicators-grid { grid-template-columns: 1fr 1fr !important; }
    .indicador-card { padding: 12px 10px !important; }
    .indicador-value { font-size: 0.92rem !important; }
    .indicador-row { flex-direction: row !important; align-items: center !important; }
    .stereo-side { grid-template-rows: 1fr 1fr; gap: 4px !important; }
    .ticker-content { font-size: 0.58rem !important; }
}


/* ───────────────────────────────────────────────────────────────────
   8. SECTION PAGE LAYOUTS — fixes mobile (zona-economica, zona-politica,
      zona-vision, zona-estereo, bdr, radio-patagonica)
   ─────────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {

    /* ═══ HERO de páginas de sección (econ/política) ═══
       Imagen arriba a ancho completo, texto debajo */
    .hero-grid {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
        padding: 22px 0 32px !important;
    }
    .hero-img-col { order: -1 !important; margin-bottom: 18px; }
    .hero-img-col img { height: 240px !important; }
    .hero-text-col {
        padding: 0 !important;
    }
    .hero-text-col h1 {
        font-size: 1.7rem !important;
        line-height: 1.1 !important;
        letter-spacing: -0.8px !important;
        margin-bottom: 14px !important;
    }
    .hero-text-col .deck {
        font-size: 0.88rem !important;
        line-height: 1.55 !important;
        padding-left: 12px !important;
        margin-bottom: 16px !important;
    }
    .hero-meta { flex-wrap: wrap !important; gap: 8px !important; }
    .hero-cat { font-size: 0.56rem !important; }
    .hero-byline { font-size: 0.7rem !important; }

    /* ═══ ANÁLISIS (zona-politica usa formato 280px+1fr horizontal) ═══
       Convertir a vertical: imagen arriba ancho completo, texto debajo */
    .analysis-grid {
        grid-template-columns: 1fr !important;
        gap: 22px !important;
    }
    .analysis-card {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
    }
    .analysis-card-img,
    .analysis-card > img {
        width: 100% !important;
        height: 220px !important;
        min-height: 0 !important;
        object-fit: cover !important;
    }
    .analysis-card-body {
        padding: 18px 18px 20px !important;
    }
    .analysis-card h3 {
        font-size: 1.15rem !important;
        line-height: 1.2 !important;
        margin: 6px 0 10px !important;
    }
    .analysis-card .excerpt {
        font-size: 0.82rem !important;
        line-height: 1.55 !important;
    }
    .analysis-meta {
        font-size: 0.66rem !important;
        gap: 8px !important;
    }

    /* ═══ COLUMNISTA (zona-vision) ═══
       Foto arriba, quote+nombre debajo, sin border-left */
    .columnist-band { padding: 38px 0 !important; }
    .columnist-inner {
        grid-template-columns: 1fr !important;
        gap: 22px !important;
    }
    .columnist-profile-col {
        order: -1 !important;
        border-left: none !important;
        padding-left: 0 !important;
        gap: 10px !important;
        padding-bottom: 22px;
        border-bottom: 1px solid var(--c-border);
    }
    .columnist-portrait {
        width: 100px !important;
        height: 100px !important;
    }
    .columnist-name { font-size: 1.1rem !important; }
    .columnist-bio { font-size: 0.74rem !important; }
    .columnist-quote {
        font-size: 1.3rem !important;
        line-height: 1.25 !important;
    }
    .columnist-quote-mark {
        font-size: 4rem !important;
    }

    /* ═══ OPINIÓN (zona-vision opinion-grid) ═══
       Ya está en 1 col al 480, pero también a 768 */
    .opinion-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    .opinion-item { padding: 18px !important; }
    .opinion-quote { font-size: 0.92rem !important; line-height: 1.45 !important; }

    /* ═══ ZONA ESTÉREO PÁGINA — agenda items vertical ═══ */
    .stereo-grid { grid-template-columns: 1fr !important; gap: 2px !important; }

    /* ═══ BDR — secciones internas ═══ */
    .yt-inner {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        padding: 24px 18px !important;
    }
    .temas-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    .ep-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
    }
    .sobre-inner {
        grid-template-columns: 1fr !important;
        gap: 28px !important;
    }
    .formats-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    /* ═══ RADIO PATAGÓNICA — secciones internas ═══ */
    .shows-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
    }
    .historia-inner {
        grid-template-columns: 1fr !important;
        gap: 36px !important;
    }
    .historia-stats {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 12px !important;
    }

    /* ─── RADIO PATAGÓNICA: live-hero re-flow mobile ─── */
    .live-hero { padding: 90px 0 40px !important; min-height: auto !important; }
    .live-hero-content { padding: 0 18px !important; max-width: 100% !important; }

    /* Top bar: subbrand a la izquierda, badge a la derecha, ambos chicos */
    .live-hero-topbar {
        position: absolute !important;
        top: 14px !important;
        left: 14px !important;
        right: 14px !important;
        align-items: center !important;
        gap: 8px !important;
        flex-wrap: nowrap !important;
    }
    .subbrand-pill {
        font-size: 0.46rem !important;
        letter-spacing: 1.2px !important;
        flex: 0 1 auto !important;
        min-width: 0 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    .subbrand-pill .sep { display: none !important; }
    .subbrand-pill a:first-child { display: none !important; }
    .on-air-badge {
        padding: 4px 9px !important;
        flex-shrink: 0 !important;
        gap: 5px !important;
    }
    .on-air-badge span { font-size: 0.5rem !important; letter-spacing: 1.6px !important; white-space: nowrap; }
    .on-air-dot { width: 6px !important; height: 6px !important; }

    /* Station ID: en el flujo, centrado */
    .station-id {
        position: static !important;
        transform: none !important;
        margin: 0 0 28px !important;
        align-self: center !important;
    }
    .station-id img { height: 44px !important; }
    .station-id .freq { font-size: 0.58rem !important; letter-spacing: 2.5px !important; }
    .live-hero-bg, .live-hero-overlay { display: none !important; }

    /* ─── RADIO PATAGÓNICA: schedule (parrilla) mobile ─── */
    .schedule-section { padding: 0 !important; }
    .schedule-inner { padding: 40px 18px 50px !important; }
    .schedule-header { flex-direction: column; align-items: flex-start !important; gap: 6px !important; margin-bottom: 24px !important; padding-bottom: 16px !important; }
    .schedule-title { font-size: 1.15rem !important; }
    .schedule-date { font-size: 0.58rem !important; letter-spacing: 1.2px !important; }
    .schedule-item {
        grid-template-columns: 56px 1fr !important;
        gap: 14px !important;
        padding: 14px 0 !important;
        border-bottom: 1px solid rgba(255,255,255,0.08);
    }
    .schedule-item-time { padding: 0 !important; font-size: 0.72rem !important; justify-content: flex-start !important; padding-top: 4px !important; }
    .schedule-line-col { display: none !important; }
    .schedule-item-body {
        padding: 0 !important;
        border-bottom: none !important;
        gap: 12px !important;
        flex-wrap: wrap !important;
    }
    .schedule-show-img { width: 56px !important; height: 40px !important; }
    .schedule-show-info { min-width: 0 !important; flex: 1 1 60% !important; }
    .schedule-show-name { font-size: 0.88rem !important; }
    .schedule-show-sub { font-size: 0.58rem !important; }
    .schedule-show-cat { font-size: 0.48rem !important; letter-spacing: 1.4px !important; }
    .schedule-item-badge { padding: 0 !important; align-self: flex-start; }
    .now-label, .past-label, .next-label { font-size: 0.46rem !important; padding-top: 0 !important; }

    /* ─── RADIO PATAGÓNICA: shows-grid (programas) mobile ─── */
    .shows-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        padding: 0 18px !important;
    }
    .show-card { min-width: 0 !important; }
    .show-overlay { padding: 14px !important; }
    .show-overlay h3,
    .show-overlay h4,
    .show-overlay .show-title { font-size: 1.05rem !important; }
    .show-overlay .show-sub,
    .show-overlay .show-meta { font-size: 0.6rem !important; }

    /* ─── RADIO PATAGÓNICA: APES section mobile ─── */
    .apes-section {
        grid-template-columns: 1fr !important;
        margin-top: 40px !important;
    }
    .apes-left { padding: 40px 22px !important; }
    .apes-title { font-size: 2rem !important; letter-spacing: -0.5px !important; }
    .apes-body { font-size: 0.85rem !important; max-width: 100% !important; }
    .apes-right { min-height: 220px !important; order: -1; }

    /* ─── RADIO PATAGÓNICA: historia section mobile ya está en global ─── */

    /* Current show: stack vertical (artwork arriba, info, controls) */
    .current-show {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        align-items: stretch !important;
    }
    .show-artwork {
        width: 100% !important;
        height: 220px !important;
    }
    .show-program { font-size: 0.54rem !important; margin-bottom: 6px !important; }
    .show-track { font-size: 1.5rem !important; line-height: 1.05 !important; letter-spacing: -0.3px !important; }
    .show-artist { font-size: 0.82rem !important; }
    .player-controls { align-items: stretch !important; gap: 12px !important; flex-direction: row !important; justify-content: space-between !important; }
    .vu-meter { height: 32px !important; }
    .vu-meter .vu-bar { width: 3px !important; }
    .play-btn-big,
    .play-button-large,
    .player-play { width: 56px !important; height: 56px !important; min-width: 56px !important; }
}

@media (max-width: 480px) {
    /* Hero más compacto en mobile pequeño */
    .hero-text-col h1 { font-size: 1.5rem !important; }
    .hero-img-col img { height: 210px !important; }

    /* Análisis card más compacta */
    .analysis-card-img,
    .analysis-card > img { height: 190px !important; }
    .analysis-card h3 { font-size: 1.05rem !important; }

    /* Columnista quote más chica */
    .columnist-quote { font-size: 1.15rem !important; }
    .columnist-portrait { width: 88px !important; height: 88px !important; }

    /* BDR / Radio Patagónica — episodios y shows en 1 col */
    .ep-grid { grid-template-columns: 1fr !important; }
    .shows-grid { grid-template-columns: 1fr !important; }
    .historia-stats { grid-template-columns: 1fr 1fr !important; }
}

/* ───────────────────────────────────────────────────────────────────
   DARK MODE — tarjetas claras (login, registro, donar) legibles.
   En modo oscuro las reglas globales aclaran el texto y oscurecen los
   inputs; estas tarjetas son blancas a propósito, así que las mantenemos
   como "isla clara" (texto oscuro + inputs claros).
   ─────────────────────────────────────────────────────────────────── */
html.theme-dark .auth-box,
html.theme-dark .donar-box {
    background: #ffffff !important;
    color: #111111 !important;
}
html.theme-dark .auth-box h1,
html.theme-dark .donar-box h1,
html.theme-dark .donar-box h2 { color: #111111 !important; }
html.theme-dark .donar-box .donar-eyebrow { color: #7a0000 !important; }
html.theme-dark .auth-sub,
html.theme-dark .auth-alt,
html.theme-dark .auth-fine,
html.theme-dark .auth-consent,
html.theme-dark .donar-box .donar-intro,
html.theme-dark .donar-fine { color: #6b6b6b !important; }
html.theme-dark .auth-box label,
html.theme-dark .donar-box .donar-label { color: #6b6b6b !important; }
html.theme-dark .auth-box input,
html.theme-dark .auth-box select,
html.theme-dark .donar-box input,
html.theme-dark .donar-box textarea {
    background: #ffffff !important;
    color: #111111 !important;
    border-color: rgba(0,0,0,0.18) !important;
}
html.theme-dark .auth-box input::placeholder,
html.theme-dark .donar-box input::placeholder { color: #9b9b9b !important; }
html.theme-dark .donar-box .donar-monto-btn { background: #faf8f4 !important; color: #111 !important; border-color: rgba(0,0,0,0.15) !important; }
html.theme-dark .donar-box .donar-monto-btn.activo { border-color: #7a0000 !important; color: #7a0000 !important; }
html.theme-dark .auth-box a,
html.theme-dark .donar-box a { color: #7a0000 !important; }

/* Más tarjetas/inputs claros legibles en dark mode: premium, publicidad, eliminar cuenta */
html.theme-dark .premium-form input,
html.theme-dark .pub-field input,
html.theme-dark .pub-field select,
html.theme-dark .pub-field textarea,
html.theme-dark .del-box input {
    background: #ffffff !important;
    color: #111111 !important;
    border-color: rgba(0,0,0,0.2) !important;
}
html.theme-dark .premium-form input::placeholder,
html.theme-dark .pub-field input::placeholder { color: #9b9b9b !important; }
html.theme-dark .pub-card,
html.theme-dark .del-box,
html.theme-dark .plan-card { background: #ffffff !important; color: #333333 !important; }
html.theme-dark .pub-card h1, html.theme-dark .pub-card h2, html.theme-dark .pub-card h3, html.theme-dark .pub-card label,
html.theme-dark .del-box h1, html.theme-dark .del-box h2, html.theme-dark .del-box p,
html.theme-dark .plan-card h2, html.theme-dark .plan-card h3 { color: #111111 !important; }

/* Modal de compra de avisos (#zzAdModal): isla clara legible en dark mode */
html.theme-dark #zzAdModal h1,
html.theme-dark #zzAdModal h2,
html.theme-dark #zzAdModal h3,
html.theme-dark #zzAdModal label,
html.theme-dark #zzAdModal strong { color: #111111 !important; }
html.theme-dark #zzAdModal input,
html.theme-dark #zzAdModal select,
html.theme-dark #zzAdModal textarea {
    background: #ffffff !important;
    color: #111111 !important;
    border-color: rgba(0,0,0,0.18) !important;
}
html.theme-dark #zzAdModal input::placeholder { color: #9b9b9b !important; }