:root {
    /* Colors */
    --all-background-color: #9bd7ff;
    --brand-color-1: #2f5bf9;
    --brand-color-1-hover: #1749ff;
    --brand-color-2: #398ce4;
    --brand-color-3: #67C6E3;
    --brand-color-3_5: #caf3ff;
    --brand-color-4: #DFF5FF;
    --brand-color-5: #f2f7fc;

    --brand-color-10: #46d41f;
    --brand-color-11: #2899ed;

    --color-white: #ffffff;
    --color-white-hover: #f2f2f2;
    --color-semiwhite: #ececec;

    /* Scrollbar */
    --scrollbar-width: 1rem;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font: inherit;
    vertical-align: initial;
    text-align: inherit;
    color: inherit;
    background: transparent;
    font-size: 1em;
}

body {
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    font-family: 'Poppins', 'Roboto', 'Open Sans', sans-serif, Arial, Helvetica, sans-serif;
    background-color: var(--all-background-color);
    min-height: 100vh;
    align-items: center;
    padding: 20px 30px;
}

::-moz-selection {
    color: var(--brand-color-5);
    background: var(--brand-color-1);
}
::selection {
    color: var(--brand-color-5);
    background: var(--brand-color-1);
}
::-webkit-scrollbar {
    width: var(--scrollbar-width);
}
::-webkit-scrollbar-track {
    background: var(--brand-color-5);
}
::-webkit-scrollbar-thumb {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background: var(--brand-color-1);
    border-radius: var(--scrollbar-width);
    border: 0.25rem solid var(--brand-color-5);
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
a {
    line-height: 1;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    text-transform: uppercase;
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 1;
}

p {
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.5;
    color: #000000;
}

a {
    text-decoration: none;
    color: var(--brand-color-1);
}

i {
    height: fit-content;
}

ul,
ol {
    list-style: none;
}

li {
    display: list-item;
    text-align: -webkit-match-parent;
}

.left {
    float: left;
}

.right {
    float: right;
}

.section-width {
    width: calc(100vw - var(--scrollbar-width) - 80px);
    max-width: 1170px;
    margin: 0 auto;
}

html {
    font-size: 16px;
}

h1 {
    font-size: 2rem;
    color: var(--brand-color-1);
    font-weight: 800;
    text-decoration: underline;
}


.boton-deshabilitado {
    background-color: #e0e0e0 !important;
    color: #a0a0a0 !important;
    border: 1px solid #ccc !important;
    cursor: not-allowed !important;
    opacity: 1 !important;
    box-shadow: none !important;
    transition: none !important;
    pointer-events: none !important;
}