/* GUI — CONSOLIDAÇÃO MOBILE: MAPAS, CARROSSÉIS VISUAIS, PLAYER, CALENDÁRIO E CAPA.

   Por último de propósito, como a consolidação anterior: ela veste o que já
   existe e não reescreve as folhas aprovadas. Uma regra daqui que desaparecer
   devolve a tela ao estado homologado anterior — e não a um estado quebrado.

   A direção desta rodada, em uma linha: menos texto explicando a interface,
   mais interface se explicando sozinha. */

/* =====================================================================
   1. CALENDÁRIO — A CÉLULA DO DIA DA VIAGEM (§11)
   ===================================================================== */

/* O NÚMERO NO CANTO. Pequeno, sem círculo, sem badge (§11.2): ele é uma
   contagem lida de relance, e não um alerta. A célula vira contexto de
   posicionamento só para ele — o resto dela continua em fluxo. */
.vg-m-dia { position: relative; }
.vg-m-n {
  position: absolute; top: 2px; right: 4px;
  font-size: .58rem; line-height: 1; font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--acento-escuro);
}
/* Os três pontinhos saíram do código; esta regra impede que um resto de
   marcação antiga volte a desenhá-los. */
.vg-m-pontos { display: none !important; }

/* O dia ESCOLHIDO no seletor da atividade: o acento cheio, o mesmo peso do
   dia marcado nos outros calendários do produto. */
.vg-m-dia.sel { background: var(--acento); border-color: var(--acento); color: #fff; }
.vg-m-dia.sel .vg-m-n, .vg-m-dia.sel .vg-m-dest { color: #fff; opacity: 1; }
.vg-m-dia:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

/* A grade de Minha viagem dentro da folha do calendário. */
.cal-folha .vg-m-semana { margin-top: 6px; }
.cal-folha .vg-m-grade { margin-bottom: 4px; }
.cal-folha .vg-m-fora { opacity: .35; }

/* A legenda de Minha viagem: o número de exemplo tem o mesmo desenho do número
   da célula, e não um quadrado cheio que não existe mais na grade. */
.vg-m-n-ex {
  font-size: .62rem; font-weight: 700; color: var(--acento-escuro);
  font-variant-numeric: tabular-nums; margin-left: 6px;
}

/* =====================================================================
   2. O PLAYER — BARRA EM CIMA, TRANSPORTE EMBAIXO, VELOCIDADE NO ⋮ (§6)
   ===================================================================== */

/* A ORDEM DA ÁRVORE JÁ É A ORDEM DA TELA: barra, tempos, transporte. Nada é
   reordenado por `order:`, que mentiria para o leitor de tela. */
.pa-v2 .pa-meio { margin-top: 0; }
.pa-v2 .pa-barra { height: 36px; }
.pa-v2 .pa-tempos { margin-top: -6px; margin-bottom: 6px; }

/* SEIS POSIÇÕES FIXAS, DISTRIBUÍDAS. Com a vaga reservada para os saltos de
   faixa fora do roteiro, o Play fica sempre no mesmo lugar. */
.pa-v2 .pa-transporte {
  display: flex; align-items: center; justify-content: space-between; gap: 0;
  padding: 0 2px;
}

/* SEM MOLDURAS: o desenho é o controle, como em todo tocador de mídia. O Play
   é o único preenchido, e por isso continua sendo o que o olho acha primeiro. */
.pa-v2 .pa-bt-ativ,
.pa-v2 .pa-bt-salto,
.pa-v2 .pa-bt-menu {
  border: 0; background: transparent; border-radius: 50%; color: var(--tinta);
}
.pa-v2 .pa-bt-ativ { width: 48px; height: 48px; }
.pa-v2 .pa-bt-ativ[disabled] { background: transparent; color: var(--tinta-clara); opacity: .35; }
.pa-v2 .pa-bt-ativ:not([disabled]):active,
.pa-v2 .pa-bt-salto:active,
.pa-v2 .pa-bt-menu:active { background: rgba(123, 79, 176, .12); }

.pa-v2 .pa-vaga { visibility: hidden; pointer-events: none; }

.pa-v2 .pa-bt-salto { width: 46px; height: 46px; }
.pa-salto-ic { position: relative; display: grid; place-items: center; line-height: 0; }
.pa-salto-ic svg { display: block; }
.pa-v2 .pa-bt-salto .pa-salto {
  position: absolute; top: 55%; left: 50%; transform: translate(-50%, -50%);
  font-size: .56rem; font-weight: 750; line-height: 1; color: var(--tinta);
  font-variant-numeric: tabular-nums;
}

.pa-v2 .pa-bt-play { width: 60px; height: 60px; }
.pa-v2 .pa-bt-play .pa-ic { font-size: 1.3rem; }

.pa-v2 .pa-bt-menu { width: 40px; height: 44px; color: var(--tinta-fraca); }
.pa-v2 .pa-bt:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

/* 320px: 262px úteis dentro do cartão. Os botões encolhem juntos e a
   hierarquia continua — Play > faixa > segundos > menu. */
@media (max-width: 359px) {
  .pa-v2 .pa-bt-ativ { width: 42px; height: 44px; }
  .pa-v2 .pa-bt-ativ svg { width: 24px; height: 24px; }
  .pa-v2 .pa-bt-salto { width: 40px; height: 44px; }
  .pa-v2 .pa-salto-ic svg { width: 26px; height: 26px; }
  .pa-v2 .pa-bt-play { width: 54px; height: 54px; }
  .pa-v2 .pa-bt-menu { width: 34px; }
}

/* A FOLHA DO ⋮. Usa `pl-folha`; aqui só o que é dela. */
.pa-menu { z-index: 70; }
.pa-menu[hidden] { display: none; }
.pa-menu-vel { display: grid; gap: 6px; padding: 4px 0 6px; }
.pa-menu-op {
  appearance: none; cursor: pointer; font: inherit; font-size: 1rem;
  min-height: 48px; padding: 0 16px; border-radius: 12px;
  display: flex; align-items: center; justify-content: space-between;
  border: 1px solid var(--linha); background: var(--papel-2); color: var(--tinta);
  font-variant-numeric: tabular-nums;
}
.pa-menu-op.ativo {
  border-color: var(--acento); background: rgba(123, 79, 176, .1);
  color: var(--acento-escuro); font-weight: 700;
}
.pa-menu-check { font-weight: 800; color: var(--acento); }
.pa-menu-op:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

/* =====================================================================
   3. A FICHA — VER ATIVIDADES, LER MAIS / LER MENOS, AÇÕES (§6.4, §7)
   ===================================================================== */

.ad-ver-ativ {
  appearance: none; cursor: pointer; font: inherit;
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; margin: -6px 0 4px; padding: 0 12px 0 4px;
  border: 0; border-radius: 12px; background: transparent;
  color: var(--acento); font-size: .88rem; font-weight: 650;
}
.ad-ver-ativ:active { background: rgba(123, 79, 176, .1); }
.ad-ver-ativ:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

.nt { margin: 8px 0 14px; }
.nt p { margin: 0 0 .8em; font-size: .98rem; line-height: 1.6; color: var(--tinta); }
.nt p:focus { outline: none; }
.nt-resto[hidden] { display: none; }
.nt-bt {
  appearance: none; cursor: pointer; font: inherit;
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px;
  border: 0; background: transparent; color: var(--acento);
  font-size: .95rem; font-weight: 700;
}
.nt-bt[hidden] { display: none; }
.nt-bt:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; border-radius: 6px; }

/* A LINHA DE AÇÕES: ícone em cima, rótulo curto embaixo, largura dividida. */
.ad-acoes {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  gap: 8px; margin: 14px 0 6px;
}
.ad-acoes > .btn-ingresso,
.ad-acoes > .btn-direcao,
.ad-acoes > .btn-ir,
.ad-acoes > .btn-compartilhar {
  appearance: none; cursor: pointer; font: inherit; text-decoration: none;
  width: auto; margin: 0; min-height: 66px; padding: 8px 4px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  border: 1px solid var(--linha); border-radius: 14px;
  background: var(--papel-2); color: var(--acento-escuro);
  font-size: .76rem; font-weight: 650; line-height: 1.15; text-align: center;
  box-shadow: none;
}
.ad-acoes > .btn-ingresso { background: var(--acento); border-color: var(--acento); color: #fff; }
.ad-acoes .ic { font-size: 1.15rem; line-height: 1; display: grid; place-items: center; }
.ad-acoes .ic svg { display: block; }
.ad-acoes .tk-prov { font-size: .62rem; font-weight: 500; opacity: .85; }
.ad-acoes > *:active { filter: brightness(.95); }
.ad-acoes > *:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

.ad-aviso {
  margin: 4px 0 10px; font-size: .8rem; color: var(--tinta-fraca); line-height: 1.4;
  overflow-wrap: anywhere;
}
.ad-aviso[hidden] { display: none; }
.ad-link { user-select: all; -webkit-user-select: all; color: var(--tinta); }

/* Os botões do transporte não encolhem sozinhos: sem isto o `flex-shrink`
   decidia os tamanhos a 320px e o Play caía abaixo dos saltos de faixa. */
.pa-v2 .pa-transporte > * { flex: none; }
/* A HIERARQUIA NÃO SE NEGOCIA NA LARGURA ESTREITA. A primeira versão desta
   regra deu 38px aos saltos de faixa E aos ±15 — mesma largura, e a regressão
   do refinamento final (PLAYER-03) acusou: ajuste fino não pode competir com
   troca de faixa. Em 239px úteis cabem Play 50 > faixa 44 > ±15 36 > menu 28 —
   e a faixa mantém o alvo de 44px que o refinamento final garantiu (PLAYER-01b).
   A ALTURA continua 44px em todos; a largura abaixo de 44 é o preço de seis
   controles numa tela de 320px, dito aqui em vez de escondido. */
@media (max-width: 359px) {
  .pa-v2 { padding-left: 6px; padding-right: 6px; }
  .pa-v2 .pa-bt-ativ { width: 44px; }
  .pa-v2 .pa-bt-salto { width: 36px; }
  .pa-v2 .pa-bt-play { width: 50px; height: 50px; }
  .pa-v2 .pa-bt-menu { width: 28px; }
}
.pa-menu-vel { padding: 12px 16px 16px; }

/* O texto da narração deixa de ser um cartão fechado: é leitura corrida, logo
   abaixo do tocador que a está dizendo. */
.narracao-texto.nt { padding: 0; border: 0; background: transparent; box-shadow: none; }

/* =====================================================================
   4. AS TELAS DE MAPA — MAPA EM CIMA, FAIXA FOTOGRÁFICA EMBAIXO (§3, §4)
   ===================================================================== */

/* O que saiu do código não pode voltar pela folha de estilo. */
.palco .rota-legenda, .palco .mr-arredores, .palco .convite { display: none !important; }

.rota-area { flex: none; width: 100%; }
.fx { padding: 10px 0 12px; }
.fx-lista {
  list-style: none; margin: 0; padding: 0 12px;
  display: flex; gap: 10px; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; scroll-padding: 0 12px;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.fx-lista::-webkit-scrollbar { display: none; }
.fx-item { flex: 0 0 auto; scroll-snap-align: start; }

/* O CARD: fotografia, número, nome. É a gramática de «Lugares do dia» do
   Diário — foto grande, nome curto, reconhecimento de relance. */
.fx-card {
  appearance: none; cursor: pointer; font: inherit; text-align: left;
  width: 132px; padding: 0; border: 0; background: transparent; color: var(--tinta);
  display: flex; flex-direction: column; gap: 6px;
}
.fx-foto {
  position: relative; display: block; width: 132px; height: 92px;
  border-radius: 14px; overflow: hidden; background: var(--papel-2);
  box-shadow: 0 0 0 1px var(--linha);
  transition: box-shadow .15s ease;
}
.fx-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fx-foto.sem-foto {
  display: grid; place-items: center; padding: 10px 10px 10px 36px;
  background: repeating-linear-gradient(135deg, #f3eee3 0 8px, #efe9dc 8px 16px);
}
.fx-falta { font-size: .66rem; line-height: 1.25; color: var(--tinta-clara); text-align: center; }

/* O NÚMERO TEM O DESENHO DO PINO DO MAPA REAL: círculo roxo, contorno branco. */
.fx-n {
  position: absolute; top: 7px; left: 7px;
  min-width: 26px; height: 26px; padding: 0 6px; border-radius: 13px;
  display: grid; place-items: center;
  background: var(--acento); color: #fff; border: 2px solid #fff;
  font-size: .74rem; font-weight: 700; font-variant-numeric: tabular-nums;
  box-shadow: 0 2px 6px rgba(30, 20, 50, .3);
}
.fx-km {
  position: absolute; right: 6px; bottom: 6px; padding: 2px 6px; border-radius: 8px;
  background: rgba(20, 14, 32, .66); color: #fff; font-size: .66rem; font-weight: 650;
  font-variant-numeric: tabular-nums;
}
.fx-nome {
  font-size: .8rem; font-weight: 650; line-height: 1.25; padding: 0 2px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* SELECIONADO: moldura de acento na foto — o mesmo destaque do pino. */
.fx-card.sel .fx-foto { box-shadow: 0 0 0 3px var(--acento); }
.fx-card.sel .fx-nome { color: var(--acento-escuro); }
.fx-card:focus-visible { outline: none; }
.fx-card:focus-visible .fx-foto { box-shadow: 0 0 0 3px var(--acento), 0 0 0 5px #fff; }

@media (max-width: 359px) {
  .fx-card, .fx-foto { width: 118px; }
  .fx-foto { height: 82px; }
}

/* O PINO SELECIONADO no mapa real cresce e ganha anel — a mesma cor do card.
   CRESCE POR TAMANHO, E NÃO POR `transform`: o Mapbox posiciona o marcador com
   `transform` inline, e um `scale` aqui seria anulado por ele (medido). O
   marcador é ancorado no centro, então crescer não o tira do lugar. */
.mr-pino.sel {
  width: 38px; height: 38px; font-size: .92rem; z-index: 3;
  background: var(--acento-escuro);
  box-shadow: 0 0 0 4px rgba(123, 79, 176, .38), 0 3px 10px rgba(30, 20, 50, .45);
}

/* A ÁREA DO MAPA DO GUI É INVISÍVEL EM TODOS OS ESTADOS (refino
   player/Guides/mapa, §4). Ela ganhava um véu roxo enquanto selecionada — e o
   véu desenhava a geometria técnica do clique por cima da arte. O polígono
   continua lá, clicável e com a classe `sel`; quem mostra a seleção é o card
   da faixa, que vai para o centro com a moldura de acento. O realce de toque
   do iOS e o anel de foco também não pintam nada sobre a ilustração. */
#areas polygon,
#areas polygon.sel,
#areas polygon:hover,
#areas polygon:active,
#areas polygon:focus,
#areas polygon:focus-visible {
  fill: transparent; stroke: none; outline: none;
  -webkit-tap-highlight-color: transparent;
}

/* «FORA DE ESCALA», DENTRO DO MAPA DO GUI E SÓ NELE (§5). */
.mapa { position: relative; }
.mapa-escala {
  position: absolute; left: 8px; bottom: 8px; z-index: 2;
  padding: 2px 7px; border-radius: 8px; line-height: 1.4;
  background: rgba(251, 247, 238, .82); color: var(--tinta-fraca);
  font-size: .62rem; letter-spacing: .01em; pointer-events: none;
}
.palco:has(.mapa-real:not([hidden])) .mapa-escala { display: none; }

/* =====================================================================
   5. LOCALIZAÇÃO NO MAPA REAL (§8)
   ===================================================================== */

.mr-geo {
  position: absolute; right: 10px; bottom: 34px; z-index: 5;
  width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; padding: 0;
  border: 0; background: #fff; color: var(--tinta-fraca);
  box-shadow: 0 2px 8px rgba(30, 20, 50, .25);
}
.mr-geo[hidden] { display: none; }
.mr-geo.ativo { color: #1a73e8; }
.mr-geo.buscando svg { animation: mr-geo-pulso 1s ease-in-out infinite; }
@keyframes mr-geo-pulso { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .mr-geo.buscando svg { animation: none; } }
.mr-geo:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

.mr-geo-aviso {
  position: absolute; left: 10px; right: 64px; bottom: 36px; z-index: 5; margin: 0;
  padding: 8px 10px; border-radius: 12px; background: rgba(29, 33, 41, .88); color: #fff;
  font-size: .76rem; line-height: 1.35;
}
.mr-geo-aviso[hidden] { display: none; }

/* «VOCÊ ESTÁ AQUI»: azul, porque não é atividade, e com halo. */
.mr-voce { width: 22px; height: 22px; display: grid; place-items: center; pointer-events: none; }
.mr-voce-ponto {
  width: 16px; height: 16px; border-radius: 50%; background: #1a73e8; border: 3px solid #fff;
  box-shadow: 0 0 0 6px rgba(26, 115, 232, .22), 0 1px 4px rgba(0, 0, 0, .3);
}

/* =====================================================================
   6. A CAPA DO GUIDE — A FOTO É A PORTA (§14)
   ===================================================================== */

.gc-foto { position: relative; }
.gc-foto-alvo {
  position: absolute; inset: 0; z-index: 2; margin: 0; padding: 0;
  appearance: none; border: 0; border-radius: inherit; cursor: pointer;
  background: transparent;
}
/* A afordância é discreta: uma seta num círculo translúcido no canto, que diz
   «isto leva a algum lugar» sem parecer um botão colado na fotografia. */
.gc-foto-seta {
  position: absolute; right: 14px; bottom: 16px;
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .22); color: #fff;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, .35);
}
.gc-foto-alvo:active .gc-foto-seta { background: rgba(255, 255, 255, .38); }
.gc-foto-alvo:focus-visible { outline: 3px solid var(--acento); outline-offset: 3px; }
.guide-capa .gp-editorial { margin: 14px 0 4px; }
.guide-capa .gp-editorial p { font-size: .98rem; }

/* =====================================================================
   7. TUTORIAL — IMAGENS REAIS E BOTÕES PROPORCIONAIS (§15)
   ===================================================================== */

.tg-arte.tg-arte-real {
  margin: 14px 0 0; padding: 0; min-height: 0; border: 0; border-radius: 16px; overflow: hidden;
  background: var(--papel); box-shadow: 0 0 0 1px var(--linha);
  height: auto; display: block; position: relative; gap: 0;
}
.tg-arte-real img { display: block; width: 100%; height: auto; max-height: 34vh; object-fit: cover; object-position: center; }
.tg-arte-audio img, .tg-arte-cal img { object-fit: contain; background: var(--papel); }
.tg-atrib {
  position: absolute; right: 6px; bottom: 6px; padding: 1px 6px; border-radius: 6px;
  background: rgba(255, 255, 255, .82); color: var(--tinta-fraca); font-size: .56rem; line-height: 1.5;
}

/* VOLTAR E PRÓXIMO COM O MESMO TAMANHO (§15.3): a hierarquia fica no
   preenchimento — primário cheio, secundário contornado —, e não na largura. */
.tg-acoes > .tg-bt-pri, .tg-acoes > .tg-bt-sec { flex: 1 1 0; min-height: 48px; }

/* =====================================================================
   REFINO — PLAYER, GUIDES E CLIQUE DO MAPA (Gate da consolidação mobile)
   ===================================================================== */

/* ---------------------------------------------------------------------
   §2. O TRANSPORTE É UMA FAMÍLIA SÓ

   O Play era roxo; os saltos de faixa, os ±15 e o ⋮ eram tinta quase preta e
   cinza — três componentes com três origens. Agora todos saem de um token, e
   a hierarquia vem de PESO, e não de cor:

     1º  Play           círculo roxo preenchido, o maior
     2º  faixa |◀ ▶|    ícone roxo preenchido, sem moldura
     3º  ±15 e ⋮        traço roxo fino, número sem negrito pesado

   Nenhum tamanho de botão muda aqui: as áreas de toque são as da
   consolidação mobile, protegidas pelos testes dela. */
.pa-v2 { --pa-cor: var(--acento); }
.pa-v2 .pa-bt-play { background: var(--pa-cor); color: #fff; }
.pa-v2 .pa-bt-ativ { color: var(--pa-cor); }
.pa-v2 .pa-bt-ativ[disabled] { color: var(--pa-cor); opacity: .3; }
.pa-v2 .pa-bt-salto { color: var(--pa-cor); }
/* O traço sai de 1.8 para 1.4 pelo CSS, que vence o atributo do SVG — o
   desenho do arco não muda. */
.pa-v2 .pa-salto-ic svg { stroke-width: 1.4; }
.pa-v2 .pa-bt-salto .pa-salto { color: var(--pa-cor); font-weight: 600; }
.pa-v2 .pa-bt-menu { color: var(--pa-cor); }
.pa-v2 .pa-bt-menu svg { opacity: .82; }

/* A BARRA: o trecho ouvido e o ponto em roxo; o que falta, no trilho neutro.
   `--pa-p` é escrito pelo tocador a cada `timeupdate`. */
.pa-v2 .pa-barra::-webkit-slider-runnable-track {
  background: linear-gradient(to right,
    var(--pa-cor) 0, var(--pa-cor) var(--pa-p, 0%),
    var(--linha) var(--pa-p, 0%), var(--linha) 100%);
}
.pa-v2 .pa-barra::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--pa-cor); }
.pa-v2 .pa-barra::-webkit-slider-thumb { background: var(--pa-cor); }
.pa-v2 .pa-barra::-moz-range-thumb { background: var(--pa-cor); }

/* ---------------------------------------------------------------------
   §1. A VELOCIDADE EM CHIPS, NUMA LINHA SÓ

   Cinco colunas iguais: a linha nunca quebra, e em 320px quem cede é o
   espaçamento e o corpo da letra, não a linha. Cada chip mantém 44px de
   altura de toque. */
.pa-menu .pl-folha { max-height: none; }
.pa-menu .pa-menu-vel {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px; padding: 14px 16px 18px;
}
.pa-menu .pa-menu-op {
  min-height: 44px; min-width: 0; padding: 0 2px;
  display: grid; place-items: center; justify-content: center;
  border: 1px solid var(--linha); border-radius: 999px;
  background: var(--papel-2); color: var(--tinta-fraca);
  font-size: .92rem; font-weight: 600; white-space: nowrap;
}
.pa-menu .pa-menu-op.ativo {
  border-color: var(--acento); background: var(--acento); color: #fff; font-weight: 700;
}
.pa-menu .pa-menu-op:active { filter: brightness(.96); }
@media (max-width: 359px) {
  .pa-menu .pa-menu-vel { gap: 5px; padding: 12px 12px 16px; }
  .pa-menu .pa-menu-op { font-size: .84rem; }
}

/* ---------------------------------------------------------------------
   §3. SEM BARRA FIXA, SEM RESERVA PARA ELA

   Os 96px de rodapé da página comercial existiam para a barra de compra não
   cobrir o fim do texto. Guide adquirido e Guide em produção não têm mais
   essa barra; a página termina onde o conteúdo termina. A regra olha para a
   barra que existe no DOM — `vista()` não ganhou classe nova. */
.guide-produto:not(:has(> .gp-barra)) { padding-bottom: 24px; }

/* DIREÇÃO LOGO ABAIXO DE FOTO · NOME · REGIÃO (GUI-TKY-TRAVELER-FABRICA-CONSOLIDACAO-02 §5): botão largo,
   no contexto principal da ficha; o destino não muda. */
.ad-direcao { margin: 10px 0 4px; }
.ad-direcao > .btn-direcao, .ad-direcao > .btn-ir { margin: 0; width: 100%; box-sizing: border-box; }