/* ============================================================================
   ROCK IN RIO LISBOA 2026 — TIMELINE INTERATIVA
   styles.css  ·  Folha de estilos principal
   ----------------------------------------------------------------------------
   Estrutura:
     1.  Design tokens (variáveis CSS — cores, fontes, espaçamentos)
     2.  Fontes (@font-face — slot para fontes oficiais + fallbacks)
     3.  Reset & base
     4.  Utilitários / componentes reutilizáveis (.btn, .chip, .badge…)
     5.  Navbar
     6.  Hero
     7.  Barra de controlos (dias, busca, filtros, export)
     8.  Timeline — Gantt (desktop / tablet)
     9.  Agenda vertical (mobile)
    10.  Legenda
    11.  Tooltip & Modal de detalhe
    12.  Rodapé
    13.  Responsividade (breakpoints)
    14.  Animações & acessibilidade
   ========================================================================== */

/* ============================================================================
   1. DESIGN TOKENS
   Paleta extraída do template oficial RIRLX26 (gradiente violeta→magenta→
   vermelho sobre preto) e cores de palco derivadas do espectro da marca.
   ========================================================================== */
:root {
  /* — Fundo / superfícies — */
  --bg:            #07060B;
  --bg-2:          #0C0A14;
  --surface:       #141021;
  --surface-2:     #1B1630;
  --surface-3:     #241D3D;
  --border:        rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.18);

  /* — Texto — */
  --text:   #F5F3FB;
  --muted:  #A39DBA;
  --faint:  #6E6888;

  /* — Gradiente assinatura da marca — */
  --grad-violet:  #5F24C2;
  --grad-magenta: #C4209A;
  --grad-pink:    #E9014D;
  --grad-blue:    #2A0083;
  --brand-grad:   linear-gradient(115deg, #5F24C2 0%, #C4209A 42%, #FF1E56 100%);
  --brand-grad-soft: linear-gradient(115deg, rgba(95,36,194,.22), rgba(196,32,154,.20), rgba(255,30,86,.20));

  /* — Vermelho Rock in Rio — */
  --rir-red: #ED1C24;

  /* — Cores de palco (espelham data.js / .stages[].color) — */
  --stage-mundo:     #FF1E56;
  --stage-valley:    #9D4EDD;
  --stage-superbock: #2E8BFF;
  --stage-digital:   #18D6C8;
  --stage-arena:     #FFB020;

  /* — Destaque headliner — */
  --headliner: #FFD60A;

  /* — Texto sobre blocos coloridos (adapta-se ao tema) — */
  --act-fg: #fff;
  --act-fg-soft: rgba(255,255,255,.78);

  /* — Tipografia —
     Slot p/ fontes oficiais (Monument Extended / Armin Grotesk). Caso não
     estejam presentes em assets/fonts, recai nas alternativas livres
     Archivo (expandida) e Hanken Grotesk — visualmente próximas. */
  --font-display: 'Monument Extended', 'Archivo', 'Arial Narrow', sans-serif;
  --font-body:    'Armin Grotesk', 'Hanken Grotesk', system-ui, -apple-system, sans-serif;

  /* — Forma — */
  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  /* — Sombras — */
  --shadow:    0 10px 30px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.6);
  --glow-head: 0 0 0 1px rgba(255, 214, 10, .5), 0 6px 26px rgba(255, 214, 10, .28);

  /* — Layout da timeline — */
  --label-w:  208px;   /* largura da coluna de palcos (desktop) */
  --ruler-h:  34px;
  --row-h:    62px;
  --track-min: 1080px; /* largura mínima da área de tempo (scroll horizontal) */

  /* — Camadas — */
  --z-nav: 80;
  --z-controls: 70;
  --z-tooltip: 200;
  --z-modal: 300;
}

/* ============================================================================
   2. FONTES — slot drop-in para as fontes oficiais da marca.
   Coloque os ficheiros em assets/fonts/ para fidelidade 100% ao template.
   (Se ausentes, o navegador ignora e usa Archivo / Hanken Grotesk.)
   ========================================================================== */
@font-face {
  font-family: 'Monument Extended';
  src: url('../assets/fonts/MonumentExtended-Black.woff2') format('woff2'),
       url('../assets/fonts/MonumentExtended-Black.otf')   format('opentype');
  font-weight: 800 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Monument Extended';
  src: url('../assets/fonts/MonumentExtended-Regular.woff2') format('woff2'),
       url('../assets/fonts/MonumentExtended-Regular.otf')   format('opentype');
  font-weight: 400 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Armin Grotesk';
  src: url('../assets/fonts/ArminGrotesk-Regular.woff2') format('woff2');
  font-weight: 300 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Armin Grotesk';
  src: url('../assets/fonts/ArminGrotesk-Bold.woff2') format('woff2');
  font-weight: 700 800; font-style: normal; font-display: swap;
}

/* ============================================================================
   3. RESET & BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

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

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.5;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Textura de fundo: brilho de gradiente fixo, discreto */
body::before {
  content: '';
  position: fixed; inset: 0;
  background:
    radial-gradient(60% 50% at 15% 0%,  rgba(95,36,194,.20), transparent 60%),
    radial-gradient(55% 45% at 85% 8%,  rgba(255,30,86,.16), transparent 60%),
    radial-gradient(70% 60% at 50% 100%, rgba(196,32,154,.12), transparent 65%);
  pointer-events: none; z-index: 0;
}

img { max-width: 100%; display: block; }
button, input, select { font-family: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }

.display { font-family: var(--font-display); font-stretch: 125%; font-variation-settings: 'wdth' 125; letter-spacing: .01em; }

/* Faixa de conteúdo */
.wrap { width: 100%; max-width: 1320px; margin-inline: auto; padding-inline: clamp(16px, 4vw, 40px); }

/* Esconder visualmente (acessibilidade) */
.sr-only {
  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 REUTILIZÁVEIS
   ========================================================================== */

/* Botões -------------------------------------------------------------------*/
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-body); font-weight: 600; font-size: .82rem;
  letter-spacing: .04em; text-transform: uppercase;
  padding: 11px 18px; border-radius: 999px;
  border: 1px solid var(--border-strong); background: var(--surface-2);
  color: var(--text); cursor: pointer; white-space: nowrap;
  transition: transform .15s ease, background .2s ease, border-color .2s, box-shadow .2s;
}
.btn:hover { border-color: rgba(255,255,255,.4); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn svg { width: 16px; height: 16px; }

.btn-primary {
  background: var(--brand-grad); border-color: transparent; color: #fff;
  box-shadow: 0 8px 24px rgba(233,1,77,.32);
}
.btn-primary:hover { box-shadow: 0 12px 32px rgba(233,1,77,.46); filter: brightness(1.06); }

.btn-ghost { background: transparent; }

/* Chips (toggle de filtro) -------------------------------------------------*/
.chip {
  --c: var(--muted);
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .76rem; font-weight: 600; letter-spacing: .03em;
  padding: 7px 13px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface);
  color: var(--muted); cursor: pointer; user-select: none;
  transition: all .16s ease;
}
.chip:hover { border-color: var(--c); color: var(--text); }
.chip .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--c); flex: none; box-shadow: 0 0 8px var(--c); }
.chip.active { background: color-mix(in srgb, var(--c) 18%, transparent); border-color: var(--c); color: var(--text); }
.chip.active .dot { box-shadow: 0 0 10px var(--c); }

/* Badge (selo de palco/categoria em cards) ---------------------------------*/
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .64rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px;
  background: color-mix(in srgb, var(--c, var(--muted)) 16%, transparent);
  color: color-mix(in srgb, var(--c, var(--muted)) 75%, white);
  border: 1px solid color-mix(in srgb, var(--c, var(--muted)) 40%, transparent);
}
.badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c, var(--muted)); }

/* Cabeçalho de secção ------------------------------------------------------*/
.section-head { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.section-head h2 {
  font-family: var(--font-display); font-stretch: 125%; font-variation-settings: 'wdth' 125;
  font-weight: 800; font-size: clamp(1.4rem, 3vw, 2.1rem);
  text-transform: uppercase; letter-spacing: .01em; line-height: .95;
}
.section-head .eyebrow { color: var(--grad-pink); font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; font-size: .72rem; }

/* ============================================================================
   5. NAVBAR
   ========================================================================== */
.nav {
  position: sticky; top: 0; z-index: var(--z-nav);
  display: flex; align-items: center; gap: 18px;
  padding: 12px clamp(16px,4vw,40px);
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
.nav .brand { display: flex; align-items: center; gap: 12px; }
.nav .brand img { height: 26px; width: auto; filter: drop-shadow(0 2px 6px rgba(0,0,0,.5)); }
.nav .brand .yr {
  font-family: var(--font-display); font-stretch: 125%; font-weight: 800;
  font-size: 1rem; letter-spacing: .02em; color: var(--text);
  padding-left: 12px; border-left: 1px solid var(--border-strong);
}
.nav-links { display: flex; gap: 4px; margin-left: 8px; }
.nav-links a {
  font-size: .8rem; font-weight: 600; letter-spacing: .03em; color: var(--muted);
  padding: 8px 12px; border-radius: 8px; transition: color .15s, background .15s;
}
.nav-links a:hover { color: var(--text); background: var(--surface); }
.nav .spacer { margin-left: auto; }

/* ============================================================================
   6. HERO
   ========================================================================== */
.hero {
  position: relative; z-index: 1;
  min-height: 86vh; display: flex; flex-direction: column; justify-content: center;
  padding: 80px clamp(16px,4vw,40px) 60px; text-align: center; overflow: hidden;
}
.hero::after { /* clarão de gradiente da marca */
  content: ''; position: absolute; inset: -20% -10% auto -10%; height: 120%;
  background:
    radial-gradient(40% 60% at 30% 30%, rgba(95,36,194,.5), transparent 60%),
    radial-gradient(45% 55% at 75% 40%, rgba(255,30,86,.42), transparent 62%),
    radial-gradient(40% 50% at 55% 80%, rgba(196,32,154,.38), transparent 60%);
  filter: blur(20px); opacity: .9; z-index: -1; pointer-events: none;
  animation: heroFloat 18s ease-in-out infinite alternate;
}
.hero .lisboa { width: min(560px, 78vw); margin: 0 auto 22px; filter: drop-shadow(0 6px 24px rgba(0,0,0,.6)); }
.hero .script { width: min(420px, 62vw); margin: 0 auto 26px; filter: drop-shadow(0 4px 18px rgba(0,0,0,.55)); }
.hero .dates {
  font-family: var(--font-display); font-stretch: 125%; font-variation-settings: 'wdth' 125;
  font-weight: 800; text-transform: uppercase;
  font-size: clamp(1.1rem, 3.4vw, 2rem); letter-spacing: .04em;
  background: var(--brand-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
  margin-bottom: 12px;
}
.hero .venue { color: var(--muted); letter-spacing: .14em; text-transform: uppercase;
  font-size: .8rem; font-weight: 600; margin-bottom: 22px; }
.hero .summary { max-width: 620px; margin: 0 auto 30px; color: var(--muted); font-size: 1.02rem; line-height: 1.6; }
.hero .stats { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 34px; }
.hero .stat {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 14px 22px; min-width: 96px;
}
.hero .stat b { font-family: var(--font-display); font-stretch: 125%; font-weight: 800;
  display: block; font-size: 1.7rem; line-height: 1;
  background: var(--brand-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero .stat span { font-size: .68rem; color: var(--muted); text-transform: uppercase; letter-spacing: .12em; }
.hero .cta-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.scroll-cue { margin-top: 40px; color: var(--faint); font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; }
.scroll-cue::after { content: ''; display: block; width: 1px; height: 34px; margin: 10px auto 0;
  background: linear-gradient(var(--grad-pink), transparent); }

@keyframes heroFloat { from { transform: translateY(-12px) scale(1); } to { transform: translateY(14px) scale(1.05); } }

/* ============================================================================
   7. BARRA DE CONTROLOS  (dias · busca · filtros · export)
   ========================================================================== */
.controls {
  position: sticky; top: 51px; z-index: var(--z-controls);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-block: 1px solid var(--border);
}
.controls .row { display: flex; align-items: center; gap: 14px; padding: 12px clamp(16px,4vw,40px); flex-wrap: wrap; }
.controls .row + .row { border-top: 1px solid var(--border); }

/* Navegação por datas */
.day-nav { display: flex; align-items: center; gap: 8px; }
.day-nav .arrow {
  width: 34px; height: 34px; display: grid; place-items: center; flex: none;
  border-radius: 50%; border: 1px solid var(--border-strong); background: var(--surface-2); cursor: pointer;
  transition: all .15s;
}
.day-nav .arrow:hover { border-color: var(--grad-pink); color: var(--grad-pink); }
.day-tabs { display: flex; gap: 6px; }
.day-tab {
  display: flex; flex-direction: column; align-items: center; line-height: 1.15;
  font-weight: 700; font-size: .9rem; padding: 7px 16px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--surface); color: var(--muted); cursor: pointer;
  transition: all .16s; min-width: 70px;
}
.day-tab small { font-size: .6rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; opacity: .8; }
.day-tab:hover { border-color: var(--border-strong); color: var(--text); }
.day-tab.active { background: var(--brand-grad); border-color: transparent; color: #fff; box-shadow: 0 6px 18px rgba(233,1,77,.3); }

/* Busca */
.search { position: relative; flex: 1 1 230px; max-width: 360px; }
.search input {
  width: 100%; background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: 999px; padding: 11px 38px 11px 40px; font-size: .9rem; color: var(--text);
  transition: border-color .15s, box-shadow .15s;
}
.search input::placeholder { color: var(--faint); }
.search input:focus { outline: none; border-color: var(--grad-pink); box-shadow: 0 0 0 3px rgba(233,1,77,.18); }
.search .icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--faint); }
.search .clear { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); border: none; background: none;
  color: var(--faint); cursor: pointer; font-size: 1.1rem; line-height: 1; padding: 4px; display: none; }
.search .clear.show { display: block; }

/* Grupos de filtro */
.filter-group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.filter-group .lbl { font-size: .66rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); margin-right: 2px; }

.controls .spacer { margin-left: auto; }
.view-toggle { display: inline-flex; border: 1px solid var(--border-strong); border-radius: 999px; overflow: hidden; }
.view-toggle button { background: transparent; border: none; padding: 9px 14px; font-size: .72rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--muted); cursor: pointer; transition: all .15s; }
.view-toggle button.active { background: var(--surface-3); color: var(--text); }

/* Linha de resumo de resultados */
.results-line { display: flex; align-items: center; gap: 10px; padding: 8px clamp(16px,4vw,40px);
  font-size: .76rem; color: var(--muted); border-top: 1px solid var(--border); }
.results-line b { color: var(--text); }
.results-line .reset { margin-left: auto; color: var(--grad-pink); cursor: pointer; font-weight: 600;
  background: none; border: none; font-size: .76rem; }
.results-line .reset:hover { text-decoration: underline; }

/* ============================================================================
   8. TIMELINE — GANTT (desktop / tablet)
   ========================================================================== */
.timeline-section { position: relative; z-index: 1; padding: 30px 0 60px; scroll-margin-top: 230px; }
#controls { scroll-margin-top: 54px; }
#legendSection { scroll-margin-top: 230px; }

.gantt-scroll { overflow-x: auto; overflow-y: hidden; padding-bottom: 8px; }
.gantt { min-width: calc(var(--label-w) + var(--track-min)); position: relative; }

/* Régua de horas (sticky no topo do scroll) */
.gantt-ruler { display: flex; height: var(--ruler-h); position: relative; z-index: 6; margin-bottom: 2px; }
.gantt-ruler .corner { width: var(--label-w); flex: none; }
.gantt-ruler .scale { position: relative; flex: 1; }
.hour-mark { position: absolute; top: 0; transform: translateX(-50%); font-size: .66rem; color: var(--faint);
  letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.hour-mark::after { content: ''; display: block; width: 1px; height: 8px; margin: 4px auto 0; background: var(--border-strong); }

/* Linhas de grelha verticais (uma por hora) */
.grid-lines { position: absolute; left: var(--label-w); right: 0; top: var(--ruler-h); bottom: 0; pointer-events: none; z-index: 0; }
.grid-lines i { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--border); }
.grid-lines i.major { background: var(--border-strong); }

/* Linha "agora" */
.now-line { position: absolute; top: var(--ruler-h); bottom: 0; width: 2px; background: var(--headliner); z-index: 7; pointer-events: none; }
.now-line::before { content: 'AGORA'; position: absolute; top: -2px; left: 50%; transform: translateX(-50%);
  font-size: .54rem; font-weight: 800; letter-spacing: .12em; color: #0a0a0f; background: var(--headliner);
  padding: 2px 6px; border-radius: 4px; white-space: nowrap; }

/* Linha de palco */
.stage-row { display: flex; align-items: stretch; border-top: 1px solid var(--border); }
.stage-row:last-child { border-bottom: 1px solid var(--border); }
.stage-label {
  width: var(--label-w); flex: none; position: sticky; left: 0; z-index: 5;
  display: flex; flex-direction: column; justify-content: center; gap: 3px;
  padding: 10px 16px 10px 0; background: var(--bg);
}
.stage-label .nm { font-family: var(--font-display); font-stretch: 110%; font-weight: 700; font-size: .98rem;
  letter-spacing: .01em; line-height: 1.04; display: flex; align-items: center; gap: 8px; }
.stage-label .nm .bar { width: 5px; height: 22px; border-radius: 3px; background: var(--stage-c); flex: none; box-shadow: 0 0 12px var(--stage-c); }
.stage-label .sub { font-size: .62rem; color: var(--faint); text-transform: uppercase; letter-spacing: .1em; padding-left: 13px; }
.stage-label .cnt { font-size: .6rem; color: var(--muted); padding-left: 13px; }

.track { flex: 1; position: relative; min-height: var(--row-h); background:
  repeating-linear-gradient(90deg, transparent, transparent calc(100%/13 - 1px), rgba(255,255,255,.015) calc(100%/13)); }

/* Bloco de atração */
.act {
  position: absolute; top: 8px; height: calc(var(--row-h) - 16px);
  border-radius: var(--radius-sm); padding: 0; overflow: hidden; cursor: pointer; z-index: 2;
  background: color-mix(in srgb, var(--stage-c) 22%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--stage-c) 55%, transparent);
  border-left: 3px solid var(--stage-c);
  transition: transform .14s ease, box-shadow .14s ease, filter .14s, opacity .2s;
}
.act:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.5); z-index: 10;
  border-color: color-mix(in srgb, var(--stage-c) 85%, white); }
.act .ai { padding: 7px 9px; height: 100%; display: flex; flex-direction: column; justify-content: center; gap: 2px; }
.act .an { font-size: .74rem; font-weight: 700; line-height: 1.12; color: var(--act-fg);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.act .at { font-size: .62rem; color: var(--act-fg-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Headliner */
.act.headliner {
  background: linear-gradient(135deg, color-mix(in srgb, var(--headliner) 30%, var(--surface)), color-mix(in srgb, var(--stage-c) 40%, var(--surface)));
  border-color: var(--headliner); border-left-color: var(--headliner); box-shadow: var(--glow-head);
}
.act.headliner .an { color: var(--act-fg); }
.act.headliner .star { color: var(--headliner); }

/* Atração especial (Show Aviões / Momento) — bloco esguio com padrão */
.act.special { background: repeating-linear-gradient(45deg,
  color-mix(in srgb, var(--stage-c) 26%, var(--surface)),
  color-mix(in srgb, var(--stage-c) 26%, var(--surface)) 6px,
  color-mix(in srgb, var(--stage-c) 14%, var(--surface)) 6px,
  color-mix(in srgb, var(--stage-c) 14%, var(--surface)) 12px); }
.act.special .an { font-size: .66rem; opacity: .95; }

/* Estado filtrado/atenuado (busca / filtros) */
.act.dim { opacity: .12; filter: grayscale(.6); }
.act.match { box-shadow: 0 0 0 2px var(--headliner), 0 10px 24px rgba(0,0,0,.5); z-index: 9; }

.empty-msg { text-align: center; color: var(--muted); padding: 70px 16px; font-size: .95rem; }
.empty-msg .big { font-family: var(--font-display); font-stretch: 120%; font-weight: 800; font-size: 1.4rem; color: var(--text); display: block; margin-bottom: 8px; }

/* ============================================================================
   9. AGENDA VERTICAL (mobile / vista alternativa)
   ========================================================================== */
.agenda { display: none; flex-direction: column; gap: 26px; padding-top: 8px; }
.agenda-stage > h3 {
  display: flex; align-items: center; gap: 10px; margin-bottom: 12px;
  font-family: var(--font-display); font-stretch: 115%; font-weight: 700; font-size: 1.05rem;
  letter-spacing: .01em; text-transform: uppercase;
}
.agenda-stage > h3 .bar { width: 6px; height: 22px; border-radius: 3px; background: var(--stage-c); box-shadow: 0 0 12px var(--stage-c); }
.agenda-stage > h3 .cnt { font-family: var(--font-body); font-size: .64rem; color: var(--muted); letter-spacing: .08em; }

.acard {
  display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: stretch;
  background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--stage-c);
  border-radius: var(--radius); padding: 12px 14px; margin-bottom: 8px; cursor: pointer;
  transition: border-color .15s, transform .15s, background .15s;
}
.acard:hover { transform: translateX(2px); border-color: color-mix(in srgb, var(--stage-c) 60%, transparent); background: var(--surface-2); }
.acard .time { font-variant-numeric: tabular-nums; }
.acard .time .s { display: block; font-weight: 800; font-size: .9rem; color: var(--text); }
.acard .time .e { display: block; font-size: .68rem; color: var(--faint); }
.acard .body .nm { font-weight: 700; font-size: .96rem; line-height: 1.2; margin-bottom: 6px; color: var(--text); }
.acard .body .meta { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.acard.headliner { border-left-color: var(--headliner); box-shadow: inset 0 0 0 1px rgba(255,214,10,.25); }
.acard.headliner .time .s { color: var(--headliner); }

/* ============================================================================
   10. LEGENDA
   ========================================================================== */
.legend { display: flex; gap: 22px; flex-wrap: wrap; padding: 18px clamp(16px,4vw,40px);
  border-top: 1px solid var(--border); background: var(--bg-2); }
.legend .grp { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.legend .grp .ttl { font-size: .64rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.legend .li { display: flex; align-items: center; gap: 8px; font-size: .74rem; color: var(--muted); }
.legend .li .sw { width: 14px; height: 14px; border-radius: 4px; flex: none; }

/* ============================================================================
   11. TOOLTIP & MODAL DE DETALHE
   ========================================================================== */
.tooltip {
  position: fixed; z-index: var(--z-tooltip); pointer-events: none;
  background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: 10px;
  padding: 10px 13px; max-width: 280px; box-shadow: var(--shadow); opacity: 0;
  transform: translate(-50%, calc(-100% - 14px)); transition: opacity .12s; font-size: .8rem;
}
.tooltip.show { opacity: 1; }
.tooltip .tnm { font-weight: 800; color: var(--text); margin-bottom: 4px; display: block; line-height: 1.2; }
.tooltip .tmeta { color: var(--muted); font-size: .72rem; }

/* Modal */
.modal-back { position: fixed; inset: 0; z-index: var(--z-modal); background: rgba(4,3,8,.74);
  backdrop-filter: blur(4px); display: none; align-items: center; justify-content: center; padding: 20px; }
.modal-back.show { display: flex; animation: fade .2s ease; }
.modal {
  width: min(440px, 94vw); background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg);
  transform: translateY(8px); animation: pop .22s ease forwards;
}
.modal .top { padding: 22px 22px 16px; background: var(--stage-c-soft); border-bottom: 1px solid var(--border); position: relative; }
.modal .top .cat { margin-bottom: 10px; }
.modal .top h3 { font-family: var(--font-display); font-stretch: 115%; font-weight: 800; font-size: 1.45rem; line-height: 1.05; color: #fff; }
.modal .close { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--border-strong); background: rgba(0,0,0,.3); color: #fff; cursor: pointer; font-size: 1.1rem; }
.modal .rows { padding: 18px 22px 22px; display: flex; flex-direction: column; gap: 13px; }
.modal .mrow { display: flex; gap: 12px; align-items: center; font-size: .9rem; }
.modal .mrow .k { width: 88px; flex: none; color: var(--faint); font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; }
.modal .mrow .v { color: var(--text); font-weight: 600; }

@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop { from { transform: translateY(18px); opacity: .6; } to { transform: translateY(0); opacity: 1; } }

/* ============================================================================
   12. RODAPÉ
   ========================================================================== */
.footer { position: relative; z-index: 1; border-top: 1px solid var(--border); background: var(--bg-2);
  padding: 40px clamp(16px,4vw,40px); display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
.footer img { height: 30px; }
.footer .meta { color: var(--faint); font-size: .76rem; line-height: 1.7; }
.footer .meta a { color: var(--grad-pink); }
.footer .spacer { margin-left: auto; }
.footer .note { font-size: .7rem; color: var(--faint); text-align: right; }

/* ============================================================================
   13. RESPONSIVIDADE
   ========================================================================== */

/* Tablet */
@media (max-width: 1024px) {
  :root { --label-w: 164px; --track-min: 960px; }
  .nav-links { display: none; }
}

/* Mobile — troca Gantt por Agenda vertical */
@media (max-width: 720px) {
  .controls { top: 49px; }
  .controls .spacer { display: none; }
  .view-toggle { display: none; }            /* em mobile força-se Agenda */
  .gantt-scroll { display: none !important; }
  .agenda { display: flex !important; }
  .hero { min-height: 78vh; }
  .day-tab { min-width: 58px; padding: 7px 10px; font-size: .82rem; }
  .filter-group .lbl { width: 100%; }
  .footer { flex-direction: column; align-items: flex-start; }
  .footer .note, .footer .spacer { text-align: left; margin-left: 0; }
}

/* Vista "Agenda" escolhida manualmente em ecrãs grandes */
body.view-agenda .gantt-scroll { display: none; }
body.view-agenda .agenda { display: flex; }
body.view-agenda .legend .stages-grp { opacity: .5; }

/* ============================================================================
   14. ANIMAÇÕES & ACESSIBILIDADE
   ========================================================================== */
.fade-in { animation: fadeUp .5s ease both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }

:focus-visible { outline: 2px solid var(--headliner); outline-offset: 2px; border-radius: 4px; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Scrollbars */
::-webkit-scrollbar { height: 10px; width: 10px; }
::-webkit-scrollbar-track { background: var(--bg-2); }
::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 999px; border: 2px solid var(--bg-2); }
::-webkit-scrollbar-thumb:hover { background: #36304f; }


/* ============================================================================
   15. ÍCONES INLINE + MÍDIA DO MODAL (atualização v7.0 — 17/06)
   ========================================================================== */
.ic { width: 1em; height: 1em; display: inline-block; vertical-align: -0.14em; flex: none; }
.act .an .ic { width: .92em; height: .92em; opacity: .95; margin-right: 1px; }
.acard .body .nm .ic { width: .95em; height: .95em; vertical-align: -0.1em; }
.tooltip .tnm .ic { width: .9em; height: .9em; }
.badge .ic { width: 11px; height: 11px; }
.legend .li .ic { width: 15px; height: 15px; }

/* Atração Show Aviões: realce com tom de céu */
.act.aviao { border-left-color: var(--stage-c); }
.act.aviao .an .ic, .acard.aviao .nm .ic { color: #BFE6FF; }

/* Modal — banner de mídia (imagem da banda / placeholder de marca) */
.modal-media { position: relative; aspect-ratio: 16 / 10; width: 100%; overflow: hidden;
  background: var(--surface-2); border-bottom: 1px solid var(--border); }
.modal-ph { position: absolute; inset: 0; display: grid; place-items: center; }
.modal-ph .ic { width: 86px; height: 86px; color: #fff; opacity: .92;
  filter: drop-shadow(0 8px 22px rgba(0,0,0,.55)); }
#modalImg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .35s ease; }
#modalImg:not([hidden]) { opacity: 1; }
.modal-scrim { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(7,6,11,.96) 3%, rgba(7,6,11,.55) 38%, rgba(7,6,11,.12) 70%); }
.modal-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 20px; }
.modal-cap .cat { margin-bottom: 9px; }
.modal-cap h3 { font-family: var(--font-display); font-stretch: 115%; font-weight: 800;
  font-size: 1.5rem; line-height: 1.04; color: #fff; text-shadow: 0 2px 14px rgba(0,0,0,.6); }
.modal .close { position: absolute; top: 12px; right: 12px; z-index: 3; }


/* ============================================================================
   16. TEMA CLARO + BOTÕES SPOTIFY/TEMA + FILTROS RETRÁTEIS (v7.0 — 17/06)
   ========================================================================== */

/* —— Tema CLARO (o ESCURO é o padrão em :root) —— */
body.theme-light {
  --bg:            #F4F2F9;
  --bg-2:          #FFFFFF;
  --surface:       #FFFFFF;
  --surface-2:     #F3F0FA;
  --surface-3:     #E6E1F2;
  --border:        rgba(20, 16, 44, 0.12);
  --border-strong: rgba(20, 16, 44, 0.22);
  --text:   #1A1726;
  --muted:  #5C5670;
  --faint:  #8C8699;
  --act-fg: #17141F;
  --act-fg-soft: rgba(23, 20, 31, 0.66);
  --shadow:    0 10px 30px rgba(70, 50, 110, 0.14);
  --shadow-lg: 0 24px 60px rgba(70, 50, 110, 0.20);
}
/* Logótipos (PNG branco) -> escuros no tema claro */
/* No tema claro só o lockup "LISBOA 2026" é invertido p/ escuro;
   o logótipo "Rock in Rio" passa a usar a versão vermelha (troca via JS). */
body.theme-light .hero .lisboa { filter: invert(1) brightness(.12); }
/* Brilhos do hero mais suaves sobre fundo claro */
body.theme-light::before { opacity: .55; }
body.theme-light .hero::after { opacity: .42; }
body.theme-light .hero .summary { color: var(--muted); }
/* trilhas/linhas mais visíveis no claro */
body.theme-light .track { background:
  repeating-linear-gradient(90deg, transparent, transparent calc(100%/13 - 1px), rgba(20,16,44,.04) calc(100%/13)); }

/* —— Botão circular (toggle de tema) —— */
.icon-btn {
  width: 40px; height: 40px; flex: none; display: grid; place-items: center;
  border-radius: 50%; border: 1px solid var(--border-strong); background: var(--surface-2);
  color: var(--text); cursor: pointer; transition: all .16s;
}
.icon-btn:hover { border-color: var(--headliner); color: var(--headliner); transform: translateY(-1px); }
.icon-btn svg { width: 18px; height: 18px; }
.icon-btn .moon { display: none; }
.icon-btn .sun  { display: block; }
body.theme-light .icon-btn .moon { display: block; }
body.theme-light .icon-btn .sun  { display: none; }

/* —— Botão Spotify —— */
.btn-spotify {
  background: #1DB954; border-color: transparent; color: #062b13;
  box-shadow: 0 8px 22px rgba(29,185,84,.32); font-weight: 700;
}
.btn-spotify:hover { background: #1ed760; box-shadow: 0 12px 30px rgba(29,185,84,.45); }
.btn-spotify svg { width: 17px; height: 17px; }
.btn-spotify .d { opacity: .85; font-weight: 700; }

/* —— Filtros retráteis —— */
.filters-toggle {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  font-size: .76rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); background: var(--surface); border: 1px solid var(--border-strong);
  padding: 9px 14px; border-radius: 999px; transition: all .16s;
}
.filters-toggle:hover { color: var(--text); border-color: var(--border-strong); }
.filters-toggle .chev { transition: transform .22s ease; display: inline-flex; }
.filters-toggle .count { color: var(--grad-pink); }
.filter-panel { overflow: hidden; transition: max-height .35s ease, opacity .25s ease; max-height: 600px; opacity: 1; }
.controls.filters-collapsed .filter-panel { max-height: 0; opacity: 0; }
.controls.filters-collapsed .filters-toggle .chev { transform: rotate(-90deg); }

/* —— Alternador de idioma PT / EN —— */
.lang-toggle { display: inline-flex; border: 1px solid var(--border-strong); border-radius: 999px; overflow: hidden; flex: none; }
.lang-toggle button { background: transparent; border: none; padding: 8px 11px; font-size: .72rem; font-weight: 800;
  letter-spacing: .06em; color: var(--muted); cursor: pointer; transition: all .15s; }
.lang-toggle button:hover { color: var(--text); }
.lang-toggle button.active { background: var(--brand-grad); color: #fff; }

/* ============================================================================
   17. TOPO "POWERED BY PMO" + EFEITOS (mouse / clique / scroll)  — v7.0
   ========================================================================== */

/* —— Barra de topo —— */
.topbar {
  position: relative; z-index: calc(var(--z-nav) + 1);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 6px clamp(14px, 4vw, 40px);
  font-size: .66rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--faint); background: var(--bg-2); border-bottom: 1px solid var(--border);
}
.topbar .tb-upd strong { color: var(--muted); font-weight: 800; letter-spacing: .12em; }
@media (max-width: 560px) { .topbar { font-size: .58rem; letter-spacing: .1em; } }
.topbar strong {
  font-weight: 800; letter-spacing: .18em;
  background: var(--brand-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* —— Brilho que segue o cursor —— */
#cursorGlow {
  position: fixed; left: 0; top: 0; width: 360px; height: 360px; border-radius: 50%;
  transform: translate(calc(var(--x, -500px) - 50%), calc(var(--y, -500px) - 50%));
  background: radial-gradient(circle, rgba(196,32,154,.20), rgba(95,36,194,.12) 42%, transparent 70%);
  pointer-events: none; z-index: 4; mix-blend-mode: screen; filter: blur(6px);
  opacity: 0; transition: opacity .35s ease; will-change: transform;
}
body.theme-light #cursorGlow { mix-blend-mode: multiply;
  background: radial-gradient(circle, rgba(196,32,154,.16), rgba(95,36,194,.10) 42%, transparent 70%); }

/* —— Ripple ao clicar —— */
.btn, .chip, .day-tab, .icon-btn, .filters-toggle,
.view-toggle button, .lang-toggle button, .arrow, .acard, .act { position: relative; overflow: hidden; }
.ripple {
  position: absolute; border-radius: 50%; pointer-events: none; z-index: 3; transform: scale(0);
  background: radial-gradient(circle, rgba(255,255,255,.55), rgba(255,255,255,0) 70%);
  animation: rippleFX .6s ease-out forwards; mix-blend-mode: overlay;
}
@keyframes rippleFX { to { transform: scale(2.6); opacity: 0; } }

/* —— Parallax dos logótipos do hero (segue o mouse) —— */
.hero .lisboa { transition: transform .25s cubic-bezier(.2,.7,.2,1); transform: translate(var(--px, 0px), var(--py, 0px)); }
.hero .script { transition: transform .3s cubic-bezier(.2,.7,.2,1); transform: translate(calc(var(--px, 0px) * .6), calc(var(--py, 0px) * .6)); }

/* —— Revelação ao scroll —— */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }

/* —— Realce extra de hover (botões/cards) —— */
.btn:hover { transform: translateY(-2px) scale(1.015); }
.acard:hover { box-shadow: 0 12px 30px rgba(0,0,0,.45); }

@media (prefers-reduced-motion: reduce) {
  #cursorGlow { display: none; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .ripple { display: none; }
}