.dropdable {
    cursor: pointer
}

header {
    background-color: hsla(0, 0%, 100%, .6);
    left: 0;
    position: relative;
    top: 0;
    width: 100%;
    z-index: 99;
    --distance-to-left: 200px
}

header a {
    display: block
}

.glass-effect {
    background-color: #fff;

    * {
        color: #000
    }
}

.header-container-div {
    align-items: center;
    display: flex;
    gap: 24px;
    justify-content: space-between;
    margin: 0 auto;
    max-width: 95%;
    padding: 8px 0
}

.header-items-to-nav {
    padding: 0
}

.contenedor-interno-items-to-nav,
.header-items-to-nav {
    align-items: center;
    display: flex;
    justify-content: space-between;
    width: 100%
}

.acl-logo-header img {
    aspect-ratio: 3/1;
    width: 86px
}

nav ul {
    display: flex;
    gap: 32px;
    list-style-type: none;
    padding: 0
}

header a {
    border-bottom: 2px solid transparent;
    color: #000;
    padding: 8px;
    text-decoration: none
}

.header-nav-link:hover {
    border-bottom: 2px solid var(--color-red);
    color: var(--color-red)
}

.call-to-action-header {
    border: 2px solid #000;
    border-radius: 96px;
    padding: 6px 16px
}

.call-to-action-header:hover {
    background-color: var(--color-red);
    border: 2px solid var(--color-red);
    color: #fff
}

.drop-down-card {
    border-top: 1px solid rgba(0, 0, 0, .05);
    padding: 32px 48px 48px;
    position: absolute;
    right: 0;
    top: 69px;
    width: 100svw
}

.drop-down-card,
.fondo-blanco {
    background-color: #fff
}

.drop-down-content {
    column-gap: 32px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    list-style-type: none;
    padding: 0;
    position: relative;
    row-gap: 16px;
    width: 100%
}

.drop-down-content a {
    color: #000;
    text-decoration: none
}

.drop-down-content a:hover {
    color: var(--color-red)
}

.drop-down-content hr {
    border: 1px solid rgba(0, 0, 0, .05);
    margin-top: 24px
}

.drop-down-content .main-item,
.drop-down-content .secondary-item {
    font-size: 16px;
    font-weight: 700;
    text-transform: capitalize
}

.drop-down-content .description-of-item {
    font-size: 12px
}

.drop-down-content .secondary-list {
    display: flex;
    gap: 32px
}

@media screen and (width<992px) {
    .close-mobile-menu-container {
        display: flex;
        justify-content: flex-end;
        width: 100%
    }

    .mobile-menu-switcher {
        align-items: center;
        background: none;
        border: none;
        display: flex;
        justify-content: center
    }

    .header-items-to-nav {
        background-color: #fff;
        height: 100vh;
        left: 0;
        overflow-y: scroll;
        position: absolute;
        top: 0
    }

    .contenedor-interno-items-to-nav {
        display: block;
        height: 100%;
        margin: 0 auto;
        padding: 32px 0 48px;
        width: 95%
    }

    .header-items-to-nav ul {
        align-items: center;
        flex-direction: column
    }

    .header-items-to-nav li {
        text-align: center;
        text-justify: center
    }

    .drop-down-card {
        background-color: var(--color-gray);
        border: none;
        padding: 12px 0;
        position: relative;
        top: 0;
        width: 100vw
    }

    .drop-down-content {
        display: grid;
        grid-template-columns: 1fr;
        list-style-type: none;
        margin: 0 auto;
        padding: 0;
        row-gap: 16px;
        width: max-content
    }

    .drop-down-content li:first-child {
        grid-column-end: 2;
        grid-column-start: 1
    }

    .description-of-item,
    .header-items-to-nav hr {
        display: none
    }

    .header-items-to-nav .main-item,
    .header-items-to-nav .secondary-item {
        font-size: 14px
    }

    .call-to-action-header {
        margin: 32px auto;
        width: max-content
    }
}