@import url('splendor variables.css');

/* Reset global */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

textarea, select, input {
    field-sizing: content;
}

textarea{
    height: 90px;
}

body, html {
    font-family: var(--font-family-base) !important;
    font-size: var(--font-base-splendor) !important;
    font-weight: normal !important;
    color: var(--color-azul) !important;
    width: 100dvw;
    overflow-x: clip;
}

.row {
    margin: 0px !important;
}

ul {
    list-style: none;
}

a {
    color: inherit;
}

hr {
    width: -webkit-fill-available;
    color: var(--color-celeste-fuerte);
}
.container-fluid {
    padding: 0px !important;
    margin: 0px !important;
}

h1, h2, h3, h1, h4 {
    margin-bottom: 0px !important;
}

p, ol {
    font-size: var(--font-md);
    color: var(--color-azul);
    font-weight: 400;
    margin-bottom: 0px !important
}

.parrafos--largos p,
.parrafos--largos h1,
.parrafos--largos h2,
.parrafos--largos h3,
.parrafos--largos li{
    margin-block: 1lh;
}

.width-10 {
    width: 10% !important;
}

.width-20 {
    width: 20% !important;
}

.width-25 {
    width: 25% !important;
}

.width-30 {
    width: 30% !important;
}

.width-40 {
    width: 40% !important;
}

.width-50 {
    width: 50% !important;
}

.width-60 {
    width: 60% !important;
}

.width-70 {
    width: 70% !important;
}

.width-80 {
    width: 80% !important;
}

.width-90 {
    width: 90% !important;
}

.width-95 {
    width: 95% !important;
}

.width-100 {
    width: 100% !important;
}

/***************************** RESPONSIVE ********************************/
/* Estilos para tablets y escritorios*/

@media (min-width: 768px) {
    .width-md-10 {
        width: 10% !important;
    }

    .width-md-20 {
        width: 20% !important;
    }

    .width-md-25 {
        width: 25% !important;
    }

    .width-md-30 {
        width: 30% !important;
    }

    .width-md-40 {
        width: 40% !important;
    }

    .width-md-50 {
        width: 50% !important;
    }

    .width-md-60 {
        width: 60% !important;
    }

    .width-md-70 {
        width: 70% !important;
    }

    .width-md-80 {
        width: 80% !important;
    }

    .width-md-90 {
        width: 90% !important;
    }

    .width-md-95 {
        width: 95% !important;
    }

    .width-md-100 {
        width: 100% !important;
    }
}