:root {
  --lilac: #d9c2f0;
  --lilac-soft: #f1e8fb;
  --lilac-deep: #b48de0;
}

body {
  background:
    radial-gradient(40rem 30rem at -8% 22%, rgb(201 163 224 / 0.16), transparent 70%),
    radial-gradient(36rem 28rem at 108% 64%, rgb(201 163 224 / 0.13), transparent 70%),
    var(--ground);
  background-attachment: fixed;
}

.geleia {
  position: absolute;
  height: auto;
  pointer-events: none;
  user-select: none;
}

.footer { position: relative; }

.footer__geleia {
  top: 0;
  right: 9%;
  width: clamp(5.5rem, 4rem + 5vw, 9rem);
  transform: translateY(-96%);
}

.footer__geleia-pinga {
  position: relative;
  z-index: 2;
  display: block;
  width: clamp(5rem, 3.5rem + 4vw, 7.5rem);
  height: auto;
  margin: -2.6rem 0 -0.5rem 6%;
  pointer-events: none;
  user-select: none;
  transform: rotate(-4deg);
}

.facets__geleia {
  position: static;
  display: block;
  width: 9.5rem;
  margin: var(--s6) auto 0;
  opacity: 0.95;
}

.mc-hero { position: relative; }

.mc-hero__geleia {
  right: clamp(1rem, 4vw, 3.5rem);
  bottom: 0;
  width: clamp(7rem, 5rem + 6vw, 11rem);
}

@media (max-width: 760px) {
  .footer__geleia-pinga,
  .mc-hero__geleia { display: none; }
}

@media (max-width: 1023px) {
  .facets__geleia { display: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .footer__geleia { animation: geleia-balanca 4s ease-in-out infinite; transform-origin: 50% 100%; }
  @keyframes geleia-balanca {
    0%, 100% { transform: translateY(-96%) scaleY(1); }
    50% { transform: translateY(-96%) scaleY(1.04) scaleX(0.98); }
  }
}

.packmark.packmark--geleia {
  width: 2.9rem;
  height: auto;
  margin: -0.35rem -0.15rem -0.35rem -0.35rem;
}

.logo:hover .packmark--geleia {
  transform: rotate(-8deg) scale(1.06);
}

.ks { position: relative; }


.ks:has(> .wrap > .island:first-child) > .wrap { position: relative; }

.ks:has(> .wrap > .island:first-child) > .wrap::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  right: clamp(3rem, 12%, 10rem);
  width: clamp(7rem, 5rem + 6vw, 11rem);
  aspect-ratio: 236 / 145;
  background: url("/img/desenhos/geleia-lendo.webp") no-repeat center bottom / contain;
  transform: translateY(-78%);
  pointer-events: none;
}

/* divisores entre as seções da home (a bolinha de captura do home.css continua nas dela) */
.ks + .ks::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 50%;
  width: min(100% - 2 * var(--gutter, 1rem), 30rem);
  height: 3.5rem;
  translate: -50% -50%;
  pointer-events: none;
  -webkit-mask: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
  mask: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
}

.ks:nth-of-type(4n+2)::before {
  background:
    url("/img/desenhos/geleia-logo.webp") center / 3.4rem no-repeat,
    linear-gradient(90deg, var(--navy) 55%, transparent 0) left center / 14px 2.5px repeat-x;
}

.ks:nth-of-type(4n+3)::before {
  background:
    url("/img/desenhos/energia-fogo.svg") 22% center / 1.9rem no-repeat,
    url("/img/desenhos/energia-psiquica.svg") center / 2.4rem no-repeat,
    url("/img/desenhos/energia-agua.svg") 78% center / 1.9rem no-repeat,
    radial-gradient(circle, var(--lilac-deep) 2.2px, transparent 2.6px) left center / 14px 14px repeat-x;
}

.ks:nth-of-type(4n)::before {
  background:
    url("/img/desenhos/leque-cartas.svg") center / 3.6rem no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='10' viewBox='0 0 28 10'%3E%3Cpath d='M0 5 Q7 0 14 5 T28 5' fill='none' stroke='%237a4fd0' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E") left center / 28px 10px repeat-x;
}

.ks:nth-of-type(4n+1)::before {
  background:
    url("/img/desenhos/geleia-pulando.webp") center / 3.6rem no-repeat,
    radial-gradient(circle, #f29ab8 2.6px, transparent 3px) 0 center / 22px 22px repeat-x,
    radial-gradient(circle, var(--lilac-deep) 2.6px, transparent 3px) 11px center / 22px 22px repeat-x;
}

/* ===== mascote pelas páginas ===== */
.cart-hero__island { position: relative; }
.cart-hero__island::after,
.pay-hero::after,
.results::after,
.pdp-gallery::after {
  content: "";
  position: absolute;
  z-index: 2;
  aspect-ratio: 1;
  background: no-repeat center / contain;
  pointer-events: none;
}

.cart-hero__island::after {
  right: clamp(1rem, 6vw, 5rem);
  bottom: -0.4rem;
  width: clamp(6rem, 4rem + 6vw, 10rem);
  background-image: url("/img/desenhos/geleia-caixa.webp");
}

.pay-hero { position: relative; }
.pay-hero::after {
  right: var(--gutter, 1rem);
  top: 0.5rem;
  width: clamp(5rem, 3rem + 5vw, 8.5rem);
  background-image: url("/img/desenhos/geleia-festa.webp");
}

.results { position: relative; padding-bottom: 7rem; }
.results::after {
  left: 50%;
  bottom: 0;
  width: 8rem;
  translate: -50% 0;
  background-image: url("/img/desenhos/geleia-lendo.webp");
}

.pdp-gallery { position: relative; }
.pdp-gallery::after {
  left: -1.2rem;
  bottom: -1.4rem;
  width: clamp(5rem, 3rem + 5vw, 8rem);
  background-image: url("/img/desenhos/geleia-surpresa.webp");
  transform: rotate(-8deg);
}

@media (max-width: 760px) {
  .cart-hero__island::after { width: 5rem; opacity: 0.9; }
  .pay-hero::after { display: none; }
}


/* ===== um enfeite ao lado de cada título de seção da home ===== */
.khead__title::after {
  content: "";
  display: inline-block;
  width: 0.9em;
  height: 0.9em;
  margin-left: 0.25em;
  vertical-align: -0.05em;
  background: url("/img/desenhos/enfeite-coracao.webp") no-repeat center / contain;
  transform: rotate(10deg);
}
.ks:nth-of-type(6n+2) .khead__title::after { background-image: url("/img/desenhos/enfeite-cristal.webp"); }
.ks:nth-of-type(6n+3) .khead__title::after { background-image: url("/img/desenhos/enfeite-moeda.webp"); transform: rotate(-8deg); }
.ks:nth-of-type(6n+4) .khead__title::after { background-image: url("/img/desenhos/enfeite-coroa.webp"); }
.ks:nth-of-type(6n+5) .khead__title::after { background-image: url("/img/desenhos/enfeite-gota.webp"); transform: rotate(-6deg); }
.ks:nth-of-type(6n) .khead__title::after { background-image: url("/img/desenhos/enfeite-dado.webp"); }

/* ===== enfeites dentro das ilhas coloridas (cantos de baixo) ===== */
.island::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: 1.2rem;
  bottom: 0.9rem;
  width: 4.5rem;
  height: 3rem;
  background: url("/img/desenhos/enfeite-nuvem.webp") no-repeat left bottom / contain;
  opacity: 0.55;
  pointer-events: none;
}
.island--peach::after { background-image: url("/img/desenhos/enfeite-coracao.webp"); width: 2.6rem; }
.island--mint::after { background-image: url("/img/desenhos/enfeite-cartas.webp"); width: 3.4rem; }
.island--night::after { background-image: url("/img/desenhos/enfeite-cristal.webp"); width: 2.6rem; opacity: 0.8; }
.island--sky::after { background-image: url("/img/desenhos/enfeite-arco-iris.webp"); width: 4rem; }

/* mascote nos cantos da tela, uma pose por seção da home (só em telas largas) */
@media (min-width: 1200px) {
  .ks::after {
    content: "";
    position: absolute;
    z-index: 1;
    top: 50%;
    width: 7rem;
    aspect-ratio: 1;
    background: no-repeat center / contain;
    pointer-events: none;
  }
  .ks:nth-of-type(6n+1)::after { left: -1.6rem; background-image: url("/img/desenhos/geleia-pulando.webp"); transform: rotate(8deg); }
  .ks:nth-of-type(6n+2)::after { right: -2.2rem; background-image: url("/img/desenhos/geleia-parede.webp"); transform: scaleX(-1); width: 5.5rem; }
  .ks:nth-of-type(6n+3)::after { left: -1.8rem; background-image: url("/img/desenhos/geleia-coracao.webp"); transform: rotate(-6deg); }
  .ks:nth-of-type(6n+4)::after { right: -1.6rem; background-image: url("/img/desenhos/geleia-booster.webp"); transform: rotate(6deg); }
  .ks:nth-of-type(6n+5)::after { left: -1.8rem; background-image: url("/img/desenhos/geleia-surpresa.webp"); transform: rotate(-8deg); }
  .ks:nth-of-type(6n)::after { right: -1.8rem; background-image: url("/img/desenhos/geleia-festa.webp"); }
}
@media (min-width: 1200px) and (max-width: 1500px) {
  .ks::after { width: 5.5rem; }
}