/* =====================================================================
   pontu.club - paginas de ramo (/para/<nicho>)
   So o que a landing ainda nao tinha: a trilha de navegacao, a caixa da
   conta em reais e a etiqueta de cliente virando link. Todo o resto
   (faixa, tela, rotulo, titulo, grade, cartao, passos, perguntas, tira)
   vem do lp.css, que estas paginas carregam antes deste arquivo.
   ===================================================================== */

/* A trilha ficou acima do h1 e nao pode competir com ele: fonte pequena,
   cor de apoio, e o separador desenhado no ::after para nao virar texto
   que o leitor de tela le em voz alta. */
.trilha { font-size: 13px; color: var(--cinza); margin-bottom: var(--e-4); }
.trilha ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2);
  list-style: none; margin: 0; padding: 0; }
.trilha li { display: inline-flex; align-items: center; gap: var(--e-2); }
.trilha li + li::before { content: "/"; color: var(--cinza-2); }
.trilha a { color: var(--cinza); text-decoration: none; border-bottom: 1px solid var(--linha); }
.trilha a:hover { color: var(--nanquim); border-bottom-color: var(--linha-forte); }
.trilha [aria-current] { color: var(--nanquim); font-weight: 600; }

/* A conta: quatro numeros na horizontal, um por celula, com o ultimo em
   verde porque e o unico que responde "quanto volta para o cliente". */
.conta { display: grid; gap: var(--e-3); margin-top: var(--e-8);
  grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 760px) { .conta { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.conta__cel { background: var(--branco); border: 1px solid var(--linha);
  border-radius: var(--r-lg); padding: var(--e-5); min-width: 0; }
.conta__rot { font-size: 12px; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--cinza); }
.conta__num { margin-top: var(--e-2); font-size: clamp(24px, 3.4vw, 32px);
  font-weight: 700; letter-spacing: -.03em; }
.conta__cel--saida { background: var(--verde-campo); border-color: transparent; }
.conta__cel--saida .conta__num { color: var(--verde-escuro); }
.conta__pe { margin-top: var(--e-2); font-size: 13px; color: var(--tinta-2); }

/* A etiqueta de cliente existe em duas formas: texto (o que o ramo ja
   traz pronto no sistema) e link (os ramos vizinhos). A segunda ganha
   estado de foco visivel, a primeira nao e clicavel. */
/* O indice de ramos: cartao com o nome, a frase e a seta, sem foto --
   a foto e da pagina de destino, e repeti-la aqui dobraria o peso do
   indice sem dizer nada de novo. */
.indice { display: grid; gap: var(--e-4); margin-top: var(--e-8); }
@media (min-width: 700px) { .indice { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .indice { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.indice__item { display: block; text-decoration: none; color: inherit;
  background: var(--branco); border: 1px solid var(--linha); border-radius: var(--r-lg);
  padding: var(--e-6); min-width: 0; transition: border-color var(--tempo) var(--curva); }
.indice__item:hover { border-color: var(--linha-forte); }
.indice__item:focus-visible { outline: 2px solid var(--verde); outline-offset: 2px; }
.indice__item h3 { font-size: 18px; display: flex; align-items: center; gap: var(--e-2); }
.indice__item h3 .ic { color: var(--verde); }
.indice__item p { margin-top: var(--e-2); font-size: 14.5px; color: var(--tinta-2); }

/* Duas campanhas nao cabem bem na grade de tres: a terceira coluna vazia
   faz o par parecer uma lista interrompida. */
.grade--duo { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 620px) { .grade--duo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 940px) { .grade--duo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }