/* ══════════════════════════════════════
       FUENTES
    ══════════════════════════════════════ */
    @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');

    body, * {
        font-family: 'Google Sans Flex', sans-serif;
    }

    body {
        background-color: #EAE4DD;
    }

    /* ══════════════════════════════════════
       NAVBAR
    ══════════════════════════════════════ */

    /* Fuente Montserrat en los links del nav */
    #nav-menu a,
    #nav-menu button {
        font-family: 'Montserrat', sans-serif;
        font-weight: 400;
        font-size: 0.85rem;
        letter-spacing: 0.05em;
        text-decoration: none;
        color: #0c0c0c;
    }

    /* Hover de los ítems del nav */
    #nav-menu > li > a:hover,
    #nav-menu > li > button:hover {
        background-color: rgba(0, 0, 0, 0.1);
    }

    /* Dropdown menu */
    #dd-menu {
        background-color: #b4b5a0;
        border: none;
        border-top: 2px solid rgb(0, 0, 0);
        border-radius: 0 0 6px 6px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
        margin-top: 0;
        animation: navFadeIn 0.2s ease-in-out;
    }

    @keyframes navFadeIn {
        from { opacity: 0; transform: translateY(-5px); }
        to   { opacity: 1; transform: translateY(0); }
    }

    /* Items del dropdown */
    #dd-menu a {
        font-family: 'Montserrat', sans-serif;
        font-weight: 400;
        color: #0c0c0c;
        padding: 10px 20px;
        display: block;
        white-space: normal;
        word-break: break-word;
        transition: background-color 0.2s ease, color 0.2s ease;
        text-decoration: none;
        font-size: 0.85rem;
    }

    #dd-menu a:hover,
    #dd-menu a:focus {
        background-color: #9c9c98;
        color: #0c0c0c;
    }

    /* Separadores verticales entre ítems del nav */
    #nav-menu > li + li {
        border-left: 1px solid rgba(0, 0, 0, 0.3);
    }

    /* Hamburguesa: ícono SVG negro */
    #nav-toggle svg {
        stroke: #0c0c0c;
    }

    /* En móvil: quitar separadores verticales, poner horizontales */
    @media (max-width: 1023px) {
        #nav-menu > li + li {
            border-left: none;
            border-top: 1px solid rgba(0, 0, 0, 0.2);
        }
        #dd-menu {
            position: static;
            box-shadow: none;
            border-radius: 0;
            border-top: 1px solid rgba(0,0,0,0.2);
            animation: none;
        }
    }

    /* Modal */
    #modal-backdrop {
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
    }

    #modal-box {
        max-height: 90vh;
    }

    .modal-body {
        overflow-y: auto;
    }

    .modal-body::-webkit-scrollbar {
        width: 3px;
    }

    .modal-body::-webkit-scrollbar-track {
        background: transparent;
    }

    .modal-body::-webkit-scrollbar-thumb {
        background: #c8bfb5;
        border-radius: 2px;
    }