/*==================================================
              STEREOMÍA 100.5 FM
                 ESTILOS BASE
==================================================*/

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}


html{

    scroll-behavior:smooth;

}


body{

    font-family:Arial, Helvetica, sans-serif;

    background:#f6f7fb;

    color:#1e2530;

    overflow-x:hidden;

}


img{

    max-width:100%;

}


a{

    color:inherit;

}


button{

    font-family:inherit;

}


/*==================================================
                    MENÚ SUPERIOR
==================================================*/

.encabezado{

    position:fixed;

    top:0;
    left:0;

    width:100%;

    z-index:10000;

}


.menu{

    width:100%;

    min-height:86px;

    padding:8px 30px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:25px;

    background:#ffffff;

    border-bottom:1px solid rgba(0,0,0,.08);

    box-shadow:0 4px 18px rgba(0,0,0,.12);

}


.menu-logo{

    flex:0 0 auto;

    display:flex;

    align-items:center;

    justify-content:center;

    text-decoration:none;

}


.menu-logo img{

    display:block;

    width:78px;

    height:68px;

    object-fit:contain;

}


.menu-enlaces{

    list-style:none;

    display:flex;

    align-items:center;

    justify-content:flex-end;

    gap:8px;

}


.menu-enlaces li{

    flex:0 0 auto;

}


.menu-enlaces a{

    display:block;

    padding:11px 17px;

    color:#174d93;

    font-size:15px;

    font-weight:700;

    text-decoration:none;

    border-radius:24px;

    transition:
        background .25s ease,
        color .25s ease,
        transform .25s ease;

}


.menu-enlaces a:hover{

    background:#174d93;

    color:#ffffff;

    transform:translateY(-2px);

}


.boton-menu{

    display:none;

    width:45px;

    height:45px;

    border:none;

    border-radius:10px;

    background:#174d93;

    color:#ffffff;

    font-size:22px;

    cursor:pointer;

}


/*==================================================
                 PORTADA PRINCIPAL
==================================================*/

main{

    display:block;

}


.hero{

    width:100%;

    margin-top:86px;

    padding:0;

    background:#ffffff;

    overflow:hidden;

}


.portada-principal{

    display:block;

    width:100%;

    height:auto;

    min-height:0;

    margin:0;

    object-fit:contain;

    object-position:center;

}


/*==================================================
       LOGO, REPRODUCTOR Y REDES BAJO PORTADA
==================================================*/

.bloque-estacion{

    width:100%;

    padding:42px 20px 48px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

    background:#ffffff;

    border-top:1px solid rgba(0,0,0,.05);

    box-shadow:0 10px 30px rgba(0,0,0,.05);

}


.bloque-estacion .logo,
.logo-estacion{

    display:block;

    width:210px;

    max-width:72%;

    height:auto;

    margin:0 auto 22px;

    object-fit:contain;

}


.estado{

    margin-bottom:18px;

    padding:8px 16px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:9px;

    background:#fff1f3;

    color:#d9254e;

    border-radius:25px;

    font-size:14px;

    font-weight:800;

    letter-spacing:.7px;

}


.punto{

    width:11px;

    height:11px;

    display:block;

    border-radius:50%;

    background:#e51e46;

    box-shadow:0 0 0 rgba(229,30,70,.6);

    animation:pulso 1.5s infinite;

}


@keyframes pulso{

    0%{

        box-shadow:0 0 0 0 rgba(229,30,70,.55);

    }

    70%{

        box-shadow:0 0 0 10px rgba(229,30,70,0);

    }

    100%{

        box-shadow:0 0 0 0 rgba(229,30,70,0);

    }

}


.boton-escuchar{

    min-width:250px;

    padding:15px 28px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:11px;

    border:none;

    border-radius:32px;

    background:linear-gradient(
        135deg,
        #174d93,
        #2375c9
    );

    color:#ffffff;

    font-size:16px;

    font-weight:800;

    letter-spacing:.4px;

    cursor:pointer;

    box-shadow:0 10px 25px rgba(23,77,147,.30);

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        filter .25s ease;

}


.boton-escuchar:hover{

    transform:translateY(-3px);

    box-shadow:0 15px 30px rgba(23,77,147,.36);

    filter:brightness(1.06);

}


.boton-escuchar:active{

    transform:translateY(0);

}


.mensaje-reproductor{

    min-height:22px;

    margin-top:12px;

    color:#174d93;

    font-size:14px;

    font-weight:700;

}


.redes{

    margin-top:18px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:15px;

}


.redes a{

    width:52px;

    height:52px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#ffffff;

    text-decoration:none;

    box-shadow:0 7px 20px rgba(0,0,0,.15);

    transition:
        transform .25s ease,
        box-shadow .25s ease;

}


.redes a:hover{

    transform:translateY(-4px) scale(1.05);

    box-shadow:0 12px 25px rgba(0,0,0,.20);

}


.redes img{

    display:block;

    width:35px;

    height:35px;

    object-fit:contain;

}


/*==================================================
                 SECCIONES GENERALES
==================================================*/

.seccion,
.noticias{

    width:100%;

    padding:75px 25px;

}


.seccion:nth-of-type(even){

    background:#f1f4fa;

}


.encabezado-seccion{

    width:100%;

    max-width:900px;

    margin:0 auto 40px;

    text-align:center;

}


.etiqueta-seccion{

    display:inline-block;

    margin-bottom:12px;

    padding:7px 16px;

    color:#d52855;

    background:#ffeaf0;

    border-radius:20px;

    font-size:13px;

    font-weight:800;

    letter-spacing:.8px;

    text-transform:uppercase;

}


.encabezado-seccion h2{

    margin-bottom:13px;

    color:#174d93;

    font-size:38px;

    line-height:1.15;

}


.encabezado-seccion p{

    max-width:700px;

    margin:0 auto;

    color:#5d6673;

    font-size:17px;

    line-height:1.7;

}


/*==================================================
                    LOCUTORES
==================================================*/

.seccion-locutores{

    background:#f5f7fb;

}


.tarjetas{

    width:100%;

    max-width:1150px;

    margin:0 auto;

    display:grid;

    grid-template-columns:repeat(3, 1fr);

    gap:22px;

}


.tarjetas-locutores{

    display:flex;

    justify-content:center;

    align-items:flex-start;

    gap:35px;

    flex-wrap:wrap;

    max-width:1400px;

    margin:40px auto 0 auto;

}


.tarjeta{

    padding:30px;

    background:#ffffff;

    border:1px solid rgba(23,77,147,.08);

    border-radius:20px;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

}


.tarjeta-locutor{

    text-align:center;

}


.tarjeta-locutor .icono{

    width:82px;

    height:82px;

    margin:0 auto 20px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:linear-gradient(
        135deg,
        #174d93,
        #d62c5c
    );

    color:#ffffff;

    font-size:35px;

    box-shadow:0 10px 25px rgba(23,77,147,.20);

}


.tarjeta-locutor h3{

    margin-bottom:12px;

    color:#174d93;

    font-size:24px;

}


.tarjeta-locutor p{

    color:#606977;

    font-size:16px;

    line-height:1.7;

}

/*==================================================
             PARRILLA DE PROGRAMACIÓN
==================================================*/

.seccion-programacion{

    background:#ffffff;

}


.contenedor-tabla{

    width:100%;

    max-width:1180px;

    margin:0 auto;

    overflow-x:auto;

    border-radius:18px;

    box-shadow:0 12px 35px rgba(0,0,0,.10);

}


.tabla-programacion{

    width:100%;

    min-width:760px;

    border-collapse:collapse;

    background:#ffffff;

}


.tabla-programacion thead{

    background:linear-gradient(
        135deg,
        #174d93,
        #246eb8
    );

    color:#ffffff;

}


.tabla-programacion th{

    padding:18px 16px;

    text-align:left;

    font-size:15px;

    letter-spacing:.3px;

}


.tabla-programacion td{

    padding:16px;

    color:#333b46;

    border-bottom:1px solid #e9edf3;

    font-size:15px;

    line-height:1.4;

}


.tabla-programacion tbody tr:nth-child(even){

    background:#f5f7fb;

}


.tabla-programacion tbody tr:hover{

    background:#eaf2ff;

}


.tabla-programacion td:nth-child(3){

    color:#174d93;

    font-weight:800;

}


/*==================================================
                  ÚLTIMAS NOTICIAS
==================================================*/

.noticias{

    background:#f3f5fa;

    overflow:hidden;

}


.slider-noticias{

    width:100%;

    overflow:hidden;

    padding:10px 0 28px;

}


.track-noticias{

    width:max-content;

    display:flex;

    gap:22px;

    animation:mover-noticias 35s linear infinite;

}


.slider-noticias:hover .track-noticias{

    animation-play-state:paused;

}


.noticia{

    width:310px;

    min-height:330px;

    flex:0 0 auto;

    padding:26px;

    background:#ffffff;

    border-radius:20px;

    box-shadow:0 10px 28px rgba(0,0,0,.10);

}


.imagen-noticia{

    width:100%;

    height:155px;

    margin-bottom:22px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:15px;

    background:linear-gradient(
        135deg,
        #174d93,
        #d72d5e
    );

    color:#ffffff;

    font-size:53px;

}


.noticia h3{

    margin-bottom:12px;

    color:#174d93;

    font-size:21px;

    line-height:1.3;

}


.noticia p{

    color:#626b77;

    font-size:15px;

    line-height:1.65;

}


@keyframes mover-noticias{

    from{

        transform:translateX(0);

    }

    to{

        transform:translateX(calc(-50% - 11px));

    }

}


/*==================================================
                     PUBLICIDAD
==================================================*/

.publicidad{

    background:#ffffff;

}


.contacto-comercial{

    width:100%;

    max-width:900px;

    margin:0 auto;

    display:grid;

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

    gap:20px;

}


.dato-contacto{

    min-height:145px;

    padding:22px;

    display:flex;

    align-items:flex-start;

    gap:17px;

    background:#f5f7fb;

    border-radius:16px;

    border:1px solid rgba(23,77,147,.08);

}


.dato-contacto > i{

    width:52px;

    height:52px;

    flex:0 0 auto;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#174d93;

    color:#ffffff;

    font-size:22px;

}


.dato-contacto h3{

    margin-bottom:9px;

    color:#174d93;

    font-size:19px;

}


.dato-contacto p{

    margin-bottom:5px;

    color:#4c5562;

    font-size:15px;

    line-height:1.5;

}


.dato-contacto a{

    color:#d52855;

    font-weight:700;

    text-decoration:none;

}


.dato-contacto a:hover{

    text-decoration:underline;

}


/*==================================================
                       FOOTER
==================================================*/

footer{

    width:100%;

    padding:42px 20px;

    background:#000000;

    color:#ffffff;

    text-align:center;

    border-top:4px solid #d82c5a;

}


.footer-logo{

    margin-bottom:18px;

}


.footer-logo img{

    display:block;

    width:145px;

    height:auto;

    margin:0 auto;

    padding:10px;

    background:#ffffff;

    border-radius:15px;

    object-fit:contain;

}


footer p{

    margin:7px 0;

    color:#ffffff;

    font-size:15px;

    line-height:1.6;

}


footer strong{

    color:#ffffff;

    font-size:20px;

}


/*==================================================
             BOTÓN FLOTANTE DE WHATSAPP
==================================================*/

.whatsapp-float{

    position:fixed;

    right:22px;

    bottom:22px;

    width:62px;

    height:62px;

    display:flex;

    align-items:center;

    justify-content:center;

    border:3px solid #ffffff;

    border-radius:50%;

    background-color:#25d366;

    background-image:url("../img/whats.png");

    background-repeat:no-repeat;

    background-position:center;

    background-size:37px 37px;

    text-decoration:none;

    z-index:11000;

    box-shadow:0 10px 28px rgba(0,0,0,.32);

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        background-color .25s ease;

}


.whatsapp-float:hover{

    transform:scale(1.10);

    background-color:#20ba5a;

    box-shadow:0 15px 32px rgba(0,0,0,.38);

}


.whatsapp-float i{

    display:none;

}


/*==================================================
                  DISEÑO RESPONSIVO
==================================================*/

@media(max-width:900px){

    .menu{

        padding:8px 18px;

    }


    .menu-enlaces{

        gap:3px;

    }


    .menu-enlaces a{

        padding:10px 11px;

        font-size:14px;

    }


    .tarjetas{

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

    }


    .contacto-comercial{

        grid-template-columns:1fr;

    }

}

@media(max-width:768px){

    .encabezado{

        position:fixed;

    }


    .menu{

        min-height:76px;

        padding:6px 12px;

        gap:10px;

    }


    .menu-logo img{

        width:64px;

        height:62px;

    }


    .boton-menu{

        display:flex;

        align-items:center;

        justify-content:center;

        flex:0 0 auto;

    }


    .menu-enlaces{

        position:absolute;

        top:76px;

        left:0;

        width:100%;

        max-height:0;

        padding:0 12px;

        display:grid;

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

        gap:8px;

        overflow:hidden;

        background:#ffffff;

        box-shadow:0 10px 20px rgba(0,0,0,.15);

        transition:
            max-height .35s ease,
            padding .35s ease;

    }


    .menu-enlaces.activo{

        max-height:330px;

        padding:12px;

    }


    .menu-enlaces li{

        width:100%;

    }


    .menu-enlaces a{

        width:100%;

        padding:12px 8px;

        text-align:center;

        background:#f2f5fa;

        border-radius:10px;

    }


    .hero{

        margin-top:76px;

    }


    .portada-principal{

        width:100%;

        height:auto;

        object-fit:contain;

    }


    .bloque-estacion{

        padding:32px 15px 38px;

    }


    .bloque-estacion .logo,
    .logo-estacion{

        width:165px;

        max-width:72%;

        margin-bottom:18px;

    }


    .boton-escuchar{

        width:100%;

        max-width:290px;

        min-width:0;

        padding:14px 18px;

        font-size:15px;

    }


    .redes{

        gap:12px;

    }


    .redes a{

        width:48px;

        height:48px;

    }


    .redes img{

        width:32px;

        height:32px;

    }


    .seccion,
    .noticias{

        padding:58px 16px;

    }


    .encabezado-seccion{

        margin-bottom:32px;

    }


    .encabezado-seccion h2{

        font-size:30px;

    }


    .encabezado-seccion p{

        font-size:16px;

    }


    .tarjetas{

        grid-template-columns:1fr;

    }


    .tarjeta{

        padding:24px 20px;

    }


    .contenedor-tabla{

        border-radius:12px;

    }


    .tabla-programacion th{

        padding:15px 13px;

    }


    .tabla-programacion td{

        padding:14px 13px;

        font-size:14px;

    }


    .noticia{

        width:280px;

        min-height:315px;

        padding:20px;

    }


    .imagen-noticia{

        height:140px;

        font-size:45px;

    }


    .contacto-comercial{

        gap:14px;

    }


    .dato-contacto{

        min-height:0;

        padding:19px;

    }


    footer{

        padding:35px 15px;

    }


    .footer-logo img{

        width:125px;

    }


    .whatsapp-float{

        right:15px;

        bottom:15px;

        width:56px;

        height:56px;

        background-size:33px 33px;

    }

}


@media(max-width:480px){

    .menu{

        min-height:70px;

    }


    .menu-logo img{

        width:57px;

        height:56px;

    }


    .boton-menu{

        width:42px;

        height:42px;

    }


    .menu-enlaces{

        top:70px;

    }


    .hero{

        margin-top:70px;

    }


    .bloque-estacion .logo,
    .logo-estacion{

        width:145px;

    }


    .estado{

        font-size:13px;

    }


    .encabezado-seccion h2{

        font-size:27px;

    }


    .encabezado-seccion p{

        font-size:15px;

    }


    .noticia{

        width:255px;

    }


    .dato-contacto{

        flex-direction:column;

        align-items:center;

        text-align:center;

    }


    .dato-contacto > i{

        margin:0 auto;

    }


    footer p{

        font-size:14px;

    }

}


/*==================================================
           PERSONAS QUE REDUCEN ANIMACIONES
==================================================*/

@media(prefers-reduced-motion:reduce){

    html{

        scroll-behavior:auto;

    }


    .track-noticias{

        animation:none;

    }


    .punto{

        animation:none;

    }


    *{

        transition:none !important;

    }

}

/*==================================================
                FLYERS DE LOCUTORES
==================================================*/

.flyers-locutores{

    width:100%;

    max-width:1150px;

    margin:0 auto;

    display:grid;

    grid-template-columns:repeat(3, 1fr);

    gap:24px;

}


.flyer-locutor{

    width:360px;

    height:600px;

    overflow:hidden;

    border-radius:18px;

    box-shadow:0 10px 25px rgba(0,0,0,.18);

}


.flyer-locutor:hover{

    transform:translateY(-6px);

    box-shadow:0 18px 36px rgba(0,0,0,.18);

}


.flyer-locutor img{

    width:100%;

    height:100%;

    display:block;

    object-fit:cover;

}


/*==================================================
              PROGRAMAS ESPECIALES
==================================================*/

.programas-especiales{

    width:100%;

    max-width:1180px;

    margin:42px auto 0;

    display:grid;

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

    gap:25px;

}


.programa-especial{

    overflow:hidden;

    position:relative;

    background:#000000;

    border-radius:20px;

    box-shadow:0 14px 35px rgba(0,0,0,.18);

}


.programa-especial img{

    width:100%;

    height:340px;

    object-fit:cover;

    border-radius:18px;

    display:block;

}


.informacion-programa{

    padding:22px;

    background:#000000;

    color:#ffffff;

    text-align:center;

}


.informacion-programa span{

    display:inline-block;

    margin-bottom:9px;

    color:#ffcf00;

    font-size:14px;

    font-weight:800;

    text-transform:uppercase;

}


.informacion-programa h3{

    margin-bottom:8px;

    color:#ffffff;

    font-size:25px;

    text-transform:uppercase;

}


.informacion-programa p{

    color:#ffffff;

    font-size:16px;

}


/*==================================================
         CÍRCULOS NEGROS DE REDES SOCIALES
==================================================*/

.redes a{

    background:#000000;

}


.redes a:hover{

    background:#1c1c1c;

}


/*==================================================
                    RESPONSIVO
==================================================*/

@media(max-width:768px){

    .flyers-locutores{

        grid-template-columns:1fr;

        gap:18px;

    }


    .programas-especiales{

        grid-template-columns:1fr;

        margin-top:30px;

        gap:20px;

    }


    .informacion-programa h3{

        font-size:22px;

    }

}


 /*==================================================
     CORRECCIÓN PARRILLA Y NOTICIAS EN COMPUTADORA
==================================================*/

@media(min-width:769px){

    /* PARRILLA DE PROGRAMACIÓN */

    .contenedor-tabla{

        width:100% !important;
        max-width:1180px !important;
        margin:0 auto !important;
        display:block !important;
        overflow-x:auto !important;

    }


    .tabla-programacion{

        width:100% !important;
        min-width:760px !important;
        display:table !important;
        table-layout:auto !important;
        border-collapse:collapse !important;

    }


    .tabla-programacion thead{

        display:table-header-group !important;

    }


    .tabla-programacion tbody{

        display:table-row-group !important;

    }


    .tabla-programacion tr{

        display:table-row !important;

    }


    .tabla-programacion th,
    .tabla-programacion td{

        display:table-cell !important;
        width:auto !important;
        float:none !important;
        text-align:left !important;

    }


    /* NOTICIAS HORIZONTALES */

    .slider-noticias{

        width:100% !important;
        display:block !important;
        overflow:hidden !important;

    }


    .track-noticias{

        width:max-content !important;
        display:flex !important;
        flex-direction:row !important;
        flex-wrap:nowrap !important;
        align-items:stretch !important;
        gap:22px !important;

    }


    .noticia{

        width:310px !important;
        min-width:310px !important;
        max-width:310px !important;
        flex:0 0 310px !important;
        display:block !important;

    }

}

/*==================================================
     BANNERS LATERALES DEL BLOQUE DE LA ESTACIÓN
==================================================*/

.bloque-estacion{

    width:100%;
    max-width:1250px;

    margin:0 auto;

    padding:45px 25px;

    display:grid;

    grid-template-columns:
        minmax(170px, 230px)
        minmax(300px, 1fr)
        minmax(170px, 230px);

    align-items:center;

    gap:35px;

}


/* CONTENIDO CENTRAL */

.contenido-central-estacion{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

    min-width:0;

}


/* BANNERS */

.banner-lateral{

    width:100%;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

    border-radius:18px;

    background:#ffffff;

    box-shadow:0 8px 25px rgba(0,0,0,.15);

}


.banner-lateral img{

    display:block;

    width:100%;

    aspect-ratio:4 / 7;

    object-fit:cover;

    border-radius:18px;

    transition:
        opacity .5s ease,
        transform .5s ease;

}


.banner-lateral img.cambiando{

    opacity:0;

    transform:scale(.97);

}


/* TABLETS */

@media(max-width:950px){

    .bloque-estacion{

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

        gap:20px;

        padding:35px 15px;

    }

}


/* CELULARES */

@media(max-width:700px){

    .bloque-estacion{

        display:flex;

        flex-direction:column;

        gap:25px;

        padding:30px 15px;

    }


    .contenido-central-estacion{

        order:1;

        width:100%;

    }


    .banner-izquierdo{

        order:2;

    }


    .banner-derecho{

        order:3;

    }


    .banner-lateral{

        width:min(75%, 270px);

        margin:0 auto;

    }


    .banner-lateral img{

        aspect-ratio:4 / 7;

    }

}

/* ==================================================
       IMÁGENES DE NOTICIAS DESDE EL PANEL
================================================== */

.imagen-noticia{
    width:100%;
    height:180px;

    overflow:hidden;

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

    background:#eef1f6;

    border-radius:14px;
}

.imagen-noticia img{
    width:100%;
    height:100%;

    display:block;

    object-fit:cover;
}

.imagen-noticia i{
    color:#174d93;

    font-size:48px;
}


/* ==================================================
                  BOTÓN VER MÁS
================================================== */

.resumen-noticia{
    min-height:54px;
}

.boton-ver-mas{
    display:inline-block;

    margin-top:16px;
    padding:11px 22px;

    background:#174d93;
    color:#ffffff;

    border-radius:30px;

    font-size:14px;
    font-weight:bold;

    text-decoration:none;

    transition:
        background .25s ease,
        transform .25s ease;
}

.boton-ver-mas:hover{
    background:#d52855;
    transform:translateY(-2px);
}


/* ==================================================
               PÁGINA DE NOTICIA
================================================== */

.pagina-noticia{
    margin:0;

    min-height:100vh;

    display:flex;
    flex-direction:column;

    background:#f4f6fa;

    font-family:Arial, Helvetica, sans-serif;
}

.cabecera-noticia{
    min-height:85px;

    padding:12px 35px;

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

    gap:20px;

    background:#ffffff;

    box-shadow:0 4px 16px rgba(0,0,0,.10);
}

.logo-noticia img{
    width:90px;
    height:60px;

    display:block;

    object-fit:contain;
}

.volver-noticias{
    padding:12px 20px;

    background:#174d93;
    color:#ffffff;

    border-radius:30px;

    font-weight:bold;

    text-decoration:none;
}

.volver-noticias i{
    margin-right:7px;
}

.contenedor-noticia{
    width:100%;
    max-width:950px;

    margin:0 auto;
    padding:45px 20px;

    flex:1;
}

.noticia-completa{
    overflow:hidden;

    background:#ffffff;

    border-radius:22px;

    box-shadow:0 12px 35px rgba(0,0,0,.10);
}

.imagen-noticia-completa{
    width:100%;
    max-height:520px;

    overflow:hidden;
}

.imagen-noticia-completa img{
    width:100%;
    max-height:520px;

    display:block;

    object-fit:cover;
}

.contenido-noticia-completa{
    padding:38px 42px;
}

.etiqueta-noticia{
    display:inline-block;

    margin-bottom:15px;
    padding:7px 14px;

    background:#ffe7ed;
    color:#d52855;

    border-radius:20px;

    font-size:13px;
    font-weight:bold;
}

.contenido-noticia-completa h1{
    margin:0 0 15px;

    color:#174d93;

    font-size:38px;
    line-height:1.2;
}

.fecha-noticia{
    margin-bottom:28px;

    color:#78818d;

    font-size:14px;
}

.fecha-noticia i{
    margin-right:6px;
}

.texto-noticia{
    color:#343d48;

    font-size:18px;
    line-height:1.85;

    overflow-wrap:anywhere;
}

.boton-regresar-noticias{
    display:inline-block;

    margin-top:35px;
    padding:13px 24px;

    background:#d52855;
    color:#ffffff;

    border-radius:30px;

    font-weight:bold;

    text-decoration:none;
}

.boton-regresar-noticias i{
    margin-right:7px;
}

.cargando-noticia,
.error-noticia{
    padding:70px 25px;

    color:#174d93;

    text-align:center;
}

.cargando-noticia i,
.error-noticia i{
    margin-bottom:18px;

    font-size:48px;
}

.error-noticia h1{
    margin-bottom:12px;
}

.pie-noticia{
    padding:25px;

    background:#174d93;
    color:#ffffff;

    text-align:center;
}

.pie-noticia p{
    margin:5px 0;
}


/* ==================================================
            NOTICIA COMPLETA EN CELULAR
================================================== */

@media(max-width:650px){

    .cabecera-noticia{
        padding:10px 15px;
    }

    .logo-noticia img{
        width:68px;
        height:50px;
    }

    .volver-noticias{
        padding:10px 14px;

        font-size:13px;
    }

    .contenedor-noticia{
        padding:25px 12px;
    }

    .contenido-noticia-completa{
        padding:25px 20px;
    }

    .contenido-noticia-completa h1{
        font-size:29px;
    }

    .texto-noticia{
        font-size:17px;
        line-height:1.75;
    }

    .imagen-noticia-completa,
    .imagen-noticia-completa img{
        max-height:330px;
    }

}