/*==================================================
              RADIO HUETAMO ONLINE
                 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;

    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;
    }

}

/*==================================================
                 RADIO HUETAMO
       TEMA NEGRO, NARANJA Y GRIS METÁLICO
==================================================*/

:root{
    --huetamo-negro:#111318;
    --huetamo-negro-suave:#1b1e24;
    --huetamo-naranja:#f28c00;
    --huetamo-naranja-oscuro:#c96f00;
    --huetamo-metal:#8f969e;
    --huetamo-gris:#e7e9ec;
    --huetamo-blanco:#ffffff;
}


/* CUERPO GENERAL */

body{
    background:#f3f4f6;
    color:#20242a;
}


/* MENÚ SUPERIOR */

.menu{
    background:rgba(17,19,24,.97);
    border-bottom:3px solid var(--huetamo-naranja);
    box-shadow:0 6px 22px rgba(0,0,0,.35);
}

.menu-enlaces a{
    color:var(--huetamo-blanco);
}

.menu-enlaces a:hover{
    background:var(--huetamo-naranja);
    color:var(--huetamo-negro);
}

.boton-menu{
    background:var(--huetamo-naranja);
    color:var(--huetamo-negro);
}


/* TÍTULOS Y ETIQUETAS */

.encabezado-seccion h2{
    color:var(--huetamo-negro);
}

.etiqueta-seccion{
    color:var(--huetamo-naranja-oscuro);
    font-weight:800;
    letter-spacing:1.5px;
    text-transform:uppercase;
}


/* BOTONES GENERALES */

.boton,
.btn,
.boton-reproducir,
.boton-escuchar{
    background:var(--huetamo-naranja);
    color:var(--huetamo-negro);
    border-color:var(--huetamo-naranja);
}

.boton:hover,
.btn:hover,
.boton-reproducir:hover,
.boton-escuchar:hover{
    background:var(--huetamo-naranja-oscuro);
    color:var(--huetamo-blanco);
}


/* REPRODUCTOR */

.reproductor,
.seccion-reproductor,
.escuchar-vivo{
    background:linear-gradient(
        135deg,
        var(--huetamo-negro),
        var(--huetamo-negro-suave)
    );
    color:var(--huetamo-blanco);
}

.reproductor h2,
.seccion-reproductor h2,
.escuchar-vivo h2{
    color:var(--huetamo-blanco);
}


/* TARJETAS */

.tarjeta,
.flyer-locutor,
.contacto-comercial{
    border:1px solid rgba(143,150,158,.35);
    box-shadow:0 10px 28px rgba(0,0,0,.12);
}


/*==================================================
                    GALERÍA
==================================================*/

.galeria{
    padding:85px 25px;
    background:
        linear-gradient(
            180deg,
            #f3f4f6 0%,
            #ffffff 100%
        );
}

.contenedor-galeria{
    width:min(1200px, 100%);
    margin:40px auto 0;

    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:22px;
}

.foto-galeria{
    position:relative;
    min-height:280px;
    overflow:hidden;

    background:var(--huetamo-negro);
    border:3px solid var(--huetamo-blanco);
    border-radius:18px;

    box-shadow:
        0 12px 30px rgba(0,0,0,.18),
        0 0 0 1px rgba(242,140,0,.22);

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

.foto-galeria::after{
    content:"";
    position:absolute;
    inset:0;

    background:linear-gradient(
        180deg,
        transparent 55%,
        rgba(17,19,24,.48)
    );

    pointer-events:none;
}

.foto-galeria img{
    display:block;
    width:100%;
    height:100%;
    min-height:280px;

    object-fit:cover;

    transition:transform .45s ease;
}

.foto-galeria:hover{
    transform:translateY(-7px);
    box-shadow:
        0 20px 40px rgba(0,0,0,.25),
        0 0 0 2px var(--huetamo-naranja);
}

.foto-galeria:hover img{
    transform:scale(1.06);
}


/* PUBLICIDAD */

.publicidad{
    background:var(--huetamo-gris);
}

.contacto-comercial i{
    color:var(--huetamo-naranja-oscuro);
}

.contacto-comercial a:hover{
    color:var(--huetamo-naranja-oscuro);
}


/* WHATSAPP FLOTANTE */

.whatsapp-float{
    border:3px solid var(--huetamo-blanco);
    box-shadow:0 8px 25px rgba(0,0,0,.30);
}


/* PIE DE PÁGINA */

footer{
    background:var(--huetamo-negro);
    color:var(--huetamo-blanco);
    border-top:5px solid var(--huetamo-naranja);
}

footer strong{
    color:var(--huetamo-naranja);
}


/* TABLET */

@media (max-width:900px){

    .contenedor-galeria{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }

}


/* CELULAR */

@media (max-width:600px){

    .contenedor-galeria{
        grid-template-columns:1fr;
        gap:18px;
    }

    .galeria{
        padding:65px 16px;
    }

    .foto-galeria,
    .foto-galeria img{
        min-height:245px;
    }

}


/*==================================================
        REPRODUCTOR MODERNO RADIO HUETAMO
==================================================*/

.reproductor-huetamo{
    position:relative;
    isolation:isolate;

    width:min(480px, 100%);
    min-height:610px;
    padding:38px 32px;

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

    overflow:hidden;

    color:#ffffff;
    text-align:center;

    background:
        radial-gradient(
            circle at 50% 20%,
            rgba(242,140,0,.20),
            transparent 34%
        ),
        linear-gradient(
            145deg,
            #24272d 0%,
            #14161a 48%,
            #08090b 100%
        );

    border:1px solid rgba(255,255,255,.12);
    border-radius:30px;

    box-shadow:
        0 28px 65px rgba(0,0,0,.32),
        inset 0 1px 0 rgba(255,255,255,.10);
}

.reproductor-huetamo::before{
    content:"";
    position:absolute;
    z-index:-1;

    width:280px;
    height:280px;
    top:-150px;
    right:-110px;

    border-radius:50%;

    background:rgba(242,140,0,.17);
    filter:blur(15px);
}

.reproductor-huetamo::after{
    content:"";
    position:absolute;
    z-index:-1;

    width:220px;
    height:220px;
    bottom:-145px;
    left:-110px;

    border-radius:50%;

    background:rgba(143,150,158,.14);
    filter:blur(15px);
}


/* INDICADOR EN VIVO */

.distintivo-en-vivo{
    margin-bottom:20px;
    padding:8px 15px;

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;

    color:#ffffff;
    font-size:12px;
    font-weight:900;
    letter-spacing:2px;

    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.13);
    border-radius:30px;

    backdrop-filter:blur(10px);
}

.pulso-en-vivo{
    width:10px;
    height:10px;

    background:#ff3b30;
    border-radius:50%;

    box-shadow:0 0 0 0 rgba(255,59,48,.65);

    animation:pulsoRadioHuetamo 1.6s infinite;
}

@keyframes pulsoRadioHuetamo{

    0%{
        box-shadow:0 0 0 0 rgba(255,59,48,.65);
    }

    70%{
        box-shadow:0 0 0 11px rgba(255,59,48,0);
    }

    100%{
        box-shadow:0 0 0 0 rgba(255,59,48,0);
    }

}


/* LOGO */

.marco-logo-radio{
    width:190px;
    height:190px;
    margin-bottom:20px;
    padding:18px;

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

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.14),
            rgba(255,255,255,.035)
        );

    border:1px solid rgba(255,255,255,.14);
    border-radius:50%;

    box-shadow:
        0 18px 40px rgba(0,0,0,.30),
        0 0 0 7px rgba(242,140,0,.07);

    backdrop-filter:blur(8px);
}

.reproductor-huetamo .logo-reproductor{
    display:block;

    width:100%;
    height:100%;
    max-width:none;
    margin:0;

    object-fit:contain;

    filter:drop-shadow(0 8px 12px rgba(0,0,0,.30));
}


/* IDENTIDAD */

.identidad-reproductor{
    width:100%;
}

.senal-online{
    display:block;
    margin-bottom:7px;

    color:#f28c00;
    font-size:11px;
    font-weight:900;
    letter-spacing:3px;
}

.identidad-reproductor h1{
    margin:0;

    color:#ffffff;
    font-size:34px;
    font-weight:900;
    line-height:1.05;
    letter-spacing:-1px;
}

.identidad-reproductor p{
    margin:10px 0 0;

    color:#c8cbd0;
    font-size:15px;
    font-weight:600;
    letter-spacing:.4px;
    text-transform:uppercase;
}


/* ECUALIZADOR */

.ecualizador-radio{
    height:42px;
    margin:23px 0 20px;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
}

.ecualizador-radio span{
    display:block;

    width:5px;
    height:10px;

    background:linear-gradient(
        180deg,
        #ffb13b,
        #f28c00
    );

    border-radius:5px;

    opacity:.35;
    transform-origin:center;
}

.boton-radio-moderno.reproduciendo
~ .mensaje-reproductor{
    color:#ffb13b;
}

.reproductor-huetamo:has(
    .boton-radio-moderno.reproduciendo
) .ecualizador-radio span{
    opacity:1;
    animation:ondaRadioHuetamo .85s ease-in-out infinite alternate;
}

.reproductor-huetamo:has(
    .boton-radio-moderno.reproduciendo
) .ecualizador-radio span:nth-child(2){
    animation-delay:.12s;
}

.reproductor-huetamo:has(
    .boton-radio-moderno.reproduciendo
) .ecualizador-radio span:nth-child(3){
    animation-delay:.24s;
}

.reproductor-huetamo:has(
    .boton-radio-moderno.reproduciendo
) .ecualizador-radio span:nth-child(4){
    animation-delay:.08s;
}

.reproductor-huetamo:has(
    .boton-radio-moderno.reproduciendo
) .ecualizador-radio span:nth-child(5){
    animation-delay:.19s;
}

.reproductor-huetamo:has(
    .boton-radio-moderno.reproduciendo
) .ecualizador-radio span:nth-child(6){
    animation-delay:.31s;
}

.reproductor-huetamo:has(
    .boton-radio-moderno.reproduciendo
) .ecualizador-radio span:nth-child(7){
    animation-delay:.15s;
}

@keyframes ondaRadioHuetamo{

    from{
        height:9px;
    }

    to{
        height:38px;
    }

}


/* BOTÓN PRINCIPAL */

.reproductor-huetamo .boton-radio-moderno{
    min-width:270px;
    min-height:62px;
    padding:8px 24px 8px 9px;

    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:14px;

    color:#17191d;

    background:linear-gradient(
        135deg,
        #ffb13b,
        #f28c00
    );

    border:1px solid rgba(255,255,255,.20);
    border-radius:40px;

    box-shadow:
        0 14px 30px rgba(242,140,0,.27),
        inset 0 1px 0 rgba(255,255,255,.38);
}

.reproductor-huetamo .boton-radio-moderno:hover{
    color:#111318;

    background:linear-gradient(
        135deg,
        #ffc05c,
        #f69712
    );

    box-shadow:
        0 18px 38px rgba(242,140,0,.38),
        inset 0 1px 0 rgba(255,255,255,.45);

    transform:translateY(-3px);
}

.circulo-icono-reproductor{
    flex:0 0 46px;

    width:46px;
    height:46px;

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

    color:#ffffff;
    font-size:18px;

    background:#17191d;
    border-radius:50%;

    box-shadow:0 5px 14px rgba(0,0,0,.28);
}

.boton-radio-moderno.reproduciendo{
    background:linear-gradient(
        135deg,
        #e5e7ea,
        #aeb3b9
    );

    box-shadow:
        0 14px 30px rgba(0,0,0,.25),
        inset 0 1px 0 rgba(255,255,255,.50);
}

.boton-radio-moderno.reproduciendo
.circulo-icono-reproductor{
    background:#f28c00;
}


/* MENSAJE */

.reproductor-huetamo .mensaje-reproductor{
    min-height:20px;
    margin:14px 0 0;

    color:#bfc3c8;
    font-size:13px;
    font-weight:600;
}


/* REDES SOCIALES */

.reproductor-huetamo .redes-reproductor{
    margin-top:22px;
    gap:12px;
}

.reproductor-huetamo .redes-reproductor a{
    width:46px;
    height:46px;

    color:#ffffff;
    font-size:20px;

    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.12);

    box-shadow:none;
    backdrop-filter:blur(8px);
}

.reproductor-huetamo .redes-reproductor a:hover{
    color:#17191d;
    background:#f28c00;

    box-shadow:0 10px 22px rgba(242,140,0,.24);

    transform:translateY(-4px);
}


/* TABLET Y CELULAR */

@media (max-width:700px){

    .reproductor-huetamo{
        width:100%;
        min-height:560px;
        padding:30px 20px;
        border-radius:24px;
    }

    .marco-logo-radio{
        width:160px;
        height:160px;
    }

    .identidad-reproductor h1{
        font-size:29px;
    }

    .identidad-reproductor p{
        font-size:13px;
    }

    .reproductor-huetamo .boton-radio-moderno{
        width:100%;
        max-width:290px;
        min-width:0;
    }

}

@media (max-width:400px){

    .reproductor-huetamo{
        padding-left:15px;
        padding-right:15px;
    }

    .marco-logo-radio{
        width:145px;
        height:145px;
    }

    .identidad-reproductor h1{
        font-size:26px;
    }

}


/* CENTRAR REPRODUCTOR RADIO HUETAMO */

.contenido-central-estacion{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    margin-left:auto;
    margin-right:auto;
}

.reproductor-huetamo{
    margin-left:auto;
    margin-right:auto;
}

/* LOGOS DE REDES SOCIALES */

.reproductor-huetamo .redes-reproductor a{
    display:flex;
    align-items:center;
    justify-content:center;
}

.reproductor-huetamo .redes-reproductor img{
    display:block;
    width:27px;
    height:27px;
    object-fit:contain;
}



/* Reducir únicamente el logo de WhatsApp */
.reproductor-huetamo .redes-reproductor img[alt="WhatsApp"]{
    width:22px;
    height:22px;
}

/* RESPONSABLE COMERCIAL */

.responsable-comercial{
    width:100%;
    margin-bottom:22px;
    padding-bottom:20px;

    text-align:center;

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

.responsable-comercial h3{
    margin:0 0 5px;

    font-size:24px;
    font-weight:900;
}

.cargo-comercial{
    margin:0;

    color:#f28c00;
    font-size:15px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:1px;
}

/* WHATSAPP DE PUBLICIDAD */

.contacto-comercial .icono-whatsapp-publicidad{
    width:42px;
    height:42px;
    object-fit:contain;
    flex:0 0 42px;
}


/*==================================================
        CONTACTO COMERCIAL CARLOS RÍOS
==================================================*/

.contacto-comercial{
    width:min(620px, 100%);
    margin:0 auto;
    padding:34px 30px;

    display:flex;
    flex-direction:column;
    align-items:center;

    text-align:center;
}

.responsable-comercial{
    width:100%;
    margin-bottom:24px;
    padding-bottom:23px;

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

.etiqueta-contacto{
    display:inline-block;
    margin-bottom:12px;
    padding:7px 14px;

    color:#ffffff;
    font-size:11px;
    font-weight:900;
    letter-spacing:1.5px;
    text-transform:uppercase;

    background:#f28c00;
    border-radius:30px;
}

.responsable-comercial h3{
    margin:0;

    color:#17191d;
    font-size:29px;
    font-weight:900;
    line-height:1.1;
}

.cargo-comercial{
    margin:7px 0 0;

    color:#f28c00;
    font-size:16px;
    font-weight:900;
    letter-spacing:1px;
    text-transform:uppercase;
}

.descripcion-contacto{
    margin:13px auto 0;
    max-width:420px;

    color:#62666c;
    font-size:15px;
    line-height:1.55;
}

.boton-whatsapp-carlos{
    width:100%;
    max-width:380px;
    padding:14px 20px;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;

    color:#ffffff;
    text-decoration:none;

    background:linear-gradient(
        135deg,
        #25d366,
        #128c4b
    );

    border-radius:18px;

    box-shadow:0 12px 28px rgba(18,140,75,.25);

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

.boton-whatsapp-carlos:hover{
    color:#ffffff;

    transform:translateY(-3px);

    box-shadow:0 17px 34px rgba(18,140,75,.33);

    filter:brightness(1.04);
}

.boton-whatsapp-carlos img{
    flex:0 0 40px;

    width:40px;
    height:40px;

    object-fit:contain;
}

.datos-whatsapp-carlos{
    display:flex;
    flex-direction:column;
    align-items:flex-start;

    text-align:left;
}

.datos-whatsapp-carlos strong{
    font-size:14px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.6px;
}

.datos-whatsapp-carlos span{
    margin-top:3px;

    font-size:18px;
    font-weight:800;
}

@media (max-width:500px){

    .contacto-comercial{
        padding:28px 18px;
    }

    .responsable-comercial h3{
        font-size:25px;
    }

    .boton-whatsapp-carlos{
        padding:13px 16px;
    }

    .boton-whatsapp-carlos img{
        width:34px;
        height:34px;
        flex-basis:34px;
    }

    .datos-whatsapp-carlos span{
        font-size:16px;
    }

}


/*==================================================
        CONTACTO COMERCIAL CARLOS RÍOS
==================================================*/

.contacto-comercial{
    width:min(620px, 100%);
    margin:0 auto;
    padding:34px 30px;

    display:flex;
    flex-direction:column;
    align-items:center;

    text-align:center;
}

.responsable-comercial{
    width:100%;
    margin-bottom:24px;
    padding-bottom:23px;

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

.etiqueta-contacto{
    display:inline-block;
    margin-bottom:12px;
    padding:7px 14px;

    color:#ffffff;
    font-size:11px;
    font-weight:900;
    letter-spacing:1.5px;
    text-transform:uppercase;

    background:#f28c00;
    border-radius:30px;
}

.responsable-comercial h3{
    margin:0;

    color:#17191d;
    font-size:29px;
    font-weight:900;
    line-height:1.1;
}

.cargo-comercial{
    margin:7px 0 0;

    color:#f28c00;
    font-size:16px;
    font-weight:900;
    letter-spacing:1px;
    text-transform:uppercase;
}

.descripcion-contacto{
    margin:13px auto 0;
    max-width:420px;

    color:#62666c;
    font-size:15px;
    line-height:1.55;
}

.boton-whatsapp-carlos{
    width:100%;
    max-width:380px;
    padding:14px 20px;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;

    color:#ffffff;
    text-decoration:none;

    background:linear-gradient(
        135deg,
        #25d366,
        #128c4b
    );

    border-radius:18px;

    box-shadow:0 12px 28px rgba(18,140,75,.25);

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

.boton-whatsapp-carlos:hover{
    color:#ffffff;

    transform:translateY(-3px);

    box-shadow:0 17px 34px rgba(18,140,75,.33);

    filter:brightness(1.04);
}

.boton-whatsapp-carlos img{
    flex:0 0 40px;

    width:40px;
    height:40px;

    object-fit:contain;
}

.datos-whatsapp-carlos{
    display:flex;
    flex-direction:column;
    align-items:flex-start;

    text-align:left;
}

.datos-whatsapp-carlos strong{
    font-size:14px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.6px;
}

.datos-whatsapp-carlos span{
    margin-top:3px;

    font-size:18px;
    font-weight:800;
}

@media (max-width:500px){

    .contacto-comercial{
        padding:28px 18px;
    }

    .responsable-comercial h3{
        font-size:25px;
    }

    .boton-whatsapp-carlos{
        padding:13px 16px;
    }

    .boton-whatsapp-carlos img{
        width:34px;
        height:34px;
        flex-basis:34px;
    }

    .datos-whatsapp-carlos span{
        font-size:16px;
    }

}


/* ==================================================
   CORRECCIÓN MENÚ MÓVIL RADIO HUETAMO
================================================== */

.boton-menu{
    background:#f4a300 !important;
    color:#ffffff !important;
    border-radius:14px;
    box-shadow:0 6px 18px rgba(0,0,0,.35);
}

.boton-menu i{
    color:#ffffff !important;
    font-size:24px !important;
    display:block !important;
}

@media (max-width:768px){

    .menu-enlaces{
        background:#111318 !important;
        border-top:3px solid #f4a300;
        box-shadow:0 12px 25px rgba(0,0,0,.35);
    }

    .menu-enlaces a{
        background:#f4a300 !important;
        color:#111318 !important;
        font-weight:700;
        border-radius:12px;
    }

    .menu-enlaces a:hover{
        background:#d98d00 !important;
        color:#ffffff !important;
    }

}


/* TRES RAYAS DEL MENÚ SIN FONT AWESOME */

.boton-menu .lineas-menu{
    width:24px;
    height:19px;
    display:flex !important;
    flex-direction:column;
    align-items:stretch;
    justify-content:space-between;
}

.boton-menu .lineas-menu span{
    width:100%;
    height:3px;
    display:block;
    border-radius:999px;
    background:#ffffff !important;
    box-shadow:0 1px 2px rgba(0,0,0,.20);
}

.boton-menu i{
    display:none !important;
}


/* ANIMACIÓN DEL BOTÓN DE MENÚ */

.boton-menu .lineas-menu span{
    transition:
        transform .25s ease,
        opacity .25s ease;
}

.boton-menu.abierto .lineas-menu span:nth-child(1){
    transform:translateY(8px) rotate(45deg);
}

.boton-menu.abierto .lineas-menu span:nth-child(2){
    opacity:0;
}

.boton-menu.abierto .lineas-menu span:nth-child(3){
    transform:translateY(-8px) rotate(-45deg);
}