html, body {
  height: 100%;
}

body {
  font-family: -apple-system, Segoe UI, Roboto, sans-serif;
  background: #145a2a;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  min-height: 100dvh; /* respeita a área visível real em navegadores mobile */
  margin: 0;
  padding: 16px;
  box-sizing: border-box;
}

/* Ocupa o espaço entre o topo e o rodapé, mantendo o card centralizado
   verticalmente mesmo com o rodapé presente na tela */
/* Agrupa o logo e o card como uma única unidade, para que fiquem
   centralizados juntos na tela (logo sempre colado acima da caixa) */
.bloco-central {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 440px;
}

.logo-topo {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
}

.logo-topo img {
  height: 64px;
  width: auto;
}

.conteudo-principal {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card {
  background: white;
  padding: clamp(24px, 6vw, 40px);
  border-radius: 4px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  text-align: center;
  width: 100%;
  max-width: 440px;
}

h1 {
  font-size: clamp(16px, 4vw, 19px);
  color: #444444;
  margin: 0 0 18px;
  font-weight: 600;
}

/* Input e botão são os elementos principais da página:
   maiores, com mais destaque que o título */
.campo-busca {
  position: relative;
  width: 100%;
}

input {
  width: 100%;
  box-sizing: border-box;
  padding: clamp(16px, 4vw, 20px);
  padding-right: clamp(48px, 12vw, 56px);
  font-size: clamp(20px, 5vw, 24px);
  border: 2px solid #cfe0d5;
  border-radius: 4px;
  text-align: center;
  outline: none;
}

input:focus {
  border-color: #2d5a3d;
}

.btn-seta {
  position: absolute;
  top: 50%;
  right: clamp(10px, 2.5vw, 14px);
  transform: translateY(-50%);
  border: none;
  background: transparent;
  color: #2d5a3d;
  font-size: clamp(20px, 5vw, 24px);
  line-height: 1;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-seta:active {
  transform: translateY(-50%) scale(0.92);
}

.btn-camera {
  margin-top: 16px;
  width: 100%;
  /* mantém a proporção original da imagem (309x69) para não distorcer o recorte */
  aspect-ratio: 309 / 69;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  background-color: transparent;
  background-image: url('../img/fundo-botao-camera.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
  /* remove o estilo nativo do botão (que trazia um fundo próprio do
     sistema por baixo do PNG e não deixava a transparência aparecer) */
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #2d5a3d; /* verde escuro, mesma cor do título, com bom contraste sobre o fundo */
  font-size: clamp(17px, 4.4vw, 19px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  transition: transform 0.12s ease, filter 0.12s ease;
}

.btn-camera:active {
  transform: scale(0.98);
  filter: brightness(0.96);
}

.status {
  margin-top: 16px;
  font-size: 14px;
  color: #666;
  min-height: 20px;
}

.status.erro {
  color: #c0392b;
}

.rodape {
  margin-top: 16px;
  padding-top: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.rodape img {
  height: 52px;
  width: auto;
}

.rodape p {
  margin: 0;
  font-size: 10px;
  line-height: 1.4;
  color: #9aa39d;
  max-width: 320px;
}