* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html {
    scroll-behavior: smooth;
}
body{
background-color: #000;
font-family: "Open Sans", serif;
color: #FFF;
font-weight: 300;
font-size: 18px;
}

.botao{
    padding: 15px;
    background-color: #ffcc00;
    color: #000;
    font-weight: 700;
    width: 320px;
    text-align: center;
    border-radius: 50px;
    margin-top: 20px;
    text-transform: uppercase;
    font-size: 17px;
   
    /*border: solid #FFF 2px;*/
   /* -webkit-box-shadow:0px 0px 86px 17px rgba(255,196,46,0.9);
-moz-box-shadow: 0px 0px 86px 17px rgba(255,196,46,0.9);
box-shadow: 0px 0px 86px 17px rgba(255,196,46,0.9);*/
}

.botao2{
    padding: 15px;
    background-color: #ffcc00;
    color: #000;
    font-weight: 700;
    width: 320px;
    text-align: center;
    border-radius: 15px;
    margin: auto;
    margin-top: 20px;
    text-transform: uppercase;
    font-size: 17px;
 
}





hr{
    border:  solid #000 1px
}


.destaque{
    font-size: 26px;
    font-weight: 700;
    /*border-top: solid white 1px;*/
    /*border-bottom: solid white 1px;*/
    padding-top: 15px;
    padding-bottom: 15px;
    /*text-shadow: rgba(255,145,0,0.7) 0px 0px 34px;*/
}

.destaque2{
    font-size: 24px;
    font-weight: 700;
    padding-top: 15px;
    padding-bottom: 15px;
    border: solid #fff 1px;
    padding: 10px;
    border-radius: 15px;
    
}

.destaque3{
    color:#ffb700;
    font-weight: 900;
    font-size: 34;
}



h1{
    font-size: 36px;
    font-weight: 900;
    color: #ffb700;
    
}

strong{font-weight: 900}


h2{
    font-size: 24px;
    font-weight: 300;
    color: #FFFFFF;
}

h3{
    font-size: 24px;
    font-weight: 700;
}


.hero{
    width: 100%;
}
.hero img{
    max-width: 100%;
}

a{
    font-weight: 700;
    color: #ffcc00;
    font-size: 26px;
    text-decoration: none
}

.container{
width: 100%;
margin: auto;
}

.conteudo{
    width: 90%;
    max-width: 1280px;
    margin: auto;

}

.espacador-g{height: 90px;}
.espacador-p{height: 45px;}


.fixa {
  /*width: 100%; */ /* Ocupa tudo no mobile */
    width: 456px;
    //border: solid
        flex-shrink: 1;
}

.foto{
    max-width: 556px;
}

.foto img{
    width: 100%;
    border-radius: 20px;
}

.fundo-branco{
    background-color: #FFFFFF;
}

.fundo-amarelo{
    background-color: #ffb700;
}



.fundo2{
    background-color: #140e00;
}

.fundo3{
    background-color:#ccc;
}



.fonte-preta{
    color: #000;
}

.fonte-azul{
    color: #002ba1
}

.fonte-p{
    font-size: 20px;
}

.embed-container {position: relative;padding-bottom:0;height: 600px;overflow: hidden; width:90%;margin: auto; max-width: 1200px;} 
.embed-container iframe, .embed-container object, .embed-container embed {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}



.festivais {
max-width: 1280px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
height: auto;
margin-bottom: 30px;
}

.festivais-item {
flex: 1 25%; /* 4 colunas */
max-width: 25%;
box-sizing: border-box;
padding: 5px;
height: auto;
    color: #FFFFFF;
    font-size: 32px;
    text-align: center;


}

.festivais-item img{
    width: 180px;
}



.flex-container {
  display: flex;
  flex-wrap: wrap; /* Permite quebrar a linha */
}



.flexivel {
  flex: 1;
  min-width: 300px; /* Define um limite antes de quebrar */
    
}

.fundoimg{
    background-color: #000;
    
    background-image: url(imgs/espaco-fundo-v.webp);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: bottom;
        
}


.ico{
    width: 40px;
    margin-right: 15px;
}


.logos{
    max-width: 1181px;
    margin: auto;
}

.texto{font-weight: 300;
font-size: 18px;}
.titulo{
     font-size: 32px;
    font-weight: 900;
    color: #ffcc00;
    line-height: 1;
    padding-bottom: 20px
}

.mobile{display: none}


.pergunta{
    color: #000;
    font-weight: 700;
    font-size: 20px;
    padding-top: 20px;
}

.resposta{
    color: #000;
    padding-bottom: 20px;
    border-bottom: solid 1px;
}

.resposta:last-child{
    border: none;
}



.texto-center{
    text-align: center;
}





/*--------------------------------------------------*/

  :root {
    box-sizing: border-box;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  *, *::before, *::after { box-sizing: inherit; }



 .grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 1080px;
    margin: 0 auto;
  }

 .grid2{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    max-width: 1080px;
    margin: 0 auto;
  }






  /* No mobile, empilha um embaixo do outro */
  @media (max-width: 720px) {
    .grid {
      grid-template-columns: 1fr;
      max-width: 400px;
    }
      
     .grid2 {
      grid-template-columns: 1fr;
      max-width: 400px;
    }
      
  }

  .card {
    /*background: #ffffff;*/
    border: 2px solid #111111;
    border-radius: 28px;
    padding: 40px 28px 32px;
  }

  .top-row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
  }

  .number {
    flex: 0 0 auto;
    font-size: 64px;
    font-weight: 800;
    line-height: 1;
    color: #000;
  }

  .title {
    flex: 1 1 auto;
    font-size: 28px;
    font-weight: 800;
    line-height: 1.15;
    color: #000;
  }

  .body-text {
    font-size: 17px;
    line-height: 1.5;
    color: #111111;
  }

  .body-text p {
    margin: 0 0 18px;
  }

  .body-text p:last-child {
    margin-bottom: 0;
  }


.botao{
    width: 95%;
    margin: auto;
    margin-top: 15px;
    margin-bottom: 15px;
     font-weight: 900;
    
}




.preco{
    font-size: 20px;
    font-weight: 700;
    padding-top: 15px;
}

li{
    margin-left: 25px
}

/*----------*/

























@media only screen and (max-width: 760px) {

h1{
font-size: 30px; 
line-height: 1;
}

body{font-size: 18px;}
    
.desktop{display:none}
.mobile{display: inherit}
.logos{width: 100%}
.logos img{width: 100%}
.embed-container{height: 0;padding-bottom: 56.25%;}

.foto{
width: 95%;
margin: auto;
 }
 


 
h2{
font-size: 24px; 
    font-weight: 400;
}
    
.festivais-item{border-bottom: dotted #ffcc00 2px; padding-bottom: 40px}
.festivais{width: 80%}
.titulo{font-size: 46px}
.embed-container{height: 720px}
   
}
  

@media (min-width: 768px) {
        
    
.fixa {
/*width: 256px;*/
flex-shrink: 0;
}
}