/* Mesmas fontes do site alviasolucoes.com.br (self-hosted, licença em fonts/) */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700 800;
  font-display: swap;
  src: url('../fonts/montserrat-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Montserrat Fallback';
  src: local('Arial');
  size-adjust: 113%;
  ascent-override: 85%;
  descent-override: 22%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial');
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}

/* Tokens iguais aos do site */
:root {
  --fundo: #0b0b0c;
  --card: #17171a;
  --borda: #26262b;
  --borda-forte: #3a3a40;
  --dourado: #ddb23f;
  --dourado-claro: #fce166;
  --titulo-cor: #ffffff;
  --texto: #f3ecdd;
  --texto-2: #c9c1b0;
  --texto-3: #8e877a;
  --neutro: #c9c1b0;
  --barra-neutra: #6f6a61;
  --erro: #ffb4a2;
  --titulo: 'Montserrat', 'Montserrat Fallback', Arial, sans-serif;
  --corpo: 'Inter', 'Inter Fallback', Arial, system-ui, sans-serif;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--corpo);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, table { margin: 0; }

h1, h2, h3 { font-family: var(--titulo); font-weight: 800; color: var(--titulo-cor); }

:focus-visible { outline: 2px solid var(--dourado-claro); outline-offset: 3px; border-radius: 6px; }

/* Cabeçalho */
.topo { border-bottom: 1px solid var(--borda); background: rgb(11 11 12 / 0.98); }

.topo__conteudo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: 1240px;
  min-height: 68px;
  margin: 0 auto;
  padding: 10px 16px;
}

.topo__acoes { display: flex; align-items: center; gap: 8px; }

.topo__voltar {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 8px;
  color: var(--texto-2);
  font-size: 15px;
  text-decoration: none;
  transition: color 0.2s;
}
.topo__voltar:hover { color: var(--dourado-claro); }

/* Em telas estreitas o link fica só no rodapé, para não apertar o botão */
@media (max-width: 419px) { .topo__voltar { display: none; } }

.logo { display: inline-flex; align-items: center; min-height: 44px; border-radius: 8px; }
.logo img { display: block; width: auto; height: 46px; }

/* Botões (iguais aos do site) */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 12px 24px;
  border: 1px solid transparent;
  border-radius: 14px;
  font: 600 16px/1.2 var(--corpo);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: box-shadow 0.3s var(--ease), border-color 0.2s, color 0.2s;
}

.botao--dourado {
  background: linear-gradient(180deg, var(--dourado-claro), var(--dourado));
  color: var(--fundo);
  box-shadow: 0 0 0 1px rgb(252 225 102 / 0.35), 0 10px 34px -10px rgb(221 178 63 / 0.65);
}
.botao--dourado:hover { color: var(--fundo); box-shadow: 0 0 0 1px rgb(252 225 102 / 0.7), 0 14px 46px -8px rgb(252 225 102 / 0.75); }
.botao--secundario { background: rgb(255 255 255 / 0.02); border-color: var(--borda-forte); color: var(--texto); }
.botao--secundario:hover { border-color: var(--dourado); color: var(--dourado-claro); }
.botao--topo { min-height: 46px; padding: 10px 18px; font-size: 15px; }
.botao[aria-disabled='true'], .botao:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }

/* Estrutura */
.pagina { max-width: 1240px; margin: 0 auto; padding: 32px 16px 48px; }

.abertura { margin-bottom: 28px; }

.abertura h1 {
  font-size: clamp(30px, 8vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.abertura em { color: var(--dourado-claro); font-style: normal; }
.abertura p { margin-top: 14px; color: var(--texto-2); font-size: 17px; line-height: 1.6; }

.colunas { display: grid; gap: 28px; }
.formulario { display: grid; gap: 16px; align-content: start; min-width: 0; }
.resultado { display: grid; gap: 16px; align-content: start; min-width: 0; }

.card {
  min-width: 0;
  padding: 20px 16px;
  background: var(--card);
  border: 1px solid var(--borda);
  border-radius: 14px;
}

.passo {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 21px;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.card > .passo { margin-bottom: 18px; }

.passo__numero {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--dourado);
  border-radius: 50%;
  color: var(--dourado);
  font: 600 15px/1 var(--corpo);
  letter-spacing: 0;
}

/* Campos */
.campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; align-items: start; }
.campo { min-width: 0; }
.campo--largo { grid-column: 1 / -1; }

.campo label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 500; line-height: 1.3; }

.campo input {
  width: 100%;
  min-height: 48px;
  padding: 10px 12px;
  background: var(--fundo);
  border: 1px solid var(--borda-forte);
  border-radius: 10px;
  color: var(--texto);
  font: 500 16px/1.25 var(--corpo);
}

.campo input:focus { border-color: var(--dourado); outline: 1px solid var(--dourado); outline-offset: 0; }
.campo input[aria-invalid='true'] { border-color: var(--erro); }

.campo__unidade { position: relative; }
.campo__unidade input { padding-right: 62px; }

.campo__unidade span {
  position: absolute;
  top: 50%;
  right: 12px;
  color: var(--texto-3);
  font-size: 14px;
  pointer-events: none;
  transform: translateY(-50%);
}

.campo__ajuda { margin-top: 6px; color: var(--texto-3); font-size: 12.5px; line-height: 1.35; }
.campo__erro { margin-top: 6px; color: var(--erro); font-size: 13px; font-weight: 500; line-height: 1.35; }
.campo__erro[hidden] { display: none; }

/* Seletor */
.seletor { min-width: 0; margin: 20px 0 0; padding: 0; border: 0; }
.seletor legend { padding: 0; margin-bottom: 8px; font-size: 14px; font-weight: 500; }

.seletor__opcoes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  background: var(--fundo);
  border: 1px solid var(--borda-forte);
  border-radius: 12px;
}

.seletor__opcao { position: relative; cursor: pointer; }
.seletor__opcao input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }

.seletor__opcao span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 6px 8px;
  border-radius: 9px;
  color: var(--texto-2);
  font-size: 14px;
  font-weight: 600;
  text-align: center;
}

.seletor__opcao input:checked + span { background: var(--dourado); color: var(--fundo); }
.seletor__opcao input:focus-visible + span { outline: 2px solid var(--dourado-claro); outline-offset: 1px; }

.nota { margin-top: 16px; color: var(--texto-3); font-size: 13px; }

/* Resultado */
.alerta {
  padding: 12px 14px;
  background: rgb(255 180 162 / 0.08);
  border: 1px solid var(--erro);
  border-radius: 10px;
  color: var(--erro);
  font-size: 14px;
  font-weight: 500;
}

.alerta[hidden] { display: none; }
.resultado.desatualizado .card { opacity: 0.5; }

.destaque { display: grid; gap: 16px; border-color: var(--dourado); }

.destaque__rotulo { color: var(--dourado); font-size: 13px; font-weight: 600; letter-spacing: 0.12em; line-height: 1.35; }

.destaque__valor {
  margin: 6px 0;
  color: var(--dourado-claro);
  font-family: var(--titulo);
  font-size: clamp(36px, 10vw, 52px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-variant-numeric: lining-nums;
  overflow-wrap: anywhere;
}

.destaque__sub { color: var(--texto-2); font-size: 14px; }
.destaque__sub strong { color: var(--texto); font-weight: 600; }

.destaque__lateral { padding-top: 14px; border-top: 1px solid var(--borda); color: var(--texto-2); font-size: 14px; }
.destaque__lateral strong { color: var(--dourado-claro); font-weight: 600; white-space: nowrap; }
.destaque__lateral[hidden] { display: none; }

.destaque--financ { border-color: var(--neutro); }
.destaque--financ .destaque__rotulo { color: var(--texto-2); }
.destaque--financ .destaque__valor, .destaque--financ .destaque__lateral strong { color: var(--titulo-cor); }

/* Tabela */
.card--tabela { padding: 8px 12px 12px; }
.tabela { width: 100%; border-collapse: collapse; table-layout: fixed; }

.tabela th, .tabela td { padding: 12px 6px; border-bottom: 1px solid var(--borda); font-size: 14px; text-align: left; vertical-align: top; overflow-wrap: break-word; }
.tabela tbody tr:last-child th, .tabela tbody tr:last-child td { border-bottom: 0; }
.tabela thead th, .tabela thead td { padding-bottom: 8px; font-size: 13px; font-weight: 600; }
.tabela tbody th { color: var(--texto); font-weight: 500; }
.tabela tbody td { font-weight: 600; font-variant-numeric: tabular-nums; }

.tabela small { display: block; margin-top: 3px; color: var(--texto-3); font-size: 12px; font-weight: 400; line-height: 1.35; }
.tabela small[hidden] { display: none; }

.tabela .col-consorcio { color: var(--dourado-claro); }
.tabela thead .col-consorcio { color: var(--dourado); }
.tabela .col-financ { color: var(--neutro); }
.tabela .is-menor { font-size: 12.5px; }

.nota--tabela { margin: 4px 6px 4px; padding-top: 10px; border-top: 1px solid var(--borda); font-size: 12.5px; }
.nota--tabela[hidden] { display: none; }

/* Barras */
.barras__titulo { margin-bottom: 14px; font-size: 16px; letter-spacing: -0.01em; }
.barra + .barra { margin-top: 14px; }
.barra__topo { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 6px; color: var(--texto-2); font-size: 14px; }
.barra__topo strong { color: var(--texto); font-weight: 600; font-variant-numeric: tabular-nums; }
.barra__trilho { height: 14px; background: #2b2b31; border-radius: 99px; overflow: hidden; }
.barra__cheia { height: 100%; min-width: 2px; border-radius: 99px; }
.barra__cheia--consorcio { background: linear-gradient(90deg, var(--dourado), var(--dourado-claro)); }
.barra__cheia--financ { background: var(--barra-neutra); }

/* Ações */
.acoes { display: grid; gap: 10px; }
.aviso { color: var(--texto-3); font-size: 12.5px; line-height: 1.5; }

/* Como calculamos e perguntas frequentes */
.explica, .faq { margin-top: 56px; }
.rotulo { margin-bottom: 10px; color: var(--dourado); font-size: 13px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.explica__titulo { font-size: clamp(26px, 6vw, 36px); line-height: 1.1; letter-spacing: -0.03em; text-wrap: balance; }
.explica__grade { display: grid; gap: 16px; margin-top: 24px; }
.explica h3 { margin-bottom: 12px; font-size: 18px; letter-spacing: -0.01em; }
.explica ul { display: grid; gap: 10px; margin: 0; padding-left: 18px; color: var(--texto-2); font-size: 15px; line-height: 1.55; }
.explica li::marker { color: var(--dourado); }

.faq__grade { display: grid; gap: 0 40px; margin-top: 12px; }
.faq__item { padding: 20px 0; border-bottom: 1px solid var(--borda); }
.faq__pergunta { font-family: var(--corpo); font-size: 17px; font-weight: 600; line-height: 1.35; color: var(--titulo-cor); }
.faq__resposta { margin-top: 8px; color: var(--texto-2); font-size: 15px; line-height: 1.6; }

@media (min-width: 760px) {
  .explica__grade { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .faq__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Rodapé */
.rodape { border-top: 1px solid var(--borda); }

.rodape__conteudo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 20px;
  max-width: 1240px;
  margin: 0 auto;
  padding: 12px 16px;
  color: var(--texto-3);
  font-size: 14px;
}

.rodape a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--dourado-claro);
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}
.rodape a:hover { color: var(--dourado); }
.rodape__site { margin-left: auto; }
.rodape__legal { flex-basis: 100%; margin: 8px 0 12px; color: var(--texto-3); font-size: 12.5px; line-height: 1.6; }
@media (max-width: 619px) { .rodape__site { margin-left: 0; } }

/* Tabela com rótulo em cima, no celular */
@media (max-width: 479px) {
  .tabela thead td { display: none; }
  .tabela thead tr, .tabela tbody tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; }
  .tabela tbody tr { padding: 12px 0; border-bottom: 1px solid var(--borda); }
  .tabela tbody tr:last-child { border-bottom: 0; }
  .tabela th, .tabela td { display: block; padding: 0 4px; border-bottom: 0; }
  .tabela thead th { padding-top: 10px; padding-bottom: 6px; }
  .tabela tbody th { grid-column: 1 / -1; margin-bottom: 8px; }
  .tabela tbody th small { display: inline; margin-left: 0; }
  .tabela tbody th small::before { content: ' · '; }
}

@media (min-width: 620px) {
  .card { padding: 24px; }
  .card--tabela { padding: 10px 16px 14px; }
  .acoes { grid-template-columns: 1fr auto; }
  .tabela thead td, .tabela tbody th { width: 38%; }
  .destaque { grid-template-columns: minmax(0, 1fr) 210px; align-items: center; gap: 20px; }
  .destaque__lateral { padding-top: 0; padding-left: 20px; border-top: 0; border-left: 1px solid var(--borda); }
}

/* Formulário à esquerda, resultado à direita */
@media (min-width: 1000px) {
  .pagina { padding-top: 44px; padding-inline: 24px; }
  .topo__conteudo, .rodape__conteudo { padding-inline: 24px; }
  .abertura { margin-bottom: 36px; }
  .colunas { grid-template-columns: minmax(380px, 5fr) minmax(0, 7fr); gap: 32px; align-items: start; }
}

@media (prefers-reduced-motion: reduce) {
  .botao { transition: none; }
}

/* Seletor "O que você quer comprar?" no topo do passo 1 */
.seletor--topo { margin: 0 0 18px; }

.campo__unidade--curto { max-width: calc(50% - 6px); }

/* Condições do grupo: parâmetros da administradora, fechados por padrão */
.condicoes { margin-top: 20px; border-top: 1px solid var(--borda); }
.condicoes summary {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: 12px;
  min-height: 56px;
  padding: 12px 0;
  cursor: pointer;
  list-style: none;
}
.condicoes summary::-webkit-details-marker { display: none; }
.condicoes summary::after {
  content: '';
  grid-column: 2;
  grid-row: 1 / span 2;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--dourado);
  border-bottom: 2px solid var(--dourado);
  transform: translateY(-3px) rotate(45deg);
  transition: transform 0.2s var(--ease);
}
.condicoes[open] summary::after { transform: translateY(2px) rotate(225deg); }
.condicoes__titulo { font-size: 14px; font-weight: 600; color: var(--texto); }
.condicoes__resumo { margin-top: 2px; font-size: 12.5px; line-height: 1.4; color: var(--texto-3); }
.condicoes__nota { margin-bottom: 14px; font-size: 13px; color: var(--texto-2); }
.condicoes .campos { padding-bottom: 4px; }

/* Destaque: quando o dinheiro chega e aviso de prazos diferentes */
.destaque__tempo { margin-top: 10px; color: var(--texto-2); font-size: 13.5px; line-height: 1.45; }
.destaque__aviso {
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid var(--borda-forte);
  border-radius: 10px;
  color: var(--texto);
  font-size: 13.5px;
  line-height: 1.45;
}
.destaque__aviso[hidden] { display: none; }
.alerta:empty { display: none; }

/* Barra fixa do celular */
.barra-movel {
  position: fixed;
  inset: auto 0 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: rgb(23 23 26 / 0.97);
  border-top: 1px solid var(--borda-forte);
  transition: transform 0.25s var(--ease), visibility 0.25s;
}
.barra-movel.is-escondida { transform: translateY(100%); visibility: hidden; }
.barra-movel__texto { display: grid; min-width: 0; margin: 0; font-size: 12.5px; line-height: 1.3; color: var(--texto-2); }
.barra-movel__texto strong { color: var(--dourado-claro); font-family: var(--titulo); font-size: 20px; font-weight: 800; letter-spacing: -0.02em; }
.barra-movel__link {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--dourado);
  border-radius: 12px;
  color: var(--dourado-claro);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
@media (max-width: 999px) { body { padding-bottom: 76px; } }
@media (min-width: 1000px) { .barra-movel { display: none; } }
@media (prefers-reduced-motion: reduce) { .barra-movel, .condicoes summary::after { transition: none; } }