/* GENERAL ============================================================== */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html,
body {
    font-size: 16px;
    box-sizing: border-box;
    background-color: var(--fondo-claro);
    -webkit-tap-highlight-color: transparent;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

p {
    -webkit-margin-before: 0em;
    -webkit-margin-after: 0em;
}

a {
    text-decoration: none;
    color: inherit;
}

.display-none {
    display: none;
}

.display-inline {
    display: inline;
}

.position-relative {
    position: relative;
}

.position-absolute {
    position: absolute;
}

.cursor-pointer {
    cursor: pointer;
}

.container {
    width: 100%;
    max-width: 82.5rem;
    margin: 0 auto;
    padding: 0 1rem;
}

@media screen and (max-width: 1400px) {
    .container {
        max-width: 1200px;
    }
}

@media screen and (max-width: 1200px) {
    .container {
        max-width: 992px;
    }
}

@media screen and (max-width: 992px) {
    html {
        font-size: 14px;
    }

    .container {
        max-width: 768px;
    }
}

@media screen and (max-width: 768px) {

    .container {
        max-width: 100%;
    }
}

@media screen and (max-width: 576px) {
    html {
        font-size: 12px;
    }

    .container {
        max-width: 100%;
    }
}

/* FLEX ============================================================================ */

.display-flex {
    display: flex;
}

.flex-row {
    display: flex;
    flex-direction: row;
}

.flex-col {
    display: flex;
    flex-direction: column;
}

.flex-wrap {
    flex-wrap: wrap;
}

.row-col-lg {
    display: flex;
    flex-direction: row;
}

.row-col-md {
    display: flex;
    flex-direction: row;
}

.row-col-sm {
    display: flex;
    flex-direction: row;
}

.col-row-lg {
    display: flex;
    flex-direction: column;
}

.col-row-md {
    display: flex;
    flex-direction: column;
}

.col-row-sm {
    display: flex;
    flex-direction: column;
}

.hide-in-lg {
    display: inherit;
}

.hide-in-md {
    display: inherit;
}

.hide-in-sm {
    display: inherit;
}

.show-in-lg {
    display: none;
}

.show-in-md {
    display: none;
}

.show-in-sm {
    display: none;
}

@media screen and (max-width: 992px) {
    .row-col-lg {
        display: flex;
        flex-direction: column;
    }

    .col-row-lg {
        display: flex;
        flex-direction: row;
    }

    .hide-in-lg {
        display: none;
    }

    .show-in-lg {
        display: inherit;
    }
}

@media screen and (max-width: 768px) {
    .row-col-md {
        display: flex;
        flex-direction: column;
    }

    .col-row-md {
        display: flex;
        flex-direction: row;
    }

    .hide-in-md {
        display: none;
    }

    .show-in-md {
        display: inherit;
    }
}

@media screen and (max-width: 576px) {
    .row-col-sm {
        display: flex;
        flex-direction: column;
    }

    .col-row-sm {
        display: flex;
        flex-direction: row;
    }

    .hide-in-sm {
        display: none;
    }

    .show-in-sm {
        display: inherit;
    }
}

.justify-content-center {
    justify-content: center;
}

.justify-content-start {
    justify-content: flex-start;
}

.justify-content-end {
    justify-content: flex-end;
}

.justify-content-around {
    justify-content: space-around;
}

.justify-content-between {
    justify-content: space-between;
}

.align-items-center {
    align-items: center;
}

.align-items-start {
    align-items: flex-start;
}

.align-items-end {
    align-items: flex-end;
}

.align-items-stretch {
    align-items: stretch;
}

.align-self-start {
    align-self: flex-start;
}

.align-self-center {
    align-self: center;
}

.align-self-end {
    align-self: flex-end;
}

.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

.text-justify {
    text-align: justify;
}

.text-wrap {
    white-space: normal;
    word-wrap: break-word;
}

.flex-90 {
    flex: 0 0 90%;
}

.flex-80 {
    flex: 0 0 80%;
}

.flex-70 {
    flex: 0 0 70%;
}

.flex-60 {
    flex: 0 0 60%;
}

.flex-50 {
    flex: 0 0 50%;
}

.flex-40 {
    flex: 0 0 40%;
}

.flex-30 {
    flex: 0 0 30%;
}

.flex-20 {
    flex: 0 0 20%;
}

.flex-10 {
    flex: 0 0 10%;
}

/* SCROLL / OVERFLOW ===================================================== */

.overflow-hidden {
    overflow: hidden;
}

.scroll-x {
    overflow-x: scroll;
}

.scroll-y {
    overflow-y: scroll;
}

.no-scrollbar::-webkit-scrollbar {
    display: none;
}

/* IMG ============================================== */

.img-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* WIDTH / HEIGHT =================================== */

.w-100 {
    width: 100%;
}

.w-90 {
    width: 90%;
}

.w-80 {
    width: 80%;
}

.w-70 {
    width: 70%;
}

.w-60 {
    width: 60%;
}

.w-50 {
    width: 50%;
}

.w-40 {
    width: 40%;
}

.w-30 {
    width: 30%;
}

.w-20 {
    width: 20%;
}

.w-10 {
    width: 10%;
}

.w-3rem {
    width: 3rem;
    min-width: 3rem;
    max-width: 100%;
}

.w-6rem {
    width: 6rem;
    min-width: 6rem;
    max-width: 100%;
}

.w-9rem {
    width: 9rem;
    min-width: 9rem;
    max-width: 100%;
}

.w-12rem {
    width: 12rem;
    min-width: 12rem;
    max-width: 100%;
}

.w-15rem {
    width: 15rem;
    min-width: 15rem;
    max-width: 100%;
}

.w-18rem {
    width: 18rem;
    min-width: 18rem;
    max-width: 100%;
}

.w-21rem {
    width: 21rem;
    min-width: 21rem;
    max-width: 100%;
}

.w-24rem {
    width: 24rem;
    min-width: 24rem;
    max-width: 100%;
}

.w-27rem {
    width: 27rem;
    min-width: 27rem;
    max-width: 100%;
}

.w-30rem {
    width: 30rem;
    min-width: 30rem;
    max-width: 100%;
}

.w-33rem {
    width: 33rem;
    min-width: 33rem;
    max-width: 100%;
}

.w-36rem {
    width: 36rem;
    min-width: 36rem;
    max-width: 100%;
}

.w-39rem {
    width: 39rem;
    min-width: 39rem;
    max-width: 100%;
}

.w-42rem {
    width: 42rem;
    min-width: 42rem;
    max-width: 100%;
}

.w-45rem {
    width: 45rem;
    min-width: 45rem;
    max-width: 100%;
}

.w-fit,
.w-fit-content {
    width: fit-content;
}

.h-100 {
    height: 100%;
}

.h-90 {
    height: 90%;
}

.h-80 {
    height: 80%;
}

.h-70 {
    height: 70%;
}

.h-60 {
    height: 60%;
}

.h-50 {
    height: 50%;
}

.h-40 {
    height: 40%;
}

.h-30 {
    height: 30%;
}

.h-20 {
    height: 20%;
}

.h-10 {
    height: 10%;
}

.h-fit,
.h-fit-content {
    height: fit-content;
}

.h-1rem {
    height: 1rem;
    min-height: 1rem;
    max-height: 1rem;
}

.h-2rem {
    height: 2rem;
    min-height: 2rem;
    max-height: 2rem;
}

.h-3rem {
    height: 3rem;
    min-height: 3rem;
    max-height: 3rem;
}

.h-6rem {
    height: 6rem;
    min-height: 6rem;
    max-height: 6rem;
}

.h-9rem {
    height: 9rem;
    min-height: 9rem;
    max-height: 9rem;
}

.h-12rem {
    height: 12rem;
    min-height: 12rem;
    max-height: 12rem;
}

.h-15rem {
    height: 15rem;
    min-height: 15rem;
    max-height: 15rem;
}

.h-18rem {
    height: 18rem;
    min-height: 18rem;
    max-height: 18rem;
}

.h-21rem {
    height: 21rem;
    min-height: 21rem;
    max-height: 21rem;
}

.h-24rem {
    height: 24rem;
    min-height: 24rem;
    max-height: 24rem;
}

.h-27rem {
    height: 27rem;
    min-height: 27rem;
    max-height: 27rem;
}

.h-30rem {
    height: 30rem;
    min-height: 30rem;
    max-height: 30rem;
}

.h-33rem {
    height: 33rem;
    min-height: 33rem;
    max-height: 33rem;
}

.h-36rem {
    height: 36rem;
    min-height: 36rem;
    max-height: 36rem;
}

.h-39rem {
    height: 39rem;
    min-height: 39rem;
    max-height: 39rem;
}

.h-42rem {
    height: 42rem;
    min-height: 42rem;
    max-height: 42rem;
}

.h-45rem {
    height: 45rem;
    min-height: 45rem;
    max-height: 45rem;
}

/* ======================================== GRIDS GENERICAS =================================== */

.grid-2-col {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
}

.grid-3-col {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
}

.grid-4-col {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
}

.grid-5-col {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr);
}

.grid-6-col {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr);
}

.element-2-col {
    grid-column: span 2;
}

.element-3-col {
    grid-column: span 3;
}

.element-4-col {
    grid-column: span 4;
}

.element-5-col {
    grid-column: span 5;
}

.element-6-col {
    grid-column: span 6;
}

@media screen and (max-width: 1200px) {

    .grid-5-col,
    .grid-6-col {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .element-3-col,
    .element-4-col {
        grid-column: span 2;
    }

    .element-5-col,
    .element-6-col {
        grid-column: span 3;
    }
}

@media screen and (max-width: 992px) {

    .grid-3-col,
    .grid-4-col,
    .grid-5-col,
    .grid-6-col {
        grid-template-columns: 1fr 1fr;
    }

    .element-2-col,
    .element-3-col,
    .element-4-col {
        grid-column: span 1;
    }

    .element-5-col,
    .element-6-col {
        grid-column: span 2;
    }
}

@media screen and (max-width: 576px) {

    .grid-2-col,
    .grid-3-col,
    .grid-4-col,
    .grid-5-col,
    .grid-6-col {
        grid-template-columns: 1fr;
    }

    .element-2-col,
    .element-3-col,
    .element-4-col,
    .element-5-col,
    .element-6-col {
        grid-column: span 1;
    }
}

/* ====================================== POSITION =================================== */

.position-absolute {
    position: absolute;
}

.position-relative {
    position: relative;
}

.position-fixed {
    position: fixed;
}

.position-sticky {
    position: sticky;
}

.position-center-x {
    left: 50%;
    transform: translateX(-50%);
}

.position-center-y {
    top: 50%;
    transform: translateY(-50%);
}

.top-0 {
    top: 0;
}

.top-1 {
    top: 0.25rem;
}

.top-2 {
    top: 0.5rem;
}

.top-3 {
    top: 0.75rem;
}

.top-4 {
    top: 1rem;
}

.top-5 {
    top: 1.25rem;
}

.top-6 {
    top: 1.5rem;
}

.top-7 {
    top: 2rem;
}

.top-8 {
    top: 3rem;
}

.top-50 {
    top: 50%;
}

.bot-0 {
    bottom: 0;
}

.bot-1 {
    bottom: 0.25rem;
}

.bot-2 {
    bottom: 0.5rem;
}

.bot-3 {
    bottom: 0.75rem;
}

.bot-4 {
    bottom: 1rem;
}

.bot-5 {
    bottom: 1.25rem;
}

.bot-6 {
    bottom: 1.5rem;
}

.bot-7 {
    bottom: 2rem;
}

.bot-8 {
    bottom: 3rem;
}

.bot-50 {
    bottom: 50%;
}

.left-0 {
    left: 0;
}

.left-1 {
    left: 0.25rem;
}

.left-2 {
    left: 0.5rem;
}

.left-3 {
    left: 0.75rem;
}

.left-4 {
    left: 1rem;
}

.left-5 {
    left: 1.25rem;
}

.left-6 {
    left: 1.5rem;
}

.left-7 {
    left: 2rem;
}

.left-8 {
    left: 3rem;
}

.left-50 {
    left: 50%;
}

.right-0 {
    right: 0;
}

.right-1 {
    right: 0.25rem;
}

.right-2 {
    right: 0.5rem;
}

.right-3 {
    right: 0.75rem;
}

.right-4 {
    right: 1rem;
}

.right-5 {
    right: 1.25rem;
}

.right-6 {
    right: 1.5rem;
}

.right-7 {
    right: 2rem;
}

.right-8 {
    right: 3rem;
}

.right-50 {
    right: 50%;
}

.z-10 {
    z-index: 10;
}

.z-20 {
    z-index: 20;
}

.z-30 {
    z-index: 30;
}

.z-40 {
    z-index: 40;
}

.z-50 {
    z-index: 50;
}

/* BORDER =================================== */
.border-1 {
    border: 1px solid;
}

/* RADIUS =================================== */

.r-1 {
    border-radius: 0.25rem;
}

.r-2 {
    border-radius: 0.5rem;
}

.r-3 {
    border-radius: 0.75rem;
}

.r-4 {
    border-radius: 1rem;
}

.r-5 {
    border-radius: 1.25rem;
}

.r-6 {
    border-radius: 1.5rem;
}

.r-7 {
    border-radius: 2rem;
}

.r-8 {
    border-radius: 3rem;
}

/* GAP ========================================== */
.g-1 {
    gap: 0.25rem;
}

.g-2 {
    gap: 0.5rem;
}

.g-3 {
    gap: 0.75rem;
}

.g-4 {
    gap: 1rem;
}

.g-5 {
    gap: 1.25rem;
}

.g-6 {
    gap: 1.5rem;
}

.g-7 {
    gap: 2rem;
}

.g-8 {
    gap: 3rem;
}

/* PADDING ========================================== */
.p-0 {
    padding: 0rem;
}

.p-1 {
    padding: 0.25rem;
}

.p-2 {
    padding: 0.5rem;
}

.p-3 {
    padding: 0.75rem;
}

.p-4 {
    padding: 1rem;
}

.p-5 {
    padding: 1.25rem;
}

.p-6 {
    padding: 1.5rem;
}

.p-7 {
    padding: 2rem;
}

.p-8 {
    padding: 3rem;
}

.px-0 {
    padding-left: 0rem !important;
    padding-right: 0rem !important;
}

.px-1 {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}

.px-2 {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.px-3 {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

.px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
}

.px-5 {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

.px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.px-7 {
    padding-left: 2rem;
    padding-right: 2rem;
}

.px-8 {
    padding-left: 3rem;
    padding-right: 3rem;
}

.py-0 {
    padding-top: 0rem !important;
    padding-bottom: 0rem !important;
}

.py-1 {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

.py-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.py-3 {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

.py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.py-5 {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
}

.py-6 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

.py-7 {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.py-8 {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

.pt-0 {
    padding-top: 0rem;
}

.pt-1 {
    padding-top: 0.25rem;
}

.pt-2 {
    padding-top: 0.5rem;
}

.pt-3 {
    padding-top: 0.75rem;
}

.pt-4 {
    padding-top: 1rem;
}

.pt-5 {
    padding-top: 1.25rem;
}

.pt-6 {
    padding-top: 1.5rem;
}

.pt-7 {
    padding-top: 2rem;
}

.pt-8 {
    padding-top: 3rem;
}

.pb-0 {
    padding-bottom: 0rem;
}

.pb-1 {
    padding-bottom: 0.25rem;
}

.pb-2 {
    padding-bottom: 0.5rem;
}

.pb-3 {
    padding-bottom: 0.75rem;
}

.pb-4 {
    padding-bottom: 1rem;
}

.pb-5 {
    padding-bottom: 1.25rem;
}

.pb-6 {
    padding-bottom: 1.5rem;
}

.pb-7 {
    padding-bottom: 2rem;
}

.pb-8 {
    padding-bottom: 3rem;
}

.pl-0 {
    padding-left: 0rem;
}

.pl-1 {
    padding-left: 0.25rem;
}

.pl-2 {
    padding-left: 0.5rem;
}

.pl-3 {
    padding-left: 0.75rem;
}

.pl-4 {
    padding-left: 1rem;
}

.pl-5 {
    padding-left: 1.25rem;
}

.pl-6 {
    padding-left: 1.5rem;
}

.pl-7 {
    padding-left: 2rem;
}

.pl-8 {
    padding-left: 3rem;
}

.pr-0 {
    padding-right: 0rem;
}

.pr-1 {
    padding-right: 0.25rem;
}

.pr-2 {
    padding-right: 0.5rem;
}

.pr-3 {
    padding-right: 0.75rem;
}

.pr-4 {
    padding-right: 1rem;
}

.pr-5 {
    padding-right: 1.25rem;
}

.pr-6 {
    padding-right: 1.5rem;
}

.pr-7 {
    padding-right: 2rem;
}

.pr-8 {
    padding-right: 3rem;
}

/* MARGIN ========================================== */
.m-auto {
    margin: auto;
}

.m-1 {
    margin: 0.25rem;
}

.m-2 {
    margin: 0.5rem;
}

.m-3 {
    margin: 0.75rem;
}

.m-4 {
    margin: 1rem;
}

.m-5 {
    margin: 1.25rem;
}

.m-6 {
    margin: 1.5rem;
}

.m-7 {
    margin: 2rem;
}

.m-8 {
    margin: 3rem;
}

.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

.mx-1 {
    margin-left: 0.25rem;
    margin-right: 0.25rem;
}

.mx-2 {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
}

.mx-3 {
    margin-left: 0.75rem;
    margin-right: 0.75rem;
}

.mx-4 {
    margin-left: 1rem;
    margin-right: 1rem;
}

.mx-5 {
    margin-left: 1.25rem;
    margin-right: 1.25rem;
}

.mx-6 {
    margin-left: 1.5rem;
    margin-right: 1.5rem;
}

.mx-7 {
    margin-left: 2rem;
    margin-right: 2rem;
}

.mx-8 {
    margin-left: 3rem;
    margin-right: 3rem;
}

.my-auto {
    margin-top: auto;
    margin-bottom: auto;
}

.my-1 {
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
}

.my-2 {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

.my-3 {
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
}

.my-4 {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.my-5 {
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
}

.my-6 {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

.my-7 {
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.my-8 {
    margin-top: 3rem;
    margin-bottom: 3rem;
}

.mt-auto {
    margin-top: auto;
}

.mt-1 {
    margin-top: 0.25rem;
}

.mt-2 {
    margin-top: 0.5rem;
}

.mt-3 {
    margin-top: 0.75rem;
}

.mt-4 {
    margin-top: 1rem;
}

.mt-5 {
    margin-top: 1.25rem;
}

.mt-6 {
    margin-top: 1.5rem;
}

.mt-7 {
    margin-top: 2rem;
}

.mt-8 {
    margin-top: 3rem;
}

.mb-auto {
    margin-bottom: auto;
}

.mb-1 {
    margin-bottom: 0.25rem;
}

.mb-2 {
    margin-bottom: 0.5rem;
}

.mb-3 {
    margin-bottom: 0.75rem;
}

.mb-4 {
    margin-bottom: 1rem;
}

.mb-5 {
    margin-bottom: 1.25rem;
}

.mb-6 {
    margin-bottom: 1.5rem;
}

.mb-7 {
    margin-bottom: 2rem;
}

.mb-8 {
    margin-bottom: 3rem;
}

.mr-auto {
    margin-right: auto;
}

.mr-1 {
    margin-right: 0.25rem;
}

.mr-2 {
    margin-right: 0.5rem;
}

.mr-3 {
    margin-right: 0.75rem;
}

.mr-4 {
    margin-right: 1rem;
}

.mr-5 {
    margin-right: 1.25rem;
}

.mr-6 {
    margin-right: 1.5rem;
}

.mr-7 {
    margin-right: 2rem;
}

.mr-8 {
    margin-right: 3rem;
}

.ml-auto {
    margin-left: auto;
}

.ml-1 {
    margin-left: 0.25rem;
}

.ml-2 {
    margin-left: 0.5rem;
}

.ml-3 {
    margin-left: 0.75rem;
}

.ml-4 {
    margin-left: 1rem;
}

.ml-5 {
    margin-left: 1.25rem;
}

.ml-6 {
    margin-left: 1.5rem;
}

.ml-7 {
    margin-left: 2rem;
}

.ml-8 {
    margin-left: 3rem;
}