/* ==========================================================================
   Recife Boats — camada base do mundo Jangada.
   Carregada por TODAS as 16 páginas, sempre ANTES do <style> inline delas.

   Por que existe: tokens, reset e anel de foco viviam copiados em cada
   página. O custo não era o byte, era a divergência silenciosa — o anel de
   foco corrigido na home nunca chegou aos destinos, o :root nunca chegou ao
   404 (todo var() ali era indefinido) e o filtro monocromático da marca
   pedia uma classe que 5 páginas não tinham.

   Ordem da cascata: como este arquivo carrega primeiro, o <style> de cada
   página vence naturalmente em caso de empate. É o que se quer para tudo
   aqui — menos para o anel de foco, ver a nota na regra dele.
   ========================================================================== */

:root {
  /* Mundo Jangada. Os nomes antigos (navy/cyan/turquoise) saíram: eles
     descreviam a identidade anterior e mantê-los seria mentir no código. */
  --breu: #241c16;          /* breu do casco — campo escuro e tinta */
  --breu-claro: #3a2e24;    /* madeira no escuro — hover em campo escuro */
  --mar: #1a5f68;           /* mar de recife — estrutura e links */
  --mar-text: #1a5f68;
  --ferrugem: #b4552d;      /* cordame — borda e componente NÃO-textual (3:1) */
  --ferrugem-clara: #e8b48f; /* cordame lavado — ferrugem como TEXTO sobre campo escuro (9,1:1) */
  --madeira: #6b4a2f;       /* madeira molhada — bordas e regras */
  --success: #2f6b3f;       /* verde de confirmação, AA sobre o pano */
  --acao: #8f4021;          /* óxido — campo de ação, onde TEXTO pousa (5,5:1 com o pano) */
  --cru: #f2ece0;           /* pano de vela cru — o fundo do site */
  --cru-sombra: #e5dcc9;    /* pano na sombra — seções alternadas */
  --text: #241c16;
  --text-light: #6b5c4c;
  /* Pano e madeira não fazem pílula. Raio pequeno em tudo. */
  --radius-sm: 3px;
  --radius-md: 5px;
  --radius-full: 5px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body { font-family: 'Archivo', sans-serif; color: var(--text); }

/* WCAG 1.4.4 (Resize text): com a fonte-raiz em 32px — o ajuste "texto
   grande" do navegador — o documento ia a 639px numa viewport de 375 e 98
   elementos transbordavam. Duas causas, as duas tratadas aqui:
   1. Filho de flex/grid não encolhe abaixo do próprio conteúdo (min-width:auto
      é o padrão). "Pernambuco" em Alfa Slab One a 64px mede ~380px sozinho.
   2. Sem quebra de palavra, uma palavra longa em display não tem para onde ir.
   Com lang="pt-BR" no <html>, hyphens:auto quebra com hifenização correta. */
body { overflow-wrap: break-word; }
/* anywhere, e não break-word: só `anywhere` reduz a LARGURA MÍNIMA do
   conteúdo, que é o número que decide se um filho de flex/grid consegue
   encolher. Com break-word a palavra quebra mas o contêiner continua
   reservando o espaço da palavra inteira. */
/* hyphens:manual, não auto. `auto` hifenizava os títulos em Alfa Slab One no
   375 — "Sem-pre o seu", "pai-sagens de tirar o fôlego", e no modal legal
   "Contrato de Loca-ção de Embarca-ção". Um hífen no meio de "Sempre" num slab
   de 32px é o defeito mais visível da página. E `hyphens` nunca fez o trabalho
   de WCAG 1.4.4 que motivou esta regra: quem reduz a largura mínima do
   conteúdo é `overflow-wrap: anywhere`, que fica. */
h1, h2, h3, h4 { hyphens: manual; overflow-wrap: anywhere; }

/* Seleção de texto: sem isto o realce fica no azul padrão do sistema — a
   última cor do mundo anterior que ainda aparecia na tela. */
::selection { background: var(--acao); color: var(--cru); }
::-moz-selection { background: var(--acao); color: var(--cru); }

/* Marca monocromática: o PNG ainda carrega o gradiente cyan→turquesa do mundo
   anterior (23,8% de pixels cromáticos). Filtro até o asset ser redesenhado.
   `header img` além de `.logo img`: as páginas de retorno e as institucionais
   marcam a logo só como <a href="/"><img>, sem classe — a regra antiga passava
   por elas e o cyan do mundo antigo seguia no ar em 5 páginas.

   `width: auto` NÃO é decorativo. O <img> carrega width="276" height="180"
   para reservar espaço (CLS), e atributo de dimensão define a largura USADA:
   com o CSS mexendo só na altura, o logo saía 276×50 em vez de 77×50 —
   esmagado a 36% da altura certa. Uma das duas dimensões tem que ser auto,
   sempre. Altura fixa aqui, e a página só troca o número quando precisa. */
header img, .logo img, .footer-brand img {
  filter: brightness(0) invert(1);
  height: 45px; width: auto; max-width: 100%;
}

body.no-scroll { overflow: hidden; }

/* Anel de foco de dois tons: halo claro por fora, anel escuro por dentro —
   um dos dois contrasta em qualquer fundo, inclusive sobre a foto do hero e
   no banner de cookies, que é injetado por consent.js e não define foco.

   `outline-offset` desenha o anel sobre o VIZINHO, não sobre o elemento: por
   isso a lista de exceções por elemento que existia antes errava sempre.

   !important: enquanto esta regra era a ÚLTIMA da home ela vencia as :hover
   de elevação por ordem de origem. Aqui ela carrega ANTES do <style> de cada
   página, então perderia todo empate — e há :hover com box-shadow em (0,3,0)
   (.dest-card-body .btn-reserve:hover). Passar o mouse sobre um botão focado
   apagava o halo e sobrava só o anel escuro, que sobre a foto do hero mede
   1,00:1. `outline-offset` fica sem !important de propósito, para que os
   botões grandes ainda afastem o anel (ver .btn-primary:focus-visible). */
*:focus-visible {
  outline: 2px solid var(--breu) !important;
  outline-offset: 2px;
  box-shadow: 0 0 0 6px rgba(242, 236, 224, 0.92) !important;
  border-radius: 4px;
}

/* ===== Movimento reduzido =====
   Vivia só na home; as outras 15 páginas não tinham tratamento nenhum.

   Transição some: uma troca de cor instantânea continua comunicando o estado,
   e é exatamente isso que o pedido significa.

   Animação NÃO some. O site não tem @keyframes próprio — a única animação é a
   dos três spinners (maré carregando, cupom validando e o redirect
   para o pagamento). Com `animation-duration: 0.01ms` o spinner congelava numa
   posição, e spinner parado não lê como "sem movimento", lê como travado —
   bem na hora de mandar alguém para o gateway com R$ 11 mil. A alternativa
   sem movimento é o pulso: sinaliza progresso sem girar nada. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; }
  .ico-spin { animation: rb-pulso 1.4s ease-in-out infinite !important; }
}
@keyframes rb-pulso { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

/* ===== Botão primário: a etiqueta costurada =====
   Campo óxido chapado, texto pano e uma costura tracejada no ::after. É a
   assinatura de componente do mundo Jangada — e existia só na home: as 9
   páginas de destino mostravam a pílula arredondada do mundo ANTERIOR, com
   halo cromático no hover. Uma definição, dez páginas.
   `min()` no padding: em rem ele dobra junto com a fonte e o botão sozinho
   estourava 320px a 200% de zoom de texto (WCAG 1.4.4). */
.btn-primary {
  background: var(--acao); color: var(--cru); padding: 0.9rem min(2rem, 7vw);
  border-radius: var(--radius-sm); max-width: 100%;
  text-decoration: none; font-weight: 700; font-size: 1rem; letter-spacing: 0.02em;
  transition: transform 0.2s, box-shadow 0.2s; border: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 0.5rem; position: relative;
  box-shadow: 0 2px 0 rgba(36, 28, 22, 0.4);
}
.btn-primary::after {
  content: ''; position: absolute; inset: 5px; border: 1px dashed rgba(242, 236, 224, 0.5);
  border-radius: 2px; pointer-events: none;
}
/* Sombra neutra de elevação, não halo cromático: brilho colorido é o "cool"
   padrão de UI gerada por IA — e o detector pega. */
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.28); }
.btn-primary:focus-visible { outline-offset: 3px; }
