/* =========================================================
   RASPOU GANHOU — STYLES (organizado por seções)
   Arquivo: assets/css/styles.css
========================================================= */

/* ===== 0) VARIÁVEIS & BASE ===== */
:root{
  --bg:#0b0b0b;
  --card: rgba(255,255,255,.06);
  --border: rgba(255,255,255,.14);
  --muted:#b9b9b9;

  --brand:#490dbd;
  --brand-2:#5d20de;

  --green:#25D366;

  --sticky-h: 0px; /* calculado via JS quando o sticky aparece */
}

body{ background:var(--bg); color:#fff; }
a{ color:inherit; }

/* helpers (pra não repetir inline style no HTML) */
.rg-muted{ color: var(--muted); }
.rg-text{ color:#dcdcdc; }
.rg-bd{ border-color: rgba(255,255,255,.18) !important; }
.rg-img-border{ border-color: rgba(255,255,255,.14) !important; }

.glass{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
}

/* Âncoras não ficam escondidas (considera sticky + header) */
section{ scroll-margin-top: calc(90px + var(--sticky-h)); }

/* Título padrão das seções */
.section-title{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 12px;
  margin-bottom: 14px;
}



/* ===== 0.2) FUNDO DAS SEÇÕES (BRANCO / CINZA) ===== */
.rg-band--white{ background:#ffffff; color:#111; }
.rg-band--gray{ background:#f4f5f7; color:#111; }

/* Em seções claras, ajusta textos auxiliares */
.rg-band--white .rg-muted,
.rg-band--gray .rg-muted{ color: rgba(17,17,17,.65); }

.rg-band--white .rg-text,
.rg-band--gray .rg-text{ color: rgba(17,17,17,.85); }

/* Ajuste do divisor do título nas seções claras */
.rg-band--white .section-title.rg-title-center::after,
.rg-band--gray .section-title.rg-title-center::after{
  background: rgba(17,17,17,.18);
}

/* ===== 0.1) LARGURA & RESPIRO (ESTILO ONE-PAGE) ===== */
@media (min-width: 1200px){
  .container{ max-width: 1100px; }
}

/* Seções com mais “respiro” (sem depender de mt-5) */
.rg-section{
  padding: 48px 0;
}

/* Títulos no centro (estilo OneProPage) */
.section-title.rg-title-center{
  justify-content: center;
  text-align: center;
  margin-bottom: 22px;
}
.section-title.rg-title-center > div{
  width: 100%;
  text-align: center;
}
.section-title.rg-title-center::after{
  content:"";
  display:block;
  width: 64px;
  height: 2px;
  margin: 12px auto 0;
  background: rgba(255,255,255,.22);
  border-radius: 999px;
}

/* Cards/containers mais “clean” */
.glass{
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 18px;
}


/* ===== 1) HERO — COMPRA PREMIADA (SEÇÃO 1) ===== */
.rg-hero-splash{
  margin-top: 18px;
}
.rg-hero-avatar{
  width: 100%;
  height: auto;

  /* tamanho inspirado no estilo do onepropage (bem menor) */
  max-width: 150px;
    max-height: 220px;
  }
}

.rg-hero-title{
  font-size: clamp(30px, 4vw, 44px);
  letter-spacing: -0.6px;
  line-height: 1.05;
}
.rg-hero-sub{
  font-size: 18px;
  color: #eaeaea;
}

/* ===== TOPBAR ===== */
#rgTopbar.rg-topbar{
  background: #0993C9;
  border-bottom: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(10px);
  padding: 10px 0;
}

#rgTopbar .rg-topbar-text{
  color:#fff;
  font-size: 13px;
  font-weight: 800;
  text-align: center;
}

/* ===== 2) HEADER (V1) ===== */
.rg-header-1{
  background: #ffffff;
  border-bottom: 1px solid rgba(0,0,0,.10);
  padding: 17px 0; /* +20% (de 14px) */
  color: #111;
}

/* Ajustes de cor dentro do header branco */
.rg-header-1 .rg-muted{ color: rgba(17,17,17,.65); }
.rg-header-1 .nav-link-custom{ color:#111; opacity:.9; }
.rg-header-1 .nav-link-custom:hover{ opacity:1; text-decoration:underline; }

/* Marca “RG” (quadradinho) */
.brand-mark{
  width: 50px; height: 50px; /* +20% (de 42px) */
  border-radius: 14px;
  display:grid;
  place-items:center;
  background: rgba(73, 13, 189, .18);
  border: 1px solid rgba(73, 13, 189, .35);
  color: #fff;
  font-weight: 900;
  letter-spacing: .5px;
  user-select:none;
}


/* ===== 3) BOTÕES ===== */
.btn-brand{
  background: var(--brand);
  border-color: var(--brand);
  color:#fff;
  font-weight: 900;
  box-shadow: 0 0 0 .18rem rgba(73,13,189,.20);
}
.btn-brand:hover{
  background: var(--brand-2);
  border-color: var(--brand-2);
  color:#fff;
}

.btn-whats{
  background: var(--green);
  border-color: var(--green);
  color:#0b0b0b;
  font-weight: 900;
}
.btn-whats:hover{
  background:#1fb85a;
  border-color:#1fb85a;
  color:#0b0b0b;
}

.badge-soft{
  display:inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(73, 13, 189, .18);
  border: 1px solid rgba(73, 13, 189, .35);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
}

.rg-badge-brand{
  background: rgba(73,13,189,.22);
  border:1px solid rgba(73,13,189,.45);
  color:#fff;
}


/* ===== 4) STICKY HEADER (V2) ===== */
.rg-sticky{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1200;

  background: #ff6f01;
  border-bottom: 1px solid rgba(0,0,0,.12);

  /* escondido por padrão */
  transform: translateY(-110%);
  opacity: 0;
  pointer-events: none;
  transition: transform .18s ease, opacity .18s ease;
}

/* sticky ativo */
.rg-sticky.is-on{
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

/* quando sticky aparece, empurra o body pra baixo */
body.has-sticky{ padding-top: var(--sticky-h); }

/* visual estilo “header-main” */
.header-main{ padding: 12px 0; } /* +20% (de 10px) */
.header-row{ align-items:center; }

/* links dentro do sticky */
.rg-sticky .nav-link-custom{
  color:#fff;
  opacity:.95;
}
.rg-sticky .nav-link-custom:hover{
  opacity:1;
  text-decoration:underline;
}

/* logos (normal / sticky) */
.site-logo,
.sticky-logo{
  height: 53px; /* +20% (de 44px) */
  width: auto;
  display: block;
}
.sticky-logo{ display:none; }

/* quando sticky está ON, troca a logo */
body.has-sticky .site-logo{ display:none; }
body.has-sticky .sticky-logo{ display:block; height: 46px; } /* +20% (de 38px) */


/* ===== 5) KITS ===== */
.kit-price{
  font-size: 34px;
  font-weight: 900;
  letter-spacing: -0.5px;
}
.kit-note{
  color: var(--muted);
  font-size: 13px;
}
.rg-list{ color:#eaeaea; }
.rg-highlight{ border-color: rgba(73,13,189,.45); }


/* ===== 6) SCRATCH (CANVAS) ===== */
.scratch-area{
  position:relative;
  width:100%;
  border-radius:14px;
  overflow:hidden;
  border:1px solid var(--border);
  background:#000;
  user-select:none;
  -webkit-user-select:none;
}
.scratch-base{
  display:block;
  width:100%;
  height:auto;
}
.scratch-canvas{
  position:absolute;
  z-index:10;
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
  cursor:crosshair;
  border-radius:10px;
}
.legend{
  font-size:13px;
  color: var(--muted);
}


/* ===== 7) ACCORDION ===== */
.rg-acc-bd{
  border-color: rgba(255,255,255,.14) !important;
}


/* ===== 8) FOOTER ===== */
footer{
  color: var(--muted);
  border-top: 1px solid var(--border);
}

/* FIX Header V1: logo + menu + botão sempre alinhados */
#rgHeader1 .site-logo{
  height: 52px;
  width: 52px;         /* logo quadrado */
  object-fit: contain;
  display: block;
}

#rgHeader1 nav{
  white-space: nowrap;
}

/* Cards em seções claras */
.rg-band--white .glass,
.rg-band--gray .glass{
  background: #ffffff;
  border-color: rgba(0,0,0,.10);
  color:#111;
}
.rg-band--white .glass .rg-text,
.rg-band--gray .glass .rg-text{ color: rgba(17,17,17,.85); }
.rg-band--white .glass .rg-list,
.rg-band--gray .glass .rg-list{ color: rgba(17,17,17,.85); }
.rg-band--white .legend,
.rg-band--gray .legend{ color: rgba(17,17,17,.65); }

/* Botões outline em seções claras */
.rg-band--white .btn-outline-light,
.rg-band--gray .btn-outline-light{
  color:#111;
  border-color: rgba(0,0,0,.22);
}
.rg-band--white .btn-outline-light:hover,
.rg-band--gray .btn-outline-light:hover{
  background: rgba(0,0,0,.05);
  border-color: rgba(0,0,0,.28);
  color:#111;
}