body{ color: #D33700;

    background-color: #511604;
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
    
    margin: 0;
    }
    
    .pagina{
        border: solid 1px #D33700;
        position: relative;
        width: 1440px;   
        margin: auto; 
        background:#FFC431;
    }
    header{
        height: 64px;
        border: solid 1px #D33700;
        border-width: 0 0 1px 0;
        background: #D33700;
    }
    header ul{
        position:relative;
        margin: 0;
        padding: 0;
        text-align: center;
        height: 41px;
        
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: center;
    }
    header ul li{
        position:relative;
        display: inline;
        margin: 0;
        top: 0;
    }
    
    header a:link, header a:focus, header a:visited {
        position: relative;
        border: solid 1px #D33700;
        border-width: 0 0 0 1px;
        padding: 10px 20px;
        background: #FFC431;
        text-decoration: none;
        color: #D33700;
        font-size: 0.8em;
        top: 10px;
    }
    header nav a:hover, header nav .active{
        background: rgb(131, 157, 131);
        color: #D33700;
    }
    
.pagina div .Logo{
    position: absolute;
    min-height: 300px;
}
    
    .imageHero{
        background-position: center;
        background-size: 100%;
        text-align: center;
        
        
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
    }
    

    .imageHero div{
        font-size: 40px;
        color: #D33700;
        font-weight: bold;
        opacity: none;
    }
    
    .imageHero span{
        font-size: 100px;
        color: #D33700;
        opacity: none;
        font-weight: bold;
    }
    
    .imageHero a, .imageHero a:link{
        
        background-color: gray;
        color: #ffffff;
        padding: 10px 50px;
        text-decoration: none;
        border-radius: 10px;
        opacity: 50%;
    }
    
    .imageHero a:hover{
        border: solid 1px var(#ffffff);
    }
    
    .producto{    
        padding: 5px;
        background: gray;    
    }
    
    a.producto .descripcion{
        position: absolute;
        top: 45%;
        width: 90%;
        height: 128px;
    
        color: rgb(0, 0, 0);
        overflow-y: auto;
        padding: 5px;
        text-transform: capitalize;
    }
    
    a.producto .precio{
        position: absolute;
        bottom: 10px;
        height: 20px;
        width: 90%;
        text-align: center;
    
        color: rgb(17, 50, 41);
        font-weight:bold;
        font-size: 15px;
        
    }
    
    section{
        position: relative;
        min-height: 400px;
    }
    
    /*.container{ border: solid 1px pink; }*/
    
    .container{
        height: 40vh;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px;   
    }
    .item{ 
        border: solid 2px rgb(87, 224, 110);
        display: flex;
        align-items:center;
        justify-content: center;
        min-height: 100px;
        width: 100px ;    
    }
    
    section.productos{
        height: 50%;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 4px;
    }
    
    .productos .producto{
        position: relative;
        border: solid 1px #D33700;
        background-color: #F7DA93;
        border-radius: 10px;
        height: 300px;
        width: 200px;
    }
    
    a.producto:hover{ border-color: var(red);}
    
    .productos .producto img{
        position: relative;
        display: block;
        margin: auto;
        width: 65%;
        max-height: 250px;
    }
    
    .producto .nombreProducto{
        position: absolute;
        top: 50%;
        width: 95%;
        height: 100px;
        text-align: center;
        font-size: 15px;
        margin: 0;
        padding: 5px;
        color: #aaa;
        background-color: darkgray;
        overflow: auto;
    }
    
    .producto:link span, .producto span{
        position: absolute;
        display: block;
        width: 80%;
        padding: 7px;
        border-radius: 10px;
        border: solid 1px var(#D33700);
        background-color: var(grid-area);
        bottom: 5px;
        left: 10px;
        text-align: center;
        text-decoration: none;
        color: var(#FFC431);
        display: none;
    }
    
    .producto:hover .botom{background-color: #D33700;}
    
    .producto .precio{
        position: absolute;
        width: 90%;
        text-align: center;
        font-size: 17px;
        font-weight: bold;
        height: 25px;
        bottom: 4px;
        color: #aaa;
    }
    
    .pagina{border: solid 1px #D33700}
    
    
    .tienda header{border: solid 1px #D33700;
        border-width: 0 0 1px 0 ;}
    .tienda footer{border: solid 1px #D33700;
        border-width: 1px 0 0 0 ;}
    .tienda aside{border: solid 1px #D33700;
        border-width: 0 1px 0 0;}
    
    
    .tienda{
        display: grid;
        grid-template-areas: 
        "header header header header"
        "aside main main main"
        "footer footer footer footer"
        ;
       grid-template-columns: 200px 1fr 1fr 1fr;
    }
    
    .tienda header{grid-area: header;}
    .tienda aside{grid-area: aside;}
    .tienda main{grid-area: main;}
    .tienda footer{grid-area: footer;}
    
    .tienda aside ol{margin: 0; padding: 0;}
    .tienda aside ol li{
        position: relative;
        display: block;
        padding-left: 3px;
    }
    
    .tienda aside a, .tienda aside a:link{
        position: relative;
        display: block;
        padding: 5px;
        border: solid 1px rgb(33, 79, 67);
        border-width: 0 0 1px 0;
        text-decoration: none;
        color: rgb(33, 79, 67);
    }
    
    footer{
        position: relative;
        display: grid;
        grid-template-areas: 
        "marca contacto mapaSitio"
        "autor autor autor"
        ;
        grid-template-columns: 1fr 1fr 1fr;
    }
    
    footer{
        border-top: 1px solid wheat;
        background-color: #D33700;
        font-size: 12px;
        font: color #FFC431;
    }
    footer .marca{
        grid-area: marca;
        color: #FFC431;
    }
    footer .contacto{
        grid-area: contacto;
        color: #FFC431;
    }
    footer .mapaSitio{
        grid-area: mapaSitio;
        color: #FFC431;
    }
    footer .autor{ 
        grid-area: autor;
        color: #FFC431;
    }
    
    
    footer .marca{text-align: center;}
    footer .contacto{border-left: 1px solid;padding: 10px;}
    footer .mapaSitio{border-left: 1px solid;padding: 10px;}
    footer .autor{
        border-top: 1px solid;
        padding: 10px;
        text-align: right;
    }
    
    footer a, footer a:link{
        text-decoration: none;
        color: gray;
    }