@charset "UTF-8";
/* =====================================================================
   COPA VELA 2026 - Paulo Afonso / BA
   Folha de estilo do site publico

   Sumario
   1. Fontes
   2. Variaveis e reserva de tema
   3. Base e acessibilidade
   4. Componentes de uso geral
   5. Cabecalho e navegacao
   6. Abertura (hero)
   7. Numeros
   8. Atracoes
   9. Agenda
   10. Diario
   11. Pode e nao pode
   12. Informacoes e mapa
   13. A cidade
   14. Instagram
   15. Duvidas
   16. Transmissao ao vivo
   17. Meu roteiro
   18. Galeria e retrospectiva
   19. Barra de atalhos do celular
   20. Rodape
   21. Paginas internas
   22. Acessibilidade (barra de recursos)
   23. Animacoes de entrada
   24. Preferencias do visitante
   25. Seguranca do evento
   26. Operacao de drones
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Fontes - servidas pelo proprio dominio, sem CDN de terceiros
   --------------------------------------------------------------------- */
@font-face {
  font-family: 'Anton';
  src: url('/assets/fonts/anton-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Anton';
  src: url('/assets/fonts/anton-latin-ext-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Archivo Black';
  src: url('/assets/fonts/archivo-black-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo Black';
  src: url('/assets/fonts/archivo-black-latin-ext-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+2C60-2C7F;
}

@font-face {
  font-family: 'Chakra Petch';
  src: url('/assets/fonts/chakra-petch-latin-700-normal.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Chakra Petch';
  src: url('/assets/fonts/chakra-petch-latin-600-normal.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/inter-latin-400-normal.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/inter-latin-ext-400-normal.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+1E00-1E9F, U+1EF2-1EFF, U+2C60-2C7F;
}
@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/inter-latin-500-normal.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/inter-latin-600-normal.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/inter-latin-ext-600-normal.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+1E00-1E9F, U+1EF2-1EFF, U+2C60-2C7F;
}
@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/inter-latin-700-normal.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/inter-latin-800-normal.woff2') format('woff2');
  font-weight: 800; font-style: normal; font-display: swap;
}

/* ---------------------------------------------------------------------
   2. Variaveis
   --------------------------------------------------------------------- */
:root {
  /* Paleta do evento, extraida das pecas oficiais */
  --preto:      #0A0A0A;
  --preto-2:    #121214;
  --preto-3:    #1A1A1E;
  --grafite:    #26262C;
  --cinza:      #8A8A94;
  --cinza-claro:#C9C9D2;
  --branco:     #FFFFFF;

  --lima:       #B4FF00;
  --magenta:    #FF0080;
  --roxo:       #7C2FFF;
  --ciano:      #00D4FF;
  --amarelo:    #FFE500;
  --laranja:    #FF6B00;
  --lilas:      #B39DFF;

  /* Institucional da prefeitura, usado nos elos com o portal oficial */
  --azul-pa:    #1A7BC0;
  --azul-pa-esc:#053283;

  --fundo:      var(--preto);
  --fundo-2:    var(--preto-2);
  --texto:      var(--branco);
  --texto-2:    var(--cinza-claro);
  --texto-3:    var(--cinza);
  --borda:      rgba(255, 255, 255, 0.10);
  --borda-forte:rgba(255, 255, 255, 0.22);

  --destaque:   var(--lima);

  /* Tipografia */
  --fonte-display: 'Anton', 'Arial Narrow', Impact, sans-serif;
  --fonte-nome:    'Archivo Black', 'Arial Black', Impact, sans-serif;
  --fonte-tec:     'Chakra Petch', 'Segoe UI', system-ui, sans-serif;
  --fonte-corpo:   'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Escala fluida */
  --t-mega:  clamp(3.2rem, 12vw, 9rem);
  --t-xxl:   clamp(2.4rem, 7vw, 5.2rem);
  --t-xl:    clamp(1.9rem, 4.6vw, 3.4rem);
  --t-lg:    clamp(1.4rem, 2.8vw, 2rem);
  --t-md:    clamp(1.05rem, 1.7vw, 1.25rem);
  --t-base:  1rem;
  --t-sm:    0.875rem;
  --t-xs:    0.78rem;

  /* Espacamento */
  --gutter:  clamp(1.15rem, 4vw, 3rem);
  --secao-y: clamp(4rem, 10vw, 8.5rem);
  --largura: 1240px;

  /* Formas */
  --inclinacao: -14deg;
  --raio:    14px;
  --raio-sm: 8px;

  /* Movimento */
  --transicao: 260ms cubic-bezier(0.22, 0.68, 0.24, 1);
  --transicao-lenta: 620ms cubic-bezier(0.16, 0.84, 0.24, 1);

  --sombra-alta: 0 26px 70px -24px rgba(0, 0, 0, 0.85);
  --cabecalho-altura: 74px;
}

/* Fase do evento influencia a cor de destaque */
html[data-fase='ao_vivo'] { --destaque: var(--magenta); }
html[data-fase='depois']  { --destaque: var(--ciano); }

/* ---------------------------------------------------------------------
   3. Base
   --------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--cabecalho-altura) + 16px);
  /* Impede que a borda inclinada de um botao ou faixa crie rolagem
     lateral no celular. clip nao gera contexto de rolagem, ao contrario
     de hidden, e por isso nao quebra o position: sticky do cabecalho. */
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--fonte-corpo);
  font-size: var(--t-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}

img, picture, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }

h1, h2, h3, h4, h5 { margin: 0; line-height: 1.05; text-wrap: balance; }
p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

/* O atributo hidden precisa vencer qualquer display definido por classe */
[hidden] { display: none !important; }

a { color: inherit; text-decoration: none; }
a:where(:not([class])) {
  color: var(--destaque);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
a:where(:not([class])):hover { text-decoration-thickness: 2px; }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

:focus-visible {
  outline: 3px solid var(--destaque);
  outline-offset: 3px;
  border-radius: 3px;
}

::selection { background: var(--lima); color: var(--preto); }

/* Barra de rolagem discreta, no tom do site */
* { scrollbar-width: thin; scrollbar-color: var(--grafite) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--grafite); border-radius: 99px; }

.pular-para-conteudo {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translate(-50%, -110%);
  z-index: 200;
  padding: 0.85rem 1.6rem;
  background: var(--lima);
  color: var(--preto);
  font-family: var(--fonte-tec);
  font-weight: 700;
  border-radius: 0 0 var(--raio-sm) var(--raio-sm);
  transition: transform var(--transicao);
}
.pular-para-conteudo:focus { transform: translate(-50%, 0); }

.apenas-leitor {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------------
   4. Componentes de uso geral
   --------------------------------------------------------------------- */
.secao { position: relative; padding: var(--secao-y) 0; }
.secao__interno {
  width: 100%;
  max-width: var(--largura);
  margin: 0 auto;
  padding: 0 var(--gutter);
  position: relative;
  z-index: 2;
}

.secao__cabecalho { max-width: 58ch; margin-bottom: clamp(2.2rem, 5vw, 3.6rem); }
.secao__cabecalho--compacto { margin-bottom: clamp(1.4rem, 3vw, 2.2rem); }

.secao__etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.9rem;
  font-family: var(--fonte-tec);
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--destaque);
}
.secao__etiqueta::before {
  content: '';
  width: 28px;
  height: 3px;
  background: currentColor;
  transform: skewX(var(--inclinacao));
}

.secao__titulo {
  font-family: var(--fonte-display);
  font-size: var(--t-xxl);
  font-weight: 400;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  margin-bottom: 0.7em;
}

.secao__texto { color: var(--texto-2); font-size: var(--t-md); }
.secao__nota {
  margin-top: 2.2rem;
  font-size: var(--t-sm);
  color: var(--texto-3);
  font-style: italic;
}

.etiqueta {
  display: inline-block;
  padding: 0.28rem 0.75rem;
  font-family: var(--fonte-tec);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--preto);
  background: var(--branco);
  transform: skewX(var(--inclinacao));
}
.etiqueta > * { display: inline-block; transform: skewX(calc(var(--inclinacao) * -1)); }
.etiqueta--lima { background: var(--lima); }
.etiqueta--magenta { background: var(--magenta); color: var(--branco); }
.etiqueta--contorno {
  background: transparent;
  color: var(--branco);
  box-shadow: inset 0 0 0 1px var(--borda-forte);
}

.botao {
  --botao-fundo: var(--destaque);
  --botao-texto: var(--preto);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.95rem 1.7rem;
  font-family: var(--fonte-tec);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--botao-texto);
  background: var(--botao-fundo);
  border: 2px solid var(--botao-fundo);
  clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
  transition: transform var(--transicao), background var(--transicao), color var(--transicao), border-color var(--transicao);
  will-change: transform;
}
.botao:hover { transform: translateY(-2px) scale(1.015); }
.botao:active { transform: translateY(0) scale(0.995); }
.botao svg { flex: none; transition: transform var(--transicao); }
.botao:hover svg { transform: translateX(3px); }

.botao--destaque { --botao-fundo: var(--destaque); --botao-texto: var(--preto); }

/*
  O recorte inclinado corta as laterais e, com ele, a borda vertical: um
  botao vazado ficaria com dois riscos soltos em cima e embaixo. Por isso
  o formato inclinado fica reservado ao botao principal, e os secundarios
  usam canto reto. O resultado tambem ajuda a hierarquia: a forma da
  marca marca a acao que importa.
*/
.botao--contorno {
  --botao-fundo: transparent;
  --botao-texto: var(--branco);
  border-color: var(--borda-forte);
  clip-path: none;
  border-radius: var(--raio-sm);
}
.botao--contorno:hover { border-color: var(--destaque); color: var(--destaque); }
.botao--fantasma {
  --botao-fundo: transparent;
  --botao-texto: var(--texto-2);
  border-color: transparent;
  text-decoration: underline;
  text-underline-offset: 5px;
  clip-path: none;
  padding-inline: 0.5rem;
}
.botao--fantasma:hover { color: var(--branco); }
.botao--pequeno { padding: 0.7rem 1.2rem; font-size: 0.82rem; }
.botao--largo { width: 100%; }
/* O recorte inclinado projeta a borda para fora da caixa; sem este
   limite, um botao largo empurra a largura da pagina no celular. */
.botao { max-width: 100%; }

.ponto-vivo {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--magenta);
  box-shadow: 0 0 0 0 rgba(255, 0, 128, 0.7);
  animation: pulsar 1.9s infinite;
  flex: none;
}
@keyframes pulsar {
  0%   { box-shadow: 0 0 0 0 rgba(255, 0, 128, 0.65); }
  70%  { box-shadow: 0 0 0 11px rgba(255, 0, 128, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 0, 128, 0); }
}

.contador-roteiro {
  position: absolute;
  top: -5px; right: -5px;
  min-width: 19px; height: 19px;
  display: grid;
  place-items: center;
  padding: 0 4px;
  font-family: var(--fonte-tec);
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--preto);
  background: var(--lima);
  border-radius: 99px;
}
.contador-roteiro--inline { position: static; margin-left: 0.35rem; }

/* Barra de aviso urgente */
.barra-aviso {
  position: relative;
  z-index: 90;
  background: var(--ciano);
  color: var(--preto);
  font-size: var(--t-sm);
}
.barra-aviso--alerta  { background: var(--amarelo); }
.barra-aviso--critico { background: var(--magenta); color: var(--branco); }
.barra-aviso__interno {
  max-width: var(--largura);
  margin: 0 auto;
  padding: 0.7rem calc(var(--gutter) + 2rem) 0.7rem var(--gutter);
  display: flex;
  align-items: center;
  gap: 0.7rem;
  position: relative;
}
.barra-aviso__interno p { margin: 0; font-weight: 600; }
.barra-aviso__icone { font-size: 1.1rem; flex: none; }
.barra-aviso__interno a { color: inherit; text-decoration: underline; font-weight: 700; white-space: nowrap; }
.barra-aviso__fechar {
  position: absolute;
  right: var(--gutter);
  top: 50%;
  transform: translateY(-50%);
  width: 28px; height: 28px;
  font-size: 1.4rem;
  line-height: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.barra-aviso__fechar:hover { background: rgba(0, 0, 0, 0.12); }

/* Aviso flutuante (retorno de acoes) */
.aviso-flutuante {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translate(-50%, 20px);
  z-index: 160;
  max-width: min(92vw, 26rem);
  padding: 0.85rem 1.3rem;
  background: var(--branco);
  color: var(--preto);
  font-family: var(--fonte-tec);
  font-weight: 700;
  font-size: 0.9rem;
  text-align: center;
  border-radius: var(--raio-sm);
  box-shadow: var(--sombra-alta);
  opacity: 0;
  transition: opacity var(--transicao), transform var(--transicao);
}
.aviso-flutuante[data-visivel] { opacity: 1; transform: translate(-50%, 0); }

/* ---------------------------------------------------------------------
   5. Cabecalho
   --------------------------------------------------------------------- */
.cabecalho {
  position: sticky;
  top: 0;
  z-index: 80;
  background: rgba(10, 10, 10, 0);
  transition: background var(--transicao), border-color var(--transicao), backdrop-filter var(--transicao);
  border-bottom: 1px solid transparent;
}
.cabecalho[data-fixo] {
  background: rgba(10, 10, 10, 0.88);
  backdrop-filter: blur(16px) saturate(150%);
  border-bottom-color: var(--borda);
}
.cabecalho__interno {
  max-width: var(--largura);
  margin: 0 auto;
  padding: 0.7rem var(--gutter);
  min-height: var(--cabecalho-altura);
  display: flex;
  align-items: center;
  gap: 1.2rem;
}
.cabecalho__marca { flex: none; }
.cabecalho__marca img { width: 96px; height: auto; transition: transform var(--transicao); }
.cabecalho__marca:hover img { transform: scale(1.04); }

.navegacao {
  /* Cresce para ocupar o vao entre a marca e os botoes. Nao usa
     margin-left: auto: com as acoes tambem em auto, os dois dividiriam
     o espaco livre e a lista quebraria de linha sem necessidade. */
  flex: 1 1 auto;
  min-width: 0;
}

/* Link que sai do site, no menu: a seta avisa antes do toque. O item
   nao recebe o sublinhado de secao ativa, porque nao e uma secao desta
   pagina. */
.navegacao__lista {
  display: flex;
  align-items: center;
  /* Alinhado a direita, encostando nos botoes do cabecalho */
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: clamp(0.7rem, 1.6vw, 1.6rem);
}
.navegacao__lista a {
  display: inline-block;
  padding: 0.4rem 0;
  font-family: var(--fonte-tec);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--texto-2);
  position: relative;
  transition: color var(--transicao);
}
.navegacao__lista a::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 2px;
  background: var(--destaque);
  transition: width var(--transicao);
}
.navegacao__lista a:hover { color: var(--branco); }
.navegacao__lista a:hover::after { width: 100%; }
.navegacao__ao-vivo {
  display: inline-flex !important;
  align-items: center;
  gap: 0.45rem;
  color: var(--branco) !important;
}

/* margin-left: auto aqui, e nao so na navegacao: abaixo de 1080px a
   navegacao vira position: fixed e sai do fluxo, e sem isto a marca e
   os botoes ficavam os dois grudados na esquerda. */
.cabecalho__acoes { display: flex; align-items: center; gap: 0.4rem; flex: none; margin-left: auto; }

.botao-icone {
  position: relative;
  width: 42px; height: 42px;
  display: grid;
  place-items: center;
  color: var(--texto-2);
  border: 1px solid var(--borda);
  border-radius: 50%;
  transition: color var(--transicao), border-color var(--transicao), background var(--transicao);
}
.botao-icone:hover { color: var(--branco); border-color: var(--borda-forte); background: rgba(255, 255, 255, 0.05); }

.botao-menu { display: none; width: 42px; height: 42px; padding: 10px; }
.botao-menu span {
  display: block;
  height: 2px;
  background: var(--branco);
  border-radius: 2px;
  transition: transform var(--transicao), opacity var(--transicao);
}
.botao-menu span + span { margin-top: 5px; }
.botao-menu[aria-expanded='true'] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.botao-menu[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.botao-menu[aria-expanded='true'] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* O menu vira painel a partir daqui. O limite subiu de 1080 para 1120
   quando Seguranca entrou na barra: com oito itens, abaixo disso a
   lista quebrava em duas linhas e empurrava o cabecalho. */
/* Submenu do menu principal.
   No desktop ele e um painel que abre sobre a pagina; a area de hover
   inclui o proprio item, entao o ponteiro nao "cai" no caminho. */
.navegacao__com-sub { position: relative; }
.navegacao__sub {
  position: absolute;
  top: 100%;
  left: 50%;
  z-index: 30;
  min-width: 10rem;
  padding: 0.4rem;
  list-style: none;
  background: var(--fundo-2);
  border: 1px solid var(--borda);
  border-radius: 10px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  opacity: 0;
  transform: translate(-50%, -6px);
  visibility: hidden;
  transition: opacity var(--transicao), transform var(--transicao), visibility var(--transicao);
}
.navegacao__com-sub:hover .navegacao__sub,
.navegacao__com-sub:focus-within .navegacao__sub {
  opacity: 1;
  transform: translate(-50%, 0);
  visibility: visible;
}
.navegacao__sub a {
  display: block;
  padding: 0.5rem 0.7rem;
  border-radius: 6px;
  white-space: nowrap;
}
.navegacao__sub a:hover,
.navegacao__sub a:focus-visible { background: rgba(255, 255, 255, 0.06); }

@media (max-width: 1120px) {
  .botao-menu { display: block; }
  /* No painel do celular nao ha hover: o submenu fica a vista, recuado
     e com um traco que mostra a quem ele pertence. */
  .navegacao__sub {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    min-width: 0;
    margin: 0 0 0 1rem;
    padding: 0;
    background: none;
    border: 0;
    border-left: 2px solid var(--borda-forte);
    border-radius: 0;
    box-shadow: none;
  }
  .navegacao__sub a { padding: 0.75rem 0 0.75rem 0.9rem; font-size: 0.95rem; }
  .navegacao__com-sub > a { border-bottom: 0; }
  .navegacao {
    position: fixed;
    inset: var(--cabecalho-altura) 0 auto;
    margin: 0;
    background: rgba(10, 10, 10, 0.97);
    backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--borda);
    max-height: calc(100dvh - var(--cabecalho-altura));
    overflow-y: auto;
    clip-path: inset(0 0 100% 0);
    transition: clip-path var(--transicao-lenta);
  }
  .navegacao[data-aberto] { clip-path: inset(0 0 0 0); }
  .navegacao__lista {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.5rem var(--gutter) 1.6rem;
  }
  .navegacao__lista li { border-bottom: 1px solid var(--borda); }
  .navegacao__lista a { padding: 1.05rem 0; font-size: 1rem; }
  .navegacao__lista a::after { display: none; }
}

/* ---------------------------------------------------------------------
   6. Abertura
   --------------------------------------------------------------------- */
.hero {
  position: relative;
  /* Coluna, não linha: os blocos do conteúdo (grade principal e faixa de
     line-up) se empilham. Em linha, o line-up disputaria largura com a
     grade e as duas colunas internas colapsariam. */
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Desconta o cabeçalho: ele ocupa espaço no fluxo, então usar 100svh
     cheio empurraria os botões para fora da primeira tela. */
  min-height: min(calc(100svh - var(--cabecalho-altura)), 900px);
  padding: clamp(1.4rem, 3.4vh, 2.6rem) 0 clamp(2rem, 5vh, 3.6rem);
  overflow: hidden;
  isolation: isolate;
}

.hero__fundo { position: absolute; inset: 0; z-index: 0; pointer-events: none; }

.hero__grade {
  position: absolute;
  inset: -10%;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 74px 74px;
  mask-image: radial-gradient(ellipse 78% 68% at 42% 44%, #000 12%, transparent 76%);
}

/* Feixe de faixas diagonais, o gesto grafico que define a identidade do
   evento. Um unico gradiente inclinado produz o conjunto todo, o que
   evita empilhar elementos so para desenhar listras. */
.hero__listras {
  position: absolute;
  will-change: transform;
  pointer-events: none;
}
.hero__listras--topo {
  top: -26%;
  right: -20%;
  width: clamp(240px, 40vw, 620px);
  height: 140%;
  background: linear-gradient(101deg,
    transparent 0 22%,
    var(--lima) 22% 25.4%,
    transparent 25.4% 30%,
    var(--magenta) 30% 32.2%,
    transparent 32.2% 37%,
    var(--roxo) 37% 41.5%,
    transparent 41.5% 47%,
    var(--ciano) 47% 49.4%,
    transparent 49.4% 55%,
    var(--amarelo) 55% 58.6%,
    transparent 58.6% 100%);
  opacity: 0.5;
  mask-image: linear-gradient(196deg, #000 0%, rgba(0, 0, 0, 0.45) 42%, transparent 78%);
}
.hero__listras--base {
  bottom: -34%;
  left: -22%;
  width: clamp(180px, 28vw, 420px);
  height: 100%;
  background: linear-gradient(101deg,
    transparent 0 30%,
    var(--roxo) 30% 34%,
    transparent 34% 44%,
    var(--ciano) 44% 46.4%,
    transparent 46.4% 58%,
    var(--lima) 58% 60.4%,
    transparent 60.4% 100%);
  opacity: 0.34;
  mask-image: linear-gradient(20deg, #000 0%, transparent 72%);
}

.hero__brilho {
  position: absolute;
  top: 42%; left: 26%;
  width: 76vw; height: 66vw;
  max-width: 1080px; max-height: 900px;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(ellipse 58% 52% at 32% 46%, rgba(124, 47, 255, 0.22), transparent 70%),
    radial-gradient(ellipse 44% 40% at 62% 68%, rgba(255, 0, 128, 0.13), transparent 72%);
  pointer-events: none;
}

/* ---- elementos graficos das pecas oficiais -----------------------
   Entram pelas duas laterais, sangrando pela borda, cada um com um
   ritmo proprio de flutuacao. Ficam atras do conteudo e nunca capturam
   toque: sao decoracao. Somem no celular, onde nao ha margem lateral
   para sacrificar. */
.hero__elementos {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.hero__elemento {
  position: absolute;
  will-change: transform;
  animation: derivar var(--duracao, 12s) ease-in-out var(--fase-anim, 0s) infinite alternate;
}

/*
  Posições pensadas para o elemento sangrar pela borda e passar longe do
  texto: o conteúdo da abertura ocupa a faixa central, então a decoração
  vive nas margens externas e na parte de baixo.
*/
.hero__elemento--esq-topo {
  top: clamp(-40px, -3vh, 0px);
  left: clamp(-200px, -11vw, -110px);
  width: clamp(180px, 19vw, 300px);
  opacity: 0.55;
  --duracao: 13s;
  --deriva-x: 14px;
  --deriva-y: -18px;
  --giro: 2deg;
}
.hero__elemento--esq-base {
  bottom: clamp(-150px, -9vh, -60px);
  left: clamp(-240px, -13vw, -130px);
  width: clamp(200px, 22vw, 350px);
  opacity: 0.32;
  transform: scaleX(-1);
  --duracao: 17s;
  --fase-anim: -3s;
  --deriva-x: -12px;
  --deriva-y: 16px;
  --giro: -2.5deg;
}
.hero__elemento--dir-topo {
  top: clamp(-70px, -5vh, -20px);
  right: clamp(-130px, -6vw, -40px);
  width: clamp(140px, 15vw, 230px);
  opacity: 0.62;
  --duracao: 11s;
  --fase-anim: -5s;
  --deriva-x: -16px;
  --deriva-y: 20px;
  --giro: -3deg;
}
.hero__elemento--dir-base {
  bottom: clamp(-180px, -11vh, -80px);
  right: clamp(-250px, -14vw, -140px);
  width: clamp(210px, 23vw, 370px);
  opacity: 0.28;
  transform: scaleX(-1) rotate(8deg);
  --duracao: 15s;
  --fase-anim: -8s;
  --deriva-x: 18px;
  --deriva-y: -14px;
  --giro: 2deg;
}

@keyframes derivar {
  from { translate: 0 0; rotate: 0deg; }
  to   { translate: var(--deriva-x, 12px) var(--deriva-y, -14px); rotate: var(--giro, 2deg); }
}

@media (max-width: 900px) {
  .hero__elementos { display: none; }
}

/* ---- grade da abertura -------------------------------------------
   Três áreas: identidade, transmissão e botões.

   No celular elas se empilham nesta ordem — a transmissão passa à
   frente dos botões, porque no dia do evento é o que a pessoa abre o
   site para ver. No desktop, a transmissão ocupa a coluna direita
   inteira e os botões ficam sob a identidade. */
.hero__interno {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: var(--largura);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  gap: clamp(1.5rem, 3.4vw, 2.4rem);
  align-items: center;
  grid-template-areas:
    'marca'
    'transmissao'
    'acoes';
}
@media (min-width: 1024px) {
  .hero__interno {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    grid-template-areas:
      'marca       transmissao'
      'acoes       transmissao';
    column-gap: clamp(2rem, 4vw, 3.6rem);
    row-gap: clamp(1.1rem, 2.2vw, 1.6rem);
    align-items: center;
  }
}

.hero__coluna { min-width: 0; }
.hero__coluna--marca { grid-area: marca; }
.hero__coluna--transmissao { grid-area: transmissao; }
.hero__acoes { grid-area: acoes; }

/* Sem quadro de transmissão (depois do evento, sem vídeo cadastrado) a
   grade volta a uma coluna, sem deixar metade da tela vazia */
.hero__interno--sem-transmissao { grid-template-areas: 'marca' 'acoes'; }
@media (min-width: 1024px) {
  .hero__interno--sem-transmissao {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: 'marca' 'acoes';
  }
}

.hero__edicao {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
  margin-bottom: clamp(0.8rem, 1.8vw, 1.15rem);
}
/* Crédito institucional: aparece só quando há largura sobrando na linha
   dos selos. Em telas menores o crédito continua no rodapé. */
.hero__realizacao { display: none; }
@media (min-width: 1240px) {
  .hero__realizacao {
    display: inline;
    font-family: var(--fonte-tec);
    font-size: var(--t-xs);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--texto-3);
  }
}

.hero__marca { position: relative; margin: 0 0 clamp(0.9rem, 2vw, 1.3rem); }
/* Halo escuro atras da marca: garante o contraste da marca branca por
   cima das faixas coloridas do fundo */
.hero__marca::before {
  content: '';
  position: absolute;
  inset: -16% -12% -24% -10%;
  background: radial-gradient(ellipse at 38% 50%, rgba(6, 6, 8, 0.9) 0%, rgba(6, 6, 8, 0.62) 46%, transparent 76%);
  z-index: -1;
}
.hero__marca img {
  position: relative;
  /*
    O tamanho responde à largura E à altura da tela. Notebook de 1366x768
    é comum no serviço público: sem o limite por altura, a marca empurra
    a contagem e os botões para fora da primeira tela.
  */
  width: clamp(190px, min(24vw, 30svh), 320px);
  height: auto;
  filter: drop-shadow(0 14px 34px rgba(0, 0, 0, 0.85));
}

.hero__chamada {
  max-width: 34ch;
  margin-bottom: clamp(0.9rem, 2.2vw, 1.3rem);
  font-size: var(--t-md);
  font-weight: 500;
  line-height: 1.5;
  color: var(--texto-2);
}

/* Durante o evento, quem esta no palco assume o lugar da chamada */
.hero__no-palco {
  display: grid;
  gap: 0.3rem;
  max-width: 34ch;
  margin-bottom: clamp(1.1rem, 2.6vw, 1.6rem);
  padding: 0.85rem 1.1rem;
  background: rgba(255, 0, 128, 0.1);
  border-left: 3px solid var(--magenta);
  border-radius: 0 var(--raio-sm) var(--raio-sm) 0;
}
.hero__no-palco-rotulo {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--fonte-tec);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--magenta);
}
.hero__no-palco strong {
  font-family: var(--fonte-nome);
  font-size: clamp(1.15rem, 2.2vw, 1.6rem);
  font-style: italic;
  line-height: 1.1;
  text-transform: uppercase;
}

.hero__linha-data {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(0.85rem, 2.2vw, 1.6rem);
  margin-bottom: 0;
}
.hero__data { margin-bottom: 0; }
.hero__data-numeros {
  display: block;
  font-family: var(--fonte-display);
  font-size: clamp(1.7rem, 3.4vw, 2.7rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: linear-gradient(96deg, var(--lima) 0%, var(--ciano) 42%, var(--magenta) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero__data-local {
  display: block;
  margin-top: 0.3rem;
  font-family: var(--fonte-tec);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--texto-2);
}

/* Contagem regressiva */
.contagem {
  display: inline-flex;
  align-items: flex-start;
  gap: clamp(0.35rem, 1.2vw, 0.8rem);
  padding: clamp(0.6rem, 1.4vw, 0.9rem) clamp(0.85rem, 2vw, 1.3rem);
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  backdrop-filter: blur(8px);
}
.contagem__item { display: flex; flex-direction: column; align-items: center; min-width: clamp(42px, 7vw, 62px); }
.contagem__numero {
  font-family: var(--fonte-display);
  font-size: clamp(1.7rem, 4vw, 2.6rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--branco);
}
.contagem__rotulo {
  margin-top: 0.3rem;
  font-family: var(--fonte-tec);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--texto-3);
}
.contagem__separador {
  font-family: var(--fonte-display);
  font-size: clamp(1.3rem, 3vw, 2rem);
  line-height: 1.1;
  color: var(--destaque);
  opacity: 0.5;
}

.hero__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 0.7rem;
  align-items: center;
}
/* Na coluna estreita da abertura, os botões precisam caber em uma
   linha: duas linhas empurrariam a chamada principal para fora da
   primeira tela em telas de 900 px de altura. */
@media (min-width: 1024px) {
  .hero__acoes .botao { padding: 0.82rem 1.3rem; font-size: 0.86rem; }
  .hero__acoes .botao--fantasma { padding-inline: 0.3rem; font-size: 0.8rem; }
}

/*
  Telas largas mas baixas — o notebook de 1366x768, tão comum no serviço
  público. Aqui a abertura aperta o texto e a contagem para que a
  transmissão e os botões continuem visíveis sem rolagem.
*/
@media (min-width: 1024px) and (max-height: 860px) {
  .hero__chamada {
    margin-bottom: 0.8rem;
    font-size: 0.95rem;
    line-height: 1.45;
  }
  .hero__linha-data { gap: 0.7rem 1.2rem; }
  .hero__data-numeros { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
  .contagem { padding: 0.5rem 0.9rem; }
  .contagem__numero { font-size: clamp(1.4rem, 2.6vw, 1.95rem); }
  .contagem__rotulo { font-size: 0.56rem; }
  .contagem__item { min-width: clamp(38px, 5vw, 52px); }
  .hero__acoes .botao { padding: 0.72rem 1.15rem; }
}

/* ---- quadro da transmissao --------------------------------------- */
.transmissao-quadro {
  position: relative;
  padding: clamp(0.8rem, 1.6vw, 1.1rem);
  background: rgba(18, 18, 21, 0.72);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  backdrop-filter: blur(10px);
  box-shadow: var(--sombra-alta);
}
.transmissao-quadro--no-ar {
  border-color: rgba(255, 0, 128, 0.5);
  background: rgba(28, 8, 20, 0.7);
}

.transmissao-quadro__cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  margin-bottom: 0.7rem;
  padding: 0 0.15rem;
}
.transmissao-quadro__etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  font-family: var(--fonte-tec);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texto-3);
}
.transmissao-quadro__etiqueta--vivo { color: var(--magenta); }
.transmissao-quadro__canal {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-family: var(--fonte-tec);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--texto-3);
  white-space: nowrap;
}
.transmissao-quadro__canal:hover { color: var(--destaque); }

/* No celular o cabeçalho do quadro não tem largura para as duas frases
   lado a lado: o espaçamento entre letras encolhe e o rótulo fica em
   uma linha só. */
@media (max-width: 560px) {
  .transmissao-quadro__etiqueta { font-size: 0.64rem; letter-spacing: 0.1em; }
  .transmissao-quadro__canal { font-size: 0.62rem; letter-spacing: 0.05em; }
}

.transmissao-quadro__moldura {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--preto-3);
  border-radius: var(--raio-sm);
  overflow: hidden;
}

.transmissao-quadro__espera { position: absolute; inset: 0; }
.transmissao-quadro__espera img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.transmissao-quadro__aviso {
  position: absolute;
  inset: auto 0 0;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  padding: 0.9rem 1rem 0.75rem;
  font-family: var(--fonte-tec);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--branco);
  background: linear-gradient(0deg, rgba(6, 6, 8, 0.94), transparent);
}
.transmissao-quadro__aviso-marca { display: grid; place-items: center; color: var(--lima); }

.transmissao-quadro__nota {
  margin: 0.75rem 0 0;
  padding: 0 0.15rem;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--texto-3);
}
.transmissao-quadro__semjs {
  position: absolute;
  inset: auto 0 0;
  padding: 0.8rem;
  text-align: center;
  background: rgba(6, 6, 8, 0.9);
  color: var(--destaque);
}

.hero__rolar {
  position: absolute;
  left: 50%;
  bottom: 14px;
  z-index: 4;
  transform: translateX(-50%);
  width: 24px; height: 38px;
  border: 2px solid var(--borda-forte);
  border-radius: 99px;
}
.hero__rolar span {
  position: absolute;
  left: 50%; top: 7px;
  width: 3px; height: 7px;
  background: var(--destaque);
  border-radius: 99px;
  transform: translateX(-50%);
  animation: rolar 1.7s ease-in-out infinite;
}
@keyframes rolar {
  0%, 100% { transform: translate(-50%, 0); opacity: 1; }
  60%      { transform: translate(-50%, 14px); opacity: 0.2; }
}
@media (max-width: 1023px) { .hero__rolar { display: none; } }


/* ---------------------------------------------------------------------
   7. Numeros
   --------------------------------------------------------------------- */
.numeros {
  position: relative;
  padding: clamp(2.4rem, 6vw, 4.4rem) 0;
  background: var(--fundo-2);
  border-block: 1px solid var(--borda);
}
.numeros__lista {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: clamp(1.4rem, 3vw, 2.6rem);
}
.numeros__item {
  --cor-item: var(--lima);
  position: relative;
  padding-left: 1.15rem;
}
.numeros__item--lima { --cor-item: var(--lima); }
.numeros__item--magenta { --cor-item: var(--magenta); }
.numeros__item--ciano { --cor-item: var(--ciano); }
.numeros__item--roxo { --cor-item: var(--roxo); }
.numeros__item::before {
  content: '';
  position: absolute;
  left: 0; top: 6px; bottom: 6px;
  width: 4px;
  background: var(--cor-item);
  transform: skewX(var(--inclinacao));
}
.numeros__valor {
  display: block;
  font-family: var(--fonte-display);
  font-size: clamp(2.2rem, 5vw, 3.2rem);
  line-height: 1;
  color: var(--branco);
}
.numeros__rotulo {
  display: block;
  margin-top: 0.4rem;
  font-family: var(--fonte-tec);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cor-item);
}
.numeros__nota { display: block; margin-top: 0.2rem; font-size: var(--t-sm); color: var(--texto-3); }

/* ---------------------------------------------------------------------
   8. Atracoes
   --------------------------------------------------------------------- */
.filtro {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-bottom: clamp(1.8rem, 4vw, 2.8rem);
}
.filtro__botao {
  --cor-dia: var(--branco);
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
  padding: 0.62rem 1.15rem;
  font-family: var(--fonte-tec);
  font-size: 0.83rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texto-2);
  border: 1px solid var(--borda);
  border-radius: 99px;
  transition: color var(--transicao), border-color var(--transicao), background var(--transicao);
}
.filtro__botao:hover { color: var(--branco); border-color: var(--borda-forte); }
.filtro__botao--ativo {
  color: var(--preto);
  background: var(--cor-dia);
  border-color: var(--cor-dia);
}
.filtro__data { font-size: 0.72rem; opacity: 0.75; letter-spacing: 0.04em; }

/* No celular, duas colunas: treze cards em coluna unica virariam uma
   rolagem interminavel. Acima disso, a grade se ajusta sozinha. */
.grade-atracoes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.7rem, 2vw, 1.4rem);
}
@media (min-width: 620px) {
  .grade-atracoes { grid-template-columns: repeat(auto-fill, minmax(min(100%, 232px), 1fr)); }
}

.cartao-atracao {
  --cor: var(--lima);
  position: relative;
  transition: opacity 320ms ease, transform 320ms ease;
}
.cartao-atracao[hidden] { display: none; }
.cartao-atracao--oculto { opacity: 0; transform: scale(0.96); pointer-events: none; }

.cartao-atracao__link {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--preto-2);
  border-radius: var(--raio);
  isolation: isolate;
}
.cartao-atracao__imagem { position: relative; aspect-ratio: 3 / 4; overflow: hidden; }
.cartao-atracao__imagem img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 720ms cubic-bezier(0.16, 0.84, 0.24, 1), filter var(--transicao);
}
.cartao-atracao__sem-imagem {
  width: 100%; height: 100%;
  background:
    repeating-linear-gradient(115deg, var(--preto-3) 0 22px, var(--grafite) 22px 44px);
}
.cartao-atracao__veu {
  position: absolute;
  inset: 0;
  background: linear-gradient(178deg,
    rgba(10, 10, 10, 0) 34%,
    rgba(10, 10, 10, 0.72) 66%,
    rgba(10, 10, 10, 0.96) 100%);
}

.cartao-atracao__conteudo {
  position: absolute;
  inset: auto 0 0;
  padding: 1.1rem 1.05rem 1.15rem;
  z-index: 2;
}
.cartao-atracao__dia {
  display: block;
  font-family: var(--fonte-tec);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cor);
}
.cartao-atracao__nome {
  margin: 0.28rem 0 0.35rem;
  font-family: var(--fonte-nome);
  font-size: clamp(1.02rem, 1.5vw, 1.3rem);
  line-height: 1.06;
  font-style: italic;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--branco);
}
.cartao-atracao__genero,
.cartao-atracao__hora {
  display: block;
  font-size: 0.76rem;
  color: var(--texto-2);
}
.cartao-atracao__hora { color: var(--texto-3); font-variant-numeric: tabular-nums; }

.cartao-atracao__borda {
  position: absolute;
  inset: 0;
  z-index: 3;
  border: 2px solid transparent;
  border-radius: var(--raio);
  transition: border-color var(--transicao);
  pointer-events: none;
}

.cartao-atracao__link:hover .cartao-atracao__imagem img { transform: scale(1.07); }
.cartao-atracao__link:hover .cartao-atracao__borda { border-color: var(--cor); }
.cartao-atracao__link:focus-visible .cartao-atracao__borda { border-color: var(--cor); }

.cartao-atracao--destaque .cartao-atracao__link::before {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 5px;
  z-index: 3;
  background: var(--cor);
}

/* "Em destaque" no painel: a borda colorida fica visível sem precisar de
   hover, puxando o olho para o card na grade */
.cartao-atracao--realcado .cartao-atracao__borda { border-color: var(--cor); }
.cartao-atracao--realcado .cartao-atracao__link {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04), 0 14px 34px -18px var(--cor);
}

@media (min-width: 900px) {
  .cartao-atracao--destaque { grid-column: span 2; grid-row: span 1; }
  .cartao-atracao--destaque .cartao-atracao__imagem { aspect-ratio: 3 / 2.05; }
  .cartao-atracao--destaque .cartao-atracao__nome { font-size: clamp(1.5rem, 2.4vw, 2.15rem); }
}

/* ---------------------------------------------------------------------
   9. Agenda
   --------------------------------------------------------------------- */
.secao--agenda { background: var(--fundo-2); border-block: 1px solid var(--borda); }

.agenda {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 310px), 1fr));
  gap: clamp(1.2rem, 2.6vw, 2rem);
}

.agenda__dia {
  --cor-dia: var(--lima);
  position: relative;
  padding: clamp(1.3rem, 2.6vw, 1.9rem);
  background: var(--preto);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  overflow: hidden;
}
.agenda__dia::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--cor-dia);
}
.agenda__dia::after {
  content: '';
  position: absolute;
  top: -60px; right: -80px;
  width: 200px; height: 200px;
  background: var(--cor-dia);
  opacity: 0.07;
  transform: skewX(var(--inclinacao));
  pointer-events: none;
}

.agenda__cabecalho { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 0.85rem; }
.agenda__data {
  flex: none;
  display: grid;
  place-items: center;
  width: 62px;
  padding: 0.45rem 0;
  background: var(--cor-dia);
  color: var(--preto);
  transform: skewX(var(--inclinacao));
}
.agenda__dia-numero {
  font-family: var(--fonte-display);
  font-size: 1.75rem;
  line-height: 1;
  transform: skewX(calc(var(--inclinacao) * -1));
}
.agenda__dia-mes {
  font-family: var(--fonte-tec);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  transform: skewX(calc(var(--inclinacao) * -1));
}
.agenda__rotulo {
  font-family: var(--fonte-display);
  font-size: 1.5rem;
  text-transform: uppercase;
  color: var(--branco);
}
.agenda__subtitulo {
  margin: 0.1rem 0 0;
  font-family: var(--fonte-tec);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cor-dia);
}
.agenda__chamada {
  margin-bottom: 1.3rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--borda);
  font-size: var(--t-sm);
  color: var(--texto-2);
}

/* Linha do tempo */
.linha-tempo { position: relative; }
.linha-tempo::before {
  content: '';
  position: absolute;
  top: 12px; bottom: 12px;
  left: 61px;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--borda) 8%, var(--borda) 92%, transparent);
}

.linha-tempo__item {
  position: relative;
  display: grid;
  grid-template-columns: 52px 20px 1fr auto;
  align-items: start;
  gap: 0.55rem;
  padding: 0.72rem 0;
}
.linha-tempo__item + .linha-tempo__item { border-top: 1px solid rgba(255, 255, 255, 0.045); }

.linha-tempo__hora {
  text-align: right;
  font-family: var(--fonte-tec);
  font-size: 0.86rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--branco);
  padding-top: 1px;
}
.linha-tempo__aprox {
  display: block;
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texto-3);
}
.linha-tempo__sem-hora { color: var(--texto-3); }

.linha-tempo__marco {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 20px; height: 20px;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--preto);
  border: 1px solid var(--borda-forte);
  color: var(--texto-3);
}
.linha-tempo__item--show .linha-tempo__marco { border-color: var(--cor-dia); color: var(--cor-dia); }

.linha-tempo__titulo {
  font-family: var(--fonte-nome);
  font-size: 0.95rem;
  font-style: italic;
  line-height: 1.18;
  text-transform: uppercase;
  color: var(--branco);
}
.linha-tempo__titulo a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transicao);
}
.linha-tempo__titulo a:hover,
.linha-tempo__titulo a:focus-visible {
  color: var(--cor-dia);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.linha-tempo__subtitulo { margin: 0.15rem 0 0; font-size: 0.78rem; color: var(--texto-2); }
.linha-tempo__local {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  margin: 0.25rem 0 0;
  font-size: 0.72rem;
  color: var(--texto-3);
}
.linha-tempo__local svg { flex: none; }

/* ---- Dois palcos ---------------------------------------------------- */

/*
   O filtro por palco fica dentro do bloco de cada dia, e nao no topo da
   secao: a programacao de sexta nao tem os mesmos palcos de domingo, e
   um filtro global obrigaria a pessoa a subir a pagina para trocar.
*/
.filtro-palco {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0 0 1.1rem;
}
.filtro-palco__botao {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.42rem 0.85rem;
  font-family: var(--fonte-tec);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--texto-3);
  background: transparent;
  border: 1px solid var(--borda);
  border-radius: 99px;
  cursor: pointer;
  transition: color var(--transicao), border-color var(--transicao), background var(--transicao);
}
.filtro-palco__botao:hover { color: var(--branco); border-color: var(--borda-forte); }
.filtro-palco__botao--ativo {
  color: var(--preto);
  background: var(--cor-dia, var(--lima));
  border-color: transparent;
}
.filtro-palco__conta {
  font-size: 0.66rem;
  opacity: 0.75;
}
.filtro-palco__botao--ativo .filtro-palco__conta { opacity: 0.6; }

/* Item escondido pelo filtro. Sem animacao de saida: a lista salta de
   tamanho e uma transicao aqui daria a impressao de travamento. */
.linha-tempo__item[hidden] { display: none !important; }

/* A etiqueta do palco substitui a linha de local, que dizia sempre
   "Palco principal" e nao distinguia mais nada. */
.linha-tempo__palco {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0.3rem 0 0;
  font-family: var(--fonte-tec);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texto-3);
}
.linha-tempo__palco span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: none;
  background: currentColor;
}
/* Cores diferentes para diferenciar de relance na lista misturada */
.linha-tempo__palco--1 { color: var(--lima); }
.linha-tempo__palco--2 { color: var(--ciano); }

/* O marco na linha do tempo acompanha a cor do palco */
.linha-tempo__item--palco2 .linha-tempo__marco {
  border-color: var(--ciano);
  color: var(--ciano);
}

.linha-tempo__item--servico .linha-tempo__titulo,
.linha-tempo__item--abertura .linha-tempo__titulo,
.linha-tempo__item--encerramento .linha-tempo__titulo {
  font-family: var(--fonte-corpo);
  font-style: normal;
  font-weight: 600;
  font-size: 0.86rem;
  text-transform: none;
  color: var(--texto-2);
}

.linha-tempo__item[data-agora] { background: rgba(255, 0, 128, 0.08); }
.linha-tempo__item[data-agora] .linha-tempo__marco {
  border-color: var(--magenta);
  color: var(--magenta);
  box-shadow: 0 0 0 4px rgba(255, 0, 128, 0.16);
}

.botao-estrela {
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  color: var(--texto-3);
  border-radius: 50%;
  transition: color var(--transicao), background var(--transicao), transform var(--transicao);
}
.botao-estrela:hover { color: var(--branco); background: rgba(255, 255, 255, 0.07); }
.botao-estrela[aria-pressed='true'] { color: var(--amarelo); }
.botao-estrela[aria-pressed='true'] svg path { fill: var(--amarelo); }
.botao-estrela[data-animar] { animation: estrela 420ms ease; }
@keyframes estrela {
  0% { transform: scale(1); }
  45% { transform: scale(1.35) rotate(9deg); }
  100% { transform: scale(1); }
}

.agenda__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  align-items: center;
  margin-top: clamp(1.8rem, 4vw, 2.6rem);
}

/* ---------------------------------------------------------------------
   10. Diario
   --------------------------------------------------------------------- */
.secao--diario { background: var(--fundo-2); border-block: 1px solid var(--borda); }

.diario {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr));
  gap: clamp(1.2rem, 2.6vw, 2rem);
}
.diario__item {
  background: var(--preto);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  overflow: hidden;
  transition: border-color var(--transicao), transform var(--transicao);
}
.diario__item:hover { border-color: var(--borda-forte); transform: translateY(-3px); }
.diario__video { position: relative; aspect-ratio: 16 / 9; background: var(--preto-3); }
.diario__video video { width: 100%; height: 100%; object-fit: contain; background: var(--preto); }
.diario__conteudo { padding: clamp(1.1rem, 2.2vw, 1.5rem); }
.diario__episodio {
  display: inline-block;
  margin-bottom: 0.55rem;
  padding: 0.2rem 0.6rem;
  font-family: var(--fonte-tec);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--preto);
  background: var(--lima);
  transform: skewX(var(--inclinacao));
}
.diario__titulo {
  margin-bottom: 0.5rem;
  font-family: var(--fonte-display);
  font-size: 1.35rem;
  text-transform: uppercase;
}
.diario__texto { font-size: var(--t-sm); color: var(--texto-2); }
.diario__data {
  display: block;
  margin-top: 0.7rem;
  font-family: var(--fonte-tec);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texto-3);
}

/* ---------------------------------------------------------------------
   11. Pode e nao pode
   --------------------------------------------------------------------- */
.regras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr));
  gap: clamp(1.2rem, 2.6vw, 2rem);
}

.regras__painel {
  --cor-painel: var(--lima);
  position: relative;
  padding: clamp(1.3rem, 2.6vw, 1.9rem);
  background: var(--fundo-2);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  overflow: hidden;
}
.regras__painel--pode { --cor-painel: var(--lima); }
.regras__painel--nao  { --cor-painel: var(--magenta); }
.regras__painel::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: var(--cor-painel);
}

.regras__cabecalho {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 1.2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--borda);
}
.regras__marca {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  flex: none;
  color: var(--preto);
  background: var(--cor-painel);
  border-radius: 50%;
}
.regras__cabecalho h3 {
  font-family: var(--fonte-display);
  font-size: 1.4rem;
  text-transform: uppercase;
}
.regras__contagem {
  margin-left: auto;
  font-family: var(--fonte-tec);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texto-3);
}

.regras__lista { display: grid; gap: 0.95rem; }
.regras__item { display: flex; gap: 0.8rem; align-items: flex-start; }
.regras__icone {
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  flex: none;
  color: var(--cor-painel);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
}
.regras__item h4 { font-size: 0.94rem; font-weight: 600; margin-bottom: 0.14rem; }
.regras__item p { margin: 0; font-size: 0.82rem; color: var(--texto-3); line-height: 1.5; }

.regras__atencao {
  margin-top: clamp(1.6rem, 3.4vw, 2.4rem);
  padding: clamp(1.2rem, 2.4vw, 1.7rem);
  background: rgba(255, 229, 0, 0.07);
  border: 1px solid rgba(255, 229, 0, 0.25);
  border-radius: var(--raio);
}
.regras__atencao-titulo {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 0.95rem;
  font-family: var(--fonte-tec);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--amarelo);
}
.regras__atencao-lista { display: grid; gap: 0.75rem; }
.regras__atencao-lista li { font-size: var(--t-sm); color: var(--texto-2); }
.regras__atencao-lista strong { display: block; color: var(--branco); font-weight: 600; }

/* ---------------------------------------------------------------------
   12. Informacoes e mapa
   --------------------------------------------------------------------- */
.mapa-evento {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(200px, 268px);
  gap: clamp(1.2rem, 2.6vw, 2rem);
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
/* Empilhado no celular, a legenda em coluna unica deixava metade da
   largura vazia e empurrava o resto da pagina para baixo. Em duas
   colunas ela ocupa o espaco que ja tinha. */
@media (max-width: 860px) {
  .mapa-evento__legenda ul {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.35rem 0.9rem;
  }
}
@media (max-width: 860px) { .mapa-evento { grid-template-columns: 1fr; } }

.mapa-evento__tela {
  position: relative;
  aspect-ratio: 16 / 10;
  background-color: var(--fundo-2);
  background-size: cover;
  background-position: center;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  overflow: hidden;
}

.mapa-evento__esquema { position: absolute; inset: 0; }
.mapa-evento__esquema .mapa-evento__rio {
  position: absolute;
  inset: 0 0 auto;
  height: 26%;
  background: linear-gradient(180deg, rgba(0, 212, 255, 0.22), rgba(0, 212, 255, 0.05));
  border-bottom: 2px solid rgba(0, 212, 255, 0.4);
}
.mapa-evento__esquema .mapa-evento__area {
  position: absolute;
  inset: 24% 6% 6%;
  border: 2px dashed rgba(255, 255, 255, 0.14);
  border-radius: 22px;
  background:
    repeating-linear-gradient(118deg, rgba(255, 255, 255, 0.02) 0 20px, transparent 20px 42px);
}

.mapa-evento__ponto {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%);
  width: 30px; height: 30px;
  display: grid;
  place-items: center;
  z-index: 2;
}
.mapa-evento__ponto[data-oculto] { display: none; }
.mapa-evento__pino {
  width: 15px; height: 15px;
  border-radius: 50%;
  background: var(--cor);
  border: 2px solid var(--preto);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.16), 0 4px 12px rgba(0, 0, 0, 0.6);
  transition: transform var(--transicao);
}
.mapa-evento__ponto:hover .mapa-evento__pino,
.mapa-evento__ponto:focus-visible .mapa-evento__pino { transform: scale(1.4); }

.mapa-evento__balao {
  position: absolute;
  left: 50%; bottom: calc(100% + 6px);
  transform: translateX(-50%) translateY(4px);
  z-index: 5;
  min-width: 132px;
  max-width: 216px;
  padding: 0.55rem 0.75rem;
  background: var(--branco);
  color: var(--preto);
  border-radius: var(--raio-sm);
  box-shadow: var(--sombra-alta);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transicao), transform var(--transicao);
  text-align: left;
}
.mapa-evento__balao strong { display: block; font-size: 0.8rem; line-height: 1.2; }
.mapa-evento__balao span { display: block; margin-top: 0.15rem; font-size: 0.72rem; color: #4A4A52; line-height: 1.35; }
.mapa-evento__ponto:hover .mapa-evento__balao,
.mapa-evento__ponto:focus-visible .mapa-evento__balao,
.mapa-evento__ponto[data-aberto] .mapa-evento__balao {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.mapa-evento__legenda {
  padding: clamp(1rem, 2vw, 1.4rem);
  background: var(--fundo-2);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  align-self: start;
}
.mapa-evento__legenda-titulo {
  margin-bottom: 0.75rem;
  font-family: var(--fonte-tec);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texto-3);
}
.mapa-evento__legenda ul { display: grid; gap: 0.15rem; }
.mapa-evento__filtro {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  padding: 0.36rem 0.4rem;
  font-size: 0.8rem;
  color: var(--texto-2);
  border-radius: var(--raio-sm);
  text-align: left;
  transition: background var(--transicao), color var(--transicao);
}
.mapa-evento__filtro:hover { background: rgba(255, 255, 255, 0.05); color: var(--branco); }
.mapa-evento__filtro[aria-pressed='true'] { background: rgba(255, 255, 255, 0.09); color: var(--branco); }
.mapa-evento__amostra {
  width: 11px; height: 11px;
  flex: none;
  border-radius: 50%;
  background: var(--cor);
}
.mapa-evento__nota { margin: 0.9rem 0 0; font-size: 0.72rem; color: var(--texto-3); line-height: 1.45; }

.cartoes-info {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
  gap: clamp(1rem, 2.2vw, 1.6rem);
}
.cartao-info {
  --cor-cartao: var(--lima);
  position: relative;
  padding: clamp(1.2rem, 2.4vw, 1.7rem);
  background: var(--fundo-2);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.cartao-info--chegar { --cor-cartao: var(--ciano); }
.cartao-info--acessibilidade { --cor-cartao: var(--lima); }
.cartao-info--emergencia { --cor-cartao: var(--magenta); }
.cartao-info::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--cor-cartao);
}
.cartao-info h3 {
  font-family: var(--fonte-display);
  font-size: 1.3rem;
  text-transform: uppercase;
  color: var(--cor-cartao);
}
.cartao-info p { margin: 0; font-size: var(--t-sm); }
.cartao-info__texto { color: var(--texto-3); }
.cartao-info__lista { display: grid; gap: 0.5rem; }
.cartao-info__lista li {
  position: relative;
  padding-left: 1.1rem;
  font-size: var(--t-sm);
  color: var(--texto-2);
}
.cartao-info__lista li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.55em;
  width: 6px; height: 6px;
  background: var(--cor-cartao);
  transform: skewX(var(--inclinacao));
}
.cartao-info__telefones { display: grid; gap: 0.45rem; }
.cartao-info__telefones li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--borda);
  font-size: var(--t-sm);
}
.cartao-info__telefones span { color: var(--texto-3); }
.cartao-info__telefones a {
  font-family: var(--fonte-tec);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--cor-cartao);
  font-variant-numeric: tabular-nums;
}
.cartao-info .botao { align-self: flex-start; margin-top: auto; }

.mapa-externo {
  margin-top: clamp(1.6rem, 3.4vw, 2.4rem);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  overflow: hidden;
  aspect-ratio: 16 / 7;
}
.mapa-externo iframe { width: 100%; height: 100%; border: 0; filter: grayscale(0.25) contrast(1.05); }
/* ---------------------------------------------------------------------
   13. A cidade (seção da página inicial e guia completo)
   --------------------------------------------------------------------- */
.cidade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(1.2rem, 2.6vw, 2rem);
}
.cidade__bloco {
  --cor-bloco: var(--lima);
  display: flex;
  flex-direction: column;
  padding: clamp(1.2rem, 2.4vw, 1.8rem);
  background: var(--fundo-2);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  border-top: 3px solid var(--cor-bloco);
}
.cidade__bloco--amarelo { --cor-bloco: var(--amarelo); }
.cidade__bloco--ciano   { --cor-bloco: var(--ciano); }
.cidade__bloco--magenta { --cor-bloco: var(--magenta); }
.cidade__bloco--roxo    { --cor-bloco: var(--roxo); }
.cidade__bloco--lima    { --cor-bloco: var(--lima); }
.cidade__bloco--laranja { --cor-bloco: var(--laranja); }

.cidade__cabecalho { display: flex; gap: 0.8rem; align-items: flex-start; margin-bottom: 1.1rem; }
.cidade__icone {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  flex: none;
  color: var(--cor-bloco);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
}
.cidade__titulo {
  font-family: var(--fonte-display);
  font-size: 1.3rem;
  text-transform: uppercase;
}
.cidade__chamada { margin: 0.2rem 0 0; font-size: 0.8rem; color: var(--texto-3); line-height: 1.45; }

.cidade__lista { display: grid; gap: 0.1rem; }
.cidade__item { padding: 0.85rem 0; border-top: 1px solid var(--borda); }
.cidade__item:first-child { border-top: 0; padding-top: 0; }
.cidade__item[hidden] { display: none; }

.cidade__item-cabecalho { display: flex; gap: 0.7rem; align-items: baseline; justify-content: space-between; }
/* A cor fica no h4, e nao so no link: ha itens sem pagina no portal,
   cujo nome nao vira link e ficaria branco no meio da lista. */
.cidade__item h4 { font-size: 0.95rem; font-weight: 600; line-height: 1.25; color: var(--cor-bloco); }
/* Todo nome sai na cor do bloco: azul em hospedagem, rosa nos guias,
   verde nas agencias. Antes so os itens marcados como destaque saiam
   coloridos, e a lista parecia dividida entre recomendados e o resto -
   distincao que nao existe. Sem sublinhado em repouso: numa lista de
   quase cem nomes, o traco em todos vira ruido; o icone de link externo
   ja sinaliza que e clicavel, e o sublinhado aparece no hover e no foco. */
.cidade__item h4 a {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: inherit;
  text-decoration: none;
  transition: opacity var(--transicao);
}
.cidade__item h4 a:hover,
.cidade__item h4 a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cidade__item h4 svg { flex: none; opacity: 0.45; }
.cidade__item h4 a:hover svg { opacity: 0.9; }
.cidade__preco {
  flex: none;
  font-family: var(--fonte-tec);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--cor-bloco);
}
.cidade__descricao { margin: 0.3rem 0 0; font-size: 0.82rem; color: var(--texto-3); line-height: 1.5; }
.cidade__endereco {
  display: flex;
  align-items: flex-start;
  gap: 0.3rem;
  margin: 0.3rem 0 0;
  font-size: 0.76rem;
  color: var(--texto-3);
}
.cidade__endereco svg { flex: none; margin-top: 3px; }

.cidade__acoes { display: flex; flex-wrap: wrap; gap: 0.4rem 0.7rem; margin: 0.5rem 0 0; }
.cidade__acao {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  font-family: var(--fonte-tec);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--texto-2);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--borda-forte);
}
.cidade__acao:hover { color: var(--branco); text-decoration-color: currentColor; }
.cidade__acao--zap { color: #4ED97F; }
.cidade__acao--zap:hover { color: #7BE8A2; }

.cidade__mais {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: auto;
  padding-top: 1rem;
  font-family: var(--fonte-tec);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cor-bloco);
}
.cidade__mais:hover { text-decoration: underline; text-underline-offset: 4px; }
.cidade__mais svg { transition: transform var(--transicao); }
.cidade__mais:hover svg { transform: translateX(3px); }

.cidade__oficial {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.4rem;
  margin-top: clamp(1.6rem, 3.4vw, 2.4rem);
  padding: clamp(1.3rem, 2.6vw, 2rem);
  background: linear-gradient(100deg, rgba(26, 123, 192, 0.16), rgba(5, 50, 131, 0.1));
  border: 1px solid rgba(26, 123, 192, 0.35);
  border-radius: var(--raio);
}
.cidade__oficial p { margin: 0; max-width: 56ch; font-size: var(--t-sm); color: var(--texto-2); }
.cidade__oficial-titulo {
  margin-bottom: 0.3rem !important;
  font-family: var(--fonte-tec);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--branco) !important;
}
.cidade__oficial-acoes { display: flex; flex-wrap: wrap; gap: 0.6rem; }

/* ---- guia completo da cidade ------------------------------------- */
.guia-cidade__topo {
  position: relative;
  padding: clamp(2rem, 5vw, 3.6rem) 0 clamp(1.6rem, 3.4vw, 2.6rem);
  background:
    radial-gradient(ellipse 60% 50% at 20% 0%, rgba(124, 47, 255, 0.18), transparent 70%),
    radial-gradient(ellipse 50% 40% at 85% 30%, rgba(0, 212, 255, 0.12), transparent 70%),
    var(--fundo-2);
  border-bottom: 1px solid var(--borda);
}
.guia-cidade__topo-interno {
  max-width: var(--largura);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.guia-cidade__titulo {
  font-family: var(--fonte-display);
  font-size: var(--t-xxl);
  text-transform: uppercase;
  margin-bottom: 0.6rem;
}
.guia-cidade__chamada {
  max-width: 62ch;
  margin-bottom: clamp(1.3rem, 2.6vw, 1.9rem);
  font-size: var(--t-md);
  color: var(--texto-2);
}

.guia-cidade__atalhos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: clamp(1.2rem, 2.4vw, 1.7rem);
}
.guia-cidade__atalho {
  --cor-atalho: var(--lima);
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.9rem;
  font-family: var(--fonte-tec);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--texto-2);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--borda);
  border-radius: 99px;
  transition: color var(--transicao), border-color var(--transicao), background var(--transicao);
}
.guia-cidade__atalho:hover {
  color: var(--branco);
  border-color: var(--cor-atalho);
  background: rgba(255, 255, 255, 0.06);
}
.guia-cidade__atalho span {
  display: grid;
  place-items: center;
  min-width: 21px; height: 21px;
  padding: 0 5px;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--preto);
  background: var(--cor-atalho);
  border-radius: 99px;
}
.guia-cidade__atalho--amarelo { --cor-atalho: var(--amarelo); }
.guia-cidade__atalho--ciano   { --cor-atalho: var(--ciano); }
.guia-cidade__atalho--magenta { --cor-atalho: var(--magenta); }
.guia-cidade__atalho--magenta span { color: var(--branco); }
.guia-cidade__atalho--roxo    { --cor-atalho: var(--roxo); }
.guia-cidade__atalho--roxo span { color: var(--branco); }
.guia-cidade__atalho--lima    { --cor-atalho: var(--lima); }

.guia-cidade__busca {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  max-width: 520px;
  padding: 0.7rem 1rem;
  background: var(--preto);
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio);
}
.guia-cidade__busca:focus-within { border-color: var(--destaque); }
.guia-cidade__busca svg { flex: none; color: var(--texto-3); }
.guia-cidade__busca input {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: 0.94rem;
  color: var(--texto);
  background: none;
  border: 0;
  outline: none;
}
.guia-cidade__busca input::placeholder { color: var(--texto-3); }
.guia-cidade__busca button {
  flex: none;
  width: 26px; height: 26px;
  display: grid;
  place-items: center;
  font-size: 1.3rem;
  line-height: 1;
  color: var(--texto-3);
  border-radius: 50%;
}
.guia-cidade__busca button:hover { color: var(--branco); background: rgba(255, 255, 255, 0.08); }
.guia-cidade__resultado {
  margin: 0.7rem 0 0;
  font-family: var(--fonte-tec);
  font-size: 0.8rem;
  color: var(--destaque);
}

.guia-bloco {
  --cor-bloco: var(--lima);
  padding: clamp(2rem, 4.4vw, 3.4rem) 0;
  border-bottom: 1px solid var(--borda);
  scroll-margin-top: calc(var(--cabecalho-altura) + 12px);
}
.guia-bloco:last-of-type { border-bottom: 0; }
.guia-bloco--amarelo { --cor-bloco: var(--amarelo); }
.guia-bloco--ciano   { --cor-bloco: var(--ciano); }
.guia-bloco--magenta { --cor-bloco: var(--magenta); }
.guia-bloco--roxo    { --cor-bloco: var(--roxo); }
.guia-bloco--lima    { --cor-bloco: var(--lima); }
.guia-bloco[hidden]  { display: none; }

.guia-bloco__interno {
  max-width: var(--largura);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.guia-bloco__cabecalho {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: clamp(1.2rem, 2.4vw, 1.8rem);
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--cor-bloco);
}
.guia-bloco__titulo {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--fonte-display);
  font-size: var(--t-lg);
  text-transform: uppercase;
}
.guia-bloco__contagem {
  display: grid;
  place-items: center;
  min-width: 30px; height: 26px;
  padding: 0 7px;
  font-family: var(--fonte-tec);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--preto);
  background: var(--cor-bloco);
  border-radius: 99px;
}
.guia-bloco--magenta .guia-bloco__contagem,
.guia-bloco--roxo .guia-bloco__contagem { color: var(--branco); }
.guia-bloco__chamada {
  margin: 0.5rem 0 0;
  max-width: 74ch;
  font-size: var(--t-sm);
  color: var(--texto-2);
  line-height: 1.55;
}
.guia-bloco__origem {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex: none;
  font-family: var(--fonte-tec);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--texto-3);
  white-space: nowrap;
}
.guia-bloco__origem:hover { color: var(--cor-bloco); }

/* Grade de itens: várias colunas, porque a lista é longa */
.guia-bloco__lista {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr));
  gap: 0 clamp(1.2rem, 2.6vw, 2.4rem);
}
.guia-bloco__lista .cidade__item {
  --cor-bloco: inherit;
  padding: 0.95rem 0;
}
.guia-bloco__lista .cidade__item:first-child { padding-top: 0.95rem; border-top: 1px solid var(--borda); }

.guia-cidade__pe {
  padding: clamp(1.8rem, 4vw, 3rem) 0 var(--secao-y);
  background: var(--fundo-2);
  border-top: 1px solid var(--borda);
}
.guia-cidade__pe-interno {
  max-width: var(--largura);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
}
.guia-cidade__pe p { margin: 0; max-width: 62ch; font-size: var(--t-sm); color: var(--texto-2); }

.guia-cidade__vazio {
  padding: clamp(2rem, 5vw, 3.4rem) var(--gutter);
  text-align: center;
  color: var(--texto-3);
}

/* ---------------------------------------------------------------------
   14. Instagram
   --------------------------------------------------------------------- */
.secao--instagram { background: var(--fundo-2); border-block: 1px solid var(--borda); }

.feed-ig {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
  gap: clamp(0.7rem, 1.6vw, 1.1rem);
}
.feed-ig__vazio {
  grid-column: 1 / -1;
  padding: clamp(1.6rem, 4vw, 3rem);
  text-align: center;
  color: var(--texto-3);
  background: var(--preto);
  border: 1px dashed var(--borda-forte);
  border-radius: var(--raio);
}

.feed-ig__item {
  background: var(--preto);
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
  overflow: hidden;
  transition: border-color var(--transicao), transform var(--transicao);
}
.feed-ig__item:hover { border-color: var(--magenta); transform: translateY(-3px); }
.feed-ig__item--destaque { border-color: var(--magenta); }
.feed-ig__imagem { position: relative; aspect-ratio: 1; overflow: hidden; }
.feed-ig__imagem img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 620ms cubic-bezier(0.16, 0.84, 0.24, 1);
}
.feed-ig__item:hover .feed-ig__imagem img { transform: scale(1.06); }
.feed-ig__tipo {
  position: absolute;
  top: 8px; right: 8px;
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  color: var(--branco);
  background: rgba(10, 10, 10, 0.7);
  backdrop-filter: blur(4px);
  border-radius: 50%;
}
.feed-ig__conteudo { padding: 0.75rem 0.85rem 0.9rem; }
.feed-ig__legenda {
  margin: 0;
  font-size: 0.79rem;
  line-height: 1.45;
  color: var(--texto-2);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.feed-ig__quando {
  display: block;
  margin-top: 0.45rem;
  font-family: var(--fonte-tec);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texto-3);
}
.feed-ig__acao { margin-top: clamp(1.6rem, 3.4vw, 2.4rem); }

/* ---------------------------------------------------------------------
   15. Duvidas
   --------------------------------------------------------------------- */
.acordeao { max-width: 860px; }
.acordeao__item { border-bottom: 1px solid var(--borda); }
.acordeao__pergunta { margin: 0; }
.acordeao__botao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  width: 100%;
  padding: 1.25rem 0;
  text-align: left;
  font-size: var(--t-md);
  font-weight: 600;
  color: var(--texto);
  transition: color var(--transicao);
}
.acordeao__botao:hover { color: var(--destaque); }
.acordeao__sinal {
  position: relative;
  flex: none;
  width: 20px; height: 20px;
}
.acordeao__sinal::before,
.acordeao__sinal::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 15px; height: 2px;
  background: var(--destaque);
  transform: translate(-50%, -50%);
  transition: transform var(--transicao), opacity var(--transicao);
}
.acordeao__sinal::after { transform: translate(-50%, -50%) rotate(90deg); }
.acordeao__botao[aria-expanded='true'] .acordeao__sinal::after { transform: translate(-50%, -50%) rotate(0); opacity: 0; }

.acordeao__resposta { overflow: hidden; }
.acordeao__texto {
  padding: 0 0 1.4rem;
  max-width: 68ch;
  color: var(--texto-2);
  font-size: var(--t-sm);
}
.acordeao__texto p { margin-bottom: 0.8em; }


/* ---------------------------------------------------------------------
/* ---------------------------------------------------------------------
   16. Player, bate-papo e "no palco agora"

   O quadro da transmissão em si mora na abertura da página (seção 6).
   Aqui ficam as peças compartilhadas: o player usado tanto na abertura
   quanto no diário, o bate-papo e os cartões de quem está no palco.
   --------------------------------------------------------------------- */
.player { position: relative; }
.player__moldura {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--preto-3);
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio);
  overflow: hidden;
}
.player__capa {
  position: absolute;
  inset: 0;
  width: 100%;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 0.65rem;
  padding: 1.2rem;
  overflow: hidden;
}
/* Faixas da identidade em vez de uma foto: o texto por cima fica sempre
   legível, e não há imagem extra para baixar antes do vídeo. */
.player__fundo {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 62% 74% at 50% 50%, rgba(10, 10, 10, 0.72), rgba(10, 10, 10, 0.94)),
    linear-gradient(101deg,
      transparent 0 52%,
      var(--lima) 52% 54.4%,
      transparent 54.4% 59%,
      var(--magenta) 59% 61%,
      transparent 61% 66%,
      var(--roxo) 66% 69%,
      transparent 69% 74%,
      var(--ciano) 74% 76%,
      transparent 76% 81%,
      var(--amarelo) 81% 83.4%,
      transparent 83.4% 100%),
    var(--preto-3);
}
.player__capa img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.35;
}
.player__botao {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(56px, 7vw, 78px);
  height: clamp(56px, 7vw, 78px);
  color: var(--preto);
  background: var(--branco);
  border-radius: 50%;
  transition: transform var(--transicao), background var(--transicao);
}
.player__botao svg { margin-left: 3px; }
.player__capa:hover .player__botao { transform: scale(1.08); background: var(--magenta); color: var(--branco); }
.player__rotulo {
  position: relative;
  font-family: var(--fonte-tec);
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.player__aviso { position: relative; font-size: 0.71rem; color: var(--texto-2); text-align: center; }
.player__moldura iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.player__sem-js { margin-top: 0.8rem; text-align: center; }

/* Na abertura, o player já está dentro da moldura do quadro */
.player--hero { position: absolute; inset: 0; }
.player--hero .player__capa { border-radius: var(--raio-sm); }
.player--hero iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.player--diario .player__capa { position: absolute; }
.player--diario { aspect-ratio: 16 / 9; }
.player--diario .player__capa img { opacity: 0.55; }

/* ---- acontecendo agora ------------------------------------------- */
.acontecendo { display: grid; gap: clamp(1rem, 2.2vw, 1.6rem); }
@media (min-width: 1080px) {
  .acontecendo--com-chat { grid-template-columns: minmax(0, 1fr) 330px; align-items: start; }
}

.chat {
  display: flex;
  flex-direction: column;
  background: var(--fundo-2);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  overflow: hidden;
  min-height: 240px;
}
.chat__cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.8rem 1.1rem;
  border-bottom: 1px solid var(--borda);
}
.chat__cabecalho h3 {
  font-family: var(--fonte-tec);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texto-2);
}
.chat__alternar {
  font-family: var(--fonte-tec);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--destaque);
}
.chat__area { position: relative; flex: 1; min-height: 300px; }
.chat__area iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.chat__vazio { padding: 1.2rem; font-size: var(--t-sm); color: var(--texto-3); }

.palco {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
  gap: clamp(1rem, 2.2vw, 1.6rem);
}
.palco-cartao {
  --cor: var(--lima);
  display: flex;
  gap: 1rem;
  padding: 0.9rem;
  background: var(--fundo-2);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  overflow: hidden;
}
.palco-cartao--atual { border-color: var(--magenta); background: rgba(255, 0, 128, 0.07); }
.palco-cartao--vazio { align-items: center; justify-content: center; text-align: center; min-height: 118px; }
.palco-cartao__imagem { flex: none; width: 84px; aspect-ratio: 3 / 4; border-radius: var(--raio-sm); overflow: hidden; }
.palco-cartao__imagem img { width: 100%; height: 100%; object-fit: cover; }
.palco-cartao__conteudo { min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.palco-cartao__rotulo {
  margin: 0 0 0.3rem;
  font-family: var(--fonte-tec);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cor);
}
.palco-cartao--atual .palco-cartao__rotulo { color: var(--magenta); }
.palco-cartao__titulo {
  font-family: var(--fonte-nome);
  font-size: 1.12rem;
  font-style: italic;
  text-transform: uppercase;
  line-height: 1.12;
}
.palco-cartao__subtitulo { margin: 0.25rem 0 0; font-size: 0.8rem; color: var(--texto-2); }
.palco-cartao__detalhes { margin: 0.3rem 0 0; font-size: 0.74rem; color: var(--texto-3); }
.palco-cartao__vazio { margin: 0; font-size: var(--t-sm); color: var(--texto-3); }

/* ---------------------------------------------------------------------
   17b. Playlist
   --------------------------------------------------------------------- */
.playlist {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(1rem, 2.4vw, 1.6rem);
}
.playlist__item { display: flex; flex-direction: column; gap: 0.7rem; }
.playlist__player {
  position: relative;
  min-height: 300px;
  background: var(--fundo-2);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  overflow: hidden;
}
.playlist__player iframe { width: 100%; height: 100%; min-height: 300px; border: 0; display: block; }
.playlist__capa {
  position: absolute;
  inset: 0;
  width: 100%;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 0.6rem;
  padding: 1.4rem;
  text-align: center;
  background:
    radial-gradient(ellipse 70% 70% at 50% 45%, rgba(180, 255, 0, 0.09), transparent 72%),
    var(--fundo-2);
  transition: background var(--transicao);
}
.playlist__capa:hover { background: radial-gradient(ellipse 70% 70% at 50% 45%, rgba(180, 255, 0, 0.16), transparent 72%), var(--fundo-2); }
.playlist__icone { color: var(--destaque); }
.playlist__rotulo {
  font-family: var(--fonte-tec);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.playlist__aviso { font-size: 0.74rem; color: var(--texto-3); }
.playlist__link {
  align-self: flex-start;
  font-family: var(--fonte-tec);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texto-2);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.playlist__link:hover { color: var(--destaque); }

/* ---------------------------------------------------------------------
   17. Meu roteiro
   --------------------------------------------------------------------- */
.roteiro { position: fixed; inset: 0; z-index: 150; }
.roteiro__fundo {
  position: absolute;
  inset: 0;
  background: rgba(4, 4, 6, 0.72);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity var(--transicao);
}
.roteiro[data-aberto] .roteiro__fundo { opacity: 1; }

.roteiro__painel {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: min(420px, 100%);
  display: flex;
  flex-direction: column;
  background: var(--preto-2);
  border-left: 1px solid var(--borda);
  box-shadow: var(--sombra-alta);
  transform: translateX(100%);
  transition: transform var(--transicao-lenta);
}
.roteiro[data-aberto] .roteiro__painel { transform: translateX(0); }

.roteiro__cabecalho {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.3rem 1.4rem 1.1rem;
  border-bottom: 1px solid var(--borda);
}
.roteiro__etiqueta {
  margin: 0 0 0.3rem;
  font-family: var(--fonte-tec);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lima);
}
.roteiro__titulo { font-family: var(--fonte-display); font-size: 1.6rem; text-transform: uppercase; }
.roteiro__fechar {
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--texto-2);
  border-radius: 50%;
}
.roteiro__fechar:hover { color: var(--branco); background: rgba(255, 255, 255, 0.07); }

.roteiro__corpo { flex: 1; overflow-y: auto; padding: 1.2rem 1.4rem; }
.roteiro__vazio { font-size: var(--t-sm); color: var(--texto-3); }
.roteiro__lista { display: grid; gap: 0.6rem; }
.roteiro__item {
  display: flex;
  gap: 0.8rem;
  align-items: center;
  padding: 0.8rem 0.9rem;
  background: var(--preto);
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
}
.roteiro__item-hora {
  flex: none;
  min-width: 48px;
  font-family: var(--fonte-tec);
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--lima);
  font-variant-numeric: tabular-nums;
}
.roteiro__item-info { min-width: 0; flex: 1; }
.roteiro__item-titulo { font-size: 0.9rem; font-weight: 600; line-height: 1.2; }
.roteiro__item-dia {
  display: block;
  margin-top: 0.1rem;
  font-family: var(--fonte-tec);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texto-3);
}
.roteiro__item-remover {
  flex: none;
  width: 28px; height: 28px;
  display: grid;
  place-items: center;
  font-size: 1.2rem;
  line-height: 1;
  color: var(--texto-3);
  border-radius: 50%;
}
.roteiro__item-remover:hover { color: var(--magenta); background: rgba(255, 0, 128, 0.1); }

.roteiro__rodape {
  display: grid;
  gap: 0.6rem;
  padding: 1.2rem 1.4rem calc(1.2rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--borda);
  background: var(--preto-2);
}
.roteiro__limpar {
  font-family: var(--fonte-tec);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texto-3);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.roteiro__limpar:hover { color: var(--magenta); }
.roteiro__aviso { margin: 0.3rem 0 0; font-size: 0.7rem; color: var(--texto-3); line-height: 1.45; }
.roteiro__push-estado {
  margin: 0;
  font-size: 0.74rem;
  color: var(--lima);
  text-align: center;
}

/* ---------------------------------------------------------------------
   18. Galeria e retrospectiva
   --------------------------------------------------------------------- */
.galeria {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
  gap: clamp(0.6rem, 1.4vw, 1rem);
}
.galeria__item { position: relative; margin: 0; overflow: hidden; border-radius: var(--raio-sm); }
.galeria__item img {
  width: 100%; height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 640ms cubic-bezier(0.16, 0.84, 0.24, 1);
}
.galeria__item:hover img { transform: scale(1.05); }
.galeria__item figcaption {
  position: absolute;
  inset: auto 0 0;
  padding: 1.5rem 0.8rem 0.7rem;
  background: linear-gradient(0deg, rgba(10, 10, 10, 0.92), transparent);
  font-size: 0.78rem;
  color: var(--texto-2);
}
.galeria__item figcaption small { display: block; margin-top: 0.15rem; font-size: 0.68rem; color: var(--texto-3); }

.retrospectiva__numeros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
  gap: clamp(1rem, 2.4vw, 1.8rem);
  margin-bottom: clamp(1.8rem, 4vw, 2.8rem);
}
.retrospectiva__valor {
  display: block;
  font-family: var(--fonte-display);
  font-size: clamp(2.2rem, 5vw, 3.2rem);
  line-height: 1;
  color: var(--ciano);
}
.retrospectiva__rotulo { display: block; margin-top: 0.3rem; font-size: var(--t-sm); color: var(--texto-3); }

.retrospectiva__dias {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: clamp(1rem, 2.2vw, 1.6rem);
}
.retrospectiva__dia {
  --cor-dia: var(--ciano);
  padding: clamp(1.1rem, 2.2vw, 1.6rem);
  background: var(--fundo-2);
  border: 1px solid var(--borda);
  border-left: 3px solid var(--cor-dia);
  border-radius: var(--raio);
}
.retrospectiva__dia h3 {
  font-family: var(--fonte-display);
  font-size: 1.3rem;
  text-transform: uppercase;
}
.retrospectiva__dia h3 span {
  display: block;
  margin-top: 0.2rem;
  font-family: var(--fonte-tec);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--cor-dia);
}
.retrospectiva__dia p { margin: 0.6rem 0 0; font-size: var(--t-sm); color: var(--texto-2); }

/* ---------------------------------------------------------------------
   19. Barra de atalhos do celular
   --------------------------------------------------------------------- */

/*
   Aparece apenas no telefone. No computador o menu do topo ja resolve, e
   uma faixa fixa so roubaria altura de tela.

   Fica escondida por padrao e so e revelada dentro da media query: assim
   nao existe um instante em que ela pisca antes do CSS responsivo
   entrar, nem aparece na impressao.
*/
.barra-app { display: none; }

@media (max-width: 780px) {
  .barra-app {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 85;
    background: rgba(10, 10, 10, 0.94);
    backdrop-filter: blur(18px) saturate(140%);
    border-top: 1px solid var(--borda);
    /* Respeita a faixa do gesto de voltar nos aparelhos sem botao */
    padding-bottom: env(safe-area-inset-bottom);
    transition: transform var(--transicao);
  }

  /* Some ao rolar para baixo e volta ao subir: no meio da leitura, a
     tela inteira e do conteudo. */
  .barra-app[data-oculta] { transform: translateY(110%); }

  .barra-app__lista {
    display: flex;
    align-items: stretch;
    max-width: 560px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
  }
  .barra-app__lista li { flex: 1 1 0; min-width: 0; }

  .barra-app__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.22rem;
    /* 56px de altura util: o minimo confortavel para o polegar */
    min-height: 56px;
    padding: 0.5rem 0.2rem 0.55rem;
    color: var(--texto-3);
    text-decoration: none;
    transition: color var(--transicao);
    -webkit-tap-highlight-color: transparent;
  }
  .barra-app__item:hover,
  .barra-app__item:focus-visible { color: var(--branco); }

  .barra-app__icone {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    transition: transform var(--transicao);
  }

  .barra-app__rotulo {
    font-family: var(--fonte-tec);
    font-size: 0.62rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1;
    /* Rotulo longo encolhe em vez de quebrar a linha ou vazar */
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Item correspondente a secao que esta na tela */
  .barra-app__item[aria-current='true'] {
    color: var(--destaque);
  }
  .barra-app__item[aria-current='true'] .barra-app__icone {
    transform: translateY(-2px);
  }
  /* Marca acima do icone, no lugar de pintar o fundo inteiro */
  .barra-app__item[aria-current='true']::before {
    content: '';
    position: absolute;
    top: 0;
    width: 26px;
    height: 2px;
    background: var(--destaque);
    border-radius: 0 0 2px 2px;
  }
  .barra-app__item { position: relative; }

  .barra-app__item--vivo { color: var(--magenta); }
  .barra-app__item--vivo[aria-current='true'] { color: var(--magenta); }
  .barra-app__item--vivo[aria-current='true']::before { background: var(--magenta); }

  .ponto-vivo--barra {
    position: absolute;
    top: -1px;
    right: calc(50% - 15px);
    width: 7px;
    height: 7px;
  }

  /* O conteudo precisa terminar acima da barra, ou as ultimas linhas do
     rodape ficam escondidas atras dela. */
  body { padding-bottom: calc(56px + env(safe-area-inset-bottom)); }


  /* O painel do roteiro cobre a tela inteira: a barra sai da frente */
  body:has(.roteiro:not([hidden])) .barra-app { transform: translateY(110%); }
}

@media (max-width: 780px) and (prefers-reduced-motion: reduce) {
  .barra-app { transition: none; }
  .barra-app[data-oculta] { transform: none; }
}

@media print {
  .barra-app { display: none !important; }
}

/* ---------------------------------------------------------------------
   20. Rodape
   --------------------------------------------------------------------- */
.rodape { position: relative; background: var(--preto-2); border-top: 1px solid var(--borda); }
.rodape__faixa {
  height: 5px;
  background: linear-gradient(90deg,
    var(--lima) 0 20%, var(--ciano) 20% 40%, var(--roxo) 40% 60%,
    var(--magenta) 60% 80%, var(--amarelo) 80% 100%);
}
.rodape__interno {
  max-width: var(--largura);
  margin: 0 auto;
  padding: clamp(2.4rem, 5vw, 4rem) var(--gutter) clamp(2rem, 4vw, 3rem);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: clamp(1.6rem, 3.4vw, 2.6rem);
}
.rodape__coluna--marca img { width: 132px; height: auto; margin-bottom: 1rem; }
.rodape__local { font-size: var(--t-sm); color: var(--texto-2); }
.rodape__gratuito {
  margin-top: 0.5rem;
  font-family: var(--fonte-tec);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lima);
}
.rodape__titulo {
  margin-bottom: 0.9rem;
  font-family: var(--fonte-tec);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--texto-3);
}
.rodape__lista { display: grid; gap: 0.5rem; }
.rodape__lista a { font-size: var(--t-sm); color: var(--texto-2); transition: color var(--transicao); }
.rodape__lista a:hover { color: var(--branco); }
/* Seta discreta avisando que o link sai do site. */
.rodape__externo {
  display: inline-block;
  margin-left: 0.15rem;
  font-size: 0.78em;
  color: var(--texto-3);
  transition: color var(--transicao), transform var(--transicao);
}
.rodape__lista a:hover .rodape__externo { color: var(--lima); transform: translate(1px, -1px); }

.rodape__redes { display: flex; gap: 0.5rem; margin-top: 1.2rem; }
.rodape__redes a {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  color: var(--texto-2);
  border: 1px solid var(--borda);
  border-radius: 50%;
  transition: color var(--transicao), border-color var(--transicao), transform var(--transicao);
}
.rodape__redes a:hover { color: var(--branco); border-color: var(--borda-forte); transform: translateY(-2px); }

.rodape__base { border-top: 1px solid var(--borda); }
.rodape__base-interno {
  max-width: var(--largura);
  margin: 0 auto;
  padding: 1.2rem var(--gutter) calc(1.4rem + env(safe-area-inset-bottom));
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem 1.6rem;
}
.rodape__realizacao { margin: 0; display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
.rodape__realizacao span {
  font-family: var(--fonte-tec);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--texto-3);
}
.rodape__realizacao a { font-size: var(--t-sm); font-weight: 600; color: var(--texto); }
.rodape__realizacao a:hover { color: var(--azul-pa); }
.rodape__creditos, .rodape__qr { margin: 0; font-size: 0.76rem; color: var(--texto-3); }
.rodape__qr a { text-decoration: underline; text-underline-offset: 3px; }
.rodape__qr a:hover { color: var(--branco); }

/* ---------------------------------------------------------------------
   21. Paginas internas
   --------------------------------------------------------------------- */
.pagina { padding: clamp(2.4rem, 6vw, 4.4rem) 0 var(--secao-y); }
.pagina__interno {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.pagina__voltar {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 1.6rem;
  font-family: var(--fonte-tec);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texto-3);
}
.pagina__voltar:hover { color: var(--destaque); }
.pagina__titulo {
  font-family: var(--fonte-display);
  font-size: var(--t-xxl);
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.pagina__corpo { color: var(--texto-2); font-size: var(--t-md); }
/* Paragrafo de abertura das paginas de texto, vindo do painel. */
.pagina__abertura {
  margin: 0 0 1.8rem;
  padding-left: 1rem;
  border-left: 3px solid var(--destaque);
  font-size: var(--t-lg);
  line-height: 1.5;
  color: var(--texto-1);
  max-width: 62ch;
}
.pagina__atualizacao {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: 1.2rem;
  border-top: 1px solid var(--borda);
  font-family: var(--fonte-tec);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texto-3);
}
.pagina__corpo h2 {
  margin: 2.2rem 0 0.8rem;
  font-family: var(--fonte-display);
  font-size: var(--t-lg);
  text-transform: uppercase;
  color: var(--branco);
}
.pagina__corpo h3 { margin: 1.6rem 0 0.6rem; font-size: 1.05rem; font-weight: 600; color: var(--branco); }
.pagina__corpo ul { display: grid; gap: 0.55rem; margin: 0 0 1.2rem; }
.pagina__corpo ul li { position: relative; padding-left: 1.2rem; }
.pagina__corpo ul li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.62em;
  width: 7px; height: 7px;
  background: var(--destaque);
  transform: skewX(var(--inclinacao));
}
.pagina__corpo table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.4rem;
  font-size: var(--t-sm);
}
.pagina__corpo th, .pagina__corpo td {
  padding: 0.7rem 0.8rem;
  text-align: left;
  border-bottom: 1px solid var(--borda);
  vertical-align: top;
}
.pagina__corpo th { color: var(--branco); font-family: var(--fonte-tec); font-size: 0.76rem; letter-spacing: 0.1em; text-transform: uppercase; }

/* Pagina de atracao */
.atracao-topo {
  position: relative;
  padding: clamp(2.4rem, 6vw, 4.6rem) 0 clamp(2rem, 4vw, 3rem);
  overflow: hidden;
}
.atracao-topo__fundo {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.atracao-topo__fundo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 22%;
  opacity: 0.2;
  filter: blur(14px) saturate(1.2);
  transform: scale(1.1);
}
.atracao-topo__veu {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 10, 10, 0.6), var(--preto) 84%);
}
.atracao-topo__interno {
  position: relative;
  z-index: 2;
  max-width: var(--largura);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: clamp(1.4rem, 3.4vw, 3rem);
  align-items: end;
}
@media (max-width: 800px) { .atracao-topo__interno { grid-template-columns: 1fr; } }

.atracao-topo__retrato {
  position: relative;
  border-radius: var(--raio);
  overflow: hidden;
  border: 2px solid var(--cor, var(--lima));
  box-shadow: var(--sombra-alta);
  max-width: 300px;
}
.atracao-topo__retrato img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.atracao-topo__dia {
  display: inline-block;
  margin-bottom: 0.9rem;
  padding: 0.3rem 0.8rem;
  font-family: var(--fonte-tec);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--preto);
  background: var(--cor, var(--lima));
  transform: skewX(var(--inclinacao));
}
.atracao-topo__dia > span { display: inline-block; transform: skewX(calc(var(--inclinacao) * -1)); }
.atracao-topo__nome {
  font-family: var(--fonte-nome);
  font-size: var(--t-xxl);
  font-style: italic;
  line-height: 0.98;
  text-transform: uppercase;
  margin-bottom: 0.7rem;
}
.atracao-topo__meta { display: flex; flex-wrap: wrap; gap: 0.6rem 1.4rem; margin-bottom: 1.3rem; }
.atracao-topo__meta div {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.atracao-topo__meta dt,
.atracao-topo__meta .rotulo {
  font-family: var(--fonte-tec);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texto-3);
}
.atracao-topo__meta dd,
.atracao-topo__meta .valor { margin: 0; font-size: 0.95rem; font-weight: 600; }
.atracao-topo__acoes { display: flex; flex-wrap: wrap; gap: 0.7rem; }

.atracao-corpo { padding: clamp(1.6rem, 4vw, 3rem) 0 var(--secao-y); }
.atracao-corpo__interno {
  max-width: var(--largura);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
  gap: clamp(1.6rem, 3.4vw, 3rem);
  align-items: start;
}
@media (max-width: 900px) { .atracao-corpo__interno { grid-template-columns: 1fr; } }
.atracao-corpo__texto { font-size: var(--t-md); color: var(--texto-2); }
.atracao-lado {
  padding: clamp(1.2rem, 2.4vw, 1.7rem);
  background: var(--fundo-2);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
}
.atracao-lado h2 {
  margin-bottom: 1rem;
  font-family: var(--fonte-tec);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texto-3);
}
.atracao-lado__lista { display: grid; gap: 0.7rem; }
.atracao-lado__item {
  display: flex;
  gap: 0.7rem;
  align-items: center;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--borda);
}
.atracao-lado__item:last-child { border-bottom: 0; padding-bottom: 0; }
.atracao-lado__item img { width: 44px; aspect-ratio: 1; object-fit: cover; border-radius: var(--raio-sm); flex: none; }
.atracao-lado__item strong { display: block; font-size: 0.88rem; font-weight: 600; }
.atracao-lado__item span { font-size: 0.72rem; color: var(--texto-3); }

/* Imprensa */
.imprensa-lista { display: grid; gap: 0.8rem; }
.imprensa-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.3rem;
  background: var(--fundo-2);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
}
.imprensa-item__info { flex: 1; min-width: 200px; }
.imprensa-item__info h3 { font-size: 1rem; font-weight: 600; margin-bottom: 0.2rem; }
.imprensa-item__info p { margin: 0; font-size: var(--t-sm); color: var(--texto-3); }
.imprensa-item__tipo {
  display: inline-block;
  margin-bottom: 0.45rem;
  padding: 0.15rem 0.5rem;
  font-family: var(--fonte-tec);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lima);
  border: 1px solid rgba(180, 255, 0, 0.35);
  border-radius: 3px;
}

/* Erro e manutencao */
.tela-central {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: var(--gutter);
  text-align: center;
}
.tela-central__interno { max-width: 44ch; }
.tela-central img { width: 168px; height: auto; margin: 0 auto 2rem; }
.tela-central__codigo {
  font-family: var(--fonte-display);
  font-size: clamp(4rem, 16vw, 9rem);
  line-height: 0.9;
  color: var(--destaque);
}
.tela-central h1 {
  margin: 0.6rem 0 0.9rem;
  font-family: var(--fonte-display);
  font-size: var(--t-xl);
  text-transform: uppercase;
}
.tela-central p { color: var(--texto-2); margin-bottom: 1.8rem; }

/* ---------------------------------------------------------------------
   22. Barra de acessibilidade
   --------------------------------------------------------------------- */
.acessibilidade { position: fixed; left: 16px; bottom: 16px; z-index: 140; }
.acessibilidade__gatilho {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  color: var(--preto);
  background: var(--lima);
  border-radius: 50%;
  box-shadow: 0 10px 26px -8px rgba(0, 0, 0, 0.8);
  transition: transform var(--transicao);
}
.acessibilidade__gatilho:hover { transform: scale(1.07); }

.acessibilidade__painel {
  position: absolute;
  left: 0; bottom: calc(100% + 10px);
  width: min(300px, calc(100vw - 32px));
  padding: 1.2rem;
  background: var(--preto-2);
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio);
  box-shadow: var(--sombra-alta);
}
.acessibilidade__titulo {
  margin-bottom: 1rem;
  font-family: var(--fonte-display);
  font-size: 1.15rem;
  text-transform: uppercase;
}
.acessibilidade__grupo { padding-bottom: 1rem; margin-bottom: 1rem; border-bottom: 1px solid var(--borda); }
.acessibilidade__grupo:last-of-type { border-bottom: 0; margin-bottom: 0.4rem; }
.acessibilidade__rotulo {
  margin-bottom: 0.55rem;
  font-family: var(--fonte-tec);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texto-3);
}
.acessibilidade__botoes { display: flex; gap: 0.4rem; }
.acessibilidade__botoes button {
  flex: 1;
  padding: 0.5rem;
  font-family: var(--fonte-tec);
  font-weight: 700;
  color: var(--texto-2);
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
  transition: color var(--transicao), border-color var(--transicao);
}
.acessibilidade__botoes button:hover { color: var(--branco); border-color: var(--borda-forte); }
.acessibilidade__opcao {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0;
  font-size: var(--t-sm);
  cursor: pointer;
}
.acessibilidade__opcao input { width: 18px; height: 18px; accent-color: var(--lima); flex: none; }
.acessibilidade__libras {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.6rem 0.8rem;
  font-family: var(--fonte-tec);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--preto);
  background: var(--lima);
  border-radius: var(--raio-sm);
  transition: filter var(--transicao);
}
.acessibilidade__libras:hover { filter: brightness(1.08); }
.acessibilidade__libras svg { flex: none; }

.acessibilidade__atalhos { display: grid; gap: 0.35rem; font-size: 0.76rem; color: var(--texto-3); }
.acessibilidade__atalhos kbd {
  display: inline-block;
  min-width: 22px;
  padding: 0.05rem 0.3rem;
  font-family: var(--fonte-tec);
  font-size: 0.7rem;
  text-align: center;
  color: var(--branco);
  background: var(--grafite);
  border-radius: 4px;
}
.acessibilidade__nota { margin: 0.9rem 0 0; font-size: 0.7rem; color: var(--texto-3); }

@media (max-width: 700px) {
  /* Acima da barra de atalhos, que ocupa os 56px de baixo da tela.
     Precisa vir depois da regra base: mesma especificidade, quem esta
     por ultimo no arquivo e que vale. */
  .acessibilidade { left: 12px; bottom: calc(68px + env(safe-area-inset-bottom)); }
  .acessibilidade__gatilho { width: 42px; height: 42px; }
}

/* ---------------------------------------------------------------------
   23. Animacoes de entrada
   --------------------------------------------------------------------- */
[data-revelar] {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity var(--transicao-lenta) var(--atraso, 0ms),
    transform var(--transicao-lenta) var(--atraso, 0ms);
}
[data-revelar][data-visivel] { opacity: 1; transform: none; }

/*
  A abertura da pagina nao espera rolagem: o visitante ja esta olhando
  para ela. Aqui a entrada e uma animacao em cascata disparada no
  carregamento, e nao um gatilho de scroll - o botao principal nunca
  fica invisivel esperando um gesto que talvez nao venha.
*/
.hero [data-entrada] {
  opacity: 0;
  animation: entrar 720ms cubic-bezier(0.16, 0.84, 0.24, 1) var(--atraso, 0ms) both;
}
@keyframes entrar {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}

/* Sem JavaScript, o conteudo aparece normalmente */
.sem-js [data-revelar] { opacity: 1; transform: none; }

/* ---------------------------------------------------------------------
   24. Preferencias do visitante
   --------------------------------------------------------------------- */

/* Reducao de movimento: respeita a configuracao do sistema e a escolha
   feita na barra de acessibilidade */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  [data-revelar] { opacity: 1; transform: none; }
}

html[data-sem-animacao] { scroll-behavior: auto; }
html[data-sem-animacao] *,
html[data-sem-animacao] *::before,
html[data-sem-animacao] *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
}
html[data-sem-animacao] [data-revelar] { opacity: 1; transform: none; }

/* Alto contraste */
html[data-alto-contraste] {
  --fundo: #000000;
  --fundo-2: #000000;
  --preto: #000000;
  --preto-2: #000000;
  --preto-3: #0A0A0A;
  --texto: #FFFFFF;
  --texto-2: #FFFFFF;
  --texto-3: #E6E6E6;
  --borda: rgba(255, 255, 255, 0.5);
  --borda-forte: #FFFFFF;
  --destaque: #FFFF00;
  --lima: #FFFF00;
  --cinza: #E6E6E6;
  --cinza-claro: #FFFFFF;
}
/* Em alto contraste, toda decoração sai: o que fica é conteúdo */
html[data-alto-contraste] .hero__fundo,
html[data-alto-contraste] .hero__elementos,
html[data-alto-contraste] .transmissao-quadro { background: #000; border-color: #FFF; }
html[data-alto-contraste] .hero__data-numeros {
  background: none;
  -webkit-text-fill-color: #FFFF00;
  color: #FFFF00;
}
html[data-alto-contraste] .cartao-atracao__imagem img,
html[data-alto-contraste] .feed-ig__imagem img { filter: contrast(1.25); }

/* Sublinhar todos os links */
html[data-sublinhar-links] a { text-decoration: underline !important; text-underline-offset: 3px; }

/* Escala de fonte escolhida pelo visitante */
html[data-fonte='maior']  { font-size: 112.5%; }
html[data-fonte='menor']  { font-size: 90%; }

/* ---------------------------------------------------------------------
   26. Operacao de drones (pagina /drones)
   --------------------------------------------------------------------- */
/* O card veio pronto da organizacao, com paleta e fonte proprias. Aqui
   ele usa a identidade do site: mesma tipografia, mesmas cores, e nada
   carregado de fora - a politica de seguranca do site nao permite fonte
   de terceiros. */
.pagina--drones .secao__interno { max-width: 780px; }

.drones__topo {
  padding: clamp(1.5rem, 4vw, 2.2rem);
  background:
    radial-gradient(120% 90% at 88% 0%, color-mix(in srgb, var(--ciano) 18%, transparent), transparent 62%),
    radial-gradient(110% 80% at 4% 6%, color-mix(in srgb, var(--amarelo) 14%, transparent), transparent 58%),
    var(--fundo-2);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
}
.drones__selo {
  display: inline-block;
  margin-bottom: 0.9rem;
  padding: 0.3rem 0.75rem;
  font-family: var(--fonte-tec);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ciano);
  border: 1px solid color-mix(in srgb, var(--ciano) 45%, transparent);
  border-radius: 999px;
}
.drones__chamada {
  max-width: 50ch;
  margin-top: 0.8rem;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--texto-2);
}

.drones__bloco { --cor-drone: var(--ciano); margin-top: clamp(1.8rem, 4vw, 2.6rem); }
.drones__bloco--amarelo { --cor-drone: var(--amarelo); }
.drones__bloco--laranja { --cor-drone: var(--laranja); }

.drones__rotulo {
  font-family: var(--fonte-tec);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cor-drone);
}
.drones__titulo {
  margin-top: 0.35rem;
  font-family: var(--fonte-titulo);
  font-size: clamp(1.3rem, 3.4vw, 1.7rem);
  line-height: 1.1;
  text-transform: uppercase;
}

.drones__lista {
  margin-top: 1rem;
  list-style: none;
  border-top: 1px solid var(--borda);
}
.drones__lista li {
  padding: 0.85rem 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--texto-2);
  border-bottom: 1px solid var(--borda);
}
.drones__lista strong { color: var(--texto); font-weight: 600; }

/* Os passos sao uma sequencia: a linha a esquerda mostra que um vem
   depois do outro, e o numero diz a ordem sem depender da cor. */
.drones__passos {
  display: grid;
  gap: 1rem;
  margin-top: 1.1rem;
  padding-left: 1.35rem;
  list-style: none;
  border-left: 2px solid color-mix(in srgb, var(--cor-drone) 40%, transparent);
}
.drones__passo {
  position: relative;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--texto-2);
}
.drones__passo strong { display: block; color: var(--texto); font-weight: 700; }
.drones__numero {
  position: absolute;
  left: -2.05rem;
  top: 0.05rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.4rem;
  height: 1.4rem;
  font-family: var(--fonte-tec);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--preto);
  background: var(--cor-drone);
  border-radius: 50%;
}

.drones__alerta {
  margin-top: 0.9rem;
  padding: clamp(1.1rem, 2.6vw, 1.4rem);
  background: color-mix(in srgb, var(--cor-drone) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--cor-drone) 45%, transparent);
  border-radius: var(--raio);
}
.drones__alerta p { font-size: 0.95rem; line-height: 1.6; color: var(--texto-2); max-width: 52ch; }
.drones__alerta p + p { margin-top: 0.6rem; }
.drones__alerta strong { color: var(--texto); font-weight: 600; }

.drones__fecho {
  max-width: 44ch;
  margin-top: clamp(1.8rem, 4vw, 2.6rem);
  padding: clamp(1.3rem, 3vw, 1.8rem);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.4;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--ciano) 16%, transparent),
    color-mix(in srgb, var(--amarelo) 12%, transparent));
  border: 1px solid var(--borda);
  border-radius: var(--raio);
}

/* O formulario e de fora (JotForm) e nao sabe a altura do proprio
   conteudo aqui dentro: uma altura generosa evita rolagem dupla, e o
   link ao lado atende quem prefere abrir direto. */
.drones__formulario {
  margin-top: 1.2rem;
  overflow: hidden;
  background: var(--fundo-2);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
}
.drones__formulario iframe {
  display: block;
  width: 100%;
  height: 900px;
  border: 0;
}
@media (max-width: 640px) {
  .drones__formulario iframe { height: 1050px; }
}

.drones__abrir { margin-top: 0.9rem; }
.drones__abrir a {
  font-family: var(--fonte-tec);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ciano);
}
.drones__abrir a:hover { text-decoration: underline; text-underline-offset: 4px; }
.drones__aviso { margin-top: 0.7rem; font-size: 0.82rem; color: var(--texto-3); }

.drones__volta { margin-top: 1.6rem; }
.drones__volta a {
  font-family: var(--fonte-tec);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ciano);
}
.drones__volta a:hover { text-decoration: underline; text-underline-offset: 4px; }

.seguranca__acoes { margin-top: clamp(1.2rem, 3vw, 1.8rem); }

/* ---------------------------------------------------------------------
   25. Seguranca do evento
   --------------------------------------------------------------------- */
/* Dois cartoes lado a lado no desktop. O da POE traz foto e por isso
   ocupa o dobro da largura em telas grandes: a imagem do veiculo e o
   que faz a informacao entrar sem precisar de texto. */
.seguranca {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}

.seguranca__cartao {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--fundo-2);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  border-top: 3px solid var(--ciano);
}
.seguranca__cartao--poe { border-top-color: var(--roxo); }

/* O video do poste foi filmado em pe. A capa e composta em 16 por 9,
   com o quadro no centro, e o player usa contain: assim o topo dos dois
   cartoes tem a mesma altura e nada do video fica cortado. */
.seguranca__video { background: var(--preto); }
.seguranca__video video {
  display: block;
  width: 100%;
  height: 300px;
  object-fit: contain;
  background: var(--preto);
}

.seguranca__foto { margin: 0; background: var(--preto-3); }
.seguranca__foto img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 320px;
  object-fit: cover;
}

.seguranca__corpo {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  padding: clamp(1.2rem, 2.4vw, 1.8rem);
}

.seguranca__icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 0.9rem;
  color: var(--ciano);
  background: color-mix(in srgb, var(--ciano) 14%, transparent);
  border-radius: 12px;
}
.seguranca__cartao--poe .seguranca__icone {
  color: var(--roxo);
  background: color-mix(in srgb, var(--roxo) 16%, transparent);
}

.seguranca__titulo {
  font-family: var(--fonte-titulo);
  font-size: clamp(1.15rem, 2.4vw, 1.45rem);
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

.seguranca__texto { margin-top: 0.7rem; color: var(--texto-2); }
.seguranca__texto p { margin: 0; font-size: 0.95rem; line-height: 1.6; }
.seguranca__texto strong { color: var(--texto); }

.seguranca__itens {
  display: grid;
  gap: 0.55rem;
  margin-top: 1.1rem;
  padding: 1.1rem 0 0;
  list-style: none;
  border-top: 1px solid var(--borda);
}
.seguranca__itens li {
  display: flex;
  gap: 0.6rem;
  align-items: start;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--texto-2);
}
.seguranca__itens svg { flex: 0 0 auto; margin-top: 0.18rem; color: var(--ciano); }
.seguranca__cartao--poe .seguranca__itens svg { color: var(--roxo); }

.seguranca__link {
  display: inline-flex;
  gap: 0.4rem;
  align-items: center;
  margin-top: auto;
  padding-top: 1.2rem;
  font-family: var(--fonte-tec);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ciano);
}
.seguranca__link:hover { text-decoration: underline; text-underline-offset: 4px; }
.seguranca__link:hover svg { transform: translate(2px, -2px); }
.seguranca__link svg { transition: transform var(--transicao); }

@media (max-width: 640px) {
  .seguranca__video video { height: 240px; }
}

@media (min-width: 1000px) {
  /* Sem align-items: os dois cartoes terminam na mesma linha, e o link
     do SmartView desce para o rodape do seu cartao. */
  .seguranca { grid-template-columns: 1fr 1.25fr; }
  .seguranca__cartao--poe .seguranca__foto img { max-height: none; height: 300px; }
}

/* Impressao: entrega a programacao em papel de forma legivel */
@media print {
  .cabecalho, .rodape, .acessibilidade, .roteiro, .hero__fundo, .hero__elementos,
  .transmissao-quadro, .barra-aviso, .pular-para-conteudo,
  .secao--instagram, .secao--playlist, .botao, .filtro, .hero__rolar,
  .aviso-flutuante { display: none !important; }
  body { background: #FFF; color: #000; }
  .secao { padding: 1rem 0; break-inside: avoid; }
  .secao__titulo, .agenda__rotulo, .linha-tempo__titulo { color: #000; }
  .agenda__dia { border: 1px solid #999; break-inside: avoid; }
  a { color: #000; text-decoration: underline; }
}