/* =========================================================
   Sellum · Design tokens
   Fonte: Figma "Sellum - Growth" (QuoLBr0hb5ua3Tdb0eikgq)
   Coleções "Sellum / Cores" e "Sellum / Medidas" + estilos de texto.
   Extraído em 29/09/2026. Se mudar no Figma, atualize aqui.
   ========================================================= */

/* Fontes (Google Fonts). Se preferir, mova este import para o <head> como <link>. */
@import url("https://fonts.googleapis.com/css2?family=Sora:wght@300;400;700&family=Red+Hat+Text:wght@400;500&display=swap");

:root {
  /* ---------- Cores: marca e apoio ---------- */
  --cor-marca-azul: #0201FF;
  --cor-apoio-azul-vivo: #3948FF;
  --cor-apoio-azul-medio: #6172F3;
  --cor-apoio-azul-suave: #9395D1;
  --cor-apoio-azul-claro: #E0EAFF;

  /* ---------- Cores: neutros ---------- */
  --cor-neutro-preto: #000000;
  --cor-neutro-900: #0D0D0D;
  --cor-neutro-800: #2B2B2B;
  --cor-neutro-700: #444444;
  --cor-neutro-500: #757575;
  --cor-neutro-400: #A5A5A5;
  --cor-neutro-300: #D9D9D9;
  --cor-neutro-200: #E6E6E6;
  --cor-neutro-100: #F4F4F4;
  --cor-neutro-50: #FAFAFA;
  --cor-neutro-branco: #FFFFFF;

  /* ---------- Cores: translúcidas ---------- */
  --cor-neutro-900-92: rgba(13, 13, 13, 0.92); /* neutro/900 a 92% (Header LP rolado) */

  /* ---------- Cores: status ---------- */
  --cor-status-sucesso: #039855;
  --cor-status-sucesso-claro: #ECFDF3;

  /* ---------- Cores: clientes (capa do Card de case) ----------
     Fora do Figma: tons tirados da referência da página Cases enviada em 05/10/2026.
     Conferir com a cor oficial de cada marca. */
  --cor-cliente-bubbles: #F4CDD4;
  --cor-cliente-dot: #1B3F86;
  --cor-cliente-catmypet: #FAE518; /* cor enviada em 05/10/2026 */

  /* ---------- Degradês (estilos Degradê/*) ---------- */
  --degrade-noite: linear-gradient(180deg, #070924 0%, #000000 100%);
  --degrade-azul-profundo: linear-gradient(180deg, #0201FF 0%, #070924 100%);
  --degrade-nevoa: linear-gradient(180deg, #FFFFFF 0%, #E0EAFF 100%);
  --degrade-prata: linear-gradient(180deg, #FAFAFA 0%, #FFFFFF 100%); /* Degradê/Prata: neutro/50 em cima, branco embaixo. Fundo de página do tema claro */

  /* ---------- Raios ---------- */
  --raio-ui: 12px;
  --raio-card: 24px;
  --raio-box: 32px;      /* boxes e cards da LP v3 */
  --raio-caixa: 40px;    /* caixas grandes */
  --raio-pill: 999px;

  /* ---------- Espaçamentos ---------- */
  --espaco-8: 8px;
  --espaco-12: 12px;
  --espaco-16: 16px;
  --espaco-24: 24px;
  --espaco-32: 32px;
  --espaco-48: 48px;
  --espaco-64: 64px;
  --espaco-88: 88px;
  --espaco-120: 120px;
  --espaco-secao: 70px; /* respiro vertical padrão das seções (era 140: reduzido à metade) */

  /* ---------- Linhas ---------- */
  --linha-fina: 1px;     /* divisórias da LP */
  --linha-espessura: 2px;
  --cor-linha-sutil: rgba(255, 255, 255, 0.08); /* borda de card e menu no fundo escuro: branco a 8% (referência: linear.app) */
  --cor-status-erro: #FDA29B;       /* erro legível sobre fundo escuro */
  --cor-status-erro-forte: #D92D20; /* erro legível sobre fundo claro */

  /* ---------- Efeitos ---------- */
  --sombra: 0 4px 16px rgba(0, 0, 0, 0.16); /* Sombra única do site e do DS (a do menu do header): header rolado, menus e botão do chat. Não criar outra. No tema claro só a opacidade muda (ver Tema) */
  --desfoque-fundo: 14px;  /* Figma "Background blur 28" = CSS blur(14px) */
  --transicao-estado: 0.4s ease-out; /* Header LP: troca Topo/Rolado */

  /* ---------- Layout (LP) ---------- */
  --largura-pagina: 1440px;
  --largura-conteudo: 1280px;  /* igual à referência medida */
  --margem-lateral: 80px;
  --largura-texto: 768px;      /* limite para títulos e subtítulos */

  /* ---------- Famílias ---------- */
  --fonte-titulo: "Sora", system-ui, sans-serif;
  --fonte-corpo: "Red Hat Text", system-ui, sans-serif;
}

/* ---------- Tema (escuro / claro) ----------
   Tokens por FUNÇÃO. O CSS do site usa estes tokens em tudo que muda com o
   tema; a paleta acima (--cor-*) fica para o que tem cor fixa (azul da
   marca, caixas claras, botões "escuro").
   - Escuro é o padrão.
   - Claro: <html data-tema="claro"> (js/tema.js liga e guarda a escolha).
   - Ilhas: um bloco pode fixar um tema por dentro, com .tema-escuro ou
     .tema-claro (ver a lista de ilhas em css/componentes.css). */
:root,
.tema-escuro {
  color-scheme: dark;
  --tema-fundo: var(--cor-neutro-preto);
  --tema-superficie: var(--cor-neutro-900);          /* superfície única: cards, menus, FAQ, caixas de ícone, balões e hover. Não existe "superfície 2" */
  --tema-superficie-92: var(--cor-neutro-900-92);    /* header rolado */
  --tema-borda: var(--cor-neutro-800);
  --tema-borda-forte: var(--cor-neutro-700);         /* campos e botões de contorno */
  --tema-linha-sutil: var(--cor-linha-sutil);        /* borda discreta de card e menu */
  --tema-texto: var(--cor-neutro-branco);
  --tema-texto-suave: var(--cor-neutro-300);
  --tema-texto-2: var(--cor-neutro-400);             /* secundário */
  --tema-texto-3: var(--cor-neutro-500);             /* terciário, notas, placeholders */
  --tema-contraste: var(--cor-neutro-branco);        /* superfície invertida: botão branco, pílula ativa */
  --tema-contraste-texto: var(--cor-neutro-preto);
  --tema-contraste-hover: var(--cor-neutro-200);
  --tema-erro: var(--cor-status-erro);
}
[data-tema="claro"],
.tema-claro {
  color-scheme: light;
  --tema-fundo: var(--cor-neutro-50);                /* #FAFAFA: cor de base, igual ao início do Degradê/Prata que cobre a página */
  --tema-superficie: var(--cor-neutro-100);          /* cards em #F4F4F4: um tom abaixo do fundo, para não sumirem no quase branco */
  --tema-superficie-92: rgba(255, 255, 255, 0.92);
  --tema-borda: var(--cor-neutro-200);
  --tema-borda-forte: var(--cor-neutro-300);
  --tema-linha-sutil: rgba(0, 0, 0, 0.08);
  --tema-texto: var(--cor-neutro-preto);
  --tema-texto-suave: var(--cor-neutro-800);
  --tema-texto-2: var(--cor-neutro-700);
  --tema-texto-3: var(--cor-neutro-500);
  --tema-contraste: var(--cor-neutro-preto);
  --tema-contraste-texto: var(--cor-neutro-branco);
  --tema-contraste-hover: var(--cor-neutro-800);
  --tema-erro: var(--cor-status-erro-forte);
  --sombra: 0 4px 16px rgba(0, 0, 0, 0.05); /* mesma sombra; no claro ela aparece mais, então a opacidade é menor */
}

/* =========================================================
   Estilos de texto (valores do Figma, em px para 1440)
   ========================================================= */
.titulo-display { font: 300 120px/132px var(--fonte-titulo); }
.titulo-1       { font: 300 96px/108px var(--fonte-titulo); }
.titulo-2       { font: 300 78px/92px var(--fonte-titulo); }
.titulo-3       { font: 300 64px/76px var(--fonte-titulo); }
.titulo-4       { font: 400 48px/58px var(--fonte-titulo); }
.titulo-5       { font: 400 36px/44px var(--fonte-titulo); }
.titulo-6       { font: 400 28px/36px var(--fonte-titulo); } /* Figma: Título/6 (tópico em texto corrido) */

.corpo-xl { font: 400 40px/56px var(--fonte-corpo); }
.corpo-l  { font: 400 32px/44px var(--fonte-corpo); }
.corpo-m  { font: 400 24px/34px var(--fonte-corpo); }
.corpo-s  { font: 400 18px/26px var(--fonte-corpo); }
.corpo-xs { font: 400 14px/20px var(--fonte-corpo); }

.rotulo-botao    { font: 500 32px/40px var(--fonte-corpo); }
.rotulo-etiqueta { font: 500 24px/30px var(--fonte-corpo); }
.rotulo-ui       { font: 500 14px/20px var(--fonte-corpo); }
.web-menu        { font: 500 16px/24px var(--fonte-corpo); } /* Figma: Web/Menu (menu e botões) */
.web-corpo       { font: 400 16px/24px var(--fonte-corpo); } /* Figma: Web/Corpo (texto padrão do site), 16/24 desde 04/10/2026; antes 18/26 */

.numero-preco { font: 700 72px/80px var(--fonte-titulo); letter-spacing: -0.02em; }

/* Sem caixa alta automática: nenhum estilo usa text-transform. */

/* =========================================================
   Base da LP
   ========================================================= */
html { -webkit-font-smoothing: antialiased; }
body {
  margin: 0;
  background: var(--tema-fundo);
  color: var(--tema-texto);
  font-family: var(--fonte-corpo);
}
.container {
  width: 100%;
  max-width: calc(var(--largura-conteudo) + 2 * var(--margem-lateral));
  padding-inline: var(--margem-lateral);
  margin-inline: auto;
  box-sizing: border-box;
}
.secao { padding-block: var(--espaco-secao); }