/* Roosevelt Amazon Expedition · a página de serviço
   ---------------------------------------------------------------------------
   UM template, quatro conteúdos: pesca Roosevelt, aves Roosevelt, pesca
   Guariba, aves Guariba. É o que torna a rota D viável sem virar quatro obras,
   e está declarado em `arquitetura.md` §4.

   Herda tudo de `site.css` e `movimento.css`. Aqui mora só o que a home não
   tem: a ficha de espécie, o calendário de temporada, o dia, o incluso e o
   slot de preço.
   --------------------------------------------------------------------------- */

@layer kng-projeto {

/* O HERO DE DESTINO E A TRILHA DE MIGALHAS MUDARAM DE CASA, e a razao e de
   escopo: eles deixaram de ser da pagina de servico.

   Quando esta folha nasceu, so as quatro expedicoes tinham hero curto e
   migalha. Hoje quem tem sao DEZ paginas, incluindo `/about`, `/journal` e
   `/contact`, que nao carregam esta folha e nao deveriam carregar: ela traz
   ficha de especie, regua de temporada e slot de preco, que nada tem a ver com
   um formulario de contato.

   O sintoma de deixar como estava saiu no print, e e feio: a migalha do
   `/contact` aparecia AZUL E SUBLINHADA, no estilo padrao do navegador, porque
   a unica regra que a pintava morava aqui. Os dois blocos foram para o
   `site.css`, que e o que toda pagina carrega. */

/* ═══ ESPÉCIES ═════════════════════════════════════════════════════════════
   A LISTA DE ESPÉCIES É TIPOGRAFIA, E NÃO SEIS MINIATURAS.

   A primeira versão era grade de cartões com foto. Renderizada e olhada lado a
   lado com as referências, ela tinha dois problemas, e o segundo não tem
   conserto por CSS:

   1 · nenhuma das duas referências aprovadas usa grade de miniatura. As duas
       tratam lista como TEXTO, com uma imagem grande sustentando a seção
       inteira. Miniatura em fileira é vocabulário de catálogo, e catálogo é
       exatamente o que faz sete lodges amazônicos ficarem iguais

   2 · TODA foto de espécie do acervo é grip-and-grin: o pescador ocupa o topo
       do quadro e segura o peixe na altura do peito. Tentei resolver por
       `object-position`, empurrando o recorte para baixo, e medi o resultado:
       o corte come a cabeça do PEIXE antes de tirar o rosto da pessoa. A foto
       não é retrato de espécie e não vira um por recorte

   Então a seção passa a ser uma lista em tipo grande, com o binômio ao lado, e
   UMA fotografia grande segurando o conjunto. Ganha três coisas de uma vez:
   fica editorial em vez de catálogo, respeita o `imagem.em_vez_de` do token,
   que proíbe o troféu centralizado, e reduz rosto reconhecível num site
   comercial nos Estados Unidos, o que é menos autorização a pedir. */

/* O `overflow-x: clip` NAO E ENFEITE, e ele foi medido.

   A foto desta secao entra com `.converge-d`, que a traduz 110px para a
   direita e volta a zero conforme a pagina rola. Como ela ja encosta na borda
   direita do conteudo, esses 110px ficam FORA da pagina enquanto o efeito nao
   terminou, e o navegador conta isso em `scrollWidth`. Medido em 25/09/2026
   nas tres paginas de pesca e aves: 1.510px numa janela de 1.440, e 480px num
   telefone de 390. Ou seja, barra horizontal nascendo e sumindo conforme se
   rola, que e o pior tipo de defeito de layout, porque some quando se vai
   olhar.

   A home nao tinha isso porque `.origem` ja traz `overflow: hidden`. Aqui
   `hidden` NAO SERVE: ele cria um contexto de rolagem e mata o
   `position: sticky` da propria foto, que e o que faz o quadro acompanhar a
   lista. `clip` recorta sem criar contexto de rolagem, e o grude continua. */
.especies-bloco { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(32px, 5vw, 80px); align-items: start; overflow-x: clip; }
@media (max-width: 900px) { .especies-bloco { grid-template-columns: 1fr; } }

/* O QUADRO TEM A PROPORÇÃO DA FONTE, E GRUDA.
   Duas fotos falharam aqui antes desta regra, e as duas pela mesma conta: o
   acervo é 4:3 e o quadro estava em 4:5. Em `object-fit: cover` dessa
   combinação a altura preenche e o corte sai pelas LATERAIS, então mexer no
   eixo vertical do `object-position` não move nada. Com o rio, sobrou uma
   tira de céu; com o peixe, sobrou o rosto do pescador.

   Em 4:3 a foto entra inteira, do jeito que foi enquadrada. E como a lista ao
   lado é longa, o quadro gruda e acompanha a leitura em vez de deixar meia
   coluna vazia embaixo. */
.especies-bloco__foto { position: relative; border-radius: var(--raio-md); overflow: hidden;
  aspect-ratio: 4 / 3; position: sticky; inset-block-start: clamp(88px, 12vh, 116px); }
@media (max-width: 900px) { .especies-bloco__foto { position: relative; inset-block-start: auto; } }
.especies-bloco__foto img { inline-size: 100%; block-size: 100%; object-fit: cover; }
/* AS FOTOS DO RODIZIO SE EMPILHAM, e por isso saem do fluxo. No hero e na
   abertura do lodge a figura ja era `position: absolute` por outro motivo;
   aqui a primeira foto e do documento e as outras nascem no JS, entao e esta
   regra que as poe uma sobre a outra em vez de uma embaixo da outra.

   E A LEGENDA SOBE, porque `appendChild` poe as fotos novas DEPOIS dela no
   documento. Entre dois elementos posicionados sem `z-index`, quem vem por
   ultimo pinta por cima: a segunda foto do rodizio cobria a tarja e o degrade,
   e a legenda simplesmente sumia da segunda volta em diante. Nao aparece em
   medicao de contraste nenhuma, porque o elemento continua la, do tamanho
   certo, com a cor certa. Aparece no print. */
.js .roda.especies-bloco__foto { isolation: isolate; }
.js .roda.especies-bloco__foto img { position: absolute; inset: 0; z-index: 0; }
.especies-bloco__foto::after { z-index: 1; }
.especies-bloco__foto figcaption { z-index: 2; }
/* A legenda apaga antes de trocar de palavra. 260 ms, que e o tempo que o JS
   espera para escrever: as duas metades tem de bater, senao a palavra troca
   com a tarja ainda acesa. */
.especies-bloco__foto figcaption { transition: opacity 260ms linear; }
.especies-bloco__foto figcaption.trocando { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .especies-bloco__foto figcaption { transition: none; }
}
/* O DEGRADÊ SAI DA LEGENDA E VAI PARA A FIGURA.
   Estando na própria legenda, ele começa transparente no topo dela, que é
   justamente onde a primeira linha do texto cai. Medido: 1,10:1. Na figura,
   ele cobre um terço da altura e a legenda inteira nasce dentro da parte
   escura. */
.especies-bloco__foto::after { content: ""; position: absolute; inset-block-end: 0;
  inset-inline: 0; block-size: 46%; pointer-events: none;
  background: linear-gradient(to top, rgb(13 13 13 / .92) 0%, rgb(13 13 13 / .72) 40%, transparent 100%); }
/* A LEGENDA CARREGA O PRÓPRIO CHÃO, e não só o degradê da figura.
   Com o degradê sozinho ela subiu de 1,10 para 2,63:1, e ainda reprovava: a
   foto é aérea e clara, e degradê sobre claro só chega até certo ponto sem
   apagar a imagem inteira. Fundo próprio na faixa da legenda resolve sem
   escurecer o resto, e é a mesma decisão já tomada no botão do hero da home:
   contraste que depende do que está atrás não é contraste. */
.especies-bloco__foto figcaption { position: absolute; inset-block-end: 0; inset-inline: 0;
  padding: clamp(14px, 1.8vw, 20px) clamp(16px, 2vw, 24px);
  background: rgb(13 13 13 / .74);
  color: var(--texto-sobre-inverso);
  font-size: var(--texto-label); letter-spacing: .08em; text-transform: uppercase; }

.lista-esp { list-style: none; margin: 0; padding: 0; }
.lista-esp li {
  display: grid; grid-template-columns: 1fr auto; gap: var(--esp-md) var(--esp-lg);
  align-items: baseline;
  padding-block: clamp(16px, 2vw, 22px);
  border-block-end: 1px solid color-mix(in srgb, var(--borda) 34%, transparent);
}
.lista-esp li:first-child { border-block-start: 1px solid color-mix(in srgb, var(--borda) 34%, transparent); }
.lista-esp__n { font-family: var(--fam-display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(20px, 2.6vw, 34px); line-height: 1; letter-spacing: -.025em; margin: 0; }
.lista-esp__lat { font-size: var(--texto-label); letter-spacing: .08em; text-transform: uppercase;
  color: var(--acento-sobre-claro); margin: 0; text-align: end; white-space: nowrap; }
.lista-esp__l { grid-column: 1 / -1; font-size: var(--texto-ficha); line-height: 1.55;
  color: var(--texto-medio); margin: 0; max-inline-size: 54ch; }
@media (max-width: 520px) {
  .lista-esp li { grid-template-columns: 1fr; }
  .lista-esp__lat { text-align: start; }
}

/* ═══ CALENDÁRIO DE TEMPORADA ══════════════════════════════════════════════
   O bloco que converte, e a razão está em `arquitetura.md` §4: o setor esconde
   preço mas PUBLICA calendário, e é ele que o pescador americano usa para
   escolher a semana.

   Aqui ele é uma régua de doze meses, e não três cartões soltos: a régua diz
   de relance onde o ano está, o que três caixas lado a lado não dizem. */

.regua { display: grid; grid-template-columns: repeat(12, 1fr); gap: 3px;
  margin-block: clamp(28px, 4vw, 44px); }
.regua__mes { position: relative; padding-block: clamp(14px, 2vw, 20px) clamp(10px, 1.4vw, 14px);
  text-align: center; border-radius: var(--raio-sm);
  font-size: var(--texto-label); font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; }
.regua__mes--cheia { background: color-mix(in srgb, var(--acento) 88%, var(--apoio-tinta));
  color: var(--texto-sobre-inverso); }
/* O ACENTO CRU NÃO ENTRA COMO FUNDO DE TEXTO, e o token já dizia isso.
   `#437F7B` está na lista de combinações PROIBIDAS do `dna.tokens.json`: mede
   4,12:1 e reprova AA. Eu o usei como fundo do mês de meia água e o medidor
   pegou exatamente 4,12. É o mesmo número que o token declara, o que confirma
   os dois de uma vez: a página estava errada e o medidor está honesto.
   `acento_sobre_claro` é o mesmo matiz com a luminosidade certa. */
.regua__mes--meia  { background: var(--acento-sobre-claro); color: var(--texto-sobre-inverso); }
.regua__mes--seca  { background: color-mix(in srgb, var(--acento-sobre-escuro) 76%, white);
  color: var(--texto-forte); }
@media (max-width: 700px) {
  .regua { grid-template-columns: repeat(6, 1fr); }
}

.periodos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: clamp(14px, 1.8vw, 22px); }
.perio { border-block-start: 2px solid var(--acento); padding-block-start: var(--esp-lg);
  display: grid; gap: var(--esp-sm); align-content: start; }
.perio__q { font-size: var(--texto-label); font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--acento-sobre-claro); margin: 0; }
.perio__n { font-family: var(--fam-display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(19px, 2.2vw, 27px); letter-spacing: -.02em; margin: 0; }
.perio__l { font-size: var(--texto-ficha); line-height: 1.55; color: var(--texto-medio); margin: 0; }

/* ═══ O DIA ════════════════════════════════════════════════════════════════
   Linha do tempo vertical, com a régua à esquerda. O que ela evita é a lista
   de bullets, que faz um dia de expedição parecer um itinerário de excursão. */

.dia-lista { list-style: none; margin: 0; padding: 0; display: grid;
  gap: clamp(20px, 2.6vw, 32px); }
/* O FIO HORIZONTAL POR LINHA SAIU em 30/09/2026. Ele separava as horas como
   se fossem linhas de tabela, que e o oposto do que a secao diz: um dia nao e
   uma tabela, e uma sequencia. No lugar dele entrou `.fio-tempo`, o fio
   vertical que se desenha com a rolagem, no `site.css`.
   A calha e o vao sao os mesmos que `.dia-lista.fio-tempo` declara: a coluna
   da hora e o corredor por onde o fio passa. */
.dia-item { display: grid; grid-template-columns: var(--calha) 1fr;
  column-gap: calc(var(--vao) + 14px); align-items: start;
  padding-block-start: clamp(16px, 2.2vw, 26px); }
.dia-item__h { font-family: var(--fam-display); font-weight: 400;
  font-size: clamp(15px, 1.5vw, 19px); letter-spacing: -.01em;
  color: var(--acento-sobre-claro); margin: 0; }
.dia-item__t { font-size: var(--texto-heading-m); font-weight: 600; margin: 0 0 var(--esp-sm); }
.dia-item__l { font-size: var(--texto-ficha); line-height: 1.6; color: var(--texto-medio);
  margin: 0; max-inline-size: 62ch; }
@media (max-width: 620px) {
  .dia-item { grid-template-columns: 1fr; gap: var(--esp-sm);
    padding-inline-start: calc(var(--vao) + 14px); }
}

/* ── A NOITE, E POR QUE É ESTA SEÇÃO QUE ESCURECE ────────────────────────

   AS QUATRO PÁGINAS DE EXPEDIÇÃO TINHAM SETE SEÇÕES CLARAS SEGUIDAS. Da
   dobra até o rodapé eram entre 7.000 e 8.500 px sem uma única troca de
   superfície: creme, papel, creme, papel. Cada uma abria com o mesmo rótulo
   no mesmo canto, o mesmo título no mesmo tamanho, o mesmo fio. Medido em
   print de página inteira, o defeito não aparece como erro de CSS, aparece
   como quatro páginas com a mesma silhueta.

   A home não tem esse problema porque ela alterna: são cinco faixas escuras
   em treze seções, e é a troca de fundo que conta onde um assunto termina e
   outro começa.

   ESCURECER ESTA E NÃO OUTRA NÃO É SORTEIO. `#day` é a seção que descreve
   o dia inteiro, da primeira luz à mesa da noite, e é a única da página
   inteiramente de texto: sem foto, sem tabela, sem régua de mês. É a que
   mais precisa de um fundo que faça o trabalho que a imagem faz nas outras,
   e a única em que o assunto justifica o verde escuro em vez de decorá-lo.

   A seção continua a carregar `sobre-escuro`, que é o que inverte botão,
   rótulo e anel de foco. O que mora aqui é só o que a lista do dia precisa
   e que `sobre-escuro` não dá: as três cores que estavam escritas para
   papel claro. Sobre `#28452E` elas mediriam 1,3:1, 2,0:1 e 2,3:1.

   A SUPERFÍCIE SAIU DAQUI em 21/09/2026 e virou `.faixa` no `site.css`, com
   o véu, a fotografia por baixo e a troca de tinta do rótulo. O motivo é o
   pedido de mais seções verdes: o que estava escrito para uma seção servia
   para nove, e não havia como pedir emprestado. A seção passa a escrever
   `faixa noite sobre-escuro`, e o que fica aqui é só a tinta da lista de
   horas, que é o que é desta seção e de nenhuma outra. */

/* O TEAL SAI DOS TEXTOS PEQUENOS ONDE HÁ FOTOGRAFIA, e isso foi medido, não
   decidido no olho. Sobre o verde liso `acento_sobre_escuro` dá 4,53:1. Com a
   fotografia por baixo, o véu de 82% deixa o céu estourado levantar o fundo
   até `rgb(66 92 69)` em alguns trechos, e lá os mesmos dois textos caem para
   3,14:1. Reprova AA, e são justamente o rótulo da seção e o horário, que é o
   que orienta a leitura da lista inteira.

   Medido no mesmo recorte, com o conteúdo ocultado e o cabeçalho fixo fora do
   quadro: título 6,58, subtítulo 6,58, corpo 4,75. Só os dois de teal caíam.

   O rótulo é tratado pela `.faixa`; os dois de baixo são da lista de horas. */
.faixa:has(> .faixa__fundo) .dia-item__h { color: var(--texto-sobre-inverso); }
/* O corpo sobe de 78% para 90% de branco pela mesma conta: é ele que amarra
   o quanto o véu pode clarear sem reprovar. */
.faixa:has(> .faixa__fundo) .dia-item__l {
  color: color-mix(in srgb, var(--texto-sobre-inverso) 90%, transparent); }

.noite .dia-item {
  border-block-start-color: color-mix(in srgb, var(--texto-sobre-inverso) 24%, transparent); }
.noite .dia-item__h { color: var(--acento-sobre-escuro); }
.noite .dia-item__l { color: color-mix(in srgb, var(--texto-sobre-inverso) 78%, transparent); }

/* ═══ O QUE ESTÁ INCLUSO ═══════════════════════════════════════════════════
   Duas colunas: o que entra e o que não entra. A segunda coluna não é
   franqueza decorativa, é o que tira objeção antes do formulário: quem vende
   pacote de sete dias e não diz o que fica de fora recebe a pergunta por
   e-mail, uma a uma. */

.incluso { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(28px, 4vw, 64px); }
.incluso h3 { font-size: var(--texto-label); font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; margin: 0 0 var(--esp-lg); }
.incluso--sim h3 { color: var(--acento-sobre-claro); }
.incluso--nao h3 { color: var(--texto-sutil); }
.incluso ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--esp-md); }
.incluso li { position: relative; padding-inline-start: 26px; font-size: var(--texto-ficha);
  line-height: 1.5; }
.incluso li::before { position: absolute; inset-inline-start: 0; inset-block-start: -1px;
  font-size: 15px; }
.incluso--nao li::before { content: "·"; color: var(--texto-sutil); font-weight: 700; }
.incluso--nao li { color: var(--texto-medio); }

/* ── O QUE ESTA INCLUSO GANHA A CARTA DE SINAIS ──────────────────────────

   A coluna da esquerda era sete linhas com um `+` na frente, e ela e a lista
   que VENDE: voo, cabana, ar, refeicao, guia, barco, internet. Cada uma dessas
   sete ja tinha um sinal desenhado na carta da casa, usado na faixa de fatos
   do lodge e nas celulas da matriz. Nao usa-lo aqui era ter o desenho e nao
   mostrar. O unico que faltava era o aviao, e ele entrou.

   A coluna da direita continua com o ponto miudo, e isso e hierarquia, nao
   esquecimento: o que NAO esta incluso tira objecao, nao vende. Dar a ela os
   mesmos sinais coloridos poria as duas no mesmo peso.

   A grade muda de `padding` para duas colunas de verdade, senao o sinal de
   34px e o texto brigam pelo mesmo recuo de 26. */
.incluso--sim ul { gap: clamp(14px, 1.8vw, 20px); }
.incluso--sim li { display: grid; grid-template-columns: clamp(26px, 2.4vw, 32px) 1fr;
  gap: var(--esp-md); align-items: center; padding-inline-start: 0; }
.sinal--item { inline-size: 100%; margin-block-end: 0; }

/* ═══ O SLOT DE PREÇO ══════════════════════════════════════════════════════
   Ele EXISTE e está VAZIO, e isso é decisão registrada, não esquecimento.

   `rota.md` e `dna/MARCA.md` §3: os quatro concorrentes de referência não
   exibem preço nenhum, o pré-briefing cogita exibir, e isso é decisão de funil
   de quem responde pela meta. A trava da casa manda pausar antes de apresentar
   preço, então aqui não entra nem número de exemplo.

   O bloco foi desenhado nas TRÊS formas possíveis para que a decisão, quando
   vier, seja preencher e não redesenhar:
     faixa          uma linha grande, "From US$ X,XXX · 7 nights"
     preço fechado  a régua de temporada vira tabela, com valor por período
     sem preço      o bloco some e a reserva sobe

   O `min-block-size` guarda a altura da primeira forma, que é a menor das
   três: assim o resto da página não se move quando o número chegar. */

.preco-slot {
  border: 1px dashed color-mix(in srgb, var(--borda) 60%, transparent);
  border-radius: var(--raio-lg); background: var(--fundo-superficie);
  min-block-size: 168px; display: grid; place-items: center;
  padding: clamp(24px, 3.4vw, 40px); text-align: center;
}
.preco-slot__selo { font-size: var(--texto-label); font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--acento-sobre-claro);
  border: 1px solid color-mix(in srgb, var(--acento-sobre-claro) 45%, transparent);
  border-radius: var(--raio-pill); padding: 6px 14px; display: inline-block;
  margin-block-end: var(--esp-md); }
.preco-slot p { font-size: var(--texto-ficha); color: var(--texto-medio); margin: 0;
  max-inline-size: 52ch; }

/* ═══ AS OUTRAS TRÊS ═══════════════════════════════════════════════════════
   Toda página de serviço termina oferecendo as outras três. Não é navegação
   de rodapé: é a matriz de quatro aparecendo de novo, no momento em que a
   pessoa já entendeu uma das quatro e pode escolher outra. */

.irmas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: clamp(12px, 1.5vw, 20px); }
.irma { position: relative; display: block; text-decoration: none; isolation: isolate;
  border-radius: var(--raio-md); overflow: hidden; aspect-ratio: 4 / 3;
  color: var(--texto-sobre-inverso); }
.irma img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%;
  object-fit: cover; z-index: -2;
  transition: transform var(--tempo-longa) var(--curva-entrada); }
.irma:hover img { transform: scale(1.05); }
.irma::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgb(13 13 13 / .92) 0%, rgb(13 13 13 / .4) 50%, transparent 78%); }
.irma__t { position: absolute; inset-block-end: 0; inset-inline: 0; padding: clamp(16px, 2vw, 24px); }
.irma__rio { font-size: var(--texto-label); font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; opacity: .86; margin: 0 0 4px; inline-size: fit-content; }
.irma__nome { font-family: var(--fam-display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(16px, 1.8vw, 22px); letter-spacing: -.02em; margin: 0; inline-size: fit-content; }

} /* @layer kng-projeto */