/* Hermod — landing page (hermod.digital). Identidade: brand book v1.0 (out 2026)
   Azul-noite = confiança · índigo = ação · dourado = movimento (nunca botão principal nem fundo de texto longo).
   Fluxos: linha pontilhada com seta na ponta e envelope andando no caminho (.flow / .link). */
:root {
  --brand-50:#eef2ff; --brand-100:#dfe6ff; --brand-200:#c2cdfb; --brand-300:#9aaaf4; --brand-400:#6f80e9;
  --brand-500:#4c5cdb; --brand-600:#3a45c4; --brand-700:#2f389e; --brand-800:#26306f; --brand-900:#1e2a5a; --brand-950:#121a3a;
  --gold-300:#ffd866; --gold-400:#ffc933; --gold-500:#f5b301; --gold-600:#d49600;
  --slate-50:#f8fafc; --slate-100:#f1f5f9; --slate-200:#e2e8f0; --slate-300:#cbd5e1; --slate-400:#94a3b8; --slate-500:#64748b; --slate-600:#475569; --slate-800:#1e293b;
  --ok:#14966a; --ok-bg:#e7f7f0; --warn:#d9572a; --warn-bg:#fdeee7; --wait:#b7791f; --wait-bg:#fdf5e3;
  --ink:#1e2a5a; --text:#334155; --bg:#ffffff;
  --dot:var(--brand-400);
  --radius:18px; --wrap:1180px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--sans);color:var(--text);background:var(--bg);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
h3{margin:0}
code,.mono{font-family:var(--mono)}
code{font-size:.9em;background:var(--brand-50);color:var(--brand-700);padding:1px 5px;border-radius:6px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;background:#fff;color:var(--ink);padding:8px 12px;border-radius:8px;z-index:100}
.skip:focus{left:8px}
svg.ic{width:1em;height:1em;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
:focus-visible{outline:3px solid var(--gold-400);outline-offset:2px;border-radius:6px}

/* ---------- tipografia ---------- */
.eyebrow{font-family:var(--mono);font-size:13px;letter-spacing:.02em;color:var(--gold-400);margin:0 0 14px}
.eyebrow--ink{color:var(--brand-600)}
.h2{font-size:clamp(28px,4.2vw,46px);line-height:1.1;letter-spacing:-.03em;font-weight:800;color:var(--ink);margin:0 0 16px;max-width:820px;text-wrap:balance}
.h2--light{color:#fff}
.lead{font-size:clamp(17px,1.6vw,19px);color:var(--slate-600);max-width:720px;margin:0 0 40px;text-wrap:pretty}
.lead--light{color:#c9d2ef}
.small{font-size:14px;color:var(--slate-500)}
.center{text-align:center;margin-left:auto;margin-right:auto}

/* ---------- botões ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;border-radius:12px;padding:10px 16px;font-weight:600;font-size:15px;text-decoration:none;border:1px solid transparent;cursor:pointer;transition:transform .2s var(--ease),background .2s,box-shadow .2s,border-color .2s;white-space:nowrap}
.btn svg{width:18px;height:18px;transition:transform .2s var(--ease)}
.btn:hover svg{transform:translateX(3px)}
.btn--primary{background:var(--brand-600);color:#fff;box-shadow:0 8px 24px -10px rgba(58,69,196,.7)}
.btn--primary:hover{background:var(--brand-500);transform:translateY(-1px)}
.btn--ghost{color:#dfe6ff}
.btn--ghost:hover{color:#fff}
.btn--glass{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.2);backdrop-filter:blur(8px)}
.btn--glass:hover{background:rgba(255,255,255,.15)}
.btn--lg{padding:14px 22px;font-size:16px;border-radius:14px}
.ctas{display:flex;flex-wrap:wrap;gap:12px;margin:28px 0 0}
.ctas--center{justify-content:center}

/* ---------- navegação ---------- */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;transition:background .3s,backdrop-filter .3s,box-shadow .3s}
.nav.is-solid{background:rgba(18,26,58,.86);backdrop-filter:blur(14px);box-shadow:0 1px 0 rgba(255,255,255,.06)}
.nav__in{display:flex;align-items:center;gap:20px;height:68px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff;font-weight:700;font-size:19px;letter-spacing:-.03em;flex-shrink:0}
.logo img{width:34px;height:34px}
.nav__links{display:flex;gap:18px;margin-left:12px}
/* No computador o atalho LGPD fica fora do topo (a seção continua na página e no menu do celular): com o Blog, os 9 itens não cabiam */
@media (min-width:981px){.nav__links a[href="#lgpd"]{display:none}}
.nav__links a{color:#c9d2ef;text-decoration:none;font-size:14px;font-weight:500;transition:color .2s}
.nav__links a:hover{color:#fff}
.nav__end{display:flex;align-items:center;gap:10px;margin-left:auto}
.lang select{appearance:none;background:rgba(255,255,255,.08) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23c9d2ef' fill='none' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 9px center;color:#fff;border:1px solid rgba(255,255,255,.16);border-radius:10px;padding:7px 26px 7px 10px;font:600 13px var(--sans);cursor:pointer}
.lang select option{color:var(--ink)}
.nav__menu{display:none;background:none;border:0;color:#fff;font-size:24px;padding:6px;cursor:pointer}

/* ---------- abertura ---------- */
.hero{position:relative;overflow:hidden;color:#fff;padding:120px 0 170px;background:radial-gradient(1200px 600px at 75% 10%,#2b3a8f 0%,transparent 60%),radial-gradient(900px 500px at 10% 90%,#1a3a6b 0%,transparent 60%),linear-gradient(180deg,#0f1634 0%,var(--brand-950) 60%,#1a2452 100%)}
.stars{position:absolute;inset:0;pointer-events:none;opacity:.8;background-image:
  radial-gradient(1.2px 1.2px at 12% 18%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 28% 42%,#fff 50%,transparent 51%),
  radial-gradient(1.4px 1.4px at 46% 12%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 63% 30%,#fff 50%,transparent 51%),
  radial-gradient(1.2px 1.2px at 78% 8%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 91% 36%,#fff 50%,transparent 51%),
  radial-gradient(1px 1px at 6% 62%,#fff 50%,transparent 51%),radial-gradient(1.3px 1.3px at 37% 70%,#fff 50%,transparent 51%),
  radial-gradient(1px 1px at 55% 55%,#fff 50%,transparent 51%),radial-gradient(1.2px 1.2px at 84% 66%,#fff 50%,transparent 51%);
  background-size:520px 420px;animation:twinkle 6s ease-in-out infinite alternate}
.stars--soft{opacity:.45}
@keyframes twinkle{to{opacity:.35}}
.aurora{position:absolute;inset:-20% -10% auto -10%;height:70%;pointer-events:none;filter:blur(60px);opacity:.5}
.aurora i{position:absolute;border-radius:50%}
.aurora i:nth-child(1){width:45%;height:60%;left:45%;top:10%;background:#2fd3a0;opacity:.35;animation:drift 14s ease-in-out infinite alternate}
.aurora i:nth-child(2){width:40%;height:50%;left:15%;top:0;background:#5b6cff;opacity:.4;animation:drift 18s ease-in-out infinite alternate-reverse}
@keyframes drift{to{transform:translate(8%,10%) scale(1.1)}}
.hero__in{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.hero__title{font-size:clamp(38px,5.6vw,66px);line-height:1.02;letter-spacing:-.04em;font-weight:800;margin:0 0 20px;text-wrap:balance}
.hero__lead{font-size:clamp(17px,1.6vw,19px);color:#c9d2ef;max-width:560px;margin:0;text-wrap:pretty}
.hero__trust{list-style:none;display:flex;flex-wrap:wrap;gap:8px 20px;margin:26px 0 0;padding:0;font-size:14px;color:#c9d2ef}
.hero__trust li{display:flex;align-items:center;gap:7px}
.hero__trust svg{color:var(--gold-400)}
.hero__mountains{position:absolute;left:0;right:0;bottom:-1px;height:120px}
.hero__mountains svg{width:100%;height:100%}

/* mapa da abertura (fontes → Hermod → caixas) */
.hubmap{position:relative;margin:0;width:100%;max-width:520px;justify-self:center;aspect-ratio:520/560;container-type:inline-size}
.hubmap__lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.dots use{fill:none;stroke:var(--brand-300);stroke-width:3;stroke-linecap:round;stroke-dasharray:0 10;animation:march 1.2s linear infinite}
@keyframes march{to{stroke-dashoffset:-20}}
.chip,.hub,.hub__back{position:absolute;left:var(--x);top:var(--y);transform:translateX(-50%)}
.chip{width:29%;display:flex;align-items:center;justify-content:center;gap:.45em;padding:.7em .4em;border-radius:12px;font-size:clamp(10px,3cqw,15px);font-weight:600;color:var(--ink);background:#fff;box-shadow:0 10px 30px -12px rgba(0,0,0,.6);white-space:nowrap}
.chip svg{color:var(--brand-600);font-size:1.15em}
.chip--inbox{min-height:3.6em;padding-top:.4em;padding-bottom:.4em}
.chip--inbox span{white-space:normal;line-height:1.15;text-align:left}
.chip--inbox svg{color:var(--ok)}
.hub{width:46%;height:25%;display:flex;flex-direction:column;justify-content:center;gap:.6em;padding:0 1.1em;border-radius:18px;font-size:clamp(10px,2.9cqw,15px);background:linear-gradient(160deg,#26306f,#1e2a5a);border:1.5px solid rgba(245,179,1,.55);box-shadow:0 0 0 6px rgba(245,179,1,.08),0 20px 50px -18px rgba(0,0,0,.8)}
.hub__head{display:flex;align-items:center;gap:.5em;font-size:1.2em}
.hub__head img{width:1.8em;height:1.8em}
.hub ul{list-style:none;margin:0;padding:0;display:grid;gap:.35em;color:#dfe6ff}
.hub li{display:flex;align-items:center;gap:.5em}
.hub li svg{color:var(--gold-400)}
.hubmap__legend{position:absolute;left:0;right:0;top:100%;margin-top:14px;display:flex;flex-wrap:wrap;justify-content:center;gap:6px 22px;font-size:clamp(11px,2.6cqw,13.5px);color:#c9d2ef}
.hubmap__legend>span{display:inline-flex;align-items:center;gap:12px}
.hubmap__legend .env{position:static;flex:none;width:20px;height:15px}
.ans-dot{flex:none;width:10px;height:10px;border-radius:50%;background:var(--gold-500);box-shadow:0 0 0 5px rgba(245,179,1,.22)}

/* ---------- seções ---------- */
.sec{position:relative;padding:96px 0}
section[id]{scroll-margin-top:56px}
.sec--soft{background:var(--slate-50)}
.sec--night{color:#fff;overflow:hidden;background:radial-gradient(900px 500px at 80% 0%,#26306f 0%,transparent 60%),linear-gradient(180deg,var(--brand-950),#0f1634)}

/* problema */
.pains{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:36px}
.pain{background:#fff;border:1px solid var(--slate-200);border-radius:var(--radius);padding:26px}
.pain h3{font-size:19px;color:var(--ink);margin:14px 0 6px;letter-spacing:-.01em}
.pain p{margin:0;color:var(--slate-600);font-size:15.5px}
.pain__ic{display:inline-grid;place-items:center;width:46px;height:46px;border-radius:12px;font-size:22px}
.pain__ic--spam{background:var(--warn-bg);color:var(--warn)}
.pain__ic--bounce{background:#fde8ea;color:#c4323f}
.pain__ic--lgpd{background:var(--wait-bg);color:var(--wait)}
.pains__answer{display:flex;align-items:center;justify-content:center;gap:10px;margin:34px 0 0;font-size:clamp(18px,2vw,22px);font-weight:700;color:var(--ink)}
.pains__answer svg{color:var(--ok);font-size:1.3em}

/* ---------- fluxos ---------- */
.flow{display:flex;align-items:stretch;margin-top:8px}
.h2+.flow{margin-top:32px}
.node{position:relative;flex:1 1 0;min-width:0;background:#fff;border:1px solid var(--slate-200);border-radius:16px;padding:20px 18px;box-shadow:0 12px 30px -22px rgba(30,42,90,.45)}
.node h3{font-size:17px;color:var(--ink);letter-spacing:-.01em;margin:8px 0 4px}
.node p{margin:0;font-size:14.5px;color:var(--slate-600);line-height:1.5}
.node__ic{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:11px;background:var(--brand-50);color:var(--brand-600);font-size:20px}
.node__n{position:absolute;top:14px;right:16px;font:600 13px var(--mono);color:var(--brand-300)}
.node__big{font-size:30px!important;font-weight:600;color:var(--ink)!important;letter-spacing:-.02em;line-height:1.1!important;margin:4px 0 2px!important}
.node--go{border-color:var(--brand-300)}
.node--go .node__ic{background:var(--brand-600);color:#fff}
.node--ok{background:var(--ok-bg);border-color:#bfe8d6}
.node--ok .node__ic{background:#fff;color:var(--ok)}
.node--warn{background:var(--warn-bg);border-color:#f6cdbb}
.node--warn .node__ic{background:#fff;color:var(--warn)}
.node--wait{background:var(--wait-bg);border-color:#f0dcae}
.node--sm{padding:14px 16px}
.node--sm h3{margin-top:0}
.node--check{flex:1.35 1 0}
.ticks{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:5px;font-size:14px;color:var(--slate-600)}
.ticks li{position:relative;padding-left:22px;line-height:1.4}
.ticks li::before{content:"";position:absolute;left:2px;top:3px;width:12px;height:12px;border-radius:50%;border:2px solid var(--brand-300)}

/* ligação: pontilhado andando + seta + envelope */
.link{position:relative;flex:0 0 64px;align-self:center;height:30px;--c:var(--dot)}
.link::before{content:"";position:absolute;left:4px;right:9px;top:50%;height:4px;margin-top:-2px;background:radial-gradient(circle,var(--c) 1.7px,transparent 2.1px) 0 50%/10px 4px repeat-x;animation:dotsX 1s linear infinite}
.link::after{content:"";position:absolute;right:3px;top:50%;width:9px;height:9px;margin-top:-5px;border-top:2.6px solid var(--c);border-right:2.6px solid var(--c);border-radius:1px;transform:rotate(45deg)}
@keyframes dotsX{to{background-position:10px 50%}}
@keyframes dotsY{to{background-position:50% 10px}}
.env{position:absolute;width:22px;height:16px;background:url(../img/env.svg) center/contain no-repeat;filter:drop-shadow(0 3px 5px rgba(30,42,90,.3));pointer-events:none}
.link .env{left:0;top:50%;margin-top:-8px;animation:travelX 2.6s var(--ease) infinite}
@keyframes travelX{0%{left:0;opacity:0}15%,80%{opacity:1}100%{left:calc(100% - 30px);opacity:0}}
@keyframes travelY{0%{top:0;opacity:0}15%,80%{opacity:1}100%{top:calc(100% - 26px);opacity:0}}
.link--ok{--c:var(--ok)}
.link--warn{--c:var(--warn)}
.link--wait{--c:var(--wait)}
.link--gold{--c:var(--gold-500)}

/* bifurcação */
.flow--fork{align-items:center}
.fork{flex:1.1 1 0;position:relative;display:flex;flex-direction:column;gap:12px;padding-left:10px}
.fork::before{content:"";position:absolute;left:0;top:28px;bottom:28px;width:4px;background:radial-gradient(circle,var(--dot) 1.7px,transparent 2.1px) 50% 0/4px 10px repeat-y}
.fork__row{display:flex;align-items:center}
.fork__row .link{flex-basis:46px}
.aside-notes{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:28px}
.note{display:flex;gap:10px;align-items:flex-start;margin:0;padding:14px 16px;border-radius:14px;background:#fff;border:1px dashed var(--brand-200);font-size:15px;color:var(--slate-600)}
.note svg{color:var(--brand-600);font-size:20px;margin-top:2px}
.note b{color:var(--ink)}

/* fluxo no fundo escuro */
.flow--dark .node{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);box-shadow:none;backdrop-filter:blur(6px)}
.flow--dark .node h3{color:#fff}
.flow--dark .node p{color:#c9d2ef}
.flow--dark .node__ic{background:rgba(245,179,1,.14);color:var(--gold-400)}
.flow--dark{--dot:var(--brand-300)}

/* a resposta volta: arco pontilhado dourado por baixo */
.loop{margin-top:36px}
.return{position:relative;height:46px;margin:0 calc(12.5% - 8px);border:0;--c:var(--gold-500)}
.return::before{content:"";position:absolute;inset:0;border:3px dotted var(--c);border-top:0;border-radius:0 0 26px 26px}
.return::after{content:"";position:absolute;left:-7px;top:-2px;width:11px;height:11px;border-top:3px solid var(--c);border-left:3px solid var(--c);transform:rotate(45deg)}
.env--back{bottom:-9px;right:0;animation:travelBack 3.4s var(--ease) infinite}
@keyframes travelBack{0%{right:0;opacity:0}15%,80%{opacity:1}100%{right:calc(100% - 22px);opacity:0}}
.return__label{display:flex;align-items:center;justify-content:center;gap:10px;margin:22px auto 0;max-width:640px;text-align:center;color:var(--gold-300);font-weight:600;font-size:clamp(16px,1.7vw,18px)}
.return__label svg{flex:none;font-size:1.2em}

/* base: lista + quadro ilustrativo */
.base{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center}
.feats{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.feats li{display:flex;gap:12px;align-items:flex-start;font-size:16px;color:var(--text)}
.feats svg{flex:none;color:var(--brand-600);font-size:20px;margin-top:2px}
.mock{background:#fff;border:1px solid var(--slate-200);border-radius:16px;box-shadow:0 30px 70px -40px rgba(30,42,90,.55);overflow:hidden;font-size:13px}
.mock__bar{display:flex;align-items:center;gap:6px;padding:10px 14px;background:var(--slate-100);border-bottom:1px solid var(--slate-200)}
.mock__bar span{width:10px;height:10px;border-radius:50%;background:var(--slate-300)}
.mock__bar b{margin-left:10px;font-weight:500;color:var(--slate-500);font-size:12px}
.mock__tools,.mock__filters,.mock__sort,.mock__bulk{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:10px 14px 0}
.mock__search{display:flex;align-items:center;gap:6px;flex:1 1 140px;padding:6px 10px;border:1px solid var(--slate-200);border-radius:9px;color:var(--slate-400)}
.tag{display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border-radius:999px;background:var(--slate-100);color:var(--slate-600);font-weight:500;white-space:nowrap}
.tag--saved{background:var(--wait-bg);color:var(--wait)}
.tag--f{background:var(--brand-50);color:var(--brand-700)}
.tag--s{background:var(--ink);color:#fff;font-family:var(--mono);font-size:12px}
.op{font-size:11px;color:var(--brand-600)}
.mock__sort{color:var(--slate-500)}
.mock__bulk{margin:10px 14px 0;padding:8px 12px;border-radius:9px;background:var(--brand-600);color:#fff}
.mock__table{width:100%;border-collapse:collapse;margin-top:8px}
.mock__table th{text-align:left;font-weight:600;color:var(--slate-500);padding:9px 10px;border-bottom:1px solid var(--slate-200);white-space:nowrap}
.mock__table th em{font-style:normal;font-family:var(--mono);color:var(--brand-600);font-size:11px}
.mock__table td{padding:9px 10px;border-bottom:1px solid var(--slate-100);color:var(--text);white-space:nowrap}
.mock__table tr.sel td{background:var(--brand-50)}
.mock__table td:first-child,.mock__table th:first-child{width:30px;padding-left:14px}
.box{display:block;width:14px;height:14px;border:1.5px solid var(--slate-300);border-radius:4px}
.box--on{background:var(--brand-600) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5' stroke='white' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") center/10px no-repeat;border-color:var(--brand-600)}
.st{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px}
.st--ok{background:var(--ok)}
.st--off{background:var(--slate-400)}

/* reputação: 5 passos */
.flow--5 .link{flex-basis:44px}
.flow--5 .node{padding:18px 14px}

/* cartões */
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:36px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:36px}
.card{background:#fff;border:1px solid var(--slate-200);border-radius:var(--radius);padding:22px;transition:transform .25s var(--ease),box-shadow .25s,border-color .25s}
.card:hover{transform:translateY(-3px);box-shadow:0 18px 40px -26px rgba(30,42,90,.5);border-color:var(--brand-200)}
.card h3{font-size:17px;color:var(--ink);margin:14px 0 6px;letter-spacing:-.01em}
.card p{margin:0;font-size:15px;color:var(--slate-600);line-height:1.55}
.card__ic{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:12px;background:var(--brand-50);color:var(--brand-600);font-size:21px}
.card--line{border-style:dashed}

/* agências: árvore */
.agency{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center}
.tree{display:flex;flex-direction:column;align-items:center}
.node--root{flex:none;width:min(260px,80%);display:flex;align-items:center;gap:12px;background:var(--ink);border-color:var(--ink)}
.node--root h3{color:#fff;margin:0}
.node--root .node__ic{background:rgba(245,179,1,.16);color:var(--gold-400)}
.tree__kids{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:14px;width:100%;padding-top:26px}
.tree__kids::before{content:"";position:absolute;top:0;left:50%;width:4px;height:26px;margin-left:-2px;background:radial-gradient(circle,var(--dot) 1.7px,transparent 2.1px) 50% 0/4px 10px repeat-y}
.tree__kids::after{content:"";position:absolute;top:24px;left:16.66%;right:16.66%;height:4px;background:radial-gradient(circle,var(--dot) 1.7px,transparent 2.1px) 0 50%/10px 4px repeat-x}
.tree__kid{display:flex;flex-direction:column;align-items:stretch}
.link--v{flex:none;width:30px;height:50px;align-self:center}
.link--v::before{left:50%;right:auto;top:4px;bottom:9px;width:4px;height:auto;margin:0 0 0 -2px;background:radial-gradient(circle,var(--c) 1.7px,transparent 2.1px) 50% 0/4px 10px repeat-y;animation:dotsY 1s linear infinite}
.link--v::after{left:50%;right:auto;top:auto;bottom:3px;margin:0 0 0 -5px;transform:rotate(135deg)}
.link--v .env{left:50%;top:0;margin:0 0 0 -11px;animation:travelY 2.6s var(--ease) infinite}

/* preços */
.plans{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px;margin-top:8px}
.plan{position:relative;background:#fff;border:1px solid var(--slate-200);border-radius:16px;padding:22px 16px;text-align:center}
.plan h3{font-size:16px;color:var(--ink)}
.plan__price{margin:12px 0 6px;color:var(--slate-500);font-size:14px}
.plan__price b{font-size:34px;color:var(--ink);letter-spacing:-.03em;margin:0 2px}
.plan__vol{margin:0;font-size:14px;color:var(--slate-600)}
.plan__vol b{display:block;font-size:17px;color:var(--brand-700)}
.plan__extra{margin:8px 0 0;font-size:13px;color:var(--brand-600);font-weight:600}
.plan--agency{border:1.5px solid var(--brand-600);box-shadow:0 18px 40px -26px rgba(58,69,196,.7)}
.plan__tag{position:absolute;top:-11px;left:50%;transform:translateX(-50%);padding:2px 10px;border-radius:999px;background:var(--brand-600);color:#fff;font-size:11.5px;font-weight:600;white-space:nowrap}
.pricing-ctl{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px 28px;margin:6px 0 22px}
.seg{display:inline-flex;padding:3px;border:1px solid var(--slate-200);border-radius:12px;background:#fff}
.seg button{border:0;background:none;padding:8px 16px;border-radius:9px;font:inherit;font-size:14px;font-weight:600;color:var(--slate-600);cursor:pointer}
.seg button.on{background:var(--brand-600);color:#fff}
.chk{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;color:var(--text);cursor:pointer}
.chk input{width:18px;height:18px;accent-color:var(--brand-600)}
.plan{display:flex;flex-direction:column}
.plan__alt{margin:0 0 8px;font-size:12px;color:var(--slate-500);min-height:1.2em}
.plan__cta{margin-top:auto;padding-top:9px;padding-bottom:9px;font-size:14px;width:100%;justify-content:center}
.plan__price{white-space:nowrap}
#precos.is-yearly .plan .plan__price b{font-size:24px}
.plan{padding-left:12px;padding-right:12px}
.plan__vol{margin-bottom:14px}
.custom{display:grid;grid-template-columns:1.1fr 1.3fr .9fr;gap:22px;align-items:center;margin-top:18px;background:#fff;border:1.5px dashed var(--slate-300,#cbd5e1);border-radius:16px;padding:22px 24px}
.custom h3{font-size:18px;color:var(--ink);margin:0 0 6px}
.custom p{margin:0;font-size:14px;color:var(--slate-600)}
.custom__form label{display:flex;justify-content:space-between;gap:10px;font-size:13.5px;color:var(--slate-600);margin:6px 0 4px}
.custom__form label b{color:var(--brand-700);font-size:15px}
.custom__form input[type=range]{width:100%;accent-color:var(--brand-600)}
.custom__orgs{width:110px;padding:7px 10px;border:1px solid var(--slate-200);border-radius:10px;font:inherit}
.custom__price{text-align:center;display:flex;flex-direction:column}
.custom__price .plan__price{margin-top:0}
.perks{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:12px 28px;margin:28px 0 14px;padding:0;font-size:15px;color:var(--text)}
.perks li{display:flex;align-items:center;gap:8px}
.perks svg{color:var(--brand-600)}
.perks b{color:var(--ink)}

/* lenda: as quatro cenas ligadas por pontilhado dourado */
.flow--legend{align-items:stretch;margin-top:36px}
.node--img{margin:0;padding:0;overflow:hidden;display:flex;flex-direction:column}
.node--img img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:center 30%}
.node--img figcaption{padding:16px 16px 18px}
.node--img .mono{color:var(--gold-400);font-size:13px}
.node--img h3{margin-top:4px}
.flow--legend .link{flex-basis:40px}

/* perguntas */
.faq{display:grid;grid-template-columns:.7fr 1.3fr;gap:48px;align-items:start}
.qa{display:grid;gap:10px}
.qa details{background:var(--slate-50);border:1px solid var(--slate-200);border-radius:14px;padding:0 18px}
.qa summary{cursor:pointer;list-style:none;padding:16px 28px 16px 0;font-weight:600;color:var(--ink);position:relative}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"";position:absolute;right:4px;top:50%;width:9px;height:9px;margin-top:-7px;border-right:2px solid var(--brand-600);border-bottom:2px solid var(--brand-600);transform:rotate(45deg);transition:transform .2s}
.qa details[open] summary::after{transform:rotate(-135deg);margin-top:-2px}
.qa p{margin:0 0 16px;color:var(--slate-600)}

/* chamada final */
.final{position:relative;overflow:hidden;color:#fff;text-align:center;padding:110px 0;background:radial-gradient(800px 400px at 50% 0%,#2b3a8f 0%,transparent 65%),linear-gradient(180deg,#1a2452,var(--brand-950))}
.final__in{position:relative;display:flex;flex-direction:column;align-items:center}
.final__trail{width:min(420px,80%);margin-bottom:18px}
.link--wide{flex:none;width:100%}
.final__mark{width:64px;height:64px;margin-bottom:22px}
.final .h2{margin-left:auto;margin-right:auto}

/* rodapé */
.foot{background:#0d1330;color:#c9d2ef;padding:30px 0}
.foot__in{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px}
.foot__links{display:flex;gap:20px;font-size:14px}
.foot__links a{text-decoration:none}
.foot__links a:hover{color:#fff}
.foot__copy{margin:0 0 0 auto;font-size:13px;color:#8d98c4}

/* ---------- entrada ao rolar (só com JS; sem JS tudo aparece) ---------- */
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .reveal.in{opacity:1;transform:none}

/* ---------- telas menores ---------- */
@media (max-width:1100px){
  .plans{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:22px}
  .custom{grid-template-columns:1fr;text-align:left}
  .grid4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:980px){
  .nav__links{display:none;position:absolute;top:68px;left:0;right:0;flex-direction:column;gap:0;margin:0;padding:8px 24px 16px;background:rgba(18,26,58,.97);backdrop-filter:blur(14px)}
  .nav__links.open{display:flex}
  .nav__links a{padding:12px 0;font-size:16px;border-bottom:1px solid rgba(255,255,255,.06)}
  .nav__menu{display:block}
  .nav__login{display:none}
  .hero{padding:104px 0 200px}
  .hero__in,.base,.agency,.faq{grid-template-columns:1fr;gap:40px}
  .hubmap{max-width:460px}
  /* fluxos viram verticais */
  .flow,.flow--fork{flex-direction:column;align-items:stretch}
  .flow .node{flex:none}
  .flow>.link,.fork__row>.link{flex:none;width:30px;height:48px;align-self:center}
  .flow>.link::before,.fork__row>.link::before{left:50%;right:auto;top:4px;bottom:9px;width:4px;height:auto;margin:0 0 0 -2px;background:radial-gradient(circle,var(--c) 1.7px,transparent 2.1px) 50% 0/4px 10px repeat-y;animation:dotsY 1s linear infinite}
  .flow>.link::after,.fork__row>.link::after{left:50%;right:auto;top:auto;bottom:3px;margin:0 0 0 -5px;transform:rotate(135deg)}
  .flow>.link .env,.fork__row>.link .env{left:50%;top:0;margin:0 0 0 -11px;animation:travelY 2.6s var(--ease) infinite}
  .fork{padding-left:0;gap:0}
  .fork::before{display:none}
  .fork__row{flex-direction:column;align-items:stretch}
  .fork__row .node{flex:none}
  .flow--legend .node--img{max-width:520px;align-self:center;width:100%}
  .return{display:none}
  .return__label{margin-top:26px}
  .aside-notes{grid-template-columns:1fr}
}
@media (max-width:760px){
  .sec{padding:72px 0}
  .pains,.grid3{grid-template-columns:1fr}
  .grid4{grid-template-columns:1fr}
  .plans{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tree__kids{grid-template-columns:1fr;gap:0;padding-top:0}
  .tree__kids::before,.tree__kids::after{display:none}
  .mock{font-size:12px}
  .mock__table th:nth-child(4),.mock__table td:nth-child(4){display:none}
  .foot__copy{margin-left:0}
}
@media (max-width:560px){
  .wrap{padding:0 16px}
  .nav__cta{display:none}
  .ctas .btn{flex:1 1 100%;justify-content:center}
}

/* ---------- novidades (17/10/2026): workflows, painel, ajuda e suporte ---------- */
/* caixa do Hermod na abertura com 4 itens: mais compacta */
.hub{gap:.45em}
.hub ul{gap:.22em;line-height:1.3}
.hub li span{white-space:nowrap}
/* menu com 7 links: não quebra a linha; em telas médias fica mais justo */
.nav__links a{white-space:nowrap}
@media (max-width:1240px) and (min-width:981px){
  .nav__in{gap:14px}
  .nav__links{gap:14px;margin-left:4px}
  .nav__links a{font-size:13.5px}
  .nav__links a[href="#lgpd"]{display:none}
}
@media (max-width:1080px) and (min-width:981px){
  .nav__links a[href="#perguntas"]{display:none}
  .lang select{padding-right:22px}
}
/* selo "Novo" na abertura */
.news{display:inline-flex;align-items:center;gap:10px;margin:0 0 18px;padding:5px 12px 5px 5px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);color:#dfe6ff;font-size:13.5px;font-weight:500;text-decoration:none;transition:background .2s,border-color .2s}
.news:hover{background:rgba(255,255,255,.14);border-color:rgba(245,179,1,.5)}
.news b{padding:3px 9px;border-radius:999px;background:var(--gold-500);color:var(--brand-950);font-size:11.5px;font-weight:700;letter-spacing:.02em;text-transform:uppercase}
.news svg{width:15px;height:15px;color:var(--gold-400);transition:transform .2s var(--ease)}
.news:hover svg{transform:translateX(3px)}
.btn--outline{border-color:var(--brand-300);color:var(--brand-700);background:#fff}
.btn--outline:hover{border-color:var(--brand-600);background:var(--brand-50)}

/* workflows: texto + quadro do editor */
.wfx{display:grid;grid-template-columns:.95fr 1.05fr;gap:56px;align-items:center}
.wfx .feats b{color:var(--ink)}
.wfmock{background:#fff;border:1px solid var(--slate-200);border-radius:16px;box-shadow:0 30px 70px -40px rgba(30,42,90,.55);overflow:hidden}
.wfmock__in{display:flex;flex-direction:column;align-items:stretch;padding:18px 20px 22px;background:linear-gradient(180deg,#fff,var(--slate-50))}
.wfmock .link--v{height:34px}
.wfs{position:relative;display:flex;align-items:center;gap:12px;padding:11px 14px;border:1px solid var(--slate-200);border-radius:12px;background:#fff;box-shadow:0 6px 18px -14px rgba(30,42,90,.5)}
.wfs div{min-width:0;display:flex;flex-direction:column}
.wfs small{font:600 10.5px var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--slate-400)}
.wfs b{font-size:14.5px;font-weight:600;color:var(--ink);line-height:1.3}
.wfs__ic{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--brand-50);color:var(--brand-600);font-size:17px}
.wfs__ic--mail{background:#e8f1ff;color:#2563eb}
.wfs__ic--wait{background:var(--wait-bg);color:var(--wait)}
.wfs__ic--if{background:#f3e8ff;color:#7e3fd0}
.wfs--trigger{border-color:var(--brand-300);box-shadow:0 0 0 4px var(--brand-50)}
.wfs--trigger .wfs__ic{background:var(--brand-600);color:#fff}
.wfs--goal{margin-top:10px;border-style:dashed;border-color:#9fdcc2;background:var(--ok-bg)}
.wfs--goal .wfs__ic{background:#fff;color:var(--ok)}
.wfs--goal small{color:var(--ok)}
.wfs__badge{margin-left:auto;flex:none;padding:3px 9px;border-radius:999px;background:var(--slate-100);color:var(--slate-600);font:500 12px var(--sans);font-style:normal;white-space:nowrap}
.wfs__badge--ok{background:var(--ok-bg);color:var(--ok)}
.wfs--goal .wfs__badge{background:#fff;color:var(--ok)}
.wfs--sm{padding:9px 12px}
.wfs--sm .wfs__ic{width:28px;height:28px;font-size:14px}
.wfs--sm b{font-size:13.5px}
.wfmock__fork{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:10px}
.wfmock__branch{display:flex;flex-direction:column;align-items:stretch;padding:10px;border:1.5px dashed var(--slate-300);border-radius:14px;background:rgba(248,250,252,.8)}
.wfmock__branch--yes{border-color:#9fdcc2;background:rgba(231,247,240,.55)}
.wfmock__branch>p{margin:0;text-align:center;font:700 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--slate-500)}
.wfmock__branch--yes>p{color:var(--ok)}
.wfmock__branch .link--v{height:30px}
.wfx__lists{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:56px}
.mini-h{font-size:15px;font-weight:700;color:var(--ink);margin:0 0 12px}
.pills{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.pills li{padding:7px 13px;border-radius:999px;background:#fff;border:1px solid var(--brand-200);color:var(--brand-800);font-size:14px;font-weight:500}
.pills--soft li{background:var(--brand-50);border-color:transparent;color:var(--brand-700)}
.sub-h{font-size:clamp(20px,2.2vw,24px);letter-spacing:-.02em;font-weight:800;color:var(--ink);margin:64px 0 18px;text-align:center}
.tpls{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.tpl{position:relative;background:#fff;border:1px solid var(--slate-200);border-radius:var(--radius);padding:20px;transition:transform .25s var(--ease),box-shadow .25s,border-color .25s}
.tpl:hover{transform:translateY(-3px);box-shadow:0 18px 40px -26px rgba(30,42,90,.5);border-color:var(--brand-200)}
.tpl h3{font-size:17px;color:var(--ink);margin:12px 0 6px}
.tpl p{margin:0;font-size:14.5px;color:var(--slate-600);line-height:1.5}
.tpls+.small{margin-top:16px}
.wfx__more{margin-top:44px}
.funnel{display:grid;gap:5px;margin-top:16px}
.funnel span{display:block;height:8px;width:var(--w);border-radius:99px;background:linear-gradient(90deg,var(--brand-600),var(--brand-300))}

/* painel: três destaques abaixo do fluxo de resposta */
.dash{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:40px}
.dash__item{display:flex;gap:12px;align-items:flex-start;padding:16px 18px;border-radius:14px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:#c9d2ef;font-size:15px;line-height:1.5}
.dash__item b{color:#fff}
.dash__item svg{flex:none;color:var(--gold-400);font-size:20px;margin-top:2px}

/* ajuda e suporte: texto + quadro com checklist, tour e chamado */
.support{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.support .feats b{color:var(--ink)}
.support .btn--outline{margin-top:26px}
.supmock{position:relative;padding:8px 0 40px}
.fs{background:#fff;border:1px solid var(--slate-200);border-radius:16px;box-shadow:0 30px 70px -40px rgba(30,42,90,.55);overflow:hidden;max-width:440px}
.fs__head{display:flex;align-items:center;gap:12px;padding:14px 18px;background:var(--brand-50);border-bottom:1px solid var(--slate-200)}
.fs__head svg{color:var(--brand-600);font-size:20px}
.fs__head div{display:flex;flex-direction:column}
.fs__head b{font-size:14.5px;color:var(--ink)}
.fs__head small{font-size:12.5px;color:var(--slate-500)}
.fs__bar{height:6px;background:var(--slate-100)}
.fs__bar span{display:block;height:100%;width:60%;background:var(--brand-600)}
.fs__list{list-style:none;margin:0;padding:6px 0}
.fs__list li{display:flex;align-items:center;gap:10px;padding:9px 18px;font-size:14px;color:var(--text)}
.fs__list li svg{flex:none;font-size:18px;color:var(--slate-300)}
.fs__list li.done span{color:var(--slate-400);text-decoration:line-through;text-decoration-color:var(--slate-300)}
.fs__list li.done svg{color:var(--ok)}
.fs__list li.next{background:var(--brand-50)}
.fs__list li.next svg{color:var(--brand-500)}
.fs__list em{margin-left:auto;padding:4px 10px;border-radius:8px;background:var(--brand-600);color:#fff;font-style:normal;font-size:12.5px;font-weight:600;white-space:nowrap}
.tip{position:absolute;right:0;top:58px;z-index:2;width:240px;padding:14px 16px;border-radius:14px;background:#fff;border:1px solid var(--slate-200);box-shadow:0 0 0 3px var(--brand-300),0 24px 50px -24px rgba(30,42,90,.7);font-size:13.5px;color:var(--slate-600)}
.tip b{display:block;color:var(--ink);font-size:14.5px;margin:2px 0 4px}
.tip p{margin:0}
.tip .tip__n{font-size:11.5px;font-weight:600;color:var(--brand-600)}
.tip__btn{display:inline-block;margin-top:10px;padding:5px 12px;border-radius:8px;background:var(--brand-600);color:#fff;font-size:12.5px;font-weight:600}
.ticket{position:relative;margin:22px 0 0 36px;max-width:420px;padding:14px 16px;border-radius:16px;background:var(--ink);color:#dfe6ff;box-shadow:0 24px 50px -24px rgba(18,26,58,.9)}
.ticket__head{display:flex;align-items:center;gap:8px;font-size:13px;color:#fff;margin-bottom:10px}
.ticket__head svg{color:var(--gold-400)}
.ticket__msg{margin:6px 0 0;padding:8px 12px;border-radius:12px;background:rgba(255,255,255,.08);font-size:13.5px;line-height:1.45}
.ticket__msg--me{margin-left:40px;background:var(--brand-600);color:#fff}
.ticket__msg b{color:var(--gold-300)}

@media (max-width:1100px){
  .tpls{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:980px){
  .wfx,.support{grid-template-columns:1fr;gap:40px}
  .wfx__lists{grid-template-columns:1fr;margin-top:40px}
  .dash{grid-template-columns:1fr}
  .wfmock .link--v,.wfmock__branch .link--v{width:30px}
  .tip{position:relative;right:auto;top:auto;width:auto;max-width:300px;margin:-18px 0 0 auto}
  .ticket{margin:16px 0 0}
}
@media (max-width:560px){
  .tpls{grid-template-columns:1fr}
  .wfmock__in{padding:14px 12px 16px}
  .wfmock__fork{gap:8px}
  .wfs{gap:9px;padding:9px 10px}
  .wfs__badge{display:none}
  .news span{white-space:normal}
  .ticket__msg--me{margin-left:16px}
  /* rodapé e botão do teste grátis quebram a linha (antes passavam da largura da tela) */
  .foot__links{flex-wrap:wrap;gap:10px 18px}
  .trial-cta .btn{white-space:normal;text-align:center;justify-content:center}
}

/* ---------- reduzir movimento ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js .reveal{opacity:1;transform:none}
  .link .env{left:calc(50% - 15px)}
  .link--v .env{left:50%;top:calc(50% - 12px)}
  .env--back{right:50%}
}
@media (prefers-reduced-motion:reduce) and (max-width:980px){
  .flow>.link .env,.fork__row>.link .env{left:50%;top:calc(50% - 12px)}
}

/* Aviso de cookies (Analytics só depois de aceitar) */
.cookies{position:fixed;left:16px;right:16px;bottom:16px;z-index:60;max-width:760px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;padding:16px 20px;border-radius:14px;background:#121A3A;color:#e6ebfa;border:1px solid rgba(255,255,255,.12);box-shadow:0 18px 50px rgba(5,10,30,.45)}
.cookies[hidden]{display:none}
.cookies__text{flex:1 1 320px;margin:0;font-size:14px;line-height:1.5}
.cookies__text a{color:#fff;text-decoration:underline}
.cookies__btns{display:flex;gap:10px;flex-wrap:wrap}
.foot__btn{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer}
.foot__btn:hover{color:#fff}
.trial-cta{margin:26px 0 4px}

/* editor de e-mails: texto + quadro com um e-mail montado, a paleta de blocos e a conferência */
.editor{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.editor .feats b{color:var(--ink)}
.editor .btn--outline{margin-top:26px}
.edmock{position:relative;padding:40px 0 64px 46px}
.em{position:relative;z-index:1;max-width:400px;background:#fff;border:1px solid var(--slate-200);border-radius:16px;box-shadow:0 30px 70px -40px rgba(30,42,90,.55);overflow:hidden;font-size:13px;color:var(--slate-600)}
.em__logo{display:flex;align-items:center;justify-content:center;gap:8px;padding:14px;color:#134e4a;font-size:15px}
.em__mark{width:22px;height:22px;border-radius:6px;background:#0f766e;box-shadow:inset 0 -6px 0 #f5b301}
.em__hero{position:relative;padding:30px 18px 22px;text-align:left;background:#0f766e url(../img/editor/banner.jpg) center/cover no-repeat}
.em__box{display:inline-block;padding:10px 16px;border-radius:10px;background:rgba(0,0,0,.42);color:#fff}
.em__box b{display:block;font-size:19px;line-height:1.2}
.em__box small{font-size:12px;opacity:.9}
.em__btn{display:table;margin:12px 0 0;padding:7px 16px;border-radius:7px;background:#0f766e;color:#fff;font-weight:700;font-size:12.5px;box-shadow:0 0 0 2px rgba(255,255,255,.35)}
.em__coupon{margin:14px 18px 4px;padding:8px;border:2px dashed #0f766e;border-radius:10px;background:#fff8e1;text-align:center}
.em__coupon small{display:block;font-size:11px}
.em__coupon b{font-family:var(--mono);letter-spacing:3px;color:var(--ink);font-size:15px}
.em__prods{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:12px 18px 6px;text-align:center}
.em__prods b{display:block;margin-top:6px;color:var(--ink);font-size:12.5px}
.em__prods small{font-size:11.5px;color:var(--ink)}
.em__prods s{color:var(--slate-400);margin-right:3px}
.em__p{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:9px}
.em__social{display:flex;justify-content:center;gap:7px;padding:10px 0 16px}
.em__social i{width:18px;height:18px;border-radius:50%;background:#e4405f}
.em__social i:nth-child(2){background:#0866ff}.em__social i:nth-child(3){background:#0a66c2}
.pal{position:absolute;right:0;top:42px;z-index:2;width:210px;padding:12px;border-radius:14px;background:#fff;border:1px solid var(--slate-200);box-shadow:0 0 0 3px var(--brand-300),0 24px 50px -24px rgba(30,42,90,.7)}
.pal__t{margin:0 0 8px;font-size:12px;font-weight:600;color:var(--brand-600)}
.pal__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.pal__grid span{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 2px;border:1px solid var(--slate-200);border-radius:9px;color:var(--slate-600)}
.pal__grid svg{font-size:17px;color:var(--brand-600)}
.pal__grid em{font-style:normal;font-size:10.5px;font-weight:500}
.chk-ok{position:absolute;right:16px;bottom:8px;z-index:2;display:flex;align-items:center;gap:8px;padding:10px 14px;border-radius:12px;background:var(--ink);color:#fff;font-size:13px;box-shadow:0 24px 50px -24px rgba(18,26,58,.9)}
.chk-ok svg{color:#4ade80;font-size:18px}
/* fotos soltas ao redor do e-mail (polaroides inclinadas, atrás do e-mail) */
.edph{position:absolute;z-index:0;margin:0;width:156px;padding:6px 6px 22px;background:#fff;border-radius:6px;box-shadow:0 22px 44px -22px rgba(30,42,90,.6)}
.edph img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:3px}
.edph--1{left:0;top:0;transform:rotate(-9deg)}
.edph--2{left:-34px;top:300px;transform:rotate(-7deg);width:136px}
.edph--3{right:-6px;top:268px;transform:rotate(8deg);width:140px}
.edph--4{right:-30px;top:560px;transform:rotate(-6deg);width:132px}
@media (prefers-reduced-motion:no-preference){
  .edph{transition:transform .5s var(--ease)}
  .edmock:hover .edph--1{transform:rotate(-12deg) translate(-6px,-4px)}
  .edmock:hover .edph--2{transform:rotate(10deg) translate(-6px,4px)}
  .edmock:hover .edph--3{transform:rotate(11deg) translate(6px,0)}
  .edmock:hover .edph--4{transform:rotate(-8deg) translate(0,6px)}
}
/* 31/10/2026: ícones e desenhos no e-mail ilustrativo do editor */
.em__perks{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:12px 18px 4px;text-align:center}
.em__perks img{display:block;width:30px;height:30px;margin:0 auto 4px}
.em__perks b{display:block;color:var(--ink);font-size:11.5px;line-height:1.25}
.em__contacts{padding:8px 18px 2px;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:12px;color:var(--ink)}
.em__contacts p{margin:0;display:flex;align-items:center;gap:7px}
.em__contacts img{width:15px;height:15px}
.em__wa{display:flex;align-items:center;gap:7px;width:fit-content;margin:10px auto 0;padding:7px 16px;border-radius:999px;background:#25d366;color:#fff;font-weight:700;font-size:12.5px}
.em__wa img{width:15px;height:15px}
.edph--draw img{object-fit:contain;background:#fff}
.bank{position:absolute;left:-64px;bottom:58px;z-index:2;width:178px;padding:10px;border-radius:14px;background:#fff;border:1px solid var(--slate-200);box-shadow:0 24px 50px -24px rgba(30,42,90,.7)}
.bank__t{display:flex;align-items:center;gap:6px;margin:0 0 7px;font-size:12px;font-weight:600;color:var(--brand-600)}
.bank__t svg{font-size:15px}
.bank__tabs{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:7px}
.bank__tabs em{font-style:normal;font-size:10px;font-weight:500;padding:2px 7px;border-radius:999px;background:var(--slate-100);color:var(--slate-600)}
.bank__tabs em.on{background:var(--brand-50);color:var(--brand-700);box-shadow:inset 0 0 0 1px var(--brand-300)}
.bank__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.bank__grid img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:contain;border:1px solid var(--slate-200);border-radius:6px;background:#fff}

/* 31/10/2026: workflow em tela livre (caixas e setas, escala junto com a largura: unidades cqw) */
.cvx{padding:12px 14px 16px;background:linear-gradient(180deg,#fff,var(--slate-50))}
.cvx__tools{display:flex;gap:6px;margin-bottom:8px}
.cvx__tools span{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:8px;border:1px solid var(--slate-200);background:#fff;color:var(--slate-600);font-size:12px;font-weight:500}
.cvx__tools em{font-style:normal}
.cvx__tools .cvx__add{background:var(--brand-600);border-color:var(--brand-600);color:#fff}
.cvx__goal{display:flex;align-items:center;gap:8px;margin-bottom:8px;padding:7px 10px;border:1.5px dashed #9fdcc2;border-radius:10px;background:var(--ok-bg);color:var(--ok);font-size:12.5px}
.cvx__goal em{margin-left:auto;font-style:normal;padding:2px 8px;border-radius:999px;background:#fff;font-size:11.5px}
.cv{position:relative;container-type:inline-size;aspect-ratio:520/470;border:1px solid var(--slate-200);border-radius:12px;background:#f8fafc radial-gradient(circle,#cbd5e1 1px,transparent 1.3px) 0 0/16px 16px;overflow:hidden}
.cv__edges{position:absolute;inset:0;width:100%;height:100%}
.cv__e{fill:none;stroke:#64748b;stroke-width:2;stroke-linecap:round;stroke-dasharray:1 7;animation:cvDash 1s linear infinite}
.cv__e--yes{stroke:#10b981}
.cv__e--loop{stroke:#d99a00;stroke-width:2.2}
@keyframes cvDash{to{stroke-dashoffset:-8}}
.cvb{position:absolute;width:36.5%;height:11.54cqw;box-sizing:border-box;display:flex;align-items:center;gap:1.8cqw;padding:1.6cqw 2cqw;border:1px solid var(--slate-200);border-radius:2.2cqw;background:#fff;box-shadow:0 6px 18px -14px rgba(30,42,90,.55)}
.cvb>div{min-width:0;display:flex;flex-direction:column}
.cvb small{font:600 1.75cqw var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--slate-400)}
.cvb b{font-size:2.6cqw;font-weight:600;line-height:1.25;color:var(--ink)}
.cvb>i:first-child{flex:none;display:grid;place-items:center;width:6.2cqw;height:6.2cqw;border-radius:1.8cqw;background:var(--brand-50);color:var(--brand-600);font-size:3.3cqw}
.cvb em{position:absolute;right:2cqw;bottom:-2.4cqw;font-style:normal;padding:.3cqw 1.6cqw;border-radius:999px;background:var(--ok-bg);color:var(--ok);font-size:1.9cqw;font-weight:500}
.cvb__ic--mail{background:#e8f1ff !important;color:#2563eb !important}
.cvb__ic--wait{background:var(--wait-bg) !important;color:var(--wait) !important}
.cvb__ic--if{background:#f3e8ff !important;color:#7e3fd0 !important}
.cvb__ic--list{background:var(--ok-bg) !important;color:var(--ok) !important}
.cvb--trigger{border-color:var(--brand-300);box-shadow:0 0 0 3px var(--brand-50)}
.cvb--trigger>i:first-child{background:var(--brand-600);color:#fff}
.cvb--if{height:12.7cqw;padding-bottom:3.6cqw}
.cvb__yn{position:absolute;left:3cqw;right:3cqw;bottom:.8cqw;display:flex;justify-content:space-between;font:700 1.7cqw var(--mono);text-transform:uppercase}
.cvb__yn u{text-decoration:none;color:var(--slate-500)}
.cvb__yn u:first-child{color:var(--ok)}
.cvb__hand{position:absolute;right:-2.6cqw;bottom:-3.4cqw;font-size:4.6cqw;color:var(--ink);filter:drop-shadow(0 2px 2px rgba(0,0,0,.25))}
.cv__loop{position:absolute;right:.6%;top:58%;transform:translateX(0);padding:.4cqw 1.6cqw;border-radius:999px;background:#fff8e1;color:#a16c00;font-size:1.9cqw;font-weight:600;box-shadow:0 0 0 1px #f5d27a;white-space:nowrap}
@media (prefers-reduced-motion:no-preference){
  .cvb--drag{animation:cvDrag 4.5s var(--ease) infinite}
  @keyframes cvDrag{0%,55%,100%{transform:translate(0,0)}20%,40%{transform:translate(2.2cqw,-1.4cqw) rotate(-1.5deg);box-shadow:0 18px 30px -14px rgba(30,42,90,.6)}}
}
@media (prefers-reduced-motion:reduce){ .cv__e{animation:none} }

@media (max-width:1200px){
  .bank{position:relative;left:auto;top:auto;bottom:auto;width:auto;max-width:400px;margin:16px 0 0}
  .bank__grid{grid-template-columns:repeat(6,1fr)}
  .edph--4{right:0}
  .pal{position:relative;z-index:2;top:auto;right:auto;width:auto;max-width:400px;margin:16px 0 0}
  .pal__grid{grid-template-columns:repeat(6,1fr)}
}
@media (max-width:980px){
  .editor{grid-template-columns:1fr;gap:40px}
}
@media (max-width:560px){
  .em__hero{text-align:center}
  .em__btn{margin:12px auto 0}
  .edmock{padding:28px 0 8px 0}
  .edph--1{left:-8px;top:0;width:110px}
  .edph--2,.edph--4{display:none}
  .edph--3{right:-8px;top:0;width:104px}
  .em{margin-top:34px}
  .pal{position:relative;top:auto;right:auto;width:auto;margin:16px 0 0}
  .pal__grid{grid-template-columns:repeat(3,1fr)}
  .chk-ok{position:relative;right:auto;bottom:auto;margin-top:14px;width:fit-content}
  .em{max-width:none}
  .bank__grid{grid-template-columns:repeat(3,1fr)}
}