/* ==========================================================================
   El Capitán — Home v2
   NYT-inspired news homepage styles
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Custom Properties (Light Mode — Default)
   -------------------------------------------------------------------------- */
:root {
    --bg-primary: #FFFFFF;
    --bg-secondary: #F9F9F9;
    --text-primary: #1A1A1A;
    --text-secondary: #666666;
    --text-meta: #999999;
    --accent: #C0392B;
    --accent-bg: #FEF2F2;
    --accent-border: #FECACA;
    --separator: #E8E8E8;
    --card-bg: #F9F9F9;
    --card-border: #EEEEEE;
    --search-bg: #F9F9F9;
    --search-border: #E0E0E0;
    --tag-bg: #F5F5F5;
    --tag-border: #EEEEEE;
    --tag-text: #888888;
    --toggle-active-bg: #1A1A1A;
    --toggle-active-text: #FFFFFF;
    --toggle-inactive-text: #888888;
    --green: #16A34A;
    --red: #EF4444;
}

/* --------------------------------------------------------------------------
   2. Dark Mode
   -------------------------------------------------------------------------- */
html.dark {
    --bg-primary: #0A0A0C;
    --bg-secondary: #111116;
    --text-primary: #E0E0E0;
    --text-secondary: #888888;
    --text-meta: #555555;
    --accent: #C0392B;
    --accent-bg: rgba(220, 38, 38, 0.06);
    --accent-border: rgba(220, 38, 38, 0.12);
    --separator: #1F1F24;
    --card-bg: #111116;
    --card-border: #1F1F24;
    --search-bg: #111116;
    --search-border: #2A2A30;
    --tag-bg: #111116;
    --tag-border: #1F1F24;
    --tag-text: #555555;
    --toggle-active-bg: #FFFFFF;
    --toggle-active-text: #0A0A0C;
    --toggle-inactive-text: #555555;
}

/* --------------------------------------------------------------------------
   3. Keyframes
   -------------------------------------------------------------------------- */
@keyframes elcPulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.4;
        transform: scale(1.15);
    }
}

/* --------------------------------------------------------------------------
   4. Container
   -------------------------------------------------------------------------- */
.elc-home {
    max-width: 1200px;
    margin: 0 auto;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    transition: background-color 0.3s, color 0.3s;
}

/* --------------------------------------------------------------------------
   5. Top Bar
   -------------------------------------------------------------------------- */
.elc-topbar {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 8px 24px;
    border-bottom: 1px solid var(--separator);
    font-size: 12px;
    color: var(--text-meta);
    position: relative;
    z-index: 100;
}

.elc-topbar__left,
.elc-topbar__right {
    display: flex;
    align-items: center;
    gap: 16px;
}

.elc-theme-toggle {
    border: none;
    background: none;
    cursor: pointer;
    font-size: 18px;
    padding: 8px;
    line-height: 1;
    color: var(--text-primary);
    transition: color 0.3s;
    position: relative;
    z-index: 101;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

.elc-theme-toggle:hover {
    opacity: 0.7;
}

/* --------------------------------------------------------------------------
   6. Masthead
   -------------------------------------------------------------------------- */
.elc-masthead {
    text-align: center;
    padding: 28px;
    border-bottom: 3px solid var(--text-primary);
    transition: border-color 0.3s;
}

.elc-masthead__logo img {
    height: 60px;
    width: auto;
}

.elc-masthead__tagline {
    font-size: 11px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--text-meta);
    margin-top: 8px;
}

/* --------------------------------------------------------------------------
   7. Navigation
   -------------------------------------------------------------------------- */
.elc-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
    padding: 12px 24px;
    border-bottom: 1px solid var(--separator);
    flex-wrap: wrap;
}

.elc-nav a {
    font-size: 13px;
    color: var(--text-secondary);
    text-decoration: none;
    text-transform: capitalize;
    transition: color 0.2s;
}

.elc-nav a:hover {
    color: var(--text-primary);
}

.elc-nav a.active {
    color: var(--text-primary);
    font-weight: 700;
}

.elc-nav a.elc-live {
    color: var(--accent);
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   8. Breaking News
   -------------------------------------------------------------------------- */
.elc-breaking {
    display: none;
    align-items: center;
    gap: 12px;
    padding: 10px 24px;
    border-bottom: 1px solid var(--separator);
    background-color: var(--accent-bg);
}

.elc-breaking.active {
    display: flex;
}

.elc-breaking__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--red);
    flex-shrink: 0;
    animation: elcPulse 1.5s ease-in-out infinite;
}

.elc-breaking__label {
    font-size: 11px;
    font-weight: 700;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 1px;
    flex-shrink: 0;
}

.elc-breaking__text {
    font-size: 13px;
    color: var(--text-secondary);
}

/* --------------------------------------------------------------------------
   9. Search
   -------------------------------------------------------------------------- */
.elc-search {
    text-align: center;
    padding: 18px;
    border-bottom: 1px solid var(--separator);
}

.elc-search__box {
    max-width: 520px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    background-color: var(--search-bg);
    border: 1px solid var(--search-border);
    border-radius: 10px;
    overflow: hidden;
    transition: border-color 0.2s;
}

.elc-search__box:focus-within {
    border-color: var(--text-secondary);
}

.elc-search__input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 10px 14px;
    font-size: 14px;
    color: var(--text-primary);
    outline: none;
    font-family: inherit;
}

.elc-search__input::placeholder {
    color: var(--text-meta);
}

.elc-search__submit {
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 10px 14px;
    font-size: 14px;
    color: var(--text-meta);
    transition: color 0.2s;
}

.elc-search__submit:hover {
    color: var(--text-primary);
}

.elc-search__tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
}

.elc-search__tag {
    font-size: 12px;
    padding: 4px 12px;
    border-radius: 20px;
    border: 1px solid var(--tag-border);
    background-color: var(--tag-bg);
    color: var(--tag-text);
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s;
}

.elc-search__tag:hover {
    border-color: var(--text-secondary);
    color: var(--text-secondary);
}

.elc-search__results {
    display: none;
    max-width: 520px;
    margin: 12px auto 0;
    background-color: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 10px;
    padding: 14px;
    text-align: left;
}

.elc-search__results.active {
    display: block;
}

/* --------------------------------------------------------------------------
   10. Hero Grid
   -------------------------------------------------------------------------- */
.elc-hero {
    display: grid;
    grid-template-columns: 1fr 1px 1.5fr 1px 1fr;
    padding: 28px;
    gap: 0;
}

.elc-hero__col {
    padding: 0 24px;
}

.elc-hero__col:first-child {
    padding-left: 0;
}

.elc-hero__col:last-child {
    padding-right: 0;
}

.elc-hero__divider {
    background-color: var(--separator);
    width: 1px;
    align-self: stretch;
}

.elc-cat-label {
    font-size: 11px;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 600;
    margin-bottom: 8px;
}

.elc-hero__main-title {
    font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
    font-size: 30px;
    font-weight: 900;
    line-height: 1.2;
    margin-bottom: 12px;
}

.elc-hero__main-title a {
    color: inherit;
    text-decoration: none;
}

.elc-hero__main-title a:hover {
    text-decoration: underline;
}

.elc-hero__secondary-title {
    font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 8px;
}

.elc-hero__secondary-title a {
    color: inherit;
    text-decoration: none;
}

.elc-hero__secondary-title a:hover {
    text-decoration: underline;
}

.elc-hero__excerpt {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 8px;
}

.elc-hero__meta {
    font-size: 12px;
    color: var(--text-meta);
}

.elc-hero__image {
    width: 100%;
    border-radius: 6px;
    margin-top: 14px;
    display: block;
}

.elc-story-separator {
    border: none;
    border-top: 1px solid var(--separator);
    margin: 18px 0;
    padding-top: 18px;
}

/* --------------------------------------------------------------------------
   11. Thermometer
   -------------------------------------------------------------------------- */
.elc-thermometer {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 24px;
    font-size: 12px;
    color: var(--text-meta);
    border-top: 1px solid var(--separator);
    border-bottom: 1px solid var(--separator);
}

.elc-thermometer__label {
    flex-shrink: 0;
    font-weight: 600;
}

.elc-thermometer__bar {
    flex: 1;
    height: 6px;
    border-radius: 3px;
    background-color: var(--separator);
    overflow: hidden;
}

.elc-thermometer__fill {
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--red), #F59E0B, var(--green));
    transition: width 0.6s ease;
}

.elc-thermometer__value {
    flex-shrink: 0;
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   12. Pulso del Día
   -------------------------------------------------------------------------- */
.elc-pulso {
    border-top: 3px solid var(--text-primary);
    padding: 24px;
    transition: border-color 0.3s;
}

.elc-pulso__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 12px;
}

.elc-pulso__title {
    font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
    font-size: 22px;
    font-weight: 700;
}

.elc-pulso__toggle {
    display: flex;
    background-color: var(--tag-bg);
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--tag-border);
}

.elc-pulso__toggle-btn {
    font-size: 13px;
    padding: 8px 18px;
    border: none;
    background: transparent;
    color: var(--toggle-inactive-text);
    cursor: pointer;
    font-family: inherit;
    transition: background-color 0.2s, color 0.2s;
}

.elc-pulso__toggle-btn.active {
    background-color: var(--toggle-active-bg);
    color: var(--toggle-active-text);
    border-radius: 6px;
}

.elc-pulso__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.elc-pulso__card {
    background-color: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 10px;
    padding: 18px;
    transition: border-color 0.2s;
}

.elc-pulso__card:hover {
    border-color: var(--text-meta);
}

/* --------------------------------------------------------------------------
   13. Audio Briefing
   -------------------------------------------------------------------------- */
.elc-audio {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 24px;
    border-top: 1px solid var(--separator);
}

.elc-audio__play {
    background-color: var(--text-primary);
    color: var(--bg-primary);
    border: none;
    border-radius: 8px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 16px;
    flex-shrink: 0;
    transition: opacity 0.2s;
}

.elc-audio__play:hover {
    opacity: 0.8;
}

.elc-audio__info {
    flex: 1;
}

.elc-audio__title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 2px;
}

.elc-audio__duration {
    font-size: 12px;
    color: var(--text-meta);
}

.elc-audio__player {
    display: none;
    width: 100%;
    margin-top: 12px;
}

.elc-audio__player.active {
    display: block;
}

/* --------------------------------------------------------------------------
   14. More News
   -------------------------------------------------------------------------- */
.elc-more {
    padding: 24px;
    border-top: 1px solid var(--separator);
}

.elc-more__title {
    font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
    font-size: 20px;
    font-weight: 700;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--text-primary);
    margin-bottom: 20px;
    transition: border-color 0.3s;
}

.elc-more__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.elc-more__item {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.elc-more__thumb {
    width: 80px;
    height: 80px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
}

.elc-more__content {
    flex: 1;
    min-width: 0;
}

.elc-more__item-title {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 6px;
}

.elc-more__item-title a {
    color: inherit;
    text-decoration: none;
}

.elc-more__item-title a:hover {
    text-decoration: underline;
}

.elc-more__item-cat {
    font-size: 11px;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
    margin-bottom: 4px;
}

.elc-more__item-time {
    font-size: 12px;
    color: var(--text-meta);
}

/* --------------------------------------------------------------------------
   15. Reactions
   -------------------------------------------------------------------------- */
.elc-reactions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.elc-reactions__btn {
    font-size: 12px;
    border-radius: 20px;
    border: 1px solid var(--card-border);
    background-color: var(--card-bg);
    color: var(--text-secondary);
    padding: 4px 12px;
    cursor: pointer;
    font-family: inherit;
    transition: border-color 0.2s, color 0.2s, background-color 0.2s;
}

.elc-reactions__btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.elc-reactions__btn.reacted {
    background-color: var(--accent);
    border-color: var(--accent);
    color: #FFFFFF;
}

/* --------------------------------------------------------------------------
   16. Responsive — Tablet (max-width: 1024px)
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .elc-hero {
        grid-template-columns: 1.5fr 1px 1fr;
    }

    .elc-hero__col:first-child,
    .elc-hero__col:first-child + .elc-hero__divider {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   17. Responsive — Mobile (max-width: 768px)
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .elc-home {
        font-size: 14px;
    }

    .elc-topbar {
        flex-direction: column;
        gap: 8px;
        text-align: center;
    }

    .elc-masthead {
        padding: 20px 16px;
    }

    .elc-nav {
        flex-wrap: wrap;
        gap: 12px;
        padding: 10px 16px;
    }

    .elc-hero {
        grid-template-columns: 1fr;
        padding: 20px 16px;
        gap: 0;
    }

    .elc-hero__divider {
        display: none;
    }

    .elc-hero__col {
        padding: 0;
    }

    .elc-hero__col:first-child {
        display: block;
    }

    .elc-hero__main-title {
        font-size: 24px;
    }

    .elc-hero__secondary-title {
        font-size: 16px;
    }

    .elc-story-separator {
        margin: 14px 0;
        padding-top: 14px;
    }

    .elc-pulso {
        padding: 20px 16px;
    }

    .elc-pulso__grid {
        grid-template-columns: 1fr;
    }

    .elc-more {
        padding: 20px 16px;
    }

    .elc-more__grid {
        grid-template-columns: 1fr;
    }

    .elc-search {
        padding: 14px 16px;
    }

    .elc-breaking {
        padding: 10px 16px;
    }

    .elc-thermometer {
        padding: 14px 16px;
    }

    .elc-audio {
        padding: 16px;
    }
}

/* ==========================================================================
   18. Pulso Cards — Visual Impact
   ========================================================================== */
.elc-pulso__card {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    min-height: 220px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    cursor: pointer;
    transition: transform 0.3s, box-shadow 0.3s;
    border: none;
    background: var(--card-bg);
}

.elc-pulso__card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.15);
}

html.dark .elc-pulso__card:hover {
    box-shadow: 0 12px 24px rgba(0,0,0,0.4);
}

.elc-pulso__card-image {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-size: cover;
    background-position: center;
    z-index: 1;
}

.elc-pulso__card-image::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.75) 100%);
}

.elc-pulso__card-content {
    position: relative;
    z-index: 2;
    padding: 16px;
    color: #fff;
}

.elc-pulso__card-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 3px 10px;
    border-radius: 4px;
    margin-bottom: 8px;
    background: var(--accent);
    color: #fff;
}

.elc-pulso__card-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    color: #fff;
    margin-bottom: 8px;
}

.elc-pulso__card-title a {
    color: #fff;
    text-decoration: none;
}
.elc-pulso__card-title a:hover {
    text-decoration: underline;
}

.elc-pulso__card-score {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.elc-pulso__card-score-label {
    font-size: 11px;
    color: rgba(255,255,255,0.8);
    font-weight: 500;
}

.elc-pulso__card-score-bar {
    flex: 1;
    height: 4px;
    background: rgba(255,255,255,0.2);
    border-radius: 2px;
    overflow: hidden;
    max-width: 80px;
}

.elc-pulso__card-score-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.5s ease;
}

.elc-pulso__card-score-fill.positive {
    background: linear-gradient(90deg, #16A34A, #4ADE80);
}

.elc-pulso__card-score-fill.negative {
    background: linear-gradient(90deg, #EF4444, #F87171);
}

.elc-pulso__card-dimension {
    font-size: 10px;
    color: rgba(255,255,255,0.6);
    text-transform: capitalize;
}

.elc-pulso__card-meta {
    font-size: 10px;
    color: rgba(255,255,255,0.5);
    margin-top: 4px;
}

/* No-image fallback */
.elc-pulso__card--no-image {
    background: linear-gradient(135deg, var(--card-bg), var(--bg-secondary));
    border: 1px solid var(--card-border);
}

.elc-pulso__card--no-image .elc-pulso__card-content {
    color: var(--text-primary);
}

.elc-pulso__card--no-image .elc-pulso__card-title {
    color: var(--text-primary);
}
.elc-pulso__card--no-image .elc-pulso__card-title a {
    color: var(--text-primary);
}

.elc-pulso__card--no-image .elc-pulso__card-score-label {
    color: var(--text-secondary);
}

.elc-pulso__card--no-image .elc-pulso__card-dimension {
    color: var(--text-meta);
}

/* Social embed cards */
.elc-pulso__card--social {
    min-height: 180px;
}

.elc-pulso__card--social .elc-pulso__card-source-icon {
    font-size: 14px;
    margin-right: 4px;
}

/* Empty state */
.elc-pulso__empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 40px 20px;
    color: var(--text-meta);
    font-size: 14px;
}

/* ==========================================================================
   19. Single Post Improvements
   ========================================================================== */
.single-post .entry-content,
.single-post .post-content,
.single-post article .entry-content {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 18px;
    line-height: 1.8;
    color: var(--text-primary);
    max-width: 720px;
    margin: 0 auto;
}

.single-post .entry-title,
.single-post .post-title,
.single-post article h1,
.single-post article h2.entry-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 36px;
    font-weight: 900;
    line-height: 1.2;
    color: var(--text-primary);
    margin-bottom: 16px;
}

.single-post .entry-content p {
    margin-bottom: 1.5em;
}

.single-post .entry-content blockquote {
    border-left: 4px solid var(--accent);
    padding: 12px 20px;
    margin: 24px 0;
    font-style: italic;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    border-radius: 0 8px 8px 0;
}

.single-post .post-thumbnail img,
.single-post .entry-content > .wp-block-image img,
.single-post article .featured-image img {
    width: 100%;
    max-height: 480px;
    object-fit: cover;
    border-radius: 12px;
    margin-bottom: 24px;
}

/* Category badge on single posts */
.single-post .category-badge,
.single-post .entry-meta .cat-links a,
.single-post .post-categories a {
    background: var(--accent);
    color: #fff !important;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
}

/* Meta info styling */
.single-post .entry-meta,
.single-post .post-meta {
    font-size: 13px;
    color: var(--text-meta);
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--separator);
}

/* Reactions section styling on single posts */
.elc-reactions {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 2px solid var(--separator);
}

.elc-reactions::before {
    content: '\00BF Qu\00E9  te gener\00F3  esta noticia?';
    display: block;
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 12px;
}

.elc-reactions__btn {
    font-size: 13px;
    padding: 10px 18px;
    border-radius: 24px;
    font-weight: 500;
    transition: all 0.25s ease;
}

.elc-reactions__btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(192, 57, 43, 0.2);
}

/* Dark mode adjustments for single posts */
html.dark .single-post .entry-content,
html.dark .single-post article .entry-content {
    color: var(--text-primary);
}

html.dark .single-post .entry-title,
html.dark .single-post article h1 {
    color: #fff;
}

/* Social embeds in content */
.single-post .entry-content iframe,
.single-post .entry-content .twitter-tweet,
.single-post .entry-content .instagram-media,
.single-post .entry-content tiktok-embed {
    max-width: 100% !important;
    margin: 24px auto !important;
    display: block;
}

/* Related posts / navigation */
.single-post .post-navigation,
.single-post .nav-links {
    margin-top: 40px;
    padding-top: 24px;
    border-top: 2px solid var(--text-primary);
}

.single-post .post-navigation a,
.single-post .nav-links a {
    color: var(--text-primary);
    text-decoration: none;
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 700;
}

.single-post .post-navigation a:hover,
.single-post .nav-links a:hover {
    color: var(--accent);
}

/* Load Google Fonts on single posts too */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700;900&family=Inter:wght@400;500;600;700&display=swap');

/* Responsive single post */
@media (max-width: 768px) {
    .single-post .entry-title,
    .single-post article h1 {
        font-size: 26px;
    }

    .single-post .entry-content {
        font-size: 16px;
    }
}

/* ==========================================================================
   20. Home Visual Enhancements
   ========================================================================== */

/* Hero main story - add subtle gradient background */
.elc-hero__col:nth-child(3) {
    position: relative;
}

/* Make hero image more impactful */
.elc-hero__image {
    transition: transform 0.3s;
}

.elc-hero__image:hover {
    transform: scale(1.02);
}

/* Better link hover effects */
.elc-hero__main-title a:hover,
.elc-hero__secondary-title a:hover {
    color: var(--accent);
    text-decoration: none;
}

/* More news items hover */
.elc-more__item {
    transition: background 0.2s;
    border-radius: 8px;
    padding: 12px;
}

.elc-more__item:hover {
    background: var(--bg-secondary);
}

/* Search box focus state */
.elc-search__box:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.1);
}

/* Thermometer enhancements */
.elc-thermometer {
    background: var(--bg-secondary);
    border-radius: 8px;
    padding: 12px 20px;
    margin: 0 24px 8px;
}

/* Pulso toggle buttons - more polished */
.elc-pulso__toggle-btn {
    border-radius: 6px;
    font-weight: 500;
    transition: all 0.25s ease;
}

.elc-pulso__toggle-btn:hover:not(.active) {
    color: var(--text-primary);
}

/* Audio section - more appealing */
.elc-audio {
    background: var(--bg-secondary);
    border-radius: 10px;
    padding: 16px 20px;
    margin: 16px 24px;
    border-top: none;
}

.elc-audio__btn {
    border-radius: 24px;
    padding: 12px 24px;
    font-weight: 600;
    transition: all 0.25s;
}

.elc-audio__btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* Nav hover effects */
.elc-nav a {
    position: relative;
    padding-bottom: 2px;
}

.elc-nav a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--accent);
    transition: width 0.3s;
}

.elc-nav a:hover::after,
.elc-nav a.active::after {
    width: 100%;
}

/* Smooth scrolling */
.elc-home {
    scroll-behavior: smooth;
}

/* Better masthead */
.elc-masthead {
    background: var(--bg-primary);
    position: relative;
}

.elc-masthead__logo img {
    transition: opacity 0.3s;
}

/* Breaking news enhanced */
.elc-breaking.active {
    animation: slideDown 0.3s ease;
}

@keyframes slideDown {
    from { transform: translateY(-100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* Footer spacing */
.elc-home > section:last-child,
.elc-home > div:last-child {
    padding-bottom: 40px;
}

/* ==========================================================================
   21. Dark Mode — Force overrides (Forcast theme compatibility)
   ========================================================================== */
html.dark .elc-home,
html.dark .elc-home * {
    color: var(--text-primary);
}

html.dark .elc-hero__main-title,
html.dark .elc-hero__main-title a,
html.dark .elc-hero__secondary-title,
html.dark .elc-hero__secondary-title a {
    color: #FFFFFF !important;
}

html.dark .elc-hero__excerpt {
    color: #AAAAAA !important;
}

html.dark .elc-hero__meta {
    color: #666666 !important;
}

html.dark .elc-cat-label {
    color: var(--accent) !important;
}

html.dark .elc-masthead__tagline {
    color: #555555 !important;
}

html.dark .elc-nav a {
    color: #999999 !important;
}

html.dark .elc-nav a.active {
    color: #FFFFFF !important;
}

html.dark .elc-nav a.elc-live {
    color: var(--accent) !important;
}

html.dark .elc-pulso__title {
    color: #FFFFFF !important;
}

html.dark .elc-more__title {
    color: #FFFFFF !important;
}

html.dark .elc-more__item-title a {
    color: #E0E0E0 !important;
}

html.dark .elc-more__item-meta {
    color: #666666 !important;
}

html.dark .elc-search__input {
    color: #E0E0E0 !important;
}

html.dark .elc-search__input::placeholder {
    color: #555555 !important;
}

html.dark .elc-breaking__text {
    color: #AAAAAA !important;
}

html.dark .elc-topbar {
    color: #666666 !important;
}

html.dark .elc-thermometer {
    color: #888888 !important;
}

html.dark .elc-home h1,
html.dark .elc-home h2,
html.dark .elc-home h3,
html.dark .elc-home h4,
html.dark .elc-home h5 {
    color: #FFFFFF !important;
}

html.dark .elc-home a {
    color: #E0E0E0;
}

html.dark .elc-home a:hover {
    color: var(--accent);
}

/* Dark mode backgrounds - force override theme */
html.dark .elc-home {
    background: #0A0A0C !important;
}

html.dark .elc-topbar {
    background: #0A0A0C !important;
    border-color: #1F1F24 !important;
}

html.dark .elc-masthead {
    background: #0A0A0C !important;
    border-color: #E0E0E0 !important;
}

html.dark .elc-nav {
    background: #0A0A0C !important;
    border-color: #1F1F24 !important;
}

html.dark .elc-search {
    background: #0A0A0C !important;
    border-color: #1F1F24 !important;
}

html.dark .elc-search__box {
    background: #111116 !important;
    border-color: #2A2A30 !important;
}

html.dark .elc-more {
    background: #0A0A0C !important;
}

html.dark .elc-story-separator {
    border-color: #1F1F24 !important;
}

html.dark .elc-hero__divider {
    background: #1F1F24 !important;
}

/* Dark mode for single posts - Forcast theme overrides */
html.dark .single-post article h1,
html.dark .single-post article h2,
html.dark .single-post .entry-title,
html.dark .single-post .post-title {
    color: #FFFFFF !important;
}

html.dark .single-post .entry-content,
html.dark .single-post .entry-content p,
html.dark .single-post article .entry-content {
    color: #E0E0E0 !important;
}

html.dark .single-post .entry-meta,
html.dark .single-post .post-meta {
    color: #666666 !important;
}

html.dark .single-post {
    background: #0A0A0C !important;
}

html.dark .single-post article,
html.dark .single-post .site-content,
html.dark .single-post .content-area {
    background: #0A0A0C !important;
}

html.dark body.single-post {
    background: #0A0A0C !important;
}

/* ==========================================================================
   THEME HEADER/FOOTER HIDING — Home v2 Template
   Hide the Forcast theme's header, footer, loader, and ancillary chrome
   so only the custom .elc-home content is visible.
   Body classes confirmed from live markup:
     .page-template-template-home-v2-php
     .page-template-template-home-v2
     body.page-id-7727
   ========================================================================== */

/* ---------- Header (Elementor template 4869 + theme header) ---------- */
.page-template-template-home-v2-php .elementor-4869,
.page-template-template-home-v2 .elementor-4869,
body.page-id-7727 .elementor-4869,
.page-template-template-home-v2-php header.main-header,
.page-template-template-home-v2 header.main-header,
body.page-id-7727 header.main-header,
.page-template-template-home-v2-php .main-header,
.page-template-template-home-v2 .main-header,
body.page-id-7727 .main-header,
.page-template-template-home-v2-php #masthead,
.page-template-template-home-v2 #masthead,
body.page-id-7727 #masthead,
.page-template-template-home-v2-php .site-header,
.page-template-template-home-v2 .site-header,
body.page-id-7727 .site-header,
.page-template-template-home-v2-php .header-area,
.page-template-template-home-v2 .header-area,
body.page-id-7727 .header-area,
.page-template-template-home-v2-php .navbar,
.page-template-template-home-v2 .navbar,
body.page-id-7727 .navbar {
    display: none !important;
}

/* ---------- Hidden sidebar, mobile menu, search overlay ---------- */
.page-template-template-home-v2-php .hidden-bar,
.page-template-template-home-v2 .hidden-bar,
body.page-id-7727 .hidden-bar,
.page-template-template-home-v2-php .side-mobile-menu,
.page-template-template-home-v2 .side-mobile-menu,
body.page-id-7727 .side-mobile-menu,
.page-template-template-home-v2-php .bytf__search-wrapper,
.page-template-template-home-v2 .bytf__search-wrapper,
body.page-id-7727 .bytf__search-wrapper {
    display: none !important;
}

/* ---------- Footer (Elementor template 5500 + theme footer) ---------- */
.page-template-template-home-v2-php .elementor-5500,
.page-template-template-home-v2 .elementor-5500,
body.page-id-7727 .elementor-5500,
.page-template-template-home-v2-php .site-footer,
.page-template-template-home-v2 .site-footer,
body.page-id-7727 .site-footer,
.page-template-template-home-v2-php .footer-area,
.page-template-template-home-v2 .footer-area,
body.page-id-7727 .footer-area,
.page-template-template-home-v2-php .footer-widget-area,
.page-template-template-home-v2 .footer-widget-area,
body.page-id-7727 .footer-widget-area,
.page-template-template-home-v2-php #footer,
.page-template-template-home-v2 #footer,
body.page-id-7727 #footer,
.page-template-template-home-v2-php .copyright-area,
.page-template-template-home-v2 .copyright-area,
body.page-id-7727 .copyright-area,
.page-template-template-home-v2-php footer:not(.elc-footer),
.page-template-template-home-v2 footer:not(.elc-footer),
body.page-id-7727 footer:not(.elc-footer) {
    display: none !important;
}

/* Ensure our footer is always visible */
.elc-footer {
    display: block !important;
    visibility: visible !important;
}

/* ---------- Breadcrumbs & page title ---------- */
.page-template-template-home-v2-php .breadcrumb,
.page-template-template-home-v2 .breadcrumb,
body.page-id-7727 .breadcrumb,
.page-template-template-home-v2-php .breadcrumbs,
.page-template-template-home-v2 .breadcrumbs,
body.page-id-7727 .breadcrumbs,
.page-template-template-home-v2-php .page-title,
.page-template-template-home-v2 .page-title,
body.page-id-7727 .page-title,
.page-template-template-home-v2-php .entry-title,
.page-template-template-home-v2 .entry-title,
body.page-id-7727 .entry-title,
.page-template-template-home-v2-php .bytf-breadcrumb,
.page-template-template-home-v2 .bytf-breadcrumb,
body.page-id-7727 .bytf-breadcrumb {
    display: none !important;
}

/* ---------- Loader overlay ---------- */
.page-template-template-home-v2-php #bytf__loader,
.page-template-template-home-v2 #bytf__loader,
body.page-id-7727 #bytf__loader {
    display: none !important;
}

/* ---------- Back-to-top button (theme's) ---------- */
.page-template-template-home-v2-php .back-top-btn,
.page-template-template-home-v2 .back-top-btn,
body.page-id-7727 .back-top-btn {
    display: none !important;
}

/* ---------- WP Admin bar top margin override ---------- */
.page-template-template-home-v2-php.admin-bar .elc-home,
.page-template-template-home-v2.admin-bar .elc-home,
body.page-id-7727.admin-bar .elc-home {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.page-template-template-home-v2-php.admin-bar,
.page-template-template-home-v2.admin-bar,
body.page-id-7727.admin-bar {
    margin-top: 0 !important;
}

/* ---------- Ensure .elc-home content stays visible ---------- */
.page-template-template-home-v2-php .elc-home,
.page-template-template-home-v2 .elc-home,
body.page-id-7727 .elc-home {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* ==========================================================================
   THEME HEADER/FOOTER HIDING — Single Post Template
   Hide the Forcast theme's header and footer on single posts while
   keeping the theme's content area (article body) visible.
   ========================================================================== */

/* ---------- Header on single posts ---------- */
body.single-post .elementor-4869,
body.single-post header.main-header,
body.single-post .main-header,
body.single-post #masthead,
body.single-post .site-header,
body.single-post .header-area,
body.single-post .navbar {
    display: none !important;
}

/* ---------- Hidden sidebar / mobile menu on single posts ---------- */
body.single-post .hidden-bar,
body.single-post .side-mobile-menu,
body.single-post .bytf__search-wrapper {
    display: none !important;
}

/* ---------- Footer on single posts ---------- */
body.single-post .elementor-5500,
body.single-post .site-footer,
body.single-post .footer-area,
body.single-post .footer-widget-area,
body.single-post #footer,
body.single-post .copyright-area,
body.single-post footer {
    display: none !important;
}

/* ---------- Loader on single posts ---------- */
body.single-post #bytf__loader {
    display: none !important;
}

/* ---------- Back-to-top on single posts ---------- */
body.single-post .back-top-btn {
    display: none !important;
}

/* ---------- WP Admin bar margin on single posts ---------- */
body.single-post.admin-bar {
    margin-top: 0 !important;
}

/* ---------- Keep theme content area visible on single posts ---------- */
body.single-post .site-content,
body.single-post .content-area,
body.single-post article,
body.single-post .entry-content {
    display: block !important;
    visibility: visible !important;
}

/* ==========================================================================
   REDESIGNED TEMPLATE — New Sections
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero Section
   -------------------------------------------------------------------------- */
.elc-hero-main {
    position: relative;
    min-height: 420px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    margin: 0 0 24px;
    border-radius: 0;
}

.elc-hero-main__image {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-size: cover;
    background-position: center;
    z-index: 1;
}

.elc-hero-main__overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 60%, rgba(0,0,0,0.9) 100%);
    z-index: 2;
}

.elc-hero-main__content {
    position: relative;
    z-index: 3;
    padding: 40px 32px;
    max-width: 720px;
}

.elc-hero-main__title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 36px;
    font-weight: 900;
    line-height: 1.15;
    color: #FFFFFF;
    margin-bottom: 12px;
}

.elc-hero-main__title a {
    color: #FFFFFF;
    text-decoration: none;
}
.elc-hero-main__title a:hover {
    text-decoration: underline;
}

.elc-hero-main__excerpt {
    font-size: 16px;
    line-height: 1.6;
    color: rgba(255,255,255,0.85);
    margin-bottom: 12px;
    max-width: 600px;
}

.elc-hero-main__meta {
    font-size: 13px;
    color: rgba(255,255,255,0.6);
}

/* No-image hero fallback */
.elc-hero-main--no-image {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
}

@media (max-width: 768px) {
    .elc-hero-main {
        min-height: 300px;
    }
    .elc-hero-main__title {
        font-size: 26px;
    }
    .elc-hero-main__content {
        padding: 24px 16px;
    }
}

/* --------------------------------------------------------------------------
   Secondary Stories Grid
   -------------------------------------------------------------------------- */
.elc-stories {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    padding: 0 24px 32px;
}

.elc-story-card {
    border-radius: 10px;
    overflow: hidden;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    transition: transform 0.3s, box-shadow 0.3s;
}

.elc-story-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

html.dark .elc-story-card:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}

.elc-story-card__image {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    display: block;
}

.elc-story-card__image-placeholder {
    width: 100%;
    aspect-ratio: 16/9;
    background: linear-gradient(135deg, var(--separator), var(--card-bg));
}

.elc-story-card__body {
    padding: 14px;
}

.elc-story-card__title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    margin-top: 8px;
}

.elc-story-card__title a {
    color: var(--text-primary);
    text-decoration: none;
}
.elc-story-card__title a:hover {
    color: var(--accent);
}

.elc-story-card__meta {
    font-size: 11px;
    color: var(--text-meta);
    margin-top: 6px;
}

@media (max-width: 1024px) {
    .elc-stories {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .elc-stories {
        grid-template-columns: 1fr;
        padding: 0 16px 24px;
    }
}

/* --------------------------------------------------------------------------
   Category Badges with Section Colors
   -------------------------------------------------------------------------- */
.elc-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    padding: 3px 10px;
    border-radius: 3px;
    color: #FFFFFF;
    font-family: 'Inter', sans-serif;
}

.elc-badge--politica { background: #3061F3; }
.elc-badge--economia { background: #F59E0B; }
.elc-badge--deportes { background: #16A34A; }
.elc-badge--tecnologia { background: #8B5CF6; }
.elc-badge--salud { background: #EF4444; }
.elc-badge--cultura { background: #EC4899; }
.elc-badge--ciencia { background: #06B6D4; }
.elc-badge--ia { background: #F97316; }
.elc-badge--transporte { background: #64748B; }
.elc-badge--viajes { background: #14B8A6; }
.elc-badge--default { background: #6B7280; }

/* Also color the nav links subtly on hover */
.elc-nav a[data-section="politica"]:hover { color: #3061F3 !important; }
.elc-nav a[data-section="economia"]:hover { color: #F59E0B !important; }
.elc-nav a[data-section="deportes"]:hover { color: #16A34A !important; }
.elc-nav a[data-section="tecnologia"]:hover { color: #8B5CF6 !important; }
.elc-nav a[data-section="salud"]:hover { color: #EF4444 !important; }
.elc-nav a[data-section="cultura"]:hover { color: #EC4899 !important; }
.elc-nav a[data-section="ciencia"]:hover { color: #06B6D4 !important; }

/* --------------------------------------------------------------------------
   Lo Más Leído
   -------------------------------------------------------------------------- */
.elc-most-read {
    padding: 24px;
    border-top: 3px solid var(--text-primary);
    margin: 0 24px;
}

.elc-most-read__title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 18px;
    color: var(--text-primary);
}

.elc-most-read__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}

.elc-most-read__item {
    display: flex;
    gap: 14px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--separator);
    transition: background 0.2s;
    border-radius: 6px;
}

.elc-most-read__item:hover {
    background: var(--bg-secondary);
}

.elc-most-read__number {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 32px;
    font-weight: 900;
    color: var(--accent);
    opacity: 0.3;
    line-height: 1;
    min-width: 36px;
}

.elc-most-read__content {
    flex: 1;
}

.elc-most-read__item-title {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
}

.elc-most-read__item-title a {
    color: var(--text-primary);
    text-decoration: none;
}
.elc-most-read__item-title a:hover {
    color: var(--accent);
}

.elc-most-read__item-meta {
    font-size: 11px;
    color: var(--text-meta);
    margin-top: 4px;
}

@media (max-width: 768px) {
    .elc-most-read__grid {
        grid-template-columns: 1fr;
    }
    .elc-most-read {
        padding: 20px 0;
        margin: 0 16px;
    }
}

/* --------------------------------------------------------------------------
   Por Sección
   -------------------------------------------------------------------------- */
.elc-by-section {
    padding: 24px;
}

.elc-by-section__title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 18px;
    color: var(--text-primary);
    padding-bottom: 8px;
    border-bottom: 2px solid var(--text-primary);
}

.elc-by-section__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.elc-by-section__card {
    border-top: 3px solid var(--separator);
    padding-top: 12px;
}

.elc-by-section__card--politica { border-top-color: #3061F3; }
.elc-by-section__card--economia { border-top-color: #F59E0B; }
.elc-by-section__card--deportes { border-top-color: #16A34A; }
.elc-by-section__card--tecnologia { border-top-color: #8B5CF6; }

.elc-by-section__card-image {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    border-radius: 6px;
    margin-bottom: 10px;
}

.elc-by-section__card-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    margin-top: 6px;
}

.elc-by-section__card-title a {
    color: var(--text-primary);
    text-decoration: none;
}
.elc-by-section__card-title a:hover {
    color: var(--accent);
}

.elc-by-section__card-meta {
    font-size: 11px;
    color: var(--text-meta);
    margin-top: 6px;
}

@media (max-width: 1024px) {
    .elc-by-section__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .elc-by-section__grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   FOOTER — World-class newspaper footer
   ========================================================================== */
.elc-footer {
    background: #111116;
    color: rgba(255,255,255,0.8);
    margin-top: 48px;
}

.elc-footer a {
    color: rgba(255,255,255,0.65);
    text-decoration: none;
    transition: color 0.2s;
}

.elc-footer a:hover {
    color: #FFFFFF;
}

/* Main content area */
.elc-footer__main {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.5fr;
    gap: 40px;
    padding: 48px 24px 36px;
}

/* Brand column */
.elc-footer__brand-logo {
    height: 36px;
    margin-bottom: 12px;
}

.elc-footer__brand-tagline {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.4);
    margin-bottom: 14px;
}

.elc-footer__brand-desc {
    font-size: 13px;
    line-height: 1.6;
    color: rgba(255,255,255,0.5);
    margin-bottom: 20px;
}

/* Social icons */
.elc-footer__social {
    display: flex;
    gap: 12px;
}

.elc-footer__social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.6);
    transition: all 0.25s;
}

.elc-footer__social-link:hover {
    background: var(--accent);
    color: #FFFFFF;
    transform: translateY(-2px);
}

.elc-footer__social-link svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

/* Section columns */
.elc-footer__section-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 16px;
    font-weight: 700;
    color: #FFFFFF;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.elc-footer__links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.elc-footer__links li {
    margin-bottom: 10px;
}

.elc-footer__links a {
    font-size: 13px;
    display: inline-block;
    position: relative;
}

.elc-footer__links a::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--accent);
    transition: width 0.3s;
}

.elc-footer__links a:hover::after {
    width: 100%;
}

/* Newsletter column */
.elc-footer__newsletter-desc {
    font-size: 13px;
    color: rgba(255,255,255,0.5);
    margin-bottom: 14px;
    line-height: 1.5;
}

.elc-footer__newsletter-form {
    display: flex;
    gap: 0;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.15);
}

.elc-footer__newsletter-input {
    flex: 1;
    padding: 12px 14px;
    border: none;
    background: rgba(255,255,255,0.05);
    color: #FFFFFF;
    font-size: 13px;
    font-family: inherit;
    outline: none;
}

.elc-footer__newsletter-input::placeholder {
    color: rgba(255,255,255,0.3);
}

.elc-footer__newsletter-input:focus {
    background: rgba(255,255,255,0.1);
}

.elc-footer__newsletter-btn {
    padding: 12px 20px;
    background: var(--accent);
    color: #FFFFFF;
    border: none;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.2s;
    white-space: nowrap;
}

.elc-footer__newsletter-btn:hover {
    background: #A93226;
}

.elc-footer__newsletter-note {
    font-size: 11px;
    color: rgba(255,255,255,0.3);
    margin-top: 8px;
}

/* Trending strip */
.elc-footer__trending {
    max-width: 1200px;
    margin: 0 auto;
    padding: 16px 24px;
    border-top: 1px solid rgba(255,255,255,0.08);
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.elc-footer__trending-label {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255,255,255,0.4);
    white-space: nowrap;
}

.elc-footer__trending-tag {
    font-size: 11px;
    padding: 4px 12px;
    border-radius: 14px;
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.5);
    border: 1px solid rgba(255,255,255,0.08);
    transition: all 0.2s;
}

.elc-footer__trending-tag:hover {
    background: rgba(255,255,255,0.12);
    color: #FFFFFF;
    border-color: rgba(255,255,255,0.2);
}

/* Bottom bar */
.elc-footer__bottom {
    max-width: 1200px;
    margin: 0 auto;
    padding: 16px 24px;
    border-top: 1px solid rgba(255,255,255,0.08);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    color: rgba(255,255,255,0.3);
}

/* Responsive */
@media (max-width: 1024px) {
    .elc-footer__main {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 768px) {
    .elc-footer__main {
        grid-template-columns: 1fr;
        gap: 28px;
        padding: 32px 16px 24px;
    }
    .elc-footer__bottom {
        flex-direction: column;
        gap: 8px;
        text-align: center;
    }
    .elc-footer__trending {
        justify-content: center;
    }
}

/* --------------------------------------------------------------------------
   Share Buttons
   -------------------------------------------------------------------------- */
.elc-share {
    display: flex;
    gap: 8px;
    margin: 16px 0;
}

.elc-share__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
    color: #FFFFFF;
    transition: opacity 0.2s;
}

.elc-share__btn:hover {
    opacity: 0.85;
}

.elc-share__btn--x { background: #000000; }
.elc-share__btn--facebook { background: #1877F2; }
.elc-share__btn--whatsapp { background: #25D366; }
.elc-share__btn--linkedin { background: #0A66C2; }

/* ==========================================================================
   ANIMATIONS — Professional scroll reveals and micro-interactions
   ========================================================================== */

/* Scroll Reveal base */
.elc-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.elc-reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered delays for cards */
.elc-reveal-delay-1 { transition-delay: 0.1s; }
.elc-reveal-delay-2 { transition-delay: 0.2s; }
.elc-reveal-delay-3 { transition-delay: 0.3s; }
.elc-reveal-delay-4 { transition-delay: 0.4s; }

/* Hero parallax container */
.elc-hero-main {
    overflow: hidden;
}

.elc-hero-main__image {
    transition: transform 0.1s linear;
    will-change: transform;
}

/* Hero content fade-in on load */
.elc-hero-main__content {
    animation: heroFadeIn 1s ease 0.3s both;
}

@keyframes heroFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Badge shimmer effect */
.elc-badge {
    position: relative;
    overflow: hidden;
}

.elc-badge::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    animation: shimmer 3s infinite;
}

@keyframes shimmer {
    0% { left: -100%; }
    50%, 100% { left: 100%; }
}

/* Counter number animation */
.elc-most-read__number {
    animation: numberFade 0.5s ease both;
}

.elc-most-read__item:nth-child(1) .elc-most-read__number { animation-delay: 0.1s; }
.elc-most-read__item:nth-child(2) .elc-most-read__number { animation-delay: 0.2s; }
.elc-most-read__item:nth-child(3) .elc-most-read__number { animation-delay: 0.3s; }
.elc-most-read__item:nth-child(4) .elc-most-read__number { animation-delay: 0.4s; }
.elc-most-read__item:nth-child(5) .elc-most-read__number { animation-delay: 0.5s; }

@keyframes numberFade {
    from {
        opacity: 0;
        transform: scale(0.5);
    }
    to {
        opacity: 0.3;
        transform: scale(1);
    }
}

/* Smooth card entrance */
.elc-story-card {
    animation: cardSlideUp 0.5s ease both;
}

.elc-stories .elc-story-card:nth-child(1) { animation-delay: 0.1s; }
.elc-stories .elc-story-card:nth-child(2) { animation-delay: 0.2s; }
.elc-stories .elc-story-card:nth-child(3) { animation-delay: 0.3s; }
.elc-stories .elc-story-card:nth-child(4) { animation-delay: 0.4s; }

@keyframes cardSlideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Typing cursor for search placeholder */
.elc-search__input::placeholder {
    overflow: hidden;
}

/* Thermometer bar animation */
.elc-thermometer__fill {
    animation: thermometerGrow 1.5s ease 0.5s both;
}

@keyframes thermometerGrow {
    from { width: 0; }
}

/* Pulso cards entrance */
.elc-pulso__card {
    animation: pulsoPop 0.4s ease both;
}

.elc-pulso__grid .elc-pulso__card:nth-child(1) { animation-delay: 0.1s; }
.elc-pulso__grid .elc-pulso__card:nth-child(2) { animation-delay: 0.25s; }
.elc-pulso__grid .elc-pulso__card:nth-child(3) { animation-delay: 0.4s; }

@keyframes pulsoPop {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Nav links subtle bounce on hover */
.elc-nav a:hover {
    animation: navBounce 0.3s ease;
}

@keyframes navBounce {
    0% { transform: translateY(0); }
    50% { transform: translateY(-2px); }
    100% { transform: translateY(0); }
}

/* Footer social icons pulse on hover */
.elc-footer__social-link:hover svg {
    animation: socialPulse 0.4s ease;
}

@keyframes socialPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

/* Breaking news text slide */
.elc-breaking.active .elc-breaking__text {
    animation: breakingSlide 0.8s ease;
}

@keyframes breakingSlide {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Masthead logo fade on load */
.elc-masthead__logo img {
    animation: logoFade 0.8s ease both;
}

@keyframes logoFade {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}