/* ====== URAH v69: casca (layout largo, faixa fina no topo, cabeçalho que rola, carrossel da home) ======
   Carregado por ÚLTIMO em todas as páginas. Para mudar a largura, mexa só nestas duas variáveis:
   --v69-pad = margem lateral (cresce com a tela, de 20 a 64 px); --v69-max = teto do conteúdo (só telas gigantes). */
:root{--v69-pad:clamp(20px,3.5vw,64px);--v69-max:1440px;--v69-box:calc(var(--v69-max) + 2 * var(--v69-pad))}
/* v75: no computador (a partir de 1025 px) a margem lateral e 5% da largura da tela, igual no Portal de Compras Publicas:
   logo, menu, titulo, textos das secoes e rodape comecam no mesmo x, e os botoes do cabecalho terminam no mesmo x do fim do conteudo.
   Sem teto de largura ate uns 2300 px; acima disso o conteudo para em 2100 px e centraliza (a margem cresce). */
@media (min-width:1025px){:root{--v69-pad:max(5vw,calc((100vw - 2100px) / 2));--v69-box:none}}
/* v73: --v69-max passou de 2000 para 1440 px (so o conteudo, sem as margens). --v69-box = conteudo + margens, usado como max-width dos containers.
   Em 1920 px sobram uns 240 px de cada lado; em 1366 px, 48 px; abaixo de 1025 px nada muda. */

/* ---------- cabeçalho: rola junto, em todas as larguras ---------- */
.h58,.hd{position:relative;top:auto}
.site-header{position:relative;top:auto}
html{scroll-padding-top:16px}
#funcoes,#produtos,#erp,#crm,#licita,#planos,.ptype,.pp section,.cg-mod,.gd-step h2,.mp .gd-step,#fale-com-a-gente,#suporte,#governo{scroll-margin-top:20px}
.cg-toc{top:16px}
@media (min-width:861px) and (min-height:820px){.tg-folha{top:16px}}

/* ---------- layout largo (do computador pequeno para cima; celular e tablet ficam como estão) ---------- */
@media (min-width:1025px){
  :root{--maxw:var(--v69-box)}
  .container,.hero-light .container,.page-hero .container,.cq-sec .container,.pp .container,.hero-light>.container{
    max-width:var(--v69-box);padding-left:var(--v69-pad);padding-right:var(--v69-pad)}
  .h58-in,.hd-in{max-width:var(--v69-box);margin-left:auto;margin-right:auto;padding-left:var(--v69-pad);padding-right:var(--v69-pad)}
  .h58-mega{left:var(--v69-pad);right:var(--v69-pad)}
  .ap-wrap{max-width:var(--v69-box)}
}

/* ====== carrossel da home: 3 ou 4 banners, uma bolinha por banner ======
   Os banners ficam na mesma celula da grade, entao a altura e sempre a do maior (sem salto, CLS 0).
   Sem JavaScript so o primeiro aparece e os controles ficam escondidos. */
.v69-car{position:relative;background:var(--papel2,#f5f7fa);border-bottom:1px solid var(--regua,#d5dbe7)}
.v69-track{display:grid;touch-action:pan-y}
.v69-slide{grid-area:1/1;min-width:0;visibility:hidden;opacity:0;transition:opacity .4s ease,visibility 0s linear .4s}
.v69-slide:first-child,.v69-slide.is-on{visibility:visible;opacity:1;transition:opacity .4s ease}
.v69-car.js .v69-slide:first-child:not(.is-on){visibility:hidden;opacity:0;transition:opacity .4s ease,visibility 0s linear .4s}
.v69-car .bk{border-bottom:0;background:transparent;height:100%;box-sizing:border-box;display:flex;align-items:center}
.v69-car .bk>.container{width:100%}
.v69-car .bk-grid{padding-bottom:44px}
@media (prefers-reduced-motion:reduce){.v69-slide,.v69-slide.is-on{transition:none}}

.v69-ctl{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;gap:6px;height:44px;z-index:3;pointer-events:none}
.v69-ctl[hidden]{display:none}
.v69-ctl>*{pointer-events:auto}
.v69-dots{display:flex;align-items:center;gap:0}
.v69-dot{position:relative;width:32px;height:44px;padding:0;border:0;background:none;cursor:pointer}
.v69-dot::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:#b8c4dd;transition:background .2s,transform .2s}
.v69-dot:hover::after{background:#8fa2cc}
.v69-dot[aria-current="true"]::after{background:#1f4bb8;transform:scale(1.15)}
.v69-dot:focus-visible{outline:2px solid #1f4bb8;outline-offset:-2px;border-radius:4px}


/* desenho dos banners 2 em diante: o mesmo do primeiro (texto a esquerda, folha a direita) */
.v69-h{margin:0 0 14px;max-width:560px;font-family:var(--display,"Archivo",sans-serif);font-stretch:87.5%;font-weight:700;color:#13203f;
  font-size:clamp(1.9rem,3vw,2.6rem);line-height:1.12;letter-spacing:-.01em}
.v69-lead{margin:0 0 20px;max-width:540px;color:var(--sec,#4a5470);font-size:1.05rem;line-height:1.55}
.v69-bn .bk-cta .btn{padding:12px 22px}
.v69-funil{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;background:#fff}
.v69-col{padding:12px;border-right:1px solid var(--regua,#d5dbe7);min-height:210px}
.v69-col:last-child{border-right:0}
.v69-col h3{margin:0 0 10px;padding:6px 8px;background:var(--celula,#eaf0fb);font:600 .78rem/1.2 var(--font);color:#13203f;border-radius:4px}
.v69-card{margin:0 0 8px;padding:10px;border:1px solid var(--regua,#d5dbe7);border-radius:4px;background:#fff}
.v69-card.on{background:#f4f7fd;border-color:#1f4bb8}
.v69-card b{display:block;font-size:.86rem;font-weight:600;color:#13203f;line-height:1.3}
.v69-card span{display:block;margin-top:2px;font-size:.76rem;color:var(--sec,#4a5470)}
.v69-lista{list-style:none;margin:0;padding:0;background:#fff}
.v69-lista li{padding:12px 16px;border-bottom:1px solid var(--regua,#d5dbe7)}
.v69-lista li:last-child{border-bottom:0}
.v69-lista b{display:block;font-weight:600;font-size:.95rem;color:#13203f}
.v69-lista span{display:block;margin-top:2px;font-size:.84rem;color:var(--sec,#4a5470)}
.v69-links a{display:block;color:inherit;text-decoration:none;margin:-12px -16px;padding:12px 16px;min-height:44px}
.v69-links a:hover b{color:#1f4bb8;text-decoration:underline;text-underline-offset:3px}
.v69-viz figcaption{padding:8px 16px;font-size:.76rem;color:var(--sec,#4a5470);background:#fff}

@media (max-width:1024.98px){
  .v69-car .bk{align-items:flex-start}
}
@media (max-width:767.98px){
  .v69-car .bk{padding:24px 0 0}
  .v69-car .bk-grid{display:flex;flex-direction:column;gap:20px;padding-bottom:52px}
  .v69-bn .bk-text{display:block}
  .v69-h{font-size:30px;line-height:1.12;margin:0 0 14px}
  .v69-lead{font-size:17px;line-height:1.45;margin:0 0 16px;max-width:30em}
  .v69-bn .bk-cta{display:block}
  .v69-bn .bk-cta .btn{width:100%;min-height:48px;font-size:16px;text-align:center;display:flex;align-items:center;justify-content:center}
  .v69-bn .bk-small{font-size:14px;line-height:1.4;margin:10px 0 0}
  .v69-funil{grid-template-columns:1fr}
  .v69-col{min-height:0;border-right:0;border-bottom:1px solid var(--regua,#d5dbe7)}
  .v69-col:last-child{border-bottom:0}
  .v69-card{margin:0}
  .v69-col .v69-card+.v69-card{margin-top:8px}
  .v69-viz figcaption{padding:8px 12px;font-size:13px;line-height:1.4}
}

/* botao de pausar/retomar a troca automatica */
.v69-pause{position:relative;width:44px;height:44px;border:1px solid var(--regua,#d5dbe7);border-radius:4px;background:#fff;cursor:pointer;margin-left:6px}
.v69-pause::before,.v69-pause::after{content:"";position:absolute;top:50%;width:3px;height:14px;margin-top:-7px;background:#13203f}
.v69-pause::before{left:50%;margin-left:-6px}
.v69-pause::after{left:50%;margin-left:3px}
.v69-pause[aria-pressed="true"]::before{width:0;height:0;margin:-8px 0 0 -4px;background:none;border-left:13px solid #13203f;border-top:8px solid transparent;border-bottom:8px solid transparent}
.v69-pause[aria-pressed="true"]::after{display:none}
.v69-pause:hover{background:#eaf0fb}
.v69-pause:focus-visible{outline:2px solid #1f4bb8;outline-offset:-2px}
@media (min-width:768px){.v69-pause{position:absolute;top:0;right:16px;margin:0}}
@media (max-width:767.98px){
  .v69-ctl{top:0;bottom:auto;justify-content:flex-start;padding:0 16px}
  .v69-car .bk{padding-top:52px}
  .v69-car .bk-grid{padding-bottom:20px}
  .v69-pause{margin-left:auto}
}

/* ---------- acertos do layout largo (computador) ---------- */
@media (min-width:1025px){
  .tg-foto{max-width:760px}
  .ct-flow{max-width:none}
  .page-hero h1,.page-hero--dark h1{max-width:1100px}
}
/* texto corrido nunca passa de uns 75 caracteres por linha */
.article>p,.article>ul,.article>ol,.article>h2,.article>h3,.article>blockquote{max-width:75ch}
.lg-doc{max-width:75ch}
main p{overflow-wrap:break-word}
@media (min-width:1025px){
  .ck-body .container{max-width:var(--v69-box)}
  .ck-body .container>*{max-width:820px}
}

/* ====== banner 1 (Renan), v73: texto a esquerda, foto grande a direita ancorada na base, arco de contorno fino atras ======
   Variante A (v73-a, padrao): arco azul de linha fina atras da foto. Variante B (v73-b): bloco azul cheio integrado, como no v71. */
.v69-fotobn{position:relative;overflow:hidden}
.v69-fotobn .bk-text{max-width:660px}
.v69-fotobn .v69-h{max-width:none;margin:0 0 18px;font-size:clamp(30px,16.8px + 1.625vw,48px);line-height:1.1;letter-spacing:-.012em}
.v69-fotobn .v69-h span{display:block}
.v69-fotobn .v69-lead{max-width:30em;margin:0 0 22px;font-size:clamp(16px,.9vw + 5px,18px);line-height:1.55;color:#3b4560}
.v73-cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.v73-cta .btn{padding:12px 22px;min-height:48px}
.v73-sec{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;box-sizing:border-box;border:1.5px solid #1f4bb8;border-radius:4px;background:transparent;color:#1f4bb8;font:600 1rem/1.2 var(--display,"Archivo",sans-serif);text-decoration:none}
.v73-sec:hover{background:#eaf0fb}
.v73-sec:focus-visible{outline:2px solid #1f4bb8;outline-offset:2px}
.v73-chips{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 0;padding:0;list-style:none}
.v73-chips li{position:relative;padding:6px 14px 6px 32px;border-radius:999px;background:#e4f2ec;color:#13203f;font:500 .875rem/1.3 var(--font,"Public Sans",sans-serif)}
.v73-chips li::before{content:"";position:absolute;left:13px;top:50%;width:5px;height:9px;margin-top:-6px;border:solid #1f7a4d;border-width:0 2px 2px 0;transform:rotate(40deg)}

/* a foto: container de medidas; a altura da foto vem da altura do banner (140%), limitada pela largura.
   Atras dela, so uma decoracao de linha fina feita com o simbolo da URAH (sem preenchimento). */
.v69-foto{position:absolute;z-index:1;top:0;bottom:0;right:0;left:50%;width:auto;height:auto;margin:0;overflow:hidden;container-type:size;pointer-events:none}
.v73-stage{--hp:min(140cqh,125cqw);position:absolute;height:var(--hp);aspect-ratio:2/3;right:var(--v75-fr,max(var(--v69-pad),calc(100cqw - 720px)));top:calc(24cqh - var(--hp)*.03)}
.v69-ph{position:absolute;z-index:2;left:0;top:0;width:100%;height:100%;max-width:none;display:block;border-radius:0!important}
.v73-deco{position:absolute;left:-37%;top:-6%;width:75%;height:61%;z-index:1;max-width:none;overflow:visible}
.v73-deco *{fill:none;stroke:#1f4bb8;stroke-opacity:.5;stroke-width:1.5;stroke-linejoin:miter;vector-effect:non-scaling-stroke}
@media (max-width:960px){
  .v69-fotobn{display:flex;flex-direction:column}
  .v69-fotobn>.bk-grid{flex:1;display:flex;flex-direction:column;align-items:stretch;gap:20px}
  .v69-fotobn .bk-text{max-width:none;display:block}
  .v69-foto{position:relative;left:auto;right:auto;top:auto;bottom:auto;flex:1;min-height:420px;width:100%;margin:0}
  .v73-stage{right:auto;left:50%;transform:translateX(-50%);top:auto;bottom:0;height:min(100cqh,128cqw)}
}
@media (max-width:767.98px){
  .v69-fotobn .v69-h{font-size:30px;line-height:1.12}
  .v69-fotobn .v69-h span{display:inline}
  .v69-fotobn .v69-lead{font-size:17px;line-height:1.45}
  .v73-cta{display:block}
  .v73-cta .btn,.v73-sec{display:flex;width:100%;min-height:48px;font-size:16px}
  .v73-sec{margin-top:12px;background:#fff}
  .v73-chips{margin-top:16px}
  .v73-chips li{font-size:14px}
  .v69-foto{width:100vw;margin:0 calc(50% - 50vw)}
  .v73-deco *{stroke-opacity:.38}
  .v73-deco{top:0}
}

/* faixa de apoio, logo abaixo do carrossel: uma linha de planilha, tres celulas, so fatos que ja estao no site */
.v73-apoio{background:#fff;border-bottom:1px solid var(--regua,#d5dbe7)}
.v73-apoio-l{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:0;margin-bottom:0;padding-top:0;padding-bottom:0;list-style:none}
.v73-apoio-l li{padding:16px 24px;border-left:1px solid var(--regua,#d5dbe7)}
.v73-apoio-l li:first-child{border-left:0;padding-left:0}
.v73-apoio-l b{display:block;font:700 1.05rem/1.25 var(--display,"Archivo",sans-serif);font-stretch:87.5%;color:#13203f}
.v73-apoio-l span{display:block;margin-top:3px;font-size:.92rem;line-height:1.4;color:var(--sec,#4a5470)}
@media (max-width:767.98px){
  .v73-apoio-l{grid-template-columns:1fr}
  .v73-apoio-l li,.v73-apoio-l li:first-child{padding:12px 0;border-left:0;border-top:1px solid var(--regua,#d5dbe7)}
  .v73-apoio-l li:first-child{border-top:0}
}

/* ====== v70 (26/10/2026) ====== */
/* "Pular para o conteudo": fica fora da tela e aparece quando recebe o foco do teclado */
.v70-pular{position:absolute;left:8px;top:-200px;z-index:1000;display:inline-flex;align-items:center;min-height:44px;padding:0 16px;
  background:#1f4bb8;color:#fff;font:600 15px/1.2 "Public Sans",system-ui,sans-serif;text-decoration:none;border-radius:4px}
.v70-pular:focus{top:8px;outline:2px solid #13203f;outline-offset:2px}
main[tabindex="-1"]:focus{outline:none}
/* area de toque de 44 px no logo do cabecalho e no e-mail do /contato, sem mudar o desenho */
.h58-brand{min-width:44px;min-height:44px}
main a[href^="mailto:"]{display:inline-block;padding:13px 0;margin:-13px 0}
/* /blog no celular: os filtros nao passam da borda direita */
@media (max-width:767.98px){
  .mp-blog .bl-filters{margin:0 calc(-1 * var(--v70-gut,16px));padding:0 var(--v70-gut,16px) 4px;scroll-padding-left:var(--v70-gut,16px)}
}
/* pagina 404 */
.v70-404-sec{padding:56px 0 72px;background:var(--papel2,#f5f7fa);border-bottom:1px solid var(--regua,#d5dbe7)}
.v70-404-cod{margin:0 0 8px;font:600 14px/1.3 "Public Sans",system-ui,sans-serif;color:#1f4bb8;letter-spacing:.02em}
.v70-404 h1{margin:0 0 12px;font-family:var(--display,"Archivo",sans-serif);font-stretch:87.5%;font-weight:700;color:#13203f;font-size:clamp(1.9rem,3vw,2.6rem);line-height:1.12}
.v70-404-lead{margin:0 0 24px;max-width:560px;color:var(--sec,#4a5470);font-size:1.05rem;line-height:1.55}
.v70-404-links{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;max-width:1100px}
.v70-404-links a{display:block;min-height:44px;height:100%;box-sizing:border-box;padding:16px;border:1px solid var(--regua,#d5dbe7);border-radius:4px;background:#fff;color:#13203f;text-decoration:none}
.v70-404-links a:hover{border-color:#1f4bb8}
.v70-404-links a:hover b{color:#1f4bb8;text-decoration:underline;text-underline-offset:3px}
.v70-404-links a:focus-visible{outline:2px solid #1f4bb8;outline-offset:2px}
.v70-404-links b{display:block;font-weight:600;font-size:1rem}
.v70-404-links span{display:block;margin-top:4px;font-size:.9rem;color:var(--sec,#4a5470)}
@media (max-width:1024.98px){.v70-404-links{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:767.98px){.v70-404-sec{padding:32px 0 40px}.v70-404 h1{font-size:30px}.v70-404-links{grid-template-columns:1fr}}

/* v73: no computador, o botao de pausar acompanha a margem do conteudo */
@media (min-width:1025px){.v69-pause{right:var(--v69-pad)}}
/* v73: a regua de cima do rodape acompanha o conteudo (antes ia de ponta a ponta do container) */
@media (min-width:1025px){.site-footer .f6-bottom{border-top:0!important;background:linear-gradient(var(--regua,#d5dbe7),var(--regua,#d5dbe7)) center top/calc(100% - 2 * var(--v69-pad)) 1px no-repeat}}

/* ====== v75 (26/10/2026): alinhamento ao Portal de Compras Publicas + tirinha de atendimento ======
   Medidas do portal (CSS px, DM Sans): titulo 32/41.6 peso 700, paragrafo 16/24, chips 15/18 peso 700, menu 16.
   Coluna de texto do hero com 600 px. So do computador pequeno para cima; abaixo de 1025 px nada muda. */
@media (min-width:1025px){
  .v69-fotobn .bk-text{max-width:600px}
  .v69-fotobn .v69-h{font-size:36px;line-height:1.3;letter-spacing:0;margin-bottom:16px}
  .v69-fotobn .v69-lead{max-width:600px;font-size:16px;line-height:1.5}
  .v73-chips li{font-size:15px;line-height:18px;font-weight:700}
  .v73-chips{gap:10px}
  .v73-stage{--v75-fr:var(--v69-pad)}
  .site-footer .brand-logo{margin-left:-6.5px;max-width:none}
}
/* a figura da logo tem um respiro transparente de 4,6% a esquerda: compensa para a FIGURA alinhar com a 1a letra do titulo */
@media (min-width:1280px){.h58-brand img{margin-left:-5.8px;max-width:none}.h58-link,.h58-trig{font-size:16px}.h58-login{display:none}}
@media (min-width:1025px) and (max-width:1279.98px){.h58-brand img{margin-left:-5.1px;max-width:none}}

/* tirinha de atendimento (acima do cabecalho, rola junto) */
.v75-faixa{background:#e4eefc;color:#1f4bb8;font:500 14px/1.3 var(--font,"Public Sans",system-ui,sans-serif);border-bottom:1px solid #d3e0f6}
.v75-faixa-in{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;padding:0 16px;box-sizing:border-box}
@media (min-width:1025px){.v75-faixa-in{padding:0 var(--v69-pad)}}
.v75-faixa a{text-decoration:none}
.v75-esq{display:flex;align-items:center;gap:8px 28px;min-width:0}
.v75-hor{display:flex;align-items:center;gap:8px;margin:0}
.v75-faixa svg{flex:0 0 auto;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.v75-tel{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:#1f4bb8;font-weight:600;white-space:nowrap;border-radius:4px}
.v75-tel:hover{text-decoration:underline;text-underline-offset:3px}
.v75-login{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:0 20px;border-radius:999px;background:#13203f;color:#fff;
  font:700 14px/1 var(--font,"Public Sans",system-ui,sans-serif);letter-spacing:.02em;text-transform:uppercase;white-space:nowrap}
.v75-login:hover{background:#1f4bb8}
.v75-login svg{width:18px;height:18px}
.v75-faixa a:focus-visible{outline:2px solid #13203f;outline-offset:2px}
@media (max-width:1024.98px){.v75-hor{font-size:13px}}
@media (max-width:767.98px){
  .v75-hor{display:none}
  .v75-faixa-in{min-height:56px;padding:6px 16px}
  .v75-login{min-height:44px;padding:0 18px;font-size:14px}
  .v75-tel{font-size:15px}
}

/* ====== v77 (26/10/2026): banner 1 no desenho do ComprasBR ======
   Medidas do ComprasBR (CSS px): foto ocupa 100% da altura do hero (525 px em 1920), texto centralizado na vertical,
   botoes 154 x 44,5 (padding 10 20, fonte 15), espaco entre botoes 20, paragrafo a 16 px dos botoes;
   logo 200 x 39, cabecalho de 80 px, menu a 24 px da logo (texto). */
@media (min-width:961px){
  /* texto no meio da altura do banner (a faixa das bolinhas, 44 px, fica fora: o respiro de cima e de baixo e igual) */
  .v69-car .v69-fotobn{align-items:center}
  .v69-fotobn .bk-grid{padding-top:44px;padding-bottom:44px}
  /* foto: cabeca a uns 10% do topo, corpo cortado pela borda de baixo; a margem transparente da direita (5,1%) sai para fora
     para o corpo terminar no fim do conteudo, na mesma linha do botao do cabecalho */
  .v73-stage{--hp:max(min(115cqh,125cqw),93cqh);--rt:calc(var(--v75-fr,max(var(--v69-pad),calc(100cqw - 720px))) - var(--hp)*.034);top:8cqh;right:var(--rt)}
  /* o desenho do simbolo acompanha o tamanho da foto e nunca passa da borda esquerda da coluna */
  .v73-deco{left:max(calc(var(--hp)*-.347),calc(var(--hp)*.667 + var(--rt) - 100cqw));top:-4%;width:100%;height:78%}
}
/* botoes do banner 1 com a medida do ComprasBR (altura 44,5; padding 10/20; espaco 20; paragrafo a 16 px) */
@media (min-width:768px){
  .v69-fotobn .v69-lead{margin-bottom:16px}
  .v73-cta{gap:20px}
  .v73-cta .btn,.v73-sec{box-sizing:border-box;min-height:0;height:auto;padding:10px 20px;border-width:1px;font-size:15px;line-height:22.5px}
  .v73-sec{border-style:solid}
}
/* celular e tablet: texto centralizado em cima, foto grande embaixo ancorada na base */
@media (max-width:960px){
  .v69-fotobn .bk-text{text-align:center}
  .v69-fotobn .v69-lead{margin-left:auto;margin-right:auto}
  .v73-cta{justify-content:center}
  .v73-chips{justify-content:center}
}
/* cabecalho de 80 px, logo de 40 px de altura (158 x 40) e menu a 24 px da logo, como no ComprasBR (so do computador pequeno para cima) */
@media (min-width:1025px){
  .h58-in{height:79px}
  .h58-list{height:79px}
  .h58-brand img{height:40px}
  .h58-nav{margin-left:12px}
}
@media (min-width:1280px){.h58-brand img{margin-left:-7.3px}}
@media (min-width:1025px) and (max-width:1279.98px){.h58-brand img{margin-left:-6.4px}}

/* ====== v78 (26/10/2026): primeira tela enxuta, no desenho do ComprasBR ======
   Celular (ate 767 px): tirinha de 44 px, cabecalho de 56 px com logo maior e menu hamburguer, banner 1 centralizado com titulo,
   paragrafo, dois botoes lado a lado, chips e a foto cheia embaixo (altura de 92% da largura, ancorada na base).
   O carrossel do celular tem a altura do banner que esta na tela (os outros ficam fora do fluxo) e so troca por toque ou bolinha,
   entao nenhuma troca sozinha empurra o conteudo (CLS 0). Computador e tablet: sem mudanca. */
.v78-c{display:none}
@media (max-width:767.98px){
  /* tirinha */
  .v75-faixa{font-size:13px}
  .v75-faixa-in{min-height:44px;padding:0 16px}
  .v75-tel{font-size:14px;min-height:44px}
  .v75-login{min-height:44px;padding:0 14px;border-block:5px solid transparent;background-clip:padding-box;font-size:13px;gap:6px}
  .v75-login svg{width:16px;height:16px}
  /* cabecalho */
  .h58-in{height:56px}
  .h58-brand img{height:34px}
  .h58-menubtn{font-size:0;padding:0;width:44px;min-width:44px;position:relative}
  .h58-menubtn::before{content:"";width:20px;height:14px;background:linear-gradient(currentColor,currentColor) 0 0/100% 2px no-repeat,linear-gradient(currentColor,currentColor) 0 50%/100% 2px no-repeat,linear-gradient(currentColor,currentColor) 0 100%/100% 2px no-repeat}
  .h58-sheet-top{height:56px}

  /* carrossel com a altura do banner da vez */
  .v69-track{display:block;position:relative;overflow:hidden}
  .v69-slide{position:absolute;left:0;top:0;width:100%;grid-area:auto}
  .v69-slide:first-child,.v69-slide.is-on{position:relative}
  .v69-car.js .v69-slide:first-child:not(.is-on){position:absolute}
  .v69-ctl{top:auto;bottom:8px;left:50%;right:auto;width:auto;transform:translateX(-50%);justify-content:center;padding:0 6px;background:rgba(255,255,255,.94);border-radius:999px;box-shadow:0 1px 4px rgba(19,32,63,.2)}
  .v69-pause{display:none}
  .v69-car .bk{padding-top:14px}
  .v69-car .bk-grid{padding-bottom:60px;gap:14px}

  /* banner 1 */
  .mp-home .v69-car .v69-fotobn{display:block;padding:14px 0 0}
  .mp-home .v69-car .v69-fotobn>.bk-grid{display:block;padding:0}
  .v69-fotobn .bk-text{text-align:center}
  .v69-fotobn .v69-h{font-size:32px;line-height:1.1;margin:0 0 8px}
  .v69-fotobn .v69-lead{font-size:16px;line-height:1.4;margin:0 auto 14px}
  .v78-l{display:none}
  .v78-c{display:inline}
  .v73-cta{display:flex;flex-wrap:nowrap;justify-content:center;gap:8px}
  .mp-home .v69-car .v73-cta .btn,.v73-sec{width:auto;flex:0 1 auto;box-sizing:border-box;height:44px;min-height:44px;margin:0;padding:0 16px;font-size:15px;line-height:1}
  .v73-chips{margin:12px 0 0;gap:6px;justify-content:center}
  .v73-chips li{padding:4px 10px 4px 27px;font-size:13px;line-height:1.3}
  .v73-chips li::before{left:11px}
  .v69-foto{flex:none;width:100vw;height:92vw;max-height:440px;min-height:0;margin:8px calc(50% - 50vw) 0}
  .v73-stage{height:150cqh;width:auto;aspect-ratio:2/3;left:50%;right:auto;top:2cqh;bottom:auto;transform:translateX(-50%)}
}
/* v78: a faixa "Em resumo" ficava ACIMA do banner no celular (sem ordem definida); passa a vir logo abaixo dele */
@media (max-width:767.98px){.mp-home main>.v73-apoio{order:1}}
/* v78: bolinhas do carrossel com area de toque de 44 x 44 no celular */
@media (max-width:767.98px){.v69-dot{width:44px}}

/* ====== v79 (26/10/2026): COMPUTADOR (a partir de 1025 px) no desenho CENTRALIZADO do ComprasBR. O celular (ate 767 px) nao muda aqui. ======
   Medidas do ComprasBR: container de 1140 (de 1200 a 1399 px de tela) ou 1320 (a partir de 1400), centralizado, com 12 px de respiro;
   logo em x = (tela - container)/2 + 12 (1366: 125; 1920: 312), centralizada na barra de 80 px; tirinha de 39 px; hero recuado de 1/12 do
   container (95 px em 1140, 110 em 1320), texto em 5/12; foto com centro a 67% da largura da tela; hero de 450 a 525 px.
   Aqui o container tem 960 px de 1025 a 1199. Isto SUBSTITUI a margem de 5% do v75. */
.v79-cards{display:none}
@media (min-width:1025px){
  :root{--v78-wc:960px;--v69-pad:calc((100vw - var(--v78-wc)) / 2 + 12px);--v69-box:none;--v78-rec:calc(var(--v78-wc) / 12);--v78-k:1.2}
  /* banner = o menor entre 525 px e (altura da janela - tirinha 40 - cabecalho 80 - 48), minimo 440 */
  :root{--v78-bh:clamp(440px,calc(100vh - 168px),525px)}
  .v75-faixa-in{min-height:39px}
  .v75-tel{min-height:39px}
  .v75-login{min-height:34px;padding:0 16px;font-size:13px}
  .v75-login svg{width:16px;height:16px}
  .v69-track{height:var(--v78-bh);grid-template-rows:minmax(0,1fr);overflow:hidden}
  .v69-slide{min-height:0;overflow:hidden}
  .v69-ctl{position:relative;left:auto;right:auto;bottom:auto}
  .v69-car .bk-grid,.v69-fotobn .bk-grid{padding-top:0;padding-bottom:0}
  .v69-car .bk>.container{padding-left:calc(var(--v69-pad) + var(--v78-rec));padding-right:calc(var(--v69-pad) + var(--v78-rec))}
  /* banner 1: texto em 5/12 do container, centralizado na vertical, sem os chips (os fatos vao para os cartoes) */
  .v69-fotobn .bk-text{max-width:calc(var(--v78-wc) * 5 / 12 - 24px)}
  .v69-fotobn .v69-lead{max-width:none}
  .v73-chips{display:none}
  /* foto: centro a 67% da largura da tela, altura de 1,2 a 1,4 vez a do banner (cabeca a 9% do topo, corpo cortado na base) */
  .v69-fotobn .v73-stage{--hp:calc(var(--v78-bh) * var(--v78-k));position:absolute;height:var(--hp);width:auto;aspect-ratio:2/3;right:auto;transform:none;
    left:calc(17vw - var(--hp) / 3);top:calc(var(--v78-bh) * .09 - var(--hp) * .0225)}
  .v69-fotobn .v73-deco{left:-45%;top:-2%;width:90%;height:70%}
}
@media (min-width:1200px){:root{--v78-wc:1140px;--v78-k:1.29}}
@media (min-width:1400px){:root{--v78-wc:1320px}}
/* tres cartoes brancos a direita do Renan (de 1200 px para cima), no estilo dos do ComprasBR: gap 16, altura 78 */
@media (min-width:1200px){
  .v79-cards{display:flex;flex-direction:column;justify-content:center;gap:16px;margin:0;padding:0;list-style:none;position:absolute;z-index:3;top:0;bottom:0;width:190px;
    left:calc(17vw + var(--v78-bh) * var(--v78-k) * .13)}
  .v79-cards li{box-sizing:border-box;height:78px;padding:0 14px;display:flex;flex-direction:column;justify-content:center;gap:5px;border:1px solid #e3e8f2;border-radius:8px;background:#fff;box-shadow:0 6px 18px rgba(19,32,63,.12)}
  .v79-cards span{font:600 10px/1.2 var(--font,"Public Sans",system-ui,sans-serif);letter-spacing:.04em;text-transform:uppercase;color:#4a5470;white-space:nowrap}
  .v79-cards b{font:700 19px/1.15 var(--display,"Archivo",sans-serif);font-stretch:87.5%;color:#1f4bb8;white-space:nowrap}
}
@media (min-width:1025px){
  .v69-slide>.bk{height:100%;box-sizing:border-box}
  .v69-car .bk>.container.bk-grid{height:100%;align-items:center;box-sizing:border-box}
  .v69-fotobn .v69-h{font-size:36px;line-height:1.3;margin:0 0 16px}
  .v69-fotobn .v69-lead{margin:0 0 16px;font-size:16px;line-height:1.5}
  .v69-fotobn .v73-cta{margin:0;gap:20px}
  .v69-fotobn .v73-cta .btn,.v69-fotobn .v73-sec{height:44.5px;min-height:44.5px;padding:10px 20px;border-radius:4px;box-sizing:border-box;font-size:15px;display:inline-flex;align-items:center;justify-content:center;margin:0}
}
@media (min-width:1025px) and (max-height:719px){.v69-fotobn .v69-h{font-size:34px}}
@media (min-width:1200px){.v69-fotobn .v73-cta{flex-wrap:nowrap;width:max-content;max-width:none}}

/* v79: a faixa das bolinhas ja ocupa o lugar (44 px) antes do JS mostrar, entao nada desce na carga (CLS 0) */
@media (min-width:1025px){.v69-ctl[hidden]{display:flex;visibility:hidden;height:44px}}

/* ====== v80 (26/10/2026), SO COMPUTADOR (1025 px para cima): banner 1 com o titulo e o paragrafo no tamanho do ComprasBR
   (titulo 44,8 px peso 700 entrelinha 1,2; paragrafo 16/24) e a foto do Renan uns 17% maior (cabeca a 5% do topo, centro a 67%). Celular nao muda. ====== */
@media (min-width:1025px){
  :root{--v78-k:1.4}
  .v69-fotobn .v69-h{font-size:44.8px;line-height:1.2;letter-spacing:0;margin:0 0 16px}
  .v69-fotobn .v69-lead{font-size:16px;line-height:24px;margin:0 0 16px}
  .v69-fotobn .v73-stage{--hp:min(calc(var(--v78-bh) * var(--v78-k)), 62vw);top:calc(var(--v78-bh) * .05 - var(--hp) * .0225)}
}
@media (min-width:1200px){:root{--v78-k:1.51}}
/* janela muito baixa (banner no minimo de 440 px): reduz um pouco o titulo, em proporcao */
@media (min-width:1025px) and (max-height:559px){.v69-fotobn .v69-h{font-size:40px}}

/* ====== URAH v82 (27/10/2026): banner 1 no notebook pequeno (1025 a 1199 px) = o desenho de 1200 px em escala.
   Os tres cartoes brancos aparecem ao lado do Renan (largura, altura e letra proporcionais a largura da tela: 190 x 78 em 1200)
   e os dois botoes ficam lado a lado (letra 14, respiro lateral 16, espaco 16, altura 44,5).
   So o banner 1 (#v69-s1); 1200 px para cima e 1024 px para baixo nao mudam. ====== */
@media (min-width:1025px) and (max-width:1199.98px){
  #v69-s1 .v73-cta{flex-wrap:nowrap;width:max-content;max-width:none;gap:16px}
  #v69-s1 .v73-cta .btn,#v69-s1 .v73-sec{padding:10px 16px;font-size:14px;white-space:nowrap}
  #v69-s1 .v79-cards{--v82-hp:min(calc(var(--v78-bh) * var(--v78-k)), 62vw);
    display:flex;flex-direction:column;justify-content:center;gap:1.33vw;margin:0;padding:0;list-style:none;position:absolute;z-index:3;top:0;bottom:0;
    width:15.84vw;left:calc(17vw + var(--v82-hp) * .138)}
  #v69-s1 .v79-cards li{box-sizing:border-box;height:6.5vw;padding:0 1.17vw;display:flex;flex-direction:column;justify-content:center;gap:.42vw;border:1px solid #e3e8f2;border-radius:8px;background:#fff;box-shadow:0 6px 18px rgba(19,32,63,.12)}
  #v69-s1 .v79-cards span{font:600 max(9px,.84vw)/1.2 var(--font,"Public Sans",system-ui,sans-serif);letter-spacing:.04em;text-transform:uppercase;color:#4a5470;white-space:nowrap}
  #v69-s1 .v79-cards b{font:700 1.59vw/1.15 var(--display,"Archivo",sans-serif);font-stretch:87.5%;color:#1f4bb8;white-space:nowrap}
}

/* ====== URAH v83 (27/10/2026): banners 2, 3 e 4 = gemeos do banner 1 (Renan), com a composicao de aparelhos no estilo Pipedrive.
   Mesmo texto, botoes, chips e desenho de linha (a mesma .v73-stage, so sem a foto). No lugar do Renan: um notebook (tampa escura e base prata,
   desenhados em CSS) com a tela principal recortada no canto de cima, um celular (moldura escura) sobre o canto de baixo do notebook
   e 1 ou 2 cartoes brancos com um dado cada. Sem barra de navegador. Fundo claro do banner 1.
   Medidas em unidades de desenho numa caixa de 640 x 494 (1 unidade = 100cqi / 640 dentro da caixa):
   notebook 550 de largura em (90, 50), tela 490 x 306; celular 190 em (0, 180), tela 176 x 270; cartao 1 250 em (20, 0); cartao 2 230 a direita em y 340.
   Nitidez: cada imagem tem pelo menos 2 px por px de tela no maior tamanho (caixa de 600 px); nada e ampliado.
   Sem os 3 cartoes brancos do banner 1 (os cartoes flutuantes fazem esse papel); os fatos deles vao nos chips (celular e tablet, como no banner 1). ====== */
.v83-casc{position:absolute;z-index:2;aspect-ratio:640/494;height:auto;pointer-events:none;container-type:inline-size}
.v83-casc img{max-width:none;border-radius:0}
/* notebook */
.v83-note{position:absolute;z-index:1;left:14.0625%;top:10.12%;width:85.9375%}
.v83-tampa{position:relative;margin:0 3.636%;padding:1.875cqi 1.5625cqi;background:#1f2430;border-radius:2.2cqi 2.2cqi .6cqi .6cqi;
  box-shadow:0 1px 4px rgba(15,27,45,.08),0 14px 34px rgba(15,27,45,.12)}
.v83-tampa::before{content:"";position:absolute;left:50%;top:.6cqi;width:.7cqi;height:.7cqi;margin-left:-.35cqi;border-radius:50%;background:#3d4456}
.v83-tela{aspect-ratio:16/10;overflow:hidden;background:#fff;border-radius:.3cqi}
.v83-tela img{display:block;width:100%;height:100%;object-fit:cover;object-position:0 0}
.v83-base{position:relative;height:2.2cqi;background:linear-gradient(#f1f3f6,#c4c9d3);border-radius:0 0 1.8cqi 1.8cqi;box-shadow:0 8px 18px rgba(15,27,45,.12)}
.v83-base::before{content:"";position:absolute;left:41%;width:18%;top:0;height:45%;background:#aab0bc;border-radius:0 0 .9cqi .9cqi}
/* celular */
.v83-cel{position:absolute;z-index:3;left:0;top:36.44%;width:29.6875%;box-sizing:border-box;padding:1.1cqi;background:#151a24;border-radius:3.75cqi;
  box-shadow:0 1px 4px rgba(15,27,45,.1),0 16px 36px rgba(15,27,45,.18)}
.v83-celtela{position:relative;aspect-ratio:176/270;overflow:hidden;border-radius:2.66cqi;container-type:inline-size}
.v83-celtela img{display:block;width:100%;height:auto}
.v83-status{position:relative;display:flex;align-items:center;justify-content:space-between;height:9cqi;padding:0 7cqi;background:#fff;
  font:600 4.6cqi/1 var(--font,"Public Sans",system-ui,sans-serif);color:#13203f}
.v83-status::after{content:"";position:absolute;left:50%;top:2.2cqi;width:4.4cqi;height:4.4cqi;margin-left:-2.2cqi;border-radius:50%;background:#151a24}
.v83-status i{width:6.5cqi;height:3.2cqi;box-sizing:border-box;border:1px solid #13203f;border-radius:.9cqi;background:linear-gradient(90deg,#13203f 70%,transparent 70%) content-box;padding:.5cqi}
.v83-apphd{display:block;padding:3.4cqi 7cqi;background:#fff;border-bottom:1px solid #eef1f5;font:700 6.4cqi/1.2 var(--font,"Public Sans",system-ui,sans-serif);color:#13203f}
/* cartoes flutuantes */
.v83-card{position:absolute;z-index:2;box-sizing:border-box;overflow:hidden;background:#fff;border:1px solid #e3e8ef;border-radius:1.6cqi;
  box-shadow:0 1px 4px rgba(15,27,45,.06),0 12px 32px rgba(15,27,45,.12);container-type:inline-size;font-family:var(--font,"Public Sans",system-ui,sans-serif);color:#13203f;letter-spacing:0}
.v83-card img{display:block;width:100%;height:auto}
.v83-c1{left:3.125%;top:0;width:39.0625%}
.v83-c2{z-index:3;right:0;top:68.83%;width:35.9375%}
.v83-ct{display:block;padding:5.6cqi 7cqi 0;font:700 5.4cqi/1.25 var(--font,"Public Sans",system-ui,sans-serif)}
.v83-cs{display:block;padding:1.2cqi 7cqi 0;font:400 4.4cqi/1.3 var(--font,"Public Sans",system-ui,sans-serif);color:#667085}
.v83-fluxo dl{margin:3cqi 0 0;padding:0 7cqi 5cqi}
.v83-fluxo dl div{display:flex;justify-content:space-between;gap:3cqi;padding:2.6cqi 0;border-top:1px solid #eef1f5;font:400 4.6cqi/1.3 var(--font,"Public Sans",system-ui,sans-serif)}
.v83-fluxo dd{margin:0;font-variant-numeric:tabular-nums;white-space:nowrap}
.v83-fluxo dt{white-space:nowrap}
.v83-fluxo .fim{border-top:1.5px solid #13203f;font-weight:700}
.v83-fluxo .fim dd{color:#4f46e5}
.v83-nota{position:absolute;left:0;top:calc(100% + 8px);margin:0;white-space:nowrap;font:400 12px/1.35 var(--font,"Public Sans",system-ui,sans-serif);color:#5b647a}

/* entrada: os aparelhos e os cartoes sobem 12 px e aparecem em sequencia quando o banner entra (nada de zoom nem camera) */
@keyframes v83in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:no-preference){
  .v69-car.js .v69-slide.is-on .v83-note,.v69-car.js .v69-slide.is-on .v83-cel,.v69-car.js .v69-slide.is-on .v83-card{animation:v83in .4s ease-out both}
  .v69-car.js .v69-slide.is-on .v83-c1{animation-delay:.12s}
  .v69-car.js .v69-slide.is-on .v83-cel{animation-delay:.24s}
  .v69-car.js .v69-slide.is-on .v83-c2{animation-delay:.36s}
}

/* computador (1025 px para cima): a caixa fica onde o Renan fica, centralizada na altura do banner,
   da coluna do texto ate uns 80 px alem do fim do conteudo (os cartoes do Renan tambem passam do conteudo) */
@media (min-width:1025px){
  .v83-casc{--r:max(48px,calc((100vw - var(--v78-wc)) / 2 + 12px + var(--v78-wc) / 12 - 80px));
    right:var(--r);top:50%;transform:translateY(-50%);width:min(600px,calc(100cqw - 12px - var(--r)),calc((100cqh - 64px) * 640 / 494))}
}
/* 1025 a 1199: botoes lado a lado, como no banner 1 */
@media (min-width:1025px) and (max-width:1199.98px){
  .v83-bn .v73-cta{flex-wrap:nowrap;width:max-content;max-width:none;gap:16px}
  .v83-bn .v73-cta .btn,.v83-bn .v73-sec{padding:10px 16px;font-size:14px;white-space:nowrap}
}
/* 961 a 1024 (tablet deitado): metade direita, como a foto do Renan */
@media (min-width:961px) and (max-width:1024.98px){
  .v83-casc{right:24px;top:50%;transform:translateY(-50%);width:min(600px,calc(100cqw - 48px),calc((100cqh - 64px) * 640 / 494))}
}
/* 768 a 960 (tablet em pe): embaixo do texto, no centro, no lugar da foto */
@media (min-width:768px) and (max-width:960.98px){
  /* sem altura minima: a area so ocupa o que sobra, entao estes banners nunca ficam mais altos que o banner 1 (que nao muda) */
  .v83-foto{min-height:0}
  .v83-casc{left:50%;top:50%;transform:translate(-50%,-50%);width:min(600px,calc(100cqw - 32px),calc((100cqh - 64px) * 640 / 494))}
}
/* celular: no notebook a letra ficaria pequena demais; fica o celular e o cartao 1, a nota em cima (as bolinhas nao cobrem nada) */
@media (max-width:767.98px){
  .v83-casc{aspect-ratio:330/275;left:50%;top:28px;transform:translateX(-50%);width:min(330px,calc(100cqw - 40px))}
  .v83-note,.v83-c2{display:none}
  .v83-cel{left:2%;top:0;width:53%;padding:2.3cqi;border-radius:7.6cqi}
  .v83-celtela{border-radius:5.2cqi}
  .v83-c1{z-index:4;left:47%;top:22%;width:53%;border-radius:3cqi}
  .v83-nota{top:auto;bottom:calc(100% + 6px);left:-20px;right:-20px;text-align:center;white-space:normal}
}
/* o titulo do banner 2 e o h1 da pagina: outras regras de h1 do site mudam o tamanho; aqui ele volta a ser igual ao do banner 1 */
.v69-car .v83-bn h1.v69-h{font-size:clamp(30px,16.8px + 1.625vw,48px)!important;line-height:1.1!important;letter-spacing:-.012em!important;margin:0 0 18px}
@media (max-width:767.98px){.mp-home .v69-car .v83-bn h1.v69-h{font-size:32px!important;line-height:1.1!important;margin:0 0 8px}}
@media (min-width:1025px){.v69-car .v83-bn h1.v69-h{font-size:44.8px!important;line-height:1.2!important;letter-spacing:0!important;margin:0 0 16px}}
@media (min-width:1025px) and (max-height:559px){.v69-car .v83-bn h1.v69-h{font-size:40px!important}}