/* ===========================================================================
   Blintaxi — ajustes de celular
   ---------------------------------------------------------------------------
   O export do Claude Design não traz NENHUMA media query: no telefone o site
   só se virava com o que quebra sozinho (flex-wrap, grid auto-fit). Funcionava,
   mas ficava torto — e torto num site de serviço premium custa caro.

   Este arquivo é o mínimo para caber na tela e ficar simétrico. Não inventa
   layout novo, não muda cor, não muda texto: só corrige enquadramento.

   COMO ELE SE PRENDE NO HTML
   O runtime do Claude Design mantém o atributo `style` inline, mas o navegador
   reserializa com espaço depois dos dois-pontos. Por isso os seletores
   procuram "text-transform: uppercase" COM espaço — sem o espaço não casa
   nada, e a folha inteira vira decoração. Se um dia parar de funcionar,
   conferir isso primeiro.

   Como o estilo do elemento é inline, ele ganha da folha por especificidade.
   Daí o `!important` em tudo: aqui ele não é preguiça, é a única forma.
   =========================================================================== */

@media (max-width: 640px) {

  /* -------------------------------------------------------------------------
     1. BOTÃO DE AÇÃO OCUPA A LINHA INTEIRA

     Era a maior fonte de assimetria do site. Cada CTA tinha a largura do
     próprio texto, então "Ver serviços" era 170px e "Solicitar cotação" 213px,
     os dois colados na esquerda — a borda direita ficava serrilhada e sobrava
     um vazio de até 165px.

     Só vale dentro de `section`: o botão WHATSAPP do menu fica no header e
     tem que continuar do tamanho dele.
     ------------------------------------------------------------------------- */
  section a[style*="text-transform: uppercase"][style*="border-radius: 2px"] {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    text-align: center !important;
    /* "Todos os serviços" vinha com nowrap pensando em tela grande */
    white-space: normal !important;
  }

  /* Dois botões que no desktop ficam lado a lado viram um embaixo do outro,
     cada um na largura toda. Sem isto o flex os espremeria a metade cada. */
  section div:has(> a[style*="text-transform: uppercase"][style*="border-radius: 2px"]) {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
  }

  /* -------------------------------------------------------------------------
     2. OS TRÊS NÚMEROS DO TOPO, NUMA LINHA SÓ

     +20 · +10.000 · +5.000 não cabiam em três colunas (3×125 + 48 de respiro
     = 423px num espaço de 335). O flex-wrap então quebrava 2 + 1 e deixava
     o "+5.000" órfão na terceira linha, desalinhado de tudo.

     Menos respiro e menos corpo no número = os três lado a lado, iguais.
     ------------------------------------------------------------------------- */
  #inicio div[style*="flex-wrap: wrap"][style*="border-top"] {
    gap: 10px !important;
    flex-wrap: nowrap !important;
  }
  #inicio div[style*="flex-wrap: wrap"][style*="border-top"] > div {
    flex: 1 1 0 !important;
    min-width: 0 !important;
  }
  #inicio div[style*="flex-wrap: wrap"][style*="border-top"] p[style*="font-size: 30px"] {
    font-size: 23px !important;
  }

  /* -------------------------------------------------------------------------
     3. O TÍTULO DO TOPO CABENDO NA TELA

     Com 40px o hero media 996px de altura — mais alto que a tela de um iPhone
     (844px), e os dois botões caíam abaixo da dobra. Em 33px o hero fica em
     850px e o "Solicitar cotação" aparece sem rolar.
     ------------------------------------------------------------------------- */
  #inicio h1 {
    font-size: 33px !important;
    line-height: 1.08 !important;
  }
}