/*
  RAFAEL 13 — CENTRAL DE MÍDIAS
  ==============================
  Um único CSS, sem pré-processador. Organizado em:
    1. Tokens de design (cor, tipografia, espaçamento, sombra, raio)
    2. Reset e base
    3. Layout geral (header, abas, main, rodapé)
    4. Componentes (botões, cartões de foto, faixas de áudio, popover,
       visualizador, toast, banners)
    5. Estados (loading, vazio, erro, foco, reduced-motion)
    6. Breakpoints (mobile-first: 600px e 900px)

  Paleta e tipografia vêm das artes oficiais da campanha — não são livres,
  são a identidade visual do candidato. Ver decisões completas no relatório
  de entrega.
*/

/* ---------------------------------------------------------------------- */
/* 1. TOKENS DE DESIGN                                                     */
/* ---------------------------------------------------------------------- */

:root {
  /* Cores de marca (extraídas das artes oficiais) */
  --marca-vermelho: #E30613;
  --marca-vermelho-escuro: #B7050F; /* hover/pressed do vermelho */
  --marca-amarelo: #FFD400;
  --marca-verde-limao: #C8DC3C;
  --marca-verde-claro: #EAF0A8;
  --marca-azul: #0B5FAA;
  --marca-azul-escuro: #094A85;
  --marca-ciano: #29A9E0;

  /* Texto x fundo já testados para contraste AA (ver relatório):
     - branco sobre vermelho da marca: 4.9:1
     - tinta sobre amarelo/verde-limão: acima de 13:1
     - branco sobre azul da marca: 6.5:1
     - ciano NUNCA carrega texto em cima: usar só como traço/ícone/fundo com tinta */

  /* Neutros e superfícies */
  --tinta: #17181A;             /* texto principal, quase preto (mais quente que #000) */
  --tinta-suave: #52555B;       /* texto secundário — 4.6:1 sobre branco */
  --fundo: #F6F6F2;             /* fundo da página: neutro levemente quente */
  --superficie: #FFFFFF;        /* cartões, popovers, modais */
  --superficie-2: #F0F0EB;      /* trilhas, chips, fundos discretos */
  --borda: #E4E3DC;
  --borda-forte: #D4D3C9;
  --erro: #C1121F;
  --erro-fundo: #FDEAEA;
  --foco: #0B5FAA;

  /* Tipografia — família única (ver justificativa no relatório) */
  --fonte: "Anek Latin", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --fs-legenda: 0.75rem;     /* 12px — metadados pequenos */
  --fs-meta: 0.8125rem;      /* 13px — durações, formatos */
  --fs-corpo: 0.9375rem;     /* 15px — texto corrido curto */
  --fs-base: 1rem;           /* 16px — inputs, corpo padrão (evita zoom no iOS) */
  --fs-destaque: 1.0625rem;  /* 17px — título de item */
  --fs-subtitulo: 1.25rem;   /* 20px */
  --fs-titulo: 1.5rem;       /* 24px */
  --fs-hero: 1.875rem;       /* 30px — marca no header */

  /* Espaçamento — escala de 4px */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;
  --sp-9: 48px;
  --sp-10: 64px;

  /* Raio e sombra */
  --raio-sm: 10px;
  --raio-md: 16px;
  --raio-lg: 22px;
  --raio-pill: 999px;
  --sombra-cartao: 0 1px 2px rgba(23, 24, 26, 0.06), 0 8px 20px -12px rgba(23, 24, 26, 0.22);
  --sombra-flutuante: 0 12px 32px -8px rgba(23, 24, 26, 0.32);

  /* Alvo de toque mínimo pedido no briefing */
  --toque-min: 48px;

  /* Duração de transição — respeitando prefers-reduced-motion mais abaixo */
  --dur-rapida: 150ms;
  --dur-normal: 220ms;

  /* Área segura (notch / gesture bar) */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}

/* ---------------------------------------------------------------------- */
/* 2. RESET E BASE                                                         */
/* ---------------------------------------------------------------------- */

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

/* O atributo `hidden` do HTML só vale como `display: none` na folha do
   navegador, que perde para qualquer classe que declare `display`. Como o
   JS liga e desliga vários elementos por `.hidden = true`, esta regra
   precisa vencer sempre — senão banner de offline, popover de filtro e
   campo de busca aparecem todos de uma vez. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh; /* fallback para navegadores sem suporte a dvh */
  min-height: 100dvh;
  background: var(--fundo);
  color: var(--tinta);
  font-family: var(--fonte);
  font-size: var(--fs-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  padding-left: var(--safe-left);
  padding-right: var(--safe-right);
}

img { max-width: 100%; display: block; }

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

button {
  border: none;
  background: none;
  cursor: pointer;
  touch-action: manipulation; /* reduz atraso de 300ms no toque */
}

button:disabled { cursor: not-allowed; }

a { color: var(--marca-azul); }

h1, h2, h3 { margin: 0; font-weight: 800; }

/* Link "pular para o conteúdo" — só aparece com foco de teclado */
.pular-link {
  position: absolute;
  left: var(--sp-3);
  top: -100px;
  background: var(--tinta);
  color: #fff;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--raio-sm);
  z-index: 1000;
  transition: top var(--dur-normal) ease;
  font-weight: 700;
}
.pular-link:focus-visible { top: var(--sp-3); }

/* Foco visível consistente em toda a interface */
:focus-visible {
  outline: 3px solid var(--foco);
  outline-offset: 2px;
  border-radius: var(--raio-sm);
}

/* ---------------------------------------------------------------------- */
/* 3. LAYOUT GERAL                                                         */
/* ---------------------------------------------------------------------- */

/* A coluna do site ocupa a altura da tela e empurra o rodapé para o fim.
   Sem isto, aba curta — a Agenda, que é um cartão só — terminava a faixa
   branca do rodapé no meio da tela, com o fundo da página aparecendo
   embaixo, como se a página estivesse cortada. */
.app {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* fallback para navegadores sem suporte a dvh */
  min-height: 100dvh;
}
.app > main { flex: 1 0 auto; }
.app > .rodape { margin-top: auto; }

.banner-aviso {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  background: var(--tinta);
  color: #fff;
  font-size: var(--fs-meta);
  font-weight: 600;
  padding: var(--sp-2) var(--sp-4);
  padding-top: calc(var(--sp-2) + var(--safe-top));
  text-align: center;
  justify-content: center;
}
.banner-aviso svg { flex-shrink: 0; width: 18px; height: 18px; }

.topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-4);
  padding-top: calc(var(--sp-4) + var(--safe-top));
  background: var(--superficie);
  border-bottom: 1px solid var(--borda);
}

.topo__marca { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }

.topo__selo {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: var(--raio-pill);
  background: var(--marca-vermelho);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: -0.5px;
  box-shadow: 0 3px 0 var(--marca-vermelho-escuro);
}

.topo__nomes { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }

.topo__cargo {
  font-size: var(--fs-legenda);
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--marca-azul);
  text-transform: uppercase;
}

.topo__nome {
  font-size: var(--fs-subtitulo);
  font-weight: 800;
  letter-spacing: 0.2px;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topo__nome em { color: var(--marca-vermelho); font-style: normal; }

.topo__vice {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: var(--tinta-suave);
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topo__intro {
  margin: 0;
  padding: var(--sp-3) var(--sp-4) 0;
  color: var(--tinta-suave);
  font-size: var(--fs-corpo);
  font-weight: 600;
}

/* Barra de abas — fixa no topo ao rolar, é a navegação principal */
.barra-abas {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--fundo);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-normal) ease, box-shadow var(--dur-normal) ease;
}
.barra-abas.rolou {
  border-color: var(--borda);
  box-shadow: 0 6px 16px -12px rgba(23,24,26,0.35);
}

/* No celular as abas ficam numa linha só delas, e a busca/filtro descem
   para a linha de baixo. Dividindo a mesma linha, as ações reservavam 218px
   fixos e sobravam 139px para as abas — "ÁUDIOS" chegava cortada atrás da
   lupa, justamente a aba com quase todo o material. E não é um aperto de
   agora: com as quatro categorias previstas (fotos, vídeos, áudios e
   figurinhas) uma linha só nunca caberia. */
.barra-abas { flex-wrap: wrap; row-gap: var(--sp-2); }

.barra-abas__scroll {
  overflow-x: auto;
  scrollbar-width: none;
  flex: 1 1 100%;
  min-width: 0;
}
.barra-abas__scroll::-webkit-scrollbar { display: none; }

.barra-abas__tabs {
  display: flex;
  gap: var(--sp-2);
  width: max-content;
}

.aba {
  display: inline-flex;
  align-items: center;
  height: var(--toque-min);
  padding: 0 var(--sp-5);
  border-radius: var(--raio-pill);
  font-weight: 800;
  font-size: var(--fs-corpo);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  background: var(--superficie);
  border: 1.5px solid var(--borda);
  color: var(--tinta-suave);
  white-space: nowrap;
  transition: background var(--dur-rapida) ease, color var(--dur-rapida) ease, border-color var(--dur-rapida) ease;
}
.aba[aria-selected="true"] {
  background: var(--marca-vermelho);
  border-color: var(--marca-vermelho);
  color: #fff;
}
.aba:hover:not([aria-selected="true"]) { border-color: var(--borda-forte); }

.barra-abas__acoes { display: flex; align-items: center; gap: var(--sp-2); flex-shrink: 0; }
.filtro-wrap { position: relative; flex-shrink: 0; }

.botao-icone {
  width: var(--toque-min);
  height: var(--toque-min);
  border-radius: var(--raio-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--superficie);
  border: 1.5px solid var(--borda);
  color: var(--tinta);
  position: relative;
  flex-shrink: 0;
}
/* Sem isto os ícones somem no celular. Os SVG inline só têm viewBox, sem
   width/height próprios; como item de flex sem tamanho intrínseco, o Safari
   do iPhone resolve para zero e o botão fica vazio. O Chrome do desktop
   disfarça o problema aplicando o tamanho padrão de elemento substituído.
   Atinge a lupa da busca, o limpar-busca e o X que fecha a arte. */
.botao-icone svg { width: 22px; height: 22px; flex-shrink: 0; }
.botao-icone:hover { border-color: var(--borda-forte); }
.botao-icone[aria-expanded="true"], .botao-icone[aria-pressed="true"] {
  background: var(--tinta);
  border-color: var(--tinta);
  color: #fff;
}

.botao-filtro {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  height: var(--toque-min);
  padding: 0 var(--sp-4);
  border-radius: var(--raio-pill);
  background: var(--superficie);
  border: 1.5px solid var(--borda);
  font-weight: 700;
  font-size: var(--fs-meta);
  white-space: nowrap;
  flex-shrink: 0;
}
.botao-filtro[aria-expanded="true"] { border-color: var(--marca-azul); color: var(--marca-azul); }
.botao-filtro svg { width: 18px; height: 18px; flex-shrink: 0; }
.botao-filtro__contagem {
  background: var(--marca-vermelho);
  color: #fff;
  border-radius: var(--raio-pill);
  font-size: 11px;
  font-weight: 800;
  min-width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
}

/* Campo de busca — some por padrão, some sem roubar espaço da grade */
.campo-busca {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0 var(--sp-4) var(--sp-3);
  padding: 0 var(--sp-4);
  height: var(--toque-min);
  background: var(--superficie);
  border: 1.5px solid var(--borda);
  border-radius: var(--raio-pill);
}
.campo-busca svg { width: 18px; height: 18px; color: var(--tinta-suave); flex-shrink: 0; }
.campo-busca input {
  flex: 1;
  min-width: 0;
  border: none;
  background: none;
  font-size: var(--fs-base); /* 16px: evita zoom automático no iOS */
  height: 100%;
}
.campo-busca input:focus-visible { outline: none; }
.campo-busca .botao-icone { width: 32px; height: 32px; border: none; background: var(--superficie-2); }

main { display: block; padding-bottom: var(--sp-10); }

.painel { padding: 0 var(--sp-4) var(--sp-7); }

.painel__cabecalho {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--sp-3);
}
.painel__titulo { font-size: var(--fs-subtitulo); }
.painel__contagem { font-size: var(--fs-meta); color: var(--tinta-suave); font-weight: 600; }

/* ---------------------------------------------------------------------- */
/* 4. COMPONENTES                                                          */
/* ---------------------------------------------------------------------- */

/* --- Botão primário (compartilhar / ação principal) --- */
.botao-primario {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  width: 100%;
  height: 56px;
  border-radius: var(--raio-md);
  background: var(--marca-vermelho);
  color: #fff;
  font-weight: 800;
  font-size: var(--fs-destaque);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  transition: background var(--dur-rapida) ease, transform var(--dur-rapida) ease;
}
.botao-primario svg { width: 22px; height: 22px; }
.botao-primario:hover { background: var(--marca-vermelho-escuro); }
.botao-primario:active { transform: scale(0.98); }
.botao-primario:disabled { background: var(--marca-vermelho); opacity: 0.7; }

/* Estado de carregando: reaproveitado em qualquer botão de ação (spinner via ::after,
   sem precisar de marcação extra — o botão mantém o tamanho, então nada pula na tela) */
.botao-primario[aria-busy="true"] > *,
.faixa__compartilhar[aria-busy="true"] > *,
.faixa__play[aria-busy="true"] > * {
  visibility: hidden;
}
.botao-primario[aria-busy="true"]::after,
.faixa__compartilhar[aria-busy="true"]::after,
.faixa__play[aria-busy="true"]::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 3px solid currentColor;
  border-top-color: transparent;
  animation: girar 0.7s linear infinite;
}

@keyframes girar { to { transform: rotate(360deg); } }

/* --- Grade de fotos --- */
.grade-fotos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-3);
  align-items: start;
}

.cartao-foto {
  display: flex;
  flex-direction: column;
  background: var(--superficie);
  border-radius: var(--raio-md);
  overflow: hidden;
  border: 1px solid var(--borda);
  box-shadow: var(--sombra-cartao);
  text-align: left;
  transition: transform var(--dur-rapida) ease, box-shadow var(--dur-rapida) ease;
}
.cartao-foto:hover { transform: translateY(-2px); box-shadow: var(--sombra-flutuante); }
.cartao-foto:active { transform: translateY(0) scale(0.99); }

.cartao-foto__img {
  width: 100%;
  background: var(--superficie-2);
  position: relative;
}
/* A largura vem do container; a altura é automática — a proporção real da
   miniatura é preservada via os atributos width/height do <img> (evita
   corte de rosto e também evita "pulo" de layout ao carregar). */
.cartao-foto__img img { width: 100%; height: auto; }

.cartao-foto__corpo {
  padding: var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  flex: 1;
}
.cartao-foto__titulo {
  font-size: var(--fs-corpo);
  font-weight: 700;
  line-height: 1.25;
}
.cartao-foto__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-1);
  margin-top: auto;
}

.etiqueta {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 var(--sp-2);
  border-radius: var(--raio-pill);
  background: var(--superficie-2);
  border: 1px solid var(--borda);
  font-size: 11px;
  font-weight: 700;
  color: var(--tinta-suave);
  white-space: nowrap;
}
.etiqueta--formato {
  background: var(--tinta);
  color: #fff;
  border-color: var(--tinta);
  font-variant-numeric: tabular-nums;
}

/* --- Lista de áudios --- */
.lista-audios { display: flex; flex-direction: column; gap: var(--sp-3); }

.faixa {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-md);
  padding: var(--sp-3);
  box-shadow: var(--sombra-cartao);
}
/* Linha de cima do card: ouvir antes de mandar. */
.faixa__topo {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.faixa.tocando { border-color: var(--marca-vermelho); }

.faixa__play {
  position: relative;
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--marca-vermelho);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.faixa__play svg { width: 22px; height: 22px; }
.faixa__play:hover { background: var(--marca-vermelho-escuro); }

.faixa__corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-1); }

.faixa__linha1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
}
.faixa__titulo {
  font-weight: 700;
  font-size: var(--fs-corpo);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.faixa__range {
  --progresso: 0%; /* atualizado via JS (setProperty) a cada timeupdate do áudio */
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 32px; /* área de toque maior que o traço visual (6px), para arrastar com facilidade */
  background: transparent;
  margin: 0;
}
/* Custom property em vez de "background" direto no input: propriedades CSS
   customizadas herdam para dentro de pseudo-elementos, o "background" do
   próprio input não. É assim que o preenchimento vermelho chega até o
   ::-webkit-slider-runnable-track. */
.faixa__range::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: var(--raio-pill);
  background: linear-gradient(to right, var(--marca-vermelho) var(--progresso), var(--borda-forte) var(--progresso));
}
.faixa__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--marca-vermelho);
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--borda-forte);
  margin-top: -5px;
  cursor: pointer;
}
.faixa__range::-moz-range-track {
  height: 6px;
  border-radius: var(--raio-pill);
  background: var(--borda-forte);
}
.faixa__range::-moz-range-progress {
  height: 6px;
  border-radius: var(--raio-pill);
  background: var(--marca-vermelho);
}
.faixa__range::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--marca-vermelho);
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--borda-forte);
  cursor: pointer;
}
.faixa__range:disabled { opacity: 0.5; }

.faixa__tempos {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 600;
  color: var(--tinta-suave);
  font-variant-numeric: tabular-nums;
}

/* Botão escrito, largura toda, mesma cor e peso do das fotos: é a ação
   principal do site e precisa ser lida como tal. Um pouco mais baixo que o
   .botao-primario (56px) porque aqui ele se repete em 23 cards seguidos. */
.faixa__compartilhar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  width: 100%;
  height: var(--toque-min);
  border-radius: var(--raio-sm);
  background: var(--marca-vermelho);
  color: #fff;
  font-weight: 800;
  font-size: var(--fs-corpo);
}
.faixa__compartilhar svg { width: 20px; height: 20px; flex-shrink: 0; }
.faixa__compartilhar:hover { background: var(--marca-vermelho-escuro); }
.faixa__compartilhar:disabled { opacity: 0.85; }

/* --- Bloco de legenda pronta (copiar / abrir WhatsApp) --- */
.bloco-legenda {
  background: var(--superficie-2);
  border: 1px solid var(--borda);
  border-radius: var(--raio-md);
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.bloco-legenda__texto {
  margin: 0;
  font-size: var(--fs-corpo);
  line-height: 1.5;
  white-space: pre-wrap;
}
.bloco-legenda__acoes { display: flex; gap: var(--sp-2); flex-wrap: wrap; }

.botao-secundario {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  height: var(--toque-min);
  padding: 0 var(--sp-4);
  border-radius: var(--raio-md);
  background: var(--superficie);
  border: 1.5px solid var(--borda-forte);
  font-weight: 700;
  font-size: var(--fs-meta);
}
.botao-secundario svg { width: 18px; height: 18px; }
.botao-secundario:hover { border-color: var(--tinta); }
.botao-secundario--whatsapp { background: #25D366; border-color: #25D366; color: #073318; }
.botao-secundario--whatsapp:hover { background: #1FBE5A; }

/* --- Popover de filtro por destino --- */
.popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 50;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-md);
  box-shadow: var(--sombra-flutuante);
  padding: var(--sp-2);
  min-width: 220px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.popover[hidden] { display: none; }
.popover button {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  height: var(--toque-min);
  padding: 0 var(--sp-3);
  border-radius: var(--raio-sm);
  font-weight: 600;
  font-size: var(--fs-corpo);
  text-align: left;
  width: 100%;
}
.popover button:hover { background: var(--superficie-2); }
.popover button[aria-checked="true"] { color: var(--marca-azul); font-weight: 800; }
.popover button .marca-check { margin-left: auto; width: 18px; height: 18px; visibility: hidden; }
.popover button[aria-checked="true"] .marca-check { visibility: visible; }

/* --- Estados vazio / erro --- */
.estado-vazio {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-3);
  padding: var(--sp-9) var(--sp-4);
  color: var(--tinta-suave);
}
.estado-vazio svg { width: 56px; height: 56px; opacity: 0.5; }
.estado-vazio p { margin: 0; font-size: var(--fs-corpo); max-width: 30ch; }
.estado-vazio button {
  display: inline-flex;
  align-items: center;
  min-height: var(--toque-min);
  padding: 0 var(--sp-2);
  color: var(--marca-azul);
  font-weight: 700;
  text-decoration: underline;
}

.mensagem-erro {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  background: var(--erro-fundo);
  color: var(--erro);
  border: 1px solid #F3C6C6;
  border-radius: var(--raio-md);
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-corpo);
  font-weight: 600;
}
.mensagem-erro svg { flex-shrink: 0; width: 20px; height: 20px; margin-top: 1px; }

/* --- Seção de links externos --- */
.secao-links { padding: 0 var(--sp-4) var(--sp-7); }
.secao-links h2 { font-size: var(--fs-subtitulo); margin-bottom: var(--sp-3); }
.secao-links ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.secao-links a {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  height: var(--toque-min);
  padding: 0 var(--sp-4);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-md);
  font-weight: 700;
  text-decoration: none;
  color: var(--tinta);
}
.secao-links a:hover { border-color: var(--marca-azul); }
.secao-links svg { flex-shrink: 0; width: 20px; height: 20px; color: var(--marca-azul); }

/* --- Visualizador de foto (lightbox) --- */
.visualizador {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.visualizador[hidden] { display: none; }
.visualizador__fundo {
  position: absolute;
  inset: 0;
  background: rgba(15, 15, 12, 0.72);
}
.visualizador__caixa {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 480px;
  max-height: 92vh; /* fallback para navegadores sem suporte a dvh */
  max-height: 92dvh;
  background: var(--superficie);
  border-radius: var(--raio-lg) var(--raio-lg) 0 0;
  overflow: hidden; /* nada de rolagem: a arte se ajusta ao que couber */
  display: flex;
  flex-direction: column;
  padding-bottom: var(--safe-bottom);
}
@media (min-width: 600px) {
  .visualizador { align-items: center; }
  .visualizador__caixa { border-radius: var(--raio-lg); max-height: 88vh; max-height: 88dvh; }

  /* Com largura sobrando, abas e ações voltam para a mesma linha. */
  .barra-abas { flex-wrap: nowrap; }
  .barra-abas__scroll { flex: 1 1 auto; }
}
.visualizador__fechar {
  position: absolute;
  top: var(--sp-3);
  right: var(--sp-3);
  z-index: 2;
  background: rgba(23, 24, 26, 0.55);
  border-color: transparent;
  color: #fff;
}
.visualizador__fechar:hover { background: rgba(23, 24, 26, 0.75); }
/* A arte ocupa só a altura que sobra depois do rodapé e se ajusta inteira
   ali dentro. `min-height: 0` é o que permite encolher: sem isso, item de
   flex não passa do tamanho natural do conteúdo e a imagem empurraria o
   botão de compartilhar para fora da tela. `contain` garante que a peça
   apareça completa, sem corte — e nada disso altera o arquivo enviado, que
   é sempre o original em tamanho cheio. */
.visualizador img {
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  object-fit: contain;
  background: var(--superficie-2);
}
.visualizador__rodape {
  flex: 0 0 auto;
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.visualizador__titulo { font-size: var(--fs-destaque); font-weight: 800; }

/* --- Aba Agenda: cartão único que leva ao canal do WhatsApp --- */
.agenda {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-md);
  box-shadow: var(--sombra-cartao);
  padding: var(--sp-6) var(--sp-4);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
  text-align: center;
}

/* Selo com o ícone de calendário nas cores da campanha. */
.agenda__selo {
  width: 64px;
  height: 64px;
  border-radius: var(--raio-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--marca-verde-claro);
  color: var(--marca-azul);
  flex-shrink: 0;
}
.agenda__selo svg { width: 30px; height: 30px; }

.agenda__chamada {
  margin: 0;
  font-size: var(--fs-corpo);
  color: var(--tinta-suave);
  max-width: 42ch;
}

/* O "Entrar no canal" é um link, não um botão: precisa anular o sublinhado
   que o navegador põe em <a> por padrão. */
.agenda__entrar { text-decoration: none; }
.agenda__entrar,
.agenda__compartilhar { width: 100%; justify-content: center; }

.agenda__aviso {
  margin: 0;
  font-size: var(--fs-legenda);
  color: var(--tinta-suave);
  max-width: 40ch;
}

@media (min-width: 600px) {
  .agenda { padding: var(--sp-8) var(--sp-6); }
  .agenda__entrar,
  .agenda__compartilhar { width: auto; min-width: 260px; }
}

/* --- Toasts --- */
.toast-pilha {
  position: fixed;
  left: var(--sp-4);
  right: var(--sp-4);
  bottom: calc(var(--sp-4) + var(--safe-bottom));
  z-index: 200;
  display: flex;
  flex-direction: column-reverse;
  gap: var(--sp-2);
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  background: var(--tinta);
  color: #fff;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--raio-md);
  font-size: var(--fs-corpo);
  font-weight: 600;
  box-shadow: var(--sombra-flutuante);
  animation: entrar-toast var(--dur-normal) ease;
}
.toast svg { flex-shrink: 0; width: 20px; height: 20px; }
.toast--erro { background: var(--erro); }
.toast--sucesso { background: #1F7A3D; }
@keyframes entrar-toast {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.rodape {
  padding: var(--sp-7) var(--sp-4);
  padding-bottom: calc(var(--sp-7) + var(--safe-bottom));
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  border-top: 1px solid var(--borda);
  background: var(--superficie);
}
.rodape__legal {
  margin: 0;
  font-size: 11px;
  color: var(--tinta-suave);
  line-height: 1.6;
}

/* ---------------------------------------------------------------------- */
/* 5. ACESSIBILIDADE — MOVIMENTO REDUZIDO                                  */
/* ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .botao-primario[aria-busy="true"]::after,
  .faixa__compartilhar[aria-busy="true"]::after,
  .faixa__play[aria-busy="true"]::after {
    animation-duration: 1.1s !important; /* o giro do spinner continua — é informativo, não decorativo */
  }
}

/* ---------------------------------------------------------------------- */
/* 6. BREAKPOINTS (mobile-first)                                           */
/* ---------------------------------------------------------------------- */

@media (min-width: 600px) {
  .topo, .barra-abas, .painel, .secao-links, .rodape, .campo-busca { padding-left: var(--sp-6); padding-right: var(--sp-6); }
  .grade-fotos { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 900px) {
  body { display: flex; justify-content: center; }
  .app { width: 100%; max-width: 640px; }
}