/* IMPORTANDO COLORES VAR */
@import "colores-var-globales.css";

/* Esconder menu largo */
header.header--cabezote--menu_inicio .nav--cabezote-menu_largo{
    display: none;
}


/* BANNER */
header{
    max-width: 97%;
    margin: 0 auto;
    padding-top: 1rem;
}

.contenedorCabezotePromo {
    display: flex;
    justify-content: center;
    align-items: center;
}

.contenedorCabezotePromo:hover {
    transform: scale(0.98);
}

img.imgCabezotePromo {
    width: 100%;
    border-radius: 10px;
}

@media (min-width: 600px) {
    img.imgCabezotePromo {
        width: 60%;
    }
}

/* Fin de modulo */
/* #### EN ELEMENTO HEADER */
    header.header--cabezote--menu_inicio{
        /*width: 90%;*/
        display: grid;
        grid-template-areas:
            'nave-cabe-menu-corto'
            'nave-cabe-menu-largo';
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        align-items: normal;
        justify-content: normal;
    }

    nav.nav--cabezote--logo-menu_corto{
    grid-area: nave-cabe-menu-corto;
    }

    nav.nav--cabezote-menu_largo{
    grid-area: nave-cabe-menu-largo;
    }

        /* #### EN ELEMENTO NAV... */
            nav.nav--cabezote--logo-menu_corto{
                 display: grid;
                 grid-template-areas:
                'nave-imag-menu-logo'
                'subg-menu-cort';
            }

                /* ...LOGO... */
                nav img.img-menu-logo{
                grid-area: nave-imag-menu-logo;
                width: 100%;
                height: auto;
                }

                /* ...Y SUBGRUPO UL MENU CORTO*/
                nav ul.subgrupo--ul-menu_corto{
                display: grid;
                width: 100%;                    
                grid-template-columns: repeat(3, 1fr); /* columnas iguales */
                grid-template-areas:
                "btn-menu-corto1 btn-menu-corto2 btn-menu-corto3"
                "btn-menu-corto4 btn-menu-corto4 btn-menu-corto5";
                gap: 0.8rem;                    
                padding: 0px;
                align-items: center;
                }

                /*  Todos los <li> les damos display: grid para que el elemento <li> ocupe toda la grilla */
                nav ul.subgrupo--ul-menu_corto li{
                    display: grid;
                    width: 100%;
                    text-align: center;
                }

                /* Eliminar bullets de <li> */
                header.header--cabezote--menu_inicio nav ul.subgrupo--ul-menu_corto li{
                list-style-type: none;
                }

                header.header--cabezote--menu_inicio nav ul.subgrupo--ul-menu_corto li a{
                text-decoration: none;
                }

                /* asignar áreas a los LI (los hijos directos) */
                nav ul.subgrupo--ul-menu_corto li.btn-menu-corto1 { grid-area: btn-menu-corto1; }
                nav ul.subgrupo--ul-menu_corto li.btn-menu-corto2 { grid-area: btn-menu-corto2; }
                nav ul.subgrupo--ul-menu_corto li.btn-menu-corto3 { grid-area: btn-menu-corto3; }
                nav ul.subgrupo--ul-menu_corto li.btn-menu-corto4 { grid-area: btn-menu-corto4; }
                nav ul.subgrupo--ul-menu_corto li.btn-menu-corto5 { grid-area: btn-menu-corto5; }

                nav ul.subgrupo--ul-menu_corto li.btn-menu-corto1 a{
                    background-color: var(--color-relindo-mujer);
                }

                nav ul.subgrupo--ul-menu_corto li.btn-menu-corto2 a{
                    background-color: var(--color-relindo-hombre);
                }

                nav ul.subgrupo--ul-menu_corto li.btn-menu-corto3 a{
                    background-color: var(--color-relindo-bisuteria);
                }

                nav ul.subgrupo--ul-menu_corto li.btn-menu-corto4 a{
                    background-color: white;
                    color: var(--color-relindo-verde);
                    border: 2px solid var(--color-relindo-verde);
                    border-radius: 1rem;
                }

                nav ul.subgrupo--ul-menu_corto li.btn-menu-corto5 a{
                    color: white;
                    border-radius: .4rem;
                    background-color: var(--color-relindo-verde);
                }


                /* limpieza estilo de li / a */
                nav ul.subgrupo--ul-menu_corto li { list-style: none; }

                nav ul.subgrupo--ul-menu_corto a.item-menu_corto {
                padding: 1rem;
                border-radius: .4rem;
                text-decoration: none;
                color: white;

                /* FUENTE */
                font-family: Arial, sans-serif;
                font-size: 1rem;
                }

                header.header--cabezote--menu_inicio nav ul li a:hover{
                    transform: scale(0.95);
                    }

            /* MIN = Aplicar cuando el ancho sea igual o MAYOR a...*/
            @media (min-width: 800px) { 
            /* ABRE @media*/

                nav.nav--cabezote--logo-menu_corto {
                grid-template-areas:
                    'nave-imag-menu-logo subg-menu-cort';
                    grid-template-columns: 1fr 4.5fr;
            }

            nav ul.subgrupo--ul-menu_corto {
                width: 100%;
                grid-template-columns: repeat(4, 1fr);
                grid-template-areas:
                    "btn-menu-corto1 btn-menu-corto2 btn-menu-corto3 btn-menu-corto4";
                            align-items: center;
            }

            /* ESCONDO ITEM 5 */
            nav ul.subgrupo--ul-menu_corto li.btn-menu-corto5 { display: none; }

            nav img.img-menu-logo {width: 90%;}

            /* Esconder menu largo */
            header.header--cabezote--menu_inicio .nav--cabezote-menu_largo{
            display: flex;
        
            }

            header.header--cabezote--menu_inicio .nav--cabezote-menu_largo li{
                list-style-type: none;
            }

            header.header--cabezote--menu_inicio .nav--cabezote-menu_largo ul.subgrupo--ul-menu_largo li a{
                color: black;
                text-decoration: underline;
                text-underline-offset: 4.5px;
                text-decoration-thickness: 2px;
                text-decoration-line: underline;
                text-decoration-style: solid;
                font-family: Arial, sans-serif;
                font-size: 0.95rem;
                text-decoration-color: silver;
            }

                header.header--cabezote--menu_inicio .nav--cabezote-menu_largo ul.subgrupo--ul-menu_largo li a:hover{
                    text-decoration-thickness: 3.4px;
                    text-decoration-color: black;

            }

            ul.subgrupo--ul-menu_largo {
            display: flex;
            width: 100%;
            justify-content: space-around;
            }

            /*CIERRA @media*/
            }