.paywall {
  text-align: center;
}

.paywall__titulo {
  font-size: var(--texto-xl);
}

.paywall__sub {
  font-size: var(--texto-base);
  color: var(--cor-texto-suave);
  margin-top: var(--espaco-sm);
  max-width: 32rem;
  margin-inline: auto;
}

/* Bloco de preco com alinhamento proprio, nao herdado do text-align da
   secao: a referencia riscada e o valor compartilham o mesmo eixo optico,
   e o gap curto amarra os dois como uma unidade so. */
.paywall__preco {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 0.15rem;
  width: fit-content;
  margin: var(--espaco-lg) auto 0;
  text-align: center;
}

.paywall__referencia {
  font-size: var(--texto-md);
  /* Vinho da marca clareado e dessaturado, nao cinza neutro. O riscado
     precisa carregar a leitura de "isso nao vale mais", e cinza le como
     texto secundario qualquer, sem contraste emocional contra o dourado. */
  color: #C4737F;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  letter-spacing: 0.04em;
}

.paywall__valor {
  font-family: var(--fonte-display);
  font-size: clamp(2.6rem, 2rem + 3.4vw, 4rem);
  line-height: 1;
  color: var(--cor-texto);
  text-shadow: 0 4px 26px rgba(0, 0, 0, 0.5);
  /* Afasta o "R$" do numero. Colados, o simbolo competia com o valor; com
     respiro, o numero e que carrega o destaque. O padding compensa o
     letter-spacing sobrando na direita e mantem o bloco centrado de fato. */
  letter-spacing: 0.06em;
  padding-left: 0.06em;
}

/* Depois do botao, nao antes. Como aviso previo pesava contra a acao; como
   reforco posterior responde a duvida de quem ja leu o CTA. */
.paywall__nota {
  margin-top: var(--espaco-md);
  font-size: var(--texto-sm);
  line-height: 1.5;
  color: var(--cor-texto-suave);
  max-width: 26rem;
  margin-inline: auto;
}

/* As seis partes que o pagamento libera, entre o paragrafo e o preco. Lista
   numerada em uma coluna, sem card: e o produto sendo mostrado, nao seis
   argumentos de venda. Os titulos sao os MESMOS que resultado.php imprime
   depois do pagamento (arcanoAreaCopy()). */
.paywall__partes-selo {
  margin-top: var(--espaco-lg);
  font-size: var(--texto-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cor-texto-tenue);
}

.paywall__partes {
  list-style: none;
  counter-reset: parte;
  margin: var(--espaco-sm) auto 0;
  padding: 0;
  max-width: 26rem;
  text-align: left;
}

.paywall__parte {
  counter-increment: parte;
  display: grid;
  grid-template-columns: 1.6rem 1fr;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.5rem 0;
  font-size: var(--texto-sm);
  line-height: 1.45;
  color: var(--cor-texto);
  border-bottom: 1px solid var(--cor-borda);
}

.paywall__parte:last-child {
  border-bottom: 0;
}

.paywall__parte::before {
  content: counter(parte);
  font-family: var(--fonte-titulo);
  font-size: var(--texto-xs);
  letter-spacing: 0.08em;
  color: var(--cor-acento);
}

/* Abaixo do valor, discreto: informa sem competir com o numero. */
.paywall__unico {
  font-size: var(--texto-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cor-texto-tenue);
  margin-top: 0.35rem;
}

.paywall__acao {
  margin-top: var(--espaco-lg);
}

/* O piscar do modal no celular nao era falta de transicao: era o CSS
   chegando depois do primeiro paint. As folhas sao carregadas de forma nao
   bloqueante, e ate `paywall.css` aplicar o `.veu` era um bloco comum e
   visivel no fim da pagina, com titulo e botoes, empurrando o rodape. O
   conserto de verdade esta no CSS critico embutido no head do index.php,
   que agora nasce com este mesmo estado fechado. As regras daqui continuam
   sendo a fonte, e as duas precisam concordar. */
.veu {
  position: fixed;
  inset: 0;
  z-index: var(--z-veu);
  display: grid;
  place-items: center;
  padding: var(--espaco-md);
  background: var(--cor-veu);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  opacity: 0;
  visibility: hidden;

  /* A camada de composicao nasce junto com a pagina. Sem isto o celular
     cria a camada do desfoque no mesmo quadro em que a opacidade comeca a
     subir, e esse quadro sai sem desfoque nenhum, o que le como flash. */
  transform: translateZ(0);
  transition: opacity 280ms var(--curva-entrada), visibility 0s linear 280ms;
}

.veu[data-aberto='true'] {
  opacity: 1;
  visibility: visible;
  transition: opacity 280ms var(--curva-entrada), visibility 0s;
}

.modal {
  position: relative;
  z-index: var(--z-modal);
  width: min(30rem, 100%);
  max-height: 90dvh;
  overflow-y: auto;
  padding: clamp(1.4rem, 1rem + 2vw, 2.2rem);
  text-align: center;
  background:
    radial-gradient(circle at 50% 0%, rgba(107, 27, 46, 0.42), transparent 60%),
    linear-gradient(165deg, rgba(46, 33, 25, 0.97), rgba(18, 14, 11, 0.99));
  border: 1px solid var(--cor-borda-forte);
  border-radius: var(--raio);
  box-shadow: var(--sombra-forte);
  transform: scale(0.94) translateY(12px);
  opacity: 0;
  transition:
    transform 340ms var(--curva-entrada),
    opacity 240ms ease;
}

.veu[data-aberto='true'] .modal {
  transform: scale(1) translateY(0);
  opacity: 1;
  transition-delay: 40ms;
}

/* Quem pediu menos movimento recebe so o aparecer, sem escala. */
@media (prefers-reduced-motion: reduce) {
  .veu,
  .veu .modal {
    transition-duration: 1ms;
  }

  .modal {
    transform: none;
  }
}

.modal__simbolo {
  font-size: 1.9rem;
  color: var(--cor-acento);
  line-height: 1;
}

.modal__titulo {
  font-size: var(--texto-lg);
  margin-top: var(--espaco-sm);
}

.modal__texto {
  font-size: var(--texto-base);
  color: var(--cor-texto-suave);
  margin-top: var(--espaco-sm);
}

.modal__acoes {
  display: grid;
  gap: var(--espaco-sm);
  justify-items: center;
  margin-top: var(--espaco-lg);
}

.modal__fechar {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--cor-texto-tenue);
  font-size: 1.4rem;
  line-height: 1;
  transition: color 200ms ease, background-color 200ms ease;
}

.modal__fechar:hover {
  color: var(--cor-texto);
  background: rgba(242, 233, 220, 0.08);
}