/* ======================================================================
   VALEZIN & MALAVAZZI: ENQUADRAMENTO MOBILE
   Criado em 28/07/2026.

   POR QUE ESTE ARQUIVO EXISTE
   No celular, várias páginas ficavam mais largas do que a tela: dava
   para arrastar o dedo para o lado e o conteúdo saía do enquadramento.
   A causa não era uma só, eram quatro, e todas medidas no navegador
   antes de mexer em qualquer linha:

     1. TABELAS DE COMPARATIVO. A tabela de 3 colunas tem largura mínima
        de conteúdo perto de 450px. Como a página não tinha onde cortar,
        a tabela esticava o documento inteiro (societario, contratos,
        protecao-patrimonial, areas e o artigo da ICMS-ST).

     2. min-width: auto EM ITEM DE GRID E DE FLEX. Esse é o valor padrão
        e ele impede a coluna de encolher abaixo do conteúdo mais largo.
        Bastava um e-mail longo ou uma tabela dentro para a coluna toda
        travar em 450px, 550px, e levar a página junto.

     3. minmax(280px, 1fr) EM TELA DE 320px. A coluna mínima era maior
        do que o espaço disponível depois do respiro lateral. Vira
        estouro certo em iPhone SE e em Android pequeno.

     4. TEXTO EM FLEX QUE NÃO QUEBRA. No aceite da Política de
        Privacidade, cada pedaço do texto virava um item de flex
        independente, e item de flex não quebra linha com o vizinho.

   O QUE ESTE ARQUIVO FAZ
   Carrega DEPOIS de tudo (style.css, o <style> de cada página e o
   consent.css), justamente para ter a última palavra. Não redesenha
   nada: só garante que nada ultrapasse a largura da tela.

   ORDEM DE CARREGAMENTO no <head>:
     css/style.css → <style> da página → css/consent.css → ESTE ARQUIVO
   ====================================================================== */


/* ── 1. A trava de segurança foi REMOVIDA, e vale saber por quê ──
   Havia aqui um `overflow-x: clip` no html, como rede de segurança: se
   algum conteúdo novo escapasse no futuro, a página não sairia do
   enquadramento.

   Escrevi, no comentário original, que `clip` não quebra `position:
   sticky`. Estava errado, e só apareceu quando fui medir: com o clip no
   html, o `#navbar` PARA de grudar no topo. Rolando 2.500px, o menu
   simplesmente ia embora junto com a página. Comparado lado a lado com o
   site que está no ar, a diferença era essa e só essa.

   Testei as cinco variantes possíveis (clip no html, clip no body, hidden
   no body, e combinações). O resultado é uma escolha, não um ajuste: o
   que corta o excesso é justamente o que mata o menu fixo. Não existe
   configuração que dê as duas coisas.

   Fiquei com o menu. A rede de segurança só teria função se sobrasse
   algum estouro, e não sobra: as sete causas reais foram corrigidas e as
   25 páginas foram medidas em 320px, 375px e 412px COM a rede desligada
   de propósito, justamente para a medição ser honesta. Trocar um recurso
   que funciona todo dia por um seguro contra um problema que já não
   existe seria mau negócio.

   O que protege de verdade continua aqui embaixo, e nada disso mexe com
   o menu: mídia limitada à largura do contêiner (item 2), item de grid e
   de flex que pode encolher (item 3), tabela que rola dentro da própria
   moldura (item 4) e palavra longa que quebra. */

body {
  max-width: 100%;
}

/* iOS aumenta a fonte sozinho ao girar a tela e desalinha o layout. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Palavra longa sem espaço (e-mail, URL, número de processo) quebra em
   vez de empurrar a caixa que a contém. */
body {
  overflow-wrap: break-word;
}


/* ── 2. Mídia nunca ultrapassa o contêiner ── */
img,
svg,
video,
canvas,
iframe,
embed,
object {
  max-width: 100%;
}


/* ── 3. Item de grid e de flex pode encolher ──
   Esta é a correção central. min-width: auto é o padrão de item de grid
   e de flex, e é ele que trava a coluna na largura do conteúdo mais
   largo. Zerar devolve a decisão ao contêiner.

   O seletor universal tem especificidade zero, então qualquer min-width
   escrito de propósito no site (em classe, em id ou no atributo style)
   continua vencendo. A regra só desfaz o padrão do navegador. */
@media (max-width: 1024px) {
  * {
    min-width: 0;
  }
}


/* ── 4. Tabela: rola dentro da própria moldura ──
   A tabela de comparativo continua legível e com todas as colunas: quem
   estiver no celular arrasta o dedo DENTRO da tabela. O que não pode é
   ela arrastar a página inteira junto. */
.lp-table-wrap,
.area-table-wrap,
.vm-table-wrap {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Rede de segurança: qualquer tabela que apareça no texto corrido de um
   artigo, sem a moldura, rola dentro de si mesma. */
@media (max-width: 900px) {
  .vm-article > table,
  .artigo-conteudo > table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* No celular, espremer três colunas de texto corrido em 335px daria
   doze caracteres por linha, ilegível. Melhor manter a coluna com
   largura de leitura e deixar a tabela rolar dentro da moldura. */
@media (max-width: 900px) {
  .lp-table-wrap table,
  .area-table-wrap table {
    min-width: 520px;
  }
  .vm-table-wrap table {
    min-width: 480px;
  }
}

/* A dica de arrastar só existe para quem está no celular: no desktop a
   tabela cabe inteira e a frase seria ruído. */
.table-hint {
  display: none;
}
@media (max-width: 900px) {
  .table-hint {
    display: block;
    font-family: var(--sans, 'Inter', system-ui, -apple-system, sans-serif);
    font-size: .74rem;
    line-height: 1.5;
    color: var(--gray-2, #636E52);
    margin: 0 0 8px;
    letter-spacing: .01em;
  }
  /* Na areas.html a dica e o título ficam DENTRO da moldura que rola.
     Grudados à esquerda, não somem quando a tabela é arrastada. */
  .area-table-wrap .table-hint,
  .area-table-wrap .area-table-title {
    position: sticky;
    left: 0;
  }
}


/* ── 5. Aceite da Política de Privacidade ──
   Eram dois defeitos no mesmo lugar.

   O primeiro: a regra "#lpForm input" dava largura de 100% a TODO campo
   do formulário, e a caixa de seleção do aceite é um input. Ela nascia
   com 275px, sem poder encolher, e sozinha empurrava a linha para 432px.
   Como o seletor tem id, só um seletor mais específico o vence.

   O segundo: o texto ao lado era texto solto dentro de um flex, o que o
   transforma em itens independentes, e item de flex não quebra linha com
   o vizinho. Agora vive num <span> próprio que ocupa o resto da linha.

   A tributario.html usa outra marcação para o mesmo aceite (.lp-checkbox,
   com o texto já dentro de um span) e entra nas mesmas regras. */
#lpForm input[type="checkbox"],
#lpForm input[type="radio"],
.lp-consent input[type="checkbox"],
.lp-checkbox input[type="checkbox"],
.lp-field input[type="checkbox"] {
  width: auto;
  flex: 0 0 auto;
  align-self: flex-start;
}

.lp-consent,
.lp-checkbox {
  flex-wrap: wrap;
}
.lp-consent-txt,
.lp-checkbox > span {
  flex: 1 1 0;
  min-width: 0;
  text-align: left;
}

/* Defeito antigo, herdado do site anterior e visível na tributario.html:
   a regra ".lp-field label span" foi escrita para pintar de vermelho o
   asterisco de campo obrigatório, e acabava pintando também o texto do
   aceite, que aparecia vermelho e em negrito, com cara de mensagem de
   erro. O asterisco continua vermelho; o aceite volta ao texto normal. */
.lp-field .lp-checkbox {
  font-weight: 400;
}
.lp-field .lp-checkbox > span {
  color: #4A4D44;
  font-weight: 400;
}


/* ── 6. Respiro lateral no celular ──
   Na style.css a regra de 768px vinha ANTES da de 1024px, e as duas
   valem em tela pequena: a última ganhava e o celular herdava o respiro
   de tablet. Aqui a ordem está certa. */
@media (max-width: 768px) {
  .container {
    padding-left: 20px;
    padding-right: 20px;
  }
}
@media (max-width: 400px) {
  .container {
    padding-left: 16px;
    padding-right: 16px;
  }
  .lp-container {
    padding-left: 16px;
    padding-right: 16px;
  }
}


/* ── 7. Fundo do hero ──
   A animação de aproximação (Ken Burns) amplia a foto em 6%, e a sobra
   escapava pela direita. Fica contida na própria caixa. */
.hero-bg,
.page-hero,
.lp-hero {
  overflow: hidden;
}


/* ── 8. Barra fixa do consentimento ──
   Ela é position: fixed com left e right zerados, então herdava a
   largura do documento estourado e o texto saía pela direita. Com a
   página no lugar isso já resolve, mas a trava fica de guarda. */
.vm-consent {
  box-sizing: border-box;
}
.vm-consent__box {
  max-width: min(960px, 100%);
  box-sizing: border-box;
}
@media (max-width: 480px) {
  .vm-consent {
    padding: 0 12px 12px;
  }
  .vm-consent__box {
    padding: 18px 16px;
  }
}


/* ── 9. Formulários ──
   Fonte de 16px no campo evita o zoom automático do Safari do iPhone ao
   tocar no campo, que é justamente o que tira a página do enquadramento
   e não volta sozinho. */
@media (max-width: 768px) {
  input,
  select,
  textarea {
    font-size: 16px;
    max-width: 100%;
  }
  #lpForm,
  .cta-form-box form {
    max-width: 100%;
  }
}


/* ── 10. Botão de rótulo longo ──
   O .btn nasce com white-space: nowrap, o que é bom no desktop e ruim no
   celular: "Ver página completa de Direito Tributário" pedia 555px de
   linha única e arrastava a página inteira. No celular o rótulo quebra. */
@media (max-width: 768px) {
  .btn,
  .lp-btn,
  .cta-btn,
  .hero-cta .btn {
    white-space: normal;
    max-width: 100%;
    text-align: center;
    justify-content: center;
    line-height: 1.35;
  }
  .btn-full,
  .area-detail-cta .btn,
  .area-highlight .btn {
    display: flex;
    width: 100%;
  }
}


/* ── 11. Submenu do menu do celular ──
   O sócio abriu o site no iPhone, tocou em "Áreas de Atuação" e o painel
   apareceu cortado pela esquerda: sobrava "ura empresarial", "ocietário",
   "tão de riscos".

   A causa é uma disputa de especificidade. No desktop o painel é um
   mega-menu centrado sob o item, e por isso nasce com
   `transform: translateX(-50%)`. No celular ele deveria virar um
   acordeão empilhado, e a style.css faz isso, mas com o seletor
   `.navbar-nav.open .nav-mega`, que vale três classes. Só que a regra
   de abertura do desktop é `.nav-item.nav-has-mega:focus-within
   .nav-mega`, e vale QUATRO (o `:focus-within` conta como classe).
   Quatro ganha de três: no toque, o link recebe foco, a regra de
   desktop volta a valer e o painel escorrega meia largura para fora
   da tela.

   Não é defeito de iPhone: acontece em qualquer navegador de toque, e
   também no desktop se a pessoa navegar pelo teclado. Aqui os mesmos
   seletores ganham uma classe a mais e o acordeão fica de pé.

   O mesmo vale para "O Escritório", que usa .nav-submenu. */
@media (max-width: 1200px) {
  .navbar-nav.open .nav-item.nav-has-mega:hover .nav-mega,
  .navbar-nav.open .nav-item.nav-has-mega:focus-within .nav-mega,
  .navbar-nav.open .nav-item.nav-has-sub:hover .nav-submenu,
  .navbar-nav.open .nav-item.nav-has-sub:focus-within .nav-submenu {
    position: static;
    transform: none;
    left: auto;
    right: auto;
    top: auto;
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }
}


/* ── 11b. Alinhamento do texto dentro do submenu ──
   O menu do celular centraliza tudo (`.navbar-nav.open .nav-menu` tem
   text-align: center), e isso é bom para "Home", "O Escritório" e
   "Áreas de Atuação", que são itens soltos e centrados de propósito.

   Só que a herança descia para dentro do painel de áreas, onde cada item
   tem um ícone à esquerda. Título e descrição ficavam CADA UM centrado na
   própria linha, então começavam em pontos diferentes: "Direito
   Tributário" bem mais para dentro que "Contencioso Empresarial", e a
   descrição desencontrada do título. Com o ícone fixo à esquerda, o
   resultado parecia desalinhado, porque estava.

   Aqui o conteúdo do painel volta a ser alinhado à esquerda, como já é no
   desktop: ícone, título e descrição na mesma margem, um debaixo do
   outro. O rótulo da seção acompanha, senão ele ficaria centrado sobre
   uma lista alinhada. */
@media (max-width: 1200px) {
  .navbar-nav.open .nav-mega,
  .navbar-nav.open .nav-submenu {
    text-align: left;
  }
  .navbar-nav.open .mega-link,
  .navbar-nav.open .mega-label {
    text-align: left;
  }
  /* O cartão do rodapé do painel (logo, frase e "Fale Conosco") é
     centralizado por projeto, e continua assim: alinhá-lo à esquerda
     deixava a logo e o botão centrados com a frase à esquerda, misturado. */
  .navbar-nav.open .mega-aside {
    text-align: center;
  }
  .navbar-nav.open .mega-link > div {
    align-items: flex-start;
  }
  /* O ícone ganha largura fixa, para todo título começar na mesma coluna,
     independente de o ícone ser mais largo ou mais estreito. */
  .navbar-nav.open .mega-link i {
    width: 20px;
    text-align: center;
    flex: 0 0 20px;
  }
  /* Nota para quem mexer aqui depois: cheguei a tentar deixar o submenu
     de "O Escritório" com a largura da tela, para ficar igual ao painel
     de áreas. Não vale: o <li> encolhe ao tamanho do conteúdo porque o
     <ul> do menu usa align-items: center, e esticar isso significaria
     remontar o layout do menu inteiro para ganhar um detalhe. A caixa
     estreita e centrada é o desenho original e está boa; o que estava
     errado era só o texto, e isso a regra acima já resolve. */
}


/* ── 12. Respiro para o botão flutuante do WhatsApp ──
   Ele fica fixo no canto e, no fim da página, cobria justamente a linha
   de "Política de Privacidade · Termos de Uso · Preferências de cookies".
   O rodapé ganha altura para a última linha sair de baixo do botão. */
@media (max-width: 768px) {
  .footer-bottom {
    padding-bottom: 92px;
  }
  /* Só uma página traz a classe .footer-legal-links; nas demais a linha
     de links é simplesmente o último parágrafo do rodapé. É nela que o
     consent.js pendura o "Preferências de cookies". */
  .footer-legal-links,
  .footer-bottom .container > p:last-child {
    padding-right: 76px;
  }
}


/* ── 13. Faixas de rolagem horizontal que são de propósito ──
   As abas de área do topo e a navegação lateral rolam por escolha de
   projeto. Confirmado que continuam roláveis, e não cortadas. */
.areas-nav,
.areas-sidebar-nav {
  max-width: 100%;
}
