/* ==========================================================
   NOTICIAS COBACH 34
========================================================== */

.news-hero,
.news-detail-hero {
    position: relative;

    padding:
        75px 0
        85px;

    overflow: hidden;

    color: #fff;

    background:
        radial-gradient(
            circle at 85% 10%,
            rgba(48,143,214,.32),
            transparent 30%
        ),
        linear-gradient(
            125deg,
            #041c35,
            #07345f 55%,
            #0b4d83
        );
}

.news-hero h1 {
    margin:
        12px 0
        20px;

    color: #fff;

    font-size:
        clamp(2.7rem,5vw,4.7rem);

    line-height: 1;

    letter-spacing: -.045em;
}

.news-hero h1 span {
    display: block;

    color: #9fd0f3;
}

.news-hero > .container > p {
    max-width: 680px;

    color:
        rgba(255,255,255,.75);

    line-height: 1.8;
}


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

.news-grid {
    display: grid;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap: 25px;
}

.news-card {
    overflow: hidden;

    border:
        1px solid #dce5ed;

    border-radius: 21px;

    background: #fff;

    box-shadow:
        0 12px 35px
        rgba(8,43,84,.07);

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

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

    box-shadow:
        0 22px 48px
        rgba(8,43,84,.13);
}

.news-image-link {
    position: relative;

    height: 300px;

    display: block;

    overflow: hidden;

    background: #dde6ed;
}

.news-image-link img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform .5s ease;
}

.news-card:hover
.news-image-link img {
    transform:
        scale(1.035);
}

.news-category {
    position: absolute;

    left: 20px;
    bottom: 20px;

    padding:
        7px 11px;

    border-radius: 999px;

    color: #fff;

    background:
        rgba(5,28,53,.82);

    font-size: .72rem;

    font-weight: 850;

    text-transform: uppercase;
}

.news-card-content {
    padding: 28px;
}

.news-date {
    color:
        var(--cobach-red);

    font-size: .78rem;

    font-weight: 800;
}

.news-card h2 {
    margin:
        11px 0
        12px;

    color:
        var(--cobach-blue);

    font-size: 1.45rem;

    line-height: 1.2;
}

.news-card p {
    margin:
        0 0
        20px;

    color:
        var(--muted);

    line-height: 1.7;
}

.news-read-more {
    color:
        var(--cobach-blue);

    font-size: .87rem;

    font-weight: 850;
}


/* ==========================================================
   DETALLE
========================================================== */

.news-detail-header {
    max-width: 950px;
}

.news-detail-category {
    display: inline-flex;

    margin-top: 25px;

    padding:
        7px 11px;

    border-radius: 999px;

    color: #fff;

    background:
        var(--cobach-red);

    font-size: .72rem;

    font-weight: 850;

    text-transform: uppercase;
}

.news-detail h1 {
    max-width: 900px;

    margin:
        18px 0
        18px;

    color: #fff;

    font-size:
        clamp(2.5rem,5vw,4.5rem);

    line-height: 1.02;

    letter-spacing: -.045em;
}

.news-detail-meta {
    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    color:
        rgba(255,255,255,.65);

    font-size: .84rem;
}

.news-detail-container {
    padding:
        60px 0
        90px;
}

.news-detail-image {
    margin:
        0 0
        50px;

    overflow: hidden;

    border-radius: 24px;

    box-shadow:
        0 25px 60px
        rgba(8,43,84,.12);
}

.news-detail-image img {
    width: 100%;

    max-height: 620px;

    object-fit: cover;
}

.news-detail-layout {
    display: grid;

    grid-template-columns:
        minmax(0,1fr)
        280px;

    gap: 60px;

    max-width: 1050px;

    margin: auto;
}

.news-detail-content {
    color:
        var(--text);
}

.news-detail-content p {
    margin:
        0 0
        24px;

    color:
        #4f6070;

    font-size: 1.03rem;

    line-height: 1.9;
}

.news-detail-lead {
    color:
        var(--cobach-blue) !important;

    font-size:
        1.25rem !important;

    font-weight: 650;
}

.news-detail-aside {
    height: fit-content;

    padding: 25px;

    border:
        1px solid #dce5ed;

    border-radius: 18px;

    background: #f5f8fb;
}

.news-detail-aside > span {
    display: block;

    margin-bottom: 8px;

    color:
        var(--cobach-red);

    font-size: .72rem;

    font-weight: 850;

    text-transform: uppercase;
}

.news-detail-aside strong {
    color:
        var(--cobach-blue);

    font-size: 1.15rem;
}

.news-detail-aside p {
    margin:
        6px 0;

    color:
        var(--muted);

    font-size: .87rem;
}

.news-detail-aside a {
    display: inline-block;

    margin-top: 20px;

    color:
        var(--cobach-blue);

    font-size: .83rem;

    font-weight: 850;
}


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

@media (max-width: 850px) {

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

    .news-detail-layout {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 600px) {

    .news-hero,
    .news-detail-hero {
        padding:
            55px 0
            65px;
    }

    .news-image-link {
        height: 230px;
    }

    .news-detail-container {
        padding:
            35px 0
            65px;
    }

}