@charset "utf-8";

/* ============================================================
   Alta Via 1 — Dolomitas
   Direção: diário de expedição / cartografia alpina.
   A interface se comporta como painel de instrumento: fios finos,
   marcações de escala e números tabulares. Nada de cartões soltos.
   ============================================================ */

:root {
  /* paleta --------------------------------------------------- */
  --noite:      #202c39;
  --ardosia:    #283845;
  --pedra:      #b8b08d;
  --areia:      #f2d492;
  --brasa:      #f29559;

  /* neutros puxados para o azul da marca — nunca cinza puro */
  --abismo:     #161e27;
  --fenda:      #1b2531;
  --tinta:      #ece6d6;
  --tinta-meia: color-mix(in oklab, var(--pedra) 72%, var(--ardosia));
  --tinta-fraca:color-mix(in oklab, var(--pedra) 44%, var(--ardosia));

  /* fios ----------------------------------------------------- */
  --fio:        color-mix(in oklab, var(--pedra) 16%, transparent);
  --fio-forte:  color-mix(in oklab, var(--pedra) 30%, transparent);

  /* tipografia ----------------------------------------------- */
  --display: "baileywick-jf-gothic", "Archivo", system-ui, sans-serif;
  --texto:   "Archivo", system-ui, -apple-system, sans-serif;

  /* ritmo espacial — intervalos variados, não um padding só */
  --e1: 0.25rem;
  --e2: 0.5rem;
  --e3: 0.875rem;
  --e4: clamp(1rem, 1.6vw, 1.5rem);
  --e5: clamp(1.5rem, 3vw, 2.75rem);
  --e6: clamp(2.5rem, 6vw, 5rem);

  --painel-larg: clamp(290px, 24vw, 360px);
  --curva: 2px;              /* cantos quase retos: régua, não cartão */
  --transicao: 420ms cubic-bezier(0.16, 1, 0.3, 1);

  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

/* o atributo hidden precisa vencer o display das classes abaixo */
[hidden] { display: none !important; }

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
}

body {
  background: var(--abismo);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button, input { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--areia);
  outline-offset: 3px;
}

/* rótulo em versalete espaçado — a voz dos instrumentos */
.medida-rotulo, .intro-numeros dt, .resumo-grade dt,
.etapa-rotulo, .resumo-rotulo, .intro-sobretitulo, .interruptor-texto {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
  margin: 0;
}

/* todo número que muda ao vivo usa figuras de largura fixa */
.medida-valor, .intro-numeros dd, .resumo-grade dd, .perfil-escala {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

.seta { color: var(--pedra); font-style: normal; }

/* ============================================================
   Abertura — cartaz de viagem
   ============================================================ */

#intro {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: var(--e5) var(--e4);
  overflow: hidden;
  /* o radial continua embaixo: é o que se vê se a foto não carregar */
  background:
    radial-gradient(120% 90% at 50% 8%, #2b3b4c 0%, var(--noite) 48%, var(--abismo) 100%);
  transition: opacity 640ms ease, visibility 640ms;
}

#intro.saindo { opacity: 0; visibility: hidden; pointer-events: none; }

/* ── capa: as Cinque Torri, com o Rifugio Scoiattoli embaixo ──────── */

.intro-foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* o enquadramento desce um pouco: o alto da foto é céu liso, e o que
     interessa — as torres e o refúgio — mora na metade de baixo */
  object-position: 50% 58%;
  animation: capa-aproxima 24s ease-out both;
}

/* Um véu em duas direções. O de cima para baixo escurece o céu, que é a
   área mais clara da foto e justamente onde o título cai, e volta a fechar
   no rodapé, onde ficam os números e o botão. O da esquerda para a direita
   dá chão ao texto sem apagar as torres, que ficam à direita. */
.intro-veu {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom,
      rgba(22, 30, 39, 0.90) 0%,
      rgba(22, 30, 39, 0.68) 34%,
      rgba(22, 30, 39, 0.78) 68%,
      rgba(22, 30, 39, 0.96) 100%),
    linear-gradient(to right,
      rgba(22, 30, 39, 0.68) 0%,
      rgba(22, 30, 39, 0.34) 52%,
      rgba(22, 30, 39, 0.04) 86%);
}

@keyframes capa-aproxima {
  from { scale: 1.06; }
  to   { scale: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .intro-foto { animation: none; }
}

.intro-moldura {
  position: relative;
  /* sombra rala atrás de tudo: a foto tem céu claro e rocha clara, e o texto
     precisa valer em qualquer trecho dela */
  text-shadow: 0 1px 12px rgba(22, 30, 39, 0.75);
  width: min(680px, 100%);
  max-height: 100%;
  overflow-y: auto;
  text-align: left;
  padding: clamp(1.5rem, 4vw, 3rem) clamp(1.25rem, 4vw, 3.25rem);
  border-top: 1px solid var(--fio-forte);
  border-bottom: 1px solid var(--fio-forte);
  animation: subir 900ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes subir {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

.intro-sobretitulo { margin-bottom: var(--e4); color: var(--pedra); }

/* Sobre a foto os tons apagados do painel não se sustentam: a linha da rota e
   os rótulos dos números sobem para a pedra, que é o tom mais claro da paleta
   fria e passa folgado no contraste. */
#intro .intro-linha,
#intro .intro-numeros dt { color: var(--pedra); }

.intro-titulo {
  font-family: var(--display);
  font-weight: 400;
  line-height: 0.84;
  margin: 0;
  display: flex;
  flex-direction: column;
  color: var(--areia);
}

.intro-alta {
  font-size: clamp(3.2rem, 13vw, 7rem);
  letter-spacing: 0.02em;
}

.intro-via {
  font-size: clamp(3.2rem, 13vw, 7rem);
  letter-spacing: 0.02em;
  display: flex;
  align-items: baseline;
  gap: 0.22em;
}

/* o algarismo recebe o acento quente — único ponto de brasa no cartaz */
.intro-via em {
  font-style: normal;
  color: var(--brasa);
  font-size: 1.04em;
}

.regua-dupla {
  margin: var(--e4) 0 var(--e3);
  height: 4px;
  border-top: 1px solid var(--fio-forte);
  border-bottom: 1px solid var(--fio-forte);
}

.intro-linha {
  margin: 0 0 var(--e5);
  font-size: clamp(0.95rem, 2vw, 1.1rem);
  color: var(--tinta-meia);
}
.intro-linha .seta { margin: 0 0.4em; }

.intro-numeros {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e5);
  margin: 0 0 var(--e5);
}
.intro-numeros div { display: flex; flex-direction: column; gap: var(--e1); }
.intro-numeros dd {
  margin: 0;
  font-size: clamp(1.5rem, 4vw, 2.1rem);
  font-weight: 600;
  line-height: 1;
  color: var(--tinta);
}
.intro-numeros dd i { font-style: normal; font-size: 0.5em; color: var(--tinta-fraca); margin-left: 0.2em; }

.botao-partida {
  display: inline-flex;
  align-items: center;
  gap: 0.85em;
  padding: 0.9em 1.9em 0.9em 1.5em;
  background: var(--areia);
  color: var(--noite);
  border: none;
  border-radius: var(--curva);
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--transicao), transform var(--transicao);
}
.botao-partida:hover { background: var(--brasa); transform: translateY(-2px); }
.botao-partida:active { transform: none; }

.botao-partida-icone {
  width: 0; height: 0;
  border-left: 11px solid currentColor;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
}

.aviso {
  margin: var(--e4) 0 0;
  padding: var(--e3);
  border-left: 2px solid var(--brasa);
  background: color-mix(in oklab, var(--brasa) 10%, transparent);
  color: var(--tinta-meia);
  font-size: 0.875rem;
}

/* ============================================================
   Estrutura — paisagem: painel à esquerda, palco à direita
   ============================================================ */

#app {
  position: fixed;
  inset: 0;
  display: grid;
  grid-template-columns: var(--painel-larg) 1fr;
  grid-template-rows: 1fr auto;
  grid-template-areas: "painel palco" "transporte transporte";
  opacity: 0;
  transition: opacity 760ms ease 180ms;
}
#app.ativo { opacity: 1; }

#painel {
  grid-area: painel;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--noite);
  border-right: 1px solid var(--fio);
  overflow-y: auto;
  overscroll-behavior: contain;
}

#palco { grid-area: palco; position: relative; min-width: 0; }
#mapa  { position: absolute; inset: 0; background: var(--abismo); }

/* o MapLibre ganha o tom da casa */
.maplibregl-ctrl-attrib {
  background: color-mix(in oklab, var(--abismo) 86%, transparent) !important;
  font-family: var(--texto); font-size: 10px;
}
.maplibregl-ctrl-attrib a { color: var(--tinta-fraca) !important; }
.maplibregl-ctrl-group { background: var(--ardosia) !important; border: 1px solid var(--fio) !important; }
.maplibregl-ctrl-group button + button { border-top: 1px solid var(--fio) !important; }

/* ── cabeçalho do painel ─────────────────────────────────── */
.painel-topo {
  padding: var(--e4) var(--e4) var(--e3);
  border-bottom: 1px solid var(--fio);
}
.marca {
  font-family: var(--display);
  font-size: 1.6rem;
  line-height: 1;
  margin: 0;
  color: var(--areia);
  letter-spacing: 0.03em;
}
.marca em { font-style: normal; color: var(--brasa); }
.marca-sub {
  margin: 0.35em 0 0;
  font-size: 0.6875rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
}

/* ── etapa em curso ──────────────────────────────────────── */
.etapa {
  padding: var(--e4);
  border-bottom: 1px solid var(--fio);
  border-left: 3px solid var(--cor-dia, var(--pedra));
  transition: border-color var(--transicao);
}
.etapa-rotulo { display: flex; justify-content: space-between; gap: var(--e2); }
.etapa-data { color: var(--tinta-fraca); letter-spacing: 0.08em; }

.etapa-nome {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.15rem, 2.2vw, 1.45rem);
  line-height: 1.16;
  margin: var(--e2) 0 0;
  color: var(--tinta);
  display: flex;
  flex-direction: column;
  gap: 0.1em;
}
.etapa-nome .seta { font-size: 0.72em; color: var(--cor-dia, var(--pedra)); }

/* aviso dos pedaços em que o relógio já estava desligado */
.etapa-nota {
  margin: var(--e2) 0 0;
  font-size: 0.6875rem;
  line-height: 1.35;
  letter-spacing: 0.04em;
  color: var(--tinta-fraca);
}
.etapa-nota::before {
  content: "";
  display: inline-block;
  width: 1.1em;
  height: 0;
  margin-right: 0.5em;
  vertical-align: 0.25em;
  border-top: 1.5px dashed var(--cor-dia, var(--pedra));
}

/* ── instrumentos ────────────────────────────────────────── */
.instrumentos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--fio);
  border-bottom: 1px solid var(--fio);
}
.medida {
  background: var(--noite);
  padding: var(--e3) var(--e4);
  min-width: 0;
}
.medida-larga { grid-column: 1 / -1; }

.medida-valor {
  margin: 0.3em 0 0;
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.05;
  color: var(--tinta);
  white-space: nowrap;
}
.medida-valor i {
  font-style: normal;
  font-size: 0.56em;
  font-weight: 500;
  color: var(--tinta-fraca);
  margin-left: 0.22em;
}
.medida-de { font-size: 0.6rem; color: var(--tinta-fraca); letter-spacing: 0.06em; }

/* altitude e frequência são as duas leituras que o olho procura */
.medida-destaque .medida-valor { font-size: clamp(1.9rem, 3.4vw, 2.5rem); }
.medida-destaque .medida-valor span { color: var(--areia); }
.medida-fc .medida-valor span { color: var(--brasa); }

/* o ponto pulsa junto com a frequência lida */
.medida-fc .medida-rotulo::after {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  margin-left: 0.6em;
  border-radius: 50%;
  background: var(--brasa);
  animation: pulso var(--periodo-fc, 1s) ease-out infinite;
}
@keyframes pulso {
  0%   { transform: scale(1);   opacity: 1; }
  28%  { transform: scale(1.5); opacity: 0.65; }
  100% { transform: scale(1);   opacity: 1; }
}

/* ── perfil de elevação ──────────────────────────────────── */
.perfil { padding: var(--e4); margin-top: auto; }
#perfil-svg {
  display: block;
  width: 100%;
  height: clamp(72px, 11vh, 110px);
  overflow: visible;
}
#perfil-area   { fill: color-mix(in oklab, var(--cor-dia, var(--pedra)) 20%, transparent); }
#perfil-linha  { fill: none; stroke: var(--cor-dia, var(--pedra)); stroke-width: 1.25; vector-effect: non-scaling-stroke; }
/* o pedaço traçado à mão, depois que o relógio parou de gravar */
#perfil-sem-registro {
  fill: none;
  stroke: var(--cor-dia, var(--pedra));
  stroke-width: 1.25;
  stroke-dasharray: 3 2.5;
  opacity: 0.55;
  vector-effect: non-scaling-stroke;
}
#perfil-cursor { stroke: var(--tinta); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: 0.85; }

.perfil-escala {
  display: flex;
  justify-content: space-between;
  margin-top: var(--e2);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  color: var(--tinta-fraca);
}

/* ============================================================
   Sobreposições no palco — resumo e mídia
   ============================================================ */

.resumo {
  position: absolute;
  z-index: 10;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  width: min(500px, calc(100% - 2 * var(--e4)));
  padding: var(--e5) var(--e5) var(--e4);
  background: color-mix(in oklab, var(--noite) 94%, transparent);
  backdrop-filter: blur(14px);
  border: 1px solid var(--fio-forte);
  border-top: 3px solid var(--cor-dia, var(--areia));
  border-radius: var(--curva);
  animation: resumo-entra 560ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes resumo-entra {
  from { opacity: 0; transform: translateY(14px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}

.resumo-destino {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.5rem, 3.4vw, 2rem);
  line-height: 1.08;
  margin: var(--e2) 0 var(--e4);
  color: var(--areia);
}

.resumo-grade {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--e4) var(--e3);
  margin: 0 0 var(--e5);
  padding-top: var(--e4);
  border-top: 1px solid var(--fio);
}
.resumo-grade div { display: flex; flex-direction: column; gap: var(--e1); min-width: 0; }
.resumo-grade dd {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--tinta);
  white-space: nowrap;
}
.resumo-grade dd i { font-style: normal; font-size: 0.6em; font-weight: 500; color: var(--tinta-fraca); margin-left: 0.15em; }

.resumo-nota {
  margin: 0 0 var(--e4);
  font-size: 0.6875rem;
  line-height: 1.45;
  color: var(--tinta-fraca);
  max-width: 44ch;
}

.botao-seguir {
  width: 100%;
  padding: 0.85em 1.2em;
  background: transparent;
  color: var(--areia);
  border: 1px solid var(--areia);
  border-radius: var(--curva);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--transicao), color var(--transicao);
}
.botao-seguir:hover { background: var(--areia); color: var(--noite); }

/* ── painel de mídia ─────────────────────────────────────── */
.midia {
  position: absolute;
  z-index: 12;
  right: var(--e4);
  top: var(--e4);
  /* a altura acompanha a mídia em vez de esticar: fotos deitadas não
     deixam um vão escuro embaixo */
  /* Ocupa um canto, não a tela. O mapa precisa continuar legível com a
     foto aberta — o enquadramento é deslocado por padding no MapLibre. */
  max-height: calc(100% - 2 * var(--e4));
  width: min(30vw, 380px);
  margin: 0;
  /* Grade em vez de flex: a faixa da imagem precisa de altura definida para
     que o max-height dela resolva. Com flex de altura indefinida a foto
     transbordava e passava por baixo da legenda. */
  display: grid;
  grid-template-rows: auto auto auto;
  background: color-mix(in oklab, var(--noite) 95%, transparent);
  backdrop-filter: blur(16px);
  border: 1px solid var(--fio-forte);
  border-radius: var(--curva);
  overflow: hidden;
  animation: midia-entra 520ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes midia-entra {
  from { opacity: 0; transform: translateX(26px); }
  to   { opacity: 1; transform: none; }
}

.midia-quadro {
  position: relative;
  /* A faixa toma a proporção da própria mídia, informada pelo media.json.
     Assim o painel abraça uma foto deitada em vez de deixar tarja preta,
     e continua cabendo na tela quando a foto é bem vertical. */
  /* Largura fixa no painel: sem isto, a altura limitada faria a proporção
     encolher também a largura, deixando uma faixa vazia ao lado da foto. */
  width: 100%;
  aspect-ratio: var(--prop, 3 / 2);
  max-height: 100%;
  min-height: 0;
  overflow: hidden;
  background: var(--abismo);
}
#midia-conteudo { display: contents; }

/* Posição absoluta de propósito: num grid, o max-height percentual da
   imagem não resolve (a altura da faixa ainda é indefinida na hora do
   cálculo) e a foto vazava por baixo da legenda. Preso às quatro bordas,
   o tamanho passa a ser definido e o object-fit mantém a proporção. */
.midia-quadro img, .midia-quadro video {
  position: absolute;
  inset: var(--e2);
  width: calc(100% - 2 * var(--e2));
  height: calc(100% - 2 * var(--e2));
  object-fit: contain;
  display: block;
}

.midia-fechar {
  position: absolute;
  z-index: 2;
  top: var(--e2);
  right: var(--e2);
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  font-size: 1.4rem;
  line-height: 1;
  background: color-mix(in oklab, var(--abismo) 78%, transparent);
  color: var(--tinta);
  border: 1px solid var(--fio);
  border-radius: var(--curva);
  cursor: pointer;
  transition: background var(--transicao), color var(--transicao);
}
.midia-fechar:hover { background: var(--brasa); color: var(--noite); border-color: var(--brasa); }

.midia-legenda {
  padding: var(--e3) var(--e4);
  border-top: 1px solid var(--fio);
  font-size: 0.8125rem;
  color: var(--tinta-meia);
  display: flex;
  align-items: baseline;
  gap: 0.75em;
  font-variant-numeric: tabular-nums;
}
.midia-hora {
  font-weight: 600;
  color: var(--areia);
  letter-spacing: 0.06em;
  flex: none;
}

/* marcador de mídia sobre o mapa */
.pino {
  position: relative;
  z-index: 3;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--brasa);
  border: 1.5px solid var(--noite);
  opacity: 0.6;                 /* discretos: a trilha vem primeiro */
  cursor: pointer;
  transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1), opacity 220ms;
}
.pino:hover { transform: scale(1.8); opacity: 1; }
.pino.ativo { opacity: 1; transform: scale(1.3); background: var(--areia); box-shadow: 0 0 0 6px color-mix(in oklab, var(--areia) 26%, transparent); }

/* etiqueta de refúgio */
.refugio {
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--display);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: var(--tinta);
  white-space: nowrap;
  text-shadow: 0 1px 4px var(--abismo), 0 0 10px var(--abismo);
  pointer-events: none;
}
.refugio::before {
  content: "";
  width: 9px; height: 9px;
  flex: none;
  background: var(--areia);
  border: 1.5px solid var(--noite);
  rotate: 45deg;
}
.refugio[data-tipo="fim"]::before { background: var(--brasa); }

/* lugar de paisagem: não se passou por ali, só se viu. O losango vira um
   contorno vazio e o nome recua, para não competir com o trajeto. */
.refugio[data-tipo="paisagem"] {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: color-mix(in oklab, var(--tinta) 62%, transparent);
}
.refugio[data-tipo="paisagem"]::before {
  width: 6px; height: 6px;
  background: transparent;
  border: 1.5px solid color-mix(in oklab, var(--pedra) 75%, transparent);
  rotate: 45deg;
}

/* ============================================================
   Barra de transporte
   ============================================================ */

#transporte {
  grid-area: transporte;
  display: flex;
  align-items: center;
  gap: var(--e4);
  padding: var(--e3) var(--e4);
  background: var(--noite);
  border-top: 1px solid var(--fio);
  padding-bottom: max(var(--e3), env(safe-area-inset-bottom));
}

.botao-tocar {
  flex: none;
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
  background: var(--areia);
  color: var(--noite);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: background var(--transicao), transform 200ms var(--transicao);
}
.botao-tocar:hover { background: var(--brasa); transform: scale(1.06); }

/* o ícone alterna entre duas barras e um triângulo */
.icone-tocar { display: block; width: 14px; height: 15px; background: currentColor; }
.icone-tocar[data-estado="tocando"] {
  clip-path: polygon(0 0, 37% 0, 37% 100%, 0 100%, 0 0, 63% 0, 100% 0, 100% 100%, 63% 100%, 63% 0);
}
.icone-tocar[data-estado="pausado"] {
  clip-path: polygon(8% 0, 100% 50%, 8% 100%);
}

/* ── linha do tempo: seis faixas proporcionais à duração ──── */
.linha-tempo { position: relative; flex: 1; min-width: 0; height: 46px; }

.linha-tempo-trilho {
  position: absolute;
  inset: 50% 0 auto;
  translate: 0 -50%;
  height: 100%;
  display: flex;
  align-items: stretch;
}

/* As faixas se encostam: quem separa uma etapa da outra é o risco do fim,
   não um vão. Assim a troca de dia tem um lugar exato no trilho. */
.faixa {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 9px 7px;
  cursor: pointer;
  border-bottom: 2px solid color-mix(in oklab, var(--cor) 30%, transparent);
  transition: border-color var(--transicao), background var(--transicao);
}
.faixa:hover { border-bottom-color: color-mix(in oklab, var(--cor) 70%, transparent); }
/* a etapa em curso ganha chão, mas desbotado para cima: um retângulo inteiro
   viraria uma caixa, e o trilho não tem caixas */
.faixa.atual {
  background: linear-gradient(to top,
    color-mix(in oklab, var(--cor) 11%, transparent),
    transparent 85%);
}

/* o que não é da travessia fica de lado: a faixa recua e ganha um risco
   mais forte na entrada, que é onde a travessia acaba e o resto começa */
.faixa-extra { opacity: 0.72; }
.faixa-extra.atual { opacity: 1; }
.faixa-extra:first-of-type::before,
.faixa:not(.faixa-extra) + .faixa-extra::before {
  content: "";
  position: absolute;
  left: -1px; bottom: -2px;
  width: 1px; height: 28px;
  background: color-mix(in oklab, var(--pedra) 55%, transparent);
}

/* o risco da chegada — fim desta etapa e começo da seguinte */
.faixa::after,
.faixa:first-child::before {
  content: "";
  position: absolute;
  right: 0; bottom: -2px;
  width: 1px; height: 20px;
  background: color-mix(in oklab, var(--cor) 60%, transparent);
}
/* a partida, que não é chegada de ninguém */
.faixa:first-child::before { right: auto; left: 0; }
.faixa:last-child::after { background: var(--cor); }

/* trecho já percorrido */
.faixa-feito {
  position: absolute;
  left: 0; bottom: -2px;
  height: 2px;
  width: 0;
  background: var(--cor);
}
.faixa.atual .faixa-rotulo { color: var(--cor); }

/* número abre a faixa, destino a fecha encostado no risco da chegada */
.faixa-rotulo {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.6em;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
  transition: color var(--transicao);
}
.faixa-n { flex: none; opacity: 0.75; }
.faixa-destino {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: right;
}

/* densidade das mídias: uma barra por janela de tempo, altura pelo tanto */
.faixa-midias {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 11px;
  pointer-events: none;
}
.faixa-midias i {
  position: absolute;
  bottom: 0;
  width: calc(100% / 40 - 1px);
  min-width: 1px;
  background: color-mix(in oklab, var(--cor) 42%, transparent);
}
.faixa.atual .faixa-midias i { background: color-mix(in oklab, var(--cor) 72%, transparent); }

#scrub {
  position: absolute;
  inset: 0;
  width: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
}

/* ── controles à direita ─────────────────────────────────── */
.controles { flex: none; display: flex; align-items: center; gap: var(--e4); }

.interruptor { display: inline-flex; align-items: center; gap: 0.6em; cursor: pointer; }
.interruptor input { position: absolute; opacity: 0; width: 0; height: 0; }

.interruptor-pista {
  width: 38px; height: 21px;
  flex: none;
  padding: 2px;
  background: var(--ardosia);
  border: 1px solid var(--fio-forte);
  border-radius: 999px;
  transition: background var(--transicao), border-color var(--transicao);
}
.interruptor-pista i {
  display: block;
  width: 15px; height: 15px;
  background: var(--tinta-fraca);
  border-radius: 50%;
  transition: translate var(--transicao), background var(--transicao);
}
.interruptor input:checked + .interruptor-pista { background: color-mix(in oklab, var(--brasa) 26%, var(--ardosia)); border-color: var(--brasa); }
.interruptor input:checked + .interruptor-pista i { translate: 17px 0; background: var(--brasa); }
.interruptor input:focus-visible + .interruptor-pista { outline: 2px solid var(--areia); outline-offset: 3px; }
.interruptor input:checked ~ .interruptor-texto { color: var(--tinta-meia); }

.velocidade { display: flex; border: 1px solid var(--fio-forte); border-radius: var(--curva); overflow: hidden; }
.velocidade button {
  padding: 0.45em 0.75em;
  background: transparent;
  color: var(--tinta-fraca);
  border: none;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  transition: background var(--transicao), color var(--transicao);
}
.velocidade button + button { border-left: 1px solid var(--fio); }
.velocidade button:hover { color: var(--tinta); }
.velocidade button.ativo { background: var(--areia); color: var(--noite); }

/* ============================================================
   Retrato — celular em pé e telas estreitas
   ============================================================ */

@media (orientation: portrait), (max-width: 760px) {
  #app {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr) auto auto;
    grid-template-areas: "palco" "transporte" "painel";
  }

  #painel {
    border-right: none;
    border-top: 1px solid var(--fio);
    max-height: 45vh;
  }

  .painel-topo { display: none; }   /* a marca já aparece na abertura */

  .etapa { padding: var(--e3) var(--e4); }
  .etapa-nome { flex-direction: row; flex-wrap: wrap; gap: 0.35em; align-items: baseline; }

  .instrumentos { grid-template-columns: repeat(2, 1fr); }
  .medida { padding: var(--e2) var(--e4) var(--e3); }
  .medida-destaque .medida-valor { font-size: 1.85rem; }
  .medida-valor { font-size: 1.1rem; }

  .perfil { padding: var(--e3) var(--e4) var(--e4); }
  #perfil-svg { height: 64px; }

  /* A mídia sobe como folha. Presa à janela, e não à área do mapa: em pé o
     mapa ocupa pouca altura e a foto ficava reduzida a uma tarja. */
  .midia {
    position: fixed;
    right: var(--e2); left: var(--e2);
    top: auto;
    bottom: calc(var(--e2) + env(safe-area-inset-bottom));
    width: auto;
    max-height: 76vh;
    animation-name: folha-sobe;
  }
  @keyframes folha-sobe {
    from { opacity: 0; transform: translateY(26px); }
    to   { opacity: 1; transform: none; }
  }

  .resumo { width: calc(100% - 2 * var(--e3)); padding: var(--e4); }
  .resumo-grade { grid-template-columns: repeat(2, 1fr); gap: var(--e3) var(--e4); }

  #transporte { flex-wrap: wrap; gap: var(--e3); padding-bottom: var(--e3); }
  .linha-tempo { order: 3; flex-basis: 100%; height: 38px; }
  .controles { margin-left: auto; }
}

/* Celular deitado: sobra largura e falta altura. Tudo encolhe para que as
   oito leituras caibam sem corte — inclusive os rótulos, que numa coluna
   estreita quebravam em duas linhas e empurravam os valores para fora. */
@media (orientation: landscape) and (max-height: 520px) {
  :root { --painel-larg: 268px; }

  .perfil { display: none; }
  .marca-sub { display: none; }
  .painel-topo { padding: var(--e2) var(--e3); }
  .marca { font-size: 1.15rem; }

  .etapa { padding: var(--e2) var(--e3); }
  .etapa-nome { font-size: 0.95rem; }
  .etapa-nome .seta { display: none; }
  .etapa-nome > span:last-child::before { content: "→ "; color: var(--cor-dia, var(--pedra)); }

  .medida { padding: 0.3rem var(--e3) 0.45rem; }
  .medida-rotulo { font-size: 0.5625rem; letter-spacing: 0.1em; white-space: nowrap; }
  .medida-valor { font-size: 0.95rem; }
  .medida-destaque .medida-valor { font-size: 1.4rem; }

  #transporte { padding-block: var(--e2); gap: var(--e3); }
  .botao-tocar { width: 36px; height: 36px; }
  .controles { gap: var(--e3); }
}

/* ============================================================
   Preferências de acessibilidade
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .medida-fc .medida-rotulo::after { animation: none; }
}

/* ============================================================
   Marcador do trilheiro
   ============================================================ */

.trilheiro {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--cor-dia, var(--areia));
  border: 2.5px solid var(--abismo);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--cor-dia, var(--areia)) 55%, transparent);
  pointer-events: none;
}

/* halo que respira, para o olho achar o ponto no relevo */
.trilheiro::after {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  border: 1px solid var(--cor-dia, var(--areia));
  opacity: 0;
  animation: halo 2.6s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}
@keyframes halo {
  0%   { transform: scale(0.55); opacity: 0.75; }
  70%  { transform: scale(1.6);  opacity: 0; }
  100% { transform: scale(1.6);  opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .trilheiro::after { animation: none; }
}

/* os controles nativos do MapLibre precisam enxergar sobre o fundo escuro */
.maplibregl-ctrl-group button .maplibregl-ctrl-icon {
  filter: invert(88%) sepia(12%) saturate(360%) hue-rotate(5deg) brightness(95%);
}
.maplibregl-ctrl-group button:hover { background: color-mix(in oklab, var(--areia) 18%, transparent) !important; }
.maplibregl-ctrl-group button:not(:disabled):hover .maplibregl-ctrl-icon { filter: none; }

/* ============================================================
   Subida e descida
   ============================================================ */

/* as setas distinguem as duas leituras sem precisar reler o rótulo */
.medida-sobe::before,
.medida-desce::before {
  font-size: 0.62em;
  font-weight: 700;
  margin-right: 0.22em;
  vertical-align: 0.12em;
}
.medida-sobe::before  { content: "↑"; color: var(--areia); }
.medida-desce::before { content: "↓"; color: var(--pedra); }

/* o acumulado traz a referência do total numa segunda linha discreta */
.medida-valor .medida-de { display: inline-block; margin-top: 0.15em; }

/* ============================================================
   Correções de retrato
   ============================================================ */

.faixa-n { font-weight: 700; }

@media (orientation: portrait), (max-width: 760px) {
  /* O card de etapa precisa se situar pela janela, e não pela área do
     mapa: em pé o mapa é baixo e o card estourava para fora da tela. */
  .resumo {
    position: fixed;
    inset: auto var(--e3) calc(var(--e3) + env(safe-area-inset-bottom)) var(--e3);
    width: auto;
    translate: none;
    max-height: 78vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    animation-name: folha-sobe;
  }
  .resumo-destino { font-size: 1.6rem; margin-bottom: var(--e3); }
  .resumo-grade { margin-bottom: var(--e4); padding-top: var(--e3); }
}

/* abaixo disto o nome do refúgio vira reticências; só o número serve melhor */
@media (max-width: 580px) {
  .faixa-destino { display: none; }
  .faixa-rotulo { justify-content: center; }
  .faixa { padding-inline: 2px; }
  .faixa-midias { height: 7px; }
  .linha-tempo { height: 30px; }
}

/* mídia que não pôde ser carregada (vídeo externo fora do ar, por exemplo) */
.midia-ausente {
  display: grid;
  gap: var(--e3);
  justify-items: center;
  padding: var(--e4);
  text-align: center;
}
.midia-ausente img { max-width: 100%; opacity: 0.45; }
.midia-ausente p {
  margin: 0;
  max-width: 34ch;
  font-size: 0.8125rem;
  color: var(--tinta-fraca);
}

/* ============================================================
   Navegação na linha do tempo
   ============================================================ */

/* As faixas são só desenho: quem recebe o ponteiro é o <input type="range">
   invisível por cima, que dá arrasto nos dois sentidos e teclado de graça. */
.faixa { pointer-events: none; cursor: default; }

#scrub {
  z-index: 3;
  cursor: grab;
  touch-action: pan-y;
}
#scrub:active { cursor: grabbing; }

/* Alça visível, já que o polegar nativo está invisível. */
.alca-tempo {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  margin-left: -1px;
  background: var(--tinta);
  pointer-events: none;
  z-index: 2;
}
.alca-tempo::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -4px;
  width: 11px;
  height: 11px;
  translate: -50% 0;
  rotate: 45deg;
  background: var(--cor-dia, var(--areia));
  border: 1.5px solid var(--abismo);
}
#scrub:focus-visible ~ .linha-tempo-trilho .alca-tempo::after,
.linha-tempo:hover .alca-tempo::after { scale: 1.2; }
.alca-tempo::after { transition: scale 180ms cubic-bezier(0.16, 1, 0.3, 1); }

/* ============================================================
   Câmera solta
   ============================================================ */

.botao-recentrar {
  position: absolute;
  z-index: 11;
  left: 50%;
  top: var(--e4);
  translate: -50% 0;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.55em 1.1em;
  background: color-mix(in oklab, var(--noite) 92%, transparent);
  backdrop-filter: blur(10px);
  color: var(--areia);
  border: 1px solid var(--fio-forte);
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  animation: surgir 320ms cubic-bezier(0.16, 1, 0.3, 1) both;
  transition: background var(--transicao), color var(--transicao);
}
.botao-recentrar:hover { background: var(--areia); color: var(--noite); }
@keyframes surgir {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}

/* O trilheiro fica acima dos pinos de mídia: eles se acumulam ao longo da
   trilha e, sem isto, enterram justamente o ponto que se quer ver e arrastar. */
.trilheiro { cursor: grab; pointer-events: auto; z-index: 6; }
.trilheiro:active { cursor: grabbing; }
.trilheiro.arrastando { scale: 1.25; }

@media (orientation: portrait), (max-width: 760px) {
  .botao-recentrar { top: var(--e2); font-size: 0.6875rem; padding: 0.5em 0.9em; }
}

/* ============================================================
   Passar de mídia em mídia
   ============================================================ */

.midia-passos {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e2);
  padding: var(--e2) var(--e3);
  border-top: 1px solid var(--fio);
}

.midia-passos button {
  width: 38px;
  height: 30px;
  display: grid;
  place-items: center;
  font-size: 1.25rem;
  line-height: 1;
  background: transparent;
  color: var(--areia);
  border: 1px solid var(--fio-forte);
  border-radius: var(--curva);
  cursor: pointer;
  transition: background var(--transicao), color var(--transicao),
              opacity var(--transicao);
}
.midia-passos button:hover:not(:disabled) { background: var(--areia); color: var(--noite); }
.midia-passos button:disabled { opacity: 0.3; cursor: default; }

.midia-contador {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--tinta-fraca);
  font-variant-numeric: tabular-nums;
}

/* a legenda pode ficar longa; melhor quebrar que esticar o painel */
.midia-legenda { flex-wrap: wrap; }
.midia-texto { min-width: 0; }

@media (orientation: portrait), (max-width: 760px) {
  .midia { max-height: 62vh; }
  .midia-passos { padding: var(--e2); }
  .midia-passos button { width: 44px; height: 34px; }   /* alvo de toque */
}

/* celular deitado: sobra largura e falta altura */
@media (orientation: landscape) and (max-height: 520px) {
  .midia { max-height: calc(100% - 2 * var(--e2)); width: min(32vw, 300px);
           top: var(--e2); right: var(--e2); }
  .midia-legenda { padding: var(--e2) var(--e3); font-size: 0.75rem; }
}

/* ============================================================
   Roda de bússola
   ============================================================ */

.roda {
  position: absolute;
  z-index: 11;
  left: var(--e4);
  bottom: var(--e4);
  width: 76px;
  display: grid;
  justify-items: center;
  gap: 0.35em;
  cursor: grab;
  touch-action: none;          /* o arrasto é nosso, não da página */
  user-select: none;
  -webkit-user-select: none;
}
.roda.girando { cursor: grabbing; }

.roda-disco {
  position: relative;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 38%,
      color-mix(in oklab, var(--ardosia) 92%, transparent) 0%,
      color-mix(in oklab, var(--noite) 94%, transparent) 70%);
  border: 1px solid var(--fio-forte);
  backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 color-mix(in oklab, var(--pedra) 14%, transparent);
  transition: border-color var(--transicao);
}
.roda:hover .roda-disco,
.roda:focus-visible .roda-disco { border-color: var(--areia); }

/* entalhes nas quatro direções, para a rotação ter referência visual */
.roda-sulco {
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  background:
    conic-gradient(from 0deg,
      var(--fio-forte) 0 1.2deg, transparent 1.2deg 88.8deg,
      var(--fio-forte) 88.8deg 91.2deg, transparent 91.2deg 178.8deg,
      var(--fio-forte) 178.8deg 181.2deg, transparent 181.2deg 268.8deg,
      var(--fio-forte) 268.8deg 271.2deg, transparent 271.2deg 360deg);
  -webkit-mask: radial-gradient(circle, transparent 58%, #000 60%);
  mask: radial-gradient(circle, transparent 58%, #000 60%);
  pointer-events: none;
}

/* a agulha aponta para o norte da cena */
.roda-agulha {
  position: absolute;
  left: 50%;
  top: 11px;
  width: 0; height: 0;
  translate: -50% 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 17px solid var(--brasa);
  pointer-events: none;
}

.roda-norte {
  position: absolute;
  left: 50%;
  bottom: 12px;
  translate: -50% 0;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--tinta-fraca);
  pointer-events: none;
}

.roda-valor {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--tinta-meia);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 4px var(--abismo);
  pointer-events: none;
}

@media (orientation: portrait), (max-width: 760px) {
  .roda { left: var(--e2); bottom: var(--e2); width: 62px; }
  .roda-disco { width: 62px; height: 62px; }
  .roda-agulha { top: 9px; border-bottom-width: 14px; }
}

/* celular deitado: a barra inferior fica rente, então a roda sobe um pouco */
@media (orientation: landscape) and (max-height: 520px) {
  .roda { width: 54px; left: var(--e2); bottom: var(--e2); }
  .roda-disco { width: 54px; height: 54px; }
  .roda-agulha { top: 7px; border-bottom-width: 12px; border-left-width: 4px; border-right-width: 4px; }
  .roda-norte { font-size: 0.5rem; bottom: 8px; }
  .roda-valor { display: none; }
}

/* ============================================================
   MODO TEATRO
   A mídia passa a ser o assunto e o mapa vira faixa de apoio,
   com uma tira de miniaturas entre os dois. O palco deixa de ser
   uma moldura com coisas soltas por cima e vira uma pilha: mídia,
   tira, divisor, mapa. Fora deste modo nada aqui tem efeito.
   ============================================================ */

#palco {
  --mapa-alt: clamp(150px, 26vh, 320px);
  --tira-alt: 86px;
  --divisor-alt: 11px;
}

#palco.teatro {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto auto var(--mapa-alt);
  background: var(--abismo);
}

/* A ordem no HTML é outra — tira, divisor, mapa e só então a mídia, que
   fora do teatro flutua sobre tudo. Cada um ganha sua linha pelo nome.
   Resumo, bússola e botão de recentrar são absolutos e não entram na conta. */
#palco.teatro .midia   { grid-row: 1; }
#palco.teatro .tira    { grid-row: 2; }
#palco.teatro .divisor { grid-row: 3; }
#palco.teatro #mapa    { grid-row: 4; }

/* O mapa sai do inset absoluto e passa a ocupar a última faixa. */
#palco.teatro #mapa {
  position: relative;
  inset: auto;
  min-height: 0;
  border-top: 1px solid var(--fio);
}

/* Bússola e botão de recentrar continuam valendo — girar o mapa e voltar a
   seguir o trilheiro são justamente o que salva uma vista ruim. Os dois são
   absolutos dentro do palco, que no teatro é alto: sem reancorar, iriam
   parar em cima da foto. A borda de cima da faixa do mapa está a
   100% - var(--mapa-alt) do topo, e é dali que eles se penduram. */
#palco.teatro .botao-recentrar {
  top: calc(100% - var(--mapa-alt) + var(--e2));
  bottom: auto;
}
/* O resumo de fim de etapa é absoluto e vinha com z-index menor que o da
   mídia: no teatro, onde a mídia ocupa o palco, ele sumia atrás dela. Sobe
   para a frente e se centra na faixa da mídia, não no palco inteiro. */
#palco.teatro .resumo {
  z-index: 14;
  top: calc((100% - var(--tira-alt) - var(--divisor-alt) - var(--mapa-alt)) / 2);
}

/* A faixa é baixa: a roda encolhe para caber sem engolir o mapa. */
#palco.teatro .roda {
  left: var(--e2);
  bottom: var(--e2);
  width: 60px;
  gap: 0.2em;
}
/* 60px é o menor disco em que a agulha e o N ainda não se encostam: a
   agulha mede 17px a partir dos 11px do topo, e o N fica a 12px da base. */
#palco.teatro .roda-disco { width: 60px; height: 60px; }

/* ── a mídia ocupando o palco ───────────────────────────── */
#palco.teatro .midia {
  /* relativo, não estático: o fechar e o botão de teatro se penduram nele,
     e com position:static iriam parar no canto do palco. */
  position: relative;
  width: auto;
  max-height: none;
  margin: 0;
  border: none;
  border-radius: 0;
  background: var(--abismo);
  backdrop-filter: none;
  animation: teatro-entra 320ms ease both;
  /* legenda e setas dividem a mesma faixa de rodapé */
  grid-template-rows: minmax(0, 1fr) auto;
  grid-template-columns: minmax(0, 1fr) auto;
}
@keyframes teatro-entra {
  from { opacity: 0; }
  to   { opacity: 1; }
}

#palco.teatro .midia-quadro {
  grid-area: 1 / 1 / 2 / 3;
  aspect-ratio: auto;
  height: auto;
  background: var(--abismo);
}
#palco.teatro .midia-legenda {
  grid-area: 2 / 1;
  font-size: 0.875rem;
}
#palco.teatro .midia-passos {
  grid-area: 2 / 2;
  border-top: 1px solid var(--fio);
}

/* ── botão de entrar e sair do teatro ───────────────────── */
.midia-teatro {
  position: absolute;
  z-index: 2;
  top: var(--e2);
  right: calc(var(--e2) + 34px + var(--e1));
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  background: color-mix(in oklab, var(--abismo) 78%, transparent);
  color: var(--tinta);
  border: 1px solid var(--fio);
  border-radius: var(--curva);
  cursor: pointer;
  transition: background var(--transicao), color var(--transicao);
}
.midia-teatro:hover {
  background: var(--areia); color: var(--noite); border-color: var(--areia);
}
/* dois cantos opostos, como as marcas de corte de uma prova */
.midia-teatro-icone {
  width: 15px; height: 15px;
  background:
    linear-gradient(currentColor, currentColor) 0 0 / 7px 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) 0 0 / 1.5px 7px no-repeat,
    linear-gradient(currentColor, currentColor) 100% 100% / 7px 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) 100% 100% / 1.5px 7px no-repeat;
}
/* no teatro as marcas apontam para dentro: o gesto é recolher */
.midia-teatro[aria-pressed="true"] .midia-teatro-icone {
  background:
    linear-gradient(currentColor, currentColor) 0 100% / 7px 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) 0 100% / 1.5px 7px no-repeat,
    linear-gradient(currentColor, currentColor) 100% 0 / 7px 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) 100% 0 / 1.5px 7px no-repeat;
}

/* ── tira de miniaturas ─────────────────────────────────── */
.tira { display: none; }

#palco.teatro .tira {
  display: flex;
  gap: 2px;
  height: var(--tira-alt);
  padding: var(--e2);
  background: var(--noite);
  border-top: 1px solid var(--fio);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--fio-forte) transparent;
}
.tira::-webkit-scrollbar { height: 6px; }
.tira::-webkit-scrollbar-thumb {
  background: var(--fio-forte); border-radius: 3px;
}

.tira-item {
  position: relative;
  flex: none;
  width: 104px;
  height: 100%;
  padding: 0;
  background: var(--abismo);
  border: 1px solid transparent;
  border-radius: var(--curva);
  cursor: pointer;
  overflow: hidden;
  transition: border-color 200ms, opacity 200ms;
  opacity: 0.62;
}
.tira-item:hover { opacity: 1; border-color: var(--fio-forte); }
.tira-item[aria-current="true"] {
  opacity: 1;
  border-color: var(--areia);
}
.tira-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
/* hora em tarja, legível sobre qualquer foto */
.tira-hora {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 2px 5px;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  font-variant-numeric: tabular-nums;
  color: var(--tinta);
  background: linear-gradient(transparent, color-mix(in oklab, var(--abismo) 92%, transparent) 55%);
  text-align: right;
}
.tira-item[aria-current="true"] .tira-hora { color: var(--areia); }
/* marca de vídeo: um triângulo, nada mais */
.tira-video::before {
  content: "";
  position: absolute;
  top: 5px; left: 6px;
  width: 0; height: 0;
  border-left: 8px solid var(--tinta);
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  filter: drop-shadow(0 0 2px var(--abismo));
}
.tira-item[aria-current="true"].tira-video::before { border-left-color: var(--areia); }

/* ── divisor arrastável ─────────────────────────────────── */
.divisor { display: none; }

#palco.teatro .divisor {
  display: grid;
  place-items: center;
  height: var(--divisor-alt);
  background: var(--noite);
  cursor: ns-resize;
  touch-action: none;
}
#palco.teatro .divisor i {
  width: 42px; height: 3px;
  border-radius: 2px;
  background: var(--fio-forte);
  transition: background 200ms;
}
#palco.teatro .divisor:hover i,
#palco.teatro .divisor:focus-visible i { background: var(--areia); }
#palco.teatro.redimensionando { user-select: none; }

/* Em pé sobra pouca altura: o mapa e a tira encolhem para a foto
   continuar sendo o assunto. */
@media (orientation: portrait), (max-width: 760px) {
  #palco {
    --mapa-alt: clamp(110px, 20vh, 220px);
    --tira-alt: 68px;
  }
  #palco.teatro .tira-item { width: 78px; }
  #palco.teatro .midia-legenda { padding: var(--e2) var(--e3); font-size: 0.8125rem; }
}

@media (prefers-reduced-motion: reduce) {
  #palco.teatro .midia { animation: none; }
}