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

/* ============================================================
   v4.8 · 09/10/2026 · azul-marinho + dourado, igual a home v43
   (aprovado pelo Calderon). Fundo marinho, dourado de acento,
   blocos brancos de respiro em «Como funciona» e «Pra quem e»
   (classe .branco). Tokens claros so dentro do bloco branco.
   ============================================================ */
:root{
  --papel:#0A1428; --papel-2:#0F1C36; --fio:#24324F;
  --tinta:#F6F1E6; --tinta-2:#C3CADA; --tinta-3:#9AA4BA;
  --azul:#E8BC75; --ouro:#E8BC75; --ouro-2:#F2D49A; --ouro-3:#C5904E;
  --breu:#060D1C; --breu-2:#0F1C36; --breu-fio:#24324F; --breu-texto:#C3CADA;
}
html,body{background:var(--papel);color:var(--tinta)}
header,header.solido,header.aberto{background:rgba(10,20,40,.94);border-bottom:1px solid rgba(232,188,117,.35)}
.logo,header.solido .logo,header.aberto .logo{color:var(--tinta)}
.logo .l2{color:var(--ouro)}
.nav-l a,.ham{color:var(--tinta-2)}
.nav-l a:hover{color:var(--ouro)}
.ham{border-color:var(--fio)}
header.aberto .nav-l{background:var(--papel);border-bottom-color:var(--fio)}
.btn{background:linear-gradient(180deg,#E8BC75,#C5904E);color:#0A1428}
.btn:hover{background:#C5904E}
.btn.ghost{background:transparent;color:var(--tinta);border-color:var(--ouro-3)}
.btn.ghost:hover{background:var(--papel-2)}
.pp-tela{border-color:var(--fio);box-shadow:0 22px 60px rgba(0,0,0,.45)}
.pp-perda{background:var(--breu)}
.pp-secao.claro{background:var(--papel)}
.pp-secao.claro .pp-item{background:var(--papel-2);border-color:var(--fio);border-top:3px solid var(--ouro)}
.caixa{background:var(--papel-2);border:1px solid var(--fio)}
footer{background:var(--breu);color:var(--tinta-2);border-top:1px solid var(--fio)}
.rgrid a:hover{color:var(--ouro)}
.vsel{color:var(--ouro-2)}
::selection{background:#E8BC75;color:#0A1428}

/* bloco branco de respiro */
.pp-secao.branco{
  --papel:#FFFFFF; --papel-2:#F8F4EB; --fio:#E6DCC6;
  --tinta:#0A1428; --tinta-2:#3B4660; --tinta-3:#5A6580; --azul:#9B6B3F;
  background:#FFFFFF; color:var(--tinta);
}
.pp-secao.branco .passos li{background:#FFFFFF}