/* Colores #3C418F y #1CACE3  */
:root {
  --primario: #3C418F;
  --secundario: #1CACE3;
  --terceario: #d8f1fa;
}

.wrapper {
  display: grid;
  box-sizing: border-box;

}

.caja{
  height: 40vh;
}

.cajTex{
  box-sizing: border-box;
  height:80vh;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;

}
/* PRIMERA SECCION ************************************** */
.contenedor0 {
  display: grid;
  grid-template-areas:
    'caja0-0 caja0-1 ';
}

.caja0-0 {
  grid-area: caja0-0;
  text-align: right;
  padding: 1rem 1.5rem;
  color: white;
}

.caja0-1 {
  grid-area: caja0-1;
  padding: 5% 10%;
  display: flex;
  flex-direction: column;
}

.foto {
  padding: 70px 0;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  z-index: -1;
}

.imagen1 {
  padding: 0;
  z-index: -1;
}

.textoAbout {
  padding: 5% 10%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: justify;
}


.btnInicio {
  margin-left: auto;
  margin-right: auto;
}

/*CONTENEDOR 1 ****************************************** */
.contenedor1 {
  display: grid;
  grid-auto-columns: 30% 30% 20% 20%;
  grid-template-areas:
    'caja-a caja-a caja-b caja-c'
    'caja-a caja-a caja-d caja-e';

}

.caja {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  align-items: center;
}

.caja-a {
  grid-area: caja-a;
  background-color: var(--secundario);
  padding: 1rem 1.5rem;
  color: white;
}

.caja-b {
  grid-area: caja-b;
  align-items: center;
}

.caja-c {
  grid-area: caja-c;
  background: url('../imagenes/powder-01.jpg');
  background-size: cover;
  background-position: center;
}

.caja-d {
  grid-area: caja-d;
  background: url('../imagenes/pills_bottle.jpg');
  background-size: cover;
  background-position: center;
}

.caja-e {
  grid-area: caja-e;
}

.fotosCuadro {
  max-width: 180px;
}

/* Contenedor2 ********************************************* */
.contenedor2 {
  display: grid;
  grid-auto-columns:  20% 20% 30% 30%;
  grid-template-areas:
    'caja-c2 caja-b2 caja-a2 caja-a2'
    'caja-e2 caja-d2 caja-a2 caja-a2';
}

.caja-a2 {
  grid-area: caja-a2;
  background-color: var(--primario);
  padding: 1rem 1.5rem;
  color: white;
}

.caja-b2 {
  grid-area: caja-b2;
  align-items: center;
}

.caja-c2 {
  grid-area: caja-c2;
  background: url('../imagenes/powder2-01.jpg ');
  background-size: cover;
  background-position: center;

}

.caja-d2 {
  grid-area: caja-d2;
  background: url('../imagenes/plants.jpg');
  background-size: cover;
  background-position: center;
}

.caja-e2 {
  grid-area: caja-e2;
}

/* CONTENEDOR 3 ******************************************************* */
.contenedor3 {
  display: grid;
  grid-auto-columns:   30% 30% 20% 20%;
  grid-template-areas:
    'caja-a3 caja-a3 caja-b3 caja-c3'
    'caja-a3 caja-a3 caja-d3 caja-e3';
}

.caja-a3 {
  grid-area: caja-a3;
  background-color: var(--secundario);
  padding: 1rem 1.5rem;
  color: white;
}

.caja-b3 {
  grid-area: caja-b3;
}

.caja-c3 {
  grid-area: caja-c3;
  background: url('../imagenes/nutraceuticals.jpg');
  background-size: cover;
  background-position: center;
}

.caja-d3 {
  grid-area: caja-d3;
  background: url('../imagenes/gotas-01.jpg');
  background-size: cover;
  background-position: center;
}

.caja-e3 {
  grid-area: caja-e3;
}

/* CONTENEDOR 4 ******************************************** */
.contenedor4{
    grid-template-columns: 60% 20% 20%;
}

/* MEDIA QUERIES************************************** */

@media only screen and (max-width: 1050px){
  .neutra {
    font-size: 1.2rem;}
}

@media only screen and (max-height: 700px) {
  .fotosCuadro{
    max-width: 150px;
  }

  .cajTex{
    min-height: 600px;
  }
  .caja{
    min-height: 300px;
  }
}

@media only screen and (max-width: 992px) {
  .contenedor2, .contenedor3, .contenedor1{
  box-sizing: border-box;

  }

  .contenedor4{
      grid-template-columns: 50% 50%;
  }

  .caja {
    height: 62vw;
  }

  .cajTex{
    height: auto;
    padding: 20px;
  }

  .contenedor0 {
    grid-template-areas:
      'caja0-1'
      'caja0-0'
    ;
  }

  .contenedor1 {
    grid-auto-columns:  50% 50%;
    grid-template-areas:
      'caja-a caja-a'
      'caja-b caja-c'
      'caja-d caja-e';
  }

  .contenedor2 {
    grid-auto-columns:  50% 50%;
    grid-auto-rows: auto;
    grid-template-areas:
      'caja-a2 caja-a2'
      'caja-c2 caja-b2'
      'caja-e2 caja-d2';
  }

  .contenedor3 {
    grid-auto-columns:  50% 50%;
    grid-auto-rows: auto;
    grid-template-areas:
      'caja-a3 caja-a3 '
      'caja-b3 caja-c3'
      'caja-d3 caja-e3';
  }

}

@media only screen and (max-width: 442px){
  .fotosCuadro{
    height: 40%;
  }
}