/* SSN — CSS complementar ao Tailwind compilado (site.css).
 * Estados que no site original eram trocados pelo React agora são
 * atributos/classes controlados por js/site.js.
 */

[hidden] { display: none !important; }

/* ---------- Reveal on scroll ---------- */
/* O Tailwind compilou `transition-[opacity,transform]`, mas o deslocamento
 * usa a propriedade `translate` (v4) e por isso "pulava" sem animar. */
[data-reveal] { transition-property: opacity, translate, transform; }
[data-reveal].is-visible {
  opacity: 1 !important;
  translate: 0 0 !important;
  pointer-events: auto !important;
}

/* ---------- Header: tema claro sobre seções amarelas ---------- */
[data-site-header] { transition: background-color .3s, border-color .3s; }
[data-site-header][data-theme="light"] {
  background-color: rgba(0, 0, 0, .22);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  border-bottom-color: rgba(0, 0, 0, .15);
}
[data-site-header][data-theme="light"] [data-logo] { filter: brightness(0); }
[data-site-header][data-theme="light"] .header-nav-link { color: #101115; }
[data-site-header][data-theme="light"] .header-nav-link:hover,
[data-site-header][data-theme="light"] .header-nav-link:focus-visible { color: #000; }
[data-site-header][data-theme="light"] .header-nav-link[aria-current="page"] { color: #000; font-weight: 500; }
[data-site-header][data-theme="light"] [data-header-cta] {
  background-color: #0a0a0a !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1);
}
[data-site-header][data-theme="light"] [data-header-cta]:hover {
  background-color: #000 !important;
  color: #ceff00 !important;
  filter: none;
}
[data-site-header][data-theme="light"] [data-menu-toggle] { color: #000; }
[data-site-header][data-theme="light"] [data-menu-toggle]:hover { color: #262626; background-color: rgba(0, 0, 0, .05); }
.header-nav-link[aria-current="page"] { color: #ceff00; }

/* ---------- Menu mobile ---------- */
/* No original o menu só existia no DOM quando aberto (classes nunca compiladas);
 * aqui as medidas vêm da mesma variável usada pelo header. */
#mobile-navigation-menu {
  position: fixed;
  left: 0; right: 0;
  top: var(--header-height);
  bottom: 0;
  height: calc(100dvh - var(--header-height));
  background: #07090c;
  z-index: 40;
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
}
#mobile-navigation-menu nav { margin: 1rem 0 2.5rem; }
#mobile-navigation-menu ul { display: flex; flex-direction: column; align-items: stretch; gap: 1rem; width: 100%; }
#mobile-navigation-menu .header-nav-link { font-size: 1.125rem; }
@media (min-width: 1440px) { #mobile-navigation-menu { display: none !important; } }
@keyframes ssn-menu-in { from { opacity: 0; translate: 0 -1rem; } to { opacity: 1; translate: 0 0; } }
#mobile-navigation-menu.menu-enter { animation: ssn-menu-in .2s ease-out both; }

/* ---------- Comparação antes/depois (hover espelhado) ---------- */
[data-cmp-kind="before"][data-hover] {
  background-color: rgba(193, 81, 81, .1) !important;
  border-color: #cd7c7c !important;
  opacity: 1 !important;
}
[data-cmp-kind="before"][data-hover] :is(span, div) { color: #cd7c7c !important; }
[data-cmp-kind="after"][data-hover] {
  background-color: rgba(180, 255, 105, .15) !important;
  border: 2px solid #ceff00 !important;
  box-shadow: 0 0 25px rgba(206, 255, 0, .25);
  opacity: 1 !important;
}
[data-cmp-kind="after"][data-hover] :is(span, div) { color: #ceff00 !important; }

/* ---------- Logos SVG inline ---------- */
[data-inline-logo] svg { height: 100%; width: auto; max-height: 100%; }
[data-inline-logo-hero] svg { width: 100%; height: auto; }

/* ---------- Modal de vídeo ---------- */
@keyframes ssn-fade-in { from { opacity: 0; } to { opacity: 1; } }
#cinematic-modal:not([hidden]) { animation: ssn-fade-in .3s ease-out both; }

/* ---------- Widget de agendamento do HubSpot ---------- */
[data-hubspot-meetings] { width: 100%; background: #fff; border-radius: 12px; overflow: hidden; }
[data-hubspot-meetings] .meetings-iframe-container { width: 100%; min-height: 640px; }
[data-hubspot-meetings] .meetings-iframe-container iframe { display: block; width: 100% !important; max-width: 100%; border: 0; border-radius: 12px; }
/* abaixo do desktop o card ocupa a largura toda para o iframe do HubSpot caber */
@media (max-width: 1439px) {
  [data-booking-card] { max-width: 100% !important; padding: .75rem !important; }
  [data-booking-card] > div:first-child { padding-top: .5rem; }
}

/* ---------- Ajustes de performance / acessibilidade ---------- */
/* Os blobs do hero são 5 camadas com blur(125px) + mix-blend-mode animadas em
 * loop; isolá-las em camadas próprias evita repintar a seção inteira. */
[data-blob] { will-change: transform, margin; transform: translateZ(0); }
.animate-marquee { will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { transition: none !important; }
  .animate-marquee, .e1, .e2, .e3, .e4, .e5, .animate-bounce, .animate-pulse { animation: none !important; }
}