/* ============================================================
   Novo Jogo — design system
   Troque as urls quando os arquivos estiverem em /assets.
   Se o arquivo ainda não existir, o fundo de reserva aparece.
   ============================================================ */

:root {
  /* Cor */
  --ink: #121212;
  --ink-soft: #1c1c1c;
  --paper: #f3efe6;
  --paper-deep: #e7e1d4;
  --card: #fffdf8;
  --yellow: #ffe34a;
  --tape: #f5c518;
  --red: #e10600;
  --red-dark: #b10500;
  --muted: #5e584e;
  --line: rgba(18, 18, 18, 0.1);
  --on-ink: #f6f3ec;
  --on-ink-dim: rgba(246, 243, 236, 0.72);

  /* Tipo */
  --font-display: "Anton", "Arial Narrow", Impact, sans-serif;
  --font-heading: "Barlow Condensed", "Arial Narrow", Impact, sans-serif;
  --font-body: "Inter", "Segoe UI", sans-serif;

  /* Escala */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-md: 1.0625rem;
  --text-lg: clamp(1.35rem, 2vw, 1.7rem);
  --title: clamp(2.4rem, 4.6vw, 4.15rem);
  --hero: clamp(4.6rem, 10vw, 8.4rem);

  /* Espaço */
  --wrap: 1120px;
  --gutter: 1.25rem;
  --section: clamp(3.5rem, 6vw, 5.25rem);
  --radius: 16px;
  --radius-sm: 4px;

  /* Sombra */
  --shadow-card: 0 14px 34px rgba(48, 36, 12, 0.07);
  --shadow-timer: 0 16px 40px rgba(0, 0, 0, 0.16);
  --shadow-sheet: 0 22px 50px rgba(0, 0, 0, 0.38);

  /* Hero: bg1.png no celular, bg1-desktop.png a partir de 900px */
  --img-hero: url("../img/hero-mobile.webp");
  --img-hero-desktop: url("../img/hero-desktop.webp");
  /* Textura das faixas bege e rasgo entre as seções */
  --paper-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.32 0 0 0 0 0.26 0 0 0 0 0.16 0 0 0 0.7 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --paper-fiber: repeating-linear-gradient(
    96deg,
    transparent 0 2px,
    rgba(255, 252, 245, 0.28) 2px 3px,
    transparent 3px 9px,
    rgba(62, 44, 22, 0.045) 9px 10px
  );
  --img-urgencia: none;
  --img-problema: url("../img/problema-mobile.webp");
  --img-problema-desktop: url("../img/problema-desktop.webp");
  --img-papel: url("../img/guia-bg.webp");
  --img-publico: url("../assets/bg-publico.jpg");
  --img-provas: none;
  --img-fechamento: url("../assets/bg-fechamento.jpg");
  --img-foto: url("../assets/foto-empresario.jpg");
  --img-mockup: url("../assets/mockup-produto.png");

  /* Rasgo entre seções. none = rasgo em CSS.
     Ex.: --img-seam: url("../assets/seam.png"); */
  --img-seam: none;

  --tear: polygon(
    0% 46%,
    1.6% 72%,
    3.1% 38%,
    4.8% 80%,
    6.4% 44%,
    8.2% 70%,
    9.7% 33%,
    11.5% 76%,
    13.4% 48%,
    15.2% 68%,
    17% 36%,
    18.8% 78%,
    20.6% 42%,
    22.5% 74%,
    24.4% 34%,
    26.2% 66%,
    28.1% 46%,
    30% 82%,
    31.8% 40%,
    33.6% 71%,
    35.5% 32%,
    37.4% 68%,
    39.2% 44%,
    41% 77%,
    42.8% 36%,
    44.6% 70%,
    46.4% 48%,
    48.2% 80%,
    50% 38%,
    51.8% 72%,
    53.6% 44%,
    55.4% 76%,
    57.2% 33%,
    59% 68%,
    60.8% 46%,
    62.6% 78%,
    64.4% 36%,
    66.2% 70%,
    68% 42%,
    69.8% 74%,
    71.6% 34%,
    73.4% 66%,
    75.2% 48%,
    77% 79%,
    78.8% 38%,
    80.6% 71%,
    82.4% 44%,
    84.2% 76%,
    86% 32%,
    87.8% 68%,
    89.6% 46%,
    91.4% 74%,
    93.2% 36%,
    95% 70%,
    96.8% 42%,
    98.4% 66%,
    100% 40%,
    100% 100%,
    0% 100%
  );
}