/* Telão Rio Rural — identidade rural: papel creme, verde-mata, terracota e mostarda (referência: docs/referencia-visual.webp).
   Tokens escalados para 1–4K (html font-size). Nada de brilho, cantoneiras de HUD nem fonte monoespaçada. */
@font-face { font-family: "Montserrat"; font-weight: 500; font-style: normal; font-display: swap; src: url(vendor/fonts/montserrat-500.woff2) format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 600; font-style: normal; font-display: swap; src: url(vendor/fonts/montserrat-600.woff2) format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 800; font-style: normal; font-display: swap; src: url(vendor/fonts/montserrat-800.woff2) format("woff2"); }
:root {
  --papel: #fbf5e6; --papel-2: #f1e6c8; --papel-3: #e4d3a8;
  --tinta: #3a2a1a; --tinta-suave: #6b5440;
  --verde: #1f4d36; --verde-2: #2e6b3b; --terracota: #b4532a; --mostarda: #d9a21b;
  --borda: #7a5a38; --linha: #d4c096;
  --sombra: 0 .3rem 1rem rgba(74, 52, 26, .30);
  --acento: var(--verde-2); --realce: var(--terracota);
  --fonte: "Montserrat", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --rodape-h: 3.2rem; /* medido em medirHud() e reescrito em px */
}
html { font-size: clamp(16px, 1.5vw, 2vh); }
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: #e9dcbc; color: var(--tinta); font-family: var(--fonte); font-weight: 500;
  overflow: hidden; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
}
button { font-family: var(--fonte); }
#tela { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
#tela:active { cursor: grabbing; }

/* tudo do HUD deixa o gesto passar para o mapa */
.hud, #rotulos, #marcas, #controles { pointer-events: none; }
.olho { font-size: 1.05rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--terracota); white-space: nowrap; }
.painel { /* página de papel: borda de tinta marrom e filete interno, como carimbo de passaporte */
  position: absolute; background: rgba(251, 245, 230, .97); border: .16rem solid var(--borda); border-radius: .7rem;
  box-shadow: var(--sombra), inset 0 0 0 .3rem var(--papel), inset 0 0 0 .38rem var(--linha);
}

#titulo { position: absolute; left: 0; top: 0; right: 30rem; padding: 1.1rem 2rem 1rem; background: linear-gradient(180deg, rgba(241, 230, 200, .96), rgba(241, 230, 200, .84) 72%, rgba(241, 230, 200, 0)); }
#titulo h1 { font-size: 2.7rem; line-height: 1; font-weight: 800; letter-spacing: -.01em; text-transform: uppercase; margin-top: .3rem; }
#titulo h1 .rio { color: var(--verde); }
#titulo h1 .rural { color: var(--terracota); }
#titulo .lema { display: flex; align-items: center; gap: .9rem; margin-top: .35rem; font-size: 1.35rem; font-weight: 800; color: var(--verde-2); }
#titulo .pico { width: 7rem; height: 1.5rem; flex: none; overflow: visible; }
#subtitulo, #leitura { font-size: 1.1rem; font-weight: 600; color: var(--tinta-suave); margin-top: .25rem; }
#leitura { color: var(--tinta); }

/* bússola: rosa dos ventos de papel; o centro é o botão "Voltar ao norte" (também a tecla N) */
#bussola { position: absolute; right: 33rem; bottom: calc(var(--rodape-h) + 1.2rem); display: flex; gap: 1rem; align-items: center; }
.rosa { width: 5.2rem; height: 5.2rem; border-radius: 50%; border: .16rem solid var(--borda); background: radial-gradient(circle, var(--papel) 55%, var(--papel-2)); box-shadow: var(--sombra); position: relative; }
.rosa::before { content: ""; position: absolute; inset: .5rem; border-radius: 50%; border: 1px dashed var(--borda); opacity: .6; }
#norte { display: block; padding: 0; min-width: 48px; min-height: 48px; font: inherit; color: inherit; cursor: pointer; pointer-events: auto; }
#norte::after { content: ""; position: absolute; inset: 1.55rem; border-radius: 50%; border: .16rem solid var(--verde-2); background: var(--papel-2); }
#norte:active::after { background: var(--verde-2); }
#norte:focus-visible { outline: 3px solid var(--terracota); outline-offset: 3px; }
#agulha { position: absolute; inset: 0; display: grid; place-items: start center; padding-top: .15rem; font: 800 1.25rem/1 var(--fonte); color: var(--terracota); will-change: transform; }
.leituras { display: none; } /* telemetria (azimute, inclinação, exagero) é de painel técnico, não de mapa de passeio */

/* cartão */
#cartao { right: 1.6rem; top: 1.4rem; width: 29.5rem; max-height: calc(100% - var(--rodape-h) - 2.4rem); padding: 1.2rem 1.5rem 1.1rem; overflow: hidden; transition: opacity .35s ease; }
#cartao.compacto { padding: .8rem 1.3rem .7rem; }
#cartao.trocando { opacity: .25; }
#cartao h2 { font-size: 2rem; line-height: 1.04; font-weight: 800; margin-top: .25rem; color: var(--verde); white-space: nowrap; }
#cartao.compacto h2 { font-size: 1.8rem; }
.c-total { display: flex; align-items: baseline; gap: .7rem; margin-top: .5rem; }
.c-total b { font: 800 3rem/1 var(--fonte); color: var(--terracota); font-variant-numeric: tabular-nums; }
#cartao.compacto .c-total b { font-size: 2.3rem; }
.c-total span { font-size: 1.15rem; font-weight: 600; color: var(--tinta-suave); }
.c-sub { font-size: 1.05rem; font-weight: 600; color: var(--tinta-suave); margin-top: .3rem; line-height: 1.25; }
.c-abas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .35rem; margin-top: .8rem; }
#cartao.compacto .c-abas { margin-top: .4rem; }
.c-abas button { pointer-events: auto; min-width: 0; min-height: max(48px, 2.6rem); border: .12rem solid var(--linha); border-radius: .5rem; background: var(--papel-2); color: var(--tinta-suave); font: 700 1.05rem var(--fonte); cursor: pointer; }
.c-abas button[aria-selected="true"] { border-color: var(--verde); background: var(--verde); color: var(--papel); }
.c-abas button:focus-visible { outline: 3px solid var(--terracota); outline-offset: 2px; }
.c-nota, .c-semtipo { margin-top: .35rem; font-size: .96rem; line-height: 1.22; color: var(--tinta-suave); }
.c-semtipo { display: flex; justify-content: space-between; gap: .6rem; padding-top: .25rem; border-top: 1px solid var(--linha); }
.c-semtipo b { flex: none; font: 800 1.05rem var(--fonte); color: var(--tinta); }
.c-grupos { list-style: none; display: grid; gap: .12rem; margin-top: .4rem; }
.c-grupos.duas { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: .65rem; row-gap: .04rem; }
.c-grupos li { display: grid; grid-template-columns: 1.4rem 14.6rem 1fr 5.4rem; align-items: center; gap: .5rem; font-size: 1.05rem; line-height: 1.22; pointer-events: auto; }
.c-grupos li:not(.zero) { cursor: pointer; }
.c-grupos li.ativo { outline: .14rem solid var(--terracota); outline-offset: 2px; border-radius: .3rem; background: rgba(180, 83, 42, .12); }
.c-grupos.duas li { grid-template-columns: 1.25rem minmax(0, 1fr) auto; gap: .35rem; min-width: 0; font-size: .96rem; }
.c-grupos.duas .n { font-size: .96rem; }
.c-grupos.duas svg { width: 1.1rem; height: 1.1rem; }
.lad.resto .disco span { font: 800 1.05rem/1 var(--fonte); color: var(--tinta); }
.c-grupos li.zero { color: var(--tinta-suave); }
.c-grupos li.zero .n { font: 500 1.05rem var(--fonte); color: var(--tinta-suave); white-space: nowrap; }
.c-grupos svg { width: 1.25rem; height: 1.25rem; display: block; overflow: visible; }
.c-grupos .nome { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--tinta); font-weight: 600; }
.c-grupos .trilho { height: .55rem; background: var(--papel-3); border-radius: .3rem; position: relative; overflow: hidden; }
.c-grupos .trilho i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: .3rem; transition: width .9s cubic-bezier(.2, .8, .2, 1); }
.c-grupos .n { text-align: right; font: 800 1.05rem var(--fonte); font-variant-numeric: tabular-nums; }
.c-secao { margin-top: .9rem; font-size: .95rem; letter-spacing: .08em; }
#cartao.compacto .c-secao { margin-top: .5rem; }
.c-barra { display: flex; height: .9rem; margin-top: .5rem; overflow: hidden; border: .1rem solid var(--borda); border-radius: .45rem; }
.c-barra i { display: block; height: 100%; }
.c-cob { list-style: none; display: grid; gap: .05rem; margin-top: .4rem; font-size: 1.05rem; line-height: 1.22; font-weight: 600; }
.c-cob li { display: flex; align-items: center; gap: .45rem; white-space: nowrap; overflow: hidden; }
.c-cob li i { width: .8rem; height: .8rem; border-radius: 50%; flex: none; border: 1px solid rgba(58, 42, 26, .35); }
.c-cob li b { font: 800 1.05rem var(--fonte); margin-left: auto; padding-left: .4rem; }
.c-ressalva { margin-top: .8rem; font-size: 1.05rem; line-height: 1.3; font-weight: 600; color: var(--tinta-suave); border-left: .2rem solid var(--terracota); padding-left: .8rem; }
#cartao.compacto .c-ressalva { margin-top: .4rem; }
#c-olho.subir { pointer-events: auto; cursor: pointer; text-decoration: underline; text-underline-offset: .25em; }
#c-olho.subir::after { content: " ↑ ver a região"; letter-spacing: .08em; color: var(--tinta-suave); }

/* rótulos dos municípios (DOM: nítidos em 4K) */
.rot {
  position: absolute; left: 0; top: 0; padding: .05rem .7rem .1rem; white-space: nowrap;
  font-size: 1.5rem; font-weight: 800; color: var(--tinta);
  background: rgba(251, 245, 230, .92); border: .12rem solid var(--borda); border-radius: 2rem; /* pílula de papel: o nome nunca some sobre o relevo */
  opacity: 0; transition: opacity .3s ease; will-change: transform; pointer-events: auto; cursor: pointer;
}
.rot.vis { opacity: 1; }
.rot.sel { font-size: 1.9rem; color: var(--verde); border: .16rem solid var(--terracota); background: var(--papel); box-shadow: var(--sombra); }
.rot.reg { border-color: var(--terracota); }
.rot.sel::after { /* o leque do selecionado mora no ponto de rótulo: o aviso aparece na tela */
  content: "posição aproximada"; position: absolute; left: 50%; top: 100%; transform: translateX(-50%); margin-top: .3rem;
  padding: .05rem .7rem; font-size: 1.05rem; font-weight: 600; letter-spacing: .02em; color: var(--terracota);
  background: var(--papel); border: .12rem dashed var(--terracota); border-radius: 1rem; white-space: nowrap;
}

/* marcações: etiqueta por município (longe) e ladrilhos por rota (perto). Sempre por cima do relevo. */
#marcas { position: absolute; inset: 0; overflow: hidden; }
.marca { position: absolute; left: 0; top: 0; width: 0; height: 0; opacity: 0; transition: opacity .25s ease; will-change: transform; } /* origem = pé (ponto de rótulo) */
.marca.vis { opacity: 1; }
.marca .etq { /* número grande + nome do município; --ex/--ey vêm da posição escolhida (acima, ao lado, abaixo) */
  position: absolute; left: 0; top: 0; width: max-content; transform: translate(var(--ex, -50%), var(--ey, -100%));
  display: flex; flex-direction: column; align-items: center; gap: .14rem;
  padding: .3rem .75rem .36rem; border-radius: .8rem; background: var(--papel);
  border: .15rem solid var(--borda); box-shadow: var(--sombra); cursor: pointer;
}
.marca .n { font: 800 calc(1.5rem * var(--k, 1))/1 var(--fonte); font-variant-numeric: tabular-nums; color: var(--verde); }
.marca .nm { display: block; max-width: 11rem; font-size: 1.1rem; font-weight: 600; line-height: 1.1; text-align: center; color: var(--tinta); text-wrap: balance; }
.marca .fio { position: absolute; left: 0; top: -1px; width: var(--fl, 2.4rem); height: 2px; transform-origin: 0 50%; transform: rotate(var(--fa, -1.5708rad)); background: linear-gradient(90deg, rgba(122, 90, 56, .3), var(--borda)); }
.marca .pe { position: absolute; left: -.7rem; top: -.7rem; width: 1.4rem; height: 1.4rem; border-radius: 50%; border: .18rem dashed var(--terracota); background: rgba(251, 245, 230, .7); } /* tracejado: posição aproximada */
/* fora da região selecionada: a etiqueta esmaece, sem perder a leitura */
.marca.fora .etq { border-color: var(--linha); box-shadow: none; background: rgba(251, 245, 230, .85); }
.marca.fora .n { color: var(--tinta-suave); }
.marca.fora .nm { color: var(--tinta-suave); }
.marca.fora .fio, .marca.fora .pe { opacity: .45; }
.leque { position: absolute; left: 0; top: 0; width: 0; height: 0; opacity: 0; transition: opacity .3s ease; will-change: transform; }
.leque.vis { opacity: 1; }
.leque .fio-l { position: absolute; left: 0; top: -1px; height: 2px; transform-origin: 0 50%; background: linear-gradient(90deg, rgba(122, 90, 56, .2), var(--c)); }
.leque .cubo { position: absolute; left: -1rem; top: -1rem; width: 2rem; height: 2rem; border-radius: 50%; border: .18rem dashed var(--terracota); background: rgba(251, 245, 230, .8); } /* posição aproximada */
.lad {
  position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: .5rem; white-space: nowrap;
  padding: .22rem .85rem .22rem .22rem; border-radius: 2.2rem; background: var(--papel);
  border: .16rem solid var(--c); box-shadow: var(--sombra); cursor: pointer;
}
.lad .disco { width: 2.5rem; height: 2.5rem; border-radius: 50%; display: grid; place-items: center; background: var(--papel-2); border: .12rem solid var(--c); }
.lad svg { width: 1.6rem; height: 1.6rem; display: block; overflow: visible; }
.lad .disco + span { display: flex; flex-direction: column; gap: .12rem; }
.lad b { font: 800 1.6rem/1 var(--fonte); font-variant-numeric: tabular-nums; color: var(--tinta); }
/* ladrilho tocável: seta de "abrir" na cor do item */
.lad::after { content: ""; flex: none; width: .55rem; height: .55rem; margin: 0 .15rem 0 .1rem; border-right: .16rem solid var(--c); border-bottom: .16rem solid var(--c); transform: rotate(-45deg); }
.lad small { font-size: .85rem; font-weight: 600; line-height: 1; color: var(--tinta-suave); } /* 1ª palavra do nome do grupo (registros.json) */

#convite {
  position: absolute; left: 50%; bottom: 15rem; transform: translateX(-60%); padding: .7rem 2rem; border-radius: 3rem;
  font-size: 1.5rem; font-weight: 800; background: var(--papel); border: .16rem solid var(--terracota); color: var(--tinta);
  box-shadow: var(--sombra); animation: pulso 2.4s ease-in-out infinite; white-space: nowrap;
}
@keyframes pulso { 50% { box-shadow: 0 .3rem 1.6rem rgba(180, 83, 42, .5); } }

#controles { position: absolute; right: 39.5rem; bottom: calc(var(--rodape-h) + 1.2rem); display: flex; gap: .8rem; } /* sobre o mar, ao lado da bússola: não cobre a costa oeste */
#pausa, #ver-estado {
  pointer-events: auto; min-width: 11rem; min-height: 3.6rem; padding: .6rem 1.1rem;
  font: 800 1.05rem var(--fonte); color: var(--verde); background: var(--papel);
  border: .16rem solid var(--verde-2); border-radius: 3rem; box-shadow: var(--sombra); cursor: pointer;
}
#pausa[aria-pressed="true"] { background: var(--verde); color: var(--papel); }
#pausa:focus-visible, #ver-estado:focus-visible { outline: 3px solid var(--terracota); outline-offset: 3px; }

/* rodapé: uma linha só, sempre visível; fontes completas no painel ⓘ */
#rodape { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 1.5rem; padding: .3rem 1.6rem .3rem 2rem; background: rgba(241, 230, 200, .97); border-top: .16rem solid var(--borda); font-size: .9rem; line-height: 1.2; font-weight: 600; color: var(--tinta-suave); }
#r-base { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#r-base b { color: var(--terracota); letter-spacing: .06em; text-transform: uppercase; }
#info, #fechar, #i-fechar, #f-fechar, #tela-cheia {
  pointer-events: auto; flex: none; min-height: max(48px, 2.5rem); min-width: max(48px, 7.5rem); padding: 0 1.3rem;
  font: 800 .95rem var(--fonte); color: var(--verde); background: var(--papel);
  border: .14rem solid var(--verde-2); border-radius: 3rem; cursor: pointer;
}
#info[aria-expanded="true"] { background: var(--verde); color: var(--papel); }
#tela-cheia { min-width: max(48px, 3.2rem); padding: 0; display: grid; place-items: center; }
#tela-cheia svg { width: 1.6rem; height: 1.6rem; }
#tela-cheia:focus-visible, #info:focus-visible, #fechar:focus-visible, #i-fechar:focus-visible, #f-fechar:focus-visible, #i-lista button:focus-visible { outline: 3px solid var(--terracota); outline-offset: 3px; }
#fontes { pointer-events: auto; right: 1.6rem; bottom: calc(var(--rodape-h) + .8rem); width: 50rem; padding: 1.2rem 1.6rem; z-index: 5; }
#f-lista { display: grid; grid-template-columns: 11rem 1fr; gap: .7rem 1.2rem; margin-top: .8rem; font-size: .9rem; line-height: 1.35; }
#f-lista dt { font-weight: 800; color: var(--terracota); }
#f-lista dd { color: var(--tinta); overflow-wrap: anywhere; }
#fechar { display: block; margin: 1rem 0 0 auto; }

/* painel "o que tem aqui" (abrirItem): à esquerda; left e width medidos em medirHud() */
#item { pointer-events: auto; left: 2rem; top: calc(var(--titulo-b, 10rem) + .6rem); width: 34rem; max-height: calc(100% - var(--titulo-b, 10rem) - var(--rodape-h) - 7.6rem);
  display: flex; flex-direction: column; padding: 1rem 1.4rem 1rem; z-index: 5; }
#item .i-topo { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
#item .i-topo .olho { overflow: hidden; text-overflow: ellipsis; }
#i-nome { display: flex; align-items: center; gap: .7rem; font-size: 1.6rem; font-weight: 800; line-height: 1.15; margin-top: .4rem; color: var(--verde); }
#i-glifo svg { width: 2.1rem; height: 2.1rem; display: block; overflow: visible; }
#i-glifo:empty { display: none; }
#i-conta { font-size: 1.3rem; font-weight: 800; margin-top: .4rem; }
#i-def, #i-nota, #i-pos, #i-mais { font-size: 1.1rem; line-height: 1.3; font-weight: 600; color: var(--tinta); margin-top: .3rem; }
#i-nota, #i-pos { color: var(--tinta-suave); }
#i-lista { list-style: none; margin-top: .6rem; border-top: .1rem solid var(--linha); overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; min-height: 0; flex: 0 1 auto;  }
#i-lista li { padding: .45rem 0; border-bottom: .1rem solid var(--linha); font-size: 1.1rem; line-height: 1.25; }
#i-lista li > b { display: block; font-weight: 800; }
#i-lista .inst { display: block; color: var(--tinta-suave); }
#i-lista .pos { display: block; font-size: 1rem; font-weight: 600; color: var(--tinta-suave); }
#i-lista .pos.exato { color: var(--verde-2); }
#i-lista button { pointer-events: auto; width: 100%; min-height: max(48px, 3rem); display: flex; align-items: center; gap: .7rem; padding: .3rem .6rem; font: 700 1.15rem var(--fonte); color: var(--tinta); text-align: left; background: var(--papel-2); border: .1rem solid var(--linha); border-radius: .5rem; cursor: pointer; }
#i-lista button svg { width: 1.7rem; height: 1.7rem; flex: none; overflow: visible; }
#i-lista button span { flex: 1; }
#i-lista button b { font: 800 1.3rem var(--fonte); }
#i-mais { font-weight: 800; }

#aviso { position: fixed; inset: 0; display: grid; place-items: center; background: rgba(241, 230, 200, .96); color: var(--tinta); z-index: 10; }
#aviso p { font-size: 2rem; font-weight: 800; max-width: 60rem; text-align: center; line-height: 1.3; }
[hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  #convite { animation: none; }
  .rot, .marca, .leque, #cartao, .c-grupos .trilho i { transition: none; }
}

/* ficha do atrativo = página de passaporte: à esquerda, no lugar do painel "o que tem aqui" (left e width medidos em medirHud()) */
#ficha { pointer-events: auto; left: 2rem; top: calc(var(--titulo-b, 10rem) + .6rem); width: 40rem; max-height: calc(100% - var(--titulo-b, 10rem) - var(--rodape-h) - 7.6rem);
  overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; 
  padding: 1rem 1.4rem 1.2rem; z-index: 6; }
#ficha .i-topo { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
#ficha .i-topo .olho { overflow: hidden; text-overflow: ellipsis; }
#f-nome { font-size: 1.9rem; font-weight: 800; line-height: 1.1; margin-top: .4rem; color: var(--verde); }
#f-cabeca { display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: start; }
#f-selos { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; }
.selo { padding: .2rem .8rem; border-radius: 2rem; font-size: 1.1rem; font-weight: 700; border: .1rem solid var(--linha); background: var(--papel-2); color: var(--tinta-suave); }
.selo.sim { color: var(--verde); border-color: var(--verde-2); background: rgba(46, 107, 59, .12); }
#f-corpo { display: grid; grid-template-columns: 1fr auto; gap: 1.2rem; align-items: start; margin-top: .8rem; }
#f-dados { display: grid; grid-template-columns: auto 1fr; gap: .35rem .8rem; font-size: 1.1rem; line-height: 1.28; }
#f-dados dt { color: var(--tinta-suave); font-weight: 800; }
#f-dados dd { color: var(--tinta); font-weight: 600; overflow-wrap: anywhere; }
#f-carimbo { /* carimbo da rota: borda dupla na cor da rota, levemente inclinado, como os do passaporte */
  display: grid; justify-items: center; gap: .1rem; width: 9.6rem; padding: .45rem .5rem .4rem; color: var(--c, var(--verde)); margin-top: .2rem;
  border: .2rem double var(--c, var(--verde)); border-radius: .5rem; transform: rotate(3deg); background: rgba(251, 245, 230, .6);
}
#f-carimbo svg { width: 2rem; height: 2rem; overflow: visible; }
#f-carimbo b { font-size: .86rem; font-weight: 800; line-height: 1.1; text-transform: uppercase; text-align: center; letter-spacing: .02em; }
#f-carimbo small { font-size: .62rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; opacity: .8; }
#f-qr-bloco { margin: 0; display: flex; flex-direction: column; align-items: center; gap: .45rem; }
#f-qr { width: 11rem; height: 11rem; padding: .5rem; background: #fff; border: .12rem solid var(--borda); border-radius: .4rem; }
#f-qr svg { width: 100%; height: 100%; display: block; }
#f-qr-bloco figcaption { max-width: 11rem; font-size: 1rem; line-height: 1.2; font-weight: 600; text-align: center; color: var(--tinta-suave); }
#f-precisao { margin-top: .7rem; font-size: 1.1rem; line-height: 1.3; font-weight: 600; color: var(--terracota); }
#f-descricao { margin-top: .8rem; padding-top: .7rem; border-top: .1rem solid var(--linha); font-size: 1.1rem; line-height: 1.45; font-weight: 500; color: var(--tinta); white-space: pre-line; }
@media (max-width: 900px) { /* celular: o mapa ocupa a tela; cartão, lista e ficha sobem da base como folhas */
  html { font-size: 15px; }
  #titulo { right: 0; padding: .5rem .9rem .3rem; }
  #titulo .olho, #titulo .lema, #subtitulo, #leitura { display: none; }
  #titulo h1 { font-size: 1.7rem; margin-top: 0; }
  #cartao, #ficha, #item { left: .5rem !important; right: .5rem; width: auto !important; top: auto; bottom: calc(var(--rodape-h) + .5rem); }
  #cartao { max-height: 44vh; max-height: 44dvh; overflow-y: auto; padding: .5rem .9rem .5rem; }
  #cartao .olho { white-space: normal; font-size: .8rem; letter-spacing: .08em; }
  #c-olho.subir::after { display: block; margin: 0; }
  #cartao h2 { display: inline; margin: 0; }
  #cartao .c-total { margin-top: .2rem; }
  #cartao .c-total b { font-size: 1.7rem; }
  #cartao .c-total span { font-size: .95rem; }
  #c-grupos-titulo, #c-nota { display: none; }
  .c-abas { margin-top: .4rem; }
  .c-abas button { min-height: 40px; font-size: .9rem; }
  .c-grupos li { font-size: .95rem; line-height: 1.15; }
  #ficha, #item { max-height: 72vh; max-height: 72dvh; }
  #cartao h2 { font-size: 1.5rem; white-space: normal; }
  #ficha, #item { overflow-y: auto; z-index: 6; }
  body:has(#ficha:not([hidden])) #cartao, body:has(#item:not([hidden])) #cartao { display: none; }
  #f-corpo { grid-template-columns: 1fr; justify-items: start; }
  #f-fechar, #i-fechar { position: sticky; top: 0; }
  #fechar { position: sticky; bottom: 0; }
  #bussola { right: .6rem; top: 2.8rem; bottom: auto; }
  .rosa { width: 3.6rem; height: 3.6rem; }
  #agulha { font-size: 1rem; }
  #controles { left: .6rem; right: 5rem; top: 2.8rem; bottom: auto; flex-wrap: nowrap; gap: .4rem; }
  #controles > * { flex: 1 1 0; min-width: 0; text-align: center; line-height: 1.1; }
  #titulo { padding-bottom: 3.6rem; }
  .c-grupos li { grid-template-columns: 1.4rem minmax(0, 1fr) 3.2rem; }
  .c-grupos .trilho { display: none; }
  #pausa { display: none; }
  #ver-estado { min-width: 0; min-height: 44px; padding: .3rem .6rem; font-size: .8rem; }
  #rodape { gap: .5rem; padding: .3rem .6rem; justify-content: space-between; }
  #r-base { display: none; }
  #info { min-width: 44px; padding: 0 .8rem; font-size: .9rem; white-space: nowrap; }
  #tela-cheia { display: none; }
  #idiomas button { min-width: 44px; padding: 0 .2rem; font-size: .9rem; }
  #fontes { left: .5rem; right: .5rem; width: auto; max-height: 72vh; overflow-y: auto; z-index: 7; }
  #f-lista { grid-template-columns: 1fr; gap: .2rem; }
  #f-lista dd { margin-bottom: .6rem; }
  #convite { left: .5rem; right: .5rem; width: auto; font-size: .9rem; }
}

#f-abrir { display: none; }
/* barras de rolagem grossas e fáceis de pegar (toque e mouse) */
#i-lista, #ficha, #item, #cartao, #fontes { scrollbar-width: auto; }
#i-lista::-webkit-scrollbar, #ficha::-webkit-scrollbar, #item::-webkit-scrollbar, #cartao::-webkit-scrollbar, #fontes::-webkit-scrollbar { width: 1.1rem; }
#i-lista::-webkit-scrollbar-track, #ficha::-webkit-scrollbar-track, #item::-webkit-scrollbar-track, #cartao::-webkit-scrollbar-track, #fontes::-webkit-scrollbar-track { background: var(--papel-2); border-radius: .6rem; }
#i-lista::-webkit-scrollbar-thumb, #ficha::-webkit-scrollbar-thumb, #item::-webkit-scrollbar-thumb, #cartao::-webkit-scrollbar-thumb, #fontes::-webkit-scrollbar-thumb { background: var(--borda); border: .2rem solid var(--papel-2); border-radius: .6rem; min-height: 3rem; }
/* idiomas */
#idiomas { display: flex; gap: .2rem; pointer-events: auto; flex: none; }
#idiomas button { min-width: max(44px, 2.8rem); min-height: max(44px, 2.5rem); border: .12rem solid var(--linha); border-radius: .5rem; background: var(--papel-2); color: var(--tinta-suave); font: 800 1rem var(--fonte); cursor: pointer; }
#idiomas button[aria-pressed="true"] { border-color: var(--verde); background: var(--verde); color: var(--papel); }
#idiomas button:focus-visible { outline: 3px solid var(--terracota); outline-offset: 2px; }
html[lang^="en"] #c-olho.subir::after { content: " ↑ see the region"; }
html[lang^="fr"] #c-olho.subir::after { content: " ↑ voir la région"; }
html[lang^="de"] #c-olho.subir::after { content: " ↑ Region ansehen"; }
html[lang^="en"] .rot.sel::after { content: "approximate position"; }
html[lang^="fr"] .rot.sel::after { content: "position approximative"; }
html[lang^="de"] .rot.sel::after { content: "ungefähre Position"; }

/* "Ver em lista" e modo lista (sem WebGL) */
#ver-lista { pointer-events: auto; display: grid; place-items: center; min-height: 3.6rem; padding: .6rem 1.1rem; font: 800 1.05rem var(--fonte); color: var(--verde); background: var(--papel); border: .16rem solid var(--verde-2); border-radius: 3rem; box-shadow: var(--sombra); text-decoration: none; }
body.modo-lista { overflow: auto; background: var(--papel-2); }
body.modo-lista :is(#tela, #marcas, #rotulos, #titulo, #bussola, #cartao, #item, #ficha, #convite, #controles, #fontes, #aviso, #info, #tela-cheia) { display: none; }
body.modo-lista #rodape { position: fixed; }
#modo-lista { max-width: 56rem; margin: 0 auto; padding: 1rem 1rem 5rem; font-size: 1rem; }
#modo-lista header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
#modo-lista h1 { font-size: 2rem; font-weight: 800; text-transform: uppercase; }
#modo-lista h1 .rio { color: var(--verde); } #modo-lista h1 .rural { color: var(--terracota); }
#modo-lista a { color: var(--verde); font-weight: 800; }
#ml-filtros { display: grid; gap: .5rem; margin-top: .8rem; }
#ml-filtros input, #ml-filtros select { min-height: 44px; padding: .4rem .8rem; font: 600 1rem var(--fonte); color: var(--tinta); background: var(--papel); border: .14rem solid var(--borda); border-radius: .6rem; }
#ml-conta { margin: .8rem 0 .3rem; font-weight: 800; color: var(--tinta-suave); }
#ml-lista { list-style: none; }
#ml-lista li { border-bottom: .1rem solid var(--linha); }
#ml-lista button { display: block; width: 100%; min-height: 48px; padding: .6rem .2rem; text-align: left; background: none; border: 0; font: inherit; color: var(--tinta); cursor: pointer; }
#ml-lista button b { display: block; color: var(--verde); font-weight: 800; }
#ml-lista button span { font-size: .9rem; color: var(--tinta-suave); font-weight: 600; }
#ml-lista .mais { padding: .6rem .2rem; color: var(--tinta-suave); }
#ml-ficha { margin-top: 1rem; padding: 1rem 1.2rem; background: var(--papel); border: .16rem solid var(--borda); border-radius: .7rem; }
#ml-ficha h2 { color: var(--verde); font-size: 1.6rem; margin: .6rem 0 .2rem; }
#ml-ficha dl { display: grid; grid-template-columns: 8rem 1fr; gap: .4rem .8rem; margin: .8rem 0; }
#ml-ficha dt { font-weight: 800; color: var(--terracota); } #ml-ficha dd { overflow-wrap: anywhere; font-weight: 600; }
#ml-ficha .descricao { white-space: pre-line; line-height: 1.5; margin-top: .8rem; padding-top: .8rem; border-top: .1rem solid var(--linha); }
#ml-voltar, #ml-maps { min-height: 44px; padding: .5rem 1.2rem; font: 800 1rem var(--fonte); color: var(--verde); background: var(--papel); border: .14rem solid var(--verde-2); border-radius: 3rem; cursor: pointer; }
#ml-maps { display: inline-block; margin-top: .6rem; text-decoration: none; color: var(--papel); background: var(--verde); }
@media (max-width: 900px) { #ver-lista { min-height: 44px; padding: .3rem .6rem; font-size: .8rem; } }

/* QR é do telão e do impresso: em telas menores que 1500 px o aparelho já está na mão, então vira botão */
@media (max-width: 1499px) {
  #f-qr-bloco { display: none; }
  #f-abrir:not([hidden]) { display: block; margin-top: .8rem; padding: .8rem 1rem; text-align: center; font: 800 1rem var(--fonte); color: var(--papel); background: var(--verde); border-radius: 3rem; text-decoration: none; pointer-events: auto; }
}

/* busca no cartão */
#busca { pointer-events: auto; display: block; width: 100%; min-height: max(44px, 2.6rem); margin-bottom: .6rem; padding: .3rem .9rem; font: 600 1rem var(--fonte); color: var(--tinta); background: var(--papel); border: .14rem solid var(--borda); border-radius: 3rem; }
#busca:focus-visible { outline: 3px solid var(--terracota); outline-offset: 2px; }