/*REGLAS GENERALES DEL HTML*/
*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

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

    --font-size-title-repsonsive: 1.2rem;
    --font-size-regular-responsive: 1rem ;

    --space-sections: 2.5rem;
    --space-inner: 1rem;

    --color-black: #1A1A1A;
    --color-gray: #4d4e4d;
    --color-white: #ffffff;
    --color-blue: #006b80;  
    --color-orange:#EB5B25;  
}

html{
    font-size: 62.5%;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif
}

/*HEADER*/

.header{
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
}

.header img{
    width: 100%;
}

/*SECCION BARRA DE COLOR*/
.barra_color{
    background-color: var(--color-orange) ;
    margin: var(--space-sections)  auto;
    height: 6rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.barra_color p{
    text-align: center;
    color: var(--color-white);
    font-size: var(--font-size-subtitle);
}


/*SECCION ICÓNOS*/

.seccion_iconos{
    width: 90%;
    display: flex;
    justify-content: center;
    margin: var(--space-sections) auto;
    align-items: flex-start;

}

.seccion_iconos_contenedores{
    width: 80%;
    max-width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;

}

.contenedor_seccion{
    margin: var(--space-inner);
}

.contenedor_seccion img{
    max-width: 50vh;
}

.seccion_iconos_contenedores p{
    font-size: var(--font-size-regular);
    color: var(--color-gray);
    text-align: center;
}



/*ICONOS COFE SHOP*/

.iconos_CoffeShop{
    background-color: var(--color-orange);
    display: flex;
    flex-direction: column;
    margin: var(--space-sections) auto;
}

.iconos_CoffeShop h1{
    color: var(--color-white);
    font-size: var(--font-size-subtitle);
    text-align: center;
    margin: var(--space-inner);
}

.contenedor_iconos_cofeeShop {
    display: flex;

}


.card_coffeShop p{
    color: var(--color-white);
    font-size: var(--font-size-regular);
    text-align: center;
    margin: var(--space-inner);
}

.card_coffeShop{
    display: flex;
    width: 70%;
    height: auto;
    
    margin: var(--space-sections) auto;

    justify-content: center;
    align-items: center;
    margin: 0 auto;
}


.contenedor_iconos_cofeeShop img{
    width: 35vw;    
} 

/*Nespresso*/

.banner_nesspreso{
    width: 100vw;
    display: flex;
    justify-content: center;
    margin: var(--space-sections) auto;
}

.banner_nesspreso img{
    max-width: 100%;
    height: auto;
    border-radius: 6rem;
    box-shadow: 2rem 2rem 4rem var(--color-gray);

}

/*VIDEO*/

.video{
    display: flex;
    justify-content: center;
    margin: var(--space-sections) auto;
}

/*ICONOS FOTER*/

.iconos_caracteristicas{
    display: flex;
    flex-direction: column;
}

.iconos_caracteristicas h1{

    font-size: var(--font-size-subtitle);
    text-align: center;
    margin: var(--space-inner);
}

.iconos_caracteristicas h3{

    font-size: var(--font-size-regular);
    text-align: center;
    margin: var(--space-inner);
}
.container_iconos{
    display: flex;
    justify-content: center;
    margin: var(--space-sections) auto;
    width: 80%;
}

.container_iconos_color{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: var(--space-sections) auto;
    width: 80%;
}

.container_iconos_color .card_iconos{
    width: 40rem;
    color: var(--color-orange);
    text-align: center;
}

.container_iconos_color img{
    width: 25rem;
    margin: var(--space-sections);

}

.container_iconos img{
    width: 100%;
    height: auto;
    
}


.iconos_caracteristicas{
    width: 100vw;
    display: flex;
    flex-direction: column;
    margin: var(--space-sections) auto;
}

.iconos_caracteristicas_titulo h1{
    text-align: center;
    font-size: var(--font-size-title);
}

.container_iconos_caracteristicas{
 
    display: flex;
    justify-content: space-evenly;
    margin: var(--space-inner);
    padding: 1rem;
}

.container_iconos_caracteristicas figure h3{
    font-size: var(--font-size-subtitle);
    text-align: center;
}

.container_iconos_caracteristicas figure img{
    width: 20vw;
    display: flex;
    justify-content: space-evenly;
    margin: var(--space-inner);
    padding: 1rem;
}

/*FOOTER*/

.footer img{
    display: flex;
    justify-content: center;
    margin: var(--space-inner) auto;
width: 80%;

}



@media screen and (max-width: 800px){

    .header{
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 auto;
    }
    
    .header img{
        width: 80%;
    }

    .barra_color{
       width: 100%;
    }

    .barra_color p{
        font-size: var(--font-size-title-repsonsive);
        margin: 0 auto;
    }



    .seccion_iconos{
        display: flex;
        flex-direction: column;
    }
    
    .seccion_iconos_contenedores{
        width: 80%;
        display: flex;
        flex-direction: column;
        margin: 0 auto;
    }

    .iconos_CoffeShop h1{
        font-size: var(--font-size-title-repsonsive);
    }
    .contenedor_seccion{
        justify-content: center;
        align-items: center;
        text-align: center;
    }


    .contenedor_iconos_cofeeShop{
        width: 100%;
        display: flex;
        flex-direction: column;
    }

    .card_coffeShop{
        width: 70vw;    
    }

    .card_coffeShop img{
        width: 50vw;    
    }

    .card_coffeShop p{
        font-size: var(--font-size-regular);
        margin: var(--space-inner) auto;
        text-align: center;

    }

    .container_iconos_color{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        margin: var(--space-sections) auto;
        width: 80%;
    }
    .container_iconos{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .card_iconos{
        margin: var(--space-sections) auto;
    }


    .banner_nesspreso img{
    max-width: 70vh;
    height: auto;
}
}