@media (max-width: 820px) {
  .hero {
    min-height: auto;
  }
  .sobre-grade,
  .contato-grade {
    grid-template-columns: 1fr;
  }
  .sobre-grade,
  .contato-grade {
    gap: 3rem;
  }
}
@media (max-width: 520px) {
  .container {
    width: calc(100% - 2rem);
  }
  .barra-navegacao {
    min-height: 64px;
  }
  .navegacao {
    gap: 0.65rem;
    font-size: 0.82rem;
  }
  .navegacao a {
    padding-inline: 0.1rem;
  }
  .hero {
    padding-block: 3.5rem;
  }
  .hero h1 {
    font-size: clamp(2.45rem, 12.5vw, 4.8rem);
    letter-spacing: -0.065em;
  }
  .especialidade {
    font-size: 1.08rem;
  }
  .tecnologias li {
    font-size: 0.84rem;
  }
  .acoes-navegacao {
    justify-content: flex-start;
  }
  .alternar-tema {
    width: 38px;
    height: 38px;
  }
  .campo-duplo {
    grid-template-columns: 1fr;
  }
  .formulario-rodape {
    align-items: flex-start;
    flex-direction: column;
  }
  .formulario button {
    width: 100%;
  }
  .redes {
    justify-content: flex-start;
    gap: 1.25rem;
  }
  .rodape-conteudo {
    align-items: flex-start;
    flex-direction: column;
    gap: 1rem;
  }
}
/* Toque (Android e iOS): resposta imediata ao pressionar, sem filtros caros. */
@media (hover: none) and (pointer: coarse) {
  .tecnologias li {
    background: color-mix(in srgb, var(--superficie) 94%, transparent);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .alternar-tema,
  .tecnologias li,
  .formulario button,
  .redes a,
  .navegacao a {
    transition:
      color 0.25s ease,
      background-color 0.25s ease,
      border-color 0.25s ease,
      box-shadow 0.25s ease,
      transform 0.4s var(--curva-mola);
  }

  .alternar-tema:active {
    transform: scale(0.88);
  }

  .tecnologias li:active {
    border-color: var(--azul);
    transform: scale(0.95);
  }

  .formulario button:active {
    filter: brightness(0.94);
    transform: scale(0.97);
  }

  .navegacao a:active,
  .redes a:active {
    color: var(--azul);
    transform: scale(0.95);
  }

  .alternar-tema:active,
  .tecnologias li:active,
  .formulario button:active,
  .navegacao a:active,
  .redes a:active {
    transition-duration: 0.12s;
  }
}

/* Rolagem guiada pelo navegador: roda no compositor, sem listeners de scroll. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    .hero-conteudo {
      animation: saida-hero linear both;
      animation-timeline: scroll(root);
      animation-range: 0 75vh;
    }
  }
}

/* Movimento reduzido (inclui "Remover animações" e economia de bateria no
   Android): sem deslocamentos nem loops, mas as entradas continuam em fade. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .orbita,
  .anel,
  .hero h1 span,
  .formulario::before {
    animation: none;
  }

  .hero-efeitos {
    transform: none;
  }

  @keyframes entrada-hero {
    from {
      opacity: 0;
    }
  }
  @keyframes entrada-chip {
    from {
      opacity: 0;
    }
  }
  @keyframes entrada-item {
    from {
      opacity: 0;
    }
  }
  @keyframes entrada-campo {
    from {
      opacity: 0;
    }
  }
  @keyframes revelar {
    from {
      opacity: 0;
    }
  }
  @keyframes desenhar-linha {
    from {
      opacity: 0;
    }
  }
  @keyframes linha-titulo {
    from {
      opacity: 0;
    }
  }
}

/* Mantém o movimento no Android sem os filtros que causam repinturas caras. */
@media (max-width: 820px) {
  html.android {
    scroll-behavior: auto;
  }

  html.android .cabecalho {
    background: color-mix(in srgb, var(--fundo) 97%, transparent);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  html.android .cabecalho.rolagem {
    box-shadow: 0 5px 18px rgb(15 42 60 / 8%);
  }

  html.android[data-tema="escuro"] .cabecalho.rolagem {
    box-shadow: 0 5px 18px rgb(0 0 0 / 18%);
  }

  html.android .hero {
    contain: paint;
  }

  html.android .hero::before {
    opacity: 0.14;
    -webkit-mask-image: none;
    mask-image: none;
  }

  html.android .hero h1 span {
    animation: none;
  }

  html.android .tecnologias li {
    box-shadow: 0 3px 10px rgb(15 42 60 / 7%);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  html.android .orbita {
    backface-visibility: hidden;
  }

  html.android .orbita-um {
    animation-duration: 12s;
  }

  html.android .orbita-dois {
    animation-duration: 14s;
  }

  html.android .anel {
    animation-duration: 3.2s;
    backface-visibility: hidden;
  }

  html.android .formulario {
    box-shadow: 0 14px 36px rgb(15 42 60 / 8%);
  }

  html.android[data-tema="escuro"] .formulario {
    box-shadow: 0 14px 36px rgb(0 0 0 / 20%);
  }
}