html, body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    height: 100%;
    font-size: clamp(12px, 1.5vw, 24px); /* Mínimo: 12px, Preferido: 3vw, Máximo: 24px */
}

header {
    background: #B60000;
    color: white;
    display: flex;
    align-items: center;
    top: 0%;
    padding: 0%;
    position: fixed;
    width: 100%;
    margin: 0;
    height: 7%;
    z-index: 1500;
}

main {
    width: 70%;
    height: "auto";
    display: block;
    margin: 0 auto;
    top: 12%;
    font-size: 0.9rem;
    position: relative;
    z-index: 1;
}

footer {
    display: block;
    width: 70%;
    top: 12%;
    margin: 0 auto;
    font-size: 0.7rem;
    position: relative;
}

.standard_img {

}

.header-title-logo {
    position: relative;
    display: inline-flex; /* Permite centrar sin afectar la distribución */
    align-items: center; /* Centra verticalmente el texto */
    margin-left: 15%;
    height: 100%;
    text-align: left;
    z-index: 1100;
    font-size: 1.2rem;
}
    .header-title-logo img {height: 80%}

.header-title {
    position: relative;
    display: inline-flex; /* Permite centrar sin afectar la distribución */
    align-items: center; /* Centra verticalmente el texto */
    margin-left: 0%;
    text-align: left;
    font-size: 1.2rem;
    height: 100%;
    color: #999999;
    z-index: 1100;
}

.header-title-slogan {
    position: relative;
    display: inline-flex; /* Permite centrar sin afectar la distribución */
    align-items: center; /* Centra verticalmente el texto */
    margin-left: auto;
    margin-right: 0%;
    text-align: right;
    font-size: 0.9rem;
    height: 100%;
    z-index: 1100;
}

.header-title-flag {
    position: relative;
    display: inline-flex; /* Permite centrar sin afectar la distribución */
    align-items: center; /* Centra verticalmente el texto */
    margin-right: 15%;
    text-align: right;
    font-size: 1.2rem;
    height: 100%;
    z-index: 1100;
} .header-title-flag img {height: 50%}

.menu-hamb-btn {
    display: none;
    background: #000000;
    border: none;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    position: relative;
    text-align: center;
    top: 25%;
    height: 100%;
    top: 0%; /* Ajusta la posición vertical */
    left: 0%; /* Ajusta la posición horizontal */
    z-index: 2000; /* Asegura que esté por encima del menú */
    width: 10%;
    
}
    .menu-hamb-btn:hover {
        background: #aa7700;
        cursor: pointer;
    }

.menu {
    background: #444;
    margin: 0;
    display: block;
    position: fixed;
    width: 70%;
    padding-left: 15%;
    padding-right: 15%;
    top:7%;
    height: 5%;
    font-size: 0.9rem;
    z-index: 1000;
}

    .menu > ul {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        height: 100%;
        width:100%;
        position:relative;
    }

    .menu > ul > li {

        position:relative;
        display: inline-flex; /* Permite centrar sin afectar la distribución */
        align-items: center; /* Centra verticalmente el texto */
        justify-content: center; /* (Opcional) Centra horizontalmente */
        width: 12%;
        border-right: 1px solid #aaaaaa;
        border-left: 1px solid #aaaaaa;
        text-align: center;
        height: 100%;
        color: white;
        left: 0;
        margin: 0;
        padding: 0;

    }

    .menu > ul > li:hover {
        background: #b60000;
        cursor: pointer;
    }

    .menu > ul > li > a{

        width: 100%;
        height: auto;

    }

    /* Estilo de submenu*/
     .menu > ul > li > ul.submenu {
        position: absolute;
        width: 100%;
        flex-direction: column; /* Coloca los elementos en una columna */
        top: 100%; /* Posiciona el submenú justo debajo de la opción principal */
        display: none;  
        font-size: 0.9rem;
        left: 0%;  /* Alinea al centro del <li> */
        padding: 0; /* Elimina espacios internos */
        height: auto;
    }

        .menu > ul > li > ul.submenu > li
        {
            align-items: center; /* Centra verticalmente el texto */
            justify-content: center; /* (Opcional) Centra horizontalmente */
            display: none;
            top: 100%;
            height: 100%;
            background: #772222;
            text-align: center;
            position:relative;

            
        }

       .menu > ul > li > ul.submenu > li > a{

            width: 100%;
            height: 100%;

        }

        .menu > ul > li > ul.submenu > li:hover
        {

            background: #777722;

        }

        /* Activacion de vista del submenu segun hover en menu */
        .menu > ul > li:hover > ul.submenu {
            display: flex; /* O display: flex si quieres que los <li> se alineen en fila */
        }

        .menu > ul > li:hover > ul.submenu > li {
            display: flex;
            height: 100%;
        }

/* Aspecto alternativo para pantallas de celular (verticales)*/
@media (max-aspect-ratio: 1) {
    html, body {

        font-size: clamp(12px, 3.5vw, 30px); /* Mínimo: 12px, Preferido: 3vw, Máximo: 24px */
    }

    main {
        display: block;
        position: relative;
        width: 85%;
        margin-left: 10%;
        margin-right: 5%;
        font-size: 0.9rem;
        top: 7%;

    }

    footer {
        display: block;
        position: relative;
        width: 85%;
        margin-left: 10%;
        margin-right: 5%;
        font-size: 0.9rem;
    }

    .header-title-logo {
        margin-left: 1%;
    }

    .header-title {
        margin-left: 0%;

    }

    .header-title-slogan {
        margin-right: 0%;
    }

    .header-title-flag {
        margin-right: 5%;
    }

    .menu-hamb-btn {
        display: block;
    }

    .menu {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 30%;
        height: 100vh;
        background: #444444;
        padding-top: 8vh; /* Añade espacio para el botón de hamburguesa */
        font-size: 1.1rem;
        max-height: none;
        z-index: 999;
        padding-left: 0;
        padding-right: 0;
        box-sizing: border-box;

    }

        .menu.active {
            display: block;
        }

        .menu > ul {
            text-align: center;
            width: 100%;
            padding: 0;
            margin: 0;
            height: auto; /*resetea este valor*/
            display: flex;
            flex-direction: column; /* Coloca los elementos en una columna */
            height:100%;
            position: relative;
        }

        .menu ul > li {
            width: 100%;
            margin: 0;
            padding-top: 5%;
            padding-bottom: 5%;
            border-bottom: 1px solid #aaaaaa;
            border-right: 0px solid #aaaaaa;
            border-left: 0px solid #aaaaaa;
            height:10%;
            position: relative;

        }

        .menu > ul > li > a {
            display: block;
        }

        /* Estilo de submenu*/

        .menu > ul > li > ul.submenu{
            position: fixed;
            display: none;
            font-size: 0.8rem;
            top: 7%;
            left: 30%;
            font-size: 1.1rem;

        }
            .menu > ul > li > ul.submenu > li
            {
                display: none;
                background: #772222;
                text-align: center;
                width: 30%;
                height: 10%; /* Hereda la altura del elemento padre */
                align-items: center; /* Centra el texto verticalmente */
                justify-content: center; /* Centra el texto horizontalmente */
                padding-top: 5%;
                padding-bottom: 5%;
                position:relative;
            }

            .menu > ul > li > ul.submenu.active > li
            {
                display: flex;

            }

            .menu > ul > li > ul.submenu > li:hover
            {

                background: #777722;
                width: 30%;
            }

            /* Mostrar submenú cuando se pasa el mouse o se toca */
            .menu > ul > li:hover > .submenu{
                display: flex;
            }

}