/* HOME L6 — desenho medido na produção viva em 390 e 1440. */

.home {
  --lp-home-roxo: #8224e3;
  --lp-home-violeta: #51289f;
  --lp-home-titulo: #0f131f;
  --lp-home-cinza: #727c88;
}
.home .lp-conteudo { padding-top: 0; }
.lp-home-container { width: min(1140px, calc(100% - 32px)); margin-inline: auto; }
.lp-home-secao { padding-block: 64px; }
.lp-home-titulo {
  margin: 0 0 48px;
  color: var(--lp-home-titulo);
  font-size: 32.4px;
  line-height: 1.2;
  font-weight: 400;
  text-align: center;
}
.lp-home-titulo strong { font-weight: 700; }
.lp-home-principais .lp-home-titulo,
.lp-home-sabores .lp-home-titulo { font-size: 35.84px; }
.lp-trilho { scrollbar-width: none; }
.lp-trilho::-webkit-scrollbar { display: none; }
.lp-carrossel button:focus-visible,
.lp-home a:focus-visible,
.home main a:focus-visible { outline: 3px solid #00a7f7; outline-offset: 3px; }

/* ── hero: a arte ocupa a dobra abaixo do header, como no gabarito ─────── */
.lp-hero { position: relative; width: 100%; height: 640px; overflow: hidden; background: #111; color: #fff; }
.lp-hero > .lp-trilho { display: flex; width: 100%; height: 100%; overflow: hidden; }
/* `pan-y pinch-zoom`: sem isto o navegador toma posse do arrasto no toque real e dispara
   `pointercancel` antes do `pointerup` — o swipe do banner só funcionava com mouse. Vertical
   e pinça continuam com o navegador (WCAG 1.4.4); o horizontal é do gesto em home.js. */
.lp-hero[data-efeito="fade"] > .lp-trilho { position: relative; touch-action: pan-y pinch-zoom; }
.lp-hero[data-efeito="fade"] .lp-hero-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .45s ease, visibility 0s linear .45s; }
.lp-hero[data-efeito="fade"] .lp-hero-slide.lp-on { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }
.lp-hero-slide { position: relative; flex: 0 0 100%; width: 100%; height: 100%; overflow: hidden; }
.lp-hero-fundo { position: absolute; top: var(--lp-header-h); right: 0; bottom: 0; left: 0; display: block; user-select: none; -webkit-user-drag: none; }
.lp-hero-fundo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.lp-hero-hitbox { position: absolute; inset: var(--lp-header-h) 0 0; z-index: 1; user-select: none; -webkit-user-drag: none; }
.lp-hero-l19-produto,
.lp-hero-l19-painel { display: none; }
.lp-hero-produtos-cupom { display: none; }
.lp-hero-sk-campanha { display: none; }
.lp-hero-conteudo { position: absolute; z-index: 2; top: var(--lp-header-h); left: 0; width: 100%; height: calc(100% - var(--lp-header-h)); padding: 0; pointer-events: none; }
.lp-hero-conteudo a { pointer-events: auto; }
.lp-hero-conteudo h2 { color: #fff; }
.lp-hero-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 10px 30px; border: 1px solid #00bcff; border-radius: 999px; background: rgba(5, 8, 38, .28); color: #fff; font-size: 14px; font-weight: 800; text-decoration: none; text-transform: uppercase; }

/* banner 1 */
.lp-hero-slide--cupom .lp-hero-conteudo {
  --lp-hero-recuo: clamp(44px, calc(20.294vw - 216.3px), 104px);
  width: calc(50vw - 24px);
}
.lp-hero-slide--cupom .lp-hero-conteudo::before { content: ""; position: absolute; top: 95px; left: 0; width: 100%; height: 135px; border-radius: 0 10px 10px 0; background: linear-gradient(90deg, #03b8fe, #317ef8); }
.lp-hero-slide--cupom .lp-hero-conteudo::after { content: ""; position: absolute; top: 254px; left: 0; width: 100%; height: 140px; border: 2px solid #00bcff; border-left: 0; border-radius: 0 10px 10px 0; }
.lp-hero-marca-faixa { position: absolute; z-index: 1; top: 95px; left: 0; display: flex; width: 100%; height: 135px; align-items: center; padding-left: var(--lp-hero-recuo); }
/* 489px é medida FIXA no gabarito de 1024 pra cima (conferido em 1024, 1280 e 1440); abaixo
   disso ela escala. A conta antiga dava 470 em 1440 e crescia sem teto até 537 em 1920. */
.lp-hero-marca { display: block; width: min(489px, calc(13.971vw + 268.8px)); height: auto; object-fit: contain; }
@media (min-width: 1025px) { .lp-hero-marca { width: 489px; } }
.lp-hero-quadro { position: absolute; z-index: 1; top: 254px; left: 0; display: flex; width: 100%; height: 140px; align-items: center; padding-left: var(--lp-hero-recuo); }
.lp-hero-chamada { position: relative; flex: 0 0 calc(11.03vw + 146.2px); min-width: 0; margin: 0; color: #fff; font-size: calc(16px + .9vw); line-height: 1.16; }
.lp-hero-chamada::after { content: ""; position: absolute; top: 0; right: -2px; width: 2px; height: 100%; background: #0088fb; }
.lp-hero-chamada strong { font-size: inherit; line-height: 1; }
.lp-hero-acao { display: flex; min-width: 0; flex: 1; flex-direction: column; align-items: flex-start; gap: 11px; padding-left: clamp(28px, calc(28.125vw - 332px), 73px); }
.lp-hero-cupom { display: flex; align-items: center; gap: 20px; margin-left: 25px; font-size: 14px; white-space: nowrap; }
.lp-hero-cupom > .lp-icon { flex: 0 0 24px; }
.lp-hero-slide--cupom .lp-hero-cta { min-width: 189px; margin-left: 5px; }

/* L19: composição em camadas no desktop. O fundo usa AVIF com WebP/PNG de reserva e os
   produtos usam WebP 3x; marca, texto, CTA e benefícios são HTML. O cenário fica numa
   régua central de 1440px e o gradiente completa monitores maiores, como num e-commerce. */
@media (min-width: 1280px) {
  .lp-hero-slide--one-eco3 {
    background: linear-gradient(90deg, #020413 0%, #01061a 42%, #090222 72%, #1a0039 100%);
  }
  .lp-hero-slide--one-eco3 .lp-hero-fundo {
    right: auto;
    left: 50%;
    width: min(100%, 1440px);
    transform: translateX(-50%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 7%, #000 93%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 7%, #000 93%, transparent 100%);
  }
  .lp-hero-slide--one-eco3 .lp-hero-fundo img {
    object-fit: cover;
    object-position: 50% 50%;
  }
  .lp-hero-slide--one-eco3 .lp-hero-conteudo,
  .lp-hero-slide--one-eco3 .lp-hero-produtos-cupom { display: none; }

  .lp-hero-l19-produto {
    position: absolute;
    z-index: 2;
    display: block;
    max-width: none;
    height: auto;
    filter: drop-shadow(0 16px 15px rgba(0, 0, 0, .48));
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
  }
  .lp-hero-l19-produto--one {
    bottom: 89.72px;
    left: calc(50% + 132.41px);
    width: 150.91px;
  }
  .lp-hero-l19-produto--eco3 {
    z-index: 3;
    bottom: 90.36px;
    left: calc(50% + 291.42px);
    width: 175.39px;
  }
  .lp-hero-l19-painel {
    position: absolute;
    z-index: 4;
    top: calc(var(--lp-header-h) + 38px);
    left: max(20px, calc(50% - 668px));
    display: flex;
    overflow: hidden;
    width: 532px;
    height: 372px;
    border: 2px solid #03a9ff;
    border-radius: 14px;
    background: rgba(1, 4, 28, .84);
    box-shadow: 0 0 16px rgba(0, 141, 255, .62), inset 0 0 18px rgba(0, 89, 255, .18);
    flex-direction: column;
    pointer-events: none;
  }
  .lp-hero-l19-marca {
    display: flex;
    height: 66px;
    flex: 0 0 66px;
    align-items: center;
    justify-content: center;
    gap: 13px;
    padding: 8px 27px;
    background: linear-gradient(115deg, #0799ff 0%, #0473ee 50%, #0944c7 100%);
  }
  .lp-hero-l19-selo {
    display: grid;
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    place-items: center;
    color: #fff;
    filter: drop-shadow(0 0 7px rgba(0, 208, 255, .58));
  }
  .lp-hero-l19-selo .lp-icon { display: block; width: 46px; height: 46px; }
  .lp-hero-l19-marca strong {
    color: #fff;
    font-size: 29px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: -.45px;
    white-space: nowrap;
  }
  .lp-hero-l19-copy { height: 234px; flex: 0 0 234px; padding: 10px 20px 9px; }
  .lp-hero-l19-copy p { margin: 0; color: #fff; }
  .lp-hero-l19-kicker {
    margin-bottom: 8px !important;
    text-align: center;
    font-size: 16px;
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: .35px;
  }
  .lp-hero-l19-modelos {
    display: grid;
    align-items: center;
    gap: 16px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .lp-hero-l19-modelo {
    display: flex;
    height: 57px;
    padding: 6px 12px;
    justify-content: center;
    border: 1px solid rgba(43, 157, 255, .92);
    border-radius: 9px;
    background: linear-gradient(135deg, rgba(0, 42, 118, .24), rgba(1, 5, 34, .56));
    box-shadow: inset 0 0 12px rgba(0, 104, 255, .12);
    flex-direction: column;
  }
  .lp-hero-l19-modelo span {
    color: #fff;
    font-size: 12px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 1.2px;
  }
  .lp-hero-l19-modelo strong {
    color: #35a9ff;
    font-size: 25px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: -.35px;
  }
  .lp-hero-l19-descricao { margin-top: 5px !important; font-size: 16px; line-height: 1.18; }
  .lp-hero-l19-cta {
    display: flex;
    width: 310px;
    min-height: 44px;
    margin: 8px auto 0;
    align-items: center;
    justify-content: center;
    border: 1px solid #00d4ff;
    border-radius: 999px;
    background: linear-gradient(180deg, #078fff 0%, #075df0 100%);
    box-shadow: 0 0 14px rgba(0, 146, 255, .55);
    color: #fff;
    font-size: 19px;
    line-height: 1;
    font-weight: 800;
    text-decoration: none;
    pointer-events: auto;
  }
  .lp-hero-l19-cta:hover { background: linear-gradient(180deg, #16a9ff 0%, #0872ff 100%); color: #fff; }
  .lp-hero-l19-beneficios {
    display: grid;
    min-height: 68px;
    flex: 1;
    border-top: 1px solid rgba(0, 126, 255, .62);
    grid-template-columns: 1fr 1.13fr;
  }
  .lp-hero-l19-beneficio { position: relative; display: flex; align-items: center; gap: 11px; padding: 7px 17px; }
  .lp-hero-l19-beneficio + .lp-hero-l19-beneficio::before {
    position: absolute;
    top: 12px;
    bottom: 12px;
    left: 0;
    width: 1px;
    background: rgba(255, 255, 255, .55);
    content: "";
  }
  .lp-hero-l19-icone {
    display: grid;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(145deg, #075de7, #003cae);
    color: #fff;
    box-shadow: inset 0 0 9px rgba(0, 173, 255, .5);
  }
  .lp-hero-l19-icone .lp-icon { display: grid; place-items: center; }
  .lp-hero-l19-icone img { width: 29px; height: 29px; filter: brightness(0) invert(1); }
  .lp-hero-l19-beneficio p { margin: 0; color: #fff; font-size: 14px; line-height: 1.13; }
  .lp-hero-l19-beneficio strong { font-size: 15px; font-weight: 800; white-space: nowrap; }
}

/* banner 2 */
.lp-hero-conteudo--segura { top: calc(var(--lp-header-h) + 105px); width: min(573px, 39.8vw); height: 290px; }
/* recuo em % da caixa: os 159px fixos valiam só em 1440 e, na caixa estreita, jogavam a
   letra pra fora do próprio fundo. A faixa cresce em altura quando o título quebra, como lá. */
.lp-hero-conteudo--segura h2 { position: absolute; top: 0; left: 0; width: 100%; min-height: 81px; margin: 0; padding: 20px 18px 14px min(159px, 27.7%); border-radius: 0 10px 10px 0; background: linear-gradient(90deg, #03b8fe, #317ef8); font-size: 36px; line-height: 1.15; }
/* largura relativa à caixa: os 460px fixos só coincidiam com a caixa em 1440 e, abaixo
   disso, o parágrafo saía dela — 333px para fora em 601. */
.lp-hero-conteudo--segura p { position: absolute; top: 121px; left: 112px; width: calc(100% - 112px); margin: 0; font-size: 16px; line-height: 1.3; }
.lp-hero-qr { position: absolute; z-index: 1; top: 18px; left: 98px; width: 42px; height: 42px; }
/* o par chamada+botão vive numa caixa só, empilhado, com os 20px de folga que a produção
   mantém em toda largura — inclusive quando a chamada quebra em 2 linhas. */
.lp-hero-segura-acao { position: absolute; top: 188px; left: 112px; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; width: calc(100% - 112px); }
.lp-hero-segura-acao > strong { font-size: 14px; text-transform: uppercase; color: #3487f7; }
.lp-hero-conteudo--segura .lp-hero-cta { position: static; }

/* banner 3 */
.lp-hero-conteudo--eco { left: max(40px, calc((100% - 1140px) / 2)); width: min(1290px, calc(100% - max(40px, calc((100% - 1140px) / 2)))); }
.lp-hero-conteudo--eco > div { position: absolute; top: 93px; right: 0; width: min(572px, 44.4%); }
.lp-hero-conteudo--eco h2 { margin: 0 0 14px; padding: 17px 16px; border-radius: 10px; background: linear-gradient(90deg, #e53282, #c52771); font-size: 30px; line-height: 1.12; font-weight: 400; }
.lp-hero-conteudo--eco ul { margin: 0 0 8px 20px; padding-left: 20px; font-size: 16px; line-height: 1.8; }
.lp-hero-conteudo--eco li::marker,
.lp-hero-conteudo--sk li::marker { color: #df2b68; }
.lp-hero-conteudo--eco .lp-hero-cta { margin-left: 24px; border-color: #d12d8d; }
.lp-hero-produto { position: absolute; top: 94px; left: 48px; width: min(544px, 46%); height: auto; }

/* banner 4 */
/* a caixa cresce junto com o recuo interno: como o recuo é medido a partir da borda da
   tela, em telas largas ele comia a coluna de texto — em 1920 sobravam 159px e o título ia
   a 4 linhas, jogando lista e botão pra fora do banner. */
.lp-hero-conteudo--sk { top: calc(var(--lp-header-h) + 81px); width: calc(min(573px, 39.8vw) + max(40px, (100vw - 1092px) / 2)); height: 330px; }
.lp-hero-conteudo--sk h2 { width: 100%; min-height: 67px; margin: 0; padding: 12px 24px 12px max(40px, calc((100vw - 1084px) / 2)); border-radius: 0 10px 10px 0; background: linear-gradient(90deg, #30338f, #e60f88); font-size: 36px; line-height: 1.2; }
.lp-hero-conteudo--sk ul { margin: 44px 0 0 max(40px, calc((100vw - 1092px) / 2)); padding-left: 18px; font-size: 16px; line-height: 1.8; }
.lp-hero-conteudo--sk .lp-hero-cta { margin: 15px 0 0 max(40px, calc((100vw - 1092px) / 2)); border-color: #d12d8d; }

.lp-hero-dots { position: absolute; z-index: 4; right: 0; bottom: 12px; left: 0; display: flex; justify-content: center; gap: 0; }
.lp-hero-dots button { position: relative; display: grid; width: 44px; height: 44px; place-items: center; padding: 0; border: 0; background: transparent; color: rgb(53, 65, 91); cursor: pointer; }
.lp-hero-dots button > span { display: block; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.lp-hero-dots button[aria-current="true"] > span { background: transparent; box-shadow: 0 0 0 2px #cf1a53; }
.lp-hero-anterior,
.lp-hero-proximo { position: absolute; z-index: 4; top: calc(var(--lp-header-h) + (100% - var(--lp-header-h)) / 2); display: grid; place-items: center; width: 56px; height: 56px; padding: 0; border: 0; background: transparent; color: #fff; cursor: pointer; transform: translateY(-50%); }
.lp-hero-anterior { left: 0; }
.lp-hero-proximo { right: 0; }
.lp-hero-anterior:disabled,
.lp-hero-proximo:disabled { visibility: hidden; }

/* ── quatro selos ───────────────────────────────────────────────────────── */
/* max-width, não width: com largura fixa o `auto` da margem colapsava abaixo de 1188 e o
   cartão grudava à esquerda, levando o 4º selo pra fora sem barra que denunciasse. */
.lp-ticker { width: 100%; max-width: 1188px; margin: -48px auto 0; padding: 48px; overflow: hidden; background: #fff; border-radius: 10px; box-shadow: 1px 1px 10px 1px #ddd; }
.lp-ticker-trilho { display: flex; width: 100%; height: 100%; gap: 11px; margin-inline: auto; overflow-x: auto; scroll-snap-type: x mandatory; }
.lp-ticker-item { display: flex; height: 33.8px; flex: 0 0 264.75px; align-items: center; justify-content: center; gap: 13px; min-width: 0; scroll-snap-align: start; }
.lp-ticker-item:nth-child(3) { flex-basis: 224.75px; margin-left: 40px; }
.lp-ticker-item img { flex: 0 0 35.2px; width: 35.2px; height: 32px; object-fit: contain; }
.lp-ticker-texto { display: grid; min-width: 0; line-height: 1.2; }
.lp-ticker-item strong { color: #000; font-size: 13px; }
.lp-ticker-texto p { margin: 3px 0 0; color: #7a849a; font-size: 13px; line-height: 16.9px; white-space: nowrap; }

/* ── componente único de produto ───────────────────────────────────────── */
.lp-home-grade { display: grid; align-items: stretch; gap: 19px; }
.lp-home-grade--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.lp-home-grade--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.home .lp-card-prod {
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: 0 12.8px 12.9px;
  border-radius: 12.8px;
  background: #fff;
  box-shadow: 0 1.12px 2.24px rgba(0, 0, 0, .1), 0 3.68px 11.2px rgba(0, 0, 0, .1);
  overflow: visible;
}
.home .lp-card-prod > * { max-width: 100%; }
.home .lp-card-foto { display: block; padding-top: 8px; }
.home .lp-card-foto img { display: block; width: 100%; aspect-ratio: 1; object-fit: contain; }
.home .lp-card-titulo {
  margin: 12.8px 0 3.2px;
  color: var(--lp-home-titulo);
  font-size: 13px;
  line-height: 15.6px;
  font-weight: 400;
}
.home .lp-card-titulo a { position: relative; color: inherit; text-decoration: none; }
.home .lp-card-titulo a::after { content: ""; position: absolute; top: 50%; right: 0; left: 0; height: 44px; transform: translateY(-50%); }
/* L14: a HOME usa o mesmo card da loja, mas carrega somente home.css. */
.home .lp-card-avaliacao { display: flex; align-items: center; gap: 5px; margin: 0 0 7px; color: #5f697f; font-size: 12px; line-height: 13px; }
.home .lpav-estrelas { position: relative; display: inline-flex; flex: 0 0 auto; width: calc(var(--lpav-star-size) * 5); height: var(--lpav-star-size); line-height: 0; }
.home .lpav-vazias,
.home .lpav-cheias { display: flex; flex: 0 0 auto; width: max-content; }
.home .lpav-vazias { color: #7b8498; }
.home .lpav-cheias { position: absolute; inset: 0 auto 0 0; width: var(--lpav-fill); overflow: hidden; color: #ffc700; }
.home .lpav-estrelas svg { display: block; flex: 0 0 auto; width: var(--lpav-star-size); height: var(--lpav-star-size); fill: currentColor; }
.home .lp-preco { display: grid; margin: -8px 0 0; }
.home .lp-preco-avista { display: flex; justify-self: start; color: #343a40; font-size: 19.6px; line-height: 28px; font-weight: 600; }
.home .lp-preco-avista .woocommerce-Price-amount { font-weight: 600; }
.home .lp-preco-parcela { display: flex; justify-self: start; align-items: center; gap: 4px; margin: 8px 0 16px; color: #343a40; font-size: 12px; line-height: 28px; }
.home .lp-preco-parcela .lp-icon { display: flex; }
.home .lp-preco-parcela .lp-icon svg { width: 14px; height: 12px; }
.home .lp-preco-pix {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-self: start;
  gap: 4px;
  row-gap: 0;
  margin: 4.8px 0 16px;
  padding: 8px 10.4px 10.4px 13.6px;
  border-radius: 1.6px 3.2px 3.2px;
  background: rgba(34, 197, 94, .15);
  color: #269f57;
  font-size: 16px;
  line-height: 16px;
  font-weight: 500;
}
.home .lp-preco-pix .lp-icon { display: flex; }
.home .lp-preco-pix .woocommerce-Price-amount { font-weight: 500; }
.home a.button.lp-card-botao,
.home .lp-card-botao {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  flex: 1 1 auto; min-width: 0;
  min-height: 0;
  max-width: 100%;
  margin: 0;
  padding: 12px 14px;   /* era 9,6 em cima e 14,4 embaixo: o rótulo ficava 6px acima do centro */
  border-radius: 8px;
  background: var(--lp-grad);
  color: #fff;
  font-size: 14px;
  line-height: 19.2px;
  font-weight: 700;
  text-align: center;
  text-transform: none;
  text-decoration: none;
}
.home .lp-card-botao::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  height: 44px;
  transform: translateY(-50%);
}

/* ── lançamento e packs ────────────────────────────────────────────────── */
.lp-home-sk { padding-block: 64px; background: #f5f5f5; }
.lp-home-sk-grade { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 48px; }
.lp-sk-banner { display: block; }
.lp-sk-banner img { display: block; width: 100%; height: auto; }
.lp-home-sk .lp-home-titulo { display: none; margin-bottom: 28px; }
.lp-home-packs { padding-bottom: 64px; }
.lp-home-packs .lp-home-titulo { margin-bottom: 22px; }
.lp-home-principais { position: relative; z-index: 2; margin-top: -112px; padding-top: 176px; padding-bottom: 136px; border-radius: 10px 10px 0 0; background: #fff; }
.lp-ticker { position: relative; z-index: 3; }

/* ── sabores: 300 de passo, 284 de conteúdo, 42,9px/s no JS ────────────── */
/* 24 de respiro no topo: com os 64 de padding dos packs fecha os 88px que a produção
   deixa entre a grade e o título (medido em 1440; era 60, dava 124). */
.lp-home-sabores { padding: 24px 0 25px; overflow: hidden; background: #fff; }
.lp-home-sabores .lp-home-titulo { margin-bottom: 20px; }
.lp-sabores-janela { width: 100%; overflow: hidden; }
.lp-sabores-trilho { display: flex; width: max-content; will-change: transform; }
.lp-sabor { position: relative; flex: 0 0 calc((100vw - 130px) / 4); width: calc((100vw - 130px) / 4); height: calc((100vw - 130px) / 4); padding: 8px; color: #fff; text-align: left; text-decoration: none; }
.lp-sabor img { display: block; width: 100%; height: 100%; border-radius: 8px; object-fit: cover; box-shadow: 0 2px 12px rgba(0, 0, 0, .12); }
.lp-sabor strong { position: absolute; z-index: 1; right: 8px; bottom: 8px; left: 8px; display: block; margin: 0; padding: 16px 8% 24px; border-radius: 0 0 8px 8px; background: linear-gradient(rgba(0, 0, 0, .6), rgb(30, 30, 30)); color: #fff; font-size: 17.6px; line-height: 21.12px; font-weight: 500; }

/* ── ofertas ────────────────────────────────────────────────────────────── */
.lp-home-ofertas { --lp-ofertas-largura: min(1438px, calc(100vw - 32px)); display: grid; grid-template-columns: calc(var(--lp-ofertas-largura) / 6) calc(var(--lp-ofertas-largura) * 5 / 6); justify-content: center; min-height: 580px; padding: 24px 0; background: #050505; overflow: hidden; }
.lp-ofertas-cabeca { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; justify-content: center; padding: 32px 24px max(32px, 6vw); color: #fff; }
.lp-ofertas-cabeca h3 { margin: 0; font-size: 32.4px; line-height: 1.2; font-weight: 400; }
.lp-ofertas-cabeca h3 strong { font-weight: 700; white-space: nowrap; }
.lp-ofertas-cabeca p { margin: 8px 0 0; font-size: 16px; line-height: 1.3; }
.lp-ofertas-cabeca > a { position: relative; display: inline-flex; width: min(170.1px, 100%); min-height: 36.4px; align-items: center; justify-content: center; margin-top: 22px; padding: 0; border: 1px solid #fff; border-radius: 5px; color: #fff; font-size: 13px; font-weight: 700; white-space: nowrap; text-decoration: none; text-transform: uppercase; }
.lp-ofertas-cabeca > a::after { content: ""; position: absolute; top: 50%; right: 0; left: 0; height: 44px; transform: translateY(-50%); }
.lp-ofertas-janela { align-self: center; width: 100%; overflow: hidden; }
.lp-ofertas-trilho { display: flex; gap: 19px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; }
.lp-oferta-slide { flex: 0 0 calc((100% - 57px) / 4); min-width: 0; padding-block: 3px; scroll-snap-align: start; }
.lp-oferta-slide .lp-card-prod { height: 100%; }

/* ── banner oficial e vantagens ────────────────────────────────────────── */
.lp-banner-oficial { height: 400px; overflow: hidden; background: #080808; }
.lp-banner-oficial picture,
.lp-banner-oficial img { display: block; width: 100%; height: 100%; }
.lp-banner-oficial img { object-fit: cover; object-position: 50% 1%; }
.lp-banner-oficial + .lp-vantagens { margin-top: 0; }
.lp-vantagens { padding-block: 32px; background: #000; color: #fff; }
.lp-vantagens-grade { --lp-vantagens-unidade: calc((100% + 24px) / 8); position: relative; display: grid; grid-template-columns: var(--lp-vantagens-unidade) calc(var(--lp-vantagens-unidade) * 3 - 2px) 64px 1fr; width: 100%; min-height: 396px; }
.lp-vantagens-marca { min-width: 0; background: #000 url("../../../uploads/2025/01/vantagens.png") repeat 10% 10% / auto; }
.lp-vantagens-texto { min-width: 0; padding: 24px; border-radius: 0 10px 10px 0; background: #0b0b33; }
.lp-vantagens-texto h2 { display: inline-flex; align-items: center; justify-content: center; margin: 0 0 46px; padding-bottom: 10px; border-bottom: 1px solid #8cdaff; font-size: 32.4px; line-height: 1.2; font-weight: 400; }
.lp-vantagens-texto h2 strong { font-weight: 800; }
.lp-vantagens-texto p { margin: 0 0 24px; font-size: 13px; line-height: 1.3; }
.lp-vantagens-texto p:last-child { margin-bottom: 0; }
.lp-vantagens-foto { position: relative; grid-column: 4; min-height: 396px; border-radius: 10px 0 0 10px; background: #17131f; }
.lp-vantagens-foto > img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 4px; object-fit: cover; }
.lp-vantagens-faq { position: absolute; z-index: 1; bottom: 24px; left: calc(var(--lp-vantagens-unidade) + 24px); width: calc(var(--lp-vantagens-unidade) * 3 - 50px); border: 1px solid #0087fa; border-radius: 10px; background: #0b0b33; }
.lp-vantagens-faq .lp-col-titulo { margin: 0; }
.lp-vantagens-faq .lp-acord-cabeca { display: flex; width: 100%; min-height: 56px; align-items: center; justify-content: space-between; padding: 10px 16px; border: 0; background: transparent; color: #fff; font-size: 16px; line-height: 28px; font-weight: 400; text-align: left; cursor: pointer; }
.lp-vantagens-faq .lp-acord-corpo { padding: 0 16px 16px; }
.lp-vantagens-faq .lp-acord-corpo p { margin: 0; font-size: 13px; line-height: 1.5; }
.lp-vantagens-faq a { color: #fff; font-weight: 700; }

/* ── as 10 perguntas dentro da caixa (L20) ─────────────────────────────── */
/* a caixa vira coluna flex para o miolo poder rolar sozinho quando ela encosta no teto */
.lp-vantagens-faq { display: flex; flex-direction: column; }
.lp-vantagens-faq .lp-acord-corpo { min-height: 0; }
.lp-faq-intro { margin: 0 0 12px; }
.lp-faq-lista { margin: 0; padding: 0; list-style: none; }
.lp-faq-item + .lp-faq-item { border-top: 1px solid rgba(0, 135, 250, .35); }
.lp-faq-pergunta { margin: 0; font-size: inherit; font-weight: inherit; }
.lp-faq-cabeca {
  display: flex;
  width: 100%;
  min-height: 44px;   /* alvo de toque da casa */
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 0;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 14px;
  line-height: 1.35;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.lp-faq-cabeca[aria-expanded="true"] .lp-acord-seta { transform: rotate(180deg); }
.lp-faq-resposta { padding: 0 0 14px; }
.lp-faq-resposta[hidden] { display: none; }
.lp-faq-resposta p { margin: 0; font-size: 13px; line-height: 1.5; color: #dfe3f5; }

/* ── depoimentos ───────────────────────────────────────────────────────── */
.lp-home-depoimentos { padding: 64px 0 70px; background: #f0f2f3; }
.lp-home-depoimentos .lp-home-titulo { margin-bottom: 48px; text-align: left; }
.lp-depoimentos-janela,
.lp-blog-janela { position: relative; }
.lp-depoimentos-trilho { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; }
.lp-depoimento { flex: 0 0 100%; height: 345px; min-height: 345px; margin: 0; padding: 28px; border-radius: 13px; background: #fff; box-shadow: 0 2px 14px rgba(34, 29, 55, .13); scroll-snap-align: start; }
.lp-depoimento { display: flex; flex-direction: column; }
.lp-depoimento-topo { display: flex; order: 2; align-items: center; margin-top: 20px; }
.lp-depoimento-topo > img:not(.lp-depoimento-aspas) { width: 61px; height: 60px; border-radius: 50%; object-fit: cover; }
.lp-depoimento figcaption { display: grid; margin-left: 14px; line-height: 1.3; }
.lp-depoimento figcaption strong { color: #242335; font-size: 16px; }
.lp-depoimento figcaption span { margin-top: 3px; color: #7d7990; font-size: 13px; }
.lp-depoimento-aspas { width: 146px; height: auto; margin-left: auto; }
.lp-depoimento blockquote { order: 1; margin: 0 0 auto; padding-left: 16px; border-left: 2px solid rgb(130, 36, 227); color: rgb(53, 65, 91); font-size: 16px; line-height: 1.8; }
.lp-depoimento blockquote p { margin: 0; }
.lp-seta {
  position: absolute;
  z-index: 2;
  top: 50%;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #3b4050;
  cursor: pointer;
  transform: translateY(-50%);
}
.lp-seta::before { content: ""; position: absolute; z-index: -1; width: 32px; height: 32px; border-radius: 50%; background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, .18); }
.lp-home-depoimentos .lp-seta { top: -67px; transform: none; }
.lp-home-depoimentos .lp-seta--ant { right: 44px; left: auto; }
.lp-home-depoimentos .lp-seta--prox { right: 0; }
.lp-home-blog .lp-seta--ant { left: -22px; }
.lp-home-blog .lp-seta--prox { right: -22px; }

/* ── blog ───────────────────────────────────────────────────────────────── */
.lp-home-blog { padding: 64px 0 56px; background: #19083a; }
.lp-home-blog .lp-home-titulo { margin-bottom: 30px; color: #fff; }
.lp-home-blog .lp-home-titulo::after { content: ""; display: block; width: 103px; height: 1px; margin: 30px auto 0; background: #8cdaff; }
.lp-blog-trilho { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; }
.lp-blog-card { flex: 0 0 calc((100% - 40px) / 3); min-width: 0; min-height: 580px; border-radius: 11px; background: #fff; box-shadow: 0 2px 14px rgba(34, 29, 55, .13); overflow: hidden; scroll-snap-align: start; }
.lp-blog-foto { display: block; width: 100%; aspect-ratio: 342 / 234.7; overflow: hidden; }
.lp-blog-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lp-blog-corpo { padding: 24px 28px 30px; }
.lp-blog-corpo h3 { min-height: 46px; margin: 0 0 10px; font-size: 16px; line-height: 19.2px; }
.lp-blog-corpo h3 a { color: #2a323c; text-decoration: none; }
.lp-blog-corpo time { color: #727f9f; font-size: 13px; }
.lp-blog-corpo p { min-height: 68px; margin: 16px 0 10px; color: #7d7987; font-size: 14px; line-height: 28px; }
.lp-blog-mais { position: relative; display: inline-flex; width: min(288px, 100%); height: 28.8px; min-height: 28.8px; align-items: center; justify-content: flex-start; border-radius: 4.8px; background: transparent; color: #0088fb; text-decoration: none; }
.lp-blog-mais::after { content: ""; position: absolute; top: 50%; right: 0; left: 0; height: 44px; transform: translateY(-50%); }
.lp-home-blog .lp-seta { width: 56px; height: 56px; }

/* ── confiança; estilo que antes estava inline no conteúdo legado ──────── */
.lp-trust { margin: 52px 0 0; padding: 48px 16px; background: #fbfbfe; color: #1a1830; }
.lp-trust * { box-sizing: border-box; }
.lp-trust-inner { max-width: 1140px; margin: 0 auto; }
.lp-trust-title { margin: 0 0 6px; color: #14132b; font-size: 28px; line-height: 1.2; font-weight: 800; letter-spacing: .3px; text-align: center; }
.lp-trust-title span { background: linear-gradient(90deg, #7c3aed, #4f8cff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.lp-trust-sub { margin: 0 0 30px; color: #6f6d86; font-size: 15px; text-align: center; }
.lp-trust-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.lp-trust-card { padding: 24px 22px; border: 1px solid #ece9f7; border-radius: 16px; background: #fff; box-shadow: 0 6px 22px rgba(20, 16, 60, .06); text-align: left; transition: transform .2s, box-shadow .2s; }
.lp-trust-card:hover { box-shadow: 0 12px 28px rgba(20, 16, 60, .1); transform: translateY(-3px); }
.lp-trust-ico { display: flex; width: 46px; height: 46px; align-items: center; justify-content: center; margin: 0 0 14px; border-radius: 12px; background: rgba(124, 58, 237, .1); color: #7c3aed; }
.lp-trust-ico .lp-icon svg { width: 23px; height: 23px; }
.lp-trust-card h3 { margin: 0 0 7px; color: #1a1830; font-size: 15px; line-height: 1.25; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; }
.lp-trust-card p { margin: 0; color: #6f6d86; font-size: 13.5px; line-height: 1.5; }
.lp-trust-ra { border: 0; background: linear-gradient(160deg, #1bb55c, #0f9a48); color: #fff; }
.lp-trust-ra h3 { color: #fff; }
.lp-trust-ra p { color: #eafff2; }
.lp-ra-logo { display: inline-flex; width: 50px; height: 50px; align-items: center; justify-content: center; margin: 0 0 12px; border-radius: 12px; background: #fff; color: #12903f; font-size: 19px; font-weight: 900; letter-spacing: -1px; }
.lp-ra-btn { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; margin-top: 14px; padding: 11px 18px; border-radius: 9px; background: #0c7d39; color: #fff; font-size: 12.5px; font-weight: 800; letter-spacing: .4px; text-decoration: none; text-transform: uppercase; }
.lp-trust-band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; margin-top: 22px; padding: 24px 28px; border: 1px solid #2c2752; border-radius: 18px; background: linear-gradient(125deg, #14122c, #231b42); color: #fff; }
.lp-trust-band-l,
.lp-trust-band-r { display: flex; align-items: center; gap: 16px; }
.lp-trust-band-l { flex: 1; min-width: 260px; }
.lp-trust-band-l > .lp-icon { flex: 0 0 32px; justify-content: center; color: #a78bfa; }
.lp-trust-band-l > .lp-icon svg { width: 32px; height: 32px; }
.lp-trust-band h3 { margin: 0 0 4px; color: #fff; font-size: 16px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; }
.lp-trust-band p { margin: 0; color: #c9c6e6; font-size: 13px; line-height: 1.5; }
.lp-verified { display: inline-flex; align-items: center; gap: 8px; margin-top: 9px; }
.lp-verified .lp-ra-logo { display: inline-flex; width: 30px; height: 30px; margin: 0; border-radius: 7px; background: #1bb55c; color: #fff; font-size: 12px; }
.lp-verified > span:last-child { color: #33d27e; font-size: 12px; font-weight: 700; letter-spacing: .5px; }
.lp-trust-band-r > img { width: 88px; height: 88px; padding: 6px; border-radius: 10px; background: #fff; }
.lp-trust-band-r > div { max-width: 160px; text-align: left; }
.lp-trust-band-r p { margin-bottom: 9px; font-size: 12.5px; line-height: 1.4; }
.lp-trust-band-r .lp-ra-btn { margin-top: 0; }

@media (min-width: 601px) {
  .lp-hero-dots { display: none; }
  .lp-hero-slide--cupom .lp-hero-cta { min-height: 48px; }

  .lp-hero-conteudo--segura .lp-hero-cta { min-width: 186px; min-height: 48px; }
  .lp-hero-conteudo--eco .lp-hero-cta { min-width: 201px; min-height: 51.2px; margin-top: 10px; }
  /* em 601 o bloco do Eco crescia até jogar o botão 41px abaixo do banner; a produção o
     mantém visível (bottom 424 dentro dos 490). Fonte menor até 767 resolve. */
  @media (max-width: 767px) {
    .lp-hero-conteudo--eco h2 { padding: 12px; font-size: 20px; }
    .lp-hero-conteudo--eco ul { font-size: 13px; line-height: 1.5; }
    .lp-hero-conteudo--eco .lp-hero-cta { min-width: 150px; min-height: 42px; font-size: 12px; }
  }
  .lp-hero-conteudo--sk .lp-hero-cta { min-width: 201px; min-height: 51.2px; }
  .lp-hero-produto { top: 83px; left: 47px; width: min(550px, 46%); }
  /* L20: a caixa deixou de ser enfeite — ela abre também no desktop. Fechada continua nos
     58px do gabarito; aberta ela cresce PRA CIMA (está ancorada no rodapé da seção) até o
     teto da própria seção, e a lista rola por dentro. Assim a geometria da faixa preta não
     muda e as perguntas não vazam por baixo dela. */
  .lp-vantagens-faq { max-height: calc(100% - 48px); overflow: hidden; }
  .lp-vantagens-faq .lp-acord-cabeca { min-height: 56px; }
  .lp-vantagens-faq .lp-acord-corpo { overflow-y: auto; }
  /* o casco desmonta a sanfona no desktop (o RODAPÉ vira colunas): lá `[hidden]` volta a
     `display:block` e a seta some. Aqui a caixa é sanfona de verdade nas duas larguras. */
  .lp-vantagens-faq .lp-acord-corpo[hidden] { display: none; }
  .lp-vantagens-faq .lp-acord-seta { display: block; }
  .lp-trust-sub { line-height: 28px; }
  .lp-trust-grid { grid-template-rows: 199.5px 254.3px; }
  .lp-trust-card h3 { padding-top: 16px; line-height: 1.4; }
  .lp-trust-ra .lp-ra-btn { margin-top: 20px; }
  .lp-trust-band { min-height: 156.5px; }
  .home .lp-card-titulo { font-size: 16px; line-height: 19.2px; }
  .home .lp-preco-avista { margin-top: 8px; font-size: 16px; line-height: 28px; font-weight: 700; }
  .home .lp-preco-avista .woocommerce-Price-amount { font-weight: 700; }
  .home .lp-preco-parcela { margin: -8px 0 0; }
  .home .lp-preco-pix { margin: 4.8px 0 16px; padding: 10.4px 13.6px; }
}

/* A produção encolhe os respiros entre seções em degraus; nós só tínhamos o degrau de 600
   e aplicávamos o desktop cheio de 601 pra cima — daí os vãos grandes no tablet e no
   notebook pequeno. Valores medidos na produção: o vão da grade até a faixa do LANÇAMENTO
   é 94,4 em 768 e 107,2 em 1024 (é contínuo lá, por causa da fonte-raiz responsiva do
   Impreza; aqui vira degrau, que fecha nas duas larguras medidas). O vão até o título dos
   sabores é 56 nos dois — 40 de padding dos packs + 16 no topo dos sabores. */
@media (min-width: 601px) and (max-width: 1024px) {
  .lp-home-principais { padding-bottom: 94.4px; }
  .lp-home-packs { padding-bottom: 40px; }
  .lp-home-sabores { padding-top: 16px; }
}
/* [divergência pedida — dono, 17/ago] no desktop o vão também encolhe: 136 → 107,2px. Não é
   número inventado: 107,2 é o que a produção usa em 1024. Aqui ela mantém 136 — mexer nisto
   afasta do gabarito de propósito, por ordem do dono. */
@media (min-width: 900px) {
  .lp-home-principais { padding-bottom: 107.2px; }
}

/* Slide do cupom na faixa 601–1024: a moldura já tem a largura da produção (50vw−24); o que
   não cabia era o conteúdo, que vinha com as medidas de 1440. Lá as três peças encolhem —
   chamada de 148px, selo e botão em duas linhas (medido no gabarito em 768). TETO em 1024 de
   propósito: sem ele estas regras vazavam para o desktop e encolhiam a tela já aprovada. */
@media (min-width: 601px) and (max-width: 1024px) {
  .lp-hero-chamada { flex: 0 1 148px; font-size: 16px; }
  .lp-hero-acao { padding-left: 12px; }
  .lp-hero-cupom { gap: 8px; margin-left: 8px; font-size: 11px; white-space: normal; }
  .lp-hero-cupom > .lp-icon { flex-basis: 16px; }
  .lp-hero-cupom svg { width: 16px; height: 16px; }
  .lp-hero-slide--cupom .lp-hero-cta {
    width: 117px; min-width: 0; margin-left: 0; padding: 8px 10px;
    font-size: 11px; line-height: 1.2; text-align: center;
  }
}

@media (max-width: 900px) {
  .lp-home-ofertas { grid-template-columns: 190px 1fr; padding-right: 20px; }
  .lp-oferta-slide { flex-basis: calc((100% - 19px) / 2); }
  .lp-home-sk-grade { gap: 24px; }
}

@media (max-width: 600px) {
  .lp-home-container { width: calc(100% - 48px); }
  .lp-home-secao { padding-block: 48px; }
  .lp-home-titulo { margin-bottom: 28px; font-size: 21.9px; }
  .lp-home-principais .lp-home-titulo,
  .lp-home-sabores .lp-home-titulo { font-size: 24.29px; }

  /* A peça do FIT tem proporção fixa (390x470) e a arte é `cover`: em tela mais larga
     que 390 a peça parava de crescer e sobrava fundo dos dois lados. Agora a altura ÚTIL
     acompanha a largura, na proporção da peça: numa tela de 390 dá os mesmos 470px de
     antes, e acima disso arte e texto crescem juntos e preenchem o celular inteiro.
     Os outros 4 slides acompanham (fundo `cover`, âncoras em % e no rodapé). */
  .lp-hero { --lp-hero-util: calc(100vw * 470 / 390); height: calc(var(--lp-header-h) + var(--lp-hero-util)); }
  .lp-hero-fundo img { object-position: 80% 50%; }
  .lp-hero-cta { min-height: 45px; padding: 9px 24px; font-size: 14px; }
  .lp-hero-produtos-cupom { position: absolute; z-index: 1; top: 200px; left: -24px; display: block; width: 438px; max-width: none; height: 490px; object-fit: fill; pointer-events: none; }

  .lp-hero-slide--cupom .lp-hero-conteudo { width: 100%; }
  .lp-hero-slide--cupom .lp-hero-conteudo::before { top: 0; left: 13.3%; width: 73.4%; height: 94px; border-radius: 0 0 10px 10px; }
  .lp-hero-slide--cupom .lp-hero-conteudo::after { top: 148px; width: 65%; height: 191px; }
  .lp-hero-marca-faixa,
  .lp-hero-quadro,
  .lp-hero-acao { display: contents; }
  .lp-hero-marca { position: absolute; z-index: 1; top: 24px; left: 17.4%; width: 65%; height: auto; }
  .lp-hero-chamada { position: absolute; z-index: 1; top: 166px; left: 24px; width: 178px; min-height: auto; padding: 0; border: 0; font-size: 16px; line-height: 1.2; }
  .lp-hero-chamada::after { display: none; }
  .lp-hero-chamada strong { font-size: 16px; }
  .lp-hero-cupom { position: absolute; z-index: 1; top: 242px; left: 26px; gap: 22px; margin-left: 0; font-size: 12px; }
  .lp-hero-cupom > .lp-icon { flex-basis: 24px; }
  .lp-hero-slide--cupom .lp-hero-cta { position: absolute; z-index: 1; top: 280px; left: 8px; min-width: 180px; margin-left: 0; }

  .lp-hero-conteudo--segura { top: var(--lp-header-h); width: 100%; height: calc(100% - var(--lp-header-h)); }
  .lp-hero-conteudo--segura h2 { top: 0; left: 7.7%; width: 84.6%; min-height: 87px; padding: 27px 12px 18px 88px; border-radius: 0 0 10px 10px; font-size: 24px; }
  .lp-hero-qr { top: 25px; left: 58px; width: 42px; height: 42px; }
  .lp-hero-conteudo--segura p { top: 123px; left: 48px; width: 310px; font-size: 14px; line-height: 1.3; }
  /* no celular o par chamada+botão fica em x48 (o botão 6px à esquerda, como no gabarito);
     a caixa nova herdava o recuo de 112 do desktop e jogava os dois pra direita. */
  .lp-hero-segura-acao { top: 176px; left: 48px; width: 310px; gap: 14px; }
  .lp-hero-segura-acao > strong { font-size: 14px; line-height: 1.3; }
  .lp-hero-conteudo--segura .lp-hero-cta { margin-left: -6px; min-width: 177px; }

  .lp-hero-conteudo--eco { top: var(--lp-header-h); left: 0; width: 100%; height: calc(100% - var(--lp-header-h)); }
  .lp-hero-conteudo--eco > div { position: absolute; z-index: 2; inset: 0; width: 100%; }
  .lp-hero-conteudo--eco h2 { position: absolute; top: 0; left: 7.7%; width: 84.6%; min-height: 85px; margin: 0; padding: 17px 16px; border-radius: 0 0 10px 10px; font-size: 22px; line-height: 1.15; font-weight: 400; text-align: center; }
  .lp-hero-conteudo--eco ul { position: absolute; top: 120px; left: 48px; width: 305px; margin: 0; padding-left: 24px; font-size: 14px; line-height: 1.8; }
  .lp-hero-conteudo--eco .lp-hero-cta { position: absolute; top: 230px; left: 46px; min-width: 202px; min-height: 51.2px; margin: 0; }
  .lp-hero-produto { z-index: 1; top: auto; bottom: 47px; left: 13%; width: 74%; max-height: none; object-fit: contain; }

  .lp-hero-conteudo--sk { top: var(--lp-header-h); width: 100%; height: calc(100% - var(--lp-header-h)); }
  .lp-hero-conteudo--sk h2 { width: 84.6%; min-height: 78px; margin: 0 0 0 7.7%; padding: 21px 16px 17px; border-radius: 0 0 10px 10px; font-size: 24px; text-align: center; }
  .lp-hero-conteudo--sk ul { margin: 31px 32px 0 48px; padding-left: 18px; font-size: 14px; line-height: 1.8; }
  .lp-hero-conteudo--sk .lp-hero-cta { margin: 13.4px 0 0 38px; min-width: 202px; min-height: 51.2px; }
  .lp-hero-dots { bottom: 0; }

  /* Campanha SK mobile aprovada em 23/ago: cenário, produtos e mensagem comercial ficam em
     camadas independentes. O banner desktop legado continua intacto acima de 600px. */
  .lp-hero-slide--sk { background: #d9d9ff; }
  .lp-hero-slide--sk .lp-hero-sk-legado,
  .lp-hero-slide--sk .lp-hero-conteudo--sk { display: none; }
  .lp-hero-sk-campanha {
    position: absolute;
    z-index: 2;
    top: var(--lp-header-h);
    left: 50%;
    display: block;
    overflow: hidden;
    width: min(100%, 480px);
    height: var(--lp-hero-util);   /* segue o vão: por dentro a peça já é proporcional (top em %, preço no rodapé) */
    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
    transform: translateX(-50%);
  }
  .lp-hero-sk-campanha-fundo {
    position: absolute;
    z-index: 0;
    inset: 0;
    display: block;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
  }
  .lp-hero-sk-campanha-fundo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 10%;
  }
  .lp-hero-sk-sabor {
    position: absolute;
    z-index: 4;
    height: 96px;
    color: #663db6;
    filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .6));
    pointer-events: none;
  }
  .lp-hero-sk-sabor--triple {
    top: 15px;
    left: 1.5%;
    width: 32.3%;
    transform: rotate(-3deg);
  }
  .lp-hero-sk-sabor--waterberry {
    top: 0;
    left: 28.2%;
    width: 43.6%;
    color: #315db8;
  }
  .lp-hero-sk-sabor--grape {
    top: 17px;
    right: 1.5%;
    width: 29.2%;
    color: #6c2cb4;
    transform: rotate(3deg);
  }
  .lp-hero-sk-sabor-arco {
    display: block;
    overflow: visible;
    width: 100%;
    height: 68px;
  }
  .lp-hero-sk-sabor-arco text {
    fill: currentColor;
    font-size: clamp(9px, 3vw, 14px);
    font-weight: 800;
    letter-spacing: -.15px;
  }
  .lp-hero-sk-sabor-icone {
    position: absolute;
    top: 47px;
    left: 50%;
    display: grid;
    width: clamp(30px, 8.7vw, 40px);
    height: clamp(30px, 8.7vw, 40px);
    place-items: center;
    border: 1.5px solid currentColor;
    border-radius: 50%;
    background: rgba(255, 255, 255, .24);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .5), 0 0 10px rgba(255, 255, 255, .82);
    transform: translateX(-50%);
  }
  .lp-hero-sk-sabor-icone svg {
    display: block;
    width: 63%;
    height: 63%;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .lp-hero-sk-produto {
    position: absolute;
    z-index: 3;
    display: block;
    max-width: none;
    filter: drop-shadow(0 11px 10px rgba(28, 10, 52, .45));
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
  }
  .lp-hero-sk-produto img { display: block; width: 100%; height: auto; }
  .lp-hero-sk-produto--triple {
    top: 30%;
    left: 28.5%;
    width: clamp(180px, 52%, 235px);
    transform: translateX(-50%) rotate(-3deg);
    transform-origin: 50% 100%;
  }
  .lp-hero-sk-produto--waterberry {
    z-index: 4;
    top: 26%;
    left: 50%;
    width: clamp(220px, 60%, 270px);
    transform: translateX(-50%);
  }
  .lp-hero-sk-produto--grape {
    top: 30%;
    left: 71.5%;
    width: clamp(180px, 52%, 235px);
    transform: translateX(-50%) rotate(3deg);
    transform-origin: 50% 100%;
  }
  .lp-hero-sk-preco {
    position: absolute;
    z-index: 6;
    bottom: 12px;
    left: 50%;
    display: block;
    width: clamp(205px, 54%, 250px);
    height: 98px;
    border: 2px solid rgba(238, 224, 255, .96);
    border-radius: 26px 26px 19px 19px;
    background: linear-gradient(145deg, rgba(78, 48, 166, .98), rgba(47, 26, 112, .99) 56%, rgba(82, 39, 142, .98));
    box-shadow: 0 0 5px #fff, 0 0 11px #8174ff, 0 0 19px #9e4bff, inset 0 0 17px rgba(255, 255, 255, .13);
    color: #fff;
    transform: translateX(-50%);
    text-align: center;
    text-decoration: none;
  }
  .lp-hero-sk-preco-modelo {
    position: absolute;
    top: -14px;
    left: 50%;
    display: grid;
    width: 75%;
    height: 34px;
    place-items: center;
    border: 2px solid #f4dfff;
    border-radius: 12px;
    background: linear-gradient(180deg, #bd59e0, #6829a4 64%, #481c7d);
    box-shadow: 0 0 6px #fff, 0 0 12px #9f4cff, inset 0 0 8px rgba(255, 255, 255, .35);
    font-family: Impact, Haettenschweiler, "Arial Black", Arial, Helvetica, sans-serif;
    font-size: clamp(18px, 5.15vw, 24px);
    line-height: 1;
    font-weight: 900;
    letter-spacing: .2px;
    text-shadow: 0 2px 2px rgba(55, 10, 78, .8);
    transform: translateX(-50%);
  }
  .lp-hero-sk-preco-apenas {
    position: absolute;
    top: 25px;
    left: 0;
    display: block;
    width: 100%;
    font-size: clamp(15px, 4.6vw, 20px);
    line-height: 1;
    font-style: italic;
    font-weight: 900;
    text-shadow: 0 2px 2px rgba(47, 4, 78, .85);
  }
  .lp-hero-sk-preco-apenas::before,
  .lp-hero-sk-preco-apenas::after {
    display: inline-block;
    width: 15%;
    height: 2px;
    margin: 0 10px 4px;
    background: linear-gradient(90deg, transparent, #fff);
    content: "";
  }
  .lp-hero-sk-preco-apenas::after { transform: rotate(180deg); }
  .lp-hero-sk-preco-valor {
    position: absolute;
    top: 40px;
    left: 0;
    display: block;
    width: 100%;
    font-family: Impact, Haettenschweiler, "Arial Black", Arial, Helvetica, sans-serif;
    font-size: clamp(48px, 15vw, 62px);
    line-height: .92;
    font-style: italic;
    font-weight: 900;
    letter-spacing: -2px;
    -webkit-text-stroke: 1px rgba(87, 20, 118, .62);
    text-shadow: 0 3px 0 #672b8c, 0 6px 4px rgba(28, 5, 52, .65), 0 0 7px rgba(255, 255, 255, .85);
  }

  /* Banner 1 mobile: composição aprovada sem caixa externa. A faixa oficial ocupa a largura
     toda e copy, CTA e produtos continuam em HTML/CSS sobre o cenário existente. */
  .lp-hero-slide--one-eco3 { background: #020413; }
  .lp-hero-slide--one-eco3 .lp-hero-fundo {
    inset: var(--lp-header-h) 0 0;
    display: block;
    width: auto;
    overflow: hidden;
    transform: none;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .lp-hero-slide--one-eco3 .lp-hero-fundo img {
    position: absolute;
    top: 9.5%;
    right: 0;
    bottom: auto;
    left: 0;
    display: block;
    width: 100%;
    max-width: none;
    height: 100%;
    object-fit: fill;
    object-position: 50% 50%;
    transform: none;
  }
  .lp-hero-slide--one-eco3 .lp-hero-conteudo,
  .lp-hero-slide--one-eco3 .lp-hero-produtos-cupom { display: none; }
  #banner .lp-hero-anterior,
  #banner .lp-hero-proximo { display: none; }

  .lp-hero-l19-painel {
    position: absolute;
    z-index: 4;
    top: var(--lp-header-h);
    left: 0;
    display: block;
    overflow: visible;
    width: 100%;
    height: calc(100% - var(--lp-header-h));
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    pointer-events: none;
  }
  .lp-hero-l19-marca {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    display: flex;
    width: 100%;
    height: 56px;
    align-items: center;
    justify-content: center;
    gap: 11px;
    padding: 7px 16px;
    border-bottom: 1px solid rgba(54, 159, 255, .85);
    background: linear-gradient(110deg, rgba(12, 143, 255, .98), rgba(8, 82, 229, .98) 53%, rgba(17, 37, 181, .98));
    box-shadow: 0 4px 18px rgba(0, 105, 255, .35);
  }
  .lp-hero-l19-selo {
    display: grid;
    width: 34px;
    height: 38px;
    flex: 0 0 34px;
    place-items: center;
    color: #fff;
    filter: drop-shadow(0 0 7px rgba(0, 208, 255, .58));
  }
  .lp-hero-l19-selo .lp-icon,
  .lp-hero-l19-selo .lp-icon svg { display: block; width: 34px; height: 38px; }
  .lp-hero-l19-marca strong {
    color: #fff;
    font-family: "Arial Black", Arial, Helvetica, sans-serif;
    font-size: clamp(20px, 6.7vw, 26px);
    line-height: 1;
    font-weight: 500;
    letter-spacing: .3px;
    white-space: nowrap;
  }
  .lp-hero-l19-copy {
    height: 100%;
    padding: 0;
    text-align: center;
  }
  .lp-hero-l19-copy p { margin: 0; color: #fff; }
  .lp-hero-l19-kicker {
    position: absolute;
    z-index: 1;
    top: 14.2%;
    left: 0;
    width: 100%;
    font-family: "Arial Black", Arial, Helvetica, sans-serif;
    font-size: clamp(18px, 5.6vw, 22px);
    line-height: normal;
    font-weight: 500;
    letter-spacing: .4px;
    text-align: center;
    text-shadow: 0 0 8px rgba(255, 255, 255, .55);
  }
  .lp-hero-l19-kicker::before,
  .lp-hero-l19-kicker::after {
    position: absolute;
    top: 50%;
    width: 18%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #3c8cff);
    box-shadow: 0 0 8px #176cff;
    content: "";
  }
  .lp-hero-l19-kicker::before { left: 5%; }
  .lp-hero-l19-kicker::after { right: 5%; transform: rotate(180deg); }
  .lp-hero-l19-modelos {
    position: absolute;
    z-index: 1;
    top: 21.2%;
    left: 4.1%;
    display: grid;
    width: 91.8%;
    height: 11.7%;
    align-items: center;
    gap: 8px;
    margin-top: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .lp-hero-l19-modelo {
    display: flex;
    height: 100%;
    padding: 3px 9px;
    align-items: center;
    justify-content: center;
    border: 2px solid #56b8ff;
    border-radius: 11px;
    background: linear-gradient(135deg, rgba(0, 35, 112, .26), rgba(0, 3, 22, .8));
    box-shadow: 0 0 11px rgba(35, 140, 255, .7), inset 0 0 13px rgba(22, 105, 255, .13);
    flex-direction: column;
    text-align: center;
  }
  .lp-hero-l19-modelo span {
    color: #fff;
    font-size: clamp(9px, 2.8vw, 11px);
    line-height: 1;
    font-weight: 500;
    letter-spacing: 1.1px;
  }
  .lp-hero-l19-modelo strong {
    margin-top: -1px;
    color: #4ca2ff;
    font-family: "Arial Black", Arial, Helvetica, sans-serif;
    font-size: clamp(22px, 7.4vw, 29px);
    line-height: 1;
    font-weight: 500;
    text-shadow: 0 0 9px rgba(30, 114, 255, .5);
  }
  .lp-hero-l19-descricao {
    position: absolute;
    z-index: 1;
    top: 34.3%;
    left: 5%;
    width: 90%;
    margin-top: 0 !important;
    font-size: clamp(11px, 3.4vw, 13px);
    line-height: 1.18;
    text-align: center;
    text-shadow: 0 1px 4px #000;
  }
  .lp-hero-l19-cta {
    position: absolute;
    z-index: 5;
    top: 41.5%;
    left: 18%;
    display: flex;
    width: 64%;
    height: 10.2%;
    min-height: 0;
    margin: 0;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 2px solid #5bc3ff;
    border-radius: 999px;
    background: linear-gradient(180deg, #3e73ff, #075ef0);
    box-shadow: 0 0 15px rgba(40, 137, 255, .72), inset 0 0 12px rgba(255, 255, 255, .2);
    color: #fff;
    font-family: "Arial Black", Arial, Helvetica, sans-serif;
    font-size: clamp(18px, 6.2vw, 24px);
    line-height: 1;
    font-weight: 500;
    text-decoration: none;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .24);
    pointer-events: auto;
  }
  .lp-hero-l19-beneficios { display: none; }
  .lp-hero-l19-produto {
    position: absolute;
    z-index: 2;
    display: block;
    max-width: none;
    height: auto;
    filter: drop-shadow(0 11px 11px rgba(0, 0, 0, .46));
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
  }
  .lp-hero-l19-produto--one {
    bottom: 35.72px;
    left: max(28%, calc(50% - 85.8px));
    width: min(19.7%, 76.83px);
  }
  .lp-hero-l19-produto--eco3 {
    z-index: 3;
    right: auto;
    bottom: 34.78px;
    left: calc(50% + 9px);
    width: min(22.7%, 88.52px);
  }

  .lp-ticker { width: auto; height: 48px; margin: 0; padding: 0; overflow: visible; border-radius: 0; box-shadow: none; }
  .lp-ticker-trilho { position: relative; top: 40px; width: calc(100% - 32px); height: 41.6px; gap: 11px; overflow: hidden; }
  .lp-ticker-item { height: 41.6px; flex-basis: 100%; gap: 10px; }
  .lp-ticker-item:nth-child(3) { flex-basis: 100%; margin-left: 0; }
  .lp-ticker-item img { width: 35.2px; height: 32px; flex-basis: 35.2px; }
  .lp-ticker-item strong { font-size: 12px; }
  .lp-ticker-texto p { font-size: 13px; line-height: 16.9px; }

  .lp-home-grade { gap: 19.2px; }
  .lp-home-grade--4,
  .lp-home-grade--2 { grid-template-columns: repeat(2, 1fr); }
  .lp-home-principais .lp-card-prod,
  .lp-home-packs .lp-card-prod { min-width: auto; }
  .home .lp-card-titulo a { display: block; }
  .home a.button.lp-card-botao,
  .home .lp-card-botao { display: inline-flex; flex: 1 1 auto; min-width: 0; justify-content: center; padding-right: 8px; padding-left: 8px; }

  .lp-home-principais { margin-top: -96px; padding-top: 187.5px; padding-bottom: 59.5px; }
  .lp-home-principais .lp-home-titulo { margin-bottom: 25.7px; }

  /* Nos banners montados, os 470px úteis terminam antes dos controles. A seção branca
     deixa de cobrir o final do cenário e os encaixes permanecem estáveis no autoplay. */
  #banner:has(.lp-hero-slide--one-eco3.lp-on),
  #banner:has(.lp-hero-slide--sk.lp-on) { overflow: visible; }
  #banner:has(.lp-hero-slide--one-eco3.lp-on) .lp-hero-dots,
  #banner:has(.lp-hero-slide--sk.lp-on) .lp-hero-dots { bottom: -44px; }
  #banner:has(.lp-hero-slide--one-eco3.lp-on) + .lp-ticker .lp-ticker-trilho,
  #banner:has(.lp-hero-slide--sk.lp-on) + .lp-ticker .lp-ticker-trilho { top: 56px; }
  #banner:has(.lp-hero-slide--one-eco3.lp-on) + .lp-ticker + .lp-home-principais,
  #banner:has(.lp-hero-slide--sk.lp-on) + .lp-ticker + .lp-home-principais {
    margin-top: -48px;
    padding-top: 139.5px;
  }

  .lp-home-sk { padding-block: 20px; }
  .lp-home-sk .lp-home-titulo { display: block; }
  .lp-home-sk-grade { display: block; }
  .lp-sk-banner { margin-bottom: 32px; }
  .lp-home-packs { padding-bottom: 40px; }
  .lp-home-packs .lp-home-titulo { margin-bottom: 32px; }

  .lp-home-sabores { padding: 32px 0 24.5px; }
  .lp-home-sabores .lp-home-titulo { margin-bottom: 16px; }
  .lp-sabor { flex-basis: 300px; width: 300px; height: 300px; }
  .lp-sabor strong { font-size: 13px; line-height: 15.6px; }

  .lp-home-ofertas { display: flex; min-height: 0; flex-direction: column; padding: 24px 24px 26px; }
  .lp-ofertas-cabeca { display: contents; }
  .lp-ofertas-cabeca h3 { order: 1; margin: 0; font-size: 21.9px; line-height: 26.28px; }
  .lp-ofertas-cabeca p { order: 1; margin: -1.6px 0 0; line-height: 20.8px; }
  .lp-ofertas-cabeca > a { order: 3; width: 100%; align-self: stretch; justify-content: center; min-height: 44px; margin: 12px 0; }
  .lp-ofertas-janela { order: 2; padding: 0; margin-top: 16px; }
  .lp-ofertas-trilho { gap: 0; margin-inline: -8px; }
  .lp-oferta-slide { flex-basis: 50%; padding: 0; }
  .lp-oferta-slide .lp-card-prod { position: relative; padding: 8px 20.8px 20.9px; background: transparent; box-shadow: none; }
  .lp-oferta-slide .lp-card-prod::before { content: ""; position: absolute; z-index: 0; inset: 8px; border-radius: 12.8px; background: #fff; box-shadow: 0 1.12px 2.24px rgba(0, 0, 0, .1), 0 3.68px 11.2px rgba(0, 0, 0, .1); }
  .lp-oferta-slide .lp-card-prod > * { position: relative; z-index: 1; }

  .lp-banner-oficial { height: 473px; }
  .lp-vantagens { padding-block: 0; }
  .lp-vantagens-grade { display: block; width: 100%; min-height: 0; padding-bottom: 24px; background: #0b0b33; }
  .lp-vantagens-marca { display: none; }
  .lp-vantagens-texto { padding: 24px 24px 0; border-radius: 0 16px 0 0; background: #0b0b33; }
  .lp-vantagens-texto h2 { margin-bottom: 38.6px; font-size: 21.9px; line-height: 1.2; }
  .lp-vantagens-texto p { font-size: 13px; }
  .lp-vantagens-texto p:first-of-type { margin-bottom: 16px; }
  .lp-vantagens-foto { display: flex; min-height: 0; flex-direction: column; background: transparent; }
  .lp-vantagens-foto > img { position: static; width: 100%; height: 215px; margin: 0; border-radius: 0; object-fit: cover; }
  .lp-vantagens-grade > .lp-vantagens-faq { position: static; width: calc(100% - 48px); margin: 27px 24px 24px; }

  .lp-home-depoimentos { padding: 48px 0 60px; }
  .lp-home-depoimentos .lp-home-titulo { margin-bottom: 9px; text-align: left; }
  .lp-depoimentos-trilho { gap: 16px; }
  .lp-depoimento { height: 323px; min-height: 323px; padding: 22px; }
  .lp-depoimento blockquote { font-size: 13px; }
  .lp-home-depoimentos .lp-seta { top: calc(100% + 16px); color: #fff; transform: none; }
  .lp-home-depoimentos .lp-seta::before { background: linear-gradient(90deg, #03b8fe, #317ef8); }
  .lp-home-depoimentos .lp-seta--ant { right: auto; left: calc(50% - 44px); }
  .lp-home-depoimentos .lp-seta--prox { right: calc(50% - 44px); }

  .lp-home-blog { padding: 48px 0 16px; }
  .lp-home-blog .lp-home-titulo { margin-bottom: 30px; }
  .lp-blog-trilho { gap: 16px; }
  .lp-blog-card { flex-basis: 100%; min-height: 588px; }
  .lp-blog-corpo { padding: 20px 22px 26px; }
  .lp-home-blog .lp-seta--ant { left: -14px; }
  .lp-home-blog .lp-seta--prox { right: -14px; }

  .lp-trust { margin-top: 22px; padding: 30px 11px; }
  .lp-trust-title { font-size: 19px; }
  .lp-trust-sub { margin-bottom: 18px; font-size: 12.5px; }
  .lp-trust-sub { line-height: 28px; }
  .lp-trust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: 168.5px 167.3px 238.3px; gap: 10px; }
  .lp-trust-card { min-height: 0; padding: 14px 12px; border-radius: 12px; }
  .lp-trust-ico { width: 34px; height: 34px; margin-bottom: 8px; border-radius: 9px; }
  .lp-trust-ico .lp-icon svg { width: 18px; height: 18px; }
  .lp-trust-card h3 { margin-bottom: 4px; padding-top: 16px; font-size: 12px; line-height: 1.2; letter-spacing: .2px; }
  .lp-trust-card p { font-size: 11.5px; line-height: 1.35; }
  .lp-ra-logo { width: 36px; height: 36px; margin-bottom: 8px; font-size: 14px; }
  .lp-ra-btn { min-height: 0; margin-top: 10px; padding: 8px 11px; font-size: 10.5px; }
  .lp-trust-ra .lp-ra-btn { margin-top: 37.5px; }
  .lp-trust-band { min-height: 374px; flex-direction: column; gap: 16px; margin-top: 14px; padding: 20px 16px; text-align: center; }
  .lp-trust-band-l { min-width: 0; flex-direction: column; gap: 10px; text-align: center; }
  .lp-trust-band-l > .lp-icon { flex-basis: 28px; }
  .lp-trust-band-l > .lp-icon svg { width: 28px; height: 28px; }
  .lp-trust-band h3 { font-size: 14px; }
  .lp-trust-band p { font-size: 12px; }
  .lp-verified { margin-right: auto; margin-left: auto; }
  .lp-trust-band-r { flex-direction: column; gap: 10px; justify-content: center; margin-top: 0; }
  .lp-trust-band-r > img { width: 96px; height: 96px; }
  .lp-trust-band-r > div { max-width: none; text-align: center; }
}

/* LD17 (16/ago/2026): os carrosséis replicam a produção e rodam SEMPRE — o desligamento
   por prefers-reduced-motion que vivia aqui saiu por ordem do dono. */

/* ══ L18 — abertura do título e vitrine em filas ═════════════════════════════
   O h2 continua sendo o da produção (tag, id, texto e lugar): a abertura só o embrulha.
   As filas rolam no dedo (scroll nativo + snap); seta e barrinha são enfeite do home.js e
   só aparecem quando existe o que rolar — fila que cabe inteira na tela fica parada. */
.lp-abre { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px; margin-bottom: 28px; }
.lp-abre .lp-home-titulo { margin: 0; }
.lp-abre-ico { flex: 0 0 auto; }
/* o degradê do traço é o mesmo <defs> que o casco já serve pros ícones da gaveta */
.lp-abre-ico svg { width: 38px; height: 38px; stroke: url(#lp-grad-ico); }
.lp-abre-filete { flex: 1 1 0; min-width: 40px; height: 3px; border-radius: 2px; }
.lp-abre-filete--e { background: linear-gradient(90deg, rgba(21, 172, 244, 0), rgb(21, 172, 244)); }
.lp-abre-filete--d { background: linear-gradient(90deg, rgb(183, 52, 157), rgba(183, 52, 157, 0)); }
.lp-abre-linha { display: none; }

.lp-home-sub { margin: 0 0 20px; color: var(--lp-home-cinza); font-size: 22px; line-height: 1.35; text-align: center; }
.lp-home-sub strong { color: var(--lp-home-titulo); font-weight: 700; }
.lp-fila + .lp-home-sub,
.lp-home-grade + .lp-home-sub { margin-top: 44px; }

.lp-fila { position: relative; }
.lp-fila-trilho {
  display: flex; gap: 20px; padding-block: 6px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none;
}
.lp-fila-trilho::-webkit-scrollbar { display: none; }
/* cresce só quando sobra espaço: com 5 cards a fila rola e o 5º dá a espiada; com 4 ela
   fecha a largura do container, sem o buraco que a reserva da espiada deixaria. */
/* `height: auto` não é enfeite: o card do casco pede `height: 100%`, e altura declarada
   desliga o esticão do flex — o card sem preço terminava mais alto que os vizinhos. */
.lp-fila-trilho > * { flex: 1 0 calc((100% - 60px - 52px) / 4); height: auto; scroll-snap-align: start; }
.lp-fila--curta .lp-fila-trilho { justify-content: center; }
.lp-fila--curta .lp-fila-trilho > * { flex-grow: 0; }
/* a seta centra na altura dos CARDS: o `bottom` desconta a barrinha embaixo */
.lp-fila .lp-seta { top: 0; bottom: 18px; height: 44px; margin-block: auto; transform: none; }
.lp-fila .lp-seta--ant { left: -12px; }
.lp-fila .lp-seta--prox { right: -12px; }
/* só as setas DA FILA: as dos outros carrosséis da home seguem como estão */
.lp-fila .lp-seta[hidden] { display: none; }
.lp-fila .lp-seta[disabled] { opacity: .35; cursor: default; }
.lp-fila-barra { height: 4px; margin-top: 14px; border-radius: 2px; background: #ece6f5; }
.lp-fila-barra[hidden] { display: none; }
.lp-fila-barra span { display: block; width: 100%; height: 100%; border-radius: 2px; background: var(--lp-grad); }

/* card fantasma: a geração que o dono ainda vai cadastrar já ocupa o lugar dela na fila */
.lp-card-fantasma {
  display: flex; min-width: 0; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  padding: 24px 12.8px; border: 2px dashed #cfc4e6; border-radius: 12.8px; text-align: center;
}
.lp-card-fantasma .lp-icon { color: #c3b5de; }
.lp-card-fantasma-nome { color: var(--lp-home-titulo); font-size: 15px; }
.lp-card-fantasma-selo {
  padding: 7px 14px; border-radius: 999px; background: #f1ebfb;
  color: #6d28d9; font-size: 12px; font-weight: 700; letter-spacing: .4px;
}

@media (max-width: 600px) {
  .lp-abre { gap: 8px; margin-bottom: 20px; }
  .lp-abre-filete { display: none; }
  .lp-abre-linha { display: block; flex: 0 0 100%; height: 3px; background: var(--lp-grad) center / 200px 3px no-repeat; }
  .lp-abre-ico svg { width: 26px; height: 26px; }
  /* uma linha só, em 390 e em 320 — o título é o mesmo, quem cede é o corpo da fonte */
  .lp-home-principais .lp-home-titulo { font-size: clamp(16px, 5.9vw, 24px); white-space: nowrap; }
  .lp-home-sub { margin-bottom: 16px; font-size: 17px; }
  .lp-fila + .lp-home-sub,
  .lp-home-grade + .lp-home-sub { margin-top: 32px; }
  .lp-fila-trilho { gap: 12px; }
  .lp-fila-trilho > * { flex-basis: calc((100% - 12px) / 1.6); }
  .lp-fila--curta .lp-fila-trilho { justify-content: flex-start; }
  .lp-fila--curta .lp-fila-trilho > * { flex-grow: 0; }
}

/* Em 320 o conjunto ícone + título pedia 273 de 272: passava 1px e o ícone caía pra linha
   de cima. Quem cede é o enfeite — o título continua com o corpo aprovado. */
@media (max-width: 360px) {
  .lp-abre { gap: 6px; }
  .lp-abre-ico svg { width: 22px; height: 22px; }
}

/* Em telas até 368px, as três células da primeira linha do cabeçalho precisam de uma linha
   extra para a sacola. A home reserva esses 44px e mantém os 470px úteis do banner, evitando
   que o cabeçalho fixo cubra a faixa "Loja Oficial". Em 369px o conjunto já cabe inteiro. */
@media (max-width: 368px) {
  .home { --lp-header-h: 200px; }
}

/* fontes do banner do FIT: subconjunto só com os caracteres da peça (24 KB somadas).
   Ficam fora da media query porque @font-face não herda escopo; o navegador só baixa
   quando algum texto as usa, e no desktop o slide é display:none. */
@font-face {
  font-family: Archivo; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("fonts/archivo-fit.woff2") format("woff2");
}
@font-face {
  font-family: Onest; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("fonts/onest-fit.woff2") format("woff2");
}

/* ---------------- banner Life Pod FIT 30K — 3º slide, só no celular ----------------
   A arte é foto (fundo do slide, como nos outros banners). Selo, título, ícones e
   preço são código: texto de verdade, que o Google lê e que escala sem borrar.
   As medidas saem do mockup aprovado — placa de 1205x1452, a proporção exata do vão
   do hero no celular (390x470). Tudo em cqw, então o conjunto escala junto com a
   largura da tela. O rodapé com os pontinhos come os últimos 44px: nada abaixo disso.
   Desktop tem outro formato (1440x490) e ficou de fora — reprovado em 27/ago. */
@media (min-width: 601px) { .lp-hero-slide--fit { display: none; } }

@media (max-width: 600px) {
  .lp-hero-slide--fit { container-type: inline-size; }

  .lp-fit {
    /* A peça tem proporção fixa (390x470 é a referência). Tamanho e posição de TUDO
       aqui dentro saem de duas medidas: a largura (via cqw dos filhos) e o font-size.
       Ambas derivam de --lp-hero-util, a mesma medida que dá a altura do vão — por isso
       a arte (`cover`, travada pela altura) e o texto nunca saem de registro. */
    position: absolute; top: var(--lp-header-h); bottom: 0; left: 50%;
    width: calc(var(--lp-hero-util) * 390 / 470); transform: translateX(-50%);
    container-type: inline-size;           /* cqw dos filhos = a largura da peça, seja qual for */
    font-size: calc(var(--lp-hero-util) * 3.23653 / 470);   /* 1em = 10px da placa de 1205 */
    font-family: Onest, "Helvetica Neue", Arial, sans-serif;
    color: #fff; overflow: hidden;
    text-rendering: geometricPrecision;    /* sem isto o espaçamento das letras abre em tela 3x */
    font-kerning: normal;
    pointer-events: none;                  /* quem recebe o toque é o lp-hero-hitbox */
  }
  .lp-fit * { box-sizing: border-box; }
  /* os banners antigos usam object-position 80%; esta arte foi desenhada centrada */
  /* a arte tem 1865x1452 com o desenho EXATAMENTE no meio: o `cover` nunca amplia
     em nenhum celular (até 604px) e, centrada, casa com a peça em qualquer largura. */
  .lp-hero-slide--fit .lp-hero-fundo img { object-position: center center; }
  /* h2, ul e p trazem tamanho/margem do navegador e do casco: aqui tudo mede a
     partir do .lp-fit, senão o título herda 1.5em do h2 e sai maior que o desenho. */
  .lp-fit-tit, .lp-fit-benef, .lp-fit-benef li, .lp-fit-preco {
    font-size: inherit; font-weight: inherit; line-height: 1;
    margin: 0; padding: 0; list-style: none;
  }

  /* selo LANÇAMENTO: tubo de neon + bloco, desenhados em SVG */
  .lp-fit-selo { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
  .lp-fit-selo-txt {
    position: absolute; white-space: nowrap; line-height: 1;
    font-family: Archivo, Arial, sans-serif; font-variation-settings: "wdth" 62, "wght" 810;
    color: #fbf7f5; text-shadow: .05em .07em .1em rgba(0,0,0,.5);
    font-size: 6.9488em; letter-spacing: -.0105em;
    left: 11.2863cqw; top: 12.4481cqw;
    transform: rotate(-4.05deg) skewX(-14deg) scaleX(.87); transform-origin: left top;
  }

  /* título */
  .lp-fit-tit { position: absolute; inset: 0; }
  .lp-fit-l1, .lp-fit-l2 {
    position: absolute; white-space: nowrap; line-height: 1; display: block;
    font-family: Archivo, Arial, sans-serif; font-variation-settings: "wdth" 100, "wght" 835;
    color: #fff; font-size: 11.6em; transform-origin: left top;
    text-shadow: 0 .16em .45em rgba(0,0,0,.45), 0 0 .3em rgba(190,215,255,.3);
    transform: skewX(-12deg);
  }
  .lp-fit-l1 { letter-spacing: -.0201em; left: 5.6432cqw; top: 23.7344cqw; }
  .lp-fit-l2 { letter-spacing: -.0014em; left: 5.6432cqw; top: 32.1162cqw; }
  .lp-fit-30k {
    position: absolute; white-space: nowrap; line-height: 1; display: block;
    font-size: 15.7831em; font-weight: 800; letter-spacing: .0309em;
    left: 5.3942cqw; top: 42.0747cqw;
    transform: skewX(-12deg); transform-origin: left top;
    background: linear-gradient(96deg, #74c3f6 0%, #7ed4f3 11%, #6cadef 21%, #6b98ed 31%,
      #767de9 40%, #907adc 50%, #b06ed5 60%, #c077d2 70%, #d47dc8 79%, #dc7fb0 90%, #cf86bd 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 0 .18em rgba(120,160,255,.28));
  }
  .lp-fit-puffs {
    position: absolute; white-space: nowrap; line-height: 1; display: block;
    font-family: Archivo, Arial, sans-serif; font-variation-settings: "wdth" 100, "wght" 700;
    color: #f2f6ff; font-size: 2.9633em; letter-spacing: .481em;
    left: 7.7178cqw; top: 55.2697cqw;
    transform: scaleX(1.12); transform-origin: left top;
  }
  .lp-fit-fio { position: absolute; height: .17em; background: #d2d3dc; border-radius: .09em; }
  .lp-fit-fio--e { left: 3.7em; top: 68em; width: 4.5em; }
  .lp-fit-fio--d { left: 28.3em; top: 68em; width: 4.6em; }

  /* benefícios — um ritmo só, tudo derivado dos números abaixo.
     Antes cada linha trazia as suas medidas à mão e elas tinham derivado: o passo saía
     8,7em numa e 8,8em na outra, a entrelinha 2,6 / 3,5 / 3,0, e a bateria era MAIS ALTA
     que o próprio anel. Tudo em cqw porque `em` dentro do texto valeria o tamanho da
     fonte dele, não o da peça — a conversão é 1em = 0,829879cqw. */
  .lp-fit-benef {
    position: absolute; inset: 0;
    --b-dia: 6.556cqw;      /* diâmetro do anel: a medida do gabarito (7.9em) */
    --b-passo: 8.714cqw;    /* de um centro ao outro — é este número que espaça os itens */
    --b-c1: 65.697cqw;      /* centro do 1º anel; o bloco fica centrado na faixa livre
                               (a faixa vai de 56,564cqw, o fio do PUFFS, a 92,256cqw, a
                               moldura do preço — mexeu no passo, recalcule o c1 por ela) */
    --b-x: 7.3444cqw;       /* centro horizontal da coluna dos anéis */
    --b-linha: 2.4896cqw;   /* de uma linha de texto à outra (3em: a medida do gabarito) */
    --b-cap: 2.0442cqw;     /* altura da caixa de uma linha (font-size 2.4632em) */
  }
  .lp-fit-benef li { --c: calc(var(--b-c1) + var(--n) * var(--b-passo)); }
  /* cada SVG tem folga interna própria; estas frações deixam a TINTA dos três com a
     mesma altura (60% do anel), que é o que o olho compara. */
  .lp-fit-benef li:nth-child(1) { --n: 0; --ico-l: .5987; --ico-a: .6399; }
  .lp-fit-benef li:nth-child(2) { --n: 1; --ico-l: .4198; --ico-a: .8302; }   /* a bateria é um traço estreito: a 60% ela some do lado dos outros dois */
  .lp-fit-benef li:nth-child(3) { --n: 2; --ico-l: .5363; --ico-a: .6021; }

  .lp-fit-anel {
    position: absolute; border-radius: 50%;
    left: calc(var(--b-x) - var(--b-dia) / 2); top: calc(var(--c) - var(--b-dia) / 2);
    width: var(--b-dia); height: var(--b-dia);
    border: .19em solid #82a9cf;
    box-shadow: 0 0 .75em rgba(104,156,220,.6), 0 0 .3em rgba(130,175,225,.5),
                inset 0 0 .55em rgba(104,156,220,.35);
  }
  .lp-fit-ico {
    position: absolute; display: block;
    width: calc(var(--b-dia) * var(--ico-l)); height: calc(var(--b-dia) * var(--ico-a));
    left: calc(var(--b-x) - var(--b-dia) * var(--ico-l) / 2);
    top:  calc(var(--c)   - var(--b-dia) * var(--ico-a) / 2);
  }
  .lp-fit-ico svg { width: 100%; height: 100%; display: block; overflow: visible; }
  .lp-fit-bl {
    position: absolute; white-space: nowrap; line-height: 1; display: block;
    font-weight: 700; color: #fff; font-size: 2.4632em;
    text-transform: uppercase;   /* o texto fica em minúscula no HTML: leitor de tela agradece */
    text-shadow: 0 .1em .3em rgba(0,0,0,.4);
    left: 12.5311cqw;
    /* o par de linhas fica centrado no anel, igual nos três */
    top: calc(var(--c) - (var(--b-linha) + var(--b-cap)) / 2);
  }
  .lp-fit-bl--b { top: calc(var(--c) - (var(--b-linha) + var(--b-cap)) / 2 + var(--b-linha)); }
  .lp-fit-benef li:nth-child(1) .lp-fit-bl--a { letter-spacing: .057em; }
  .lp-fit-benef li:nth-child(1) .lp-fit-bl--b { letter-spacing: .0235em; }
  .lp-fit-benef li:nth-child(2) .lp-fit-bl--a { letter-spacing: .0388em; }
  .lp-fit-benef li:nth-child(2) .lp-fit-bl--b { letter-spacing: .0398em; }
  .lp-fit-benef li:nth-child(3) .lp-fit-bl--a { letter-spacing: .0253em; }
  .lp-fit-benef li:nth-child(3) .lp-fit-bl--b { letter-spacing: .0436em; }

  /* preço */
  .lp-fit-caixa { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
  .lp-fit-preco { position: absolute; inset: 0; }
  .lp-fit-preco span {
    position: absolute; white-space: nowrap; line-height: 1; display: block;
    font-weight: 800; color: #fff; text-shadow: 0 .15em .4em rgba(0,0,0,.4);
    transform-origin: left top;
  }
  .lp-fit-apenas { font-size: 2.7682em; letter-spacing: -.0029em; left: 8.8797cqw; top: 91.8672cqw;
    transform: scaleX(1.1);
    font-family: Archivo, Arial, sans-serif; font-variation-settings: "wdth" 100, "wght" 800; }
  .lp-fit-rs   { font-size: 4.317em;  letter-spacing: .0166em;  left: 5.3112cqw;  top: 98.0083cqw; transform: skewX(-10deg); }
  .lp-fit-int  { font-size: 11.6875em; letter-spacing: -.0376em; left: 11.3693cqw; top: 93.8589cqw; transform: skewX(-10deg); }
  .lp-fit-cent { font-size: 6.0231em; letter-spacing: -.0553em; left: 25.2282cqw; top: 95.8506cqw; transform: skewX(-10deg); }
}