/* =====================================================================
   RIVERYAS - a folha de estilos.

   Outro territorio dos irmaos (Coastya areia e coral, Lakeyas verde-lago,
   Peakyas placa amarela, Cascadyas branco de produto, Islandyas nevoa de
   mar): a NOITE por omissao -- os rios brilham sobre escuro, cada bacia na
   sua cor, como os mapas de rios coloridos. Letra Bricolage Grotesque
   (titulos grandes e apertados), Instrument Sans (texto), DM Mono (km).
   Regras finas em vez de sombras; quadros de noite para tudo o que e
   desenho de rio (tambem no tema claro). A cor de cada rio (--rio) manda
   na pagina dele.
   ===================================================================== */

:root {
  --noite: #0C1016;
  --noite-2: #11161E;
  --noite-3: #182029;
  --quadro: #0E131A;
  --tinta: #EDF1F5;
  --tinta-2: #A9B4C1;
  --tinta-3: #6F7B89;
  --linha: rgba(255, 255, 255, .08);
  --linha-forte: rgba(255, 255, 255, .16);
  --ambar: #FFB547;
  --rosa: #FF5C8A;
  --glaciar: #4CC9F0;
  --violeta: #B79CFF;
  --rio: #FFB547;
  --rio-escuro: #9A5B00;
  --sobre-rio: #0C1016;
  --sombra-texto: 0 2px 24px rgba(0, 0, 0, .55);
  --letra-titulo: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --letra: "Instrument Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: "DM Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --largura: 1240px;
  --gutter: clamp(16px, 4vw, 40px);
  --raio: 14px;
  --raio-g: 22px;
  --t: 220ms;
  color-scheme: dark;
  --t0: #8976cd;
  --t1: #738de2;
  --t2: #5da4e5;
  --t3: #54bce2;
  --t4: #56d3da;
  --t5: #6fe4bf;
  --t6: #a2eb91;
  --t7: #e1e363;
  --t8: #febe40;
  --t9: #ff9646;
  --t10: #fd6844;
}
:root[data-theme="light"] {
  --noite: #F4F1EA;
  --noite-2: #ECE7DC;
  --noite-3: #E1DACB;
  --tinta: #13171C;
  --tinta-2: #4A525C;
  --tinta-3: #7A838D;
  --linha: rgba(19, 23, 28, .10);
  --linha-forte: rgba(19, 23, 28, .2);
  --ambar: #B86E00;
  color-scheme: light;
}
/* os quadros de rio ficam sempre na noite (o rio so brilha no escuro) */
.noite, .abertura, .faixa--viagem, .abre-inicio, .cartao__img, .rank__img, .destaque-rio, .mes-cartao__rios,
.vista__img, .faixa--destaques {
  --noite: #0C1016; --noite-2: #11161E; --noite-3: #182029;
  --tinta: #EDF1F5; --tinta-2: #A9B4C1; --tinta-3: #6F7B89;
  --linha: rgba(255, 255, 255, .08); --linha-forte: rgba(255, 255, 255, .16); --ambar: #FFB547;
}
:root[data-theme="light"] .faixa:not(.faixa--viagem) [style*="--rio-escuro"],
:root[data-theme="light"] .estica, :root[data-theme="light"] .rank { --rio-texto: var(--rio-escuro); }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 120px; }
html.i18n-espera body { visibility: hidden; }
body {
  margin: 0; background: var(--noite); color: var(--tinta); font-family: var(--letra); font-size: 17px;
  line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden;
}
img, svg { max-width: 100%; }
img { height: auto; display: block; }
a { color: inherit; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--ambar); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--ambar); color: #0C1016; }

.envolve { width: 100%; max-width: var(--largura); margin: 0 auto; padding: 0 var(--gutter); }
.estreito { max-width: 820px; }
.so-para-leitores { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saltar { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ambar); color: #0C1016; padding: 10px 16px; border-radius: 10px; }
.saltar:focus { top: 12px; }

/* ---- letras ---------------------------------------------------------- */
.h1, .h2, .h3, .h4, h1, h2, h3, h4 { font-family: var(--letra-titulo); font-weight: 700; letter-spacing: -.02em; line-height: 1.06; margin: 0 0 .4em; font-variation-settings: "wdth" 96; }
.h1 { font-size: clamp(2.6rem, 6.5vw, 5rem); font-weight: 800; letter-spacing: -.03em; }
.h2 { font-size: clamp(1.9rem, 4.2vw, 3.1rem); font-weight: 750; letter-spacing: -.025em; }
.h3 { font-size: clamp(1.35rem, 2.4vw, 1.75rem); }
.h4 { font-size: 1.12rem; letter-spacing: -.01em; }
.sobretitulo { font: 500 .78rem/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-3); margin: 0 0 14px; display: flex; gap: 10px; align-items: center; }
.sobretitulo::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: var(--rio, var(--ambar)); }
.lede { font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--tinta-2); max-width: 64ch; margin: 0; }
.pequeno { font-size: .86rem; }
.discreto { color: var(--tinta-3); }
.cab-seccao { margin-bottom: clamp(28px, 4vw, 48px); }
.faixa { padding: clamp(48px, 6vw, 88px) 0; border-top: 1px solid var(--linha); position: relative; }
.faixa--estreita { padding: 22px 0; }
main > .faixa:first-child { border-top: 0; }
.ligacao-seta { font-weight: 600; text-decoration: none; display: inline-flex; gap: 8px; align-items: center; margin-top: 22px; }
.ligacao-seta::after { content: "→"; transition: transform var(--t); }
.ligacao-seta:hover::after { transform: translateX(4px); }
.tabela-rola { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--linha); vertical-align: top; }
th { font-weight: 600; color: var(--tinta-2); }

/* ---- botoes, chips, pilulas ----------------------------------------- */
.botao, .pilula {
  display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: 999px; font-weight: 600;
  text-decoration: none; border: 1px solid var(--linha-forte); background: var(--tinta); color: var(--noite);
  transition: transform var(--t), background var(--t); cursor: pointer;
}
.botao:hover, .pilula:hover { transform: translateY(-1px); }
.pilula { padding: 8px 16px; font-size: .9rem; }
.botao--rio { background: var(--rio); color: var(--sobre-rio); border-color: transparent; }
.botao--linha { background: transparent; color: var(--tinta); }
.chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px 6px 10px; border-radius: 999px; font-size: .86rem;
  border: 1px solid var(--linha-forte); color: var(--tinta-2); background: color-mix(in srgb, var(--noite) 70%, transparent);
  backdrop-filter: blur(6px); white-space: nowrap; text-decoration: none;
}
.chip .bandeira { width: 18px; height: 13px; border-radius: 2px; }
.chip--paises { white-space: normal; }
.chip--paises .bandeira + .bandeira { margin-left: -12px; box-shadow: -1px 0 0 var(--noite); }
.chip__icone { width: 16px; height: 16px; color: var(--rio); }
.chip--unesco { border-color: color-mix(in srgb, var(--ambar) 60%, transparent); color: var(--ambar); }
.bandeira { display: inline-block; width: 20px; height: 15px; border-radius: 2px; object-fit: cover; vertical-align: -2px; }
.liga { font-weight: 600; text-decoration: none; padding-bottom: 2px; border-bottom: 1px solid var(--linha-forte); }
.liga:hover { border-color: var(--rio, var(--ambar)); }
.pilulas { display: flex; flex-wrap: wrap; gap: 10px; }
.pilula-lugar {
  display: inline-flex; gap: 10px; align-items: center; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--linha-forte);
  text-decoration: none; font-weight: 500; transition: border-color var(--t), background var(--t);
}
.pilula-lugar b { font: 500 .8rem var(--mono); color: var(--tinta-3); }
.pilula-lugar:hover { border-color: var(--ambar); background: var(--noite-2); }
.pilulas--grandes .pilula-lugar { font-size: 1.1rem; padding: 14px 22px; }

/* ---- cabecalho ------------------------------------------------------- */
.topo { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--noite) 86%, transparent); backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--linha); }
.topo--escuro { position: fixed; left: 0; right: 0; background: transparent; border-bottom-color: transparent; transition: background var(--t), border-color var(--t); }
.topo--escuro.topo--solido { background: color-mix(in srgb, #0C1016 88%, transparent); border-bottom-color: rgba(255, 255, 255, .08); }
.topo--escuro, .topo--escuro a, .topo--escuro button, .topo--escuro summary { color: #EDF1F5; }
.topo__linha { display: flex; align-items: center; gap: 22px; height: 66px; }
.marca-nome { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: 800 1.32rem var(--letra-titulo); letter-spacing: -.04em; }
.marca-simbolo { width: 32px; height: 32px; flex: none; border-radius: 9px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08); }
.topo__nav { display: flex; gap: 4px; margin-left: auto; }
.topo__nav a { text-decoration: none; padding: 8px 13px; border-radius: 999px; font-size: .95rem; font-weight: 500; color: inherit; opacity: .82; }
.topo__nav a:hover, .topo__nav a[aria-current="page"] { opacity: 1; background: rgba(255, 255, 255, .07); }
:root[data-theme="light"] .topo:not(.topo--escuro) .topo__nav a:hover { background: var(--noite-2); }
.topo__ferramentas { display: flex; align-items: center; gap: 6px; }
.tema { border: 0; background: none; padding: 8px; border-radius: 999px; cursor: pointer; display: grid; place-items: center; }
.tema:hover { background: rgba(255, 255, 255, .08); }
.linguas-menu { position: relative; }
.linguas-menu summary { list-style: none; display: flex; align-items: center; gap: 6px; cursor: pointer; padding: 7px 11px; border-radius: 999px; font: 500 .85rem var(--mono); }
.linguas-menu summary:hover { background: rgba(255, 255, 255, .08); }
.linguas-menu summary::-webkit-details-marker { display: none; }
.linguas-menu ul { position: absolute; right: 0; top: calc(100% + 8px); list-style: none; margin: 0; padding: 6px; min-width: 190px;
  background: #11161E; border: 1px solid rgba(255, 255, 255, .12); border-radius: 14px; box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .7); z-index: 60; }
.linguas-menu li button { width: 100%; display: flex; gap: 10px; align-items: center; padding: 9px 12px; border: 0; background: none; border-radius: 9px;
  cursor: pointer; color: #EDF1F5; text-align: left; }
.linguas-menu li button:hover, .linguas-menu li button[aria-pressed="true"] { background: rgba(255, 255, 255, .08); }
.linguas-menu__codigo { font: 500 .72rem var(--mono); color: #FFB547; width: 22px; }
@media (max-width: 900px) {
  .esconde-movel { display: none; }
  .topo__nav { gap: 0; }
  .topo__nav a { padding: 8px 9px; font-size: .9rem; }
}
@media (max-width: 560px) {
  .marca-palavra { display: none; }
  .topo__linha { gap: 10px; }
}

/* ---- migalhas -------------------------------------------------------- */
.migalhas { font-size: .85rem; color: var(--tinta-3); margin-bottom: 22px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.migalhas a { color: var(--tinta-2); text-decoration: none; }
.migalhas a:hover { color: var(--tinta); }

/* ---- pesquisa -------------------------------------------------------- */
.pesquisa { position: relative; display: flex; align-items: center; gap: 0; max-width: 560px; border-radius: 999px;
  background: rgba(17, 22, 30, .82); border: 1px solid rgba(255, 255, 255, .16); backdrop-filter: blur(12px); color: #EDF1F5; }
:root[data-theme="light"] .pesquisa:not(.pesquisa--grande) { background: #fff; border-color: var(--linha-forte); color: var(--tinta); }
.pesquisa__icone { width: 20px; height: 20px; margin-left: 18px; flex: none; opacity: .7; }
.pesquisa input { flex: 1; min-width: 0; border: 0; background: none; color: inherit; font: inherit; padding: 14px 12px; outline: none; }
.pesquisa input::placeholder { color: inherit; opacity: .55; }
.pesquisa__ir { border: 0; margin: 5px; padding: 10px 20px; border-radius: 999px; background: var(--ambar); color: #0C1016; font-weight: 700; cursor: pointer; }
.pesquisa--grande input { font-size: 1.08rem; padding: 17px 12px; }
.pesquisa__lista { position: absolute; left: 0; right: 0; top: calc(100% + 8px); background: #11161E; border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 16px; padding: 6px; display: none; z-index: 40; box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .8); color: #EDF1F5; }
.pesquisa__lista.aberta { display: block; }
.sugestao { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; text-decoration: none; }
.sugestao:hover, .sugestao[aria-selected="true"] { background: rgba(255, 255, 255, .07); }
.sugestao__ponto { width: 10px; height: 10px; border-radius: 50%; background: #6F7B89; flex: none; }
.sugestao__ponto.tem { background: var(--ambar); box-shadow: 0 0 10px var(--ambar); }
.sugestao__nome { display: block; font-weight: 600; }
.sugestao__onde { display: block; font-size: .82rem; color: #A9B4C1; }
.sugestao__seta { margin-left: auto; font-size: .78rem; color: #A9B4C1; white-space: nowrap; }

/* ---- cartoes: o rio desenhado num quadro de noite -------------------- */
.cartoes--grelha { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; }
.cartoes--fila { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 260px); gap: 18px; overflow-x: auto;
  scroll-snap-type: x mandatory; padding-bottom: 4px; scrollbar-width: none; }
.cartoes--fila::-webkit-scrollbar { display: none; }
.cartoes--fila > * { scroll-snap-align: start; }
.cartao { display: flex; flex-direction: column; text-decoration: none; border-radius: var(--raio-g); border: 1px solid var(--linha);
  background: var(--noite-2); overflow: hidden; transition: transform var(--t), border-color var(--t); }
.cartao:hover { transform: translateY(-3px); border-color: var(--linha-forte); }
.cartao__img { aspect-ratio: 10 / 7; background: radial-gradient(120% 90% at 50% 100%, #172030 0%, #0C1016 70%); display: grid; place-items: center; position: relative; overflow: hidden; }
.cartao__rio, .mini-rio, .rank__rio, .mes-cartao__rio { width: 100%; height: 100%; }
.cartao__rio path, .mini-rio path, .rank__rio path, .mes-cartao__rio path { fill: none; stroke: var(--rio); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 0 2.5px var(--rio)); }
.cartao__rio circle, .mini-rio circle, .rank__rio circle, .mes-cartao__rio circle { fill: #fff; filter: drop-shadow(0 0 3px var(--rio)); }
.cartao:hover .cartao__rio path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: corre 1.2s ease forwards; }
@keyframes corre { to { stroke-dashoffset: 0; } }
.cartao__ponto { width: 10px; height: 10px; border-radius: 50%; background: var(--ambar); }
.cartao__corpo { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 4px; }
.cartao__nome { font: 700 1.12rem/1.15 var(--letra-titulo); letter-spacing: -.02em; }
.cartao__pais { font-size: .84rem; color: var(--tinta-2); display: flex; gap: 6px; align-items: center; }
.cartao__numeros { display: flex; gap: 14px; margin-top: 6px; font: 500 .92rem var(--mono); }
.cartao__numeros small { color: var(--tinta-3); }
.cartao__extra { font-size: .8rem; color: var(--tinta-3); }
.cartao--sem { opacity: .8; }
.cartao--grande { max-width: 420px; }
.setas { display: flex; gap: 8px; justify-content: flex-end; margin-top: 10px; }
.seta { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--linha-forte); background: none; cursor: pointer; display: grid; place-items: center; }
.seta svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.seta:disabled { opacity: .3; cursor: default; }
@media (hover: none) { .setas { display: none; } }

/* =====================================================================
   A PAGINA DO RIO
   ===================================================================== */
.pagina-rio .topo--escuro { position: fixed; }
.barra-rio { position: fixed; top: 66px; left: 0; right: 0; z-index: 45; background: color-mix(in srgb, #0C1016 92%, transparent);
  backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255, 255, 255, .08); transform: translateY(-120%); transition: transform var(--t);
  color: #EDF1F5; }
.barra-rio:not(.visivel) { visibility: hidden; }
.barra-rio.visivel { transform: none; visibility: visible; }
.barra-rio__linha { display: flex; gap: 18px; align-items: center; height: 52px; }
.barra-rio__nome { font: 700 1rem var(--letra-titulo); text-decoration: none; white-space: nowrap; }
.barra-rio__nome::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--rio); margin-right: 8px; box-shadow: 0 0 10px var(--rio); }
.barra-rio__ligacoes { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.barra-rio__ligacoes a { padding: 6px 12px; border-radius: 999px; text-decoration: none; font-size: .88rem; color: #A9B4C1; white-space: nowrap; }
.barra-rio__ligacoes a:hover { color: #fff; background: rgba(255, 255, 255, .06); }
.barra-rio .pilula { margin-left: auto; background: var(--rio); color: #0C1016; border: 0; white-space: nowrap; }
@media (max-width: 700px) { .barra-rio .pilula { display: none; } }

/* ---- a abertura ------------------------------------------------------ */
.abertura { position: relative; background: var(--noite); color: var(--tinta); padding: 120px 0 56px; overflow: hidden; min-height: min(100vh, 980px); display: flex; align-items: center; }
.abertura__fundo { position: absolute; inset: 0; background:
  radial-gradient(60% 70% at 72% 52%, color-mix(in srgb, var(--rio) 16%, transparent) 0%, transparent 70%),
  radial-gradient(40% 50% at 10% 100%, color-mix(in srgb, var(--rio) 8%, transparent) 0%, transparent 70%); pointer-events: none; }
.abertura__grelha { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(20px, 4vw, 56px); align-items: center; }
.abertura__tipo { font: 500 .8rem var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--rio); margin: 0 0 12px; }
.abertura__nome { font: 800 clamp(3rem, 8vw, 7rem)/.92 var(--letra-titulo); letter-spacing: -.035em; margin: 0 0 22px; font-variation-settings: "wdth" 90;
  text-wrap: balance; overflow-wrap: anywhere; }
.abertura__frase { font-size: clamp(1.1rem, 1.8vw, 1.4rem); color: var(--tinta-2); margin: 0 0 22px; max-width: 34ch; }
.abertura__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 28px; }
.abertura__accoes { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }
.abertura__arte { margin: 0; position: relative; }
.abertura__arte figcaption { font-size: .78rem; color: var(--tinta-3); margin-top: 6px; text-align: right; }
@media (max-width: 900px) {
  .abertura { padding-top: 96px; min-height: 0; }
  .abertura__grelha { grid-template-columns: 1fr; }
  .abertura__arte { order: -1; margin: 0 calc(-1 * var(--gutter)); }
}

/* ---- a arte: o rio e a bacia ----------------------------------------- */
.arte { position: relative; width: 100%; max-height: 78vh; margin: 0 auto; }
.arte svg { width: 100%; height: 100%; display: block; overflow: visible; }
.arte__afl { fill: none; stroke: var(--rio); stroke-linecap: round; stroke-linejoin: round; }
.arte__afl--0 { stroke-width: 1; stroke-opacity: .42; }
.arte__afl--1 { stroke-width: 1.5; stroke-opacity: .6; }
.arte__afl--2 { stroke-width: 2.2; stroke-opacity: .78; }
.arte__afl--3 { stroke-width: 3; stroke-opacity: .9; }
.arte__rede { filter: drop-shadow(0 0 3px color-mix(in srgb, var(--rio) 60%, transparent)); }
.arte__brilho { fill: none; stroke: var(--rio); stroke-width: 12; stroke-opacity: .28; filter: blur(9px); stroke-linecap: round; stroke-linejoin: round; }
.arte__rio { fill: none; stroke: #fff; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 0 4px var(--rio)) drop-shadow(0 0 12px var(--rio)); stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: corre 3.2s cubic-bezier(.45, .05, .2, 1) .35s forwards; }
@media (prefers-reduced-motion: reduce) { .arte__rio { animation: none; stroke-dashoffset: 0; } }
.arte__marcas { position: absolute; inset: 0; pointer-events: none; }
.arte__marca { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 4px;
  opacity: 0; animation: aparece .6s ease forwards; animation-delay: 2.6s; }
.arte__marca i { width: 9px; height: 9px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px color-mix(in srgb, var(--rio) 45%, transparent), 0 0 14px var(--rio); }
.arte__marca b { font: 500 .78rem var(--mono); color: #EDF1F5; background: rgba(12, 16, 22, .72); padding: 2px 8px; border-radius: 6px; white-space: nowrap; transform: translateY(14px); position: absolute; top: 4px; }
.arte__marca--nascente i, .arte__marca--foz i { width: 13px; height: 13px; background: var(--rio); }
.arte__marca--nascente b, .arte__marca--foz b { color: var(--rio); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; }
.arte__marca--cidade i { width: 6px; height: 6px; box-shadow: 0 0 6px rgba(255, 255, 255, .6); }
.arte__marca--cidade b { font-size: .72rem; background: none; color: #A9B4C1; text-shadow: 0 1px 6px #000; }
@keyframes aparece { to { opacity: 1; } }
@media (max-width: 700px) { .arte__marca--cidade b { display: none; } }

/* ---- em numeros ------------------------------------------------------ */
.faixa--numeros { padding: 0; border-top: 1px solid var(--linha); }
.numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.numero { padding: 30px 22px 28px; border-left: 1px solid var(--linha); }
.numero:first-child { border-left: 0; padding-left: 0; }
.numero__rotulo { font: 500 .74rem var(--mono); text-transform: uppercase; letter-spacing: .12em; color: var(--tinta-3); margin: 0 0 10px; }
.numero__valor { font: 700 clamp(2rem, 3.6vw, 3rem)/1 var(--letra-titulo); letter-spacing: -.04em; margin: 0; white-space: nowrap; font-variation-settings: "wdth" 88; }
.numero__valor small { font: 500 .9rem var(--mono); color: var(--tinta-2); margin-left: 6px; letter-spacing: 0; }
.numero__valor--medio { font-size: clamp(1.7rem, 3vw, 2.4rem); }
.numero__valor--longo { font-size: clamp(1.4rem, 2.4vw, 2rem); }
.numero__nota { font-size: .82rem; color: var(--tinta-3); margin: 8px 0 0; }
@media (max-width: 640px) {
  .numeros { grid-template-columns: 1fr 1fr; }
  .numero { padding: 22px 14px; border-left: 0; border-top: 1px solid var(--linha); }
  .numero:first-child { padding-left: 14px; }
}

/* ---- a viagem -------------------------------------------------------- */
.faixa--viagem { background: linear-gradient(180deg, #0C1016 0%, #0F141C 100%); color: var(--tinta); }
.viagem { --topo: 118px; --banda: 220px; color: var(--rio); }
.viagem__largo { overflow: visible; padding: 0 8px 8px; }
.viagem__palco { position: relative; height: calc(var(--topo) * 2 + var(--banda)); width: 100%; color: var(--rio); }
.viagem__perfil { position: absolute; left: 0; right: 0; top: var(--topo); height: var(--banda); width: 100%; overflow: visible; }
.viagem__area { fill: url(#vg); }
.viagem__linha { fill: none; stroke: var(--rio); stroke-width: 3; filter: drop-shadow(0 0 6px var(--rio)); }
.viagem__alt { position: absolute; left: 0; top: var(--topo); height: var(--banda); display: flex; flex-direction: column; justify-content: space-between;
  font: 500 .72rem var(--mono); color: var(--tinta-3); pointer-events: none; }
.viagem__alt span { transform: translateY(-50%); background: color-mix(in srgb, #0C1016 70%, transparent); padding: 0 4px; }
.paragem { position: absolute; top: 0; bottom: 0; width: 0; }
.paragem__pino { position: absolute; left: -6px; top: calc(var(--topo) + var(--y) * var(--banda) / 100 - 6px); width: 12px; height: 12px; border-radius: 50%;
  background: #0C1016; border: 2.5px solid var(--rio); box-shadow: 0 0 10px var(--rio); z-index: 2; }
.paragem__haste { position: absolute; left: -.5px; width: 1px; background: linear-gradient(var(--linha-forte), var(--linha-forte)); }
.paragem--cima .paragem__haste { top: 84px; height: calc(var(--topo) - 84px + var(--y) * var(--banda) / 100); }
.paragem--baixo .paragem__haste { top: calc(var(--topo) + var(--y) * var(--banda) / 100); bottom: 84px; }
.paragem__rotulo { position: absolute; width: clamp(92px, 10vw, 132px); left: calc(clamp(92px, 10vw, 132px) / -2); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1px;
  color: var(--tinta); font-size: .82rem; line-height: 1.2; }
.paragem--cima .paragem__rotulo { top: 0; height: 84px; justify-content: flex-end; padding-bottom: 6px; }
.paragem--baixo .paragem__rotulo { bottom: 0; height: 84px; justify-content: flex-start; padding-top: 6px; }
.paragem__rotulo b { font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.paragem__rotulo a { text-decoration: none; border-bottom: 1px dotted var(--rio); }
.paragem__rotulo small { color: var(--tinta-3); font-size: .72rem; }
.paragem__rotulo em { font: 500 .7rem var(--mono); font-style: normal; color: var(--rio); }
.paragem__icone { width: 18px; height: 18px; color: var(--rio); }
.paragem--nascente .paragem__rotulo { left: 0; align-items: flex-start; text-align: left; }
.paragem--foz .paragem__rotulo { left: auto; right: 0; align-items: flex-end; text-align: right; }
.paragem--nascente .paragem__pino, .paragem--foz .paragem__pino { width: 16px; height: 16px; left: -8px; background: var(--rio);
  top: calc(var(--topo) + var(--y) * var(--banda) / 100 - 8px); }
.paragem--city .paragem__pino { width: 14px; height: 14px; left: -7px; top: calc(var(--topo) + var(--y) * var(--banda) / 100 - 7px); }
.paragem--dam .paragem__pino { border-radius: 3px; border-color: #FF5C8A; box-shadow: 0 0 10px #FF5C8A; }
.paragem--dam .paragem__icone, .paragem--dam em { color: #FF8FAE; }
.paragem--tributary .paragem__pino { border-color: #4CC9F0; box-shadow: 0 0 10px #4CC9F0; }
.paragem--tributary .paragem__icone { color: #4CC9F0; }
.paragem--waterfall .paragem__pino, .paragem--lake .paragem__pino { border-color: #9EE7FF; }
.paragem--heritage .paragem__pino, .paragem--castle .paragem__pino { border-color: #FFB547; box-shadow: 0 0 10px #FFB547; }
.paragem--heritage .paragem__icone { color: #FFB547; }
.paragem-ponto { position: absolute; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--tinta-2); opacity: .7;
  top: calc(var(--topo) + var(--y) * var(--banda) / 100 - 3px); z-index: 1; }
.paragem-ponto--dam { background: #FF5C8A; }
.paragem-ponto--tributary { background: #4CC9F0; }
.viagem__regua { position: relative; height: 26px; width: 100%; border-top: 1px solid var(--linha); font: 500 .72rem var(--mono); color: var(--tinta-3); }
.viagem__regua span { position: absolute; top: 6px; transform: translateX(-50%); white-space: nowrap; }
.viagem__regua span:first-child { transform: none; }
.viagem__regua .viagem__regua-fim { transform: translateX(-100%); color: var(--rio); }
.viagem__lista { display: none; list-style: none; padding: 0; margin: 0; position: relative; }
@media (max-width: 900px) {
  .viagem__largo { display: none; }
  .viagem__lista { display: block; }
  .viagem__lista::before { content: ""; position: absolute; left: 76px; top: 10px; bottom: 10px; width: 3px; border-radius: 3px;
    background: linear-gradient(var(--rio), color-mix(in srgb, var(--rio) 40%, #fff)); box-shadow: 0 0 10px var(--rio); }
}
.paragem-l { display: grid; grid-template-columns: 62px 30px 1fr; gap: 14px; align-items: center; padding: 9px 0; position: relative; }
.paragem-l__km { font: 500 .8rem var(--mono); color: var(--tinta-3); text-align: right; }
.paragem-l__km small { font-size: .7rem; }
.paragem-l__pino { width: 30px; height: 30px; border-radius: 50%; background: #0C1016; border: 2px solid var(--rio); display: grid; place-items: center; z-index: 1; }
.paragem-l__icone { width: 16px; height: 16px; color: var(--rio); }
.paragem-l__nome { display: flex; flex-direction: column; color: var(--tinta); }
.paragem-l__nome b { font-weight: 600; }
.paragem-l__nome a { text-decoration: none; border-bottom: 1px dotted var(--rio); }
.paragem-l__nome small { color: var(--tinta-3); font-size: .8rem; }
.paragem-l--nascente .paragem-l__pino, .paragem-l--foz .paragem-l__pino { background: var(--rio); }
.paragem-l--nascente .paragem-l__icone, .paragem-l--foz .paragem-l__icone { color: #0C1016; }
.paragem-l--dam .paragem-l__pino { border-color: #FF5C8A; }
.paragem-l--tributary .paragem-l__pino { border-color: #4CC9F0; }
.paragem-l--town { padding: 4px 0; }
.paragem-l--town .paragem-l__pino { transform: scale(.6); }
.faixa--viagem .pequeno { margin-top: 18px; }

/* ---- apresentacao e por onde comecar --------------------------------- */
.intro-grelha { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
@media (max-width: 900px) { .intro-grelha { grid-template-columns: 1fr; } }
.texto-grande { font-size: clamp(1.1rem, 1.6vw, 1.3rem); line-height: 1.6; }
.apresentacao__descr { font: 700 clamp(1.4rem, 2.4vw, 1.9rem)/1.2 var(--letra-titulo); letter-spacing: -.02em; margin: 0 0 18px; }
.intro { color: var(--tinta-2); margin: 0 0 18px; }
.nota-autor { border-left: 3px solid var(--rio, var(--ambar)); padding: 4px 0 4px 18px; margin: 20px 0; }
.comecar { border: 1px solid var(--linha); border-radius: var(--raio-g); padding: 26px; background: var(--noite-2); }
.mosaico { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.mosaico li { display: grid; grid-template-columns: 26px 1fr; gap: 14px; align-items: start; }
.mosaico .icone { width: 24px; height: 24px; color: var(--rio, var(--ambar)); margin-top: 2px; }
.mosaico b { display: block; }
.mosaico span { display: block; color: var(--tinta-2); font-size: .92rem; }
.placa__ligacao { margin-top: 10px; display: grid; grid-template-columns: 22px 1fr auto; gap: 2px 10px; align-items: center; padding: 10px 14px;
  border-radius: 12px; border: 1px solid var(--linha-forte); text-decoration: none; font-size: .9rem; }
.placa__ligacao:hover { border-color: var(--ambar); }
.placa__ligacao .parceiro__icone { width: 20px; height: 20px; grid-row: span 2; }
.placa__ligacao em { font-style: normal; font-weight: 600; }
.placa__ligacao small { grid-column: 2; color: var(--tinta-3); font-size: .74rem; }
.placa__ligacao i { grid-row: 1 / span 2; grid-column: 3; font-style: normal; }

/* ---- o ano do rio ---------------------------------------------------- */
.ano { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(4px, 1vw, 12px); align-items: end; margin-bottom: 18px; }
.ano__col { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; }
.ano__tubo { width: 100%; height: clamp(170px, 26vw, 260px); border-radius: 14px; background: var(--noite-2); border: 1px solid var(--linha);
  display: flex; align-items: flex-end; overflow: hidden; }
.ano__agua { width: 100%; border-radius: 12px 12px 0 0; display: flex; justify-content: center; align-items: flex-start; padding-top: 8px;
  background: linear-gradient(180deg, var(--rio) 0%, color-mix(in srgb, var(--rio) 30%, transparent) 100%);
  box-shadow: 0 -6px 22px -4px color-mix(in srgb, var(--rio) 60%, transparent); transition: height .8s cubic-bezier(.2, .7, .2, 1); }
:root[data-theme="light"] .ano__agua { background: linear-gradient(180deg, var(--rio-escuro) 0%, color-mix(in srgb, var(--rio-escuro) 35%, transparent) 100%); box-shadow: none; }
.ano__agua b { font: 500 .72rem var(--mono); color: #0C1016; writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; }
:root[data-theme="light"] .ano__agua b { color: #fff; }
/* pouca agua: o numero fica por cima da agua, em vez de cortado dentro dela */
.ano__agua { position: relative; }
.ano__agua--baixa b, :root[data-theme="light"] .ano__agua--baixa b { position: absolute; bottom: calc(100% + 8px); color: var(--rio); }
:root[data-theme="light"] .ano__agua--baixa b { color: var(--rio-escuro); }
.ano__ar { font: 500 .78rem var(--mono); padding: 3px 7px; border-radius: 999px; background: var(--c); color: #0C1016; }
.ano__chuva { font: 500 .72rem var(--mono); color: var(--tinta-2); white-space: nowrap; }
.ano__chuva small { color: var(--tinta-3); font-size: .62rem; }
.ano__mes { font-size: .8rem; font-weight: 600; color: var(--tinta-2); }
.ano__col--melhor .ano__mes { color: var(--tinta); background: var(--ambar); color: #0C1016; padding: 2px 8px; border-radius: 999px; }
.ano__col--gelo .ano__tubo { background: repeating-linear-gradient(135deg, var(--noite-2) 0 6px, var(--noite-3) 6px 8px); }
.ano__legenda { display: flex; flex-wrap: wrap; gap: 18px; font-size: .85rem; color: var(--tinta-2); margin-bottom: 8px; }
.ano__legenda span { display: inline-flex; align-items: center; gap: 8px; }
.leg { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }
.leg--agua { background: var(--rio, var(--glaciar)); }
.leg--ar { background: linear-gradient(90deg, var(--t3, #54bce2), var(--t8, #febe40)); border-radius: 999px; }
.leg--chuva { border: 1px solid var(--tinta-3); }
.leg--melhor { background: var(--ambar); border-radius: 999px; }
@media (max-width: 640px) {
  .ano { gap: 3px; }
  .ano__chuva { display: none; }
  .ano__ar { font-size: .62rem; padding: 2px 4px; }
  .ano__mes { font-size: .66rem; }
}

/* ---- a bacia em numeros ---------------------------------------------- */
.bacia-grelha { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 22px; margin-bottom: 40px; align-items: stretch; }
@media (max-width: 900px) { .bacia-grelha { grid-template-columns: 1fr; } }
.selo { border-radius: var(--raio-g); padding: 28px; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; min-height: 220px;
  background: radial-gradient(120% 120% at 0% 0%, color-mix(in srgb, var(--c, #4CC9F0) 30%, transparent), transparent 60%), var(--noite-2);
  border: 1px solid var(--linha); }
.selo b { font: 800 clamp(1.8rem, 3vw, 2.6rem)/1 var(--letra-titulo); letter-spacing: -.035em; color: var(--c); }
.selo span { color: var(--tinta-2); }
.selo--livre { --c: #7CF0B0; }
.selo--pouco { --c: #4CC9F0; }
.selo--muito { --c: #FFB547; }
.selo--represado { --c: #FF5C8A; }
.bacia-numeros { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 1px;
  background: var(--linha); border: 1px solid var(--linha); border-radius: var(--raio-g); overflow: hidden; }
.bacia-n { background: var(--noite); padding: 20px; display: flex; flex-direction: column; gap: 6px; }
.bacia-n b { font: 700 1.9rem/1 var(--letra-titulo); letter-spacing: -.03em; }
.bacia-n b small { font: 500 .8rem var(--mono); color: var(--tinta-2); margin-left: 4px; letter-spacing: 0; }
.bacia-n span { font-size: .86rem; color: var(--tinta-2); }
.ocupacao { margin-bottom: 18px; }
.ocupacao__barra { display: flex; height: 28px; border-radius: 999px; overflow: hidden; border: 1px solid var(--linha); margin-bottom: 14px; }
.ocupacao__parte { height: 100%; }
.ocupacao__parte--floresta { background: #3FBF7F; }
.ocupacao__parte--campos { background: #F2C14E; }
.ocupacao__parte--pastos { background: #A7D96F; }
.ocupacao__parte--cidades { background: #FF5C8A; }
.ocupacao__parte--glaciar { background: #CFEFFF; }
.ocupacao__parte--resto { background: var(--noite-3); }
.ocupacao__legenda { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: .9rem; color: var(--tinta-2); }
.ocupacao__legenda li { display: flex; gap: 8px; align-items: center; }
.ocupacao__legenda i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.ocupacao__legenda b { color: var(--tinta); font-family: var(--mono); font-weight: 500; }

/* ---- ao longo do rio -------------------------------------------------- */
.contas { list-style: none; margin: 0 0 16px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.conta { display: grid; grid-template-columns: 30px 1fr; gap: 12px; padding: 18px; border-radius: var(--raio); border: 1px solid var(--linha); background: var(--noite-2); }
.conta .icone { width: 26px; height: 26px; color: var(--rio, var(--ambar)); }
.conta b { font: 700 1.6rem/1 var(--letra-titulo); display: block; }
.conta span { color: var(--tinta-2); font-size: .9rem; }
.conta__nomes { display: block; margin-top: 6px; font-size: .8rem !important; color: var(--tinta-3) !important; }

/* ---- nos outros atlas ------------------------------------------------- */
.atlas-somas { list-style: none; margin: 0 0 28px; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.atlas-soma { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 14px 18px;
  border-radius: 16px; border: 1px solid var(--linha); background: var(--noite-2); }
.atlas-soma img { grid-row: span 2; border-radius: 8px; }
.atlas-soma b { font: 700 1.5rem/1 var(--letra-titulo); }
.atlas-soma span { font-size: .85rem; color: var(--tinta-2); }
.atlas-soma small { display: none; }
.atlas-paineis { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }
.atlas-painel { border-radius: var(--raio-g); border: 1px solid var(--linha); padding: 22px; background: linear-gradient(180deg, color-mix(in srgb, var(--a) 9%, var(--noite-2)) 0%, var(--noite-2) 40%); }
.atlas-painel__cab { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; }
.atlas-painel__cab img { border-radius: 8px; }
.atlas-painel__cab h3 { margin: 0; }
.atlas-painel__cab p { margin: 2px 0 0; font-size: .82rem; color: var(--tinta-3); }
.atlas-lista { list-style: none; margin: 0; padding: 0; }
.atlas-lista li { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 10px 0; border-top: 1px solid var(--linha); }
.atlas-item__nome { font-weight: 600; text-decoration: none; }
a.atlas-item__nome:hover { color: var(--a); }
.atlas-item__nota { grid-column: 1; font-size: .8rem; color: var(--tinta-3); }
.atlas-item__valor { grid-column: 2; grid-row: 1 / span 2; font: 500 1rem var(--mono); align-self: center; }
.atlas-item__valor small { font-size: .74rem; color: var(--tinta-3); margin-left: 3px; }
.atlas-painel__pe { margin: 12px 0 0; font-size: .85rem; display: flex; justify-content: space-between; gap: 10px; color: var(--tinta-3); }
.atlas-painel__pe a { color: var(--a); font-weight: 600; text-decoration: none; }
.atlas-breve { color: var(--tinta-3); }
[data-familia] .so-online { display: none !important; }
a .so-breve { display: none !important; }

/* ---- vistas do espaco ------------------------------------------------- */
.vistas { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 760px) { .vistas { grid-template-columns: 1fr; } }
.vista { margin: 0; }
.vista__img { position: relative; border-radius: var(--raio-g); overflow: hidden; aspect-ratio: 3 / 2; background: #0C1016; }
.vista__img img { width: 100%; height: 100%; object-fit: cover; }
.vista__img svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.vista__img path { fill: none; stroke: var(--rio); stroke-width: 4; stroke-opacity: .85; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 0 6px var(--rio)); }
.vista__ponto { position: absolute; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 4px rgba(0, 0, 0, .3), 0 0 20px var(--rio); }
.vista figcaption { display: flex; justify-content: space-between; gap: 10px; padding: 12px 4px 0; }
.vista figcaption b { font-family: var(--letra-titulo); font-size: 1.15rem; }
.vista figcaption span { color: var(--tinta-3); font-size: .85rem; font-family: var(--mono); }

/* ---- fotografias: uma grelha que cabe no ecra (sem barras de deslocamento) ---- */
.fotos--grelha { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.fotos--n1 { grid-template-columns: minmax(0, 1fr); max-width: 900px; }
.fotos--n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fotos--n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fotos__item { margin: 0; min-width: 0; }
.fotos__item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--raio-g); }
.fotos__item figcaption { font-size: .76rem; color: var(--tinta-3); padding-top: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fotos__item figcaption a { color: var(--tinta-2); }
@media (max-width: 900px) { .fotos--grelha { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fotos--n1 { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .fotos--grelha { gap: 8px; } .fotos__item img { border-radius: 14px; } }

/* ---- a familia do rio --------------------------------------------------- */
.familia-rio__pai { margin-bottom: 40px; }
.familia-rio__afl, .familia-rio__bacia { margin-top: 34px; }
.familia-rio__outros { color: var(--tinta-2); font-size: .92rem; margin-top: 14px; }
.familia-rio__outros b { color: var(--tinta); }

/* ---- fontes ------------------------------------------------------------- */
.tabela-fontes th { width: 34%; font-size: .9rem; }
.tabela-fontes td { font-size: .9rem; color: var(--tinta-2); }
.tabela-fontes--larga th, .tabela-fontes--larga td { width: auto; }

/* ---- afiliados ---------------------------------------------------------- */
.afiliados[data-activo="0"], .anuncio[data-activo="0"] { display: none; }
.afiliados__cab { margin-bottom: 22px; }
.parceiros { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.parceiro { display: grid; grid-template-columns: 32px 1fr auto; gap: 14px; align-items: center; padding: 18px 20px; border-radius: 18px;
  border: 1px solid var(--linha-forte); text-decoration: none; background: var(--noite-2); transition: border-color var(--t), transform var(--t); }
.parceiro:hover { border-color: var(--ambar); transform: translateY(-2px); }
.parceiro__icone { width: 28px; height: 28px; color: var(--ambar); }
.parceiro__texto { display: block; font-weight: 600; }
.parceiro__nome { display: block; font-size: .8rem; color: var(--tinta-3); }
.parceiro__accao { font-size: .85rem; font-weight: 600; color: var(--ambar); white-space: nowrap; }
.afiliados__aviso { margin-top: 14px; }
.anuncio { padding: 18px 0; }
.anuncio__nota { font: 500 .7rem var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-3); margin: 0 0 6px; }

/* =====================================================================
   A PAGINA INICIAL
   ===================================================================== */
.abre-inicio { position: relative; min-height: min(100vh, 1000px); display: flex; align-items: flex-end; background: #0C1016; overflow: hidden; color: #EDF1F5; padding: 140px 0 70px; }
.abre-inicio__arte { position: absolute; inset: 0; }
.abre-inicio__arte img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 45%; animation: respira 18s ease-in-out infinite alternate; }
@keyframes respira { from { transform: scale(1.02); } to { transform: scale(1.09) translate(-1%, 1%); } }
@media (prefers-reduced-motion: reduce) { .abre-inicio__arte img { animation: none; } }
.abre-inicio::after { content: ""; position: absolute; inset: 0; background:
  linear-gradient(90deg, rgba(12, 16, 22, .92) 0%, rgba(12, 16, 22, .55) 42%, rgba(12, 16, 22, 0) 70%),
  linear-gradient(0deg, rgba(12, 16, 22, .95) 0%, rgba(12, 16, 22, 0) 45%); pointer-events: none; }
.abre-inicio__texto { position: relative; z-index: 2; }
.abre-inicio__titulo { font: 800 clamp(3rem, 7.4vw, 6.6rem)/.94 var(--letra-titulo); letter-spacing: -.035em; margin: 0 0 22px; max-width: 13ch;
  font-variation-settings: "wdth" 90; text-shadow: var(--sombra-texto); padding-bottom: .06em; }
.abre-inicio__titulo em { font-style: normal; background: linear-gradient(90deg, #FF5C8A, #FFB547 35%, #7CF0B0 65%, #4CC9F0);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.abre-inicio__lede { font-size: clamp(1.1rem, 1.7vw, 1.35rem); max-width: 46ch; color: #C9D3DE; margin: 0 0 28px; text-shadow: var(--sombra-texto); }
.abre-inicio__atalhos { display: flex; flex-wrap: wrap; gap: 22px; margin: 24px 0 0; }
.abre-inicio__credito { position: absolute; right: var(--gutter); bottom: 14px; z-index: 2; font-size: .72rem; color: #6F7B89; margin: 0; max-width: 60%; text-align: right; }
@media (max-width: 700px) {
  .abre-inicio { min-height: 92vh; padding-top: 100px; }
  .abre-inicio::after { background: linear-gradient(0deg, rgba(12, 16, 22, .98) 0%, rgba(12, 16, 22, .7) 45%, rgba(12, 16, 22, .1) 80%); }
  .abre-inicio__credito { position: relative; right: auto; bottom: auto; max-width: none; text-align: left; padding: 0 var(--gutter); }
}
.faixa--destaques { padding: 28px 0; background: #0C1016; border-top: 1px solid rgba(255, 255, 255, .06); color: #EDF1F5; }
.destaques { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 900px) { .destaques { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.destaque-rio { display: grid; grid-template-columns: 54px 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; text-decoration: none;
  padding: 10px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .07); transition: border-color var(--t), background var(--t); }
.destaque-rio:hover { border-color: var(--rio); background: rgba(255, 255, 255, .03); }
.destaque-rio .mini-rio { grid-row: span 2; width: 54px; height: 40px; }
.destaque-rio b { font: 700 .98rem/1.1 var(--letra-titulo); }
.destaque-rio span { font: 500 .74rem var(--mono); color: #6F7B89; }
.contagem { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.contagem p { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.contagem b { font: 800 clamp(2rem, 4.4vw, 3.6rem)/1 var(--letra-titulo); letter-spacing: -.04em; }
.contagem span { color: var(--tinta-2); }
@media (max-width: 700px) { .contagem { grid-template-columns: 1fr 1fr; } }
.esticados { display: flex; flex-direction: column; }
.estica { display: grid; grid-template-columns: 34px minmax(140px, 220px) 1fr 104px; gap: 16px; align-items: center; padding: 12px 0; text-decoration: none;
  border-top: 1px solid var(--linha); }
.estica:hover .estica__nome b { color: var(--rio-texto, var(--rio)); }
.estica__pos { font: 500 .85rem var(--mono); color: var(--tinta-3); }
.estica__nome b { display: block; font: 700 1.1rem var(--letra-titulo); letter-spacing: -.02em; transition: color var(--t); }
.estica__nome small { display: flex; gap: 6px; align-items: center; color: var(--tinta-3); font-size: .8rem; }
.estica__pista { position: relative; height: 34px; display: flex; align-items: center; }
.esticado { display: block; height: 30px; border-bottom: 3px solid var(--rio); border-radius: 0 0 2px 2px; box-shadow: 0 6px 14px -8px var(--rio); }
.esticado svg { width: 100%; height: 100%; overflow: visible; }
.esticado polyline { fill: none; stroke: var(--rio); stroke-width: 1.4; vector-effect: non-scaling-stroke; opacity: .85; }
.estica__km { font: 500 1rem var(--mono); text-align: right; }
.estica__km small { color: var(--tinta-3); }
.estica--pais { grid-template-columns: minmax(130px, 220px) 1fr 104px; }
@media (max-width: 700px) {
  .estica { grid-template-columns: 24px 1fr 76px; gap: 8px 10px; }
  .estica__pista { grid-column: 2 / span 2; grid-row: 2; }
  .estica--pais { grid-template-columns: 1fr 76px; }
  .estica--pais .estica__pista { grid-column: 1 / span 2; }
}
.meses-botoes { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.mes-botao { border: 1px solid var(--linha-forte); background: none; padding: 8px 14px; border-radius: 999px; cursor: pointer; font-weight: 500; }
.mes-botao[aria-pressed="true"] { background: var(--ambar); border-color: var(--ambar); color: #0C1016; }
.paises-pilulas { display: flex; flex-wrap: wrap; gap: 10px; }
.pais-pilula { display: inline-flex; align-items: center; gap: 10px; padding: 9px 14px; border-radius: 999px; border: 1px solid var(--linha-forte); text-decoration: none; }
.pais-pilula b { font: 500 .8rem var(--mono); color: var(--tinta-3); }
.pais-pilula:hover { border-color: var(--ambar); }
.confianca { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px; }
@media (max-width: 900px) { .confianca { grid-template-columns: 1fr; } }
.confianca__fontes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--linha);
  border: 1px solid var(--linha); border-radius: var(--raio-g); overflow: hidden; }
.confianca__fontes li { background: var(--noite); padding: 20px; }
.confianca__fontes b { display: block; font-family: var(--letra-titulo); font-size: 1.1rem; }
.confianca__fontes span { font-size: .88rem; color: var(--tinta-2); }

/* ---- paginas de lista -------------------------------------------------- */
.faixa--cab-pagina { padding-top: clamp(60px, 9vw, 120px); padding-bottom: clamp(30px, 4vw, 50px); border-top: 0; }
.faixa--cab-pagina .sobretitulo span { margin-left: 4px; }
.continentes { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 34px; }
.paises-lista { display: flex; flex-direction: column; }
.pais-linha { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--linha); text-decoration: none; }
.pais-linha b { margin-left: auto; font: 500 .85rem var(--mono); color: var(--tinta-3); }
.pais-linha:hover span { color: var(--ambar); }
.outros-rios { columns: 3 220px; padding: 0; list-style: none; }
.outros-rios li { padding: 4px 0; break-inside: avoid; }
.outros-rios span { color: var(--tinta-3); margin-left: 8px; font-family: var(--mono); font-size: .8rem; }
.ranks { display: flex; flex-direction: column; }
.rank { display: grid; grid-template-columns: 44px 84px 1fr auto; gap: 18px; align-items: center; padding: 12px 0; border-top: 1px solid var(--linha); text-decoration: none; }
.rank__pos { font: 500 1rem var(--mono); color: var(--tinta-3); }
.rank__img { width: 84px; height: 58px; border-radius: 12px; background: #0C1016; display: grid; place-items: center; overflow: hidden; }
.rank__corpo b { display: block; font: 700 1.15rem var(--letra-titulo); }
.rank__corpo > span { display: flex; gap: 6px; align-items: center; font-size: .85rem; color: var(--tinta-2); }
.rank__corpo .esticado { margin-top: 6px; height: 18px; }
.rank__valor { text-align: right; font: 500 1.15rem var(--mono); }
.rank__valor small { display: block; font-size: .74rem; color: var(--tinta-3); }
.rank:hover b { color: var(--rio-texto, var(--rio)); }
@media (max-width: 600px) { .rank { grid-template-columns: 30px 64px 1fr; } .rank__img { width: 64px; height: 46px; } .rank__valor { grid-column: 3; text-align: left; } }
.meses-nav { display: flex; flex-wrap: wrap; gap: 6px; }
.meses-nav a { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--linha); text-decoration: none; }
.meses-nav a[aria-current="page"] { background: var(--ambar); color: #0C1016; border-color: var(--ambar); }
.meses-grelha { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.mes-cartao { display: flex; flex-direction: column; gap: 6px; padding: 14px; border-radius: var(--raio-g); border: 1px solid var(--linha); text-decoration: none; background: var(--noite-2); }
.mes-cartao:hover { border-color: var(--ambar); }
.mes-cartao__rios { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; background: #0C1016; border-radius: 12px; padding: 8px; min-height: 64px; }
.mes-cartao__rio { height: 48px; }
.mes-cartao__nome { font: 800 1.5rem var(--letra-titulo); letter-spacing: -.03em; }
.mes-cartao__n { color: var(--tinta-3); font-size: .85rem; }

/* ---- procurar ----------------------------------------------------------- */
.procurar { display: grid; grid-template-columns: 290px 1fr; gap: 34px; align-items: start; }
@media (max-width: 900px) { .procurar { grid-template-columns: 1fr; } }
.filtros { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 90px; padding: 20px; border: 1px solid var(--linha); border-radius: var(--raio-g); background: var(--noite-2); }
@media (max-width: 900px) { .filtros { position: static; } }
.filtro { display: flex; flex-direction: column; gap: 6px; font-size: .9rem; border: 0; padding: 0; margin: 0; }
.filtro span, .filtro legend { color: var(--tinta-2); font-weight: 500; }
.filtro input[type="search"], .filtro select { font: inherit; color: var(--tinta); background: var(--noite); border: 1px solid var(--linha-forte); border-radius: 10px; padding: 9px 12px; }
.filtro input[type="range"] { accent-color: var(--ambar); }
.filtro output { font-family: var(--mono); color: var(--ambar); }
.filtro--chips { flex-direction: row; flex-wrap: wrap; gap: 6px; }
.filtro--chips legend { width: 100%; margin-bottom: 6px; }
.filtro--chips label input { position: absolute; opacity: 0; }
.filtro--chips label span { display: inline-block; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--linha-forte); font-size: .85rem; cursor: pointer; }
.filtro--chips label input:checked + span { background: var(--ambar); color: #0C1016; border-color: var(--ambar); }
.filtro--check { flex-direction: row; align-items: center; gap: 10px; }
.filtro--check input { accent-color: var(--ambar); width: 18px; height: 18px; }
.resultados__conta { color: var(--tinta-2); margin: 0 0 16px; }
.resultados__lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }

/* ---- mapa --------------------------------------------------------------- */
/* o rodape fica por baixo do mapa (todas as paginas acabam com as ligacoes as outras); o mapa
   deixa ver o comeco dele, para se perceber que ha mais pagina */
.mapa-pagina { position: relative; height: calc(100vh - 67px - 64px); min-height: 420px; }
/* o maplibre-gl.css chega depois desta folha e poe .maplibregl-map em position:relative:
   sem esta regra mais forte o mapa ficava com 0 px de altura (o Paulo: "no mapa nao aparece nada") */
.mapa, .mapa-pagina .mapa.maplibregl-map { position: absolute; inset: 0; background: #0C1016; }
.mapa-pagina__painel { position: absolute; z-index: 5; left: 16px; top: 16px; width: min(320px, calc(100% - 32px)); padding: 18px; border-radius: 18px;
  background: color-mix(in srgb, #0C1016 88%, transparent); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, .1); color: #EDF1F5; }
.mapa-legenda p { display: flex; align-items: center; gap: 8px; margin: 6px 0; font-size: .85rem; }
.ponto { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.ponto--pagina { background: #FFB547; box-shadow: 0 0 8px #FFB547; }
.ponto--simples { background: #6F7B89; }
.maplibregl-popup-content { background: #11161E !important; color: #EDF1F5; border-radius: 12px !important; border: 1px solid rgba(255, 255, 255, .1); }
.maplibregl-popup-tip { border-top-color: #11161E !important; border-bottom-color: #11161E !important; }

/* ---- comparar ----------------------------------------------------------- */
.comparar__escolhidos { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0; }
.comparar__barras { display: flex; flex-direction: column; gap: 2px; margin-bottom: 24px; }
.tabela-comparar th { white-space: nowrap; }
.tabela-comparar td { font-family: var(--mono); }

/* ---- texto longo, contactos, 404 ---------------------------------------- */
.texto-longo { font-size: 1.05rem; color: var(--tinta-2); }
.texto-longo h2 { color: var(--tinta); margin-top: 1.6em; }
.texto-longo a { color: var(--ambar); }
.contacto dt { font-weight: 600; margin-top: 12px; }
.contacto dd { margin: 4px 0 0; color: var(--tinta-2); }
.faixa--404 { min-height: 60vh; }

/* ---- continue a explorar ------------------------------------------------ */
.faixa--explorar { padding: 64px 0; }
.explorar { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.explorar__item { display: flex; align-items: center; gap: 10px; padding: 13px 15px; border-radius: 14px; border: 1px solid var(--linha); text-decoration: none; font-weight: 500;
  font-size: .93rem; transition: border-color var(--t), background var(--t); }
.explorar__item svg { width: 20px; height: 20px; color: var(--ambar); flex: none; }
.explorar__item:hover, .explorar__item[aria-current="page"] { border-color: var(--ambar); background: var(--noite-2); }

/* ---- a familia de sites -------------------------------------------------- */
.faixa--familia { background: var(--noite-2); }
.irmaos { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.irmao { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 22px; border-radius: var(--raio-g); background: var(--f); color: var(--t);
  text-decoration: none; min-height: 210px; border: 1px solid rgba(255, 255, 255, .06); transition: transform var(--t); overflow: hidden; }
a.irmao:hover { transform: translateY(-3px); }
.irmao__favicon, .irmao__simbolo svg { width: 46px; height: 46px; border-radius: 12px; }
.irmao__tema { font: 500 .72rem var(--mono); text-transform: uppercase; letter-spacing: .14em; opacity: .7; margin-top: 10px; }
.irmao__letras { height: 34px; width: auto; max-width: 100%; object-fit: contain; object-position: left; }
.irmao__nome { font: 800 1.6rem var(--letra-titulo); }
.irmao__frase { font-size: .9rem; opacity: .85; }
.irmao__accao { margin-top: auto; padding-top: 10px; font-weight: 600; font-size: .9rem; color: var(--a); }
.irmao--este { box-shadow: inset 0 0 0 2px var(--a); }
.irmao--este .irmao__accao { color: var(--a); }
.so-breve { opacity: .75; }

/* ---- rodape ------------------------------------------------------------- */
.rodape { background: #080B10; color: #A9B4C1; padding: 70px 0 30px; border-top: 1px solid rgba(255, 255, 255, .06); }
:root[data-theme="light"] .rodape { background: #13171C; }
.rodape a { color: #C9D3DE; text-decoration: none; }
.rodape a:hover { color: #fff; }
.rodape__cima { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 40px; }
@media (max-width: 900px) { .rodape__cima { grid-template-columns: 1fr; } }
.marca-nome--rodape { color: #EDF1F5 !important; margin-bottom: 12px; }
.rodape__marca p { max-width: 36ch; }
.rodape__colunas { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 24px; }
.rodape h4 { font: 500 .74rem var(--mono); text-transform: uppercase; letter-spacing: .14em; color: #6F7B89; margin-bottom: 12px; }
.rodape ul { list-style: none; margin: 0; padding: 0; }
.rodape li { padding: 4px 0; }
.botao-texto { border: 0; background: none; padding: 0; cursor: pointer; color: #C9D3DE; }
.botao-texto[aria-pressed="true"] { color: #FFB547; }
.rodape__legal { margin-top: 44px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .06); font-size: .76rem; color: #6F7B89; }

/* ---- aparecer ao rolar ---------------------------------------------------- */
.revela { opacity: 0; transform: translateY(28px); transition: opacity .9s ease, transform .9s cubic-bezier(.2, .7, .2, 1); }
.revela.visivel { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .revela { opacity: 1; transform: none; transition: none; } }

/* ---- consentimento (medir.js) -------------------------------------------- */
.consentimento { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 90; max-width: 560px; margin: 0 auto; padding: 20px; border-radius: 18px;
  background: #11161E; color: #EDF1F5; border: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .7); }
.consentimento button { margin: 10px 10px 0 0; }

/* ---- cartoes feitos no navegador (procurar): as ondas do caudal de cada mes ---- */
.cartao__ondas rect { fill: var(--rio); opacity: .85; }
.ano__col--hoje .ano__tubo { outline: 2px solid var(--tinta-2); outline-offset: 2px; }

/* ---- a faixa dos cookies (medir.js) ---------------------------------------- */
.cookies { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; background: #11161E; color: #EDF1F5; border-top: 1px solid rgba(255, 255, 255, .12);
  padding: 20px 0; box-shadow: 0 -20px 50px -20px rgba(0, 0, 0, .7); }
.cookies__linha { display: flex; gap: 24px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.cookies__texto { max-width: 70ch; }
.cookies__texto p { color: #A9B4C1; margin: 0; }
.cookies__botoes { display: flex; gap: 10px; flex-wrap: wrap; }
.cookies__opcoes { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.botao--vazado { background: transparent; color: #EDF1F5; }