(caso do #etiquetas);
* 2. um VAZIO logo antes da seção (caso do #solucoes e do
* #segmentos) — daí o `:empty`, que impede a regra de pegar uma seção de
* conteudo que por acaso tenha id e venha antes de outra seção; essa
* levaria o proprio topo para debaixo da navbar.
* Quem nao casa com nenhum dos dois segue com as 6rem de folga, que e a
* protecao certa para ancora sem respiro proprio. */
section.py-5[id]:has(> .container.py-5),
[id]:empty:has(+ section.py-5 > .container.py-5) {
scroll-margin-top: -6rem;
}
/* MENU DO CELULAR: ele pode ficar mais alto que a tela.
*
* A navbar é `fixed-top` e colapsa abaixo de 1200px (`navbar-expand-xl`). Ao
* abrir o menu, ela cresce em fluxo — 482px só com os oito itens, 768px com
* "Segmentos" aberto. Como é fixa, o que passa da altura da janela NÃO rola:
* simplesmente não dá para alcançar. Num aparelho com ~675px de área útil
* (barra de status e barra do navegador comem o resto), "Contato" e o campo de
* busca ficavam fora do alcance.
*
* O teto devolve a rolagem ao próprio menu. `100dvh` é a altura VIVA da janela,
* que no celular encolhe e cresce junto com a barra do navegador — com `100vh`
* o navegador reporta a tela toda e o menu continuaria estourando por baixo. A
* linha `100vh` antes serve de reserva para quem não entende `dvh`.
*
* As 4.625rem descontadas são os 74px da navbar fechada, que fica acima do
* menu. Vale só abaixo do breakpoint: no desktop o menu é uma faixa horizontal
* e não precisa de teto nenhum. */
@media (max-width: 1199.98px) {
.navbar.fixed-top .navbar-collapse {
max-height: calc(100vh - 4.625rem);
max-height: calc(100dvh - 4.625rem);
overflow-y: auto;
}
}
/* ===========================================================================
* ALVOS DE TOQUE NO CELULAR
*
* Dedo nao e ponteiro de mouse. A Apple pede no minimo 44x44 CSS px por alvo,
* o Google 48x48, e ambos pedem ao menos 8px entre alvos vizinhos. O Bootstrap
* nao entrega isso sozinho: medido em 375px, o `.btn` sai com 38px de altura,
* o `.btn-sm` com 31px e o hamburguer com 40px. Pior era o rodape — 34 links
* de 25px, um debaixo do outro.
*
* Aqui a altura vem de PADDING, e nao de `min-height`: `.btn` e inline-block,
* entao min-height esticaria a caixa e deixaria o texto grudado no topo, fora
* do centro. Padding cresce a caixa e mantem o texto no meio, sem mexer no
* `display` — o que evitaria quebrar botao dentro de `.d-grid`, de flex
* column e afins.
*
* Vale ate 991.98px (tablet pra baixo). No desktop o ponteiro e preciso e os
* botoes ficam como estao, que e o desenho ja aprovado.
* =========================================================================== */
@media (max-width: 991.98px) {
/* .btn: 6px de padding + 25.5px de linha = 38px. 0.6rem leva a ~44.7px. */
.btn {
padding-top: 0.6rem;
padding-bottom: 0.6rem;
}
/* .btn-sm tem fonte e linha menores (21px), entao precisa de mais padding
que o .btn para chegar na mesma altura util. */
.btn-sm {
padding-top: 0.66rem;
padding-bottom: 0.66rem;
}
.navbar-toggler {
min-width: 44px;
min-height: 44px;
}
/* Rodape: os links usam `.p-0`, que e utilitario do Bootstrap e vem com
`!important` — sem repetir o `!important` aqui a regra nao pega. O `li`
ja tem `mb-2` (8px), que somado a este padding cumpre tambem o
espacamento minimo entre alvos vizinhos. */
footer .nav-link.p-0 {
padding-top: 0.65rem !important;
padding-bottom: 0.65rem !important;
}
/* A trilha de navegação e caso a parte. Os links dela tinham 16px de
altura, mas empurrar cada um para 44px transformaria a faixa da trilha
numa tarja gorda no topo de toda pagina interna. O criterio aqui e o da
WCAG 2.5.8 (nivel AA), que pede 24x24 CSS px e existe justamente para
link em linha de texto — 0.25rem de cada lado levam os 16px a 24px sem
engordar a faixa. */
.trilha .breadcrumb-item a {
display: inline-block;
padding-top: 0.25rem;
padding-bottom: 0.25rem;
}
/* Telefone, WhatsApp, e-mail e mapa listados em /contato tinham 28px de
altura. Sao os alvos que MAIS importam no celular — o dedo toca ali para
ligar — e eram dos menores da pagina. 0.5rem de cada lado levam a 44px.
O seletor pega a lista de contato sem depender do href do mapa, que vem
de dado da empresa e nao de um esquema fixo como tel: ou mailto:. */
.list-unstyled > li > a.d-flex,
a[href^="tel:"],
a[href^="mailto:"] {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
}
/* No celular o cartao de produto tem 152px de largura, e os 16px de `p-3` de
* cada lado sobravam 120px para a foto. Com 8px sobra mais foto sem que o
* produto encoste na borda do cartao. So no telefone: a partir de 576px o
* cartao ja e largo o bastante para o respiro maior. */
@media (max-width: 575.98px) {
.foto-produto {
padding: 0.5rem !important;
}
}
/* As fotos de maquininha têm a altura travada em 12rem por `style` inline e a
* largura livre, então as artes QUADRADAS (2000×2000, 1280×1280) saíam com
* 192px de largura dentro de um cartão de 182px e pisavam na borda dos dois
* lados. O `max-width` devolve a largura ao cartão; o `object-fit: contain`
* vem junto porque a altura continua presa em 12rem — sem ele, estreitar a
* caixa achataria o desenho em vez de encolhê-lo. */
.card_custom img {
max-width: 100%;
object-fit: contain;
}
/* Rede de segurança para qualquer estouro que escape: `clip` corta sem criar
* caixa de rolagem, então (ao contrário de `hidden`) não quebra position:
* sticky nem o scroll suave das âncoras do menu. Ela existe para o que ainda
* não foi encontrado, e não para varrer problema pra baixo do tapete: os
* estouros conhecidos estão corrigidos acima, na origem. */
body {
overflow-x: clip;
}
/* ===========================================================================
* TELA BAIXA (1366x768 e afins)
*
* O site foi desenhado olhando um monitor 1080p, onde sobra altura. Num
* notebook de 768px o desenho continua CERTO, mas fica apertado: medido em
* 1366x768, 23% de toda a altura da pagina e espacamento puro, e em algumas
* secoes chega a 42% — quase metade da rolagem e respiro. O visitante passa
* por 11,9 telas para ver a mesma coisa que em 1080p vê em bem menos, e cada
* tela mostra pouco conteudo.
*
* A regra abaixo desconta esse respiro so onde ele custa caro: telas de ate
* 820px de altura, do desktop pra cima. Em 1080p nada muda — a experiencia
* que voce aprovou fica intacta. Abaixo de 992px quem manda sao as regras de
* celular, que ja tem espacamento proprio.
*
* O criterio e ALTURA (`max-height`), e nao largura: o problema aqui e
* vertical. Um monitor 1366 de proporcao alta nao sofre disso.
* =========================================================================== */
@media (min-width: 992px) and (max-height: 820px) {
/* py-5 vale 3rem (48px). Na secao e no container, sao 192px por secao so
de folga. 2rem em cada corta isso para 128px, sem grudar o conteudo. */
section.py-5 {
padding-top: 2rem !important;
padding-bottom: 2rem !important;
}
section.py-5 > .container.py-5,
section.py-5 > .container-fluid.py-5 {
padding-top: 2rem !important;
padding-bottom: 2rem !important;
}
/* O cabecalho de cada secao reservava 48px ate o conteudo. */
section.py-5 .text-center.mb-5 {
margin-bottom: 2rem !important;
}
/* AJUSTE OBRIGATORIO, E NAO COSMETICO: o `scroll-margin-top: -6rem` das
ancoras foi calculado contra os 96px de respiro proprio da secao. Com o
respiro reduzido para 64px, aquele valor faria a rolagem parar com o
titulo 10px ATRAS da navbar. Aqui o desconto acompanha o novo respiro,
entao a ancora continua parando com o titulo logo abaixo da barra.
Se mexer no padding acima, refaca esta conta. */
section.py-5[id]:has(> .container.py-5),
[id]:empty:has(+ section.py-5 > .container.py-5) {
scroll-margin-top: -4rem;
}
}
/* A tabela comparativa de /segmentos tem 14 colunas e 31 linhas. Em 1080p ela
* cabe; em 1366 mede 1408px dentro de um espaco de 1265 e passa a rolar de
* lado — a leitura vira caca ao visto, com o nome do segmento saindo de vista
* na primeira coluna. Faltam 143px.
*
* O padding das celulas sozinho responde por 224px (14 colunas x 2 lados x
* 8px). Reduzindo para 4px sobram 112px de folga, mais que os 143 que faltam
* quando somado a fonte um ponto menor. Nada de esconder coluna: quem abre
* esta tabela quer justamente comparar todas.
*
* O teto de 1600px, e nao 1366: entre 1366 e 1600 a tabela tambem passa
* apertada, e apertar um pouco ali nao atrapalha quem tem tela grande. */
@media (min-width: 992px) and (max-width: 1600px) {
.table-responsive > table > thead > tr > th,
.table-responsive > table > tbody > tr > td {
padding-inline: 0.25rem;
font-size: 0.95rem;
}
}
/* ===========================================================================
* ESCALA TIPOGRAFICA EM NOTEBOOK (1280 / 1366 / 1024)
*
* A CAUSA RAIZ do site "ficar ruim no 1366" nao era espacamento: era a
* tipografia nao acompanhar a tela. Medido nas duas resolucoes, os tamanhos
* sao IDENTICOS — raiz 16px, corpo 17px, h1 40px, h2 32px — numa tela 29% mais
* estreita (1357 contra 1911 uteis).
*
* Os titulos usam `clamp()`, que deveria resolver, mas os dois extremos ja
* batem no TETO do clamp: `clamp(1.9rem, 1.35rem + 2.1vw, 2.5rem)` da 50px em
* 1366 e 61px em 1920 — os dois acima de 2.5rem, entao os dois viram 40px. O
* clamp so trabalha em tela pequena; do notebook pra cima ele esta saturado.
*
* Mexer na raiz resolve de uma vez e sem remendo: TUDO que esta em `rem`
* acompanha junto — fonte, espacamento, o `scroll-margin` das ancoras, o
* padding dos cartoes. A proporcao entre as pecas fica intacta; o conjunto so
* encolhe 6% para caber numa tela menor, que e o que o olho esperava.
*
* `93.75%` e nao `15px` de proposito: percentual respeita quem aumentou a
* fonte padrao do navegador por necessidade de leitura. Com `15px` fixo, esse
* ajuste do visitante seria ignorado.
*
* Teto em 1399.98px: 1440 pra cima ja tem largura sobrando e 16px cai bem.
* =========================================================================== */
@media (min-width: 992px) and (max-width: 1399.98px) {
html {
font-size: 93.75%;
}
}
/* Os botoes de categoria do FAQ (.btn-faq-cat) sao rotulos longos numa coluna
* estreita: "Manutencao e assistencia" pede 243px e a coluna oferece 215, entao
* tres dos oito quebravam em duas linhas e a barra lateral ficava desalinhada.
*
* Boa parte da culpa e do `letter-spacing: 0.75px` que os botoes herdam: em 24
* caracteres isso sozinho custa 18px. Aqui ele afrouxa e a fonte cai um ponto,
* o suficiente para caber com folga. So abaixo de 1400px — em tela larga a
* coluna e maior e nada disso e necessario. */
@media (min-width: 992px) and (max-width: 1399.98px) {
.btn-faq-cat {
/* 0.85rem e nao 0.9rem: com 0.9 o rotulo mais longo cabia por apenas
2px, e 2px nao e folga — basta a fonte carregar um instante depois,
ou o navegador arredondar diferente, para ele quebrar em duas linhas
de novo. Com 0.85rem sobram 14px, que aguentam essa variacao. */
font-size: 0.85rem;
/* O rotulo mais longo, "Manutencao e assistencia", pede 210px de texto
mais 18px de icone num espaco de 223. Faltavam 5px — e sao estes
tres ajustes minusculos que os devolvem, sem encolher a fonte a
ponto de atrapalhar a leitura nem sacrificar os icones, que ajudam a
bater o olho e achar a categoria. */
letter-spacing: 0.2px;
padding-inline: 0.35rem;
}
}