/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */
:root {
    /* Color — paleta "Clásica" del logo Valle del Sol Noticias (dorado + azul marino) */
    --color-primary: #ffb703;
    --color-primary-light: #d6a552;
    --color-primary-dark: #96691f;
    --color-secondary: #1b2a4a;   /* azul marino profundo, superficies oscuras */
    --color-secondary-2: #26395f; /* variante un poco más clara para degradés */
    --color-accent: #ffb703;      /* dorado cálido, contraste "on air" */
    --color-accent-dark: #e29d00;

    /* Neutros con tinte azul marino (no gris puro) */
    --n-50:  #f6f7fa;
    --n-100: #eceef3;
    --n-200: #d6dae5;
    --n-300: #b3bacc;
    --n-400: #8891a8;
    --n-500: #64708a;
    --n-600: #4a5570;
    --n-700: #333d56;
    --n-800: #212a42;
    --n-900: #13192b;

    /* Superficies / texto (light mode) */
    --color-bg: var(--n-50);
    --color-surface: #ffffff;
    --color-text: var(--n-900);
    --color-text-muted: var(--n-500);
    --color-border: var(--n-200);

    /* Alias retrocompatibles usados en componentes existentes */
    --lm-dark: var(--color-secondary);
    --lm-dark-2: var(--color-secondary-2);
    --lm-accent: var(--color-primary);
    --lm-accent-2: var(--color-primary-light);
    --lm-text-muted: var(--color-text-muted);
    --lm-bg: var(--color-bg);

    /* Tipografía — Libre Franklin (títulos) + Inter (texto), variable fonts */
    --font-heading: 'Libre Franklin', system-ui, sans-serif;
    --font-body: 'Inter', system-ui, sans-serif;

    /* Escala modular (ratio 1.25, base 16px) */
    --fs-100: 0.8rem;     /* 12.8px – meta / small print */
    --fs-200: 1rem;       /* 16px   – body */
    --fs-300: 1.25rem;    /* 20px   – lead / h6 */
    --fs-400: 1.563rem;   /* 25px   – h5 */
    --fs-500: 1.953rem;   /* 31px   – h4 */
    --fs-600: 2.441rem;   /* 39px   – h3 / h2 */
    --fs-700: 3.052rem;   /* 49px   – h1 / hero */

    --lh-tight: 1.15;
    --lh-snug: 1.35;
    --lh-normal: 1.6;
    --lh-relaxed: 1.7;

    --ls-tight: -0.03em;
    --ls-snug: -0.015em;

    /* Espaciado — escala de 8px */
    --sp-1: 0.5rem;   /* 8px */
    --sp-2: 1rem;     /* 16px */
    --sp-3: 1.5rem;   /* 24px */
    --sp-4: 2rem;     /* 32px */
    --sp-6: 3rem;     /* 48px */
    --sp-8: 4rem;     /* 64px */
    --sp-12: 6rem;    /* 96px */
    --sp-section: clamp(5rem, 8vw, 7.5rem); /* 80–120px */

    /* Radios */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-pill: 999px;
    --radius-btn: 60px;

    /* Sombras suaves multicapa */
    --shadow-sm: 0 1px 2px rgba(23,15,31,.04), 0 2px 6px rgba(23,15,31,.05);
    --shadow-md: 0 2px 4px rgba(23,15,31,.04), 0 10px 26px rgba(23,15,31,.08);
    --shadow-lg: 0 4px 10px rgba(23,15,31,.06), 0 20px 48px rgba(23,15,31,.12);
    --shadow-hover: 0 8px 18px rgba(23,15,31,.07), 0 24px 56px rgba(192,138,52,.16);

    /* Gradientes de marca */
    --grad-accent: linear-gradient(135deg, #ffd166 0%, var(--color-primary) 55%, var(--color-accent-dark) 100%);
    --grad-dark: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-secondary-2) 100%);
    --grad-mesh: radial-gradient(circle at 15% 20%, rgba(255,183,3,.16), transparent 45%), radial-gradient(circle at 85% 0%, rgba(38,57,95,.35), transparent 55%);
}

/* Dark mode: mismos tokens, remapeados. El atributo data-theme lo fija main.js
   al vuelo (localStorage o preferencia del SO) antes del primer paint. */
html[data-theme="dark"] {
    --color-bg: var(--n-900);
    --color-surface: var(--n-800);
    --color-text: var(--n-100);
    --color-text-muted: var(--n-400);
    --color-border: var(--n-700);
    --color-primary: var(--color-primary-light);
    --shadow-sm: 0 1px 2px rgba(0,0,0,.3), 0 2px 6px rgba(0,0,0,.25);
    --shadow-md: 0 2px 4px rgba(0,0,0,.3), 0 10px 26px rgba(0,0,0,.35);
    --shadow-lg: 0 4px 10px rgba(0,0,0,.35), 0 20px 48px rgba(0,0,0,.45);
}
html[data-theme="dark"] body { background-color: var(--color-bg); color: var(--color-text); }
html[data-theme="dark"] body.page-noticia,
html[data-theme="dark"] .main-navbar { background-color: var(--color-surface); }
html[data-theme="dark"] .news-card,
html[data-theme="dark"] .sidebar-card { background: var(--color-surface); }
html[data-theme="dark"] .news-card h3,
html[data-theme="dark"] .trending-item h4 { color: var(--color-text); }
html[data-theme="dark"] .main-navbar .nav-link { color: var(--n-100); }
html[data-theme="dark"] .main-footer { background: var(--n-800); color: rgba(255,255,255,.75); }
html[data-theme="dark"] .footer-links a,
html[data-theme="dark"] .footer-links li,
html[data-theme="dark"] .main-footer .text-muted-light { color: rgba(255,255,255,.65); }

/* ==========================================================================
   2. BASE / TIPOGRAFÍA
   ========================================================================== */
html {
    overflow-x: clip;
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 2px;
    border-radius: 4px;
}

.skip-link {
    position: absolute;
    top: -100%;
    left: var(--sp-2);
    z-index: 2000;
    background: var(--color-secondary);
    color: #fff;
    padding: .6em 1.2em;
    border-radius: var(--radius-sm);
    text-decoration: none;
    font-weight: 700;
    transition: top .2s ease;
}
.skip-link:focus {
    top: var(--sp-2);
    color: #fff;
}

body {
    font-family: var(--font-body);
    background-color: var(--color-bg);
    color: var(--color-text);
    line-height: var(--lh-normal);
    overflow-x: clip;
}
body.page-noticia {
    background-color: #fff;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 600;
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-snug);
}
h1 { font-size: var(--fs-700); letter-spacing: var(--ls-tight); }
h2 { font-size: var(--fs-600); letter-spacing: var(--ls-tight); }
h3 { font-size: var(--fs-500); }
h4 { font-size: var(--fs-400); }
h5 { font-size: var(--fs-300); }
h6 { font-size: var(--fs-200); }

p {
    line-height: var(--lh-relaxed);
}

.text-accent { color: var(--color-primary); }
.fw-700 { font-weight: 700; }
.fw-800 { font-weight: 800; }
.text-muted-light { color: rgba(255,255,255,.65); }
.section-py { padding-top: 40px; padding-bottom: var(--sp-section); }

.main-overlap-hero {
    position: relative;
    z-index: 5;
    margin-top: 0;
    background: var(--color-surface);
    /* padding: definido mobile-first en la sección 13 */
}

/* ==========================================================================
   3. HEADER / TOPBAR / NAVBAR
   ========================================================================== */
.site-header {
    z-index: 1030;
    position: sticky;
    top: 0;
    transition: box-shadow .35s ease;
}
.site-header.is-scrolled .main-navbar {
    box-shadow: var(--shadow-md);
    background: rgba(255,255,255,.85);
    backdrop-filter: blur(10px) saturate(160%);
    -webkit-backdrop-filter: blur(10px) saturate(160%);
}
html[data-theme="dark"] .site-header.is-scrolled .main-navbar {
    background: rgba(19,25,43,.85);
}
.site-header.is-scrolled .main-navbar .nav-link {
    color: #24375b;
}

.bloque-ultimas {
    background: linear-gradient(135deg, var(--color-secondary), var(--color-secondary-2));
}

.topbar {
    background: #223457;
    color: rgba(255,255,255,.7);
    padding: 4px 0;
    transition: max-height .3s ease, opacity .3s ease, padding .3s ease;
}
.topbar-link {
    color: #fff;
    transition: color .15s ease;
    font-size: 15px;
}
.topbar-link:hover { color: var(--color-primary-light); }

.topbar-rotator {
    position: relative;
    height: 1.4em;
    display: flex;
    align-items: center;
    gap: .5rem;
    overflow: hidden;
}
.topbar-rotator-item {
    position: absolute;
    left: 0;
    top: 0;
    white-space: nowrap;
    opacity: 0;
    transform: translateY(60%) scale(.94);
    filter: blur(2px);
    transition: opacity .5s cubic-bezier(.22,1,.36,1), transform .5s cubic-bezier(.22,1,.36,1), filter .5s ease;
    pointer-events: none;
}
.topbar-rotator-item.is-active {
    position: relative;
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
    pointer-events: auto;
}
.topbar-rotator-slogan {
    color: #fff;
    font-weight: 700;
    letter-spacing: .01em;
}
.topbar-rotator-slogan .bi-broadcast {
    color: #fff;
}
.topbar-rotator-dots {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    margin-left: .25rem;
}
.topbar-rotator-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(255,255,255,.35);
    transition: background .3s ease, transform .3s ease;
}
.topbar-rotator-dot.is-active {
    background: #fff;
    transform: scale(1.3);
}

.main-navbar {
    background: #de780d;
    box-shadow: var(--shadow-sm);
    transition: background-color .35s ease, box-shadow .35s ease, backdrop-filter .35s ease;
    padding-top: 5px;
    padding-bottom: 5px;
}
.main-navbar .navbar-brand {
    letter-spacing: -.02em;
    /* font-size: definido mobile-first en la sección 13 */
}
.main-navbar .nav-link {
    color: #fff;
    font-weight: 500;
    font-size: .92rem;
    transition: color .2s ease;
    display: inline-block;
}
.main-navbar .nav-link:hover,
.main-navbar .nav-link.active {
    color: #fff;
}
.main-navbar .dropdown-menu {
    border: none;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    padding: .5rem;
}
.main-navbar .dropdown-item {
    border-radius: var(--radius-sm);
    font-size: .9rem;
    padding: .5rem .75rem;
}
.main-navbar .dropdown-item:hover,
.main-navbar .dropdown-item:focus {
    background: var(--n-100);
    color: var(--color-primary);
}
@media (min-width: 992px) {
    .main-navbar .nav-ver-mas:hover > .dropdown-menu {
        display: block;
        margin-top: 0;
    }
}
.main-navbar .navbar-toggler {
    border-color: rgba(0,0,0,.15);
    box-shadow: none !important;
}
@media (max-width: 991.98px) {
    .main-navbar .navbar-nav {
        align-items: center;
        text-align: center;
    }
    .main-navbar > .container {
        justify-content: center;
        flex-wrap: wrap;
        row-gap: .5rem;
    }
}

.brand-logo-wrap {
    display: inline-flex;
    align-items: center;
    background: transparent;
    border-radius: var(--radius-sm);
    padding: .3rem .5rem;
}
.theme-toggle {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .95rem;
    transition: background .2s ease, transform .2s ease, border-color .2s ease;
    flex-shrink: 0;
}
.theme-toggle:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    transform: translateY(-1px);
}
.theme-toggle .bi-sun { display: none; }
html[data-theme="dark"] .theme-toggle .bi-moon-stars { display: none; }
html[data-theme="dark"] .theme-toggle .bi-sun { display: inline; }

.btn-cta-subscribe {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #1a1a1a;
    font-weight: 700;
}
.btn-cta-subscribe:hover {
    background: var(--color-accent-dark);
    border-color: var(--color-accent-dark);
    color: #1a1a1a;
}
.brand-logo {
    width: auto;
    display: block;
    /* height: definida mobile-first en la sección 13 */
}
.brand-logo-scroll {
    display: none;
}
.site-header.is-scrolled .brand-logo-default {
    display: none;
}
.site-header.is-scrolled .brand-logo-scroll {
    display: block;
}
.footer-logo-wrap {
    background: #fff;
    border-radius: var(--radius-sm);
    padding: .5rem .75rem;
    display: inline-flex;
}
.footer-logo {
    width: auto;
    height: 65px;
    display: block;
}

/* Botón CTA "En vivo" con indicador pulsante */
.btn-cta {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .25rem .7rem;
    font-size: .78rem;
    background: linear-gradient(120deg, #ff4d4d 0%, #e63946 45%, #8a0a17 100%);
    background-size: 200% 200%;
    background-position: 0 0;
    transition: background-position .35s ease, box-shadow .25s ease, transform .2s ease;
    border-color: transparent;
    color: #fff;
}
.btn-cta:hover {
    background-position: 100% 0;
    border-color: transparent;
    color: #fff;
    box-shadow: 0 6px 16px rgba(230,57,70,.4), 0 10px 28px rgba(138,10,23,.3);
}
.pulse-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fff;
    position: relative;
    display: inline-block;
}
.pulse-dot::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: #fff;
    animation: pulse-ring 1.6s ease-out infinite;
}
@keyframes pulse-ring {
    0% { transform: scale(1); opacity: .7; }
    100% { transform: scale(2.6); opacity: 0; }
}

/* ==========================================================================
   4. BOTONES
   ========================================================================== */
.btn {
    border-radius: var(--radius-btn);
    font-weight: 500;
    padding: 8px 24px;
    transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease, color .2s ease;
    box-shadow: var(--shadow-sm);
}
.btn:hover {
    transform: translateY(-2px) scale(1.015);
}
.btn:active {
    transform: translateY(0) scale(.98);
}
.btn-sm {
    padding: .5rem 1.1rem;
    border-radius: var(--radius-btn);
}

.btn-primary {
    --bs-btn-bg: #f68e1e;
    --bs-btn-border-color: #f68e1e;
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: #d97a12;
    --bs-btn-hover-border-color: #d97a12;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #c06c0f;
    --bs-btn-active-border-color: #c06c0f;
    --bs-btn-focus-shadow-rgb: 246, 142, 30;
    background: var(--grad-accent);
}
.btn-primary:hover {
    box-shadow: var(--shadow-hover);
}
.btn-accent {
    background: var(--grad-accent);
    border-color: transparent;
    color: var(--color-secondary);
    font-weight: 700;
}
.btn-accent:hover {
    filter: brightness(1.05);
    border-color: transparent;
    color: var(--color-secondary);
    box-shadow: var(--shadow-hover);
}
.btn-outline-dark {
    --bs-btn-color: #de780d;
    --bs-btn-border-color: #fff;
    --bs-btn-hover-border-color: #fff;
    background: #fff;
    color: #de780d;
}
.btn-outline-dark:hover,
.btn-outline-dark:focus,
.btn-outline-dark:active {
    background: #fff !important;
    color: #de780d !important;
}

/* ==========================================================================
   5. IMÁGENES
   ========================================================================== */
.img-wrap {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
}
.img-cover {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.ratio-16x10 { aspect-ratio: 16 / 10; }
.ratio-1x1 { aspect-ratio: 1 / 1; }

/* Overlay con degradé para imágenes con texto encima */
.media-overlay {
    position: relative;
    overflow: hidden;
    color: #fff;
    display: flex;
    align-items: flex-end;
    min-height: 320px;
}
.media-overlay img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.media-overlay::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(23,15,31,0) 25%, rgba(23,15,31,.88) 100%);
}
.media-overlay-body {
    position: relative;
    z-index: 2;
    padding: var(--sp-4) clamp(1rem, 5vw, var(--sp-8));
    max-width: 900px;
}
.media-overlay-body h1 {
    font-size: clamp(1.8rem, 3.5vw, var(--fs-700));
    margin: 0;
}
.category-banner {
    background: linear-gradient(135deg, var(--color-secondary), var(--color-secondary-2));
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 140px;
    text-align: center;
}
.category-banner-body {
    padding: var(--sp-3) clamp(1rem, 5vw, var(--sp-8));
    max-width: 900px;
}
.category-banner-body h1 {
    color: #fff;
    font-size: clamp(1.6rem, 2.5vw, var(--fs-600));
    margin: 0;
}
/* ==========================================================================
   6. HERO
   ========================================================================== */
.hero-full-bleed {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    overflow: hidden;
}
.hero-slide {
    /* min-height: definido mobile-first en la sección 13 */
}
.hero-slide-img {
    position: relative;
    /* min-height: definido mobile-first en la sección 13 */
}
.hero-slide-img img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.hero-slide-panel {
    background: var(--color-secondary);
    /* padding: definido mobile-first en la sección 13 */
}
.hero-slide-content {
    max-width: 560px;
    color: #fff;
}
.hero-slide-content h2 {
    margin-bottom: var(--sp-2);
    color: #fff;
    /* font-size / padding-top: definidos mobile-first en la sección 13 */
}
.hero-slide-content p {
    color: rgba(255,255,255,.85);
    line-height: 1.4em;
    margin-bottom: var(--sp-4);
    /* font-size: definido mobile-first en la sección 13 */
}
.btn-hero-primary {
    background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-dark) 100%);
    color: var(--color-secondary);
    border: none;
    border-radius: var(--radius-btn);
    transition: box-shadow .25s ease, transform .25s ease;
    font-size: 14px;
}
.btn-hero-primary:hover {
    background: linear-gradient(135deg, #ffc93c 0%, var(--color-accent) 100%);
    color: var(--color-secondary);
    box-shadow: var(--shadow-hover);
    transform: translateY(-1px);
}
.btn-hero-outline {
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255,255,255,.6);
    border-radius: var(--radius-btn);
    font-size: 14px;
}
.btn-hero-outline:hover {
    background: rgba(255,255,255,.15);
    color: #fff;
}
.hero-indicators {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: var(--sp-3);
}
.hero-indicators button {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgba(255,255,255,.4);
    border: none;
    padding: 0;
    transition: background .2s ease, transform .2s ease;
}
.hero-indicators button.active {
    background: #fff;
    transform: scale(1.2);
}

/* ==========================================================================
   7. NEWS CARDS
   ========================================================================== */
.news-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease, border-color .3s ease;
    height: 100%;
}
.news-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-hover);
    border-color: transparent;
}
#bloque-02 .news-card {
    border: none;
}
.news-card .img-wrap {
    border-radius: 0;
}
.news-card img {
    transition: transform .4s ease;
}
.news-card:hover img {
    transform: scale(1.05);
}
.news-card .card-body {
    padding: var(--sp-3);
}
.news-card .badge-cat {
    background: #24365b;
    color: #fff;
    font-weight: 800;
    font-size: .6rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: .4em .9em;
    border-radius: 50px;
}
.news-card h3 {
    font-size: 1.05rem;
    font-weight: 600;
    line-height: var(--lh-snug);
    color: var(--color-text);
    letter-spacing: normal;
}
.news-card .meta {
    color: var(--color-text-muted);
    font-size: .82rem;
}
.news-card a.stretched-link { color: inherit; text-decoration: none; }

.news-card-featured {
    position: relative;
    border: none;
    box-shadow: var(--shadow-md);
    min-height: 220px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.news-card-featured-main {
    min-height: 0;
    display: block;
}
.news-list-item {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--sp-2);
    box-shadow: var(--shadow-sm);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.news-list-item:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-hover);
    border-color: transparent;
}
.news-list-thumb {
    position: relative;
    flex-shrink: 0;
    width: 88px;
    height: 88px;
    border-radius: var(--radius-md);
    overflow: hidden;
}
.news-list-thumb img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.news-list-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}
.news-list-body .badge-cat {
    background: #24365b;
    color: #fff;
    font-size: .58rem;
    padding: .3em .7em;
}
.news-list-body h3 {
    font-size: .95rem;
    font-weight: 600;
    line-height: var(--lh-snug);
    color: var(--color-text);
    letter-spacing: normal;
    margin: .3rem 0 .2rem;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}
.news-list-body .meta {
    font-size: .75rem;
    color: var(--color-text-muted);
}
.news-card-featured .img-wrap {
    position: absolute;
    inset: 0;
    border-radius: 0;
}
.news-card-featured .img-cover {
    transition: transform .5s ease;
}
.news-card-featured:hover .img-cover {
    transform: scale(1.06);
}
.news-card-featured::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(19,25,43,0) 35%, rgba(19,25,43,.92) 100%);
    z-index: 1;
    pointer-events: none;
}
.news-card-featured .card-body {
    position: relative;
    z-index: 2;
    margin-top: auto;
    align-self: flex-end;
    width: 100%;
}
.news-card-featured h3 {
    color: #fff;
    /* font-size: definido mobile-first en la sección 13 */
}
.news-card-featured .meta {
    color: rgba(255,255,255,.75);
}
.news-card-featured-main .img-wrap {
    position: relative;
    inset: auto;
    width: 100%;
    aspect-ratio: 16 / 10;
}
.news-card-featured-main .card-body {
    position: absolute;
    inset: auto 0 0 0;
    margin-top: 0;
}
.news-card-featured-main h3 {
    font-size: clamp(1.3rem, 2vw + .5rem, 1.85rem);
    line-height: var(--lh-tight);
}
.news-card-featured-main .card-body {
    padding: var(--sp-4);
}
.news-card-sm {
    align-items: stretch;
}
.news-card-sm .news-card-sm-thumb {
    border-radius: 0;
    /* width / flex-basis: definidos mobile-first en la sección 13 */
}
.news-card-sm .card-body {
    padding: var(--sp-2);
}
.news-card-sm h3 {
    font-size: .92rem;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
}
/* ==========================================================================
   8. SIDEBAR
   ========================================================================== */
.sidebar-card {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--sp-3);
}
.sidebar-title {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: .02em;
    border-bottom: 3px solid var(--color-primary);
    padding-bottom: var(--sp-1);
    margin-bottom: var(--sp-2);
    display: inline-block;
}
.trending-item {
    display: flex;
    gap: var(--sp-2);
    align-items: center;
    padding: var(--sp-2) 0;
    border-bottom: 1px solid var(--color-border);
    text-decoration: none;
    color: inherit;
}
.trending-item:last-child { border-bottom: none; }
.trending-thumb {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    border-radius: var(--radius-sm);
}
.trending-rank {
    position: absolute;
    bottom: -4px;
    right: -4px;
    min-width: 20px;
    height: 20px;
    padding: 0 4px;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-sm);
}
.trending-item h4 {
    font-size: .9rem;
    font-weight: 600;
    line-height: var(--lh-snug);
    margin: 0;
    color: var(--color-text);
    letter-spacing: normal;
}

/* Section heading */
.section-heading {
    font-weight: 800;
    border-left: 5px solid #f68e1e;
    padding-left: var(--sp-2);
    margin-bottom: var(--sp-4);
    /* font-size: definido mobile-first en la sección 13 */
}

.section-heading.text-white {
    /* font-size: definido mobile-first en la sección 13 */
}

/* ==========================================================================
   9. DETALLE DE NOTICIA
   ========================================================================== */
.noticia-cat {
    display: inline-block;
    color: #222;
    font-weight: 700;
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    text-decoration: none;
}
.noticia-cat:hover { color: var(--color-primary-dark); }
.noticia-meta-dot {
    color: #ffb703;
    font-weight: 700;
}
.noticia-title {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: var(--fs-500);
    line-height: var(--lh-tight);
    color: var(--color-text);
    margin-bottom: var(--sp-2);
}
.noticia-lead {
    font-size: var(--fs-300);
    font-weight: 600;
    line-height: var(--lh-snug);
    color: var(--color-text);
    margin-bottom: var(--sp-2);
}
.noticia-meta {
    color: #ffb703;
    font-weight: 700;
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.share-buttons .share-label {
    font-weight: 700;
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--color-text-muted);
    margin-right: .25rem;
}
.share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff;
    background: #223457;
    transition: filter .2s ease, transform .2s ease;
    /* width / height / font-size: definidos mobile-first en la sección 13 */
}
.share-btn:hover {
    color: #fff;
    filter: brightness(1.1);
    transform: translateY(-2px);
}
.noticia-body {
    font-size: var(--fs-200);
    line-height: var(--lh-relaxed);
    color: var(--color-text);
}
.noticia-body p { margin-bottom: var(--sp-3); }
.noticia-body img { max-width: 100%; height: auto; border-radius: var(--radius-md); }

.ad-banner {
    border-radius: var(--radius-md);
    overflow: hidden;
    text-align: center;
    background: transparent;
}
.ad-img { max-width: 250px; width: 100%; height: auto; display: block; margin: 0 auto; border-radius: 6px; }

.carousel-track {
    display: flex;
    align-items: stretch;
    gap: var(--sp-4);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding-bottom: .5rem;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-slide {
    flex: 0 0 calc(25% - var(--sp-4) * 3 / 4);
    scroll-snap-align: start;
    display: flex;
}
.carousel-slide .news-card {
    width: 100%;
}
@media (max-width: 991.98px) {
    .carousel-slide { flex-basis: calc(50% - var(--sp-4) / 2); }
}
@media (max-width: 575.98px) {
    .carousel-slide { flex-basis: 85%; }
}
.btn-carousel-nav {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    background: transparent;
    color: var(--color-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.btn-carousel-nav:hover {
    background: #f68e1e;
    border-color: #f68e1e;
    color: #fff;
}

/* ==========================================================================
   9. FOOTER
   ========================================================================== */
.main-footer {
    background: #eee;
    color: rgba(0,0,0,.75);
}
.footer-links a {
    color: rgba(0,0,0,.65);
    text-decoration: none;
    font-size: .92rem;
    line-height: 2.1;
}
.footer-links a:hover { color: var(--color-primary); }
.footer-links li { color: rgba(0,0,0,.65); font-size: .9rem; margin-bottom: .4rem; }
.footer-social {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #de780d;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    transition: background .2s ease, transform .2s ease;
}
.footer-social:hover { background: var(--color-primary); color: #fff; transform: translateY(-2px); }
.main-footer .text-muted-light { color: rgba(0,0,0,.6); }

/* ==========================================================================
   10. BACK TO TOP
   ========================================================================== */
.back-to-top {
    position: fixed;
    z-index: 1040;
    border: none;
    border-radius: 50%;
    background: #c3822f;
    color: #fff;
    box-shadow: var(--shadow-md);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity .25s ease, transform .25s ease, background .2s ease;
    /* right / bottom / width / height / font-size: definidos mobile-first en la sección 13 */
}
.back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.back-to-top:hover { background: var(--color-primary-dark); }

/* ==========================================================================
   11. RENDIMIENTO — content-visibility para secciones bajo el pliegue
   ========================================================================== */
#bloque-02, #bloque-03 {
    content-visibility: auto;
    contain-intrinsic-size: 1px 900px;
}

/* ==========================================================================
   12. REVEAL ON SCROLL
   ========================================================================== */
.reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .5s ease, transform .5s ease;
}
.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ==========================================================================
   13. RESPONSIVE — MOBILE FIRST (breakpoints 480 / 768 / 1024)
   Metodología: los estilos SIN media query de este bloque son la base
   para móviles (0–479px). Cada @media (min-width) siguiente AGREGA o
   AJUSTA valores para pantallas mayores. El bloque de 1024px reproduce
   exactamente los valores originales de escritorio, por lo que el
   diseño en pantallas grandes queda intacto.
   ========================================================================== */

/* ---- BASE MÓVIL (0–479px)
   Tipografía y espaciados compactos, una sola columna, elementos táctiles
   más chicos, imágenes y contenedores fluidos. ---- */
img, svg {
    max-width: 100%;
    height: auto;
}
:root {
    --fs-300: 1.05rem;
    --fs-400: 1.2rem;
    --fs-500: 1.4rem;
    --fs-600: 1.6rem;
    --fs-700: 1.9rem;
    --sp-3: 1rem;
    --sp-4: 1.25rem;
    --sp-6: 1.75rem;
    --sp-8: 2.25rem;
    --sp-12: 3rem;
}
.container {
    padding-left: var(--sp-2);
    padding-right: var(--sp-2);
}
.section-py {
    padding-top: 24px;
}
.main-navbar .navbar-brand {
    font-size: 1.1rem;
}
.brand-logo {
    height: 48px;
}
.main-overlap-hero {
    padding-top: var(--sp-4) !important;
    padding-left: var(--sp-2) !important;
    padding-right: var(--sp-2) !important;
}
.hero-slide {
    min-height: auto;
}
.hero-slide-img {
    min-height: 200px;
}
.hero-slide-panel {
    padding: var(--sp-4) 1.1rem var(--sp-4);
}
.hero-slide-content h2 {
    font-size: 1.4rem;
    padding-top: var(--sp-2);
}
.hero-slide-content p {
    font-size: .92rem;
}
.hero-indicators {
    margin-bottom: var(--sp-2);
}
.btn-hero-primary, .btn-hero-outline {
    font-size: 13px;
}
.media-overlay-body, .category-banner-body {
    padding-left: var(--sp-2);
    padding-right: var(--sp-2);
}
.news-card-featured h3 {
    font-size: 1.05rem;
}
.news-card-sm .news-card-sm-thumb {
    width: 90px;
    flex-basis: 90px;
}
.section-heading {
    font-size: 1.1rem;
}
.section-heading.text-white {
    font-size: 1.3rem;
}
.share-btn {
    width: 34px;
    height: 34px;
    font-size: .9rem;
}
.back-to-top {
    right: var(--sp-2);
    bottom: var(--sp-2);
    width: 40px;
    height: 40px;
    font-size: 1rem;
}
/* Grillas de noticias (listado de categoría, últimas noticias, bloque
   "más noticias") usan col-6/col-md-6/col-lg-3|4 de Bootstrap, que en
   pantallas chicas siguen mostrando 2 columnas. En el móvil base (0–479px)
   las forzamos a 1 sola columna; se restauran en los breakpoints 480/1024. */
.row.g-4 > [class*="col-lg-3"],
.row.g-4 > [class*="col-lg-4"] {
    flex: 0 0 100%;
    max-width: 100%;
}

/* ---- 480px — MÓVIL GRANDE
   Recupera algo de escala tipográfica y de espaciado; las miniaturas de
   news-card-sm vuelven a su ancho estándar. ---- */
@media (min-width: 480px) {
    :root {
        --fs-300: 1.15rem;
        --fs-400: 1.32rem;
        --fs-500: 1.6rem;
        --fs-600: 1.85rem;
        --fs-700: 2.2rem;
        --sp-3: 1.125rem;
        --sp-4: 1.5rem;
        --sp-6: 2.25rem;
        --sp-8: 3rem;
        --sp-12: 4.5rem;
    }
    .news-card-sm .news-card-sm-thumb {
        width: 120px;
        flex-basis: 120px;
    }
    .hero-slide-content h2 {
        font-size: 1.6rem;
    }
    .section-heading {
        font-size: 1.2rem;
    }
    .share-btn {
        width: 36px;
        height: 36px;
    }
    /* Desde acá se recuperan las 2 columnas que ya definen col-6/col-md-6
       de Bootstrap (se mantienen hasta que 1024px las lleve a 3/4). */
    .row.g-4 > [class*="col-lg-3"],
    .row.g-4 > [class*="col-lg-4"] {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

/* ---- 768px — TABLET
   Layouts pasan de 1 a 2 columnas (vía grid de Bootstrap, ya mobile-first),
   se restaura más aire entre bloques y el hero recupera altura de escritorio
   parcialmente. La navegación principal sigue colapsada en hamburguesa
   (Bootstrap navbar-expand-lg expande recién en 992px, dentro del rango
   "escritorio" de este breakpoint). ---- */
@media (min-width: 768px) {
    :root {
        --fs-300: 1.2rem;
        --fs-400: 1.45rem;
        --fs-500: 1.75rem;
        --fs-600: 2.1rem;
        --fs-700: 2.6rem;
        --sp-3: 1.35rem;
        --sp-4: 1.75rem;
        --sp-6: 2.75rem;
        --sp-8: 3.5rem;
        --sp-12: 5.25rem;
    }
    .container {
        padding-left: .75rem;
        padding-right: .75rem;
    }
    .section-py {
        padding-top: 32px;
    }
    .main-navbar .navbar-brand {
        font-size: 1.3rem;
    }
    .brand-logo {
        height: 74px;
    }
    .main-overlap-hero {
        padding-top: var(--sp-4) !important;
        padding-left: var(--sp-3) !important;
        padding-right: var(--sp-3) !important;
    }
    .hero-slide {
        min-height: 420px;
    }
    .hero-slide-img {
        min-height: 260px;
    }
    .hero-slide-panel {
        padding: var(--sp-4) 1.5rem var(--sp-6);
    }
    .hero-slide-content h2 {
        font-size: 1.9rem;
    }
    .hero-slide-content p {
        font-size: 16px;
    }
    .btn-hero-primary, .btn-hero-outline {
        font-size: 14px;
    }
    .news-card-featured h3 {
        font-size: 1.2rem;
    }
    .section-heading {
        font-size: 1.3rem;
    }
    .section-heading.text-white {
        font-size: 1.6rem;
    }
    .share-btn {
        width: 38px;
        height: 38px;
        font-size: 1rem;
    }
    .back-to-top {
        right: var(--sp-3);
        bottom: var(--sp-3);
        width: 44px;
        height: 44px;
        font-size: 1.1rem;
    }
}

/* ---- 1024px — ESCRITORIO
   Restaura exactamente los valores de tipografía, espaciado y hero del
   diseño original de escritorio: nada cambia visualmente a partir de acá. ---- */
@media (min-width: 1024px) {
    :root {
        --fs-300: 1.25rem;
        --fs-400: 1.563rem;
        --fs-500: 1.953rem;
        --fs-600: 2.441rem;
        --fs-700: 3.052rem;
        --sp-3: 1.5rem;
        --sp-4: 2rem;
        --sp-6: 3rem;
        --sp-8: 4rem;
        --sp-12: 6rem;
    }
    .main-overlap-hero {
        padding-top: var(--sp-6) !important;
        padding-left: var(--sp-6) !important;
        padding-right: var(--sp-6) !important;
    }
    .section-py {
        padding-top: 40px;
    }
    .hero-slide {
        min-height: 560px;
    }
    .hero-slide-img {
        min-height: 320px;
    }
    .hero-slide-panel {
        padding: var(--sp-6) clamp(1.5rem, 5vw, var(--sp-8));
    }
    .hero-slide-content h2 {
        font-size: 30px;
        padding-top: 30px;
    }
    .news-card-featured h3 {
        font-size: 1.3rem;
    }
    .section-heading {
        font-size: 1.35rem;
    }
    .section-heading.text-white {
        font-size: 1.75rem;
    }
    /* Restaura exactamente las columnas de escritorio originales
       (equivalentes a col-lg-3 = 25% y col-lg-4 = 33.33% de Bootstrap). */
    .row.g-4 > [class*="col-lg-3"] {
        flex: 0 0 25%;
        max-width: 25%;
    }
    .row.g-4 > [class*="col-lg-4"] {
        flex: 0 0 33.3333%;
        max-width: 33.3333%;
    }
}