/* =============================================================
   Foxbit — Design tokens & foundation (global)
   Mapeia para src/styles/global.css no Astro.
   ============================================================= */
:root {
  /* =========================================================
     PALETA GLOBAL — nomenclatura única (fonte de verdade)
     Mudou aqui → reflete em todas as páginas que usam o token.
     ========================================================= */
  --white:          #FFFFFF;
  --gray-01:        #FAFAFA;
  --gray-02:        #495057;
  --gray-03:        #333333;
  --gray-04:        #0E0E10;

  --orange:        #ff7400;

  --blue-infra:     #1A3FBF;
  --blue-business:  #111854;

  --yellow-01:      #ffe066;
  --yellow-02:      #fcc419;
  --yellow-03:      #f59f00;

  --green-01:       #d3f9d8;
  --green-02:       #a9e34b;
  --green-03:       #00e48a;
  --green-04:       #2b8a3e;

  /* feedback */
  --danger:         #e03131;

  /* B2C — laranja (Para você) */
  --orange-dark:   #E66700;
  --orange-soft:   #FFF1E6;
  --orange-tint:   #FCEADD;
  --orange-deep:   #CC5A00;
  --grad-orange:   linear-gradient(230deg, #FF3E00, #FF7400);

  /* B2B (Para sua empresa + Foxbit Infra) — azul */
  --blue:          var(--blue-infra);
  --blue-dark:     #122E8C;
  --blue-soft:     #E8EDFA;
  --blue-tint:     #D4DCF2;
  --blue-deep:     #0A1F5F;

  /* Primária da variante (B2C = laranja) */
  --primary:       var(--orange);
  --primary-dark:  var(--orange-dark);
  --primary-soft:  var(--orange-soft);

  /* Surfaces */
  --ink:           var(--gray-03);
  --ink-2:         var(--gray-02);
  --ink-3:         #9B958A;
  --paper:         var(--white);
  --paper-2:       var(--gray-01);
  --paper-3:       #F5EFE7;
  --paper-blue:    #F4F7FD;
  --rule:          #ECE5DC;
  --rule-strong:   #D4CCC0;
  --section-dark:  var(--gray-04);

  /* Chip / tag de card (global) */
  --chip-bg:       var(--green-01);
  --chip-fg:       var(--green-04);

  /* Bullets de confirmação / negação (global) */
  --confirm-circle: var(--green-02);
  --confirm-mark:   var(--green-04);
  --deny-circle:    #ffc9c9;
  --deny-mark:      #c92a2a;

  /* Hierarquia de títulos (global) */
  --t-h1: clamp(38px, 5vw, 60px);
  --t-h2: clamp(30px, 3.6vw, 44px);
  --t-h3: 28px;
  --t-h4: 20px;
  --t-h5: 16px;
  --t-h6: 13px;

  /* Dark */
  --dark:          #0F0B08;
  --dark-2:        #1A1410;
  --dark-3:        #221A14;
  --dark-line:     #2E251D;

  /* Type */
  --font-serif:    'Reddit Sans', system-ui, sans-serif;
  --font-sans:     'Reddit Sans', system-ui, sans-serif;
  --font-mono:     'Reddit Sans', ui-monospace, Menlo, monospace;

  /* Layout */
  --container:     1200px;
  --gutter:        clamp(20px, 4vw, 56px);

  /* Radii */
  --r-xs: 4px;
  --r-s:  10px;
  --r-m:  14px;
  --r-l:  20px;
  --r-xl: 28px;

  /* Shadows */
  --sh-card:  none;
  --sh-pop:   none;
  --sh-hero:  none;
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; color-scheme: light; }
/* Rede de segurança contra scroll lateral.
   Seções full-bleed usam width:100vw + margin-left:calc(50% - 50vw). 100vw
   inclui a barra de rolagem vertical e o container não, então sobra a largura
   da barra (8–17px) e isso vira scroll horizontal na PÁGINA INTEIRA.
   `clip` corta essa sobra (que é padding vazio) SEM criar contexto de
   rolagem — position:sticky continua funcionando. */
html, body { overflow-x: clip; }
@supports not (overflow-x: clip) {
  html, body { overflow-x: hidden; }
}
body {
  margin: 0;
  background: var(--paper, #fff);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: var(--orange); color: #fff; }

.wrap { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }

/* =============================================================
   BOTÕES (compartilhado)
   ============================================================= */
/* =========================================================================
   BUTTONS
   ========================================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 22px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 14.5px;
  letter-spacing: normal;
  transition: background 150ms, color 150ms, transform 150ms, box-shadow 150ms;
  border: 1px solid transparent;
  white-space: nowrap;
  cursor: pointer;
}
.btn--sm { padding: 9px 16px; font-size: 13px; }
.btn--lg { padding: 16px 28px; font-size: 15.5px; }

.btn--orange {
  background: var(--orange);
  color: #fff;
  box-shadow: none;
}
.btn--orange:hover {
  background: var(--orange-dark);
  transform: translateY(-1px);
}

.btn--blue {
  background: var(--blue);
  color: #fff;
  box-shadow: none;
}
.btn--blue:hover {
  background: var(--blue-dark);
  transform: translateY(-1px);
}

.btn--ghost {
  color: var(--ink);
  border-color: var(--rule-strong);
  background: #fff;
}
.btn--ghost:hover { border-color: var(--ink); }

.btn--soft-orange {
  background: var(--orange-soft);
  color: var(--orange);
}
.btn--soft-orange:hover { background: var(--orange-tint); }

.btn--outline-orange {
  background: transparent;
  color: var(--orange);
  border-color: var(--orange);
}
.btn--outline-orange:hover { background: var(--orange-soft); }
.btn--green {
  background: var(--green-04);
  color: #fff;
  box-shadow: none;
}
.btn--green:hover {
  background: #237032;
  transform: translateY(-1px);
}
.btn--outline-green {
  background: transparent;
  color: var(--green-04);
  border-color: var(--green-04);
}
.btn--outline-green:hover { background: var(--green-01); color: var(--green-04); }
.btn--outline-blue {
  background: transparent;
  color: var(--blue-dark);
  border-color: var(--blue);
}
.btn--outline-blue:hover { background: var(--blue-soft); }

/* =============================================================
   HIERARQUIA DE TÍTULOS (global) — muda o token, reflete em tudo
   ============================================================= */
h1 { font-size: var(--t-h1); line-height: 1.1; font-weight: 700; letter-spacing: -0.022em; }
h2 { font-size: var(--t-h2); line-height: 1.2; font-weight: 700; letter-spacing: -0.02em; }
h3 { font-size: var(--t-h3); line-height: 1.2; font-weight: 700; }
h4 { font-size: var(--t-h4); line-height: 1.25; font-weight: 700; }
h5 { font-size: var(--t-h5); line-height: 1.3; font-weight: 600; }
h6 { font-size: var(--t-h6); line-height: 1.3; font-weight: 600; }

/* =============================================================
   TAG / CHIP DE CARD (global)
   ============================================================= */
.chip-card {
  display: inline-flex; align-items: center;
  font-family: var(--font-sans); font-size: 12px; font-weight: 600;
  padding: 4px 12px; border-radius: 999px;
  background: var(--chip-bg); color: var(--chip-fg);
}

/* =============================================================
   BULLETS DE CONFIRMAÇÃO / NEGAÇÃO (global)
   ============================================================= */
.bullet-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.bullet-list li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.bullet-check { width: 22px; height: 22px; border-radius: 50%; background: var(--confirm-circle); color: var(--confirm-mark); display: inline-flex; align-items: center; justify-content: center; margin-top: 1px; }
.bullet-check svg { width: 12px; height: 12px; stroke-width: 3.5; }
.bullet-check--no { background: var(--deny-circle); color: var(--deny-mark); }

/* =============================================================
   ESCADA DE TEXTO — mobile (rede de segurança responsiva)
   Reduz títulos grandes em telas pequenas para evitar quebra
   feia / estouro de linha. Não altera o desktop.
   ============================================================= */
@media (max-width: 640px) {
  h1, .hero__title, .hero h1 { font-size: clamp(28px, 8.5vw, 38px); line-height: 1.1; letter-spacing: -0.02em; }
  h2, .sec-head h2, .section-head h2, .section h2 { font-size: clamp(24px, 7vw, 30px); line-height: 1.15; letter-spacing: -0.01em; }
  h3 { font-size: clamp(19px, 5.2vw, 24px); line-height: 1.2; }
  h4 { font-size: 17px; line-height: 1.25; }
  /* corpo: garante leitura confortável e quebra elegante */
  p, li { text-wrap: pretty; }
  /* títulos com quebra forçada (<br>) respiram melhor sem a quebra no mobile */
  .hero__title br, .sec-head h2 br, .section-head h2 br { display: none; }
}
@media (max-width: 400px) {
  h1, .hero__title, .hero h1 { font-size: clamp(25px, 9vw, 30px); }
  h2, .sec-head h2, .section-head h2, .section h2 { font-size: clamp(21px, 8vw, 26px); }
}

/* =============================================================
   MOBILE — ajustes de hero e CTA (pedido em 2026-09-11)

   Cada página tem um <style> próprio DEPOIS do link deste arquivo,
   e lá `.hero__tag` é declarado com 1 classe. Por isso os seletores
   aqui usam 2 classes (wrapper + elemento): ganham por especificidade,
   independentemente da ordem das folhas.
   ============================================================= */
@media (max-width: 640px) {
  /* a pill com o nome da página repete o H1 e, na Home, gira junto
     com os banners — sai do hero no mobile (segue no desktop) */
  .hero .hero__tag,
  .hero-wire .hero-wire__eyebrow,
  .api-hero .api-hero__tag { display: none; }

  /* CTA ocupa a largura da seção; havendo dois, um embaixo do outro */
  .hero .hero__ctas,
  .hero-wire .hero-wire__ctas,
  .api-hero .api-hero__ctas,
  .finalcta .finalcta__ctas,
  .section .steps-cta {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
  .hero .hero__ctas > .btn,
  .hero-wire .hero-wire__ctas > .btn,
  .api-hero .api-hero__ctas > .btn,
  .finalcta .finalcta__ctas > .btn,
  .section .steps-cta > .btn,
  .hero .hero__content > .btn,
  .hero-wire .hero-wire__content > .btn {
    width: 100%;
    align-self: stretch;
  }
}

/* ============================= AVISO DE RISCO (.fx-risk) ============================= */
.fx-risk { background: var(--paper-2, #FAFAFA); border-top: 1px solid var(--rule, #E9ECEF); padding: clamp(32px, 4vw, 48px) 0; }
.fx-risk .wrap { max-width: var(--container, 1200px); margin: 0 auto; padding: 0 var(--gutter, 24px); }
.fx-risk h3 { font-family: var(--font-sans); font-size: 14px; font-weight: 700; color: var(--gray-03, #333); margin: 0 0 10px; letter-spacing: -0.01em; }
.fx-risk p + h3 { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--rule, #E9ECEF); }
.fx-risk p { font-size: 13.5px; line-height: 1.6; color: var(--ink-2, #495057); margin: 0; max-width: 104ch; text-wrap: pretty; }
.fx-risk p + p { margin-top: 10px; }
.fx-risk strong { font-weight: 700; color: var(--gray-03, #333); }
/* Aviso obrigatório de oferta pública (Res. CVM 88, art. 11) */
.fx-risk .fx-cvm { font-size: 15px; line-height: 1.55; color: var(--gray-03, #333); margin: 0 0 22px; padding: 18px 20px; background: #fff; border-left: 3px solid var(--orange, #ff7400); max-width: 104ch; }

/* =============================================================
   ANIMAÇÃO E TAGS — padrão único do site
   Referência: "1. Home". Antes disto, cada página (sobretudo as
   montadas no Claude Designer) trazia sua própria versão — ou
   usava as classes .reveal/.reveal-lines SEM declarar o CSS
   delas, e a animação simplesmente não acontecia.

   Os seletores usam DUAS classes (container + elemento) de
   propósito: o <style> de cada página vem depois deste <link>,
   então empatar em especificidade faria a página ganhar.
   ============================================================= */

/* ---- 1) Entrada do HERO — blur + slide (assinatura Foxbit) ---- */
@keyframes fxBlurSlide {
  from { opacity: 0; filter: blur(12px); transform: translateY(14px); }
  to   { opacity: 1; filter: blur(0);    transform: translateY(0); }
}
@media (prefers-reduced-motion: no-preference) {
  .hero .hero-anim,
  .hero-wire .hero-anim,
  .api-hero .hero-anim,
  .chero .hero-anim {
    opacity: 0;
    animation: fxBlurSlide 1.1s cubic-bezier(.16,1,.3,1) both;
  }
  .hero .hero-anim:nth-child(1), .hero-wire .hero-anim:nth-child(1),
  .api-hero .hero-anim:nth-child(1), .chero .hero-anim:nth-child(1) { animation-delay: 0.05s; }
  .hero .hero-anim:nth-child(2), .hero-wire .hero-anim:nth-child(2),
  .api-hero .hero-anim:nth-child(2), .chero .hero-anim:nth-child(2) { animation-delay: 0.15s; }
  .hero .hero-anim:nth-child(3), .hero-wire .hero-anim:nth-child(3),
  .api-hero .hero-anim:nth-child(3), .chero .hero-anim:nth-child(3) { animation-delay: 0.25s; }
  .hero .hero-anim:nth-child(4), .hero-wire .hero-anim:nth-child(4),
  .api-hero .hero-anim:nth-child(4), .chero .hero-anim:nth-child(4) { animation-delay: 0.35s; }
  .hero .hero-anim:nth-child(n+5), .hero-wire .hero-anim:nth-child(n+5),
  .api-hero .hero-anim:nth-child(n+5), .chero .hero-anim:nth-child(n+5) { animation-delay: 0.45s; }
}

/* ---- 3) TAG do hero — formato E cor, iguais aos da Home ----
   Referência: `.hero__slide--photo .hero__tag` (slide com foto, que é o
   caso de praticamente todo hero do site). A varredura achou três grupos:
     A (maioria) — #fff sobre branco 10%, mas em 13px/600
     B (Taxas, Conteúdos, Bitcoin, Ethereum) — laranja sobre laranja 12-14%
     C (Home)    — 11px/500
   Todos esses heros têm fundo escuro, então o tratamento da Home serve
   para os três. Dois níveis de classe para vencer o <style> da página. */
.hero .hero__tag,
.hero-wire .hero-wire__eyebrow,
.api-hero .api-hero__tag,
.chero .chero__tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: uppercase;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.22);
  color: #fff;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.hero .hero__tag .dot,
.hero-wire .hero-wire__eyebrow .dot,
.api-hero .api-hero__tag .dot,
.chero .chero__tag .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--orange); flex-shrink: 0;
}

/* ---- 6) Textinho acima dos títulos — referência: .doors__head-sm da Home
        ("Cripto e dólar digital." acima de "Para você e para sua empresa.")
        Sans 20px, peso 500, laranja, caixa normal. Substitui os eyebrows
        mono/uppercase/11-12px que o Claude Designer vinha gerando. ---- */
.sec-head .sec-head__eyebrow,
.chero .chero__eyebrow,
.section .sec-head__eyebrow,
.faq5 .faq5__eyebrow,
.frente .frente__eyebrow {
  display: block;
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: normal;
  text-transform: none;
  color: var(--orange);
  margin-bottom: 8px;
}
/* páginas PJ/azuis herdam o azul da marca */
.section--blue .sec-head__eyebrow,
.hero--pj ~ * .sec-head__eyebrow { color: var(--blue); }
/* sobre fundo escuro o laranja continua legível; o traço decorativo sai */
.faq5 .faq5__eyebrow::before { content: none; }
@media (max-width: 640px) {
  .sec-head .sec-head__eyebrow,
  .chero .chero__eyebrow,
  .section .sec-head__eyebrow,
  .faq5 .faq5__eyebrow,
  .frente .frente__eyebrow { font-size: 17px; }
}

/* ---- 5) Hover do CTA laranja — o texto NUNCA some ---- */
.btn.btn--orange:hover,
.btn.btn--orange:focus-visible,
.hero .btn.btn--orange:hover,
.hero-wire .btn.btn--orange:hover,
.chero .btn.btn--orange:hover {
  background: var(--orange-dark);
  color: #fff;
  transform: translateY(-1px);
}

/* ---- Tipografia do HERO — igual à da Home ----
   As páginas traziam o H1 bem maior e mais apertado que o da Home
   (clamp(38-40px, 5vw, 62-64px) + letter-spacing -0.03em contra
   clamp(32px, 4vw, 48px) + letter-spacing normal), e sem o <em> itálico.
   Padroniza só a TIPOGRAFIA — cor e margem continuam da página, porque
   cada hero tem seu fundo (claro/escuro) e seu espaçamento (gap x margin). */
.hero .hero__title,
.hero-wire .hero-wire__title,
.api-hero h1,
.chero h1 {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.05;
  letter-spacing: normal;
  text-wrap: balance;
  max-width: 100%;
}
.hero .hero__title em,
.hero-wire .hero-wire__title em,
.api-hero h1 em,
.chero h1 em { font-style: italic; }

.hero .hero__sub,
.hero-wire .hero-wire__sub,
.chero p {
  font-size: 16px;
  line-height: 1.5;
  font-weight: 400;
  text-wrap: pretty;
}

/* mantém a escada de tipo do mobile (declarada acima com menos
   especificidade — sem isto a regra nova venceria e o H1 estouraria) */
@media (max-width: 640px) {
  .hero .hero__title,
  .hero-wire .hero-wire__title,
  .api-hero h1,
  .chero h1 { font-size: clamp(28px, 8.5vw, 38px); line-height: 1.1; letter-spacing: -0.02em; }
}
@media (max-width: 400px) {
  .hero .hero__title,
  .hero-wire .hero-wire__title,
  .api-hero h1,
  .chero h1 { font-size: clamp(25px, 9vw, 30px); }
}

/* ---- 1b) O hero anima SEM depender de classe no markup ----
   A regra acima exige `.hero-anim` em cada filho do hero — e só a Home
   tem isso. Em vez de editar o markup de 35 páginas, anima-se o filho
   direto do container de conteúdo do hero. A Home fica de fora de
   propósito: o carrossel dela usa `.hero__slide-content` e já tem regra
   própria (que só anima o slide ativo). */
@media (prefers-reduced-motion: no-preference) {
  .hero .hero__content > *,
  .hero-wire .hero-wire__content > *,
  .api-hero .api-hero__inner > *,
  .chero .wrap > * {
    animation: fxBlurSlide 1.1s cubic-bezier(.16,1,.3,1) both;
  }
  .hero .hero__content > *:nth-child(1),
  .hero-wire .hero-wire__content > *:nth-child(1),
  .api-hero .api-hero__inner > *:nth-child(1),
  .chero .wrap > *:nth-child(1) { animation-delay: 0.05s; }
  .hero .hero__content > *:nth-child(2),
  .hero-wire .hero-wire__content > *:nth-child(2),
  .api-hero .api-hero__inner > *:nth-child(2),
  .chero .wrap > *:nth-child(2) { animation-delay: 0.15s; }
  .hero .hero__content > *:nth-child(3),
  .hero-wire .hero-wire__content > *:nth-child(3),
  .api-hero .api-hero__inner > *:nth-child(3),
  .chero .wrap > *:nth-child(3) { animation-delay: 0.25s; }
  .hero .hero__content > *:nth-child(4),
  .hero-wire .hero-wire__content > *:nth-child(4),
  .api-hero .api-hero__inner > *:nth-child(4),
  .chero .wrap > *:nth-child(4) { animation-delay: 0.35s; }
  .hero .hero__content > *:nth-child(n+5),
  .hero-wire .hero-wire__content > *:nth-child(n+5),
  .api-hero .api-hero__inner > *:nth-child(n+5),
  .chero .wrap > *:nth-child(n+5) { animation-delay: 0.45s; }

  /* dentro do hero quem anima é a entrada acima: o reveal-on-scroll sai de
     cena (nas páginas do Designer ele deixava o conteúdo parado em opacity 0
     quando o CSS do .reveal não estava declarado) */
  .hero .hero__content > .reveal,
  .hero .hero__content > .reveal-lines,
  .hero-wire .hero-wire__content > .reveal,
  .hero-wire .hero-wire__content > .reveal-lines,
  .chero .wrap > .reveal,
  .chero .wrap > .reveal-lines { opacity: 1; transform: none; transition: none; }
  .hero .hero__content .rl-inner,
  .hero-wire .hero-wire__content .rl-inner,
  .chero .wrap .rl-inner { transform: none; }
}

/* ---- 2) Texto depois do hero — reveal / mask-rise / stagger ----
   As páginas montadas no Claude Designer usam estas classes E trazem o
   IntersectionObserver, mas NÃO declaram o CSS — a animação nunca
   acontecia (confirmado em 10. Termos, 4.4, 4.5, 14 e 15).
   Verificado antes de publicar: todas as páginas varridas que usam
   `.reveal` têm o observer que adiciona `is-in`. Sem isso o conteúdo
   ficaria invisível para sempre. */
.reveal { opacity: 0; transform: translateY(42px);
  transition: opacity 1s cubic-bezier(.16,1,.3,1), transform 1s cubic-bezier(.16,1,.3,1); }
.reveal.is-in { opacity: 1; transform: none; }

.reveal-lines .rl-word { display: inline-block; overflow: hidden; vertical-align: top;
  padding-bottom: 0.12em; margin-bottom: -0.12em; }
.reveal-lines .rl-inner { display: inline-block; transform: translateY(110%);
  transition: transform 0.8s cubic-bezier(.16,1,.3,1); will-change: transform; }
.reveal-lines.is-in .rl-inner { transform: translateY(0); }

.reveal-children > * { opacity: 0; transform: translateY(12px);
  transition: opacity 600ms ease, transform 600ms ease; }
.reveal-children.is-in > * { opacity: 1; transform: none; }
.reveal-children.is-in > *:nth-child(1) { transition-delay: 0ms; }
.reveal-children.is-in > *:nth-child(2) { transition-delay: 60ms; }
.reveal-children.is-in > *:nth-child(3) { transition-delay: 120ms; }
.reveal-children.is-in > *:nth-child(4) { transition-delay: 180ms; }
.reveal-children.is-in > *:nth-child(5) { transition-delay: 240ms; }
.reveal-children.is-in > *:nth-child(6) { transition-delay: 300ms; }
.reveal-children.is-in > *:nth-child(7) { transition-delay: 360ms; }
.reveal-children.is-in > *:nth-child(8) { transition-delay: 420ms; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-children > * { opacity: 1 !important; transform: none !important; transition: none !important; }
  .reveal-lines .rl-inner { transform: none !important; transition: none !important; }
}