/* ==========================================================================
   YouSeller — Estilos da página inicial
   --------------------------------------------------------------------------
   Os tokens de cor, a tipografia de display, as costuras entre seções e os
   primitivos (.btn-premium, .btn-ghost, .ys-card) vivem em brand.css, que é
   carregado ANTES deste arquivo. Aqui ficam apenas os componentes próprios
   desta página.
   ========================================================================== */

/* 1. BASE */
html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  /* Evita o "pulo" da tela quando um modal ou menu abre */
  overflow-y: scroll;
}

/* 2. HEADER — vidro escuro sobre o índigo do hero */
#header {
  background: transparent !important;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

#header.header-scrolled {
  background: rgba(11, 4, 32, 0.92) !important;
  backdrop-filter: blur(30px) saturate(200%);
  -webkit-backdrop-filter: blur(30px) saturate(200%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.09) !important;
  box-shadow: 0 10px 40px -10px rgba(7, 3, 26, 0.7);
}

/* O logotipo é uma imagem: o brilho vem de drop-shadow, não de text-shadow */
.header-logo {
  filter: drop-shadow(0 0 14px rgba(0, 200, 127, 0.28));
  transition: filter 0.3s ease;
}

a:hover > .header-logo {
  filter: drop-shadow(0 0 20px rgba(0, 200, 127, 0.45));
}

.header-tagline {
  color: rgba(255, 255, 255, 0.4) !important;
  border-left-color: rgba(255, 255, 255, 0.1) !important;
}

.header-link {
  color: rgba(255, 255, 255, 0.62) !important;
  transition: color 0.3s ease;
}

.header-link:hover {
  color: #ffffff !important;
}

#mobile-menu-btn { color: rgba(255, 255, 255, 0.7) !important; }
#mobile-menu-btn:hover { color: #ffffff !important; }

/* 3. TEXTO EM GRADIENTE ANIMADO (títulos de seção) */
@keyframes gradient-x {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

#all-in-one .bg-clip-text.bg-gradient-to-r,
#pricing .bg-clip-text.bg-gradient-to-r {
  background-size: 200% 200%;
  animation: gradient-x 5s ease infinite;
}

/* 4. CARTÕES DE FUNCIONALIDADE — lanterna de menta seguindo o cursor */
.feature-card {
  position: relative;
  overflow: hidden;
}

.feature-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    400px circle at var(--x) var(--y),
    rgba(0, 200, 127, 0.14),
    transparent 40%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.feature-card:hover::before { opacity: 1; }

/* 5. ACORDEÃO DO FAQ (animação de grid-template-rows) */
.faq-content {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 300ms cubic-bezier(0.4, 0, 0.2, 1), padding 300ms ease;
  padding-top: 0;
  padding-bottom: 0;
  opacity: 0;
}

.faq-content.is-open {
  grid-template-rows: 1fr;
  padding-top: 0.5rem;
  padding-bottom: 1.25rem;
  opacity: 1;
}

/* O wrapper interno precisa de overflow hidden para a animação funcionar */
.faq-content > div { overflow: hidden; }

.faq-btn .faq-icon {
  display: inline-block;
  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1), color 300ms ease;
}

.faq-btn[aria-expanded="true"] .faq-icon {
  transform: rotate(45deg);
  color: #0E1230;
}

/* 6. MICRO-INTERAÇÕES DA CALCULADORA DE LICENÇAS */
.pricing-value-bump {
  animation: pricing-bump 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes pricing-bump {
  0%   { transform: scale(1);    filter: saturate(1); }
  45%  { transform: scale(1.08); filter: saturate(1.25); }
  100% { transform: scale(1);    filter: saturate(1); }
}

.pricing-flash { animation: pricing-flash 300ms ease; }

@keyframes pricing-flash {
  0%   { color: #ffffff; }
  40%  { color: #21E39B; }
  100% { color: inherit; }
}

/* ==========================================================================
   7. BOTÃO FLUTUANTE DO WHATSAPP
   ========================================================================== */
.whatsapp-float {
  position: fixed;
  bottom: 32px;
  right: 32px;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  outline: none;
  animation: whatsapp-float-enter 0.8s cubic-bezier(0.23, 1, 0.32, 1) forwards;
  opacity: 0;
  transform: translateY(20px) scale(0.9);
}

@media (max-width: 768px) {
  .whatsapp-float { bottom: 20px; right: 20px; }
}

.whatsapp-float:focus-visible {
  outline: 2px solid #00C87F;
  outline-offset: 4px;
}

.whatsapp-float-inner {
  position: relative;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, #21E39B 0%, #00C87F 55%, #04A468 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.1),
    0 4px 20px rgba(0, 200, 127, 0.4),
    0 8px 40px rgba(0, 200, 127, 0.2),
    0 0 60px rgba(0, 200, 127, 0.28);
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  overflow: hidden;
}

.whatsapp-icon {
  width: 28px;
  height: 28px;
  color: #04231A;
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  flex-shrink: 0;
}

.whatsapp-float:hover .whatsapp-float-inner {
  transform: translateY(-4px) scale(1.05);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.15),
    0 8px 30px rgba(0, 200, 127, 0.5),
    0 16px 60px rgba(0, 200, 127, 0.3),
    0 0 80px rgba(0, 200, 127, 0.4);
}

.whatsapp-float:hover .whatsapp-icon { transform: scale(1.1); }

/* Pulso */
.whatsapp-pulse {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(0, 200, 127, 0.4);
  animation: whatsapp-pulse 2.5s ease-in-out infinite;
  pointer-events: none;
  z-index: -1;
}

.whatsapp-float:hover .whatsapp-pulse {
  animation: whatsapp-pulse-hover 2s ease-in-out infinite;
}

/* Balão */
.whatsapp-tooltip {
  position: absolute;
  bottom: calc(100% + 16px);
  right: 0;
  background: rgba(11, 4, 32, 0.92);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 10px 16px;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(10px);
  animation: whatsapp-tooltip-show 0.5s ease-out 3s forwards;
  pointer-events: none;
  box-shadow: 0 8px 32px rgba(7, 3, 26, 0.5);
}

.whatsapp-tooltip::after {
  content: '';
  position: absolute;
  bottom: -6px;
  right: 24px;
  width: 12px;
  height: 12px;
  background: rgba(11, 4, 32, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
}

.whatsapp-tooltip-text {
  color: #ffffff;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.whatsapp-float:hover .whatsapp-tooltip {
  opacity: 0;
  transform: translateY(10px);
  animation: none;
}

@keyframes whatsapp-float-enter {
  0%   { opacity: 0; transform: translateY(20px) scale(0.9); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes whatsapp-pulse {
  0%   { transform: translate(-50%, -50%) scale(1);   opacity: 0.6; }
  50%  { transform: translate(-50%, -50%) scale(1.5); opacity: 0.3; }
  100% { transform: translate(-50%, -50%) scale(2);   opacity: 0; }
}

@keyframes whatsapp-pulse-hover {
  0%   { transform: translate(-50%, -50%) scale(1);   opacity: 0.8; }
  50%  { transform: translate(-50%, -50%) scale(1.3); opacity: 0.4; }
  100% { transform: translate(-50%, -50%) scale(1.6); opacity: 0; }
}

@keyframes whatsapp-tooltip-show {
  0%   { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* 8. MOVIMENTO REDUZIDO */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .whatsapp-float,
  .whatsapp-float-inner,
  .whatsapp-icon,
  .whatsapp-pulse,
  .whatsapp-tooltip,
  .feature-card::before,
  .faq-content {
    animation: none;
    transition: none;
  }

  .whatsapp-float { opacity: 1; transform: none; }
  .whatsapp-tooltip { opacity: 1; transform: none; }

  #all-in-one .bg-clip-text.bg-gradient-to-r,
  #pricing .bg-clip-text.bg-gradient-to-r {
    animation: none;
  }
}