/* ═══════════════════════════════════════════════════════════════
   ZONA INFO v3.5 — Soft Editorial Design
   Palette: Warm amber / cream / charcoal — comfortable reading
   ═══════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700;800;900&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
    /* ─── Soft Amber Palette (easy on the eyes) ─── */
    --amber-50: #FDF8F3;
    --amber-100: #F9EDE0;
    --amber-200: #F0D9C1;
    --amber-300: #DDB88A;
    --amber-400: #C99A62;
    --amber-500: #B07D3E;
    --amber-600: #96682F;
    --amber-700: #7A5424;
    --amber-800: #5C3F1B;

    /* ─── Neutrals (warm-tinted) ─── */
    --warm-50: #FDFCFA;
    --warm-100: #F7F5F2;
    --warm-200: #EDEAE5;
    --warm-300: #D8D4CE;
    --warm-400: #ADA89F;
    --warm-500: #7D786F;
    --warm-600: #5A564F;
    --warm-700: #3D3A35;
    --warm-800: #2A2825;
    --warm-900: #1C1B19;

    /* ─── Semantic ─── */
    --success: #4A8C5C;
    --danger: #B54A4A;
    --info: #4A6F8C;
    --warning: #B5893E;

    /* ─── Design Tokens ─── */
    --primary: var(--amber-500);
    --primary-light: var(--amber-400);
    --primary-soft: var(--amber-100);
    --primary-hover: var(--amber-600);
    --bg-main: var(--warm-50);
    --bg-card: #FFFFFF;
    --bg-card-hover: #FEFDFB;
    --text-primary: var(--warm-800);
    --text-secondary: var(--warm-500);
    --text-muted: var(--warm-400);
    --border: var(--warm-200);
    --border-light: var(--warm-100);

    --shadow-xs: 0 1px 2px rgba(42,40,37,.04);
    --shadow-sm: 0 1px 3px rgba(42,40,37,.06), 0 1px 2px rgba(42,40,37,.04);
    --shadow-md: 0 4px 8px -1px rgba(42,40,37,.06), 0 2px 4px -2px rgba(42,40,37,.04);
    --shadow-lg: 0 10px 20px -3px rgba(42,40,37,.08), 0 4px 8px -4px rgba(42,40,37,.04);
    --shadow-xl: 0 20px 30px -5px rgba(42,40,37,.1), 0 8px 12px -6px rgba(42,40,37,.04);

    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 20px;
    --transition: .25s cubic-bezier(.4, 0, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0 }
html { scroll-behavior: smooth }
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--bg-main);
    color: var(--text-primary);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

/* ═══ ANIMATIONS ═══ */
@keyframes fadeInUp { from { opacity:0; transform:translateY(16px) } to { opacity:1; transform:translateY(0) } }
@keyframes fadeIn { from { opacity:0 } to { opacity:1 } }
@keyframes slideInRight { from { opacity:0; transform:translateX(20px) } to { opacity:1; transform:translateX(0) } }
@keyframes ticker { 0% { transform:translateX(0) } 100% { transform:translateX(-50%) } }
@keyframes shimmer { 0% { background-position:-200% 0 } 100% { background-position:200% 0 } }
@keyframes scaleIn { from { opacity:0; transform:scale(.97) } to { opacity:1; transform:scale(1) } }
@keyframes pulse { 0%,100% { opacity:1 } 50% { opacity:.5 } }

.stagger > *:nth-child(1) { animation-delay:.04s }
.stagger > *:nth-child(2) { animation-delay:.08s }
.stagger > *:nth-child(3) { animation-delay:.12s }
.stagger > *:nth-child(4) { animation-delay:.16s }
.stagger > *:nth-child(5) { animation-delay:.2s }
.stagger > *:nth-child(6) { animation-delay:.24s }
.stagger > *:nth-child(7) { animation-delay:.28s }
.stagger > *:nth-child(8) { animation-delay:.32s }

.skeleton {
    background: linear-gradient(90deg, var(--warm-200) 25%, var(--warm-100) 50%, var(--warm-200) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: var(--radius-sm);
}

/* ═══ BREAKING NEWS BAR ═══ */
.breaking-bar {
    background: var(--warm-900);
    color: #fff;
    height: 36px;
    display: flex;
    align-items: center;
    overflow: hidden;
    position: relative;
    z-index: 100;
}
.breaking-label {
    background: var(--amber-600);
    color: #fff;
    padding: 0 16px;
    font-weight: 700;
    font-size: .68rem;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    height: 100%;
    display: flex;
    align-items: center;
    white-space: nowrap;
    position: relative;
    z-index: 2;
}
.breaking-label::after {
    content: '';
    position: absolute;
    right: -10px;
    top: 0;
    border-top: 18px solid transparent;
    border-bottom: 18px solid transparent;
    border-left: 10px solid var(--amber-600);
}
.breaking-content { flex:1; overflow:hidden; padding-left:18px }
.breaking-track {
    display: flex;
    gap: 50px;
    animation: ticker 35s linear infinite;
    white-space: nowrap;
}
.breaking-track:hover { animation-play-state: paused }
.breaking-item {
    font-size: .8rem;
    color: var(--warm-300);
    display: flex;
    align-items: center;
    gap: 8px;
}
.breaking-item a {
    color: var(--warm-300);
    text-decoration: none;
    transition: color var(--transition);
}
.breaking-item a:hover { color: var(--amber-300) }
.breaking-dot {
    width: 5px;
    height: 5px;
    background: var(--amber-400);
    border-radius: 50%;
    flex-shrink: 0;
}

/* ═══ HEADER ═══ */
.header {
    background: #fff;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 90;
    box-shadow: 0 1px 8px rgba(42,40,37,.06);
}
.header-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
}
.header-social {
    display: flex;
    align-items: center;
    gap: 8px;
}
.header-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: var(--warm-600);
    background: var(--warm-100);
    transition: all var(--transition);
    text-decoration: none;
}
.header-social a:hover { color: #fff; background: var(--primary) }
.logo {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    flex-shrink: 0;
}
.logo img { height: 100px; width: auto }
.header-right {
    display: flex;
    align-items: center;
    gap: 10px;
}
.logo-icon {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--amber-500), var(--amber-600));
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: #fff;
    font-weight: 800;
    font-family: 'Playfair Display', serif;
    transition: transform var(--transition);
}
.logo:hover .logo-icon { transform: rotate(-3deg) scale(1.04) }
.logo-text { display:flex; flex-direction:column; line-height:1.1 }
.logo-name {
    font-family: 'Playfair Display', serif;
    font-weight: 800;
    font-size: 1.35rem;
    color: var(--warm-800);
}
.logo-name span { color: var(--primary) }
.logo-sub {
    font-size: .62rem;
    color: var(--text-secondary);
    letter-spacing: 1.8px;
    text-transform: uppercase;
    font-weight: 500;
}

/* ─── Navigation ─── */
.main-nav { display:flex; align-items:center; gap:2px; flex:1; justify-content:center }
.nav-link {
    padding: 8px 14px;
    font-size: .84rem;
    font-weight: 500;
    color: var(--text-secondary);
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: all var(--transition);
    position: relative;
}
.nav-link:hover { color: var(--primary); background: var(--amber-50) }
.nav-link.active { color: var(--primary); font-weight: 600 }
.nav-link.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 18px;
    height: 2px;
    background: var(--primary);
    border-radius: 1px;
}

/* ─── Header Search ─── */
.header-search {
    display: flex;
    align-items: center;
    background: var(--warm-100);
    border-radius: 100px;
    padding: 0 14px;
    height: 38px;
    width: 200px;
    border: 1.5px solid transparent;
    transition: all var(--transition);
    cursor: pointer;
}
.header-search:focus-within {
    border-color: var(--amber-300);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(176,125,62,.08);
    width: 260px;
}
.header-search input {
    border: none;
    background: transparent;
    outline: none;
    font-size: .84rem;
    width: 100%;
    color: var(--text-primary);
    font-family: inherit;
}
.header-search svg {
    width: 16px;
    height: 16px;
    color: var(--text-muted);
    flex-shrink: 0;
    margin-right: 8px;
}
.mobile-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    color: var(--text-primary);
}

/* ═══ DATE BAR ═══ */
.date-bar {
    background: var(--amber-50);
    border-bottom: 1px solid var(--amber-100);
    padding: 8px 0;
}
.date-bar-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: .74rem;
    color: var(--amber-600);
}
.weather-widget { display:flex; align-items:center; gap:8px; font-weight:500 }

/* ═══ HERO ═══ */
.hero-section { max-width:1280px; margin:20px auto; padding:0 20px }
.hero-grid {
    display: grid;
    grid-template-columns: 1.8fr 1fr;
    gap: 12px;
    height: 560px;
}
.hero-main {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    cursor: pointer;
    animation: fadeInUp .5s ease-out;
    height: 100%;
}
.hero-main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s ease;
}
.hero-main:hover img { transform: scale(1.02) }
.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(28,27,25,.88) 0%, rgba(28,27,25,.35) 40%, transparent 65%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 28px;
}
.hero-cat {
    display: inline-flex;
    background: var(--amber-500);
    color: #fff;
    padding: 4px 14px;
    border-radius: 100px;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .8px;
    margin-bottom: 10px;
    width: fit-content;
}
.hero-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.9rem;
    font-weight: 800;
    color: #fff;
    line-height: 1.2;
    margin-bottom: 10px;
    text-shadow: 0 1px 4px rgba(0,0,0,.2);
}
.hero-meta {
    font-size: .78rem;
    color: rgba(255,255,255,.65);
    display: flex;
    align-items: center;
    gap: 14px;
}

/* ─── Hero Sidebar ─── */
.hero-sidebar { display:flex; flex-direction:column; gap:12px; height:100% }
.hero-side-card {
    flex: 1;
    position: relative;
    border-radius: var(--radius-md);
    overflow: hidden;
    cursor: pointer;
    animation: slideInRight .45s ease-out forwards;
    opacity: 0;
    min-height: 0;
}
.hero-side-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
    position: absolute;
    inset: 0;
}
.hero-side-card:hover img { transform: scale(1.04) }
.hero-side-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(28,27,25,.82) 0%, transparent 55%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 16px;
}
.hero-side-cat {
    font-size: .64rem;
    font-weight: 700;
    color: var(--amber-300);
    text-transform: uppercase;
    letter-spacing: .8px;
    margin-bottom: 5px;
}
.hero-side-title {
    font-family: 'Playfair Display', serif;
    font-size: .95rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.3;
}

/* ═══ SECTIONS ═══ */
.section { max-width:1280px; margin:0 auto; padding:28px 20px }
.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 22px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--warm-200);
}
.section-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 10px;
}
.section-title .accent-line {
    width: 3px;
    height: 24px;
    background: var(--primary);
    border-radius: 2px;
}
.section-more {
    font-size: .82rem;
    font-weight: 600;
    color: var(--primary);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: gap var(--transition);
}
.section-more:hover { gap: 8px }

/* ═══ NEWS GRID ═══ */
.news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 22px;
}
.news-card {
    background: var(--bg-card);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-xs);
    transition: all var(--transition);
    cursor: pointer;
    border: 1px solid var(--border-light);
    animation: fadeInUp .45s ease-out forwards;
    opacity: 0;
}
.news-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
    border-color: var(--amber-200);
}
.news-card-img { position:relative; height:200px; overflow:hidden }
.news-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .45s ease;
}
.news-card:hover .news-card-img img { transform: scale(1.05) }
.news-card-cat {
    position: absolute;
    top: 12px;
    left: 12px;
    color: #fff;
    padding: 3px 12px;
    border-radius: 100px;
    font-size: .66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    backdrop-filter: blur(6px);
    background: rgba(176,125,62,.85);
}
.news-card-body { padding: 16px 18px }
.news-card-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--text-primary);
    margin-bottom: 6px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color var(--transition);
}
.news-card:hover .news-card-title { color: var(--primary) }
.news-card-excerpt {
    font-size: .84rem;
    color: var(--text-secondary);
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 14px;
}
.news-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: .73rem;
    color: var(--text-muted);
    padding-top: 12px;
    border-top: 1px solid var(--warm-100);
}
.news-card-author { display:flex; align-items:center; gap:6px }
.author-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--amber-100);
    color: var(--amber-600);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .6rem;
    font-weight: 700;
}
.news-card-views { display:flex; align-items:center; gap:4px }

/* ═══ CONTENT LAYOUT ═══ */
.content-layout {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 20px 40px;
    display: grid;
    grid-template-columns: 1fr 330px;
    gap: 30px;
}

/* ─── Sidebar ─── */
.sidebar { display:flex; flex-direction:column; gap:22px }
.sidebar-card {
    background: var(--bg-card);
    border-radius: var(--radius-md);
    padding: 18px;
    box-shadow: var(--shadow-xs);
    border: 1px solid var(--border-light);
}
.sidebar-card-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--amber-200);
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-primary);
}

/* ─── Trending ─── */
.trending-item {
    display: flex;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--warm-100);
    cursor: pointer;
    transition: all var(--transition);
}
.trending-item:last-child { border-bottom: none }
.trending-item:hover { padding-left: 4px }
.trending-number {
    font-family: 'Playfair Display', serif;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--amber-200);
    line-height: 1;
    min-width: 28px;
    transition: color var(--transition);
}
.trending-item:hover .trending-number { color: var(--primary) }
.trending-text h4 {
    font-size: .83rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--text-primary);
    margin-bottom: 3px;
}
.trending-text span { font-size: .71rem; color: var(--text-muted) }

/* ─── Category list ─── */
.cat-list { display:flex; flex-direction:column; gap:4px }
.cat-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 12px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition);
    text-decoration: none;
    color: var(--text-primary);
}
.cat-item:hover { background: var(--amber-50); transform: translateX(3px) }
.cat-item-left { display:flex; align-items:center; gap:10px; font-size:.84rem; font-weight:500 }
.cat-count {
    background: var(--warm-100);
    padding: 2px 10px;
    border-radius: 100px;
    font-size: .71rem;
    font-weight: 600;
    color: var(--text-secondary);
}

/* ═══ ARTICLE PAGE ═══ */
.article-container {
    max-width: 760px;
    margin: 28px auto;
    padding: 0 20px;
    animation: fadeInUp .5s ease-out;
}
.article-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: .84rem;
    font-weight: 500;
    margin-bottom: 18px;
    transition: color var(--transition);
}
.article-back:hover { color: var(--primary) }
.article-cat-badge {
    display: inline-flex;
    background: var(--amber-500);
    color: #fff;
    padding: 5px 16px;
    border-radius: 100px;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .8px;
    margin-bottom: 14px;
}
.article-title {
    font-family: 'Playfair Display', serif;
    font-size: 2.1rem;
    font-weight: 800;
    line-height: 1.2;
    color: var(--text-primary);
    margin-bottom: 16px;
}
.article-meta-bar {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 12px 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    margin-bottom: 24px;
    font-size: .8rem;
    color: var(--text-secondary);
    flex-wrap: wrap;
}
.article-meta-item { display:flex; align-items:center; gap:6px }
.article-hero-img {
    width: 100%;
    border-radius: var(--radius-lg);
    margin-bottom: 24px;
    box-shadow: var(--shadow-md);
}
.article-content {
    font-size: 1.04rem;
    line-height: 1.85;
    color: var(--warm-700);
}
.article-content p { margin-bottom: 18px }
.article-content a { color: var(--info); text-decoration: underline }
.article-content .inline-image {
    width: 100%;
    border-radius: var(--radius-md);
    margin: 20px 0;
    box-shadow: var(--shadow-sm);
}
.article-tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 28px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
}
.article-tag {
    background: var(--warm-100);
    color: var(--text-secondary);
    padding: 5px 14px;
    border-radius: 100px;
    font-size: .76rem;
    font-weight: 500;
    transition: all var(--transition);
    text-decoration: none;
}
.article-tag:hover { background: var(--amber-100); color: var(--primary) }

/* ═══ CATEGORY PILLS ═══ */
.category-nav {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 20px 6px;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.category-nav::-webkit-scrollbar { display: none }
.cat-pill {
    padding: 7px 16px;
    border-radius: 100px;
    font-size: .8rem;
    font-weight: 500;
    white-space: nowrap;
    border: 1.5px solid var(--border);
    background: #fff;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition);
    text-decoration: none;
}
.cat-pill:hover { border-color: var(--amber-300); color: var(--primary); background: var(--amber-50) }
.cat-pill.active { background: var(--amber-500); color: #fff; border-color: var(--amber-500) }

/* ═══ HIGHLIGHTS STRIP ═══ */
.highlights-strip {
    max-width: 1280px;
    margin: 0 auto;
    padding: 16px 20px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}
.highlight-card {
    display: flex;
    gap: 12px;
    padding: 14px 16px;
    background: #fff;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    cursor: pointer;
    transition: all var(--transition);
    text-decoration: none;
    color: inherit;
}
.highlight-card:hover { border-color: var(--amber-300); box-shadow: var(--shadow-sm); transform: translateY(-1px) }
.highlight-card img {
    width: 72px;
    height: 54px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}
.highlight-card .hl-text { flex:1; min-width:0 }
.highlight-card .hl-cat { font-size:.68rem; font-weight:600; color:var(--primary); text-transform:uppercase; letter-spacing:.4px; margin-bottom:3px }
.highlight-card .hl-title { font-size:.82rem; font-weight:600; color:var(--text-primary); line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
.highlight-card .hl-time { font-size:.7rem; color:var(--text-muted); margin-top:3px }

/* ═══ CATEGORY HIGHLIGHTS ═══ */
.cat-highlights {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}
.cat-highlight-card {
    background: #fff;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    overflow: hidden;
    transition: all var(--transition);
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}
.cat-highlight-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px) }
.cat-highlight-card .ch-header {
    padding: 14px 16px 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid var(--warm-100);
}
.cat-highlight-card .ch-icon { font-size: 1.1rem }
.cat-highlight-card .ch-name { font-size: .82rem; font-weight: 700; color: var(--text-primary) }
.cat-highlight-card .ch-count { font-size: .7rem; color: var(--text-muted); margin-left: auto }
.cat-highlight-card .ch-article {
    padding: 12px 16px;
    display: flex;
    gap: 10px;
    align-items: center;
    border-bottom: 1px solid var(--warm-50);
    transition: background var(--transition);
    text-decoration: none;
    color: inherit;
}
.cat-highlight-card .ch-article:hover { background: var(--warm-50) }
.cat-highlight-card .ch-article:last-child { border-bottom: none }
.cat-highlight-card .ch-article img {
    width: 48px;
    height: 36px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
}
.cat-highlight-card .ch-article-title {
    font-size: .78rem;
    font-weight: 500;
    color: var(--text-primary);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1;
}

@media (max-width: 768px) {
    .highlights-strip { grid-template-columns: 1fr; }
    .cat-highlights { grid-template-columns: 1fr; }
}
@media (min-width: 769px) and (max-width: 1024px) {
    .highlights-strip { grid-template-columns: repeat(2, 1fr); }
    .cat-highlights { grid-template-columns: repeat(2, 1fr); }
}

/* ═══ FOOTER ═══ */
.footer { background: var(--warm-800); color: var(--warm-400); margin-top: 50px }
.footer-top {
    max-width: 1280px;
    margin: 0 auto;
    padding: 40px 20px 28px;
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 36px;
}
.footer-brand .logo-name { color: #fff; font-size: 1.5rem; margin-bottom: 10px }
.footer-brand p { font-size: .84rem; line-height: 1.6; margin-bottom: 14px; color: var(--warm-400) }
.footer-social { display:flex; gap:8px }
.footer-social a {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--warm-700);
    color: var(--warm-400);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all var(--transition);
    font-size: .82rem;
}
.footer-social a:hover { background: var(--amber-600); color: #fff; transform: translateY(-2px) }
.footer-col h4 {
    color: #fff;
    font-size: .85rem;
    font-weight: 600;
    margin-bottom: 14px;
    text-transform: uppercase;
    letter-spacing: .8px;
}
.footer-col a {
    display: block;
    color: var(--warm-400);
    text-decoration: none;
    font-size: .84rem;
    padding: 4px 0;
    transition: color var(--transition);
}
.footer-col a:hover { color: var(--amber-300) }
.footer-bottom {
    border-top: 1px solid var(--warm-700);
    text-align: center;
    font-size: .76rem;
    max-width: 1280px;
    margin: 0 auto;
    padding: 16px 20px;
}

/* ═══ BACK TO TOP ═══ */
.back-to-top {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--amber-500);
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-md);
    transition: all var(--transition);
    opacity: 0;
    pointer-events: none;
    z-index: 80;
}
.back-to-top.visible { opacity: 1; pointer-events: auto }
.back-to-top:hover { transform: translateY(-2px); background: var(--amber-600) }

/* ═══ SEARCH OVERLAY ═══ */
.search-overlay {
    position: fixed;
    inset: 0;
    background: rgba(28,27,25,.5);
    backdrop-filter: blur(4px);
    z-index: 200;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding-top: 110px;
}
.search-overlay.active { display: flex }
.search-modal {
    background: #fff;
    border-radius: var(--radius-lg);
    width: 90%;
    max-width: 580px;
    padding: 22px;
    box-shadow: var(--shadow-xl);
    animation: scaleIn .25s ease-out;
}
.search-modal input {
    width: 100%;
    border: 1.5px solid var(--warm-200);
    border-radius: var(--radius-md);
    padding: 13px 16px;
    font-size: .95rem;
    outline: none;
    font-family: inherit;
    transition: border-color var(--transition);
}
.search-modal input:focus { border-color: var(--amber-400) }
.search-results { margin-top: 14px; max-height: 380px; overflow-y: auto }
.search-result-item {
    padding: 10px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background var(--transition);
    display: flex;
    gap: 12px;
    align-items: center;
}
.search-result-item:hover { background: var(--amber-50) }
.search-result-item img {
    width: 56px;
    height: 42px;
    object-fit: cover;
    border-radius: var(--radius-sm);
}
.search-result-item h4 { font-size: .85rem; font-weight: 600; line-height: 1.3 }
.search-result-item span { font-size: .73rem; color: var(--text-muted) }

/* ═══ TOAST ═══ */
.toast-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.toast {
    padding: 12px 18px;
    border-radius: var(--radius-md);
    color: #fff;
    font-size: .84rem;
    font-weight: 500;
    box-shadow: var(--shadow-lg);
    animation: slideInRight .25s ease-out;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 260px;
}
.toast-success { background: var(--success) }
.toast-error { background: var(--danger) }
.toast-info { background: var(--amber-600) }

/* ═══ RESPONSIVE ═══ */
@media (max-width: 1024px) {
    .content-layout { grid-template-columns: 1fr }
    .hero-grid { grid-template-columns: 1fr; height: auto }
    .hero-main { min-height: 340px }
    .hero-sidebar { flex-direction: row; height: auto }
    .hero-side-card { min-height: 200px }
    .footer-top { grid-template-columns: 1fr 1fr }
}
/* ─── Nav Live Button ─── */
.nav-live { color: #e74c3c !important; font-weight: 700 !important; animation: livePulse 2s infinite }
@keyframes livePulse { 0%,100%{opacity:1} 50%{opacity:.6} }
.live-widget { border: 2px solid #e74c3c22; background: linear-gradient(135deg, #fff5f5, #fff) }
.live-widget .sidebar-card-title { color: #e74c3c }
.live-player { width:100%; aspect-ratio:16/9; background:#111; border-radius:var(--radius-md); display:flex; align-items:center; justify-content:center; color:#fff; margin-bottom:10px; overflow:hidden; position:relative }
.live-player video,.live-player iframe { width:100%; height:100%; border:none; object-fit:cover }
.live-badge { display:inline-flex; align-items:center; gap:4px; background:#e74c3c; color:#fff; font-size:.7rem; font-weight:700; padding:3px 10px; border-radius:100px; text-transform:uppercase; letter-spacing:.5px }
.live-badge::before { content:''; width:6px; height:6px; background:#fff; border-radius:50%; animation:liveDot 1s infinite }
@keyframes liveDot { 0%,100%{opacity:1} 50%{opacity:.3} }

/* ═══ AD CAROUSEL ═══ */
.ad-carousel { position:relative; max-width:1280px; margin:12px auto 20px; padding:0 20px; overflow:hidden }
.ad-carousel-track { display:flex; transition:transform .5s ease; will-change:transform }
.ad-carousel-slide { min-width:100%; display:flex; justify-content:center; padding:4px 0 }
.ad-carousel-slide img { max-height:150px; width:auto; max-width:100%; border-radius:var(--radius-md); cursor:pointer; object-fit:contain }
.ad-carousel-slide a { display:flex; justify-content:center; text-decoration:none }
.ad-label { font-size:.62rem; color:var(--warm-400); text-align:center; text-transform:uppercase; letter-spacing:1px; margin-bottom:4px; font-weight:600 }
.ad-inline { margin:28px 0; padding:14px; background:var(--warm-50); border:1.5px solid var(--warm-200); border-radius:var(--radius-md); text-align:center }
.ad-inline img { max-height:130px; width:auto; max-width:100%; border-radius:var(--radius-sm); cursor:pointer }
.ad-inline .ad-label { margin-top:0; margin-bottom:6px }

/* ═══ AUDIO BUTTON ═══ */
.audio-btn { display:inline-flex; align-items:center; gap:8px; padding:10px 20px; background:var(--primary); color:#fff; border:none; border-radius:100px; cursor:pointer; font-size:.85rem; font-weight:600; transition:.2s; margin:12px 0 }
.audio-btn:hover { opacity:.85; transform:translateY(-1px) }
.audio-btn.playing { background:#e74c3c }
.audio-btn svg { width:18px; height:18px }

/* ═══ TOPIC BADGE ═══ */
.topic-badge { display:inline-flex; align-items:center; gap:4px; padding:3px 10px; border-radius:100px; font-size:.7rem; font-weight:600; text-transform:uppercase; letter-spacing:.3px }
.topic-badge.seguridad { background:#fee2e2; color:#991b1b }
.topic-badge.economia { background:#dbeafe; color:#1e40af }
.topic-badge.politica { background:#f3e8ff; color:#6b21a8 }
.topic-badge.derechos_humanos { background:#fef3c7; color:#92400e }
.topic-badge.salud { background:#d1fae5; color:#065f46 }
.topic-badge.educacion { background:#e0f2fe; color:#075985 }

/* ═══ DEEP TAGS ═══ */
.deep-tag { display:inline-block; padding:3px 10px; background:var(--warm-100); color:var(--warm-600); border-radius:100px; font-size:.72rem; font-weight:500; margin:2px; text-decoration:none; transition:.2s }
.deep-tag:hover { background:var(--warm-200) }

@media (max-width: 768px) {
    .main-nav {
        display: flex !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 0;
        padding: 0;
        margin-top: 6px;
        border-top: 1px solid var(--warm-100);
        padding-top: 6px;
        justify-content: flex-start;
    }
    .main-nav::-webkit-scrollbar { display: none }
    .main-nav .nav-link { white-space: nowrap; padding: 6px 12px; font-size: .78rem; flex-shrink: 0 }
    .main-nav .nav-link.active::after { display: none }
    .mobile-toggle { display: none !important }
    .header-inner { flex-wrap: wrap; padding: 8px 12px }
    .header-search { display: none }
    .logo img { height: 150px }
    .header-right { order: 1 }
    .main-nav { order: 2; width: 100%; justify-content: flex-start; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; border-top: 1px solid var(--warm-100); margin-top: 6px; padding-top: 6px }
    .hero-title { font-size: 1.35rem }
    .hero-sidebar { flex-direction: column }
    .hero-side-card { min-height: 170px }
    .news-grid { grid-template-columns: 1fr }
    .article-title { font-size: 1.5rem }
    .footer-top { grid-template-columns: 1fr; gap: 20px }
    .content-layout { padding: 0 10px }
    .ad-carousel-slide img { max-height:110px }
}
@media (max-width: 480px) {
    .hero-overlay { padding: 18px }
    .hero-title { font-size: 1.15rem }
    .header-inner { padding: 6px 10px }
    .logo img { height: 120px }
    .breaking-label { font-size: .6rem; padding: 0 10px }
    .article-title { font-size: 1.3rem }
    .main-nav .nav-link { padding: 5px 10px; font-size: .74rem }
}