/* Fundo com gradientes em camadas */
body {
  margin: 0;
  padding: 0;
  font-family: 'PT Sans', sans-serif;
  background: linear-gradient(to top right, #bde6fb, #009fe3);
  height: 100vh;
  overflow-x: hidden;
}

.fundo {
  position: relative;
  width: 100%;
  height: 100%;
}

/* Imagem do profissional no canto superior esquerdo */
.profissional {
  position: absolute;
  top: -60px;
  left: 50px;
  height: 320px;
  z-index: 10;
  pointer-events: none; 
}

/* Container do texto e oval */
.cabecalho-imc {
  text-align: center;
  margin-bottom: 20px;
  color: #001b4d;
  position: relative;
}

/* Texto "CALCULE O SEU" */
.texto-cabecalho {
  font-size: 22px;
  font-style: italic;
  font-weight: 600;
  color: #001b4d;
  margin: 0;
  margin-bottom: 15px;
  position: relative;   /* ⬅️ necessário para usar o "top" */
  top: -15px;            /* ⬅️ sobe a frase sem mexer em mais nada */
}

.texto-imc {
  font-size: 38px;
  font-weight: bold;
  color: #001b4d;
  font-family: 'PT Sans', sans-serif;
  transform: translateY(-80%); /* 👈 sobe um pouco o texto */
}

.container-imc {
  width: 400px;
  height: 360px;
  background-image: url('../images/oval_blue.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;

  position: absolute;
  top: -75px;
  left: -35px;
  transform: translateX(-20%); /* Ajusta horizontalmente sem usar valor fixo negativo */
}

.container-imc-formulario {
  position: absolute;
  top: 60px;
  left: 280px; /* ⬅️ controla a posição na horizontal */
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Caixa azul com os campos */
.formulario-imc {
  background-color: #2b6cc0;
  width: 240px;
  padding: 30px 25px;
  border-radius: 5px;
  color: white;
  font-family: 'PT Sans', sans-serif;
  font-size: 16px;
  margin-top: 50px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Estilo dos inputs */
.formulario-imc input[type="text"] {
  padding: 15px;
  border: none;
  border-radius: 10px;
  font-size: 16px;
  box-shadow: -4px 4px 0 #000;
  outline: none;
}

/* Texto "RESULTADO:" */
.resultado-label {
  margin-top: 10px;
  font-weight: bold;
}

/* Caixinha branca arredondada */
.caixa-resultado {
  background-color: white;
  color: #2b2b2b;
  padding: 15px;
  border-radius: 15px;
  box-shadow: 6px 6px 0 #000;
  font-size: 14px;
  text-align: center;
  margin-top: -20px;
}

.caixa-resultado .classificacao {
  font-weight: bold;
  color: #2b6cc0;
  margin: 12px 0 -4px;
  text-align: center; /* ⬅️ Isso centraliza horizontalmente */
}

#btnCalcular {
  width: 70%;             /* 🔹 controla a largura */
  margin: 0 auto;         /* 🔹 centraliza o botão */
  padding: 8px;
  font-size: 16px;
  font-weight: bold;
  background-color: white;
  color: #2b6cc0;
  border: 10px;
  border-radius: 200px;
  box-shadow: -4px 4px 0 #000;
  cursor: pointer;
  transition: all 0.2s ease;
}

#btnCalcular:hover {
  background-color: #f0f0f0;
}

.oculto {
  display: none;
}

#altura,
#peso,
#btnCalcular {
  position: relative;
  z-index: 1000;
}

/* ==================== RESPONSIVOOOOOOO ==================== */


  @media (max-width: 768px) {
  .container-imc-formulario {
    max-width: 280px;     /*  Reduz mais a largura total */
    width: 100%;
    margin: 0 auto;
    
    transform: none !important;
    left: 50% !important;              /* centraliza */
    transform: translateX(-50%) !important; /* move para o centro */

  }
  .profissional {
    left: -10px !important;     /* ajusta horizontalmente */
    top: -55px !important;      /* sobe um pouco */
    height: 200px !important; /* opcional: reduz a imagem para telas pequenas */
    z-index: 5;
  } 
}