/* =====================================================================
   Stack IA Connect — biblioteca de componentes (CSS puro, atomic design)
   Carregar DEPOIS de tokens.css.
   Contexto de seção:  data-theme="claro"  |  data-theme="escuro"
   Ordem: 0 Base · 1 Átomos · 2 Moléculas · 3 Organismos · 4 Templates
   ===================================================================== */

/* =========================== 0 · BASE ================================ */
:root{
  --head:var(--font-head);
  --body:var(--font-body);
  --ease-out:cubic-bezier(.2,.7,.2,1);
}
@media(min-width:768px){
  :root{
    --fs-body:clamp(17px,1.9vw,20px);
    --fs-small:clamp(14px,1.55vw,16px);
    --fs-lead:clamp(16px,2vw,19.5px);
    --fs-h1:clamp(38px,9vw,64px);
    --fs-h2:clamp(32px,6.8vw,45px);
    --fs-h3:clamp(24px,3.4vw,29px);
  }
}
@media(min-width:1024px){
  :root{
    --fs-h1:clamp(56px,13vw,96px);
    --fs-h2:clamp(46px,10vw,68px);
    --fs-h3:clamp(32px,5vw,44px);
    --pad-sec:clamp(100px,11vw,134px);
    --pad-sec-hero:clamp(48px,5.5vw,70px);
    --gap:clamp(20px,3.2vw,30px);
  }
}
/* variáveis de contexto (herdam do [data-theme] mais próximo) */
:root,[data-theme="claro"]{--decor:var(--brand);--x-mark:var(--ink);--disk-sh:var(--ink);--tag-ink-bg:var(--ink);--tag-ink-fg:var(--white);--tag-ink-sh:var(--brand);--scn-a-edge:var(--night)}
[data-theme="escuro"]{--decor:var(--attention);--x-mark:var(--attention);--disk-sh:var(--white);--tag-ink-bg:var(--white);--tag-ink-fg:var(--ink);--tag-ink-sh:var(--accent);--scn-a-edge:#000}
.ds,.ds *{box-sizing:border-box}
.ds{font-family:var(--body);background:var(--surface);color:var(--text);line-height:1.55;-webkit-font-smoothing:antialiased}
:where(.ds) :is(p,h1,h2,h3,ul){margin:0}
:where(.ds) p{font-size:var(--fs-body);line-height:1.45;letter-spacing:-.02em;text-wrap:pretty}
.center{text-align:center}
.blk{margin:24px 0}
.blk-sm{margin:13px 0}

/* =========================== 1 · ÁTOMOS ============================== */

/* A · Textura (fundo de seção feito só de gradientes) */
.tex,.tex-hero{position:relative;isolation:isolate}
.tex::before,.tex-hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none}
.tex[data-theme="claro"]::before{
  background-image:
    linear-gradient(rgba(25,53,44,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(25,53,44,.05) 1px,transparent 1px),
    radial-gradient(circle at 6px 6px,rgba(35,102,71,.2) 1px,transparent 1px),
    radial-gradient(circle at 26px 26px,rgba(25,53,44,.06) 1px,transparent 1px);
  background-size:34px 34px,34px 34px,24px 24px,70px 70px;opacity:.35}
.tex[data-theme="escuro"]::before{
  background-image:
    linear-gradient(rgba(255,255,255,.052) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px),
    radial-gradient(circle at 8px 8px,rgba(200,237,141,.34) 1px,transparent 1.45px),
    radial-gradient(circle at 28px 28px,rgba(255,255,255,.09) 1px,transparent 1.35px),
    repeating-linear-gradient(135deg,transparent 0 22px,rgba(200,237,141,.035) 22px 23px,transparent 23px 46px);
  background-size:30px 30px,30px 30px,18px 18px,58px 58px,92px 92px;opacity:.52}
.tex-hero::before{
  background-image:
    linear-gradient(rgba(25,53,44,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(25,53,44,.045) 1px,transparent 1px),
    radial-gradient(circle at 10px 10px,rgba(35,102,71,.26) 1.15px,transparent 1.45px),
    radial-gradient(circle at 34px 34px,rgba(25,53,44,.08) 1px,transparent 1.35px),
    repeating-linear-gradient(115deg,transparent 0 30px,rgba(35,102,71,.05) 30px 31px,transparent 31px 62px);
  background-size:34px 34px,34px 34px,24px 24px,88px 88px,132px 132px;opacity:.72;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 78%,rgba(0,0,0,.74) 100%);
          mask-image:linear-gradient(180deg,#000 0%,#000 78%,rgba(0,0,0,.74) 100%)}

/* A · Superfície (card base) */
.card{background:var(--surface-raised);border:2px solid var(--line);border-radius:var(--radius-card);padding:24px;box-shadow:var(--sh-card);color:var(--text)}
.card--flat{box-shadow:none}
.cap{display:flex;align-items:flex-start;gap:10px;background:var(--surface-raised);border:2px solid var(--line);border-radius:var(--radius-card);padding:12px 14px;font-weight:500;font-size:var(--fs-body);line-height:1.45;color:var(--text)}

/* A · Título */
.hd-display,.hd-section,.hd-hero,.hd-block,.hd-card{font-family:var(--head);font-weight:900;text-transform:uppercase;text-wrap:balance;color:var(--text-strong);margin:0}
.hd-display{font-size:clamp(40px,8vw,84px);line-height:.92;letter-spacing:-.01em}
.hd-section{font-size:var(--fs-h2);line-height:.96;letter-spacing:-.01em}
@media(min-width:1024px){.hd-section{line-height:.92}}
.hd-hero{font-size:clamp(28px,3.2vw,46px);line-height:.9;letter-spacing:0}
.hd-block{font-size:var(--fs-h3);line-height:1.04;letter-spacing:-.01em}
.hd-card{font-size:clamp(19px,2vw,24px);line-height:.98;letter-spacing:-.01em}
.hl,.c{color:var(--highlight)}

/* A · Texto */
.lead{font-family:var(--body);font-size:var(--fs-lead);line-height:1.25;font-weight:500;letter-spacing:-.02em;color:var(--text-muted);text-wrap:pretty}
.body{font-family:var(--body);font-size:var(--fs-body);line-height:1.45;letter-spacing:-.02em;color:var(--text)}
.small{font-family:var(--body);font-size:var(--fs-small);line-height:1.45;font-weight:500;color:var(--text-muted)}
.qualif{font-family:var(--body);font-weight:600;letter-spacing:-.01em;font-size:clamp(16px,2.1vw,22px);line-height:1.28;color:var(--text);text-wrap:balance}
.punch{font-family:var(--body);font-weight:800;font-size:clamp(19px,2.1vw,28px);line-height:1.25;letter-spacing:-.01em}
.caption,.cta-sub{font-family:var(--body);font-size:11px;line-height:1.35;color:var(--text-muted)}

/* A · Eyebrow e kicker */
.eyebrow{display:inline-block;font-family:var(--body);font-weight:800;font-size:var(--fs-small);letter-spacing:.12em;text-transform:uppercase;color:var(--highlight);background:var(--tint);border:1px solid var(--highlight);border-radius:var(--radius-pill);padding:8px 18px;line-height:1.25}
.kicker{display:inline-block;font-family:var(--body);font-weight:700;font-size:clamp(11px,1.5vw,13px);letter-spacing:-.01em;text-transform:uppercase;color:var(--text);line-height:1.1;white-space:nowrap;opacity:.9}
.kicker--caps{font-family:var(--head);font-weight:900;font-size:14px;letter-spacing:.05em;color:var(--decor);opacity:1;display:inline-flex;align-items:center;gap:10px}
.kicker--caps::after{content:"";width:30px;height:2px;background:currentColor;opacity:.5}

/* A · Botão */
.cta{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:clamp(56px,8.5vh,68px);font-family:var(--head);font-weight:800;font-size:clamp(19px,2.8vw,25px);text-transform:uppercase;letter-spacing:.01em;color:var(--on-action);background:var(--action);border:2px solid var(--ink);border-radius:var(--radius-card);padding:17px 42px;text-decoration:none;overflow:hidden;box-shadow:var(--sh-action);cursor:pointer;transition:transform .15s ease,box-shadow .15s ease}
.cta::after{content:"";position:absolute;z-index:-1;inset:-60% -35%;background:linear-gradient(112deg,transparent 0 42%,rgba(255,255,255,.38) 47%,rgba(255,255,255,.16) 51%,transparent 58%);transform:translateX(-78%) rotate(8deg);transition:transform .48s var(--ease-out);pointer-events:none}
.cta:hover{transform:translate(-2px,-2px);box-shadow:var(--sh-action-hover)}
.cta:hover::after{transform:translateX(78%) rotate(8deg)}
.cta:active{transform:translate(2px,2px);box-shadow:var(--sh-press);transition-duration:.06s}
.cta:focus-visible{outline:3px solid var(--focus-ring);outline-offset:3px}
.cta--breathe{animation:breathe 2.6s ease-in-out infinite}
.cta--breathe:hover{animation:none}
.cta--sm{min-height:0;font-size:15px;padding:11px 18px;box-shadow:4px 4px 0 0 var(--line)}
.cta--block{width:100%}
@keyframes breathe{0%,100%{box-shadow:var(--sh-action)}50%{box-shadow:var(--sh-action),0 0 0 4px var(--tint)}}

/* A · Botão de ícone (seta de trilho) */
.rail-btn{width:52px;height:52px;border-radius:var(--radius-card);border:2px solid var(--line);background:var(--surface-raised);color:var(--highlight);box-shadow:var(--sh-card-sm);font-family:var(--head);font-size:36px;font-weight:900;line-height:1;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease}
.rail-btn:hover{transform:translate(-2px,-2px);box-shadow:var(--sh-card)}
.rail-btn:focus-visible{outline:3px solid var(--focus-ring);outline-offset:3px}

/* A · Badge, tag, carimbo */
.badge{display:inline-flex;align-items:center;gap:7px;background:var(--action);color:var(--on-action);font-family:var(--head);font-weight:900;text-transform:uppercase;letter-spacing:.06em;font-size:12px;padding:5px 12px;border:2px solid var(--ink);border-radius:var(--radius-tag);box-shadow:2px 2px 0 0 var(--ink)}
.tag{display:inline-block;font-family:var(--head);font-weight:800;text-transform:uppercase;letter-spacing:.06em;font-size:12px;padding:4px 10px;border-radius:5px}
.tag--ink{color:var(--tag-ink-fg);background:var(--tag-ink-bg);transform:rotate(-3deg);box-shadow:2px 2px 0 var(--tag-ink-sh)}
.tag--soft{background:var(--tint);border:1px solid var(--highlight);color:var(--highlight);font-size:11px;padding:3px 9px}
.tag--pill{font-family:var(--body);font-weight:800;font-size:9.5px;letter-spacing:.12em;color:var(--highlight);background:var(--tint);border-radius:var(--radius-pill);padding:3px 10px}
.stamp{display:inline-block;font-family:var(--head);font-weight:900;text-transform:uppercase;font-size:clamp(19px,4.6vw,26px);color:var(--highlight);border:2.5px solid currentColor;padding:6px 16px;border-radius:var(--radius-tag);transform:rotate(-4deg);letter-spacing:.04em}
.stamp--fail{color:var(--x-mark)}

/* A · Ícone e ícone-tecla */
.icon{width:24px;height:24px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.icon-tile{flex:0 0 36px;width:36px;height:36px;border-radius:var(--radius-tag);display:inline-flex;align-items:center;justify-content:center;color:var(--on-action);background:var(--action);border:2px solid var(--ink);box-shadow:2px 2px 0 0 var(--ink);transition:transform .35s var(--ease-out),box-shadow .18s var(--ease-out)}
.icon-tile svg{width:22px;height:22px}
.icon-tile--sm{flex-basis:24px;width:24px;height:24px;border-radius:5px;box-shadow:none}
.icon-tile--sm svg{width:13px;height:13px}
.icon-tile--x{flex-basis:22px;width:22px;height:22px;border-radius:6px;background:transparent;color:var(--x-mark);border:1.5px solid var(--x-mark);box-shadow:none;font-weight:900;font-size:14px}
.icon-tile.is-pressed{transform:translate(2px,2px);box-shadow:0 0 0 0 var(--ink)}

/* A · Número (disco, índice, fantasma) */
.num-disk{width:56px;height:56px;display:inline-flex;align-items:center;justify-content:center;background:var(--action);color:var(--on-action);font-family:var(--head);font-weight:900;font-size:30px;border-radius:var(--radius-round);border:2px solid var(--ink);box-shadow:4px 4px 0 var(--disk-sh)}
.num-index{font-family:var(--head);font-weight:900;font-size:clamp(34px,8vw,54px);line-height:.8;letter-spacing:-.04em;color:var(--highlight)}
.num-ghost{position:absolute;right:-8px;top:50%;transform:translateY(-50%);font-family:var(--head);font-weight:900;font-size:187px;line-height:.7;color:var(--highlight);opacity:.07;pointer-events:none}

/* A · Número grande (figure) */
.figure{font-family:var(--head);font-weight:900;font-size:clamp(42px,6vw,64px);line-height:.9;letter-spacing:-.02em;color:var(--highlight)}
.figure small{font-size:.38em;letter-spacing:.04em;margin-left:2px;color:var(--decor)}

/* A · Preço */
.price-old{font-family:var(--head);font-size:clamp(15px,2.2vw,19px);text-decoration:line-through;color:var(--text-muted)}
.price-now{display:flex;align-items:baseline;justify-content:center;gap:.18em;font-family:var(--head);font-weight:900;line-height:.82;letter-spacing:-.02em;color:var(--highlight)}
.price-inst{font-size:clamp(1.45rem,2.25vw,2.45rem);line-height:1;align-self:flex-start;margin-top:.16em}
.price-value{font-size:clamp(3rem,4.9vw,5.35rem);line-height:.82}
.price-cash{display:inline-flex;font-family:var(--body);font-size:clamp(11px,1.5vw,13.5px);font-weight:800;color:var(--text-muted);padding:.08em .16em .16em;box-shadow:inset 0 -.32em 0 var(--tint)}

/* A · Divisor */
.divider{font-family:var(--head);font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--decor);font-size:clamp(14px,2vw,18px);display:flex;align-items:center;gap:14px;justify-content:center}
.divider::before,.divider::after{content:"";height:1px;flex:1;max-width:80px;background:currentColor;opacity:.5}
.hairline{border:0;border-top:1px solid var(--hairline);margin:0}

/* A · Marcadores de lista */
.list-dot,.list-arrow,.list-plus,.list-check,.list-x,.list-star{list-style:none;display:flex;flex-direction:column;gap:9px;margin:0;padding:0}
:is(.list-dot,.list-arrow,.list-plus,.list-check,.list-x,.list-star) li{position:relative;padding-left:22px;font-size:var(--fs-small);line-height:1.45;color:var(--text-muted)}
.list-dot li::before{content:"";position:absolute;left:0;top:.55em;width:7px;height:7px;border-radius:50%;background:var(--decor);opacity:.8}
.list-arrow li::before{content:"→";position:absolute;left:0;color:var(--decor);font-weight:900}
.list-plus li::before{content:"+";position:absolute;left:0;top:-1px;color:var(--decor);font-weight:900;font-size:1.15em}
.list-check li::before{content:"✓";position:absolute;left:0;color:var(--highlight);font-weight:900}
.list-star li::before{content:"✦";position:absolute;left:0;color:var(--decor)}
.list-x li::before{content:"✕";position:absolute;left:0;color:var(--x-mark);font-weight:900}

/* A · Moldura de imagem e placeholder */
.frame{display:block;width:100%;border:2px solid var(--line);border-radius:var(--radius-card);overflow:hidden;background:var(--surface-raised)}
.ph{background:repeating-linear-gradient(45deg,var(--tint),var(--tint) 12px,transparent 12px,transparent 24px),var(--surface-raised);display:flex;align-items:center;justify-content:center;color:var(--highlight);font-family:var(--body);font-weight:700;font-size:13px;min-height:90px}

/* A · Barra de progresso */
.progress{height:var(--progress-h);background:var(--action);transition:width .1s linear}

/* A · Ponto pulsante */
.live-dot{display:inline-block;width:9px;height:9px;border-radius:var(--radius-round);background:var(--decor);animation:pulse 1.4s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}

/* =========================== 2 · MOLÉCULAS =========================== */

/* M · Cabeçalho de seção */
.sec-head{text-align:center;max-width:760px;margin:0 auto}
.sec-head .kicker{margin-bottom:14px}
.sec-head .lead{max-width:46ch;margin:18px auto 0}

/* M · Grupo de CTA */
.cta-wrap{margin-top:37px;text-align:center}
.cta-wrap .cta-sub{margin:12px auto 0;max-width:52ch}

/* M · Stat */
.stat{display:flex;flex-direction:column;align-items:center;gap:6px;background:var(--surface-raised);border:2px solid var(--line);border-radius:var(--radius-card);box-shadow:var(--sh-card-sm);padding:20px 24px;text-align:center}
.stat .lbl{font-family:var(--body);font-weight:700;font-size:12px;text-transform:uppercase;line-height:1.2;letter-spacing:.06em;color:var(--text)}

/* M · Item de sintoma */
.symptom{display:flex;align-items:center;gap:16px;padding:18px 22px;border-bottom:1px solid var(--hairline);transition:background .25s ease}
.symptom:last-child{border-bottom:none}
.symptom .tx{font-family:var(--head);font-weight:800;text-transform:uppercase;font-size:clamp(17px,3.8vw,21px);line-height:1.1;letter-spacing:-.01em;color:var(--text);transition:color .3s ease}
@media(hover:hover){
  .symptom:hover{background:var(--tint)}
  .symptom:hover .icon-tile{transform:translate(2px,2px);box-shadow:0 0 0 0 var(--ink)}
  .symptom:hover .tx{color:var(--highlight)}
  .symptom:hover .icon-tile svg{animation:shake .5s ease}
}
@keyframes shake{0%,100%{transform:rotate(0)}25%{transform:rotate(-7deg)}75%{transform:rotate(7deg)}}

/* M · Item reprovado */
.fail-item{display:flex;align-items:center;gap:12px;padding:10px 8px;margin:0 -8px;border-bottom:1px solid var(--hairline);border-radius:6px}
.fail-item:last-child{border-bottom:none}
.fail-item .tx{font-size:16px;color:var(--text-muted);text-decoration:line-through;text-decoration-color:var(--x-mark);text-decoration-thickness:2px}

/* M · Item de preço */
.price-item{display:flex;align-items:center;gap:11px;background:var(--surface-raised);border:2px solid var(--line);border-radius:var(--radius-card);padding:9px 16px;box-shadow:var(--sh-card-sm);font-family:var(--body);font-weight:600;font-size:clamp(13px,1.8vw,15px);line-height:1.2;color:var(--text);transition:transform .12s ease,box-shadow .12s ease}
.price-item:hover{transform:translate(-2px,-2px);box-shadow:var(--sh-card)}
.price-item .nome{flex:1}
.price-item .val{flex:none;color:var(--text-muted);font-weight:700;text-decoration:line-through;text-decoration-color:var(--highlight);white-space:nowrap}
.price-item .inc{flex:none;color:var(--highlight);font-weight:800}

/* M · Balão de fala */
.bubble{position:relative;display:inline-block;font-family:var(--head);font-weight:800;text-transform:uppercase;letter-spacing:.005em;font-size:clamp(18px,3.4vw,26px);line-height:1.04;color:var(--ink);background:var(--white);border:3px solid var(--ink);border-radius:var(--radius-bubble);padding:16px 22px;box-shadow:6px 6px 0 0 var(--shadow-color)}
@media(min-width:768px){.bubble{max-width:420px;font-size:clamp(22px,2.6vw,30px);padding:20px 28px;box-shadow:8px 8px 0 0 var(--shadow-color)}}
.bubble::before,.bubble::after{content:"";position:absolute;width:0;height:0;border-style:solid}
.bubble::before{bottom:-19px;left:21px;border-width:19px 19px 0 0;border-color:var(--ink) transparent transparent transparent}
.bubble::after{bottom:-13px;left:24px;border-width:14px 14px 0 0;border-color:var(--white) transparent transparent transparent}
.bubble--right::before{left:auto;right:21px;border-width:19px 0 0 19px}
.bubble--right::after{left:auto;right:24px;border-width:14px 0 0 14px}
.bubble--tilt-l{transform:rotate(-1.5deg)}.bubble--tilt-r{transform:rotate(1.5deg)}
.bubble--side{text-transform:none;font-weight:900;font-size:clamp(18px,3vw,34px);line-height:1.08;border-width:2px;border-radius:10px;padding:14px 18px;margin-left:16px;max-width:30ch;box-shadow:4px 4px 0 var(--shadow-color);transition:transform .2s ease,box-shadow .2s ease}
.bubble--side::before{bottom:auto;top:50%;left:-14px;transform:translateY(-50%);border-width:10px 14px 10px 0;border-color:transparent var(--ink) transparent transparent}
.bubble--side::after{bottom:auto;top:50%;left:-10px;transform:translateY(-50%);border-width:8px 11px 8px 0;border-color:transparent var(--white) transparent transparent}
@media(hover:hover){.bubble--side:hover{transform:rotate(-2deg);box-shadow:6px 6px 0 var(--shadow-color)}}

/* M · Callout */
.callout{background:var(--action);color:var(--on-action);border:2px solid var(--ink);border-radius:10px;box-shadow:var(--sh-action);padding:24px 28px;max-width:560px;margin:0 auto;text-align:center}
.callout--outline{background:var(--surface-raised);color:var(--text);border-color:var(--line)}
.callout--outline .punch{font-weight:700;font-size:clamp(15px,1.8vw,21px);line-height:1.18}

/* M · Faixa-chave */
.keyband{position:relative;overflow:hidden;background:radial-gradient(130% 120% at 100% 0%,var(--brand) 0%,var(--brand) 40%,var(--ink) 100%);color:var(--white);border:2px solid var(--ink);border-radius:var(--radius-card);padding:30px 26px;box-shadow:var(--sh-card)}
.keyband .t{font-family:var(--head);font-weight:900;text-transform:uppercase;font-size:clamp(23px,5.6vw,32px);line-height:.96;margin-bottom:9px}
.keyband .d{font-size:clamp(16px,3.2vw,18px);line-height:1.44;color:var(--white);opacity:.95;max-width:46ch}

/* M · Linha de vantagem */
.feat-row{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start;padding:22px 10px;border-top:1px solid var(--hairline);border-radius:8px;margin:0 -10px;transition:background .2s ease}
.feat-row:last-child{border-bottom:1px solid var(--hairline)}
.feat-row .g{font-size:22px;line-height:1;color:var(--decor)}
.feat-row .t{font-family:var(--head);font-weight:900;text-transform:uppercase;font-size:clamp(18px,3.6vw,22px);line-height:1.05;color:var(--text);margin-bottom:6px}
.feat-row .d{font-size:clamp(15px,2.9vw,16.5px);line-height:1.5;color:var(--text-muted)}
@media(hover:hover){.feat-row:hover{background:var(--tint)}}

/* M · Item de FAQ */
.faq-item{background:var(--surface-raised);border:2px solid var(--line);border-radius:var(--radius-card);box-shadow:var(--sh-card-sm);overflow:hidden;transition:box-shadow .2s ease}
.faq-item[open]{box-shadow:var(--sh-card)}
.faq-item summary{list-style:none;cursor:pointer;padding:18px 20px;font-family:var(--head);font-weight:800;font-size:clamp(16px,2vw,20px);line-height:1.2;color:var(--text);display:flex;justify-content:space-between;align-items:center;gap:16px;transition:color .2s ease}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";color:var(--highlight);font-size:26px;font-weight:700;line-height:1;flex-shrink:0;transition:transform .25s var(--ease-out)}
.faq-item summary:hover,.faq-item[open] summary{color:var(--highlight)}
.faq-item[open] summary{border-bottom:1px solid var(--hairline)}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item summary:focus-visible{outline:3px solid var(--focus-ring);outline-offset:-3px}
.faq-item .ans{padding:16px 20px;font-size:var(--fs-body);line-height:1.68;color:var(--text-muted)}

/* M · Dica de arraste */
.drag-hint{margin:14px auto 0;width:fit-content;display:flex;align-items:center;gap:8px;padding:7px 16px;border-radius:var(--radius-pill);border:1px solid var(--hairline);background:var(--tint);font-family:var(--body);font-weight:600;font-size:12px;letter-spacing:.03em;color:var(--text-muted);white-space:nowrap}
.drag-hint .arr{display:inline-block;animation:nudge 1.7s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(7px)}}

/* M · Card de caso */
.case-card{background:var(--surface-raised);border:2px solid var(--line);border-radius:var(--radius-card);overflow:hidden;display:flex;flex-direction:column;transition:transform .2s var(--ease-out),box-shadow .2s ease}
.case-card .top{font-family:var(--body);font-weight:700;font-size:var(--fs-small);padding:11px 14px;color:var(--highlight);background:var(--tint);text-align:center}
.case-card .media{width:100%;aspect-ratio:3/2;object-fit:cover;display:block}
.case-card .bot{display:flex;align-items:center;justify-content:center;gap:7px;font-family:var(--head);font-weight:800;font-size:16px;padding:10px 14px;color:var(--on-action);background:var(--action)}
.case-card .bot svg{width:17px;height:17px;fill:currentColor}
@media(hover:hover){.case-card:hover{transform:translate(-3px,-3px);box-shadow:7px 7px 0 var(--shadow-color)}}

/* M · Card de nicho */
.niche-card{background:var(--surface-raised);border:2px solid var(--line);border-radius:var(--radius-card);box-shadow:var(--sh-card);overflow:hidden;display:flex;flex-direction:column;color:var(--text)}
.niche-card .media{aspect-ratio:4/3;border-bottom:2px solid var(--line);width:100%;display:block}
.niche-card .body-in{padding:20px;display:flex;flex-direction:column;gap:13px}
.niche-card .niche{margin:5px 0 0;font-family:var(--body);font-weight:700;font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--highlight)}
.niche-card .result{font-family:var(--body);font-size:14px;font-weight:600;line-height:1.4;color:var(--text);padding:12px 14px;border-radius:var(--radius-card);background:var(--surface);border:2px solid var(--line)}

/* M · Card de produto */
.prod-card{background:var(--surface-raised);border:2px solid var(--line);border-radius:var(--radius-card);overflow:hidden;text-align:left;transition:transform .3s var(--ease-out),box-shadow .3s ease}
.prod-card:hover{transform:translateY(-4px);box-shadow:var(--sh-card)}
.prod-card .media{width:100%;aspect-ratio:16/9;display:block;border-bottom:2px solid var(--line)}
.prod-card .body-in{padding:16px 18px}
.prod-card .tag--pill{margin-bottom:8px}
.prod-card .hd-card{font-size:clamp(16px,2vw,20px);margin-bottom:6px}

/* M · Card de passo e nó de trilha */
.step-card{background:var(--surface-raised);border:2px solid var(--line);border-radius:var(--radius-card);box-shadow:var(--sh-card-sm);padding:20px;color:var(--text)}
.step-card .num-disk{margin-bottom:14px}
.step-card .kicker--caps::after{display:none}
.step-card .hd-card{margin:4px 0 8px}
.step-card p{font-size:15px;line-height:1.32;color:var(--text-muted)}
.step-card p b{color:var(--text)}
.step-node{display:grid;grid-template-columns:auto 1fr;gap:0 20px;padding:22px 0;border-top:1px solid var(--hairline)}
.step-node:last-child{border-bottom:1px solid var(--hairline)}
.step-node .t{font-family:var(--head);font-weight:800;font-size:clamp(19px,3.4vw,26px);line-height:1.05;letter-spacing:-.01em;color:var(--text);margin-bottom:6px}
.step-node .d{font-size:var(--fs-body);line-height:1.5;color:var(--text-muted);max-width:56ch}

/* M · Card de cenário */
.scn-card{position:relative;overflow:hidden;border-radius:var(--radius-stamp);padding:34px 30px 28px;border:4px solid var(--ink);transition:transform .35s var(--ease-out),box-shadow .35s ease,opacity .35s ease}
.scn-card--a{background:var(--ink);border-color:var(--scn-a-edge);box-shadow:10px 10px 0 0 var(--scn-a-edge)}
.scn-card--a::before{content:"";position:absolute;inset:0;opacity:.5;pointer-events:none;background:repeating-linear-gradient(135deg,transparent,transparent 13px,rgba(255,255,255,.04) 13px,rgba(255,255,255,.04) 26px)}
.scn-card--b{background:var(--accent);border-color:var(--ink);box-shadow:var(--sh-brutal)}
.scn-card .scn-tag{display:inline-flex;align-items:center;gap:8px;font-family:var(--head);font-weight:900;text-transform:uppercase;letter-spacing:.05em;font-size:15px;padding:7px 16px;border-radius:4px;margin-bottom:20px;position:relative;z-index:2}
.scn-card--a .scn-tag{color:var(--white);background:#000;border:2px solid #000}
.scn-card--b .scn-tag{color:var(--white);background:var(--ink);border:2px solid var(--ink);box-shadow:3px 3px 0 var(--brand)}
.scn-card .scn-txt{font-size:clamp(16px,1.8vw,19px);line-height:1.4;font-weight:600;position:relative;z-index:2}
.scn-card--a .scn-txt{color:var(--muted-dark)}
.scn-card--b .scn-txt{color:var(--ink)}
.scn-traj{margin-top:22px;height:70px;width:100%;display:block;position:relative;z-index:2}
.scn-traj path{fill:none;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.scn-card--a .scn-traj path{stroke:var(--muted)}.scn-card--a .scn-traj circle{fill:var(--muted)}
.scn-card--b .scn-traj path{stroke:var(--brand)}.scn-card--b .scn-traj circle{fill:var(--white);stroke:var(--ink);stroke-width:2}

/* =========================== 3 · ORGANISMOS ========================== */

/* O · Topbar */
.topbar{background:var(--brand);border-bottom:2px solid var(--ink);padding:0 24px;height:var(--topbar-h);display:flex;align-items:center;justify-content:center;gap:12px}
.topbar-txt{font-family:var(--body);font-weight:700;font-size:clamp(12px,1.5vw,15px);letter-spacing:.04em;text-transform:uppercase;color:var(--white);line-height:1.1;text-align:center}
.topbar-txt b{font-weight:900;text-decoration:underline;text-underline-offset:2px}
.topbar .badge{background:var(--accent);color:var(--ink);box-shadow:3px 3px 0 var(--ink)}
@media(min-width:1024px){.topbar{height:46px;padding:0 36px}}

/* O · CTA fixo do rodapé */
.sticky-cta{background:var(--night);border-top:2px solid var(--accent);padding:10px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.sticky-cta .pz{color:var(--white);font-family:var(--head);line-height:1}
.sticky-cta .pz b{color:var(--accent);font-size:clamp(16px,4.6vw,20px);white-space:nowrap}
.sticky-cta .pz small{display:block;font-family:var(--body);color:var(--muted-dark);font-size:11px;margin-top:3px}

/* O · Faixa rolante */
.marquee{overflow:hidden;background:var(--action);padding:16px 0;transform:rotate(-2deg) scale(1.08);position:relative;z-index:3;border-block:2px solid var(--ink)}
@media(min-width:1024px){.marquee{transform:rotate(-2deg) scale(1.12)}}
.marquee-track{display:flex;width:max-content;animation:scroll 26s linear infinite;padding-left:24px}
.marquee:hover .marquee-track{animation-play-state:paused}
.selo{display:inline-flex;align-items:center;white-space:nowrap;font-family:var(--head);font-weight:800;text-transform:uppercase;letter-spacing:.04em;font-size:17px;color:var(--on-action)}
.selo::after{content:"✦";opacity:.6;margin:0 18px;font-size:.8em}
@media(min-width:1024px){.selo{font-size:22px}}
@keyframes scroll{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

/* O · Hero */
.hero{padding:var(--pad-sec-hero) var(--pad-x);text-align:center}
.hero .hd-hero{max-width:18ch;margin:0 auto}
.hero .qualif{max-width:52ch;margin:14px auto 0}

/* O · Lista de sintomas */
.symptom-list{max-width:480px;text-align:left;background:var(--surface-raised);border:2px solid var(--line);border-radius:var(--radius-card);padding:8px 0;box-shadow:var(--sh-card);overflow:hidden}

/* O · Lista reprovada */
.fail-list{max-width:440px;background:var(--surface-raised);border:2px solid var(--line);border-radius:var(--radius-card);padding:24px 22px 28px}
.fail-list .hd-card{margin-bottom:18px}
.fail-list .stamp-wrap{margin-top:22px;text-align:center}

/* O · Lista de preço */
.price-list{max-width:480px;display:flex;flex-direction:column;gap:7px;text-align:left}

/* O · Card de oferta */
.offer{position:relative;overflow:hidden;max-width:380px;background:var(--white);border:2px solid var(--ink);border-radius:var(--radius-card);box-shadow:var(--sh-offer);padding:34px 26px 22px;text-align:center;color:var(--ink)}
.offer::before{content:"";position:absolute;inset:0 0 auto;height:12px;background:repeating-linear-gradient(90deg,var(--brand) 0 18px,var(--ink) 18px 22px);border-bottom:2px solid var(--ink)}
.offer .price-now{color:var(--brand);margin-top:8px}
.offer .note{margin:14px auto 18px;font-size:16px;font-weight:700;line-height:1.25;max-width:23rem}
.offer .cta-sub{border-top:2px solid var(--hairline-light);padding-top:12px;margin-top:14px}

/* O · Garantia */
.guarantee{position:relative;background:var(--white);border-radius:var(--radius-card);box-shadow:var(--sh-card);border:2px solid var(--ink);border-top:5px solid var(--brand);padding:24px 22px;text-align:center;overflow:hidden;color:var(--ink)}
.guarantee .seal{width:min(220px,72%);height:auto;margin:0 auto 14px;display:block;filter:drop-shadow(5px 5px 0 #19352c)}
.guarantee .hd-block{font-size:clamp(24px,5.4vw,34px);line-height:.98;margin-bottom:13px}
.guarantee p{font-size:var(--fs-body);line-height:1.38;color:var(--muted);max-width:46ch;margin:0 auto 13px}
.guarantee p b{color:var(--ink)}
.guarantee .key{font-family:var(--head);font-weight:900;text-transform:uppercase;font-size:clamp(19px,2.9vw,24px);line-height:1.12;margin-top:18px}
@media(min-width:768px){
  .guarantee{display:grid;grid-template-columns:220px 1fr;gap:30px;align-items:center;text-align:left;max-width:740px;margin:0 auto;padding:26px 30px}
  .guarantee .seal{width:100%;margin:0}
  .guarantee p{margin-left:0}
}

/* O · FAQ */
.faq{display:flex;flex-direction:column;gap:12px}

/* O · Trilho arrastável */
.rail{position:relative}
.rail-scroll{overflow-x:auto;scroll-snap-type:x proximity;padding:4px 4px 12px;cursor:grab;user-select:none;scrollbar-width:none}
.rail-scroll::-webkit-scrollbar{height:0}
.rail-track{display:flex;gap:16px;width:max-content}
.rail-track > *{flex:0 0 240px;scroll-snap-align:center}
.rail-nav{position:absolute;inset:0 0 40px;display:flex;align-items:center;justify-content:space-between;pointer-events:none}
.rail-nav .rail-btn{pointer-events:auto}

/* O · Card de fase */
.phase{position:relative;overflow:hidden;background:var(--surface-raised);border:2px solid var(--line);border-radius:var(--radius-card);box-shadow:var(--sh-card);padding:22px;color:var(--text)}
.phase .hd-card{font-size:clamp(1.4rem,1.55vw,2rem);margin:6px 0 10px;letter-spacing:-.03em}
.phase .lead-b{font-family:var(--body);font-weight:700;font-size:16px;line-height:1.34;margin-bottom:12px;color:var(--text)}

/* O · Card de bônus */
.bonus{position:relative;background:var(--surface-raised);border-radius:var(--radius-card);padding:28px 24px 26px;overflow:hidden;border:2px solid var(--line);box-shadow:5px 5px 0 var(--shadow-color);color:var(--text);transition:border-color .2s ease,box-shadow .2s ease}
.bonus::before{content:"";position:absolute;inset:0 0 auto;height:10px;background:repeating-linear-gradient(90deg,var(--action) 0 18px,var(--hairline) 18px 22px)}
.bonus .badge{transform:rotate(-2deg);margin-bottom:14px}
.bonus .hd-card{margin-bottom:10px}
.bonus .hook{font-family:var(--head);font-weight:700;font-size:clamp(16px,2vw,18px);line-height:1.2;color:var(--highlight);margin-bottom:14px}
@media(hover:hover){.bonus:hover{animation:wiggle .42s var(--ease-out) both;box-shadow:.55rem .55rem 0 var(--shadow-color)}}
@keyframes wiggle{0%,100%{transform:translate(-.2rem,-.2rem) rotate(0deg)}28%{transform:translate(-.22rem,-.24rem) rotate(-1.2deg)}58%{transform:translate(-.18rem,-.2rem) rotate(.9deg)}82%{transform:translate(-.2rem,-.22rem) rotate(-.45deg)}}

/* O · Card-chefe */
.feature{position:relative;background:var(--surface-raised);border:2px solid var(--highlight);border-radius:var(--radius-card);overflow:hidden;box-shadow:7px 7px 0 0 var(--line);color:var(--text)}
.feature .media{width:100%;aspect-ratio:16/9;display:block;border-bottom:2px solid var(--highlight)}
.feature .body-in{padding:24px 24px 26px}
.feature .badge{margin-bottom:14px}
.feature .hd-block{font-size:clamp(26px,5.6vw,38px);line-height:.96;letter-spacing:-.02em;margin-bottom:12px}
.feature .small b{color:var(--text)}

/* O · Cenários A/B */
.scenarios{display:grid;gap:22px}
@media(min-width:640px){.scenarios{grid-template-columns:1fr 1fr;gap:28px}}
@media(hover:hover) and (min-width:768px){
  .scenarios:hover .scn-card--a{opacity:.5;transform:scale(.97)}
  .scenarios:hover .scn-card--b{transform:translateY(-8px) scale(1.02)}
}

/* O · Visor de câmera */
.viewfinder{max-width:440px;background:var(--surface-raised);border:2px solid var(--line);border-radius:var(--radius-card);padding:18px;position:relative;color:var(--text)}
.viewfinder .top{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;font-family:var(--head);font-weight:900;letter-spacing:.08em;font-size:12px}
.viewfinder .rec{display:flex;align-items:center;gap:7px;color:var(--decor)}
.viewfinder .time{font-size:13px;color:var(--text-muted);font-variant-numeric:tabular-nums}
.viewfinder::before,.viewfinder::after{content:"";position:absolute;width:18px;height:18px;border:2px solid var(--highlight);opacity:.6}
.viewfinder::before{top:10px;left:10px;border-right:none;border-bottom:none;border-radius:4px 0 0 0}
.viewfinder::after{bottom:10px;right:10px;border-left:none;border-top:none;border-radius:0 0 4px 0}
.viewfinder .row{display:flex;align-items:center;gap:12px;padding:11px 10px;margin:0 -8px;border-radius:var(--radius-card);font-size:clamp(15px,3.4vw,17px);font-weight:600;border-bottom:1px solid var(--hairline);transition:background .25s ease,padding-left .25s var(--ease-out)}
.viewfinder .row:last-child{border-bottom:none}
.viewfinder .row svg{width:16px;height:16px;color:var(--highlight)}
@media(hover:hover){.viewfinder .row:hover{background:var(--tint);padding-left:16px}}

/* O · Linha de stats */
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}

/* O · Vantagens */
.advantages{max-width:680px;margin:0 auto}
.advantages .keyband{margin-bottom:26px}

/* =========================== 4 · TEMPLATES =========================== */
.section{position:relative;padding:var(--pad-sec) var(--pad-x);overflow:hidden;background:var(--surface);color:var(--text)}
.wrap{max-width:var(--wrap);margin:0 auto;position:relative;z-index:2}
.wrap-wide{max-width:var(--wrap-wide);margin:0 auto;position:relative;z-index:2}

/* ---------- movimento ---------- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .35s ease,transform .35s var(--ease-out)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .reveal{opacity:1;transform:none}
}

/* placeholder dentro de cards: mantém o centro */
.media.ph{display:flex}

/* =====================================================================
   EXTENSÃO v4 — produto digital, dados, redes sociais, institucional,
   efeitos e transições, logo
   ===================================================================== */

/* contexto extra */
:root,[data-theme="claro"]{--field-bg:var(--white);--status-ok-bg:var(--brand);--status-ok-fg:var(--white);--chart-grid:rgba(25,53,44,.12)}
[data-theme="escuro"]{--field-bg:var(--night);--status-ok-bg:var(--accent);--status-ok-fg:var(--ink);--chart-grid:rgba(255,255,255,.12)}

/* ---------------- 1 · ÁTOMOS (produto) ---------------- */
.field{display:flex;flex-direction:column;gap:6px;font-family:var(--body)}
.field > label,.field-label{font-weight:700;font-size:13px;letter-spacing:.01em;color:var(--text)}
.field-hint{font-size:12px;color:var(--text-muted)}
.field-error{font-size:12px;font-weight:700;color:var(--text);display:flex;gap:6px;align-items:center}
.field-error::before{content:"✕";display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:4px;background:var(--attention);color:var(--ink);font-size:10px}
.input,.select,.textarea{font:500 15px/1.3 var(--body);color:var(--text);background:var(--field-bg);border:2px solid var(--line);border-radius:var(--radius-card);padding:11px 14px;width:100%;outline:none;transition:box-shadow .15s ease,transform .15s ease}
.input::placeholder,.textarea::placeholder{color:var(--text-muted)}
.input:focus,.select:focus,.textarea:focus,.input.is-focus{box-shadow:var(--sh-card-sm);transform:translate(-1px,-1px)}
.input.is-error{border-color:var(--attention);box-shadow:4px 4px 0 var(--attention)}
.input:disabled,.input.is-disabled{opacity:.45;cursor:not-allowed}
.textarea{min-height:96px;resize:vertical}
.select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 12px) 50%;background-size:6px 6px;background-repeat:no-repeat;padding-right:36px}
.check,.radio{display:inline-flex;align-items:center;gap:10px;font:600 14px var(--body);color:var(--text);cursor:pointer}
.check input,.radio input{appearance:none;width:22px;height:22px;margin:0;border:2px solid var(--line);background:var(--field-bg);display:grid;place-content:center;cursor:pointer;transition:transform .15s ease}
.check input{border-radius:6px}
.radio input{border-radius:50%}
.check input:checked{background:var(--action);box-shadow:2px 2px 0 var(--ink)}
.check input:checked::after{content:"✓";color:var(--on-action);font:900 14px/1 var(--body)}
.radio input:checked::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--action)}
.switch{display:inline-flex;align-items:center;gap:10px;font:600 14px var(--body);color:var(--text);cursor:pointer}
.switch input{appearance:none;width:46px;height:26px;margin:0;border:2px solid var(--line);border-radius:999px;background:var(--field-bg);position:relative;cursor:pointer;transition:background .2s ease}
.switch input::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:var(--line);transition:transform .2s var(--ease-out)}
.switch input:checked{background:var(--action)}
.switch input:checked::after{transform:translateX(20px);background:var(--on-action)}
.check input:focus-visible,.radio input:focus-visible,.switch input:focus-visible{outline:3px solid var(--focus-ring);outline-offset:3px}
.avatar{width:40px;height:40px;border-radius:50%;border:2px solid var(--line);background:var(--accent);color:var(--ink);display:inline-flex;align-items:center;justify-content:center;font:900 16px var(--head);flex:none}
.avatar--sm{width:28px;height:28px;font-size:12px}
.status{display:inline-flex;align-items:center;gap:6px;font:800 11px/1 var(--body);letter-spacing:.06em;text-transform:uppercase;padding:5px 9px;border-radius:var(--radius-pill);border:2px solid var(--ink)}
.status::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.status--ok{background:var(--status-ok-bg);color:var(--status-ok-fg)}
.status--warn{background:var(--attention);color:var(--ink)}
.status--off{background:var(--field-bg);color:var(--text-muted);border-color:var(--hairline)}
.tooltip{position:relative;display:inline-block;background:var(--ink);color:var(--white);font:600 12px/1.3 var(--body);padding:7px 10px;border-radius:6px;box-shadow:3px 3px 0 var(--accent)}
.tooltip::after{content:"";position:absolute;left:14px;bottom:-6px;border:6px solid transparent;border-bottom:0;border-top-color:var(--ink)}
.spinner{width:22px;height:22px;border:3px solid var(--hairline);border-top-color:var(--highlight);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.skeleton{background:linear-gradient(90deg,var(--hairline) 0%,var(--tint) 50%,var(--hairline) 100%);background-size:200% 100%;animation:shimmer 1.4s linear infinite;border-radius:6px}
@keyframes shimmer{to{background-position:-200% 0}}
.kbd{font:700 11px var(--body);padding:2px 6px;border:1.5px solid var(--line);border-bottom-width:3px;border-radius:5px;background:var(--surface-raised);color:var(--text)}

/* ---------------- 2 · MOLÉCULAS (produto + dados) ---------------- */
.tabs{display:inline-flex;gap:4px;padding:4px;border:2px solid var(--line);border-radius:10px;background:var(--surface-raised)}
.tab{font:800 13px var(--body);color:var(--text-muted);padding:8px 14px;border-radius:6px;border:0;background:transparent;cursor:pointer;transition:background .16s ease,color .16s ease}
.tab:hover{color:var(--text)}
.tab.is-active{background:var(--action);color:var(--on-action);box-shadow:2px 2px 0 var(--ink)}
.nav-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:8px;font:700 14px var(--body);color:var(--text-muted);text-decoration:none;border:2px solid transparent;transition:background .15s ease,color .15s ease}
.nav-item svg{width:20px;height:20px}
.nav-item:hover{background:var(--tint);color:var(--text)}
.nav-item.is-active{background:var(--surface-raised);color:var(--text);border-color:var(--line);box-shadow:3px 3px 0 var(--shadow-color)}
.nav-item .count{margin-left:auto;font:800 11px var(--body);background:var(--action);color:var(--on-action);border-radius:999px;padding:2px 7px}
.metric{background:var(--surface-raised);border:2px solid var(--line);border-radius:var(--radius-card);box-shadow:var(--sh-card-sm);padding:18px 18px 16px;display:flex;flex-direction:column;gap:6px;min-width:0}
.metric .m-lbl{font:700 13px var(--body);color:var(--text-muted)}
.metric .m-val{font:900 44px/1 var(--head);letter-spacing:-.01em;color:var(--text-strong)}
.metric .m-delta{font:800 12px var(--body);display:inline-flex;align-items:center;gap:6px;color:var(--text)}
.metric .m-delta .up,.metric .m-delta .down{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:4px;font-size:10px;border:1.5px solid var(--ink)}
.metric .m-delta .up{background:var(--status-ok-bg);color:var(--status-ok-fg)}
.metric .m-delta .down{background:var(--attention);color:var(--ink)}
.metric .m-spark{height:34px;margin-top:4px}
.toast{display:flex;align-items:center;gap:12px;background:var(--surface-raised);color:var(--text);border:2px solid var(--line);border-radius:var(--radius-card);box-shadow:var(--sh-card);padding:12px 14px;font:600 14px var(--body);max-width:380px}
.toast .t-ic{width:28px;height:28px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;border:2px solid var(--ink);background:var(--action);color:var(--on-action);font-weight:900;flex:none}
.toast--warn .t-ic{background:var(--attention);color:var(--ink)}
.toast .t-x{margin-left:auto;background:none;border:0;color:var(--text-muted);font-size:18px;cursor:pointer}
.table{width:100%;border-collapse:separate;border-spacing:0;font:500 14px var(--body);color:var(--text);background:var(--surface-raised);border:2px solid var(--line);border-radius:var(--radius-card);overflow:hidden}
.table th{text-align:left;font:800 11px var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);padding:12px 14px;border-bottom:2px solid var(--line);background:var(--tint)}
.table td{padding:12px 14px;border-bottom:1px solid var(--hairline);font-variant-numeric:tabular-nums}
.table tr:last-child td{border-bottom:0}
.table tr:hover td{background:var(--tint)}
.table .num{text-align:right}
.search{position:relative}
.search .input{padding-left:40px}
.search svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--text-muted)}
.qr-card{display:flex;gap:18px;align-items:center;background:var(--surface-raised);border:2px solid var(--line);border-radius:var(--radius-card);box-shadow:var(--sh-card);padding:18px}
.qr{width:120px;height:120px;border:2px solid var(--ink);border-radius:8px;background:#fff;padding:8px;flex:none}
.empty{border:2px dashed var(--hairline);border-radius:var(--radius-card);padding:28px;text-align:center;color:var(--text-muted);font:600 14px var(--body)}

/* dados / gráficos */
.chart{background:var(--surface-raised);border:2px solid var(--line);border-radius:var(--radius-card);padding:18px;color:var(--text);position:relative}
.chart-title{font:800 15px var(--body);color:var(--text);margin:0}
.chart-sub{font:500 12px var(--body);color:var(--text-muted);margin:2px 0 12px}
.chart svg{display:block;width:100%;height:auto;overflow:visible}
.chart .grid line{stroke:var(--chart-grid);stroke-width:1}
.chart .axis text,.chart .lbl text{font:600 11px var(--body);fill:var(--text-muted)}
.chart .val text,.chart text.val{font:800 12px var(--body);fill:var(--text)}
.legend{display:flex;flex-wrap:wrap;gap:14px;font:600 12px var(--body);color:var(--text);margin-top:10px}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:12px;height:12px;border-radius:3px;display:inline-block}
.chart-tip{position:absolute;pointer-events:none;background:var(--ink);color:#fff;font:700 12px/1.3 var(--body);padding:6px 9px;border-radius:6px;box-shadow:3px 3px 0 var(--accent);opacity:0;transition:opacity .12s ease;white-space:nowrap;z-index:5}
.chart-tip.on{opacity:1}
.meter{height:12px;border-radius:999px;background:var(--tint);border:2px solid var(--line);overflow:hidden}
.meter i{display:block;height:100%;background:var(--action);border-right:2px solid var(--ink)}

/* ---------------- 3 · ORGANISMOS (produto) ---------------- */
.app-shell{display:grid;grid-template-columns:232px 1fr;min-height:560px;background:var(--surface);color:var(--text);border:2px solid var(--line);border-radius:12px;overflow:hidden}
.sidebar{background:var(--night);color:#fff;padding:18px 14px;display:flex;flex-direction:column;gap:4px;border-right:2px solid var(--ink)}
.sidebar .nav-item{color:var(--muted-dark)}
.sidebar .nav-item:hover{background:var(--accent-tint);color:#fff}
.sidebar .nav-item.is-active{background:var(--ink);color:#fff;border-color:#fff;box-shadow:3px 3px 0 var(--accent)}
.sidebar .brand-slot{padding:4px 6px 18px}
.sidebar .sb-foot{margin-top:auto;display:flex;gap:10px;align-items:center;padding:12px 6px 0;border-top:1px solid var(--hairline-dark);font:600 13px var(--body)}
.topnav{display:flex;align-items:center;gap:14px;padding:14px 22px;border-bottom:2px solid var(--line);background:var(--surface-raised)}
.topnav .crumb{font:700 13px var(--body);color:var(--text-muted)}
.topnav .crumb b{color:var(--text)}
.app-main{padding:22px;display:flex;flex-direction:column;gap:18px;min-width:0}
.kpi-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.modal-backdrop{position:absolute;inset:0;background:rgba(14,33,27,.55);display:flex;align-items:center;justify-content:center}
.modal{background:var(--surface-raised);color:var(--text);border:2px solid var(--line);border-radius:12px;box-shadow:8px 8px 0 var(--shadow-color);width:min(440px,92%);padding:22px}
.modal .m-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}
.btn-ghost{font:800 14px var(--body);background:transparent;color:var(--text);border:2px solid var(--line);border-radius:8px;padding:10px 16px;cursor:pointer}
.form-card{background:var(--surface-raised);border:2px solid var(--line);border-radius:12px;box-shadow:var(--sh-card);padding:24px;display:flex;flex-direction:column;gap:16px}
.stepper{display:flex;gap:8px;align-items:center;font:800 12px var(--body);color:var(--text-muted)}
.stepper .st{display:flex;align-items:center;gap:8px}
.stepper .st b{width:26px;height:26px;border-radius:50%;border:2px solid var(--line);display:inline-flex;align-items:center;justify-content:center;background:var(--surface-raised);color:var(--text)}
.stepper .st.done b{background:var(--action);color:var(--on-action)}
.stepper .st.now{color:var(--text)}
.stepper .st.now b{background:var(--accent);color:var(--ink);box-shadow:2px 2px 0 var(--ink)}
.stepper .bar{flex:1;height:2px;background:var(--hairline);min-width:24px}

/* ---------------- REDES SOCIAIS (formatos em px reais) ---------------- */
.sm{position:relative;overflow:hidden;font-family:var(--body);color:var(--text);background:var(--surface);border:2px solid var(--ink);flex:none}
.sm--post{width:1080px;height:1350px}
.sm--story{width:1080px;height:1920px}
.sm--thumb{width:1280px;height:720px}
.sm-scale{transform-origin:top left}
.sm-pad{position:absolute;inset:96px 88px 220px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.sm .sm-kicker{font:800 30px var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--highlight)}
.sm .sm-title{font:900 128px/.9 var(--head);text-transform:uppercase;letter-spacing:-.01em;color:var(--text-strong);margin:28px 0 0}
.sm .sm-body{font:500 44px/1.3 var(--body);letter-spacing:-.02em;color:var(--text);margin-top:36px}
.sm .sm-foot{position:absolute;left:88px;right:88px;bottom:72px;display:flex;justify-content:space-between;align-items:center;font:700 30px var(--body);color:var(--text-muted)}
.sm .sm-num{font:900 260px/.8 var(--head);color:var(--highlight);letter-spacing:-.04em}
.sm .sm-cta{display:inline-flex;align-items:center;font:800 50px var(--head);text-transform:uppercase;background:var(--action);color:var(--on-action);border:4px solid var(--ink);border-radius:16px;padding:30px 54px;box-shadow:12px 12px 0 var(--line)}
.sm .safe{position:absolute;left:0;right:0;border:4px dashed var(--attention);background:rgba(237,174,85,.12);color:var(--attention);font:800 26px var(--body);display:flex;align-items:center;justify-content:center;letter-spacing:.08em;text-transform:uppercase}
.sm .dots{display:flex;gap:14px}
.sm .dots i{width:18px;height:18px;border-radius:50%;background:var(--hairline);border:3px solid var(--line)}
.sm .dots i.on{background:var(--highlight)}

/* ---------------- INSTITUCIONAL ---------------- */
.a4{width:794px;height:1123px;background:#fff;color:var(--ink);position:relative;font-family:var(--body);border:1px solid #ccc;overflow:hidden}
.a4 .lh-head{display:flex;justify-content:space-between;align-items:center;padding:44px 64px 22px;border-bottom:3px solid var(--ink)}
.a4 .lh-band{height:10px;background:repeating-linear-gradient(90deg,var(--brand) 0 18px,var(--ink) 18px 22px)}
.a4 .lh-body{padding:44px 64px;font:400 13.5px/1.6 var(--body);color:var(--ink)}
.a4 .lh-foot{position:absolute;left:0;right:0;bottom:0;padding:18px 64px 26px;border-top:2px solid var(--ink);display:flex;justify-content:space-between;font:600 10.5px/1.5 var(--body);color:var(--muted);background:#fff}
.bcard{width:504px;height:288px;border:2px solid var(--ink);border-radius:12px;position:relative;overflow:hidden;font-family:var(--body);box-shadow:6px 6px 0 var(--ink)}

/* ---------------- EFEITOS E TRANSIÇÕES ---------------- */
.fx-stagger > *{opacity:0;transform:translateY(24px);transition:opacity .35s ease,transform .35s var(--ease-out)}
.fx-stagger.in > *{opacity:1;transform:none}
.fx-stagger.in > *:nth-child(2){transition-delay:.08s}.fx-stagger.in > *:nth-child(3){transition-delay:.16s}.fx-stagger.in > *:nth-child(4){transition-delay:.24s}
.fx-tilt{transition:transform .25s var(--ease-out),box-shadow .25s ease}
.fx-tilt:hover{transform:translate(-3px,-3px) rotate(-1deg);box-shadow:9px 9px 0 var(--shadow-color)}
.fx-underline{background:linear-gradient(var(--accent),var(--accent)) 0 100%/0 30% no-repeat;transition:background-size .35s var(--ease-out)}
.fx-underline:hover,.fx-underline.on{background-size:100% 30%}
.fx-wipe{animation:wipe .5s var(--ease-out) both}
@keyframes wipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.fx-pop{animation:pop .28s var(--ease-out) both}
@keyframes pop{from{opacity:0;transform:translate(6px,6px) scale(.96)}to{opacity:1;transform:none}}
.fx-slide-up{animation:slideUp .3s var(--ease-out) both}
@keyframes slideUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.fx-fade{animation:fade .2s ease both}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* ---------------- LOGO ---------------- */
.logo{display:inline-block;height:48px;width:auto}
.logo--sm{height:32px}.logo--lg{height:72px}