/* Projeto Ver Social - ajustes de tela. O desktop vive no index.html. */

@media (max-width: 1024px) {
  :root { --secao: 64px; }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .sobre,
  .duvidas,
  .contato { grid-template-columns: 1fr; gap: 34px; }
  .duvidas figure { display: none; }
}

@media (max-width: 860px) {
  .menu-abre { display: block; }
  .nav {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: 10px 20px 20px;
    background: var(--white);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow);
  }
  .nav.aberto { display: flex; }
  .nav a { padding: 14px 4px; border-bottom: 1px solid var(--line); }
  .nav .btn { justify-content: center; margin-top: 14px; border-bottom: 0; }
  .topo-inner { position: relative; }

  .hero { padding: 84px 0 76px; }
  form { padding: 26px 22px; }
  .opcoes { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  :root { --secao: 52px; }
  .wrap { width: calc(100% - 32px); }
  .cards { grid-template-columns: 1fr; }
  .linha { grid-template-columns: 1fr; }
  .opcoes { grid-template-columns: 1fr; }
  .hero-acoes .btn,
  .form-rodape .btn { width: 100%; justify-content: center; }
  .card { padding: 24px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn { transition: none; }
}