.principal{
    background-image: url("../img/Header-esp.png");
}
.principal p{
    font-size: 30px;
}
h1{
    font-size:60px;
}
/*Info general*/
.descripcion{
    margin-top:100px;
}
.descripcion p{
    font-size: 20px;
    text-align: justify;
}


/*Datos de la especialidad*/

#datos{
    margin-top:100px;
}
#datos .btn-datos{
    display:flex;
}
#datos .btn-datos .caja{
    width:16.66%;
    height:100%;
}
#datos .btn-datos button{
    width: 100%;
    height:100%;
    display:flex; flex-direction: column;
    padding:0;
    border:none;
}
#datos button .icono{
    background:#F5F5F5;
    padding:20px 0;
    width:100%;
}
#datos button .texto{
    width:100%;
}
#datos button .icono i{
    font-size:40px;
}

#datos .img-datos{
    /* border:2px solid #B8B836; */
    padding:30px;
}
#datos .img-datos img{
    width:100%;
    border-radius: 7px;
}

/* Transición de la imagen al cambiar */
#datos .img-datos img{
  transition: opacity 0.5s ease;
}
#datos .img-datos img.cambiando{
  opacity: 0;
}


/*RESPONSIVE*/
@media (max-width:768px){
    h1{
        font-size:35px;
    }
    .principal p{
        font-size: 20px;
    }
    #datos .btn-datos button{
        font-size:11px;
    }
    #datos button .icono i{
        font-size:23px;
    }
    .descripcion p{
        font-size: 17px;
    }
}