@import url('font.css');
@import url('cabecalho.css');
@import url('rodape.css');
@import url('menu.css');
@import url('selecaodecadastro.css');
/*importa o css dos componentes*/

html {
  height: 100%;
  /*deixa a altura do html em 100%*/
  width: 100%;
  /*deixa a largura do html em 100%*/
}

body {
  /*configura o corpo da pagina*/
  margin: 0;
  /*deixa a margem da pagina em zero*/
  background: #F5F5CC;
  /*muda a cor de fundo da pagina */
}



.titulo {
  color: #5DE77B;
  text-align: center;
  text-shadow: 0 4px 0 #000;
  -webkit-text-stroke-width: 1px;
  /*largura do contorno no texto */
  -webkit-text-stroke-color: black;
  /*cor do contorno no texto */
  font-family: poppinsBold;
  /*muda a fonte da letra*/
  font-size: 70px;
  /*muda o tamanho da letra */
}

.subtitulo {
  color: #348145;
  /*muda a cor do texto*/
  text-align: center;
  /*alinha o texto no centro*/
  font-family: poppinsLight;
  /*muda a fonte da letra*/
  font-size: 30px;
  /*muda o tamanho da letra*/
}

/*estiliza as caixas onde ficam os inputs da calculadora*/
.caixa {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/*estiliza o titulo das caixas*/
.caixa .titulocaixa {
  width: 1006.171px;
  height: 48.1px;
  border-radius: 20px 20px 0 0;
  background: #348145;
  color: #FFF;
  font-size: 25px;
  font-family: poppinsBold;
  padding: 10px;
}

/*estiliza a parte do fundo doo logo das caixas*/
.caixa .fundoimagem {
  width: 229.794px;
  height: 195.605px;
  border-radius: 0 0 20px 0;
  background: #5DE782;
  display: flex;
  justify-content: center;
  align-items: center;
}

/*estiliza o icone que fica na direita das caixas*/
.imagem {
  width: 98.817px;
  height: 98.817px;
}

/*estiliza o fundo geral das caixas*/
.caixa .fundobranco {
  width: 795.377px;
  height: 195.605px;
  border-radius: 0 0 0 20px;
  background: #FFF;
  display: flex;
  justify-content: center;

}

/*junta a parte branca que tem o input comm a parte do icone pra eles ficarem lado a lado*/
.caixa .verdeebranco {
  display: flex;
  flex-direction: row;

}

/*estiliza todos os textos disponiveis dentro da caixa*/
.caixa .textos {
  font-size: 25px;
  font-family: poppinsBold;
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  text-align: center;

  /*estiliza a caixa de texto*/
  input {
    border: 3px solid #000;
    width: 170px;
    height: 30px;
    font-family: poppinsBold;
    font-size: 25px;
    padding: 5px;

  }
}

/*estiliza as caixas que não tem titulo*/
.caixamenor {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/*estiliza o fundo de onde fica a logo das caixas onde não tem titulo*/
.caixamenor .fundoimagem {
  width: 229.794px;
  height: 195.605px;
  border-radius: 0 20px 20px 0;
  background: #5DE782;
  display: flex;
  justify-content: center;
  align-items: center;
}

/*estiliza o tamanho da imagem*/
.imagem {
  width: 98.817px;
  height: 98.817px;
}

/*estiliza o fundo da caixa menor*/
.caixamenor .fundobranco {
  width: 795.377px;
  height: 195.605px;
  border-radius: 20px 0 0 20px;
  background: #FFF;
  display: flex;
  justify-content: center;

}

/*junta a parte branca que tem o input comm a parte do icone pra eles ficarem lado a lado*/
.caixamenor .verdeebranco {
  display: flex;
  flex-direction: row;

}

/*estiliza todos os textos disponiveis dentro da caixa*/
.caixamenor .textos {
  font-size: 25px;
  font-family: poppinsBold;
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  text-align: center;

  input {
    border: 3px solid #000;
    width: 170px;
    height: 30px;
    font-family: poppinsBold;
    font-size: 25px;
    padding: 5px;

  }
}

.imagem2 {
  width: 218px;
  height: 218px;
}

.calcular {
  /*configura o botão de link da quinta seção*/
  display: flex;
  margin: auto;
  width: 249px;
  height: 60px;
  padding: 12px 24px 10px 24px;
  border-radius: 0 80px;
  border: 1px solid #000;
  text-decoration: none;
  color: black;
  background-color: #F5F5CC;
  font-size: 25px;
  justify-content: center;
  font-family: poppinsSemiBold;
  align-items: center;
  cursor: pointer;
}

.calcular:hover {
  /*configura o botao o houver do botão que ao passar o mouse ele mudara  */
  display: flex;
  width: 249px;
  height: 60px;
  padding: 12px 24px 10px 24px;
  align-items: center;
  border-radius: 0 80px;
  border: 1px solid #FFF;
  text-decoration: none;
  color: white;
  background-color: #348145;
}

/*estiliza a parte do resultado qque aparece quando o usuario clica pra calcular*/
.resultado {
  display: none;
  flex-direction: column;
  /* X em cima, texto abaixo */
  width: 808px;
  height: 213px;
  border-radius: 20px;
  border: 2px solid #000;
  background: #FFF;
  margin: auto;
  padding: 10px;
  font-family: poppinsRegular;
}

/* estiliza o botão de fechar o resultado*/
.resultado .fechar2 {
  align-self: flex-start;
  /* X no canto esquerdo */
  font-size: 30px;
  background: none;
  border: none;
  cursor: pointer;
}

.resultado .total {
  flex: 1;
  /* ocupa o resto da caixa */
  display: flex;
  justify-content: center;
  /* centraliza na horizontal */
  align-items: center;
  /* centraliza na vertical */
  font-size: 25px;
  gap: 15px;

  p {
    color: white;
    border-radius: 20px;
    background: #348145;
    padding: 8px;
  }

}

.conteudomobilecalc {
  display: none;
}


@media (max-width: 600px) {

  /* Define estilos para telas com largura máxima de 600px */
  /*estiliza tudo que ja foi estilizado anteriormente porem agora para telas menores de 600 pixels*/
  /* Estiliza o conteúdo da calculadora para dispositivos móveis */
  .conteudomobilecalc {
    display: flex;
    flex-direction: column;
    gap: 50px;
  }

  /* Estilo para o título */
  .titulo {
    font-size: 50px;
    /* Tamanho da fonte do título */
    line-height: 100%;
    /* Altura da linha, para ajustar o espaçamento entre linhas */

    br {
      display: none;
      /* Esconde qualquer quebra de linha (br) dentro do título */
    }

    br {
      display: none;
      /* Esconde qualquer quebra de linha (br) novamente (duplicado desnecessário) */
    }
  }

  /* Estilo para o subtítulo */
  .subtitulo {
    font-size: 30px;
    /* Tamanho da fonte do subtítulo */
    width: auto;
    /* Largura automática */
    height: auto;
    /* Altura automática */

    br {
      display: none;
      /* Esconde qualquer quebra de linha (br) dentro do subtítulo */
    }
  }

  /* Estilos para elementos invisíveis */
  .caixa,
  .caixamenor,
  .espaco {
    display: none;
    /* Esconde esses elementos */
  }

  /* Estilo para a caixa principal no layout móvel */
  .caixamobile {
    display: flex;
    /* Usa Flexbox para layout */
    flex-direction: column;
    /* Organiza os itens em coluna */
    align-items: center;
    /* Centraliza os itens horizontalmente */
  }

  /* Estilo para o título dentro da caixa móvel */
  .caixamobile .titulocaixamobile {
    width: 397px;
    /* Largura da caixa de título */
    height: 45px;
    /* Altura da caixa de título */
    border-radius: 20px 20px 0 0;
    /* Bordas arredondadas no topo */
    background: #348145;
    /* Cor de fundo verde */
    color: #FFF;
    /* Cor do texto branca */
    font-size: 25px;
    /* Tamanho da fonte */
    font-family: poppinsBold;
    /* Fonte em negrito */
    padding: 10px;
    /* Espaçamento interno de 10px */
  }

  /* Estilo para o fundo da imagem na caixa móvel */
  .caixamobile .fundoimagemmobile {
    width: 397px;
    /* Largura do fundo da imagem */
    height: 195.605px;
    /* Altura do fundo da imagem */
    background: #5DE782;
    /* Cor de fundo verde claro */
    display: flex;
    /* Usa Flexbox para layout */
    justify-content: center;
    /* Centraliza horizontalmente */
    align-items: center;
    /* Centraliza verticalmente */
    padding: 10px;
    /* Espaçamento interno de 10px */
  }

  /* Estilo para a imagem dentro do fundo da imagem */
  .fundoimagemmobile .imagemmobile {
    width: 150.817px;
    /* Largura da imagem */
    height: 150.817px;
    /* Altura da imagem */
  }

  /* Estilo para outra imagem na parte inferior da tela móvel */
  .fundomobile .imagemmobile2 {
    width: 500px;
    /* Largura da imagem */
    height: 500px;
    /* Altura da imagem */
  }

  /* Estilo para o fundo inferior da caixa móvel */
  .caixamobile .fundobrancomobile {
    width: 397px;
    /* Largura da parte inferior da caixa móvel */
    height: 150px;
    /* Altura da parte inferior da caixa móvel */
    border-radius: 0 0 20px 20px;
    /* Bordas arredondadas no fundo */
    background: #FFF;
    /* Cor de fundo branca */
    display: flex;
    /* Usa Flexbox para layout */
    justify-content: center;
    /* Centraliza horizontalmente */
    align-items: center;
    /* Centraliza verticalmente */
    padding: 10px;
    /* Espaçamento interno de 10px */
    font-family: poppinsBold;
    /* Fonte em negrito */
    font-size: 30px;
    /* Tamanho da fonte */
  }

  /* Estilo para o input dentro do fundo inferior da caixa móvel */
  .caixamobile .fundobrancomobile input {
    border: 3px solid #000;
    /* Borda preta de 3px */
    width: 140px;
    /* Largura do input */
    height: 20px;
    /* Altura do input */
    font-family: poppinsBold;
    /* Fonte em negrito */
    font-size: 25px;
    /* Tamanho da fonte no input */
    padding: 5px;
    /* Espaçamento interno do input */
  }

  /* Estilo para os textos na parte inferior da caixa móvel */
  .textosmobile {
    display: flex;
    /* Usa Flexbox para layout */
    flex-direction: column;
    /* Organiza os itens em coluna */
    align-items: center;
    /* Centraliza os itens horizontalmente */
    justify-content: center;
    /* Centraliza os itens verticalmente */
    gap: 5px;
    /* Espaçamento de 5px entre os itens */
    text-align: center;
    /* Alinha o texto ao centro */
  }

  /* Estilo para o resultado */
  .resultado {
    width: 400px;
    /* Largura do resultado */
    height: 130px;
    /* Altura do resultado */
  }

  /* Estilo para o total dentro do resultado */
  .resultado .total {
    font-size: 20px;
    /* Tamanho da fonte para o total */
  }

  /* Estilo para o conteúdo da versão desktop (sem quebras de linha) */
  .conteudodesktop {
    br {
      display: none;
      /* Esconde as quebras de linha no conteúdo desktop */
    }