/* ==========================================================================
   Jungle — Design tokens
   Valores lidos do Figma (site-fluvimar, node 498:80, breakpoint 1200 px)
   e conferidos contra jungle.com.br.
   ========================================================================== */

/* --------------------------------- Fontes -------------------------------- */
@font-face {
  font-family: "GT Ultra";
  src: url("../fonts/gt-ultra-light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "GT Ultra";
  src: url("../fonts/gt-ultra-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans Pro";
  src: url("../fonts/source-sans-pro-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans Pro";
  src: url("../fonts/source-sans-pro-semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fragment Mono";
  src: url("../fonts/fragment-mono.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ------------------------------- Cores -------------------------------
     Valores lidos do Figma (breakpoint 1200 px). Não alterar no olho.     */
  --c-preto: #121212;          /* fundo do site */
  --c-grafite: #212121;        /* nav, chips de ícone, box do FAQ */
  --c-creme: #f9f4f0;          /* texto claro e fundo da seção Trabalhos */
  --c-branco: #ffffff;

  --c-verde: #34e57b;          /* botões primários */
  --c-verde-claro: #7afcae;    /* destaques de texto, badges, números */
  --c-verde-medio: #85eca4;    /* preenchimento da timeline */
  --c-laranja: #fb9c4c;        /* borda dos avatares de depoimento */

  /* Superfícies
     O body tem um gradiente base que percorre a página inteira; algumas
     seções sobrepõem o seu próprio fundo. Valores lidos de jungle.com.br. */
  --bg-pagina: linear-gradient(#1a1a1a 0%, #212121 100%);
  --bg-hero: #121212;
  --bg-depoimentos: linear-gradient(#212121 0%, #121212 264%);
  --bg-perguntas: linear-gradient(#212121 -102%, #121212 168%);
  --bg-cta: linear-gradient(#161616 0%, #121212 100%);
  --bg: var(--c-preto);
  --bg-nav: rgba(33, 33, 33, 0.85);
  --bg-card: rgba(18, 18, 18, 0.6);        /* cards de serviço */
  --bg-card-claro: rgba(255, 255, 255, 0.05); /* depoimentos, FAQ */
  --bg-chip: rgba(255, 255, 255, 0.08);    /* chip do autor, ícone do FAQ */
  --bg-badge: rgba(122, 252, 174, 0.02);   /* pílula de rótulo */

  /* Texto */
  --texto: var(--c-creme);
  --texto-suave: rgba(255, 255, 255, 0.7);
  --texto-nav: rgba(249, 244, 240, 0.7);
  --texto-fraco: rgba(249, 244, 240, 0.5);
  --texto-faq: rgba(255, 255, 255, 0.87);
  --texto-rodape: #949494;
  --texto-escuro: #000000;

  /* ---------------------------- Tipografia ----------------------------
     GT Ultra Bold nos títulos e botões, GT Ultra Light nas perguntas,
     Source Sans Pro no corpo.                                            */
  --f-display: "GT Ultra", "Times New Roman", serif;
  --f-corpo: "Source Sans Pro", system-ui, -apple-system, sans-serif;
  --f-mono: "Fragment Mono", ui-monospace, Menlo, monospace;

  /* A escala não é fluida: o site no ar troca de degrau em 1200 e em 810
     (breakpoints do Framer), medido em 19/08/2026. Os overrides estão no
     fim deste arquivo. Um clamp contínuo deixava o subtítulo do hero em
     22–23,2 px no desktop, em vez dos 24 px do site no ar.               */
  --t-h1: 4rem;                                       /* 64px       lh 70.4 */
  --t-h2: 3rem;                                       /* 48px       lh 52.8 */
  --t-h3: 2.5rem;                                     /* 40px       lh 44   */
  --t-h4: 1.5rem;                                     /* 24px       lh 33.6 */
  --t-lead: 1.5rem;                                   /* 24px       lh 36 (só o hero) */
  --t-lead-p: 1.25rem;                                /* 20px       lh 32 (seções)   */
  --t-corpo: 1rem;                                    /* 16px       lh 25.6 */
  --t-ui: 1rem;                                       /* 16px  botões e autoria */
  --t-micro: 0.875rem;                                /* 14px       lh 22.4 */
  /* Dois desvios deliberados do site no ar, pedidos em 19/08/2026 por
     legibilidade — o original usa 12 px no chapéu e 16 px no depoimento. */
  --t-chapeu: 0.875rem;                               /* 14px       lh 22.4 (era 12) */
  --t-depoimento: 1.125rem;                           /* 18px       lh 28.8 (era 16) */
  --t-nano: 0.75rem;                                  /* 12px       lh 19.2 */

  /* ----------------------------- Espaçamento --------------------------- */
  --e-1: 0.25rem;  --e-2: 0.5rem;  --e-3: 0.75rem;  --e-4: 1rem;
  --e-5: 1.5rem;   --e-6: 2rem;    --e-7: 3rem;     --e-8: 4rem;

  /* ------------------------------- Layout ------------------------------
     O conteúdo cresce até 1330 px, com 56 px de cada lado. No breakpoint
     de 1200 px isso dá os 1088 px que aparecem no Figma.                   */
  --largura-max: 1330px;
  --gutter: clamp(1.25rem, 4.67vw, 3.5rem);
  --raio: 16px;
  --raio-peq: 8px;
  --raio-nav: 32px;
  --raio-pilula: 99px;

  --secao-y: clamp(3rem, 5.3vw, 4rem);   /* 64px no desktop */

  /* ------------------------------ Movimento ---------------------------- */
  --dur-rapida: 200ms;
  --dur-media: 400ms;
  --dur-lenta: 1100ms;
  --ease-saida: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-padrao: cubic-bezier(0.4, 0, 0.2, 1);

  --z-header: 100;
  --z-menu: 200;
}

/* ==========================================================================
   Degraus tipográficos do site no ar
   Medido em jungle.com.br a 1200/1199 e 810/809 px (19/08/2026):

   estilo            >=1200   810-1199   <810
   h1                   64        51        42
   h2                   48        40        32
   h3                   40        32        32
   h4 / etapa título    24        20        20
   lead do hero         24        20        20
   lead de seção        20        18        18
   etapa texto          20        18        18
   corpo                16        16        16
   botão / autoria      16        14        14
   micro / nano         14 / 12   14 / 12   14 / 12
   número da etapa      56        56        56
   ========================================================================== */
@media (max-width: 1199px) {
  :root {
    --t-h1: 3.1875rem;   /* 51px */
    --t-h2: 2.5rem;      /* 40px */
    --t-h3: 2rem;        /* 32px */
    --t-h4: 1.25rem;     /* 20px */
    --t-lead: 1.25rem;   /* 20px */
    --t-lead-p: 1.125rem;/* 18px */
    --t-ui: 0.875rem;    /* 14px */
  }
}

@media (max-width: 809px) {
  :root {
    --t-h1: 2.625rem;    /* 42px */
    --t-h2: 2rem;        /* 32px */
  }
}