/* =========================================================
   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.
   ========================================================= */

/* --- 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(--verde);
  border: 1px solid var(--verde);
  color: var(--on-verde);
  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ó três 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 {
  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(--verde); color: var(--on-verde); border-color: var(--verde); }
.resp--misto { background-color: var(--surface-hover); color: var(--text); border-color: var(--border-strong); }

/* 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(--verde);
  border: 1px solid var(--verde);
  color: var(--on-verde);
}

.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) {
    /* 11 linhas: as 5 da cabeça do card + UMA POR SERVIÇO (5) + o rodapé. Antes os serviços
       ocupavam uma linha só, então os cards só se alinhavam no começo e no fim do bloco: como o
       Plano 1 lista 4 itens em "Emissão de boletos" e o Plano 2 lista 1, o "Contas a pagar" de um
       começava bem abaixo do do outro. Com uma linha por serviço, cada linha fica com a altura do
       maior dos dois lados e os dois cards passam a casar serviço a serviço. */
    .planos { grid-template-rows: auto auto auto auto auto repeat(5, auto) auto; }

    .plano {
      display: grid;
      grid-row: span 11;
      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; }

    /* 2º nível de subgrid: o bloco de serviços herda as 5 linhas e cada .servico cai na sua.
       Depende de os dois cards terem os MESMOS serviços, na mesma ordem — hoje são 5 em cada. */
    .plano__servicos {
      display: grid;
      grid-row: 6 / span 5;
      grid-template-rows: subgrid;
      row-gap: 0;
    }

    /* margin-top: 0 — o `auto` do layout em coluna empurrava cada rodapé para a base da faixa,
       e como as notas têm alturas diferentes os botões ficavam desalinhados entre os cards. */
    .plano__rodape { grid-row: 11; margin-top: 0; }
  }
}

/* =========================================================
   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(--mz-destaque); }
.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; }

/* =========================================================
   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) {
  /* 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); }

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

@media (max-width: 767.98px) {
  .plano { padding: var(--gap-6); }
  .plano--destaque::before { left: var(--gap-6); right: var(--gap-6); }
  .plano__selo { left: 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 { transition: none; }

  .plano:hover { 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 {
  --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: var(--verde);
  border-color: rgba(12, 32, 54, 0.18);
  color: #0c2036;
}

/* Etiqueta "Nosso BPO": verde da logo sólido */
.resp--bpo {
  background-color: var(--verde);
  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") e neutra ("Cliente + BPO")
   ganham um fundo branco quase opaco no verde */
.plano--destaque .resp--cliente,
.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 realce neutro, com fios no verde da logo (--verde) 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);
  /* Coluna recomendada: realce neutro (o verde não ganha tom translúcido)
     com os fios no verde da logo */
  --mz-destaque: color-mix(in srgb, var(--bg) 82%, #ffffff);
  --mz-destaque-hover: color-mix(in srgb, var(--bg) 78%, #ffffff);
  --mz-fio: var(--verde);
  background-color: var(--mz-base);
}
:root[data-tema="light"] .matriz-wrap {
  --mz-base: #ffffff;
  --mz-faixa: #f5f7fa;
  --mz-hover: #f1f4f8;
  --mz-destaque: #eef2f7;
  --mz-destaque-hover: #e6ecf3;
  --mz-fio: var(--verde);
}

.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: var(--verde); }
.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); }