.ce-hero{
    margin:30px 0 40px;
}

.ce-hero-grid{
    display:grid;
    grid-template-columns:2fr 1fr;
    gap:24px;
}

.ce-hero-main{
    position:relative;
    overflow:hidden;
    border-radius:16px;
    background:#111;
    min-height:560px;
}

.ce-hero-main img{

    width:100%;
    height:560px;
    object-fit:cover;

    transition:.6s;

}

.ce-hero-main:hover img{
    transform:scale(1.04);
}

.ce-hero-main::before{

    content:"";
    position:absolute;
    inset:0;

    background:linear-gradient(
        to top,
        rgba(0,0,0,.90),
        rgba(0,0,0,.25),
        rgba(0,0,0,0)
    );

}

.ce-hero-caption{

    position:absolute;

    left:50px;
    right:50px;
    bottom:45px;

    color:#fff;

    z-index:5;

}

.ce-hero-category{

    display:inline-block;

    padding:8px 18px;

    background:#C7A55B;

    color:#fff;

    border-radius:999px;

    font-size:12px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.08em;

    margin-bottom:20px;

}

.ce-hero-caption h2{

    margin:0;

    font-size:56px;

    line-height:1.08;

    font-family:Georgia,serif;

    font-weight:700;

}

.ce-hero-caption h2 a{

    color:#fff;

    text-decoration:none;

}

.ce-hero-caption h2 a:hover{

    color:#F5E8C8;

}

.ce-hero-right{

    display:flex;

    flex-direction:column;

    gap:24px;

}

.ce-hero-small{

    position:relative;

    overflow:hidden;

    border-radius:14px;

    min-height:170px;

}

.ce-hero-small img{

    width:100%;

    height:170px;

    object-fit:cover;

}

.ce-hero-small::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        to top,
        rgba(0,0,0,.85),
        rgba(0,0,0,.15)
    );

}

.ce-hero-small-content{

    position:absolute;

    left:20px;

    right:20px;

    bottom:18px;

    color:#fff;

    z-index:3;

}

.ce-hero-small h3{

    margin:10px 0 0;

    font-size:23px;

    line-height:1.25;

}

.ce-hero-small a{

    color:#fff;

    text-decoration:none;

}

@media(max-width:1100px){

.ce-hero-grid{

grid-template-columns:1fr;

}

}


/* ==========================================================
   NUNTIUS — HERO MÓVIL V4
   Titular compacto + degradado azul editorial
========================================================== */

@media (max-width: 767px) {

    /* ------------------------------------------------------
       HERO PRINCIPAL
    ------------------------------------------------------ */

    .ce-hero-main {
        min-height: 0;
        height: 470px;
        background: #0b274f;
        border-radius: 18px;
        overflow: hidden;
    }


    /* Imagen ocupa toda la tarjeta */

    .ce-hero-main img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }


    /* ------------------------------------------------------
       DEGRADADO AZUL NUNTIUS

       Oscuro abajo.
       Se desvanece aproximadamente hacia la mitad.
       La parte superior conserva la fotografía limpia.
    ------------------------------------------------------ */

    .ce-hero-main::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;

        background:
            linear-gradient(
                to top,
                rgba(6, 28, 58, 0.98) 0%,
                rgba(11, 39, 79, 0.94) 18%,
                rgba(11, 39, 79, 0.78) 31%,
                rgba(11, 39, 79, 0.48) 42%,
                rgba(11, 39, 79, 0.18) 51%,
                rgba(11, 39, 79, 0.00) 60%
            );
    }


    /* ------------------------------------------------------
       CONTENIDO
       Eliminamos cualquier aspecto de "rectángulo negro"
    ------------------------------------------------------ */

    .ce-hero-caption {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;

        z-index: 2;

        width: 100%;
        max-width: none;

        padding:
            26px
            22px
            25px;

        background: transparent !important;
    }


    /* Categoría */

    .ce-hero-category {
        margin-bottom: 10px;
    }


    /* ------------------------------------------------------
       TITULAR PRINCIPAL

       IMPORTANTE:
       evita las palabras gigantes de la captura móvil.
    ------------------------------------------------------ */

    .ce-hero-caption h2 {
        margin: 0;

        font-size: clamp(29px, 8.2vw, 36px) !important;
        line-height: 1.02 !important;

        letter-spacing: -0.025em;

        max-width: 100%;

        overflow-wrap: normal;
        word-break: normal;
        hyphens: none;
    }

    .ce-hero-caption h2 a {
        font-size: inherit !important;
        line-height: inherit !important;

        color: #ffffff;
        text-decoration: none;

        overflow-wrap: normal;
        word-break: normal;
    }


    /* ------------------------------------------------------
       TARJETAS SECUNDARIAS DEL HERO
    ------------------------------------------------------ */

    .ce-hero-right {
        gap: 14px;
    }

    .ce-hero-small {
        min-height: 180px;
        border-radius: 16px;
        overflow: hidden;
    }


    /*
     * En lugar del gris/negro actual:
     * degradado azul Nuntius.
     */

    .ce-hero-small::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;

        background:
            linear-gradient(
                to top,
                rgba(6, 28, 58, 0.96) 0%,
                rgba(11, 39, 79, 0.82) 32%,
                rgba(11, 39, 79, 0.42) 58%,
                rgba(11, 39, 79, 0.05) 100%
            );
    }


    .ce-hero-small-content {
        position: absolute;
        z-index: 2;

        left: 0;
        right: 0;
        bottom: 0;

        padding: 18px 20px;

        background: transparent !important;
    }


    .ce-hero-small h3 {
        margin: 0;

        font-size: 23px !important;
        line-height: 1.08 !important;

        letter-spacing: -0.015em;

        overflow-wrap: normal;
        word-break: normal;
        hyphens: none;
    }

    .ce-hero-small h3 a,
    .ce-hero-small a {
        color: #ffffff;
    }

}


/* ==========================================================
   TELÉFONOS MUY ANGOSTOS
========================================================== */

@media (max-width: 390px) {

    .ce-hero-main {
        height: 440px;
    }

    .ce-hero-caption {
        padding:
            22px
            18px
            22px;
    }

    .ce-hero-caption h2 {
        font-size: 29px !important;
        line-height: 1.03 !important;
    }

    .ce-hero-small h3 {
        font-size: 21px !important;
    }

}



/* ==========================================================
   NUNTIUS — HERO EDITORIAL DESKTOP V5
   Azul Nuntius + imágenes completas en destacadas
========================================================== */


/* ==========================================================
   ESCRITORIO
========================================================== */

@media (min-width: 768px) {

    /* ------------------------------------------------------
       DESTACADA PRINCIPAL
    ------------------------------------------------------ */

    .ce-hero-main {
        position: relative;
        overflow: hidden;
        background: #0b274f;
    }

    .ce-hero-main img {
        position: absolute;
        inset: 0;

        width: 100%;
        height: 100%;

        object-fit: cover;
        object-position: center;

        display: block;
    }


    /*
     * Degradado editorial Nuntius.
     *
     * Oscuro abajo para garantizar lectura.
     * Desaparece progresivamente antes de llegar
     * a la mitad superior de la fotografía.
     */

    .ce-hero-main::before {
        content: "";
        position: absolute;
        inset: 0;

        z-index: 1;
        pointer-events: none;

        background:
            linear-gradient(
                to top,
                rgba(6, 28, 58, 0.98) 0%,
                rgba(11, 39, 79, 0.94) 16%,
                rgba(11, 39, 79, 0.78) 29%,
                rgba(11, 39, 79, 0.48) 40%,
                rgba(11, 39, 79, 0.18) 50%,
                rgba(11, 39, 79, 0.00) 60%
            );
    }


    .ce-hero-caption {
        position: absolute;

        left: 0;
        right: 0;
        bottom: 0;

        z-index: 2;

        width: 100%;
        max-width: none;

        padding: 42px 46px 38px;

        background: transparent !important;
    }


    .ce-hero-caption h2 {
        max-width: 850px;

        font-size: clamp(38px, 3.25vw, 55px);
        line-height: 1.02;

        letter-spacing: -0.025em;

        margin: 0;
    }

    .ce-hero-caption h2 a {
        color: #fff;
    }



    /* ======================================================
       DESTACADAS SECUNDARIAS
       LA FOTO OCUPA TODA LA TARJETA
    ====================================================== */

    .ce-hero-right {
        display: grid;
        gap: 14px;
    }


    .ce-hero-small {
        position: relative;

        width: 100%;
        min-height: 0;

        overflow: hidden;

        background: #0b274f;

        border-radius: 14px;
    }


    /*
     * Esto elimina el efecto actual de imagen cortada
     * en una parte de la tarjeta.
     */

    .ce-hero-small img {
        position: absolute !important;

        inset: 0 !important;

        width: 100% !important;
        height: 100% !important;

        max-width: none !important;

        object-fit: cover !important;
        object-position: center center !important;

        display: block;
    }


    /*
     * Degradado azul sobre TODA la fotografía.
     */

    .ce-hero-small::before {
        content: "";

        position: absolute;
        inset: 0;

        z-index: 1;

        pointer-events: none;

        background:
            linear-gradient(
                to top,
                rgba(6, 28, 58, 0.97) 0%,
                rgba(11, 39, 79, 0.88) 28%,
                rgba(11, 39, 79, 0.58) 50%,
                rgba(11, 39, 79, 0.20) 70%,
                rgba(11, 39, 79, 0.02) 100%
            );
    }


    /*
     * Texto sobre la fotografía.
     */

    .ce-hero-small-content {
        position: absolute;

        left: 0;
        right: 0;
        bottom: 0;

        z-index: 2;

        width: 100%;

        padding: 22px 24px;

        background: transparent !important;
    }


    .ce-hero-small h3 {
        margin: 0;

        font-size: clamp(20px, 1.65vw, 27px);
        line-height: 1.08;

        letter-spacing: -0.015em;

        overflow-wrap: normal;
        word-break: normal;
        hyphens: none;
    }


    .ce-hero-small h3 a,
    .ce-hero-small a {
        color: #fff;
        text-decoration: none;
    }


    /* Categoría dorada mantiene identidad Nuntius */

    .ce-hero-small .ce-hero-category {
        margin-bottom: 9px;
    }

}



/* ==========================================================
   MÓVIL
   Corrección adicional:
   imagen de secundarias ocupa TODA la tarjeta.
   NO modifica el titular principal que ya aprobamos.
========================================================== */

@media (max-width: 767px) {

    .ce-hero-small {
        position: relative;
        overflow: hidden;

        background: #0b274f;
    }


    .ce-hero-small img {
        position: absolute !important;

        inset: 0 !important;

        width: 100% !important;
        height: 100% !important;

        max-width: none !important;

        object-fit: cover !important;
        object-position: center center !important;

        display: block;
    }


    .ce-hero-small::before {
        content: "";

        position: absolute;
        inset: 0;

        z-index: 1;

        background:
            linear-gradient(
                to top,
                rgba(6, 28, 58, 0.97) 0%,
                rgba(11, 39, 79, 0.86) 32%,
                rgba(11, 39, 79, 0.48) 60%,
                rgba(11, 39, 79, 0.05) 100%
            );
    }


    .ce-hero-small-content {
        position: absolute;

        left: 0;
        right: 0;
        bottom: 0;

        z-index: 2;

        width: 100%;

        background: transparent !important;
    }

}