/* Estilo do formulario proprio da Forte Prime Imoveis.
   Usado por index.html (pagina de entrada), locacao.html (proposta de
   locacao), compra.html (proposta de compra), documentos.html (envio de
   documentos, com uploads), proprietario.html (cadastro do proprietario) e
   obrigado.html (confirmacao).
   Marca aplicada na Fase 6 (2026-09-28): paleta medida no logo e no site
   (docs/marca/README.md), logo em img/ e fonte do site hospedada em fonts/.
   Reforma responsiva de 2026-09-28: barra superior, abertura, cartoes com
   icones, duvidas frequentes, etapa "Antes de comecar" no inicio de cada
   fluxo (o que a pessoa vai precisar e o contato), indicador de etapas em
   circulos e rodape completo. Chips, logo grande, "como funciona" e painel
   lateral foram testados e retirados a pedido do usuario (poluiam a tela). As classes e os IDs que
   js/formulario.js usa (etapa, campo, opcao, progresso-*, resumo, lista-arquivos,
   botao-*, mensagem-envio, envio-progresso-*) continuam os mesmos. */

/* Fonte do site principal (SIL Open Font License), hospedada junto com o
   formulario para nao depender de servidor externo. DM Sans e variavel
   (um arquivo cobre todos os pesos) e vale para texto e titulos: a Playfair
   serifada do site foi testada nos titulos e retirada a pedido do usuario. */
@font-face {
  font-family: "DM Sans";
  src: url("../fonts/dm-sans.woff2") format("woff2");
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Paleta da marca: vermelho #9e1f1f (site e logo), dourado #c3941d, bege
     #c9a26a, texto #1c1c1c. O fundo bege-claro vem do bege do logo. */
  --cor-fundo: #f6f3ee;
  --cor-superficie: #ffffff;
  --cor-texto: #1c1c1c;
  --cor-texto-suave: #5b5550;
  --cor-primaria: #9e1f1f;
  --cor-primaria-escura: #7a1616;
  --cor-primaria-suave: #fbf1f1;
  --cor-sobre-primaria: #ffffff;
  /* Dourado: so em linhas e detalhes. Para texto pequeno use a versao escura,
     que da 5,3:1 sobre branco (o dourado claro da 2,9:1 e nao serve). */
  --cor-destaque: #c3941d;
  --cor-destaque-escura: #8a6712;
  --cor-destaque-suave: #f8f1e0;
  --cor-bege: #c9a26a;
  --cor-borda: #e3dbd0;
  /* Borda de controles (campos, prefixo R$, opcoes). Precisa de contraste de
     pelo menos 3:1 contra --cor-superficie e --cor-fundo (WCAG 2.1, 1.4.11):
     em campos vazios a borda e a unica indicacao da area clicavel. #6f6862
     da 5,2:1 sobre branco e 4,7:1 sobre #f6f3ee. --cor-borda (1,3:1) fica so
     para separadores e contornos decorativos. */
  --cor-borda-campo: #6f6862;
  --cor-foco: #8a6712;
  --cor-erro: #b91c1c;
  --cor-erro-fundo: #fef2f2;
  --cor-sucesso: #166534;
  --cor-sucesso-fundo: #f0fdf4;
  /* Rodape escuro, em tom quente da marca; textos claros com contraste alto. */
  --cor-rodape: #2b2421;
  --cor-rodape-texto: #e8e0d6;
  --cor-rodape-titulo: #e0b95b;
  --cor-rodape-link: #f0d9a1;
  --fonte-texto: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fonte-titulo: var(--fonte-texto);
  --raio: 14px;
  --raio-campo: 10px;
  --sombra: 0 1px 2px rgba(28, 28, 28, 0.05), 0 8px 24px rgba(28, 28, 28, 0.07);
  --sombra-alta: 0 2px 4px rgba(28, 28, 28, 0.06), 0 16px 32px rgba(28, 28, 28, 0.12);
  --largura-maxima: 1120px;
  --espaco: clamp(1rem, 4vw, 2rem);
  --transicao: 160ms ease;
}

/* ---------- Base ---------- */

* {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--fonte-texto);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--cor-texto);
  background: var(--cor-fundo);
}

/* O atributo hidden precisa vencer qualquer display definido por classe. */
[hidden] {
  display: none !important;
}

a {
  color: var(--cor-primaria);
}

a:hover {
  color: var(--cor-primaria-escura);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--cor-foco);
  outline-offset: 3px;
}

img,
svg {
  max-width: 100%;
  height: auto;
}

.pular-conteudo {
  position: absolute;
  left: -999px;
  top: 0.5rem;
  z-index: 10;
  padding: 0.5rem 1rem;
  background: var(--cor-primaria);
  color: var(--cor-sobre-primaria);
  border-radius: 8px;
}

.pular-conteudo:focus {
  left: var(--espaco);
}

.oculto-visual {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.conteudo {
  width: 100%;
  max-width: var(--largura-maxima);
  margin: 0 auto;
  padding: 0 var(--espaco);
}

/* ---------- Cabecalho: barra superior e abertura ---------- */

.cabecalho {
  background: var(--cor-superficie);
  border-bottom: 3px solid var(--cor-primaria);
}

.topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--cor-borda);
}

/* Marca: logo mais o nome, como link para a pagina inicial nos fluxos e como
   texto simples na propria pagina inicial. */
.marca {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
  min-width: 0;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.25;
  color: var(--cor-primaria);
  text-decoration: none;
}

.marca img {
  width: 52px;
  height: 52px;
  flex: none;
}

a.marca:hover span {
  text-decoration: underline;
}

.topo-links {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  font-size: 0.9375rem;
  font-weight: 600;
}

.topo-links a {
  text-decoration: none;
  white-space: nowrap;
}

.topo-links a:hover {
  text-decoration: underline;
}

.topo-site {
  display: none;
}

/* Em telas muito estreitas o nome ao lado do logo fica so para leitores de
   tela (o logo e o telefone bastam); volta a aparecer a partir de 480 px. */
@media (max-width: 479px) {
  .marca span {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }

  .marca img {
    width: 48px;
    height: 48px;
  }
}

.topo-telefone {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 40px;
  padding: 0.375rem 0.875rem;
  color: var(--cor-primaria);
  background: var(--cor-primaria-suave);
  border-radius: 999px;
}

.cabecalho-conteudo {
  padding-top: 1.5rem;
  padding-bottom: 1.75rem;
}

.sobretitulo {
  margin: 0 0 0.5rem;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cor-destaque-escura);
}

h1 {
  margin: 0 0 0.75rem;
  font-family: var(--fonte-titulo);
  font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.15;
  color: var(--cor-primaria);
}

.introducao {
  margin: 0;
  max-width: 62ch;
  font-size: 1.0625rem;
  color: var(--cor-texto-suave);
}

/* Abertura da pagina inicial: fundo em degrade suave e filete dourado. */

/* Cabecalho dos fluxos */
.navegacao-topo {
  margin: 1rem 0 0;
  font-size: 0.9375rem;
}

.navegacao-topo a {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-weight: 600;
}

.navegacao-topo a::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}

main {
  flex: 1;
  padding: 1.75rem 0 2.5rem;
}

/* ---------- Pagina inicial: secoes ---------- */

.secao {
  margin: 0 0 2.5rem;
}

.secao:last-child {
  margin-bottom: 0;
}

.secao-titulo {
  margin: 0 0 1.25rem;
  font-size: clamp(1.375rem, 1.1rem + 1.2vw, 1.75rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--cor-texto);
}

.cartoes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

.cartao {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.5rem;
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-top: 4px solid var(--cor-destaque);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  transition: transform var(--transicao), box-shadow var(--transicao);
}

.cartao:hover {
  transform: translateY(-2px);
  box-shadow: var(--sombra-alta);
}

.cartao-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  color: var(--cor-primaria);
  background: var(--cor-primaria-suave);
  border-radius: 12px;
}

.cartao-icone svg {
  width: 1.5rem;
  height: 1.5rem;
}

.cartao h3 {
  margin: 0;
  font-family: var(--fonte-titulo);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--cor-primaria);
}

.cartao p {
  margin: 0;
  flex: 1;
  color: var(--cor-texto-suave);
}

.cartao-meta {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--cor-destaque-escura);
}

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  align-self: flex-start;
  min-height: 46px;
  padding: 0.75rem 1.5rem;
  background: var(--cor-primaria);
  color: var(--cor-sobre-primaria);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  text-align: center;
  border-radius: var(--raio-campo);
  border: 2px solid transparent;
  cursor: pointer;
  transition: background var(--transicao), box-shadow var(--transicao), transform var(--transicao);
}

.botao:hover {
  background: var(--cor-primaria-escura);
  color: var(--cor-sobre-primaria);
  box-shadow: 0 6px 16px rgba(158, 31, 31, 0.25);
}

.botao:active {
  transform: translateY(1px);
}

/* Seta desenhada em CSS nos botoes de avancar (sem simbolos de texto). */
.botao-seta::after {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid currentColor;
  border-top: 2px solid currentColor;
  transform: rotate(45deg);
}

.perguntas {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.perguntas details {
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-campo);
}

.perguntas summary {
  position: relative;
  padding: 1rem 3rem 1rem 1.25rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.perguntas summary::-webkit-details-marker {
  display: none;
}

.perguntas summary::after {
  content: "";
  position: absolute;
  right: 1.25rem;
  top: 1.2rem;
  width: 0.625rem;
  height: 0.625rem;
  border-right: 2px solid var(--cor-primaria);
  border-bottom: 2px solid var(--cor-primaria);
  transform: rotate(45deg);
  transition: transform var(--transicao);
}

.perguntas details[open] summary::after {
  transform: rotate(-135deg);
  top: 1.5rem;
}

.perguntas details[open] summary {
  border-bottom: 1px solid var(--cor-borda);
}

.perguntas p {
  margin: 0;
  padding: 1rem 1.25rem;
  color: var(--cor-texto-suave);
}

/* ---------- Rodape ---------- */

.rodape {
  padding: 2rem 0 1.25rem;
  background: var(--cor-rodape);
  color: var(--cor-rodape-texto);
  border-top: 4px solid var(--cor-destaque);
  font-size: 0.9375rem;
}

.rodape a {
  color: var(--cor-rodape-link);
}

.rodape a:hover {
  color: var(--cor-superficie);
}

.rodape a:focus-visible {
  outline-color: var(--cor-rodape-link);
}

.rodape-colunas {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
}

.rodape-marca {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.rodape-marca img {
  width: 64px;
  height: 64px;
  flex: none;
  padding: 0.375rem;
  background: var(--cor-superficie);
  border-radius: 12px;
}

.rodape p {
  margin: 0 0 0.5rem;
}

.rodape p:last-child {
  margin-bottom: 0;
}

.rodape-titulo {
  margin: 0 0 0.75rem;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cor-rodape-titulo);
}

.rodape-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.rodape-base {
  margin-top: 1.75rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(232, 224, 214, 0.2);
  font-size: 0.8125rem;
  color: rgba(232, 224, 214, 0.75);
}

/* ---------- Barra de progresso e etapas ---------- */

.progresso {
  margin: 0 0 1.25rem;
  padding: 1rem 1.25rem;
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
}

.progresso-texto {
  margin: 0 0 0.625rem;
  font-weight: 700;
}

.progresso-trilha {
  height: 8px;
  background: var(--cor-borda);
  border-radius: 999px;
  overflow: hidden;
}

.progresso-barra {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--cor-primaria), var(--cor-destaque));
  border-radius: 999px;
  transition: width 240ms ease;
}

/* Lista das etapas em circulos numerados com linha entre eles; aparece so
   em telas medias e grandes (no celular ficam o texto e a barra). */
.progresso-lista {
  display: none;
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  /* Uma coluna por etapa, qualquer que seja a quantidade (4 na locacao e na
     compra, 5 nos documentos e no proprietario). */
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 0.25rem;
  font-size: 0.8125rem;
  color: var(--cor-texto-suave);
  counter-reset: etapa;
}

.progresso-lista li {
  position: relative;
  padding: 2.5rem 0.25rem 0;
  text-align: center;
  counter-increment: etapa;
}

.progresso-lista li::before {
  content: counter(etapa);
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.875rem;
  height: 1.875rem;
  font-weight: 700;
  color: var(--cor-borda-campo);
  background: var(--cor-superficie);
  border: 2px solid var(--cor-borda-campo);
  border-radius: 50%;
  transform: translateX(-50%);
}

.progresso-lista li::after {
  content: "";
  position: absolute;
  top: calc(0.9375rem - 1px);
  left: calc(50% + 0.9375rem);
  right: calc(-50% + 0.9375rem);
  height: 2px;
  background: var(--cor-borda);
}

.progresso-lista li:last-child::after {
  display: none;
}

.progresso-lista li.concluida {
  color: var(--cor-texto);
}

.progresso-lista li.concluida::before {
  color: var(--cor-sobre-primaria);
  background: var(--cor-primaria);
  border-color: var(--cor-primaria);
}

.progresso-lista li.concluida::after {
  background: var(--cor-primaria);
}

.progresso-lista li[aria-current="step"] {
  color: var(--cor-primaria);
  font-weight: 700;
}

.progresso-lista li[aria-current="step"]::before {
  color: var(--cor-primaria);
  border-color: var(--cor-primaria);
  box-shadow: 0 0 0 4px rgba(158, 31, 31, 0.15);
}

/* ---------- Formulario em etapas ---------- */

.formulario {
  padding: 1.25rem;
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
}

.legenda-obrigatorio {
  margin: 0 0 1.25rem;
  font-size: 0.875rem;
  color: var(--cor-texto-suave);
}

.obrigatorio {
  color: var(--cor-erro);
  font-weight: 700;
}

.etapa h2 {
  margin: 0 0 0.25rem;
  font-family: var(--fonte-titulo);
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--cor-primaria);
}

.etapa h2:focus {
  outline: none;
}

.etapa h3 {
  margin: 1.25rem 0 0.75rem;
  padding-bottom: 0.375rem;
  font-size: 1.0625rem;
  border-bottom: 1px solid var(--cor-borda);
}

/* Na etapa "Antes de comecar" nao ha campos: a legenda dos obrigatorios so
   aparece a partir da etapa seguinte (navegadores sem :has() mostram sempre). */
.formulario:has(.etapa-preparo:not([hidden])) .legenda-obrigatorio {
  display: none;
}

.lista-preparo {
  margin: 0 0 1.75rem;
  padding-left: 1.25rem;
  line-height: 1.55;
}

.lista-preparo li {
  margin-bottom: 0.4rem;
}

.contato-preparo a {
  color: var(--cor-primaria);
  font-weight: 600;
}

.etapa-descricao {
  margin: 0 0 1.5rem;
  color: var(--cor-texto-suave);
}

.campo {
  margin: 0 0 1.25rem;
}

fieldset.campo {
  min-width: 0;
  padding: 0;
  border: 0;
}

/* Rotulos comuns. Exclui .opcao porque os consentimentos da etapa de revisao
   sao label.opcao filhos diretos de .campo e precisam manter o estilo de opcao. */
.campo > label:not(.opcao),
.campo > legend {
  display: block;
  margin: 0 0 0.25rem;
  padding: 0;
  font-weight: 600;
}

.ajuda {
  margin: 0 0 0.375rem;
  font-size: 0.875rem;
  color: var(--cor-texto-suave);
}

.campo input[type="text"],
.campo input[type="tel"],
.campo input[type="email"],
.campo input[type="number"],
.campo input[type="date"],
.campo select,
.campo textarea {
  display: block;
  width: 100%;
  min-height: 46px;
  padding: 0.625rem 0.875rem;
  font: inherit;
  color: var(--cor-texto);
  background: var(--cor-superficie);
  border: 1.5px solid var(--cor-borda-campo);
  border-radius: var(--raio-campo);
  transition: border-color var(--transicao), box-shadow var(--transicao);
}

.campo input::placeholder,
.campo textarea::placeholder {
  color: #6f6862;
}

.campo input:hover,
.campo select:hover,
.campo textarea:hover {
  border-color: var(--cor-texto);
}

.campo input:focus-visible,
.campo select:focus-visible,
.campo textarea:focus-visible {
  outline-offset: 2px;
  border-color: var(--cor-primaria);
}

.campo textarea {
  min-height: 6.5rem;
  resize: vertical;
}

.campo input[readonly] {
  background: var(--cor-fundo);
  color: var(--cor-texto-suave);
}

.campo [aria-invalid="true"] {
  border-color: var(--cor-erro);
  box-shadow: 0 0 0 1px var(--cor-erro);
}

.erro {
  margin: 0.375rem 0 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--cor-erro);
}

.erro:empty {
  display: none;
}

/* Campo de moeda: prefixo "R$" fixo ao lado do valor */
.com-prefixo {
  display: flex;
  align-items: stretch;
}

.prefixo {
  display: flex;
  align-items: center;
  padding: 0 0.875rem;
  font-weight: 600;
  color: var(--cor-texto-suave);
  background: var(--cor-fundo);
  border: 1.5px solid var(--cor-borda-campo);
  border-right: 0;
  border-radius: var(--raio-campo) 0 0 var(--raio-campo);
}

.com-prefixo input[type="text"] {
  border-radius: 0 var(--raio-campo) var(--raio-campo) 0;
}

/* Grupos de opcoes (radio e caixas de consentimento) */
.opcoes {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.opcao {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  min-height: 46px;
  padding: 0.625rem 0.875rem;
  font-weight: 400;
  border: 1.5px solid var(--cor-borda-campo);
  border-radius: var(--raio-campo);
  cursor: pointer;
  transition: background var(--transicao), border-color var(--transicao);
}

.opcao:hover {
  background: var(--cor-fundo);
}

.opcao:has(input:checked) {
  border-color: var(--cor-primaria);
  background: var(--cor-primaria-suave);
}

.opcao input {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0.125rem 0 0;
  accent-color: var(--cor-primaria);
}

.campo.invalido .opcao {
  border-color: var(--cor-erro);
}

.consentimento .opcao {
  line-height: 1.45;
}

/* Bloco condicional (data-condicao): grupo de campos que so aparece quando a
   resposta do gatilho bate (ex.: CPF, RG e nascimento para pessoa fisica).
   O JavaScript controla o atributo hidden; aqui fica so o visual do grupo. */
.bloco-condicional {
  margin: 0 0 1.25rem;
  padding: 1rem 1rem 0;
  background: var(--cor-fundo);
  border: 1px solid var(--cor-borda);
  border-left: 4px solid var(--cor-primaria);
  border-radius: var(--raio-campo);
}

.bloco-condicional .opcao {
  background: var(--cor-superficie);
}

.bloco-condicional .opcao:hover {
  background: var(--cor-fundo);
}

.bloco-condicional .opcao:has(input:checked) {
  background: var(--cor-primaria-suave);
}

/* Bloco dentro de bloco (documentos: fiador > pessoa fisica > vinculo): os
   fundos se alternam para cada nivel continuar visivel. */
.bloco-condicional .bloco-condicional {
  background: var(--cor-superficie);
}

.bloco-condicional .bloco-condicional .bloco-condicional {
  background: var(--cor-fundo);
}

.bloco-condicional > h3:first-child {
  margin-top: 0;
}

/* Etapa sem campos (documentos: etapa do fiador quando a garantia nao e fiador) */
.aviso-informativo {
  margin: 0 0 1.25rem;
  padding: 0.875rem 1rem;
  color: var(--cor-texto);
  background: var(--cor-sucesso-fundo);
  border: 1px solid var(--cor-sucesso);
  border-radius: var(--raio-campo);
}

/* ---------- Uploads ---------- */

/* O campo de arquivo segue o visual dos outros campos; a borda tracejada
   sinaliza a area de anexo. */
.campo input[type="file"] {
  display: block;
  width: 100%;
  min-height: 46px;
  padding: 0.75rem 0.875rem;
  font: inherit;
  color: var(--cor-texto);
  background: var(--cor-superficie);
  border: 2px dashed var(--cor-borda-campo);
  border-radius: var(--raio-campo);
}

.campo input[type="file"]:hover {
  border-color: var(--cor-primaria);
  background: var(--cor-primaria-suave);
}

.campo input[type="file"]::file-selector-button {
  margin-right: 0.75rem;
  padding: 0.5rem 0.875rem;
  font: inherit;
  font-weight: 600;
  color: var(--cor-sobre-primaria);
  background: var(--cor-primaria);
  border: 1px solid var(--cor-primaria);
  border-radius: 8px;
  cursor: pointer;
}

/* "Preparando...": compressao de foto em andamento */
.preparando {
  margin: 0.375rem 0 0;
  font-size: 0.875rem;
  font-style: italic;
  color: var(--cor-texto-suave);
}

/* Lista dos arquivos escolhidos, com botao Remover por arquivo */
.lista-arquivos {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
}

.lista-arquivos li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem 0.875rem;
  font-size: 0.9375rem;
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-left: 3px solid var(--cor-destaque);
  border-radius: 8px;
}

.arquivo-nome {
  min-width: 0;
  overflow-wrap: anywhere;
}

.botao-remover {
  flex-shrink: 0;
  min-height: 36px;
  padding: 0.375rem 0.75rem;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--cor-erro);
  background: transparent;
  border: 1px solid var(--cor-erro);
  border-radius: 6px;
  cursor: pointer;
}

.botao-remover:hover {
  background: var(--cor-erro-fundo);
}

.botao-remover[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Progresso do envio dos arquivos (percentual lido do XMLHttpRequest) */
.envio-progresso {
  margin: 1rem 0 0;
}

.envio-progresso-texto {
  margin: 0 0 0.5rem;
  font-weight: 600;
}

.envio-progresso-trilha {
  height: 10px;
  background: var(--cor-borda);
  border-radius: 999px;
  overflow: hidden;
}

.envio-progresso-barra {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--cor-primaria), var(--cor-destaque));
  border-radius: 999px;
}

/* Duas colunas em telas medias para pares de campos curtos */
.linha-dupla {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 1rem;
}

/* Botoes de navegacao das etapas */
.acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: space-between;
  margin-top: 0.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--cor-borda);
}

.acoes .botao {
  align-self: auto;
  flex: 1 1 auto;
}

.botao-secundario {
  color: var(--cor-primaria);
  background: var(--cor-superficie);
  border-color: var(--cor-primaria);
}

.botao-secundario:hover {
  color: var(--cor-primaria-escura);
  background: var(--cor-primaria-suave);
  box-shadow: none;
}

.botao[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

/* Resumo da revisao */
.resumo-grupo {
  margin: 0 0 1rem;
  padding: 1rem 1.25rem;
  background: var(--cor-fundo);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-campo);
}

.resumo-grupo h3 {
  margin: 0 0 0.75rem;
  padding: 0;
  font-size: 1rem;
  color: var(--cor-primaria);
  border: 0;
}

.resumo {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.25rem 1rem;
  margin: 0;
}

.resumo dt {
  font-size: 0.8125rem;
  color: var(--cor-texto-suave);
}

.resumo dd {
  margin: 0 0 0.5rem;
  font-weight: 500;
  overflow-wrap: anywhere;
  white-space: pre-line;
}

.resumo .vazio {
  font-weight: 400;
  font-style: italic;
  color: var(--cor-texto-suave);
}

/* Mensagem de resultado do envio */
.mensagem-envio {
  margin: 1rem 0 0;
  padding: 0.875rem 1rem;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-campo);
}

.mensagem-envio.erro-envio {
  color: var(--cor-erro);
  background: var(--cor-erro-fundo);
  border-color: var(--cor-erro);
}

/* Campo anti-spam: fora da tela, invisivel para pessoas, presente para robos */
.honeypot {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.aviso-sem-script {
  margin: 0 0 1rem;
  padding: 0.875rem 1rem;
  color: var(--cor-erro);
  background: var(--cor-erro-fundo);
  border: 1px solid var(--cor-erro);
  border-radius: var(--raio-campo);
}

/* ---------- Pagina de confirmacao ---------- */

.confirmacao {
  max-width: 680px;
  padding: 1.75rem;
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-top: 4px solid var(--cor-sucesso);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
}

.confirmacao-icone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  margin: 0 0 1rem;
  background: var(--cor-sucesso-fundo);
  border: 2px solid var(--cor-sucesso);
  border-radius: 50%;
}

/* Marca de "certo" desenhada em CSS */
.confirmacao-icone::before {
  content: "";
  width: 0.75rem;
  height: 1.25rem;
  margin-top: -0.375rem;
  border-right: 3px solid var(--cor-sucesso);
  border-bottom: 3px solid var(--cor-sucesso);
  transform: rotate(45deg);
}

.confirmacao h2 {
  margin: 0 0 0.75rem;
  font-size: 1.375rem;
  color: var(--cor-sucesso);
}

.confirmacao p {
  margin: 0 0 1rem;
}

.confirmacao ol {
  margin: 0 0 1.25rem;
  padding-left: 1.25rem;
  color: var(--cor-texto-suave);
}

.confirmacao li {
  margin: 0 0 0.375rem;
}

.confirmacao .botao {
  margin-top: 0.5rem;
}

/* ---------- Telas medias (a partir de 480 px) ---------- */

@media (min-width: 480px) {
  .marca {
    font-size: 0.8125rem;
  }

  .acoes .botao {
    flex: 0 1 auto;
    min-width: 10rem;
  }
}

/* ---------- Telas medias (a partir de 720 px) ---------- */

/* O link "Site da Forte Prime" so cabe ao lado do nome da marca a partir de
   600 px; abaixo disso o telefone basta. */
@media (min-width: 600px) {
  .topo-site {
    display: inline;
  }
}

@media (min-width: 720px) {
  .cabecalho-conteudo {
    padding-top: 2rem;
    padding-bottom: 2.25rem;
  }

  main {
    padding: 2.25rem 0 3rem;
  }

  .cartoes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
  }

  .rodape-colunas {
    grid-template-columns: 1.4fr 1fr 1.2fr;
    gap: 2.5rem;
  }

  .formulario {
    padding: 2rem;
  }

  .progresso-lista {
    display: grid;
  }

  .linha-dupla {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .resumo {
    grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
    gap: 0.5rem 1.5rem;
  }

  .resumo dt {
    padding-top: 0.125rem;
  }

  .resumo dd {
    margin-bottom: 0;
  }
}

/* ---------- Telas grandes (a partir de 1024 px) ---------- */


/* ---------- Preferencias do usuario ---------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }

  .cartao:hover {
    transform: none;
  }
}

@media print {
  .topo-links,
  .navegacao-topo,
  .acoes,
  .pular-conteudo {
    display: none !important;
  }

  body {
    background: #fff;
  }

  .rodape,
  .rodape a,
  .rodape-titulo,
  .rodape-base {
    background: #fff !important;
    color: #000 !important;
    border-color: #000 !important;
  }

  .formulario,
  .cartao,
  .confirmacao {
    box-shadow: none;
  }
}