/* =========================================================================
   LET'S GO SOFTWARE — CAMADA MOBILE  (< 768px)

   Regra de ouro deste arquivo: o desktop aprovado NÃO é tocado.
   `styles.css` permanece intacto; tudo aqui vive dentro de
   @media (max-width:767.98px). A partir de 768px este arquivo é inerte
   (salvo os tokens do :root, que são apenas declarações não usadas lá).

   Ordem: tokens → base → cabeçalho → menu → hero → prova → força →
          produtos → cases → método → quem → contato → rodapé →
          barra fixa → breakpoints estruturais → landscape → a11y.
   ========================================================================= */

/* -------------------------------------------------------------------------
   TOKENS FLUIDOS — escala 1.25. Nenhum valor mágico solto no código.
   Não sobrescrevem nada do desktop: são nomes novos.
   ------------------------------------------------------------------------- */
:root{
  /* Espaçamento */
  --sp-1: clamp(0.25rem, 0.6vw, 0.375rem);
  --sp-2: clamp(0.5rem,  1.2vw, 0.75rem);
  --sp-3: clamp(0.75rem, 2vw,   1rem);
  --sp-4: clamp(1rem,    3vw,   1.5rem);
  --sp-6: clamp(1.5rem,  5vw,   2.5rem);
  --sp-8: clamp(2rem,    7vw,   3.5rem);
  --sp-section: clamp(3rem, 11vw, 5rem);

  /* Tipografia */
  --fs-caption: clamp(0.8125rem, 0.75rem + 0.3vw, 0.875rem); /* piso 13px */
  --fs-body:    clamp(0.9375rem, 0.9rem  + 0.4vw, 1.0625rem);
  --fs-lead:    clamp(1.0625rem, 1rem    + 0.6vw, 1.25rem);
  --fs-h3:      clamp(1.125rem,  1rem    + 1.2vw, 1.5rem);
  --fs-h2:      clamp(1.5rem,    1.2rem  + 2.2vw, 2.25rem);
  --fs-h1:      clamp(1.875rem,  1.4rem  + 3.6vw, 3rem);

  /* Gutter respeitando o notch */
  --gutter: max(clamp(1rem, 5vw, 1.5rem), env(safe-area-inset-left));
  --gutter-r: max(clamp(1rem, 5vw, 1.5rem), env(safe-area-inset-right));

  --tap-min: 44px;
  --topo-h: 56px;
  --barra-h: 76px;   /* altura da barra fixa de CTA + safe-area */
}

/* A barra fixa só existe no mobile (o HTML dela é neutro no desktop). */
.barra-cta{display:none}

@media (max-width:767.98px){

  /* =======================================================================
     BASE — zero scroll horizontal, alturas dinâmicas
     ===================================================================== */
  /* `clip` no lugar de `hidden`: não vira scroll container (preserva sticky)
     e não mascara estouro — o estouro real foi corrigido na origem (.vitrine). */
  body{overflow-x:clip}

  /* Canvas de fundo: `lvh` evita a faixa preta quando a barra do
     navegador recolhe (100vh estático deixaria buraco).
     Opacidade cai para 55% no mobile: em tela estreita as partículas passam
     por cima do título e do logo, e o texto é o que precisa ganhar. */
  #fundo{height:100lvh;opacity:.55}
  /* Ato 2 já entra em modo calmo (.55 no desktop) — aqui o mesmo fator de .55 */
  body.calmo #fundo{opacity:.3}

  /* Títulos com <br> desenhado para tela larga quebram errado em 320px.
     Desliga o <br> e deixa o texto quebrar sozinho, equilibrado. */
  .hero__titulo,
  .cena__titulo,
  .secao__titulo,
  .contato__titulo{text-wrap:balance}
  .cena__titulo br,
  .secao__titulo br,
  .contato__titulo br{display:none}
  .hero__sub,.cena__sub,.secao__intro,.quem__p,.contato__sub,
  .case__bloco p,.mcard p{text-wrap:pretty}

  /* Escala tipográfica mobile */
  .hero__titulo{font-size:var(--fs-h1);line-height:1.08;max-width:none}
  .cena__titulo,.secao__titulo{font-size:var(--fs-h2);line-height:1.1}
  .contato__titulo{font-size:var(--fs-h2)}
  .hero__sub{font-size:var(--fs-lead)}
  .cena__sub,.secao__intro{font-size:var(--fs-body)}
  .eyebrow{font-size:var(--fs-caption);margin-bottom:var(--sp-3);padding:8px 15px 8px 12px}
  /* rótulo de botão é ação: nunca abaixo de 15px */
  .btn{font-size:var(--fs-body)}

  /* =======================================================================
     CABEÇALHO — 56px, some no scroll ↓ e volta no ↑
     ===================================================================== */
  .topo{
    padding:var(--sp-2) var(--gutter-r) var(--sp-2) var(--gutter);
    min-height:var(--topo-h);
    transition:transform .3s ease,background .4s,padding .4s,border-color .4s;
  }
  .topo.is-hidden{transform:translateY(-100%)}
  .topo.is-stuck{padding-top:var(--sp-2);padding-bottom:var(--sp-2)}
  .topo__logo{display:flex;align-items:center;min-height:var(--tap-min)}
  .topo__logo img{height:22px}

  /* Hambúrguer: era 30×10px. Vira alvo real de 44×44 sem mudar o desenho. */
  .topo__menu{
    display:flex;align-items:center;justify-content:center;
    width:var(--tap-min);height:var(--tap-min);gap:6px;
    margin-right:calc(var(--sp-2) * -1);
  }
  .topo__menu span{width:26px}

  /* =======================================================================
     MENU OVERLAY — itens de 56px, ancorado no topo (não centralizado:
     em tela curta o centro empurra item para fora)
     ===================================================================== */
  .menu-mobile{
    justify-content:flex-start;align-items:stretch;gap:0;
    padding:calc(var(--topo-h) + var(--sp-6)) var(--gutter)
            calc(var(--sp-6) + env(safe-area-inset-bottom));
  }
  .menu-mobile a{
    display:flex;align-items:center;min-height:56px;
    font-size:var(--fs-h3);border-bottom:1px solid var(--linha);
  }
  .menu-mobile .btn{
    margin-top:var(--sp-6);width:100%;min-height:52px;
    justify-content:center;border-bottom:0;
  }

  /* =======================================================================
     HERO — 100svh (não vh: a barra do navegador roubaria o CTA da dobra)
     ===================================================================== */
  .hero{min-height:100svh}
  .cena__meio{
    /* só o HERO é tela cheia. As outras cenas do Ato 1 passam a ter a altura
       do próprio conteúdo — #forca gastava 1 viewport inteiro para uma frase. */
    min-height:0;
    padding:var(--sp-section) var(--gutter-r) var(--sp-section) var(--gutter);
  }
  .hero .cena__meio{
    min-height:100svh;
    padding-top:calc(var(--topo-h) + var(--sp-6));
    padding-bottom:var(--sp-8);
  }
  .hero__marca{margin-bottom:var(--sp-4)}
  .hero__marca img{height:38px}
  .hero__sub{margin-top:var(--sp-3);max-width:38ch}

  /* CTAs empilhados e full-width: alvo grande e previsível com o polegar */
  .cena__acoes{margin-top:var(--sp-6);flex-direction:column;width:100%;gap:var(--sp-3)}
  .cena__acoes .btn{width:100%;min-height:52px}

  /* CORTE 1 — "role para descer": ninguém precisa ser ensinado a rolar,
     e custa ~40px na dobra mais disputada da página. */
  .rolar{display:none}

  /* =======================================================================
     PROVA — 3 números em faixa compacta
     ===================================================================== */
  .stats{
    margin-top:var(--sp-6);grid-template-columns:repeat(3,1fr);
    gap:var(--sp-2);max-width:none;
  }
  .stat{padding:var(--sp-3) var(--sp-2);border-radius:14px;text-align:center}
  .stat__num{font-size:clamp(1.75rem,8vw,2.5rem)}
  .stat__rot{font-size:var(--fs-caption);margin:6px 0 0;line-height:1.3}

  /* CORTE 2 — parágrafo sob cada número: a prova é o número, não o texto. */
  .stat p{display:none}

  /* CORTE 3 — bloco stack (4 logos + canvas de código): decorativo e é um
     SEGUNDO canvas animado rodando junto das partículas. Custo de INP. */
  .stack{display:none}

  .clientes{margin-top:var(--sp-8)}

  /* =======================================================================
     PRODUTOS — um card abaixo do outro (era grid 2 col fixo = 185px de estouro)
     ===================================================================== */
  .vitrine{
    margin-top:var(--sp-6);
    display:grid;grid-template-columns:1fr;gap:var(--sp-3);
    /* A cena é um grid com justify-items:center — sem `stretch` a vitrine
       dimensiona pelo CONTEÚDO (os 4 cards) e estoura a tela para o lado.
       Era exatamente a origem do arrasto lateral. */
    justify-self:stretch;width:auto;max-width:none;
  }
  .pcard{padding:var(--sp-2);border-radius:16px}
  .pcard:hover{transform:none}          /* sem hover em touch */
  .pinfo{padding:var(--sp-3) var(--sp-1) var(--sp-1)}
  .pinfo h3{font-size:var(--fs-h3);margin-bottom:var(--sp-2)}
  .pseta{opacity:1;transform:none}      /* no touch não há hover p/ revelar */
  .ptags span{font-size:var(--fs-caption);padding:5px 11px}
  .pbar em{font-size:var(--fs-caption)}

  /* =======================================================================
     CASES — acordeão. Visíveis: problema + resultado.
     Dentro do acordeão: restrição + o que construímos.
     ===================================================================== */
  .cases{padding:var(--sp-section) 0}
  .secao__cabeca{padding-inline:var(--gutter)}
  .case{margin-top:var(--sp-6);padding-inline:var(--gutter)}
  .case__tag{gap:var(--sp-3);margin-bottom:var(--sp-3)}
  .case__tag img{height:24px}
  .case__tag span{font-size:var(--fs-caption)}
  .case__grade{border-radius:16px}
  .case__bloco{padding:var(--sp-4) var(--sp-3)}
  .case__bloco span{font-size:var(--fs-caption);margin-bottom:var(--sp-2)}
  .case__bloco p{font-size:var(--fs-body)}
  .case__bloco p .case__ef{font-size:var(--fs-h3)}

  .case__toggle{
    width:100%;display:flex;align-items:center;justify-content:space-between;
    gap:var(--sp-3);min-height:48px;padding:var(--sp-3);
    background:var(--bg-soft);text-align:left;
    font-family:var(--display);font-weight:600;font-size:var(--fs-body);
    color:var(--txt);
  }
  .case__toggle i{
    flex:none;width:20px;height:20px;position:relative;
    transition:transform .3s ease;
  }
  .case__toggle i::before,.case__toggle i::after{
    content:"";position:absolute;top:50%;left:50%;
    width:11px;height:2px;border-radius:2px;background:var(--spark-hot);
    transform:translate(-50%,-50%);
  }
  .case__toggle i::after{transform:translate(-50%,-50%) rotate(90deg)}
  .case__toggle[aria-expanded="true"] i{transform:rotate(45deg)}
  .case__extra{display:none}
  .case__extra.is-open{display:block}

  /* =======================================================================
     MÉTODO — acordeão (rótulo + título sempre visíveis)
     ===================================================================== */
  .metodo{padding:var(--sp-section) 0}
  .metodo__grade{margin-top:var(--sp-6);padding-inline:var(--gutter);gap:var(--sp-2)}
  .mcard{padding:0;border-radius:14px;overflow:hidden}
  .mcard__toggle{
    width:100%;display:flex;align-items:center;justify-content:space-between;
    gap:var(--sp-3);min-height:56px;padding:var(--sp-3);text-align:left;
  }
  .mcard__toggle i{
    flex:none;width:20px;height:20px;position:relative;
    transition:transform .3s ease;
  }
  .mcard__toggle i::before,.mcard__toggle i::after{
    content:"";position:absolute;top:50%;left:50%;
    width:11px;height:2px;border-radius:2px;background:var(--spark-hot);
    transform:translate(-50%,-50%);
  }
  .mcard__toggle i::after{transform:translate(-50%,-50%) rotate(90deg)}
  .mcard__toggle[aria-expanded="true"] i{transform:rotate(45deg)}
  .mcard__n{font-size:var(--fs-caption)}
  .mcard h3{margin:2px 0 0;font-size:var(--fs-h3)}
  .mcard p{
    display:none;
    padding:0 var(--sp-3) var(--sp-3);font-size:var(--fs-body);
  }
  .mcard p.is-open{display:block}

  /* =======================================================================
     QUEM SOMOS
     ===================================================================== */
  .quem{padding:var(--sp-section) var(--gutter)}
  .quem__grade{gap:var(--sp-4)}

  /* CORTE 4 — bloco geométrico animado: decoração pura (5 cápsulas + aura
     em animação contínua). Em coluna estreita vira um retângulo sem leitura. */
  .quem__foto{display:none}

  .quem__p{font-size:var(--fs-body)}
  .quem__list{margin-top:var(--sp-4);gap:var(--sp-2)}
  .quem__list li{font-size:var(--fs-body)}

  /* =======================================================================
     CONTATO — botões full-width, folga p/ a barra fixa
     ===================================================================== */
  .contato{
    padding:var(--sp-section) var(--gutter)
            calc(var(--sp-section) + var(--barra-h));
  }
  .contato__caixa{padding:var(--sp-6) var(--sp-4);border-radius:24px}
  .contato__sub{font-size:var(--fs-body);margin-bottom:var(--sp-6)}
  .contato__acoes{flex-direction:column;gap:var(--sp-3)}
  .contato__acoes .btn{width:100%;min-height:52px}

  /* =======================================================================
     RODAPÉ — links em 2 colunas, alvos de 48px
     ===================================================================== */
  .rodape{
    padding:var(--sp-6) var(--gutter)
            calc(var(--sp-6) + var(--barra-h) + env(safe-area-inset-bottom));
  }
  .rodape__topo{flex-direction:column;align-items:flex-start;gap:var(--sp-3)}
  .rodape__logo{display:flex;align-items:center;min-height:var(--tap-min)}
  .rodape__nav{
    display:grid;grid-template-columns:1fr 1fr;
    gap:0 var(--sp-4);width:100%;
  }
  .rodape__nav a{
    display:flex;align-items:center;min-height:48px;font-size:var(--fs-body);
  }
  .rodape__base{font-size:var(--fs-caption)}

  /* =======================================================================
     BARRA FIXA DE CTA — WhatsApp, aparece depois do hero
     ===================================================================== */
  .barra-cta{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:95;
    padding:var(--sp-2) var(--gutter-r)
            calc(var(--sp-2) + env(safe-area-inset-bottom)) var(--gutter);
    background:rgba(5,5,8,.88);backdrop-filter:blur(14px);
    border-top:1px solid var(--linha);
    transform:translateY(110%);transition:transform .35s ease;
    pointer-events:none;
  }
  .barra-cta.is-on{transform:none;pointer-events:auto}
  .barra-cta .btn{width:100%;min-height:52px;justify-content:center}
  /* enquanto o menu está aberto a barra sai da frente */
  body.menu-aberto .barra-cta{transform:translateY(110%);pointer-events:none}

  /* =======================================================================
     TOUCH — nenhum estado depende de :hover
     ===================================================================== */
  .pcard:hover,.mcard:hover,.stat:hover{transform:none}
  .btn:active{transform:scale(.985)}
  .case__toggle:active,.mcard__toggle:active{background:var(--surface-2)}
}

/* -------------------------------------------------------------------------
   BP: lg (480px) — primeira quebra de 2 colunas.
   Motivo estrutural: a partir daqui cabem 2 colunas de item curto e o
   carrossel mostra 1,5 card em vez de 1.
   ------------------------------------------------------------------------- */
@media (min-width:480px) and (max-width:767.98px){
  .metodo__grade{grid-template-columns:1fr 1fr;align-items:start}
  .pcard{flex-basis:min(62%,340px)}
  .rodape__nav{grid-template-columns:repeat(4,auto);justify-content:start;gap:0 var(--sp-6)}
}

/* -------------------------------------------------------------------------
   BP: xl (600px) — tablet retrato.
   Motivo estrutural: largura suficiente para os CTAs voltarem lado a lado
   sem encolher o alvo abaixo de 44px.
   ------------------------------------------------------------------------- */
@media (min-width:600px) and (max-width:767.98px){
  .cena__acoes,.contato__acoes{flex-direction:row;justify-content:center}
  .cena__acoes .btn,.contato__acoes .btn{width:auto}
  .stats{gap:var(--sp-3)}
  .stat{padding:var(--sp-4) var(--sp-3)}
}

/* -------------------------------------------------------------------------
   BP: altura curta (landscape 667×375 e afins).
   Motivo estrutural: com 375px de altura o hero em 100svh empurraria o CTA
   para fora da dobra. Aqui o hero deixa de ser tela cheia.
   ------------------------------------------------------------------------- */
@media (max-width:767.98px) and (max-height:480px){
  .hero,.cena__meio{min-height:0}
  .cena__meio{padding-block:calc(var(--topo-h) + var(--sp-4)) var(--sp-6)}
  .hero__marca{display:none}
  .cena__acoes{flex-direction:row;flex-wrap:wrap;justify-content:center}
  .cena__acoes .btn{width:auto}
  .barra-cta{padding-block:var(--sp-1) calc(var(--sp-1) + env(safe-area-inset-bottom))}
}

/* -------------------------------------------------------------------------
   Movimento reduzido — nada de transição de acordeão/barra/carrossel.
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .barra-cta,.topo,.case__toggle i,.mcard__toggle i{transition:none}
  .vitrine{scroll-behavior:auto}
}