/* ============================================================
   Fortiva — tokens de design
   Fonte única da identidade visual. Para mudar a cor da marca
   no site inteiro, altere --brand-600 aqui e mais nada.

   Três zonas, com regras diferentes:
     1. MARCA     — pode mudar à vontade
     2. PATENTE   — sistema de níveis do produto, mexa com cuidado
     3. WHATSAPP  — cores oficiais do app, NÃO altere
   ============================================================ */

:root {

  /* --- 1. MARCA : roxo ------------------------------------
     Era 26 tons quase iguais. Virou 8 degraus reais.
     --brand-600 é a cor dos CTAs e do logo.                 */
  --brand-900: #1a0b3f;
  --brand-800: #221364;
  --brand-700: #37289a;
  --brand-600: #4a3ac2;   /* principal */
  --brand-500: #6252db;
  --brand-400: #8575ea;
  --brand-200: #c6bdff;
  --brand-100: #ece8ff;
  --brand-050: #f6f4ff;   /* fundo de seção clara */

  /* --- 1. MARCA : dourado ---------------------------------
     Era 13 tons. Dois deles concentravam 321 dos 349 usos.
     Uso restrito: selo "melhor custo-benefício", patente,
     economia. Nunca como cor de botão principal — o roxo
     precisa ganhar a disputa de atenção.                    */
  --gold-900: #1b1608;
  --gold-800: #4a3405;
  --gold-700: #946200;
  --gold-600: #d19a0e;    /* texto sobre fundo claro */
  --gold-500: #f0b429;    /* preenchimento */
  --gold-200: #ffe08a;
  --gold-100: #fef3c7;
  --gold-050: #fff7e0;

  /* --- 1. MARCA : neutros ---------------------------------
     Uma família só, levemente azulada. Nunca misturar
     cinza quente com cinza frio na mesma tela.              */
  --ink-900: #12131f;     /* texto principal, fundo escuro */
  --ink-800: #25283f;
  --ink-600: #464b68;
  --ink-500: #555a78;
  --ink-400: #666b88;
  --ink-300: #6e7390;     /* texto secundário */
  --ink-200: #8a8fa8;
  --ink-100: #e3e6f3;     /* bordas */
  --ink-050: #eff1fa;     /* fundo sutil */
  --white:   #ffffff;

  /* --- 1. MARCA : semânticas ------------------------------ */
  --ok-700:  #047857;
  --ok-600:  #059669;
  --ok-100:  #d1fae5;
  --warn-600:#b45309;
  --danger-600: #dc2626;

  /* --- 2. PATENTE : níveis do produto ---------------------
     Cada patente tem cor própria, de Bronze a Ônix.
     É o diferencial do Fortiva — a progressão precisa ser
     legível de relance.                                     */
  --rank-bronze-de:  #b87333;
  --rank-bronze-ate: #6b4423;
  --rank-prata:      #aeb8be;
  --rank-prata-glifo:#2a2a38;
  --rank-violeta:    var(--brand-500);
  --rank-ouro:       var(--gold-500);
  --rank-onix-1:     #6252db;
  --rank-onix-2:     #38bdf8;
  --rank-onix-3:     #ffe08a;
  --rank-onix-4:     #f97316;

  /* --- 3. WHATSAPP : NÃO ALTERAR -------------------------
     Cores oficiais do app, usadas na maquete da conversa.
     Mudar qualquer uma quebra a ilusão de ser o WhatsApp
     real — e é essa ilusão que faz a demo convencer.        */
  --wa-verde:        #25d366;
  --wa-header:       #008069;
  --wa-bolha:        #d9fdd3;
  --wa-texto:        #111b21;
  --wa-hora:         #667781;
  --wa-cinza:        #8696a0;
  --wa-check:        #53bdeb;
  --wa-link:         #027eb5;
  --wa-fundo:        #f0f2f5;

  /* --- Elevação -------------------------------------------
     Sombras tingidas com o azul do fundo, não preto puro.
     Preto puro sobre fundo colorido parece sujeira.         */
  --sombra-sm: 0 1px 2px rgba(18, 19, 31, 0.06);
  --sombra-md: 0 4px 14px rgba(74, 58, 194, 0.12);
  --sombra-lg: 0 12px 32px rgba(18, 19, 31, 0.12);

  /* --- Raio ----------------------------------------------
     Menor nos elementos internos, maior nos contêineres.   */
  --raio-sm: 8px;
  --raio-md: 12px;
  --raio-lg: 20px;
  --raio-pill: 999px;
}

/* Respeita quem pediu menos movimento no sistema.
   A página tem 5 animações; sem isto elas rodam para todo
   mundo, inclusive quem sente enjoo com movimento. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Link de pular navegação: invisível até receber foco pelo teclado.
   Exigência de acessibilidade — sem ele, quem navega por teclado
   percorre o cabeçalho inteiro em toda página. */
.pular-para-conteudo {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 20px;
  background: var(--brand-600);
  color: var(--white);
  font-weight: 600;
  border-radius: 0 0 var(--raio-md) 0;
  text-decoration: none;
}
.pular-para-conteudo:focus {
  left: 0;
}

/* Links institucionais do rodapé */
.link-rodape {
  color: var(--ink-400);
  text-decoration: none;
  font-size: 13px;
  transition: color 180ms ease;
}
.link-rodape:hover { color: var(--brand-600); text-decoration: underline; }
.link-rodape:focus-visible {
  outline: 2px solid var(--brand-600);
  outline-offset: 3px;
  border-radius: 3px;
}