/* ══════════════════════════════════════════════════
       TOKENS — colour gradient system, por paleta
       Padrão: Rosé Profundo
    ══════════════════════════════════════════════════ */
    :root {
      --g1: #1f1f22;
      --g2: #3a3a3e;
      --g3: #8a8a90;
      --g4: #a8a8ad;
      --g5: #d2d2d5;
      --g6: #f2f2f4;

      --base-dark:    var(--g1);
      --base-deep:    var(--g2);
      --base-mid:     var(--g3);
      --base-soft:    var(--g4);
      --base-light:   var(--g6);

      --accent-dark:  var(--g3);
      --accent:       var(--g5);
      --accent-light: var(--g6);

      --text-main:     var(--g6);
      --text-soft:     color-mix(in srgb, var(--g6) 72%, transparent);
      --text-inverted: var(--g1);

      --card-bg:       color-mix(in srgb, var(--g3) 72%, transparent);
      --card-bg-hover: color-mix(in srgb, var(--g4) 68%, transparent);

      --border-soft:   color-mix(in srgb, var(--g5) 26%, transparent);
      --border-strong: color-mix(in srgb, var(--g6) 42%, transparent);
      --shadow-color:  color-mix(in srgb, var(--g1) 62%, transparent);

      --green:     #25D366;
      --radius:    16px;
      --container: 1120px;
      --ease:      cubic-bezier(.2,.7,.2,1);
      --header-h:  68px;
      --marquee-h: 52px;
      --section-y: clamp(38px, 5vw, 56px);
      --section-y-compact: clamp(26px, 4vw, 42px);
    }

    *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
    html { scroll-behavior: smooth; overflow-x: hidden; -webkit-text-size-adjust: 100%; background: var(--g1); }
    img, svg { display: block; max-width: 100%; }
    a { color: inherit; text-decoration: none; }
    button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }

    body {
      font-family: 'Manrope', system-ui, -apple-system, sans-serif;
      font-weight: 500;
      letter-spacing: -0.01em;
      color: var(--text-main);
      line-height: 1.6;
      overflow-x: hidden;
      position: relative;
      -webkit-font-smoothing: antialiased;
      background:
        radial-gradient(circle at 50% -10%, color-mix(in srgb, var(--g2) 55%, transparent), transparent 38%),
        radial-gradient(circle at 82% 18%,  color-mix(in srgb, var(--g3) 12%, transparent), transparent 32%),
        radial-gradient(circle at 14% 80%,  color-mix(in srgb, var(--g2) 18%, transparent), transparent 36%),
        linear-gradient(180deg, var(--g1) 0%, var(--g2) 50%, var(--g1) 100%);
      transition: background .45s var(--ease), color .3s;
    }

    /* ── TIPOGRAFIA ── */
    p, .hero p.sub, .benefit p, .step p, .faq details p, .quote blockquote {
      font-family: 'Manrope', system-ui, sans-serif;
      font-weight: 400; letter-spacing: -0.005em;
    }
    .btn { font-family: 'Manrope', system-ui, sans-serif; font-weight: 800; letter-spacing: -0.01em; }
    .hero-kicker, .eyebrow { font-family: 'Manrope', system-ui, sans-serif; font-weight: 800; letter-spacing: 1.6px; }
    .hero-title { font-family: 'Bricolage Grotesque', 'Manrope', system-ui, sans-serif; font-weight: 800; }
    .hero-title-highlight { font-family: inherit; font-weight: 800; }
    .hero-feature-card h3, .section-head h2,
    .benefit h3, .step h3, .faq summary {
      font-family: 'Manrope', system-ui, sans-serif; font-weight: 800;
    }

    main { position: relative; z-index: 1; padding-top: 0; }

    /* ── LAYOUT ── */
    .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 22px; }
    section { padding-block: 76px; position: relative; }

    .eyebrow {
      display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 2.4px;
      text-transform: uppercase; color: var(--accent); margin-bottom: 14px;
    }
    .section-head { max-width: 640px; margin: 0 auto 52px; text-align: center; }
    .section-head h2 {
      font-size: clamp(1.9rem, 4.5vw, 2.8rem); font-weight: 800;
      letter-spacing: -0.025em; line-height: 1.13; color: var(--text-main); text-wrap: balance;
    }
    .section-head p { color: var(--text-soft); font-size: 1.05rem; margin-top: 14px; }

    /* ── SECTION BACKGROUNDS — alternância escuro / claro ── */
    /* Vantagens: tom médio-claro (g3 → g2) — contrasta com o hero escuro */
    #vantagens {
      position: relative;
      padding-block-start: 28px;
      overflow: hidden;
      background: url('../media/backgrounds/vantagens-bg.png?v=20260616-03') 30% 15%/cover no-repeat;
    }
    /* FILTRO CLARO SOBRE A IMAGEM DA SEÇÃO POR QUE A MAJU (mantém o texto preto legível) */
    #vantagens::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      background:
        linear-gradient(180deg, rgba(255,255,255,.45) 0%, rgba(255,255,255,.20) 45%, rgba(255,255,255,.50) 100%);
    }
    #vantagens .container { position: relative; z-index: 1; max-width: 1240px; }
    #vantagens .vantagens-char {
      position: absolute;
      left: -180px;
      top: 140px;
      height: 92%;
      width: auto;
      object-fit: contain;
      object-position: top left;
      transform: rotate(-18deg) translateY(-10px);
      transform-origin: top center;
      z-index: 0;
      pointer-events: none;
      user-select: none;
    }
    @media (max-width: 900px) {
      #vantagens .vantagens-char { height: 48%; opacity: 0.3; }
    }
    @media (max-width: 640px) {
      #vantagens .vantagens-char { display: none; }
    }
    #vantagens .eyebrow { color: #000; }
    #vantagens .section-head h2 { color: #000; text-shadow: none; }
    #vantagens .section-head p { color: rgba(0,0,0,.78); }
    /* Como funciona: imagem de fundo "teste 3" */
    #como-funciona {
      position: relative;
      overflow: hidden;
      background-color: #0a0c14;
    }
    /* fundo antigo desativado: o fundo agora vem do wrapper .final-continuous-bg */
    #como-funciona::before {
      content: none !important;
      display: none !important;
    }
    #como-funciona .container { position: relative; z-index: 1; }
    /* texto preto */
    #como-funciona .eyebrow { color: #000; }
    #como-funciona .section-head h2,
    #como-funciona .step h3 { color: #000; }
    #como-funciona .section-head p,
    #como-funciona .step p { color: rgba(0,0,0,.78); }
    #vantagens, #como-funciona, section[aria-label="Números da loja"] { transition: background .45s var(--ease); }
    #vantagens .section-head { margin-bottom: 40px; }

    /* ════════════════════════════════════════════════════
       SECTION DIVIDERS — apenas uma linha amarela fina e
       quebrada (estilo oficial Free Fire), sobreposta à
       emenda das seções. Sem fundo, sem altura visual: a
       arte real de cada seção aparece naturalmente por trás.
    ════════════════════════════════════════════════════ */
    /* DIVISOR FREE FIRE — SOMENTE LINHA, SEM FUNDO */
    .ff-band {
      position: relative;
      height: 0 !important;
      min-height: 0 !important;
      margin: 0 !important;
      padding: 0 !important;
      background: transparent !important;
      overflow: visible !important;
      pointer-events: none;
      z-index: 8;
      line-height: 0;
      isolation: isolate;
    }

    .ff-band::before,
    .ff-band::after {
      content: none !important;
      display: none !important;
    }

    .ff-divider-line {
      position: absolute;
      left: 0;
      right: 0;
      top: -2px;
      width: 100%;
      height: 28px;
      display: block;
      pointer-events: none;
      overflow: visible;
      z-index: 9;
    }

    .ff-divider-line path {
      fill: none;
      stroke: #f7a31b;
      stroke-width: 3;
      stroke-linecap: square;
      stroke-linejoin: miter;
      vector-effect: non-scaling-stroke;
    }

    /* classes existentes mantidas apenas para organização — nunca pintam fundo */
    .ff-band--hero-light,
    .ff-band--white-dark,
    .ff-band--dark-dark,
    .ff-band--dark-light {
      background: transparent !important;
    }

    /* ajuste fino de posição por seção */
    .ff-band--hero-light .ff-divider-line { top: -3px; }
    .ff-band--white-dark .ff-divider-line { top: -2px; }
    .ff-band--dark-dark  .ff-divider-line { opacity: .88; }
    .ff-band--dark-light .ff-divider-line { opacity: .9; }

    @media (max-width: 640px) {
      .ff-divider-line {
        height: 20px;
        top: -1px;
      }
      .ff-divider-line path {
        stroke-width: 2;
      }
    }