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


/* ================================== */
/* ESTILOS PARA TELAS GRANDES (DESKTOP) */
/* ================================== */

header{
  margin: auto;
  margin-bottom: 15px;
  padding: 15px;
  background-color: #B74134;
  width: 80%;
  margin-top: 8px;
  border-radius: 8px;
}

/* html{
    height: 100%;
} */

/* Faz o body ocupar a altura inteira e empurra o footer para baixo */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;

  background-image: url('/img/old.webp');
  background-attachment: fixed;
  background-position: center;
}

.main_home{
  margin: auto;
  width: 80%;
  background-color: #f4f4f4;
  border-radius: 10px;
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif
}

.container{
    width: 100%;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: center;
    
}

.logo{
    left: 20px;
    font-family: fantasy;
    color: azure;
}


.naveg{
  display: flex;
  flex-direction: row;
  gap: 30px;
  margin: auto;
}

.menu nav a{
    color: aliceblue;
    text-decoration: none;
    font-size: 18px;
}

.menu nav a.inscrever{
    color: rgba(255, 255, 3, 0.729);
    padding-right: 0;
}


.menu nav a.home{
    text-decoration: underline;
}

.menu nav a.contatos{
    text-decoration: underline;
    margin: auto;
}

.menu nav a.sobre{
    text-decoration: underline;
}

.menu nav a.inmet{
    text-decoration: underline;
}

footer.footer {
  margin: auto;
  position: static;    /* NÃO fixed */
  width: 80%;
  background-color: #B74134;
  color: aliceblue;
  padding: 0.5%;
  padding-bottom: 15px;
  padding-top: 15px;
  text-align: center;
  border-radius: 8px;

  margin-bottom: 10px;

  /* Espaço entre o fim do main e o footer (ajuste o valor se quiser mais/menos) */
  margin-top: 10px;
}

li{
    list-style-type: circle;
}

.contatos_main{
  margin: auto;
  width: 80%;
  background-color: #f4f4f4;
  border-radius: 10px;
    
}

.caixa_SAC{
    text-align: center;
}

main{
    padding: 20px;
    flex: 1 0 auto;
}

.sobre_main{
  margin: auto;
  width: 80%;
  background-color: #f4f4f4;
  border-radius: 10px;
}


.titulo_sobre{
    color: rgb(15, 111, 167);
}

p{
    font-size: 15px;
    text-align: justify;
    margin-top: 5px;
    margin-bottom: 5px;
}

/* .container_mapa{
    display: flex;
    gap: 40px;
    margin: auto;
    margin-left: 10px;
    margin-right: 10px
} */

.butao{
  /* --- Adicione estas 3 linhas --- */
  display: flex;
  align-items: center; /* Centraliza verticalmente */
  justify-content: center; /* Centraliza horizontalmente */

  /* Estilos básicos que você já pode ter */
  background-color: #c0392b; /* Um vermelho mais sóbrio */
  color: white;
  padding: 10px;
  width: 20%;
  border: none;
  border-radius: 8px; /* Cantos um pouco mais arredondados */
  /* font-family: 'Montserrat', sans-serif; Usando a fonte que sugerimos */
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  cursor: pointer;
  margin-top: 0px;
  box-shadow: 0 6px #999;
  margin: 0;
  margin-right: 5px;
}

.butao:hover{
  background-color: #d35400;
}

.butao:active{
  box-shadow: 0 2px #666;
  transform: translateY(4px);
}


.seletor_data{
  padding: 5px 5px;
  margin-top: 3px;
  margin-bottom: 5px; 
  width: auto;
  max-width: 250px; 


  background-color: #ffffff;
  border: 1px solid #ccc;
  border-radius: 6px;
  box-sizing: border-box;
}

.seletor_meses{

  padding: 5px 5px;
  margin-top: 5px;
  margin-bottom: 5px;
  width: auto;
  max-width: 250px;

  background-color: #ffffff;
  border: 1px solid #ccc;
  border-radius: 6px;
  box-sizing: border-box;
}
/* .seletor{
    margin: auto;
    margin-left: 0px;
    flex: 1;
    text-align: center;
}

.mapa{
    width: 600px;
    height: 500px;
    margin-top: 20px;
    flex: 1.5;
} */

.main_inmet{
  margin: auto;
  width: 80%;
  background-color: #f4f4f4;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.titulo_mapa{
  font-size: 30px;
  margin-top: 15px;
  text-decoration:underline;
  margin-left: 25px;
}

  .container_mapa{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 0 12px;
  }

  .mapa {
    width: calc(100% - 24px); /* deixa uma folga nas laterais
    height: 400px;            /* altura clara em telas pequenas */
    min-height: 500px;
    margin-top: 20px;
    margin-left: 0;           /* anula a margin-left:100px do desktop */
    margin-right: 0;
    margin-inline: auto;
  }

  .seletor {
    display: flex;
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    margin-top: 20px;
    text-align: center;
    flex-direction: row;
    justify-content: space-evenly;
    gap: 20px;
    align-items: center;
  }

  .meses{
    margin: 0;
  }

  .data{
    margin: 0;
  }

  .container_footer{
  display: flex; /* Transforma o container em um flex container */
  justify-content:space-evenly; /*Joga as colunas para as pontas
  align-items: flex-start; /* Alinha o topo das colunas, caso tenham alturas diferentes */ /* Adiciona um respiro interno */
  gap: 15px;
  margin-left: 5%;
  margin-right: 5%;
  }

  .navegação_footer{
    display: flex;
    flex-direction: column;
    text-align: left;
    gap: 5px;

  }

  .footer_nav{
    color: black;
    margin: left;
  }

  .mapa_inmet{
    width: 80%; /* deixa uma folga nas laterais */
    height: auto;
    margin-top: 20px;
    margin-left: 0;           /* anula a margin-left:100px do desktop */
    margin-right: 0;
    margin-inline: auto;
  }



  .legenda {
    padding: 6px 8px;
    font: 14px/16px Arial, Helvetica, sans-serif;
    background: white;
    background: rgba(255,255,255,0.8);
    box-shadow: 0 0 15px rgba(0,0,0,0.2);
    border-radius: 5px;
    margin: 0 0 5px;
    color: #777;
    float: left;
    margin-right: 8px;
    opacity: 0.9;
}

.legenda i {
  width: 15px;
  height: 15px;
  float: left;
  margin-right: 8px;
  opacity: 0.9;
}


.container_mapa_inmet {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 0 12px;
}

/* wrapper interno que animaremos */
.mapa-wrapper {
  margin-top: 10px;
  margin-bottom: 10px;
  height: 0px;                 /* inicia colapsado */
  overflow: hidden;            /* esconde a imagem até expandir (faz o "empurrar") */
  transition: height 800ms ease; /* ajuste a duração se quiser */
}

/* imagem responsiva dentro do wrapper */
.mapa-wrapper img {
  display: block;
  width: 100%;
  height: auto;
}







/* ================================== */
/* ESTILOS PARA TELAS PEQUENAS */
/* ================================== */


@media (max-width: 820px) {

  .container_mapa{
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 0 12px;
  }

  .mapa {
    width: calc(100% - 24px); /* deixa uma folga nas laterais
    height: 400px;            /* altura clara em telas pequenas */
    min-height: 300px;
    margin-top: 20px;
    margin-left: 0;           /* anula a margin-left:100px do desktop */
    margin-right: 0;
    margin-inline: auto;
  }

.seletor {
    margin-left: 0px;
    margin-right: 0px;
    width: 100%;
    margin-top: 20px;
    text-align: center;
  }



header{
  border-radius: 0;
}


  .contatos_main{
  padding: 20px;
    
}

.main_home{
padding-left: 0;
padding-right: 0;
width: 100%;
background-color: #f4f4f4;
border-radius: 0;
}

.main_inmet{
 padding-left: 0;
 padding-right: 0;
 width: 100%;
 background-color: #f4f4f4;
 border-radius: 0;
}

.sobre_main{
 padding-left: 0;
 padding-right: 0;
 width: 100%;
 background-color: #f4f4f4;
 border-radius: 0;
}

.contatos_main{
 padding-left: 0;
 padding-right: 0;
 width: 100%;
 background-color: #f4f4f4; 
 border-radius: 0;
}

header{
  margin: auto;
  margin-bottom: 0px;
  padding: 15px;
  background-color: #B74134;
  width: 100%;
}

.inmet_main{
    padding: 20px;
    padding-left: 30px;
    padding-right: 30px;
}

footer.footer {
  margin: auto;
  position: static;    /* NÃO fixed */
  width: 100%;
  background-color: #B74134;
  color: aliceblue;
  padding: 0.5%;
  text-align: center;
  border-radius: 0;

  /* Espaço entre o fim do main e o footer (ajuste o valor se quiser mais/menos) */
  margin-top: 0px;
}

.sobre_main{
    padding: 20px;
    padding-left: 30px;
    padding-right: 30px;
}


.contatos_main{
    padding: 20px;
    margin: auto;    
}

.titulo_mapa{
  font-size: 30px;
  margin-top: 15px;
  text-decoration:underline;
  margin-left: 40px;
}


}

@media (max-width: 900px) {

.mapa_inmet{
    width: 100%; /* deixa uma folga nas laterais */
    height: auto;
    margin-top: 20px;
    margin-left: 0;           /* anula a margin-left:100px do desktop */
    margin-right: 0;
    margin-inline: auto;
}

.butao{
  margin-right: 20px;
}


}


@media (max-width: 730px) {

  header{
    position: relative;
    z-index: 100000000;
  }

.off-screen-menu{
  background-color: #B74134;
  height: 0px;
  width: 100%;
  max-width: 100%;
  position: fixed;
  top: 75px;
  left: 0;
  z-index: 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 20px;
  padding-top: 0; /* Removemos o espaçamento quando o menu está fechado */
  transition: height 0.3s ease-in-out;
   overflow: hidden;
}

.off-screen-menu.active{
  height: 75px;
  top: 75px;
}

.menu-ham{
  padding: 0.5rem;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.ham-menu{
  height: 30px;
  width: 30px;
  margin-left: auto;
  position: relative;
  z-index: 10001;
}

.ham-menu span{
  height: 5px;
  width: 100%;
  background-color: #ffffff;
  border-radius: 25px;
  position: absolute;
  top: 33%;
  left: 50%;
  transform: translate(-50%, 50%);
  transition: .3s ease;
}

.ham-menu span:nth-child(1){
  top: 0%;
}

.ham-menu span:nth-child(3){
  top: 66%;
}

.ham-menu.active span:nth-child(1){
  top:50%;
  transform: translate(-50%,-50%) rotate(45deg);
  z-index: 1000000;
}

.ham-menu.active span:nth-child(2){
 opacity: 0;
}

.ham-menu.active span:nth-child(3){
  top:50%;
  transform: translate(-50%,-50%) rotate(-45deg);
  z-index: 1000000;
}


.naveg{
 display: none;
}

.off-screen-menu div a{
 text-decoration: none;
 text-align: center;
 color: #ffffff;
 font-size: 20px;
}

  
}


@media (width < 500px) {

.off-screen-menu div a{
 font-size: 100%;
}


.legenda{
  display: none;
}
  
}





@media (width > 730px) {

  .off-screen-menu{
    display: none;
  }

  .menu-ham{
    display: none;
  }
  
}