/* o contêiner do mapa ocupa o palco em qualquer ordem das folhas: o mapbox-gl.css (que entra com a biblioteca) põe
   .mapboxgl-map { position: relative }, que venceria a .fundo-mapa de base.css se viesse depois dela */
.fundo-mapa.mapboxgl-map { position: absolute; inset: 0; }
/*
 * O que é comum às páginas com o mapa Mapbox (mapa-mapbox.js) e às capas estáticas com imagem do Mapbox.
 * Cada página põe o logotipo e a atribuição no canto dela (que não cobre texto), no CSS da própria página.
 */

/* 1. O mapa só aparece com imagem de verdade: data-imagem chega com o primeiro ladrilho do satélite. Sem ela (sem chave,
   cota esgotada, rede falhando) o contêiner fica transparente e a reserva da página fica no lugar. */
html[data-motor='mapbox'] .fundo-mapa[data-pronto]:not([data-imagem]) { opacity: 0; }
/* a atribuição e o crédito valem para a reserva também: aparecem com ela (a regra da hero os escondia até o mapa) */
.mapa-reserva ~ .fundo-mapa:not([data-pronto]) ~ .atribuicao, .mapa-reserva ~ .fundo-mapa:not([data-pronto]) ~ .credito { opacity: 1; }

/* 2. A reserva: a capa estática do primeiro quadro do mapa, por baixo dele. Sai (sem custo de pintura) depois que o mapa
   termina de esmaecer por cima dela; com movimento reduzido, depois do esmaecer curto. */
.mapa-reserva { position: absolute; inset: 0; overflow: hidden; pointer-events: none; background: var(--ds-cor-fundo); }
.mapa-reserva img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* A reserva de câmera fixa (uma mina, com o recuo de 40% no computador): em escala 1:1, presa no ponto da mina; o mapa
   entra por cima sem salto. Capturas: 1920x1080 com a mina em (1344, 540); no celular, 480x1000 a 2x com a mina no meio. */
.mapa-reserva.ancorada img { inset: auto; width: 1920px; height: 1080px; left: calc(70% - 1344px); top: calc(50% - 540px); }
@media (max-width: 760px) { .mapa-reserva.ancorada img { width: 480px; height: 1000px; left: calc(50% - 240px); top: calc(50% - 500px); } }
/* a capa estática (capa-estatica.js): peças da Static Images API postas pelo script, no lugar e no tamanho de cada uma, com o
   ajuste de cor do mapa vivo (o filtro #capa-cor) */
.mapa-reserva img.capa-peca { position: absolute; inset: auto; max-width: none; object-fit: fill; filter: url(#capa-cor); }
html[data-mapa-vivo] .mapa-reserva, html[data-mapa-vivo] .logo-reserva { visibility: hidden; transition: visibility 0s linear 760ms; }
@media (prefers-reduced-motion: reduce) { html[data-mapa-vivo] .mapa-reserva, html[data-mapa-vivo] .logo-reserva { transition-delay: 220ms; } }

/* 3. O logotipo das imagens estáticas: o mesmo elemento e o mesmo desenho do SDK (mapbox-gl.css), sem alteração; só a
   posição muda, por página. O do mapa vivo e o da reserva ficam no mesmo lugar: a troca entre eles não se vê. */
.logo-mapbox { position: absolute; z-index: 3; width: 88px; height: 23px; }
/* cópia exata da regra do logotipo do mapbox-gl.css v3.32.0 (o logotipo aparece mesmo sem o CSS da biblioteca) */
.logo-mapbox a.mapboxgl-ctrl-logo{width:88px;height:23px;margin:0 0 -4px -4px;display:block;background-repeat:no-repeat;cursor:pointer;overflow:hidden;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20fill-rule%3D%22evenodd%22%20viewBox%3D%220%200%2088%2023%22%3E%3Cdefs%3E%3Cpath%20id%3D%22logo%22%20d%3D%22M11.5%202.25c5.105%200%209.25%204.145%209.25%209.25s-4.145%209.25-9.25%209.25-9.25-4.145-9.25-9.25%204.145-9.25%209.25-9.25zM6.997%2015.983c-.051-.338-.828-5.802%202.233-8.873a4.395%204.395%200%20013.13-1.28c1.27%200%202.49.51%203.39%201.42.91.9%201.42%202.12%201.42%203.39%200%201.18-.449%202.301-1.28%203.13C12.72%2016.93%207%2016%207%2016l-.003-.017zM15.3%2010.5l-2%20.8-.8%202-.8-2-2-.8%202-.8.8-2%20.8%202%202%20.8z%22%2F%3E%3Cpath%20id%3D%22text%22%20d%3D%22M50.63%208c.13%200%20.23.1.23.23V9c.7-.76%201.7-1.18%202.73-1.18%202.17%200%203.95%201.85%203.95%204.17s-1.77%204.19-3.94%204.19c-1.04%200-2.03-.43-2.74-1.18v3.77c0%20.13-.1.23-.23.23h-1.4c-.13%200-.23-.1-.23-.23V8.23c0-.12.1-.23.23-.23h1.4zm-3.86.01c.01%200%20.01%200%20.01-.01.13%200%20.22.1.22.22v7.55c0%20.12-.1.23-.23.23h-1.4c-.13%200-.23-.1-.23-.23V15c-.7.76-1.69%201.19-2.73%201.19-2.17%200-3.94-1.87-3.94-4.19%200-2.32%201.77-4.19%203.94-4.19%201.03%200%202.02.43%202.73%201.18v-.75c0-.12.1-.23.23-.23h1.4zm26.375-.19a4.24%204.24%200%2000-4.16%203.29c-.13.59-.13%201.19%200%201.77a4.233%204.233%200%20004.17%203.3c2.35%200%204.26-1.87%204.26-4.19%200-2.32-1.9-4.17-4.27-4.17zM60.63%205c.13%200%20.23.1.23.23v3.76c.7-.76%201.7-1.18%202.73-1.18%201.88%200%203.45%201.4%203.84%203.28.13.59.13%201.2%200%201.8-.39%201.88-1.96%203.29-3.84%203.29-1.03%200-2.02-.43-2.73-1.18v.77c0%20.12-.1.23-.23.23h-1.4c-.13%200-.23-.1-.23-.23V5.23c0-.12.1-.23.23-.23h1.4zm-34%2011h-1.4c-.13%200-.23-.11-.23-.23V8.22c.01-.13.1-.22.23-.22h1.4c.13%200%20.22.11.23.22v.68c.5-.68%201.3-1.09%202.16-1.1h.03c1.09%200%202.09.6%202.6%201.55.45-.95%201.4-1.55%202.44-1.56%201.62%200%202.93%201.25%202.9%202.78l.03%205.2c0%20.13-.1.23-.23.23h-1.41c-.13%200-.23-.11-.23-.23v-4.59c0-.98-.74-1.71-1.62-1.71-.8%200-1.46.7-1.59%201.62l.01%204.68c0%20.13-.11.23-.23.23h-1.41c-.13%200-.23-.11-.23-.23v-4.59c0-.98-.74-1.71-1.62-1.71-.85%200-1.54.79-1.6%201.8v4.5c0%20.13-.1.23-.23.23zm53.615%200h-1.61c-.04%200-.08-.01-.12-.03-.09-.06-.13-.19-.06-.28l2.43-3.71-2.39-3.65a.213.213%200%2001-.03-.12c0-.12.09-.21.21-.21h1.61c.13%200%20.24.06.3.17l1.41%202.37%201.4-2.37a.34.34%200%2001.3-.17h1.6c.04%200%20.08.01.12.03.09.06.13.19.06.28l-2.37%203.65%202.43%203.7c0%20.05.01.09.01.13%200%20.12-.09.21-.21.21h-1.61c-.13%200-.24-.06-.3-.17l-1.44-2.42-1.44%202.42a.34.34%200%2001-.3.17zm-7.12-1.49c-1.33%200-2.42-1.12-2.42-2.51%200-1.39%201.08-2.52%202.42-2.52%201.33%200%202.42%201.12%202.42%202.51%200%201.39-1.08%202.51-2.42%202.52zm-19.865%200c-1.32%200-2.39-1.11-2.42-2.48v-.07c.02-1.38%201.09-2.49%202.4-2.49%201.32%200%202.41%201.12%202.41%202.51%200%201.39-1.07%202.52-2.39%202.53zm-8.11-2.48c-.01%201.37-1.09%202.47-2.41%202.47s-2.42-1.12-2.42-2.51c0-1.39%201.08-2.52%202.4-2.52%201.33%200%202.39%201.11%202.41%202.48l.02.08zm18.12%202.47c-1.32%200-2.39-1.11-2.41-2.48v-.06c.02-1.38%201.09-2.48%202.41-2.48s2.42%201.12%202.42%202.51c0%201.39-1.09%202.51-2.42%202.51z%22%2F%3E%3C%2Fdefs%3E%3Cmask%20id%3D%22clip%22%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22white%22%2F%3E%3Cuse%20xlink%3Ahref%3D%22%23logo%22%2F%3E%3Cuse%20xlink%3Ahref%3D%22%23text%22%2F%3E%3C%2Fmask%3E%3Cg%20id%3D%22outline%22%20opacity%3D%220.3%22%20stroke%3D%22%23000%22%20stroke-width%3D%223%22%3E%3Ccircle%20mask%3D%22url(%23clip)%22%20cx%3D%2211.5%22%20cy%3D%2211.5%22%20r%3D%229.25%22%2F%3E%3Cuse%20xlink%3Ahref%3D%22%23text%22%20mask%3D%22url(%23clip)%22%2F%3E%3C%2Fg%3E%3Cg%20id%3D%22fill%22%20opacity%3D%220.9%22%20fill%3D%22%23fff%22%3E%3Cuse%20xlink%3Ahref%3D%22%23logo%22%2F%3E%3Cuse%20xlink%3Ahref%3D%22%23text%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")}
.logo-mapbox a.mapboxgl-ctrl-logo { margin: 0; }
.fundo-mapa .mapboxgl-ctrl-logo { pointer-events: auto; }

/* 4. A atribuição com os links: cada crédito inteiro numa linha; hover só na cor, pressão no pointer-down, foco à vista. */
.atribuicao a, .esp-credito a { color: inherit; text-decoration: none; border-radius: 2px; transition: color var(--ds-dur-rapida) var(--ds-curva); }
.atribuicao a:hover, .esp-credito a:hover { color: var(--ds-cor-texto); }
.atribuicao a:active, .esp-credito a:active { color: var(--ds-cor-texto-2); transition-duration: 0ms; }
.atribuicao a:focus-visible, .esp-credito a:focus-visible { outline: 2px solid color-mix(in srgb, var(--ds-cor-texto) 72%, transparent); outline-offset: 2px; }

/* 5. O logotipo do mapa vivo só acende quando o mapa termina de esmaecer (antes disso o contêiner é uma camada própria e
   ele ficaria por baixo dos véus da página, mudando de brilho de uma vez no fim). Até lá vale o logotipo da reserva, no
   mesmo lugar; os dois trocam sem se ver. */
html[data-motor='mapbox'] .fundo-mapa .mapboxgl-ctrl-logo { opacity: 0; }
html[data-motor='mapbox'][data-mapa-vivo] .fundo-mapa .mapboxgl-ctrl-logo { opacity: 1; transition: opacity 0s linear 720ms; }
@media (prefers-reduced-motion: reduce) { html[data-motor='mapbox'][data-mapa-vivo] .fundo-mapa .mapboxgl-ctrl-logo { transition-delay: 200ms; } }

/* 6. O fecho sobre a capa estática (e o fecho da home sem a cena): o canto é o pé do mapa num quadro do tamanho da seção
   (mapbox.cjs, peFecho): preso ao pé da janela enquanto a capa está à vista, saindo com a borda de baixo da seção. */
.fecho-pe { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; pointer-events: none !important; }
.fecho-pe > .mapa-pe { margin-top: 0; }

/* 7. O pé do mapa (mapbox.cjs, pe; revisão de peça do canto, 05/10, aprovado pela revisora). Regra única: enquanto
   qualquer parte do mapa está na tela, o logotipo e a atribuição estão à vista e recebem clique e foco. O canto mora num
   pé preso à borda do mapa livre de texto, acima do texto da cena, e sai com o fim da seção do mapa:
   - embaixo (.mapa-pe, no fim da seção): preso ao pé da janela;
   - em cima (.mapa-pe.no-alto, no começo da seção): logo abaixo do cabeçalho, nas páginas com a abertura embaixo.
   Mesma composição nos dois: o logotipo à esquerda, a atribuição à direita (em duas linhas no celular). No celular, um
   véu curto de leitura (a cor de fundo da casa indo a transparente, sem tom): cheio atrás do canto, com 28 px de
   transição; o texto da cena que rola some nele antes de chegar ao canto. Cada link tem 24 px de altura de toque (o
   texto continua com 11 px). No computador, o canto fica embaixo à direita, o logotipo na ponta, sem véu (o texto passa
   pela esquerda), salvo onde a página pede (especialista). */
.mapa-pe { --pe-alto: 84px; --pe-fio: 28px; position: sticky; bottom: 0; z-index: 4; height: var(--pe-alto); margin-top: calc(-1 * var(--pe-alto)); pointer-events: none; }
.mapa-pe::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: var(--pe-alto); pointer-events: none;
  background: linear-gradient(0deg, var(--ds-cor-fundo) 0, var(--ds-cor-fundo) calc(100% - var(--pe-fio)), color-mix(in srgb, var(--ds-cor-fundo) 0%, transparent) 100%); }
.mapa-pe-canto { position: absolute; left: 16px; right: 16px; bottom: 4px; display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; pointer-events: none; }
.mapa-pe .logo-mapbox { position: relative; z-index: auto; flex: none; display: flex; align-items: center; height: 24px; pointer-events: auto; }
.mapa-pe .logo-mapbox a.mapboxgl-ctrl-logo { border-radius: 2px; }
.mapa-pe .logo-mapbox a.mapboxgl-ctrl-logo:focus-visible { outline: 2px solid color-mix(in srgb, var(--ds-cor-texto) 72%, transparent); outline-offset: 2px; }
.mapa-pe .atribuicao { position: static; margin: 0; max-width: 272px; text-align: right; font-size: 11px; line-height: 24px; color: var(--ds-cor-texto-2); text-shadow: none; opacity: 1; pointer-events: auto; }
.mapa-pe .atribuicao a { display: inline-block; line-height: 24px; }
/* em cima: o véu espelhado sobe por trás do cabeçalho até a borda da janela (sem faixa solta no meio da foto) */
.mapa-pe.no-alto { bottom: auto; top: var(--lp-topo, 88px); margin-top: 0; margin-bottom: calc(-1 * var(--pe-alto)); }
.mapa-pe.no-alto::before { bottom: auto; top: calc(-1 * var(--lp-topo, 88px)); height: calc(var(--lp-topo, 88px) + var(--pe-alto));
  background: linear-gradient(180deg, var(--ds-cor-fundo) 0, var(--ds-cor-fundo) calc(100% - var(--pe-fio)), color-mix(in srgb, var(--ds-cor-fundo) 0%, transparent) 100%); }
.mapa-pe.no-alto .mapa-pe-canto { bottom: auto; top: 4px; align-items: flex-start; }
@media (min-width: 761px) {
  .mapa-pe::before { display: none; }
  .mapa-pe-canto { left: auto; right: var(--lp-borda-direita, 32px); bottom: 4px; flex-direction: row-reverse; justify-content: flex-start; align-items: center; gap: 10px; }
  .mapa-pe .atribuicao { max-width: none; white-space: nowrap; }
  .mapa-pe.no-alto { top: calc(100vh - var(--pe-alto)); }
  .mapa-pe.no-alto .mapa-pe-canto { top: auto; bottom: 4px; align-items: center; }
  /* .reforco: onde o canto passa sobre o satélite claro sem os véus da página (o especialista, a home na subida), um
     reforço só atrás dele, longe do texto: a cor de fundo da casa indo a transparente. Medido no especialista: de 4,38:1
     (o reforço de 72% preso à janela) para 5,46:1 ou mais. */
  .mapa-pe.reforco::before { display: block; left: auto; right: 0; width: 620px; height: 120px;
    background: radial-gradient(ellipse 100% 100% at 100% 100%, color-mix(in srgb, var(--ds-cor-fundo) 86%, transparent) 0%,
      color-mix(in srgb, var(--ds-cor-fundo) 76%, transparent) 50%, color-mix(in srgb, var(--ds-cor-fundo) 0%, transparent) 100%); }
}
/* onde há pé, o logotipo do SDK (dentro do mapa, sob os véus da página) não aparece: vale o do pé */
body:has(.mapa-pe) .fundo-mapa .mapboxgl-ctrl-bottom-left { display: none !important; }
/* nos palcos presos, o pé sai com o palco, no mesmo trecho e na linha do tempo do próprio palco; ele fica inteiro até o
   mapa estar a 30% e só então esmaece (enquanto o mapa se vê, o canto se vê) */
.rol { timeline-scope: --palco-rol; }
.rol-palco { view-timeline-name: --palco-rol; }
@keyframes pe-sai { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) { .rol > .mapa-pe { animation: pe-sai linear both; animation-timeline: --palco-rol; animation-range: exit 0% exit 40%; } }
}

/* 8. Sem capa (mapbox.cjs, semCapa: a capa de cover no computador de aparelho forte, ou ?capa=0 na revisão): a <img> vazia
   não aparece; fica o fundo escuro da casa e o mapa entra completo, num esmaecer único. */
html[data-capa-fora] .mapa-reserva picture, html[data-capa-fora] .mapa-reserva img { visibility: hidden; }