@font-face {
    font-family: 'Oxygen';
    src: url(https://fonts.googleapis.com/css2?family=Oxygen&display=swap);
}

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

:root{
    --font-size-title: 3.6rem;
    --font-size-subtitle:2.4rem;
    --font-size-regular: 1.4rem;

    --space-sections: 4rem;
    --space-inner: 2rem;

    --color-black: #1A1A1A;
    --color-gray: #4B4B4B;
    --color-white: #ffffff;
    --color-blue: #006881;  
    --color-red:#E30613;  
}

html{
    font-size: 62.5%;
    font-family: Oxygen;
}

/*HEADER*/
.bloque1_header figure img{
    width:100vw;
}


/*BLOQUE 2 INTRODUCCIÓN COLORFOOD*/

.bloque2_introduccion{
    width: 90vw;
    margin: var(--space-sections) auto;
}

.bloque2_introduccion p{
    font-size: var(--font-size-subtitle);
    margin: var(--space-inner) auto;
    color: var(--color-gray);
    text-align: center;
}

.bloque2_introduccion img{
    margin: var(--space-sections) auto;
    width: 80vw;

    display: flex;
    justify-content: center;
    
}

.bloque3_descripcion_general figure{
    margin: var(--space-sections) auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.bloque3_descripcion_general figure img{
    width: 80vw;
}

.bloque4_banner_personalizado figure img{
    margin: var(--space-sections) auto;
    width: 90vw;

    display: flex;
    justify-content: center;
}

.bloque5_descripcion_mango figure{

    display: flex;
    justify-content: center;
    align-items: center;
    
}

.bloque5_descripcion_mango figure img{
    width: 30vw;
}

.bloque5_descripcion_mango figure  figcaption p{
    width: 50vw;
    font-size: var(--font-size-subtitle);
    color: var(--color-gray);
}

.bloque6_descripcion_aseo figure{

    display: flex;
    justify-content: center;
    align-items: center;
    
}

.bloque6_descripcion_aseo figure img{
    width: 30vw;
}

.bloque6_descripcion_aseo figure  figcaption p{
    width: 50vw;
    font-size: var(--font-size-subtitle);
    color: var(--color-gray);
}

.bloque7_video video{
    margin: var(--space-sections) auto;
    width: 50vw;
    display: flex;
    justify-content: center;
    border-radius: 2rem;
    box-shadow: 1rem 2rem 5rem var(--color-gray);
}

.footer{
    width: 80vw;
    height: 20vh;
    background-color: var(--color-red);
    margin: var(--space-sections) auto;
    margin-bottom: 0;
    border-radius: 4rem;
}

.footer figure{
    margin: var(--space-inner) auto;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

}

.footer figure img{
    margin: var(--space-inner) auto;

    display: flex;
    justify-content: center;
    align-items: center;
    width: 20vw;
}

.footer figure figcaption{
    color: var(--color-white);
    font-size: var(--font-size-regular);
    text-align: center;
}