/* ===========================================================================
   Fale com a AirPix, e a placa de circuito que segue no rodape.

   A primeira metade deste arquivo (.cir-*) e compartilhada com rodape.css:
   a malha de trilhas, os pontos de solda e o feixe de luz sao os mesmos nos
   dois, e viver em um lugar so evita que um seja ajustado e o outro nao.

   Nenhum style="" no HTML: a CSP do site nao admite inline.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   A PLACA — compartilhada por .ct e .pe
   --------------------------------------------------------------------------- */
.ct, .pe {
  /* Tres niveis, e a queda entre eles e forte de proposito: perto do centro a
     trilha se le, longe ela quase some. Placa inteira com o mesmo peso vira
     ruido sobre o conteudo. */
  /* Calibrado contra a tela aprovada em 02/09/2026: em .3 a placa quase
       sumia. Este degrau a traz de volta sem cruzar para o que foi reprovado
       — nada pisca, nada brilha. Na referencia a placa se
     le, ela nao desaparece. A queda entre os niveis continua forte — perto
     do chip a trilha aparece, longe ela dissolve. */
  --cir-trilha:      rgba(110, 168, 224, .42);
  --cir-trilha-media:rgba(110, 168, 224, .26);
  --cir-trilha-fraca:rgba(110, 168, 224, .13);
  --cir-no:          rgba(150, 205, 255, .62);
  --cir-luz:         #9fd2f5;
}

.cir-trilha {
  fill: none;
  stroke: var(--cir-trilha);
  stroke-width: .8;
  vector-effect: non-scaling-stroke;   /* o SVG escala; o traco nao engorda */
}
.cir-trilha--media { stroke: var(--cir-trilha-media); }
.cir-trilha--fraca { stroke: var(--cir-trilha-fraca); }

.cir-no { fill: var(--cir-no); opacity: .45; }
.cir-no--fraco { opacity: .2; }

/* O FEIXE DE LUZ
   E a mesma trilha desenhada por cima, com um traco curto correndo por ela.
   pathLength="100" normaliza o comprimento de cada path, entao o mesmo
   dasharray produz um feixe do mesmo tamanho em trilhas de comprimentos
   diferentes — sem isso o feixe fica comprido numa e curto na outra.

   Um ponto viajando leria como particula. Um traco correndo le como energia
   passando pelo condutor, que e o que a referencia mostra. */
.cir-feixe {
  fill: none;
  stroke: var(--cir-luz);
  stroke-width: 1.1;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 5 95;              /* 5% aceso, 95% apagado */
  stroke-dashoffset: 100;
  opacity: 0;
  /* Sem drop-shadow: o brilho em volta engrossava a linha e virava o elemento
     mais claro da tela, acima do titulo. */
}

@media (prefers-reduced-motion: no-preference) {
  .cir-feixe {
    animation: cir-correr var(--dur, 9s) linear infinite;
    animation-delay: var(--atraso, 0s);
  }
}
@keyframes cir-correr {
  0%   { stroke-dashoffset: 100; opacity: 0 }
  12%  { opacity: .4 }
  88%  { opacity: .4 }
  100% { stroke-dashoffset: 0;   opacity: 0 }
}

/* Ritmos diferentes por feixe: com todos iguais, a placa pulsa em bloco e
   parece uma unica animacao em vez de trafego. */
/* Lentos e desencontrados: com todos no mesmo ritmo a placa pulsa em bloco
   e o olho vai para ela em vez de para o formulario. */
.cir-feixe--0 { --dur: 18s; --atraso: 0s }
.cir-feixe--1 { --dur: 24s; --atraso: 7s }
.cir-feixe--2 { --dur: 21s; --atraso: 13s }

/* ---------------------------------------------------------------------------
   A SECAO
   --------------------------------------------------------------------------- */
.ct {
  --ct-linha:   rgba(120, 180, 240, .2);
  --ct-campo:   rgba(6, 22, 42, .55);
  --ct-luz:     #a9ddff;
  --ct-rotulo:  #6aa9e8;
  --ct-texto:   #c3d6ea;
  --ct-destaque:#fe0d2d;

  position: relative;
  overflow: hidden;
}

.ct-circuito {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
.ct-wrap { position: relative; z-index: 1; }

.ct-grade { display: grid; gap: clamp(2rem, 5vw, 3.5rem); }

/* --- Chamada -------------------------------------------------------------- */
.ct-titulo {
  margin: .85rem 0 0;
  font-size: clamp(1.9rem, 4vw, 3.1rem);
  line-height: 1.08;
  text-wrap: balance;
}
/* So o ponto final e vermelho, como na referencia. */
.ct-ponto { color: var(--ct-destaque); }

.ct-texto {
  margin: 1.1rem 0 0;
  font-size: clamp(.98rem, 1.25vw, 1.08rem);
  line-height: 1.65;
  color: var(--ct-texto);
  max-width: 46ch;
}

/* --- Canais --------------------------------------------------------------- */
.ct-canais {
  list-style: none;
  margin: clamp(1.5rem, 3.5vw, 2.25rem) 0 0;
  padding: 0;
  display: grid;
  border-top: 1px solid var(--ct-linha);
}
.ct-canal-item { border-bottom: 1px solid var(--ct-linha); }

.ct-canal {
  display: flex; align-items: center; gap: .9rem;
  /* 44px de alvo de toque: e a regra do site, e vale aqui tambem. */
  min-height: 44px;
  padding: .7rem .1rem;
  color: inherit;
  text-decoration: none;
  border-radius: 4px;
}
.ct-canal-marca {
  flex: none;
  display: grid; place-items: center;
  width: 2.9rem; aspect-ratio: 1;
  border: 1px solid rgba(120, 180, 240, .32);
  border-radius: 7px;
  color: var(--ct-luz);
  transition: border-color .25s ease, box-shadow .25s ease, color .25s ease;
}
.ct-icone {
  width: 52%; height: 52%;
  fill: none; stroke: currentColor;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
.ct-canal-texto  { display: grid; gap: .15rem; min-width: 0; }
.ct-canal-rotulo {
  font: 600 .78rem/1 var(--mono, ui-monospace, monospace);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ct-rotulo);
}
.ct-canal-valor {
  font-size: clamp(.92rem, 1.15vw, 1rem);
  line-height: 1.35;
  color: #fff;
  overflow-wrap: break-word;
}

a.ct-canal:hover .ct-canal-marca, a.ct-canal:focus-visible .ct-canal-marca {
  color: #fff;
  border-color: rgba(169, 221, 255, .75);
  box-shadow: 0 0 14px rgba(90, 170, 250, .4);
}
a.ct-canal:focus-visible { outline: 2px solid var(--ct-luz); outline-offset: 3px; }

/* --- Botao do WhatsApp ---------------------------------------------------- */
/* Contorno, nao preenchido: na referencia ele nao compete com o botao de
   envio, que e o vermelho. Sao duas acoes de peso diferente. */
.ct-whats {
  /* Gradiente azul e largura da coluna, como na tela aprovada de 02/09/2026.
     Antes era um botao translucido com a largura do proprio rotulo — a
     referencia mostra uma barra azul cheia, e ela vence.

     Verde e nao azul desde 02/09/2026, a pedido, e foi o que resolveu o
     impasse: com o azul claro da referencia o texto branco ficava em 2,6 de
     contraste e o portao reprovava (o rotulo tem 17px em peso 600, que ainda
     conta como texto pequeno — 4,5 e o minimo).

     O par verde e o mesmo raciocinio ja registrado no botao flutuante do
     site: #128c7e e o verde oficial do WhatsApp mas rende 4,14 com letra
     branca, entao o tom desce. Aqui o degrade vai de #0e7c6c a #064c44 e a
     barra continua sendo lida como o verde do WhatsApp. */
  display: flex; align-items: center; justify-content: center; gap: .65rem;
  justify-self: stretch;
  min-height: 52px;
  margin-top: clamp(1.25rem, 3vw, 1.75rem);
  padding: .85rem 1.5rem;
  border: 1px solid rgba(120, 185, 240, .35);
  border-radius: 6px;
  background: linear-gradient(90deg, #0e7c6c, #064c44);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  transition: filter .25s ease, box-shadow .25s ease;
}
.ct-whats .ct-icone { width: 1.3rem; height: 1.3rem; flex: none; }
.ct-whats:hover, .ct-whats:focus-visible {
  /* filter e nao background: uma cor solida aqui apagaria o gradiente inteiro
     no hover, e o botao ficaria escuro justo quando recebe a atencao. */
  border-color: rgba(169, 221, 255, .8);
  filter: brightness(1.14);
  box-shadow: 0 0 18px rgba(90, 170, 250, .25);
}
.ct-whats:focus-visible { outline: 2px solid var(--ct-luz); outline-offset: 3px; }

/* --- Formulario ----------------------------------------------------------- */
.ct-form { display: grid; gap: clamp(.9rem, 1.8vw, 1.15rem); }

.ct-campo { display: grid; gap: .5rem; min-width: 0; }
.ct-campo-rotulo {
  font: 600 .78rem/1 var(--mono, ui-monospace, monospace);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ct-rotulo);
}

.ct-campo input,
.ct-campo select,
.ct-campo textarea {
  font: 400 1rem/1.5 var(--body, system-ui, sans-serif);
  color: #fff;
  background: var(--ct-campo);
  border: 1px solid rgba(120, 180, 240, .3);
  border-radius: 6px;
  padding: 1rem 1.05rem;
  width: 100%;
  transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}
.ct-campo textarea { min-height: 8.5rem; resize: vertical; }

.ct-campo input::placeholder,
.ct-campo textarea::placeholder { color: rgba(150, 180, 212, .6); }

.ct-campo input:focus,
.ct-campo select:focus,
.ct-campo textarea:focus {
  outline: none;
  border-color: rgba(169, 221, 255, .8);
  box-shadow: 0 0 0 3px rgba(90, 170, 250, .22);
}
.ct-campo input:focus-visible,
.ct-campo select:focus-visible,
.ct-campo textarea:focus-visible { outline: 2px solid var(--ct-luz); outline-offset: 2px; }

/* --- Envio ---------------------------------------------------------------- */
.ct-envio { display: grid; gap: clamp(1rem, 2.5vw, 1.5rem); align-items: center; }

.ct-enviar {
  min-height: 56px;
  padding: 1.05rem 2.75rem;
  border: 0;
  border-radius: 6px;
  /* Gradiente do vermelho da marca para o bordo, como na referencia. */
  background: linear-gradient(100deg, #e10d28 0%, #a5081c 100%);
  color: #fff;
  font: 600 1rem/1 var(--body, system-ui, sans-serif);
  cursor: pointer;
  transition: filter .2s ease, box-shadow .2s ease;
}
.ct-enviar:hover, .ct-enviar:focus-visible {
  filter: brightness(1.1);
  box-shadow: 0 0 22px rgba(225, 13, 40, .35);
}
.ct-enviar:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.ct-nota {
  margin: 0;
  font-size: .86rem;
  line-height: 1.6;
  color: var(--ct-texto);
}
.ct-nota a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.ct-nota a:hover, .ct-nota a:focus-visible { color: #fff; }

/* No celular o botao ocupa a coluna inteira: ali a largura toda e o alvo
   natural do polegar, e nao ha nada ao lado para ele competir. */
@media (max-width: 37.49rem) {
  /* justify-self precisa ir junto: sozinho, o display:flex nao alarga o
     botao, porque `start` continua prendendo ele ao proprio conteudo. */
  .ct-whats { display: flex; justify-self: stretch; }
}

/* ===========================================================================
   Duas colunas de campos

   37,5rem (600px) e o ponto onde a dica mais longa — "Ex.: outubro, ou ainda
   sem data", 226px — ainda cabe num campo de meia linha. Abaixo disso duas
   colunas cortariam o texto, e uma coluna so le melhor do que duas com a
   dica pela metade.
   =========================================================================== */
@media (min-width: 37.5rem) {
  .ct-form {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(.9rem, 1.8vw, 1.15rem);
  }
  .ct-campo--largo,
  .ct-form > .hp,
  .ct-envio { grid-column: 1 / -1; }
}

/* ===========================================================================
   DESKTOP — chamada a esquerda, formulario a direita

   72rem (1152px) e nao 64rem: em 1024px as duas colunas espremem o formulario
   e a dica "Ex.: outubro, ou ainda sem data" perde 28px. Abaixo disso a
   chamada e o formulario empilham, e o formulario usa a largura inteira.
   =========================================================================== */
@media (min-width: 72rem) {
  .ct-grade {
    grid-template-columns: minmax(0, .82fr) minmax(0, 1fr);
    gap: clamp(2.5rem, 5vw, 4.5rem);
    align-items: start;
  }
  /* A linha que separa a chamada do formulario, como na referencia. Fica no
     lado de dentro do formulario para acompanhar a altura dele. */
  .ct-lado--form {
    border-left: 1px solid var(--ct-linha);
    /* Metade do vao de cada lado: a linha fica no MEIO do espaco entre as
       colunas. Com o vao inteiro ela encostava no texto da esquerda. */
    padding-left: calc(clamp(2.5rem, 5vw, 4.5rem) / 2);
    margin-left: calc(clamp(2.5rem, 5vw, 4.5rem) / -2);
  }
  /* Botao e nota lado a lado: e o arranjo da referencia, e evita que a nota
     empurre o rodape para baixo com uma linha inteira quase vazia. */
  /* A nota fica ABAIXO do botao, nao ao lado: e o arranjo da referencia, e
     da ao botao a presenca que ele precisa ter como acao principal. */
  .ct-envio { grid-template-columns: minmax(0, 1fr); justify-items: start; }
}

/* ===========================================================================
   PREFERS-REDUCED-MOTION
   A placa continua inteira; so o trafego para.
   =========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .cir-feixes { display: none; }
}

/* ===========================================================================
   O formulario recolhido tambem no desktop — 02/09/2026

   Antes o gatilho so existia no celular; no desktop os nove campos ficavam
   abertos. A leitura da secao melhora com o mesmo percurso nos dois: a pessoa
   entende a proposta, ve os canais diretos, e so entao decide preencher.
   =========================================================================== */
/* As duas colunas do formulario mudaram de dono.

   Elas viviam no .ct-form, com os campos como filhos diretos. Com o <details>
   entre os dois, o painel inteiro virou UM item da grade e os nove campos
   caiam numa coluna so.

   `display: contents` no corpo resolveria a grade e quebraria o resto: quem
   esconde o conteudo e o <details>, e o corpo precisa continuar sendo um
   elemento de verdade para ser escondido junto. Por isso a grade desce para
   ca — o corpo passa a ser o container, e o painel ocupa a linha inteira. */
.ct-recolhe { grid-column: 1 / -1; }
.ct-recolhe-corpo { display: grid; gap: clamp(.9rem, 1.8vw, 1.15rem); }

@media (min-width: 37.5rem) {
  .ct-recolhe-corpo {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(.9rem, 1.8vw, 1.15rem);
  }
  .ct-recolhe-corpo > .ct-campo--largo { grid-column: 1 / -1; }
}

.ct-recolhe-gatilho {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 52px;
  padding: .85rem 1.15rem;
  margin-block: .35rem 0;
  border: 1px solid rgba(140, 195, 245, .38);
  border-radius: 6px;
  background: rgba(10, 30, 55, .45);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.ct-recolhe-gatilho::-webkit-details-marker { display: none; }
.ct-recolhe-gatilho:hover { border-color: rgba(169, 221, 255, .7); }
.ct-recolhe-gatilho:focus-visible { outline: 2px solid var(--ct-luz); outline-offset: 3px; }

/* Um rotulo por estado, os dois no HTML. Trocar texto por CSS mantem os dois
   legiveis para leitor de tela sem depender de script, e o `hidden` de
   verdade fica a cargo do proprio <details>. */
.ct-rot--aberto  { display: none; }
.ct-recolhe[open] .ct-rot--fechado { display: none; }
.ct-recolhe[open] .ct-rot--aberto  { display: inline; }

.ct-recolhe-seta {
  width: .55rem; height: .55rem; flex: none;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform .2s ease;
}
.ct-recolhe[open] .ct-recolhe-seta { transform: rotate(-135deg) translate(-2px, -2px); }
.ct-recolhe[open] .ct-recolhe-gatilho { margin-bottom: .9rem; }

/* Com o formulario fechado nao ha o que enviar. */
.ct-recolhe:not([open]) ~ .ct-envio { display: none; }

@media (prefers-reduced-motion: reduce) {
  .ct-recolhe-seta { transition: none; }
}

/* ===========================================================================
   Celular: os canais mais compactos

   Os quatro canais somavam 280px em 390px de largura — um terco de tela para
   quatro linhas de texto. O conteudo continua inteiro: telefone, e-mail,
   Instagram e YouTube, cada um clicavel e com o mesmo rotulo. O que encolhe e
   o espaco em volta.

   Os 44px de alvo de toque nao entram nesta conta: sao a regra do site e
   continuam valendo. E por isso que a linha para em 46px e nao menos.
   =========================================================================== */
@media (max-width: 47.99rem) {
  .ct-canal {
    gap: .7rem;
    min-height: 46px;
    padding: .4rem .1rem;
  }
  .ct-canal-marca { width: 2.2rem; border-radius: 6px; }
  .ct-canal-texto { gap: 0; }
  .ct-canal-rotulo { font-size: .68rem; letter-spacing: .08em; }
  .ct-canal-valor  { font-size: .92rem; line-height: 1.25; }
  .ct-whats { min-height: 48px; margin-top: 1rem; }
}

/* ===========================================================================
   Celular: os feixes do circuito um pouco mais presentes — 02/09/2026

   Um feixe de 18 a 24s atravessando a tela do celular passa despercebido: o
   dedo rola antes de o pulso completar o caminho. Aqui ele fica ~28% mais
   rapido e ~30% mais claro no pico, o que basta para se perceber que ha
   sinal correndo.

   O traco continua com 5% aceso e 95% apagado, e o pico de opacidade para em
   .52 — bem longe de flash. As curvas seguem lineares: nada pisca, o pulso
   entra e sai por transicao.

   Continuam TRES feixes. Nenhum novo, e a malha de trilhas nao muda.

   `no-preference` na propria media query, e nao so herdado: este bloco vem
   depois do `reduce` no arquivo e o venceria por ordem se nao declarasse.
   =========================================================================== */
@media (max-width: 47.99rem) and (prefers-reduced-motion: no-preference) {
  .cir-feixe--0 { --dur: 13s }
  .cir-feixe--1 { --dur: 17s }
  .cir-feixe--2 { --dur: 15s }

  .cir-feixe { animation-name: cir-correr-mobile; }
}

@keyframes cir-correr-mobile {
  0%   { stroke-dashoffset: 100; opacity: 0 }
  12%  { opacity: .52 }
  88%  { opacity: .52 }
  100% { stroke-dashoffset: 0;   opacity: 0 }
}

/* ===========================================================================
   Contato: duas colunas com papeis distintos — 02/09/2026

   A esquerda diz POR QUE falar com a AirPix (olho, titulo, descricao). A
   direita diz COMO (canais, botao do WhatsApp, o controle do formulario).

   Antes tudo isso morava na esquerda e o formulario ocupava a direita. Com o
   formulario recolhido, a direita virava meia tela vazia ao lado de uma
   coluna cheia.

   O painel do formulario nao fica preso a coluna de 50%: ao abrir, ele passa
   a ocupar a largura inteira da secao. Um formulario de nove campos espremido
   em meia tela pede mais rolagem e erra mais — a geometria da tela fechada
   nao vale esse preco.
   =========================================================================== */
@media (min-width: 62rem) {
  .ct-grade {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(2rem, 4vw, 3.5rem);
    row-gap: clamp(1.5rem, 3vw, 2.25rem);
    align-items: start;
  }
  .ct-lado--texto  { grid-column: 1; grid-row: 1; }
  .ct-lado--canais { grid-column: 2; grid-row: 1; }
  .ct-lado--form   { grid-column: 2; grid-row: 2; }

  /* Aberto, o painel atravessa as duas colunas e comeca na primeira.
     `:has()` le o estado do <details> filho; onde ele nao existir, o painel
     fica na coluna 2 — mais estreito, porem inteiro e funcional. */
  .ct-grade:has(.ct-recolhe[open]) .ct-lado--form {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

/* Os canais nao precisam de linha divisoria agora que estao sozinhos numa
   coluna: a propria coluna ja os separa do texto. */
.ct-lado--canais { display: grid; align-content: start; }

/* ===========================================================================
   O painel de preenchimento

   Claro sobre o fundo escuro, e nao mais um bloco translucido: quem vai
   escrever precisa enxergar o que digita, e campo escuro sobre fundo escuro
   nao diz onde comeca a area de preenchimento.
   =========================================================================== */
.ct-painel {
  background: #f5f8fc;
  border: 1px solid #dbe6f0;
  border-radius: 12px;
  padding: clamp(1.25rem, 3vw, 2rem);
  margin-top: .9rem;
  box-shadow: 0 18px 44px rgba(2, 12, 26, .28);
}

/* Dentro do painel claro, o texto e os campos invertem: escuro sobre claro. */
.ct-painel .ct-campo-rotulo { color: #2b6bb0; }
.ct-painel input,
.ct-painel select,
.ct-painel textarea {
  background: #ffffff;
  border-color: #cbdae8;
  color: #0d2036;
}
.ct-painel input::placeholder,
.ct-painel textarea::placeholder { color: #7b93aa; }
.ct-painel input:focus,
.ct-painel select:focus,
.ct-painel textarea:focus {
  border-color: #2b6bb0;
  box-shadow: 0 0 0 3px rgba(43, 107, 176, .16);
}
.ct-painel .ct-nota { color: #4d6579; }

/* O envio fica dentro da mesma caixa clara: separado dela, o botao flutuaria
   sobre o fundo escuro e a area de preenchimento pareceria terminar antes do
   proprio botao. */
.ct-recolhe[open] ~ .ct-envio {
  background: #f5f8fc;
  border: 1px solid #dbe6f0;
  border-top: 0;
  border-radius: 0 0 12px 12px;
  margin-top: -1px;
  padding: 0 clamp(1.25rem, 3vw, 2rem) clamp(1.25rem, 3vw, 2rem);
  box-shadow: 0 18px 44px rgba(2, 12, 26, .28);
}
.ct-recolhe[open] ~ .ct-envio .ct-nota { color: #4d6579; }
.ct-recolhe[open] ~ .ct-envio .ct-nota a { color: #14508f; }
/* A caixa clara e uma so, partida em dois elementos porque o <details>
   fecha antes do botao de envio. Sem tirar a borda de baixo do primeiro,
   aparecia uma linha atravessando o painel entre o textarea e o botao. */
.ct-painel {
  border-radius: 12px 12px 0 0;
  border-bottom: 0;
  margin-bottom: 0;
  padding-bottom: clamp(.9rem, 2vw, 1.25rem);
}
.ct-painel .ct-nota a { color: #14508f; }