/* ==========================================================================
   Gift Card Pro — Landing Pages
   TUDO escopado sob .gcp-lp. Nenhum seletor global.
   Motivo: Woodmart + Elementor carregam MUITA regra. Sem escopo e sem reset
   local, o HTML da landing herda estilo do tema e quebra.
   ========================================================================== */

.gcp-lp {
  /* ---- tokens que NAO mudam por marca ---- */
  --gcp-tinta: #14161A;
  --gcp-tinta-2: #5B6270;
  --gcp-borda: #E3E6EC;
  --gcp-fundo: #FFFFFF;
  --gcp-fundo-2: #F7F8FA;
  --gcp-radius: 14px;
  --gcp-radius-sm: 9px;
  --gcp-sombra: 0 1px 2px rgba(16, 20, 28, .05), 0 8px 24px rgba(16, 20, 28, .06);
  --gcp-max: 1120px;
  --gcp-gap: clamp(48px, 7vw, 96px);
  --gcp-fonte: inherit;

  /* altura do header sticky do tema, medida em tempo real pelo lp.js.
     0px e o fallback: sem JS, ou tema sem header fixo, nada quebra. */
  --gcp-header-h: 0px;
  --gcp-nav-h: 54px;

  /* as variaveis --gcp-primaria / --gcp-escura / --gcp-clara
     vem inline do PHP, por marca */

  font-family: var(--gcp-fonte);
  color: var(--gcp-tinta);
  background: var(--gcp-fundo);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;

  /* ---- neutralizacao do esquema de cor do tema ----
     O Woodmart esta em "color scheme light" (texto claro para fundo escuro) e
     pinta TODO heading por variavel:
         :is(h1,h2,h3,h4,h5,h6){ color: var(--wd-entities-title-color) }
     Com --wd-entities-title-color = #FFF, todo titulo nosso saia branco: some
     no fundo claro e some no card branco. Redefinir as variaveis AQUI DENTRO
     conserta tudo de uma vez, inclusive o que a gente esquecer de declarar, e
     nao vaza porque esta escopado em .gcp-lp.
     A cor explicita nos headings, mais abaixo, e o cinto de seguranca: se o
     tema trocar o nome da variavel numa atualizacao, a pagina continua legivel. */
  --wd-entities-title-color: var(--gcp-tinta);
  --wd-title-color: var(--gcp-tinta);
  --wd-text-color: var(--gcp-tinta-2);
  --color-gray-800: var(--gcp-tinta);
  --color-gray-900: var(--gcp-tinta);
}

/* ---- reset local: neutraliza herança do tema ---- */
.gcp-lp *,
.gcp-lp *::before,
.gcp-lp *::after {
  box-sizing: border-box;
}

.gcp-lp h1,
.gcp-lp h2,
.gcp-lp h3,
.gcp-lp h4,
.gcp-lp p,
.gcp-lp ul,
.gcp-lp ol,
.gcp-lp figure,
.gcp-lp table,
.gcp-lp blockquote {
  margin: 0;
  padding: 0;
}

.gcp-lp ul,
.gcp-lp ol {
  list-style: none;
}

.gcp-lp img,
.gcp-lp svg {
  max-width: 100%;
  height: auto;
  display: block;
}

.gcp-lp a {
  color: inherit;
  text-decoration: none;
}

.gcp-lp button {
  font: inherit;
  cursor: pointer;
  border: 0;
  background: none;
}

.gcp-lp h1 {
  font-size: clamp(32px, 4.6vw, 53.6px);
  line-height: 1.08;
  letter-spacing: -.022em;
  font-weight: 800;
}

.gcp-lp h2 {
  font-size: clamp(24.8px, 3vw, 36.8px);
  line-height: 1.16;
  letter-spacing: -.018em;
  font-weight: 750;
}

.gcp-lp h3 {
  font-size: clamp(17.92px, 1.7vw, 21.12px);
  line-height: 1.3;
  letter-spacing: -.01em;
  font-weight: 700;
}

/* ---- layout ---- */
.gcp-lp__wrap {
  max-width: var(--gcp-max);
  margin-inline: auto;
  padding-inline: clamp(18px, 5vw, 32px);
}

/* Ritmo de fundo da pagina: branco -> roxo claro -> branco -> roxo claro...
   fechando em roxo escuro (autoridade) e roxo solido (CTA final).
   Fundo declarado SEMPRE, inclusive o branco: sem isso a secao fica
   transparente e aparece o fundo escuro do tema. */
.gcp-secao {
  padding-block: var(--gcp-gap);
  background: var(--gcp-fundo);
  scroll-margin-top: calc(var(--gcp-header-h) + var(--gcp-nav-h) + 16px);
}

.gcp-secao--alt {
  background: var(--gcp-clara);
}

.gcp-secao--escura {
  background: var(--gcp-escura);
  color: #fff;
}

.gcp-secao--escura .gcp-lead {
  color: rgba(255, 255, 255, .72);
}

.gcp-secao--marca {
  background: linear-gradient(135deg, var(--gcp-escura) 0%, var(--gcp-primaria) 100%);
  color: #fff;
}

.gcp-secao--marca .gcp-lead {
  color: rgba(255, 255, 255, .82);
}

.gcp-lead {
  color: var(--gcp-tinta-2);
  font-size: clamp(16px, 1.3vw, 17.84px);
  max-width: 62ch;
}

.gcp-secao__cabeca {
  margin-bottom: clamp(28px, 3.6vw, 48px);
}

.gcp-secao__cabeca .gcp-lead {
  margin-top: 14px;
}

.gcp-eyebrow {
  display: inline-block;
  font-size: 11.92px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gcp-primaria);
  margin-bottom: 14px;
}

/* ---- grid utilitário ---- */
.gcp-grid {
  display: grid;
  gap: clamp(16px, 2vw, 24px);
}

@media (min-width: 700px) {
  .gcp-grid--2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .gcp-grid--3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1000px) {
  .gcp-grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .gcp-grid--4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ---- botões ---- */
.gcp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 14px 26px;
  border-radius: 999px;
  font-weight: 650;
  font-size: 15.52px;
  transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease;
  will-change: transform;
}

/* Prefixado com .gcp-lp de proposito: o reset declara `.gcp-lp a { color: inherit }`
   com peso (0,2,0), e uma classe sozinha (0,1,0) perde para ele. Sem o prefixo o
   botao herdava a cor de texto da secao — invisivel em qualquer secao clara. */
.gcp-lp .gcp-btn--principal {
  background: var(--gcp-primaria);
  color: #fff;
  box-shadow: var(--gcp-sombra);
}

.gcp-btn--principal:hover {
  background: var(--gcp-primaria-2);
  transform: translateY(-1px);
}

.gcp-btn--vazado {
  border: 1.5px solid currentColor;
}

.gcp-btn--vazado:hover {
  background: rgba(255, 255, 255, .09);
}

/* ---- menu de âncora ---- */
.gcp-nav {
  position: sticky;
  top: var(--gcp-header-h);
  z-index: 30;
  background: color-mix(in srgb, var(--gcp-escura) 92%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.gcp-nav__lista {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}

.gcp-nav__lista::-webkit-scrollbar {
  display: none;
}

.gcp-nav a {
  display: block;
  padding: 15px 15px;
  font-size: 14.4px;
  font-weight: 600;
  color: rgba(255, 255, 255, .66);
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}

.gcp-nav a:hover {
  color: #fff;
}

.gcp-nav a.is-ativo {
  color: #fff;
  border-bottom-color: var(--gcp-primaria-2);
}

/* ---- hero ---- */
.gcp-hero {
  background: var(--gcp-escura);
  color: #fff;
  padding-block: clamp(56px, 8vw, 104px);
}

.gcp-hero__grid {
  display: grid;
  gap: 40px;
  align-items: center;
}

@media (min-width: 900px) {
  .gcp-hero__grid {
    grid-template-columns: 1.05fr .95fr;
    gap: 56px;
  }
}

.gcp-hero p {
  color: rgba(255, 255, 255, .76);
  margin-top: 20px;
  font-size: clamp(16px, 1.4vw, 18.4px);
  max-width: 54ch;
}

.gcp-hero__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

/* ---- cards ---- */
.gcp-box {
  background: var(--gcp-fundo);
  border: 1px solid var(--gcp-borda);
  border-radius: var(--gcp-radius);
  padding: clamp(20px, 2.3vw, 28px);
}

.gcp-box h3 {
  margin-bottom: 9px;
}

.gcp-box p {
  color: var(--gcp-tinta-2);
  font-size: 15.28px;
}

.gcp-numero {
  font-size: clamp(27.2px, 2.7vw, 34.4px);
  font-weight: 800;
  color: var(--gcp-primaria);
  letter-spacing: -.02em;
}

.gcp-numero+span {
  display: block;
  font-size: 14px;
  color: var(--gcp-tinta-2);
  margin-top: 4px;
}

/* ---- tabela comparativa ---- */
.gcp-tabela-wrap {
  overflow-x: auto;
  border: 1px solid var(--gcp-borda);
  border-radius: var(--gcp-radius);
}

.gcp-tabela {
  width: 100%;
  border-collapse: collapse;
  min-width: 620px;
  background: #fff;
}

.gcp-tabela th,
.gcp-tabela td {
  padding: 15px 18px;
  text-align: left;
  font-size: 15.12px;
  border-bottom: 1px solid var(--gcp-borda);
}

.gcp-tabela thead th {
  background: var(--gcp-clara);
  font-weight: 700;
  font-size: 13.12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--gcp-tinta);
}

.gcp-tabela tbody tr:last-child td {
  border-bottom: 0;
}

.gcp-tabela td:first-child {
  font-weight: 600;
}

.gcp-sim {
  color: var(--gcp-primaria);
  font-weight: 700;
}

.gcp-nao {
  color: var(--gcp-tinta-2);
}

/* ---- passo a passo ---- */
.gcp-passos {
  counter-reset: passo;
  display: grid;
  gap: 20px;
}

.gcp-passo {
  counter-increment: passo;
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 16px;
  align-items: start;
}

.gcp-passo::before {
  content: counter(passo);
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--gcp-clara);
  color: var(--gcp-primaria);
  font-weight: 800;
}

/* ---- carrossel de produtos ---- */
.gcp-carrossel {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 62%;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 10px;
  scrollbar-width: thin;
}

@media (min-width: 640px) {
  .gcp-carrossel {
    grid-auto-columns: 33%;
  }
}

@media (min-width: 1000px) {
  .gcp-carrossel {
    grid-auto-columns: 23%;
  }
}

.gcp-card {
  scroll-snap-align: start;
  background: #fff;
  border: 1px solid var(--gcp-borda);
  border-radius: var(--gcp-radius-sm);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  transition: border-color .15s ease, transform .15s ease;
}

.gcp-card:hover {
  border-color: var(--gcp-primaria);
  transform: translateY(-2px);
}

.gcp-card__nome {
  font-size: 14.4px;
  font-weight: 620;
  line-height: 1.35;
}

.gcp-card__preco {
  font-size: 15.2px;
  font-weight: 700;
  color: var(--gcp-primaria);
  margin-top: auto;
}

/* ---- FAQ (usar <details> — funciona sem JS e é acessível) ---- */
.gcp-faq {
  display: grid;
  gap: 10px;
}

.gcp-faq details {
  border: 1px solid var(--gcp-borda);
  border-radius: var(--gcp-radius-sm);
  background: #fff;
}

.gcp-faq summary {
  cursor: pointer;
  padding: 17px 20px;
  font-weight: 640;
  font-size: 16px;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
}

.gcp-faq summary::-webkit-details-marker {
  display: none;
}

.gcp-faq summary::after {
  content: "+";
  font-size: 22.4px;
  font-weight: 400;
  color: var(--gcp-primaria);
  line-height: 1;
}

.gcp-faq details[open] summary::after {
  content: "\2212";
}

.gcp-faq details>div {
  padding: 0 20px 19px;
  color: var(--gcp-tinta-2);
  font-size: 15.28px;
}

/* ---- acessibilidade ---- */
@media (prefers-reduced-motion: reduce) {

  .gcp-lp *,
  .gcp-lp *::before,
  .gcp-lp *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

.gcp-lp :focus-visible {
  outline: 2px solid var(--gcp-primaria-2);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ==========================================================================
   COMPONENTES ACRESCENTADOS — v1.1
   Mesma regra de sempre: todo seletor sob .gcp-lp.
   ========================================================================== */

/* ---- listas de texto (o reset tirou o marcador; aqui ele volta, local) ---- */
.gcp-lista {
  display: grid;
  gap: 10px;
}

.gcp-lista li {
  position: relative;
  padding-left: 26px;
  color: var(--gcp-tinta-2);
  font-size: 15.52px;
}

.gcp-lista li::before {
  content: "";
  position: absolute;
  left: 6px;
  top: .62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gcp-primaria);
}

.gcp-lista strong {
  color: var(--gcp-tinta);
}

.gcp-secao--escura .gcp-lista li {
  color: rgba(255, 255, 255, .78);
}

.gcp-secao--escura .gcp-lista strong {
  color: #fff;
}

/* ---- selo / etiqueta ---- */
.gcp-selo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--gcp-clara);
  color: var(--gcp-escura);
  border-radius: 999px;
  padding: 6px 13px;
  font-size: 12.48px;
  font-weight: 700;
  letter-spacing: .01em;
}

.gcp-selo--forte {
  background: var(--gcp-primaria);
  color: #fff;
}

/* ---- card de plano ---- */
.gcp-plano {
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
}

.gcp-plano--destaque {
  border-color: var(--gcp-primaria);
  box-shadow: var(--gcp-sombra);
}

.gcp-plano__topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.gcp-plano h3 {
  margin: 0;
}

.gcp-plano__preco {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.gcp-plano__preco .gcp-valor {
  font-size: clamp(30.4px, 3vw, 37.6px);
  font-weight: 800;
  letter-spacing: -.025em;
  color: var(--gcp-escura);
}

.gcp-plano__preco .gcp-periodo {
  font-size: 14.72px;
  color: var(--gcp-tinta-2);
}

.gcp-plano__preco del {
  color: var(--gcp-tinta-2);
  font-size: 16px;
  font-weight: 500;
}

.gcp-plano .gcp-btn {
  width: 100%;
  margin-top: auto;
}

/* ---- comparacao com preco externo: rotulada e datada ---- */
.gcp-comparacao {
  border: 1px dashed var(--gcp-borda);
  border-radius: var(--gcp-radius);
  padding: clamp(18px, 2.2vw, 26px);
  background: var(--gcp-fundo);
}

.gcp-comparacao__titulo {
  font-size: 12.48px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--gcp-tinta-2);
  margin-bottom: 14px;
}

.gcp-comparacao dl {
  display: grid;
  gap: 10px;
  margin: 0;
}

.gcp-comparacao__linha {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: baseline;
  border-bottom: 1px solid var(--gcp-borda);
  padding-bottom: 9px;
}

.gcp-comparacao__linha:last-of-type {
  border-bottom: 0;
  padding-bottom: 0;
}

.gcp-comparacao dt {
  color: var(--gcp-tinta-2);
  font-size: 14.88px;
}

.gcp-comparacao dd {
  margin: 0;
  font-weight: 700;
  font-size: 15.68px;
  white-space: nowrap;
}

.gcp-comparacao__fonte {
  margin-top: 14px;
  font-size: 12.8px;
  color: var(--gcp-tinta-2);
  font-style: italic;
}

/* ---- vitrine de jogos: HTML puro, sem link, sem produto WooCommerce ---- */
.gcp-jogos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(12px, 1.6vw, 18px);
}

@media (min-width: 560px) {
  .gcp-jogos {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 860px) {
  .gcp-jogos {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 1100px) {
  .gcp-jogos {
    grid-template-columns: repeat(6, 1fr);
  }
}

.gcp-jogo {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.gcp-jogo__capa,
.gcp-jogo__vazio {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--gcp-radius-sm);
  object-fit: cover;
  background: var(--gcp-fundo-2);
  border: 1px solid var(--gcp-borda);
}

.gcp-jogo__nome {
  font-size: 14px;
  font-weight: 650;
  line-height: 1.3;
  color: var(--gcp-tinta);
}

.gcp-jogo__tag {
  display: inline-block;
  font-size: 11.52px;
  font-weight: 700;
  color: var(--gcp-primaria);
}

/* ---- fachada de video ---- */
.gcp-video {
  position: relative;
  border-radius: var(--gcp-radius);
  overflow: hidden;
  background: var(--gcp-escura);
  aspect-ratio: 16 / 9;
}

.gcp-video__capa,
.gcp-video__vazio {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .82;
}

.gcp-video__play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: var(--gcp-primaria);
  display: grid;
  place-items: center;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .35);
  transition: transform .16s ease, background-color .16s ease;
}

.gcp-video__play:hover {
  transform: scale(1.06);
  background: var(--gcp-primaria-2);
}

.gcp-video__play>span {
  width: 0;
  height: 0;
  margin-left: 5px;
  border-left: 20px solid #fff;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
}

.gcp-video__titulo {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 28px 18px 14px;
  color: #fff;
  font-size: 14.72px;
  font-weight: 650;
  line-height: 1.35;
  background: linear-gradient(to top, rgba(0, 0, 0, .78), transparent);
}

.gcp-video.is-carregado .gcp-video__capa,
.gcp-video.is-carregado .gcp-video__vazio,
.gcp-video.is-carregado .gcp-video__play,
.gcp-video.is-carregado .gcp-video__titulo {
  display: none;
}

.gcp-video__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---- faixa de numeros / prova social ---- */
.gcp-provas {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(16px, 2vw, 28px);
}

@media (min-width: 760px) {
  .gcp-provas {
    grid-template-columns: repeat(4, 1fr);
  }
}

.gcp-prova {
  text-align: center;
}

.gcp-prova .gcp-numero {
  display: block;
}

.gcp-secao--escura .gcp-numero {
  color: var(--gcp-primaria-2);
}

.gcp-secao--escura .gcp-numero+span {
  color: rgba(255, 255, 255, .7);
}

/* ---- callout de ressalva honesta ---- */
.gcp-aviso {
  border-left: 4px solid var(--gcp-primaria);
  background: var(--gcp-clara);
  color: var(--gcp-escura);
  border-radius: 0 var(--gcp-radius-sm) var(--gcp-radius-sm) 0;
  padding: clamp(18px, 2.2vw, 26px);
}

.gcp-aviso h3 {
  margin-bottom: 8px;
}

.gcp-aviso p {
  font-size: 15.52px;
}

.gcp-aviso p+p {
  margin-top: 10px;
}

/* ---- destaque de resposta (ex: "GTA V roda?") ---- */
.gcp-destaque {
  background: var(--gcp-escura);
  color: #fff;
  border-radius: var(--gcp-radius);
  padding: clamp(20px, 2.4vw, 30px);
}

.gcp-destaque h3 {
  margin-bottom: 10px;
}

.gcp-destaque p {
  color: rgba(255, 255, 255, .8);
  font-size: 15.68px;
}

.gcp-destaque p+p {
  margin-top: 10px;
}

.gcp-destaque strong {
  color: #fff;
}

/* ---- depoimentos ---- */
.gcp-depoimentos {
  display: grid;
  gap: clamp(14px, 1.8vw, 20px);
}

@media (min-width: 720px) {
  .gcp-depoimentos {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1040px) {
  .gcp-depoimentos {
    grid-template-columns: repeat(3, 1fr);
  }
}

.gcp-depoimento {
  background: var(--gcp-fundo);
  border: 1px solid var(--gcp-borda);
  border-radius: var(--gcp-radius);
  padding: 22px;
  margin: 0;
}

.gcp-depoimento p {
  font-size: 15.52px;
}

.gcp-depoimento figcaption {
  margin-top: 12px;
  font-size: 13.6px;
  font-weight: 650;
  color: var(--gcp-tinta-2);
}

/* ---- print dentro do passo a passo ---- */
.gcp-print {
  margin: 0;
}

.gcp-print img {
  border-radius: var(--gcp-radius-sm);
  border: 1px solid var(--gcp-borda);
  width: 100%;
}

.gcp-print figcaption {
  margin-top: 9px;
  font-size: 13.44px;
  color: var(--gcp-tinta-2);
}

.gcp-passo .gcp-print {
  margin-top: 14px;
}

/* ---- hero: imagem e provas ---- */
.gcp-hero__provas {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin-top: 28px;
  font-size: 14.08px;
  color: rgba(255, 255, 255, .72);
}

.gcp-hero__provas span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.gcp-hero__provas span::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gcp-primaria-2);
}

.gcp-hero__midia img {
  border-radius: var(--gcp-radius);
}

.gcp-hero__vazio {
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: var(--gcp-radius);
  background: rgba(255, 255, 255, .05);
  border: 1px dashed rgba(255, 255, 255, .2);
}

/* ---- bloco de CTA lateral / final ---- */
.gcp-secao--escura .gcp-box {
  background: rgba(255, 255, 255, .05);
  border-color: rgba(255, 255, 255, .14);
  color: #fff;
}

.gcp-secao--escura .gcp-box h3 {
  color: #fff;
}

.gcp-secao--escura .gcp-box p {
  color: rgba(255, 255, 255, .72);
}

/* ---- tabela: primeira coluna fixa no mobile ---- */
.gcp-tabela__wrap-nota {
  margin-top: 10px;
  font-size: 13.12px;
  color: var(--gcp-tinta-2);
}

/* ---- prints das notas (Google / Reclame Aqui) ---- */
.gcp-notas {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: flex-start;
  margin-top: 18px;
}

.gcp-notas img {
  border-radius: var(--gcp-radius-sm);
  background: #fff;
  max-width: 46%;
}

/* ==========================================================================
   CAMADA DE COR EXPLICITA — v1.2
   Nada aqui depende de heranca. Todo elemento de texto declara a propria cor,
   para que nenhum esquema de cor do tema (hoje dark) consiga pintar por cima.
   Vem no fim do arquivo de proposito: ultima regra da nossa folha vence.
   ========================================================================== */

/* ---- titulos ---- */
.gcp-lp h1,
.gcp-lp h2,
.gcp-lp h3,
.gcp-lp h4,
.gcp-lp h5,
.gcp-lp h6 {
  color: var(--gcp-tinta);
}

/* Corpo de texto NAO leva regra geral de propósito. Um `.gcp-lp p` teria
   especificidade (0,1,1) e venceria `.gcp-lead` (0,1,0), apagando o cinza dos
   textos de apoio. Paragrafo herda a cor de .gcp-lp; os casos especificos
   (.gcp-lead, .gcp-box p) continuam mandando no que e deles. */

/* ---- secoes escuras: inverte tudo de uma vez ---- */
.gcp-secao--escura,
.gcp-secao--marca,
.gcp-hero {
  --gcp-tinta: #FFFFFF;
  --gcp-tinta-2: rgba(255, 255, 255, .76);
  --gcp-borda: rgba(255, 255, 255, .16);
  --wd-entities-title-color: #FFFFFF;
  --wd-title-color: #FFFFFF;
}

.gcp-secao--escura h1,
.gcp-secao--escura h2,
.gcp-secao--escura h3,
.gcp-secao--escura h4,
.gcp-secao--marca h1,
.gcp-secao--marca h2,
.gcp-secao--marca h3,
.gcp-secao--marca h4,
.gcp-hero h1,
.gcp-hero h2,
.gcp-hero h3 {
  color: #fff;
}

/* Cards e tabelas dentro de secao escura voltam a ser claros por dentro:
   eles tem fundo branco proprio, entao precisam da tinta escura de volta. */
.gcp-secao--escura .gcp-depoimento,
.gcp-secao--marca .gcp-depoimento,
.gcp-secao--escura .gcp-tabela,
.gcp-secao--marca .gcp-tabela {
  --gcp-tinta: #14161A;
  --gcp-tinta-2: #5B6270;
  --gcp-borda: #E3E6EC;
}

.gcp-secao--escura .gcp-depoimento p,
.gcp-secao--marca .gcp-depoimento p {
  color: var(--gcp-tinta);
}

.gcp-secao--escura .gcp-depoimento figcaption,
.gcp-secao--marca .gcp-depoimento figcaption {
  color: var(--gcp-tinta-2);
}

/* ---- ajustes de contraste na paleta clara ---- */
.gcp-secao--alt .gcp-box,
.gcp-secao--alt .gcp-comparacao,
.gcp-secao--alt .gcp-depoimento {
  border-color: rgba(123, 47, 247, .16);
}

.gcp-tabela thead th {
  background: var(--gcp-escura);
  color: #fff;
}

.gcp-secao--alt .gcp-tabela-wrap,
.gcp-secao--alt .gcp-jogo__capa {
  border-color: rgba(123, 47, 247, .18);
}

.gcp-aviso {
  background: #fff;
  border-left-color: var(--gcp-primaria);
}

.gcp-aviso h3,
.gcp-aviso p {
  color: var(--gcp-tinta);
}

.gcp-secao--alt .gcp-aviso {
  box-shadow: var(--gcp-sombra);
}

/* ---- FAQ ---- */
.gcp-faq summary {
  color: var(--gcp-tinta);
}

.gcp-faq details>div {
  color: var(--gcp-tinta-2);
}

/* ---- carrossel de produto ---- */
.gcp-card__nome {
  color: var(--gcp-tinta);
}

/* ==========================================================================
   LARGURA TOTAL
   O tema envolve o conteudo num .container com largura maxima, e por isso as
   secoes coloridas apareciam com "beirada" escura dos dois lados.

   Este e o UNICO bloco da folha fora de .gcp-lp — e ele nao pode vazar: a
   classe .gcp-lp-page so existe no <body> das paginas que usam o shortcode
   (ver gcp_lp_body_class no PHP). Preferi isso a um truque de 100vw, que
   criaria barra de rolagem horizontal do tamanho da barra do navegador.
   ========================================================================== */

.gcp-lp-page .main-page-wrapper>.container,
.gcp-lp-page .site-content>.container,
.gcp-lp-page .container>.wd-content-area,
.gcp-lp-page .wd-content-area.site-content,
.gcp-lp-page article.entry-content,
.gcp-lp-page .wd-entry-content {
  max-width: 100%;
  width: 100%;
  padding-inline: 0;
  margin-inline: 0;
}

.gcp-lp-page .main-page-wrapper {
  padding-top: 0;
  padding-bottom: 0;
}

/* ==========================================================================
   v1.3 — SUPERFICIE CLARA DENTRO DE SECAO ESCURA
   Secao escura reescreve --gcp-tinta para branco. Todo componente que tem
   FUNDO CLARO PROPRIO precisa devolver a tinta escura, senao fica texto
   branco sobre card branco.
   Resolvido por token, nao por propriedade: quem herdar --gcp-tinta daqui
   para baixo acerta sozinho, inclusive componente que ainda nao existe.
   ========================================================================== */

.gcp-secao--escura .gcp-plano,
.gcp-secao--marca .gcp-plano,
.gcp-secao--escura .gcp-comparacao,
.gcp-secao--marca .gcp-comparacao,
.gcp-secao--escura .gcp-aviso,
.gcp-secao--marca .gcp-aviso,
.gcp-secao--escura .gcp-depoimento,
.gcp-secao--marca .gcp-depoimento,
.gcp-secao--escura .gcp-tabela,
.gcp-secao--marca .gcp-tabela,
.gcp-secao--escura .gcp-faq details,
.gcp-secao--marca .gcp-faq details,
.gcp-secao--escura .gcp-card,
.gcp-secao--marca .gcp-card,
.gcp-secao--marca .gcp-box {
  --gcp-tinta: #14161A;
  --gcp-tinta-2: #5B6270;
  --gcp-borda: #E3E6EC;
  --wd-entities-title-color: #14161A;
  --wd-title-color: #14161A;
  color: var(--gcp-tinta);
}

.gcp-secao--escura .gcp-plano h3,
.gcp-secao--marca .gcp-plano h3,
.gcp-secao--escura .gcp-aviso h3,
.gcp-secao--marca .gcp-aviso h3,
.gcp-secao--marca .gcp-box h3,
.gcp-secao--escura .gcp-comparacao dt,
.gcp-secao--marca .gcp-comparacao dt,
.gcp-secao--escura .gcp-depoimento p,
.gcp-secao--marca .gcp-depoimento p {
  color: var(--gcp-tinta);
}

.gcp-secao--marca .gcp-box p {
  color: var(--gcp-tinta-2);
}

/* .gcp-destaque ja e um bloco escuro: dentro de secao escura sumiria no fundo. */
.gcp-secao--escura .gcp-destaque,
.gcp-secao--marca .gcp-destaque {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .16);
}

/* Botao e selo sobre o gradiente da marca: roxo sobre roxo nao se ve. */
.gcp-secao--marca .gcp-btn--principal {
  background: #fff;
  color: var(--gcp-escura);
}

.gcp-secao--marca .gcp-btn--principal:hover {
  background: var(--gcp-clara);
}

.gcp-secao--marca .gcp-selo--forte {
  background: #fff;
  color: var(--gcp-escura);
}

/* Card branco sobre secao branca fica chapado: sombra minima devolve o relevo. */
.gcp-secao:not(.gcp-secao--escura):not(.gcp-secao--marca) .gcp-box {
  box-shadow: 0 1px 2px rgba(16, 20, 28, .045), 0 6px 18px rgba(16, 20, 28, .04);
}

/* ==========================================================================
   v1.3 — TIPOGRAFIA
   A escala anterior era de leitura editorial (~15px). Pagina de venda pede
   corpo entre 17 e 18px, e o ganho maior e no celular.
   ========================================================================== */

.gcp-lp {
  font-size: 17px;
  line-height: 1.65;
  --gcp-nav-h: 56px;
}

.gcp-lp h1 {
  font-size: clamp(36px, 5vw, 60px);
  line-height: 1.05;
  font-weight: 800;
}

.gcp-lp h2 {
  font-size: clamp(28px, 3.4vw, 41.6px);
  line-height: 1.14;
  font-weight: 800;
}

.gcp-lp h3 {
  font-size: clamp(19.2px, 1.9vw, 23.2px);
  line-height: 1.32;
  font-weight: 700;
}

.gcp-lead {
  font-size: clamp(18px, 1.6vw, 20.8px);
  line-height: 1.55;
}

.gcp-hero p {
  font-size: clamp(18px, 1.7vw, 21.6px);
}

.gcp-box p {
  font-size: 17px;
}

.gcp-faq summary {
  font-size: 17.84px;
}

.gcp-faq details>div {
  font-size: 17px;
}

.gcp-depoimento p {
  font-size: 17.44px;
  line-height: 1.6;
}

.gcp-depoimento figcaption {
  font-size: 14.72px;
}

.gcp-lista li {
  font-size: 17px;
}

.gcp-tabela th,
.gcp-tabela td {
  font-size: 16.32px;
  padding: 17px 20px;
}

.gcp-jogo__nome {
  font-size: 15.52px;
}

.gcp-card__nome {
  font-size: 16px;
}

.gcp-card__preco {
  font-size: 16.8px;
}

.gcp-comparacao dt {
  font-size: 16px;
}

.gcp-comparacao dd {
  font-size: 17.44px;
}

.gcp-comparacao__fonte {
  font-size: 14.08px;
}

.gcp-btn {
  font-size: 16.96px;
  padding: 16px 30px;
}

.gcp-nav a {
  font-size: 15.52px;
}

.gcp-eyebrow {
  font-size: 12.8px;
  letter-spacing: .12em;
}

.gcp-aviso p {
  font-size: 17px;
}

.gcp-destaque p {
  font-size: 17.44px;
}

.gcp-print figcaption {
  font-size: 14.72px;
}

.gcp-hero__provas {
  font-size: 15.52px;
}

.gcp-numero {
  font-size: clamp(33.6px, 3.2vw, 44.8px);
}

.gcp-numero+span {
  font-size: 15.2px;
}

/* respiro: metade da sensacao de "texto pobre" e espacamento, nao tamanho */
.gcp-lp p+p {
  margin-top: 14px;
}

.gcp-secao__cabeca {
  margin-bottom: clamp(34px, 4vw, 56px);
}

.gcp-box {
  padding: clamp(24px, 2.6vw, 32px);
}

/* ==========================================================================
   v1.3 — MARCOS DE SECAO
   ========================================================================== */

.gcp-secao__cabeca .gcp-eyebrow::before {
  content: "";
  display: block;
  width: 42px;
  height: 3px;
  border-radius: 2px;
  background: var(--gcp-primaria);
  margin-bottom: 14px;
}

.gcp-secao--escura .gcp-secao__cabeca .gcp-eyebrow::before,
.gcp-secao--marca .gcp-secao__cabeca .gcp-eyebrow::before {
  background: #fff;
}

.gcp-secao--escura .gcp-eyebrow,
.gcp-secao--marca .gcp-eyebrow {
  color: rgba(255, 255, 255, .85);
}

/* ==========================================================================
   v1.3 — FACHADA DE VIDEO: deixar obvio que e clicavel
   ========================================================================== */

.gcp-video {
  cursor: pointer;
}

.gcp-video::after {
  content: "Assistir";
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, .72);
  color: #fff;
  padding: 9px 18px;
  border-radius: 999px;
  font-size: 14.72px;
  font-weight: 650;
  pointer-events: none;
  z-index: 2;
}

.gcp-video.is-carregado::after {
  display: none;
}

.gcp-video__play {
  position: absolute;
  inset: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  border-radius: 0;
  background: none;
  box-shadow: none;
  display: grid;
  place-items: center;
}

.gcp-video__play:hover {
  background: none;
  transform: none;
}

.gcp-video__play>span {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  border: 0;
  margin: 0;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 6px 28px rgba(0, 0, 0, .35);
  display: grid;
  place-items: center;
  transition: transform .16s ease;
}

.gcp-video__play>span::before {
  content: "";
  display: block;
  margin-left: 7px;
  width: 0;
  height: 0;
  border-left: 22px solid var(--gcp-escura);
  border-top: 13px solid transparent;
  border-bottom: 13px solid transparent;
}

.gcp-video__play:hover>span {
  transform: scale(1.07);
}

.gcp-video__titulo {
  bottom: 58px;
  z-index: 1;
}

/* ==========================================================================
   v1.3 — ESTRELAS DAS AVALIACOES
   ========================================================================== */

.gcp-estrelas {
  color: #F5A623;
  font-size: 16.8px;
  letter-spacing: 2px;
  margin-bottom: 10px;
  line-height: 1;
}

/* ==========================================================================
   v1.3 — CORRECOES DA VARREDURA
   ========================================================================== */

/* Capa de jogo em secao escura: a moldura clara e o fundo de espera cinza
   viravam retangulo claro atras da arte. Nao e bug de texto, mas suja. */
.gcp-secao--escura .gcp-jogo__capa,
.gcp-secao--escura .gcp-jogo__vazio,
.gcp-secao--marca .gcp-jogo__capa,
.gcp-secao--marca .gcp-jogo__vazio {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .14);
}

/* Contraste sobre o gradiente: no fim dele o fundo e #7B2FF7, e branco a 76%
   da 3,98:1 — reprova em AA. A 90% sobe para 5,0:1 e passa nas duas pontas.
   O #1B0A33 solido aguenta 76% sem problema; so a --marca precisa do reforco. */
.gcp-secao--marca {
  --gcp-tinta-2: rgba(255, 255, 255, .90);
}

.gcp-secao--marca .gcp-lead {
  color: rgba(255, 255, 255, .90);
}

.gcp-secao--marca .gcp-eyebrow {
  color: rgba(255, 255, 255, .92);
}

/* ==========================================================================
   v1.4 — LARGURA DO CONTAINER
   ========================================================================== */

.gcp-lp {
  --gcp-max: 1440px;
  --gcp-gap: clamp(56px, 7vw, 112px);
}

.gcp-lp__wrap {
  padding-inline: clamp(20px, 4vw, 44px);
}

/* Medida de leitura. Sem isso, container largo = linha de 150 caracteres,
   que e o jeito mais rapido de deixar um texto ilegivel. */
.gcp-lead {
  max-width: 68ch;
}

.gcp-secao__cabeca p {
  max-width: 72ch;
}

.gcp-box p,
.gcp-box li {
  max-width: 68ch;
}

.gcp-aviso p {
  max-width: 78ch;
}

.gcp-destaque p {
  max-width: 78ch;
}

/* Blocos de 2 itens viram card gigante e vazio a 1440px: ganham medida propria. */
.gcp-planos {
  max-width: 980px;
  margin-inline: auto;
}

@media (min-width: 1000px) {
  .gcp-grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1180px) {
  .gcp-grid--4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

.gcp-tabela th,
.gcp-tabela td {
  padding: 18px 22px;
}

/* ==========================================================================
   v1.4 — HERO COM IMAGEM DE FUNDO EM LARGURA TOTAL
   ========================================================================== */

.gcp-hero {
  position: relative;
  overflow: hidden;
  background: #07040F;
  padding-block: clamp(64px, 8vw, 128px);
  min-height: clamp(520px, 56vw, 680px);
  display: flex;
  align-items: center;
}

.gcp-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 78% center;
}

.gcp-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(96deg,
      rgba(7, 4, 15, .96) 0%,
      rgba(7, 4, 15, .88) 34%,
      rgba(7, 4, 15, .35) 58%,
      rgba(7, 4, 15, 0) 76%);
}

.gcp-hero__grid {
  position: relative;
  z-index: 2;
  width: 100%;
}

@media (min-width: 900px) {
  .gcp-hero__grid {
    display: block;
  }

  .gcp-hero__texto {
    max-width: 620px;
  }
}

/* Celular: arte em cima, texto embaixo. Sem gradiente, sem sobreposicao. */
@media (max-width: 899px) {
  .gcp-hero {
    display: block;
    min-height: 0;
    padding-block: 0 clamp(40px, 8vw, 56px);
  }

  /* aspect-ratio fixo aqui recortaria a arte: 16/10 sobre uma imagem 16:9 come
     ~10% das laterais, e e nas bordas que estao os aparelhos. Sem proporcao
     imposta, a imagem aparece inteira, na altura natural dela. */
  .gcp-hero__bg {
    position: static;
    width: 100%;
    height: auto;
    aspect-ratio: auto;
    object-fit: contain;
    margin-bottom: 26px;
  }

  .gcp-hero::after {
    display: none;
  }
}

.gcp-hero h1 {
  max-width: 15ch;
}

.gcp-hero p {
  max-width: 46ch;
}

/* Provas sociais: nao quebrar item no meio. */
.gcp-hero__provas {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin-top: 30px;
  font-size: 15.2px;
  color: rgba(255, 255, 255, .8);
}

.gcp-hero__provas>* {
  white-space: nowrap;
}

@media (max-width: 560px) {
  .gcp-hero__provas {
    flex-direction: column;
    gap: 8px;
  }
}

.gcp-print--centro {
  max-width: 820px;
  margin-inline: auto;
}

.gcp-print--centro figcaption {
  text-align: center;
}

/* ==========================================================================
   v1.5 — HERO: imagem menor, fundo solido e fade

   O que estava errado:
   - Desktop: a arte ocupava 100% da largura (escala 1,2x sobre a fonte de
     1600px) e os aparelhos saiam gigantes.
   - Celular: aspect-ratio 16/10 com object-fit cover cortava 10% da altura,
     comendo o topo da TV e a base do celular.

   Como foi resolvido:
   - A arte fica confinada a direita, com largura propria (--gcp-hero-img-w).
   - O resto do hero recebe a MESMA cor do fundo da arte, amostrada do proprio
     arquivo: #130A2D (a faixa vazia varia so entre #130A2B e #150A2E).
   - A juncao e feita por mask-image, nao por overlay escuro: assim a arte nao
     perde brilho e o encontro com a cor solida fica invisivel.
   - object-fit: contain em vez de cover. Como a cor de fundo da arte e a mesma
     do hero, o "letterbox" do contain nao aparece — e nada mais e cortado, nem
     no desktop nem no celular.
   ========================================================================== */

.gcp-lp--boosteroid {
  --gcp-hero-bg: #130A2D;
}

/* A arte da Nintendo tem fundo vermelho profundo, e o hero estava pintado com
   a cor escura da marca (#3D0004). O encontro dos dois virava uma faixa quase
   preta à esquerda do título — "passou de vinho". Esta cor é amostrada do
   próprio arquivo (a borda esquerda da arte varia entre rgb(139,0,3) e
   rgb(145,1,6)), então a emenda entre arte e fundo some. Texto branco sobre
   ela dá 9,76:1, e o parágrafo a 72% dá 5,42:1 — medidos. */
.gcp-lp--nintendo {
  --gcp-hero-bg: #8E0005;
}

.gcp-hero {
  background: var(--gcp-hero-bg, var(--gcp-escura));
  min-height: clamp(380px, 34vw, 520px);
  padding-block: clamp(48px, 5vw, 88px);
  --gcp-hero-img-w: min(58%, 1080px);
}

.gcp-hero__bg {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: auto;
  width: var(--gcp-hero-img-w);
  height: 100%;
  object-fit: contain;
  object-position: right center;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 32%);
  mask-image: linear-gradient(to right, transparent 0%, #000 32%);
}

/* O overlay escuro existia para dar contraste quando a arte cobria a largura
   toda. Agora o texto fica sobre cor solida (18,9:1) e ele so escureceria a
   arte a toa. */
.gcp-hero::after {
  display: none;
}

@media (max-width: 899px) {
  .gcp-hero {
    display: block;
    min-height: 0;
    padding-block: 0 clamp(40px, 8vw, 56px);
  }

  .gcp-hero__bg {
    position: static;
    left: auto;
    right: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    /* igual a da arte: nao corta nada */
    object-fit: contain;
    object-position: center;
    margin-bottom: 26px;
    -webkit-mask-image: linear-gradient(to bottom, #000 74%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 74%, transparent 100%);
  }
}

/* ==========================================================================
   v1.6 — HERO: a arte passa a ser medida pela ALTURA

   Problema da v1.5: object-fit contain numa caixa de largura fixa faz a arte
   ser limitada pela largura. Como a caixa era mais "baixa" que a proporcao da
   arte (1,565 contra 1,778), sobrava tarja em cima e embaixo, e a arte nao
   alcancava o fim da secao.

   Agora: height define o tamanho e width e automatica, entao a proporcao e
   respeitada e a arte encosta no rodape da secao. A medicao da arte mostra que
   o conteudo dela vai de y=0 ate y=846 de 900 — ou seja, ja foi desenhada para
   sangrar no topo. Ancorar embaixo (object-position: right bottom) e o que faz
   os aparelhos "pisarem" no fim da secao.

   >>> BOTAO DE AJUSTE: --gcp-hero-img-h
       100% = a arte ocupa a altura inteira da secao
        90% = encolhe 10%, continuando encostada embaixo
   ========================================================================== */

.gcp-hero {
  --gcp-hero-img-h: 100%;
  --gcp-hero-img-w: min(86%, 1500px);
  /* trava: impede a arte de invadir o texto */
}

.gcp-hero__bg {
  top: auto;
  bottom: 0;
  right: 0;
  left: auto;
  height: var(--gcp-hero-img-h);
  width: auto;
  max-width: var(--gcp-hero-img-w);
  object-fit: contain;
  object-position: right bottom;
}

@media (max-width: 899px) {
  .gcp-hero__bg {
    height: auto;
    max-width: 100%;
  }
}

/* A arte cresce com a altura da secao, entao em tela media ela avanca para a
   esquerda. A coluna de texto acompanha, para nunca encostar nos aparelhos. */
@media (min-width: 900px) {
  .gcp-hero__texto {
    max-width: 420px;
  }
}

@media (min-width: 1100px) {
  .gcp-hero__texto {
    max-width: 500px;
  }
}

@media (min-width: 1300px) {
  .gcp-hero__texto {
    max-width: 580px;
  }
}

@media (min-width: 1500px) {
  .gcp-hero__texto {
    max-width: 620px;
  }
}
/* ==========================================================================
   v1.7 — HERO: REGRA FINAL E AUTORITATIVA DA ARTE

   POR QUE ESTA REGRA USA `.gcp-lp .gcp-hero__bg` E NAO SO `.gcp-hero__bg`:

   O reset local tem `.gcp-lp img { max-width: 100%; height: auto; }`, que e
   seletor de CLASSE + ELEMENTO -> especificidade (0,1,1). Todas as tentativas
   anteriores usaram `.gcp-hero__bg`, que e so CLASSE -> (0,1,0). O reset
   ganhava e forcava height:auto na arte. Medido no navegador:

       caixa da imagem  1905x1072   (deveria ser 1317x741)
       height computada 1071.56px   (o var(--gcp-hero-img-h) nunca chegou)
       top computado    -331px      -> por isso a arte era cortada em cima

   `.gcp-lp .gcp-hero__bg` e (0,2,0) e vence (0,1,1). Todas as propriedades
   sao declaradas aqui, entao os blocos anteriores ficam inertes.
   ========================================================================== */

.gcp-lp .gcp-hero__bg {
  position: absolute;
  top: auto; right: 0; bottom: 0; left: auto;
  z-index: 0;
  width: auto;
  height: var(--gcp-hero-img-h, 100%);
  max-width: var(--gcp-hero-img-w, min(86%, 1500px));
  aspect-ratio: auto;
  margin: 0;
  object-fit: contain;
  object-position: right bottom;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 32%);
          mask-image: linear-gradient(to right, transparent 0%, #000 32%);
}

@media (max-width: 899px) {
  .gcp-lp .gcp-hero__bg {
    position: static;
    top: auto; right: auto; bottom: auto; left: auto;
    width: 100%;
    height: auto;
    max-width: 100%;
    aspect-ratio: auto;          /* proporcao natural da arte: nao corta nada */
    object-fit: contain;
    object-position: center;
    margin: 0 0 26px;
    -webkit-mask-image: linear-gradient(to bottom, #000 74%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 74%, transparent 100%);
  }
}

/* ==========================================================================
   v1.8 — SECAO "O QUE E": cards com icone
   ========================================================================== */

/* Fundo levemente cinza: card branco sobre secao branca nao existe. */
.gcp-secao--suave { background: var(--gcp-fundo-2); }

.gcp-box--icone {
  position: relative;
  background: var(--gcp-fundo);
  border: 1px solid var(--gcp-borda);
  border-radius: var(--gcp-radius);
  padding: clamp(26px, 2.6vw, 34px);
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

/* filete de marca no topo */
.gcp-box--icone::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--gcp-primaria), var(--gcp-primaria-2));
}

.gcp-box--icone:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--gcp-primaria) 32%, var(--gcp-borda));
}

/* A sombra precisa da mesma cadeia :not() da regra base de .gcp-box, que tem
   especificidade (0,4,0). Sem isso o box-shadow do hover nunca apareceria. */
.gcp-secao:not(.gcp-secao--escura):not(.gcp-secao--marca) .gcp-box--icone {
  box-shadow: 0 1px 2px rgba(16,20,28,.045);
}
.gcp-secao:not(.gcp-secao--escura):not(.gcp-secao--marca) .gcp-box--icone:hover {
  box-shadow: 0 14px 40px rgba(16,20,28,.10);
}

.gcp-box__icone {
  display: grid; place-items: center;
  width: 52px; height: 52px; margin-bottom: 18px;
  border-radius: 13px;
  background: var(--gcp-clara);
  color: var(--gcp-primaria);
}
.gcp-box__icone svg { width: 26px; height: 26px; display: block; }

.gcp-box--icone h3 { font-size: 20.48px; font-weight: 750; margin-bottom: 10px; }
.gcp-box--icone p  { font-size: 17px; line-height: 1.62; color: var(--gcp-tinta-2); }

/* variante de ressalva: neutra, sem cor de marca */
.gcp-box--nota::before { background: var(--gcp-borda); }
.gcp-box--nota .gcp-box__icone { background: #EEF0F4; color: var(--gcp-tinta-2); }
.gcp-box--nota:hover { border-color: var(--gcp-borda); }

/* termos destacados no paragrafo de abertura */
.gcp-secao__cabeca p strong { color: var(--gcp-tinta); font-weight: 700; }

/* ==========================================================================
   v1.9 — TEXTO DE ABERTURA DAS SECOES EM LARGURA TOTAL

   `.gcp-lead` tem max-width 68ch e `.gcp-secao__cabeca p` tem 72ch (0,1,1).
   Para soltar e preciso de (0,2,0) — dai `.gcp-secao__cabeca .gcp-lead`.

   text-wrap: pretty evita a ultima linha com uma palavra sozinha e melhora os
   pontos de quebra. Onde nao houver suporte, o texto simplesmente quebra como
   antes: nada depende dele.

   >>> BOTAO DE AJUSTE: --gcp-lead-max
       none  = largura total (atual)
       92ch  = puxa um pouco para tras
       72ch  = volta ao comportamento anterior
   ========================================================================== */

.gcp-lp { --gcp-lead-max: none; }

.gcp-secao__cabeca .gcp-lead {
  max-width: var(--gcp-lead-max);
  text-wrap: pretty;
}

/* ==========================================================================
   v2.0 — SECAO "PLANOS E PRECOS"
   Comparativo sai da linha propria e entra num <details> dentro de cada card.
   Faixa do cambio substitui a caixa branca grande.
   ========================================================================== */

.gcp-secao--centro .gcp-secao__cabeca { text-align: center; }
.gcp-secao--centro .gcp-secao__cabeca .gcp-lead { margin-inline: auto; }
.gcp-secao--centro .gcp-secao__cabeca .gcp-eyebrow::before { margin-inline: auto; }

/* ---- grade dos planos ---- */
.gcp-planos {
  display: grid; gap: clamp(18px, 2vw, 28px);
  max-width: 1080px; margin-inline: auto;
}
@media (min-width: 860px) { .gcp-planos { grid-template-columns: repeat(2, 1fr); } }

/* ---- card ---- */
.gcp-plano {
  position: relative;
  display: grid;
  grid-template-rows: auto auto auto 1fr auto auto;   /* alinha os dois cards */
  background: var(--gcp-fundo);
  border: 1px solid var(--gcp-borda);
  border-radius: 18px;
  padding: clamp(28px, 3vw, 38px);
  box-shadow: 0 18px 50px rgba(10,4,26,.18);
}
.gcp-plano--destaque {
  border: 2px solid var(--gcp-primaria);
  box-shadow: 0 22px 60px rgba(10,4,26,.28);
}

/* selo absoluto: nao empurra conteudo, entao os dois cards seguem alinhados */
.gcp-plano__selo {
  position: absolute; top: 16px; right: 16px;
  background: var(--gcp-primaria); color: #fff;
  font-size: 11.52px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  padding: 7px 13px; border-radius: 999px; line-height: 1;
}

/* (0,2,1) para vencer `.gcp-secao--marca .gcp-plano h3`, que e (0,2,1) e vem antes */
.gcp-plano h3.gcp-plano__nome {
  font-size: 16.8px; font-weight: 650; color: var(--gcp-tinta-2);
  margin: 0; padding-right: 120px;   /* espaco do selo */
}
.gcp-plano__periodo {
  font-size: 24px; font-weight: 800; color: var(--gcp-tinta);
  letter-spacing: -.02em; display: block; margin-top: 2px;
}

.gcp-plano__preco { margin: 18px 0 0; display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.gcp-plano__preco .gcp-valor {
  font-size: clamp(36.8px, 3.4vw, 48px); font-weight: 800;
  letter-spacing: -.03em; color: var(--gcp-escura); line-height: 1;
}
.gcp-plano__preco .gcp-por { font-size: 15.68px; color: var(--gcp-tinta-2); }

.gcp-plano__itens { margin: 22px 0 26px; display: grid; gap: 12px; align-content: start; }
.gcp-plano__itens li { position: relative; padding-left: 30px; font-size: 17px; color: var(--gcp-tinta); }
.gcp-plano__itens li::before {
  content: ""; position: absolute; left: 0; top: 3px;
  width: 20px; height: 20px; border-radius: 50%; background: var(--gcp-clara);
}
.gcp-plano__itens li::after {
  content: ""; position: absolute; left: 6px; top: 9px;
  width: 8px; height: 4px;
  border-left: 2px solid var(--gcp-primaria);
  border-bottom: 2px solid var(--gcp-primaria);
  transform: rotate(-45deg);
}

/* (0,2,0): a secao --marca pinta .gcp-btn--principal de branco, e sobre card
   branco o botao sumiria. */
.gcp-plano .gcp-plano__cta {
  width: 100%; justify-content: center;
  background: var(--gcp-primaria); color: #fff;
  font-size: 16.96px; padding: 17px 24px;
}
.gcp-plano .gcp-plano__cta:hover { background: var(--gcp-primaria-2); color: #fff; }

/* ---- comparativo dentro do card ---- */
.gcp-plano__comparar { margin-top: 20px; border-top: 1px solid var(--gcp-borda); padding-top: 16px; }
.gcp-plano__comparar summary {
  cursor: pointer; list-style: none;
  font-size: 15.2px; font-weight: 650; color: var(--gcp-primaria);
  display: flex; align-items: center; gap: 7px;
}
.gcp-plano__comparar summary::-webkit-details-marker { display: none; }
.gcp-plano__comparar summary::after { content: "+"; font-size: 18.4px; line-height: 1; margin-left: auto; }
.gcp-plano__comparar[open] summary::after { content: "\2212"; }

.gcp-plano__comparar dl { margin: 14px 0 0; display: grid; gap: 9px; }
.gcp-plano__comparar dl > div {
  display: flex; justify-content: space-between; gap: 16px;
  font-size: 15.2px; padding-bottom: 9px;
  border-bottom: 1px dashed var(--gcp-borda);
}
.gcp-plano__comparar dt { color: var(--gcp-tinta-2); }
.gcp-plano__comparar dd { margin: 0; font-weight: 700; text-align: right; }
.gcp-plano__comparar p  { margin-top: 12px; font-size: 15.2px; color: var(--gcp-tinta); }
.gcp-plano__comparar small { display: block; margin-top: 8px; font-size: 12.8px; color: var(--gcp-tinta-2); font-style: italic; }

/* ---- faixa do cambio ----
   O patch pedia fundo rgba(255,255,255,.10). Medido, o texto a .86 dava
   4,08:1 na ponta clara do gradiente (#7B2FF7) — reprova em AA, porque clarear
   o backdrop aproxima o fundo do texto branco. Invertido para vidro ESCURO:
   rgba(0,0,0,.20) leva o mesmo texto a 6,35:1 na pior ponta. */
.gcp-faixa-cambio {
  max-width: 1080px; margin: clamp(22px, 2.6vw, 32px) auto 0;
  display: flex; gap: 16px; align-items: flex-start;
  background: rgba(0,0,0,.20);
  border: 1px solid rgba(255,255,255,.20);
  border-radius: 14px;
  padding: 20px 24px;
  backdrop-filter: blur(6px);
}
.gcp-faixa-cambio__icone {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 42px; height: 42px; border-radius: 11px;
  background: rgba(255,255,255,.16); color: #fff;
}
.gcp-faixa-cambio__icone svg { width: 22px; height: 22px; }
.gcp-faixa-cambio p { color: rgba(255,255,255,.86); font-size: 16px; line-height: 1.55; margin: 0; max-width: none; }
.gcp-faixa-cambio strong { color: #fff; display: block; margin-bottom: 4px; font-size: 16.96px; }

/* ==========================================================================
   v2.1 — TIPOGRAFIA EM PX, E POR QUE

   Medido no navegador, na pagina publicada:

       html            13px     <- o TEMA define a raiz em 13px, nao 16px
       .gcp-lp         13.81px  (a folha pedia 17px)
       itens do plano  13.81px
       selo do plano    9.36px
       nome do plano   13.65px

   Todo `rem` da landing estava sendo multiplicado por 13. O componente e
   escopado e nao pode depender da raiz do tema, entao font-size aqui e sempre
   px (ou clamp com px).

   REGRA PERMANENTE: nenhum font-size em rem dentro de .gcp-lp.
   ========================================================================== */

.gcp-lp { font-size: 18px; line-height: 1.65; }

.gcp-lp h1 { font-size: clamp(38px, 5vw, 62px); line-height: 1.05; }
.gcp-lp h2 { font-size: clamp(30px, 3.4vw, 44px); line-height: 1.14; }
.gcp-lp h3 { font-size: clamp(21px, 1.9vw, 25px); line-height: 1.32; }

.gcp-lead              { font-size: clamp(19px, 1.6vw, 22px); }
.gcp-hero p            { font-size: clamp(19px, 1.7vw, 23px); }
.gcp-box p             { font-size: 18px; }
.gcp-box--icone p      { font-size: 18px; }
.gcp-box--icone h3     { font-size: 22px; }
.gcp-faq summary       { font-size: 19px; }
.gcp-faq details > div { font-size: 18px; }
.gcp-depoimento p      { font-size: 19px; }
.gcp-lista li          { font-size: 18px; }
.gcp-tabela th         { font-size: 15px; }
.gcp-tabela td         { font-size: 17px; }
.gcp-jogo__nome        { font-size: 16px; }
.gcp-btn               { font-size: 18px; }
.gcp-nav a             { font-size: 16px; }
.gcp-eyebrow           { font-size: 14px; letter-spacing: .12em; }
.gcp-card__nome        { font-size: 16px; }
.gcp-card__preco       { font-size: 17px; }
.gcp-faixa-cambio p    { font-size: 17px; }
.gcp-faixa-cambio strong { font-size: 18px; }

/* ---- cards de plano ---- */
.gcp-plano h3.gcp-plano__nome { font-size: 17px; }
.gcp-plano__periodo           { font-size: 27px; }
.gcp-plano__preco .gcp-valor  { font-size: clamp(42px, 3.6vw, 56px); }
.gcp-plano__preco .gcp-por    { font-size: 17px; }
.gcp-plano__itens li          { font-size: 18px; line-height: 1.5; }
.gcp-plano .gcp-plano__cta    { font-size: 19px; padding: 19px 26px; }
.gcp-plano__selo              { font-size: 13px; padding: 8px 15px; letter-spacing: .05em; }
.gcp-plano h3.gcp-plano__nome { padding-right: 150px; }

/* rodape discreto: a comparacao agora e um bloco proprio, logo abaixo */
.gcp-plano__nota {
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--gcp-borda);
  font-size: 15px; color: var(--gcp-tinta-2); text-align: center;
}

/* ==========================================================================
   v2.1 — COMPARATIVO DE PRECO: grafico de barras, visivel sem clique

   Forma: enfase. Uma serie, tres valores, uma barra na cor da marca e as
   demais em cinza. Sem legenda — serie unica com rotulo direto em cada barra.
   Sem eixo, sem grade, sem animacao.

   Cores conferidas: objeto grafico pede 3:1 contra o que esta atras.
       cinza #C3C8D2 (proposto) sobre trilho #EEF0F4 ... 1.47:1  reprova
       cinza #7C8496 sobre trilho #E7E9EF .............. 3.09:1  OK
       roxo  #7B2FF7 sobre trilho #E7E9EF .............. 4.82:1  OK
   Separacao roxo/cinza para daltonismo: ΔE 35 (protan) — sem risco.
   ========================================================================== */

.gcp-comparativo {
  max-width: 1080px; margin: clamp(26px, 3vw, 38px) auto 0;
  background: var(--gcp-fundo);
  border-radius: 18px;
  padding: clamp(28px, 3vw, 40px);
  box-shadow: 0 18px 50px rgba(10,4,26,.18);
  text-align: left;
}

.gcp-comparativo__cabeca { margin-bottom: 26px; }
.gcp-comparativo h3 { font-size: 22px; font-weight: 750; margin-bottom: 10px; }

.gcp-comparativo__hero {
  font-size: clamp(40px, 4vw, 56px); font-weight: 800;
  letter-spacing: -.03em; line-height: 1; color: var(--gcp-tinta);
  margin: 0 0 8px;
}
.gcp-comparativo__hero span {
  display: block; font-size: 17px; font-weight: 600;
  letter-spacing: 0; color: var(--gcp-tinta-2); margin-top: 8px;
}
.gcp-comparativo__sub { font-size: 16px; color: var(--gcp-tinta-2); max-width: 62ch; }

.gcp-barras { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }

.gcp-barra {
  display: grid; align-items: center;
  grid-template-columns: minmax(140px, 250px) 1fr auto;
  gap: 16px;
}
.gcp-barra__rotulo { font-size: 16px; color: var(--gcp-tinta-2); }
.gcp-barra__valor  { font-size: 18px; font-weight: 700; color: var(--gcp-tinta); font-variant-numeric: tabular-nums; }

.gcp-barra__trilho { display: block; height: 16px; background: #E7E9EF; border-radius: 8px; }
.gcp-barra__preenche {
  display: block; height: 100%; width: var(--w);
  background: #7C8496;
  border-radius: 0 4px 4px 0;   /* ponta arredondada so no lado do dado */
}

.gcp-barra--nossa .gcp-barra__rotulo { color: var(--gcp-tinta); font-weight: 700; }
.gcp-barra--nossa .gcp-barra__preenche { background: var(--gcp-primaria); }

@media (max-width: 640px) {
  .gcp-barra { grid-template-columns: 1fr auto; }
  .gcp-barra__trilho { grid-column: 1 / -1; order: 3; }
}

.gcp-comparativo__mensal {
  margin-top: 26px; padding-top: 20px;
  border-top: 1px solid var(--gcp-borda);
  font-size: 17px; color: var(--gcp-tinta);
}
.gcp-comparativo__fonte {
  margin-top: 12px; font-size: 14px; font-style: italic; color: var(--gcp-tinta-2);
}

/* ==========================================================================
   v2.1 — CORRECAO: .gcp-comparativo e superficie clara
   Card branco dentro de secao --marca, que reescreve --gcp-tinta para branco.
   Sem devolver a tinta escura, todo o texto do grafico ficava invisivel.
   Mesmo caso ja tratado para .gcp-plano, .gcp-aviso, .gcp-depoimento etc.
   ========================================================================== */

.gcp-secao--escura .gcp-comparativo,
.gcp-secao--marca  .gcp-comparativo {
  --gcp-tinta:   #14161A;
  --gcp-tinta-2: #5B6270;
  --gcp-borda:   #E3E6EC;
  --wd-entities-title-color: #14161A;
  --wd-title-color:          #14161A;
  color: var(--gcp-tinta);
}

/* (0,2,1) para vencer `.gcp-secao--marca h3`, que e (0,1,1) e pinta de branco */
.gcp-secao--escura .gcp-comparativo h3,
.gcp-secao--marca  .gcp-comparativo h3 { color: var(--gcp-tinta); }

/* ==========================================================================
   v2.2 — ESPACAMENTO: reafirmar margin/padding acima do reset

   O reset local zera margem e padding de p, ul, ol, figure, table e titulos:

       .gcp-lp h1, ... .gcp-lp p, .gcp-lp ul, .gcp-lp figure, ... { margin:0; padding:0 }

   Isso e classe + ELEMENTO -> (0,1,1). Qualquer componente nosso declarado so
   por classe -> (0,1,0) perde, e o espacamento dele simplesmente nao existe.
   Foi o que quebrou o .gcp-comparativo (figure sem padding e sem margin auto).

   Auditado o arquivo inteiro: os componentes abaixo estavam no mesmo caso.
   Prefixo .gcp-lp -> (0,2,0), que vence (0,1,1).

   REGRA PERMANENTE: componente que e <figure>, <p>, <ul>, <ol> ou <table> e
   declara margin/padding precisa vir prefixado com .gcp-lp.
   ========================================================================== */

.gcp-lp .gcp-comparativo {
  margin: clamp(26px, 3vw, 38px) auto 0;
  padding: clamp(28px, 3vw, 40px);
}
.gcp-lp .gcp-comparativo__hero   { margin: 0 0 8px; }
.gcp-lp .gcp-comparativo__sub    { margin: 0; }
.gcp-lp .gcp-comparativo__mensal { margin: 26px 0 0; padding: 20px 0 0; }
.gcp-lp .gcp-comparativo__fonte  { margin: 12px 0 0; padding: 0; }
.gcp-lp .gcp-barras              { margin: 0; padding: 0; }

.gcp-lp .gcp-depoimento   { padding: 22px; margin: 0; }
.gcp-lp .gcp-plano__preco { margin: 18px 0 0; }
.gcp-lp .gcp-plano__itens { margin: 22px 0 26px; padding: 0; }
.gcp-lp .gcp-plano__nota  { margin: 16px 0 0; padding: 14px 0 0; }
.gcp-lp .gcp-print--centro { margin-inline: auto; }
.gcp-lp .gcp-faixa-cambio  { margin: clamp(22px, 2.6vw, 32px) auto 0; padding: 20px 24px; }
.gcp-lp .gcp-hero__provas  { margin: 30px 0 0; }

/* ==========================================================================
   v2.3 — GRADE DE PLATAFORMAS (substitui a tabela de compatibilidade)
   Mesmo conteudo da tabela, varredura visual mais rapida.
   Prefixo .gcp-lp nas regras de espacamento: <ul> e <li> caem no reset (0,1,1).
   ========================================================================== */

.gcp-lp .gcp-plataformas {
  display: grid; gap: clamp(14px, 1.6vw, 20px);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin: 0; padding: 0; list-style: none;
}

.gcp-lp .gcp-plataforma {
  display: flex; align-items: center; gap: 14px;
  background: var(--gcp-fundo);
  border: 1px solid var(--gcp-borda);
  border-radius: var(--gcp-radius);
  padding: 16px 18px; margin: 0;
  transition: border-color .16s ease, transform .16s ease;
}
.gcp-plataforma:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--gcp-primaria) 32%, var(--gcp-borda));
}

.gcp-plataforma__marca {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: 12px;
  background: var(--gcp-clara); color: var(--gcp-primaria);
}
.gcp-plataforma__marca svg { width: 24px; height: 24px; display: block; }
.gcp-plataforma__logo { width: 28px; height: 28px; object-fit: contain; }

.gcp-plataforma__texto  { display: grid; gap: 2px; min-width: 0; }
.gcp-plataforma__nome   { font-size: 17px; font-weight: 700; color: var(--gcp-tinta); line-height: 1.25; }
.gcp-plataforma__acesso { font-size: 15px; color: var(--gcp-primaria); font-weight: 600; }

/* ressalva honesta: iPhone e iPad nao tem aplicativo. Fica em cinza para nao
   ler como recurso, mas continua visivel — a ressalva e proposital. */
.gcp-plataforma--nota .gcp-plataforma__marca { background: #EEF0F4; color: var(--gcp-tinta-2); }
.gcp-plataforma--nota .gcp-plataforma__acesso { color: var(--gcp-tinta-2); font-weight: 500; }

/* ==========================================================================
   v2.4 — SUBTITULO DE BLOCO
   ========================================================================== */

.gcp-lp .gcp-subtitulo {
  margin: clamp(30px, 3.5vw, 44px) 0 18px;
  font-size: 22px; font-weight: 750; color: var(--gcp-tinta);
}

/* ==========================================================================
   v2.5 — PATCH 06: hierarquia dentro de #requisitos
   ========================================================================== */

/* item 2: numeros com mais presenca */
.gcp-numero        { font-size: clamp(34px, 3.2vw, 46px); }
.gcp-numero + span { font-size: 15px; }

/* item 6: subtitulo de bloco com marcador lateral, para separar os
   sub-blocos do H2 da secao sem competir com ele */
.gcp-lp .gcp-subtitulo {
  font-size: 20px; font-weight: 750; color: var(--gcp-tinta);
  margin: clamp(36px, 4vw, 52px) 0 18px;
  padding: 0 0 0 14px;
  border-left: 3px solid var(--gcp-primaria);
  line-height: 1.25;
}

/* item 8: com 11 plataformas, 5 colunas deixavam o Chromecast orfao numa
   fileira sozinho (11 % 5 = 1). Com 4 colunas fecha 4+4+3. */
.gcp-lp .gcp-plataformas { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

/* ==========================================================================
   v2.6 — PILULAS DE CONTROLE + tabela de aparelhos (ESTACIONADA)

   A tabela foi testada e descartada: a pagina voltou para a grade de cards
   (.gcp-plataformas). As regras .gcp-tabela--aparelhos, .gcp-linha--nota e
   .gcp-tabela-wrap--estreito ficam AQUI DE PROPOSITO, sem uso, porque essa
   decisao ja foi e voltou uma vez. Reativar = trocar a chamada de
   gcp_lp_plataformas() pela tabela no PHP.
   ========================================================================== */

.gcp-tabela--aparelhos { max-width: 760px; min-width: 0; }
.gcp-tabela--aparelhos th[scope="row"] { font-weight: 650; color: var(--gcp-tinta); font-size: 17px; text-transform: none; letter-spacing: 0; background: none; }
.gcp-tabela--aparelhos td { color: var(--gcp-tinta-2); }

/* iPhone e iPad: unica linha em que a resposta e uma ressalva, nao um recurso */
.gcp-linha--nota th[scope="row"],
.gcp-linha--nota td { background: var(--gcp-clara); }
.gcp-linha--nota td { color: var(--gcp-tinta); font-weight: 600; }

/* ---- pilulas de controle ---- */
.gcp-lp .gcp-inline {
  display: flex; flex-wrap: wrap; gap: 10px 12px;
  margin: 0; padding: 0; list-style: none; max-width: 900px;
}
.gcp-lp .gcp-inline li {
  background: var(--gcp-fundo); border: 1px solid var(--gcp-borda);
  border-radius: 999px; padding: 11px 20px; margin: 0;
  font-size: 16px; font-weight: 650; color: var(--gcp-tinta);
}
.gcp-inline li span { font-weight: 400; color: var(--gcp-tinta-2); }

/* A moldura do .gcp-tabela-wrap acompanhava a largura toda enquanto a tabela
   de aparelhos tem 760px, deixando uma area vazia com borda ao lado dela. */
.gcp-tabela-wrap--estreito { max-width: 760px; }

/* ==========================================================================
   v2.7 — `.gcp-lead` fora do cabecalho tambem em largura total

   A v1.9 soltou a medida so de `.gcp-secao__cabeca .gcp-lead`. Os `.gcp-lead`
   soltos no meio da secao continuavam presos em 68ch e quebravam em duas
   linhas sem necessidade — caso da frase "E varios outros titulos AAA...".
   Agora os dois usam o mesmo botao: --gcp-lead-max.
   ========================================================================== */

.gcp-lead { max-width: var(--gcp-lead-max); text-wrap: pretty; }

/* ==========================================================================
   v2.8 — PATCH 07: secao "Qual escolher" + limpeza da capa de video
   ========================================================================== */

.gcp-escolha { display: grid; gap: clamp(16px, 2vw, 24px); align-items: stretch; }
@media (min-width: 900px) { .gcp-escolha { grid-template-columns: repeat(3, 1fr); } }

.gcp-lp .gcp-escolha__card {
  display: flex; flex-direction: column;
  background: var(--gcp-fundo);
  border: 1px solid var(--gcp-borda);
  border-radius: 16px;
  padding: clamp(24px, 2.6vw, 32px);
  margin: 0;
}
.gcp-escolha__card h3 { font-size: 21px; font-weight: 750; margin-bottom: 16px; }
.gcp-lp .gcp-escolha__card .gcp-lista { flex: 1 1 auto; margin: 0 0 22px; padding: 0; }
.gcp-escolha__card .gcp-lista li { font-size: 17px; }

.gcp-escolha__card--nossa {
  border: 2px solid var(--gcp-primaria);
  box-shadow: 0 14px 40px rgba(16,20,28,.10);
}

/* o card do concorrente que a loja NAO vende fica tracejado e sem cor de
   marca: continua legivel, mas nao disputa atencao com os outros dois */
.gcp-escolha__card--neutro { background: transparent; border-style: dashed; }
.gcp-escolha__card--neutro h3 { color: var(--gcp-tinta-2); }

.gcp-lp .gcp-escolha__nota {
  margin: auto 0 0; padding: 14px 0 0;
  border-top: 1px solid var(--gcp-borda);
  font-size: 15px; color: var(--gcp-tinta-2); font-style: italic;
}

.gcp-link-sec {
  align-self: flex-start; font-size: 17px; font-weight: 650;
  color: var(--gcp-primaria); text-decoration: underline; text-underline-offset: 4px;
}

/* ---- video em destaque ---- */
.gcp-lp .gcp-video-destaque { max-width: 880px; margin: clamp(36px, 4vw, 56px) auto 0; padding: 0; }
.gcp-lp .gcp-video-destaque figcaption {
  margin-top: 14px; text-align: center;
  font-size: 16px; color: var(--gcp-tinta-2);
}

/* A capa do YouTube ja tem titulo chapado na arte. A barra sobreposta e a
   pilula "Assistir" cortavam esse texto — ficam so a capa e o play. */
.gcp-video__titulo { display: none; }
.gcp-video::after   { content: none; }
.gcp-video          { border-radius: 16px; }

/* ==========================================================================
   v2.9 — CORRECOES MEDIDAS NO NAVEGADOR

   1) O botao de play sumia da capa. Medido:
          .gcp-video__play  position: relative  display: inline-flex
      quando a folha pedia absolute/grid. Largura e altura passavam (880x495),
      so position e display eram sobrescritos — sinal de regra de botao do tema
      vencendo por especificidade. Subido para (0,3,0).

   2) "Ver opcoes de Game Pass" saia preto e sem sublinhado: `.gcp-lp a`
      (0,1,1) zera cor e decoracao e vencia `.gcp-link-sec` (0,1,0).

   3) A capa vinha com opacity .82, escurecimento que existia por causa da
      barra de titulo sobreposta. Sem a barra, nao ha motivo para escurecer.
   ========================================================================== */

.gcp-lp .gcp-video .gcp-video__play {
  position: absolute; inset: 0; margin: 0;
  width: 100%; height: 100%;
  display: grid; place-items: center;
  border-radius: 0; background: none; box-shadow: none;
}

.gcp-lp .gcp-link-sec {
  color: var(--gcp-primaria);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.gcp-lp .gcp-link-sec:hover { color: var(--gcp-primaria-2); }

.gcp-video__capa, .gcp-video__vazio { opacity: 1; }
.gcp-video:hover .gcp-video__capa { opacity: .92; }

/* ==========================================================================
   v3.0 — PATCH 08: passo a passo em zigue-zague

   Diferenca em relacao ao patch: ele previa recorte por CSS, com
   aspect-ratio 4/3 + object-position calibrado no inspetor. Isso nao
   funcionaria: as capturas sao 16:9 (paisagem), e numa caixa 4:3 o
   object-fit: cover corta as LATERAIS, nao a faixa vertical que interessa.
   Ajustar a posicao vertical nao teria efeito nenhum.

   Os arquivos foram recortados na origem, a partir das capturas em 1920x1080,
   ja centrados no elemento que o texto cita. Aqui a imagem entra na proporcao
   nativa, sem corte e sem calibragem.

   Ordem no HTML: sempre texto -> imagem. A alternancia e so visual, via
   `order`, para leitor de tela e celular manterem a leitura correta.
   ========================================================================== */

.gcp-lp .gcp-passos-zz {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: clamp(40px, 5vw, 72px);
  position: relative;
}

.gcp-lp .gcp-passo-zz {
  display: grid; gap: clamp(20px, 3vw, 44px);
  align-items: center; margin: 0; padding: 0;
}

@media (min-width: 900px) {
  .gcp-passo-zz { grid-template-columns: 1fr 1fr; }
  .gcp-passo-zz:nth-child(even) .gcp-passo-zz__texto { order: 2; justify-self: end; }
  .gcp-passo-zz:nth-child(even) .gcp-passo-zz__midia { order: 1; }

  /* fio ligando os passos, atras do conteudo */
  .gcp-passos-zz::before {
    content: ""; position: absolute; left: 50%; top: 40px; bottom: 40px;
    width: 2px; transform: translateX(-50%); z-index: -1;
    background: linear-gradient(to bottom, transparent, var(--gcp-borda) 12%, var(--gcp-borda) 88%, transparent);
  }
}

.gcp-passo-zz__texto { max-width: 46ch; }

.gcp-passo-zz__num {
  display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--gcp-clara); color: var(--gcp-primaria);
  font-size: 20px; font-weight: 800; margin-bottom: 16px;
}

.gcp-passo-zz h3 { font-size: 24px; font-weight: 750; margin-bottom: 10px; }
.gcp-lp .gcp-passo-zz p { font-size: 18px; color: var(--gcp-tinta-2); margin: 0; }

.gcp-lp .gcp-passo-zz__midia { margin: 0; padding: 0; }
.gcp-passo-zz__midia img {
  width: 100%; height: auto; display: block;
  border-radius: 14px;
  border: 1px solid var(--gcp-borda);
  box-shadow: 0 14px 44px rgba(16,20,28,.14);
}

@media (max-width: 899px) {
  .gcp-lp .gcp-passos-zz { gap: 36px; }
  .gcp-passo-zz__midia img { border-radius: 12px; }
}

/* ---- sublista dentro de um passo (a ativacao tem 4 sub-etapas) ---- */
.gcp-lp .gcp-passo-zz__lista { margin: 0; padding: 0; list-style: none; counter-reset: sub; display: grid; gap: 10px; }
.gcp-lp .gcp-passo-zz__lista li {
  counter-increment: sub; position: relative; padding-left: 34px; margin: 0;
  font-size: 17px; color: var(--gcp-tinta-2);
}
.gcp-passo-zz__lista li::before {
  content: counter(sub); position: absolute; left: 0; top: 1px;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--gcp-clara); color: var(--gcp-primaria);
  font-size: 13px; font-weight: 800;
  display: grid; place-items: center;
}
.gcp-passo-zz__lista strong { color: var(--gcp-tinta); }

/* ---- o video fecha o zigue-zague, sem numero ---- */
.gcp-passo-zz--video .gcp-passo-zz__midia .gcp-video {
  border-radius: 14px;
  border: 1px solid var(--gcp-borda);
  box-shadow: 0 14px 44px rgba(16,20,28,.14);
}

/* ==========================================================================
   v3.1 — PATCH 09: secao "Por que comprar aqui"
   De 15 blocos para 5, com cinco formatos diferentes.
   ========================================================================== */

.gcp-secao--escura .gcp-numero { font-size: clamp(34px, 3.2vw, 46px); color: var(--gcp-primaria-2); }
.gcp-secao--escura .gcp-numero + span { font-size: 15px; color: rgba(255,255,255,.7); }

/* ---- voz da loja: citacao, nao card ---- */
.gcp-voz { display: grid; gap: clamp(20px, 2.4vw, 32px); margin-top: clamp(40px, 4vw, 60px); }
@media (min-width: 900px) { .gcp-voz { grid-template-columns: repeat(2, 1fr); } }

.gcp-lp .gcp-voz__item {
  position: relative; margin: 0;
  padding: 6px 0 0 34px;
  border-left: 3px solid var(--gcp-primaria);
}
.gcp-voz__item::before {
  content: "\201C"; position: absolute; left: 14px; top: -14px;
  font-size: 60px; line-height: 1; color: var(--gcp-primaria); opacity: .5;
}
.gcp-lp .gcp-voz__item p { font-size: 19px; line-height: 1.6; color: rgba(255,255,255,.9); margin: 0; }
.gcp-voz__item footer {
  margin-top: 14px; font-size: 15px; font-weight: 700;
  color: rgba(255,255,255,.6); letter-spacing: .02em;
}
.gcp-voz__item--nota { border-left-color: rgba(255,255,255,.28); }
.gcp-voz__item--nota::before { color: rgba(255,255,255,.34); }

/* ---- depoimentos: 3 numa linha ---- */
.gcp-depoimentos { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1040px) { .gcp-depoimentos { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px)  { .gcp-depoimentos { grid-template-columns: 1fr; } }

/* ---- selos: link vale mais que print ---- */
.gcp-selos { display: grid; gap: 14px; margin-top: clamp(36px, 4vw, 52px); }
@media (min-width: 760px) { .gcp-selos { grid-template-columns: repeat(3, 1fr); } }

.gcp-lp .gcp-selo {
  display: flex; align-items: center; gap: 16px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 14px; padding: 20px 24px;
  color: #fff; text-decoration: none;
  transition: border-color .16s ease, background-color .16s ease;
}
.gcp-lp a.gcp-selo:hover { background: rgba(255,255,255,.11); border-color: var(--gcp-primaria-2); color: #fff; }
.gcp-selo strong { font-size: 34px; font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.gcp-selo span   { font-size: 15px; line-height: 1.45; color: rgba(255,255,255,.82); }
.gcp-selo em     { font-style: normal; color: rgba(255,255,255,.58); font-size: 14px; }

/* ---- faixa de rodape: reembolso e contato ---- */
/* Era flex com space-between e tres itens: o terceiro caia sozinho na linha de
   baixo, desalinhado dos outros dois. Agora e grade de tres colunas rotuladas. */
.gcp-faixa-info {
  margin-top: clamp(32px, 3.4vw, 44px); padding-top: 26px;
  border-top: 1px solid rgba(255,255,255,.16);
  display: grid; gap: 24px 40px;
  font-size: 16px; color: rgba(255,255,255,.75);
}
@media (min-width: 820px) { .gcp-faixa-info { grid-template-columns: repeat(3, 1fr); } }

.gcp-faixa-info > div { display: grid; gap: 6px; align-content: start; }
.gcp-faixa-info strong {
  color: #fff; font-size: 14px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; margin-bottom: 4px;
}
.gcp-faixa-info span { color: rgba(255,255,255,.68); }
.gcp-lp .gcp-faixa-info a {
  color: #fff; text-decoration: underline; text-underline-offset: 4px;
  justify-self: start;
}
.gcp-lp .gcp-faixa-info a:hover { color: var(--gcp-primaria-2); }

/* subtitulo dentro de secao escura: o filete roxo some no fundo escuro */
.gcp-secao--escura .gcp-subtitulo { border-left-color: var(--gcp-primaria-2); color: #fff; }

/* ==========================================================================
   v3.2 — PATCH 10: CTA final com dois planos, e preco por dia
   ========================================================================== */

.gcp-cta-final { text-align: center; }
.gcp-lp .gcp-cta-final .gcp-lead { margin-inline: auto; }

.gcp-cta-final__acoes {
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: center;
  margin-top: 32px;
}
.gcp-cta-final__acoes .gcp-btn {
  flex-direction: column; gap: 3px;
  padding: 18px 34px; line-height: 1.2;
}
.gcp-cta-final__acoes .gcp-btn small { font-size: 14px; font-weight: 500; opacity: .78; }
.gcp-lp .gcp-cta-final__nota { margin-top: 20px; font-size: 16px; color: rgba(255,255,255,.72); }
.gcp-lp .gcp-cta-final__nota a { color: #fff; text-decoration: underline; text-underline-offset: 4px; }

/* ---- preco por dia e economia, nos cards de plano ---- */
.gcp-plano__dia {
  display: block; margin-top: 6px;
  font-size: 16px; font-weight: 650; color: var(--gcp-primaria);
}
.gcp-lp .gcp-plano__economia {
  margin: 14px 0 0; padding: 12px 14px;
  background: var(--gcp-clara); border-radius: 10px;
  font-size: 15px; color: var(--gcp-tinta); line-height: 1.45;
}
.gcp-plano__economia strong { font-weight: 800; }

/* "Mais vendido" e recomendacao, "Unica loja brasileira" e fato: cores
   diferentes para nao lerem como a mesma coisa. */
.gcp-plano__selo--vendido { background: var(--gcp-escura); }

/* ==========================================================================
   v3.3 — PATCH 11: celular

   Medido no navegador antes de decidir:
       barra inferior do tema ... 55px (o patch estimava 76)
       .gcp-nav ................. display:none — ja oculto pelo bloco do header
       #gcp-cabecalho ........... 0x0 — o menu de ancora nao existe no celular
       h1 comeca em ............. 341px
       CTA comeca em ............ 749px, com viewport de 757  -> fora da tela
   ========================================================================== */

/* <picture> nao pode virar caixa de layout: a imagem precisa se posicionar
   direto dentro do hero. */
.gcp-hero__pic { display: contents; }

@media (max-width: 899px) {
  /* SO PARA O BOOSTEROID. Aqui a arte fica ATRAS do texto, nao acima dele.

     Vale para a arte do Boosteroid porque ela e alta (820x609, quase 4:3):
     empilhada, ocupa 360px numa tela de 485px e joga o CTA para fora da
     primeira tela. Como fundo, ela nao consome altura propria.

     A arte do Xbox e 16:9 (900x506) e ocupa so 273px na mesma tela — cabe
     empilhada, e precisa disso: os aparelhos dela estao nas QUATRO bordas,
     entao qualquer scrim ou corte come justamente o que interessa mostrar.
     O Xbox usa o bloco base mais abaixo. Numeros, cores (#130A2D) e o alivio
     lateral daqui foram medidos em cima da arte do Boosteroid e nao
     significam nada na outra.

     Os 54% nao sao chute. Compondo a arte real com o scrim e medindo pixel a
     pixel o pior contraste da faixa onde o texto cai:
         scrim cedo, texto a 54% .. 5,25:1 OK, arte limpa ate 44%
         scrim tardio, texto a 66% . 5,35:1 OK, arte limpa ate 58%  <- escolhido
         scrim tardio, texto a 72% . 8,43:1 OK, arte limpa ate 61%
     O escolhido deixa o tablet e o celular com a cor original ate 58% da arte,
     mantendo o CTA dentro da primeira tela. Comecar o texto mais alto encurta
     o hero, mas apaga justamente os dois aparelhos que interessam ver. */
  .gcp-lp--boosteroid .gcp-hero { position: relative; }

  .gcp-lp--boosteroid .gcp-hero__bg {
    position: absolute; top: 0; left: 0; right: 0; bottom: auto;
    width: 100%; height: auto; max-width: 100%;
    aspect-ratio: auto;
    object-fit: contain; object-position: top center;
    margin: 0; z-index: 0;
    -webkit-mask-image: none; mask-image: none;
  }

  /* Scrim ancorado na proporcao da arte, para acompanhar a altura dela
     qualquer que seja a largura da tela. Transparente no topo: a TV e o
     monitor ficam com a cor original. */
  .gcp-lp--boosteroid .gcp-hero::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0;
    aspect-ratio: 820 / 609;
    z-index: 1; pointer-events: none;
    background: linear-gradient(to bottom,
      rgba(19,10,45,0)   0%,
      rgba(19,10,45,0)   48%,
      rgba(19,10,45,.40) 60%,
      rgba(19,10,45,.92) 74%,
      #130A2D            88%,
      #130A2D            100%);

    /* Alivio horizontal: o texto ocupa os ~75% da esquerda, e o celular esta
       colado na borda direita. Enfraquecer o scrim so do lado sem texto
       devolve o aparelho sem custo de leitura. Medido:
           sem alivio ............ contraste 5,35:1 | scrim sobre o celular 85%
           alivio a partir de 62% . 4,40:1 REPROVA  | 43%
           alivio a partir de 70% . 5,26:1 OK       | 36%   <- escolhido
           alivio a partir de 76% . 5,35:1 OK       | 32%
       O de 70% e o que mais libera o celular ainda passando em AA. */
    -webkit-mask-image: linear-gradient(to right,
      #000 0%, #000 70%, rgba(0,0,0,.52) 86%, rgba(0,0,0,.32) 100%);
            mask-image: linear-gradient(to right,
      #000 0%, #000 70%, rgba(0,0,0,.52) 86%, rgba(0,0,0,.32) 100%);
  }

  .gcp-lp--boosteroid .gcp-hero__grid { position: relative; z-index: 2; padding-top: 49vw; }

  /* Espaco para a barra fixa do tema (55px medidos + folga). A folga vai na
     ULTIMA SECAO, nao no .gcp-lp: como padding do .gcp-lp ela era pintada com o
     fundo branco do container e virava uma faixa branca entre a ultima secao e
     o rodape. Na secao, quem pinta e a propria secao. */
  .gcp-lp { padding-bottom: 0; }
  .gcp-lp > .gcp-secao:last-child { padding-bottom: calc(46px + 68px); }

  /* Com cabecalho fixo do tema e barra fixa embaixo, menu de ancora fixo
     consumiria o pouco que sobra. Ja esta oculto pelo bloco do cabecalho;
     a regra fica como rede de seguranca caso o bloco saia de la. */
  .gcp-nav { display: none; }
}

@media (max-width: 640px) {
  /* ---- CTAs em largura total: alvo de toque maior e sem ambiguidade de
         alinhamento. Vale para todos os botoes principais da pagina. ---- */
  .gcp-hero__acoes,
  .gcp-cta-final__acoes {
    display: grid; grid-template-columns: 1fr; gap: 12px;
    margin-top: 26px;
  }
  .gcp-hero__acoes .gcp-btn,
  .gcp-cta-final__acoes .gcp-btn,
  .gcp-plano .gcp-plano__cta {
    width: 100%; justify-content: center;
    padding: 17px 20px; font-size: 17px;
  }

  /* Provas sociais seguem alinhadas a esquerda, acompanhando o paragrafo:
     lista de varias linhas centralizada muda a margem esquerda a cada linha
     e fica mais dificil de varrer. */
  .gcp-lp .gcp-hero__provas {
    flex-direction: column; gap: 9px;
    margin: 24px 0 0; font-size: 16px;
  }

  /* ---- tipografia: a base de 18px e calibrada para desktop ---- */
  .gcp-lp { font-size: 17px; line-height: 1.6; }

  .gcp-lp h1 { font-size: 29px; line-height: 1.14; }   /* este H1 tem 74 caracteres */
  .gcp-lp h2 { font-size: 26px; line-height: 1.2; }
  .gcp-lp h3 { font-size: 20px; }

  .gcp-lead                    { font-size: 17px; }
  .gcp-hero p                  { font-size: 17px; }
  .gcp-box p                   { font-size: 16.5px; }
  .gcp-box--icone p            { font-size: 16.5px; }
  .gcp-box--icone h3           { font-size: 19px; }
  .gcp-faq summary             { font-size: 17px; }
  .gcp-faq details > div       { font-size: 16.5px; }
  .gcp-plano__itens li         { font-size: 16.5px; }
  .gcp-depoimento p            { font-size: 17px; }
  .gcp-passo-zz h3             { font-size: 20px; }
  .gcp-lp .gcp-passo-zz p      { font-size: 16.5px; }
  .gcp-plano__preco .gcp-valor { font-size: 40px; }
  .gcp-plano__periodo          { font-size: 23px; }
  .gcp-numero                  { font-size: 32px; }
  .gcp-comparativo__hero       { font-size: 38px; }
  .gcp-selo strong             { font-size: 28px; }
  .gcp-subtitulo               { font-size: 19px; }

  /* ---- respiro: cards e secoes mais compactos ---- */
  .gcp-box--icone { padding: 22px; }
  .gcp-box__icone { width: 44px; height: 44px; margin-bottom: 14px; }
  .gcp-box__icone svg { width: 22px; height: 22px; }
  .gcp-lp .gcp-plano { padding: 24px 22px; }
  .gcp-secao { padding-block: 46px; }
  .gcp-secao__cabeca { margin-bottom: 26px; }
  .gcp-grid { gap: 14px; }
}

/* ==========================================================================
   v3.4 — CELULAR: compactar a secao de planos

   Medido antes de mexer, em tela de 485x673:
       secao #planos ... 2470px = 3,7 telas
       cada card ....... 569px, dos quais 345 sao conteudo e 224 sao respiro
       grafico ......... 708px, mais que uma tela inteira

   O respiro dos cards foi calibrado para desktop. No celular ele nao "arruma",
   so afasta o segundo preco do primeiro — e comparar dois planos e exatamente
   o que decide a compra aqui.
   ========================================================================== */

@media (max-width: 640px) {
  /* O 1fr na linha dos itens existe para alinhar os dois cards lado a lado.
     Em coluna unica nao ha o que alinhar, e ele so estica o card. */
  .gcp-lp .gcp-plano {
    grid-template-rows: auto auto auto auto auto auto;
    padding: 20px 20px 22px;
  }

  .gcp-lp .gcp-plano__preco { margin-top: 10px; }
  .gcp-lp .gcp-plano__itens { margin: 16px 0 18px; gap: 9px; }
  .gcp-plano__dia { margin-top: 4px; }

  /* "Compare os precos logo abaixo" some: o grafico vem na sequencia, entao a
     linha custa 69px de altura para dizer o que a proxima rolagem ja mostra. */
  .gcp-lp .gcp-plano__nota { display: none; }

  /* grafico: era maior que a tela */
  .gcp-lp .gcp-comparativo { padding: 22px 20px; }
  .gcp-comparativo__cabeca { margin-bottom: 18px; }
  .gcp-lp .gcp-comparativo__hero { font-size: 34px; margin-bottom: 4px; }
  .gcp-comparativo__hero span { font-size: 15px; margin-top: 5px; }
  .gcp-comparativo__sub { font-size: 15px; }
  .gcp-barras { gap: 10px; }
  .gcp-barra { gap: 6px 12px; }
  .gcp-lp .gcp-comparativo__mensal { margin-top: 18px; padding-top: 14px; font-size: 16px; }

  .gcp-lp .gcp-faixa-cambio { padding: 16px 18px; gap: 12px; }
  .gcp-faixa-cambio__icone { width: 36px; height: 36px; }
}

/* ==========================================================================
   v3.5 — CELULAR: icone ao lado do titulo, nao acima

   Empilhado, o icone custa a propria altura mais a margem — ~58px por card,
   so para separar duas linhas. Ao lado do titulo ele ocupa a altura que a
   linha do titulo ja usaria. Sao 11 cards com esse formato na pagina.

   O paragrafo ocupa as duas colunas: alinhar embaixo do titulo indentaria o
   texto e devolveria em largura o que se ganhou em altura.
   ========================================================================== */

@media (max-width: 640px) {
  .gcp-box--icone {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 12px; row-gap: 0;
    align-items: center;
  }
  .gcp-box__icone {
    grid-column: 1; grid-row: 1;
    width: 40px; height: 40px; margin-bottom: 0; border-radius: 11px;
  }
  .gcp-box__icone svg { width: 20px; height: 20px; }
  .gcp-box--icone h3 { grid-column: 2; grid-row: 1; margin-bottom: 0; }
  .gcp-box--icone p  { grid-column: 1 / -1; grid-row: 2; margin-top: 12px; }
}

/* ==========================================================================
   v3.6 — MEDIDA DE LINHA NAS RESPOSTAS DO FAQ

   Medido em 1905px: a resposta do FAQ abria com 1350px e 119 caracteres por
   linha. O limite confortavel de leitura fica em torno de 75; acima de 90 o
   olho erra a linha ao voltar para a esquerda.

   A fonte esta certa (18px). O que faltava era teto de largura — e o <details>
   nao tinha nenhum, porque nasceu antes da pagina virar 1440px.
   ========================================================================== */

.gcp-faq details > div { max-width: 82ch; }
.gcp-lp .gcp-comparativo__mensal { max-width: 88ch; }

/* Nota dos selos: o Reclame Aqui abre na aba de 6 meses, que mostra "sem
   reputacao" por falta de volume no periodo. Sem esta linha, quem clica acha
   que o 9,3 foi inventado — e perde-se mais credibilidade do que se ganhou. */
/* As pílulas de pagamento vêm logo depois da lista de passos e precisam de
   respiro próprio: coladas, pareciam um quinto item da lista. */
.gcp-lp .gcp-pagamentos { margin-top: clamp(20px, 2.4vw, 30px); }

/* Sem `max-width`: na seção escura todos os outros textos ocupam a largura
   inteira, e só esta nota quebrava na metade — a diferença chamava mais
   atenção que o próprio texto. */
.gcp-lp .gcp-selos__nota {
  margin: 16px 0 0;
  font-size: 15px; line-height: 1.5; color: rgba(255,255,255,.62);
}
.gcp-selos__nota strong { color: rgba(255,255,255,.85); font-weight: 700; }

/* ==========================================================================
   v4.0 — PAGINA XBOX: trilhas e niveis do Game Pass
   ========================================================================== */

/* ---- trilhas: o bloco que evita a rolagem infinita ---- */
.gcp-trilhas { display: grid; gap: clamp(16px, 2vw, 24px); }
@media (min-width: 860px) { .gcp-trilhas { grid-template-columns: repeat(3, 1fr); } }

.gcp-lp .gcp-trilha {
  display: grid; align-content: start; gap: 10px;
  background: var(--gcp-fundo);
  border: 1px solid var(--gcp-borda);
  border-radius: var(--gcp-radius);
  padding: clamp(24px, 2.6vw, 32px);
  margin: 0; text-decoration: none;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.gcp-lp .gcp-trilha:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--gcp-primaria) 40%, var(--gcp-borda));
  box-shadow: 0 14px 40px rgba(16,20,28,.10);
}
.gcp-trilha__icone {
  display: grid; place-items: center;
  width: 52px; height: 52px; border-radius: 13px; margin-bottom: 6px;
  background: var(--gcp-clara); color: var(--gcp-primaria);
}
.gcp-trilha__icone svg { width: 26px; height: 26px; }
.gcp-trilha h3 { font-size: 21px; font-weight: 750; color: var(--gcp-tinta); margin: 0; }
.gcp-lp .gcp-trilha p { font-size: 17px; color: var(--gcp-tinta-2); margin: 0; }
.gcp-trilha__link {
  margin-top: 6px; font-size: 17px; font-weight: 700; color: var(--gcp-primaria);
}
.gcp-trilha__link::after { content: " →"; }

/* ---- niveis do Game Pass ---- */
.gcp-niveis { display: grid; gap: clamp(18px, 2vw, 26px); max-width: 1180px; margin-inline: auto; text-align: left; }
@media (min-width: 900px) { .gcp-niveis { grid-template-columns: repeat(3, 1fr); } }

.gcp-lp .gcp-nivel {
  position: relative; display: grid;
  grid-template-rows: auto auto auto auto auto 1fr auto auto;
  background: var(--gcp-fundo);
  border: 1px solid var(--gcp-borda);
  border-radius: 18px;
  padding: clamp(26px, 2.8vw, 34px);
  margin: 0;
  box-shadow: 0 18px 50px rgba(4,20,6,.16);
}
.gcp-nivel--destaque { border: 2px solid var(--gcp-primaria); box-shadow: 0 22px 60px rgba(4,20,6,.26); }

.gcp-nivel__selo {
  position: absolute; top: 16px; right: 16px;
  background: var(--gcp-primaria); color: #fff;
  font-size: 13px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  padding: 8px 15px; border-radius: 999px; line-height: 1;
}
/* O nome do plano e a informacao que faz a pessoa escolher a coluna: "Essential",
   "Premium", "Ultimate". O prefixo "Game Pass" saiu daqui — ele ja esta no titulo
   da secao e so repetia a mesma palavra tres vezes, roubando tamanho do que
   diferencia. */
.gcp-nivel h3.gcp-nivel__nome {
  font-size: clamp(29px, 2.5vw, 34px); font-weight: 800; letter-spacing: -.025em;
  line-height: 1.1; color: var(--gcp-tinta); margin: 0; padding-right: 124px;
}
.gcp-nivel__jogos { font-size: 16px; color: var(--gcp-tinta-2); }

.gcp-lp .gcp-nivel__preco { margin: 16px 0 0; display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.gcp-nivel__preco .gcp-valor { font-size: clamp(38px, 3vw, 46px); font-weight: 800; letter-spacing: -.03em; color: var(--gcp-escura); line-height: 1; }
.gcp-nivel__preco .gcp-por { font-size: 17px; color: var(--gcp-tinta-2); }
.gcp-lp .gcp-nivel__total { margin: 6px 0 0; font-size: 15px; color: var(--gcp-tinta-2); }

/* Seletor de periodo.

   Era uma grade de botoes-pilula. Com ate 6 periodos por plano ela ocupava
   quase metade do card, deixava os tres cards com alturas diferentes e
   empurrava o botao de compra para fora da primeira tela. Um <select> resolve
   os tres de uma vez e ainda entrega o seletor nativo no celular.

   A seta e desenhada aqui como SVG embutido porque appearance:none apaga a
   nativa; sem ela o campo nao parece clicavel. */
.gcp-periodos { margin-top: 18px; }
.gcp-periodos__rotulo {
  display: block; margin-bottom: 6px;
  font-size: 13px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--gcp-tinta-2);
}
.gcp-lp select.gcp-periodo-seletor {
  -webkit-appearance: none; appearance: none;
  display: block; width: 100%; margin: 0;
  /* O tema fixa a altura de todo <select> em 42px. Com o padding daqui sobrava
     menos espaco util que a altura da linha, e o Chrome recortava o texto em
     cima e embaixo. A altura passa a sair do conteudo. */
  height: auto; min-height: 0;
  padding: 13px 42px 13px 15px;
  border: 1px solid var(--gcp-borda); border-radius: var(--gcp-radius-sm);
  background-color: var(--gcp-fundo);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%235B6270' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px 16px;
  font-family: inherit; font-size: 16px; font-weight: 650;
  /* 1.55 e nao 1.3: o Chrome recorta o texto do <select> na altura da linha, e
     com 1.3 o rabinho da virgula de "R$ 43,90" ficava de fora — o preco parecia
     estar escrito com ponto. */
  line-height: 1.55;
  color: var(--gcp-tinta);
  /* A lista suspensa e desenhada pelo navegador, nao pela pagina: sem isto ela
     nascia com o fundo escuro do tema e herdava a cor escura do texto daqui,
     ficando preto no preto. */
  color-scheme: light;
  cursor: pointer;
  transition: border-color .14s ease, box-shadow .14s ease;
}
.gcp-lp select.gcp-periodo-seletor option {
  background-color: #FFFFFF;
  color: #14161A;
  font-weight: 600;
}
.gcp-lp select.gcp-periodo-seletor:hover { border-color: var(--gcp-primaria); }
.gcp-lp select.gcp-periodo-seletor:focus-visible {
  outline: none; border-color: var(--gcp-primaria);
  box-shadow: 0 0 0 3px var(--gcp-clara);
}

.gcp-lp .gcp-nivel__itens { margin: 20px 0 22px; padding: 0; }
.gcp-nivel__itens li { font-size: 16.5px; }
.gcp-lp .gcp-nivel .gcp-nivel__cta {
  width: 100%; justify-content: center;
  background: var(--gcp-primaria); color: #fff;
  font-size: 18px; padding: 16px 22px;
}
.gcp-lp .gcp-nivel .gcp-nivel__cta:hover { background: var(--gcp-primaria-2); color: #fff; }
.gcp-lp .gcp-nivel__oficial {
  margin: 12px 0 0; text-align: center;
  font-size: 15px; font-weight: 650; color: var(--gcp-primaria);
}

/* Superficie clara dentro da secao de marca — mesma regra dos outros cards. */
.gcp-secao--marca .gcp-nivel,
.gcp-secao--marca .gcp-trilha {
  --gcp-tinta: #14161A; --gcp-tinta-2: #5B6270; --gcp-borda: #E3E6EC;
  --wd-entities-title-color: #14161A; --wd-title-color: #14161A;
  color: var(--gcp-tinta);
}
.gcp-secao--marca .gcp-nivel h3 { color: var(--gcp-tinta); }

@media (max-width: 640px) {
  .gcp-lp .gcp-nivel { grid-template-rows: none; padding: 22px 20px; }
  .gcp-nivel h3.gcp-nivel__nome { padding-right: 110px; }
  .gcp-nivel__preco .gcp-valor { font-size: 36px; }
  .gcp-lp .gcp-trilha { padding: 20px; }
}

/* ==========================================================================
   v4.1 — XBOX: cartões de saldo, calculadora e fluxos de compra
   ========================================================================== */

.gcp-lp .gcp-cartoes {
  display: grid; gap: 12px; margin: 0; padding: 0; list-style: none;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
}
.gcp-lp .gcp-cartoes li { margin: 0; }
.gcp-lp .gcp-cartao {
  display: grid; gap: 3px; text-align: center; text-decoration: none;
  background: var(--gcp-fundo); border: 1px solid var(--gcp-borda);
  border-radius: var(--gcp-radius-sm); padding: 16px 10px;
  transition: border-color .14s ease, transform .14s ease;
}
.gcp-lp .gcp-cartao:hover { border-color: var(--gcp-primaria); transform: translateY(-2px); }
.gcp-cartao__face  { font-size: 21px; font-weight: 800; color: var(--gcp-tinta); letter-spacing: -.02em; }

/* Valor escolhido: verde cheio, nao so uma borda. Com onze cartoes iguais na
   grade, um contorno some — a peca marcada precisa mudar de cor inteira. */
.gcp-lp .gcp-cartao.is-selecionado,
.gcp-lp .gcp-cartao.is-selecionado:hover {
  background: var(--gcp-primaria);
  border-color: var(--gcp-primaria);
  transform: none;
  /* a sombra estava com o verde do Xbox fixo no codigo e vazava para as outras
     marcas; agora e um token, com o verde so como reserva */
  box-shadow: 0 8px 20px var(--gcp-sombra-selecao, rgba(16, 124, 16, .28));
  /* o cartão marcado herda cor clara: nenhum texto usa a cor do container hoje,
     mas qualquer coisa acrescentada aqui nasce legível sobre o fundo cheio */
  color: #FFFFFF;
}
.gcp-lp .gcp-cartao.is-selecionado .gcp-cartao__face { color: #fff; }

/* Botao unico de compra, alimentado pelo cartao escolhido. Ocupa a largura da
   grade de valores: e o passo seguinte dela, e alinhar as duas bordas deixa
   isso obvio. */
.gcp-saldo__acao { margin-top: 20px; }
.gcp-lp .gcp-saldo__comprar {
  display: flex; width: 100%; justify-content: center;
  background: var(--gcp-primaria); color: #fff;
  font-size: 17px; padding: 16px 30px;
}
.gcp-lp .gcp-saldo__comprar:hover { background: var(--gcp-primaria-2); color: #fff; }
.gcp-lp .gcp-saldo__comprar[aria-disabled="true"] {
  background: var(--gcp-borda); color: var(--gcp-tinta-2);
  cursor: default; box-shadow: none;
}

/* Os 11 valores em faixa larga viravam duas fileiras soltas com um vazio enorme
   a direita. Lado a lado com a foto dos cartoes a secao fica mais curta e o
   produto aparece — a pessoa ve o que vai receber enquanto escolhe o valor. */
.gcp-saldo {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  gap: clamp(26px, 3.4vw, 52px);
  align-items: center;
}
/* 128px da 4 por fileira na coluna da esquerda: 11 valores viram 4+4+3, em vez
   de 5+5+1 com um cartao orfao na ultima linha. */
.gcp-saldo__opcoes .gcp-cartoes { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
/* Sem a linha de preco os cartoes viraram uma peca so; a altura continua
   acompanhando a fileira para a grade nao ficar em degrau. */
.gcp-lp .gcp-cartao { height: 100%; align-content: center; }
.gcp-lp .gcp-saldo__nota { margin: 16px 0 0; font-size: 16px; color: var(--gcp-tinta-2); }
.gcp-saldo__arte img {
  display: block; width: 100%; height: auto;
  /* a arte tem fundo transparente: a sombra vem do proprio recorte, nao de um box */
  filter: drop-shadow(0 22px 44px rgba(4, 20, 6, .18));
}

@media (max-width: 900px) {
  .gcp-saldo { grid-template-columns: 1fr; gap: 28px; }
  /* a foto vai para cima: no celular ela apresenta o produto antes da lista */
  .gcp-saldo__arte { order: -1; max-width: 460px; margin-inline: auto; }
}
.gcp-lp .gcp-nota-central { margin: 16px 0 0; text-align: center; font-size: 16px; color: var(--gcp-tinta-2); }

/* ---- calculadora ---- */
.gcp-lp .gcp-calc {
  max-width: 900px; margin-inline: auto;
  background: var(--gcp-fundo); border: 1px solid var(--gcp-borda);
  border-radius: 18px; padding: clamp(24px, 2.8vw, 34px);
  box-shadow: 0 14px 44px rgba(4,20,6,.10);
}
.gcp-calc__entrada label { display: block; font-size: 17px; font-weight: 700; color: var(--gcp-tinta); margin-bottom: 10px; }
.gcp-calc__campo { display: flex; align-items: stretch; gap: 10px; flex-wrap: wrap; }
.gcp-calc__campo > span {
  display: grid; place-items: center; padding: 0 14px;
  background: var(--gcp-clara); color: var(--gcp-primaria);
  border-radius: var(--gcp-radius-sm); font-weight: 800; font-size: 17px;
}
.gcp-lp .gcp-calc__campo input {
  flex: 1 1 180px; min-width: 0;
  font: inherit; font-size: 20px; font-weight: 700; color: var(--gcp-tinta);
  background: var(--gcp-fundo); border: 1px solid var(--gcp-borda);
  border-radius: var(--gcp-radius-sm); padding: 14px 16px;
}
.gcp-lp .gcp-calc__campo input:focus-visible { outline: 2px solid var(--gcp-primaria); outline-offset: 2px; }
.gcp-lp .gcp-calc__dica { margin: 10px 0 0; font-size: 15px; color: var(--gcp-tinta-2); }

.gcp-calc__saida { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--gcp-borda); }
.gcp-lp .gcp-calc__titulo { margin: 0 0 14px; font-size: 18px; font-weight: 750; color: var(--gcp-tinta); }
.gcp-lp .gcp-calc__lista { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.gcp-lp .gcp-calc__lista li {
  display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 10px;
  background: var(--gcp-clara); border-radius: var(--gcp-radius-sm); padding: 11px 15px; margin: 0;
}
.gcp-calc__q { font-weight: 800; color: var(--gcp-primaria); font-size: 16px; }
.gcp-calc__v { font-weight: 700; color: var(--gcp-tinta); font-size: 17px; }
.gcp-calc__p { font-size: 15px; color: var(--gcp-tinta-2); }

.gcp-lp .gcp-calc__resumo { display: grid; gap: 9px; margin: 18px 0 0; }
.gcp-calc__resumo > div { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 9px; border-bottom: 1px dashed var(--gcp-borda); }
.gcp-calc__resumo > div:last-child { border-bottom: 0; padding-bottom: 0; }
.gcp-calc__resumo dt { font-size: 16px; color: var(--gcp-tinta-2); }
.gcp-lp .gcp-calc__resumo dd { margin: 0; font-size: 17px; font-weight: 700; color: var(--gcp-tinta); }

.gcp-calc__acoes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.gcp-lp .gcp-calc__acoes .gcp-btn { font-size: 16px; padding: 12px 20px; border-color: var(--gcp-borda); color: var(--gcp-tinta); }
.gcp-lp .gcp-calc__acoes .gcp-btn:hover { border-color: var(--gcp-primaria); background: var(--gcp-clara); }
.gcp-lp .gcp-calc__aviso { margin: 16px 0 0; font-size: 15px; color: var(--gcp-tinta-2); }
.gcp-lp .gcp-calc__erro  { margin: 0; font-size: 17px; color: #B4232A; font-weight: 650; }

/* ---- fluxos de compra em acordeão ---- */
.gcp-fluxos { display: grid; gap: 12px; max-width: 1080px; margin-inline: auto; }
.gcp-lp .gcp-fluxo {
  background: var(--gcp-fundo); border: 1px solid var(--gcp-borda);
  border-radius: var(--gcp-radius); overflow: hidden;
}
.gcp-fluxo > summary {
  cursor: pointer; list-style: none; padding: 19px 24px;
  font-size: 19px; font-weight: 700; color: var(--gcp-tinta);
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.gcp-fluxo > summary::-webkit-details-marker { display: none; }
.gcp-fluxo > summary::after { content: "+"; font-size: 26px; font-weight: 400; color: var(--gcp-primaria); line-height: 1; }
.gcp-fluxo[open] > summary::after { content: "\2212"; }
.gcp-fluxo[open] > summary { border-bottom: 1px solid var(--gcp-borda); }
.gcp-fluxo__corpo { padding: 22px 24px 26px; }

@media (max-width: 640px) {
  .gcp-lp .gcp-cartoes { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 9px; }
  .gcp-lp .gcp-calc { padding: 20px 18px; }
  .gcp-lp .gcp-calc__campo input { font-size: 18px; }
  .gcp-fluxo > summary { padding: 16px 18px; font-size: 17px; }
  .gcp-fluxo__corpo { padding: 18px 18px 22px; }
}

/* ==========================================================================
   v4.2 — HERO CENTRALIZADO (Xbox)

   A arte oficial do Xbox tem os aparelhos nas BORDAS e o meio relativamente
   livre. Um scrim retangular apagaria os aparelhos, que sao o argumento da
   imagem. Um scrim RADIAL escurece so o miolo, onde o texto fica, e deixa as
   bordas acesas.

   Medido sobre a arte real, variando o nucleo da elipse:
       nucleo .86 ... texto 8,85:1 | aparelhos a 54% do brilho
       nucleo .78 ... texto 6,69:1 | aparelhos a 59%
       nucleo .72 ... texto 5,49:1 | aparelhos a 62%   <- escolhido
       nucleo .66 ... texto 4,54:1 | aparelhos a 66%
   O .72 e o ultimo que mantem folga confortavel sobre o minimo de 4,5:1.
   Sem scrim, a faixa segura da arte era so y 45–60% — nao cabia o hero.
   ========================================================================== */

.gcp-hero--centro { text-align: center; }
.gcp-hero--centro .gcp-hero__grid { display: block; }

.gcp-lp .gcp-hero--centro .gcp-hero__bg {
  position: absolute; inset: 0; top: 0; right: 0; bottom: 0; left: 0;
  width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: center;
  margin: 0; aspect-ratio: auto;
  -webkit-mask-image: none; mask-image: none;
}

.gcp-hero--centro::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  aspect-ratio: auto;
  background: radial-gradient(ellipse 65% 48% at 50% 52%,
    rgba(7,20,30,.72) 0%,
    rgba(7,20,30,.64) 62%,
    rgba(7,20,30,.12) 100%,
    rgba(7,20,30,0)   150%);
}

.gcp-hero--centro .gcp-hero__texto {
  max-width: 860px; margin-inline: auto; position: relative; z-index: 2;
}
.gcp-lp .gcp-hero--centro h1 { max-width: none; margin-inline: auto; }
.gcp-lp .gcp-hero--centro p  { max-width: 60ch; margin-inline: auto; }
.gcp-hero--centro .gcp-hero__acoes  { justify-content: center; }
.gcp-lp .gcp-hero--centro .gcp-hero__provas { justify-content: center; }

@media (max-width: 899px) {
  /* NO CELULAR A ARTE SOBE E O TEXTO DESCE.

     Como fundo ela era esticada para preencher um hero de ~600px numa tela de
     485px: uma imagem 16:9 forcada a 0,8:1 perde mais da metade da largura, e
     sobrava so o miolo — que nesta arte e justamente o vazio azul. Os cinco
     aparelhos ficam nas bordas, entao qualquer recorte come exatamente o
     assunto da imagem.

     Empilhada ela cabe: 16:9 numa tela de 485px sao 273px de altura, contra os
     360px da arte do Boosteroid, que por isso precisou ficar de fundo. E sem
     nada por cima do texto o contraste deixa de ser um problema a resolver. */
  .gcp-hero--centro {
    display: block;
    min-height: 0;
    padding-block: 0 clamp(40px, 8vw, 56px);
    /* O fundo do hero é verde escuro (#07290A). Com a arte empilhada em cima,
       isso punha uma imagem azul-marinho sobre um bloco verde: duas peças sem
       relação nenhuma. No celular o fundo passa a ser a COR DA PRÓPRIA ARTE —
       #18374D é a mediana da faixa de baixo dela, medida no arquivo. */
    background: var(--gcp-hero-emenda);
  }

  /* E a emenda ganha um fade. A arte já vem com o portátil e o console cortados
     pela borda de baixo do arquivo; sem o fade esse corte aparece como um risco
     reto. O degradê só cobre os últimos 18% para não apagar os aparelhos. */
  .gcp-hero--centro::before {
    display: block;
    content: ""; position: absolute; top: 0; left: 0; right: 0;
    aspect-ratio: 900 / 506;
    z-index: 1; pointer-events: none;
    background: linear-gradient(to bottom,
      rgba(24, 55, 77, 0)   82%,
      rgba(24, 55, 77, .70) 94%,
      var(--gcp-hero-emenda) 100%);
  }
  .gcp-lp .gcp-hero--centro .gcp-hero__bg {
    position: static;
    width: 100%; height: auto; max-width: 100%;
    aspect-ratio: auto;
    object-fit: contain;
    margin: 0 0 clamp(20px, 5vw, 30px);
  }
  .gcp-hero--centro .gcp-hero__grid { padding-top: 0; }
  .gcp-lp .gcp-hero--centro .gcp-hero__provas { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 8px 18px; }
}

/* A eyebrow do hero usa a cor primaria, que no Xbox e um verde escuro (#107C10)
   e some no fundo do hero: medido, 3,13:1 — reprova. A variante clara resolve
   sem trocar a identidade: 5,37:1. Vale para qualquer marca cuja primaria seja
   escura demais para fundo escuro. */
/* A eyebrow do hero usa uma variante mais clara da primaria. Medido sobre os
   dois fundos que o hero tem: #16A916 dava 5,05:1 no verde escuro mas caía para
   3,97:1 no azul da arte no celular — reprova. O #6FD86F passa nos dois
   (8,81:1 e 6,93:1). */
.gcp-hero .gcp-eyebrow { color: var(--gcp-hero-tarja, var(--gcp-primaria-2)); }

/* Cor da emenda entre a arte e o hero no celular, e a variante clara da tarja.
   POR MARCA, não global: cada página tem a sua arte e a sua primária. Deixar no
   .gcp-lp fazia a tarja do PlayStation sair verde, herdada do Xbox. */
.gcp-lp--xbox        { --gcp-hero-emenda: #18374D; --gcp-hero-tarja: #6FD86F; }
.gcp-lp--playstation { --gcp-hero-emenda: #042B6D; --gcp-hero-tarja: #8CD1FF; }

/* Nintendo: o hero e vermelho, e nao quase preto como o das outras marcas. A
   tarja clara da marca (#FF3B48) sobre ele dava 2,77:1 — reprovado. Branco a
   85% da 7,22:1 e continua lendo como sobretítulo, nao como corpo de texto. */
.gcp-lp--nintendo    { --gcp-hero-emenda: #B00007; --gcp-hero-tarja: rgba(255, 255, 255, .85); }

/* ==========================================================================
   v4.4 — XBOX: relatos de desconto (substituem a tabela de exemplos)
   ========================================================================== */

/* A tabela de quatro colunas obrigava a ler cruzando linha e cabecalho. Em
   relato cada caso e uma frase fechada, que e como a pessoa conta a compra.
   Fica numa secao escura: as cores sao declaradas aqui, nenhuma herdada. */
/* Tres por fileira, sempre. Com auto-fit dava 4+2 e a segunda fileira ficava
   um toco encostado a esquerda; 3+3 fecha as duas. O max-width segura a largura
   do card no mesmo tamanho de antes — sem ele, tres colunas na faixa inteira
   inchariam cada cartao. */
.gcp-lp .gcp-relatos {
  display: grid; gap: 14px; padding: 0; list-style: none;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 1090px;
  margin: 0 auto;
}
@media (max-width: 980px) { .gcp-lp .gcp-relatos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .gcp-lp .gcp-relatos { grid-template-columns: 1fr; } }
.gcp-lp .gcp-relato {
  margin: 0; padding: 20px 22px; list-style: none;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--gcp-radius-sm);
}
.gcp-relato__topo {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 9px;
}
.gcp-relato__quem {
  font-size: 13px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  color: rgba(255, 255, 255, .62);
}
.gcp-relato__selo {
  flex: 0 0 auto;
  background: var(--gcp-primaria); color: #fff;
  font-size: 13px; font-weight: 800; line-height: 1;
  padding: 6px 11px; border-radius: 999px;
}
.gcp-lp .gcp-relato__texto {
  margin: 0; font-size: 16.5px; line-height: 1.55;
  color: rgba(255, 255, 255, .82);
}
.gcp-relato__texto strong { color: #fff; }
.gcp-relato__pagou { color: #6FD86F; }
.gcp-relato__cheio { color: rgba(255, 255, 255, .58); text-decoration: line-through; }

/* ==========================================================================
   v4.5 — XBOX: superfícies escuras na seção de jogos

   A seção é escura, mas os cards de produto e o aviso vinham brancos: o padrão
   antigo era "cartão claro sobre fundo escuro". Com a grade inteira de capas o
   branco vira uma parede que briga com a arte dos jogos e com o resto da
   página. Aqui eles passam a ser superfícies escuras, iguais às dos relatos —
   a seção fica uma coisa só.

   Escopo: só .gcp-secao--escura. A seção de planos (--marca) segue com os
   cards brancos, que é onde eles funcionam, e a página do Boosteroid não usa
   .gcp-card nem .gcp-aviso dentro de seção escura.
   ========================================================================== */

.gcp-secao--escura .gcp-aviso {
  --gcp-tinta:   #FFFFFF;
  --gcp-tinta-2: rgba(255,255,255,.72);
  --gcp-borda:   rgba(255,255,255,.12);
  --wd-entities-title-color: #FFFFFF;
  --wd-title-color: #FFFFFF;
  background: rgba(255, 255, 255, .05);
  border-color: rgba(255, 255, 255, .12);
  color: var(--gcp-tinta);
}

.gcp-secao--escura .gcp-aviso h3 { color: #fff; }
.gcp-secao--escura .gcp-aviso p  { color: rgba(255,255,255,.78); }


/* ==========================================================================
   v4.6 — XBOX: a vitrine de jogos numa faixa branca de largura total

   Capa de jogo é arte colorida e cheia de contraste. Sobre o verde escuro a
   grade inteira virava um bloco brigando com o fundo. Numa faixa branca que
   atravessa a tela ela vira uma vitrine — destaca em vez de diluir.

   A faixa é irmã do .gcp-lp__wrap, não filha: por isso ocupa a largura toda da
   seção (que já é a da página, pelo bloco LARGURA TOTAL). O conteúdo dentro
   dela volta a ficar preso ao wrap, alinhado com o resto.
   ========================================================================== */

.gcp-faixa-jogos {
  --gcp-tinta:   #14161A;
  --gcp-tinta-2: #5B6270;
  --gcp-borda:   #E5E8EE;
  --wd-entities-title-color: #14161A;
  --wd-title-color: #14161A;
  background: #FFFFFF;
  color: var(--gcp-tinta);
  padding-block: clamp(30px, 3.6vw, 46px);
  margin-block: clamp(32px, 4vw, 52px);
}

.gcp-faixa-jogos .gcp-subtitulo { color: var(--gcp-tinta); }
.gcp-secao--escura .gcp-faixa-jogos .gcp-card {
  background: #FFFFFF;
  border-color: var(--gcp-borda);
  color: var(--gcp-tinta);
}
.gcp-secao--escura .gcp-faixa-jogos .gcp-card:hover { border-color: var(--gcp-primaria); }
.gcp-secao--escura .gcp-faixa-jogos .gcp-card .gcp-card__nome  { color: var(--gcp-tinta); }
.gcp-secao--escura .gcp-faixa-jogos .gcp-card .gcp-card__preco { color: var(--gcp-tinta-2); }

/* O âmbar que o WooCommerce usa no preço dá 2,15:1 sobre branco — reprovado em
   qualquer critério. Sobre a faixa branca ele vira o verde da marca, 5,48:1. */
.gcp-faixa-jogos .gcp-card__preco .woocommerce-Price-amount { color: var(--gcp-primaria); }

/* ==========================================================================
   v4.7 — XBOX: seção Cloud Gaming refeita

   A ordem antiga era comercialmente invertida: abria pelo modo gratuito, ou
   seja, dizia "você não precisa assinar nada" logo antes de a loja vender
   assinatura. Agora a proposta principal (jogar o catálogo do Game Pass sem
   console) abre a seção, com o vídeo ao lado dela, e o modo gratuito vem
   depois, como alternativa e visualmente menor.
   ========================================================================== */

.gcp-cloud-hero {
  display: grid;
  gap: clamp(24px, 3vw, 44px);
  align-items: center;
}
@media (min-width: 960px) {
  .gcp-cloud-hero { grid-template-columns: 1fr 1fr; }
}

.gcp-lp .gcp-cloud-hero__texto .gcp-lista { margin: 22px 0 28px; }
.gcp-lp .gcp-cloud-hero__nota { margin: 12px 0 0; font-size: 16px; color: var(--gcp-tinta-2); }

/* Era largura total com metade vazia. Agora tem medida de leitura E fica
   centrada — antes ficava encostada na esquerda, parecendo desalinhada. */
.gcp-cloud-avaliacao {
  max-width: 76ch;
  margin: clamp(34px, 4vw, 52px) auto 0;
}

/* ---- correção de contraste no .gcp-destaque ----
   A classe pinta o próprio fundo escuro, mas o <h3> continuava puxando a cor
   de título do TEMA, que numa seção clara é escura — título escuro sobre fundo
   escuro, invisível. O mesmo vale para qualquer link dentro dele. */
.gcp-destaque {
  --gcp-tinta: #FFFFFF;
  --gcp-tinta-2: rgba(255,255,255,.82);
  --wd-entities-title-color: #FFFFFF;
  --wd-title-color: #FFFFFF;
  color: #fff;
}
.gcp-destaque h3, .gcp-destaque h4 { color: #fff; }
.gcp-destaque p  { color: rgba(255,255,255,.86); }
.gcp-destaque a  { color: #fff; }

/* ==========================================================================
   v4.8 — o ícone ao lado do título, não em cima dele

   O ícone empilhado acima do título abria uma faixa vazia na largura toda do
   card, e com pouco texto o card ficava mais buraco do que conteúdo. Agora as
   duas peças dividem a primeira linha e o resto do conteúdo desce por baixo,
   ocupando as duas colunas.

   Resolvido aqui e não no HTML de propósito: são onze blocos nas duas páginas,
   todos com a mesma ordem (ícone, título, resto). Uma regra vale por onze
   edições e não deixa nenhum para trás.
   ========================================================================== */

.gcp-lp .gcp-box--icone {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 15px;
  row-gap: 12px;
  /* align-items centra o icone com o titulo DENTRO da primeira linha;
     align-content empilha as linhas a partir do topo, para a sobra de altura
     dos cards mais curtos ir para o rodape em vez de abrir um vao no meio. */
  align-items: center;
  align-content: start;
}
.gcp-lp .gcp-box--icone > .gcp-box__icone {
  grid-column: 1; grid-row: 1;
  margin-bottom: 0;
  width: 46px; height: 46px; border-radius: 12px;
}
.gcp-lp .gcp-box--icone > .gcp-box__icone svg { width: 23px; height: 23px; }
.gcp-lp .gcp-box--icone > h3 { grid-column: 2; grid-row: 1; margin-bottom: 0; }
/* todo o resto atravessa as duas colunas */
.gcp-lp .gcp-box--icone > *:not(.gcp-box__icone):not(h3) { grid-column: 1 / -1; margin-top: 0; }

/* ==========================================================================
   v4.9 — Cloud: os três planos comparados, vídeo junto de "onde funciona"
          e o modo gratuito sem card
   ========================================================================== */

/* O painel que responde "qual plano eu escolho?". Ele existe porque o texto ao
   lado fala de jogar na nuvem e o botão leva para TRÊS planos diferentes: sem
   isso, quem lesse "cerca de 500 jogos" e caísse no Essential se sentiria
   enganado. */
.gcp-cloud-planos {
  background: var(--gcp-fundo);
  border: 1px solid var(--gcp-borda);
  border-radius: var(--gcp-radius);
  padding: clamp(22px, 2.4vw, 30px);
}
.gcp-lp .gcp-cloud-planos h3 { font-size: 18px; margin: 0 0 16px; }
.gcp-lp .gcp-cloud-planos__lista { margin: 0; padding: 0; list-style: none; }
.gcp-lp .gcp-cloud-planos__lista li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 2px 14px;
  margin: 0;
  padding: 13px 0;
  border-top: 1px solid var(--gcp-borda);
}
.gcp-lp .gcp-cloud-planos__lista li:first-child { border-top: 0; padding-top: 0; }
.gcp-cloud-planos__nome  { font-size: 17px; font-weight: 750; color: var(--gcp-tinta); }
.gcp-cloud-planos__jogos { font-size: 16px; font-weight: 700; color: var(--gcp-primaria); text-align: right; }
.gcp-cloud-planos__fila  { grid-column: 1 / -1; font-size: 14.5px; color: var(--gcp-tinta-2); }
.gcp-lp .gcp-cloud-planos__nota {
  margin: 16px 0 0; padding-top: 14px;
  border-top: 1px solid var(--gcp-borda);
  max-width: none; font-size: 15px; color: var(--gcp-tinta-2);
}

/* "onde funciona" e o vídeo dividem a linha. O vídeo saiu de cima, ao lado da
   proposta principal, porque ali ele competia com o painel de planos — que é a
   informação que faz a pessoa decidir. */
.gcp-cloud-onde {
  display: grid;
  gap: clamp(24px, 3vw, 44px);
  align-items: center;
  margin-top: clamp(38px, 4.4vw, 60px);
}
@media (min-width: 960px) {
  .gcp-cloud-onde { grid-template-columns: 1fr 1fr; }
}
.gcp-lp .gcp-cloud-onde__midia { margin: 0; }
.gcp-lp .gcp-cloud-onde__midia figcaption {
  margin-top: 12px; font-size: 15px; color: var(--gcp-tinta-2); text-align: center;
}
.gcp-lp .gcp-cloud-onde .gcp-subtitulo { margin-top: 0; }
.gcp-lp .gcp-cloud-onde .gcp-inline { max-width: none; }

/* Modo gratuito: deixou de ser card. Como card ele ficava do tamanho da
   proposta principal e disputava atenção com ela, que é o oposto do que a
   seção precisa. Agora é um bloco de texto com um alerta em filete. */
.gcp-cloud-gratis { margin-top: clamp(38px, 4.4vw, 60px); }
.gcp-lp .gcp-cloud-gratis__alerta {
  margin: 0 0 22px;
  max-width: none;
  border-left: 3px solid var(--gcp-primaria);
  padding: 2px 0 2px 16px;
  font-size: 16px;
  color: var(--gcp-tinta-2);
}
.gcp-cloud-gratis__alerta strong { color: var(--gcp-tinta); }
.gcp-cloud-gratis__colunas {
  display: grid;
  gap: clamp(18px, 2.6vw, 40px);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.gcp-cloud-gratis h4 { margin: 0 0 10px; font-size: 17px; font-weight: 700; color: var(--gcp-tinta); }
.gcp-lp .gcp-cloud-gratis .gcp-lista { margin: 0; }
.gcp-lp .gcp-cloud-gratis__gancho {
  margin: 24px 0 0; padding-top: 16px;
  max-width: none;
  border-top: 1px solid var(--gcp-borda);
  font-size: 16px;
}

@media (max-width: 640px) {
  .gcp-lp .gcp-cloud-planos__lista li { grid-template-columns: 1fr; }
  .gcp-cloud-planos__jogos { text-align: left; }
}

/* ==========================================================================
   v5.0 — o vão entre a última seção e o rodapé

   Medido no celular: 297px de branco depois da última seção. Vinham de três
   lugares — 68px de padding do .gcp-lp (resolvido acima, passou para a seção),
   40px de padding do <main> do tema e 190px do .wd-prefooter.

   O prefooter FICA: ele tem conteúdo real ("Nossos parceiros"). O que sai é só
   o padding do main, que é espaço morto entre duas coisas que já têm o seu.
   ========================================================================== */

.gcp-lp-page main.wd-content-layout,
.gcp-lp-page .wd-content-layout.content-layout-wrapper {
  padding-bottom: 0;
}

/* ==========================================================================
   v5.1 — a página de venda sem a mobília da loja

   Numa landing page o visitante tem um caminho: os botões da própria página, e
   o "Voltar pra loja" no cabeçalho se ele quiser sair. A barra inferior do tema
   (loja, lista de desejos, carrinho, minha conta) oferece quatro saídas
   concorrentes, e o "voltar ao topo" só existia para brigar de espaço com o
   botão do WhatsApp — que é o canal que a loja quer disponível.

   Escopo em .gcp-lp-page: só as páginas do shortcode. O resto do site fica
   exatamente como está.
   ========================================================================== */

.gcp-lp-page .wd-toolbar,
.gcp-lp-page .scrollToTop {
  display: none !important;
}

/* Sem a barra fixa embaixo, a última seção não precisa mais reservar espaço
   para ela. */
@media (max-width: 899px) {
  .gcp-lp-page .gcp-lp > .gcp-secao:last-child { padding-bottom: 46px; }
}

/* ==========================================================================
   v5.2 — o mesmo cabeçalho no celular e no desktop

   O cabeçalho "Paginas SEO" tem duas colunas à direita: a de desktop com o
   botão "Voltar pra loja" (marcada whb-visible-lg) e a de celular com o
   "Minha conta". Resultado: a mesma página oferecia saídas diferentes conforme
   o aparelho, e no celular a única saída era entrar na conta — que não é o que
   esta página quer que a pessoa faça.

   Aqui as duas trocam de lugar no celular. Só nas páginas do shortcode; no
   resto do site o cabeçalho continua como está.
   ========================================================================== */

@media (max-width: 1024px) {
  .gcp-lp-page .whb-general-header .whb-mobile-right { display: none !important; }
  .gcp-lp-page .whb-general-header .whb-col-right.whb-visible-lg {
    display: flex !important;
    flex: 0 0 auto;
    /* a coluna de desktop vem ANTES do logo do celular na ordem do documento;
       sem estas duas linhas o botão aparecia à esquerda do logo */
    order: 9;
    margin-left: auto;
    justify-content: flex-end;
  }
}

/* ==========================================================================
   v6.0 — PLAYSTATION: componentes próprios desta página
   ========================================================================== */

/* ---- botão primário: hover que não some ----
   O hover global usa --gcp-primaria-2, que no Xbox e no Boosteroid é uma
   variante mais clara com contraste de sobra. No azul do PlayStation, branco
   sobre #2E9BFF dá 2,90:1 — reprova. Cada marca passa a poder declarar o seu
   hover; onde não declarar, o comportamento é o de antes. */
.gcp-lp .gcp-btn--principal:hover { background: var(--gcp-btn-hover, var(--gcp-primaria-2)); }
.gcp-lp--playstation { --gcp-btn-hover: #0059A6; --gcp-sombra-selecao: rgba(0, 112, 209, .30); }

/* ---- seleção de cartão PSN ---- */
.gcp-lp .gcp-cartoes--psn { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
.gcp-saldo__opcoes .gcp-cartoes--psn { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
.gcp-lp .gcp-cartoes--psn .gcp-cartao { position: relative; }

/* A quantidade e o botão de tirar ficam numa linha própria dentro do cartão,
   com a altura sempre reservada: sobreposto ao valor o selo atropelava o texto,
   e aparecer/sumir empurrava a grade toda. */
.gcp-cartao__linha {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 24px;
}
/* branco puro, não 92%: sobre o azul do cartão os 92% davam 4,44:1 e
   reprovavam por pouco */
.gcp-cartao__qtd {
  font-size: 13px; font-weight: 800;
  color: #FFFFFF;
}
.gcp-lp .gcp-cartao__menos {
  width: 24px; height: 24px; min-height: 0; padding: 0;
  display: grid; place-items: center;
  border: 0; border-radius: 999px;
  /* círculo branco sólido com o sinal na cor da marca. Branco sobre o véu de
     22% dava 3,41:1; assim são 4,95:1, e o alvo fica mais visível. */
  background: #FFFFFF; color: var(--gcp-primaria);
  font-family: inherit; font-size: 15px; font-weight: 800; line-height: 1;
  text-transform: none; letter-spacing: 0; box-shadow: none;
  cursor: pointer;
  transition: background-color .14s ease, color .14s ease;
}
/* o alvo de toque é maior que o desenho */
.gcp-lp .gcp-cartao__menos::before { content: ""; position: absolute; inset: -8px; }
.gcp-lp .gcp-cartao__menos { position: relative; }
.gcp-lp .gcp-cartao__menos:hover { background: #FFE3E3; color: #B3261E; }
.gcp-lp .gcp-cartao__menos:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.gcp-psn-acao__linha { display: grid; gap: 8px; }
/* Discreto e em caixa normal: é uma saída, não uma ação que a página propõe.
   O tema põe caixa alta em todo button, daí o text-transform explícito. */
.gcp-lp .gcp-psn-acao__limpar {
  justify-self: center;
  border: 0; background: none; padding: 2px 6px;
  font-family: inherit; font-size: 14px; font-weight: 500;
  text-transform: none; letter-spacing: 0;
  color: var(--gcp-tinta-2); text-decoration: underline; cursor: pointer;
  box-shadow: none;
}
.gcp-lp .gcp-psn-acao__limpar:hover { background: none; color: var(--gcp-tinta); }

/* O painel que soma a escolha. Fica colado na grade porque é o passo seguinte
   dela — a mesma decisão da página do Xbox. */
.gcp-psn-acao {
  display: grid; gap: 14px;
  margin-top: 20px;
  padding: clamp(18px, 2.2vw, 24px);
  background: var(--gcp-clara);
  border: 1px solid var(--gcp-borda);
  border-radius: var(--gcp-radius-sm);
}
/* Só o total, centralizado. A lista do que foi escolhido já está na grade
   acima, com a quantidade em cada cartão. */
.gcp-psn-acao__resumo {
  text-align: center;
  font-size: 19px; font-weight: 750; color: var(--gcp-tinta);
  line-height: 1.5;
}
.gcp-psn-acao__vazio { font-size: 16px; font-weight: 400; color: var(--gcp-tinta-2); }
.gcp-lp .gcp-psn-acao__btn {
  display: flex; width: 100%; justify-content: center;
  background: var(--gcp-primaria); color: #fff;
  font-size: 17px; padding: 16px 30px;
}
.gcp-lp .gcp-psn-acao__btn[aria-disabled="true"] {
  background: var(--gcp-borda); color: var(--gcp-tinta-2);
  cursor: default; box-shadow: none;
}
.gcp-lp .gcp-psn-acao__btn[aria-busy="true"] { opacity: .75; cursor: progress; }
/* Os três fatos numa linha só: em 2+1 a última pílula ficava sobrando embaixo,
   parecendo esquecida. Fonte e respiro menores fazem os três caberem. */
.gcp-lp .gcp-psn-fatos { margin-top: 20px; gap: 8px; }
.gcp-lp .gcp-psn-fatos li { padding: 9px 14px; font-size: 14.5px; }

/* ---- comparativo de mecanismo (seção de jogos) ---- */
.gcp-comparativo-psn {
  display: grid; gap: clamp(14px, 2vw, 22px);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.gcp-comparativo-psn__col {
  padding: clamp(22px, 2.6vw, 30px);
  border-radius: var(--gcp-radius);
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .12);
}
.gcp-comparativo-psn__col--nossa {
  background: rgba(46, 155, 255, .13);
  border-color: rgba(46, 155, 255, .42);
}
.gcp-lp .gcp-comparativo-psn__col h3 { margin: 0 0 10px; font-size: 19px; color: #fff; }
.gcp-lp .gcp-comparativo-psn__col p  { margin: 0; max-width: none; color: rgba(255,255,255,.82); }
.gcp-comparativo-psn__col--nossa strong { color: #8CCBFF; }
.gcp-lp .gcp-comparativo-psn__fecho {
  margin: clamp(26px, 3vw, 38px) 0 0;
  font-size: 18px; font-weight: 700; color: #fff;
}
.gcp-jogos-mecanismos { margin-top: clamp(32px, 3.6vw, 46px); }
.gcp-lp .gcp-jogos-passos { margin-top: 18px; }
.gcp-jogos-prazo { margin-top: clamp(30px, 3.4vw, 44px); max-width: 76ch; margin-inline: auto; }

/* ---- abas ----
   Sem JavaScript nenhum painel é escondido: todos aparecem empilhados, cada um
   com o seu título. A classe .is-com-js é o lp.js dizendo que assumiu o
   controle — só então a tira de botões aparece e os títulos internos somem. */
.gcp-abas__tira { display: none; }
.gcp-abas.is-com-js .gcp-abas__tira {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: 22px;
}
.gcp-abas.is-com-js .gcp-abas__titulo { display: none; }

/* Prefixado com .gcp-lp e com cada propriedade declarada: o tema estiliza
   :is(.btn, .button, button, [type=submit], [type=button]) com o MESMO peso
   (0,1,0) e vence por vir depois na folha. Sem isto as quatro abas saíam todas
   azuis, em caixa alta e sem borda — não dava para saber qual estava aberta. */
.gcp-lp .gcp-aba {
  padding: 12px 20px;
  border: 1px solid var(--gcp-borda);
  border-radius: 999px;
  background: var(--gcp-fundo);
  font-family: inherit;
  font-size: 16px;
  font-weight: 650;
  text-transform: none;
  letter-spacing: 0;
  color: var(--gcp-tinta-2);
  cursor: pointer;
  box-shadow: none;
  transition: background-color .14s ease, border-color .14s ease, color .14s ease;
}
.gcp-lp .gcp-aba:hover {
  background: var(--gcp-clara);
  border-color: var(--gcp-primaria);
  color: var(--gcp-tinta);
}
.gcp-lp .gcp-aba[aria-selected="true"] {
  background: var(--gcp-primaria);
  border-color: var(--gcp-primaria);
  color: #fff;
}
.gcp-lp .gcp-aba:focus-visible { outline: 2px solid var(--gcp-primaria); outline-offset: 2px; }
.gcp-abas__painel + .gcp-abas__painel { margin-top: 26px; }
.gcp-abas.is-com-js .gcp-abas__painel + .gcp-abas__painel { margin-top: 0; }
.gcp-lp .gcp-abas__titulo { font-size: 18px; margin: 0 0 12px; }

/* Abas à esquerda, ressalvas à direita. Os passos de resgate são quatro linhas
   curtas: sozinhos numa faixa de 1352px sobrava metade vazia. */
.gcp-resgate {
  display: grid;
  gap: clamp(24px, 3vw, 44px);
  align-items: start;
}
@media (min-width: 960px) {
  .gcp-resgate { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
}
.gcp-resgate__lado { display: grid; gap: 14px; align-content: start; }

/* ---- compatibilidade em lista, no lugar da tabela ---- */
.gcp-lp .gcp-consoles {
  display: grid; gap: 10px; margin: 0; padding: 0; list-style: none;
  max-width: 860px;
}
.gcp-lp .gcp-console {
  display: grid;
  grid-template-columns: minmax(0, 108px) auto;
  align-items: baseline;
  gap: 6px 16px;
  margin: 0;
  padding: 14px 18px;
  background: var(--gcp-fundo);
  border: 1px solid var(--gcp-borda);
  border-radius: var(--gcp-radius-sm);
}
.gcp-console__nome { font-size: 17px; font-weight: 750; color: var(--gcp-tinta); }
.gcp-console__selo {
  justify-self: start;
  min-width: 46px; text-align: center;
  padding: 4px 12px; border-radius: 999px;
  background: var(--gcp-clara); color: var(--gcp-escura);
  font-size: 14px; font-weight: 700;
}
.gcp-console--nao .gcp-console__selo { background: #F1F2F5; color: #5B6270; }
.gcp-console__rotulo {
  grid-column: 2 / -1;
  font-size: 16px; color: var(--gcp-tinta);
}
.gcp-console__obs {
  grid-column: 2 / -1;
  font-size: 15px; color: var(--gcp-tinta-2);
}
.gcp-lp .gcp-consoles__intro { margin: 0 0 18px; }

/* ---- as duas provas da seção "Como comprar", do mesmo tamanho ----
   Nome proprio (`--fig`) porque `.gcp-provas` ja existia desde a primeira
   pagina, com outro significado: a fileira de quatro numeros da secao "Sobre a
   loja" do Xbox e do Boosteroid. Como este bloco vem depois na folha e tem a
   mesma especificidade, ele sequestrava aquela regra — as quatro caixas de
   numero passavam a seguir um grid pensado para dois prints, e abaixo de 760px
   empilhavam uma embaixo da outra em vez de ficarem 2x2. */
.gcp-provas-fig {
  display: grid; gap: clamp(18px, 2.4vw, 32px);
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  align-items: start;
  margin-top: clamp(30px, 3.6vw, 46px);
}
.gcp-lp .gcp-prova-fig { margin: 0; }
.gcp-lp .gcp-prova-fig img {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--gcp-borda);
  border-radius: var(--gcp-radius-sm);
}
.gcp-lp .gcp-prova-fig figcaption {
  margin-top: 10px; font-size: 15px; color: var(--gcp-tinta-2); text-align: center;
}
@media (max-width: 640px) {
  .gcp-lp .gcp-console { grid-template-columns: 1fr; }
}

/* ---- estado vazio da vitrine ---- */
.gcp-vazio {
  border-left: 4px solid var(--gcp-primaria);
  background: var(--gcp-clara);
  border-radius: 0 var(--gcp-radius-sm) var(--gcp-radius-sm) 0;
  padding: clamp(18px, 2.2vw, 26px);
  margin-bottom: clamp(26px, 3vw, 38px);
}
.gcp-lp .gcp-vazio h3 { margin: 0 0 8px; }
.gcp-lp .gcp-vazio p  { margin: 0; font-size: 15.52px; }

.gcp-fechamento__acoes { justify-content: center; margin-top: 4px; }

/* A prova do valor exato fica logo abaixo do comparativo, com largura contida:
   é uma imagem de leitura, não um banner. */
/* Tela inteira precisa de largura para ser legível: a 620px o texto do print
   virava borrão. Com a página abaixo da meta de altura, cabe. */
/* `.gcp-lp` na frente por necessidade: o reset local tem `.gcp-lp figure
   { margin: 0 }` — classe + elemento, (0,1,1) — e vence uma classe sozinha.
   Medido: margin-top computado 0px, a frase "Você paga o preço do jogo" ficava
   encostada na borda de cima do print. */
.gcp-lp .gcp-prova-exata {
  max-width: 1060px;
  margin-inline: auto;
  margin-top: clamp(26px, 4.4vw, 38px);
}
.gcp-prova-exata img { border-radius: var(--gcp-radius-sm); }

/* ==========================================================================
   v6.1 — lista numerada

   O `.gcp-lista--num` já era usado no HTML e não existia na folha: os <ol> de
   passos saíam com o mesmo ponto redondo das listas comuns, e "passo a passo"
   sem número não é passo a passo. O contador é do CSS porque o ::before da
   lista base já ocupa o lugar do marcador nativo.
   ========================================================================== */

.gcp-lp .gcp-lista--num { counter-reset: gcp-passo; }
.gcp-lp .gcp-lista--num li { counter-increment: gcp-passo; padding-left: 38px; }
.gcp-lp .gcp-lista--num li::before {
  content: counter(gcp-passo);
  left: 0; top: 0;
  width: 26px; height: 26px;
  border-radius: 999px;
  /* preenchido com a primária, não com --gcp-clara: em seção clara as duas
     cores coincidem e o círculo sumia, sobrando o número solto */
  background: var(--gcp-primaria);
  color: #fff;
  display: grid; place-items: center;
  font-size: 14px; font-weight: 800; line-height: 1;
}
.gcp-secao--escura .gcp-lp .gcp-lista--num li::before,
.gcp-secao--escura .gcp-lista--num li::before {
  background: rgba(255, 255, 255, .14);
  color: #fff;
}

/* ==========================================================================
   v6.2 — PLAYSTATION: faixa de pré-venda e lista de consoles centralizada

   A faixa de pré-venda é o bloco mais chamativo da seção de jogos: fundo
   próprio, capa grande e preço em destaque. Ela existe porque estes títulos
   saíram do carrossel "Catálogo completo" — lá eles apareciam primeiro só por
   serem os produtos cadastrados mais recentemente, e agora o carrossel ordena
   pelos mais vendidos. Sem esta faixa, os lançamentos sumiriam da página.
   ========================================================================== */

.gcp-faixa-pre {
  position: relative;
  margin-block: clamp(32px, 4vw, 52px);
  padding-block: clamp(34px, 4.2vw, 56px);
  /* o brilho azul no topo separa a faixa do resto da seção escura sem precisar
     de uma segunda cor de fundo, que brigaria com a faixa branca logo abaixo */
  background:
    radial-gradient(120% 150% at 50% 0%, rgba(46, 155, 255, .26) 0%, rgba(46, 155, 255, 0) 62%),
    linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02));
  border-block: 1px solid rgba(255, 255, 255, .13);
}

.gcp-pre-cabeca {
  max-width: 780px;
  margin: 0 auto clamp(26px, 3vw, 38px);
  text-align: center;
}
.gcp-lp .gcp-pre-cabeca .gcp-eyebrow {
  /* (0,3,0) para ganhar de `.gcp-secao--escura .gcp-eyebrow`, que apaga a cor
     da marca. Aqui o azul claro é o que anuncia a faixa; 5,67:1 sobre o fundo. */
  color: var(--gcp-primaria-2, #2E9BFF);
}
.gcp-lp .gcp-pre-cabeca h3 {
  margin: 0 0 12px;
  font-size: clamp(25px, 2.8vw, 34px);
  line-height: 1.2;
  color: #fff;
}
.gcp-lp .gcp-pre-cabeca .gcp-lead { margin: 0; }

.gcp-pre-grade {
  display: grid;
  gap: clamp(12px, 1.8vw, 24px);
  /* colunas fixas por faixa, e nao auto-fit: com auto-fit o celular caia para
     uma coluna so — quatro capas empilhadas davam 3.093px de rolagem — e numa
     largura intermediaria criava quatro colunas estreitas demais para o titulo. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 1140px;
  margin-inline: auto;
}
@media (min-width: 860px) {
  .gcp-pre-grade { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.gcp-lp .gcp-pre {
  display: flex;
  flex-direction: column;
  margin: 0;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--gcp-radius);
  overflow: hidden;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.gcp-lp .gcp-pre:hover {
  transform: translateY(-4px);
  border-color: var(--gcp-primaria-2, #2E9BFF);
  box-shadow: 0 18px 42px rgba(0, 0, 0, .38);
}

.gcp-pre__capa { position: relative; display: block; line-height: 0; }
.gcp-lp .gcp-pre__capa img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.gcp-pre__selo {
  position: absolute;
  left: 10px;
  /* embaixo, e nao no topo: no topo o selo caia exatamente sobre a tarja azul
     "PlayStation Store" que vem impressa em todas as capas — cobria o comeco da
     palavra e, sendo azul tambem, se dissolvia nela. Branco sobre a arte: 14,4:1
     contra a tinta escura, e se separa de qualquer capa. */
  bottom: 10px;
  padding: 5px 12px;
  border-radius: 999px;
  background: #FFFFFF;
  color: var(--gcp-escura, #04203D);
  box-shadow: 0 3px 10px rgba(0, 0, 0, .35);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1.4;
}

.gcp-pre__corpo {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 16px 16px 18px;
}
.gcp-lp .gcp-pre__nome {
  margin: 0;
  /* duas linhas sempre reservadas: com o titulo de uma linha so, o preco de cada
     cartao parava numa altura diferente e a fileira ficava desalinhada */
  min-height: calc(2 * 1.3em);
  font-size: 18px;
  font-weight: 750;
  line-height: 1.3;
  color: #fff;
}
.gcp-lp .gcp-pre__nome a { color: #fff; text-decoration: none; }
.gcp-lp .gcp-pre__nome a:hover { color: var(--gcp-primaria-2, #2E9BFF); }
.gcp-lp .gcp-pre__edicoes {
  margin: 6px 0 0;
  font-size: 14px;
  color: rgba(255, 255, 255, .66);
}
.gcp-lp .gcp-pre__preco {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 14px 0 16px;
}
/* filho direto: o valor do WooCommerce tambem vem dentro de um <span>, e a
   regra sem o `>` encolhia o preco inteiro para 13px — o numero ficava do
   tamanho do rotulo "a partir de" */
.gcp-pre__preco > span { font-size: 13px; color: rgba(255, 255, 255, .66); }
.gcp-pre__preco strong { font-size: 23px; font-weight: 800; color: #fff; line-height: 1.1; }
/* o âmbar do WooCommerce não sobrevive a fundo escuro */
.gcp-pre__preco .woocommerce-Price-amount { color: #fff; }

.gcp-lp .gcp-pre__cta {
  margin-top: auto;
  width: 100%;
  justify-content: center;
  text-align: center;
}

/* telas estreitas: duas colunas continuam, mas o texto encolhe para o titulo
   nao estourar as duas linhas reservadas */
@media (max-width: 560px) {
  .gcp-pre__corpo { padding: 13px 13px 15px; }
  .gcp-lp .gcp-pre__nome { font-size: 16px; }
  .gcp-pre__preco strong { font-size: 20px; }
  /* o padrao do botao tem folga lateral de sobra para uma coluna larga; em duas
     colunas de 209px ela quebrava "Garantir agora" em duas linhas */
  .gcp-lp .gcp-pre__cta { padding-inline: 10px; font-size: 14px; white-space: nowrap; }
  .gcp-pre__selo { left: 8px; bottom: 8px; padding: 4px 9px; font-size: 11px; }
}

/* ---- "Por quais aparelhos dá para gastar o saldo": coluna centralizada ----
   A lista tinha max-width e ficava colada à esquerda do wrap, com um vazio
   largo à direita. O texto de dentro dos cartões continua alinhado à esquerda:
   são duas colunas (nome + selo), centralizar o conteúdo desalinharia as duas. */
.gcp-consoles-bloco { max-width: 860px; margin-inline: auto; }
.gcp-lp .gcp-consoles { max-width: none; }

/* ==========================================================================
   v6.3 — PLAYSTATION no celular: o título entra na arte

   A arte do PlayStation é lateralizada: medindo a densidade de pixels contra a
   cor de fundo, a metade esquerda (0–50% da largura) fica entre 12 e 68 numa
   escala em que os personagens dão 100–311. Ou seja: os personagens vivem só na
   metade direita, em qualquer altura.

   Empilhada, essa arte cobria 56vw de altura e a metade esquerda inteira era
   fundo azul vazio — o h1 começava depois de tudo isso. Agora a arte vira
   fundo (como no Boosteroid, mas com números próprios) e o texto sobe para
   dentro dela: o olho encontra o título e os personagens no mesmo quadro.

   O que o texto cobre é justamente o rodapé da arte, que a máscara já
   dissolvia no fundo. A máscara começa mais cedo (56% em vez de 74%) para que
   a faixa onde o texto cai já esteja apagada.
   ========================================================================== */

@media (max-width: 899px) {
  .gcp-lp--playstation .gcp-hero,
  .gcp-lp--nintendo .gcp-hero {
    position: relative;
    /* O cabecalho do tema esta em modo `whb-overcontent`: o wrapper dele tem
       altura 0 e a faixa pintada (75px no celular, 63px no desktop) fica POR
       CIMA do inicio da pagina. Com a arte encostada no topo, esses 75px —
       29% da altura dela — sumiam atras da faixa, cortando a cabeca do Kratos
       e do Astro Bot. Medido no navegador em 485, 900 e 1440px de largura.
       No desktop a arte e ancorada embaixo, entao nada muda la. */
    --gcp-cab-sobre: 75px;
  }

  .gcp-lp--playstation .gcp-hero__bg,
  .gcp-lp--nintendo .gcp-hero__bg {
    position: absolute;
    top: var(--gcp-cab-sobre); left: 0; right: 0; bottom: auto;
    width: 100%;
    height: auto;
    max-width: 100%;
    aspect-ratio: auto;
    object-fit: contain;
    object-position: top center;
    margin: 0;
    z-index: 0;
    /* A dissolucao da arte agora comeca tarde: quem escurece a faixa do texto e
       o scrim abaixo, que alivia do lado dos personagens. Antes a mascara fazia
       os dois papeis e comia os personagens da cintura para baixo. */
    -webkit-mask-image: linear-gradient(to bottom,
      #000 0%, #000 76%, rgba(0, 0, 0, .55) 92%, transparent 100%);
            mask-image: linear-gradient(to bottom,
      #000 0%, #000 76%, rgba(0, 0, 0, .55) 92%, transparent 100%);
  }

  /* Scrim ancorado na proporcao da arte (900x502), para acompanhar a altura
     dela em qualquer largura de tela. Transparente em cima: rostos e torsos
     ficam com a cor original. A mascara horizontal enfraquece o scrim onde os
     personagens estao — a metade direita — e o mantem cheio onde o texto cai. */
  .gcp-lp--playstation .gcp-hero::before,
  .gcp-lp--nintendo .gcp-hero::before {
    content: "";
    position: absolute;
    top: var(--gcp-cab-sobre);
    left: 0;
    right: 0;
    aspect-ratio: 900 / 502;
    z-index: 1;
    pointer-events: none;
    /* A cor sai da marca da pagina (--gcp-escura), nao escrita a mao: o mesmo
       bloco serve PlayStation (#04203D) e Nintendo (#3D0004). */
    /* Segue o fundo do hero (--gcp-hero-bg), que em duas das marcas e a cor
       amostrada da propria arte; onde ela nao existe, cai na cor escura. */
    background: linear-gradient(to bottom,
      transparent 0%,
      transparent 30%,
      color-mix(in srgb, var(--gcp-hero-bg, var(--gcp-escura)) 45%, transparent) 46%,
      color-mix(in srgb, var(--gcp-hero-bg, var(--gcp-escura)) 86%, transparent) 68%,
      var(--gcp-hero-bg, var(--gcp-escura)) 88%,
      var(--gcp-hero-bg, var(--gcp-escura)) 100%);
    -webkit-mask-image: linear-gradient(to right,
      #000 0%, #000 54%, rgba(0, 0, 0, .58) 78%, rgba(0, 0, 0, .34) 100%);
            mask-image: linear-gradient(to right,
      #000 0%, #000 54%, rgba(0, 0, 0, .58) 78%, rgba(0, 0, 0, .34) 100%);
  }

  /* 24vw = 43% da altura da arte (55,8vw: 900x502). O título passa a nascer
     dentro do quadro, na metade vazia da esquerda, com os personagens ao lado
     dele — e não embaixo de tudo. Os rostos ficam acima dessa linha. */
  .gcp-lp--playstation .gcp-hero__grid,
  .gcp-lp--nintendo .gcp-hero__grid {
    position: relative;
    z-index: 2;
    padding-top: calc(var(--gcp-cab-sobre) + 24vw);
  }
}

/* ---- as três pílulas do cartão PSN numa linha só, no celular ----
   Medido em 470px de largura útil (430 disponíveis): 111 + 179 + 209 e mais 24
   de vão davam 523px — a terceira caía sozinha para a linha de baixo. Os
   rótulos encurtaram ("Vale no PS Plus", "Só contas do Brasil") e o corpo
   acompanha a largura da tela, com piso para não virar letra miúda. */
@media (max-width: 899px) {
  /* centralizadas: em coluna unica a fileira nao preenche a largura toda e,
     encostada na esquerda, parecia deslocada em relacao ao bloco acima */
  .gcp-lp .gcp-psn-fatos { flex-wrap: nowrap; gap: 6px; justify-content: center; }
  .gcp-lp .gcp-psn-fatos li {
    padding: 8px clamp(7px, 2.2vw, 13px);
    font-size: clamp(11px, 2.8vw, 14.5px);
    white-space: nowrap;
  }
}

/* Abaixo de 380px a linha unica so caberia com fonte de ~9px, e `nowrap` sem
   espaco nao quebra: estoura a caixa e a pagina ganha rolagem lateral. Nessas
   telas as pilulas voltam a quebrar — errado de propósito, e o menos ruim. */
@media (max-width: 379px) {
  .gcp-lp .gcp-psn-fatos { flex-wrap: wrap; }
}

/* ---- o atributo `hidden` volta a valer dentro da landing page ----
   O tema declara `display` para <button> e para os contêineres de flex/grid, e
   qualquer declaração de autor vence a regra `[hidden] { display: none }` da
   folha do navegador. Resultado medido: `<button data-psn-limpar hidden>` com
   `hidden=true` e `display: flex` — "Limpar seleção" aparecia com nada
   selecionado. O mesmo valia para os painéis de aba e para a saída da
   calculadora. O `!important` é o que basta para empatar com o tema sem
   inventar especificidade em cada caso; o escopo é só o `.gcp-lp`. */
.gcp-lp [hidden] { display: none !important; }


/* ---- a linha de provas do hero precisa de tamanho proprio ----
   Ela estava saindo em 23px porque `.gcp-hero p` (classe + elemento, 0,1,1)
   ganha de `.gcp-hero__provas` (0,1,0), e a folha vinha declarando 15,2px que
   nunca valeram. Em 23px as duas caixas nao cabiam na coluna de 580px do hero
   e a fileira quebrava para baixo. Aqui ela volta ao tamanho de nota de rodapé,
   que é o papel dela. */
/* ---- faixa de provas, entre o hero e a primeira seção ----
   Ela existe porque a coluna de texto do hero tem 420 a 580px (o resto é arte) e
   duas caixas de número somam 540: quebrava para baixo em toda tela abaixo de
   1300px. Em faixa própria, com a largura inteira, cabe numa linha sempre.

   A cor é a mesma do hero, então a leitura é de continuação dele, não de uma
   seção nova. */
.gcp-provas-barra {
  /* Segue o fundo do hero, nao a cor escura da marca: onde a arte definiu a cor
     do hero (Nintendo, Boosteroid), pintar a faixa de outra cor criava uma
     tarja escura logo abaixo dela. Sem --gcp-hero-bg, o resultado e o de antes. */
  background: var(--gcp-hero-bg, var(--gcp-escura));
  border-top: 1px solid rgba(255, 255, 255, .10);
  padding-block: 15px;
}

.gcp-lp .gcp-provas-barra__lista {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px clamp(20px, 3vw, 40px);
  margin: 0;
  max-width: none;
  font-size: 15.2px;
  line-height: 1.4;
  color: rgba(255, 255, 255, .74);
  text-align: center;
}

.gcp-provas-barra__lista span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

.gcp-provas-barra__lista span::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gcp-primaria-2);
  flex: 0 0 auto;
}

.gcp-lp .gcp-provas__quem {
  font-style: normal;
  font-weight: 700;
  color: rgba(255, 255, 255, .95);
}

@media (max-width: 600px) {
  .gcp-lp .gcp-provas-barra__lista {
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;
    text-align: left;
    font-size: 14.4px;
  }
}

/* o item da nota externa é um link: precisa parecer clicável sem virar botão */
.gcp-lp .gcp-provas-barra__fonte {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: inherit;
  /* sublinhado, não borda: a borda somava 2px de altura ao item e desalinhava
     a caixa do link em relação às outras da faixa */
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, .28);
  text-underline-offset: 3px;
  transition: color .15s ease, text-decoration-color .15s ease;
}
.gcp-lp .gcp-provas-barra__fonte:hover {
  color: #fff;
  text-decoration-color: var(--gcp-primaria-2);
}

/* ==========================================================================
   v6.4 — NINTENDO

   A página vende duas coisas, não três, então os componentes de três colunas
   precisam de uma variante de duas. O resto reaproveita o que já existe:
   seletor de faces, cards de plano, avisos, FAQ e selos.
   ========================================================================== */

/* Lista de benefícios em duas colunas: são seis itens curtos, e em coluna
   única a seção ficava com uma torre de texto e muito branco ao lado. */
.gcp-lp .gcp-lista--duas { max-width: 900px; }
@media (min-width: 700px) {
  .gcp-lp .gcp-lista--duas { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 28px; }
}

/* Os dois avisos obrigatórios da página. Espaço próprio para não colarem no
   bloco anterior — o teto vem logo depois das pílulas, e a renovação depois
   da lista de benefícios. */
.gcp-teto,
.gcp-renovacao { margin-top: clamp(26px, 3vw, 38px); }
.gcp-lp .gcp-renovacao p + p { margin-top: 10px; }

/* ---- vitrine em grade, para quando a lista de produtos É a seção ----
   O carrossel serve quando a vitrine complementa o texto: a rolagem lateral
   convida a explorar. Onde a lista é o conteúdo da seção — os jogos de Switch,
   que são dez — esconder metade atrás de um arrasto é esconder o produto. */
.gcp-vitrine {
  display: grid;
  gap: clamp(12px, 1.6vw, 18px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 700px)  { .gcp-vitrine { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .gcp-vitrine { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.gcp-vitrine .gcp-card { scroll-snap-align: none; }

/* ---- estado sem estoque ----
   A capa esmaece e ganha um selo. O card continua clicável: a página do produto
   é onde o cliente vê a data de volta e pode se avisar. */
.gcp-card__img { position: relative; display: block; }
.gcp-card--esgotado .gcp-card__img img { opacity: .45; filter: saturate(.55); }
.gcp-card__selo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(20, 22, 26, .92);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
  white-space: nowrap;
}
.gcp-card--esgotado .gcp-card__preco { color: var(--gcp-tinta-2); }
/* Alinhada com a grade de jogos, não centralizada numa medida própria: com
   `max-width` + `margin-inline: auto` ela ficava recuada em relação a tudo o
   que está acima, e a barra da esquerda denunciava o desalinhamento. O respiro
   de cima é maior que o de baixo de propósito — ela pertence aos jogos, e a
   seção seguinte precisa começar longe. */
.gcp-switch2 { margin-top: clamp(34px, 4vw, 52px); }

/* ---- o preço dos cards precisa ser legível ----
   O WooCommerce pinta `.woocommerce-Price-amount` de âmbar (rgb(245,158,3)).
   Sobre o branco do card isso dá ~2,1:1 — reprovado em qualquer critério, e
   vale tanto para o valor cheio quanto para o da parcela. Dentro da landing
   page ele passa a usar a cor da marca (4,80:1 no vermelho da Nintendo, medido)
   e o cinza de apoio quando o produto está sem estoque. */
.gcp-lp .gcp-card__preco .woocommerce-Price-amount {
  color: var(--gcp-primaria);
}
.gcp-lp .gcp-card__preco .gcp-installments-badge .woocommerce-Price-amount,
.gcp-lp .gcp-card--esgotado .gcp-card__preco .woocommerce-Price-amount {
  color: var(--gcp-tinta-2);
}

/* Sete faces sempre em 4+3, em qualquer largura.
   Com a regra base (auto-fill de 132px) elas caíam 5+2 na coluna de 656px e
   3+3+1 em telas médias — nas duas, sobrava cartão órfão na última fileira.
   Quatro colunas fixas resolvem os dois casos: 4+3 fecha certo. Abaixo de
   360px de coluna o auto-fill volta, senão cada cartão ficaria estreito demais
   para caber "R$ 500". */
.gcp-lp--nintendo .gcp-saldo__opcoes .gcp-cartoes {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 400px) {
  .gcp-lp--nintendo .gcp-saldo__opcoes .gcp-cartoes {
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  }
}

/* A tela de resgate da Nintendo é quase toda espaço vazio: em largura total ela
   viraria uma faixa branca gigante com um campo no meio. Contida, o campo de 16
   caracteres continua legível e a seção não perde o ritmo. */
.gcp-lp .gcp-print--resgate { max-width: 720px; margin-top: clamp(24px, 3vw, 34px); }