/* ==========================================================================
   COMPONENTES — botões, cartões, cabeçalhos de seção, formulários e afins
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Botões
   -------------------------------------------------------------------------- */

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 26px;
  font-size: var(--t-rotulo);
  font-weight: var(--peso-medio);
  letter-spacing: 0.01em;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: background-color var(--rapida), color var(--rapida),
    border-color var(--rapida), transform var(--rapida);
}

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

.botao__seta {
  transition: transform var(--rapida);
}

.botao:hover .botao__seta {
  transform: translateX(4px);
}

/* Principal — preto sólido */
.botao--principal {
  background: var(--tinta);
  color: var(--branco);
  border-color: var(--tinta);
}

.botao--principal:hover {
  background: var(--ouro-tinta);
  border-color: var(--ouro-tinta);
  color: var(--branco);
}

/* Dourado — usado no WhatsApp e nos envios */
.botao--ouro {
  background: var(--ouro);
  color: var(--tinta);
  border-color: var(--ouro);
}

.botao--ouro:hover {
  background: var(--ouro-claro);
  border-color: var(--ouro-claro);
}

/* Contornado */
.botao--contorno {
  border-color: var(--linha);
  color: var(--tinta);
}

.botao--contorno:hover {
  border-color: var(--tinta);
  background: var(--tinta);
  color: var(--branco);
}

.secao--escura .botao--contorno,
.rodape .botao--contorno,
.hero .botao--contorno,
.cabecalho--escuro .botao--contorno {
  border-color: var(--ouro-borda);
  color: var(--sobre-escuro);
}

.secao--escura .botao--contorno:hover,
.rodape .botao--contorno:hover,
.hero .botao--contorno:hover,
.cabecalho--escuro .botao--contorno:hover {
  background: var(--sobre-escuro);
  border-color: var(--sobre-escuro);
  color: var(--tinta);
}

/* Sobre fundo escuro, o botão principal (preto) sumiria: vira o dourado
   cheio, que é o acento da identidade. */
.hero .botao--principal,
.cabecalho--escuro .botao--principal {
  background: var(--ouro);
  border-color: var(--ouro);
  color: var(--tinta);
}

.hero .botao--principal:hover,
.cabecalho--escuro .botao--principal:hover {
  background: var(--ouro-claro);
  border-color: var(--ouro-claro);
  color: var(--tinta);
}

.botao--pequeno {
  padding: 9px 18px;
  font-size: var(--t-mini);
}

.botao--bloco {
  width: 100%;
}

/* Link com seta — o "ver mais" da referência */
.link-seta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 4px;
  font-size: var(--t-rotulo);
  font-weight: var(--peso-medio);
  color: var(--ouro-tinta);
  border-bottom: 1px solid var(--ouro-borda);
  transition: color var(--rapida), border-color var(--rapida), gap var(--rapida);
}

.link-seta:hover {
  color: var(--tinta);
  border-bottom-color: var(--tinta);
  gap: 14px;
}

.secao--escura .link-seta,
.rodape .link-seta {
  color: var(--ouro-claro);
}

.secao--escura .link-seta:hover,
.rodape .link-seta:hover {
  color: var(--branco);
  border-bottom-color: var(--branco);
}

/* --------------------------------------------------------------------------
   2. Cabeçalho de seção
   -------------------------------------------------------------------------- */

.cabecalho-secao {
  display: flex;
  flex-direction: column;
  gap: var(--gap-menor);
  margin-bottom: var(--gap-bloco);
}

.cabecalho-secao__titulo {
  max-width: 22ch;
  font-size: var(--t-h2);
}

.cabecalho-secao__texto {
  max-width: 62ch;
  font-size: var(--t-corpo-g);
  line-height: 1.7;
  color: var(--tinta-suave);
}

.secao--escura .cabecalho-secao__texto {
  color: var(--sobre-escuro-suave);
}

/* Variante com apoio à direita */
@media (min-width: 900px) {
  .cabecalho-secao--duplo {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: var(--gap-bloco);
  }
  .cabecalho-secao--duplo .rotulo {
    grid-column: 1 / -1;
  }
}

/* --------------------------------------------------------------------------
   3. Cartões
   -------------------------------------------------------------------------- */

.carta {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--gap-menor);
  height: 100%;
  padding: var(--gap-item);
  background: var(--branco);
  border: 1px solid var(--linha);
  transition: border-color var(--media), box-shadow var(--media), transform var(--media);
}

/* Fio dourado no topo do cartão: fica discreto em repouso e assume no hover. */
.carta::before {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  height: 3px;
  background: var(--ouro);
  opacity: 0.35;
  transition: opacity var(--media);
}

.carta:hover {
  border-color: var(--ouro-borda);
  box-shadow: 0 10px 28px rgba(17, 17, 17, 0.07);
  transform: translateY(-3px);
}

.carta:hover::before {
  opacity: 1;
}

.carta__indice {
  font-size: var(--t-mini);
  font-weight: var(--peso-medio);
  letter-spacing: 0.1em;
  color: var(--ouro-tinta);
}

.carta__titulo {
  font-size: var(--t-h3);
  transition: color var(--rapida);
}

.carta:hover .carta__titulo {
  color: var(--ouro-tinta);
}

.carta__texto {
  font-size: var(--t-rotulo);
  line-height: 1.65;
  color: var(--tinta-suave);
}

.carta__rodape {
  margin-top: auto;
  padding-top: var(--gap-menor);
}

/* --------------------------------------------------------------------------
   4. Placa — substitui as fotos ainda não fornecidas
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Tira de imagem entre seções

   Faixa larga e baixa, usada como respiro entre blocos de texto. Dá ar à
   página sem tomar a altura de uma seção inteira.
   -------------------------------------------------------------------------- */

.tira {
  position: relative;
  overflow: hidden;
  background: var(--escuro);
}

.tira img {
  width: 100%;
  height: clamp(140px, 20vw, 260px);
  object-fit: cover;
}

/* Fio dourado nas duas bordas, para a tira ler como peça da identidade e
   não como uma foto solta no meio da página. */
.tira::before,
.tira::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--ouro);
  z-index: 1;
}

.tira::before {
  top: 0;
}

.tira::after {
  bottom: 0;
}

.placa {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  min-height: 180px;
  overflow: hidden;
  background-color: var(--papel-fundo);
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(17, 17, 17, 0.035) 0 1px,
    transparent 1px 13px
  );
}

.placa::after {
  content: '';
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(201, 162, 39, 0.35);
  pointer-events: none;
}

.placa__marca {
  font-size: clamp(1.75rem, 3.4vw, 2.75rem);
  font-weight: var(--peso-medio);
  letter-spacing: 0.04em;
  color: var(--ouro-tinta);
  opacity: 0.55;
}

.placa img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Variante escura */
.placa--escura {
  background-color: var(--escuro-carta);
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(201, 162, 39, 0.07) 0 1px,
    transparent 1px 13px
  );
}

.placa--escura .placa__marca {
  color: var(--ouro);
}

/* --------------------------------------------------------------------------
   5. Números / estatísticas
   -------------------------------------------------------------------------- */

.numeros {
  display: grid;
  gap: var(--gap-item);
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 900px) {
  .numeros {
    grid-template-columns: repeat(4, 1fr);
  }
}

.numero {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: var(--gap-menor);
  border-top: 2px solid var(--ouro);
}

/* Os números são um dos pontos de dourado da página: sendo grandes
   (acima de 24px), o critério de contraste cai para 3:1 e o
   `--ouro-tinta` (6:1 sobre branco) passa com folga. */
.numero__valor {
  display: flex;
  align-items: baseline;
  font-size: clamp(2.25rem, 4vw, 3.25rem);
  font-weight: var(--peso-medio);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ouro-tinta);
}

.secao--escura .numero__valor {
  color: var(--ouro-claro);
}

.numero__valor sup {
  font-size: 0.4em;
  color: var(--ouro-tinta);
  margin-left: 3px;
}

.secao--escura .numero__valor sup {
  color: var(--ouro-claro);
}

.numero__rotulo {
  font-size: var(--t-rotulo);
  line-height: 1.5;
  color: var(--tinta-suave);
}

.secao--escura .numero__rotulo {
  color: var(--sobre-escuro-suave);
}

/* --------------------------------------------------------------------------
   6. Acordeão
   -------------------------------------------------------------------------- */

.acordeao {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--linha);
}

.acordeao__item {
  border-bottom: 1px solid var(--linha);
}

.acordeao__gatilho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-item);
  width: 100%;
  padding: 22px 0;
  text-align: left;
  font-size: var(--t-h3);
  font-weight: var(--peso-medio);
  color: var(--tinta);
  transition: color var(--rapida);
}

.acordeao__item:hover .acordeao__gatilho,
.acordeao__item.aberto .acordeao__gatilho {
  color: var(--ouro-tinta);
}

.acordeao__sinal {
  position: relative;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.acordeao__sinal::before,
.acordeao__sinal::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  background: currentColor;
  transform: translate(-50%, -50%);
  transition: transform var(--media), opacity var(--rapida);
}

.acordeao__sinal::before {
  width: 16px;
  height: 1.5px;
}

.acordeao__sinal::after {
  width: 1.5px;
  height: 16px;
}

.acordeao__item.aberto .acordeao__sinal::after {
  opacity: 0;
}

.acordeao__painel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--media);
}

.acordeao__item.aberto .acordeao__painel {
  grid-template-rows: 1fr;
}

.acordeao__conteudo {
  overflow: hidden;
}

.acordeao__conteudo p {
  max-width: 68ch;
  padding-bottom: 22px;
  font-size: var(--t-corpo);
  line-height: 1.7;
  color: var(--tinta-suave);
}

/* --------------------------------------------------------------------------
   7. Etiquetas
   -------------------------------------------------------------------------- */

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tags li,
.tag {
  padding: 5px 11px;
  background: var(--papel);
  border: 1px solid var(--linha);
  font-size: var(--t-mini);
  color: var(--tinta-suave);
}

/* --------------------------------------------------------------------------
   8. Formulários
   -------------------------------------------------------------------------- */

.formulario {
  display: flex;
  flex-direction: column;
  gap: var(--gap-item);
}

.formulario__linha {
  display: grid;
  gap: var(--gap-item);
}

@media (min-width: 700px) {
  .formulario__linha--duplo {
    grid-template-columns: 1fr 1fr;
  }
}

.campo {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.campo__rotulo {
  font-size: var(--t-mini);
  font-weight: var(--peso-medio);
  color: var(--tinta-suave);
}

.campo__entrada,
.campo__area,
.campo__selecao {
  width: 100%;
  padding: 13px 14px;
  background: var(--branco);
  border: 1px solid var(--linha);
  color: var(--tinta);
  font-size: var(--t-corpo);
  transition: border-color var(--rapida), box-shadow var(--rapida);
}

.campo__area {
  min-height: 140px;
  resize: vertical;
  line-height: 1.6;
}

.campo__selecao {
  appearance: none;
  cursor: pointer;
  padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%23111' stroke-width='1.3' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

.campo__entrada::placeholder,
.campo__area::placeholder {
  color: var(--tinta-tenue);
}

.campo__entrada:focus,
.campo__area:focus,
.campo__selecao:focus {
  border-color: var(--ouro-tinta);
  box-shadow: 0 0 0 3px var(--ouro-veu);
}

.campo__erro {
  font-size: var(--t-mini);
  color: #b3261e;
  min-height: 1em;
}

.campo.invalido .campo__entrada,
.campo.invalido .campo__area,
.campo.invalido .campo__selecao {
  border-color: #b3261e;
}

.campo__dica {
  font-size: var(--t-mini);
  color: var(--tinta-tenue);
}

.campo__opcional {
  font-weight: var(--peso-normal);
  text-transform: none;
  letter-spacing: 0;
  color: var(--tinta-tenue);
}

/* Aceite da LGPD: caixa de marcação ao lado de um texto de duas linhas.
   O `align-items: start` mantém a caixa alinhada com a PRIMEIRA linha —
   centralizada, ela flutuaria no meio do parágrafo. */
.campo__aceite {
  display: flex;
  align-items: start;
  gap: 12px;
  font-size: var(--t-rotulo);
  line-height: 1.55;
  color: var(--tinta-suave);
  cursor: pointer;
}

.campo__aceite input {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--ouro-tinta);
  cursor: pointer;
}

.campo--aceite {
  padding: var(--gap-menor);
  background: var(--papel);
  border: 1px solid var(--linha);
}

.campo--aceite.invalido {
  border-color: #b3261e;
}

.campo-isca {
  position: absolute;
  left: -9999px;
  opacity: 0;
  pointer-events: none;
}

.aviso {
  display: none;
  padding: 13px 16px;
  border-left: 3px solid var(--ouro);
  background: var(--ouro-veu);
  font-size: var(--t-rotulo);
  color: var(--tinta);
}

.aviso.visivel {
  display: block;
}

.aviso--erro {
  border-left-color: #b3261e;
  background: rgba(179, 38, 30, 0.07);
}

/* --------------------------------------------------------------------------
   9. Flutuante do WhatsApp
   -------------------------------------------------------------------------- */

.whatsapp-flutuante {
  position: fixed;
  right: clamp(16px, 2.5vw, 28px);
  bottom: clamp(16px, 2.5vw, 28px);
  z-index: var(--z-flutuante);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px;
  background: var(--ouro);
  color: var(--tinta);
  border-radius: 999px;
  box-shadow: 0 8px 26px rgba(17, 17, 17, 0.22);
  transition: transform var(--media), background-color var(--rapida);
}

.whatsapp-flutuante:hover {
  transform: translateY(-3px);
  background: var(--ouro-claro);
}

.whatsapp-flutuante svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.whatsapp-flutuante__texto {
  display: none;
  padding-right: 6px;
  font-size: var(--t-mini);
  font-weight: var(--peso-medio);
}

@media (min-width: 760px) {
  .whatsapp-flutuante__texto {
    display: block;
  }
}

/* --------------------------------------------------------------------------
   10. Estados de carregamento
   -------------------------------------------------------------------------- */

.esqueleto {
  position: relative;
  overflow: hidden;
  min-height: 280px;
  background: var(--papel);
  border: 1px solid var(--linha);
}

.esqueleto::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(17, 17, 17, 0.045), transparent);
  animation: brilho 1.5s infinite;
}

@keyframes brilho {
  to {
    transform: translateX(100%);
  }
}

.estado-vazio {
  grid-column: 1 / -1;
  padding: var(--gap-secao) var(--gap-item);
  text-align: center;
  background: var(--papel);
  border: 1px solid var(--linha);
}

.estado-vazio h3 {
  margin-bottom: var(--gap-fino);
}

.estado-vazio p {
  color: var(--tinta-suave);
}