body{
    .tags{
        background-color: white;
    }
    background-color: #fff; /* Fondo base blanco */
    background-image:
            radial-gradient(circle, rgba(128, 128, 128, 0.05) 5px, transparent 1px),
            radial-gradient(circle, rgba(128, 128, 128, 0.05) 5px, transparent 1px);
    background-size: 66px 100px, 66px 100px;
    background-position: 0 0, 33px 50px;

    & .bg-dblue-sky{
        background: var(--PRIMARY, #1389FF);
    }

    & .bg-features{
        background: linear-gradient(180deg, #001041 0%, #004BB0 100%);
    }

    & .background-theme{
        background: linear-gradient(180deg, #001041 13.76%, #004BB0 95.48%);
    }
    & .logo-dark{
        display: none;
    }
    & .logo-light{
        display: block;
    }
    & .text-theme{
        color: #153B4F;
    }
    & .black-white{
        color: #001041;
    }
    & .bg-black-white{
        background: white;
    }
    & .presentation-fill{
        fill:  #B8DCFF;
    }
}
body.dark-mode{
    .tags{
        background-color: transparent;
    }
    background-color: rgba(1,31,47, 0.96); /* Fondo base blanco */
    background-image:
            radial-gradient(circle, rgba(0, 0, 0, 0.2) 5px, transparent 1px),
            radial-gradient(circle, rgba(0, 0, 0, 0.2) 5px, transparent 1px);
    background-size: 66px 100px, 66px 100px;
    background-position: 0 0, 33px 50px;
    & .bg-dblue-sky{
        background: var(--SECONDARY, #004BB0);
    }
    & .bg-features{
        background: linear-gradient(180deg, #004BB0 0%, #1389FF 100%);
    }
    & .background-theme{
        background: linear-gradient(180deg, #004BB0 13.76%, #1389FF 95.48%);
    }
    & .logo-dark{
        display: block;
    }
    & .logo-light{
        display: none;
    }
    & .text-theme{
        color: #E0F4FF;
    }
    & .black-white{
        color: white;
    }
    & .bg-black-white{
        background: #001041;
    }
    & .presentation-fill{
        fill: white;
    }
}
.text-accent{
    & b {
        font-weight: 800;
        padding: 0 1px;
        background: linear-gradient(90deg, #1389FF 54.02%, #004BB0 91.3%);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
}
.max-w-1600{
    margin: 0 auto !important;
}
.text-centre{
    text-align: center;
}
@media (max-width: 768px) {
    /*BUTTONS*/
    .bg-awards{
        background: linear-gradient(180deg, #1389FF 2.4%, #001041 97.95%);
    }
    .max-w-1600{
        max-width: 100%;
    }
    .btn-base{
        display: inline-flex;
        padding: 10px 25px;
        align-items: center;
        gap: 10px;
        border-radius: 25px;
        & a {
            text-decoration: none;
        }
    }

    .btn-primary{
        display: inline-flex;
        padding: 10px 25px;
        align-items: center;
        gap: 10px;
        border-radius: 25px;
        background: var(--PRIMARY, #1389FF);
        & a {
            text-decoration: none;
            display: inline-flex;
            gap: 10px;
        }
    }
    .btn-white{
        color: var(--PRIMARY, #1389FF);
        display: inline-flex;
        padding: 10px 25px;
        align-items: center;
        gap: 10px;
        border-radius: 25px;
        background: var(--WHITE, #FFF);
        & a {
            text-decoration: none;
        }
    }

    .title-principal{
        /* h1 */
        font-family: "Work Sans";
        font-size: 40px;
        font-style: normal;
        font-weight: 800;
        line-height: normal;
    }
    .title-principal-slim{
        font-family: "Work Sans";
        font-size: 40px;
        font-style: normal;
        font-weight: 300;
        line-height: normal;
    }
    .title-secondary{
        font-family: "Work Sans";
        font-size: 32px;
        font-style: normal;
        font-weight: 800;
        line-height: normal;
    }
    .title-secondary-slim{
        font-family: "Work Sans";
        font-size: 32px;
        font-style: normal;
        font-weight: 300;
        line-height: normal;
    }
    .text-main{
        /* p */
        font-family: "Work Sans";
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
    }
}
@media (min-width: 768px) {
    .bg-awards{
        background: linear-gradient(91deg, #1389FF 2.4%, #001041 97.95%);
    }
    .max-w-1600{
        width: 100%;
        max-width: 1600px;
    }
    .common-text{
        font-family: "Work Sans";
        font-size: 17px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
    }
    /*BUTTONS*/
    .btn-base{
        display: inline-flex;
        padding: 10px 25px;
        align-items: center;
        gap: 10px;
        border-radius: 25px;
        & a {
            text-decoration: none;
        }
    }

    .btn-primary{
        display: inline-flex;
        padding: 10px 25px;
        align-items: center;
        gap: 10px;
        border-radius: 25px;
        background: var(--PRIMARY, #1389FF);
        & a {
            text-decoration: none;
            display: inline-flex;
            gap: 10px;
        }
    }
    .btn-white{
        color: var(--PRIMARY, #1389FF);
        display: inline-flex;
        padding: 10px 25px;
        align-items: center;
        gap: 10px;
        border-radius: 25px;
        background: var(--WHITE, #FFF);
        & a {
            text-decoration: none;
        }
    }

    .title-principal{
        /* h1 */
        font-family: "Work Sans";
        font-size: 60px;
        font-style: normal;
        font-weight: 800;
        line-height: normal;
    }
    .title-principal-slim{
        font-family: "Work Sans";
        font-size: 60px;
        font-style: normal;
        font-weight: 300;
        line-height: normal;
    }
    .title-secondary{
        /* h2 */
        font-family: "Work Sans";
        font-size: 40px;
        font-style: normal;
        font-weight: 800;
        line-height: normal;
    }
    .title-secondary-slim{
        font-family: "Work Sans";
        font-size: 40px;
        font-style: normal;
        font-weight: 300;
        line-height: normal;
    }
    .text-main{
        /* p */
        font-family: "Work Sans";
        font-size: 18px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
    }
}
.text-buttons{
    font-family: "Work Sans";
    font-size: 17px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.absolute{
    position: absolute;
}
.relative {
    position: relative;
}

.color-primary{
    color: #1389FF;
}
.bg-color-primary{
    background: #1389FF;
}

.color-secondary{
    color: #004BB0;
}
.bg-color-secondary{
    background: #004BB0;
}

.color-black{
    color: #001041;
}
.bg-color-black{
    background: #001041;
}

.color-white{
    color: #FFFFFF;
}
.bg-color-white{
    background: #FFFFFF;
}

.color-green{
    color: #00D700;
}
.bg-color-green{
    background: #00D700;
}
.color-purple{
    color: #7574C1
}
.bg-color-purple{
    background: #7574C1;
}

.color-pastel-purple{
    color: #B7C0FF;
}
.bg-pastel-purple{
    background: #B7C0FF;
}

.color-pastel-light-blue{
    color: #B8DCFF;
}
.bg-pastel-light-blue{
    background: #B8DCFF;
}

.color-pastel-sky{
    color: #B7F6FF;
}
.bg-pastel-sky{
    background: #B7F6FF;
}

.color-pastel-green{
    color: #B7FFD2;
}
.bg-pastel-green{
    background: #B7FFD2;
}

.color-pastel-yellow{
    color: #FFF6B7;
}
.bg-pastel-yellow{
    background: #FFF6B7;
}

.color-pastel-red{
    color: #FFB7B7;
}
.bg-pastel-red{
    background: #FFB7B7;
}

.color-pastel-orange{
    color: #FFDBB7;
}
.bg-pastel-orange{
    background: #FFDBB7;
}

.decoration-none{
    text-decoration: none;
}

.w-full{
    width: 100%;
}
.justify-center{
    justify-content: center;
}
.justify-between{
    justify-content: space-between;
}
.justify-around{
    justify-content: space-around;
}
.justify-evenly{
    justify-content: space-evenly;
}
.align-center{
    align-items: center;
}
.align-start{
    align-items: flex-start;
}
.align-end{
    align-items: flex-end;
}
.text-center{
    text-align: center;
}
.flex-wrap{
    flex-wrap: wrap;
}
.flex{
    display: flex;
}
.flex-column{
    flex-direction: column;
}
.flex-row{
    flex-direction: row;
}
.cursor-pointer{
    cursor: pointer;
}


.template-homepage{
    width: 100%;
    margin: 0 auto;
}