/*
 * Formulário de captura, botão flutuante e popup.
 *
 * Reusa os tokens que o próprio site já define (--p3, --texto, --linha, --d, --m),
 * com valor de reserva ao lado: se algum dia estes estilos forem servidos sem a
 * folha principal, o formulário continua legível em vez de sair sem cor nenhuma.
 *
 * O verde do WhatsApp é o único ponto saturado que este arquivo acrescenta. Ele é
 * o código visual do canal, e a pessoa reconhece antes de ler o rótulo.
 */

.p3-form-inline {
  margin: 26px auto 0;
  padding: 22px;
  background: var(--papel, #FEFEFE);
  border: 1px solid var(--linha, rgba(70,85,94,.13));
  border-radius: 16px;
  max-width: 620px;
  box-shadow: 0 2px 20px rgba(16,19,27,.05);
}

/* ─────────── Formulário ─────────── */

/*
 * O formulário mora dentro da seção de contato, que é centralizada. Rótulo e
 * mensagem de erro centralizados ficam ilegíveis num formulário: o olho perde a
 * âncora da esquerda a cada linha. Por isso o alinhamento é reposto aqui, e não
 * herdado.
 */
.p3-form { display: block; text-align: left; }

.p3-linha {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.p3-campo { margin-bottom: 13px; min-width: 0; }

.p3-campo label {
  display: block;
  font-family: var(--m, ui-monospace, monospace);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--texto-3, #93A2A9);
  margin-bottom: 5px;
}

.p3-campo input,
.p3-campo select,
.p3-campo textarea {
  width: 100%;
  padding: 11px 13px;
  font-family: var(--d, system-ui, sans-serif);
  font-size: 16px;          /* 16px evita o zoom automático do iOS ao focar */
  line-height: 1.4;
  color: var(--texto, #46555E);
  background: var(--papel, #FEFEFE);
  border: 1px solid var(--linha, rgba(70,85,94,.13));
  border-radius: 10px;
  min-height: 46px;
  transition: border-color .16s, box-shadow .16s;
  appearance: none;
}

.p3-campo textarea { min-height: 84px; resize: vertical; }

.p3-campo select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2393A2A9' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  padding-right: 36px;
}

.p3-campo input:focus,
.p3-campo select:focus,
.p3-campo textarea:focus {
  outline: none;
  border-color: var(--p3, #0033FB);
  box-shadow: 0 0 0 3px var(--p3-veu, rgba(0,51,251,.09));
}

.p3-campo input[aria-invalid="true"],
.p3-campo select[aria-invalid="true"] { border-color: #C0392B; }

.p3-erro {
  display: block;
  font-size: 12.5px;
  color: #C0392B;
  margin-top: 4px;
  min-height: 0;
}
.p3-erro:empty { display: none; }

/* A isca sai da tela sem display:none: leitor de tela ignora pelo aria-hidden,
   e preenchedor automático de robô continua achando o campo. */
.p3-isca {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.p3-enviar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 6px;
  padding: 14px 22px;
  font-family: var(--d, system-ui, sans-serif);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: #fff;
  background: var(--p3, #0033FB);
  border: 0;
  border-radius: 11px;
  cursor: pointer;
  min-height: 50px;
  text-decoration: none;
  transition: background .16s, transform .16s;
}
.p3-enviar:hover { background: var(--p3-alto, #2A56FF); }
.p3-enviar:active { transform: translateY(1px); }
.p3-enviar:disabled { opacity: .6; cursor: progress; }
.p3-enviar:focus-visible { outline: 2px solid var(--p3-preto, #10131B); outline-offset: 2px; }

.p3-recado { margin: 10px 0 0; font-size: 13.5px; line-height: 1.5; }
.p3-recado.erro { color: #C0392B; }
.p3-recado:empty { display: none; }

.p3-nota {
  margin: 10px 0 0;
  font-family: var(--m, monospace);
  font-size: 11.5px;
  color: var(--texto-3, #93A2A9);
  line-height: 1.5;
}

.p3-ok { text-align: center; padding: 18px 4px; }
.p3-ok strong { display: block; font-size: 18px; color: var(--texto, #46555E); margin-bottom: 6px; }
.p3-ok p { margin: 0 0 16px; font-size: 14px; color: var(--texto-2, #77878F); line-height: 1.55; }

/* ═══════════ Mural que se reveza ═══════════ */

/*
 * Duas fotos empilhadas no mesmo tile, com a de cima em opacidade 1. A troca é um
 * cruzamento de opacidade, não um corte: por isso as duas precisam ocupar
 * exatamente a mesma caixa.
 *
 * O padrão do CSS é a primeira foto VISÍVEL. Se o JavaScript não rodar, o mural
 * fica parado com quem já estava lá, e nada some. Efeito visual pode falhar;
 * conteúdo não pode.
 */
.tile-rosto .face {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 28%;
  display: block;
  opacity: 0;
  /*
   * As três propriedades juntas de propósito. Declarar só `opacity` aqui
   * sobrescreveria a transição de `transform` e `filter` que a folha do site
   * aplica em `.tile-rosto img`, e o zoom suave do hover morreria sem aviso.
   */
  transition: opacity 620ms cubic-bezier(.4, 0, .2, 1),
              transform 760ms cubic-bezier(.22, .8, .36, 1),
              filter 420ms ease;
}

.tile-rosto .face.ativa { opacity: 1; }

/*
 * Véu um pouco mais firme sob a legenda.
 *
 * Com o mural fixo dava para escolher a foto sabendo onde o nome ia cair. Agora
 * qualquer foto cadastrada pode parar em qualquer tile, e uma de fundo claro
 * deixava o nome branco quase ilegível. O reforço vale para todas: nas fotos
 * escuras a diferença não aparece, nas claras ela é o que salva a leitura.
 */
.tile-rosto::after {
  background: linear-gradient(to top,
    rgba(8, 14, 20, .90) 6%,
    rgba(8, 14, 20, .55) 34%,
    rgba(8, 14, 20, .18) 62%,
    transparent) !important;
  height: 68% !important;
}

/* A legenda esmaece junto, para nunca haver nome de um sobre o rosto de outro. */
.rosto .tile-sobre { transition: opacity 300ms ease; }
.rosto.trocando .tile-sobre { opacity: 0; }

/* O arroba precisa de mais luz que o resto: é o menor texto sobre a foto. */
.rosto .tile-arroba { color: rgba(255, 255, 255, .78); }

.rosto .tile-papel[hidden],
.rosto .tile-arroba[hidden] { display: none !important; }

/*
 * O tile ganha um respiro de luz enquanto troca. É o que transforma a troca em
 * algo que parece intencional, e não em imagem que falhou e recarregou.
 */
.rosto.trocando .tile-rosto::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.16) 50%, transparent 70%);
  pointer-events: none;
  animation: p3-brilho 900ms cubic-bezier(.4,0,.2,1);
}

@keyframes p3-brilho {
  from { transform: translateX(-60%); opacity: 0; }
  40%  { opacity: 1; }
  to   { transform: translateX(60%); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .tile-rosto .face { transition: none; }
  .rosto.trocando .tile-rosto::before { animation: none; display: none; }
}

/* ─────────── Mural no celular ─────────── */

/*
 * Menos tiles numa tela estreita, cada um maior.
 *
 * A composição de seis rostos que funciona no desktop vira miniatura ilegível em
 * 390px: rosto de gente precisa de tamanho para ser rosto. Os slots marcados com
 * `data-corte` saem de cena conforme a tela encolhe, e o revezamento passa a
 * acontecer só entre os que ficaram, porque o JavaScript ignora quem não tem
 * caixa na tela.
 */
/*
 * O sexto tile sai em 860, não em 720.
 *
 * Medido: com seis tiles em quatro colunas a 860px, o mais estreito cai para
 * 172px, contra 302px com cinco. O salto era brusco e para pior justamente na
 * faixa do tablet em pé. Com o corte em 860 a curva fica contínua.
 */
@media (max-width: 860px) {
  [data-corte="861"] { display: none !important; }

  /*
   * Duas colunas até 860, não até 720.
   *
   * Medido: em 721px a grade saltava de duas colunas para quatro, e o tile mais
   * estreito caía de 302px para 172px. Um rosto de 172px de largura não é mais
   * um rosto, é uma miniatura. A faixa de 721 a 860 é tablet em pé e celular
   * deitado, onde cabem duas colunas com folga.
   */
  .mural { grid-template-columns: 1.1fr .9fr !important; }
  .mural-col:nth-child(3),
  .mural-col:nth-child(4) { margin-top: 0 !important; }
}

/*
 * A legenda sai de cima da foto já em 560, não só em 460.
 *
 * De 460 a 560 o tile tem entre 190 e 280px de largura, e nome, cargo e arroba
 * empilhados sobre a imagem viravam três linhas espremidas em cima do queixo da
 * pessoa. Fora da foto, cada um tem a própria linha e a foto fica inteira.
 */
@media (max-width: 560px) {
  .rosto .tile-sobre {
    position: static;
    padding: 9px 2px 0;
    color: inherit;
    opacity: 1;
  }
  .rosto .tile-nome   { color: var(--texto, #46555E);   font-size: 12.5px; }
  .rosto .tile-papel  { color: var(--texto-2, #77878F); font-size: 11px; }
  .rosto .tile-arroba { color: var(--texto-3, #93A2A9); }
  .tile-rosto::after  { display: none !important; }

  /*
   * A legenda também some por inteiro durante a troca aqui.
   *
   * Tinha ficado em 45% para o celular não piscar tanto, e o resultado foi pior:
   * a 45% o nome continua legível, e durante a meia dúzia de décimos em que a
   * foto ainda está cruzando, aparece o nome de uma pessoa embaixo do rosto de
   * outra. Foi visto numa captura. Opacidade zero é a única que garante isso, e
   * como a legenda é estática aqui, nada muda de lugar.
   */
  .rosto.trocando .tile-sobre { opacity: 0 !important; }
}

@media (max-width: 560px) {
  [data-corte="561"] { display: none !important; }

  /* Duas colunas com folga maior: no aperto, o que falta é ar, não conteúdo. */
  .mural { gap: 12px !important; }
  .mural-col { gap: 12px !important; }

  /* O degrau entre colunas encolhe: em tela estreita ele só empurra a seção
     para baixo sem acrescentar composição. */
  .mural-col:nth-child(2) { margin-top: 22px !important; }
  .mural-col:nth-child(4) { margin-top: 0 !important; }

  .tile { border-radius: 14px; }
  .tile-convite { padding: 14px; }
}

@media (max-width: 460px) {
  /* O degrau entre colunas quase some: em 390px ele só empurra a seção para
     baixo. A regra de opacidade da legenda durante a troca vem da faixa de
     560px acima, e não é reescrita aqui de propósito. */
  .mural-col:nth-child(2) { margin-top: 14px !important; }
}

/* ─────────── Botão flutuante ─────────── */

.p3-flutua {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 15px;
  border: 0;
  border-radius: 999px;
  background: #1FA855;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 6px 22px rgba(16, 19, 27, .22);
  transition: gap .28s cubic-bezier(.22,.8,.36,1), padding .28s cubic-bezier(.22,.8,.36,1), background .16s;
  font-family: var(--d, system-ui, sans-serif);
}
.p3-flutua:hover { background: #178A45; }
.p3-flutua:focus-visible { outline: 3px solid var(--p3, #0033FB); outline-offset: 3px; }

.p3-flutua-txt {
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -.01em;
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  opacity: 0;
  transition: max-width .28s cubic-bezier(.22,.8,.36,1), opacity .2s;
}

/* Ganha o rótulo depois que a pessoa rola: no topo ele competiria com o CTA do hero. */
.p3-flutua.aberto { gap: 9px; padding: 15px 21px 15px 17px; }
.p3-flutua.aberto .p3-flutua-txt { max-width: 190px; opacity: 1; }

@media (hover: hover) {
  .p3-flutua:hover { gap: 9px; padding: 15px 21px 15px 17px; }
  .p3-flutua:hover .p3-flutua-txt { max-width: 190px; opacity: 1; }
}

/* ─────────── Popup ─────────── */

.p3-fundo {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(16, 19, 27, .5);
  backdrop-filter: blur(3px);
  animation: p3-surge .18s ease;
}

.p3-fundo[hidden] { display: none !important; }

@keyframes p3-surge { from { opacity: 0 } to { opacity: 1 } }

.p3-caixa {
  position: relative;
  width: 100%;
  max-width: 440px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  padding: 30px 26px 26px;
  background: var(--papel, #FEFEFE);
  border-radius: 18px;
  box-shadow: 0 18px 60px rgba(16, 19, 27, .30);
  animation: p3-sobe .22s cubic-bezier(.22,.8,.36,1);
}

@keyframes p3-sobe { from { transform: translateY(14px); opacity: 0 } to { transform: none; opacity: 1 } }

.p3-caixa h2 {
  font-family: var(--d, system-ui, sans-serif);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -.028em;
  line-height: 1.15;
  color: var(--titulo, #6F818B);
  margin: 0 0 6px;
  padding-right: 30px;
}

.p3-sub {
  margin: 0 0 20px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--texto-2, #77878F);
}

.p3-fechar {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--texto-3, #93A2A9);
  cursor: pointer;
}
.p3-fechar:hover { background: var(--papel-2, #F4F6F8); color: var(--texto, #46555E); }
.p3-fechar:focus-visible { outline: 2px solid var(--p3, #0033FB); outline-offset: 1px; }

/* ─────────── Aviso de cookies ─────────── */

.p3-cookies {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 95;
  max-width: 380px;
  padding: 16px 18px;
  background: var(--papel, #FEFEFE);
  border: 1px solid var(--linha, rgba(70,85,94,.13));
  border-radius: 14px;
  box-shadow: 0 8px 30px rgba(16,19,27,.16);
}
.p3-cookies[hidden] { display: none !important; }
.p3-cookies p { margin: 0 0 12px; font-size: 13px; line-height: 1.5; color: var(--texto-2, #77878F); }
.p3-cookies-btn { display: flex; gap: 8px; flex-wrap: wrap; }
.p3-cookies-btn button {
  flex: 1;
  min-height: 40px;
  padding: 9px 14px;
  font-family: var(--d, system-ui, sans-serif);
  font-size: 13.5px;
  font-weight: 600;
  color: #fff;
  background: var(--p3, #0033FB);
  border: 0;
  border-radius: 9px;
  cursor: pointer;
}
.p3-cookies-btn button.sec {
  background: transparent;
  color: var(--texto-2, #77878F);
  border: 1px solid var(--linha, rgba(70,85,94,.13));
}

/* ─────────── Telas estreitas ─────────── */

@media (max-width: 560px) {
  .p3-linha { grid-template-columns: 1fr; gap: 0; }
  .p3-form-inline { padding: 18px; border-radius: 14px; }
  .p3-caixa { padding: 26px 20px 22px; border-radius: 16px; }
  .p3-caixa h2 { font-size: 20px; }

  /* No celular o botão encolhe para o ícone: o rótulo cobriria conteúdo real. */
  .p3-flutua { right: 14px; bottom: 14px; padding: 14px; }
  .p3-flutua.aberto { gap: 0; padding: 14px; }
  .p3-flutua.aberto .p3-flutua-txt,
  .p3-flutua .p3-flutua-txt { max-width: 0; opacity: 0; }

  .p3-cookies { left: 12px; right: 12px; bottom: 12px; max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .p3-fundo, .p3-caixa { animation: none; }
  .p3-flutua, .p3-flutua-txt { transition: none; }
}