/* Tokens do design system (§8.2 do PROMPT-MESTRE). Única fonte de cores, tipografia,
   raios, sombras, durações e easings do site e do app. */
:root {
  /* Cores — superfícies */
  --canvas: #F7F7FA;         /* fundo das páginas */
  --surface: #FFFFFF;        /* cartões, campos, cabeçalho rolado */
  --surface-2: #F1F1F6;      /* seções alternadas */
  --line: #E4E4EC;           /* bordas e divisórias */
  --line-strong: #CFCFDB;    /* borda de campo, hover de borda */

  /* Cores — texto */
  --ink: #0E0A2B;            /* texto principal (azul-marinho da marca) */
  --ink-2: #5C5C70;          /* texto secundário (contraste 6:1 sobre --canvas) */
  --ink-3: #8D8DA1;          /* só placeholder e desabilitado (não usar em texto corrido) */

  /* Cores — destaque (mesmo violeta do CRM) */
  --accent: #7C3AED;         /* botão principal, link, um detalhe por seção */
  --accent-hover: #6D28D9;
  --accent-press: #5B21B6;
  --accent-soft: #F0ECFE;    /* fundo de selo, chip, item ativo */
  --accent-ink: #FFFFFF;     /* texto sobre --accent (contraste 5,7:1) */

  /* Cores — estados */
  --success: #059669;  --success-soft: #E7F7F1;
  --warning: #B45309;  --warning-soft: #FEF3E2;
  --danger:  #DC2626;  --danger-soft:  #FDECEC;
  --whatsapp: #25D366; --whatsapp-ink: #0B3D1F;

  /* Cores — área escura (rodapé e faixa final) */
  --night: #0E0A2B;
  --night-2: #1A1640;
  --night-ink: #FFFFFF;
  --night-ink-2: rgb(255 255 255 / 0.72);
  --night-line: rgb(255 255 255 / 0.12);

  /* Foco */
  --focus-ring: 0 0 0 3px rgb(124 58 237 / 0.35);

  /* Tipografia */
  --font-sans: "Inter Variable", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-display: clamp(2.5rem, 1.6rem + 4vw, 5.5rem);   /* 40 → 88 px */
  --fs-h2: clamp(1.75rem, 1.2rem + 2.4vw, 3.5rem);     /* 28 → 56 px */
  --fs-h3: clamp(1.25rem, 1.05rem + 0.8vw, 1.75rem);   /* 20 → 28 px */
  --fs-h4: 1.125rem;                                   /* 18 px */
  --fs-body-lg: 1.1875rem;                             /* 19 px */
  --fs-body: 1.0625rem;                                /* 17 px */
  --fs-small: 0.9375rem;                               /* 15 px */
  --fs-caption: 0.8125rem;                             /* 13 px */
  --lh-tight: 1.04;  --lh-heading: 1.12;  --lh-body: 1.55;
  --ls-display: -0.035em;  --ls-heading: -0.025em;  --ls-body: -0.011em;  --ls-caption: 0.08em;

  /* Raios */
  --r-xs: 8px;  --r-sm: 12px;  --r-md: 16px;  --r-lg: 20px;  --r-xl: 28px;  --r-pill: 999px;

  /* Sombras (só aparecem por opacidade; nunca animar a sombra em si) */
  --shadow-sm: 0 1px 2px rgb(14 10 43 / 0.06);
  --shadow-md: 0 12px 32px -12px rgb(14 10 43 / 0.18);
  --shadow-lg: 0 24px 64px -24px rgb(14 10 43 / 0.25);

  /* Layout */
  --container: 1200px;
  --gutter: 16px;                                     /* 24px ≥ 768, 32px ≥ 1024 */
  --section-y: clamp(64px, 10vw, 128px);
  --header-h: 64px;

  /* Motion */
  --dur-instant: 120ms;
  --dur-fast: 180ms;
  --dur-base: 500ms;
  --dur-slow: 700ms;
  --dur-slower: 900ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in: cubic-bezier(0.55, 0, 1, 0.45);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  /* Mola suave: ~4,6% de passagem do ponto final. Usar com 500 ms. */
  --ease-spring: linear(0, 0.098, 0.306, 0.531, 0.726, 0.871, 0.965, 1.018, 1.042, 1.046, 1.040, 1.030, 1.020, 1.011, 1.005, 1.001, 0.999, 0.998, 0.998, 0.998, 1);
  --stagger: 70ms;

  /* Camadas */
  --z-base: 0; --z-raised: 10; --z-header: 100; --z-float: 200; --z-overlay: 300; --z-modal: 400; --z-toast: 500;
}
@media (min-width: 768px)  { :root { --gutter: 24px; } }
@media (min-width: 1024px) { :root { --gutter: 32px; --header-h: 72px; } }
@supports not (transition-timing-function: linear(0, 1)) {
  :root { --ease-spring: cubic-bezier(0.34, 1.3, 0.64, 1); }
}

/* Complementos: valores que o PROMPT-MESTRE cita fora do §8.2 (§8.6 e §9),
   reunidos aqui para nenhum componente usar valor solto (regra 9). */
:root {
  --overlay: rgb(14 10 43 / 0.48);   /* fundo atrás do modal (§8.6) */
  --r-device: 36px;                  /* raio da moldura de celular (§8.6) */
  --dur-exit: 150ms;                 /* saídas curtas: página que sai, número que sai */
  --dur-page-in: 200ms;              /* página que entra (§9.5) */
  --dur-enter: 250ms;                /* entradas curtas: accordion, modal, número que entra */
  --dur-lite: 300ms;                 /* modo leve, avisos, troca de passo, tremor de erro */
  --dur-check: 400ms;                /* check desenhado (§9.12) */
  --dur-draw: 600ms;                 /* ícone desenhado, volta da vitrine */
  --dur-pulse: 1200ms;               /* pulso único do botão de WhatsApp */
  --delay-lines: 60ms;               /* atraso inicial das linhas do título (§9.6) */
  --stagger-menu: 40ms;              /* sequência dos links do menu do celular (§10.2) */
  --delay-visual: 300ms;             /* atraso do painel visual do topo (§9.6) */
  --dur-cursor: 530ms;               /* cursor piscando na demonstração (§9.8) */
  --dur-pontos: 900ms;               /* "pensando…" da demonstração (§9.8) */
  --dur-relatorio-mes: 1100ms;       /* tempo de cada mês no relatório animado de Marketing (§11.2.1) */
  --dur-construcao-celular: 5200ms;  /* animação "site sendo construído" no celular (toca uma vez) */

  /* Maria, a assistente do site (§10.4 M2) */
  --delay-maria-balao: 1200ms;       /* o balão entra 1,2 s depois de a página carregar */
  --dur-maria-balao: 420ms;          /* entrada do balão, com mola */
  --dur-maria-painel: 240ms;         /* painel abrindo no computador */
  --dur-maria-celular: 280ms;        /* painel subindo no celular */
  --dur-maria-digitando-min: 500ms;  /* "digitando…" antes de cada mensagem: de 500 */
  --dur-maria-digitando-max: 700ms;  /* a 700 ms */
  --dur-maria-seguidas: 350ms;       /* entre mensagens seguidas da mesma vez */
  --r-canto: 4px;                    /* canto "de onde sai" o balão da mensagem */

  /* Home animada (§9.13): lilás claro tirado do violeta da marca */
  --lilas: #C4B5FD;
  --r-zona: calc(var(--r-xl) * 1.5);  /* 42 px: cantos das zonas escuras (28 px no celular) */
  --sobra-zona: 40px;                 /* quanto a zona escura entra por cima da seção clara */
  --dur-particula-min: 9s;            /* partículas: ciclos de 9 a 16 s */
  --dur-particula-max: 16s;
  --dur-flutuar-min: 6s;              /* selos flutuando: ciclos de 6 a 9 s */
  --dur-flutuar-max: 9s;
  --dur-estrela-min: 3s;              /* estrelas piscando: de 3 a 7 s */
  --dur-estrela-max: 7s;
  --dur-estrela-cadente: 1200ms;      /* travessia da estrela cadente */
  --dur-aneis: 4800ms;                /* ciclo dos anéis de luz (4 anéis, um a cada 1,2 s) */
  --dur-indicador: 1800ms;            /* brilho que desce no "Role para ver" */
  --dur-onda: 1200ms;                 /* traço da onda que se desenha uma vez */
  --dur-passo-sai: 200ms;             /* troca de passo: o cartão que sai */
  --dur-passo-entra: 320ms;           /* e o que entra */
  --dur-brilho: 600ms;                /* brilho do cartão acendendo no celular */
  --stagger-chips: 60ms;              /* selos entrando em sequência */
  --stagger-pinos: 150ms;             /* hastes do gráfico subindo em sequência */
  --dur-borda-luz: 1200ms;            /* borda de luz do Comparativo girando uma vez */

  /* Seções roxo-escuras (pedido do dono, 20/10/2026): roxo fechado tirado do violeta da marca */
  --roxo-escuro: color-mix(in srgb, var(--accent-press) 38%, var(--night));
  /* Cópias das cores claras: dentro de uma seção escura, os cartões brancos voltam a elas */
  --ink-base: var(--ink);
  --ink-2-base: var(--ink-2);
  --line-base: var(--line);
  --line-strong-base: var(--line-strong);
  --focus-ring-base: var(--focus-ring);}

/* Página "Área do cliente em breve" (app.contentcompany.com.br até a Etapa 4).
   Na publicação, este arquivo vem depois de shared/tokens.css: só usa os tokens (regra 9). */

@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('/fonts/inter-latin-wght-normal.woff2') format('woff2-variations');
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
}

.em-breve {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 32px;
  min-height: 100vh;
  min-height: 100svh;
  padding: 48px var(--gutter);
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  border-radius: var(--r-xs);
  color: var(--ink);
  font-size: var(--fs-body);
  font-weight: 600;
  letter-spacing: var(--ls-heading);
  text-decoration: none;
}
.logo__simbolo {
  width: auto;
  height: 28px;
}
.logo__company {
  color: var(--ink-2);
}

.cartao {
  width: 100%;
  max-width: 560px;
  padding: 32px 24px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-md);
}
@media (min-width: 768px) {
  .cartao {
    padding: 48px;
  }
}

h1 {
  margin: 0 0 16px;
  font-size: var(--fs-h3);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
}

p {
  margin: 0 0 12px;
  color: var(--ink-2);
}

p a {
  color: var(--accent);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.botoes {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  padding-inline: 22px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.btn--primary {
  background: var(--accent);
  color: var(--accent-ink);
}
.btn--secondary {
  border-color: var(--line-strong);
  background: var(--surface);
  color: var(--ink);
}
@media (hover: hover) {
  .btn--primary:hover {
    background: var(--accent-hover);
  }
  .btn--secondary:hover {
    background: var(--surface-2);
  }
}
.btn--primary:active {
  background: var(--accent-press);
}

a:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

@media (prefers-reduced-motion: reduce) {
  .btn {
    transition: none;
  }
}