/* ============================================================ a pagina de planos

   Uma grade unica, e nao quatro cartoes lado a lado.

   Cartoes respondem "o que o Adult da?". A pergunta de quem esta decidindo quase nunca e essa —
   e quase sempre "a partir de qual plano aparece a garagem?", que so se responde lendo a LINHA
   inteira, com os quatro degraus alinhados. Foi por isso que a comparacao saiu da vitrine e
   ganhou pagina propria: no meio da home ela nao tinha largura para existir.

   A grade e uma so (`display: grid` no container, filhos que ocupam celulas) em vez de `<table>`
   porque cada celula precisa virar cartao empilhado no telefone — e uma tabela HTML nao dobra. */

.pl-pagina {
  /* A mesma largura da vitrine: uma com moldura de 455px e a outra usando a tela fariam o menu
     parecer levar a outro site. */
  width: min(100%, 100rem);
  margin: 0 auto;
  padding: clamp(2rem, 1rem + 4vw, 4rem) clamp(1rem, 0.5rem + 2vw, 2rem) 5rem;
  display: flex;
  flex-direction: column;
  gap: clamp(2.5rem, 1.5rem + 3vw, 4rem);
}

/* ---------------------------------------------------------------- abertura */

.pl-abertura { max-width: 44rem; }

.pl-abertura h1 {
  margin: 0.35rem 0 0.8rem;
  font-family: var(--titulo);
  font-size: clamp(1.9rem, 1.2rem + 3vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

/* ---------------------------------------------------------------- a grade */

/*
 * `--degraus` e escrito pelo JavaScript. Fixar quatro colunas aqui faria a tabela quebrar no dia
 * em que um plano entrasse ou saisse — e a escada de planos e decisao de produto, nao de folha
 * de estilo.
 *
 * A primeira coluna e mais larga: ela guarda a frase da capacidade, e as outras guardam uma
 * marca. `minmax(0, …)` porque sem ele o conteudo mais largo define a coluna e a grade estoura
 * para fora da tela.
 */
.pl-tabela {
  --degraus: 4;
  --col-nome: minmax(9rem, 1.6fr);
  border: 1px solid var(--linha);
  border-radius: var(--raio-g);
  background: var(--vidro);
  box-shadow: var(--sombra-cartao);
  overflow: hidden;
}

.pl-cabeca,
.pl-linha {
  display: grid;
  grid-template-columns: var(--col-nome) repeat(var(--degraus), minmax(0, 1fr));
}

/*
 * O cabecalho GRUDA no topo ao rolar.
 *
 * Sem isso, quem desce ate a linha da garagem perde de vista qual coluna e qual — e a tabela
 * inteira deixa de responder a pergunta que ela existe para responder.
 */
.pl-cabeca {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--vidro-alto);
  border-bottom: 1px solid var(--linha-viva);
}

.pl-degrau {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  padding: 1.1rem 0.75rem 1.25rem;
  border-left: 1px solid var(--linha);
  text-align: center;
}

.pl-degrau--sem-preco { color: var(--texto-fraco); }

.pl-degrau-nome {
  margin: 0;
  font-family: var(--titulo);
  font-size: 1.05rem;
  letter-spacing: -0.01em;
}

.pl-degrau-preco {
  margin: 0;
  font-family: var(--maquina);
  font-size: 1.15rem;
  font-variant-numeric: tabular-nums;
  color: var(--ouro);
}

.pl-degrau--sem-preco .pl-degrau-preco { color: var(--texto-fraco); font-size: 0.92rem; }

.pl-degrau-ciclo { margin: 0; font-size: 0.76rem; color: var(--texto-fraco); }

/* O medidor de crescimento — o mesmo da vitrine, so que aqui ele nomeia a coluna. */
.pl-degrau .plano-cresce { margin-bottom: 0.15rem; }

/* O botao de comprar, pendurado por `comprar.js`, fecha a coluna. */
.pl-degrau .plano-comprar {
  margin-top: 0.65rem;
  align-self: stretch;
  padding: 0.55rem 0.6rem;
  font-size: 0.86rem;
}

/* ---------------------------------------------------------------- as linhas */

.pl-linha { border-top: 1px solid var(--linha); }
.pl-linha:first-child { border-top: 0; }

/* A zebra e sutil: ela ajuda o olho a atravessar sem virar listra. */
.pl-linha:nth-child(even) { background: rgba(255, 255, 255, 0.014); }
.pl-linha:hover { background: var(--elevado); }

.pl-capacidade {
  padding: 0.7rem 0.9rem;
  font-size: 0.9rem;
  line-height: 1.35;
  align-content: center;
}

.pl-celula {
  position: relative;
  border-left: 1px solid var(--linha);
  min-height: 2.6rem;
}

/*
 * O visto e desenhado, e nao um caractere.
 *
 * Um `✓` de fonte muda de tamanho e de peso entre sistemas, e numa coluna de quarenta linhas
 * essa variacao vira ruido. Duas bordas giradas dao o mesmo simbolo identico em todo lugar.
 */
.pl-celula[data-tem='sim']::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.34rem;
  height: 0.62rem;
  margin: -0.36rem 0 0 -0.17rem;
  border: solid var(--texto-fraco);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/*
 * O degrau em que a capacidade ENTRA e o unico marcado com cor.
 *
 * Sem essa distincao a tabela vira um campo de vistos iguais, e "a partir de qual plano?" volta
 * a exigir contar colunas da esquerda para a direita.
 */
.pl-celula--entra { background: rgba(124, 58, 237, 0.09); }
.pl-celula--entra::after { border-color: var(--roxo-claro); border-width: 0 2.5px 2.5px 0; }

/* Ausente nao ganha marca nenhuma: um traco cinza tambem e tinta, e ele competiria com o visto. */

/* ---------------------------------------------------------------- notas e fecho */

.pl-notas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.25rem;
}

.pl-nota {
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--linha);
  border-radius: var(--raio-m);
  background: var(--elevado);
}

.pl-nota h2 {
  margin: 0 0 0.45rem;
  font-family: var(--titulo);
  font-size: 1rem;
  letter-spacing: -0.005em;
}

.pl-nota p { margin: 0; color: var(--texto-fraco); font-size: 0.9rem; line-height: 1.55; }
.pl-nota strong { color: var(--texto); font-weight: 600; }

.pl-fecho { text-align: center; max-width: 38rem; margin: 0 auto; }

.pl-fecho h2 {
  margin: 0 0 0.5rem;
  font-family: var(--titulo);
  font-size: 1.5rem;
  letter-spacing: -0.01em;
}

.pl-fecho p { margin: 0 0 1.25rem; color: var(--texto-fraco); }

.pl-fecho-acoes {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* ---------------------------------------------------------------- no telefone

   A grade vira uma COLUNA por degrau, e nao uma tabela rolando de lado.

   Rolagem horizontal numa tabela de comparacao e a pior das saidas: o nome da capacidade sai da
   tela junto, e a pessoa fica com uma coluna de vistos sem saber do que sao. Empilhado, cada
   degrau vira um cartao com as suas capacidades listadas — mais alto, e legivel. */

@media (max-width: 56rem) {
  .pl-tabela { border: 0; background: none; box-shadow: none; overflow: visible; }

  .pl-cabeca,
  .pl-linha { grid-template-columns: minmax(0, 1fr) auto; }

  .pl-cabeca { position: static; border: 0; background: none; padding-bottom: 0.5rem; }

  /* No empilhado, o canto vazio e os degraus viram uma faixa horizontal de cartoes. */
  .pl-canto { display: none; }

  .pl-cabeca {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
    gap: 0.6rem;
  }

  .pl-degrau {
    border: 1px solid var(--linha);
    border-radius: var(--raio-m);
    background: var(--vidro-alto);
    padding: 0.9rem 0.6rem 1rem;
  }

  .pl-corpo {
    margin-top: 1.25rem;
    border: 1px solid var(--linha);
    border-radius: var(--raio-m);
    background: var(--vidro);
    overflow: hidden;
  }

  /*
   * Cada linha passa a mostrar SO onde a capacidade entra, com o nome do degrau escrito.
   *
   * As celulas de "tem" e "nao tem" somem: no telefone elas viravam quatro quadrados iguais numa
   * linha de 40px, e nenhum deles dizia de qual plano era.
   */
  .pl-celula { display: none; }

  .pl-celula--entra {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    border: 0;
    background: none;
    padding: 0 0.9rem;
    min-height: 0;
  }

  .pl-celula--entra::after {
    position: static;
    margin: 0;
    content: attr(data-degrau);
    width: auto;
    height: auto;
    border: 0;
    transform: none;
    font-family: var(--maquina);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--roxo-claro);
    white-space: nowrap;
  }
}

/* ---------------------------------------------------------------- a chegada

   Quem volta do provedor le isto antes de qualquer outra coisa. E um cartao so, com a borda viva
   do produto, e nao um recado de erro: pagar deu certo na maioria das vezes, e a cor de falha
   fica reservada ao desfecho que falhou. Em analise leva a cor de atencao; cancelar nao e falha
   e nao ganha cor nenhuma. */

.pl-chegada {
  padding: clamp(1.5rem, 1rem + 2vw, 2.25rem) clamp(1.25rem, 1rem + 2vw, 2.25rem);
  border: 1px solid var(--linha-viva);
  border-radius: var(--raio-g);
  background:
    radial-gradient(28rem 12rem at 0% 0%, rgba(124, 58, 237, 0.16), transparent 70%),
    var(--vidro-alto);
  box-shadow: var(--sombra-cartao);
}

.pl-chegada[data-desfecho='falhou'] {
  border-color: color-mix(in srgb, var(--erro) 55%, var(--linha));
  background: var(--vidro-alto);
}

.pl-chegada[data-desfecho='pendente'] {
  border-color: color-mix(in srgb, var(--atencao) 55%, var(--linha));
  background: var(--vidro-alto);
}

.pl-chegada[data-desfecho='cancelada'] {
  border-color: var(--linha);
  background: var(--vidro);
  box-shadow: none;
}

.pl-chegada-titulo {
  margin: 0.35rem 0 0.6rem;
  font-family: var(--titulo);
  font-size: clamp(1.6rem, 1.1rem + 2vw, 2.4rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.pl-chegada-texto {
  margin: 0;
  max-width: 44rem;
  color: var(--texto-fraco);
  font-size: 1rem;
  line-height: 1.6;
}

/* Os tres passos: uma sequencia de verdade, e por isso numerada. */
.pl-passos {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
  max-width: 44rem;
}

.pl-passos li {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  padding: 0.85rem 1rem;
  border: 1px solid var(--linha);
  border-radius: var(--raio-m);
  background: var(--vidro);
  line-height: 1.5;
}

.pl-passo-n {
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(124, 58, 237, 0.18);
  color: var(--roxo-claro);
  font-size: 0.8rem;
}

.pl-chegada-acoes { justify-content: flex-start; margin-top: 1.5rem; }
.pl-chegada .letra-miuda { margin-top: 1rem; max-width: 44rem; }

/* A acao principal vem primeiro, seja ela qual for: quem pagou vai ao Discord; quem nao pagou
   escolhe de novo. O JavaScript troca a classe, e a ordem acompanha. */
.pl-chegada-acoes .primario { order: -1; }

/* ------------------------------------------------- o bloco da tabela: escolha, esqueleto e
   tabela sao um objeto so, com vao curto — o vao largo da pagina e entre secoes. */

.pl-bloco-tabela {
  display: grid;
  gap: 1rem;
}

/* Controle segmentado, e nao dois botoes soltos: UMA pergunta, e a resposta atual marcada. */
.pl-escolha {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem 0.8rem;
}

.pl-escolha-rotulo { font-size: 0.85rem; color: var(--texto-fraco); }

.pl-escolha-grupo {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--linha);
  border-radius: 999px;
  background: var(--elevado);
}

.pl-escolha-botao {
  font: inherit;
  font-size: 0.85rem;
  padding: 0.45rem 0.95rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--texto-fraco);
  cursor: pointer;
  white-space: nowrap;
  transition: background 160ms ease, color 160ms ease;
}

.pl-escolha-botao .mono { margin-left: 0.35rem; opacity: 0.8; }
.pl-escolha-botao:hover { color: var(--texto); }

.pl-escolha-botao[aria-pressed='true'] {
  background: var(--roxo);
  color: #fff;
  box-shadow: 0 6px 16px -8px var(--roxo);
}

.pl-escolha-botao:focus-visible { outline: 2px solid var(--roxo-claro); outline-offset: 2px; }

/* ------------------------------------------ o esqueleto: barras com brilho no lugar exato da
   tabela, para nada saltar quando a de verdade entrar. */

.pl-esqueleto {
  display: grid;
  gap: 0.6rem;
  padding: 1.25rem;
  border: 1px solid var(--linha);
  border-radius: var(--raio-g);
  background: var(--vidro);
}

.pl-esqueleto i {
  display: block;
  height: 2.4rem;
  border-radius: var(--raio-p);
  background: linear-gradient(90deg, var(--elevado) 0%, var(--vidro-alto) 40%, var(--elevado) 80%);
  background-size: 200% 100%;
  animation: pl-brilho 1.4s ease-in-out infinite;
}

.pl-esqueleto i:first-child { height: 5.5rem; }

@keyframes pl-brilho {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .pl-esqueleto i { animation: none; }
}

/* ---------------------------------------------------------------- qual e o seu */

.pl-guia h2 {
  margin: 0 0 1rem;
  font-family: var(--titulo);
  font-size: 1.35rem;
  letter-spacing: -0.01em;
}

.pl-guia-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}

.pl-guia-lista li {
  display: grid;
  grid-template-columns: 7rem 1fr;
  gap: 1rem;
  align-items: baseline;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--linha);
  border-radius: var(--raio-m);
  background: var(--vidro);
}

.pl-guia-plano {
  font-family: var(--titulo);
  font-weight: 700;
  color: var(--roxo-claro);
}

.pl-guia-lista p { margin: 0; color: var(--texto-fraco); line-height: 1.55; font-size: 0.95rem; }

@media (max-width: 40rem) {
  .pl-guia-lista li { grid-template-columns: 1fr; gap: 0.25rem; }
}