/* O cartão de plano. Item F.4b, decisão 12.4.
 *
 * Os valores são os do protótipo do Claude Design, em píxel, nas duas
 * pranchas. A grade que põe os dois cartões lado a lado é da seção, e fica no
 * `home.css`: o componente é o cartão, e não a fileira.
 *
 * O acento laranja aparece só no botão da variante de assinatura, que é a
 * ação principal da seção, como o `tokens.css` explica.
 */

.pv-plano {
  border: 1px solid var(--line-16);
  border-radius: 11px;
  padding: 16px;
  background: var(--bg);
}
.pv-plano--assinatura { border: 2px solid var(--brand); background: var(--surface); position: relative; }
.pv-plano-nome { font: 600 15px var(--sans); color: var(--text); margin-bottom: 2px; }
.pv-plano-preco { font: 700 22px var(--sans); color: var(--text); margin-bottom: 12px; }
.pv-plano-mes { font: 400 13px var(--sans); color: var(--text-2); }
.pv-plano-itens { display: flex; flex-direction: column; gap: 7px; margin-bottom: 14px; }
.pv-plano-itens > div { display: flex; gap: 8px; font: 400 13.5px/1.45 var(--sans); color: var(--text); }
.pv-plano-marcador { color: var(--brand); }
.pv-plano-marcador--acento { color: var(--acento); }

.pv-plano-botao {
  display: flex; align-items: center; justify-content: center;
  width: 100%;
  border-radius: 8px;
  cursor: pointer;
  padding: 0;
}
.pv-plano-botao--outline {
  min-height: 46px;
  border: 1px solid var(--brand);
  background: var(--surface); color: var(--brand);
  font: 600 14px var(--sans);
}
.pv-plano-botao--outline:hover { color: var(--brand); filter: brightness(.95); }
.pv-plano-botao--acento {
  min-height: 50px;
  border: none;
  background: var(--acento); color: var(--sobre-brand);
  font: 700 15.5px var(--sans);
  box-shadow: var(--acento-sombra);
}
.pv-plano-nota { margin: 8px 0 0; text-align: center; font: 400 11.5px var(--sans); color: var(--text-2); }

@media (min-width: 1024px) {
  .pv-plano { border-radius: 12px; padding: 26px; display: flex; flex-direction: column; }
  /* Os dois cartões alinhados linha a linha, por ordem do autor em
   * 29/09/2026. O mock dava 10 px sob o nome da assinatura e 4 px sob o do
   * gratuito, e a borda de 2 px empurrava tudo mais um píxel: o padding de
   * 25 px devolve esse píxel, e a margem é a mesma nos dois. */
  .pv-plano-nome { font-size: 17px; margin-bottom: 4px; }
  .pv-plano--assinatura { padding: 25px; }
  .pv-plano-preco { font-size: 30px; letter-spacing: -.8px; margin-bottom: 18px; }
  .pv-plano-mes { font-size: 15px; letter-spacing: 0; }
  .pv-plano-itens { gap: 9px; margin-bottom: 22px; flex: 1; }
  .pv-plano-itens > div { gap: 9px; font-size: 14.5px; line-height: 1.5; }
  .pv-plano-botao--outline { min-height: 48px; font-size: 15px; }
  .pv-plano-botao--acento { min-height: 54px; font-size: 16.5px; box-shadow: var(--acento-sombra-lg); }
  .pv-plano-nota { margin-top: 10px; font-size: 12.5px; }
}