:root{
        --primary:#f39323;
        --primary-light:#ffb257;
        --primary-soft:rgba(243,147,35,0.12);

        --dark:#0b1220;
        --glass:rgba(255,255,255,0.05);

        --border:rgba(255,255,255,0.08);

        --text:#f8fafc;
        --muted:#cbd5e1;
    }

    body{
        background:
            linear-gradient(to bottom, rgba(8,12,22,0.75), rgba(8,12,22,0.96)),
            url('../../imagenes/INDEM.PNGFONDO.png');

        background-size:cover;
        background-position:center;
        background-attachment:fixed;

        color:var(--text);

        font-family:'Poppins', sans-serif;
    }

    /* =========================================
        CONTENEDOR GENERAL
    ========================================= */

    .news-wrapper{
        max-width:1400px;
        margin:0 auto;
        padding:3rem 1.5rem 5rem;
    }

    /* =========================================
        HERO
    ========================================= */

    .news-hero{
        position:relative;
        overflow:hidden;

        border-radius:32px;

        padding:4rem 3rem;

        margin-bottom:3rem;

        background:
            linear-gradient(
                135deg,
                rgba(15,23,42,0.92),
                rgba(15,23,42,0.75)
            );

        border:1px solid rgba(255,255,255,0.08);

        backdrop-filter:blur(18px);

        box-shadow:
            0 10px 40px rgba(0,0,0,0.45),
            inset 0 1px 0 rgba(255,255,255,0.05);
    }

    .news-hero::before{
        content:'';

        position:absolute;

        top:-180px;
        right:-120px;

        width:420px;
        height:420px;

        background:
            radial-gradient(
                circle,
                rgba(243,147,35,0.18),
                transparent 70%
            );

        pointer-events:none;
    }

    .hero-badge{
        display:inline-flex;
        align-items:center;
        gap:.7rem;

        padding:.8rem 1.2rem;

        margin-bottom:1.5rem;

        border-radius:999px;

        background:var(--primary-soft);

        border:1px solid rgba(243,147,35,0.25);

        color:var(--primary);

        font-size:.82rem;
        font-weight:700;

        letter-spacing:.08em;
        text-transform:uppercase;
    }

    .hero-title{
        font-size:clamp(2.3rem, 5vw, 4.5rem);

        font-weight:800;

        line-height:1.05;

        margin-bottom:1.2rem;

        color:#fff;

        max-width:900px;
    }

    .hero-text{
        max-width:850px;

        color:var(--muted);

        line-height:1.9;

        font-size:1.08rem;
    }

    /* =========================================
        TOOLBAR
    ========================================= */

    .news-toolbar{
        display:flex;
        justify-content:space-between;
        align-items:center;

        gap:1rem;

        margin-bottom:2.5rem;

        flex-wrap:wrap;
    }

    .toolbar-info{
        color:rgba(255,255,255,0.7);

        font-size:.95rem;
    }

    .toolbar-actions{
        display:flex;
        gap:1rem;
        flex-wrap:wrap;
    }

    .toolbar-btn{
        display:inline-flex;
        align-items:center;
        gap:.7rem;

        padding:1rem 1.2rem;

        border-radius:18px;

        text-decoration:none;

        background:rgba(255,255,255,0.05);

        border:1px solid rgba(255,255,255,0.08);

        color:#fff;

        font-weight:600;

        transition:.3s ease;
    }

    .toolbar-btn:hover{
        transform:translateY(-2px);

        border-color:rgba(243,147,35,0.35);

        background:rgba(243,147,35,0.10);

        color:#fff;
    }

    /* =========================================
        GRID
    ========================================= */

    .news-grid{
        display:grid;

        grid-template-columns:
            repeat(auto-fill, minmax(340px, 1fr));

        gap:2rem;
    }

    /* =========================================
        TARJETAS
    ========================================= */

    .news-card{
        position:relative;

        display:flex;
        flex-direction:column;

        overflow:hidden;

        border-radius:28px;

        background:
            linear-gradient(
                180deg,
                rgba(255,255,255,0.06),
                rgba(255,255,255,0.03)
            );

        border:1px solid rgba(255,255,255,0.08);

        text-decoration:none !important;

        color:inherit;

        transition:
            transform .45s cubic-bezier(.165,.84,.44,1),
            border-color .3s ease,
            box-shadow .3s ease;

        backdrop-filter:blur(14px);

        min-height:100%;
    }

    .news-card:hover{
        transform:translateY(-10px);

        border-color:rgba(243,147,35,0.45);

        box-shadow:
            0 25px 45px rgba(0,0,0,0.45),
            0 0 0 1px rgba(243,147,35,0.08);
    }

    .news-card::before{
        content:'';

        position:absolute;

        inset:0;

        background:
            linear-gradient(
                to top,
                rgba(243,147,35,0.08),
                transparent 50%
            );

        opacity:0;

        transition:.4s ease;

        pointer-events:none;
    }

    .news-card:hover::before{
        opacity:1;
    }

    /* =========================================
        IMAGEN
    ========================================= */

    .news-img-container{
        position:relative;

        height:240px;

        overflow:hidden;
    }

    .news-img-container img{
        width:100%;
        height:100%;

        object-fit:cover;

        transition:transform .7s ease;
    }

    .news-card:hover .news-img-container img{
        transform:scale(1.06);
    }

    .media-badge{
        position:absolute;

        top:1rem;
        left:1rem;

        display:inline-flex;
        align-items:center;
        gap:.5rem;

        padding:.7rem 1rem;

        border-radius:999px;

        background:rgba(0,0,0,0.65);

        backdrop-filter:blur(12px);

        border:1px solid rgba(255,255,255,0.08);

        color:#fff;

        font-size:.75rem;
        font-weight:700;

        letter-spacing:.05em;
        text-transform:uppercase;
    }

    /* =========================================
        CONTENIDO
    ========================================= */

    .news-content{
        display:flex;
        flex-direction:column;

        flex-grow:1;

        padding:1.7rem;
    }

    .news-date{
        display:flex;
        align-items:center;
        gap:.6rem;

        color:var(--primary);

        font-size:.82rem;
        font-weight:700;

        margin-bottom:1rem;

        letter-spacing:.06em;
        text-transform:uppercase;
    }

    .news-title{
        font-size:1.15rem;

        line-height:1.6;

        font-weight:600;

        color:#f8fafc;

        margin-bottom:1.3rem;
    }

    .news-excerpt{
        color:var(--muted);

        line-height:1.8;

        font-size:.95rem;

        margin-bottom:1.7rem;
    }

    .news-footer{
        margin-top:auto;

        display:flex;
        align-items:center;
        justify-content:space-between;

        gap:1rem;
    }

    .read-more{
        display:inline-flex;
        align-items:center;
        gap:.7rem;

        color:var(--primary);

        font-weight:700;

        font-size:.9rem;

        transition:.3s ease;
    }

    .news-card:hover .read-more{
        transform:translateX(5px);
    }

    .news-arrow{
        transition:.3s ease;
    }

    .news-card:hover .news-arrow{
        transform:translateX(4px);
    }

/* =========================================
    PAGINACIÓN PROFESIONAL
========================================= */

.pagination-container{
    margin-top:5rem;

    display:flex;
    justify-content:center;
    align-items:center;
}

.pagination-container nav{
    display:flex;
    align-items:center;
    justify-content:center;

    padding:1rem 1.2rem;

    border-radius:28px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.05),
            rgba(255,255,255,0.02)
        );

    border:1px solid rgba(255,255,255,0.08);

    backdrop-filter:blur(18px);

    box-shadow:
        0 10px 35px rgba(0,0,0,0.35),
        inset 0 1px 0 rgba(255,255,255,0.04);
}

/* OCULTAR TEXTO "SHOWING..." */
.pagination-container nav p{
    display:none !important;
}

/* CONTENEDOR INTERNO */
.pagination-container nav > div{
    display:flex;
    align-items:center;
    justify-content:center;
}

/* LISTA */
.pagination-container .relative{
    display:flex;
    align-items:center;
    gap:.7rem;
}

/* BOTONES */
.pagination-container a,
.pagination-container span{
    min-width:48px;
    height:48px;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:0 1rem;

    border-radius:16px;

    font-size:.95rem;
    font-weight:700;

    text-decoration:none;

    transition:
        background .25s ease,
        border-color .25s ease,
        transform .25s ease,
        color .25s ease;
}

/* LINKS */
.pagination-container a{
    color:rgba(255,255,255,0.78);

    background:transparent;

    border:1px solid transparent;
}

/* HOVER */
.pagination-container a:hover{
    color:#fff;

    transform:translateY(-2px);

    background:rgba(243,147,35,0.12);

    border-color:rgba(243,147,35,0.28);

    box-shadow:
        0 8px 20px rgba(243,147,35,0.15);
}

/* ACTIVO */
.pagination-container [aria-current="page"] span{
    background:
        linear-gradient(
            135deg,
            #f39323,
            #ffb257
        );

    color:#fff !important;

    border:none;

    box-shadow:
        0 10px 25px rgba(243,147,35,0.35);
}

/* DISABLED */
.pagination-container [aria-disabled="true"] span{
    opacity:.35;

    cursor:not-allowed;
}

/* SVG */
.pagination-container svg{
    width:16px;
    height:16px;
}

/* MOBILE */
@media(max-width:768px){

    .pagination-container nav{
        width:100%;

        overflow-x:auto;

        justify-content:flex-start;
    }

    .pagination-container .relative{
        width:max-content;
    }

}
    /* Links normales */
    .pagination-container a{
        color:rgba(255,255,255,0.78);

        background:transparent;

        border:1px solid transparent;
    }

    /* Hover */
    .pagination-container a:hover{
        color:#fff;

        transform:translateY(-2px);

        background:rgba(243,147,35,0.12);

        border-color:rgba(243,147,35,0.28);

        box-shadow:
            0 8px 20px rgba(243,147,35,0.15);
    }

    /* Página activa */
    .pagination-container span[aria-current="page"] span{
        background:
            linear-gradient(
                135deg,
                var(--primary),
                var(--primary-light)
            );

        color:#fff !important;

        border:none;

        box-shadow:
            0 10px 25px rgba(243,147,35,0.35);
    }

    /* Disabled */
    .pagination-container span[aria-disabled="true"] span{
        opacity:.35;

        cursor:not-allowed;
    }

    /* SVG */
    .pagination-container svg{
        width:16px;
        height:16px;
    }

    /* =========================================
        EMPTY STATE
    ========================================= */

    .empty-state{
        grid-column:1/-1;

        text-align:center;

        padding:5rem 2rem;

        border-radius:30px;

        background:rgba(255,255,255,0.04);

        border:1px solid rgba(255,255,255,0.08);
    }

    .empty-state i{
        font-size:3rem;

        color:rgba(255,255,255,0.2);

        margin-bottom:1.5rem;
    }

    .empty-state p{
        color:rgba(255,255,255,0.6);

        font-size:1rem;
    }

    /* =========================================
        RESPONSIVE
    ========================================= */

    @media(max-width:768px){

        .news-wrapper{
            padding:1.2rem 1rem 4rem;
        }

        .news-hero{
            padding:2rem 1.5rem;

            border-radius:24px;
        }

        .news-grid{
            grid-template-columns:1fr;

            gap:1.5rem;
        }

        .news-toolbar{
            align-items:stretch;
        }

        .toolbar-actions{
            width:100%;
        }

        .toolbar-btn{
            flex:1;

            justify-content:center;
        }

        .hero-title{
            line-height:1.15;
        }

        .pagination-container nav{
            width:100%;

            overflow-x:auto;

            justify-content:flex-start;
        }

        .pagination-container .relative.z-0{
            width:max-content;

            flex-wrap:nowrap;
        }
    }