.topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px var(--gutter);
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  color: var(--tinta);
  text-decoration: none;
}
.marca img { width: 40px; height: 38px; }
.marca-nome { display: flex; flex-direction: column; font-family: var(--display); font-size: 15px; font-weight: 800; line-height: 1.15; }
.marca-nome span { font-family: var(--texto); font-size: 12px; font-weight: 500; color: var(--suave); }
.topo .btn { padding: 10px 16px; font-size: 15px; white-space: nowrap; }

h1, h2 { font-family: var(--display); line-height: 1.15; text-wrap: balance; }
h1 { font-size: clamp(28px, 4.6vw, 48px); font-weight: 800; }
h2 { font-size: clamp(24px, 3.2vw, 36px); font-weight: 700; }

main > section { padding: clamp(48px, 8vw, 96px) var(--gutter); border-top: 1px solid var(--borda-secao); }

/* ritmo de fundos: nunca duas seções seguidas iguais */
.objecoes { background: var(--creme); }

/* hero: formulário | resultado */

main > .hero {
  display: grid;
  gap: 40px;
  align-items: center;
  padding-top: clamp(24px, 4vw, 56px);
  background: var(--brilho-sol);
}

.hero-sub { margin-top: 16px; max-width: 32rem; color: var(--azul-escuro); }

#calc { display: grid; gap: 18px; margin-top: 28px; max-width: 28rem; }

.campo label { display: block; margin-bottom: 6px; font-weight: 600; }

.campo input:not([type="range"]):not(.deslizante-digitar) {
  width: 100%;
  min-height: 52px;
  padding: 10px 14px;
  border: 1.5px solid var(--suave);
  border-radius: 12px;
  font: inherit;
  font-size: 18px;
  color: var(--tinta);
  background: var(--campo);
}
.campo input::placeholder { color: var(--suave); opacity: 1; }
.campo input[aria-invalid] { border-color: var(--erro); }

.campo-erro { min-height: 0; margin-top: 6px; font-size: 15px; font-weight: 500; color: var(--erro); }
.campo-erro:empty { display: none; }
.campo-erro a { display: inline-flex; align-items: center; min-height: 44px; color: inherit; font-weight: 600; }

/* busca de cidades (js/simulador/cidades.js) */
.cidades { position: relative; }
.cidades input { scroll-margin-top: 16px; }

.cidades-lista,
.cidades-vazio {
  position: absolute;
  z-index: 20;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  margin: 0;
  background: var(--superficie);
  border: 1.5px solid var(--suave);
  border-radius: 12px;
  box-shadow: 0 12px 32px var(--sombra);
}

.cidades-lista {
  max-height: min(368px, 45vh);
  padding: 6px;
  overflow-y: auto;
  overscroll-behavior: contain;
  list-style: none;
}

.cidades-lista[hidden],
.cidades-vazio[hidden] { display: none; }

.cidades-opcao {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 48px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 17px;
  line-height: 1.25;
  color: var(--tinta);
  cursor: pointer;
}

.cidades-nome { min-width: 0; overflow-wrap: anywhere; }
.cidades-opcao mark { color: inherit; background: none; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.cidades-uf { flex: none; font-size: 14px; color: var(--suave); }

@media (hover: hover) {
  .cidades-opcao:hover { background: var(--chip); }
}

.cidades-opcao[aria-selected="true"] { color: var(--selecao-texto); background: var(--selecao-fundo); }
.cidades-opcao[aria-selected="true"] .cidades-uf { color: var(--selecao-sub); }

.cidades-vazio { padding: 14px 16px; font-size: 15px; line-height: 1.45; color: var(--tinta); }
.cidades-vazio a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--tinta); }

.cidades-aviso {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

#calc .btn { justify-self: start; min-width: 10rem; }
#calc .btn:disabled { opacity: 0.7; cursor: progress; }

.resultado {
  --res-pad: clamp(24px, 4vw, 44px);
  overflow: hidden;
  padding: var(--res-pad);
  border-radius: 28px;
  background: var(--superficie);
  border: 2px solid var(--verde);
}

/* foto A1 no topo do card: casa e telhado dão contexto ao número */
.res-foto { display: block; margin: calc(-1 * var(--res-pad)) calc(-1 * var(--res-pad)) 20px; aspect-ratio: 3 / 2; background: var(--chip); }
.res-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 78%; }
@media (min-width: 960px) {
  .res-foto { aspect-ratio: 16 / 7; }
  .res-foto img { object-position: 60% 62%; }
}

.res-titulo { font-size: 16px; font-weight: 600; color: var(--suave); }

.res-par { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.res-bloco { display: flex; flex-direction: column; min-width: 0; }
.res-rotulo { font-size: 15px; font-weight: 600; color: var(--suave); }
.res-valor { font-family: var(--display); font-weight: 800; line-height: 1.05; font-variant-numeric: tabular-nums; white-space: nowrap; }
.res-hoje { font-size: clamp(22px, 6vw, 40px); font-weight: 500; color: var(--suave); text-decoration: line-through; text-decoration-thickness: 2px; }
.res-solar { font-size: clamp(34px, 9.5vw, 72px); color: var(--verde); }
.res-mes { margin-top: 8px; font-size: 15px; color: var(--suave); }

.res-extra { display: grid; gap: 14px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--linha); }
.res-extra[hidden] { display: none; }
.res-extra dt { font-size: 15px; font-weight: 600; color: var(--suave); }
.res-extra dd { font-family: var(--display); font-size: clamp(22px, 3vw, 32px); font-weight: 800; color: var(--verde); font-variant-numeric: tabular-nums; }
.res-extra div:last-child dd { font-size: clamp(18px, 2.2vw, 22px); color: var(--tinta); }

.res-selo { margin-top: 16px; width: fit-content; padding: 4px 12px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--tinta); background: var(--chip); }
.res-selo[hidden] { display: none; }
.res-nota { margin-top: 16px; font-size: 15px; color: var(--suave); }
.resultado .btn { margin-top: 22px; }
.resultado .btn[hidden] { display: none; }

@media (min-width: 960px) {
  main > .hero { grid-template-columns: 1fr 1.1fr; gap: 64px; }
  .res-extra { grid-template-columns: 1fr 1fr; }
}

/* dinheiro */

.dinheiro { display: grid; gap: 28px; background: var(--faixa); color: var(--faixa-texto); }
.dinheiro-texto { max-width: 44rem; }
.dinheiro-foto { display: block; aspect-ratio: 4 / 5; max-width: 26rem; }
@media (min-width: 760px) { .dinheiro-foto { aspect-ratio: 16 / 9; max-width: 40rem; } }
@media (min-width: 960px) {
  .dinheiro { grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
  .dinheiro-texto { order: -1; }
  .dinheiro-foto { max-width: none; }
}
.dinheiro p { margin-top: 16px; }
.dinheiro-destaque { font-size: clamp(20px, 2.4vw, 26px); line-height: 1.4; }
.dinheiro-destaque strong { font-family: var(--display); font-weight: 800; color: var(--verde-faixa); white-space: nowrap; }

/* prazo */

.prazo { display: grid; gap: 40px; }
.prazo-texto { max-width: 38rem; }
.prazo-texto p { margin-top: 14px; }
.prazo-custo { font-size: 19px; font-weight: 600; }
.prazo-custo strong { font-family: var(--display); font-weight: 800; color: var(--verde); white-space: nowrap; }
.etapas { list-style: none; counter-reset: etapa; align-self: center; }
.etapa { grid-template-rows: auto auto auto; }
.etapa::before { grid-row: 1 / span 3; }
.etapa-prazo { display: block; }

@media (min-width: 960px) {
  .prazo { grid-template-columns: 1fr 1fr; gap: 72px; }
}

/* sem ficar no escuro */

.sem-escuro { background: var(--superficie); border-block: 1px solid var(--linha); }
.sem-escuro-grade { display: grid; gap: 40px; margin-top: 28px; }
.sem-escuro-grade p { max-width: 38rem; }

.balao {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin-top: 20px;
  padding: 14px 18px 10px;
  border-radius: 4px 20px 20px 20px;
  background: var(--zap-fundo);
  color: var(--zap-texto);
}
.balao span { display: block; }
.balao small { display: block; margin-top: 6px; font-size: 13px; color: var(--zap-hora); text-align: right; }

.numeros { display: flex; flex-wrap: wrap; gap: 20px 40px; margin-top: 28px; }
.numeros strong { display: block; font-family: var(--display); font-size: clamp(26px, 3.4vw, 40px); font-weight: 800; line-height: 1.1; color: var(--tinta); }
.numeros span { font-size: 15px; color: var(--suave); }
.estados-texto { margin-top: 24px; font-weight: 600; }

.avaliacoes-lista { display: grid; gap: 24px; align-content: start; }
.link-google { display: inline-flex; align-items: center; min-height: 44px; width: fit-content; font-weight: 600; color: var(--tinta); text-underline-offset: 3px; }

@media (min-width: 960px) {
  .sem-escuro-grade { grid-template-columns: 1fr 1fr; gap: 72px; }
}

/* quem é a Estrutura: foto real da sede + endereço */

.sede { display: grid; gap: 28px; align-items: center; }
.sede-foto { aspect-ratio: 16 / 10; }
.sede-texto p { margin-top: 16px; max-width: 34rem; }
.sede-texto h2 + p { margin-top: 20px; }
.sede-dados { display: grid; gap: 14px; margin: 24px 0 8px; }
.sede-dados dt { font-size: 14px; font-weight: 600; color: var(--suave); }
.sede-dados dd { margin: 2px 0 0; }
.sede-dados a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--tinta); text-underline-offset: 3px; }
@media (min-width: 960px) {
  .sede { grid-template-columns: 1fr 1fr; gap: 72px; }
}

.rodape p + p { margin-top: 4px; }

/* perguntas */

.perguntas > div { max-width: 44rem; margin-top: 20px; border-top: 1px solid var(--linha); }

/* CTA final */

.cta-final { text-align: center; }
.acoes { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 28px; }

.rodape { margin-top: 0; }

.objecoes .nota { max-width: 44rem; margin-top: 16px; font-size: 13px; color: var(--suave); }
.objecoes-foto { margin-top: 28px; aspect-ratio: 16 / 10; max-width: 34rem; }
.objecoes-foto img { object-position: 50% 40%; }
@media (min-width: 960px) {
  .objecoes { display: grid; grid-template-columns: minmax(0, 44rem) minmax(240px, 22rem); column-gap: 72px; align-items: start; }
  .objecoes > :not(.objecoes-foto) { grid-column: 1; }
  .objecoes-foto { grid-column: 2; grid-row: 1 / span 3; margin-top: 0; aspect-ratio: 4 / 5; position: sticky; top: 24px; }
}

/* CTA final sobre o close da placa (A7), com véu na cor do tema para o texto ler nos dois temas */
.cta-final { position: relative; overflow: hidden; isolation: isolate; }
.cta-fundo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.cta-final::before { content: ''; position: absolute; inset: 0; z-index: -1; background: rgba(var(--veu-rgb), 0.86); }