/* ============================================================ Fischertec — ajustes de responsividade para celular e tablet As páginas usam estilo inline (style="..."), que vence qualquer regra normal de folha de estilo. Por isso cada override abaixo usa !important e seletores de atributo que casam com o texto do style. ATENÇÃO ao escrever novas regras: o runtime do dc (React) re-serializa o style inline com espaço depois dos dois-pontos. O HTML traz "inset:-40px", mas no DOM vira "inset: -40px". Um seletor com apenas uma das formas falha silenciosamente. Por isso todo seletor que depende de um valor aparece nas duas grafias. ============================================================ */ img, iframe, svg { max-width: 100%; } body { -webkit-text-size-adjust: 100%; } /* No desktop os elementos que o script anexa ficam ocultos, e os nós originais seguem no lugar de sempre — nada foi movido. */ .fis-nav-toggle, .fis-filtros-botao, .fis-abas { display: none; } /* Faixa de números do hero — vale para TODAS as larguras. Com o quarto número (+200 máquinas vendidas) os itens deixaram de caber nos ~565px da coluna do hero e "Assistência" quebrava sozinha numa segunda linha, com um divisor solto no fim da primeira. Reduzir o vão de 28 para 14px e o rótulo em 1px devolve tudo à mesma linha, sem tirar informação. */ [style*="margin-top: 38px"][style*="flex-wrap"], [style*="margin-top:38px"][style*="flex-wrap"] { gap: 14px !important; } [style*="margin-top: 38px"] [style*="font-size: 13px"], [style*="margin-top:38px"] [style*="font-size:13px"] { font-size: 12px !important; } /* ---------- tablet e celular ---------- */ @media (max-width: 900px) { /* Toda grade de várias colunas passa a empilhar. Este seletor não depende de valor, então funciona nas duas grafias. */ [style*="grid-template-columns"] { grid-template-columns: 1fr !important; } /* Exceção: listas de especificação ficam melhor em duas colunas. */ dl[style*="grid-template-columns"] { grid-template-columns: auto 1fr !important; } .wrap { padding-inline: 18px !important; } /* Cabeçalho de celular: hambúrguer à esquerda, logo centralizado, CTA à direita — uma linha só. O menu abre por cima do conteúdo. A reestruturação do DOM é feita pelo menu-mobile.js. */ .wrap[style*="height:68px"], .wrap[style*="height: 68px"] { height: 60px !important; gap: 0 !important; padding-block: 0 !important; position: relative !important; flex-wrap: nowrap !important; /* hambúrguer encostado à esquerda, CTA à direita; o logo é posicionado à parte, no centro da tela */ justify-content: space-between !important; } .wrap[style*="height:68px"] img, .wrap[style*="height: 68px"] img { height: 36px !important; } .fis-nav-toggle { display: flex !important; order: 1; flex: none; flex-direction: column; justify-content: center; gap: 5px; width: 40px; height: 44px; padding: 0; margin-left: -6px; background: none; border: 0; cursor: pointer; } .fis-nav-toggle span { display: block; width: 22px; height: 2px; background: #14171a; border-radius: 2px; transition: transform .2s ease, opacity .15s ease; } /* vira um X quando aberto */ .fis-nav-aberto .fis-nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .fis-nav-aberto .fis-nav-toggle span:nth-child(2) { opacity: 0; } .fis-nav-aberto .fis-nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Fora do fluxo do flex: assim o logo fica no centro da TELA, e não no meio do espaço que sobra entre o hambúrguer e o botão do WhatsApp — que têm larguras diferentes e puxariam o logo para o lado. O .wrap é position:relative e centralizado, então 50% dele coincide com 50% da viewport. */ .wrap[style*="height: 68px"] > a:first-child, .wrap[style*="height:68px"] > a:first-child { order: 2; position: absolute; left: 50%; transform: translateX(-50%); margin: 0 !important; } /* WhatsApp: último da barra (o hambúrguer é