/* Estrutura e seções */
body {
  font-family: var(--font-body);
  background: var(--color-background);
  color: var(--color-text);
  font-size: var(--text-body); /* 16px mínimo p/ mobile */
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  font-kerning: normal;
  /* Sem -webkit-font-smoothing: antialiased. Ele afina os traços, e sobre fundo
     escuro isso soma com o afinamento óptico que já acontece por natureza. */
}

.container {
  width: min(100% - 2.5rem, var(--container-max));
  margin-inline: auto;
}

section { padding-block: var(--section-padding); }

/* Caixa alta perde ascendente e descendente, e sobre fundo escuro o halation
   fecha as formas. Por isso tracking POSITIVO, nunca negativo como antes. */
.section-title {
  font-family: var(--font-display);
  font-size: var(--text-display);
  font-weight: var(--peso-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  text-wrap: balance;
  margin-bottom: clamp(1.5rem, 4vw, 2.75rem);
  text-align: center;
}

/* Header fixo */
.header {
  position: fixed; inset-inline: 0; top: 0; z-index: 50;
  transition: background var(--transition), box-shadow var(--transition);
}
.header.is-scrolled {
  background: var(--noite-80);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: 0 4px 24px var(--poco-suave);
}
.header__nav {
  display: flex; align-items: center; justify-content: space-between;
  padding-block: 0.5rem;
}
.header__logo { width: 76px; height: 76px; object-fit: contain; }
.header__menu {
  display: flex; align-items: center; gap: 1.75rem;
  font-weight: 600;
}
/* Alvo de toque de 44px. Antes media 38,4px de altura, abaixo do mínimo. */
.header__menu a:not(.btn) {
  text-decoration: none; color: var(--color-text);
  opacity: 0.85; transition: opacity var(--transition);
  display: inline-flex; align-items: center; min-height: 44px;
}
.header__menu a:not(.btn):hover { opacity: 1; }
.header__toggle { display: none; }

/* Hero */
.hero { padding-top: 6rem; }
.hero__bg {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
}
/* Scrim e glow derivam dos tokens via color-mix, em vez de repetir o hex com
   alfa. Mudar --color-background ou --glow-roxo passa a valer aqui também. */
.hero::after { /* scrim escuro sobre a foto para manter logo/CTAs legíveis */
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--color-background) 60%, transparent) 0%,
    color-mix(in srgb, var(--color-background) 45%, transparent) 40%,
    color-mix(in srgb, var(--color-background) 90%, transparent) 100%);
}
.hero__glow {
  position: absolute; inset: -20%; z-index: 2; mix-blend-mode: screen;
  background:
    radial-gradient(38% 34% at 22% 28%, color-mix(in srgb, var(--glow-roxo) 40%, transparent), transparent 70%),
    radial-gradient(30% 30% at 78% 22%, color-mix(in srgb, var(--glow-magenta) 28%, transparent), transparent 70%),
    radial-gradient(36% 32% at 68% 78%, color-mix(in srgb, var(--glow-verde) 50%, transparent), transparent 70%),
    radial-gradient(26% 26% at 30% 80%, color-mix(in srgb, var(--glow-magenta) 16%, transparent), transparent 70%);
  filter: blur(48px);
  pointer-events: none;
}
.hero__content { position: relative; z-index: 3; display: grid; justify-items: center; gap: 0.75rem; }
.hero__logo { width: min(58vw, 340px); height: auto; filter: drop-shadow(0 8px 40px var(--poco-fundo)); }
/* Era font-weight 300, o peso mais frágil do arquivo, na linha de posicionamento
   da marca, sobre foto escura. Texto claro sobre escuro pede um degrau A MAIS. */
.hero__tagline {
  font-size: var(--text-headline);
  font-weight: var(--peso-medio);
  line-height: var(--lh-headline);
  letter-spacing: var(--ls-body);
  text-wrap: balance;
}
.hero__sub { color: var(--color-text-muted); max-width: 34ch; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 0.9rem; justify-content: center; margin-top: 1.25rem; }
.hero__scroll {
  position: absolute; bottom: 1.5rem; left: 50%; translate: -50% 0; z-index: 3;
  color: var(--color-text-muted); font-size: 1.5rem; text-decoration: none;
  animation: flutua 2s ease-in-out infinite;
  padding: 0.5rem 1rem;
}
@keyframes flutua { 50% { transform: translateY(6px); } }

/* Seções específicas */
.sobre__wrap { display: grid; gap: 2.5rem; grid-template-columns: 1.2fr 1fr; align-items: center; }
.sobre__texto .section-title { text-align: left; }
/* Media ia a 83ch em 1440px, acima do teto de 75ch da própria regra do sistema */
.sobre__texto p { margin-bottom: 1rem; color: var(--color-text-muted); max-width: var(--medida-prosa); text-wrap: pretty; }
.sobre__texto p:first-of-type { color: var(--color-text); }
.sobre__chips { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

.onde__wrap { display: grid; gap: 2rem; grid-template-columns: 1.4fr 1fr; align-items: start; }
.onde__info { display: grid; gap: 1rem; justify-items: start; }
.onde__info p { color: var(--color-text-muted); }

.eventos__grid {
  display: grid; gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
}

.galeria__intro {
  text-align: center; color: var(--color-text-muted);
  margin: -1rem auto clamp(1.5rem, 4vw, 2.5rem); max-width: 40ch;
}

.faq__lista { max-width: 720px; margin-inline: auto; display: grid; gap: 0.75rem; }

/* Footer */
.footer {
  border-top: 1px solid var(--color-surface-border);
  padding-block: 3rem 7rem; /* respiro extra p/ sticky CTA mobile */
  text-align: center;
}
.footer__wrap { display: grid; gap: 1rem; justify-items: center; }
.footer__logo { width: 110px; height: 110px; object-fit: contain; }
.footer__links { display: flex; flex-wrap: wrap; gap: 1.25rem; justify-content: center; font-weight: 600; }
.footer__links a { text-decoration: none; opacity: 0.85; display: inline-flex; align-items: center; min-height: 44px; }
.footer__links a:hover { opacity: 1; }
.footer__endereco, .footer__legal, .footer__copy { color: var(--color-text-muted); font-size: var(--text-label); }
.footer__aviso { color: var(--color-text-muted); font-size: var(--text-label); max-width: 60ch; }