/* =========================================================
   Linkopet Landing — estilos dos widgets do Elementor
   Tudo fica dentro de .lp para não vazar para o tema, o menu ou o rodapé.
   As cores vêm da paleta em Configurações > Linkopet Landing (variáveis --lp-*)
   e podem ser trocadas em cada widget, na aba Estilo.
   ========================================================= */

.lp {
  --orange: var(--lp-orange, #fc7c04);
  --orange-dark: var(--lp-orange, #fc7c04);
  --orange-soft: var(--lp-orange-soft, #fff0e1);
  --purple: var(--lp-purple, #643494);
  --purple-dark: var(--lp-purple-dark, #4b2472);
  --purple-deep: var(--lp-purple-deep, #2d1447);
  --lilac: var(--lp-lilac, #efe7f6);
  --lilac-2: var(--lp-lilac-2, #dccbeb);
  --cream: var(--lp-cream, #fdfaf7);
  --paper: var(--lp-paper, #ffffff);
  --ink: var(--lp-ink, #2d1447);
  --text: var(--lp-text, #4a3d5c);
  --muted: var(--lp-muted, #7a6d8c);
  --font: var(--lp-font, "Fredoka", "Nunito", "Segoe UI", system-ui, sans-serif);
  --ease: cubic-bezier(.22, 1, .36, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --shell: var(--lp-shell, 1200px);
  --gutter: clamp(16px, 4vw, 40px);
  --sy: clamp(64px, 8vw, 112px);
  --top-h: var(--lp-top-h, 0px);

  position: relative;
  font-family: var(--font);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.55;
  color: var(--text);
  -webkit-text-size-adjust: 100%;
}
.lp *, .lp *::before, .lp *::after { box-sizing: border-box; }
.lp img, .lp svg { display: block; max-width: 100%; }
.lp a { color: inherit; }
.lp input { font: inherit; color: inherit; }
.lp h1, .lp h2, .lp h3, .lp h4, .lp h5, .lp h6 {
  margin: 0; padding: 0; color: var(--ink); font-family: var(--font);
  line-height: 1.05; text-wrap: balance; font-weight: 600; letter-spacing: -0.015em; text-transform: none;
}
.lp p { margin: 0; }
.lp figure { margin: 0; }
.lp ol, .lp ul { margin: 0; padding: 0; list-style: none; }
.lp li { margin: 0; }
.lp :focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; border-radius: 10px; }
.lp [role="button"], .lp [role="radio"] { cursor: pointer; -webkit-tap-highlight-color: transparent; user-select: none; }
.lp .lp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.lp .lp-shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); }

.lp .lp-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: 13.6px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--orange-dark);
}

/* ---------- Botões ---------- */
.lp .lp-pill {
  white-space: nowrap;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 44px;
  padding: 10px 20px;
  border: 0; border-radius: 99px;
  font-family: var(--font); font-weight: 600; font-size: 16px; line-height: 1; letter-spacing: normal;
  text-decoration: none;
  transition: transform .35s var(--spring), background .25s, box-shadow .25s, color .25s;
}
.lp .lp-pill svg { width: 20px; height: 20px; flex: none; transition: transform .35s var(--spring); }
.lp .lp-pill:hover { transform: translateY(-2px); text-decoration: none; }
.lp .lp-pill:hover svg { transform: translateX(3px); }
.lp .lp-pill:active { transform: scale(.97); }
.lp .lp-pill--lg { min-height: 54px; padding: 14px 26px; font-size: 17.28px; }
.lp .lp-pill--orange, .lp .lp-pill--orange:hover, .lp .lp-pill--orange:focus { color: #fff; }
.lp .lp-pill--orange { background: var(--orange); }
.lp .lp-pill--orange:hover { background: #ff8a1c; }
.lp .lp-pill--ghost, .lp .lp-pill--ghost:hover, .lp .lp-pill--ghost:focus { color: #fff; }
.lp .lp-pill--ghost { background: rgba(255,255,255,.14); }
.lp .lp-pill--ghost:hover { background: rgba(255,255,255,.24); }
.lp .lp-pill--purple, .lp .lp-pill--purple:hover, .lp .lp-pill--purple:focus { color: #fff; }
.lp .lp-pill--purple { background: var(--purple); }
.lp .lp-pill--purple:hover { background: var(--purple-dark); }
.lp .lp-pill--soft, .lp .lp-pill--soft:focus { background: transparent; color: var(--purple); box-shadow: inset 0 0 0 2px var(--purple); }
.lp .lp-pill--soft:hover { background: var(--purple); color: #fff; }

/* ---------- Cabeçalho das seções ---------- */
.lp .lp-block { padding-block: var(--sy); background: var(--cream); }
.lp .lp-block__head { display: grid; gap: 12px; margin-bottom: clamp(32px, 5vw, 56px); max-width: 720px; }
.lp .lp-block__head--center { margin-inline: auto; text-align: center; justify-items: center; }
.lp .lp-h2 { font-size: clamp(32px, 4.2vw, 51.2px); color: var(--purple); }
.lp .lp-block__sub { font-size: 17.92px; }
.lp .lp-block__sub a { color: var(--purple); font-weight: 600; }
.lp .lp-block__sub a:hover { color: var(--orange); }

/* =========================================================
   HERO
   ========================================================= */
.lp .lp-hero {
  position: relative;
  background: var(--purple);
  color: #efe6f8;
  padding-block: calc(var(--top-h) + env(safe-area-inset-top, 0px) + var(--sy)) var(--sy);
  overflow: clip;
}
.lp .lp-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  align-items: center;
  gap: clamp(28px, 5vw, 72px);
}
.lp .lp-tagline { display: inline-flex; align-items: center; gap: 10px; font-weight: 500; color: #ffb366; font-size: 16.32px; }
.lp .lp-tagline svg { width: 22px; height: 22px; color: var(--orange); }
.lp .lp-hero__title {
  margin-top: 18px;
  color: #fff;
  font-size: clamp(36.8px, 4.6vw, 64px);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.03em;
}
.lp .lp-hero__title .lp-hl { color: var(--orange); }
.lp .lp-hero__lead { margin-top: 20px; max-width: 34em; font-size: clamp(16.8px, 1.4vw, 19.2px); color: #e4d7f1; }
.lp .lp-hero__actions { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; }

.lp .lp-hero__visual { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 18px; }
.lp .lp-pet { position: relative; width: min(540px, 92vw); aspect-ratio: 1 / 1.08; }
.lp .lp-pet__sun {
  position: absolute; left: 14%; right: 0; bottom: 0; aspect-ratio: 1;
  border-radius: 50%;
  background: #7a50a3;
}
@media (min-width: 901px) { .lp .lp-pet__sun { bottom: 9%; } }
.lp .lp-pet__cat { position: absolute; left: 57%; bottom: 0; width: 73%; transform: translateX(-50%); }
.lp .lp-pet__cat img { width: 100%; height: auto; max-width: none; filter: drop-shadow(0 18px 24px rgba(45,20,71,.35)); }
.lp .lp-lens {
  position: absolute; left: 0; top: 16%;
  width: 29%;
  transform-origin: 50% 2%;
  animation: lp-tagSwing 5.5s ease-in-out infinite;
  z-index: 2;
}
.lp .lp-lens--still { animation: none; }
@keyframes lp-tagSwing { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
.lp .lp-realtag { position: relative; }
.lp .lp-realtag img { width: 100%; height: auto; filter: drop-shadow(0 18px 20px rgba(20,6,40,.35)); }

/* Nome e logo "gravados" direto na foto da tag */
.lp .lp-engrave {
  position: absolute;
  left: calc(var(--cx) * 1%); top: calc(var(--cy) * 1%);
  width: calc(var(--d) * 1%); aspect-ratio: 1;
  transform: translate(-50%, -50%);
  container-type: inline-size;
  color: #fff;
  --lf: currentColor; --lp: currentColor;
  pointer-events: none;
}
.lp .lp-engrave__icon {
  position: absolute; left: 50%; top: var(--icon-top, 38.5%);
  width: var(--icon-size, 20cqw); height: var(--icon-size, 20cqw);
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 .5cqw .6cqw rgba(0,0,0,.28));
}
.lp .lp-engrave__name {
  position: absolute; left: 50%; top: var(--name-top, 62.5%);
  transform: translate(-50%, -50%);
  font-family: var(--font); font-weight: 700;
  font-size: var(--fs, 24cqw); line-height: 1;
  white-space: nowrap; letter-spacing: .01em;
  text-shadow: 0 .5cqw .7cqw rgba(0,0,0,.28), 0 -.2cqw 0 rgba(255,255,255,.18);
}
.lp .lp-engrave__name { display: flex; flex-direction: column; align-items: center; }
.lp .lp-engrave__line { display: block; white-space: nowrap; }
/* nome composto: duas linhas, logo um pouco menor e mais para cima */
.lp .lp-engrave--2l .lp-engrave__icon { top: var(--icon-top2, calc(var(--icon-top, 38.5%) - 7%)); width: var(--icon-size2, 16cqw); height: var(--icon-size2, 16cqw); }
.lp .lp-engrave--2l .lp-engrave__name { top: var(--name-top2, calc(var(--name-top, 62.5%) + 1%)); line-height: .95; }
.lp .lp-namefield__hint { margin: 0; font-size: 13.6px; color: #d9c9ea; text-align: center; }
.lp .lp-is-bump { animation: lp-bump .45s var(--spring); }
@keyframes lp-bump { 40% { transform: scale(1.08) rotate(-4deg); } }

.lp .lp-namefield { width: 100%; max-width: 360px; display: grid; gap: 8px; }
.lp .lp-namefield label { font-weight: 500; color: #fff; font-size: 16px; text-align: center; margin: 0; }
.lp .lp-namefield input.lp-namefield__input,
.lp .lp-namefield input.lp-namefield__input:focus {
  text-transform: uppercase; letter-spacing: .05em;
  width: 100%; min-width: 0; max-width: none;
  height: 58px; margin: 0; padding: 0 22px;
  border: 0; border-radius: 99px; box-shadow: none;
  background: #fff; color: var(--purple);
  font-family: var(--font); font-weight: 600; font-size: 21.6px; line-height: 1; text-align: center;
}
.lp .lp-namefield input.lp-namefield__input:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }

/* Rastro de patinhas */
.lp .lp-paw-print {
  position: absolute; width: 24px; height: 24px; pointer-events: none; z-index: 1;
  color: #fff;
  animation: lp-pawStep 1.5s ease-out forwards;
}
.lp .lp-paw-print--orange { color: var(--orange); }
@keyframes lp-pawStep {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--r)) scale(.5); }
  12% { opacity: .5; transform: translate(-50%, -50%) rotate(var(--r)) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--r)) scale(1); }
}

/* =========================================================
   COMO FUNCIONA (scroll preso)
   ========================================================= */
.lp .lp-how { position: relative; height: calc(var(--step-h, 105vh) * var(--steps, 4)); background: var(--cream); }
@supports (height: 1svh) { .lp .lp-how { height: calc(var(--step-h, 105svh) * var(--steps, 4)); } }
.lp .lp-how__pin {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  padding-top: calc(max(var(--top-h), var(--lp-header-h, 0px)) + env(safe-area-inset-top, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  display: flex; align-items: center;
  overflow: hidden;
}
.lp .lp-how__grid {
  height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(24px, 5vw, 80px);
  padding-block: clamp(12px, 3vh, 36px);
}
.lp .lp-how__title { margin-top: 12px; font-size: clamp(32px, 4vw, 52.8px); color: var(--purple); }
.lp .lp-how__cards { position: relative; display: grid; margin-top: clamp(20px, 4vh, 40px); }
.lp .lp-how-card {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(24px);
  pointer-events: none;
  transition: opacity .45s var(--ease), transform .6s var(--ease);
}
.lp .lp-how-card.lp-is-active { opacity: 1; transform: none; pointer-events: auto; }
.lp .lp-how-card.lp-is-past { transform: translateY(-24px); }
.lp .lp-how-card__title { font-size: clamp(24px, 2.6vw, 33.6px); }
.lp .lp-how-card__text { margin-top: 10px; max-width: 30em; font-size: 17.28px; }

.lp .lp-trail {
  position: relative;
  margin-top: clamp(24px, 5vh, 48px);
  display: flex; justify-content: space-between; align-items: center;
  max-width: 400px;
  height: 56px;
}
.lp .lp-trail__line {
  position: absolute; left: 24px; right: 24px; top: 50%; height: 4px; margin-top: -2px;
  border-radius: 4px; background: var(--trail-line, var(--lilac));
}
.lp .lp-trail__line span {
  position: absolute; inset: 0; border-radius: 4px; background: var(--trail-fill, var(--orange));
  transform-origin: left; transform: scaleX(var(--p, 0));
}
.lp .lp-trail__paw {
  position: relative; z-index: 1;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--trail-bg, var(--cream));
  color: var(--trail-paw, var(--lilac-2));
  display: grid; place-items: center;
  transition: color .3s, transform .45s var(--spring);
}
.lp .lp-trail__paw svg { width: 28px; height: 28px; transform: rotate(90deg); transition: transform .45s var(--spring); }
.lp .lp-trail__paw:hover { color: var(--trail-current, var(--purple)); }
.lp .lp-trail__paw.lp-is-done { color: var(--trail-done, var(--orange)); }
.lp .lp-trail__paw.lp-is-current { color: var(--trail-current, var(--purple)); transform: scale(1.18); }

.lp .lp-how__device {
  position: relative;
  height: 100%;
  min-height: 0;
  display: flex; align-items: center; justify-content: center;
}
.lp .lp-how__disc {
  position: absolute;
  width: min(92%, 520px); aspect-ratio: 1;
  border-radius: 50%;
  background: var(--disc-1, var(--lilac));
  transition: background .6s, transform .8s var(--ease);
}
.lp .lp-how[data-step="1"] .lp-how__disc,
.lp .lp-how[data-step="2"] .lp-how__disc { background: var(--disc-2, var(--orange-soft)); transform: scale(1.04); }
.lp .lp-how[data-step="3"] .lp-how__disc { background: var(--disc-4, var(--lilac-2)); }
.lp .lp-phone {
  position: relative;
  height: min(84%, 640px);
  aspect-ratio: 9 / 19.4;
  max-width: 100%;
  padding: 1.8%;
  border-radius: 13% / 6%;
  background: #f4f3f7;
  box-shadow: inset 0 0 0 1px #ffffff, 0 0 0 1px rgba(45,20,71,.08);
  filter: drop-shadow(0 22px 30px rgba(45,20,71,.12));
}
.lp .lp-phone::before, .lp .lp-phone::after {
  content: ""; position: absolute; right: -.7%; width: .8%;
  border-radius: 0 4px 4px 0;
  background: #e6e5ec;
}
.lp .lp-phone::before { top: 21%; height: 6%; }
.lp .lp-phone::after { top: 30%; height: 11%; }
.lp .lp-phone__screen {
  position: relative; height: 100%;
  border-radius: 11.8% / 5.5%;
  overflow: hidden; background: #fff;
  box-shadow: 0 0 0 1px rgba(20,15,40,.18);
  container-type: inline-size;
  font-size: 4.3cqw; line-height: 1.4; color: #1f1f1f;
}
.lp .lp-phone__island { position: absolute; z-index: 9; top: 3.4cqw; left: 50%; transform: translateX(-50%); width: 5.6cqw; height: 5.6cqw; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #3a3550, #0d0b14 70%); }
.lp .lp-sbar {
  position: absolute; z-index: 8; inset: 0 0 auto 0;
  display: flex; justify-content: space-between; align-items: center;
  height: 12cqw; padding: 3.6cqw 7cqw 0 9cqw;
  color: #1c1424; font-weight: 600; font-size: 4.6cqw;
  transition: color .4s;
}
.lp .lp-sbar__icons { display: flex; gap: 1.6cqw; align-items: center; }
.lp .lp-sbar__icons svg { height: 3.2cqw; width: auto; fill: currentColor; }
.lp .lp-how[data-step="0"] .lp-sbar { color: #fff; }
.lp .lp-scr { position: absolute; inset: 0; transition: opacity .6s var(--ease), transform .7s var(--ease); }

/* tela 1: câmera */
.lp .lp-scr--scan {
  display: grid; place-items: center;
  background: radial-gradient(ellipse at 50% 42%, rgba(255,255,255,.14), transparent 60%), linear-gradient(160deg, #6e625a, #2d2521 70%);
}
.lp .lp-cam-tag { position: relative; width: 46cqw; aspect-ratio: 600 / 795; margin-top: -14cqw; transform: rotate(-8deg); animation: lp-camDrift 5s ease-in-out infinite alternate; }
.lp .lp-cam-tag img { width: 100%; height: auto; filter: drop-shadow(0 3cqw 5cqw rgba(0,0,0,.5)); }
@keyframes lp-camDrift { to { transform: rotate(-3deg) translate(1.5cqw, -1cqw); } }
.lp .lp-cam-tag__qr { position: absolute; left: 50%; top: 62.9%; width: 60%; transform: translate(-50%, -50%); color: #fff; opacity: .95; }
.lp .lp-cam-tag__qr svg { width: 100%; height: auto; }
.lp .lp-cam-frame { position: absolute; width: 72cqw; height: 72cqw; left: 14cqw; top: 50%; transform: translateY(-50%); color: #fff; }
.lp .lp-cam-laser { position: absolute; left: 18cqw; right: 18cqw; height: .9cqw; top: 38%; background: linear-gradient(90deg, transparent, var(--orange), transparent); box-shadow: 0 0 4cqw 1cqw rgba(252,124,4,.6); border-radius: 1cqw; animation: lp-laser 1.6s ease-in-out infinite alternate; }
@keyframes lp-laser { from { top: 36%; } to { top: 63%; } }
.lp .lp-cam-caption { position: absolute; bottom: 12cqw; left: 0; right: 0; text-align: center; color: #fff; font-size: 4.2cqw; font-weight: 500; }
.lp .lp-cam-pop {
  position: absolute; top: 16cqw; left: 6cqw; right: 6cqw;
  display: flex; gap: 3cqw; align-items: center;
  padding: 3cqw 3.6cqw; border-radius: 5cqw;
  background: rgba(255,255,255,.95); color: var(--ink);
  font-size: 4.2cqw; font-weight: 600; line-height: 1.25;
  box-shadow: 0 3cqw 8cqw rgba(0,0,0,.3);
  transform: translateY(-160%); opacity: 0;
  transition: transform .55s var(--spring), opacity .3s;
}
.lp .lp-cam-pop svg { width: 9cqw; height: 9cqw; flex: none; }
.lp .lp-cam-pop small { display: block; color: var(--muted); font-weight: 500; font-size: 3.4cqw; }
.lp .lp-how.lp-is-found .lp-cam-pop { transform: none; opacity: 1; }

/* telas 2 e 3: perfil */
.lp .lp-scr--profile { background: linear-gradient(180deg, #ffffff 0%, #f7f3fb 45%, #eee7f6 100%); transform: translateY(104%); overflow: hidden; }
.lp .lp-pf__watermark { position: absolute; width: 120cqw; height: 110cqw; left: -30cqw; top: 22cqw; color: rgba(100,52,148,.045); transform: rotate(-14deg); max-width: none; }
.lp .lp-pf__scroll { position: relative; padding: 12cqw 4.5cqw 10cqw; display: flex; flex-direction: column; align-items: center; transition: transform .9s var(--ease); }
.lp .lp-pf__logo svg { width: 46cqw; height: auto; aspect-ratio: 1894 / 455; overflow: visible; }
.lp .lp-ml__logo svg { width: 36cqw; height: auto; aspect-ratio: 1894 / 455; overflow: visible; }
.lp .lp-pf__logo img, .lp .lp-ml__logo img { width: 46cqw; height: auto; }
.lp .lp-ml__logo img { width: 36cqw; }
.lp .lp-pf__photo { position: relative; margin-top: 5cqw; width: 50cqw; aspect-ratio: 1; border-radius: 6cqw; overflow: hidden; background: radial-gradient(circle at 50% 30%, #f4f1f6, #d9d4df 80%); box-shadow: 0 2cqw 5cqw rgba(60,30,90,.14); }
.lp .lp-pf__photo img { position: absolute; inset: 0; width: 100%; max-width: none; height: 100%; object-fit: cover; object-position: center; }
.lp .lp-pf__name { margin-top: 4cqw; color: var(--purple); font-weight: 600; font-size: 8cqw; line-height: 1.1; }
.lp .lp-pf__grid { margin-top: 4cqw; width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 2.2cqw; }
.lp .lp-pf__grid > div { background: #fff; border-radius: 3.6cqw; padding: 2.6cqw 3.4cqw; font-size: 3.8cqw; color: #3b3448; line-height: 1.4; box-shadow: 0 .3cqw 1.4cqw rgba(60,30,90,.07); }
.lp .lp-pf__grid b { display: block; font-weight: 600; color: #3a1f5f; }
.lp .lp-pf__grid .lp-pf__wide { grid-column: 1 / -1; }
.lp .lp-pf__grid .lp-pf__tall { margin-top: 1.4cqw; padding-block: 3.6cqw 4.4cqw; }
.lp .lp-pf__ask { margin-top: 5cqw; color: var(--orange); font-weight: 600; font-size: 4.3cqw; text-align: center; }
.lp .lp-pf__sub { font-size: 4cqw; color: #2c2238; text-align: center; }
.lp .lp-pf__btns { margin-top: 3.4cqw; display: flex; gap: 2.6cqw; justify-content: center; }
.lp .lp-pf-btn { display: inline-flex; align-items: center; justify-content: center; padding: 2.8cqw 5cqw; border-radius: 99px; font-weight: 600; font-size: 4cqw; line-height: 1; white-space: nowrap; transition: transform .3s var(--spring), background .3s, color .3s; }
.lp .lp-pf-btn--orange { background: var(--orange); color: #fff; }
.lp .lp-pf-btn--purple { background: var(--purple); color: #fff; }
.lp .lp-pf-btn--outline { margin-top: 2.6cqw; box-shadow: inset 0 0 0 .45cqw var(--purple); color: var(--purple); background: transparent; }
.lp .lp-pf__sheet { position: absolute; z-index: 4; left: 0; right: 0; bottom: 0; padding: 3cqw 6cqw 8cqw; background: #fff; border-radius: 7cqw 7cqw 0 0; box-shadow: 0 -4cqw 10cqw rgba(40,15,70,.2); text-align: center; transform: translateY(105%); transition: transform .6s var(--ease); }
.lp .lp-pf__sheet-handle { display: block; width: 12cqw; height: 1.2cqw; border-radius: 1cqw; background: #ddd2e8; margin: 0 auto 4cqw; }
.lp .lp-pf__map { position: relative; height: 34cqw; border-radius: 4cqw; overflow: hidden; }
.lp .lp-pf__map svg { display: block; width: 100%; height: 100%; }
.lp .lp-pf__pulse { transform-box: fill-box; transform-origin: center; animation: lp-mapPulse 1.8s ease-out infinite; }
@keyframes lp-mapPulse { from { transform: scale(.5); opacity: .45; } to { transform: scale(2.2); opacity: 0; } }
.lp .lp-pf__sheet-title { margin-top: 4cqw; display: flex; justify-content: center; align-items: center; gap: 2cqw; color: var(--purple); font-weight: 600; font-size: 5cqw; }
.lp .lp-pf__sheet-title svg { width: 6cqw; height: 6cqw; color: #fff; background: #25a55f; border-radius: 50%; padding: 1cqw; }
.lp .lp-pf__sheet-text { margin-top: 1cqw; font-size: 3.8cqw; color: var(--muted); }

/* tela 4: e-mail */
.lp .lp-scr--mail { background: #fff; color: #1f1f1f; padding: 34cqw 5.5cqw 0; font-size: 4.3cqw; line-height: 1.5; transform: translateX(104%); }
.lp .lp-ml__bar { display: flex; justify-content: space-between; align-items: center; padding-block: 3cqw 3.6cqw; }
.lp .lp-ml__bar svg { width: 6.4cqw; height: 6.4cqw; fill: none; stroke: #1f1f1f; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lp .lp-ml__tools { display: flex; gap: 5cqw; }
.lp .lp-ml__tools .lp-dots { fill: #1f1f1f; stroke: none; }
.lp .lp-ml__subject { font-size: 6.6cqw; line-height: 1.3; }
.lp .lp-ml__chip { display: inline-block; vertical-align: middle; font-size: 3.2cqw; background: #eee; color: #444; padding: .4cqw 1.8cqw; border-radius: 1.2cqw; }
.lp .lp-ml__from { margin-top: 5cqw; display: flex; gap: 3.4cqw; align-items: center; line-height: 1.3; }
.lp .lp-ml__from b { font-weight: 600; }
.lp .lp-ml__from i { font-style: normal; color: #666; font-size: 3.6cqw; }
.lp .lp-ml__from small { color: #666; font-size: 3.6cqw; }
.lp .lp-ml__avatar { width: 10.5cqw; height: 10.5cqw; border-radius: 50%; flex: none; background: var(--orange); color: #fff; display: grid; place-items: center; }
.lp .lp-ml__avatar svg { width: 6cqw; height: 6cqw; }
.lp .lp-ml__body { margin-top: 5cqw; display: grid; gap: 3.6cqw; }
.lp .lp-ml__body b, .lp .lp-ml__body strong { font-weight: 600; }
.lp .lp-ml__body u { color: var(--purple); }
.lp .lp-ml__sign { margin-top: 2cqw; }
.lp .lp-ml__sign small { display: block; margin-top: 1.4cqw; color: var(--purple); font-size: 3.8cqw; }
.lp .lp-push { position: absolute; z-index: 7; top: 12cqw; left: 3.5cqw; right: 3.5cqw; display: flex; gap: 3cqw; align-items: center; padding: 3.2cqw 3.6cqw; background: rgba(250,247,252,.96); border-radius: 5.5cqw; box-shadow: 0 3cqw 9cqw rgba(30,10,50,.3); font-size: 3.7cqw; line-height: 1.3; color: #2c2238; transform: translateY(-170%); opacity: 0; }
.lp .lp-push b { font-weight: 600; }
.lp .lp-push__ico { width: 9cqw; height: 9cqw; border-radius: 2.6cqw; background: var(--orange); color: #fff; display: grid; place-items: center; flex: none; }
.lp .lp-push__ico svg { width: 5.4cqw; height: 5.4cqw; }

/* estados das telas */
.lp .lp-how:not([data-step="0"]) .lp-scr--scan { opacity: 0; transform: scale(1.06); }
.lp .lp-how[data-step="1"] .lp-scr--profile,
.lp .lp-how[data-step="2"] .lp-scr--profile { transform: none; }
.lp .lp-how[data-step="3"] .lp-scr--profile { transform: translateX(-30%); opacity: .4; }
.lp .lp-how[data-step="2"] .lp-pf__scroll { transform: translateY(var(--pf-shift, 0px)); }
.lp .lp-how[data-step="2"] .lp-pf-share { background: var(--purple); color: #fff; transform: scale(.96); }
.lp .lp-how.lp-is-sheet .lp-pf__sheet { transform: none; }
.lp .lp-how[data-step="3"] .lp-scr--mail { transform: none; transition-delay: .35s; }
.lp .lp-how[data-step="3"] .lp-push { animation: lp-pushIn 3s var(--ease) forwards; }
@keyframes lp-pushIn { 0% { transform: translateY(-170%); opacity: 0; } 14%, 70% { transform: none; opacity: 1; } 100% { transform: translateY(-170%); opacity: 0; } }

/* =========================================================
   RECURSOS (bento)
   ========================================================= */
.lp .lp-recursos { position: relative; overflow-x: clip; isolation: isolate; }
.lp .lp-recursos__paw {
  position: absolute; z-index: -1; top: 0; left: calc(-1 * min(10vw, 150px));
  width: min(64vw, 920px); height: auto; max-width: none; aspect-ratio: 240 / 216;
  color: #f2ebf9;
  transform: rotate(14deg); transform-origin: 50% 0;
  pointer-events: none;
}
.lp .lp-bento { display: grid; grid-template-columns: minmax(0, var(--hero-col, .62fr)) minmax(0, 1.38fr); gap: clamp(16px, 2.4vw, 28px); align-items: stretch; }
.lp .lp-bento--nohero { grid-template-columns: minmax(0, 1fr); }
.lp .lp-bento__hero { position: relative; display: grid; place-items: end center; min-height: 100%; }
.lp .lp-bento__hero img { position: relative; z-index: 1; width: min(145%, 640px); max-width: none; height: auto; filter: drop-shadow(0 26px 30px rgba(45,20,71,.22)); }
.lp .lp-bento__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 18px); align-content: start; }
.lp .lp-bcard {
  position: relative;
  aspect-ratio: 1.22;
  border-radius: 32px;
  overflow: hidden;
  padding: clamp(18px, 2.2vw, 26px);
  color: #fff;
  background: var(--orange);
  box-shadow: 0 16px 34px -24px rgba(45,20,71,.45);
  isolation: isolate;
  transition: transform .5s var(--ease);
}
.lp .lp-bcard:hover { transform: translateY(-5px); }
.lp .lp-bcard--orange { background: var(--orange); }
.lp .lp-bcard--purple { background: var(--purple); }
.lp .lp-bcard--deep { background: var(--purple-dark); }
.lp .lp-bcard--lilac { background: var(--lilac-2); color: var(--purple-deep); }
.lp .lp-bcard__txt { position: relative; z-index: 1; max-width: 56%; display: grid; gap: 6px; }
.lp .lp-bcard__title { color: inherit; font-size: clamp(17.92px, 1.5vw, 21.44px); line-height: 1.12; }
.lp .lp-bcard__text { font-size: 14.24px; line-height: 1.38; opacity: .92; }
.lp .lp-bcard__img {
  position: absolute; z-index: 0; right: 1%; bottom: -2%;
  height: 63%; width: auto; max-width: none;
  filter: drop-shadow(0 14px 18px rgba(20,6,40,.28));
  transition: transform .7s var(--spring);
  transform-origin: bottom right;
  transform: rotate(var(--rot, 0deg));
}
.lp .lp-bcard:hover .lp-bcard__img { transform: rotate(var(--rot, 0deg)) scale(1.05) rotate(-2deg); }
.lp .lp-bcard__img--dog { height: 74%; right: -2%; bottom: -4%; }
.lp .lp-bcard__img--beagle { height: 79%; right: -1%; bottom: -8%; }
.lp .lp-bcard__img--cat { height: 66%; right: 0%; bottom: -4%; }
.lp .lp-bcard__img--paw { right: -1%; bottom: -10%; width: 61%; height: auto; --rot: -14deg; transform-origin: center; filter: drop-shadow(0 14px 18px rgba(20,6,40,.3)); }
.lp .lp-bcard:hover .lp-bcard__img--paw { transform: rotate(-6deg) scale(1.05); }
.lp .lp-bento__cta { grid-column: 1 / -1; width: 100%; }

@media (max-width: 900px) {
  .lp .lp-recursos__paw { width: 120vw; left: -40vw; }
  .lp .lp-bento { grid-template-columns: 1fr; }
  .lp .lp-bento__hero { display: none; }
}
@media (max-width: 520px) {
  .lp .lp-bento__grid { grid-template-columns: 1fr; }
  .lp .lp-bcard { aspect-ratio: 1.42; }
  .lp .lp-bcard__txt { max-width: 38%; }
  .lp .lp-bcard__img { height: auto; width: 60%; object-fit: contain; left: 51%; right: auto; bottom: -3%; }
  .lp .lp-bcard__img--dog { bottom: -4%; }
  .lp .lp-bcard__img--cat { bottom: -2%; }
  .lp .lp-bcard__img--beagle { bottom: -5%; }
  .lp .lp-bcard__img--paw { width: 43%; left: 55%; bottom: -9%; }
}

/* =========================================================
   ATIVAÇÃO (patinhas)
   ========================================================= */
.lp .lp-activate { background: linear-gradient(180deg, var(--cream) 0%, #fff0e1 100%); padding-top: 0; }
.lp .lp-journey { --art: 210px; display: flex; align-items: flex-start; }
.lp .lp-journey__step { flex: 1 1 0; min-width: 0; display: grid; justify-items: center; text-align: center; gap: 10px; }
.lp .lp-journey__art {
  width: min(var(--art), 100%); aspect-ratio: 1;
  border-radius: 50%;
  display: grid; place-items: center;
  margin-bottom: 8px;
  transition: transform .6s var(--spring);
}
.lp .lp-journey__step:hover .lp-journey__art { transform: translateY(-8px) rotate(-3deg); }
.lp .lp-journey__art img { width: 88%; height: auto; filter: drop-shadow(0 16px 20px rgba(45,20,71,.18)); }
.lp .lp-journey__n {
  display: inline-block; padding: 4px 12px; border-radius: 99px;
  background: var(--orange); color: #fff; font-weight: 600; font-size: 13.6px; letter-spacing: .04em; line-height: 1.4;
}
.lp .lp-journey__title { font-size: 21.6px; }
.lp .lp-journey__text { max-width: 22em; color: var(--text); }
.lp .lp-journey__paws {
  flex: 0 0 110px;
  position: relative;
  height: var(--art);
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; align-items: center;
}
.lp .lp-journey__paws svg { width: 22px; height: 22px; color: var(--orange); justify-self: center; }
.lp .lp-journey__paws svg:nth-child(odd) { transform: translateY(-9px) rotate(90deg); }
.lp .lp-journey__paws svg:nth-child(even) { transform: translateY(9px) rotate(90deg); }

/* animação de entrada: as patinhas "andam" de um passo ao outro */
.lp .lp-journey--anim .lp-journey__step { opacity: 0; transform: translateY(20px); transition: opacity .6s var(--ease), transform .7s var(--ease); }
.lp .lp-journey--anim .lp-journey__paws svg { opacity: 0; }
.lp .lp-journey--anim.lp-is-in .lp-journey__step { opacity: 1; transform: none; transition-delay: var(--delay, 0s); }
.lp .lp-journey--anim.lp-is-in .lp-journey__paws svg { animation: lp-pawIn .4s var(--ease) var(--delay, 0s) forwards; }
@keyframes lp-pawIn { from { opacity: 0; scale: .4; } to { opacity: 1; scale: 1; } }

/* =========================================================
   PRODUTOS (vitrine)
   ========================================================= */
.lp .lp-shop {
  position: relative; isolation: isolate; overflow: clip;
  background: var(--purple);
  color: #e6d9f2;
}
.lp .lp-shop__glow {
  position: absolute; z-index: -1; width: 720px; height: 720px; right: -220px; top: -260px; border-radius: 50%;
  background: radial-gradient(circle, var(--glow, rgba(252,124,4,.3)), transparent 65%);
  pointer-events: none;
}
.lp .lp-shop .lp-eyebrow { color: #ffb366; }
.lp .lp-shop .lp-h2 { color: #fff; }
.lp .lp-shop .lp-block__sub { color: #e6d9f2; }
.lp .lp-shop .lp-block__sub b { color: #fff; font-weight: 600; }
.lp .lp-studio { max-width: 1000px; margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(16px, 2.6vw, 28px); align-items: stretch; }
.lp .lp-studio__stage {
  position: relative;
  display: grid; place-items: center; align-content: center; gap: 10px;
  padding: clamp(16px, 2.4vw, 28px);
  border-radius: 32px;
  background: var(--paper);
  overflow: hidden;
  min-height: 280px;
}
.lp .lp-studio__frame { position: relative; width: min(320px, 100%); aspect-ratio: 1; container-type: inline-size; }
.lp .lp-prod__art {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%) scale(.94);
  opacity: 0; pointer-events: none;
  transition: opacity .45s var(--ease), transform .6s var(--ease);
}
.lp .lp-prod__art.lp-is-on { opacity: 1; transform: translate(-50%, -50%); }
.lp .lp-prod__art--vertical { height: var(--art-size, 84%); aspect-ratio: var(--ar, .7547); }
.lp .lp-prod__art--horizontal { width: var(--art-size, 128%); max-width: none; aspect-ratio: var(--ar, 2.3355); }
@media (max-width: 560px) { .lp .lp-prod__art--horizontal { width: 100%; } }
.lp .lp-prod__img {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
  object-fit: contain;
  opacity: 0;
  transition: opacity .45s var(--ease);
  filter: drop-shadow(0 18px 22px rgba(45,20,71,.2));
}
.lp .lp-prod__img.lp-is-on { opacity: 1; }

.lp .lp-studio__panel { display: flex; flex-direction: column; gap: 12px; }
.lp .lp-opt { border-radius: 28px; background: rgba(255,255,255,.1); color: var(--text); transition: background .3s, box-shadow .3s; }
.lp .lp-opt.lp-is-open { background: #fff; }
.lp .lp-opt__head { width: 100%; display: flex; align-items: center; gap: 10px; padding: 22px 24px; text-align: left; }
.lp .lp-opt__title { font-weight: 600; font-size: 20.8px; line-height: 1.2; color: #fff; }
.lp .lp-opt.lp-is-open .lp-opt__title { color: var(--purple); }
.lp .lp-opt__pill { padding: 4px 10px; border-radius: 99px; background: rgba(255,255,255,.16); color: #fff; font-weight: 600; font-size: 12.8px; line-height: 1.4; }
.lp .lp-opt.lp-is-open .lp-opt__pill { background: #f1eaf8; color: var(--purple); }
.lp .lp-opt__chev { margin-left: auto; width: 34px; height: 34px; padding: 9px; flex: none; border-radius: 50%; background: rgba(255,255,255,.16); color: #fff; transition: transform .4s var(--spring), background .3s, color .3s; }
.lp .lp-opt.lp-is-open .lp-opt__chev { transform: rotate(45deg); background: var(--orange); color: #fff; }
.lp .lp-opt__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease); }
.lp .lp-opt.lp-is-open .lp-opt__body { grid-template-rows: 1fr; }
.lp .lp-opt__inner { overflow: hidden; display: grid; gap: 12px; padding: 0 24px; min-height: 0; }
.lp .lp-opt.lp-is-open .lp-opt__inner { padding-bottom: 24px; }
.lp .lp-opt__desc { color: var(--text); }
.lp .lp-swatches { display: flex; flex-wrap: wrap; gap: 12px; padding: 4px 2px; }
.lp .lp-swatch {
  position: relative; display: block;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--sw);
  box-shadow: inset 0 -4px 8px rgba(0,0,0,.2);
  transition: transform .35s var(--spring), box-shadow .25s;
}
.lp .lp-swatch:hover { transform: translateY(-3px) scale(1.06); }
.lp .lp-swatch[aria-checked="true"] { box-shadow: 0 0 0 3px var(--paper), 0 0 0 6px var(--sw); transform: scale(1.04); }
.lp .lp-studio__buy { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 4px; }
.lp .lp-studio__buy .lp-pill { flex: 1 1 200px; }
.lp .lp-shop .lp-pill--soft, .lp .lp-shop .lp-pill--soft:focus { color: #fff; box-shadow: inset 0 0 0 2px rgba(255,255,255,.75); }
.lp .lp-shop .lp-pill--soft:hover { background: #fff; color: var(--purple); }

@media (max-width: 900px) { .lp .lp-studio { grid-template-columns: 1fr; } }
@media (max-width: 520px) {
  .lp .lp-opt__head { padding: 18px; }
  .lp .lp-opt__title { font-size: 19.2px; }
  .lp .lp-opt__inner { padding-inline: 18px; }
  .lp .lp-swatch { width: 40px; height: 40px; }
}

/* =========================================================
   AVALIAÇÕES (prints rolando)
   ========================================================= */
.lp .lp-reviews { background: var(--paper); padding-block: clamp(44px, 6vw, 72px); overflow: clip; }
.lp .lp-reviews__head { display: grid; justify-items: center; text-align: center; gap: 8px; margin-inline: auto; margin-bottom: clamp(20px, 3vw, 32px); }
.lp .lp-reviews__stars { display: flex; gap: 4px; color: #f5b300; }
.lp .lp-reviews__stars svg { width: 28px; height: 28px; }
.lp .lp-marquee { --gap: 10px; display: grid; gap: var(--gap); width: 100%; }
.lp .lp-marquee__row { display: flex; width: max-content; gap: var(--gap); animation: lp-marquee var(--dur, 60s) linear infinite; }
.lp .lp-marquee__row[data-dir="right"] { animation-direction: reverse; }
.lp .lp-marquee--pause:hover .lp-marquee__row { animation-play-state: paused; }
@keyframes lp-marquee { from { transform: translateX(0); } to { transform: translateX(calc(-50% - var(--gap) / 2)); } }
.lp .lp-print {
  flex: none;
  margin: var(--print-my, 1em) var(--print-mx, 40px);
  width: clamp(170px, 18vw, 240px);
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 14px 30px -22px rgba(45,20,71,.45), 0 0 0 1px rgba(45,20,71,.05);
}
/* caixa de tamanho fixo; o print inteiro aparece dentro dela, sem corte */
.lp .lp-print { aspect-ratio: 4 / 5; padding: var(--print-pad, 0px); display: flex; }
.lp .lp-print > a { display: flex; width: 100%; height: 100%; }
.lp .lp-print img { width: 100%; height: 100%; max-width: none; object-fit: contain; object-position: center; display: block; border-radius: var(--print-img-r, 0px); }
.lp .lp-reviews__cta { margin-top: clamp(20px, 3vw, 32px); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 20px; text-align: center; }
.lp .lp-reviews__cta p { font-weight: 500; color: var(--ink); }
@media (max-width: 520px) {
  .lp .lp-reviews { padding-block: 38px; }
  .lp .lp-reviews__head { margin-bottom: 18px; }
  .lp .lp-marquee { --gap: 8px; }
  .lp .lp-print { width: 150px; border-radius: 14px; }
  .lp .lp-reviews__cta { margin-top: 18px; }
}

/* =========================================================
   DÚVIDAS
   ========================================================= */
.lp .lp-faq { display: grid; grid-template-columns: minmax(0, var(--head-col, .8fr)) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.lp .lp-faq__head { margin-bottom: 0; }
.lp .lp-faq__head--sticky { position: relative; will-change: transform; } /* o script move o título (translateY) sem mexer no layout */
.lp .lp-faq__list { display: grid; gap: 10px; }
.lp .lp-qa { border-radius: 22px; background: var(--paper); overflow: hidden; box-shadow: 0 10px 26px -22px rgba(45,20,71,.35); transition: background .3s; }
.lp .lp-qa[open] { background: #f4eefa; }
.lp .lp-qa__q {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 20px 22px; font-weight: 600; font-size: 17.92px; line-height: 1.3; color: var(--ink);
}
.lp .lp-qa__q::-webkit-details-marker { display: none; }
.lp .lp-qa__q::marker { content: ""; }
.lp .lp-qa__q svg { width: 34px; height: 34px; padding: 9px; flex: none; border-radius: 50%; background: var(--lilac); color: var(--purple); transition: transform .45s var(--spring), background .3s, color .3s; }
.lp .lp-qa.lp-is-open .lp-qa__q svg { transform: rotate(45deg); background: var(--orange); color: #fff; }
.lp .lp-qa__a { padding: 0 22px 22px; max-width: 60ch; }
.lp .lp-qa__a p + p, .lp .lp-qa__a p + ul, .lp .lp-qa__a ul + p { margin-top: .7em; }
.lp .lp-qa__a ul { list-style: disc; padding-left: 1.2em; }

/* =========================================================
   AJUDA (banner com o gatinho)
   ========================================================= */
.lp .lp-help { padding-top: 0; }
.lp .lp-cta {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center;
  min-height: 340px;
  padding: clamp(28px, 5vw, 64px);
  border-radius: 36px;
  background: var(--orange);
  color: #fff;
  isolation: isolate;
  overflow: visible;
}
.lp .lp-cta__deco { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; z-index: -1; pointer-events: none; }
.lp .lp-cta__paw { position: absolute; left: 26%; top: 50%; width: min(620px, 70%); height: auto; max-width: none; aspect-ratio: 240 / 216; color: rgba(215,90,0,.28); transform: translate(-50%, -50%) rotate(-16deg); pointer-events: none; }
.lp .lp-cta__text { position: relative; display: grid; gap: 16px; justify-items: start; max-width: 30em; padding-right: clamp(16px, 4vw, 56px); }
.lp .lp-cta__title { color: #fff; font-size: clamp(30.4px, 3.8vw, 49.6px); }
.lp .lp-cta__desc { font-size: 17.92px; color: #fff; }
.lp .lp-cta__desc b, .lp .lp-cta__desc strong { font-weight: 700; }
.lp .lp-cta__desc p + p { margin-top: .6em; }
.lp .lp-cta__cat {
  position: absolute; right: clamp(0px, 2vw, 32px); bottom: -18%;
  height: 130%; width: auto; max-width: 52%; object-fit: contain; object-position: bottom right;
  filter: drop-shadow(0 20px 26px rgba(40,10,0,.3));
  transition: transform .8s var(--spring);
}
.lp .lp-cta:hover .lp-cta__cat { transform: translateY(-6px) rotate(-1deg); }

/* =========================================================
   WHATSAPP FLUTUANTE
   ========================================================= */
.lp .lp-wa-float, .lp .lp-wa-float:hover, .lp .lp-wa-float:focus { color: #fff; }
.lp .lp-wa-float {
  position: fixed; z-index: 90;
  right: calc(16px + env(safe-area-inset-right, 0px));
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  width: 60px; height: 60px; border-radius: 50%;
  display: grid; place-items: center;
  background: #25d366;
  text-decoration: none;
  isolation: isolate;
  transition: transform .35s var(--spring), background .25s;
}
.lp .lp-wa-float--pulse::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: inherit; z-index: -1;
  animation: lp-waPulse 2.6s ease-out infinite;
}
@keyframes lp-waPulse { 0% { transform: scale(1); opacity: .55; } 70%, 100% { transform: scale(1.6); opacity: 0; } }
.lp .lp-wa-float svg { width: 32px; height: 32px; }
.lp .lp-wa-float:hover { transform: scale(1.08); background: #1ebe5b; }
.lp .lp-wa-float--left { right: auto; left: calc(16px + env(safe-area-inset-left, 0px)); }
@media (max-width: 560px) {
  .lp .lp-wa-float { width: 54px; height: 54px; }
  .lp .lp-wa-float svg { width: 29px; height: 29px; }
}

/* =========================================================
   RESPONSIVO
   ========================================================= */
@media (max-width: 900px) {
  .lp { font-size: 16px; }
  .lp .lp-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .lp .lp-hero__actions .lp-pill { flex: 1 1 200px; min-width: 0; }

  /* celular: rótulo e título no topo, celular no meio, texto e trilha embaixo */
  .lp .lp-how__grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto auto; gap: 0; padding-block: 18px 14px; }
  .lp .lp-how__text { display: contents; }
  .lp .lp-how__text .lp-eyebrow { grid-row: 1; justify-self: start; }
  .lp .lp-how__title { grid-row: 2; margin-top: 8px; font-size: clamp(28.8px, 8vw, 36.8px); }
  .lp .lp-how__device { grid-row: 3; padding-block: 14px 10px; }
  .lp .lp-how__cards { grid-row: 4; margin-top: 0; }
  .lp .lp-trail { grid-row: 5; margin-top: 10px; height: 48px; max-width: none; }
  .lp .lp-phone { height: 92%; }
  .lp .lp-how-card__title { font-size: 24px; }
  .lp .lp-how-card__text { margin-top: 4px; font-size: 15.2px; line-height: 1.45; }
  .lp .lp-trail__paw { width: 40px; height: 40px; }
  .lp .lp-trail__paw svg { width: 24px; height: 24px; }
  .lp .lp-trail__line { left: 20px; right: 20px; }

  .lp .lp-journey { flex-direction: column; align-items: center; }
  .lp .lp-journey__step { flex: none; width: 100%; }
  .lp .lp-journey__paws { flex: none; height: 110px; width: 60px; grid-auto-flow: row; grid-auto-rows: 1fr; grid-auto-columns: auto; }
  .lp .lp-journey__paws svg:nth-child(odd) { transform: translateX(-10px) rotate(180deg); }
  .lp .lp-journey__paws svg:nth-child(even) { transform: translateX(10px) rotate(180deg); }

  .lp .lp-faq { grid-template-columns: 1fr; }
  .lp .lp-faq__head--sticky { transform: none !important; }

  /* gatinho centralizado, com as patinhas passando da borda de baixo */
  .lp .lp-cta { grid-template-columns: 1fr; min-height: 0; padding-bottom: 0; }
  .lp .lp-cta__text { padding-right: 0; padding-bottom: 8px; }
  .lp .lp-cta__cat { position: relative; right: auto; bottom: auto; height: auto; max-width: none; justify-self: center; width: min(86%, 420px); margin: 0 auto -10%; }
  .lp .lp-cta:hover .lp-cta__cat { transform: none; }
}
@media (max-width: 560px) {
  .lp { --gutter: 16px; }
  .lp .lp-pill--lg { padding: 14px 18px; font-size: 16px; }
  .lp .lp-hero__actions .lp-pill { flex-basis: 100%; }
  .lp .lp-hero__title { font-size: clamp(32px, 9vw, 41.6px); }
  .lp .lp-h2 { font-size: clamp(28.8px, 8vw, 36.8px); }
  .lp .lp-cta { border-radius: 28px; padding: 28px 22px 0; }
  .lp .lp-cta__paw { width: 120%; left: 40%; }
  .lp .lp-studio__buy .lp-pill { flex-basis: 100%; }
  .lp .lp-print { width: 78vw; }
}

/* Telas baixas (celular deitado): sem scroll preso, etapas viram abas */
@media (max-height: 540px) {
  .lp .lp-how { height: auto; }
  .lp .lp-how__pin { position: relative; height: auto; padding-block: calc(var(--top-h) + 16px) 32px; }
  .lp .lp-how__grid { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: none; height: auto; }
  .lp .lp-how__device { order: 0; height: 420px; }
  .lp .lp-phone { height: 100%; }
}

/* No editor do Elementor o scroll preso fica mais curto para facilitar a edição */
.elementor-editor-active .lp .lp-how--editor-short { height: auto; }
.elementor-editor-active .lp .lp-how--editor-short .lp-how__pin { position: relative; height: 760px; }

@media (prefers-reduced-motion: reduce) {
  .lp *, .lp *::before, .lp *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .lp .lp-marquee__row { animation: none; }
}

/* Hero com a imagem à esquerda (opção do widget) */
@media (min-width: 901px) { .lp-img-left-yes .lp .lp-hero__visual { order: -1; } }
@media (min-width: 901px) { .lp-phone-left-yes .lp .lp-how__device { order: -1; } }

/* =========================================================
   AVALIAÇÕES — cards (foto, estrelas, texto, cliente)
   ========================================================= */
.lp .lp-marquee--cards { --gap: 20px; }
.lp .lp-marquee--cards .lp-marquee__row { align-items: stretch; padding-block: 6px 26px; }
.lp .lp-rgrid { --gap: 20px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); align-items: stretch; }
.lp .lp-rcard {
  flex: none;
  width: clamp(250px, 22vw, 300px);
  display: flex; flex-direction: column;
  background: var(--paper);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 16px 34px -24px rgba(45,20,71,.45), 0 0 0 1px rgba(45,20,71,.05);
}
.lp .lp-rgrid .lp-rcard { width: auto; }
.lp .lp-rcard__photo {
  position: relative; aspect-ratio: 1; overflow: hidden;
  background: radial-gradient(circle at 50% 40%, var(--lilac), var(--lilac-2));
}
.lp .lp-rcard__photo img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center; }
.lp .lp-rcard__body { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 18px 20px 20px; }
.lp .lp-rcard__stars { --star-on: #f5b300; --star-off: #e4dcec; display: flex; gap: 3px; }
.lp .lp-rcard__stars svg { width: 18px; height: 18px; }
.lp .lp-rcard__stars .is-on { color: var(--star-on); }
.lp .lp-rcard__stars .is-off { color: var(--star-off); }
.lp .lp-rcard__text { font-size: 15px; line-height: 1.5; color: var(--text); }
.lp .lp-rcard__who { margin-top: auto; padding-top: 4px; display: grid; gap: 2px; line-height: 1.3; }
.lp .lp-rcard__author { font-weight: 600; font-size: 15.5px; color: var(--ink); }
.lp .lp-rcard__detail { font-size: 13px; color: var(--muted); }
@media (max-width: 900px) { .lp .lp-rgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .lp .lp-rgrid { grid-template-columns: 1fr; }
  .lp .lp-marquee--cards .lp-rcard { width: min(78vw, 280px); }
  .lp .lp-marquee--cards { --gap: 14px; }
}

/* =========================================================
   FORMULÁRIO DE AVALIAÇÃO
   ========================================================= */
.lp .lp-rform-sec { background: var(--cream); padding-top: calc(var(--sy) * .8); }
.lp .lp-rform {
  display: grid;
  grid-template-columns: minmax(0, var(--intro-col, 42%)) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
}
.lp .lp-rform--noimg { align-items: start; }
.lp .lp-rform__intro { display: grid; gap: 24px; }
.lp .lp-rform__head { margin-bottom: 0; }
.lp .lp-rform__visual { --circle: var(--lilac); position: relative; display: grid; place-items: end center; }
.lp .lp-rform__circle { position: absolute; left: 50%; bottom: 0; width: 82%; aspect-ratio: 1; border-radius: 50%; background: var(--circle); transform: translateX(-50%); }
.lp .lp-rform__img { position: relative; width: 78%; height: auto; max-width: none; filter: drop-shadow(0 18px 24px rgba(45,20,71,.2)); }

.lp .lp-rform__card {
  background: var(--paper);
  border-radius: 32px;
  padding: clamp(22px, 3.4vw, 40px);
  box-shadow: 0 24px 50px -34px rgba(45,20,71,.45), 0 0 0 1px rgba(45,20,71,.05);
}
.lp .lp-rform__fields { display: grid; gap: 18px; }
.lp .lp-rform__row { display: grid; gap: 18px; }
.lp .lp-rform__row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lp .lp-rform__field { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.lp .lp-rform__label { display: block; padding: 0; margin: 0; font-weight: 600; font-size: 15px; line-height: 1.3; color: var(--ink); }
.lp .lp-rform__req { color: var(--orange); }
.lp .lp-rform .lp-rform__input {
  width: 100%; max-width: none; margin: 0;
  height: 52px; padding: 12px 16px;
  border: 2px solid var(--lilac-2); border-radius: 14px;
  background: #fff; color: var(--ink);
  font-family: var(--font); font-size: 16px; line-height: 1.4;
  box-shadow: none; outline: 0;
  transition: border-color .2s, box-shadow .2s;
}
.lp .lp-rform textarea.lp-rform__input { height: auto; min-height: 132px; resize: vertical; }
.lp .lp-rform .lp-rform__input::placeholder { color: #a99cb8; opacity: 1; }
.lp .lp-rform .lp-rform__input:focus { border-color: var(--purple); box-shadow: 0 0 0 3px rgba(100,52,148,.16); }
.lp .lp-rform .lp-is-invalid .lp-rform__input, .lp .lp-rform .lp-rform__input.lp-is-invalid { border-color: #d33a3a; }

.lp .lp-rform__stars { --star-on: #f5b300; --star-off: #e4dcec; display: flex; gap: 6px; }
.lp .lp-rform__star { display: grid; place-items: center; cursor: pointer; color: var(--star-off); transition: transform .25s var(--spring), color .15s; margin: 0; line-height: 1; }
.lp .lp-rform__star svg { width: 36px; height: 36px; }
.lp .lp-rform__star.is-on { color: var(--star-on); }
.lp .lp-rform__star:hover { transform: scale(1.12); }
.lp .lp-rform__star:has(input:focus-visible) { outline: 3px solid var(--orange); outline-offset: 2px; border-radius: 8px; }
.lp .lp-rform__stars-wrap.lp-is-invalid .lp-rform__star { color: #f3c4c4; }

.lp .lp-rform__drop {
  position: relative; display: grid; place-items: center;
  min-height: 150px; max-height: 220px; padding: 18px;
  border: 2px dashed var(--lilac-2); border-radius: 18px;
  background: #faf6fd; cursor: pointer; text-align: center; overflow: hidden;
  transition: border-color .2s, background .2s;
}
.lp .lp-rform__drop:hover { border-color: var(--purple); background: #f4eefa; }
.lp .lp-rform__drop:has(input:focus-visible) { outline: 3px solid var(--orange); outline-offset: 2px; }
.lp .lp-rform__drop.lp-is-invalid { border-color: #d33a3a; }
.lp .lp-rform__drop-empty { display: grid; justify-items: center; gap: 6px; color: var(--purple); }
.lp .lp-rform__drop-empty[hidden] { display: none; }
.lp .lp-rform__drop-empty b { font-weight: 600; font-size: 15.5px; }
.lp .lp-rform__drop-empty small { font-size: 13px; color: var(--muted); }
.lp .lp-rform__drop-icon { width: 34px; height: 34px; color: var(--orange); }
.lp .lp-rform__drop-preview { position: absolute; inset: 0; display: grid; place-items: center; background: #f4eefa; padding: 14px; }
.lp .lp-rform__drop-preview[hidden] { display: none; }
/* Prévia da foto: mostra a imagem inteira, proporcional e sem ocupar todo o campo. */
.lp .lp-rform__drop-preview img {
  width: auto !important;
  height: auto !important;
  max-width: min(78%, 280px) !important;
  max-height: 112px !important;
  object-fit: contain !important;
  object-position: center;
  border-radius: 10px;
}
.lp .lp-rform__drop-change { position: absolute; right: 10px; bottom: 10px; padding: 6px 12px; border-radius: 99px; background: rgba(45,20,71,.8); color: #fff; font-size: 13px; font-weight: 600; }

.lp .lp-rform__consent { position: relative; display: flex; align-items: flex-start; gap: 12px; margin: 4px 0 0; font-size: 14px; line-height: 1.45; color: var(--text); cursor: pointer; }
/* O checkbox real fica exatamente sobre o checkbox visual.
   Assim o foco não faz a página saltar ao marcar/desmarcar. */
.lp .lp-rform__consent input { position: absolute; left: 0; top: 1px; width: 24px; height: 24px; margin: 0; opacity: 0; cursor: pointer; }
.lp .lp-rform__check { flex: none; width: 24px; height: 24px; margin-top: 1px; border-radius: 7px; border: 2px solid var(--lilac-2); background: #fff; display: grid; place-items: center; color: transparent; transition: background .2s, border-color .2s, color .2s; }
.lp .lp-rform__check svg { width: 16px; height: 16px; }
.lp .lp-rform__consent input:checked + .lp-rform__check { background: var(--purple); border-color: var(--purple); color: #fff; }
.lp .lp-rform__consent input:focus-visible + .lp-rform__check { outline: 3px solid var(--orange); outline-offset: 2px; }
.lp .lp-rform__consent.lp-is-invalid .lp-rform__check { border-color: #d33a3a; }

.lp .lp-rform__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.lp .lp-rform__msg { margin: 0; padding: 12px 16px; border-radius: 12px; background: #fdecec; color: #a12828; font-size: 14.5px; font-weight: 500; }
.lp .lp-rform__msg[hidden] { display: none; }

.lp .lp-rform .lp-rform__submit,
.lp .lp-rform .lp-rform__submit:focus { width: 100%; margin: 6px 0 0; border: 0; background: var(--orange); color: #fff; font-family: var(--font); text-transform: none; cursor: pointer; }
.lp .lp-rform .lp-rform__submit:hover { background: #ff8a1c; color: #fff; }
.lp .lp-rform .lp-rform__submit[disabled] { opacity: .7; cursor: progress; transform: none; }

.lp .lp-rform__done { display: grid; justify-items: center; text-align: center; gap: 12px; padding: 24px 6px; outline: 0; }
.lp .lp-rform__done[hidden] { display: none; }
.lp .lp-rform__done-icon { width: 72px; height: 72px; border-radius: 50%; background: #2fa866; color: #fff; display: grid; place-items: center; animation: lp-donePop .6s var(--spring) both; }
.lp .lp-rform__done-icon svg { width: 36px; height: 36px; }
.lp .lp-rform__done-title { font-weight: 600; font-size: 26px; line-height: 1.15; color: var(--purple); }
.lp .lp-rform__done-text { max-width: 30em; color: var(--text); }
.lp .lp-rform__done-btn { margin-top: 8px; }
@keyframes lp-donePop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }

@media (max-width: 900px) {
  .lp .lp-rform { grid-template-columns: 1fr; }
  .lp .lp-rform__visual { display: none; }
}
@media (max-width: 520px) {
  .lp .lp-rform__row--2 { grid-template-columns: 1fr; }
  .lp .lp-rform__star svg { width: 32px; height: 32px; }
}