/* ═══════════════════════════════════════════════════════════════════════════
   O FORMULÁRIO · os primitivos, e a janela de reserva
   ═══════════════════════════════════════════════════════════════════════════

   POR QUE ISTO SAIU DO `paginas.css`. O formulário nasceu no `/contact`, e
   por isso morava na folha das páginas internas. Em 22/09/2026 ele passou a
   existir também dentro da janela de reserva, nos cinco encaixes da We
   Travel, e DUAS dessas cinco páginas não carregam o `paginas.css`: a inicial
   e a de pesca do Roosevelt.

   Havia dois caminhos. Carregar 42 KB de folha de páginas internas na home,
   que é justamente a página onde a primeira pintura mais importa, ou copiar
   os primitivos para um segundo lugar. Os dois estão errados pelo mesmo
   motivo, e a saída é a terceira: o que é de formulário vira folha de
   formulário, e cada página carrega o que usa.

   O que veio para cá é exatamente o que estava lá, sem uma linha de desenho
   diferente. O que é DO CONTATO, como a grade de duas colunas e o cartão
   grudado ao lado, continua no `paginas.css`, porque é daquela página. */

@layer kng-projeto {

.campo { border: 0; margin: 0 0 clamp(32px, 4vw, 48px); padding: 0; }
.campo__r { display: flex; align-items: baseline; gap: var(--esp-md);
  font-family: var(--fam-display); font-weight: 800;
  font-size: clamp(18px, 2vw, 24px); color: var(--texto-forte);
  margin-block-end: var(--esp-md); padding: 0; }
/* A DICA VIVE NA PRÓPRIA PERGUNTA. "Pick one, or more than one" fora dela
   vira instrução solta; dentro do `<legend>` ela é lida junto pelo leitor de
   tela, que é quando a informação serve. */
.campo__dica { font-family: var(--fonte-corpo, inherit); font-style: normal;
  font-weight: 400; font-size: var(--texto-label); letter-spacing: .04em;
  text-transform: none; color: var(--texto-sutil); margin-inline-start: auto; }
.campo__nota { font-size: var(--texto-label); color: var(--acento-sobre-claro);
  margin: var(--esp-md) 0 0; letter-spacing: .02em; }

.campo__n { display: inline-grid; place-items: center; flex: 0 0 auto;
  inline-size: 26px; block-size: 26px; border-radius: 50%;
  background: var(--acento-sobre-claro); color: var(--tinta-sobre-acento-marca);
  font-family: var(--fonte-corpo); font-size: 13px; font-weight: 600; }

.opcoes { display: flex; flex-wrap: wrap; gap: var(--esp-sm); }
/* A OPÇÃO É A ETIQUETA INTEIRA, e o `input` é escondido SEM SAIR DA ÁRVORE:
   `display: none` num rádio tira ele do foco por teclado e do leitor de tela.
   `appearance: none` com tamanho zero mantém os dois e deixa o desenho por
   conta do `<span>`. */
.opcao { position: relative; display: inline-flex; align-items: center;
  min-block-size: var(--alvo-toque); padding: 10px var(--esp-md);
  border: 1px solid color-mix(in srgb, var(--borda) 36%, transparent);
  border-radius: var(--raio-pill); cursor: pointer;
  background: var(--fundo-superficie);
  transition: border-color var(--tempo-micro) var(--curva-entrada),
              background var(--tempo-micro) var(--curva-entrada); }
.opcao input { position: absolute; inline-size: 1px; block-size: 1px;
  opacity: 0; margin: 0; }
.opcao span { font-size: var(--texto-ficha); color: var(--texto-medio); }
.opcao b { color: var(--texto-forte); font-weight: 600;
  margin-inline-end: 6px; }
.opcao:hover { border-color: var(--acento-sobre-claro); }
.opcao:has(input:checked) { border-color: var(--acento-sobre-claro);
  background: color-mix(in srgb, var(--acento) 12%, var(--fundo-superficie)); }
/* O anel de foco vai na ETIQUETA, porque o `input` não tem tamanho para
   desenhar um. Sem isto, navegar por teclado não mostra onde se está. */
.opcao:has(input:focus-visible) { outline: 2px solid var(--acento-sobre-claro);
  outline-offset: 2px; }

.dupla { display: grid; grid-template-columns: 1fr 1fr; gap: var(--esp-md); }
@media (max-width: 560px) { .dupla { grid-template-columns: 1fr; } }
.linha-campo { display: block; margin-block-end: var(--esp-md); }
.linha-campo > span { display: block; font-size: var(--texto-label);
  font-weight: 600; text-transform: uppercase; letter-spacing: .1em;
  color: var(--texto-sutil); margin-block-end: var(--esp-sm); }
.linha-campo i { font-style: normal; text-transform: none; letter-spacing: normal;
  opacity: .8; }
.linha-campo input, .linha-campo textarea {
  inline-size: 100%; min-block-size: var(--alvo-toque);
  padding: 12px var(--esp-md); font: inherit; font-size: var(--texto-body-m);
  color: var(--texto-forte); background: var(--fundo-superficie);
  border: 1px solid color-mix(in srgb, var(--borda) 36%, transparent);
  border-radius: var(--raio-sm);
  transition: border-color var(--tempo-micro) var(--curva-entrada); }
.linha-campo textarea { resize: vertical; line-height: 1.6; }
.linha-campo input:focus-visible, .linha-campo textarea:focus-visible {
  outline: 2px solid var(--acento-sobre-claro); outline-offset: 1px;
  border-color: var(--acento-sobre-claro); }

.form__fim { display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--esp-md) var(--esp-lg); margin-block-start: var(--esp-lg); }
.form__micro { color: var(--texto-sutil); margin: 0; }
.form__lgpd { color: var(--texto-sutil); max-inline-size: 60ch;
  margin-block-start: var(--esp-lg); }
.form__aviso { margin-block-start: var(--esp-lg); padding: var(--esp-md);
  border-radius: var(--raio-md);
  background: color-mix(in srgb, var(--acento) 12%, var(--fundo-superficie));
  border: 1px solid var(--acento-sobre-claro);
  color: var(--texto-forte); font-size: var(--texto-ficha); }
.form__aviso[hidden] { display: none; }

/* `button` NÃO HERDA FONTE NEM COR, e a classe `.acao` foi escrita para `<a>`.
   Este é o primeiro `<button>` do site, e sem estas quatro linhas ele sairia
   na fonte do sistema, com a borda do sistema. */
.form .acao { font: inherit; font-size: var(--texto-label); font-weight: 600;
  text-transform: uppercase; letter-spacing: .12em;
  border: 0; cursor: pointer; }

/* ── A JANELA DE RESERVA ─────────────────────────────────────────────────

   `<dialog>` NATIVO, e não um `<div>` com `position: fixed`. Ele traz de
   graça as três coisas que uma janela improvisada sempre esquece: o foco
   fica preso dentro dela enquanto está aberta, `Esc` fecha, e o resto da
   página vira inerte para leitor de tela. Escrever isso à mão são quarenta
   linhas de JavaScript que erram no primeiro navegador diferente.

   O BOTÃO É UM LINK PARA O `/contact`, e o JavaScript o promove a janela.
   Sem script, ou em navegador sem `showModal`, o clique leva à página de
   contato, que é exatamente o que ele fazia antes. Nada depende de JS para
   funcionar; o JS só encurta o caminho. */
.reserva {
  inline-size: min(560px, calc(100vw - 2 * var(--margem)));
  max-block-size: min(84vh, 760px);
  padding: 0; border: 0; border-radius: var(--raio-lg);
  background: var(--fundo-superficie); color: var(--texto-forte);
  box-shadow: 0 40px 80px -28px rgb(13 13 13 / .55);
  overflow: hidden;
}
/* A COLUNA FLEX SÓ EXISTE ABERTA, e isso não é detalhe: `display` na regra
   sem estado venceria o `display: none` que o navegador dá a um `<dialog>`
   fechado, e a janela ficaria visível na página o tempo inteiro. */
.reserva[open] { display: flex; flex-direction: column; }
/* `min-block-size: 0` É O QUE FAZ O MIOLO ROLAR. Item de flex nasce com
   mínimo automático, ou seja, não encolhe abaixo do próprio conteúdo: o
   corpo empurrava a janela para além dos 760 px, o `overflow: hidden` do
   contêiner cortava, e o botão Send ficava metade fora. Medido em 1440 por
   1000, com a janela pedindo 760 e o conteúdo pedindo mais.

   E a conta não aparecia no medidor errado: comparar `scrollHeight` com
   `clientHeight` DO CORPO devolve igual, porque sem o mínimo zerado ele
   simplesmente cresce. Quem precisa ser medido é a janela contra a tela. */
.reserva__corpo { flex: 1 1 auto; min-block-size: 0; }
.reserva::backdrop { background: rgb(13 13 13 / .62); }

/* ── A JANELA NÃO PERTENCE À SEÇÃO QUE A HOSPEDA ─────────────────────────

   Ela nasce dentro do `<section class="faixa sobre-escuro" id="booking">`,
   porque é ali que o encaixe fica e é dali que o montador injeta a parte.
   Na tela ela não está lá: `<dialog>` modal sobe para a camada do topo e
   desenha por cima de tudo, sobre papel branco.

   O CSS não sabe disso. `.faixa :is(h1,h2,h3)` pinta título de branco, e
   `.faixa .ficha` pinta o apoio de quase branco, porque nas seções verdes é
   exatamente isso que tem de acontecer. Dentro da janela, sobre branco, o
   título saiu em 1,12:1 e as duas linhas de apoio em 1,10:1 — invisíveis.

   Medido nas cinco: reprovava em QUATRO. A inicial passava porque o
   calendário dela é claro e não carrega `faixa`, ou seja, o defeito se
   escondia justamente na página que se olha primeiro.

   O prefixo é `dialog.reserva` e não `.reserva`: elemento mais classe dá um
   degrau a mais de especificidade, e vence `.faixa :is(...)` pela conta, e
   não pela ordem em que as folhas forem carregadas. */
dialog.reserva :is(h1, h2, h3) { color: var(--texto-forte); }
dialog.reserva .ficha { color: var(--texto-sutil); }
dialog.reserva .corpo { color: var(--texto-medio); }
dialog.reserva .rotulo { color: var(--acento-sobre-claro); }
dialog.reserva .sinal { color: var(--acento-sobre-claro); }
@supports (backdrop-filter: blur(1px)) {
  .reserva::backdrop { backdrop-filter: blur(6px); }
}

/* O CABEÇALHO NÃO ROLA, e o miolo sim. Numa janela de 84vh com quatro
   perguntas, o título saindo de vista tira a única referência de onde a
   pessoa está. */
.reserva__topo { position: sticky; inset-block-start: 0; z-index: 2;
  display: flex; align-items: flex-start; gap: var(--esp-md);
  padding: clamp(22px, 3vw, 32px) clamp(22px, 3vw, 32px) var(--esp-lg);
  background: var(--fundo-superficie);
  border-block-end: 1px solid color-mix(in srgb, var(--borda) 26%, transparent); }
.reserva__topo h2 { font-family: var(--fam-display); font-weight: 800;
  font-size: clamp(19px, 2.4vw, 26px); line-height: 1.12; margin: 0 auto 0 0;
  letter-spacing: -.01em; }
.reserva__topo p { font-size: var(--texto-ficha); color: var(--texto-medio);
  margin: var(--esp-sm) 0 0; }

/* 44 px de alvo, como todo o resto do site. */
.reserva__x { flex: 0 0 auto; inline-size: var(--alvo-toque);
  block-size: var(--alvo-toque); display: grid; place-items: center;
  border: 1px solid color-mix(in srgb, var(--borda) 40%, transparent);
  border-radius: 50%; background: none; cursor: pointer;
  color: var(--texto-medio); font-size: 19px; line-height: 1; }
.reserva__x:hover { border-color: var(--acento-sobre-claro);
  color: var(--acento-sobre-claro); }

.reserva__corpo { overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: var(--esp-lg) clamp(22px, 3vw, 32px) clamp(22px, 3vw, 32px); }

/* Dentro da janela as perguntas são mais compactas que na página de contato:
   lá o formulário é o conteúdo, aqui ele é uma interrupção. */
.reserva .campo { margin-block-end: var(--esp-lg); }
.reserva .campo__r { font-size: var(--texto-label); margin-block-end: var(--esp-md); }
.reserva .opcao { padding: 7px 12px; }
.reserva .form__lgpd { margin-block-start: var(--esp-md); font-size: 12px; }

/* O CARTÃO DO ENCAIXE deixa de ser ficha técnica e vira a porta. */
.encaixe--reserva .encaixe__miolo { max-inline-size: 38ch; }
.encaixe--reserva h3 { margin-block-end: var(--esp-md); }
.encaixe--reserva .acao { margin-block-start: clamp(20px, 3vw, 28px); }
.encaixe__diz { list-style: none; margin: clamp(24px, 3vw, 32px) 0 0; padding: 0;
  display: grid; gap: var(--esp-sm); text-align: start;
  font-size: var(--texto-label); letter-spacing: .04em; color: var(--texto-sutil); }
/* A ARMADILHA SAI DA TELA, E NAO DO DOCUMENTO.
   `display:none` e `hidden` sao as duas primeiras coisas que um robo de
   formulario aprende a pular. Tirar de vista pela posicao custa o mesmo e nao
   entrega o truque. `aria-hidden` e `tabindex="-1"` no HTML mantem leitor de
   tela e teclado longe dela. */
.armadilha { position: absolute; left: -9999px; width: 1px; height: 1px;
  overflow: hidden; }

/* AS TRÊS LINHAS GANHAM O SÍMBOLO DA COISA, e perdem o traço.
   O traço dizia só "item de lista", que o olho já sabia. O símbolo diz rio,
   bicho e calendário, que é exatamente o que as três linhas prometem contar
   sobre a semana. Os três já estavam desenhados no sprite da própria página:
   não entra ícone de fora, e o peso não muda, porque o sprite já ia junto.

   O BICHO MUDA COM A PÁGINA: ave nas duas de observação, peixe nas duas de
   pesca e na home. "Which species are moving" com peixe numa página de aves
   seria, em tamanho pequeno, a mesma troca que o `dna/MARCA.md` proíbe em
   tamanho grande.

   A COR SE DECLARA AQUI, E NÃO SE HERDA. Este cartão é claro DENTRO de faixa
   escura, e `.sobre-escuro .sinal` já pintou coisa em teal claro sobre branco
   duas vezes nesta mesma peça: o rótulo de pendência mediu 2,34:1 em cinco
   páginas, e o título da janela saiu branco sobre cartão branco ·
   `superficie-se-escolhe-medindo`.

   Medido sobre o branco do cartão: símbolo 5,80:1 contra o alvo 3,0 de
   elemento gráfico, e o texto 5,24:1 contra o alvo 4,5 de texto.

   E O TRAÇO ENGROSSA JUNTO COM O TAMANHO CAINDO. `.sinal` nasceu para 28 a
   34 px e traz `stroke-width: 1.2` sobre um `viewBox` de 24: a 20 px isso dá
   meio pixel de traço, e o desenho fica no lugar certo e invisível. Medido no
   navegador antes de corrigir: a figura ocupava 13x10 unidades, ou seja 11x8
   px na tela. Aqui o box vai a 26 px e o traço a 1,7. */
.encaixe__diz li { display: grid; grid-template-columns: auto 1fr;
  gap: 12px; align-items: center; }
.encaixe__diz .sinal--diz { inline-size: 26px; margin: 0;
  stroke-width: 1.7; color: var(--acento-sobre-claro); }

/* ═══ O AVISO DO FORMULÁRIO, EM TRÊS ESTADOS ════════════════════════════
   Até 14/10/2026 a confirmação era uma linha de texto num cartão, e o pedido
   do cliente foi direto: *"que fique mais visual que foi enviado"*. Ele está
   certo, e a razão é de conversão, não de enfeite. Quem acaba de preencher
   quatro passos está num momento de dúvida — *foi? não foi?* — e uma frase
   discreta num cartão claro não responde isso com a força que o momento pede.

   A MARCA É A MESMA NOS TRÊS, e muda só o que ela faz: enviando, o anel gira
   em arco aberto; enviado, o anel fecha e o tique se desenha dentro dele;
   falhou, nada se desenha. Um objeto só, três comportamentos, que é mais
   barato de ler do que três ícones diferentes.

   E DESENHAR É O IDIOMA DA CASA. O logotipo do rodapé se desenha, a bacia dos
   rios se desenha, e o `movimento.js` existe para isso. Um tique que aparece
   pronto seria um widget colado de fora; um tique que se desenha é o site. */
.form__aviso { display: flex; align-items: center; gap: var(--esp-md); }
.aviso__diz { display: block; }
.aviso__t { display: block; font-weight: 700; }
.aviso__l { display: block; color: var(--texto-medio); }

/* O ESTADO DE SUCESSO PESA MAIS QUE OS OUTROS DOIS, de propósito. Ele é o
   único que a pessoa vai olhar com atenção, e é o que responde a pergunta que
   ela está fazendo naquele segundo: *foi?*. Marca maior, mais ar em volta e o
   título no corpo de leitura em vez do corpo de ficha. "Enviando" e "falhou"
   continuam discretos: um é passagem, o outro é instrução. */
.form__aviso--feito {
  background: color-mix(in srgb, var(--acento) 16%, var(--fundo-superficie));
  border-color: var(--acento-sobre-claro);
  padding: var(--esp-lg); gap: var(--esp-lg); }
.form__aviso--feito .marca-env { inline-size: 56px; block-size: 56px; }
.form__aviso--feito .aviso__t { font-size: var(--texto-body-m);
  line-height: 1.3; margin-block-end: 2px; }

.marca-env { inline-size: 40px; block-size: 40px; flex: none;
  fill: none; stroke: var(--acento-sobre-claro); stroke-width: 3;
  stroke-linecap: round; stroke-linejoin: round; }

/* AS CONTAS DO TRACEJADO SÃO O PERÍMETRO DE VERDADE, e não um número redondo
   chutado. Anel de raio 23: 2·π·23 = 144,5, daí o 145. Tique: a primeira
   perna mede √(7² + 7²) = 9,9 e a segunda √(14² + 14,5²) = 20,2, somando
   30,1, daí o 31. Errar para mais deixa um pedaço por desenhar; errar para
   menos faz o traço parar antes do fim e ninguém entende por quê. */
.marca-env__anel { stroke-dasharray: 145; }
.marca-env__tique { stroke-dasharray: 31; }

/* SEM MOVIMENTO, A MARCA APARECE PRONTA. Este é o estado base de propósito:
   quem pediu `prefers-reduced-motion` recebe o desenho inteiro e correto, e a
   animação é que é adicionada por cima, no bloco guardado lá embaixo. Escrito
   ao contrário, uma pessoa com movimento reduzido veria um círculo pela
   metade para sempre. */
.marca-env__anel, .marca-env__tique { stroke-dashoffset: 0; }
.marca-env--enviando .marca-env__tique { opacity: 0; }

@media (prefers-reduced-motion: no-preference) {
  .reserva[open] { animation: reserva-entra 260ms var(--curva-entrada); }
  @keyframes reserva-entra {
    from { opacity: 0; translate: 0 12px; scale: .98; }
  }

  /* ENVIANDO: o anel vira arco e gira. `transform-origin` no centro do
     `viewBox`, que é 50% dos dois lados porque a caixa é quadrada.

     O ARCO SÓ EXISTE AQUI DENTRO, e isso é a parte que quase passou. Escrito
     fora, quem pede `prefers-reduced-motion` veria um arco de 36 unidades
     PARADO: um círculo quebrado, sem explicação, no lugar onde o site diz
     "Sending". Aqui dentro, essa pessoa vê o anel inteiro e lê o texto, que é
     o que o estado precisa comunicar. */
  .marca-env--enviando .marca-env__anel {
    stroke-dasharray: 36 145;
    transform-origin: 50% 50%;
    animation: env-gira 900ms linear infinite; }
  @keyframes env-gira { to { rotate: 360deg; } }

  /* ENVIADO: o anel fecha, o tique vem atrás, e o conjunto dá um pulo curto.
     A ordem importa e o atraso é o que a cria: 420ms de anel, e o tique só
     começa aos 380, pegando o fim do anel. Sem a sobreposição, a sequência
     fica com um buraco no meio e parece travada. */
  .marca-env--feito .marca-env__anel {
    animation: env-desenha 420ms var(--curva-saida) both; }
  .marca-env--feito .marca-env__tique {
    animation: env-risca 320ms var(--curva-saida) 380ms both; }
  .marca-env--feito { animation: env-pulo 420ms var(--curva-saida) 380ms; }

  @keyframes env-desenha { from { stroke-dashoffset: 145; } }
  @keyframes env-risca { from { stroke-dashoffset: 31; } }
  @keyframes env-pulo {
    0% { scale: 1; } 40% { scale: 1.08; } 100% { scale: 1; } }

  /* E O CARTÃO INTEIRO ENTRA, em vez de piscar no lugar. */
  .form__aviso--feito { animation: reserva-entra 300ms var(--curva-entrada); }
}

} /* @layer kng-projeto */