/* =========================================================================
   HIM DUB FESTIVAL — design system (redesign)
   Paleta imersiva e nocturna: slate escuro, dourado e creme, com toques
   de terracota/ferrugem (lonas da tenda). Tipografia: Hogfish (display,
   lettering manual) + Abel (texto/nav) + Caveat (assinatura manuscrita
   nos "eyebrows").

   NOTA DE LICENÇA: a fonte Hogfish (static/fonts/Hogfish.otf) vem com uma
   licença de "uso não-comercial apenas" (ver o .txt que veio com o
   ficheiro original) -- o autor pede para ser contactado antes de uso
   comercial. Isto é um festival a vender bilhetes, portanto uso
   comercial. Ainda não foi tratada a licença comercial junto do autor
   (pizzadude.dk / Jakob Fischer) -- resolve isso antes de publicares o
   site a sério.
   ========================================================================= */

@font-face {
  font-family: 'Hogfish';
  src: url('../fonts/Hogfish.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Abel';
  src: url('../fonts/Abel-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Superfícies */
  --bg: #171d20;            /* fundo geral das páginas */
  --bg-alt: #101517;        /* fundo alternativo, mais escuro (faixas, secções) */
  --surface: #37444a;       /* "slate" — cartões, cabeçalho, rodapé */
  --surface-deep: #242e32;  /* variante mais escura do slate (hover, bordas) */

  /* Texto */
  --ink: #f4efe0;                    /* texto principal (creme) */
  --ink-soft: rgba(244,239,224,.68); /* texto secundário */
  --ink-faint: rgba(244,239,224,.42);

  /* Acentos */
  --gold: #c99a46;
  --gold-soft: #e0bd7c;
  --terracotta: #b0562f;
  --rust: #7a3a22;
  --maroon: #3a1f2c;

  --cream: #fffee6;   /* creme mais claro — usado em botões/pills sólidos */
  --white: var(--surface); /* mantém o nome antigo: agora é a cor de "cartão" */

  --radius: 20px;
  --radius-sm: 12px;
  --shadow-soft: 0 24px 50px -22px rgba(0, 0, 0, 0.55);
  --shadow-card: 0 14px 34px -18px rgba(0, 0, 0, 0.5);

  --font-display: 'Hogfish', 'Arial Narrow', sans-serif;
  --font-body: 'Abel', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-script: 'Caveat', cursive;

  --ease: cubic-bezier(.16, 1, .3, 1);
}

/* Transições fluidas ao navegar entre páginas (View Transitions API nativa
   do browser). Onde não é suportado, a navegação continua normal. */
@view-transition {
  navigation: auto;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  line-height: 1.08;
  margin: 0 0 0.5em;
  color: var(--ink);
}

h1 { font-size: clamp(2.4rem, 6vw, 4.6rem); }
h2 { font-size: clamp(1.8rem, 4vw, 2.8rem); }
h3 { font-size: clamp(1.2rem, 2.4vw, 1.5rem); }

p { margin: 0 0 1em; color: var(--ink-soft); }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.container {
  width: min(1180px, 92%);
  margin-inline: auto;
}
.container.narrow { width: min(760px, 92%); }

/* Esconde visualmente mas mantém acessível a leitores de ecrã -- usado em
   títulos h1 "silenciosos" (ex: /infos/partners, onde o título visual da
   página são os próprios grupos "Promotores/Parceiros/Apoio"). */
.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;
}

.eyebrow {
  font-family: var(--font-script);
  font-size: 1.5rem;
  color: var(--gold-soft);
  margin-bottom: 0.3em;
}

/* ---------------------------------------------------------------------
   Scroll progress bar
   --------------------------------------------------------------------- */
.progress-bar {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--gold), var(--terracotta));
  z-index: 999;
  transition: width 0.1s linear;
}

/* ---------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.85em 1.6em;
  border-radius: 999px;
  border: 2px solid transparent;
  font-family: var(--font-body);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.82rem;
  cursor: pointer;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), background 0.25s, color 0.25s, border-color 0.25s;
  will-change: transform;
}
.btn:hover { transform: translateY(-3px); }
.btn:active { transform: translateY(-1px); }

.btn--primary { background: var(--cream); color: var(--bg-alt); box-shadow: var(--shadow-card); }
.btn--primary:hover { background: var(--gold-soft); box-shadow: 0 16px 30px -12px rgba(201, 154, 70, 0.45); }

.btn--outline { background: transparent; color: var(--ink); border-color: rgba(244,239,224,0.45); }
.btn--outline:hover { background: var(--ink); color: var(--bg-alt); border-color: var(--ink); }

.btn--outline-light { background: transparent; color: var(--ink); border-color: rgba(244,239,224,0.5); }
.btn--outline-light:hover { background: var(--ink); color: var(--bg-alt); }

.btn--ghost { background: rgba(244,239,224,0.1); color: var(--ink); border-color: rgba(244,239,224,0.4); backdrop-filter: blur(6px); }
.btn--ghost:hover { background: rgba(244,239,224,0.92); color: var(--bg-alt); }

.btn--lg { padding: 1.05em 2.1em; font-size: 0.9rem; }
.btn--small { padding: 0.55em 1.1em; font-size: 0.72rem; }

.link-arrow {
  display: inline-block;
  margin-top: 0.5em;
  font-weight: 600;
  color: var(--gold-soft);
  border-bottom: 2px solid var(--gold);
  transition: transform 0.25s var(--ease);
}
.link-arrow:hover { transform: translateX(4px); }

.link-remove {
  background: none; border: none; color: var(--terracotta);
  cursor: pointer; font-size: 0.85rem; text-decoration: underline;
}

/* ---------------------------------------------------------------------
   Header / nav — barra translúcida, igual em todas as páginas (funciona
   tanto sobre o vídeo do hero como sobre o fundo escuro normal)
   --------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 22px 0;
  background: linear-gradient(180deg, rgba(16,21,23,0.55) 0%, rgba(16,21,23,0) 100%);
  transition: background 0.35s var(--ease), padding 0.35s var(--ease), box-shadow 0.35s var(--ease), backdrop-filter 0.35s var(--ease);
}
.site-header.is-scrolled {
  background: transparent;
  backdrop-filter: none;
  padding: 12px 0;
  box-shadow: none;
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand { display: flex; flex-direction: column; line-height: 1; }
.brand__mark { font-family: var(--font-display); font-size: 1.15rem; letter-spacing: 0.01em; color: var(--ink); text-shadow: 0 2px 14px rgba(0,0,0,.35); }
.brand__mark em { font-style: normal; color: var(--gold); }
.brand__sub { font-size: 0.55rem; letter-spacing: 0.28em; color: var(--ink-soft); margin-top: 0.35em; }
.brand__logo { height: 30px; width: auto; display: block; filter: drop-shadow(0 2px 10px rgba(0,0,0,.35)); }

.main-nav { display: none; align-items: center; gap: 22px; margin-left: auto; }
.main-nav a, .main-nav__dropdown-btn {
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: var(--ink);
  position: relative;
  padding: 4px 0;
  background: none; border: none; cursor: pointer; font-family: inherit;
}
.main-nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 0; height: 2px;
  background: var(--gold);
  transition: width 0.3s var(--ease);
}
.main-nav a:hover::after { width: 100%; }

.main-nav__dropdown { position: relative; }
.main-nav__dropdown-menu {
  position: absolute; top: 140%; left: 50%; transform: translateX(-50%) translateY(-8px);
  background: var(--surface); border-radius: var(--radius-sm); box-shadow: var(--shadow-card);
  padding: 10px; min-width: 190px; display: flex; flex-direction: column; gap: 4px;
  opacity: 0; visibility: hidden; transition: all 0.25s var(--ease);
  border: 1px solid rgba(244,239,224,0.1);
}
.main-nav__dropdown:hover .main-nav__dropdown-menu,
.main-nav__dropdown:focus-within .main-nav__dropdown-menu {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
.main-nav__dropdown-menu a { padding: 6px 10px; border-radius: 6px; }
.main-nav__dropdown-menu a:hover { background: var(--surface-deep); }
.main-nav__dropdown-menu a::after { display: none; }

.site-header__actions { display: flex; align-items: center; gap: 14px; }
.icon-btn {
  background: none; border: none; cursor: pointer; position: relative;
  color: var(--ink); display: inline-flex; padding: 4px;
}
.cart-count {
  position: absolute; top: -6px; right: -8px;
  background: var(--gold); color: var(--bg-alt);
  font-size: 0.65rem; font-weight: 700; border-radius: 999px;
  width: 18px; height: 18px; display: flex; align-items: center; justify-content: center;
  transition: transform 0.25s var(--ease);
}
.cart-count.bump { animation: bump 0.4s var(--ease); }
@keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(1.5); } 100% { transform: scale(1); } }

/* Botão de música de fundo (play/mute), ao lado do seletor de idioma (Pt/En/Fr) —
   no cabeçalho de topo nas páginas normais, ou junto aos círculos de idioma no
   canto do hero nas páginas imersivas. Alterna entre os dois ícones consoante
   o estado (a tocar ou não). */
.music-toggle { padding: 4px; }
.music-toggle__icon { width: 19px; height: 19px; }
.music-toggle__icon--playing { display: none; }
.music-toggle.is-playing .music-toggle__icon--play { display: none; }
.music-toggle.is-playing .music-toggle__icon--playing { display: block; }

/* Nome do artista/faixa junto ao botão (ver _music_toggle.html) -- botão
   primeiro, nome a seguir, tal como no desktop; em ecrãs pequenos só
   encolhe e permite quebrar em 2 linhas (fica mais estreito), para caber
   ao lado do resto do cabeçalho/hero sem desaparecer. */
.music-toggle-group { display: flex; align-items: center; gap: 8px; }
.music-toggle__track { font-size: 0.72rem; color: var(--ink-soft); white-space: nowrap; letter-spacing: 0.02em; }
@media (max-width: 759px) {
  .music-toggle__track { font-size: 0.6rem; white-space: normal; text-align: left; max-width: 82px; line-height: 1.2; }
}

.hamburger {
  width: 30px; height: 22px; position: relative; background: none; border: none; cursor: pointer; padding: 0;
}
.hamburger span {
  position: absolute; left: 0; width: 100%; height: 2.5px; background: var(--ink);
  border-radius: 2px; transition: transform 0.3s var(--ease), opacity 0.3s var(--ease), top 0.3s var(--ease);
}
.hamburger span:nth-child(1) { top: 0; }
.hamburger span:nth-child(2) { top: 10px; }
.hamburger span:nth-child(3) { top: 20px; }
.hamburger[aria-expanded="true"] span:nth-child(1) { top: 10px; transform: rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3) { top: 10px; transform: rotate(-45deg); }

.mobile-nav {
  position: fixed; inset: 0; z-index: 90;
  background: var(--bg-alt);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
  transform: translateY(-100%);
  transition: transform 0.45s var(--ease);
}
.mobile-nav.is-open { transform: translateY(0); }
.mobile-nav a {
  color: var(--cream); font-family: var(--font-display); font-size: 1.4rem; text-transform: uppercase;
  opacity: 0; transform: translateY(14px); transition: all 0.4s var(--ease);
}
.mobile-nav.is-open a { opacity: 1; transform: translateY(0); }

@media (min-width: 980px) {
  .main-nav { display: flex; }
  .hamburger { display: none; }
}

/* ---------------------------------------------------------------------
   Flash messages
   --------------------------------------------------------------------- */
.flash-stack { position: fixed; top: 90px; right: 20px; z-index: 200; display: flex; flex-direction: column; gap: 8px; }
.flash {
  padding: 12px 18px; border-radius: var(--radius-sm); font-weight: 600; font-size: 0.9rem;
  box-shadow: var(--shadow-card); animation: slideIn 0.4s var(--ease);
  background: var(--surface); color: var(--ink); border: 1px solid rgba(244,239,224,.12);
}
.flash--error { background: var(--terracotta); color: var(--cream); }
@keyframes slideIn { from { transform: translateX(30px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

/* ---------------------------------------------------------------------
   Hero
   --------------------------------------------------------------------- */
.hero {
  position: relative;
  /* O cabeçalho (.site-header) não é "position: fixed/absolute" -- ocupa
     o seu próprio espaço no topo da página (74px, com o padding em
     repouso) e só fica "sticky" ao fazer scroll. Sem este puxão para
     cima, o hero começava só depois desse espaço, e via-se uma barra
     sólida (a cor de fundo do body) por trás do cabeçalho em vez do
     vídeo -- aqui parece um "risco preto" porque o vídeo é claro (céu).
     Nas outras páginas isto não se nota porque o fundo delas já é escuro,
     igual ao do body. Puxa o hero para cima exatamente a altura do
     cabeçalho em repouso, para o vídeo começar mesmo em y=0 e o
     cabeçalho (transparente/translúcido) ficar por cima dele. */
  margin-top: -74px;
  height: 100vh;
  min-height: 560px;
  display: flex; flex-direction: column;
  overflow: hidden;
  background: radial-gradient(circle at 30% 20%, #2a3438 0%, var(--bg-alt) 55%, #0b0e10 100%);
  view-transition-name: hero;
}

/* Vídeo de fundo do hero, com um efeito "fluido" ao fazer scroll: o vídeo
   encolhe ligeiramente, ganha cantos arredondados e escurece à medida que
   se desce a página — controlado via JS em main.js (initHeroVideo). */
.hero__video-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 0px;
  transform: scale(1) translateY(0);
  will-change: transform, border-radius;
}
.hero__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.hero__video-scrim {
  /* Aligeirado a pedido do cliente ("os videos parecem mais escuros,
     parece que tem uma cortina de fumo a frente") -- mantém só o
     suficiente para o texto/menu continuarem legíveis no topo e o
     hero__meta no fundo, mas o vídeo fica bem mais luminoso/vivo. */
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(10,13,14,0.32) 0%, rgba(10,13,14,0.1) 38%, rgba(10,13,14,0.55) 100%);
  transition: opacity 0.2s linear;
}

.hero__content {
  position: relative; z-index: 2; text-align: center; color: var(--ink);
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 90px 20px 20px; gap: 22px;
}
.hero__content .eyebrow { color: var(--gold-soft); }
.hero__eyebrow-logo { height: clamp(28px, 4vw, 44px); width: auto; filter: drop-shadow(0 4px 16px rgba(0,0,0,.35)); }
.hero__title {
  color: var(--ink);
  font-size: clamp(2.6rem, 8vw, 5.2rem);
  margin: 0;
  text-shadow: 0 6px 30px rgba(0,0,0,.4);
}
.hero__title span { color: var(--gold); }
.hero__title-logo { display: block; width: min(720px, 88vw); height: auto; filter: drop-shadow(0 8px 34px rgba(0,0,0,.4)); }
.hero__dates { font-size: 0.85rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); margin: 0; }
.hero__tagline-logo { display: block; width: clamp(160px, 15vw, 240px); height: auto; filter: drop-shadow(0 4px 18px rgba(0,0,0,.4)); }
.hero__actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: 6px; }

.hero__scroll-cue {
  position: relative; z-index: 2; margin: 12px auto 0;
  width: 26px; height: 42px; border: 2px solid rgba(244,239,224,0.5); border-radius: 20px;
}
.hero__scroll-cue span {
  display: block; width: 4px; height: 8px; background: var(--gold); border-radius: 3px;
  margin: 6px auto; animation: scrollCue 1.8s infinite;
}
@keyframes scrollCue { 0% { transform: translateY(0); opacity: 1; } 70% { opacity: 0.3; } 100% { transform: translateY(14px); opacity: 0; } }

/* Barra inferior do hero: edição/datas + idioma + coordenadas */
.hero__meta {
  position: relative; z-index: 3;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end;
  gap: 5px;
  padding: 0 clamp(20px,4vw,52px) clamp(20px,3vw,32px);
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em;
  margin-top: auto;
}
.hero__meta-edition { line-height: 1.3; color: var(--ink-soft); }
.hero__meta-edition b { display: block; font-weight: 700; letter-spacing: 0.12em; font-size: 0.92em; text-transform: uppercase; }
.hero__meta-right { display: flex; align-items: center; gap: 16px; }
.lang-pills { display: flex; gap: 6px; }
.lang-pills button, .lang-pills a {
  width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(244,239,224,.4);
  background: rgba(244,239,224,.06); color: var(--ink); font-size: 0.62rem; font-weight: 700;
  cursor: pointer; transition: all 0.25s var(--ease);
  display: flex; align-items: center; justify-content: center; text-decoration: none;
}
.lang-pills button.is-active, .lang-pills a.is-active { background: var(--cream); color: var(--bg-alt); border-color: var(--cream); }
.hero__meta-coords { font-variant-numeric: tabular-nums; color: var(--ink-soft); }

/* Seletor de idioma no cabeçalho (presente em todas as páginas públicas) */
.lang-switch {
  display: flex; align-items: center; gap: 4px; margin-right: 4px;
  border: 1px solid rgba(20,24,28,.14); border-radius: 999px; padding: 3px;
}
.lang-switch a {
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 24px; border-radius: 999px; font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.02em; color: var(--ink-soft); text-decoration: none; transition: all 0.2s var(--ease);
}
.lang-switch a.is-active { background: var(--bg-alt); color: var(--cream); }
.lang-switch a:not(.is-active):hover { background: rgba(20,24,28,.06); }
.site-header.is-scrolled .lang-switch { border-color: rgba(244,239,224,.2); }
.lang-switch--mobile {
  display: flex; gap: 8px; margin-top: 18px; padding-top: 18px;
  border-top: 1px solid rgba(244,239,224,.14); flex-wrap: wrap;
}
.lang-switch--mobile a {
  /* Sobrepõe a largura/altura fixas de ".lang-switch a" (pensadas para os
     códigos PT/EN/FR do seletor do cabeçalho) -- aqui vão os nomes
     completos (Português/English/Français), que precisam de largura
     automática para não ficarem cortados/sobrepostos uns aos outros. */
  width: auto; height: auto;
  font-size: 0.78rem; font-weight: 700; text-decoration: none; color: var(--ink-soft);
  padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(244,239,224,.2);
}
.lang-switch--mobile a.is-active { background: var(--cream); color: var(--bg-alt); border-color: var(--cream); }

/* Setas de navegação (impressão de movimento entre páginas) -- só em
   ecrãs com rato (≥760px), centradas verticalmente como antes. No
   telemóvel ficam escondidas (display:none) e a navegação faz-se antes por
   gesto de arrastar (swipe) -- ver initSwipeNav() em main.js, que lê o
   href destes mesmos links (por isso continuam no DOM, só visualmente
   escondidos) para saber para onde ir. */
.hero-arrow {
  position: absolute; z-index: 3; top: 50%; transform: translateY(-50%);
  display: none; flex-direction: column; align-items: center; gap: 10px;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink); background: none; border: none; padding: 6px;
}
.hero-arrow svg { width: 24px; height: 24px; transition: transform 0.3s var(--ease); }
.hero-arrow--prev { left: clamp(10px,2.4vw,40px); }
.hero-arrow--next { right: clamp(10px,2.4vw,40px); }
.hero-arrow--prev svg { transform: scaleX(-1); }
.hero-arrow:hover svg { transform: translateX(6px); }
.hero-arrow--prev:hover svg { transform: translateX(-6px) scaleX(-1); }
@media (min-width: 760px) { .hero-arrow { display: flex; } }

/* Dica de swipe (telemóvel) -- ver initSwipeHint() em main.js. Fica
   escondida a partir dos 760px (onde as setas já aparecem, ver acima) e
   "pointer-events:none" para nunca roubar o toque ao gesto de arrastar
   que está a ensinar. */
.swipe-hint {
  position: absolute; z-index: 4;
  left: 50%; bottom: clamp(96px, 15vw, 136px);
  transform: translate(-50%, 8px);
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 11px 20px;
  background: rgba(16,21,23,0.6);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(244,239,224,.18);
  border-radius: 999px;
  color: var(--ink);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
.swipe-hint.is-visible { opacity: 1; transform: translate(-50%, 0); }
.swipe-hint__icon { width: 38px; height: 15px; animation: swipeHintSlide 1.5s ease-in-out infinite; }
.swipe-hint__icon svg { width: 100%; height: 100%; display: block; }
.swipe-hint__label {
  font-size: 0.64rem; font-weight: 700; letter-spacing: 0.07em;
  text-transform: uppercase; white-space: nowrap; color: var(--ink-soft);
}
@keyframes swipeHintSlide {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(7px); }
}
@media (min-width: 760px) { .swipe-hint { display: none; } }
@media (prefers-reduced-motion: reduce) { .swipe-hint__icon { animation: none; } }

/* -------------------------------------------------------------------- */
/* Páginas "imersivas" (Home, Tickets, Glamping, Merchandise,            */
/* Participate): o hero ocupa exatamente a altura do ecrã (100vh, tal    */
/* como ".hero" na Home -- ver mais acima), com o cabeçalho flutuante    */
/* por cima (transparente, escurece ao fazer scroll, igual às outras     */
/* páginas). O rodapé completo fica logo a seguir ao hero, fora do ecrã  */
/* inicial -- só fica visível ao fazer scroll para baixo, tal como em    */
/* qualquer outra página (incl. a Home -- o vídeo enche o ecrã todo à    */
/* entrada, e o scroll continua a revelar o rodapé por baixo).           */
/* -------------------------------------------------------------------- */
body.immersive-page .progress-bar { display: none; }

/* Hero imersivo genérico (Tickets/Glamping/Merchandise/Participate) --
   mesma estrutura do .hero da homepage (setas, barra inferior), mas com
   uma imagem/gradiente de fundo em vez de vídeo. */
.immersive-hero {
  /* Puxa a secção para cima do cabeçalho fixo (ver comentário igual em
     ".page-hero", mais abaixo) -- sem isto ficava uma barra no topo E a
     secção passava a ter 100vh + 74px, transbordando por baixo do ecrã
     em vez de encher exatamente o ecrã como o comentário abaixo promete. */
  margin-top: -74px;
  position: relative;
  height: 100vh;
  min-height: 560px;
  overflow: hidden;
  display: flex; flex-direction: column;
  background-size: cover; background-position: center;
}
/* Vídeo de fundo opcional (mesmo padrão do vídeo da Home, mas sem o efeito
   de encolher no scroll, já que estas páginas não têm scroll). Se não
   existir ficheiro de vídeo, isto fica simplesmente vazio/transparente e
   o gradiente de fundo da secção (.immersive-hero--tickets, etc.) aparece
   por trás, na mesma. */
.immersive-hero__video-wrap { position: absolute; inset: 0; overflow: hidden; }
.immersive-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.immersive-hero__scrim {
  /* Aligeirado (ver comentário igual em ".hero__video-scrim", mais
     acima) -- mesmo motivo: vídeos/fotos com mais luminosidade. */
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,13,14,0.18) 0%, rgba(10,13,14,0.06) 40%, rgba(10,13,14,0.42) 100%);
}
.immersive-hero__content {
  position: relative; z-index: 2; flex: 1; min-height: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: safe center;
  gap: 16px; padding: 96px 20px 20px; overflow-y: auto;
  /* Se o conteúdo for mais alto que o ecrã (ex: página de bilhetes com
     muitos lotes/produtos em janelas mais baixas), continua a dar para
     fazer scroll dentro do hero -- só que sem mostrar a barra de scroll,
     para não quebrar o visual "imersivo" de ecrã cheio. */
  scrollbar-width: none;       /* Firefox */
  -ms-overflow-style: none;    /* Edge/IE legado */
}
.immersive-hero__content::-webkit-scrollbar { display: none; }  /* Chrome/Safari */
.immersive-hero__title {
  font-size: clamp(2.2rem, 6vw, 3.6rem); color: var(--ink); margin: 0;
  text-shadow: 0 6px 30px rgba(0,0,0,.4); text-align: center;
}

/* Variações de fundo por página (placeholders em gradiente -- troca por
   background-image: url(...) quando tiveres as fotos definitivas) */
.immersive-hero--tickets { background: radial-gradient(ellipse 90% 70% at 50% -10%, var(--maroon), transparent 60%), radial-gradient(ellipse 70% 60% at 100% 100%, var(--rust), transparent 65%), var(--bg-alt); }
.immersive-hero--glamping { background: radial-gradient(ellipse 90% 70% at 20% -10%, #3a2f22, transparent 60%), radial-gradient(ellipse 70% 60% at 100% 100%, #7c6a53, transparent 65%), var(--bg-alt); }
.immersive-hero--merch { background: radial-gradient(ellipse 90% 70% at 80% -10%, #16130f, transparent 60%), radial-gradient(ellipse 70% 60% at 0% 100%, #37312b, transparent 65%), var(--bg-alt); }
.immersive-hero--participate { background: radial-gradient(ellipse 90% 70% at 50% -10%, #163c52, transparent 60%), radial-gradient(ellipse 70% 60% at 100% 100%, #3b7fae, transparent 65%), var(--bg-alt); }
.immersive-hero--map { background: radial-gradient(ellipse 90% 70% at 50% -10%, #2e3b2a, transparent 60%), radial-gradient(ellipse 70% 60% at 100% 100%, #4a5a3f, transparent 65%), var(--bg-alt); }

/* Página de Parceiros (/infos/partners) -- fundo com a foto da ponte de
   madeira sobre o rio, SEM véu (pedido explícito: "tens aí as fotos sem
   nada por cima"), com os logos de promotores/parceiros/apoio agrupados
   em cartões translúcidos por cima da imagem -- garante que os logos se
   mantêm legíveis mesmo sem véu geral na foto. */
.immersive-hero--partners {
  background: url("../img/partners-hero-bg.jpg") center center / cover no-repeat;
}
.immersive-hero--partners .immersive-hero__content {
  justify-content: safe center;
  padding-top: clamp(96px, 14vw, 150px);
}
.partners-groups {
  width: 100%; max-width: 1080px;
  display: grid; grid-template-columns: 1fr; gap: 20px;
}
@media (min-width: 760px) {
  .partners-groups { grid-template-columns: 1fr 1fr; align-items: start; }
  .partners-groups .partners-group--support { grid-column: 1 / -1; max-width: 320px; margin: 0 auto; }
}
.partners-group {
  background: rgba(16,21,23,0.55);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(244,239,224,.12);
  border-radius: var(--radius);
  padding: 26px 30px;
  text-align: center;
}
.partners-group h2 {
  font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--ink-soft); margin: 0 0 20px; font-weight: 700;
}
.partners-group__logos { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.partner-item { display: block; width: 100%; max-width: 220px; }
.partner-item img { width: 100%; height: auto; display: block; filter: drop-shadow(0 4px 14px rgba(0,0,0,.5)); }
.partner-item--wide { max-width: 260px; }

/* Grelhas de produto dentro do hero imersivo — versão compacta. Largura a
   100% é necessária porque são filhas diretas de um flex container
   (align-items: center as encolhe ao conteúdo em vez de esticar) — sem
   isto, grids/listas "fogem" do ecrã em vez de quebrar para 1 coluna. */
.immersive-hero .product-grid,
.immersive-hero .ticket-list,
.immersive-hero .way-list,
.immersive-hero .experience-cards,
.immersive-hero .map-panel { width: 100%; }
.immersive-hero .product-grid { gap: 16px; max-width: 900px; }
.immersive-hero .product-card { background: rgba(37,44,48,.72); backdrop-filter: blur(6px); }
.immersive-hero .way-list { max-width: 640px; gap: 12px; }
.immersive-hero .way-card { background: rgba(37,44,48,.72); backdrop-filter: blur(6px); padding: 18px 22px; }

/* Cards clicáveis da página "The Experience" — ligam para as páginas
   "O que é o HIM Dub", "As áreas" e "O mapa" (antigo Festival/Line Up,
   mais a nova página do mapa). */
.experience-cards {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 24px;
  max-width: 900px;
}
.experience-card {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  width: 230px;
  padding: 20px 18px 22px;
  border-radius: 28px;
  background: rgba(37,44,48,.72);
  backdrop-filter: blur(6px);
  text-decoration: none;
  transition: transform 0.25s var(--ease), background 0.25s var(--ease);
}
.experience-card:hover { transform: translateY(-6px); background: rgba(37,44,48,.88); }
.experience-card__title { font-size: 1.05rem; margin: 0; text-align: center; }
.experience-card__image {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 16px; display: block;
  background: rgba(244,239,224,.06);
}
.experience-card__image--map { object-fit: contain; background: var(--cream); padding: 8px; }

/* Painel do mapa do recinto — fundo claro porque a ilustração tem texto
   escuro sobre um fundo transparente, e fica ilegível sobre o hero escuro. */
.map-panel {
  max-width: 640px;
  background: var(--cream);
  border-radius: 20px;
  padding: clamp(10px, 2vw, 20px);
  box-shadow: var(--shadow-soft);
}
.map-panel__img { width: 100%; height: auto; display: block; }

/* "Poder clicar no mapa" -- zonas clicáveis por cima da ilustração,
   posicionadas em % (a ilustração nunca é cortada -- width:100%/height:auto
   -- por isso as percentagens seguem sempre a imagem, em qualquer ecrã).
   Só as áreas com página própria (ver AREA_DETAIL_IMAGES) têm hotspot;
   Kids Area não tem página, por isso não aparece aqui. */
.map-panel__inner { position: relative; }
.map-hotspot {
  position: absolute;
  border-radius: 50%;
  transition: background 0.2s, box-shadow 0.2s;
}
.map-hotspot:hover, .map-hotspot:focus-visible {
  background: rgba(201, 154, 70, 0.28);
  box-shadow: 0 0 0 3px rgba(201, 154, 70, 0.45);
  outline: none;
}
.map-hotspot--dub-temple    { left: 54.5%;  top: 60.6%; width: 7.14%; height: 9.09%; }
.map-hotspot--river-station { left: 49.25%; top: 79.8%; width: 9.64%; height: 8.08%; }
.map-hotspot--roots-garden  { left: 3.57%;  top: 78.3%; width: 7.86%; height: 8.59%; }
.map-hotspot--workshops     { left: 66.82%; top: 71.9%; width: 5.5%;  height: 6.5%; }
.map-hotspot--lectures      { left: 69.99%; top: 71.9%; width: 5.3%;  height: 6.5%; }
.map-hotspot--healing-area  { left: 79.49%; top: 74.43%; width: 5.3%; height: 6.3%; }

/* -------------------------------------------------------------------- */
/* Efeito "Whoosh": sensação de movimento horizontal ao navegar pelas    */
/* setas do hero (não é scroll — é uma transição de página a página,      */
/* aplicada ao <body> inteiro antes de sair e ao entrar na página nova). */
/* -------------------------------------------------------------------- */
body.is-whooshing { overflow-x: hidden; }

body.whoosh-exit-next { animation: whooshExitNext 0.42s cubic-bezier(0.6, 0, 0.85, 0.35) forwards; }
body.whoosh-exit-prev { animation: whooshExitPrev 0.42s cubic-bezier(0.6, 0, 0.85, 0.35) forwards; }
body.whoosh-enter-next { animation: whooshEnterNext 0.5s cubic-bezier(0.15, 0.7, 0.25, 1) both; }
body.whoosh-enter-prev { animation: whooshEnterPrev 0.5s cubic-bezier(0.15, 0.7, 0.25, 1) both; }

@keyframes whooshExitNext {
  from { transform: translateX(0); opacity: 1; filter: blur(0); }
  to   { transform: translateX(-14%); opacity: 0; filter: blur(2px); }
}
@keyframes whooshExitPrev {
  from { transform: translateX(0); opacity: 1; filter: blur(0); }
  to   { transform: translateX(14%); opacity: 0; filter: blur(2px); }
}
@keyframes whooshEnterNext {
  from { transform: translateX(14%); opacity: 0; filter: blur(2px); }
  to   { transform: translateX(0); opacity: 1; filter: blur(0); }
}
@keyframes whooshEnterPrev {
  from { transform: translateX(-14%); opacity: 0; filter: blur(2px); }
  to   { transform: translateX(0); opacity: 1; filter: blur(0); }
}

@media (prefers-reduced-motion: reduce) {
  body.whoosh-exit-next, body.whoosh-exit-prev,
  body.whoosh-enter-next, body.whoosh-enter-prev { animation: none; }
}

/* ---------------------------------------------------------------------
   Reveal-on-scroll
   --------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }

/* ---------------------------------------------------------------------
   Sections generic
   --------------------------------------------------------------------- */
.section { padding: clamp(60px, 9vw, 120px) 0; }
.section--dark { background: var(--bg-alt); color: var(--ink); }
.section--dark h2, .section--dark h3 { color: var(--ink); }
.section--dark p { color: var(--ink-soft); }
.section--dark .eyebrow { color: var(--gold-soft); }

.two-col { display: grid; gap: 50px; align-items: center; }
@media (min-width: 860px) { .two-col { grid-template-columns: 1.1fr 0.9fr; } }

.stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.stat-card {
  background: var(--surface); border-radius: var(--radius); padding: 24px 18px;
  text-align: center; box-shadow: var(--shadow-card); border: 1px solid rgba(244,239,224,.08);
  transition: transform 0.3s var(--ease);
}
.stat-card:hover { transform: translateY(-6px); }
.stat-card__num { display: block; font-family: var(--font-display); font-size: 2.2rem; color: var(--gold); }
.stat-card span:last-child { font-size: 0.85rem; color: var(--ink-soft); }

.area-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 22px; margin-top: 36px; }
.area-grid--full { margin-top: 10px; }
.area-card {
  display: block;
  background: rgba(244,239,224,0.04);
  border: 1px solid rgba(244,239,224,0.12);
  border-radius: var(--radius); padding: 28px 24px;
  transition: transform 0.35s var(--ease), background 0.35s var(--ease), border-color 0.35s var(--ease);
}
.area-card:hover { transform: translateY(-8px); background: rgba(244,239,224,0.08); border-color: var(--gold); }
.area-card__icon { display: inline-block; width: 34px; height: 34px; margin-bottom: 14px; border-radius: 50%; background: var(--gold); }
.area-card--lg { background: var(--surface); border: 1px solid rgba(244,239,224,.08); box-shadow: var(--shadow-card); }
.area-card--lg:hover { border-color: var(--gold); }
.area-card__index { font-family: var(--font-display); font-size: 2rem; color: var(--gold); }

.center-cta { text-align: center; }

.video-frame { position: relative; padding-top: 56.25%; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-soft); }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-note { text-align: center; font-size: 0.8rem; margin-top: 10px; opacity: 0.6; }

/* Testimonials carousel */
.carousel { position: relative; max-width: 720px; margin: 0 auto; text-align: center; min-height: 180px; }
.carousel__track { position: relative; }
.carousel__slide {
  margin: 0; position: absolute; inset: 0;
  opacity: 0; transform: translateX(20px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
  pointer-events: none;
}
.carousel__slide.is-active { opacity: 1; transform: translateX(0); position: relative; pointer-events: auto; }
.carousel__slide p { font-size: 1.3rem; font-style: italic; color: var(--ink); }
.carousel__slide cite { color: var(--gold); font-weight: 600; font-style: normal; }
.carousel__dots { display: flex; justify-content: center; gap: 8px; margin-top: 24px; }
.carousel__dots button {
  width: 9px; height: 9px; border-radius: 50%; border: none; background: rgba(244,239,224,0.25); cursor: pointer;
  transition: background 0.25s, transform 0.25s;
}
.carousel__dots button.is-active { background: var(--gold); transform: scale(1.3); }

.cta-banner { text-align: center; }
.cta-banner .btn { margin-top: 10px; }

/* ---------------------------------------------------------------------
   Page hero (secondary pages)
   --------------------------------------------------------------------- */
.page-hero {
  /* O cabeçalho (.site-header) é "sticky", mas ocupa o seu próprio
     espaço no fluxo normal da página (74px) -- sem isto, essa faixa
     mostra o fundo sólido do body por trás do gradiente translúcido do
     cabeçalho, criando uma barra visível no topo em qualquer página cuja
     secção inicial tenha imagem de fundo (mesmo bug identificado e
     corrigido no hero da home -- ver ".hero" mais abaixo -- só que lá só
     se notava por causa do vídeo claro; aqui aplica-se a TODAS as
     páginas secundárias, já que agora várias têm fotos vivas no hero).
     Puxa-se a secção para cima para ficar por trás do cabeçalho (que
     continua por cima, z-index:100), e o padding-top (130px, bem acima
     dos 74px do cabeçalho) garante que o título nunca fica escondido. */
  margin-top: -74px;
  padding: 130px 0 70px;
  background: linear-gradient(160deg, var(--surface) 0%, var(--bg-alt) 100%);
  color: var(--ink);
  text-align: center;
  view-transition-name: hero;
}
.page-hero h1 { color: var(--ink); }
/* Quando o .page-hero está dentro de um wrapper "*-photo-bg" (que já foi
   puxado para cima -- ver ".lineup-photo-bg"/".sustainability-photo-bg"
   mais abaixo), não se aplica outra vez, senão fica deslocado para cima
   do próprio wrapper. */
.lineup-photo-bg .page-hero,
.sustainability-photo-bg .page-hero {
  margin-top: 0;
}

/* Página de Sustentabilidade -- fundo com foto (tendas de campismo entre
   as árvores) a cobrir TODA a página (hero + grelha de cartões), SEM véu
   escuro -- pedido explícito do cliente ("tens aí as fotos sem nada por
   cima"). O título ganha uma sombra mais forte (em vez do véu) para se
   manter legível sobre a foto viva, e os cartões ficam num tom escuro
   sólido por cima da imagem, tal como no exemplo enviado. O wrapper
   ".sustainability-photo-bg" segue o mesmo padrão do ".lineup-photo-bg"
   (ver mais abaixo): a imagem fica no wrapper para não repetir/cortar na
   transição entre o hero e a grelha. */
.sustainability-photo-bg {
  /* Puxa o wrapper para cima do cabeçalho fixo -- mesmo motivo do
     ".page-hero"/".immersive-hero" (ver comentário completo em
     ".page-hero", mais acima): sem isto a foto começava 74px mais abaixo
     e deixava ver o fundo sólido do body por trás do cabeçalho. */
  margin-top: -74px;
  position: relative;
  background: url("../img/sustainability-hero-bg.jpg") center top / cover no-repeat;
}
.sustainability-photo-bg .page-hero--sustainability,
.sustainability-photo-bg > .section {
  background: transparent;
}
.page-hero--sustainability h1 {
  text-shadow: 0 2px 0 rgba(10,13,14,.85), 0 3px 4px rgba(10,13,14,.85), 0 12px 34px rgba(0,0,0,.55);
}
.page-hero--sustainability .eyebrow {
  text-shadow: 0 2px 10px rgba(10,13,14,.9);
}
.page-hero--sustainability .page-hero__lede {
  color: var(--ink);
  text-shadow: 0 1px 0 rgba(10,13,14,.9), 0 2px 3px rgba(10,13,14,.9), 0 8px 20px rgba(0,0,0,.6);
}
.page-hero .eyebrow { color: var(--gold-soft); }
.page-hero__lede { max-width: 620px; margin: 0 auto; color: var(--ink-soft); }

/* Grelha de 6 cartões (Kit de Boas-vindas, Casas de Banho Secas, Restos
   de Comida, Produtos Locais, Respeito pelo Rio, Comunidade) -- cada
   cartão tem um "dot" colorido + título numa linha, e o texto por baixo. */
.eco-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
  padding-bottom: 20px;
}
.eco-card {
  background: rgba(30,38,42,0.86);
  backdrop-filter: blur(4px);
  border-radius: var(--radius); padding: 24px 26px;
  box-shadow: var(--shadow-card); border: 1px solid rgba(244,239,224,.12);
  transition: transform 0.3s var(--ease), background 0.3s var(--ease);
}
.eco-card:hover { transform: translateY(-4px); background: rgba(30,38,42,0.95); }
.eco-card__head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.eco-card__dot { width: 14px; height: 14px; border-radius: 50%; flex: none; }
.eco-card h3 { margin: 0; font-size: 1.02rem; color: var(--ink); }
.eco-card p { margin: 0; font-size: 0.88rem; color: var(--ink-soft); }
@media (max-width: 820px) {
  .eco-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .eco-grid { grid-template-columns: 1fr; }
}

/* Páginas de área (/line-up e /line-up/<slug>) -- o título fica logo
   seguido do texto/galeria, sem o espaço extra do .page-hero + .section
   normais (pensados para heróis com mais conteúdo por baixo). */
.page-hero--lineup { padding-bottom: 40px; }
.page-hero--lineup + .section { padding-top: clamp(30px, 4vw, 60px); }

/* Página /line-up (índice das áreas) -- fundo com foto (sound system +
   rio) a cobrir TODA a página (hero + grelha de cartões), não só o
   hero -- por isso o véu e a imagem ficam no wrapper ".lineup-photo-bg"
   que envolve as duas secções, e cada secção lá dentro fica transparente
   para a foto continuar por trás delas, sem repetir/cortar na transição
   entre o hero e a grelha. Só a página-índice tem este fundo; as páginas
   individuais de cada área (area_detail.html) mantêm o fundo neutro. */
.lineup-photo-bg {
  /* Puxa o wrapper para cima do cabeçalho fixo -- mesmo motivo do
     ".page-hero"/".immersive-hero" (ver comentário completo em
     ".page-hero", mais acima). */
  margin-top: -74px;
  position: relative;
  background:
    linear-gradient(180deg, rgba(10,13,14,0.62) 0%, rgba(10,13,14,0.3) 45%, rgba(10,13,14,0.5) 75%, rgba(10,13,14,0.82) 100%),
    url("../img/lineup-hero-bg.jpg") center top / cover no-repeat;
}
.lineup-photo-bg .page-hero--lineup-index,
.lineup-photo-bg > .section {
  background: transparent;
}
.lineup-photo-bg .area-card--lg {
  background: rgba(20,26,29,0.78);
  backdrop-filter: blur(4px);
  border-color: rgba(244,239,224,.14);
}
.lineup-photo-bg .area-card--lg:hover { background: rgba(20,26,29,0.9); }

/* ---------------------------------------------------------------------
   Prose / split blocks / highlight box
   --------------------------------------------------------------------- */
.prose { max-width: 720px; margin: 0 auto 50px; }

.split-block { display: grid; gap: 30px; align-items: center; margin-bottom: 60px; }
@media (min-width: 780px) { .split-block { grid-template-columns: 0.9fr 1.1fr; } }
.split-block--reverse { direction: rtl; }
.split-block--reverse > * { direction: ltr; }
.split-block__visual { border-radius: var(--radius); min-height: 220px; box-shadow: var(--shadow-card); }

.highlight-box {
  background: var(--surface); border-radius: var(--radius); padding: 36px;
  text-align: center; margin: 40px 0; border: 1px solid rgba(244,239,224,.08);
}

/* Blocos de texto/galeria da página "What is HIM Dub" — texto sobre um
   cartão escuro centrado, intercalado com filas de fotos do festival. */
.highlight-box--story { max-width: 760px; margin-left: auto; margin-right: auto; }
.highlight-box--story p { color: var(--ink-soft); }
.highlight-box--story p:last-child { margin-bottom: 0; }

.story-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 40px 0; }
.story-gallery--2 { grid-template-columns: repeat(2, 1fr); }
.story-gallery--4 { grid-template-columns: repeat(4, 1fr); }
.story-gallery img {
  width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--radius-sm); display: block; box-shadow: var(--shadow-card);
}
@media (max-width: 760px) {
  .story-gallery, .story-gallery--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .story-gallery, .story-gallery--4 { grid-template-columns: 1fr; }
}

/* Imagem larga única (ex: parede de logos de promotores/parceiros) --
   mantém a proporção original em vez de recortar a 4:3 como a galeria. */
.wide-banner { margin: 40px 0; }
.wide-banner img {
  width: 100%; height: auto; display: block;
  border-radius: var(--radius-sm); box-shadow: var(--shadow-card);
}

.notice-box {
  background: rgba(201,154,70,0.12); border: 1px solid var(--gold); border-radius: var(--radius-sm);
  padding: 16px 20px; font-size: 0.9rem; margin-bottom: 24px; color: var(--ink);
}
/* Aviso de bilhete já usado (ver checkin/ticket.html) -- mesma estrutura do
   .notice-box normal, mas em tom de alerta (vermelho), para se distinguir
   claramente de um aviso neutro/informativo. */
.notice-box--danger { background: rgba(224,90,90,0.14); border-color: #e05a5a; }

/* Corrigir pulseira depois de um bilhete já ter feito check-in (ver
   checkin/ticket.html) -- fica dentro de um <details> fechado por omissão
   (não é logo visível) e o formulário lá dentro exige uma checkbox de
   confirmação, para nunca ser possível re-validar um bilhete por engano
   só de estar a despachar entrada à pressa. */
.checkin-override { margin-bottom: 24px; }
.checkin-override summary { cursor: pointer; color: var(--ink-soft); font-size: 0.9rem; }
.checkin-override summary:hover { color: var(--ink); }
.checkin-override__confirm {
  display: flex; align-items: flex-start; gap: 8px; margin: 14px 0;
  font-size: 0.85rem; color: var(--ink-soft); cursor: pointer;
}
.checkin-override__confirm input { margin-top: 3px; }

/* Página de Contact (/infos/contact) -- fundo com foto (o público junto
   ao rio, em frente ao palco do Dub Temple), com véu escuro para o texto
   continuar legível; cada contacto fica num cartão escuro semitransparente
   por cima da foto, tal como no exemplo enviado. */
.page-hero--contact {
  background:
    linear-gradient(180deg, rgba(10,13,14,0.5) 0%, rgba(10,13,14,0.35) 45%, rgba(10,13,14,0.72) 100%),
    url("../img/contact-bg.jpg") center center / cover no-repeat;
  padding-bottom: clamp(60px, 8vw, 90px);
}

.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 20px; text-align: center; margin-top: 40px; }
.contact-grid > div {
  background: rgba(16,21,23,0.7); border-radius: var(--radius); padding: 26px 20px;
  border: 1px solid rgba(244,239,224,.1);
}
.contact-grid a { color: var(--gold-soft); font-weight: 600; }

/* ---------------------------------------------------------------------
   Participate / ambassadors
   --------------------------------------------------------------------- */
.way-list { display: flex; flex-direction: column; gap: 18px; }
.way-card { background: var(--surface); border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow-card); border: 1px solid rgba(244,239,224,.08); }
.way-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.badge { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; padding: 4px 10px; border-radius: 999px; font-weight: 700; }
.badge--open { background: rgba(201,154,70,0.18); color: var(--gold-soft); }
.badge--closed { background: rgba(176,86,47,0.2); color: #e0916d; }

.ambassador-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-bottom: 40px; }
.ambassador-card { text-align: center; background: var(--surface); border-radius: var(--radius); padding: 30px 20px; box-shadow: var(--shadow-card); border: 1px solid rgba(244,239,224,.08); transition: transform 0.3s var(--ease); }
.ambassador-card:hover { transform: translateY(-6px); }
.ambassador-card__flag { font-size: 2.4rem; display: block; margin-bottom: 10px; }

.feature-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 22px; margin: 40px 0; }
.feature-item { background: var(--surface); border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow-card); border: 1px solid rgba(244,239,224,.08); }
.feature-item__icon { display: inline-block; width: 30px; height: 30px; border-radius: 50%; background: var(--gold); margin-bottom: 12px; }

/* ---------------------------------------------------------------------
   Product grid / cards (merchandise, glamping)
   --------------------------------------------------------------------- */
.product-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 26px; }
.product-card {
  background: var(--surface); border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-card); border: 1px solid rgba(244,239,224,.08);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.product-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-soft); }
.product-card__visual { display: block; height: 170px; }
.product-card__body { padding: 20px; }
.product-card__body h3 { font-size: 1rem; margin-bottom: 6px; }
.product-card__body p { font-size: 0.88rem; min-height: 2.6em; }
.product-card__footer { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; }
.price { font-family: var(--font-display); color: var(--gold); font-size: 1.05rem; }
.price--lg { font-size: 1.6rem; margin: 4px 0 18px; }

/* Product detail */
.product-detail__grid { display: grid; gap: 40px; }
@media (min-width: 860px) { .product-detail__grid { grid-template-columns: 1fr 1fr; align-items: start; } }
.product-detail__visual { min-height: 320px; border-radius: var(--radius); box-shadow: var(--shadow-card); }
.product-detail__desc { margin: 14px 0 24px; }

.field { margin-bottom: 18px; }
.field label { display: block; font-weight: 700; font-size: 0.75rem; margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-soft); }
.field input, .field select {
  width: 100%; padding: 12px 16px; border-radius: 999px; border: 1.5px solid rgba(244,239,224,.18);
  font-family: inherit; font-size: 0.92rem; background: var(--cream); color: var(--bg-alt); transition: border-color 0.25s;
}
.field input::placeholder { color: rgba(23,29,32,.45); }
.field input:focus { outline: none; border-color: var(--gold); }
.field--qty input { max-width: 100px; }

.variant-picker { display: flex; gap: 8px; flex-wrap: wrap; }
.variant-option input { position: absolute; opacity: 0; width: 0; height: 0; }
.variant-option span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 42px; padding: 8px 12px; border-radius: var(--radius-sm);
  border: 1.5px solid rgba(244,239,224,.25); cursor: pointer; font-weight: 600; transition: all 0.2s; color: var(--ink);
}
.variant-option input:checked + span { background: var(--gold); border-color: var(--gold); color: var(--bg-alt); }

/* ---------------------------------------------------------------------
   Bilhetes — página em 3 colunas (Full Pass / Full Pass + Caravan / Others),
   cada bilhete é um botão em forma de pílula que fica creme ao passar o
   rato e o clique inteiro adiciona ao carrinho (ver templates/tickets.html).
   --------------------------------------------------------------------- */
/* padding-top - padding-bottom = 74px (altura do cabecalho fixo, que fica
   por cima do hero) -- assim o espaco visivel acima do titulo (a partir da
   base do cabecalho) fica igual ao espaco visivel abaixo do botao "Ver
   carrinho", com ou sem scroll. A SOMA dos dois mantem-se igual ao valor
   antigo (84+48=132) para nao roubar altura disponivel ao conteudo -- so a
   distribuicao muda (103+29=132), evitando cortar o botao em ecras mais
   baixos. */
.tickets-content {
  /* ".tickets-content" e o proprio ".immersive-hero__content" (mesmo
     elemento, duas classes) -- e filho direto do ".immersive-hero", que
     nao define align-items (por omissao "stretch"). Sem margin:auto,
     "stretch" limita a largura ao max-width mas NAO centra a caixa,
     ficando encostada a esquerda -- nao tem nada a ver com o carrinho
     (o ".cart-drawer" e "position:fixed", flutua por cima da pagina, nao
     precisa deste espaco). */
  margin-left: auto;
  margin-right: auto;
  max-width: 1360px; padding-top: 103px; padding-bottom: 29px; gap: 18px; padding-left: clamp(20px, 7vw, 96px); padding-right: clamp(20px, 7vw, 96px);
}
/* A partir dos 760px as setas de navegação (.hero-arrow) ficam visíveis,
   fixas a meia altura de todo o hero -- como esta página tem muito mais
   conteúdo do que cabe num ecrã (vários lotes por coluna), o interior faz
   scroll próprio (.immersive-hero__content) e as linhas dos bilhetes podem
   passar por trás das setas nesse ponto. Este padding extra (só a partir
   dos 760px, onde as setas existem) garante uma faixa livre em ambos os
   lados para as colunas nunca ficarem por baixo do texto "Home"/"Experience".*/
@media (min-width: 760px) {
  .tickets-content { padding-left: clamp(90px, 9vw, 120px); padding-right: clamp(90px, 9vw, 120px); }
}
.tickets-title { margin-bottom: 4px; }
/* Sem véu (mesmo padrão da página de Parceiros, ".immersive-hero--partners"
   -- pedido explícito para não escurecer o vídeo aqui): os cartões dos
   bilhetes já têm fundo escuro próprio (ver ".ticket-pill") e o título já
   tem text-shadow (ver ".immersive-hero__title"), por isso não precisam
   da ajuda de um scrim para se lerem bem. */

.tickets-columns {
  display: grid; grid-template-columns: 1fr; gap: 28px;
  width: 100%; align-items: start;
}
@media (min-width: 980px) {
  .tickets-columns { grid-template-columns: 1fr 1fr 1fr; gap: 22px; }
}

.tickets-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.tickets-col--bundle { justify-content: flex-start; }
.tickets-col__title {
  font-family: var(--font-display); font-weight: 400; letter-spacing: 0.02em;
  color: var(--ink); font-size: clamp(1.3rem, 2.6vw, 1.7rem); line-height: 1.3; text-align: center;
  margin: 0 0 4px; text-shadow: 0 4px 20px rgba(0,0,0,.4);
}
.tickets-col__title small {
  display: block; font-family: var(--font-body); font-weight: 400;
  font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-soft); margin-top: 6px;
}
.tickets-col__soldout {
  text-align: center; font-family: var(--font-display); color: var(--gold-soft);
  border: 1.5px dashed rgba(244,239,224,.3); border-radius: 999px; padding: 14px 22px; margin: 0;
}

.ticket-pill {
  all: unset; box-sizing: border-box; cursor: pointer; width: 100%;
  display: flex; align-items: center; gap: 14px;
  background: rgba(37,44,48,.82); backdrop-filter: blur(6px);
  border: 1.5px solid rgba(244,239,224,0.14); border-radius: 999px;
  padding: 14px 22px;
  transition: background 0.22s, border-color 0.22s, transform 0.2s var(--ease);
}
.ticket-pill--hero { padding: 18px 24px; border-color: rgba(201,154,70,.45); }
.ticket-pill:hover, .ticket-pill:focus-visible {
  background: var(--cream); border-color: var(--cream); transform: translateY(-2px);
}
.ticket-pill:hover .ticket-pill__icon, .ticket-pill:focus-visible .ticket-pill__icon { color: var(--bg-alt); }
.ticket-pill:hover .ticket-pill__body b, .ticket-pill:focus-visible .ticket-pill__body b { color: var(--rust); }
.ticket-pill:hover .ticket-pill__body strong, .ticket-pill:focus-visible .ticket-pill__body strong,
.ticket-pill:hover .ticket-pill__body small, .ticket-pill:focus-visible .ticket-pill__body small,
.ticket-pill:hover .ticket-pill__price, .ticket-pill:focus-visible .ticket-pill__price { color: var(--bg-alt); }

.ticket-pill__icon {
  width: 34px; height: 34px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  color: var(--gold-soft);
}
.ticket-pill--hero .ticket-pill__icon { width: 40px; height: 40px; }
.ticket-pill__icon img { width: 100%; height: 100%; object-fit: contain; }
.ticket-pill__body { flex: 1; min-width: 0; line-height: 1.5; text-align: left; }
.ticket-pill__body b {
  display: block; font-size: 0.62rem; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--ink-soft); font-weight: 700; line-height: 1.4;
}
.ticket-pill__body strong {
  display: block; font-family: var(--font-display); font-size: 1.08rem; line-height: 1.6;
  font-weight: 400; letter-spacing: 0.03em; color: var(--ink);
}
.ticket-pill__body small {
  display: block; margin-top: 4px; font-size: 0.68rem; line-height: 1.5; color: var(--gold-soft);
}
.ticket-pill__price {
  font-family: var(--font-display); font-size: 1.2rem; color: var(--cream); flex-shrink: 0;
}

/* Lotes que não estão à venda neste momento (já esgotados ou ainda por
   vir, ver batches.py/all_tiers_with_status) -- pedido explícito do João
   para terem o MESMO balão do lote ativo (".ticket-pill"), só que sem
   poderem ser clicados. Por isso usamos um <div> em vez de <button>
   dentro de um <form> (ver templates/tickets.html) e anulamos aqui o
   hover/cursor "clicável" do ".ticket-pill" normal. */
.ticket-pill--locked { cursor: default; opacity: 0.6; }
.ticket-pill--locked:hover, .ticket-pill--locked:focus-visible {
  background: rgba(37,44,48,.82); border-color: rgba(244,239,224,0.14); transform: none;
}
.ticket-pill--locked:hover .ticket-pill__icon, .ticket-pill--locked:focus-visible .ticket-pill__icon { color: var(--gold-soft); }
.ticket-pill--locked:hover .ticket-pill__body b, .ticket-pill--locked:focus-visible .ticket-pill__body b { color: var(--ink-soft); }
.ticket-pill--locked:hover .ticket-pill__body strong, .ticket-pill--locked:focus-visible .ticket-pill__body strong,
.ticket-pill--locked:hover .ticket-pill__body small, .ticket-pill--locked:focus-visible .ticket-pill__body small { color: inherit; }
.ticket-pill--locked:hover .ticket-pill__price, .ticket-pill--locked:focus-visible .ticket-pill__price { color: var(--cream); }
/* Lote já fechado (esgotado) -- ainda mais apagado que um "upcoming". */
.ticket-pill--sold-out { opacity: 0.45; }
.ticket-pill__price--soldout {
  font-family: var(--font-body); font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint);
}

/* Balão "à porta" (não é um bilhete, não é clicável) -- mesmo formato do
   ".ticket-pill" normal, só que em cinza para não parecer compravel.
   Pedido explícito do João. Fica fora da grelha de 3 colunas porque não
   pertence a nenhum bilhete específico. */
.ticket-pill--door {
  cursor: default; align-self: center; width: auto; min-width: min(100%, 420px);
  background: #9a9c9e; border-color: #9a9c9e;
}
.ticket-pill--door:hover, .ticket-pill--door:focus-visible {
  background: #9a9c9e; border-color: #9a9c9e; transform: none;
}
.ticket-pill__body--door b {
  font-family: var(--font-display); font-size: 1.1rem; letter-spacing: 0.02em;
  text-transform: uppercase; color: var(--bg-alt); font-weight: 400; line-height: 1.35;
}
.ticket-pill--door .ticket-pill__price { color: var(--bg-alt); }

.tickets-cart-link { align-self: center; margin-top: 8px; }

/* ---------------------------------------------------------------------
   Cart drawer
   --------------------------------------------------------------------- */
.cart-drawer {
  position: fixed; top: 0; right: 0; height: 100vh; width: min(400px, 92vw);
  background: var(--surface); z-index: 210; box-shadow: -20px 0 50px -20px rgba(0,0,0,0.6);
  display: flex; flex-direction: column;
  transform: translateX(105%);
  transition: transform 0.45s var(--ease);
  border-left: 1px solid rgba(244,239,224,.08);
}
.cart-drawer.is-open { transform: translateX(0); }
.cart-drawer__header { display: flex; align-items: center; justify-content: space-between; padding: 22px 22px 10px; }
.cart-drawer__body { flex: 1; overflow-y: auto; padding: 0 22px; }
.cart-drawer__footer { padding: 18px 22px 26px; border-top: 1px solid rgba(244,239,224,.1); display: flex; flex-direction: column; gap: 10px; }
.cart-drawer__total { display: flex; justify-content: space-between; font-family: var(--font-display); font-size: 1.1rem; }

.cart-drawer-backdrop {
  position: fixed; inset: 0; background: rgba(10, 13, 14, 0.6); z-index: 205;
  opacity: 0; visibility: hidden; transition: opacity 0.35s var(--ease);
}
.cart-drawer-backdrop.is-open { opacity: 1; visibility: visible; }

.cart-lines { list-style: none; margin: 0; padding: 0; }
.cart-line { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid rgba(244,239,224,.1); }
.cart-line__swatch { width: 44px; height: 44px; border-radius: var(--radius-sm); flex-shrink: 0; }
.cart-line__swatch--icon {
  background: var(--bg-alt); display: flex; align-items: center; justify-content: center; padding: 8px;
}
.cart-line__swatch--icon img { width: 100%; height: 100%; object-fit: contain; }
.cart-line__info { flex: 1; display: flex; flex-direction: column; font-size: 0.85rem; }
.cart-line__subtotal { font-weight: 700; }
.cart-line__remove-form { flex-shrink: 0; margin: 0; }
.cart-line__remove {
  background: none; border: none; cursor: pointer; color: var(--ink-faint); padding: 4px;
  display: inline-flex; border-radius: 999px; transition: color 0.2s, background 0.2s;
}
.cart-line__remove svg { width: 16px; height: 16px; }
.cart-line__remove:hover { color: var(--terracotta); background: rgba(176,86,47,.12); }
.cart-empty { padding: 30px 0; font-size: 0.9rem; }

/* Cart page */
.cart-table { width: 100%; border-collapse: collapse; margin: 30px 0; }
.cart-table th { text-align: left; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-soft); padding-bottom: 10px; }
.cart-table td { padding: 14px 6px; border-top: 1px solid rgba(244,239,224,.1); vertical-align: middle; }
.cart-table__product { display: flex; align-items: center; gap: 12px; }
.qty-form input { width: 60px; padding: 8px; border-radius: 8px; border: 1.5px solid rgba(244,239,224,.2); background: var(--cream); color: var(--bg-alt); }
.cart-summary { display: flex; justify-content: flex-end; gap: 16px; font-family: var(--font-display); font-size: 1.3rem; }
.cart-actions { display: flex; justify-content: space-between; gap: 12px; margin-top: 26px; flex-wrap: wrap; }

/* Checkout */
.checkout-grid { display: grid; gap: 30px; margin-top: 30px; }
@media (min-width: 780px) { .checkout-grid { grid-template-columns: 1.1fr 0.9fr; } }
.checkout-summary { background: var(--surface); border-radius: var(--radius); padding: 24px; border: 1px solid rgba(244,239,224,.08); }
.checkout-summary ul { list-style: none; margin: 0 0 16px; padding: 0; }
.checkout-summary li { display: flex; justify-content: space-between; font-size: 0.9rem; padding: 6px 0; color: var(--ink-soft); }
/* Taxa de processamento (ver checkout.html/fees.py) -- linha separada dos
   bilhetes/produtos em si, por isso fica com um traço por cima e um tom
   mais discreto, tipo "subtotal extra" antes do total. */
.checkout-summary__fee { border-top: 1px solid rgba(244,239,224,.1); margin-top: 4px; padding-top: 10px !important; font-style: italic; }
.checkout-summary__total { display: flex; justify-content: space-between; font-family: var(--font-display); font-size: 1.2rem; border-top: 1px solid rgba(244,239,224,.12); padding-top: 12px; color: var(--ink); }

/* Aviso "não feches a página" por baixo do botão de pagar (ver checkout.html)
   -- tom discreto/dourado, igual ao .notice-box, mas mais pequeno porque
   fica colado ao botão em vez de ser uma caixa separada. */
.checkout-form__warning {
  margin-top: 14px; font-size: 0.8rem; line-height: 1.5;
  color: var(--gold); text-align: center;
}

.section--result { text-align: center; padding: 140px 0; }
.result-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 70px; height: 70px; border-radius: 50%; font-size: 2rem; margin-bottom: 20px;
  animation: pop 0.5s var(--ease);
}
.result-icon--success { background: rgba(201,154,70,0.18); color: var(--gold-soft); }
.result-icon--cancel { background: rgba(176,86,47,0.2); color: #e0916d; }
@keyframes pop { from { transform: scale(0); } to { transform: scale(1); } }

/* ---------------------------------------------------------------------
   FAQ accordion
   --------------------------------------------------------------------- */
.faq-rules-link {
  margin-bottom: 28px; color: var(--ink-soft); font-size: 0.95rem;
}
.faq-rules-link a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.faq-rules-link a:hover { color: var(--terracotta); }
.accordion__item {
  border-bottom: 1px solid rgba(244,239,224,.1);
  padding: 6px 0;
}
.accordion__item summary {
  cursor: pointer; font-weight: 700; padding: 14px 0; list-style: none;
  display: flex; align-items: center; justify-content: space-between; color: var(--ink);
}
.accordion__item summary::-webkit-details-marker { display: none; }
.accordion__item summary::after {
  content: "+"; font-family: var(--font-display); font-size: 1.4rem; color: var(--gold);
  transition: transform 0.3s var(--ease);
}
.accordion__item[open] summary::after { transform: rotate(45deg); }
.accordion__content { padding-bottom: 16px; animation: fadeDown 0.35s var(--ease); }
@keyframes fadeDown { from { opacity: 0; transform: translateY(-6px);} to { opacity: 1; transform: translateY(0);} }

/* ---------------------------------------------------------------------
   Footer
   --------------------------------------------------------------------- */
.site-footer { background: var(--surface); color: var(--ink-soft); padding: 50px 0 0; view-transition-name: footer; }
.site-footer__grid {
  display: flex; align-items: flex-start; justify-content: center; flex-wrap: wrap;
  gap: clamp(30px,6vw,80px); padding-bottom: 34px;
}
.site-footer__links { display: flex; flex-direction: column; gap: 8px; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.03em; }
.site-footer__links a:hover { color: var(--gold-soft); }
.site-footer__cart-btn {
  background: none; border: none; padding: 0; margin: 0;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.site-footer__cart-btn:hover { color: var(--gold-soft); }

/* Nas páginas imersivas o seletor de idioma já aparece na barra inferior
   do hero (.hero__meta) -- esconde o do cabeçalho para não duplicar. */
body.immersive-page .site-header__actions .lang-switch { display: none; }
.site-footer__tagline { display: flex; justify-content: center; align-items: center; }
.site-footer__tagline-text {
  font-family: var(--font-body); color: var(--ink); line-height: 1.3;
  font-size: 1.7rem; font-weight: 400; letter-spacing: 0.01em;
  text-align: center; margin: 0;
}

.site-footer__newsletter {
  border-top: 1px solid rgba(244,239,224,.1);
  padding: 17px clamp(16px,3.2vw,42px);
  display: flex; align-items: center; justify-content: center; gap: 13px; flex-wrap: wrap;
  text-align: center;
}
.site-footer__newsletter p { margin: 0; font-size: 0.76rem; }

/* Na home o banner de newsletter/redes sociais fica logo a seguir ao hero
   de video (sem mais nenhum conteudo pelo meio) e ficava com mau aspeto --
   mantem-se em todas as outras paginas (incl. imersivas), so na home e que
   nao aparece. */
body.home-page .site-footer__newsletter { display: none; }

.social-row { display: flex; gap: 10px; }
.social-row a {
  width: 28px; height: 28px; border-radius: 50%; border: 1px solid rgba(244,239,224,0.25);
  display: flex; align-items: center; justify-content: center; font-size: 0.62rem; transition: all 0.25s;
}
.social-row a:hover { background: var(--gold); border-color: var(--gold); color: var(--bg-alt); }

.newsletter-form { display: flex; gap: 7px; flex-wrap: wrap; justify-content: center; }
.newsletter-form input {
  flex: 1; min-width: 170px; padding: 7px 14px; border-radius: 999px; border: 1px solid rgba(244,239,224,.2);
  background: rgba(244,239,224,.06); color: var(--ink); font-size: 0.85rem;
}
.newsletter-form input::placeholder { color: var(--ink-faint); }
.newsletter-form button {
  padding: 7px 15px; border-radius: 999px; border: none; background: var(--gold); color: var(--bg-alt);
  font-weight: 700; cursor: pointer; transition: transform 0.25s var(--ease); font-size: 0.76rem;
}
.newsletter-form button:hover { transform: translateY(-2px); }

.site-footer__bottom { padding: 16px 0 20px; text-align: center; font-size: 0.72rem; opacity: 0.55; }

/* ---------------------------------------------------------------------
   Placeholder "photo" swatches (ph-*)
   Substitui estas classes por imagens reais (background-image) quando
   tiveres o material fotográfico definitivo do festival.
   --------------------------------------------------------------------- */
[class^="ph-"] { background-size: cover; background-position: center; }
.ph-sun, .ph-sun-lg      { background: radial-gradient(circle at 60% 35%, var(--gold-soft), var(--terracotta) 75%); }
.ph-river                { background: linear-gradient(160deg, #3b7fae, #163c52); }
.ph-family               { background: linear-gradient(160deg, var(--gold), var(--terracotta)); }
.ph-leaf                 { background: linear-gradient(160deg, #4c8f5c, var(--bg-alt)); }
.ph-mountain              { background: linear-gradient(160deg, #7c6a53, #3a2f22); }
.ph-tent, .ph-tent-2, .ph-tent-lux { background: radial-gradient(ellipse 90% 70% at 50% -10%, var(--maroon), transparent 60%), radial-gradient(ellipse 70% 60% at 100% 100%, var(--rust), transparent 65%), var(--bg-alt); }
.ph-hoodie, .ph-tshirt    { background: linear-gradient(160deg, #37312b, #16130f); }
.ph-tote                 { background: linear-gradient(160deg, #b98d4a, #6b4c22); }
.ph-cup                  { background: linear-gradient(160deg, #cbbfa4, #8c7c5c); }
.ph-ashtray              { background: linear-gradient(160deg, #6b7d63, #2f3b2a); }
.ph-vinyl-lg              { background: radial-gradient(circle, #2a2a2a 0 30%, #111 31% 70%, #2a2a2a 71% 100%); }

/* ---------------------------------------------------------------------
   Utilities / responsive
   --------------------------------------------------------------------- */
@media (max-width: 620px) {
  .cart-table thead { display: none; }
  .cart-table, .cart-table tbody, .cart-table tr, .cart-table td { display: block; width: 100%; }
  .cart-table tr { margin-bottom: 16px; border: 1px solid rgba(244,239,224,.1); border-radius: var(--radius-sm); padding: 10px; }
}

/* ---------------------------------------------------------------------
   Admin (/admin/orders)
   --------------------------------------------------------------------- */
.admin-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; position: relative; z-index: 50; }

.admin-export { position: relative; }
.admin-export summary { list-style: none; cursor: pointer; }
.admin-export summary::-webkit-details-marker { display: none; }
.admin-export[open] summary { border-color: var(--gold); color: var(--gold); }
.admin-export__panel {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 30; min-width: 240px;
  background: var(--surface-deep); border: 1px solid rgba(244,239,224,.15); border-radius: var(--radius-sm);
  padding: 16px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 12px 30px rgba(0,0,0,.35);
}
.admin-export__all { font-size: 0.85rem; color: var(--ink); text-decoration: underline; text-align: center; }
.admin-export__all:hover { color: var(--gold); }
.admin-export__divider { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-faint); text-align: center; margin: 2px 0; }
.admin-export__form { display: flex; flex-direction: column; gap: 10px; }
.admin-export__form label { font-size: 0.75rem; color: var(--ink-soft); display: flex; flex-direction: column; gap: 4px; }
.admin-export__form input[type="date"] {
  padding: 8px 12px; border-radius: 8px; border: 1px solid rgba(244,239,224,.2); color-scheme: dark;
  background: rgba(244,239,224,.06); color: var(--ink); font-family: inherit; font-size: 0.85rem;
}
.admin-export__form input[type="date"]:focus { outline: none; border-color: var(--gold); }
.admin-export__form button { width: 100%; }
.admin-summary { grid-template-columns: repeat(4, 1fr); margin: 28px 0; }

.admin-real-sales {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  padding: 12px 18px; margin-bottom: 36px; border-radius: var(--radius-sm);
  background: rgba(201, 154, 70, 0.1); border: 1px solid rgba(201, 154, 70, 0.3);
  font-size: 0.82rem; color: var(--gold-soft);
}
.admin-real-sales.is-active { background: rgba(122, 178, 122, 0.1); border-color: rgba(122, 178, 122, 0.3); color: #9fd39f; }
.admin-real-sales form { margin: 0; flex-shrink: 0; }

.admin-alert {
  padding: 12px 18px; margin-bottom: 16px; border-radius: var(--radius-sm);
  background: rgba(224, 90, 90, 0.12); border: 1px solid rgba(224, 90, 90, 0.4);
  color: #e58f8f; font-size: 0.85rem; font-weight: 600;
}
.admin-subtitle { margin: 0 0 14px; font-size: 1.1rem; }
.admin-tickets { display: flex; flex-direction: column; gap: 2px; margin-bottom: 36px; border: 1px solid rgba(244,239,224,.1); border-radius: var(--radius-sm); overflow: hidden; }
.admin-tickets__row { display: flex; justify-content: space-between; padding: 10px 16px; background: var(--surface); }
.admin-tickets__row:nth-child(even) { background: var(--surface-deep); }
.admin-tickets__row strong { color: var(--gold); }

.admin-search { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.admin-search__input {
  flex: 1; min-width: 220px; max-width: 320px; padding: 8px 14px; border-radius: 999px;
  border: 1px solid rgba(244,239,224,.2); background: rgba(244,239,224,.06); color: var(--ink); font-size: 0.85rem;
}
.admin-search__input::placeholder { color: var(--ink-faint); }
.admin-search__input:focus { outline: none; border-color: var(--gold); }
.admin-search__clear { font-size: 0.78rem; color: var(--ink-soft); text-decoration: underline; }
.admin-search__clear:hover { color: var(--ink); }

.admin-filters { display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; }
.admin-filters a { padding: 6px 14px; border-radius: 999px; border: 1px solid rgba(244,239,224,.2); color: var(--ink-soft); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; }
.admin-filters a:hover { color: var(--ink); border-color: rgba(244,239,224,.4); }
.admin-filters a.is-active { background: var(--gold); border-color: var(--gold); color: var(--bg-alt); font-weight: 700; }

.admin-inline-form { display: inline; margin: 0; }

.admin-table-wrap { overflow-x: auto; padding-bottom: 8px; }
.admin-table { width: 100%; border-collapse: collapse; min-width: 720px; }
.admin-table th { text-align: left; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-soft); padding: 0 10px 10px 0; }
.admin-table td { padding: 12px 10px 12px 0; border-top: 1px solid rgba(244,239,224,.1); font-size: 0.9rem; vertical-align: top; }

.admin-status { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; }
.admin-status--paid, .admin-status--demo-paid { background: rgba(122, 178, 122, 0.18); color: #9fd39f; }
.admin-status--comp { background: rgba(122, 168, 220, 0.18); color: #9fc4e8; }
.admin-status--pending { background: rgba(201, 154, 70, 0.18); color: var(--gold-soft); }
.admin-status--cancelled { background: rgba(224, 90, 90, 0.18); color: #e58f8f; }

@media (max-width: 620px) {
  .admin-summary { grid-template-columns: repeat(2, 1fr); }
}

/* ---------------------------------------------------------------------
   Scanner de check-in (/checkin/scan)
   --------------------------------------------------------------------- */
.scanner-wrap { position: relative; width: 100%; max-width: 420px; aspect-ratio: 1 / 1; margin: 24px auto; border-radius: var(--radius); overflow: hidden; background: #000; }
.scanner-wrap video { width: 100%; height: 100%; object-fit: cover; display: block; }
.scanner-frame { position: absolute; inset: 12%; border: 3px solid var(--gold); border-radius: var(--radius-sm); pointer-events: none; box-shadow: 0 0 0 2000px rgba(0,0,0,.35); }
.scanner-status { text-align: center; color: var(--ink-soft); font-size: 0.9rem; }