/* ==========================================================
   RADIO FRONTERA
   STYLE.CSS
========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,700;0,900;1,700;1,900&display=swap');










/*==============================
    GOOGLE VARIABLES
==============================*/

:root{

    --black:#000000;
    --black-2:#0D0D0D;
    --panel:#151515;

    --yellow:#FFC107;
    --yellow-hover:#FFD54F;

    --white:#FFFFFF;
    --gray:#B5B5B5;

    --border:#2A2A2A;

    --red:#FF3B30;
    --green:#22C55E;

    --shadow:0 15px 40px rgba(0,0,0,.45);

}


/*==============================
        RESET
==============================*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{

    scroll-behavior:smooth;

}

/*==================================
        FONDO GENERAL PWA
==================================*/

body{

    background:linear-gradient(
        180deg,
        #FFD400 0%,
        #F5C400 45%,
        #EFB800 100%
    );

    overflow-x:hidden;

}



a{

    color:inherit;
    text-decoration:none;

}

img{

    display:block;
    max-width:100%;

}

ul{

    list-style:none;

}


/*==============================
      TOP BAR
==============================*/

.topbar{

    width:100%;

    height:75px;

    background:var(--yellow);

    display:flex;

    justify-content:center;

    align-items:center;

    position:fixed;

    top:0;
    left:0;

    z-index:1000;

       padding:0 25px;


       transition:transform .35s ease;

}


.topbar.hide{

    transform:translateY(-100%);

}



.top-navigation{

    width:100%;

}

.top-navigation ul{

    width:100%;

    display:flex;

    justify-content:space-evenly;

    align-items:center;

    list-style:none;

    padding:0 40px;

    margin:0;

}






.top-navigation a{

    color:#000;

    font-family:'Montserrat', sans-serif;

    font-size:22px;

    font-weight:900;

    font-style:italic;

    text-transform:uppercase;

    white-space:nowrap;

    transition:.3s;

}

.top-navigation a:hover{

    opacity:.7;

}










.top-navigation a:hover{

    opacity:.7;

}





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

.hero{

    width:100%;
    height:85vh;

    position:relative;

    overflow:hidden;

}









/*==============================
        BANNERS
==============================*/

.hero-bg{

    position:absolute;

    inset:0;

    background-position:center;
    background-size:cover;
    background-repeat:no-repeat;

    transform:scale(1);

    opacity:0;

    transition:opacity .8s ease;

    z-index:1;

}

/* Banner visible */

.hero-bg.active{

    opacity:1;

}


/* Banner 1 */

.hero-bg-1{

    background-image:url("../hero/banners/hero-1.png");

}


/* Banner 2 */

.hero-bg-2{

    background-image:url("../hero/banners/hero-2.png");

}


/*==============================
      CAPA OSCURA
==============================*/

.hero::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        90deg,
        rgba(0,0,0,.80) 0%,
        rgba(0,0,0,.45) 50%,
        rgba(0,0,0,.15) 100%
    );

    z-index:2;

}


/*==============================
      INFORMACIÓN
==============================*/

.hero-overlay{

    position:absolute;

    left:120px;

    top:50%;

    transform:translateY(-50%);

    width:1200px;

    z-index:3;

    color:#fff;

}











/*==============================
        SECTIONS
==============================*/

section{

    width:100%;

}

#noticias,
#entrevistas,
#programas,
#top5,
#podcast,
#publicidad{

    padding:90px 8%;

}


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

footer{

    background:#080808;

    padding:60px;

}





/*==================================================
            RADIO PLAYER V3
==================================================*/

.mini-player{

    position:fixed;

    left:50%;
    bottom:25px;

    transform:translateX(-50%);

    width:1120px;
    max-width:94%;

    height:130px;

    padding:0 30px;

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

    background:rgba(10,10,10,.88);
    backdrop-filter:blur(20px);

    border:2px solid #FFD400;
    border-radius:80px;

    box-shadow:
        0 0 18px rgba(255,212,0,.20),
        0 15px 45px rgba(0,0,0,.70);

    z-index:99999;

}


/*=================================
        LADO IZQUIERDO
=================================*/

.player-left{

    display:flex;
    align-items:center;
    gap:22px;

}


.player-cover{

    width:92px;
    height:92px;

    border-radius:50%;
    overflow:hidden;

    border:3px solid #FFD400;

    box-shadow:0 0 20px rgba(255,212,0,.35);

    flex-shrink:0;

}


.player-cover img{

    width:100%;
    height:100%;

    object-fit:cover;

}


.player-info{

    display:flex;
    flex-direction:column;

}


.player-live{

    color:#FFD400;

    font-size:13px;

    font-weight:800;

    letter-spacing:1px;

    text-transform:uppercase;

    font-family:'Montserrat',sans-serif;

}


.player-name{

    margin-top:3px;

    color:#FFF;

    font-size:34px;

    font-weight:900;

    line-height:1;

    font-family:'Montserrat',sans-serif;

}


.player-slogan{

    margin-top:6px;

    color:#9f9f9f;

    font-size:17px;

    font-family:'Montserrat',sans-serif;

}


/*=================================
          ECUALIZADOR
=================================*/

.equalizer{

    display:flex;

    align-items:flex-end;

    gap:5px;

    margin-left:20px;

}






.equalizer span{

    width:6px;

    height:18px;

    background:#FFD400;

    border-radius:30px;

    transform-origin:bottom;

    animation:equalizer .8s ease-in-out infinite;

    animation-play-state:paused;

}


.equalizer span:nth-child(1){

    animation-delay:0s;

}

.equalizer span:nth-child(2){

    animation-delay:.15s;

}

.equalizer span:nth-child(3){

    animation-delay:.30s;

}

.equalizer span:nth-child(4){

    animation-delay:.45s;

}

.equalizer span:nth-child(5){

    animation-delay:.60s;

}

@keyframes equalizer{

    0%{

        transform:scaleY(.35);

    }

    20%{

        transform:scaleY(1);

    }

    40%{

        transform:scaleY(.55);

    }

    60%{

        transform:scaleY(1.35);

    }

    80%{

        transform:scaleY(.70);

    }

    100%{

        transform:scaleY(.35);

    }

}








.equalizer span:nth-child(1){height:22px;}
.equalizer span:nth-child(2){height:45px;}
.equalizer span:nth-child(3){height:60px;}
.equalizer span:nth-child(4){height:32px;}
.equalizer span:nth-child(5){height:48px;}


/*=================================
          CENTRO
=================================*/

.player-center{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

}


.play-btn{

    width:68px;
    height:68px;

    border:none;

    border-radius:50%;

    background:#FFD400;

    color:#000;

    font-size:26px;

    cursor:pointer;

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

    transition:.30s;

    box-shadow:
        0 0 18px rgba(255,212,0,.45);

}






.play-btn:hover{

    transform:scale(1.08);

}

.live-status{

    margin-top:8px;

    color:#FFD400;

    font-size:12px;

    font-weight:800;

    text-transform:uppercase;

    letter-spacing:1px;

}


/*=================================
          LADO DERECHO
=================================*/

.player-right{

    display:flex;

    align-items:center;

    gap:18px;

}


.volume-icon{

    font-size:26px;

    color:#FFD400;

}


.volume{

    width:180px;

    accent-color:#FFD400;

    cursor:pointer;

}


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

@media(max-width:992px){

    .mini-player{

        width:95%;

        height:95px;

        padding:0 18px;

    }

    .player-cover{

        width:60px;
        height:60px;

    }

    .player-name{

        font-size:22px;

    }

    .player-slogan{

        font-size:13px;

    }

    .equalizer{

        display:none;

    }

    .play-btn{

        width:70px;
        height:70px;

        font-size:28px;

    }

    .volume{

        width:90px;

    }

}















.hero{

    width:100%;
    height:85vh;
background-image: url("../hero/banners/hero-1.png");
background-size:cover;
background-position:center;
background-repeat:no-repeat;
background-color:red;

    position:relative;

}


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

.hero-overlay{

    position:absolute;

    left:120px;

    top:50%;

    transform:translateY(-50%);

    width:1200px;

    z-index:2;

    color:#fff;

}

/*==================================
BOTÓN
==================================*/
/*==================================
BOTÓN ESCUCHA AHORA
==================================*/

.hero-tag{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:22px 54px;

    background:#FFD400;

    color:#000;

    font-family:'Montserrat',sans-serif;

    font-size:32px;

    font-weight:900;

    font-style:italic;

    text-transform:uppercase;

    letter-spacing:2px;

    border-radius:60px;

    text-decoration:none;

    cursor:pointer;

    box-shadow:0 0 20px rgba(255,212,0,.45);

    animation:pulseRadio 2s infinite;

    transition:.25s;

    margin-top:-5%;
    margin-bottom:40px;

}

.hero-tag:hover{

    transform:scale(1.08);

    box-shadow:0 0 40px rgba(255,212,0,.85);

}

.hero-tag:active{

    transform:scale(.95);

}





/*==================================
TÍTULO
==================================*/

.hero-overlay h1{

    font-family:'Montserrat', sans-serif;

    font-size:78px;

    font-weight:900;

    font-style:italic;

    text-transform:uppercase;

    line-height:.92;

    letter-spacing:-2px;

    margin-bottom:28px;

    color:#fff;

    text-shadow:0 5px 25px rgba(0,0,0,.45);

}

/*==================================
DESCRIPCIÓN
==================================*/

.hero-overlay p{

    font-family:'Montserrat', sans-serif;

    font-size:22px;

    font-weight:500;

    line-height:1.55;

    letter-spacing:.4px;

    max-width:560px;

    margin-top:8px;

    color:#F5F5F5;

}

















@keyframes pulseRadio{

    0%{

        transform:scale(1);

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

    }

    50%{

        transform:scale(1.05);

        box-shadow:0 0 35px rgba(255,212,0,.9);

    }

    100%{

        transform:scale(1);

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

    }

}

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

@keyframes heroZoom{

    0%{

        transform:scale(1);

    }

    100%{

        transform:scale(1.08);

    }

}





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

.hero-overlay{

    transition:opacity .5s ease;

}

.hero-overlay.fade{

    opacity:0;

}


.hero-logo-fixed{

    position:absolute;

    right:-50px;
    bottom:-250px;

    width:860px;

    z-index:10;

    pointer-events:none;

}



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

.hero-status{

    display:inline-flex;

    align-items:center;

    gap:18px;

    margin-top:35px;

    padding:14px 28px;

    background:linear-gradient(
        180deg,
        #FFE34A 0%,
        #FFD400 100%
    );

    border-radius:50px;

    border:1px solid rgba(255,255,255,.18);

    box-shadow:
        0 8px 20px rgba(255,212,0,.25),
        inset 0 1px 0 rgba(255,255,255,.35);

}

.hero-status span{

    display:flex;

    align-items:center;

    gap:8px;

    color:#000;

    font-family:'Montserrat',sans-serif;

    font-size:15px;

    font-weight:700;

    white-space:nowrap;

}

.hero-status strong{

    font-weight:900;

}

.hero-status .separator{

    font-size:18px;

    color:rgba(0,0,0,.45);

    font-weight:900;

}

.hero-status:hover{

    transform:translateY(-2px);

    transition:.25s ease;

    box-shadow:
        0 12px 30px rgba(255,212,0,.35),
        inset 0 1px 0 rgba(255,255,255,.45);

}









/*==================================================
                TOP SECTION
==================================================*/

.top-section{

    width:100%;

    padding:70px 40px 90px;

    background:#FFD400;

    box-sizing:border-box;

}


/*==================================================
                    HEADER
==================================================*/

.top-header{

    display:flex;

    justify-content:space-between;

    align-items:flex-end;

    margin-bottom:50px;

}

.top-title-box h2{

    margin:0;

    font-family:'Montserrat',sans-serif;

    font-size:60px;

    font-weight:900;

    font-style:italic;

    line-height:1;

    color:#000;

}

.top-title-box p{

    margin-top:12px;

    font-family:'Montserrat',sans-serif;

    font-size:24px;

    font-weight:700;

    color:#222;

}

.top-badge{

    padding:16px 34px;

    border-radius:999px;

    background:#000;

    color:#FFD400;

    font-family:'Montserrat',sans-serif;

    font-size:20px;

    font-weight:900;

    font-style:italic;

}


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

.top-wrapper{

    display:grid;

    grid-template-columns:

        2.2fr

        1fr

        1fr

        1fr

        1fr

        1fr;

    gap:22px;

    align-items:stretch;

    width:100%;

}


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

.top-card{

    position:relative;

    display:flex;

    flex-direction:column;

    background:#111;

    border-radius:24px;

    overflow:hidden;

}


/*==================================================
            TARJETA DESTACADA
==================================================*/

.featured{

    grid-column:1;

}


/*==================================================
                MINIATURA
==================================================*/

.top-card img{

    width:100%;

    height:72%;

    object-fit:cover;

    display:block;

}

.featured img{

    height:78%;

}


/*==================================================
                NUMERO
==================================================*/

.rank{

    position:absolute;

    top:18px;

    left:18px;

    z-index:20;

    font-family:'Montserrat',sans-serif;

    font-size:70px;

    font-weight:900;

    font-style:italic;

    line-height:1;

    color:#FFF;

    text-shadow:

        0 5px 15px rgba(0,0,0,.35);

}


/*==================================================
                INFORMACION
==================================================*/

.card-info{

    flex:1;

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    padding:24px;

}


/*==================================================
            TITULO CANCION
==================================================*/

.card-info h3{

    margin:0;

    font-family:'Montserrat',sans-serif;

    font-size:22px;

    font-weight:900;

    font-style:italic;

    line-height:1.05;

    color:#FFF;

}

.featured .card-info h3{

    font-size:36px;

}


/*==================================================
                ARTISTA
==================================================*/

.card-info p{

    margin:10px 0 20px;

    font-family:'Montserrat',sans-serif;

    font-size:18px;

    font-weight:700;

    color:#FFD400;

}

.featured .card-info p{

    font-size:24px;

}


/*==================================================
                BOTON
==================================================*/

.card-info a{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    align-self:flex-start;

    padding:14px 26px;

    border-radius:999px;

    background:#FFD400;

    color:#000;

    text-decoration:none;

    font-family:'Montserrat',sans-serif;

    font-size:15px;

    font-weight:900;

}


/*==================================================
                NUEVOS INGRESOS
==================================================*/

.new-card{

    display:flex;

    flex-direction:column;

    background:#111;

    border-radius:24px;

    overflow:hidden;

    padding:26px;

}


/*==================================================
                    TITULO
==================================================*/

.new-card h4{

    margin:0 0 26px;

    font-family:'Montserrat',sans-serif;

    font-size:28px;

    font-weight:900;

    font-style:italic;

    color:#FFD400;

}


/*==================================================
                    LISTA
==================================================*/

.new-card ul{

    flex:1;

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    gap:12px;

    margin:0;

    padding:0;

    list-style:none;

}


/*==================================================
                    ITEM
==================================================*/

.new-card li{

    list-style:none;

}


/*==================================================
                ENLACE
==================================================*/

.new-card a{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:14px;

    text-decoration:none;

    color:#FFF;

    padding:14px 0;

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

}

.new-card li:last-child a{

    border-bottom:none;

}


/*==================================================
                INFORMACION
==================================================*/

.song-info{

    flex:1;

}


/*==================================================
                CANCION
==================================================*/

.new-card strong{

    display:block;

    font-family:'Montserrat',sans-serif;

    font-size:22px;

    font-weight:900;

    font-style:italic;

    line-height:1.05;

    color:#FFF;

}


/*==================================================
                ARTISTA
==================================================*/

.new-card span{

    display:block;

    margin-top:6px;

    font-family:'Montserrat',sans-serif;

    font-size:17px;

    font-weight:700;

    color:#FFD400;

}


/*==================================================
                ESTRELLA NUEVO
==================================================*/

.featured-song strong::before{

    content:"★ ";

    color:#FFD400;

}


/*==================================================
                    PLAY
==================================================*/

.play{

    display:flex;

    align-items:center;

    justify-content:center;

    width:46px;

    height:46px;

    border-radius:50%;

    background:#FFD400;

    color:#000;

    font-size:18px;

    font-weight:900;

    flex-shrink:0;

}


/*==================================================
            TARJETA DESTACADA
==================================================*/

.featured{

    position:relative;

}

.featured::after{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(

        to top,

        rgba(0,0,0,.65) 0%,

        rgba(0,0,0,0) 45%

    );

    pointer-events:none;

}


/*==================================================
            INFORMACION TARJETA #1
==================================================*/

.featured .card-info{

    position:absolute;

    left:0;

    right:0;

    bottom:0;

    z-index:10;

    background:linear-gradient(

        to top,

        rgba(0,0,0,.92),

        rgba(0,0,0,.55),

        transparent

    );

    padding:34px;

}


/*==================================================
        INFORMACION TARJETAS NORMALES
==================================================*/

.top-card:not(.featured) .card-info{

    position:absolute;

    left:0;

    right:0;

    bottom:0;

    z-index:10;

    background:linear-gradient(

        to top,

        rgba(0,0,0,.96),

        rgba(0,0,0,.65),

        transparent

    );

    padding:22px;

}


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

.top-card{

    height:500px;

}

.featured{

    height:500px;

}

.new-card{

    height:500px;

}








/*==================================================
                ANIMACIONES PREMIUM
==================================================*/

/*----------------------------------
TRANSICIONES
----------------------------------*/

.top-card,
.top-card img,
.card-info,
.card-info a,
.rank,
.new-card,
.new-card a,
.play{

    transition:all .35s ease;

}


/*----------------------------------
HOVER TARJETAS
----------------------------------*/

.top-card:hover{

    transform:translateY(-10px);

    box-shadow:
        0 20px 45px rgba(0,0,0,.35),
        0 0 25px rgba(255,212,0,.25);

}

.featured:hover{

    transform:translateY(-14px);

    box-shadow:
        0 35px 70px rgba(0,0,0,.45),
        0 0 40px rgba(255,212,0,.35);

}


/*----------------------------------
ZOOM MINIATURA
----------------------------------*/

.top-card img{

    transform:scale(1);

}

.top-card:hover img{

    transform:scale(1.08);

}


/*----------------------------------
NUMERO
----------------------------------*/

.top-card:hover .rank{

    color:#FFD400;

    transform:scale(1.08);

}


/*----------------------------------
TEXTO
----------------------------------*/

.top-card:hover h3{

    color:#FFD400;

}

.top-card:hover p{

    color:#FFF;

}


/*----------------------------------
BOTON
----------------------------------*/

.card-info a{

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

}

.card-info a:hover{

    background:#FFE34C;

    transform:translateY(-2px);

    box-shadow:

        0 0 18px rgba(255,212,0,.45);

}


/*----------------------------------
NUEVOS INGRESOS
----------------------------------*/

.new-card:hover{

    transform:translateY(-8px);

    box-shadow:

        0 18px 40px rgba(0,0,0,.30);

}

.new-card a:hover{

    padding-left:12px;

    color:#FFD400;

}

.new-card a:hover .play{

    transform:translateX(8px) scale(1.10);

    background:#FFF;

}


/*----------------------------------
SCROLL SUAVE
----------------------------------*/

html{

    scroll-behavior:smooth;

}


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

@media(max-width:1700px){

    .top-wrapper{

        grid-template-columns:

            2fr

            1fr

            1fr

            1fr

            1fr;

    }

    .new-card{

        display:none;

    }

}

@media(max-width:1450px){

    .top-wrapper{

        grid-template-columns:

            2fr

            1fr

            1fr

            1fr;

    }

    .top-card:nth-child(5){

        display:none;

    }

}

@media(max-width:1200px){

    .top-wrapper{

        display:flex;

        gap:20px;

        overflow-x:auto;

        padding-bottom:10px;

        scrollbar-width:none;

    }

    .top-wrapper::-webkit-scrollbar{

        display:none;

    }

    .top-card,
    .featured,
    .new-card{

        min-width:330px;

        height:480px;

        flex:none;

    }

}

@media(max-width:768px){

    .top-section{

        padding:50px 20px;

    }

    .top-header{

        flex-direction:column;

        align-items:flex-start;

        gap:18px;

    }

    .top-title-box h2{

        font-size:42px;

    }

    .top-title-box p{

        font-size:18px;

    }

}