/* ==================================================================
   08 · CTA FINAL  (widget fp-contato)

   Copiado do lab (lab/home/secoes/contato/contato.css). A partir daqui,
   este arquivo e o que vale. Os controles do widget chegam como variaveis
   na secao (--col-e/--col-d e --fw-cta); sem elas, e a secao do lab.

   Navy. A unica repeticao de diagramacao da pagina, de proposito: termina
   com a composicao do hero. A esquerda, H2, texto e CTA, com o F embaixo
   cortado pela borda de baixo da pagina; a direita, no lugar do marquee,
   o fechamento em contorno (a frase que no hero e o titulo cheio) e, no
   lugar do apoio e da prova, telefone, redes e copyright.

   O neon e o proprio F: copias desfocadas do desenho atras do arquivo
   oficial, que continua sem filtro, cor nem brilho.
   ================================================================== */

.contato{
  --reserva-f:clamp(12rem,34vh,22rem);
  position:relative;
  overflow:clip;
  min-height:100svh;
  background:var(--navy);
  color:var(--paper);
  /* Embaixo, espaco para o F aparecer abaixo do convite. */
  padding-block:clamp(6rem,15vh,11rem) var(--reserva-f);
}

/* Duas linhas de leitura atravessam as colunas, abaixo do titulo:
     linha 2  texto          | fechamento   (topo das maiusculas alinhado)
     linha 3  botao          | telefone     (mesma linha de base)
     linha 4                 | copyright
   Por isso convite e lado viram "contents" e os filhos entram direto na
   grade. */
.contato__grade{
  position:relative;
  z-index:2;
  container-type:inline-size;
  display:grid;
  grid-template-columns:minmax(0,var(--col-e,1fr)) minmax(0,var(--col-d,1fr));
  column-gap:var(--gutter);
  align-items:start;
  /* O mesmo corpo de titulo do hero. Com a coluna do convite fora de 50%,
     os corpos continuam os da metade, como no hero: o texto quebra em mais
     linhas se a coluna ficar estreita. */
  --fs-h2:min(calc((100cqw - var(--gutter)) / 2 / 7.3), 12.5vh, 7.5rem);
  --lh-h2:.93;
  /* Fechamento sempre em duas linhas: "Sua empresa, encontrada," mede 12 em
     na Outfit 900; 12.4 deixa folga para o traco. */
  --fs-fecho:min((100cqw - var(--gutter)) / 2 / 12.4, 5rem);
  --vao-texto:clamp(1.5rem,4vh,2.75rem);
}
.contato__chamada,
.contato__lado{display:contents}

/* ---- convite ------------------------------------------------------ */

.contato__h2{
  grid-column:1;
  grid-row:1;
  font-family:var(--font-display);
  font-weight:900;
  font-size:var(--fs-h2);
  line-height:var(--lh-h2);
  letter-spacing:-.042em;
  color:var(--paper);
  text-wrap:balance;
}
.contato__texto{
  grid-column:1;
  grid-row:2;
  margin-top:var(--vao-texto);
  max-width:44ch;
  font-size:var(--t-lead);
  line-height:1.5;
  color:var(--fg-2);
  text-wrap:pretty;
}
/* Mais de um paragrafo (a home usa um): o bloco guarda o lugar do texto. */
div.contato__texto{display:grid;gap:1em}
.contato__cta{
  grid-column:1;
  grid-row:3;
  justify-self:start;
  align-self:last baseline;
}

/* ---- coluna da direita -------------------------------------------- */

/* Contorno com o miolo na cor do fundo, como no marquee e na abertura de
   Como trabalhamos: cobre as linhas internas da Outfit.
   Topo das maiusculas na altura do topo das maiusculas do texto. Na Outfit
   (ascendente 1, descendente .26), a maiuscula comeca a
   (entrelinha / 2 + .37 - altura da maiuscula) em da borda da caixa:
   texto (1.5, .703) = .417 em; fechamento (1.02, .719) = .161 em. */
.contato__fechamento{
  --traco:clamp(1.25px,.1vw,2px);
  grid-column:2;
  grid-row:2;
  margin-top:calc(var(--vao-texto) + .417 * var(--t-lead) - .161 * var(--fs-fecho));
  font-family:var(--font-display);
  font-weight:900;
  font-size:var(--fs-fecho);
  line-height:1.02;
  letter-spacing:-.015em;
  -webkit-text-fill-color:var(--navy);
  -webkit-text-stroke:calc(2 * var(--traco)) rgba(251,251,250,.72);
  paint-order:stroke fill;
  text-wrap:balance;
}
.contato__palavra{display:inline-block}

/* O numero fica na linha de base do botao: os dois levam ao WhatsApp. */
.contato__canais{
  grid-column:2;
  grid-row:3;
  align-self:last baseline;
  margin-top:clamp(1.5rem,4vh,3rem);
}
.contato__rotulo,
.contato__copy{
  font-family:var(--font-mono);
  font-weight:500;
  font-size:var(--t-mono-sm);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--fg-3);
}
.contato__copy small{font-size:inherit}

/* Numero e icones na mesma linha, os icones apoiados na linha de base dos
   algarismos. */
.contato__linha{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  column-gap:clamp(1.25rem,2.4vw,2.5rem);
  row-gap:.5rem;
  margin-top:.6rem;
  font-size:clamp(1.75rem,2.6vw,3rem);
}
.contato__numero{
  font-family:var(--font-display);
  font-weight:800;
  line-height:1.1;
  letter-spacing:-.02em;
  white-space:nowrap;
  color:var(--paper);
  transition:color .35s var(--ease-out);
}
.contato__numero:hover,
.contato__numero:focus-visible{color:var(--orange)}

/* Os icones ficam fora da linha de base (centralizados na linha do
   numero): o numero continua dando a linha de base do grupo, que alinha
   com o botao. */
.contato__redes{display:flex;align-self:center;gap:.15em}
/* Alvo de toque de pelo menos 44px. No hover so a opacidade muda: as tres
   marcas pedem que o logo nao seja recolorido. */
.contato__redes a{
  display:grid;
  place-items:center;
  min-width:44px;
  min-height:44px;
  /* A caixa de margem fica com a altura da linha do numero (1.1em), maior
     ou menor que os 44px do alvo: assim o icone centraliza nos algarismos
     (em 1280 o alvo mais alto que a linha deixava o icone 3.6px abaixo). */
  margin-block:calc((1.1em - 44px) / 2);
  color:var(--paper);
  opacity:.78;
  transition:opacity .35s var(--ease-out);
}
.contato__redes a:hover,
.contato__redes a:focus-visible{opacity:1}
.contato__redes svg{width:.54em;height:.54em}

.contato__copy{
  grid-column:2;
  grid-row:4;
  margin-top:clamp(2.5rem,7vh,5rem);
}

/* ---- F e neon ------------------------------------------------------
   O F como no hero: a haste alinha com a margem da caixa; o topo e
   calculado em assets/js/contato.js.

   O neon e a luz do proprio F: duas copias do desenho, desfocadas, atras
   do arquivo oficial (.contato__marca, sem filtro). A justa contorna as
   hastes; a larga espalha a luz no navy. O desfoque e fixo (o navegador
   o prepara uma vez); so a opacidade muda:
     --luz     0 a 1, acende conforme o F assenta (rolagem);
     --reacao  0 a 1, sobe com o cursor perto do F e chega ao maximo com o
               botao em hover ou foco (contato.js). */
.contato__f{
  /* --fw-cta vem do controle "Tamanho do F" no widget. */
  --fw:var(--fw-cta, min(48vw,100vh));
  --luz:1;
  --reacao:0;
  position:absolute;
  z-index:1;
  pointer-events:none;
  top:70%;
  width:var(--fw);
  aspect-ratio:645.22 / 630;
  left:calc(var(--margem) + max(0px, (100% - var(--max)) / 2) - var(--fw) * 33.84 / 645.22);
}
.contato__f img{position:absolute;inset:0;width:100%;height:100%;max-width:none}
.contato__neon{will-change:opacity}
.contato__neon--justo{
  filter:blur(calc(var(--fw) * .006)) brightness(1.25) saturate(1.2);
  opacity:calc(var(--luz) * (.5 + .5 * var(--reacao)));
}
.contato__neon--largo{
  filter:blur(calc(var(--fw) * .035)) brightness(1.3) saturate(1.3);
  opacity:calc(var(--luz) * (.3 + .6 * var(--reacao)));
}

/* ------------------------------------------------------------------
   Abaixo de 1100px: tudo empilhado, F embaixo, como no hero.
   ------------------------------------------------------------------ */

@media (max-width:1099.98px){
  .contato{min-height:0;padding-block:clamp(4.5rem,14vw,7rem) 52vw}
  .contato__grade{
    grid-template-columns:minmax(0,1fr);
    --fs-h2:min(12.4vw, 100cqw / 7.3, 6rem);
  }
  .contato__chamada,
  .contato__lado{display:block;grid-column:1}
  .contato__cta{margin-top:clamp(1.75rem,5vh,3.5rem)}
  .contato__lado{margin-top:clamp(3rem,12vw,4.5rem)}
  .contato__fechamento{margin-top:0;font-size:clamp(2rem,9vw,3.25rem)}
  .contato__canais{margin-top:clamp(2.5rem,7vh,5rem)}
  .contato__linha{font-size:clamp(1.75rem,9vw,2.5rem)}
  /* Os icones descem para a linha de baixo do numero. */
  .contato__redes{flex-basis:100%;margin-left:-10px}
  .contato__f{--fw:92vw}
}