/* ============================================================
   ProAgentes — preços (02-anatomia §B: 9 blocos, container-small,
   padding-section-small, hierarquia de rótulo 20,8px)
   ============================================================ */

.section_pricing-hero { background: #000; }
.pr3-hero_component { display: flex; flex-direction: column; align-items: center; gap: 48px; }
.pr3-hero_component > h1 { text-align: center; }

.pricing-label { font-size: 1.3rem; line-height: 1.4; letter-spacing: -0.03em; font-weight: 500; text-align: left; width: 100%; }

.section_pricing-features { }
.pricing-features_list { display: flex; flex-direction: column; gap: 16px; margin-top: 32px; }
.pricing-features_item { display: flex; gap: 12px; align-items: flex-start; color: #d4d4d4; }
.pricing-features_item svg { flex: none; margin-top: 2px; }

.section_pricing-slider .pricing-slider_wrapper { display: flex; flex-direction: column; gap: 32px; margin-top: 32px; }
.pricing-slider_row { display: flex; gap: 20px; overflow-x: auto; scrollbar-width: none; position: relative; }
.pricing-slider_row::-webkit-scrollbar { display: none; }
/* PRECOS-ARRUMA 24/08/2026: com 8 cartões de 196px o trilho cortava no 4º sem nenhuma
   pista de que havia mais — o visitante não via metade do elenco que está comprando.
   No desktop os oito passam a caber em duas fileiras; no celular segue rolando, com
   um esmaecido na borda direita indicando que continua. */
@media (min-width: 992px) {
  .pricing-slider_row { flex-wrap: wrap; overflow-x: visible; }
  .pricing-slider_row > .pricing_slider-card { width: calc(25% - 15px); }
}
@media (max-width: 991px) {
  .pricing-slider_wrapper { position: relative; }
  .pricing-slider_wrapper::after {
    content: ""; position: absolute; top: 0; right: -1px; bottom: 0; width: 56px;
    pointer-events: none; background: linear-gradient(90deg, rgba(10,10,10,0), rgba(10,10,10,0.9));
  }
}
.pricing_slider-card {
  flex: none;
  width: 196px;
  min-height: 240px;
  border-radius: 16px;
  color: #fff;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 4px;
}
.pricing_slider-card .ph { flex: 1; border: 0; background: none; margin-bottom: 8px; }
.pricing_slider-card strong { font-weight: 500; font-size: 1.1875rem; display: flex; align-items: center; gap: 8px; }
.pricing_slider-card .compare-chip { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; flex: none; }
.pricing_slider-card span { font-size: 0.8125rem; opacity: 0.8; }

.section_pricing-powerups .pricing-powerups_wrapper { display: flex; flex-direction: column; gap: 24px; margin-top: 32px; }
.powerups_grid { display: flex; flex-wrap: wrap; gap: 12px; }
.powerup-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 1600px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 0.875rem;
}

.section_pricing-blocks .pricing-blocks_wrapper { display: flex; flex-direction: column; gap: 48px; margin-top: 32px; }
.pricing-block {
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 296px;
  justify-content: center;
}
.pricing-block h2 { font-size: 1.875rem; line-height: 1.2; letter-spacing: -0.03em; }
.pricing-block p { color: #949494; }

.section_pricing-faq .pricing-faq_wrapper { display: flex; flex-direction: column; gap: 12px; margin-top: 32px; }
.pricing-faq_item {
  background: #fafafa;
  color: #000;
  border-radius: 12px;
  padding: 0 28px;
}
.pricing-faq_item .faq_question { padding: 24px 0; }
.pricing-faq_item .faq_question h3 { font-size: 1.0625rem; line-height: 1.5rem; }
.pricing-faq_item .faq_answer > p { color: #404040; }

.pricing-conversao-nota {
  margin-top: 48px;
  padding: 16px;
  border: 1px dashed rgba(255, 255, 255, 0.4);
  border-radius: 8px;
  font-size: 0.875rem;
  line-height: 1.4;
  color: #a3a3a3;
}

@media (max-width: 767px) {
  .pricing-block { padding: 24px; min-height: 420px; }
  .pricing_slider-card { width: 160px; min-height: 220px; }
}

/* alturas estruturais (alvo 02-anatomia §B; border-box inclui o padding-section) */
/* PRECOS-ARRUMA 24/08/2026: o herói tinha min-height fixo de 1001.7px, copiado da
   anatomia da Sintra. A rodada 3 da UI (15/08) encolheu os cartões para o conteúdo e
   ninguém baixou este piso — sobrava ~420px de vão preto entre os cartões e a primeira
   seção, em produção. Agora a altura vem do conteúdo. */
.pr3-hero_component { min-height: 0; }
.section_pricing-features.is-a .container-small { min-height: 585.1px; }
.section_pricing-features.is-b .container-small { min-height: 493.1px; }
.section_pricing-features.is-c .container-small { min-height: 453.1px; }
.section_pricing-slider .container-small { min-height: 483.7px; }
.section_pricing-powerups .container-small { min-height: 351.1px; }
.section_pricing-faq .container-small { min-height: 673.1px; }
@media (max-width: 991px) {
  .pr3-hero_component { min-height: 0; }
  .pr3-pricing-card_component { min-height: 900px; }
  .section_pricing-features.is-b .container-small { min-height: 453.1px; }
}
@media (max-width: 767px) {
  .pr3-pricing-card_component { min-height: 680px; }
  .section_pricing-features.is-a .container-small { min-height: 708.8px; }
  .section_pricing-features.is-b .container-small { min-height: 419.2px; }
  .section_pricing-features.is-c .container-small { min-height: 419.2px; }
  .section_pricing-slider .container-small { min-height: 497.3px; }
  .section_pricing-powerups .container-small { min-height: 366px; }
  .section_pricing-faq .container-small { min-height: 635.2px; }
  .pricing-faq_item { padding: 0 20px; }
  .pricing-faq_item .faq_question { padding: 16px 0; }
  .powerup-chip { font-size: 0.75rem; padding: 6px 10px; }
}

/* personagens no trilho: recorte de busto (cabeça no topo do cartão) */
.pricing_slider-card .ph-personagem > img { object-position: 50% 14%; }

/* ============================================================
   ESTREIA LIMPA (ui-perfeicao, rodada 3) — os min-heights foram medidos com
   o conteúdo da referência (artes de plano, listas mais longas). Sem esse
   material as seções encolhem para o conteúdo real; no modo obra voltam. */
html:not(.obra) .pr3-pricing-card_component { min-height: 0; }
html:not(.obra) .section_pricing-features .container-small,
html:not(.obra) .section_pricing-slider .container-small,
html:not(.obra) .section_pricing-powerups .container-small,
html:not(.obra) .section_pricing-faq .container-small { min-height: 0; }

/* ── Vixem: linha própria, preço à vista mas sem checkout ────────────────────
   Não usa .pricing-block (min-height 296 + coluna) porque ali cada bloco ocupa
   uma faixa inteira; aqui são três faixas de um mesmo produto, lado a lado. */
.section_pricing-vixem .vixem-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 24px;
}
.vixem-card {
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.vixem-card strong { font-size: 1.0625rem; font-weight: 600; }
.vixem-card .vixem-preco { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; }
.vixem-card .vixem-preco small { font-size: 0.8125rem; font-weight: 400; color: #949494; }
.vixem-card span { font-size: 0.8125rem; color: #949494; }
.vixem-card .vixem-anual { font-size: 0.75rem; color: #6b6b6b; margin-top: 2px; }

/* ————— Barber: a faixa dos planos da barbearia (BARBER-APARATO, 21/08/2026;
   quarto degrau pela BARBER-FUSAO no mesmo dia)
   Mesma anatomia da faixa do Vixem logo acima — é o outro produto de vários
   tiers que não cabe num cartão do trilho. A diferença é que aqui os cartões
   TÊM destino: os quatro `stripe_price_id` existem, então cada um leva ao
   checkout — por isso ganham botão, que o Vixem (venda consultiva) não tem.
   SEM slot de arte, de propósito: o personagem do Barber ainda não existe, e
   retângulos vazios lado a lado pesam mais do que ajudam. O slot fica
   reservado na landing (/barber), que é onde o personagem aparece de corpo
   inteiro; aqui a faixa segue a anatomia do Vixem, que também é só texto. */
/* BARBER-FUSAO, 21/08/2026: a faixa passou de TRÊS para QUATRO cartões, e o
   `minmax` de 220px não comporta os quatro. `container-small` tem 48rem = 768px;
   quatro colunas de 220px pedem 928px, então o quarto quebrava sozinho para a
   linha de baixo — um órfão ao lado de dois vazios. Com 300px cabem duas por
   linha (2×300 + 16 = 616 ≤ 768) e os quatro caem num 2×2 parelho, sem espremer
   a descrição de cada plano. Abaixo de 767px o `auto-fit` já colapsa para uma
   coluna sozinho, como antes. */
.section_pricing-barbearia .bb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
  margin-top: 24px;
}
.bb-card {
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* o do meio é o que a casa recomenda; borda no acento do Barber, sem texto por cima */
.bb-card.is-destaque { border-color: #0ea5e9; box-shadow: 0 12px 32px rgba(14, 165, 233, 0.18); }
.bb-card strong { font-size: 1.0625rem; font-weight: 600; }
.bb-card .bb-preco { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; }
.bb-card .bb-preco small { font-size: 0.8125rem; font-weight: 400; color: #949494; }
.bb-card span { font-size: 0.8125rem; color: #949494; }
/* o botão encosta no rodapé do cartão para os três ficarem alinhados, mesmo com
   descrições de alturas diferentes */
.bb-card .button { margin-top: auto; align-self: flex-start; }


/* ————— PRECOS-ARRUMA 24/08/2026: hierarquia das faixas por ramo —————
   A página acumulou três sistemas de preço em sequência (ProAgentes, Barber e Vixem),
   cada um entregue por uma missão diferente entre 15 e 22/08, e os três apareciam no
   mesmo nível — lidos de cima a baixo pareciam quatro tabelas concorrentes do mesmo
   produto. Barber e Vixem passam a viver sob um título de grupo, com fundo e faixa
   próprios, para que se leiam como "preço de ramo específico". Nenhum valor mudou. */
.section_pricing-verticais-head .pricing-label { margin-bottom: 0; }
.section_pricing-verticais-head .padding-section-small { padding-top: 56px; padding-bottom: 8px; }
.section_pricing-verticais-head p { color: #949494; margin-top: 8px; }
.section_pricing-barbearia,
.section_pricing-vixem { position: relative; }
.section_pricing-barbearia::before,
.section_pricing-vixem::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: rgba(255, 255, 255, 0.08);
}
.pricing-vertical-chip {
  display: inline-block; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: #9aa0a6; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 999px;
  padding: 4px 10px; margin-bottom: 12px;
}