/* ═══════════════════════════════════════════════════════════════════════
   ENERMAC · mobile.css
   Experiência mobile dedicada — não é "o desktop espremido".

   Carregado por ÚLTIMO de propósito (ver index.html): tudo aqui vence a
   cascata sem precisar de !important. Cada bloco resolve um problema
   específico de toque/leitura que o layout de desktop não tem — os
   grids com hover viram carrossel (hover não existe no dedo), os CTAs
   ganham alvo de toque maior, os espaçamentos respiram mais.

   Um único breakpoint (768px) concentra a lógica "é mobile?" num só
   lugar em vez de espalhar dezenas de médias queries pelo projeto — as
   quebras mais finas que já existem em sections.css/layout.css (colunas
   de grid em 420/520/640/860px) continuam válidas para telas maiores
   que isto e não são tocadas aqui.

   ÍNDICE
   1. Base (respiro, alvo de toque)
   2. Hero
   3. Desafios — grid vira carrossel, sem depender de hover
   4. Soluções — diferenciais viram carrossel
   5. A Enermac — estatísticas viram carrossel
   6. Cases — grid vira carrossel
   7. Footer
   8. Navegação de carrossel (botões avançar/voltar)
   ═══════════════════════════════════════════════════════════════════════ */

/* Fora do breakpoint mobile os carrosséis viram grid normal (ver cada
   seção em sections.css) — os botões de navegação não têm o que fazer
   aí, então ficam ocultos por padrão e só aparecem dentro do @media
   abaixo (item 8). */
.carousel-nav {
  display: none;
}

@media (max-width: 768px) {

  /* ── 1. BASE ── */

  /* Títulos de seção ligeiramente mais compactos — em telas estreitas o
     h2 uppercase quebra em 3-4 linhas; menos peso solto acima ajuda a
     leitura sem esvaziar a hierarquia. */
  .section-head {
    margin-bottom: 1.75rem;
  }

  /* Botões de fechamento de seção (CTA principal, repetido em quase toda
     seção) ganham largura total — alvo de toque generoso, sensação de
     "botão de app", sem depender do usuário mirar num botão pequeno
     centralizado. */
  .section-cta .btn,
  .hero__cta .btn,
  .cases-panel__footer .btn {
    width: 100%;
  }

  /* Utilitário de carrossel — reaproveitado pelas 4 seções abaixo em vez
     de repetir a mesma receita 4 vezes. scroll-snap nativo, sem JS: o
     navegador cuida do "parar" em cada card. */
  .m-carousel {
    display: flex;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    /* Sem isso, um swipe em diagonal (quase todo swipe real é) vira
       scroll horizontal do carrossel E vertical da página ao mesmo
       tempo — a página arrasta junto e volta de elástico, dando a
       sensação de que os cards "soltam" e não são fixos verticalmente.
       touch-action:pan-x trava o gesto de toque só no eixo horizontal
       aqui dentro. */
    touch-action: pan-x;
    scrollbar-width: none;
    gap: .9rem;
    margin: 0 calc(clamp(1rem, 4vw, 2rem) * -1);
    padding: .25rem clamp(1rem, 4vw, 2rem) 1rem;
    /* Com scroll-snap:mandatory, o navegador trata o padding inicial como
       posição de repouso válida e "pula" pra lá — sem scroll-padding a
       folga do padding nunca fica visível (o 1º card cola na borda crua
       da tela). scroll-padding-inline resolve mantendo o snap em 0. */
    scroll-padding-inline: clamp(1rem, 4vw, 2rem);
  }

  .m-carousel::-webkit-scrollbar {
    display: none;
  }

  .m-carousel > * {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }

  /* ── 2. HERO ──
     Menos ar em cima/embaixo (o topo perde a folga que só existe pra
     equilibrar com o navbar largo do desktop) e o hero passa a caber
     inteiro — título, benefícios e CTA — numa rolagem mais curta. */
  .hero__content {
    padding: 6rem 0 2.75rem;
  }

  .hero__bullets {
    gap: .7rem;
    margin-bottom: 1.5rem;
  }

  /* ── 3. DESAFIOS ──
     No desktop o card mostra o ícone/título e troca para a descrição no
     :hover — no toque não existe hover, então esse padrão simplesmente
     não funciona (é isso que motivou o "Passe o mouse e descubra" a
     virar instrução morta no celular). Aqui o grid 3×2 vira um carrossel
     horizontal e cada card mostra ícone + título + descrição ao mesmo
     tempo, sempre visível — sem gesto nenhum pra descobrir o conteúdo. */
  .challenges__hint {
    display: none;
  }

  .challenge-grid {
    display: flex;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    /* Ver comentário em .m-carousel — mesmo bug de swipe diagonal. */
    touch-action: pan-x;
    scrollbar-width: none;
    gap: .9rem;
    margin: 0 calc(clamp(1rem, 4vw, 2rem) * -1);
    padding: .25rem clamp(1rem, 4vw, 2rem) .5rem;
    /* Ver comentário em .m-carousel — mesmo bug de padding+scroll-snap. */
    scroll-padding-inline: clamp(1rem, 4vw, 2rem);
  }

  .challenge-grid::-webkit-scrollbar {
    display: none;
  }

  .challenge-tile {
    flex: 0 0 78%;
    max-width: 300px;
    min-height: 0;
    scroll-snap-align: start;
    /* :active substitui o :hover como feedback de toque — sem troca de
       fundo pra branco (isso ficava por cima do texto, já visível). */
    transition: transform var(--dur-micro) var(--ease-out);
  }

  .challenge-tile:active {
    transform: scale(.98);
  }

  /* As duas camadas que se alternavam por cima uma da outra (posição
     absoluta + opacidade) voltam a ser blocos normais, empilhados na
     ordem natural do documento — sempre visíveis, sem transição. */
  .challenge-tile__face,
  .challenge-tile__desc {
    position: static;
    inset: auto;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    transition: none;
  }

  .challenge-tile__face {
    padding: 1.5rem 1.3rem .5rem;
  }

  .challenge-tile__desc {
    padding: 0 1.3rem 1.5rem;
  }

  /* ── 4. SOLUÇÕES — DIFERENCIAIS ──
     5 cards curtos ganham mais respiro como carrossel do que espremidos
     em 2 colunas — e evita repetir "grid empilhado" logo depois do card
     de detalhes da cena 3D (que já é um card cheio, ver scene-ui.css). */
  .feature-grid {
    display: flex;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    /* Ver comentário em .m-carousel — mesmo bug de swipe diagonal. */
    touch-action: pan-x;
    scrollbar-width: none;
    gap: .9rem;
    /* Sem margin-bottom aqui: as setas do carrossel (item 8, abaixo)
       agora ficam DEPOIS do grid visualmente — um respiro aqui coloca o
       espaço entre os cards e as setas (que passam a "flutuar" longe do
       carrossel), não entre o carrossel inteiro e a próxima seção. Esse
       respiro final vive em .how-steps (item 4b). */
    margin: 0 calc(clamp(1rem, 4vw, 2rem) * -1);
    padding: .25rem clamp(1rem, 4vw, 2rem) .5rem;
    /* Ver comentário em .m-carousel — mesmo bug de padding+scroll-snap. */
    scroll-padding-inline: clamp(1rem, 4vw, 2rem);
  }

  .feature-grid::-webkit-scrollbar {
    display: none;
  }

  .feature-card {
    flex: 0 0 72%;
    max-width: 260px;
    scroll-snap-align: start;
  }

  .feature-card h3 {
    min-height: 0;
  }

  /* Respiro entre o carrossel de diferenciais (cards + setas, que agora
     ficam abaixo deles — ver item 8) e o título "Da análise à operação"
     da trilha seguinte. Sem CTA entre as duas seções pra dar esse
     espaço de graça (diferente de Desafios/Estatísticas, que têm
     .section-cta com margin-top próprio), por isso o ajuste mora aqui. */
  .how-steps {
    margin-top: 2rem;
  }

  /* ── 5. A ENERMAC — ESTATÍSTICAS ──
     5 números de destaque: em coluna dupla ficam pequenos e competem
     entre si por atenção. Como carrossel, cada estatística respira
     sozinha — mais perto de como Nubank/Stripe expõem métricas soltas. */
  .stats-grid {
    display: flex;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    /* Ver comentário em .m-carousel — mesmo bug de swipe diagonal. */
    touch-action: pan-x;
    scrollbar-width: none;
    gap: .9rem;
    /* Sem margin-bottom (ver .feature-grid acima): o respiro antes do
       botão "Agende uma visita" já vem do margin-top de .section-cta
       (base.css) — repetir aqui só empurraria as setas do carrossel
       pra longe dos cards que elas controlam. */
    margin: 1.75rem calc(clamp(1rem, 4vw, 2rem) * -1) 0;
    padding: .25rem clamp(1rem, 4vw, 2rem) .5rem;
    /* Ver comentário em .m-carousel — mesmo bug de padding+scroll-snap. */
    scroll-padding-inline: clamp(1rem, 4vw, 2rem);
  }

  .stats-grid::-webkit-scrollbar {
    display: none;
  }

  .stat-card {
    flex: 0 0 62%;
    max-width: 220px;
    scroll-snap-align: start;
  }

  /* ── 6. CASES ──
     4 cards ricos (foto + 2 métricas) empilhados em coluna única viram
     uma "parede" longa de rolagem — como carrossel, o card inteiro
     (incluindo as métricas) cabe numa olhada, e comparar projetos vira
     um gesto de swipe em vez de 4 telas de scroll vertical. */
  .cases-panel {
    box-shadow: var(--shadow-card);
  }

  .cases-grid {
    display: flex;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    /* Ver comentário em .m-carousel — mesmo bug de swipe diagonal. */
    touch-action: pan-x;
    scrollbar-width: none;
    padding: clamp(1.1rem, 4vw, 1.5rem) clamp(1.1rem, 4vw, 1.5rem) .5rem;
    /* Ver comentário em .m-carousel — mesmo bug de padding+scroll-snap. */
    scroll-padding-inline: clamp(1.1rem, 4vw, 1.5rem);
  }

  .cases-grid::-webkit-scrollbar {
    display: none;
  }

  .case-card {
    flex: 0 0 85%;
    max-width: 340px;
    scroll-snap-align: start;
  }

  .case-card + .case-card {
    margin-left: .9rem;
  }

  /* ── 7. FOOTER ──
     Ícones sociais eram 38px (abaixo do alvo mínimo de toque de 44px
     recomendado pro resto do site — só passavam batido porque o mouse
     no desktop não tem esse limite). */
  .footer__social-link {
    width: 44px;
    height: 44px;
  }

  /* ── 8. NAVEGAÇÃO DE CARROSSEL ──
     Swipe continua sendo o mecanismo real (é só scroll nativo) — os
     botões são um atalho visível de "isso rola pros lados". Ficam
     centralizados ABAIXO do carrossel que controlam (hierarquia visual:
     o conteúdo vem primeiro, a navegação é um controle secundário
     embaixo dele) — nunca acima nem flutuando por cima dos cards, que
     já foram tentados e revertidos (o de cima competia com o topo
     arredondado do 1º card; o flutuante caía em cima do texto). A ordem
     visual vem só de CSS (order/flex), sem tocar a ordem real do HTML. */
  .carousel-wrap {
    display: flex;
    flex-direction: column;
    gap: .75rem;
  }

  .carousel-wrap .carousel-nav {
    order: 1;
    display: flex;
    justify-content: center;
    gap: .6rem;
  }

  /* Cases não fica dentro de .carousel-wrap (o painel 3D tem sua própria
     estrutura, com o CTA como rodapé) — por isso repete o padrão aqui:
     grid primeiro (order implícito 0), setas centralizadas logo abaixo
     (order 2) e o CTA por último (order 3, empurrado explicitamente pra
     não "subir" na hora de reordenar). Também não existe o gutter do
     .container aqui, então soma o próprio padding lateral pra os botões
     não colarem na borda do card branco. */
  .cases-panel {
    display: flex;
    flex-direction: column;
  }

  .carousel-nav--panel {
    order: 2;
    display: flex;
    justify-content: center;
    gap: .6rem;
    padding: .75rem clamp(1.1rem, 4vw, 1.5rem) 0;
  }

  .cases-panel__footer {
    order: 3;
  }

  .carousel-nav__btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--c-white);
    color: var(--c-navy);
    border: none;
    /* Sombra mais forte que o padrão do site — aqui o botão flutua sobre
       qualquer fundo (navy, foto, card claro) e precisa se destacar
       sozinho, sem depender do contraste do que está embaixo. */
    box-shadow: 0 6px 18px rgba(13, 30, 50, .35);
    cursor: pointer;
    transition: transform var(--dur-micro) var(--ease-out);
  }

  .carousel-nav__btn svg {
    width: 18px;
    height: 18px;
  }

  .carousel-nav__btn:active:not(:disabled) {
    transform: scale(.9);
  }

  /* Desabilitado: o círculo continua branco e opaco (contraste alto em
     qualquer fundo) — só o ícone esmaece.Esmaecer o botão inteiro (como
     antes, via opacity) misturava o branco com o navy por trás e virava
     um cinza-azulado quase ilegível. */
  .carousel-nav__btn:disabled {
    color: rgba(13, 30, 50, .3);
    box-shadow: 0 4px 12px rgba(13, 30, 50, .18);
    cursor: default;
  }
}