/* ============================================================
   eazymkt · landing — STUDIO NOIR
   Direção escolhida na rodada 2 de protótipos (docs/landing/prototipos-2/prototipo-02-noir.html).
   Dark-first, monocromático quente: poeira dourada, spotlight, vidro fosco e
   uma única nota de âmbar. O escuro aqui é a identidade, não uma variante —
   não existe tema claro nesta direção.
   ============================================================ */

/* ============================== FONTES ==============================
   Inter e Sora servidas pelo próprio site (SIL Open Font License 1.1), sem
   requisição a host externo. Só o subconjunto latin: cobre todo o português,
   inclusive acentos, travessão e aspas curvas. Glifos fora dele (setas, ✓)
   caem na fonte do sistema, como já acontecia com o Google Fonts. */
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('assets/fonts/inter-400-latin.woff2') format('woff2');
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('assets/fonts/inter-500-latin.woff2') format('woff2');
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('assets/fonts/inter-600-latin.woff2') format('woff2');
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('assets/fonts/inter-700-latin.woff2') format('woff2');
}
@font-face{
  font-family:'Sora';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('assets/fonts/sora-600-latin.woff2') format('woff2');
}
@font-face{
  font-family:'Sora';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('assets/fonts/sora-700-latin.woff2') format('woff2');
}
@font-face{
  font-family:'Sora';
  font-style:normal;
  font-weight:800;
  font-display:swap;
  src:url('assets/fonts/sora-800-latin.woff2') format('woff2');
}

:root{
  --bg:#141210;
  --bg-deep:#0f0d0b;
  --surface:#1e1c1a;
  --surface-2:#242120;
  --ink:#ece7e2;
  --ink-strong:#fbf8f5;
  --muted:#a29a92;
  --taupe:#b6a89d;
  --taupe-2:#cbbcae;
  --amber:#c8892f;
  --ok:#3f9d7a;
  --line:#322e2a;
  --line-soft:rgba(236,231,226,.08);
  --glass:linear-gradient(165deg, rgba(255,255,255,.05), rgba(255,255,255,.015) 58%);
  --on-accent:#201c19;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --spring:cubic-bezier(.34,1.45,.5,1);
  --radius:18px;
  --maxw:1180px;
  --display:"Sora", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --sans:"Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; font-family:var(--sans); font-size:16px; line-height:1.62;
  background:var(--bg); color:var(--ink);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:clip;
}
h1,h2,h3{ font-family:var(--display); color:var(--ink-strong); margin:0; line-height:1.1; letter-spacing:-.025em; text-wrap:balance; }
p{ margin:0; }
a{ color:inherit; }
button{ font-family:inherit; }
::selection{ background:rgba(182,168,157,.32); color:#fff; }
a:focus-visible, button:focus-visible{ outline:2px solid var(--taupe); outline-offset:3px; }

.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(20px,4vw,36px); }
section[id]{ scroll-margin-top:96px; }

/* --- grão de filme (noir) --- */
.grain{
  position:fixed; inset:0; z-index:2; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --- ASSINATURA (a): spotlight que segue o cursor, página inteira --- */
.spot{
  position:fixed; inset:0; z-index:3; pointer-events:none; mix-blend-mode:screen;
  background:
    radial-gradient(560px circle at var(--sx,50%) var(--sy,30%),
      rgba(203,178,132,.085), rgba(203,178,132,.032) 38%, transparent 66%);
}

/* --- ASSINATURA (d): barra de progresso de scroll --- */
.scrollbar{ position:fixed; top:0; left:0; right:0; height:2px; z-index:220; pointer-events:none; }
.scrollbar i{
  display:block; height:100%; transform:scaleX(0); transform-origin:0 50%;
  background:linear-gradient(90deg, var(--taupe) 55%, var(--amber));
  box-shadow:0 0 12px rgba(200,137,47,.4);
}

/* ============================== NAV ============================== */
.nav{
  position:sticky; top:0; z-index:120;
  background:rgba(20,18,16,.66);
  -webkit-backdrop-filter:blur(16px) saturate(1.1); backdrop-filter:blur(16px) saturate(1.1);
  border-bottom:1px solid transparent;
  transition:background .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.nav.scrolled{
  background:rgba(18,16,14,.88);
  border-bottom-color:var(--line);
  box-shadow:0 18px 50px rgba(0,0,0,.5);
}
.nav-inner{ display:flex; align-items:center; gap:26px; padding-block:15px; }
.logo-link{ display:inline-flex; align-items:center; text-decoration:none; }
/* 42px, não os 29px do protótipo: o wordmark carrega a microtipografia
   "sistema de gestão", que abaixo disso vira borrão. É o tamanho que a landing
   anterior já usava (commit 52c0646, "larger logo"). */
.logo{ height:42px; width:auto; color:var(--taupe); transition:color .35s var(--ease), filter .35s var(--ease); }
.logo-link:hover .logo{ color:var(--taupe-2); filter:drop-shadow(0 0 14px rgba(203,188,174,.35)); }
.footer .logo{ height:32px; color:var(--muted); }
.footer .logo-link:hover .logo{ color:var(--taupe); }
.nav-links{ display:flex; gap:2px; margin-inline:auto; }
.nav-links a{
  position:relative; color:var(--muted); text-decoration:none; font-size:13.5px; font-weight:500;
  padding:8px 13px; transition:color .3s var(--ease);
}
.nav-links a::after{
  content:""; position:absolute; left:13px; right:13px; bottom:3px; height:1px;
  background:linear-gradient(90deg, var(--taupe), var(--amber));
  transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease);
}
.nav-links a:hover{ color:var(--ink-strong); }
.nav-links a:hover::after{ transform:scaleX(1); }
.nav-cta{ display:flex; align-items:center; gap:12px; }

/* ============================== BOTÕES ============================== */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-weight:600; font-size:14.5px; text-decoration:none; cursor:pointer;
  border-radius:12px; border:1px solid transparent; padding:12px 22px;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease),
    background-color .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
  overflow:hidden; white-space:nowrap;
}
.btn:active{ transform:translateY(0) scale(.985); }
.btn-primary{
  background:linear-gradient(180deg, var(--taupe-2), var(--taupe));
  color:var(--on-accent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 10px 28px rgba(182,168,157,.14);
}
.btn-primary::after{
  content:""; position:absolute; top:-4px; bottom:-4px; left:-46%; width:38%;
  background:linear-gradient(105deg, transparent, rgba(255,255,255,.42), transparent);
  transform:skewX(-18deg); transition:left .65s var(--ease); pointer-events:none;
}
.btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.32), 0 18px 46px rgba(182,168,157,.24);
}
.btn-primary:hover::after{ left:126%; }
.btn-ghost{
  background:rgba(255,255,255,.025); border-color:var(--line); color:var(--ink);
}
.btn-ghost:hover{
  transform:translateY(-2px); border-color:rgba(203,188,174,.55); color:var(--taupe-2);
  box-shadow:0 14px 34px rgba(0,0,0,.42), 0 0 24px rgba(182,168,157,.08);
}
.btn-sm{ padding:9px 16px; font-size:13px; border-radius:10px; }
.btn-lg{ padding:16px 30px; font-size:15.5px; border-radius:13px; }
.btn-block{ width:100%; }

/* ============================== VIDRO ============================== */
.glass{
  position:relative;
  background:var(--glass);
  border:1px solid var(--line-soft);
  border-radius:var(--radius);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
}
.glass::before{
  content:""; position:absolute; left:0; right:0; top:0; height:1px; border-radius:inherit;
  background:linear-gradient(90deg, transparent 6%, rgba(236,231,226,.16), transparent 94%);
  pointer-events:none;
}
/* brilho que segue o cursor dentro do cartão (JS alimenta --gx/--gy) */
.hover-lift{ transition:transform .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease); }
.hover-lift::after{
  content:""; position:absolute; inset:0; border-radius:inherit; opacity:0; pointer-events:none;
  background:radial-gradient(440px circle at var(--gx,50%) var(--gy,0%), rgba(203,188,174,.11), transparent 58%);
  transition:opacity .5s var(--ease);
}
.hover-lift:hover{
  transform:translateY(-5px);
  border-color:rgba(203,188,174,.3);
  box-shadow:0 26px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(203,188,174,.05), 0 0 46px rgba(182,168,157,.07);
}
.hover-lift:hover::after{ opacity:1; }

/* ============================== SEÇÕES ============================== */
.band{ position:relative; padding-block:clamp(88px,10vw,132px); }
.band::before{
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:min(1180px,92%); height:1px;
  background:linear-gradient(90deg, transparent, var(--line) 16% 84%, transparent);
}
.band.flush::before{ display:none; }
.sec-head{ max-width:780px; }
.kicker{
  display:flex; align-items:center; gap:14px;
  font-size:11.5px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--taupe);
}
.kicker::before{ content:""; width:36px; height:1px; background:linear-gradient(90deg, var(--amber), var(--taupe)); }
.band h2{ font-size:clamp(28px,3.8vw,44px); font-weight:700; margin-top:20px; }
.sub{ margin-top:16px; color:var(--muted); font-size:16.5px; max-width:62ch; }
.sub b{ color:var(--ink); font-weight:600; }

/* ============================== HERO ============================== */
.hero{
  position:relative; min-height:min(94vh,900px); display:flex; align-items:center;
  padding-block:130px 110px; overflow:hidden;
}
.hero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(1000px 540px at 76% -12%, rgba(182,168,157,.08), transparent 62%),
    radial-gradient(700px 420px at 8% 110%, rgba(200,137,47,.045), transparent 60%);
}
#dust{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.hero-grid{
  position:relative; z-index:4; width:100%;
  display:grid; grid-template-columns:1.06fr .94fr; gap:clamp(40px,5vw,72px); align-items:center;
}
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size:11.5px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--taupe-2);
  border:1px solid var(--line-soft); background:rgba(255,255,255,.03);
  padding:9px 16px; border-radius:999px;
}
.eyebrow i{ width:6px; height:6px; border-radius:50%; background:var(--amber); box-shadow:0 0 10px rgba(200,137,47,.8); }
.hero h1{ font-size:clamp(33px,5.2vw,64px); font-weight:700; margin-top:26px; }
/* Linha própria para a palavra que se digita. Inline, ela mudava a quebra do
   título a cada palavra ("sem caos" cabia, "num lugar só" não), o h1 ganhava e
   perdia uma linha e a página inteira subia e descia junto. Em bloco, a parte
   fixa quebra sempre igual e a palavra ocupa exatamente uma linha: a altura do
   herói não depende mais do que está escrito. */
.type-wrap{ display:block; white-space:nowrap; }
.type-word{
  background:linear-gradient(100deg, var(--taupe-2) 30%, var(--amber) 130%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.caret{
  display:inline-block; width:3px; height:.88em; margin-left:5px; vertical-align:-.1em;
  background:var(--amber); box-shadow:0 0 10px rgba(200,137,47,.7); border-radius:1px;
}
.lede{ margin-top:24px; color:var(--muted); font-size:clamp(16px,1.6vw,18.5px); max-width:56ch; }
.lede b{ color:var(--ink); font-weight:600; }
.cta-row{ display:flex; gap:14px; flex-wrap:wrap; margin-top:38px; }
.hero-proof{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  margin-top:26px; font-size:12.5px; color:var(--muted);
}
.hero-proof i{ width:3px; height:3px; border-radius:50%; background:var(--muted); opacity:.6; }

/* pilha de cartões flutuantes — fila por equipe */
.hero-visual{ position:relative; height:500px; }
.hero-visual::before{
  content:""; position:absolute; inset:6% -6%; pointer-events:none;
  background:radial-gradient(58% 52% at 55% 46%, rgba(182,168,157,.09), transparent 70%);
  filter:blur(20px);
}
.q-card{ position:absolute; width:min(310px,82%); padding:16px 18px; border-radius:16px; }
.q-card.qa{ left:0; top:1%; rotate:-1.4deg; }
.q-card.qb{ right:0; top:24%; rotate:1.1deg; z-index:2; }
.q-card.qc{ left:4%; top:48%; rotate:-.7deg; }
.q-card.qd{ right:3%; top:74%; rotate:1.4deg; z-index:2; }
.q-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.q-chip{
  font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--taupe-2); border:1px solid var(--line-soft); border-radius:999px; padding:4px 10px;
  background:rgba(182,168,157,.07);
}
.q-st{ font-size:11px; font-weight:600; display:inline-flex; align-items:center; gap:6px; }
.q-st::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; box-shadow:0 0 8px currentColor; }
.q-st.s1{ color:var(--taupe-2); } .q-st.s2{ color:var(--amber); } .q-st.s3{ color:var(--ok); }
.q-title{ margin-top:12px; font-weight:600; font-size:14.5px; color:var(--ink-strong); letter-spacing:-.01em; }
.q-meta{ display:flex; align-items:center; gap:8px; margin-top:12px; }
.q-av{
  width:22px; height:22px; border-radius:50%; display:grid; place-items:center;
  font-size:9.5px; font-weight:700; color:var(--taupe-2);
  background:var(--surface-2); border:1px solid var(--line);
}
.q-av + .q-av{ margin-left:-9px; }
.q-when{ margin-left:6px; font-size:11.5px; color:var(--muted); }
.q-card.qd{ display:flex; align-items:center; gap:14px; width:min(290px,78%); }
.q-ok-ic{
  flex:none; width:38px; height:38px; border-radius:50%; display:grid; place-items:center;
  color:var(--ok); background:rgba(63,157,122,.13); border:1px solid rgba(63,157,122,.35);
  box-shadow:0 0 22px rgba(63,157,122,.15);
}
.q-card.qd .q-title{ margin-top:0; font-size:14px; }
.q-sub{ margin-top:3px; font-size:11.5px; color:var(--muted); }

.scroll-cue{
  position:absolute; left:50%; bottom:22px; transform:translateX(-50%); z-index:4;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  color:var(--muted); font-size:10px; letter-spacing:.26em; text-transform:uppercase;
}
.cue-line{ width:1px; height:42px; background:rgba(182,168,157,.22); position:relative; overflow:hidden; }
.cue-line::after{
  content:""; position:absolute; left:0; top:-46%; width:100%; height:46%;
  background:linear-gradient(180deg, transparent, var(--taupe-2));
}

/* ============================== COMO FUNCIONA ============================== */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:clamp(40px,5vw,60px); }
.step{ padding:30px 28px 34px; }
.step-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.step-n{
  font-family:var(--display); font-weight:800; font-size:54px; line-height:1;
  color:transparent; -webkit-text-stroke:1px rgba(203,188,174,.4);
  transition:color .5s var(--ease), -webkit-text-stroke-color .5s var(--ease);
}
.step:hover .step-n{ color:rgba(203,188,174,.16); -webkit-text-stroke-color:rgba(203,188,174,.75); }
.step-k{
  font-size:10px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--amber);
  border:1px solid rgba(200,137,47,.3); background:rgba(200,137,47,.07);
  border-radius:999px; padding:4px 10px; margin-top:6px;
}
.step h3{ font-size:19.5px; margin-top:20px; }
.step p{ margin-top:10px; color:var(--muted); font-size:14.5px; }
.step-link{ display:inline-block; margin-top:16px; font-size:12.5px; font-weight:600; color:var(--taupe-2); text-decoration:none; }
.step-link span{ display:inline-block; transition:transform .35s var(--ease); }
.step-link:hover span{ transform:translateX(4px); }

/* ============================== DIFERENCIAIS ============================== */
.feats{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:clamp(40px,5vw,60px); }
.feat{ padding:28px 26px 30px; }
.feat-ic{
  width:44px; height:44px; border-radius:13px; display:grid; place-items:center;
  color:var(--taupe-2); background:rgba(182,168,157,.08); border:1px solid var(--line-soft);
  transition:transform .45s var(--spring), color .35s var(--ease), box-shadow .45s var(--ease);
}
.feat:hover .feat-ic{ transform:translateY(-3px) scale(1.06); color:var(--amber); box-shadow:0 10px 26px rgba(0,0,0,.4), 0 0 18px rgba(200,137,47,.12); }
.feat h3{ font-size:17.5px; margin-top:18px; }
.feat p{ margin-top:8px; color:var(--muted); font-size:14px; }

/* ============================== WHITE-LABEL ============================== */
.wl-layout{ display:grid; grid-template-columns:300px 1fr; gap:clamp(28px,4vw,52px); margin-top:clamp(40px,5vw,60px); align-items:start; }
.wl-brands{ display:flex; flex-direction:column; gap:10px; }
.wl-brand{
  display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  background:rgba(255,255,255,.02); border:1px solid var(--line); border-radius:13px;
  color:var(--muted); font-size:14px; font-weight:600; padding:13px 16px; cursor:pointer;
  transition:transform .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease),
    background-color .35s var(--ease), box-shadow .35s var(--ease);
}
.wl-brand i{ flex:none; width:14px; height:14px; border-radius:50%; box-shadow:0 0 0 3px rgba(255,255,255,.05); transition:box-shadow .35s var(--ease); }
.wl-brand:hover{ transform:translateX(4px); color:var(--ink); border-color:rgba(203,188,174,.35); }
.wl-brand.on{
  color:var(--ink-strong); background:rgba(182,168,157,.08); border-color:rgba(203,188,174,.5);
  box-shadow:0 12px 30px rgba(0,0,0,.35), 0 0 24px rgba(182,168,157,.06);
}
.wl-brand.on i{ box-shadow:0 0 0 3px rgba(255,255,255,.12), 0 0 14px currentColor; }
.wl-brand .wl-arrow{ margin-left:auto; opacity:0; transform:translateX(-6px); transition:opacity .3s, transform .3s var(--ease); color:var(--taupe-2); }
.wl-brand.on .wl-arrow{ opacity:1; transform:none; }
.wl-note{ margin-top:18px; font-size:12.5px; color:var(--muted); max-width:26ch; line-height:1.6; }

.wl-stage{
  --brand:#b6a89d; --on-brand:#1b1613;
  display:grid; grid-template-columns:1fr 236px; gap:22px; padding:24px; border-radius:22px;
}
.wl-pane{ position:relative; }
/* Carrossel do white-label: a cada troca de marca as duas telas entram deslizando no sentido do
   movimento. É animação de ENTRADA (o conteúdo já está trocado quando ela começa), então nunca
   se vê um estado intermediário meia-marca. As duas telas saem levemente defasadas para o
   conjunto ler como um carrossel e não como um bloco só. */
@keyframes wlSlideFwd{ from{ opacity:0; transform:translateX(26px) scale(.985); } to{ opacity:1; transform:none; } }
@keyframes wlSlideBack{ from{ opacity:0; transform:translateX(-26px) scale(.985); } to{ opacity:1; transform:none; } }
.wl-stage.is-swap-fwd .wl-pane{ animation:wlSlideFwd .5s var(--ease-out) both; }
.wl-stage.is-swap-back .wl-pane{ animation:wlSlideBack .5s var(--ease-out) both; }
.wl-stage.is-swap-fwd .wl-pane:nth-child(2),
.wl-stage.is-swap-back .wl-pane:nth-child(2){ animation-delay:.07s; }
@media (prefers-reduced-motion: reduce){
  .wl-stage.is-swap-fwd .wl-pane, .wl-stage.is-swap-back .wl-pane{ animation:none; }
}
.wl-tag{
  position:absolute; left:12px; bottom:-11px; z-index:3;
  font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); background:var(--bg-deep); border:1px solid var(--line);
  border-radius:999px; padding:4px 11px;
}
.wl-screen{
  background:#191613; border:1px solid rgba(236,231,226,.09); border-radius:14px; overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,.5);
}
/* No app a barra do topo É a cor da marca: deriveVars faz --eazy-topbar-bg = a primária. Pintá-la
   aqui é o que torna a troca de marca visível de imediato. */
.wl-chrome{ display:flex; align-items:center; gap:10px; padding:11px 14px; border-bottom:1px solid var(--line);
  background:var(--brand); transition:background-color .6s var(--ease); }
.wl-chrome .wl-name{ color:var(--on-brand); }
.wl-dot{ width:20px; height:20px; border-radius:6px; background:var(--on-brand); transition:background-color .6s var(--ease); }
.wl-name{ font-size:13px; font-weight:700; color:var(--ink-strong); letter-spacing:-.01em; }
.wl-tabs{ display:flex; gap:6px; margin-left:10px; }
.wl-tabs i{ width:32px; height:8px; border-radius:5px; background:rgba(236,231,226,.1); }
.wl-tabs i:first-child{ background:var(--on-brand); opacity:.9; }
.wl-abtn{
  margin-left:auto; font-size:11px; font-weight:700; padding:6px 13px; border-radius:8px;
  background:color-mix(in srgb, var(--on-brand) 16%, transparent); color:var(--on-brand);
  border:1px solid color-mix(in srgb, var(--on-brand) 55%, transparent); transition:all .6s var(--ease);
}
.wl-board{ display:grid; grid-template-columns:repeat(3,1fr); gap:9px; padding:14px; }
.wl-col{ background:rgba(255,255,255,.025); border:1px solid var(--line); border-radius:10px; padding:9px; display:flex; flex-direction:column; gap:8px; }
.wl-colh{ font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); display:flex; align-items:center; gap:6px; }
.wl-colh::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--brand); transition:background-color .6s var(--ease); }
/* Card do board como BoardCard.tsx monta: cliente, título e o responsável com iniciais. */
.wl-card{ background:rgba(0,0,0,.28); border:1px solid var(--line); border-radius:8px; padding:8px;
  display:flex; flex-direction:column; gap:4px; }
.wl-cli{ font-size:8px; color:var(--muted); }
.wl-ti{ font-size:10px; font-weight:600; color:var(--ink); line-height:1.25; }
.wl-foot{ display:flex; align-items:center; gap:4px; font-size:8px; color:var(--muted); }
.wl-av{ width:14px; height:14px; border-radius:50%; background:var(--brand); color:var(--on-brand);
  font-size:6.5px; font-style:normal; display:grid; place-items:center; font-weight:700;
  transition:background-color .6s var(--ease); }
.wl-colh i{ margin-left:auto; font-style:normal; color:var(--muted); font-size:9px; }
.wl-card .l1{ height:6px; width:82%; border-radius:4px; background:rgba(236,231,226,.16); }
.wl-card .l2{ height:5px; width:54%; border-radius:4px; background:rgba(236,231,226,.08); margin-top:6px; }
.wl-chip{
  display:inline-block; margin-top:8px; font-size:8.5px; font-weight:700; letter-spacing:.04em;
  color:var(--on-brand); background:var(--brand); padding:2.5px 8px; border-radius:999px;
  transition:background-color .6s var(--ease);
}
.wl-phone{
  background:#131110; border:1px solid rgba(236,231,226,.12); border-radius:20px; padding:12px 11px;
  display:flex; flex-direction:column; gap:9px; box-shadow:0 24px 60px rgba(0,0,0,.5);
}
.wl-ph-top{ display:flex; align-items:center; gap:8px; padding-bottom:9px; border-bottom:1px solid var(--line); }
.wl-ph-logo{ width:17px; height:17px; border-radius:5px; background:var(--brand); transition:background-color .6s var(--ease); }
.wl-ph-name{ font-size:11px; font-weight:700; color:var(--ink); }
.wl-ph-greet{ margin-left:auto; font-size:8.5px; color:var(--muted); }
.wl-ph-tabs{ display:flex; gap:4px; padding:9px 0 0; }
.wl-ph-tabs i{ font-style:normal; font-size:8.5px; padding:2px 8px; border-radius:999px;
  border:1px solid var(--line); color:var(--muted); }
.wl-ph-tabs i.on{ background:var(--brand); border-color:var(--brand); color:var(--on-brand);
  transition:background-color .6s var(--ease); }
.wl-ph-card{ margin-top:9px; border:1px solid var(--line); border-radius:9px; overflow:hidden; }
.wl-ph-pp{ background:#fff; }
.wl-ph-pph{ display:flex; align-items:center; gap:4px; padding:4px 6px; font-size:8px; font-weight:600; color:#262626; }
.wl-ph-pph i{ width:11px; height:11px; border-radius:50%; background:linear-gradient(135deg,#536DFE,#FF4081,#FFC260); }
.wl-ph-cap{ display:block; padding:0 6px 5px; font-size:7.5px; color:#262626; }
.wl-ph-meta{ display:block; padding:7px 8px 0; font-size:8.5px; color:var(--ink); }
.wl-ph-meta b{ font-weight:600; }
/* A imagem do post dentro da prévia: sem moldura própria, encostada nas bordas do mock. */
.wl-ph-media{ display:block; height:78px; background:linear-gradient(145deg,#c9a06a,#a4643f 56%,#5f3a4c); }
.wl-ph-actions{ display:flex; gap:6px; padding:7px 8px 8px; }
.wl-ph-actions .a{ flex:1; text-align:center; font-size:9px; font-weight:700; padding:6px 4px; border-radius:7px; white-space:nowrap; }
.wl-ph-actions .a.ok{ background:var(--brand); color:var(--on-brand); transition:background-color .6s var(--ease); }
.wl-ph-actions .a.no{ border:1px solid var(--line); color:var(--muted); }
.wl-cap{ margin-top:26px; font-size:13.5px; color:var(--muted); }
.wl-cap b{ color:var(--ink-strong); }

/* ============================== DEMO (gravação) ============================== */
/* ASSINATURA (e): janela escura com glow ambiente pulsando devagar */
.demo-shell{ position:relative; max-width:980px; margin:clamp(44px,5vw,64px) auto 0; }
.demo-shell::before{
  content:""; position:absolute; inset:-44px -34px; z-index:0; pointer-events:none;
  background:radial-gradient(58% 66% at 50% 44%, rgba(182,168,157,.15), rgba(200,137,47,.05) 46%, transparent 72%);
  filter:blur(28px);
}
.demo-window{
  position:relative; z-index:1; background:#171412; border:1px solid rgba(236,231,226,.1);
  border-radius:20px; overflow:hidden;
  box-shadow:0 50px 120px rgba(0,0,0,.62), 0 0 0 1px rgba(0,0,0,.35);
}
.demo-titlebar{ display:flex; align-items:center; gap:8px; padding:13px 16px; background:rgba(255,255,255,.025); border-bottom:1px solid var(--line); }
.tb-dot{ width:10px; height:10px; border-radius:50%; background:rgba(236,231,226,.14); }
.tb-url{
  margin-inline:auto; display:inline-flex; align-items:center; gap:7px;
  font-size:12px; color:var(--muted); background:rgba(0,0,0,.35);
  border:1px solid var(--line); padding:5px 16px; border-radius:8px;
}
.tb-url svg{ opacity:.7; }
.tb-rec{ display:inline-flex; align-items:center; gap:7px; font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.tb-rec i{ width:8px; height:8px; border-radius:50%; background:#d05a50; box-shadow:0 0 10px rgba(208,90,80,.7); }

.demo-stage{ position:relative; height:568px; background:radial-gradient(120% 100% at 50% 0%, #1c1815, #100e0b 74%); }
.demo-caption{
  position:absolute; left:50%; top:18px; transform:translateX(-50%); z-index:9; max-width:92%;
  display:inline-flex; align-items:center; gap:10px; white-space:nowrap;
  background:rgba(10,9,7,.72); border:1px solid rgba(236,231,226,.13); border-radius:999px;
  color:var(--ink); font-size:12.5px; padding:8px 16px;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  transition:opacity .35s var(--ease), transform .35s var(--ease);
}
.demo-caption b{ color:var(--amber); font-weight:700; letter-spacing:.08em; font-size:10.5px; text-transform:uppercase; }
.demo-caption.swap{ opacity:0; transform:translateX(-50%) translateY(-8px); }

.scene{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:52px 34px 34px;
  transition:opacity .6s var(--ease), transform .6s var(--ease);
}
.demo-stage:not(.is-static) .scene-phone{ opacity:0; transform:scale(.965); pointer-events:none; }
.demo-stage:not(.is-static).ph .scene-desk{ opacity:0; transform:scale(1.03); }
.demo-stage:not(.is-static).ph .scene-phone{ opacity:1; transform:none; }

/* The agency viewer is a full-screen overlay, so ITS scene has no padding and stretches; the
   phone scene keeps the centring above. */
.scene-desk{ align-items:stretch; padding:0; }

/* visor da equipe (computador) */
/* AnnotateViewer is `position:fixed; inset:0` -- a full-screen overlay, not a floating card. In
   the demo's fake browser it fills the window the same way, so the disposition matches what a
   person actually sees. Values below are the app's own DARK-theme tokens (tokens.css), because
   the demo depicts the app in dark mode: a real supported appearance, and the only one coherent
   with this page. */
.dviewer{
  width:100%; height:100%; background:#1b1a19; border:0; border-radius:0; overflow:hidden;
  display:flex; flex-direction:column; box-shadow:none;
}
.dv-top{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:#0e0d0c; color:#f0eeec;
  padding:10px 14px; font-size:12.5px; font-weight:600; border-bottom:1px solid #343331;
}
.dv-top .x{ color:var(--muted); font-weight:400; }
.dv-body{ display:flex; flex:1; min-height:0; }
/* Black stage with the media CENTRED at its natural aspect, exactly as .eazy-anno-media does with
   max-width/max-height:100% -- a 4:5 post therefore letterboxes on a wide stage instead of being
   stretched to the edges. */
.dv-stage{ flex:1.6; position:relative; background:#000; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.dv-art{
  position:relative; inset:auto; aspect-ratio:4/5; height:100%; max-width:100%;
  border-radius:0; overflow:hidden;
  background:linear-gradient(145deg, #c9a06a, #a4643f 56%, #5f3a4c);
  box-shadow:0 14px 40px rgba(0,0,0,.5);
}
.dv-art::before{ content:""; position:absolute; width:86px; height:86px; border-radius:50%; right:20px; top:20px; background:rgba(255,244,230,.22); }
.dv-art .t1{ position:absolute; left:20px; bottom:54px; width:56%; height:12px; border-radius:6px; background:rgba(255,248,240,.88); }
.dv-art .t2{ position:absolute; left:20px; bottom:35px; width:40%; height:9px; border-radius:5px; background:rgba(255,248,240,.5); }
.dv-art .b0{ position:absolute; left:20px; bottom:13px; width:80px; height:16px; border-radius:999px; background:#241d16; }
.dv-fmt{
  position:absolute; right:24px; bottom:22px; z-index:3; font-size:9.5px; font-weight:700; letter-spacing:.08em;
  color:rgba(255,255,255,.85); background:rgba(0,0,0,.45); border:1px solid rgba(255,255,255,.2);
  padding:3px 9px; border-radius:999px;
}

.pin{
  position:absolute; z-index:4; width:26px; height:26px; border-radius:50%;
  transform:translate(-50%,-50%); display:grid; place-items:center;
  background:var(--amber); color:#1c1206; font-size:12px; font-weight:800;
  border:2px solid rgba(255,255,255,.9); box-shadow:0 8px 22px rgba(0,0,0,.55);
  transition:transform .5s var(--spring), opacity .35s var(--ease),
    background-color .4s var(--ease), color .4s var(--ease);
}
.pin:not(.on){ opacity:0; transform:translate(-50%,-50%) scale(.2); }
.pin.ok{ background:var(--ok); color:#07130d; }
.pin.on::after{
  content:""; position:absolute; inset:-5px; border-radius:inherit;
  border:2px solid rgba(200,137,47,.55); opacity:0;
}
.pin-1{ left:71%; top:25%; }
.pin-2{ left:36%; top:66%; }

.demo-cur{
  position:absolute; left:16%; top:84%; z-index:7; width:19px; height:19px; pointer-events:none;
  filter:drop-shadow(0 3px 7px rgba(0,0,0,.7));
  transition:transform .18s var(--ease);
}
.demo-cur.press{ transform:scale(.8); }
.demo-cur .ping{
  position:absolute; left:-6px; top:-6px; width:30px; height:30px; border-radius:50%;
  border:2px solid rgba(236,231,226,.85); opacity:0; transform:scale(.3); pointer-events:none;
}
.demo-cur.click .ping{ animation:curping .55s var(--ease-out) forwards; }
@keyframes curping{ 0%{ opacity:.9; transform:scale(.3);} 100%{ opacity:0; transform:scale(1.5);} }

.dv-panel{ flex:1; max-width:340px; min-height:0; display:flex; flex-direction:column; border-left:1px solid #343331; background:#1b1a19; }
.dv-ph{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:10px 13px; border-bottom:1px solid var(--line); font-size:12px; font-weight:600; color:var(--ink);
}
/* The real panel head reads "Marcações (2)" -- the count lives inside the label, not as a pill
   beside it (frontend/src/features/media-annotation/AnnotateViewer.tsx). Still its own element so
   the demo script can rewrite just the number as pins land. */
.dv-count{ font-style:normal; font-variant-numeric:tabular-nums; }
/* The "resolvidas" filter the real viewer carries next to the count. */
.dv-filter{ display:flex; align-items:center; gap:5px; font-size:10.5px; font-weight:500; color:var(--muted); }
.dv-filter input{ width:11px; height:11px; accent-color:var(--taupe); margin:0; }
.dv-list{ list-style:none; margin:0; padding:11px 13px; display:flex; flex-direction:column; gap:9px; flex:1; overflow:hidden; }
.dv-item{
  border:1px solid var(--line); border-radius:10px; padding:9px 11px; background:rgba(255,255,255,.028);
  transition:opacity .45s var(--ease), transform .55s var(--ease), border-color .4s;
}
.dv-item:not(.show){ opacity:0; transform:translateY(12px); }
.dv-item.done{ opacity:.55; }
.dv-ihead{ display:flex; align-items:center; gap:7px; font-size:10.5px; color:var(--muted); }
.dv-ihead b{
  flex:none; width:17px; height:17px; border-radius:50%; display:grid; place-items:center;
  background:var(--amber); color:#1c1206; font-size:9.5px;
  transition:background-color .4s var(--ease), color .4s var(--ease);
}
.dv-item.done .dv-ihead b{ background:var(--ok); color:#07130d; }
.dv-name{ font-weight:600; color:var(--ink); }
.dv-done-tag{ margin-left:auto; color:var(--ok); font-size:10px; font-weight:700; white-space:nowrap; opacity:0; transition:opacity .4s var(--ease); }
.dv-item.done .dv-done-tag{ opacity:1; }
.dv-msg{ margin-top:6px; font-size:12px; line-height:1.45; color:var(--ink); min-height:17px; }
.dv-acts{ display:flex; gap:12px; margin-top:8px; font-size:11px; font-weight:600; color:var(--taupe-2); }
.dv-acts .rsv{ padding:1px 5px; margin-left:-5px; border-radius:5px; transition:background-color .25s; }
.dv-acts .rsv.hit{ background:rgba(203,188,174,.28); }

/* celular do cliente */
.dphone{
  position:relative; width:252px; background:#0d0b09; border:1px solid rgba(236,231,226,.15);
  border-radius:34px; padding:13px 11px; box-shadow:0 40px 90px rgba(0,0,0,.62);
}
.dphone::before{
  content:""; position:absolute; left:50%; top:6px; transform:translateX(-50%);
  width:76px; height:5px; border-radius:3px; background:rgba(236,231,226,.2); z-index:2;
}
.dp-app{ background:#1a1713; border:1px solid var(--line); border-radius:23px; overflow:hidden; }
.dp-head{ display:flex; align-items:center; gap:7px; padding:11px 12px 9px; border-bottom:1px solid var(--line); }
.dp-logo{ width:16px; height:16px; border-radius:5px; background:var(--taupe); flex:none; }
.dp-name{ font-size:10px; font-weight:700; color:var(--ink); white-space:nowrap; }
/* The real header ends in a greeting with the pending count, not a status chip
   (frontend/src/features/client-approval/ClientBrandHeader.tsx). */
.dp-greet{ margin-left:auto; font-size:8.5px; color:var(--muted); text-align:right; white-space:nowrap; }

/* The two pill tabs the client screen carries above the list (ClientApprovalPage.tsx); the active
   one is filled with the brand primary. */
.dp-tabs{ display:flex; gap:5px; padding:9px 13px 0; }
.dp-tab{ font-size:9.5px; padding:3px 10px; border-radius:999px; border:1px solid var(--line); color:var(--muted); }
.dp-tab.is-active{ background:var(--taupe); border-color:var(--taupe); color:var(--on-accent); font-weight:600; }

/* One card per pending post: the preview, then title/type/date, then the briefing, then the two
   actions -- the order PendingPieceCard.tsx renders them in. */
.dp-card{ margin:9px 13px 0; border:1px solid var(--line); border-radius:13px; overflow:hidden; background:rgba(255,255,255,.02); }
/* The post sits inside the phone-mock preview the client actually sees, not as a bare artwork. */
.dp-pp{ background:#fff; color:#262626; }
.dp-pp-head{ display:flex; align-items:center; gap:6px; padding:6px 8px; }
.dp-pp-av{ width:16px; height:16px; border-radius:50%; background:linear-gradient(135deg,#536DFE,#FF4081,#FFC260); flex:none; }
.dp-pp-handle{ font-size:9px; font-weight:600; color:#262626; }
.dp-pp-icons{ display:flex; gap:9px; padding:5px 8px 2px; font-size:11px; color:#262626; }
.dp-pp-cap{ margin:0; padding:0 8px 7px; font-size:8.5px; line-height:1.35; color:#262626; }
.dp-pp-cap b{ font-weight:600; }
.dp-brief{ margin:0; padding:4px 11px 0; font-size:9.5px; line-height:1.35; color:var(--muted); }
.dp-art{
  position:relative; margin:0; height:150px; border-radius:0; overflow:hidden;
  background:linear-gradient(145deg, #c9a06a, #a4643f 56%, #5f3a4c);
}
.dp-art::before{ content:""; position:absolute; width:54px; height:54px; border-radius:50%; right:12px; top:12px; background:rgba(255,244,230,.22); }
.dp-art .t1{ position:absolute; left:12px; bottom:30px; width:58%; height:9px; border-radius:5px; background:rgba(255,248,240,.88); }
.dp-art .t2{ position:absolute; left:12px; bottom:16px; width:40%; height:7px; border-radius:4px; background:rgba(255,248,240,.5); }
.dp-pin{
  position:absolute; width:17px; height:17px; border-radius:50%; transform:translate(-50%,-50%);
  display:grid; place-items:center; font-size:8.5px; font-weight:800;
  background:var(--ok); color:#07130d; border:1.5px solid rgba(255,255,255,.9);
}
.dp-cap{ margin:0; padding:9px 11px 0; font-size:10px; color:var(--ink); }
.dp-cap b{ font-weight:600; }
.dp-actions{ display:flex; gap:7px; padding:10px 11px 11px; }
.dp-btn{ flex:1; text-align:center; font-size:10.5px; font-weight:700; padding:9px 6px; border-radius:9px; white-space:nowrap; }
.dp-adjust{ border:1px solid var(--line); color:var(--muted); }
.dp-approve{
  position:relative; background:var(--taupe); color:var(--on-accent);
  transition:background-color .35s var(--ease), color .35s var(--ease), box-shadow .35s var(--ease);
}
.dp-approve.yes{ background:var(--ok); color:#07130d; box-shadow:0 0 26px rgba(63,157,122,.35); }
.dp-stamp{
  position:absolute; left:50%; top:44%; z-index:5;
  font-family:var(--display); font-weight:800; font-size:17px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ok); border:2.5px solid var(--ok); border-radius:10px; padding:9px 18px 9px 22px;
  background:rgba(6,17,12,.66); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  box-shadow:0 0 34px rgba(63,157,122,.25), inset 0 0 22px rgba(63,157,122,.1);
  transform:translate(-50%,-50%) rotate(-7deg);
  transition:opacity .4s var(--ease), transform .55s var(--spring);
}
.dp-stamp:not(.show){ opacity:0; transform:translate(-50%,-50%) rotate(-7deg) scale(1.7); }
.dp-status{ padding:0 15px 15px; font-size:10px; line-height:1.5; color:var(--muted); transition:opacity .45s var(--ease); }
.dp-status:not(.show){ opacity:0; }
.demo-thumb{
  position:absolute; z-index:8; left:66%; top:104%; width:36px; height:36px; border-radius:50%;
  background:rgba(236,231,226,.24); border:2px solid rgba(236,231,226,.85);
  transform:translate(-50%,-50%); opacity:0; pointer-events:none;
  transition:left .85s var(--ease), top .85s var(--ease), opacity .4s var(--ease);
}
.demo-thumb.show{ opacity:1; }
.demo-thumb.tap{ animation:thumbtap .4s var(--ease); }
@keyframes thumbtap{ 50%{ transform:translate(-50%,-50%) scale(.76); } }

/* controles da gravação */
.demo-controls{
  display:flex; align-items:center; gap:16px; padding:13px 16px;
  border-top:1px solid var(--line); background:rgba(255,255,255,.02);
}
.demo-track{ position:relative; flex:1; height:4px; border-radius:2px; background:rgba(236,231,226,.1); }
.demo-track .tick{ position:absolute; top:-3px; width:1px; height:10px; background:rgba(236,231,226,.22); }
#demo-progress{
  position:absolute; left:0; top:0; bottom:0; width:100%; border-radius:2px;
  background:linear-gradient(90deg, var(--taupe), var(--amber));
  box-shadow:0 0 12px rgba(200,137,47,.35);
}
.demo-hintchip{ font-size:11px; color:var(--muted); white-space:nowrap; }
.demo-replay{
  display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600;
  color:var(--taupe-2); background:none; border:1px solid var(--line); border-radius:999px;
  padding:7px 15px; cursor:pointer;
  transition:border-color .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease);
}
.demo-replay svg{ transition:transform .55s var(--ease); }
.demo-replay:hover{ border-color:rgba(203,188,174,.55); color:var(--ink-strong); transform:translateY(-1px); box-shadow:0 10px 26px rgba(0,0,0,.4); }
.demo-replay:hover svg{ transform:rotate(-300deg); }

/* estado estático: sem JS ou com movimento reduzido — tudo visível */
.demo-stage.is-static{ height:auto; display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:center; gap:34px; padding:64px 26px 34px; }
.demo-stage.is-static .scene{ position:static; inset:auto; opacity:1; transform:none; padding:0; flex:1 1 330px; max-width:620px; display:flex; justify-content:center; }
.demo-stage.is-static .scene-phone{ flex:0 1 auto; }
.demo-stage.is-static .demo-cur,
.demo-stage.is-static .demo-thumb{ display:none; }

/* ============================== MANIFESTO ============================== */
.manifesto-lines{
  font-family:var(--display); font-weight:700; letter-spacing:-.02em;
  font-size:clamp(25px,4.2vw,50px); line-height:1.22; max-width:1020px;
  color:var(--ink-strong); margin-top:clamp(36px,4vw,54px);
}
.mline{ transition:opacity .8s var(--ease), filter .8s var(--ease); }
.mline.gold{
  background:linear-gradient(100deg, var(--taupe-2) 30%, var(--amber) 120%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.manifesto.mline-anim .mline{ opacity:.14; filter:blur(1px); }
.manifesto.mline-anim .mline.lit{ opacity:1; filter:none; }
.manifesto-close{ margin-top:26px; color:var(--muted); font-size:16.5px; max-width:62ch; }
.manifesto-close b{ color:var(--ink); }
.founder-note{
  margin-top:clamp(40px,5vw,56px); max-width:760px; padding:28px 30px;
  font-size:15.5px; line-height:1.7; color:var(--ink); border-radius:var(--radius);
}
.founder-note::after{
  content:""; position:absolute; left:0; top:18px; bottom:18px; width:2px; border-radius:2px;
  background:linear-gradient(180deg, var(--amber), var(--taupe));
}
.founder-note .sig{ display:block; margin-top:12px; font-size:13px; color:var(--muted); }

/* ============================== PLANOS ============================== */
.plans{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; align-items:stretch; margin-top:clamp(48px,6vw,68px); }
.plan{ display:flex; flex-direction:column; padding:32px 30px; border-radius:20px; }
.plan-name{ font-family:var(--display); font-size:22px; font-weight:700; color:var(--ink-strong); }
.plan-band{ margin-top:5px; color:var(--muted); font-size:13.5px; }
.plan-price{ display:flex; align-items:baseline; gap:7px; margin-top:22px; }
.plan-price .from{ font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.plan-price .cur{ font-size:16px; font-weight:600; color:var(--taupe-2); }
.plan-price .val{ font-family:var(--display); font-size:42px; font-weight:700; line-height:1; color:var(--ink-strong); }
.plan-price .per{ font-size:13px; color:var(--muted); }
/* Sem número não há moeda nem "/mês" a exibir: o slot do valor diz o que de fato se sabe. Menor
   que .val porque é palavra, não algarismo, e no tamanho do preço gritaria. */
.plan-price .val-tbd{ font-size:22px; font-weight:600; color:var(--taupe-2); }
.plan-feats{ list-style:none; margin:24px 0 28px; padding:0; display:flex; flex-direction:column; gap:12px; }
.plan-feats li{ display:flex; gap:11px; align-items:flex-start; font-size:14.5px; color:var(--ink); }
.plan-feats .ck{ flex:none; margin-top:3px; color:var(--taupe-2); }
.plan .btn{ margin-top:auto; }

/* ASSINATURA (c): borda conic-gradient girando no plano Estúdio */
.plan.featured{
  background:linear-gradient(170deg, #221e1a, #1b1815 60%);
  border-color:rgba(203,188,174,.38);
  box-shadow:0 34px 90px rgba(0,0,0,.55), 0 0 70px rgba(182,168,157,.07);
  scale:1.035;
}
.plan-spin{
  position:absolute; inset:-1.5px; border-radius:21.5px; padding:1.5px; pointer-events:none; overflow:hidden;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite:exclude;
}
.plan-spin i{
  position:absolute; left:50%; top:50%; width:860px; height:860px; margin:-430px 0 0 -430px;
  background:conic-gradient(from 0deg,
    transparent 0deg, transparent 44deg,
    rgba(203,188,174,.95) 76deg, rgba(200,137,47,.95) 88deg, transparent 122deg,
    transparent 224deg, rgba(182,168,157,.5) 258deg, transparent 292deg, transparent 360deg);
}
.plan-flag{
  position:absolute; top:-13px; left:50%; transform:translateX(-50%); z-index:2;
  font-size:10.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; white-space:nowrap;
  color:#231708; background:linear-gradient(90deg, var(--taupe-2), var(--amber));
  border-radius:999px; padding:6px 15px;
  box-shadow:0 8px 24px rgba(200,137,47,.28);
}
.plans-micro{ margin-top:30px; text-align:center; color:var(--muted); font-size:13px; }

/* ============================== FAQ ============================== */
.faq{ max-width:820px; margin-top:clamp(36px,4vw,52px); display:flex; flex-direction:column; gap:12px; }
.faq-item{ border-radius:15px; transition:border-color .4s var(--ease), box-shadow .4s var(--ease); }
.faq-item.open{ border-color:rgba(203,188,174,.32); box-shadow:0 18px 44px rgba(0,0,0,.4), 0 0 30px rgba(182,168,157,.05); }
.faq-q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:18px; text-align:left;
  background:none; border:0; cursor:pointer; padding:19px 22px;
  color:var(--ink-strong); font-size:15.5px; font-weight:600; line-height:1.4;
  transition:color .3s var(--ease);
}
.faq-q:hover{ color:var(--taupe-2); }
.faq-ic{
  flex:none; width:27px; height:27px; border-radius:50%; display:grid; place-items:center;
  border:1px solid var(--line); color:var(--taupe-2);
  transition:transform .5s var(--ease), background-color .35s var(--ease), border-color .35s var(--ease);
}
.faq-item.open .faq-ic{ transform:rotate(45deg); background:rgba(182,168,157,.14); border-color:rgba(203,188,174,.4); }
.faq-a{ display:grid; grid-template-rows:1fr; transition:grid-template-rows .55s var(--ease); }
.faq-item.closed .faq-a{ grid-template-rows:0fr; }
.faq-a-in{ overflow:hidden; min-height:0; }
.faq-a p{ padding:0 60px 21px 22px; color:var(--muted); font-size:14.5px; line-height:1.7; }

/* ============================== CTA FINAL ============================== */
.cta-final{ position:relative; text-align:center; padding-block:clamp(110px,14vw,180px); overflow:hidden; }
.cta-final::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(46% 58% at 50% 0%, rgba(203,188,174,.13), transparent 72%),
    radial-gradient(30% 36% at 50% 4%, rgba(200,137,47,.07), transparent 70%);
}
.cta-final::after{
  content:""; position:absolute; left:50%; top:0; width:1px; height:120px; transform:translateX(-50%);
  background:linear-gradient(180deg, var(--amber), transparent); opacity:.7;
}
.cta-inner{ position:relative; }
.cta-final h2{ font-size:clamp(30px,4.6vw,54px); font-weight:700; max-width:20ch; margin-inline:auto; }
.cta-final .cta-sub{ margin:20px auto 0; color:var(--muted); font-size:17px; max-width:46ch; }
.cta-final .btn-lg{ margin-top:40px; padding:18px 40px; font-size:16px; }
.cta-final .cta-micro{ margin-top:20px; font-size:12.5px; color:var(--muted); }

/* ============================== FOOTER ============================== */
.footer{ border-top:1px solid var(--line); padding:46px 0 84px; position:relative; }
.footer-inner{ display:flex; flex-wrap:wrap; align-items:center; gap:22px; }
.footer-links{ display:flex; flex-wrap:wrap; gap:4px 22px; margin-left:auto; }
.footer-links a{ color:var(--muted); text-decoration:none; font-size:13.5px; transition:color .3s var(--ease); }
.footer-links a:hover{ color:var(--taupe-2); }
.foot-legal{ width:100%; margin-top:8px; color:var(--muted); font-size:12.5px; opacity:.85; }

/* ============================== REVEAL AO ROLAR ============================== */
@media (prefers-reduced-motion: no-preference){
  .reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease-out); }
  .reveal.in{ opacity:1; transform:none; }

  .caret{ animation:caretblink 1.05s steps(1,end) infinite; }
  @keyframes caretblink{ 50%{ opacity:0; } }

  .eyebrow i{ animation:emberpulse 2.6s ease-in-out infinite; }
  @keyframes emberpulse{ 50%{ box-shadow:0 0 3px rgba(200,137,47,.4); opacity:.6; } }

  .q-card.qa{ animation:qfloat 7.5s ease-in-out infinite alternate; }
  .q-card.qb{ animation:qfloat 8.5s .6s ease-in-out infinite alternate; }
  .q-card.qc{ animation:qfloat 9.5s .3s ease-in-out infinite alternate; }
  .q-card.qd{ animation:qfloat 7s 1s ease-in-out infinite alternate; }
  @keyframes qfloat{ from{ translate:0 0; } to{ translate:0 -9px; } }

  .cue-line::after{ animation:cuedrop 2.3s var(--ease) infinite; }
  @keyframes cuedrop{ 0%{ top:-46%; } 60%,100%{ top:110%; } }

  .tb-rec i{ animation:recblink 1.7s ease-in-out infinite; }
  @keyframes recblink{ 50%{ opacity:.25; box-shadow:none; } }

  .demo-shell::before{ animation:demobreathe 7.5s ease-in-out infinite alternate; }
  @keyframes demobreathe{ from{ opacity:.55; transform:scale(.985);} to{ opacity:1; transform:scale(1.03);} }

  .pin.on::after{ animation:pinring .8s var(--ease-out) forwards; }
  @keyframes pinring{ 0%{ opacity:.95; transform:scale(.5);} 100%{ opacity:0; transform:scale(1.8);} }

  .dp-approve.yes::after{
    content:""; position:absolute; inset:-3px; border-radius:14px; border:2px solid rgba(63,157,122,.6);
    animation:okring .9s var(--ease-out) forwards;
  }
  @keyframes okring{ 0%{ opacity:1; transform:scale(.92);} 100%{ opacity:0; transform:scale(1.25);} }

  .plan-spin i{ animation:planspin 6.5s linear infinite; }
  @keyframes planspin{ to{ transform:rotate(360deg); } }
}

/* ============================== RESPONSIVO ============================== */
@media (max-width: 1080px){
  .feats{ grid-template-columns:repeat(2,1fr); }
  .wl-layout{ grid-template-columns:1fr; }
  .wl-brands{ flex-direction:row; flex-wrap:wrap; }
  .wl-brand{ width:auto; flex:1 1 150px; }
  .wl-note{ display:none; }
}
@media (max-width: 980px){
  .hero{ min-height:0; padding-block:96px 84px; }
  .hero-grid{ grid-template-columns:1fr; }
  .hero-visual{ height:440px; max-width:560px; }
  .scroll-cue{ display:none; }
  .steps{ grid-template-columns:1fr; }
  .plans{ grid-template-columns:1fr; max-width:520px; margin-inline:auto; }
  .plan.featured{ scale:none; }
}
@media (max-width: 880px){
  .nav-links{ display:none; }
  .nav-cta{ margin-left:auto; }
  .wl-stage{ grid-template-columns:1fr; }
  .wl-phone{ max-width:250px; margin-inline:auto; }
  .wl-pane + .wl-pane{ margin-top:14px; }
}
@media (max-width: 720px){
  .demo-stage:not(.is-static){ height:640px; }
  .scene{ padding:58px 16px 20px; }
  .dv-body{ flex-direction:column; height:auto; }
  .dviewer{ max-width:430px; }
  .dv-stage{ height:216px; }
  .dv-panel{ max-width:none; border-left:0; border-top:1px solid var(--line); }
  .dv-list{ padding-bottom:6px; }
  .demo-caption{ white-space:normal; text-align:center; line-height:1.4; border-radius:16px; }
  .demo-hintchip{ display:none; }
  .faq-a p{ padding-right:22px; }
}
@media (max-width: 640px){
  .feats{ grid-template-columns:1fr; }
  .hero-visual{ height:auto; display:grid; gap:12px; }
  .hero-visual::before{ display:none; }
  .q-card{ position:static; width:100%; rotate:none; }
  .q-card.qd{ width:100%; }
  .btn-lg{ width:100%; }
  .cta-row .btn-lg{ width:100%; }
  .demo-replay span{ display:none; }
  .footer-links{ margin-left:0; }
}
@media (max-width: 420px){
  .hero h1{ font-size:31px; }
  .wl-brand{ flex:1 1 100%; }
}
@media (max-width: 480px){
  .wl-stage{ padding:14px; }
  .wl-tabs{ display:none; }
  .wl-abtn{ padding:5px 10px; font-size:10px; }
  .wl-name{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .demo-titlebar{ gap:6px; padding:11px 10px; }
  .tb-url{ min-width:0; font-size:11px; padding:5px 8px; }
  .tb-url span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:34vw; }
  .tb-rec{ letter-spacing:.05em; font-size:9px; }
}

/* ============================== MOVIMENTO REDUZIDO ============================== */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .caret{ display:none; }
  .scroll-cue{ display:none; }
  .demo-shell::before{ opacity:.8; }
  .spot{ background:radial-gradient(620px circle at 50% 26%, rgba(203,178,132,.07), transparent 64%); }
  .demo-cur, .demo-thumb{ display:none !important; }
  .demo-replay{ display:none; }
}

/* ============================== MENU MÓVEL ==============================
   Abaixo de 880px o protótipo escondia .nav-links sem substituto — no celular
   sobrava só o botão de contratar. O <details> devolve a navegação sem depender
   de JS: sem script, ele continua abrindo e fechando. */
.nav-menu{ display:none; margin-left:auto; position:relative; }
.nav-menu > summary{
  display:inline-flex; align-items:center; justify-content:center; gap:0;
  width:42px; height:42px; border-radius:12px; cursor:pointer; list-style:none;
  background:rgba(255,255,255,.03); border:1px solid var(--line); color:var(--ink);
  transition:border-color .3s var(--ease), color .3s var(--ease);
}
.nav-menu > summary::-webkit-details-marker{ display:none; }
.nav-menu > summary:hover{ border-color:rgba(203,188,174,.5); color:var(--taupe-2); }
.nav-menu .bars{ position:relative; width:17px; height:11px; }
.nav-menu .bars i{
  position:absolute; left:0; right:0; height:1.5px; border-radius:2px; background:currentColor;
  transition:transform .3s var(--ease), opacity .2s var(--ease);
}
.nav-menu .bars i:nth-child(1){ top:0; }
.nav-menu .bars i:nth-child(2){ top:50%; margin-top:-.75px; }
.nav-menu .bars i:nth-child(3){ bottom:0; }
.nav-menu[open] .bars i:nth-child(1){ transform:translateY(4.75px) rotate(45deg); }
.nav-menu[open] .bars i:nth-child(2){ opacity:0; }
.nav-menu[open] .bars i:nth-child(3){ transform:translateY(-4.75px) rotate(-45deg); }
.nav-sheet{
  position:absolute; right:0; top:calc(100% + 12px); z-index:130; min-width:230px;
  display:flex; flex-direction:column; padding:10px;
  background:rgba(16,14,12,.985); border:1px solid var(--line); border-radius:16px;
  box-shadow:0 26px 60px rgba(0,0,0,.6);
  -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
}
.nav-sheet a{
  color:var(--ink); text-decoration:none; font-size:14.5px; font-weight:500;
  padding:11px 14px; border-radius:10px; transition:background-color .25s var(--ease), color .25s var(--ease);
}
.nav-sheet a:hover{ background:rgba(255,255,255,.05); color:var(--taupe-2); }

/* ============================== INTEGRAÇÕES ============================== */
/* Faixa curta: respira menos que uma seção inteira, é uma transição entre a
   demonstração e os planos. */
.integr{ padding-block:clamp(54px,6vw,82px); }
.integr .wrap{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:20px; }
.integr-label{
  font-size:11.5px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--taupe);
}
.chips{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
.chip{
  display:inline-flex; align-items:center; gap:9px; padding:9px 17px; border-radius:999px;
  border:1px solid var(--line); background:var(--glass); color:var(--ink);
  font-size:13.5px; font-weight:500;
  transition:border-color .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.chip:hover{ border-color:rgba(203,188,174,.45); color:var(--ink-strong); transform:translateY(-2px); }
.chip i{
  width:6px; height:6px; border-radius:50%; background:var(--taupe);
  box-shadow:0 0 10px rgba(200,137,47,.5);
}
.integr-note{ color:var(--muted); font-size:13px; max-width:62ch; }

/* ============================== RODAPÉ: FAIXA LEGAL ============================== */
.footer-legal{
  width:100%; margin-top:22px; padding-top:20px; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; align-items:center; gap:8px 22px;
}
.footer-legal a{ color:var(--muted); text-decoration:none; font-size:13px; transition:color .3s var(--ease); }
.footer-legal a:hover{ color:var(--taupe-2); }
.footer-legal .foot-note{ color:var(--muted); font-size:12.5px; opacity:.8; margin-left:auto; }

/* ============================== WHATSAPP ============================== */
.wa{
  position:fixed; right:20px; bottom:20px; z-index:200;
  width:54px; height:54px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--on-accent); background:linear-gradient(180deg, var(--taupe-2), var(--taupe));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 14px 34px rgba(0,0,0,.5);
  transition:transform .35s var(--spring), box-shadow .35s var(--ease), bottom .35s var(--ease);
}
.wa svg{ width:26px; height:26px; }
.wa:hover{ transform:translateY(-3px) scale(1.04); box-shadow:inset 0 1px 0 rgba(255,255,255,.34), 0 20px 46px rgba(0,0,0,.55); }

/* ============================== BARRA DE COOKIES ============================== */
.cookiebar{
  position:fixed; left:16px; right:16px; bottom:16px; z-index:230;
  max-width:660px; margin-inline:auto;
  display:flex; flex-wrap:wrap; align-items:center; gap:14px;
  padding:15px 18px; border-radius:16px;
  background:rgba(18,16,14,.94); border:1px solid var(--line);
  box-shadow:0 26px 64px rgba(0,0,0,.55);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
}
.cookiebar[hidden]{ display:none; }
.cookiebar p{ flex:1 1 250px; color:var(--muted); font-size:13px; line-height:1.5; }
.cookiebar a{ color:var(--taupe-2); }
/* Com a barra na tela o botão do WhatsApp sai de baixo dela nas telas estreitas. */
.cookiebar:not([hidden]) ~ .wa{ bottom:20px; }
@media (max-width: 720px){
  .cookiebar:not([hidden]) ~ .wa{ bottom:132px; }
}

/* ============================== DOCUMENTOS (páginas legais) ============================== */
.doc{
  max-width:780px; margin-inline:auto;
  padding:clamp(104px,12vw,140px) clamp(20px,4vw,36px) clamp(72px,9vw,104px);
}
/* Nas páginas legais não há links de seção no meio da barra: sem eles, o botão
   de voltar encostaria no logo. */
.nav-doc .nav-cta{ margin-left:auto; }
.doc .doc-meta{
  font-size:11.5px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--taupe);
}
.doc h1{ font-size:clamp(30px,4.4vw,46px); margin-top:18px; }
.doc h2{ font-size:20px; margin-top:44px; }
.doc p, .doc li{ color:var(--muted); font-size:15.5px; line-height:1.72; margin-top:13px; }
.doc ul{ margin-top:10px; padding-left:20px; }
.doc li{ margin-top:8px; }
.doc b, .doc strong{ color:var(--ink); font-weight:600; }
.doc a{ color:var(--taupe-2); }
/* Um botão dentro de .doc perdia a própria cor: `.doc a` (0,0,1,1) vence `.btn-primary` (0,0,1,0),
   e o texto saía taupe sobre fundo taupe -- ilegível, mas presente, que é o pior dos casos. As
   páginas legais não têm botão no corpo, então isto só apareceu quando a 404 ganhou um. */
.doc a.btn{ color:var(--ink); }
.doc a.btn-primary{ color:var(--on-accent); }
.doc .lede{ color:var(--ink); font-size:17px; }
/* A identificação da pessoa jurídica: quem responde por este serviço. Fica visualmente discreta
   -- é dado cadastral, não argumento -- mas precisa estar legível e presente, porque a LGPD exige
   identificar o controlador e a legislação de consumo exige fornecedor identificável. Tem borda à
   esquerda para se ler como um bloco de dados e não como mais um parágrafo do texto. */
.doc .doc-ident{
  margin-top:20px; padding:12px 0 12px 16px;
  border-left:2px solid var(--line);
  font-size:14px; line-height:1.65; color:var(--muted);
}

/* ============================== MARCA EM MÁSCARA ==============================
   As páginas legais não carregam o símbolo SVG inline da home. A máscara pinta o
   mesmo arquivo de logo com a cor do tema, sem repetir o traçado em cada página. */
.logo-mask{
  display:inline-block; width:122px; height:42px; background:var(--taupe);
  -webkit-mask:url('assets/eazymkt-logo.svg') no-repeat center/contain;
  mask:url('assets/eazymkt-logo.svg') no-repeat center/contain;
  transition:background-color .35s var(--ease);
}
.logo-link:hover .logo-mask{ background:var(--taupe-2); }
.logo-mask.sm{ width:93px; height:32px; background:var(--muted); }
.logo-link:hover .logo-mask.sm{ background:var(--taupe); }

/* ============================== RESPONSIVO (adições) ============================== */
@media (max-width: 880px){
  /* mesmo ponto em que .nav-links some: o menu compacto assume, e o botão de
     contratar continua na barra — é o CTA mais clicado no celular. */
  .nav-menu{ display:block; margin-left:6px; }
  .nav-cta{ margin-left:auto; }
  .nav-inner{ gap:10px; }
}
@media (max-width: 360px){
  .nav-cta .btn{ padding:9px 12px; font-size:12.5px; }
}
@media (max-width: 640px){
  /* espaço para o botão flutuante do WhatsApp não cobrir a faixa legal */
  .footer{ padding-bottom:112px; }
  .footer-legal .foot-note{ margin-left:0; }
}
@media (max-width: 480px){
  .cookiebar{ left:12px; right:12px; bottom:12px; padding:14px; }
  .wa{ width:48px; height:48px; right:14px; bottom:14px; }
  .wa svg{ width:23px; height:23px; }
}

/* ============================ telas reais em "Como funciona" ============================
   Miniaturas das três telas que os passos descrevem. A disposição segue os componentes de
   verdade (BoardPage/BoardColumn, PieceDetailPage, ClientApprovalPage), não uma ilustração
   livre: mesma ordem, mesmas proporções, mesmos elementos. Cores são os tokens ESCUROS do app
   (tokens.css), porque é assim que o produto aparece no resto desta página. */
.step-shot{
  height:150px; margin:-6px 0 22px; border:1px solid #343331; border-radius:10px;
  overflow:hidden; background:#0c0b0a; position:relative;
}
.step-shot::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 62%, rgba(12,11,10,.9)); }

/* --- 01 Board: colunas de 266px lado a lado, cabeçalho com bolinha do papel, nome e contagem --- */
.shot-board{ display:flex; gap:7px; padding:8px; height:100%; }
.sb-col{ flex:0 0 96px; background:#121110; border:1px solid #343331; border-radius:7px; display:flex; flex-direction:column; gap:5px; padding:6px; }
.sb-col-cut{ flex:0 0 60px; }
.sb-head{ display:flex; align-items:center; gap:4px; font-size:7px; color:#f0eeec; border-bottom:1px solid #343331; padding-bottom:5px; }
.sb-dot{ width:5px; height:5px; border-radius:50%; flex:none; }
.sb-nm{ font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sb-ct{ margin-left:auto; color:#888684; }
.sb-card{ background:#1b1a19; border:1px solid #343331; border-radius:5px; padding:5px; display:flex; flex-direction:column; gap:3px; }
.sb-cli{ font-size:6px; color:#888684; }
.sb-ti{ font-size:7.5px; color:#f0eeec; font-weight:600; line-height:1.2; }
.sb-foot{ display:flex; align-items:center; gap:3px; font-size:6px; color:#888684; }
.sb-av{ width:10px; height:10px; border-radius:50%; background:#6F645B; color:#fff; font-size:5px; display:grid; place-items:center; }

/* --- 02 Postagem: barra de contexto em duas linhas, depois trabalho | prévia | painel --- */
.shot-post{ display:flex; flex-direction:column; height:100%; }
.sp-ctx{ padding:7px 8px; border-bottom:1px solid #343331; display:flex; flex-direction:column; gap:4px; }
.sp-l1{ display:flex; align-items:center; gap:5px; }
.sp-back{ font-size:6px; color:#888684; }
.sp-ti{ font-size:8.5px; font-weight:700; color:#f0eeec; white-space:nowrap; }
.sp-stage{ font-size:6px; color:#f0eeec; border:1px solid #343331; border-radius:999px; padding:1px 5px; }
.sp-act{ margin-left:auto; font-size:6px; background:#6F645B; color:#fff; border-radius:4px; padding:3px 6px; white-space:nowrap; }
.sp-l2{ display:flex; gap:9px; font-size:6px; color:#f0eeec; }
.sp-l2 i{ display:block; color:#888684; font-style:normal; font-size:5.5px; }
.sp-grid{ flex:1; display:grid; grid-template-columns:1fr 46px 52px; gap:6px; padding:7px 8px; min-height:0; }
.sp-work{ background:#1b1a19; border:1px solid #343331; border-radius:6px; padding:5px; display:flex; flex-direction:column; gap:4px; }
.sp-sec{ font-size:6.5px; font-weight:600; color:#f0eeec; }
.sp-art{ height:24px; border-radius:3px; background:linear-gradient(145deg,#c9a06a,#a4643f); }
.sp-line{ height:4px; border-radius:2px; background:#343331; }
.sp-line.short{ width:60%; }
/* A prévia é o mock de celular: fundo branco próprio, com o cabeçalho da conta, a imagem e a
   legenda -- e não uma coluna branca vazia. */
.sp-prev{ border-radius:6px; background:#fff; overflow:hidden; display:flex; flex-direction:column; }
.sp-pv-head{ display:flex; align-items:center; gap:3px; padding:3px 4px; font-size:5px; color:#262626; font-weight:600; }
.sp-pv-head i{ width:6px; height:6px; border-radius:50%; background:linear-gradient(135deg,#536DFE,#FF4081,#FFC260); }
.sp-pv-art{ flex:1; background:linear-gradient(145deg,#c9a06a,#a4643f); }
.sp-pv-cap{ height:9px; background:#fff; border-top:1px solid #eee; }
.sp-panel{ background:#1b1a19; border:1px solid #343331; border-radius:6px; padding:5px; display:flex; flex-direction:column; gap:4px; }
.sp-tabs{ display:flex; gap:4px; }
.sp-tabs i{ font-style:normal; font-size:5.5px; color:#888684; }
.sp-tabs i.on{ color:#f0eeec; border-bottom:1px solid #6F645B; }

/* --- 03 Aprovação: cabeçalho com contagem, duas abas, card com prévia e as duas ações --- */
.shot-client{ display:grid; place-items:center; height:100%; padding:8px; }
.sc-phone{ width:118px; background:#1b1a19; border:1px solid #343331; border-radius:9px; overflow:hidden; }
.sc-head{ display:flex; align-items:center; gap:4px; padding:5px 6px; border-bottom:1px solid #343331; }
.sc-logo{ width:9px; height:9px; border-radius:3px; background:#6F645B; }
.sc-nm{ font-size:6.5px; font-weight:700; color:#f0eeec; }
.sc-greet{ margin-left:auto; font-size:5.5px; color:#888684; }
.sc-tabs{ display:flex; gap:3px; padding:5px 6px 0; }
.sc-tabs i{ font-style:normal; font-size:5.5px; color:#888684; border:1px solid #343331; border-radius:999px; padding:1px 5px; }
.sc-tabs i.on{ background:#6F645B; border-color:#6F645B; color:#fff; }
.sc-card{ margin:5px 6px 6px; border:1px solid #343331; border-radius:6px; overflow:hidden; display:flex; flex-direction:column; }
.sc-art{ height:34px; background:linear-gradient(145deg,#c9a06a,#a4643f); }
.sc-cap{ font-size:6px; color:#f0eeec; padding:4px 5px 0; }
.sc-acts{ display:flex; gap:4px; padding:5px; }
.sc-acts i{ flex:1; text-align:center; font-style:normal; font-size:5.5px; padding:3px 0; border-radius:3px; border:1px solid #343331; color:#888684; }
.sc-acts i.ok{ background:#6F645B; border-color:#6F645B; color:#fff; font-weight:600; }

@media (max-width:900px){ .step-shot{ height:170px; } }

/* ================================ seção Pauta ================================
   As duas telas da pauta: o editor da agência e o card que o cliente recebe. Estrutura tirada de
   features/pauta/PlanEditor.tsx e client-approval/ClientPlanCard.tsx. Tokens escuros do app, como
   nas outras miniaturas desta página. */
.pauta-layout{ display:grid; grid-template-columns:1.35fr 1fr; gap:22px; margin-top:clamp(36px,4.5vw,54px); align-items:start; }
.pauta-fig{ margin:0; }
.pauta-fig figcaption{
  margin-top:11px; font-size:10.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); text-align:center;
}
.pauta-note{ margin-top:22px; color:var(--muted); font-size:13.5px; max-width:760px; }

.shot-pauta, .shot-plan{ border:1px solid #343331; border-radius:12px; background:#0c0b0a; overflow:hidden; }
.shot-pauta{ padding:14px 15px 0; }

/* --- editor da pauta: nome, chip de status, período e contagem, o aviso do status, a lista --- */
.sq-head{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.sq-ti{ font-size:15px; font-weight:700; color:#f0eeec; }
.sq-chip{ font-size:9.5px; font-weight:600; padding:2px 9px; border-radius:999px;
  background:color-mix(in srgb, #457aab 22%, transparent); color:#8fb6d8; border:1px solid color-mix(in srgb, #457aab 45%, transparent); }
.sq-meta{ font-size:10.5px; color:#888684; }
.sq-hint{ margin:8px 0 0; font-size:11px; line-height:1.45; color:#888684; }
.sq-sec{ display:block; margin-top:15px; font-size:11px; font-weight:600; color:#f0eeec; }
.sq-list{ list-style:none; margin:9px 0 0; padding:0 0 22px; display:flex; flex-direction:column; gap:7px; }
.sq-list li{ display:flex; align-items:center; gap:9px; background:#1b1a19; border:1px solid #343331;
  border-radius:8px; padding:9px 11px; }
.sq-list li.cut{ opacity:.42; }
.sq-list i{ font-style:normal; font-size:9.5px; font-weight:700; color:#888684; width:15px; flex:none; }
.sq-list span{ display:flex; flex-direction:column; gap:2px; font-size:9.5px; color:#888684; }
.sq-list b{ font-size:11.5px; font-weight:600; color:#f0eeec; }

/* --- card do cliente: a pauta chega inteira, com a lista e as duas ações --- */
.shot-plan{ display:grid; place-items:center; padding:16px; }
.sn-phone{ width:100%; max-width:246px; background:#1b1a19; border:1px solid #343331; border-radius:12px; overflow:hidden; }
.sn-head{ display:flex; align-items:center; gap:6px; padding:9px 10px; border-bottom:1px solid #343331; }
.sn-logo{ width:14px; height:14px; border-radius:4px; background:#6F645B; }
.sn-nm{ font-size:10px; font-weight:700; color:#f0eeec; }
.sn-greet{ margin-left:auto; font-size:8.5px; color:#888684; }
.sn-card{ margin:10px; border:1px solid #343331; border-radius:9px; padding:10px; display:flex; flex-direction:column; gap:7px; }
.sn-ti{ display:flex; align-items:center; gap:7px; font-size:11.5px; font-weight:700; color:#f0eeec; }
.sn-ti i{ font-style:normal; font-size:8.5px; font-weight:600; padding:2px 7px; border-radius:999px;
  background:color-mix(in srgb, #457aab 22%, transparent); color:#8fb6d8; }
.sn-meta{ font-size:9px; color:#888684; }
.sn-list{ list-style:none; margin:2px 0 0; padding:0; display:flex; flex-direction:column; gap:5px; }
.sn-list li{ display:flex; align-items:baseline; gap:6px; font-size:9.5px; color:#888684;
  border-top:1px solid #343331; padding-top:5px; }
.sn-list li:first-child{ border-top:0; padding-top:0; }
.sn-list li.cut{ opacity:.45; }
.sn-list b{ font-weight:600; color:#f0eeec; flex:1; }
.sn-acts{ display:flex; gap:6px; margin-top:3px; }
.sn-acts i{ flex:1; text-align:center; font-style:normal; font-size:9px; font-weight:700;
  padding:6px 4px; border-radius:7px; border:1px solid #343331; color:#888684; white-space:nowrap; }
.sn-acts i.ok{ background:#6F645B; border-color:#6F645B; color:#fff; }

@media (max-width:900px){ .pauta-layout{ grid-template-columns:1fr; } }