/* Log Manager — ajustes globais e responsividade Carregado por último no , depois do CSS de cada página. */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } /* overflow-x:clip e não hidden — "hidden" transforma o elemento em contêiner de rolagem, e aí o position:sticky do cabeçalho passa a grudar nesse contêiner (que nunca rola) em vez de na viewport. O mesmo vale para o
que embrulha cada página. */ body { overflow-x: clip; max-width: 100%; } /* Rede de segurança para navegador sem overflow:clip. No elemento raiz o overflow é propagado para a viewport, então não quebra o sticky. */ html { overflow-x: hidden; } /* O runtime do injeta "html,body{height:100%}" e "#dc-root{height:100%}" no DEPOIS deste arquivo. Numa página que rola, isso prende o conteúdo numa caixa de 100vh — e o cabeçalho sticky só gruda até o fim dessa caixa, ou seja, some depois da primeira tela. */ html, body, #dc-root, #dc-root > .sc-host { height: auto !important; min-height: 100% !important; } img, svg, video, canvas { max-width: 100%; } img { height: auto; } /* Evita que tabelas/blocos largos estourem a viewport no celular */ @media (max-width: 900px) { [style*="max-width:1280px"], [style*="max-width: 1280px"] { padding-left: 20px !important; padding-right: 20px !important; } } /* ---------- Home: a única página sem breakpoints próprios ---------- */ @media (max-width: 980px) { html[data-page="index"] [style*="grid-template-columns"] { grid-template-columns: 1fr !important; } html[data-page="index"] [style*="grid-template-columns"] > * { min-width: 0; } } @media (max-width: 900px) { html[data-page="index"] h1 { font-size: clamp(30px, 8vw, 46px) !important; line-height: 1.08 !important; } html[data-page="index"] h2 { font-size: clamp(24px, 6.4vw, 34px) !important; line-height: 1.12 !important; } html[data-page="index"] h3 { font-size: clamp(17px, 4.6vw, 20px) !important; } } /* ---------- Ajustes de telefone, válidos para todas as páginas ---------- */ @media (max-width: 620px) { h1 { font-size: clamp(28px, 8.4vw, 40px) !important; line-height: 1.1 !important; } h2 { font-size: clamp(23px, 6.8vw, 31px) !important; line-height: 1.14 !important; } /* Botões e CTAs ocupam a largura, com altura de toque confortável */ a[style*="border-radius:999px"][style*="height:50px"], a[style*="border-radius: 999px"][style*="height: 50px"] { width: 100%; justify-content: center; min-height: 48px; } /* Cartões e blocos com padding generoso ficam mais compactos */ [style*="padding:32px"], [style*="padding: 32px"] { padding: 22px !important; } [style*="padding:30px"], [style*="padding: 30px"] { padding: 20px !important; } /* Mocks de painel dentro de molduras seguem em escala, sem quebrar colunas */ [style*="aspect-ratio"] [style*="grid-template-columns"] { grid-template-columns: revert !important; } } /* ---------- Cabeçalho no celular ---------- Logo + CTA + hambúrguer não cabem em 390px: o CTA sai e o menu fica alcançável. O mesmo link continua disponível dentro do menu e nas seções da página. */ @media (max-width: 620px) { header a[href*="/tracking/"] { display: none !important; } header button[aria-label="Menu"] { margin-left: auto; } } /* Blocos com largura fixa em px viram fluidos no celular */ @media (max-width: 900px) { [style*="width:520px"], [style*="width: 520px"], [style*="width:560px"], [style*="width: 560px"], [style*="width:586px"], [style*="width: 586px"], [style*="width:612px"], [style*="width: 612px"], [style*="width:620px"], [style*="width: 620px"], [style*="width:640px"], [style*="width: 640px"], [style*="width:720px"], [style*="width: 720px"], [style*="width:760px"], [style*="width: 760px"], [style*="width:880px"], [style*="width: 880px"] { width: 100% !important; max-width: 100% !important; } } /* Faixas de logos: menor no celular */ @media (max-width: 620px) { .lm-chip { width: 148px !important; height: 68px !important; } .lm-logo { height: 34px !important; } } /* Respeita quem pediu menos movimento */ @media (prefers-reduced-motion: reduce) { .lm-track, .lm-track-rev { animation: none !important; } } /* ---------- Âncoras sob o cabeçalho fixo ---------- O header tem 72px; sem isto o alvo da âncora para escondido atrás dele. Sem scroll-behavior:smooth global — a rolagem nativa instantânea é a que o resto do site já esperava; animar tudo deixava o clique com solavanco. */ [id] { scroll-margin-top: 88px; } /* ================================================================ Home no celular — a única página sem breakpoints próprios. Os estilos dela são todos inline, então tudo aqui casa por seletor de atributo, como no resto deste arquivo. ================================================================ */ /* O mock do navegador e o do celular têm grades internas (a UI falsa do painel). A regra que achata tudo em 1 coluna abaixo de 980px também pegava essas grades e desmontava o mock. Só havia proteção até 620px. */ @media (max-width: 980px) { html[data-page="index"] [style*="aspect-ratio"] [style*="grid-template-columns"] { grid-template-columns: revert !important; } } /* Tablet: 5 números ou 4 cards empilhados em coluna única viram uma página interminável. Duas colunas antes de empilhar de vez. Os 3 reels continuam lado a lado — em 9/16 eles cabem bem. */ @media (min-width: 620px) and (max-width: 980px) { html[data-page="index"] [style*="repeat(5,1fr)"], html[data-page="index"] [style*="repeat(4,1fr)"] { grid-template-columns: repeat(2, 1fr) !important; } html[data-page="index"] [style*="repeat(3,1fr)"] { grid-template-columns: repeat(3, 1fr) !important; } } @media (max-width: 900px) { /* "entregas no mesmo dia" tem font-size próprio (58px) dentro do h1. O h1 encolhia pelo clamp e esse trecho ficava maior que o título. */ html[data-page="index"] h1 span, html[data-page="index"] h1 div, html[data-page="index"] h2 span, html[data-page="index"] h2 div { font-size: inherit !important; } /* Números das faixas de métrica: ficam em
, fora do alcance das regras de h1/h2/h3. */ html[data-page="index"] div[style*="font-size: 40px"], html[data-page="index"] div[style*="font-size:40px"] { font-size: clamp(26px, 6.8vw, 34px) !important; } html[data-page="index"] div[style*="font-size: 34px"], html[data-page="index"] div[style*="font-size:34px"] { font-size: clamp(23px, 6vw, 30px) !important; } } @media (max-width: 620px) { /* Banners com padding próprio, fora da lista de 30/32px acima. */ html[data-page="index"] [style*="padding:34px 38px"], html[data-page="index"] [style*="padding: 34px 38px"], html[data-page="index"] [style*="padding:32px 36px"], html[data-page="index"] [style*="padding: 32px 36px"], html[data-page="index"] [style*="padding:30px 32px"], html[data-page="index"] [style*="padding: 30px 32px"] { padding: 22px !important; } /* Banner "Quero entregar no mesmo dia": o parágrafo tinha altura fixa de 58px e alinhamento à direita. No celular o texto vira 5 linhas e vazava por cima do bloco de baixo. */ html[data-page="index"] p[style*="height:58px"], html[data-page="index"] p[style*="height: 58px"] { height: auto !important; text-align: left !important; } /* Largura fixa que ficou de fora da lista geral. */ [style*="width:319px"], [style*="width: 319px"] { width: 100% !important; max-width: 100% !important; } /* Faixa de logos: a regra de altura sozinha achatava a imagem, porque a largura seguia fixa no inline — ma-festa (128x72) virava 128x34. */ .lm-logo { width: auto !important; } /* CTAs em pílula ocupam a largura. A regra antiga só pegava height:50px, e a home tem botões de 46, 52, 54 e 62px. */ a[style*="border-radius:999px"][style*="height:46px"], a[style*="border-radius: 999px"][style*="height: 46px"], a[style*="border-radius:999px"][style*="height:52px"], a[style*="border-radius: 999px"][style*="height: 52px"], a[style*="border-radius:999px"][style*="height:54px"], a[style*="border-radius: 999px"][style*="height: 54px"], a[style*="border-radius:999px"][style*="height:62px"], a[style*="border-radius: 999px"][style*="height: 62px"] { width: 100%; justify-content: center; min-height: 48px; } }