/* Estilos básicos para la estructura de contacto */
        .contact-section {
            display: flex;
            align-items: center; /* Alinea los elementos verticalmente al centro */
            padding: 20px;
            max-width: 1200px;
            margin: 0 auto;
            gap: 40px; /* Espacio entre la imagen y los datos */
            flex-wrap: wrap; /* Permite que las columnas se envuelvan en pantallas pequeñas */
            justify-content: center; /* Centra el contenido si se envuelve */
            background-color: #fff;
            border-radius: 12px;
            box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
            margin-bottom: 30px;
        }
        .contact-image-container {
            flex: 1;
            min-width: 300px; /* Tamaño mínimo para la imagen */
            max-width: 50%; /* Limita el ancho de la imagen */
            
        }
        .contact-image-container img {
            width: 100%;
            height: auto;
            display: block;
            border-radius: 12px; /* Un poco de borde redondeado */
            box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Sombra suave */
            
        }
        .contact-details-container {
            flex: 1;
            min-width: 300px; /* Tamaño mínimo para los datos */
            max-width: 50%; /* Limita el ancho de los datos */
            text-align: left;
            color: #333; /* Color de texto más oscuro para legibilidad */
        }
        .titulo-section-contact h1{
            font-size: 40px;
            text-align: center;
            margin: auto 0;
            margin-bottom: 30px;
        }
        .titulo-section-contact h1::after{
            content: '';
            display: block;
            width: 80px;
            height: 4px;
            background-color: #01b3e1;
            border-radius: 2px;
            margin: 10px auto 0;
        }

        .contact-details-container h2 {
            color: #314a9a; /* Color para los nombres, si desea destacarlos */
            margin: 15px 0;
            font-size: 22px;
            line-height: 1.2em;
        }
        .contact-details-container h3 {
            color: #000; /* Color para los nombres, si desea destacarlos */
            margin-top: 10px;
            font-size: 16px;
        }
        .contact-details-container p {
            margin-bottom: 15px;
            line-height: 1.6;
        }
      
       
        .contact-info-item {
            display: flex;
            align-items: center;
            
            
        }
        .contact-info-item span {
            margin-left: 10px;
        }
        .contact-info-item a {
            color: #000;
            text-decoration: none;
        }
        .contact-info-item a:hover {
            text-decoration: underline;
        }
        .icon {
            /* Estilos para iconos si los usa, por ahora son placeholders de texto */
            font-size: 1.2em;
            color: #01b3e1;
            width: 25px; /* Tamaño fijo para el icono */
            text-align: center;
        }
        /* Media queries para responsividad */
        @media (max-width: 768px) {
            .contact-section {
                flex-direction: column;
                padding: 30px 15px;
            }
            .contact-image-container,
            .contact-details-container {
                max-width: 100%;
                min-width: unset;
                text-align: center; /* Centrar texto en móviles si es una sola columna */
            }
            .titulo-section-contact h1{
                font-size: 30px;
                line-height: 1.2em;
                margin-top: 20px;
                
                /* margin-bottom: 30px; */
            }
            .contact-details-container h2 {
                font-size: 25px;
                margin: 30px 0;
            }
            .contact-details-container h3,
            .contact-info-item {
                text-align: left; /* Mantener la alineación izquierda para los detalles */
                justify-content: flex-start; /* Asegura que los items estén alineados a la izquierda */
                margin: 0 auto 10px auto; /* Centrar el bloque y dar margen */
            }
        }