/* Contenedor principal */
.contact-wrapper {
    max-width: 900px; /* Controla el ancho total */
    margin: 0 auto; /* Centra horizontalmente */
    padding: 20px; /* Espaciado interno */
    display: flex;
    align-items: center; /* Alinea verticalmente */
    justify-content: space-between; /* Espaciado proporcional */
    gap: 20px; /* Espacio entre los elementos */
}

/* Contenedor del formulario */
.form-container {
    flex: 1; /* Toma espacio disponible */
    background-color: #f9f9f9; /* Fondo claro */
    border: 1px solid #ddd; /* Borde sutil */
    border-radius: 8px; /* Bordes redondeados */
    padding: 20px; /* Espaciado interno */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Sombra ligera */
}

h2 {
    text-align: center; /* Centra el título */
    font-weight: bold;
    margin-bottom: 20px; /* Espaciado inferior */
}

button.btn-contacto {
    display: block; /* Asegura el centrado horizontal */
    margin: 20px auto 0; /* Centra el botón al final */
    padding: 10px 20px; /* Espaciado interno */
    color: #fff; /* Color del texto */
    background-color: #00635b; /* Color del botón */
    border: 2px solid #00635b; /* Borde del botón */
    border-radius: 5px; /* Bordes redondeados */
    transition: background-color 0.3s, border-color 0.3s;
}

button.btn-contacto:hover {
    background-color: #2f4f4f; /* Fondo al pasar el cursor */
    border-color: #2f4f4f; /* Borde más oscuro */
}

/* Contenedor de la imagen */
.image-container {
    flex: 1; /* Toma espacio disponible */
    text-align: center; /* Centra el contenido */
}

.img-fluid {
    max-width: 100%; /* Escala dentro del contenedor */
    height: auto; /* Mantiene proporción */
    border-radius: 10px; /* Bordes redondeados */
}

/* Responsividad */
@media (max-width: 768px) {
    .contact-wrapper {
        flex-direction: column; /* Apila los elementos */
        align-items: stretch; /* Asegura que ocupen todo el ancho */
    }

    .form-container, .image-container {
        flex: none; /* Desactiva flex-grow */
        margin: 0 auto; /* Centra los elementos */
    }
}