/* ═══ Suporte — redesenho (16/09/2026) ═══
   Antes: quatro vídeos soltos em 2×2, cada um repetindo a etiqueta "TUTORIAL",
   sem agrupar por impressora. Agora: atalhos no topo, tutoriais agrupados por
   equipamento com filtro, e um bloco de orientação antes do formulário. */

/* ── atalhos logo abaixo do cabeçalho ────────────────────────────────────── */
html body .acsp-atalhos{width:100%;background:#f5f2eb;padding:0 48px;margin-top:-1px}
/* Sem sobreposição: encavalar os cards no cabeçalho deixava o subtítulo
   colado neles. Agora eles ocupam faixa própria, com respiro acima e abaixo. */
html body .acsp-atalhos{position:relative;z-index:5;padding:clamp(34px,4.6vh,50px) 48px clamp(34px,4.6vh,50px)}
html body .acsp-atalhos-inner{position:relative;z-index:5;max-width:1140px;margin:0 auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
html body .acsp-atalho{display:flex;align-items:center;gap:16px;padding:20px 24px;background:#fff;border:1px solid rgba(207,160,72,.22);border-radius:14px;box-shadow:0 6px 22px rgba(18,52,24,.08);text-decoration:none;transition:transform .32s cubic-bezier(.25,.46,.45,.94),box-shadow .32s,border-color .32s}
html body .acsp-atalho:hover{transform:translateY(-3px);box-shadow:0 14px 36px rgba(18,52,24,.14);border-color:rgba(207,160,72,.5)}
html body .acsp-atalho-ico{width:42px;height:42px;min-width:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(10,67,35,.07);color:#0a4323;transition:background .32s,color .32s}
html body .acsp-atalho:hover .acsp-atalho-ico{background:#0a4323;color:#e7c785}
html body .acsp-atalho-ico svg{width:19px;height:19px}
html body .acsp-atalho-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
html body .acsp-atalho-txt strong{font-family:'Crimson Pro',Georgia,serif;font-size:17px;font-weight:700;color:#0a4323}
html body .acsp-atalho-txt span{font-family:'Outfit',Arial,sans-serif;font-size:13.5px;color:rgba(10,67,35,.6);line-height:1.45}

/* ── tutoriais: filtro por equipamento ───────────────────────────────────── */
html body .acvg-filtros{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;margin:0 auto 34px;max-width:1180px}
html body .acvg-filtro{appearance:none;border:1px solid rgba(10,67,35,.16);background:transparent;border-radius:999px;padding:8px 18px;cursor:pointer;font-family:'Outfit',Arial,sans-serif;font-size:13.5px;font-weight:500;color:rgba(10,67,35,.72);transition:background .3s cubic-bezier(.25,.46,.45,.94),color .3s,border-color .3s,transform .25s}
html body .acvg-filtro:hover,html body .acvg-filtro:focus{background:rgba(207,160,72,.10);border-color:rgba(207,160,72,.6);color:#0a4323;transform:translateY(-1px)}
html body .acvg-filtro:focus-visible{outline:2px solid rgba(207,160,72,.7);outline-offset:2px}
html body .acvg-filtro.is-on,html body .acvg-filtro.is-on:hover,html body .acvg-filtro.is-on:focus{background:#0a4323;border-color:#0a4323;color:#f5f2eb}
html body .acvg-card.esta-fora{display:none !important}

/* grade um pouco mais respirada e cards mais baixos */
html body .acvg-grid{max-width:1180px;margin:0 auto;gap:26px !important}
html body .acvg-card{box-shadow:0 2px 14px rgba(18,52,24,.05) !important}
html body .acvg-info{padding:20px 22px 22px !important}
html body .acvg-card-title{font-size:16.5px !important;line-height:1.34 !important}
html body .acvg-duration-badge{background:rgba(9,37,25,.82) !important;border:1px solid rgba(207,160,72,.4);font-family:'Outfit',Arial,sans-serif !important;font-size:10.5px !important;letter-spacing:.14em !important}

/* ── bloco de orientação antes do formulário ─────────────────────────────── */
html body .acsp-guias{width:100%;background:#fff;border-top:1px solid rgba(207,160,72,.18);padding:clamp(52px,7vh,76px) 48px}
html body .acsp-guias-inner{max-width:1180px;margin:0 auto}
html body .acsp-guias-head{text-align:center;max-width:620px;margin:0 auto 40px}
html body .acsp-guias-tag{display:flex;align-items:center;justify-content:center;gap:12px;margin:0 0 12px;font-family:'Crimson Pro',Georgia,serif;font-size:12.5px;font-style:italic;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:#A48334}
html body .acsp-guias-tag::before,html body .acsp-guias-tag::after{content:'';width:42px;height:2px;flex:none;background:linear-gradient(90deg,rgba(207,160,72,.15),#cfa048)}
html body .acsp-guias-tag::after{background:linear-gradient(270deg,rgba(207,160,72,.15),#cfa048)}
html body .acsp-guias-tit{font-family:'Crimson Pro',Georgia,serif;font-size:clamp(26px,2.7vw,38px);font-weight:700;line-height:1.12;color:#0a4323;margin:0 0 10px}
html body .acsp-guias-tit em{font-style:italic;color:#A48334}
html body .acsp-guias-sub{margin:0;font-family:'Outfit',Arial,sans-serif;font-size:15.5px;line-height:1.6;color:rgba(10,67,35,.64)}
html body .acsp-passos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;counter-reset:passo}
html body .acsp-passo{counter-increment:passo;position:relative;padding:26px 24px 24px;background:#f9f7f2;border:1px solid rgba(207,160,72,.18);border-radius:14px;transition:transform .32s cubic-bezier(.25,.46,.45,.94),border-color .32s}
html body .acsp-passo:hover{transform:translateY(-3px);border-color:rgba(207,160,72,.45)}
html body .acsp-passo::before{content:counter(passo,decimal-leading-zero);display:block;margin-bottom:12px;font-family:'Crimson Pro',Georgia,serif;font-style:italic;font-weight:700;font-size:15px;letter-spacing:.14em;color:#A48334}
html body .acsp-passo strong{display:block;margin-bottom:8px;font-family:'Crimson Pro',Georgia,serif;font-size:17.5px;font-weight:700;line-height:1.2;color:#0a4323}
html body .acsp-passo p{margin:0;font-family:'Outfit',Arial,sans-serif;font-size:14px;line-height:1.6;color:rgba(10,67,35,.66)}

@media (max-width:1024px){
  html body .acsp-atalhos-inner{grid-template-columns:1fr;gap:12px}
  html body .acsp-passos{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  html body .acsp-atalhos,html body .acsp-guias{padding-left:22px;padding-right:22px}
  html body .acsp-passos{grid-template-columns:1fr}
  html body .acvg-filtros{margin-bottom:26px}
}

/* ── grade única (1140px), como no blog e no trabalhe conosco ────────────── */
html body .acvg-grid,
html body .acvg-filtros,
html body .acsp-guias-inner,
html body .acspf-container{max-width:1140px !important;margin-left:auto !important;margin-right:auto !important}

/* ── margem lateral única no celular ─────────────────────────────────────────
   Conviviam dois recuos: 24px no CSS antigo (.acvg-wrap, .acspf-wrap) e 22px
   nas faixas novas (.acsp-atalhos, .acsp-guias). Tudo passa a 22px. */
/* a faixa de tablet vem primeiro e o celular depois: com a mesma especificidade,
   quem aparece por último vence, e antes o 32px estava anulando o 22px. */
@media (min-width:641px) and (max-width:900px){
  html body .acvg-wrap,
  html body .acspf-wrap,
  html body .acsp-atalhos,
  html body .acsp-guias{padding-left:32px !important;padding-right:32px !important}
}
@media (max-width:640px){
  html body .acvg-wrap,
  html body .acspf-wrap,
  html body .acsp-atalhos,
  html body .acsp-guias{padding-left:22px !important;padding-right:22px !important}
}

/* a seção de tutoriais não precisa do respiro cheio: os cards já abriram a página */
/* o paridade-lp.css declara padding 96px !important para .acvg-wrap; sem fixar
   os dois lados aqui, o respiro mudava de tela para tela (0 no desktop, 206 no
   tablet). Passa a seguir o mesmo ritmo do .acsp-guias. */
html body .acvg-wrap{padding-top:clamp(44px,6vh,64px) !important;padding-bottom:clamp(52px,7vh,76px) !important}

/* ── respiro da seção de tutoriais por faixa de largura ──────────────────────
   O paridade-lp.css declara padding 96/80/56px !important para .acvg-wrap dentro
   das próprias media queries. Um clamp solto não vencia nessas faixas, e o espaço
   embaixo dos atalhos ia a ~245px no tablet e no celular, contra 41px no desktop.
   Aqui o valor é declarado dentro das mesmas faixas, para o ritmo ser igual. */
@media (max-width:900px){
  html body .acvg-wrap{padding-top:44px !important;padding-bottom:56px !important}
  html body .acsp-atalhos{padding-top:36px !important;padding-bottom:36px !important}
}
@media (max-width:600px){
  html body .acvg-wrap{padding-top:36px !important;padding-bottom:48px !important}
  html body .acsp-atalhos{padding-top:30px !important;padding-bottom:30px !important}
}