.landing {
  --lp-pad-x: 20px;
  --lp-pad-y: 40px;
  --lp-alt-font: 'Fira Sans', sans-serif;
  --lp-limegreen: #7BC900;
  --lp-darkteal: #284439;
  --lp-green: #249110;
  --lp-mint: #C1FFA6;
  --lp-deepteal: #192B23;

  background: var(--lp-deepteal);
  color: white;
  font-family: 'Ubuntu', sans-serif;
  overflow: hidden;
}
.landing :where(h1, h2, h3, ul, li, p) {
  margin: 0;
}
.landing img {
  display: block;
  margin: 0 auto;
}
.landing *:focus-visible {
  outline: 2px solid;
}
.landing .wrapper {
  padding: var(--lp-pad-y) var(--lp-pad-x);
}
.landing .btn {
  background: var(--lp-darkteal);
  border: 2px solid var(--lp-limegreen);
  border-radius: 8px;
  color: white;
  display: block;
  font: 600 1.25em var(--lp-alt-font);
  letter-spacing: .025em;
  padding: .5em 1.375em;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  width: fit-content;
}
.landing .btn strong {
  display: inline-block;
  font-weight: 800;
}
.landing :is(.menu a, .btn):hover {
  background: var(--lp-limegreen);
  color: black;
}

/* CARROSSEL ---- */
.landing .carrossel {
  --lp-pad-y: 15px;
}
.landing .carrossel .wrapper {
  padding-top: 0;
}
.landing .carrossel .owl-stage-outer {
  padding: 0 !important;
}
.landing .carrossel .owl-dots {
  background: var(--lp-darkteal) !important;
  border-radius: 999px !important;
  height: 21px !important;
  left: 50% !important;
  padding: 2px !important;
  width: auto !important;
  transform: translateX(-50%) !important;
}
.landing .carrossel .owl-dot span {
  background: var(--lp-green) !important;
  border: 0 !important;
}
.landing .carrossel .owl-dot.active span {
  background: white !important;
}

/* CARROSSEL ---- */
.landing .menu {
  align-items: center;
  background: var(--lp-darkteal);
  box-shadow: 0 3px 10px rgba(0, 0, 0, .2);
  display: flex;
  flex-wrap: wrap;
  gap: .75em;
  justify-content: center;
  padding: 1em 0;
}
.landing .menu h2 {
  font-size: 1.25em;
  font-weight: 400;
  text-align: center;
}
.landing .menu ul {
  display: inherit;
  gap: 1em;
  list-style: none;
  overflow: auto;
  padding: 0 var(--lp-pad-x);
  scroll-snap-type: x mandatory;
  white-space: nowrap;
}
.landing .menu ul li {
  scroll-snap-align: center;
}
.landing .menu a {
  background: var(--lp-deepteal);
  border: 2px solid var(--lp-limegreen);
  border-radius: 8px;
  color: white;
  display: block;
  font: 800 1em var(--lp-alt-font);
  letter-spacing: .025em;
  outline-offset: -5px;
  padding: .625em 1.375em;
  text-decoration: none;
  text-transform: uppercase;
}

/* VITRINES ---- */
.landing .vitrine {
  padding: var(--lp-pad-y) 0;
}
.landing .vitrine h2 {
  font-size: 1.5em;
  font-weight: 400;
  padding: 0 var(--lp-pad-x);
  text-align: center;
  text-wrap: balance;
}
.landing .vitrine h2 strong {
  background: var(--lp-mint);
  color: black;
  font: 800 1em var(--lp-alt-font);
  padding: 1px;
  text-transform: uppercase;
}
.landing .vitrine .mosaico-produtos {
  margin: 1.5em auto 1.875em;
}
.landing .mosaico-produtos .product-item-info {
  border: 0 !important;
  border-radius: 8px !important;
  outline: 3px solid rgba(255,255,255,.2) !important;
}
.landing .mosaico-produtos .action.tocart {
  background: var(--lp-green) !important;
  border-color: var(--lp-green) !important;
  border-radius: 4px !important;
  color: black !important;
}
.landing .vitrine .btn {
  margin: 0 auto;
  max-width: calc(100% - 40px);
}
.landing .divisoria {
  align-items: center;
  display: flex;
  justify-content: center;
}
.landing .divisoria::before,
.landing .divisoria::after {
  border-bottom: 1px solid var(--lp-darkteal);
  content: '';
  display: block;
  flex: 0 0 min(10%, 200px);
  width: min(10%, 200px);
}
.landing .divisoria img {
  margin: 0;
}

/* BANNERS ---- */
.landing .duo {
  background: var(--lp-darkteal);
}
.landing :is(.tarja, .duo) .wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  justify-content: center;
}
.landing :is(.tarja, .duo) img {
  border-radius: 8px;
}
.landing :is(.tarja, .duo) img:hover {
  box-shadow: 0 3px 10px rgba(0, 0, 0, .2);
  outline: 3px solid rgba(255,255,255,.2);
}
.landing :is(.tarja, .duo) a:focus-visible {
  outline-color: white;
}

/* TJ ---- */
.landing .tj {
  background: white;
  color: var(--lp-deepteal);
}
.landing .tj h2 {
  font-size: 1.25em;
  font-weight: 700;
}
.landing .tj p {
  font-size: .875em;
  margin-top: 1em;
}
.landing .tj a {
  color: var(--lp-deepteal);
  text-decoration: underline;
}
.landing .tj a:hover {
  text-decoration: none;
}

/* > 480px ---- */
@media (min-width:30rem) {
  .landing {
    --lp-wrapper: 30em;
  }
  .landing .wrapper {
    margin: 0 auto;
    max-width: var(--lp-wrapper);
  }
}

/* > 768px ---- */
@media (min-width: 48rem) {
  .landing {
    --lp-wrapper: 46em;
    font-size: 1.14285em;
  }
  .landing .vitrine {
    --pd-adjust: 48px;
  }
  .landing .bg-header + .vitrine {
    padding-top: var(--pd-adjust);
  }
  .landing .divisoria:last-of-type + .vitrine {
    padding-bottom: var(--pd-adjust);
  }
  .landing .divisoria {
    gap: 20px;
  }
}

/* > 992px ---- */
@media (min-width: 62rem) {
  .landing {
    --lp-wrapper: 60em;
  }
  .landing .vitrine {
    --pd-adjust: 60px;
  }
  .landing .tj {
    --lp-wrapper: 60em;
  }
}

/* > 1200px ---- */
@media (min-width: 75rem) {
  .landing {
    --lp-wrapper: 71em;
    background: var(--lp-deepteal) url(https://mktgen.com.br/imagens/mes-do-consumidor/2026/bg-lp.jpg) center repeat-y;
  }
  .landing .menu {
    gap: 1.5em;
    padding: .5em 0;
  }
  .landing .menu ul {
    padding: 0;
  }
  .landing .vitrine {
    --pd-adjust: 72px;
  }
  .landing .mosaico-produtos {
    max-width: var(--lp-wrapper);
  }
}

/* > 1360px ---- */
@media (min-width: 85rem) {
  .landing {
    --lp-wrapper: 80em;
  }
  .landing .vitrine {
    --pd-adjust: 80px;
  }
  .landing .bg-header {
    --recuo: 1.9em;
    background: var(--lp-deepteal);
    border-bottom: 2px solid var(--lp-limegreen);
    box-shadow: 0 0 48px rgba(0, 0, 0, .5);
    margin-bottom: var(--recuo);
  }
  .landing .menu {
    --lp-wrapper: 82em;
    border-radius: 999px;
    margin: 0 auto calc(var(--recuo) * -1);
    max-width: var(--lp-wrapper);
  }
}

/* ANIMAÇÕES ---- */
@media (prefers-reduced-motion:no-preference) {
  .js .landing .anime {
    opacity: 0;
    transition: .5s;
  }
  .js .landing .anime.show {
    opacity: 1;
    transform: initial !important;
  }
  .landing :is(.menu a, .btn) {
    transition: .1s;
  }
  .landing :is(.tarja, .duo) img {
    transition: .15s;
  }
  .landing :is(.tarja, .duo) img:hover {
    transform: scale(1.05);
  }
}