@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.2/font/bootstrap-icons.css");

/*SOCIAL BAR ------------------------------*/
.social-bar{
  position: fixed;
  right: 0;
  top: 30%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  z-index: 100;
}
.social-bar a{
  padding: .5rem;
  font-size: 1.5rem;
  color:#FFF;
}
.icon-face{background:#3b5998;}
.icon-youtube{background: #c4302b;}
.icon-instagram{background: #FCAF45}
.icon-whatsapp{background: #25D366;}
.icon-telegram{background: #229ED9;}
.icon:first-child{border-radius: 1rem 0 0 0;}
.icon:last-child{border-radius: 0 0 0 1rem;}
.icon:active{
  border-radius: 1rem 0 0 1rem;
  padding-right: 1.8rem;
}

/*ACCION BAR ----------------------------*/
.accion-bar{
  margin-top: 2rem;
  display: flex;
}
.accion-bar a{
  display: block;
  width: 7rem;
  padding: 1rem;
  text-decoration: none;
  background-color: #7d6881;
  color: #e1c6ef;
  text-align: center;
}
.accion-bar a:first-child{border-radius: 2rem 0 0 2rem;}
.accion-bar a:last-child{border-radius: 0 2rem 2rem 0 ;}
.accion-bar a:active{
  color: #7d6881;
  background-color: #e1c6ef; 
}

/* secciones principales---------------------- */
/* texto */
.text-container{
  display: flex;
  align-items: center;
  font-size: 2rem;
}
.text-container .title{
  display: block;
  padding: 1rem 0;
  font-weight: lighter;
  font-size: 3rem;
}

/* imagenes */
.img-index {
  width: 70%;
}


/* Media (detecta si tenemos puntero) */
@media (hover:hover){
  /* social-bar */
  .icon:hover{
    border-radius: 1rem 0 0 1rem;
    padding-right: 1.8rem;
  }
  /* accion-bar */
  .accion-bar a:hover{
    color: #7d6881;
    background-color: #e1c6ef; 
  }
}


@media (max-width: 700px) {
  .social-bar a{
    padding: .5rem;
    font-size: 1rem;
  }
  .accion-bar a{
    width: 7rem;
  }

  /* conteido principal */
  .img-index { width: 80%;}
  .text-container{ 
    text-align: justify; 
    font-size: 1rem;
  }
  .text-container .title{
    font-weight: bold;
    font-size: 2rem;
  }

}