*{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    font-family: roboto;

}

html{
    font-size: 62.5%;
}

:root{
    --font-size-regular: 1.6rem;
    --font-size-title: 2.5rem;
    --font-size-subtitle:2.2rem;
    --font-size-h3: 2rem;
    --color-blue: #162950;
    --color-black: #000000;
    --color-white: #FFFFFF;   
};


.body{
    display: grid;

    grid-template-areas:'cabecera'
                        'div_1'
                        'div_2'
                        'div_3'
                        'div_4'
                        'pie_pagina';
        
}

h2{
    font-size: var(--font-size-subtitle);
    color: var(--color-blue);
}

h3{
    font-size: var(--font-size-h3);
    color: var(--color-blue)
}

.cabecera{
    grid-area: cabecera;
}

.imagen_header{
    max-width: 100%;
}

element.style {
    width: 100vw;
}

.div_1{
    margin: 1%;
    grid-area: div_1;
    text-align: center;
    font-size: var(--font-size-regular);
}

.div_2{

     grid-area: div_2;
     text-align: center;
}


.div_3{
    grid-area: div_3;


    text-align: center;
}

.title{
    font-size: var(--font-size-title);
    color: var(--color-blue)
}
.logo_energy{
    margin-top: 1%;
    width: 25vw;
    box-shadow: 1px solid gray;
}

.div_4{
    margin-top: 2%;
    display: flex;
    grid-area: div_4;

    text-align: center;

    justify-content: center;

    margin-bottom: 2%;

};


.columna1,
.columna3{
    text-align: center;
}

.texto_referencia{
    font-size: var(--font-size-regular);
    color: var(--color-blue);
}



.descripcion_productos{

    text-align: center;
}


.columna2{
    margin: 0 1% 0 1%px;
}

p{
    font-size: var(--font-size-regular);
}


.footer{
    grid-area: pie_pagina;

    background-color: #EC5423;
}

.pie_superior{
    width: 100%;    
}

.pie_inferior{
    display: flex;
    justify-content: center;
}

.logo_imusa{
    width: 30%;
}

.texto_legal{
    margin-top: 2%;
    color: white;
}