/* ==========================================================================
   Component: Pricing
   ========================================================================== */

.pricing {
  padding-block: var(--space-24);
  color: var(--color-fg);
}

.pricing__inner {
  --container-fluid-padding: 18.25rem; /* 292px — mesmo eixo das trilhas */

  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

/* --- Header --- */

/* Mesma anatomia do header das trilhas — título e apoio, na mesma escala e
   no mesmo respiro. Centralizado porque a grade de planos também é. */
.pricing__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  text-align: center;
}

.pricing__title {
  font-family: var(--font-heading);
  font-size: clamp(var(--text-h3), 2.5vw, var(--text-h2)); /* 34.84px */
  font-weight: var(--font-medium);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: #0A0A0A;
  margin: 0;
}

.pricing__support {
  font-family: var(--font-ui);
  font-size: var(--text-p);
  line-height: var(--leading-relaxed);
  color: var(--color-fg-subtle);
  max-width: 56ch;
  margin: 0;
}

/* --- Grid --- */

.pricing__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 768px) {
  .pricing__grid {
    /* Cinco faixas — cabeça, seletor de trilha, preço, botão e itens. Os planos
       herdam essas linhas via subgrid, então cada faixa tem a altura do maior
       dos três e as linhas se alinham de coluna a coluna. Sem isso, o seletor
       do destaque (mais alto) empurraria tudo para baixo só nele. */
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto auto auto auto auto;
    gap: var(--space-5);
  }
}

/* --- Plano --- */

.plan {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

@media (min-width: 768px) {
  .plan {
    display: grid;
    grid-row: span 5;
    grid-template-rows: subgrid;
  }
}

/* Cabeça: o bloco que carrega nome, promessa e preço. */
.plan__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-6);
  /* branco sólido + contorno pra recortar do fundo off-white — espelha o
     painel (escuro) do plano em destaque, alinhando os três topos. */
  background-color: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
}

.plan__head-top {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.plan__name {
  font-family: var(--font-heading);
  font-size: var(--text-h5);
  font-weight: var(--font-medium);
  line-height: var(--leading-snug);
  color: var(--color-fg);
  margin: 0;
}

.plan__badge {
  padding: 0.25rem var(--space-3);
  font-family: var(--font-ui);
  font-size: var(--text-small);
  line-height: 1.4;
  white-space: nowrap;
  color: var(--color-dark-fg);
  border: 1px solid var(--color-dark-border);
  border-radius: var(--radius-full);
}

.plan__goal {
  font-family: var(--font-ui);
  font-size: var(--text-p);
  line-height: var(--leading-relaxed);
  color: var(--color-fg-subtle);
  margin: 0;
}

/* auto no topo cola o preço na base da cabeça. Como as três cabeças têm a
   mesma altura (subgrid), os preços caem na mesma linha mesmo com o nome
   do destaque ocupando duas linhas de texto. */
/* Preço agora é uma faixa própria (entre o seletor e o CTA), não mais o rodapé
   da cabeça — o alinhamento entre colunas vem do subgrid. */
.plan__price {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin: 0;
}

.plan__price-value {
  font-family: var(--font-heading);
  font-size: var(--text-h4);
  font-weight: var(--font-medium);
  line-height: 1;
  color: var(--color-fg);
}

.plan__price-note {
  font-family: var(--font-ui);
  font-size: var(--text-p);
  color: var(--color-fg-subtle);
}

.plan__cta {
  padding-block: var(--space-4);
}

/* --- Lista de itens --- */

.plan__features {
  display: flex;
  flex-direction: column;
  margin: var(--space-2) 0 0;
  padding: 0;
  list-style: none;
}

/* Tracejado: separa as linhas sem o peso de uma régua contínua — são
   quatro no card inteiro, e um filete sólido em cada uma pesaria demais. */
.plan__feature {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-block: var(--space-3);
  font-family: var(--font-ui);
  font-size: var(--text-p);
  line-height: var(--leading-snug);
  color: var(--color-fg);
  border-bottom: 1px dashed var(--color-border);
}

.plan__feature:last-child {
  border-bottom: none;
}

.plan__feature-icon {
  display: flex;
  flex-shrink: 0;
  color: var(--color-fg-muted);
}

/* --- Trilhas oferecidas no formato --- */

/* Não é uma continuação da lista de itens: aqui deixa de ser o que o plano
   inclui e passa a ser onde ele existe. A régua sólida marca esse corte —
   as linhas de cima usam tracejado. */
/* --- Seletor de trilha (antes do CTA) ---
   O formato pode ter várias trilhas; a pessoa marca uma e o CTA aponta pra ela.
   Quando há só uma, vira um chip fixo (sem radio). */
.plan__pick {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.plan__pick-label {
  font-family: var(--font-ui);
  font-size: var(--text-small);
  font-weight: var(--font-medium);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-fg-muted);
  margin: 0;
}

.plan__pick-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.plan__pick-option {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 2.75rem; /* alvo de toque de 44px */
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-ui);
  font-size: var(--text-p);
  line-height: var(--leading-snug);
  color: var(--color-fg);
  /* não-selecionado: vazado (só contorno cinza), pra não competir com o
     escolhido — o preenchimento branco fica reservado ao selecionado. */
  background-color: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition:
    border-color var(--duration-fast) var(--ease-default),
    background-color var(--duration-fast) var(--ease-default);
}

.plan__pick-option:hover {
  border-color: var(--color-fg-subtle);
}

/* radio custom: círculo que preenche com a cor do CTA quando marcado */
.plan__pick-input {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  margin: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition:
    border-color var(--duration-fast) var(--ease-default),
    background-color var(--duration-fast) var(--ease-default);
}

.plan__pick-input:checked {
  border-color: var(--color-cta);
  background-color: var(--color-cta);
  box-shadow: inset 0 0 0 3px #ffffff;
}

.plan__pick-input:focus-visible {
  outline: 2px solid var(--color-cta);
  outline-offset: 2px;
}

/* a linha marcada realça inteira */
/* selecionado: preenche de branco e ganha contorno azul — é o que se destaca */
.plan__pick-option:has(.plan__pick-input:checked) {
  border-color: var(--color-cta);
  background-color: #ffffff;
}

/* uma trilha só: chip fixo, sem interação */
/* trilha única: não é uma escolha, mas é a trilha ativa — fica preenchida
   (branco) pra não parecer um item vazado/desmarcado. */
.plan__pick--single .plan__pick-option {
  background-color: #ffffff;
  cursor: default;
}

/* --- Destaque: a trilha completa --- */

/* Veste o painel escuro do hero — mesma pele que a marca dá ao que é
   principal. O ruído dissolve o banding do degradê, como lá. */
.plan--featured .plan__head {
  position: relative;
  background:
    var(--gradient-surface) padding-box,
    var(--gradient-surface-stroke) border-box;
  border: 1px solid transparent;
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.plan--featured .plan__head::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--texture-noise);
  mix-blend-mode: overlay;
  opacity: 0.2;
  pointer-events: none;
}

.plan--featured .plan__head > * {
  position: relative;
  z-index: 1;
}

.plan--featured .plan__name {
  color: var(--color-dark-fg);
}

.plan--featured .plan__goal {
  color: var(--color-dark-fg-subtle);
}

/* O preço saiu do painel escuro (cabeça) e agora vive no fundo claro da página:
   cor legível sobre claro. O destaque segue no tamanho maior + cabeça escura. */
.plan--featured .plan__price-value {
  color: var(--color-fg);
  font-size: var(--text-h3);
}

.plan--featured .plan__price-note {
  color: var(--color-fg-subtle);
}