/* ============================================================
   pagina-produto.css
   Layout comum das paginas de solucao (painel comercial, portais,
   BCX Brain, consultoria). Carrega DEPOIS do site.css.
   ============================================================ */

/* ---- pagina interna nao tem foto escura atras do header:
       ele ja nasce solido, senao o wordmark fica branco no branco ---- */
header{background:rgba(255,255,255,.93);backdrop-filter:blur(14px);border-bottom-color:var(--fio)}
.logo{color:var(--tinta);text-shadow:none}
nav{height:72px}
header.solido nav{height:64px}

/* ---- topo da pagina: texto na esquerda, tela real na direita ---- */
.pp-topo{padding:calc(72px + clamp(36px,5vh,72px)) 0 clamp(48px,7vh,88px)}
.pp-topo .wrap{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(32px,4.5vw,68px);align-items:center}
.pp-topo h1{
  font-size:clamp(34px,4vw,58px);line-height:1.02;letter-spacing:-.038em;font-weight:800;
  text-wrap:balance;margin:14px 0 18px;max-width:16ch;
}
.pp-topo .t2{display:block;color:var(--azul);margin-top:.12em}
.pp-topo .lead{font-size:18px;line-height:1.6;color:var(--tinta-2);max-width:46ch}
.pp-acoes{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.pp-tela{
  border-radius:20px;overflow:hidden;border:1px solid var(--fio);background:var(--papel-2);
  box-shadow:0 20px 54px rgba(11,11,12,.13);
}
.pp-tela img{width:100%;height:auto;display:block}

/* ---- a perda que a solucao fecha: fita que amarra na home ---- */
.pp-perda{background:var(--papel-2);border-top:1px solid var(--fio);border-bottom:1px solid var(--fio)}
.pp-perda .wrap{
  display:flex;flex-wrap:wrap;gap:14px 30px;align-items:baseline;
  padding:26px 40px;
}
.pp-perda b{font-size:19px;font-weight:700;letter-spacing:-.022em}
.pp-perda span{font-size:16px;color:var(--tinta-2)}
.pp-perda a{color:var(--azul);font-weight:600;margin-left:auto;white-space:nowrap;min-height:44px;display:inline-flex;align-items:center}

/* ---- como funciona: passos numerados (aqui numero E informacao, e sequencia) ---- */
.pp-secao{padding:clamp(64px,9vh,104px) 0}
.pp-secao .rot{margin-bottom:12px}
.pp-secao h2{
  font-size:clamp(30px,3.5vw,50px);line-height:1.04;letter-spacing:-.035em;font-weight:800;
  text-wrap:balance;max-width:20ch;margin-bottom:16px;
}
.pp-secao h2 .t2{display:block;color:var(--azul);margin-top:.1em}
.pp-secao > .wrap > .lead{font-size:17.5px;color:var(--tinta-2);max-width:56ch;margin-bottom:44px}

.passos{list-style:none;counter-reset:p;display:grid;gap:1px;background:var(--fio);border:1px solid var(--fio);border-radius:16px;overflow:hidden}
.passos li{
  counter-increment:p;background:var(--papel);padding:26px 28px;
  display:grid;grid-template-columns:44px 1fr;gap:18px;align-items:start;
}
.passos li::before{
  content:counter(p,decimal-leading-zero);
  font-size:13px;font-weight:700;color:var(--azul);letter-spacing:.06em;
  padding-top:3px;font-variant-numeric:tabular-nums;
}
.passos b{display:block;font-size:19px;font-weight:700;letter-spacing:-.022em;margin-bottom:5px}
.passos p{font-size:15.5px;color:var(--tinta-2);line-height:1.5;max-width:64ch}

/* ---- grade de itens (o que voce ve, pra quem e) ---- */
.pp-grade{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.pp-item{
  background:var(--papel);border:1px solid var(--fio);border-radius:16px;padding:26px 24px;
  display:flex;flex-direction:column;gap:9px;
}
.pp-item h3{font-size:18.5px;font-weight:700;letter-spacing:-.022em;line-height:1.25}
.pp-item p{font-size:15px;color:var(--tinta-2);line-height:1.5}
.pp-secao.claro{background:var(--papel-2)}
.pp-secao.claro .pp-item{background:var(--papel)}

/* ---- lista de checagem simples ---- */
.pp-lista{display:grid;gap:0;border-top:2px solid var(--tinta)}
.pp-lista div{
  display:grid;grid-template-columns:minmax(190px,.7fr) 1fr;gap:30px;
  padding:20px 0;border-bottom:1px solid var(--fio);align-items:baseline;
}
.pp-lista b{font-size:17px;font-weight:700;letter-spacing:-.02em}
.pp-lista span{font-size:15.5px;color:var(--tinta-2);line-height:1.5}

@media(max-width:1080px){
  .pp-grade{grid-template-columns:1fr 1fr}
}
@media(max-width:860px){
  .pp-topo{padding-top:calc(72px + 32px)}
  .pp-topo .wrap{grid-template-columns:1fr;gap:30px}
  .pp-topo h1{max-width:none}
  .pp-perda .wrap{padding:22px}
  .pp-perda a{margin-left:0}
  .pp-grade{grid-template-columns:1fr}
  .pp-lista div{grid-template-columns:1fr;gap:6px;padding:16px 0}
  .passos li{grid-template-columns:32px 1fr;gap:12px;padding:22px 20px}
  .pp-secao{padding:56px 0}
}