/* =====================================================================
   GRUPO DE PROMOÇÕES — estilos exclusivos de promocoes.html
   Carregado DEPOIS de css/styles.css: aqui entra só o que não existe lá.
   Nada de :root novo — cor, raio, sombra e easing vêm sempre dos tokens.
   A página reaproveita o hero curto (.hero + glow + .badge), o cartão
   (.card, .card__icon, .badge), os passos (.steps/.step), a lista de checks
   (.check-list) e a faixa de dúvida (.duvida). O que é só daqui: o cartão
   de grupo com botão travado (.promo-card), a grade de dois cartões
   (.promo-groups), os três passos em linha (.promo-steps) e a faixa do
   combinado (.promo-rules).
   Ritmo de fundo: hero (branco) → grupos (alt) → como funciona (branco)
   → dúvida (alt).
   ===================================================================== */

/* ---------- Item ativo do menu ---------- */
/* Em subpágina o scrollspy do main.js não marca nada (os links são .html),
   então o destaque vem do aria-current="page" do próprio link. */
.nav__link[aria-current="page"] { color: var(--blue-500); background: var(--gray-100); }
/* Os itens "extra" do menu (menores, à direita do separador) marcam em navy,
   como o próprio hover deles no styles.css; o fundo cinza vem da regra acima. */
.nav__link--extra[aria-current="page"] { color: var(--navy-800); }

/* O .btn do site é <a>; o botão de grupo é <button> (travado até o link
   chegar) e precisa herdar a fonte, como solucoes.css faz. */
button.btn { font-family: inherit; }

/* ---------- Hero ---------- */
/* Hero curto: mesma moldura do Hub e de Quem somos (glow, selo, um CTA só),
   sem a coluna visual da direita e com um pouco menos de respiro vertical.
   O styles.css limita .hero__actions a 600px e só centraliza o CONTEÚDO
   dessa caixa; com o parágrafo em 660px o botão sairia 30px do eixo do
   texto. Mesma largura, mesmo eixo. */
.promo-hero { padding: clamp(52px, 7vw, 88px) 0 clamp(56px, 7vw, 92px); }
.promo-hero .hero__content { max-width: 760px; }
.promo-hero .hero__text { max-width: 660px; }
.promo-hero .hero__actions { max-width: 660px; }

/* ---------- Grupos: grade de dois cartões ---------- */
/* Dois cartões lado a lado, centralizados e limitados a 860px para não
   esticarem demais em tela larga. minmax(0, 1fr) em vez de 1fr para a
   coluna poder encolher abaixo do min-content do cartão: com body
   { overflow-x: hidden } o segundo cartão seria cortado, não rolado.
   A quebra para 1 coluna está no bloco Responsivo. */
.promo-groups {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 860px;
  margin-inline: auto;
}

/* O cartão herda .card (fundo, borda, raio, padding, hover) e vira coluna
   flex para o botão grudar no rodapé (margin-top: auto), como o
   .soft-card__cta faz — assim os dois botões ficam alinhados mesmo com
   frases de tamanhos diferentes. */
.promo-card {
  position: relative;
  display: flex;
  flex-direction: column;
}
/* Parágrafo curto em coluna estreita: justificado abre rios (33px por espaço
   em 1280px). Mesmo tratamento do .soft-card > p. */
.promo-card > p { text-align: left; }

/* Enquanto o link de convite não chega, a borda tracejada avisa isso sem
   depender de texto (mesma linguagem de rascunho do Hub). O .card:hover do
   styles.css apaga a borda no hover; aqui a gente segura a tracejada, para
   o aviso não sumir justo quando a pessoa passa o mouse. Ao publicar o
   link, basta remover a classe is-draft do article. */
.promo-card.is-draft { border-style: dashed; }
.promo-card.is-draft:hover { border-color: var(--gray-200); }

/* Linha do topo: ícone à esquerda, selo à direita (mesmo desenho do
   .soft-card__top). flex-wrap + row-gap para o selo nunca vazar do cartão
   em 375px. */
.promo-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  row-gap: 8px;
}

/* Selo "Em breve": discreto (cinza do menu, texto --muted, tracejado igual
   ao do cartão) mas legível — .8rem com peso 600 herdado do .badge, e nowrap
   para o emoji nunca se separar da palavra. O .badge do styles.css traz
   margin-bottom: 18px; aqui o espaço já vem do .card__icon ao lado. */
.promo-card__soon {
  margin-bottom: 0;
  background: var(--gray-100);
  color: var(--muted);
  border: 1px dashed var(--gray-200);
  font-size: .8rem;
  line-height: 1.2;
  padding: 6px 12px;
  white-space: nowrap;
}

/* Um grupo só: cartão centralizado na linha inteira da grade, limitado à
   largura de um cartão. Basta acrescentar a classe no HTML. */
.promo-card--solo { grid-column: 1 / -1; max-width: 460px; margin-inline: auto; width: 100%; }

/* Rodapé do cartão: botão + nota. margin-top: auto empurra o bloco para o
   fim do cartão. A nota precisa da especificidade dupla para vencer o
   ".card p { margin-bottom: 16px }" do styles.css. */
.promo-card__actions { margin-top: auto; padding-top: 6px; }
.promo-card .promo-card__note {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: .85rem;
  line-height: 1.45;
  text-align: center;
}

/* ---------- Botão travado (mesma receita de solucoes.css) ----------
   Nada de opacity: o rótulo branco a 50% sobre o gradiente cai para 1,4:1 —
   e este é o estado inicial da página, o primeiro que todo visitante vê.
   Estado travado com cor chapada: legível (4,9:1) e visivelmente inativo. */
.btn[disabled] { cursor: not-allowed; }
.btn[disabled],
.btn[disabled]:hover { transform: none; }
.btn--primary[disabled],
.btn--primary[disabled]:hover {
  background: var(--gray-100);
  color: var(--gray-600);
  border-color: var(--gray-200);
  box-shadow: none;
}

/* Bloco abaixo da grade: enquanto os links não entram, o caminho é o
   WhatsApp — e ele precisa ser um botão de verdade, não um link de texto
   escondido num parágrafo apagado. O bloco usa o .section__cta do styles.css
   (centralizado, com o respiro de cima); a nota fica só como frase curta
   acima do botão. Esse bloco sai quando os links de convite entrarem. */
.promo-groups__note {
  max-width: 560px;
  margin: 0 auto 14px;
  text-align: center;
  color: var(--muted);
  font-size: .98rem;
}

/* ---------- Como funciona: três passos em linha ---------- */
/* O .steps do styles.css é uma grade de 4 colunas (2 em ≤980, 1 em ≤560).
   Aqui são três passos: três colunas, e a regra tem a mesma especificidade
   do .steps de lá e vem depois — então vence também dentro das media queries.
   Por isso a quebra para 1 coluna está redeclarada no bloco Responsivo.
   O traço que atravessa o vão de 24px entre um cartão e o próximo, na altura
   do número, é o mesmo de Quem somos: nasce do lado de fora do .step (que já
   é position: relative), com a largura exata do gap da grade. */
.promo-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.promo-steps .step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 51px;           /* centro do .step__num: 32px de padding + metade da linha de 1.6rem */
  right: -24px;        /* gap da grade .steps */
  width: 24px;
  height: 2px;
  background: var(--grad);
  opacity: .55;
  pointer-events: none;
}

/* ---------- O combinado do grupo ---------- */
/* Faixa clara abaixo dos passos, na mesma moldura das faixas do site (fundo
   --gray-50, borda --gray-200, raio --radius, sombra --shadow-soft) com o
   filete vertical em degradê na borda esquerda. A lista reaproveita o
   .check-list do styles.css (círculo com ✓ em degradê) em três colunas. */
.promo-rules {
  position: relative;
  overflow: hidden;
  margin-top: clamp(40px, 6vw, 56px);
  padding: 26px clamp(22px, 4vw, 34px);
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}
.promo-rules::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--grad);
}
.promo-rules h3 { font-size: 1.2rem; margin-bottom: 14px; }
.promo-rules__list {
  margin-top: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px 28px;
}
.promo-rules__list li {
  font-weight: 400;
  font-size: .96rem;
  color: var(--muted);
}
.promo-rules__list strong { color: var(--navy-800); font-weight: 700; }

/* ---------- Responsivo ---------- */
/* 980px: a home centraliza o hero nesta largura (e o styles.css já centraliza
   o botão). Repetimos para o texto não ficar à esquerda sozinho. O .hero__text
   precisa da regra própria: o styles.css o deixa justificado, e em bloco
   centralizado e estreito isso abre "rios" de espaço entre as palavras. */
@media (max-width: 980px) {
  .promo-hero .hero__content { text-align: center; margin-inline: auto; }
  .promo-hero .hero__text { text-align: center; }
  .promo-hero .hero__actions { margin-inline: auto; }
}

/* 760px: três passos de ~210px ficam apertados; um por linha. O traço some
   (em 1 coluna não há vão lateral). A lista do combinado também empilha. */
@media (max-width: 760px) {
  .promo-steps { grid-template-columns: 1fr; }
  .promo-steps .step::after { display: none; }
  .promo-rules__list { grid-template-columns: 1fr; gap: 12px; }
}

/* 600px: o styles.css leva .card para 24px de padding; a grade de grupos
   vira 1 coluna aqui (e não em 560) porque o cartão tem ícone + selo + botão
   e, em 2 colunas de ~270px, o selo já quebra para a linha de baixo. */
@media (max-width: 600px) {
  .promo-groups { grid-template-columns: 1fr; }
  .promo-card--solo { max-width: none; }
}