/* =========================================================================
   OMNIBASE · SITE — Home (plataforma)
   Complementa site-crm.css. Componentes próprios da home:
   - Mockup "Visão geral" do hero (.hm*)
   - Cartões de módulo (.modgrid / .mcard)
   - Diagrama de conexão entre módulos (.flowchain)
   ========================================================================= */

/* ---- Header da home: marca sem sufixo de módulo ---- */
.hdr__home{position:relative;padding-left:13px;font-size:13px;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;color:rgba(255,255,255,.62);white-space:nowrap}
.hdr__home::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);height:16px;width:1px;background:rgba(255,255,255,.28)}

/* ============================ HERO MOCKUP — Visão geral ============================ */
.hm__top{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:18px}
.hm__hi{font-size:19px;font-weight:680;letter-spacing:-.02em;color:var(--ink-900)}
.hm__hi small{display:block;font-size:12.5px;font-weight:500;color:var(--ink-400);margin-top:2px;letter-spacing:0}
.hm__search{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-400);
  background:#fff;border:1px solid var(--ink-100);border-radius:var(--r-pill);padding:8px 14px;min-width:190px}
.hm__search .icon{width:15px;height:15px}

.hm__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}
.hmtile{position:relative;background:#fff;border:1px solid var(--ink-100);border-radius:13px;padding:14px;
  box-shadow:var(--shadow-card-1);overflow:hidden}
.hmtile__hd{display:flex;align-items:center;gap:9px;margin-bottom:11px}
.hmtile__ic{width:32px;height:32px;border-radius:9px;flex:none;display:grid;place-items:center;
  background:var(--accent-soft);color:var(--green-deep-700)}
.hmtile__ic .icon{width:18px;height:18px}
.hmtile__nm{font-size:13px;font-weight:650;letter-spacing:-.01em;color:var(--ink-900)}
.hmtile__tag{font-size:10px;font-weight:600;color:var(--ink-400);margin-top:1px}
.hmtile__v{font-size:23px;font-weight:730;letter-spacing:-.03em;color:var(--ink-900);line-height:1}
.hmtile__v .cur{font-size:13px;color:var(--ink-400);font-weight:600;margin-right:1px}
.hmtile__ft{font-size:11px;color:var(--ink-500);margin-top:7px;display:flex;align-items:center;gap:6px}
.hmtile__soon{position:absolute;top:11px;right:12px;font-size:9px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-400);background:var(--paper-2);padding:3px 8px;border-radius:var(--r-pill)}
.hmtile.is-soon{background:var(--paper);border-style:dashed}
.hmtile.is-soon .hmtile__ic{background:var(--paper-2);color:var(--ink-400)}
.hmtile.is-soon .hmtile__v{color:var(--ink-300)}
/* mini barras dentro do tile */
.hmbars{display:flex;align-items:flex-end;gap:4px;height:30px;margin-top:9px}
.hmbars i{flex:1;border-radius:3px 3px 0 0;background:var(--accent-strong);transform:scaleY(0);transform-origin:bottom;
  transition:transform .8s var(--ease)}
.reveal-chart.in .hmbars i{transform:scaleY(1)}
.hmbars i:nth-child(1){transition-delay:.05s}.hmbars i:nth-child(2){transition-delay:.12s}
.hmbars i:nth-child(3){transition-delay:.19s}.hmbars i:nth-child(4){transition-delay:.26s}
.hmbars i:nth-child(5){transition-delay:.33s}.hmbars i:nth-child(6){transition-delay:.40s}
.hmbars i.hl{background:var(--green-deep-600)}

/* ============================ CARTÕES DE MÓDULO ============================ */
.modgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.mcard{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--ink-100);
  border-radius:var(--r-xl);padding:26px 24px 22px;box-shadow:var(--shadow-card-1);overflow:hidden;
  transition:transform .3s var(--ease),box-shadow .3s,border-color .3s}
.mcard::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;transform:scaleX(0);transform-origin:left;
  background:linear-gradient(90deg,var(--accent),var(--green-vibrant-600));transition:transform .4s var(--ease)}
.mcard:hover{transform:translateY(-5px);box-shadow:var(--shadow-card-2);border-color:var(--ink-200)}
.mcard:hover::before{transform:scaleX(1)}
.mcard__hd{display:flex;align-items:center;gap:13px;margin-bottom:16px}
.mcard__ic{width:50px;height:50px;border-radius:14px;flex:none;display:grid;place-items:center;
  background:var(--green-deep-700);color:var(--accent);box-shadow:0 12px 28px -14px rgba(11,46,34,.6)}
.mcard__ic .icon{width:25px;height:25px;stroke-width:2}
.mcard__tag{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--green-deep-600)}
.mcard__nm{font-size:22px;font-weight:700;letter-spacing:-.02em;color:var(--ink-900);line-height:1.1;margin-top:2px}
.mcard__badge{margin-left:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:5px;
  font-size:10.5px;font-weight:700;letter-spacing:.03em;padding:4px 10px;border-radius:var(--r-pill);white-space:nowrap}
.mcard__badge.live{background:var(--positive-soft);color:var(--positive)}
.mcard__badge.live .d{width:6px;height:6px;border-radius:50%;background:var(--positive);box-shadow:0 0 0 3px rgba(47,122,85,.18)}
.mcard__badge.soon{background:var(--paper-2);color:var(--ink-400)}
.mcard__desc{font-size:14.5px;line-height:1.55;color:var(--ink-500);margin:0 0 18px;text-wrap:pretty}
.mcard__flist{list-style:none;margin:0 0 22px;padding:0;display:flex;flex-direction:column;gap:10px}
.mcard__flist li{display:flex;gap:10px;font-size:13.5px;color:var(--ink-700);line-height:1.35;align-items:flex-start}
.mcard__flist .ck{flex:none;width:21px;height:21px;border-radius:6px;background:var(--accent-soft);color:var(--green-deep-700);
  display:grid;place-items:center;margin-top:1px}
.mcard__flist .ck .icon{width:13px;height:13px;stroke-width:2.6}
.mcard__link{margin-top:auto;display:inline-flex;align-items:center;gap:8px;font-size:14.5px;font-weight:650;
  color:var(--green-deep-600);transition:gap .25s}
.mcard__link .icon{width:17px;height:17px;stroke-width:2.2}
.mcard:hover .mcard__link{gap:13px}
/* variante "em breve" */
.mcard--soon{background:var(--paper-2);border-style:dashed}
.mcard--soon .mcard__ic{background:#fff;border:1.5px dashed var(--ink-200);color:var(--ink-400);box-shadow:none}
.mcard--soon .mcard__tag{color:var(--ink-400)}
.mcard--soon .mcard__flist .ck{background:var(--paper-3);color:var(--ink-400)}
.mcard--soon .mcard__link{color:var(--ink-400)}
.mcard--soon:hover{transform:translateY(-3px)}
.mcard--soon::before{display:none}

/* faixa de resumo abaixo dos cartões */
.modnote{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:34px;flex-wrap:wrap;
  font-size:14.5px;font-weight:550;color:var(--ink-500);text-align:center}
.modnote .pill-tag{font-size:11px}

/* ============================ DIAGRAMA DE CONEXÃO ============================ */
.flowchain{display:flex;flex-direction:column;gap:0;position:relative}
.flowstep{display:flex;align-items:center;gap:15px;background:#fff;border:1px solid var(--ink-100);
  border-radius:var(--r-lg);padding:15px 17px;box-shadow:var(--shadow-card-1);position:relative;z-index:1;
  opacity:0;transform:translateX(-14px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.reveal-flow.in .flowstep{opacity:1;transform:none}
.reveal-flow.in .flowstep:nth-child(2){transition-delay:.10s}
.reveal-flow.in .flowstep:nth-child(4){transition-delay:.20s}
.reveal-flow.in .flowstep:nth-child(6){transition-delay:.30s}
.reveal-flow.in .flowstep:nth-child(8){transition-delay:.40s}
.flowstep__ic{width:42px;height:42px;border-radius:11px;flex:none;display:grid;place-items:center;
  background:var(--green-deep-700);color:var(--accent)}
.flowstep__ic .icon{width:21px;height:21px}
.flowstep__mod{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--green-deep-600)}
.flowstep__t{font-size:15px;font-weight:600;letter-spacing:-.01em;color:var(--ink-900);margin-top:1px}
.flowstep__t span{color:var(--ink-500);font-weight:450}
.flowconn{height:26px;margin-left:38px;width:2px;background:linear-gradient(180deg,var(--green-vibrant-600),var(--accent-strong));
  position:relative;z-index:0;opacity:0;transition:opacity .4s var(--ease) .2s}
.reveal-flow.in .flowconn{opacity:.9}
.flowconn::after{content:"";position:absolute;left:50%;bottom:-1px;transform:translateX(-50%);
  border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid var(--accent-strong)}

/* ============================ HEADER — MENU DROPDOWN ============================ */
/* centraliza o menu entre a marca e os botões de ação */
.hdr__nav{flex:1;justify-content:center;margin-left:0}
.hdr__spacer{display:none}
.hdr__menu{position:relative;display:flex;align-items:center}
.hdr__menu>.hdr__link{cursor:pointer;user-select:none}
.hdr__menu .chev{width:14px;height:14px;opacity:.8;transition:transform .22s var(--ease)}
.hdr__menu:hover .chev,.hdr__menu:focus-within .chev{transform:rotate(180deg)}
.hdr__drop{position:absolute;top:100%;left:-8px;padding-top:12px;z-index:70;
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s}
.hdr__menu:hover .hdr__drop,.hdr__menu:focus-within .hdr__drop{opacity:1;visibility:visible;transform:none}
.hdr__dropin{min-width:248px;padding:8px;border-radius:16px;display:flex;flex-direction:column;gap:2px;
  background:rgba(11,46,34,.97);backdrop-filter:blur(18px) saturate(1.4);
  border:1px solid rgba(255,255,255,.12);box-shadow:0 34px 70px -22px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.06)}
.hdr__dropitem{display:flex;align-items:center;gap:12px;padding:10px 11px;border-radius:11px;transition:background .2s}
.hdr__dropitem:hover{background:rgba(255,255,255,.09)}
.hdr__dropitem .di{width:34px;height:34px;border-radius:9px;flex:none;display:grid;place-items:center;
  background:rgba(76,192,147,.16);color:var(--accent)}
.hdr__dropitem .di .icon{width:18px;height:18px;opacity:1}
.hdr__dropitem b{display:block;font-size:14px;font-weight:600;color:#fff;letter-spacing:-.01em;line-height:1.2}
.hdr__dropitem small{display:block;font-size:11.5px;color:rgba(255,255,255,.55);font-weight:400;margin-top:2px}
.hdr__dropitem--soon{opacity:.5;cursor:default;pointer-events:none}
.hdr__dropitem--soon small{text-transform:uppercase;letter-spacing:.06em;font-size:10px;font-weight:600;color:rgba(255,255,255,.4)}

/* ============================ ANTES x DEPOIS (Por que reunir tudo) ============================ */
.cmp{display:grid;grid-template-columns:1fr 70px 1fr;align-items:stretch;max-width:1000px;margin:0 auto}
.cmppanel{position:relative;border-radius:var(--r-xl);padding:26px 26px 28px}
.cmppanel__k{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;margin-bottom:6px}
.cmppanel__t{font-size:18px;font-weight:650;letter-spacing:-.01em;color:#fff;margin:0 0 18px;line-height:1.3}
.cmppanel__t b{font-weight:650}
.cmppanel.is-before{background:rgba(255,255,255,.035);border:1px dashed rgba(255,255,255,.16)}
.cmppanel.is-before .cmppanel__k{color:rgba(255,255,255,.5)}
.cmppanel.is-after{background:
  radial-gradient(120% 120% at 80% 0%,rgba(76,192,147,.18),transparent 60%),
  linear-gradient(160deg,rgba(194,222,122,.1),rgba(76,192,147,.06));
  border:1px solid rgba(194,222,122,.42);box-shadow:0 30px 70px -28px rgba(76,192,147,.5),inset 0 1px 0 rgba(255,255,255,.08)}
.cmppanel.is-after .cmppanel__k{color:var(--accent)}

/* coluna ANTES: ferramentas soltas */
.scatter{display:flex;flex-wrap:wrap;gap:9px}
.toolchip{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:500;color:rgba(255,255,255,.62);
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:var(--r-pill);padding:7px 13px}
.toolchip .wd{width:7px;height:7px;border-radius:50%;background:var(--warning);flex:none;box-shadow:0 0 0 3px rgba(181,126,42,.18)}
.toolchip:nth-child(2){transform:rotate(-1.5deg)}
.toolchip:nth-child(3){transform:rotate(1.2deg)}
.toolchip:nth-child(5){transform:rotate(-1deg)}
.toolchip:nth-child(6){transform:rotate(1.6deg)}
.cmpfriction{display:flex;align-items:center;gap:8px;margin-top:18px;font-size:12.5px;color:rgba(255,255,255,.5)}
.cmpfriction .icon{width:15px;height:15px;color:var(--warning)}

/* coluna DEPOIS: uma base só */
.unified{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.unitile{display:flex;align-items:center;gap:9px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);
  border-radius:11px;padding:9px 11px}
.unitile .ic{width:26px;height:26px;border-radius:7px;flex:none;display:grid;place-items:center;
  background:rgba(194,222,122,.16);color:var(--accent)}
.unitile .ic .icon{width:15px;height:15px}
.unitile .nm{font-size:12.5px;font-weight:600;color:#fff;letter-spacing:-.01em}
.cmpfoot{display:flex;align-items:center;gap:8px;margin-top:18px;font-size:12.5px;font-weight:600;color:var(--accent)}
.cmpfoot .icon{width:15px;height:15px}

/* seta central */
.cmparrow{display:grid;place-items:center;position:relative;z-index:2}
.cmparrow span{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(150deg,var(--accent),var(--accent-strong));color:var(--green-deep-900);
  box-shadow:0 14px 30px -10px rgba(194,222,122,.7)}
.cmparrow span .icon{width:22px;height:22px;stroke-width:2.4}

/* faixa de números de apoio */
.statline{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:1000px;margin:34px auto 0;
  padding-top:30px;border-top:1px solid rgba(255,255,255,.12)}
.statline .metric{padding:0;text-align:center}
.statline .metric__v{font-size:clamp(36px,4.4vw,52px)}
.statline .metric__l{margin-top:9px;font-size:14px}

@media(max-width:760px){
  .cmp{grid-template-columns:1fr}
  .cmparrow{padding:14px 0}
  .cmparrow span{transform:rotate(90deg)}
  .statline{grid-template-columns:1fr;gap:20px}
}

/* ============================ HERO — MONITOR / TELA ============================ */
.hero__stage.is-monitor{padding-bottom:66px}
.monitor{position:relative}
.monitor__screen{position:relative;border-radius:22px;padding:13px;
  background:linear-gradient(158deg,#143a2b,#0e2c21 55%,#081d16);
  border:1px solid rgba(255,255,255,.13);
  box-shadow:0 60px 120px -34px rgba(0,0,0,.78),0 18px 54px rgba(7,30,22,.5),inset 0 1px 0 rgba(255,255,255,.08)}
.monitor__screen::before{content:"";position:absolute;top:6px;left:50%;transform:translateX(-50%);
  width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.22);box-shadow:0 0 0 2px rgba(0,0,0,.25)}
.monitor__screen .app{border-radius:12px;box-shadow:0 2px 14px rgba(0,0,0,.25);border-color:rgba(255,255,255,.06)}
.monitor__neck{width:86px;height:30px;margin:0 auto;
  background:linear-gradient(180deg,rgba(220,228,222,.5),rgba(150,164,156,.32));
  border-radius:0 0 7px 7px;box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
.monitor__base{width:48%;max-width:330px;height:14px;margin:0 auto;border-radius:99px;
  background:linear-gradient(180deg,rgba(220,228,222,.55),rgba(120,134,126,.28));
  box-shadow:0 24px 34px -18px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.2)}
@media(max-width:680px){
  .monitor__screen{padding:9px;border-radius:18px}
  .monitor__neck{height:22px;width:70px}
  .hero__stage.is-monitor{padding-bottom:44px}
}

/* ============================ AGENTE FRIENDLY ============================ */
.agent{position:relative;overflow:hidden}
.agent .feat{align-items:center}
.agentbadge{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.03em;
  padding:7px 14px;border-radius:var(--r-pill);background:rgba(194,222,122,.14);border:1px solid rgba(194,222,122,.3);
  color:var(--accent);margin-bottom:22px}
.agentbadge .icon{width:15px;height:15px;stroke-width:2.2}
.agent .flist li{color:rgba(255,255,255,.82)}
.agent .flist b{color:#fff}
.agent .flist .ck{background:rgba(76,192,147,.2);color:var(--green-vibrant-500)}

/* console do agente */
.agentviz{position:relative}
.agenthalo{position:absolute;inset:-12% -8% -18% -8%;background:
  radial-gradient(closest-side,rgba(76,192,147,.28),transparent 70%),
  radial-gradient(closest-side,rgba(194,222,122,.16),transparent 70%);filter:blur(36px);z-index:0}
.agentwin{position:relative;z-index:2;background:linear-gradient(180deg,rgba(10,38,28,.96),rgba(8,30,22,.98));
  border:1px solid rgba(255,255,255,.12);border-radius:var(--r-xl);box-shadow:var(--shadow-float);overflow:hidden}
.agentwin__bar{display:flex;align-items:center;gap:9px;padding:13px 16px;border-bottom:1px solid rgba(255,255,255,.09);
  background:rgba(255,255,255,.03)}
.agentwin__ic{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;
  background:linear-gradient(150deg,var(--accent),var(--accent-strong));color:var(--green-deep-900)}
.agentwin__ic .icon{width:16px;height:16px;stroke-width:2.2}
.agentwin__ttl{font-size:13px;font-weight:650;color:#fff;letter-spacing:-.01em}
.agentwin__ttl span{display:block;font-size:10.5px;font-weight:500;color:var(--green-vibrant-500);letter-spacing:0;margin-top:1px}
.agentwin__live{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:600;
  color:rgba(255,255,255,.6)}
.agentwin__live .d{width:7px;height:7px;border-radius:50%;background:var(--green-vibrant-500);
  box-shadow:0 0 0 4px rgba(76,192,147,.22);animation:agentpulse 1.8s infinite}
@keyframes agentpulse{0%,100%{opacity:1}50%{opacity:.35}}
.agentwin__body{padding:18px 18px 20px}

.agentcmd{display:flex;gap:11px;margin-bottom:18px}
.agentcmd__av{width:30px;height:30px;border-radius:50%;flex:none;display:grid;place-items:center;font-size:11px;font-weight:700;
  background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.14)}
.agentcmd__bub{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);border-radius:14px;border-top-left-radius:5px;
  padding:11px 14px;font-size:13.5px;line-height:1.5;color:#fff}
.agentcmd__bub b{color:var(--accent);font-weight:650}
.agentcmd__who{font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--green-vibrant-500);margin-bottom:5px}

.agentlbl{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.45);
  margin:0 0 11px;display:flex;align-items:center;gap:9px}
.agentlbl::after{content:"";flex:1;height:1px;background:rgba(255,255,255,.1)}
.agentacts{display:flex;flex-direction:column;gap:9px}
.agentact{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);
  border-radius:12px;padding:11px 13px;opacity:0;transform:translateY(8px);
  transition:opacity .5s var(--ease),transform .5s var(--ease)}
.reveal-agent.in .agentact{opacity:1;transform:none}
.reveal-agent.in .agentact:nth-child(1){transition-delay:.15s}
.reveal-agent.in .agentact:nth-child(2){transition-delay:.45s}
.reveal-agent.in .agentact:nth-child(3){transition-delay:.75s}
.agentact__ic{width:34px;height:34px;border-radius:9px;flex:none;display:grid;place-items:center;
  background:rgba(255,255,255,.08);color:var(--accent)}
.agentact__ic .icon{width:18px;height:18px}
.agentact__mod{font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--green-vibrant-500)}
.agentact__t{font-size:13.5px;font-weight:550;color:#fff;letter-spacing:-.01em;margin-top:1px}
.agentact__t span{color:rgba(255,255,255,.6);font-weight:400}
.agentact__ck{margin-left:auto;width:24px;height:24px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--green-vibrant-600);color:#fff;transform:scale(0);transition:transform .4s var(--ease)}
.agentact__ck .icon{width:14px;height:14px;stroke-width:2.8}
.reveal-agent.in .agentact:nth-child(1) .agentact__ck{transition-delay:.5s;transform:scale(1)}
.reveal-agent.in .agentact:nth-child(2) .agentact__ck{transition-delay:.8s;transform:scale(1)}
.reveal-agent.in .agentact:nth-child(3) .agentact__ck{transition-delay:1.1s;transform:scale(1)}
.agentchips{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;padding-top:16px;border-top:1px solid rgba(255,255,255,.09)}
.agentchip{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;color:rgba(255,255,255,.78);
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:var(--r-pill);padding:6px 12px}
.agentchip .icon{width:13px;height:13px;color:var(--green-vibrant-500)}

/* ============================ RESPONSIVO ============================ */
@media(max-width:980px){
  .modgrid{grid-template-columns:1fr 1fr}
  .hm__grid{grid-template-columns:repeat(3,1fr)}
  .agent .feat{gap:40px}
}
@media(max-width:680px){
  .modgrid{grid-template-columns:1fr}
  .hm__grid{grid-template-columns:1fr 1fr;gap:8px}
  .hm__search{display:none}
  .hmtile__v{font-size:20px}
  .mcard{padding:22px 20px 20px}
  .mcard__nm{font-size:20px}
}