/* --- Estilos Responsivos --- */

@media (max-width: 768px) {
 .navbar {
  flex-direction: column;
 }

 .nav-links {
  margin-top: 1rem;
 }

 .nav-links li {
  margin: 0 10px;
 }
}

@media (max-width: 992px) {
  #titulo-formulario {
    flex-direction: column;
    text-align: center;
  }
  .content-form {
    margin-top: 2rem;
  }
}

@media (max-width: 576px) {
  .double-field {
    flex-direction: column;
    gap: 0;
  }

  .form-field .double-field {
    margin-bottom: 1.2rem;
  }

  .form-field label {
    margin-top: 1rem;
  }
}

@media (max-width: 768px) {
  .content-about-me {
    flex-direction: column;
    text-align: center;
  }

  .column-text h2 {
    margin-top: 2rem;
  }
}

@media (max-width: 992px) {
  .grid-services {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .grid-services {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .bg-subtitle-green p {
    font-size: 1.2rem;
  }
  .subtitle-2-contact {
    padding: 3rem 1rem;
  }
  .subtitle-2-contact h2 {
    font-size: 2.2rem;
  }
}
/* --- Diseño Responsivo para el Footer Final --- */
@media (max-width: 992px) {
    .footer-contenedor {
        grid-template-columns: repeat(2, 1fr); /* 2 columnas para tablets. */
    }
}

@media (max-width: 768px) {
    .footer-contenedor {
        grid-template-columns: 1fr; /* 1 columna para móviles. */
        text-align: left; /* Alineamos el texto a la izquierda en móvil. */
    }
}