@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@100;300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');
:root {
    /* --colorp1: #222831; */
    --colorp2: #52575f;
    --colorp3: #969ca5;
    --colorp1: #252525;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    /* font-family: 'Noto Sans SC', sans-serif; */
    /* font-family: 'Source Sans Pro', sans-serif; */
    font-family: 'Lato', sans-serif;
}

a:hover {
    text-decoration: none;
    color: #FFFFFF;
}


/* ---------------- Estilos generales ----------------- */

.colorp1 {
    color: #222831;
}

.colorp2 {
    color: #52575f;
}

.colorp3 {
    color: #969ca5;
}

.text-lsp-7 {
    letter-spacing: 7px;
}

.text-fwe-600 {
    font-weight: 600;
}

.font-s-70 {
    font-size: 70px;
}

.main-banner {
    width: 100%;
    height: 100vh;
    background: var(--colorp1);
}

.main-area {
    display: flex;
    width: 100%;
    height: 100%;
}

.area-text {
    position: absolute;
    width: 900px;
    height: 80%;
    background: rgb(20 21 23 / 40%);
    box-shadow: 0 8px 40px 0 rgb(58 63 70 / 40%);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 10px;
    border: 1px solid rgb(142 142 142 / 18%);
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}

.m-area-image {
    width: 100%;
    height: 100%;
    background: url('../img/wallpaper_city.jpg');
    /* background: url('img/portada2.jpg'); */
    background-size: cover;
    background-position: center center;
    position: relative;
    animation: animateareaimage 30s linear infinite alternate;
}

@keyframes animateareaimage {
    0% {
        background-position: center center;
    }
    25% {
        background-position: left bottom;
    }
    50% {
        background-position: center center;
    }
    75% {
        background-position: right top;
    }
    100% {
        background-position: center center;
    }
}

.m-area-image:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, var(--colorp1), transparent 80%, var(--colorp1));
    top: 0;
    left: 0;
}

@media (max-width: 991px) {
    .area-text {
        width: 90%;
    }
}

@media (max-width: 767px) {
    .font-s-70 {
        font-size: 50px;
    }
}

@media (max-width: 575px) {
    .font-s-70 {
        font-size: 32px;
    }
}

@media (max-width: 480px) {
    .font-s-70 {
        font-size: 24px;
    }
    .area-text {
        width: 95%;
        height: 85%;
    }
}