/* MOBILE.CSS - para telas até 768px */

@media (max-width: 768px) {
  header {
    flex-direction: column;
    text-align: center;
    padding: 1rem;
  }

  nav ul {
    flex-direction: column;
    gap: 1rem;
    margin-top: 1rem;
  }

  main {
    padding: 1rem;
    background-image: url('https://raw.githubusercontent.com/reinaldo-fernandes/modelos-de-portifoli-barbearia/main/src/img/barbeariamobile.png');
     /*background-image: url('/src/img/barbeariamobile.png'); */
  }

  #servicos {
    padding: 1rem;
    gap: 2rem;
  }

  .servico {
    flex-direction: column !important; /* força coluna, mesmo nas classes esquerda/direita */
    text-align: center;
  }

  .servico .imagem,
  .servico .texto {
    order: unset;
    width: 100%;
    margin: 0 auto;
  }

  .servico img {
    max-width: 100%;
    height: auto;
  }

  h2 {
    font-size: 1.5rem;
  }

  .modal-content {
    width: 95%;
    padding: 1.5rem;
  }

  .footer-content {
    gap: 0.5rem;
    padding: 1rem;
  }

  .footer-icons a {
    font-size: 1.5rem;
    margin: 0 0.4rem;
  }

  .botao-agendar {
    font-size: 1rem;
  }
}