/*
 * Núcleo Terrantar: CSS central do site.
 * Tokens, fontes, reset, base, grid, componentes da gramática e movimento.
 * O que é de uma página só vai em css/paginas/<pagina>.css.
 *
 * Tokens: os mesmos de branding/tokens.json (php scripts/testar.php confere).
 *
 * Ganchos para o HTML e o JS (Task 5):
 *   html.js            posto por site.js; só o que depende de JS se esconde sob ela
 *   html.menu-aberto   painel do menu móvel aberto (também trava a rolagem)
 *   .cabecalho--rolado filete do cabeçalho depois de 8 px de rolagem
 *   .surgir / .surgiu  entrada "emergir"; --i no style escalona de 60 em 60 ms
 *   --superficie       cor do fundo atual (o título do requadro usa para cortar a linha)
 *   .mapa--apagado / .mapa--acendendo, .sitio--ativo, .mapa__sitio--ativo  cenas/mapa.js
 *   .filtro[aria-pressed]  filtros com JS (js/lib/filtrar.js); sem JS, aria-current="true"
 * Componentes de página (cabeçalho interno, filtros, bibliografia, mapa): ver o
 * bloco "componentes de página" na camada componentes.
 *
 * Fontes (renomeadas por causa dos nomes reservados da OFL):
 *   Terrantar Display  derivada de Archivo, wdth 62-125, wght 400-800.
 *     Copyright 2020 The Archivo Project Authors (https://github.com/Omnibus-Type/Archivo)
 *   Terrantar Texto    derivada de Source Serif 4, wght 400-600 (opsz fixo em 18).
 *     Copyright 2014 The Source Serif 4 Project Authors (https://github.com/adobe-fonts/source-serif)
 *     © 2014-2021 Adobe Systems Incorporated, with Reserved Font Name 'Source'.
 *   Terrantar Dados    derivada de IBM Plex Mono 400 e 500.
 *     Copyright © 2017 IBM Corp. with Reserved Font Name "Plex"
 * As três estão sob a SIL Open Font License 1.1 (https://openfontlicense.org).
 * Texto completo da licença em assets/fonts/OFL.txt (no repositório) e em
 * branding/tipografia/. Recorte e métricas: branding/tipografia/README.md.
 *
 * Cada família variável tem dois arquivos com unicode-range disjunto: o núcleo
 * (português e símbolos científicos) e o -ext (latin-ext). Pré-carregue só o
 * núcleo do Display e o do Texto romano. Os fallbacks locais têm métricas
 * ajustadas (size-adjust e overrides) para o texto não pular na troca: um por
 * papel no Display (títulos condensados, interface, etiquetas largas).
 * O bloco "Fontes web" + "Fallbacks locais" é gerado: sai de
 * branding/tipografia/fontes-fragmento.css (gerar.py --so-css) e é colado aqui.
 */

@layer tokens, reset, base, layout, componentes, utilitarios, movimento;

/* Fontes web */

@font-face {
  font-family: "Terrantar Display";
  src: url("../fonts/terrantar-display.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-stretch: 62% 125%;
  font-display: swap;
  unicode-range: U+0020-007E, U+00A0-00FF, U+0152-0153, U+0160-0161, U+0178, U+017D-017E, U+02C6, U+02DC, U+0394, U+03B4, U+03BC, U+2002-200A, U+2010-2015, U+2018-201E, U+2020-2022, U+2026, U+2030, U+2032-2033, U+2039-203A, U+2044, U+2070-209F, U+20AC, U+2122, U+2190-2193, U+2212, U+2248, U+2260, U+2264-2265;
}

@font-face {
  font-family: "Terrantar Display";
  src: url("../fonts/terrantar-display-ext.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-stretch: 62% 125%;
  font-display: swap;
  unicode-range: U+0100-0151, U+0154-015F, U+0162-0177, U+0179-017C, U+017F-024F, U+02B0-02C5, U+02C7-02DB, U+02DD-02FF, U+0300-036F, U+1E9E, U+20A0-20AB, U+20AD-20BF, U+2113, U+2116;
}

@font-face {
  font-family: "Terrantar Texto";
  src: url("../fonts/terrantar-texto.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0020-007E, U+00A0-00FF, U+0152-0153, U+0160-0161, U+0178, U+017D-017E, U+02C6, U+02DC, U+0394, U+03B4, U+03BC, U+2002-200A, U+2010-2015, U+2018-201E, U+2020-2022, U+2026, U+2030, U+2032-2033, U+2039-203A, U+2044, U+2070-209F, U+20AC, U+2122, U+2190-2193, U+2212, U+2248, U+2260, U+2264-2265;
}

@font-face {
  font-family: "Terrantar Texto";
  src: url("../fonts/terrantar-texto-ext.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-0151, U+0154-015F, U+0162-0177, U+0179-017C, U+017F-024F, U+02B0-02C5, U+02C7-02DB, U+02DD-02FF, U+0300-036F, U+1E9E, U+20A0-20AB, U+20AD-20BF, U+2113, U+2116;
}

@font-face {
  font-family: "Terrantar Texto";
  src: url("../fonts/terrantar-texto-italico.woff2") format("woff2");
  font-weight: 400 600;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0020-007E, U+00A0-00FF, U+0152-0153, U+0160-0161, U+0178, U+017D-017E, U+02C6, U+02DC, U+0394, U+03B4, U+03BC, U+2002-200A, U+2010-2015, U+2018-201E, U+2020-2022, U+2026, U+2030, U+2032-2033, U+2039-203A, U+2044, U+2070-209F, U+20AC, U+2122, U+2190-2193, U+2212, U+2248, U+2260, U+2264-2265;
}

@font-face {
  font-family: "Terrantar Texto";
  src: url("../fonts/terrantar-texto-italico-ext.woff2") format("woff2");
  font-weight: 400 600;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0100-0151, U+0154-015F, U+0162-0177, U+0179-017C, U+017F-024F, U+02B0-02C5, U+02C7-02DB, U+02DD-02FF, U+0300-036F, U+1E9E, U+20A0-20AB, U+20AD-20BF, U+2113, U+2116;
}

@font-face {
  font-family: "Terrantar Dados";
  src: url("../fonts/terrantar-dados.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0020-007E, U+00A0-00FF, U+0152-0153, U+0160-0161, U+0178, U+017D-017E, U+02C6, U+02DC, U+0394, U+03B4, U+03BC, U+2002-200A, U+2010-2015, U+2018-201E, U+2020-2022, U+2026, U+2030, U+2032-2033, U+2039-203A, U+2044, U+2070-209F, U+20AC, U+2122, U+2190-2193, U+2212, U+2248, U+2260, U+2264-2265, U+0100-0151, U+0154-015F, U+0162-0177, U+0179-017C, U+017F-024F, U+02B0-02C5, U+02C7-02DB, U+02DD-02FF, U+0300-036F, U+1E9E, U+20A0-20AB, U+20AD-20BF, U+2113, U+2116;
}

@font-face {
  font-family: "Terrantar Dados";
  src: url("../fonts/terrantar-dados-medio.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0020-007E, U+00A0-00FF, U+0152-0153, U+0160-0161, U+0178, U+017D-017E, U+02C6, U+02DC, U+0394, U+03B4, U+03BC, U+2002-200A, U+2010-2015, U+2018-201E, U+2020-2022, U+2026, U+2030, U+2032-2033, U+2039-203A, U+2044, U+2070-209F, U+20AC, U+2122, U+2190-2193, U+2212, U+2248, U+2260, U+2264-2265, U+0100-0151, U+0154-015F, U+0162-0177, U+0179-017C, U+017F-024F, U+02B0-02C5, U+02C7-02DB, U+02DD-02FF, U+0300-036F, U+1E9E, U+20A0-20AB, U+20AD-20BF, U+2113, U+2116;
}

/* O δ que falta no Display, tirado do Texto (o mesmo arquivo já baixado).
   Família à parte, com unicode-range só do δ: se fosse o "Terrantar Texto"
   inteiro na pilha dos títulos, o título sairia em serifa enquanto o
   Display carrega (o Texto costuma chegar antes) e pularia na troca. */

@font-face {
  font-family: "Terrantar Display Delta";
  src: url("../fonts/terrantar-texto.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+03B4;
}

/* Fallbacks locais */

@font-face {
  font-family: "Terrantar Display Fallback Condensada";
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("LiberationSans-Bold"), local("Arimo Bold");
  font-weight: 600 800;
  size-adjust: 74.73%;
  ascent-override: 117.49%;
  descent-override: 28.10%;
  line-gap-override: 0.00%;
}

@font-face {
  font-family: "Terrantar Display Fallback";
  src: local("Arial"), local("Liberation Sans"), local("Arimo");
  font-weight: 400 500;
  size-adjust: 98.57%;
  ascent-override: 89.07%;
  descent-override: 21.30%;
  line-gap-override: 0.00%;
}

@font-face {
  font-family: "Terrantar Display Fallback";
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("LiberationSans-Bold"), local("Arimo Bold");
  font-weight: 600 800;
  size-adjust: 95.18%;
  ascent-override: 92.25%;
  descent-override: 22.06%;
  line-gap-override: 0.00%;
}

@font-face {
  font-family: "Terrantar Display Fallback Larga";
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("LiberationSans-Bold"), local("Arimo Bold");
  font-weight: 600 800;
  size-adjust: 120.26%;
  ascent-override: 73.01%;
  descent-override: 17.46%;
  line-gap-override: 0.00%;
}

@font-face {
  font-family: "Terrantar Texto Fallback";
  src: local("Georgia"), local("Gelasio");
  size-adjust: 103.80%;
  ascent-override: 99.81%;
  descent-override: 32.27%;
  line-gap-override: 0.00%;
}

@font-face {
  font-family: "Terrantar Texto Fallback Noto";
  src: local("Noto Serif"), local("NotoSerif-Regular");
  size-adjust: 95.25%;
  ascent-override: 108.77%;
  descent-override: 35.17%;
  line-gap-override: 0.00%;
}

@font-face {
  font-family: "Terrantar Dados Fallback";
  src: local("Courier New"), local("Liberation Mono"), local("Cousine");
  size-adjust: 99.98%;
  ascent-override: 102.52%;
  descent-override: 27.50%;
  line-gap-override: 0.00%;
}


/* Movimento: só com a preferência livre (sem efeito onde não há suporte) */

@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}


/* ------------------------------------------------------------------ tokens */

@layer tokens {
  :root {
    /* Cores (branding/tokens.json, cor.*) */
    --marfim: #F8F7F1;
    --papel: #FEFEFA;
    --nevoa: #E3ECF2;
    --gelo: #ABD5F6;
    --marinho: #1F4488;
    --marinho-fundo: #16336A;
    --aco: #5788AB;
    --aco-texto: #3D6A8F;
    --geleira: #2D77B4;
    --geleira-texto: #2A6BA6;
    --horizonte: #D87F23;
    --horizonte-ui: #C4701A;
    --horizonte-texto: #A0560E;
    --musgo: #537845;
    --basalto: #18202E;
    --basalto-suave: #4B5565;
    --linha: #CBD3D6;
    --mar-austral: #0D2142;
    --noite-polar: #0A1628;
    --gelo-claro: #B0D9FA;
    /* Solos: só em ilustração */
    --solo-turfa: #544535;
    --solo-oxido: #9A4832;
    --solo-byers: #AE6931;
    --solo-jarosita: #CBA963;
    --rocha: #3A3631;
    --musgo-campo: #786A48;

    /* Movimento (movimento.*) */
    --ease-assentamento: cubic-bezier(0.22, 0.61, 0.24, 1);
    --ease-saida: cubic-bezier(0.4, 0, 1, 1);
    --ease-estacao: cubic-bezier(0.37, 0, 0.63, 1);
    --dur-rapida: 140ms;
    --dur-padrao: 320ms;
    --dur-lenta: 640ms;
    --dur-ciclo: 12s;

    /* Pilhas de fonte. Nos títulos o "Terrantar Display Delta" entra por causa
       do δ, que a Archivo não tem. Cada papel do Display tem o seu fallback (largura
       calibrada para a instância do papel; ver branding/tipografia/README.md). */
    --fonte-titulo: "Terrantar Display", "Terrantar Display Delta", "Terrantar Display Fallback Condensada", "Arial Narrow", sans-serif;
    --fonte-corpo: "Terrantar Display", "Terrantar Display Fallback", system-ui, sans-serif;
    --fonte-etiqueta: "Terrantar Display", "Terrantar Display Fallback Larga", system-ui, sans-serif;
    --fonte-texto: "Terrantar Texto", "Terrantar Texto Fallback", "Terrantar Texto Fallback Noto", Georgia, serif;
    --fonte-dados: "Terrantar Dados", "Terrantar Dados Fallback", ui-monospace, "Courier New", monospace;

    /* Escala tipográfica (seção 3.3), fluida de 360 a 1440 px */
    --tam-display: clamp(2.75rem, 1.6rem + 5.2vw, 6rem);
    --tam-h1: clamp(2.25rem, 1.5rem + 3.4vw, 4.25rem);
    --tam-h2: clamp(1.75rem, 1.3rem + 2vw, 3rem);
    --tam-h3: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem);
    --tam-corpo: 1rem;
    --tam-texto: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
    --tam-etiqueta: clamp(0.75rem, 0.7rem + 0.2vw, 0.875rem);
    --tam-dados: 0.8125rem;

    /* Eixos (faixas da especificação: um valor dentro de cada) */
    --largura-display: 68%;
    --peso-display: 780;
    --largura-titulo: 70%;
    --peso-titulo: 740;
    --peso-corpo: 400;
    --peso-forte: 600;
    --largura-etiqueta: 118%;
    --peso-etiqueta: 650;
    --medida: 68ch;

    /* Grid e ritmo */
    --conteudo-max: 1320px;
    --margem: clamp(16px, 4vw, 48px);
    --ritmo: clamp(64px, 9vw, 144px);
    --espaco: clamp(1.25rem, 2.5vw, 2rem);
    --altura-cabecalho: 72px;
    --raio: 2px;

    /* Contexto (os fundos escuros trocam) */
    --superficie: var(--marfim);
    --cor-foco: var(--geleira);
  }

  @media (max-width: 59.99em) {
    :root { --altura-cabecalho: 60px; }
  }
}


/* ------------------------------------------------------------------- reset */

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
  :where(ul, ol)[class], :where(ul, ol)[role="list"] { list-style: none; padding: 0; }
  img, picture, video, canvas, svg { display: block; max-width: 100%; }
  img, video { height: auto; }
  input, button, textarea, select { font: inherit; color: inherit; }
  button { cursor: pointer; }
  table { border-collapse: collapse; }
  sub, sup { line-height: 0; }
  [hidden] { display: none !important; }
}


/* -------------------------------------------------------------------- base */

@layer base {
  html {
    color-scheme: light;
    scroll-padding-top: calc(var(--altura-cabecalho) + 1rem);
  }

  body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--marfim);
    color: var(--basalto);
    font-family: var(--fonte-corpo);
    font-size: var(--tam-corpo);
    font-weight: var(--peso-corpo);
    font-stretch: 100%;
    line-height: 1.55;
    overflow-wrap: break-word;
  }

  main { flex: 1 0 auto; }

  h1, h2, h3, h4, .display, .h1, .h2, .h3 {
    font-family: var(--fonte-titulo);
    font-weight: var(--peso-titulo);
    font-stretch: var(--largura-titulo);
    /* Na largura condensada o espaço entre palavras fica apertado */
    word-spacing: 0.04em;
    color: var(--marinho);
    text-wrap: balance;
  }
  h1, .h1 { font-size: var(--tam-h1); line-height: 1; }
  h2, .h2 { font-size: var(--tam-h2); line-height: 1.05; }
  h3, .h3 { font-size: var(--tam-h3); line-height: 1.15; }
  h4 { font-size: 1.125rem; line-height: 1.2; }
  .display {
    font-size: var(--tam-display);
    line-height: 0.95;
    font-weight: var(--peso-display);
    font-stretch: var(--largura-display);
  }

  p, li { text-wrap: pretty; }
  strong, b { font-weight: var(--peso-forte); }

  a {
    color: var(--marinho);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
  }
  a:hover { color: var(--marinho-fundo); text-decoration-thickness: 2px; }

  img { border-radius: var(--raio); }
  hr { border: 0; border-top: 1px solid var(--linha); }
  ::selection { background: var(--gelo); color: var(--basalto); }

  :focus-visible {
    outline: 2px solid var(--cor-foco);
    outline-offset: 2px;
  }

  /* Fundo escuro: seções escuras, rodapé e qualquer bloco .fundo-escuro */
  :is(.secao--escura, .rodape, .fundo-escuro) {
    --superficie: var(--mar-austral);
    --cor-foco: var(--gelo-claro);
    background: var(--superficie);
    color: var(--marfim);
  }
  :is(.secao--escura, .rodape, .fundo-escuro) :is(h1, h2, h3, h4, .display) { color: var(--marfim); }
  :is(.secao--escura, .rodape, .fundo-escuro) a:not([class]) { color: var(--gelo); }
  :is(.secao--escura, .rodape, .fundo-escuro) a:not([class]):hover { color: var(--marfim); }
  :is(.secao--escura, .rodape, .fundo-escuro) ::selection { background: var(--gelo); color: var(--noite-polar); }
}


/* ------------------------------------------------------------------ layout */

@layer layout {
  .conteudo {
    width: 100%;
    max-width: calc(var(--conteudo-max) + 2 * var(--margem));
    margin-inline: auto;
    padding-inline: var(--margem);
  }

  .secao { padding-block: var(--ritmo); }
  .secao--nevoa { --superficie: var(--nevoa); background: var(--nevoa); }
  .secao--papel { --superficie: var(--papel); background: var(--papel); }
  .secao--colada { padding-top: 0; }

  .secao__cabecalho {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem 2rem;
    margin-bottom: clamp(2rem, 4vw, 3.5rem);
  }
  .secao__intro { display: grid; gap: 1rem; justify-items: start; flex: 1 1 30rem; max-width: 56rem; }
  .secao__texto { max-width: 34.4em; color: var(--basalto-suave); font-size: 1.0625rem; }
  :is(.secao--escura, .fundo-escuro) .secao__texto { color: var(--gelo); }

  .grade {
    display: grid;
    gap: var(--espaco);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--grade-min, 18rem)), 1fr));
  }

  /* Pular para o conteúdo: primeiro focável da página */
  .pular {
    position: absolute;
    z-index: 100;
    top: 0.5rem;
    left: var(--margem);
    padding: 0.75rem 1rem;
    background: var(--marinho);
    color: #FFFFFF;
    font-weight: var(--peso-forte);
    text-decoration: none;
    transform: translateY(-200%);
  }
  .pular:focus { transform: none; color: #FFFFFF; }

  /* Cabeçalho fixo */
  .cabecalho {
    position: sticky;
    top: 0;
    z-index: 50;
    height: var(--altura-cabecalho);
    background: var(--marfim);
    border-bottom: 1px solid transparent;
  }
  .cabecalho--rolado { border-bottom-color: var(--linha); }
  .cabecalho__interno {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    height: 100%;
  }
  .cabecalho__marca { display: flex; align-items: center; flex-shrink: 0; }
  .cabecalho__marca :is(svg, img) { width: auto; height: 40px; }

  .menu__lista { display: flex; align-items: center; gap: clamp(0.75rem, 1.6vw, 1.75rem); }
  .menu__link {
    position: relative;
    display: block;
    padding-block: 0.5rem;
    color: var(--basalto);
    font-size: 0.9375rem;
    font-weight: 500;
    text-decoration: none;
  }
  .menu__link:hover { color: var(--marinho); }
  .menu__link::after {
    content: "";
    position: absolute;
    inset: auto 0 0.125rem;
    height: 2px;
    background: var(--aco);
    transform: scaleX(0);
    transform-origin: left;
  }
  .menu__link:hover::after { transform: scaleX(1); }
  .menu__link[aria-current="page"] { color: var(--marinho); }
  .menu__link[aria-current="page"]::after { background: var(--horizonte-ui); transform: scaleX(1); }

  .menu__botao {
    display: none;
    align-items: center;
    gap: 0.5rem;
    min-height: 44px;
    margin-right: -0.75rem;
    padding: 0.5rem 0.75rem;
    border: 0;
    background: none;
    color: var(--marinho);
    font-weight: var(--peso-forte);
    text-decoration: none;
  }
  .menu__botao .icone { width: 1.5rem; height: 1.5rem; }
  .menu__fechar, .menu-aberto .menu__abrir { display: none; }
  .menu-aberto .menu__fechar { display: inline-flex; }
  .menu__abrir { display: inline-flex; }

  @media (max-width: 59.99em) {
    .cabecalho__marca :is(svg, img) { height: 32px; }
    /* Sem JS, "Menu" é um link para o menu do rodapé (.sem-js); com JS, o
       botão (.so-js) abre o painel. Mesmo tamanho: nada pula quando o JS chega. */
    .menu__botao { display: inline-flex; }
    .menu__painel {
      display: none;
      position: fixed;
      inset: var(--altura-cabecalho) 0 0;
      z-index: 49;
      overflow-y: auto;
      overscroll-behavior: contain;
      padding: 1rem var(--margem) 3rem;
      background: var(--marfim);
      border-top: 1px solid var(--linha);
    }
    .menu-aberto .menu__painel { display: block; }
    .menu__lista { flex-direction: column; align-items: stretch; gap: 0; }
    .menu__painel .menu__link {
      padding-block: 0.875rem;
      border-bottom: 1px solid var(--linha);
      color: var(--marinho);
      font-family: var(--fonte-titulo);
      font-size: var(--tam-h2);
      font-weight: var(--peso-titulo);
      font-stretch: var(--largura-titulo);
      line-height: 1.05;
    }
    .menu__painel .menu__link::after { inset: auto auto -1px 0; width: 3rem; }
  }
  html.menu-aberto { overflow: hidden; }

  /* Rodapé escuro com textura de solo padronizado */
  .rodape {
    --superficie: var(--noite-polar);
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-block: clamp(3rem, 6vw, 5rem) 2rem;
    font-size: 0.9375rem;
  }
  .rodape::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: url("../svg/solo-padronizado.svg") 0 0 / 480px 480px repeat;
    opacity: 0.06;
    pointer-events: none;
  }
  .rodape a { color: var(--marfim); }
  .rodape a:hover { color: var(--gelo); }
  .rodape__grade {
    display: grid;
    gap: 2.5rem 2rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  }
  .rodape__titulo {
    margin-bottom: 1rem;
    color: var(--gelo);
    font-family: var(--fonte-etiqueta);
    font-size: var(--tam-etiqueta);
    font-weight: var(--peso-etiqueta);
    font-stretch: var(--largura-etiqueta);
    letter-spacing: 0.08em;
    line-height: 1.2;
    text-transform: uppercase;
  }
  .rodape__lista { display: grid; gap: 0.5rem; }
  .rodape__redes { display: flex; flex-wrap: wrap; gap: 0.5rem; }
  .rodape__redes a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid rgb(176 217 250 / 0.35);
  }
  .rodape__parceiros,
  .rodape__base {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgb(176 217 250 / 0.2);
  }
  .rodape__parceiros { display: grid; gap: 1.5rem; }
  .rodape__grupo { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; }
  .rodape__grupo-titulo { flex-basis: 100%; color: var(--gelo); }
  .rodape__base {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.75rem 2rem;
    color: var(--gelo);
  }
  .rodape__marca { display: inline-block; margin-bottom: 1rem; }
  .rodape__marca svg { width: auto; height: 44px; }
  .rodape__sobre { max-width: 34ch; color: var(--gelo); }
  .rodape address { font-style: normal; }
  .rodape__nomes { display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; }
  .rodape__parceiro {
    font-family: var(--fonte-titulo);
    font-size: 1.25rem;
    font-weight: var(--peso-titulo);
    font-stretch: var(--largura-titulo);
    line-height: 1.3;
  }
  .rodape__parceiro a { text-decoration: none; }
  .rodape__parceiro a:hover { text-decoration: underline; }
  @media (min-width: 60em) { .rodape__parceiros { grid-template-columns: 1fr 1fr 2fr; gap: 2rem; } }
  .rodape__base p { max-width: 90ch; }
  .rodape__credito { font-size: 0.8125rem; }
}


/* ------------------------------------------------------------- componentes */

@layer componentes {
  .icone {
    display: inline-block;
    flex-shrink: 0;
    width: 1.25em;
    height: 1.25em;
    vertical-align: -0.25em;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.25;
    stroke-linecap: square;
    stroke-linejoin: miter;
  }

  /* Etiqueta: caixa-alta expandida sobre faixa (ecoa as faixas dos posts) */
  .etiqueta {
    display: inline-block;
    align-self: flex-start;
    justify-self: start;
    padding: 0.3em 0.65em 0.25em;
    background: var(--marinho);
    color: #FFFFFF;
    font-family: var(--fonte-etiqueta);
    font-size: var(--tam-etiqueta);
    font-weight: var(--peso-etiqueta);
    font-stretch: var(--largura-etiqueta);
    letter-spacing: 0.08em;
    line-height: 1.2;
    text-decoration: none;
    text-transform: uppercase;
  }
  .etiqueta--aco { background: var(--aco-texto); }
  a.etiqueta:hover { background: var(--marinho-fundo); color: #FFFFFF; }

  /* Requadro: filete fino com o título cortando a linha de cima */
  .requadro {
    position: relative;
    margin-top: 0.75em;
    padding: calc(12px + 1.25rem) clamp(12px, 3vw, 2rem) clamp(12px, 3vw, 2rem);
    border: 1px solid var(--linha);
  }
  .requadro--aco { border-color: var(--aco); }
  .requadro__titulo {
    position: absolute;
    top: 0;
    left: clamp(12px, 2vw, 1.5rem);
    max-width: calc(100% - 24px);
    padding-inline: 0.5rem;
    background: var(--superficie);
    color: var(--marinho);
    font-family: var(--fonte-etiqueta);
    font-size: var(--tam-etiqueta);
    font-weight: var(--peso-etiqueta);
    font-stretch: var(--largura-etiqueta);
    letter-spacing: 0.08em;
    line-height: 1.2;
    text-transform: uppercase;
    transform: translateY(-50%);
  }
  :is(.secao--escura, .rodape, .fundo-escuro) .requadro { border-color: rgb(176 217 250 / 0.35); }
  :is(.secao--escura, .rodape, .fundo-escuro) .requadro__titulo { color: var(--gelo); }

  /* Dados e legenda de campo: local · região · ano · crédito */
  .dados, .legenda {
    font-family: var(--fonte-dados);
    font-size: var(--tam-dados);
    font-variant-numeric: tabular-nums;
    line-height: 1.4;
  }
  .legenda {
    display: flex;
    flex-wrap: wrap;
    margin-top: 0.5rem;
    color: var(--basalto-suave);
  }
  /* O ponto fica no fim da parte anterior: na quebra de linha, não abre a linha seguinte. */
  .legenda > :not(:last-child)::after {
    content: "\B7";
    content: "\B7" / "";
    padding-inline: 0.5em;
  }
  :is(.secao--escura, .rodape, .fundo-escuro) .legenda { color: var(--gelo); }

  /* Texto longo em serifa */
  .texto {
    max-width: var(--medida);
    font-family: var(--fonte-texto);
    font-size: var(--tam-texto);
    font-optical-sizing: auto;
    line-height: 1.7;
  }
  .texto > * + * { margin-top: 1em; }
  .texto > :is(h2, h3, h4) { margin-top: 1.75em; }
  .texto > :is(h2, h3, h4) + * { margin-top: 0.75em; }
  .texto :is(ul, ol) { padding-left: 1.25em; }
  .texto li + li { margin-top: 0.35em; }
  .texto blockquote {
    padding-left: 1.25em;
    border-left: 2px solid var(--aco);
    font-style: italic;
  }
  .texto img { margin-block: 0.5em; }
  .texto figcaption {
    margin-top: 0.5rem;
    color: var(--basalto-suave);
    font-family: var(--fonte-dados);
    font-size: var(--tam-dados);
    line-height: 1.4;
  }

  /* Botões */
  .botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    min-height: 44px;
    padding: 0.625rem 1.25rem;
    border: 1px solid transparent;
    border-radius: var(--raio);
    font-family: var(--fonte-corpo);
    font-size: 1rem;
    font-weight: var(--peso-forte);
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
  }
  .botao--primario { background: var(--marinho); color: #FFFFFF; }
  .botao--primario:hover { background: var(--marinho-fundo); color: #FFFFFF; }
  .botao--secundario { background: transparent; color: var(--marinho); border-color: currentColor; }
  .botao--secundario:hover { background: var(--nevoa); color: var(--marinho-fundo); }
  :is(.secao--escura, .rodape, .fundo-escuro) .botao--primario { background: var(--gelo); color: var(--noite-polar); }
  :is(.secao--escura, .rodape, .fundo-escuro) .botao--primario:hover { background: var(--marfim); }
  :is(.secao--escura, .rodape, .fundo-escuro) .botao--secundario { color: var(--marfim); }
  :is(.secao--escura, .rodape, .fundo-escuro) .botao--secundario:hover { background: rgb(255 255 255 / 0.08); }
  .botao[aria-disabled="true"], .botao:disabled { opacity: 0.55; cursor: not-allowed; }

  .link-seta {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    font-weight: var(--peso-forte);
    text-decoration: none;
  }
  .link-seta:hover { text-decoration: underline; }

  /* Cartão: o link do título cobre o cartão inteiro */
  .cartao {
    --superficie: var(--papel);
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--papel);
    border: 1px solid var(--linha);
    border-radius: var(--raio);
  }
  .cartao__midia { aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--raio) var(--raio) 0 0; }
  .cartao__midia img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
  /* <picture> some da caixa: o height: 100% da foto vale contra a moldura 3:2 */
  .cartao__midia picture { display: contents; }
  .cartao__corpo { display: flex; flex: 1; flex-direction: column; gap: 0.75rem; padding: clamp(1rem, 2vw, 1.5rem); }
  .cartao__titulo { font-size: var(--tam-h3); line-height: 1.15; }
  .cartao__link { color: inherit; text-decoration: none; }
  .cartao__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
  .cartao__link:focus-visible { outline: none; }
  .cartao:has(.cartao__link:focus-visible) { outline: 2px solid var(--cor-foco); outline-offset: 2px; }
  .cartao:hover .cartao__link { text-decoration: underline; text-decoration-thickness: 2px; }
  .cartao__meta { color: var(--basalto-suave); }
  .cartao__resumo { color: var(--basalto-suave); }

  /* Filtros (botões com aria-pressed) */
  .filtros { display: flex; flex-wrap: wrap; gap: 0.5rem; }
  .filtro {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    min-height: 44px;
    padding: 0.5rem 1rem;
    border: 1px solid var(--aco-texto);
    border-radius: var(--raio);
    background: transparent;
    color: var(--marinho);
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
  }
  .filtro:hover { background: var(--nevoa); }
  .filtro[aria-pressed="true"],
  .filtro[aria-current="page"] {
    background: var(--marinho);
    border-color: var(--marinho);
    color: #FFFFFF;
  }

  /* Campo de formulário (busca, seleção) */
  .campo { display: grid; align-content: start; gap: 0.375rem; }
  .campo__rotulo { font-size: 0.9375rem; font-weight: var(--peso-forte); }
  .campo :is(input, select, textarea) {
    width: 100%;
    min-height: 44px;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--basalto-suave);
    border-radius: var(--raio);
    background: var(--papel);
    color: var(--basalto);
  }
  .campo :is(input, select, textarea):focus-visible { border-color: var(--geleira); }

  /* Estado vazio (filtro sem resultado) */
  .vazio {
    display: grid;
    justify-items: center;
    gap: 0.75rem;
    padding: clamp(2rem, 5vw, 4rem) 1.5rem;
    border: 1px dashed var(--aco);
    color: var(--basalto-suave);
    text-align: center;
  }
  .vazio .icone { width: 2rem; height: 2rem; color: var(--aco-texto); }

  /* Cartão de notícia em destaque: foto ao lado do texto no desktop */
  @media (min-width: 60em) {
    .cartao--destaque { display: grid; grid-template-columns: 3fr 2fr; }
    .cartao--destaque .cartao__midia { aspect-ratio: auto; min-height: 100%; border-radius: var(--raio) 0 0 var(--raio); }
    .cartao--destaque .cartao__titulo { font-size: var(--tam-h2); line-height: 1.05; }
  }

  /* Entrada de bibliografia: ano grande em mono, título, autores, periódico */
  .publicacao {
    display: grid;
    grid-template-columns: minmax(4.5rem, auto) 1fr;
    gap: 0.5rem 1.5rem;
    padding-block: 1.5rem;
    border-top: 1px solid var(--linha);
  }
  .publicacao__ano { color: var(--aco-texto); font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); line-height: 1; }
  .publicacao__corpo { display: grid; gap: 0.375rem; justify-items: start; min-width: 0; }
  .publicacao__titulo { font-size: var(--tam-h3); }
  .publicacao__autores, .publicacao__periodico { color: var(--basalto-suave); }
  @media (max-width: 30em) { .publicacao { grid-template-columns: 1fr; } }

  /* Pessoa da equipe */
  .pessoa { display: grid; align-content: start; gap: 0.375rem; }
  .pessoa__foto {
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    margin-bottom: 0.5rem;
    overflow: hidden;
    background: var(--nevoa);
    border-radius: var(--raio);
  }
  .pessoa__foto img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
  /* Com derivadas, a foto vem num <picture>: ele ocupa o quadrado inteiro */
  .pessoa__foto > picture { display: block; width: 100%; height: 100%; }
  .pessoa__iniciais { color: var(--marinho); font-family: var(--fonte-titulo); font-size: 2.5rem; font-weight: var(--peso-titulo); font-stretch: var(--largura-titulo); }
  .pessoa__nome { font-size: var(--tam-h3); }
  .pessoa__vinculo { color: var(--aco-texto); font-weight: var(--peso-forte); }
  .pessoa__especialidade, .pessoa__conquistas { color: var(--basalto-suave); font-size: 0.9375rem; }
  .pessoa__conquistas summary { min-height: 44px; display: flex; align-items: center; color: var(--marinho); cursor: pointer; }
  .pessoa__email { display: inline-flex; align-items: center; justify-self: start; gap: 0.4em; max-width: 100%; min-height: 44px; overflow-wrap: anywhere; }

  /* Miniatura da galeria (paisagem larga ocupa 2 colunas) */
  .galeria__item--larga { grid-column: span 2; }
  .galeria__link { position: relative; display: block; height: 100%; color: inherit; text-decoration: none; }
  .galeria__link img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
  .galeria__item--larga .galeria__link img { aspect-ratio: 8 / 3; }
  .galeria__titulo { display: block; margin-top: 0.5rem; font-size: 0.9375rem; }
  @media (max-width: 40em) { .galeria__item--larga { grid-column: auto; } .galeria__item--larga .galeria__link img { aspect-ratio: 4 / 3; } }
}

/* ------------------------------------------- componentes de página (Task 5b) */
/*
 * Compartilhados pelas páginas internas; o que é de uma página só vai em
 * css/paginas/. Classes e estados:
 *   .cabecalho-pagina (--curvas) __curvas __interno __topo __coordenada __titulo __texto
 *   .migalhas  .migalhas__lista  [aria-current="page"] no item atual
 *   .barra-filtros  agrupa .filtros, .busca e .contagem
 *   .filtro[aria-current="true"] (sem JS) / [aria-pressed="true"] (com JS)  .filtro__contagem
 *   .busca .busca__campo .busca__caixa .busca__enviar   .contagem   .vazio__titulo
 *   .grade--3 (3, 2 ou 1 coluna)   .bibliografia .bibliografia__grupo .bibliografia__ano
 *   .mapa  (.mapa--apagado / .mapa--acendendo: postos por cenas/mapa.js)
 *     __grade __figura __carta __svg __encarte __dica(--embaixo) __rodape __legenda
 *     __simbolo(--estacao --livre --confirmar) __nota __atribuicao __lista __grupo
 *     __regiao __sitios __sitio(--estacao --confirmar --fora --ativo) __sitio-link
 *     __nome __coordenada; no SVG: .sitio, .sitio--ativo, --escala-sitio, --ordem
 */

@layer componentes {
  /* Cabeçalho de página interna: margem de carta com tiques de régua embaixo */
  .cabecalho-pagina {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-block: clamp(2.5rem, 6vw, 5.5rem) clamp(2.25rem, 4.5vw, 4rem);
    border-bottom: 1px solid var(--linha);
  }
  .cabecalho-pagina::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    z-index: -1;
    height: 10px;
    background:
      repeating-linear-gradient(90deg, var(--aco) 0 1px, transparent 1px 120px) left bottom / 100% 10px no-repeat,
      repeating-linear-gradient(90deg, var(--linha) 0 1px, transparent 1px 24px) left bottom / 100% 5px no-repeat;
    pointer-events: none;
  }
  .cabecalho-pagina__curvas {
    position: absolute;
    inset: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 70% 40%;
    border-radius: 0;
    opacity: 0.2;
    -webkit-mask-image: linear-gradient(90deg, transparent 10%, #000 65%);
    mask-image: linear-gradient(90deg, transparent 10%, #000 65%);
    pointer-events: none;
  }
  .cabecalho-pagina__interno { display: grid; justify-items: start; }
  /* A primeira seção depois do cabeçalho não repete o respiro inteiro */
  .cabecalho-pagina + .secao { padding-top: clamp(2rem, 4vw, 3.5rem); }
  .cabecalho-pagina__topo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1.25rem;
    width: 100%;
  }
  .cabecalho-pagina__coordenada {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    margin-left: auto;
    color: var(--basalto-suave);
    letter-spacing: 0.02em;
  }
  /* Linha de chamada em laranja (grafismo), como num ponto cotado */
  .cabecalho-pagina__coordenada::before { content: ""; width: 2rem; height: 1px; background: var(--horizonte); }
  /* Medidas em em, não em ch: o "0" do fallback tem outra largura e o título
     quebraria diferente antes e depois da troca de fonte (CLS). 9,2em é o
     20ch da Terrantar Display condensada; 29,6em, o 58ch da Terrantar Texto. */
  .cabecalho-pagina__titulo { max-width: 9.2em; margin-top: clamp(1rem, 2vw, 1.5rem); }
  .cabecalho-pagina__texto {
    max-width: 29.6em;
    margin-top: clamp(1rem, 2vw, 1.5rem);
    color: var(--basalto-suave);
    font-family: var(--fonte-texto);
    font-size: clamp(1.125rem, 1.02rem + 0.45vw, 1.375rem);
    line-height: 1.55;
  }
  @media (max-width: 40em) { .cabecalho-pagina__coordenada { margin-left: 0; flex-basis: 100%; } }

  .migalhas { margin-bottom: clamp(1.25rem, 3vw, 2rem); font-family: var(--fonte-dados); font-size: var(--tam-dados); }
  .migalhas__lista { display: flex; flex-wrap: wrap; gap: 0.25rem 0; color: var(--basalto-suave); }
  .migalhas__lista li + li::before { content: "/"; content: "/" / ""; padding-inline: 0.6em; color: var(--aco); }
  .migalhas a { color: var(--marinho); }
  .migalhas [aria-current="page"] { color: var(--basalto); }

  /* Barra de filtros: botões, busca e contagem */
  .barra-filtros {
    display: grid;
    gap: 1.25rem 2rem;
    margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
  }
  @media (min-width: 64em) {
    .barra-filtros:has(.busca):has(.filtros) { grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem); align-items: end; }
  }
  .barra-filtros .contagem { grid-column: 1 / -1; }
  @media (max-width: 40em) { .filtro { min-height: 40px; padding: 0.375rem 0.75rem; font-size: 0.875rem; } }
  /* Etiqueta e data do cartão: a data quebra inteira, não no meio */
  .cartao__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 0.75rem; }
  .cartao__meta time { white-space: nowrap; }
  .filtro[aria-current="true"] { background: var(--marinho); border-color: var(--marinho); color: #FFFFFF; }
  .filtro__contagem { font-size: 0.75rem; opacity: 0.8; }
  .busca { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.5rem; }
  /* 12rem: a 360 px o campo e o botão "Buscar" (sem JS, ou antes do JS chegar)
     cabem na mesma linha mesmo depois da troca de fonte; com 14rem o botão
     caía para baixo quando a fonte web chegava (CLS 0,06 na equipe). */
  .busca__campo { flex: 1 1 12rem; }
  .busca__caixa { position: relative; display: block; }
  .busca__caixa .icone { position: absolute; top: 50%; left: 0.75rem; color: var(--aco-texto); transform: translateY(-50%); pointer-events: none; }
  .campo .busca__caixa input { padding-left: 2.5rem; border-color: var(--aco); }
  .contagem { padding-top: 0.75rem; border-top: 1px solid var(--linha); color: var(--basalto-suave); }
  .vazio__titulo { color: var(--basalto); font-size: 1.125rem; font-weight: var(--peso-forte); }

  /* Grade de cartões: 3, 2 ou 1 coluna */
  .grade--3 { grid-template-columns: minmax(0, 1fr); }
  @media (min-width: 40em) { .grade--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 64em) { .grade--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

  /* Bibliografia agrupada por ano: o ano do grupo substitui o de cada item */
  .bibliografia { display: grid; gap: clamp(2rem, 4vw, 3.5rem); }
  .bibliografia__grupo { display: grid; gap: 0.5rem 2rem; }
  .bibliografia__ano {
    padding-top: 0.75rem;
    border-top: 2px solid var(--marinho);
    color: var(--aco-texto);
    font-family: var(--fonte-dados);
    font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.75rem);
    font-weight: 500;
    font-stretch: 100%;
    font-variant-numeric: tabular-nums;
    line-height: 1;
  }
  .bibliografia__grupo .publicacao { grid-template-columns: minmax(0, 1fr); }
  .bibliografia__grupo .publicacao__ano { display: none; }
  @media (min-width: 60em) {
    .bibliografia__grupo { grid-template-columns: 10rem minmax(0, 1fr); }
    .bibliografia__ano { position: sticky; top: calc(var(--altura-cabecalho) + 1.5rem); align-self: start; }
    .bibliografia__grupo .publicacao:first-of-type { border-top-color: var(--marinho); border-top-width: 2px; }
  }

  /* Mapa "Onde trabalhamos" */
  .mapa__grade { display: grid; gap: clamp(2rem, 4vw, 3.5rem); }
  @media (min-width: 64em) { .mapa__grade { grid-template-columns: minmax(0, 1fr) minmax(17rem, 23rem); align-items: start; } }
  .mapa__carta { position: relative; container-type: inline-size; }
  .mapa__svg { --escala-sitio: 1.5; width: 100%; height: auto; overflow: visible; }
  .mapa__svg .legenda > :not(.escala) { display: none; }
  .mapa__svg .sitio { cursor: pointer; outline: none; }
  .mapa__svg .sitio > * { transform: scale(var(--escala-sitio)); }
  .mapa__svg .sitio-anel { pointer-events: visible; }
  .mapa__svg .sitio:is(:hover, :focus, .sitio--ativo) .sitio-anel { stroke: var(--geleira); stroke-width: 1.4; fill: var(--papel); }
  .mapa__svg .sitio:focus-visible .sitio-anel { stroke-width: 2; }
  .mapa__svg .sitio:is(:hover, :focus, .sitio--ativo) .sitio-nome { fill: var(--marinho-fundo); font-weight: 600; }
  @container (max-width: 44rem) { .mapa__svg { --escala-sitio: 1.9; } }
  @container (max-width: 30rem) {
    .mapa__svg { --escala-sitio: 2.8; }
    .mapa__svg :is(.sitio-nome, .nomes-ilha) { display: none; }
    .mapa__svg .sitio:is(:hover, :focus, .sitio--ativo) .sitio-nome { display: inline; }
  }
  /* Encarte no canto de cima, onde ficava a legenda do SVG (a legenda vai
     em HTML no rodapé); a escala desce para baixo dele. */
  .mapa__svg:has(~ .mapa__encarte) .escala { transform: translateY(150px); }
  .mapa__encarte {
    position: absolute;
    top: 4%;
    left: 4.5%;
    width: clamp(64px, 16%, 170px);
    padding: 4px;
    background: var(--papel);
    border: 1px solid var(--linha);
    border-radius: 0;
  }
  .mapa__dica {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    display: grid;
    gap: 0.125rem;
    width: max-content;
    max-width: min(17rem, 90%);
    padding: 0.5rem 0.75rem;
    background: var(--mar-austral);
    color: var(--marfim);
    border-radius: var(--raio);
    font-size: 0.875rem;
    line-height: 1.3;
    pointer-events: none;
    transform: translate(calc(var(--x, 0px) - 50%), calc(var(--y, 0px) - 100%));
  }
  .mapa__dica--embaixo { transform: translate(calc(var(--x, 0px) - 50%), var(--y, 0px)); }
  .mapa__dica::after {
    content: "";
    position: absolute;
    top: 100%;
    left: calc(50% + var(--seta, 0px));
    border: 6px solid transparent;
    border-top-color: var(--mar-austral);
    transform: translateX(-50%);
  }
  .mapa__dica--embaixo::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: var(--mar-austral); }
  .mapa__dica-nome { font-weight: var(--peso-forte); }
  .mapa__dica-coordenada { color: var(--gelo); font-family: var(--fonte-dados); font-size: var(--tam-dados); }

  .mapa__figura { min-width: 0; }
  .mapa__rodape { display: grid; gap: 0.625rem; margin-top: 1rem; color: var(--basalto-suave); font-size: 0.875rem; }
  .mapa__legenda { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
  .mapa__legenda li { display: inline-flex; align-items: center; gap: 0.6rem; }
  .mapa__nota strong { color: var(--basalto); font-weight: var(--peso-forte); }
  .mapa__atribuicao { font-size: 0.75rem; }
  .mapa__simbolo {
    display: inline-block;
    flex-shrink: 0;
    width: 7px;
    height: 7px;
    background: var(--marinho);
    border-radius: 50%;
    outline: 1px solid var(--marinho);
    outline-offset: 2px;
  }
  .mapa__simbolo--estacao,
  .mapa__sitio--estacao .mapa__simbolo {
    width: 12px;
    height: 11px;
    background: var(--horizonte);
    border-radius: 0;
    outline: 0;
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
  }
  .mapa__simbolo--livre { width: 14px; height: 9px; background: var(--horizonte); border-radius: 0; outline: 0; }
  .mapa__simbolo--confirmar,
  .mapa__sitio--confirmar .mapa__simbolo { background: transparent; border: 1.5px solid var(--marinho); outline: 0; }

  .mapa__lista { display: grid; gap: 1.75rem; align-content: start; }
  .mapa__fora { margin-top: clamp(2rem, 4vw, 3rem); }
  .mapa__fora .mapa__sitio--fora:not(:has(a)) { grid-template-columns: minmax(0, 1fr); padding-inline: 0; }
  .mapa__fora .mapa__sitio-link { grid-template-columns: minmax(0, 1fr); }
  .mapa__fora :is(.mapa__nome, .mapa__coordenada) { grid-column: 1; }
  .mapa__fora .mapa__sitios { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); column-gap: 2rem; }
  @media (min-width: 40em) and (max-width: 63.99em) { .mapa__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 2rem; } }
  .mapa__regiao {
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--linha);
    color: var(--aco-texto);
    font-family: var(--fonte-etiqueta);
    font-size: var(--tam-etiqueta);
    font-weight: var(--peso-etiqueta);
    font-stretch: var(--largura-etiqueta);
    letter-spacing: 0.08em;
    line-height: 1.3;
    text-transform: uppercase;
  }
  .mapa__sitio-link,
  .mapa__sitio--fora:not(:has(a)) {
    display: grid;
    grid-template-columns: 1rem minmax(0, 1fr);
    column-gap: 0.75rem;
    padding: 0.5rem 0.375rem;
    border-bottom: 1px solid color-mix(in srgb, var(--linha) 55%, transparent);
    color: var(--basalto);
    text-decoration: none;
  }
  .mapa__sitio-link .mapa__simbolo { grid-row: span 2; justify-self: center; margin-top: 0.45rem; }
  .mapa__nome, .mapa__coordenada { grid-column: 2; }
  .mapa__nome { font-weight: 500; line-height: 1.3; }
  .mapa__coordenada { color: var(--basalto-suave); }
  .mapa__sitio-link:hover,
  .mapa__sitio--ativo .mapa__sitio-link { background: var(--nevoa); color: var(--marinho); }
  .mapa__sitio--ativo .mapa__nome { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
}


/* ------------------------------------------------------------- utilitarios */

@layer utilitarios {
  .visualmente-oculto:not(:focus-within) {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  html:not(.js) .so-js { display: none !important; }
  .js .sem-js { display: none !important; }

  /* Foto em preto e branco nas capas e na equipe; cor volta no hover e no foco */
  .foto-pb { filter: grayscale(1); }
  :is(a, .cartao):is(:hover, :focus-visible, :focus-within) .foto-pb { filter: none; }
  /* Aqui, e não em componentes: na camada de baixo perderia para .foto-pb */
  .pessoa:is(:hover, :focus-within) .foto-pb { filter: none; }

  @media print {
    .cabecalho, .pular, .so-js, .botao, .filtros, .rodape::before, video { display: none !important; }
    body, .rodape, .secao--escura, .fundo-escuro, .secao--nevoa {
      background: #FFFFFF !important;
      color: #000000 !important;
    }
    :is(h1, h2, h3, h4, a, .rodape a) { color: #000000 !important; }
    :is(h1, h2, h3, h4) { break-after: avoid; }
    img, figure, .cartao { break-inside: avoid; }
    .secao { padding-block: 1.5rem; }
    .texto a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; overflow-wrap: anywhere; }
    .foto-pb { filter: none; }
  }
}


/* --------------------------------------------------------------- movimento */

@layer movimento {
  @media (prefers-reduced-motion: no-preference) {
    /* Entrada "emergir": sobe 12 px, ganha opacidade e o recorte abre.
       Só com JS (site.js põe .surgiu); o LCP não deve levar .surgir. */
    .js .surgir {
      clip-path: inset(-2rem);
      transition:
        opacity var(--dur-padrao) var(--ease-assentamento),
        transform var(--dur-padrao) var(--ease-assentamento),
        clip-path var(--dur-padrao) var(--ease-assentamento);
      transition-delay: calc(min(var(--i, 0), 6) * 60ms);
    }
    /* O recorte deixa uma faixa de 0,75rem à mostra no topo (invisível: a
       opacidade ainda é 0). Com a foto 100 % recortada, o Chromium não vê a
       interseção das fotos lazy de dentro e elas não baixam; 1 px não basta,
       porque no cartão esse 1 px é a borda e a foto começa logo abaixo. */
    .js .surgir:not(.surgiu) {
      opacity: 0;
      transform: translateY(12px);
      clip-path: inset(0 0 calc(100% - 0.75rem) 0);
    }

    /* Cartão: a foto aproxima 1,03 dentro da moldura (movimento.md 4.6) */
    .cartao__midia img { transition: transform var(--dur-padrao) var(--ease-assentamento); }
    .cartao:is(:hover, :focus-within) .cartao__midia img { transform: scale(1.03); }

    .menu__link::after,
    :is(.botao, .link-seta) .icone {
      transition: transform var(--dur-rapida) var(--ease-assentamento);
    }
    :is(.botao, .link-seta):hover .icone:last-child { transform: translateX(3px); }

    /* Mapa: os marcadores acendem em sequência (cenas/mapa.js põe as classes) */
    .mapa__svg .sitio > *,
    .mapa__sitio .mapa__simbolo {
      transition:
        opacity var(--dur-padrao) var(--ease-assentamento),
        transform var(--dur-padrao) var(--ease-assentamento);
    }
    .mapa--acendendo :is(.sitio > *, .mapa__sitio .mapa__simbolo) { transition-delay: calc(var(--ordem, 0) * 100ms); }
    .js .mapa--apagado .sitio > :not(.sitio-nome) { opacity: 0; transform: scale(calc(var(--escala-sitio) * 0.3)); }
    .js .mapa--apagado .sitio-nome,
    .js .mapa--apagado .mapa__sitio .mapa__simbolo { opacity: 0; }
    .mapa__sitio-link,
    .filtro { transition: background-color var(--dur-rapida) var(--ease-assentamento), color var(--dur-rapida) var(--ease-assentamento); }

    .menu-aberto .menu__painel { animation: painel-entrar var(--dur-padrao) var(--ease-assentamento); }

    ::view-transition-old(root),
    ::view-transition-new(root) {
      animation-duration: var(--dur-padrao);
      animation-timing-function: var(--ease-assentamento);
    }
  }

  @keyframes painel-entrar {
    from { opacity: 0; transform: translateY(-8px); }
  }

  /* Movimento reduzido: tudo no estado final, sem transição, ciclos parados */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 1ms !important;
      animation-delay: 0s !important;
      animation-iteration-count: 1 !important;
      transition-duration: 1ms !important;
      transition-delay: 0s !important;
      scroll-behavior: auto !important;
    }
    .surgir { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  }
}