/* --------------------------------------------------------------------------
   Secao 12: Fale com a equipe (o capitulo verde, fecho da home)

   E o unico capitulo da pagina que nao e nem preto nem papel: depois de onze
   capitulos alternando, a home abre no verde. .em-papel ja reescreveu os
   tokens para o modo claro (--texto vira tinta, --sup-2 vira branco, --verde
   vira --verde-tinta); aqui so se troca a superficie e se cuida da divisa de
   baixo, que e a unica da pagina que o sistema automatico nao alcanca.
   -------------------------------------------------------------------------- */
/* O unico clarao da secao: uma bruma de papel sobre a METADE ESQUERDA, atras
   do titulo. Levanta o verde chapado sem chegar perto das duas bordas. Nao e
   divisa, nao encosta na juncao com o vizinho, e deixa a metade direita no
   verde saturado, que e o que faz o cartao branco do formulario destacar. */
.secao-contato {
  /* --verde-capa, nao --verde-claro: esta secao tambem carrega .em-papel, que
     reescreveria o menta para o verde de tinta no proprio elemento. Ver a nota
     do token em css/tokens.css. */
  background: var(--verde-capa);
  background-image: radial-gradient(
    86% 58% at 10% 34%,
    color-mix(in srgb, var(--papel-3) 40%, transparent),
    transparent 60%
  );
  /* clip, e nao hidden: `hidden` cria scrollport e as timelines de view()
     daqui para dentro passam a medir esta caixa, que nunca rola, e o
     movimento congela. Nota longa em css/sec-conexoes.css. */
  overflow: hidden;
  overflow: clip;
}

/* A divisa contra o RODAPE mora no RODAPE, nao aqui.
   O rodape esta fora de <main> e portanto fora do alcance do `+` que deduz
   todas as outras divisas da pagina (css/site.css, secao 05). Mas isso e
   razao para a regra alcanca-lo, nao para inventar outro idioma.

   Aqui houve um `::after` com linear-gradient(transparent, --base-pagina) e
   var(--esp-secao) de altura, defendido como "a unica excecao legitima"
   porque o percurso entre o verde e o escuro passaria pelo verde. MEDIDO, NAO
   PASSA: o fundo desta secao e rgb(198,255,178) e o alvo e rgb(7,14,11);
   `transparent -> preto` sobre verde claro escurece por OLIVA, que e o mesmo
   cinza medio sujo que a regra geral proibe. Sao 110px dele, logo abaixo de
   uma faixa de verde vazio. Era o borrao que se via no fim da home.

   Agora a passagem e a do resto do site: sombra no lado ESCURO, desenhada
   pelo `.rodape` no proprio topo (css/rodape.css). Sombra preta sobre
   superficie escura nunca sai do escuro. E por isso que a regra e essa.

   A divisa de CIMA tambem nao mora aqui: #duvidas e irmao desta secao, entao
   o sistema automatico ja desenha a sombra do lado escuro. */

.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 -------------------------------------------------- */

/* --tinta-tenue sobre --verde-claro fica em 3,4:1. Nenhum texto desta secao
   usa --tenue: o sobretitulo vai para o verde legivel sobre claro. */
.contato-chamada .sobretitulo {
  color: var(--verde-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(--e5) var(--e7);
  margin-top: var(--esp-bloco);
}

.contato-canais .link-seta {
  color: var(--verde-tinta);
  border-bottom-color: var(--verde-linha);
}

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

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

/* --- O formulario -------------------------------------------------------
   Tres superficies em escada, do fundo para a frente: verde da secao, papel
   do cartao, branco do campo. O campo continua sendo o primitivo .campo de
   css/secoes-comum.css; o que muda aqui sao dois tokens locais, e nao o
   primitivo:

   --borda-forte  a borda clara padrao (#c3c9ba) da 1,6:1 contra o papel do
                  cartao, abaixo do minimo de 3:1 para contorno de controle.
                  --tinta-tenue da 4:1 e desenha o campo de verdade.
   --verde-vidro  o anel de foco verde sobre claro nasce em 8% e some contra
                  o branco; aqui ele sobe para ficar visivel.
   -------------------------------------------------------------------------- */
.contato-forma {
  --borda-forte: var(--tinta-tenue);
  --verde-vidro: color-mix(in srgb, var(--verde-tinta) 18%, transparent);
  position: relative;
  display: grid;
  gap: var(--e5);
  padding: var(--e7);
  border: 1px solid var(--borda-clara-forte);
  border-radius: var(--r-xl);
  background: var(--papel);
  box-shadow: var(--sombra-3);
  transition:
    border-color var(--dur-2) var(--ease),
    box-shadow var(--dur-2) var(--ease);
}

.contato-forma-topo {
  display: grid;
  gap: var(--e3);
}

.contato-forma-kicker {
  color: var(--verde-tinta);
}

.contato-forma h3 {
  color: var(--texto);
  font-size: var(--t4);
  letter-spacing: var(--tk3);
}

.contato-campos {
  display: grid;
  gap: var(--e4);
}

/* "com DDD" ao lado do rotulo: mesma linha, peso normal. */
.contato-campo-nota {
  color: var(--suave);
  font-weight: var(--p-normal);
}

/* Botao escuro porque verde nao contrasta com verde. Altura fechada pelo
   espaco, nunca por um numero: --e4 em cima e embaixo alinha o botao com os
   52px do campo. O holofote de [data-brilho] usa --verde-vidro, que sobre o
   escuro do botao precisa do verde claro, e nao do verde de tinta. */
.contato-envio {
  --verde-vidro: color-mix(in srgb, var(--verde-capa) 30%, transparent);
  justify-content: space-between;
  padding-block: var(--e4);
  font-size: var(--c2);
}

.contato-envio:disabled {
  cursor: progress;
  transform: none;
}

/* O disco de espera que js/site.js injeta no lugar do rotulo nao precisa de
   regra aqui: a global em css/hero.css tira a cor de `currentColor` e ja
   acompanha o texto deste botao. */

.contato-status {
  margin: 0;
  color: var(--suave);
  font-size: var(--c4);
  line-height: 1.7;
  transition: color var(--dur-2) var(--ease);
}

/* --- Estados do envio ---------------------------------------------------
   Tudo pendurado em [data-form-estado], escrito por js/site.js no <form>.
   Nao ha vermelho na paleta: o erro se anuncia por peso e por borda em
   --texto, a mesma escada monocromatica do .campo[aria-invalid].
   -------------------------------------------------------------------------- */

/* Fio de progresso no alto do cartao. Fica recolhido dentro do raio, com
   folga lateral, para nao precisar de overflow no cartao (que cortaria o
   anel de foco dos campos). */
.contato-forma::before {
  content: "";
  position: absolute;
  inset: var(--e5) var(--e5) auto;
  height: var(--e1);
  border-radius: var(--r-full);
  background: linear-gradient(90deg, transparent, var(--verde), transparent);
  background-size: 42% 100%;
  background-repeat: no-repeat;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-2) var(--ease);
}

.contato-forma[data-form-estado="enviando"]::before {
  opacity: 1;
  animation: contato-progresso var(--dur-4) var(--ease) infinite;
}

@keyframes contato-progresso {
  from {
    background-position: -50% 0;
  }
  to {
    background-position: 150% 0;
  }
}

/* Enquanto envia, o rotulo do botao vira disco + "Enviando…": os dois tem de
   andar juntos no centro, e nao nas duas pontas. */
.contato-forma[data-form-estado="enviando"] .contato-envio {
  justify-content: center;
  gap: var(--e3);
}

.contato-forma[data-form-estado="enviado"] {
  border-color: var(--verde-tinta);
  box-shadow: var(--brilho-verde);
}

.contato-forma[data-form-estado="enviado"] .contato-status {
  color: var(--verde-tinta);
  font-weight: var(--p-forte);
}

.contato-forma[data-form-estado="erro"] {
  border-color: var(--texto);
}

.contato-forma[data-form-estado="erro"] .contato-status {
  color: var(--texto);
  font-weight: var(--p-forte);
}

/* --- Responsivo: 1200 / 980 / 680 / 380 ---------------------------------- */
@media (max-width: 1200px) {
  .contato-forma {
    padding: var(--e6);
  }
}

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

  /* Coluna unica: o cartao para de crescer junto com a pagina e fica na
     mesma medida de leitura das outras colunas do site (.secao-lead). */
  .contato-forma {
    max-width: 60ch;
  }
}

@media (max-width: 680px) {
  .contato-forma {
    padding: var(--e5);
  }

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

  /* As quebras <br> do h2 ficam: o markup nao tem espaco em volta delas,
     entao esconder o <br> gruda as palavras ("seuatendimento"). Em tela
     estreita as linhas do titulo refluem sozinhas dentro de cada trecho. */
  .contato-chamada h2 {
    letter-spacing: var(--tk1);
  }
}

@media (max-width: 380px) {
  .contato-canais {
    gap: var(--e4);
  }

  .contato-forma {
    padding: var(--e4);
  }

  .contato-forma::before {
    inset: var(--e3) var(--e3) auto;
  }

  .contato-envio {
    font-size: var(--c3);
  }
}