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

   Identidade: um atlas de campo. Letra serifada editorial (Fraunces)
   para os nomes e os titulos, Manrope para o resto. Verde-abeto profundo,
   agua-marinha e um lima de destaque. Curvas de nivel (batimetria) como
   textura. As cores da agua (--t0 ... --t10) sao escritas pelo gerador
   a partir de build/paleta.py.

   Nada aqui e copiado do Coastya: outra letra, outras cores, outra
   estrutura de pagina.
   ===================================================================== */

:root {
  --t0: #1e3663;
  --t1: #004a7f;
  --t2: #01607e;
  --t3: #007680;
  --t4: #008c82;
  --t5: #01a37c;
  --t6: #41b765;
  --t7: #8dc15e;
  --t8: #c3c96d;
  --t9: #e6d592;
  --t10: #ffe4bb;
  --gelo: #e9f1f7;
  --papel: #f4f6f1;
  --papel-2: #e9efe9;
  --papel-3: #dfe8e2;
  --cartao: #ffffff;
  --tinta: #0b2e2a;
  --tinta-2: #3d5752;
  --tinta-3: #6c817c;
  --linha: #d5dfd9;
  --linha-forte: #b9c9c1;
  --acento: #0c7a69;
  --acento-forte: #075c4f;
  --aqua: #7fe0cf;
  --lima: #d4f25a;
  --escuro: #0b2e2a;
  --escuro-2: #0f3b36;
  --escuro-3: #164a43;
  --sobre-escuro: #e9f4ef;
  --sobre-escuro-2: #a8c9bf;
  --sombra: 0 1px 2px rgba(11, 46, 42, .06), 0 8px 24px -12px rgba(11, 46, 42, .18);
  --raio: 14px;
  --raio-g: 22px;
  --letra-titulo: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --letra: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  --largura: 1240px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --papel: #08201d;
    --papel-2: #0c2925;
    --papel-3: #11322d;
    --cartao: #0f2c28;
    --tinta: #e6f2ed;
    --tinta-2: #a7c3ba;
    --tinta-3: #7e9a92;
    --linha: #1f413b;
    --linha-forte: #2c5750;
    --acento: #7fe0cf;
    --acento-forte: #b4f0e4;
    --escuro: #061815;
    --escuro-2: #0a2420;
    --escuro-3: #10302b;
    --sombra: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 30px -12px rgba(0, 0, 0, .6);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --papel: #08201d;
  --papel-2: #0c2925;
  --papel-3: #11322d;
  --cartao: #0f2c28;
  --tinta: #e6f2ed;
  --tinta-2: #a7c3ba;
  --tinta-3: #7e9a92;
  --linha: #1f413b;
  --linha-forte: #2c5750;
  --acento: #7fe0cf;
  --acento-forte: #b4f0e4;
  --escuro: #061815;
  --escuro-2: #0a2420;
  --escuro-3: #10302b;
  --sombra: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 30px -12px rgba(0, 0, 0, .6);
  color-scheme: dark;
}

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html.i18n-espera body { visibility: hidden; }
body {
  margin: 0; background: var(--papel); color: var(--tinta);
  font: 400 1.0625rem/1.6 var(--letra); font-feature-settings: "tnum" 0;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; }
img { height: auto; display: block; }
a { color: var(--acento); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--acento-forte); }
:focus-visible { outline: 3px solid var(--aqua); outline-offset: 2px; border-radius: 6px; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.1; font-weight: 600; }
p { margin: 0 0 1em; }
.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: -999px; top: 8px; background: var(--lima); color: var(--escuro);
  padding: 8px 14px; border-radius: 8px; z-index: 100; font-weight: 700; }
.saltar:focus { left: 12px; }
.envolve { width: 100%; max-width: var(--largura); margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px); }
.estreito { max-width: 780px; }
.envolve.estreito { max-width: calc(780px + 2 * clamp(16px, 4vw, 40px)); }
.h1 { font-family: var(--letra-titulo); font-size: clamp(2.3rem, 5vw, 3.9rem);
  font-variation-settings: "opsz" 144, "SOFT" 50; letter-spacing: -.02em; font-weight: 560; }
.h2 { font-family: var(--letra-titulo); font-size: clamp(1.75rem, 3.4vw, 2.6rem);
  font-variation-settings: "opsz" 96, "SOFT" 50; letter-spacing: -.015em; font-weight: 560; }
.h3 { font-family: var(--letra-titulo); font-size: clamp(1.3rem, 2.2vw, 1.6rem); font-weight: 600;
  font-variation-settings: "opsz" 48; }
.h4 { font-size: 1rem; font-weight: 750; letter-spacing: .01em; }
.lede { font-size: clamp(1.05rem, 1.6vw, 1.2rem); color: var(--tinta-2); max-width: 62ch; }
.pequeno { font-size: .86rem; }
.discreto { color: var(--tinta-3); }
.sobretitulo { display: flex; align-items: center; gap: 10px; margin: 0 0 .7em;
  font-size: .76rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--acento); }
.sobretitulo::before { content: ""; width: 22px; height: 2px; background: currentColor; border-radius: 2px; }
.sobretitulo--claro { color: var(--aqua); }
.sobretitulo .bandeira { margin-right: 2px; }
.sobretitulo:has(.bandeira)::before { display: none; }
.bandeira { display: inline-block; width: 20px; height: 15px; border-radius: 3px; object-fit: cover;
  box-shadow: 0 0 0 1px rgba(0,0,0,.08); vertical-align: -2px; }
.ligacao-seta { font-weight: 700; text-decoration: none; display: inline-flex; gap: 8px; align-items: center; }
.ligacao-seta::after { content: "→"; transition: transform .2s; }
.ligacao-seta:hover::after { transform: translateX(4px); }
.esconde-movel { }
@media (max-width: 760px) { .esconde-movel { display: none !important; } }

.faixa { padding: clamp(56px, 8vw, 104px) 0; }
.faixa + .faixa { padding-top: 0; }
.faixa--intro { padding: clamp(40px, 6vw, 72px) 0 clamp(32px, 4vw, 48px); }
.faixa--cab-pagina { padding: clamp(48px, 7vw, 88px) 0 clamp(24px, 4vw, 40px);
  background:
    radial-gradient(1200px 400px at 85% -20%, color-mix(in oklab, var(--aqua) 22%, transparent), transparent 60%),
    var(--papel); }
.faixa--cab-pagina + .faixa { padding-top: clamp(24px, 4vw, 40px); }

/* botoes e chips */
.botao { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 999px;
  border: 0; background: var(--tinta); color: var(--papel); font-weight: 750; text-decoration: none;
  cursor: pointer; transition: transform .15s, background .2s; }
.botao:hover { transform: translateY(-1px); color: var(--papel); }
.botao--vazado { background: transparent; color: var(--tinta); box-shadow: inset 0 0 0 1.5px var(--linha-forte); }
.botao--vazado:hover { color: var(--tinta); box-shadow: inset 0 0 0 1.5px var(--tinta); }
.botao--vazado[aria-pressed="true"] { background: var(--tinta); color: var(--papel); }
.botao-texto { background: none; border: 0; padding: 0; cursor: pointer; color: inherit; text-align: left; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px;
  font-size: .88rem; font-weight: 700; text-decoration: none; cursor: pointer;
  border: 1.5px solid var(--linha-forte); background: transparent; color: var(--tinta); transition: all .15s; }
.chip:hover { border-color: var(--tinta); color: var(--tinta); }
.chip[aria-pressed="true"] { background: var(--tinta); border-color: var(--tinta); color: var(--papel); }
.chip--claro { color: var(--sobre-escuro); border-color: rgba(233, 244, 239, .28); }
.chip--claro:hover { color: var(--escuro); background: var(--lima); border-color: var(--lima); }

/* ---------------------------------------------------------------- topo */
.topo { position: sticky; top: 0; z-index: 50; background: color-mix(in oklab, var(--papel) 86%, transparent);
  backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid color-mix(in oklab, var(--linha) 70%, transparent); transition: background .3s, border-color .3s; }
.topo__linha { display: flex; align-items: center; gap: 24px; height: 68px; }
.topo--escuro { position: fixed; left: 0; right: 0; background: transparent; border-color: transparent;
  color: var(--sobre-escuro); }
.topo--escuro.topo--solido { background: color-mix(in oklab, var(--escuro) 88%, transparent); }
.marca-nome { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.marca-nome:hover { color: inherit; }
.marca-simbolo { width: 34px; height: 34px; flex: none; }
.marca-palavra { font-family: var(--letra-titulo); font-size: 1.55rem; font-weight: 600; letter-spacing: -.02em;
  font-variation-settings: "opsz" 72, "SOFT" 100; font-style: italic; }
.topo__nav { display: flex; gap: 4px; margin-left: auto; }
.topo__nav a { padding: 8px 12px; border-radius: 999px; color: inherit; text-decoration: none; font-weight: 650;
  font-size: .95rem; opacity: .85; }
.topo__nav a:hover, .topo__nav a[aria-current="page"] { opacity: 1; background: color-mix(in oklab, currentColor 10%, transparent); }
.topo__ferramentas { display: flex; align-items: center; gap: 6px; }
.tema { width: 38px; height: 38px; border-radius: 50%; border: 0; background: transparent; cursor: pointer;
  display: grid; place-items: center; color: inherit; }
.tema:hover { background: color-mix(in oklab, currentColor 10%, transparent); }
.linguas-menu { position: relative; }
.linguas-menu summary { list-style: none; display: flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 8px 10px; border-radius: 999px; font-weight: 750; font-size: .85rem; }
.linguas-menu summary::-webkit-details-marker { display: none; }
.linguas-menu summary:hover { background: color-mix(in oklab, currentColor 10%, transparent); }
.linguas-menu ul { position: absolute; right: 0; top: calc(100% + 8px); list-style: none; margin: 0; padding: 6px;
  background: var(--cartao); color: var(--tinta); border: 1px solid var(--linha); border-radius: 14px;
  box-shadow: var(--sombra); min-width: 190px; }
.linguas-menu li button { width: 100%; display: flex; gap: 10px; align-items: center; padding: 9px 12px;
  border-radius: 9px; border: 0; background: none; cursor: pointer; text-align: left; font-weight: 600; }
.linguas-menu li button:hover, .linguas-menu li button[aria-pressed="true"] { background: var(--papel-2); }
.linguas-menu__codigo { font-size: .72rem; font-weight: 800; color: var(--tinta-3); width: 22px; }
@media (max-width: 760px) {
  .topo__linha { height: 60px; gap: 10px; }
  .marca-palavra { font-size: 1.3rem; }
  .topo__nav a { padding: 7px 8px; font-size: .88rem; }
}
@media (max-width: 420px) { .marca-palavra { display: none; } }

/* ---------------------------------------------------------------- heroi (inicio) */
.heroi { position: relative; overflow: hidden; color: var(--sobre-escuro); background: var(--escuro);
  padding: 120px 0 36px; }
.heroi__fundo { position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(900px 600px at 78% 40%, rgba(127, 224, 207, .16), transparent 60%),
    radial-gradient(700px 500px at 10% 100%, rgba(212, 242, 90, .07), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='520' viewBox='0 0 520 520'%3E%3Cg fill='none' stroke='%237fe0cf' stroke-opacity='.075' stroke-width='1.2'%3E%3Cpath d='M260 40c120 0 210 80 220 200s-80 240-220 240S30 400 40 260 140 40 260 40Z'/%3E%3Cpath d='M260 80c100 0 175 66 182 166s-66 196-182 196S72 374 80 262 160 80 260 80Z'/%3E%3Cpath d='M262 122c78 0 136 52 142 130s-52 152-142 152-148-58-140-146 62-136 140-136Z'/%3E%3Cpath d='M262 164c56 0 98 38 102 94s-38 108-102 108-106-42-100-104 44-98 100-98Z'/%3E%3Cpath d='M262 206c34 0 60 22 62 56s-22 64-62 64-64-24-60-62 26-58 60-58Z'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 520px 520px,
    linear-gradient(160deg, var(--escuro) 0%, var(--escuro-2) 55%, #0c4640 100%); }
.heroi__grelha { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center;
  min-height: min(78vh, 760px); }
.heroi__titulo { font-family: var(--letra-titulo); font-weight: 520; font-size: clamp(2.9rem, 7.2vw, 6.2rem);
  line-height: .98; letter-spacing: -.035em; margin: 0 0 22px; font-variation-settings: "opsz" 144, "SOFT" 60; }
.heroi__titulo em { font-style: italic; color: var(--lima); font-weight: 480; }
.heroi__lede { font-size: clamp(1.05rem, 1.7vw, 1.25rem); color: var(--sobre-escuro-2); max-width: 46ch; margin-bottom: 28px; }
.heroi__atalhos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.heroi__palco { position: relative; aspect-ratio: 1; width: 100%; max-width: 560px; justify-self: center; }
.heroi__lago { position: absolute; inset: 0; display: grid; place-items: center; text-decoration: none; color: inherit;
  opacity: 0; transform: scale(.96); transition: opacity .9s ease, transform 1.2s ease; pointer-events: none; }
.heroi__lago--activo { opacity: 1; transform: none; pointer-events: auto; }
.heroi__anel { position: absolute; inset: 3% 3% 9% 3%; }
.heroi__anel .relogio { width: 100%; height: 100%; }
.heroi__anel .relogio__centro, .heroi__anel .relogio__grande, .heroi__anel .relogio__legenda { display: none; }
.heroi__anel .relogio__rotulo { fill: var(--sobre-escuro-2); }
.heroi__forma { position: relative; width: 48%; aspect-ratio: 1; display: grid; place-items: center; margin-bottom: 6%; }
.silhueta--heroi { width: 100%; height: 100%; overflow: visible; }
.silhueta--heroi path { fill: rgba(127, 224, 207, .14); stroke: var(--aqua); stroke-width: 1.6;
  vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.heroi__lago--activo .silhueta--heroi path { stroke-dasharray: 3000; stroke-dashoffset: 3000;
  animation: desenhar 2.6s cubic-bezier(.6, .1, .2, 1) forwards; }
@keyframes desenhar { to { stroke-dashoffset: 0; } }
.heroi__legenda { position: absolute; bottom: -2%; left: 50%; transform: translateX(-50%); text-align: center;
  white-space: nowrap; }
.heroi__legenda b { display: block; font-family: var(--letra-titulo); font-size: 1.35rem; font-weight: 560; }
.heroi__legenda span { font-size: .85rem; color: var(--sobre-escuro-2); display: inline-flex; gap: 6px; align-items: center; }
.heroi__numeros { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin: 48px 0 0;
  border-top: 1px solid rgba(233, 244, 239, .14); }
.heroi__numeros div { padding: 18px 0 4px; }
.heroi__numeros dt { font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--sobre-escuro-2);
  font-weight: 700; order: 2; }
.heroi__numeros dd { margin: 0; font-family: var(--letra-titulo); font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 520; }
.heroi__numeros div { display: flex; flex-direction: column-reverse; }
@media (max-width: 900px) {
  .heroi { padding-top: 92px; }
  .heroi__grelha { grid-template-columns: 1fr; min-height: 0; }
  .heroi__palco { max-width: 420px; }
  .heroi__numeros { grid-template-columns: repeat(2, 1fr); }
}

/* pesquisa */
.pesquisa { position: relative; max-width: 560px; }
.pesquisa__campo { position: relative; display: flex; align-items: center; }
.pesquisa__campo svg { position: absolute; left: 16px; width: 20px; height: 20px; color: var(--tinta-3); pointer-events: none; }
.pesquisa input { width: 100%; padding: 15px 18px 15px 48px; border-radius: 999px; border: 1.5px solid var(--linha-forte);
  background: var(--cartao); color: var(--tinta); font: 600 1rem var(--letra); outline: none; }
.pesquisa input:focus { border-color: var(--acento); box-shadow: 0 0 0 4px color-mix(in oklab, var(--aqua) 35%, transparent); }
.pesquisa--grande input { padding: 19px 22px 19px 52px; font-size: 1.08rem; border: 0;
  box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .5); }
.sugestoes { position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 40; background: var(--cartao);
  color: var(--tinta); border: 1px solid var(--linha); border-radius: 18px; box-shadow: var(--sombra);
  padding: 6px; display: none; max-height: 420px; overflow: auto; }
.sugestoes.aberta { display: block; }
.sugestao { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; text-decoration: none;
  color: var(--tinta); cursor: pointer; }
.sugestao:hover, .sugestao[aria-selected="true"] { background: var(--papel-2); color: var(--tinta); }
.sugestao__forma { width: 44px; height: 32px; flex: none; }
.sugestao__forma svg { width: 100%; height: 100%; }
.sugestao__forma path { fill: color-mix(in oklab, var(--acento) 18%, transparent); stroke: var(--acento); stroke-width: 2;
  vector-effect: non-scaling-stroke; }
.sugestao__ponto { width: 10px; height: 10px; border-radius: 50%; background: var(--linha-forte); margin: 0 17px; flex: none; }
.sugestao__nome { font-weight: 700; display: block; }
.sugestao__onde { font-size: .82rem; color: var(--tinta-3); display: flex; gap: 6px; align-items: center; }
.sugestao__seta { margin-left: auto; color: var(--tinta-3); font-size: .78rem; white-space: nowrap; }

/* ---------------------------------------------------------------- cabecalhos de seccao */
.seccao-cab { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap;
  margin-bottom: 28px; }
.seccao-cab .lede { margin-bottom: 0; }
.meses-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.meses-chips .chip { padding: 6px 11px; font-size: .82rem; }

/* ---------------------------------------------------------------- cartoes de lago */
.cartoes-grelha, .cartoes, .mes-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.mes-lista[hidden] { display: none; }
.cartao { position: relative; display: flex; flex-direction: column; text-decoration: none; color: var(--tinta);
  background: var(--cartao); border: 1px solid var(--linha); border-radius: var(--raio-g); overflow: hidden;
  transition: transform .2s, border-color .2s, box-shadow .2s; }
.cartao:hover { transform: translateY(-3px); border-color: var(--linha-forte); box-shadow: var(--sombra); color: var(--tinta); }
.cartao__forma { display: grid; place-items: center; height: 150px; padding: 18px;
  background:
    radial-gradient(circle at 50% 120%, color-mix(in oklab, var(--aqua) 26%, transparent), transparent 70%),
    var(--papel-2); }
.silhueta--cartao { width: 100%; height: 100%; }
.silhueta--cartao path, .silhueta--especime path { fill: color-mix(in oklab, var(--acento) 22%, transparent);
  stroke: var(--acento); stroke-width: 1.4; vector-effect: non-scaling-stroke; stroke-linejoin: round;
  transition: fill .25s; }
.cartao:hover .silhueta--cartao path { fill: color-mix(in oklab, var(--acento) 40%, transparent); }
.cartao__corpo { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 4px; }
.cartao__nome { font-family: var(--letra-titulo); font-size: 1.28rem; font-weight: 600; line-height: 1.15;
  font-variation-settings: "opsz" 36; }
.cartao__onde { display: flex; align-items: center; gap: 7px; color: var(--tinta-2); font-size: .9rem; font-weight: 600; }
.cartao__extra { font-size: .82rem; color: var(--tinta-3); }
.cartao__temp { position: absolute; top: 14px; right: 14px; padding: 5px 10px; border-radius: 999px;
  background: var(--c, var(--papel-3)); color: var(--tc, var(--tinta)); font-weight: 800; font-size: .92rem;
  font-variant-numeric: tabular-nums; }
.cartao__temp small { font-size: .62rem; margin-left: 3px; opacity: .8; text-transform: uppercase; letter-spacing: .06em; }
.fita { display: flex; gap: 2px; margin-top: 10px; }
.fita i { flex: 1; height: 8px; border-radius: 2px; background: var(--papel-3); }
.fita i:first-child { border-radius: 4px 2px 2px 4px; }
.fita i:last-child { border-radius: 2px 4px 4px 2px; }
.fita i.vazio { background: repeating-linear-gradient(45deg, var(--papel-3), var(--papel-3) 2px, transparent 2px, transparent 4px); }

/* ---------------------------------------------------------------- biblioteca de formas */
.faixa--formas { background: var(--papel-2); padding-top: clamp(56px, 8vw, 104px) !important; }
.biblioteca { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.especime { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 10px 14px;
  border-radius: var(--raio); text-decoration: none; color: var(--tinta-2); transition: background .2s; }
.especime:hover { background: var(--cartao); color: var(--tinta); }
.especime svg { width: 100%; height: 110px; transition: transform .6s cubic-bezier(.3, .7, .2, 1); }
.especime span { font-size: .84rem; font-weight: 700; text-align: center; line-height: 1.25; }
.especime:hover path { fill: color-mix(in oklab, var(--acento) 45%, transparent); }

/* ---------------------------------------------------------------- o corte em profundidade */
.faixa--corte { background: var(--escuro); color: var(--sobre-escuro); padding-top: clamp(56px, 8vw, 104px) !important; }
.faixa--corte .lede { color: var(--sobre-escuro-2); }
.corte { position: relative; display: grid; grid-template-columns: repeat(10, 1fr); gap: clamp(4px, 1vw, 14px);
  height: 480px; margin-top: 36px; padding-top: 34px; }
.corte__superficie { position: absolute; left: 0; right: 0; top: 34px; height: 2px; background: var(--aqua);
  box-shadow: 0 0 24px var(--aqua); }
.corte__superficie span { position: absolute; top: -26px; left: 0; font-size: .72rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--aqua); font-weight: 800; }
.corte__lago { position: relative; display: flex; flex-direction: column; text-decoration: none; color: inherit; height: 100%; }
.corte__barra { display: block; width: 100%; height: var(--h); border-radius: 0 0 10px 10px;
  background: linear-gradient(180deg, rgba(127, 224, 207, .55), rgba(30, 54, 99, .9));
  transform-origin: top; animation: descer 1.4s cubic-bezier(.3, .7, .2, 1) both; transition: filter .2s; }
.corte__lago:hover .corte__barra { filter: brightness(1.3); }
@keyframes descer { from { transform: scaleY(0); } }
.corte__nome { position: absolute; top: calc(var(--h) + 8px); left: 0; right: 0; font-size: .78rem; font-weight: 700;
  line-height: 1.2; color: var(--sobre-escuro); }
.corte__nome b { display: block; color: var(--lima); font-family: var(--letra-titulo); font-size: 1.05rem; }
@media (max-width: 760px) {
  .corte { grid-template-columns: repeat(5, 1fr); height: auto; row-gap: 120px; }
  .corte__lago { height: 260px; }
  .corte__superficie { display: none; }
}

/* ---------------------------------------------------------------- paises */
.paises-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 24px; }
.pais-chip { display: inline-flex; align-items: center; gap: 9px; padding: 9px 14px; border-radius: 999px;
  border: 1px solid var(--linha); background: var(--cartao); text-decoration: none; color: var(--tinta); font-weight: 650; }
.pais-chip:hover { border-color: var(--tinta); color: var(--tinta); }
.pais-chip b { font-size: .8rem; color: var(--tinta-3); }
.continentes { display: grid; gap: 40px; }
.paises-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 2px 18px; }
.pais-linha { display: flex; align-items: center; gap: 10px; padding: 10px 6px; border-bottom: 1px solid var(--linha);
  text-decoration: none; color: var(--tinta); font-weight: 600; }
.pais-linha b { margin-left: auto; color: var(--tinta-3); font-size: .85rem; }
.pais-linha:hover { color: var(--acento); }
.outros-lagos { columns: 3 220px; padding: 0; list-style: none; margin: 16px 0 0; }
.outros-lagos li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0;
  border-bottom: 1px dashed var(--linha); break-inside: avoid; font-size: .92rem; }
.outros-lagos span { color: var(--tinta-3); font-size: .82rem; white-space: nowrap; }

/* confianca */
.faixa--confianca { background: var(--papel-2); padding-top: clamp(56px, 8vw, 96px) !important; }
.confianca { display: grid; grid-template-columns: 1fr 1.2fr; gap: 48px; align-items: start; }
.confianca__fontes { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--linha);
  border-radius: var(--raio); overflow: hidden; border: 1px solid var(--linha); }
.confianca__fontes li { background: var(--cartao); padding: 14px 18px; display: grid; grid-template-columns: 140px 1fr; gap: 12px; }
.confianca__fontes b { font-weight: 800; }
.confianca__fontes span { color: var(--tinta-2); font-size: .92rem; }
@media (max-width: 800px) { .confianca { grid-template-columns: 1fr; } .confianca__fontes li { grid-template-columns: 1fr; gap: 2px; } }

/* ---------------------------------------------------------------- pagina do lago: topo */
.pagina-lago .topo--escuro, .pagina-inicio .topo--escuro { }
.lago-cab { position: relative; min-height: min(92vh, 860px); display: flex; align-items: flex-end; color: #fff;
  background: var(--escuro); overflow: hidden; }
.lago-cab--sem-imagem { min-height: 0; padding-top: 110px; }
.lago-cab__fundo { position: absolute; inset: 0; }
.lago-cab__img { width: 100%; height: 100%; object-fit: cover; animation: respirar 22s ease-in-out infinite alternate; }
@keyframes respirar { from { transform: scale(1.02); } to { transform: scale(1.08); } }
.lago-cab__veu { position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6, 24, 21, .55) 0%, rgba(6, 24, 21, 0) 22%, rgba(6, 24, 21, .05) 45%,
                                       rgba(6, 24, 21, .72) 78%, rgba(6, 24, 21, .92) 100%); }
.lago-cab__credito { position: absolute; right: 14px; top: 76px; font-size: .7rem; color: rgba(255, 255, 255, .7);
  background: rgba(0, 0, 0, .25); padding: 3px 8px; border-radius: 6px; }
.lago-cab__conteudo { position: relative; padding-top: 120px; padding-bottom: 34px; }
.migalhas { font-size: .84rem; color: inherit; opacity: .85; margin-bottom: 18px; display: flex; flex-wrap: wrap; gap: 6px; }
.migalhas a { color: inherit; text-decoration: none; }
.migalhas a:hover { text-decoration: underline; color: inherit; }
.migalhas__sep { opacity: .5; }
.lago-cab__grelha { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: end; }
.lago-cab .sobretitulo { color: var(--lima); }
.lago-cab .sobretitulo span { display: inline-flex; gap: 6px; }
.lago-cab__nome { font-family: var(--letra-titulo); font-size: clamp(3rem, 9vw, 7.2rem); line-height: .94;
  letter-spacing: -.04em; font-weight: 540; margin: 0 0 14px; font-variation-settings: "opsz" 144, "SOFT" 50;
  text-wrap: balance; text-shadow: 0 2px 30px rgba(0, 0, 0, .25); }
.lago-cab__local { font-family: var(--letra-titulo); font-style: italic; font-size: 1.35rem; opacity: .85; margin: -4px 0 10px; }
.lago-cab__descr { font-size: 1.12rem; max-width: 52ch; color: rgba(255, 255, 255, .88); }
.lago-cab__forma { width: clamp(150px, 20vw, 260px); }
.lago-cab__silhueta { width: 100%; height: auto; overflow: visible; }
.lago-cab__silhueta path { fill: rgba(212, 242, 90, .12); stroke: var(--lima); stroke-width: 1.6;
  vector-effect: non-scaling-stroke; stroke-dasharray: 4000; stroke-dashoffset: 4000;
  animation: desenhar 2.8s .3s cubic-bezier(.6, .1, .2, 1) forwards; }
.numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1px; margin: 26px 0 0;
  background: rgba(255, 255, 255, .14); border-radius: var(--raio); overflow: hidden;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.numeros__item { background: rgba(6, 24, 21, .42); padding: 14px 18px; }
.numeros dt { font-size: .7rem; letter-spacing: .13em; text-transform: uppercase; font-weight: 800; color: var(--aqua); }
.numeros dd { margin: 4px 0 0; display: flex; align-items: baseline; gap: 5px; }
.numeros dd b { font-family: var(--letra-titulo); font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 540; line-height: 1; }
.numeros dd span { font-size: .85rem; opacity: .8; }
.lago-cab--sem-imagem .numeros__item { background: var(--escuro-2); }
@media (max-width: 760px) {
  .lago-cab { min-height: 88vh; }
  .lago-cab__grelha { grid-template-columns: 1fr; }
  .lago-cab__forma { display: none; }
  .lago-cab__credito { top: auto; bottom: 8px; }
}

.intro { font-family: var(--letra-titulo); font-size: clamp(1.3rem, 2.4vw, 1.75rem); line-height: 1.45;
  font-variation-settings: "opsz" 36; font-weight: 400; color: var(--tinta); margin: 0; }
.intro::first-letter { font-size: 3.2em; float: left; line-height: .82; margin: .06em .1em 0 0; font-weight: 600;
  color: var(--acento); }

.faixa--nota { padding: 0 0 clamp(40px, 6vw, 64px) !important; }
.nota-editorial { border-left: 3px solid var(--lima); padding: 6px 0 6px 24px; }
.nota-editorial__texto p { font-size: 1.12rem; color: var(--tinta); }

/* ---------------------------------------------------------------- relogio da agua */
.faixa--agua { background: var(--papel-2); padding-top: clamp(56px, 8vw, 104px) !important; }
.agua { display: grid; grid-template-columns: minmax(280px, 440px) 1fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.agua__relogio { position: relative; }
.relogio { width: 100%; height: auto; overflow: visible; }
.relogio__mes { cursor: pointer; }
.relogio__mes path { transition: transform .25s, filter .25s; transform-origin: center; transform-box: view-box; }
.relogio__mes:hover path, .relogio__mes.activo path { filter: brightness(1.08) saturate(1.1); }
.relogio__mes.activo path { stroke: var(--tinta); stroke-width: 2.5; }
/* o contorno de foco do navegador num setor e um retangulo (a caixa do setor):
   sem ele; quem usa o teclado ve o proprio setor contornado */
.relogio__mes:focus, .relogio__mes:focus-visible { outline: none; }
.relogio__mes:focus-visible path { stroke: var(--acento); stroke-width: 3.5; }
.relogio__valor { font: 800 13px var(--letra); text-anchor: middle; pointer-events: none; }
.relogio__rotulo { font: 700 11px var(--letra); fill: var(--tinta-3); text-anchor: middle; letter-spacing: .04em;
  text-transform: uppercase; }
.relogio__centro { fill: var(--cartao); stroke: var(--linha); }
.relogio__grande { font-family: var(--letra-titulo); font-size: 64px; font-weight: 540; text-anchor: middle; fill: var(--tinta);
  font-variation-settings: "opsz" 144; }
.relogio__legenda { font: 800 13px var(--letra); text-anchor: middle; fill: var(--tinta-3); text-transform: uppercase;
  letter-spacing: .12em; }
.escala-cores { display: flex; flex-wrap: wrap; gap: 4px 12px; justify-content: center; margin-top: 18px;
  font-size: .78rem; color: var(--tinta-3); font-weight: 700; }
.escala-cores span { display: inline-flex; align-items: center; gap: 5px; }
.escala-cores i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.escala-cores__gelo i { background: var(--gelo); box-shadow: inset 0 0 0 1px var(--linha-forte); }
.agua__texto p { font-size: 1.1rem; }
.agua__ar { color: var(--tinta-2); }
@media (max-width: 860px) { .agua { grid-template-columns: 1fr; } .agua__relogio { max-width: 420px; margin: 0 auto; } }

/* ---------------------------------------------------------------- placa de satelite */
.faixa--placa { background: var(--escuro); color: var(--sobre-escuro); padding-top: clamp(56px, 8vw, 104px) !important; }
.faixa--placa .sobretitulo { color: var(--aqua); }
.placa__cab { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 22px; }
.placa__filtros { display: flex; flex-wrap: wrap; gap: 6px; }
.placa__filtro { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 999px;
  border: 1.5px solid rgba(233, 244, 239, .25); background: transparent; color: var(--sobre-escuro); cursor: pointer;
  font-size: .84rem; font-weight: 700; }
.placa__filtro b { font-size: .78rem; opacity: .75; }
.placa__filtro .icone { width: 17px; height: 17px; }
.placa__filtro[aria-pressed="true"] { background: rgba(233, 244, 239, .1); border-color: var(--cor-cat); }
.placa__filtro[aria-pressed="true"] .icone { color: var(--cor-cat); }
.placa__filtro--praia, .placa__ponto--praia { --cor-cat: #ffd166; }
.placa__filtro--campismo, .placa__ponto--campismo { --cor-cat: #9be564; }
.placa__filtro--marina, .placa__ponto--marina { --cor-cat: #7fe0cf; }
.placa__filtro--barcos, .placa__ponto--barcos { --cor-cat: #ff9f7a; }
.placa__filtro--ferry, .placa__ponto--ferry { --cor-cat: #c3a6ff; }
.placa__filtro--miradouro, .placa__ponto--miradouro { --cor-cat: #ffffff; }
.placa { position: relative; margin: 0; border-radius: var(--raio-g); overflow: hidden; background: #0a1f1c;
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .7); }
.placa img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.placa__imagem { position: relative; }
.placa__desenho { position: absolute; inset: 0; width: 100%; height: 100%; }
.placa__contorno { fill: rgba(127, 224, 207, .06); stroke: var(--lima); stroke-width: 2.4; stroke-linejoin: round;
  vector-effect: non-scaling-stroke; }
.placa__ponto { fill: var(--cor-cat); stroke: #0b2e2a; stroke-width: 2.5; transition: r .15s, opacity .2s; cursor: help; }
.placa__ponto:hover { r: 11; }
.placa.sem-praia .placa__ponto--praia, .placa.sem-campismo .placa__ponto--campismo, .placa.sem-marina .placa__ponto--marina,
.placa.sem-barcos .placa__ponto--barcos, .placa.sem-ferry .placa__ponto--ferry, .placa.sem-miradouro .placa__ponto--miradouro { opacity: 0; }
.placa__regua path { fill: none; stroke: #fff; stroke-width: 3; }
.placa__regua text, .placa__norte text { fill: #fff; font: 800 22px var(--letra); text-anchor: middle; paint-order: stroke;
  stroke: rgba(0, 0, 0, .5); stroke-width: 4px; }
.placa__regua text { text-anchor: middle; }
.placa__norte path { fill: #fff; }
.placa figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 16px 10px; font-size: .72rem;
  color: rgba(255, 255, 255, .78); background: linear-gradient(transparent, rgba(0, 0, 0, .55)); }
@media (max-width: 760px) {
  .placa img { aspect-ratio: 4 / 3; }
  .placa { overflow: visible; background: none; box-shadow: none; }
  .placa img, .placa__desenho { border-radius: var(--raio); }
  .placa figcaption { position: static; padding: 8px 2px 0; background: none; color: var(--sobre-escuro-2); font-size: .68rem; }
  .heroi__palco { max-width: 340px; }
}

/* ---------------------------------------------------------------- tabela mes a mes */
.tabela-rola { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 24px 0 12px; border-radius: var(--raio);
  border: 1px solid var(--linha); background: var(--cartao); }
table { border-collapse: collapse; width: 100%; }
.tabela-meses { min-width: 760px; font-variant-numeric: tabular-nums; }
.tabela-meses th, .tabela-meses td { padding: 11px 14px; border-bottom: 1px solid var(--linha); }
.tabela-meses tbody tr:last-child th, .tabela-meses tbody tr:last-child td { border-bottom: 0; }
.tabela-meses thead th { background: var(--papel-2); vertical-align: bottom; }
.tabela-numeros th, .tabela-numeros td { text-align: right; }
.tabela-numeros th:first-child, .tabela-numeros td:first-child { text-align: left; }
.th-nome { display: block; font-size: .8rem; font-weight: 800; color: var(--tinta-2); }
.th-unidade { display: block; font-size: .7rem; font-weight: 600; color: var(--tinta-3); }
.tabela-meses tbody th { font-weight: 700; }
.tabela-meses tbody tr:hover { background: var(--papel); }
.celula-agua { background: var(--c); color: var(--tc); font-weight: 800; text-align: center !important; }
.celula-agua--gelo { background: repeating-linear-gradient(135deg, var(--gelo), var(--gelo) 6px, #fff 6px, #fff 9px);
  color: #355; font-size: .78rem; text-align: center !important; }
.sem-dados { color: var(--tinta-3); }

/* ---------------------------------------------------------------- tamanho e profundidade */
.faixa--tamanho { background: var(--papel-2); padding-top: clamp(56px, 8vw, 104px) !important; }
.tamanho { display: grid; grid-template-columns: 1.4fr 1fr; gap: 32px; margin-top: 18px; align-items: start; }
.tamanho__escala { margin: 0; background: var(--cartao); border: 1px solid var(--linha); border-radius: var(--raio-g); padding: 16px; }
.escala { width: 100%; height: auto; }
.escala__lago path { fill: color-mix(in oklab, var(--tinta-3) 22%, transparent); stroke: var(--tinta-3); stroke-width: 1.2;
  vector-effect: non-scaling-stroke; }
.escala__lago--destaque path { fill: color-mix(in oklab, var(--acento) 35%, transparent); stroke: var(--acento); stroke-width: 1.8; }
.escala__nome { font: 700 14px var(--letra); fill: var(--tinta-3); text-anchor: middle; }
.escala__nome--destaque { fill: var(--tinta); font-weight: 800; }
.escala__regua path { fill: none; stroke: var(--tinta); stroke-width: 2; }
.escala__regua text { font: 800 15px var(--letra); fill: var(--tinta); text-anchor: middle; }
/* a profundidade: valores por cima da agua, monumentos numa coluna a esquerda (--calha) */
.fundo { --calha: 118px; border-radius: var(--raio-g); overflow: hidden; background: var(--cartao);
  border: 1px solid var(--linha); }
.fundo__cab { display: flex; gap: 18px; padding: 14px 18px 12px calc(var(--calha) + 18px); }
.fundo__val { flex: 1; text-align: center; color: var(--tinta-2); font-size: .74rem; font-weight: 700; line-height: 1.2; }
.fundo__val b { display: block; font-family: var(--letra-titulo); font-size: 1.35rem; color: var(--tinta); }
.fundo__corpo { position: relative; height: 280px; }
.fundo__agua { position: absolute; inset: 0; border-top: 2px solid var(--aqua);
  background: linear-gradient(180deg, color-mix(in oklab, var(--aqua) 30%, transparent), color-mix(in oklab, #1e3663 30%, transparent)); }
.fundo__barras { position: absolute; top: 0; bottom: 0; left: calc(var(--calha) + 18px); right: 18px; display: flex; gap: 18px; }
.fundo__barra { flex: 1; height: var(--h); border-radius: 0 0 12px 12px; background: linear-gradient(180deg, var(--t6), var(--t0)); }
.fundo__ref { position: absolute; left: 0; right: 0; top: var(--h);
  border-top: 1.5px dashed color-mix(in oklab, var(--tinta-2) 70%, transparent); }
.fundo__ref span { position: absolute; left: 8px; top: 0; transform: translateY(-50%); width: calc(var(--calha) - 4px);
  box-sizing: border-box; padding: 4px 8px; border-radius: 8px; background: var(--cartao);
  border: 1px solid var(--linha); font-size: .68rem; font-weight: 700; line-height: 1.2; color: var(--tinta-2); }
.fundo__ref b { display: block; color: var(--tinta); font-size: .8rem; }
.fundo__ref--fundo span { transform: translateY(calc(-100% - 4px)); }
@media (max-width: 420px) { .fundo { --calha: 100px; } .fundo__cab, .fundo__barras { gap: 10px; } }
.factos { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 10px; }
.factos li { padding-left: 22px; position: relative; color: var(--tinta-2); }
.factos li::before { content: ""; position: absolute; left: 0; top: .55em; width: 10px; height: 10px; border-radius: 50%;
  background: var(--aqua); box-shadow: 0 0 0 3px color-mix(in oklab, var(--aqua) 30%, transparent); }
@media (max-width: 860px) { .tamanho { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- a volta do lago */
.volta { list-style: none; padding: 0; margin: 24px 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.volta__item { display: flex; gap: 14px; padding: 18px; border-radius: var(--raio); background: var(--cartao);
  border: 1px solid var(--linha); }
.volta__item .icone { width: 30px; height: 30px; flex: none; color: var(--acento); padding: 5px; border-radius: 10px;
  background: color-mix(in oklab, var(--aqua) 22%, transparent); box-sizing: content-box; }
.volta__item b { display: block; font-family: var(--letra-titulo); font-size: 1.6rem; font-weight: 560; line-height: 1; }
.volta__item span { font-size: .9rem; font-weight: 700; color: var(--tinta-2); }
.volta__item--zero { opacity: .55; }
.volta__nomes { font-size: .8rem; color: var(--tinta-3); margin: 6px 0 0; line-height: 1.4; }
.volta__baixo { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 12px; }
.volta__terras ul { list-style: none; padding: 0; margin: 10px 0 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 18px; }
.volta__terras li { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--linha); }
.volta__terras li span { color: var(--tinta-3); font-size: .82rem; }
.volta__aeroporto { display: flex; gap: 12px; align-items: flex-start; padding: 18px; border-radius: var(--raio);
  background: var(--papel-2); margin: 0; }
.volta__aeroporto .icone { width: 26px; height: 26px; flex: none; color: var(--acento); }
.volta__chegar { display: grid; gap: 10px; align-self: start; }
.volta__carro { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: var(--raio);
  background: var(--escuro); color: #fff; text-decoration: none;
  border: 1px solid color-mix(in oklab, var(--lima) 30%, transparent); transition: transform .2s, box-shadow .2s; }
.volta__carro:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -12px rgba(11, 46, 42, .6); }
.volta__carro .parceiro__icone { width: 30px; height: 30px; flex: none; color: var(--lima); }
.volta__carro-corpo { flex: 1; display: grid; gap: 2px; }
.volta__carro-corpo b { font-size: .98rem; line-height: 1.25; }
.volta__carro-corpo span { font-size: .74rem; color: rgba(255, 255, 255, .72); font-weight: 600; }
.volta__carro-seta { font-size: 1.2rem; color: var(--lima); }
@media (max-width: 760px) { .volta__baixo { grid-template-columns: 1fr; } .volta__terras ul { grid-template-columns: 1fr; } }
.icone { width: 20px; height: 20px; }

/* ---------------------------------------------------------------- fotografias */
.fotos { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; margin-top: 20px; }
.fotos__item { margin: 0; border-radius: var(--raio-g); overflow: hidden; background: var(--papel-2); }
.fotos__item img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .6s; }
.fotos__item:hover img { transform: scale(1.03); }
.fotos__item figcaption { padding: 8px 12px; font-size: .74rem; color: var(--tinta-3); }
.fotos__item figcaption a { color: inherit; }

/* ---------------------------------------------------------------- anos recentes */
.anos { min-width: 680px; font-variant-numeric: tabular-nums; font-size: .82rem; }
.anos th, .anos td { padding: 8px 6px; text-align: center; border-bottom: 1px solid var(--linha); }
.anos thead th { font-size: .72rem; color: var(--tinta-3); text-transform: uppercase; letter-spacing: .06em; }
.anos tbody th { font-weight: 800; text-align: left; padding-left: 14px; }
.anos__c { font-weight: 700; border-radius: 6px; }
.anos__ref th, .anos__ref td { background: var(--papel-2); color: var(--tinta-2); font-weight: 700;
  border-bottom: 2px solid var(--tinta-3); }
.anos__ref th { font-size: .74rem; white-space: nowrap; }
.periodos { display: flex; flex-wrap: wrap; gap: 8px; margin: -4px 0 18px; }
.periodos__p { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px;
  font-size: .8rem; font-weight: 700; color: var(--tinta-2); background: var(--cartao); border: 1px solid var(--linha); }
.periodos__p::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--aqua); }
.periodos__p--clima::before { background: var(--lima, #D4F25A); }
td.anos__c--quente, span.anos__c--quente { background: color-mix(in oklab, #f08a4b 28%, transparent); }
td.anos__c--frio, span.anos__c--frio { background: color-mix(in oklab, #3fa7c4 28%, transparent); }
.anos__legenda span { display: inline-block; padding: 2px 8px; border-radius: 6px; margin: 0 4px 0 10px; }

/* ---------------------------------------------------------------- vizinhos, fontes */
.faixa--vizinhos { background: var(--papel-2); padding-top: clamp(56px, 8vw, 104px) !important; }
.faixa--fontes { padding-top: clamp(48px, 6vw, 72px) !important; }
.tabela-fontes { font-size: .9rem; margin: 12px 0 16px; }
.tabela-fontes th, .tabela-fontes td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--linha); vertical-align: top; }
.tabela-fontes th { width: 34%; font-weight: 700; color: var(--tinta-2); }
.tabela-fontes--larga th { width: auto; }
.tabela-fontes--larga thead th { background: var(--papel-2); font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; }
.texto-longo h2 { margin-top: 1.6em; }
.texto-longo p { color: var(--tinta-2); }
.contacto dt { font-weight: 800; margin-top: 12px; }
.contacto dd { margin: 2px 0 0; }

/* ---------------------------------------------------------------- afiliados e anuncios */
.afiliados[data-activo="0"], .anuncio[data-activo="0"] { display: none; }
.faixa.afiliados { padding: clamp(48px, 6vw, 72px) 0 !important; }
.afiliados__cab { margin-bottom: 18px; }
.parceiros { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.parceiro { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: var(--raio);
  background: var(--cartao); border: 1px solid var(--linha); text-decoration: none; color: var(--tinta);
  transition: border-color .2s, transform .2s; }
.parceiro:hover { border-color: var(--acento); transform: translateY(-2px); color: var(--tinta); }
.parceiro__icone { width: 26px; height: 26px; flex: none; color: var(--acento); }
.parceiro__corpo { display: flex; flex-direction: column; }
.parceiro__texto { font-weight: 700; line-height: 1.3; }
.parceiro__nome { font-size: .8rem; color: var(--tinta-3); }
.parceiro__accao { margin-left: auto; font-size: .8rem; font-weight: 800; white-space: nowrap; color: var(--acento); }
.afiliados__aviso { margin-top: 14px; }
.anuncio { margin: 24px 0; }
.anuncio__nota { font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; color: var(--tinta-3); margin-bottom: 4px; }

/* ---------------------------------------------------------------- procurar */
.procurar { display: grid; grid-template-columns: 300px 1fr; gap: 32px; align-items: start; }
.filtros { position: sticky; top: 88px; display: grid; gap: 16px; padding: 20px; border-radius: var(--raio-g);
  background: var(--cartao); border: 1px solid var(--linha); }
.filtro { display: grid; gap: 6px; border: 0; padding: 0; margin: 0; font-size: .9rem; }
.filtro > span, .filtro legend { font-weight: 800; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--tinta-2); display: flex; justify-content: space-between; padding: 0; }
.filtro select, .filtro input[type="search"] { padding: 10px 12px; border-radius: 10px; border: 1.5px solid var(--linha-forte);
  background: var(--papel); color: var(--tinta); font: 600 .95rem var(--letra); }
.filtro input[type="range"] { accent-color: var(--acento); width: 100%; }
.filtro--chips { display: flex; flex-wrap: wrap; gap: 6px; }
.filtro--chips legend { width: 100%; margin-bottom: 6px; }
.filtro--chips label { cursor: pointer; }
.filtro--chips input { position: absolute; opacity: 0; pointer-events: none; }
.filtro--chips span { display: inline-block; padding: 6px 11px; border-radius: 999px; border: 1.5px solid var(--linha-forte);
  font-size: .82rem; font-weight: 700; }
.filtro--chips input:checked + span { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }
.filtro--chips input:focus-visible + span { outline: 3px solid var(--aqua); }
.filtro--check { display: flex; gap: 10px; align-items: center; font-weight: 700; }
.filtro--check input { accent-color: var(--acento); width: 18px; height: 18px; }
.resultados__conta { font-weight: 700; color: var(--tinta-2); }
.resultados__lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.resultado-simples { display: flex; flex-direction: column; gap: 2px; padding: 16px 18px; border-radius: var(--raio);
  background: var(--cartao); border: 1px dashed var(--linha-forte); color: var(--tinta-2); }
.resultado-simples b { color: var(--tinta); font-family: var(--letra-titulo); font-size: 1.15rem; font-weight: 600; }
@media (max-width: 900px) { .procurar { grid-template-columns: 1fr; } .filtros { position: static; } }

/* ---------------------------------------------------------------- mapa */
.pagina-mapa .rodape, .pagina-mapa .faixa--familia { display: none; }
.mapa-pagina { position: relative; height: calc(100vh - 68px); min-height: 520px; }
#mapa.mapa { position: absolute; inset: 0; width: 100%; height: 100%; }
.mapa-pagina__painel { position: absolute; z-index: 5; top: 16px; left: 16px; width: 300px; max-width: calc(100% - 32px);
  padding: 18px; border-radius: var(--raio-g); background: color-mix(in oklab, var(--cartao) 94%, transparent);
  backdrop-filter: blur(10px); border: 1px solid var(--linha); box-shadow: var(--sombra); display: grid; gap: 12px; }
.mapa-pagina__painel p { margin: 0; }
.mapa-legenda { display: grid; gap: 6px; font-size: .84rem; }
.mapa-legenda p { display: flex; gap: 8px; align-items: center; }
.ponto { width: 12px; height: 12px; border-radius: 50%; display: inline-block; flex: none; }
.ponto--pagina { background: var(--lima); box-shadow: 0 0 0 2px var(--escuro); }
.ponto--simples { background: var(--tinta-3); }
.escala-cores--mapa { justify-content: flex-start; margin-top: 4px; }
.maplibregl-popup-content { border-radius: 14px !important; padding: 12px 14px !important; font: 600 .9rem var(--letra);
  color: #0b2e2a; }
.popup-lago b { display: block; font-family: var(--letra-titulo); font-size: 1.1rem; }
.popup-lago a { display: inline-block; margin-top: 6px; font-weight: 800; }
@media (max-width: 760px) {
  .mapa-pagina { height: calc(100vh - 60px); }
  .mapa-pagina__painel { top: auto; bottom: 12px; left: 12px; right: 12px; width: auto; padding: 14px; gap: 8px; }
  .mapa-legenda { display: none; }
}

/* ---------------------------------------------------------------- comparar */
.comparar { display: grid; gap: 24px; }
.comparar__escolhidos { display: flex; flex-wrap: wrap; gap: 8px; }
.escolhido { display: inline-flex; align-items: center; gap: 8px; padding: 8px 8px 8px 14px; border-radius: 999px;
  background: var(--cartao); border: 1.5px solid var(--cor, var(--linha-forte)); font-weight: 700; }
.escolhido i { width: 12px; height: 12px; border-radius: 50%; background: var(--cor); }
.escolhido button { border: 0; background: var(--papel-2); width: 26px; height: 26px; border-radius: 50%; cursor: pointer; }
.comparar__escala svg, .comparar__agua svg { width: 100%; height: auto; background: var(--cartao); border: 1px solid var(--linha);
  border-radius: var(--raio-g); }
.tabela-comparar th, .tabela-comparar td { padding: 12px 14px; border-bottom: 1px solid var(--linha); text-align: right;
  font-variant-numeric: tabular-nums; }
.tabela-comparar th:first-child { text-align: left; font-weight: 700; color: var(--tinta-2); }
.tabela-comparar thead th { font-family: var(--letra-titulo); font-size: 1.1rem; color: var(--tinta); }

/* ---------------------------------------------------------------- rodape */
.rodape { background: var(--escuro); color: var(--sobre-escuro-2); padding: 64px 0 32px; margin-top: 0; font-size: .92rem; }
.rodape a, .rodape .botao-texto { color: var(--sobre-escuro); text-decoration: none; }
.rodape a:hover, .rodape .botao-texto:hover { color: var(--lima); }
.rodape__cima { display: grid; grid-template-columns: 1fr 2.2fr; gap: 48px; }
.marca-nome--rodape { color: var(--sobre-escuro); margin-bottom: 14px; }
.rodape__marca p { max-width: 32ch; }
.rodape__colunas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.rodape h4 { font-size: .74rem; text-transform: uppercase; letter-spacing: .14em; color: var(--aqua); font-weight: 800; margin-bottom: 12px; }
.rodape ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.rodape__legal { border-top: 1px solid rgba(233, 244, 239, .12); margin-top: 40px; padding-top: 20px; font-size: .74rem;
  color: rgba(233, 244, 239, .5); line-height: 1.6; }
@media (max-width: 900px) { .rodape__cima { grid-template-columns: 1fr; } .rodape__colunas { grid-template-columns: repeat(2, 1fr); } }

/* ---------------------------------------------------------------- cookies (medir.js) */
.cookies { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 90; max-width: 760px; margin: 0 auto;
  background: var(--cartao); color: var(--tinta); border: 1px solid var(--linha); border-radius: var(--raio-g);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .45); padding: 18px 0; }
.cookies .envolve { max-width: none; }
.cookies__linha { display: grid; gap: 14px; }
.cookies__texto p { margin: 0; color: var(--tinta-2); font-size: .92rem; }
.cookies__botoes { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.cookies__opcoes { display: grid; gap: 8px; }
.cookies__opcao { display: flex; gap: 10px; align-items: flex-start; font-size: .9rem; }

/* 404 */
.faixa--404 .pesquisa { margin: 24px 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .silhueta--heroi path, .lago-cab__silhueta path { stroke-dashoffset: 0 !important; }
}

.cartoes-grelha + h2 { margin-top: 56px; }
.volta__aeroporto { align-self: start; }

/* ---------------------------------------------------------------- continuar a explorar (03-10-2026) */
.faixa--explorar { background: var(--papel-2); padding: clamp(56px, 7vw, 88px) 0 !important; }
.faixa--explorar .sobretitulo { justify-content: center; color: var(--acento); }
.faixa--explorar .h3 { text-align: center; margin: 0; }
.explorar { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-top: 26px; }
.explorar__item { display: grid; justify-items: center; gap: 10px; padding: 22px 14px; border-radius: var(--raio-g);
  background: var(--cartao); color: var(--tinta); text-decoration: none; text-align: center; font-weight: 600;
  box-shadow: var(--sombra); transition: transform .2s, background .2s; }
.explorar__item svg { width: 28px; height: 28px; color: var(--acento); }
.explorar__item:hover { text-decoration: none; transform: translateY(-3px); }
.explorar__item[aria-current="page"] { background: var(--escuro); color: var(--sobre-escuro); }
.explorar__item[aria-current="page"] svg { color: var(--lima); }

/* ---------------------------------------------------------------- a familia de sites (como no Peakyas) */
.faixa--familia { background: var(--papel); padding: clamp(56px, 8vw, 104px) 0 !important; }
.faixa--familia .cab-seccao { text-align: center; margin-bottom: 28px; }
.faixa--familia .sobretitulo { justify-content: center; color: var(--acento); }
.faixa--familia .lede { margin: 0 auto; }
.irmaos { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.irmao { position: relative; display: grid; gap: 8px; align-content: start; padding: 22px 22px 20px; min-height: 230px;
  border-radius: var(--raio-g); background: var(--f); color: var(--t); text-decoration: none; overflow: hidden;
  transition: transform .2s, box-shadow .2s; }
a.irmao:hover { text-decoration: none; transform: translateY(-4px); box-shadow: 0 18px 40px -18px rgba(0,0,0,.45); }
.irmao::after { content: ""; position: absolute; right: -40px; bottom: -40px; width: 160px; height: 160px; border-radius: 50%;
  background: var(--a); opacity: .16; }
.irmao__favicon, .irmao__simbolo svg { width: 46px; height: 46px; display: block; border-radius: 10px; }
.irmao__tema { font: 700 .72rem var(--letra); text-transform: uppercase; letter-spacing: .16em; color: var(--a); margin-top: 6px; }
.irmao__letras { height: 40px; width: auto; max-width: 100%; display: block; justify-self: start; }
.irmao__nome { font: 700 2rem/1 var(--letra-titulo); }
.irmao__frase { font: 500 .95rem/1.45 var(--letra); opacity: .88; }
.irmao__accao { justify-self: start; margin-top: 6px; background: var(--a); color: #0b2e2a; padding: 8px 16px; border-radius: 999px;
  font: 700 .86rem var(--letra); position: relative; z-index: 1; }
.irmao--este { box-shadow: inset 0 0 0 3px var(--a); }
.irmao--este .irmao__accao { background: transparent; color: var(--a); padding-left: 0; }
@media print { .faixa--explorar, .faixa--familia { display: none !important; } }

/* familia: irmao ainda nao publicado ("Em breve"); o base.js troca-o por ligacao quando ficar online */
[data-familia] .so-online { display: none !important; }
.irmao[data-familia] { cursor: default; }
.irmao[data-familia] .irmao__accao { background: transparent; color: var(--a); padding-left: 0; opacity: .85; }

/* familia com cinco sites: 5 lado a lado, 3 + 2 em ecras medios, 2 e depois 1 no telemovel (nunca 4 + 1) */
@media (min-width: 1100px) { .irmaos { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (min-width: 760px) and (max-width: 1099.98px) { .irmaos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 520px) and (max-width: 759.98px) { .irmaos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 519.98px) { .irmaos { grid-template-columns: minmax(0, 1fr); } }