/* ==================================================================== v5-celular.css — os ajustes que só valem no telefone (spec 013, 16/09/2026) Pedido do Pedro: *"melhore e ajuste toda a versão para celular, teste e melhore"*. MEDIDO no banco de provas, 17 páginas em 390 × 844 (Chromium): · nenhuma página vaza para os lados — isso já estava certo; · o que estava errado era LEGIBILIDADE e DEDO: - 7 textos a 10px na landing, 11 no Escritório (os rótulos em monospace maiúsculo, que no monitor funcionam e no telefone somem); - links de rodapé com 16px de altura de toque, contra os 44px que o dedo pede; - tabela dentro de .rolagem que rola para o lado sem dizer que rola. TUDO AQUI É @media (max-width: 620px). Nada muda no computador — nenhuma cor, nenhum componente, nenhum leiaute. É a regra do Pedro: quando o pedido é ajustar, ajusta; não redesenha. ==================================================================== */ @media (max-width: 620px) { /* ---------------------------------------------- 1. o texto que sumia Os rótulos em monospace maiúsculo são a voz do painel — não dá para trocá-los por texto normal. Mas 10px com letter-spacing de .14em num telefone é decoração, não informação. Sobem para 11,5px e o espaçamento encolhe um pouco para caber a mesma palavra. */ body.v5 small, body.v5 .eyebrow, body.v5 .kicker, body.v5 .t-rot, body.v5 .tag { font-size: 11.5px; } body.v5 .kicker, body.v5 .eyebrow { letter-spacing: 1.1px; } body.v5 .sub, body.v5 .peq, body.v5 .mudo { font-size: 12.5px; line-height: 1.55; } /* ------------------------------------------- 2. o dedo precisa de 44px Medido: links de rodapé com 16px de altura. O alvo recomendado é 44px. Não mudamos o tamanho da letra — mudamos a ÁREA que aceita o toque. */ body.v5 .site-footer a, body.v5 footer[data-rodape] a, body.v5 .topnav a, body.v5 .barra nav a { display: inline-flex; align-items: center; min-height: 44px; padding-top: 4px; padding-bottom: 4px; } body.v5 .text-link, body.v5 .ghost, body.v5 .primary, body.v5 .light-button { min-height: 44px; } /* --------------------------------- 3. a tabela que rola sem avisar `.rolagem` resolve a tabela larga com scroll horizontal. Funciona — mas quem olha não sabe que existe mais coisa à direita. A sombra na borda direita aparece só enquanto há conteúdo escondido (background-attachment local + o degradê fixo por baixo). */ body.v5 .rolagem, body.v5 .tabwrap { background-image: linear-gradient(to right, var(--paper, #F3F5F9), rgba(243,245,249,0)), linear-gradient(to left, var(--paper, #F3F5F9), rgba(243,245,249,0)), linear-gradient(to right, rgba(9,11,18,.14), rgba(9,11,18,0)), linear-gradient(to left, rgba(9,11,18,.14), rgba(9,11,18,0)); background-position: left center, right center, left center, right center; background-repeat: no-repeat; background-size: 22px 100%, 22px 100%, 12px 100%, 12px 100%; background-attachment: local, local, scroll, scroll; } /* --------------------------------------- 4. nada de zoom ao focar campo iOS dá zoom em qualquer input com fonte abaixo de 16px, e depois não volta. Some com o zoom sem mexer no visual do computador. */ body.v5 input, body.v5 select, body.v5 textarea { font-size: 16px; } /* --------------------------------- 5. respiro nas laterais, sempre 16px */ body.v5 .section-wrap { padding-left: 16px; padding-right: 16px; } } /* ================================================================ spec 013 OS CASOS QUE A REGRA GERAL NAO ALCANCOU (medidos depois da 1a rodada). As regras acima sao `body.v5 small`. Quem tem seletor mais especifico ganha delas — e tres lugares tinham: a faixa de comando do Escritorio, o topo da pagina de conta e a barra de cima do aplicativo. Aqui cada um pelo nome. */ @media (max-width: 620px) { /* a faixa de comando: rotulo e nota do cartao */ body.v5-escritorio .hud-card small { font-size: 11px; letter-spacing: .09em; } body.v5-escritorio .hud-card i { font-size: 12px; } /* o topo da pagina de conta */ body.v5-conta .conta-topo small { font-size: 11.5px; } body.v5-conta .conta-explica { font-size: 12.5px; } /* A BARRA DE CIMA. Medido no DOM: ela e montada por JS como