*{
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }

    :root {
        --color-principal: #2e3091;
        --color-secundario: #7a7cef;
        --letra-grande: 22px;
        --letra-chica: 18px;
        --fuente-principal: "Finlandica Text", sans-serif;
        --color-letra: white;
    }

    body {
        font-size: var(--letra-chica);
        font-family: var (--fuente-principal);
        background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(Nuevacarpeta/fondo1.jpg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        background-attachment: fixed;
        background-clip: border-box;
    
        
    }

    
    a {
        color: var(--color-letra);
        text-decoration: none;
    }

    .menu {

        display: flex; 
        list-style-type: none;
        background-color: var(--color-principal);
        padding: 20px;
        font-size: var(--letra-grande);
        z-index: 0;
        
    }

    .menu li {
        flex-grow: 1;
        text-align: center;
        position: relative;
        color: var(--color-letra)
    }

    nav a:hover {
        color: var(--color-secundario);
    }

    

    .sub-mejorar {
        list-style-type: none;
        position: absolute;
        top: -105px;
        background-color: var(--color-secundario);
        width: 100%;
        padding: 0 0;
        transition: translate 0.5s;
        transition-delay: 2s;
        transform-origin: top;
        z-index: -1;
        

    }

    .sub-mejorar li {
        border: 1px solid black;
        padding: 3px;
    }

    li:nth-child(2):hover .sub-mejorar{
        transition-delay: 0.5s;
        translate: 0 150px;
        
        
    }

     .sub-programas {
        list-style-type: none;
        position: absolute;
        top: -105px;
        background-color: var(--color-secundario);
        width: 100%;
        padding: 0 0;
        transition: translate 0.5s;
        transition-delay: 2s;
        transform-origin: top;
        z-index: -1;

    }

    .sub-programas li {
        border: 1px solid black;
        padding: 3px;
    }

    li:nth-child(3):hover .sub-programas{
        transition-delay: 0.5s;
        translate: 0 150px;
        
    }

     .sub-resultados {
        list-style-type: none;
        position: absolute;
        top: -105px;
        background-color: var(--color-secundario);
        width: 100%;
        padding: 0 0;
        transition: translate 0.5s;
        transition-delay: 2s;
        transform-origin: top;
        z-index: -1;

    }

    .sub-resultados li {
        border: 1px solid black;
        padding: 3px;
    }

    li:nth-child(4):hover .sub-resultados{
        transition-delay: 0.5s;
        translate: 0 150px;
        
    }

    .sub-somos {
        list-style-type: none;
        position: absolute;
        top: -105px;
        background-color: var(--color-secundario);
        width: 100%;
        padding: 0 0;
        transition: translate 0.5s;
        transition-delay: 2s;
        transform-origin: top;
        z-index: -1;

    }

    .sub-somos li {
        border: 1px solid black;
        padding: 3px;
    }

    li:nth-child(5):hover .sub-somos{
        transition-delay: 0.5s;
        translate: 0 150px;
        
    }

    .sub-contacto {
        list-style-type: none;
        position: absolute;
        top: -225px;
        background-color: var(--color-secundario);
        width: 100%;
        padding: 0 0;
        transition: translate 0.5s;
        transition-delay: 2s;
        transform-origin: top;
        z-index: -1;

    }

    .sub-contacto li {
        border: 1px solid black;
        padding: 3px;
    }

    li:last-child:hover .sub-contacto{
        transition-delay: 0.5s;
        translate: 0 270px;
        
    }

    /* li:hover a {
        color: var(--color-secundario);
     } 
      PORQUE CAMBIA EL COLOR A TODO LOS A DE LI, HAY QUE ESPECIFICAR QUE SOLO EL DE MENU, NO SUBMENU
     */