/* Tokens da LUP. Vermelho e vinho vêm da bandeira da logo (#FC1B43 e #8B0F25);
   o preto com brilho vermelho segue o rascunho do Lovable e o modelo do MK6. */

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../fonts/PlusJakartaSans.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}

:root {
  --red: #FC1B43;            /* bandeira da logo */
  --red-700: #D20E33;        /* vermelho para texto sobre claro (contraste) */
  --red-dark: #8B0F25;       /* a dobra da bandeira */
  --brasa: #FF5470;          /* vermelho para texto sobre preto (contraste) */
  --red-050: #FFEEF1;
  --grad-botao: linear-gradient(135deg, #FF2D52 0%, #C90E31 100%);

  --preto: #08090C;          /* fundo das dobras escuras */
  --ink: #111318;            /* texto sobre claro */
  --ink-2: #3A3D46;
  --muted: #646B78;
  --faint: #9CA3AF;
  --claro-1: rgba(255, 255, 255, .72);   /* texto secundário sobre preto */
  --claro-2: rgba(255, 255, 255, .5);
  --linha-escura: rgba(255, 255, 255, .1);

  --bg: #F3F4F6;
  --surface: #FFFFFF;
  --line: #E8EAEE;
  --line-strong: #DCDFE4;

  /* brilho vermelho em degradê sobre o preto */
  --brilho:
    radial-gradient(70% 90% at 100% 0%, rgba(252, 27, 67, .36) 0%, rgba(139, 15, 37, .16) 45%, transparent 72%),
    radial-gradient(55% 75% at 0% 100%, rgba(139, 15, 37, .36) 0%, transparent 70%);

  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;
  --chanfro: 44px;           /* o corte diagonal da bandeira nos cantos */
  --corte: 72px;             /* altura da diagonal entre dobras */

  --shadow-sm: 0 1px 2px rgba(17, 19, 24, .04), 0 2px 6px rgba(17, 19, 24, .05);
  --shadow-lg: 0 30px 80px rgba(0, 0, 0, .35);

  --sans: "Plus Jakarta Sans", -apple-system, system-ui, "Segoe UI", sans-serif;

  /* escala de texto: todo tamanho do site sai daqui */
  --t-titulo: clamp(36px, min(5.2vw, 8vh), 72px);    /* todo título: topo, dobras e chamada final */
  --t-h3: clamp(24px, 2.6vw, 34px);                  /* título de cartão e citação */
  --t-h4: clamp(19px, 1.7vw, 22px);                  /* título de item (etapas, crenças) */
  --t-numero: clamp(34px, 3.8vw, 50px);              /* números do topo */
  --t-numero-g: clamp(44px, 5vw, 64px);              /* número de destaque (case, radar) */
  --t-lead: 18px;                                    /* abertura do topo */
  --t-texto: 17px;                                   /* descrição de dobra e de cartão */
  --t-apoio: 15px;                                   /* texto de item, botões, rodapé */
  --t-mini: 14px;                                    /* olho, etiquetas, legendas de número */
  --t-rotulo: 13px;                                  /* rótulos (dt), notas */
  --t-selo: 12px;                                    /* numeração e selos em caixa */
  --ls-titulo: -0.045em;                             /* títulos */
  --ls-cartao: -0.035em;                             /* títulos de cartão e citação */
  --shell: 1200px;
  --gutter: 24px;
  --header: 68px;
  --pad: 112px;
}

@media (max-width: 860px) {
  :root { --corte: 40px; --pad: 80px; --chanfro: 32px; }
}
@media (max-width: 620px) {
  :root {
    --gutter: 16px; --header: 60px; --pad: 64px; --corte: 28px; --chanfro: 24px;
    --t-titulo: clamp(28px, min(9vw, 4.6vh), 44px);
    --t-lead: 16px; --t-texto: 16px;
  }
}