/* Rewards (PCGBUR-7): modelo da landing do app do Kingdom com a identidade da PCG. App, passos, dentro do app, fecho. */

/* Tela do app: screenshot real em moldura de vidro escuro, levemente girada sobre um contorno dourado deslocado */
/* 38svh: os prints sao de celular (~1:2), e a tela inteira tem de caber na altura da janela tambem em notebook baixo */
.pcg-tela { position: relative; margin: 0; justify-self: center; width: min(100%, 400px, 38svh); }
.pcg-tela::before {
  content: ""; position: absolute; inset: 0; border: 1px solid var(--ouro); border-radius: 28px;
  transform: translate(18px, 18px) rotate(3deg); opacity: .55;
}
.pcg-tela img {
  position: relative; width: 100%; height: auto; border-radius: 28px; border: 6px solid #0A0806;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .8), 0 0 0 1px var(--linha);
  transform: rotate(-2deg);
}

/* O app: texto + selos | tela */
.pcg-app, .pcg-dentro { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; gap: clamp(40px, 7vw, 112px); }
.pcg-app__texto { display: grid; gap: 22px; justify-items: start; max-width: 34rem; }
.pcg-app__texto > p { color: var(--texto-2); font-size: 1.125rem; max-width: 42ch; }

/* Selos das lojas: base no theme.css (a home usa tambem) */

/* Passos */
.pcg-passos__lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 56px); }
.pcg-passos__item { display: grid; gap: 10px; align-content: start; justify-items: center; text-align: center; padding-top: 20px; border-top: 2px solid var(--ouro); }
.pcg-passos__n { font: 400 clamp(3.5rem, 6vw, 5rem)/1 var(--f-display); color: var(--ouro); }
.pcg-passos__item h3 { font: 400 clamp(1.5rem, 2vw, 1.875rem)/1 var(--f-display); text-transform: uppercase; letter-spacing: .015em; }
.pcg-passos__item p { color: var(--texto-2); max-width: 32ch; }

/* Dentro do app: tela | titulo + lista */
.pcg-dentro { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); }
.pcg-dentro__texto { display: grid; gap: clamp(28px, 3vw, 40px); }
.pcg-dentro__lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px clamp(24px, 3vw, 40px); }
/* icone ao lado do titulo, nao em cima (PCGBUR-23): mesmo arranjo no desktop e no celular */
.pcg-dentro__lista li { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 16px; row-gap: 4px; align-content: start; }
.pcg-dentro__lista img { grid-row: 1 / span 2; width: 48px; height: 48px; object-fit: contain; }
.pcg-dentro__lista h3 { align-self: end; font: 400 1.5rem/1 var(--f-display); text-transform: uppercase; letter-spacing: .015em; }
.pcg-dentro__lista p { color: var(--texto-2); }

/* Fecho */
.pcg-fecho { text-align: center; }
/* banner no canto superior direito, fora do fluxo (PCGBUR-23): empilhado acima do titulo abria um vao de ~180px */
.pcg-fecho__banner { position: absolute; top: clamp(12px, 3vw, 40px); right: var(--gutter); width: clamp(56px, 8vw, 120px); height: auto; rotate: 8deg; opacity: .85; pointer-events: none; }
.pcg-fecho .pcg-secao__cabeca { margin-bottom: 0; }
.pcg-fecho .pcg-secao__cabeca > p { color: var(--texto-2); font-size: 1.125rem; }
.pcg-fecho .pcg-selos { justify-items: center; margin-top: 8px; }
.pcg-fecho .pcg-selos__linha { justify-content: center; }

@media (max-width: 899.98px) {
  .pcg-app, .pcg-dentro { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .pcg-app__texto { justify-items: center; text-align: center; margin-inline: auto; }
  .pcg-app .pcg-selos__linha { justify-content: center; }
  .pcg-tela { width: min(78%, 340px); }
  .pcg-app__tela { order: -1; } /* depois dos passos (texto), a secao abre com a tela */
  .pcg-tela::before { transform: translate(12px, 12px) rotate(3deg); }
  .pcg-dentro__texto .pcg-h2 { text-align: center; }

  .pcg-passos__lista { grid-template-columns: minmax(0, 1fr); }
  .pcg-passos__item { grid-template-columns: auto minmax(0, 1fr); column-gap: 20px; row-gap: 4px; align-items: center; justify-items: start; text-align: left; padding-top: 16px; }
  .pcg-passos__n { grid-row: 1 / span 2; font-size: 3.5rem; }
  .pcg-passos__item h3 { align-self: end; }
  .pcg-passos__item p { align-self: start; }
}
@media (max-width: 599.98px) {
  .pcg-dentro__lista { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}