@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap");

:root {
  /* brand */
  --color-green: #69c054;

  --color-orange: #f9aa62;
  --color-orange30: rgba(249, 170, 98, 0.3);
  --color-orange20: rgba(249, 170, 98, 0.2);
  --color-orange10: rgba(249, 170, 98, 0.1);
  --color-black: #2d2d2d;
  --color-black50: rgba(57, 63, 46, 0.5);
  --color-black30: rgba(57, 63, 46, 0.3);
  --color-black10: rgba(57, 63, 46, 0.1);
  --color-black05: rgba(57, 63, 46, 0.05);
  --color-red: #f34242;
  --color-brown: #a67700;

  /* neutral */
  --color-charcoal: #545454;
  --color-cream: #fcfbf9;
  --color-white: #fcfbf9;

  /* state */
  --color-info: #2f80ed;
  --color-success: #27ae60;
  --color-warning: #e2b93b;
  --color-warning: #eb5757;

  --gold-color: #b38e44;
  --color-yellow: #ffeb8a;
  font-size: 14px;
}

html {
  font-size: 14px;
  scroll-behavior: smooth;
}


body {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  background-color: #f0f0f0;
  overflow: hidden;
  font-family: "DM Sans", sans-serif;
}

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

.mobile-container {
  width: 375px;
  border: 1px solid #ccc;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  overflow-y: auto;
  overflow-x: hidden;
  background-color: #fff;
}

.contentAuxMobile {
  /* height: 100%; */
  height: calc(var(--vh, 1vh) * 100);
  /*
  /* Asegura que el contenido use todo el contenedor */
  overflow-y: auto;
  /* Permite el desplazamiento vertical */
  overflow-x: hidden;
  /* position: relative; */
  /* No permite el desplazamiento horizontal */
}

.contentAuxMobile.showMenu {
  height: calc(var(--vh, 1vh) * 100);
  overflow: hidden;
}

.menuHamburguer {
  width: 3rem;
}

h1 {
  font-size: 2.9rem;
  margin: 0;
  line-height: 1;
}

h3 {
  font-size: 1.8rem;
  line-height: 1;
  margin-left: 20px;
}

h4 {
  font-size: 1.3rem;
}

/* .fixed-top.headerAires{ */
.headerAires {
  padding: 0;
}

#headertop {
  /* background: var(--color-green) ; */
  height: 7rem;
  display: flex;
  width: 100%;
  padding: 1rem;
  justify-content: space-between;
  background-image: url(/static/img/header.svg);
  background-position: 0rem 0rem;
  background-size: cover;
  background-repeat: no-repeat;
  height: 98px;
}

#headertop #header__left {
  display: flex;
  z-index: 10;
}

#headertop #header__left svg {
  width: 5rem;
  margin-top: 10px;
  margin-left: 15px;
}

#headertop #header__right {
  width: auto;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

#menuHamburguer {
  position: absolute;
  width: 375px;
  height: calc(var(--vh, 1vh) * 100);
  background: white;
  top: -3rem;
  left: 5rem;
}

.ruta-bienestar-box {
  background-image: url(/static/img/muy-pronto.png);
  background-size: auto;
  background-position: bottom right;
  background-repeat: no-repeat;
}

.ruta-bienestar {
  color: #999 !important;
  cursor: auto;
  text-decoration: none;
}

#headertop #header__right .mainMenuBtn {
  /* width: 30%; */
  margin-top: -30px;
  cursor: pointer;
}

#headertop #header__right .mainMenuBtn svg {
  width: 2.5rem;
  height: 2.5rem;
}

#headertop #header__right .contAvatar {
  /* width: 60%; */
  margin-top: 2rem;
}

#headertop #header__right .contAvatar div {
  border-radius: 50%;
  border: 4px solid var(--color-green);
  background: gainsboro;
  width: 4rem;
  height: 4rem;
  background-position: center !important;
  background-size: contain !important;
}

.contact-networks {
  width: 100%;
  margin: auto;
}

.icon-networks-box {
  width: 90%;
  margin: auto;
  display: flex;
  flex-flow: row;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
  margin-bottom: 35px;
}

.nav-bar-subtitle {
  font-size: 16px;
}

.nav-bar-social-info {
  text-align: center;
}

#headerBottom {
  display: flex;
  justify-content: start;
  width: 100%;
  padding: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  min-height: 6rem;
}

#headerBottom #svgReturn {
  width: 2rem;
  display: flex;
  height: 100%;
  align-items: center;
}

#headerBottom #svgReturn a {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

#headerBottom #svgReturn a svg {
  width: 1.8rem;
}

#headerBottom #svgReturn {
  width: 2rem;
  display: flex;
  height: 100%;
  align-items: center;
}

#headerBottom #svgReturn a {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

#headerBottom #svgReturn a svg {
  width: 1.8rem;
}

#headerBottom #header__left {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
  margin-left: 0.5rem;
}

#headerBottom #header__left h3 {
  margin: 0;
}

#headerBottom #header__right {
  flex-basis: 20%;
  display: flex;
  justify-content: center;
  align-items: center;
}

#headerBottom #header__right svg {
  width: 5rem;
}

nav.navbarFooterAires {
  display: none;
}

/* ----NEW STYLESHEET---- */

/* ----TOP IMAGE BOX---- */
div .image-box {
  width: 100%;
  height: 75px;
  background-color: #fff;
}

div .image-box#divFooter {
  background: url(../img/rectangle-footer.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 2rem;
  padding-right: 2rem;
  height: 7rem;
  margin-top: 5rem;
}

div .image-box#divFooter svg {
  width: 4rem;
}

div .image-box#divFooter a {
  color: white;
  font-size: 0.9rem;
  line-height: 1;

}

div .image-box#divFooter a:hover {
  color: white;
  font-size: 0.9rem;
  line-height: 1;
  text-decoration: none;
}


.fruta-top {
  height: 180px;
  width: 90px;
  position: relative;
  left: 295px;
  top: -20px;
}

.mail {
  height: 180px;
  width: 90px;
  display: block;
  margin: 0 auto;
    margin: -40px auto 20px auto;
}


/* ----END TOP IMAGE BOX----*/

/*----WELCOME BOX----*/

.welcome-box {
  margin-left: 20px;
  display: flex;
  flex-direction: column;
  height: 81px;
}

.hello {
  display: flex;
  justify-content: flex-start;
  align-items: baseline;
  width: 100%;
}

.hi {
  font-size: 2.4rem;
  font-family: "DM Sans", sans-serif;
  font-weight: 500;
}

.good-morning {
  display: flex;
  align-items: flex-end;
  justify-content: start;
}

.morning {
  font-size: 1.3rem;
  margin-bottom: 0;
  display: flex;
  align-items: center;
  margin-top: .5rem;
  justify-content: center;
}

.home-day-icon {
  padding-left: 0.8rem;
  width: 2.25rem;
  height: auto;
}

.yellow-line-box {
  display: flex;
  height: 20px;
  width: 100px;
}

.title-bottom {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/*----END WELCOME BOX----*/

/*----RECOMENDATIONS & TOP RECIPIES----*/

.recipes__gallery {
  background-image: url(/static/img/fondo-opaco.png);
  padding: 10px 0 10px 0;
  background-size: 200px;
  background-repeat: no-repeat;
  background-position: 240px 50px;
  height: 315px;
}

.gallery-tittle {
  margin-top: 30px;
  margin-left: 25px;
  font-weight: 400;
  font-size: 1.8rem;
  max-width: 150px;
}

.recommendations {
  background-color: #fff0;
  margin: auto;
  display: flex;
  overflow-x: auto;
  white-space: nowrap;
  padding: 0.8rem 0.8rem 0.8rem 1.8rem;
  width: 100%;
  margin-left: 0rem;
  height: 15.4rem;
}

.recipesscroll__foodbox {
  display: inline-block;
  margin-right: 10px;
  width: 200px;
  height: 100%;
}

.recipesscroll__image_container {
  height: 75%;
  overflow: hidden;
}

.recipesscroll__image {
  max-width: 300px;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}

.recipesscroll__title {
  font-size: 1.1rem;
  margin: 10px 0;
  text-decoration: none;
  color: #000;
  font-weight: 300;
  width: 100%;
  white-space: normal;
  overflow-wrap: break-word;
}

.divider {
  border: 0;
  height: 1px;
  background-color: #000;
  width: 70%;
}

/*----END RECOMENDATIONS----*/

/*----LIFESTYLE----*/

.lifestyle {
  color: #fff;
  height: 250px;
  width: 300px;
  display: flex;
  margin: auto;
  background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
    url(/static/img/challengeFriendHighQuality.png);
  background-size: cover;
  background-repeat: no-repeat;
  object-fit: contain;
  align-items: center;
  justify-content: flex-start;
  margin-top: 20px;
  border-radius: 30px;
}

.lifestyle__content {
  width: 50%;
  height: 90%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lifestyle__content-title {
  width: 80%;
  height: 20px;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.lifestyle-todays {
  font-size: 8px;
  padding: 1px 2px 1px 2px;
  width: 60px;
  background-color: #f8ba1b;
  border-radius: 15px;
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lifestyle__content-icon {
  height: auto;
  width: 20px;
  border-radius: 50%;
  background-color: #f8ba1b;
  margin-left: 5px;
  background-image: url(/static/img/human-icon.png);
  background-size: 10px;
  background-position: center;
  background-repeat: no-repeat;
}

.transform {
  margin-top: 15px;
  margin-left: 20px;
  font-size: 2rem;
  font-weight: normal;
  line-height: 0.9;
}

.lifestyle-description {
  width: 200px;
  margin-left: 18px;
  line-height: 1;
  margin-bottom: 10px;
  font-size: 0.85rem;
  font-weight: 300;
}

#btnStart {
  text-decoration: none;
}

#btnStart:hover {
  text-decoration: none;
}

.lifestyle__button {
  padding: 4px 10px 4px 10px;
  width: 150px;
  height: 41px;
  background-color: #69c054;
  margin-left: 75px;
  border-radius: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: none;
  text-decoration: none;
}

.lifestyle__button__text {
  font-size: 16px;
  color: #fff;
  font-weight: 500;
  padding-left: 5px;
  text-decoration: none;
}

.lifestyle__button__text a:hover {
  text-decoration: none;
}

/*----END LIFESTYLE----*/

/*----BOTTOM IMAGE BOX----*/

.image-box {
  height: 100px;
}

.fruta-bottom {
  height: 100px;
  width: 75px;
  position: relative;
  left: 0px;
  top: 40px;
}

/*----END BOTTOM IMAGE BOX----*/

/*----NEW PRODUCTS----*/

/* Estilos generales para el contenedor de los nuevos productos */
.adc-grid-tittle-container {
  margin: auto;
  margin-top: 50px;
  margin-bottom: 0px;
  width: 80%;
}

.adc-grid-tittle-container h2 {
  font-size: 25px;
  font-weight: bold;
  text-align: start;
}

.yellow-line-bottom {
  margin: auto;
  height: 50px;
  width: 300px;
  background-image: url(/static/img/raya-amarilla.png);
  background-position: 0px 0px;
  background-size: 100px;
  background-repeat: no-repeat;
}

.new-products-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  max-width: 75%;
  margin: auto;
}

.product-box {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  text-align: center;
  height: 100%;
}

.product-grid-description p a {
  display: flex;
  flex-flow: row;
  justify-content: center;
  align-items: center;
  gap: 5px;
  line-height: 1;
}

.product-grid-description p a:hover {
  display: flex;
  flex-flow: row;
  justify-content: center;
  align-items: center;
  gap: 5px;
  text-decoration: none;
  color: #000;
}

.flecha-verde-product {
  width: 30px !important;
}

p a {
  color: #000;
  text-decoration: none;
}

.product-box img {
  width: 70%;
  height: auto;
  border: none;
  display: block;
  margin: auto;
}

.product-box p {
  margin-top: 10px;
  font-size: 16px;
  color: #333;
}

.product-box span {
  font-size: 1rem;
  color: #969696;
  align-self: flex-start;
}

/*----END NEW PRODUCTS----*/

/*----FOOTER----*/
.footer {
  display: flex;
  flex-direction: column;
  gap: 20px;
  justify-content: center;
  align-items: center;
  height: 220px;
  position: relative;
  z-index: 10;
}

.ecommerce-button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 40px;
  border: 1px solid #ccc;
  text-align: center;
  padding: 10px 20px;
  font-size: 10px;
  color: white;
  border-radius: 20px;
  cursor: pointer;
}

.LaComer-button {
  background-color: #58BC02;
}

.walmart-button {
  background-color: #0071ce;
}

.chedraui-button {
  background-color: #F77A01;
}

.image-box {
  position: relative;
  z-index: 5;
}

/*----END FOOTER----*/

/* ---- END NEW STYLESHEET---- */

/*--------------- OLD STYLESHEET-----------------*/

.container-prin {
  margin-top: 1rem;
  margin-bottom: 5rem;
}

#contvideo {
  width: 100%;
  height: 25rem;
  background-position: center !important;
  background-size: cover !important;
  border-radius: 10px;
  /* background:url(/static/img/videoPic.png),  var(--color-white); */
}

.recipesForyou {
  margin-bottom: 3rem;
}

.recipesForyou .onlyRecipe {
  border: 1px solid #d0dbea;
  border-radius: 10px;
  padding: 1rem;
  margin-bottom: 3rem;
  margin-top: 3rem;
  background-color: var(--color-orange30);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.recipesForyou .onlyRecipe .insertRecipe {
  display: flex;
  /* justify-content: space-between; */
  align-items: center;
  flex-direction: column;
}

.recipesForyou .onlyRecipe .insertRecipe p {
  text-align: center;
}

.recipesForyou .onlyRecipe .insertRecipe p bold {
  font-weight: bold;
}

.recipesForyou .onlyRecipe .insertRecipe p bold a {
  color: var(--color-black);
  text-decoration: none;
}

.recipesForyou .onlyRecipe .insertRecipe .myAvatar {
  flex-basis: 10%;
  border-radius: 50%;
}

.recipesForyou .onlyRecipe .insertRecipe a.linkSecundary {
  background: var(--color-orange);
  border-radius: 32px;
  padding: 1rem 2rem;
  flex-basis: 70%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: white;
}

.recipesForyou .onlyRecipe .insertRecipe a.linkSecundary span {
  color: black;
}

.recipesForyou .onlyRecipe .insertRecipe a.linkSecundary svg {
  width: 1rem;
}

.recipesForyou .contRecipesForYou {
  margin-top: 1rem;
  display: flex;
  flex-direction: row;
  overflow: scroll;
  overflow-y: hidden;
  padding-left: 30px;
  flex-wrap: nowrap;
  padding-left: 0px;
  justify-content: flex-start;
  padding-top: 1rem;
  padding-left: 0.5rem;
}

.recipesForyou .contRecipesForYou .contOneRecipe {
  margin-right: 2rem;
}

.recipesForyou .contRecipesForYou .contOneRecipe .imgOneRecipe {
  width: 15rem;
  height: 15rem;
  border-radius: 10px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.recipesForyou .contRecipesForYou .contOneRecipe .imgOneRecipe .qualification {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.5rem;
  position: absolute;
  border-radius: 8px;
  background: rgba(48, 48, 48, 0.3);
  bottom: 1rem;
  left: 1rem;
}

.recipesForyou .contRecipesForYou .contOneRecipe .imgOneRecipe .qualification svg {
  width: 1.3rem;
  height: 1.3rem;
}

.recipesForyou .contRecipesForYou .contOneRecipe .imgOneRecipe .qualification p {
  margin: 0;
  line-height: 1;
  color: white;
}

.recipesForyou .contRecipesForYou .contOneRecipe .infoRecipe {
  margin-top: 1rem;
}

.recipesForyou .contRecipesForYou .contOneRecipe .infoRecipe p.title {
  font-weight: bold;
  color: var(--color-blue);
  margin-bottom: 0.2rem;
}

.recipesForyou .contRecipesForYou .contOneRecipe .infoRecipe .especifications p {
  color: gray;
}

.doYouCook {
  margin-top: 3rem;
}

.doYouCook .options {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1.5rem;
  margin-bottom: 2rem;
}

.doYouCook .options .contCook {
  width: 23%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.doYouCook .options .contCook .contCookImg {
  height: 5rem;
  border: 3px solid var(--color-green);
  border-radius: 50%;
  width: 5rem;
}

.doYouCook .options .contCook h4 {
  font-size: 0.8rem;
  margin-top: 0.5rem;
}

.recipeOnly {
  padding: 1rem;
}

.recipeOnly .cont {
  border: 1px solid #d0dbea;
  border-radius: 10px;
  padding: 2rem 1rem 1rem;
  box-shadow: rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.recipeOnly .cont p {
  font-size: 0.9rem;
  text-align: center;
  margin-bottom: 1rem;
  line-height: 1;
}

.recipeOnly .cont p span.textBold {
  font-weight: bold;
}

.recipeOnly .cont a.buttonPrimary {
  background: var(--color-green);
  color: white;
  border-radius: 32px;
  text-align: center;
  padding: 1rem 2.8rem;
}

.searchRecipe {
  /* padding: 1rem; */
  margin-bottom: 2rem;
}

.searchRecipe .input-group.input-group-lg#inputSearch {
  margin-top: 1rem;
}

.searchRecipe .input-group.input-group-lg#inputSearch input {
  border-radius: 50px !important;
  background: rgba(241, 241, 241, 1);
  border: none;
  font-size: 1rem;
}

.popularsRecipes {
  /* padding: 1rem; */
  margin-bottom: 2rem;
}

.popularsRecipes .rowtop {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.popularsRecipes .rowtop .auxVermas {
  width: 7rem;
}

.popularsRecipes .rowtop .auxVermas a {
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  background: var(--color-black);
  padding: 0.5rem 0.9rem;
  border-radius: 27px;
  color: white;
  line-height: 1;
}

.popularsRecipes .rowtop h3,
.popularsRecipes .rowtop p {
  margin: 0;
}

.popularsRecipes .rowtop p {
  margin-right: 0.2rem;
}

.popularsRecipes .contTopRecipes {
  margin-top: 1rem;
  display: flex;
  flex-direction: row;
  overflow: scroll;
  overflow-y: hidden;
  padding-left: 30px;
  flex-wrap: nowrap;
  padding-left: 0px;
  justify-content: flex-start;
  padding-top: 1rem;
  overflow: scroll;
  overflow-y: hidden;
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}

.popularsRecipes .contTopRecipes .recipeTop {
  margin-right: 2rem;
}

.popularsRecipes .contTopRecipes .recipeTop .imgRecipe {
  width: 22rem;
  height: 17rem;
  border-radius: 20px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  position: relative;
}

.popularsRecipes .contTopRecipes .recipeTop .imgRecipe .complete {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.5rem;
  position: absolute;
  border-radius: 8px;
  background: rgba(48, 48, 48, 0.9);
  top: 1rem;
  left: 1rem;
}

.popularsRecipes .contTopRecipes .recipeTop .imgRecipe .complete p {
  margin: 0;
  line-height: 1;
  color: white;
}

.popularsRecipes .contTopRecipes .recipeTop .imgRecipe .qualification {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.5rem;
  position: absolute;
  border-radius: 8px;
  background: rgba(48, 48, 48, 0.9);
  top: 1rem;
  left: 1rem;
}

.popularsRecipes .contTopRecipes .recipeTop .imgRecipe .qualification svg {
  width: 1.3rem;
  height: 1.3rem;
}

.popularsRecipes .contTopRecipes .recipeTop .imgRecipe .qualification p {
  margin: 0;
  line-height: 1;
  color: white;
}

.popularsRecipes .contTopRecipes .recipeTop .recipeInfo {
  margin-top: 1rem;
}

.popularsRecipes .contTopRecipes .recipeTop .recipeInfo p.title {
  font-weight: bold;
  color: var(--color-black);
  margin-bottom: 0.5rem;
}

.popularsRecipes .contTopRecipes .recipeTop .recipeInfo .infoOwn {
  display: flex;
  height: 4rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  justify-content: start;
  align-items: center;
}

.popularsRecipes .contTopRecipes .recipeTop .recipeInfo .infoOwn .picOwn {
  width: 3rem;
}

.popularsRecipes .contTopRecipes .recipeTop .recipeInfo .infoOwn .picOwn img {
  border-radius: 50%;
  width: 3rem;
  height: 3rem;
}

.popularsRecipes .contTopRecipes .recipeTop .recipeInfo .infoOwn p.light.disa {
  margin: 0;
  line-height: 1;
  margin-left: 1rem;
  color: gray;
}

.producers {
  /* padding: 1rem; */
  margin-bottom: 2rem;
}

.producers .rowtop {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.producers .rowtop .auxVermas a {
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  background: var(--color-black);
  padding: 0.5rem 0.9rem;
  border-radius: 27px;
  color: white;
  line-height: 1;
}

.producers .rowtop h3,
.producers .rowtop p {
  margin: 0;
}

.producers .rowtop .auxVermas {
  width: 7rem;
}

.producers .rowtop p {
  margin-right: 0.2rem;
}

.producers .options {
  margin-top: 1rem;
  display: flex;
  flex-direction: row;
  overflow: scroll;
  overflow-y: hidden;
  padding-left: 30px;
  flex-wrap: nowrap;
  padding-left: 0px;
  justify-content: flex-start;
  padding-top: 1rem;
  /* padding-left: .5rem; */
}

.producers .options .contCook {
  width: 5rem;
  flex-basis: 5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-right: 2rem;
}

.producers .options .contCook .contCookImg {
  height: 5rem;
  border-radius: 50%;
  width: 5rem;
}

.producers .options .contCook .contCookImg img {
  border-radius: 50%;
  width: 5rem;
  height: 5rem;
}

.producers .options .contCook h4 {
  font-size: 0.8rem;
  margin-top: 0.5rem;
  height: 2.4rem;
  text-align: center;
}

.findChallenge {
  /* padding: 1rem; */
  margin-bottom: 2rem;
}

.findChallenge .rowtop {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.findChallenge .rowtop h3,
.findChallenge .rowtop p {
  margin: 0;
}

.findChallenge {
  /* padding: 1rem; */
  margin-bottom: 10rem;
}

.findChallenge .dareyou {
  width: 100%;
  height: 16rem;
  border-radius: 10px;
  background: url(/static/img/dare.png), var(--color-white);
  background-position: center;
  position: relative;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  margin-top: 1rem;
}

.findChallenge .dareyou a.linkSecundary {
  background: var(--color-orange);
  border-radius: 32px;
  padding: 1rem 2rem;
  flex-basis: 70%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: white;
  position: absolute;
  left: 50%;
  top: 80%;
  transform: translate(-50%, -50%);
}

.navbarFooterAires {
  height: 6rem;
  width: 100%;
  padding: 1rem;
  border-top: 1px solid gainsboro;
  padding-top: 0;
  position: sticky;
  right: 0;
  bottom: -1px;
  left: 0;
  z-index: 1030;
}

.navbarFooterAires .contButtons {
  width: 15%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.navbarFooterAires .contButtons a {
  display: flex;
  justify-content: center;
  align-items: center;
}

.navbarFooterAires .contButtons svg {
  width: 70%;
  fill: white;
}

.navbarFooterAires .contButtons svg.svgThree path {
  fill: #393f2e;
}

.navbarFooterAires .contButtons svg path {
  stroke: #393f2e;
}

.navbarFooterAires .contButtons svg.active {
  stroke: var(--color-green);
}

.navbarFooterAires .contButtons svg.active path {
  stroke: var(--color-green);
}

.navbarFooterAires .contButtons svg.active.svgThree path {
  stroke: var(--color-green);
  fill: var(--color-green);
}

.navbarFooterAires .contButtons#addButton {
  position: relative;
}

.navbarFooterAires .contButtons#addButton a {
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  width: 150%;
  height: 150%;
}

.navbarFooterAires .contButtons#addButton a svg path {
  stroke: none;
}

.swiper-wrapper .swiper-slide {
  height: 30rem;
  overflow: hidden;
}

.swiper-wrapper .swiper-slide img {
  width: 90%;
}

.swiper-slide-img-format {
  height: 90%;
  margin-left: 16px;
  object-fit: cover;
  border-radius: 20px;
}

oneRecipe_swiper_thumbs img {
  margin-left: 0px;
}

.swiper-container-thumbs .swiper-wrapper .swiper-slide img {
  width: 100%;
}

.swiper-container-thumbs {
  /* height: 10rem; */
  padding-left: 1rem;
}

/* Estilos para los thumbnails */
.swiper-container-thumbs .swiper-slide {
  width: 5rem;
  /* Ancho personalizado */
  height: 5rem;
  /* Altura personalizada */
  overflow: hidden;
  /* Para recortar las imágenes si es necesario */
}

.swiper-container-thumbs .swiper-slide img {
  width: 100%;
  /* Ajustar la imagen al 100% del contenedor */
  height: 100%;
  /* Ajustar la imagen al 100% del contenedor */
  object-fit: cover;
  /* Para ajustar la imagen dentro del contenedor */
}

.infoPartOwner {
  padding: 1rem;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}

.infoPartOwner .phrase {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.infoPartOwner .phrase p {
  text-align: center;
  font-size: 1rem;
  font-style: italic;
  color: var(--color-black50);
  margin: 0;
}

.infoPartOwner .contRanking {
  display: flex;
  justify-content: space-between;
  display: flex;
}

.infoPartOwner .rankink {
  display: flex;
  justify-content: center;
  align-items: center;
  display: flex;
  justify-content: start;
  align-items: center;
  flex-basis: 50%;
}

.infoPartOwner .rankink .rankingStart {
  display: flex;
}

.infoPartOwner .rankink .rankingStart svg {
  width: 1.1rem;
}

.infoPartOwner .rankink .reviews {
  margin-left: 0.5rem;
}

.infoPartOwner .rankink .reviews p {
  margin: 0;
}

.infoPartOwner .infoOwn {
  display: flex;
  height: 4rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  justify-content: start;
  align-items: center;
}

.infoPartOwner .infoOwn .picOwn {
  width: 3rem;
}

.infoPartOwner .infoOwn .picOwn img {
  border-radius: 50%;
  width: 3rem;
  height: 3rem;
}

.infoPartOwner .infoOwn p.light.disa {
  margin: 0;
  line-height: 1;
  margin-left: 0.5rem;
}

.generalDescription {
  padding: 1rem;
}

.generalDescription .details {
  padding-top: 1rem;
  padding-bottom: 1rem;
  display: flex;
  justify-content: space-around;
  background: var(--color-orange30);
  border-radius: 15px;
}

.generalDescription .nutritionalTable {
  padding-top: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  background: var(--color-orange30);
  border-radius: 15px;
  padding-left: 1rem;
  padding-right: 1rem;
  margin-top: 1.5rem;
  padding-bottom: .8rem;
}

.generalDescription .nutritionalTable .contTitleNutri {
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-bottom: 1rem;
}

.generalDescription .nutritionalTable .contTitleNutri .contTitleNutriLeft {
  width: 75%;
  padding-left: 1rem;
}

.generalDescription .nutritionalTable .contTitleNutri .contTitleNutriRight {
  width: 25%;
  position: relative;
}

.generalDescription .nutritionalTable .contTitleNutri .contTitleNutriRight::before {
  content: '';
  position: absolute;
  width: 1px;
  height: 2rem;
  border: none;
  background: rgba(249, 170, 98, 1);
  top: -15%;
  left: -40%;
}

.generalDescription .nutritionalTable .contTitleNutri .contTitleNutriLeft p {
  margin: 0;
  font-weight: 700;
}

.generalDescription .nutritionalTable .contTitleNutri .contTitleNutriRight p {
  margin: 0;
  font-weight: 700;
}

.generalDescription .nutritionalTable .contInfoNutri {
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-bottom: .5rem;
  border-bottom: 1px solid rgba(249, 170, 98, 1);
}

.generalDescription .nutritionalTable .contInfoNutri:last-child {
  border-bottom: transparent;
  margin-bottom: 0rem;
}

.generalDescription .nutritionalTable .contInfoNutri .contInfoNutriLeft {
  width: 75%;
  padding-left: 1rem;
}

.generalDescription .nutritionalTable .contInfoNutri .contInfoNutriLeft p {
  margin: 0;
}

.generalDescription .nutritionalTable .contInfoNutri .contInfoNutriRight {
  width: 25%;
}

.generalDescription .nutritionalTable .contInfoNutri .contInfoNutriRight p {
  margin: 0;
}

.generalDescription .contNote {
  margin-top: 3rem;
}

.generalDescription .contNote p {
  color: rgba(57, 63, 46, 0.5);
  font-style: italic;
}

.generalDescription .details .itemDetail {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 6.5rem;
  width: 7rem;
}

.generalDescription .details .itemDetail .contSvg {
  height: 3.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.generalDescription .details .itemDetail .contSvg svg {
  width: 3.2rem;
}

.generalDescription .details .itemDetail .contInfoDetail {
  height: 3rem;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
  padding-top: 0.3rem;
}

.generalDescription .details .itemDetail .contInfoDetail span.number {
  font-size: .9rem;
  line-height: 1;
  color: var(--color-black);
  font-weight: 700;
  margin-top: .3rem;
}

.generalDescription .details .itemDetail .contInfoDetail p.infoItem {
  color: var(--color-black);
  font-size: .9rem;
  margin: 0;
}

.generalDescription .description {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.generalDescription .description .rowtop p {
  font-size: 1.1rem;
  line-height: 25px;
  letter-spacing: -0.32px;
  margin-top: 2rem;
}

.generalDescription .description .rowtop h3 {
  margin-left: 0;
  font-size: 1.4rem;
}

.generalDescription .description .rowtop#withPortions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  margin-top: 3rem;
}

.generalDescription .divauthor {
  padding-top: 2rem;
  padding-bottom: 2rem;
  border-top: 2px solid var(--color-orange);
  border-bottom: 2px solid var(--color-orange);
  margin-top: 3rem;
  margin-bottom: 3rem;
  padding-left: 1rem;
}

.generalDescription .infoOwn {
  display: flex;
  height: 4rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  justify-content: start;
  align-items: center;
}

.generalDescription .infoOwn .picOwn {
  width: 3rem;
}

.generalDescription .infoOwn .picOwn img {
  border-radius: 50%;
  width: 3rem;
  height: 3rem;
}

.generalDescription .infoOwn p.light.disa {
  margin: 0;
  line-height: 1;
  margin-left: 1rem;
  color: var(--color-black);
  font-weight: 700;
}

.recipeOnly .cont a.buttonPrimary {
  background: var(--color-green);
  color: white;
  border-radius: 32px;
  text-align: center;
  padding: 1rem 2.8rem;
}

.generalDescription .description .listIngredient .metro_nutritional-facts {
  padding: 0;
}

.generalDescription .description .listIngredient .metro_nutritional-facts .itemIngredient {
  display: flex;
}

.generalDescription .description .contBtn {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.generalDescription .description .listIngredient .metro_nutritional-facts .itemIngredient .contCheck {
  width: 10%;
  border-right: none;
  border-left: none;
  justify-content: center;
  display: flex;
  align-items: center;
  margin: 0;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.generalDescription .description .listIngredient .metro_nutritional-facts .itemIngredient .contCheck.ingredient {
  width: 15%;
  /* border: 1px solid #ebebeb; */
  border-right: none;
  border-left: none;
  justify-content: center;
  display: flex;
  align-items: center;
  margin: 0;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.generalDescription .description .listIngredient .metro_nutritional-facts .itemIngredient .contCheck input[type="checkbox"],
input[type="radio"] {
  margin-left: 0;
  zoom: 2;
  margin: 0;
}

.generalDescription .description .listIngredient .metro_nutritional-facts .itemIngredient .textIngredient {
  width: 90%;
  margin: 0;
  padding-top: 1.2rem;
  padding-bottom: 1.2rem;
  padding-left: .7rem;
  border-right: none;
  padding-right: 1rem;
}

.generalDescription .description .listIngredient .metro_nutritional-facts .itemIngredient .textIngredient p {
  color: var(--color-black);
  font-family: "DM Sans", sans-serif;
  font-size: 1.1rem;
  line-height: 1.2;
  margin: 0;
}

.generalDescription .description .choose {
  margin-top: 2rem;
  height: 4rem;
  display: flex;
  justify-content: center;
}

.generalDescription .description .choose a.buttonPrimary {
  background: var(--color-green);
  color: white;
  border-radius: 32px;
  text-align: center;
  padding: 1rem 2.8rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.generalDescription .description .choose a.buttonPrimary svg {
  width: 2.3rem;
  margin-right: 1rem;
}

.generalDescription .description .rowTop#rowTopMT {
  margin-top: 4rem;
  margin-top: 3rem;
  padding-top: 3rem;
  border-top: 3px solid var(--color-orange);
}

.generalDescription .description .rowTop#rowTopMT h3 {
  margin-left: 0;
  font-size: 1.4rem;
}

.generalDescription .description .listIngredient .metro_nutritional-facts .itemIngredient .contCheck .contCheckNumber {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--color-orange);
  display: flex;
  justify-content: center;
  align-items: center;
}

.generalDescription .description .listIngredient .metro_nutritional-facts .itemIngredient .contCheck .contCheckNumber span {
  color: var(--color-white);
  font-size: 1.5rem;
}

.generalDescription .description .listIngredient .metro_nutritional-facts .itemIngredient .custom-checkbox {
  display: inline-block;
  position: relative;
  cursor: pointer;
  width: 100%;
}

.generalDescription .description .listIngredient .metro_nutritional-facts .itemIngredient .hidden-checkbox {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.generalDescription .description .listIngredient .metro_nutritional-facts .itemIngredient .custom-label {
  display: flex;
  align-items: center;
  width: fit-content;
  padding: 0.8rem;
  border-radius: 4px;
  background-color: #ffffff;
  transition: background-color 0.3s ease;
  width: 100%;
  margin-bottom: 0.3rem;
  margin-top: 0.3rem;
  padding-left: 0;
}

.generalDescription .description .listIngredient .metro_nutritional-facts .itemIngredient .custom-checkbox .custom-label p {
  color: var(--color-black);
  font-family: "DM Sans", sans-serif;
  font-size: 1.1rem;
  line-height: 1.2;
  margin: 0;
}

.generalDescription .description .listIngredient .metro_nutritional-facts .itemIngredient .check-mark {
  margin-right: 10px;
  visibility: visible;
  /* Inicialmente oculto */
  transition: visibility 0.3s ease;
  padding: 0.5rem;
  border: 1px solid;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5rem;
  border: 2px solid gray;
  color: white;
  color: white;
  border-radius: 50%;
  transition: 0.5s;
}

.generalDescription .description .listIngredient .metro_nutritional-facts .itemIngredient .custom-checkbox .hidden-checkbox:checked+.custom-label .check-mark {
  visibility: visible;
  color: white;
  padding: 0.5rem;
  border: 1px solid;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5rem;
  border: 2px solid #69c054;
  border-radius: 50%;
  background: #69c054;
  border-radius: 50%;
}

.checkRecitpe {
  margin-top: 3rem;
}

.checkRecitpe .details {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: 3rem;
  background: var(--color-orange20);
}

.checkRecitpe .details p {
  font-size: 1.3rem;
  font-weight: bold;
  color: var(--color-black);
  width: 16rem;
  text-align: center;
}

.checkRecitpe .details a.linkSecundary {
  border: navajowhite;
  background: var(--color-orange);
  border-radius: 32px;
  padding: 1rem 2rem;
  /* flex-basis: 57%; */
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
}

.checkRecitpe .details a.linkSecundary span {
  margin-left: 1rem;
}

.checkRecitpe .rowtop {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.checkRecitpe .rowtop .auxVermas a {
  display: flex;
  justify-content: center;
  align-items: center;
  color: gray;
  text-decoration: none;
}

.checkRecitpe .rowtop .auxVermas svg {
  width: 2rem;
}

.checkRecitpe .rowtop h3,
.checkRecitpe .rowtop p {
  margin: 0;
}

.checkRecitpe .rowtop p {
  margin-right: 0.2rem;
}

.checkRecitpe .contDescription .rowStarts {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.5rem;
  margin-top: 0.5rem;
}

.checkRecitpe .contDescription .rowStarts svg {
  width: 3rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.checkRecitpe .contButton {
  display: flex;
  justify-content: flex-end;
  align-items: revert;
  margin-top: 1.5rem;
}

.checkRecitpe .contButton button.linkSecundary {
  border: navajowhite;
  background: var(--color-orange);
  border-radius: 32px;
  padding: 1rem 2rem;
  /* flex-basis: 57%; */
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  width: 8rem;
}

.checkRecitpe .contTextAreaPrin {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 1rem;
}

.checkRecitpe .contTextAreaPrin .colAvatar {
  width: 4rem;
  height: 4rem;
}

.checkRecitpe .contTextAreaPrin .colAvatar img {
  border-radius: 50%;
  border-radius: 50%;
  border: 4px solid var(--color-green);
  background: gainsboro;

  background-position: center !important;
  background-size: contain !important;
}

.checkRecitpe .contTextAreaPrin .contTextArea {
  padding: 0;
  margin-left: 1rem;
  width: 85%;
  flex-basis: 85%;
}

.checkRecitpe .contTextAreaPrin .contTextArea .textAreaInfo {
  height: 7rem;
  overflow: auto;
  resize: vertical;
  border-radius: 10px;
  border: 1px solid var(--color-black30);
  background: rgba(57, 63, 46, 0.05);
  width: 100%;
  padding: 1rem;
}

.contComments {
  margin-top: 3rem;
}

.contComments .rowtop {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
}

.contComments .rowtop .auxVermas a {
  display: flex;
  justify-content: center;
  align-items: center;
  color: gray;
  text-decoration: none;
}

.contComments .rowtop .auxVermas svg {
  width: 2rem;
}

.contComments .rowtop h3,
.contComments .rowtop p {
  margin: 0;
}

.contComments .rowtop p {
  margin-right: 0.2rem;
}

.contComments .contComment {
  margin-top: 1rem;
  margin-bottom: 1.3rem;
}

.contComments .contComment .rowTop {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 4rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.contComments .contComment .rowTop .avatar {
  flex-basis: 15%;
  padding: 1rem;
  padding: 1rem;
  padding-left: 0;
  padding-right: 0.5rem;
}

.contComments .contComment .rowTop .avatar img {
  width: 85%;
}

.contComments .contComment .rowTop .info {
  flex-basis: 65%;
}

.contComments .contComment .rowTop .info .text {
  border-radius: 10px;
  border: 1px solid var(--color-black30);
  background: var(--color-black05);
  padding: 1rem;
}

.contComments .contComment .rowTop .info .text p.name {
  margin: 0;
  font-size: 1rem;
  font-weight: bold;
}

.contComments .contComment .rowTop .info .text p.text-description {
  font-size: 1rem;
  margin: 0;
  margin-top: 0.3rem;
}

.contComments .contComment .rowTop .globe {
  flex-basis: 20%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.contComments .contComment .rowTop .globe svg {
  width: 2rem;
  fill: white;
  cursor: pointer;
}

.contComments .contComment .rowTop .globe svg.active {
  width: 2rem;
  fill: red;
  cursor: pointer;
}

.contComments .contComment .rowMiddle {
  padding-top: 0.3rem;
}

.contComments .contComment .rowBottom {
  display: flex;
}

.contComments .contComment .rowBottom .hearth {
  flex-basis: 10%;
}

.contComments .contComment .rowBottom .hearth svg {
  fill: white;
  cursor: pointer;
}

.contComments .contComment .rowBottom .hearth svg.active {
  fill: red;
}

.contComments .contComment .rowBottom .number {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-left: 0.4rem;
}

.contComments .contComment .rowBottom .number p {
  margin: 0;
  color: gray;
}

.contComments .contComment .rowBottom .number p.active {
  color: red;
}

.contComments .contComment .rowBottom .when {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-left: 1rem;
}

.contComments .contComment .rowBottom .when p {
  margin: 0;
  color: gray;
}

.contResultSearch {
  height: 100%;
}

.contResultSearch .contResults {
  padding-left: 5%;
  padding-right: 5%;
}

.contResultSearch .contResults p {
  font-weight: 700;
}

.contResultSearch .contResults p span {
  color: #69c054;
}

.contResultSearch .contResults ul.disc {
  list-style-type: disc !important;
  padding-left: 20px;
  /* Añadir espacio a la izquierda para que los puntos sean visibles */
}

.contResultSearch .contResults ul.disc li {
  font-weight: 700;

}

/* search Recipes */
.searchRecipe#contSearch {
  margin-top: 3rem;
}

.contResultSearch .contItemRecipe {
  display: flex;
  padding-top: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--color-orange);
}

.contResultSearch .contItemRecipe .contImgRecipe {
  width: 6rem;
  height: 6rem;
  border-radius: 10px;
  flex-basis: 6rem;
}

.contResultSearch .contItemRecipe .contInfoRecipe {
  flex-basis: calc(100% - 6rem);
  padding-left: 1rem;
}

.contResultSearch .contItemRecipe .contInfoRecipe a:hover {
  text-decoration: none;
}
.contResultSearch .contItemRecipe .contInfoRecipe h4.title {
  color: black;
}

.contResultSearch .contItemRecipe .contInfoRecipe .infoOwn {
  display: flex;
  height: 4rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  justify-content: start;
  align-items: center;
}

.contResultSearch .contItemRecipe .contInfoRecipe .infoOwn .picOwn {
  width: 3rem;
}

.contResultSearch .contItemRecipe .contInfoRecipe .infoOwn .picOwn img {
  border-radius: 50%;
  width: 2.5rem;
  height: 2.5rem;
}

.contResultSearch .contItemRecipe .contInfoRecipe .infoOwn p.light.disa {
  margin: 0;
  line-height: 1;
  margin-left: 0.3rem;
  color: gray;
}

.tag__image-title {
  color: black;
  text-decoration: none;
}

.tag__image-title:hover {
  text-decoration: none;
}

/* Collapsable Menu */
.mainMenuContainer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.mainMenuContainer .closeMenuBtn {
  position: absolute;
  top: 20px;
  right: 20px;
}

.mainMenuContainer .SVGContainer {
  position: absolute;
  top: 100px;
}

.mainMenuContainer .SVGContainer svg {
  width: 85px;
}

.mainMenuContainer .bulletsContainer ul {
  padding: 0;
}

.mainMenuContainer .bulletsContainer ul li {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  cursor: pointer;
}

.mainMenuContainer .bulletsContainer ul li a {
  font-size: 20px;
  color: rgba(48, 48, 48, 1);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.mainMenuContainer .bulletsContainer ul li a::after {
  content: "";
  width: 50%;
  bottom: -10px;
  height: 1rem;
  display: block;
  text-align: center;
  display: flex;
}

.mainMenuContainer .bulletsContainer ul li a:hover {
  background-image: url(../img/title-bottom-hover.png);
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 10rem;
}

.mainMenuContainer .avisoContainer {
  position: absolute;
  bottom: 20px;
  right: 20px;
}

.mainMenuContainer .avisoContainer a {
  font-size: 12px;
  font-weight: 500;
}

.navbar-collapse {
  position: fixed;
  top: 2rem;
  left: 100%;
  width: 100vw;
  height: calc(var(--vh, 1vh) * 100);
  background-color: rgba(255, 255, 255, 0.95);
  z-index: 9999;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: left 0.6s ease-in-out;
}

.navbar-collapse#navbarNav {
  padding-top: 2.5rem;
  width: 100%;
  height: calc(var(--vh, 1vh) * 100);
  display: flex;
  /* flex-direction: column; */
  background-image: url(../img/imagePeach.png);
  background-position: 0 15rem;
  background-repeat: no-repeat;
  background-size: 7rem;
  position: absolute;
  overflow-y: auto;
  background: white;
  padding-bottom: 2.5rem;
}

.navbar-collapse.backgroundProfile#navbarNav {
  background-image: url(../img/home_fruit.png), url(../img/imagePeachRight.png);
  background-position: 0 0rem, 100% 90%;
  background-repeat: no-repeat;
  background-size: 5rem, 5rem;
}

.navbar-collapse.show {
  left: -103%;
}

.navbar-nav {
  flex-direction: column;
}

.navbar-toggler {
  z-index: 10000;
}

.navbar-collapse .containerMain {
  width: 100%;
  height: auto;
  overflow: scroll;
}

.navbar-collapse.backgroundProfile#navbarNav .containerMain.show#containerMenuMain,
.navbar-collapse#navbarNav .containerMain.show#containerMenuProfile {
  display: block;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1rem 0;
  overflow-y: scroll;
}

.navbar-collapse.backgroundProfile#navbarNav .containerMain#containerMenuMain,
.navbar-collapse#navbarNav .containerMain#containerMenuProfile {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1rem 0;
  overflow-y: scroll;
  display: none;
}

.navbar-collapse#navbarNav .containerMain .contTitleProfile {
  margin-top: 4rem;
  position: relative;
  width: 100%;
}
.navbar-collapse#navbarNav .containerMain .contTitleProfile h1 {
  width: 100%;
}


.navbar-collapse#navbarNav .containerMain .contTitleProfile span {
  position: relative;
}

.navbar-collapse#navbarNav .containerMain .contTitleProfile  span a {
  position: absolute;
  width: 1.5rem;
  height: 1.5rem;
  bottom: -1.5rem;
  left: calc(100% - 2rem);
  background: url(/static/img/pen.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
.navbar-collapse#navbarNav .containerMain .contTitleProfile span a:hover {
  text-decoration: none;
}

.navbar-collapse#navbarNav .containerMain .contTitleProfile h1::after {
  content: "";
  width: 100%;
  bottom: -10px;
  height: 1rem;
  display: block;
  text-align: center;
  display: flex;
  background-image: url(../img/title-bottom-hover.png);
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 10rem;
  text-decoration: none;
}

.navbar-collapse#navbarNav .containerMain .contBnt,
.navbar-collapse.backgroundProfile#navbarNav .containerMain .contBnt {
  width: 100%;
  display: flex;
  justify-content: end;
  margin-bottom: 4rem;
}

.navbar-collapse#navbarNav .containerMain .contentBullets {
  margin-top: 4rem;
}

.navbar-collapse#navbarNav .containerMain .contBnt svg,
.navbar-collapse.backgroundProfile#navbarNav .containerMain .contBnt svg {
  width: 2rem;
}

.navbar-collapse#navbarNav .containerMain .contSVG svg,
.navbar-collapse.backgroundProfile#navbarNav .containerMain .contSVG svg {
  width: 9rem;
}

.navbar-collapse#navbarNav .containerMain .contentBullets ul {
  padding: 0;
  margin-bottom: 10px;
  list-style-type: none;
}

.navbar-collapse#navbarNav .containerMain .contentBullets ul li {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.navbar-collapse#navbarNav .containerMain .contentBullets ul li a {
  font-size: 1.8rem;
  color: rgba(48, 48, 48, 1);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.navbar-collapse#navbarNav .containerMain .contentBullets ul li a::after {
  content: "";
  width: 50%;
  bottom: -10px;
  height: 1rem;
  display: block;
  text-align: center;
  display: flex;
}

.navbar-collapse#navbarNav .containerMain .contentBullets ul li a:hover {
  background-image: url(../img/title-bottom-hover.png);
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 10rem;
  text-decoration: none;
}

.navbar-collapse#navbarNav .containerMain .contentBullets#contProfile {
  margin-top: 5rem;
  line-height: 1;
}

.navbar-collapse#navbarNav .containerMain .contentBullets#contProfile ul li {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.navbar-collapse#navbarNav .containerMain .contentBullets#contProfile ul li a {
  font-size: 1.4rem;
  color: rgba(48, 48, 48, 1);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.navbar-collapse#navbarNav .containerMain .contentBullets#contProfile .contexitBtn {
  display: flex;
  justify-content: center;
  margin-bottom: 3rem;
  margin-top: 3rem;
}

.navbar-collapse#navbarNav .containerMain .contentBullets#contProfile .contexitBtn a {
  background: white;
  color: var(--color-green);
  border: 1px solid var(--color-green);
  border-radius: 32px;
  text-align: center;
  padding: 1rem 0.6rem;
  padding-right: 20px;
  font-size: 1.5rem;
  width: 16rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.navbar-collapse#navbarNav .containerMain .contentBullets#contProfile .contexitBtn a svg {
  margin-right: 1rem;
}

.containerMain .contAviso p a:hover {
  text-decoration: none;
}

.navbar-collapse#navbarNav .containerMain .contact-networks h3.h3social {
  font-size: 1rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.navbar-collapse#navbarNav .containerMain .contact-networks h3.h3social#lasth3 {
  margin-top: 3rem;
}

.navbar-collapse#navbarNav .containerMain .contact-networks nav {
  display: flex;
  justify-content: space-between;
}

.navbar-collapse#navbarNav .containerMain .contAviso {
  padding: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.navbar-collapse#navbarNav .containerMain .contAviso .aires-logo-bottom {
  width: 50px;
}

.navbar-collapse#navbarNav .containerMain .contAviso svg {
  width: 4rem;
}

.navbar-collapse#navbarNav .containerMain .contAviso p {
  margin: 0;
  width: 5rem;
  font-size: 1rem;
  color: rgba(48, 48, 48, 1);
  line-height: 1;
}

.noLogros {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
  position: relative;
  height: 50rem;
  padding-top: 3rem;
}

.noLogros .container .infoNologros {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.noLogros .container #imgNoLogros {
  width: 15rem;
  margin-bottom: 1rem;
}

.noLogros .container h4 {
  text-align: start;
  font-weight: 700;
  font-size: 1.3rem;
}

.noLogros .container p {
  text-align: center;
  width: 80%;
  line-height: 1;
  margin-top: .5rem;
}

.noLogros .container .contBtn {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 1rem;
}

.restore-password {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
  position: relative;
  height: 50rem;
}

.restore-password .contImg {
  width: 8rem;
  height: 11rem;
  background: url(/static/img/fruta-derecha.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  right: -3%;
  top: 70%;
}

.restore-password h2 {
  font-size: 2.3rem;
  color: rgba(48, 48, 48, 1);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  width: 13rem;
  text-align: center;
  line-height: 1;
}
.restore-password h2#calendEmotions {
  width: 16rem;
}

.restore-password h2::after {
  content: '';
  width: 100%;
  height: 1rem;
  background-image: url(../img/title-bottom-hover.png);
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 10rem;
}

.restore-password form {
  width: 100%;
}

.restore-password #contFrom input+span {
  background-image: url(/static/img/eye.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 2rem;
  height: 2rem;
}

.restore-password #contFrom input.errorInput {
  background: rgb(248, 215, 218);
}

.restore-password #contFrom span#labelErrorPassword {
  color: #721c24;
  font-size: .8rem;
  margin-top: .3rem;
  font-weight: 700;
}

.restore-password #contFromSecond input+span {
  background-image: url(/static/img/eye.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 2rem;
  height: 2rem;
}

.restore-password #contFromSecond input.errorInput {
  background: rgb(248, 215, 218);
}

.restore-password #contFromSecond span#labelErrorPassword2 {
  color: #721c24;
  font-size: .8rem;
  margin-top: .3rem;
  font-weight: 700;
}
.restore-password .container #divAux{
  padding-left: 5%;
  padding-right: 5%;
}
.restore-password .container #divAux span#infoPass{
  margin-left: 0rem;
}

.restore-password#contCalendar {
  height: 100%;
}

.restore-password .textCalender {
  color: #303030;
  font-family: "DM Sans";
  font-size: 20px;
  margin: 0;
}

.restore-password .container .contSwitch {
  margin-top: 3rem;
}

.restore-password .container .contSwitch p {
  color: #303030;
  font-family: "DM Sans";
  font-size: 1.5rem;
}

.restore-password .container .contSwitch .switch {
  position: relative;
  display: inline-block;
  width: 130px;
  height: 45px;
}

.restore-password .container .divider {
  border: none;
  height: 1px;
  background-color: #888;
  margin: 20px auto;
  width: 100%;
}

.restore-password .container .contSwitch .switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.restore-password .container .contSwitch .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #EBEBEB;
  transition: 0.4s;
  border-radius: 34px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.restore-password .container .contSwitch .slider:before {
  position: absolute;
  content: "";
  height: 40px;
  width: 68px;
  border-radius: 50px;
  left: 2px;
  background-color: #69C054;
  transition: 0.4s;
}

.restore-password .container .contSwitch .slider .text {
  z-index: 3;
  color: #303030;
  font-family: "DM Sans";
  font-size: 1.5rem;
}

.restore-password .container .contSwitch input:checked+.slider {
  /* background-color: #2196F3; */
  transition: 0.4s;
}

.restore-password .container .contSwitch input:checked+.slider:before {
  transform: translateX(57px);
  background: #FF8876;
}

.restore-password .container .containerOptionsSwitch {
  position: relative;
  width: 100%;
  /* Ajusta según necesidad */
  overflow: hidden;
  height: 20rem;
}

.restore-password .container .containerOptionsSwitch .content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: start;
  text-align: center;
  background: transparent;
  border-radius: 8px;
  transition: opacity 0.5s ease-in-out;
  padding-top: 2rem;
  z-index: 5;
}

.restore-password .container .containerOptionsSwitch .content.fadeCalendar {
  display: none;
}

.flatpickr-day.selected,
.flatpickr-day.selected.prevMonthDay {
  background: #e6e6e6;
  border-color: #e6e6e6;
  color: black !important;
}

.flatpickr-day:hover {
  border-color: #959ea9;
  background: none;
}

.flatpickr-day.selected:hover {
  background: #68c054 !important;
  /* Color personalizado */
  border-color: #68c054 !important;
  color: white !important;
}

.flatpickr-day.selected:focus {
  background: #68c054 !important;
  /* Color personalizado */
  border-color: #68c054 !important;
  color: white !important;
}

.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
  fill: #68c054;
}

.fadeCalendar {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
}

.showCalendar {
  opacity: 1;
  visibility: visible;
}

.restore-password .container .containerOptionsSwitch .content .containerWeek {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 1rem;
}

.restore-password .container .containerOptionsSwitch .content .titleWeek {
  color: #303030;
  font-family: "DM Sans";
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 500;
  text-align: left;
}



.restore-password .container .containerOptionsSwitch .content .checkbox-container {
  width: 2.4rem;
  height: 2.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #ccc;
  border-radius: 50%;
  cursor: pointer;
  user-select: none;
  transition: background 0.3s ease-in-out;
}

.restore-password .container .containerOptionsSwitch .content .checkbox-container span {
  color: #000;
  font-family: "DM Sans";
  font-size: 1.5rem;
  font-weight: 500;
}

/* Color cuando está activo (checkbox marcado) */
.restore-password .container .containerOptionsSwitch .content .checkbox-container.active {
  background: #4CAF50;
}

/* Ocultamos los checkboxes */
.restore-password .container .containerOptionsSwitch .content .hidden-checkbox {
  display: none;
}


#calendarContainer {
  max-width: 300px;
}

/* Cambia el color del mes y el año */
.flatpickr-current-month {
  font-family: "DM Sans";
  color: var(--color-green) !important;
  /* Color personalizado */
  font-weight: 700;
  /* Opcional: texto en negrita */
}

/* Cambia el color del input donde aparece el mes y el año */
.flatpickr-monthDropdown-months,
.numInput {
  font-family: "DM Sans";
  color: var(--color-green) !important;
  font-weight: 700;
}


.restore-password button#sendCalendar {
  display: block;
}

.restore-password button#sendCalendar.hiddenBtn {
  display: none;
}

.hiddenBtn {
  display: none;
}



#contCalendar .container.containerSchedule {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  z-index: 5;
  margin-top: 3rem;
  margin-bottom: 3rem;
}


.containerSchedule .detallesRecipesAux {
  padding: 1rem;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 2rem;
  height: 12rem;
}

.containerSchedule .sendInfoCalendar {
  height: 14rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.containerSchedule .detallesRecipesAux.fadeContainer {
  display: none;
}

.containerSchedule .sendInfoCalendar.fadeContainer {
  display: none;
}


.fadeContainer {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
}

.showContainer {
  opacity: 1;
  visibility: visible;
}


.restore-password button#confirmBtnCalendar {
  background: var(--color-green);
  color: white;
  border-radius: 32px;
  text-align: center;
  padding: .5rem;
  padding-right: 20px;
  font-size: 1.5rem;
  width: 17rem;
  background-image: url(/static/img/hojita.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-position-x: 13rem;
  font-weight: 400;
  border: transparent;
  margin-bottom: 2rem;
}





.containerSchedule .detallesRecipesAux .detailsLeft h4 {
  font-family: "DM Sans";
  color: #393F2E;
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  margin-bottom: 1.2rem;
}

.containerSchedule .detallesRecipesAux .detailsLeft a.linkRecipe {
  color: #69C054;
  font-family: "DM Sans";
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
}

.containerSchedule .detallesRecipesAux .detailsLeft a.linkRecipe:hover {
  text-decoration: none;
}

.containerSchedule .detallesRecipesAux .detailsRight .imgRecipe {
  border-radius: 10px;
  width: 8rem;
  height: 8rem;
  /* background-color: red; */
  position: relative;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.containerSchedule .detallesRecipesAux .detailsRight .imgRecipe a.btnDelete {
  width: 3rem;
  height: 3rem;
  background: #69C054;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  line-height: 1;
  position: absolute;
  bottom: -10%;
  left: -20%;
}








/* Estilo para fechas preseleccionadas (del backend) */
.flatpickr-day.preselected,
.flatpickr-day.selected.prevMonthDay,
.flatpickr-day.selected.prevMonthDay {
  background: #e6e6e6;
  border-color: #e6e6e6;
  color: black !important;
}












.restore-password #contFrom {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  padding-left: 5%;
  padding-right: 5%;
}

.restore-password #contFromSecond {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  padding-left: 5%;
  padding-right: 5%;
}

.alert-dismissible .close {
  position: absolute;
  top: 0;
  right: 0;
  padding: .75rem 1.25rem;
  color: inherit;
  background: no-repeat;
  width: auto;
}

.restore-password #contFromSecond {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;

}

.restore-password #contFrom label,
.restore-password #contFromSecond label {
  text-align: start;
  font-weight: 700;
  font-size: 1.1rem;
}

.restore-password #contFrom input,
.restore-password #contFromSecond input {
  display: block;
  width: 100%;
  height: calc(1.5em + .75rem + 2px);
  padding: .375rem .75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #495057;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-radius: .25rem;
  transition: border-color .15s ease-in-out,
    box-shadow .15s ease-in-out;
  background: rgba(57, 63, 46, 0.10);
  height: 3rem;
  border: none;
  border-radius: 50px !important;
  text-align: center;
}

.restore-password #contFrom small,
.restore-password #contFromSecond small {
  margin-top: .8rem;
  color: #969696;
  font-size: 85%;
}

.restore-password .contBtn {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 3rem;
  flex-direction: column;
}

.restore-password .contBtn#contCalendarBtn {
  height: 5rem;
}

.restore-password button {
  background: var(--color-green);
  color: white;
  border-radius: 32px;
  text-align: center;
  padding: .5rem;
  padding-right: 20px;
  font-size: 1.5rem;
  width: 13rem;
  background-image: url(/static/img/hojita.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-position-x: 9.5rem;
  font-weight: 400;
  border: transparent;
  margin-bottom: 2rem;
}
.restore-password button:disabled {
  opacity: .65;
} 

.restore-password button#confirmBtn {
  display: none;
}

.restore-password a#btn-return {
  width: 50%;
  margin-bottom: 5rem;
  padding: 2px;
  font-size: 1.43rem;
  background-color: #fff;
  border-radius: 20px;
  color: #69c054;
  border: 1px solid #69c054;
  border: 1px solid #69c054;
  display: flex;
  justify-content: center;
  align-items: center;
}

.restore-password a#btn-return:hover {
  width: 50%;
  margin-bottom: 5rem;
  padding: 2px;
  font-size: 1.43rem;
  background-color: #fff;
  border-radius: 20px;
  color: #69c054;
  border: 1px solid #69c054;
  border: 1px solid #69c054;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
}

.password-reset-done {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
  position: relative;
  height: calc(100vh - 15rem);
}

.password-reset-done #contReset {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 100%;
}

.password-reset-done #contReset .contSVG {
  display: flex;
  width: 90%;
  justify-content: center;
}

.password-reset-done #contReset .contSVG svg {
  width: 9rem;
}

.password-reset-done #contReset .strongtext {
  font-size: 1.6rem;
  font-weight: 700;
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.password-reset-done #contReset .textNormal {
  text-align: center;
}

.password-reset-done #contReset #done {
  background: var(--color-green);
  color: white;
  border-radius: 32px;
  text-align: center;
  padding: .5rem;
  padding-right: 20px;
  font-size: 1.5rem;
  width: 13rem;
  background-image: url(/static/img/hojita.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-position-x: 9.5rem;
  font-weight: 400;
  border: transparent;
  margin-top: 3rem;
  margin-bottom: 3rem;
}

.password-reset-done #contReset #signupPasswordReset {
  color: #69c054;
  margin-bottom: 114px;
}

.password-reset-done #contReset #pPasswordReset {
  text-align: center;
  margin-top: 40px;
}
/* send confirmation mail */
.send-mail {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
  position: relative;
  height: calc(100vh - 15rem);
}

.send-mail #contReset {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 100%;
}

.send-mail #contReset .contSVG {
  display: flex;
  width: 90%;
  justify-content: center;
}

.send-mail #contReset .contSVG svg {
  width: 9rem;
}

.send-mail #contReset .strongtext {
  font-size: 1.6rem;
  font-weight: 700;
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.send-mail #contReset .textNormal {
  text-align: center;
  margin-left: 2rem;
  margin-right: 2rem;
  margin-top: .5rem;  
  margin-bottom: .5rem; 
}

.send-mail #contReset #done {
  background: var(--color-green);
  color: white;
  border-radius: 32px;
  text-align: center;
  padding: .5rem;
  padding-right: 20px;
  font-size: 1.5rem;
  width: 13rem;
  background-image: url(/static/img/hojita.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-position-x: 9.5rem;
  font-weight: 400;
  border: transparent;
  margin-top: 3rem;
  margin-bottom: 3rem;
}

.send-mail #contReset #signupPasswordReset {
  color: #69c054;
  margin-bottom: 114px;
}

.send-mail #contReset #pPasswordReset {
  text-align: center;
  margin-top: 40px;
}

.password-reset-done .contImg {
  width: 8rem;
  height: 11rem;
  background: url(/static/img/fruta-derecha.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  right: -3%;
  top: 80%;
}

.send-mail #contReset #sendName {
  color: #6c757d; /* gris Bootstrap */
}

.send-mail #incorrectEmail {
  margin-top: 1.5rem;  
}

/* inicio questions */


.cont-questions-frecuent {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
  position: relative;
  height: calc(100vh - 15rem);
}

.cont-questions-frecuent #contQuestions {

  height: 100%;
}

.cont-questions-frecuent #contQuestions .welcome-box {
  margin-left: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.cont-questions-frecuent #contQuestions .welcome-box .hello .hi {
  text-align: center;
}

.cont-questions-frecuent #contQuestions .contSVG svg {
  width: 9rem;
}

.cont-questions-frecuent #contQuestions .strongtext {
  font-size: 1.6rem;
  font-weight: 700;
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.cont-questions-frecuent #contQuestions .textNormal {
  text-align: center;
}

.cont-questions-frecuent #contQuestions a {
  background: var(--color-green);
  color: white;
  border-radius: 32px;
  text-align: center;
  padding: .5rem;
  padding-right: 20px;
  font-size: 1.5rem;
  width: 13rem;
  background-image: url(/static/img/hojita.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-position-x: 9.5rem;
  font-weight: 400;
  border: transparent;
  margin-top: 3rem;
  margin-bottom: 3rem;
}

#contQuestions .welcome-box {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

#contQuestions .welcome-box .hello {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

#contQuestions .welcome-box .hello .hi {
  width: 14rem;
  text-align: center;
}

#contQuestions #accordionFaqs.accordion {
  margin-top: 2rem;
}

#contQuestions #accordionFaqs.accordion>.card {
  border: none;
  border-bottom: 1px solid #F9AA62;
}

#contQuestions #accordionFaqs.accordion>.card:first-child {
  border-top-right-radius: 30px;
  border-top-left-radius: 30px;
}

#contQuestions #accordionFaqs.accordion>.card>.card-header {
  border-radius: 0;
  margin-bottom: 0px;
  background: white;
  border-bottom: none;
}

#contQuestions #accordionFaqs.accordion>.card>.card-header.witoutborder {
  border-bottom: none;
}

#contQuestions #accordionFaqs.accordion>.card>.card-header h2 button {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1rem;
  color: black;
  text-decoration: none;
  font-weight: 600;
  line-height: 1.3;
  padding-left: 0;
  padding-right: 0;
}

#contQuestions #accordionFaqs.accordion>.card>.card-header h2 button:hover {
  text-decoration: none;
}

#contQuestions #accordionFaqs.accordion>.card>.card-header h2 button:focus {
  outline: 0;
  box-shadow: 0 0 0 .2rem #f5aa6257;
}

#contQuestions #accordionFaqs.accordion>.card>.card-header h2 button svg {
  transition: .3s;
  transform: rotate(180deg);
  transform-origin: center;
}

#contQuestions #accordionFaqs.accordion>.card>.card-header h2 button.collapsed svg {
  transform: rotate(0deg);
  transform-origin: center;
}

#contQuestions #accordionFaqs.accordion>.card>.card-header h2 button svg {
  min-width: 1.5rem;
  max-width: 1.5rem;
}

#contQuestions #accordionFaqs.accordion>.card>.card-header+div .card-body p a {
  text-decoration: underline;
  color: #69c053;
  ;
}

#contQuestions #accordionFaqs.accordion>.card>.card-header+div .card-body p span.bold {
  font-weight: 600;
}


#contQuestions .contexitBtn {
  display: flex;
  justify-content: center;
  margin-bottom: 6rem;
  margin-top: 6rem;
}

#contQuestions .contexitBtn a {
  background: white;
  color: var(--color-green);
  border: 1px solid var(--color-green);
  border-radius: 32px;
  text-align: center;
  padding: 1rem 0.6rem;
  padding-right: 20px;
  font-size: 1.5rem;
  width: 16rem;
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 1;
}

#contOneDay .contOneday {
  height: 45rem;
}

#contOneDay .contDotlottie dotlottie-player#checkBTN {
  width: 15rem;
  height: 15rem;
  margin-bottom: 3rem;
}

#contOneDay .contOneday {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

#contOneDay .contOneday h2 {
  font-size: 1.4rem;
  font-family: "DM Sans", sans-serif;
  font-weight: 500;
  margin-bottom: 2rem;
}

#contOneDay .contOneday p {
  margin-top: 0;
  margin-bottom: 0rem;
}

#contOneDay .contOneday p.textCenter {
  text-align: center;
}

#contOneDay .contBtns {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: auto;
  text-align: justify;
  font-weight: 600;
  width: 80%;
  padding-top: 2rem;
}

#contOneDay .contBtns a#initSesion {
  background: var(--color-green);
  color: white;
  border-radius: 32px;
  text-align: center;
  padding: .5rem;
  padding-right: 20px;
  font-size: 1.5rem;
  width: 14rem;
  background-image: url(/static/img/hojita.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-position-x: 11.5rem;
  font-weight: 400;
  border: transparent;
  margin-bottom: 2rem;
}

#contOneDay .contBtns a#initSesion:hover {
  text-decoration: none;
}

#contOneDay .contBtns a#createUser {
  background: var(--color-green);
  color: white;
  border-radius: 32px;
  text-align: center;
  padding: .5rem;
  padding-right: 20px;
  font-size: 1.5rem;
  width: 14rem;
  background-image: url(/static/img/hojita.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-position-x: 11.5rem;
  font-weight: 400;
  border: transparent;
  margin-bottom: 2rem;
}

#contOneDay .contBtns a#createUser:hover {
  text-decoration: none;
}

#contOneDay .contexitBtn a {
  background: white;
  color: var(--color-green);
  border: 1px solid var(--color-green);
  border-radius: 32px;
  text-align: center;
  padding: 1rem 0.6rem;
  padding-right: 20px;
  font-size: 1.5rem;
  width: 16rem;
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 1;
  margin-top: 2rem;
}

#contOneDay .contexitBtn a {
  text-decoration: none;
}

#contOneDay .contexitBtn a svg {
  margin-right: 1rem;
}

#contOneDay .contexitBtn a svg {
  margin-right: 1rem;
}

.contExpired .contReloj {
  height: 30rem;
  background-image: url(/static/img/challenges/relojarena.png);
  background-repeat: no-repeat;
  background-position: center;
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.contExpired .contBtn {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 3rem;
  flex-direction: column;
}

.contExpired .contBtn button {
  background: var(--color-green);
  color: white;
  border-radius: 32px;
  text-align: center;
  padding: .5rem;
  padding-right: 20px;
  font-size: 1.5rem;
  width: 13rem;
  background-image: url(/static/img/hojita.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-position-x: 9.5rem;
  font-weight: 400;
  border: transparent;
  margin-bottom: 2rem;
}

.cont-questions-frecuent .contImg {
  width: 8rem;
  height: 11rem;
  background: url(/static/img/fruta-derecha.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  right: -3%;
  top: 70%;
}

/* fin questions  */



.password-reset-done .contImg {
  width: 8rem;
  height: 11rem;
  background: url(/static/img/fruta-derecha.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  right: -3%;
  top: 80%;
}



.password-reset-complete {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
  position: relative;
  height: calc(100vh - 15rem);
}

.password-reset-complete #contReset {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 100%;
}

.password-reset-complete #contReset .contSVG {
  display: flex;
  width: 90%;
  justify-content: center;
}

.password-reset-complete #contReset .contSVG svg {
  width: 9rem;
}

.password-reset-complete #contReset .strongtext {
  font-size: 1.6rem;
  font-weight: 700;
  margin-top: 2rem;
  margin-bottom: 2rem;
  text-align: center;
  line-height: 1;
  width: 80%;
}

.password-reset-complete #contReset .textNormal {
  text-align: center;
}

.password-reset-complete #contReset a {
  background: var(--color-green);
  color: white;
  border-radius: 32px;
  text-align: center;
  padding: .5rem;
  padding-right: 20px;
  font-size: 1.5rem;
  width: 13rem;
  background-image: url(/static/img/hojita.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-position-x: 9.5rem;
  font-weight: 400;
  border: transparent;
  margin-top: 3rem;
  margin-bottom: 3rem;
}


.password-reset-complete .contImg {
  width: 8rem;
  height: 11rem;
  background: url(/static/img/fruta-derecha.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  right: -3%;
  top: 80%;
}

#parentDiv {
  overflow-y: scroll;
}

.contWelcome {
  margin-top: 4rem;
  padding: 1rem;
  padding-left: 0;
  margin-bottom: 1rem;
}

.contWelcome p {
  margin: 0;
  font-size: 1.2rem;
}

.contWelcome p.textStrong {
  font-weight: bold;
  font-size: 1.2rem;
}

.contChallenges#headerTopUp {
  background-image: url(/static/img/fruta-derecha.png);
  background-size: 90px;
  background-position: 100% 40px;
  background-repeat: no-repeat;
  padding-top: 1rem;
}

.instructions #notaFormat {
  font-weight: normal;
  margin-top: 16px;
  font-size: 14px;
  line-height: 1.5;
  text-align: left;
  color: #333333;
}

.contIntputSearch #id_search {
  background: rgba(57, 63, 46, 0.10);
  height: 3rem;
  border: none;
  border-radius: 50px !important;
  width: 100%;
  padding-left: 3rem;
  background-image: url(/static/img/search.png);
  background-repeat: no-repeat;
  background-size: 1.5rem;
  background-position: 1rem center;
  margin-top: 1rem;
  margin-bottom: 2rem;
}

.contSuggestion {
  height: 14rem;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 2rem;
  position: relative;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

.contSuggestion:hover {
  text-decoration: none;
}

.contSuggestion:before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 8px;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 0;
}

.contSuggestion>* {
  position: relative;
  z-index: 1;
}

.contSuggestion .contTop {
  display: flex;
  justify-content: end;
  align-items: center;
  width: 100%;
}

.contSuggestion .contTop span {
  display: block;
  max-width: 14rem;
  white-space: normal;
  word-break: break-word;
  align-self: flex-start;
  border-radius: 43px;
  background: rgba(0, 0, 0, 0.60);
  color: white;
  padding: .5rem 1.5rem;
}

.contSuggestion .contBottom {
  display: flex;
  justify-content: start;
  align-items: center;
  width: 100%;
}

.contSuggestion .contBottom p {
  margin: 0;
  font-size: 1.2rem;
  color: white;
  width: 50%;
}

.masonryContainer {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-count: 2;
  column-gap: 1rem;
  gap: 1rem;
}

.masonryContainer .itemMasonry {
  margin-bottom: 1rem;
  break-inside: avoid;
  padding: .5rem;
  border-radius: 8px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  background-position: center !important;
  background-size: cover !important;
}

.masonryContainer .itemMasonry:hover {
  text-decoration: none;
}

.masonryContainer .itemMasonry .topItem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-top: .5rem;
}

.masonryContainer .itemMasonry .topItem .top-left {
  display: block;
  /* Cambié a block para que se ajuste más naturalmente */
  max-width: 7rem;
  /* Asegura que el texto no ocupe más del 70% */
  white-space: normal;
  word-break: break-word;
  align-self: flex-start;
  /* Esto asegura que no se estire verticalmente */
  border-radius: 43px;
  background: rgba(0, 0, 0, 0.60);
  color: white;
  padding: 6px 10px;

}

.masonryContainer .itemMasonry .topItem .top-right {
  border-radius: 50%;
  background-color: rgba(248, 186, 27, 1);
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.masonryContainer .itemMasonry .topItem .top-right img{
  width: .8rem;
  height: auto;
}

.masonryContainer .itemMasonry .topItem .top-left p {
  margin: 0;
  padding: 0;
  line-height: 1;
  font-size: .8rem;
}


.masonryContainer .itemMasonry .topItem .top-right {
  color: white;
}

.masonryContainer .itemMasonry .bottomItem {
  width: 100%;
  margin-bottom: 1rem;
}

.masonryContainer .itemMasonry .bottomItem p {
  margin: 0;
  font-size: 1.2rem;
  color: white;
  line-height: 1;
}

.contBtnInstructions a#returnMenuMain {
  width: 50%;
  margin-bottom: 5rem;
  padding: 2px;
  font-size: 1.43rem;
  background-color: #fff;
  border-radius: 20px;
  color: #69c054;
  border: 1px solid #69c054;
  border: 1px solid #69c054;
  display: flex;
  justify-content: center;
  align-items: center;
}

.contBtnInstructions a#returnMenuMain:hover {
  width: 50%;
  margin-bottom: 5rem;
  padding: 2px;
  font-size: 1.43rem;
  background-color: #fff;
  border-radius: 20px;
  color: #69c054;
  border: 1px solid #69c054;
  border: 1px solid #69c054;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
}

.contBtnInstructions a#returnMenuMain svg {
  margin-right: .5rem;
}