/* Site institucional do Banket — estilos próprios das páginas.
   Tokens e componentes (.bk-*) vêm de design-system.css; aqui ficam só os estados que o JS liga e desliga
   e o comportamento responsivo. Os estilos em linha do HTML vencem as regras comuns: por isso os !important. */

html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg-app); color: var(--text-body); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: var(--text-link); }
a:hover { color: var(--text-link-hover); }
::selection { background: var(--terracotta-100); }
[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* O logo leva a #produto: a margem compensa o cabeçalho fixo e a página volta ao topo de verdade. */
#produto { scroll-margin-top: 73px; }

/* Hover */
.hover-acento:hover { color: var(--terracotta-700) !important; }
.hover-card:hover { border-color: var(--border-strong) !important; box-shadow: var(--shadow-md) !important; }
.hover-sublinhado:hover { text-decoration: underline !important; text-underline-offset: 3px !important; }

/* Cabeçalho */
.site-menu-btn { display: none; }
.site-menu { display: none; }
@media (max-width: 959px) {
  .site-nav, .site-entrar { display: none !important; }
  .site-menu-btn { display: inline-flex; }
  .site-menu { display: flex; flex-direction: column; padding: 4px clamp(20px, 4vw, 40px) 16px; border-top: 1px solid var(--border-subtle); background: var(--bg-app); }
  .site-menu a { padding: 14px 0; border-bottom: 1px solid var(--border-subtle); font-size: 16px; font-weight: var(--fw-medium); color: var(--text-body); text-decoration: none; }
  .site-menu a:last-child { border-bottom: 0; }
  .site-header-barra { gap: 12px !important; }
}
@media (max-width: 419px) {
  .site-cta { display: none !important; }
}

/* Hero: cartões flutuantes só em telas largas */
@media (max-width: 1279px) { .hero-float { display: none !important; } }
.hero-toast { opacity: 0; transform: translateY(12px); }
.hero-toast.is-on { opacity: 1; transform: translateY(0); }
.hero-toast.is-out { transform: translateY(-12px); }

/* Como funciona: passos */
.tour-step { border: 1px solid transparent; background: transparent; box-shadow: none; }
.tour-step.is-active { border-color: var(--border-default); background: var(--bg-surface); box-shadow: var(--shadow-md); }
.tour-num { color: var(--text-muted); }
.tour-step.is-active .tour-num { color: var(--terracotta-600); }
.tour-step:not(.is-active) .tour-desc,
.tour-step:not(.is-active) .tour-prog { display: none !important; }

/* Planos */
#btn-comparar svg { transition: transform var(--dur-base) var(--ease-out); }
#btn-comparar[aria-expanded='true'] svg { transform: rotate(180deg); }

/* Dúvidas */
.faq-item.is-open .faq-chev { transform: rotate(180deg); }

/* Fotos: .foto-slot é o espaço reservado; ao ter a imagem, troque por <img class="foto" src="assets/fotos/…" alt="…"> */
.foto-slot { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--clay-400); }
.foto-slot span { display: none; }
.foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }