:root{
    --negro: 24, 31, 52;
    --blanco: 255, 255, 255;
    --seleccionado: 39, 96, 255;
    --no-seleccionado: 223, 231, 255;
    --decoracion: 245, 247, 255;
    --caption: 64, 82, 135;
    --fondo: 247, 247, 248;
    --borde: 12px;
    --margen:55px;
}

body{
    margin:0px;
    padding:0px;
    background:rgba(var(--fondo));
    /*overflow-x: hidden;*/
}

h1, h2, h3, h4, h5, h6, p, span{
    margin:0;
    color: rgba(var(--negro));
}

.caption-card{
    background:rgba(var(--decoracion));
    border-radius:30px;
    color:rgba(var(--caption), 0.72);
    width:fit-content;
    padding:0px 20px;
    height:36px;
    display:flex;
    align-items: center;
    justify-content: center;
}

.linea{
    height:1px;
    background:rgba(var(--no-seleccionado));
}

@media (max-width:1500px){
    :root{
        --margen:34px;
    }
}

@media (max-width:550px){
    :root{
        --margen:21px;
    }
}

@media (max-width:360px){
    :root{
        --margen:13px;
    }
}

/*Fuentes*/
@font-face {
    font-family: 'standerd';
    src: url('https://alberto-studio.com//fuentes/standerd-medium.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'standerd-bold';
    src: url('https://alberto-studio.com/fuentes/standerd-semibold.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
}

/*Tipografía*/
.H1{
    font-family: 'standerd', sans-serif;
    font-size:84px;
    line-height:100%;
    font-weight: normal;
}

.H2{
    font-family: 'standerd', sans-serif;
    font-size:26px;
    line-height:34px;
    letter-spacing: 0.3px;
    font-weight: normal;
}

.H2-bold{
    font-family: 'standerd-bold', sans-serif;
    font-size:26px;
    line-height:34px;
    letter-spacing: 0.3px;
    font-weight: bold;
}

.H3{
    font-family: 'standerd-bold', sans-serif;
    font-size:20px;
    line-height:100%;
    font-weight: bold;
}

.body{
    font-family: 'standerd', sans-serif;
    font-size:18px;
    line-height:26px;
    letter-spacing: 0.3px;
    font-weight: normal;
    opacity:72%;
}

.body-bold{
    font-family: 'standerd-bold', sans-serif;
    font-size:18px;
    line-height:26px;
    letter-spacing: 0.3px;
    font-weight: bold;
}

.button{
    font-family: 'standerd-bold', sans-serif;
    font-size:20px;
    line-height:100%;
    font-weight: bold;
}

.caption{
    font-family: 'standerd', sans-serif;
    font-size:16px;
    line-height:24px;
    letter-spacing: 0.3px;
    font-weight: normal;
}

@media (max-width:1300px){
    .H1{
        font-size:72px;
        line-height:100%;
    }

    .H2{
        font-size:24px;
        line-height:32px;
    }

    .H2-bold{
        font-size:24px;
        line-height:32px;
    }

    .H3{
        font-size:18px;
        line-height:100%;
    }

    .body{
        font-size:16px;
        line-height:24px;
    }

    .body-bold{
        font-size:16px;
        line-height:24px;
    }

    .button{
        font-size:18px;
        line-height:100%;
    }

    .caption{
        font-size:16px;
        line-height:24px;
    }
}

@media (max-width:860px){
    .H1{
        font-size:48px;
        line-height:100%;
    }

    .H2{
        font-size:22px;
        line-height:30px;
        letter-spacing: 0.3px;
    }

    .H2-bold{
        font-size:22px;
        line-height:30px;
        letter-spacing: 0.3px;
    }

    .H3{
        font-size:20px;
        line-height:100%;
    }

    .body{
        font-size:16px;
        line-height:24px;
        letter-spacing: 0.3px;
    }

    .body-bold{
        font-size:16px;
        line-height:24px;
        letter-spacing: 0.3px;
    }

    .button{
        font-size:20px;
        line-height:100%;
    }

    .caption{
        font-size:16px;
        letter-spacing: 0.3px;
        line-height:24px;
    }
}