@charset "utf-8";
strong{
    font-size: 20px;
}
.a-phone{
    font-size: 1.75em;
    font-weight: 700;
}
a{
    font-weight: 700;
    color: #333333;
}
.o-landing{
   display: flex;
   justify-content: center;
   align-items: center;
   height: 100vh;
   flex-wrap: wrap;
   overflow: hidden;
   background: linear-gradient(360deg, #c4c4c4, #FFFFFF);
   flex-direction: column;
}
.o-landing__background{
   width: 60%;
}
.o-landing__content{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.o-landing__text{
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
}
.o-landing__image{
    margin-bottom: 32rem;
    animation: fadeIn forwards 3s ease-in-out;
}

.o-landing__btn{
   display: flex;
   justify-content: center;
   align-items: center;
   margin: 26rem;
}
.a-btn{
    width: 200px;
    height: 40px;
    padding: 10px 25px;
    border: 2px solid #000;
    font-weight: 500;
    background: transparent;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    display: inline-block;
}
.a-btn {
   background: #000;
   color: #fff;
   line-height: 42px;
   padding: 0;
   border: none;
}
.a-btn span {
   position: relative;
   display: block;
   width: 100%;
   height: 100%;
}
.a-btn:before,
.a-btn:after {
   position: absolute;
   content: "";
   height: 0%;
   width: 2px;
   background: #000;
}
.a-btn:before {
   right: 0;
   top: 0;
   transition: all 500ms ease;
}
.a-btn:after {
   left: 0;
   bottom: 0;
   transition: all 500ms ease;
}
.a-btn:hover{
   color: #000;
   background: transparent;
}
.a-btn:hover:before {
   transition: all 500ms ease;
   height: 100%;
}
.a-btn:hover:after {
   transition: all 500ms ease;
   height: 100%;
}
.a-btn span:before,
.a-btn span:after {
   position: absolute;
   content: "";
   background: #000;
}
.a-btn span:before {
   left: 0;
   top: 0;
   width: 0%;
   height: 2px;
   transition: all 500ms ease;
}
.a-btn span:after {
   right: 0;
   bottom: 0;
   width: 0%;
   height: 2px;
   transition: all 500ms ease;
}
.a-btn span:hover:before {
   width: 100%;
}
.a-btn span:hover:after {
   width: 100%;
}

.o-landing__buttons{
display: flex;
justify-content: center;
flex-direction: row;
align-items: center;
flex-wrap: wrap;
}

@keyframes fadeIn{
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}

/* MAYORIA DE TABLETS */
@media all and (max-width: 768px) {
   .o-landing{
      gap: 60rem;
   }
   .o-landing__background{
      width: 100%;
   }
   .o-landing__content{
      margin-top: 10%;
   }
   .o-landing .o-landing__image{
      width: 80%;
   }
   .o-landing .o-landing__image img{
      width: 100%;
   }
}