/*
===================================================================================================
 * Estilos para la página de Contacto (layout-contact.css)
 * Organiza la estructura general, el formulario y los detalles de contacto.
 * Enfocado 100% en Mobile-First.
===================================================================================================
*/

/* --- Estilos Base (Móvil) --- */

.ommvi-contact-layout .container {
    max-width: 1140px; /* Limita el ancho máximo en pantallas grandes */
    margin-left: auto;
    margin-right: auto;
    padding: 1rem;
}

.ommvi-contact-layout .contact-hero {
    text-align: center;
    margin-bottom: 2rem;
}

.ommvi-contact-layout .contact-hero h1 {
    font-size: 1.8rem;
    margin-bottom: 0.5rem;
}

.ommvi-contact-layout .contact-main-content {
    display: flex;
    flex-direction: column; /* MOBILE-FIRST: Apila los elementos en móvil */
    gap: 2rem; /* Espacio entre el formulario y los detalles de contacto */
}

.ommvi-contact-layout .contact-details-wrapper {
    background-color: #f9f9f9;
    padding: 1.5rem;
    border-radius: 8px;
    border: 1px solid #eee;
}

.ommvi-contact-layout .contact-details-wrapper h2 {
    font-size: 1.2rem;
    margin-top: 0;
}

/* --- Media Query para Escritorio (Tablet y superior) --- */

@media (min-width: 768px) {
    .ommvi-contact-layout .container {
        padding: 2rem;
    }

    .ommvi-contact-layout .contact-hero h1 {
        font-size: 2.5rem;
    }

    .ommvi-contact-layout .contact-main-content {
        flex-direction: row; /* ESCRITORIO: Pone los elementos en fila */
        align-items: stretch;/*flex-start; /* Alinea los items al inicio de su eje transversal */
    }

    .ommvi-contact-layout .contact-form-wrapper {
        flex: 2; /* El formulario ocupa 2/3 del espacio */
        min-width: 0; /* Necesario para que flexbox funcione correctamente */
    }

    .ommvi-contact-layout .contact-details-wrapper {
        flex: 1; /* Los detalles de contacto ocupan 1/3 del espacio */
        display: flex; /* AÑADIDO: Lo convierte en un contenedor flex */
   		flex-direction: column; /* AÑADIDO: Apila su contenido internamente */
       	justify-content: center; /* AÑADIDO: Centra el contenido verticalmente */
	}
}