/* ==========================================================================
   A PÁGINA DE SERVIÇOS (uma só: identidade visual e posicionamento)

   Carrega depois de paginas/servico/style.css, que continua sendo a base
   (caixa preta, chapéu, cartões, perguntas). Aqui fica só o que é desta
   página: o número no chapéu de cada seção, o respiro entre as seções e o
   fluxo do estudo em ícones.

   A abertura da página saiu, e com ela os estilos dela: a caixa preta alta
   do topo e os atalhos redondos. A página agora começa no primeiro
   serviço, e é por isso que ele ganhou o respiro que era da abertura.
   ========================================================================== */

/* ---------- cada serviço: uma seção com respiro e a âncora abaixo da barra ---------- */
.servicos .svServico{ padding:34px 0 0; scroll-margin-top:110px; }
/* o primeiro abre a página: o espaço entre ele e a barra do topo é o mesmo
   que a abertura tinha, 26px no computador e 14px no celular, medido na
   tela e não no palpite */
.servicos .svServico:first-of-type{ padding-top:10px; }
.servicos .svServico .svAbre{ padding-bottom:0; }
.servicos .svChapeu__num{
  display:inline-block; background:#000; color:#feec34; border:1px solid #feec34;
  padding:8px 11px; border-radius:30px; margin-right:6px; font-size:11px; letter-spacing:1.5px;
}
/* dentro da seção, os cartões de entrega e o antes/depois usam h3 e h4; mesmo desenho dos títulos da home */
.servicos .svEntregas{ padding-top:64px; padding-bottom:56px; }
.servicos .svEntregas h3.marcaCompleta__titulo{ margin-bottom:12px; }
.servicos .svEntregas h4.entregaCartao__titulo{ margin:0 0 10px; }
.servicos h3.svAntes__titulo{ font-size:44px; }
.servicos .svAntes{ padding-top:0; }

/* ---------- o fluxo do estudo: um ícone por passo ---------- */
.servicos .svFluxo{ background:#000; color:#fff; padding:78px 0 70px; margin-top:26px; }
.servicos .svFluxo .svSecao__titulo{ color:#fff; margin-bottom:40px; }
.servicos .svFluxo__grupo{ margin:0 0 40px; }
.servicos .svFluxo__grupo:last-of-type{ margin-bottom:0; }
.servicos .svFluxo__rotulo{
  margin:0 0 22px; font-family:'Ubuntu','Open Sans',system-ui,sans-serif; font-size:12px; font-weight:700;
  letter-spacing:2.4px; text-transform:uppercase; color:#feec34;
  display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-align:center; -ms-flex-align:center; align-items:center; gap:14px;
}
.servicos .svFluxo__rotulo::after{ content:''; -webkit-box-flex:1; -ms-flex:1; flex:1; border-top:1px dashed #3a3a34; }
.servicos .svFluxo__lista{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:18px 20px;
}
.servicos .svPassoIcone{ margin:0; padding:22px 20px 20px; background:#111; border:1px solid #2b2b2b; border-radius:20px; }
.servicos .svPassoIcone__icone{
  position:relative; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-align:center; -ms-flex-align:center; align-items:center; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center;
  width:64px; height:64px; border-radius:50%; background:#feec34; color:#000; margin:0 0 16px;
}
.servicos .svPassoIcone__icone svg{ width:30px; height:30px; }
.servicos .svPassoIcone__icone i{
  position:absolute; right:-8px; top:-6px; font-style:normal; font-family:'Anton', Impact, sans-serif; font-size:12px; letter-spacing:.5px;
  color:#feec34; background:#000; border:2px solid #feec34; border-radius:20px; padding:3px 7px; line-height:1;
}
.servicos h4.svPassoIcone__titulo{
  font-family:'Anton', Impact, sans-serif; font-weight:400; font-size:19px; line-height:1.12; letter-spacing:.5px;
  text-transform:uppercase; color:#fff; margin:0 0 8px;
}
.servicos .svPassoIcone__texto{ margin:0; font-size:14px; line-height:1.55; color:#cfcfc4; }
.servicos .svFluxo__resultado{
  margin:40px 0 0; padding:26px 28px; border-radius:20px; background:#feec34; color:#000;
  display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-align:center; -ms-flex-align:center; align-items:center; gap:22px;
}
.servicos .svFluxo__resultadoIcone{
  -ms-flex-negative:0; flex-shrink:0; width:64px; height:64px; border-radius:50%; background:#000; color:#feec34;
  display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-align:center; -ms-flex-align:center; align-items:center; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center;
}
.servicos .svFluxo__resultadoIcone svg{ width:30px; height:30px; }
.servicos h4.svFluxo__resultadoTitulo{
  font-family:'Anton', Impact, sans-serif; font-weight:400; font-size:24px; line-height:1.1; letter-spacing:.6px;
  text-transform:uppercase; color:#000; margin:0 0 6px;
}
.servicos .svFluxo__resultado p{ margin:0; font-size:16px; line-height:1.6; color:#111; }

/* ---------- telas menores ---------- */
@media (max-width:980px){
  .servicos .svFluxo__lista{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .servicos h3.svAntes__titulo{ font-size:36px; }
}
@media (max-width:768px){
  .servicos .svServico{ padding-top:22px; scroll-margin-top:90px; }
  .servicos .svServico:first-of-type{ padding-top:22px; }
  .servicos .svEntregas{ padding-top:48px; padding-bottom:40px; }
  .servicos h3.svAntes__titulo{ font-size:32px; }
  .servicos .svFluxo{ padding:56px 0 48px; }
  .servicos .svFluxo__lista{ gap:12px; }
  .servicos .svPassoIcone{ padding:18px 16px 16px; }
  .servicos .svPassoIcone__icone{ width:54px; height:54px; margin-bottom:12px; }
  .servicos .svPassoIcone__icone svg{ width:26px; height:26px; }
  .servicos h4.svPassoIcone__titulo{ font-size:16px; }
  .servicos .svPassoIcone__texto{ font-size:13.5px; }
  .servicos .svFluxo__resultado{ -webkit-box-orient:vertical; -webkit-box-direction:normal; -ms-flex-direction:column; flex-direction:column; -webkit-box-align:start; -ms-flex-align:start; align-items:flex-start; gap:16px; padding:22px 20px; }
}
@media (max-width:480px){
  .servicos .svFluxo__lista{ grid-template-columns:1fr; }
}