/* =========================================================
   BPO NEXO — PÁGINA DE PROCESSOS E PLANOS
   Complemento de style.css. Carregue SEMPRE depois dela:
   aqui não há token novo nem cor literal — todo valor vem
   das variáveis do design system, para que os dois temas
   (claro e escuro) continuem funcionando sem ajuste.
   ========================================================= */

/* =========================================================
   01 · CABEÇALHO DA PÁGINA (hero simplificado)
   Mesma métrica do .hero da home, porém em coluna única e
   centralizado: aqui não há formulário na direita.
   ========================================================= */
.hero-proc {
  padding-top: 96px;
  padding-bottom: 32px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.hero-proc__titulo { max-width: 22ch; text-wrap: balance; }
.hero-proc__slogan { font-size: 1.375rem; color: var(--text-secondary); }

.hero-proc__sub {
  max-width: 62ch;
  color: var(--neutral-400);
  text-wrap: pretty;
}

.hero-proc__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-4);
  justify-content: center;
  margin-top: 8px;
}

/* --- Pré-requisito de contratação ---
   Faixa de aviso acima dos planos, no verde da marca (tokens de
   accent), que já se ajustam aos dois temas. */
.requisito {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  width: 100%;
  margin-top: var(--gap-8);
  padding: 18px 20px;
  background-color: var(--accent-tint);
  border: 1px solid var(--accent-border);
  border-radius: var(--r-md);
  text-align: left;
}

.requisito__icone {
  display: grid;
  place-items: center;
  flex: none;
  color: var(--accent);
}

/* 1px alinha o ícone com a primeira linha do texto, e não com o topo
   da caixa — o mesmo ajuste usado em .prazos__item. */
.requisito__icone .lucide { width: 20px; height: 20px; margin-top: 1px; }

.requisito p {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--text-secondary);
  text-wrap: pretty;
}

.requisito strong { color: var(--text); font-weight: 600; }

/* --- Faixa "como funciona" — 3 passos resumidos --- */
.resumo {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap-4);
  width: 100%;
  margin-top: var(--gap-8);
  text-align: left;
}

/* Quando o resumo vem logo acima dos cards de plano (home), precisa
   de respiro: o selo do plano em destaque sobe 11px para fora do
   card e encostaria nos itens do resumo. */
.resumo + .planos { margin-top: var(--gap-12); }

.resumo__item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 20px;
  background-color: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}

.resumo__num {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: var(--r-full);
  background-color: var(--accent-tint);
  border: 1px solid var(--accent-border);
  color: var(--accent);
  font-size: 0.8125rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.resumo__item strong {
  display: block;
  font-size: 0.9375rem;
  font-weight: 600;
  margin-bottom: 2px;
}

.resumo__item p { font-size: 0.8125rem; line-height: 1.55; color: var(--neutral-400); }

/* =========================================================
   02 · ETIQUETA DE RESPONSABILIDADE
   O elemento central da página: diz, em uma olhada, de quem
   é cada atividade. São só quatro estados, e cada um usa uma
   cor semântica já definida nos tokens — por isso funcionam
   nos dois temas sem nenhuma regra extra.

     .resp--cliente  o cliente executa
     .resp--bpo      nós executamos
     .resp--misto    os dois participam
     .resp--validar  depende de integração a validar
   ========================================================= */
.resp {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: var(--r-full);
  border: 1px solid transparent;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1.4;
}

.resp .lucide { width: 13px; height: 13px; flex: none; }

.resp--cliente { background-color: var(--info-bg); color: var(--info); }
.resp--bpo { background-color: var(--accent-tint); color: var(--accent); border-color: var(--accent-border); }
.resp--misto { background-color: var(--surface-hover); color: var(--text); border-color: var(--border-strong); }
.resp--validar { background-color: var(--alerta-bg); color: var(--alerta); }

/* Legenda das etiquetas, usada no topo do comparativo */
.resp-legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  align-items: center;
  margin-bottom: 24px;
}

.resp-legenda__texto { font-size: 0.8125rem; color: var(--neutral-500); }

/* =========================================================
   03 · CARDS DE PLANO

   COMO EDITAR: cada plano é um <article class="plano"> e cada
   serviço dentro dele é um <div class="servico">, com o nome,
   a etiqueta de responsável e os itens. Para acrescentar um
   serviço, copie um bloco .servico inteiro.
   ========================================================= */
.planos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap-6);
  align-items: stretch;
}


.plano {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--gap-8);
  background-color: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  transition: transform var(--t-base), border-color var(--t-base), box-shadow var(--t-base);
}

.plano:hover {
  transform: translateY(-4px);
  border-color: var(--border-accent);
  box-shadow: var(--shadow-card);
}

/* Plano recomendado: borda e halo da primária, igual ao card em
   destaque da home. Para mover a recomendação de plano, basta
   trocar a classe de card no HTML. */
.plano--destaque {
  background-color: var(--accent-tint);
  border-color: var(--accent-border);
  box-shadow: var(--glow-destaque);
}

.plano--destaque:hover { box-shadow: var(--glow-destaque-hover); }

.plano__selo {
  position: absolute;
  top: -11px;
  left: var(--gap-8);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 14px;
  border-radius: var(--r-full);
  background-color: var(--accent-fill);
  color: var(--on-accent);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: var(--shadow-orange-sm);
}

.plano__selo .lucide { width: 13px; height: 13px; }

.plano__topo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.plano__icone {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: var(--r-sm);
  background-color: var(--accent-tint);
  border: 1px solid var(--accent-border);
  color: var(--accent);
}

.plano__nome { font-size: 1.25rem; font-weight: 600; }

.plano__nivel {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--neutral-500);
}

.plano__publico {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--neutral-400);
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
  text-wrap: pretty;
}

.plano__publico strong { color: var(--text); font-weight: 600; }

/* --- Espaço reservado para preço ---
   Já estilizado e pronto para uso: remova o atributo hidden do
   bloco .plano__preco no HTML e preencha os valores. Enquanto
   estiver oculto, o card se fecha normalmente sem buraco. */
.plano__preco { padding-top: 20px; }
.plano__preco[hidden] { display: none; }

.plano__valor {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.plano__valor small { font-size: 0.875rem; font-weight: 400; color: var(--neutral-500); }
.plano__preco-nota { font-size: 0.75rem; color: var(--neutral-500); margin-top: 4px; }

/* --- Limites operacionais (opcional) ---
   Bloco preparado para "até X empresas", "até X lançamentos/mês"
   etc. Também vem com hidden no HTML. */
.plano__limites {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 20px;
}

.plano__limites[hidden] { display: none; }

.plano__limite {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: var(--r-full);
  background-color: var(--surface-soft);
  border: 1px solid var(--border);
  font-size: 0.75rem;
  color: var(--neutral-400);
}

.plano__limite .lucide { width: 13px; height: 13px; color: var(--accent); }

.plano__rotulo {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--neutral-500);
  margin: 24px 0 4px;
}

/* Rodapé do card: fica colado na base para que os planos tenham
   os botões alinhados mesmo com listas de tamanhos diferentes. */
.plano__rodape {
  margin-top: auto;
  padding-top: var(--gap-6);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.plano__nota {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--neutral-500);
}

.plano__nota .lucide { width: 13px; height: 13px; flex: none; margin-top: 2px; }

/* --- Serviço dentro do plano --- */
.servico {
  padding: 18px 0;
  border-bottom: 1px solid var(--border);
}

.servico:last-of-type { border-bottom: 0; padding-bottom: 0; }

.servico__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}

.servico__nome {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.9375rem;
  font-weight: 600;
}

.servico__nome .lucide { width: 17px; height: 17px; flex: none; color: var(--accent); }

.servico__itens { display: flex; flex-direction: column; gap: 8px; }

.servico__itens li {
  position: relative;
  padding-left: 16px;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--neutral-400);
}

/* Marcador discreto: um traço, não um ✓ — aqui a lista descreve
   o que é feito, e não o que está incluído. */
.servico__itens li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 7px;
  height: 1px;
  background-color: var(--accent);
  opacity: 0.7;
}

/* -----------------------------------------------------------
   ALINHAMENTO ENTRE OS CARDS

   Os textos de apresentação têm alturas diferentes, então sem
   isto o rótulo "Serviços e responsáveis" e a lista de serviços
   começariam em alturas diferentes nos dois planos.

   Com subgrid, os dois cards passam a compartilhar as MESMAS
   sete faixas horizontais do grid de fora:

     1 cabeçalho · 2 apresentação · 3 preço · 4 limites
     5 rótulo    · 6 serviços     · 7 rodapé

   Cada bloco é fixado na sua faixa, então uma faixa vazia num
   card (o preço, que vem oculto) não empurra as de baixo — e a
   faixa 6 estica, deixando os botões alinhados na base.

   Vem depois das regras de .plano de propósito: precisa vencer
   o `display: flex` declarado acima, que tem a mesma
   especificidade. E só vale a partir de 1024px, que é onde os
   cards ficam lado a lado — abaixo disso eles empilham e não há
   o que alinhar.
   ----------------------------------------------------------- */
@media (min-width: 1024px) {
  @supports (grid-template-rows: subgrid) {
    .planos { grid-template-rows: auto auto auto auto auto 1fr auto; }

    .plano {
      display: grid;
      grid-row: span 7;
      grid-template-rows: subgrid;
      row-gap: 0;                              /* o card tem o próprio ritmo */
    }

    .plano__topo { grid-row: 1; }
    .plano__publico { grid-row: 2; }
    .plano__preco { grid-row: 3; }
    .plano__limites { grid-row: 4; }
    .plano__rotulo { grid-row: 5; }
    .plano__servicos { grid-row: 6; }
    .plano__rodape { grid-row: 7; }
  }
}

/* =========================================================
   04 · RESPONSABILIDADES (cliente × BPO)
   Duas colunas equivalentes, diferenciadas pela cor da etiqueta
   no topo — a mesma cor usada nas etiquetas dos planos.
   ========================================================= */
.responsa {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap-6);
  align-items: start;
}

.responsa__col {
  padding: var(--gap-8);
  background-color: var(--surface-soft);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  height: 100%;
}

.responsa__topo {
  display: flex;
  align-items: center;
  flex-wrap: wrap;                          /* no celular a etiqueta e o título ficam em linhas separadas */
  gap: 10px 12px;
  padding-bottom: 20px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
}

/* min-width: 0 desarma o mínimo automático do item flex: sem isto o
   título não encolhe abaixo do seu min-content e estoura a coluna. */
.responsa__titulo { font-size: 1.0625rem; font-weight: 600; min-width: 0; }

.dever { padding: 20px 0; border-bottom: 1px solid var(--border); }
.dever:last-child { border-bottom: 0; padding-bottom: 0; }

.dever__titulo {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.9375rem;
  font-weight: 600;
  margin-bottom: 10px;
}

.dever__titulo .lucide { width: 17px; height: 17px; flex: none; color: var(--accent); }

.dever__itens { display: flex; flex-direction: column; gap: 8px; }

.dever__itens li {
  position: relative;
  padding-left: 16px;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--neutral-400);
}

.dever__itens li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 7px;
  height: 1px;
  background-color: var(--accent);
  opacity: 0.7;
}

/* Faixa dos dois prazos principais, acima das colunas */
.prazos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap-4);
  margin-bottom: var(--gap-8);
}

.prazos__item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 20px;
  background-color: var(--accent-tint);
  border: 1px solid var(--accent-border);
  border-radius: var(--r-md);
}

.prazos__item .lucide { width: 20px; height: 20px; flex: none; color: var(--accent); margin-top: 2px; }
.prazos__item strong { display: block; font-size: 0.9375rem; font-weight: 600; margin-bottom: 2px; }
.prazos__item p { font-size: 0.8125rem; line-height: 1.55; color: var(--neutral-400); }

/* =========================================================
   05 · MATRIZ COMPARATIVA

   COMO EDITAR: cada linha é um <tr> com o nome do serviço e
   uma célula por plano, e dentro da célula vai a etiqueta
   .resp correspondente. Para trocar o responsável, basta
   trocar a etiqueta.
   ========================================================= */
.matriz-wrap {
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  background-color: var(--surface-soft);
  overflow: hidden;
}

/* O scroll horizontal fica neste contêiner interno: assim a
   borda arredondada de fora não é cortada pelo overflow. */
.matriz-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.matriz {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.matriz th,
.matriz td {
  padding: 14px 18px;
  text-align: center;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

.matriz tbody tr:last-child th,
.matriz tbody tr:last-child td { border-bottom: 0; }

/* Primeira coluna: nome do serviço, fixo na rolagem horizontal.
   O seletor leva o .matriz na frente porque a regra genérica acima
   (.matriz th) centraliza tudo e tem a mesma especificidade. */
.matriz .matriz__processo {
  position: sticky;
  left: 0;
  z-index: 2;
  text-align: left;
  font-weight: 400;
  color: var(--text-secondary);
  background-color: var(--bg);
  min-width: 230px;
}

.matriz__processo span { display: inline-flex; align-items: center; gap: 10px; }
.matriz__processo .lucide { width: 16px; height: 16px; flex: none; color: var(--accent); }

.matriz thead th {
  background-color: var(--neutral-950);
  border-bottom: 1px solid var(--border-strong);
  padding-block: 18px;
}

.matriz thead .matriz__processo { z-index: 3; background-color: var(--neutral-950); }

.matriz__plano-nome {
  display: block;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text);
}

.matriz__plano-tag {
  display: block;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--neutral-500);
  margin-top: 2px;
}

/* Coluna do plano recomendado, realçada de ponta a ponta */
.matriz th.destacada,
.matriz td.destacada { background-color: var(--accent-tint); }
.matriz thead th.destacada .matriz__plano-tag { color: var(--accent); }

.matriz tbody tr:hover td,
.matriz tbody tr:hover .matriz__processo { background-color: var(--surface-hover); }

/* Observação curta abaixo da etiqueta, quando o responsável
   sozinho não conta a história toda. */
.matriz__obs {
  display: block;
  margin-top: 6px;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--neutral-500);
}

/* Seção de grupo dentro da tabela */
.matriz__secao th {
  text-align: left;
  padding-block: 12px;
  background-color: var(--surface);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--neutral-500);
}

/* --- Seletor de plano (só aparece no celular) ---
   Na tela estreita, duas colunas de etiqueta obrigam a rolar de
   lado. O seletor deixa uma coluna por vez. */
.matriz-seletor {
  display: none;
  gap: 6px;
  padding: 6px;
  margin-bottom: 16px;
  background-color: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
}

.matriz-seletor button {
  flex: 1;
  padding: 9px 8px;
  border-radius: var(--r-full);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background-color var(--t-fast), color var(--t-fast);
}

.matriz-seletor button[aria-selected="true"] {
  background-color: var(--accent-fill);
  color: var(--on-accent);
  font-weight: 600;
}

.matriz-seletor button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* =========================================================
   06 · JORNADA DO PROCESSO
   Seis etapas ligadas por uma linha contínua. No desktop a
   linha é horizontal; abaixo de 1024px vira vertical.
   ========================================================= */
.jornada {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--gap-4);
}

/* A linha que costura as etapas. Fica atrás dos números e para
   antes da primeira e da última bolinha, para não sobrar ponta. */
.jornada::before {
  content: '';
  position: absolute;
  top: 27px;
  left: 8.33%;
  right: 8.33%;
  height: 1px;
  background-color: var(--border-strong);
}

.etapa {
  position: relative;
  z-index: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.etapa__marca {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: var(--r-full);
  background-color: var(--bg);
  border: 1px solid var(--accent-border);
  color: var(--accent);
  transition: transform var(--t-base), background-color var(--t-base), box-shadow var(--t-base);
}

.etapa__marca .lucide { width: 20px; height: 20px; }

.etapa:hover .etapa__marca {
  transform: translateY(-3px);
  background-color: var(--accent-tint);
  box-shadow: var(--shadow-orange-sm);
}

.etapa__num {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--neutral-500);
  font-variant-numeric: tabular-nums;
}

.etapa__titulo { font-size: 0.9375rem; font-weight: 600; }
.etapa__texto { font-size: 0.8125rem; line-height: 1.55; color: var(--neutral-400); text-wrap: pretty; }

/* =========================================================
   07 · BLOCO DE PRÓXIMOS PASSOS / PROPOSTA
   Caixa final antes do rodapé, preparada para receber o fluxo
   de contratação (link para cadastro.html).
   ========================================================= */
.proposta {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: var(--gap-12);
  align-items: center;
  padding: var(--gap-12);
  background-color: var(--surface-soft);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
}

.proposta h2 { margin-bottom: 14px; }
.proposta > div > p { color: var(--neutral-400); max-width: 52ch; text-wrap: pretty; }

.proposta__acoes {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* O .btn é inline-flex, e display vence o [hidden]: sem esta regra
   o botão de contratação apareceria mesmo marcado como oculto. */
.btn[hidden] { display: none; }

.proposta__lista {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}

.proposta__lista li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--neutral-500);
}

.proposta__lista .lucide { width: 14px; height: 14px; flex: none; margin-top: 2px; color: var(--accent); }

/* =========================================================
   08 · RESPONSIVIDADE
   Mesmos breakpoints do design system: lg 1024px · md 768px
   ========================================================= */
@media (max-width: 1023.98px) {
  .hero-proc { padding-top: 64px; }
  /* minmax(0, 1fr) em vez de 1fr: o mínimo automático de uma faixa é o
     min-content, então um título longo alargaria a coluna para além da
     tela. Com mínimo 0 o texto quebra em vez de estourar o container. */
  .resumo { grid-template-columns: minmax(0, 1fr); }

  .planos { grid-template-columns: minmax(0, 1fr); gap: var(--gap-8); }
  .responsa { grid-template-columns: minmax(0, 1fr); }
  .prazos { grid-template-columns: minmax(0, 1fr); }

  /* Jornada em coluna: a linha passa a ser vertical, atrás das marcas */
  .jornada { grid-template-columns: minmax(0, 1fr); gap: var(--gap-6); }

  .jornada::before {
    top: 27px;
    bottom: 27px;
    left: 27px;
    right: auto;
    width: 1px;
    height: auto;
    background-color: var(--border-strong);
  }

  .etapa {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
    gap: var(--gap-4);
  }

  .etapa__marca { flex: none; }
  .etapa__corpo { padding-top: 6px; }

  .proposta { grid-template-columns: minmax(0, 1fr); gap: var(--gap-8); padding: var(--gap-8); }
}

@media (max-width: 767.98px) {
  .hero-proc__slogan { font-size: 1.125rem; }
  .hero-proc__acoes { width: 100%; flex-direction: column; }
  .hero-proc__acoes .btn { width: 100%; }

  .plano { padding: var(--gap-6); }
  .plano--destaque::before { left: var(--gap-6); right: var(--gap-6); }
  .plano__selo { left: var(--gap-6); }
  .responsa__col { padding: var(--gap-6); }

  /* No celular a etiqueta desce para a linha de baixo do nome */
  .servico__topo { align-items: flex-start; }

  /* Uma coluna de plano por vez, escolhida no seletor acima da
     tabela. O JS marca .matriz com data-plano e as regras abaixo
     escondem a outra coluna. */
  .matriz-seletor { display: flex; }
  .matriz { min-width: 0; }
  .matriz .matriz__processo { min-width: 0; position: static; }
  .matriz th, .matriz td { padding: 12px 14px; }

  .matriz[data-plano="1"] :is(th, td):nth-child(3),
  .matriz[data-plano="2"] :is(th, td):nth-child(2) { display: none; }

  /* Com uma coluna só, o realce do plano recomendado vira ruído */
  .matriz th.destacada, .matriz td.destacada { background-color: transparent; }

  .proposta { padding: var(--gap-6); }
}

/* =========================================================
   09 · PREFERÊNCIA POR MENOS MOVIMENTO
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .plano,
  .etapa__marca { transition: none; }

  .plano:hover,
  .etapa:hover .etapa__marca { transform: none; }
}

/* =========================================================
   CARDS NO VERDE DA LOGO (temas claro e escuro)
   O fundo destes cards era o verde da marca em transparência
   (renderizado como #e0eaea no tema claro). Agora, nos dois temas, é
   o verde sólido do símbolo da logo (#50aa46, assets/img/logo.png) —
   o mesmo tom, sem variante para o escuro. Sobre o verde, texto e
   ícones passam ao navy do "BPO" (contraste ~5,6:1), redefinindo os
   tokens dentro de cada card para layout, tipografia e componentes
   internos ficarem os mesmos.
   ========================================================= */
.plano--destaque,
.requisito,
.prazos__item {
  --text: #0c2036;
  --text-secondary: rgba(12, 32, 54, 0.82);
  --neutral-400: rgba(12, 32, 54, 0.76);
  --neutral-500: rgba(12, 32, 54, 0.68);
  --neutral-600: rgba(12, 32, 54, 0.52);
  --border: rgba(12, 32, 54, 0.16);
  --border-strong: rgba(12, 32, 54, 0.24);
  --border-accent: rgba(12, 32, 54, 0.4);
  --surface: rgba(255, 255, 255, 0.14);
  --surface-hover: rgba(255, 255, 255, 0.22);
  --accent: #0c2036;
  --accent-hover: #0c2036;
  --accent-tint: rgba(255, 255, 255, 0.26);
  --accent-border: rgba(12, 32, 54, 0.22);
  /* Selos e botões preenchidos dentro do verde: navy com texto branco */
  --accent-fill: #0c2036;
  --on-accent: #ffffff;
  --btn-fill-hover: #021326;
  /* Etiquetas azul/âmbar dentro do verde: os tons escuros que o site
     já usa no tema claro, legíveis sobre o fundo branco delas */
  --info: #1d6fa5;
  --alerta: #b5620f;
  background-color: #50aa46;
  border-color: rgba(12, 32, 54, 0.18);
  color: #0c2036;
}

/* Etiqueta "Nosso BPO": verde da logo sólido */
.resp--bpo {
  background-color: #50aa46;
  color: #0c2036;
  border-color: rgba(12, 32, 54, 0.18);
}
/* Dentro do plano em destaque (já verde), a etiqueta vira um realce
   translúcido para não sumir no fundo */
.plano--destaque .resp--bpo {
  background-color: rgba(255, 255, 255, 0.3);
  border-color: rgba(12, 32, 54, 0.22);
}
/* As etiquetas em azul ("Cliente"), âmbar ("A validar") e neutra
   ("Cliente + BPO") ganham um fundo branco quase opaco no verde */
.plano--destaque .resp--cliente,
.plano--destaque .resp--validar,
.plano--destaque .resp--misto { background-color: rgba(255, 255, 255, 0.88); }
.plano--destaque .resp--misto { color: #0c2036; border-color: rgba(12, 32, 54, 0.22); }
/* Botão do plano em destaque: navy sobre o verde, nos dois temas */
.plano--destaque .btn--secundario {
  background-color: #0c2036;
  border-color: #0c2036;
  color: #ffffff;
}
.plano--destaque .btn--secundario::after { background-color: #021326; }
.plano--destaque .btn--secundario:hover { color: #ffffff; }

/* =========================================================
   COMPARATIVO — FUNDOS ("Quem faz o quê em cada plano")
   Base limpa (branca no claro; navy um pouco elevado no escuro),
   cabeçalho e faixas de seção um tom acima, e a coluna do plano
   recomendado num véu do verde da logo (#50aa46), com fios verdes nas
   laterais e o cabeçalho em verde sólido com texto navy. Substitui o
   --accent-tint, que deixava a coluna com um cinza-esverdeado opaco.
   ========================================================= */
.matriz-wrap {
  --mz-base: color-mix(in srgb, var(--bg) 94%, #ffffff);
  --mz-faixa: color-mix(in srgb, var(--bg) 87%, #ffffff);
  --mz-hover: color-mix(in srgb, var(--bg) 89%, #ffffff);
  --mz-destaque: color-mix(in srgb, #50aa46 10%, var(--bg));
  --mz-destaque-hover: color-mix(in srgb, #50aa46 16%, var(--bg));
  --mz-fio: rgba(80, 170, 70, 0.4);
  background-color: var(--mz-base);
}
:root[data-tema="light"] .matriz-wrap {
  --mz-base: #ffffff;
  --mz-faixa: #f5f7fa;
  --mz-hover: #f1f4f8;
  --mz-destaque: color-mix(in srgb, #50aa46 7%, #ffffff);
  --mz-destaque-hover: color-mix(in srgb, #50aa46 12%, #ffffff);
  --mz-fio: rgba(80, 170, 70, 0.35);
}

.matriz .matriz__processo { background-color: var(--mz-base); }
.matriz thead th,
.matriz thead .matriz__processo,
.matriz__secao th { background-color: var(--mz-faixa); }

.matriz td.destacada {
  background-color: var(--mz-destaque);
  box-shadow: inset 1px 0 0 var(--mz-fio), inset -1px 0 0 var(--mz-fio);
}
.matriz thead th.destacada { background-color: #50aa46; }
.matriz thead th.destacada .matriz__plano-nome { color: #0c2036; }
.matriz thead th.destacada .matriz__plano-tag { color: rgba(12, 32, 54, 0.75); }

.matriz tbody tr:hover td,
.matriz tbody tr:hover .matriz__processo { background-color: var(--mz-hover); }
.matriz tbody tr:hover td.destacada { background-color: var(--mz-destaque-hover); }