.elementor-18626 .elementor-element.elementor-element-b5cf0db{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-18626 .elementor-element.elementor-element-763fa1e{width:100%;max-width:100%;}.elementor-18626 .elementor-element.elementor-element-763fa1e.elementor-element{--align-self:center;--flex-grow:0;--flex-shrink:0;}/* Start custom CSS for html, class: .elementor-element-763fa1e */@import url("https://fonts.googleapis.com/css2?family=Lexend:wght@300;400;500;600;700;800;900&display=swap");


/* =========================================================
   FRUITY — PRODUCT HERO
========================================================= */

#fruity-slider {

  /* ---------- Flavor colors ---------- */

  --pear-bg: #c9e78a;
  --pear-accent: #174b3d;

  --apple-bg: #ffb2b2;
  --apple-accent: #d94d5d;

  --exotic-bg: #c1bff2;
  --exotic-accent: #5c5bea;


  /* ---------- Dynamic state ---------- */

  --current-background: var(--pear-bg);
  --current-accent: var(--pear-accent);


  /* ---------- UI ---------- */

  --white: #ffffff;
  --black: #111510;

  --ease-out:
    cubic-bezier(.22, 1, .36, 1);

  --ease-slide:
    cubic-bezier(.76, 0, .24, 1);


  position: relative;

  width: 100%;
  height: 100svh;

  min-height: 680px;

  overflow: hidden;

  isolation: isolate;

  font-family:
    "Lexend",
    sans-serif;

  background:
    var(--current-background);

  transition:
    background-color .8s var(--ease-out);
}


/* =========================================================
   ELEMENTOR RESET
========================================================= */

#fruity-slider *,
#fruity-slider *::before,
#fruity-slider *::after {
  box-sizing: border-box;
}


#fruity-slider img {
  display: block;

  max-width: 100%;

  height: auto;
}


#fruity-slider button {
  font: inherit;
}


#fruity-slider button,
#fruity-slider a {
  -webkit-tap-highlight-color:
    transparent;
}


#fruity-slider .fruity-main {
  position: relative;

  width: 100%;
  height: 100%;
}


/* =========================================================
   HEADER
========================================================= */

#fruity-slider .fruity-header {
  position: absolute;

  top: 0;
  left: 0;

  display: flex;

  align-items: center;
  justify-content: space-between;

  width: 100%;

  padding:
    28px
    clamp(28px, 4vw, 72px);

  z-index: 100;

  pointer-events: none;
}


#fruity-slider .logo {
  margin: 0;

  font-family:
    "Lexend",
    sans-serif;

  font-size:
    clamp(26px, 2.2vw, 38px);

  font-weight: 900;

  line-height: 1;

  letter-spacing: -.055em;

  color:
    var(--current-accent);

  transition:
    color .6s ease;
}


#fruity-slider .fruity-kicker {
  font-size: 11px;

  font-weight: 600;

  letter-spacing: .16em;

  text-transform: uppercase;

  color:
    color-mix(
      in srgb,
      var(--current-accent) 75%,
      transparent
    );

  transition:
    color .6s ease;
}


/* =========================================================
   MAIN TEXT
========================================================= */

#fruity-slider .text {
  position: absolute;

  inset: 0;

  z-index: 20;

  pointer-events: none;
}


/* =========================================================
   GIANT TITLE
========================================================= */

#fruity-slider .h1 {
  position: absolute;

  top: 49%;
  left: 50%;

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

  margin: 0 !important;

  font-family:
    "Lexend",
    sans-serif;

  font-size:
    clamp(
      160px,
      25vw,
      470px
    ) !important;

  font-weight: 800;

  line-height: .78 !important;

  letter-spacing:
    -.085em;

  white-space: nowrap;

  color:
    rgba(255,255,255,.78)
    !important;

  user-select: none;

  z-index: 1;

  will-change:
    transform,
    opacity,
    filter;

  text-shadow:
    0 1px 0
    rgba(255,255,255,.1);
}


/* =========================================================
   CAN / PRODUCT STAGE
========================================================= */

#fruity-slider .cane-stage {
  position: absolute;

  top: 49%;
  left: 50%;

  width:
    clamp(
      340px,
      33vw,
      570px
    );

  aspect-ratio: 1 / 1;

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

  z-index: 10;

  pointer-events: none;

  perspective: 1300px;

  will-change:
    transform;
}


/* ambient light */

#fruity-slider .cane-stage::before {
  content: "";

  position: absolute;

  top: 50%;
  left: 50%;

  width: 68%;
  height: 76%;

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

  border-radius: 50%;

  background:
    radial-gradient(
      ellipse,
      rgba(255,255,255,.38)
      0%,
      rgba(255,255,255,.17)
      32%,
      rgba(255,255,255,.05)
      53%,
      transparent
      74%
    );

  filter:
    blur(30px);

  opacity: .85;

  z-index: -2;
}


/* subtle floor shadow */

#fruity-slider .cane-stage::after {
  content: "";

  position: absolute;

  left: 50%;
  bottom: 12%;

  width: 42%;
  height: 7%;

  transform:
    translateX(-50%);

  border-radius: 50%;

  background:
    rgba(20, 25, 20, .16);

  filter:
    blur(18px);

  opacity: .55;

  z-index: -1;
}


/* =========================================================
   PRODUCT CANS
========================================================= */

#fruity-slider .product-can {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: contain;

  opacity: 0;

  visibility: hidden;

  transform:
    translate3d(
      0,
      28px,
      0
    )
    scale(.88)
    rotate(-3deg);

  filter:
    drop-shadow(
      0 30px 24px
      rgba(17, 26, 18, .14)
    );

  will-change:
    transform,
    opacity,
    filter;

  transition:
    opacity .4s ease,
    visibility .4s ease;
}


#fruity-slider .product-can.is-active {
  opacity: 1;

  visibility: visible;

  animation:
    fruity-can-float
    5.5s
    ease-in-out
    infinite;
}


/* very subtle product movement */

@keyframes fruity-can-float {

  0%,
  100% {

    transform:
      translate3d(
        0,
        0,
        0
      )
      rotate(-.35deg);

  }


  50% {

    transform:
      translate3d(
        0,
        -9px,
        0
      )
      rotate(.45deg);

  }

}


/* =========================================================
   SLIDE SYSTEM
========================================================= */

#fruity-slider
.section-container-main {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  overflow: hidden;

  z-index: 1;
}


#fruity-slider
.section-container {
  position: relative;

  display: flex;

  width: 100%;
  height: 100%;

  transform:
    translate3d(0,0,0);

  transition:
    transform
    .9s
    var(--ease-slide);

  will-change:
    transform;
}


#fruity-slider
.section {
  position: relative;

  flex:
    0 0 100%;

  width: 100%;
  height: 100%;

  overflow: hidden;
}


/* =========================================================
   BACKGROUNDS
========================================================= */

#fruity-slider
.section-pear {

  background:

    radial-gradient(
      circle
      at 50% 45%,
      rgba(255,255,255,.28)
      0%,
      rgba(255,255,255,.08)
      28%,
      transparent
      54%
    ),

    linear-gradient(
      135deg,
      #cce991 0%,
      #c6e184 100%
    );

}


#fruity-slider
.section-apple {

  background:

    radial-gradient(
      circle
      at 50% 45%,
      rgba(255,255,255,.28)
      0%,
      rgba(255,255,255,.08)
      28%,
      transparent
      54%
    ),

    linear-gradient(
      135deg,
      #ffbbbb 0%,
      #f6aaaa 100%
    );

}


#fruity-slider
.section-exotic {

  background:

    radial-gradient(
      circle
      at 50% 45%,
      rgba(255,255,255,.30)
      0%,
      rgba(255,255,255,.09)
      29%,
      transparent
      55%
    ),

    linear-gradient(
      135deg,
      #c9c6f7 0%,
      #bbb8ed 100%
    );

}


/* tiny atmospheric highlight */

#fruity-slider
.section::after {

  content: "";

  position: absolute;

  inset: 0;

  pointer-events: none;

  background:

    linear-gradient(
      120deg,
      rgba(255,255,255,.07),
      transparent 28%,
      transparent 72%,
      rgba(255,255,255,.05)
    );

}


/* =========================================================
   FRUIT BASE
========================================================= */

#fruity-slider .fruit-images {
  position: absolute;

  inset: 0;

  z-index: 5;

  pointer-events: none;
}


#fruity-slider .fruit-image {
  position: absolute;

  z-index: 3;

  transform-origin:
    center center;

  will-change:
    transform,
    opacity;
}


#fruity-slider .fruit-image img {
  width: 100%;

  height: auto;

  object-fit: contain;

  user-select: none;

  pointer-events: none;

  filter:
    drop-shadow(
      0 22px 17px
      rgba(20, 25, 20, .10)
    );
}


/*
  Eliminamos la sombra falsa del Pen.

  Los PNG + drop-shadow funcionan mejor
  con estas composiciones.
*/

#fruity-slider
.fruit-image::after {
  display: none;
}


/* =========================================================
   PEAR — ART DIRECTION
========================================================= */

/*
   Gran pera abajo izquierda
*/

#fruity-slider
.fruit-pear-1 {

  width:
    clamp(
      210px,
      21vw,
      365px
    );

  left: -3.5%;

  bottom: -3%;

  transform:
    rotate(-8deg);

}


/*
   Pera pequeña arriba izquierda
*/

#fruity-slider
.fruit-pear-2 {

  width:
    clamp(
      110px,
      11vw,
      185px
    );

  left: 16%;

  top: 18%;

  transform:
    rotate(11deg);

}


/*
   Pera arriba derecha
*/

#fruity-slider
.fruit-pear-3 {

  width:
    clamp(
      125px,
      12vw,
      205px
    );

  right: 10%;

  top: 14%;

  transform:
    rotate(-11deg);

}


/*
   La cuarta no aporta.
*/

#fruity-slider
.fruit-pear-4 {
  display: none;
}


/* =========================================================
   APPLE — ART DIRECTION
========================================================= */

/*
   Gajo protagonista arriba izquierda
*/

#fruity-slider
.fruit-apple-1 {

  width:
    clamp(
      190px,
      20vw,
      340px
    );

  left: -2%;

  top: 20%;

  transform:
    rotate(-16deg);

}


/*
   Gajo pequeño abajo izquierda
*/

#fruity-slider
.fruit-apple-2 {

  width:
    clamp(
      115px,
      12vw,
      195px
    );

  left: 19%;

  bottom: 12%;

  transform:
    rotate(18deg);

}


/*
   Gajo derecha
*/

#fruity-slider
.fruit-apple-3 {

  width:
    clamp(
      175px,
      17vw,
      290px
    );

  right: 7%;

  top: 15%;

  transform:
    rotate(13deg);

}


/*
   Ocultamos cuarto elemento para romper simetría
*/

#fruity-slider
.fruit-apple-4 {
  display: none;
}


/* =========================================================
   EXOTIC — ART DIRECTION
========================================================= */

/*
   Fruta inferior izquierda
*/

#fruity-slider
.fruit-exotic-1 {

  width:
    clamp(
      175px,
      18vw,
      300px
    );

  left: 4%;

  bottom: 8%;

  transform:
    rotate(-10deg);

}


/*
   Fruta superior derecha
*/

#fruity-slider
.fruit-exotic-2 {

  width:
    clamp(
      145px,
      15vw,
      240px
    );

  right: 10%;

  top: 13%;

  transform:
    rotate(13deg);

}


/*
   Fruta pequeña derecha inferior
*/

#fruity-slider
.fruit-exotic-3 {

  width:
    clamp(
      110px,
      11vw,
      180px
    );

  right: 22%;

  bottom: 14%;

  transform:
    rotate(-14deg);

}


#fruity-slider
.fruit-exotic-4 {
  display: none;
}


/* =========================================================
   SIDE CONTROLS
========================================================= */

#fruity-slider
.fruity-controls {
  position: absolute;

  inset: 0;

  z-index: 90;

  pointer-events: none;
}


#fruity-slider
.fruity-arrow {
  position: absolute;

  top: 50%;

  display: grid;

  place-items: center;

  width: 58px;
  height: 58px;

  padding: 0;

  border:
    1px solid
    rgba(255,255,255,.48);

  border-radius: 50%;

  background:
    rgba(255,255,255,.74);

  color:
    var(--current-accent);

  cursor: pointer;

  pointer-events: auto;

  transform:
    translateY(-50%);

  box-shadow:
    0 12px 32px
    rgba(20,25,20,.08);

  backdrop-filter:
    blur(16px);

  -webkit-backdrop-filter:
    blur(16px);

  transition:
    opacity .3s ease,
    transform .35s
    var(--ease-out),
    background-color .3s ease,
    color .5s ease,
    box-shadow .3s ease;
}


#fruity-slider
.fruity-arrow svg {
  width: 22px;
  height: 22px;
}


#fruity-slider
.fruity-arrow:hover {

  transform:
    translateY(-50%)
    scale(1.08);

  background:
    rgba(255,255,255,.94);

  box-shadow:
    0 16px 42px
    rgba(20,25,20,.12);

}


#fruity-slider
.fruity-arrow:active {

  transform:
    translateY(-50%)
    scale(.94);

}


#fruity-slider
.fruity-arrow:focus-visible {

  outline:
    2px solid
    var(--current-accent);

  outline-offset:
    4px;

}


#fruity-slider
.fruity-arrow-prev {

  left:
    clamp(
      20px,
      3vw,
      48px
    );

}


#fruity-slider
.fruity-arrow-next {

  right:
    clamp(
      20px,
      3vw,
      48px
    );

}


/* =========================================================
   BOTTOM NAVIGATION
========================================================= */

#fruity-slider
.fruity-bottom {

  position: absolute;

  left: 50%;
  bottom: 28px;

  display: grid;

  grid-template-columns:
    1fr auto 1fr;

  align-items: center;

  gap: 32px;

  width:
    min(
      1120px,
      calc(100% - 120px)
    );

  transform:
    translateX(-50%);

  z-index: 100;

}


/* =========================================================
   COUNTER
========================================================= */

#fruity-slider
.fruity-counter {

  display: flex;

  align-items: center;

  gap: 11px;

  justify-self: start;

  color:
    var(--current-accent);

  transition:
    color .5s ease;

}


#fruity-slider
.fruity-counter-current {

  font-size: 12px;

  font-weight: 700;

}


#fruity-slider
.fruity-counter-total {

  font-size: 11px;

  font-weight: 500;

  opacity: .48;

}


#fruity-slider
.fruity-counter-line {

  width: 36px;
  height: 1px;

  background:
    currentColor;

  opacity: .35;

}


/* =========================================================
   FLAVOR NAV
========================================================= */

#fruity-slider
.fruity-flavors {

  display: flex;

  align-items: center;

  gap: 4px;

  justify-self: center;

  padding: 5px;

  border:
    1px solid
    rgba(255,255,255,.38);

  border-radius: 999px;

  background:
    rgba(255,255,255,.24);

  backdrop-filter:
    blur(18px);

  -webkit-backdrop-filter:
    blur(18px);

  box-shadow:
    0 12px 34px
    rgba(20,25,20,.05);

}


#fruity-slider
.flavor-tab {

  position: relative;

  display: inline-flex;

  align-items: center;
  justify-content: center;

  min-width: 82px;

  height: 38px;

  padding:
    0 18px;

  border: 0;

  border-radius:
    999px;

  background:
    transparent;

  color:
    color-mix(
      in srgb,
      var(--current-accent) 58%,
      transparent
    );

  font-size: 12px;

  font-weight: 600;

  cursor: pointer;

  transition:
    background-color .35s ease,
    color .35s ease,
    transform .3s
    var(--ease-out),
    box-shadow .35s ease;

}


#fruity-slider
.flavor-tab:hover {

  color:
    var(--current-accent);

}


#fruity-slider
.flavor-tab.is-active {

  color:
    var(--current-accent);

  background:
    rgba(255,255,255,.84);

  box-shadow:
    0 5px 18px
    rgba(20,25,20,.06);

}


#fruity-slider
.flavor-tab:active {

  transform:
    scale(.96);

}


#fruity-slider
.flavor-tab:focus-visible {

  outline:
    2px solid
    var(--current-accent);

  outline-offset:
    3px;

}


/* =========================================================
   INTERACTION HINT
========================================================= */

#fruity-slider
.fruity-interaction-hint {

  display: flex;

  align-items: center;

  justify-self: end;

  gap: 10px;

  color:
    var(--current-accent);

  opacity: .62;

  transition:
    color .5s ease,
    opacity .3s ease;

}


#fruity-slider
.fruity-hint-line {

  width: 28px;
  height: 1px;

  background:
    currentColor;

  opacity: .42;

}


#fruity-slider
.fruity-hint-text {

  font-size: 10px;

  font-weight: 600;

  letter-spacing:
    .12em;

  text-transform:
    uppercase;

}


#fruity-slider
.fruity-hint-arrow {

  font-size: 17px;

  line-height: 1;

}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width: 1600px) {

  #fruity-slider
  .cane-stage {

    width:
      590px;

  }


  #fruity-slider
  .h1 {

    font-size:
      min(
        25vw,
        500px
      ) !important;

  }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

  #fruity-slider {

    min-height: 680px;

  }


  #fruity-slider
  .h1 {

    font-size:
      clamp(
        140px,
        23vw,
        270px
      ) !important;

  }


  #fruity-slider
  .cane-stage {

    width:
      clamp(
        330px,
        45vw,
        470px
      );

  }


  #fruity-slider
  .fruit-pear-1 {

    left: -8%;

  }


  #fruity-slider
  .fruit-pear-2 {

    left: 9%;

  }


  #fruity-slider
  .fruit-pear-3 {

    right: 7%;

  }


  #fruity-slider
  .fruit-apple-1 {

    left: -8%;

  }


  #fruity-slider
  .fruit-apple-3 {

    right: 3%;

  }


  #fruity-slider
  .fruity-bottom {

    width:
      calc(100% - 80px);

  }


  #fruity-slider
  .fruity-interaction-hint {

    display: none;

  }


  #fruity-slider
  .fruity-bottom {

    grid-template-columns:
      1fr auto 1fr;

  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

  #fruity-slider {

    height: 100svh;

    min-height: 640px;

  }


  /* ---------- header ---------- */

  #fruity-slider
  .fruity-header {

    padding:
      22px 20px;

  }


  #fruity-slider
  .logo {

    font-size:
      27px;

  }


  #fruity-slider
  .fruity-kicker {

    display: none;

  }


  /* ---------- title ---------- */

  #fruity-slider
  .h1 {

    top: 43%;

    font-size:
      clamp(
        90px,
        27vw,
        145px
      ) !important;

    letter-spacing:
      -.075em;

  }


  /* ---------- can ---------- */

  #fruity-slider
  .cane-stage {

    top: 47%;

    width:
      clamp(
        300px,
        82vw,
        390px
      );

  }


  #fruity-slider
  .cane-stage::before {

    width: 75%;
    height: 76%;

  }


  /* =====================================================
     MOBILE FRUITS
  ===================================================== */

  /*
     PEAR
  */

  #fruity-slider
  .fruit-pear-1 {

    width: 150px;

    left: -52px;

    bottom: 13%;

  }


  #fruity-slider
  .fruit-pear-2 {

    width: 90px;

    left: 5%;

    top: 21%;

  }


  #fruity-slider
  .fruit-pear-3 {

    width: 102px;

    right: -12px;

    top: 17%;

  }


  /*
     APPLE
  */

  #fruity-slider
  .fruit-apple-1 {

    width: 145px;

    left: -43px;

    top: 24%;

  }


  #fruity-slider
  .fruit-apple-2 {

    width: 90px;

    left: 7%;

    bottom: 16%;

  }


  #fruity-slider
  .fruit-apple-3 {

    width: 130px;

    right: -31px;

    top: 20%;

  }


  /*
     EXOTIC
  */

  #fruity-slider
  .fruit-exotic-1 {

    width: 135px;

    left: -25px;

    bottom: 15%;

  }


  #fruity-slider
  .fruit-exotic-2 {

    width: 120px;

    right: -18px;

    top: 18%;

  }


  #fruity-slider
  .fruit-exotic-3 {

    width: 78px;

    right: 11%;

    bottom: 19%;

  }


  /* =====================================================
     MOBILE ARROWS
  ===================================================== */

  #fruity-slider
  .fruity-arrow {

    top: auto;

    bottom: 89px;

    width: 46px;
    height: 46px;

    transform: none;

  }


  #fruity-slider
  .fruity-arrow svg {

    width: 19px;
    height: 19px;

  }


  #fruity-slider
  .fruity-arrow:hover {

    transform:
      scale(1.05);

  }


  #fruity-slider
  .fruity-arrow:active {

    transform:
      scale(.94);

  }


  #fruity-slider
  .fruity-arrow-prev {

    left: 20px;

  }


  #fruity-slider
  .fruity-arrow-next {

    right: 20px;

  }


  /* =====================================================
     MOBILE BOTTOM NAV
  ===================================================== */

  #fruity-slider
  .fruity-bottom {

    bottom: 24px;

    display: flex;

    align-items: center;

    justify-content: center;

    width:
      calc(100% - 32px);

  }


  #fruity-slider
  .fruity-counter {

    display: none;

  }


  #fruity-slider
  .fruity-interaction-hint {

    display: none;

  }


  #fruity-slider
  .fruity-flavors {

    gap: 2px;

    padding: 4px;

  }


  #fruity-slider
  .flavor-tab {

    min-width: auto;

    height: 36px;

    padding:
      0 14px;

    font-size:
      11px;

  }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 420px) {

  #fruity-slider
  .cane-stage {

    width:
      min(
        88vw,
        345px
      );

  }


  #fruity-slider
  .h1 {

    font-size:
      clamp(
        82px,
        29vw,
        120px
      ) !important;

  }


  #fruity-slider
  .fruit-pear-2 {

    display: none;

  }


  #fruity-slider
  .fruit-apple-2 {

    display: none;

  }


  #fruity-slider
  .fruit-exotic-3 {

    display: none;

  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (
  prefers-reduced-motion: reduce
) {

  #fruity-slider *,
  #fruity-slider *::before,
  #fruity-slider *::after {

    animation-duration:
      .01ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      .01ms !important;

    scroll-behavior:
      auto !important;

  }

}/* End custom CSS */