/* ==========================================================================
   PESCA — design system "carta de pesca"
   Água preta de igapó, verde de isca, dourado de tucunaré, laranja de boia.
   Títulos em caixa baixa na Anybody larga; texto na Atkinson Hyperlegible
   (lida sob sol forte, no barco), também no menu, rótulos e botões; números
   de destaque na Anybody com algarismos tabulares.
   Nada inline (CSP: style-src 'self'); estados dinâmicos vêm por classe,
   atributo data-* ou propriedade CSS definida pelo JS via CSSOM.
   ========================================================================== */

@font-face {
  font-family: "Anybody";
  src: url("../fonts/anybody.woff2") format("woff2-variations"), url("../fonts/anybody.woff2") format("woff2");
  font-weight: 100 900; font-stretch: 50% 150%; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Atkinson";
  src: url("../fonts/atkinson.woff2") format("woff2-variations"), url("../fonts/atkinson.woff2") format("woff2");
  font-weight: 200 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Atkinson";
  src: url("../fonts/atkinson-italic.woff2") format("woff2-variations"), url("../fonts/atkinson-italic.woff2") format("woff2");
  font-weight: 200 800; font-style: italic; font-display: swap;
}

/* --- tokens ---------------------------------------------------------------- */
:root {
  /* espaçamento: a escala do equipamento */
  --linha: 4px;
  --anzol: 8px;
  --chumbo: 12px;
  --boia: 16px;
  --molinete: 24px;
  --vara: 32px;
  --barco: 48px;
  --rio: 72px;
  --mar: 112px;

  /* formas */
  --r-anilha: 999px;                 /* chips, contadores */
  --r-ficha: 14px;                   /* cartões */
  --r-isca: 999px;                   /* botões: pílula (boia) */
  --r-visor: 10px;                   /* painéis de dados */
  --corte: 18px;                     /* canto cortado da ficha */

  /* tipografia */
  --f-titulo: "Anybody", "Arial Black", system-ui, sans-serif;
  --f-texto: "Atkinson", "Segoe UI", system-ui, -apple-system, sans-serif;
  --f-ui: "Atkinson", "Segoe UI", system-ui, -apple-system, sans-serif;
  --f-dado: var(--f-ui);                 /* dado miúdo: horas, unidades, tabelas */
  --f-numero: "Anybody", "Arial Black", system-ui, sans-serif;  /* número de destaque */

  --t-mini: 0.78rem;
  --t-peq: 0.85rem;
  --t-base: 1.0625rem;
  --t-med: 1.25rem;
  --t-grande: clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem);
  --t-titulo: clamp(2.1rem, 1.3rem + 3.6vw, 3.6rem);
  --t-mega: clamp(2.8rem, 1.2rem + 7vw, 6.6rem);

  /* cores fixas da marca (Cardumi: rios do Brasil) */
  --urucum: #FF7A45;              /* ação principal (botões) */
  --urucum-forte: #F2622B;
  --turquesa: #19C3B1;            /* acento: links, destaques */
  --ouro: #F5B83D;
  --noite: #0E1726;
  --isca: #19C3B1;
  --isca-forte: #12A898;
  --tucunare: #F5B83D;
  --boia-cor: #E5484D;
  --mare: #4C9EEB;
  --barranco: #C7804F;
  --igapo: #1D4E6B;

  /* rampa do índice (fraca -> excelente), lida como retorno de sonar */
  --n0: #56637A;
  --n1: #3D86C6;
  --n2: #19A99A;
  --n3: #7CCB6B;
  --n4: #F5C451;
  /* número do índice escrito em texto: cor com contraste AA sobre o fundo */
  --n0-txt: #9AA8BC;
  --n1-txt: #6FAEE6;
  --n2-txt: #3FD9C6;
  --n3-txt: #8FDB7E;
  --n4-txt: #F5C451;
  /* texto sobre o preenchimento da faixa */
  --n0-sobre: #F3F6FA;
  --n1-sobre: #F3F6FA;
  --n2-sobre: #0E1726;
  --n3-sobre: #0E1726;
  --n4-sobre: #0E1726;
  --foco: #3FD9C6;
  /* fundo da página, herdado mesmo dentro das ilhas escuras (degradês de herói e cabeçalho) */
  --fundo-pagina: var(--fundo);
  --doce-txt: #3FD9C6;
  --marinho-txt: #6FAEE6;
  --estuario-txt: #E0A57A;
  --proibido-bg: #D93A3F;
  --preco: #F5B83D;

  --vel: 180ms;
  --curva: cubic-bezier(.2,.7,.2,1);
  --largura: 1240px;

  color-scheme: dark;
  --fundo: #0E1726;
  --fundo-2: #111C2E;
  --superficie: #152238;
  --superficie-2: #1B2A43;
  --superficie-3: #23344F;
  --borda: #24344C;
  --borda-forte: #33486A;
  --texto: #EEF2F7;
  --texto-2: #B6C2D2;
  --texto-3: #8695AB;
  --acento: var(--isca);
  --acento-texto: #3FD9C6;           /* acento usado como texto */
  --sobre-acento: #0E1726;
  --perigo: #FF6B6B;
  --atencao: #F5B83D;
  --ok: #4FD18B;
  --sombra-carimbo: #000;
  --isobata: rgba(25, 195, 177, 0.06);
  --vidro: rgba(14, 23, 38, 0.74);
  --marca-texto: rgba(255, 122, 69, 0.32);
  --isobatas: url("../img/isobatas.svg");
  /* fundo de tela: carta náutica (tools/gerar_fundo.py) e duas luzes difusas */
  --carta: url("../img/fundo-carta-escura.svg");
  --fundo-luz-1: rgba(25, 195, 177, 0.09);
  --fundo-luz-2: rgba(255, 122, 69, 0.06);
  --graf-idx: #3FD9C6;
  --ceu-noite: #0A1222;
  --ceu-aurora: #E9824B;
  --ceu-dia: #2E6F96;
  --hg-noite: rgba(0, 0, 0, 0.22);
  --hg-temp: #FF9A6B;
  --hg-agua: #5AB0F0;
  --hg-pres: #A9B6C8;
  --hg-ouro: #F5C451;
  --hg-ceu-dia-ico: #F3F6FA;
  /* blocos do céu (gráfico hora a hora) */
  --cel-limpo: rgba(245, 184, 61, 0.30); --cel-parcial: rgba(245, 184, 61, 0.14); --cel-nublado: rgba(180, 195, 215, 0.16);
  --cel-nevoeiro: rgba(180, 195, 215, 0.24); --cel-chuva: rgba(76, 158, 235, 0.42); --cel-chuva-forte: rgba(76, 158, 235, 0.75);
  --cel-raio: rgba(155, 140, 245, 0.70); --cel-noite: rgba(5, 10, 22, 0.55); --cel-noite-nublado: rgba(120, 135, 160, 0.20);
  --ico-sol: #FFC94D; --ico-lua: #E8EEF6; --ico-nuvem: #C9D3E0; --ico-chuva: #9CD0FF; --ico-raio: #E7DDFF;
}

@media (prefers-color-scheme: light) {
  :root:not([data-tema="escuro"]) {
    color-scheme: light;
    --fundo: #F7F3EC;
    --fundo-2: #EFE8DC;
    --superficie: #FFFDF9;
    --superficie-2: #F4EEE4;
    --superficie-3: #E9E0D2;
    --borda: #DED4C4;
    --borda-forte: #C4B6A0;
    --texto: #121C2B;
    --texto-2: #3E4B5E;
    --texto-3: #5D6A7D;
    --acento-texto: #0B7A6E;
    --sombra-carimbo: #121C2B;
    --isobata: rgba(18, 28, 43, 0.06);
    --vidro: rgba(247, 243, 236, 0.85);
    --marca-texto: rgba(255, 122, 69, 0.45);
    --isobatas: url("../img/isobatas-claro.svg");
    --carta: url("../img/fundo-carta-clara.svg");
    --fundo-luz-1: rgba(25, 195, 177, 0.08);
    --fundo-luz-2: rgba(245, 184, 61, 0.10);
    --graf-idx: #0B7A6E;
  --ceu-noite: #2F3F5E;
  --ceu-aurora: #F2A065;
  --ceu-dia: #A9D2EC;
  --hg-noite: rgba(18, 28, 43, 0.06);
  --hg-temp: #C2511F;
  --hg-agua: #1D6FB8;
  --hg-pres: #3E4B5E;
  --hg-ouro: #8A5D00;
  --hg-ceu-dia-ico: #1C3550;
  --cel-limpo: #FFE6A1; --cel-parcial: #FFF2CC; --cel-nublado: #E2E7EE; --cel-nevoeiro: #D9DEE6;
  --cel-chuva: #B3D8FA; --cel-chuva-forte: #6FB0EE; --cel-raio: #CDBDF6; --cel-noite: #2F3F5E; --cel-noite-nublado: #4B5A73;
  --ico-sol: #D98C00; --ico-lua: #F3F6FA; --ico-nuvem: #5D6A7D; --ico-chuva: #155E9E; --ico-raio: #4B2FB0;
    --n0: #CBD3DE;
    --n1: #7FAED8;
    --n2: #2BA394;
    --n3: #5DAE4E;
    --n4: #E2A82E;
    --n0-txt: #556274;
    --n1-txt: #24679F;
    --n2-txt: #0F7468;
    --n3-txt: #3A7A2C;
    --n4-txt: #8A5D00;
    --n0-sobre: #121C2B;
    --n1-sobre: #121C2B;
    --n2-sobre: #FFFFFF;
    --n3-sobre: #121C2B;
    --n4-sobre: #121C2B;
    --foco: #121C2B;
    --doce-txt: #0B7A6E;
    --marinho-txt: #1D6FB8;
    --estuario-txt: #93512A;
    --proibido-bg: #C9302C;
    --preco: #8A5D00;
    --texto-3: #5D6A7D;
    --perigo: #C9302C;
    --atencao: #9A6400;
    --ok: #1E7D45;
  }
}
:root[data-tema="claro"] {
  color-scheme: light;
  --fundo: #F7F3EC;
  --fundo-2: #EFE8DC;
  --superficie: #FFFDF9;
  --superficie-2: #F4EEE4;
  --superficie-3: #E9E0D2;
  --borda: #DED4C4;
  --borda-forte: #C4B6A0;
  --texto: #121C2B;
  --texto-2: #3E4B5E;
  --texto-3: #5D6A7D;
  --acento-texto: #0B7A6E;
  --sombra-carimbo: #121C2B;
  --isobata: rgba(18, 28, 43, 0.06);
  --vidro: rgba(247, 243, 236, 0.85);
  --marca-texto: rgba(255, 122, 69, 0.45);
  --isobatas: url("../img/isobatas-claro.svg");
  --carta: url("../img/fundo-carta-clara.svg");
  --fundo-luz-1: rgba(25, 195, 177, 0.08);
  --fundo-luz-2: rgba(245, 184, 61, 0.10);
  --graf-idx: #0B7A6E;
  --ceu-noite: #2F3F5E;
  --ceu-aurora: #F2A065;
  --ceu-dia: #A9D2EC;
  --hg-noite: rgba(18, 28, 43, 0.06);
  --hg-temp: #C2511F;
  --hg-agua: #1D6FB8;
  --hg-pres: #3E4B5E;
  --hg-ouro: #8A5D00;
  --hg-ceu-dia-ico: #1C3550;
  --cel-limpo: #FFE6A1; --cel-parcial: #FFF2CC; --cel-nublado: #E2E7EE; --cel-nevoeiro: #D9DEE6;
  --cel-chuva: #B3D8FA; --cel-chuva-forte: #6FB0EE; --cel-raio: #CDBDF6; --cel-noite: #2F3F5E; --cel-noite-nublado: #4B5A73;
  --ico-sol: #D98C00; --ico-lua: #F3F6FA; --ico-nuvem: #5D6A7D; --ico-chuva: #155E9E; --ico-raio: #4B2FB0;
  --n0: #CBD3DE;
  --n1: #7FAED8;
  --n2: #2BA394;
  --n3: #5DAE4E;
  --n4: #E2A82E;
  --n0-txt: #556274;
  --n1-txt: #24679F;
  --n2-txt: #0F7468;
  --n3-txt: #3A7A2C;
  --n4-txt: #8A5D00;
  --n0-sobre: #121C2B;
  --n1-sobre: #121C2B;
  --n2-sobre: #FFFFFF;
  --n3-sobre: #121C2B;
  --n4-sobre: #121C2B;
  --foco: #121C2B;
  --doce-txt: #0B7A6E;
  --marinho-txt: #1D6FB8;
  --estuario-txt: #93512A;
  --proibido-bg: #C9302C;
  --preco: #8A5D00;
  --texto-3: #5D6A7D;
  --perigo: #C9302C;
  --atencao: #9A6400;
  --ok: #1E7D45;
}
:root[data-tema="escuro"] { color-scheme: dark; }

/* --- base ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--f-texto);
  font-size: var(--t-base);
  line-height: 1.55;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* fundo de tela: carta náutica discreta (isóbatas de um canal, cruzes do graticulado,
   sondagens e rosa dos ventos) com duas luzes difusas. Camada fixa num pseudo-elemento:
   não repinta na rolagem, ao contrário de background-attachment: fixed */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(1100px 700px at 8% -12%, var(--fundo-luz-1), transparent 62%),
    radial-gradient(900px 640px at 104% 112%, var(--fundo-luz-2), transparent 60%),
    var(--carta) center / cover no-repeat;
}
img, svg, video { max-width: 100%; display: block; }
/* ícones do sprite: tamanho de texto por padrão; contextos aumentam */
svg:has(> use) { width: 1.15em; height: 1.15em; flex: none; display: inline-block; vertical-align: -0.2em; }
img { height: auto; }
a { color: inherit; text-decoration-color: var(--acento); text-underline-offset: 3px; }
a:hover { color: var(--acento-texto); }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--isca); color: #0E1726; }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 3px; border-radius: 4px; }
[hidden] { display: none !important; }
.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.pular { position: absolute; left: var(--boia); top: -60px; z-index: 100; background: var(--isca); color: #0E1726; padding: var(--anzol) var(--boia); border-radius: var(--r-isca); font-weight: 700; }
.pular:focus { top: var(--boia); }

h1, h2, h3, h4 {
  font-family: var(--f-titulo);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.02em;
  margin: 0 0 var(--boia);
  font-stretch: 118%;
}
h1 { font-size: var(--t-titulo); font-weight: 860; }
h2 { font-size: var(--t-grande); }
h3 { font-size: var(--t-med); font-stretch: 108%; line-height: 1.1; }
h4 { font-size: var(--t-base); font-stretch: 100%; line-height: 1.2; }
p { margin: 0 0 var(--boia); }
.mega { font-size: var(--t-mega); font-weight: 900; font-stretch: 130%; line-height: 0.9; letter-spacing: -0.035em; }
.cientifico { font-style: italic; font-family: var(--f-texto); text-transform: none; letter-spacing: 0; }
.nome-proprio { text-transform: none; }

/* sobretítulo: Anybody estreita, caixa alta, com o anzol na frente */
.sobre {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--f-ui); font-weight: 700;
  font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--acento-texto); margin-bottom: var(--chumbo);
}
.sobre::before { content: ""; width: 22px; height: 2px; border-radius: 2px; flex: none; background: currentColor; }
.lead { font-size: clamp(1.08rem, 1rem + 0.45vw, 1.3rem); color: var(--texto-2); max-width: 62ch; line-height: 1.5; }
.marca-texto { background: linear-gradient(transparent 58%, var(--marca-texto) 58%, var(--marca-texto) 92%, transparent 92%); padding: 0 2px; }
.dado { font-family: var(--f-dado); font-variant-numeric: tabular-nums; }
.mudo { color: var(--texto-3); }
.suave { color: var(--texto-2); }
.peq { font-size: var(--t-peq); }
.mini { font-size: var(--t-mini); }

/* --- layout ---------------------------------------------------------------- */
.envelope { width: 100%; max-width: var(--largura); margin: 0 auto; padding: 0 var(--boia); }
@media (min-width: 720px) { .envelope { padding: 0 var(--vara); } }
.secao { padding: var(--rio) 0; }
.secao-cab { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--boia); margin-bottom: var(--vara); }
.secao-cab h2 { margin: 0; }
.grade { display: grid; gap: var(--molinete); }
.grade-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.grade-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); }
.grade-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.pilha > * + * { margin-top: var(--boia); }
.linha-flex { display: flex; flex-wrap: wrap; align-items: center; gap: var(--anzol); }
.entre { display: flex; justify-content: space-between; align-items: center; gap: var(--boia); flex-wrap: wrap; }
.rolagem-x { display: flex; gap: var(--boia); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--chumbo); scrollbar-width: thin; }
.rolagem-x > * { scroll-snap-align: start; flex: none; }
main { min-height: 60vh; }

/* --- cabeçalho -------------------------------------------------------------- */
.topo {
  position: sticky; top: 0; z-index: 50;
  background: var(--vidro);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--borda);
}
.topo-in { display: flex; align-items: center; gap: var(--molinete); height: 64px; }
.logo { display: flex; align-items: center; flex: none; }
.logo img { height: 30px; width: auto; }
.logo .logo-claro { display: none; }
@media (prefers-color-scheme: light) { :root:not([data-tema="escuro"]) .logo .logo-escuro { display: none; } :root:not([data-tema="escuro"]) .logo .logo-claro { display: block; } }
:root[data-tema="claro"] .logo .logo-escuro { display: none; }
:root[data-tema="claro"] .logo .logo-claro { display: block; }
.nav { display: none; gap: var(--linha); margin-left: var(--anzol); }
.nav a {
  text-decoration: none; padding: var(--anzol) var(--chumbo); border-radius: var(--r-anilha);
  font-family: var(--f-ui); font-weight: 600; font-size: 0.95rem; color: var(--texto-2);
  transition: background var(--vel) var(--curva), color var(--vel);
}
.nav a:hover { background: var(--superficie-2); color: var(--texto); }
.nav a[aria-current="page"] { color: var(--sobre-acento); background: var(--isca); }
@media (min-width: 1080px) { .nav { display: flex; } }
.topo-acoes { margin-left: auto; display: flex; align-items: center; gap: var(--anzol); }
.chip-local {
  display: inline-flex; align-items: center; gap: 6px; max-width: 220px;
  border: 1px solid var(--borda-forte); background: transparent; border-radius: var(--r-anilha);
  padding: 6px var(--chumbo); font-size: var(--t-peq); cursor: pointer; color: var(--texto-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chip-local:hover { border-color: var(--isca); color: var(--texto); }
.chip-local span { overflow: hidden; text-overflow: ellipsis; }
.botao-icone {
  width: 40px; height: 40px; display: inline-grid; place-items: center; flex: none;
  border-radius: 50%; border: 1px solid var(--borda-forte); background: transparent; cursor: pointer; color: var(--texto-2);
}
.botao-icone:hover { color: var(--texto); border-color: var(--isca); }
.botao-icone svg { width: 20px; height: 20px; }

/* barra inferior estilo app, no celular */
.barra-app {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 60;
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: var(--vidro); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border-top: 1px solid var(--borda);
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
}
.barra-app a {
  display: flex; flex-direction: column; align-items: center; gap: 2px; text-decoration: none;
  font-family: var(--f-ui); font-size: 0.7rem; font-weight: 600; color: var(--texto-3); padding: 4px 0;
}
.barra-app a svg { width: 22px; height: 22px; }
.barra-app a[aria-current="page"] { color: var(--acento-texto); }
.barra-app a[aria-current="page"] svg { filter: drop-shadow(0 0 8px rgba(25, 195, 177, .45)); }
body { padding-bottom: 76px; }
@media (min-width: 1080px) { .barra-app { display: none; } body { padding-bottom: 0; } }

/* menu "mais" (gaveta) */
.gaveta {
  position: fixed; inset: 0; z-index: 80; display: none;
  background: rgba(6, 10, 18, 0.6);
}
.gaveta.aberta { display: block; }
.gaveta-painel {
  position: absolute; right: 0; top: 0; bottom: 0; width: min(380px, 92vw);
  background: var(--fundo-2); border-left: 1px solid var(--borda); padding: var(--molinete);
  overflow-y: auto; animation: entrar-direita var(--vel) var(--curva);
}
.gaveta-painel nav a {
  display: flex; align-items: center; gap: var(--chumbo); padding: var(--chumbo) 0; border-bottom: 1px dashed var(--borda);
  text-decoration: none; font-family: var(--f-ui); font-weight: 700; font-size: 1.2rem; text-transform: lowercase;
}
.gaveta-painel nav a svg { width: 22px; height: 22px; color: var(--acento-texto); }
@keyframes entrar-direita { from { transform: translateX(30px); opacity: 0; } to { transform: none; opacity: 1; } }

/* --- botões: a boia ---------------------------------------------------------
   Pílula inteira. Primário em urucum com a seta numa "boia" redonda na ponta;
   secundário com contorno fino; fantasma só texto. Sem sombra de carimbo. */
.isca, .isca-contorno, .isca-fantasma {
  --altura: 48px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: var(--altura); padding: 0 22px;
  border-radius: 999px; border: 1.5px solid transparent;
  font-family: var(--f-ui); font-weight: 700; font-size: 1rem; letter-spacing: 0.005em;
  text-decoration: none; text-transform: lowercase; cursor: pointer; white-space: nowrap;
  transition: transform var(--vel) var(--curva), box-shadow var(--vel) var(--curva), background var(--vel), border-color var(--vel), color var(--vel);
}
.isca svg, .isca-contorno svg, .isca-fantasma svg { width: 18px; height: 18px; flex: none; }
.isca { background: var(--urucum); color: #0E1726; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.35) inset, 0 6px 18px -10px rgba(255, 122, 69, 0.9); }
.isca:hover { background: #FF8B5C; color: #0E1726; transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.35) inset, 0 12px 26px -10px rgba(255, 122, 69, 0.95); }
.isca:active { transform: translateY(1px); box-shadow: 0 2px 8px -4px rgba(255, 122, 69, 0.9); }
/* seta na boia: círculo escuro translúcido na ponta direita */
.isca .seta, .isca-contorno .seta { box-sizing: content-box; width: 16px; height: 16px; padding: 6px; margin-right: -12px; border-radius: 50%; transition: transform var(--vel) var(--curva), background var(--vel); }
.isca .seta { background: rgba(14, 23, 38, 0.14); }
.isca-contorno .seta { background: color-mix(in srgb, var(--turquesa) 16%, transparent); color: var(--acento-texto); }
.isca:hover .seta, .isca-contorno:hover .seta { transform: translateX(3px); }
.isca-contorno { background: transparent; color: var(--texto); border-color: color-mix(in srgb, var(--texto) 30%, transparent); }
.isca-contorno:hover { border-color: var(--turquesa); color: var(--texto); background: color-mix(in srgb, var(--turquesa) 10%, transparent); }
.isca-fantasma { background: transparent; color: var(--acento-texto); padding: 0 10px; min-height: 40px; text-underline-offset: 5px; text-decoration-thickness: 1.5px; }
.isca-fantasma:hover { color: var(--texto); text-decoration-line: underline; text-decoration-color: var(--turquesa); }
.isca-peq { --altura: 40px; font-size: 0.92rem; padding: 0 16px; }
.isca-peq .seta { padding: 5px; margin-right: -8px; }
.isca[disabled], .isca-contorno[disabled] { opacity: .5; pointer-events: none; }

/* --- anilhas (chips) --------------------------------------------------------- */
.anilha {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 8px;
  border-radius: var(--r-anilha); border: 1px solid var(--borda-forte);
  font-size: var(--t-mini); font-weight: 700; letter-spacing: 0.02em; color: var(--texto-2);
  white-space: nowrap; line-height: 1.5; background: transparent;
}
.anilha::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .85; }
.anilha.sem-ponto::before { display: none; }
.anilha.doce { color: var(--mare); border-color: color-mix(in srgb, var(--mare) 45%, transparent); }
.anilha.marinho { color: #4C9EEB; border-color: color-mix(in srgb, #4C9EEB 45%, transparent); }
.anilha.estuarino { color: var(--barranco); border-color: color-mix(in srgb, var(--barranco) 45%, transparent); }
.anilha.proibido { color: #fff; background: var(--proibido-bg); border-color: var(--proibido-bg); }
.anilha.proibido::before { background: #fff; }
.anilha.atencao { color: var(--atencao); border-color: color-mix(in srgb, var(--atencao) 50%, transparent); }
.anilha.ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, transparent); }
.anilha.isca-cor { color: var(--acento-texto); border-color: color-mix(in srgb, var(--isca) 50%, transparent); }
button.anilha { cursor: pointer; }
button.anilha[aria-pressed="true"] { background: var(--isca); color: #0E1726; border-color: var(--isca); }
button.anilha[aria-pressed="true"]::before { background: #0E1726; }

/* --- fichas (cartões com canto cortado) --------------------------------------- */
.ficha {
  position: relative; display: block; background: var(--superficie);
  border: 1px solid var(--borda); border-radius: var(--r-ficha);
  padding: var(--molinete); text-decoration: none; color: inherit;
  clip-path: polygon(0 0, calc(100% - var(--corte)) 0, 100% var(--corte), 100% 100%, 0 100%);
  transition: transform var(--vel) var(--curva), border-color var(--vel), background var(--vel);
}
.ficha::after {
  content: ""; position: absolute; top: 0; right: 0; width: calc(var(--corte) * 1.42); height: 1px;
  background: var(--borda-forte); transform-origin: right top; transform: rotate(45deg) translate(0, 0);
}
a.ficha:hover, .ficha.clicavel:hover { transform: translateY(-3px); border-color: var(--borda-forte); background: var(--superficie-2); color: inherit; }
.ficha-num { font-family: var(--f-dado); font-size: var(--t-mini); color: var(--texto-3); letter-spacing: 0.04em; }
.ficha h3 { margin: var(--anzol) 0; }
.ficha-destaque { box-shadow: 0 22px 44px -28px rgba(0, 0, 0, 0.55); clip-path: none; border-color: var(--borda-forte); }

.painel {
  background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--r-visor);
  padding: var(--molinete);
}
.painel-escuro {
  background: linear-gradient(180deg, #0F1E1A, #0A1411); color: #EEF2F7;
  border: 1px solid #24344C; border-radius: var(--r-visor);
}

/* --- formulário ------------------------------------------------------------- */
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo label, .rotulo {
  font-family: var(--f-ui); font-weight: 700; font-size: 0.78rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--texto-3);
}
.entrada, select.entrada, textarea.entrada {
  width: 100%; min-height: 48px; padding: 10px var(--boia);
  background: var(--fundo-2); border: 1.5px solid var(--borda-forte); border-radius: 10px;
  color: var(--texto); transition: border-color var(--vel), box-shadow var(--vel);
}
textarea.entrada { min-height: 120px; resize: vertical; }
.entrada:focus { outline: none; border-color: var(--foco); box-shadow: 0 0 0 4px rgba(25, 195, 177, .28); }
.entrada::placeholder { color: var(--texto-3); }
select.entrada { appearance: none; -webkit-appearance: none; padding-right: 40px;
  background-image: url("../img/seta-baixo.svg"); background-repeat: no-repeat; background-position: right 14px center; background-size: 14px; }
.busca-grande { position: relative; }
.busca-grande .entrada { min-height: 60px; padding-left: 54px; font-size: 1.1rem; border-radius: var(--r-anilha); }
.busca-grande > svg { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; color: var(--texto-3); pointer-events: none; }
.sugestoes {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 40;
  background: var(--superficie); border: 1px solid var(--borda-forte); border-radius: var(--r-visor);
  overflow: hidden; box-shadow: 0 18px 50px rgba(0,0,0,.35); max-height: 420px; overflow-y: auto;
}
.sugestoes a, .sugestoes button {
  display: flex; align-items: center; gap: var(--chumbo); width: 100%; padding: var(--chumbo) var(--boia);
  text-decoration: none; border: 0; background: none; text-align: left; cursor: pointer; border-bottom: 1px solid var(--borda);
}
.sugestoes a:last-child, .sugestoes button:last-child { border-bottom: 0; }
.sugestoes a:hover, .sugestoes button:hover, .sugestoes .ativo { background: var(--superficie-2); color: var(--texto); }
.sugestoes img { width: 56px; height: 32px; object-fit: contain; }
.sugestoes small { color: var(--texto-3); display: block; }
.alternador { display: inline-flex; padding: 4px; border-radius: var(--r-anilha); background: var(--fundo-2); border: 1px solid var(--borda); gap: 2px; }
.alternador button {
  border: 0; background: transparent; padding: 8px var(--boia); border-radius: var(--r-anilha); cursor: pointer;
  font-family: var(--f-ui); font-weight: 700; font-size: 0.9rem; color: var(--texto-2);
  display: inline-flex; align-items: center; gap: 6px;
}
.alternador button svg { width: 16px; height: 16px; }
.alternador button[aria-pressed="true"] { background: var(--isca); color: #0E1726; }
.verificar { display: flex; gap: var(--chumbo); align-items: flex-start; cursor: pointer; }
.verificar input { width: 22px; height: 22px; accent-color: var(--isca); flex: none; margin-top: 2px; }

/* --- avisos ------------------------------------------------------------------ */
.aviso {
  display: flex; gap: var(--chumbo); align-items: flex-start; padding: var(--boia) var(--molinete) var(--boia) var(--boia);
  border-radius: var(--r-visor); border: 1px solid var(--borda-forte); background: var(--superficie);
}
.aviso > svg { width: 22px; height: 22px; flex: none; margin-top: 1px; }
.aviso p:last-child { margin-bottom: 0; }
.aviso strong { font-family: var(--f-ui); }
.aviso.perigo { border-color: color-mix(in srgb, var(--perigo) 60%, transparent); background: color-mix(in srgb, var(--perigo) 9%, var(--superficie)); }
.aviso.perigo > svg { color: var(--perigo); }
.aviso.proibido { border-color: var(--boia-cor); background: color-mix(in srgb, var(--boia-cor) 12%, var(--superficie)); }
.aviso.proibido > svg { color: var(--boia-cor); }
.aviso.atencao { border-color: color-mix(in srgb, var(--atencao) 55%, transparent); background: color-mix(in srgb, var(--atencao) 8%, var(--superficie)); }
.aviso.atencao > svg { color: var(--atencao); }
.aviso.info > svg { color: var(--mare); }
.toast {
  position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%); z-index: 90;
  background: var(--isca); color: #0E1726; padding: var(--chumbo) var(--molinete); border-radius: var(--r-isca);
  font-weight: 700; box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.5); animation: subir var(--vel) var(--curva);
}
@keyframes subir { from { transform: translate(-50%, 12px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }

/* --- tabela ------------------------------------------------------------------ */
.tabela-env { overflow-x: auto; border: 1px solid var(--borda); border-radius: var(--r-visor); background: var(--superficie); }
.tabela { width: 100%; border-collapse: collapse; font-size: var(--t-peq); }
.tabela th {
  text-align: left; padding: var(--chumbo) var(--boia); position: sticky; top: 0; background: var(--superficie-2);
  font-family: var(--f-ui); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; font-size: .72rem; color: var(--texto-3);
  border-bottom: 1px solid var(--borda); white-space: nowrap;
}
.tabela td { padding: var(--chumbo) var(--boia); border-bottom: 1px solid var(--borda); vertical-align: middle; }
.tabela tr:last-child td { border-bottom: 0; }
.tabela tbody tr:hover { background: var(--superficie-2); }
.tabela .num { text-align: right; font-family: var(--f-dado); white-space: nowrap; }
.tabela a { text-decoration: none; font-weight: 700; }

/* --- medidores e barras de mês ------------------------------------------------ */
.meses { display: grid; grid-template-columns: repeat(12, 1fr); gap: 2px; min-width: 120px; }
.meses span { height: 14px; border-radius: 2px; background: var(--superficie-3); position: relative; }
.meses span[data-n="1"] { background: var(--n0); }
.meses span[data-n="2"] { background: var(--n1); }
.meses span[data-n="3"] { background: var(--n2); }
.meses span[data-n="4"] { background: var(--n3); }
.meses span[data-n="5"] { background: var(--n4); }
.meses span.atual { outline: 2px solid var(--texto); outline-offset: 1px; }
.meses-rotulos { display: grid; grid-template-columns: repeat(12, 1fr); gap: 2px; font-family: var(--f-dado); font-size: 0.7rem; color: var(--texto-3); text-align: center; margin-top: 4px; }
.meses.grande span { height: 34px; border-radius: 4px; }
.indice-cor[data-n="0"] { --cor: var(--n0); }
.indice-cor[data-n="1"] { --cor: var(--n1); }
.indice-cor[data-n="2"] { --cor: var(--n2); }
.indice-cor[data-n="3"] { --cor: var(--n3); }
.indice-cor[data-n="4"] { --cor: var(--n4); }
.indice-cor[data-n="0"] { --cor-txt: var(--n0-txt); --cor-sobre: var(--n0-sobre); }
.indice-cor[data-n="1"] { --cor-txt: var(--n1-txt); --cor-sobre: var(--n1-sobre); }
.indice-cor[data-n="2"] { --cor-txt: var(--n2-txt); --cor-sobre: var(--n2-sobre); }
.indice-cor[data-n="3"] { --cor-txt: var(--n3-txt); --cor-sobre: var(--n3-sobre); }
.indice-cor[data-n="4"] { --cor-txt: var(--n4-txt); --cor-sobre: var(--n4-sobre); }
.estrelas { display: inline-flex; gap: 2px; color: var(--preco); }
.estrelas svg { width: 14px; height: 14px; }
.estrelas .apagada { color: var(--superficie-3); }

/* --- separadores ------------------------------------------------------------- */
.linha-de-pesca { height: 18px; border: 0; margin: var(--barco) 0; background: url("../img/linha.svg") left center / auto 18px repeat-x; opacity: .7; }

/* --- rodapé ------------------------------------------------------------------ */
.rodape { border-top: 1px solid var(--borda); background: var(--fundo-2); padding: var(--rio) 0 var(--barco); margin-top: var(--rio); }
.rodape-marca img { width: min(560px, 100%); opacity: .95; }
.rodape-grade { display: grid; gap: var(--vara); grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin-top: var(--barco); }
.rodape h4 { font-stretch: 70%; text-transform: uppercase; letter-spacing: .12em; font-size: .78rem; color: var(--texto-3); }
.rodape ul { list-style: none; padding: 0; margin: 0; }
.rodape li { margin: 6px 0; }
.rodape a { text-decoration: none; color: var(--texto-2); }
.rodape a:hover { color: var(--acento-texto); }
.rodape-nota { margin-top: var(--barco); padding-top: var(--molinete); border-top: 1px dashed var(--borda); color: var(--texto-3); font-size: var(--t-peq); }

/* ==========================================================================
   PÁGINAS
   ========================================================================== */

/* --- home: herói ------------------------------------------------------------- */
.heroi { position: relative; min-height: min(88vh, 860px); display: flex; align-items: flex-end; overflow: hidden; isolation: isolate; color: #F3F6FA; }
.heroi-foto { position: absolute; inset: 0; z-index: -2; }
.heroi-foto img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.heroi::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(14, 23, 38, .15) 0%, rgba(14, 23, 38, .05) 30%, rgba(14, 23, 38, .78) 72%, var(--fundo-pagina) 100%),
    linear-gradient(90deg, rgba(14, 23, 38, .65) 0%, transparent 60%);
}
.heroi-in { width: 100%; padding-bottom: var(--rio); padding-top: 120px; }
.heroi h1 { font-size: var(--t-mega); font-weight: 900; font-stretch: 128%; line-height: .88; letter-spacing: -0.04em; max-width: 13ch; color: #F3F6FA; margin-bottom: var(--molinete); }
.heroi h1 em { font-style: normal; color: var(--isca); display: block; font-size: 0.5em; font-stretch: 118%; line-height: 1; letter-spacing: -0.025em; margin-top: 0.3em; max-width: 22ch; }
.heroi .lead { color: #D3DCE8; }
.heroi-grade { display: grid; gap: var(--vara); align-items: end; }
@media (min-width: 980px) { .heroi-grade { grid-template-columns: 1.25fr 0.9fr; } }
.heroi .sobre { color: var(--isca); }

/* visor "hoje" no herói */
.visor {
  background: rgba(14, 23, 38, 0.78); -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid rgba(25, 195, 177, 0.22); border-radius: 20px; padding: var(--molinete); color: #EEF2F7;
  box-shadow: 0 30px 80px rgba(0,0,0,.45);
}
.visor-topo { display: flex; justify-content: space-between; align-items: center; gap: var(--chumbo); margin-bottom: var(--boia); }
.visor-local { font-family: var(--f-ui); font-weight: 700; font-size: .95rem; display: flex; align-items: center; gap: 6px; color: #C9D3E0; }
.visor-local svg { width: 16px; height: 16px; color: var(--isca); }
.visor-corpo { display: grid; grid-template-columns: auto 1fr; gap: var(--molinete); align-items: center; }
.visor .mudo { color: #8695AB; }
.visor-linha { display: flex; justify-content: space-between; gap: var(--chumbo); padding: 8px 0; border-top: 1px dashed rgba(25, 195, 177, .16); font-size: var(--t-peq); }
.visor-linha b { font-family: var(--f-dado); font-weight: 600; color: #fff; }
.visor-tira { display: grid; grid-template-columns: repeat(24, 1fr); gap: 2px; margin-top: var(--chumbo); }
.visor-tira span { height: 22px; border-radius: 2px; background: var(--cor, #56637A); }
.visor-tira span.agora { outline: 2px solid #fff; outline-offset: 1px; }
.visor-horas { display: flex; justify-content: space-between; font-family: var(--f-dado); font-size: .72rem; color: #8695AB; margin-top: 4px; }

/* medidor circular do índice ("sonar") */
.sonar { --v: 0; --cor: var(--n2); width: 132px; height: 132px; position: relative; flex: none; }
.sonar svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.sonar .trilho { fill: none; stroke: rgba(255,255,255,.09); stroke-width: 10; }
.sonar .valor { fill: none; stroke: var(--cor); stroke-width: 10; stroke-linecap: round; stroke-dasharray: 100 100; stroke-dashoffset: calc(100 - var(--v)); transition: stroke-dashoffset 900ms var(--curva); }
.sonar .anel { fill: none; stroke: rgba(25, 195, 177, .12); stroke-width: 1; }
.sonar-num { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.sonar-num b { font-family: var(--f-numero); font-size: 2.5rem; font-weight: 800; font-stretch: 100%; line-height: 1; letter-spacing: -0.03em; }
.sonar-num small { font-family: var(--f-ui); text-transform: uppercase; letter-spacing: .14em; font-size: .62rem; margin-top: 6px; color: var(--cor-txt, var(--cor)); font-weight: 800; }
.sonar.grande { width: 180px; height: 180px; }
.sonar.grande .sonar-num b { font-size: 3.2rem; }

/* atalhos da home */
.atalhos { display: grid; gap: var(--boia); grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.atalho {
  position: relative; min-height: 250px; border-radius: var(--r-ficha); overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; justify-content: flex-end; padding: var(--molinete); text-decoration: none; color: #F3F6FA;
  border: 1px solid var(--borda);
}
.atalho img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 600ms var(--curva); }
.atalho::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 20%, rgba(9, 15, 26, .88) 85%); }
.atalho:hover img { transform: scale(1.05); }
.atalho:hover { color: #fff; }
.atalho h3 { font-size: 1.7rem; margin: 0 0 6px; font-stretch: 125%; }
.atalho p { margin: 0; color: #C9D3E0; font-size: var(--t-peq); }
.atalho .anilha { position: absolute; top: var(--boia); left: var(--boia); color: var(--isca); border-color: rgba(25, 195, 177, .5); background: rgba(9, 15, 26, .6); }
.atalho-grande { grid-row: span 2; min-height: 520px; }
@media (max-width: 700px) { .atalho-grande { min-height: 320px; grid-row: auto; } }
.atalho-num { position: absolute; top: var(--boia); right: var(--boia); font-family: var(--f-dado); font-size: .78rem; color: #C9D3E0; }

/* faixa "agora" */
.faixa-agora { border-block: 1px solid var(--borda); background: var(--fundo-2); }
.faixa-agora .envelope { display: grid; gap: var(--molinete); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); padding-block: var(--molinete); }
.agora-item { display: flex; align-items: center; gap: var(--chumbo); }
.agora-item svg { width: 34px; height: 34px; color: var(--acento-texto); flex: none; }
.agora-item b { display: block; font-family: var(--f-titulo); font-stretch: 105%; font-size: 1.05rem; line-height: 1.15; }
.agora-item span { color: var(--texto-3); font-size: var(--t-peq); }
.lua-icone { width: 34px; height: 34px; flex: none; }

/* --- cartão de espécie --------------------------------------------------------- */
.esp-card { display: flex; flex-direction: column; gap: var(--chumbo); padding: var(--boia) var(--boia) var(--molinete); width: 100%; height: 100%; }
.esp-card .esp-arte {
  aspect-ratio: 16 / 9; border-radius: 10px; display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(ellipse at 50% 60%, var(--superficie-3), transparent 70%), var(--isobatas) center / 520px auto;
}
.esp-card .esp-arte img { width: 92%; height: 92%; object-fit: contain; filter: drop-shadow(0 10px 18px rgba(0,0,0,.35)); transition: transform 500ms var(--curva); }
.esp-card:hover .esp-arte img { transform: scale(1.05) rotate(-1.5deg); }
.esp-card .esp-arte svg { width: 30%; height: auto; color: var(--borda-forte); }
.esp-card h3 { margin: 0; font-size: 1.35rem; }
.esp-card .cientifico { color: var(--texto-3); font-size: var(--t-peq); margin-top: -6px; }
.esp-card .resumo { font-size: var(--t-peq); color: var(--texto-2); margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.esp-card .rodape-card { margin-top: auto; display: flex; flex-direction: column; gap: var(--anzol); }
.rolagem-x .esp-card-env { width: 290px; }
.item-especie, .esp-card-env { display: flex; }
.item-especie > .ficha, .esp-card-env > .ficha { width: 100%; }

/* --- catálogo ------------------------------------------------------------------ */
.cab-pagina { padding: var(--barco) 0 var(--vara); position: relative; }
.cab-pagina h1 { margin-bottom: var(--chumbo); }
.cab-pagina .lead { margin-bottom: 0; }
.cab-foto { position: relative; min-height: 340px; display: flex; align-items: flex-end; overflow: hidden; isolation: isolate; color: #F3F6FA; }
.cab-foto img.fundo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.cab-foto::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(14, 23, 38, .25), rgba(14, 23, 38, .72) 70%, var(--fundo-pagina)); }
.cab-foto .envelope { padding-bottom: var(--vara); padding-top: var(--rio); }
.cab-foto h1 { color: #F3F6FA; }
.cab-foto .lead { color: #C9D3E0; }
.cab-foto .sobre { color: var(--isca); }
.filtros { display: grid; gap: var(--chumbo); grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); margin: var(--molinete) 0; }
.barra-filtros { position: sticky; top: 64px; z-index: 20; background: var(--vidro); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); padding: var(--chumbo) 0; border-bottom: 1px solid var(--borda); }
.contagem { font-family: var(--f-dado); font-size: var(--t-peq); color: var(--texto-3); }
.mais-lista { display: flex; flex-direction: column; align-items: center; gap: var(--linha); margin: var(--barco) 0; }
.vazio { text-align: center; padding: var(--rio) var(--boia); color: var(--texto-3); }
.vazio svg { width: 56px; height: 56px; margin: 0 auto var(--boia); color: var(--borda-forte); }
.miniatura { width: 72px; height: 40px; object-fit: contain; }
/* silhueta do formato do corpo, para a espécie ainda sem ilustração (img/silhuetas.svg) */
svg.silhueta { display: block; flex: none; color: var(--texto); opacity: .24; }
.esp-card .esp-arte svg.silhueta { width: 72%; height: auto; opacity: .2; }
svg.miniatura.silhueta, .oqp-item svg.silhueta { width: 72px; height: 40px; }
.sugestoes svg.silhueta, .folha .oqp-item svg.silhueta { width: 56px; height: 32px; }
.captura svg.silhueta { width: 80px; height: 46px; }
.foto-cand-cab > svg.silhueta { width: 112px; height: 56px; }
.esp-arte-grande .silhueta-grande { width: 84%; height: auto; opacity: .15; }
.arte-em-breve { position: absolute; left: 0; right: 0; bottom: 34px; text-align: center; font-size: .8rem; color: var(--texto-3); }
.tabela .nome-esp { display: flex; align-items: center; gap: var(--chumbo); min-width: 230px; }
.tabela .nome-esp small { display: block; color: var(--texto-3); font-style: italic; font-weight: 400; }

/* --- detalhe da espécie ------------------------------------------------------------ */
.esp-heroi { position: relative; padding: var(--barco) 0 var(--vara); overflow: hidden; }
.esp-heroi-grade { display: grid; gap: var(--vara); align-items: center; }
@media (min-width: 960px) { .esp-heroi-grade { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); } }
.esp-heroi h1 { font-size: clamp(2.4rem, 1.1rem + 4.2vw, 5.4rem); font-stretch: 118%; margin-bottom: var(--anzol); overflow-wrap: break-word; hyphens: auto; }
.esp-arte-grande { margin: 0; }
.esp-heroi .cientifico { font-size: 1.25rem; color: var(--texto-2); }
.esp-arte-grande { position: relative; aspect-ratio: 16 / 10; display: grid; place-items: center; }
.esp-arte-grande img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 30px 40px rgba(0,0,0,.45)); }
.esp-arte-grande .regua { position: absolute; left: 4%; right: 4%; bottom: 4%; height: 22px; border-top: 2px solid var(--borda-forte); background: url("../img/regua.svg") left top / auto 22px repeat-x; opacity: .7; }
.ficha-tecnica { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1px; background: var(--borda); border: 1px solid var(--borda); border-radius: var(--r-visor); overflow: hidden; margin-top: var(--molinete); }
.ficha-tecnica > div { background: var(--superficie); padding: var(--chumbo) var(--boia); }
.ficha-tecnica dt { font-family: var(--f-ui); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--texto-3); font-weight: 700; }
.ficha-tecnica dd { margin: 2px 0 0; font-family: var(--f-numero); font-stretch: 100%; font-size: 1.05rem; font-weight: 700; }
.subnav { position: sticky; top: 64px; z-index: 20; background: var(--vidro); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-block: 1px solid var(--borda); }
.subnav .envelope { display: flex; gap: var(--linha); overflow-x: auto; scrollbar-width: none; }
.subnav a { padding: var(--chumbo) var(--boia); text-decoration: none; white-space: nowrap; font-family: var(--f-ui); font-weight: 700; font-size: .92rem; color: var(--texto-2); border-bottom: 3px solid transparent; }
.subnav a:hover, .subnav a.ativo { color: var(--texto); border-bottom-color: var(--isca); }

/* ficha da espécie dentro da previsão: a cabeça fica mais baixa (a previsão vem logo depois),
   o índice de seções não gruda no topo (a barra de filtros já gruda ali) e o painel
   "neste local" entra no lugar dos próximos 7 dias */
.esp-heroi-local { padding: var(--vara) 0 var(--molinete); }
.esp-heroi-local h1 { font-size: clamp(2.1rem, 1rem + 3.4vw, 4.2rem); }
.esp-heroi-local .esp-arte-grande { aspect-ratio: 16 / 8; }
.ficha-local-cab { margin-top: var(--rio); padding-top: var(--rio); border-top: 1px solid var(--borda); }
.subnav-estatica { position: static; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.neste-local { margin-top: var(--molinete); }
/* a barra de filtros gruda embaixo do cabeçalho: o salto para uma seção da ficha para abaixo dela */
.ficha-na-previsao [id] { scroll-margin-top: 110px; }
@media (max-width: 640px) { .ficha-na-previsao [id] { scroll-margin-top: 0; } }
.neste-local-lista { list-style: none; margin: var(--chumbo) 0 0; padding: 0; display: grid; gap: var(--boia); }
.neste-local-lista li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--chumbo); align-items: start; }
.neste-local-lista svg { width: 20px; height: 20px; margin-top: 2px; color: var(--texto-3); }
.neste-local-lista li.ok svg { color: var(--ok); }
.neste-local-lista li.nao svg { color: var(--atencao); }
@media (max-width: 959px) {
  .esp-heroi-local { padding: var(--molinete) 0; }
  .esp-heroi-local .esp-heroi-grade { gap: var(--molinete); }
  .esp-heroi-local .lead { font-size: 1rem; }
  .esp-heroi-local .esp-arte-grande { aspect-ratio: auto; height: 150px; }
  .esp-heroi-local .esp-arte-grande .regua { display: none; }
  .esp-heroi-local .ficha-tecnica { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: var(--chumbo); }
  .esp-heroi-local .ficha-tecnica > div { padding: var(--anzol) var(--chumbo); }
}
.bloco { padding: var(--rio) 0 var(--barco); border-bottom: 1px dashed var(--borda); }
.bloco:last-of-type { border-bottom: 0; }
.fatores { display: grid; gap: var(--boia); grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.fator { display: grid; grid-template-columns: 44px 1fr; gap: var(--chumbo); align-items: start; padding: var(--boia); border-radius: var(--r-visor); background: var(--superficie); border: 1px solid var(--borda); }
.fator > svg { width: 44px; height: 44px; padding: 10px; border-radius: 50%; background: var(--superficie-2); color: var(--acento-texto); }
.fator h4 { margin: 0 0 4px; display: flex; align-items: center; justify-content: space-between; gap: var(--anzol); }
.fator p { margin: 0; font-size: var(--t-peq); color: var(--texto-2); }
.sens { display: inline-grid; grid-template-columns: repeat(5, 8px); gap: 2px; }
.sens i { height: 8px; border-radius: 2px; background: var(--superficie-3); }
.sens i.on { background: var(--tucunare); }
.equip { display: grid; gap: 1px; background: var(--borda); border: 1px solid var(--borda); border-radius: var(--r-visor); overflow: hidden; }
.equip > div { display: grid; grid-template-columns: minmax(120px, 200px) 1fr; gap: var(--boia); padding: var(--chumbo) var(--boia); background: var(--superficie); align-items: baseline; }
.equip dt { font-family: var(--f-ui); font-weight: 700; color: var(--texto-2); }
.equip dd { margin: 0; }
@media (max-width: 560px) { .equip > div { grid-template-columns: 1fr; gap: 2px; } }
.lista-iscas { display: flex; flex-wrap: wrap; gap: var(--anzol); padding: 0; margin: 0; list-style: none; }
.lista-iscas li { padding: 6px var(--chumbo); border-radius: var(--r-isca); background: var(--superficie-2); border: 1px solid var(--borda); font-size: var(--t-peq); }
.regra { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--anzol); padding: var(--boia) var(--molinete) var(--boia) var(--boia); border-left: 4px solid var(--borda-forte); background: var(--superficie); border-radius: 0 var(--r-visor) var(--r-visor) 0; }
.regra.defeso, .regra.proibicao { border-left-color: var(--boia-cor); }
.regra.tamanho_minimo, .regra.tamanho_maximo, .regra.cota { border-left-color: var(--tucunare); }
.regra h4 { margin: 0; }
.regra .fonte { font-size: var(--t-mini); color: var(--texto-3); }
.regra .fonte a { color: var(--texto-2); }
.curva-horario svg { width: 100%; height: auto; }
.mapa-mini { height: 420px; border-radius: var(--r-visor); overflow: hidden; border: 1px solid var(--borda); background: var(--fundo-2); }

/* --- mapa ---------------------------------------------------------------------
   Celular: mapa na tela toda, busca e filtros flutuando por cima, lista e detalhes numa
   folha inferior de três alturas (baixa, meia, alta), arrastável pela alça.
   Computador: a folha vira a coluna da esquerda e os filtros ficam sobre o mapa. */
/* altura exata: tela menos o cabeçalho (64 px; 58 + 1 de borda no celular) e a barra inferior */
.pagina-mapa { --topo-alt: 65px; --barra-alt: 0px; position: relative; height: calc(100vh - var(--topo-alt) - var(--barra-alt)); height: calc(100dvh - var(--topo-alt) - var(--barra-alt)); display: grid; grid-template-columns: 1fr; overflow: hidden; }
@media (max-width: 1079px) { .pagina-mapa { --barra-alt: calc(62px + env(safe-area-inset-bottom)); } }
@media (max-width: 640px) { .pagina-mapa { --topo-alt: 59px; } }
@media (min-width: 900px) { .pagina-mapa { grid-template-columns: 400px 1fr; } .folha { order: -1; } }
.mapa-area { position: relative; min-height: 0; isolation: isolate; z-index: 0; }
#mapa { position: absolute; inset: 0; background: var(--fundo-2); }
.h2-tam { font-size: var(--t-grande); }
.mapa-topo { position: absolute; top: var(--chumbo); left: var(--chumbo); right: calc(46px + var(--chumbo) * 2); z-index: 500; display: grid; gap: 6px; pointer-events: none; }
.mapa-topo > * { pointer-events: auto; }
.mapa-busca { max-width: 520px; }
.mapa-busca .entrada { min-height: 48px; font-size: 1rem; padding-left: 46px; background: var(--vidro); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 6px 18px rgba(0, 0, 0, .22); }
.mapa-busca > svg { left: 16px; width: 20px; height: 20px; z-index: 1; } /* o campo tem backdrop-filter (camada própria): a lupa vem por cima */
.mapa-chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px 2px 6px; -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
.mapa-chips::-webkit-scrollbar { display: none; }
.chip { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 13px; border-radius: 999px; border: 1px solid var(--borda-forte); background: var(--vidro); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--texto-2); font: 700 .86rem/1 var(--f-ui); cursor: pointer; white-space: nowrap; box-shadow: 0 3px 10px rgba(0, 0, 0, .16); }
.chip[aria-pressed="true"] { background: var(--superficie); color: var(--texto); border-color: color-mix(in srgb, var(--isca) 70%, transparent); }
.chip[aria-pressed="false"]:not(.chip-acao) { opacity: .78; }
.chip[aria-pressed="false"] .pm-cor { background: transparent; box-shadow: inset 0 0 0 2px var(--c); }
.chip-n { font: 700 .76rem/1 var(--f-numero); color: var(--texto-3); }
.chip-n:empty { display: none; }
.chip-acao { background: var(--urucum); color: #0E1726; border-color: transparent; }
.chip-acao[aria-pressed="true"] { background: var(--turquesa); }
.chip.ocupado { opacity: .6; pointer-events: none; }
.pm-cor { width: 10px; height: 10px; border-radius: 50%; background: var(--c); flex: none; }
.mapa-botoes { position: absolute; top: var(--chumbo); right: var(--chumbo); z-index: 500; display: grid; gap: 8px; }
.botao-mapa { width: 46px; height: 46px; border-radius: 14px; border: 1px solid var(--borda-forte); background: var(--vidro); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--texto); display: grid; place-items: center; cursor: pointer; box-shadow: 0 4px 14px rgba(0, 0, 0, .25); }
.botao-mapa svg { width: 22px; height: 22px; }
.botao-mapa[aria-pressed="true"] { color: var(--isca); border-color: color-mix(in srgb, var(--isca) 70%, transparent); }
.mapa-legenda { position: absolute; left: var(--boia); bottom: var(--boia); z-index: 500; background: var(--vidro); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); padding: var(--chumbo) var(--boia); border-radius: 12px; border: 1px solid var(--borda); font-size: var(--t-mini); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
/* marcadores por categoria (a cor vem de --c) */
.pm-destino { --c: var(--urucum); } .pm-pesqueiro { --c: var(--ouro); } .pm-ponto { --c: var(--turquesa); }
.pm-pier { --c: #4C9EEB; } .pm-rampa { --c: #9B8CF5; } .pm-marina { --c: #7CC4F5; } .pm-loja { --c: #C7804F; } /* barro; --mar é espaçamento, não cor */
.pm-relato { --c: #F0729A; } .pm-salvo { --c: #F7F3EC; }
.pm { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--c); color: #0E1726; border: 2px solid #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .4); }
.pm svg { width: 15px; height: 15px; }
.pm-grupo { display: grid; place-items: center; width: 36px; height: 36px; margin: 4px; border-radius: 50%; background: rgba(14, 23, 38, .9); color: #F3F6FA; border: 2px solid var(--turquesa); box-shadow: 0 0 0 5px rgba(25, 195, 177, .22); font: 700 .8rem/1 var(--f-numero); white-space: nowrap; }
.pm-grupo.m { width: 40px; height: 40px; margin: 2px; }
.pm-grupo.g { width: 44px; height: 44px; margin: 0; border-color: var(--urucum); box-shadow: 0 0 0 6px rgba(255, 122, 69, .25); font-size: .74rem; }
/* nível do rio (régua da ANA ou vazão do modelo): painel na previsão e no mapa, linha no visor da home */
.rio-cartao { display: grid; gap: var(--chumbo); }
.rio-cartao p { margin: 0; }
.rio-linha { display: flex; align-items: baseline; gap: var(--anzol); flex-wrap: wrap; }
.rio-nivel { font-family: var(--f-numero); font-size: clamp(1.8rem, 5vw, 2.4rem); line-height: 1; }
.rio-comp { font-weight: 600; }
.rio-faixa[data-f="muito-baixo"] { --c: var(--ouro); background: color-mix(in srgb, var(--ouro) 22%, transparent); border-color: var(--ouro); }
.rio-faixa[data-f="baixo"] { background: color-mix(in srgb, var(--ouro) 12%, transparent); border-color: color-mix(in srgb, var(--ouro) 60%, transparent); }
.rio-faixa[data-f="normal"] { background: color-mix(in srgb, var(--turquesa) 14%, transparent); border-color: var(--turquesa); }
.rio-faixa[data-f="alto"] { background: color-mix(in srgb, #4C9EEB 16%, transparent); border-color: #4C9EEB; }
.rio-faixa[data-f="muito-alto"] { background: color-mix(in srgb, #4C9EEB 30%, transparent); border-color: #4C9EEB; }
.rio-texto { display: grid; gap: var(--chumbo); align-content: start; }
.rio-previsao { display: grid; gap: 2px; }
.rio-previsao b { font-size: var(--t-med); }
.rio-cartao.com-grafico { gap: var(--molinete); }
@media (min-width: 820px) { .rio-cartao.com-grafico { grid-template-columns: minmax(240px, 1fr) 2fr; align-items: start; } }
.rio-grafico-env { display: grid; gap: var(--anzol); min-width: 0; }
.rio-grafico { min-width: 0; }
.rio-svg { display: block; width: 100%; height: auto; overflow: visible; }
.rio-svg text { font-family: var(--f-dado); }
.rio-eixo { font-size: 12px; fill: var(--texto-3); }
.rio-grade line { stroke: var(--borda); stroke-width: 1; }
.rio-faixa-tip rect { fill: color-mix(in srgb, var(--turquesa) 13%, transparent); stroke: color-mix(in srgb, var(--turquesa) 35%, transparent); stroke-width: 1; }
.rio-faixa-txt { font-size: 12px; fill: color-mix(in srgb, var(--turquesa) 75%, var(--texto)); font-weight: 600; paint-order: stroke; stroke: var(--superficie); stroke-width: 3px; stroke-linejoin: round; }
.rio-obs { fill: none; stroke: var(--mare); stroke-width: 3.5; stroke-linejoin: round; stroke-linecap: round; }
.rio-prev { fill: none; stroke: var(--mare); stroke-width: 3; stroke-dasharray: 7 6; stroke-linecap: round; }
.rio-erro polygon { fill: color-mix(in srgb, var(--mare) 14%, transparent); stroke: none; }
.rio-hoje line { stroke: var(--texto-3); stroke-width: 1.5; stroke-dasharray: 3 4; }
.rio-hoje-txt { font-size: 12.5px; font-weight: 700; fill: var(--texto); }
.rio-ponto { fill: var(--mare); stroke: var(--superficie); stroke-width: 2.5; }
.rio-ponto.prev { fill: var(--superficie); stroke: var(--mare); stroke-width: 2.5; }
.rio-valor { font-family: var(--f-numero) !important; font-size: 15px; font-weight: 700; fill: var(--texto); paint-order: stroke; stroke: var(--superficie); stroke-width: 4px; stroke-linejoin: round; }
.rio-valor.prev { fill: var(--texto-2); }
.rio-alvos rect { fill: transparent; }
.rio-alvos rect:hover { fill: color-mix(in srgb, var(--texto) 6%, transparent); }
.rio-legenda { display: flex; flex-wrap: wrap; gap: 6px var(--boia); font-size: 0.8rem; color: var(--texto-3); }
.rio-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.rio-legenda i { display: inline-block; width: 18px; height: 10px; border-radius: 3px; }
.rio-legenda .l-obs { height: 0; border-top: 3.5px solid var(--mare); border-radius: 2px; }
.rio-legenda .l-prev { height: 0; border-top: 3px dashed var(--mare); border-radius: 0; }
.rio-legenda .l-erro { background: color-mix(in srgb, var(--mare) 18%, transparent); }
.rio-legenda .l-faixa { background: color-mix(in srgb, var(--turquesa) 16%, transparent); border: 1px solid color-mix(in srgb, var(--turquesa) 40%, transparent); }
.dia-rio { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; font-family: var(--f-dado); font-size: .76rem; color: var(--texto-2); border-top: 1px dashed var(--borda); padding-top: 4px; }
.dia-rio b { color: var(--mare); font-size: .9rem; line-height: 1; }
.dia-rio[data-seta="→"] b { color: var(--texto-3); }
/* nomes do mapa (camada de cima, shadowPane): somem num zoom grande e voltam com os ladrilhos novos */
.leaflet-shadow-pane { transition: opacity 220ms ease; }
.zoom-grande .leaflet-shadow-pane { opacity: 0; transition-duration: 80ms; }
/* depois do zoom: o marcador que saiu de uma bolha desliza da posição dela (--dx, --dy, postos
   pelo mapa.js); o que juntou vários ou entrou na tela aparece com um pulo */
.pm.chegando, .pm-grupo.chegando { animation: pm-chega 420ms cubic-bezier(.22, .9, .3, 1) both; }
.pm.surgindo, .pm-grupo.surgindo { animation: pm-surge 300ms cubic-bezier(.3, 1.5, .55, 1) both; }
@keyframes pm-chega { from { transform: translate(var(--dx, 0), var(--dy, 0)) scale(.5); opacity: .35; } to { transform: none; opacity: 1; } }
@keyframes pm-surge { from { transform: scale(.25); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .pm.chegando, .pm-grupo.chegando, .pm.surgindo, .pm-grupo.surgindo { animation: none; } }
.pm-eu { display: block; width: 20px; height: 20px; border-radius: 50%; background: #3D8BFF; border: 3px solid #fff; box-shadow: 0 0 0 8px rgba(61, 139, 255, .25); }
/* folha: lista e detalhes */
.folha { position: relative; z-index: 20; background: var(--fundo-2); display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--borda); }
.folha-cab { display: flex; align-items: center; gap: var(--chumbo); padding: var(--chumbo) var(--boia); border-bottom: 1px solid var(--borda); min-height: 64px; }
.folha-resumo { display: grid; min-width: 0; flex: 1; }
.folha-resumo b { font-family: var(--f-titulo); font-stretch: 100%; font-size: 1.06rem; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.folha-resumo small { color: var(--texto-3); font-size: var(--t-mini); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.folha-voltar { flex: none; }
.folha-corpo { flex: 1; min-height: 0; overflow-y: auto; padding: var(--boia); overscroll-behavior: contain; }
.alca { display: none; }
.lista-ponto { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: var(--chumbo); align-items: center; width: 100%; min-height: 54px; padding: 8px; border: 1px solid transparent; border-radius: 12px; background: none; color: inherit; text-align: left; cursor: pointer; font: inherit; }
.lista-ponto:hover, .lista-ponto:focus-visible { background: var(--superficie); border-color: var(--borda); }
.lista-ponto .pm { width: 30px; height: 30px; border-width: 1.5px; box-shadow: none; }
.lista-ponto-txt { display: grid; min-width: 0; }
.lista-ponto-txt b { font-family: var(--f-ui); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lista-ponto-txt small { color: var(--texto-3); font-size: var(--t-mini); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lista-ponto-km { font: 700 .82rem/1 var(--f-numero); color: var(--texto-2); }
.acoes-ponto { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; align-items: center; }
.acoes-ponto > .isca, .acoes-ponto > .isca-contorno { justify-content: center; }
.acoes-ponto > .isca:first-child { grid-column: 1 / -1; }
.acoes-ponto > .isca-fantasma { justify-content: flex-start; padding-inline: 6px; }
.coord-linha { font-size: var(--t-mini); font-variant-numeric: tabular-nums; }
.ponto-salvo { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: var(--boia); align-items: start; padding: var(--boia); }
.entrada-peq { min-height: 40px; padding: 6px 12px; font-size: .95rem; }
/* "vale a pena ir hoje?": frase e quatro turnos coloridos pelo índice */
.vale-frase { font-weight: 700; margin: 4px 0 var(--chumbo); }
.turnos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-bottom: var(--chumbo); }
.turno { display: grid; justify-items: center; gap: 2px; padding: 6px 4px; border-radius: 10px; background: color-mix(in srgb, var(--cor) 22%, transparent); border: 1px solid color-mix(in srgb, var(--cor) 55%, transparent); }
.turno small { font-size: .7rem; color: var(--texto-2); }
.turno b { font: 700 1rem/1 var(--f-numero); color: var(--cor-txt, var(--texto)); }
.botao-mapa.ocupado svg, .chip.ocupado svg { animation: piscar 1s infinite; }
@keyframes piscar { 50% { opacity: .3; } }
@media (max-width: 899px) {
  #mapa { bottom: 84px; } /* o mapa acaba onde a folha baixa começa: créditos do mapa à vista */
  .folha { --cab: 92px; position: absolute; left: 0; right: 0; bottom: 0; height: 88%; z-index: 600; border-right: 0; border-top: 1px solid var(--borda); border-radius: 20px 20px 0 0; box-shadow: 0 -14px 40px rgba(0, 0, 0, .35); transform: translateY(var(--folha-y)); transition: transform .3s var(--curva); }
  .folha[data-estado="baixa"] { --folha-y: calc(100% - var(--cab)); }
  .folha[data-estado="meia"] { --folha-y: 45%; }
  .folha[data-estado="alta"] { --folha-y: 0px; }
  .folha.arrastando { transition: none; transform: translateY(calc(var(--folha-y) + var(--arrasto, 0px))); }
  .alca { display: block; flex: none; width: 100%; height: 22px; border: 0; background: transparent; padding: 0; cursor: grab; touch-action: none; }
  .alca span { display: block; width: 44px; height: 5px; border-radius: 3px; background: var(--borda-forte); margin: 9px auto 0; }
  .folha-cab { touch-action: none; padding-top: 0; min-height: calc(var(--cab) - 22px); border-bottom: 0; }
  .folha[data-estado="meia"] .folha-corpo { flex: none; height: calc(55% - var(--cab)); }
  .folha[data-estado="baixa"] .folha-corpo { visibility: hidden; }
  .mapa-legenda { left: var(--chumbo); right: var(--chumbo); bottom: calc(84px + var(--chumbo)); padding: 6px var(--chumbo); }
  .leaflet-control-attribution { max-width: 70vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
.legenda-item { display: flex; align-items: center; gap: 8px; }
.legenda-item i { width: 18px; height: 10px; border-radius: 2px; display: inline-block; }
.legenda-item .nat { background: rgba(25, 195, 177, .55); border: 1px solid var(--isca); }
.legenda-item .intro { background: rgba(245, 184, 61, .45); border: 1px dashed var(--tucunare); }
.legenda-item .mar { background: rgba(76, 158, 235, .45); border: 1px solid #4C9EEB; }
.legenda-item .dest { width: 12px; height: 12px; border-radius: 50%; background: var(--urucum); border: 2px solid #fff; }
.lista-especies-local { display: flex; flex-direction: column; gap: 6px; }
.item-esp { display: grid; grid-template-columns: 64px 1fr auto; gap: var(--chumbo); align-items: center; padding: 8px; border-radius: 10px; text-decoration: none; border: 1px solid transparent; }
.item-esp:hover { background: var(--superficie); border-color: var(--borda); color: inherit; }
.item-esp img { width: 64px; height: 36px; object-fit: contain; }
.item-esp b { display: block; font-family: var(--f-titulo); font-stretch: 100%; line-height: 1.15; }
.item-esp small { color: var(--texto-3); font-size: var(--t-mini); }
.ponto-info { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--borda); border-radius: 10px; overflow: hidden; border: 1px solid var(--borda); }
.ponto-info > div { background: var(--superficie); padding: 8px var(--chumbo); }
.ponto-info dt { font-size: .66rem; text-transform: uppercase; letter-spacing: .1em; color: var(--texto-3); font-family: var(--f-ui); font-weight: 700; }
.ponto-info dd { margin: 0; font-weight: 700; font-size: var(--t-peq); }
/* marcadores do leaflet (classes, nada inline) */
.marcador-destino { width: 16px; height: 16px; border-radius: 50%; background: var(--urucum); border: 3px solid #fff; box-shadow: 0 0 0 4px rgba(255, 122, 69, .32); }
.marcador-ponto { width: 26px; height: 26px; border-radius: 50%; background: var(--isca); border: 3px solid #0E1726; box-shadow: 0 0 0 6px rgba(25, 195, 177, .3), 0 0 22px rgba(25, 195, 177, .6); animation: pulsar 1.8s infinite; }
@keyframes pulsar { 0%,100% { box-shadow: 0 0 0 4px rgba(25, 195, 177, .35), 0 0 18px rgba(25, 195, 177, .5); } 50% { box-shadow: 0 0 0 12px rgba(25, 195, 177, 0), 0 0 28px rgba(25, 195, 177, .6); } }
.leaflet-container { font-family: var(--f-texto); background: var(--fundo-2); }
.leaflet-popup-content-wrapper { background: var(--superficie); color: var(--texto); border-radius: 12px; border: 1px solid var(--borda-forte); }
.leaflet-popup-tip { background: var(--superficie); }
.leaflet-popup-content { margin: 12px 16px; font-size: var(--t-peq); }
.leaflet-popup-content b { font-family: var(--f-titulo); font-size: 1rem; }
.leaflet-control-zoom a { background: var(--superficie) !important; color: var(--texto) !important; border-color: var(--borda) !important; }
.leaflet-control-attribution { background: var(--vidro) !important; color: var(--texto-3) !important; font-size: 10px !important; }
.leaflet-control-attribution a { color: var(--texto-2) !important; }
.leaflet-tooltip.rotulo-bacia { background: var(--vidro); color: var(--texto); border: 1px solid var(--borda); font-family: var(--f-ui); font-weight: 700; box-shadow: none; }

/* --- previsão ------------------------------------------------------------------- */
.prev-controles { display: grid; gap: var(--chumbo); grid-template-columns: minmax(0, 1fr); align-items: end; }
@media (min-width: 860px) { .prev-controles { grid-template-columns: minmax(0, 1.2fr) minmax(220px, 1fr) auto; } }
.botao-local { max-width: 100%; overflow: hidden; }
.botao-local span { overflow: hidden; text-overflow: ellipsis; }
.horizontes { display: inline-flex; gap: 4px; padding: 4px; border-radius: var(--r-anilha); background: var(--fundo-2); border: 1px solid var(--borda); }
.horizontes button { border: 0; background: transparent; cursor: pointer; padding: 10px var(--boia); border-radius: var(--r-anilha); font-family: var(--f-dado); font-weight: 600; font-size: .9rem; color: var(--texto-2); }
.horizontes button[aria-pressed="true"] { background: var(--isca); color: #0E1726; }
.prev-resumo { display: grid; gap: var(--molinete); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) { .prev-resumo { grid-template-columns: auto 1fr auto; } }
.prev-resumo h2 { margin-bottom: 6px; }
.confianca { display: inline-flex; align-items: center; gap: var(--anzol); font-size: var(--t-peq); color: var(--texto-2); }
.confianca .barra { width: 90px; height: 8px; border-radius: 4px; background: var(--superficie-3); overflow: hidden; }
.confianca .barra i { display: block; height: 100%; width: calc(var(--c, 50) * 1%); background: linear-gradient(90deg, var(--tucunare), var(--isca)); }

/* identificar pela foto */
.foto-envio { display: grid; gap: var(--chumbo); justify-items: start; }
.foto-botao { font-size: 1.05rem; }
.foto-botao svg { width: 1.3em; height: 1.3em; }
.foto-previa { width: 100%; max-height: 360px; object-fit: contain; border-radius: var(--r-visor); background: var(--superficie-2); }
.foto-status:empty { display: none; }
.foto-status { font-weight: 600; color: var(--texto-2); }
.foto-cand { display: grid; gap: var(--chumbo); padding: var(--boia); }
.foto-cand.principal { border-color: var(--isca); }
.foto-cand-cab { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: var(--boia); align-items: center; }
.foto-cand-cab img { width: 112px; height: auto; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .3)); }
.foto-cand-cab > svg { width: 56px; height: 56px; color: var(--texto-3); }
.foto-cand h3 { margin: 2px 0 0; }
.foto-conf .barra { width: 140px; }
.foto-regras { border-top: 1px solid var(--borda); padding-top: var(--chumbo); }
.foto-aviso { margin: var(--molinete) 0 var(--rio); max-width: 70ch; }
.janelas { display: flex; flex-wrap: wrap; gap: var(--anzol); }
.janela { display: inline-flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; row-gap: 2px; padding: 8px 14px; border-radius: 14px; background: color-mix(in srgb, var(--isca) 14%, var(--superficie)); border: 1px solid color-mix(in srgb, var(--isca) 40%, transparent); }
.janela b { font-family: var(--f-numero); font-weight: 700; font-stretch: 100%; font-size: 1.05rem; }
.janela small { color: var(--texto-3); }
.janela small:last-child { flex-basis: 100%; }
.janela b { white-space: nowrap; }
.dias { display: grid; gap: var(--chumbo); grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.dia {
  text-decoration: none;
  position: relative; text-align: left; cursor: pointer; padding: var(--chumbo); border-radius: 12px;
  background: var(--superficie); border: 1.5px solid var(--borda); display: flex; flex-direction: column; gap: 6px;
  transition: border-color var(--vel), transform var(--vel) var(--curva);
}
.dia:hover { border-color: var(--borda-forte); transform: translateY(-2px); }
.dia[aria-pressed="true"] { border-color: var(--isca); box-shadow: 0 0 0 3px rgba(25, 195, 177, .18); }
.dia.tendencia { background: repeating-linear-gradient(135deg, var(--superficie), var(--superficie) 8px, var(--fundo-2) 8px, var(--fundo-2) 16px); }
.dia-cab { display: flex; justify-content: space-between; align-items: baseline; }
.dia-cab b { font-family: var(--f-ui); font-size: 1rem; text-transform: lowercase; }
.dia-cab small { font-family: var(--f-dado); font-size: .78rem; color: var(--texto-3); }
.dia-indice { display: flex; align-items: baseline; gap: 6px; }
.dia-indice b { font-family: var(--f-numero); font-size: 2rem; font-weight: 800; font-stretch: 100%; letter-spacing: -0.03em; color: var(--cor-txt, var(--cor)); line-height: 1; }
.dia-indice small { font-size: .72rem; color: var(--texto-2); }
.tira { display: grid; grid-template-columns: repeat(24, 1fr); gap: 1px; }
.tira span { height: 16px; background: var(--cor, var(--superficie-3)); border-radius: 1px; }
.dia-tempo { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 8px; font-family: var(--f-dado); font-size: .76rem; color: var(--texto-2); }
.dia-conf { height: 3px; border-radius: 2px; background: var(--superficie-3); overflow: hidden; }
.dia-conf i { display: block; height: 100%; width: calc(var(--c, 50) * 1%); background: var(--tucunare); }
.dia .dia-alerta { position: absolute; top: 8px; right: 8px; width: 16px; height: 16px; color: var(--perigo); }
.dia .dia-proibido { position: absolute; top: 8px; right: 8px; width: 16px; height: 16px; color: var(--boia-cor); }
.grafico { width: 100%; overflow-x: auto; }
.grafico svg { min-width: 640px; width: 100%; height: auto; display: block; font-family: var(--f-dado); }
.grafico text { fill: var(--texto-3); font-size: 11px; }
.grafico .eixo { stroke: var(--borda); stroke-width: 1; }
.grafico .grade-l { stroke: var(--borda); stroke-dasharray: 2 4; }
.grafico .linha-pressao { fill: none; stroke: var(--mare); stroke-width: 2; }
.grafico .barra-chuva { fill: var(--mare); opacity: .75; }
.grafico .rot-forte { fill: var(--texto); font-size: 11px; font-weight: 700; }
.grafico .faixa-ens { fill: rgba(76, 158, 235, .18); }
.grafico .faixa-ens-q { fill: rgba(229, 72, 77, .16); }
.grafico .linha-ens { fill: none; stroke-width: 2; }
.grafico .barra-dia { rx: 3; }

/* ilha escura: herói, cabeçalhos com foto e visor ficam sempre sobre fundo escuro,
   então usam os tokens do tema escuro qualquer que seja o tema da página */
.heroi, .cab-foto, .visor {
  color-scheme: dark;
  --texto: #EEF2F7; --texto-2: #B6C2D2; --texto-3: #8F9EB4; --acento-texto: #3FD9C6; --borda: #24344C; --borda-forte: #33486A;
  --superficie: #152238; --superficie-2: #1B2A43; --superficie-3: #23344F; --fundo: #0E1726; --fundo-2: #111C2E; --foco: #3FD9C6;
  --n0: #56637A; --n1: #3D86C6; --n2: #19A99A; --n3: #7CCB6B; --n4: #F5C451;
  --n0-txt: #9AA8BC; --n1-txt: #6FAEE6; --n2-txt: #3FD9C6; --n3-txt: #8FDB7E; --n4-txt: #F5C451;
  --n0-sobre: #F3F6FA; --n1-sobre: #F3F6FA; --n2-sobre: #0E1726; --n3-sobre: #0E1726; --n4-sobre: #0E1726;
}
.heroi .isca-contorno, .cab-foto .isca-contorno { color: #F3F6FA; border-color: rgba(243, 246, 250, 0.55); }
/* chips e textos de cor com contraste por tema */
.anilha.doce { color: var(--doce-txt); }
.anilha.marinho { color: var(--marinho-txt); }
.anilha.estuarino { color: var(--estuario-txt); }

.curva-noite { fill: var(--hg-noite); }
.curva-linha { stroke: var(--graf-idx); }
.curva-grad { stop-color: var(--graf-idx); }

.sonar.neutro { --cor: var(--texto-3); --cor-txt: var(--texto-3); }
.prev-alertas-topo:empty { display: none; }
.prev-alertas-topo { margin-bottom: var(--molinete); }
.nao-ocorre h3 { text-transform: none; }

.sugestoes .sug { display: flex; align-items: stretch; border-bottom: 1px solid var(--borda); }
.sugestoes .sug:last-child { border-bottom: 0; }
.sugestoes .sug > a { border-bottom: 0; }
.sugestoes .sug > a:first-child { flex: 1; min-width: 0; }
.sugestoes .sug-ficha { flex: none; width: auto !important; padding: 0 var(--boia) !important; font-size: var(--t-peq); font-weight: 700; color: var(--acento-texto); border-left: 1px solid var(--borda) !important; }

.gaveta-grupo { margin: var(--boia) 0 4px; padding: 0 var(--chumbo); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--texto-3); }
.gaveta-grupo:first-child { margin-top: 0; }
.gaveta-painel nav a[aria-current="page"] { background: var(--superficie-2); color: var(--acento-texto); }

/* alvos de toque: chips e botões pequenos ganham área invisível de ~44 px */
a.anilha, button.anilha, .isca-peq, .horizontes button, .rodape li a { position: relative; }
a.anilha::after, button.anilha::after, .isca-peq::after, .horizontes button::after { content: ""; position: absolute; inset: -10px -3px; }
.rodape li a { display: inline-block; padding: 8px 0; }
.verificar { min-height: 44px; align-items: center; }

/* nome de lugar e conteúdo vindo de dados: sem caixa forçada (siglas, UF) */
.botao-local, .chip-local, .visor-local { text-transform: none; }

.comece-aqui { padding-bottom: 0; }
.comece-card { min-width: min(300px, 80vw); }

/* fontes e referências */
.referencias { border-top: 1px dashed var(--borda); padding-top: var(--molinete); margin-top: var(--vara); }
.referencias h2 { font-size: var(--t-med); }
.ref-lista { list-style: none; padding: 0; margin: var(--chumbo) 0 0; display: grid; gap: var(--chumbo); counter-reset: ref; }
.ref-lista li { display: grid; grid-template-columns: 92px 1fr; gap: var(--chumbo); align-items: start; font-size: var(--t-peq); color: var(--texto-2); }
.ref-lista a { color: var(--texto); }
.ref-txt small { display: block; margin-top: 2px; color: var(--texto-3); font-size: 0.82rem; }
.ref-tipo { justify-self: start; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--borda-forte); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--texto-2); }
.ref-tipo[data-tipo="oficial"] { color: var(--acento-texto); border-color: color-mix(in srgb, var(--acento-texto) 50%, transparent); }
.ref-tipo[data-tipo="cientifica"] { color: var(--doce-txt); border-color: color-mix(in srgb, var(--doce-txt) 50%, transparent); }
@media (max-width: 560px) { .ref-lista li { grid-template-columns: 1fr; gap: 4px; } }

[data-prev-conteudo].recarregando { opacity: 0.45; pointer-events: none; transition: opacity 0.2s; }

@media (max-width: 640px) {
  .cab-compacta { min-height: 0; }
  .cab-compacta .envelope { padding-top: 40px; padding-bottom: var(--boia); }
  /* no celular, a capa das listas (espécies, destinos, previsão) não pode ocupar a primeira tela */
  .cab-foto { min-height: 0; }
  .cab-foto .envelope { padding-top: 44px; padding-bottom: var(--boia); }
  .cab-foto h1 { font-size: clamp(1.9rem, 8.4vw, 2.5rem); }
  .cab-foto .lead { font-size: 1rem; }
  .cab-compacta .lead { display: none; }
}

/* catálogo no celular: lista compacta e filtros recolhidos */
.so-celular { display: none !important; }
@media (max-width: 640px) {
  .so-celular { display: inline-flex !important; }
  .filtros { grid-template-columns: 1fr auto !important; align-items: end; }
  .filtros .botao-filtros { order: 2; align-self: end; }
  .filtros .campo:first-of-type { order: 1; }
  .filtros:not(.aberto) .campo:not(:first-of-type) { display: none; }
  .filtros.aberto .campo:not(:first-of-type) { order: 3; grid-column: 1 / -1; }
  [data-lista-fichas] { grid-template-columns: 1fr !important; gap: var(--anzol); }
  [data-lista-fichas] .esp-card { display: grid; grid-template-columns: 92px 1fr; grid-template-areas: "arte fam" "arte nome" "arte cien" "arte rod"; column-gap: var(--chumbo); row-gap: 2px; padding: var(--chumbo); align-items: center; }
  [data-lista-fichas] .esp-card .esp-arte { grid-area: arte; aspect-ratio: 4 / 3; height: auto; margin: 0; }
  [data-lista-fichas] .esp-card > .entre { grid-area: fam; }
  [data-lista-fichas] .esp-card h3 { grid-area: nome; font-size: 1.1rem; }
  [data-lista-fichas] .esp-card .cientifico { grid-area: cien; margin: 0; font-size: 0.8rem; }
  [data-lista-fichas] .esp-card .resumo, [data-lista-fichas] .esp-card .meses { display: none; }
  [data-lista-fichas] .esp-card .rodape-card { grid-area: rod; margin-top: 2px; }
  [data-lista-fichas] .esp-card::after { display: none; }
}

.hg-dias { display: flex; gap: 6px; padding-bottom: 4px; margin-bottom: var(--chumbo); }
.hg-dia { flex: none; display: inline-flex; align-items: baseline; gap: 6px; min-height: 40px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--borda-forte); background: var(--superficie); color: var(--texto-2); font: 600 0.88rem var(--f-ui); cursor: pointer; }
.hg-dia b { font-family: var(--f-numero); font-weight: 800; color: var(--cor-txt, var(--texto)); font-variant-numeric: tabular-nums; }
.hg-dia[aria-pressed="true"] { background: var(--texto); color: var(--fundo); border-color: var(--texto); }
.hg-dia[aria-pressed="true"] b { color: var(--fundo); }

.equip-itens > summary { list-style: none; cursor: pointer; margin-bottom: var(--boia); }
.equip-itens > summary::-webkit-details-marker { display: none; }
.equip-itens[open] > summary { display: none; }

@media (max-width: 899px) { .diario-grade .diario-numeros { order: -1; } }

.dc-barra { fill: var(--borda); }
.dc-barra.com { fill: var(--graf-idx); }

/* tiras e barras de época: sempre com título e eixo */
.tira-env { display: grid; gap: 4px; }
.tira-rotulo { display: flex; justify-content: space-between; gap: var(--anzol); font-size: 0.78rem; font-weight: 700; color: var(--texto-2); }
.tira-pico { color: var(--acento-texto); }
.tira span.agora { outline: 2px solid var(--texto); outline-offset: 1px; position: relative; z-index: 1; }
.tira-eixo { display: flex; justify-content: space-between; font-size: 0.72rem; color: var(--texto-3); font-variant-numeric: tabular-nums; }
.tira-env.compacta .tira-eixo { font-size: 0.68rem; }
.tira-env.compacta .tira-eixo span:nth-child(2), .tira-env.compacta .tira-eixo span:nth-child(4) { visibility: hidden; }
.meses-env { display: grid; gap: 3px; }
.meses-tit { display: flex; justify-content: space-between; gap: var(--anzol); font-size: 0.75rem; font-weight: 700; color: var(--texto-2); }
.meses-melhor { color: var(--acento-texto); }
.meses-iniciais { display: grid; grid-template-columns: repeat(12, 1fr); gap: 2px; text-align: center; font-size: 0.68rem; color: var(--texto-3); }
.meses-iniciais .atual { color: var(--texto); font-weight: 800; }
.legenda-tira { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: var(--chumbo) 0 0; font-size: 0.82rem; color: var(--texto-2); }
.legenda-tira .rampa { display: inline-flex; gap: 2px; vertical-align: middle; }
.legenda-tira .rampa i { width: 14px; height: 10px; border-radius: 2px; }
.legenda-tira .rampa i:nth-child(1) { background: var(--n0); } .legenda-tira .rampa i:nth-child(2) { background: var(--n1); }
.legenda-tira .rampa i:nth-child(3) { background: var(--n2); } .legenda-tira .rampa i:nth-child(4) { background: var(--n3); }
.legenda-tira .rampa i:nth-child(5) { background: var(--n4); }
/* respiro entre blocos que o JS acrescenta (aviso depois dos cartões de dia) */
.dias + .aviso, .dias + .legenda-tira + .aviso, [data-agora-dias] ~ .aviso { margin-top: var(--boia); }
.painel > .aviso + .aviso { margin-top: var(--chumbo); }

.grafico .dia-sel { stroke: var(--turquesa); }
.grafico .marca-tendencia { stroke: var(--ouro); }
.grafico .marca-tendencia-txt { fill: var(--ouro); }
.grafico .ens-max { stroke: var(--hg-temp); }
.grafico .ens-min { stroke: var(--hg-agua); }

.dia-conf-env { display: grid; gap: 3px; margin-top: 4px; }
.dia-conf-env > span { font-size: 0.7rem; color: var(--texto-3); }

/* dica: "i" com balão */
.sonar-env { position: relative; display: inline-block; }
.sonar-env > .dica { position: absolute; top: 0; right: -6px; }
h2 .dica, h4 .dica { margin-left: 2px; }
.janelas-env { align-items: center; }
.dica { position: relative; display: inline-block; vertical-align: middle; }
.dica > summary { list-style: none; display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; cursor: pointer; color: var(--texto-3); }
.dica > summary::-webkit-details-marker { display: none; }
.dica > summary:hover, .dica[open] > summary { color: var(--acento-texto); background: var(--superficie-3); }
.dica > summary:focus-visible { outline: 2px solid var(--foco); outline-offset: 1px; }
.dica > summary svg { width: 16px; height: 16px; }
.dica-balao { position: absolute; z-index: 40; top: calc(100% + 6px); left: -10px; transform: translateX(var(--dx, 0px)); width: max-content; max-width: min(300px, calc(100vw - 24px));
  padding: 10px 12px; border-radius: 10px; background: var(--superficie-3); border: 1px solid var(--borda-forte); box-shadow: 0 10px 28px rgba(0,0,0,.28);
  font-family: var(--f-ui); font-size: 0.88rem; font-weight: 400; line-height: 1.45; color: var(--texto); text-transform: none; letter-spacing: 0; white-space: normal; text-align: left; }
.dica-balao b { display: block; margin-bottom: 2px; color: var(--acento-texto); font-weight: 700; }

.aviso-padrao { margin: var(--anzol) 0 0; padding: 6px 10px; border-radius: 8px; font-size: var(--t-peq); color: var(--texto); background: color-mix(in srgb, var(--tucunare) 16%, transparent); border: 1px dashed color-mix(in srgb, var(--tucunare) 60%, transparent); }
.aviso-padrao[hidden] { display: none; }
.link-botao { border: 0; padding: 0; background: none; font: inherit; font-weight: 700; color: var(--acento-texto); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.visor .aviso-padrao { color: #F3F6FA; }
.visor .link-botao { color: var(--isca); }

/* --- linha do tempo hora a hora (horas.js) ---------------------------------- */
.hg { display: grid; gap: var(--boia); }
.hg-palco { position: relative; touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: crosshair; border-radius: var(--r-1, 8px); outline-offset: 4px; }
.hg-palco:focus-visible { outline: 2px solid var(--foco); }
.hg-palco .hg-svg { display: block; width: 100%; height: auto; max-width: none; overflow: visible; font-family: var(--f-ui); font-variant-numeric: tabular-nums; }
.hg-svg text { fill: var(--texto-2); font-size: 12.5px; }
.hg-svg .hg-tit { fill: var(--texto-2); font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.hg-svg .hg-res { fill: var(--texto-2); font-size: 12px; }
.hg-svg .hg-hora { fill: var(--texto); font-size: 13px; font-weight: 700; }
.hg-svg .hg-eixo { fill: var(--texto-3); font-size: 11px; }
.hg-sol text { fill: var(--hg-ouro); font-size: 11.5px; font-weight: 700; }
.hg-sol .hg-ico { color: var(--hg-ouro); }
.hg-ico { overflow: visible; }
.hg-cel.limpo { fill: var(--cel-limpo); } .hg-cel.parcial { fill: var(--cel-parcial); } .hg-cel.nublado { fill: var(--cel-nublado); }
.hg-cel.nevoeiro { fill: var(--cel-nevoeiro); } .hg-cel.chuva { fill: var(--cel-chuva); } .hg-cel.chuva.forte { fill: var(--cel-chuva-forte); }
.hg-cel.raio { fill: var(--cel-raio); }
.hg-cel.noite.limpo, .hg-cel.noite.parcial { fill: var(--cel-noite); } .hg-cel.noite.nublado, .hg-cel.noite.nevoeiro { fill: var(--cel-noite-nublado); }
.hg-ceu-ico.limpo, .hg-ceu-ico.parcial { color: var(--ico-sol); } .hg-ceu-ico.noite.limpo, .hg-ceu-ico.noite.parcial { color: var(--ico-lua); }
.hg-ceu-ico.nublado, .hg-ceu-ico.nevoeiro { color: var(--ico-nuvem); } .hg-ceu-ico.noite.nublado, .hg-ceu-ico.noite.nevoeiro { color: var(--ico-lua); }
.hg-ceu-ico.chuva, .hg-ceu-ico.chuva-forte { color: var(--ico-chuva); } .hg-ceu-ico.raio { color: var(--ico-raio); }
.hg-svg .hg-mm { fill: var(--ico-chuva); font-size: 12px; font-weight: 800; }
.hg-legenda .hg-l-cel i { border: 1px solid var(--borda); }
.hg-l-cel.limpo i { background: var(--cel-limpo); } .hg-l-cel.nublado i { background: var(--cel-nublado); }
.hg-l-cel.chuva i { background: var(--cel-chuva-forte); } .hg-l-cel.raio i { background: var(--cel-raio); }
.hg-ceu-ico { color: #F3F6FA; }
.hg-ceu-ico.dia { color: var(--hg-ceu-dia-ico); }
.hg-svg .hg-un { text-transform: none; letter-spacing: 0.02em; font-weight: 400; }
.hg-ceu-ico.perigo { color: #F5C451; }
.hg-noite { fill: var(--hg-noite); }
.hg-grade { stroke: var(--borda); stroke-dasharray: 2 5; }
.hg-base { stroke: var(--borda); }
.hg-faixa { fill: var(--texto); opacity: 0.09; }
.hg-area { opacity: 0.6; }
.hg-linha { fill: none; stroke-width: 3.5; stroke-linejoin: round; stroke-linecap: round; }
.hg-pico { fill: var(--fundo); stroke: var(--texto); stroke-width: 2; }
.hg-perigo { fill: var(--boia-cor); opacity: 0.8; }
.hg-janela { fill: var(--texto-3); opacity: 0.6; }
.hg-janela.melhor { fill: var(--isca); opacity: 1; }
.hg-solunar rect { fill: var(--hg-ouro); opacity: 0.07; }
.hg-solunar.maior rect { opacity: 0.14; }
.hg-solunar line { stroke: var(--hg-ouro); stroke-width: 3; opacity: 0.55; stroke-linecap: round; }
.hg-solunar.maior line { opacity: 0.9; }
.hg-svg .hg-solunar text { fill: var(--hg-ouro); font-size: 10.5px; font-weight: 700; }
.hg-solunar .hg-ico { color: var(--hg-ouro); }
.hg-temp { fill: none; stroke: var(--hg-temp); stroke-width: 2.25; }
.hg-agua { fill: none; stroke: var(--hg-agua); stroke-width: 2; stroke-dasharray: 5 4; }
.hg-svg .hg-val { font-size: 11.5px; fill: var(--texto-2); text-anchor: middle; }
.hg-svg .hg-val.forte { fill: var(--texto); font-weight: 700; }
.hg-seta { fill: var(--texto-3); }
.hg-seta.moderado { fill: var(--texto); }
.hg-seta.forte { fill: var(--hg-ouro); }
.hg-seta.perigo { fill: var(--boia-cor); }
.hg-svg .hg-val.vento.calmo { fill: var(--texto-3); }
.hg-svg .hg-val.vento.forte { fill: var(--hg-ouro); font-weight: 700; }
.hg-svg .hg-val.vento.perigo, .hg-svg .hg-val.onda.perigo { fill: var(--boia-cor); font-weight: 700; }
.hg-svg .hg-val.onda.forte { fill: var(--hg-ouro); font-weight: 700; }
.hg-prob { fill: var(--mare); opacity: 0.12; }
.hg-chuva { fill: var(--mare); }
.hg-svg .hg-val.chuva { fill: var(--mare); font-weight: 700; font-size: 11px; }
.hg-pres { fill: none; stroke: var(--hg-pres); stroke-width: 2; }
.hg-mare { fill: none; stroke: var(--hg-agua); stroke-width: 2; }
.hg-mare-area { fill: var(--hg-agua); opacity: 0.14; }
.hg-mare-ext { fill: var(--fundo); stroke: var(--hg-agua); stroke-width: 1.75; }
.hg-mare-ext.alta { fill: var(--hg-agua); }
.hg-svg .hg-val.mare { fill: var(--hg-agua); font-size: 11px; font-weight: 700; }
.hg-agora { stroke: var(--texto); stroke-width: 1.25; stroke-dasharray: 3 3; opacity: 0.55; }
.hg-col { fill: var(--texto); opacity: 0.07; }
.hg-fio { stroke: var(--texto); stroke-width: 1.25; opacity: 0.7; }
.hg-cracha rect { fill: var(--texto); }
.hg-svg .hg-cracha text { fill: var(--fundo); font-size: 11.5px; font-weight: 700; }
.hg-ponto { stroke: var(--fundo); stroke-width: 2.5; }
.hg-ponto.temp { fill: var(--hg-temp); }
.hg-ponto.pres { fill: var(--hg-pres); }
.hg-ponto.mare { fill: var(--hg-agua); }
.hg-svg .hg-ponto-txt { fill: var(--texto); font-family: var(--f-numero); font-weight: 800; font-size: 14px; paint-order: stroke; stroke: var(--fundo); stroke-width: 4px; stroke-linejoin: round; }
@media (prefers-color-scheme: light) { :root:not([data-tema="escuro"]) .hg-linha { stroke: var(--texto); stroke-width: 2.25; } :root:not([data-tema="escuro"]) .hg-area { opacity: 0.85; } }
:root[data-tema="claro"] .hg-linha { stroke: var(--texto); stroke-width: 2.25; }
:root[data-tema="claro"] .hg-area { opacity: 0.85; }

.hg-leitura { display: grid; gap: var(--chumbo); padding: var(--boia); background: var(--superficie-2); border: 1px solid var(--borda); border-radius: var(--r-2, 12px); min-height: 132px; }
.hg-l-cab { display: flex; flex-wrap: wrap; align-items: center; gap: var(--anzol) var(--boia); }
.hg-l-hora { display: grid; line-height: 1; }
.hg-l-hora b { font-family: var(--f-numero); font-weight: 800; font-size: 1.6rem; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.hg-l-hora small { color: var(--texto-3); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; margin-top: 4px; }
.hg-l-idx { display: flex; align-items: center; gap: var(--anzol); padding: 4px 12px 4px 4px; border-radius: 999px; background: color-mix(in srgb, var(--cor) 18%, transparent); border: 1px solid color-mix(in srgb, var(--cor) 55%, transparent); }
.hg-l-idx > b { display: grid; place-items: center; min-width: 2.4rem; height: 2.4rem; border-radius: 999px; background: var(--cor); color: var(--cor-sobre, #0E1726); font-family: var(--f-numero); font-weight: 800; font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.hg-l-idx span { display: grid; line-height: 1.15; }
.hg-l-idx strong { font-size: 0.95rem; }
.hg-l-idx small { color: var(--texto-3); font-size: 0.75rem; }
.hg-l-dados { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: var(--anzol) var(--boia); margin: 0; }
.hg-l-dados div { min-width: 0; }
.hg-l-dados dt { color: var(--texto-3); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.hg-l-dados dd { margin: 2px 0 0; font-size: 0.95rem; font-variant-numeric: tabular-nums; display: flex; align-items: flex-start; gap: 5px; }
.hg-l-dados dd svg { margin-top: 0.15em; }
.hg-l-dados dd svg { width: 1.15em; height: 1.15em; flex: none; color: var(--texto-2); }
.hg-dir { transform: rotate(var(--rot, 0deg)); }
.hg-l-fatores { margin: 0; font-size: 0.88rem; display: flex; flex-wrap: wrap; gap: 4px var(--boia); color: var(--texto-2); }
.hg-l-fatores b { font-weight: 700; }
.hg-l-fatores .a-favor b { color: var(--acento-texto); }
.hg-l-fatores .contra b { color: var(--atencao); }
.hg-legenda { display: flex; flex-wrap: wrap; gap: 6px var(--boia); font-size: 0.8rem; color: var(--texto-3); }
.hg-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.hg-legenda i { display: inline-block; width: 16px; height: 10px; border-radius: 3px; }
.hg-l-rampa { gap: 0 !important; }
.hg-l-rampa i { width: 10px; border-radius: 0; }
.hg-l-rampa i:first-child { border-radius: 3px 0 0 3px; }
.hg-l-rampa i:nth-child(5) { border-radius: 0 3px 3px 0; margin-right: 6px; }
.hg-l-rampa i[data-n="0"] { background: var(--n0); } .hg-l-rampa i[data-n="1"] { background: var(--n1); }
.hg-l-rampa i[data-n="2"] { background: var(--n2); } .hg-l-rampa i[data-n="3"] { background: var(--n3); }
.hg-l-rampa i[data-n="4"] { background: var(--n4); }
.hg-l-faixa i { background: var(--texto); opacity: 0.18; }
.hg-l-solunar i { background: var(--hg-ouro); height: 3px; }
.hg-l-janela i { background: var(--isca); height: 4px; }
.hg-l-noite i { background: var(--ceu-noite); }
.hg-nota { margin: 0; font-size: 0.85rem; color: var(--atencao); }
@media (max-width: 560px) {
  .hg-leitura { padding: var(--chumbo); }
  .hg-l-dados { grid-template-columns: 1fr 1fr; }
  .hg-l-dados dd { font-size: 0.88rem; }
}
.horas-tabela td, .horas-tabela th { padding: 8px 10px; }
.horas-tabela .idx { font-weight: 800; color: var(--cor-txt, var(--cor)); }
.calendario-28 { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.calendario-28 .cab-semana { font-family: var(--f-ui); text-transform: uppercase; letter-spacing: .12em; font-size: .68rem; color: var(--texto-3); text-align: center; }
.cel {
  position: relative; aspect-ratio: 1 / 1; border-radius: 10px; padding: 6px; cursor: pointer; border: 1.5px solid transparent;
  background: color-mix(in srgb, var(--cor) calc(var(--c, 60) * 1%), var(--superficie));
  display: flex; flex-direction: column; justify-content: space-between; text-align: left; min-width: 0;
}
.cel:hover { border-color: var(--texto-3); }
.cel[aria-pressed="true"] { border-color: var(--texto); }
.cel .d { font-family: var(--f-dado); font-size: .78rem; color: var(--texto); }
.cel b { font-family: var(--f-numero); font-weight: 800; font-stretch: 100%; font-size: clamp(1rem, 2.4vw, 1.4rem); line-height: 1; color: var(--texto); }
.cel .lua-mini { position: absolute; top: auto; bottom: 4px; right: 4px; width: 12px; height: 12px; }
.cel.vazia { background: transparent; cursor: default; }
.cel.na-viagem { box-shadow: inset 0 0 0 3px var(--tucunare); }
.cel.tendencia::after { content: ""; position: absolute; inset: 0; border-radius: 10px; background: repeating-linear-gradient(135deg, transparent 0 7px, rgba(0,0,0,.12) 7px 9px); pointer-events: none; }
.legenda-indice { display: flex; gap: 4px; align-items: center; font-size: var(--t-mini); color: var(--texto-3); flex-wrap: wrap; }
.legenda-indice i { width: 26px; height: 10px; border-radius: 2px; }
.legenda-indice i:nth-of-type(1) { background: var(--n0); } .legenda-indice i:nth-of-type(2) { background: var(--n1); }
.legenda-indice i:nth-of-type(3) { background: var(--n2); } .legenda-indice i:nth-of-type(4) { background: var(--n3); }
.legenda-indice i:nth-of-type(5) { background: var(--n4); }
.componentes { display: grid; gap: 8px; }
.componente { display: grid; grid-template-columns: 110px 1fr 44px; gap: var(--chumbo); align-items: center; font-size: var(--t-peq); }
.componente .barra { height: 10px; border-radius: 5px; background: var(--superficie-3); overflow: hidden; }
.componente .barra i { display: block; height: 100%; width: calc(var(--v, 0) * 1%); background: var(--cor, var(--isca)); border-radius: 5px; }
.componente span:last-child { font-family: var(--f-dado); text-align: right; color: var(--texto-2); }
.fontes-lista { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.fontes-lista li { display: flex; gap: var(--anzol); align-items: center; font-size: var(--t-peq); color: var(--texto-2); }
.fontes-lista li::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--isca); flex: none; }
.carregando { display: grid; place-items: center; min-height: 260px; color: var(--texto-3); gap: var(--chumbo); text-align: center; }
.carregando .ping { width: 64px; height: 64px; border-radius: 50%; border: 2px solid var(--isca); animation: ping 1.4s infinite var(--curva); }
@keyframes ping { 0% { transform: scale(.4); opacity: 1; } 100% { transform: scale(1.4); opacity: 0; } }

/* --- equipamentos e guias -------------------------------------------------------- */
.cat-nav { display: flex; gap: var(--anzol); flex-wrap: wrap; }
.item-equip h3 { display: flex; align-items: center; gap: var(--anzol); }
.especs { display: grid; grid-template-columns: auto 1fr; gap: 4px var(--chumbo); font-size: var(--t-peq); margin: var(--chumbo) 0; }
.especs dt { color: var(--texto-3); }
.especs dd { margin: 0; font-family: var(--f-dado); font-size: .82rem; }
.preco { font-family: var(--f-dado); color: var(--preco); letter-spacing: .1em; }
.dicas-lista { margin: 0; padding-left: 1.1em; font-size: var(--t-peq); color: var(--texto-2); }
.dicas-lista li { margin: 4px 0; }
.dicas-lista.erros li::marker { content: "✕  "; color: var(--perigo); }
.dicas-lista.boas li::marker { content: "→  "; color: var(--acento-texto); }
.passos { counter-reset: passo; list-style: none; padding: 0; margin: var(--boia) 0; display: grid; gap: var(--chumbo); }
.passos li { counter-increment: passo; display: grid; grid-template-columns: 40px 1fr; gap: var(--chumbo); align-items: start; }
.passos li::before { content: counter(passo, decimal-leading-zero); font-family: var(--f-dado); font-weight: 700; font-size: .9rem; color: #0E1726; background: var(--isca); border-radius: var(--r-isca); height: 30px; display: grid; place-items: center; }
.guia-corpo { max-width: 760px; }
.guia-corpo h2 { margin-top: var(--barco); }
.guia-indice { font-size: var(--t-peq); }
.guia-indice-env > summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: 0 var(--chumbo);
  border: 1px solid var(--borda); border-radius: 12px; background: var(--superficie); font-weight: 700; }
.guia-indice-env > summary::-webkit-details-marker { display: none; }
.guia-indice-env > summary::after { content: "▾"; color: var(--texto-3); }
.guia-indice-env[open] > summary::after { content: "▴"; }
.guia-indice-env[open] > .guia-indice { margin-top: var(--anzol); }
@media (min-width: 1000px) {
  .guia-indice-env { position: sticky; top: 88px; }
  .guia-indice-env > summary { display: none; }
  .guia-indice-env > .guia-indice { margin-top: 0; }
}
.guia-indice a { display: block; padding: 6px 0 6px var(--chumbo); border-left: 2px solid var(--borda); text-decoration: none; color: var(--texto-2); }
.guia-indice a:hover { border-left-color: var(--isca); color: var(--texto); }
.guia-grade { display: grid; gap: var(--barco); }
@media (min-width: 1000px) { .guia-grade { grid-template-columns: 220px 1fr; } }
.caixa-dica { border-radius: var(--r-visor); padding: var(--boia) var(--molinete); margin: var(--boia) 0; background: color-mix(in srgb, var(--isca) 8%, var(--superficie)); border: 1px solid color-mix(in srgb, var(--isca) 30%, transparent); }
.caixa-erro { border-radius: var(--r-visor); padding: var(--boia) var(--molinete); margin: var(--boia) 0; background: color-mix(in srgb, var(--perigo) 7%, var(--superficie)); border: 1px solid color-mix(in srgb, var(--perigo) 30%, transparent); }
.caixa-dica h4, .caixa-erro h4 { font-stretch: 70%; text-transform: uppercase; letter-spacing: .12em; font-size: .78rem; margin-bottom: 6px; }
.caixa-dica h4 { color: var(--acento-texto); }
.caixa-erro h4 { color: var(--perigo); }
.sonar-ilustra { border-radius: var(--r-visor); overflow: hidden; border: 1px solid var(--borda); background: #0A111D; }
.sonar-ilustra svg { width: 100%; height: auto; }
.sonar-ilustra .rot { fill: #EEF2F7; font-family: var(--f-titulo); font-size: 13px; font-weight: 700; }
.sonar-ilustra .rot-peq { fill: #9AA8BC; font-family: var(--f-dado); font-size: 10px; }
.sonar-ilustra .alvo { cursor: pointer; }
.sonar-ilustra .alvo circle { fill: var(--isca); stroke: #0A111D; stroke-width: 2; }
.sonar-ilustra .alvo text { fill: #0A111D; font-family: var(--f-dado); font-size: 11px; font-weight: 800; }
.sonar-ilustra .alvo.ativo circle { fill: var(--tucunare); }

/* --- regras ------------------------------------------------------------------- */
.gantt { display: grid; gap: 4px; }
.gantt-linha { display: grid; grid-template-columns: minmax(150px, 260px) 1fr; gap: var(--chumbo); align-items: center; font-size: var(--t-peq); }
.gantt-barra { position: relative; height: 26px; background: var(--superficie); border: 1px solid var(--borda); border-radius: 6px; overflow: hidden; }
.gantt-barra i { position: absolute; top: 3px; bottom: 3px; border-radius: 4px; background: var(--boia-cor); opacity: .85; left: calc(var(--i) * 1%); width: calc(var(--w) * 1%); }
.gantt-barra .hoje { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--foco); left: calc(var(--h) * 1%); }
.gantt-meses { display: grid; grid-template-columns: minmax(150px, 260px) 1fr; gap: var(--chumbo); }
.gantt-meses div:last-child { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); font-family: var(--f-dado); font-size: .72rem; color: var(--texto-3); }
.gantt-meses div:last-child span { overflow: hidden; }
@media (max-width: 640px) { .gantt-meses div:last-child { font-size: .5rem; } }
@media (max-width: 640px) { .gantt-linha, .gantt-meses { grid-template-columns: 96px minmax(0, 1fr); } }

/* --- ferramentas --------------------------------------------------------------- */
.ferramenta { scroll-margin-top: 90px; }
.ferramenta.grade-2 { align-items: start; }
/* resultado preso à ferramenta: acompanha a rolagem e não some atrás do teclado */
.ferramenta > .resultado { position: sticky; top: 84px; align-self: start; display: grid; gap: var(--anzol); }
@media (max-width: 719px) {
  .ferramenta > .resultado { order: -1; top: 64px; z-index: 5; padding: 12px 16px; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18); }
}
.resultado p { margin: 0; }
.resultado-frase { color: var(--texto-2); font-size: 1rem; }
.resultado-frase b { color: var(--texto); }
.resultado-grande, .resultado-medio { font-family: var(--f-numero); font-stretch: 100%; font-weight: 800; letter-spacing: -0.02em; line-height: 1; color: var(--acento-texto); font-variant-numeric: tabular-nums lining-nums; }
.resultado-grande { font-size: clamp(2.2rem, 5vw, 3.4rem); }
.resultado-medio { font-size: clamp(1.25rem, 5vw, 1.6rem); margin: 2px 0 !important; white-space: nowrap; }
.resultado-grande small, .resultado-medio small { font-family: var(--f-ui); font-weight: 600; font-size: .42em; color: var(--texto-2); letter-spacing: 0; }
.diametros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--chumbo); }
.atencao-txt { color: var(--atencao); font-weight: 700; }
details.como summary { cursor: pointer; font-size: var(--t-peq); font-weight: 700; color: var(--texto-2); }
/* −/+ ao lado do número */
.passo { display: flex; align-items: stretch; gap: 6px; }
.passo .entrada { flex: 1; min-width: 0; text-align: center; font-variant-numeric: tabular-nums; }
.passo-btn { flex: none; width: 44px; min-height: 44px; border-radius: 12px; border: 1px solid var(--borda-forte); background: var(--superficie-2); color: var(--texto); font-size: 1.4rem; font-weight: 700; line-height: 1; cursor: pointer; }
.passo-btn:active { transform: translateY(1px); background: var(--superficie-3); }
.cores-isca { display: flex; flex-wrap: wrap; gap: var(--anzol); }
.cor-isca { display: flex; align-items: center; gap: 8px; padding: 6px var(--chumbo) 6px 6px; border-radius: var(--r-anilha); background: var(--superficie-2); border: 1px solid var(--borda); font-size: var(--t-peq); font-weight: 700; }
.cor-isca i { width: 26px; height: 26px; border-radius: 50%; border: 2px solid rgba(255,255,255,.4); background: var(--amostra, #888); }
.solunar-mes { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.solunar-dia { background: var(--superficie); border: 1px solid var(--borda); border-radius: 10px; padding: 8px; min-height: 92px; font-size: .72rem; display: flex; flex-direction: column; gap: 3px; }
.solunar-dia b { font-family: var(--f-dado); font-size: .9rem; }
.solunar-dia.hoje { border-color: var(--isca); }
.solunar-dia .estrelas svg { width: 10px; height: 10px; }
@media (max-width: 640px) { .solunar-dia { min-height: 70px; padding: 5px; } .solunar-dia .per { display: none; } }

/* --- diário ------------------------------------------------------------------- */
.captura { display: grid; grid-template-columns: 80px 1fr auto; gap: var(--boia); align-items: center; }
.captura img { width: 80px; height: 46px; object-fit: contain; }
.estat { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--chumbo); }
.estat > div { padding: var(--boia); border-radius: var(--r-visor); background: var(--superficie); border: 1px solid var(--borda); }
.estat b { display: block; font-family: var(--f-numero); font-size: 1.9rem; font-weight: 800; font-stretch: 100%; letter-spacing: -0.03em; color: var(--acento-texto); }
.estat span { font-size: var(--t-peq); color: var(--texto-3); }

/* --- destinos ------------------------------------------------------------------- */
.dest-card { display: flex; flex-direction: column; gap: var(--anzol); height: 100%; }
.dest-card .uf { font-family: var(--f-dado); font-size: .78rem; color: var(--texto-3); }

/* --- utilidades de movimento ------------------------------------------------------- */
.revelar { opacity: 0; transform: translateY(18px); transition: opacity 700ms var(--curva), transform 700ms var(--curva); }
.revelar.visivel { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
  .revelar { opacity: 1; transform: none; }
}
@media print {
  .topo, .barra-app, .rodape, .subnav, .barra-filtros { display: none !important; }
  body { background: #fff; color: #000; padding: 0; }
}

/* --- complementos ------------------------------------------------------------ */
.secao-curta { padding: var(--barco) 0; }
[data-sonar-legenda] li { padding: 4px 8px; border-radius: 8px; transition: background var(--vel); }
[data-sonar-legenda] li.ativo { background: color-mix(in srgb, var(--tucunare) 18%, transparent); color: var(--texto); }
.filtro-regras { display: grid; gap: var(--chumbo); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); align-items: end; }
.licenca-cats { display: grid; gap: var(--boia); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.licenca-cats .valor { font-family: var(--f-numero); font-weight: 800; font-stretch: 100%; font-size: 1.6rem; color: var(--acento-texto); }
.orgaos { display: grid; gap: 6px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.orgaos a { display: flex; gap: 10px; align-items: baseline; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--borda); text-decoration: none; background: var(--superficie); }
.orgaos a b { font-family: var(--f-dado); color: var(--acento-texto); }
.secao-curta-topo { margin-top: var(--vara); }
.gantt-item summary { list-style: none; cursor: pointer; }
.gantt-item summary::-webkit-details-marker { display: none; }
.gantt-item summary:hover span:first-child { color: var(--acento-texto); }
.gantt-item[open] { margin-bottom: var(--chumbo); }
.gantt-item .regra { margin: 6px 0 0; }
details > summary.isca-fantasma { cursor: pointer; list-style: none; display: inline-flex; }
details > summary.isca-fantasma::-webkit-details-marker { display: none; }
.calendario-tabela td, .calendario-tabela th { padding: 6px 4px; }
.calendario-tabela th.mes-atual { color: var(--acento-texto); }
.cel-mes i { display: block; height: 22px; min-width: 18px; border-radius: 3px; background: var(--superficie-3); }
.cel-mes[data-n="1"] i { background: var(--n0); } .cel-mes[data-n="2"] i { background: var(--n1); }
.cel-mes[data-n="3"] i { background: var(--n2); } .cel-mes[data-n="4"] i { background: var(--n3); }
.cel-mes[data-n="5"] i { background: var(--n4); }
.glossario { margin: 0; }
.glossario > div { display: grid; grid-template-columns: minmax(130px, 240px) 1fr; gap: var(--boia); padding: var(--chumbo) 0; border-bottom: 1px dashed var(--borda); }
.glossario dt { font-family: var(--f-titulo); font-weight: 750; font-stretch: 100%; }
.glossario dd { margin: 0; color: var(--texto-2); }
@media (max-width: 560px) { .glossario > div { grid-template-columns: 1fr; gap: 2px; } }
.mapa-legenda-estatica { border-left: 2px solid var(--borda-forte); padding-left: var(--chumbo); }
.captura > svg { width: 48px; height: 48px; color: var(--borda-forte); }
.lua-mini { position: absolute; top: 6px; right: 6px; width: 14px; height: 14px; }
.acoes-heroi { margin-top: var(--boia); }
.heroi .busca-grande { margin: var(--molinete) 0 var(--boia); max-width: 560px; }
.heroi .busca-grande .entrada { background: rgba(14, 23, 38, .72); border-color: rgba(25, 195, 177, .35); color: #F3F6FA; }

/* --- celular ------------------------------------------------------------------ */
@media (max-width: 640px) {
  .topo-in { gap: var(--chumbo); height: 58px; }
  .logo img { height: 26px; }
  .chip-local { padding: 8px 10px; max-width: 44px; }
  .chip-local span { display: none; }
  .topo-acoes .botao-icone { width: 38px; height: 38px; }
  .barra-filtros, .subnav { top: 58px; }
  .secao { padding: var(--barco) 0; }
  .bloco { padding: var(--barco) 0 var(--vara); }
  .heroi-in { padding-top: 72px; padding-bottom: var(--barco); }
  .visor { padding: var(--boia); }
  .visor-corpo { gap: var(--boia); }
  .sonar { width: 110px; height: 110px; }
  .sonar-num b { font-size: 2rem; }
  .ficha { padding: var(--boia); }
  .prev-resumo .sonar.grande { width: 140px; height: 140px; }
  .calendario-28 { gap: 3px; }
  .cel { padding: 3px; border-radius: 6px; }
  .cel .d { font-size: .6rem; }
  .componente { grid-template-columns: 90px 1fr 38px; }
  .gantt-linha { font-size: .78rem; }
}
@media (max-width: 640px) {
  .barra-filtros { position: static; }
  .horizontes { width: 100%; justify-content: space-between; }
  .horizontes button { padding: 10px 12px; white-space: nowrap; font-size: .82rem; }
  .grafico svg { min-width: 720px; }
  .dias { grid-template-columns: repeat(2, 1fr); }
}

/* textos longos nunca empurram a página para o lado */
.isca-fantasma { white-space: normal; text-align: left; }
.regra .anilha, .aviso .anilha { white-space: normal; }
.regra p, .regra h4, .aviso p { overflow-wrap: anywhere; }
.solunar-dia { min-width: 0; overflow: hidden; }
@media (max-width: 640px) {
  .isca, .isca-contorno { white-space: normal; text-align: center; line-height: 1.15; padding-block: 8px; }
  .solunar-dia .estrelas svg { width: 7px; height: 7px; }
  .solunar-dia .lua-icone { width: 14px; height: 14px; }
  .cab-semana { font-size: .6rem; letter-spacing: .04em; }
}
.heroi-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; z-index: -2; opacity: 0; transition: opacity 1.2s var(--curva); }
.heroi-video.tocando { opacity: 1; }

/* o que pescar hoje */
.oqp-lista { display: grid; gap: var(--chumbo); grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); margin-bottom: var(--boia); }
.oqp-item {
  display: grid; grid-template-columns: 26px 72px minmax(0, 1fr) auto; gap: var(--chumbo); align-items: center;
  padding: var(--chumbo) var(--boia) var(--chumbo) var(--chumbo); border-radius: var(--r-ficha); text-decoration: none;
  background: var(--superficie); border: 1px solid var(--borda); transition: transform var(--vel) var(--curva), border-color var(--vel);
}
.oqp-item:hover { transform: translateY(-2px); border-color: var(--cor); color: inherit; }
.oqp-item img { width: 72px; height: 40px; object-fit: contain; }
.oqp-item > svg { width: 40px; height: 40px; color: var(--borda-forte); }
.oqp-pos { font-family: var(--f-dado); font-size: .8rem; color: var(--texto-3); }
.oqp-nome b { display: block; font-family: var(--f-titulo); font-stretch: 100%; line-height: 1.15; }
.oqp-nome small { color: var(--texto-3); font-size: var(--t-mini); }
.oqp-idx { text-align: right; }
.oqp-idx b { display: block; font-family: var(--f-numero); font-size: 1.7rem; font-weight: 800; font-stretch: 100%; line-height: 1; color: var(--cor-txt, var(--cor)); letter-spacing: -0.03em; }
.oqp-idx small { font-family: var(--f-dado); font-size: .62rem; color: var(--texto-3); }
.oqp-item.bloqueado { opacity: .55; }
.oqp-item.bloqueado .oqp-nome small { color: var(--boia-cor); }
.folha .oqp-item { grid-template-columns: 22px 56px minmax(0, 1fr) auto; padding: 8px; }
.folha .oqp-item img { width: 56px; height: 32px; }
.marcador-relato { width: 14px; height: 14px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--isca); border: 2px solid #0E1726; }
.legenda-item .rel { width: 12px; height: 12px; border-radius: 50% 50% 50% 0; background: var(--isca); border: 2px solid #0E1726; }
.mapa-mini { isolation: isolate; position: relative; z-index: 0; }

/* página do design system */
.ds-marca-escura { background: #0E1726; display: grid; place-items: center; min-height: 180px; }
.ds-marca-clara { background: #F7F3EC; display: grid; place-items: center; min-height: 180px; }
.ds-marca-escura img, .ds-marca-clara img { width: min(420px, 90%); height: auto; }
.ds-simbolo { width: 96px; height: 96px; margin-bottom: var(--chumbo); }
.ds-cores { display: grid; gap: var(--boia); grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.ds-cor { display: flex; flex-direction: column; gap: 2px; }
.ds-cor i { display: block; height: 88px; border-radius: 12px; background: var(--amostra); border: 1px solid var(--borda); margin-bottom: 6px; }
.ds-cor b { font-family: var(--f-titulo); font-stretch: 105%; }
.ds-cor small { color: var(--texto-3); font-size: var(--t-mini); }
.ds-rampa { display: grid; grid-template-columns: repeat(5, 1fr); border-radius: 12px; overflow: hidden; }
.ds-rampa span { padding: var(--boia) var(--chumbo); font-family: var(--f-dado); font-size: .8rem; color: #0E1726; }
.ds-rampa span[data-n="0"] { background: var(--n0); color: #EEF2F7; } .ds-rampa span[data-n="1"] { background: var(--n1); color: #EEF2F7; }
.ds-rampa span[data-n="2"] { background: var(--n2); } .ds-rampa span[data-n="3"] { background: var(--n3); } .ds-rampa span[data-n="4"] { background: var(--n4); }
.ds-espacos { display: grid; gap: 8px; }
.ds-espacos div { display: grid; grid-template-columns: 44px auto 1fr; gap: var(--chumbo); align-items: center; }
.ds-espacos i { display: block; height: 14px; width: calc(var(--px, 4) * 1px); background: var(--isca); border-radius: 2px; }
.ds-espacos b { font-family: var(--f-dado); font-weight: 500; font-size: .85rem; color: var(--texto-2); }
.ds-icones { display: grid; gap: var(--chumbo); grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
.ds-icones div { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: var(--boia) 6px; border-radius: 12px; border: 1px solid var(--borda); background: var(--superficie); }
.ds-icones svg { width: 28px; height: 28px; color: var(--acento-texto); }
.ds-icones small { font-family: var(--f-dado); font-size: .62rem; color: var(--texto-3); }
.ds-visor { color: #EEF2F7; }

/* algarismos tabulares em todo dado numérico (horas, tabelas, legendas) */
.dado, .tabela .num, .visor-linha b, .visor-horas, .meses-rotulos, .dia-cab small, .dia-tempo, .grafico svg, .cel .d,
.componente span:last-child, .especs dd, .passos li::before, .gantt-meses, .solunar-dia b, .dest-card .uf, .oqp-pos,
.oqp-idx small, .contagem, .ficha-num, .sonar-num b, .dia-indice b, .oqp-idx b, .estat b, .resultado-grande, .cel b,
.janela b, .ficha-tecnica dd, .licenca-cats .valor { font-variant-numeric: tabular-nums lining-nums; }