/*=============== fonts ===============*/
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

/*=============== Base ===============*/
html{
    font-size: 10px;
}

*{
    font-family: 'Roboto', sans-serif;
}

/*=============== VARIABLES - CSS ===============*/
:root{
    --purple:  #6907AB;
}

/*=============== MAIN Paquetes ===============*/

.main__servicios{
    background-color: #DD9001;
    width: 100%;
    height: 100vh;
    display: flex;
    padding-top: 10rem;
    justify-content:space-around;
    flex-flow: row;
    z-index: 0;
    overflow: hidden; 
    position: relative;
}

.main__servicios--info{
    flex-basis: calc( 50% - 1em);
    width: 100%;
    max-width: 90rem;
    /* background-color: aqua; */
    margin: 1em;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.main__servicios--title{
    font-size: 5rem;
    color: #f0f0f0;
    margin-bottom: 10rem;
    text-shadow: 0.2rem 0.2rem 0.2rem rgba(0,0,0,0.5);

}

.main__servicios--subtitle{
    font-size: 3rem;
    color: #f0f0f0;
    margin-bottom: 2rem;
    text-shadow: 0.2rem 0.2rem 0.2rem rgba(0,0,0,0.5);
}

.main__servicios--text{
    font-size: 2rem;
    color: #f0f0f0;
    margin-bottom: 2rem;
    text-shadow: 0.2rem 0.2rem 0.2rem rgba(0,0,0,0.5);
    text-align: justify;
}

.main__servicios--imagen{
    flex-basis: calc( 50% - 1em);
    width: 100%;
    max-width: 80rem;
    /* background-color: red; */
    display: flex;
    justify-content: center;
    align-items: center;
}

.main__servicios--img{
    mask-image: linear-gradient(black 20%, transparent);
    filter: drop-shadow( 2rem 0 1rem rgba(0, 0, 0, 0.7));
}

/*=============== Servicio Páginas Web ===============*/

/* seccion servicio*/

.serviciosWeb{
    background-color: #171924;
    padding: 5rem;
    width: 100%;
    height: 100vh;
    min-height: 100rem;
    display: flex;
    justify-content: space-between;
}


/* Imagen con etiqueta */
.serviciosWeb__imagen{
    width: 30%;
    height: 80rem;
    /* background-color: red; */
    display: flex;
    justify-content: center;
    align-items: center;
}

.serviciosWeb__imagen--container{
    /* background-color: #DD9001; */
    width: 70%;
    min-width: 40rem;
    height: 80rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 2rem;
    overflow: hidden;
}

.serviciosWeb__imagen--img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}


.serviciosWeb__etiqueta{
    position: absolute;
    width: 70rem;
    min-width: 70rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    background-color: #6907AB;
    transform: rotate(90deg);
    left: 8%;
    border-radius: 3rem;
}

.serviciosWeb__etiqueta--img{
    width: 10rem;
    padding: 1rem;
    transform: rotate(-90deg);
}

.serviciosWeb__etiqueta--title{
    font-size: 4rem;
    color: #f0f0f0;
    text-shadow: 0.2rem 0.2rem 0.2rem rgba(0,0,0,0.5);
    margin-left: 2rem;
    line-height: 0.3rem;
    letter-spacing: 1.5rem;
}

/* informacion del servicio */


.serviciosWeb__info{
    width: 60%;
    height: 80rem;
    /* background-color:rgb(61, 59, 59); */
    display: flex;
    flex-direction: column;
    padding-left:3rem;
    padding-right: 3rem;
}

.serviciosWeb__info--title{
    width: 100%;
    font-size: 6rem;
    color: #f0f0f0;
    margin-bottom: 4rem;
    text-shadow: 0.2rem 0.2rem 0.2rem rgba(0,0,0,0.5);
    line-height: 6rem;
}

.serviciosWeb__info--title-span1{
    font-size: 4rem;
    padding-left: 6rem;
}

.serviciosWeb__info--title-span2{
    font-size: 7rem;
    padding-left: 19rem;
    text-shadow: 0.4rem 0.4rem 0.4rem rgba(0,0,0,0.5);
}

.serviciosWeb__info--text{
    font-size: 2rem;
    text-align: justify;
    color: #f0f0f0;
    text-shadow: 0.2rem 0.2rem 0.2rem rgba(0,0,0,0.5);
    margin-bottom: 2rem;
}

.serviciosWeb__info--sec1{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding-left: 1rem;
    padding-right: 1rem;
}

.serviciosWeb__info--sec1-cont{
    width: 70%;
    display: flex;
    flex-direction: row;
    justify-content:space-between;
}

.info__textos{
    width: 80%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.info__text{
    font-size: 1.5rem;
    color: #f0f0f0;
    text-shadow: 0.2rem 0.2rem 0.2rem rgba(0,0,0,0.5);
    text-align: justify;
    padding-left: 2rem;
    margin-bottom: 7rem;
}


.servicios__info--items{
    width: 20%;
    height: 100%;
    /* background-color: aqua; */
}

.info__imagenes{
    width: 100%;
    height: 100%;
    display: flex;
    /* background-color: red; */
    flex-direction: column;
    align-items: center;
}

.info__img{
    width: 100%;
    height: 10rem;
    /* background-color: yellow; */
    margin-bottom: .5rem;
}

.serviciosWeb__info--card{
    width: 50%;
    height: 48rem;
    /* background-color: #25D366; */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.serviciosWeb__info--card-button{
    width: 60%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 2rem;
    color: #f0f0f0;
    font-size: 4rem;
    border: 4px solid #E17171;
    border-radius: 1rem;
    padding: 1rem;
    cursor: pointer;
    transition: all 300ms linear;
}

.serviciosWeb__info--card-button:hover{
    background-color: #E17171;
    border: 4px solid #cfd4f1;
}

/*=== Servicio Movil ===*/

.serviciosMovil{
    background-color: #31323D;
    padding: 5rem;
    width: 100%;
    height: 100vh;
    min-height: 100rem;
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
}

.serviciosMovil__etiqueta{
    position: absolute;
    width: 70rem;
    min-width: 70rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    background-color: #6907AB;
    transform: rotate(90deg);
    border-radius: 3rem;
    right: 8%;
}

.serviciosMovil__etiqueta--title{
    font-size: 4rem;
    color: #f0f0f0;
    text-shadow: 0.2rem 0.2rem 0.2rem rgba(0,0,0,0.5);
    margin-left: 2rem;
    line-height: 0.3rem;
    letter-spacing: .9rem;
    padding-right: 1.5rem;
}

/* Servicio Diseño */
.serviciosDiseño{
    background-color: #171924;
    padding: 5rem;
    width: 100%;
    height: 100vh;
    min-height: 100rem;
    display: flex;
    justify-content: space-between;
}

.serviciosDiseño__etiqueta--title{
    font-size: 4rem;
    color: #f0f0f0;
    text-shadow: 0.2rem 0.2rem 0.2rem rgba(0,0,0,0.5);
    margin-left: 2rem;
    line-height: 0.3rem;
    letter-spacing: 2rem;
    padding-right: 20rem;
}
/* Servicio Alojamiento y Dominios */
.serviciosAloj{
    background-color: #31323D;
    padding: 5rem;
    width: 100%;
    height: 100vh;
    min-height: 100rem;
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
}

.serviciosAloj__etiqueta{
    position: absolute;
    width: 70rem;
    min-width: 70rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    background-color: #6907AB;
    transform: rotate(90deg);
    border-radius: 3rem;
    right: 8%;
}

.serviciosAloj__etiqueta--title{
    font-size: 4rem;
    color: #f0f0f0;
    text-shadow: 0.2rem 0.2rem 0.2rem rgba(0,0,0,0.5);
    margin-left: 2rem;
    line-height: 0.3rem;
    letter-spacing: .6rem;
    padding-right: 2rem;
}


/*=============== animaciones ===============*/

@keyframes maximage {
    from {
        scale: 1;
    }
    to {
        scale: 1.1;
    }
}