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

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

html{
    scroll-behavior:smooth;
}

body{

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

    background:#021f63;

    color:#fff;

    overflow-x:hidden;
}

/* ==========================
   FUNDO NEON
========================== */

body::before{

    content:"";

    position:fixed;

    inset:0;

    z-index:-1;

    opacity:.08;

    background-image:

    linear-gradient(
        rgba(255,255,255,.05) 1px,
        transparent 1px
    ),

    linear-gradient(
        90deg,
        rgba(255,255,255,.05) 1px,
        transparent 1px
    );

    background-size:120px 120px;
}

/* ==========================
   TOPO
========================== */

.topbar{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    height:130px;

    background:#ffffff;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0 50px;

    z-index:9999;

    box-shadow:
    0 5px 50px rgba(0,0,0,.15);
}

.logo-topo{

    height:125px;

    transition:.3s;
}

.logo-topo:hover{

    transform:scale(1.05);
}

.menu-topo{

    display:flex;

    align-items:center;

    gap:30px;
}

.menu-topo a{

    text-decoration:none;

    color:#021f63;

    font-weight:700;

    transition:.3s;
}

.menu-topo a:hover{

    color:#ffc400;
}

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

.hero-header{

    position:relative;

    min-height:100vh;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

    padding-top:90px;
}

.hero-bg{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;
}

.hero-overlay{

    position:absolute;

    inset:0;

    background:

    linear-gradient(
        rgba(0,0,0,.35),
        rgba(2,31,99,.85)
    );
}

.hero-content{

    position:relative;

    z-index:2;

    text-align:center;

    max-width:1200px;

    padding:20px;
}

.hero-content h1{

    font-size:72px;

    font-weight:900;

    text-shadow:
    0 4px 15px rgba(0,0,0,.4);
}

.hero-content p{

    font-size:32px;

    color:#ffc400;

    font-weight:700;

    margin-top:15px;
}

/* ==========================
   RELÓGIO
========================== */

.radio-clock{

    margin:40px auto;

    width:fit-content;

    padding:25px 50px;

    border-radius:25px;

    background:
    rgba(0,0,0,.30);

    backdrop-filter:blur(10px);

    border:2px solid #00a2ff;

    box-shadow:
    0 0 30px rgba(0,162,255,.3);
}

#dia-semana{

    color:#ffc400;

    font-size:35px;

    font-weight:800;

    margin-bottom:10px;
}

#hora-digital{

    font-family:'Courier New',monospace;

    font-size:120px;

    font-weight:900;

    color:#00ff66;

    text-shadow:

    0 0 10px #00ff66,

    0 0 30px #00ff66,

    0 0 60px #00ff66;
}

#data-digital{

    font-size:35px;

    margin-top:10px;
}

.live-24h{

    margin-top:15px;

    font-weight:800;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:10px;
}

.live-led{

    width:12px;

    height:12px;

    border-radius:50%;

    background:red;

    animation:pulse 1s infinite;
}

@keyframes pulse{

    50%{

        opacity:.2;
    }
}

/* ==========================
   BOTÕES
========================== */

.hero-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;
}

.btn-ouvir,
.btn-whatsapp{

    text-decoration:none;

    padding:18px 35px;

    border-radius:50px;

    font-weight:800;

    transition:.3s;
}

.btn-ouvir{

    background:#ffc400;

    color:#021f63;
}

.btn-whatsapp{

    background:#25D366;

    color:#fff;
}

.btn-ouvir:hover,
.btn-whatsapp:hover{

    transform:translateY(-3px);

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

/* ==========================
   PLAYER
========================== */

.player-section{

    max-width:1200px;

    margin:60px auto;

    padding:0 20px;
}

.status-radio{

    display:flex;

    justify-content:center;

    gap:15px;

    margin-bottom:20px;
}

.status-live,
.status-transmitindo{

    padding:12px 25px;

    border-radius:50px;

    font-weight:800;
}

.status-live{

    border:2px solid red;

    color:#fff;
}

.status-transmitindo{

    border:2px solid #00ff66;

    color:#fff;
}

.live-dot,
.online-dot{

    width:10px;

    height:10px;

    display:inline-block;

    border-radius:50%;

    margin-right:8px;
}

.live-dot{

    background:red;
}

.online-dot{

    background:#00ff66;
}

.player-section iframe{

    width:100%;

    height:520px;

    border:none;

    border-radius:25px;

    overflow:hidden;

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

/* ==========================
   SEÇÕES
========================== */

.sobre-radio,
.programacao-section,
.parceiros-section{

    max-width:1400px;

    margin:70px auto;

    padding:0 20px;

    text-align:center;
}

.sobre-radio h2,
.programacao-section h2,
.parceiros-section h2{

    color:#ffc400;

    font-size:48px;

    margin-bottom:20px;
}

.sobre-radio p{

    max-width:900px;

    margin:auto;

    line-height:1.8;

    font-size:20px;
}

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

.banner-programacao,
.banner-parceiros{

    width:100%;

    border-radius:25px;

    transition:.4s;

    display:block;
}

.banner-programacao{

    border:3px solid #00a2ff;
}

.banner-parceiros{

    border:3px solid #ffc400;
}

.banner-programacao:hover,
.banner-parceiros:hover{

    transform:scale(1.01);

    box-shadow:
    0 0 35px rgba(255,196,0,.25);
}

/* ==========================
   RODAPÉ
========================== */

footer{

    background:#011544;

    padding:50px 20px;

    text-align:center;

    margin-top:80px;
}

.footer-links{

    margin-top:15px;
}

.footer-links a{

    color:#ffc400;

    text-decoration:none;

    margin:0 10px;
}

/* ==========================
   WHATSAPP
========================== */

.whatsapp-float{

    position:fixed;

    right:25px;

    bottom:25px;

    width:70px;

    height:70px;

    border-radius:50%;

    background:#25D366;

    color:white;

    text-decoration:none;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:32px;

    z-index:99999;

    box-shadow:
    0 0 25px rgba(37,211,102,.5);
}

/* ==========================
   MODAIS
========================== */

.modal{

    display:none;

    position:fixed;

    inset:0;

    background:
    rgba(0,0,0,.95);

    z-index:999999;

    overflow:auto;
}

.modal-content{

    width:95%;

    max-width:1200px;

    margin:40px auto;

    position:relative;
}

.modal-content img{

    width:100%;

    border-radius:20px;
}

.fechar{

    position:absolute;

    top:-15px;

    right:-15px;

    width:50px;

    height:50px;

    border-radius:50%;

    background:red;

    color:#fff;

    text-align:center;

    line-height:50px;

    font-size:30px;

    cursor:pointer;
}

/* ==========================
   BOTÃO TOPO
========================== */

#btnTopo{

    position:fixed;

    right:25px;

    bottom:110px;

    width:60px;

    height:60px;

    border:none;

    border-radius:50%;

    background:#ffc400;

    color:#021f63;

    font-size:24px;

    cursor:pointer;

    opacity:0;

    visibility:hidden;

    transition:.3s;

    z-index:99999;
}

#btnTopo.mostrar{

    opacity:1;

    visibility:visible;
}

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

@media(max-width:900px){

    .menu-topo{

        display:none;
    }

    .hero-content h1{

        font-size:42px;
    }

    .hero-content p{

        font-size:24px;
    }

    #hora-digital{

        font-size:70px;
    }

    .player-section iframe{

        height:380px;
    }
}