/* =========================================================
   Solução ibp · Azure DevOps — o que esta página acrescenta
   à folha do site da ibp.

   O style.css ao lado é CÓPIA FIEL do de ibpsolutions.com.br.
   Quase tudo aqui são classes NOVAS, usando os tokens de lá
   (--navy, --blue, --ink, --line) — é o que permite plugar esta
   página no site depois sem reconciliar estilo nenhum.

   Há UMA exceção, marcada lá embaixo: o rodapé. Esta página tem
   só a linha de baixo dele, e a margem que o separa das quatro
   colunas do rodapé completo vira uma faixa azul vazia.
   ========================================================= */

/* ------------------------------------------------ o passo a passo */
/* A tela é larga (1800 px de captura) e o texto é estreito: são dois
   ritmos de leitura diferentes. Por isso o texto vem numa faixa curta
   em cima e a imagem ocupa a largura inteira embaixo — e não lado a
   lado, que espremeria a tela até o print ficar ilegível. */
.passos{display:flex;flex-direction:column;gap:84px}
.pa-txt{max-width:780px;position:relative;padding-left:76px}
.pa-n{
  position:absolute;left:0;top:-6px;
  font-size:2.9rem;font-weight:200;line-height:1;
  color:rgba(0,125,198,.30);
}
.pa-txt h3{margin-bottom:.5rem}
.pa-faz{font-size:1.06rem;color:var(--ink);margin-bottom:.7rem}
.pa-porque{color:var(--ink-soft);margin-bottom:0}

.pa-tela{margin:26px 0 0}
.pa-tela img{
  width:100%;height:auto;display:block;border-radius:var(--radius);
  border:1px solid var(--line);
  /* A sombra é o que separa um print de fundo escuro do fundo branco da
     seção. Sem ela a tela parece um buraco na página. */
  box-shadow:0 18px 44px rgba(4,39,64,.16);
}

/* ------------------------------------------------------- as telinhas */
.telinhas{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:26px}
.tl{margin:0}
.tl img{width:100%;height:auto;display:block;border-radius:6px;
  border:1px solid var(--line);box-shadow:0 8px 20px rgba(4,39,64,.10)}
.tl figcaption{font-size:.9rem;color:var(--ink-soft);margin-top:12px;line-height:1.5}
.tl figcaption b{color:var(--ink)}

/* ----------------------------------------------------- o que inclui */
.inc{padding:26px 0 0;border-top:3px solid var(--blue)}
.inc h3{font-size:1.06rem;margin-bottom:.5rem;color:#fff}
.inc p{color:#b9c8d6;margin-bottom:0;font-size:.97rem}

.nao{
  margin-top:56px;padding:34px 38px;border-radius:var(--radius);
  background:rgba(255,255,255,.05);border-left:4px solid var(--amber);
}
.nao h3{font-size:1.06rem;margin-bottom:.9rem;color:#fff}
.nao ul{margin:0 0 1rem;padding-left:1.15rem;color:#b9c8d6}
.nao li{font-size:.97rem}
.nao-pe{color:#8fa5b8;font-size:.9rem;margin-bottom:0}

/* --------------------------------------------- o CTA em duas colunas */
/* O formulário manda; o PDF é a saída para quem ainda não quer falar.
   Por isso 1,55 contra 1, e não meio a meio: meio a meio faria a página
   oferecer duas coisas com o mesmo peso, e quem hesita escolhe a menor. */
.cta2{display:grid;grid-template-columns:1.55fr 1fr;gap:52px;align-items:start}
.cta2-form h2{margin-bottom:.4rem}
.cta2-form .form{margin-top:26px}
.opc{color:var(--ink-soft);font-weight:400;text-transform:none;letter-spacing:0}

.pdf-card{
  background:var(--bg-2);border:1px solid var(--line);
  border-radius:var(--radius);padding:34px 30px;position:sticky;top:104px;
}
.pdf-ic{width:42px;height:42px;color:var(--blue);margin-bottom:16px}
.pdf-card h3{font-size:1.15rem;margin-bottom:.6rem}
.pdf-card p{color:var(--ink-soft);font-size:.97rem}
.pdf-card .button{width:100%;justify-content:center;margin-top:8px}
.pdf-nota{font-size:.84rem;color:var(--ink-soft);margin:14px 0 0}

/* O botão do PDF quando o formulário ainda não tem nome e e-mail: ele não
   fica desabilitado de propósito. Botão apagado não explica nada; este
   clica, rola até o formulário e diz o que falta. */
.pdf-card .button[aria-disabled="true"]{opacity:.75}

/* ---------------------------------------------------------- telefone */
@media (max-width:980px){
  .cta2{grid-template-columns:1fr;gap:38px}
  .pdf-card{position:static}
  .telinhas{grid-template-columns:1fr;gap:30px}
}
@media (max-width:700px){
  .passos{gap:58px}
  .pa-txt{padding-left:0}
  .pa-n{position:static;display:block;margin-bottom:6px}
  .pa-tela img{border-radius:6px}
  .nao{padding:26px 22px}
}

/* ------------------------------------------- a única sobrescrita */
/* O rodapé do site da ibp tem quatro colunas e, embaixo delas, a linha
   com a marca. Aqui só a linha existe — e a margem que a separava das
   colunas virava 48 px de azul vazio acima dela. */
.site-footer{padding-top:34px}
.site-footer .footer-bottom{margin-top:0}