/* =============================================================================
   HOME NO CELULAR · a primeira dobra (24/09/2026)
   Direção: direcao/base-mobile.png (a imagem que o Anthony fez no ChatGPT),
   medida em direcao/spec.md. Camadas extraídas por ele → assets/img/home-mobile/.

   SÓ ATÉ 600px. Fora disso a seção .mh não existe (display:none) e o hero .hd
   de sempre segue intocado: este arquivo não tem uma regra que valha no tablet
   ou no computador além do display:none da própria .mh.

   Régua da peça: as posições saem da imagem medida a 390px (1vw = 3,9px), mas
   LEGÍVEL E UTILIZÁVEL VENCE A MEDIDA (Anthony, 24/09): texto de interface
   ≥12px, toque ≥44px. Por isso quase toda fonte é max(12px, …vw).

   O esqueleto vertical tem 3 âncoras:
   · topo (logo, carrinho, menu, nav): medido do alto, em vw;
   · --zb = onde termina o botão do zap: 708px na imagem (181,5vw), mas nunca
     abaixo da dobra real (100svh − 16px). Em tela baixa (Safari com barras,
     390×664) o bloco de baixo sobe e o card + o zap cabem sem rolar;
   · o palco (celular + tags) é o que sobra entre a nav e o card, e o celular
     encolhe com ele (container query), com piso pra não virar miniatura.
   ========================================================================== */

.mh{display:none}
/* as 3 imagens do hero de computador vão num <picture> (no celular, onde o hero some, a
   <source> entrega 1px e nada baixa); display:contents deixa o layout exatamente como era */
.hd picture{display:contents}

@media (max-width:600px){

  /* NO CELULAR A HOME É O MENU (Anthony, 24/09: "a tela inicial é o menu, é pra escolher pra onde
     vai"). Ela termina nesta dobra: o hero de computador e todo o miolo antigo da home (fita, FX.01
     em diante, letreiros, rodapé) saem. Este arquivo só carrega no index.html, então nenhuma outra
     página perde nada; o que o site injeta no fim do body (menu, gaveta, busca) fica intocado. */
  .hd,body > section:not(.mh),body > .gd-fita-wrap,body > .gd-mq-sec,
  body > .gd-outline-mq,body > footer.site{display:none}
  html,body{overflow:hidden;overscroll-behavior:none}

  .mh{
    display:block;position:relative;overflow:hidden;isolation:isolate;
    background:#070B14;color:#F7F8F8;font-family:var(--font-d);
    /* A TELA É O MENU E É TRAVADA (Anthony, 24/09): a seção tem a altura exata do aparelho e
       nada rola. --mh-top = o que vem antes dela (a barra de aviso do painel), o JS mede.
       --res = o pé reservado pra pílula e o "explorar" (139px na imagem; encolhe em tela baixa).
       --zb = onde termina o botão do zap (o bloco de baixo se ancora nele). */
    --H:calc(100vh - var(--mh-top, 0px));
    --H:calc(100svh - var(--mh-top, 0px));
    --H:calc(100dvh - var(--mh-top, 0px));
    --res:clamp(100px, 16.4vh, 35.6vw);
    --res:clamp(100px, 16.4dvh, 35.6vw);
    --zb:calc(var(--H) - var(--res));
    height:var(--H);
  }
  .mh .sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap;border:0}

  /* 1 · o muro (camada fundo-muro): cabe inteiro na altura, sobra corta nos lados */
  .mh-muro{position:absolute;inset:0;z-index:0;
    background:#070B14 url(../img/home-mobile/mh-muro.webp?v=m4) 50% 0/cover no-repeat}
  .mh-muro::after{content:"";position:absolute;inset:0;
    background:linear-gradient(180deg,rgba(4,7,14,.55) 0,rgba(4,7,14,0) 22%,rgba(4,7,14,0) 70%,rgba(4,7,14,.35) 100%)}

  /* 2 · o topo: logo, carrinho, menu */
  .mh-topo{position:absolute;left:0;right:0;top:0;height:21vw;z-index:4}
  .mh-logo{position:absolute;left:5.9vw;top:2.3vw;width:27vw;display:block;line-height:0}
  .mh-logo img{width:100%;height:auto;filter:drop-shadow(0 0 14px rgba(4,137,247,.5))}
  .mh-bt{position:absolute;top:4.74vw;width:44px;height:44px;display:grid;place-items:center;
    border-radius:12px;background:rgba(4,10,22,.72);border:1px solid #193B51;color:#F5F8FF;
    -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);cursor:pointer;
    transition:border-color .18s,box-shadow .18s,transform .12s}
  .mh-bt:active{transform:scale(.94)}
  .mh-bt:focus-visible{outline:2px solid #3EF4F8;outline-offset:2px}
  .mh-carrinho{right:20.5vw}
  .mh-carrinho svg{width:22px;height:22px}
  .mh-menu{right:6.4vw;width:46px;border-color:#227B94;box-shadow:0 0 14px rgba(34,123,148,.35)}
  .mh-menu svg{width:26px;height:26px}
  .mh-carrinho .cart-count{top:-8px;right:-8px;min-width:20px;height:20px;padding:0 5px;
    background:#3DF4FD;color:#031018;font:800 11px/20px var(--font-d);
    box-shadow:0 0 10px rgba(61,244,253,.6)}

  /* 3 · a nav de grafite (as 7 portas, 2 linhas, abertas na dobra) */
  .mh-nav{position:absolute;left:0;right:0;top:21.3vw;z-index:4}
  .mh-lin{display:flex;justify-content:space-between;align-items:center;
    height:max(44px,11.5vw);padding:0 9.7vw 0 11.3vw}
  .mh-lk{position:relative;display:flex;align-items:center;justify-content:center;gap:1.6vw;
    height:100%;min-width:44px;font-family:var(--font-tag);font-weight:400;
    font-size:max(19px,5.9vw);line-height:1;color:#E6ECF6;text-decoration:none;
    text-shadow:0 2px 8px rgba(0,0,0,.7)}
  .mh-lk .lb{position:relative;z-index:1}
  .mh-lk:focus-visible{outline:2px solid #3EF4F8;outline-offset:2px;border-radius:6px}
  .mh-lk.aqui{color:#fff}
  .mh-lk.aqui .lb::after{content:"";position:absolute;left:-2px;right:-2px;bottom:-4px;height:2px;
    border-radius:2px;background:#3EF4F8;box-shadow:0 0 6px #3EF4F8}
  .mh-spray{position:absolute;z-index:0;left:50%;top:50%;width:22.1vw;height:auto;max-width:none;
    transform:translate(-56%,-44%);pointer-events:none}
  .mh-aqui{position:absolute;left:50%;top:calc(50% + 16px);transform:translateX(-50%);
    display:flex;align-items:center;gap:3px;white-space:nowrap;
    font-family:var(--font-tag);font-size:12px;line-height:1;color:#17E7F1;
    text-shadow:0 0 6px rgba(23,231,241,.45)}
  .mh-aqui svg{width:10px;height:10px;flex-shrink:0}
  .mh-ig{width:max(15px,3.9vw);height:auto;color:#0EE4F8;flex-shrink:0}
  .mh-lk[href="sobre.html"] .lb{letter-spacing:-.07em}

  /* 4 · o palco: celular torto colado no muro + as tags de spray */
  .mh-palco{position:absolute;left:0;right:0;top:43.6vw;bottom:calc(var(--res) + 39.2vw);z-index:2;
    container-type:size;pointer-events:none}
  .mh-tag{position:absolute;height:auto}
  .mh-tag-l{left:2.3vw;top:41.6cqh;width:15.4vw;transform:rotate(-6deg)}
  .mh-tag-r{left:80.3vw;top:44.4cqh;width:18.4vw;transform:rotate(-5deg)}

  .mh-cel{position:absolute;display:block;pointer-events:auto;
    height:max(62vw, min(86.7vw, 87.8cqh));aspect-ratio:720/1081;
    left:44.4vw;top:60cqh;
    transform-origin:51.66% 51.2%;transform:translate(-51.66%,-51.2%) rotate(8.5deg);
    -webkit-tap-highlight-color:transparent}
  /* placa preta atrás da tela: fecha a fresta entre o vidro e a moldura (o muro vazava) */
  .mh-cel::before{content:"";position:absolute;z-index:0;left:9.4%;top:5.2%;width:84.8%;height:91.7%;
    background:#000;border-radius:10%/6.6%}
  .mh-moldura{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;
    filter:drop-shadow(0 16px 22px rgba(0,0,0,.6))}
  .mh-tela{position:absolute;left:10.47%;top:6.07%;width:82.64%;height:89.99%;z-index:1;
    overflow:hidden;border-radius:8.8%/5.8%;container-type:inline-size;
    background:#04070E url(../img/home-mobile/mh-tela.webp?v=m2) 50% 0/cover no-repeat}

  /* a tela por dentro — tudo em cqw (1cqw = 1% da largura da tela) */
  .mh-status{position:absolute;left:8cqw;right:7cqw;top:3.2cqw;z-index:3;display:flex;
    justify-content:space-between;align-items:center;font:700 5.2cqw/1 var(--font-d);color:#fff}
  .mh-sb-dir{display:flex;align-items:center;gap:1.6cqw}
  .mh-wifi{width:4.8cqw;height:3.6cqw;color:#fff}
  .mh-sinal{width:7.5cqw;height:3.6cqw;border:1px solid #fff;border-radius:1px;position:relative;
    background:linear-gradient(#fff,#fff) 1px 50%/70% 60% no-repeat}
  .mh-minitopo{position:absolute;left:6cqw;right:5cqw;top:11cqw;z-index:3;display:flex;
    justify-content:space-between;align-items:center}
  .mh-minitopo img{width:21cqw;height:auto}
  .mh-mini-menu{width:15cqw;height:12cqw;border:1px solid #227B94;border-radius:3cqw;
    background:
      linear-gradient(#EDF2FA,#EDF2FA) 50% 30%/52% 1.5px no-repeat,
      linear-gradient(#EDF2FA,#EDF2FA) 50% 50%/52% 1.5px no-repeat,
      linear-gradient(#EDF2FA,#EDF2FA) 50% 70%/52% 1.5px no-repeat}

  .mh-slide{position:absolute;inset:0;z-index:2;opacity:0;visibility:hidden;
    transition:opacity .6s ease,visibility 0s .6s;
    display:flex;flex-direction:column;align-items:flex-start;padding:38cqw 5cqw 0}
  .mh-slide.on{opacity:1;visibility:visible;transition:opacity .6s ease,visibility 0s 0s}
  .mh-chip{position:relative;z-index:2;display:inline-flex;align-items:center;gap:2.6cqw;
    height:max(20px,10.5cqw);padding:0 3.6cqw 0 1.5cqw;border:1px solid #3FF5FB;border-radius:2.6cqw;
    background:rgba(3,12,24,.72);font:700 max(10px,5.4cqw)/1 var(--font-d);letter-spacing:.08em;
    text-transform:uppercase;color:#EAF6FF;white-space:nowrap}
  .mh-chip b{font-family:var(--font-lt);font-weight:400;font-size:max(10px,5.2cqw);color:#031018;
    background:#3FF5FB;border-radius:1.8cqw;padding:1.5cqw 2.2cqw;letter-spacing:0}
  .mh-tit{position:relative;z-index:2;margin-top:6cqw;max-width:68cqw;
    font-family:var(--font-gt);font-weight:400;font-size:max(17px,11.8cqw);line-height:.94;
    color:#F7F8F8;text-shadow:0 2px 10px rgba(0,0,0,.7)}
  .mh-tit em{font-style:normal;color:#50A7F8}
  .mh-lead{position:relative;z-index:2;margin-top:4cqw;max-width:61cqw;
    font:500 max(11px,6.3cqw)/1.35 var(--font-b);color:#DCE5F5;text-shadow:0 1px 6px rgba(0,0,0,.8)}
  .mh-cta{position:relative;z-index:2;margin-top:5cqw;display:inline-flex;align-items:center;gap:1.6cqw;
    height:max(24px,13cqw);padding:0 4.5cqw;border-radius:3cqw;background:#0E64FE;
    font:700 max(11px,6cqw)/1 var(--font-d);color:#fff;white-space:nowrap;
    box-shadow:0 0 14px rgba(14,100,254,.55)}

  /* o letreiro de neon do drop (só no slide 01) */
  .mh-neon{position:absolute;z-index:2;right:4cqw;top:35cqw;display:flex;flex-direction:column;
    align-items:center;line-height:1;animation:mhNeon 7s steps(1) infinite}
  .mh-neon b{font:700 max(9px,5cqw)/1 var(--font-d);letter-spacing:.12em;color:#9FF6FB;
    text-shadow:0 0 6px #3DF4FD}
  /* o número é TUBO: contorno aceso, miolo vazado (como o "001" da imagem) */
  .mh-neon strong{font-family:var(--font-lt);font-weight:400;font-size:max(20px,13cqw);color:transparent;
    -webkit-text-stroke:max(1.2px,.8cqw) #E8FBFF;margin-top:1cqw;
    text-shadow:0 0 5px #3DF4FD,0 0 12px #3DF4FD,0 0 24px #0E64FE}

  /* o produto do drop: recorte em pé na luz do poste, ou a arte do kit como cartaz */
  .mh-prod{position:absolute;z-index:1;right:2cqw;top:90cqw;width:31cqw;line-height:0;
    transform:rotate(4deg);border:1.3cqw solid #EEF1F6;border-radius:1.5cqw;
    box-shadow:0 10px 20px rgba(0,0,0,.6),0 0 24px rgba(61,244,253,.25)}
  .mh-prod img{width:100%;height:auto;border-radius:.5cqw}
  .mh-prod.cut{border:0;box-shadow:none;transform:none;width:34cqw;top:58cqw;right:2cqw}
  .mh-prod.cut img{filter:drop-shadow(0 8px 10px rgba(0,0,0,.6))}

  /* slides 02–04: o mascote da página no lugar do produto */
  .mh-art{position:absolute;z-index:1;right:-4cqw;bottom:13cqw;width:46cqw;line-height:0}
  .mh-slide:not([data-slide]) .mh-lead{max-width:56cqw}
  /* tela do celular pequena (aparelho baixo): o parágrafo sai, fica título + botão, tudo legível */
  @container (max-width:150px){ .mh-lead{display:none} .mh-tit{margin-top:5cqw} }
  .mh-art img{width:100%;height:auto;filter:drop-shadow(0 8px 12px rgba(0,0,0,.6))}

  .mh-pontos{position:absolute;z-index:3;left:0;right:0;bottom:6cqw;display:flex;justify-content:center;
    gap:2.6cqw}
  .mh-pontos i{width:3cqw;height:3cqw;border-radius:50%;background:rgba(255,255,255,.3);
    transition:background .3s,box-shadow .3s}
  .mh-pontos i.on{background:#3DF4FD;box-shadow:0 0 6px #3DF4FD}

  /* 5 · o bloco de baixo: card do drop + zap (fundo do zap = --zb), status + explorar */
  .mh-base{position:absolute;inset:0;z-index:3;pointer-events:none}
  .mh-grupo{position:absolute;left:5.4vw;bottom:var(--res);display:flex;flex-direction:column;
    align-items:flex-start;gap:max(14px,4.1vw)}
  .mh-grupo > *,.mh-rodape > *{pointer-events:auto}

  .mh-drop{position:relative;display:flex;align-items:center;gap:2.4vw;width:clamp(204px,57vw,342px);min-height:76px;
    padding:12px 26px 12px 10px;border-radius:12px;background:rgba(0,13,26,.88);
    border:1px solid #3CC9ED;box-shadow:0 0 18px rgba(60,201,237,.28),0 12px 26px rgba(0,0,0,.45);
    color:#F7F8F8;text-decoration:none;margin-top:17px}
  .mh-drop:focus-visible{outline:2px solid #3EF4F8;outline-offset:3px}
  .mh-drop-chip{position:absolute;left:2vw;top:-12px;height:22px;padding:0 2.6vw;border-radius:6px;
    display:flex;align-items:center;background:#49F6FB;color:#031018;
    font-family:var(--font-lt);font-weight:400;font-size:12px;line-height:1;letter-spacing:.02em;
    box-shadow:0 0 14px rgba(73,246,251,.5);white-space:nowrap}
  .mh-drop-img{width:clamp(42px,12.3vw,60px);height:clamp(42px,12.3vw,60px);object-fit:cover;flex-shrink:0;
    border:3px solid #F2F4F8;border-radius:8px}
  .mh-drop-tx{min-width:0;display:flex;flex-direction:column;gap:2px}
  /* nome em até 2 linhas: "O Kit do Renan" cabe em 1, um drop de nome longo quebra em vez de cortar */
  .mh-drop-nm{font:600 clamp(13.5px,3.7vw,17px)/1.15 var(--font-d);display:-webkit-box;-webkit-line-clamp:2;
    -webkit-box-orient:vertical;overflow:hidden}
  .mh-drop-ct{font:500 12px/1.3 var(--font-d);white-space:nowrap;letter-spacing:.06em;text-transform:uppercase;color:#959FBA}
  .mh-drop-ct:empty{display:none}
  .mh-drop-p{font:500 12px/1.2 var(--font-d);color:#919BB6;white-space:nowrap}
  .mh-drop-p b{font:800 clamp(16px,4.6vw,20px)/1 var(--font-d);color:#34F3F7;margin-right:3px;letter-spacing:-.01em}
  .mh-drop-arw{position:absolute;right:17px;top:50%;width:16px;height:16px;margin-top:-8px;color:#DCE5F5}

  .mh-zap{display:flex;align-items:center;justify-content:flex-start;gap:3vw;width:max(204px,56.4vw);height:44px;
    padding:0 5.6vw 0 6.9vw;
    border-radius:12px;background:linear-gradient(135deg,#80F8B0,#2EE789);color:#010704;
    font:800 max(13px,3.55vw)/1 var(--font-d);letter-spacing:0;text-transform:uppercase;
    text-decoration:none;white-space:nowrap;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 0 9px 2px rgba(46,231,137,.55),0 0 22px rgba(46,231,137,.45),0 10px 24px rgba(0,0,0,.4);
    transition:transform .12s}
  .mh-zap:active{transform:scale(.97)}
  .mh-zap:focus-visible{outline:2px solid #fff;outline-offset:3px}
  .mh-zap svg{width:23px;height:23px;flex-shrink:0}
  .mh-zap .mh-seta{margin-left:auto}

  .mh-rodape{position:absolute;left:5.4vw;width:57vw;top:calc(var(--zb) + clamp(8px, 1.6vh, 13px));display:flex;
    flex-direction:column;align-items:center;gap:clamp(6px, 1.6vh, 14px);pointer-events:none}
  .mh-pill{align-self:flex-start;margin-left:1vw;display:inline-flex;align-items:center;gap:7px;
    height:30px;padding:0 12px 0 10px;border-radius:999px;border:1px solid #1F7A4C;
    background:rgba(4,24,14,.72);font:700 12px/1 var(--font-d);letter-spacing:.02em;
    text-transform:uppercase;color:#EDEFF4;white-space:nowrap}
  .mh-pill:not(.pronta){visibility:hidden}   /* nasce neutra: o relógio decide antes de mostrar */
  .mh-pill i{width:7px;height:7px;border-radius:50%;background:#2EE789;box-shadow:0 0 8px #2EE789;
    animation:mhPulsa 2.4s ease-in-out infinite}
  .mh-pill.off{border-color:#96242A;background:rgba(28,6,10,.72)}
  .mh-pill.off i{background:#F8414C;box-shadow:0 0 8px #F8414C;animation:none}
  .mh-explorar{display:flex;flex-direction:column;align-items:center;gap:8px;min-height:44px;padding:0 10px;
    color:#B4BFD0;text-decoration:none;font:500 12px/1 var(--font-d);letter-spacing:.4em;
    text-transform:uppercase;white-space:nowrap}
  .mh-explorar:focus-visible{outline:2px solid #3EF4F8;outline-offset:4px;border-radius:8px}
  .mh-chev{width:28px;height:28px;border-radius:50%;border:1px solid #1E658A;display:grid;place-items:center;
    color:#3EF4F8;background:rgba(4,14,26,.6);box-shadow:0 0 10px rgba(30,101,138,.4);
    animation:mhDesce 2s ease-in-out infinite}
  .mh-chev svg{width:16px;height:16px}

  /* 6 · o mascote com o engradado aceso, por cima do celular e da borda do card */
  /* abaixo de 390 o texto do card não encolhe na mesma proporção (piso de legibilidade),
     então o mascote dá uns px de passagem pra luva não cobrir o nome */
  .mh-masc,.mh-masc-refl{position:absolute;left:calc(47.7vw + max(0px, (390px - 100vw) * .45));width:50.3vw;height:auto;pointer-events:none}
  .mh-masc{z-index:5;top:calc(var(--zb) - 49.2vw);filter:drop-shadow(0 10px 18px rgba(0,0,0,.5))}
  .mh-masc-refl{z-index:4;top:calc(var(--zb) - 49.2vw + 77.1vw);transform:scaleY(-1);opacity:.6;
    filter:blur(.6px) saturate(1.3);
    -webkit-mask-image:linear-gradient(to top,#000 0,transparent 16%);
            mask-image:linear-gradient(to top,#000 0,transparent 16%)}

  /* 7 · o HUD flutuante (logo, lupa, conta, carrinho, porta, som, zap) fica fora da home no
     celular: a tela é o menu e já tem topo, carrinho e zap. É CSS puro (não depende do JS rodar).
     Com o menu aberto nada some (a porta é quem fecha o menu). */
  html:not(.gd-menu-on) #gd-hud .hud-chip,
  html:not(.gd-menu-on) #gd-hud .hud-porta,
  html:not(.gd-menu-on) #gd-hud .hud-tip,
  html:not(.gd-menu-on) .gd-wafab,
  html:not(.gd-menu-on) .gd-dj{opacity:0 !important;visibility:hidden !important;pointer-events:none !important}
  /* as sombras fixas de topo e de pé do HUD (style.css, body.gd-street::before/::after) escureciam o
     zap, o "explorar mais" e os tênis na dobra: saem junto com o HUD e voltam com ele */
  html:not(.gd-menu-on) body.gd-street::before,
  html:not(.gd-menu-on) body.gd-street::after{opacity:0 !important;visibility:hidden}

  @keyframes mhNeon{0%,100%{opacity:1}61%{opacity:.55}62%{opacity:1}64%{opacity:.7}65%{opacity:1}}
  @keyframes mhPulsa{0%,100%{opacity:1}50%{opacity:.45}}
  @keyframes mhDesce{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
}

@media (max-width:600px) and (prefers-reduced-motion:reduce){
  .mh-neon,.mh-pill i,.mh-chev{animation:none}
  .mh-slide{transition:none}
}

/* ESTADOS (24/09, pedido do Anthony: "passo o mouse e não reage, falta a animação do clique").
   A língua é a do menu do site (a Empena): a palavra acende em neon com a piscada neonFlick, um
   traço ciano "pinta" por baixo da esquerda pra direita, e quem não está sob a luz escuta
   (as outras apagam). Os botões sobem 2px com borda ciano, como os chips do HUD.
   Mouse só onde existe mouse (hover:hover) — no celular o hover gruda depois do toque; lá quem
   fala é o :active (o dedo apertando) e o carimbo .bate que o JS dá no toque antes da porta. */
@media (max-width:600px){
  .mh-lk .lb{transition:color .2s,text-shadow .2s,transform .16s cubic-bezier(.2,.8,.3,1)}
  .mh-lk:not(.aqui) .lb::after{content:"";position:absolute;left:-2px;right:-2px;bottom:-4px;height:3px;
    border-radius:999px;background:#3EF4F8;box-shadow:0 0 8px #3EF4F8;
    transform:scaleX(0) rotate(-.6deg);transform-origin:left center;transition:transform .3s cubic-bezier(.2,.8,.3,1)}
  .mh-lk:focus-visible .lb,.mh-lk:active .lb,.mh-lk.bate .lb{color:#fff;
    text-shadow:0 2px 6px rgba(0,0,0,.7),0 0 18px rgba(56,225,242,.85)}
  .mh-lk:focus-visible .lb::after,.mh-lk:active .lb::after,.mh-lk.bate .lb::after{transform:scaleX(1) rotate(-.6deg)}
  .mh-lk:active .lb{transform:scale(.94)}
  .mh-lk.bate .lb{animation:neonFlick .3s both,mhBate .34s cubic-bezier(.2,1.2,.3,1) both}
  .mh-lk .mh-ig{transition:transform .2s,filter .2s}
  .mh-lk:active .mh-ig,.mh-lk.bate .mh-ig{transform:translate(2px,-2px);filter:drop-shadow(0 0 8px rgba(14,228,248,.8))}

  .mh-logo img{transition:filter .25s,transform .2s}
  .mh-logo:active img{transform:scale(.97)}

  .mh-bt svg{transition:transform .22s cubic-bezier(.2,.8,.3,1)}
  .mh-bt:active{border-color:#3EF4F8;box-shadow:0 0 16px rgba(62,244,248,.45)}
  .mh-menu svg path{transform-box:fill-box;transform-origin:center;transition:transform .22s cubic-bezier(.2,.8,.3,1)}
  .mh-menu:active svg path:nth-child(1){transform:translateY(-1.5px)}
  .mh-menu:active svg path:nth-child(3){transform:translateY(1.5px)}
  .mh-carrinho:active svg{transform:rotate(-10deg) translateX(-1px)}

  .mh-drop{transition:transform .2s cubic-bezier(.2,.8,.3,1),border-color .2s,box-shadow .2s}
  .mh-drop-arw{transition:transform .2s}
  .mh-drop:active{transform:scale(.98);border-color:#3EF4F8;
    box-shadow:0 0 26px rgba(62,244,248,.45),0 12px 26px rgba(0,0,0,.45)}
  .mh-drop:active .mh-drop-arw{transform:translateX(3px)}

  .mh-zap{transition:transform .14s,filter .2s,box-shadow .2s}
  .mh-zap .mh-seta{transition:transform .2s}
  .mh-zap:active{filter:brightness(1.06)}
  .mh-zap:active .mh-seta{transform:translateX(3px)}

  .mh-chev{transition:border-color .2s,background .2s,box-shadow .2s}
  .mh-explorar{transition:color .2s}
  .mh-explorar:active{color:#E6ECF6}
  .mh-explorar:active .mh-chev,.mh-explorar:focus-visible .mh-chev{border-color:#3EF4F8;background:rgba(62,244,248,.14);
    box-shadow:0 0 14px rgba(62,244,248,.5)}

  /* o celular "sai do muro" um pouco quando a mão chega: gira menos e cresce 2% */
  .mh-cel{transition:transform .35s cubic-bezier(.2,.8,.3,1)}
  .mh-cel:active{transform:translate(-51.66%,-51.2%) rotate(7deg) scale(1.02)}

  @keyframes mhBate{0%{transform:scale(1)}35%{transform:scale(.9) rotate(-2deg)}100%{transform:scale(1.04)}}
}

/* MOUSE (computador com a janela estreita, tablet com mouse): o mesmo vocabulário no hover */
@media (max-width:600px) and (hover:hover) and (pointer:fine){
  .mh-nav:hover .mh-lk{opacity:.42;filter:saturate(.5);transition:opacity .2s,filter .2s}
  .mh-nav:hover .mh-lk:hover{opacity:1;filter:none}
  .mh-lk:hover .lb{color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.7),0 0 18px rgba(56,225,242,.85);
    animation:neonFlick .3s both}
  .mh-lk:hover .lb::after{transform:scaleX(1) rotate(-.6deg)}
  .mh-lk:hover .mh-ig{transform:translate(2px,-2px);filter:drop-shadow(0 0 8px rgba(14,228,248,.8))}
  .mh-logo:hover img{filter:drop-shadow(0 0 22px rgba(4,137,247,.8))}
  .mh-bt:hover{transform:translateY(-2px);border-color:rgba(62,244,248,.6);
    box-shadow:0 10px 24px rgba(0,0,0,.5),0 0 14px rgba(62,244,248,.3)}
  .mh-menu:hover svg path:nth-child(1){transform:translateY(-1.5px)}
  .mh-menu:hover svg path:nth-child(3){transform:translateY(1.5px)}
  .mh-menu:hover svg path:nth-child(2){transform:scaleX(.7)}
  .mh-carrinho:hover svg{transform:rotate(-10deg) translateX(-1px)}
  .mh-drop:hover{transform:translateY(-2px);border-color:#3EF4F8;
    box-shadow:0 0 26px rgba(62,244,248,.45),0 16px 30px rgba(0,0,0,.5)}
  .mh-drop:hover .mh-drop-arw{transform:translateX(3px)}
  .mh-zap:hover{transform:translateY(-2px);filter:brightness(1.06)}
  .mh-zap:hover .mh-seta{transform:translateX(3px)}
  .mh-explorar:hover{color:#E6ECF6}
  .mh-explorar:hover .mh-chev{border-color:#3EF4F8;background:rgba(62,244,248,.14);box-shadow:0 0 14px rgba(62,244,248,.5)}
  .mh-cel:hover{transform:translate(-51.66%,-51.2%) rotate(7deg) scale(1.02)}
}

@media (max-width:600px) and (prefers-reduced-motion:reduce){
  .mh-lk .lb,.mh-lk .lb::after,.mh-bt,.mh-bt svg,.mh-menu svg path,.mh-drop,.mh-drop-arw,.mh-zap,.mh-zap .mh-seta,
  .mh-cel,.mh-logo img,.mh-lk .mh-ig{transition:none}
  .mh-lk.bate .lb,.mh-lk:hover .lb{animation:none}
  .mh-lk:not(.aqui) .lb::after,.mh-nav .mh-lk,.mh-nav:hover .mh-lk{transition:none}
  .mh-lk:active .lb,.mh-cel:active,.mh-cel:hover,.mh-drop:active,.mh-drop:hover,.mh-bt:hover,.mh-zap:hover{transform:none}
  .mh-cel:active,.mh-cel:hover{transform:translate(-51.66%,-51.2%) rotate(8.5deg)}
}

/* A ENTRADA (24/09, "não tem animação nenhuma, parece uma foto"). Mesma língua do menu do site:
   as palavras entram CARIMBADAS em sequência (o mnStamp da Empena), a pincelada é pintada, o
   celular COLA no muro (vem reto e torce até os 8,5° com um tranco), o mascote sobe com o engradado
   e o card, o zap e o status sobem por último. Começa quando a porta de aço sobe (o JS troca .pre
   por .anima). Garantia: se o JS não rodar, .pre solta tudo sozinho em 2,5 s.
   fill-mode BACKWARDS: depois de entrar, cada peça volta ao estilo dela (e o hover/toque funciona). */
@media (max-width:600px) and (prefers-reduced-motion:no-preference){
  .mh.pre :is(.mh-logo,.mh-bt,.mh-lk,.mh-cel,.mh-tag,.mh-drop,.mh-zap,.mh-pill,.mh-explorar,.mh-masc,.mh-masc-refl){
    opacity:0;animation:mhSolta 0s 2.5s forwards}
  .mh-lin:first-child .mh-lk:nth-child(1){--i:0} .mh-lin:first-child .mh-lk:nth-child(2){--i:1}
  .mh-lin:first-child .mh-lk:nth-child(3){--i:2} .mh-lin:first-child .mh-lk:nth-child(4){--i:3}
  .mh-lin:last-child .mh-lk:nth-child(1){--i:4} .mh-lin:last-child .mh-lk:nth-child(2){--i:5}
  .mh-lin:last-child .mh-lk:nth-child(3){--i:6}

  .mh.anima .mh-logo{animation:mhFade .45s ease backwards}
  .mh.anima .mh-bt{animation:mhFade .45s ease .08s backwards}
  .mh.anima .mh-lk{animation:mhCarimbo .42s cubic-bezier(.2,1.1,.3,1) backwards;
    animation-delay:calc(.14s + var(--i,0) * .06s)}
  .mh.anima .mh-spray{animation:mhSpray .5s cubic-bezier(.2,.8,.3,1) .2s backwards}
  .mh.anima .mh-aqui{animation:mhFade .35s ease .55s backwards}
  .mh.anima .mh-cel{animation:mhCola .75s cubic-bezier(.2,1.3,.35,1) .3s backwards}
  .mh.anima .mh-tag{animation:mhFade .7s ease .6s backwards}
  .mh.anima .mh-masc{animation:mhMascote .75s cubic-bezier(.2,1.25,.35,1) .5s backwards}
  .mh.anima .mh-masc-refl{animation:mhReflexo .75s cubic-bezier(.2,1.25,.35,1) .5s backwards}
  .mh.anima .mh-drop{animation:mhSobe .5s cubic-bezier(.2,.8,.3,1) .62s backwards}
  .mh.anima .mh-zap{animation:mhSobe .5s cubic-bezier(.2,.8,.3,1) .72s backwards}
  .mh.anima .mh-pill{animation:mhSobe .5s cubic-bezier(.2,.8,.3,1) .82s backwards}
  .mh.anima .mh-explorar{animation:mhSobe .5s cubic-bezier(.2,.8,.3,1) .9s backwards}

  @keyframes mhSolta{to{opacity:1}}
  @keyframes mhFade{from{opacity:0}to{opacity:1}}
  @keyframes mhCarimbo{0%{opacity:0;transform:translateX(-14px)}100%{opacity:1;transform:none}}
  @keyframes mhSpray{0%{clip-path:inset(0 100% 0 0)}100%{clip-path:inset(0 0 0 0)}}
  @keyframes mhCola{0%{opacity:0;transform:translate(-51.66%,-51.2%) translateY(-28px) rotate(1deg) scale(1.07)}
    60%{opacity:1}100%{opacity:1;transform:translate(-51.66%,-51.2%) rotate(8.5deg)}}
  @keyframes mhMascote{0%{opacity:0;transform:translateY(48px)}100%{opacity:1;transform:none}}
  @keyframes mhReflexo{0%{opacity:0;transform:scaleY(-1) translateY(-48px)}100%{opacity:.6;transform:scaleY(-1)}}
  @keyframes mhSobe{0%{opacity:0;transform:translateY(14px)}100%{opacity:1;transform:none}}
}

/* RESERVA ABAIXO DE 320px (celular com zoom de 200%, texto grande) E EM TELA BAIXA (celular deitado,
   até 500px de altura): a composição da imagem não cabe, então a dobra vira pilha simples — nada se sobrepõe e nada some. O celular torto,
   as tags e o mascote saem; a navegação, o drop, o zap e o status ficam. */
@media (max-width:319px), (max-width:600px) and (max-height:500px){
  html{overflow:auto;overscroll-behavior:auto}
  body{overflow:visible;overscroll-behavior:auto}
  .mh{height:auto;padding:12px 12px 24px;display:flex;flex-direction:column;gap:14px}
  .mh-topo{position:relative;height:auto;display:flex;align-items:center;gap:8px}
  .mh-logo{position:static;width:96px}
  .mh-bt{position:static;flex-shrink:0}
  .mh-carrinho{margin-left:auto}
  .mh-nav{position:static}
  .mh-lin{flex-wrap:wrap;height:auto;padding:0;gap:2px 14px;justify-content:flex-start}
  .mh-lk{height:44px;font-size:19px}
  .mh-lk.aqui .mh-spray,.mh-aqui{display:none}
  .mh-palco,.mh-masc,.mh-masc-refl{display:none}
  .mh-base{position:static;display:flex;flex-direction:column;gap:14px}
  .mh-grupo,.mh-rodape{position:static;width:auto;align-items:stretch}
  .mh-drop,.mh-zap{width:100%}
  .mh-zap{height:auto;min-height:44px;white-space:normal;padding:8px 12px}
  .mh-explorar{align-self:center}
}