/* =========================
   IA Sales — styles.css
   (animações otimizadas + utilitários escopados)
   ========================= */

/* -------- Core / Variáveis -------- */
:root {
  --brand:#5E17EB;
  --brand-2:#24d8ff;
  --ink:#0f172a;            /* slate-900 */
  --ink-2:#1f2937;          /* gray-800 */
  --card:#ffffff;
  --ring:#e5e7eb;           /* gray-200 */
}
html { scroll-behavior:smooth; }
section[id] { scroll-margin-top:80px; } /* âncoras do menu fixo */

/* -------- Acessibilidade: reduz animação -------- */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* -------- Animações base -------- */
@keyframes fadeIn { to { opacity:1; } }
@keyframes slideUp { to { opacity:1; transform:translateY(0); } }
@keyframes floatCard { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-6px);} }
@keyframes glowLine { 0%,100%{opacity:0;} 50%{opacity:1;} }

.animate-fadeIn   { opacity:0; animation:fadeIn .8s ease forwards; }
.animate-slideUp  { opacity:0; transform:translateY(16px); animation:slideUp .7s ease forwards; }
.delay-200 { animation-delay:.2s; }
.delay-400 { animation-delay:.4s; }
.delay-600 { animation-delay:.6s; }

/* -------- Efeitos escopados (sem poluir .group global) -------- */
.hover-float-card {
  will-change: transform;
  transition: transform .25s ease, box-shadow .25s ease;
}
.hover-float-card:hover { transform: translateY(-6px); }

.hover-neon {
  position: relative;
  isolation: isolate;
  transition: box-shadow .25s ease, transform .25s ease;
}
.hover-neon::before {
  content:"";
  position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  opacity:0; transition: opacity .25s ease;
  background:
    radial-gradient(220px 160px at 20% 10%, rgba(94,23,235,.22), transparent 60%),
    radial-gradient(220px 160px at 80% 90%, rgba(94,23,235,.16), transparent 60%);
}
.hover-neon:hover::before { opacity:1; }
.hover-neon:hover { transform: translateY(-4px); box-shadow: 0 20px 60px rgba(0,0,0,.12); }

.ring-brand-hover { transition: box-shadow .25s ease, border-color .25s ease; }
.ring-brand-hover:hover { box-shadow: 0 0 0 1px rgba(94,23,235,.6); }

/* linha superior “viva” sem reflow */
.glow-top {
  position: relative; isolation:isolate;
}
.glow-top::after {
  content:""; position:absolute; left:0; top:0; height:2px; width:100%;
  background: linear-gradient(90deg, rgba(94,23,235,.0), rgba(94,23,235,.7), rgba(94,23,235,.0));
  border-top-left-radius:inherit; border-top-right-radius:inherit;
  opacity:.0; transform-origin:left; transform: scaleX(0);
  transition: transform .35s ease, opacity .35s ease;
}
.glow-top:hover::after { opacity:1; transform: scaleX(1); }

/* versão pulsante opcional (aplicar junto de .glow-top) */
.animate-glow-line { animation: glowLine 6s ease-in-out infinite; }

/* -------- Demo (abas) -------- */
.demo-tab.active {
  background-color:#0f172a !important;
  color:#fff !important;
  border:none !important;
  transform:scale(1.02);
}
.demo-panel {
  opacity:1; transition: opacity .35s ease;
  position: relative;
}
.demo-panel.hidden {
  opacity:0; pointer-events:none; position:absolute; inset:0;
}

/* Conteúdo sem scroll horizontal */
.demo-content {
  max-height: 470px;
  overflow-y: auto;
  overflow-x: hidden;
  white-space: pre-wrap;             /* evita scroll horizontal no <pre> */
  word-break: break-word;
}

/* Sidebar sticky (desktop) */
@media (min-width:1024px){
  .demo-sidebar { position: sticky; top: 24px; }
}

/* Tabs compactas e sticky no mobile (não tampa a tela) */
@media (max-width: 767px){
  .demo-mobile-tabs {
    position: sticky;
    top: calc(var(--navH,64px) + 8px);
    z-index: 30;
    background: rgba(255,255,255,.9);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-radius: 16px;
    padding: 8px;
    margin-bottom: 8px;
  }
  .demo-mobile-tabs > .demo-tab {
    flex: 1 1 auto;
    white-space: nowrap;
    font-size: .85rem;
  }
}

/* -------- Utilitários -------- */
.no-scrollbar::-webkit-scrollbar { display:none; }
.no-scrollbar { -ms-overflow-style:none; scrollbar-width:none; }

.soft-shadow { box-shadow: 0 10px 30px rgba(0,0,0,.08); }

/* Cartões da área de integrações/topo — aplicar classes:
   `hover-float-card hover-neon ring-brand-hover` para o efeito completo */

/* Evita auto-zoom em inputs no iOS (precisam ter >=16px) */
@supports (-webkit-touch-callout: none) {
  input, select, textarea {
    font-size: 16px !important;
  }
}

/* Evita double-tap zoom em botões/links */
button, a, [role="button"] {
  touch-action: manipulation;
}

/* Melhora o ajuste de texto no iOS, sem “zoomar” */
html { -webkit-text-size-adjust: 100%; }