@charset "UTF-8";
/* ============================================================
   DESIGN TOKENS — MÉTODO VGP · TAIZE PROTO
   Brandbook v02 · 2026-05-08
   © Squad Gerardinho — Taize Proto · Método VGP

   Uso: importar em qualquer landing/checkout/membros/email
        que precise consumir a identidade oficial da marca.
        Mantém 1:1 com o brandbook_v02.html.
   ============================================================ */

:root {

  /* ==========================================================
     1. CORES
     ========================================================== */

  /* — Primárias — */
  --vgp-azul:           #1A2B48;   /* Azul Profundo · 40% de uso · headers/títulos/rodapé */
  --vgp-azul-deep:      #0F1B30;   /* Variação escura · backgrounds dramáticos */
  --vgp-azul-mid:       #2D4263;   /* Variação média · gradients */
  --vgp-azul-claro:     #E8EDF4;   /* Suave · tags/badges/info-boxes */

  --vgp-dourado:        #C5A059;   /* Dourado · 15% de uso · CTAs/destaques */
  --vgp-dourado-dark:   #A8853F;   /* Hover de CTA dourado */
  --vgp-dourado-soft:   #D9BC83;   /* Variação clara · gradients dourados */
  --vgp-dourado-claro:  #F5EDD8;   /* Background de insight/destaque */

  /* — Neutras premium — */
  --vgp-cream:          #FAF7F2;   /* Off-white sofisticado · background principal v02 */
  --vgp-champagne:      #E8DCC0;   /* Neutro premium */
  --vgp-cinza-soft:     #F4F7F9;   /* Cinza Soft original · 40% · seções alternadas */
  --vgp-off-white:      #F8F9FB;   /* Background sutil */
  --vgp-branco:         #FFFFFF;   /* Branco · 40% · cards/áreas de conteúdo */

  /* — Texto — */
  --vgp-texto:          #1A1F2E;   /* Texto principal v02 · alta legibilidade */
  --vgp-texto-original: #2C3E50;   /* Texto principal v01 · compatibilidade */
  --vgp-texto-leve:     #6B7B8D;   /* Texto secundário */
  --vgp-texto-mute:     #94A0AE;   /* Mais discreto · legendas */

  /* — Borda — */
  --vgp-borda:          #E5DFD5;   /* Borda principal · cream-tinted */
  --vgp-borda-soft:     #EFEAE0;   /* Borda sutil · cards */
  --vgp-borda-original: #E2E8F0;   /* Borda v01 · compatibilidade */

  /* — Status (UI) — */
  --vgp-success:        #1E8449;
  --vgp-success-bg:     rgba(30,132,73,0.1);
  --vgp-warn:           #C0392B;
  --vgp-warn-bg:        rgba(192,57,43,0.1);

  /* ==========================================================
     2. TIPOGRAFIA
     ========================================================== */

  --vgp-font-display:   'Playfair Display', 'Times New Roman', Georgia, serif;
  --vgp-font-accent:    'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --vgp-font-body:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --vgp-font-mono:      'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  /* — Escalas (desktop) — */
  --vgp-fs-h1:          2.4rem;
  --vgp-fs-h2:          1.6rem;
  --vgp-fs-h3:          1.1rem;
  --vgp-fs-quote:       1.4rem;
  --vgp-fs-body:        1rem;
  --vgp-fs-small:       0.85rem;
  --vgp-fs-label:       0.72rem;

  /* — Pesos — */
  --vgp-fw-light:       300;
  --vgp-fw-regular:     400;
  --vgp-fw-medium:      500;
  --vgp-fw-semi:        600;
  --vgp-fw-bold:        700;
  --vgp-fw-extra:       800;

  /* — Letter-spacing — */
  --vgp-tracking-tight: -0.02em;
  --vgp-tracking-snug:  -0.01em;
  --vgp-tracking-base:  0;
  --vgp-tracking-wide:  0.04em;
  --vgp-tracking-wider: 0.08em;
  --vgp-tracking-uppercase: 0.18em;
  --vgp-tracking-eyebrow: 0.32em;

  /* — Line-height — */
  --vgp-lh-tight:       1.05;
  --vgp-lh-snug:        1.2;
  --vgp-lh-base:        1.7;
  --vgp-lh-loose:       1.75;

  /* ==========================================================
     3. SPACING (8pt grid)
     ========================================================== */

  --vgp-s1:             8px;
  --vgp-s2:             16px;
  --vgp-s3:             24px;
  --vgp-s4:             32px;
  --vgp-s5:             48px;
  --vgp-s6:             64px;
  --vgp-s7:             80px;
  --vgp-s8:             96px;
  --vgp-s9:             128px;
  --vgp-s10:            160px;

  /* ==========================================================
     4. RADIUS
     ========================================================== */

  --vgp-radius-sm:      8px;
  --vgp-radius-md:      12px;
  --vgp-radius-lg:      16px;
  --vgp-radius-xl:      20px;
  --vgp-radius-2xl:     24px;
  --vgp-radius-pill:    999px;

  /* ==========================================================
     5. SOMBRAS
     ========================================================== */

  --vgp-shadow-soft:    0 1px 2px rgba(15,27,48,0.04), 0 4px 16px rgba(15,27,48,0.04);
  --vgp-shadow-mid:     0 4px 12px rgba(15,27,48,0.06), 0 16px 40px rgba(15,27,48,0.08);
  --vgp-shadow-deep:    0 12px 32px rgba(15,27,48,0.10), 0 32px 80px rgba(15,27,48,0.12);
  --vgp-shadow-gold:    0 8px 24px rgba(197,160,89,0.18);
  --vgp-shadow-gold-hover: 0 12px 28px rgba(197,160,89,0.32);

  /* ==========================================================
     6. TRANSIÇÕES
     ========================================================== */

  --vgp-t-fast:         180ms cubic-bezier(.4,0,.2,1);
  --vgp-t-base:         320ms cubic-bezier(.4,0,.2,1);
  --vgp-t-slow:         600ms cubic-bezier(.4,0,.2,1);

  /* ==========================================================
     7. CONTAINERS
     ========================================================== */

  --vgp-container:      1180px;
  --vgp-container-md:   920px;
  --vgp-container-sm:   680px;

  /* ==========================================================
     8. BREAKPOINTS (referência — não consumível em CSS)
     ========================================================== */
  /* mobile:    < 480px  */
  /* tablet:    < 768px  */
  /* desktop:   < 1024px */
  /* wide:      ≥ 1180px */
}


/* ============================================================
   UTILITY CLASSES (opcionais)
   Aplicáveis diretamente em landing pages para tipografia rápida.
   ============================================================ */

.vgp-display    { font-family: var(--vgp-font-display); }
.vgp-accent     { font-family: var(--vgp-font-accent); font-style: italic; }
.vgp-body       { font-family: var(--vgp-font-body); }
.vgp-mono       { font-family: var(--vgp-font-mono); letter-spacing: -0.01em; }

.vgp-eyebrow {
  font-family: var(--vgp-font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--vgp-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--vgp-dourado-dark);
}

.vgp-h1 {
  font-family: var(--vgp-font-display);
  font-size: clamp(32px, 5vw, 56px);
  font-weight: 600;
  line-height: var(--vgp-lh-tight);
  letter-spacing: var(--vgp-tracking-tight);
  color: var(--vgp-azul-deep);
}

.vgp-quote {
  font-family: var(--vgp-font-accent);
  font-style: italic;
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.55;
  color: var(--vgp-texto-leve);
}


/* ============================================================
   COMPONENT — BOTÕES OFICIAIS
   ============================================================ */

.vgp-btn {
  display: inline-block;
  font-family: var(--vgp-font-body);
  font-size: 14px;
  font-weight: var(--vgp-fw-semi);
  letter-spacing: var(--vgp-tracking-wide);
  padding: 14px 32px;
  border-radius: var(--vgp-radius-sm);
  text-decoration: none;
  transition: all var(--vgp-t-base);
  cursor: pointer;
  border: none;
}
.vgp-btn-primary {
  background: var(--vgp-dourado);
  color: var(--vgp-branco);
  box-shadow: var(--vgp-shadow-gold);
}
.vgp-btn-primary:hover {
  transform: translateY(-2px);
  background: var(--vgp-dourado-dark);
  box-shadow: var(--vgp-shadow-gold-hover);
}
.vgp-btn-secondary {
  background: var(--vgp-azul-deep);
  color: var(--vgp-branco);
}
.vgp-btn-secondary:hover {
  transform: translateY(-2px);
  background: var(--vgp-azul);
}
.vgp-btn-outline {
  background: transparent;
  color: var(--vgp-azul-deep);
  border: 2px solid var(--vgp-azul-deep);
}
.vgp-btn-outline:hover {
  background: var(--vgp-azul-deep);
  color: var(--vgp-branco);
}


/* ============================================================
   ACESSIBILIDADE — REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}