/* ============== RESET / BASE ============== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
ul, ol { list-style: none; }

:root {
  /* Light base — clean, Instagram-native surfaces */
  --bg: #FFFFFF;
  --bg-alt: #F6F7F9;
  --bg-card: #FFFFFF;
  --bg-card-2: #F1F3F7;
  --border: #E6E8EC;
  --border-soft: rgba(20, 24, 31, 0.08);
  --text: #16181D;
  --text-soft: #51545C;
  --text-mute: #8A8E98;
  /* Orange demoted: now only a CTA / urgency accent, not the page theme */
  --orange: #FF6B35;
  --orange-2: #FF8559;
  --orange-soft: rgba(255, 107, 53, 0.12);
  /* Instagram brand family */
  --purple: #8134AF;
  --purple-soft: rgba(129, 52, 175, 0.10);
  --pink: #DD2A7B;
  --cyan: #515BD4;            /* repurposed: IG indigo (kills TikTok neon) */
  --indigo: #515BD4;
  --green: #16A34A;          /* deeper for contrast on light */
  --green-soft: rgba(22, 163, 74, 0.12);
  --gold: #E0A000;
  --red: #E5484D;
  /* Instagram gradient — the new brand signature */
  --grad-ig: linear-gradient(135deg, #515BD4 0%, #8134AF 34%, #DD2A7B 66%, #F58529 100%);
  --grad-ig-soft: linear-gradient(135deg, rgba(81,91,212,0.12), rgba(129,52,175,0.12), rgba(221,42,123,0.12), rgba(245,133,41,0.12));
  --shadow-md: 0 8px 28px rgba(20, 24, 40, 0.10);
  --shadow-sm: 0 2px 10px rgba(20, 24, 40, 0.06);
  --shadow-orange: 0 8px 24px rgba(255, 107, 53, 0.28);
  --shadow-ig: 0 10px 30px rgba(129, 52, 175, 0.20);
  --radius: 14px;
  --radius-lg: 20px;
  --ease: cubic-bezier(.22, .61, .36, 1);

  /* ============== CLAYMORPHISM (V2) ============== */
  /* Base off-white LIMPO + neutro (cor da V1), só dá contraste leve pro clay saltar */
  --clay-bg: #EFF0F3;            /* fundo da página (off-white frio limpo) */
  --clay-surface: #FFFFFF;       /* superfície dos cards (branco puro) */
  --clay-surface-2: #F3F4F7;     /* superfície aninhada / hover */
  --clay-gold: #F5B620;          /* dourado só pro selo recomendado */
  --clay-radius: 26px;           /* clay = cantos arredondados (menos "bala" que antes) */
  --clay-radius-sm: 18px;
  --clay-radius-pill: 999px;
  /* A "receita" clay SUAVIZADA: ainda tem luz no topo + sombra embaixo (volume de
     massinha), mas bem menos "inflada" que antes — visual mais premium, menos brinquedo.
     Tom NEUTRO (cinza-azulado), não bege. */
  --clay-shadow:
    0 14px 28px -16px rgba(120, 128, 150, 0.38),
    0 4px 9px -5px rgba(120, 128, 150, 0.18),
    inset 0 3px 5px rgba(255, 255, 255, 0.92),
    inset 0 -6px 11px rgba(150, 158, 180, 0.16);
  --clay-shadow-sm:
    0 9px 18px -11px rgba(120, 128, 150, 0.32),
    inset 0 2px 4px rgba(255, 255, 255, 0.9),
    inset 0 -4px 8px rgba(150, 158, 180, 0.13);
  /* Pressionado (estado :active) — inverte as luzes pra "afundar" a massinha */
  --clay-shadow-pressed:
    inset 0 5px 12px rgba(150, 158, 180, 0.38),
    inset 0 -3px 7px rgba(255, 255, 255, 0.9);
  /* FLAT — tratamento SÓBRIO pras seções de confiança (garantia, FAQ, métricas,
     selos de segurança). Sombra discreta + fio de borda = card sério, não "massinha". */
  --clay-shadow-flat:
    0 2px 10px -2px rgba(120, 128, 150, 0.13),
    0 1px 3px rgba(120, 128, 150, 0.09);
  --clay-border-flat: 1px solid rgba(120, 128, 150, 0.14);
  /* Sombra clay LARANJA (cor da marca V1) pros CTAs primários — ainda salta, menos balão */
  --clay-shadow-orange:
    0 14px 26px -12px rgba(255, 107, 53, 0.50),
    0 5px 12px -6px rgba(255, 107, 53, 0.34),
    inset 0 3px 6px rgba(255, 255, 255, 0.45),
    inset 0 -8px 15px rgba(180, 60, 20, 0.32);
  --clay-shadow-orange-pressed:
    0 5px 12px -6px rgba(255, 107, 53, 0.45),
    inset 0 6px 14px rgba(180, 60, 20, 0.45),
    inset 0 -3px 7px rgba(255, 255, 255, 0.35);
}

body {
  font-family: 'Poppins', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: var(--text);
  background: var(--clay-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding-bottom: 80px;
  overflow-x: hidden;
}

/* ============== CLAYMORPHISM — overrides V2 (só visual da home) ============== */
/* Seções alternadas viram tons pastel da massinha, sem branco chapado */
body.clay .section--alt { background: var(--clay-surface-2) !important; }
body.clay .section { background: transparent; }

/* GRADIENTE DE CONFIANÇA (decisão de UX):
   - Seções EMOCIONAIS / prova social / oferta → mantêm a "massinha" (clay forte),
     porque ali o lúdico ajuda a vender e combina com o Instagram.
   - Seções de CONFIANÇA → tratamento SÓBRIO (flat), porque perto de "garantia",
     "segurança" e da decisão de pagar o site precisa parecer SÉRIO, não brinquedo.
   O checkout (já sólido) é o fim desse gradiente. */

/* EMOCIONAL / PROVA SOCIAL / OFERTA → clay forte */
body.clay .pack, body.clay .pack-hero__inner, body.clay .vidcard,
body.clay .ba, body.clay .simcard__frame, body.clay .tcard {
  background: var(--clay-surface) !important;
  border: none !important;
  border-radius: var(--clay-radius) !important;
  box-shadow: var(--clay-shadow) !important;
}

/* CONFIANÇA / CREDIBILIDADE → flat sóbrio (garantia, FAQ, métricas, pilares) */
body.clay .metric-card, body.clay .faq__item,
body.clay .guarantee, body.clay .pillar {
  background: var(--clay-surface) !important;
  border: var(--clay-border-flat) !important;
  border-radius: var(--clay-radius-sm) !important;
  box-shadow: var(--clay-shadow-flat) !important;
}

/* CTAs principais = botão de massinha LARANJA (SÓ na LP) */
body.clay .cta--primary {
  background: linear-gradient(180deg, var(--orange-2) 0%, var(--orange) 100%) !important;
  color: #fff !important;
  border-radius: var(--clay-radius-pill) !important;
  box-shadow: var(--clay-shadow-orange) !important;
  border: none !important;
  transition: transform .14s var(--ease), box-shadow .14s var(--ease);
}
body.clay .cta--primary:active {
  transform: translateY(2px) scale(0.99);
  box-shadow: var(--clay-shadow-orange-pressed) !important;
}

/* CTA em 2 linhas: "Quero aumentar" (menor) sobre "N seguidores" (maior/bold) */
.cta-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.12;
}
.cta-stack__l1 { font-size: .80em; font-weight: 600; opacity: .92; letter-spacing: .2px; }
.cta-stack__l2 { font-size: 1.06em; font-weight: 800; }

.container {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding: 0 16px;
}

.hl { color: var(--orange); }
.hl-red { color: var(--red); }

/* ============== TOPBAR ============== */
.topbar {
  background: linear-gradient(90deg, rgba(255, 107, 53, 0.10), rgba(168, 116, 255, 0.08));
  border-bottom: 1px solid var(--border-soft);
  padding: 8px 16px;
  text-align: center;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar__dot {
  width: 7px;
  height: 7px;
  background: var(--green);
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(43, 199, 106, 0.18);
  animation: pulse 2.4s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.2); opacity: 0.85; }
}

/* ============== SECTION COMMON ============== */
.section {
  padding: 56px 0;
  position: relative;
}
.section--alt {
  background: var(--bg-alt);
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
}

.eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-bottom: 12px;
}
.eyebrow--orange { color: var(--orange); }

.section__title {
  font-size: 28px;
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -0.02em;
  margin-bottom: 14px;
}

.section__sub {
  font-size: 16px;
  color: var(--text-soft);
  margin-bottom: 32px;
}

/* ============== HERO ============== */
.hero {
  padding: 20px 0 52px;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(70% 50% at 50% 0%, rgba(245, 133, 41, 0.12), transparent 65%),
    radial-gradient(60% 45% at 88% 22%, rgba(129, 52, 175, 0.10), transparent 65%),
    radial-gradient(50% 40% at 12% 70%, rgba(81, 91, 212, 0.09), transparent 70%),
    var(--bg);
}
/* Grid de dots sutil no background — dá textura sem poluir */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(20, 24, 31, 0.04) 1px, transparent 1.5px);
  background-size: 22px 22px;
  background-position: 0 0;
  pointer-events: none;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
  opacity: 0.7;
}
/* Aura de marca (gradiente Instagram) atrás do finder — identidade + foco visual.
   Vários blobs radiais em cores da família IG, bem desfocados e de baixa opacidade. */
.hero__aura {
  position: absolute;
  top: 56%;
  left: 50%;
  width: 440px;
  height: 440px;
  max-width: 118vw;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(40% 40% at 28% 30%, rgba(81, 91, 212, 0.62), transparent 72%),
    radial-gradient(42% 42% at 72% 28%, rgba(129, 52, 175, 0.58), transparent 72%),
    radial-gradient(46% 46% at 64% 70%, rgba(221, 42, 123, 0.62), transparent 72%),
    radial-gradient(42% 42% at 30% 72%, rgba(245, 133, 41, 0.55), transparent 72%);
  filter: blur(34px) saturate(1.25);
  opacity: 0.9;
  border-radius: 50%;
  animation: heroAura 11s ease-in-out infinite alternate;
}
@keyframes heroAura {
  0%   { transform: translate(-50%, -50%) scale(1)    rotate(0deg);   opacity: 0.78; }
  100% { transform: translate(-50%, -50%) scale(1.07) rotate(8deg);   opacity: 0.92; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__aura { animation: none; }
}

.hero__inner { position: relative; z-index: 1; text-align: center; }

/* === Badge: glow + escala balanceada === */
.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: linear-gradient(135deg, rgba(22, 163, 74, 0.12), rgba(22, 163, 74, 0.05));
  border: 1px solid rgba(22, 163, 74, 0.40);
  color: #0C7A38;
  padding: 8px 14px 8px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 24px;
  white-space: nowrap;
  max-width: 100%;
  box-shadow: 0 4px 18px rgba(43, 199, 106, 0.14);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.hero__badge-icon {
  display: inline-flex;
  background: linear-gradient(135deg, var(--green), #1FA855);
  color: #fff;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(43, 199, 106, 0.4);
}

/* === Título com hierarchy melhor === */
.hero__title {
  font-size: 36px;
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -0.028em;
  margin-bottom: 18px;
  max-width: 380px;
  margin-left: auto;
  margin-right: auto;
  /* Distribui as palavras igualmente entre as linhas em qualquer largura.
     Evita quebras feias tipo "Ganhe milhares de" + "Seguidores Reais"
     quando o viewport reduz. */
  text-wrap: balance;
  -webkit-text-wrap: balance;
}
.hero__title .hl {
  background: var(--grad-ig);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.hero__greendot {
  display: inline-block;
  vertical-align: middle;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 5px rgba(43, 199, 106, 0.22), 0 0 22px rgba(43, 199, 106, 0.6);
  animation: pulse 2.2s ease-in-out infinite;
  margin-left: 7px;
  margin-bottom: 5px;
}

.hero__sub {
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--text-soft);
  margin-bottom: 22px;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}
.hero__sub b { color: var(--text); font-weight: 700; }

/* === Trust: linha única integrada, peso adequado === */
.hero__trust {
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.stars {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: var(--bg-card-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 13px;
  color: var(--text-soft);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.stars__icons {
  color: var(--gold);
  font-size: 16px;
  letter-spacing: 1px;
  text-shadow: 0 0 14px rgba(245, 182, 32, 0.4);
}
.stars__text b { color: var(--text); font-weight: 700; }

.trust-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.trust-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 247, 241, 0.035);
  border: 1px solid var(--border-soft);
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 12px;
  color: var(--text-soft);
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.trust-pill svg { color: var(--green); }
.trust-pill:hover { border-color: rgba(43, 199, 106, 0.34); background: rgba(43, 199, 106, 0.04); }

/* ============== PROFCONFIRM — card de perfil estilo Instagram ============== */
.profconfirm {
  background: #FFF;
  border: 1px solid #DBDBDB;
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
  padding: 18px 18px 16px;
  margin: 4px auto 14px;
  max-width: 380px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', sans-serif;
  /* IG mobile usa system font */
}

.profconfirm__head {
  display: grid;
  grid-template-columns: 86px 1fr;
  gap: 18px;
  align-items: center;
  margin-bottom: 14px;
}
.profconfirm__avatar {
  width: 86px;
  height: 86px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: #FFF;
  font-size: 36px;
  background: var(--grad-ig);
  overflow: hidden;
  border: 2px solid #FFF;
  box-shadow: 0 0 0 2px var(--pink);
}
.profconfirm__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

.profconfirm__counts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  text-align: center;
}
.profconfirm__count b {
  display: block;
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.profconfirm__count span {
  display: block;
  font-size: 13px;
  color: var(--text);
  font-weight: 400;
  margin-top: 2px;
}

.profconfirm__name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
  margin-bottom: 1px;
}
.profconfirm__handle {
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 13.5px;
  color: #8E8E8E;
  margin-bottom: 6px;
}
.profconfirm__bio {
  font-size: 14px;
  color: var(--text);
  line-height: 1.4;
  margin-bottom: 14px;
}

.profconfirm__btnrow {
  display: grid;
  grid-template-columns: 1fr 1fr 36px;
  gap: 6px;
}
.profconfirm__btn {
  background: #EFEFEF;
  color: var(--text);
  font-weight: 600;
  font-size: 13px;
  padding: 7px 8px;
  border-radius: 8px;
  border: 0;
  cursor: default;
  pointer-events: none;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.profconfirm__btn--icon {
  width: 36px;
  padding: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* CTA / confirmação acima do CTA */
.finder__confirm {
  font-size: 14px;
  color: var(--text-soft);
  text-align: center;
  margin: 6px 0 12px;
  line-height: 1.45;
}
.finder__confirm b { color: var(--text); font-weight: 700; }

/* ============== iPhone 14 MOCKUP (legacy — mantido caso queira voltar) ============== */
.iphone {
  position: relative;
  margin: 26px auto 28px;
  width: 280px;
  /* ratio 9:19.5 ≈ iPhone 14 */
  aspect-ratio: 9 / 19.5;
  isolation: isolate;
}
.iphone__frame {
  position: relative;
  width: 100%;
  height: 100%;
  background: linear-gradient(155deg, #2A2520 0%, #16110D 35%, #0A0806 70%, #1A140F 100%);
  border-radius: 44px;
  padding: 5px;
  box-shadow:
    /* anel externo cromado */
    0 0 0 1px rgba(70, 60, 50, 0.7),
    /* sombra base */
    0 22px 48px -10px rgba(0, 0, 0, 0.7),
    0 8px 22px rgba(255, 107, 53, 0.10),
    /* highlight metálico interno */
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    inset 1px 0 0 rgba(255, 255, 255, 0.04),
    inset -1px 0 0 rgba(255, 255, 255, 0.04);
}
/* ===== Side buttons (volume +/-, mute, power) ===== */
.iphone__sidebtn {
  position: absolute;
  background: linear-gradient(90deg, #1F1B17 0%, #2C2620 50%, #1F1B17 100%);
  border-radius: 1px;
  z-index: 0;
}
.iphone__sidebtn--mute  { left: -2px; top: 88px;  width: 3px; height: 24px;  border-radius: 2px 0 0 2px; }
.iphone__sidebtn--vol1  { left: -2px; top: 122px; width: 3px; height: 38px;  border-radius: 2px 0 0 2px; }
.iphone__sidebtn--vol2  { left: -2px; top: 168px; width: 3px; height: 38px;  border-radius: 2px 0 0 2px; }
.iphone__sidebtn--power { right: -2px; top: 130px; width: 3px; height: 56px; border-radius: 0 2px 2px 0; }

/* ===== Screen ===== */
.iphone__screen {
  position: relative;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, #0F0F12 0%, #07070A 100%);
  border-radius: 39px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* ===== Status bar (hora + ícones) ===== */
.iphone__statusbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 22px 4px;
  font-size: 13px;
  font-weight: 700;
  color: #FFF;
  font-variant-numeric: tabular-nums;
  height: 32px;
  flex-shrink: 0;
}
.iphone__time { letter-spacing: -0.01em; }
.iphone__statusright {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #FFF;
}
.iphone__battery {
  position: relative;
  display: inline-block;
  width: 22px;
  height: 11px;
  border: 1px solid rgba(255,255,255,0.5);
  border-radius: 3px;
  margin-left: 1px;
}
.iphone__battery::after {
  content: "";
  position: absolute;
  right: -3px;
  top: 3px;
  width: 1.5px;
  height: 5px;
  background: rgba(255,255,255,0.5);
  border-radius: 0 1px 1px 0;
}
.iphone__batterylvl {
  position: absolute;
  inset: 1px;
  width: calc(100% - 4px);
  background: #FFF;
  border-radius: 1.5px;
}

/* ===== Dynamic Island (iPhone 14 Pro style) ===== */
.iphone__island {
  position: absolute;
  top: 9px;
  left: 50%;
  transform: translateX(-50%);
  width: 96px;
  height: 26px;
  background: #000;
  border-radius: 18px;
  z-index: 5;
  box-shadow: inset 0 0 0 0.5px rgba(255,255,255,0.08);
}

/* ===== App bar (header IG dentro do app) ===== */
.iphone__appbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 16px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
}
.iphone__appback,
.iphone__appmenu { color: #FFF; line-height: 1; }
.iphone__apphandle {
  font-weight: 700;
  font-size: 15px;
  color: #FFF;
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.iphone__apphandle::after {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  background: var(--cyan);
  border-radius: 50%;
  margin-left: 2px;
  /* checkmark verificado */
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='12' fill='black'/><polyline points='8 12 11 15 16 9' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='12' fill='black'/></svg>") center/contain no-repeat;
  display: none; /* mostrado só se tiver verificado — hook futuro */
}

/* ===== App content ===== */
.iphone__screen .igprofile {
  flex: 1;
  padding: 16px 14px 8px;
  background: linear-gradient(180deg, #0F0F12 0%, #0A0A0E 100%);
}

/* ===== Home indicator (barrinha branca embaixo) ===== */
.iphone__home {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 134px;
  height: 5px;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 3px;
  z-index: 5;
}

/* ===== Glow ===== */
.iphone__glow {
  position: absolute;
  inset: -30px -50px;
  z-index: -1;
  background:
    radial-gradient(50% 60% at 50% 50%, rgba(255, 107, 53, 0.30), transparent 70%),
    radial-gradient(40% 50% at 30% 30%, rgba(168, 116, 255, 0.18), transparent 70%);
  filter: blur(40px);
  animation: glowPulse 3.4s ease-in-out infinite;
  pointer-events: none;
}

/* ===== PAYWALL OVERLAY (após +3000) ===== */
.iphone__paywall {
  position: absolute;
  inset: 0;
  z-index: 50;
  display: none;                     /* default = oculto */
  align-items: center;
  justify-content: center;
  border-radius: 44px;
  overflow: hidden;
}
.iphone__paywall:not([hidden]) {
  display: flex;
  animation: paywallIn 0.45s var(--ease);
}
.iphone__paywall::before {
  /* blur sobre o screen — replica o frame curve */
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 39px;
  backdrop-filter: blur(14px) saturate(1.1) brightness(0.6);
  -webkit-backdrop-filter: blur(14px) saturate(1.1) brightness(0.6);
  background: linear-gradient(180deg, rgba(15, 15, 18, 0.5), rgba(7, 7, 10, 0.78));
  z-index: 1;
}
@keyframes paywallIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.iphone__paywall-cta {
  position: relative;
  z-index: 2;
  background: linear-gradient(135deg, #FF6B35, #FF4D6D);
  color: #FFF;
  font-weight: 800;
  font-size: 14px;
  padding: 16px 18px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: calc(100% - 36px);
  margin: 0 18px;
  letter-spacing: -0.01em;
  text-align: center;
  line-height: 1.25;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.06) inset,
    0 16px 38px rgba(255, 107, 53, 0.55),
    0 0 0 6px rgba(255, 107, 53, 0.18);
  animation: paywallPulse 1.6s ease-in-out infinite;
  cursor: pointer;
  transition: transform 0.16s var(--ease), filter 0.16s var(--ease);
}
.iphone__paywall-cta:hover { filter: brightness(1.08); transform: scale(1.02); }
.iphone__paywall-cta:active { transform: scale(0.98); }
@keyframes paywallPulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(255,255,255,0.06) inset, 0 16px 38px rgba(255, 107, 53, 0.55), 0 0 0 6px rgba(255, 107, 53, 0.18); }
  50%      { box-shadow: 0 0 0 1px rgba(255,255,255,0.06) inset, 0 22px 50px rgba(255, 107, 53, 0.70), 0 0 0 14px rgba(255, 107, 53, 0.10); }
}

/* legacy phone-mockup (mantido caso algum lugar use) */
.phone-mockup {
  position: relative;
  margin: 24px auto 28px;
  width: 268px;
}
.phone__glow {
  position: absolute;
  inset: -20px -40px;
  background: radial-gradient(50% 50% at 50% 50%, rgba(255, 107, 53, 0.32), transparent 70%);
  filter: blur(30px);
  z-index: 0;
}
.phone {
  position: relative;
  z-index: 1;
  background: #07060A;
  border: 2px solid #2C2620;
  border-radius: 30px;
  padding: 8px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 247, 241, 0.04),
    0 12px 40px rgba(0, 0, 0, 0.6),
    0 4px 12px rgba(255, 107, 53, 0.14);
}
.phone__notch {
  width: 60px;
  height: 14px;
  background: #07060A;
  border-radius: 0 0 12px 12px;
  margin: 0 auto 4px;
}
.phone__screen {
  background: linear-gradient(180deg, #1A1612, #100D0A);
  border-radius: 22px;
  padding: 12px;
  min-height: 280px;
}
.phone__topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 10px;
  border-bottom: 1px solid #2C2620;
  margin-bottom: 12px;
  font-size: 11px;
  color: var(--text-soft);
}
.phone__title { font-weight: 600; color: var(--text); font-size: 12px; }
.phone__back { font-size: 18px; line-height: 1; }
.phone__statbox { text-align: left; margin-bottom: 14px; }
.phone__statlabel {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-mute);
  margin-bottom: 4px;
}
.phone__statvalue {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 24px;
  font-weight: 800;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.phone__statgrowth {
  font-size: 11px;
  font-weight: 700;
  color: var(--green);
  background: rgba(43, 199, 106, 0.12);
  padding: 2px 6px;
  border-radius: 6px;
}
.phone__period { font-size: 10px; color: var(--text-mute); margin-top: 2px; }
.phone__chart { height: 100px; margin: 12px 0; }
.phone__metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 10px;
}
.phone__metric {
  background: rgba(255, 247, 241, 0.03);
  border: 1px solid #2C2620;
  border-radius: 10px;
  padding: 8px;
  text-align: center;
}
.phone__metric-num {
  font-size: 14px;
  font-weight: 800;
  color: var(--orange);
  font-variant-numeric: tabular-nums;
}
.phone__metric-lbl {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-mute);
  margin-top: 1px;
}

/* ============== CTA ============== */
.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: linear-gradient(135deg, var(--orange), #FF7C45);
  color: #FFF;
  font-weight: 700;
  font-size: 16px;
  padding: 16px 22px;
  border-radius: 12px;
  min-height: 52px;
  box-shadow: var(--shadow-orange);
  transition: transform 0.16s var(--ease), box-shadow 0.16s var(--ease), filter 0.16s var(--ease);
  position: relative;
  letter-spacing: -0.01em;
  text-align: center;
}
.cta:hover, .cta:focus-visible {
  filter: brightness(1.06);
  box-shadow: 0 12px 30px rgba(255, 107, 53, 0.5);
  transform: translateY(-1px);
  outline: none;
}
.cta:focus-visible { outline: 2px solid #FFD8C4; outline-offset: 3px; }
.cta:active { transform: scale(0.98); }
.cta--full { width: 100%; }
.cta--xl {
  font-size: 17px;
  padding: 20px 24px;
  min-height: 60px;
}

/* ============== DOR (PAS) ============== */
.pain-list {
  display: grid;
  gap: 14px;
  margin: 28px 0 24px;
}
.pain-list__item {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 18px 18px;
  border-radius: 12px;
}
.pain-list__num {
  flex-shrink: 0;
  font-size: 22px;
  font-weight: 900;
  color: var(--red);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  min-width: 32px;
  letter-spacing: -0.02em;
  opacity: 0.85;
}
.pain-list__item b {
  display: block;
  font-size: 15px;
  margin-bottom: 4px;
  color: var(--text);
}
.pain-list__item span {
  font-size: 14px;
  color: var(--text-soft);
}

.dor__close {
  font-size: 16px;
  color: var(--text-soft);
  margin-top: 10px;
  padding: 18px 20px;
  background: rgba(255, 107, 53, 0.06);
  border: 1px solid rgba(255, 107, 53, 0.2);
  border-radius: 12px;
}
.dor__close b { color: var(--text); }

/* ============== PILLARS — minimal inline row, NO card containers ============== */
.pillars {
  display: grid;
  gap: 28px;
  margin: 32px 0;
  padding: 6px 0;
}
.pillar {
  text-align: left;
  display: grid;
  grid-template-columns: 52px 1fr;
  grid-template-areas:
    "icon title"
    "icon text";
  column-gap: 16px;
  row-gap: 4px;
  align-items: start;
}
.pillar__icon {
  grid-area: icon;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: start;
}
.pillar__title {
  grid-area: title;
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 0;
  color: var(--text);
  align-self: center;
}
.pillar__text {
  grid-area: text;
  font-size: 14px;
  color: var(--text-soft);
  line-height: 1.55;
}

/* ============== STEPS — vertical numbered with display numbers + connector ============== */
.steps {
  display: grid;
  gap: 0;
  margin-top: 32px;
  position: relative;
}
.step {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 18px;
  align-items: start;
  position: relative;
  padding: 8px 0 32px;
}
.step:last-child { padding-bottom: 8px; }
.step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 31px;
  top: 56px;
  bottom: 8px;
  width: 2px;
  background: linear-gradient(180deg, rgba(255, 107, 53, 0.4), rgba(255, 107, 53, 0.05));
}
.step__num {
  font-family: 'Inter', sans-serif;
  font-size: 56px;
  font-weight: 900;
  line-height: 1;
  color: var(--orange);
  letter-spacing: -0.06em;
  font-variant-numeric: tabular-nums;
  text-align: center;
  min-width: 64px;
}
.step__title {
  font-weight: 700;
  font-size: 17px;
  margin-bottom: 4px;
  color: var(--text);
  padding-top: 6px;
}
.step__text {
  font-size: 14px;
  color: var(--text-soft);
  line-height: 1.55;
}

/* ============== PROVA SOCIAL ============== */
.metrics-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin: 24px 0;
}
.metric-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 12px;
  text-align: center;
  box-shadow: var(--shadow-sm);
}
.metric-card__num {
  font-size: 26px;
  font-weight: 900;
  color: var(--orange);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.metric-card__num small {
  font-size: 13px;
  color: var(--text-soft);
  font-weight: 600;
}
.metric-card__lbl {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-mute);
  margin-top: 2px;
  font-weight: 600;
}

.testimonials {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 4px 4px 16px;
  margin: 0 -20px;
  padding-left: 20px;
  padding-right: 20px;
  scrollbar-width: none;
}
.testimonials::-webkit-scrollbar { display: none; }

.tcard {
  flex: 0 0 280px;
  scroll-snap-align: start;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow-sm);
}
.tcard__head {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
}
.tcard__avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: #FFF;
  font-size: 18px;
  flex-shrink: 0;
}
.tcard__avatar--img {
  object-fit: cover;
  background: var(--bg-card-2);
  border: 1.5px solid rgba(255, 107, 53, 0.30);
}
.tcard__name {
  font-weight: 700;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.tcard__verified {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; vertical-align: -2px;
}
.tcard__verified svg { width: 100%; height: 100%; display: block; }
.tcard__handle {
  font-size: 12px;
  color: var(--text-mute);
}
.tcard__quote {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-soft);
  margin-bottom: 12px;
}
.tcard__quote b { color: var(--text); font-weight: 700; }
.tcard__chart {
  background: var(--bg-card-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 10px;
  position: relative;
}
.tcard__chartmeta {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-mute);
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
.tcard__chartmeta small { font-size: 9px; opacity: 0.8; }
.tcard__growth { color: var(--green); font-weight: 700; }
.tcard__hint {
  text-align: center;
  font-size: 11px;
  color: var(--text-mute);
  margin-top: 4px;
}

/* ============== PACOTES ============== */
.packs {
  display: grid;
  gap: 16px;
  margin: 28px 0 22px;
}
.packs[hidden] { display: none; }

.pack {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px 20px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
}
@media (hover: hover) {
  .pack:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: rgba(129, 52, 175, 0.28);
  }
}
.pack:active { transform: translateY(-1px) scale(0.995); }

/* Brinde de curtidas + preço de→por (desconto) */
.pack__bonus {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--pink);
  margin: 2px 0 10px;
}
.pack__pricetop {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 2px;
}
.pack__from {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-mute);
  text-decoration: line-through;
}
.pack__off {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #fff;
  background: var(--green);
  padding: 2px 7px;
  border-radius: 6px;
}
.pack-hero__bonus {
  font-size: 13px;
  font-weight: 800;
  color: var(--pink);
  margin: 4px 0 12px;
}
.pack-hero__pricetop {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-bottom: 4px;
}
.pack-hero__from {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-mute);
  text-decoration: line-through;
}
.pack-hero__off {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #fff;
  background: var(--green);
  padding: 3px 9px;
  border-radius: 999px;
}
.pack__head { margin-bottom: 14px; }
.pack__name {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.15em;
  color: var(--text-mute);
  margin-bottom: 4px;
}
.pack__tag {
  font-size: 13px;
  color: var(--text-soft);
}
.pack__qty {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-soft);
  margin-bottom: 8px;
}
.pack__qty b {
  font-size: 26px;
  color: var(--text);
  font-weight: 900;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.pack__price {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 4px;
}
.pack__currency {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-soft);
}
.pack__value {
  font-size: 44px;
  font-weight: 900;
  color: var(--text);
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.pack__value small {
  font-size: 22px;
  font-weight: 800;
  color: var(--text);
}
.pack__inst {
  font-size: 12px;
  color: var(--text-mute);
  margin-bottom: 14px;
}
.pack__list {
  display: grid;
  gap: 8px;
  margin-bottom: 18px;
}
.pack__list li {
  font-size: 13px;
  color: var(--text-soft);
  line-height: 1.45;
}
.pack__cta { width: 100%; }

.pack__ribbon {
  position: absolute;
  top: 18px;
  right: -38px;
  background: var(--orange);
  color: #FFF;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  padding: 5px 44px;
  transform: rotate(38deg);
  z-index: 2;
}
.pack__ribbon--gold {
  background: linear-gradient(135deg, var(--gold), var(--orange));
}
.pack__ribbon--viral {
  background: linear-gradient(90deg, var(--cyan) 0%, var(--purple) 50%, var(--pink) 100%);
}

.pack--featured {
  border: 2px solid var(--orange);
  background: linear-gradient(180deg, rgba(255, 107, 53, 0.08), var(--bg-card));
  box-shadow: 0 8px 30px rgba(255, 107, 53, 0.18);
}
.pack--gold {
  border: 1px solid rgba(245, 182, 32, 0.4);
  background: linear-gradient(180deg, rgba(245, 182, 32, 0.05), var(--bg-card));
}

/* ============== VIRAL TOGGLE BUTTON (rotating gradient border kept — purposeful) ============== */
.viral-toggle-wrap {
  margin: 32px 0 8px;
  text-align: center;
}
.viral-toggle {
  position: relative;
  display: block;
  width: 100%;
  padding: 3px;
  border-radius: 16px;
  overflow: hidden;
  background: transparent;
  isolation: isolate;
}
.viral-toggle__bg {
  position: absolute;
  inset: -120%;
  z-index: 0;
  background: conic-gradient(
    from 0deg,
    var(--cyan) 0deg,
    var(--purple) 90deg,
    var(--pink) 180deg,
    var(--orange) 270deg,
    var(--cyan) 360deg
  );
  animation: spinGrad 5s linear infinite;
}
@keyframes spinGrad {
  to { transform: rotate(360deg); }
}
.viral-toggle__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: linear-gradient(180deg, #FFFFFF, #F6F7F9);
  border-radius: 13px;
  padding: 18px 18px;
  min-height: 64px;
  justify-content: center;
}
.viral-toggle__top {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.01em;
}
.viral-toggle__icon { color: var(--orange); }
.viral-toggle__bottom {
  font-size: 12px;
  color: var(--text-soft);
  font-weight: 500;
  letter-spacing: 0.04em;
}
.viral-toggle__viral {
  color: var(--purple);
  font-weight: 900;
  letter-spacing: 0.14em;
}
.viral-toggle:hover .viral-toggle__inner {
  background: linear-gradient(180deg, #F6F7F9, #EFF1F5);
}
.viral-toggle:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; }

.viral-toggle__hint {
  margin-top: 10px;
  font-size: 12px;
  color: var(--text-mute);
}

/* ============== VIRAL PACKS ============== */
.packs--viral { margin-top: 24px; }
.viral-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 8px 0 6px;
}
.viral-divider__line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--purple), transparent);
}
.viral-divider__label {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.18em;
  color: var(--purple);
}

.pack--viral {
  border: 1px solid transparent;
  background:
    linear-gradient(var(--bg-card), var(--bg-card)) padding-box,
    linear-gradient(135deg, var(--cyan), var(--purple), var(--pink), var(--orange)) border-box;
  position: relative;
}
.pack--viral .pack__name {
  color: var(--purple);
  font-weight: 900;
}
.pack__viralband {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--cyan), var(--purple), var(--pink), var(--orange));
}
.pack--viral-mega {
  background:
    linear-gradient(180deg, rgba(255, 77, 157, 0.05), var(--bg-card)) padding-box,
    linear-gradient(135deg, var(--pink), var(--orange), var(--gold)) border-box;
}
.pack--viral-mega .pack__name { color: var(--pink); }

/* ============== PAYMENT METHODS ============== */
.paymethods {
  margin-top: 22px;
  text-align: center;
}
.paymethods__label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-mute);
  margin-bottom: 10px;
  font-weight: 600;
}
.paymethods__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.paymethod {
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--text-soft);
}
.paymethod--pix {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  padding: 9px 18px;
  border-radius: 10px;
  background: rgba(0, 199, 130, 0.10);
  border-color: rgba(0, 199, 130, 0.40);
  color: #6FE89F;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.paymethod--pix svg { color: #00C782; }
.paymethods__sub {
  display: block;
  margin-top: 10px;
  font-size: 11px;
  color: var(--text-mute);
}

/* ============== GUARANTEE ============== */
.guarantee {
  background: linear-gradient(180deg, rgba(245, 182, 32, 0.06), var(--bg-card));
  border: 1px solid rgba(245, 182, 32, 0.22);
  border-radius: var(--radius-lg);
  padding: 32px 22px;
  text-align: center;
  position: relative;
}
.guarantee__seal {
  display: inline-block;
  margin-bottom: 14px;
  filter: drop-shadow(0 6px 20px rgba(245, 182, 32, 0.32));
}
.guarantee__title {
  font-size: 22px;
  font-weight: 800;
  margin-bottom: 12px;
  letter-spacing: -0.02em;
}
.guarantee__text {
  font-size: 15px;
  color: var(--text-soft);
  line-height: 1.55;
  max-width: 380px;
  margin: 0 auto;
}
.guarantee__text b { color: var(--text); }

/* ============== FAQ ============== */
.faq {
  display: grid;
  gap: 10px;
  margin-top: 28px;
}
.faq__item {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 0.2s var(--ease);
}
.faq__item[open] {
  border-color: var(--orange);
  background: linear-gradient(180deg, rgba(255, 107, 53, 0.04), var(--bg-card));
}
.faq__q {
  list-style: none;
  padding: 16px 18px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  user-select: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:focus-visible { outline: 2px solid var(--orange); outline-offset: -2px; border-radius: 12px; }
.faq__chev {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  position: relative;
  transition: transform 0.25s var(--ease);
}
.faq__chev::before, .faq__chev::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 2px;
  background: var(--orange);
  border-radius: 2px;
  transition: transform 0.25s var(--ease);
}
.faq__chev::before { transform: translate(-50%, -50%); }
.faq__chev::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq__item[open] .faq__chev::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq__a {
  padding: 0 18px 18px;
  font-size: 14px;
  color: var(--text-soft);
  line-height: 1.6;
}
.faq__a b { color: var(--text); font-weight: 700; }

/* ============== FINAL CTA ============== */
.finalcta {
  background:
    radial-gradient(60% 50% at 50% 0%, rgba(255, 107, 53, 0.18), transparent 60%),
    var(--bg);
  text-align: center;
}
.finalcta__inner { max-width: 420px; margin: 0 auto; }
.finalcta__eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--orange);
  background: rgba(255, 107, 53, 0.1);
  border: 1px solid rgba(255, 107, 53, 0.3);
  padding: 6px 12px;
  border-radius: 999px;
  margin-bottom: 14px;
}
.finalcta__title {
  font-size: 30px;
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -0.025em;
  margin-bottom: 12px;
}
.finalcta__sub {
  font-size: 16px;
  color: var(--text-soft);
  margin-bottom: 24px;
}
.finalcta__sub b { color: var(--text); }
.finalcta__bullets {
  display: grid;
  gap: 10px;
  margin-top: 20px;
  font-size: 14px;
  color: var(--text-soft);
}
.finalcta__bullets li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
}
.finalcta__check {
  color: var(--green);
  flex-shrink: 0;
}

.security {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--border-soft);
}
.security__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 11px;
  color: var(--text-soft);
}
.security__item svg { color: var(--orange); flex-shrink: 0; }

/* ============== FOOTER ============== */
.footer {
  padding: 32px 0 24px;
  background: var(--bg-alt);
  border-top: 1px solid var(--border);
  text-align: center;
}
.footer__brand {
  font-size: 16px;
  font-weight: 800;
  color: var(--orange);
  margin-bottom: 10px;
  letter-spacing: -0.01em;
}
.footer__text {
  font-size: 12px;
  color: var(--text-mute);
  margin-bottom: 12px;
  max-width: 360px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.5;
}
.footer__legal {
  font-size: 10px;
  color: var(--text-mute);
  opacity: 0.75;
  margin-bottom: 12px;
  line-height: 1.5;
}
.footer__copy { font-size: 11px; color: var(--text-mute); }

/* ============== STICKY CTA ============== */
.sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--border);
  padding: 10px 16px env(safe-area-inset-bottom, 10px);
  z-index: 50;
  transform: translateY(110%);
  transition: transform 0.36s var(--ease);
  box-shadow: 0 -8px 24px rgba(20, 24, 40, 0.12);
}
.sticky-cta.is-visible { transform: translateY(0); }
.sticky-cta__inner {
  display: flex;
  gap: 12px;
  align-items: center;
  max-width: 480px;
  margin: 0 auto;
}
.sticky-cta__price {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  line-height: 1;
}
.sticky-cta__from {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-mute);
  font-weight: 600;
}
.sticky-cta__val {
  font-size: 18px;
  font-weight: 900;
  color: var(--text);
  margin-top: 3px;
  font-variant-numeric: tabular-nums;
}
.sticky-cta__val small { font-size: 12px; font-weight: 800; }
.sticky-cta__btn {
  flex: 1;
  font-size: 14px;
  padding: 12px 16px;
  min-height: 48px;
}

/* ============== RESPONSIVE — TABLET / DESKTOP ============== */
@media (min-width: 640px) {
  .container { max-width: 720px; padding: 0 32px; }
  .section { padding: 80px 0; }
  .section__title { font-size: 34px; }
  .hero__title { font-size: 44px; }
  .pillars { grid-template-columns: repeat(3, 1fr); gap: 32px; }
  .metrics-row { grid-template-columns: repeat(4, 1fr); }
  .packs { grid-template-columns: repeat(2, 1fr); }
  .pack { padding: 26px 22px; }
  .finalcta__title { font-size: 38px; }
}

@media (min-width: 960px) {
  .container { max-width: 1080px; }
  .hero { padding: 60px 0 80px; }
  .hero__title { font-size: 56px; }
  .hero__sub { font-size: 18px; max-width: 560px; }
  .section__title {
    font-size: 40px;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
  }
  .section__sub {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
  }
  .packs { grid-template-columns: repeat(4, 1fr); }
  .packs--viral { grid-template-columns: repeat(2, 1fr); max-width: 720px; margin-left: auto; margin-right: auto; }
  .pack--featured { transform: scale(1.04); }
  .phone-mockup { width: 280px; }
  .pain-list { grid-template-columns: repeat(3, 1fr); }
  .steps { grid-template-columns: repeat(3, 1fr); }
  .step:not(:last-child)::before { display: none; }
  .finalcta__title { font-size: 46px; }
  .guarantee { padding: 48px 32px; }
}

@media (min-width: 1200px) {
  .container { max-width: 1180px; }
}

/* ============== FINDER (substitui phone estático) ============== */
.finder {
  position: relative;
  margin: 28px auto 32px;
  max-width: 400px;
  padding: 18px 16px 16px;
  background:
    linear-gradient(180deg, rgba(255, 247, 241, 0.025), rgba(255, 247, 241, 0.01)),
    var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 22px;
  box-shadow:
    0 18px 50px rgba(60, 40, 90, 0.16),
    0 4px 14px rgba(20, 24, 40, 0.06);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
/* @property registra `--angle` como ângulo animável (necessário pra anim CSS
   conseguir interpolar a variável dentro do conic-gradient). */
@property --finder-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.finder::before {
  /* Borda brilhante ROTATIVA — um arco luminoso que circula o card 360º.
     IMPORTANTE: NÃO usar transform:rotate aqui, senão a máscara gira junto
     e o gradient vaza pelos cantos do retângulo. Animamos o `--finder-angle`
     dentro do conic-gradient — elemento + máscara ficam estáticos. */
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 24px;          /* card é 22px + 2px de inset */
  padding: 2px;
  background: conic-gradient(
    from var(--finder-angle),
    rgba(255, 107, 53, 0)    0deg,
    rgba(255, 107, 53, 0)   70deg,
    rgba(255, 138, 89, 0.95) 100deg,
    rgba(255, 107, 53, 1)   115deg,
    rgba(168, 116, 255, 0.9) 130deg,
    rgba(168, 116, 255, 0)  165deg,
    rgba(168, 116, 255, 0)  360deg
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
          mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  animation: finderBorderSpin 4.5s linear infinite;
}
@keyframes finderBorderSpin {
  to { --finder-angle: 360deg; }
}

/* Aro estático MAIS DISCRETO embaixo, pra que mesmo onde o arco luminoso
   não estiver passando, a borda do card não fique completamente nua. */
.finder::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 24px;
  padding: 2px;
  background: linear-gradient(135deg,
    rgba(255, 107, 53, 0.18),
    rgba(168, 116, 255, 0.10) 50%,
    rgba(255, 107, 53, 0.18));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
          mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: -1;
}
.finder {
  background-clip: padding-box;
}
/* states:
   - "" / "picknet"  → mostra .finder__networks (default)
   - "idle"          → mostra .finder__form (após escolher rede)
   - "loading"       → mostra .finder__loading
   - "done"          → mostra .finder__result */
.finder__networks { display: block; }
.finder__form,
.finder__loading,
.finder__result { display: none; }

body[data-finder-state="idle"] .finder__networks,
body[data-finder-state="loading"] .finder__networks,
body[data-finder-state="analysis"] .finder__networks,
body[data-finder-state="done"] .finder__networks { display: none; }

body[data-finder-state="idle"]    .finder__form    { display: block; }
body[data-finder-state="loading"] .finder__loading { display: block; }
body[data-finder-state="done"]    .finder__result  { display: block; }

.finder__label--center { text-align: center; }

/* === Network cards === */
.netcards {
  display: grid;
  gap: 10px;
  margin-bottom: 14px;
}
.netcard {
  position: relative;
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 13px;
  align-items: center;
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  border-radius: 15px;
  padding: 13px 16px;
  text-align: left;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.18s var(--ease), background 0.18s var(--ease), transform 0.16s var(--ease), box-shadow 0.18s var(--ease);
  width: 100%;
  min-height: 64px;
  overflow: hidden;
}
.netcard::before {
  /* sutil gradient bg que reflete a cor da rede */
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s var(--ease);
  z-index: 0;
}
.netcard > * { position: relative; z-index: 1; }
.netcard:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.netcard:hover::before { opacity: 0.6; }
.netcard:active { transform: translateY(-1px) scale(0.995); }
.netcard:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.netcard__icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: block;
  border-radius: 11px;
  filter: drop-shadow(0 3px 8px rgba(20, 24, 40, 0.16));
}
.netcard__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.netcard__name { font-weight: 800; font-size: 17px; color: var(--text); letter-spacing: -0.01em; }
.netcard__arrow {
  color: var(--orange);
  transition: color 0.16s, background 0.18s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 107, 53, 0.10);
  animation: netcardArrowNudge 1.6s ease-in-out infinite;
}
@keyframes netcardArrowNudge {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(5px); }
}
/* Pausa o "nudge" quando hover/focus (pra evitar duplicação com o hover) */
.netcard:hover .netcard__arrow,
.netcard:focus-visible .netcard__arrow {
  animation-play-state: paused;
  transform: translateX(5px);
}
/* Stagger leve pra cada card animar com fase diferente — fica mais "vivo" */
.netcards .netcard:nth-child(1) .netcard__arrow { animation-delay: 0s; }
.netcards .netcard:nth-child(2) .netcard__arrow { animation-delay: 0.2s; }
.netcards .netcard:nth-child(3) .netcard__arrow { animation-delay: 0.4s; }

/* === Por rede: cor de borda + bg suave + arrow color === */
.netcard--ig::before {
  background: radial-gradient(120% 100% at 0% 0%, rgba(245, 133, 41, 0.18), transparent 60%),
              radial-gradient(120% 100% at 100% 100%, rgba(81, 91, 212, 0.15), transparent 60%);
}
.netcard--ig:hover { border-color: #DD2A7B; box-shadow: 0 6px 22px rgba(221, 42, 123, 0.18); }
.netcard--ig:hover .netcard__arrow { color: #DD2A7B; background: rgba(221, 42, 123, 0.14); }

.netcard--fb::before {
  background: radial-gradient(120% 100% at 0% 0%, rgba(24, 119, 242, 0.20), transparent 60%);
}
.netcard--fb:hover { border-color: #1877F2; box-shadow: 0 6px 22px rgba(24, 119, 242, 0.22); }
.netcard--fb:hover .netcard__arrow { color: #4DA1FF; background: rgba(24, 119, 242, 0.16); }

/* === Network chosen pill (no top do form quando rede já foi escolhida) === */
.netchosen {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px 6px 5px 5px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-soft);
  margin-bottom: 14px;
  transition: border-color 0.16s, color 0.16s;
  cursor: pointer;
}
.netchosen:hover { border-color: var(--orange); color: var(--text); }
.netchosen__icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #FFF;
  flex-shrink: 0;
}
.netchosen__icon svg { width: 14px; height: 14px; }
.netchosen__icon--ig { background: linear-gradient(135deg, #F58529 0%, #DD2A7B 50%, #515BD4 100%); }
.netchosen__icon--fb { background: linear-gradient(135deg, #1877F2 0%, #0866FF 100%); }
.netchosen__name { font-weight: 700; color: var(--text); }
.netchosen__change {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--orange);
  background: rgba(255, 107, 53, 0.10);
  padding: 3px 8px;
  border-radius: 999px;
  margin-left: 4px;
}

/* analysis__logo dinâmico — cores por rede */
.analysis__logo--ig {
  background: linear-gradient(135deg, rgba(245, 133, 41, 0.16), rgba(221, 42, 123, 0.16), rgba(81, 91, 212, 0.16));
  border-color: rgba(221, 42, 123, 0.45);
  color: #FF6B35;
}
.analysis__logo--fb {
  background: linear-gradient(135deg, rgba(24, 119, 242, 0.16), rgba(8, 102, 255, 0.16));
  border-color: rgba(24, 119, 242, 0.50);
  color: #4DA1FF;
}

.finder__step {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--orange);
  background: linear-gradient(135deg, rgba(255, 107, 53, 0.16), rgba(255, 107, 53, 0.06));
  border: 1px solid rgba(255, 107, 53, 0.34);
  padding: 6px 12px;
  border-radius: 999px;
  margin-bottom: 14px;
}
.finder__stepdot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 0 4px rgba(255, 107, 53, 0.18);
  animation: pulse 2s ease-in-out infinite;
}
body[data-finder-state="done"] .finder__step { display: none; }

.finder__label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 10px;
  text-align: center;
}

.finder__inputwrap {
  display: flex;
  align-items: stretch;
  background: var(--bg-card);
  border: 2px solid var(--border);
  border-radius: 14px;
  margin-bottom: 12px;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
  overflow: hidden;
}
.finder__inputwrap:focus-within {
  border-color: var(--orange);
  box-shadow: 0 0 0 4px rgba(255, 107, 53, 0.16);
}
.finder__at {
  display: flex;
  align-items: center;
  padding: 0 14px;
  font-size: 22px;
  font-weight: 800;
  color: var(--text-mute);
  background: rgba(255, 247, 241, 0.03);
  border-right: 1px solid var(--border);
  user-select: none;
}
.finder__input {
  flex: 1;
  font: inherit;
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
  background: transparent;
  border: 0;
  padding: 16px 14px;
  outline: none;
  letter-spacing: -0.01em;
  min-height: 56px;
}
.finder__input::placeholder { color: var(--text-mute); font-weight: 500; }

.finder__safe {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: 11.5px;
  color: var(--text-mute);
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border-soft);
}
.finder__safe svg { color: var(--green); }

/* loading state */
.finder__loading { text-align: center; }
.finder__loadlabel {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  font-size: 14px;
  color: var(--text-soft);
}
.finder__loadlabel b { color: var(--text); font-weight: 700; }
.finder__spinner {
  width: 18px;
  height: 18px;
  border: 2px solid var(--border);
  border-top-color: var(--orange);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* skeleton blocks */
.sk {
  background: linear-gradient(90deg, #ECEEF1 0%, #F5F6F8 50%, #ECEEF1 100%);
  background-size: 200% 100%;
  border-radius: 6px;
  animation: shimmer 1.4s linear infinite;
}
@keyframes shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
.sk--avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
}
.sk--num {
  width: 32px;
  height: 14px;
  margin: 4px auto;
}
.sk--line {
  height: 10px;
  margin: 8px 0;
}
.sk--line-md { width: 50%; }
.sk--line-lg { width: 78%; }

/* result state CTA */
.finder__resultcta {
  margin-top: 18px;
  display: grid;
  gap: 10px;
}
.finder__changelink {
  font-size: 12px;
  color: var(--text-mute);
  background: transparent;
  text-align: center;
  padding: 6px;
}
.finder__changelink u { color: var(--text-soft); }
.finder__changelink:hover u { color: var(--orange); }

/* ============== IGPROFILE (Instagram-like layout dentro do phone) ============== */
.igprofile { padding: 6px 2px 4px; }
.igprofile--skeleton .igprofile__head { align-items: flex-start; }

.igprofile__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.igprofile__avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 800;
  color: #FFF;
  overflow: hidden;
  background: linear-gradient(135deg, var(--orange), var(--pink));
  border: 2px solid var(--bg-card-2);
  box-shadow: 0 0 0 2px var(--orange);
}
.igprofile__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.igprofile__counts {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 6px;
}
.igprofile__count {
  text-align: center;
  min-width: 0;
  padding: 0 2px;
}
.igprofile__num {
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* #liveFollowers: tamanho/cor herdam do .profconfirm__count b normal (white, 17px) */
/* (CSS antigo de animação live tick + cor laranja removido — sem live counter agora) */
.igprofile__lbl {
  font-size: 9.5px;
  color: var(--text-mute);
  margin-top: 2px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
}
.igprofile__lbl--live { color: var(--orange); font-weight: 700; }
.igprofile__livedot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 2px rgba(43, 199, 106, 0.22);
  animation: pulse 1.4s ease-in-out infinite;
  display: inline-block;
  flex-shrink: 0;
}
.igprofile__count--featured {
  position: relative;
}
.igprofile__count--featured::before {
  content: "";
  position: absolute;
  inset: -3px -2px;
  background: rgba(255, 107, 53, 0.08);
  border: 1px solid rgba(255, 107, 53, 0.22);
  border-radius: 8px;
  z-index: -1;
}
.igprofile__count--featured .igprofile__num { color: var(--orange); }
.igprofile__name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}
.igprofile__bio {
  font-size: 11px;
  color: var(--text-soft);
  line-height: 1.45;
  margin-bottom: 12px;
}
.igprofile__live {
  background: linear-gradient(90deg, rgba(43, 199, 106, 0.10), rgba(255, 107, 53, 0.08));
  border: 1px solid rgba(43, 199, 106, 0.28);
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 11px;
  color: var(--text-soft);
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
}
.igprofile__live b { color: var(--green); font-weight: 800; font-variant-numeric: tabular-nums; }

.phone__glow--alive {
  background: radial-gradient(50% 50% at 50% 50%, rgba(43, 199, 106, 0.32), rgba(255, 107, 53, 0.20) 50%, transparent 75%);
  animation: glowPulse 2.6s ease-in-out infinite;
}
@keyframes glowPulse {
  0%, 100% { opacity: 0.85; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.05); }
}

/* ============== PACKS LOCK ============== */
.packs-lock {
  position: relative;
  margin: 28px 0 22px;
  border-radius: 24px;
  overflow: hidden;
  isolation: isolate;
}
.packs-lock__content {
  filter: blur(14px) brightness(1.04) saturate(0.92);
  pointer-events: none;
  user-select: none;
  transition: filter 0.5s var(--ease), max-height 0.5s var(--ease);
  transform: scale(1.02); /* avoid blur edge bleed */
  transform-origin: center;
  max-height: 560px;
  overflow: hidden;
}
.packs-lock__veil {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 24px;
  gap: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.92));
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  border-radius: 24px;
  transition: opacity 0.4s var(--ease);
}
.packs-lock__icon {
  width: 60px;
  height: 60px;
  border-radius: 16px;
  background: rgba(255, 107, 53, 0.12);
  border: 1px solid rgba(255, 107, 53, 0.30);
  color: var(--orange);
  display: flex;
  align-items: center;
  justify-content: center;
}
.packs-lock__eyebrow {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
  color: var(--orange);
  background: rgba(255, 107, 53, 0.10);
  border: 1px solid rgba(255, 107, 53, 0.30);
  padding: 5px 12px;
  border-radius: 999px;
  display: inline-block;
  margin-bottom: 4px;
}
.packs-lock__title {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
}
.packs-lock__msg {
  font-size: 14px;
  color: var(--text-soft);
  line-height: 1.55;
  max-width: 320px;
}
.packs-lock__msg b { color: var(--text); font-weight: 700; }
.packs-lock__cta {
  margin-top: 6px;
  min-height: 52px;
  padding: 14px 24px;
}

.packs-lock.is-unlocked .packs-lock__content {
  filter: none;
  pointer-events: auto;
  user-select: auto;
  transform: none;
  max-height: none;
  overflow: visible;
}
.packs-lock.is-unlocked .packs-lock__veil {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

@media (min-width: 640px) {
  .packs-lock__title { font-size: 24px; }
  .packs-lock__msg { font-size: 15px; max-width: 420px; }
  .finder { max-width: 420px; }
}

/* ============== PACK HERO — destaque "Mais Recomendado" ============== */
.pack-hero {
  position: relative;
  margin: 8px 0 28px;
  padding: 3px;
  border-radius: 22px;
  isolation: isolate;
  overflow: hidden;
}
.pack-hero__aura {
  position: absolute;
  inset: -100%;
  z-index: 0;
  background: conic-gradient(
    from 0deg,
    #FFD86B 0deg,
    #F5B620 60deg,
    #FFF1B0 130deg,
    #C28D0E 200deg,
    #F5B620 280deg,
    #FFD86B 360deg
  );
  animation: spinGrad 6s linear infinite;
}
.pack-hero::after {
  content: "";
  position: absolute;
  inset: -50px;
  z-index: -1;
  background: radial-gradient(55% 55% at 50% 50%, rgba(245, 182, 32, 0.55), rgba(255, 216, 107, 0.22) 45%, transparent 80%);
  filter: blur(34px);
  animation: heroGlow 3.6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes heroGlow {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.06); }
}
.pack-hero__inner {
  position: relative;
  z-index: 1;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255, 184, 32, 0.14), transparent 60%),
    linear-gradient(180deg, #FFFFFF, #FFF8EC);
  border-radius: 19px;
  padding: 24px 22px 22px;
}
.pack-hero__ribbon {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #1A0E04;
  background: linear-gradient(135deg, var(--gold), var(--orange));
  padding: 6px 12px;
  border-radius: 999px;
  margin-bottom: 16px;
  box-shadow: 0 4px 14px rgba(245, 182, 32, 0.40);
}
.pack-hero__name {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: var(--gold);
  margin-bottom: 4px;
}
.pack-hero__tag {
  font-size: 13px;
  color: var(--text-soft);
  line-height: 1.45;
  margin-bottom: 16px;
}
.pack-hero__qty {
  font-size: 14px;
  color: var(--text-soft);
  margin-bottom: 14px;
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.pack-hero__qty b {
  font-size: 42px;
  color: var(--text);
  font-weight: 900;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.pack-hero__bullets {
  display: grid;
  gap: 8px;
  margin-bottom: 18px;
  padding: 14px 14px;
  background: rgba(255, 247, 241, 0.03);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.pack-hero__bullets li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13.5px;
  color: var(--text-soft);
  line-height: 1.45;
}
.pack-hero__bullets li::before {
  content: "✓";
  flex-shrink: 0;
  color: var(--green);
  font-weight: 800;
  margin-top: 1px;
}
.pack-hero__priceblock {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 16px;
}
.pack-hero__price {
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.pack-hero__currency {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-soft);
}
.pack-hero__value {
  font-size: 56px;
  font-weight: 900;
  color: var(--text);
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.pack-hero__value small {
  font-size: 28px;
  font-weight: 800;
  color: var(--text);
}
.pack-hero__inst {
  font-size: 12px;
  color: var(--text-mute);
  margin-top: 4px;
}
.pack-hero__cta {
  background: linear-gradient(135deg, var(--orange), #FF7C45);
  box-shadow: 0 12px 30px rgba(255, 107, 53, 0.42), 0 0 0 1px rgba(255, 184, 32, 0.16);
}
.pack-hero__safety {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-mute);
  margin-top: 12px;
  align-self: center;
}
.pack-hero__safety svg { color: var(--green); flex-shrink: 0; }
.pack-hero__body { display: flex; flex-direction: column; }
.pack-hero__body .pack-hero__safety { width: 100%; justify-content: center; }

.packs__divider {
  text-align: center;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--text-mute);
  margin: 18px 0 10px;
  font-weight: 600;
  position: relative;
}
.packs__divider::before,
.packs__divider::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 28%;
  height: 1px;
  background: var(--border-soft);
}
.packs__divider::before { left: 0; }
.packs__divider::after { right: 0; }

@media (min-width: 640px) {
  .pack-hero__inner { padding: 32px 30px 28px; }
  .pack-hero__qty b { font-size: 56px; }
  .pack-hero__value { font-size: 68px; }
  .pack-hero__value small { font-size: 32px; }
}
@media (min-width: 960px) {
  .pack-hero__inner {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 32px;
    align-items: center;
  }
  .pack-hero__ribbon { grid-column: 1 / -1; justify-self: center; }
  .pack-hero__head { grid-column: 1; }
  .pack-hero__qty { grid-column: 1; }
  .pack-hero__bullets { grid-column: 1; margin-bottom: 0; }
  .pack-hero__priceblock { grid-column: 2; align-items: center; margin-bottom: 14px; grid-row: 2; }
  .pack-hero__cta { grid-column: 2; grid-row: 3; }
  .pack-hero__safety { grid-column: 2; grid-row: 4; }
}

/* ============== EXTRA SOCIAL PROOF SUBSECTIONS ============== */
.proof-sub {
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid var(--border-soft);
}
.proof-sub__title {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 22px;
  margin-top: 6px;
}

/* ============== SLIDER DE PERFIS CRESCENDO (peek carousel) ============== */
:root { --grow-w: 320px; --grow-h: 430px; }
.growslider {
  margin: 6px -16px 8px;          /* sangra até as bordas pra mostrar os vizinhos */
  overflow: hidden;
}
.growslider__track {
  display: flex;
  gap: 16px;
  padding: 16px calc(50% - var(--grow-w) / 2);  /* centraliza o slide ativo */
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.growslider__track::-webkit-scrollbar { display: none; }
.growslide {
  flex: 0 0 var(--grow-w);
  max-width: 86vw;
  scroll-snap-align: center;
  height: var(--grow-h);
  opacity: 0.45;
  transform: scale(0.92);
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.growslide.is-active { opacity: 1; transform: scale(1); }
.growslider__hint {
  text-align: center;
  font-size: 12px;
  color: var(--text-mute);
  margin-top: 2px;
  letter-spacing: 0.02em;
}

/* Moldura comum (vídeo e simcards têm o MESMO tamanho) */
.bavideo, .simcard { width: 100%; height: 100%; }
.bavideo__frame, .simcard__frame {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.bavideo__frame { background: #000; border: 1px solid var(--border); }
.bavideo__media {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Badge "AO VIVO" GRANDE no vídeo — cobre o @ da cliente */
.bavideo__chip {
  position: absolute;
  top: 4%;
  left: 4%;
  min-width: 64%;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(18, 21, 28, 0.96);
  color: #fff;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 8px 13px;
  border-radius: 11px;
  white-space: nowrap;
}
.bavideo__rec {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #FF4D4D;
  box-shadow: 0 0 0 0 rgba(255, 77, 77, 0.55);
  animation: bavRec 1.5s ease-out infinite;
}
@keyframes bavRec {
  0%   { box-shadow: 0 0 0 0 rgba(255, 77, 77, 0.55); }
  70%  { box-shadow: 0 0 0 7px rgba(255, 77, 77, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 77, 77, 0); }
}

/* Overlay "seu perfil será o próximo" — comum a TODOS os slides */
.grow-next {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 22px;
  border: 0;
  cursor: pointer;
  background: rgba(16, 18, 24, 0.42);
  backdrop-filter: blur(9px) saturate(1.05);
  -webkit-backdrop-filter: blur(9px) saturate(1.05);
  animation: bavEndIn 0.45s var(--ease);
}
.grow-next[hidden] { display: none; }
.grow-next__inner {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  color: #fff;
}
.grow-next strong { font-size: 18px; font-weight: 800; line-height: 1.25; letter-spacing: -0.01em; }
.grow-next__inner > span { font-size: 13px; line-height: 1.4; opacity: 0.95; max-width: 220px; }
.grow-next__cta {
  margin-top: 6px;
  font-size: 13px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, var(--orange), var(--orange-2));
  padding: 9px 18px; border-radius: 999px;
  box-shadow: var(--shadow-orange);
}
@keyframes bavEndIn { from { opacity: 0; } to { opacity: 1; } }

/* === Slide de CTA final === */
.growslide--cta { display: flex; }
.growcta {
  width: 100%; height: 100%;
  border-radius: 20px;
  background: var(--grad-ig);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 26px 22px;
  box-shadow: var(--shadow-ig);
}
.growcta__spark { font-size: 32px; margin-bottom: 6px; }
.growcta__big { font-size: 26px; font-weight: 900; letter-spacing: -0.02em; line-height: 1; }
.growcta__lead { font-size: 14px; line-height: 1.4; margin-top: 10px; opacity: 0.97; }
.growcta__lead b { font-weight: 800; }
.growcta__sub { font-size: 13px; line-height: 1.4; margin-top: 8px; opacity: 0.92; }
.growcta__sub b { font-weight: 800; }
.growcta__btn {
  margin-top: 18px;
  background: #fff !important;
  color: #16181D !important;
  box-shadow: 0 10px 26px rgba(0,0,0,0.18);
}
.growcta__note { font-size: 11px; margin-top: 12px; opacity: 0.9; letter-spacing: 0.02em; }

/* === Card de perfil simulado === */
.simcard__frame {
  background: #fff;
  border: 1px solid #DBDBDB;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  display: flex;
  flex-direction: column;
}
.simcard__top { padding: 10px 12px 0; }
.simcard__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: #16181D;
  margin-bottom: 12px;
}
.simcard__handlewrap { position: relative; flex: 1; min-width: 0; display: flex; justify-content: center; }
.simcard__handle { font-size: 13px; font-weight: 700; color: #16181D; }
/* Badge AO VIVO grande, sobreposto, censurando o @ */
.simcard__live {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(18, 21, 28, 0.96);
  color: #fff; font-size: 11px; font-weight: 800;
  padding: 6px 14px; border-radius: 999px;
  font-family: 'Inter', sans-serif;
  letter-spacing: 0.05em;
  white-space: nowrap;
  min-width: 118px; justify-content: center;
}
.simcard__livedot {
  width: 7px; height: 7px; border-radius: 50%; background: #FF4D4D;
  animation: bavRec 1.5s ease-out infinite;
}
.simcard__head {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 12px;
  align-items: center;
  margin-bottom: 10px;
}
.simcard__avatar {
  width: 56px; height: 56px;
  border-radius: 50%;
  padding: 2px;
  background: var(--grad-ig);
  display: block;
}
.simcard__avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 2px solid #fff; display: block; }
.simcard__stats { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; }
.simcard__stat b { display: block; font-size: 15px; font-weight: 700; color: #16181D; font-variant-numeric: tabular-nums; line-height: 1.1; }
.simcard__stat span { font-size: 11px; color: #16181D; }
/* O número troca instantâneo no refresh (como no Instagram real) — sem zoom, sem fade. */
.simcard__name { font-size: 13px; font-weight: 700; color: #16181D; display: flex; align-items: center; gap: 4px; padding: 0 2px; }
.simcard__badge { flex-shrink: 0; display: block; }
.simcard__cat { font-size: 11px; color: #8A8A8A; padding: 0 2px; margin-top: 1px; }
.simcard__bio { font-size: 11px; color: #16181D; line-height: 1.4; padding: 2px 2px 0; }
.simcard__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 10px 0 12px; }
.simcard__btns--biz { grid-template-columns: 1fr 1fr auto; }
.simcard__btn {
  font-size: 12px; font-weight: 700; text-align: center;
  padding: 6px 0; border-radius: 8px;
  background: #EFEFEF; color: #16181D;
}
.simcard__btn--primary { background: #EFEFEF; }
.simcard__btn--ico { padding: 6px 10px; }

/* Área que "scrolla" — o conteúdo sobe e a borda IG aparece em cima (refresh) */
.simcard__scroll {
  flex: 1;
  position: relative;
  overflow: hidden;
}
/* Spinner de refresh — fica no TOPO do card (sob o conteúdo), aparece quando puxa */
.simcard__refresh {
  position: absolute;
  top: 8px; left: 0; right: 0;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transition: opacity .2s ease;
  z-index: 0;
  pointer-events: none;
}
.simcard__frame.is-pull .simcard__refresh { opacity: 1; }
.simcard__spin {
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 2.5px solid rgba(0,0,0,0.12);
  border-top-color: #16181D;
  animation: simSpin .7s linear infinite;
}
@keyframes simSpin { to { transform: rotate(360deg); } }
/* PULL-TO-REFRESH: o conteúdo INTEIRO do card (header + feed) desce junto,
   revelando o spinner no topo — exatamente como o Instagram real. */
.simcard__pull {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  transition: transform .32s var(--ease);
  background: #fff;            /* tampa o spinner quando em repouso */
  position: relative;
  z-index: 1;
}
.simcard__frame.is-pull .simcard__pull { transform: translateY(34px); }
.simcard__hl {
  display: flex; gap: 12px;
  padding: 8px 12px 10px;
  border-bottom: 1px solid #EFEFEF;
}
.simcard__hlitem {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  font-size: 9px; color: #16181D; flex-shrink: 0;
}
.simcard__hlring {
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  background: #fafafa;
  border: 1.5px solid #DBDBDB;
  overflow: hidden;
}
/* Capa de destaque com foto (como no Instagram real) — anel cinza + foto dentro */
.simcard__hlring--img {
  padding: 2px;
  background: #fff;
  border: 1.5px solid #DBDBDB;
}
/* Capa só com ícone (ex: halter em Treinos) */
.simcard__hlring--icon { background: #fafafa; border: 1.5px solid #DBDBDB; }
/* Capa só com texto (ex: Alunos) */
.simcard__hlring--txt {
  background: #fafafa; border: 1.5px solid #DBDBDB;
  font-size: 8.5px; font-weight: 700; color: #16181D;
  text-align: center; line-height: 1; padding: 4px;
}
.simcard__hlring--img img {
  width: 100%; height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.simcard__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  padding: 2px 0 0;
}
.simcard__grid img {
  width: 100%; aspect-ratio: 1; object-fit: cover; display: block;
  transform: scaleX(-1);            /* espelha pra disfarçar reuso da mesma foto */
  filter: brightness(0.82) saturate(0.95);  /* camada escura sutil */
}
.simcard__hlring--img img { transform: scaleX(-1); filter: brightness(0.85); }

@media (prefers-reduced-motion: reduce) {
  .simcard__spin { animation: none; }
}

/* === Antes / Depois — Heads de perfil IG completos === */
.ba-row {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  margin: 0 -16px;
  padding: 4px 16px 16px;
  scrollbar-width: none;
}
.ba-row::-webkit-scrollbar { display: none; }
.ba {
  flex: 0 0 320px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 14px;
  position: relative;
  box-shadow: var(--shadow-sm);
}

.ba__case {
  position: relative;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px 14px 14px;
}
.ba__case--after {
  border-color: rgba(43, 199, 106, 0.30);
  background:
    radial-gradient(80% 70% at 50% 0%, rgba(43, 199, 106, 0.06), transparent 70%),
    var(--bg);
  box-shadow: 0 0 0 1px rgba(43, 199, 106, 0.05), 0 6px 22px rgba(43, 199, 106, 0.08);
}
.ba__caselbl {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.16em;
  padding: 3px 8px;
  border-radius: 5px;
  z-index: 2;
}
.ba__caselbl--before {
  background: rgba(20, 24, 31, 0.05);
  border: 1px solid var(--border);
  color: var(--text-mute);
}
.ba__caselbl--after {
  background: var(--green);
  color: #04210E;
}

.ba__divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 6px 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange);
}
.ba__divider svg { color: var(--orange); }

/* IG profile head dentro do antes/depois */
.igphead { display: flex; flex-direction: column; gap: 10px; }
.igphead__top {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: center;
}
.igphead__pfp {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--orange), var(--pink));
  border: 2px solid var(--bg);
}
.igphead__pfp--glow {
  box-shadow:
    0 0 0 2px var(--green),
    0 0 18px rgba(43, 199, 106, 0.45);
}
.igphead__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  text-align: center;
}
.igphead__stat b {
  display: block;
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.igphead__stat span {
  display: block;
  font-size: 11px;
  color: var(--text-soft);
  margin-top: 1px;
}
.igphead__stat--hero b {
  font-size: 18px;
  color: var(--green);
}
.igphead__stat--hero span { color: var(--green); font-weight: 600; }
.igphead__name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 5px;
}
.igphead__verified {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}
.igphead__verified svg { width: 100%; height: 100%; display: block; }
.igphead__bio {
  font-size: 11.5px;
  color: var(--text-soft);
  line-height: 1.45;
}
.igphead__btnrow {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px;
  margin-top: 4px;
}
.igphead__btn {
  background: rgba(255, 247, 241, 0.06);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  padding: 7px 10px;
  border-radius: 8px;
  cursor: default;
  text-align: center;
  pointer-events: none;
}
.igphead__btn--icon {
  width: 32px;
  padding: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ba__delta {
  font-size: 12px;
  color: var(--green);
  font-weight: 700;
  text-align: center;
  background: rgba(43, 199, 106, 0.08);
  border: 1px solid rgba(43, 199, 106, 0.24);
  border-radius: 8px;
  padding: 8px 10px;
  margin-top: 12px;
}

/* === Marquee de comentários (duas fileiras opostas) === */
.cmtwall {
  margin: 32px -16px 0;
  padding: 22px 0;
  display: grid;
  gap: 14px;
  position: relative;
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
  background:
    radial-gradient(80% 100% at 50% 50%, rgba(255, 107, 53, 0.04), transparent 70%);
  overflow: hidden;
}
.cmtwall::before,
.cmtwall::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 60px;
  z-index: 2;
  pointer-events: none;
}
.cmtwall::before { left: 0; background: linear-gradient(90deg, var(--bg-alt), transparent); }
.cmtwall::after  { right: 0; background: linear-gradient(-90deg, var(--bg-alt), transparent); }

.marquee {
  overflow: hidden;
  position: relative;
}
.marquee__track {
  display: flex;
  gap: 10px;
  width: max-content;
  animation: mq 42s linear infinite;
}
.marquee--rtl .marquee__track {
  animation: mqRev 42s linear infinite;
}
@keyframes mq {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes mqRev {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}
.mcard {
  flex-shrink: 0;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 10px 16px;
  border-radius: 14px;
  width: 280px;
  letter-spacing: -0.005em;
  white-space: normal;
}
.mcard__user {
  color: var(--orange);
  font-weight: 800;
  font-size: 11.5px;
  letter-spacing: 0.01em;
}
.mcard__quote {
  color: var(--text-soft);
  font-size: 12.5px;
  line-height: 1.35;
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.mcard__quote b { color: var(--text); font-weight: 700; }
.mcard:hover { border-color: rgba(255, 107, 53, 0.35); }

@media (prefers-reduced-motion: reduce) {
  .marquee__track,
  .marquee--rtl .marquee__track { animation: none; }
}

/* === Hide-disabled (toggle pra reativar seções, ex: vídeos aguardando autorização) === */
.proof-sub.is-disabled { display: none !important; }

/* === Depoimentos em vídeo (cards de transformação — cliente Fênix) === */
.vidcards {
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: center;
}
.vidcard {
  width: 100%;
  max-width: 340px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow-md);
  padding: 14px;
}
.vidcard--wide { max-width: 460px; }     /* card da Carol (horizontal) é mais largo */

/* Cabeçalho do cliente */
.vidcard__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.vidcard__av {
  width: 42px; height: 42px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1.5px var(--border);
}
.vidcard__id { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.vidcard__name {
  font-size: 14px; font-weight: 700; color: var(--text);
  display: flex; align-items: center; gap: 5px;
}
.vidcard__seal {
  width: 15px; height: 15px; border-radius: 50%;
  background: #3897F0; color: #fff;
  font-size: 9px; font-weight: 900;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.vidcard__handle { font-size: 12px; color: var(--text-mute); }
.vidcard__tag {
  flex-shrink: 0;
  font-size: 10px; font-weight: 800; letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #fff;
  background: var(--grad-ig);
  padding: 4px 9px; border-radius: 999px;
}

/* Barra antes → depois */
.vidcard__ba {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: var(--bg-card-2);
  border-radius: 12px;
  padding: 9px 12px;
  margin-bottom: 12px;
}
.vidcard__ba-item { display: flex; flex-direction: column; align-items: center; line-height: 1.1; }
.vidcard__ba-item b { font-size: 17px; font-weight: 800; color: var(--text-mute); font-variant-numeric: tabular-nums; }
.vidcard__ba-item small { font-size: 10px; color: var(--text-mute); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 2px; }
.vidcard__ba-item--after b { color: var(--green); }
.vidcard__arrow { color: var(--orange); flex-shrink: 0; }

/* Player — sem borda/fundo preto, só o vídeo no tamanho certo */
.vidembed { width: 100%; }
.vidembed__frame {
  position: relative;
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  background: transparent;
}
.vidembed__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.vidembed--wide .vidembed__frame { aspect-ratio: 16 / 9; }
.vidembed--tall { max-width: 230px; margin: 0 auto; }
.vidembed--tall .vidembed__frame { aspect-ratio: 9 / 16; }

@media (min-width: 640px) {
  .vidcards { flex-direction: row; flex-wrap: wrap; align-items: stretch; justify-content: center; }
  .vidcard { max-width: 240px; }
  .vidcard--wide { max-width: 100%; flex-basis: 100%; }
  .vidcard--wide .vidembed--wide { max-width: 460px; margin: 0 auto; }
}

/* === Comentários (estilo IG) === */
.cmtlist {
  display: grid;
  gap: 14px;
}
.cmt {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 12px;
  align-items: flex-start;
}
.cmt__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: #FFF;
  font-size: 14px;
}
.cmt__avatar--img {
  object-fit: cover;
  background: var(--bg-card-2);
}
.cmt__head {
  font-size: 13px;
  margin-bottom: 2px;
}
.cmt__head b { color: var(--text); font-weight: 700; }
.cmt__time {
  color: var(--text-mute);
  font-size: 11px;
  margin-left: 6px;
  font-weight: 500;
}
.cmt__text {
  font-size: 14px;
  color: var(--text-soft);
  line-height: 1.45;
}
.cmt__text b { color: var(--text); font-weight: 700; }
.cmt__actions {
  display: flex;
  gap: 14px;
  margin-top: 6px;
  font-size: 11px;
  color: var(--text-mute);
  font-weight: 600;
  letter-spacing: 0.02em;
  align-items: center;
}
.cmt__like, .cmt__reply {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--text-mute);
  cursor: pointer;
  transition: color .15s;
}
.cmt__like:hover { color: var(--pink); }
.cmt__reply:hover { color: var(--orange); }
.cmt--user .cmt__head b { color: var(--orange); }

/* === REPLIES === */
.cmt__replies {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
}
/* Linha vertical sutil à esquerda dos replies (estilo IG) */
.cmt__replies::before {
  content: '';
  position: absolute;
  left: 13px;
  top: 0;
  bottom: 8px;
  width: 1.5px;
  background: linear-gradient(180deg, var(--border) 0%, transparent 100%);
}
.cmt--reply {
  grid-template-columns: 28px 1fr;
  gap: 10px;
  padding-left: 30px;
  position: relative;
}
.cmt--reply .cmt__avatar {
  width: 28px;
  height: 28px;
  font-size: 11px;
}
.cmt--reply .cmt__head { font-size: 12.5px; }
.cmt--reply .cmt__text { font-size: 13px; }
/* Avatar da equipe oficial */
.cmt__avatar--team {
  background: linear-gradient(135deg, var(--orange), var(--orange-2));
  color: #fff;
  box-shadow: 0 2px 6px rgba(255, 107, 53, 0.34);
}
.cmt__verified {
  color: #1F8FE0;
  font-size: 10px;
  vertical-align: 2px;
  margin-left: 2px;
}

/* === FORM DE RESPOSTA INLINE === */
.cmt-reply {
  margin-top: 10px;
  padding: 10px;
  background: var(--bg-card-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  animation: cmtReplyIn .25s cubic-bezier(.22,.61,.36,1);
}
@keyframes cmtReplyIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.cmt-reply__input {
  width: 100%;
  background: transparent;
  border: 0;
  outline: 0;
  font: inherit;
  font-size: 13.5px;
  color: var(--text);
  resize: none;
  min-height: 36px;
  line-height: 1.4;
}
.cmt-reply__input::placeholder { color: var(--text-mute); }
.cmt-reply__row {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.cmt-reply__cancel, .cmt-reply__submit {
  font-size: 12px;
  font-weight: 700;
  padding: 7px 13px;
  border-radius: 8px;
  border: 0;
  cursor: pointer;
  transition: all .14s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.cmt-reply__cancel {
  background: transparent;
  color: var(--text-mute);
}
.cmt-reply__cancel:hover { color: var(--text); }
.cmt-reply__submit {
  background: linear-gradient(135deg, var(--orange), var(--orange-2));
  color: #fff;
  box-shadow: 0 4px 12px rgba(255, 107, 53, 0.26);
}
.cmt-reply__submit:hover { filter: brightness(1.06); transform: translateY(-1px); }
.cmt-reply__error {
  display: none;
  margin-top: 4px;
  padding: 10px 12px;
  background: linear-gradient(135deg, rgba(255, 77, 77, 0.12), rgba(255, 77, 77, 0.04));
  border: 1px solid rgba(255, 77, 77, 0.42);
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.4;
  color: #B42318;
}
.cmt-reply__error-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.cmt-reply__error-row svg { color: #E5484D; flex-shrink: 0; margin-top: 2px; }
.cmt-reply__error-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 8px;
  padding: 5px 10px;
  background: rgba(255, 77, 77, 0.10);
  border: 1px solid rgba(255, 77, 77, 0.45);
  color: #B42318;
  border-radius: 7px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: all .15s;
}
.cmt-reply__error-btn:hover {
  background: var(--red);
  color: #fff;
  transform: translateX(2px);
}
.cmt-reply__error.is-visible {
  display: block;
  animation: cmtReplyIn .25s cubic-bezier(.22,.61,.36,1);
}
.cmt--user .cmt__time { color: var(--orange); }

/* === Perguntas e respostas === */
.qa {
  display: grid;
  gap: 22px;
  margin-bottom: 26px;
}
.qa__item {
  display: grid;
  gap: 8px;
}
.qa__q, .qa__a {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 10px;
  align-items: flex-start;
}
.qa__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: #FFF;
  font-size: 13px;
  flex-shrink: 0;
}
.qa__avatar--img {
  object-fit: cover;
  background: var(--bg-card-2);
}
.qa__teamavatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--orange), #FF7C45);
  color: #FFF;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 0 0 2px rgba(255, 107, 53, 0.18);
  position: relative;
}
.qa__teamavatar::after {
  content: "";
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--green);
  border: 2px solid var(--bg);
}
.qa__bubble {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
}
.qa__bubble--team {
  background: rgba(255, 107, 53, 0.06);
  border-color: rgba(255, 107, 53, 0.30);
}
.qa__a {
  margin-left: 22px;
}
.qa__head {
  font-size: 12px;
  margin-bottom: 4px;
}
.qa__head b { color: var(--text); font-weight: 700; }
.qa__bubble--team .qa__head b { color: var(--orange); }
.qa__time {
  color: var(--text-mute);
  font-size: 11px;
  margin-left: 6px;
  font-weight: 500;
}
.qa__bubble--team .qa__time {
  color: var(--orange);
  font-weight: 600;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.qa__text {
  font-size: 13.5px;
  color: var(--text-soft);
  line-height: 1.5;
}
.qa__text b { color: var(--text); font-weight: 700; }

.qa-form {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  margin-top: 8px;
}
.qa-form__label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 10px;
  color: var(--text);
}
.qa-form__row {
  display: flex;
  gap: 10px;
  align-items: stretch;
}
.qa-form__input {
  flex: 1;
  font: inherit;
  font-size: 14px;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  resize: none;
  min-height: 48px;
  max-height: 140px;
  line-height: 1.45;
  outline: none;
  transition: border-color 0.18s var(--ease);
}
.qa-form__input::placeholder { color: var(--text-mute); }
.qa-form__input:focus {
  border-color: var(--orange);
  box-shadow: 0 0 0 4px rgba(255, 107, 53, 0.14);
}
.qa-form__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, var(--orange), #FF7C45);
  color: #FFF;
  font-weight: 700;
  font-size: 13px;
  padding: 0 16px;
  border-radius: 10px;
  white-space: nowrap;
  transition: transform 0.14s var(--ease), filter 0.14s var(--ease);
  min-height: 48px;
}
.qa-form__btn:hover { filter: brightness(1.06); }
.qa-form__btn:active { transform: scale(0.98); }
.qa-form__hint {
  font-size: 11px;
  color: var(--text-mute);
  margin-top: 10px;
  line-height: 1.4;
}
.qa-form__error {
  display: none;
  margin-top: 10px;
  padding: 12px 14px;
  background: linear-gradient(135deg, rgba(255, 77, 77, 0.12), rgba(255, 77, 77, 0.04));
  border: 1px solid rgba(255, 77, 77, 0.42);
  border-radius: 10px;
  font-size: 12.5px;
  line-height: 1.45;
  color: #B42318;
  box-shadow: 0 4px 18px rgba(255, 77, 77, 0.10);
}
.qa-form__error-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.qa-form__error-row svg { color: #E5484D; flex-shrink: 0; margin-top: 2px; }
.qa-form__error-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 9px;
  padding: 6px 11px;
  background: rgba(255, 77, 77, 0.10);
  border: 1px solid rgba(255, 77, 77, 0.45);
  color: #B42318;
  border-radius: 7px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: all .15s;
}
.qa-form__error-btn:hover {
  background: var(--red);
  color: #fff;
  transform: translateX(2px);
}
.qa-form__error-btn svg { color: currentColor; }
.qa-form__error.is-visible {
  display: block;
  animation: qaErrIn .3s cubic-bezier(.22,.61,.36,1);
}
@keyframes qaErrIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* responsive — keep these subsections single-column on mobile, grid on desktop */
@media (min-width: 640px) {
  .ba-row { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; }
  .ba { flex: 1 1 calc(50% - 7px); min-width: 0; }
  .vidrow { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; }
  .vid { flex: 0 0 calc(33.333% - 8px); }
}
@media (min-width: 960px) {
  .ba { flex: 1 1 calc(33.333% - 10px); }
  .vid { flex: 0 0 calc(20% - 10px); }
}

/* ============== ANALYSIS OVERLAY (scanner mode — Instagram gradient) ============== */
:root {
  --scan-cyan: #DD2A7B;     /* IG magenta (was TikTok-ish cyan) */
  --scan-violet: #A874FF;   /* IG purple family */
  --scan-bg: #140A1E;       /* deep purple-black so glows read Instagram */
  --scan-bg-2: #1B0F2A;
  --scan-grid: rgba(221, 42, 123, 0.06);
}

body[data-finder-state="analysis"] { overflow: hidden; }
body[data-finder-state="analysis"] .finder { display: none; }

.analysis {
  position: fixed;
  inset: 0;
  z-index: 100;
  background:
    radial-gradient(60% 50% at 50% 0%, rgba(221, 42, 123, 0.12), transparent 60%),
    radial-gradient(50% 40% at 80% 70%, rgba(168, 116, 255, 0.10), transparent 60%),
    var(--scan-bg);
  display: none;
  flex-direction: column;
  overflow-y: auto;
  padding: 16px;
  font-family: 'Inter', sans-serif;
}
body[data-finder-state="analysis"] .analysis {
  display: flex;
  animation: analysisFadeIn 0.35s var(--ease);
}
@keyframes analysisFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* subtle scanline overlay */
.analysis__scanlines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(221, 42, 123, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(221, 42, 123, 0.025) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
}
.analysis__scanlines::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent, rgba(221, 42, 123, 0.06), transparent);
  background-size: 100% 12px;
  animation: scanSweep 4s linear infinite;
  opacity: 0.6;
}
@keyframes scanSweep {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(100vh); }
}

.analysis__back {
  position: absolute;
  top: 14px;
  left: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.75);
  font-size: 13px;
  font-weight: 500;
  z-index: 5;
  transition: border-color 0.2s, color 0.2s;
}
.analysis__back:hover {
  border-color: rgba(221, 42, 123, 0.45);
  color: #FFF;
}

.analysis__inner {
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  padding: 60px 4px 40px;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* === platform logo with rotating rings === */
.analysis__platform {
  position: relative;
  width: 140px;
  height: 140px;
  margin-bottom: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.analysis__rings {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.analysis__ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(221, 42, 123, 0.25);
  animation: ringPulse 3.2s ease-in-out infinite;
}
.analysis__ring--1 { inset: 0; }
.analysis__ring--2 { inset: 14px; border-color: rgba(168, 116, 255, 0.22); animation-delay: -1.1s; }
.analysis__ring--3 { inset: 30px; border-color: rgba(221, 42, 123, 0.30); animation-delay: -2.1s; border-style: dashed; }
@keyframes ringPulse {
  0%, 100% { transform: scale(1); opacity: 0.6; }
  50% { transform: scale(1.06); opacity: 1; }
}

.analysis__sweep {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    transparent 230deg,
    rgba(221, 42, 123, 0.45) 320deg,
    rgba(221, 42, 123, 0) 360deg
  );
  animation: sweepRotate 2.4s linear infinite;
  filter: blur(1px);
}
@keyframes sweepRotate {
  to { transform: rotate(360deg); }
}

.analysis__pip {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--scan-cyan);
  box-shadow: 0 0 10px var(--scan-cyan);
  animation: pipBlink 1.8s ease-in-out infinite;
}
.analysis__pip--1 { top: 26%; left: 18%; animation-delay: 0s; }
.analysis__pip--2 { bottom: 22%; right: 22%; background: var(--scan-violet); box-shadow: 0 0 10px var(--scan-violet); animation-delay: -0.6s; }
.analysis__pip--3 { top: 60%; left: 12%; animation-delay: -1.2s; }
@keyframes pipBlink {
  0%, 100% { opacity: 0.3; transform: scale(0.7); }
  50% { opacity: 1; transform: scale(1.2); }
}

.analysis__logo {
  position: relative;
  width: 76px;
  height: 76px;
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(221, 42, 123, 0.16), rgba(168, 116, 255, 0.16));
  border: 1px solid rgba(221, 42, 123, 0.40);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--scan-cyan);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.4),
    inset 0 0 20px rgba(221, 42, 123, 0.08),
    0 0 30px rgba(221, 42, 123, 0.18);
  z-index: 1;
}

/* === handle display (mono, big) === */
.analysis__handle {
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, monospace;
  font-size: 28px;
  font-weight: 700;
  color: #FFF;
  letter-spacing: -0.02em;
  margin-bottom: 4px;
  word-break: break-all;
  max-width: 100%;
}
.analysis__at {
  color: var(--scan-cyan);
  margin-right: 1px;
}
.analysis__platformlbl {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.55);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: 32px;
}
.analysis__platformdot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--scan-cyan);
  box-shadow: 0 0 0 4px rgba(221, 42, 123, 0.14);
  animation: pulse 1.6s ease-in-out infinite;
}

/* === step cards === */
.analysis__steps {
  width: 100%;
  display: grid;
  gap: 10px;
  margin-bottom: 16px;
}

.astep {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(14, 21, 32, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  text-align: left;
  overflow: hidden;
  transform-origin: top center;
  animation: stepEnter 0.45s var(--ease);
}
@keyframes stepEnter {
  from { opacity: 0; transform: translateY(-8px) scale(0.98); max-height: 0; padding-top: 0; padding-bottom: 0; }
  to   { opacity: 1; transform: translateY(0) scale(1); max-height: 120px; padding-top: 14px; padding-bottom: 14px; }
}

.astep__iconwrap {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: background 0.3s, color 0.3s, border-color 0.3s;
}
.astep__icon { position: relative; z-index: 1; }
.astep__spinner {
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: var(--scan-cyan);
  border-right-color: var(--scan-cyan);
  opacity: 0;
  animation: spin 0.9s linear infinite;
}

.astep__body { min-width: 0; }
.astep__label {
  font-size: 14px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.95);
  letter-spacing: -0.01em;
  margin-bottom: 2px;
}
.astep__sub {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.4;
}

/* active state */
.astep[data-state="active"] {
  background: rgba(221, 42, 123, 0.06);
  border-color: rgba(221, 42, 123, 0.40);
  box-shadow: 0 0 0 4px rgba(221, 42, 123, 0.08), 0 6px 18px rgba(221, 42, 123, 0.10);
}
.astep[data-state="active"] .astep__iconwrap {
  background: rgba(221, 42, 123, 0.14);
  color: var(--scan-cyan);
  border-color: rgba(221, 42, 123, 0.50);
}
.astep[data-state="active"] .astep__spinner { opacity: 1; }
.astep[data-state="active"] .astep__label { color: #FFF; }

/* done state */
.astep[data-state="done"] {
  border-color: rgba(43, 199, 106, 0.30);
}
.astep[data-state="done"] .astep__iconwrap {
  background: rgba(43, 199, 106, 0.14);
  color: var(--green);
  border-color: rgba(43, 199, 106, 0.45);
  animation: pop 0.42s var(--ease);
}
@keyframes pop {
  0%   { transform: scale(0.8); }
  55%  { transform: scale(1.18); }
  100% { transform: scale(1); }
}
.astep[data-state="done"] .astep__sub { opacity: 0.7; }

/* === patience banner === */
.analysis__patience {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: linear-gradient(90deg, rgba(221, 42, 123, 0.06), rgba(168, 116, 255, 0.06));
  border: 1px solid rgba(221, 42, 123, 0.18);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.45;
  margin-top: 4px;
  width: 100%;
  text-align: left;
  animation: stepEnter 0.4s var(--ease);
}
.analysis__patience b { color: #FFF; }
.analysis__patience-spin {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(221, 42, 123, 0.20);
  border-top-color: var(--scan-cyan);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}

/* === preview card (1.1s before transition) === */
.analysis__preview {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 14px;
  animation: previewEnter 0.5s var(--ease);
}
@keyframes previewEnter {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.analysis__previewlabel {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: center;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(43, 199, 106, 0.10);
  border: 1px solid rgba(43, 199, 106, 0.30);
  color: var(--green);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.analysis__previewcard {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 18px 18px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(221, 42, 123, 0.05), rgba(14, 21, 32, 0.9));
  border: 1px solid rgba(221, 42, 123, 0.30);
}
.analysis__previewavatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  font-weight: 800;
  color: #FFF;
  background: linear-gradient(135deg, var(--scan-cyan), var(--scan-violet));
  border: 2px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 0 0 2px var(--scan-cyan);
  overflow: hidden;
  flex-shrink: 0;
}
.analysis__previewavatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.analysis__previewinfo { text-align: left; min-width: 0; }
.analysis__previewname {
  font-size: 16px;
  font-weight: 700;
  color: #FFF;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.analysis__previewhandle {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12px;
  color: var(--scan-cyan);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.analysis__previewbadge {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(221, 42, 123, 0.14);
  border: 1px solid rgba(221, 42, 123, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--scan-cyan);
}
.analysis__previewmsg {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.02em;
  text-align: center;
}

/* error toast */
.analysis__error {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 200;
  padding: 14px 18px;
  border-radius: 12px;
  background: rgba(255, 77, 77, 0.14);
  border: 1px solid rgba(255, 77, 77, 0.35);
  color: #FFC4C4;
  font-size: 14px;
  max-width: 360px;
  text-align: center;
  animation: stepEnter 0.4s var(--ease);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .viral-toggle__bg,
  .topbar__dot,
  .finder__stepdot,
  .igprofile__livedot,
  .phone__glow--alive,
  .sk,
  .analysis__sweep,
  .analysis__ring,
  .analysis__pip,
  .analysis__platformdot,
  .analysis__scanlines::after { animation: none; }
  html { scroll-behavior: auto; }
}

/* ====================================================================
   ============== CLAYMORPHISM V2 — bloco de overrides ===============
   (carrega por último; só afeta o visual da home)
   ==================================================================== */

/* ---- FINDER: o cartão central de massinha ---- */
.finder {
  background: var(--clay-surface) !important;
  border: none !important;
  border-radius: var(--clay-radius) !important;
  box-shadow: var(--clay-shadow) !important;
  backdrop-filter: none !important;
}
.finder::before, .finder::after { display: none !important; } /* remove a borda rotativa neon da V1 */

/* Pílula do passo (Passo 1 de 3) vira tag de massinha */
.finder__step {
  background: var(--clay-surface-2) !important;
  border: none !important;
  border-radius: var(--clay-radius-pill) !important;
  box-shadow: var(--clay-shadow-sm) !important;
  color: var(--purple) !important;
}
.finder__stepdot { background: var(--clay-purple) !important; box-shadow: none !important; }

/* ---- NETCARDS (Instagram / Facebook) = botões de massinha ---- */
.netcard {
  background: var(--clay-surface) !important;
  border: none !important;
  border-radius: var(--clay-radius-sm) !important;
  box-shadow: var(--clay-shadow-sm) !important;
  transition: transform .16s var(--ease), box-shadow .16s var(--ease) !important;
}
.netcard:hover { transform: translateY(-3px) !important; box-shadow: var(--clay-shadow) !important; }
.netcard:active { transform: translateY(1px) scale(0.99) !important; box-shadow: var(--clay-shadow-pressed) !important; }
.netcard::before { display: none !important; }
/* Ícone da rede ganha "base" de massinha arredondada */
.netcard__icon {
  border-radius: 14px !important;
  box-shadow: 0 6px 12px -4px rgba(90,100,120,.35), inset 0 2px 3px rgba(255,255,255,.8) !important;
}
/* Seta vira bolinha de massinha */
.netcard__arrow {
  background: var(--clay-surface-2) !important;
  border-radius: 50% !important;
  box-shadow: var(--clay-shadow-sm) !important;
  color: var(--purple) !important;
}

/* ---- INPUT do @ = campo "afundado" na massinha (inset) ---- */
.finder__inputwrap {
  background: var(--clay-surface-2) !important;
  border: none !important;
  border-radius: var(--clay-radius-pill) !important;
  box-shadow: var(--clay-shadow-pressed) !important;
}
.finder__inputwrap:focus-within {
  box-shadow: var(--clay-shadow-pressed), 0 0 0 3px rgba(185,163,232,.45) !important;
}
.finder__input { background: transparent !important; }

/* "netchosen" (pílula da rede escolhida) */
.netchosen {
  background: var(--clay-surface-2) !important;
  border: none !important;
  border-radius: var(--clay-radius-pill) !important;
  box-shadow: var(--clay-shadow-sm) !important;
}

/* ---- Ribbon do pacote + badge de avaliações → mantêm clay (oferta + prova social,
   o badge "12.847 avaliações" você pediu pra manter nesse formato) ---- */
body.clay .pack__ribbon, body.clay .stars {
  border-radius: var(--clay-radius-pill) !important;
  box-shadow: var(--clay-shadow-sm) !important;
  border: none !important;
}
/* ---- Selos de SEGURANÇA (sem senha / sem login) → flat sóbrio (transmitem confiança) ---- */
body.clay .trust-pill {
  border-radius: var(--clay-radius-pill) !important;
  box-shadow: var(--clay-shadow-flat) !important;
  border: var(--clay-border-flat) !important;
}

/* ---- Botões secundários (CTA não-primário) — SÓ na LP.
   Escopado em body.clay para NÃO vazar no checkout: lá os botões
   "copiar código" e "Nubank" usam .cta (sem .cta--primary) e ficavam
   brancos (fundo branco + texto branco = invisível). ---- */
body.clay .cta:not(.cta--primary) {
  border-radius: var(--clay-radius-pill) !important;
  box-shadow: var(--clay-shadow-sm) !important;
  background: var(--clay-surface) !important;
  border: none !important;
}

/* ---- Topbar vira faixa de massinha ---- */
.topbar {
  background: var(--clay-surface) !important;
  border: none !important;
  box-shadow: var(--clay-shadow-sm) !important;
  border-radius: 0 0 var(--clay-radius-sm) var(--clay-radius-sm) !important;
}

/* ---- Eyebrows (rótulos de seção) viram tags de massinha ---- */
.eyebrow {
  display: inline-block;
  background: var(--clay-surface) !important;
  border-radius: var(--clay-radius-pill) !important;
  box-shadow: var(--clay-shadow-sm) !important;
  padding: 6px 14px !important;
  border: none !important;
}

/* ---- Hover dos cards principais: leve "respiro" da massinha ---- */
.pack, .tcard, .vidcard, .ba {
  transition: transform .18s var(--ease), box-shadow .18s var(--ease) !important;
}
@media (hover:hover){
  .pack:hover, .vidcard:hover { transform: translateY(-4px) !important; }
}

/* ---- Ícones 3D (emoji) — base reutilizável ---- */
.clay-emoji {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  filter: drop-shadow(0 4px 6px rgba(90,100,120,.35));
}

/* ---- Selo "MAIS RECOMENDADO" → dourado clay (único uso do dourado) ---- */
.pack-hero__ribbon, .pack__ribbon--gold {
  background: linear-gradient(180deg, #FFD062 0%, var(--clay-gold) 100%) !important;
  color: #5A3D00 !important;
  box-shadow:
    0 8px 16px -6px rgba(245, 182, 32, 0.6),
    inset 0 2px 4px rgba(255, 255, 255, 0.6),
    inset 0 -3px 6px rgba(160, 110, 0, 0.35) !important;
  border: none !important;
}
/* Card recomendado ganha um aro laranja sutil (cor da marca) */
.pack-hero__inner {
  box-shadow:
    0 22px 40px -14px rgba(255, 107, 53, 0.4),
    inset 0 5px 8px rgba(255, 255, 255, 1),
    inset 0 -10px 18px rgba(150, 158, 180, 0.3),
    0 0 0 2.5px rgba(255, 107, 53, 0.45) !important;
}

/* Tipografia arredondada nos títulos pra reforçar o clay */
.hero__title, .section__title, .proof-sub__title, .pack-hero__name,
.guarantee__title, .finalcta__title { font-family: 'Poppins','Inter',sans-serif !important; letter-spacing: -0.02em; }

/* Ícones 3D sociais (emoji) — base "inflada" clay */
.clay3d {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 26px; line-height: 1;
  filter: drop-shadow(0 5px 7px rgba(90,100,120,.32));
}
.clay3d--lg { font-size: 40px; }

/* ---- Pilares da solução: base de massinha redonda segurando o emoji 3D ---- */
.pillar__icon {
  width: 72px !important; height: 72px !important;
  border-radius: 50% !important;
  background: var(--clay-surface) !important;
  box-shadow: var(--clay-shadow-sm) !important;
  display: flex !important; align-items: center; justify-content: center;
  margin: 0 auto 14px !important;
}
.pillar { text-align: center; }

/* ---- Comentários deslizantes (marquee) → mini-cards de massinha ---- */
.mcard {
  background: var(--clay-surface) !important;
  border: none !important;
  border-radius: var(--clay-radius-sm) !important;
  box-shadow: var(--clay-shadow-sm) !important;
}
.mcard:hover { box-shadow: var(--clay-shadow) !important; }
/* Fade das bordas do marquee casando com o fundo off-white limpo */
.cmtwall::before { background: linear-gradient(90deg, var(--clay-bg), transparent) !important; }
.cmtwall::after  { background: linear-gradient(-90deg, var(--clay-bg), transparent) !important; }

/* ====================================================================
   ============== DESCONTO EM DESTAQUE (V2) ==========================
   ==================================================================== */
/* "De R$X" riscado em VERMELHO pra amplificar a sensação de oferta */
.pack__from, .pack-hero__from {
  color: #C0392B !important;
  text-decoration: line-through !important;
  text-decoration-thickness: 2px !important;
  opacity: 0.85;
}
/* Selo de % — adesivo clay laranja, maior e mais saliente */
.pack__off, .pack-hero__off {
  background: linear-gradient(180deg, #FF8559, var(--orange)) !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  box-shadow:
    0 6px 12px -4px rgba(255,107,53,.6),
    inset 0 2px 3px rgba(255,255,255,.5),
    inset 0 -3px 5px rgba(180,60,20,.35) !important;
}
/* "economize R$X" — faixa verde de massinha, reforço do ganho */
.pack__save, .pack-hero__save {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(180deg, #2ECC71, var(--green));
  padding: 4px 12px;
  border-radius: var(--clay-radius-pill);
  margin: 6px auto 0;
  box-shadow:
    0 6px 12px -4px rgba(22,163,74,.5),
    inset 0 2px 3px rgba(255,255,255,.45),
    inset 0 -3px 5px rgba(15,100,45,.35);
}
.pack-hero__save { font-size: 13.5px; }
/* Centraliza o bloco de preço pra "economize" ficar alinhado */
.pack__price, .pack-hero__price { display: flex; align-items: baseline; gap: 2px; }

/* ====================================================================
   ===== HISTÓRIAS REAIS — perfil + prova integrada (v2 reformulada) ==
   Ordem do caso: ANTES → selo pacote → PROVA (feedback) → DEPOIS
   (revelado depois, com glow/contador) → VANTAGENS. "Match score" alto:
   mesma pessoa no perfil e na prova.
   ==================================================================== */
.proof-cases { display: flex; flex-direction: column; gap: 22px; margin-top: 8px; }

.proof-group__lbl {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-mute); margin: 14px 0 -6px;
}
.proof-group__lbl::after { content: ""; flex: 1; height: 1px; background: var(--border); opacity: .7; }
.proof-group__lbl:first-child { margin-top: 0; }

.proof-cases .ba { flex: none; width: 100%; scroll-snap-align: none; margin: 0; gap: 0; }
.proof-cases .ba > * + * { margin-top: 12px; }

/* Selo "Adquiriu o pacote X" */
.ba__pack {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 12.5px; font-weight: 700; color: #8a4b12;
  background: linear-gradient(180deg, #FFF4E6, #FFE9CF);
  border: 1px solid rgba(255,107,53,.28);
  border-radius: 999px; padding: 7px 12px;
}
.ba__pack b { color: var(--orange); font-weight: 900; }
.ba__pack svg { color: var(--orange); flex-shrink: 0; }

/* Bloco da prova */
.ba__prooflbl {
  display: flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-mute); margin-bottom: 8px;
}
.ba__prooflbl svg, .ba__prooflbl .ba__pulse { color: var(--orange); flex-shrink: 0; }
.ba__pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--green); animation: bapulse 1.8s infinite; }
@keyframes bapulse { 0%{box-shadow:0 0 0 0 rgba(43,199,106,.5)} 70%{box-shadow:0 0 0 7px rgba(43,199,106,0)} 100%{box-shadow:0 0 0 0 rgba(43,199,106,0)} }

/* ---- REVEAL do DEPOIS (aparece após a prova, com efeito) ---- */
.js-reveal .ba .ba__reveal { opacity: 0; transform: translateY(18px); transition: opacity .55s var(--ease), transform .55s var(--ease); }
.js-reveal .ba.is-revealed .ba__reveal { opacity: 1; transform: none; }

.ba__resultbadge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10.5px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase;
  color: #fff; background: linear-gradient(180deg, #2ECC71, var(--green));
  padding: 4px 12px; border-radius: 999px; margin: 0 auto 10px;
  box-shadow: 0 6px 14px -5px rgba(22,163,74,.55), inset 0 1px 2px rgba(255,255,255,.4);
}
.ba__reveal .ba__case--after { box-shadow: 0 0 0 1px rgba(43,199,106,.18), 0 14px 34px -14px rgba(43,199,106,.35); }
.ba__pctbadge {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  font-size: 13px; font-weight: 900; color: #fff; white-space: nowrap;
  background: linear-gradient(180deg, #FF8559, var(--orange));
  padding: 5px 14px; border-radius: 999px;
  box-shadow: 0 8px 18px -6px rgba(255,107,53,.6), inset 0 1px 2px rgba(255,255,255,.5);
}

/* ---- VANTAGENS (o que mudou na vida deles) ---- */
.ba__wins {
  background: linear-gradient(165deg, rgba(255,107,53,.06), rgba(43,199,106,.06));
  border: 1px solid rgba(255,107,53,.16);
  border-radius: 16px; padding: 14px 14px 12px;
}
.ba__wins-h {
  font-size: 12.5px; font-weight: 800; color: var(--text); margin-bottom: 10px;
  display: flex; align-items: center; gap: 7px;
}
.ba__wins-h .ba__sparkle { font-size: 15px; }
.ba__wins ul { list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: 2px; }
.ba__wins ul::before {
  content: ""; position: absolute; left: 15px; top: 16px; bottom: 16px; width: 2px;
  background: linear-gradient(180deg, var(--green), rgba(43,199,106,.12));
}
.ba__wins li {
  position: relative; display: flex; align-items: center; gap: 12px; padding: 7px 0;
  font-size: 13.5px; font-weight: 600; color: var(--text); line-height: 1.3;
}
.ba__wins li > div { flex: 1; min-width: 0; }
.ba__wins li b { font-weight: 800; color: var(--text); }
.ba__winck {
  position: relative; z-index: 1; width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(180deg, #2ECC71, var(--green)); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 900; line-height: 1;
  box-shadow: 0 4px 10px -3px rgba(22,163,74,.5);
}

/* ====================================================================
   ===== VÍDEO — facade (capa) + marca d'água (resolve borda preta) ===
   ==================================================================== */
.vidembed { width: 100%; position: relative; }
.vidembed--tall { max-width: 248px; margin: 0 auto; }
.vidembed--wide { max-width: 460px; margin: 0 auto; }
.vidembed__frame {
  position: relative; width: 100%; border-radius: 16px; overflow: hidden;
  background: #150f1e; aspect-ratio: 9 / 16;
}
.vidembed--wide .vidembed__frame { aspect-ratio: 16 / 9; }
.vidembed__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Marca d'água (sempre por cima, sem bloquear o player) */
.vidembed__wm {
  position: absolute; top: 9px; right: 9px; z-index: 4; pointer-events: none;
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 800; color: #fff; letter-spacing: .01em;
  background: rgba(10,8,14,.42); backdrop-filter: blur(3px);
  padding: 4px 9px; border-radius: 999px; box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.vidembed__wm span { font-size: 11px; }

/* Capa clicável (mostra rosto + play; carrega o iframe só no clique) */
.vidfacade {
  position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0;
  cursor: pointer; display: block; background: #150f1e; overflow: hidden;
}
.vidfacade__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.6) saturate(1.05); transform: scale(1.04); }
.vidfacade__grad { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.08) 30%, rgba(0,0,0,.6)); }
.vidfacade__play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 64px; height: 64px; border-radius: 50%; background: rgba(255,255,255,.94);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 28px rgba(0,0,0,.4); transition: transform .18s var(--ease);
}
.vidfacade__play svg { color: var(--orange); margin-left: 4px; }
.vidfacade:hover .vidfacade__play, .vidfacade:focus-visible .vidfacade__play { transform: translate(-50%,-50%) scale(1.08); }
.vidfacade__label {
  position: absolute; left: 12px; bottom: 12px; color: #fff; font-size: 12px; font-weight: 700;
  display: flex; align-items: center; gap: 6px; text-shadow: 0 1px 5px rgba(0,0,0,.7);
}
.vidfacade__rec { width: 8px; height: 8px; border-radius: 50%; background: #ff4848; animation: bapulse 1.6s infinite; }

/* ====================================================================
   ===== WHATSAPP — caixa fiel (NOSSA visão: foto+nome do cliente) ====
   ==================================================================== */
.wachat {
  max-width: 360px; margin: 0 auto; border-radius: 16px; overflow: hidden;
  border: 1px solid rgba(0,0,0,.10);
  box-shadow: 0 12px 28px -12px rgba(0,0,0,.35);
  font-family: 'Inter', system-ui, sans-serif;
}
.wachat__hd {
  display: flex; align-items: center; gap: 9px;
  background: #075E54; color: #fff; padding: 8px 11px;
}
.wachat__back { opacity: .92; flex-shrink: 0; }
.wachat__hdav { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 1px solid rgba(255,255,255,.35); }
.wachat__hdinfo { flex: 1; min-width: 0; line-height: 1.18; }
.wachat__hdname { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wachat__hdsub { font-size: 11px; opacity: .85; }
.wachat__hdicons { display: flex; gap: 17px; opacity: .92; flex-shrink: 0; }
.wachat__body {
  background-color: #EFE7DE;
  background-image:
    radial-gradient(rgba(120,110,95,.10) 1px, transparent 1.4px),
    radial-gradient(rgba(120,110,95,.07) 1px, transparent 1.4px);
  background-size: 22px 22px, 22px 22px;
  background-position: 0 0, 11px 11px;
  padding: 12px 9px 8px; display: flex; flex-direction: column; gap: 5px;
}
.wachat__date {
  align-self: center; background: rgba(255,255,255,.92); color: #54656F;
  font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 3px 11px; border-radius: 8px; margin-bottom: 5px; box-shadow: 0 1px 1px rgba(0,0,0,.06);
}
.wachat__b {
  position: relative; display: flow-root; max-width: 82%; padding: 6px 9px 5px;
  font-size: 13px; line-height: 1.4; color: #111B21; border-radius: 8px;
  box-shadow: 0 1px .8px rgba(0,0,0,.16);
}
.wachat__b--in  { background: #fff;    align-self: flex-start; border-top-left-radius: 0; }
.wachat__b--out { background: #D9FDD3; align-self: flex-end;   border-top-right-radius: 0; }
/* Rabicho (tail) limpo no canto superior */
.wachat__b--in::before {
  content: ""; position: absolute; top: 0; left: -6px;
  border-top: 7px solid #fff; border-left: 6px solid transparent;
}
.wachat__b--out::before {
  content: ""; position: absolute; top: 0; right: -6px;
  border-top: 7px solid #D9FDD3; border-right: 6px solid transparent;
}
/* Horário tucado no canto inferior direito (contido pelo flow-root) */
.wachat__time { float: right; font-size: 9.5px; color: #667781; margin: 5px -2px -1px 10px; white-space: nowrap; display: inline-flex; align-items: center; gap: 3px; }
.wachat__tick { flex-shrink: 0; }
.wachat__input { display: flex; align-items: center; gap: 8px; padding: 7px 9px; background: #EFE7DE; }
.wachat__inputbar {
  flex: 1; display: flex; align-items: center; gap: 9px;
  background: #fff; border-radius: 20px; padding: 8px 13px; font-size: 12.5px; color: #8696A0;
  box-shadow: 0 1px 1px rgba(0,0,0,.05);
}
.wachat__inputbar svg { opacity: .65; flex-shrink: 0; }
.wachat__send {
  width: 36px; height: 36px; border-radius: 50%; background: #00A884; color: #fff;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}

/* ---------- Áudio no WhatsApp (mockup; o cliente envia o áudio real) ---------- */
.waudio {
  display: flex; align-items: center; gap: 10px; background: #D9FDD3; border-radius: 12px;
  padding: 9px 12px; box-shadow: 0 1px .8px rgba(0,0,0,.16); max-width: 350px; margin: 0 auto;
  border: 1px solid rgba(0,0,0,.05);
}
.waudio__play { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; background: var(--green); color: #fff; display: flex; align-items: center; justify-content: center; }
.waudio__mid { flex: 1; min-width: 0; }
.waudio__wave { display: flex; align-items: center; gap: 2px; height: 22px; }
.waudio__wave i { width: 2.5px; border-radius: 2px; background: #9fb0a6; height: 7px; }
.waudio__wave i:nth-child(3n) { height: 16px; }
.waudio__wave i:nth-child(4n) { height: 21px; }
.waudio__wave i:nth-child(5n) { height: 10px; }
.waudio__wave i:nth-child(7n) { height: 13px; }
.waudio__wave i:nth-child(2n) { background: #34A853; }
.waudio__meta { display: flex; justify-content: space-between; margin-top: 4px; font-size: 10px; color: #5a6b62; }
.waudio__av { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.15); }

/* ---------- Placeholder do vídeo de seguidores (cliente vai enviar) ---------- */
.provideo-ph {
  position: relative; aspect-ratio: 9 / 16; max-width: 248px; margin: 0 auto;
  border-radius: 16px; overflow: hidden; color: #fff; text-align: center;
  background: linear-gradient(165deg, #211733, #2c1c10);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 22px;
}
.provideo-ph__play { width: 60px; height: 60px; border-radius: 50%; background: rgba(255,255,255,.92); display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 26px rgba(0,0,0,.4); }
.provideo-ph__play svg { color: var(--orange); margin-left: 3px; }
.provideo-ph__t { font-size: 13px; font-weight: 700; line-height: 1.35; }
.provideo-ph__s { font-size: 11px; opacity: .7; }
.provideo-ph__rec { position: absolute; left: 12px; top: 12px; display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; }
.provideo-ph__rec span { width: 8px; height: 8px; border-radius: 50%; background: #ff4848; animation: bapulse 1.6s infinite; }

/* No tema clay os widgets ficam "presos" no card sem virar massinha */
body.clay .wachat, body.clay .iglist { box-shadow: 0 12px 28px -12px rgba(0,0,0,.35); }

/* ---- Growslider: peek maior dos vizinhos (sinaliza que tem mais) ---- */
:root { --grow-w: 290px; }
.growslide { opacity: .55; }
.growslide.is-active { opacity: 1; }

/* ---- Selo de risco reverso embaixo de CTA ---- */
.cta-reassure {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin: 10px 0 0; font-size: 12px; font-weight: 600; color: var(--text-mute);
}
.cta-reassure svg { color: var(--green); flex-shrink: 0; }

/* ---- Notificação de engajamento por cidade (geo por IP) ---- */
.geotoast {
  position: fixed; left: 14px; bottom: 88px; z-index: 60;
  width: min(312px, calc(100vw - 28px));
  background: #fff; border-radius: 16px; padding: 11px 32px 11px 12px;
  box-shadow: 0 16px 38px -12px rgba(20,24,40,.34), 0 0 0 1px rgba(120,128,150,.10);
  display: flex; align-items: center; gap: 11px;
  opacity: 0; transform: translateX(-130%); pointer-events: none;
}
/* entra da esquerda → estaciona → dá um pulinho pra direita → volta pra esquerda sumindo */
.geotoast.is-playing { pointer-events: auto; animation: geoInParkOut 6s cubic-bezier(.22,.61,.36,1) both; }
@keyframes geoInParkOut {
  0%   { opacity: 0; transform: translateX(-130%); }
  9%   { opacity: 1; transform: translateX(8px); }
  14%  { opacity: 1; transform: translateX(0); }
  74%  { opacity: 1; transform: translateX(0); }
  82%  { opacity: 1; transform: translateX(16px); }
  100% { opacity: 0; transform: translateX(-130%); }
}
.geotoast__av {
  width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 20px; line-height: 1;
  background: linear-gradient(135deg, #ffffff, #eceff5);
  box-shadow: 0 3px 8px -3px rgba(90,100,120,.35), inset 0 1px 2px rgba(255,255,255,.9);
}
.geotoast__body { flex: 1; min-width: 0; line-height: 1.28; }
.geotoast__act { font-size: 13.5px; font-weight: 800; color: var(--text); letter-spacing: -.01em; }
.geotoast__act b { color: var(--orange); font-weight: 900; }
.geotoast__meta { font-size: 11px; color: var(--text-mute); margin-top: 2px; }
.geotoast__close {
  position: absolute; top: 7px; right: 9px; border: 0; background: none;
  color: #b6bcc8; font-size: 16px; line-height: 1; cursor: pointer; padding: 2px 4px;
}
@media (max-width: 480px) { .geotoast { left: 10px; bottom: 82px; } }
@media (prefers-reduced-motion: reduce) {
  .geotoast { transform: none; }
  .geotoast.is-playing { animation: geoFade 6s both; }
  @keyframes geoFade { 0%{opacity:0} 8%{opacity:1} 90%{opacity:1} 100%{opacity:0} }
}

/* ===== Nota com distribuição (autenticidade da avaliação) ===== */
.rdist {
  display: flex; align-items: center; gap: 18px;
  background: #fff; border: 1px solid rgba(120,128,150,.16);
  border-radius: 16px; padding: 16px 18px; margin-top: 14px;
  box-shadow: 0 8px 20px -12px rgba(120,128,150,.45);
}
.rdist__score { text-align: center; flex-shrink: 0; min-width: 90px; }
.rdist__num { font-family: 'Poppins','Inter',sans-serif; font-size: 40px; font-weight: 900; line-height: 1; color: var(--text); }
.rdist__stars { color: #FFB400; font-size: 14px; letter-spacing: 1px; margin-top: 2px; }
.rdist__count { font-size: 10.5px; color: var(--text-mute); margin-top: 3px; }
.rdist__bars { flex: 1; display: grid; gap: 5px; min-width: 0; }
.rdist__row { display: grid; grid-template-columns: 22px 1fr 38px; gap: 8px; align-items: center; }
.rdist__row > span:first-child { font-size: 10.5px; color: var(--text-mute); font-weight: 700; }
.rdist__bar { height: 7px; border-radius: 999px; background: var(--clay-surface-2, #eef0f5); overflow: hidden; }
.rdist__bar i { display: block; height: 100%; min-width: 4px; border-radius: 999px; background: linear-gradient(90deg, #FFC93C, var(--orange)); }
.rdist__row b { font-size: 10.5px; color: var(--text); font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.rdist__foot {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 12px; font-weight: 700; color: var(--green); margin-top: 10px;
}