/* 17/09/2026 (pedido do usuário): o contorno laranja do botão "Preencher formulário" do rodapé é um <svg>, e o
   navegador recorta svg (overflow:hidden do próprio navegador). Caindo em fração de pixel, o Safari comia um pedaço
   do traço à direita. O seletor pega a pílula pelo tamanho do desenho (241x50) porque em /premios/ ela não tem link. */
a[href*="trabalhe-conosco"] svg,svg[viewBox="0 0 241 50"]{overflow:visible}

#mflx-responsive-view{display:none}
/* "Veja também essas soluções": cartões do desenho viram links (todas as larguras). */
#canvas .mflx-veja-link{display:block;z-index:6;border-radius:18px;cursor:pointer;transition:background-color .15s}

#canvas .mflx-veja-link:focus-visible{outline:3px solid #f37920;outline-offset:4px}
/* Botão MENU: o contorno de foco do shared-ui (outline 20px para dentro, raio 40px) não acompanha a pílula desenhada e ficava torto (Safari).
   O foco de teclado passa a seguir o formato da própria pílula; com o menu aberto o X já mostra o estado. */
#menu-open-btn:focus,#menu-open-btn:focus-visible{outline:none!important}
#menu-open-btn:focus-visible img{filter:drop-shadow(0 0 1.5px #f37920) drop-shadow(0 0 1.5px #f37920)}
#menu-open-btn[aria-expanded="true"]:focus-visible img{filter:none}
/* "PRODUTOS" no menu leva à lista de produtos; a setinha continua abrindo/fechando as categorias. */
#menu-panel [data-accordion="produtos"] a.mflx-menu-produtos{display:inline!important;padding:0!important;color:inherit}
#menu-panel [data-accordion="produtos"] a.mflx-menu-produtos:hover{color:#f37920}
@media(max-width:1024px){
 html.mflx-small,html.mflx-small body{width:100%;max-width:100%;height:auto!important;margin:0;overflow-x:clip}
 .mflx-small #canvas{width:100%!important;transform:none!important;zoom:1!important;height:auto!important}
 .mflx-small #canvas> :not(#mflx-responsive-view):not(svg){display:none!important}
 .mflx-small #canvas>svg{position:absolute!important;width:0!important;height:0!important}
 .mflx-small #mflx-responsive-view{display:block;background:#fff;color:#231f20;font:400 17px/1.5 'Futura PT',sans-serif;width:100%;overflow:clip}
 #mflx-responsive-view *,#mflx-responsive-view *:before,#mflx-responsive-view *:after{box-sizing:border-box}
 #mflx-responsive-view h1,#mflx-responsive-view h2,#mflx-responsive-view h3,#mflx-responsive-view p{margin:0!important;white-space:normal!important}
 #mflx-responsive-view h1,#mflx-responsive-view h2{font-size:30px;line-height:1.12;font-weight:600}
 #mflx-responsive-view h3{font-size:22px;line-height:1.2;font-weight:600}
 #mflx-responsive-view p{font-size:17px;line-height:1.5}
 #mflx-responsive-view a{color:inherit;text-decoration:none}
 #mflx-responsive-view button{font:inherit;cursor:pointer;min-height:44px;min-width:44px}
 #mflx-responsive-view a:focus-visible,#mflx-responsive-view button:focus-visible,#mflx-responsive-view input:focus-visible,#mflx-responsive-view summary:focus-visible{outline:3px solid #f37920;outline-offset:3px}
 #mflx-responsive-view .r-header{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:76px;padding:8px 16px;background:#fff}
 #mflx-responsive-view .r-logo{display:block;width:136px;flex-shrink:0}
 #mflx-responsive-view .r-logo img{width:100%!important;height:auto!important;max-width:100%!important}
 #mflx-responsive-view .r-menu,#mflx-responsive-view .r-cart{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:8px 12px;border:1px solid #dedede;border-radius:24px;font-size:15px;background:#fff}
 #mflx-responsive-view .r-menu{background:#231f20;color:#fff;border-color:#231f20}
 #mflx-responsive-view .r-photo{display:block;width:100%!important;height:auto;max-width:100%!important;object-fit:cover}
 #mflx-responsive-view .r-track{display:flex;width:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
 #mflx-responsive-view .r-track::-webkit-scrollbar{display:none}
 #mflx-responsive-view .r-track>.r-story{flex:0 0 100%;min-width:0;scroll-snap-align:start}
 #mflx-responsive-view .r-story{background:#231f20;color:#fff}
 #mflx-responsive-view .r-story>.r-photo{aspect-ratio:16/10;object-position:center}
 #mflx-responsive-view .r-story-copy{display:flex;flex-direction:column;gap:18px;padding:28px 24px 30px}
 #mflx-responsive-view .r-story-copy p{max-width:60ch}
 #mflx-responsive-view .r-carousel-nav{display:flex;justify-content:center;align-items:center;gap:22px;padding:12px 20px;background:#231f20;color:#fff}
 #mflx-responsive-view .r-arrow{border:1px solid #777;border-radius:50%;background:transparent;color:inherit;width:44px;height:44px;font-size:24px}
 #mflx-responsive-view .r-arrow:disabled{opacity:.35;cursor:default}
 #mflx-responsive-view .r-badges{height:56px;margin-top:8px!important;overflow:visible}
 #mflx-responsive-view .r-badges .hero-product-badges{transform:scale(.35)!important;gap:24px!important}
 #mflx-responsive-view .r-badges .mflx-selo{filter:url(#hero-badge-cutout)}
 #mflx-responsive-view .r-badge-strip{display:block;width:100%;max-width:340px!important;height:auto!important;margin-top:8px!important}
 #mflx-responsive-view .r-section{padding:36px 20px;background:#e0e7ed}
 #mflx-responsive-view .r-section>h2,#mflx-responsive-view .r-section>h1{margin-bottom:22px!important}
 #mflx-responsive-view .r-product-grid,#mflx-responsive-view .r-news-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;margin:24px 0!important}
 #mflx-responsive-view .r-product-card{display:grid;grid-template-columns:minmax(0,1fr) 104px;gap:12px 16px;background:#fff;border-radius:20px;padding:24px;align-items:start}
 #mflx-responsive-view .r-product-card .r-photo{grid-column:2;grid-row:1 / span 3;height:158px!important;object-fit:contain}
 #mflx-responsive-view .r-product-card h3,#mflx-responsive-view .r-product-card p,#mflx-responsive-view .r-product-card .r-cta{grid-column:1}
 #mflx-responsive-view .r-product-card p{font-size:16px}
 #mflx-responsive-view .r-cta{display:inline-flex;align-items:center;justify-content:center;padding:10px 16px;min-height:44px;border-radius:24px;background:#f37920;color:#fff;font-size:16px;width:fit-content}
 #mflx-responsive-view .r-news-card{display:flex;flex-direction:column;gap:20px;border-radius:20px;overflow:hidden;background:#fff;padding-bottom:24px}
 #mflx-responsive-view .r-news-card h3,#mflx-responsive-view .r-news-card .r-cta{margin:0 24px!important}
 #mflx-responsive-view .r-news-card .r-photo{aspect-ratio:16/10}
 #mflx-responsive-view .r-footer{background:#151515;color:#ecebe8;padding:36px 24px;display:grid;gap:24px}
 #mflx-responsive-view .r-footer nav{display:grid;grid-template-columns:minmax(0,1fr);gap:4px}
 #mflx-responsive-view .r-footer a{display:flex;align-items:center;min-height:44px;overflow-wrap:anywhere;font-size:16px}
 #mflx-responsive-view .r-footer p{font-size:14px}
 #mflx-responsive-view .r-product-main{padding:20px;background:#e0e7ed;display:grid;gap:24px}
 #mflx-responsive-view .r-product-visual{min-width:0}
 #mflx-responsive-view #mflx-palco{position:relative!important;left:auto!important;top:auto!important;width:100%!important;height:300px!important;background:none!important;transform:none!important}
 #mflx-responsive-view #mflx-palco .mflx-foto{left:0!important;top:0!important;width:100%!important;height:100%!important;object-fit:contain!important;translate:none!important;max-width:100%!important}
 #mflx-responsive-view .r-product-form{background:#fff;border-radius:20px;padding:24px;display:flex;flex-direction:column;gap:16px;min-width:0}
 #mflx-responsive-view .r-field>*{position:relative!important;left:auto!important;top:auto!important;right:auto!important;bottom:auto!important;width:100%!important;height:auto!important;min-width:0!important;white-space:normal!important;font-size:17px!important;line-height:1.45!important;transform:none!important;color:#231f20!important}
 #mflx-responsive-view .r-field:first-child>*{font-size:28px!important;font-weight:600!important;line-height:1.15!important}
 #mflx-responsive-view .r-field:has(>#mflx-codigo)>*{font-size:14px!important;color:#666!important}
 #mflx-responsive-view .r-field:empty{display:none}
 #mflx-responsive-view .r-field label{padding:12px!important;min-height:48px}
 #mflx-responsive-view .r-field input:not([type=file]),#mflx-responsive-view .r-field select,#mflx-responsive-view .r-field button{font-size:16px!important;min-height:44px!important;max-width:100%!important}
 #mflx-responsive-view .r-field input[type=file]{max-width:100%}
 #mflx-responsive-view .r-color-row{display:flex;flex-wrap:wrap;gap:14px;padding:4px}
 #mflx-responsive-view .r-live-color{position:relative!important;left:auto!important;top:auto!important;display:block!important;flex:0 0 44px;width:44px!important;height:44px!important;border:2px solid #aaa;border-radius:50%}
 #mflx-responsive-view .r-quantity{display:flex;align-items:center;gap:0;width:fit-content;border:1px solid #ccc;border-radius:24px;overflow:hidden}
 #mflx-responsive-view .r-quantity>*{position:relative!important;left:auto!important;top:auto!important;width:48px!important;height:48px!important;display:grid!important;place-items:center;font-size:20px!important;line-height:1!important;border:0!important;background:#fff!important;border-radius:0!important}
 #mflx-responsive-view .r-quantity button[aria-label^="Aumentar"]:before{content:'+';font-size:24px}
 #mflx-responsive-view .r-quantity button[aria-label^="Diminuir"]:before{content:'−';font-size:24px}
 #mflx-responsive-view .r-add>a{position:relative!important;left:auto!important;top:auto!important;width:100%!important;height:auto!important;min-height:48px;font-size:18px!important;line-height:1.3!important;padding:12px!important}
 #mflx-responsive-view .r-details{padding:40px 24px;background:#0c0b09;color:#fff}
 #mflx-responsive-view .r-details .mflxdif-head{display:grid;gap:20px;text-align:center;margin-bottom:32px!important}
 #mflx-responsive-view .r-details .mflxdif-kicker{font-size:14px;color:#f37920;letter-spacing:.08em}
 #mflx-responsive-view .r-details .mflxdif-sub{font-size:17px;line-height:1.5;color:#ddd}
 #mflx-responsive-view .r-details .mflxdif-selos-faixa{display:none}
 #mflx-responsive-view .r-details .mflxdif-card{display:grid;gap:20px;margin:36px 0!important;opacity:1!important;transform:none!important}
 #mflx-responsive-view .r-details .mflxdif-bolha{width:180px;max-width:100%;margin:auto!important}
 #mflx-responsive-view .r-details .bolha-svg{width:100%;opacity:1!important}
 #mflx-responsive-view .r-details h3{font-size:25px;margin-bottom:14px!important}
 #mflx-responsive-view .r-details p{color:#ddd}
 #mflx-responsive-view .r-description details{border-bottom:1px solid #bac3ca;padding:12px 0}
 #mflx-responsive-view summary{cursor:pointer;padding:12px 0;min-height:44px;font-size:20px;font-weight:600}
 #mflx-responsive-view .r-description-panel{display:grid;gap:16px;font-size:17px;line-height:1.5}
 #mflx-responsive-view .r-description-panel p{margin-bottom:16px!important}
 #mflx-responsive-view #orc-lista{position:relative!important;left:auto!important;top:auto!important;width:100%!important;margin-top:24px!important}
 #mflx-responsive-view #orc-lista *{max-width:100%;font-size:17px!important;line-height:1.4!important}
 #mflx-responsive-view #orc-lista .orc-linha{flex-wrap:wrap!important;gap:16px!important}
 #mflx-responsive-view #orc-lista .orc-linha>div{min-width:0!important}
 #mflx-responsive-view #orc-lista button{min-width:44px;min-height:44px}
 #mflx-responsive-view #orc-lista>div:last-child{flex-wrap:wrap;gap:16px!important}
 #mflx-responsive-view .r-general-block>*{position:relative!important;left:auto!important;top:auto!important;width:100%!important;height:auto!important;transform:none!important}
 #mflx-responsive-view .r-general-block{margin-bottom:24px!important;overflow-wrap:anywhere}
 #mflx-responsive-view .r-general-block .abs{position:relative!important;left:auto!important;top:auto!important;width:100%!important;height:auto!important;transform:none!important}
 #mflx-responsive-view .r-general-block img{max-width:100%!important;height:auto!important;object-fit:contain}
 #mflx-responsive-view .r-general-block div,#mflx-responsive-view .r-general-block span,#mflx-responsive-view .r-general-block p{font-size:17px!important;line-height:1.5!important;white-space:normal!important}
 .mflx-small #menu-layer>#menu-open-btn{left:auto!important;right:16px!important;top:12px!important;width:88px!important;height:48px!important}
 .mflx-small #mflx-selo-orc{display:none!important}
}
@media(min-width:768px) and (max-width:1024px){
 #mflx-responsive-view .r-header{padding:12px 32px}
 #mflx-responsive-view .r-logo{width:180px}
 #mflx-responsive-view .r-story{display:grid;grid-template-columns:1fr 1fr;align-items:stretch}
 #mflx-responsive-view .r-story>.r-photo{height:100%!important;min-height:360px;aspect-ratio:auto}
 #mflx-responsive-view .r-story-copy{justify-content:center;padding:32px}
 #mflx-responsive-view h1,#mflx-responsive-view h2{font-size:36px}
 #mflx-responsive-view .r-product-grid,#mflx-responsive-view .r-news-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 #mflx-responsive-view .r-section{padding:48px 32px}
 #mflx-responsive-view .r-product-main{grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding:32px}
 #mflx-responsive-view #mflx-palco{height:440px!important;position:sticky!important;top:24px!important}
 #mflx-responsive-view .r-details .mflxdif-card{grid-template-columns:220px minmax(0,1fr);align-items:center;gap:40px}
 #mflx-responsive-view .r-footer nav{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
}
@media(max-width:359px){#mflx-responsive-view .r-header{padding:8px;gap:4px}#mflx-responsive-view .r-logo{width:112px}#mflx-responsive-view .r-cart{padding:8px;font-size:14px}#mflx-responsive-view .r-product-card{padding:18px;grid-template-columns:minmax(0,1fr) 80px}#mflx-responsive-view .r-badges .hero-product-badges{transform:scale(.30)!important}}
@media(max-width:1024px){
 #mflx-responsive-view #orc-lista .orc-linha{display:grid!important;grid-template-columns:96px minmax(0,1fr);align-items:start!important;padding:24px 0!important}
 #mflx-responsive-view #orc-lista .orc-linha>div:first-child{width:96px!important;height:112px!important}
 #mflx-responsive-view #orc-lista .orc-qtd{grid-column:2;display:flex;gap:12px!important;align-items:center}
 #mflx-responsive-view #orc-lista .orc-rm{grid-column:2;justify-self:start}
 #mflx-responsive-view #orc-enviar{color:#fff!important;height:auto;min-height:48px;padding:14px 20px;width:100%;text-align:center;white-space:normal}
 #mflx-responsive-view .r-field:has(input[type=file])>*{display:flex!important;flex-wrap:wrap;gap:8px!important;border-radius:12px!important}
 #mflx-responsive-view #mflx-logo-label{white-space:normal!important;max-width:100%;overflow-wrap:anywhere}
}
@media(max-width:1024px){
 #mflx-responsive-view .r-catalog-card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:20px;background:#fff;border-radius:20px;overflow:hidden;padding-bottom:24px}
 #mflx-responsive-view .r-catalog-card .r-photo{aspect-ratio:1.6;object-fit:contain}
 #mflx-responsive-view .r-catalog-card h2{font-size:24px;padding:0 20px}
 #mflx-responsive-view .r-general-block .prow,#mflx-responsive-view .r-general-block .ptrack,#mflx-responsive-view .r-general-block .pcard{position:relative!important;left:auto!important;top:auto!important;transform:none!important;width:100%!important;height:auto!important;display:block;margin-bottom:20px!important}
 #mflx-responsive-view .r-general-block input,#mflx-responsive-view .r-general-block select,#mflx-responsive-view .r-general-block textarea{font-size:16px!important;width:100%!important;min-height:44px;height:auto!important}
 #mflx-responsive-view .r-general-block form{display:grid!important;gap:20px!important;width:100%!important}
 #mflx-responsive-view .r-general-block label{position:relative!important;display:block;min-width:0!important;width:100%!important;height:auto!important}
 #mflx-responsive-view .r-general-block [style*="grid-template-columns"]{grid-template-columns:minmax(0,1fr)!important}
}
@media(max-width:1024px){#mflx-responsive-view .r-story-copy{min-width:0}#mflx-responsive-view .r-badges{min-width:0;width:100%}}
@media(min-width:768px) and (max-width:1024px){#mflx-responsive-view .r-story{grid-template-columns:repeat(2,minmax(0,1fr))}#mflx-responsive-view .r-badges .hero-product-badges{transform:scale(.29)!important;gap:20px!important}}

@media(max-width:1024px){
#mflx-responsive-view .r-general-block h1{font-size:32px!important;line-height:1.18!important;height:auto!important}
#mflx-responsive-view .inst-corpo,#mflx-responsive-view .inst-form{padding:0!important;margin:0!important}
#mflx-responsive-view .inst-grid{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:20px!important}
#mflx-responsive-view .inst-campo,#mflx-responsive-view .inst-lgpd{grid-column:1/-1!important;min-width:0!important}
#mflx-responsive-view input[type=checkbox]{width:24px!important;min-width:24px!important;height:24px!important;min-height:24px!important}
#mflx-responsive-view textarea{min-height:140px!important}
}

/* 14/09 — revisão de celular/tablet no ar */
@media(max-width:1024px){
/* Grades: bloco "Por que a grade..." preso na rolagem é só do desktop; no celular ele alargava a página e deixava um vão em branco. */
.mflx-small .gd-trilho{display:none!important}
/* Blocos genéricos: vencem as regras da página que fixam left/width com !important (ex.: linha do tempo de Prêmios). */
.mflx-small #mflx-responsive-view .r-general-block>*,.mflx-small #mflx-responsive-view .r-general-block .abs{position:relative!important;left:auto!important;top:auto!important;right:auto!important;width:100%!important;height:auto!important;min-height:0!important;transform:none!important}
.mflx-small #mflx-responsive-view [data-r-light]{color:#231f20!important}
.mflx-small #mflx-responsive-view .r-general-block.r-g-h1 :is(div,span,p,h1,h2){font-size:30px!important;line-height:1.15!important;font-weight:600!important}
.mflx-small #mflx-responsive-view .r-general-block.r-g-h2 :is(div,span,p,h1,h2){font-size:22px!important;line-height:1.25!important;font-weight:600!important}
.mflx-small #mflx-responsive-view .r-general>.r-photo{margin:0 0 28px!important;border-radius:12px}
.mflx-small #mflx-responsive-view .tl{display:block!important;text-align:left!important;padding:0!important}.mflx-small #mflx-responsive-view .r-general-block .tl-ano{font-size:40px!important;line-height:1.1!important;color:#f37920!important}
.mflx-small #mflx-responsive-view .r-general-block .tl-tit{font-size:22px!important;line-height:1.25!important;font-weight:600!important;margin-top:6px!important}
.mflx-small #mflx-responsive-view .r-general-block .tl-par{font-size:17px!important;line-height:1.5!important;margin-top:8px!important}
/* Página de produto: título, nota, botão de orçamento e ícones dos diferenciais. */
#mflx-responsive-view .r-field.r-title>*{font-size:28px!important;font-weight:600!important;line-height:1.15!important}
#mflx-responsive-view .r-rating{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px;margin-top:-6px!important}
#mflx-responsive-view .r-rating:before{content:'★';color:#f5a623;font-size:16px}
#mflx-responsive-view .r-rating>*{position:relative!important;left:auto!important;top:auto!important;width:auto!important;height:auto!important;font-size:15px!important;line-height:1.3!important;color:#555!important;white-space:nowrap!important}
#mflx-responsive-view .r-add>a.r-add-empty{display:flex!important;align-items:center;justify-content:center;background:#f37920!important;color:#fff!important;border-radius:26px!important;font-weight:600;text-decoration:none}
#mflx-responsive-view .r-add>a.r-add-empty:before{content:'Adicionar ao orçamento';font-size:18px}
/* A regra do anel é "#sec-detalhes .arco" e não alcança a cópia do celular: sem ela o círculo saía preto por cima da foto. */
#mflx-responsive-view .r-details circle.arco{fill:none;stroke:#f37920;stroke-width:2.5;stroke-linecap:round;opacity:.85}
/* "Veja também essas soluções" no celular/tablet: cartões com link (2 colunas no celular, 4 no tablet). */
#mflx-responsive-view .r-related .r-product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
#mflx-responsive-view .r-related .r-catalog-card{gap:10px;padding-bottom:16px}
#mflx-responsive-view .r-related .r-catalog-card .r-photo{aspect-ratio:1.15;padding:14px 14px 0;object-fit:contain;background:#fff}
#mflx-responsive-view .r-related .r-catalog-card h3{font-size:17px;line-height:1.25;padding:0 10px}
#mflx-responsive-view .r-related .r-catalog-card .r-cta{font-size:15px;padding:8px 14px;min-height:40px}
}
@media(min-width:768px) and (max-width:1024px){#mflx-responsive-view .r-related .r-product-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* 14/09/2026 Fase 1: texto desenhado com largura fixa (ex.: parágrafo da lista do blog, 818px) não pode estourar a tela */
#mflx-responsive-view .r-general-block span,#mflx-responsive-view .r-general-block div{max-width:100%!important;width:auto!important;white-space:normal!important}

/* ── 14/09/2026 Fases 2 e 3 ─────────────────────────────────────────────── */
/* Institucionais: o bloco do título e o do texto vinham em seções separadas, cada uma com 36px em cima e embaixo (vão de ~120px). */
#mflx-responsive-view .r-section.r-general{padding:28px 20px 12px}
#mflx-responsive-view .r-section.r-general+.r-section.r-general{padding-top:0}
#mflx-responsive-view .r-section.r-general:last-of-type{padding-bottom:36px}
#mflx-responsive-view .r-general-block:empty,#mflx-responsive-view .r-general-block:not(:has(*)){display:none}
/* Selos "Diferenciais" (mflxdif) no celular: fileira de selos pequenos, não um por linha do tamanho da tela. */
#mflx-responsive-view .r-details .mflxdif-selos{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 18px;margin:24px 0}
#mflx-responsive-view .r-details .mflxdif-selos .selo{width:92px;flex:0 0 92px;position:relative}
#mflx-responsive-view .r-details .mflxdif-selos .selo img{width:100%;height:auto;display:block}
/* Logos de clientes: versão empilhada, 3 por linha. */
#mflx-responsive-view .r-photo.r-logos{background:#fff;border-radius:16px;padding:16px;aspect-ratio:auto!important;object-fit:contain}
/* Rodapé desenhado */
#mflx-responsive-view .r-footer{display:grid;gap:28px;padding:40px 24px 32px}
#mflx-responsive-view .r-footer h3{font-size:17px;font-weight:600;margin:0 0 8px;color:#fff}
#mflx-responsive-view .r-foot-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 16px}
#mflx-responsive-view .r-foot-cols .r-foot-group:nth-child(3){grid-column:1/-1}
#mflx-responsive-view .r-foot-group nav{display:grid;gap:0}
#mflx-responsive-view .r-foot-group nav a{min-height:40px;font-size:15.5px;color:#ecebe8;text-decoration:none}
#mflx-responsive-view .r-foot-onde p{margin:0 0 4px;font-size:15px;color:#cfcac3}
#mflx-responsive-view .r-foot-horario{margin-top:10px!important;color:#ecebe8!important}
#mflx-responsive-view .r-foot-contato{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
#mflx-responsive-view .r-foot-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 20px;border-radius:22px;background:#f37920;color:#fff!important;font-weight:600;text-decoration:none;font-size:15px}
#mflx-responsive-view .r-foot-btn-outline{background:transparent;border:1.5px solid #f37920;color:#f37920!important}
#mflx-responsive-view .r-foot-mail{flex:1 0 100%;font-size:15px;color:#ecebe8;text-decoration:none;min-height:32px;display:flex;align-items:center}
#mflx-responsive-view .r-foot-social{display:flex;gap:16px}
#mflx-responsive-view .r-foot-icon{width:40px;height:40px;border-radius:50%;background:#ecebe8;display:flex;align-items:center;justify-content:center;overflow:hidden}
#mflx-responsive-view .r-foot-icon img{width:36px;height:36px;object-fit:contain}
#mflx-responsive-view .r-foot-base{display:flex;align-items:center;gap:16px;border-top:1px solid #2f2c2b;padding-top:20px}
#mflx-responsive-view .r-foot-logo{width:64px;height:auto;flex:none}
#mflx-responsive-view .r-foot-base p{margin:0;font-size:13px;color:#9a948c}
@media(min-width:768px) and (max-width:1024px){#mflx-responsive-view .r-foot-cols{grid-template-columns:repeat(3,minmax(0,1fr))}#mflx-responsive-view .r-foot-cols .r-foot-group:nth-child(3){grid-column:auto}}

/* 14/09/2026 rodada 5: cabeçalho do celular/tablet fica preso no topo ao rolar */
#mflx-responsive-view .r-header{position:sticky;top:0;z-index:60;box-shadow:0 2px 12px rgba(0,0,0,.08)}
/* 14/09/2026: on small screens the 1920px drawing stays out of sight until the phone layout is built (DOMContentLoaded).
   Before, the visitor saw the desktop drawing until every image had loaded. If the script never runs, the drawing shows after 8s. */
@media(max-width:1024px){
 html:not(.mflx-small) #canvas,html:not(.mflx-small) #menu-layer{visibility:hidden;animation:mflx-canvas-fallback 0s 8s forwards}
}
@keyframes mflx-canvas-fallback{to{visibility:visible}}

/* ── 15/09/2026: home no celular/tablet com a identidade do desenho (texto dentro da foto, cartões e bolinhas do 1920) ── */
@media(max-width:1024px){
/* Carrossel: trilho com encaixe, bolinhas sobre a foto ou barra de progresso laranja */
#mflx-responsive-view .r-carrossel{position:relative}
#mflx-responsive-view .r-carrossel .r-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;column-gap:0}
#mflx-responsive-view .r-carrossel .r-track::-webkit-scrollbar{display:none}
#mflx-responsive-view .r-carrossel .r-track>*{flex:0 0 100%;min-width:0;scroll-snap-align:start}
#mflx-responsive-view .r-pontos{position:absolute;left:0;right:0;bottom:16px;display:flex;justify-content:center;gap:10px;z-index:3;pointer-events:none}
#mflx-responsive-view .r-ponto{width:24px;height:24px;min-width:0;min-height:0;padding:0;border:0;background:none;display:grid;place-items:center;pointer-events:auto}
#mflx-responsive-view .r-ponto:before{content:'';width:9px;height:9px;border-radius:50%;background:#fff;opacity:.5;transition:transform .2s,opacity .2s}
#mflx-responsive-view .r-ponto.on:before{opacity:1;transform:scale(1.45)}
/* Barrinhas de progresso do hero (15/09/2026, no lugar das bolinhas; uma por slide, como nos stories): a do slide atual enche no tempo do auto (responsive.js poe a animacao inline com a duracao real), as anteriores ficam cheias, as seguintes vazias; no centro, na altura em que as bolinhas ficavam (bottom 16px + 24px/2 - 3px/2). 3 x 28px + 2 x 6px = 96px. */
/* Bolinhas (17/09/2026, pedido do usuario; antes barrinhas): cada bolinha e um botao de 44px de altura (alvo de toque); a do slide atual (aria-current) vira tracinho que enche e as outras diminuem com a distancia (data-d 1 grande, 2 media, 3 pequena). Mesma altura das barrinhas (bottom 5px, centro a 27px do fundo). */
#mflx-responsive-view .r-linha{position:absolute;left:50%;bottom:5px;transform:translateX(-50%);display:flex;align-items:center;height:44px;z-index:3;pointer-events:none;filter:drop-shadow(0 1px 2px rgba(0,0,0,.45))}
#mflx-responsive-view .r-linha>button{flex:none;min-width:0;min-height:0;height:44px;margin:0;padding:0 8px;border:0;background:none;display:flex;align-items:center;pointer-events:auto;cursor:pointer;-webkit-tap-highlight-color:transparent}
#mflx-responsive-view .r-linha>button>span{position:relative;display:block;width:4px;height:4px;border-radius:4px;background:rgba(255,255,255,.5);overflow:hidden;transform:translateZ(0);transition:width .4s cubic-bezier(.4,0,.2,1),height .4s cubic-bezier(.4,0,.2,1)}
#mflx-responsive-view .r-linha>button[data-d="1"]>span{width:8px;height:8px}
#mflx-responsive-view .r-linha>button[data-d="2"]>span{width:6px;height:6px}
#mflx-responsive-view .r-linha>button[aria-current="true"]>span{width:30px;height:8px}
#mflx-responsive-view .r-linha>button>span>span{position:absolute;left:0;top:0;display:block;width:100%;height:100%;background:#fff;transform-origin:0 50%;transform:scaleX(0)}
#mflx-responsive-view .r-linha>button:not([aria-current="true"])>span>span{visibility:hidden}
@media (prefers-reduced-motion:reduce){#mflx-responsive-view .r-linha>button>span{transition:none}}
@keyframes mflx-carrega{from{transform:scaleX(0)}to{transform:scaleX(1)}}
#mflx-responsive-view .r-barra{position:relative;height:4px;border-radius:2px;background:rgba(35,31,32,.12);margin:18px 0 0;overflow:hidden}
#mflx-responsive-view .r-barra span{position:absolute;top:0;bottom:0;left:0;width:20%;border-radius:2px;background:#f37920}
/* Cenas: foto de fundo, véu e texto por cima (hero, institucional, produtos em uso) */
#mflx-responsive-view .r-cena{position:relative;overflow:hidden;background:#231f20;color:#fff;display:flex;align-items:flex-end}
#mflx-responsive-view .r-cena-foto{position:absolute;inset:0;width:100%!important;height:100%!important;object-fit:cover;max-width:none!important}
/* 15/09 (responsivo 4): a <picture> do herói e do institucional (recorte 4:5 no celular em pé) ocupa a cena toda; classe e object-position ficam no <img> */
#mflx-responsive-view .r-cena-pic{position:absolute;inset:0;display:block}
/* Linha de leitura: acima de ~68 caracteres o olho se perde ao voltar para a linha seguinte. Vale para os textos
   vindos do desenho (trajetória, descrição do produto, chamada das notícias), que ocupavam a largura inteira no tablet. */
#mflx-responsive-view p{max-width:min(100%,62ch)}
#mflx-responsive-view .r-cena-veu{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.30) 0,rgba(255,255,255,0) 130px),linear-gradient(180deg,rgba(0,0,0,0) 30%,rgba(0,0,0,.62) 62%,rgba(0,0,0,.84) 100%)}
#mflx-responsive-view .r-cena-texto{position:relative;z-index:2;display:flex;flex-direction:column;gap:14px;padding:0 24px 64px;width:100%}
#mflx-responsive-view .r-cena h2{font-size:38px;line-height:1.05;font-weight:500;letter-spacing:-.02em;color:#fff;text-shadow:0 1px 12px rgba(0,0,0,.25)}
#mflx-responsive-view .r-cena p{font-size:17px;line-height:1.4;color:#fff;max-width:34ch;text-shadow:0 1px 8px rgba(0,0,0,.35)}
/* Hero (responsivo 4, 15/09): altura = largura ÷ 1,84 (proporção do desenho 1920×1044), piso 480px, teto 88% da altura visível (svh onde existir).
   A foto 16:9 encolhe inteira na largura em vez de ser recortada; no celular em pé entra o recorte 4:5 da <picture>. */
#mflx-responsive-view .r-hero{--mflx-lat:clamp(20px,4vw,160px)}
#mflx-responsive-view .r-hero .r-cena{height:min(max(54.35vw,480px),92vh);height:min(max(54.35vw,480px),92svh)}
#mflx-responsive-view .r-hero .r-cena-texto{padding-bottom:72px}
/* Tipografia fluida do desenho: título 72px em 1920 (3,75% da largura), parágrafo 28,7px; 34 caracteres por linha no celular */
#mflx-responsive-view .r-hero .r-cena h2{font-size:min(clamp(32px,5.6vw,72px),9vh);line-height:1.1;letter-spacing:-.02em;max-width:14ch}
#mflx-responsive-view .r-hero .r-cena p{font-size:clamp(16px,2.2vw,28px);line-height:1.3;max-width:34ch}
/* Selos: 1,15× o corpo do título (44 a 82px, responsive.js mede() põe --mflx-selo na cena e a escala/largura inline); a fileira quebra em 2 linhas em vez de encolher */
#mflx-responsive-view .r-hero .r-badges{height:44px;margin-top:2px!important;overflow:visible;min-width:0;width:100%}
#mflx-responsive-view .r-hero .r-badges .hero-product-badges{flex-wrap:wrap;transform-origin:0 0}
#mflx-responsive-view .r-hero .r-badge-strip{width:auto!important;max-width:100%!important;height:var(--mflx-selo,44px)!important;margin-top:2px!important}
/* 16/09/2026: selos do slide 2 ovais no celular (a coluna flex esticava a <img>; e a faixa agora é 522x82) */
#mflx-responsive-view .r-hero .r-badge-strip{align-self:flex-start!important;object-fit:contain!important;object-position:left center!important}
/* Institucional: cartão arredondado no fundo azul-cinza */
#mflx-responsive-view .r-inst{padding:24px 16px 28px}
#mflx-responsive-view .r-inst .r-carrossel{border-radius:28px;overflow:hidden;background:#2d2a2b}
/* Cartão institucional (responsivo 4): 4:5 no celular, 16:10 a partir de 600px, 2:1 em 1024px; nunca mais alto que 640px, sem altura fixa (a foto não é ampliada) */
#mflx-responsive-view .r-inst .r-cena{aspect-ratio:4/5;max-height:640px}
/* texto no topo e a foto (produto/adesivo) livre na metade de baixo, como no desenho onde texto e foto não se cobrem */
#mflx-responsive-view .r-cena-topo{align-items:flex-start}
#mflx-responsive-view .r-inst .r-cena-veu{background:linear-gradient(180deg,rgba(26,29,30,.9) 0,rgba(26,29,30,.7) 34%,rgba(26,29,30,.15) 62%,rgba(26,29,30,.35) 100%)}
#mflx-responsive-view .r-inst h2{font-family:'Futura PT Demi Italic','Futura PT',sans-serif;font-style:oblique;font-weight:400;font-size:27px;line-height:1.02;color:#ecebe8}
#mflx-responsive-view .r-inst p{font-size:14.5px;line-height:1.32;color:#ecebe8;max-width:38ch}
#mflx-responsive-view .r-inst .r-cena-texto{padding:26px 24px 0;gap:10px}
/* Produtos: cartões do desenho em fileira horizontal */
#mflx-responsive-view .r-produtos{padding:8px 0 36px;background:#e0e7ed}
#mflx-responsive-view .r-produtos>h2{padding:0 20px;margin-bottom:16px!important}
#mflx-responsive-view .r-pista .r-track{padding:6px 20px 14px;column-gap:14px;scroll-padding-inline:20px}
#mflx-responsive-view .r-pista .r-track>*{flex:0 0 82%}
#mflx-responsive-view .r-pista .r-barra{margin:4px 20px 0}
#mflx-responsive-view .r-pcard{display:grid;grid-template-columns:minmax(0,1fr) 112px;gap:12px;align-items:center;background:#f7f7f7;border-radius:28px;box-shadow:0 5px 11.6px rgba(0,0,0,.10);padding:24px 16px 24px 24px;min-height:214px}
#mflx-responsive-view .r-pcard-texto{display:flex;flex-direction:column;gap:10px;min-width:0}
#mflx-responsive-view .r-pcard h3{font-size:23px;line-height:1.15;font-weight:500;color:#2d2a2b}
#mflx-responsive-view .r-pcard p{font-size:15px;line-height:1.3;color:#2d2a2b}
#mflx-responsive-view .r-pcard .r-cta{padding:8px 18px;min-height:40px;font-size:16px;margin-top:4px}
#mflx-responsive-view .r-pcard-foto{width:112px!important;height:156px!important;object-fit:contain;max-width:none!important}
/* Produtos em uso */
#mflx-responsive-view .r-area{background:#000}
#mflx-responsive-view .r-area .r-cena{height:540px}
#mflx-responsive-view .r-area h2{font-weight:600;font-size:30px;color:#ecebe8}
#mflx-responsive-view .r-area p{font-size:15px;line-height:1.35;max-width:40ch}
#mflx-responsive-view .r-area .r-cena-texto{padding-bottom:58px;gap:10px}
#mflx-responsive-view .r-area .r-cena-veu{background:linear-gradient(180deg,rgba(37,18,6,0) 25%,rgba(37,18,6,.6) 60%,rgba(20,10,3,.9) 100%)}
/* Notícias */
#mflx-responsive-view .r-noticias{padding:36px 0 40px;background:#e0e7ed}
#mflx-responsive-view .r-noticias>.r-kicker{font-family:'Futura PT Heavy Oblique','Futura PT',sans-serif;font-style:oblique;font-weight:800;font-size:24px;line-height:1.2;text-transform:uppercase;color:#151515;padding:0 20px;margin-bottom:10px!important}
#mflx-responsive-view .r-noticias-desc{padding:0 20px;font-size:16px;line-height:1.4;color:#151515;margin-bottom:20px!important}
#mflx-responsive-view .r-ncard{display:flex;flex-direction:column;background:#fff;border-radius:28px;overflow:hidden;box-shadow:0 5px 11.6px rgba(0,0,0,.10)}
#mflx-responsive-view .r-ncard-foto{width:100%!important;aspect-ratio:409/300;height:auto!important;object-fit:cover}
#mflx-responsive-view .r-ncard-corpo{position:relative;margin-top:-46px;background:#fff;clip-path:polygon(0 46px,52px 0,52px 46px,100% 46px,100% 100%,0 100%);padding:66px 22px 24px;display:flex;flex-direction:column;gap:8px;flex:1}
/* 16/09/2026: card de notícia limpo (foto, data, título), igual ao desktop */
#mflx-responsive-view .r-ncard h3{font-family:'Futura PT',sans-serif;font-weight:600;font-size:18px;line-height:1.25;color:#231f20;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
#mflx-responsive-view .r-ncard p{font-size:15px;line-height:1.3;color:#323031;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
#mflx-responsive-view .r-ncard-pe{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:14px}
#mflx-responsive-view .r-ncard-data{font-size:12px;font-weight:600;line-height:16px;color:#f37920;text-transform:uppercase;letter-spacing:.06em}
#mflx-responsive-view .r-ncard-icone{width:26px!important;height:26px!important}
#mflx-responsive-view .r-noticias .r-cta-linha{margin:22px 20px 0;background:transparent;border:1.5px solid #f37920;color:#f37920;font-weight:500}
}
/* ── Responsivo 4 (15/09): herói do celular largo (600px) em diante — bloco de texto centrado na altura e à esquerda, como no 1920; véu lateral
   (esquerda mais escura) somado ao da base; barrinhas com a largura e o alinhamento do bloco de texto; cartão institucional deitado ── */
@media(min-width:600px) and (max-width:1024px){
/* Proporção do desenho (1920x1044 = 1,84:1) sem piso: a caixa fica quase na proporção da foto 16:9, então a foto aparece
   inteira na largura em vez de ser recortada. Abaixo de 600px o piso de 480px continua, com o recorte 4:5 da <picture>. */
#mflx-responsive-view .r-hero .r-cena{height:min(54.35vw,92vh);height:min(54.35vw,92svh);align-items:center}
#mflx-responsive-view .r-hero .r-cena-texto{padding:0 var(--mflx-lat);align-items:flex-start}
#mflx-responsive-view .r-hero .r-cena h2{max-width:18ch}
#mflx-responsive-view .r-hero .r-cena p{max-width:48ch}
#mflx-responsive-view .r-hero .r-cena-veu{background:linear-gradient(90deg,rgba(0,0,0,.66) 0,rgba(0,0,0,.38) 30%,rgba(0,0,0,0) 62%),linear-gradient(180deg,rgba(255,255,255,.30) 0,rgba(255,255,255,0) 130px),linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.55) 100%)}
#mflx-responsive-view .r-hero .r-linha{left:var(--mflx-lat);transform:none;width:min(52vw,calc(100% - 2*var(--mflx-lat)))}
#mflx-responsive-view .r-area .r-cena{height:min(56vw,620px)}
#mflx-responsive-view .r-inst .r-cena{aspect-ratio:16/10}
#mflx-responsive-view .r-inst .r-cena-texto{max-width:60%}
}
@media(min-width:1024px) and (max-width:1024px){#mflx-responsive-view .r-inst .r-cena{aspect-ratio:2/1}}
@media(max-width:399px){#mflx-responsive-view .r-ico-rastreio{display:none}}
@media(min-width:768px) and (max-width:1024px){
#mflx-responsive-view .r-cena h2{font-size:54px}
#mflx-responsive-view .r-cena p{font-size:21px;max-width:44ch}
#mflx-responsive-view .r-cena-texto{padding:0 48px 80px}
#mflx-responsive-view .r-inst{padding:40px 32px}
#mflx-responsive-view .r-inst .r-cena-texto{padding:44px 48px 0;max-width:60%}
#mflx-responsive-view .r-inst .r-cena-veu{background:linear-gradient(90deg,rgba(26,29,30,.9) 0,rgba(26,29,30,.75) 40%,rgba(26,29,30,.05) 75%)}
#mflx-responsive-view .r-inst h2{font-size:40px}
#mflx-responsive-view .r-inst p{font-size:18px}
#mflx-responsive-view .r-pista .r-track{padding-inline:32px;scroll-padding-inline:32px;column-gap:20px}
#mflx-responsive-view .r-pista .r-track>*{flex:0 0 calc((100% - 20px)/2)}
#mflx-responsive-view .r-pista .r-barra{margin-inline:32px}
#mflx-responsive-view .r-produtos>h2,#mflx-responsive-view .r-noticias>.r-kicker,#mflx-responsive-view .r-noticias-desc{padding-inline:32px}
#mflx-responsive-view .r-noticias .r-cta-linha{margin-inline:32px}
}

/* ── 15/09/2026 (4ª versão): rodapé minimalista — 2 tamanhos (rótulo 12px caixa alta, texto 15px), tudo à esquerda, espaço igual ── */
@media(max-width:1024px){
#mflx-responsive-view .r-footer{display:grid;gap:32px;padding:40px 24px 24px;background:#151515;color:#ecebe8;font-size:15px;line-height:1.5}
#mflx-responsive-view .r-footer h3{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;margin:0 0 10px!important;color:#f37920;line-height:1.4}
#mflx-responsive-view .r-footer .r-foot-logo{width:48px!important;height:auto!important;max-width:none!important;margin:0}
#mflx-responsive-view .r-foot-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px 16px;padding:0;border:0}
#mflx-responsive-view .r-foot-cols .r-foot-group:nth-child(3){grid-column:1/-1}
#mflx-responsive-view .r-foot-group{display:block}
#mflx-responsive-view .r-foot-group nav{display:grid;gap:0;grid-template-columns:minmax(0,1fr)}
#mflx-responsive-view .r-footer .r-foot-group a,#mflx-responsive-view .r-foot-group p{display:block;min-height:0;margin:0!important;padding:0;font-size:15px;line-height:1.5;color:#ecebe8;text-decoration:none;white-space:normal}
#mflx-responsive-view .r-footer .r-foot-group nav a{padding:2px 0}
#mflx-responsive-view .r-footer a.r-foot-wa{display:inline-flex;align-items:center;gap:8px;padding:2px 0}
#mflx-responsive-view .r-foot-wa img{width:18px!important;height:18px!important;filter:brightness(0) invert(1);opacity:.9}
#mflx-responsive-view .r-footer a.r-foot-linha{padding:2px 0;margin-bottom:8px!important}
#mflx-responsive-view .r-foot-social{display:flex;gap:10px;margin-top:14px}
#mflx-responsive-view .r-footer a.r-foot-icon{width:32px;height:32px;min-height:0;padding:0;border-radius:50%;background:#ecebe8;display:flex;align-items:center;justify-content:center;overflow:hidden}
#mflx-responsive-view .r-foot-icon img{width:32px!important;height:32px!important;object-fit:contain}
#mflx-responsive-view .r-foot-base{display:grid;gap:2px;padding-top:20px;border-top:1px solid #2c2928;text-align:left}
#mflx-responsive-view .r-foot-base p{margin:0!important;font-size:12px;line-height:1.5;color:#8f8981}
}
@media(min-width:768px) and (max-width:1024px){
#mflx-responsive-view .r-footer{padding:48px 40px 28px;gap:36px}
#mflx-responsive-view .r-foot-cols{grid-template-columns:repeat(3,minmax(0,1fr));gap:0 32px;max-width:none}
#mflx-responsive-view .r-foot-cols .r-foot-group:nth-child(3){grid-column:auto}
#mflx-responsive-view .r-footer nav{grid-template-columns:minmax(0,1fr);gap:0}
#mflx-responsive-view .r-foot-base{display:flex;justify-content:space-between;gap:16px}
}

/* ── 16/09/2026 (pedido do usuário): cabeçalho SEM barra branca ──────────────────────────────────────────────────────────
   Tudo sai de três medidas, com as proporções do desenho de 1920 (aba da logo 480x126,7; ícones em caixas de 105 com passo de
   75; pílula MENU 206x104; margem direita 105):
     --cab-h  altura da aba da logo      --ico  caixa de cada ícone (toque confortável: mínimo 42px)      --lado  margem direita
   Aba da logo presa no canto e botões flutuando no mesmo lugar em toda a rolagem (a abinha com seta foi retirada a pedido).
   Rolou (.r-rolado): só uma sombra leve na aba da logo. */
@media(max-width:1024px){
/* 21/09/2026: cabeçalho 15% maior (52,9 / 48,3 no celular; 8,88vw / 7,36vw no tablet). Em tela estreita cresce só o que cabe
   sem a aba da logo encostar nos botões: 13,5vw / 12,33vw abaixo de 392px. */
html.mflx-small{--cab-h:max(46px,min(13.5vw,52.9px),min(8.88vw,87.4px));--ico:max(42px,min(12.33vw,48.3px),min(7.36vw,73.6px));--lado:clamp(12px,5.47vw,56px);--anima:.3s ease}
#mflx-responsive-view .r-header{position:fixed!important;top:0;left:0;right:0;height:var(--cab-h);min-height:0!important;margin:0!important;padding:0!important;
  display:block!important;background:none!important;box-shadow:none!important;z-index:60;pointer-events:none}
#mflx-responsive-view .r-header>.r-logo,#mflx-responsive-view .r-header>.r-acoes{pointer-events:auto}
/* espaço do cabeçalho nas páginas internas: borda transparente na 1ª seção, que pinta o próprio fundo por baixo (sem faixa branca) */
#mflx-responsive-view:not(.r-home) .r-main>:first-child{border-top:calc(var(--cab-h)*1.1 + 6px) solid transparent}
/* aba da logo: o próprio SVG do desenho (branco com a diagonal), encostado no topo e na esquerda */
/* 21/09/2026 (pedido do usuário): aba da logo 10% maior — só a aba; botões e --cab-h não mudam */
#mflx-responsive-view .r-header .r-logo{position:absolute!important;top:0;left:0;width:calc(var(--cab-h)*3.787*1.1)!important;height:calc(var(--cab-h)*1.1);display:block;transition:filter var(--anima)}
#mflx-responsive-view .r-header .r-logo img{width:100%!important;height:100%!important;max-width:none!important;display:block}
/* botões: mesmo passo do desenho (as caixas de 105 se sobrepõem 30) e centro na mesma linha dos ícones de 1920 (63,9% da aba) */
#mflx-responsive-view .r-acoes{position:absolute;right:var(--lado);top:calc(var(--cab-h)*.639 - var(--ico)/2);display:flex!important;align-items:center;gap:0!important;z-index:2}
#mflx-responsive-view .r-acoes>*{flex:none}
#mflx-responsive-view .r-acoes>*+*{margin-left:calc(var(--ico)*-.286)!important}
#mflx-responsive-view .r-acoes .r-ico{width:var(--ico)!important;height:var(--ico)!important;min-width:0!important;min-height:0!important;padding:0!important;border:0!important;background:none!important;display:inline-flex;align-items:center;justify-content:center}
#mflx-responsive-view .r-acoes .r-ico img{width:100%!important;height:100%!important;max-width:none!important;display:block}
#mflx-responsive-view .r-acoes .r-menu.r-menu-img{width:calc(var(--ico)*1.98)!important;height:var(--ico)!important;min-width:0!important;min-height:0!important;padding:0!important;border:0!important;background:none!important;border-radius:0!important;visibility:visible}
#mflx-responsive-view .r-acoes .r-menu.r-menu-img img{width:100%!important;height:100%!important;max-width:none!important;display:block}
/* rolou: só uma sombra leve na aba da logo, para ela se destacar sobre qualquer fundo (os botões já têm sombra no desenho) */
#mflx-responsive-view .r-header.r-rolado .r-logo{filter:drop-shadow(0 2px 10px rgba(35,31,32,.14))}
/* o X de fechar o menu: a própria pílula vira o X (o #menu-open-btn desenhado mora no #menu-layer, z-index 50, abaixo do cabeçalho) */
.mflx-small #menu-layer>#menu-open-btn{left:auto!important;right:var(--lado)!important;top:calc(var(--cab-h)*.639 - var(--ico)/2)!important;width:calc(var(--ico)*1.98)!important;height:var(--ico)!important}
html:has(#menu-open-btn[aria-expanded="true"]) #mflx-responsive-view .r-acoes .r-menu.r-menu-img{position:relative}
html:has(#menu-open-btn[aria-expanded="true"]) #mflx-responsive-view .r-acoes .r-menu.r-menu-img img{visibility:hidden}
html:has(#menu-open-btn[aria-expanded="true"]) #mflx-responsive-view .r-acoes .r-menu.r-menu-img::before{content:'';position:absolute;inset:18.3% 11% 25.9% 11%;background:#fff;border-radius:999px;box-shadow:0 1px 6px rgba(0,0,0,.16)}
html:has(#menu-open-btn[aria-expanded="true"]) #mflx-responsive-view .r-acoes .r-menu.r-menu-img::after{content:'';position:absolute;left:50%;top:46%;width:calc(var(--ico)*.34);height:calc(var(--ico)*.34);
  transform:translate(-50%,-50%);background:linear-gradient(45deg,transparent calc(50% - 1px),#231f20 calc(50% - 1px),#231f20 calc(50% + 1px),transparent calc(50% + 1px)),linear-gradient(-45deg,transparent calc(50% - 1px),#231f20 calc(50% - 1px),#231f20 calc(50% + 1px),transparent calc(50% + 1px))}
}
@media(max-width:399px){#mflx-responsive-view .r-acoes .r-ico-rastreio{display:none!important}}
/* 21/09/2026: de 400 a 439px o rastreio aparece e o cabeçalho 15% maior não cabe inteiro: cresce o que cabe */
@media(min-width:400px) and (max-width:439px){html.mflx-small{--cab-h:min(12.3vw,52.9px);--ico:min(11.23vw,48.3px)}}
/* o X do menu (é a pílula MENU) desceu junto: a lista começa o mesmo tanto mais abaixo, para o vão X → PRODUTOS ficar como era
   (o menu.js usa 96px; 80px em tela baixa) */
@media(max-width:1024px){html.mflx-small{--cab-mais:calc(var(--cab-h)*.639 + var(--ico)/2 - clamp(46px,7.72vw,76px)*.639 - clamp(42px,6.4vw,64px)/2)}
html.mflx-small #menu-panel{padding-top:calc(96px + var(--cab-mais))!important}}
@media(max-width:1024px) and (max-height:700px){html.mflx-small #menu-panel{padding-top:calc(80px + var(--cab-mais))!important}}
@media(prefers-reduced-motion:reduce){#mflx-responsive-view .r-header .r-logo{transition:none!important}}

/* ── 16/09/2026 (pedido do usuário): título, descrição e selos nunca em cima do produto ──────────────────────────────────────
   O responsive.js (organiza) escolhe, para cada cena e cada largura de tela, o arranjo que menos cobre o produto e grava em
   data-texto: separado (título e descrição em cima, selos embaixo), topo, base ou meio. Também ajusta a altura da cena e o
   enquadramento vertical da foto. Aqui ficam só as margens de cada grupo e o véu, que escurece apenas onde há texto. */
@media(max-width:1024px){
#mflx-responsive-view .r-cena{align-items:stretch!important}
#mflx-responsive-view .r-cena-texto{height:100%;box-sizing:border-box;justify-content:flex-start;width:100%!important;max-width:none!important;
  padding:var(--pt,24px) var(--lado-c,24px) var(--pb,40px)!important;gap:var(--gap-c,12px)!important}
#mflx-responsive-view .r-cena-texto>*{flex:none}
#mflx-responsive-view .r-hero{--pt:calc(var(--cab-h) + 16px);--pb:54px;--lado-c:20px;--gap-c:12px;--veu-cor:0,0,0}
#mflx-responsive-view .r-inst{--pt:26px;--pb:46px;--lado-c:24px;--gap-c:10px;--veu-cor:26,29,30}
#mflx-responsive-view .r-area{--pt:26px;--pb:46px;--lado-c:24px;--gap-c:10px;--veu-cor:20,10,3}
#mflx-responsive-view .r-cena[data-texto="base"] .r-cena-texto{justify-content:flex-end}
#mflx-responsive-view .r-cena[data-texto="meio"] .r-cena-texto{justify-content:center}
#mflx-responsive-view .r-cena[data-texto="separado"] .r-cena-texto>.r-badges,
#mflx-responsive-view .r-cena[data-texto="separado"] .r-cena-texto>.r-badge-strip{margin-top:auto!important}
#mflx-responsive-view .r-cena[data-texto] .r-cena-veu{background:
  linear-gradient(180deg,rgba(var(--veu-cor),.66) 0,rgba(var(--veu-cor),.4) calc(var(--veu-t,0%)*.72),rgba(var(--veu-cor),0) calc(var(--veu-t,0%) + 12%)),
  linear-gradient(0deg,rgba(var(--veu-cor),.62) 0,rgba(var(--veu-cor),.36) calc(var(--veu-b,0%)*.72),rgba(var(--veu-cor),0) calc(var(--veu-b,0%) + 12%))!important}
#mflx-responsive-view .r-cena[data-texto="meio"] .r-cena-veu{background:linear-gradient(90deg,rgba(var(--veu-cor),.7) 0,rgba(var(--veu-cor),.42) 36%,rgba(var(--veu-cor),0) 64%),
  linear-gradient(0deg,rgba(var(--veu-cor),.45) 0,rgba(var(--veu-cor),0) 16%)!important}
}
@media(min-width:600px) and (max-width:1024px){
#mflx-responsive-view .r-hero{--lado-c:var(--mflx-lat);--pb:58px}
#mflx-responsive-view .r-inst .r-cena h2,#mflx-responsive-view .r-area .r-cena h2{max-width:16ch}
#mflx-responsive-view .r-inst .r-cena p{max-width:40ch}
}
@media(min-width:768px) and (max-width:1024px){
#mflx-responsive-view .r-inst,#mflx-responsive-view .r-area{--pt:40px;--lado-c:48px;--pb:54px}
}
/* faixa: o texto fica numa faixa da cor da cena acima da foto, que aparece inteira na largura (sem zoom); um degradê liga as duas */
@media(max-width:1024px){
#mflx-responsive-view .r-cena[data-texto="faixa"]{max-height:none!important;aspect-ratio:auto!important}
#mflx-responsive-view .r-cena[data-texto="faixa"] .r-cena-pic,#mflx-responsive-view .r-cena[data-texto="faixa"]>.r-cena-foto{top:auto!important;bottom:0!important;height:var(--foto-h)!important}
#mflx-responsive-view .r-cena[data-texto="faixa"] .r-cena-texto{height:var(--faixa);padding-bottom:0!important;justify-content:flex-start}
#mflx-responsive-view .r-cena[data-texto="faixa"] .r-cena-veu{background:linear-gradient(180deg,rgb(var(--veu-cor)) 0,rgb(var(--veu-cor)) calc(var(--faixa) - 1px),rgba(var(--veu-cor),.55) calc(var(--faixa) + 10px),rgba(var(--veu-cor),0) calc(var(--faixa) + 64px)),
  linear-gradient(0deg,rgba(var(--veu-cor),.4) 0,rgba(var(--veu-cor),0) 60px)!important}
#mflx-responsive-view .r-inst .r-cena[data-texto="faixa"],#mflx-responsive-view .r-area .r-cena[data-texto="faixa"]{background:rgb(var(--veu-cor))}
}
/* celular: o título do herói pode usar a largura toda (duas linhas em vez de três deixam mais espaço para o produto) */
@media(max-width:599px){#mflx-responsive-view .r-hero .r-cena h2{max-width:none}}
/* celular largo e tablet: coluna de texto mais estreita no institucional e em produtos em uso, para o produto ter mais lugar */
@media(min-width:600px) and (max-width:1024px){#mflx-responsive-view .r-inst .r-cena p,#mflx-responsive-view .r-area .r-cena p{max-width:32ch}
  #mflx-responsive-view .r-area .r-cena h2{max-width:14ch}}
/* 16/09: na faixa o texto não disputa espaço com a foto, então o parágrafo usa a largura toda (a faixa fica mais baixa) */
@media(max-width:1024px){#mflx-responsive-view .r-cena[data-texto="faixa"] p{max-width:62ch!important}#mflx-responsive-view .r-cena[data-texto="faixa"] h2{max-width:none!important}}
/* 16/09: institucional e produtos em uso no tablet com letra proporcional ao desenho (54px e 21px eram maiores que o necessário) */
@media(min-width:600px) and (max-width:1024px){
#mflx-responsive-view .r-inst .r-cena h2,#mflx-responsive-view .r-area .r-cena h2{font-size:clamp(26px,4.2vw,40px)!important}
#mflx-responsive-view .r-inst .r-cena p,#mflx-responsive-view .r-area .r-cena p{font-size:clamp(15px,2vw,18px)!important}
}

/* ── 16/09/2026: cabeçalho do COMPUTADOR 30% menor desde o primeiro quadro ─────────────────────────────────────────────────────
   O fignav.js só monta o cabeçalho fixo (cópias menores) depois que as fontes carregam; até lá o desenho mostrava a aba da logo e
   os botões no tamanho antigo, que encolhiam de repente alguns segundos depois. Aqui o próprio desenho já sai reduzido.
   Posições do desenho (iguais nas 14 páginas conferidas): lupa 1386/29, rastreio 1461/28, orçamento 1535/28, MENU 1609/29 e o
   número do orçamento 1613/52. Os botões encolhem ancorados no canto superior direito (1920, 0) e sobem 9px; a logo, ancorada em
   (0, 0). O fignav.js repete a mesma regra com !important a partir das posições reais (vale ela, se um modelo mudar).
   17/09/2026: botões da direita 10% maiores (escala 0,77 e translateY -14,67px: o centro deles fica no mesmo lugar).
   21/09/2026: cabeçalho 15% maior, logo e botões (logo 0,805; botões 0,8855 e translateY -16,87px). */
@media(min-width:1025px){
#canvas a[aria-label="Página inicial"][style*="absolute"],#canvas img[src*="logo-multfluxo"][style*="absolute"]{transform-origin:0 0;transform:scale(calc(.8855 * var(--mflx-cab-k,1)))}
#canvas img[alt="Busca"]{transform-origin:534px -29px;transform:translateY(calc(-16.87px * var(--mflx-cab-k,1))) scale(calc(.8855 * var(--mflx-cab-k,1)))}
#canvas img[alt="Rastreamento"]{transform-origin:459px -28px;transform:translateY(calc(-16.87px * var(--mflx-cab-k,1))) scale(calc(.8855 * var(--mflx-cab-k,1)))}
#canvas img[alt="Carrinho"]{transform-origin:385px -28px;transform:translateY(calc(-16.87px * var(--mflx-cab-k,1))) scale(calc(.8855 * var(--mflx-cab-k,1)))}
#canvas #menu-open-btn{transform-origin:311px -29px;transform:translateY(calc(-16.87px * var(--mflx-cab-k,1))) scale(calc(.8855 * var(--mflx-cab-k,1)))}
#canvas #mflx-selo-orc{transform-origin:307px -52px;transform:translateY(calc(-16.87px * var(--mflx-cab-k,1))) scale(calc(.8855 * var(--mflx-cab-k,1)))}
}

/* 16/09 caminho do produto: "Produtos · categoria · produto" clicável no topo da página de produto (celular, tablet, janela estreita) */
@media(max-width:1024px){
#mflx-responsive-view .r-breadcrumb{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;column-gap:8px;font-size:15px;line-height:1.3;color:#9e9e9e;margin:-6px 0 -14px}
#mflx-responsive-view .r-breadcrumb-item{display:inline-flex;align-items:center;gap:8px;min-width:0}
#mflx-responsive-view .r-breadcrumb-link{display:inline-flex;align-items:center;min-height:32px;color:#6d6e71;text-decoration:none;overflow-wrap:anywhere}
#mflx-responsive-view .r-breadcrumb-link[aria-current]{color:#323031}
#mflx-responsive-view .r-breadcrumb-link:hover{color:#f37920}
#mflx-responsive-view .r-breadcrumb-link:focus-visible{outline:2px solid #f37920;outline-offset:2px;border-radius:4px}
}

/* Cards de produtos do celular em páginas — player no institucional e nos cards (17/09/2026, pedido do usuário): uma página por slide do computador (2x2), troca sozinha em 10 s; a faixa de baixo (padding-bottom) é do player (player-home.js, chave "cards"). Telefone: cartão em pé (foto em cima); tablet (>=768): cartão deitado, como a lista antiga. */
#mflx-responsive-view .r-produtos{padding-bottom:8px}
#mflx-responsive-view .r-pcards{padding-bottom:52px}
#mflx-responsive-view .r-pcards .r-track{padding:6px 20px 14px;column-gap:20px;scroll-padding-inline:20px}
#mflx-responsive-view .r-pcards .r-track>*{flex:0 0 100%}
#mflx-responsive-view .r-pcards-pagina{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-content:start}
#mflx-responsive-view .r-pcards .r-pcard{grid-template-columns:minmax(0,1fr);align-items:start;align-content:start;gap:10px;padding:14px 12px 16px;min-height:0;border-radius:22px}
#mflx-responsive-view .r-pcards .r-pcard-foto{order:-1;justify-self:center;width:100%!important;height:92px!important}
#mflx-responsive-view .r-pcards .r-pcard-texto{gap:6px}
#mflx-responsive-view .r-pcards .r-pcard h3{font-size:16px;line-height:1.15}
#mflx-responsive-view .r-pcards .r-pcard p{font-size:12.5px;line-height:1.3}
#mflx-responsive-view .r-pcards .r-pcard .r-cta{padding:5px 12px;min-height:30px;font-size:13px;margin-top:2px}
@media(min-width:768px) and (max-width:1024px){
#mflx-responsive-view .r-pcards{padding-bottom:60px}
#mflx-responsive-view .r-pcards .r-track{padding-inline:32px;scroll-padding-inline:32px;column-gap:32px}
#mflx-responsive-view .r-pcards-pagina{gap:20px}
#mflx-responsive-view .r-pcards .r-pcard{grid-template-columns:minmax(0,1fr) 112px;align-items:center;gap:12px;padding:24px 16px 24px 24px;min-height:214px;border-radius:28px}
#mflx-responsive-view .r-pcards .r-pcard-foto{order:0;width:112px!important;height:156px!important}
#mflx-responsive-view .r-pcards .r-pcard-texto{gap:10px}
#mflx-responsive-view .r-pcards .r-pcard h3{font-size:23px}
#mflx-responsive-view .r-pcards .r-pcard p{font-size:15px}
#mflx-responsive-view .r-pcards .r-pcard .r-cta{padding:8px 18px;min-height:40px;font-size:16px;margin-top:4px}
}
/* ═══ 21/09/2026 — CELULAR (pedido do usuário, prévia aprovada com o branco 22px mais à esquerda):
   1. "Locação" ao lado de "Compra"; 2. cores em no máximo 2 linhas; 3. botões do cabeçalho ~15% maiores; 4. logo do mesmo tamanho,
   com a aba um pouco para a esquerda e SÓ A PARTE BRANCA 22px mais para a esquerda (máscara com o desenho do branco; a logo não anda).
   O cabeçalho da home/catálogo (mf-layout.css) recebe as mesmas contas — tem de continuar igual em todas as páginas.
   Fica no FIM do arquivo para valer sobre as regras de cima. ═══ */
/* 1. o formulário do celular é uma coluna flex; vira linha com quebra e só as duas opções "Opção:" dividem a linha */
#mflx-responsive-view .r-product-form:has(.mflx-radio-opcao[aria-label^="Opção:"]){flex-direction:row;flex-wrap:wrap;align-items:flex-start}
#mflx-responsive-view .r-product-form:has(.mflx-radio-opcao[aria-label^="Opção:"])>*{flex:0 0 100%;min-width:0;box-sizing:border-box}
#mflx-responsive-view .r-product-form>.r-field:has(>.mflx-radio-opcao[aria-label^="Opção:"]){flex:0 0 calc(50% - 8px)}
#mflx-responsive-view .r-product-form>.r-field:has(>.mflx-radio-opcao[aria-label^="Opção:"]) .mflx-radio-opcao{width:100%}
/* 2. cores: grade de 6 por linha (12 cores = 2 linhas; cor escondida não ocupa lugar) — celular e tablet (no tablet a coluna do
   formulário também é estreita e dava 3 linhas) */
@media(max-width:1024px){
#mflx-responsive-view .r-color-row{display:grid!important;grid-template-columns:repeat(6,1fr);gap:10px 0;justify-items:start}
#mflx-responsive-view .r-color-row>.r-live-color{width:min(44px,calc(100% - 4px))!important;height:auto!important;aspect-ratio:1}
}
/* 3. botões ~15% maiores na faixa de celular (48,3 → 55,5); tablet como estava */
@media(max-width:1024px){html.mflx-small{--ico:max(48.3px,min(14.18vw,55.5px),min(7.36vw,73.6px))}}
@media(min-width:400px) and (max-width:439px){html.mflx-small{--ico:min(12.9vw,55.5px)}}
/* 4. aba da logo: mesma medida, deslocada até a logo ter à esquerda a margem que os botões têm à direita; só o branco recua mais 22px */
@media(max-width:734px){
#mflx-responsive-view .r-header .r-logo{left:min(0px,calc(var(--lado) - var(--cab-h) * .7394))!important}
.r-header .r-logo,#mflx-responsive-view .r-header .r-logo{background-size:40% 100%!important}
#mflx-responsive-view .r-header .r-logo img{-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 480 127' preserveAspectRatio='none'%3E%3Cpath d='M0 0V126.745H331.229C345.344 126.745 358.894 121.096 368.963 111.114L480 0H0Z'/%3E%3C/svg%3E") -22px 0/100% 100% no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 480 127' preserveAspectRatio='none'%3E%3Cpath d='M0 0V126.745H331.229C345.344 126.745 358.894 121.096 368.963 111.114L480 0H0Z'/%3E%3C/svg%3E") -22px 0/100% 100% no-repeat}
}
/* ═══ fim do bloco "celular 21/09" ═══ */

/* ═══ 21/09/2026 — PADRÃO DO CABEÇALHO NO COMPUTADOR: tamanho FIXO por versão de corte (não cresce mais com a janela).
   --mf-cab-vw = 1% da largura de referência da versão (1046 / 1343 / 1600 px) — MESMA tabela do mf-layout.css (mudar nos dois).
   Nestas páginas o desenho inteiro é ampliado pela largura da janela; o cabeçalho recebe k = referência ÷ largura da janela
   (--mflx-cab-k). O fignav.js grava o k exato (sem a barra de rolagem); aqui vale para o 1º quadro, antes de ele rodar. ═══ */
@media(min-width:1025px){:root{--mf-cab-vw:10.46px}}
@media(min-width:1069px){:root{--mf-cab-vw:13.43px}}
@media(min-width:1441px){:root{--mf-cab-vw:16px}}
@supports (width:calc(1px * tan(atan2(1px,1vw)))){
@media(min-width:1025px){:root{--mflx-cab-k:tan(atan2(calc(100 * var(--mf-cab-vw)),100vw))}}
}