/*************************************************
            FARMACOVIGILANCIA
*************************************************/

#farmacovigilancia{

    position:relative;

    overflow:hidden;

    background:#fff;

    padding:90px 0 70px;

}

/************** TEXTURAS **************/

#farmacovigilancia::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:630px;

    height:630px;

    background:url("../img/general/texturasuperior.png")
    no-repeat top left;

    background-size:contain;

    z-index:0;

}

#farmacovigilancia::after{

    content:"";

    position:absolute;

    right:0;

    bottom:0;

    width:340px;

    height:300px;

    background:url("../img/general/text_inferior.png")
    no-repeat bottom right;

    background-size:contain;

    z-index:0;

}

/************** CONTENEDOR **************/

#farmacovigilancia .container{

    position:relative;

    z-index:2;

}

/*************************************************
        BLOQUE SUPERIOR
*************************************************/

.farmaco-contenido{

    display:flex;

    align-items:center;

    gap:45px;

    margin-bottom:70px;

}

/*************************************************
            ICONO
*************************************************/

.farmaco-icono{

    flex:0 0 150px;

}

.farmaco-icono img{

    width:125px;

}

/*************************************************
        CAJA INFORMACIÓN
*************************************************/

.farmaco-informacion{

    flex:1;

}

.farmaco-caja{

    padding:28px 35px;

}

.farmaco-caja p{

    font-size:15px;

    line-height:1.65;

    margin-bottom:16px;

}

.farmaco-caja p:last-child{

    margin-bottom:0;

}

.farmaco-caja strong{

    color:#17397D;

    font-weight:700;

}

/*************************************************
            CONTACTO
*************************************************/

.farmaco-contacto{

    position:relative;

}

/*************************************************
        TITULO CONTACTO
*************************************************/

.titulo-contacto{

    margin-bottom:18px;

}

.titulo-contacto img{

    width:16px;

}

.titulo-contacto span{

    font-size:20px;
    color: #17397D;

}

/*************************************************
            TARJETA
*************************************************/
.tarjeta-contacto{

    display:grid;

    grid-template-columns:80px 1fr;

    align-items:center;

    gap:18px;

    width:78%;

    margin-left:85px;

    background:#EFEFEF;

    border:1px solid #DADADA;

    border-radius:12px;

    padding:14px 18px;

    box-shadow:0 5px 12px rgba(0,0,0,.10);

}

/*************************************************
            FOTO
*************************************************/
.contacto-foto{

    width:80px;

    flex:none;

}
.contacto-foto img{

    width:70px;

    display:block;

}

.contacto-datos{

    flex:1;

}

.nombre-contacto{

    color:#17397D;

    font-size:15px;

    font-weight:700;

    margin-bottom:8px;

}
.datos-contacto{

    display:grid;

    grid-template-columns:220px 1fr;

    gap:35px;

    margin-top:10px;

}
/*.datos-contacto{*/

    /*display:grid;*/

    /*grid-template-columns:220px 1fr;*/

    /*gap:28px;*/

    /*background:#ECECEC;*/

    /*border:1px solid #D3D3D3;*/

    /*border-radius:8px;*/

    /*padding:10px 15px;*/

/*}*/
.titulo-columna{

    display:flex;

    align-items:center;

    gap:5px;

    margin-bottom:5px;

}

.titulo-columna img{

    width:15px;

}

.titulo-columna span{

    color:#17397D;

    font-size:13px;

    font-weight:700;

}

.info-contacto{

    padding-left:20px;

    font-size:12px;

    color:#555;

    line-height:1.35;

}

/*************************************************
        TARJETA INTERIOR
*************************************************/

.tarjeta-contacto{

    display:flex;

    align-items:center;

    gap:15px;

}

.dato-contacto{

    background:#fff;

}

.dato-contacto strong{

    font-size:14px;

    margin-bottom:6px;

}

.dato-contacto div{

    font-size:14px;

    line-height:1.5;

}

/*************************************************
            ICONOS
*************************************************/

.dato-contacto i{

    color:#F08B39;

    margin-right:8px;

}

/*************************************************
        EFECTO TARJETA
*************************************************/

.tarjeta-contacto:hover{

    transform:translateY(-4px);

    transition:.35s;

    box-shadow:0 20px 40px rgba(0,0,0,.12);

}

/*************************************************
            RESPONSIVE
*************************************************/

@media(max-width:1199px){

    .farmaco-contenido{

        gap:30px;

    }

    .farmaco-icono{

        flex:0 0 170px;

    }

    .farmaco-icono img{

        width:150px;

    }

    .contacto-foto{

        width:180px;

        min-width:180px;

    }

    .contacto-foto img{

        width:155px;

    }

}

@media(max-width:991px){

    .farmaco-contenido{

        flex-direction:column;

        text-align:center;

    }

    .farmaco-icono{

        margin-bottom:20px;

    }

    .farmaco-caja{

        padding:30px;

    }

    .tarjeta-contacto{

        flex-direction:column;

        text-align:center;

        padding-top:20px;

    }

    .contacto-foto{

        width:100%;

        padding:0;

    }

    .contacto-foto img{

        width:170px;

    }

    .contacto-datos{

        padding:30px;

    }

}

@media(max-width:767px){

    #farmacovigilancia{

        padding:70px 0;

    }

    #farmacovigilancia::before{

        width:180px;

        height:180px;

    }

    #farmacovigilancia::after{

        width:180px;

        height:180px;

    }

    .titulo-contacto{

        justify-content:center;

        text-align:center;

    }

    .titulo-contacto span{

        font-size:22px;

        line-height:1.3;

    }

    .farmaco-caja{

        padding:25px;

    }

    .farmaco-caja p{

        font-size:16px;

    }

    .nombre-contacto{

        font-size:24px;

    }

    .dato-contacto strong{

        font-size:17px;

    }

    .dato-contacto div{

        font-size:15px;

    }

}

@media(max-width:575px){

    .farmaco-icono img{

        width:120px;

    }

    .contacto-foto img{

        width:145px;

    }

    .farmaco-caja{

        border-radius:18px;

        padding:22px;

    }

    .tarjeta-contacto{

        border-radius:18px;

    }

}