:root {
    /* degradado fondo */
    --degrad-0: rgb(163, 175, 199);
    --degrad-1: rgb(207, 218, 240);
    --degrad-2: rgb(148, 163, 198);
    --degrad-3: rgba(67, 80, 106, 1);

    --degrad-ie: #7f8ca5;

    --degrad-ang: 135deg;

    /* separador */
    --sep-color: hsl(204, 30%, 43%);
    --sep-tam: 3px;
    --sep-marg-top: 0px;
    --sep-marg-bot: 0px;
}

html {
    margin: 0px;
    padding: 0px;


    
}

/** Scroll Snap**/
.servicios,
.navegacion-principal,
.formulario {
    scroll-snap-align: center;
    scroll-snap-stop: always;
}


*,
*:before,
*:after {
    box-sizing: inherit;
}


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

    
    font-size: 16px;
    /* 1rem = 10px */
    font-family: 'Krub', sans-serif;

    background: var(--degrad-0);
    background: linear-gradient(var(--degrad-ang),
            var(--degrad-1) 23%,
            var(--degrad-2) 100%);
}

header, h1 {
    margin: 0;
    padding: 0;    
}


.header-1 {
    text-align: center;
    padding-top: 10px;
}

h1 {
    font-size: 1.5em;
}

.main-1 {
    display: flex;
    gap: 10px;
}

/* SEPARADOR */

.separator {
    margin-top: var(--sep-marg-top);
    margin-bottom: var(--sep-marg-bot);
    border: 0;
}

@keyframes separator-width {
    0% {
        width: 0;
    }

    100% {
        width: 100%;
    }
}

.separator--dotter {
    border: 0;
    border-bottom: var(--sep-tam) dotted var(--sep-color);

    width: 0;
    animation: separator-width 1.5s ease-out forwards;
}

.cont-main-1 {
    height: calc(100vh - 10em);
    
    border-radius: 4px;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0px 10px;
}