:root {
  --cor-primaria: #1F5F4E;
  --cor-fundo: #F7F5F0;
  --texto: #1C1C1A;
  --suave: #6B6A64;
  --linha: #E3E0D8;
  --branco: #FFFFFF;
  --whats: #1FA855;
  --erro: #B42318;
  --raio: 14px;
  --rodape: 84px;
  color-scheme: light;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--cor-fundo);
  color: var(--texto);
  font: 16px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  padding: 0 16px calc(var(--rodape) + 24px + env(safe-area-inset-bottom));
}

main, .topo, .erro-config { max-width: 560px; margin: 0 auto; }

.topo {
  display: flex; align-items: center; gap: 10px;
  padding: calc(16px + env(safe-area-inset-top)) 0 8px;
}
.topo img { height: 36px; width: auto; }
.marca { font-weight: 700; letter-spacing: .02em; color: var(--cor-primaria); }

.intro h1 { font-size: 1.75rem; line-height: 1.2; margin: 12px 0 4px; letter-spacing: -.01em; }
.intro p { margin: 0 0 20px; color: var(--suave); }

.progresso { height: 6px; background: var(--linha); border-radius: 99px; overflow: hidden; }
#barra { display: block; height: 100%; width: 0; background: var(--cor-primaria); border-radius: 99px; transition: width .3s ease; }
.passo-texto { margin: 8px 0 0; font-size: .875rem; color: var(--suave); min-height: 1.2em; }

.passo { display: none; }
.passo.ativo { display: block; animation: entrar .25s ease; }
@keyframes entrar { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .passo.ativo, #barra { animation: none; transition: none; } }

h2 { font-size: 1.35rem; margin: 20px 0 8px; outline: none; }

fieldset { border: 0; margin: 0 0 20px; padding: 0; min-width: 0; }
legend { font-weight: 600; margin-bottom: 10px; padding: 0; }

.opcoes { display: flex; flex-wrap: wrap; gap: 8px; }
.opcoes.largas .opcao { flex: 1 1 calc(50% - 4px); }
.opcoes.coluna { flex-direction: column; }
[data-grupo="banheiros"] { display: grid; grid-template-columns: repeat(4, 1fr); }

.opcao { position: relative; flex: 1 1 0; min-width: 52px; }
.opcao input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.opcao span {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 10px 14px;
  background: var(--branco); border: 1.5px solid var(--linha); border-radius: var(--raio);
  font-weight: 600; text-align: center;
  transition: border-color .15s, background .15s, color .15s;
}
.opcoes.coluna .opcao span { justify-content: space-between; text-align: left; }
.opcao small { font-weight: 500; color: var(--suave); }
.opcao input:checked + span { border-color: var(--cor-primaria); background: var(--cor-primaria); color: var(--branco); }
.opcao input:checked + span small { color: inherit; opacity: .85; }
.opcao input:focus-visible + span { outline: 3px solid color-mix(in srgb, var(--cor-primaria) 40%, transparent); outline-offset: 2px; }

.campo { display: block; margin-bottom: 16px; }
.campo > span { display: block; font-weight: 600; margin-bottom: 6px; }
.campo input, .campo textarea {
  width: 100%; min-height: 52px; padding: 12px 14px;
  font: inherit; font-size: 16px; /* 16px ou mais: o iPhone não dá zoom ao focar */
  color: var(--texto); background: var(--branco);
  border: 1.5px solid var(--linha); border-radius: var(--raio);
  -webkit-appearance: none; appearance: none;
}
.campo input[type=date] { display: block; }
.campo input:focus, .campo textarea:focus { outline: none; border-color: var(--cor-primaria); }
.campo input[aria-invalid="true"] { border-color: var(--erro); }
.erro { display: block; color: var(--erro); margin-top: 6px; font-size: .875rem; }
.erro[hidden] { display: none; }

.cartao-resultado {
  background: var(--branco); border: 1px solid var(--linha); border-radius: 20px;
  padding: 20px; margin-bottom: 16px;
}
.preco-grande { font-size: 3rem; font-weight: 800; margin: 0; color: var(--cor-primaria); letter-spacing: -.02em; }
.aviso-estimativa { margin: 4px 0 16px; color: var(--suave); font-size: .9rem; }
.resumo { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; border-top: 1px solid var(--linha); padding-top: 16px; }
.resumo dt { color: var(--suave); font-size: .9rem; }
.resumo dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; white-space: pre-line; }
.avisos { margin: 16px 0 0; padding: 0; list-style: none; }
.avisos:empty { display: none; }
.avisos li { background: #FFF6E5; color: #7A4B00; border-radius: 10px; padding: 10px 12px; font-size: .9rem; margin-top: 8px; }

.botao-whats {
  display: flex; align-items: center; justify-content: center;
  min-height: 60px; padding: 16px; border-radius: var(--raio);
  background: var(--whats); color: var(--branco); font-weight: 700; font-size: 1.1rem;
  text-decoration: none; box-shadow: 0 6px 18px rgba(31, 168, 85, .3);
}
.botao-whats[aria-disabled="true"] { background: #A9B5AE; box-shadow: none; cursor: not-allowed; }

.rodape {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: var(--rodape);
  padding: 12px max(16px, calc((100% - 560px) / 2)) calc(12px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--linha);
}
.rodape[hidden], .digitando .rodape { display: none; }
/* No resultado o botão do WhatsApp é o foco: sem rodapé nem cabeçalho de passos por cima. */
.no-resultado .rodape, .no-resultado .intro, .no-resultado .progresso, .no-resultado .passo-texto { display: none; }
.no-resultado { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
.botao.largo { width: 100%; margin-top: 10px; }
.rodape-preco small { display: block; color: var(--suave); font-size: .8rem; }
.rodape-preco strong { font-size: 1.6rem; font-weight: 800; }
.rodape-botoes { display: flex; gap: 8px; }

.botao {
  min-height: 52px; padding: 0 22px; border-radius: var(--raio);
  font: inherit; font-weight: 700; cursor: pointer; border: 1.5px solid transparent;
}
.botao[hidden] { display: none; }
.botao.primario { background: var(--cor-primaria); color: var(--branco); }
.botao.secundario { background: transparent; color: var(--texto); border-color: var(--linha); }
.botao:focus-visible, .botao-whats:focus-visible { outline: 3px solid color-mix(in srgb, var(--cor-primaria) 40%, transparent); outline-offset: 2px; }

.erro-config { margin-top: 40px; padding: 20px; background: var(--branco); border-radius: var(--raio); text-align: center; }