/*---------------ARCHIVO RAÍZ---------------*/

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

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

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

    --color-black: #1A1A1A;
    --color-gray: #7C7C7C;
    --color-white: #ffffff;
    --color-green: #006680;  
    --color-red:#DC0D15;  
}

/*REGLAS GENERALES HTML*/

html{
    font-size: 62.5%;
    font-family: Roboto, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.bloque1{
    margin: var(--space-sections) auto;
    text-align: center;
}

h1{
    color: var(--color-green);
    font-size: var(--font-size-title);
    text-align: center;
}

h2{
    color: var(--color-green);
    font-size: var(--font-size-subtitle);
    text-align: center;
}

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


/*HEADER*/

.header figure img{
    width: 100vw;
    border-radius: 3rem;
    
}


/*BLOQUE 1 INTRO*/

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

}

.bloque1 P{
    width: 70vw;
    margin: var(--space-inner) auto
}




/*BLOQUE 2 ÍCONOS*/

.bloque2{
    width: 100vw;
    margin: var(--space-sections) auto;
}


    .container_iconos{
        width: 70%;
        display: grid;
        margin: var(--space-sections) auto;
        grid-template-columns: repeat(4, 4fr);
    }

    .container_iconos figure{
        display: flex;
        flex-direction: column;
    }

    .container_iconos figure img{
        min-width: 10vw;
        max-width: 15vw;
    }

    .container_iconos figure figcaption p{
        min-width: 10vw;
        max-width: 15vw;
    }

      .container_iconos figure figcaption p b{
        color: var(--color-green);
    }

    .iconos_especial{
        width: 60vw;
        border: solid 0.5rem var(--color-green);
        border-radius: 1rem;
        box-shadow: 0.5rem 0.5rem 1rem var(--color-gray);
        margin: 0.5rem auto;
        padding: var(--space-inner);

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

    }
    .iconos_especial img{
        min-width: 8vw;
        max-width: 13vw;
        margin: 2rem;
    }

    .iconos_especial p b{
        color: var(--color-green);
    }

/*BLOQUE 3 EXHIBIDOR*/
    .bloque3{
        width: 100vw;
        margin: var(--space-sections) auto;
        background: linear-gradient(to right, var(--color-green), var(--color-white),var(--color-green));
    }

    .bloque3 figure img{
        width: 80vw;
        border-radius: 1rem;
        display: flex;
        justify-content: center;
        margin: 0 auto;

    }
/*BLOQUE 4 GARANTÍA*/

.bloque4{
    margin: var(--space-sections) auto;
    width: 80vw;
    display: flex;
    justify-content: space-around;
}

.bloque4 figure{
    width: 20vw;
    display: flex;
    flex-direction: column;
}

.bloque4 figure img{
    margin: 0 auto;
    height: 18vh;
}

/*BLOQUE 5 FOOTER*/

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

footer img{
    display: flex;
    width: 25vw ;
    margin: 0.5rem auto;
}

footer p{
   color: var(--color-white);
}

@media screen and (max-width:800px) {
    
    .bloque2{
        width: 60vw;
        margin: var(--space-inner) auto;
    }
    .container_iconos{
        display: grid;
        grid-template-columns: repeat(2, 2fr);

        width: 100vw;
        margin: 0 auto;
    }

    .container_iconos figure p{
        width: 50vw;

    }
}