/* ============================================================
   PITCH LUNAE × GLICERINAS
   Design system: "ordeva" (Periwinkle / Ar Leve) RECOLORIDO
   para a paleta da Lunae (lilás / malva / orquídea + tinta plum).
   Light, airy, hairlines, cartões 18px, sombras suaves, aurora,
   gradiente de marca. Fontes: Plus Jakarta Sans + JetBrains Mono.
   ============================================================ */

:root {
  /* ---- neutrals / estrutura (tingidos de lilás) ---- */
  --bg:          #f8f5fb;   /* canvas off-white com tinta lilás */
  --surface:     #ffffff;   /* cartões, chrome */
  --surface-2:   #f4ecf6;   /* elevado dentro do cartão: stats, chips */
  --line:        #ece0ee;   /* hairline */
  --line-strong: #ddc8de;   /* divisória / hover */

  /* ---- texto ---- */
  --ink:    #251f2b;   /* near-black plum (não é preto puro) */
  --muted:  #6c6478;   /* secundário */
  --faint:  #8a8198;   /* labels / placeholders */

  /* ---- marca / acento (lilás → malva → magenta) ---- */
  --brand:        #b73a82;   /* acento principal (5.3:1 sobre branco) */
  --brand-strong: #98306b;   /* hover / activo */
  --brand-soft:   #f5e3f1;   /* preenchimento tinta (chips, nav activo) */
  --brand-line:   #e6c9de;   /* borda em superfícies de marca */
  --brand-ink:    #ffffff;   /* texto sobre marca */
  --lilac:        #caa2c9;   /* pastel secundário (gradientes) */

  /* ---- semânticas ---- */
  --success:      #0f7d52;  --success-soft: #e2f6ee;
  --danger:       #c0405f;  --danger-soft:  #fbe7ec;
  --warning:      #8a5e0e;  --warning-soft: #fbf0d9;

  /* ---- gradiente de marca (CTA, números, glyphs) ---- */
  --grad-brand: linear-gradient(135deg, #c97bb6 0%, #b73a82 46%, #d294cc 100%);

  /* ---- forma & profundidade ---- */
  --r-card: 18px;
  --r-lg:   12px;
  --r-md:   10px;
  --sh-card:  0 1px 2px rgba(37,31,43,.04), 0 10px 30px -22px rgba(37,31,43,.22);
  --sh-pop:   0 16px 44px -14px rgba(37,31,43,.26);
  --sh-brand: 0 10px 28px -8px rgba(183,58,130,.45);

  /* ---- tipografia ---- */
  --font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --ease: cubic-bezier(.22,.61,.36,1);

  /* ---- larguras-máximas (ladder de 5) ---- */
  --w-wide:  1180px;
  --w-block: 920px;
  --w-mock:  760px;
  --w-panel: 560px;
  --w-card:  440px;
  --maxw: var(--w-block);

  color-scheme: light;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  line-height: 1.5;
  overflow: hidden;
  position: relative;
}

/* ambient "aurora" celeste — lilás + magenta + luar (igual filosofia ordeva) */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(900px 620px at 12% -8%,  rgba(183,58,130,.10), transparent 60%),
    radial-gradient(1000px 700px at 100% 110%, rgba(202,162,201,.16), transparent 60%),
    radial-gradient(700px 520px at 85% 0%,    rgba(150,140,220,.07), transparent 60%);
}

/* ---- top chrome -------------------------------------------------- */
.chrome {
  position: fixed; inset: 0 0 auto 0; z-index: 20;
  display: flex; align-items: center; gap: 20px;
  height: 64px; padding: 0 28px;
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.brand { font-size: 13px; font-weight: 600; letter-spacing: -.01em; color: var(--muted); }
.brand__x { color: var(--brand); margin: 0 4px; font-weight: 700; }
.progress { position: relative; flex: 1; height: 16px; display: flex; align-items: center; cursor: pointer; touch-action: none; }
.progress::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); height: 3px; background: var(--line); border-radius: 99px; }
.progress__fill { position: relative; flex: none; height: 3px; width: 0%; background: var(--grad-brand); border-radius: 99px; transition: width .4s var(--ease); }
.progress__fill::after {
  content: ""; position: absolute; right: 0; top: 50%; transform: translate(50%, -50%);
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--brand); box-shadow: var(--sh-card);
  transition: transform .15s var(--ease);
}
.progress:hover .progress__fill::after { transform: translate(50%, -50%) scale(1.18); }
.progress.is-dragging .progress__fill { transition: none; }
.counter { font-family: var(--font-mono); font-size: 12px; color: var(--faint); letter-spacing: .02em; }
.counter__sep { margin: 0 4px; opacity: .6; }

/* ---- stage / steps ----------------------------------------------- */
.stage { position: relative; height: 100%; z-index: 1; }

.step {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  padding: 104px clamp(28px, 7vw, 120px) 116px;
  opacity: 0; visibility: hidden; transform: translateY(16px) scale(.992);
  transition: opacity .5s var(--ease), transform .5s var(--ease), visibility 0s linear .5s;
}
.step.is-active {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .55s var(--ease), transform .55s var(--ease);
}

.cover, .block { width: 100%; max-width: var(--maxw); }

/* ---- tipografia -------------------------------------------------- */
.display { font-weight: 700; letter-spacing: -.025em; line-height: 1.04; color: var(--ink); }
.display--xl { font-size: clamp(38px, 6.4vw, 76px); }
.display--lg { font-size: clamp(32px, 5vw, 58px); }
.display--md { font-size: clamp(26px, 3.8vw, 44px); letter-spacing: -.02em; line-height: 1.1; }

.text-grad {
  background: var(--grad-brand);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

.eyebrow {
  display: inline-flex; align-items: center;
  text-transform: uppercase; letter-spacing: .16em;
  font-size: 11.5px; font-weight: 700; color: var(--brand);
  margin-bottom: 24px;
}
.eyebrow::before {
  content: ""; width: 22px; height: 1.5px; margin-right: 12px;
  background: currentColor; opacity: .55; border-radius: 2px;
}
.eyebrow--danger  { color: var(--danger); }
.eyebrow--success { color: var(--success); }

.lede {
  font-size: clamp(17px, 1.9vw, 22px); color: var(--muted);
  max-width: 62ch; margin-top: 24px; line-height: 1.45;
}
.lede em { color: var(--brand-strong); font-style: normal; font-weight: 600; }

.note {
  margin-top: 24px; font-size: 15px; color: var(--faint);
  position: relative; display: inline-block; padding-left: 16px; text-align: left;
}
.note::before { content: ""; position: absolute; left: 0; top: .6em; width: 7px; height: 7px; border-radius: 50%; background: var(--lilac); }

.teaser {
  margin-top: 40px; font-size: clamp(17px, 2vw, 22px);
  font-weight: 600; color: var(--ink); letter-spacing: -.01em;
}

.hint { margin-top: 40px; color: var(--faint); font-size: 13.5px; }
kbd {
  font-family: var(--font-mono); font-size: .85em; font-weight: 500;
  padding: 4px 8px; border-radius: 7px; color: var(--muted);
  background: var(--surface); border: 1px solid var(--line-strong);
  box-shadow: 0 1px 0 var(--line-strong);
}

/* ---- chapter marker --------------------------------------------- */
.chapter { display: flex; align-items: flex-start; gap: clamp(20px, 4vw, 48px); }
.chapter__num {
  font-family: var(--font-mono); font-weight: 600;
  font-size: clamp(64px, 13vw, 168px); line-height: .82;
  letter-spacing: -.04em; flex: none;
}
.chapter__body { padding-top: 8px; }
.chapter__body .eyebrow { margin-bottom: 16px; }
.chapter__body .lede em { color: var(--brand-strong); }

/* ---- reveal list ------------------------------------------------- */
.reveal-list { list-style: none; display: grid; gap: 16px; margin-top: 40px; max-width: 64ch; }
.reveal-list li {
  display: flex; gap: 16px; align-items: baseline;
  font-size: clamp(17px, 2.1vw, 24px); color: var(--ink); line-height: 1.4;
}
.reveal-list li::before {
  content: ""; flex: none; width: 9px; height: 9px; margin-top: .55em;
  border-radius: 50%; background: var(--grad-brand);
  box-shadow: 0 0 0 4px var(--brand-soft);
}
.reveal-list em { color: var(--brand-strong); font-style: normal; font-weight: 600; }
.reveal-list strong { font-weight: 700; }
.mono { font-family: var(--font-mono); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---- cards & stats ---------------------------------------------- */
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-card); box-shadow: var(--sh-card);
}
.stat-grid {
  margin-top: 40px; display: grid; gap: 16px;
  grid-template-columns: repeat(3, 1fr);
}
.stat { padding: 24px; position: relative; overflow: hidden; }
.stat::after {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--grad-brand); opacity: .85;
}
.stat__num {
  font-size: clamp(40px, 5.5vw, 68px); line-height: 1;
  letter-spacing: -.03em; color: var(--ink);
}
.stat__label {
  margin-top: 16px; font-size: 13.5px; color: var(--muted);
  line-height: 1.35; max-width: 22ch;
}
@media (max-width: 720px) {
  .stat-grid { grid-template-columns: 1fr; }
  .chapter { flex-direction: column; gap: 12px; }
}

/* ---- fragment reveal -------------------------------------------- */
[data-frag] {
  opacity: 0; transform: translateY(12px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
[data-frag].is-shown { opacity: 1; transform: none; }

/* ---- on-screen nav ---------------------------------------------- */
.nav { position: fixed; right: 28px; bottom: 24px; z-index: 20; display: flex; gap: 8px; }
.nav__btn {
  width: 46px; height: 46px; border-radius: var(--r-lg);
  display: grid; place-items: center; cursor: pointer;
  font-size: 18px; color: var(--muted);
  background: var(--surface); border: 1px solid var(--line-strong);
  box-shadow: var(--sh-card);
  transition: color .2s var(--ease), border-color .2s var(--ease), transform .1s var(--ease), background .2s var(--ease);
}
.nav__btn:hover { color: var(--brand-strong); border-color: var(--brand-line); background: var(--brand-soft); }
.nav__btn:active { transform: scale(.94); }
.nav__btn:disabled { opacity: .35; cursor: default; }
.nav__btn:disabled:hover { color: var(--muted); border-color: var(--line-strong); background: var(--surface); }

/* ============================================================
   CAPÍTULO 01 — MOCKUP DO SITE + TOUR
   ============================================================ */
.step--wide { padding: 92px clamp(24px, 4vw, 72px) 96px; }
.block--center { text-align: center; margin-inline: auto; }
.block--center .reveal-list { text-align: left; margin-inline: auto; }

.tour {
  width: 100%; max-width: var(--w-wide);
  display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(250px, .92fr);
  gap: clamp(24px, 3vw, 48px); align-items: center;
}
@media (max-width: 980px) { .tour { grid-template-columns: 1fr; } .anns { display: none; } }

/* ---- browser frame ---- */
.mock {
  position: relative;
  border: 1px solid var(--line-strong); border-radius: 14px; overflow: hidden;
  background: var(--surface); box-shadow: var(--sh-pop);
}
.mock__bar {
  display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 16px;
  background: var(--surface-2); border-bottom: 1px solid var(--line);
}
.mock__dots { display: flex; gap: 8px; }
.mock__dots i { width: 11px; height: 11px; border-radius: 50%; background: var(--line-strong); }
.mock__url {
  flex: 1; max-width: 340px; height: 26px; border-radius: 99px;
  background: var(--surface); border: 1px solid var(--line);
  display: flex; align-items: center; gap: 8px; padding: 0 12px;
  font: 500 12px/1 var(--font-mono); color: var(--faint);
}
.mock__lock { font-size: 10px; filter: grayscale(1); opacity: .6; }
.mock__view {
  height: clamp(440px, 70vh, 720px); overflow-y: auto; scroll-behavior: smooth;
  background: var(--surface);
}
.mock__view::-webkit-scrollbar { width: 9px; }
.mock__view::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 99px; }
.mock__view::-webkit-scrollbar-track { background: transparent; }

/* ---- spotlight do tour ---- */
.site-sec { position: relative; transition: opacity .45s var(--ease); }
.site.is-touring .site-sec { opacity: .45; }
.site.is-touring .site-sec.is-spot { opacity: 1; }
.site.is-touring .s-nav { opacity: 1; } /* header nunca esmaece */
.site-sec.is-spot::after {
  content: ""; position: absolute; inset: 6px; border: 2px solid var(--brand);
  border-radius: 12px; box-shadow: 0 0 0 5px var(--brand-soft); pointer-events: none; z-index: 6;
}

/* ---- o site (homepage) ---- */
.site { font-size: 14px; color: var(--ink); }
.site h2 { font-size: clamp(20px, 2.4vw, 26px); font-weight: 800; letter-spacing: -.02em; line-height: 1.12; color: var(--ink); }

.s-nav {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 24px; background: rgba(255,255,255,.97); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 6px 18px -14px rgba(37,31,43,.4);
}
.s-logo { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 17px; letter-spacing: -.02em; color: var(--ink); }
.moon { width: 15px; height: 15px; border-radius: 50%; background: var(--grad-brand); position: relative; display: inline-block; }
.moon::after { content: ""; position: absolute; width: 12px; height: 12px; border-radius: 50%; background: var(--surface); top: -2px; right: -3px; }
.s-links { display: flex; gap: 16px; font-size: 13px; color: var(--muted); }
@media (max-width: 1180px) { .s-links { display: none; } }
.s-nav__cta { display: flex; gap: 8px; }

.s-btn {
  font: 600 12.5px var(--font-sans); border-radius: 9px; padding: 8px 16px;
  cursor: pointer; border: 1px solid transparent;
  transition: filter .2s, background .2s, border-color .2s, color .2s;
}
.s-btn--ghost { background: var(--surface); border-color: var(--line-strong); color: var(--ink); }
.s-btn--ghost:hover { border-color: var(--brand-line); color: var(--brand-strong); background: var(--brand-soft); }
.s-btn--primary { background: var(--grad-brand); color: #fff; box-shadow: var(--sh-brand); }
.s-btn--primary:hover { filter: brightness(1.05); }
.s-btn--lg { padding: 12px 20px; font-size: 14px; border-radius: 11px; }
.s-btn--block { width: 100%; padding: 12px; text-align: center; }

.s-hero {
  padding: 48px 24px 40px;
  background:
    radial-gradient(120% 90% at 0% 0%, var(--brand-soft), transparent 55%),
    radial-gradient(120% 100% at 100% 0%, #eef0fb, transparent 50%),
    var(--surface);
}
.s-eyebrow { text-transform: uppercase; letter-spacing: .14em; font-size: 11px; font-weight: 700; color: var(--brand); margin-bottom: 16px; }
.s-hero h1 { font-size: clamp(26px, 3.4vw, 38px); font-weight: 800; line-height: 1.06; letter-spacing: -.025em; color: var(--ink); }
.s-lead { margin-top: 16px; font-size: 15px; color: var(--muted); max-width: 46ch; }
.s-hero__cta { margin-top: 24px; display: flex; gap: 8px; flex-wrap: wrap; }
.s-proof { margin-top: 24px; display: flex; gap: 24px; flex-wrap: wrap; font-size: 13px; color: var(--muted); }
.s-proof b { color: var(--ink); font-size: 15px; margin-right: 4px; }

.s-sub, .s-stories, .s-blog, .s-courses, .s-foot { padding: 32px 24px; }
.s-sub { background: linear-gradient(180deg, var(--brand-soft), transparent 60%), var(--surface); }
.s-tag { text-transform: uppercase; letter-spacing: .14em; font-size: 10.5px; font-weight: 700; color: var(--brand); margin-bottom: 12px; }

.s-plan {
  margin-top: 16px; max-width: var(--w-card); padding: 24px;
  background: var(--surface); border: 1px solid var(--brand-line);
  border-radius: 16px; box-shadow: var(--sh-card);
}
.s-plan__price { display: flex; align-items: baseline; gap: 4px; }
.s-plan__price b { font-size: 40px; color: var(--ink); letter-spacing: -.03em; }
.s-plan__price span { color: var(--muted); font-size: 14px; }
.s-plan__list { list-style: none; margin: 16px 0; display: grid; gap: 12px; }
.s-plan__list li { position: relative; padding-left: 24px; font-size: 13.5px; color: var(--ink); }
.s-plan__list li::before { content: "✓"; position: absolute; left: 0; color: var(--brand); font-weight: 800; }

.s-cards { margin-top: 16px; display: grid; gap: 16px; }
.s-cards--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1180px) { .s-cards--3 { grid-template-columns: repeat(2, 1fr); } }
.s-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 16px; box-shadow: var(--sh-card); }

.s-avatar { width: 38px; height: 38px; border-radius: 50%; margin-bottom: 12px; background: var(--grad-brand) center/cover no-repeat; }
.s-story p { font-size: 13.5px; line-height: 1.45; color: var(--ink); }
.s-name { display: block; margin-top: 12px; font-size: 12px; color: var(--faint); font-weight: 600; }

.s-thumb { height: 84px; border-radius: 10px; margin-bottom: 12px; background: linear-gradient(135deg, var(--brand-soft), var(--surface-2)) center/cover no-repeat; border: 1px solid var(--line); }

/* ---- wiring de imagens: a outra IA gera os ficheiros em assets/img/.
   Cada classe = foto por cima + gradiente de fallback por baixo (sem ícone partido). ---- */
.img-av-sofia   { background-image: url('assets/img/avatar-sofia.jpg'),     var(--grad-brand); }
.img-av-ines    { background-image: url('assets/img/avatar-ines.jpg'),      var(--grad-brand); }
.img-av-carla   { background-image: url('assets/img/avatar-carla.jpg'),     var(--grad-brand); }
.img-blog-cera  { background-image: url('assets/img/blog-cera-soja.jpg'),   linear-gradient(135deg, var(--brand-soft), var(--surface-2)); }
.img-blog-sabao { background-image: url('assets/img/blog-sabao-erros.jpg'), linear-gradient(135deg, var(--brand-soft), var(--surface-2)); }
.img-blog-preco { background-image: url('assets/img/blog-preco.jpg'),       linear-gradient(135deg, var(--brand-soft), var(--surface-2)); }
.img-velas      { background-image: url('assets/img/course-velas.jpg'),     linear-gradient(135deg, var(--brand-soft), var(--surface-2)); }
.img-saboes     { background-image: url('assets/img/course-saboes.jpg'),    linear-gradient(135deg, var(--brand-soft), var(--surface-2)); }
.img-resina     { background-image: url('assets/img/course-resina.jpg'),    linear-gradient(135deg, var(--brand-soft), var(--surface-2)); }
.img-macrame    { background-image: url('assets/img/course-macrame.jpg'),   linear-gradient(135deg, var(--brand-soft), var(--surface-2)); }
.img-aguarela   { background-image: url('assets/img/course-aguarela.jpg'),  linear-gradient(135deg, var(--brand-soft), var(--surface-2)); }
.img-ceramica   { background-image: url('assets/img/course-ceramica.jpg'),  linear-gradient(135deg, var(--brand-soft), var(--surface-2)); }
.s-cat { font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; color: var(--brand); }
.s-post h3, .s-course h3 { font-size: 14px; font-weight: 700; line-height: 1.25; margin: 8px 0; color: var(--ink); letter-spacing: -.01em; }
.s-meta { font-size: 11.5px; color: var(--faint); }

.s-foot { background: var(--surface); border-top: 1px solid var(--line); }
.s-foot p { margin-top: 8px; font-size: 12px; color: var(--faint); }

/* ---- destaque final "100% customizável" (overlay sobre o mockup) ---- */
.mock__overlay {
  position: absolute; left: 0; right: 0; top: 40px; bottom: 0; z-index: 30;
  display: grid; place-items: center; padding: 24px;
  background: rgba(255,255,255,.55); backdrop-filter: blur(1.5px);
  opacity: 0; visibility: hidden;
  transition: opacity .45s var(--ease), visibility 0s linear .45s;
}
.mock.show-overlay .mock__overlay { opacity: 1; visibility: visible; transition: opacity .45s var(--ease); }

.custom {
  text-align: center; max-width: 82%; padding: 24px 32px;
  background: var(--surface); border: 1px solid var(--brand-line);
  border-radius: 18px; box-shadow: var(--sh-pop);
  opacity: 0; transform: translateY(12px) scale(.97);
  transition: opacity .5s var(--ease) .05s, transform .5s var(--ease) .05s;
}
.mock.show-overlay .custom { opacity: 1; transform: none; }
.custom__pct {
  font-size: 50px; font-weight: 600; line-height: 1; letter-spacing: -.03em;
  background: var(--grad-brand); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.custom__title { margin-top: 12px; font-size: 20px; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.custom__sub { margin-top: 8px; font-size: 14px; color: var(--muted); }
.custom__sub b { color: var(--brand-strong); }

.universe { margin-top: 20px; display: flex; align-items: center; justify-content: center; }
.uni-node {
  position: relative; padding: 8px 16px; border-radius: 10px;
  font-weight: 700; font-size: 13px; color: var(--brand-strong);
  background: var(--brand-soft); border: 1px solid var(--brand-line);
}
.uni-node--g { background: var(--surface-2); border-color: var(--line-strong); color: var(--ink); }
.uni-node--g::before, .uni-node--g::after { content: ""; position: absolute; width: 5px; height: 5px; border-radius: 50%; background: var(--lilac); }
.uni-node--g::before { top: -8px; right: 8px; animation: twinkle 2.2s ease-in-out infinite; }
.uni-node--g::after  { bottom: -7px; right: 20px; animation: twinkle 2.6s ease-in-out infinite .6s; }
@keyframes twinkle { 0%, 100% { opacity: .2; transform: scale(.6); } 50% { opacity: 1; transform: scale(1); } }
.uni-link { width: 56px; height: 2px; background: var(--line-strong); position: relative; }
.uni-link::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, var(--brand), transparent);
  background-size: 50% 100%; background-repeat: no-repeat; animation: flow 1.6s linear infinite;
}

/* ---- anotações do tour ---- */
.anns { align-self: center; }
.anns__title { text-transform: uppercase; letter-spacing: .14em; font-size: 11px; font-weight: 700; color: var(--faint); margin-bottom: 16px; }
.ann { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--line); }
.ann:first-of-type { border-top: none; }
.ann__n { flex: none; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: var(--brand-strong); background: var(--brand-soft); border: 1px solid var(--brand-line); }
.ann__t { display: block; font-size: 14.5px; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
.ann__d { display: block; margin-top: 4px; font-size: 12.5px; color: var(--muted); line-height: 1.4; }

/* ============================================================
   CAPÍTULO 02 — MOTOR DE CONTEÚDO (diagrama animado)
   ============================================================ */
.engine {
  margin-top: 40px; display: flex; align-items: center; justify-content: center;
  gap: clamp(12px, 2vw, 24px); flex-wrap: wrap;
}
.engine__stage { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.engine__cap { font-size: 12px; color: var(--muted); text-align: center; max-width: 19ch; }
.core + .engine__cap { margin-top: 16px; } /* afastar "Motor" dos anéis do núcleo */

.core {
  width: 88px; height: 88px; border-radius: 24px; position: relative;
  background: var(--grad-brand); color: #fff; display: grid; place-items: center;
  font: 800 18px var(--font-sans); letter-spacing: .02em; box-shadow: var(--sh-brand);
}
.core::before, .core::after {
  content: ""; position: absolute; inset: 0; border-radius: 24px;
  border: 2px solid var(--brand); animation: ring 2.6s ease-out infinite;
}
.core::after { animation-delay: 1.3s; }
@keyframes ring { 0% { transform: scale(1); opacity: .55; } 100% { transform: scale(1.42); opacity: 0; } }

.flow { width: clamp(56px, 8vw, 96px); height: 2px; background: linear-gradient(90deg, var(--brand-line), var(--brand), var(--brand-line)); border-radius: 2px; position: relative; }
.flow__pulse {
  position: absolute; inset: 0; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--brand), transparent);
  background-size: 45% 100%; background-repeat: no-repeat;
  animation: flow 1.7s linear infinite;
}
@keyframes flow { 0% { background-position: -45% 0; } 100% { background-position: 145% 0; } }

.engine__ticker { font: 600 14px var(--font-sans); color: var(--muted); }
.engine__ticker b { font-size: 24px; color: var(--brand-strong); letter-spacing: -.02em; margin-right: 4px; }
.engine__sites { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; max-width: 170px; }
.engine__sites i { width: 22px; height: 22px; border-radius: 6px; background: var(--grad-brand); border: 1px solid var(--brand-line); display: block; }
[data-frag].is-shown .engine__sites i { animation: pop .5s var(--ease) backwards; animation-delay: calc(var(--i) * .07s); }
@keyframes pop { from { opacity: 0; transform: scale(.3) translateY(6px); } to { opacity: 1; transform: none; } }

.engine__brands { display: flex; flex-direction: column; gap: 12px; }
.bchip {
  padding: 8px 16px; border-radius: 11px; text-align: center;
  font-weight: 700; font-size: 14px; color: var(--brand-strong);
  background: var(--brand-soft); border: 1px solid var(--brand-line);
  animation: bpulse 2.8s ease-in-out infinite;
}
.bchip:last-child { animation-delay: 1.4s; }
@keyframes bpulse { 0%, 100% { box-shadow: 0 0 0 0 var(--brand-soft); } 50% { box-shadow: 0 0 0 6px rgba(245,227,241,0); } }

/* ============================================================
   CAPÍTULO 02 — visuais animados (Problema / Resultado)
   ============================================================ */
.note--danger::before { background: var(--danger); }

/* ---- Problema: pesquisa que devolve 0 resultados ---- */
.serp {
  max-width: var(--w-panel); margin-top: 40px; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-card); box-shadow: var(--sh-card);
}
.serp__bar { display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 16px; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.serp__icon { font-size: 14px; filter: grayscale(1); opacity: .6; }
.serp__q { font-size: 14px; font-weight: 500; color: var(--ink); }
.serp__caret { width: 2px; height: 16px; background: var(--ink); display: inline-block; animation: blink 1s step-end infinite; }
.serp__body { position: relative; min-height: 152px; }
.serp__skeleton { position: absolute; inset: 0; display: grid; align-content: start; gap: 12px; padding: 20px; }
.serp__skeleton span { height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--surface-2), var(--line), var(--surface-2)); background-size: 200% 100%; }
.serp__skeleton span:nth-child(1) { width: 70%; }
.serp__skeleton span:nth-child(2) { width: 92%; }
.serp__skeleton span:nth-child(3) { width: 54%; }
.serp__skeleton span:nth-child(4) { width: 80%; }
.serp__empty { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; opacity: 0; }
.serp__zero { font-size: 54px; line-height: 1; letter-spacing: -.03em; color: var(--danger); }
.serp__empty p { margin-top: 4px; font-size: 15px; font-weight: 600; color: var(--ink); }
.serp__note { display: block; margin-top: 8px; font-size: 12.5px; color: var(--faint); }
[data-frag].is-shown .serp__skeleton span { animation: shimmer 1.2s linear infinite; }
[data-frag].is-shown .serp__skeleton { animation: serp-skel 1.7s ease forwards; }
[data-frag].is-shown .serp__empty { animation: serp-empty .5s var(--ease) 1.5s both; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes serp-skel { 0% { opacity: 0; } 12% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; } }
@keyframes serp-empty { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }
@keyframes blink { 50% { opacity: 0; } }

/* ---- Resultado: antes / depois da pesquisa "lunae" ---- */
.ba { margin-top: 40px; max-width: var(--w-block); display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: center; }
@media (max-width: 820px) { .ba { grid-template-columns: 1fr; } .ba__arrow { transform: rotate(90deg); } }
.ba__col { display: flex; flex-direction: column; gap: 12px; }
.ba__tag { align-self: flex-start; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; padding: 4px 12px; border-radius: 99px; }
.ba__tag--before { color: var(--danger); background: var(--danger-soft); }
.ba__tag--after { color: var(--success); background: var(--success-soft); }
.ba__arrow { justify-self: center; font-size: 26px; font-weight: 700; color: var(--brand); }

.serp--mini { max-width: none; margin-top: 0; }
.serp__meta { padding: 8px 16px 2px; font-size: 11.5px; color: var(--faint); }
.serp__meta b { color: var(--muted); font-weight: 600; }

.serp--mini .ai-answer { margin: 12px 16px 4px; }
.ai-answer { padding: 12px; border-radius: 10px; border: 1px solid var(--brand-line); background: linear-gradient(180deg, var(--brand-soft), transparent), var(--surface); }
.ai-answer__badge { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--brand-strong); }
.ai-answer p { margin-top: 8px; font-size: 12.5px; line-height: 1.42; color: var(--ink); }
.ai-answer b { color: var(--brand-strong); font-weight: 700; }

/* feed de resultados que passa depressa e trava suavemente */
.feed {
  margin-top: 16px; height: 150px; overflow: hidden; position: relative;
  border-top: 1px solid var(--line);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 24%, #000 82%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 24%, #000 82%, transparent);
}
.feed__list { display: grid; }
.feed .res { padding: 8px 16px; border-bottom: 1px solid var(--line); border-radius: 0; }
[data-frag].is-shown .feed__list { animation: feedscroll 10s cubic-bezier(.2,.5,.3,1) .3s both; }
@keyframes feedscroll { from { transform: translateY(0); } to { transform: translateY(-2200px); } }

.res { display: flex; gap: 12px; align-items: flex-start; padding: 8px; border-radius: 8px; text-decoration: none; }
.res__dot { width: 18px; height: 18px; border-radius: 5px; background: var(--grad-brand); flex: none; margin-top: 2px; }
.res__t { display: block; font-size: 13px; font-weight: 600; line-height: 1.25; color: var(--brand-strong); }
.res__url { display: block; margin-top: 2px; font-size: 11px; color: var(--muted); font-family: var(--font-mono); }

/* ============================================================
   CAPÍTULO 03 — Dashboard de aluna + admin
   ============================================================ */
.ftiles { margin-top: 40px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: var(--w-block); }
@media (max-width: 880px) { .ftiles { grid-template-columns: repeat(2, 1fr); } }
.ftile { padding: 20px; display: flex; gap: 12px; align-items: flex-start; }
.ftile__icon { flex: none; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; color: var(--brand); background: var(--brand-soft); border: 1px solid var(--brand-line); }
.ftile__icon svg { width: 20px; height: 20px; }
.ftile__t { font-size: 15px; font-weight: 700; letter-spacing: -.01em; color: var(--ink); }
.ftile__d { margin-top: 4px; font-size: 13px; line-height: 1.4; color: var(--muted); }
.note em { color: var(--brand-strong); font-style: normal; font-weight: 600; }

/* ponte Glicerinas — material a 1 clique com 30% */
.oneclick { max-width: var(--w-card); margin: 40px auto 0; padding: 20px; }
.oc__tag { font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; color: var(--brand); }
.oc__row { margin-top: 16px; display: flex; gap: 12px; align-items: center; }
.oc__thumb { width: 56px; height: 56px; border-radius: 10px; flex: none; background: linear-gradient(135deg, var(--brand-soft), var(--surface-2)); border: 1px solid var(--line); }
.oc__name { font-size: 15px; font-weight: 700; color: var(--ink); }
.oc__price { margin-top: 8px; display: flex; align-items: baseline; gap: 8px; }
.oc__old { font-size: 14px; color: var(--faint); text-decoration: line-through; }
.oc__new { font-size: 20px; font-weight: 700; color: var(--ink); }
.oc__off { font-size: 11px; font-weight: 700; color: var(--success); background: var(--success-soft); padding: 2px 8px; border-radius: 99px; }
.oc__btn { margin-top: 16px; width: 100%; padding: 12px; border: none; border-radius: var(--r-lg); background: var(--grad-brand); color: #fff; font: 600 14px var(--font-sans); cursor: pointer; box-shadow: var(--sh-brand); }
.oc__done { margin-top: 12px; text-align: center; font-size: 13px; font-weight: 600; color: var(--success); }
.oc__new, .oc__off, .oc__done { opacity: 0; }
[data-frag].is-shown .oc__new { animation: fadeup .4s var(--ease) .35s both; }
[data-frag].is-shown .oc__off { animation: pop .45s var(--ease) .6s both; }
[data-frag].is-shown .oc__btn { animation: ocpress .5s var(--ease) 1s; }
[data-frag].is-shown .oc__done { animation: fadeup .5s var(--ease) 1.4s both; }
@keyframes fadeup { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes ocpress { 0%, 100% { transform: scale(1); } 45% { transform: scale(.965); filter: brightness(.96); } }

/* ---- overview: slideshow da infraestrutura centralizada ---- */
.block--center .lede { margin-inline: auto; }
.showcase { width: 100%; max-width: var(--w-mock); margin: 40px auto 0; }
.appframe { border: 1px solid var(--line-strong); border-radius: 14px; overflow: hidden; background: var(--surface); box-shadow: var(--sh-pop); }
.appframe__bar { display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 16px; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.appframe__dots { display: flex; gap: 8px; }
.appframe__dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong); }
.appframe__url { font: 500 11px var(--font-mono); color: var(--faint); }
.appshell { display: grid; grid-template-columns: 168px 1fr; height: 322px; }
.appside { display: flex; flex-direction: column; gap: 16px; padding: 16px 12px; border-right: 1px solid var(--line); background: var(--surface); }
.appside__brand { display: flex; align-items: center; gap: 8px; padding: 4px 8px; font-weight: 800; font-size: 15px; letter-spacing: -.02em; color: var(--ink); }
.appnav { display: flex; flex-direction: column; gap: 4px; }
.appnav-item { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 9px; font-size: 12.5px; font-weight: 500; color: var(--muted); box-shadow: inset 0 0 0 rgba(0,0,0,0); }
.appnav-item svg { width: 16px; height: 16px; flex: none; }
[data-frag].is-shown .appnav-item--cyc { animation: navcycle 16s infinite; }
[data-frag].is-shown .appnav-item--2 { animation-delay: 4s; }
[data-frag].is-shown .appnav-item--3 { animation-delay: 8s; }
[data-frag].is-shown .appnav-item--4 { animation-delay: 12s; }
@keyframes navcycle {
  0%, 22% { background: var(--brand-soft); color: var(--brand-strong); box-shadow: inset 3px 0 0 var(--brand); }
  25%, 100% { background: transparent; color: var(--muted); box-shadow: inset 0 0 0 rgba(0,0,0,0); }
}
.appmain { display: flex; flex-direction: column; min-width: 0; }
.apptop { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 40px; padding: 0 16px; border-bottom: 1px solid var(--line); }
.apptop__search { flex: 1; max-width: 240px; height: 30px; display: flex; align-items: center; gap: 8px; padding: 0 12px; border-radius: 99px; background: var(--surface-2); border: 1px solid var(--line); font-size: 12px; color: var(--faint); }
.apptop__search svg { width: 14px; height: 14px; }
.apptop__right { display: flex; align-items: center; gap: 12px; }
.apptop__bell { color: var(--muted); display: grid; place-items: center; }
.apptop__bell svg { width: 17px; height: 17px; }
.apptop__av { width: 28px; height: 28px; border-radius: 50%; background: var(--grad-brand); display: grid; place-items: center; color: #fff; font: 700 12px var(--font-sans); }
.appview { position: relative; flex: 1; overflow: hidden; }
.dpage { position: absolute; inset: 0; padding: 16px; opacity: 0; }
[data-frag].is-shown .dpage { animation: dcycle 16s infinite; }
[data-frag].is-shown .dpage--2 { animation-delay: 4s; }
[data-frag].is-shown .dpage--3 { animation-delay: 8s; }
[data-frag].is-shown .dpage--4 { animation-delay: 12s; }
@keyframes dcycle { 0% { opacity: 0; transform: translateY(8px); } 3% { opacity: 1; transform: none; } 22% { opacity: 1; transform: none; } 25% { opacity: 0; transform: translateY(-8px); } 100% { opacity: 0; } }
.dpage__h { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--faint); margin-bottom: 16px; text-align: left; }
.dpage__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.dpage__grid--3 { grid-template-columns: repeat(3, 1fr); }

.dcard { display: flex; gap: 12px; align-items: center; border: 1px solid var(--line); border-radius: 10px; padding: 12px; text-align: left; background: var(--surface); }
.dcard__ico { flex: none; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; color: var(--brand); background: var(--brand-soft); border: 1px solid var(--brand-line); }
.dcard__ico svg { width: 18px; height: 18px; }
.dcard__t { font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1.2; }
.dcard__m { font-size: 11px; color: var(--muted); margin-top: 2px; }
.dcard__price { margin-left: auto; font: 600 14px var(--font-mono); color: var(--brand-strong); }
.dpage--4 .dcard { flex-direction: column; align-items: flex-start; gap: 8px; }
.dpage--4 .dcard__price { margin-left: 0; }

.dlist { display: grid; gap: 12px; }
.drow { display: flex; gap: 12px; align-items: center; border: 1px solid var(--line); border-radius: 10px; padding: 12px; }
.dav { width: 34px; height: 34px; border-radius: 50%; flex: none; background: var(--grad-brand); display: grid; place-items: center; color: #fff; font: 700 13px var(--font-sans); }
.drow__b { flex: 1; min-width: 0; }
.drow__n { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.drow__m { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.drow__meta { flex: none; font: 600 11px var(--font-mono); color: var(--faint); }

.dtable { display: grid; gap: 8px; }
.dtr { display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 8px; padding: 12px 16px; }
.dtr__id { flex: none; width: 48px; font: 600 12px var(--font-mono); color: var(--faint); }
.dtr__name { flex: 1; min-width: 0; font-size: 13px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dpill { flex: none; font-size: 10.5px; font-weight: 700; padding: 4px 10px; border-radius: 99px; background: var(--surface-2); color: var(--muted); }
.dpill--ok { background: var(--success-soft); color: var(--success); }
.dpill--warn { background: var(--warning-soft); color: var(--warning); }
.showdots { display: flex; justify-content: center; gap: 8px; margin-top: 16px; }
.showdots i { width: 7px; height: 7px; border-radius: 50%; background: var(--line-strong); }
[data-frag].is-shown .showdots i { animation: ddot 16s infinite; }
[data-frag].is-shown .showdots i:nth-child(2) { animation-delay: 4s; }
[data-frag].is-shown .showdots i:nth-child(3) { animation-delay: 8s; }
[data-frag].is-shown .showdots i:nth-child(4) { animation-delay: 12s; }
@keyframes ddot { 0%, 24% { background: var(--brand); } 25%, 100% { background: var(--line-strong); } }

/* ---- payoff de feature: fluxo de captura (aluna → feature → ganho) ---- */
.capture { margin-top: 40px; display: flex; align-items: flex-start; justify-content: center; gap: clamp(12px, 2vw, 24px); flex-wrap: wrap; }
.cap-node { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 150px; }
.cap-node__ico { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; color: var(--brand); background: var(--brand-soft); border: 1px solid var(--brand-line); }
.cap-node__ico svg { width: 26px; height: 26px; }
.cap-node__t { font-size: 13.5px; font-weight: 600; color: var(--ink); text-align: center; }
.cap-node--win .cap-node__ico { background: var(--grad-brand); color: #fff; border: none; box-shadow: var(--sh-brand); }
.cap-badge { font-size: 11px; font-weight: 700; color: var(--success); background: var(--success-soft); padding: 4px 10px; border-radius: 99px; }
.cap-arrow { display: flex; flex-direction: column; align-items: center; gap: 8px; padding-top: 16px; min-width: 96px; }
.cap-arrow__label { font-size: 11.5px; font-weight: 700; color: var(--brand-strong); }
.cap-arrow__line { width: 96px; height: 2px; background: var(--line-strong); border-radius: 2px; position: relative; }
.cap-arrow__line::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, var(--brand), transparent); background-size: 45% 100%; background-repeat: no-repeat; animation: flow 1.6s linear infinite; }

/* stat-âncora de payoff (ex.: +100% LTV) */
.lstat { margin: 40px auto 0; display: inline-flex; flex-direction: column; align-items: center; gap: 8px; padding: 24px 32px; border-radius: 18px; background: linear-gradient(180deg, var(--brand-soft), transparent), var(--surface); border: 1px solid var(--brand-line); box-shadow: var(--sh-card); }
.lstat__n { font-size: clamp(40px, 6vw, 64px); line-height: 1; letter-spacing: -.03em; background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.lstat__l { font-size: 14px; color: var(--muted); max-width: 36ch; }
.lstat__l b { color: var(--brand-strong); font-weight: 700; }

/* touchpoints: onde a integração vive (grid 2×2) */
.touch { margin: 40px auto 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; max-width: var(--w-mock); }
.touch .ftile { text-align: left; }
@media (max-width: 760px) { .touch { grid-template-columns: 1fr; } }

/* mockup: aula com pop-up de compra */
.lesson { max-width: var(--w-mock); margin: 40px auto 0; padding: 0; overflow: hidden; }
.lesson__video { position: relative; aspect-ratio: 16 / 9; background: linear-gradient(135deg, #3b2f44, #241b2e); }
.lesson__label { position: absolute; top: 16px; left: 16px; font-size: 11.5px; font-weight: 600; color: rgba(255,255,255,.85); background: rgba(0,0,0,.28); padding: 4px 10px; border-radius: 99px; backdrop-filter: blur(4px); }
.lesson__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 58px; height: 58px; border-radius: 50%; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.4); display: grid; place-items: center; color: #fff; backdrop-filter: blur(4px); }
.lesson__play svg { width: 22px; height: 22px; margin-left: 3px; }
.lesson__time { position: absolute; left: 16px; right: 16px; bottom: 16px; height: 4px; border-radius: 99px; background: rgba(255,255,255,.25); }
.lesson__time i { display: block; width: 33%; height: 100%; border-radius: 99px; background: #fff; }
.lesson__pop { position: absolute; right: 16px; bottom: 32px; width: 256px; padding: 16px; border-radius: 14px; background: var(--surface); border: 1px solid var(--brand-line); box-shadow: var(--sh-pop); text-align: left; }
[data-frag].is-shown .lesson__pop { animation: popin .5s var(--ease) .55s backwards; }
@keyframes popin { from { opacity: 0; transform: translateY(12px) scale(.96); } to { opacity: 1; transform: none; } }
.pop__tag { font-size: 12px; font-weight: 700; color: var(--ink); padding-right: 16px; }
.pop__row { display: flex; gap: 12px; align-items: center; margin: 12px 0; }
.pop__thumb { width: 38px; height: 38px; border-radius: 9px; flex: none; display: grid; place-items: center; color: var(--brand); background: var(--brand-soft); border: 1px solid var(--brand-line); }
.pop__thumb svg { width: 20px; height: 20px; }
.pop__name { font-size: 13px; font-weight: 600; color: var(--ink); }
.pop__price { display: flex; align-items: baseline; gap: 8px; margin-top: 2px; }
.pop__old { font-size: 12px; color: var(--faint); text-decoration: line-through; }
.pop__new { font-size: 15px; color: var(--ink); }
.pop__off { font-size: 10px; font-weight: 700; color: var(--success); background: var(--success-soft); padding: 2px 8px; border-radius: 99px; }
.pop__btn { width: 100%; padding: 8px; border: none; border-radius: 9px; background: var(--grad-brand); color: #fff; font: 600 12.5px var(--font-sans); cursor: pointer; box-shadow: var(--sh-brand); }
.lesson__bar { display: flex; align-items: center; justify-content: space-between; padding: 16px; border-top: 1px solid var(--line); }
.lesson__ttl { font-size: 14px; font-weight: 700; color: var(--ink); }
.lesson__meta { font-size: 12px; color: var(--faint); }

/* botão rápido partilhado (1 clique / Repor / Ver) */
.qbtn { border: none; border-radius: 8px; background: var(--grad-brand); color: #fff; font: 600 11.5px var(--font-sans); padding: 8px 12px; cursor: pointer; box-shadow: var(--sh-brand); white-space: nowrap; }
.qbtn--ghost { background: var(--surface); color: var(--brand-strong); border: 1px solid var(--brand-line); box-shadow: none; }

/* mockup: Loja Glicerinas */
.store { max-width: var(--w-mock); margin: 40px auto 0; padding: 20px; text-align: left; }
.store__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.store__ttl { font-size: 15px; font-weight: 800; letter-spacing: -.01em; color: var(--ink); }
.store__badge { font-size: 11px; font-weight: 700; color: var(--brand-strong); background: var(--brand-soft); border: 1px solid var(--brand-line); padding: 4px 10px; border-radius: 99px; }
.store__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 760px) { .store__grid { grid-template-columns: repeat(2, 1fr); } }
.sprod { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; }
.sprod__thumb { height: 56px; border-radius: 8px; display: grid; place-items: center; color: var(--brand); background: linear-gradient(135deg, var(--brand-soft), var(--surface-2)); border: 1px solid var(--line); }
.sprod__thumb svg { width: 24px; height: 24px; }
.sprod__name { font-size: 12.5px; font-weight: 600; line-height: 1.2; color: var(--ink); }
.sprod__price { display: flex; align-items: baseline; gap: 8px; }
.sprod__old { font-size: 13px; color: var(--muted); text-decoration: line-through; }
.sprod__new { font-size: 15px; color: var(--ink); }
.sprod .qbtn { width: 100%; }

/* mockup: Novidades / promos */
.feed2 { max-width: var(--w-panel); margin: 40px auto 0; padding: 16px; text-align: left; }
.feed2__head { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; color: var(--faint); margin-bottom: 12px; }
.fnote { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 12px; }
.fnote:last-child { margin-bottom: 0; }
.fnote__ico { width: 38px; height: 38px; border-radius: 10px; flex: none; display: grid; place-items: center; color: var(--brand); background: var(--brand-soft); border: 1px solid var(--brand-line); }
.fnote__ico svg { width: 19px; height: 19px; }
.fnote__b { flex: 1; min-width: 0; }
.fnote__t { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.fnote__d { font-size: 12px; color: var(--muted); margin-top: 2px; }
.fnote__tag { flex: none; font-size: 10.5px; font-weight: 700; color: var(--brand-strong); background: var(--brand-soft); padding: 4px 8px; border-radius: 99px; }
.fnote--promo { background: var(--grad-brand); border-color: transparent; box-shadow: var(--sh-brand); }
.fnote--promo .fnote__t { color: #fff; }
.fnote--promo .fnote__d { color: #fff; opacity: .9; }
.fnote--promo .fnote__ico { background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.4); color: #fff; }
.fnote--promo .qbtn { background: #fff; color: var(--brand-strong); box-shadow: none; }
[data-frag].is-shown .fnote--promo { animation: popin .5s var(--ease) .4s backwards; }

/* mockup: Restock favoritos */
.restock { max-width: var(--w-panel); margin: 40px auto 0; padding: 16px; text-align: left; }
.restock__head { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; color: var(--faint); margin-bottom: 12px; }
.ritem { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 12px; }
.ritem:last-child { margin-bottom: 0; }
.ritem__thumb { width: 40px; height: 40px; border-radius: 10px; flex: none; display: grid; place-items: center; color: var(--brand); background: linear-gradient(135deg, var(--brand-soft), var(--surface-2)); border: 1px solid var(--line); }
.ritem__thumb svg { width: 20px; height: 20px; }
.ritem__b { flex: 1; min-width: 0; }
.ritem__n { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.ritem__m { font-size: 11.5px; color: var(--faint); margin-top: 2px; }
.ritem__warn { color: var(--warning); font-weight: 700; }
.ritem__price { flex: none; font: 600 12px var(--font-mono); color: var(--faint); }
.ritem--low { border-color: var(--warning-soft); background: linear-gradient(0deg, var(--warning-soft), transparent 65%); }

/* mockup: leitor de curso (vídeo + transcrição + currículo) */
.player { max-width: var(--w-mock); margin: 40px auto 0; padding: 0; overflow: hidden; display: grid; grid-template-columns: 1fr 210px; text-align: left; }
@media (max-width: 820px) { .player { grid-template-columns: 1fr; } .player__side { display: none; } }
.player__main { min-width: 0; }
.player__tabs { display: flex; gap: 4px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.ptab { font-size: 12px; font-weight: 600; color: var(--muted); padding: 8px 12px; border-radius: 8px; }
.ptab.is-on { background: var(--brand-soft); color: var(--brand-strong); }
.player__transcript { padding: 16px; display: grid; gap: 12px; }
.player__transcript p { font-size: 13px; line-height: 1.5; color: var(--muted); }
.player__transcript b { color: var(--ink); font-weight: 700; }
.player__side { border-left: 1px solid var(--line); padding: 16px; background: var(--surface-2); }
.player__side-h { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; color: var(--faint); margin-bottom: 12px; }
.clesson { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 8px; font-size: 12.5px; color: var(--muted); }
.clesson__i { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: 10px; flex: none; background: var(--surface); border: 1px solid var(--line-strong); color: var(--faint); }
.clesson--done { color: var(--ink); }
.clesson--done .clesson__i { background: var(--success-soft); color: var(--success); border-color: transparent; }
.clesson--now { background: var(--brand-soft); color: var(--brand-strong); font-weight: 600; }
.clesson--now .clesson__i { background: var(--brand); color: #fff; border-color: transparent; }

/* bónus: agente de IA (chat) */
.bonus-tag { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 16px; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--brand-strong); background: var(--brand-soft); border: 1px solid var(--brand-line); padding: 4px 12px; border-radius: 99px; }
.bonus-tag svg { width: 14px; height: 14px; }
.aichat { max-width: var(--w-panel); margin: 40px auto 0; padding: 0; overflow: hidden; text-align: left; }
.aichat__head { display: flex; align-items: center; gap: 12px; padding: 16px; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, var(--brand-soft), transparent), var(--surface); }
.aichat__ava { width: 36px; height: 36px; border-radius: 10px; flex: none; display: grid; place-items: center; color: #fff; background: var(--grad-brand); box-shadow: var(--sh-brand); }
.aichat__ava svg { width: 19px; height: 19px; }
.aichat__name { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.aichat__sub { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.aichat__body { padding: 16px; display: grid; gap: 12px; }
.msg { display: flex; gap: 12px; max-width: 88%; }
.msg--user { margin-left: auto; }
.msg--user .msg__b { background: var(--brand-soft); border-color: var(--brand-line); color: var(--ink); }
.msg--ai { margin-right: auto; }
.msg__ava { width: 28px; height: 28px; border-radius: 8px; flex: none; display: grid; place-items: center; color: var(--brand); background: var(--brand-soft); border: 1px solid var(--brand-line); align-self: flex-end; }
.msg__ava svg { width: 15px; height: 15px; }
.msg__b { padding: 12px; border-radius: 14px; font-size: 13px; line-height: 1.45; color: var(--ink); background: var(--surface-2); border: 1px solid var(--line); }
.msg__src { display: inline-flex; align-items: center; margin-top: 8px; font-size: 11px; font-weight: 600; color: var(--brand-strong); background: var(--surface); border: 1px solid var(--brand-line); padding: 4px 8px; border-radius: 99px; }
.aichat__input { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--line); }
.aichat__input span { flex: 1; font-size: 13px; color: var(--faint); }
.aichat__send { width: 34px; height: 34px; border-radius: 9px; border: none; background: var(--grad-brand); color: #fff; display: grid; place-items: center; cursor: pointer; box-shadow: var(--sh-brand); }
.aichat__send svg { width: 16px; height: 16px; }
[data-frag].is-shown .msg--user { animation: popin .4s var(--ease) .2s backwards; }
[data-frag].is-shown .msg--ai { animation: popin .5s var(--ease) .7s backwards; }

/* mockup: CRM + analytics (admin) */
.admin { max-width: var(--w-mock); margin: 40px auto 0; padding: 0; overflow: hidden; }
.admin__body { padding: 20px; display: grid; gap: 16px; text-align: left; }
.admin__kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 760px) { .admin__kpis { grid-template-columns: repeat(2, 1fr); } }
.kpi { border: 1px solid var(--line); border-radius: 12px; padding: 12px; }
.kpi__l { font-size: 11px; color: var(--muted); }
.kpi__v { font: 700 22px var(--font-mono); letter-spacing: -.02em; color: var(--ink); margin-top: 8px; }
.kpi__t { font-size: 11px; font-weight: 700; color: var(--success); margin-top: 2px; }
.achart { border: 1px solid var(--line); border-radius: 12px; padding: 16px; }
.achart__h { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
.achart__t { font-size: 12px; font-weight: 700; color: var(--ink); }
.achart__m { font-size: 11px; color: var(--faint); font-family: var(--font-mono); }
.achart svg { width: 100%; height: 60px; display: block; }
.achart__area { fill: var(--brand-soft); opacity: .7; }
.achart__line { fill: none; stroke: var(--brand); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
[data-frag].is-shown .achart__line { animation: draw 1.4s var(--ease) .3s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.crm { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.crm__h, .crm__r { display: grid; grid-template-columns: 1.6fr .8fr .8fr .9fr .9fr; gap: 12px; align-items: center; padding: 12px 16px; }
.crm__h { background: var(--surface-2); border-bottom: 1px solid var(--line); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: var(--faint); }
.crm__r { border-bottom: 1px solid var(--line); font-size: 12.5px; color: var(--ink); }
.crm__r:last-child { border-bottom: none; }
.crm__name { display: flex; align-items: center; gap: 8px; min-width: 0; }
.crm__av { width: 26px; height: 26px; border-radius: 50%; flex: none; background: var(--grad-brand); color: #fff; display: grid; place-items: center; font: 700 11px var(--font-sans); }
.crm__num { font-family: var(--font-mono); color: var(--muted); }
.crm__ltv { font-family: var(--font-mono); font-weight: 700; color: var(--brand-strong); }

/* mockup: Comunidade (mural) */
.comm { max-width: var(--w-panel); margin: 40px auto 0; padding: 0; overflow: hidden; text-align: left; }
.comm__tabs { display: flex; gap: 4px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.ctab { font-size: 12.5px; font-weight: 600; color: var(--muted); padding: 8px 12px; border-radius: 8px; }
.ctab.is-on { background: var(--brand-soft); color: var(--brand-strong); }
.comm__feed { padding: 16px; display: grid; gap: 12px; }
.cpost { display: flex; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; }
.cpost__av { width: 34px; height: 34px; border-radius: 50%; flex: none; background: var(--grad-brand); color: #fff; display: grid; place-items: center; font: 700 13px var(--font-sans); }
.cpost__b { flex: 1; min-width: 0; }
.cpost__t { font-size: 13px; line-height: 1.4; color: var(--ink); }
.cpost__t b { font-weight: 700; }
.cpost__meta { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.cchip { font-size: 11px; font-weight: 700; padding: 4px 8px; border-radius: 99px; }
.cchip--coupon { color: var(--brand-strong); background: var(--brand-soft); border: 1px solid var(--brand-line); }
.cchip--sale { color: var(--success); background: var(--success-soft); }
.cchip--tag { color: var(--muted); background: var(--surface-2); border: 1px solid var(--line); }
.cpost__react { font-size: 11.5px; color: var(--faint); }
[data-frag].is-shown .cpost { animation: popin .45s var(--ease) backwards; }
[data-frag].is-shown .cpost:nth-child(2) { animation-delay: .18s; }
[data-frag].is-shown .cpost:nth-child(3) { animation-delay: .36s; }

/* painéis extra do dashboard de analytics */
.admin__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 760px) { .admin__cols { grid-template-columns: 1fr; } }
.apanel { border: 1px solid var(--line); border-radius: 12px; padding: 12px; text-align: left; }
.apanel__h { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; color: var(--faint); margin-bottom: 8px; }
.apanel__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 0; font-size: 12.5px; color: var(--ink); }
.apanel__row b { color: var(--brand-strong); }

/* lista completa de bullets (métricas / features) — 2 colunas */
.metrics { margin: 40px auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 32px; max-width: var(--w-block); text-align: left; }
@media (max-width: 760px) { .metrics { grid-template-columns: 1fr; } }
.metric { position: relative; padding-left: 24px; font-size: 15px; line-height: 1.35; color: var(--ink); }
.metric::before { content: ""; position: absolute; left: 0; top: .5em; width: 8px; height: 8px; border-radius: 50%; background: var(--grad-brand); box-shadow: 0 0 0 4px var(--brand-soft); }
.metric b { color: var(--brand-strong); font-weight: 700; }
[data-frag].is-shown .metric { animation: fadeup .4s var(--ease) calc(var(--i, 0) * .05s) backwards; }

/* exemplos da comunidade: chat + suporte */
.cgrid { margin: 40px auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: var(--w-mock); }
@media (max-width: 760px) { .cgrid { grid-template-columns: 1fr; } }
.cmock { padding: 0; overflow: hidden; text-align: left; display: flex; flex-direction: column; }
.cmock__h { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.cmock__t { font-size: 12.5px; font-weight: 700; color: var(--ink); }
.cmock__n { font-size: 11px; font-weight: 600; color: var(--success); }
.cmock__tag { font-size: 10px; font-weight: 700; color: var(--success); background: var(--success-soft); padding: 2px 8px; border-radius: 99px; }
.cmock__body { padding: 16px; display: grid; gap: 12px; flex: 1; align-content: space-between; }
.cmock__input { margin: 0 16px 16px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 99px; font-size: 12px; color: var(--faint); background: var(--surface-2); }
.cmsg { display: flex; gap: 8px; align-items: flex-end; max-width: 92%; }
.cmsg--in { margin-right: auto; }
.cmsg--out { margin-left: auto; flex-direction: row-reverse; }
.cmsg__av { width: 24px; height: 24px; border-radius: 50%; flex: none; background: var(--grad-brand); color: #fff; display: grid; place-items: center; font: 700 10px var(--font-sans); }
.cmsg__b { padding: 8px 12px; border-radius: 12px; font-size: 12.5px; line-height: 1.35; background: var(--surface-2); border: 1px solid var(--line); color: var(--ink); }
.cmsg--out .cmsg__b { background: var(--brand-soft); border-color: var(--brand-line); }
.qa__q { font-size: 13px; font-weight: 700; color: var(--ink); }
.qa__a { display: flex; gap: 8px; align-items: flex-start; }
.qa__av { width: 22px; height: 22px; border-radius: 50%; flex: none; background: var(--grad-brand); color: #fff; display: grid; place-items: center; font: 700 10px var(--font-sans); }
.qa__av--ai { background: var(--surface); color: var(--brand); border: 1px solid var(--brand-line); }
.qa__b { font-size: 12px; line-height: 1.4; color: var(--muted); }
.qa__src { color: var(--brand-strong); font-weight: 600; }
[data-frag].is-shown .cmsg { animation: popin .4s var(--ease) backwards; }
[data-frag].is-shown .cmsg:nth-child(2) { animation-delay: .15s; }
[data-frag].is-shown .cmsg:nth-child(3) { animation-delay: .3s; }

/* exemplo da comunidade: conclusão → cupão */
.celebrate { max-width: var(--w-card); margin: 40px auto 0; padding: 24px; text-align: center; }
.celebrate__burst { font-size: 38px; line-height: 1; }
.celebrate__t { font-size: 17px; font-weight: 800; letter-spacing: -.01em; color: var(--ink); margin-top: 8px; }
.celebrate__sub { font-size: 13px; color: var(--muted); margin-top: 8px; }
.coupon { display: flex; align-items: center; gap: 16px; margin: 16px 0; padding: 16px; border-radius: 14px; border: 1px dashed var(--brand-line); background: var(--brand-soft); text-align: left; }
.coupon__v { font: 800 30px var(--font-mono); letter-spacing: -.03em; background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.coupon__l { font-size: 12px; font-weight: 600; color: var(--brand-strong); }
.coupon__code { margin-top: 4px; font-size: 14px; font-weight: 700; letter-spacing: .05em; color: var(--ink); }
.celebrate .qbtn { width: 100%; padding: 12px; }
[data-frag].is-shown .coupon { animation: popin .5s var(--ease) .25s backwards; }

/* exemplos da analytics: heatmap + barras */
.heat { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px; border-radius: 8px; margin-bottom: 8px; font-size: 12.5px; color: var(--ink); background: rgba(183, 58, 130, calc(var(--p) / 120)); }
.heat:last-child { margin-bottom: 0; }
.heat b { font-family: var(--font-mono); font-weight: 700; color: var(--brand-strong); }
.bar { display: grid; grid-template-columns: 112px 1fr 52px; gap: 12px; align-items: center; padding: 8px 0; font-size: 12px; color: var(--ink); }
.bar__l { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar__t { height: 8px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.bar__t i { display: block; height: 100%; border-radius: 99px; background: var(--grad-brand); }
.bar b { font-family: var(--font-mono); font-weight: 700; color: var(--brand-strong); text-align: right; }

/* exemplo da analytics: risco de desistência */
.risk { max-width: var(--w-card); margin: 40px auto 0; padding: 20px; text-align: left; }
.risk__head { display: flex; align-items: center; gap: 12px; }
.risk__av { width: 40px; height: 40px; border-radius: 50%; flex: none; background: var(--grad-brand); color: #fff; display: grid; place-items: center; font: 700 15px var(--font-sans); }
.risk__n { font-size: 15px; font-weight: 700; color: var(--ink); }
.risk__m { font-size: 12px; color: var(--muted); }
.risk__flag { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--warning); background: var(--warning-soft); padding: 4px 10px; border-radius: 99px; }
.risk__signals { display: grid; gap: 12px; margin: 16px 0; }
.risk__sig { font-size: 13px; color: var(--ink); padding: 8px 12px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); }
.risk__sig b { color: var(--warning); font-weight: 700; }
.risk .qbtn { width: 100%; padding: 12px; }

/* analytics: funil de conclusão */
.fnl__row { display: grid; grid-template-columns: 92px 1fr 44px; gap: 12px; align-items: center; padding: 4px 0; font-size: 12px; color: var(--ink); }
.fnl__bar { height: 22px; border-radius: 6px; background: var(--grad-brand); }
.fnl__pct { font-family: var(--font-mono); font-weight: 700; color: var(--brand-strong); text-align: right; }

/* analytics: heatmap "quando estudam" */
.wgrid { display: grid; grid-template-columns: auto repeat(7, 1fr); gap: 4px; }
.wgrid__d { font-size: 10px; color: var(--faint); text-align: center; padding-bottom: 2px; }
.wcell { aspect-ratio: 1; border-radius: 4px; border: 1px solid var(--line); background: rgba(183, 58, 130, calc(var(--p, 0) / 100)); }

/* comunidade: post de 1.ª venda */
.salepost { max-width: var(--w-card); margin: 40px auto 0; padding: 20px; text-align: left; }
.salepost__h { display: flex; align-items: center; gap: 12px; }
.salepost__av { width: 40px; height: 40px; border-radius: 50%; flex: none; background: var(--grad-brand); color: #fff; display: grid; place-items: center; font: 700 15px var(--font-sans); }
.salepost__n { font-size: 14px; font-weight: 700; color: var(--ink); }
.salepost__sub { font-size: 12px; color: var(--muted); }
.salepost__order { display: flex; align-items: center; gap: 12px; margin: 16px 0; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); }
.salepost__thumb { width: 42px; height: 42px; border-radius: 9px; flex: none; display: grid; place-items: center; color: var(--brand); background: linear-gradient(135deg, var(--brand-soft), var(--surface)); border: 1px solid var(--brand-line); }
.salepost__thumb svg { width: 20px; height: 20px; }
.salepost__pname { font-size: 13px; font-weight: 600; color: var(--ink); }
.salepost__meta { font-size: 11px; color: var(--faint); margin-top: 2px; }
.salepost__price { margin-left: auto; font: 700 16px var(--font-mono); color: var(--brand-strong); }
.salepost__react { font-size: 12.5px; color: var(--faint); display: flex; gap: 16px; flex-wrap: wrap; }

/* comunidade: badges */
.badges { max-width: var(--w-panel); margin: 40px auto 0; padding: 20px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 560px) { .badges { grid-template-columns: repeat(2, 1fr); } }
.bdg { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 8px; border: 1px solid var(--line); border-radius: 12px; }
.bdg__ico { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-size: 22px; background: var(--brand-soft); border: 1px solid var(--brand-line); }
.bdg__l { font-size: 11.5px; font-weight: 600; color: var(--ink); }
.bdg--locked { opacity: .5; }
.bdg--locked .bdg__ico { background: var(--surface-2); border-color: var(--line); }

/* divisor de feature (slide de separação) */
.fdiv__ico { display: inline-grid; place-items: center; width: 72px; height: 72px; border-radius: 20px; background: var(--grad-brand); color: #fff; box-shadow: var(--sh-brand); margin-bottom: 24px; }
.fdiv__ico svg { width: 34px; height: 34px; }

/* loja de aluna: montra */
.shop { max-width: var(--w-mock); margin: 40px auto 0; padding: 0; overflow: hidden; text-align: left; }
.shop__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, var(--brand-soft), transparent), var(--surface); }
.shop__brand { display: flex; align-items: center; gap: 12px; }
.shop__logo { width: 38px; height: 38px; border-radius: 10px; flex: none; display: grid; place-items: center; background: var(--grad-brand); color: #fff; font: 800 16px var(--font-sans); }
.shop__name { font-size: 15px; font-weight: 800; letter-spacing: -.01em; color: var(--ink); }
.shop__sub { font-size: 11.5px; color: var(--muted); }
.shop__tab { font-size: 12px; color: var(--muted); white-space: nowrap; }
.shop__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; padding: 16px; }
@media (max-width: 700px) { .shop__grid { grid-template-columns: repeat(2, 1fr); } .shop__tab { display: none; } }
.pcard { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.pcard__img { height: 84px; background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23caa2c9'%20stroke-opacity='0.55'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='3'%20y='4'%20width='18'%20height='16'%20rx='2'/%3E%3Ccircle%20cx='8.5'%20cy='9'%20r='1.5'/%3E%3Cpath%20d='m21%2016-5-5L5%2020'/%3E%3C/svg%3E") center / 22px no-repeat, linear-gradient(135deg, var(--brand-soft), var(--surface-2)); }
.pcard__b { padding: 12px; }
.pcard__n { font-size: 12px; font-weight: 600; line-height: 1.2; color: var(--ink); }
.pcard__p { font: 700 14px var(--font-mono); color: var(--brand-strong); margin-top: 4px; }

/* loja de aluna: página de produto */
.ppage { padding: 0; overflow: hidden; text-align: left; }
.ppage__img { height: 150px; background: linear-gradient(135deg, var(--brand-soft), var(--surface-2)); }
.ppage__b { padding: 16px; }
.ppage__n { font-size: 14px; font-weight: 700; color: var(--ink); }
.ppage__p { font: 800 22px var(--font-mono); color: var(--ink); margin: 8px 0 12px; }
.ppage .qbtn { width: 100%; padding: 12px; }

/* loja de aluna: lista de encomendas */
.orow { display: grid; grid-template-columns: 38px 1fr auto; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.orow:last-child { border-bottom: none; }
.orow__id { font: 600 11px var(--font-mono); color: var(--faint); }
.orow__n { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.orow__track { font: 500 10.5px var(--font-mono); color: var(--brand-strong); margin-top: 2px; }

/* loja de aluna: pagamentos */
.paycard { padding: 20px; text-align: left; }
.paycard__ico { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; color: var(--brand); background: var(--brand-soft); border: 1px solid var(--brand-line); margin-bottom: 12px; }
.paycard__ico svg { width: 20px; height: 20px; }
.paycard__t { font-size: 15px; font-weight: 700; color: var(--ink); }
.paycard__tag { display: inline-block; margin-left: 8px; font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 99px; }
.paycard__tag--auto { color: var(--success); background: var(--success-soft); }
.paycard__tag--manual { color: var(--warning); background: var(--warning-soft); }
.paycard__d { font-size: 13px; color: var(--muted); margin-top: 12px; line-height: 1.45; }

/* loja de aluna: payoff (receita) */
.cgrid--rev { max-width: var(--w-panel); }
.revcard { padding: 24px; text-align: center; }
.revcard__ico { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; margin: 0 auto 12px; color: #fff; background: var(--grad-brand); box-shadow: var(--sh-brand); }
.revcard__ico svg { width: 24px; height: 24px; }
.revcard__t { font-size: 16px; font-weight: 800; color: var(--ink); }
.revcard__d { font-size: 13px; color: var(--muted); margin-top: 8px; line-height: 1.4; }

/* loja de aluna: coleções + gestão de stock */
.coll { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.coll:last-child { border-bottom: none; }
.coll__ico { width: 32px; height: 32px; border-radius: 8px; flex: none; display: grid; place-items: center; font-size: 16px; background: var(--brand-soft); border: 1px solid var(--brand-line); }
.coll__n { font-size: 13px; font-weight: 600; color: var(--ink); }
.coll__m { font-size: 11px; color: var(--faint); }
.prow { display: grid; grid-template-columns: 1fr auto auto; gap: 16px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 12.5px; }
.prow:last-child { border-bottom: none; }
.prow__n { color: var(--ink); font-weight: 600; }
.prow__price { font-family: var(--font-mono); font-weight: 700; color: var(--brand-strong); }
.prow__stock { font-size: 11.5px; color: var(--muted); }
.prow__stock--low { color: var(--warning); font-weight: 700; }

/* loja de aluna — Página de produto (mockup dedicado) */
.pp {
  max-width: var(--w-mock);
  margin: 40px auto 0;
  text-align: left;
  padding: 20px;
}
.pp__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}
.pp__hero {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: linear-gradient(145deg, var(--brand-soft), var(--surface-2));
  overflow: hidden;
}
.pp__heroBadge {
  position: absolute;
  left: 12px;
  bottom: 12px;
  font-size: 11px;
  font-weight: 600;
  color: var(--brand-strong);
  background: var(--surface);
  border: 1px solid var(--brand-line);
  padding: 4px 10px;
  border-radius: 99px;
}
.pp__thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 12px;
}
.pp__thumb {
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: linear-gradient(145deg, var(--surface-2), var(--brand-soft));
  cursor: pointer;
  padding: 0;
}
.pp__thumb--active {
  border: 2px solid var(--brand);
}
.pp__info {
  display: flex;
  flex-direction: column;
}
.pp__tag {
  align-self: flex-start;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--brand-strong);
  background: var(--brand-soft);
  border: 1px solid var(--brand-line);
  padding: 4px 8px;
  border-radius: 99px;
}
.pp__name {
  margin: 12px 0 8px;
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
}
.pp__price {
  margin: 0 0 12px;
  font-size: 28px;
  font-weight: 700;
  color: var(--ink);
}
.pp__desc {
  margin: 0 0 16px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
}
.pp__field {
  margin-bottom: 16px;
}
.pp__label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--faint);
  margin-bottom: 8px;
}
.pp__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.pp__chip {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  padding: 8px 12px;
  border-radius: 99px;
  cursor: pointer;
}
.pp__chip--active {
  color: var(--brand-strong);
  background: var(--brand-soft);
  border-color: var(--brand);
  font-weight: 600;
}
.pp__row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.pp__qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  overflow: hidden;
}
.pp__step {
  width: 36px;
  height: 38px;
  border: none;
  background: var(--surface);
  color: var(--ink);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.pp__step:hover {
  background: var(--surface-2);
}
.pp__qtyVal {
  min-width: 38px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pp__stock {
  font-size: 12px;
  font-weight: 600;
  color: var(--success);
  background: var(--success-soft);
  border-radius: 99px;
  padding: 8px 12px;
  white-space: nowrap;
}
.pp__buy {
  width: 100%;
  margin-bottom: 12px;
}
.pp__add {
  width: 100%;
}
@media (max-width: 760px) {
  .pp__grid {
    grid-template-columns: 1fr;
  }
}

/* loja de aluna — Coleções (mockup dedicado) */
.cl{max-width:var(--w-mock);margin:40px auto 0;text-align:left;padding:20px}
.cl__head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding-bottom:16px;border-bottom:1px solid var(--line);margin-bottom:16px}
.cl__title{display:flex;flex-direction:column;gap:4px}
.cl__h{margin:0;font-size:17px;font-weight:700;color:var(--ink);letter-spacing:-.01em}
.cl__count{font-family:var(--font-mono);font-size:12px;color:var(--faint)}
.cl__new{padding:8px 16px;font-size:13px;border-radius:10px;white-space:nowrap}
.cl__grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.cl__col{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface);transition:box-shadow .15s ease,border-color .15s ease}
.cl__col:hover{border-color:var(--brand-line);box-shadow:var(--sh-card)}
.cl__cover{height:80px;display:flex;align-items:center;justify-content:center;font-size:34px;background:linear-gradient(135deg,var(--brand-soft),var(--surface-2))}
.cl__meta{padding:12px 16px 16px}
.cl__name{margin:0;font-size:14px;font-weight:600;color:var(--ink)}
.cl__num{margin:4px 0 12px;font-family:var(--font-mono);font-size:12px;color:var(--muted)}
.cl__thumbs{display:flex}
.cl__thumb{width:30px;height:30px;border-radius:8px;border:2px solid var(--surface);display:flex;align-items:center;justify-content:center;font-size:14px;background:var(--surface-2);margin-left:-8px}
.cl__thumb:first-child{margin-left:0}
.cl__thumb:nth-child(2){background:var(--brand-soft)}
.cl__col--new{border:1.5px dashed var(--line-strong);background:transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:158px;cursor:pointer;font-family:inherit;color:var(--muted);text-align:center}
.cl__col--new:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-soft)}
.cl__plus{font-size:26px;line-height:1}
.cl__newlabel{font-size:13px;font-weight:600}
.cl__newhint{font-size:11px;color:var(--faint)}
.cl__col--new:hover .cl__newhint{color:var(--brand-strong)}
@media (max-width:760px){
  .cl__grid{grid-template-columns:1fr}
  .cl__head{flex-direction:column}
  .cl__new{align-self:flex-start}
}

/* loja de aluna — Preços & stock (mockup dedicado) */
.inv { max-width: var(--w-mock); margin: 40px auto 0; text-align: left; padding: 24px; }

.inv__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.inv__title { margin: 0; font-size: 18px; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; }
.inv__sub { margin: 4px 0 0; font-size: 13px; color: var(--muted); }
.inv__alert { color: var(--warning); font-weight: 600; }

.inv__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
.inv__search { display: flex; align-items: center; gap: 8px; flex: 1 1 220px; min-width: 180px; padding: 8px 12px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; color: var(--faint); font-size: 13px; }
.inv__search svg { width: 16px; height: 16px; flex: none; }
.inv__filters { display: flex; gap: 8px; }
.inv__chip { padding: 8px 12px; border-radius: 99px; border: 1px solid var(--line); font-size: 12px; font-weight: 600; color: var(--muted); background: var(--surface); white-space: nowrap; }
.inv__chip--on { background: var(--brand-soft); border-color: var(--brand-line); color: var(--brand-strong); }

.inv__table { margin-top: 16px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.inv__row { display: grid; grid-template-columns: 1fr 76px 82px 116px 82px; align-items: center; gap: 16px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.inv__row:last-child { border-bottom: none; }
.inv__row--head { background: var(--surface-2); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--faint); font-weight: 700; padding-top: 12px; padding-bottom: 12px; }
.inv__row--head .inv__num { text-align: left; }
.inv__row--out { background: var(--danger-soft); }
.inv__row--out .inv__name { color: var(--muted); }

.inv__prod { display: flex; align-items: center; gap: 12px; min-width: 0; }
.inv__ico { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex: none; border-radius: 9px; background: var(--brand-soft); border: 1px solid var(--brand-line); color: var(--brand); }
.inv__ico svg { width: 18px; height: 18px; }
.inv__name { margin: 0; font-size: 14px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inv__sku { margin: 2px 0 0; font-size: 11px; color: var(--faint); }

.inv__price { font-size: 14px; font-weight: 600; color: var(--ink); }
.inv__stock { font-size: 14px; color: var(--ink); }
.inv__stock--low { color: var(--warning); font-weight: 600; }
.inv__stock--out { color: var(--danger); font-weight: 600; }

.inv__pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 99px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.inv__pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.inv__pill--success { background: var(--success-soft); color: var(--success); }
.inv__pill--warning { background: var(--warning-soft); color: var(--warning); }
.inv__pill--danger { background: var(--danger-soft); color: var(--danger); }
.inv__row--out .inv__pill--danger { background: var(--surface); border: 1px solid var(--danger-soft); }

.inv__edit { padding: 8px 12px; font-size: 12px; justify-self: end; }

.inv__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; padding-top: 4px; font-size: 13px; }
.inv__foot-note { color: var(--faint); }
.inv__foot-total { color: var(--muted); }
.inv__foot-total strong { color: var(--ink); margin-left: 8px; font-size: 14px; }

@media (max-width: 760px) {
  .inv__row { grid-template-columns: 1fr auto auto; gap: 12px; padding: 12px; }
  .inv__row .inv__pill, .inv__row--head span:nth-child(4) { display: none; }
  .inv__edit { display: none; }
  .inv__sku { display: none; }
  .inv__ico { width: 30px; height: 30px; }
}

/* loja de aluna — Encomendas & tracking (mockup dedicado) */
.ord {
  max-width: var(--w-mock);
  margin: 40px auto 0;
  text-align: left;
  padding: 0;
  overflow: hidden;
}
.ord__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
}
.ord__head-left {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.ord__title {
  font-weight: 700;
  font-size: 16px;
  color: var(--ink);
}
.ord__count {
  font-size: 12px;
  color: var(--brand-strong);
  background: var(--brand-soft);
  border: 1px solid var(--brand-line);
  padding: 2px 8px;
  border-radius: 99px;
}
.ord__head-right {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ord__head-right .qbtn {
  font-size: 12.5px;
  padding: 8px 12px;
}
.ord__scroll {
  overflow-x: auto;
}
.ord__table {
  display: block;
  min-width: 560px;
}
.ord__row {
  display: grid;
  grid-template-columns: 64px 1fr 1.25fr 1fr 0.95fr 0.9fr;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--line);
}
.ord__row:last-child {
  border-bottom: none;
}
.ord__row:not(.ord__row--head):hover {
  background: var(--surface-2);
}
.ord__row--head {
  background: var(--surface-2);
}
.ord__row--head .ord__cell {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--faint);
}
.ord__cell {
  font-size: 13.5px;
  color: var(--ink);
  min-width: 0;
}
.ord__cell--id {
  color: var(--brand-strong);
  font-size: 13px;
}
.ord__client {
  font-weight: 600;
}
.ord__prod {
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ord__cell--track {
  color: var(--ink);
  font-size: 12.5px;
}
.ord__cell--empty {
  color: var(--faint);
}
.ord__chip {
  display: inline-block;
  font-size: 11.5px;
  color: var(--muted);
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  padding: 4px 8px;
  border-radius: 99px;
  white-space: nowrap;
}
.ord__pill {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 99px;
  white-space: nowrap;
}
.ord__pill--success {
  color: var(--success);
  background: var(--success-soft);
}
.ord__pill--warning {
  color: var(--warning);
  background: var(--warning-soft);
}
.ord__pill--neutral {
  color: var(--faint);
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
}
.ord__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 20px;
  border-top: 1px solid var(--line);
  background: var(--surface-2);
}
.ord__foot-note {
  font-size: 12px;
  color: var(--muted);
}
.ord__legend {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  color: var(--faint);
}
.ord__dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 99px;
  margin-right: -4px;
  vertical-align: middle;
}
.ord__dot--success { background: var(--success); }
.ord__dot--warning { background: var(--warning); }
.ord__dot--neutral { background: var(--line-strong); }
@media (max-width: 760px) {
  .ord__head {
    flex-direction: column;
    align-items: flex-start;
  }
  .ord__head-right {
    width: 100%;
  }
  .ord__head-right .qbtn {
    flex: 1;
  }
  .ord__foot {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

/* loja de aluna — Checkout / pagamentos (mockup dedicado) */
.ck{ max-width:var(--w-mock); margin:40px auto 0; text-align:left; padding:0; overflow:hidden; }
.ck__head{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 24px; border-bottom:1px solid var(--line); background:var(--surface-2); }
.ck__brand{ display:flex; align-items:center; gap:12px; }
.ck__logo{ width:38px; height:38px; flex:none; display:grid; place-items:center; font-size:18px; border-radius:10px; background:var(--brand-soft); border:1px solid var(--brand-line); }
.ck__shop{ margin:0; font-weight:700; color:var(--ink); font-size:14px; }
.ck__step{ margin:2px 0 0; color:var(--muted); font-size:12px; }
.ck__secure{ display:inline-flex; align-items:center; gap:8px; color:var(--success); font-size:12px; font-weight:600; white-space:nowrap; }
.ck__grid{ display:grid; grid-template-columns:1fr 1fr; }
.ck__col{ padding:20px 24px; background:var(--surface); }
.ck__col--summary{ border-right:1px solid var(--line); }
.ck__coltitle{ margin:0 0 16px; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); font-weight:700; }
.ck__item{ display:flex; align-items:center; gap:12px; padding-bottom:16px; border-bottom:1px solid var(--line); }
.ck__thumb{ width:42px; height:42px; flex:none; display:grid; place-items:center; font-size:20px; border-radius:10px; background:var(--brand-soft); border:1px solid var(--brand-line); }
.ck__itembody{ flex:1; min-width:0; }
.ck__name{ margin:0; font-size:13px; font-weight:600; color:var(--ink); }
.ck__meta{ margin:2px 0 0; font-size:11px; color:var(--muted); }
.ck__qty{ font-size:12px; color:var(--muted); }
.ck__price{ font-size:13px; font-weight:600; color:var(--ink); }
.ck__rows{ padding:16px 0; display:grid; gap:8px; }
.ck__row{ display:flex; justify-content:space-between; font-size:13px; color:var(--muted); }
.ck__row .mono{ color:var(--ink); }
.ck__total{ display:flex; align-items:baseline; justify-content:space-between; padding-top:16px; border-top:1px solid var(--line-strong); }
.ck__totallabel{ font-size:13px; font-weight:700; color:var(--ink); }
.ck__totalval{ font-size:22px; font-weight:700; color:var(--brand-strong); }
.ck__tabs{ display:flex; gap:4px; padding:4px; background:var(--surface-2); border:1px solid var(--line); border-radius:12px; margin-bottom:16px; }
.ck__tab{ flex:1; border:0; background:transparent; font:inherit; font-size:12px; font-weight:600; color:var(--muted); padding:8px; border-radius:9px; cursor:pointer; }
.ck__tab--on{ background:var(--surface); color:var(--brand-strong); box-shadow:var(--sh-card); }
.ck__form{ display:grid; gap:12px; }
.ck__field{ display:grid; gap:8px; min-width:0; }
.ck__label{ font-size:12px; font-weight:600; color:var(--ink); }
.ck__input{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:12px; border:1px solid var(--line-strong); border-radius:10px; background:var(--surface); }
.ck__input--card{ border-color:var(--brand-line); box-shadow:var(--sh-brand); }
.ck__cardno{ font-size:14px; color:var(--ink); letter-spacing:.04em; }
.ck__brandmark{ font-size:10px; font-weight:800; letter-spacing:.1em; color:var(--brand); }
.ck__input .mono{ font-size:14px; color:var(--ink); }
.ck__fieldrow{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.ck__pay{ width:100%; margin-top:4px; }
.ck__hint{ margin:16px 0 0; font-size:11px; line-height:1.5; color:var(--muted); padding-top:12px; border-top:1px dashed var(--line); }
@media (max-width:760px){
  .ck__grid{ grid-template-columns:1fr; }
  .ck__col--summary{ border-right:0; border-bottom:1px solid var(--line); }
  .ck__secure{ display:none; }
}


/* receitas — caderno de fórmulas */
.recipe { max-width: var(--w-mock); margin: 40px auto 0; padding: 0; overflow: hidden; display: grid; grid-template-columns: 220px 1fr; text-align: left; }
@media (max-width: 760px) { .recipe { grid-template-columns: 1fr; } .recipe__list { display: none; } }
.recipe__list { border-right: 1px solid var(--line); background: var(--surface-2); padding: 16px; }
.recipe__list-h { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; color: var(--faint); margin-bottom: 12px; }
.rec-item { padding: 8px 12px; border-radius: 8px; font-size: 12.5px; color: var(--muted); margin-bottom: 2px; }
.rec-item--on { background: var(--brand-soft); color: var(--brand-strong); font-weight: 600; }
.recipe__main { padding: 20px; }
.recipe__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.recipe__title { margin: 0; font-size: 16px; font-weight: 700; color: var(--ink); }
.recipe__meta { margin: 4px 0 0; font-size: 12px; color: var(--muted); }
.recipe__tag { font-size: 11px; font-weight: 700; color: var(--brand-strong); background: var(--brand-soft); border: 1px solid var(--brand-line); padding: 4px 8px; border-radius: 99px; white-space: nowrap; }
.recipe__h2 { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; color: var(--faint); margin-bottom: 8px; }
.rrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--ink); }
.rrow:last-of-type { border-bottom: none; }
.rrow b { color: var(--brand-strong); font-weight: 700; }
.recipe__note { margin-top: 12px; padding: 12px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); font-size: 12.5px; color: var(--muted); }
.recipe__note b { color: var(--ink); }

/* calculadoras */
.calc { max-width: var(--w-panel); margin: 40px auto 0; padding: 0; overflow: hidden; text-align: left; }
.calc__tabs { display: flex; gap: 4px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.calc__tab { font-size: 12.5px; font-weight: 600; color: var(--muted); padding: 8px 12px; border-radius: 8px; }
.calc__tab--on { background: var(--surface); color: var(--brand-strong); border: 1px solid var(--brand-line); }
.calc__body { padding: 20px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.calc__inputs { display: grid; gap: 12px; flex: 1; min-width: 200px; }
.calc__label { display: block; font-size: 11px; font-weight: 600; color: var(--faint); margin-bottom: 4px; }
.calc__in { padding: 12px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface-2); font-size: 15px; font-weight: 600; color: var(--ink); }
.calc__eq { font-size: 22px; color: var(--brand); font-weight: 700; }
.calc__result { flex: 1; min-width: 160px; padding: 16px; border-radius: 12px; background: linear-gradient(180deg, var(--brand-soft), transparent), var(--surface); border: 1px solid var(--brand-line); text-align: center; }
.calc__result-l { display: block; font-size: 12px; color: var(--muted); }
.calc__result-v { display: block; margin-top: 8px; font-size: 32px; font-weight: 700; letter-spacing: -.02em; background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }

/* marketplace de cursos — montra */
.mkt { max-width: var(--w-mock); margin: 40px auto 0; padding: 20px; text-align: left; }
.mkt__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.mkt__h { font-size: 15px; font-weight: 800; letter-spacing: -.01em; color: var(--ink); }
.mkt__n { font-size: 12px; color: var(--faint); }
.mkt__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (max-width: 700px) { .mkt__grid { grid-template-columns: 1fr; } }
.mcourse { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.mcourse__cover { position: relative; height: 84px; background: linear-gradient(135deg, var(--brand-soft), var(--surface-2)); }
.mcourse__price { position: absolute; top: 8px; right: 8px; font: 700 13px var(--font-mono); color: var(--brand-strong); background: var(--surface); border: 1px solid var(--brand-line); padding: 4px 8px; border-radius: 99px; }
.mcourse__b { padding: 12px; }
.mcourse__t { font-size: 13.5px; font-weight: 700; line-height: 1.25; color: var(--ink); }
.mcourse__by { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 12px; color: var(--muted); }
.mcourse__av { width: 22px; height: 22px; border-radius: 50%; flex: none; background: var(--grad-brand); color: #fff; display: grid; place-items: center; font: 700 10px var(--font-sans); }
.mcourse__meta { margin-top: 8px; font-size: 11.5px; color: var(--faint); }

/* marketplace de cursos — criar curso (builder) */
.builder { max-width: var(--w-panel); margin: 40px auto 0; padding: 20px; text-align: left; }
.builder__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.builder__t { font-size: 15px; font-weight: 700; color: var(--ink); }
.builder__tag { font-size: 11px; font-weight: 700; color: var(--warning); background: var(--warning-soft); padding: 4px 8px; border-radius: 99px; white-space: nowrap; }
.bmod { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; margin-bottom: 8px; font-size: 13px; color: var(--ink); }
.bmod__n { font-weight: 600; }
.bmod__a { font: 600 11.5px var(--font-mono); color: var(--faint); }
.bmod--add { justify-content: center; border-style: dashed; border-color: var(--brand-line); color: var(--brand-strong); font-weight: 600; }
.builder__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; }
.builder__price { font: 700 18px var(--font-mono); color: var(--ink); }

/* ============================================================
   CAPÍTULO 04 — potencial / cenários financeiros
   ============================================================ */
.scen { margin: 40px auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: var(--w-block); }
@media (max-width: 820px) { .scen { grid-template-columns: 1fr; } }
.scard { padding: 24px; text-align: left; }
.scard--win { border-color: var(--brand-line); background: linear-gradient(180deg, var(--brand-soft), transparent 45%), var(--surface); box-shadow: var(--sh-brand); }
.scard__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.scard__tag { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.scard__churn { font-size: 11px; font-weight: 700; padding: 4px 8px; border-radius: 99px; white-space: nowrap; }
.scard__churn--bad { color: var(--danger); background: var(--danger-soft); }
.scard__churn--good { color: var(--success); background: var(--success-soft); }
.spark { width: 100%; height: 56px; display: block; margin: 16px 0 12px; }
.spark polyline { fill: none; stroke: var(--faint); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.spark--win polyline { stroke: var(--brand); }
.scard__num { font: 700 clamp(32px, 4.6vw, 46px) var(--font-sans); letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.scard__sub { font-size: 13px; color: var(--muted); margin-top: 4px; }
.scard__sub b { color: var(--ink); }
.scard__pts { list-style: none; margin: 16px 0 0; display: grid; gap: 8px; }
.scard__pts li { position: relative; padding-left: 20px; font-size: 12.5px; color: var(--muted); }
.scard__pts li::before { content: ""; position: absolute; left: 0; top: .5em; width: 6px; height: 6px; border-radius: 50%; background: var(--line-strong); }
.scard--win .scard__pts li::before { background: var(--brand); }

/* metodologia: dados reais vs pressupostos */
.meth { margin: 40px auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: var(--w-block); }
@media (max-width: 820px) { .meth { grid-template-columns: 1fr; } }
.meth__card { padding: 24px; text-align: left; }
.meth__h { margin-bottom: 16px; }
.meth__badge { display: inline-flex; align-items: center; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 4px 12px; border-radius: 99px; }
.meth__badge--real { color: var(--success); background: var(--success-soft); }
.meth__badge--model { color: var(--brand-strong); background: var(--brand-soft); border: 1px solid var(--brand-line); }
.meth__list { list-style: none; display: grid; gap: 12px; }
.meth__list li { position: relative; padding-left: 20px; font-size: 13.5px; line-height: 1.45; color: var(--muted); }
.meth__list li::before { content: ""; position: absolute; left: 0; top: .58em; width: 6px; height: 6px; border-radius: 50%; background: var(--line-strong); }
.meth__card:first-child .meth__list li::before { background: var(--success); }
.meth__card:last-child .meth__list li::before { background: var(--brand); }
.meth__list b { color: var(--ink); font-weight: 700; }
.meth__note { color: var(--faint); font-size: 12px; }

/* ===== CAP 04 — armadilha / poupança / âncora (workflow) ===== */
.tr-calc {
  padding: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin: 0 auto;
  max-width: var(--w-card);
}

.tr-eq {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 20px;
}

.tr-eq__cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.tr-eq__num {
  font-size: 26.4px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1;
}

.tr-eq__lbl {
  font-size: 11.5px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--faint);
}

.tr-eq__op {
  font-size: 22.4px;
  color: var(--brand);
  line-height: 1.15;
  font-weight: 500;
}

.tr-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  width: 100%;
}

.tr-hero__num {
  font-size: clamp(54px, 8vw, 84px);
  font-weight: 700;
  line-height: .9;
  letter-spacing: -.02em;
}

.tr-hero__cap {
  font-size: 13.1px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}

.tr-explain {
  max-width: var(--w-panel);
  margin: 0 auto;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.5;
}

.tr-mark {
  color: var(--danger);
  font-style: normal;
  font-weight: 600;
}

.tr-list {
  max-width: var(--w-panel);
  margin: 0 auto;
  text-align: left;
}

.sav-lead {
  max-width: 56ch;
  margin: 0 auto;
  color: var(--muted);
  font-size: 16.8px;
  line-height: 1.6;
}

.sav-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  max-width: var(--w-panel);
  margin: 0 auto;
}

.sav-tool {
  position: relative;
  padding: 24px;
  text-align: left;
  overflow: hidden;
}

.sav-tool__badge {
  position: absolute;
  top: 16px;
  right: 16px;
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.28em 0.7em;
  border-radius: 999px;
  background: var(--danger-soft);
  color: var(--danger);
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.sav-tool__role {
  margin: 0 0 4px;
  color: var(--faint);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.sav-tool__name {
  margin: 0 0 12px;
  font-size: 24.8px;
  font-weight: 700;
  color: var(--muted);
  text-decoration: line-through;
  text-decoration-color: var(--danger);
  text-decoration-thickness: 2px;
}

.sav-tool__price {
  margin: 0 0 4px;
  font-size: 27.2px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.1;
}

.sav-tool__per {
  font-family: var(--font-sans);
  font-size: 15.2px;
  font-weight: 600;
  color: var(--faint);
  margin-left: 0.15em;
}

.sav-tool__year {
  margin: 0;
  color: var(--muted);
  font-size: 14.7px;
}

.sav-total {
  max-width: var(--w-panel);
  margin: 24px auto 0;
  padding: 24px;
  border-radius: var(--r-card);
  background: var(--success-soft);
  border: 1px solid color-mix(in srgb, var(--success) 22%, transparent);
  text-align: center;
}

.sav-total__label {
  margin: 0 0 8px;
  color: var(--success);
  font-size: 13.1px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.sav-total__value {
  margin: 0;
  font-size: clamp(41.6px, 6vw, 57.6px);
  font-weight: 700;
  color: var(--success);
  line-height: 1;
}

.sav-total__unit {
  font-size: 0.4em;
  font-weight: 600;
  color: color-mix(in srgb, var(--success) 75%, var(--ink));
  margin-left: 0.15em;
}

@media (max-width: 560px) {
  .sav-grid { grid-template-columns: 1fr; }
}

.anc-wrap {
  position: relative;
  padding: clamp(32px, 6vh, 64px) clamp(16px, 5vw, 48px);
}

.anc-quote {
  display: block;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(96px, 16vw, 192px);
  line-height: 0.7;
  color: var(--brand-soft);
  margin-bottom: -0.15em;
  user-select: none;
  pointer-events: none;
}

.anc-statement {
  max-width: 20ch;
  margin-inline: auto;
  text-wrap: balance;
  letter-spacing: -0.01em;
}

/* ===================== CAP 05 — motor de vendas (workflow) ===================== */
.gtm-engine{
  max-width:var(--w-block);
  margin-inline:auto;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:24px;
  padding:24px;
}

/* coluna de canais */
.gtm-channels{
  display:flex;
  flex-direction:column;
  gap:12px;
  flex:0 0 auto;
}
.gtm-channel{
  display:flex;
  align-items:center;
  gap:12px;
  height:60px;
  padding:0 16px;
  min-width:196px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  box-shadow:var(--sh-card);
}
.gtm-channel b{
  font-weight:600;
  font-size:14px;
  color:var(--ink);
  letter-spacing:-.01em;
}

/* tile de ícone (canais + alvo) */
.gtm-ico{
  width:36px;
  height:36px;
  flex:0 0 auto;
  display:grid;
  place-items:center;
  border-radius:10px;
  background:var(--brand-soft);
  border:1px solid var(--brand-line);
  color:var(--brand);
}
.gtm-ico svg{width:20px;height:20px;}

/* conetores hairline + faísca */
.gtm-wires{flex:0 0 auto;width:88px;height:348px;}
.gtm-wires svg{width:100%;height:100%;display:block;overflow:visible;}
.gtm-wire{fill:none;stroke:var(--brand-line);stroke-width:1.5;}
.gtm-arrowhead{fill:none;stroke:var(--brand);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.gtm-spark{
  fill:none;
  stroke:var(--brand);
  stroke-width:2;
  stroke-linecap:round;
  stroke-dasharray:8 92;
  opacity:0;
}

/* nó central */
.gtm-hub{
  flex:0 0 auto;
  width:152px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  padding:20px 16px;
  border-radius:14px;
  background:var(--grad-brand);
  box-shadow:var(--sh-brand);
  color:var(--surface);
  text-align:center;
}
.gtm-hub-ico{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:color-mix(in srgb, var(--surface) 18%, transparent);
  border:1px solid color-mix(in srgb, var(--surface) 36%, transparent);
}
.gtm-hub-ico svg{width:24px;height:24px;color:var(--surface);}
.gtm-hub b{font-size:14px;font-weight:700;letter-spacing:-.01em;}
.gtm-hub span{font-size:11px;opacity:.82;}

/* seta hub -> alvo */
.gtm-arrow{
  flex:0 0 auto;
  width:72px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
}
.gtm-arrow svg{width:72px;height:24px;display:block;overflow:visible;}
.gtm-arrow-cap{
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:600;
  color:var(--faint);
}

/* alvo */
.gtm-target{
  flex:0 0 auto;
  width:152px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  padding:20px;
  border-radius:var(--r-lg);
  background:var(--surface);
  border:1px solid var(--line-strong);
  box-shadow:var(--sh-card);
  text-align:center;
}
.gtm-target .gtm-ico{width:40px;height:40px;}
.gtm-target .gtm-ico svg{width:22px;height:22px;}
.gtm-tag{
  font-size:10.5px;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:600;
  color:var(--faint);
}
.gtm-num{
  font-family:var(--font-mono);
  font-size:40px;
  font-weight:800;
  line-height:1;
  color:var(--ink);
}
.gtm-target small{font-size:12px;color:var(--muted);}

/* animações de entrada (scoped ao frame revelado) */
.gtm-engine.is-shown .gtm-channel{animation:gtm-rise .5s var(--ease) both;}
.gtm-engine.is-shown .gtm-channel:nth-child(1){animation-delay:.04s;}
.gtm-engine.is-shown .gtm-channel:nth-child(2){animation-delay:.10s;}
.gtm-engine.is-shown .gtm-channel:nth-child(3){animation-delay:.16s;}
.gtm-engine.is-shown .gtm-channel:nth-child(4){animation-delay:.22s;}
.gtm-engine.is-shown .gtm-channel:nth-child(5){animation-delay:.28s;}

.gtm-engine.is-shown .gtm-hub{animation:gtm-pop .5s var(--ease) both .42s;}
.gtm-engine.is-shown .gtm-target{animation:gtm-pop .5s var(--ease) both .82s;}

.gtm-engine.is-shown .gtm-spark{opacity:1;animation:gtm-flow 2.4s linear infinite;}
.gtm-engine.is-shown .gtm-spark:nth-of-type(1){animation-delay:.0s;}
.gtm-engine.is-shown .gtm-spark:nth-of-type(2){animation-delay:.4s;}
.gtm-engine.is-shown .gtm-spark:nth-of-type(3){animation-delay:.8s;}
.gtm-engine.is-shown .gtm-spark:nth-of-type(4){animation-delay:1.2s;}
.gtm-engine.is-shown .gtm-spark:nth-of-type(5){animation-delay:1.6s;}
.gtm-engine.is-shown .gtm-spark--arrow{animation:gtm-flow 1.8s linear infinite .9s;}

@keyframes gtm-rise{from{opacity:0;transform:translateX(-10px);}to{opacity:1;transform:none;}}
@keyframes gtm-pop{from{opacity:0;transform:scale(.92);}to{opacity:1;transform:none;}}
@keyframes gtm-flow{to{stroke-dashoffset:-100;}}

@media (prefers-reduced-motion:reduce){
  .gtm-engine.is-shown .gtm-channel,
  .gtm-engine.is-shown .gtm-hub,
  .gtm-engine.is-shown .gtm-target,
  .gtm-engine.is-shown .gtm-spark{animation:none;}
  .gtm-engine.is-shown .gtm-spark{opacity:1;}
}

@media (max-width:840px){
  .gtm-engine{flex-wrap:wrap;}
  .gtm-wires,.gtm-arrow{display:none;}
  .gtm-channels{flex:1 1 100%;}
}

.spg-browser{
  width:100%;max-width:var(--w-mock);margin-inline:auto;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-card);box-shadow:var(--sh-card);overflow:hidden;
}
.spg-bar{
  height:40px;padding:0 16px;display:flex;align-items:center;gap:12px;
  background:var(--surface-2);border-bottom:1px solid var(--line);
}
.spg-dots{display:flex;gap:8px;flex:none}
.spg-dots i{width:10px;height:10px;border-radius:50%;background:var(--line-strong)}
.spg-url{
  flex:1;display:flex;align-items:center;gap:8px;height:24px;padding:0 12px;
  background:var(--surface);border:1px solid var(--line);border-radius:999px;color:var(--faint);
}
.spg-url svg{width:13px;height:13px;flex:none;color:var(--success)}
.spg-url .mono{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.spg-page{padding:16px;display:flex;flex-direction:column;gap:16px}

.spg-hero{
  padding:24px;border-radius:var(--r-lg);
  background:var(--brand-soft);border:1px solid var(--brand-line);
  display:flex;flex-direction:column;gap:12px;text-align:center;align-items:center;
}
.spg-kicker{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;
  color:var(--brand-strong);margin:0;
}
.spg-h1{font-size:24px;line-height:1.15;font-weight:800;color:var(--ink);margin:0;max-width:360px}
.spg-sub{font-size:13px;line-height:1.45;color:var(--muted);margin:0;max-width:340px}
.spg-cta{
  display:inline-flex;align-items:center;justify-content:center;
  padding:12px 20px;border-radius:var(--r-md);
  background:var(--grad-brand);color:#fff;font-weight:700;font-size:14px;
  box-shadow:var(--sh-brand);
}
.spg-cta--sm{padding:8px 16px;font-size:13px}

.spg-benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.spg-benefit{
  display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;
  font-size:12px;font-weight:600;color:var(--ink);
}
.spg-tile{
  width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  background:var(--brand-soft);color:var(--brand);border:1px solid var(--brand-line);
}
.spg-tile svg{width:18px;height:18px}

.spg-proof{
  padding:16px 20px;border-radius:var(--r-lg);
  background:var(--surface);border:1px solid var(--line);
  display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;
}
.spg-stars{display:flex;gap:4px;color:var(--warning)}
.spg-stars svg{width:15px;height:15px}
.spg-quote{font-size:13px;line-height:1.4;color:var(--muted);font-style:italic;margin:0;max-width:380px}

.spg-offer{
  padding:16px 20px;border-radius:var(--r-lg);
  background:var(--ink);color:#fff;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.spg-offer-price{display:flex;align-items:baseline;gap:12px}
.spg-old{font-size:14px;color:var(--lilac);text-decoration:line-through}
.spg-now{font-size:24px;font-weight:700;color:#fff}

[data-frag].spg-browser{transition:transform .5s var(--ease)}
[data-frag].spg-browser.is-shown{animation:spg-rise .55s var(--ease) both}
@keyframes spg-rise{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}

.tea-playbook{
  width:100%;
  max-width:var(--w-panel);
  margin-inline:auto;
  padding:0;
  overflow:hidden;
  text-align:left;
}
.tea-playbook__head{
  display:flex;
  align-items:center;
  gap:12px;
  padding:11px 20px;
  background:var(--surface-2);
  border-bottom:1px solid var(--line);
}
.tea-playbook__icon{
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  flex:0 0 38px;
  border-radius:var(--r-md);
  background:var(--brand-soft);
  color:var(--brand);
  border:1px solid var(--brand-line);
}
.tea-playbook__icon svg{width:20px;height:20px;}
.tea-playbook__titles{flex:1 1 auto;min-width:0;}
.tea-playbook__title{
  margin:0;
  font-weight:700;
  font-size:15px;
  color:var(--ink);
  letter-spacing:-.01em;
}
.tea-playbook__dot{color:var(--lilac);margin:0 4px;}
.tea-playbook__sub{
  margin:4px 0 0;
  font-size:12.5px;
  color:var(--muted);
}
.tea-playbook__tag{
  flex:0 0 auto;
  font-size:11px;
  font-weight:600;
  color:var(--brand-strong);
  background:var(--brand-soft);
  border:1px solid var(--brand-line);
  border-radius:999px;
  padding:4px 12px;
}
.tea-steps{
  list-style:none;
  margin:0;
  padding:3px 20px;
}
.tea-step{
  display:flex;
  align-items:center;
  gap:12px;
  padding:8px 0;
  border-bottom:1px solid var(--line);
}
.tea-step:last-child{border-bottom:0;}
.tea-step__check{
  display:grid;
  place-items:center;
  width:24px;
  height:24px;
  flex:0 0 24px;
  border-radius:999px;
  background:var(--success-soft);
  color:var(--success);
  border:1px solid #bfe7d4;
}
.tea-step__check svg{width:14px;height:14px;}
.tea-step__label{
  flex:1 1 auto;
  font-size:14.5px;
  font-weight:500;
  color:var(--ink);
}
.tea-step__num{
  flex:0 0 auto;
  font-size:12px;
  color:var(--faint);
}
.tea-step--close{
  margin:0 -20px;
  padding:11px 20px;
  background:var(--brand-soft);
  border-bottom:0;
}
.tea-step--close .tea-step__label{
  font-weight:700;
  color:var(--brand-strong);
}
.tea-step--close .tea-step__check{
  background:var(--brand);
  color:var(--surface);
  border-color:var(--brand-strong);
}
.tea-step--close .tea-step__num{color:var(--brand);}
.tea-progress{
  padding:11px 20px 13px;
  border-top:1px solid var(--line);
}
.tea-progress__top{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  margin-bottom:8px;
}
.tea-progress__label{
  font-size:12.5px;
  font-weight:600;
  color:var(--muted);
}
.tea-progress__val{
  font-size:13px;
  font-weight:700;
  color:var(--brand-strong);
}
.tea-progress__track{
  height:8px;
  border-radius:999px;
  background:var(--surface-2);
  overflow:hidden;
  border:1px solid var(--line);
}
.tea-progress__bar{
  display:block;
  height:100%;
  width:0;
  border-radius:999px;
  background:var(--grad-brand);
}
[data-frag].is-shown .tea-progress__bar{
  animation:tea-fill 1s var(--ease) .25s forwards;
}
@keyframes tea-fill{
  from{width:0;}
  to{width:100%;}
}

.aig-app{
  width:100%;
  max-width:var(--w-mock);
  margin-inline:auto;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-card);
  box-shadow:var(--sh-card);
  overflow:hidden;
}
.aig-frame{
  height:40px;
  padding:0 16px;
  display:flex;
  align-items:center;
  gap:8px;
  background:var(--surface-2);
  border-bottom:1px solid var(--line);
}
.aig-dot{
  width:10px;height:10px;border-radius:50%;
  background:var(--line-strong);
}
.aig-url{
  margin-left:12px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:4px 12px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:999px;
  font:500 12px/1 var(--font-sans);
  color:var(--muted);
}
.aig-url svg{color:var(--brand);}

.aig-body{
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:16px;
}

.aig-prompt{display:flex;flex-direction:column;gap:8px;}
.aig-prompt__label{
  display:flex;align-items:center;gap:8px;
  font:600 12px/1 var(--font-sans);
  color:var(--muted);
}
.aig-prompt__label svg{color:var(--brand);}
.aig-field{
  display:flex;
  align-items:center;
  gap:12px;
  padding:8px 8px 8px 16px;
  background:var(--surface);
  border:1px solid var(--line-strong);
  border-radius:var(--r-md);
  box-shadow:0 0 0 4px var(--brand-soft);
}
.aig-field__text{
  flex:1;
  font:500 14px/1.3 var(--font-sans);
  color:var(--ink);
}
.aig-gen{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 16px;
  border:none;
  border-radius:var(--r-md);
  background:var(--grad-brand);
  color:#fff;
  font:600 13px/1 var(--font-sans);
  box-shadow:var(--sh-brand);
  cursor:pointer;
  white-space:nowrap;
}

.aig-result{
  border:1px solid var(--brand-line);
  border-radius:var(--r-lg);
  background:linear-gradient(180deg,var(--brand-soft) 0%,var(--surface) 64px);
  overflow:hidden;
}
.aig-result__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 16px;
}
.aig-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:4px 12px;
  background:var(--surface);
  border:1px solid var(--brand-line);
  border-radius:999px;
  font:600 12px/1 var(--font-sans);
  color:var(--brand-strong);
}
.aig-badge svg{color:var(--brand);}
.aig-result__meta{
  font-size:11px;
  color:var(--faint);
}

.aig-post{
  display:flex;
  gap:16px;
  padding:0 16px 16px;
}
.aig-media{
  flex:0 0 132px;
  align-self:stretch;
  min-height:132px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  background:
    repeating-linear-gradient(45deg,var(--surface-2) 0 10px,#efe4f2 10px 20px);
  border:1px dashed var(--line-strong);
  border-radius:var(--r-md);
  color:var(--lilac);
}
.aig-media__tag{
  font:600 11px/1 var(--font-sans);
  color:var(--muted);
}
.aig-copy{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:12px;
  min-width:0;
}
.aig-caption{
  margin:0;
  font:500 14px/1.55 var(--font-sans);
  color:var(--ink);
}
.aig-emoji{white-space:nowrap;}
.aig-tags{display:flex;flex-wrap:wrap;gap:8px;}
.aig-tag{
  padding:4px 12px;
  border-radius:999px;
  background:var(--brand-soft);
  border:1px solid var(--brand-line);
  color:var(--brand-strong);
  font-size:12px;
}

[data-frag].aig-app.is-shown .aig-result{
  animation:aig-rise .5s var(--ease) both;
}
[data-frag].aig-app.is-shown .aig-gen{
  animation:aig-pulse 2.6s var(--ease) .4s 2;
}
@keyframes aig-rise{
  from{opacity:0;transform:translateY(8px);}
  to{opacity:1;transform:translateY(0);}
}
@keyframes aig-pulse{
  0%,100%{box-shadow:var(--sh-brand);}
  50%{box-shadow:0 0 0 4px var(--brand-soft),var(--sh-brand);}
}

.soc-cal {
  width: 100%;
  max-width: var(--w-mock);
  margin-inline: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--sh-card);
  overflow: hidden;
  text-align: left;
}

.soc-cal__bar {
  height: 40px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}
.soc-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--line-strong);
}
.soc-cal__file {
  margin-inline-start: 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}

.soc-cal__chans {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.soc-chans__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--faint);
}
.soc-chan {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.soc-chan__tile {
  width: 34px;
  height: 34px;
  border-radius: var(--r-md);
  background: var(--brand-soft);
  border: 1px solid var(--brand-line);
  color: var(--brand);
  display: grid;
  place-items: center;
}
.soc-chan__tile svg { width: 18px; height: 18px; }
.soc-chan__name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.soc-cal__range {
  margin-inline-start: auto;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--faint);
}

.soc-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}
.soc-col {
  border-right: 1px solid var(--line);
}
.soc-col--last { border-right: 0; }
.soc-col--rest { background: var(--surface-2); }

.soc-col__day {
  padding: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  border-bottom: 1px solid var(--line);
}
.soc-col__name {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
}
.soc-col__date {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--faint);
}
.soc-col__cells {
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 96px;
}

.soc-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border-radius: var(--r-md);
  background: var(--brand-soft);
  border: 1px solid var(--brand-line);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.15;
  color: var(--ink);
}
.soc-chip__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
  background: var(--brand);
}
.soc-chip--ig .soc-chip__dot { background: var(--brand); }
.soc-chip--tt .soc-chip__dot { background: var(--brand-strong); }
.soc-chip--pin .soc-chip__dot { background: var(--lilac); }

@keyframes soc-pop {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
[data-frag].is-shown .soc-chip {
  animation: soc-pop 0.42s var(--ease) both;
}
.is-shown .soc-col:nth-child(1) .soc-chip { animation-delay: 0.04s; }
.is-shown .soc-col:nth-child(2) .soc-chip { animation-delay: 0.10s; }
.is-shown .soc-col:nth-child(3) .soc-chip { animation-delay: 0.16s; }
.is-shown .soc-col:nth-child(4) .soc-chip { animation-delay: 0.22s; }
.is-shown .soc-col:nth-child(5) .soc-chip { animation-delay: 0.28s; }
.is-shown .soc-col:nth-child(6) .soc-chip { animation-delay: 0.34s; }
.is-shown .soc-col:nth-child(7) .soc-chip { animation-delay: 0.40s; }

.ads-mock{
  width:100%;max-width:var(--w-mock);margin-inline:auto;padding:0;overflow:hidden;
}
.ads-frame{
  height:40px;padding:0 16px;display:flex;align-items:center;gap:12px;
  border-bottom:1px solid var(--line);background:var(--surface-2);
}
.ads-dots{display:inline-flex;gap:8px;}
.ads-dot{width:9px;height:9px;border-radius:50%;background:var(--line-strong);}
.ads-url{
  display:inline-flex;align-items:center;gap:8px;flex:1;
  font-size:12px;color:var(--muted);font-weight:600;
}
.ads-url svg{width:13px;height:13px;color:var(--faint);flex:none;}
.ads-live{
  display:inline-flex;align-items:center;gap:8px;flex:none;
  font-size:11px;font-weight:700;color:var(--success);
}
.ads-live i{width:7px;height:7px;border-radius:50%;background:var(--success);box-shadow:0 0 0 3px var(--success-soft);}
.ads-body{padding:16px;display:flex;flex-direction:column;gap:16px;}

.ads-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.ads-kpi{
  padding:20px;border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--surface);display:flex;flex-direction:column;gap:12px;
}
.ads-kpi__top{display:flex;align-items:center;justify-content:space-between;}
.ads-tile{
  width:34px;height:34px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;
  background:var(--brand-soft);color:var(--brand);border:1px solid var(--brand-line);
}
.ads-tile svg{width:18px;height:18px;}
.ads-delta{
  font-size:11px;font-weight:700;color:var(--success);
  background:var(--success-soft);border-radius:999px;padding:4px 8px;line-height:1;
}
.ads-delta--down{color:var(--success);}
.ads-kpi__label{font-size:12px;color:var(--muted);font-weight:600;}
.ads-kpi__value{font-size:26px;font-weight:700;color:var(--ink);line-height:1;letter-spacing:-.01em;}

.ads-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:16px;}
.ads-table{
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);overflow:hidden;
}
.ads-thead,.ads-row{
  display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:16px;padding:12px 16px;
}
.ads-thead{
  background:var(--surface-2);border-bottom:1px solid var(--line);
  font-size:11px;font-weight:700;color:var(--faint);text-transform:uppercase;letter-spacing:.04em;
}
.ads-thead span:nth-child(2),.ads-thead span:nth-child(3),
.ads-num{text-align:right;}
.ads-row{border-bottom:1px solid var(--line);}
.ads-row:last-child{border-bottom:0;}
.ads-camp{display:inline-flex;align-items:center;gap:12px;min-width:0;}
.ads-camp em{font-style:normal;font-weight:600;color:var(--ink);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ads-pill{
  width:28px;height:28px;border-radius:8px;flex:none;display:inline-flex;align-items:center;justify-content:center;
  font-weight:800;font-size:13px;border:1px solid var(--brand-line);
  background:var(--brand-soft);color:var(--brand);
}
.ads-num{font-size:13px;color:var(--ink);font-weight:600;}
.ads-num--good{color:var(--success);}

.ads-spark{
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);
  padding:16px;display:flex;flex-direction:column;gap:12px;
}
.ads-spark__head{display:flex;align-items:baseline;justify-content:space-between;}
.ads-spark__label{font-size:12px;font-weight:600;color:var(--muted);}
.ads-spark__tag{font-size:11px;color:var(--faint);font-weight:600;}
.ads-spark__svg{width:100%;height:70px;display:block;overflow:visible;}
.ads-area{fill:var(--brand-soft);opacity:.65;}
.ads-line{
  fill:none;stroke:var(--brand);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
  stroke-dasharray:560;stroke-dashoffset:560;
}
.ads-tip{fill:var(--surface);stroke:var(--brand);stroke-width:2.4;opacity:0;}

[data-frag].is-shown .ads-line{animation:ads-draw 1.1s var(--ease) .15s forwards;}
[data-frag].is-shown .ads-tip{animation:ads-pop .3s var(--ease) 1.1s forwards;}
@keyframes ads-draw{to{stroke-dashoffset:0;}}
@keyframes ads-pop{to{opacity:1;}}

@media (max-width:680px){
  .ads-kpis{grid-template-columns:1fr;}
  .ads-grid{grid-template-columns:1fr;}
}

.eml-mock{padding:0;overflow:hidden;text-align:left;}
.eml-frame{display:flex;align-items:center;gap:16px;height:34px;padding:0 16px;border-bottom:1px solid var(--line);background:var(--surface-2);}
.eml-frame__dots{display:flex;gap:8px;flex:none;}
.eml-frame__dots span{width:10px;height:10px;border-radius:50%;background:var(--line-strong);}
.eml-frame__title{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--ink);}
.eml-frame__title svg{width:16px;height:16px;color:var(--brand);}
.eml-frame__title em{font-style:normal;color:var(--muted);font-weight:500;}
.eml-frame__status{margin-left:auto;display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:var(--success);}
.eml-dot-live{width:8px;height:8px;border-radius:50%;background:var(--success);box-shadow:0 0 0 0 var(--success);animation:eml-pulse 2.4s var(--ease) infinite;}
@keyframes eml-pulse{0%{box-shadow:0 0 0 0 rgba(15,125,82,.35);}70%{box-shadow:0 0 0 6px rgba(15,125,82,0);}100%{box-shadow:0 0 0 0 rgba(15,125,82,0);}}

.eml-body{display:grid;grid-template-columns:1fr 280px;gap:24px;padding:14px;align-items:start;}

.eml-flow{display:flex;flex-direction:column;}
.eml-node{display:flex;align-items:center;gap:12px;padding:9px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);}
.eml-node--accent{border-color:var(--brand-line);background:var(--brand-soft);}
.eml-node--ghost{border-style:dashed;background:var(--surface-2);}
.eml-node__tile{flex:none;width:36px;height:36px;border-radius:10px;background:var(--brand-soft);border:1px solid var(--brand-line);display:flex;align-items:center;justify-content:center;color:var(--brand);}
.eml-node__tile svg{width:18px;height:18px;}
.eml-node--accent .eml-node__tile{background:var(--surface);}
.eml-node--ghost .eml-node__tile{background:var(--surface);color:var(--muted);border-color:var(--line-strong);}
.eml-node__txt{flex:1;min-width:0;}
.eml-node__name{font-size:14px;font-weight:700;color:var(--ink);}
.eml-node__sub{font-size:12px;color:var(--muted);margin-top:4px;}
.eml-node__delay{flex:none;font-size:12px;font-weight:600;color:var(--faint);background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:4px 8px;}
.eml-node--accent .eml-node__delay,.eml-node--ghost .eml-node__delay{background:var(--surface);}

.eml-link{height:16px;margin-left:32px;display:flex;align-items:center;gap:8px;position:relative;}
.eml-link>span{display:block;width:2px;height:100%;background:var(--brand-line);border-radius:2px;}
.eml-link--branch{height:24px;}
.eml-link--branch>span{background:repeating-linear-gradient(var(--lilac) 0 4px,transparent 4px 8px);}
.eml-cond{font-style:normal;font-size:11px;font-weight:600;color:var(--brand-strong);background:var(--brand-soft);border:1px solid var(--brand-line);border-radius:999px;padding:4px 8px;}

.eml-preview{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);padding:16px;box-shadow:var(--sh-card);}
.eml-preview__head{display:flex;align-items:center;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--line);}
.eml-preview__avatar{flex:none;width:34px;height:34px;border-radius:10px;background:var(--grad-brand);color:#fff;font-weight:800;font-size:15px;display:flex;align-items:center;justify-content:center;}
.eml-preview__from{font-size:13px;font-weight:700;color:var(--ink);}
.eml-preview__subj{font-size:12px;color:var(--muted);margin-top:4px;}
.eml-preview__hero{height:64px;border-radius:var(--r-md);background:var(--grad-brand);margin-top:16px;display:flex;align-items:center;justify-content:center;}
.eml-preview__hero svg{width:26px;height:26px;color:#fff;}
.eml-preview__lines{display:flex;flex-direction:column;gap:8px;margin-top:16px;}
.eml-ln{height:9px;border-radius:999px;background:var(--surface-2);}
.eml-preview__cta{margin-top:16px;width:100%;height:38px;border:0;border-radius:var(--r-md);background:var(--brand);color:#fff;font-family:var(--font-sans);font-size:13px;font-weight:700;cursor:pointer;box-shadow:var(--sh-brand);}
.eml-preview__foot{margin-top:12px;text-align:center;font-size:11px;color:var(--faint);}

[data-frag].is-shown .eml-node{animation:eml-rise .5s var(--ease) both;}
[data-frag].is-shown .eml-node:nth-child(3){animation-delay:.06s;}
[data-frag].is-shown .eml-node:nth-child(5){animation-delay:.12s;}
[data-frag].is-shown .eml-node:nth-child(7){animation-delay:.18s;}
@keyframes eml-rise{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}

@media (max-width:760px){.eml-body{grid-template-columns:1fr;}}

.wpp-frame{
  max-width:var(--w-block);
  margin-inline:auto;
  width:100%;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-card);
  box-shadow:var(--sh-card);
  overflow:hidden;
}
.wpp-bar{
  height:32px;
  padding:0 16px;
  display:flex;
  align-items:center;
  gap:8px;
  border-bottom:1px solid var(--line);
  background:var(--surface-2);
}
.wpp-dot{
  width:10px;height:10px;
  border-radius:999px;
  background:var(--line-strong);
}
.wpp-bar-title{
  margin-left:auto;
  font-size:11px;
  color:var(--faint);
  letter-spacing:.04em;
}
.wpp-body{
  padding:13px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.wpp-flow{
  position:relative;
  height:2px;
  border-radius:999px;
  background:var(--line);
  margin-bottom:2px;
}
.wpp-flow::after{
  content:"";
  position:absolute;
  top:50%;left:0;
  width:10px;height:10px;
  margin-top:-5px;
  border-radius:999px;
  background:var(--grad-brand);
  box-shadow:var(--sh-brand);
  opacity:0;
}
.wpp-cols{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
  min-height:0;
}
.wpp-col{
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:10px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.wpp-col-head{
  display:flex;
  align-items:center;
  gap:8px;
}
.wpp-col-dot{
  width:8px;height:8px;
  border-radius:999px;
  flex-shrink:0;
}
.wpp-col-dot--new{background:var(--faint);}
.wpp-col-dot--talk{background:var(--lilac);}
.wpp-col-dot--prop{background:var(--warning);}
.wpp-col-dot--done{background:var(--success);}
.wpp-col-name{
  font-size:13px;
  font-weight:600;
  color:var(--ink);
}
.wpp-col-count{
  margin-left:auto;
  font-size:11px;
  color:var(--faint);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:999px;
  padding:4px 8px;
  line-height:1;
}
.wpp-card{
  display:flex;
  align-items:center;
  gap:8px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  padding:8px;
}
.wpp-avatar{
  position:relative;
  flex-shrink:0;
  width:28px;height:28px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  font-weight:700;
  color:var(--brand);
  background:var(--brand-soft);
  border:1px solid var(--brand-line);
}
.wpp-lead{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
}
.wpp-lead-name{
  font-size:13px;
  font-weight:600;
  color:var(--ink);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.wpp-lead-meta{
  font-size:11px;
  color:var(--muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.wpp-card--done{
  background:var(--success-soft);
  border-color:var(--success-soft);
}
.wpp-avatar--done{
  color:var(--success);
  background:var(--surface);
  border-color:var(--success);
}
.wpp-check{
  position:absolute;
  right:-3px;bottom:-3px;
  width:14px;height:14px;
  padding:1px;
  border-radius:999px;
  color:#fff;
  background:var(--success);
}
.wpp-chat{
  width:100%;
  max-width:360px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:6px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-pop);
  padding:10px;
}
.wpp-chat-head{
  display:flex;
  align-items:center;
  gap:8px;
  padding-bottom:6px;
  border-bottom:1px solid var(--line);
}
.wpp-chat-tile{
  flex-shrink:0;
  width:34px;height:34px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--success);
  background:var(--success-soft);
  border:1px solid var(--success-soft);
}
.wpp-chat-tile svg{width:18px;height:18px;}
.wpp-chat-meta{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
}
.wpp-chat-name{
  font-size:12px;
  font-weight:600;
  color:var(--ink);
}
.wpp-chat-status{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:10px;
  color:var(--success);
}
.wpp-chat-online{
  width:6px;height:6px;
  border-radius:999px;
  background:var(--success);
}
.wpp-msg{
  font-size:12px;
  line-height:1.3;
  padding:6px 11px;
  max-width:84%;
}
.wpp-msg--in{
  align-self:flex-start;
  color:var(--ink);
  background:var(--surface-2);
  border-radius:12px 12px 12px 4px;
}
.wpp-msg--out{
  align-self:flex-end;
  font-weight:500;
  color:var(--success);
  background:var(--success-soft);
  border-radius:12px 12px 4px 12px;
}

/* movimento sóbrio ao entrar */
[data-frag].is-shown .wpp-col{
  animation:wpp-rise .45s var(--ease) both;
}
[data-frag].is-shown .wpp-col:nth-child(2){animation-delay:.08s;}
[data-frag].is-shown .wpp-col:nth-child(3){animation-delay:.16s;}
[data-frag].is-shown .wpp-col:nth-child(4){animation-delay:.24s;}
[data-frag].is-shown .wpp-flow::after{
  animation:wpp-travel 3.4s var(--ease) .3s infinite;
}
[data-frag].is-shown .wpp-chat{
  animation:wpp-pop .5s var(--ease) .4s both;
}
[data-frag].is-shown .wpp-card--done{
  animation:wpp-glow 2.6s ease-in-out 1s infinite;
}
@keyframes wpp-rise{
  from{opacity:0;transform:translateY(10px);}
  to{opacity:1;transform:translateY(0);}
}
@keyframes wpp-pop{
  from{opacity:0;transform:translateY(12px) scale(.96);}
  to{opacity:1;transform:translateY(0) scale(1);}
}
@keyframes wpp-travel{
  0%{left:0;opacity:0;}
  12%{opacity:1;}
  88%{opacity:1;}
  100%{left:calc(100% - 10px);opacity:0;}
}
@keyframes wpp-glow{
  0%,100%{box-shadow:none;}
  50%{box-shadow:var(--sh-brand);}
}

.syn-machine{
  max-width: var(--w-block);
  margin-inline: auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 24px;
}

.syn-channels{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.syn-channel{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px 10px 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
}

.syn-tile{
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--brand-soft);
  color: var(--brand);
  border: 1px solid var(--brand-line);
  display: flex;
  align-items: center;
  justify-content: center;
}
.syn-tile svg{ width: 16px; height: 16px; }

.syn-chan-label{
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.2;
}

.syn-converge{
  display: flex;
  align-items: center;
  gap: 16px;
}
.syn-conv-line{
  flex: 1;
  height: 1px;
  background: var(--line-strong);
}
.syn-conv-cap{
  flex: none;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 700;
  color: var(--faint);
  white-space: nowrap;
}
.syn-conv-badge{
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--grad-brand);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--sh-brand);
  flex: none;
}
.syn-conv-badge svg{ width: 18px; height: 18px; }

.syn-goal{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 24px;
  border-radius: var(--r-lg);
  background: var(--brand-soft);
  border: 1px solid var(--brand-line);
}

.syn-stat{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}

.syn-num{
  font-family: var(--font-mono);
  font-size: 42px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
}
.syn-num--lead{ color: var(--ink); }
.syn-stat--hero .syn-num{ font-size: 60px; }

.syn-unit{
  font-size: 14px;
  color: var(--muted);
}
.syn-unit em{
  font-style: normal;
  font-weight: 600;
  color: var(--brand);
}

.syn-arrow{
  display: flex;
  color: var(--lilac);
  flex: none;
}
.syn-arrow svg{ width: 28px; height: 28px; }

.syn-anchor{
  max-width: var(--w-block);
  margin-inline: auto;
  font-size: 21px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--ink);
}

[data-frag].is-shown .syn-channel{
  animation: syn-rise .45s var(--ease) both;
}
[data-frag].is-shown .syn-channel:nth-child(2){ animation-delay: .05s; }
[data-frag].is-shown .syn-channel:nth-child(3){ animation-delay: .10s; }
[data-frag].is-shown .syn-channel:nth-child(4){ animation-delay: .15s; }
[data-frag].is-shown .syn-channel:nth-child(5){ animation-delay: .20s; }

[data-frag].is-shown .syn-goal{
  animation: syn-rise .55s var(--ease) both;
  animation-delay: .28s;
}

@keyframes syn-rise{
  from{ opacity: 0; transform: translateY(8px) scale(.98); }
  to{ opacity: 1; transform: none; }
}

@media (max-width: 720px){
  .syn-channels{ grid-template-columns: repeat(2, 1fr); }
  .syn-goal{ flex-direction: column; gap: 16px; }
  .syn-arrow{ transform: rotate(90deg); }
}

/* CAP 05 — modificadores em falta (cosméticos) */
.ads-pill--google, .ads-pill--meta { background: var(--surface-2); color: var(--muted); border-color: var(--line-strong); }
.eml-preview__meta { font-size: 11px; color: var(--faint); margin-top: 4px; }
.eml-preview__body { font-size: 12px; line-height: 1.45; color: var(--muted); }
.spg-per { font-size: 14px; font-weight: 600; color: var(--lilac); align-self: baseline; }

/* ===== CAP 06 — calendário & método ===== */
.road { display: flex; align-items: stretch; padding: 0; overflow: hidden; max-width: var(--w-mock); margin-inline: auto; text-align: left; }
.road__phase { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 24px; border-right: 1px solid var(--line); }
.road__phase--run { background: linear-gradient(180deg, var(--brand-soft), transparent 70%); }
.road__tag { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; color: var(--brand); }
.road__name { font-size: 18px; font-weight: 800; letter-spacing: -.01em; color: var(--ink); }
.road__sub { font-size: 13px; line-height: 1.45; color: var(--muted); }
.road__sub b { color: var(--ink); font-weight: 700; }
.road__goal { flex: none; width: 190px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 24px; text-align: center; background: var(--grad-brand); color: #fff; }
.road__goal-num { font-size: 42px; font-weight: 700; letter-spacing: -.02em; line-height: 1; }
.road__goal-lbl { font-size: 13px; line-height: 1.3; opacity: .95; }
@media (max-width: 760px) { .road { flex-direction: column; } .road__phase { border-right: none; border-bottom: 1px solid var(--line); } .road__goal { width: auto; } }

.r6 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: var(--w-mock); margin-inline: auto; }
@media (max-width: 760px) { .r6 { grid-template-columns: 1fr; } }
.r6card { display: flex; flex-direction: column; gap: 10px; padding: 20px; text-align: left; }
.r6card__ico { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; color: var(--brand); background: var(--brand-soft); border: 1px solid var(--brand-line); }
.r6card__ico svg { width: 20px; height: 20px; }
.r6card__t { font-size: 15px; font-weight: 700; color: var(--ink); }
.r6card__d { font-size: 13px; line-height: 1.45; color: var(--muted); }

/* ===== CAP 07 — preço / retorno / fecho ===== */
.price { display: grid; grid-template-columns: 1fr 340px; gap: 24px; align-items: start; max-width: var(--w-block); margin-inline: auto; text-align: left; }
@media (max-width: 820px) { .price { grid-template-columns: 1fr; } }
.price__stack { display: flex; flex-direction: column; gap: 12px; }
.price__item { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; line-height: 1.4; color: var(--ink); }
.price__check { flex: none; width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; color: var(--brand); background: var(--brand-soft); border: 1px solid var(--brand-line); margin-top: 1px; }
.price__check svg { width: 13px; height: 13px; }
.price__card { display: flex; flex-direction: column; gap: 8px; padding: 24px; border-radius: var(--r-card); background: linear-gradient(180deg, var(--brand-soft), transparent 60%), var(--surface); border: 1px solid var(--brand-line); box-shadow: var(--sh-card); }
.price__tag { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; color: var(--brand); }
.price__amount { font-size: 48px; font-weight: 700; letter-spacing: -.03em; line-height: 1; color: var(--ink); }
.price__terms { font-size: 13px; color: var(--muted); }
.price__sep { height: 1px; background: var(--line); margin: 8px 0; }
.price__incl { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; line-height: 1.4; color: var(--ink); }
.price__incl svg { flex: none; width: 16px; height: 16px; color: var(--success); margin-top: 2px; }

.ret { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: var(--w-mock); margin-inline: auto; }
@media (max-width: 760px) { .ret { grid-template-columns: 1fr; } }
.ret__card { display: flex; flex-direction: column; gap: 4px; padding: 22px; text-align: left; }
.ret__num { font-size: 32px; font-weight: 700; letter-spacing: -.02em; line-height: 1; color: var(--ink); }
.ret__unit { font-size: 13px; color: var(--muted); }
.ret__lbl { font-size: 13px; line-height: 1.45; color: var(--muted); margin-top: 6px; }

.fecho-line { font-size: clamp(20px, 2.6vw, 30px); font-weight: 600; line-height: 1.3; color: var(--ink); max-width: 32ch; margin-inline: auto; }
.fecho-sign { font-size: 14px; font-weight: 700; letter-spacing: .04em; color: var(--muted); }
.fecho-sign span { color: var(--brand); margin: 0 4px; }

/* [audit s1] */
.hint--quiet { font-size: .8rem; color: var(--faint); opacity: .85; letter-spacing: .01em; }
/* [audit s2] */
.cap-agenda { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; margin: 0; }
/* [audit s2] */
.cap-agenda li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 99px; background: var(--surface); border: 1px solid var(--brand-line); color: var(--brand-strong); font-size: 13px; font-weight: 600; letter-spacing: -.01em; }
/* [audit s2] */
.cap-agenda li::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--grad-brand); }
/* [audit s3] */
.ann--key { border-top: none; background: var(--brand-soft); border: 1px solid var(--brand-line); border-radius: var(--r-md); padding: 12px; }
/* [audit s3] */
.ann--key + .ann { border-top: none; }
/* [audit s3] */
.ann--key .ann__t { color: var(--brand-strong); }
/* [audit s3] */
.ann--key .ann__n { background: var(--grad-brand); color: #fff; border-color: var(--brand-strong); }
/* [audit s4] */
.s04-tension { color: var(--faint); font-family: var(--font-mono); font-size: .95rem; letter-spacing: .02em; margin-top: 24px; }
/* [audit s5] */
.leasebox{display:flex;flex-direction:column;gap:10px;padding:18px 22px;border:1px solid var(--danger);border-radius:var(--r-lg);background:var(--danger-soft)}
/* [audit s5] */
.leasebox__fig{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
/* [audit s5] */
.leasebox__num{font-size:clamp(2.2rem,5vw,3.4rem);font-weight:700;line-height:1;letter-spacing:-.02em;color:var(--danger)}
/* [audit s5] */
.leasebox__per{font-size:1rem;font-weight:600;color:var(--ink)}
/* [audit s5] */
.leasebox__hostage{margin:0;font-size:.95rem;color:var(--muted)}
/* [audit s5] */
.leasebox__hostage strong{color:var(--danger)}
/* [audit s6] */
.engine__cap--hero {
  font-size: 16px;
  font-weight: 800;
  color: var(--brand-strong);
  max-width: none;
  letter-spacing: -.01em;
}
/* [audit s7] */
.s07-close{font-size:1.3rem;line-height:1.3;font-weight:700;color:var(--brand-strong);border-left:3px solid var(--brand);padding-left:16px}
/* [audit s8] */
.ba__arrow--hero{color:var(--brand);font-size:1.9rem;line-height:1;font-weight:700;display:flex;flex-direction:column;align-items:center;gap:6px}
/* [audit s8] */
.ba__arrow--hero .ba__arrow-label{font-family:var(--font-mono);font-size:.6rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--brand-strong);white-space:nowrap}
/* [audit s8] */
.teaser--promise{font-size:1.05rem;font-weight:600;color:var(--ink)}
/* [audit s9] */
.s09-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
/* [audit s9] */
.s09-chip { font-family: var(--font-mono); font-size: 13px; font-weight: 500; color: var(--brand-strong); background: var(--brand-soft); border: 1px solid var(--brand-line); border-radius: 999px; padding: 7px 14px; }
/* [audit s10] */
.cons-chip { margin-left: auto; font: 600 11px var(--font-mono); color: var(--brand-strong); background: var(--brand-soft); border: 1px solid var(--brand-line); border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
/* [audit s11] */
.ftile--rev{border-color:var(--brand-line);background:var(--brand-soft);box-shadow:var(--sh-brand)}
/* [audit s11] */
.ftile--rev .ftile__icon{color:var(--brand-strong)}
/* [audit s11] */
.ftile__rev{display:inline-block;width:fit-content;margin-top:8px;font-family:var(--font-mono);font-size:.6rem;line-height:1;letter-spacing:.05em;text-transform:uppercase;color:var(--brand-strong);background:var(--surface);border:1px solid var(--brand-line);border-radius:999px;padding:3px 8px}
/* [audit s14] */
.aud-split{display:grid;grid-template-columns:1fr 1fr;gap:16px;text-align:left}
/* [audit s14] */
.aud-split__item{display:flex;flex-direction:column;gap:6px;padding:16px 18px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface)}
/* [audit s14] */
.aud-split__item--owner{border-color:var(--brand-line);background:var(--brand-soft)}
/* [audit s14] */
.aud-split__who{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
/* [audit s14] */
.aud-split__item--owner .aud-split__who{color:var(--brand-strong)}
/* [audit s14] */
.aud-split__what{font-size:.98rem;font-weight:600;color:var(--ink)}
/* [audit s14] */
@media (max-width:640px){.aud-split{grid-template-columns:1fr}}
/* [audit s16] */
.note-pop { color: var(--brand-strong); font-weight: 700; }
/* [audit s18] */
.appframe__tag { margin-left: auto; font: 700 9px var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 3px 8px; }
/* [audit s19] */
.metric--key{ background:var(--brand-soft); border-color:var(--brand-line); color:var(--ink); font-weight:600; }
/* [audit s19] */
.note--lead{ font-size:19px; line-height:1.5; color:var(--ink); font-weight:600; }
/* [audit s20] */
.heat--top b{color:var(--brand-strong);}
/* [audit s20] */
.heat--top span{color:var(--ink);font-weight:600;}
/* [audit s20] */
.bar--top b{color:var(--brand-strong);}
/* [audit s20] */
.bar--top .bar__l{color:var(--ink);font-weight:600;}
/* [audit s20] */
.note--insight{display:inline-block;max-width:64ch;background:var(--brand-soft);border:1px solid var(--brand-line);border-radius:var(--r-md);padding:14px 22px;color:var(--ink);font-weight:600;box-shadow:var(--sh-card);}
/* [audit s20] */
.note--insight em{color:var(--brand-strong);font-style:normal;font-weight:700;}
/* [audit s21] */
.note--anchor{color:var(--ink);font-weight:600;background:var(--brand-soft);border:1px solid var(--brand-line);border-radius:var(--r-md);padding:12px 16px}
/* [audit s21] */
.note--anchor b{color:var(--brand-strong)}
/* [audit s21] */
.risk__flag{display:inline-flex;align-items:center;gap:5px}
/* [audit s22] */
/* s22: ponta de ação no rodapé do cartão analytics */
.apanel__tip { padding-top: 10px; border-top: 1px solid var(--line); font-size: 12px; color: var(--ink); display: flex; align-items: baseline; gap: 6px; font-weight: 600; }
.apanel__tip::before { content: "\2192"; color: var(--brand); font-weight: 700; }
/* [audit s22] */
/* s22: destaque da perda no funil */
.fnl__loss { padding-top: 10px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); display: flex; align-items: baseline; gap: 8px; }
.fnl__loss-n { font-family: var(--font-mono); font-weight: 700; font-size: 18px; color: var(--danger); }
/* [audit s22] */
/* s22: eixo Y do heatmap (parte do dia) */
.wgrid__r { font-size: 9px; color: var(--faint); text-transform: uppercase; letter-spacing: .03em; display: flex; align-items: center; justify-content: flex-end; padding-right: 6px; white-space: nowrap; }
/* [audit s22] */
/* s22: escala de cor do heatmap */
.wscale { display: flex; align-items: center; gap: 8px; font-size: 10px; color: var(--faint); padding-top: 8px; }
.wscale__bar { flex: 1; height: 8px; border-radius: 4px; background: linear-gradient(90deg, rgba(183, 58, 130, .08), rgba(183, 58, 130, .9)); }
/* [audit s22] */
/* s22: linha-resumo promovida */
.note--lead { font-size: 15px; color: var(--ink); font-weight: 600; }
/* [audit s24] */
.lede--stakes{font-size:clamp(1.35rem,2.4vw,1.9rem);font-weight:600;color:var(--ink);max-width:24ch;margin-left:auto;margin-right:auto;line-height:1.3;}
/* [audit s25] */
.comm__payoff{display:block;max-width:46ch;margin-inline:auto;padding:14px 20px;border-radius:var(--r-md);background:var(--brand-soft);border:1px solid var(--brand-line);color:var(--ink);font-weight:600;font-size:1.05rem;line-height:1.45;}
/* [audit s25] */
.comm__payoff em{color:var(--brand-strong);font-style:normal;font-weight:700;}
/* [audit s25] */
.cchip .ico{display:inline-flex;align-items:center;vertical-align:-0.15em;margin-right:.2em;}
/* [audit s26] */
.note--churn { display: block; max-width: var(--w-block); margin-left: auto; margin-right: auto; background: var(--brand-soft); border: 1px solid var(--brand-line); border-radius: var(--r-lg); padding: 18px 24px; font-size: 20px; line-height: 1.4; font-weight: 600; color: var(--ink); text-align: center; }
.note--churn::before { display: none; }
/* [audit s27] */
.s27-note{color:var(--ink);font-weight:600;}
/* [audit s27] */
.s27-note em{color:var(--brand);font-style:normal;font-weight:700;}
/* [audit s27] */
.cmsg__b .s27-heart{display:inline-flex;vertical-align:-0.15em;color:var(--brand);}
/* [audit s28] */
.note--key{color:var(--ink);font-weight:600;background:var(--brand-soft);border:1px solid var(--brand-line);border-radius:var(--r-md);padding:14px 18px}
/* [audit s28] */
.note--key strong{color:var(--brand-strong);font-weight:700}
/* [audit s28] */
.coupon__l strong{color:var(--brand-strong);font-weight:700}
/* [audit s29] */
.salepost__r{display:inline-flex;align-items:center;gap:5px}
.salepost__r svg{width:1em;height:1em;flex:none}
/* [audit s32] */
.recipe__hook{font-size:1.35rem;font-weight:700;line-height:1.3;color:var(--ink);max-width:38ch;margin-inline:auto;text-wrap:balance}
/* [audit s32] */
.recipe__hook em{font-style:normal;color:var(--brand)}
/* [audit s34] */
.calc-pain{font-size:.95rem;line-height:1.5;color:var(--danger);max-width:46ch;margin-inline:auto;}
/* [audit s38] */
.s38-sub{max-width:48ch;margin-inline:auto;color:var(--muted);font-size:1.05rem;line-height:1.5;}
.s38-sub strong{color:var(--brand);font-weight:700;}
/* [audit s38] */
.ftile--hero{border-color:var(--brand-line);background:var(--brand-soft);}
.ftile--hero .ftile__icon{color:var(--brand);}
/* [audit s38] */
.ftile__tag{display:inline-block;margin-left:6px;padding:2px 8px;border-radius:999px;background:var(--brand);color:#fff;font-family:var(--font-mono);font-size:.62em;text-transform:uppercase;letter-spacing:.04em;vertical-align:middle;font-weight:600;}
/* [audit s39] */
.pop__x { position: absolute; top: 10px; right: 12px; width: 18px; height: 18px; padding: 0; display: grid; place-items: center; border: none; background: none; color: var(--faint); font: 600 16px/1 var(--font-sans); cursor: pointer; border-radius: 6px; }
.pop__x:hover { color: var(--ink); background: var(--surface-2); }
/* [audit s46] */
.pp__heroArt {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand);
}
.pp__heroArt svg {
  width: 42%;
  height: auto;
}
/* [audit s46] */
.pp__thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--lilac);
  overflow: hidden;
}
.pp__thumb--active {
  color: var(--brand);
}
.pp__thumbIco {
  width: 50%;
  height: auto;
}
/* [audit s47] */
/* s47: caption de benefício promovida (antes era nota em cinzento) */
.cl__benefit{
  display:inline-block;
  color:var(--ink);
  font-weight:600;
  background:var(--brand-soft);
  border:1px solid var(--brand-line);
  border-radius:var(--r-md);
  padding:12px 18px;
}
.cl__benefit em{ color:var(--brand-strong); font-style:normal; font-weight:700; }
/* [audit s50] */
/* s50: alinhar o ícone SVG do tab de pagamento com o texto */
.ck__tabico{vertical-align:-0.15em;margin-right:.4em}
/* [audit s52] */
.s52-anticipa{display:block;margin-top:12px;font-size:.62em;font-weight:600;color:var(--brand);letter-spacing:.01em;}
/* [audit s53] */
.mkt__total { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
/* [audit s53] */
.mkt__total-stat { display: flex; flex-direction: column; line-height: 1.05; }
/* [audit s53] */
.mkt__total-n { font-size: 34px; font-weight: 700; color: var(--brand); }
/* [audit s53] */
.mkt__total-l { font-size: 12px; color: var(--muted); margin-top: 2px; }
/* [audit s53] */
.mkt__total-cap { flex: 1; min-width: 220px; font-size: 14px; line-height: 1.45; color: var(--ink); margin: 0; }
/* [audit s54] */
.metric--hero { grid-column: 1 / -1; padding: 16px 18px 16px 40px; background: var(--brand-soft); border: 1px solid var(--brand-line); border-radius: var(--r-md); font-size: 16px; line-height: 1.4; }
/* [audit s54] */
.metric--hero::before { left: 18px; top: 22px; width: 9px; height: 9px; }
/* [audit s54] */
.metric--hero b { color: var(--brand-strong); }
/* [audit s57] */
.cgrid--rev3 { grid-template-columns: 1fr 1fr 1fr; }
/* [audit s57] */
.fly-closer { display: inline-flex; align-items: center; gap: 12px; padding: 14px 20px; border-radius: var(--r-lg); background: var(--brand-soft); border: 1px solid var(--brand-line); font-size: 16px; font-weight: 600; color: var(--ink); text-align: left; line-height: 1.4; }
/* [audit s57] */
.fly-closer svg { width: 22px; height: 22px; flex: none; color: var(--brand); }
/* [audit s57] */
.fly-closer em { color: var(--brand-strong); font-style: normal; font-weight: 700; }
/* [audit s57] */
@media (max-width: 760px) { .cgrid--rev3 { grid-template-columns: 1fr; } }
/* [audit s59] */
.step--s59 { grid-template-columns: minmax(0, 60ch) auto; justify-content: center; align-content: center; align-items: center; column-gap: clamp(40px, 5vw, 88px); }
/* [audit s59] */
.step--s59 .block { max-width: none; }
/* [audit s59] */
.s59-aside { display: flex; flex-direction: column; align-items: center; gap: 16px; }
/* [audit s59] */
.s59-balde { width: clamp(150px, 16vw, 240px); height: auto; color: var(--brand); display: block; }
/* [audit s59] */
.s59-cap { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
/* [audit s59] */
.reveal-list li.is-thesis { font-size: clamp(20px, 2.6vw, 30px); font-weight: 600; }
/* [audit s59] */
.reveal-list li.is-thesis::before { width: 11px; height: 11px; margin-top: .5em; }
/* [audit s59] */
.reveal-list li.is-thesis strong { color: var(--brand-strong); }
/* [audit s59] */
@media (max-width: 880px) { .step--s59 { grid-template-columns: minmax(0, 64ch); } .step--s59 .s59-aside { display: none; } }
/* [audit s60] */
.delta { display: flex; align-items: baseline; justify-content: center; gap: 12px; flex-wrap: wrap; max-width: var(--w-block); margin-inline: auto; padding: 16px 24px; border-radius: var(--r-lg); background: var(--brand-soft); border: 1px solid var(--brand-line); }
/* [audit s60] */
.delta__plus { font: 700 clamp(28px, 4vw, 40px) var(--font-sans); letter-spacing: -.02em; color: var(--brand-strong); font-variant-numeric: tabular-nums; }
/* [audit s60] */
.delta__lbl { font-size: 14px; font-weight: 600; color: var(--ink); }
/* [audit s60] */
.spark-axis { display: flex; justify-content: space-between; font: 600 11px var(--font-mono); letter-spacing: .04em; color: var(--faint); }
/* [audit s60] */
.note-cta { color: var(--brand-strong); }
/* [audit s60] */
.scen .scard:not(.scard--win) { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-card); opacity: .9; }
/* [audit s60] */
.scen .scard:not(.scard--win) .scard__num { color: var(--faint); }
/* [audit s61] */
.meth__card--real { background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--success); border-radius: var(--r-card); box-shadow: var(--sh-card); }
/* [audit s61] */
.meth__card--model { border: 1px dashed var(--brand-line); border-radius: var(--r-card); }
/* [audit s61] */
.note--lead { font-size: 15px; font-weight: 500; color: var(--ink); }
/* [audit s62] */
.tr-close{
  max-width: 60ch;
  margin-inline: auto;
  padding: 16px 22px;
  background: var(--brand-soft);
  border: 1px solid var(--brand-line);
  border-radius: var(--r-lg);
  color: var(--ink);
  font-size: 1.05rem;
  line-height: 1.55;
}
.tr-close strong{ color: var(--brand-strong); font-weight: 700; }
.tr-close em{ font-style: italic; color: var(--brand); }
.tr-close__lead{ color: var(--muted); font-size: .95rem; line-height: 1.5; }
.tr-close__punch{ margin-top: 12px; font-size: 1.14rem; line-height: 1.45; color: var(--ink); font-weight: 600; }
.tr-close__punch strong{ color: var(--brand-strong); }
.tr-close__punch em{ color: var(--brand); font-style: italic; }
/* [audit s63] */
.sav-total__approx { font-size: 0.5em; font-weight: 600; color: var(--muted); vertical-align: middle; }
/* [audit s63] */
.sav-3y { color: var(--brand-strong); font-weight: 700; }
/* [audit s64] */
.anc-bridge{font-family:var(--font-sans);font-size:1.0625rem;font-weight:600;color:var(--brand-strong);display:inline-flex;align-items:center;gap:.45em;}
/* [audit s64] */
.anc-bridge-arrow{display:inline-flex;color:var(--brand);font-weight:700;transition:transform .2s ease;}
/* [audit s64] */
.anc-bridge:hover .anc-bridge-arrow{transform:translateX(3px);}
/* [audit s65] */
.s65-goal {
  margin-top: 40px;
  display: flex; align-items: center; flex-wrap: wrap;
  gap: clamp(24px, 4vw, 48px);
}
.s65-goal__hero, .s65-goal__sub { display: flex; align-items: baseline; gap: 14px; }
.s65-goal__num {
  font-family: var(--font-mono); font-weight: 600;
  font-size: clamp(56px, 9vw, 120px); line-height: .85;
  letter-spacing: -.04em;
}
.s65-goal__num2 {
  font-family: var(--font-mono); font-weight: 600;
  font-size: clamp(36px, 5vw, 64px); line-height: .85;
  letter-spacing: -.03em; color: var(--ink);
}
.s65-goal__cap {
  font-size: 14px; font-weight: 600; color: var(--muted);
  line-height: 1.25; letter-spacing: .01em;
}
.s65-goal__rule {
  align-self: stretch; width: 1px; background: var(--line-strong);
}
@media (max-width: 720px) {
  .s65-goal { flex-direction: column; align-items: flex-start; gap: 20px; }
  .s65-goal__rule { display: none; }
}
/* [audit s66] */
.gtm-wires .gtm-wire,.gtm-arrow .gtm-wire{stroke-width:2.6;stroke:var(--lilac);}
/* [audit s69] */
.aig-lead{color:var(--ink);font-size:1.06rem;font-weight:600;}
/* [audit s69] */
.aig-lead strong{color:var(--brand);}
/* [audit s70] */
.note--proof{color:var(--ink);font-weight:500;}
/* [audit s70] */
.note--proof strong{color:var(--brand-strong);font-weight:700;}
/* [audit s73] */
.reveal-list--tight { margin-top: 24px; gap: 12px; }
/* [audit s74] */
.syn-anchor.syn-anchor--hero{
  font-size: 27px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.01em;
  max-width: 32ch;
}
/* [audit s75] */
.lede__claim { color: var(--ink); font-weight: 700; }
/* [audit s75] */
.s75-stats {
  list-style: none; margin: 0; padding: 0; margin-top: 32px;
  display: flex; flex-wrap: wrap; gap: 12px;
}
.s75-stats li {
  display: flex; flex-direction: column; gap: 2px;
  padding: 12px 18px;
  background: var(--surface);
  border: 1px solid var(--brand-line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-card);
}
.s75-stats__k { font-size: 15px; font-weight: 700; color: var(--brand-strong); }
.s75-stats__v { font-size: 13px; color: var(--muted); }
/* [audit s76] */
.road__rate { display: flex; align-items: baseline; gap: 8px; margin-top: auto; }
/* [audit s76] */
.road__rate-num { font-size: 34px; font-weight: 700; letter-spacing: -.02em; line-height: 1; color: var(--brand); }
/* [audit s76] */
.road__rate-lbl { font-size: 12px; line-height: 1.3; font-weight: 600; color: var(--muted); }
/* [audit s80] */
.payoff{
  font-size: clamp(1.25rem, 2.4vw, 1.9rem);
  font-weight: 700;
  line-height: 1.25;
  color: var(--ink);
  text-align: center;
  max-width: 40ch;
  margin-inline: auto;
}
/* [audit s81] */
.fecho-cta{display:flex;flex-direction:column;align-items:center;gap:16px}
/* [audit s81] */
.fecho-cta__urg{margin:0;max-width:46ch;color:var(--muted);font-size:1rem;line-height:1.5}
/* [audit s81] */
.fecho-cta__btn{display:inline-flex;align-items:center;gap:.5em;padding:14px 28px;border-radius:var(--r-md);background:var(--grad-brand);color:#fff;font-weight:700;font-size:1.05rem;box-shadow:var(--sh-brand)}
/* [audit s81] */
.fecho-cta__btn span{font-weight:700}

/* [audit s71] */
.eyebrow--strong { color: var(--brand-strong); }

/* ============================================================
   RITMO VERTICAL AUTOMÁTICO (stack) — UMA regra trata do
   espaçamento entre os blocos de cada slide. Componentes não
   precisam de margin-top próprio: isto cuida de tudo, sempre.
   (no fim do ficheiro → ganha empates de especificidade)
   ============================================================ */
.block > * + *,
.cover > * + * { margin-top: 32px; }
/* o eyebrow fica colado ao título que se segue */
.block > .eyebrow,
.cover > .eyebrow { margin-bottom: 0; }
.block > .eyebrow + *,
.cover > .eyebrow + * { margin-top: 16px; }

@media (prefers-reduced-motion: reduce) {
  *, [data-frag] { transition-duration: .01ms !important; animation: none !important; }
}