/* ==========================================================================
   Unique Performance: páginas de proposta por especialidade (proposta-*.php)
   Carrega DEPOIS de styles.css e reaproveita de lá .hero, .pains, .plans,
   .plan, .method, .faq, .ctv, .mobilebar, .btn--* e .reveal. Aqui fica só o
   que é destas páginas. Ordem: hero · planos · link cruzado · responsivo.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Hero
   Sem a agenda da home, o texto fica numa coluna só e o H1, mais longo,
   cresce menos.
   -------------------------------------------------------------------------- */
.phero__copy {
  position: relative;
  max-width: 50rem;
}

.phero .hero__h1 {
  font-size: clamp(2.125rem, 1.5rem + 2.9vw, 3.75rem);
}

.phero .hero__sub {
  max-width: 58ch;
}

/* --------------------------------------------------------------------------
   2. Planos
   Grade própria: no styles.css, abaixo de 1040px, o .plan--featured estica
   na linha inteira porque lá o destaque é o último card. Aqui ele é o do
   meio, então a grade vai direto de 3 colunas para 1.
   -------------------------------------------------------------------------- */
.plans--proposal {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: var(--sp-5);
  padding-top: var(--sp-4); /* espaço do selo do card em destaque */
}

.plans--proposal .plan {
  position: relative;
}

.plans--proposal .plan--featured {
  grid-column: auto;
  border-color: var(--gold);
  box-shadow: 0 0 0 1px var(--gold), 0 28px 70px rgba(11, 27, 43, 0.3);
}

/* translate, e não transform: o transform é do .reveal */
@media (min-width: 961px) {
  .plans--proposal .plan--featured {
    translate: 0 calc(var(--sp-4) * -1);
  }
}

.plan__badge {
  position: absolute;
  top: 0;
  left: 50%;
  translate: -50% -50%;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  background: var(--gold);
  color: var(--navy-900);
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
}

.plan__fit {
  margin-bottom: var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  line-height: 1.5;
  letter-spacing: 0.03em;
  color: var(--gold-light);
}

.plans--proposal .plan__sub {
  min-height: 0;
}

/* A entrega é o destaque do card: maior e na cor cheia do texto (o
   styles.css deixa a lista em --fs-small e no tom secundário). */
.plans--proposal .plan__list li {
  margin-bottom: var(--sp-3);
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--on-dark);
}

.plan__detail {
  display: block;
  margin-top: 0.2rem;
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--on-dark-2);
}

/* Investimento, verba e permanência: embaixo, menores, junto do botão.
   A lista acima tem flex: 1, então o bloco fica alinhado entre os cards. */
.plan__terms {
  margin-bottom: var(--sp-4);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--radius-sm);
}

/* Rótulo em cima, valor embaixo: lado a lado, o valor quebrava no card estreito */
.plan__terms div {
  display: grid;
  gap: 0.15rem;
  padding: 0.65rem 0.8rem;
}

.plan__terms div + div {
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}

.plan__terms dt {
  font-size: var(--fs-micro);
  color: var(--on-dark-2);
}

.plan__terms dd {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--on-dark);
}

.plan__terms .plan__price {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.plan__price small {
  margin-left: 0.2em;
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--on-dark-2);
}

/* Menos respiro lateral: "Quero o plano Crescimento" cabe numa linha */
.plans--proposal .plan__cta {
  margin-top: 0;
  padding-inline: var(--sp-3);
}

/* --------------------------------------------------------------------------
   3. Link cruzado para a outra faixa da mesma especialidade
   -------------------------------------------------------------------------- */
.pcross {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4) var(--sp-6);
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding: var(--sp-5) clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--off);
}

.pcross p {
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  font-weight: 400;
  line-height: 1.3;
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   4. Responsivo
   -------------------------------------------------------------------------- */
@media (max-width: 960px) {
  .plans--proposal {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-7);
    max-width: 520px;
    margin-inline: auto;
  }
}

@media (max-width: 560px) {
  .pcross .btn {
    width: 100%;
  }
}