/* Página de vendas do Guia de Montagem de Setup Gamer (home, src/guia-setup.mjs).
   Tudo com prefixo gs- pra não vazar pro resto da loja. Cores fixas da marca
   (verde #11D828), sem depender das variáveis que o tema sazonal troca. */
.gs { --gs-verde: #11D828; --gs-verde-esc: #0a8f1c; --gs-escuro: #0a2e12; --gs-fundo: #041a08; --gs-texto: #1f2a37; --gs-suave: #6b7684; --gs-linha: #e4ebe6; color: var(--gs-texto); font-family: var(--f-inter, Inter), Arial, sans-serif }
.gs *, .gs *::before, .gs *::after { box-sizing: border-box }
.gs h1, .gs h2, .gs h3 { font-family: Archivo, Arial, sans-serif; color: var(--gs-escuro); margin: 0; line-height: 1.15 }
.gs-wrap { max-width: 1180px; margin: 0 auto; padding: 0 16px }
.gs-secao { padding: 56px 0 }
.gs-fundo { background: #f4f8f5 }
.gs-secao h2 { font-size: clamp(24px, 3.2vw, 34px); letter-spacing: -.01em; margin-bottom: 10px }
.gs-lead { color: var(--gs-suave); font-size: 16px; margin: 0 0 26px }
.gs-mini { font-size: 13px; color: var(--gs-suave); margin: 0 }
.gs-centro { text-align: center; margin-top: 10px }

.gs-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--gs-verde); color: #06210a; font: 800 16px/1 Archivo, Arial, sans-serif; text-decoration: none; border: 0; border-radius: 12px; padding: 17px 26px; cursor: pointer; box-shadow: 0 8px 24px rgba(17, 216, 40, .28); transition: transform .15s, box-shadow .15s }
.gs-btn:hover { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(17, 216, 40, .36) }
.gs-btn:disabled { opacity: .6; cursor: wait; transform: none }
.gs-btn-largo { width: 100% }
.gs-btn-sec { background: var(--gs-escuro); color: #fff; box-shadow: none; padding: 12px 16px; font-size: 14px }
.gs-link { display: block; text-align: center; margin-top: 14px; color: var(--gs-verde-esc); font-weight: 700; text-decoration: none }

/* hero */
.gs-hero { background: linear-gradient(90deg, rgba(3,10,4,.96) 0%, rgba(3,10,4,.82) 40%, rgba(3,10,4,.35) 75%, rgba(3,10,4,.55) 100%), url(/assets/img/guia-setup/fundo-hero.webp) center right / cover no-repeat, var(--gs-fundo); color: #fff; padding: 56px 0 64px; position: relative; overflow: hidden }
.gs-hero:before { content: ""; position: absolute; inset: 0; opacity: .5; background-image: linear-gradient(rgba(17, 216, 40, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(17, 216, 40, .06) 1px, transparent 1px); background-size: 44px 44px; pointer-events: none }
.gs-hero-grade { position: relative; display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: center }
.gs-selo { display: inline-block; background: var(--gs-verde); color: #06210a; font: 800 12px/1 Archivo, Arial; letter-spacing: .12em; padding: 8px 12px; border-radius: 99px }
.gs-hero h1 { color: #fff; font-size: clamp(32px, 4.6vw, 54px); letter-spacing: -.02em; margin: 18px 0 16px }
.gs-hero h1 em { font-style: normal; color: var(--gs-verde) }
.gs-sub { font-size: 17px; line-height: 1.6; color: #cfeed3; margin: 0 0 20px; max-width: 600px }
.gs-hero-lista { list-style: none; padding: 0; margin: 0 0 28px; display: grid; gap: 10px }
.gs-hero-lista li { padding-left: 30px; position: relative; font-size: 15.5px; color: #e9f9eb }
.gs-hero-lista li:before { content: "✓"; position: absolute; left: 0; top: -1px; width: 22px; height: 22px; border-radius: 50%; background: rgba(17, 216, 40, .18); color: var(--gs-verde); font-weight: 800; text-align: center; line-height: 22px; font-size: 13px }
.gs-hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px }
.gs-hero-cta .gs-mini { color: #9fd7a7 }
.gs-hero-capa { display: flex; justify-content: center }
.gs-hero-capa img { width: min(100%, 520px); height: auto; filter: drop-shadow(0 30px 50px rgba(0, 0, 0, .6)) drop-shadow(0 0 40px rgba(17, 216, 40, .18)) }

/* faixa */
.gs-faixa { background: var(--gs-escuro); color: #d8f5dc; font-size: 14px }
.gs-faixa-itens { display: flex; flex-wrap: wrap; justify-content: space-around; gap: 10px 24px; padding-top: 16px; padding-bottom: 16px }
.gs-faixa b { color: var(--gs-verde) }

/* cards */
.gs-cards3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 22px }
.gs-card { border: 1px solid var(--gs-linha); border-radius: 16px; padding: 24px; background: #fff }
.gs-card h3 { font-size: 19px; margin: 12px 0 8px }
.gs-card p { margin: 0; color: var(--gs-suave); line-height: 1.55 }
.gs-ico { font-size: 28px }

/* capítulos */
.gs-capitulos { list-style: none; padding: 0; margin: 0 0 36px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 24px }
.gs-capitulos li { display: flex; gap: 14px; align-items: flex-start; background: #fff; border: 1px solid var(--gs-linha); border-radius: 12px; padding: 14px 16px }
.gs-capitulos b { font: 800 14px/1 Archivo, Arial; color: #06210a; background: var(--gs-verde); border-radius: 8px; padding: 7px 8px; flex: none }
.gs-capitulos strong { display: block; color: var(--gs-escuro); font-family: Archivo, Arial }
.gs-capitulos span { font-size: 14px; color: var(--gs-suave) }
.gs-paginas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px }
.gs-paginas figure { margin: 0 }
.gs-paginas img { width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--gs-linha); box-shadow: 0 14px 34px rgba(10, 46, 18, .14); background: #fff }
.gs-paginas figcaption { text-align: center; font-size: 13px; color: var(--gs-suave); margin-top: 10px }

/* erros */
.gs-erros { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 22px }
.gs-erro { border-radius: 14px; padding: 20px 22px; background: #fff7ed; border: 1px solid #fde4c4 }
.gs-erro h3 { font-size: 17px; color: #7c2d12; margin-bottom: 6px }
.gs-erro h3:before { content: "✕ "; color: #ea580c }
.gs-erro p { margin: 0; color: #5b4636; line-height: 1.55 }

/* setups */
.gs-setup { background: #fff; border: 1px solid var(--gs-linha); border-radius: 18px; padding: 22px; margin-bottom: 22px }
.gs-setup-topo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px }
.gs-setup-topo h3 { font-size: 22px }
.gs-setup-topo span { background: #e8f9ea; color: var(--gs-verde-esc); font: 700 12.5px/1.2 Archivo, Arial; border-radius: 99px; padding: 6px 10px }
.gs-setup > p { color: var(--gs-suave); margin: 8px 0 16px }
.gs-produtos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px }
.gs-produtos .cartao-produto { margin: 0 }

/* oferta + checkout */
.gs-oferta { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start }
.gs-inclui { list-style: none; padding: 0; margin: 16px 0 22px; display: grid; gap: 10px }
.gs-inclui li { padding-left: 28px; position: relative }
.gs-inclui li:before { content: "✓"; position: absolute; left: 0; color: var(--gs-verde-esc); font-weight: 800 }
.gs-preco { background: var(--gs-escuro); color: #fff; border-radius: 16px; padding: 20px 22px; display: grid; gap: 4px; margin-bottom: 16px }
.gs-preco span { color: #9fd7a7; font-size: 13px; text-transform: uppercase; letter-spacing: .08em }
.gs-preco strong { font: 800 40px/1.05 Archivo, Arial; color: var(--gs-verde) }
.gs-preco small { color: #cfeed3 }
.gs-garantia { background: #f2fbf3; border: 1px solid #d5f2d9; border-radius: 12px; padding: 14px 16px; margin: 0; color: #2f4537 }
.gs-checkout { background: #fff; border: 1px solid var(--gs-linha); border-radius: 20px; padding: 26px; box-shadow: 0 20px 50px rgba(10, 46, 18, .12) }
.gs-checkout h3 { font-size: 22px; margin-bottom: 4px }
.gs-checkout label { display: block; font-size: 13.5px; font-weight: 600; color: var(--gs-escuro); margin-top: 14px }
.gs-checkout input { display: block; width: 100%; margin-top: 6px; font: 400 16px/1.2 var(--f-inter, Inter), Arial; padding: 13px 14px; border: 1.5px solid #d7dfda; border-radius: 10px; background: #fbfdfb; color: var(--gs-texto) }
.gs-checkout input:focus { outline: none; border-color: var(--gs-verde-esc); box-shadow: 0 0 0 3px rgba(17, 216, 40, .18) }
.gs-checkout input.gs-invalido { border-color: #dc2626 }
.gs-duas { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px }
.gs-erro-form { color: #b91c1c; font-size: 14px; min-height: 20px; margin: 12px 0 6px }
.gs-qr { display: flex; justify-content: center; margin: 18px 0 }
.gs-qr canvas { width: 220px; height: 220px; image-rendering: pixelated; border: 8px solid #fff; box-shadow: 0 0 0 1px var(--gs-linha); border-radius: 8px }
.gs-copia { display: flex; gap: 8px }
.gs-copia input { margin: 0; font-size: 13px; font-family: ui-monospace, Menlo, monospace }
.gs-aguarda { display: flex; align-items: center; gap: 8px; justify-content: center; font-weight: 600; color: var(--gs-escuro); margin: 18px 0 6px }
.gs-ponto { width: 10px; height: 10px; border-radius: 50%; background: var(--gs-verde); animation: gs-pulsa 1.2s infinite }
@keyframes gs-pulsa { 0%, 100% { opacity: .3 } 50% { opacity: 1 } }
.gs-liberado { text-align: center }
.gs-liberado p { color: var(--gs-suave); margin: 8px 0 18px }
.gs-ok { display: inline-flex; width: 58px; height: 58px; border-radius: 50%; background: var(--gs-verde); color: #06210a; font: 800 30px/58px Archivo; justify-content: center; margin-bottom: 10px }

/* faq */
.gs-faq { max-width: 820px }
.gs-faq details { background: #fff; border: 1px solid var(--gs-linha); border-radius: 12px; padding: 16px 18px; margin-top: 12px }
.gs-faq summary { cursor: pointer; font-weight: 700; color: var(--gs-escuro); list-style: none; display: flex; justify-content: space-between; gap: 12px }
.gs-faq summary::-webkit-details-marker { display: none }
.gs-faq summary:after { content: "+"; color: var(--gs-verde-esc); font-size: 20px; line-height: 1 }
.gs-faq details[open] summary:after { content: "–" }
.gs-faq details p { margin: 10px 0 0; color: var(--gs-suave); line-height: 1.6 }

/* final */
.gs-final { background: radial-gradient(100% 120% at 50% 0%, #11451b, var(--gs-fundo)); color: #fff; text-align: center; padding: 64px 0 }
.gs-final h2 { color: #fff; font-size: clamp(24px, 3.4vw, 36px); margin-bottom: 22px }
.gs-final p { margin: 18px 0 0 }
.gs-link-claro { color: #9fd7a7; text-decoration: none; font-weight: 600 }

@media (max-width: 900px) {
  .gs-hero-grade, .gs-oferta { grid-template-columns: 1fr }
  .gs-hero-capa { order: -1 }
  .gs-hero { background: linear-gradient(180deg, rgba(3,10,4,.55) 0%, rgba(3,10,4,.9) 45%, rgba(3,10,4,.97) 100%), url(/assets/img/guia-setup/fundo-hero-m.webp) top center / 180% auto no-repeat, var(--gs-fundo) }
  .gs-hero-capa img { width: min(86%, 360px) }
  .gs-cards3, .gs-paginas { grid-template-columns: 1fr }
  .gs-paginas figure:nth-child(n+2) { display: none }
  .gs-capitulos, .gs-erros { grid-template-columns: 1fr }
  .gs-produtos { grid-template-columns: repeat(2, 1fr) }
}
@media (max-width: 640px) {
  .gs-secao { padding: 40px 0 }
  .gs-hero { padding: 34px 0 44px }
  .gs-btn { width: 100% }
  .gs-duas { grid-template-columns: 1fr }
  .gs-checkout { padding: 20px 16px }
}

/* setups (resumo do que está no guia, sem produto/preço) */
.gs-setup-card h3 { font-size: 21px; margin: 0 0 10px }
.gs-tag { display: inline-block; background: #e8f9ea; color: var(--gs-verde-esc); font: 700 12.5px/1.2 Archivo, Arial; border-radius: 99px; padding: 6px 10px; margin-bottom: 14px }
.gs-setup-card ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px }
.gs-setup-card li { padding-left: 24px; position: relative; color: #3d4a5c; line-height: 1.45 }
.gs-setup-card li:before { content: "✓"; position: absolute; left: 0; color: var(--gs-verde-esc); font-weight: 800 }