/* fontes self-hosted (LGPD) */
@font-face{font-family:"Archivo";font-style:normal;font-weight:500;font-display:swap;src:url("/fonts/ox-8f704806dbed.woff2") format("woff2")}
@font-face{font-family:"Archivo";font-style:normal;font-weight:600;font-display:swap;src:url("/fonts/ox-8f704806dbed.woff2") format("woff2")}
@font-face{font-family:"Archivo";font-style:normal;font-weight:700;font-display:swap;src:url("/fonts/ox-8f704806dbed.woff2") format("woff2")}
@font-face{font-family:"Archivo";font-style:normal;font-weight:800;font-display:swap;src:url("/fonts/ox-8f704806dbed.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/ox-08949f728dc5.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url("/fonts/ox-01d285447409.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:600;font-display:swap;src:url("/fonts/ox-0d1f0b8d0722.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/ox-e2291e842cf5.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:500;font-display:swap;src:url("/fonts/ox-e2291e842cf5.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:600;font-display:swap;src:url("/fonts/ox-e2291e842cf5.woff2") format("woff2")}
/* ==========================================================================
   OctronX® - Site Institucional · octronx.com · v5.2
   Identidade escura oficial · Navy #0B1526 / #0E1A30 · espectro (7 stops .ps1)
   Hero: símbolo oficial (raster do repositório) + camada interativa de fluxo
   ========================================================================== */
/* v6.17: forca o glifo "&" (U+0026) a vir de uma sans-serif neutra do sistema,
   evitando o "&" caligrafico/distorcido do display; nao afeta nenhum outro caractere */
@font-face{font-family:"AmpFix";src:local("Segoe UI"),local("Helvetica Neue"),local("Arial"),local("Roboto");unicode-range:U+0026}
:root{
  --bg:#0b1526; --bg-2:#0e1a30; --bg-3:#0a1220;
  --surface:#132c42; --surface-2:#17324a;
  --line:rgba(159,176,198,.14); --line-2:rgba(159,176,198,.24);
  --ink:#f2f6fb; --ink-2:#e4e7ec; --ink-dim:#9fb0c6; --ink-faint:#7e90a8;
  --accent:#3f63d9; --accent-2:#52adfb; --accent-deep:#2e4081; --accent-ink:#fff;
  --accent-glow:rgba(82,173,251,.30); --good:#77d970; --good-ink:#0b1526;
  --bad:#f4795b; --svg-ink:#5cc8ff; --svg-ink-subtle:rgba(147,197,253,.16);
  --spec:linear-gradient(115deg,#f2c230 0%,#77d970 17%,#43b8e8 34%,#3f63d9 50%,#8a4be0 66%,#d4569f 83%,#f58c3c 100%);
  --exec-grad:linear-gradient(115deg,#38bdf8 0%,#2563eb 100%);   /* v6.30: gradiente ciano->azul, assinatura cromatica repetida no H1 da Hero, no titulo do Roadmap e no cabecalho OctronX da matriz E2E */
  --eyebrow-grad:linear-gradient(135deg,#00f2fe 0%,#4facfe 50%,#7b2ff7 100%);   /* v6.141: gradiente executivo dos eyebrows dos 8 blocos da Home + bloco principal da FAQ */
  --ph-design:#43b8e8; --ph-auto:#8a4be0; --ph-gov:#d4569f;
  --det:#3f63d9; --int:#5b3fa8; --hitl:#0f8f7a;
  --display:"AmpFix","Archivo","Segoe UI","Helvetica Neue",Arial,sans-serif;
  --sans:"AmpFix","IBM Plex Sans","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  /* Escala tipografica executiva - fluida. Piso calibrado p/ smartphone (~375px), teto p/ desktop (~1440px);
     publico C-level: densa, sobria, autoritaria - sem manchetes desproporcionais em laptop/tablet. */
  --t--1:clamp(.72rem,.69rem + .13vw,.8rem);        /* N1 overline / eyebrow */
  --t-0:1.05rem;                                     /* N4 corpo base */
  --t-1:clamp(1.06rem,1.0rem + .26vw,1.19rem);       /* N4 lead */
  --t-2:clamp(1.1rem,1.0rem + .5vw,1.2rem);          /* v6.63: N3 subtitulo (H3) - teto 24->19px */
  --t-3:clamp(1.24rem,1.05rem + .85vw,1.5rem);       /* v6.63: N3 H3 grande / metricas - teto 30->24px */
  --t-4:clamp(1.35rem,1.05rem + 1.45vw,1.85rem);     /* v6.63: N2 titulo de secao (H2) - teto 40->30px */
  --t-h1:clamp(1.45rem,1.05rem + 1.9vw,2.05rem);     /* v6.63: N2 manchete do Hero (H1) - teto 44->33px */
  --t-card-h:clamp(.95rem,.92rem + .13vw,1.02rem);   /* N5 titulo de card */
  --t-card:clamp(.86rem,.84rem + .1vw,.92rem);       /* N5 corpo de card */
  --maxw:1180px; --pad:clamp(20px,5.2vw,60px); --radius:16px;
  --ease:cubic-bezier(.22,.61,.36,1); --hdr-h:76px;
  --flag-ring:rgba(255,255,255,.62);
}
/* Tema: Dark fixo (identidade OctronX); nao ha alternancia de tema no site. */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--hdr-h) + 16px)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--ink-2);font-family:var(--sans);font-size:var(--t-0);
  line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden;max-width:100vw;
  font-variant-ligatures:none;font-feature-settings:"liga" 0,"clig" 0,"calt" 0}
.wrap,.section,header,footer{max-width:100%}
h1,h2,h3,h4{font-family:var(--display);font-weight:700;line-height:1.13;margin:0;letter-spacing:-.02em;color:var(--ink);text-wrap:balance}
p{margin:0}a{color:inherit;text-decoration:none}
img,canvas,svg{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--accent-2);outline-offset:3px;border-radius:5px}
::selection{background:var(--accent);color:#fff}
/* v6.92: scrollbar global ultrafina, integrada ao design system - substitui a nativa cinza em
   toda a aplicacao (pagina, modal, dropdown de processos, textareas). Carrosseis que ja escondem
   a propria scrollbar (::-webkit-scrollbar{display:none}) tem selector mais especifico e continuam
   escondidos, esta regra so entra em containers que ainda nao tratavam a barra. */
*{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.2) transparent}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:9999px}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.35)}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.eyebrow{font-family:var(--mono);font-weight:700;font-size:.78rem;line-height:1.45;letter-spacing:.08em;text-transform:uppercase;
  background:var(--eyebrow-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--ink-dim);
  display:inline-flex;align-items:center;gap:.55em}
.eyebrow .n{color:var(--accent-2)}
.eyebrow .ox-ico{width:1.25rem;height:1.25rem;flex:none;display:inline-block;vertical-align:middle;margin-right:8px;
  background-color:currentColor;filter:drop-shadow(0 0 10px rgba(0,242,254,.45));opacity:1;
  -webkit-mask:url(/img/ox-867d89a716d8.png) center/contain no-repeat;
  mask:url(/img/ox-867d89a716d8.png) center/contain no-repeat}
.dim{color:var(--ink-dim)}

.btn{--_bg:var(--accent);--_fg:var(--accent-ink);--_bd:transparent;display:inline-flex;align-items:center;gap:.55em;
  font-family:var(--display);font-weight:600;font-size:var(--t--1);padding:.9em 1.4em;border:1px solid var(--_bd);
  background:var(--_bg);color:var(--_fg);border-radius:10px;cursor:pointer;
  transition:transform .18s var(--ease),box-shadow .18s,background .18s}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 30px -12px var(--accent-glow)}
.btn.ghost{--_bg:transparent;--_fg:var(--ink);--_bd:var(--line-2)}
.btn.ghost:hover{--_bd:var(--accent-2);color:var(--accent-2);box-shadow:none}
.btn.spec{position:relative;--_bg:var(--surface);--_fg:var(--ink);--_bd:transparent}
.btn.spec::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.4px;background:var(--spec);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.btn .arw{transition:transform .18s var(--ease)}.btn:hover .arw{transform:translateX(3px)}
.cta-row--final{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:16px}
.cta-row--final .btn{width:100%;white-space:nowrap;justify-content:center}
/* v6.90: close-grid clonava o design system do card-modelo .impact .ic--pull (fundo, raio,
   borda-espectro via ::before). v6.141: deixou de ser carrossel sempre-ativo (mesmo no
   desktop, por design anterior) e virou grid estatico de 4 colunas - nenhum Integrador/
   Consultoria fica escondido atras de scroll, nem no desktop nem no mobile. O dock
   (.close-dock) permanece no DOM (mountDock() generico continua rodando) mas fica
   permanentemente oculto, porque um grid sem overflow horizontal nunca ativa
   checkOverflow() - nenhuma linha de <script> precisou mudar. */
.close-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:22px auto 8px}
.nav-dock.close-dock{margin:12px auto}
.close-card{position:relative;background:var(--bg-3);border-radius:var(--radius);padding:11px 16px;min-height:202px;
  display:flex;flex-direction:column;justify-content:flex-start;overflow:hidden}
.close-card::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.4px;background:var(--spec);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.5;pointer-events:none}
/* v6.93: badge (titulo do card) na mesma escala tipografica do titulo de .impact .ic--pull;
   min-height nivela o inicio do paragrafo em todos os 4 cards, independente do badge quebrar
   em 1 ou 2 linhas */
/* v6.94: titulo do card 20% menor (calc(--t-1) * .8) - cor e peso clonados de .impact
   .ic--pull h3 (var(--ink) / 800), mantendo a familia mono/uppercase ja estabelecida do badge */
.close-badge{position:relative;display:block;min-height:calc(var(--t-1) * .8 * 1.25 * 2);font-family:var(--mono);font-size:calc(var(--t-1) * .8);letter-spacing:.01em;text-transform:uppercase;color:var(--ink);font-weight:800;line-height:1.25;margin-bottom:8px}
/* v6.102: qualificador entre parenteses no titulo do card Integradores - 62.5% do tamanho
   e sem negrito, para nao competir com o nome principal do card. text-transform:none anula
   o uppercase herdado do .close-badge pai, preservando o "s" minusculo de ERPs/CRMs. */
.close-badge-sub{display:inline;font-weight:400;font-size:.625em;text-transform:none}
.close-card p{position:relative;font-size:.9rem;line-height:1.5;color:var(--ink-dim)}
.close-card.is-long p{font-size:.78rem;line-height:1.46}
@media (max-width:900px){
  .cta-row--final{display:block}
  .cta-row--final .btn{width:auto}
  .close-grid{grid-template-columns:1fr}
  .close-grid .seq-badge{display:block}
}
.btn-premium{--_bg:linear-gradient(135deg,#0284c7 0%,#2563eb 100%);--_bd:rgba(56,189,248,.4);box-shadow:0 10px 25px -5px rgba(37,99,235,.35);transition:transform .22s var(--ease),box-shadow .22s var(--ease)}
.btn-premium:hover{transform:translateY(-2px);box-shadow:0 14px 34px -6px rgba(37,99,235,.55)}

/* ---------- STICKY NAVBAR ---------- */
.hdr{position:sticky;position:-webkit-sticky;top:0;z-index:100;min-height:var(--hdr-h);display:flex;align-items:center;
  background:color-mix(in srgb,var(--bg) 78%,transparent);backdrop-filter:blur(12px);
  border-bottom:1px solid transparent;transition:border-color .25s,background .25s,box-shadow .25s}
.hdr.scrolled{border-bottom-color:var(--line);background:color-mix(in srgb,var(--bg) 93%,transparent);
  box-shadow:0 10px 30px -22px rgba(0,0,0,.8)}
.hdr .wrap{display:flex;align-items:center;gap:20px;width:100%;padding-block:10px}
.lockup{display:flex;align-items:center;gap:11px;flex:none}
.lockup .mark{width:34px;height:34px;flex:none;display:block;object-fit:contain}
.hdr .lockup{gap:13px}
.hdr .lockup .mark{width:50px;height:50px}
.hdr .lockup .wm{font-size:1.4rem}
.lockup .txt{display:flex;flex-direction:column;line-height:1}
.lockup .wm{font-family:var(--display);font-weight:800;font-size:1.12rem;letter-spacing:-.03em;color:var(--ink)}
.lockup .wm sup{font-size:.42em;font-weight:600;color:var(--ink-dim);vertical-align:super;line-height:0}
.lockup .sl{font-family:var(--mono);font-size:.56rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);margin-top:4px}
.nav{display:flex;align-items:center;gap:2px}
.nav a{font-family:var(--sans);font-weight:500;font-size:.85rem;color:var(--ink-dim);padding:9px 12px;border-radius:8px;white-space:nowrap;transition:color .18s,background .18s}
.nav a:hover{color:var(--ink);background:var(--surface)}
.rightset{display:flex;align-items:center;gap:8px;flex:none;justify-self:end}
.socials{display:flex;align-items:center;gap:2px}
.sicon{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;color:var(--ink-faint);
  border:1px solid transparent;background:transparent;padding:0;cursor:pointer;font:inherit;
  transition:color .18s var(--ease),border-color .18s,background .18s}
.sicon svg{width:16px;height:16px;fill:currentColor}
.sicon:hover,.sicon:focus-visible{color:var(--accent-2);border-color:var(--line-2);background:var(--surface)}
.rightset .sicon.contact{width:36px;height:36px;border:1px solid var(--line);color:var(--ink-dim)}
.rightset .sicon.contact:hover,.rightset .sicon.contact:focus-visible{color:var(--accent-2);border-color:var(--line-2)}
.ttoggle{width:36px;height:36px;border-radius:9px;border:1px solid var(--line);background:transparent;color:var(--ink-dim);cursor:pointer;font-size:.95rem}
.ttoggle:hover{color:var(--ink)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.langswitch{display:flex;align-items:center;gap:2px;border:1px solid var(--line);border-radius:9px;padding:3px;background:transparent}
.lang-opt{display:grid;place-items:center;width:26px;height:26px;border-radius:6px;border:none;background:transparent;cursor:pointer;font-size:.95rem;line-height:1;opacity:.5;transition:opacity .15s var(--ease),background .15s var(--ease)}
.lang-opt:hover{opacity:.85;background:var(--surface)}
.lang-opt.is-active{opacity:1;background:var(--surface-2)}

/* ---------- HEADER "TO BE" ---------- */
.hdr .wrap{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;max-width:1760px;padding-inline:clamp(14px,2.2vw,30px)}
.hdr-left{display:flex;align-items:center;gap:12px;flex:none;justify-self:start}
/* v6.148: justify-self:stretch (era center) + width:100% - sem isso o nav (grid item) se
   dimensionava pelo proprio conteudo minimo (nowrap, sem quebra), ignorando a largura real
   da coluna 1fr e vazando visualmente sobre o logo/rightset em 1280-1500px a 100% de zoom
   (confirmado via getBoundingClientRect: nav chegava a 1018px num track de 850px). Com
   stretch, o nav fica preso a largura exata do track e overflow-x:auto passa a rolar
   internamente em vez de vazar - zero colisao possivel, em qualquer largura/zoom. */
/* v6.150: justify-content:center (era flex-start) - com o nav em 2 linhas (v6.149) o
   conteudo real caiu para ~700px, bem menor que os ~900-1250px do track em telas largas;
   flex-start deixava tudo colado a esquerda com um vazio grande a direita. center resolve
   sem reabrir o bug do v6.148 (nav ainda preso a width:100%/justify-self:stretch, overflow-
   x:auto continua rolando por dentro em vez de vazar se o conteudo um dia nao couber). */
.nav{display:flex;flex-direction:row;align-items:center;justify-content:center;justify-self:stretch;width:100%;min-width:0;padding-inline:clamp(8px,1vw,16px);
  gap:clamp(6px,0.6vw,10px);overflow-x:auto;-ms-overflow-style:none;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
/* v6.149: nav desktop em 2 linhas (<br> explicito no HTML, quebras fixas por item) - a altura
   do header ja e ditada pelo logo (50px) e pelo NEWS empilhado (~33px), entao 2 linhas de
   texto pequeno cabem sem engordar o .hdr. Exclusivo do nav desktop (.mmenu/rodape intocados,
   selectors diferentes). display:inline-flex column + text-align:center centraliza as 2
   linhas dentro do botao, tanto na horizontal quanto na vertical. */
/* Fase 1: 5 links curtos em UMA linha (Ciclo | Plataforma | Casos | Metodologia | Sobre); o nav some abaixo de 900px (drawer cobre). */
.nav a{display:inline-flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;
  font-size:.82rem;font-weight:500;line-height:1.2;padding:8px 14px;letter-spacing:.008em;border:1px solid transparent;border-radius:8px;white-space:nowrap;
  background:transparent;transition:color .18s var(--ease),background .18s var(--ease),border-color .18s var(--ease)}
.nav a:hover{color:var(--ink);background:var(--surface);border-color:var(--line-2)}
.nav a:active{background:var(--surface-2)}
.nav a.nav-cta{color:#fff;background:var(--accent);border-color:transparent;font-weight:600}
.nav a.nav-cta:hover{color:#fff;background:var(--accent-2);border-color:transparent}
.rightset .langswitch{padding:2px}
.rightset .langswitch .lang-opt{width:auto;min-width:26px;height:22px;padding:0 6px;font-family:var(--mono);font-size:.58rem;font-weight:700;letter-spacing:.03em;color:var(--ink-dim);opacity:1}
.rightset .langswitch .lang-opt:hover{background:var(--surface);color:var(--ink-2)}
.rightset .langswitch .lang-opt.is-active{background:var(--surface-2);color:var(--ink)}
.mmenu-utils .langswitch .lang-opt{width:auto;min-width:44px;height:34px;padding:0 12px;font-family:var(--mono);font-size:.8rem;font-weight:700;color:var(--ink-2);opacity:1}
/* "Quem Somos" dropdown */
.navdd{position:relative}
.nav-trigger{font-family:var(--sans);font-weight:500;font-size:.7rem;letter-spacing:-.005em;color:var(--ink-dim);background:transparent;
  border:1px solid var(--line);cursor:pointer;padding:6px 10px;border-radius:9px;display:inline-flex;align-items:center;gap:5px;
  white-space:nowrap;transition:color .18s var(--ease),background .18s var(--ease),border-color .18s var(--ease)}
.nav-trigger svg{width:10px;height:10px;fill:none;stroke:currentColor;stroke-width:2.2;transition:transform .2s var(--ease)}
.nav-trigger:hover,.navdd[data-open] .nav-trigger{color:var(--ink);background:var(--surface);border-color:var(--line-2)}
.nav-trigger:active{background:var(--surface-2)}
.navdd[data-open] .nav-trigger svg{transform:rotate(180deg)}
.navdd-menu{position:absolute;top:calc(100% + 8px);left:0;min-width:214px;background:var(--bg-2);
  border:1px solid var(--line);border-radius:12px;padding:6px;display:flex;flex-direction:column;gap:2px;
  box-shadow:0 18px 44px -22px rgba(0,0,0,.75);opacity:0;transform:translateY(-6px);pointer-events:none;
  transition:opacity .18s var(--ease),transform .18s var(--ease);z-index:6}
.navdd[data-open] .navdd-menu{opacity:1;transform:none;pointer-events:auto}
.navdd-menu a{font-family:var(--sans);font-size:.86rem;color:var(--ink-2);padding:9px 11px;border-radius:8px;
  white-space:nowrap;transition:color .15s,background .15s}
.navdd-menu a:hover{background:var(--surface);color:var(--ink)}
.flagstack{display:flex;flex-direction:row;align-items:center;gap:5px;flex:none}
.flagbtn{width:20px;height:20px;padding:0;border:0;background:transparent;cursor:pointer;display:grid;place-items:center;
  opacity:.55;transition:opacity .15s var(--ease)}
.flagbtn .flagsvg{width:15px;height:15px;border-radius:50%;overflow:hidden;display:block;
  border:1px solid var(--flag-ring);transition:border-color .15s var(--ease),box-shadow .15s var(--ease)}
.flagbtn:hover,.flagbtn:focus-visible{opacity:1}
.flagbtn:hover .flagsvg,.flagbtn:focus-visible .flagsvg{border-color:var(--ink-dim)}
.flagbtn.is-active{opacity:1}
.flagbtn.is-active .flagsvg{border-color:var(--accent-2);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent-2) 30%,transparent)}
/* mobile menu "Quem Somos" accordion */
.mm-group{display:flex;flex-direction:column}
.mm-trigger{font-family:var(--sans);font-weight:500;font-size:1.02rem;text-align:left;background:transparent;
  border:0;color:var(--ink-2);padding:12px 10px;border-radius:10px;cursor:pointer;display:flex;align-items:center;gap:8px}
.mm-trigger svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.2;margin-left:auto;
  transition:transform .2s var(--ease)}
.mm-group[data-open] .mm-trigger{background:var(--surface);color:var(--ink)}
.mm-group[data-open] .mm-trigger svg{transform:rotate(180deg)}
.mm-sub{max-height:0;overflow:hidden;padding-left:12px;transition:max-height .28s var(--ease)}
.mm-group[data-open] .mm-sub{max-height:140px}
.mm-sub a{font-size:.95rem;color:var(--ink-dim)}
.mmenu-utils .flagstack{flex-direction:row;gap:6px}
.mmenu-utils .flagbtn{width:40px;height:40px}
.mmenu-utils .flagbtn .flagsvg{width:24px;height:24px}

.lang-note{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(8px);background:var(--surface-2);border:1px solid var(--line-2);color:var(--ink-2);font-size:.82rem;padding:10px 16px;border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.28);opacity:0;pointer-events:none;transition:opacity .2s var(--ease),transform .2s var(--ease);z-index:120;max-width:86vw;text-align:center}
.lang-note.show{opacity:1;transform:translateX(-50%) translateY(0)}
.mmenu-utils{display:flex;align-items:center;gap:10px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.stat-note{margin-top:6px}
.impact-note{margin-top:14px;font-family:var(--mono);font-size:.72rem;letter-spacing:.04em;color:var(--ink-faint)}
.hdr .btn.access{padding:.6em 1em}
.burger{position:relative;display:flex;flex:none;width:38px;height:38px;border-radius:9px;border:1px solid var(--line);background:transparent;color:var(--ink);cursor:pointer;align-items:center;justify-content:center}
.burger svg{width:18px;height:18px}
.burger.is-open{border-color:var(--line-2)}
.burger.is-open svg{display:none}
.burger.is-open::before,.burger.is-open::after{content:"";position:absolute;left:50%;top:50%;width:18px;height:2px;border-radius:2px;background:currentColor}
.burger.is-open::before{transform:translate(-50%,-50%) rotate(45deg)}
.burger.is-open::after{transform:translate(-50%,-50%) rotate(-45deg)}
/* v6.151: max-height + overflow-y:auto - sem isso, em zoom alto (110-150%) o viewport
   efetivo (CSS px) encolhe e os 8 links + utilitarios podem ultrapassar a altura visivel;
   o .mmenu (position:fixed, bottom:auto) nao tinha nenhuma trava e o conteudo excedente
   ficava cortado, inacessivel. svh (nao vh puro) segue o padrao ja usado no #perfilMenu
   (~linha 1135) para o mesmo tipo de contencao mobile-safe. overscroll-behavior:contain
   evita que o fim do scroll do menu "vaze" pro scroll da pagina atras. */
/* Fase 1: drawer lateral ESQUERDO (abre pelo burger a esquerda do logo), altura toda abaixo do header,
   fundo escuro, itens em grade de icones SVG inline (.mm-grid/.mm-tile). visibility evita foco por Tab quando fechado. */
.mmenu{position:fixed;top:var(--hdr-h);bottom:0;left:0;right:auto;width:min(100%,400px);z-index:85;background:var(--bg-3);border-right:1px solid var(--line);
  overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  visibility:hidden;transform:translateX(-16px);opacity:0;pointer-events:none;transition:transform .22s var(--ease),opacity .22s,visibility 0s linear .22s}
.mmenu.open{visibility:visible;transform:none;opacity:1;pointer-events:auto;transition:transform .22s var(--ease),opacity .22s,visibility 0s}
/* body trava contra scroll residual enquanto o drawer esta aberto - :has() e suportado por
   todos os browsers evergreen atuais; degrada de forma inofensiva (sem travar) onde nao é. */
body:has(#mmenu.open){overflow:hidden}
/* Acima de 600px o drawer e um painel lateral contido (sombra + escurecimento do restante, clique fora fecha);
   abaixo disso ocupa a largura toda. */
@media (min-width:600px){
  .mmenu{box-shadow:32px 0 64px -24px rgba(0,0,0,.5)}
}
body:has(#mmenu.open)::after{content:"";position:fixed;inset:0;z-index:84;background:rgba(0,0,0,.5)}
.mmenu .wrap{display:flex;flex-direction:column;gap:4px;padding:20px 18px 32px}
.mmenu a{font-size:1.02rem;padding:12px 10px;border-radius:10px;color:var(--ink-2)}
.mmenu a:hover{background:var(--surface);color:var(--ink)}
.mmenu .btn{margin-top:10px;justify-content:center}
.mm-cap{font-family:var(--mono);font-weight:600;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);margin:0 2px 8px}
.mm-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
@media (max-width:340px){.mm-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.mmenu .mm-tile{display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:14px;min-height:96px;padding:12px;
  border:1px solid var(--line);border-radius:14px;background:var(--bg-2);color:var(--ink);font-size:.82rem;font-weight:600;line-height:1.25;overflow-wrap:anywhere;
  transition:border-color .18s var(--ease),background .18s var(--ease),transform .18s var(--ease)}
.mmenu .mm-tile:hover,.mmenu .mm-tile:focus-visible{background:var(--surface);border-color:var(--line-2);transform:translateY(-2px)}
.mm-tile .mm-ic{width:30px;height:30px;color:var(--accent-2);flex:none}
.mm-tile small{display:block;margin-top:3px;font-family:var(--sans);font-size:.74rem;font-weight:400;color:var(--ink-dim)}
.mmenu .socials{margin-top:12px;padding:4px;gap:6px}
.mmenu .socials .sicon{width:44px;height:44px;border-color:var(--line)}
.mmenu .socials .sicon svg{width:18px;height:18px}
/* v6.150: breakpoint baixado de 1440px para 1200px - o nav em 2 linhas (v6.149) so precisa de
   ~700-750px de conteudo real (medido via getBoundingClientRect em varias larguras), bem menos
   que os ~900px+ disponiveis no track a partir de 1200px; nao ha mais motivo para reservar o
   drawer numa faixa tao ampla so por seguranca (o fix v6.148 - width:100%/justify-self:stretch
   no .nav - ja garante zero vazamento mesmo no caso raro de faltar espaco). */
@media (max-width:900px){.nav{display:none}}
/* CTA do header (acionado por data-contact); no celular estreito o CTA fica so no drawer */
.hdr .hdr-cta{padding:.62em 1.15em;font-size:.78rem;white-space:nowrap;flex:none}
@media (max-width:520px){.hdr .hdr-cta{display:none}}
/* Area do Cliente: botao discreto (outline/ghost) a esquerda do CTA; no celular fica so no drawer */
.hdr .hdr-login{--_fg:var(--ink-dim);padding:.62em 1.05em;font-size:.78rem;white-space:nowrap;flex:none}
.hdr .hdr-login:hover,.hdr .hdr-login:focus-visible{--_fg:var(--accent-2)}
@media (max-width:520px){.hdr .hdr-login{display:none}}
.mmenu a.mm-login{gap:.6em;margin-top:8px;font-size:var(--t--1);padding:.9em 1.4em;color:var(--_fg)}
.mmenu a.mm-login:hover,.mmenu a.mm-login:focus-visible{background:transparent;color:var(--accent-2)}
.mmenu .mm-login svg{width:16px;height:16px;flex:none}
/* seletor de idioma no rodape (saiu do header) */
.ftr .ftr-lang{margin-top:14px}

/* ---------- section rhythm (v6.22: ritmo vertical padronizado ~44px mobile / ~80px desktop) ---------- */
.section{padding-block:clamp(40px,5.4vw,72px);position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;scroll-margin-top:var(--hdr-h)}
.section > .wrap{width:100%}
.section.alt{background:var(--bg-2)}
@media (max-width:900px){.section{min-height:auto;justify-content:flex-start}}
.section{overflow-x:clip}
.s-head{max-width:none}
.s-head h2{font-size:var(--t-4);font-weight:800;margin:16px 0 18px;line-height:1.14;letter-spacing:-.022em;max-width:52ch}
@media (max-width:640px){
  .s-head h2{margin:10px 0 12px}
  .s-head p:not(.eyebrow){font-size:var(--t-0);line-height:1.55}
  .sub-h{margin:26px 0 6px}
  .hero h1{margin-top:10px}
}
/* v6.27: sub-secoes numeradas (Ciclo Continuo / Roadmap) dentro de #solucoes - mesmo padrao 0X · NOME + H2 esquerda */
.sub-sec{margin-top:clamp(44px,7vw,80px)}
.sub-sec h2{font-size:var(--t-3);margin:14px 0 10px;line-height:1.22;letter-spacing:-.015em}
.sub-sec > p:last-of-type:not(.eyebrow){margin-bottom:18px}
.s-head p:not(.eyebrow){font-size:var(--t-1);font-weight:400;color:var(--ink-dim);line-height:1.62;max-width:64ch}
.s-head p:not(.eyebrow)+p:not(.eyebrow){margin-top:10px}
.sub-h{font-family:var(--display);font-weight:700;font-size:var(--t-2);line-height:1.3;letter-spacing:-.012em;color:var(--ink);margin:38px 0 6px}
.sub-h + .sub-p{color:var(--ink-dim);max-width:60ch;margin-bottom:22px}
/* v6.94: desdobramento hierarquico do sub-h acima do carrossel do Cubo - mesma familia/cor/alinhamento,
   peso normal e corpo menor; sem margem propria (o gap do flex .phases ja espaca cubo <-> texto <-> cards) */
.sub-h.ph-subtitle{font-weight:400;font-size:var(--t-0);margin:0}
[data-reveal]{opacity:0;transform:translateY(20px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
[data-reveal].in{opacity:1;transform:none}
[data-reveal][data-d="1"]{transition-delay:.08s}[data-reveal][data-d="2"]{transition-delay:.16s}[data-reveal][data-d="3"]{transition-delay:.24s}
@media (prefers-reduced-motion:reduce){[data-reveal]{opacity:1;transform:none;transition:none}}

/* ---------- HERO ---------- */
.hero{position:relative;overflow:hidden;padding-block:clamp(46px,7vh,84px) clamp(38px,5vw,64px);
  background:linear-gradient(180deg,var(--bg) 0%,var(--bg) 56%,var(--bg-2) 100%)}
.hero::before{content:"";position:absolute;top:-16%;right:-6%;width:60vw;height:60vw;max-width:780px;max-height:780px;
  background:radial-gradient(circle at 50% 50%,var(--accent-glow),transparent 62%);pointer-events:none}
.hero .wrap{position:relative;display:grid;grid-template-columns:1fr;gap:0;align-items:center}
.hero-lead{align-self:start;max-width:none}
.hero .hero-kick{margin-top:16px;font-size:var(--t-0);color:var(--ink-2);line-height:1.55;max-width:70ch}
.hero .hero-kick b{color:var(--accent-2);font-weight:700}
.cap-line{margin:16px auto 0;max-width:56ch;text-align:center;font-family:var(--mono);font-size:.8rem;letter-spacing:.03em;line-height:1.5;color:var(--ink-dim)}
.cap-line b{color:var(--ink);font-weight:600}
.cap-line.cap-stats{font-size:.68rem;letter-spacing:.04em}
.cap-line.cap-stats span{display:block}
.cap-line.cap-stats span+span{margin-top:2px}
.cap-line.cap-lead{font-size:1rem;margin-top:14px}
@media (min-width:761px){.cap-line.cl-wide{max-width:none;text-align:left;margin-left:0}}
/* v6.94: os 2 paragrafos de apoio do Fechamento (#contato) ficam compactados como 1 bloco unico,
   logo abaixo do CTA, com fonte 35% menor (.8rem * .65 = .52rem) e entrelinha comprimida */
#contato .cap-line.cl-wide{margin-top:8px;margin-bottom:4px;font-size:.52rem;line-height:1.3}
#contato .cap-line.cl-wide+.cap-line.cl-wide{margin-top:4px}
/* v6.94: legenda de benchmark do Impacto Auditavel - mesma reducao de 35%, peso/opacidade originais preservados */
#impacto .cap-line.cl-wide{font-size:.52rem}
/* v6.95: legenda de prazo do roadmap migrou para logo abaixo do bloco de cards - respiro compacto */
.roadmap-caption{margin-top:10px;font-size:.52rem}
.hero h1{font-family:var(--display);font-weight:500;font-size:var(--t-h1);letter-spacing:-.028em;line-height:1.14;margin:16px 0 0;max-width:34ch;color:var(--ink)}
.hero h1 .g{background:var(--exec-grad);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:800}
.hero .sub{grid-column:1 / -1;margin-top:clamp(24px,3vw,32px);font-size:var(--t-1);font-weight:400;color:var(--ink-dim);max-width:70ch;line-height:1.62}
.hero .sub+.sub{margin-top:10px}
.hero .sub strong{color:inherit;font-weight:700}
.hero .cta-row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:30px}
.hero .cta-row .btn{width:100%;white-space:nowrap;justify-content:center}
@media (max-width:900px){.hero .cta-row{display:block}.hero .cta-row .btn{width:auto}}
.hero .cta-note{margin-top:12px;font-family:var(--mono);font-size:.72rem;letter-spacing:.03em;text-transform:uppercase;color:var(--ink-faint)}
.hero .valueline{margin-top:26px;display:flex;flex-wrap:wrap;gap:8px 12px;font-family:var(--mono);font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-faint)}
.hero .valueline b{color:var(--ink-dim);font-weight:500}.hero .valueline .sep{color:var(--accent-2)}

.rig{position:relative;width:100%;aspect-ratio:1/1;max-width:620px;margin-inline:auto}
.rig .rigInner{position:absolute;inset:0;will-change:transform}
.rig .fx{position:absolute;inset:0;width:100%;height:100%;z-index:1}
.rig .sym{position:absolute;left:50%;top:50%;width:39%;transform:translate(-50%,-50%);z-index:2;
  filter:drop-shadow(0 0 20px rgba(82,173,251,.4)) drop-shadow(0 8px 34px rgba(82,173,251,.28));
  animation:ox-corepulse 3.6s var(--ease) infinite}
@keyframes ox-corepulse{
  0%,100%{filter:drop-shadow(0 0 16px rgba(82,173,251,.32)) drop-shadow(0 8px 30px rgba(82,173,251,.22))}
  50%{filter:drop-shadow(0 0 34px rgba(82,173,251,.62)) drop-shadow(0 8px 44px rgba(82,173,251,.42))}}
@media (prefers-reduced-motion:reduce){.rig .sym{animation:none}}
.rig-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media (max-width:880px){.hero .wrap{grid-template-columns:1fr}.rig{max-width:340px}.hero .sub{margin-top:20px}}

/* ---------- SOBRE ---------- */
#execucao{scroll-margin-top:var(--hdr-h)}
.layers{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:stretch;margin-top:32px}
.layer{display:flex;flex-direction:column;align-items:flex-start;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 18px}
.layer .lk{font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);flex:none;min-width:0;margin-bottom:6px}
.layer > div{align-self:stretch}
.layer h3{font-size:var(--t-card-h);font-weight:700;line-height:1.32;letter-spacing:-.006em}.layer p{margin-top:4px;color:var(--ink-dim);font-size:var(--t-card);line-height:1.55}
.layer.exe{border-color:transparent;position:relative;background:var(--bg-3)}
.layer.exe::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.4px;background:var(--spec);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.65}
.layer.exe .lk{color:var(--accent-2)}
/* v6.141: micro-etiqueta de sequencia (01/03 etc.) - oculta por padrao, só aparece nos
   carrosseis/grades que viram pilha vertical no mobile (Triade, Impacto, Perfis de Parceria) */
.seq-badge{display:none;font-family:var(--mono);font-size:.62rem;font-weight:700;letter-spacing:.1em;color:var(--ink-faint);margin-bottom:4px}
/* v6.141: Triade de Sistemas empilhada verticalmente no mobile (era carrossel horizontal) -
   ordem do DOM ja segue a narrativa de fechamento (Record -> Engagement -> OES em destaque
   por ultimo), entao mobile e desktop leem na mesma sequencia sem precisar de CSS order. */
@media (max-width:900px){
  .layers{grid-template-columns:1fr;gap:12px}
  .layers .seq-badge{display:block}
}
.nav-dock.hero-dock,.nav-dock.impact-dock,.nav-dock.close-dock{display:none!important}
.nav-dock.hero-dock.has-overflow,.nav-dock.impact-dock.has-overflow,.nav-dock.close-dock.has-overflow{display:flex!important}
.metrics{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;margin-top:32px;background:var(--line);border-radius:var(--radius);overflow:hidden}
.metric{background:var(--bg);padding:24px 16px;text-align:center}
.section.alt .metric{background:var(--bg-2)}
.metric .v{font-family:var(--display);font-weight:800;font-size:var(--t-3);color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.metric .l{font-family:var(--mono);font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-dim);margin-top:8px;line-height:1.5}
.metric .cap{display:block;color:var(--ink-faint);margin-top:4px;font-size:.56rem}
/* metricas do COM - indicadores expansiveis (v6.21) */
.metric.metric-cap{border:0;background:var(--bg);color:inherit;font:inherit;width:100%;cursor:pointer;text-align:center;
  display:flex;flex-direction:column;align-items:center;justify-content:center;transition:background .2s}
.section.alt .metric.metric-cap{background:var(--bg-2)}
.metric.metric-cap:hover,.metric.metric-cap:focus-visible{background:var(--surface)}
.metric.metric-cap[aria-expanded="true"]{background:var(--surface-2)}
.cap-cue{display:inline-flex;align-items:center;gap:5px;margin-top:8px;padding:4px 9px 4px 7px;border:1px solid var(--line-2);border-radius:999px;background:var(--surface);cursor:pointer;font-family:var(--mono);font-size:.48rem;
  letter-spacing:.08em;text-transform:uppercase;color:rgba(82,173,251,.68);transition:color .2s,background .2s,border-color .2s}
.cap-cue .cue-ic{width:12px;height:12px;font-size:.68rem}
.cue-ic{display:inline-grid;place-items:center;width:14px;height:14px;border:1px solid currentColor;border-radius:4px;
  font-style:normal;font-size:.8rem;line-height:1}
.cue-ic::before{content:"+"}
.metric.metric-cap[aria-expanded="true"] .cue-ic::before,.lead-toggle[aria-expanded="true"] .cue-ic::before{content:"\2212"}
.metric.metric-cap:hover .cap-cue,.metric.metric-cap[aria-expanded="true"] .cap-cue{color:var(--accent-2);background:var(--surface-2);border-color:var(--accent-2)}
/* v6.26: painel ancorado a coluna clicada (max 440px), lista mais densa */
.meta-drawer{max-height:0;margin-top:0;margin-left:0;overflow:hidden;opacity:0;
  transition:max-height .45s var(--ease),opacity .35s var(--ease),margin-top .4s var(--ease)}
.meta-drawer.open{max-height:560px;opacity:1;margin-top:12px}
.meta-drawer.open .md-inner{border-color:var(--line-2)}
.md-inner{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px}
.md-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;
  font-family:var(--mono);font-size:.58rem;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-faint)}
.md-head b{color:var(--ink-dim);font-weight:600}
.md-list{list-style:none;margin:7px 0 0;padding:0}
.md-list li{font-size:.79rem;color:var(--ink-2);line-height:1.35;padding:4px 0;border-bottom:1px solid var(--line)}
.md-list li:last-child{border-bottom:0}
.md-cta{display:inline-flex;align-items:center;gap:8px;margin-top:9px;padding:5px 0;background:transparent;border:0;cursor:pointer;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.05em;text-transform:uppercase;color:var(--accent-2);transition:color .2s}
.md-cta:hover{color:var(--ink)}
.md-cta .arw{transition:transform .2s var(--ease)}
.md-cta:hover .arw{transform:translateX(3px)}
@media (prefers-reduced-motion:reduce){.meta-drawer,.md-cta .arw{transition:none}}
/* v6.24: .mix como indicador executivo - 77% domina, 42/35/23 grandes na barra, legenda menor, nota discreta */
.mix{margin-top:12px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(14px,2vw,20px)}
.mix-kpi{display:flex;flex-wrap:wrap;align-items:center;column-gap:22px;row-gap:6px;margin-bottom:10px}
.mix-kpi .v{font-family:var(--display);font-weight:800;font-size:clamp(2.4rem,5.4vw,3.5rem);line-height:.92;letter-spacing:-.03em;flex:none;
  background:var(--exec-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.mix-kpi .v .pct{font-size:.44em;font-weight:700;letter-spacing:0}
.mix-kpi .k{font-family:var(--mono);font-size:.74rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-2);line-height:1.45;max-width:30ch}
.mix-kpi .sub{width:100%;margin-top:2px;font-family:var(--mono);font-size:.64rem;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-faint)}
.mix-kpi .sub b{color:var(--ink-dim);font-weight:600}
.mix .track{display:flex;height:clamp(58px,7vw,76px);border-radius:10px;overflow:hidden;background:var(--bg-3)}
.mix .seg{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;width:0;transition:width 1.1s var(--ease)}
.mix .seg b{font-family:var(--display);font-weight:800;font-size:clamp(1.15rem,2.7vw,1.62rem);letter-spacing:-.01em;color:#fff;white-space:nowrap}
.seg-l{font-family:var(--mono);font-weight:600;font-size:clamp(.56rem,1.15vw,.68rem);letter-spacing:.04em;color:rgba(255,255,255,.78);opacity:1;text-transform:uppercase;text-align:center;padding-inline:2px}
.mix .seg.det{background:var(--det)}.mix .seg.int{background:var(--int)}.mix .seg.hitl{background:var(--hitl)}
.mix .lbls{display:flex;flex-wrap:wrap;gap:9px 22px;margin-top:13px;font-size:.8rem;color:var(--ink-dim)}
.mix .lbls span{display:flex;align-items:center;gap:8px}
.mix .lbls i{width:9px;height:9px;border-radius:3px;flex:none}
.mix-note{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);font-size:.72rem;line-height:1.5;color:var(--ink-faint);max-width:82ch}
.mix-note b{color:var(--ink-dim);font-weight:600}

/* ---------- SOLUÇÕES ---------- */
.triad{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px}
.tcard{background:var(--surface);border-radius:var(--radius);padding:26px 24px 28px;position:relative;overflow:hidden}
.tcard .k{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;color:var(--ink-faint)}
.tcard .ic{width:32px;height:32px;margin:14px 0;color:var(--accent-2)}
.tcard h3{font-size:var(--t-card-h);font-weight:700;line-height:1.32;letter-spacing:-.006em}
.tcard p{margin-top:9px;font-size:var(--t-card);color:var(--ink-dim);line-height:1.56}
.tcard .bar{position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--spec);opacity:0;transition:opacity .3s}
.tcard:hover .bar{opacity:.9}
.kicker-badge{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-2);background:var(--surface-2);border:1px solid var(--line-2);border-radius:999px;padding:8px 16px;margin:4px 0 18px}
.leadcard{background:var(--surface);border-radius:var(--radius);padding:22px 20px 24px;position:relative;display:flex;flex-direction:column}
.leadcard.founder{border-color:transparent;position:relative;background:var(--bg-3)}
.leadcard.founder::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.4px;background:var(--spec);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.65}
/* v6.25: foto/identificacao integrada ao card (Foto -> Nome/Cargo -> Bio), tratamento consistente */
.lead-hd{display:flex;gap:13px;align-items:flex-start;margin-bottom:11px;position:relative}
.lead-photo{flex:none;width:58px;height:58px;border-radius:50%;position:relative;overflow:hidden;background:var(--surface-2);display:grid;place-items:center}
.lead-photo::after{content:"";position:absolute;inset:0;border-radius:50%;padding:1.5px;background:var(--spec);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.5;pointer-events:none}
.lead-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 28%;display:block}
.lead-photo--ph svg{width:30px;height:30px;fill:var(--ink-faint)}
.lead-hdtext{min-width:0;display:flex;flex-direction:column;flex:1}
.badge{display:inline-block;align-self:flex-start;font-family:var(--mono);font-size:.64rem;letter-spacing:.05em;text-transform:uppercase;color:var(--accent-2);background:var(--surface-2);border:1px solid var(--line-2);border-radius:999px;padding:5px 12px;margin-bottom:12px;position:relative}
.lead-hd .badge{margin-bottom:6px}
.leadcard h3{font-size:var(--t-card-h);font-weight:700;color:var(--ink);line-height:1.3;letter-spacing:-.006em;position:relative}
.lead-hd h3{font-size:.94rem}
.lead-role{font-size:.8rem;font-weight:500;color:var(--ink-dim);line-height:1.35;margin-top:3px;position:relative}
.leadcard p{margin-top:9px;font-size:var(--t-card);color:var(--ink-dim);line-height:1.55;position:relative}
.lead-more{position:relative;overflow:hidden}
.lead-more[hidden]{display:none}
.lead-toggle{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;margin-top:12px;padding:5px 0;background:transparent;border:0;cursor:pointer;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.07em;text-transform:uppercase;color:var(--accent-2);position:relative;transition:color .2s}
.lead-toggle:hover{color:var(--ink)}
.leadlink{display:inline-flex;align-items:center;gap:6px;margin-top:auto;font-size:.8rem;color:var(--ink-dim);border:1px solid var(--line);border-radius:9px;padding:6px 12px;position:relative;align-self:flex-end}
.leadlink svg{width:14px;height:14px;fill:currentColor}
.leadlink:hover{color:var(--accent-2);border-color:var(--line-2)}
.leadcard.founder-wide{display:grid;grid-template-columns:280px 1fr;gap:28px;align-items:start;padding:18px 28px 20px}
.fw-id{display:flex;flex-direction:column;padding-right:28px;border-right:1px solid var(--line)}
.fw-id .badge{white-space:nowrap;font-size:.68rem;letter-spacing:.03em;padding:5px 10px}
.fw-bio{min-width:0;display:flex;flex-direction:column}
@media (max-width:760px){
  .leadcard.founder-wide{grid-template-columns:1fr;gap:12px;padding:16px 14px 18px}
  .fw-id{padding-right:0;border-right:0;padding-bottom:12px;border-bottom:1px solid var(--line)}
  .fw-id .lead-photo{width:50px;height:50px}
  .fw-id .badge{margin-bottom:5px}
  .fs-stat{margin-top:10px;padding-top:8px}
  .fs-stat .big{font-size:1.35rem}
  .fs-stat p{font-size:.72rem}
  .fw-bio p{font-size:.8125rem;line-height:1.45;margin-top:7px}
  .leadlink{align-self:flex-start;margin-top:12px}
}
.fs-stat{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);position:relative}
.fs-stat .big{display:block;font-family:var(--display);font-weight:800;font-size:clamp(1.5rem,2.8vw,1.9rem);letter-spacing:-.02em;background:var(--exec-grad);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1}
.fs-stat p{margin-top:6px;font-size:.78rem;color:var(--ink-faint);line-height:1.4}
.team-subhead{margin:24px 0 16px;font-size:.95rem;font-weight:600;color:#94a3b8}
.leadcarousel.team-lc{--lc-vis:3;margin-top:16px}
@media (max-width:960px){.leadcarousel.team-lc{--lc-vis:2}}
@media (max-width:620px){.leadcarousel.team-lc{--lc-vis:1}}
.team-lc .leadcard{padding:20px 18px 22px}
.area-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:9px}
.team-lc .badge{font-size:.58rem;padding:4px 9px;margin-bottom:0}
.prof-tabs{display:flex;gap:4px;flex:none}
.prof-tabs button{width:18px;height:18px;padding:0;border:1px solid var(--line);border-radius:6px;background:transparent;color:var(--ink-faint);font-family:var(--mono);font-size:.62rem;line-height:1;display:grid;place-items:center;cursor:pointer;transition:border-color .18s,color .18s,background .18s}
.prof-tabs button:hover{border-color:var(--line-2);color:var(--ink)}
.prof-tabs button.is-on{background:var(--accent-2);border-color:var(--accent-2);color:#fff}
.prof{min-width:0;animation:profIn .22s var(--ease)}
@keyframes profIn{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.prof{animation:none}}
.prof-row1{display:flex;align-items:center;gap:8px}
.prof-photo{flex:none;width:26px;height:26px;border-radius:50%;background:var(--surface-2);display:grid;place-items:center;overflow:hidden}
.prof-photo svg{width:15px;height:15px;fill:var(--ink-faint)}
.prof-name{font-family:var(--sans);font-weight:600;font-size:.78rem;color:var(--ink);line-height:1.2}
.lc-track .prof-vp .prof-desc{font-family:var(--sans);font-weight:400;font-size:.5625rem;color:var(--ink-faint);line-height:1.4;text-transform:none;margin:5px 0 0}
.prof-plus{flex:none;width:18px;height:18px;margin-top:9px;border-radius:6px;border:1px solid var(--line);background:transparent;color:var(--ink-dim);font-family:var(--sans);font-size:.72rem;line-height:1;display:grid;place-items:center;cursor:pointer;transition:border-color .18s,color .18s,transform .18s}
.prof-plus:hover{border-color:var(--line-2);color:var(--ink)}
.prof-plus[aria-expanded="true"]{transform:rotate(45deg)}
.prof-more{margin-top:6px}
.prof-more[hidden]{display:none}
.prof-more p{font-family:var(--sans);font-size:.68rem;color:var(--ink-faint);line-height:1.45;margin:0}
.prof-li{display:inline-flex;align-items:center;gap:5px;margin-top:8px;font-family:var(--sans);font-size:.68rem;color:var(--ink-dim);opacity:.75}
.prof-li svg{width:12px;height:12px;fill:currentColor}
.modclusters{display:flex;flex-direction:column;gap:22px;margin-top:36px}
.modcluster-h{font-family:var(--mono);font-size:.78rem;letter-spacing:.05em;color:var(--ink-dim);display:flex;align-items:center;gap:10px;margin-bottom:10px}
.modcluster-h .mn{display:grid;place-items:center;width:22px;height:22px;border-radius:7px;background:var(--surface-2);color:var(--accent-2);font-weight:700;font-size:.72rem;flex:none}
.modcluster-h small{color:var(--ink-faint);font-weight:400;text-transform:none;letter-spacing:0;margin-left:2px}
.modgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.modcard{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px 18px;position:relative;transition:border-color .2s var(--ease),background .2s var(--ease)}
.modcard:hover{border-color:var(--line-2);background:var(--surface-2)}
.modcard .mnum{font-family:var(--mono);font-size:.68rem;color:var(--ink-faint)}
.modcard h4{margin-top:6px;font-size:.92rem;font-weight:700;color:var(--ink);line-height:1.35}
.modcard h4 .ac{color:var(--accent-2);font-weight:600}
.modcard .msub{margin-top:6px;font-size:.78rem;color:var(--ink-faint)}
.modcard.live{border-color:rgba(119,217,112,.35)}
.livebadge{display:inline-block;margin-top:8px;font-family:var(--mono);font-size:.66rem;letter-spacing:.04em;color:var(--good)}
/* v6.23: grid equilibrado - imagem/OKM ~39% da largura, cards dividem o restante; container estica as 2 colunas p/ mesma altura */
.mandala-grid{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:14px}
.mandala-col{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;border:0;background:transparent;border-radius:0;padding:0;width:100%}
.mandala{position:relative;width:100%;aspect-ratio:1/0.86;max-width:500px;margin-inline:auto}
.mandala canvas{position:absolute;inset:0;width:100%;height:100%}
/* v6.142: acordeao executivo vertical - era carrossel de passo unitario (drag/setas/dots),
   agora cada vertice e um botao que expande/recolhe no lugar; numeracao+titulo+resumo
   sempre visiveis, so a lista de modulos fica dentro do corpo colapsavel. Clique/foco/hover
   continuam acionando o destaque da mandala via focusStep() no <script> (mesmo mecanismo de
   antes, so a logica de troca de pagina/arraste foi removida). */
.phases{display:flex;flex-direction:column;gap:8px;width:100%;max-width:1100px}
.ph-viewport{display:block}
.ph-track{display:flex;flex-direction:column;gap:8px}
.phase{--sc:var(--accent-2);width:100%;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px 14px;cursor:pointer;transition:border-color .22s,background .22s,box-shadow .22s;color:inherit;font:inherit;display:block}
.phase:hover{border-color:var(--line-2)}
.phase.is-sel{background:var(--surface-2);border-color:var(--sc);box-shadow:0 0 0 1px var(--sc)}
.phase .top{display:flex;align-items:center;gap:8px;min-height:28px}
.phase .num{font-family:var(--mono);font-size:.62rem;flex:none;color:var(--sc)}
.phase h3{flex:1 1 auto;font-size:.86rem;font-weight:700;line-height:1.25}
.phase .chev{flex:none;display:block;color:var(--ink-faint);font-size:.9rem;transition:transform .22s var(--ease),color .22s var(--ease)}
.phase.is-open .chev{transform:rotate(90deg);color:var(--sc)}
.phase .summary{padding-top:3px;color:var(--ink-dim);font-size:.8rem;line-height:1.4}
.phase .body{max-height:0;overflow:hidden;opacity:0;transition:max-height .32s var(--ease),opacity .22s var(--ease)}
.phase.is-open .body{max-height:200px;opacity:1}
.phase .body .mods{margin-top:8px;font-family:var(--mono);font-size:.68rem;letter-spacing:.01em;color:var(--ink-dim);line-height:1.55}
.phase .body .mods-label{display:block;font-size:.65rem;letter-spacing:.08em;text-transform:uppercase;opacity:.7;color:var(--ink-faint);margin-bottom:3px}
@media (prefers-reduced-motion:reduce){.phase .chev,.phase .body{transition:none}}
@media (max-width:1024px){.mandala-grid{display:flex;flex-direction:column;grid-template-columns:none;align-items:center;width:100%;gap:22px}.mandala-col{width:100%}.mandala{order:-1;width:100%;max-width:min(500px,100%);margin:0 auto;aspect-ratio:1/1}.phases{width:100%;align-self:stretch}}
/* v6.142: MOBILE <=768px - tipografia compacta do acordeao (desktop e faixa 769-1024px INTACTOS) */
@media (max-width:768px){
  .phase{padding:12px 12px;border-radius:9px}
  .phase .top{gap:6px;min-height:32px}
  .phase .num{font-size:.55rem}
  .phase h3{font-size:.78rem;line-height:1.25;letter-spacing:-.01em}
  .phase .summary{padding-top:4px;font-size:.75rem;line-height:1.42}
  .phase .body .mods{font-size:.64rem;line-height:1.5}
}
/* ---------- ROADMAP: faixa de 4 marcos em ribbon (M0-M3) + Go-live ---------- */
/* v6.94: sem override de font-size/weight - herda de .sub-h (var(--t-2), 700, line-height 1.3),
   igualando rigorosamente ao subtitulo "Cubo de Execução Contínua® · Metodologia Exclusiva OctronX®" */
.roadmap-title .g{background:var(--exec-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.roadmap{margin-top:16px}
.roadmap-track{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr auto 1fr;align-items:stretch;gap:0 6px}
.milestone{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;
  padding:18px 14px;border-radius:12px;
  background:var(--surface);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:1.5px solid rgba(56,189,248,.12)}
/* ribbon: faixa reta com ponta triangular a direita (Marcos 0-3); Go-live sobrescreve p/ capsula abaixo */
.m-badge{display:inline-flex;align-items:center;justify-content:center;padding:5px 18px 5px 12px;flex:none;
  border-radius:0;clip-path:polygon(0 0,calc(100% - 9px) 0,100% 50%,calc(100% - 9px) 100%,0 100%);
  background:#3f63d9;color:#fff;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.05em;white-space:nowrap}
.m-body{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:0}
.m-icon{width:22px;height:22px;color:#38bdf8;flex:none}
.m-title{margin:0;color:var(--ink);font-weight:400;font-size:11px;line-height:1.32;max-width:20ch}
.m-foot{margin:0;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint)}
.m-arrow{display:flex;align-items:center;justify-content:center;flex:none;width:26px;height:26px;align-self:center;
  border-radius:50%;background:var(--surface);border:1px solid var(--line-2);color:var(--ink)}
.m-arrow svg{width:13px;height:13px}
.m-divider{width:0;border-left:2px dashed rgba(148,163,184,.3);align-self:stretch;flex:none;margin:10px 4px}

/* progressao cromatica Marco 0-3: ribbon + borda do card na mesma cor (paleta --spec da marca) */
.milestone.m0{border-color:#3f63d9}
.milestone.m0 .m-badge{background:#3f63d9}
.milestone.m1{border-color:#8a4be0}
.milestone.m1 .m-badge{background:#8a4be0}
.milestone.m2{border-color:#d4569f}
.milestone.m2 .m-badge{background:#d4569f}
.milestone.m3{border-color:#f58c3c}
.milestone.m3 .m-badge{background:#f58c3c}

/* Go-live — mesmo tratamento de destaque do card "System of Execution®" da Hero (.layer.exe); badge volta a capsula */
.milestone.m4{border-color:transparent;position:relative;background:var(--bg-3);box-shadow:0 10px 30px -12px rgba(56,189,248,.35)}
.milestone.m4::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.4px;background:var(--spec);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.7}
.milestone.m4 .m-badge{position:relative;border-radius:999px;clip-path:none;padding:4px 14px;
  background:rgba(56,189,248,.22);border:1px solid rgba(56,189,248,.5);color:var(--ink)}
.milestone.m4 .m-title{position:relative}
.go-live-cycle{position:relative;width:80px;height:80px;margin:0 auto}
/* v6.114: icone GO-LIVE premium - anel usa o mesmo degrade --spec da borda do card (gradiente
   definido no <svg>, ver goLiveGrad) em vez da cor solida verde; a ponta da seta (marker,
   fill:currentColor) fica no accent-2 (#52adfb), o azul mais proximo do degrade, dando um toque
   solido/premium a cada seta sem depender de gradiente dentro do marker (viewport local minusculo
   do <marker>, onde um gradiente userSpaceOnUse do documento nao se resolve de forma legivel).
   Orbita lenta (60s, ver keyframes go-live-orbit abaixo) so no anel - o logo fica parado, estavel,
   como nucleo; nada gira rapido como um spinner de carregamento. */
.cycle-svg{position:absolute;inset:0;width:100%;height:100%;color:var(--accent-2);stroke:url(#goLiveGrad);fill:none;
  stroke-width:3.2;stroke-linecap:round;filter:drop-shadow(0 0 3px rgba(82,173,251,.28));
  transform-origin:50% 50%;animation:go-live-orbit 60s linear infinite}
@keyframes go-live-orbit{to{transform:rotate(360deg)}}
/* Logo: nucleo estavel da composicao - mesma tecnica de pulso/onda luminosa sutil de .rig .sym
   (bloco "A superficie de execucao", ver @keyframes ox-corepulse), com raios de blur reduzidos
   proporcionalmente ao tamanho pequeno do icone; mesma cor de brilho (accent-2, rgba(82,173,251)).
   Tamanho sobe de 66% para 70% (ligeiramente maior, como pedido). */
.cycle-logo{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:70%;height:70%;object-fit:contain;
  animation:go-live-logopulse 3.6s var(--ease) infinite}
@keyframes go-live-logopulse{
  0%,100%{filter:drop-shadow(0 0 3px rgba(82,173,251,.30)) drop-shadow(0 2px 6px rgba(82,173,251,.20))}
  50%{filter:drop-shadow(0 0 7px rgba(82,173,251,.55)) drop-shadow(0 2px 10px rgba(82,173,251,.38))}}
@media (prefers-reduced-motion:reduce){.cycle-svg,.cycle-logo{animation:none}}

.nav-dock.roadmap-dock{display:none!important}
/* v6.141: Roadmap vira timeline vertical no mobile (era carrossel horizontal) - leitura de
   cima para baixo, metafora natural de cronograma. O dock de setas/dots fica permanentemente
   oculto (regra acima ja cobre isso, nao reativada aqui) - sem overflow horizontal nao ha
   necessidade de navegacao por swipe. Badges (.m-badge, regra ~linha 818) nao precisam mudar:
   a posicao "projeta para fora do topo do card" e independente da direcao de empilhamento. */
@media (max-width:760px){
  .roadmap-track{display:flex;flex-direction:column;gap:14px;overflow:visible;padding-bottom:0}
  .milestone{width:100%}
  .m-arrow{align-self:center;transform:rotate(90deg)}
  .m-divider{width:auto;height:0;border-left:none;border-top:2px dashed rgba(148,163,184,.3);align-self:stretch;margin:2px 24px}
}

/* ============================================================
   v6.71 · Roadmap — cores ORIGINAIS vivas (revoga a paleta fosca da v6.70)
   + respiro horizontal + alinhamento do GO-LIVE. 100% CSS; <script> intacto.
   ============================================================ */

/* [1] Remove os circulos indicadores ">" (divisor pontilhado antes do GO-LIVE mantido) */
.m-arrow{display:none!important}

/* [2] Cards: ancoragem dos badges + respiro; largura minima confortavel
       (em tela estreita o carrossel e acionado, sem comprimir nem colidir badge) */
.milestone{position:relative;overflow:visible;justify-content:center;gap:6px;padding:16px 16px 12px;min-width:175px!important}

/* [2] Badges: linha de centro sobre a borda superior (50% fora / 50% dentro), +~25% altura, chanfro 10px */
.m-badge{position:absolute;top:0;transform:translateY(-50%);z-index:2;
  padding:4px 20px 4px 14px;font-weight:700;letter-spacing:.05em;
  clip-path:polygon(0% 0%,calc(100% - 10px) 0%,100% 50%,calc(100% - 10px) 100%,0% 100%)!important}

/* [1] Cores de cada fase - badges translucidos na mesma densidade alfa do GO-LIVE (.22),
   preservando o matiz proprio de cada marco (Azul Royal / Roxo / Magenta / Laranja Tech) */
.milestone.m0 .m-badge{background:rgba(37,99,235,.22)!important;color:var(--ink)!important}
.milestone.m1 .m-badge{background:rgba(139,92,246,.22)!important;color:var(--ink)!important}
.milestone.m2 .m-badge{background:rgba(236,72,153,.22)!important;color:var(--ink)!important}
.milestone.m3 .m-badge{background:rgba(249,115,22,.22)!important;color:var(--ink)!important}

/* [3] GO-LIVE — pilula arredondada travada no centro da borda superior (50/50) */
.milestone.m4{position:relative;overflow:visible}
.milestone.m4 .m-badge{position:absolute!important;top:0!important;left:50%!important;
  transform:translate(-50%,-50%)!important;margin:0!important;z-index:3;
  clip-path:none!important;border-radius:9999px;padding:4px 18px;width:auto!important;
  background:rgba(56,189,248,.22);border:1px solid rgba(56,189,248,.5);color:var(--ink)}

/* [4] Bordas finas na cor de cada fase — MARCO 0-3 (GO-LIVE preserva a borda original) */
.milestone.m0{border:1px solid rgba(37,99,235,.35)!important}
.milestone.m1{border:1px solid rgba(139,92,246,.35)!important}
.milestone.m2{border:1px solid rgba(236,72,153,.35)!important}
.milestone.m3{border:1px solid rgba(249,115,22,.35)!important}

/* v6.93: correcao - a transparencia colorida (alpha .22, densidade do GO-LIVE) vai no BADGE
   "MARCO X" (acima), nao no corpo do card; o card em si fica solido e identico ao GO-LIVE
   (var(--bg-3)) nos 4 marcos, so a borda (alpha .35) preserva o matiz proprio de cada um */
.milestone.m0{background:var(--bg-3)!important}
.milestone.m1{background:var(--bg-3)!important}
.milestone.m2{background:var(--bg-3)!important}
.milestone.m3{background:var(--bg-3)!important}

/* [5] Icones squircle com tom translucido da propria fase (svg vira a caixa 44x44) */
.m-icon{box-sizing:border-box;width:44px;height:44px;padding:10px;border-radius:10px;border:1px solid transparent}
.milestone.m0 .m-icon{background:rgba(37,99,235,.12);border-color:rgba(37,99,235,.35);color:#38bdf8}
.milestone.m1 .m-icon{background:rgba(139,92,246,.12);border-color:rgba(139,92,246,.35);color:#c084fc}
.milestone.m2 .m-icon{background:rgba(236,72,153,.12);border-color:rgba(236,72,153,.35);color:#f472b6}
.milestone.m3 .m-icon{background:rgba(249,115,22,.12);border-color:rgba(249,115,22,.35);color:#fb923c}

/* GO-LIVE — sem squircle; ciclo do polvo nivelado na linha dos demais icones */
.milestone.m4 .go-live-cycle{width:54px;height:54px}

/* Bloco textual coeso: legenda colada ao titulo, sempre 1 linha; spacer alinha o titulo do GO-LIVE */
.m-body{flex:0 0 auto;gap:6px}
.m-foot{font-size:10px;letter-spacing:.05em;white-space:nowrap}
.milestone.m4::after{content:"";display:block;flex:none;height:12px}

/* [6] Roadmap: subtitulo mantem o TAMANHO e o GRADIENTE text-clip ORIGINAIS do site
       (line 572-573); aqui apenas o respiro vertical do bloco */
.roadmap-title{margin-top:48px;margin-bottom:24px}

/* [2][6] Vao horizontal entre os 5 cards + delimitacao vertical do bloco (Gestalt/proximidade):
   afasta das metricas acima, respiro para os badges (50% fora) sem colar no titulo, e corte suave abaixo */
/* v6.95: margin-bottom removida (era 40px, pensada p/ layout antigo sem legenda logo abaixo) -
   colapsava com o margin-top da .roadmap-caption, ganhando por ser maior; agora quem espaca
   os cards da legenda e soh o margin-top compacto de .roadmap-caption */
.roadmap-track{gap:0 32px!important;margin-top:36px!important}

/* [2] Desktop: grid de 5 colunas; ribbon projeta ~4px/~10px alem do card (pontas nao se tocam) */
@media (min-width:761px){
  .roadmap-track{grid-template-columns:1fr 1fr 1fr 1fr auto 1fr}
  .m-divider{margin-inline:0}
  .milestone .m-badge{left:-4px!important;width:calc(100% + 14px)!important}
  /* v6.95: GO-LIVE ganha a MESMA largura lateral das faixas dos Marcos 0-3 (100% do card + 14px),
     preservando o formato pilula/ovalado (border-radius:9999px, sem clip-path) - so a extensao
     horizontal casa com as demais, o texto continua centralizado via left:50%+translateX(-50%) */
  .milestone.m4 .m-badge{left:50%!important;width:calc(100% + 14px)!important}
}

/* Mobile (<=760px): carrossel intacto; badge projetado 50/50 sem corte no topo do card.
   Paridade com o desktop: MARCO 0-3 seguem a faixa chanfrada ultrapassando as laterais;
   somente GO-LIVE fica como pilula arredondada centralizada. */
@media (max-width:760px){
  .milestone{overflow:visible!important;padding-top:16px!important;padding-bottom:12px!important;min-height:auto!important;gap:6px!important}
  .roadmap-track{overflow-y:visible!important;padding-top:18px!important}
  .m-badge{top:0!important;left:-4px!important;width:calc(100% + 14px)!important;transform:translateY(-50%)!important;
    padding:4px 20px 4px 14px!important;border-radius:0!important}
  .milestone.m4 .m-badge{left:50%!important;width:calc(100% + 14px)!important;transform:translate(-50%,-50%)!important;
    padding:4px 18px!important;clip-path:none!important;border-radius:9999px!important}
}

/* ---------- PARA EMPRESAS ---------- */
.stack{margin-top:16px}
.stack.rail{--card-min:250px;--card-max:340px;--card-h:auto;--peek:14vw}
@media (min-width:1025px){.stack{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}}
.band{display:flex;flex-direction:column;align-items:flex-start;gap:9px;background:var(--surface);
  border:1px solid var(--line);border-left:3px solid var(--line-2);border-radius:10px;padding:16px 18px}
.band .lyr{font-family:var(--mono);font-size:.66rem;color:var(--ink-faint);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.band .nm{font-weight:600;color:var(--ink);font-size:.96rem}
.band .nm small{display:block;font-weight:400;color:var(--ink-dim);font-size:.82rem;font-family:var(--sans);margin-top:3px}
.band .strat{font-family:var(--mono);font-size:.64rem;letter-spacing:.06em;text-transform:uppercase;padding:5px 11px;border-radius:8px;line-height:1.35;margin-top:auto;align-self:flex-start}
.band.commodity{border-left-color:var(--ink-faint)}.band.commodity .strat{color:var(--ink-faint);background:rgba(126,144,168,.12)}
.band.substit{border-left-color:var(--accent-2)}.band.substit .strat{color:var(--accent-2);background:rgba(82,173,251,.12)}
.band.value{border-left-color:var(--good)}.band.value .strat{color:var(--good);background:rgba(119,217,112,.12)}
.tamnote{margin-top:16px;display:flex;flex-wrap:wrap;gap:10px 22px;font-family:var(--mono);font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-faint)}
.tamnote b{color:var(--accent-2);font-weight:600}
/* v6.26: impacto financeiro em 3 cards nivelados + nota centralizada na base */
.impact{margin-top:16px;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;align-items:stretch}
.impact .ic{background:var(--bg-3);border-radius:var(--radius);padding:11px 16px;position:relative;overflow:hidden;display:flex;flex-direction:column}
.impact .ic .big{font-family:var(--display);font-weight:800;font-size:1.7rem;color:#34d399;letter-spacing:-.02em}
.impact .ic p{margin-top:6px;color:var(--ink-dim);font-size:.9rem;line-height:1.5}
.impact .ic ul.plus{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:7px;font-size:.85rem;color:var(--ink-dim)}
.impact .ic ul.plus b{color:var(--ink);font-weight:600}
.impact .ic--pull{border-color:transparent}
.impact .ic--pull::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.4px;background:var(--spec);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.6}
.impact .ic--pull h3{font-family:var(--display);font-weight:800;font-size:var(--t-1);color:var(--ink);line-height:1.25;position:relative}
.impact .ic--pull p{position:relative}
.impact-note{text-align:center}
/* v6.141: Impacto Auditavel empilhado verticalmente no mobile (era carrossel horizontal) -
   os 3 cards de ROI ficam visiveis de uma vez, sem exigir swipe para o CFO ver -25%/-70%. */
@media (max-width:840px){.impact{grid-template-columns:1fr;gap:12px}.impact .seq-badge{display:block}}
.pull{margin-top:22px;position:relative;background:var(--bg-3);border-radius:var(--radius);padding:clamp(24px,3.4vw,38px)}
.pull::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.4px;background:var(--spec);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.6}
.pull h3{font-family:var(--display);font-weight:800;font-size:var(--t-2);color:var(--ink)}
.pull p{margin-top:10px;color:var(--ink-dim);font-size:.98rem;max-width:64ch}

/* matriz competitiva */
.matrix-shell{position:relative}
.matrix-wrap{margin-top:16px;overflow-x:auto;scrollbar-width:none;border:1.4px solid transparent;border-radius:16px;background:linear-gradient(var(--bg-2) 0 0) padding-box,var(--spec) border-box}
.matrix-wrap::-webkit-scrollbar{display:none}
/* v6.141: affordance de "tem mais coluna pra ver" - mesma tecnica de mask-image ja usada em
   .rail (linha ~1162), reaproveitada aqui para a tabela comparativa, que so pode rolar (nunca
   empilha, e inerentemente tabular). So visivel enquanto a 1a coluna nao estiver sticky (o
   fade da esquerda fica redundante com a sombra da coluna fixa no mobile, ver bloco 768px). */
.matrix-wrap{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 18px,#000 calc(100% - 18px),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 18px,#000 calc(100% - 18px),transparent 100%)}
.matrix-edge{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:30px;height:30px;border-radius:50%;
  display:none;place-items:center;border:1px solid var(--line-2);background:var(--surface);color:var(--accent-2);
  cursor:pointer;opacity:0;transition:opacity .2s var(--ease);pointer-events:none}
.matrix-edge svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.matrix-edge.prev{left:2px}.matrix-edge.next{right:2px}
.matrix-edge.is-visible{display:grid;opacity:1;pointer-events:auto}
/* v6.106: legenda equalizada com a nota de benchmark do #impacto ("Percentuais calibrados por
   quem mediu...") - mesma familia/tamanho/entrelinhas/cor (.cap-line.cl-wide em #impacto:
   var(--mono), .52rem, letter-spacing .03em, line-height 1.5 herdado da base, var(--ink-dim)),
   sem negrito nos termos (nenhum <b> no texto). Estrutura em 2 <p> (Nao/Fragmentado na 1a,
   Unificado/Continua na 2a, v6.154) e o respiro em relacao a tabela (margin-top) seguem os
   mesmos de antes. */
.matrix-legend{margin-top:10px;font-family:var(--mono);font-size:.52rem;letter-spacing:.03em;
  line-height:1.5;color:var(--ink-dim)}
.matrix-legend p{margin:0;font-weight:400}
table.matrix{width:100%;border-collapse:collapse;font-size:.82rem;line-height:1.35;min-width:940px}
table.matrix th,table.matrix td{padding:6px 14px;text-align:center;border-bottom:1px solid var(--line);vertical-align:middle}
/* v6.107: titulos da 1a linha reduzidos em 25% para equilibrio visual (mobile inclusive) -
   .86rem->.645rem nos 3 titulos de comparacao, .8rem->.6rem no titulo da 1a coluna (rowh).
   Dados do corpo (colunas 1-4, linhas 1-8) padronizados em uma unica cor/peso/tamanho -
   so a 1a linha de titulos, a ultima linha (tr.close) e a ultima coluna (.ox) ficam em
   destaque, como pedido; td.rowh perde o negrito/cor que antes so ele tinha entre os dados.
   v6.148: thead th.oxh span (titulo "OctronX OES") igualado ao thead th.rowh (.82rem/600/
   line-height 1.28) por pedido explicito - antes ficava maior/mais pesado (.98rem/800). */
table.matrix thead th{font-family:var(--display);font-size:.645rem;font-weight:700;color:var(--ink);text-align:center;line-height:1.28;letter-spacing:-.01em}
table.matrix thead th.rowh,table.matrix td.rowh{text-align:left}
/* v6.110: 1a coluna volta a rolar livre com as demais (sticky removido, v6.109 revertido) - o
   titulo da coluna agora usa o mesmo font-size das linhas de dados (.82rem), so o font-weight
   (600 no titulo, 400 nos dados) segue diferenciando os dois. */
table.matrix thead th.rowh{color:var(--ink);font-weight:600;font-size:.82rem;white-space:nowrap;padding-right:26px}
table.matrix td.rowh{color:var(--ink-dim);font-weight:400;font-size:.82rem;white-space:nowrap;padding-right:26px}
table.matrix .mk{color:var(--ink-dim)}
table.matrix .pt{color:var(--ink-dim)}
table.matrix col.oxcol{background:transparent}
/* v6.153: subtitulo de arquetipo de mercado (RPA/BPMN/iPaaS etc.) nas 3 colunas neutras da
   tabela comparativa - resolve o "vacuo de ancoragem" reportado por feedback de mercado sem
   citar marca registrada de terceiro (ver relatorio de Governanca de PI). display:block forca
   quebra pro proprio subtitulo, sem precisar de <br>; fonte no limite inferior legivel e cor
   subordinada (var(--ink-faint)) para nunca competir com o rotulo principal da coluna. */
.th-arch{display:block;margin-top:3px;font-size:.48rem;font-weight:400;letter-spacing:.02em;color:var(--ink-faint)}
table.matrix thead th.oxh{position:relative}
table.matrix thead th.oxh span{font-family:var(--display);font-size:.82rem;font-weight:600;line-height:1.28;letter-spacing:-.01em;background:var(--exec-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
table.matrix td.ox{color:var(--ink);font-weight:600}
/* v6.94: desacopla icone e texto na coluna OctronX - so o "check" recebe cor de validacao
   (verde-esmeralda tecnologico), o texto ("Unificado"/"Continua", v6.154) fica em branco/gelo
   neutro */
table.matrix td.ox .chk{display:inline-flex;align-items:center;gap:6px;color:#f8fafc;font-weight:600}
table.matrix td.ox .chk svg{width:15px;height:15px;color:#10b981}
table.matrix tr.close td{border-bottom:none;background:color-mix(in srgb,var(--accent-2) 6%,transparent)}
table.matrix tr.close td.rowh{font-family:var(--display);font-weight:800;color:var(--ink)}
table.matrix tr.close td.mk{font-weight:800;color:var(--ink)}
table.matrix tr.close td.ox{font-family:var(--display);font-weight:800;background:transparent}
table.matrix tr.close td.ox span{background:linear-gradient(135deg,#ffffff 0%,#60a5fa 100%);-webkit-background-clip:text;background-clip:text;color:transparent;font-size:1.25rem;font-weight:700}
@media (max-width:768px){
  /* v6.153: subtitulo de arquetipo oculto no mobile - as colunas 2-4 sao fixas em 135px
     (table-layout:fixed abaixo), largura insuficiente para uma 2a linha de texto sem
     truncar/quebrar feio. A Camada 1 (paragrafo acima da tabela) ja carrega a ancoragem
     de mercado no mobile, entao esconder aqui nao perde informacao, so evita aperto visual. */
  .th-arch{display:none}
  /* v6.112: width:max-content (linha abaixo) fazia o table-layout:fixed ser ignorado na pratica -
     com a largura da TABELA definida por uma palavra-chave intrinseca (max-content) em vez de um
     valor fixo, o navegador calculava o tamanho de cada coluna pelo conteudo mais longo (mesmo
     com white-space:normal), nao pelos <col width> abaixo - por isso a 1a coluna sempre ficava
     bem mais larga que os 245/265px declarados, tomando quase toda a viewport no mobile. Trocado
     por um width explicito (soma exata dos 5 <col>: 245+118*3+100=699px) para o table-layout:fixed
     realmente travar as proporcoes. 1a coluna tambem reduzida de 265px para 245px, deixando um
     "peek" visivel da 2a coluna (a coluna continua rolando livre, sem sticky - ver v6.110).
     Demais colunas (2/3/4/oxcol) inalteradas. */
  table.matrix{min-width:0;width:auto;table-layout:fixed}
  table.matrix col:first-child{width:clamp(165px,52vw,190px)}
  table.matrix col:not(.oxcol):not(:first-child){width:135px}
  table.matrix col.oxcol{width:110px}
  /* v6.113: o seletor abaixo precisa repetir "thead" para igualar a especificidade da regra
     base (table.matrix thead th.rowh, linha ~853, que fixa white-space:nowrap) - sem o "thead"
     aqui, a regra base (mais especifica) vencia mesmo dentro do breakpoint mobile, e o titulo
     "Camadas da Transformacao Operacional E2E" ficava em uma linha só, vazando (overflow visual)
     por cima do cabecalho da 2a coluna. Com a mesma especificidade, esta regra (que vem depois
     no arquivo) passa a vencer, e o titulo quebra linha normalmente dentro da coluna. */
  table.matrix thead th.rowh,table.matrix td.rowh{white-space:normal;font-size:.72rem;line-height:1.25;padding:10px 8px}
  /* v6.141: 1a coluna volta a ficar fixa (sticky) ao rolar horizontalmente no mobile. A
     tentativa anterior (v6.109) foi revertida na v6.110 por um problema de acabamento visual
     nunca documentado a fundo; desta vez o fundo e garantidamente OPACO (var(--bg-3), nao um
     tom translucido) para as demais colunas nunca "vazarem" por baixo durante o scroll, com
     borda divisoria + sombra reforcando a separacao. O fade de affordance de .matrix-wrap
     (linha ~870) e cancelado aqui: com a 1a coluna sticky e opaca, o fade do lado esquerdo
     ficaria por baixo dela e nunca apareceria, entao mante-lo so gastaria um compositing layer
     a toa. */
  .matrix-wrap{-webkit-mask-image:none;mask-image:none}
  table.matrix thead th.rowh,table.matrix td.rowh{position:sticky;left:0;z-index:2;background:var(--bg-3);
    border-right:1px solid var(--line);box-shadow:4px 0 8px -4px rgba(0,0,0,.4)}
  table.matrix tr.close td.rowh{background:var(--bg-3)}
}

/* ---------- CONTATO (v6.22: cabeçalho alinhado à esquerda, como os blocos 01-04) ---------- */
/* v6.26: Contato em 2 colunas (cabecalho ~42% | cards ~58%), colunas niveladas topo/base */
.cta-final{text-align:left}
.cta-final .wrap{display:block}
.cta-final .s-head{margin-inline:0;max-width:none;display:flex;flex-direction:column;justify-content:flex-start}
.cta-final h2{font-size:var(--t-3)}
/* v6.27: os 2 cards de acao SEMPRE lado a lado (inclusive mobile) */
.paths{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:740px;margin-top:20px;text-align:left;align-content:start}
.pcard{background:var(--bg-3);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;display:flex;flex-direction:column;align-items:flex-start}
.pcard h3{font-size:1.02rem;font-weight:700;line-height:1.25}.pcard p{margin-top:7px;color:var(--ink-dim);font-size:.85rem;line-height:1.5}
.pcard .btn{margin-top:14px}
.btn.cta-mini{padding:.5em .85em;font-size:.66rem;gap:.35em}
.cta-final .zc{grid-column:1 / -1;margin-top:6px;font-family:var(--mono);font-size:.66rem;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-faint)}
@media (max-width:820px){.cta-final .wrap{grid-template-columns:1fr}.cta-final .s-head{justify-content:flex-start}.paths{margin-top:6px;gap:10px}}
@media (max-width:560px){
  .paths{gap:8px}
  .pcard{padding:13px 13px}
  .pcard h3{font-size:.95rem}
  .pcard p{font-size:.8rem;margin-top:6px;line-height:1.45}
  .pcard .btn,.pcard .btn.ghost{margin-top:10px;font-size:.68rem;padding:.7em .95em;gap:.4em;white-space:normal;line-height:1.25}
}

/* ---------- FOOTER (v6.22: faixa compacta e densa) ---------- */
.ftr{background:var(--bg-2);border-top:1px solid var(--line);padding-block:14px 8px}
.ftr .wrap{display:grid;grid-template-columns:1.3fr .85fr .75fr .85fr auto;gap:24px 32px}
.ftr .brand-col p{margin-top:10px;font-size:.82rem;line-height:1.45;color:var(--ink-dim);max-width:34ch}
.ftr .brand-col .tl{margin-top:7px;font-family:var(--mono);font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--accent-2);line-height:1.1}
.ftr .brand-col .tl span{color:var(--ink-faint);display:block;margin-top:1px}
.ftr h4{font-family:var(--mono);font-size:8px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-dim);margin:0 0 2px;line-height:1}
.ftr ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0}
.ftr ul li{padding:0;border-bottom:none}
/* links e nomes das colunas: mesma fonte, peso, tamanho e entrelinha do texto legal de marcas de terceiros (.tm-disclaimer) */
.ftr ul a,.ftr ul .mailtxt{font-family:var(--mono);font-size:.58rem;font-weight:400;letter-spacing:.02em;line-height:1.55;margin:0;color:var(--ink-dim)}.ftr ul a:hover{color:var(--ink)}
.ftr ul .mailtxt{cursor:text}
.ftr .li a{display:inline-flex;align-items:center;gap:8px}.ftr .li a:hover{color:var(--accent-2)}
.ftr .socials{margin-left:-6px}
.ftr .legal{grid-column:1/-1;border-top:1px solid var(--line);margin-top:2px;padding-top:2px;display:flex;
  justify-content:flex-start;gap:14px;flex-wrap:wrap;font-family:var(--mono);font-size:8px;line-height:1;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-faint)}
/* v6.143: disclaimer institucional de marcas de terceiros - fundamento no relatorio de
   governanca de PI (08_Founder_Intelligence/Intellectual_Property); texto normal (nao
   uppercase) por ser uma frase corrida, nao um rotulo curto como .legal */
.ftr .tm-disclaimer{grid-column:1/-1;margin-top:10px;font-family:var(--mono);font-size:.58rem;letter-spacing:.02em;line-height:1.55;color:var(--ink-faint)}
@media (max-width:860px){.ftr .wrap{grid-template-columns:1fr 1fr}.ftr .brand-col{grid-column:1/-1}}
@media (max-width:520px){.ftr .wrap{grid-template-columns:1fr}}
.buildnote{background:var(--accent);color:#fff;font-family:var(--mono);font-size:.64rem;letter-spacing:.05em;text-transform:uppercase;text-align:center;padding:6px 12px}

/* ---------- CONTACT MODAL (compartilhado: ícone do header + botão "Fale com a Equipe") ---------- */
.modal{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:20px;visibility:hidden;opacity:0;transition:opacity .2s var(--ease),visibility .2s}
.modal.open{visibility:visible;opacity:1}
.modal-backdrop{position:absolute;inset:0;background:rgba(4,9,18,.62);backdrop-filter:blur(4px)}
/* v6.90: .modal-card so define o perimetro (moldura + borda-espectro via ::before); quem rola
   por dentro e o wrapper .modal-card-inner, senao o ::before absoluto rolava junto com o
   conteudo e a borda inferior cortava por cima do rodape */
.modal-card{position:relative;width:min(418px,100%);max-height:calc(100svh - 24px);overflow:hidden;background:var(--bg-2);
  border:1px solid var(--line);border-radius:var(--radius);
  display:flex;flex-direction:column;
  transform:translateY(10px) scale(.98);transition:transform .22s var(--ease)}
.modal.open .modal-card{transform:none}
.modal-card::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.4px;background:var(--spec);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.5;pointer-events:none;z-index:15}
.modal-card-inner{min-height:0;overflow-y:auto;padding:5px clamp(17px,3.4vw,22px) clamp(15px,2.8vw,20px)}
/* v6.94: cabecalho (logo+titulo+fechar) fica sticky DENTRO do scroll do modal-card-inner, com
   fundo/blur cobrindo o conteudo que passa por baixo; padding compensa via margem negativa
   para nao duplicar o respiro lateral ja aplicado no modal-card-inner. Dupla protecao contra a
   borda-espectro sumir no topo: (1) os 5px de padding-top acima (nao removidos pelo header)
   mantem uma folga fisica onde o fundo do header nao pinta por cima da borda; (2) o ::before
   ganhou z-index:15, maior que o z-index:10 do header, garantindo que o anel colorido sempre
   vença o empilhamento mesmo se a folga fisica nao bastar em algum viewport/motor de renderizacao;
   as bordas arredondadas do proprio header (top) evitam quina quadrada colidindo com o canto
   arredondado do card */
.modal-header{position:sticky;top:0;z-index:10;background:color-mix(in srgb,var(--bg-2) 88%,transparent);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-radius:calc(var(--radius) - 2px) calc(var(--radius) - 2px) 0 0;
  padding:clamp(13px,3vw,17px) clamp(17px,3.4vw,22px) 0;
  margin:0 calc(-1 * clamp(17px,3.4vw,22px)) 0}
.modal-x{position:absolute;top:9px;right:9px;z-index:2;width:28px;height:28px;border-radius:8px;border:1px solid var(--line-2);
  background:rgba(255,255,255,.05);color:var(--ink-dim);font-size:1.05rem;line-height:1;cursor:pointer}
.modal-x:hover{color:var(--ink);border-color:var(--line-2)}
.modal-logo-band{margin:0 0 clamp(9px,2.2vw,13px);padding:0;background:none;border-radius:0;display:flex;justify-content:center;align-items:center}
.modal-card h3{font-size:var(--t-1);text-align:center;margin:0 0 3px}
#cmTitle{font-size:calc(var(--t-1) * .75)}
.modal-sub{color:var(--ink-dim);font-size:.8rem;text-align:center;line-height:1.45}
.modal-sub b{color:var(--ink-2)}
.modal-form{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.modal-form label{display:flex;flex-direction:column;gap:4px;font-family:var(--mono);font-size:.58rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint)}
.modal-form input,.modal-form select,.modal-form textarea{font-family:var(--sans);font-size:.86rem;color:var(--ink);background:var(--surface);
  border:1px solid var(--line);border-radius:8px;padding:8px 11px;resize:vertical}
.modal-form input:focus,.modal-form select:focus,.modal-form textarea:focus{outline:2px solid var(--accent-2);outline-offset:1px;border-color:transparent}
.req{color:var(--accent-2);margin-left:1px}
.icon-field-wrap{position:relative;display:block}
.icon-field-wrap>input{width:100%;padding-right:38px}
.field-icon-btn{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:30px;height:30px;display:grid;place-items:center;background:none;border:0;color:var(--accent-2);cursor:pointer;border-radius:7px;padding:0}
.field-icon-btn:hover{background:rgba(255,255,255,.06)}
.field-icon-btn svg{width:16px;height:16px}
/* v6.91: combobox customizado de "Area ou processo" - datalist nativa nao permite cabecalho
   fixo, fonte compacta nem max-height com scroll no balao de sugestoes */
/* v6.96: causa raiz do dropdown "sempre aberto" - o display:block abaixo (adicionado para
   garantir coluna unica) e uma regra de AUTOR, que sempre vence o [hidden]{display:none} do
   stylesheet do proprio navegador (User-Agent), independente de especificidade. O atributo/
   propriedade "hidden" era alternado corretamente pelo JS, mas o CSS ignorava esse estado e
   sempre renderizava a lista visivel. .processo-menu[hidden] com especificidade maior restaura
   o toggle correto. */
.processo-menu{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:20;margin:0;padding:4px;
  list-style:none;background:var(--bg-3);border:1px solid var(--line-2);border-radius:10px;
  max-height:320px;overflow-y:auto;overflow-x:hidden;box-shadow:0 12px 30px -10px rgba(0,0,0,.55);
  display:block}
.processo-menu[hidden]{display:none!important}
/* v6.98: causa raiz do "so aparecem ~15-20 processos" - column-count:1/columns:1 (removidos
   acima) pareciam inofensivos ("1 coluna"), mas o motor de multicolunas do navegador usa
   column-count como sugestao, nao garantia: com max-height fixo e conteudo mais alto que
   isso, o navegador cria colunas ADICIONAIS ocultas (empurradas para a direita, fora da area
   visivel por causa do overflow-x:hidden) em vez de deixar o overflow-y:auto criar o scroll
   vertical esperado - so os primeiros ~15-20 itens (os que cabem na 1a "coluna" de 320px)
   ficavam visiveis e rolaveis; os demais 117+ ficavam la, mas invisiveis. display:block puro
   numa <ul>, sem nenhuma propriedade de multicolunas, ja e coluna unica por definicao - nunca
   deveria ter usado column-count aqui. */
/* v6.97: inversao tipografica - cabecalho fixo em negrito/destacado, itens leves/mono/compactos
   (a hierarquia estava invertida: itens em sans maior sem peso definido pareciam mais "fortes"
   que o cabecalho mono pequeno, mesmo sem font-weight explicito em nenhum dos dois). "15 a 20
   itens" e densidade visual da JANELA com scroll, nao o total carregado (137 sempre presentes,
   sempre rolaveis - ver correcao do multicolunas acima) */
/* v6.99: cabecalho sticky (fica visivel por cima dos itens ao rolar) + botao dedicado de
   fechar a lista, alinhados nas pontas da mesma barra */
/* v6.115: rotulo "Selecione um ou mais objetivos" reduzido - antes competia visualmente com as
   opcoes (mesmo em .58rem/9.28px, o negrito+versalete o deixava "mais forte" que os itens de
   11px); agora fica claramente menor (.5rem/8px) e sem negrito (400), so orientativo. Padding/
   margem vertical tambem reduzidos para o 1o item ("Alavancagem Operacional & ROI") ja aparecer
   logo ao abrir a lista, sem precisar rolar. Botao "X" (.processo-menu-close, abaixo) e os itens
   (li[role="option"], mais abaixo) ficam intocados. */
.processo-menu-title{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:8px;
  width:100%;padding:3px 6px 2px 8px;font-family:var(--mono);font-size:.5rem;font-weight:400;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-faint);background:var(--bg-3);border-bottom:1px solid var(--line);margin-bottom:0}
.processo-menu-close{flex:none;display:grid;place-items:center;width:18px;height:18px;padding:0;border:0;border-radius:5px;
  background:rgba(255,255,255,.08);color:var(--ink-faint);font-size:13px;line-height:1;cursor:pointer;
  transition:background .15s,color .15s}
.processo-menu-close:hover{background:rgba(82,173,251,.2);color:var(--accent-2)}
.processo-menu li[role="option"]{display:block;width:100%;text-align:left;padding:3px 8px;font-family:var(--mono);font-size:11px;font-weight:400;line-height:1.2;color:var(--ink-2);
  text-transform:none;letter-spacing:0;border-radius:6px;cursor:pointer}
.processo-menu li[role="option"]:hover,.processo-menu li[role="option"].is-active{background:rgba(255,255,255,.07);color:var(--ink)}
.processo-menu li[hidden]{display:none}
.modal-form textarea{width:100%;field-sizing:content;resize:none;min-height:48px;max-height:160px;overflow-y:auto}
/* v6.108: "Objetivo do contato" agora e multi-select, clonando o combobox de "Area ou processo"
   (removido). Cada <li role="option"> ganha uma casela custom (::before/::after) que so aparece
   quando aria-selected="true" - nao mexe em nenhuma propriedade do .processo-menu/li em si,
   so soma um indicador visual, entao a base do componente permanece pixel-a-pixel identica. */
#perfilMenu li[role="option"]{position:relative;padding-left:25px}
#perfilMenu li[role="option"]::before{content:"";position:absolute;left:8px;top:50%;transform:translateY(-50%);
  width:12px;height:12px;border-radius:3px;border:1px solid var(--line-2);background:transparent;
  transition:background .15s,border-color .15s}
#perfilMenu li[role="option"][aria-selected="true"]::before{background:var(--good);border-color:var(--good)}
#perfilMenu li[role="option"][aria-selected="true"]::after{content:"";position:absolute;left:11px;top:50%;
  width:3px;height:6px;border:solid var(--good-ink);border-width:0 1.6px 1.6px 0;transform:translateY(-70%) rotate(45deg)}
#perfilMenu li[role="option"][aria-selected="true"]{color:var(--ink)}
/* v6.111: a lista de #perfilMenu escapa do scroll/clipping do modal (.modal-card tem
   overflow:hidden, .modal-card-inner tem overflow-y:auto) - troca position:absolute (herdado
   de .processo-menu) por fixed, com left/top/width calculados via JS (posicionaPerfilMenu) toda
   vez que abre, rola ou redimensiona. Sem max-height/scroll interno no desktop - as 6 opcoes
   cabem inteiras sempre; se nao houver espaco abaixo do campo, abre para cima (flip) em vez de
   cortar. */
#perfilMenu{position:fixed;max-height:none;overflow:visible}
/* v6.138: contencao mobile - em telas estreitas o campo "Objetivo do contato" fica perto da
   base do formulario e o flip (acima) por si so nao garante espaco suficiente para as 6
   opcoes. Cap de altura com scroll interno prontos para qualquer combinacao de tamanho de tela
   e posicao do campo, sem depender do calculo de flip do JS.
   v6.140: unidade trocada de vh para svh (small viewport height), mesmo padrao ja usado em
   .section e .modal-card (linha ~967) - vh conta a altura "grande" do viewport (com a barra de
   endereco do navegador mobile recolhida), que pode ser maior que a area realmente visivel no
   momento em que o menu abre, causando overflow residual em Safari/Chrome mobile reais. svh
   garante a menor altura possivel, nunca maior que o espaco visivel de fato. */
@media (max-width:640px){
  #perfilMenu{max-height:min(48svh,calc(100svh - 200px));overflow-y:auto;-webkit-overflow-scrolling:touch}
}
/* Camada 2 (mensagem): visibilidade controlada por JS assim que >=1 objetivo e selecionado */
.l3-wrap{display:none;margin-top:4px}
.modal-form .l3-label{display:block;width:100%;max-width:none;text-transform:none;letter-spacing:0;font-family:var(--sans);font-size:11px;color:var(--ink-faint);margin-bottom:4px;font-weight:400;white-space:normal}
.modal-form .btn{margin-top:7px;justify-content:center}
.hp-field{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.modal-status{margin-top:10px;font-size:.8rem;line-height:1.45;text-align:center;color:var(--ink-dim)}
.modal-status.is-ok{color:var(--good)}
.modal-status.is-err{color:var(--bad)}
/* v6.108: validacao customizada dos campos obrigatorios - o "*" fica neutro (--accent-2, ja era o
   padrao) ate a 1a tentativa de envio; so entao vira vermelho nos campos vazios e verde (com o
   proprio caractere trocado por um check) nos campos ja preenchidos corretamente */
.req.is-invalid{color:var(--bad)}
.req.is-valid{color:var(--good)}
/* v6.92: as linhas do rodape do modal uniformizadas no mesmo tamanho/entrelinha compactos */
.modal-alt{margin:2px 0;font-size:11px;color:var(--ink-faint);text-align:center;line-height:1.2}
.modal-alt span{color:var(--accent-2)}
.modal-req-note{margin:2px 0;font-size:11px;color:var(--ink-faint);text-align:center;opacity:.7;line-height:1.2}
.pw-wrap{position:relative;display:block}
.pw-wrap>input{width:100%}
.modal-form .pw-wrap>input{padding-right:38px}
.pw-eye{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:30px;height:30px;display:grid;place-items:center;background:none;border:0;color:var(--ink-faint);cursor:pointer;border-radius:7px;padding:0}
.pw-eye:hover{color:var(--ink-2)}
.pw-eye svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.modal-form .login-row{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:1px}
.modal-form .lg-check{flex-direction:row;align-items:center;gap:6px;text-transform:none;letter-spacing:0;font-family:var(--sans);font-size:.78rem;color:var(--ink-dim);cursor:pointer}
.modal-form .lg-check input{width:14px;height:14px;accent-color:var(--accent-2);flex:none;margin:0}
.lg-forgot{background:none;border:0;padding:0;font-family:var(--sans);font-size:.78rem;color:var(--accent-2);cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.lg-forgot:hover{color:var(--ink)}
.modal-form .login-msg{margin-top:2px;font-size:.78rem;color:var(--good);background:color-mix(in srgb,var(--good) 12%,transparent);border:1px solid color-mix(in srgb,var(--good) 32%,transparent);border-radius:9px;padding:8px 11px;line-height:1.4}
.is-press{transform:scale(.96);opacity:.82;transition:transform .07s var(--ease),opacity .07s var(--ease)}
@media (max-height:820px){
  .modal{padding:12px}
  .modal-logo-band{margin-bottom:3px}
  .modal-logo-band .mark{width:24px;height:24px}
  .modal-card h3{margin-bottom:2px}
  .modal-form{gap:5px;margin-top:7px}
  .modal-sub{font-size:.74rem;line-height:1.35;margin-top:2px}
  .modal-form input,.modal-form select,.modal-form textarea{padding:6px 10px}
  .modal-form label{gap:3px}
  .pf-lead{margin-top:2px}
  .pf-group{margin-top:4px}
  .pf-hint{margin-top:3px}
  .l3-wrap{margin-top:2px}
  .modal-form .l3-label{margin-bottom:2px}
  #contactForm textarea{height:36px}
  .modal-form .btn{margin-top:4px}
}
@media (prefers-reduced-motion:reduce){.modal,.modal-card{transition:none}}


/* ============ RAIL · esteira horizontal responsiva (ativa em ≤1024px) ============ */
.rail{--card-min:240px;--card-max:300px;--card-h:auto;--rail-gap:14px;--peek:14vw}
.metrics.rail{--card-min:140px;--card-max:172px;--card-h:132px;--rail-gap:8px;--peek:56vw}
.triad.rail{--card-min:244px;--card-max:300px;--card-h:auto;--peek:14vw}
.modgrid.rail{--card-min:200px;--card-max:250px;--card-h:auto;--rail-gap:12px;--peek:12vw}
.rail-wrap{position:relative}
.nav-dock.rail-dock{display:none!important}
.rail-wrap.rail-has-overflow .nav-dock.rail-dock{display:flex!important}
.rail-nav[hidden]{display:none}
@media (max-width:1024px){
  .rail{display:flex;flex-wrap:nowrap;gap:var(--rail-gap);overflow-x:auto;overflow-y:visible;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;touch-action:pan-x;
    scroll-padding-inline:var(--pad);padding-bottom:2px;scrollbar-width:none;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 24px,#000 calc(100% - 24px),transparent 100%);
            mask-image:linear-gradient(90deg,transparent 0,#000 24px,#000 calc(100% - 24px),transparent 100%)}
  .rail::-webkit-scrollbar{display:none}
  .rail>*{flex:0 0 clamp(var(--card-min),calc(100% - var(--peek)),var(--card-max));scroll-snap-align:start;min-height:var(--card-h)}
  .rail:not(:has(> :nth-child(2))){display:block;-webkit-mask-image:none;mask-image:none}
  /* v6.67: metrics NAO usa grid/wrap - herda a esteira flex de .rail (1 linha unica, nunca empilha) */
  .metrics.rail{background:transparent;border-radius:0;overflow-x:auto;overflow-y:visible;
    -webkit-mask-image:none;mask-image:none}
  .metrics.rail .metric,.metrics.rail .metric-cap{border:1px solid var(--line);border-radius:12px;padding:18px 12px}
  .metrics.rail .metric:not(.lead),.metrics.rail .metric-cap:not([aria-expanded="true"]){background:var(--surface)}
  .section.alt .metrics.rail .metric:not(.lead),.section.alt .metrics.rail .metric-cap:not([aria-expanded="true"]){background:var(--surface)}
  .metrics.rail .metric .v,.metrics.rail .metric-cap .v{font-size:clamp(1.15rem,0.9rem + 1.5vw,1.55rem)}
  .metrics.rail .metric .l,.metrics.rail .metric-cap .l{font-size:.56rem}
}
/* v6.141: Propriedade Intelectual desacoplada do rail no mobile - grid compacto 2 colunas
   substitui o carrossel horizontal herdado de .rail, exibindo os 5 numeros de autoridade
   de uma vez (o wrapper/dock que o JS generico de .rail insere continua existindo no DOM,
   mas fica sempre oculto porque o grid nao gera overflow horizontal - checkOverflow() do
   proprio script ja cobre esse caso, nenhuma linha de <script> precisou mudar).
   v6.148: a regra base .rail (linha ~1176, ativa ate 1024px) define touch-action:pan-x -
   como o seletor .metrics.rail ainda casa com .rail nesse range, o pan-x permanecia mesmo
   depois do display:grid acima, bloqueando o gesto de scroll vertical nativo do celular ao
   tocar nos cards. Corrigido com touch-action:pan-y (marcado !important para vencer com
   certeza a regra pan-x de origem, que tem a mesma especificidade de seletor). */
@media (max-width:640px){
  .metrics.rail{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;overflow:visible;
    -webkit-mask-image:none;mask-image:none;touch-action:pan-y!important}
  .metrics.rail .metric,.metrics.rail .metric-cap{padding:14px 10px;touch-action:pan-y!important}
}
@media (prefers-reduced-motion:reduce){.rail{scroll-behavior:auto}}

/* ============ LIDERANÇA · carrossel (3 cards visíveis + setas) - v6.21 ============ */
.leadcarousel{--lc-vis:3;--lc-gap:16px;margin-top:22px}
@media (max-width:960px){.leadcarousel{--lc-vis:2}}
@media (max-width:620px){.leadcarousel{--lc-vis:1;--lc-gap:12px}}
.lc-viewport{overflow:hidden;touch-action:pan-y}
.lc-track{display:flex;gap:var(--lc-gap);align-items:stretch;will-change:transform;transition:transform .42s var(--ease)}
@media (prefers-reduced-motion:reduce){.lc-track{transition:none}}
.lc-track>.leadcard{flex:0 0 calc((100% - (var(--lc-vis) - 1) * var(--lc-gap)) / var(--lc-vis));margin:0}
.lc-track .leadcard h3{font-size:var(--t-card-h)}
.lc-track .leadcard p{font-size:var(--t-card)}
/* ---------- NAV-DOCK: pilula de navegacao (setas + dots + contador) p/ carrosseis mobile ---------- */
.nav-dock{display:flex;align-items:center;justify-content:center;gap:6px;width:fit-content;margin:10px auto 0;
  padding:4px 6px;border-radius:999px;background:transparent;
  -webkit-backdrop-filter:none;backdrop-filter:none;border:0}
.dock-arrow{width:22px;height:22px;flex:none;display:grid;place-items:center;border-radius:50%;border:0;
  background:transparent;color:var(--ink-dim);font-size:.8rem;line-height:1;cursor:pointer;transition:background .18s,color .18s}
.dock-arrow:hover{background:rgba(56,189,248,.15);color:#fff}
.dock-arrow:disabled{opacity:.32;cursor:default}
.dock-dots{display:flex;align-items:center;gap:5px}
.dock-dots .dock-dot{width:5px;height:5px;padding:0;border:0;border-radius:50%;background:rgba(148,163,184,.35);
  cursor:pointer;transition:background .2s,transform .2s;flex:none}
.dock-dots .dock-dot.is-on{background:#38bdf8;transform:scale(1.2)}
.dock-count{font-family:var(--mono);font-size:.58rem;letter-spacing:.05em;color:var(--ink-faint);min-width:3.8em;text-align:center;white-space:nowrap}

/* ---------- OCTO: botao flutuante (mascote) + modal enxuto de qualificacao ---------- */
.ox-fab{position:fixed;right:24px;bottom:24px;bottom:max(24px,env(safe-area-inset-bottom));z-index:99;
  display:grid;place-items:center;width:54px;height:54px;padding:0;border-radius:50%;cursor:pointer;font:inherit;
  color:rgba(255,255,255,.86);border:1px solid rgba(150,185,255,.26);perspective:150px;
  /* profundidade: luz de topo-esquerda (azul), sombra interna violeta embaixo e halo externo */
  background:radial-gradient(circle at 30% 22%,rgba(120,165,255,.42),rgba(52,86,200,.22) 46%,rgba(14,22,60,.62) 100%);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.30),inset 0 -9px 14px -4px rgba(24,20,90,.65),
    0 10px 22px -8px rgba(0,0,0,.7),0 0 0 1px rgba(2,4,12,.35),0 0 20px -6px rgba(110,140,255,.45);
  transition:transform .2s var(--ease),color .2s,border-color .2s,box-shadow .2s,opacity .2s}

/* ---- Octo com profundidade (CSS) ----
   Camadas: (1) halo volumetrico azul/violeta atras (::before), (2) silhueta com drop-shadow multicamada (rim light fria no topo,
   contato escuro embaixo, brilho azul externo), (3) sombreamento por gradiente recortado na propria silhueta (::after, via mask),
   (4) leve inclinacao em perspectiva + flutuacao. Tamanho pela variavel --w.
   SUBSTITUICAO FUTURA por render 3D: trocar o src do <img> e adicionar data-render="asset" ao .octo-3d (desliga halo, sombreamento,
   inclinacao e filtros; o container, o tamanho e a animacao de flutuacao continuam). */
.octo-3d{--w:34px;--tilt-x:9deg;--tilt-y:-11deg;position:relative;display:block;width:var(--w);height:calc(var(--w)*.7875);
  pointer-events:none;transform:rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  animation:ox-octo-float 5.2s ease-in-out infinite;transition:transform .25s var(--ease)}
.octo-3d::before{content:"";position:absolute;inset:-46% -42%;z-index:-1;border-radius:50%;
  background:radial-gradient(circle at 50% 44%,rgba(120,170,255,.50),rgba(124,92,255,.26) 42%,rgba(124,92,255,0) 70%);filter:blur(4px)}
.octo-3d img{position:relative;display:block;width:100%;height:auto;opacity:.97;
  filter:drop-shadow(0 -1px 0 rgba(200,222,255,.60)) drop-shadow(0 1px 1px rgba(2,6,24,.85))
         drop-shadow(0 4px 5px rgba(2,6,24,.55)) drop-shadow(0 0 8px rgba(96,150,255,.42))}
.octo-3d::after{content:"";position:absolute;inset:0;
  background:linear-gradient(150deg,rgba(255,255,255,0) 28%,rgba(92,126,240,.55) 72%,rgba(124,92,255,.72) 100%);
  -webkit-mask:url(/octo-mascote.png) center/contain no-repeat;mask:url(/octo-mascote.png) center/contain no-repeat}
.octo-3d[data-render="asset"]{transform:none}
.octo-3d[data-render="asset"]::before,.octo-3d[data-render="asset"]::after{display:none}
.octo-3d[data-render="asset"] img{filter:none;opacity:1}
@keyframes ox-octo-float{0%,100%{translate:0 1px}50%{translate:0 -3px}}
.ox-fab:hover{transform:translateY(-2px);color:#fff;border-color:rgba(170,200,255,.45);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.38),inset 0 -9px 14px -4px rgba(24,20,90,.65),
    0 14px 26px -8px rgba(0,0,0,.72),0 0 0 3px rgba(120,150,255,.07),0 0 26px -4px rgba(120,150,255,.60)}
.ox-fab:hover .octo-3d{--tilt-x:3deg;--tilt-y:-4deg;animation-play-state:paused}
.ox-fab:focus-visible{outline:2px solid var(--accent-2);outline-offset:3px}
/* nao compete com o drawer do menu (que no celular ocupa a largura toda) */
body:has(#mmenu.open) .ox-fab{opacity:0;pointer-events:none}
@media (max-width:600px){.ox-fab{width:50px;height:50px}.ox-fab .octo-3d{--w:31px}}
@media (prefers-reduced-motion:reduce){.ox-fab{transition:none}.ox-fab:hover{transform:none}.octo-3d{animation:none}}

/* Botao flutuante com o glifo do WhatsApp em tracos finos (linha de 1,4 px, borda de 1 px): reconhecivel sem disputar atencao
   com o conteudo. O mascote do Octo so aparece dentro do modal. Opacidade plena so no hover/foco. */
.ox-fab{width:52px;height:52px;color:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.22);opacity:.9;
  background:radial-gradient(circle at 30% 22%,rgba(27,42,82,.72),rgba(10,17,38,.78) 72%);
  box-shadow:0 8px 18px -10px rgba(0,0,0,.7),0 0 16px -8px rgba(110,140,255,.28)}
.ox-fab svg{display:block;width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.ox-fab svg path{vector-effect:non-scaling-stroke}
.ox-fab:hover,.ox-fab:focus-visible{opacity:1;color:#fff;border-color:rgba(255,255,255,.5);box-shadow:0 12px 24px -10px rgba(0,0,0,.75),0 0 0 3px rgba(120,150,255,.10),0 0 22px -6px rgba(120,150,255,.5)}
@media (max-width:600px){.ox-fab{width:48px;height:48px}.ox-fab svg{width:24px;height:24px}}
/* vida discreta: flutuacao lenta do botao (propriedade "translate", sem conflito com o transform do hover) e respiracao de opacidade
   do glifo; ciclo de 5,2 s / 4,6 s, so compositor (translate e opacity), sem repaint. Pausa no hover/foco; desligada com reduced-motion. */
.ox-fab{animation:ox-fab-float 5.2s ease-in-out infinite}
.ox-fab svg{animation:ox-fab-breathe 4.6s ease-in-out infinite}
.ox-fab:hover,.ox-fab:focus-visible{animation-play-state:paused}
.ox-fab:hover svg,.ox-fab:focus-visible svg{animation-play-state:paused;opacity:1}
@keyframes ox-fab-float{0%,100%{translate:0 0}50%{translate:0 -3px}}
@keyframes ox-fab-breathe{0%,100%{opacity:.72}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.ox-fab,.ox-fab svg{animation:none}}
.octo-hello{display:flex;gap:12px;align-items:flex-start;margin:6px 0 2px;padding-right:30px}
.octo-avatar{flex:none;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;perspective:150px;
  background:radial-gradient(circle at 30% 22%,rgba(120,165,255,.46),rgba(52,86,200,.24) 48%,rgba(14,22,60,.66) 100%);
  border:1px solid rgba(150,185,255,.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.30),inset 0 -9px 14px -4px rgba(24,20,90,.65),0 8px 16px -8px rgba(0,0,0,.7),0 0 18px -5px rgba(110,140,255,.45)}
.octo-avatar .octo-3d{--w:36px}
.octo-bubble{margin:0;padding:10px 12px;font-size:.84rem;line-height:1.5;letter-spacing:.004em;color:var(--ink-2);
  background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:4px 12px 12px 12px}
.octo-bubble--ok{border-color:rgba(96,150,255,.38);background:rgba(96,150,255,.07)}
.octo-done{display:flex;flex-direction:column;gap:12px;margin-top:14px}
.octo-done .btn{justify-content:center;text-align:center}
/* o display:flex acima venceria o atributo [hidden] (regra de autor > UA) */
.modal-form[hidden],.octo-done[hidden]{display:none!important}
.octo-done:not([hidden]) ~ .modal-req-note{display:none}
/* o balao do Octo e longo: o cabecalho rola junto (nao fica sticky) para nao roubar altura em telas curtas */
.modal-header.octo-head{position:static;-webkit-backdrop-filter:none;backdrop-filter:none;background:none}
.octo-form textarea,#octoForm textarea{min-height:76px;resize:vertical}