/* =========================================================
   MIHELP — MOBILE POLISH
   O desktop permanece intacto. Estas regras entram só no celular.
   ========================================================= */
@media (max-width: 640px){
  :root{
    --mobile-gutter:16px;
    --mobile-card:#191711;
  }

  html{overflow-x:hidden;overflow-x:clip;}
  body{
    overflow-x:hidden;overflow-x:clip;
    background-image:
      radial-gradient(520px 260px at 50% 0,#2a2210 0,transparent 72%),
      linear-gradient(180deg,#0d0c09 0%,#11100d 38%,#0d0c09 100%);
  }

  /* Barras do topo: menos altura, mais cara de aplicativo */
  .top-letreiros{
    box-shadow:0 6px 20px rgba(0,0,0,.42);
  }
  .top-letreiros .tk{
    min-height:34px;
  }
  .top-letreiros .tkw{padding:7px 0;}
  .top-letreiros .tkl{padding:7px 9px;}

  .shell{width:100%;}
  .wrap{
    width:100%;
    max-width:none;
    padding:18px var(--mobile-gutter) 48px;
  }

  /* Cabeçalho vira uma área própria, sem brigar com o conteúdo */
  .top{
    display:block;
    margin-bottom:18px;
  }
  .brand{
    width:100%;
    min-height:34px;
    margin-bottom:13px;
  }
  .brand .logo{height:32px;max-width:180px;object-fit:contain;}
  .brand div:last-child{font-size:17px;}

  /* Menu com apenas as ações principais à vista.
     O JS cria o botão "Mais" para o restante. */
  .nv{
    width:100%;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:7px;
    margin:0;
    padding:0;
    overflow:visible;
  }
  .nv a.more,.nv button.more{
    width:100%;
    min-height:38px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:8px 7px;
    border-radius:10px;
    font-size:12px;
    line-height:1.1;
    white-space:normal;
    text-align:center;
    background:rgba(29,26,20,.88);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
  }
  .nv.mobile-collapsed a:nth-of-type(n+5),
  .nv.mobile-collapsed #navSup{display:none;}
  #mobileNavMore{
    display:flex;
    width:100%;
    min-height:38px;
    align-items:center;
    justify-content:center;
    border:1px solid var(--line);
    border-radius:10px;
    background:linear-gradient(180deg,#272113,#1a160e);
    color:var(--gold2);
    font:700 12px var(--sans);
    cursor:pointer;
  }
  #mobileNavMore[aria-expanded="true"]{grid-column:1 / -1;}
  .nv.mobile-expanded #mobileNavMore{display:flex;}
  .nv.mobile-expanded a.more,.nv.mobile-expanded button.more{display:flex;}

  /* Hero: mais respiro e hierarquia */
  h1.glitch{
    font-size:clamp(29px,8.5vw,38px);
    line-height:1.04;
    letter-spacing:-.035em;
    margin:26px 0 14px;
    max-width:15ch;
  }
  h1 span{margin-top:4px;}
  .sub{
    font-size:14px;
    line-height:1.65;
    margin:0 0 20px;
    max-width:40ch;
  }
  .sub::after{margin-left:2px;}

  /* A "Feira digital" deixa de parecer texto colado na página */
  .feira-note{
    position:relative;
    margin:0 0 26px;
    padding:17px 16px 17px 18px;
    border:1px solid rgba(232,185,60,.20);
    border-left:3px solid var(--gold);
    border-radius:14px;
    background:
      linear-gradient(135deg,rgba(232,185,60,.075),rgba(255,255,255,.018) 55%,rgba(0,0,0,.10));
    box-shadow:0 12px 28px rgba(0,0,0,.24);
    font-size:14px;
    line-height:1.65;
  }
  .feira-note b:first-child{
    display:block;
    font-size:16px;
    margin-bottom:5px;
    color:var(--gold2);
  }
  .feira-note a{
    display:inline-flex;
    margin-top:10px;
    padding:6px 9px;
    border:1px solid var(--line);
    border-radius:7px;
    background:rgba(0,0,0,.16);
    font-weight:700;
    text-decoration:none;
  }

  /* Seções: ritmo vertical consistente */
  section,#saiba,#seguranca,#taxas,#duvidas,#apoie,#patrocinio{
    margin-top:42px;
    scroll-margin-top:calc(var(--sticky-h,0px) + 18px);
  }
  section h2,#saiba h2,#taxas h2,#seguranca h2,#duvidas h2,#apoie h2,#patrocinio h2,#reputacao h2{
    font-size:24px;
    line-height:1.12;
    margin:0 0 9px;
    letter-spacing:-.02em;
  }
  .lead,#saiba .lead,#taxas .lead,#seguranca .lead,#duvidas .lead,#apoie .lead,#patrocinio .lead,#reputacao .lead{
    font-size:14px;
    line-height:1.65;
    margin:0 0 16px;
  }

  /* Janelas viram cards mais sofisticados */
  .win{
    border-radius:14px 14px 10px 10px;
    border-color:#3a3222;
    box-shadow:0 14px 34px rgba(0,0,0,.34);
  }
  .bar{
    min-height:34px;
    padding:7px 10px;
    font-size:11px;
  }
  .bar i{width:10px;height:10px;}
  .body{padding:16px;}

  /* Formulário: menos sensação de planilha */
  .seg{margin-bottom:17px;padding:4px;border-radius:11px;}
  .seg button{min-height:42px;padding:9px 7px;font-size:13px;}
  .role{gap:8px;margin-bottom:17px;}
  .role span{min-height:42px;display:flex;align-items:center;justify-content:center;border-radius:9px;}
  .f{margin-bottom:15px;}
  label{font-size:13px;margin-bottom:6px;}
  input[type=text],input[type=tel],input[type=email],input[type=number]{
    min-height:44px;
    padding:11px 12px;
    border-radius:9px;
    background:#100e0a;
  }
  .go,.cta2{
    min-height:44px;
    border-radius:10px;
    font-size:14px;
  }
  .note{line-height:1.55;}

  /* Meta/tabelas: largura confortável */
  .two{gap:14px;}
  .tb{min-width:0;width:100%;font-size:13px;}
  .tb th,.tb td{padding:10px 7px;}
  .tb td:nth-child(2){font-size:17px;}

  /* Grade de vagas/patrocinadores sem elementos apertados */
  .vgrid,.slots{gap:10px;}
  .vg{border-radius:11px;min-height:124px;padding:12px;}
  .vg b{font-size:14px;line-height:1.3;}
  .vg span.tx{font-size:13px;line-height:1.45;}
  .slots .slot{padding:22px 8px;min-height:90px;}

  /* Chat continua compacto, mas com área de toque decente */
  .chat{min-height:330px;}
  #cw:not(.full) .log{height:clamp(170px,32vh,280px);font-size:13px;line-height:1.6;}
  #cw:not(.full) .who.open{max-height:200px;}
  .send{padding:10px;gap:6px;}
  .send input{min-height:42px;}
  .send button,.sos-wrap button{min-height:38px;padding:8px 10px;}

  /* Evita componentes horizontais escapando da tela */
  img,video,iframe,table{max-width:100%;}
  .tw{max-width:100%;}
  dialog{width:calc(100vw - 28px);border-radius:14px;}

  footer{padding-top:10px;}
}

@media (max-width:380px){
  .wrap{padding-left:13px;padding-right:13px;}
  h1.glitch{font-size:27px;}
  .nv{grid-template-columns:1fr 1fr;}
  .feira-note{padding:15px 14px 15px 16px;}
}

@media (min-width:641px){#mobileNavMore{display:none!important;}}