/* Vesperi Studio · folha unica das duas versoes de idioma.
 *
 * Uma folha e nao duas: cor, espacamento e tipo sao os mesmos nos dois mercados, e o
 * que muda entre PT e EN e texto, moeda e CTA. Duas copias divergiriam, e a defasada
 * seria a que ninguem esta olhando.
 *
 * Paleta e tipo saem de Marcas/Vesperi/Identidade Visual/IDENTIDADE.md.
 */

@font-face {
  font-family: "Fraunces";
  src: url("/fonts/Fraunces-Variable.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --indigo: #141230;
  --indigo-2: #1c1940;
  --indigo-fundo: #09081a;
  --violeta: #3b2d5e;
  --ambar: #e8a44c;
  --ambar-escuro: #7c4f0c;
  --off: #f5f0e8;
  --dim: rgba(245, 240, 232, 0.7);
  --dim-2: rgba(245, 240, 232, 0.5);
  --linha: rgba(232, 164, 76, 0.24);

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;
  --raio: 14px;
  --dur: 0.35s;
  --mola: cubic-bezier(0.22, 0.61, 0.36, 1);

  --display: "Fraunces", "Playfair Display", Georgia, serif;
  --corpo: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, Consolas, "Courier New", monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--indigo-fundo);
  color: var(--off);
  font-family: var(--corpo);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; }
img { max-width: 100%; display: block; }
:focus-visible { outline: 2px solid var(--ambar); outline-offset: 3px; border-radius: 4px; }

.wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 var(--s5); }
.pular {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ambar); color: #241703; padding: var(--s3) var(--s5); border-radius: 0 0 8px 0;
}
.pular:focus { left: 0; }

/* ------------------------------------------------------------------ cabecalho */

header {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  background: rgba(9, 8, 26, 0.78);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(245, 240, 232, 0.07);
}
.hd { display: flex; align-items: center; gap: var(--s4); height: 62px; }
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.marca svg { width: 28px; height: 28px; flex: none; }
.marca b { font-family: var(--display); font-weight: 500; font-size: 18px; letter-spacing: 0.04em; }
.marca span { font-size: 9.5px; letter-spacing: 0.3em; color: var(--ambar); font-weight: 700; }
nav { margin-left: auto; display: flex; align-items: center; gap: var(--s5); }
nav a.lnk { color: var(--dim); text-decoration: none; font-size: 14.5px; transition: color var(--dur); }
nav a.lnk:hover { color: var(--off); }

/* O par EN/PT do cabecalho saiu em 02/08/2026 e o CSS dele foi junto, para nao ficar
   regra viva sobre marcacao que nao existe mais.
 *
 * A saida de idioma continua existindo, pequena, no rodape, e ela e obrigatoria:
 * deteccao sem saida vira armadilha para quem quer a outra versao de proposito. O que
 * mudou foi o peso dela na tela, nao a existencia. */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none; border: 0; cursor: pointer; font-family: inherit;
  background: var(--ambar); color: #241703; font-weight: 650;
  padding: 12px 24px; border-radius: 999px; font-size: 15px; line-height: 1.2;
  transition: transform var(--dur) var(--mola), box-shadow var(--dur);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(232, 164, 76, 0.36); }
.btn.vazado { background: transparent; color: var(--off); border: 1px solid var(--linha); }
.btn.vazado:hover { border-color: var(--ambar); box-shadow: none; }
/* O botao de WhatsApp usa a cor da marca, e nao o verde do WhatsApp. Decidido pelo Og
   em 02/08/2026.
 *
 * O verde era o unico lugar da pagina com uma cor que nao e da Vesperi, e ele aparecia
 * cinco vezes na versao PT, entao a cor de outra empresa acabava sendo a cor mais
 * repetida do site. Quem diz que o canal e WhatsApp passou a ser o SIMBOLO, que
 * informa a mesma coisa sem disputar a identidade.
 *
 * A classe continua existindo porque ela ainda quer dizer "este botao vai para o
 * WhatsApp", e e ela que dimensiona o icone. */
.btn.zap { gap: 9px; }

/* Icone dentro de botao. currentColor para servir aos dois fundos, o ambar e o vazado,
   sem uma regra por combinacao. */
.ico { width: 1.15em; height: 1.15em; flex: 0 0 auto; fill: currentColor; }
@media (max-width: 720px) {
  nav a.lnk { display: none; }
  nav { gap: var(--s3); }
  .hd { height: 56px; gap: var(--s3); }
  .btn { padding: 10px 16px; font-size: 14px; }
  /* O botao do cabecalho quebrava em duas linhas e comia a barra inteira. Ele nao
     pode envolver: a barra e fixa, e barra que engorda come a primeira dobra. */
  header .btn { white-space: nowrap; padding: 9px 14px; font-size: 13.5px; }
  .marca b { font-size: 16px; }
  .marca span { font-size: 8.5px; letter-spacing: 0.26em; }
}
@media (max-width: 380px) { header .btn { display: none; } }

/* ------------------------------------------------------------------ o cinema
 *
 * O palco e sticky e a margem negativa igual a altura dele e o que puxa os atos para
 * CIMA do palco. Sem ela os atos entrariam em fluxo, ou seja embaixo, e o video ficaria
 * numa tela que ninguem ve junto com texto nenhum. */

[data-cinema] { position: relative; background: var(--indigo-fundo); }
[data-palco] {
  position: sticky; top: 0; z-index: 0;
  height: 100vh; height: 100svh;
  margin-bottom: -100vh; margin-bottom: -100svh;
  overflow: hidden;
}
[data-palco] #tela, [data-palco] .cartaz {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}
#tela { opacity: 0; transition: opacity 0.5s ease; }
[data-cinema][data-modo="canvas"] #tela { opacity: 1; }
[data-cinema][data-modo="canvas"] .cartaz { opacity: 0; }
.cartaz { transition: opacity 0.5s ease; }

/* O veu existe porque o ato 5 termina em off-white. Sem ele o texto claro dos atos
   1 a 4 continuaria claro por cima de um fundo que virou claro, e sumiria. */
[data-palco]::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(9, 8, 26, 0.82) 0%, rgba(9, 8, 26, 0.12) 32%, rgba(9, 8, 26, 0.1) 62%, rgba(9, 8, 26, 0.7) 100%);
}

.ato {
  position: relative; z-index: 1;
  min-height: 100vh; min-height: 100svh;
  display: flex;
  /* `safe center` centraliza quando cabe e alinha no topo quando NAO cabe.
   *
   * Com `center` puro, ato mais alto que a tela transborda para os dois lados, e o que
   * some primeiro e o topo: o rotulo e a manchete entram por baixo do cabecalho fixo.
   * Isso e pior que rolar um pouco mais, porque o visitante nao tem como recuperar o
   * que ficou escondido, ele nem sabe que existe.
   *
   * A linha de cima e o antigo para quem nao entende `safe`, que a ignora inteira.
   * Medido em 02/08/2026, quando o ato 3 passou a ter 8 pecas e uma nota, e continuou
   * passando da tela em celular curto mesmo depois de quatro cortes. Espremer tipo e
   * imagem para ganhar 6px estraga a peca; deixar rolar 25px nao estraga nada. */
  align-items: center;
  align-items: safe center;
  /* O topo abre espaco para a barra fixa. Sem isso o rotulo do ato 1 nasce embaixo
     dela em tela baixa, e some. */
  padding: calc(62px + var(--s8)) 0 var(--s8);
}
@media (max-width: 720px) { .ato { padding: calc(56px + var(--s6)) 0 var(--s6); } }
.ato > .wrap { transition: opacity 0.75s var(--mola), transform 0.75s var(--mola); }
.ato:not([data-dentro]) > .wrap { opacity: 0; transform: translateY(26px); }
.ato[data-dentro] > .wrap { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .ato:not([data-dentro]) > .wrap { opacity: 1; transform: none; }
}

/* O ultimo ato acontece em cima do estouro em off-white, entao ele inverte. */

/* O lava-luz, e ele existe por um defeito medido em 02/08/2026, com o video de verdade
   na tela pela primeira vez.

   A inversao acima assumia que, quando o ato 5 aparece, o quadro INTEIRO ja tinha
   estourado em off-white. O video mostrou que nao: no 16:9 a luminancia media so cruza
   para claro por volta de 96% do curso, e entre 84 e 90% a parte clara e a porta no
   meio do quadro. A metade esquerda continua escura, que e exatamente onde a manchete
   mora, entao texto escuro sobre fundo escuro e a manchete sumia.

   No 9:16 o mesmo instante ja esta claro, entao o defeito era SO do desktop e nao
   aparecia no celular. Confiar no brilho de um pedaco especifico do quadro e fragil de
   qualquer jeito: o video e generativo e a proxima versao dele muda isso de novo.

   Onde o fundo ja e off-white este lava e invisivel, off-white sobre off-white. Onde
   esta escuro ele garante o campo claro que o texto escuro precisa. Uma regra so
   resolve as duas orientacoes, e ela nao volta a quebrar se o video mudar. */
.ato.claro::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  /* Radial e nao linear, e isso foi medido tambem: com gradiente linear e inset 0 o
     lava corta seco na borda de cima do bloco e desenha uma LINHA HORIZONTAL reta
     atravessando o quadro, que num plano continuo le como emenda de video. O radial
     nao tem borda em lado nenhum. */
  background: radial-gradient(122% 92% at 14% 58%,
    rgba(245, 240, 232, 0.96) 0%,
    rgba(245, 240, 232, 0.87) 36%,
    rgba(245, 240, 232, 0.38) 68%,
    rgba(245, 240, 232, 0) 100%);
}

.ato.claro { color: var(--indigo); }
.ato.claro .rotulo { color: var(--ambar-escuro); }
.ato.claro p { color: rgba(20, 18, 48, 0.74); }
.ato.claro .btn.vazado { color: var(--indigo); border-color: rgba(20, 18, 48, 0.22); }

/* ------------------------------------------------------------------ tipo */

.rotulo {
  font-size: 11.5px; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--ambar); font-weight: 700; margin-bottom: var(--s5);
}
h1 {
  font-family: var(--display); font-weight: 480;
  font-size: clamp(40px, 7.4vw, 82px); line-height: 1.04;
  letter-spacing: -0.015em; max-width: 13ch;
  text-wrap: balance;
}
h2 {
  font-family: var(--display); font-weight: 480;
  font-size: clamp(29px, 4.6vw, 48px); line-height: 1.12;
  letter-spacing: -0.012em; max-width: 22ch;
  text-wrap: balance;
}
h3 { font-family: var(--display); font-weight: 500; font-size: 20px; line-height: 1.3; }
.sub { margin-top: var(--s5); max-width: 52ch; font-size: clamp(16.5px, 2vw, 19px); color: var(--dim); }
.ctas { margin-top: var(--s6); display: flex; gap: var(--s4); flex-wrap: wrap; }

/* ------------------------------------------------------------------ ato 2 · as tres perguntas */

.tres { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); margin-top: var(--s7); }
.tres > div {
  min-width: 0; padding: var(--s5); border-radius: var(--raio);
  background: rgba(28, 25, 64, 0.62);
  border: 1px solid rgba(245, 240, 232, 0.08);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.tres .num { font-family: var(--mono); color: var(--ambar); font-size: 12.5px; margin-bottom: var(--s3); }
.tres p { color: var(--dim); font-size: 15.5px; margin-top: var(--s2); }
@media (max-width: 800px) {
  .tres { grid-template-columns: 1fr; gap: var(--s3); margin-top: var(--s5); }
  .tres > div { padding: var(--s4); }
  .tres h3 { font-size: 18px; }
  .tres p { font-size: 14.5px; line-height: 1.55; }
}

/* ------------------------------------------------------------------ ato 3 · os paineis
 *
 * Os paineis do portfolio SAO os paineis do video. No desktop viram grade, no celular
 * viram trilho com encaixe: grade de 4 no celular empilha em coluna longa e o ato
 * estoura a altura da tela, que e o unico jeito de quebrar o cinema. */

.trilho {
  margin-top: var(--s6);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s4);
}
.painel {
  display: block; text-decoration: none; min-width: 0;
  border-radius: var(--raio); overflow: hidden;
  background: rgba(20, 18, 48, 0.72);
  border: 1px solid var(--linha);
  transition: transform var(--dur) var(--mola), border-color var(--dur), box-shadow var(--dur);
}
.painel:hover { transform: translateY(-5px); border-color: var(--ambar); box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5); }
.painel .capa { position: relative; aspect-ratio: 16 / 10; background: var(--indigo-2); overflow: hidden; }
.painel .capa img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.painel .txt { padding: var(--s4); }
/* O rotulo "Cliente ·" e "Conceito ·" saiu de cada cartao em 02/08/2026, por decisao do
   Og, e o CSS dele foi junto. Ele repetia a palavra "Conceito" seis vezes em oito
   cartoes, que e a palavra que menos ajuda a vender, dita no lugar de mais destaque.
   A distincao passou a ser uma nota de rodape, abaixo, dita uma vez so. */
.painel h3 { margin: 0 0 var(--s1); font-size: 17.5px; }
.painel p { font-size: 13.5px; color: var(--dim-2); line-height: 1.55; }

@media (max-width: 980px) {
  .trilho {
    display: flex; gap: var(--s3);
    overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    /* sangra ate a borda da tela e devolve o respiro por padding, senao o trilho
       parece cortado no meio em vez de continuar */
    margin-inline: calc(var(--s5) * -1); padding: 0 var(--s5) var(--s3);
    scrollbar-width: none;
  }
  .trilho::-webkit-scrollbar { display: none; }
  .painel { flex: 0 0 72%; max-width: 280px; scroll-snap-align: center; }
  /* 4/5 fazia o cartao passar de 500px de altura e o ato inteiro estourar a tela.
     3/4 ainda mostra o heroi da peca, que e o que prova o trabalho. */
  .painel .capa { aspect-ratio: 3 / 4; }
  .painel .txt { padding: var(--s3) var(--s4) var(--s4); }
  .painel h3 { font-size: 16.5px; }
  .painel p { font-size: 13px; }
  .painel:hover { transform: none; }
}
.dica-trilho { display: none; margin-top: var(--s3); font-size: 12.5px; color: var(--dim-2); }
@media (max-width: 980px) { .dica-trilho { display: block; } }

/* A nota que separa conceito de cliente. Ela e pequena de proposito: e informacao de
   honestidade, nao argumento de venda, e o argumento de venda e a pagina em si.
   Dita uma vez aqui, ela substitui oito rotulos repetidos la em cima. */
.nota-trilho {
  margin-top: var(--s4); max-width: 76ch;
  font-size: 12.5px; line-height: 1.6; color: var(--dim-2);
}

/* O ato 3 e o mais alto da pagina, e ato que passa da altura da tela quebra o ritmo do
   cinema: o conteudo comeca a rolar por baixo do cabecalho fixo em vez de o ato inteiro
   ser um plano, e como .ato centraliza, o rotulo do topo e o primeiro a sumir.
 *
 * Medido em 02/08/2026, e o defeito e ANTERIOR a esta leva: com 7 pecas e sem a nota
 * ele ja passava 33px. A oitava peca nao somou nada, porque 7 e 8 dao as mesmas duas
 * fileiras, e a nota somou 56.
 *
 * Sao quatro cortes pequenos em vez de um grande, para nenhum deles aparecer sozinho.
 * O maior deles e a manchete: ela quebrava em duas linhas por causa do `max-width: 22ch`
 * geral do h2, e duas linhas custavam 54px sozinhas. */
@media (min-width: 981px) {
  #work h2, #trabalhos h2 { max-width: none; }
  .painel .capa { aspect-ratio: 16 / 9; }
  .nota-trilho { margin-top: var(--s3); }
  #work, #trabalhos { padding-bottom: var(--s6); }
}

/* Tela larga e BAIXA, que e o notebook de 1366x768: nem os cortes acima salvam, porque
   o que falta ali e altura e o conteudo tem altura fixa. O trilho vira o mesmo
   carrossel horizontal do celular, que ja existe, ja foi testado, e resolve por
   construcao, porque uma fileira sempre cabe.
 *
 * A consulta e por ALTURA e nao por largura, porque e altura que falta. */
@media (min-width: 981px) and (max-height: 820px) {
  .trilho {
    display: flex; gap: var(--s4);
    overflow-x: auto; scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .trilho::-webkit-scrollbar { display: none; }
  .painel { flex: 0 0 300px; scroll-snap-align: center; }
  .dica-trilho { display: block; }
}

/* Celular pequeno, 360px de largura, que ainda e comum em Android de entrada. Medido:
   o ato passava 35px na versao PT, cujo texto e mais longo. A capa de 3/4 e o maior
   pedaco ali, entao ela encolhe um pouco e a nota fica mais discreta.
   5/6 e nao 4/5 porque 4/5 ainda deixava a PT 5px fora, e 5px fora e fora. */
@media (max-width: 400px) {
  .painel .capa { aspect-ratio: 5 / 6; }
  .nota-trilho { margin-top: 10px; font-size: 11.5px; }
}

/* Celular CURTO, o iPhone SE de 375x667 e parentes. Ali falta altura, nao largura, e a
   capa e o maior pedaco. 1/1 ainda mostra o heroi da peca, que e o que ela existe para
   provar. Isto nao faz o ato caber por completo nos 667px, e nao deve mesmo: o resto do
   caminho e o `safe center` la em cima, que troca conteudo escondido por um pouco mais
   de rolagem. */
@media (max-width: 980px) and (max-height: 720px) {
  .painel .capa { aspect-ratio: 1 / 1; }
  .ato { padding-top: 70px; padding-bottom: var(--s5); }
  .nota-trilho { margin-top: 8px; }
}

/* ------------------------------------------------------------------ ato 4 · o preco */

.selo { display: inline-flex; align-items: baseline; gap: 2px; margin-top: var(--s5); }
.selo small { font-family: var(--display); font-size: clamp(22px, 3vw, 32px); color: var(--ambar); }
.selo b { font-family: var(--display); font-weight: 500; font-size: clamp(64px, 12vw, 128px); line-height: 1; letter-spacing: -0.03em; }
.selo-nota { margin-top: var(--s3); color: var(--dim); font-size: 15.5px; }

/* ------------------------------------------------------------------ secoes planas */

/* z-index 1 aqui nao e enfeite, e o que impede o video de pintar por cima da pagina
   inteira abaixo do cinema. Medido em 02/08/2026.

   `margin-bottom: -100svh` no palco zera a CAIXA DE MARGEM dele, e o sticky prende a
   caixa de margem e nao a caixa de borda. Com caixa de margem de altura zero a
   restricao nunca morde, entao o palco continua grudado por uma tela inteira DEPOIS
   do fim do cinema: medido em top=-212 com o cinema ja terminado, ou seja 688px de
   video ainda na tela por cima da oferta.

   E ele ganha a ordem de pintura porque e posicionado, z-index 0, e estas secoes eram
   estaticas: em CSS o posicionado pinta depois do estatico, mesmo com fundo opaco do
   outro lado. `elementsFromPoint` confirmou canvas#tela ACIMA de section#offer.

   Isso produzia tres sintomas que pareciam tres defeitos: o titulo do contato cortado
   pela metade, os botoes da direita sumindo com a rolagem, e a oferta com o fundo
   solido trocado por video borrado. */
section.plana, footer { position: relative; z-index: 1; }

section.plana { padding: var(--s9) 0; }
.papel { background: var(--off); color: var(--indigo); }
.papel .rotulo { color: var(--ambar-escuro); }
.papel .sub, .papel p { color: rgba(20, 18, 48, 0.74); }
.escura { background: var(--indigo); border-top: 1px solid rgba(245, 240, 232, 0.06); }

.oferta { display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--s7); margin-top: var(--s7); align-items: start; }
.oferta ul { list-style: none; display: grid; gap: var(--s4); }
.oferta li { position: relative; padding-left: 30px; color: rgba(20, 18, 48, 0.86); }
.oferta li::before {
  content: ""; position: absolute; left: 0; top: 10px;
  width: 11px; height: 11px; border-radius: 50%;
  border: 2px solid var(--ambar-escuro);
}
.fatura { background: var(--indigo); color: var(--off); border-radius: var(--raio); padding: var(--s6); }
.fatura .tag { font-size: 11px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--ambar); font-weight: 700; }
.fatura .preco { font-family: var(--display); font-size: 62px; line-height: 1.05; margin: var(--s3) 0 var(--s2); }
.fatura .preco small { font-size: 26px; color: var(--ambar); }
.fatura .flat { color: var(--dim); font-size: 15px; }
.fatura .anc { color: var(--dim-2); font-size: 13.5px; margin: var(--s4) 0 var(--s5); }
.fatura .btn { width: 100%; }
.cuidado { margin-top: var(--s7); padding-top: var(--s5); border-top: 1px solid rgba(20, 18, 48, 0.12); max-width: 68ch; font-size: 15.5px; }
@media (max-width: 860px) { .oferta { grid-template-columns: 1fr; gap: var(--s6); } .fatura { padding: var(--s5); } }

.colunas { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s7); margin-top: var(--s6); }
.colunas p + p { margin-top: var(--s4); }
@media (max-width: 860px) { .colunas { grid-template-columns: 1fr; gap: var(--s5); } }

.faq-lista { margin-top: var(--s6); max-width: 72ch; }
.faq-lista details { border-bottom: 1px solid rgba(245, 240, 232, 0.1); padding: var(--s4) 0; }
.faq-lista summary { cursor: pointer; font-weight: 620; font-size: 16.5px; list-style: none; display: flex; gap: var(--s4); align-items: baseline; }
.faq-lista summary::-webkit-details-marker { display: none; }
.faq-lista summary::after { content: "+"; margin-left: auto; color: var(--ambar); font-size: 22px; line-height: 1; }
.faq-lista details[open] summary::after { content: "\2013"; }
.faq-lista details p { margin-top: var(--s3); color: var(--dim); font-size: 15.5px; }
.papel .faq-lista details { border-color: rgba(20, 18, 48, 0.14); }

/* A RESPOSTA do FAQ, e ela estava invisivel nas duas linguas ate 02/08/2026.

   `.faq-lista details p` pinta com var(--dim), que e off-white, e o bloco mora numa
   secao .papel, que tem fundo off-white. Texto da cor exata do fundo.

   Nao era falta de regra, era especificidade: `.papel p` vale (0,1,1) e
   `.faq-lista details p` vale (0,1,2), entao a regra clara ganhava da escura. Por isso
   o conserto precisa das duas classes, (0,2,2), e nao de trocar a cor la em cima: a
   base continua servindo o FAQ sobre fundo escuro.

   O sintoma era pergunta aberta com espaco reservado e vazio, que parece conteudo
   faltando no HTML e nao problema de cor. */
.papel .faq-lista details p { color: rgba(20, 18, 48, 0.74); }

/* ------------------------------------------------------------------ formulario (so EN) */

.form-caixa {
  margin-top: var(--s6); background: var(--indigo-2);
  border: 1px solid rgba(245, 240, 232, 0.09); border-radius: var(--raio); padding: var(--s6);
}
.campos { display: grid; gap: var(--s4); }
.linha-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
@media (max-width: 620px) { .linha-2 { grid-template-columns: 1fr; } .form-caixa { padding: var(--s5); } }
.campo label { display: block; font-size: 12.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--dim-2); font-weight: 700; margin-bottom: var(--s2); }
.campo input, .campo textarea {
  width: 100%; font-family: inherit; font-size: 16px; /* 16px trava o zoom automatico do iOS */
  color: var(--off); background: rgba(9, 8, 26, 0.7);
  border: 1px solid rgba(245, 240, 232, 0.14); border-radius: 10px;
  padding: 13px 15px; transition: border-color var(--dur);
}
.campo textarea { min-height: 108px; resize: vertical; }
.campo input:focus, .campo textarea:focus { border-color: var(--ambar); outline: none; }
.campo input::placeholder, .campo textarea::placeholder { color: rgba(245, 240, 232, 0.34); }
/* O honeypot some para gente e existe para robo. display:none seria pulado por parte
   dos bots, entao ele sai do fluxo em vez de deixar de existir. */
.mel { position: absolute; left: -5000px; width: 1px; height: 1px; overflow: hidden; }
.form-pe { margin-top: var(--s5); display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; }
.form-nota { font-size: 13px; color: var(--dim-2); max-width: 42ch; }
.recado { margin-top: var(--s4); padding: var(--s4); border-radius: 10px; font-size: 15px; display: none; }
.recado[data-estado="ok"] { display: block; background: rgba(37, 211, 102, 0.12); border: 1px solid rgba(37, 211, 102, 0.4); }
.recado[data-estado="erro"] { display: block; background: rgba(232, 92, 76, 0.12); border: 1px solid rgba(232, 92, 76, 0.44); }
button[disabled] { opacity: 0.55; cursor: progress; }

/* ------------------------------------------------------------------ rodape */

footer { background: var(--indigo-fundo); border-top: 1px solid rgba(245, 240, 232, 0.07); padding: var(--s7) 0; }
.pe { display: flex; gap: var(--s5); align-items: center; flex-wrap: wrap; font-size: 13.5px; color: var(--dim-2); }
.pe a { text-decoration: none; }
.pe a:hover { color: var(--off); }
.pe .dir { margin-left: auto; display: flex; gap: var(--s5); }
@media (max-width: 720px) { .pe .dir { margin-left: 0; } }

[data-entra] { transition: opacity 0.7s var(--mola), transform 0.7s var(--mola); }
[data-entra]:not([data-dentro]) { opacity: 0; transform: translateY(20px); }
@media (prefers-reduced-motion: reduce) { [data-entra]:not([data-dentro]) { opacity: 1; transform: none; } }

/* ---------------------------------------------------- o botao flutuante */

/* z-index 59, um abaixo do cabecalho fixo, que e 60. Assim ele nunca passa por cima da
   barra ao rolar, e continua acima de todo o resto da pagina, que para no 1. */
.flutua {
  position: fixed; z-index: 59;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 22px; border: 0; border-radius: 999px; cursor: pointer;
  font-family: var(--corpo); font-size: 15px; font-weight: 650; line-height: 1.2;
  background: var(--ambar); color: #241703; text-decoration: none;
  box-shadow: 0 12px 34px rgba(9, 8, 26, 0.52), 0 0 0 1px rgba(232, 164, 76, 0.45);
  transition: transform var(--dur) var(--mola), opacity var(--dur), visibility var(--dur);
}
.flutua .ico { width: 20px; height: 20px; }
.flutua:hover { transform: translateY(-2px); }

/* Ele some quando a secao de contato esta na tela. Botao flutuante de contato por cima
   do proprio formulario de contato oferece duas vezes a mesma coisa e ainda tapa o
   campo de baixo no celular. */
.flutua[data-oculto] { opacity: 0; visibility: hidden; transform: translateY(14px); }

/* No celular vira circulo com o simbolo. O rotulo custa metade da largura da tela e a
   pessoa ja sabe o que um botao redondo no canto faz. */
@media (max-width: 560px) {
  .flutua { padding: 0; width: 56px; height: 56px; gap: 0; }
  .flutua .txt { display: none; }
  .flutua .ico { width: 25px; height: 25px; }
}
@media (prefers-reduced-motion: reduce) { .flutua { transition: opacity var(--dur); } }

/* ---------------------------------------------------- a janela de contato */

/* <dialog> nativo, e nao div com overlay. Ele entra na top layer, entao nao disputa
   z-index com nada, e traz de graca o que uma janela caseira erra: foco preso dentro,
   Esc fechando, e o resto da pagina marcado como inerte para leitor de tela. */
dialog.janela {
  width: min(560px, calc(100vw - 32px)); max-height: min(88vh, 760px);
  /* `margin: auto` e o que centraliza um <dialog> modal, e ele vem do navegador. O
     reset desta folha zera margem em tudo, entao sem esta linha a janela nasce colada
     no canto superior esquerdo. Nao e detalhe de gosto: colada no canto ela cobre o
     cabecalho e sobra um vazio do lado, que parece layout quebrado e nao janela. */
  margin: auto;
  padding: 0; border: 1px solid rgba(232, 164, 76, 0.22); border-radius: var(--raio);
  background: var(--indigo-2); color: var(--off);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.55);
  overflow: auto; overscroll-behavior: contain;
}
dialog.janela::backdrop { background: rgba(9, 8, 26, 0.74); backdrop-filter: blur(3px); }
.janela-topo {
  display: flex; align-items: flex-start; gap: var(--s4);
  padding: var(--s6) var(--s6) 0;
}
.janela-topo h3 { flex: 1; }
.janela-corpo { padding: var(--s5) var(--s6) var(--s6); }
.fechar {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(245, 240, 232, 0.16); background: transparent;
  color: var(--dim); font-size: 19px; line-height: 1; font-family: var(--corpo);
  transition: color var(--dur), border-color var(--dur);
}
.fechar:hover { color: var(--off); border-color: var(--ambar); }

/* A janela reusa .form-caixa, entao ela nao pode trazer a moldura de novo. */
dialog.janela .form-caixa { background: transparent; border: 0; padding: 0; }