/* Fluvimar — fundação
   Tokens extraídos do site publicado no Framer.
   Ordem de carregamento: base.css -> layout.css -> components.css */

/* ---------------------------------------------------------------------------
   Tokens
   --------------------------------------------------------------------------- */

:root {
  /* Cores da marca — vêm dos tokens do Framer */
  --c-primaria:        #0287e6;
  --c-primaria-escura: #0271c3;  /* hover / pressed */
  --c-primaria-clara:  #149cf9;  /* destaques */

  /* O azul da marca tem contraste 3,74:1 com branco — abaixo do 4,5:1 que a
     WCAG AA exige para texto normal. Serve como acento (borda, foco, número
     grande, marcador), mas NÃO como fundo de texto nem como cor de texto
     pequeno. Para esses dois casos usar os tokens abaixo.
     Medido: #0271c3 = 5,06:1 e #015c9e = 6,94:1 contra branco. */
  --c-primaria-aa:        #0271c3;  /* fundo de botão / texto pequeno */
  --c-primaria-aa-escura: #015c9e;  /* hover do que usa --c-primaria-aa */
  --c-escura:          #00081d;  /* header, footer e faixas escuras */

  --c-branco:    #ffffff;
  --c-preto:     #000000;
  --c-cinza-bg:  #fafafa;   /* seções alternadas */
  --c-cinza-txt: #1e1e1e;
  --c-azul-claro:#b6e8ff;   /* fundo dos ícones de feature */
  --c-lavanda:   #f2f4fd;   /* caixa da planta */

  /* Texto sobre fundo escuro (padrão do site original) */
  --c-txt-inv-85: rgba(255, 255, 255, 0.85);
  --c-txt-inv-70: rgba(255, 255, 255, 0.7);
  --c-txt-inv-60: rgba(255, 255, 255, 0.6);
  --c-txt-inv-50: rgba(255, 255, 255, 0.5);
  --c-borda-sutil: rgba(243, 243, 243, 0.25);

  /* Tipografia.
     Switzer no lugar da Neue Montreal (paga, nunca licenciada) — isolado
     aqui pra trocar de volta ser uma linha só, se um dia comprarem a
     licença. Ver assets/fonts/LEIA-ME.md. */
  --font-heading: "Switzer", "Outfit", system-ui, sans-serif;
  --font-body:    "Outfit", system-ui, -apple-system, sans-serif;

  --fs-xs:   0.75rem;   /* 12 */
  --fs-sm:   0.875rem;  /* 14 */
  --fs-base: 1rem;      /* 16 */
  --fs-md:   1.125rem;  /* 18 */
  --fs-lg:   1.25rem;   /* 20 */
  --fs-xl:   1.5rem;    /* 24 */
  --fs-2xl:  1.75rem;   /* 28 */
  --fs-3xl:  2rem;      /* 32 */
  --fs-4xl:  2.25rem;   /* 36 */
  --fs-5xl:  3rem;      /* 48 */
  --fs-6xl:  4rem;      /* 64 */

  --lh-tight: 1.1;
  --lh-base:  1.5;
  --lh-solto: 1.7;

  /* Espaçamento — escala de 4px observada no original */
  --sp-1:  0.25rem;  /* 4  */
  --sp-2:  0.5rem;   /* 8  */
  --sp-3:  0.75rem;  /* 12 */
  --sp-4:  1rem;     /* 16 */
  --sp-6:  1.5rem;   /* 24 */
  --sp-8:  2rem;     /* 32 */
  --sp-10: 2.5rem;   /* 40 */
  --sp-16: 4rem;     /* 64 */
  --sp-20: 5rem;     /* 80 */

  /* Raios */
  --r-sm:   10px;
  --r-md:   16px;
  --r-lg:   24px;
  --r-pill: 99px;

  /* Layout — medidas do Figma: max-width 1440 com 120px de padding lateral */
  --container: 1440px;
  --gutter: 120px;

  /* Movimento. As animações do original rodam via Framer Motion em runtime;
     aqui são aproximadas — ver BRIEFING.md. */
  --ease-saida:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-entrada: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-rapida: 180ms;
  --dur-base:   320ms;
  --dur-lenta:  600ms;
}

@media (max-width: 1199.98px) {
  :root { --gutter: var(--sp-10); }
}

@media (max-width: 809.98px) {
  :root {
    --gutter: var(--sp-4);
    --fs-6xl: 2.5rem;
    --fs-5xl: 2rem;
    --fs-4xl: 1.75rem;
  }
}

/* ---------------------------------------------------------------------------
   Reset
   --------------------------------------------------------------------------- */

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

* { margin: 0; }

/* Transição entre páginas sem o flash branco do carregamento normal — ideia
   boa na base PHP, mas MEDIDA e desligada aqui no port Next.js: com as
   páginas já servidas estáticas (ver CLAUDE.md, "headers() forçava tudo pra
   dinâmico"), uma navegação sem isso levava 140ms; ligado, 693ms. O
   crossfade nativo do Chrome pra Cross-Document View Transition esperava
   algo (fonte? sinal de "pronto pra pintar"?) antes de animar, e isso é
   exatamente o "pisca + a página inteira dá fade" que apareceu depois do
   deploy. Não vale o custo aqui — mantido comentado, não removido, caso
   valha investigar de novo depois.
@view-transition { navigation: auto; } */

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 180ms;
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none; }
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Evita o branco entre uma página e outra enquanto o CSS ainda carrega. */
  background: var(--c-branco);
}

/* O site é claro: fundo branco, texto preto. Só o cabeçalho, o rodapé e
   algumas faixas são escuros. Confirmado no DOM renderizado do original —
   body { background: rgb(255,255,255); color: rgb(0,0,0) }. */
body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--c-preto);
  background: var(--c-branco);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

input,
button,
textarea,
select { font: inherit; color: inherit; }

p,
h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }

/* Títulos do original: Neue Montreal Bold, 48px, caixa alta, centralizados
   nas seções. O peso 400 do arquivo Bold já é o "negrito" da família. */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
}

h1 { font-size: var(--fs-5xl); }
h2 { font-size: var(--fs-5xl); }
h3 { font-size: var(--fs-2xl); }
h4 { font-size: var(--fs-lg); }

a { color: inherit; text-decoration: none; }

ul, ol { list-style: none; padding: 0; }

/* Foco visível apenas para navegação por teclado. */
:focus-visible {
  outline: 2px solid var(--c-primaria-clara);
  outline-offset: 3px;
}

/* ---------------------------------------------------------------------------
   Utilitários
   --------------------------------------------------------------------------- */

.visualmente-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.pular-para-conteudo {
  position: absolute;
  left: var(--sp-4);
  top: -100px;
  z-index: 999;
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-escura);
  color: var(--c-branco);
  border-radius: var(--r-sm);
  transition: top var(--dur-rapida) var(--ease-entrada);
}

.pular-para-conteudo:focus { top: var(--sp-4); }