/* --------------------------------------------------------------------------
   CarOffice, home, capítulo 12: Fale com a equipe.

   Porte de sec-contato.css do molde. É o único capítulo que não é nem
   escuro nem papel: depois de onze capítulos alternando, a home fecha no
   azul claro de --acento-capa. .em-papel já reescreveu os tokens para o modo
   claro (--texto vira tinta, --acento vira --acento-tinta); aqui só se troca
   a superfície e a moldura do formulário.

   O formulário em si (campos, erro, confirmação) é estilizado por
   css/site/pag-contato.css, escopado em [data-contato]: o mesmo bloco serve a
   /contato. Esta folha só cuida da grade, da coluna da promessa e de dois
   tokens locais que deixam o contorno do campo legível sobre o azul.
   Cores só por token.
   -------------------------------------------------------------------------- */
.secao-contato {
  background: var(--acento-capa);
  background-image: radial-gradient(
    86% 58% at 10% 34%,
    color-mix(in srgb, var(--papel-3) 40%, transparent),
    transparent 60%
  );
  /* clip, e não hidden: hidden cria área de rolagem e as linhas de tempo
     de view() daqui para dentro passariam a medir esta caixa. */
  overflow: hidden;
  overflow: clip;
}

.contato-grade {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  gap: var(--esp-grid);
  align-items: start;
}

/* --- Coluna da promessa -------------------------------------------------- */

/* --tenue sobre --acento-capa fica abaixo de 4,5:1: o sobretítulo vai para o
   acento de tinta, legível sobre claro. */
.contato-chamada .sobretitulo {
  color: var(--acento-tinta);
}

.contato-chamada h2 {
  margin-top: var(--e4);
}

.contato-garantias {
  margin-top: var(--e6);
}

.contato-garantias > li {
  font-size: var(--c2);
}

.contato-canais {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e3) var(--e7);
  margin-top: var(--esp-bloco);
}

.contato-canais .link-seta {
  min-height: 44px;
  color: var(--acento-tinta);
  border-bottom-color: var(--acento-linha);
}

.contato-canais .link-seta .icone {
  width: 18px;
  height: 18px;
}

.contato-canais .link-seta:hover {
  color: var(--texto);
  border-bottom-color: var(--texto);
}

.contato-nota {
  max-width: 52ch;
  margin-top: var(--e5);
  color: var(--suave);
}

/* --- Moldura do formulário ------------------------------------------------
   Três superfícies em escada, do fundo para a frente: azul da seção, papel
   do cartão, branco do campo. O campo continua sendo o primitivo .campo;
   o que muda aqui são dois tokens locais:

   --borda-forte   a borda clara padrão fica perto de 1,6:1 contra o papel,
                   abaixo dos 3:1 de contorno de controle; --tinta-tenue
                   desenha o campo de verdade.
   --acento-vidro  o anel de foco sobre claro nasce fraco demais e some
                   contra o branco; aqui ele sobe para ficar visível.
   -------------------------------------------------------------------------- */
.contato-forma {
  --borda-forte: var(--tinta-tenue);
  --acento-vidro: color-mix(in srgb, var(--acento-tinta) 18%, transparent);
  min-width: 0;
}

.contato-forma [data-contato] {
  border-color: var(--borda-clara-forte);
  background: var(--papel);
  box-shadow: var(--sombra-3);
}

@media (max-width: 980px) {
  .contato-grade {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--esp-bloco);
  }

  /* Uma coluna só: o cartão não estica até a borda do monitor, guarda a
     mesma medida de leitura das outras colunas do site. */
  .contato-forma {
    max-width: 64ch;
  }
}

@media (max-width: 680px) {
  .contato-garantias > li {
    font-size: var(--c3);
  }

  .contato-chamada h2 {
    letter-spacing: var(--tk1);
  }
}