/* ============================================================
   Donnu Convert: site institucional
   Mesma identidade do Donnu A/B (tokens do design system do painel).
   Fontes auto-hospedadas (sem terceiros no runtime, LGPD-friendly).
   Mockups animados em HTML/CSS, comandados por app.js (só rodam
   quando visíveis; com movimento reduzido fica o estado final).
   ============================================================ */
@font-face { font-family:"Inter"; font-style:normal; font-weight:400; font-display:swap; src:url("fonts/inter-400.woff2") format("woff2"); }
@font-face { font-family:"Inter"; font-style:normal; font-weight:500; font-display:swap; src:url("fonts/inter-500.woff2") format("woff2"); }
@font-face { font-family:"Inter"; font-style:normal; font-weight:600; font-display:swap; src:url("fonts/inter-600.woff2") format("woff2"); }
@font-face { font-family:"Inter"; font-style:normal; font-weight:700; font-display:swap; src:url("fonts/inter-700.woff2") format("woff2"); }
@font-face { font-family:"Space Grotesk"; font-style:normal; font-weight:500; font-display:swap; src:url("fonts/space-500.woff2") format("woff2"); }
@font-face { font-family:"Space Grotesk"; font-style:normal; font-weight:600; font-display:swap; src:url("fonts/space-600.woff2") format("woff2"); }
@font-face { font-family:"Space Grotesk"; font-style:normal; font-weight:700; font-display:swap; src:url("fonts/space-700.woff2") format("woff2"); }

:root {
  --green-950:#072e25; --green-900:#0b3f33; --green-800:#0e5442; --green-700:#126850;
  --green-600:#15735a; --green-500:#1a8a6c; --green-400:#4fae91; --green-300:#8ac7b4;
  --green-200:#bcded2; --green-100:#dcede6; --green-50:#eef6f2;
  --ink:#171d1b; --n-700:#3d4543; --n-500:#6c7673; --n-400:#8d9693;
  --n-300:#c3cac7; --n-200:#e4e8e6; --n-100:#eff1f0; --n-50:#f7f8f8; --white:#fff;
  --amber:#b54708; --amber-bg:#fdf1df; --gold:#d9b64e; --blue:#175cd3; --blue-bg:#e8f0fd; --violet:#6b8fd4;
  --danger:#d92d20;

  --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:28px; --r-pill:999px;
  --shadow-sm:0 1px 2px rgba(23,29,27,.05), 0 4px 14px rgba(23,29,27,.06);
  --shadow-md:0 8px 24px rgba(23,29,27,.08), 0 2px 6px rgba(23,29,27,.05);
  --shadow-pop:0 18px 50px rgba(11,63,51,.16);
  --maxw:1140px;
  --sans:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;
  --display:"Space Grotesk","Inter",system-ui,sans-serif;
  --ease:cubic-bezier(.2,.8,.2,1);
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  margin:0; font-family:var(--sans); color:var(--ink); background:var(--white);
  font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:clip;
}
h1,h2,h3,h4 { margin:0; font-family:var(--display); font-weight:600; letter-spacing:-.02em; line-height:1.12; }
p { margin:0; }
a { color:inherit; text-decoration:none; }
img,svg { display:block; max-width:100%; }
:focus-visible { outline:3px solid var(--green-400); outline-offset:3px; border-radius:6px; }
.s-dark :focus-visible, .s-cta :focus-visible, .s-footer :focus-visible, .s-zz-claim :focus-visible { outline-color:var(--green-300); }

.s-skip { position:absolute; left:12px; top:-60px; z-index:100; background:var(--green-900); color:var(--white);
  padding:10px 16px; border-radius:var(--r-sm); font-weight:600; transition:top .15s; }
.s-skip:focus { top:12px; }
.s-sr { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

.s-container { width:100%; max-width:var(--maxw); margin:0 auto; padding:0 24px; }
.s-narrow { max-width:760px; }
.s-center { text-align:center; margin-left:auto; margin-right:auto; }

/* ---------- tipografia utilitária ---------- */
.s-h1 { font-size:clamp(2.15rem,4.2vw,3.3rem); text-wrap:balance; }
.s-h2 { font-size:clamp(1.8rem,3.6vw,2.7rem); text-wrap:balance; }
.s-lead { font-size:clamp(1.05rem,1.5vw,1.22rem); color:var(--n-700); line-height:1.62; }
.s-muted { color:var(--n-500); }
.s-eyebrow {
  display:inline-block; font-family:var(--display); font-weight:600; font-size:.82rem;
  letter-spacing:.08em; text-transform:uppercase; color:var(--green-600); margin-bottom:16px;
}
.s-eyebrow--light { color:var(--green-300); }

/* ---------- botões ---------- */
.s-btn {
  --pad:12px 20px; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--sans); font-weight:600; font-size:.98rem; padding:var(--pad);
  border-radius:var(--r-md); border:1px solid transparent; cursor:pointer;
  transition:transform .12s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
  white-space:nowrap;
}
.s-btn:active { transform:translateY(1px); }
.s-btn--sm { --pad:9px 15px; font-size:.9rem; }
.s-btn--lg { --pad:15px 26px; font-size:1.05rem; }
.s-btn--block { width:100%; }
.s-btn--primary { background:var(--green-600); color:var(--white); box-shadow:0 6px 18px rgba(21,115,90,.28); }
.s-btn--primary:hover { background:var(--green-700); box-shadow:0 10px 26px rgba(21,115,90,.34); transform:translateY(-1px); }
.s-btn--ghost { background:transparent; color:var(--ink); border-color:var(--n-200); }
.s-btn--ghost:hover { border-color:var(--n-300); background:var(--n-50); }
.s-btn--outline { background:var(--white); color:var(--green-700); border-color:var(--green-200); }
.s-btn--outline:hover { border-color:var(--green-400); background:var(--green-50); }

/* ---------- header ---------- */
.s-header {
  position:sticky; top:0; z-index:50; background:rgba(255,255,255,.86);
  backdrop-filter:saturate(1.4) blur(12px); -webkit-backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:1px solid var(--n-200);
}
.s-header__inner { display:flex; align-items:center; justify-content:space-between; height:68px; }
.s-logo { display:inline-flex; flex:none; white-space:nowrap; align-items:center; gap:10px; font-family:var(--display); font-weight:700; font-size:1.12rem; }
.s-logo__mark {
  display:grid; place-items:center; width:32px; height:32px; border-radius:9px;
  background:var(--green-600); color:var(--white); font-weight:700; font-size:1.05rem;
}
.s-logo__word span { color:var(--green-600); }
.s-logo--light .s-logo__word { color:var(--white); }
.s-logo--light .s-logo__word span { color:var(--green-300); }

.s-nav { display:flex; align-items:center; gap:6px; }
.s-nav > a { padding:9px 12px; border-radius:var(--r-sm); font-weight:500; font-size:.96rem; color:var(--n-700); transition:color .15s, background .15s; }
.s-nav > a:hover { color:var(--ink); background:var(--n-100); }
.s-nav__login { font-weight:600 !important; }
.s-nav .s-btn { margin-left:8px; }
.s-nav > a.s-btn--primary { color:var(--white); }
.s-nav > a.s-btn--primary:hover { color:var(--white); background:var(--green-700); }

/* seletor de idioma */
.s-lang { display:inline-flex; align-items:center; gap:2px; margin-left:6px; font-size:.86rem; font-weight:600; }
.s-lang a { padding:6px 8px; border-radius:var(--r-sm); color:var(--n-500); text-decoration:none; transition:color .15s, background .15s; }
.s-lang a:hover { color:var(--ink); background:var(--n-100); }
.s-lang a.is-active { color:var(--green-600); }
.s-lang span { color:var(--n-300); }
.s-footer .s-lang a { color:var(--n-400); }
.s-footer .s-lang a:hover { color:var(--white); background:rgba(255,255,255,.06); }
.s-footer .s-lang a.is-active { color:var(--green-300); }
.s-footer .s-lang span { color:var(--n-700); }

.s-burger { display:none; flex-direction:column; gap:5px; width:44px; height:44px; align-items:center; justify-content:center; background:none; border:none; cursor:pointer; border-radius:var(--r-sm); }
.s-burger span { width:22px; height:2px; background:var(--ink); border-radius:2px; transition:.25s; }
.s-burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.s-burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.s-burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ---------- hero ---------- */
.s-hero { position:relative; overflow:hidden; padding:64px 0 40px; }
.s-hero__glow {
  position:absolute; inset:-20% -10% auto -10%; height:640px; pointer-events:none; z-index:0;
  background:
    radial-gradient(680px 420px at 80% 12%, rgba(79,174,145,.28), transparent 60%),
    radial-gradient(520px 420px at 8% 0%, rgba(21,115,90,.16), transparent 55%),
    radial-gradient(900px 500px at 50% -10%, rgba(220,237,230,.7), transparent 70%);
}
.s-hero__grid { position:relative; z-index:1; display:grid; grid-template-columns:1.1fr 1fr; gap:48px; align-items:center; padding-top:20px; padding-bottom:52px; }
.s-hero__grid > * { min-width:0; }
.s-hero__copy { max-width:600px; }
.s-hero__copy .s-lead { margin-top:20px; }
.s-hero__cta { display:flex; gap:12px; margin-top:30px; flex-wrap:wrap; }
.s-center-cta { justify-content:center; }
.s-hero__note { margin-top:18px; color:var(--n-500); font-size:.96rem; display:flex; align-items:center; gap:8px; }
.s-hero__note b { color:var(--ink); }
.s-hero__note::before { content:"✓"; color:var(--green-600); font-weight:700; }
.s-hero__art { display:flex; justify-content:center; }

/* barra de credenciais */
.s-trust {
  list-style:none; margin:8px 0 0; padding:22px; display:grid; grid-template-columns:repeat(4,1fr); gap:22px;
  background:var(--white); border:1px solid var(--n-200); border-radius:var(--r-lg); box-shadow:var(--shadow-sm);
}
.s-trust li { display:flex; flex-direction:column; gap:2px; }
.s-trust b { font-family:var(--display); font-size:1.25rem; color:var(--green-700); }
.s-trust span { font-size:.86rem; color:var(--n-500); }

/* ---------- seções ---------- */
.s-section { padding:88px 0; }
.s-section--tint { background:var(--n-50); }
.s-section--soft { background:linear-gradient(180deg, var(--green-50), var(--white)); }
.s-section__head { max-width:700px; margin:0 0 48px; }
.s-section__head .s-lead { margin-top:16px; }
.s-section__head--light { color:var(--white); }
.s-section__head--light .s-lead { color:var(--green-100); }
.s-center .s-lead { margin-top:16px; }

/* grids de cards */
.s-grid { display:grid; gap:22px; }
.s-grid--3 { grid-template-columns:repeat(3,1fr); }
.s-grid--2 { grid-template-columns:repeat(2,1fr); }
.s-ico {
  display:grid; place-items:center; width:52px; height:52px; border-radius:var(--r-md);
  background:var(--green-50); font-size:24px;
}
.s-ico--light { background:rgba(255,255,255,.08); }

/* passos */
.s-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.s-step { position:relative; padding:28px; background:var(--white); border:1px solid var(--n-200); border-radius:var(--r-lg); box-shadow:var(--shadow-sm); }
.s-step__num {
  display:grid; place-items:center; width:40px; height:40px; border-radius:12px; margin-bottom:16px;
  background:var(--green-600); color:var(--white); font-family:var(--display); font-weight:700; font-size:1.1rem;
}
.s-step h3 { font-size:1.14rem; margin-bottom:8px; }
.s-step p { color:var(--n-500); font-size:.98rem; }
.s-step__chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:16px; }
.s-step__chips span { font-size:.76rem; font-weight:600; color:var(--green-800); background:var(--green-50); border:1px solid var(--green-100); border-radius:var(--r-pill); padding:3px 10px; }

/* seção escura (seu site em primeiro lugar) */
.s-dark { background:linear-gradient(160deg,var(--green-900),var(--green-950)); color:var(--green-100); }
.s-dark .s-h2 { color:var(--white); }
.s-shield { background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.09); border-radius:var(--r-lg); padding:28px; }
.s-shield h3 { color:var(--white); font-size:1.16rem; margin:16px 0 8px; }
.s-shield p { color:var(--green-100); font-size:.98rem; opacity:.92; }

/* ---------- zig-zag ---------- */
.s-zz { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; padding:52px 0; }
.s-zz > * { min-width:0; }
.s-zz + .s-zz { border-top:1px solid var(--n-100); }
.s-zz--flip .s-zz__copy { order:2; }
.s-zz--flip .s-zz__art { order:1; }
.s-zz__kicker { display:inline-block; font-size:.8rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--green-600); margin-bottom:10px; }
.s-zz__copy h3 { font-size:1.85rem; margin-bottom:12px; text-wrap:balance; }
.s-zz__copy > p { color:var(--n-500); }
.s-zz__points { list-style:none; margin:18px 0 0; padding:0; display:grid; gap:9px; }
.s-zz__points li { display:flex; gap:10px; align-items:baseline; font-size:.97rem; color:var(--n-700); }
.s-zz__points li::before { content:"✓"; color:var(--green-600); font-weight:700; flex:none; }
.s-zz__plan { display:inline-block; margin-top:16px; font-size:.82rem; font-weight:600; color:var(--green-800); background:var(--green-50); border:1px solid var(--green-100); border-radius:var(--r-pill); padding:4px 12px; }
.s-section--soft .s-zz { padding-top:8px; }

/* passos do editor (lista numerada ao lado do mock) */
.s-edsteps { list-style:none; margin:0 0 26px; padding:0; display:flex; flex-direction:column; gap:20px; }
.s-edsteps li { display:flex; gap:14px; align-items:flex-start; }
.s-edsteps__n { flex:0 0 auto; width:30px; height:30px; border-radius:50%; background:var(--green-600); color:#fff; font-weight:700; display:grid; place-items:center; font-size:.95rem; }
.s-edsteps li b { display:block; margin-bottom:2px; font-size:1.05rem; }
.s-edsteps li p { margin:0; color:var(--n-500); font-size:.96rem; line-height:1.5; }

/* faixa de fechamento: sem programar */
.s-zz-claim { margin-top:56px; background:var(--green-900); color:var(--white); border-radius:var(--r-xl);
  padding:44px 40px; display:grid; grid-template-columns:1.4fr auto; gap:28px; align-items:center; }
.s-zz-claim h3 { font-size:1.7rem; color:var(--white); margin-bottom:10px; }
.s-zz-claim p { color:var(--green-200); max-width:58ch; }
.s-zz-claim .s-btn { justify-self:end; }

/* ---------- modelos prontos (galeria) ---------- */
.s-tpls-head { display:flex; align-items:baseline; justify-content:space-between; gap:12px 24px; flex-wrap:wrap; margin-top:40px; }
.s-tpls-head h3 { font-size:1.35rem; }
.s-tpls-head p { color:var(--n-500); font-size:.96rem; }
.s-tpls { list-style:none; margin:20px 0 0; padding:0; display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }
.s-tpl { background:var(--white); border:1px solid var(--n-200); border-radius:var(--r-md); padding:10px 10px 14px; box-shadow:var(--shadow-sm);
  transition:transform .18s ease, box-shadow .2s ease, border-color .2s ease; min-width:0; }
.s-tpl:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:var(--green-200); }
.s-tpl__thumb { position:relative; height:84px; border-radius:9px; overflow:hidden; margin-bottom:10px;
  background:
    linear-gradient(var(--n-200),var(--n-200)) 10px 12px / 36% 6px no-repeat,
    linear-gradient(var(--n-200),var(--n-200)) 10px 24px / 58% 5px no-repeat,
    linear-gradient(var(--n-200),var(--n-200)) 10px 34px / 46% 5px no-repeat,
    linear-gradient(var(--n-200),var(--n-200)) 10px 52px / 26% 18px no-repeat,
    linear-gradient(var(--n-200),var(--n-200)) calc(10px + 30%) 52px / 26% 18px no-repeat,
    var(--n-100); }
.s-tpl__thumb--dim::after { content:""; position:absolute; inset:0; background:rgba(7,46,37,.32); }
.s-tpl__shape { position:absolute; z-index:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; }
.s-tpl__shape--modal { left:50%; top:50%; width:58%; height:72%; transform:translate(-50%,-50%); background:var(--white); border-radius:7px; box-shadow:0 4px 12px rgba(0,0,0,.18); padding:5px; }
.s-tpl__shape--bar { left:0; right:0; top:0; height:17px; flex-direction:row; background:var(--green-900); gap:5px; }
.s-tpl__shape--cookie { left:0; right:0; bottom:0; height:19px; flex-direction:row; background:var(--ink); gap:6px; }
.s-tpl__shape--slide { right:6px; bottom:6px; width:46%; height:56%; background:var(--white); border-radius:7px; box-shadow:0 4px 12px rgba(0,0,0,.18); padding:5px; }
.s-tpl__shape--full { inset:0; background:linear-gradient(150deg,var(--green-900),var(--green-600)); }
.s-tpl__shape--blank { left:50%; top:50%; width:52%; height:64%; transform:translate(-50%,-50%); border:2px dashed var(--n-300); border-radius:8px; color:var(--n-400); font-size:1.1rem; font-weight:700; background:rgba(255,255,255,.6); }
.s-tpl__shape i { display:block; height:4px; width:70%; border-radius:3px; background:var(--n-200); }
.s-tpl__shape i.h { height:5px; width:80%; background:var(--ink); opacity:.75; }
.s-tpl__shape i.in { height:7px; width:84%; background:var(--white); border:1px solid var(--n-300); }
.s-tpl__shape i.btn { height:8px; width:84%; background:var(--green-600); }
.s-tpl__shape i.code { height:9px; width:70%; background:var(--green-50); border:1px dashed var(--green-500); }
.s-tpl__shape i.amber { background:var(--gold); }
.s-tpl__shape i.light { background:rgba(255,255,255,.75); }
.s-tpl__shape i.pill { width:16%; height:7px; background:var(--white); border-radius:4px; }
.s-tpl__shape--bar i, .s-tpl__shape--cookie i { width:44%; height:4px; }
.s-tpl__shape em { font-style:normal; font-size:.7rem; line-height:1; }
.s-tpl__shape .stars { color:var(--gold); font-size:.5rem; letter-spacing:1px; line-height:1; }
.s-tpl__shape .boxes { display:flex; gap:2px; }
.s-tpl__shape .boxes b { width:9px; height:9px; border-radius:2px; background:#fff1f2; border:1px solid #e11d48; }
.s-tpl__type { display:inline-block; font-size:.66rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--green-700); }
.s-tpl b { display:block; font-size:.9rem; line-height:1.25; margin:2px 0 4px; }
.s-tpl small { display:block; color:var(--n-500); font-size:.76rem; line-height:1.4; }

/* ---------- mockups (moldura de navegador) ---------- */
.s-mock { width:100%; max-width:580px; margin:0 auto; background:var(--white); border:1px solid var(--n-200); border-radius:var(--r-lg);
  box-shadow:var(--shadow-pop); overflow:hidden; font-size:.82rem; line-height:1.4; position:relative; }
.s-mock__bar { display:flex; align-items:center; gap:6px; padding:10px 14px; background:var(--n-50); border-bottom:1px solid var(--n-100); }
.s-mock__dot { width:9px; height:9px; border-radius:50%; background:var(--n-200); flex:none; }
.s-mock__url { margin-left:8px; flex:1; min-width:0; background:var(--white); border:1px solid var(--n-200);
  border-radius:var(--r-pill); font-size:.72rem; color:var(--n-500); padding:3px 12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.s-mock__body { padding:16px; }
.s-mock__lbl { display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:.68rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--n-500); margin:0 0 8px; }
.s-mock__pill { display:inline-flex; align-items:center; gap:5px; background:var(--green-100); color:var(--green-800); border-radius:var(--r-pill); font-weight:700; font-size:.7rem; padding:3px 10px; white-space:nowrap; }
.s-mock__foot { margin-top:12px; display:flex; align-items:center; gap:8px; font-size:.74rem; color:var(--n-500); }
.s-toggle { flex:none; width:30px; height:17px; border-radius:var(--r-pill); background:var(--n-300); position:relative; transition:background .3s; }
.s-toggle::after { content:""; position:absolute; top:2px; left:2px; width:13px; height:13px; border-radius:50%; background:var(--white); transition:transform .3s var(--ease); box-shadow:0 1px 2px rgba(0,0,0,.2); }
.is-on > .s-toggle, .s-toggle.is-on { background:var(--green-600); }
.is-on > .s-toggle::after, .s-toggle.is-on::after { transform:translateX(13px); }

/* ============================================================
   MOCK 1 (hero): palco com os 4 formatos em loop
   ============================================================ */
.s-stage__view { position:relative; height:310px; overflow:hidden; background:var(--white); }
.s-site { position:absolute; inset:0; padding:12px 16px; transition:transform .6s var(--ease); }
.s-site__nav { display:flex; align-items:center; gap:10px; padding-bottom:11px; border-bottom:1px solid var(--n-100); }
.s-site__logo { width:56px; height:12px; border-radius:4px; background:var(--ink); opacity:.82; }
.s-site__nav i { width:30px; height:6px; border-radius:4px; background:var(--n-200); }
.s-site__nav i:first-of-type { margin-left:auto; }
.s-site__btn { width:48px; height:17px; border-radius:6px; background:var(--amber); opacity:.85; }
.s-site__hero { display:grid; grid-template-columns:1.25fr 1fr; gap:14px; padding:18px 0 16px; align-items:center; }
.s-site__copy i { display:block; height:7px; border-radius:4px; background:var(--n-200); margin-bottom:7px; }
.s-site__copy i.t1 { height:13px; width:92%; background:var(--ink); opacity:.78; }
.s-site__copy i.t2 { height:13px; width:64%; background:var(--ink); opacity:.78; margin-bottom:12px; }
.s-site__copy i.p { width:86%; }
.s-site__copy i.p2 { width:70%; }
.s-site__copy span { display:inline-block; margin-top:8px; width:82px; height:22px; border-radius:7px; background:var(--amber); opacity:.88; }
.s-site__img { height:96px; border-radius:12px; background:linear-gradient(135deg,#fde8cf,#f4bf8f); position:relative; overflow:hidden; }
.s-site__img::after { content:""; position:absolute; width:58px; height:58px; border-radius:50%; right:16px; bottom:-10px; background:rgba(255,255,255,.45); }
.s-site__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.s-site__card { border:1px solid var(--n-100); border-radius:10px; padding:7px; background:var(--n-50); }
.s-site__card::before { content:""; display:block; height:46px; border-radius:7px; background:var(--n-200); margin-bottom:7px; }
.s-site__card::after { content:""; display:block; height:6px; width:70%; border-radius:4px; background:var(--n-300); }

.s-pop { position:absolute; z-index:4; opacity:0; visibility:hidden;
  transition:opacity .4s ease, transform .55s var(--ease), visibility 0s linear .55s; font-size:.78rem; line-height:1.35; }
.s-pop__x { position:absolute; top:6px; right:9px; font-size:.95rem; line-height:1; color:var(--n-400); }
.s-pop-ov { position:absolute; inset:0; z-index:3; background:rgba(7,46,37,.46); opacity:0; transition:opacity .45s ease; pointer-events:none; }

/* barra no topo, empurrando a página */
.s-pop--bar { top:0; left:0; right:0; transform:translateY(-100%); background:var(--green-900); color:var(--white);
  display:flex; align-items:center; justify-content:center; gap:10px; padding:9px 30px 9px 12px; font-weight:600; font-size:.74rem; text-align:center; }
.s-pop--bar b { flex:none; background:var(--gold); color:var(--ink); border-radius:6px; padding:3px 9px; font-size:.68rem; }
.s-pop--bar .s-pop__x { color:rgba(255,255,255,.7); top:50%; transform:translateY(-50%); }
.s-stage[data-scene="bar"] .s-pop--bar { opacity:1; visibility:visible; transform:none; transition-delay:0s; }
.s-stage[data-scene="bar"] .s-site { transform:translateY(36px); }

/* modal com captura de e-mail */
.s-pop--modal { left:50%; top:50%; width:min(76%,290px); transform:translate(-50%,-44%) scale(.92);
  background:var(--white); border-radius:16px; padding:18px 18px 16px; text-align:center; box-shadow:0 24px 60px rgba(7,46,37,.35); overflow:hidden; }
.s-stage[data-scene="modal"] .s-pop--modal { opacity:1; visibility:visible; transform:translate(-50%,-50%) scale(1); transition-delay:0s; }
.s-stage[data-scene="modal"] .s-pop-ov { opacity:1; }
.s-pop__emoji { display:block; font-size:1.55rem; line-height:1; margin-bottom:6px; }
.s-pop__h { display:block; font-family:var(--display); font-weight:700; font-size:1.02rem; line-height:1.2; color:var(--ink); }
.s-pop__p { display:block; color:var(--n-500); font-size:.74rem; margin:5px 0 10px; }
.s-pop__in { display:flex; align-items:center; text-align:left; border:1px solid var(--n-300); border-radius:8px; padding:6px 9px; font-size:.74rem; color:var(--ink); min-height:29px; }
.s-pop__typed { display:inline-block; overflow:hidden; white-space:nowrap; vertical-align:bottom; max-width:14em; }
.s-pop__caret { display:inline-block; width:1.5px; height:1em; background:var(--green-600); margin-left:1px; opacity:0; }
.s-pop__btn { display:block; margin-top:7px; background:var(--green-600); color:var(--white); font-weight:700; border-radius:8px; padding:7px 10px; font-size:.76rem; }
.s-pop__ok { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; background:var(--white);
  font-family:var(--display); font-weight:700; font-size:.98rem; color:var(--green-700); opacity:0; }
.s-pop__ok span { display:grid; place-items:center; width:38px; height:38px; border-radius:50%; background:var(--green-600); color:var(--white); font-size:1.1rem; }
.s-pop__ok small { font-family:var(--sans); font-weight:500; font-size:.72rem; color:var(--n-500); }
.s-stage[data-scene="modal"] .s-pop__typed { animation:stType 1.4s steps(16,end) .8s both; }
.s-stage[data-scene="modal"] .s-pop__caret { animation:stCaret 2.3s steps(1) 0s both; }
.s-stage[data-scene="modal"] .s-pop__btn { animation:stPress .35s ease 2.45s both; }
.s-stage[data-scene="modal"] .s-pop__ok { animation:stOk .4s ease 2.85s both; }
@keyframes stType { from { max-width:0; } to { max-width:14em; } }
@keyframes stCaret { 0%{opacity:1;} 15%{opacity:0;} 30%{opacity:1;} 45%{opacity:0;} 60%{opacity:1;} 99%{opacity:1;} 100%{opacity:0;} }
@keyframes stPress { 0%{transform:scale(1);} 45%{transform:scale(.94); background:var(--green-800);} 100%{transform:scale(1);} }
@keyframes stOk { from { opacity:0; transform:scale(.96); } to { opacity:1; transform:none; } }

/* slide-in no canto */
.s-pop--slide { right:12px; bottom:12px; width:min(62%,236px); transform:translateX(118%);
  background:var(--white); border:1px solid var(--n-200); border-radius:14px; padding:12px 12px 12px; box-shadow:0 14px 34px rgba(7,46,37,.22);
  display:grid; grid-template-columns:auto 1fr; gap:4px 10px; align-items:start; }
.s-stage[data-scene="slide"] .s-pop--slide { opacity:1; visibility:visible; transform:none; transition-delay:0s; }
.s-pop--slide .s-pop__av { grid-row:span 2; display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:var(--green-50); font-size:1rem; }
.s-pop--slide b { font-family:var(--display); font-size:.86rem; color:var(--ink); padding-right:12px; }
.s-pop--slide span.t { color:var(--n-500); font-size:.72rem; }
.s-pop--slide .s-pop__btn { grid-column:1 / -1; margin-top:6px; }

/* tela cheia com contagem regressiva */
.s-pop--full { inset:0; transform:scale(1.06); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:20px; text-align:center;
  background:radial-gradient(420px 220px at 50% 0%, rgba(79,174,145,.45), transparent 70%), linear-gradient(160deg,var(--green-900),var(--green-950)); color:var(--white); }
.s-stage[data-scene="full"] .s-pop--full { opacity:1; visibility:visible; transform:none; transition-delay:0s; }
.s-pop--full .s-pop__x { color:rgba(255,255,255,.7); top:10px; right:12px; }
.s-pop--full .k { font-size:.66rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--green-300); }
.s-pop--full .h { font-family:var(--display); font-weight:700; font-size:1.35rem; line-height:1.15; max-width:16em; }
.s-cd { display:flex; gap:6px; margin:4px 0 6px; }
.s-cd span { display:flex; flex-direction:column; align-items:center; min-width:46px; padding:6px 4px; border-radius:9px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.16); }
.s-cd b { font-family:var(--display); font-size:1.2rem; line-height:1.1; font-variant-numeric:tabular-nums; }
.s-cd small { font-size:.58rem; text-transform:uppercase; letter-spacing:.08em; color:var(--green-200); }
.s-pop--full .s-pop__btn { background:var(--gold); color:var(--ink); padding:8px 22px; }

/* rodapé do palco: formato e gatilho da cena */
.s-stage__foot { display:flex; align-items:center; flex-wrap:wrap; gap:8px 10px; padding:10px 12px; border-top:1px solid var(--n-100); background:var(--n-50); }
.s-stage__fmts { display:flex; gap:4px; flex-wrap:wrap; }
.s-stage__fmts span { font-size:.7rem; font-weight:600; color:var(--n-500); background:var(--white); border:1px solid var(--n-200); border-radius:var(--r-pill); padding:3px 9px; transition:background .3s, color .3s, border-color .3s; }
.s-stage[data-scene="bar"] [data-f="bar"], .s-stage[data-scene="modal"] [data-f="modal"],
.s-stage[data-scene="slide"] [data-f="slide"], .s-stage[data-scene="full"] [data-f="full"] { background:var(--green-600); border-color:var(--green-600); color:var(--white); }
.s-stage__trig { margin-left:auto; display:flex; align-items:center; gap:6px; font-size:.72rem; color:var(--n-700); min-width:0; }
.s-stage__trig > b { color:var(--green-700); }
.s-stage__tw { display:grid; }
.s-stage__tw span { grid-area:1/1; opacity:0; transition:opacity .3s; white-space:nowrap; }
.s-stage[data-scene="bar"] [data-t="bar"], .s-stage[data-scene="modal"] [data-t="modal"],
.s-stage[data-scene="slide"] [data-t="slide"], .s-stage[data-scene="full"] [data-t="full"] { opacity:1; }

/* ============================================================
   MOCK 2: editor em 3 passos
   ============================================================ */
.s-ed__steps { display:flex; gap:6px; padding:10px 12px; border-bottom:1px solid var(--n-100); }
.s-ed__step { flex:1 1 0; min-width:0; display:flex; align-items:center; gap:6px; font-size:.7rem; font-weight:600; color:var(--n-500);
  padding:6px 8px; border-radius:9px; background:var(--n-50); transition:background .3s, color .3s; }
.s-ed__step span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.s-ed__step i { flex:none; width:19px; height:19px; border-radius:50%; display:grid; place-items:center; background:var(--n-200); color:var(--n-700); font-style:normal; font-size:.66rem; transition:background .3s, color .3s; }
.s-ed[data-phase="1"] [data-s="1"], .s-ed[data-phase="2"] [data-s="2"], .s-ed[data-phase="3"] [data-s="3"] { background:var(--green-50); color:var(--green-800); }
.s-ed[data-phase="1"] [data-s="1"] i, .s-ed[data-phase="2"] [data-s="2"] i, .s-ed[data-phase="3"] [data-s="3"] i { background:var(--green-600); color:var(--white); }
.s-ed[data-phase="2"] [data-s="1"] i, .s-ed[data-phase="3"] [data-s="1"] i, .s-ed[data-phase="3"] [data-s="2"] i { background:var(--green-100); color:var(--green-800); }

.s-ed__body { display:grid; grid-template-columns:1fr 1.08fr; gap:12px; padding:12px; }
.s-ed__body > * { min-width:0; }
.s-ed__side { display:grid; }
.s-ed__pane { grid-area:1/1; opacity:0; visibility:hidden; transform:translateY(6px); transition:opacity .15s ease, transform .15s ease, visibility 0s linear .15s; min-width:0; }
.s-ed[data-phase="1"] .s-ed__pane--1, .s-ed[data-phase="2"] .s-ed__pane--2, .s-ed[data-phase="3"] .s-ed__pane--3 { opacity:1; visibility:visible; transform:none; transition:opacity .3s ease .16s, transform .3s ease .16s, visibility 0s linear 0s; }

.s-ed__types { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-bottom:12px; }
.s-ed__types span { display:flex; align-items:center; gap:6px; border:1px solid var(--n-200); border-radius:9px; padding:7px 8px; font-size:.72rem; font-weight:600; color:var(--n-700); transition:all .3s; }
.s-ed__types span::before { content:""; flex:none; width:16px; height:12px; border-radius:3px; border:1.5px solid currentColor; opacity:.55; }
.s-ed[data-pick="1"] .s-ed__types .is-target, .s-ed[data-pick="2"] .s-ed__types .is-target { border-color:var(--green-500); background:var(--green-50); color:var(--green-800); box-shadow:0 0 0 1px var(--green-500); }
.s-ed__tpls { display:grid; gap:5px; }
.s-ed__tpls span { display:flex; align-items:center; gap:7px; border:1px solid var(--n-200); border-radius:9px; padding:6px 8px; font-size:.72rem; color:var(--n-700); transition:all .3s; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.s-ed[data-pick="2"] .s-ed__tpls .is-target { border-color:var(--green-500); background:var(--green-50); color:var(--green-800); font-weight:700; box-shadow:0 0 0 1px var(--green-500); }

.s-ed__undo { letter-spacing:3px; color:var(--n-400); font-size:.8rem; text-transform:none; }
.s-ed__els { list-style:none; margin:0 0 10px; padding:0; display:grid; gap:4px; align-content:start; min-height:146px; }
.s-ed__els li { display:none; align-items:center; gap:7px; border:1px solid var(--n-200); border-radius:8px; padding:4px 8px; font-size:.72rem; font-weight:600; color:var(--n-700); background:var(--white); }
.s-ed__els li.is-on { display:flex; animation:edIn .35s var(--ease) both; }
.s-ed__els li::before { content:"⋮⋮"; color:var(--n-300); letter-spacing:-1px; font-size:.7rem; }
.s-ed__els li em { font-style:normal; width:18px; text-align:center; }
@keyframes edIn { from { opacity:0; transform:translateY(-4px) scale(.97); } to { opacity:1; transform:none; } }
.s-ed__add { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
.s-ed__add span { display:grid; place-items:center; height:26px; border:1px solid var(--n-200); border-radius:7px; font-size:.72rem; font-weight:700; color:var(--n-700); background:var(--n-50); transition:background .25s, border-color .25s, transform .25s; }
.s-ed__add span.is-flash { background:var(--green-100); border-color:var(--green-500); transform:scale(1.08); }

.s-ed__rows { display:grid; gap:6px; margin-bottom:10px; }
.s-ed__row { display:flex; align-items:center; gap:8px; border:1px solid var(--n-200); border-radius:9px; padding:6px 9px; font-size:.72rem; color:var(--n-700); transition:background .3s, border-color .3s; }
.s-ed__row .grow { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.s-ed__row b { color:var(--ink); }
.s-ed__row.is-on { border-color:var(--green-300); background:var(--green-50); }
.s-ed__op { display:inline-flex; align-self:center; font-size:.64rem; font-weight:800; color:var(--green-800); background:var(--green-100); border-radius:var(--r-pill); padding:2px 9px; margin:-2px auto; }
.s-ed__savebar { display:flex; gap:6px; }
.s-ed__savebar span { flex:1; text-align:center; border-radius:8px; padding:7px 6px; font-size:.72rem; font-weight:700; border:1px solid var(--n-200); color:var(--n-700); white-space:nowrap; }
.s-ed__savebar span.go { background:var(--green-600); border-color:var(--green-600); color:var(--white); transition:transform .2s, background .3s; }
.s-ed[data-saved="1"] .s-ed__savebar span.go { background:var(--green-800); transform:scale(.97); }

.s-ed__prev { display:flex; flex-direction:column; gap:8px; background:var(--n-50); border:1px solid var(--n-100); border-radius:12px; padding:8px; }
.s-ed__dev { display:flex; align-items:center; justify-content:space-between; gap:6px; font-size:.66rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--n-500); }
.s-ed__seg { display:inline-flex; background:var(--white); border:1px solid var(--n-200); border-radius:8px; padding:2px; text-transform:none; letter-spacing:0; }
.s-ed__seg span { padding:2px 8px; border-radius:6px; font-size:.66rem; color:var(--n-500); transition:background .3s, color .3s; }
.s-ed[data-dev="d"] .s-ed__seg [data-d="d"], .s-ed[data-dev="m"] .s-ed__seg [data-d="m"] { background:var(--green-600); color:var(--white); }
.s-ed__canvas { position:relative; height:252px; display:flex; justify-content:center; }
.s-ed__screen { position:relative; width:100%; height:100%; border-radius:9px; overflow:hidden; border:1px solid var(--n-200);
  background:
    linear-gradient(var(--n-200),var(--n-200)) 10px 12px / 40% 7px no-repeat,
    linear-gradient(var(--n-100),var(--n-100)) 10px 28px / 70% 6px no-repeat,
    linear-gradient(var(--n-100),var(--n-100)) 10px 40px / 56% 6px no-repeat,
    var(--white);
  transition:width .55s var(--ease); display:grid; place-items:center; }
.s-ed[data-dev="m"] .s-ed__screen { width:56%; border-radius:16px; border-width:3px; border-color:var(--ink); }
.s-ed__screen::before { content:""; position:absolute; inset:0; background:rgba(7,46,37,.38); }
.s-ed__pop { position:relative; z-index:1; width:84%; max-width:230px; background:var(--white); border-radius:12px; padding:12px 12px 12px; text-align:center; box-shadow:0 12px 30px rgba(7,46,37,.3); display:grid; gap:6px; justify-items:center; transition:padding .3s; }
.s-ed[data-dev="m"] .s-ed__pop { width:90%; padding:10px 8px; }
.s-ed__pop .x { position:absolute; top:5px; right:8px; color:var(--n-400); font-size:.8rem; line-height:1; }
.s-ed__ghost { display:none; width:100%; gap:6px; justify-items:center; }
.s-ed__ghost i { display:block; height:7px; width:80%; border-radius:4px; background:var(--n-100); }
.s-ed__ghost i:first-child { height:10px; width:60%; background:var(--n-200); }
.s-ed__ghost i:last-child { height:16px; width:90%; background:var(--green-100); border-radius:6px; }
.s-ed[data-els="0"] .s-ed__ghost { display:grid; }
.s-ed .pe { display:none; }
.s-ed .pe.is-on { display:block; animation:edPop .4s var(--ease) both; }
@keyframes edPop { from { opacity:0; transform:scale(.9); } to { opacity:1; transform:none; } }
.s-ed .pe-h { font-family:var(--display); font-weight:700; font-size:.92rem; line-height:1.15; color:var(--ink); }
.s-ed .pe-p { font-size:.68rem; color:var(--n-500); line-height:1.3; }
.s-ed .pe-c { border:1.5px dashed var(--green-500); background:var(--green-50); border-radius:7px; padding:3px 8px; font-family:var(--display); font-weight:700; font-size:.78rem; color:var(--green-700); letter-spacing:.06em; }
.s-ed .pe-c em { font-style:normal; font-family:var(--sans); letter-spacing:0; font-size:.6rem; color:var(--green-800); background:var(--green-100); border-radius:4px; padding:1px 5px; margin-left:6px; }
.s-ed .pe-t.is-on { display:flex; gap:3px; }
.s-ed .pe-t b { font-family:var(--display); font-size:.72rem; color:#be123c; background:#fff1f2; border:1px solid #fecdd3; border-radius:5px; padding:1px 4px; font-variant-numeric:tabular-nums; }
.s-ed .pe-b { width:100%; background:var(--green-600); color:var(--white); font-weight:700; border-radius:7px; padding:6px; font-size:.72rem; }
.s-ed__live { position:absolute; z-index:2; left:8px; top:8px; font-size:.64rem; font-weight:700; color:var(--white); background:var(--green-600); border-radius:var(--r-pill); padding:2px 9px; opacity:0; transform:scale(.8); transition:opacity .3s, transform .3s var(--ease); }
.s-ed[data-saved="1"] .s-ed__live { opacity:1; transform:none; }

/* ============================================================
   MOCK 3: gatilhos e público
   ============================================================ */
.s-trg__op { display:inline-flex; background:var(--n-100); border-radius:8px; padding:2px; text-transform:none; letter-spacing:0; }
.s-trg__op span { padding:2px 10px; border-radius:6px; font-size:.66rem; font-weight:800; color:var(--n-500); transition:background .3s, color .3s; }
.s-trg[data-op="and"] .s-trg__op [data-o="and"], .s-trg[data-op="or"] .s-trg__op [data-o="or"] { background:var(--green-600); color:var(--white); }
.s-trg__rows { display:grid; gap:7px; margin-bottom:14px; }
.s-trg__row { display:flex; align-items:center; gap:10px; border:1px solid var(--n-200); border-radius:var(--r-sm); padding:8px 11px; color:var(--n-700); background:var(--white); transition:border-color .3s, background .3s; }
.s-trg__row .ico { flex:none; width:26px; height:26px; border-radius:8px; background:var(--green-50); display:grid; place-items:center; font-size:.8rem; }
.s-trg__row .grow { flex:1; min-width:0; }
.s-trg__row b { display:block; color:var(--ink); font-size:.8rem; }
.s-trg__row small { display:block; color:var(--n-500); font-size:.72rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.s-trg__row.is-on { border-color:var(--green-300); background:var(--green-50); }
.s-trg__chips { display:flex; flex-wrap:wrap; gap:6px; }
.s-trg__chips span { display:inline-flex; align-items:center; gap:5px; font-size:.72rem; font-weight:600; border:1px solid var(--n-200); color:var(--n-500); background:var(--white); border-radius:var(--r-pill); padding:4px 10px; transition:all .3s; }
.s-trg__chips span.is-on { border-color:var(--green-400); background:var(--green-50); color:var(--green-800); }

/* ============================================================
   MOCK 4: teste A/B com contadores ao vivo
   ============================================================ */
.s-ab__head { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:12px; }
.s-ab__head b { display:block; font-family:var(--display); font-size:.98rem; }
.s-ab__head small { color:var(--n-500); font-size:.72rem; }
.s-ab__status { display:grid; flex:none; }
.s-ab__status > span { grid-area:1/1; justify-self:end; transition:opacity .35s, transform .35s var(--ease); }
.s-ab__wait { background:var(--amber-bg) !important; color:var(--amber) !important; }
.s-ab__wait::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; animation:abBlink 1.2s ease-in-out infinite; }
@keyframes abBlink { 50% { opacity:.25; } }
.s-ab__win { background:var(--green-600) !important; color:var(--white) !important; opacity:0; transform:scale(.8); }
.s-ab.is-won .s-ab__win { opacity:1; transform:none; }
.s-ab.is-won .s-ab__wait { opacity:0; }
.s-ab__split { display:flex; height:22px; border-radius:7px; overflow:hidden; font-size:.66rem; font-weight:700; margin-bottom:12px; }
.s-ab__split span { display:flex; align-items:center; padding:0 9px; }
.s-ab__split .a { width:50%; background:var(--n-200); color:var(--n-700); }
.s-ab__split .b { flex:1; background:var(--green-600); color:var(--white); justify-content:flex-end; }
.s-ab__vars { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.s-ab__var { position:relative; border:1px solid var(--n-200); border-radius:12px; padding:8px; transition:border-color .3s, box-shadow .3s; min-width:0; }
.s-ab__var.is-hit { border-color:var(--green-400); }
.s-ab.is-won .s-ab__var--b { border-color:var(--green-600); box-shadow:0 0 0 1px var(--green-600); }
.s-ab__tag { position:absolute; top:-9px; left:10px; font-size:.64rem; font-weight:800; border-radius:6px; padding:1px 7px; background:var(--n-200); color:var(--n-700); }
.s-ab__var--b .s-ab__tag { background:var(--green-600); color:var(--white); }
.s-ab__thumb { height:88px; border-radius:8px; display:grid; place-items:center; margin-bottom:8px; overflow:hidden; transition:transform .25s; background:var(--n-100); }
.s-ab__var.is-hit .s-ab__thumb { transform:scale(1.03); }
.s-ab__mini { width:78%; border-radius:8px; padding:8px 7px; text-align:center; display:grid; gap:4px; box-shadow:0 6px 14px rgba(7,46,37,.18); }
.s-ab__mini b { font-family:var(--display); font-size:.74rem; line-height:1.15; }
.s-ab__mini i { display:block; font-style:normal; border-radius:5px; padding:3px; font-size:.6rem; font-weight:700; }
.s-ab__var--a .s-ab__mini { background:var(--white); color:var(--ink); }
.s-ab__var--a .s-ab__mini i { background:var(--n-500); color:var(--white); }
.s-ab__var--b .s-ab__mini { background:var(--green-900); color:var(--white); }
.s-ab__var--b .s-ab__mini i { background:var(--gold); color:var(--ink); }
.s-ab__stats { display:grid; gap:2px; font-size:.7rem; color:var(--n-500); }
.s-ab__stats div { display:flex; justify-content:space-between; gap:6px; }
.s-ab__stats b { color:var(--ink); font-variant-numeric:tabular-nums; }
.s-ab__stats .rate b { font-family:var(--display); font-size:.98rem; color:var(--green-700); }
.s-ab__conf { margin-top:12px; background:var(--green-50); border-radius:var(--r-sm); padding:10px 12px; }
.s-ab__conf-row { display:flex; justify-content:space-between; align-items:baseline; gap:8px; font-size:.72rem; color:var(--n-700); }
.s-ab__conf-row b { font-family:var(--display); font-size:1.05rem; color:var(--green-700); font-variant-numeric:tabular-nums; }
.s-ab__bar { position:relative; height:8px; background:var(--green-100); border-radius:var(--r-pill); margin:7px 0 0; overflow:hidden; }
.s-ab__fill { position:absolute; inset:0 auto 0 0; width:99%; background:linear-gradient(90deg,var(--green-500),var(--green-600)); border-radius:var(--r-pill); transition:width .2s linear; }
.s-ab__thr { position:absolute; top:-3px; bottom:-3px; left:95%; width:2px; background:var(--green-900); opacity:.55; }
.s-ab__stream { display:flex; align-items:center; gap:7px; margin-top:10px; font-size:.72rem; color:var(--n-500); min-width:0; }
.s-ab__stream span:last-child { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.s-ab__stream b { color:var(--ink); }
.s-ab__dotv { flex:none; width:8px; height:8px; border-radius:50%; background:var(--green-500); box-shadow:0 0 0 3px var(--green-100); }

/* ============================================================
   MOCK 5: relatório (KPIs, tendência, mapa de calor)
   ============================================================ */
.s-rep__top { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:12px; }
.s-rep__tabs { display:flex; gap:4px; min-width:0; overflow:hidden; }
.s-rep__tabs span { font-size:.68rem; font-weight:600; color:var(--n-500); border-radius:7px; padding:4px 8px; white-space:nowrap; }
.s-rep__tabs span.is-on { background:var(--green-50); color:var(--green-800); }
.s-rep__exp { display:flex; gap:4px; flex:none; }
.s-rep__exp span { font-size:.64rem; font-weight:700; border:1px solid var(--n-200); border-radius:7px; padding:3px 7px; color:var(--n-700); }
.s-rep__kpis { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-bottom:12px; }
.s-kpi { border:1px solid var(--n-200); border-radius:10px; padding:7px 9px; min-width:0; }
.s-kpi small { display:block; font-size:.62rem; color:var(--n-500); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.s-kpi b { display:block; font-family:var(--display); font-size:1.02rem; color:var(--ink); font-variant-numeric:tabular-nums; }
.s-rep__chart { border:1px solid var(--n-100); border-radius:10px; padding:8px 10px 6px; margin-bottom:10px; }
.s-rep__legend { display:flex; gap:12px; font-size:.64rem; color:var(--n-500); margin-bottom:4px; }
.s-rep__legend span { display:inline-flex; align-items:center; gap:5px; }
.s-rep__legend span::before { content:""; width:14px; height:0; border-top:2.5px solid var(--green-600); }
.s-rep__legend span.prev::before { border-top:2px dashed var(--n-400); }
.s-rep__svg { width:100%; height:86px; }
.s-rep__svg .grid { stroke:var(--n-100); stroke-width:1; }
.s-rep__svg .prev { fill:none; stroke:var(--n-300); stroke-width:2; stroke-dasharray:4 4; }
.s-rep__svg .area { fill:url(#repArea); opacity:0; transition:opacity .8s ease .9s; }
.s-rep__svg .cur { fill:none; stroke:var(--green-600); stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:100; stroke-dashoffset:0; }
.s-rep.is-reset .s-rep__svg .cur { stroke-dashoffset:100; transition:none; }
.s-rep.is-drawn .s-rep__svg .cur { stroke-dashoffset:0; transition:stroke-dashoffset 1.8s cubic-bezier(.4,0,.2,1); }
.s-rep.is-drawn .s-rep__svg .area, .s-rep:not(.is-reset) .s-rep__svg .area { opacity:1; }
.s-rep.is-reset .s-rep__svg .area { opacity:0; transition:none; }
.s-rep__heat { display:grid; grid-template-columns:auto 1fr; gap:6px 8px; align-items:center; }
.s-rep__heat .lbl { font-size:.62rem; color:var(--n-500); font-weight:600; }
.s-heat { display:grid; grid-template-columns:repeat(12,1fr); gap:2px; }
.s-heat i { display:block; height:8px; border-radius:2px; background:var(--n-100); transition:background .4s ease; }
.s-heat i.l1 { background:var(--green-100); } .s-heat i.l2 { background:var(--green-300); } .s-heat i.l3 { background:var(--green-500); } .s-heat i.l4 { background:var(--green-800); }
.s-rep.is-reset .s-heat i { background:var(--n-100); transition:none; }

/* ============================================================
   MOCK 6: leads chegando
   ============================================================ */
.s-leads__tools { display:flex; gap:6px; margin-bottom:10px; align-items:center; }
.s-leads__search { flex:1; min-width:0; border:1px solid var(--n-200); border-radius:8px; padding:5px 9px; font-size:.7rem; color:var(--n-400); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.s-leads__filter, .s-leads__csv { flex:none; font-size:.68rem; font-weight:700; border-radius:8px; padding:5px 9px; white-space:nowrap; }
.s-leads__filter { border:1px solid var(--n-200); color:var(--n-700); }
.s-leads__csv { background:var(--green-600); color:var(--white); }
.s-leads__tbl { border:1px solid var(--n-200); border-radius:10px; overflow:hidden; }
.s-leads__row { display:grid; grid-template-columns:1.55fr 1.1fr .95fr .55fr; gap:8px; align-items:center; padding:7px 10px; font-size:.7rem; color:var(--n-700); border-top:1px solid var(--n-100); background:var(--white); }
.s-leads__row > span { min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.s-leads__row > span:first-child { color:var(--ink); font-weight:600; }
.s-leads__row > span:last-child { color:var(--n-500); text-align:right; }
.s-leads__row--h { border-top:0; background:var(--n-50); font-size:.62rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--n-500); }
.s-leads__row--h > span:first-child { color:var(--n-500); font-weight:700; }
.s-leads__rows { height:calc(5 * 33px); overflow:hidden; }
.s-leads__row.is-new { animation:leadIn .6s var(--ease) both, leadHi 2.2s ease both; }
@keyframes leadIn { from { opacity:0; transform:translateY(-12px); } to { opacity:1; transform:none; } }
@keyframes leadHi { 0%,40% { background:var(--green-50); } 100% { background:var(--white); } }
.s-leads__pp { font-style:normal; display:inline-block; max-width:100%; overflow:hidden; text-overflow:ellipsis; vertical-align:bottom; background:var(--n-100); border-radius:6px; padding:1px 7px; font-size:.66rem; font-weight:600; }
.s-leads__foot { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-top:10px; font-size:.72rem; color:var(--n-500); }
.s-leads__foot b { color:var(--ink); font-family:var(--display); font-size:.9rem; font-variant-numeric:tabular-nums; }
.s-leads__del { white-space:nowrap; border:1px dashed var(--n-300); border-radius:7px; padding:3px 8px; font-size:.68rem; }

/* ============================================================
   MOCK 7: empresas e equipe
   ============================================================ */
.s-team__cos { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-bottom:14px; }
.s-co { border:1px solid var(--n-200); border-radius:10px; padding:7px 8px; display:flex; gap:7px; align-items:center; min-width:0; transition:border-color .3s, background .3s; }
.s-co i { flex:none; display:grid; place-items:center; width:22px; height:22px; border-radius:6px; font-style:normal; font-size:.66rem; font-weight:800; color:var(--white); }
.s-co div { min-width:0; }
.s-co b { display:block; font-size:.7rem; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.s-co small { display:block; font-size:.62rem; color:var(--n-500); }
.c1 { background:var(--amber); } .c2 { background:var(--blue); } .c3 { background:var(--green-600); } .c4 { background:var(--violet); }
.s-co.is-hl { border-color:var(--green-400); background:var(--green-50); }
.s-team__inv { display:flex; gap:6px; align-items:center; margin-bottom:10px; }
.s-team__email { flex:1; min-width:0; display:flex; align-items:center; border:1px solid var(--n-300); border-radius:8px; padding:5px 9px; font-size:.7rem; color:var(--ink); height:28px; overflow:hidden; }
.s-team__typed { display:inline-block; overflow:hidden; white-space:nowrap; max-width:16em; vertical-align:bottom; }
.s-team.is-typing .s-team__typed { animation:stType 1.5s steps(18,end) both; }
.s-team.is-reset .s-team__typed { max-width:0; }
.s-team__role { flex:none; font-size:.68rem; font-weight:600; border:1px solid var(--n-200); border-radius:8px; padding:5px 8px; color:var(--n-700); white-space:nowrap; }
.s-team__go { flex:none; font-size:.68rem; font-weight:700; border-radius:8px; padding:5px 10px; background:var(--green-600); color:var(--white); transition:transform .2s, background .2s; white-space:nowrap; }
.s-team.is-press .s-team__go { transform:scale(.94); background:var(--green-800); }
.s-team__list { display:grid; gap:6px; }
.s-mem { display:grid; grid-template-columns:auto 1fr auto; gap:3px 9px; align-items:center; border:1px solid var(--n-100); border-radius:10px; padding:6px 9px; min-width:0; }
.s-mem.is-new { display:none; }
.s-mem.is-new.is-on { display:grid; animation:leadIn .5s var(--ease) both, leadHi 2.4s ease both; }
.s-av { grid-row:span 2; display:grid; place-items:center; width:26px; height:26px; border-radius:50%; font-size:.7rem; font-weight:800; color:var(--white); }
.s-mem b { font-size:.74rem; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.s-mem .role { font-size:.62rem; font-weight:700; border-radius:var(--r-pill); padding:2px 8px; white-space:nowrap; }
.role--own { background:var(--ink); color:var(--white); }
.role--adm { background:var(--green-100); color:var(--green-800); }
.role--usr { background:var(--blue-bg); color:var(--blue); }
.s-mem .acc { grid-column:2 / -1; display:flex; flex-wrap:wrap; gap:4px; font-size:.64rem; color:var(--n-500); min-width:0; }
.s-mem .acc span { border-radius:var(--r-pill); padding:1px 7px; background:var(--n-100); color:var(--n-700); font-weight:600; white-space:nowrap; }
.s-mem .acc span.pending { background:var(--amber-bg); color:var(--amber); }
.s-mem .acc span.chip { display:none; }
.s-mem .acc span.chip.is-on { display:inline-block; animation:edPop .35s var(--ease) both; }
.s-mem.is-new .acc span.pending.is-off { display:none; }

/* ---------- planos ---------- */
.s-howpay { list-style:none; margin:0 auto 44px; padding:0; max-width:900px; display:grid; grid-template-columns:repeat(3,1fr); gap:0;
  border:1px solid var(--n-200); border-radius:var(--r-lg); background:var(--white); box-shadow:var(--shadow-sm); overflow:hidden; }
.s-howpay li { display:flex; gap:12px; align-items:flex-start; padding:20px 22px; }
.s-howpay li + li { border-left:1px solid var(--n-100); }
.s-howpay__n { flex:none; display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:var(--green-50); color:var(--green-700); font-family:var(--display); font-weight:700; font-size:.9rem; border:1px solid var(--green-200); }
.s-howpay b { display:block; font-size:.98rem; margin-bottom:2px; }
.s-howpay p { color:var(--n-500); font-size:.9rem; line-height:1.5; }

.s-plans { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; align-items:stretch; }
.s-plan {
  position:relative; display:flex; flex-direction:column; gap:18px; padding:30px;
  background:var(--white); border:1px solid var(--n-200); border-radius:var(--r-xl); box-shadow:var(--shadow-sm);
}
.s-plan--featured { border-color:var(--green-600); box-shadow:var(--shadow-pop); }
.s-plan__badge {
  position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  background:var(--green-600); color:var(--white); font-size:.78rem; font-weight:600;
  padding:5px 14px; border-radius:var(--r-pill); white-space:nowrap;
}
.s-plan__head h3 { font-size:1.4rem; }
.s-plan__tag { color:var(--n-500); font-size:.92rem; margin-top:6px; }
.s-plan__price { font-family:var(--display); font-weight:700; font-size:3rem; line-height:1; color:var(--ink); }
.s-plan__price small { font-size:1rem; font-weight:500; color:var(--n-500); }
.s-plan__cur { font-size:1.2rem; font-weight:600; color:var(--n-500); vertical-align:super; margin-right:2px; }
.s-plan__list { list-style:none; margin:4px 0 0; padding:0; display:grid; gap:11px; }
.s-plan__list li { position:relative; padding-left:26px; font-size:.96rem; color:var(--n-700); }
.s-plan__list li::before { content:"✓"; position:absolute; left:0; top:0; color:var(--green-600); font-weight:700; }
.s-plan__list li b { color:var(--ink); }

/* tabela comparativa (details nativo, sem JS) */
.s-compare-wrap { margin-top:56px; }
.s-compare-wrap > .s-compare-title { list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:center;
  gap:10px; margin:0 auto; max-width:360px; padding:14px 22px; border:1px solid var(--n-200); border-radius:var(--r-pill);
  background:var(--white); box-shadow:var(--shadow-sm); font-family:var(--display); font-weight:600; font-size:1.05rem; transition:border-color .15s, background .15s; }
.s-compare-wrap > .s-compare-title:hover { border-color:var(--green-400); background:var(--green-50); }
.s-compare-wrap > .s-compare-title::-webkit-details-marker { display:none; }
.s-compare-chev { color:var(--green-600); transition:transform .2s; }
.s-compare-wrap[open] .s-compare-chev { transform:rotate(180deg); }
.s-compare-wrap[open] > .s-compare-title { margin-bottom:18px; }
.s-compare-scroll { overflow-x:auto; border:1px solid var(--n-200); border-radius:var(--r-lg); background:var(--white); box-shadow:var(--shadow-sm); }
.s-compare { width:100%; border-collapse:collapse; min-width:640px; }
.s-compare th, .s-compare td { padding:14px 18px; text-align:left; font-size:.94rem; border-bottom:1px solid var(--n-100); }
.s-compare thead th { font-family:var(--display); font-size:1rem; color:var(--ink); background:var(--n-50); }
.s-compare td:first-child, .s-compare th:first-child { color:var(--n-700); }
.s-compare td:not(:first-child), .s-compare th:not(:first-child) { text-align:center; font-weight:600; }
.s-compare .is-featured { background:var(--green-50); }
.s-compare tbody tr:last-child td { border-bottom:none; }
.s-yes { color:var(--green-600); }
.s-no { color:var(--n-400); }
.s-compare-foot { text-align:center; color:var(--n-500); font-size:.92rem; margin-top:16px; }

/* ---------- FAQ ---------- */
.s-faq { display:flex; flex-direction:column; gap:12px; }
.s-faq details {
  background:var(--white); border:1px solid var(--n-200); border-radius:var(--r-md); padding:4px 20px;
  transition:border-color .2s, box-shadow .2s;
}
.s-faq details[open] { border-color:var(--green-200); box-shadow:var(--shadow-sm); }
.s-faq summary {
  cursor:pointer; list-style:none; padding:16px 0; font-weight:600; font-size:1.04rem;
  display:flex; justify-content:space-between; align-items:center; gap:16px; border-radius:6px;
}
.s-faq summary::-webkit-details-marker { display:none; }
.s-faq summary::after { content:"+"; font-family:var(--display); font-size:1.4rem; color:var(--green-600); transition:transform .2s; flex:none; }
.s-faq details[open] summary::after { transform:rotate(45deg); }
.s-faq p { color:var(--n-500); padding:0 0 18px; font-size:.98rem; }
.s-faq p b { color:var(--n-700); }

/* ---------- CTA final ---------- */
.s-cta { background:linear-gradient(160deg,var(--green-900),var(--green-950)); color:var(--green-100); }
.s-cta__title { color:var(--white); }
.s-cta .s-lead { color:var(--green-100); margin:14px auto 0; max-width:560px; }
.s-cta .s-btn--ghost { color:var(--white); border-color:rgba(255,255,255,.25); }
.s-cta .s-btn--ghost:hover { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.4); }

/* ---------- footer ---------- */
.s-footer { background:var(--ink); color:var(--n-300); padding:56px 0 28px; }
.s-footer__inner { display:grid; grid-template-columns:1.2fr 2fr; gap:40px; padding-bottom:36px; border-bottom:1px solid rgba(255,255,255,.08); }
.s-footer__brand p { margin-top:14px; color:var(--n-400); font-size:.94rem; max-width:320px; }
.s-footer__cols { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.s-footer__cols h2 { font-family:var(--display); font-size:.82rem; letter-spacing:.06em; text-transform:uppercase; color:var(--n-400); margin-bottom:14px; }
.s-footer__cols a { display:block; color:var(--n-300); font-size:.94rem; padding:5px 0; transition:color .15s; }
.s-footer__cols a:hover { color:var(--white); }
.s-footer__base { display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; padding-top:22px; color:var(--n-400); font-size:.86rem; }
.s-footer .s-lang { margin-left:-8px; }

/* ---------- aviso de cookies ---------- */
.s-cookie {
  position:fixed; left:16px; right:16px; bottom:16px; z-index:80; margin:0 auto; max-width:720px;
  display:flex; align-items:center; gap:16px; flex-wrap:wrap; justify-content:space-between;
  background:var(--white); border:1px solid var(--n-200); border-radius:var(--r-lg);
  box-shadow:var(--shadow-pop); padding:16px 20px;
}
.s-cookie[hidden] { display:none; }
.s-cookie__txt { margin:0; font-size:.9rem; color:var(--n-700); flex:1; min-width:220px; line-height:1.55; }
.s-cookie__txt a { color:var(--green-700); text-decoration:underline; }

/* ---------- reveal ---------- */
[data-reveal] { opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
[data-reveal].is-in { opacity:1; transform:none; }
.no-js [data-reveal] { opacity:1; transform:none; }

/* animações contínuas (piscar, girar) só rodam com o mock visível */
.s-anim:not(.is-live) *, .s-anim:not(.is-live) *::before, .s-anim:not(.is-live) *::after { animation-play-state:paused !important; }

/* ---------- responsivo ---------- */
@media (max-width:1040px) {
  .s-tpls { grid-template-columns:repeat(5,1fr); gap:10px; }
  .s-tpl small { display:none; }
}
@media (max-width:940px) {
  .s-nav { display:none; position:absolute; top:68px; left:0; right:0; flex-direction:column; align-items:stretch; gap:2px;
    background:var(--white); border-bottom:1px solid var(--n-200); padding:12px 16px 18px; box-shadow:var(--shadow-md); }
  .s-nav.is-open { display:flex; }
  .s-nav > a { padding:12px; }
  .s-nav .s-btn { margin:6px 0 0; }
  .s-nav .s-lang { margin:10px 0 0; justify-content:center; }
  .s-burger { display:flex; }
}
@media (max-width:960px) {
  .s-hero__grid { grid-template-columns:1fr; gap:36px; }
  .s-hero__copy { max-width:680px; }
  .s-grid--3, .s-steps { grid-template-columns:1fr 1fr; }
  .s-plans { grid-template-columns:1fr; max-width:480px; margin:0 auto; }
  .s-plan--featured { order:-1; }
  .s-footer__inner { grid-template-columns:1fr; }
  .s-trust { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:860px) {
  .s-zz { grid-template-columns:1fr; gap:28px; padding:40px 0; }
  .s-zz--flip .s-zz__copy { order:1; }
  .s-zz--flip .s-zz__art { order:2; }
  .s-zz-claim { grid-template-columns:1fr; padding:32px 24px; }
  .s-zz-claim .s-btn { justify-self:start; }
  .s-howpay { grid-template-columns:1fr; }
  .s-howpay li + li { border-left:0; border-top:1px solid var(--n-100); }
}
@media (max-width:680px) {
  body { font-size:16px; }
  .s-container { padding:0 16px; }
  .s-section { padding:60px 0; }
  .s-hero { padding:40px 0 28px; }
  .s-grid--3, .s-grid--2, .s-steps, .s-trust { grid-template-columns:1fr; }
  .s-trust { gap:16px; padding:18px; }
  .s-tpls { grid-template-columns:repeat(2,1fr); }
  .s-tpl small { display:block; }
  .s-footer__cols { grid-template-columns:1fr 1fr; }
  .s-footer__base { flex-direction:column; align-items:flex-start; gap:6px; }
  .s-zz-claim h3 { font-size:1.45rem; }
  .s-zz__copy h3 { font-size:1.55rem; }
  .s-hero__cta .s-btn { flex:1 1 auto; }
  .s-plan { padding:26px 22px; }
}
@media (max-width:560px) {
  .s-ed__body { grid-template-columns:1fr; }
  .s-ed__prev { order:-1; }
  .s-ed__canvas { height:206px; }
  .s-ed__step span { display:none; }
  .s-ed[data-phase="1"] [data-s="1"] span, .s-ed[data-phase="2"] [data-s="2"] span, .s-ed[data-phase="3"] [data-s="3"] span { display:inline; }
  .s-ed__step { flex:0 0 auto; }
  .s-ed[data-phase="1"] [data-s="1"], .s-ed[data-phase="2"] [data-s="2"], .s-ed[data-phase="3"] [data-s="3"] { flex:1 1 auto; }
  .s-stage[data-scene="bar"] .s-site { transform:translateY(54px); }
  .s-pop--bar { font-size:.7rem; }
  .s-stage__view { height:290px; }
  .s-site__hero { grid-template-columns:1fr .8fr; }
  .s-pop--full .h { font-size:1.12rem; }
  .s-cd span { min-width:40px; }
  .s-stage__trig { margin-left:0; width:100%; }
  .s-leads__row { grid-template-columns:1.5fr 1.1fr .55fr; }
  .s-leads__row > span:nth-child(3) { display:none; }
  .s-rep__tabs span:nth-child(n+3) { display:none; }
  .s-team__cos { grid-template-columns:1fr 1fr 1fr; gap:4px; }
  .s-co { flex-direction:column; align-items:stretch; gap:4px; }
  .s-co b { white-space:normal; }
  .s-team__role { display:none; }
  .s-ab__thumb { height:76px; }
  .s-mock__body { padding:12px; }
}
@media (max-width:480px) {
  .s-cookie { left:10px; right:10px; bottom:10px; gap:10px; padding:12px 14px; flex-wrap:nowrap; }
  .s-cookie__txt { font-size:.8rem; line-height:1.45; min-width:0; }
}

/* ---------- acessibilidade: sem movimento, fica o estado final ---------- */
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  [data-reveal] { opacity:1; transform:none; transition:none; }
  .s-anim, .s-anim *, .s-anim *::before, .s-anim *::after { animation:none !important; transition:none !important; }
  .s-pop__caret { display:none; }
}