/* ===================================================================== patch-mobile.css — camada responsiva do Site Macro 2026 (parte CSS). NÃO editar os .dc.html: este arquivo é injetado em cada página por _patch/build.sh no empacotamento, para sobreviver a um novo export do builder. Duas decisões que explicam o formato deste arquivo: 1. As classes .mp-* NÃO existem no HTML — quem as aplica é o patch-mobile.js, lendo o CSSOM. Motivo: o runtime do builder reescreve os atributos style (o "padding:0 48px" do arquivo chega ao DOM como "padding: 0px 48px"), então seletor [style*="..."] casa com zero elementos. Medido no navegador, não presumido. 2. !important em quase tudo, porque o export estiliza inline praticamente todo elemento, e inline vence classe. Tiers, aplicados em pelo JS (não por @media — ver comentário no .js sobre o layout viewport de ~980px em telefone): [data-mp-narrow] <= 1000px · [data-mp-phone] <= 640px ===================================================================== */ /* ---------- 1. Barra de navegação (seletores estruturais) ---------- */ html[data-mp-narrow] header > div:first-child{ flex-wrap:wrap!important; height:auto!important; padding:10px 16px!important; gap:12px!important; row-gap:0!important; } .mp-burger{display:none} html[data-mp-narrow] .mp-burger{ display:flex!important; margin-left:auto; align-items:center; justify-content:center; width:44px; height:44px; /* alvo de toque mínimo */ background:transparent; border:1px solid rgba(255,255,255,.18); border-radius:10px; cursor:pointer; padding:0; flex:0 0 auto; } .mp-burger span{display:block;width:18px;height:1.5px;background:#fff;position:relative} .mp-burger span::before,.mp-burger span::after{ content:"";position:absolute;left:0;width:18px;height:1.5px;background:#fff } .mp-burger span::before{top:-6px} .mp-burger span::after{top:6px} /* nav, seletor de idioma e CTA saem da barra e viram painel sob o logo */ html[data-mp-narrow] header > div:first-child > nav, html[data-mp-narrow] header > div:first-child > div, html[data-mp-narrow] header > div:first-child > a:not(:first-child){ display:none!important; } html[data-mp-narrow] header[data-mp-menu="open"] > div:first-child > nav, html[data-mp-narrow] header[data-mp-menu="open"] > div:first-child > div, html[data-mp-narrow] header[data-mp-menu="open"] > div:first-child > a:not(:first-child){ display:flex!important; width:100%!important; flex:1 0 100%!important; } html[data-mp-narrow] header[data-mp-menu="open"] > div:first-child > nav{ flex-direction:column!important; align-items:stretch!important; gap:0!important; padding:8px 0 14px!important; max-height:70vh; overflow-y:auto; } html[data-mp-narrow] header[data-mp-menu="open"] > div:first-child > div{ gap:16px!important; padding:12px 4px!important; border-top:1px solid rgba(255,255,255,.1)!important; } /* Submenus: no touch não existe :hover, então o segundo nível (Vendas, Cobrança, Goatable, ...) vira lista inline sempre visível. */ html[data-mp-narrow] header .nvd{height:auto!important;display:block!important} html[data-mp-narrow] header .nvd > a{ display:block!important;padding:12px 4px!important;font-size:15px!important;color:#fff!important } html[data-mp-narrow] header .nvd > a::after{display:none!important} html[data-mp-narrow] header .nvm{ position:static!important;opacity:1!important;transform:none!important; pointer-events:auto!important;box-shadow:none!important;border:0!important; background:transparent!important;min-width:0!important; padding:0 0 6px 12px!important;top:auto!important;left:auto!important; } html[data-mp-narrow] header .nvm a{padding:10px 8px!important;font-size:14px!important} /* ---------- 2. Gutters laterais (.mp-gutter = padding lateral de 48px) ---------- */ html[data-mp-narrow] .mp-gutter{padding-left:24px!important;padding-right:24px!important} html[data-mp-phone] .mp-gutter{padding-left:16px!important;padding-right:16px!important} /* ---------- 3. Grids ---------- */ html[data-mp-narrow] .mp-grid-multi{grid-template-columns:repeat(2,minmax(0,1fr))!important} html[data-mp-narrow] .mp-grid-fixa{grid-template-columns:minmax(0,1fr)!important} html[data-mp-phone] .mp-grid-multi, html[data-mp-phone] .mp-grid-2, html[data-mp-phone] .mp-grid-fixa{grid-template-columns:minmax(0,1fr)!important} /* .mp-grid-auto (rótulo/valor) fica como está de propósito */ /* ---------- 4. Ritmo vertical ---------- */ html[data-mp-narrow] .mp-secao-alta{padding-top:60px!important;padding-bottom:60px!important} html[data-mp-phone] .mp-secao-alta{padding-top:40px!important;padding-bottom:40px!important} html[data-mp-narrow] .mp-gap-grande{gap:36px!important} html[data-mp-phone] .mp-gap-grande{gap:28px!important} /* ---------- 5. Tipografia ---------- */ html[data-mp-narrow] .mp-fs-64{font-size:44px!important} html[data-mp-narrow] .mp-fs-56{font-size:40px!important} html[data-mp-phone] .mp-fs-64{font-size:32px!important;line-height:1.1!important} html[data-mp-phone] .mp-fs-56{font-size:30px!important;line-height:1.12!important} html[data-mp-phone] .mp-fs-42{font-size:26px!important;line-height:1.18!important} html[data-mp-phone] .mp-fs-34{font-size:22px!important;line-height:1.25!important} html[data-mp-phone] .mp-fs-26{font-size:19px!important} /* ---------- 6. Guardas de overflow ---------- */ html[data-mp-narrow] img{max-width:100%!important} html[data-mp-phone] .mp-nowrap{white-space:normal!important} /* ---------- 7. Formulário de contato (usabilidade mobile) ---------- */ html[data-mp-narrow] #contato input, html[data-mp-narrow] #contato select{ font-size:16px!important; /* abaixo de 16px o iOS dá zoom ao focar */ min-height:46px!important; width:100%!important; }