/* =========================================================
   BABY FOOD — Grade ingredients and quality accordion
========================================================= */

.babyFoodGrade__inner{
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(340px, .72fr);
  gap: clamp(38px, 6vw, 88px);

  /* Evita que la columna izquierda salte al cambiar el accordion */
  align-items: start;
}

.babyFoodGrade__content{
  max-width: 760px;
}

#baby-food-grade .sectionTitle{
  max-width: 13.5ch;
}

#baby-food-grade .sectionLead{
  max-width: 680px;
}


/* =========================================================
   Available formats
========================================================= */

.babyFoodGrade__formats{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;

  margin-top: 30px;
}

.babyFoodGrade__formats span{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  min-height: 38px;
  padding: 9px 14px;

  border: 1px solid rgba(30,127,78,.20);
  border-radius: var(--radius-pill);

  background:  var(--brand-600);
  color: #fff;

  font-size: 13px;
  font-weight: 760;
  line-height: 1;
}

.babyFoodGrade__formats svg{
  width: 14px;
  height: 14px;

  display: block;

  fill: currentColor;
  color: #fff;
}


/* =========================================================
   Quality panel
========================================================= */

.babyFoodGrade__panel{
  position: relative;

  min-width: 0;
  min-height: 540px;

  padding: 0;

  border: 0;
  background: transparent;
  color: var(--brand-900);
  box-shadow: none;
}

.babyFoodGrade__panel .panelTop{
  margin-bottom: 18px;
}


/* =========================================================
   Accordion
========================================================= */

.babyFoodGradeAccordion{
  display: grid;
  gap: 10px;

  min-height: 480px;
}

.babyFoodGradeAccordion__item{
  overflow: hidden;

  border: 1px solid rgba(10,47,38,.08);
  border-radius: var(--radius-md);

  background: rgba(255,255,255,.90);
  color: var(--brand-900);

  box-shadow: 0 12px 28px rgba(10,47,38,.04);

  transition:
    border-color var(--transition),
    background var(--transition),
    box-shadow var(--transition),
    color var(--transition),
    transform var(--transition);
}


/* Closed item hover */

.babyFoodGradeAccordion__item:hover{
  border-color: rgba(30,127,78,.22);
  background: #FFFFFF;
  box-shadow: 0 15px 32px rgba(10,47,38,.07);
}


/* Active item */

.babyFoodGradeAccordion__item.is-active{
  border-color: rgba(201,151,53,.22);

  background:
    linear-gradient(
      150deg,
      #155F43 0%,
      #104E3A 100%
    );

  color: #FFFFFF;

  box-shadow: 0 18px 38px rgba(10,47,38,.14);
}


/* Trigger */

.babyFoodGradeAccordion__trigger{
  appearance: none;
  cursor: pointer;

  width: 100%;
  min-height: 62px;
  padding: 15px 18px;

  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;

  border: 0;
  background: transparent;
  color: inherit;

  text-align: left;
  font: inherit;
}

.babyFoodGradeAccordion__trigger:focus-visible{
  outline: 3px solid rgba(30,127,78,.20);
  outline-offset: -3px;
  border-radius: var(--radius-md);
}


/* Number */

.babyFoodGradeAccordion__number{
  min-width: 22px;

  color: var(--brand-600);
  font-size: 14px;
  font-weight: 820;
  line-height: 1;

  transition: color var(--transition);
}

.babyFoodGradeAccordion__item.is-active
.babyFoodGradeAccordion__number{
  color: var(--accent-400);
}


/* Title */

.babyFoodGradeAccordion__title{
  color: currentColor;
  font-size: 15px;
  font-weight: 760;
  line-height: 1.32;
}


/* Plus/minus icon */

.babyFoodGradeAccordion__icon{
  position: relative;

  width: 25px;
  height: 25px;

  border: 1px solid rgba(30,127,78,.15);
  border-radius: 50%;

  background: rgba(30,127,78,.06);

  transition:
    background var(--transition),
    border-color var(--transition),
    transform var(--transition);
}

.babyFoodGradeAccordion__icon::before,
.babyFoodGradeAccordion__icon::after{
  content: "";

  position: absolute;
  left: 50%;
  top: 50%;

  width: 10px;
  height: 2px;

  border-radius: var(--radius-pill);
  background: var(--brand-600);

  transform: translate(-50%, -50%);

  transition:
    background var(--transition),
    transform var(--transition);
}

.babyFoodGradeAccordion__icon::after{
  transform:
    translate(-50%, -50%)
    rotate(90deg);
}

.babyFoodGradeAccordion__item:hover
.babyFoodGradeAccordion__icon{
  border-color: rgba(30,127,78,.24);
  background: rgba(30,127,78,.10);
}

.babyFoodGradeAccordion__item.is-active
.babyFoodGradeAccordion__icon{
  border-color: rgba(255,255,255,.24);
  background: rgba(255,255,255,.10);
}

.babyFoodGradeAccordion__item.is-active
.babyFoodGradeAccordion__icon::before,
.babyFoodGradeAccordion__item.is-active
.babyFoodGradeAccordion__icon::after{
  background: #FFFFFF;
}

.babyFoodGradeAccordion__item.is-active
.babyFoodGradeAccordion__icon::after{
  transform:
    translate(-50%, -50%)
    rotate(0deg);
}


/* Expandable content */

.babyFoodGradeAccordion__content{
  display: grid;
  grid-template-rows: 0fr;

  opacity: 0;

  padding-inline: 52px 18px;
  padding-bottom: 0;

  transition:
    grid-template-rows .38s cubic-bezier(.22, 1, .36, 1),
    opacity .24s ease,
    padding-bottom .38s cubic-bezier(.22, 1, .36, 1);
}

.babyFoodGradeAccordion__content p{
  min-height: 0;
  overflow: hidden;

  max-width: 440px;
  margin: 0;

  color: rgba(255,255,255,.80);
  font-size: 13px;
  line-height: 1.58;
}

.babyFoodGradeAccordion__item.is-active
.babyFoodGradeAccordion__content{
  grid-template-rows: 1fr;
  opacity: 1;
  padding-bottom: 18px;
}


/* =========================================================
   Responsive
========================================================= */

@media (max-width: 900px){
  .babyFoodGrade__inner{
    grid-template-columns: 1fr;
    gap: 42px;
  }

  .babyFoodGrade__panel,
  .babyFoodGradeAccordion{
    min-height: 0;
  }
}

@media (max-width: 680px){
  .babyFoodGradeAccordion__trigger{
    min-height: 60px;
    padding: 14px 15px;
    gap: 10px;
  }

  .babyFoodGradeAccordion__content{
    padding-inline: 47px 15px;
  }

  .babyFoodGradeAccordion__item.is-active
  .babyFoodGradeAccordion__content{
    padding-bottom: 16px;
  }
}
/* =========================================================
   BABY FOOD — Available baby food grade ingredients
========================================================= */


/* Grid */

.babyFoodProducts__grid{
  display: grid;
  grid-template-columns:
    minmax(0, 1.18fr)
    minmax(320px, .82fr);

  gap: 20px;

  max-width: 1120px;
  margin-inline: auto;
    overflow: visible;

}


/* =========================================================
   Product group cards
========================================================= */

.babyFoodProductGroup{
  position: relative;
  isolation: isolate;
  overflow: hidden;

  min-width: 0;
  min-height: 270px;

  display: flex;
  flex-direction: column;
  align-items: flex-start;

  padding: clamp(27px, 3vw, 36px);

  border: 1px solid rgba(10,47,38,.08);
  border-radius: var(--radius-lg);

  box-shadow: 0 18px 44px rgba(10,47,38,.055);

  transition:
    transform var(--transition),
    border-color var(--transition),
    box-shadow var(--transition);
}

.babyFoodProductGroup:hover{
  transform: translateY(-3px);
}


/* =========================================================
   Fruits — warm natural card
========================================================= */

.babyFoodProductGroup--fruits{
  border-color: rgba(201,151,53,.18);

  background:
    radial-gradient(
      circle at 92% 8%,
      rgba(241,166,59,.15) 0%,
      rgba(241,166,59,.055) 28%,
      transparent 54%
    ),
    linear-gradient(
      145deg,
      #FFFDF8 0%,
      #FCF6EB 100%
    );

  color: var(--brand-900);
}

.babyFoodProductGroup--fruits::after{
  content: "";

  position: absolute;
  z-index: -1;
  right: -75px;
  bottom: -95px;

  width: 230px;
  height: 230px;

  border: 1px solid rgba(201,151,53,.12);
  border-radius: 50%;

  pointer-events: none;
}

.babyFoodProductGroup--fruits:hover{
  border-color: rgba(201,151,53,.30);

  box-shadow:
    0 24px 54px rgba(10,47,38,.075),
    0 8px 26px rgba(201,151,53,.07);
}


/* =========================================================
   Vegetables & roots — green feature panel
========================================================= */

.babyFoodProductGroup--vegetables{
  border-color: rgba(201,151,53,.18);

  background:linear-gradient(
      150deg,
      #125B43 0%,
      #0E503D 100%
    );

  color: #FFFFFF;

  box-shadow: 0 20px 48px rgba(10,47,38,.13);
}

.babyFoodProductGroup--vegetables:hover{
  border-color: rgba(201,151,53,.28);
  box-shadow: 0 25px 58px rgba(10,47,38,.17);
}


/* =========================================================
   Card heading
========================================================= */

.babyFoodProductGroup__top{
  position: relative;
  z-index: 1;

  display: flex;
  align-items: flex-start;
  gap: 16px;

  margin-bottom: 30px;
}

.babyFoodProductGroup__icon{
  flex: 0 0 auto;

  width: 46px;
  height: 46px;

  display: grid;
  place-items: center;

  border-radius: 50%;
}

.babyFoodProductGroup--fruits .babyFoodProductGroup__icon{
  border: 1px solid rgba(201,151,53,.20);

  background:
    linear-gradient(
      145deg,
      #E9B24C 0%,
      #C99735 100%
    );

  color: #FFFFFF;

  box-shadow: 0 9px 22px rgba(201,151,53,.18);
}

.babyFoodProductGroup--vegetables
.babyFoodProductGroup__icon{
  border: 1px solid rgba(255,255,255,.20);
  background: #1e7f4ed9;
  color: #FFFFFF;
}

.babyFoodProductGroup__icon svg{
  width: 22px;
  height: 22px;

  display: block;

  fill: currentColor;
  color: currentColor;
}

.babyFoodProductGroup__eyebrow{
  display: block;

  margin: 2px 0 8px;

  font-size: 11px;
  font-weight: 820;
  letter-spacing: .13em;
  line-height: 1;
  text-transform: uppercase;
}

.babyFoodProductGroup--fruits
.babyFoodProductGroup__eyebrow{
  color: #B77B18;
}

.babyFoodProductGroup--vegetables
.babyFoodProductGroup__eyebrow{
  color: var(--accent-400);
}

.babyFoodProductGroup h3{
  max-width: 18ch;
  margin: 0;

  font-size: clamp(24px, 2.15vw, 33px);
  line-height: 1.03;
  letter-spacing: -.042em;
  font-weight: 760;
}

.babyFoodProductGroup--fruits h3{
  color: var(--brand-900);
}

.babyFoodProductGroup--vegetables h3{
  color: #FFFFFF;
}


/* =========================================================
   Chips
========================================================= */

.babyFoodProductGroup__chips{
  position: relative;
  z-index: 1;

  margin-top: auto;
}


/* =========================================================
   Options note
========================================================= */

.babyFoodProducts__note{
  max-width: 1120px;
  margin: 20px auto 0;
  padding: 17px 22px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;

  border: 1px solid rgba(30,127,78,.12);
  border-radius: var(--radius-md);

  background:
    linear-gradient(
      90deg,
      rgba(240,247,241,.94) 0%,
      rgba(252,250,244,.94) 100%
    );
}

.babyFoodProducts__note span{
  flex: 0 0 auto;

  display: inline-flex;
  align-items: center;
  gap: 9px;

  color: var(--brand-600);
  font-size: 11px;
  font-weight: 820;
  letter-spacing: .13em;
  line-height: 1;
  text-transform: uppercase;
}

.babyFoodProducts__note span::before{
  content: "";

  width: 7px;
  height: 7px;

  border-radius: 50%;
  background: var(--accent-500);
}

.babyFoodProducts__note p{
  max-width: 780px;
  margin: 0;

  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.55;
}


/* =========================================================
   Responsive
========================================================= */

@media (max-width: 900px){
  .babyFoodProducts__grid{
    grid-template-columns: 1fr;
    max-width: 760px;
  }

  .babyFoodProducts__note{
    max-width: 760px;
  }
}

@media (max-width: 680px){
  .babyFoodProductGroup{
    min-height: auto;
    padding: 24px 22px;
  }

  .babyFoodProductGroup__top{
    margin-bottom: 24px;
  }

  .babyFoodProductGroup h3{
    max-width: 19ch;
  }

  .babyFoodProductGroup__chips .chip{
    white-space: normal;
  }

  .babyFoodProducts__note{
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }
}

.babyPouches__capabilities{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;

  margin-top: 4px;
}

.babyPouchesCapability{
  position: relative;
  overflow: hidden;

  padding: 12px 18px;

  display: flex;
  align-items: center;
  gap: 14px;

  border-radius: var(--radius-md);
  border: 1px solid rgba(30,127,78,.14);
  background: rgba(255,255,255,.94);
  color: var(--brand-900);

  box-shadow: 0 12px 30px rgba(0,0,0,.08);

  transition:
    transform var(--transition),
    border-color var(--transition),
    box-shadow var(--transition),
    background var(--transition);
}



.babyPouchesCapability:hover{
  transform: translateY(-2px);
  border-color: rgba(30,127,78,.24);
  background: #FFFFFF;
  box-shadow: 0 16px 36px rgba(0,0,0,.10);
}

.babyPouchesCapability__icon{
  flex: 0 0 auto;

  width: 40px;
  height: 40px;

  display: grid;
  place-items: center;

  border-radius: 50%;
  background: var(--brand-600);
  color: #FFFFFF;
}

.babyPouchesCapability__icon svg{
  width: 20px;
  height: 20px;

  display: block;

  fill: currentColor;
  color: currentColor;
}

.babyPouchesCapability h3{
  margin: 0;

  color: var(--brand-900);
  font-size: clamp(14px, 1vw, 16px);
  line-height: 1.06;
  letter-spacing: -.035em;
  font-weight: 600;
}


/* =========================================================
   BABY FOOD PAGE — CTA
========================================================= */

.babyFoodCta{
  background: var(--bg-warm);
}

.babyFoodCta__card{
  position: relative;
  overflow: hidden;

  max-width: 1120px;
  margin-inline: auto;
  padding: clamp(30px, 5vw, 56px);

  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(28px, 5vw, 72px);
  align-items: center;

  border-radius: var(--radius-xl);
  border: 1px solid rgba(201,151,53,.16);
  background:
    radial-gradient(
      circle at 88% 12%,
      rgba(30,127,78,.22) 0%,
      rgba(30,127,78,.08) 34%,
      transparent 62%
    ),
    linear-gradient(
      145deg,
      var(--surface-green) 0%,
      var(--surface-dark) 100%
    );

  color: #FFFFFF;
  box-shadow: 0 22px 56px rgba(10,47,38,.14);
}

.babyFoodCta__card::before{
  content: "";
  position: absolute;
  right: 44px;
  top: 46px;

  width: 86px;
  height: 2px;

  border-radius: var(--radius-pill);
  background: rgba(201,151,53,.66);
}

.babyFoodCta__card::after{
  content: "";
  position: absolute;
  right: 42px;
  bottom: 36px;

  width: 38px;
  height: 38px;

  border-radius: 50%;
  border: 1px solid rgba(201,151,53,.22);
  background: rgba(30,127,78,.10);
}

.babyFoodCta__content{
  position: relative;
  z-index: 1;

  max-width: 720px;
}

.babyFoodCta__kicker{
  display: inline-flex;
  align-items: center;
  gap: 9px;

  margin: 0 0 18px;

  color: var(--accent-400);
  font-size: 12px;
  font-weight: 820;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1;
}

.babyFoodCta__kicker::before{
  content: "";

  width: 8px;
  height: 8px;

  border-radius: 50%;
  background: var(--accent-500);
}

.babyFoodCta h2{
  max-width: 12ch;
  margin: 0;

  color: #FFFFFF;
  font-size: clamp(36px, 4.6vw, 62px);
  line-height: 1;
  letter-spacing: -.055em;
  font-weight: 800;
}

.babyFoodCta p:not(.babyFoodCta__kicker){
  max-width: 680px;
  margin: 22px 0 0;

  color: rgba(255,255,255,.78);
  font-size: clamp(16px, 1.25vw, 18px);
  line-height: 1.68;
}

.babyFoodCta__actions{
  position: relative;
  z-index: 1;

  display: grid;
  gap: 12px;

  min-width: 240px;
}

.babyFoodCta__actions .btn{
  justify-content: center;
}


/* Responsive */

@media (max-width: 860px){
  .babyFoodCta__card{
    grid-template-columns: 1fr;
  }

  .babyFoodCta__actions{
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
  }
}

@media (max-width: 680px){
  .babyFoodCta__card{
    padding: 30px 24px;
    border-radius: var(--radius-lg);
  }

  .babyFoodCta__card::before{
    right: 24px;
    top: 30px;
    width: 58px;
  }

  .babyFoodCta__card::after{
    display: none;
  }

  .babyFoodCta h2{
    max-width: 11ch;
    font-size: clamp(34px, 10vw, 48px);
  }

  .babyFoodCta__actions{
    width: 100%;
    display: grid;
  }

  .babyFoodCta__actions .btn{
    width: 100%;
  }
}