:root{
      --red:#9b0707;
      --maroon:#7a0b0b;
      --page-bg:#d9d9d9;
      --card-white:#ffffff;
    }

    html,body{height:100%;}
    body{
      background:var(--page-bg);
      font-family: Arial, Helvetica, sans-serif;
      color:#111;
    }

    .donate{
        font-size: 20px;
        margin-left: 45%;
       
    }

    .baixar{
      padding: 10px;
      color: rgb(218, 110, 38);
      font-family: bold;
      font-size: 25px;
    }

  .basid{
    display: flex;
    justify-content:space-between;
    background-color: #7a0b0b;
 

  }



   #men{
    background-color: #e3e5e900;
  
     line-height: 100px;
    
   }

   #men a{
     padding: 10px;
     text-decoration: none;
     color: #fff;
     font-family: Arial, Helvetica, sans-serif;
     font-size: px;
    
   }

   #men button{
    background-color: #00000000;
    border: 0;
    color: #fff;
   }


    .site-wrap{
      width:100%;
      margin:0;
      box-shadow:none;
      background:transparent;
    }

    header.panel{
      background:var(--red);
      color:#fff;
      padding:12px 16px;
      border:1px solid rgba(0,0,0,0.08);
      position: relative;
    }

    .panel .brand{
      font-weight:700;
      display:inline-block;
      margin-right:18px;
    
    }

    nav.main-nav a{
      color:#fff;
      margin-right:10px;
      text-decoration:none;
      font-weight:600;
      font-size:20px;
    }

    .panel .donate a{
      color:#fff;
      text-decoration:none;
      font-weight:700;
    }

    .menu-toggle{
      display:none;
      font-size:31px;
      cursor:pointer;
      color:#fff;
      border:none;
      background:none;
      margin-left:10px;
    }

    nav.mobile-menu{
      display:none;
      flex-direction:column;
      background:var(--maroon);
      padding:12px;
      margin-top:10px;
      border-radius:6px;
      
    }

    nav.mobile-menu a{
      color:#fff;
      padding:8px 0;
      font-size:20px;
      text-decoration:none;
      border-bottom:1px solid rgba(255,255,255,0.2);
    }

    nav.mobile-menu a:last-child{
      border-bottom:none;
    }

   .book-card{
    height: 200px;
    background-color: #9b0707;
   }

    #artigo{
      height: 200px;
    }


   #artigoss{
    background-color: #7a0b0b;
    height:1000px;
    padding-bottom: 40px;
   
   }
   .art01{
    background-color: #1c868a;
    height: 400px;
    width: 20%;
  
    top: 20px;
    position: relative;
    left: px;
   }

   #artigoss .art01{
      float: left;
   }

.su_menu a{
    padding:10px;
    text-decoration: none;
    color: #d9d9d9;
   }
.su_menu{
  background-color: #7a0b0b;
  padding: 10px;
}

   .art01 {
        width: 100%;
        max-width: 320px;
        background: #ffffff;
        border-radius: 12px;
        box-shadow: 0 4px 10px rgba(0,0,0,0.15);
        overflow: hidden;
        margin: 8px;
        font-family: Arial, sans-serif;
        transition: 0.3s;
    }

    .art01:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 18px rgba(0,0,0,0.25);
    }

    .art01 img {
        width: 100%;
        height: 170px;
        object-fit: cover;
    }

    .art01 .conteudo {
        padding: 15px;
    }

    .art01 h3 {
        font-size: 18px;
        margin: 0 0 10px 0;
        color: #222;
    }

    .art01 p {
        font-size: 14px;
        color: #555;
        margin-bottom: 15px;
    }

    .info-extra {
        font-size: 12px;
        color: #777;
        margin-bottom: 12px;
    }

    .info-extra span {
        display: inline-block;
        margin-right: 10px;
    }

    .art01 a {
        display: inline-block;
        padding: 10px 15px;
        background: #000;
        color: #fff;
        text-decoration: none;
        border-radius: 8px;
        font-size: 14px;
        transition: 0.3s;
    }

    .art01 a:hover {
        background: #444;
    }


    .cookie-box {
  position: fixed;
  bottom: 20px;
  left: 20px;
  right: 20px;
  max-width: 380px;
  background: #fff;
  padding: 15px 20px;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
  font-family: Arial;
  font-size: 14px;
  line-height: 20px;
  display: none;
  z-index: 99999;
}

.cookie-box button {
  background: #2d7ef7;
  color: #fff;
  border: none;
  padding: 8px 15px;
  cursor: pointer;
  border-radius: 6px;
  margin-top: 10px;
  font-size: 14px;
}

.cookie-box a {
  color: #2d7ef7;
  text-decoration: underline;
  font-weight: bold;
}

.aviso-topo {
  background: linear-gradient(90deg, #ff3b3b, #ff8a00);
  color: #fff;
  padding: 12px 20px;
  text-align: center;
  font-weight: 700;
  font-size: 16px;
  animation: pulse 1.5s infinite;
}

#meio{
  background-color: #b64c4c;
  overflow: hidden;
  height: 350px;
}


@keyframes pulse {
  0% { opacity: 1; }
  50% { opacity: .6; }
  100% { opacity: 1; }
}



.conbv{
width: 100%;
background-color: #000000;
height: 50px;
display: flex;
flex-direction: row;
line-height: 50px;
}

.conbv li{
background-color: #f00c0c;
width: 20px;
height: 20px;
border-radius: 100%;
margin-top: 15px;
margin-left: 20px;
}

.conbv li{
  list-style: none;
  background: red;
  display: inline-block;
  margin-right: 8px;

  animation: piscar 1.5s infinite;

}




@keyframes piscar{
  0%, 100%{ opacity: 1; transform: scale(1); }
  50%{ opacity: 0.2; transform: scale(1.4); }
}

#aov{
  color: #f3ebeb;
   top: -5px;
  position: relative;
  width: 35%;
}

#aov01{
  color: #f3ebeb;
   top: -5px;
  position: relative;
  width: 35%;
}
#aov0{
  color: #f3ebeb;
   top: px;
  position: relative;
  width: 35%;
  left: 5px;
}
.dv1{
  background-color: #2d7ef700;
  width: 100%;
 
   
}

.novac{
  line-height: 50px;
}

#tvw{
  width: 98%;
  height: 600px;
  background-color: #939393;
  margin: auto;
  margin-top: 10px;
  padding: 10px;
  display: flex;
  overflow: hidden;
}



.sub_menu{
  width: 100%;
  background-color:rgb(255, 255, 255);
  
}

.sub_menu2{
  width: 100%;
  background-color:rgb(229, 23, 23);
  display: none;
  
}
.nav_sub_menu{
width: 96%;
margin: auto;
}
.nav_sub_menu span{
  padding: 10px;
  color: #b00606;


}

.versicolododia{
  color: #000000;
  text-decoration: none;
  font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  font-size: 18px;
}
.versicolododia:hover{
  color: #ff8a00;
}
:root {
    --neon-blue: #00d2ff;
    --neon-pink: #ff007f;
    --whatsapp-green: #25d366;
}

/* CONTAINER COM FUNDO DINÂMICO */
.live-header-container {
   background-image: url("/imagens/fundo_aovivo.png");
    width: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    backdrop-filter: blur(5px);
    padding: 15px;
    border-bottom: 2px solid var(--neon-blue);
    background-color: #420404;
   

   
}

/* BANNER */
.live-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
   
}

/* LOCUTOR */
.locutor-section {
    display: flex;
    align-items: center;
    gap: 15px;
    background-color: #9b070700;
}

.avatar-img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
  
    object-fit: cover;
}

.status-dot {
    width: 18px;
    height: 18px;
    background: rgb(75, 246, 7);
    border-radius: 50%;
    position: relative;
    top: -10px;
    left: 45px;
    animation: pulse 1.5s infinite;
}

.programa-nome { margin: 0; font-size: 18px; }
.locutor-nome { margin: 0; font-size: 13px; color: #ccc; }

/* RELÓGIO */
.timer-section {
    border: 1px solid orange;
    padding: 8px 15px;
    border-radius: 10px;
}

.digital-clock {
    font-size: 22px;
    font-weight: bold;
}

/* BOTÕES */
.actions-section {
    display: flex;
    gap: 10px;
}

.btn-pedido {
    background: gold;
    border: none;
    padding: 10px 15px;
    border-radius: 20px;
    cursor: pointer;
}

.btn-whatsapp {
    background: var(--whatsapp-green);
    color: white;
    padding: 10px 15px;
    border-radius: 20px;
    text-decoration: none;
}

/* ANIMAÇÃO */
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}



    /* Responsivo */
 @media (max-width: 800px) {

  .live-header-container {
    width: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    backdrop-filter: blur(5px);
    padding: 15px;
    padding-bottom: 25px;
    background-color: #4f0303;
   
    top: 0px;
    z-index: 5000;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* BANNER */
.live-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
    flex-direction: column;
}
  .programa-nome{
    background-color: #0679f400;
    font-size: 18px;
 }

.locutor-text{
  position: relative;
 top: px;
}
.actions-section{
  position: relative;
  top: 18px;
  background-color: #e1e9ed;
 width: 80%;
  border-radius: 10px;
}

.actions-section a{
 background-color: #ffe20600;
 text-align: center;
 color: #000;
}

.actions-section button{
 background-color: #f4d80300;
 margin: auto;
}
.timer-section{
width: 80%;
 text-align: center;
 display: flex;
 flex-direction: row;
 justify-content: center;
 position: relative;
 top: 10px;
}


        .art01 {
            max-width: 100%;
        }
   .versicolododia{
  color: #000000;

  text-decoration: none;
  font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  font-size: 12px;

  
  }

.sub_menu{
   display: none ; 
  }

  .sub_menu2{
  width: 100%;
  background-color:rgb(255, 255, 255);
  padding-left: 5px;
  padding-top: 5px;
  padding-bottom: 5px;
  display: block;
  
}
.sub_menu2 button{
  border: 0;
  background-color: #0679f4;
  height: 32px;
  color: #fff;
  font-family:Arial, Helvetica, sans-serif;
  border-radius: 8px;
}

#subMenuMob{
  display: none;
}
#chama2{
  display: none;
}


    }


  @media (max-width:900px){
  #tvw{
  width: 98%;
  height: 600px;
  background-color: #cacaca;
  margin: auto;
  margin-top: 10px;
  display: flex;
  overflow: hidden;
  justify-content: center;
}

      nav.main-nav,
      .donate{
        display:none !important;
      }

      .menu-toggle{
        display:block;
      }

.versicolododia{
  color: #000000;
  text-decoration: none;
  font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  font-size: 12px;

}

      
    }

    #aov{
  color: #f3ebeb;
  left: 5px;
  width: 100%;
  font-size: 12px;
  top: -3px;
  position: relative;
  
}

#aov01{
  color: #f3ebeb;
  left: 5px;
  width: 100%;
  font-size: 12px;
  top: -1px;
  position: relative;
  
}


.dv1{
  right: 35px;
  position: relative;
  color: #ff8a00;
  
}

    .player-bar{
      background:var(--maroon);
      padding:8px 14px;
      color:#fff;
      border-left:1px solid rgba(0,0,0,0.06);
      border-right:1px solid rgba(0,0,0,0.06);
    }

    main .content-card{
      background:var(--card-white);
      padding:18px;
      border:1px solid rgba(0,0,0,0.08);
      box-shadow:0 1px 0 rgba(0,0,0,0.02);
    }

    .mission-title{
      font-weight:700;
      color:var(--red);
    }

    .versiculo{
      font-size:0.9rem;
      margin-top:12px;
      color:#333;
    }

    .section-title{
      background:var(--red);
      color:#fff;
      padding:10px 14px;
      font-weight:700;
      margin-top:18px;
    }

    .books-grid{
      background:var(--red);
      padding:18px;
      border:1px solid rgba(0,0,0,0.06);
    }

    .book-card{
      background:#fff;
      height:180px;
      border:6px solid var(--red);
      display:flex;
      align-items:center;
      justify-content:center;
      overflow:hidden;
    }

    .book-card img{
      width:100%;
      height:100%;
      object-fit:cover;
    }

    footer.site-footer{
      background:var(--maroon);
      color:#fff;
      padding:14px;
      margin-top:12px;
    }

    .d-inline-block{
      margin-left:5%;
    }

    .brand img{
        width: 80px;
        margin-left: 20px;
        margin-top: 10px;
    }

    @media (max-width:900px){
      .site-wrap{width:95%; margin:20px auto}
      #artigoss{
        background-color: #7a0b0b;
        height:auto;
        padding-bottom: 40px;
        justify-content: center;
        display: flex;
        flex-direction: column;


    
    }
        .art01 {
        width: 100%;
      
        background: #ffffff;
        border-radius: 12px;
        box-shadow: 0 4px 10px rgba(0,0,0,0.15);
        font-family: Arial, sans-serif;
        transition: 0.3s;
        margin:5px auto;
        padding-bottom: px;
     


      
        }
        .art01 .conteudo {
        
         background-color: #7a0b0b00;
    }




    }

    @media  (min-width: 1920px) and (max-width: 2559px) {
       
        .art01 {
        width: 100%;
        max-width: 332px;
        background: #ffffff;
        border-radius: 12px;
        box-shadow: 0 4px 10px rgba(0,0,0,0.15);
        overflow: hidden;
        font-family: Arial, sans-serif;
        transition: 0.3s;
        margin-left: 35px;
       
    }


    #artigoss{
    background-color: #7a0b0b;
    height: auto;
    padding-bottom: 100px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
   
   }








    }