/* ============================================================
   COMAX — Design tokens
   Extraídos do Figma: LP_COMAX (l708z9NvHdXcoryjRQzgvU)
   ============================================================ */

:root {
  /* --- Cores ------------------------------------------------ */
  --navy-950: #131622;   /* footer */
  --navy-900: #151a2e;   /* menu, hero, botão escuro */
  --navy-800: #2b2e3f;   /* CTA final, títulos de card */
  --yellow:   #ffba31;   /* cards, faixa de marcas, destaques */
  --red:      #bc0000;   /* CTA primário */
  --red-dark: #9e0000;   /* hover do CTA */
  --ink:      #1e1e1e;   /* títulos sobre fundo claro */
  --white:    #ffffff;

  --grad-light: linear-gradient(219.16deg, #ffffff 22.94%, #e6e6e6 77.2%);
  --grad-navy:  linear-gradient(180deg, #2b2e3f 0%, #151a2e 100%);

  /* --- Tipografia ------------------------------------------- */
  --font: 'Sora', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --fs-h1:    48px;  /* hero */
  --fs-h2:    36px;  /* títulos de seção */
  --fs-h3:    25px;  /* "Onde encontrar?" */
  --fs-card:  24px;  /* título dos cards */
  --fs-btn:   20px;  /* botão grande */
  --fs-body:  16px;
  --fs-small: 13px;  /* texto do rodapé */

  /* --- Layout ----------------------------------------------- */
  --container: 1366px;  /* 1920 - 277*2 */
  --gutter: 24px;

  --sec-pad-y: 100px;

  /* --- Raios ------------------------------------------------ */
  --r-sm:    10px;  /* botão do menu */
  --r-md:    20px;  /* botão grande */
  --r-img:   40px;  /* imagens mascaradas */
  --r-card:  36px;  /* cards amarelos */

  /* --- Movimento -------------------------------------------- */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --dur: .3s;
}

/* Escala fluida: o layout nasceu em 1920px e precisa respirar abaixo disso */
@media (max-width: 1100px) {
  :root {
    --fs-h1: 38px;
    --fs-h2: 30px;
    --fs-card: 21px;
    --fs-btn: 18px;
    --sec-pad-y: 72px;
  }
}

@media (max-width: 680px) {
  :root {
    --fs-h1: 30px;
    --fs-h2: 25px;
    --fs-h3: 21px;
    --fs-card: 19px;
    --fs-btn: 16px;
    --fs-body: 15px;
    --r-card: 24px;
    --r-img: 24px;
    --sec-pad-y: 56px;
    --gutter: 20px;
  }
}