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

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

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

    --color-black: #1A1A1A;
    --color-gray: #666666;
    --color-white: #ffffff;
    --color-blue: #006b80;  
    --color-orange:#ff5100;  
}

html{
    font-size: 62.5%;
    background-color: var(--color-white);
}
/*HEADER*/

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

.header img{
    width: 80%;
}

/*PÁRRAFO INTRODUCCIÓN*/
.seccion_introduccion{
    margin:var(--space-section) auto;
    text-align: center;
}
.seccion_introduccion b{
    color: var(--color-orange);
}

.seccion_introduccion h1{
    font-size: var(--font-size-subtitle);
    color: var(--color-gray);
}

.seccion_introduccion p{
    font-size: var(--font-size-regular);
    color: var(--color-gray);
}
/*SECCIÓN DE IMÁGENES DE INTRODUCCIÓN*/
.imagenes-intro{
    width:70%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: var(--space-section) auto;
}


.imagenes-intro__contenedor{
    margin: 0.3rem auto;
}

.imagenes-intro__contenedor img{
    max-width: 30rem;
    margin: 0.1rem;
}

/*Banner airflow*/

.banner_airflow{
    display: flex;
    flex-direction: column;
    margin: var(--space-section) auto;
}

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

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

.banner_airflow img{
    margin: 2rem auto;
    width: 40%;
}

/*Banner modos de cocción*/
.banner_coccion{
    display: flex;
    flex-direction: column;
    margin: var(--space-section) auto;
}

.banner_coccion h1{
    text-align: center;
    font-size: var(--font-size-regular);
    color: var(--color-blue);
}

.banner_coccion p{
    text-align: center;
    font-size: var(--font-size-regular);
    color: var(--color-gray);
    margin: 1rem;
}


.banner_coccion img{
    margin: 0 auto;
    width: 60%;
}

.img_responsive{
    display: none;
}
/*SECCIÓN CARACTERÍSTICAS*/

.caracteristicas{

    width: 80%;
    margin: 2rem auto;
    border: #008985 solid 1rem;
    border-radius: 3rem;
    margin: var(--space-section) auto;
    padding: var(--inner-space);

}

.caracteristicas__titulo {
    grid-column: 1 / -1; /* La celda del título ocupa todas las columnas */
}
  
.caracteristicas__titulo h1 {

    text-align: center;
    color: var(--color-blue);
    font-size: var(--font-size-subtitle);
    margin: 1rem;
}
  
.caracteristicas__iconos__contenedor{
    
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    max-width: 80%;
    margin: 0 auto;
}
  
  .caracteristicas__iconos img{
    max-width: 20rem;
  }

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

    flex-basis: 30%;
    margin: 10px;
    text-align: center;
  }

  .footer-producto{
    display: flex;
    justify-content: center;
    margin: 0 auto;
  }

  /*FOOTER INSTITUCIONAL*/
  .footer{
    margin: 1rem auto 0 auto;
    width: 80%;
    border-radius: 2rem;
    background-color: var(--color-orange);
    color: var(--color-white);
    font-size: var(--font-size-regular);
    text-align: center;
}

    .footer img{
        width: 30%;
    }
  
@media screen and (max-width: 800px){

    .header{
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 auto;
    }
    
    .header img{
        width: 80%;
    }
    
 
    .imagenes-intro {
        display: flex;
    }
      
    .imagenes-intro__contenedor {
        flex-basis: 33.33%;
        margin: 0;
        text-align: left;
    }

    .banner_airflow img{
        margin: 0 auto;
        width: 60%;
    }


    .banner_coccion img {
        display: none;
      }
      
      .banner_coccion img.img_responsive {
        display: block;
      }


      .caracteristicas__iconos__contenedor{
    
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        max-width: 80%;
        margin: 0 auto;
    }

    .footer-producto{
        display: flex;

        flex-direction: column;
        text-align: center;
        margin: 0 auto;
    }

    .footer-producto__img img{

        max-width: 80%;
    }
    
}