/* =====================================================================
   SEJA UM PARCEIRO — estilos exclusivos de parceiro.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 os blocos do site (.hero, .step, .feature, .pillar3,
   .cta, .duvida); o que é só daqui é a grade de três passos com o traço
   entre eles, a grade de perfis, o sinônimo ao lado do nome da área e o
   destaque do "10% do primeiro fechamento".
   Ritmo de fundo: hero (branco) → como funciona (alt) → quem indica (branco)
   → o que resolve (alt) → ganho (branco) → cta (escura) → 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); }

/* ---------- Hero de Seja um parceiro ---------- */
/* Hero curto: mesma moldura da home (glow + selo), sem a coluna visual da
   direita e com um pouco menos de respiro vertical (como Hub e Quem somos). */
.pc-hero { padding: clamp(52px, 7vw, 88px) 0 clamp(56px, 7vw, 92px); }
.pc-hero .hero__content { max-width: 760px; }
.pc-hero .hero__text { max-width: 660px; }
/* O trecho em degradê ("você ganha 10%.") vira linha própria: como inline, o
   h1 quebrava em "Indica, a gente / resolve, você ganha / 10%." e o número —
   o destaque da página — sobrava sozinho na última linha. Como bloco, o
   degradê cabe inteiro numa linha (o texto mede ~535px em 760px no desktop
   e ~254px em 335px no celular) e o h1 passa a ler "Indica, a gente /
   resolve, / você ganha 10%." nas duas larguras, medido em 1366 e 375px. */
.pc-hero .hero__title .grad { display: block; }
/* O styles.css limita .hero__actions e .hero__highlights a 600px e só centraliza
   o CONTEÚDO dessa caixa; com o parágrafo em 660px o botão e os checks sairiam
   30px do eixo do texto. Mesma largura, mesmo eixo. */
.pc-hero .hero__actions,
.pc-hero .hero__highlights { max-width: 660px; }

/* ---------- Como funciona: três passos em linha ---------- */
/* O .steps do styles.css é uma grade de quatro colunas (2 em ≤980, 1 em ≤560).
   Aqui são três passos, então a grade vira três colunas. 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 terceiro cartão seria cortado, não rolado.
   Esta regra tem a mesma especificidade do .steps e vem depois, então vence
   inclusive as quebras de coluna do styles.css — por isso a quebra para uma
   coluna está redeclarada no bloco Responsivo, no fim do arquivo. */
.pc-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Traço que atravessa o vão de 24px entre um cartão e o próximo, na altura do
   número, para a fileira ler como sequência (mesmo desenho de Quem somos).
   O .step já é position: relative; o ::after nasce do lado de fora do cartão,
   com a largura exata do gap da grade. */
.pc-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;
}

/* ---------- Quem pode indicar: seis perfis ---------- */
/* Cartões .feature na grade .grid--3 (3 → 2 em ≤980 → 1 em ≤600). O .grid--3
   do styles.css só cai para uma coluna em ≤560 e segura três colunas entre
   561 e 980px, onde cada cartão teria ~170px: título de duas palavras já quebra
   em três linhas. As quebras estão no bloco Responsivo. */
.pc-who { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ---------- Sinônimo simples ao lado do nome da área ---------- */
/* "Hardware (máquina)", "Software (sistema)": na mesma linha do título do
   cartão escuro, em peso normal e no azul-claro de rótulo sobre navy
   (var(--blue-300), o mesmo dos rótulos dos cartões escuros da home), para
   ler como explicação e não como parte do nome. */
.pc-syn { font-weight: 500; font-size: .82em; color: var(--blue-300); }

/* ---------- Destaque: 10% do primeiro fechamento ---------- */
/* Bloco centralizado abaixo do cabeçalho da seção. O número usa o mesmo
   degradê em texto do .step__num e do .mini-card__num (classe .grad do
   styles.css); aqui só entram tamanho, peso e ritmo vertical. */
.pc-hl { text-align: center; max-width: 720px; margin-inline: auto; }
.pc-hl__fact { margin: 0; }
.pc-hl__num {
  display: block;
  font-family: "Poppins", "Inter", sans-serif;
  font-weight: 800;
  font-size: clamp(4.6rem, 15vw, 9rem);
  line-height: 1;
  letter-spacing: -.02em;
}
/* A frase exata, em Poppins e navy, logo abaixo do número — é a continuação
   da mesma sentença ("10% do primeiro fechamento..."), por isso o strong e o
   span moram no mesmo <p>. */
.pc-hl__phrase {
  display: block;
  max-width: 560px;
  margin: 14px auto 0;
  font-family: "Poppins", "Inter", sans-serif;
  font-weight: 700;
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  line-height: 1.3;
  color: var(--navy-800);
}
/* Nota honesta em caixa clara (fundo --gray-50, borda --gray-200, raio
   --radius-sm — a mesma moldura das caixas de apoio do site). Encolhe até a
   largura do texto e centraliza; nunca passa da coluna. */
.pc-hl__note {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: fit-content;
  max-width: 100%;
  margin: 28px auto 0;
  padding: 16px 20px;
  text-align: left;
  color: var(--muted);
  font-size: .95rem;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
}
.pc-hl__note-icon { flex-shrink: 0; font-size: 1.2rem; line-height: 1.3; }

/* ---------- Responsivo ---------- */
/* 980px: a home centraliza o hero nesta largura (e o styles.css já centraliza
   selo, botão e destaques). 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.
   A grade de perfis cai para duas colunas. */
@media (max-width: 980px) {
  .pc-hero .hero__content { text-align: center; margin-inline: auto; }
  .pc-hero .hero__text { text-align: center; }
  /* O styles.css centraliza o .hero__text (margin auto) mas não as caixas de
     660px do botão e dos destaques: sem isto elas colam à esquerda do
     .hero__content e o botão sai de baixo do título e do parágrafo. */
  .pc-hero .hero__actions,
  .pc-hero .hero__highlights { margin-inline: auto; }
  /* Cada destaque continua centralizado como grupo (é item do flex), mas o
     texto de dentro alinha à esquerda: o "✓" do ::before fica preso em
     left: 0 do <li>, e quando a frase quebra em duas linhas (em 375px o
     <li> ocupa a largura toda) o text-align: center herdado do
     .hero__content afastava o texto do check e centralizava a segunda linha
     sob nada. */
  .pc-hero .hero__highlights li { text-align: left; }
  .pc-who { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 760px: os três passos empilham (em três colunas cada cartão teria ~200px e o
   título "A gente atende e fecha" viraria três linhas). Sem vão lateral, o
   traço entre os passos some. */
@media (max-width: 760px) {
  .pc-steps { grid-template-columns: 1fr; }
  .pc-steps .step::after { display: none; }
}

/* 600px: os perfis viram uma coluna (e não em 560, como o .grid--3 genérico)
   porque o cartão centralizado com ícone redondo já fica apertado em duas
   colunas de ~160px. A nota do destaque ocupa a coluna inteira. */
@media (max-width: 600px) {
  .pc-who { grid-template-columns: 1fr; }
  .pc-hl__note { width: 100%; }
}