/* ============================================================================
   O ENTRAR DO TOPO, NO CELULAR
   ============================================================================
   Pedido dela em 17/09/2026: "o ENTRAR no celular precisa ser em cima em
   destaque, e por onde a pessoa entra".

   O que existia: em telas de ate 780px o estilo.css ja escondia os outros
   links do topo e deixava so o ENTRAR, mas ele ficava do mesmo tamanho do
   desktop (12px, texto cinza #cfcfcf herdado de .nav-links a, borda fina
   bege) e sumia da tela junto com o resto do topo na primeira rolagem. Numa
   pagina de venda com mais de quatorze mil pixels de altura, quem quer entrar
   nao volta ao topo.

   O que este arquivo faz, e SO em tela pequena:
     1. o topo passa a acompanhar a rolagem, entao o ENTRAR fica sempre em
        cima, sem cobrir nada: ele ocupa o proprio espaco no fluxo da pagina;
     2. o botao ganha a laranja da marca no contorno, no texto e num
        preenchimento leve, no lugar do cinza de baixo contraste;
     3. a area de toque passa de cerca de 36px para cerca de 48px de altura,
        que e o minimo confortavel para o dedo.

   No desktop nada muda: tudo aqui vive dentro da media query. O estilo.css
   nao foi tocado. Este arquivo entra DEPOIS dos outros CSS nas paginas, para
   ganhar de regras de mesma forca (o tutoriais-pagina.css tambem mexe no
   padding do ENTRAR em tela pequena).
   ========================================================================= */

@media (max-width: 780px) {

  /* o topo acompanha a rolagem. fundo solido para o conteudo nao aparecer
     por tras das letras, e a mesma linha de separacao do resto do site. */
  /* O TOPO E FIXO, NAO STICKY (conferido no site em 17/09/2026).
     O estilo.css deixa o body com overflow-x: hidden, e isso transforma o body
     em area de rolagem: com sticky o topo ficava preso ao body e saia da tela
     junto com a pagina. Medido no ar: o topo aparecia em -2500px depois de
     rolar. Com position: fixed ele fica de verdade, e o espaco dele volta para
     o fluxo pelo padding-top do body, para nada ficar escondido atras. */
  body { padding-top: var(--altura-topo-celular, 80px); }
  .nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 60;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    padding-top: 12px;
    padding-bottom: 12px;
    gap: 12px;
  }

  /* o logo nao pode ser empurrado nem apertado pelo botao maior */
  .nav .nav-logo { flex-shrink: 0; }

  .nav .nav-entrar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 12px 22px;
    font-size: 13.5px;
    letter-spacing: .1em;
    border: 2px solid var(--orange);
    color: var(--orange);
    background: rgba(255, 106, 0, .14);
    white-space: nowrap;
  }

  .nav .nav-entrar:active {
    background: var(--orange);
    color: var(--bg);
  }

  /* com o topo fixo, a ancora #contato pararia atras dele. isto devolve o
     espaco do topo na hora do salto. */
  [id] { scroll-margin-top: 84px; }

  .nav .nav-entrar:focus-visible {
    outline: 3px solid var(--amber);
    outline-offset: 2px;
  }
}