/* ==========================================================
   00 · CONFIGURAÇÕES GLOBAIS
   Cores da marca, fundo do site e o holofote.
   Mexer aqui muda a página inteira de uma vez.
   ========================================================== */


/* ----------------------------------------------------------
   TESTE DE PALETA
   Só existe UM bloco :root ativo por vez. Para trocar a cara do
   site inteiro, comente o bloco ativo e descomente outro.
   No VS Code: selecionar o bloco e apertar Ctrl + K, Ctrl + C
   para comentar; Ctrl + K, Ctrl + U para descomentar.
   ---------------------------------------------------------- */


/* ===== PALETA A · ÂMBAR E VERMELHO ===== */
/*
:root{
  --ink:#04101C;        --ink-rgb:4,16,28;
  --sea:#0A2036;        --sea-rgb:10,32,54;
  --red:#E0342F;        --red-rgb:224,52,47;
  --red-deep:#A41F22;
  --lamp:#FFC24B;       --lamp-rgb:255,194,75;
  --glow:#FFE7B4;       --glow-rgb:255,231,180;
  --warm-mid:#F5A623;
  --warm:#F0813A;       --warm-rgb:240,129,58;
  --warm-deep:#E8532F;
  --alert:#FF5A54;
  --text:#F1F6FA;
  --muted:#9BB1C6;
  --glass-bg:linear-gradient(160deg,rgba(255,255,255,.12),rgba(255,255,255,.04));
  --glass-line:rgba(255,255,255,.17);
  --r:26px;
  --maxw:1120px;
}
*/


/* ===== PALETA 1 · LIMA ELÉTRICA (atual) ===== */
:root{
  --ink:#0A0B0A;        --ink-rgb:10,11,10;
  --sea:#14171A;        --sea-rgb:20,23,26;
  --red:#D6362A;        --red-rgb:214,54,42;
  --red-deep:#8E2118;
  --lamp:#C2F53D;       --lamp-rgb:194,245,61;
  --glow:#E8FFB0;       --glow-rgb:232,255,176;
  --warm-mid:#AFEB2A;
  --warm:#9BE01F;       --warm-rgb:155,224,31;
  --warm-deep:#6FBF10;   --warm-deep-rgb:111,191,16;
  --alert:#FF6B5C;
  --text:#F4F7F0;
  --muted:#9BA69A;
  --glass-bg:linear-gradient(160deg,rgba(255,255,255,.11),rgba(255,255,255,.035));
  --glass-line:rgba(255,255,255,.15);
  --r:26px;
  --maxw:1120px;
}


/* ===== PALETA 3 · MONOCROMÁTICO ===== */
/*
:root{
  --ink:#0A0A0A;        --ink-rgb:10,10,10;
  --sea:#151515;        --sea-rgb:21,21,21;
  --red:#FF3B30;        --red-rgb:255,59,48;
  --red-deep:#B3251C;
  --lamp:#FFFFFF;       --lamp-rgb:255,255,255;
  --glow:#FFFFFF;       --glow-rgb:255,255,255;
  --warm-mid:#E4E4E4;
  --warm:#CFCFCF;       --warm-rgb:207,207,207;
  --warm-deep:#A8A8A8;
  --alert:#FF5A4E;
  --text:#FAFAFA;
  --muted:#8A8A8A;
  --glass-bg:linear-gradient(160deg,rgba(255,255,255,.10),rgba(255,255,255,.03));
  --glass-line:rgba(255,255,255,.16);
  --r:26px;
  --maxw:1120px;
}
*/


/* ===== PALETA 4 · CHAMPANHE ===== */
/*
:root{
  --ink:#0B0A08;        --ink-rgb:11,10,8;
  --sea:#17140E;        --sea-rgb:23,20,14;
  --red:#C0392B;        --red-rgb:192,57,43;
  --red-deep:#8A2820;
  --lamp:#E7C87A;       --lamp-rgb:231,200,122;
  --glow:#F6EBCF;       --glow-rgb:246,235,207;
  --warm-mid:#DDB863;
  --warm:#D4A94E;       --warm-rgb:212,169,78;
  --warm-deep:#B08630;
  --alert:#E3705F;
  --text:#F7F4EE;
  --muted:#A9A090;
  --glass-bg:linear-gradient(160deg,rgba(255,255,255,.11),rgba(255,255,255,.035));
  --glass-line:rgba(255,255,255,.16);
  --r:26px;
  --maxw:1120px;
}
*/


/* Degradê quente da marca — botões, tarjas e o lado "Depois".
   Montado a partir das variáveis acima, então acompanha a paleta ativa. */
:root{
  --grad:linear-gradient(115deg,var(--glow),var(--lamp) 34%,var(--warm) 70%,var(--warm-deep));

  /* Medalhas. Ficam FORA dos blocos de paleta de propósito: ouro, prata e
     bronze são as mesmas cores em qualquer esquema. Usadas no cursor e
     nas bordas dos três degraus do pódio, no BLOCO 08. */
  --ouro:#F5C542;       --ouro-rgb:245,197,66;
  --prata:#C8D0D6;      --prata-rgb:200,208,214;
  --bronze:#B87A4B;     --bronze-rgb:184,122,75;
}

/* ==========================================================
   ESCALA TIPOGRÁFICA
   Cada token carrega peso, tamanho, entrelinha e família de uma vez,
   pelo atalho `font`. A entreletra vai num token irmão porque o atalho
   não a inclui.

   Um tamanho novo só entra aqui se ganhar um nome e um papel. Foi a
   falta disso que espalhou 36 valores diferentes pelo projeto, com
   passos de meio pixel que ninguém decidiu.

   ATENÇÃO: `font:` zera o font-variant-numeric. Quem precisa de
   tabular-nums tem de redeclarar DEPOIS do token, senão as colunas
   de preço e de resultado voltam a desalinhar.
   ========================================================== */
:root{
  --serif:'Instrument Serif',Georgia,'Times New Roman',serif;
  --sans:'Inter',system-ui,-apple-system,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;

  /* editorial */
  --t-display:  400 clamp(35px,5.4vw,70px)/1.04 var(--serif);   --t-display-ls:-.015em;
  --t-h1:       400 clamp(28px,3.8vw,44px)/1.08 var(--serif);   --t-h1-ls:-.012em;
  --t-h2:       400 22px/1.25 var(--serif);                     --t-h2-ls:-.008em;
  --t-h3:       400 19px/1.3  var(--serif);                     --t-h3-ls:-.005em;

  /* corpo */
  --t-lead:     400 18px/1.6   var(--sans);
  --t-body:     400 16px/1.65  var(--sans);
  --t-sm:       400 14.5px/1.5 var(--sans);
  --t-xs:       400 13px/1.5   var(--sans);

  /* rótulo */
  --t-label:    700 11px/1.4 var(--mono);     --t-label-ls:.18em;
  --t-label-sm: 700 10px/1.4 var(--mono);     --t-label-sm-ls:.13em;

  /* Medida de linha: quantos caracteres cabem antes do olho se perder na
     volta para a linha seguinte. Entre 60 e 70 é onde a leitura é mais
     confortável; acima de 80 a pessoa relê a mesma linha sem perceber. */
  --medida:66ch;
  --medida-curta:58ch;

  /* número: sempre seguido de font-variant-numeric:tabular-nums */
  --t-num-xl:   600 clamp(34px,3.4vw,44px)/1.05 var(--sans);    --t-num-ls:-.03em;
  --t-num-lg:   600 30px/1.05 var(--sans);
  --t-num:      600 24px/1.1  var(--sans);
}

*{box-sizing:border-box;margin:0;padding:0}
/* color-scheme avisa o navegador que a página é escura. Sem isto a barra de
   rolagem e a interface nativa vêm no tema claro e ficam com um branco
   berrante contra o fundo. Se um dia a paleta virar clara, troque para light. */
html{scroll-behavior:smooth;color-scheme:dark}

body{
  position:relative;
  background:var(--ink);
  color:var(--text);
  font-family:'Inter',system-ui,sans-serif;
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* ---------- atmosfera de fundo ----------
   Tudo aqui é FIXO na janela, então vale para a página inteira, em qualquer
   altura da rolagem. Antes o facho era absoluto e só existia nos primeiros
   1080px do documento, o que dava a impressão de luz presa no topo. */
.bg{position:fixed;inset:0;z-index:-2;overflow:hidden;background:
  radial-gradient(900px 600px at 50% -10%,rgba(var(--lamp-rgb),.10),transparent 62%),
  radial-gradient(1000px 720px at 12% 18%,rgba(var(--sea-rgb),.80),transparent 62%),
  radial-gradient(900px 640px at 88% 82%,rgba(var(--sea-rgb),.55),transparent 60%),
  var(--ink);}
/* Grade de pontos na página toda, esmaecendo de leve para baixo */
.bg::after{content:'';position:absolute;inset:0;
  background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:34px 34px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.95),rgba(0,0,0,.30));
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.95),rgba(0,0,0,.30));}

/* ---------- aurora — elemento-assinatura ----------
   Três manchas nas cores da marca, num quadrado bem maior que a tela, girando
   devagar. O giro é UMA transformação só, então é barato para o navegador,
   mesmo com todos os cards de vidro por cima. */
.beam-stage{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.beam{position:absolute;top:50%;left:50%;width:130vmax;height:130vmax;
  transform:translate(-50%,-50%);
  background:
    radial-gradient(38% 38% at 32% 30%,rgba(var(--lamp-rgb),.10),transparent 70%),
    radial-gradient(36% 36% at 70% 42%,rgba(var(--warm-deep-rgb),.09),transparent 70%),
    radial-gradient(32% 32% at 50% 70%,rgba(var(--warm-rgb),.07),transparent 70%);
  animation:aurora 110s linear infinite;}
@keyframes aurora{to{transform:translate(-50%,-50%) rotate(360deg)}}