/* ===========================================================
   Bluhertz — Escolher Soluções (solucoes.html)
   Estilo próprio da página do "carrinho de interesse".
   Carrega DEPOIS de css/styles.css e só usa as variáveis
   que já existem no :root de lá — nada é redeclarado aqui.
   =========================================================== */

/* ---------- Item ativo no menu (mesmo estado do .is-active) ---------- */
.nav__link[aria-current="page"] { color: var(--blue-500); background: var(--gray-100); }
.nav__link--cta[aria-current="page"] { color: var(--white); background: var(--grad); }

/* Botão do site é <a>; aqui existe <button>, que não herda a fonte sozinho */
button.btn { font-family: inherit; }

/* A barra fixa come o rodapé da janela (75px no desktop, ~133px quando ela
   vira duas linhas). O styles.css só reserva o topo (scroll-padding-top: 80px),
   então o foco de teclado parava atrás da barra: aqui reservamos o rodapé
   também, com folga para a barra na altura máxima. */
html { scroll-padding-bottom: 170px; }

/* ---------- Hero curto ---------- */
.pick-hero { padding: clamp(52px, 7vw, 88px) 0 clamp(56px, 7vw, 92px); }
.pick-hero__inner { text-align: center; }
/* Bloco centralizado em toda largura: o parágrafo acompanha (o styles.css
   justifica o .hero__text, e a última linha ficaria solta à esquerda). */
.pick-hero .hero__text {
  max-width: 640px;
  margin-inline: auto;
  text-align: center;
  -webkit-hyphens: manual;
  hyphens: manual;
}
.pick-hero .hero__badges,
.pick-hero .hero__actions { justify-content: center; }
/* O styles.css limita .hero__actions a 600px sem margem automática: no
   container--narrow (820px) o flex encostava à esquerda e o botão saía
   110px do centro do h1. A margem auto traz o bloco para a coluna. */
.pick-hero .hero__actions { margin-inline: auto; }
.pick-hero__note {
  max-width: 560px;
  margin: 26px auto 0;
  color: var(--muted);
  font-size: .9rem;
}

/* ---------- Grade do catálogo ----------
   Mesma cadência do site: 3 colunas, 2 em tablet e 1 no celular.
   minmax(0, 1fr): a coluna pode encolher abaixo do min-content do cartão,
   senão o body (overflow-x: hidden) corta o terceiro cartão em vez de rolar. */
.pick-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }

/* Linha de apoio de cada grupo: diz para quem é aquele bloco. Fica alinhada
   ao título do .cat-head (44px do número + 16px de vão = 60px). */
.pick-group__lead {
  max-width: 720px;
  margin: -10px 0 22px 60px;
  color: var(--muted);
  font-size: .98rem;
}

/* ---------- Cartão selecionável ----------
   O <label> envolve um checkbox real: o clique, o teclado e o leitor de
   tela continuam funcionando; o visual é todo do .pick-item__box. */
/* Os estilos do cartão marcável (.pick-item) moraram aqui e foram para o css/styles.css,
   porque o Hub (seção Apps) usa o mesmo componente. */

/* ---------- Sinônimo simples ao lado do termo técnico ----------
   "Hardware (máquina)", "Dashboards em Power BI (painel de números)":
   fica na mesma linha do título, mas em peso normal e cor de apoio,
   para ler como explicação e não como parte do nome. */
.pick-syn { font-weight: 500; font-size: .82em; color: var(--muted); }

/* ---------- Faixa escura de ajuda ----------
   Reaproveita o .soft-help; só falta o foco em ciano, porque o
   styles.css cobre apenas .footer, .cta, .pillar3, .wa-float e .back-to-top. */
.pick-help { margin-top: 46px; }
.pick-help :focus-visible { outline-color: var(--cyan); }

/* ---------- Bloco de revisão ----------
   Fica dentro de #catalogo (a faixa escura .pick-help já separa a grade da
   revisão), para a página manter o ritmo branco → alt até a faixa #duvida.
   O wrap ganha o mesmo respiro de uma .section, sem o padding dobrado. */
.pick-review-wrap { margin-top: clamp(64px, 9vw, 110px); }
.pick-review {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: 30px;
  box-shadow: var(--shadow-soft);
}
.pick-review__title { font-size: 1.2rem; }
.pick-review__list { margin: 18px 0 0; }
/* Vazio = caixa tracejada (mesmo sinal de "ainda não tem" dos rascunhos do Hub) */
.pick-review__empty {
  margin: 14px 0 0;
  padding: 16px 18px;
  color: var(--muted);
  font-size: .95rem;
  background: var(--gray-50);
  border: 1px dashed var(--gray-200);
  border-radius: var(--radius-sm);
}
.pick-review__empty a {
  color: var(--blue-600);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.pick-review__empty a:hover { color: var(--blue-500); }
/* .check-list é display:grid e venceria o [hidden] do navegador */
.pick-review__list[hidden],
.pick-review__empty[hidden] { display: none; }

/* Nome e observação separados da lista por uma linha fina */
.pick-review__fields {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--gray-200);
}
.pick-optional { font-weight: 500; color: var(--muted); }
.pick-note-help { display: block; color: var(--muted); font-size: .82rem; margin-top: 6px; }

/* ---------- Botão desabilitado (nada de alert: o botão explica sozinho) ----------
   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;
}
.btn--ghost[disabled],
.btn--ghost[disabled]:hover { border-color: var(--gray-200); color: var(--gray-600); }

/* ---------- Barra fixa de resumo ----------
   Mesmo tratamento do header: fundo translúcido, blur e uma linha de borda. */
.pick-bar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 45;
  background: color-mix(in srgb, var(--white) 96%, transparent);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--gray-200);
}
.pick-bar__inner {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 14px;
  padding: 14px 0;
}
.pick-bar__info { flex: 1 1 auto; min-width: 0; }
.pick-bar__count {
  font-family: "Poppins", "Inter", sans-serif;
  font-weight: 700; font-size: 1.02rem; line-height: 1.25;
  color: var(--navy-800);
}
.pick-bar__hint { color: var(--muted); font-size: .88rem; }
.pick-bar__actions { display: flex; gap: 10px; flex-shrink: 0; }
.pick-bar .btn { padding: 12px 22px; font-size: .95rem; }
.pick-bar__short { display: none; }

/* A barra ocupa o rodapé da janela: o footer ganha folga e os botões
   flutuantes sobem, para nada ficar escondido atrás dela. */
.page-solucoes .footer__bottom { padding-bottom: 104px; }
.page-solucoes .wa-float,
.page-solucoes .back-to-top { bottom: 96px; }

/* ---------- Responsivo ---------- */
@media (max-width: 980px) {
  .pick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* A barra vira duas linhas MUITO antes dos 760px: medido no navegador, o
   resumo mais os dois botões só cabem numa linha a partir de ~845px. Por
   isso a folga de duas linhas começa aqui — antes, a faixa de 761px a
   845px (o iPad em retrato, 768px, está nela) ficava com a barra de duas
   linhas e a folga do desktop, e a barra cobria os botões flutuantes e a
   última linha do rodapé. */
@media (max-width: 900px) {
  .pick-bar__actions { width: 100%; }
  .pick-bar__actions .btn { flex: 1; }
  /* O botão principal fica com o dobro da largura para o rótulo não quebrar */
  .pick-bar__actions .btn--primary { flex: 2; }

  /* Barra em duas linhas: a folga do rodapé e dos flutuantes cresce junto */
  .page-solucoes .footer__bottom { padding-bottom: 160px; }
  .page-solucoes .wa-float,
  .page-solucoes .back-to-top { bottom: 152px; }
}

@media (max-width: 760px) {
  /* Rótulo curto só onde o completo não cabe. Ele nomeia o botão sozinho:
     o rótulo escondido sai por display:none, então o leitor de tela lê
     exatamente o que está na tela (WCAG 2.5.3, comando de voz). */
  .pick-bar__full { display: none; }
  .pick-bar__short { display: inline; }
}

@media (max-width: 600px) {
  .pick-group__lead { margin-left: 0; font-size: .95rem; }
  .pick-item__box { padding: 24px; }
  .pick-item__check { top: 24px; right: 24px; }
  .pick-review { padding: 24px; }
  .pick-review__empty { padding: 14px 16px; }

  .pick-bar__inner { padding: 12px 0; gap: 12px; }
  .pick-bar__count { font-size: .95rem; }
  .pick-bar__hint { font-size: .8rem; }
  .pick-bar .btn { padding: 12px 14px; }
}

@media (max-width: 560px) {
  .pick-grid { grid-template-columns: 1fr; }
}

/* Os 3 passos de "Como funciona" não cabem em 3 colunas abaixo de 760px
   (o styles.css só derruba o .grid--3 para 1 coluna em 560px) */
@media (max-width: 760px) {
  #como-funciona .grid--3 { grid-template-columns: minmax(0, 1fr); max-width: 520px; margin-inline: auto; }
}