/* tokens carregados globalmente por gov_css() (inc/layout.php), com ?v=filemtime. */

/* ============================================================
   FORMULÁRIOS OPERACIONAIS — /inscricao e /formulario-para-visto-indiano
   Design System v2. Tudo sob .fm para nao colidir com o CSS do clone.

   Deriva de govinda-agencia.css (o formulario mais maduro do site) e
   acrescenta o que aqueles 26 campos nao pediam e estes 63 pedem:
   grupos de radio/checkbox, data em tres selects, campo condicional
   e um indice de secoes que mostra onde o formulario termina.

   A decisao de desenho que sustenta o resto: partir em blocos com
   pergunta propria. Formulario longo nao cansa pelo tamanho; cansa por
   nao mostrar onde termina.
   ============================================================ */

.fm, .fm *, .fm *::before, .fm *::after { box-sizing: border-box; }

.fm {
  font-family: var(--f-pagina);
  font-size: var(--t-corpo);
  line-height: 1.6;
  color: var(--tinta);
  background: linear-gradient(180deg, var(--fundo-alto), var(--fundo-baixo));
  position: relative;
  isolation: isolate;
}
/* Grao de papel — 3,2%, fixo, nunca intercepta clique. */
.fm::after {
  content: "";
  position: fixed; inset: 0; pointer-events: none; z-index: 2;
  opacity: .032; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.fm__caixa {
  /* Largura do corpo principal do site (1240px), e nao a medida de leitura:
     formulario de 63 campos ganha muito em poder por em duas/tres colunas. */
  max-width: var(--w-conteudo);
  margin: 0 auto;
  padding-inline: clamp(20px, 5vw, 64px) clamp(20px, 5vw, 48px);
  padding-bottom: clamp(48px, 8vw, 112px);
  position: relative; z-index: 1;
}

/* ---------------------------  ABERTURA  --------------------------- */
.fm__abertura { padding-block: clamp(48px, 7vh, 96px) clamp(24px, 4vh, 48px); }

.fm__rotulo {
  display: flex; align-items: center; gap: var(--e-3);
  font-family: var(--f-disciplina); font-weight: 600;
  font-size: var(--t-rotulo); letter-spacing: .30em; text-transform: uppercase;
  color: var(--tinta-suave); margin: 0;
}
.fm__rotulo::before { content: ""; flex: none; width: 32px; height: 1px; background: var(--ouro); }

.fm__titulo {
  font-family: var(--f-pagina); font-weight: 400;
  font-size: var(--t-display); line-height: 1.04; letter-spacing: -.015em;
  margin: var(--e-4) 0 0;
}
.fm__titulo em { font-style: italic; color: var(--acento); }

.fm__linha {
  max-width: var(--w-leitura);
  margin-top: var(--e-5);
  font-size: var(--t-corpo-ed);
  line-height: 1.95;
}
.fm__linha strong { color: var(--acento-forte); }

/* Aviso de destaque (ex.: taxa nao reembolsavel) */
.fm__aviso {
  max-width: var(--w-leitura);
  margin-top: var(--e-5);
  padding: var(--e-4) var(--e-5);
  background: var(--superficie);
  border-left: 3px solid var(--acento);
  border-radius: var(--raio);
  font-size: var(--t-legenda); line-height: 1.75;
}

/* ---------------------------  ÍNDICE DE SEÇÕES  --------------------------- */
/* Num formulario de 63 campos, saber quantos blocos faltam muda tudo. */
.fm__indice {
  margin-top: var(--e-5);
  padding-top: var(--e-4);
  border-top: 1px solid var(--ouro);
  display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-4);
  list-style: none; padding-left: 0;
}
.fm__indice li { margin: 0; }
.fm__indice a {
  font-family: var(--f-disciplina); font-weight: 300;
  font-size: var(--t-selo); letter-spacing: .12em; text-transform: uppercase;
  color: var(--tinta-suave); text-decoration: none;
  border-bottom: 1px solid transparent; padding-bottom: 2px;
  transition: color var(--dur-rapida) var(--ease), border-color var(--dur-rapida) var(--ease);
}
.fm__indice a:hover { color: var(--acento-forte); border-bottom-color: var(--ouro); }

/* ---------------------------  BLOCOS  --------------------------- */
/* Respiro assimetrico ~3:1 — o ar ACIMA do titulo do bloco e' o que separa
   uma secao da outra; o de baixo so' descola o titulo dos seus campos. O
   primeiro bloco nao precisa do afastamento: nao ha secao anterior dele. */
.fm__bloco {
  border: 0; padding: 0;
  /* O ar grande vai no MARGIN (fora da caixa): a <legend> nasce fora do
     padding-box do fieldset, então padding-top afastaria o conteúdo do
     título — o inverso do que se quer. Margin afasta a seção da anterior. */
  margin: clamp(52px, 7vw, 88px) 0 0;
  padding-block: var(--e-3) 0;         /* respiro curto entre título e campos */
  border-top: 1px solid var(--superficie-2);
  scroll-margin-top: var(--e-6);
}
.fm__bloco:first-of-type {
  border-top: 1px solid var(--ouro);
  margin-top: var(--e-5);
}

/* display:block tira a <legend> da posicao especial (ela nasce fora do
   padding-box do fieldset, e por isso o padding-top empurrava o CONTEUDO para
   longe do titulo, em vez de afastar o titulo da secao anterior). Como bloco
   em fluxo normal, o padding-top do bloco vira o ar ACIMA do titulo. */
.fm__legenda {
  display: block; width: 100%;
  font-family: var(--f-pagina); font-weight: 400;
  font-size: var(--t-h2); line-height: 1.15;
  padding: 0; margin: 0 0 var(--e-4);
}
.fm__legenda small {
  display: block;
  font-family: var(--f-disciplina); font-weight: 300;
  font-size: var(--t-selo); letter-spacing: .12em; text-transform: uppercase;
  color: var(--tinta-suave); margin-top: 6px;
}

/* Grade de 12 colunas */
.fm__grade { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--e-4); }
.fm__campo--1 { grid-column: span 12; }
.fm__campo--2 { grid-column: span 6; }
.fm__campo--3 { grid-column: span 4; }
.fm__campo--4 { grid-column: span 3; }
@media (max-width: 720px) {
  .fm__campo--2, .fm__campo--3 { grid-column: span 12; }
  .fm__campo--4 { grid-column: span 6; }
}

/* Quebra de linha dentro da grade. Separa dois grupos no mesmo bloco — os
   dados do pai e os da mãe — sem inventar um subtítulo e sem mexer na largura
   dos campos (grid-column-start brigaria com o `span` das classes de largura).
   O respiro resultante é a soma dos dois gaps da grade: ~30px. */
.fm__quebra { grid-column: 1 / -1; height: 0; margin: 0; padding: 0; }

/* ---------------------------  CAMPO  --------------------------- */
.fm__campo { margin: 0; display: flex; flex-direction: column; }
.fm__campo[hidden] { display: none; }   /* campo condicional desligado */

.fm__campo > label,
.fm__campo .fm__rotulo-grupo {
  font-family: var(--f-disciplina); font-weight: 600;
  font-size: var(--t-selo); letter-spacing: .09em; text-transform: uppercase;
  color: var(--tinta);
  margin-bottom: 6px;
}
.fm__campo label b { color: var(--acento-forte); font-weight: 600; }

.fm__campo input,
.fm__campo select,
.fm__campo textarea {
  font-family: var(--f-pagina);
  font-size: var(--t-corpo);
  color: var(--tinta);
  background: var(--superficie);
  border: 1px solid var(--superficie-2);
  border-bottom: 1px solid var(--tinta-suave);
  border-radius: var(--raio);
  padding: 11px 12px;
  width: 100%;
  transition: border-color var(--dur-rapida) var(--ease),
              background var(--dur-rapida) var(--ease);
}
.fm__campo textarea { min-height: 110px; resize: vertical; line-height: 1.6; }
.fm__campo input::placeholder,
.fm__campo textarea::placeholder { color: #8C877D; opacity: .75; }

.fm__campo input:hover, .fm__campo select:hover, .fm__campo textarea:hover { background: var(--superficie-2); }
.fm__campo input:focus, .fm__campo select:focus, .fm__campo textarea:focus {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
  background: var(--superficie);
  border-bottom-color: var(--acento);
}
.fm__campo input[aria-invalid="true"],
.fm__campo select[aria-invalid="true"],
.fm__campo textarea[aria-invalid="true"] { border-bottom-color: #9E3B32; border-bottom-width: 2px; }

.fm__ajuda {
  font-family: var(--f-disciplina); font-weight: 300;
  font-size: var(--t-selo); letter-spacing: .10em;
  color: var(--tinta-suave); margin-top: 5px;
}

/* ------------------  LISTA DE SAÍDAS: UM ANO, UMA COR  ------------------ */
/* Na lista de reservas convivem saídas de anos diferentes, e as datas vêm
   abreviadas (01 a 24/10/2026). Sem separação, escolher a saída de 2027
   achando que é a de 2026 é erro de um clique — e caro. O <optgroup> traz o
   ano como cabeçalho (a pista que NÃO depende de cor, para quem não a
   distingue) e a faixa alternada reforça no olhar. */
.fm__campo optgroup {
  font-family: var(--f-disciplina); font-weight: 600;
  font-size: var(--t-legenda); letter-spacing: .22em;
  color: var(--tinta-suave);
  background: var(--fundo-baixo);
  padding: 4px 0;
}
.fm__campo option.ano-a { background: var(--superficie);   color: var(--tinta); }
.fm__campo option.ano-b { background: var(--superficie-2); color: var(--acento-forte); }

.fm__erro {
  font-family: var(--f-disciplina); font-weight: 600;
  font-size: var(--t-selo); letter-spacing: .08em;
  color: #9E3B32;
  margin-top: 5px;
}
.fm__erro[hidden] { display: none; }
.fm__erro--geral {
  display: block; margin: 0 0 var(--e-5);
  padding: var(--e-3) var(--e-4);
  background: var(--superficie);
  border-left: 3px solid #9E3B32;
  border-radius: var(--raio);
  font-size: var(--t-legenda); letter-spacing: .02em; text-transform: none;
}

/* ---------------------------  BUSCA DENTRO DO SELECT  --------------------------- */
/* País tem 232 opções; Ano, uma centena. Rolar a lista é onde nasce o erro.
   O <select> nativo continua no DOM (é ele que envia o valor) — some da tela,
   mas não da página, para o formulário seguir funcionando sem JavaScript. */
.fm__busca { position: relative; display: block; }
.fm__busca-nativo {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0; padding: 0; margin: -1px;
}
.fm__busca-campo { width: 100%; }

.fm__busca-lista {
  position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px);
  margin: 0; padding: 4px 0; list-style: none;
  max-height: 17rem; overflow-y: auto;
  background: var(--superficie);
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio);
  box-shadow: var(--sombra-2);
}
.fm__busca-lista[hidden] { display: none; }

.fm__busca-item {
  padding: 8px 12px;
  font-family: var(--f-pagina); font-size: var(--t-corpo);
  color: var(--tinta); cursor: pointer;
}
.fm__busca-item:hover,
.fm__busca-item.is-marcado { background: var(--fundo-baixo); color: var(--acento-forte); }
.fm__busca-item[aria-selected="true"] { font-weight: 600; }
.fm__busca-item[aria-selected="true"]::after { content: " ✓"; color: var(--ouro); }

.fm__busca-nada {
  padding: 10px 12px;
  font-family: var(--f-disciplina); font-size: var(--t-legenda);
  color: var(--tinta-suave);
}

/* No trio de data as colunas são estreitas (5rem · 1fr · 6rem) e a lista,
   presa à largura do campo, quebrava "fevereiro" em duas linhas. A lista é
   flutuante: pode passar da largura do campo sem mexer no layout. Dobra. */
.fm__data .fm__busca-lista { min-width: 200%; }
.fm__data .fm__busca-item  { white-space: nowrap; }
/* O último do trio (Ano) fica na borda direita: abre para a esquerda,
   senão a lista dobrada sairia da tela. */
.fm__data .fm__busca:last-child .fm__busca-lista { left: auto; right: 0; }

/* ---------------------------  CONTADOR DE TEXTO  --------------------------- */
/* Contagem regressiva à direita, embaixo do campo: quem escreve precisa saber
   quanto ainda cabe, não quanto já escreveu. */
.fm__contador {
  display: block; text-align: right; margin-top: 4px;
  font-family: var(--f-disciplina); font-weight: 300;
  font-size: var(--t-selo); letter-spacing: .08em;
  color: var(--tinta-suave);
}
.fm__contador.is-perto { color: var(--acento-forte); }
.fm__contador.is-fim   { color: #9E3B32; font-weight: 600; }

/* ---------------------------  DATA EM TRÊS SELECTS  --------------------------- */
/* dia | mes | ano — o mes vai por extenso para nao restar duvida de ordem. */
.fm__data { display: grid; grid-template-columns: 5rem 200px 6rem; gap: var(--e-3); }
/* No mobile os três ficam lado a lado, largura igual — o JS abrevia o nome
   do mês (aria-label="Mês") para 3 letras maiúsculas só nesta faixa, então a
   coluna cabe sem quebrar. Desktop não muda: a regra acima continua valendo
   acima de 420px. */
@media (max-width: 420px) {
  .fm__data { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }

  /* Cada trio de data ocupa a linha inteira. Sem isto, dois campos de data
     (que são --3 ou --4 na grade de 12) dividem a mesma linha e cada trio
     fica com ~48px por coluna — apertado demais para o toque. Um por linha:
        dd/mm/aaaa
        dd/mm/aaaa
     :has() alcança o PAI a partir do filho; suportado em todos os navegadores
     atuais. Onde não houver, a regra é ignorada e volta ao lado a lado — que
     é o comportamento de antes, não uma quebra. */
  .fm__campo:has(.fm__data) { grid-column: span 12; }

  /* A nacionalidade do passaporte é um combo de 232 países: dividir a linha
     com o campo seguinte deixa a lista de busca estreita demais. Sozinho na
     linha, e a data de nascimento (o campo seguinte) cai para a de baixo —
     que já é o efeito da regra acima.
     Sem `>`: o JS do combobox embrulha o <select> numa div.fm__busca, então
     ele deixa de ser filho direto do .fm__campo. */
  .fm__campo:has(#passaporte_nacionalidade) { grid-column: span 12; }

  /* iOS: campo com fonte < 16px faz o Safari dar zoom na página a cada toque.
     Num formulário de 63 campos isso é a tela pulando o tempo todo. O site usa
     15px na raiz, então aqui subimos só o que recebe digitação, e só no
     mobile — o desktop segue com var(--t-corpo).

     O `.fm` na frente não é enfeite: o CSS legado do clone traz
     `input[type="text"] { font-size: 1rem }` (clientlib-coveo), de mesma
     especificidade que `.fm__campo input` e carregado DEPOIS — sem subir a
     especificidade aqui, ele vence o desempate por ordem e os campos voltam
     para 15px. */
  .fm .fm__campo input,
  .fm .fm__campo select,
  .fm .fm__campo textarea { font-size: 16px; }
}

/* ---------------------------  RADIO E CHECKBOX  --------------------------- */
.fm__opcoes {
  display: flex; flex-wrap: wrap; gap: var(--e-3) var(--e-5);
  border: 0; margin: 0; padding: 0;
}
.fm__opcoes--coluna { flex-direction: column; gap: var(--e-3); }

.fm__opcao {
  display: inline-flex; align-items: center; gap: var(--e-2);
  font-family: var(--f-pagina); font-size: var(--t-corpo);
  letter-spacing: 0; text-transform: none; font-weight: 400;
  color: var(--tinta); cursor: pointer; margin: 0;
}
/* o input dentro da opcao nao herda a largura de 100% dos campos de texto */
.fm__opcao input[type="radio"],
.fm__opcao input[type="checkbox"] {
  width: 1.05rem; height: 1.05rem; flex: none; padding: 0;
  accent-color: var(--acento-forte);
  border-radius: 0;
}
.fm__opcao:hover { color: var(--acento-forte); }

/* ---------------------------  CONSENTIMENTO  --------------------------- */
.fm__consentimento {
  display: flex; gap: var(--e-3); align-items: flex-start;
  margin-top: clamp(24px, 4vw, 40px);
  max-width: var(--w-leitura);
  font-size: var(--t-legenda); line-height: 1.7;
}
.fm__consentimento input { width: 1.05rem; height: 1.05rem; flex: none; margin-top: .35em; accent-color: var(--acento-forte); }

/* ---------------------------  ENVIO  --------------------------- */
.fm__enviar {
  margin-top: clamp(32px, 5vw, 56px);
  padding-top: var(--e-5);
  border-top: 1px solid var(--ouro);
  display: flex; flex-wrap: wrap; gap: var(--e-5); align-items: center;
}
.fm__botao {
  display: inline-block;
  font-family: var(--f-disciplina); font-weight: 600;
  font-size: 1.2rem; letter-spacing: .06em;
  color: var(--fundo); background: var(--navy);
  padding: 16px 34px; border: 0; border-radius: 999px;
  text-decoration: none; cursor: pointer;
  transition: background var(--dur-normal) var(--ease);
}
.fm__botao:hover:not(:disabled) { background: linear-gradient(90deg, var(--acento), var(--acento-forte)); }
.fm__botao:disabled { opacity: .55; cursor: default; }
.fm__botao:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; }

.fm__nota {
  flex: 1 1 22ch; margin: 0;
  font-family: var(--f-disciplina); font-weight: 600;
  font-size: var(--t-corpo-ed); letter-spacing: .10em;
  color: var(--tinta-suave); line-height: 1.7;
}
.fm__nota b { color: var(--acento-forte); font-weight: 600;}

/* ---------------------------  ISCA ANTI-ROBÔ  --------------------------- */
/* Fora da tela, mas nao display:none — robo ignora campo escondido assim. */
.fm__isca {
  position: absolute; left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}

@media (prefers-reduced-motion: reduce) { .fm * { transition-duration: .01ms !important; } }