:root {
    --primary: #4B235F;
    --secondary: #FDC816;
    --text-color: #636D6F;

    --tertiary: rgba(51, 51, 51, 0.5);
    --quaternary: rgba(152, 196, 108, 0.5);

    --header-height: 120px; /* Cambiar según diseño */
    --footer-height: 140px; /* Tamaño establecido por defecto, no cambiar. */

    --font-family-base: 'Gotham', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    --font-kepler: 'Kepler Std', sans-serif;
    --font-albert: 'Albert Sans', sans-serif;

    --font-weight-thin: 100;
    --font-weight-xlight: 200;
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 700;
    --font-weight-black: 900;
    --font-weight-ultra: 950;
}

html, body {
    font-family: var(--font-albert), sans-serif;
    font-style: normal;
    font-weight: var(--font-weight-regular);
    padding-right: 0 !important;
    min-height: 100vh;
    position: relative;
}

body{
    

}

body::before{
    content: ""; /* OBLIGATORIO para pseudo-elementos */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('../../img/platform/background-image.png') no-repeat center center fixed;
    background-size: cover;
    z-index: -1; /* Para que esté detrás del contenido */
    pointer-events: none; /* Para que no interfiera con la interacción */
}

body::after{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('../../img/platform/background-line.png') no-repeat;
    background-attachment: fixed;
    background-position: center bottom;
    z-index: -1;
    pointer-events: none;
}

body.menu-open {
    overflow: hidden;
}

.page {
    min-height: calc(100vh - (calc(var(--header-height) + var(--footer-height))));
}

.d-row {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}

.btn-close-modal {
    background-color: var(--secondary);
    color: var(--primary);
}

.btn-close-modal:hover {
    background-color: var(--primary);
    color: #fff;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: var(--secondary);
    border-radius: 6px;
    border: 2px solid transparent;
    background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--secondary);
    opacity: 0.8;
}

* {
    scrollbar-width: thin;
    scrollbar-color: var(--secondary) transparent;
}

.button-goBack {
    position: absolute;
    top: 260px;
    left: 150px;
    cursor: pointer;
}

.dot-styles{
    color: #FDC816;
}


.glass-style{
    position: relative;
    backdrop-filter: blur(15px) saturate(100%);
    -webkit-backdrop-filter: blur(15px) saturate(100%);
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    overflow: hidden;
}

.glass-style::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0%;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;

}
.glass-style::after{
     content: '';
    position: absolute;
    top: 0;
    left: 0%;
    width: 100%;
    height: 100%;
    opacity: 1;
    pointer-events: none;
}

.btn:focus-visible{
    background-color: var(--primary) !important;
    color: #fff !important;
}

@media (max-width: 992px) {
    body::before{
        /* top: inherit;
        bottom: 0; */
        background-position: left bottom;
        /* background-attachment: scroll !important; */
    }

    body::after{
        top: inherit;
        bottom: 0;
        min-height: 100vh;
        /* background-position: center; */
        background-attachment: scroll !important;
    }


    .button-goBack{
        left: 40px;
    }
}