/* Design system da Flux — portado da landing do CRM (/crm/), que é a
   referência visual do site desde 13/08/2026.

   Fonte da verdade dos tokens: ../flux-landing/src/index.css. Se mexer lá,
   mexer aqui. Dark é o padrão (:root); light entra por data-theme="light",
   gravado em localStorage("flux-theme") — a MESMA chave da landing, para o
   tema atravessar a navegação entre as páginas estáticas e /crm/.

   As classes antigas (text-cyan-200, bg-white/[0.05], text-slate-300…) não
   foram reescritas: a paleta do Tailwind é que foi remapeada para estes
   tokens em assets/js/tailwind-config.js. */

:root {
  color-scheme: dark;

  --page: 222 39% 5.5%;
  --primary: 226 87.2% 66.3%;
  --primary-foreground: 0 0% 100%;

  --surface: 221.3 26.7% 11.8%;
  --surface-muted: 222 26.3% 14.9%;
  --surface-soft: 222 25% 13.5%;
  --surface-hover: 222 25% 18.2%;
  --surface-action: 217 23% 15.3%;
  --chip: 222 25% 18.2%;

  --hairline: 222 21.5% 21%;
  --border-soft: 222 21% 18.8%;
  --border-lighter: 222 21.5% 21%;
  --border-muted: 221 21% 22%;

  --ink-strong: 210 40% 98%;
  --ink-secondary: 219 22% 76.9%;
  --ink-muted: 215 20% 65%;
  --ink-dark: 218 27% 83.9%;
  --ink-light: 219 17% 56.3%;

  --tone-success: 148 70% 48%;
  --tone-success-fg: 148 72% 67%;
}

:root[data-theme="light"] {
  color-scheme: light;

  --page: 0 0% 100%;

  --surface: 0 0% 100%;
  --surface-muted: 228 55.6% 98.2%;
  --surface-soft: 228 38.5% 97.5%;
  --surface-hover: 222 100% 96.7%;
  --surface-action: 228 100% 98%;
  --chip: 216 15% 93.5%;

  --hairline: 222.9 17.9% 92.4%;
  --border-soft: 220 13% 91%;
  --border-lighter: 220 9% 93.5%;
  --border-muted: 214 32% 91%;

  --ink-strong: 222 47% 11.2%;
  --ink-secondary: 215 19% 34.5%;
  --ink-muted: 215 16% 47%;
  --ink-dark: 215 25% 26.7%;
  --ink-light: 215 20% 65%;

  --tone-success: 148.1 79.4% 38%;
  --tone-success-fg: 148 79% 30%;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: hsl(var(--page));
  color: hsl(var(--ink-strong));
  font-family: Outfit, ui-sans-serif, system-ui, sans-serif;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* As páginas antigas marcavam corpo e títulos com estas duas classes; agora
   as duas são Outfit (uma fonte só no site inteiro, como na landing). */
.font-geist,
.font-jakarta {
  font-family: Outfit, ui-sans-serif, system-ui, sans-serif !important;
}

/* Fundo do site: no dark, os glows azuis da marca; no light, branco puro —
   a regra "sem manchas no claro" que vale na landing vale aqui. */
.site-bg {
  background:
    radial-gradient(circle at 50% -10%, hsl(var(--primary) / 0.18), transparent 38%),
    radial-gradient(circle at 82% 16%, hsl(var(--primary) / 0.1), transparent 30%),
    linear-gradient(180deg, hsl(226 40% 8%) 0%, hsl(var(--page)) 45%, hsl(var(--page)) 100%);
}
:root[data-theme="light"] .site-bg {
  background: hsl(var(--page));
}
/* Textura de ruído: quase invisível no dark, atrapalha no branco */
:root[data-theme="light"] .site-noise {
  display: none;
}
/* O fundo WebGL do herói é feito de traços luminosos sobre preto (blend
   screen): no branco vira borrão cinza, então some — mesma regra dos glows. */
:root[data-theme="light"] #webgl-canvas {
  display: none;
}

/* Vidros (iguais aos da landing) */
.glass-panel {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.03) 55%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 12px 32px rgba(0, 0, 0, 0.25);
}
.glass-strong {
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.045) 60%);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(28px) saturate(170%);
  -webkit-backdrop-filter: blur(28px) saturate(170%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 16px 40px rgba(0, 0, 0, 0.3);
}
.glass-fluid {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.17), rgba(255, 255, 255, 0.06) 62%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(32px) saturate(180%);
  -webkit-backdrop-filter: blur(32px) saturate(180%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 20px 50px rgba(0, 0, 0, 0.35);
}
:root[data-theme="light"] .glass-panel {
  background: rgba(255, 255, 255, 0.32);
  border-color: rgba(255, 255, 255, 0.7);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.1);
}

/* No tema claro, o vidro da landing vive sobre glows coloridos. Aqui as
   seções internas são branco puro: vidro branco sobre branco desaparece e a
   página fica "chapada". Então, SÓ no claro, os cards ganham uma borda de
   tinta e sombra de verdade — continuam de vidro, mas se destacam. */
:root[data-theme="light"] .glass-fluid,
:root[data-theme="light"] .glass-strong,
:root[data-theme="light"] .glass-panel {
  border-color: rgba(15, 23, 42, 0.07);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 14px 34px rgba(15, 23, 42, 0.07);
}
:root[data-theme="light"] .glass-fluid {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.9), rgba(248, 249, 253, 0.75) 62%);
}
:root[data-theme="light"] .glass-strong,
:root[data-theme="light"] .glass-panel {
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.92), rgba(248, 249, 253, 0.8) 60%);
}
/* (as versões translúcidas da landing ficavam AQUI e sobrescreviam o bloco
   acima — no site elas somem sobre o branco, então foram removidas) */

/* No claro, sombra preta pesada das páginas antigas vira sombra de tinta */
:root[data-theme="light"] [class*="shadow-black"] {
  --tw-shadow-color: rgba(15, 23, 42, 0.1);
  --tw-shadow: var(--tw-shadow-colored);
}

/* --------------------------------------------------------------------
   Efeitos do herói — os mesmos da landing (ver assets/js/flux-fx.js).
   -------------------------------------------------------------------- */

/* Grade sutil do fundo (attio): usa o token de borda, serve nos 2 temas */
.bg-hero-grid {
  background-image:
    linear-gradient(hsl(var(--border-lighter) / 0.55) 1px, transparent 1px),
    linear-gradient(90deg, hsl(var(--border-lighter) / 0.55) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black 40%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black 40%, transparent 100%);
}

/* Blobs de aurora: radial-gradient com transform animado. NUNCA animar
   filter: blur() — repinta a página inteira e treme (lição da landing). */
.aurora-blob {
  will-change: transform;
  animation: aurora-drift 16s ease-in-out infinite alternate;
}
.aurora-blob-slow {
  will-change: transform;
  animation: aurora-drift 22s ease-in-out infinite alternate-reverse;
}
@keyframes aurora-drift {
  from { transform: translate3d(-6%, -4%, 0) scale(1); }
  to { transform: translate3d(6%, 8%, 0) scale(1.15); }
}

/* Glows coloridos de fundo somem no claro (regra "sem manchas no claro"). */
:root[data-theme="light"] .glow-primary,
:root[data-theme="light"] .glow-accent {
  display: none;
}

/* Caret da digitação do título */
.flux-caret {
  display: inline-block;
  width: 3px;
  height: 0.9em;
  margin-left: 0.15rem;
  transform: translateY(0.12em);
  border-radius: 999px;
  background: hsl(var(--primary));
  animation: flux-caret 0.5s steps(1) 3;
}
@keyframes flux-caret {
  50% { opacity: 0; }
}

/* Partículas subindo no herói */
.flux-particula {
  position: absolute;
  top: 72%;
  border-radius: 999px;
  background: hsl(var(--primary));
  opacity: 0;
  animation-name: flux-particula;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
@keyframes flux-particula {
  0% { transform: translateY(0); opacity: 0; }
  20% { opacity: 0.5; }
  100% { transform: translateY(-560px); opacity: 0; }
}

/* --------------------------------------------------------------------
   Entrada do herói — a mesma sequência da landing: título digitado →
   subtítulo → CTA e canais → o trio de cards chegando "de longe".
   -------------------------------------------------------------------- */
[data-flux-enter] {
  opacity: 0;
  transform: translateY(24px);
}
[data-flux-enter].is-in {
  opacity: 1;
  transform: none;
  transition:
    opacity 850ms cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0ms),
    transform 850ms cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0ms);
}
/* Cards: escala menor + tilt 3D, assentando no plano (como no hero do CRM) */
[data-flux-enter="cards"] {
  transform: translateY(100px) scale(0.78) rotateX(26deg);
  transform-origin: center top;
}
[data-flux-enter="cards"].is-in {
  transition:
    opacity 1150ms cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0ms),
    transform 1150ms cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0ms);
}
@media (prefers-reduced-motion: reduce) {
  [data-flux-enter] {
    opacity: 1;
    transform: none;
  }
}

/* Seta circular no canto do card (a CornerArrow da landing): círculo branco
   com glifo escuro, literal nos dois temas. */
.flux-corner {
  background: rgba(255, 255, 255, 0.9);
  color: #0f172a;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  transition: transform 0.3s ease;
}
a:hover .flux-corner {
  transform: scale(1.1);
}

/* "Agente digitando" da prévia de conversa */
.flux-dots {
  display: inline-flex;
  gap: 3px;
}
.flux-dots i {
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: hsl(var(--ink-muted));
  animation: flux-dots 1.2s ease-in-out infinite;
}
.flux-dots i:nth-child(2) { animation-delay: 0.15s; }
.flux-dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes flux-dots {
  0%, 60%, 100% { opacity: 0.35; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-2px); }
}

/* Cards com tilt em camada própria: sem isso, o backdrop-filter do vidro
   repinta o que está atrás a cada frame e as linhas finas (grade do herói,
   bordas de 1px) cintilam. */
[data-flux-tilt] {
  backface-visibility: hidden;
  transform: translateZ(0);
}

/* Thumb do CTA: branco literal nos dois temas (o `bg-white` do Tailwind
   aponta para a tinta forte, que no claro é quase preta). */
.flux-thumb {
  background: #fff;
}

/* Conteúdo sobre fundo da marca (esferas, pílulas azuis): branco literal nos
   dois temas. `text-white` do Tailwind aponta para a tinta forte, que no tema
   claro é quase preta — dentro de um círculo azul isso vira um ícone escuro. */
.flux-on-brand {
  color: #fff;
}

/* Carrossel infinito dos canais no herói (o da landing): 7 chips de 28px com
   8px de gap = 252px por volta, esmaecendo nas duas bordas. */
.flux-marquee {
  mask-image: linear-gradient(90deg, transparent, black 18%, black 82%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 18%, black 82%, transparent);
}
.flux-marquee-track {
  animation: flux-marquee 16s linear infinite;
}
@keyframes flux-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-252px); }
}
@media (prefers-reduced-motion: reduce) {
  .flux-marquee-track { animation: none; }
}

/* Flutuação ambiente (data-flux-float) */
@keyframes flux-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* Botão primário: leve subida no hover, como na landing */
[class*="bg-cyan-100"],
[class*="bg-primary"] {
  transition: transform 0.3s ease, filter 0.3s ease, box-shadow 0.3s ease;
}
[class*="bg-cyan-100"]:hover,
[class*="bg-primary"]:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
}

/* Cabeçalho: pílula de vidro como na landing, em vez da barra sólida */
.site-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 50;
}
.site-header-inner {
  margin: 0.75rem auto 0;
  display: flex;
  max-width: 1200px;
  align-items: center;
  justify-content: space-between;
  border-radius: 14px;
  padding: 0.625rem 1.25rem;
  transition: all 0.3s ease;
  border: 1px solid transparent;
}
.site-header[data-scrolled="true"] .site-header-inner {
  margin-inline: 1rem;
}
@media (min-width: 1024px) {
  .site-header[data-scrolled="true"] .site-header-inner {
    margin-inline: auto;
  }
}
/* Compensa o header fixo (as páginas antigas usavam header sticky no fluxo) */
body {
  padding-top: 4.5rem;
}

/* Maquetes dentro dos cards ("Infraestrutura legada", "Ativação lenta"…):
   a linha de painéis é mais larga que o card e era cortada pelo
   overflow-hidden. Encolhe proporcionalmente em vez de espremer o painel
   central. */
.flux-mockup-row {
  /* a escala real é medida em flux-fx.js (ajustarMaquetes) */
  transform-origin: left center;
}