/*ESTILO CONTENEDOR CONTACTOS*/
.contenedor {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 80%;  
    margin: 20px auto;
    padding: 20px;
    max-width: 1200px;
    box-sizing: border-box;
}

/*ESTILO SECCIONES*/
.texto, .contactos, .mensaje{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    width: 100%;
    height: auto;
    padding: 10px;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    transition: all 0.3s ease;  
}

/*ESTILO FLOTANTE SECCIONES*/

.texto:hover, .contactos:hover, .mensaje:hover{
    transform: translateY(-10px);  
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
    cursor: pointer;  
}
/*ESTILO TITULO*/
.texto h2, .contactos h2, .mensaje h2{
    font-weight: bold;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    text-align: center; 
    color: transparent;
    background-image: linear-gradient(to right, #068d77b9, #00b3a6, #006a4d);
    background-clip: text;
    margin-bottom: 15px;
}
/*ESTILO TEXTO*/
.texto .txt, .contactos .txt, .mensaje .txt{
    text-align: center; 
    width: 100%;
    max-width: 50%; 
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: bold;
    color: transparent;
    background-image: linear-gradient(to right, #005f73, #000000);
    background-clip: text;
    padding-right: 20px;
}

/*ESTILO IMAGEN*/
.texto .img_doct img {
    width: 100%;
    max-width: 50%; 
    height: auto;
    object-fit: contain;  
    border-radius: 8px;
}

/*ESTILO ICONOS IMAGENES*/
.tel{
    width: 50px;
}

.what{
    width: 70px;
}

.fb{
    width: 15%;
}

/*MEDIA QUERIES PARA MOVILES*/
@media (max-width: 768px) {
    /*CONTENEDOR*/
    .contenedor {
        width: 90%;  
        padding: 15px; 
    }

    /*SECCIONES*/
    .texto, .contactos {
        flex-direction: row;  
        gap: 15px;  
        width: 100%;  
        padding: 10px; 
    }

    /*IMAGENES*/
    .texto .img_doct img {
        width: 100%;  
        max-width: 40%;  
        height: auto;  
        object-fit: contain; 
    }

    /*TEXTO*/
    .texto .txt, .contactos .txt {
        width: 100%;  
        font-size: 14px; 
        padding-right: 0;
    }

    /*ICONOS IMAGENES*/
    .tel, .what, .fb {
        width: 30px;  
    }
}