/* Botões */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0.75rem 1.75rem;
  border-radius: 999px; font-weight: var(--peso-forte); text-decoration: none;
  letter-spacing: var(--ls-body);
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
}
.btn--primary {
  background: var(--color-accent); color: var(--color-on-accent);
  box-shadow: var(--shadow-accent);
}
.btn--primary:hover { background: var(--color-accent-strong); transform: translateY(-2px); }
.btn--ghost {
  border: 1px solid var(--color-surface-border);
  background: var(--color-surface); color: var(--color-text);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
}
.btn--ghost:hover { border-color: var(--veu-3); transform: translateY(-2px); }
.btn--lg { font-size: var(--text-lead); padding: 0.9rem 2.2rem; }
.btn--sm { min-height: 44px; padding: 0.5rem 1.25rem; } /* 44px é o piso de alvo de toque */

/* Garantia: microcopy colada no CTA.
   O salto para a Byma é o único momento de risco percebido da jornada, e era o
   único sem apoio. Responde "é oficial?", "como pago?" e "quando confirma?" no
   lugar onde a pergunta acontece, não três seções abaixo dentro de um acordeão. */
.garantia {
  font-size: var(--text-label);
  line-height: 1.5;
  color: var(--color-text-muted);
  max-width: 42ch;
  margin-top: -0.35rem;
  text-wrap: pretty;
}
.garantia strong { color: var(--color-text); font-weight: var(--peso-forte); }
.garantia__alerta { display: block; color: var(--color-accent); font-weight: var(--peso-medio); }
.garantia--hero { margin-inline: auto; text-align: center; margin-top: 0.9rem; }

/* Card destaque (próximo evento) */
.destaque__card {
  display: grid; grid-template-columns: 1fr 1fr; overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-surface-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}
/* Flyer que falhou: o card vira coluna única em vez de exibir metade vazia */
.destaque__card--sem-img { grid-template-columns: 1fr; }

/* Os flyers são 1080x375 (2,88:1) e o container é quase quadrado. Com
   object-fit: cover o nome da atração era cortado ("RODRIGUINHO" virava "RODR"),
   apagando o principal argumento de venda. Agora o flyer aparece INTEIRO em
   contain, e o vazio é preenchido por uma cópia dele desfocada. De quebra isso
   reconcilia o vermelho saturado dos flyers com a paleta escura da página,
   porque a moldura passa a ser a cor do próprio flyer. */
.destaque__media { position: relative; overflow: hidden; min-height: 100%; }
.destaque__media::before {
  content: ''; position: absolute; inset: -10%;
  background-image: var(--flyer-bg); background-size: cover; background-position: center;
  filter: blur(32px) saturate(1.15) brightness(0.7);
  pointer-events: none;
}
.destaque__media img {
  position: relative; z-index: 1;
  width: 100%; height: 100%; object-fit: contain;
}
.destaque__info { padding: clamp(1.5rem, 4vw, 2.5rem); display: grid; gap: 0.9rem; align-content: center; justify-items: start; }
.destaque__data { color: var(--color-accent); font-weight: var(--peso-forte); text-transform: uppercase; letter-spacing: var(--ls-label); font-size: var(--text-label); }
/* O nome da atração é o segundo elemento mais importante da página, atrás só da
   foto. Condensada 900 em caixa alta é o que deixa RODRIGUINHO caber inteiro
   em card de 375px sem encolher: a Regra do Nome Inteiro do DESIGN.md. */
.destaque__nome {
  font-family: var(--font-display);
  font-size: var(--text-headline);
  font-weight: var(--peso-display);
  line-height: var(--lh-headline);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  text-wrap: balance;
}
.destaque__atracoes { color: var(--color-text-muted); }
.destaque__hoje { color: var(--color-accent); font-weight: var(--peso-forte); }
.destaque__vazio { text-align: center; color: var(--color-text-muted); font-size: var(--text-lead); }
.destaque__vazio a { color: var(--color-accent); }

/* Countdown */
.countdown { display: flex; gap: 0.6rem; margin-block: 0.35rem; }
.countdown__item {
  display: grid; justify-items: center; min-width: 64px;
  padding: 0.6rem 0.5rem;
  background: var(--poco-suave);
  border: 1px solid var(--color-surface-border);
  border-radius: var(--radius-sm);
}
.countdown__num {
  font-family: var(--font-display);
  font-size: var(--text-headline);
  font-weight: var(--peso-display);
  font-variant-numeric: tabular-nums;
  line-height: var(--lh-headline);
}
.countdown__label { font-size: var(--text-label); font-weight: var(--peso-forte); text-transform: uppercase; letter-spacing: var(--ls-label); color: var(--color-text-muted); }

/* Card de evento */
.evento-card {
  overflow: hidden; display: flex; flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-surface-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  transition: transform var(--transition), border-color var(--transition);
}
.evento-card:hover { transform: translateY(-4px); border-color: var(--veu-2); }
.evento-card__img { aspect-ratio: 1080 / 375; object-fit: cover; width: 100%; }
.evento-card__body { padding: 1.25rem 1.5rem 1.5rem; display: grid; gap: 0.5rem; justify-items: start; }
.evento-card__data { color: var(--color-accent); font-weight: var(--peso-forte); font-size: var(--text-label); text-transform: uppercase; letter-spacing: var(--ls-label); }
.evento-card__nome {
  font-family: var(--font-display);
  font-size: var(--text-lead);
  font-weight: var(--peso-display);
  line-height: var(--lh-headline);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  text-wrap: balance;
}
.evento-card__atracoes { color: var(--color-text-muted); font-size: var(--text-body); }
.evento-card .btn { margin-top: 0.5rem; }
.evento-card--passado { opacity: 0.55; }
.evento-card__tag {
  font-size: var(--text-label); font-weight: var(--peso-forte); text-transform: uppercase; letter-spacing: var(--ls-label);
  color: var(--color-text-muted);
}

/* Galeria (mosaico).
   auto-fit em vez de 4 colunas fixas: o número de fotos vai mudar quando as
   reais chegarem, e a grade se ajusta em vez de deixar células órfãs na última
   linha. Com 8 fotos ela fecha exata em qualquer largura. */
.galeria__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  grid-auto-flow: dense;
  gap: 0.85rem;
}
.galeria__item {
  position: relative; padding: 0; overflow: hidden; cursor: pointer;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-surface-border);
  background: var(--color-surface);
}
.galeria__item--destaque { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
.galeria__item img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 400ms ease, filter var(--transition);
}
.galeria__item::after { /* brilho no hover */
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, var(--poco-suave));
  opacity: 0; transition: opacity var(--transition);
}
.galeria__item:hover img, .galeria__item:focus-visible img { transform: scale(1.06); }
.galeria__item:hover::after, .galeria__item:focus-visible::after { opacity: 1; }

/* Lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 80;
  display: grid; place-items: center;
  background: var(--noite-lightbox);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  padding: clamp(1rem, 4vw, 3rem);
}
.lightbox__img {
  max-width: min(92vw, 900px); max-height: 86vh;
  object-fit: contain; border-radius: var(--radius-sm);
  box-shadow: 0 20px 80px var(--poco-fundo);
}
.lightbox__fechar {
  position: absolute; top: 1rem; right: 1rem;
  width: 48px; height: 48px; font-size: 1.4rem; line-height: 1;
  border-radius: 999px; background: var(--veu-1); color: #fff;
}
.lightbox__nav {
  position: absolute; top: 50%; translate: 0 -50%;
  width: 52px; height: 52px; font-size: 2rem; line-height: 1;
  border-radius: 999px; background: var(--veu-1); color: #fff;
  display: grid; place-items: center;
}
.lightbox__nav--prev { left: 1rem; }
.lightbox__nav--next { right: 1rem; }
.lightbox__fechar:hover, .lightbox__nav:hover { background: var(--veu-3); }

/* Chips (sobre) */
.chip {
  display: grid; gap: 0.15rem; text-align: center;
  padding: 1.25rem 1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-surface-border);
  border-radius: var(--radius);
}
.chip strong {
  font-family: var(--font-display);
  font-size: var(--text-lead);
  font-weight: var(--peso-display);
  line-height: var(--lh-headline);
  color: var(--color-accent);
}
.chip span { font-size: var(--text-label); color: var(--color-text-muted); }

/* Mapa */
.onde__mapa {
  position: relative; padding-bottom: 62%; height: 0; overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--color-surface-border);
  background: var(--color-surface);
}
.onde__mapa iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.onde__mapa-placeholder {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: var(--color-text-muted);
}

/* FAQ */
.faq__item {
  background: var(--color-surface);
  border: 1px solid var(--color-surface-border);
  border-radius: var(--radius-sm);
  padding: 0.25rem 1.25rem;
}
.faq__item summary {
  font-weight: var(--peso-forte); padding-block: 0.9rem;
  list-style: none; position: relative; padding-right: 2rem;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: '+'; position: absolute; right: 0.25rem; top: 50%; translate: 0 -50%;
  font-size: 1.4rem; font-weight: 400; color: var(--color-accent);
  transition: rotate var(--transition);
}
.faq__item[open] summary::after { rotate: 45deg; }
/* Media ia a 89ch em 1440px, o bloco de prosa mais largo da página */
.faq__item p { padding-bottom: 1rem; color: var(--color-text-muted); max-width: var(--medida-prosa); text-wrap: pretty; }
.faq__item a { color: var(--color-accent); }

/* CTA sticky (mobile) */
.sticky-cta {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 40;
  padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, transparent, var(--noite-92) 35%);
  display: none;
}
.sticky-cta .btn { width: 100%; }

/* Banner de consentimento.
   Era um cartão flutuante que cobria o CTA do hero em 390px e o deixava
   inclicável (sobreposição medida de 12.354px²). Agora é barra de rodapé de
   largura total, e o JS marca html.tem-consent para o hero recuar acima dela. */
.consent {
  position: fixed; z-index: 45; inset-inline: 0; bottom: 0;
  max-width: none; margin-inline: 0;
  border-radius: 0; border-inline: 0; border-bottom: 0;
  padding-bottom: calc(1.25rem + env(safe-area-inset-bottom));
  background: var(--noite-95);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--color-surface-border);
  border-radius: var(--radius);
  padding: 1.25rem; display: grid; gap: 0.9rem;
  box-shadow: var(--shadow-card);
}
.consent__wrap { width: min(100% - 2.5rem, var(--container-max)); margin-inline: auto; display: grid; gap: 0.9rem; }
.consent p { font-size: var(--text-label); color: var(--color-text-muted); }
.consent__acoes { display: flex; gap: 0.75rem; }
/* Enquanto o banner existe, o hero encolhe o suficiente para os CTAs ficarem acima dele */
html.tem-consent .hero { padding-bottom: var(--altura-consent, 10rem); }

/* Animação de entrada (respeitando reduced-motion via reset.css) */
/* Default é VISÍVEL. O JS adiciona .reveal para esconder e remove ao revelar,
   então quem não roda JS (crawler, impressão, aba oculta) vê o conteúdo. */
.reveal { opacity: 0; transform: translateY(18px); }
.destaque__card, .evento-card, .chip, .faq__item, .sobre__texto, .onde__wrap {
  transition: opacity 500ms ease, transform 500ms ease;
}
@media print { .reveal { opacity: 1 !important; transform: none !important; } }

/* ============================================================
   Efeitos estilo 21st.dev (CSS puro, adaptados ao Garden)
   Movimento sempre atrás de prefers-reduced-motion.
   ============================================================ */

/* 1. REMOVIDO em 2026-07-20: texto com gradiente animado na tagline do hero.
   Vivia em .hero__tagline .script, e o .script deixou de existir junto com a
   fonte script. Era violação de banimento absoluto do sistema, no elemento
   mais visível da página. Não reintroduzir. */

/* 2. Shine no CTA primário.
   Era loop infinito de 3,6s animando `left`, uma propriedade de LAYOUT, que
   dispara reflow a cada frame e queima bateria em celular de entrada. Agora
   usa transform (roda no compositor) e responde a hover/foco em vez de rodar
   sozinho. O glow de repouso já vem do --shadow-accent, então btn-glow saiu. */
.btn--primary { position: relative; overflow: hidden; }
.btn--primary:hover { box-shadow: 0 10px 40px var(--acento-glow-forte); }
@keyframes btn-shine { from { transform: translateX(0) skewX(-18deg); } to { transform: translateX(430%) skewX(-18deg); } }
@media (prefers-reduced-motion: no-preference) {
  .btn--primary.btn--lg::before {
    content: ''; position: absolute; top: 0; left: -60%;
    width: 60%; height: 100%; pointer-events: none;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.5), transparent);
    transform: translateX(0) skewX(-18deg);
  }
  .btn--primary.btn--lg:hover::before,
  .btn--primary.btn--lg:focus-visible::before {
    animation: btn-shine 900ms ease-out;
  }
}

/* 3a. Spotlight que segue o cursor nos cards de evento */
.evento-card { position: relative; }
.evento-card::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  opacity: 0; transition: opacity 0.25s ease;
  background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 50%), var(--acento-spotlight), transparent 60%);
}
.evento-card:hover::before { opacity: 1; }
.evento-card__img, .evento-card__body { position: relative; z-index: 2; }

/* 3b. Borda gradiente animada no card do próximo evento */
@property --a { syntax: '<angle>'; inherits: false; initial-value: 90deg; }
@keyframes border-spin { to { --a: 450deg; } }
.destaque__card { position: relative; }
.destaque__card::before {
  content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  padding: 1.5px; border-radius: inherit;
  background: conic-gradient(from var(--a, 90deg), var(--glow-roxo), var(--glow-magenta), var(--color-accent), var(--glow-roxo));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
/* Era loop infinito de 6s repintando um gradiente cônico inteiro a cada frame,
   o efeito mais caro da página. Estático em repouso, gira só no hover. */
@media (prefers-reduced-motion: no-preference) {
  .destaque__card:hover::before { animation: border-spin 6s linear infinite; }
}

/* 4. Marquee (esteira de prova social)
   A máscara e o overflow vivem no viewport, não no bloco, para o botão de pausa
   ficar fora do recorte e continuar legível na borda. */
.marquee {
  position: relative;
  margin-block: clamp(1.5rem, 5vw, 3rem); padding-block: 0.9rem;
  border-block: 1px solid var(--color-surface-border);
}
.marquee__viewport {
  overflow: hidden;
  -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
/* gap zero no track + padding no grupo mantém o translateX(-50%) exato */
.marquee__track { display: flex; gap: 0; width: max-content; }
.marquee__grupo { display: flex; gap: 1rem; padding-inline-end: 1rem; margin: 0; }
@keyframes marquee-scroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: no-preference) {
  .marquee__track { animation: marquee-scroll 30s linear infinite; }
  .marquee:hover .marquee__track,
  .marquee.is-paused .marquee__track { animation-play-state: paused; }
}

/* Controle de pausa: exigido por WCAG 2.2.2. O hover sozinho não serve,
   porque não alcança teclado nem toque, e o público é majoritariamente mobile.
   Só existe quando há movimento para pausar. */
.marquee__pausa { display: none; }
@media (prefers-reduced-motion: no-preference) {
  /* abre espaço à direita para as pílulas não passarem por baixo do botão */
  .marquee { padding-inline-end: 6.25rem; }
  .marquee__pausa {
    position: absolute; right: 0.75rem; top: 50%; translate: 0 -50%;
    display: grid; place-items: center;
    min-height: 44px; min-width: 44px; padding-inline: 0.9rem;
    border-radius: 999px;
    border: 1px solid var(--color-surface-border);
    background: var(--color-background);
    color: var(--color-text-muted);
    font-size: var(--text-label); font-weight: var(--peso-medio);
    transition: color var(--transition), border-color var(--transition);
  }
  .marquee__pausa:hover { color: var(--color-text); border-color: var(--veu-3); }
}
.marquee .pill {
  white-space: nowrap; padding: 0.5rem 1.15rem;
  border: 1px solid var(--color-surface-border); border-radius: 999px;
  background: var(--color-surface); color: var(--color-text);
  font-weight: var(--peso-medio); font-size: var(--text-body);
}
.marquee .pill b { color: var(--color-accent); }