.sec5, .articulo, .section3 .hFundamentos {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/*REGLAS GENERALES*/
* {
  margin: 0;
  padding: 0;
}

.menu {
  position: fixed;
  z-index: 1;
  top: 0;
  right: 0;
  background-color: rgba(242, 247, 239, 0.6);
  border-radius: 20px;
  height: 50px;
  margin: 10px;
  padding-left: 10px;
  padding-right: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}
@media screen and (max-width: 768px) {
  .menu {
    justify-content: space-between;
    width: 85%;
    align-items: center;
    border-radius: 10px;
    height: 4%;
    right: auto;
    left: 6%;
  }
}
@media screen and (max-width: 576px) {
  .menu {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 85%;
    align-items: center;
    border-radius: 10px;
    margin: 0 auto;
    height: 4%;
    right: auto;
    left: 7%;
  }
}

body {
  margin: 0;
  padding: 0;
  font-family: Gabriela, "Open Sans", sans-serif;
  background: rgb(220, 229, 226);
  background: linear-gradient(0deg, rgb(220, 229, 226) 10%, rgb(72, 122, 41) 61%, rgb(41, 78, 10) 100%);
}

footer {
  background-color: rgba(101, 143, 75, 0.6);
  padding: 80px;
  font-size: 20px;
  border-top: 5px rgba(98, 141, 71, 0.6) solid;
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
}
@media screen and (max-width: 768px) {
  footer {
    display: flex;
    justify-content: center;
    padding: 20px;
    font-size: 15px;
  }
}
@media screen and (max-width: 576px) {
  footer {
    display: flex;
    justify-content: center;
    padding: 20px;
    font-size: 15px;
  }
}

a {
  color: #13070A;
  text-decoration: none;
}
a:hover {
  border-bottom: 3px solid green;
  color: #265301;
  cursor: pointer;
  font-weight: bold;
}
a:focus {
  border-bottom: 5px solid;
}
a:active {
  background: #265301;
  color: #CDFEAA;
}

p {
  color: #13070A;
  font-size: 15px;
}
@media screen and (max-width: 768px) {
  p {
    text-align: center;
  }
}

h1 {
  padding: 30px;
  font-size: 50px;
}
@media screen and (max-width: 768px) {
  h1 {
    padding: 0%;
    font-size: 30px;
  }
}
@media screen and (max-width: 576px) {
  h1 {
    padding: 0%;
    font-size: 30px;
  }
}

h3 {
  background-color: #D0AEBB;
  color: #ffffff;
  padding: 5px;
  letter-spacing: 4px;
  border-radius: 50% 20%/10% 40%;
  font-size: 30px;
}

h4 {
  background-color: #C5DFD6;
  color: #13070A;
  font-style: oblique;
  letter-spacing: 2px;
  padding: 20px;
  border-radius: 3px;
}

@media screen and (max-width: 768px) {
  .logo1 {
    display: none;
  }
}

.section1 {
  padding-bottom: 10%;
}
@media screen and (max-width: 768px) {
  .section1 {
    padding-bottom: 0;
  }
}
@media screen and (max-width: 576px) {
  .section1 {
    padding-bottom: 0;
  }
}
.section1 #videoPrincipal {
  width: 100%;
  min-width: 100%;
  min-height: 100%;
  position: absolute;
  z-index: -1;
}
.section1 .logoPrincipal {
  margin-left: 35%;
  margin-top: 10%;
  transition: all 1s !important;
}
.section1 .logoPrincipal:hover {
  transform: scale(1.05) !important;
}
@media screen and (max-width: 768px) {
  .section1 .logoPrincipal {
    margin-top: 80px;
    margin-bottom: 450px;
    margin-left: 10%;
    width: 80%;
    height: 29.2%;
  }
}
@media screen and (max-width: 576px) {
  .section1 .logoPrincipal {
    margin-top: 80px;
    margin-bottom: 450px;
    margin-left: 10%;
    width: 80%;
    height: 29.2%;
  }
}
.section1 .johnmu {
  padding-bottom: 40px;
  background-color: transparent;
  font-size: calc(0.8em + 0.8vw);
  color: #ffffff;
  text-align: center;
  margin-top: 23%;
  transition: all 1s;
}
.section1 .johnmu:hover {
  transform: translate(0px, -20px);
}
@media screen and (max-width: 768px) {
  .section1 .johnmu {
    padding-bottom: 5px;
    background-color: transparent;
    font-size: calc(1.2em + 1.2vw);
    color: white;
    text-align: center;
    margin-top: 1%;
    margin-bottom: 80px;
    margin-left: 20px;
    margin-right: 20px;
  }
}
@media screen and (max-width: 576px) {
  .section1 .johnmu {
    padding-bottom: 5px;
    background-color: transparent;
    font-size: calc(1.2em + 1.2vw);
    color: white;
    text-align: center;
    margin-top: 1%;
    margin-bottom: 80px;
  }
}

.section2 {
  display: grid;
  padding: 20px;
  grid-column-gap: 1%;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: "artId artSent artVal";
}
@media screen and (max-width: 768px) {
  .section2 .imgIndex {
    width: 100%;
    height: 100%;
  }
}
@media screen and (max-width: 576px) {
  .section2 .imgIndex {
    width: 100%;
    height: 100%;
  }
}
@media screen and (max-width: 768px) {
  .section2 {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 3fr;
    grid-template-areas: "artId" "artSent" "artVal";
    justify-content: center;
    align-items: center;
    grid-gap: 15px;
  }
}
@media screen and (max-width: 576px) {
  .section2 {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 3fr;
    grid-template-areas: "artId" "artSent" "artVal";
    justify-content: center;
    align-items: center;
    grid-gap: 15px;
  }
}

.section3 {
  display: grid;
  padding: 20px;
  grid-column-gap: 1%;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 0.1fr 1fr;
  grid-template-areas: "hFundam hFundam hFundam" "artAyur artReik artBam";
}
@media screen and (max-width: 768px) {
  .section3 {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: "hFundam" "artAyur" "artReik" "artBam";
    width: 100%;
    justify-content: center;
    align-items: center;
  }
}
@media screen and (max-width: 576px) {
  .section3 {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: "hFundam" "artAyur" "artReik" "artBam";
    width: 100%;
    justify-content: center;
    align-items: center;
  }
}
.section3 .hFundamentos {
  grid-area: hFundam;
  border: 10px solid #C5DFD6;
  background-color: #C5DFD6;
  margin-bottom: 20px;
  transition: all 1s;
}
.section3 .hFundamentos:hover {
  animation: fondosFundam 10s;
}
@media screen and (max-width: 768px) {
  .section3 .hFundamentos h1 {
    text-align: center;
  }
}
@media screen and (max-width: 576px) {
  .section3 .hFundamentos h1 {
    text-align: center;
  }
}

@keyframes fondosIndex {
  50% {
    background-color: #faf0f4;
  }
}
@keyframes fondosFundam {
  20% {
    background-color: #D0AEBB;
  }
}
.articulo {
  border: 10px solid rgba(82, 116, 61, 0.4);
  background-color: #C5DFD6;
  border-radius: 7px;
  padding: 10px;
  transition: all 1s;
}
.articulo img {
  max-width: 100%;
  object-fit: cover;
  height: 400px;
  padding-bottom: 10px;
}

.aIdentidad {
  grid-area: artId;
}
.aIdentidad:hover {
  transform: scale(1.02);
  animation: fondosIndex 10s;
}

.aSentido {
  grid-area: artSent;
}
.aSentido:hover {
  transform: scale(1.02);
  animation: fondosIndex 10s;
}

.aValores {
  grid-area: artVal;
}
.aValores:hover {
  transform: scale(1.02);
  animation: fondosIndex 10s;
}

.aAyurveda {
  grid-area: artAyur;
}
.aAyurveda:hover {
  transform: scale(1.02);
  animation: fondosIndex 10s;
}

.aReiki {
  grid-area: artReik;
}
.aReiki:hover {
  transform: scale(1.02);
  animation: fondosIndex 10s;
}

.aBambu {
  grid-area: artBam;
}
.aBambu:hover {
  transform: scale(1.02);
  animation: fondosIndex 10s;
}

.contacto {
  padding-top: 3%;
  padding-bottom: 3%;
  padding-left: 5%;
  font-size: 44px;
  color: white;
  background-color: rgba(82, 116, 61, 0.6);
}
@media screen and (max-width: 768px) {
  .contacto {
    display: flex;
    justify-content: center;
  }
}
@media screen and (max-width: 576px) {
  .contacto {
    display: flex;
    justify-content: center;
  }
}

.sectionContacto {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  margin: 1%;
}
@media screen and (max-width: 768px) {
  .sectionContacto {
    flex-direction: column;
    align-items: center;
    justify-content: start;
  }
}
@media screen and (max-width: 576px) {
  .sectionContacto {
    flex-direction: column;
    align-items: center;
    justify-content: start;
  }
}
.sectionContacto .info {
  padding-top: 50px;
  padding-left: 50px;
  background-color: #dce5e2;
  font-size: 30px;
}
@media screen and (max-width: 768px) {
  .sectionContacto .info {
    display: flex;
    justify-content: center;
    padding: 2px;
    background-color: #dce5e2;
    font-size: 30px;
  }
}
@media screen and (max-width: 576px) {
  .sectionContacto .info {
    display: flex;
    justify-content: center;
    padding: 2px;
    background-color: #dce5e2;
    font-size: 30px;
  }
}
.sectionContacto .info2 {
  border-radius: 50% 20%/10% 40%;
  padding: 50px;
  background-color: #C5DFD6;
  font-size: 17px;
  width: 70%;
  line-height: 35px;
}
@media screen and (max-width: 768px) {
  .sectionContacto .info2 {
    background-color: #C5DFD6;
    font-size: 15px;
    padding: 10px;
    width: 80%;
  }
}
@media screen and (max-width: 576px) {
  .sectionContacto .info2 {
    background-color: #C5DFD6;
    font-size: 15px;
    padding: 10px;
    width: 80% s;
  }
}
.sectionContacto .mapa {
  border-radius: 14% 35%/35% 14%;
  padding: 50px;
  width: 60%;
}
@media screen and (max-width: 768px) {
  .sectionContacto .mapa {
    padding: 50px;
    width: 100%;
  }
}
@media screen and (max-width: 576px) {
  .sectionContacto .mapa {
    padding: 50px;
    width: 100%;
  }
}
.sectionContacto .iconoContacto {
  width: 40px;
  height: 40px;
  padding: 5px;
}

/*SERVICIOS*/
.section4 {
  margin: 7%;
  background-color: #D0AEBB;
  border-radius: 3%;
  padding: 3%;
}
.section4 .plan {
  color: #dee4da;
}
@media screen and (max-width: 768px) {
  .section4 .plan {
    padding-bottom: 30px;
    padding-top: 50px;
    font-size: 35px;
    color: #dee4da;
    align-items: center;
  }
}
@media screen and (max-width: 576px) {
  .section4 .plan {
    padding-bottom: 30px;
    padding-top: 50px;
    font-size: 35px;
    color: #dee4da;
    align-items: center;
  }
}
.section4 .plan .planIntegral {
  padding-bottom: 30px;
  padding: 30px;
  font-size: 30px;
  display: flex;
  flex-direction: column;
}
@media screen and (max-width: 768px) {
  .section4 .plan .planIntegral {
    font-size: 25px;
    display: flex;
    flex-direction: column;
  }
}
@media screen and (max-width: 576px) {
  .section4 .plan .planIntegral {
    font-size: 20px;
    display: flex;
    flex-direction: column;
  }
}
@media screen and (max-width: 768px) {
  .section4 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 2%;
    padding: 3%;
  }
}
@media screen and (max-width: 576px) {
  .section4 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 2%;
    padding: 3%;
  }
}

.actividades {
  display: flex;
  justify-content: center;
  margin: 30px;
  color: #dee4da;
  background-color: #D0AEBB;
  font-size: 250%;
  padding: 2%;
  border-radius: 3%;
}
@media screen and (max-width: 768px) {
  .actividades {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px;
    padding: 2%;
    border-radius: 3%;
  }
}
@media screen and (max-width: 576px) {
  .actividades {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 30px;
    padding: 2%;
    border-radius: 3%;
  }
}

.section5 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas: "gReiki gGemas gMedita" "gAkashi gAroma gMusico";
  grid-column-gap: 2%;
  grid-row-gap: 2%;
  justify-content: center;
  margin: 1%;
  padding-bottom: 10%;
}
.section5 button {
  font-size: 25px;
  font-style: italic;
  --bs-btn-bg: $color-button;
  --bs-btn-border-color: white;
  --bs-btn-hover-bg: #D0AEBB;
  --bs-btn-hover-border-color: white;
  --bs-btn-active-bg: #265301;
  --bs-btn-active-border-color: $color-button;
  padding: 4px;
}
@media screen and (max-width: 768px) {
  .section5 {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(6 1fr);
    grid-template-areas: "gReiki" "gGemas" "gMedita" "gAkashi" "gAroma" "gMusico";
    justify-content: center;
    margin: 1%;
    padding-bottom: 5px;
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }
}
@media screen and (max-width: 576px) {
  .section5 {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(6 1fr);
    grid-template-areas: "gReiki" "gGemas" "gMedita" "gAkashi" "gAroma" "gMusico";
    justify-content: center;
    margin: 1%;
    padding-bottom: 5px;
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }
}

.sec5 {
  border: 3px solid #d4e2dd;
  background-color: #C5DFD6;
  border-radius: 7px;
  padding: 10px;
}
.sec5 .dReiki {
  grid-area: gReiki;
}
.sec5 .dGemas {
  grid-area: gGemas;
}
.sec5 .dMedita {
  grid-area: gMedita;
}
.sec5 .dAkashi {
  grid-area: gAkashi;
}
.sec5 .dAroma {
  grid-area: gAroma;
}
.sec5 .dMusico {
  grid-area: gMusico;
}
@media screen and (max-width: 768px) {
  .sec5 {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    grid-gap: 10px;
  }
}
@media screen and (max-width: 576px) {
  .sec5 {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    grid-gap: 10px;
  }
}

/*PRODUCTOS*/
.section6 {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}
.section6 .productos {
  font-size: 50px;
  background-color: #D0AEBB;
  border: 10px solid #e7f1ee;
  width: 50%;
  padding: 2%;
  display: flex;
  flex-direction: column;
  margin: 10px;
  border-radius: 50% 20%/10% 40%;
}
.section6 .productos a {
  font-size: 40px;
  background-color: #d4e2dd;
}
@media screen and (max-width: 768px) {
  .section6 .productos {
    font-size: 50px;
    width: 80%;
    padding: 2%;
    margin: 10px;
  }
}
@media screen and (max-width: 576px) {
  .section6 .productos {
    font-size: 50px;
    width: 80%;
    padding: 2%;
    margin: 10px;
  }
}
.section6 .bambooFondo {
  display: flex;
  flex-wrap: wrap;
  justify-content: right;
  margin: 0%;
}
@media screen and (max-width: 768px) {
  .section6 .bambooFondo {
    display: none;
  }
}
@media screen and (max-width: 576px) {
  .section6 .bambooFondo {
    display: none;
  }
}
@media screen and (max-width: 768px) {
  .section6 {
    margin-top: 20%;
    padding-bottom: 30%;
  }
}
@media screen and (max-width: 576px) {
  .section6 {
    margin-top: 20%;
    padding-bottom: 30%;
  }
}

/*HOLISTICA*/
.section7 {
  display: grid;
  grid-template-columns: repet(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-template-areas: "vel res inci" "cuenc sahu cris" "cart libr limp";
  grid-column-gap: 2%;
  grid-row-gap: 2%;
  justify-content: center;
  margin: 1%;
  padding-top: 7%;
  padding-bottom: 10%;
}
.section7 .sec7 {
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 3px solid #dee4da;
  background-color: #C5DFD6;
  border-radius: 7px;
  padding: 10px;
}
.section7 .sec7 .velas {
  grid-area: vel;
}
.section7 .sec7 .resinas {
  grid-area: res;
}
.section7 .sec7 .inciensos {
  grid-area: inci;
}
.section7 .sec7 .cuencos {
  grid-area: cuenc;
}
.section7 .sec7 .sahumo {
  grid-area: sahu;
}
.section7 .sec7 .cristales {
  grid-area: cris;
}
.section7 .sec7 .cartas {
  grid-area: cart;
}
.section7 .sec7 .libros {
  grid-area: libr;
}
.section7 .sec7 .limpieza {
  grid-area: limp;
}
@media screen and (max-width: 768px) {
  .section7 {
    padding-top: 12%;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(9, 1fr);
    grid-template-areas: "vel" "res" "inci" "cuenc" "sahu" "cris" "cart" "libr" "limp";
    grid-column-gap: 1%;
    grid-row-gap: 0.5%;
    padding-bottom: 40%;
  }
}
@media screen and (max-width: 576px) {
  .section7 {
    padding-top: 12%;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(9, 1fr);
    grid-template-areas: "vel" "res" "inci" "cuenc" "sahu" "cris" "cart" "libr" "limp";
    grid-column-gap: 1%;
    grid-row-gap: 0.5%;
    padding-bottom: 40%;
  }
}

/*COCINA*/
.section8 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas: "espe mort acei" "hierb plant .";
  grid-column-gap: 2%;
  grid-row-gap: 2%;
  justify-content: center;
  margin: 1%;
  padding-top: 7%;
  padding-bottom: 10%;
}
.section8 .sec8 {
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 3px solid #d4e2dd;
  background-color: #C5DFD6;
  border-radius: 7px;
  padding: 10px;
}
.section8 .sec8 .especias {
  grid-area: espe;
}
.section8 .sec8 .morteros {
  grid-area: mort;
}
.section8 .sec8 .aceite {
  grid-area: acei;
}
.section8 .sec8 .hierbas {
  grid-area: hierb;
}
.section8 .sec8 .plantas {
  grid-area: plant;
}
@media screen and (max-width: 768px) {
  .section8 .section8 {
    padding-top: 12%;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 5;
    grid-template-areas: "espe" "mort" "acei" "hierb" "plant";
    grid-column-gap: 2%;
    grid-row-gap: 0.5%;
    justify-content: center;
    margin: 1%;
    padding-bottom: 40%;
  }
}
@media screen and (max-width: 576px) {
  .section8 .section8 {
    padding-top: 12%;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 5;
    grid-template-areas: "espe" "mort" "acei" "hierb" "plant";
    grid-column-gap: 2%;
    grid-row-gap: 0.5%;
    justify-content: center;
    margin: 1%;
    padding-bottom: 40%;
  }
}

/*# sourceMappingURL=style.css.map */