:root{
    --blanco: #FFFFFF;
    --negro: #381D2A;
    --morado: #6B2A4A;
    --rosa: #DB73A6;
    --rosa-2: #F7D5E5;
    --rosa-3: #FEF6FA;
    --margen: 48px;
    --radius: 16px;
}

body{
    margin:0px;
    padding:0px;
}

/*Fuentes*/
@font-face {
    font-family: 'noah bold';
    src: url('https://elanaestudio.com/fonts/noah-bold.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'noah regular';
    src: url('https://elanaestudio.com/fonts/noah-regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'boldins';
    src: url('https://elanaestudio.com/fonts/boldins.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

/*Typography System*/
.H2{
    font-family: 'boldins', sans-serif;
    font-weight: normal;
    line-height:100%;
    font-size:68px;
}
.H3{
    font-family: 'noah bold', sans-serif;
    font-weight: normal;
    line-height:100%;
    font-size:36px;
}
.H4{
    font-family: 'noah bold', sans-serif;
    font-weight: normal;
    line-height:24px;
    font-size:16px; 
}
.Body{
    font-family: 'noah regular', sans-serif;
    font-weight: normal;
    line-height:24px;
    font-size:16px; 
}
.Button{
    font-family: 'noah bold', sans-serif;
    font-weight: normal;
    line-height:24px;
    font-size:16px; 
}

/*Botones*/
.btn-claro{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 24px;
    border-radius: 50px;
    border: none;
    background-color:var(--blanco);
    color:var(--rosa);
    width: fit-content;
}
.btn-claro:hover{
    color:var(--rosa);
    box-shadow:inset 0px 0px 0px 1px var(--rosa-2);
}
.btn-oscuro{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 24px;
    border-radius: 50px;
    border: none;
    background-color:var(--rosa);
    color:var(--blanco);
    width: fit-content;
    text-decoration:none;
}
.btn-oscuro:hover{
    color:var(--blanco);
    box-shadow:inset 0px 0px 0px 1px var(--rosa-2);
}

/*1612px*/
@media (max-width:1612px){
    .H2{
        font-size:64px;
    }
    .H3{
        font-size:32px;
    }  
}

/*Mobile*/
@media (max-width:800px){
    :root{
        --margen: 20px;
        --radius: 8px;
    }
    .H2{
        font-size:44px;
    }
    .H3{
        font-size:28px;
    }  
    .Body{
        font-size:16.5px;
    }
    .Button{
        font-size:16.5px;
    }
    #titulo{
        margin-bottom:12px;
    }
}