#menu {

		position: fixed;
		right: 1%;		
		margin-top: 0.5%;
		padding: 0;
		border: 0;
		width: 50px; 
        height: auto;
		transition: all 0.3s ease-in-out;	
		z-index: 1200;	
	
	} #menu:hover {

		cursor: pointer;
		border-radius: 10px;
		outline: 5px dashed rgb(19, 220, 247);
        outline-offset: 2px;

	} #menu:active {

		cursor: pointer;
		border-radius: 10px;
		box-shadow: 0 0 14px 7px lightskyblue;

	}

	#listMenu {
		position: fixed;
		right: 4.5%;
		top: 7%;
		display: none;
		z-index: 1200;
		transition: all 0.5s ease-in-out;	
	}
    
	nav[aria-label="Principal"] {
        
		width: auto;
		height: auto;

        display: grid; 
        grid-template-columns: 1fr 1fr 1fr 1fr;
		grid-auto-rows: 1fr;
        justify-items: center;
        gap: 16px; 

        color: black;
        background:  rgba(255, 255, 255, 0.5);
        box-shadow: 1px 1px 30px rgba(0,0,0,1);
		border-radius: 14px; 
        padding: 18px; 
		
    }

    .menu { position: relative; padding: 5px; }
    
    .menu > a {
		
        text-decoration: none; 
        color: inherit;
        background-color: inherit;
        padding: 5px; 
        border-radius: 10px; 
        box-shadow: 1px 1px 10px rgba(0,0,0,1);
        
    }

    .menu > a:hover { 
        
        outline: 5px dashed rgb(19, 220, 247);
        outline-offset: 2px;
    }

	.menu > a:focus { 
        
        outline: 5px dashed rgb(19, 220, 247);
        outline-offset: 2px;
    }

    /* Dropdown */

    .dropdown {
        position: absolute; 
        left: 0; 
        top: calc(100% + 19px);
        min-width: 220px;
        
        color: black;
        background:  rgba(255, 255, 255, 0.5);
        border-radius: 12px; padding: 6px; display: none;
        box-shadow: 1px 1px 30px rgba(0,0,0,1);
        
    }

    .dropdown a { 
        display: block; 
        padding: 10px 10px; 
        border-radius: 8px; 
        margin: 8px;
        text-decoration: none; 
        box-shadow: 1px 1px 10px rgba(0,0,0,1);
        color: inherit; 
    }
    
    .dropdown a:hover, .dropdown a:focus { 
        
        outline: 5px dashed rgb(19, 220, 247);
        outline-offset: 2px;
    }

    /* Mostrar el dropdown con hover o con focus dentro (accesible teclado) */
    .menu:hover .dropdown, 
    .menu:focus-within .dropdown { display: inline; }