/* design/mobile.css
   Ajustes de responsividade mobile sobre o export da agência.
   Não altera elementor-frontend-inline-css nem a marcação; só redefine,
   dentro de @media com largura máxima, as mesmas variáveis CSS que o
   próprio export já usa (--padding-top, --min-height, etc). Ver
   RESPONSIVIDADE.md para o diagnóstico e DECISOES.md para o porquê deste
   arquivo existir separado. */

@media (max-width: 768px) {

  /* Problema 1: herói com altura fixa de 800px cria vazio grande.
     Altura dinâmica de viewport (clamp): nunca mais alta que os 800px
     originais (teto), acompanhando 100svh menos a reserva do cabeçalho
     fixo (maior altura medida do cabeçalho: 106px) até o piso. Piso
     revisado na tarefa seguinte (era 620px, arbitrário e maior que o
     conteúdo) para 520px = 100px de reserva do cabeçalho + 24px de
     respiro do bloco interno (--margin-top abaixo) + 365px do maior
     conteúdo real medido depois de liberar a largura do parágrafo + 31px
     de respiro embaixo do botão. Acompanha o conteúdo, não o contrário. */
  .elementor-9068 .elementor-element.elementor-element-f3b7f80 {
    --min-height: clamp(520px, calc(100svh - 280px), 620px);
    --padding-top: 100px;
  }

  /* Refinamento do herói, tarefa seguinte: o bloco interno (7c1a3cb) tem
     margin-top de 100px herdado do desktop, sem redução no mobile — soma
     com a reserva de cabeçalho acima e cria vazio grande antes do kicker.
     A reserva de espaço do cabeçalho já é o --padding-top acima; este
     margin-top vira só respiro visual, reduzido proporcionalmente. */
  .elementor-9068 .elementor-element.elementor-element-7c1a3cb {
    --margin-top: 24px;
  }

  /* Refinamento do herói: o parágrafo (f4050b8) tem width e max-width de
     50%, regra de desktop pensada para ficar ao lado de outro elemento —
     no mobile isso vira coluna estreita (16-26 caracteres por linha) e
     quebra em até 10 linhas. Libera a largura da coluna, com teto de
     44ch (medida de leitura, meio do intervalo de 40-55 caracteres).
     Especificidade (0,4,0) e não (0,3,0) de propósito: o próprio design
     da agência tem uma regra `.elementor.elementor .e-con > .elementor-widget{max-width:100%}`
     que empata em especificidade com o normal .elementor-9068
     .elementor-element.elementor-element-f4050b8 (usa a classe repetida
     ".elementor.elementor" só para inflar a especificidade) — confirmado
     via CSS.getMatchedStylesForNode, não por tentativa e erro. Fechando
     com a classe real .elementor-widget-text-editor (que este widget já
     tem) chega a (0,4,0) honestamente, sem !important. */
  .elementor-9068 .elementor-element.elementor-element-f4050b8.elementor-widget-text-editor {
    --container-widget-width: 100%;
    max-width: 44ch;
  }

  /* Problema 2: cabeçalho fixo — reserva de espaço nas âncoras.
     Âncora real da página: o botão "VERIFICAR UM SITE" do herói leva a
     #verificacao, que é o próprio data-id="6fa54d1" (id renomeado de
     "teste3" para não expor a palavra "teste" na URL pública — pedido
     do Antonio, ver DECISOES.md). */
  #verificacao {
    scroll-margin-top: 110px;
  }

  /* Problema 3: espaçamento vertical de desktop sobra no celular.
     Redução proporcional (~45%), não achatada, preservando a diferença
     de ritmo entre seções. */
  .elementor-9068 .elementor-element.elementor-element-698a4eb {
    --padding-top: 44px;
    --padding-bottom: 28px;
  }
  .elementor-9068 .elementor-element.elementor-element-c0d72ae {
    --padding-top: 24px;
    --padding-bottom: 24px;
  }
  .elementor-9068 .elementor-element.elementor-element-6fa54d1 {
    --padding-top: 32px;
    --padding-bottom: 28px;
  }
  .elementor-9068 .elementor-element.elementor-element-553fd95 {
    --padding-top: 44px;
    --padding-bottom: 28px;
  }
  .elementor-9068 .elementor-element.elementor-element-1ba10cb {
    --padding-top: 28px;
    --padding-bottom: 28px;
  }
  .elementor-9068 .elementor-element.elementor-element-30cb377 {
    --padding-top: 24px;
    --padding-bottom: 24px;
  }
  .elementor-9068 .elementor-element.elementor-element-bb22c25 {
    --padding-top: 18px;
    --padding-bottom: max(18px, env(safe-area-inset-bottom, 0px));
  }

  /* Problema 4: ícone flutuante (seta) sobreposto ao cartão seguinte.
     O deslocamento vertical original (-25px) deixa o ícone 41px dentro
     do cartão em toda largura testada. Empurra mais para cima até o
     ícone (56px de altura) limpar a borda com folga. */
  .elementor-9068 .elementor-element.elementor-element-563492a.e-con {
    --e-con-transform-translateY: -74px;
  }

  /* Problema 5: rodapé com três alinhamentos diferentes ao empilhar.
     Unifica à esquerda e fixa um respiro igual entre as três linhas. */
  .elementor-9068 .elementor-element.elementor-element-bb22c25 {
    --gap: 12px 0px;
    --row-gap: 12px;
  }
  .elementor-9068 .elementor-element.elementor-element-fc634b8 p,
  .elementor-9068 .elementor-element.elementor-element-78b4b29 p,
  .elementor-9068 .elementor-element.elementor-element-a89fe00 p {
    text-align: left;
  }

  /* Problema 6: parágrafos longos centralizados, difíceis de ler
     estreito. Só os dois casos realmente longos (mais de 3 linhas);
     títulos continuam centralizados. */
  .elementor-9068 .elementor-element.elementor-element-f4050b8 p,
  .elementor-9068 .elementor-element.elementor-element-05d38e6 p {
    text-align: left;
  }

  /* Cuidados de mobile: alvo de toque do logotipo (link sem texto,
     imagem encolhe a ~24px de altura nas larguras mais estreitas —
     achado da bateria do WORKFLOW.md). Não altera o tamanho visível da
     logo, só a área clicável do link ao redor dela. */
  .elementor-9068 .elementor-element.elementor-element-f184547 a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
  }

  /* Cuidados de mobile: áreas seguras de aparelho com entalhe
     (viewport-fit=cover). Cabeçalho fixo é quem toca as bordas reais da
     tela; o rodapé (padding-bottom) já foi tratado acima, junto do
     problema 3. */
  .elementor-9068 .elementor-element.elementor-element-eeb0336 {
    --padding-top: env(safe-area-inset-top, 0px);
    --padding-left: max(5px, env(safe-area-inset-left, 0px));
    --padding-right: max(5px, env(safe-area-inset-right, 0px));
  }
}

/* Problema 7: cartões do jogo responsável quebram título e desalinham a
   fileira em 768px (grid de 3 colunas com ~151px cada). Mantém a coluna
   única até 900px — largura em que cada cartão ainda não tem espaço
   confortável para "Limites de depósito" / "Onde buscar ajuda" em 1
   linha — em vez do padrão do Elementor, que já volta a 3 colunas em
   768px. */
@media (max-width: 900px) {
  .elementor-9068 .elementor-element.elementor-element-c035fd8 {
    --e-con-grid-template-columns: repeat(1, 1fr);
  }
}

/* Cuidados de mobile: prefers-reduced-motion nas animações do design
   (ícone flutuante do problema 4 e pulso do botão "VERIFICAR UM SITE").
   Os efeitos de scroll do Elementor (motion_fx_scale_effect) são
   controlados por JavaScript via data-settings, não por CSS — não há
   como desativá-los só com este arquivo. */
@media (prefers-reduced-motion: reduce) {
  .icone-flutuante,
  .elementor-9068 .elementor-element.elementor-element-7ac4268 .elementor-button {
    animation: none !important;
  }
}