/* AGGU · tokens (fonte: Home V1 aprovada). Paleta oficial do Manual da Marca + derivados funcionais. */
:root{
  /* Paleta oficial do Manual da Marca */
  --paper:#F5F5F7;            /* base clara */
  --ink:#1D1D1F;              /* texto / base escura */
  --neutral:#AAAAAA;          /* neutro de apoio (divisores, ícones) */
  --blue:#007AFF;             /* foco */
  /* Derivados funcionais (não são novas cores de marca) */
  --white:#FFFFFF;            /* superfícies de interface, como nos mockups do manual */
  --ink-2:rgba(29,29,31,.64); /* texto secundário legível sobre o claro */
  --ink-3:rgba(29,29,31,.62); /* escurecido 24/10 (contraste AA, aprovado) */
  --line:rgba(29,29,31,.09);
  --line-2:rgba(29,29,31,.14);
  --wash:rgba(29,29,31,.045);
  --paper-2:rgba(245,245,247,.66);  /* texto secundário sobre o escuro */
  --paper-3:rgba(245,245,247,.62); /* escurecido 24/10 */
  --line-d:rgba(245,245,247,.12);
  --surface-d:#28282B;        /* superfície sobre o escuro (manual, p.07) */
  --surface-d2:#323236;
  --blue-wash:rgba(0,122,255,.09);
  --ok:#34C759; --alert:#FF3B30;  /* estados de interface, como no manual */
  --blue-hover:#0068DA;       /* hover do botão primário */
  --blue-text:#0060C9;        /* azul como TEXTO sobre fundos claros/tingidos (contraste) */
  --ok-text:#1F7A3A; --alert-text:#B4231B;  /* texto de estado sobre chips tingidos */
  /* Breakpoints (referência; CSS não aceita var() em media query):
     1200 desktop (capítulos) · 1080 header compacto · 980/900 colunas → 1 · 760 abas em faixa · 680 menu celular · 560/520 celular */

  --f-brand:"Sora", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-ui:"Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --fs-display:clamp(2.45rem, 1.4rem + 3.2vw, 4.2rem);
  --fs-h2:clamp(1.9rem, 1.2rem + 2.2vw, 3.1rem);
  --fs-h3:clamp(1.3rem, 1.1rem + .7vw, 1.65rem);
  --fs-lead:clamp(1.08rem, 1rem + .32vw, 1.28rem);
  --fs-body:1rem;
  --fs-small:.875rem;
  --fs-label:.75rem;

  --gutter:clamp(16px, 4.2vw, 56px);
  --maxw:1240px;
  --space-section:clamp(72px, 2rem + 5vw, 112px);
  --space-inner:clamp(48px, 2rem + 3vw, 88px);  /* divisor interno de capítulo */
  --space-head:min(clamp(32px, 1.25rem + 2.2vw, 56px), 4.5vh);  /* cabeçalho de seção → produto */
  --space-sub:clamp(28px, 1.2rem + 1.4vw, 44px);   /* produto → microcopy */
  --header-h:76px;
  --r-ui:16px; --r-sm:10px; --r-btn:12px;
  --shadow-ui:0 1px 2px rgba(29,29,31,.04), 0 18px 40px -22px rgba(29,29,31,.22);
  --ease:cubic-bezier(.2,.7,.2,1);
  color-scheme:light;
}

/* AGGU · base e componentes reutilizáveis
   Extraídos da Home V1 aprovada. São PRIMITIVOS e PADRÕES — não layouts de página.
   Depende de tokens.css. Valores idênticos aos da Home. */

/* ===================== Base ===================== */
*,*::before,*::after{box-sizing:border-box}
/* Scrollbars nativas ocultas; rolagem preservada (wheel, trackpad, touch, teclado, âncoras). */
html,body,*{scrollbar-width:none;-ms-overflow-style:none}
html::-webkit-scrollbar,body::-webkit-scrollbar,*::-webkit-scrollbar{width:0;height:0;display:none;background:transparent}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-brand);font-size:var(--fs-body);line-height:1.6;font-weight:400;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:6px}
[hidden]{display:none!important}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:var(--gutter);top:-60px;z-index:100;background:var(--ink);color:var(--paper);padding:10px 14px;border-radius:8px;text-decoration:none}
.skip:focus{top:10px}
main section[id]{scroll-margin-top:0}

/* ===================== Layout ===================== */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--space-section)}
.dark{background:var(--ink);color:var(--paper)}
.white{background:var(--white)}
.stack{display:flex;flex-direction:column}
.stack-s{display:flex;flex-direction:column;gap:14px}
.stack-m{display:flex;flex-direction:column;gap:24px}
.stack-l{display:flex;flex-direction:column;gap:40px}
.stack-m > .link,.stack-l > .link{align-self:flex-start}
.lines{display:flex;flex-direction:column}
.lines span{display:block}

/* ===================== Tipografia ===================== */
h1,h2,h3,h4{font-weight:400;margin:0;text-wrap:balance}
p{margin:0}
.h1{font-size:var(--fs-display);line-height:1.02;letter-spacing:-.04em}
.h2{font-size:var(--fs-h2);line-height:1.06;letter-spacing:-.032em}
.h3{font-size:var(--fs-h3);line-height:1.2;letter-spacing:-.018em}
.lead{font-size:var(--fs-lead);line-height:1.55;color:var(--ink-2);max-width:40ch;letter-spacing:-.005em}
.body{color:var(--ink-2);max-width:58ch}
.body + .body{margin-top:1em}
.eyebrow{font-size:var(--fs-label);letter-spacing:.09em;text-transform:uppercase;color:var(--blue-text);font-weight:500} /* azul-texto: contraste AA (aprovado 24/10) */
:is(.dark,.site-footer,.x-band,[data-theme=dark]) .eyebrow{color:#4DA3FF}
.quiet{color:var(--ink-3)}
.label-tag{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-brand);font-size:var(--fs-label);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-2);font-weight:500}
.label-tag::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.dark .lead,.dark .body{color:var(--paper-2)}
.dark .quiet{color:var(--paper-3)}
.dark .label-tag{color:var(--paper-2)}

/* ===================== Ações ===================== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 22px;border-radius:var(--r-btn);border:0;cursor:pointer;text-decoration:none;font-family:var(--f-brand);font-size:.95rem;font-weight:500;letter-spacing:-.005em;transition:background .2s var(--ease),transform .2s var(--ease),color .2s}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--blue);color:#fff}
.btn-primary:hover{background:var(--blue-hover)}
.btn-quiet{background:var(--wash);color:var(--ink)}
.btn-quiet:hover{background:rgba(29,29,31,.08)}
.dark .btn-quiet{background:rgba(245,245,247,.08);color:var(--paper)}
.dark .btn-quiet:hover{background:rgba(245,245,247,.14)}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}
.link{display:inline-flex;align-items:center;gap:8px;color:var(--ink);text-decoration:none;font-weight:500;font-size:.95rem;border-bottom:1px solid var(--line-2);padding-bottom:3px;transition:border-color .2s,color .2s;background:none;border-top:0;border-left:0;border-right:0;cursor:pointer;padding-inline:0}
.link:hover{border-color:var(--blue);color:var(--blue)}
.dark .link{color:var(--paper);border-color:var(--line-d)}
.dark .link:hover{color:#fff;border-color:var(--blue)}
.arrow{width:14px;height:14px;flex:none}

/* ===================== Header ===================== */
.site-header{position:relative;z-index:50;background:var(--paper);padding-top:env(safe-area-inset-top,0px)}  /* fixo no topo da página, não acompanha a rolagem */
.site-header.is-scrolled{box-shadow:0 1px 0 var(--line)}
.nav{display:flex;align-items:center;gap:28px;height:var(--header-h)}
.brand{display:flex;align-items:center;flex:none;padding:6px 4px;margin-left:-4px} /* margem negativa compensa a área de clique: logo no eixo */
.brand img{height:36px;width:auto}
.nav-main{display:flex;align-items:center;gap:4px;margin-left:12px}
.nav-item{position:relative}
.nav-link{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 12px;border:0;background:none;border-radius:10px;text-decoration:none;font-size:.9rem;font-weight:400;color:var(--ink);cursor:pointer;letter-spacing:-.005em}
.nav-link:hover,.nav-link[aria-expanded="true"]{background:var(--wash)}
.chev{width:10px;height:10px;transition:transform .2s;opacity:.6}
.nav-link[aria-expanded="true"] .chev{transform:rotate(180deg)}
.nav-panel{position:absolute;top:calc(100% + 10px);left:0;min-width:300px;background:var(--white);border-radius:var(--r-ui);box-shadow:var(--shadow-ui),0 0 0 1px var(--line);padding:10px}
.nav-panel a{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border-radius:10px;text-decoration:none}
.nav-panel a:hover{background:var(--paper)}
.nav-panel strong{font-weight:500;font-size:.92rem}
.nav-panel small{color:var(--ink-2);font-size:.8rem;line-height:1.4}
.nav-actions{display:flex;align-items:center;gap:8px;margin-left:auto}
.nav-actions .btn{min-height:42px;padding:0 18px;font-size:.9rem}
.menu-btn{display:none;margin-left:auto;height:42px;padding:0 14px;border-radius:10px;border:0;background:var(--wash);cursor:pointer;font-size:.9rem;font-weight:500;align-items:center;gap:8px}
.menu-btn svg{width:16px;height:16px}
.mobile-menu{border-top:1px solid var(--line);padding-block:12px 28px;background:var(--paper)}
.mobile-menu nav{display:flex;flex-direction:column}
.mobile-menu a{padding:14px 2px;text-decoration:none;font-size:1.15rem;border-bottom:1px solid var(--line);letter-spacing:-.01em}
.mobile-menu .btn-row{margin-top:20px}
.mobile-menu .btn{flex:1 1 220px}
@media (max-width:1080px){.nav-main{display:none}.nav-actions .entrar{display:none}}
@media (max-width:680px){.nav-actions{display:none}.menu-btn{display:inline-flex}.nav{height:64px}.brand img{height:32px}}
@media (min-width:1081px){.mobile-menu{display:none!important}}
@media (min-width:681px) and (max-width:1080px){.menu-btn{display:inline-flex;margin-left:0}.nav-actions{margin-left:auto}}

/* Mega menu (Produto) e painel de Soluções */
.nav-panel.mega{left:-12px;min-width:0;width:min(800px,calc(100vw - 2 * var(--gutter)));padding:24px 28px 26px}
.mega-grid{display:grid;grid-template-columns:1fr 1.05fr .8fr;gap:24px}
.mega-title{font-size:var(--fs-label);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);font-weight:500;margin:0 0 10px;padding-left:10px}
.mega-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.nav-panel.mega a{display:block;padding:8px 10px;border-radius:8px;font-size:.9rem;text-decoration:none}
.nav-panel.mega a:hover{background:var(--paper)}
.nav-panel.sol{min-width:280px}
/* Menu do celular agrupado */
.mobile-menu .m-group{border-bottom:1px solid var(--line)}
.mobile-menu .m-group summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;padding:14px 2px;font-size:1.15rem;letter-spacing:-.01em}
.mobile-menu .m-group summary::-webkit-details-marker{display:none}
.mobile-menu .m-group summary::after{content:"";width:8px;height:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-3px);opacity:.6;transition:transform .2s}
.mobile-menu .m-group[open] summary::after{transform:rotate(225deg) translateY(-1px)}
.mobile-menu .m-group ul{list-style:none;margin:0;padding:0 0 12px 2px;display:flex;flex-direction:column}
.mobile-menu .m-group ul a{display:block;padding:9px 0;font-size:1rem;border:0;color:var(--ink-2)}
.mobile-menu .m-link{display:block}

/* ===================== Interface (mockup shell) ===================== */
.ui{font-family:var(--f-ui);font-size:13px;line-height:1.45;color:var(--ink);background:var(--white);border-radius:var(--r-ui);box-shadow:var(--shadow-ui),0 0 0 1px var(--line);letter-spacing:-.003em}
.ui-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line)}
.ui-title{font-weight:600;font-size:13.5px}
.ui-meta{color:var(--ink-2);font-size:12px}
.ui-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 16px;align-items:center;padding:13px 18px;border-bottom:1px solid var(--line);transition:background .4s}
.ui-row:last-child{border-bottom:0}
.ui-row .who{font-weight:500}
.ui-row .what{color:var(--ink-2);font-size:12.5px}
.ui-row .meta{color:var(--ink-3);font-size:11.5px}
.dark .ui .quiet{color:var(--ink-3)} /* interface clara dentro de bloco escuro */
/* Superfície escura de interface (Kyra, painel interno do escritório) */
.ui.ui-dark{background:var(--surface-d);color:var(--paper);box-shadow:0 0 0 1px var(--line-d)}
.ui.ui-dark .ui-head,.ui.ui-dark .ui-row{border-color:var(--line-d)}
.ui.ui-dark .ui-meta,.ui.ui-dark .what{color:var(--paper-2)}
.ui.ui-dark .meta{color:var(--paper-3)}

/* Ilustrativo ≠ clicável: botões e selos dentro de mockups não reagem ao mouse. */
.ui-btn{display:inline-flex;align-items:center;justify-content:center;height:30px;padding:0 12px;border-radius:8px;border:0;background:var(--paper);font-family:var(--f-ui);font-size:12px;font-weight:500;color:var(--ink);white-space:nowrap;pointer-events:none;user-select:none;cursor:default;transition:background .3s,color .3s}
.ui-btn.primary{background:var(--blue);color:#fff}

/* ===================== Chips e estados ===================== */
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--blue);flex:none}
.dot.ok{background:var(--ok)}
.dot.alert{background:var(--alert)}
.dot.mute{background:var(--neutral)}
.chip{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;height:24px;padding:0 9px;border-radius:999px;background:var(--paper);font-size:11.5px;font-weight:500;color:var(--ink);transition:background .35s,color .35s}
.ui .chip{pointer-events:none;user-select:none}
.chip.blue{background:var(--blue-wash);color:var(--blue-text)}
.chip.ok{background:rgba(52,199,89,.13);color:var(--ok-text)}
.chip.alert{background:rgba(255,59,48,.1);color:var(--alert-text)}

/* ===================== Abas (exploráveis) ===================== */
.tab{appearance:none;border:0;background:none;text-align:left;display:flex;align-items:center;justify-content:space-between;gap:8px;height:36px;padding:0 10px;border-radius:999px;font-family:var(--f-ui);font-size:13px;color:var(--ink-2);cursor:pointer;transition:background .2s,color .2s,box-shadow .2s,transform .15s}
.tab:not([aria-selected="true"]):hover{background:rgba(29,29,31,.06);color:var(--ink)}
.tab:active{transform:translateY(1px)}
.tab[aria-selected="true"]{background:var(--white);color:var(--ink);font-weight:500;box-shadow:0 0 0 1px var(--line);cursor:default}
.tab .n{font-size:11px;color:var(--ink-3)}
.tab .badge{min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--blue);color:#fff;font-size:10.5px;font-weight:600;display:grid;place-items:center}
.tabs-v{display:flex;flex-direction:column;gap:2px}
.tabs-h{display:flex;gap:2px;padding:3px;background:var(--paper);border-radius:999px;overflow-x:auto;max-width:100%}
.tabs-h .tab{height:30px;padding:0 12px;flex:none;font-size:12.4px}
.panel-fade{animation:fadeUp .45s var(--ease)}
@keyframes fadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (max-width:760px){
  .tabs-v{flex-direction:row;overflow-x:auto;margin-inline:-14px;padding-inline:14px} /* faixa rolável encosta na borda: indica rolagem */
  .tabs-v .tab{flex:none;height:40px}
  .tabs-h .tab{height:38px}
}

/* ===================== Segmented control (explorável) ===================== */
.seg{display:inline-flex;align-self:flex-start;width:fit-content;max-width:100%;padding:3px;border-radius:999px;background:var(--paper);gap:2px}
.seg button{border:0;background:none;height:28px;padding:0 12px;border-radius:999px;font-family:var(--f-ui);font-size:12px;color:var(--ink-2);cursor:pointer;transition:background .2s,color .2s,transform .15s}
.seg button[aria-pressed="false"]:hover{color:var(--ink);background:rgba(29,29,31,.05)}
.seg button:active{transform:translateY(1px)}
.seg button[aria-pressed="true"]{background:var(--white);color:var(--ink);font-weight:500;box-shadow:0 0 0 1px var(--line);cursor:default}
.dark .seg{background:rgba(245,245,247,.08)}
.dark .seg button{color:var(--paper-2)}
.dark .seg button[aria-pressed="false"]:hover{color:var(--paper);background:rgba(245,245,247,.1)}
.dark .seg button[aria-pressed="true"]{background:var(--paper);color:var(--ink);box-shadow:none}
@media (max-width:760px){.seg button{height:36px}}

/* ===================== Gramática de interação ===================== */
/* EXPLORE — o visitante age. Só onde há interação relevante. */
.explore{display:inline-flex;align-items:center;gap:8px;margin:0 0 14px;font-size:12.5px;letter-spacing:.01em;color:var(--ink-2)}
.explore svg{width:14px;height:14px;color:var(--blue);flex:none}
.dark .explore{color:var(--paper-2)}
/* DEMONSTRAÇÃO — o visitante observa. Ponto pulsando, nunca o mesmo sinal do Explore. */
.demo-tag{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;letter-spacing:.01em;color:var(--ink-2)}
.dark .demo-tag{color:var(--paper-2)}
.demo-tag i{width:7px;height:7px;border-radius:50%;background:var(--ok);animation:pulse 2.2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(52,199,89,.45)}70%{box-shadow:0 0 0 7px rgba(52,199,89,0)}100%{box-shadow:0 0 0 0 rgba(52,199,89,0)}}
/* REPLAY — repetir uma demonstração automática por escolha do visitante. */
.replay{display:inline-flex;align-items:center;gap:6px;border:0;cursor:pointer;background:var(--wash);color:var(--ink);padding:0 14px;height:34px;border-radius:999px;font-family:var(--f-ui);font-size:12.5px;transition:background .2s}
.replay:hover{background:rgba(29,29,31,.09)}
.dark .replay{background:rgba(245,245,247,.08);color:var(--paper)}
.dark .replay:hover{background:rgba(245,245,247,.16);color:#fff}
/* Entrada sutil de interfaces exploráveis (JS aplica .pre-enter só fora da tela). */
[data-enter]{transition:opacity .8s var(--ease),transform .8s var(--ease)}
.pre-enter{opacity:0;transform:translateY(18px)}

/* ===================== Indicador de capítulos ===================== */
.chapters{position:fixed;right:clamp(18px,1.6vw,28px);top:50%;transform:translateY(-50%);z-index:40;display:none;flex-direction:column;align-items:center;gap:6px;--dot:rgba(29,29,31,.26);--dot-on:var(--ink)}
.chapters.on-dark{--dot:rgba(245,245,247,.32);--dot-on:var(--paper)}
.chapters button{position:relative;appearance:none;border:0;background:none;padding:7px;margin:0;cursor:pointer;display:grid;place-items:center;border-radius:999px}
.chapters button > span:first-child{display:block;width:6px;height:6px;border-radius:999px;background:var(--dot);transition:height .45s var(--ease),background .3s}
.chapters button:hover > span:first-child{background:var(--dot-on)}
.chapters button[aria-current="true"] > span:first-child{height:22px;background:var(--blue)}
.chapters button:focus-visible{outline:2px solid var(--blue);outline-offset:0}
.ch-label{position:absolute;right:calc(100% + 6px);top:50%;transform:translate(6px,-50%);white-space:nowrap;padding:6px 10px;border-radius:8px;background:var(--ink);color:var(--paper);font-size:12px;letter-spacing:.005em;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s var(--ease)}
.chapters.on-dark .ch-label{background:var(--paper);color:var(--ink)}
.chapters button:hover .ch-label,.chapters button:focus-visible .ch-label{opacity:1;transform:translate(0,-50%)}
@media (min-width:1200px) and (min-height:560px){.chapters{display:flex}}

/* ===================== Fotografia ===================== */
.photo{position:relative;margin:0;border-radius:20px;overflow:hidden;background:#E6E6EA;aspect-ratio:4/5;max-width:100%}
.photo.wide{aspect-ratio:16/9}
.photo.tall{aspect-ratio:3/4}
.photo img{width:100%;height:100%;object-fit:cover}
.photo figcaption{position:absolute;left:16px;right:16px;bottom:16px;display:flex;flex-direction:column;gap:4px;font-size:12px;line-height:1.45;color:var(--ink-2)}
.photo figcaption b{font-weight:500;color:var(--ink);font-size:12.5px}
.photo .ph-tag{position:absolute;left:16px;top:16px;display:inline-flex;align-items:center;gap:7px;height:26px;padding:0 10px;border-radius:999px;background:rgba(255,255,255,.7);font-size:11px;font-weight:500;color:var(--ink-2);letter-spacing:.02em}
/* Placeholder de fotografia a produzir (promovido da Home: usado por mais de uma rota) */
.photo .ph-grain{position:absolute;inset:0;background:
  radial-gradient(120% 80% at 30% 20%, rgba(255,255,255,.55), transparent 60%),
  radial-gradient(90% 70% at 85% 90%, rgba(29,29,31,.10), transparent 60%)}
.photo .ph-tag svg{width:13px;height:13px}

/* ===================== Formulário / diálogo ===================== */
dialog.lead{width:min(560px,calc(100% - 32px));max-height:calc(100dvh - 32px);overflow:hidden;border:0;border-radius:22px;padding:0;background:var(--white);color:var(--ink);box-shadow:0 40px 100px -30px rgba(0,0,0,.5)}
dialog.lead::backdrop{background:rgba(29,29,31,.5)}
.lead-inner{max-height:calc(100dvh - 32px);overflow-y:auto;overscroll-behavior:contain;padding:0 clamp(22px,4vw,36px) clamp(22px,4vw,32px);display:flex;flex-direction:column;gap:20px}
.lead-top{position:sticky;top:0;z-index:2;background:var(--white);padding-top:clamp(22px,4vw,32px);padding-bottom:4px;display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.lead-top h2{font-size:1.7rem;letter-spacing:-.025em;line-height:1.15}
.x{flex:none;width:38px;height:38px;border-radius:50%;border:0;background:var(--paper);cursor:pointer;display:grid;place-items:center}
.x svg{width:14px;height:14px}
.fields{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}
.field{display:flex;flex-direction:column;gap:6px}
.field.full{grid-column:1 / -1}
.field label{font-size:12.5px;font-weight:500;color:var(--ink-2)}
.field input,.field select,.field textarea{font:inherit;font-size:.95rem;color:var(--ink);background:var(--paper);border:1px solid transparent;border-radius:12px;min-height:46px;padding:10px 14px;transition:border-color .2s,background .2s;width:100%}
.field textarea{min-height:76px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--blue);background:var(--white)}
.field .err{font-size:12px;color:var(--alert-text)}
.legal{font-size:12px;color:var(--ink-2);line-height:1.5}
.legal a{color:var(--ink)}
.lead-done{display:flex;flex-direction:column;gap:14px}
.lead-done .note{font-size:12.5px;color:var(--ink-2);background:var(--paper);border-radius:12px;padding:12px 14px;line-height:1.5}
@media (max-width:520px){.fields{grid-template-columns:minmax(0,1fr)}}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:80;background:var(--ink);color:var(--paper);padding:12px 18px;border-radius:12px;font-size:.88rem;box-shadow:0 20px 40px -20px rgba(0,0,0,.5);max-width:calc(100% - 32px)}

/* ===================== Footer ===================== */
.site-footer{background:var(--ink);color:var(--paper);padding-block:clamp(64px,7vw,104px) 32px}
.f-grid{display:grid;grid-template-columns:minmax(0,1.9fr) repeat(5,minmax(0,1fr));gap:40px 28px;align-items:start}
.f-stack{display:contents}
.f-brand{display:flex;flex-direction:column;gap:20px}
.f-brand img{height:44px;width:auto;align-self:flex-start}
.f-brand p{color:var(--paper-2);font-size:var(--fs-small);line-height:1.6}
.f-brand p span{display:block}
.f-col h2{line-height:20px;font-size:var(--fs-label);letter-spacing:.09em;text-transform:uppercase;color:var(--paper-3);font-weight:500;margin-bottom:16px}
.f-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.f-col a{color:var(--paper);text-decoration:none;font-size:var(--fs-small);opacity:.86}
.f-col a:hover{opacity:1;color:#fff;text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--blue)}
.f-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;margin-top:clamp(56px,6vw,88px);padding-top:24px;border-top:1px solid var(--line-d);font-size:12.5px;color:var(--paper-3)}
/* Footer com o mapa oficial: marca + 4 colunas (pares empilhados de propósito) */
.f-grid--map{grid-template-columns:minmax(0,1.5fr) repeat(4,minmax(0,1fr))}
.f-grid--map .f-stack{display:flex;flex-direction:column;gap:40px}
@media (max-width:1080px){.f-grid,.f-grid--map{grid-template-columns:repeat(4,minmax(0,1fr));gap:48px 32px}.f-brand{grid-column:1 / -1;flex-direction:row;align-items:center;gap:28px}.f-stack{display:flex;flex-direction:column;gap:40px}}
@media (max-width:560px){.f-grid,.f-grid--map{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 24px}.f-brand{flex-direction:column;align-items:flex-start;gap:18px}.f-base{flex-direction:column}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
}
/* fotografia real (build troca o placeholder): mantém rostos no recorte largo 21:9 e no 1:1 do celular */
.photo.has-photo{background:#DADADF}
.photo.has-photo img{display:block;position:absolute;inset:0;object-position:50% 30%}
.f-legal{margin-top:clamp(40px,5vw,64px);font-size:13px;line-height:1.6;color:var(--paper-3)}
.f-legal p{margin:0}
.f-legal .f-company{color:var(--paper-2);font-size:14px}
.f-legal+.f-base{margin-top:20px}
@media (max-width:560px){.f-legal{text-align:left}}


/* MINFONT:INICIO — celular: textos com no mínimo 12px (gerado) */
@media (max-width:640px){.ui-row .meta,.chip,.tab .n,.tab .badge,.photo .ph-tag{font-size:12px}}
/* MINFONT:FIM */

/* Voltar ao topo: botão transparente no canto inferior esquerdo (o chat fica à direita) */
.to-top{position:fixed;left:max(16px, env(safe-area-inset-left, 0px) + 12px);bottom:calc(16px + env(safe-area-inset-bottom, 0px));z-index:59;
  width:48px;height:48px;border-radius:50%;display:grid;place-items:center;cursor:pointer;color:var(--ink);
  background:rgba(255,255,255,.42);border:1px solid rgba(29,29,31,.14);-webkit-backdrop-filter:blur(10px) saturate(1.4);backdrop-filter:blur(10px) saturate(1.4);
  box-shadow:0 8px 24px -14px rgba(29,29,31,.45);opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity .18s var(--ease),transform .18s var(--ease),background .15s}
.to-top.is-on{opacity:1;transform:none;pointer-events:auto}
.to-top svg{width:20px;height:20px}
.to-top:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.to-top:active{transform:translateY(1px)}
@media (hover:hover) and (pointer:fine){.to-top:hover{background:rgba(255,255,255,.7)}}
@media (prefers-reduced-motion:reduce){.to-top{transition:opacity .18s}}

/* ===== Seletores (abas, segmentados, filtros): tudo redondo, contêiner e botões iguais, em qualquer tela.
   A faixa rola de lado quando não cabe e tem respiro nas pontas para o item selecionado não ser cortado. ===== */
main:where(:not(.a-content)) :is(.seg,.tabs-h,.tabs-v,.erp-tabs,.crm-ibx-tabs,.ws-tabs,.in-tabs,.oc-dos-tabs,.fc-dem-tabs,.pv-tabs,[role="tablist"]:not(.x-steps):not(.pv-tabs):not(.crm-ibx-tabs)){border-radius:999px}
main:where(:not(.a-content)) :is(.seg,.tabs-h,.tabs-v,.erp-tabs,.ws-tabs,.in-tabs,.oc-dos-tabs,.fc-dem-tabs) > :is(button,.tab,[role="tab"]){border-radius:999px}
main [role="tablist"]:not(.x-steps) > :is(.tab,[role="tab"]){border-radius:999px}
@media (max-width:720px){
  main:where(:not(.a-content)) :is(.seg,.tabs-h,.tabs-v,.erp-tabs,.ws-tabs,.in-tabs,.oc-dos-tabs,.fc-dem-tabs,[role="tablist"]:not(.x-steps)){display:flex;flex-direction:row;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:4px;padding:4px;max-width:100%;scroll-padding-inline:4px;margin-inline:0;mask-image:none;-webkit-mask-image:none}
  main:where(:not(.a-content)) :is(.seg,.tabs-h,.tabs-v,.erp-tabs,.ws-tabs,.in-tabs,.oc-dos-tabs,.fc-dem-tabs,[role="tablist"]:not(.x-steps))::-webkit-scrollbar{display:none}
  main:where(:not(.a-content)) :is(.seg,.tabs-h,.tabs-v,.erp-tabs,.ws-tabs,.in-tabs,.oc-dos-tabs,.fc-dem-tabs,[role="tablist"]:not(.x-steps)) > :is(button,.tab,[role="tab"]){flex:0 0 auto;min-height:38px;height:auto;padding:0 14px;white-space:nowrap;scroll-snap-align:start}
  main:where(:not(.a-content)) :is(.seg,.tabs-h,.tabs-v,.erp-tabs,.ws-tabs,.in-tabs,.oc-dos-tabs,.fc-dem-tabs,[role="tablist"]:not(.x-steps)) > :last-child{margin-right:4px}
}
/* voltar ao topo sobre fundo escuro: vidro claro discreto, nunca um disco cinza chapado */
.to-top{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.35);color:var(--ink)}
@supports (backdrop-filter:blur(1px)){.to-top{background:rgba(255,255,255,.22)}}
.to-top.on-dark{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.28);color:#fff}

/* Faixa jurídica compartilhada da hospedagem atual. */
.f-base{align-items:start;gap:24px 40px}
.f-legal,.f-base-meta{display:flex;flex-direction:column;gap:6px;min-width:0}
.f-legal{margin-top:0;font-size:12.5px;line-height:normal;color:var(--paper-3)}
.f-legal strong{font-weight:500;letter-spacing:.035em;color:var(--paper)}
.f-base-meta{text-align:right;gap:10px}

@media (max-width:560px){.f-base{flex-direction:column;gap:20px}.f-base-meta{text-align:left}}

/* Módulos do cliente e hub · linguagem do Manual da Marca (pp. 01, 04, 05): grade de cards escuro/azul/branco,
   navegador com barra lateral escura, métricas com bolinha de cor, barras com destaque azul, celular, faixa azul.
   Estados ocultos de motion só com .is-armed (JS). Reduced motion: estado final. */
.ic{width:16px;height:16px;flex:none}
.dot-ok,.dot-blue,.dot-alert,.dot-warn,.dot-mute{display:inline-block;width:8px;height:8px;border-radius:50%;flex:none}
.dot-ok{background:var(--ok)}.dot-blue{background:var(--blue)}.dot-alert{background:var(--alert)}.dot-warn{background:#FF9F0A}.dot-mute{background:var(--neutral)}

/* ---------- hero ---------- */
.x-hero{padding-block:clamp(40px,5vw,88px) clamp(64px,7vw,120px);overflow:hidden}
.x-hero-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,5vw,80px);align-items:center}
.x-hero-copy{display:flex;flex-direction:column;align-items:flex-start;gap:22px}
.x-pill{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 14px 0 10px;border-radius:999px;background:var(--white);box-shadow:0 0 0 1px var(--line);font-size:13px;font-weight:500}
.x-pill .ic{color:var(--blue)}
.x-h1{max-width:none;font-size:clamp(2.2rem,1.2rem + 2.8vw,3.7rem);line-height:1.04}
.x-hub-in .x-h1{font-size:var(--fs-display)}
.x-hero-copy .lead{max-width:36ch}

.x-theatre{position:relative;padding:0 46px 54px 0}
.x-browser{border-radius:22px;background:#E9E9EC;padding:10px;box-shadow:var(--shadow-ui),0 0 0 1px var(--line)}
.x-bar{display:flex;align-items:center;gap:6px;padding:2px 6px 10px}
.x-bar i{width:9px;height:9px;border-radius:50%;background:#FF5F57}.x-bar i:nth-child(2){background:#FEBC2E}.x-bar i:nth-child(3){background:#28C840}
.x-bar span{margin-left:10px;font-family:var(--f-ui);font-size:11px;color:var(--ink-3)}
.x-app{display:grid;grid-template-columns:132px minmax(0,1fr);gap:10px;background:var(--white);border-radius:14px;padding:10px;min-height:300px}
.x-side{background:var(--ink);border-radius:12px;padding:16px 10px;display:flex;flex-direction:column;gap:18px;align-items:center}
.x-side img{display:block;width:26px;height:auto}
.x-side ul{list-style:none;margin:0;padding:0;width:100%;display:flex;flex-direction:column;gap:4px}
.x-side li{display:flex;align-items:center;gap:8px;height:30px;padding:0 9px;border-radius:8px;font-family:var(--f-ui);font-size:11.5px;color:var(--paper-2);white-space:nowrap;overflow:hidden}
.x-side li .ic{width:14px;height:14px}
.x-side li.on{background:var(--blue);color:#fff}
.x-main{display:flex;flex-direction:column;gap:12px;padding:6px 6px 4px;min-width:0}
.x-hello{font-size:14px;font-weight:500;letter-spacing:-.01em}
.x-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.x-kpi{position:relative;display:flex;flex-direction:column;gap:2px;padding:12px 12px 10px;border-radius:12px;box-shadow:0 0 0 1px var(--line-2)}
.x-kpi i{position:absolute;top:12px;right:12px}
.x-kpi b{font-size:22px;font-weight:400;letter-spacing:-.03em;line-height:1.1;font-variant-numeric:tabular-nums}
.x-kpi span{font-family:var(--f-ui);font-size:11px;color:var(--ink-2)}
.x-chart{border-radius:12px;background:#F7F7F9;box-shadow:0 0 0 1px var(--line);padding:12px 14px;display:flex;flex-direction:column;gap:10px;flex:1}
.x-chart p{font-family:var(--f-ui);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--blue-text)}
.x-bars{display:flex;align-items:flex-end;gap:7%;height:92px;padding:0 4px}
.x-bars i{flex:1;height:var(--h);min-height:8%;border-radius:6px;background:#C7DEFF;transform-origin:bottom;transition:transform .7s var(--ease)}
.x-bars i.hi{background:var(--blue)}
.x-bars.sm{height:58px;gap:6%}
.x-phone{position:absolute;right:0;bottom:0;width:178px;padding:12px 12px 14px;border-radius:30px;background:var(--white);box-shadow:0 30px 60px -28px rgba(29,29,31,.45),0 0 0 1px var(--line-2);display:flex;flex-direction:column;gap:10px;transition:opacity .8s var(--ease),transform .8s var(--ease)}
.x-notch{display:block;width:54px;height:6px;border-radius:6px;background:var(--ink);margin:0 auto 4px}
.x-ph-t{font-size:13px;font-weight:500;padding:0 4px}
.x-ph-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.x-ph-list li{display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:12px;box-shadow:0 0 0 1px var(--line-2);font-family:var(--f-ui);font-size:11.5px}
.x-ph-btn{display:flex;align-items:center;justify-content:center;gap:6px;height:38px;margin-top:4px;border-radius:12px;background:var(--blue);color:#fff;font-family:var(--f-ui);font-size:12px;font-weight:500;transition:background .35s,transform .15s}
.x-ph-btn.is-press{transform:scale(.95)}
.x-ph-btn.is-done{background:var(--ok-text)}
.x-theatre.is-armed .x-bars i{transform:scaleY(0)}
.x-theatre.is-armed.in .x-bars i{transform:none}
.x-theatre.is-armed .x-bars i:nth-child(n){transition-delay:calc(var(--n,0) * 70ms)}
.x-theatre.is-armed .x-phone{opacity:0;transform:translateY(28px)}
.x-theatre.is-armed.ph .x-phone{opacity:1;transform:none}

.x-who{list-style:none;margin:clamp(56px,6vw,96px) 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.x-who li{display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 20px 0 8px;border-radius:999px;background:var(--white);box-shadow:0 0 0 1px var(--line);font-size:15px}
.x-who li .ic{width:32px;height:32px;padding:8px;border-radius:50%;background:var(--paper);color:var(--ink)}
.x-who li[data-enter]:nth-child(2){transition-delay:.08s}.x-who li[data-enter]:nth-child(3){transition-delay:.16s}.x-who li[data-enter]:nth-child(4){transition-delay:.24s}

/* ---------- cabeçalho de seção ---------- */
.x-head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;margin-bottom:var(--space-head)}
.x-h2{max-width:18ch}

/* ---------- história (dia / jornada) ---------- */
.x-story{display:grid;grid-template-columns:minmax(220px,300px) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:center;max-width:1040px;margin-inline:auto}
.x-steps{position:relative;display:flex;flex-direction:column;gap:4px;padding-left:22px}
.x-rail{position:absolute;left:6px;top:14px;bottom:14px;width:2px;border-radius:2px;background:var(--line-2)}
.x-rail i{position:absolute;left:0;top:0;width:100%;height:calc(var(--p,0) * 100%);border-radius:2px;background:var(--blue);transition:height .6s var(--ease)}
.x-step{position:relative;appearance:none;border:0;background:none;cursor:pointer;text-align:left;display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:12px;color:var(--ink-2);transition:background .25s,color .25s}
.x-step::before{content:"";position:absolute;left:-20px;top:17px;width:10px;height:10px;border-radius:50%;background:var(--white);box-shadow:inset 0 0 0 2px var(--neutral);transition:box-shadow .3s}
.x-step[aria-selected=true]{background:var(--paper);color:var(--ink)}
.x-step[aria-selected=true]::before,.x-step.done::before{box-shadow:inset 0 0 0 5px var(--blue)}
.x-time{font-family:var(--f-ui);font-size:11.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.x-lbl{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:500}
.x-lbl .ic{color:var(--blue)}
.x-stage{min-width:0}
.x-pane .ui{box-shadow:0 30px 60px -34px rgba(29,29,31,.35),0 0 0 1px var(--line)}
.x-pane:not([hidden]){animation:fadeUp .45s var(--ease)}
.x-ill,.x-note{margin-top:12px;font-family:var(--f-ui);font-size:11.5px;color:var(--ink-3)}

/* ---------- grade de cards (bento) ---------- */
.x-bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(200px,auto);gap:14px}
.x-card{position:relative;display:flex;flex-direction:column;gap:12px;padding:22px;border-radius:22px;background:var(--white);box-shadow:0 0 0 1px var(--line);overflow:hidden;min-width:0}
.x-card h3{font-size:1.25rem;line-height:1.2;letter-spacing:-.02em;max-width:18ch}
.x-card-h{display:flex;align-items:center;gap:10px}
.x-card-ic{width:34px;height:34px;padding:9px;border-radius:10px;background:var(--paper);color:var(--ink)}
.x-eb{font-family:var(--f-ui);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--blue-text)}
.x-lg{grid-column:span 2;grid-row:span 2}
.x-wide{grid-column:span 2}
.x-dark{background:var(--ink);color:var(--paper);box-shadow:none}
.x-dark .x-card-ic{background:var(--surface-d2);color:var(--paper)}
.x-dark .x-eb{color:#6CB2FF}
.x-blue{background:var(--blue);color:#fff;box-shadow:none}
.x-blue .x-card-ic{background:rgba(255,255,255,.18);color:#fff}
.x-blue .x-eb{color:rgba(255,255,255,.8)}
.x-card[data-enter]:nth-child(2){transition-delay:.06s}.x-card[data-enter]:nth-child(3){transition-delay:.12s}.x-card[data-enter]:nth-child(4){transition-delay:.18s}
.x-card[data-enter]:nth-child(5){transition-delay:.06s}.x-card[data-enter]:nth-child(6){transition-delay:.12s}.x-card[data-enter]:nth-child(7){transition-delay:.18s}
.x-card-link{margin-top:auto;display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:500;color:inherit}
.x-card-link .arrow{width:14px;height:14px;transition:transform .2s}
.x-card-link:hover .arrow{transform:translateX(3px)}
/* mini-UIs */
.x-receipt{margin-top:auto;background:var(--surface-d);border-radius:16px;padding:16px;font-family:var(--f-ui);font-size:12.5px;display:flex;flex-direction:column;gap:10px}
.x-receipt ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.x-receipt li,.x-receipt p{display:flex;justify-content:space-between;gap:12px;color:var(--paper-2)}
.x-receipt p{padding-top:10px;border-top:1px dashed var(--line-d);color:var(--paper);font-size:14px}
.x-receipt b{font-weight:500;color:var(--paper)}
.x-paid{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:999px;background:rgba(52,199,89,.16);color:#7BDD95;font-size:11.5px}
.x-paid .ic{width:13px;height:13px}
.x-chips{margin-top:auto;display:flex;flex-wrap:wrap;gap:6px}
.x-chips span{height:28px;display:inline-flex;align-items:center;padding:0 11px;border-radius:999px;background:rgba(255,255,255,.18);font-family:var(--f-ui);font-size:12px;font-weight:500}
.x-white .x-chips span,.x-card:not(.x-blue):not(.x-dark) .x-chips span{background:var(--paper)}
.x-metric{margin-top:auto;position:relative;display:flex;flex-direction:column;gap:2px;padding:14px;border-radius:14px;box-shadow:0 0 0 1px var(--line-2)}
.x-metric b{font-size:30px;font-weight:400;letter-spacing:-.03em;line-height:1.1}
.x-metric i{position:absolute;top:16px;right:16px}
.x-metric span{font-family:var(--f-ui);font-size:12px;color:var(--ink-2)}
.x-fin{margin-top:auto;display:flex;align-items:flex-end;justify-content:space-between;gap:20px}
.x-fin b{display:block;font-size:30px;font-weight:400;letter-spacing:-.03em;line-height:1.1}
.x-fin span{font-family:var(--f-ui);font-size:12px;color:var(--ink-2)}
.x-fin .x-bars{flex:1;max-width:220px}
.x-card.is-armed .x-bars i{transform:scaleY(0)}
.x-card.is-armed.in .x-bars i{transform:none}
.x-mini{margin-top:auto;list-style:none;padding:0;display:flex;flex-direction:column;gap:6px}
.x-mini li{display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:12px;box-shadow:0 0 0 1px var(--line-2);font-family:var(--f-ui);font-size:12.5px}
.x-dark .x-mini li{box-shadow:0 0 0 1px var(--line-d)}
.x-blue .x-mini li{box-shadow:none;background:rgba(255,255,255,.14)}
.x-ponto{margin-top:auto;display:flex;flex-direction:column;align-items:center;gap:2px;padding:16px;border-radius:18px;background:var(--paper)}
.x-ponto-h{font-size:32px;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.x-ponto-b{font-family:var(--f-ui);font-size:12px;font-weight:500;color:var(--ok-text)}
.x-ponto-s{font-family:var(--f-ui);font-size:11px;color:var(--ink-3)}
.x-kyra{margin-top:auto;display:flex;flex-direction:column;gap:8px;font-family:var(--f-ui);font-size:12.5px}
.x-kyra p{padding:10px 12px;border-radius:14px;max-width:92%}
.x-kyra .q{align-self:flex-end;background:rgba(255,255,255,.2);border-bottom-right-radius:4px}
.x-kyra .a{background:#fff;color:var(--ink);border-bottom-left-radius:4px}
.x-dark .x-kyra .q{background:var(--surface-d2)}

/* ---------- faixa azul ---------- */
.x-band-s{padding-block:0 var(--space-section)}
.x-band{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1fr);gap:28px clamp(28px,4vw,56px);align-items:center;padding:clamp(32px,4vw,52px);border-radius:28px;background:var(--blue);color:#fff}
.x-band-mark img{display:block;width:52px;height:auto}
.x-band-t{font-size:clamp(1.6rem,1.1rem + 1.6vw,2.4rem);line-height:1.12;letter-spacing:-.03em;font-weight:400;max-width:16ch}
.x-band-pts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.x-band-pts li{display:flex;align-items:center;gap:12px;font-size:15px}
.x-band-pts .ic{width:30px;height:30px;padding:7px;border-radius:9px;background:rgba(255,255,255,.18)}

.x-close{padding-top:0}
.x-close-in{display:flex;flex-direction:column;align-items:center;text-align:center;gap:24px}
.x-close-in .btn-row{justify-content:center}

/* ---------- hub ---------- */
.x-hub-hero{padding-block:var(--space-section)}
.x-hub-in{display:flex;flex-direction:column;align-items:center;text-align:center;gap:22px}
.x-hub-in .x-h1{max-width:15ch}
.x-hub-in .lead{max-width:44ch}
.x-hub-in .btn-row{justify-content:center}
.x-doors{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:clamp(48px,5vw,80px);text-align:left}
.x-door{position:relative;display:flex;flex-direction:column;gap:14px;padding:24px 24px 0;border-radius:24px;background:var(--white);box-shadow:0 0 0 1px var(--line);overflow:hidden;color:inherit;transition:box-shadow .3s var(--ease),transform .3s var(--ease)}
.x-door,.x-door *{text-decoration:none}
.x-dark .x-pill{background:var(--surface-d2);box-shadow:none;color:var(--paper)}
.x-blue .x-pill{background:rgba(255,255,255,.18);box-shadow:none;color:#fff}
.x-blue .x-pill .ic,.x-dark .x-pill .ic{color:inherit}
.x-door:hover{box-shadow:0 0 0 1px rgba(0,122,255,.45),0 24px 50px -30px rgba(29,29,31,.35);transform:translateY(-3px)}
.x-door.x-dark{background:var(--ink);color:var(--paper)}
.x-door.x-blue{background:var(--blue);color:#fff}
.x-door-top{display:flex;align-items:center;justify-content:space-between}
.x-door h3{font-size:2rem;letter-spacing:-.035em;line-height:1}
.x-door p{font-size:14.5px;opacity:.75;max-width:26ch}
.x-door .x-card-link{margin-top:0}
.x-door-ui{margin-top:auto;margin-inline:-4px;padding:14px;border-radius:18px 18px 0 0;background:var(--white);color:var(--ink);box-shadow:0 0 0 1px var(--line);transform:translateY(10px);transition:transform .4s var(--ease)}
.x-door:hover .x-door-ui{transform:none}
.x-door[data-enter]:nth-child(2){transition-delay:.1s}.x-door[data-enter]:nth-child(3){transition-delay:.2s}

@media (max-width:1080px){
  .x-hero-in{grid-template-columns:minmax(0,1fr)}
  .x-bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .x-lg{grid-row:auto}
  .x-band{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:860px){
  .x-story{grid-template-columns:minmax(0,1fr)}
  .x-steps{flex-direction:row;overflow-x:auto;padding:0 0 6px;gap:6px;scrollbar-width:none}
  .x-steps::-webkit-scrollbar{display:none}
  .x-rail,.x-step::before{display:none}
  .x-step{flex:none;background:var(--paper);align-items:center}
  .x-step[aria-selected=true]{background:var(--ink);color:var(--paper)}
  .x-step[aria-selected=true] .x-time{color:var(--paper-3)}
  .x-doors{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .x-hero-copy{align-items:flex-start;text-align:left}
  .x-hero-copy .btn-row,.x-close-in .btn-row,.x-hub-in .btn-row{flex-direction:column;width:100%}
  .x-hero-copy .btn-row .btn,.x-close-in .btn-row .btn,.x-hub-in .btn-row .btn{width:100%;justify-content:center}
  .x-app{grid-template-columns:44px minmax(0,1fr);min-height:0}
  .x-side{padding:12px 6px}.x-side img{width:20px}
  .x-side li{justify-content:center;padding:0}.x-side li span{display:none}
  .x-kpis{gap:6px}.x-kpi{padding:10px 8px}.x-kpi b{font-size:18px}.x-kpi i{top:10px;right:8px;width:6px;height:6px}
  .x-bars{height:70px}
  .x-theatre{padding:0}
  .x-phone{position:relative;right:auto;bottom:auto;width:210px;margin:-36px auto 0}
  .x-who{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .x-who li{height:auto;min-height:52px;padding:8px 12px 8px 8px;border-radius:16px;font-size:13px;line-height:1.3;text-align:left}
  .x-bento{grid-template-columns:minmax(0,1fr)}
  .x-lg,.x-wide{grid-column:auto}
  .x-card{align-items:flex-start;text-align:left}
  .x-receipt,.x-metric,.x-mini,.x-fin,.x-kyra{width:100%;text-align:left}
  .x-band{text-align:left;justify-items:start}
  .x-door{text-align:left;align-items:flex-start}
}
@media (prefers-reduced-motion: reduce){.x-pane:not([hidden]){animation:none}.x-door,.x-door-ui{transition:none}}

/* ---------- peças gerais do kit ---------- */
.x-sub{color:var(--ink-2);font-size:var(--fs-lead);line-height:1.5;max-width:44ch}
.dark .x-sub{color:var(--paper-2)}
.x-center{text-align:center}
.x-ui{box-shadow:0 30px 60px -34px rgba(29,29,31,.35),0 0 0 1px var(--line);overflow:hidden;text-align:left}
.x-theatre.no-phone{padding:0}
.x-main .x-ui{box-shadow:0 0 0 1px var(--line)}
/* faixa azul: variações */
.x-eb-w{color:#fff}
.x-band-side{align-items:flex-start}
.x-btn-w{background:#fff;color:var(--ink);gap:8px}
.x-btn-w:hover{background:var(--paper)}
.x-btn-w .arrow{width:14px;height:14px}
.section.x-band-s{padding-top:0}
.section + .section.x-band-s, .x-hub-hero + .section.x-band-s{padding-top:var(--space-section)}
.section.white + .section.x-band-s{padding-top:var(--space-section);background:linear-gradient(var(--white) 0 50%,transparent 50%)}
/* split: texto curto + visual */
.x-split{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:40px clamp(40px,6vw,96px);align-items:center}
.x-split.rev .x-split-copy{order:2}
.x-split-copy{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.x-split-copy .x-h2{max-width:16ch}
.x-pts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.x-pts li{display:flex;align-items:center;gap:12px;font-size:15px}
.x-pts .ic{width:32px;height:32px;padding:8px;border-radius:10px;background:var(--white);box-shadow:0 0 0 1px var(--line);color:var(--blue)}
.white .x-pts .ic{background:var(--paper);box-shadow:none}
.dark .x-pts .ic{background:var(--surface-d2);box-shadow:none;color:#6CB2FF}
.x-split-vis{min-width:0}
/* duo: dois cards lado a lado */
.x-duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;max-width:1040px;margin-inline:auto}
.x-duo .x-card{padding:28px}
.x-check{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.x-check li{display:flex;align-items:flex-start;gap:10px;font-size:15px;line-height:1.4}
.x-check .ic{margin-top:2px;color:var(--ok-text)}
.x-dark .x-check .ic{color:#7BDD95}.x-blue .x-check .ic{color:#fff}
/* fluxo numerado */
.x-flow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;counter-reset:f}
.x-flow li{position:relative;display:flex;flex-direction:column;gap:10px;padding:22px;border-radius:22px;background:var(--white);box-shadow:0 0 0 1px var(--line)}
.white .x-flow li{background:none;box-shadow:none}
.dark .x-flow li{background:none;box-shadow:none}
.dark .x-flow .x-card-ic{background:var(--surface-d2);color:var(--paper)}
.x-flow-n{position:absolute;top:22px;right:22px;font-family:var(--f-ui);font-size:12px;color:var(--blue-text)}
.dark .x-flow-n{color:#6CB2FF}
.x-flow h3{font-size:1.15rem;letter-spacing:-.015em;line-height:1.25}
.x-flow p{color:var(--ink-2);font-size:14.5px}
.dark .x-flow p{color:var(--paper-2)}
.x-flow li[data-enter]:nth-child(2){transition-delay:.08s}.x-flow li[data-enter]:nth-child(3){transition-delay:.16s}.x-flow li[data-enter]:nth-child(4){transition-delay:.24s}.x-flow li[data-enter]:nth-child(5){transition-delay:.32s}
/* números grandes, fluxo mini e foto em card */
.x-big{margin-top:auto;display:flex;flex-direction:column;gap:2px}
.x-big b{font-size:clamp(2.2rem,1.6rem + 2vw,3.2rem);font-weight:400;letter-spacing:-.04em;line-height:1}
.x-big span{font-family:var(--f-ui);font-size:12.5px;opacity:.75}
.x-flowmini{margin:auto 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.x-flowmini li{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:12px;background:var(--paper);font-family:var(--f-ui);font-size:12.5px}
.x-flowmini .ic{color:var(--blue)}
.x-blue .x-flowmini li{background:rgba(255,255,255,.14)}.x-blue .x-flowmini .ic{color:#fff}
.x-dark .x-flowmini li{background:var(--surface-d)}.x-dark .x-flowmini .ic{color:#6CB2FF}
.x-photo{margin:auto -22px -22px;aspect-ratio:16/10;border-radius:0}
.x-card.x-ph{padding-bottom:22px}
/* anel de nota */
.x-ring-top{display:grid;grid-template-columns:132px minmax(0,1fr);gap:24px;align-items:center;padding:20px 18px;border-bottom:1px solid var(--line)}
.x-ring{position:relative;width:132px;height:132px}
.x-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.x-ring circle{fill:none;stroke-width:11;stroke-linecap:round}
.x-ring .bg{stroke:var(--paper)}
.x-ring .fg{stroke:#FF9F0A;stroke-dasharray:var(--v) 100;transition:stroke-dasharray 1.4s var(--ease)}
.x-ringui.is-armed:not(.in) .x-ring .fg{stroke-dasharray:0 100}
.x-ring>span{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.x-ring b{font-size:34px;font-weight:400;letter-spacing:-.03em;line-height:1}
.x-ring small{font-family:var(--f-ui);font-size:11.5px;color:var(--ink-3)}
.x-dist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font-family:var(--f-ui);font-size:12.5px}
.x-dist li{display:flex;justify-content:space-between;gap:12px;padding-bottom:6px;border-bottom:1px solid var(--line)}
.x-dist li:last-child{border-bottom:0;padding-bottom:0}
.x-dist span{display:flex;align-items:center;gap:8px;color:var(--ink-2)}
@media (max-width:980px){.x-split{grid-template-columns:minmax(0,1fr)}.x-split.rev .x-split-copy{order:0}.x-duo{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){
  .x-split-copy{align-items:center;text-align:center}.x-split-copy .x-h2,.x-sub{margin-inline:auto}
  .x-head .x-sub{text-align:center}
  .x-pts li{justify-content:center}
  .x-band-side{align-items:center}
  .x-duo .x-card{align-items:flex-start;text-align:left}
  .x-flow li{align-items:center;text-align:center}
  .x-ring-top{grid-template-columns:minmax(0,1fr);justify-items:center}.x-dist{width:100%}
}
.x-head .x-sub{text-align:center;margin-inline:auto}

/* celular sozinho e conversa */
.x-solo{display:flex;justify-content:center;padding:12px 0}
.x-phone.solo{position:relative;right:auto;bottom:auto;width:min(290px,100%);padding:16px 16px 18px;border-radius:38px;gap:12px}
.x-phone.solo .x-ph-list li{padding:12px 14px;font-size:13px}
.x-ph-s{font-family:var(--f-ui);font-size:12px;color:var(--ink-3);padding:0 4px;margin-top:-6px}
.x-solo.is-armed .x-phone{opacity:1;transform:none}
.x-chat-b{display:grid;grid-template-columns:minmax(0,1fr) 190px}
.x-msgs{display:flex;flex-direction:column;gap:8px;padding:16px;background:var(--paper)}
.x-msg{max-width:84%;padding:9px 12px;border-radius:14px;background:var(--white);box-shadow:0 0 0 1px var(--line);font-family:var(--f-ui);font-size:12.5px;line-height:1.45}
.x-msg small{display:block;margin-top:3px;font-size:10.5px;color:var(--ink-3)}
.x-msg.out{align-self:flex-end;background:var(--blue);color:#fff;box-shadow:none;border-bottom-right-radius:4px}
.x-msg.out small{color:rgba(255,255,255,.8)}
.x-msg.in{border-bottom-left-radius:4px}
.x-msg.sys{align-self:center;background:transparent;box-shadow:none;color:var(--ink-3);font-size:11.5px;padding:2px}
.x-ctx{margin:0;padding:16px;display:grid;grid-template-columns:1fr;gap:2px 0;font-family:var(--f-ui);font-size:12px;border-left:1px solid var(--line)}
.x-ctx dt{color:var(--ink-3);margin-top:8px}.x-ctx dt:first-child{margin-top:0}
.x-ctx dd{margin:0;font-weight:500}
@media (max-width:640px){.x-chat-b{grid-template-columns:minmax(0,1fr)}.x-ctx{border-left:0;border-top:1px solid var(--line);grid-template-columns:auto 1fr;gap:6px 12px}.x-ctx dt{margin:0}}
.x-phone{color:var(--ink)}
.dark .x-kyra .a,.x-kyra .a{color:var(--ink)}
/* bloco de código (Developer API) */
.x-code{border-radius:18px;background:var(--ink);color:var(--paper);overflow:hidden;box-shadow:0 30px 60px -30px rgba(29,29,31,.5);text-align:left}
.x-code-h{display:flex;align-items:center;gap:6px;padding:12px 16px;border-bottom:1px solid var(--line-d)}
.x-code-h i{width:9px;height:9px;border-radius:50%;background:#FF5F57}.x-code-h i:nth-child(2){background:#FEBC2E}.x-code-h i:nth-child(3){background:#28C840}
.x-code-h span{margin-left:8px;font-family:var(--f-ui);font-size:11.5px;color:var(--paper-3)}
.x-code pre{margin:0;padding:18px 18px 20px;overflow-x:auto;font:12.5px/1.75 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.x-code code span{display:block;white-space:pre}
.x-code .k{color:#6CB2FF}.x-code .s{color:#7BDD95}.x-code .c{color:var(--paper-3)}
.x-card .x-code{margin-top:auto;box-shadow:none}

/* ---------- micro-narrativas (só com .mx-armed, aplicado pelo JS; sem JS ou reduced motion: tudo visível) ---------- */
.mx-armed.x-receipt li,.mx-armed.x-receipt p,.mx-armed .x-paid,
.mx-armed.x-flowmini li,.mx-armed.x-mini li,.mx-armed.x-chips span,.mx-armed.x-pts li,.mx-armed.x-band-pts li,.mx-armed.x-check li,.mx-armed.x-dist li,
.mx-armed.x-door-ui .ui-row,.mx-armed.x-ui .ui-row,.x-pane.mx-armed .ui-row,.mx-armed.x-msgs .x-msg,
.mx-armed.x-kyra .q,.mx-armed.x-kyra .a{opacity:0;transform:translateY(8px);transition:opacity .5s var(--ease),transform .5s var(--ease),background .4s,box-shadow .4s}
.mx-armed.x-receipt li.in,.mx-armed.x-receipt p.in,.mx-armed .x-paid.in,
.mx-armed.x-flowmini li.in,.mx-armed.x-mini li.in,.mx-armed.x-chips span.in,.mx-armed.x-pts li.in,.mx-armed.x-band-pts li.in,.mx-armed.x-check li.in,.mx-armed.x-dist li.in,
.mx-armed.x-door-ui .ui-row.in,.mx-armed.x-ui .ui-row.in,.x-pane.mx-armed .ui-row.in,.mx-armed.x-msgs .x-msg.in,
.mx-armed.x-kyra .q.in,.mx-armed.x-kyra .a.in{opacity:1;transform:none}
.mx-armed.x-receipt li{transform:translateY(-6px)}
.mx-armed .x-paid{transform:scale(.8)}
.mx-armed .x-paid.in{transform:none}
/* fluxo: a etapa acesa ganha destaque azul e uma linha liga as etapas */
.x-flowmini{position:relative}
.mx-armed.x-flowmini li.in .ic{animation:mxPop .5s var(--ease)}
.mx-armed.x-chips span.in{animation:mxGlow 1.2s var(--ease)}
.x-kyra .a.is-typing{min-height:34px;min-width:58px;position:relative}
.x-kyra .a.is-typing::after{content:"";position:absolute;left:14px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:var(--ink-3);box-shadow:10px 0 0 var(--ink-3),20px 0 0 var(--ink-3);animation:mxDots 1s infinite}
.mx-armed.x-metric,.mx-armed.x-big{transition:opacity .5s}
.x-ponto .x-ponto-b,.x-ponto .x-ponto-s{transition:opacity .4s}
.mx-armed.x-ponto:not(.done) .x-ponto-b,.mx-armed.x-ponto:not(.done) .x-ponto-s{opacity:0}
.mx-armed.x-ponto.done .x-ponto-h{animation:mxPop .5s var(--ease)}
@keyframes mxPop{0%{transform:scale(.8)}60%{transform:scale(1.12)}100%{transform:none}}
@keyframes mxGlow{0%{box-shadow:0 0 0 0 rgba(0,122,255,.45)}100%{box-shadow:0 0 0 10px rgba(0,122,255,0)}}
@keyframes mxDots{0%,100%{opacity:.35}50%{opacity:1}}
@media (prefers-reduced-motion: reduce){.mx-armed *{animation:none!important}}
.x-pill-hero{margin-bottom:4px;align-self:flex-start;width:fit-content;max-width:100%}
.hero-copy .x-pill-hero{display:inline-flex}
.fc-hero-text .x-pill-hero{align-self:center;margin-inline:auto}
@media (min-width:641px){.fh-hero-text .x-pill-hero{align-self:center;margin-inline:auto}}
.mp-hero-text .x-pill-hero{align-self:center;margin-inline:auto}
@media (min-width:641px){.ec-hero-in .x-pill-hero{align-self:center;margin-inline:auto}}

/* ======================= seções texto + tela (desenho do site) ======================= */
.x-fhead{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:24px clamp(40px,6vw,96px);align-items:end;margin-bottom:var(--space-head)}
.x-fhead-copy{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.x-fhead-copy .body+.body{margin-top:0}
.x-fvis{min-width:0}
.dark .x-ill{color:var(--paper-3)}
/* PDV */
.x-pdv{overflow:hidden}
.x-pdv-b{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:16px;padding:16px;background:var(--paper)}
.x-pdv-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;align-content:start}
.x-pdv-p{display:flex;flex-direction:column;gap:4px;padding:14px;border-radius:14px;background:var(--white);box-shadow:0 0 0 1px var(--line);font-family:var(--f-ui);transition:box-shadow .3s,transform .2s}
.x-pdv-p .ic{width:22px;height:22px;color:var(--ink-2);margin-bottom:6px}
.x-pdv-p b{font-weight:500;font-size:13px}.x-pdv-p small{font-size:12px;color:var(--ink-3)}
.x-pdv-p.on{box-shadow:0 0 0 2px var(--blue)}
.x-pdv-t{display:flex;flex-direction:column;gap:10px}
.x-pdv-t .x-receipt{margin-top:0;background:var(--ink)}
.x-pdv-doc{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:12px;background:var(--white);box-shadow:0 0 0 1px var(--line);font-family:var(--f-ui);font-size:12.5px;color:var(--ok-text)}
.mx-armed .x-pdv-doc{opacity:0;transform:translateY(6px);transition:opacity .5s,transform .5s}
.mx-armed .x-pdv-doc.in{opacity:1;transform:none}
/* mapa operação → documento */
.x-map{padding:8px 0}
.x-map-h{display:grid;grid-template-columns:1fr 80px 1fr;padding:10px 20px;font-family:var(--f-ui);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.x-map-h span:last-child{grid-column:3}
.x-map ul{list-style:none;margin:0;padding:0 20px 12px;display:flex;flex-direction:column;gap:10px}
.x-map li{display:grid;grid-template-columns:1fr 80px 1fr;align-items:center}
.x-map-a{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:12px;background:var(--paper);font-size:14px}
.x-map-a .ic{color:var(--blue)}
.x-map-l{height:2px;background:var(--line-2);position:relative;transform-origin:left;transition:transform .6s var(--ease)}
.x-map-l::after{content:"";position:absolute;right:-1px;top:-4px;width:10px;height:10px;border-radius:50%;background:var(--blue)}
.x-map-b{display:flex;flex-direction:column;padding:12px 14px;border-radius:12px;box-shadow:0 0 0 1px var(--line-2);transition:opacity .5s,transform .5s}
.x-map-b b{font-size:15px;font-weight:500}.x-map-b small{font-family:var(--f-ui);font-size:12px;color:var(--ink-3)}
.mx-armed.x-map .x-map-l{transform:scaleX(0)}
.mx-armed.x-map .x-map-b{opacity:0;transform:translateX(-8px)}
.mx-armed.x-map li.in .x-map-l{transform:none}
.mx-armed.x-map li.in .x-map-b{opacity:1;transform:none;transition-delay:.45s}
.mx-armed.x-map li .x-map-a{transition:opacity .4s;opacity:.35}.mx-armed.x-map li.in .x-map-a{opacity:1}
/* estoque */
.x-stock ul{list-style:none;margin:0;padding:6px 0}
.x-stock li{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(80px,1fr) auto;gap:16px;align-items:center;padding:12px 18px;border-bottom:1px solid var(--line)}
.x-stock li:last-child{border-bottom:0}
.x-stock b{display:block;font-weight:500;font-size:14px}.x-stock small{font-family:var(--f-ui);font-size:12px;color:var(--ink-3)}
.x-lvl{display:block;height:8px;border-radius:8px;background:var(--paper);overflow:hidden}
.x-lvl i{display:block;height:100%;width:var(--v);border-radius:8px;background:var(--blue);transition:width 1.2s var(--ease)}
.x-lvl i.alert{background:var(--alert)}.x-lvl i.ok{background:var(--ok)}
.mx-armed.x-stock .x-lvl i{width:100%}
.mx-armed.x-stock.in .x-lvl i{width:var(--v)}
.mx-armed.x-stock .chip{opacity:0;transition:opacity .4s 1.1s}.mx-armed.x-stock.in .chip{opacity:1}
/* fluxo horizontal */
.x-flowh{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;position:relative}
.x-flowh li{position:relative;display:flex;flex-direction:column;gap:6px;padding:20px;border-radius:20px;background:var(--white);box-shadow:0 0 0 1px var(--line);transition:box-shadow .4s,opacity .5s,transform .5s}
.white .x-flowh li{background:var(--paper);box-shadow:none}
.dark .x-flowh li{background:var(--surface-d);box-shadow:none}
.x-flowh b{font-size:15px;font-weight:500}.x-flowh small{font-family:var(--f-ui);font-size:12.5px;color:var(--ink-2)}
.dark .x-flowh small{color:var(--paper-2)}
.dark .x-flowh .x-card-ic{background:var(--surface-d2);color:var(--paper)}
.x-flowh li:not(:last-child)::after{content:"";position:absolute;right:-12px;top:36px;width:12px;height:2px;background:var(--blue)}
.mx-armed.x-flowh li{opacity:.3;transform:translateY(6px)}
.mx-armed.x-flowh li.in{opacity:1;transform:none;box-shadow:0 0 0 2px var(--blue)}
.mx-armed.x-flowh li.in.past{box-shadow:0 0 0 1px var(--line)}
.white .mx-armed.x-flowh li.in.past,.dark .mx-armed.x-flowh li.in.past{box-shadow:none}
/* quadro (kanban) */
.x-kanban{overflow:hidden}
.x-kb{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:16px;background:var(--paper)}
.x-kb-col{display:flex;flex-direction:column;gap:8px;min-height:180px}
.x-kb-col p{font-family:var(--f-ui);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);padding:0 2px 4px}
.x-kb-c,.x-kb-mover{display:flex;flex-direction:column;gap:2px;padding:12px;border-radius:12px;background:var(--white);box-shadow:0 0 0 1px var(--line);font-family:var(--f-ui)}
.x-kb-c b,.x-kb-mover b{font-size:12.5px;font-weight:500}.x-kb-c small,.x-kb-mover small{font-size:11.5px;color:var(--ink-3)}
.x-kb-mover{position:absolute;left:16px;top:var(--top,150px);width:calc((100% - 56px)/3);box-shadow:0 0 0 2px var(--blue),0 12px 24px -12px rgba(0,122,255,.5);transition:transform 1s var(--ease);transform:translateX(calc(var(--col,2) * (100% + 12px)))}
/* agenda */
.x-agenda ul{list-style:none;margin:0;padding:12px 18px;display:flex;flex-direction:column;gap:8px}
.x-agenda li{display:grid;grid-template-columns:52px minmax(0,1fr);gap:12px;align-items:center}
.x-ag-t{font-family:var(--f-ui);font-size:12px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.x-ag-b{display:flex;flex-direction:column;padding:10px 12px;border-radius:12px;background:var(--blue-wash);border-left:3px solid var(--blue);transition:opacity .5s,transform .5s}
.x-ag-b.ok{background:rgba(52,199,89,.12);border-color:var(--ok)}.x-ag-b.mute{background:var(--paper);border-color:var(--neutral)}
.x-ag-b b{font-size:13.5px;font-weight:500}.x-ag-b small{font-family:var(--f-ui);font-size:12px;color:var(--ink-2)}
.mx-armed.x-agenda li .x-ag-b{opacity:0;transform:translateX(-10px)}
.mx-armed.x-agenda li.in .x-ag-b{opacity:1;transform:none}
@media (max-width:980px){.x-fhead{grid-template-columns:minmax(0,1fr);align-items:start}.x-pdv-b{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){
  .x-fhead{text-align:left}.x-fhead .stack-m,.x-fhead-copy{align-items:flex-start}
  .x-pdv-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.x-pdv-p{padding:10px}.x-pdv-p .ic{width:18px;height:18px}
  .x-map-h,.x-map li{grid-template-columns:1fr 28px 1fr}.x-map ul{padding:0 12px 12px}.x-map-a,.x-map-b{padding:10px;font-size:12.5px}.x-map-b b{font-size:13px}
  .x-stock li{grid-template-columns:minmax(0,1fr) auto;gap:8px 12px}.x-stock .x-lvl{grid-column:1/-1;grid-row:2}
  .x-flowh{grid-template-columns:minmax(0,1fr)}.x-flowh li{align-items:flex-start;text-align:left}.x-flowh li:not(:last-child)::after{right:50%;top:auto;bottom:-12px;width:2px;height:12px}
  .x-kb{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:10px}.x-kb-c,.x-kb-mover{padding:8px}.x-kb-c b,.x-kb-mover b{font-size:11px}.x-kb-c small,.x-kb-mover small{font-size:10px}
  .x-kb-mover{left:10px;width:calc((100% - 32px)/3);transform:translateX(calc(var(--col,2) * (100% + 6px)))}
}
.mx-armed .x-kb-mover{--col:0}
.x-kb-mover{top:var(--top,118px)}
@media (max-width:640px){.x-kb-mover{top:var(--topm,96px)}.x-kb-col{min-height:150px}}

/* continuação de uma seção dividida para caber na tela: mesmo fundo, menos espaço em cima */
.section.x-cont{padding-top:calc(var(--space-section) * .35)}

/* cabeçalhos de seção no desktop: título com mais largura (menos linhas), texto ao lado mais estreito */
@media (min-width:1100px){
  .section :is(.op2-head,.op-head,.oc-head,.mc-head,.in-head,.fh-head,.fc-head,.erp-head,.ec-head,.e-head,.dp-head,.ct-head,.crm-head,.auto-head,.a-head){grid-template-columns:minmax(0,1.5fr) minmax(0,.8fr)}
  .section :is(.op2-head,.op-head,.oc-head,.mc-head,.in-head,.fh-head,.fc-head,.erp-head,.ec-head,.e-head,.dp-head,.ct-head,.crm-head,.auto-head,.a-head) .h2{max-width:22ch}
}

/* telas de notebook (pouca altura): títulos e espaços um pouco menores para cada seção caber inteira */
@media (min-width:1100px) and (max-height:860px){
  :root{--fs-h2:clamp(1.8rem,1.1rem + 1.7vw,2.35rem);--fs-display:clamp(2.3rem,1.3rem + 2.4vw,3.3rem);--space-section:min(clamp(40px,1.5rem + 2vw,72px),5vh);--space-head:min(clamp(22px,.8rem + 1.5vw,40px),3vh)}
  .x-h1{font-size:clamp(2.1rem,1.1rem + 2.4vw,3.3rem)}
}


/* MINFONT:INICIO — celular: textos com no mínimo 12px (gerado) */
@media (max-width:640px){.x-bar span,.x-side li,.x-kpi span,.x-chart p,.x-ph-list li,.x-time,.x-ill,.x-note,.x-eb,.x-paid,.x-ponto-s,.x-ring small,.x-msg small,.x-msg.sys,.x-code-h span,.x-map-h,.x-kb-col p,.x-kb-c small,.x-kb-mover small,.x-kb-c b,.x-kb-mover b{font-size:12px}}
/* MINFONT:FIM */

/* celular: links de texto com área de toque confortável; desktop: botões lado a lado */
@media (max-width:640px){
  main .link{min-height:44px;display:inline-flex;align-items:center}
  main .x-card-link{min-height:44px}
}
@media (min-width:1100px){
  main .btn-row{flex-wrap:nowrap}
  main .btn-row .btn{white-space:nowrap}
}

/* celular: tudo alinhado à esquerda, como no desktop; botões em largura total */
@media (max-width:640px){
  main section .x-pill-hero{display:inline-flex;width:fit-content}
  main section .btn-row{justify-content:flex-start;flex-wrap:wrap}
  main section .btn-row .btn{width:100%;flex:0 0 auto;justify-content:center}
}
@media (max-width:640px){main:where(:not(.a-content)) section :is(ul,ol) li{text-align:left}}

/* ===== Pessoas: seção de foto (humanização) ===== */
.x-people{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:40px clamp(40px,6vw,96px);align-items:center}
.x-people.rev{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
.x-people.rev .x-people-photo{order:2}
.photo.x-people-photo{aspect-ratio:3/2;width:100%;box-shadow:0 24px 60px -32px rgba(10,20,60,.35)}
.x-people-photo figcaption{max-width:70%}
.x-people-copy{display:flex;flex-direction:column;gap:16px}
.x-people-copy .body{max-width:42ch;color:var(--ink-2)}
.x-people-copy .x-people-tag{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-3)}
.x-people-copy .x-people-tag::before{content:"";width:22px;height:2px;border-radius:2px;background:var(--blue)}
@media (min-width:1100px) and (max-height:860px){.photo.x-people-photo{aspect-ratio:16/10}}
@media (max-width:900px){.x-people,.x-people.rev{grid-template-columns:minmax(0,1fr);row-gap:28px}.x-people .x-people-copy{order:-1}.x-people.rev .x-people-photo{order:0}}
@media (max-width:640px){.photo.x-people-photo{aspect-ratio:4/3;border-radius:16px}.x-people-copy{align-items:flex-start;text-align:left}}

/* ===== Heróis próprios dos módulos (Locus, Opus, Modus): cada um com a sua cena ===== */
.x-hv{position:relative;width:100%;max-width:580px;justify-self:center;display:grid;gap:14px}
.x-hv .x-ill{grid-column:1 / -1;margin:0}
.x-hv-card{display:flex;flex-direction:column;gap:10px;padding:16px;border-radius:18px;background:var(--white);box-shadow:0 0 0 1px var(--line),0 18px 40px -28px rgba(10,20,60,.35)}
.x-hv-k{display:flex;align-items:center;gap:8px;font-family:var(--f-ui);font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.x-hv-k .ic{width:16px;height:16px;color:var(--blue)}
.x-hv-blue{background:var(--blue);box-shadow:0 18px 40px -24px rgba(0,110,255,.6)}
.x-hv-blue .x-hv-k{color:rgba(255,255,255,.8)}.x-hv-blue .x-hv-k .ic{color:#fff}
.x-hv-blue .x-flowmini li{background:rgba(255,255,255,.14);color:#fff}.x-hv-blue .x-flowmini .ic{color:#fff}
.x-hv-nf{display:flex;align-items:center;gap:8px;font-family:var(--f-ui);font-size:12.5px;font-weight:500;color:var(--ok-text,#17803D)}
.x-hv-nf .ic{width:16px;height:16px}
/* Locus: cupom + lateral */
.x-hv-loja{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:start}
.x-hv-ticket{display:flex;flex-direction:column;gap:12px;padding:18px;border-radius:22px;background:var(--ink);color:var(--paper);box-shadow:0 30px 60px -30px rgba(10,20,60,.55)}
.x-hv-th{display:flex;align-items:center;gap:10px}
.x-hv-th .ic{width:34px;height:34px;padding:8px;border-radius:10px;background:rgba(255,255,255,.1)}
.x-hv-th span{display:flex;flex-direction:column}.x-hv-th b{font-weight:500}.x-hv-th small{font-size:12px;color:var(--paper-2)}
.x-hv-ticket .x-receipt{margin:0;padding:12px;background:rgba(255,255,255,.06)}
.x-hv-ticket .x-hv-nf{color:#5BD58A}
.x-hv-side{display:flex;flex-direction:column;gap:14px;margin-top:28px}
.x-hv-side .x-mini{margin:0}
.x-hv-side .x-flowmini{margin:0}
/* Opus: ordem de serviço */
.x-hv-os{padding-bottom:34px}
.x-hv-doc{padding-bottom:16px}
.x-hv-meta{margin:0;padding:14px 18px 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.x-hv-meta dt{font-size:12px;color:var(--ink-3)}.x-hv-meta dd{margin:2px 0 0;font-size:13.5px;font-weight:500}
.x-hv-steps{list-style:none;margin:16px 18px 6px;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;counter-reset:st}
.x-hv-steps li{position:relative;padding-top:14px;font-family:var(--f-ui);font-size:12px;color:var(--ink-3)}
.x-hv-steps li::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;border-radius:4px;background:var(--line)}
.x-hv-steps li.on::before{background:var(--blue)}.x-hv-steps li.on{color:var(--ink)}
.x-hv-steps li.now{font-weight:500}
.x-hv-doc .x-check{padding:6px 18px 0}
.x-hv-doc .x-hv-nf{padding:10px 18px 0}
.x-hv-float{position:absolute;right:-18px;bottom:0;width:210px}
.x-hv-float .x-ponto{background:var(--white);box-shadow:0 0 0 1px var(--line),0 24px 50px -26px rgba(10,20,60,.45)}
/* Modus: vendas chegando */
.x-hv-sum{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;padding:18px 20px;border-radius:22px;background:var(--ink);color:var(--paper)}
.x-hv-sum .x-big b{color:var(--paper)}.x-hv-sum .x-big span{color:var(--paper-2)}
.x-hv-plats{display:flex;gap:6px;flex-wrap:wrap}
.x-hv-plats span{height:26px;display:inline-flex;align-items:center;padding:0 10px;border-radius:999px;background:rgba(255,255,255,.12);font-family:var(--f-ui);font-size:12px}
.x-hv-sales{margin:0;gap:8px}
.x-hv-sales li{padding:12px 14px;background:var(--white);box-shadow:0 0 0 1px var(--line),0 14px 30px -24px rgba(10,20,60,.35)}
.x-hv-sales li span{display:flex;flex-direction:column;flex:1;min-width:0}
.x-hv-sales li b{font-weight:500;font-size:13.5px}.x-hv-sales li small{font-size:12px;color:var(--ink-3)}
.x-hv-sales li em{font-style:normal;font-weight:500;font-size:13.5px}.x-hv-sales li em .ic{width:16px;height:16px;color:var(--ok)}
@media (max-width:640px){
  .x-hv-loja{grid-template-columns:minmax(0,1fr)}.x-hv-side{margin-top:0}
  .x-hv-meta{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .x-hv-float{position:static;width:auto;margin-top:-20px;justify-self:center;min-width:220px}
  .x-hv-os{padding-bottom:0}
  .x-hv,.x-hv *{text-align:left}
  .x-hv-sum{flex-direction:column;align-items:flex-start}
}

/* ===== Cabeçalho de seção (tela embaixo, largura total): hierarquia de leitura.
   Etiqueta → título → texto logo abaixo, tudo à esquerda. Nada de texto solto à direita, acima ou ao lado do título. ===== */
@media (min-width:981px){
  .section :is(.a-head,.auto-head,.auto2-head,.crm-head,.ct-head,.dp-head,.e-head,.ec-head,.erp-head,.fc-head,.fh-head,.in-head,.mc-head,.mp-head,.oc-head,.op-head,.op2-head,.x-fhead,.sb-head,.dv-head,.pv-head){display:flex !important;flex-direction:column !important;align-items:flex-start !important;justify-content:flex-start !important;gap:16px !important;text-align:left}
  .section :is(.a-head,.auto-head,.auto2-head,.crm-head,.ct-head,.dp-head,.e-head,.ec-head,.erp-head,.fc-head,.fh-head,.in-head,.mc-head,.mp-head,.oc-head,.op-head,.op2-head,.x-fhead,.sb-head,.dv-head,.pv-head) > *{margin:0 !important;max-width:none}
  .section :is(.a-head,.auto-head,.auto2-head,.crm-head,.ct-head,.dp-head,.e-head,.ec-head,.erp-head,.fc-head,.fh-head,.in-head,.mc-head,.mp-head,.oc-head,.op-head,.op2-head,.x-fhead,.sb-head,.dv-head,.pv-head) :is(.stack-m,[class$="-head-copy"],[class$="-head-col"],.x-fhead-copy){display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin:0 !important;text-align:left}
  .section :is(.a-head,.auto-head,.auto2-head,.crm-head,.ct-head,.dp-head,.e-head,.ec-head,.erp-head,.fc-head,.fh-head,.in-head,.mc-head,.mp-head,.oc-head,.op-head,.op2-head,.x-fhead,.sb-head,.dv-head,.pv-head) :is(.h2,h2){max-width:24ch}
  .section :is(.a-head,.auto-head,.auto2-head,.crm-head,.ct-head,.dp-head,.e-head,.ec-head,.erp-head,.fc-head,.fh-head,.in-head,.mc-head,.mp-head,.oc-head,.op-head,.op2-head,.x-fhead,.sb-head,.dv-head,.pv-head) :is(.body,p:not(.eyebrow)){max-width:62ch}
}
/* títulos sem palavra solta na última linha; texto corrido sem viúva */
.h1,.h2,.x-h2,.x-band-t{text-wrap:balance}
.body,.lead,.x-sub{text-wrap:pretty}

/* ===== MENOS CAIXA: variação de linguagem. Cartão só onde a caixa é a informação (telas, destaque escuro/azul).
   O resto vira lista editorial, coluna com fio, linha do tempo. Segue a home: texto, tela, fio, faixa. ===== */
/* fluxo numerado: colunas abertas com fio em cima e número grande */
.x-flow{gap:0 clamp(24px,3vw,48px)}
.x-flow li{background:none;box-shadow:none;border-radius:0;padding:22px 0 8px;border-top:1px solid var(--line-2);gap:12px}
.x-flow-n{position:static;order:-1;font-size:13px;font-weight:500;color:var(--blue-text);letter-spacing:.08em}
.x-flow li .x-card-ic{display:none}
.x-flow h3{font-size:1.15rem}
.x-flow p{font-size:15px;line-height:1.55;color:var(--ink-2)}
.dark .x-flow li{border-top-color:var(--line-d)}
/* fluxo horizontal: linha do tempo com ponto, sem caixas */
.x-flowh{gap:0 20px}
.x-flowh li{background:none;box-shadow:none;border-radius:0;padding:18px 0 0;border-top:2px solid var(--line-2);gap:6px;position:relative}
.x-flowh li::before{content:"";position:absolute;left:0;top:-6px;width:10px;height:10px;border-radius:50%;background:var(--white);box-shadow:0 0 0 2px var(--line-2)}
.x-flowh li .x-card-ic{width:22px;height:22px;padding:0;background:none;box-shadow:none;color:var(--blue);margin-bottom:2px}
.x-flowh li:not(:last-child)::after{display:none}
.mx-armed.x-flowh li.in{box-shadow:none;border-top-color:var(--blue)}
.mx-armed.x-flowh li.in::before{background:var(--blue);box-shadow:0 0 0 4px var(--blue-wash,#E8F1FF)}
.mx-armed.x-flowh li.in.past{box-shadow:none;border-top-color:var(--blue)}
.dark .x-flowh li{border-top-color:var(--line-d)}.dark .x-flowh li::before{background:var(--ink);box-shadow:0 0 0 2px var(--line-d)}
.dark .x-flowh b{color:var(--paper)}.dark .x-flowh small{color:var(--paper-2)}
/* bento: cartões brancos viram colunas abertas; o escuro e o azul continuam preenchidos (um destaque por grade) */
.x-bento{gap:0 clamp(20px,3vw,40px);grid-auto-rows:auto}
.x-bento .x-card:not(.x-blue):not(.x-dark){background:none;box-shadow:none;border-radius:0;padding:22px 0 10px;border-top:1px solid var(--line-2)}
.x-bento .x-card:is(.x-blue,.x-dark){margin-block:10px 0}
.x-bento .x-card:not(.x-blue):not(.x-dark) .x-card-ic{background:none;box-shadow:none;padding:0;width:22px;height:22px}
/* listas com ícone: sem caixa em volta do ícone nem do item */
.x-pts .ic{background:none;box-shadow:none;padding:0;width:22px;height:22px}
.p-areas li,.pv-areas li,.dv-pts li{background:none !important;box-shadow:none !important;border-radius:0 !important;padding:14px 0 !important;border-top:1px solid var(--line-2)}
.p-areas,.pv-areas{gap:0 !important}
.p-areas li:last-child,.pv-areas li:last-child{border-bottom:1px solid var(--line-2)}
.p-areas .ic,.pv-areas .ic{background:none !important;box-shadow:none;padding:0 !important;width:24px !important;height:24px !important;color:var(--blue)}
.dv-pts{gap:0 32px !important}
/* duo de comparação: coluna aberta × coluna escura */
.x-duo{gap:0 clamp(32px,4vw,64px);align-items:stretch}
.x-duo .x-card.x-white{background:none;box-shadow:none;border-radius:0;padding:28px 0;border-top:1px solid var(--line-2)}
.x-duo .x-card.x-white .x-card-ic{background:none;box-shadow:none;padding:0;width:22px;height:22px}
/* fotos continuam fotos; pills do hero continuam pills */

/* vazamentos pontuais no desktop */
@media (min-width:1100px){
  .oc-flow{grid-template-columns:minmax(0,1fr) 36px minmax(0,1.05fr) 36px minmax(0,1fr)}
  .oc-in,.oc-flow > *{min-width:0}
  .oc-fork-steps{gap:20px}.oc-fork-steps li{min-width:0}
  .ec-close{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
  .pv-run-ops{grid-template-columns:repeat(3,minmax(0,1fr)) 48px;row-gap:8px}
  .e-tr-items li{min-width:0}.e-tr-items .v{overflow-wrap:anywhere}
  .crm-stage{min-width:0}.crm-stage-c{overflow:hidden;text-overflow:ellipsis}
  main .btn-row .btn{white-space:nowrap}
  main .btn-row{flex-wrap:nowrap}
}
@media (min-width:1100px){
  #precisa-de-voce .mc-pv{zoom:.95}
  .ec-close{grid-template-columns:minmax(0,1fr) auto}
  .ec-close-side .btn-row{flex-wrap:nowrap}
}
@media (min-width:1100px){.ec-close{grid-template-columns:minmax(0,1fr) minmax(0,560px)}}
@media (min-width:1100px){
  .x-card-h{flex-wrap:wrap}.x-card-h .x-eb{min-width:0;overflow-wrap:anywhere}
  .ui-head{flex-wrap:wrap;row-gap:4px}
  .crm-stage{flex:0 0 auto}.crm-stage-c{overflow:visible}
  .ec-close-side{min-width:0}.ec-close-side .btn-row{flex-wrap:wrap}
}
@media (min-width:1100px){.ec-close{grid-template-columns:minmax(0,1fr) max-content}.ec-close-side .btn-row{flex-wrap:nowrap}.ec-close-side .body{max-width:40ch}}
/* aberturas em duas colunas: mesmo tamanho de título em todas as páginas */
@media (min-width:1100px){
  .mc-hero .mc-h1,.ec-hero-in .ec-h1,.fh-hero .fh-h1,.pv-hero-copy .pv-h1,.p-hero-copy2 .p-h1,.e-hero-title .h1,.x-hero .x-h1{font-size:clamp(2.4rem,1.3rem + 2vw,3.3rem);line-height:1.06;max-width:17ch}
}
@media (min-width:1100px){.ec-close{grid-template-columns:minmax(0,1fr) minmax(0,auto)}.ec-close-side{width:max-content;max-width:600px}.ec-close-side .btn-row{flex-wrap:nowrap;width:max-content}}

/* =====================================================================
   PADRÃO r2 — seção com texto de um lado e motion do outro.
   Hierarquia única: eyebrow (12) → título (h2) → texto (18) → nota (14, discreta).
   Toda seção r2 tem o mesmo respiro e a mesma altura mínima de conteúdo.
   ===================================================================== */
.r2-sec{padding-block:var(--space-section) !important}
.r2-sec .wrap.r2{display:grid !important;grid-template-columns:minmax(0,1fr) !important;gap:40px !important;align-items:center !important}
.r2-copy{display:flex !important;flex-direction:column !important;align-items:flex-start !important;text-align:left;min-width:0;margin:0 !important}
.r2-copy > *{margin:0 !important}
.r2-copy .eyebrow,.r2-copy > .eyebrow{display:block;margin-bottom:16px !important}
.r2-copy .h2{max-width:17ch}
.r2-body{margin-top:20px !important;font-size:18px;line-height:1.55;color:var(--ink-2);max-width:44ch}
.r2-note{margin-top:28px !important;font-size:14px;line-height:1.55;color:var(--ink-3);max-width:46ch}
.r2-notes{margin-top:28px !important;list-style:none;padding:0;display:flex;flex-direction:column;gap:8px;font-size:14px;line-height:1.45;color:var(--ink-2)}
.r2-notes li{position:relative;padding-left:18px;max-width:46ch}
.r2-notes li::before{content:"";position:absolute;left:0;top:.6em;width:6px;height:6px;border-radius:50%;background:var(--blue)}
.r2-copy .btn-row{margin-top:32px !important}
.dark .r2-body{color:var(--paper-2)}
.dark .r2-note{color:rgba(245,245,247,.68)}
.dark .r2-notes{color:var(--paper-2)}
.r2-vis{min-width:0;width:100%;max-width:620px;margin:0 !important}
@media (min-width:1100px){
  .r2-sec .wrap.r2{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr) !important;column-gap:clamp(56px,6vw,104px) !important;min-height:480px}
  .r2-vis{justify-self:end}
  .r2-flip .r2-copy{order:2}
  .r2-flip .r2-vis{order:1;justify-self:start}
}
@media (max-width:720px){
  .r2-sec .wrap.r2{gap:32px !important}
  .r2-copy .eyebrow{margin-bottom:12px !important}
  .r2-body{font-size:17px;margin-top:16px !important}
  .r2-note,.r2-notes{margin-top:20px !important}
}
@media (min-width:1100px){.r2-vis,.r2-flip .r2-vis{justify-self:stretch}}
.r2-vis > .sx{width:100%}
@media (min-width:1100px){.r2-sec .wrap.r2.r2-flip{grid-template-columns:minmax(0,1.14fr) minmax(0,.86fr) !important}}
.r2-copy > *{order:0 !important}
/* fechamento e cabeçalhos: sempre à esquerda (mesma hierarquia das seções r2) */
.x-close-in{align-items:flex-start !important;text-align:left !important}
.x-close-in :is(.h2,.x-h2,h2){max-width:20ch;margin-inline:0 !important}
.x-close-in :is(p,.body,.x-sub){margin-inline:0 !important;text-align:left !important}
@media (min-width:900px){.x-close-in{display:grid !important;grid-template-columns:minmax(0,1fr) auto;column-gap:48px;align-items:end !important}.x-close-in > :not(.btn-row){grid-column:1}.x-close-in > .btn-row{grid-column:2;grid-row:1 / span 3;align-self:end}}
.x-head{align-items:flex-start !important;text-align:left !important}
.x-head .x-sub{text-align:left !important;margin-inline:0 !important}

/* ===== Cenas do sistema (sx) =====
   Réplicas reduzidas de telas reais do sistema AGGU (área do escritório e portal do cliente),
   com os mesmos tokens, componentes e rótulos. Animadas por src/lib/sysmock.js.
   Critérios: docs/motion/CRITERIOS_MOTION.md */
.sx{--sx-line:rgba(29,29,31,.09);--sx-line2:rgba(29,29,31,.15);--sx-wash:rgba(29,29,31,.045);--sx-ink2:rgba(29,29,31,.64);--sx-ink3:rgba(29,29,31,.62);
  --sx-ok:#34C759;--sx-ok-t:#1F7A3A;--sx-ok-b:rgba(52,199,89,.13);--sx-warn:#FF9F0A;--sx-warn-t:#8A5300;--sx-warn-b:rgba(255,159,10,.14);
  --sx-al:#FF3B30;--sx-al-t:#B4231B;--sx-al-b:rgba(255,59,48,.09);--sx-blue:#007AFF;--sx-blue-t:#0060C9;--sx-blue-b:rgba(0,122,255,.09);
  --sx-ease:cubic-bezier(.2,.7,.2,1);
  position:relative;font-family:var(--f-ui);font-size:13px;line-height:1.45;color:var(--ink);text-align:left;letter-spacing:0;width:100%;min-width:0}
.sx *{box-sizing:border-box}
.sx :where(h3,h4,p,ul,ol,dl,dd){margin:0}
.sx :where(ul,ol){list-style:none;padding:0}

/* janela: trilho escuro (modo ícones do sistema) + área clara */
.sx-win{display:grid;grid-template-columns:52px minmax(0,1fr);background:var(--paper);border-radius:16px;overflow:hidden;box-shadow:0 0 0 1px var(--sx-line),0 30px 60px -36px rgba(10,20,60,.35)}
.sx-win.no-rail{grid-template-columns:minmax(0,1fr)}
.dark .sx-win{box-shadow:0 0 0 1px rgba(255,255,255,.06),0 30px 60px -30px rgba(0,0,0,.6)}
.sx-rail{background:var(--ink);display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 0}
.sx-rail img{width:22px;height:auto;margin-bottom:10px;display:block}
.sx-rail i{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;color:rgba(245,245,247,.55)}
.sx-rail i svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6}
.sx-rail i.on{background:var(--sx-blue);color:#fff}
.sx-main{min-width:0;display:flex;flex-direction:column}
.sx-top{display:flex;align-items:center;gap:10px;padding:12px 16px 10px;border-bottom:1px solid var(--sx-line);background:rgba(245,245,247,.9)}
.sx-top-t{flex:1;min-width:0}
.sx-crumb{font-size:12px;color:var(--sx-ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sx-h1{font-family:var(--f-brand);font-size:17px;font-weight:500;letter-spacing:-.015em;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sx-tabs{display:flex;gap:2px;padding:0 12px;border-bottom:1px solid var(--sx-line);overflow:hidden;background:rgba(245,245,247,.9)}
.sx-tab{position:relative;height:38px;padding:0 10px;display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--sx-ink2);white-space:nowrap;transition:color .25s}
.sx-tab.on{color:var(--ink);font-weight:500}
.sx-tab.on::after{content:"";position:absolute;left:8px;right:8px;bottom:-1px;height:2px;border-radius:2px;background:var(--sx-blue)}
.sx-tab .n{font-size:11px;font-weight:500;background:var(--sx-wash);border-radius:999px;padding:1px 6px;color:var(--sx-ink2)}
.sx-body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:10px;min-width:0}

/* componentes */
.sx-card{background:#fff;border:1px solid var(--sx-line);border-radius:14px;padding:14px 16px;min-width:0}
.sx-card.flush{padding:0;overflow:hidden}
.sx-card-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.sx-card.flush > .sx-card-h{padding:12px 16px 0;margin-bottom:4px}
.sx-card-t{font-family:var(--f-brand);font-size:14px;font-weight:500;letter-spacing:-.01em}
.sx-card-s{font-size:12px;color:var(--sx-ink3)}
.sx-metrics{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:8px}
.sx-metric{position:relative;background:#fff;border:1px solid var(--sx-line);border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:1px;min-width:0}
.sx-metric b{font-family:var(--f-brand);font-weight:400;font-size:26px;line-height:1.15;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.sx-metric span{font-size:12.5px;color:var(--sx-ink2);line-height:1.3}
.sx-metric small{font-size:12px;color:var(--sx-ink3)}
.sx-metric .sx-dot{position:absolute;top:12px;right:12px}
.sx-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#AAAAAA;flex:none}
.sx-dot.ok{background:var(--sx-ok)}.sx-dot.warn{background:var(--sx-warn)}.sx-dot.al{background:var(--sx-al)}.sx-dot.blue{background:var(--sx-blue)}
.sx-badge{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 8px;border-radius:999px;background:var(--sx-wash);color:var(--sx-ink2);font-size:12px;font-weight:500;line-height:1;white-space:nowrap;transition:background .25s,color .25s}
.sx-badge.blue{background:var(--sx-blue-b);color:var(--sx-blue-t)}
.sx-badge.ok{background:var(--sx-ok-b);color:var(--sx-ok-t)}
.sx-badge.warn{background:var(--sx-warn-b);color:var(--sx-warn-t)}
.sx-badge.al{background:var(--sx-al-b);color:var(--sx-al-t)}
.sx-badge.dark{background:var(--ink);color:var(--paper)}
.sx-badge.dot::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.9}
.sx-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:30px;padding:0 10px;border-radius:8px;border:1px solid var(--sx-line2);background:#fff;color:var(--ink);font-family:var(--f-brand);font-size:12.5px;font-weight:500;white-space:nowrap;transition:transform .16s var(--sx-ease),box-shadow .16s,background .2s,color .2s,border-color .2s}
.sx-btn.primary{background:var(--sx-blue);border-color:var(--sx-blue);color:#fff}
.sx-btn.ok{color:var(--sx-ok-t);border-color:rgba(31,122,58,.3)}
.sx-btn.is-press{transform:scale(.96);box-shadow:0 0 0 4px rgba(0,122,255,.18)}
.sx-btn.is-done{background:var(--sx-ok-b);border-color:transparent;color:var(--sx-ok-t)}
.sx-rows > li{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:4px 12px;padding:10px 16px;border-top:1px solid var(--sx-line);transition:background .3s,opacity .35s var(--sx-ease),transform .35s var(--sx-ease)}
.sx-rows > li:first-child{border-top:0}
.sx-rows .t{font-family:var(--f-brand);font-size:14px;font-weight:500;line-height:1.3;display:block;min-width:0}
.sx-rows .s{display:block;font-size:12.5px;color:var(--sx-ink3);margin-top:1px}
.sx-rows .r{display:flex;align-items:center;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.sx-rows > li.is-hi{background:var(--sx-blue-b)}
.sx-rows > li.is-out{opacity:0;transform:translateX(12px)}
.sx-rows > li.is-new{animation:sxIn .45s var(--sx-ease) both}
.sx-ic{width:30px;height:30px;border-radius:9px;background:var(--paper);display:grid;place-items:center;color:var(--sx-ink2);flex:none}
.sx-ic svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.6}
.sx-ic.al{background:var(--sx-al-b);color:var(--sx-al-t)}.sx-ic.warn{background:var(--sx-warn-b);color:var(--sx-warn-t)}.sx-ic.blue{background:var(--sx-blue-b);color:var(--sx-blue-t)}.sx-ic.ok{background:var(--sx-ok-b);color:var(--sx-ok-t)}
.sx-li{display:flex;align-items:center;gap:10px;min-width:0}
.sx-li > div{min-width:0}
.sx-cal{width:38px;height:40px;border-radius:9px;background:var(--paper);display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.05;flex:none}
.sx-cal b{font-family:var(--f-brand);font-size:14px;font-weight:500}.sx-cal span{font-size:10.5px;color:var(--sx-ink3);text-transform:uppercase}
.sx-cal.al{background:var(--sx-al-b)}.sx-cal.al b{color:var(--sx-al-t)}
.sx-strip{display:flex;align-items:center;gap:8px 16px;flex-wrap:wrap;background:#fff;border:1px solid var(--sx-line);border-radius:12px;padding:10px 14px;font-size:12.5px;color:var(--sx-ink2)}
.sx-strip b{color:var(--ink);font-weight:500}
.sx-kv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 14px;font-size:12.5px}
.sx-kv dt{color:var(--sx-ink3)}.sx-kv dd{text-align:right}
.sx-bar{height:8px;border-radius:999px;background:var(--sx-wash);overflow:hidden}
.sx-bar i{display:block;height:100%;width:100%;border-radius:999px;background:var(--sx-blue);transform-origin:left;transform:scaleX(var(--v,0));transition:transform .9s var(--sx-ease)}
.sx-ring{--v:0;width:96px;height:96px;flex:none;position:relative}
.sx-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.sx-ring circle{fill:none;stroke-width:12}
.sx-ring .bg{stroke:var(--sx-al)}
.sx-ring .fg{stroke:var(--sx-ok);stroke-dasharray:calc(var(--v) * 2.639) 263.9;transition:stroke-dasharray 1.1s var(--sx-ease)}
.sx-ring > span{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.05}
.sx-ring b{font-family:var(--f-brand);font-size:22px;font-weight:400;letter-spacing:-.02em}.sx-ring small{font-size:11px;color:var(--sx-ink3)}
.sx-legend{display:flex;flex-direction:column;gap:6px;font-size:12.5px;color:var(--sx-ink2);flex:1;min-width:0}
.sx-legend li{display:flex;align-items:center;gap:8px}.sx-legend li b{margin-left:auto;color:var(--ink);font-weight:500;font-variant-numeric:tabular-nums}
.sx-legend i{width:9px;height:9px;border-radius:3px;flex:none}

/* conversa (Inbox / Kyra) */
.sx-chat{background:var(--paper);display:flex;flex-direction:column;gap:8px;padding:12px}
.sx-msg{display:flex}
.sx-msg.out{justify-content:flex-end}
.sx-bub{max-width:82%;padding:8px 11px 6px;border-radius:14px;background:#fff;border:1px solid var(--sx-line);font-size:13px;line-height:1.45}
.sx-msg.in .sx-bub{border-bottom-left-radius:4px}
.sx-msg.out .sx-bub{background:var(--sx-blue);border-color:var(--sx-blue);color:#fff;border-bottom-right-radius:4px}
.sx-bub small{display:block;text-align:right;font-size:11px;color:var(--sx-ink3);margin-top:2px}
.sx-msg.out .sx-bub small{color:rgba(255,255,255,.82)}
.sx-file{display:flex;align-items:center;gap:8px;margin-bottom:4px;padding:6px 8px;border-radius:9px;background:var(--paper)}
.sx-file i{width:26px;height:30px;border-radius:5px;background:var(--sx-al);color:#fff;font-style:normal;font-size:9px;font-weight:700;display:grid;place-items:center}
.sx-typing{display:inline-flex;gap:3px}.sx-typing i{width:5px;height:5px;border-radius:50%;background:var(--sx-ink3);animation:sxDot 1.1s infinite ease-in-out}.sx-typing i:nth-child(2){animation-delay:.15s}.sx-typing i:nth-child(3){animation-delay:.3s}
.sx-ask{display:flex;align-items:center;gap:8px;padding:10px 12px;border-top:1px solid var(--sx-line);background:#fff}
.sx-ask span{flex:1;min-width:0;height:34px;border-radius:10px;border:1px solid var(--sx-line2);padding:0 10px;display:flex;align-items:center;color:var(--sx-ink3);font-size:13px;overflow:hidden;white-space:nowrap}
.sx-ask span.typed{color:var(--ink)}
.sx-ask em{width:34px;height:34px;border-radius:10px;background:var(--sx-blue);display:grid;place-items:center;color:#fff;font-style:normal}

/* kanban (Processos / CRM) */
.sx-kb{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:8px;position:relative}
.sx-col{background:var(--sx-wash);border-radius:12px;padding:8px;display:flex;flex-direction:column;gap:6px;min-width:0;min-height:150px}
.sx-col > p{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:500;padding:2px 4px 4px}
.sx-col > p b{margin-left:auto;font-weight:500;color:var(--sx-ink3)}
.sx-kc{background:#fff;border:1px solid var(--sx-line);border-radius:10px;padding:8px 10px;font-size:12px;line-height:1.35;transition:transform .55s var(--sx-ease),box-shadow .3s}
.sx-kc b{display:block;font-family:var(--f-brand);font-size:13px;font-weight:500}
.sx-kc span{color:var(--sx-ink3)}
.sx-kc.is-move{box-shadow:0 12px 24px -12px rgba(10,20,60,.4),0 0 0 2px var(--sx-blue);z-index:2;position:relative}

/* linha do tempo (Atividade recente) */
.sx-tl{position:relative;display:flex;flex-direction:column;gap:10px;padding-left:20px}
.sx-tl::before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:2px;background:var(--sx-line2);border-radius:2px}
.sx-tl li{position:relative;font-size:12.5px;color:var(--sx-ink2)}
.sx-tl li::before{content:"";position:absolute;left:-20px;top:4px;width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 2px #AAAAAA}
.sx-tl li.on::before{box-shadow:inset 0 0 0 4px var(--sx-blue)}
.sx-tl li b{display:block;color:var(--ink);font-weight:500;font-size:13px}
.sx-tl li time{font-size:11.5px;color:var(--sx-ink3)}

/* toast do sistema */
.sx-toast{position:absolute;left:50%;bottom:14px;transform:translate(-50%,8px);display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:12px;background:var(--ink);color:var(--paper);font-size:12.5px;white-space:nowrap;box-shadow:0 14px 30px -12px rgba(29,29,31,.5);opacity:0;pointer-events:none;transition:opacity .3s var(--sx-ease),transform .3s var(--sx-ease);z-index:5}
.sx-toast.on{opacity:1;transform:translate(-50%,0)}
.sx-toast svg{width:15px;height:15px;fill:none;stroke:#5BD07A;stroke-width:2}

/* barra de replay (fora da janela, como no restante do site) */
.sx-bar-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;min-height:30px}
.sx-live{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-2,rgba(29,29,31,.64))}
.sx-live i{width:7px;height:7px;border-radius:50%;background:var(--sx-ok);animation:sxPulse 2.2s infinite}
.dark .sx-live{color:var(--paper-2)}
.sx-replay{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border-radius:999px;border:1px solid rgba(29,29,31,.14);background:#fff;font-family:var(--f-ui);font-size:12.5px;color:var(--ink);cursor:pointer;opacity:0;pointer-events:none;transition:opacity .25s}
.sx-replay.on{opacity:1;pointer-events:auto}
.sx-replay svg{width:13px;height:13px}
.dark .sx-replay{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2);color:var(--paper)}

/* estados de entrada */
.sx [data-step]{transition:opacity .4s var(--sx-ease),transform .4s var(--sx-ease)}
.sx.is-armed [data-step]:not(.in){opacity:0;transform:translateY(8px)}

@keyframes sxIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes sxDot{0%,80%,100%{opacity:.3;transform:translateY(0)}40%{opacity:1;transform:translateY(-2px)}}
@keyframes sxPulse{0%,100%{box-shadow:0 0 0 0 rgba(52,199,89,.45)}50%{box-shadow:0 0 0 5px rgba(52,199,89,0)}}
@media (prefers-reduced-motion:reduce){.sx *,.sx *::before{transition:none!important;animation:none!important}}

/* celular: casca de app do sistema (sem trilho), linhas de toque */
@media (max-width:720px){
  .sx{font-size:13.5px}
  .sx-win{grid-template-columns:minmax(0,1fr);border-radius:20px}
  .sx-rail{display:none}
  .sx-top{padding:12px 14px 10px}
  .sx-h1{font-size:18px}
  .sx-tabs{overflow-x:auto;scrollbar-width:none;padding:0 8px}
  .sx-tabs::-webkit-scrollbar{display:none}
  .sx-body{padding:12px}
  .sx-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sx-metric b{font-size:24px}
  .sx-rows > li{padding:12px 14px;min-height:56px}
  .sx-rows .t{font-size:14.5px}
  .sx-btn{height:34px;font-size:13px}
  .sx-kb{grid-template-columns:repeat(var(--n,4),minmax(150px,1fr));overflow-x:auto;scrollbar-width:none}
  .sx .d-only{display:none!important}
}

/* ===== peças adicionais (lote Início) ===== */
.sx{container-type:inline-size}
.sx-tab .n{font-size:12px}
.sx-cal span{font-size:11px;letter-spacing:.02em}
.sx-ring small,.sx-bub small{font-size:12px}
.sx-file i{width:32px;font-size:10px;letter-spacing:.02em}
.sx-tl li time{font-size:12px}
.sx-rows > li.is-done{opacity:.6}
.sx-rows > li.is-done .t{text-decoration:line-through;text-decoration-color:rgba(29,29,31,.35)}

/* painéis de abas na mesma célula: trocar aba não muda a altura da cena */
.sx-panes{display:grid}
.sx-panes > [data-pane]{grid-area:1/1;transition:opacity .3s var(--sx-ease),transform .3s var(--sx-ease);min-width:0}
.sx-panes > [data-pane].off{opacity:0;visibility:hidden;transform:translateY(6px)}
.sx-c360-g{align-items:start}

/* espaço reservado: o que aparece depois já ocupa o lugar (sem salto de layout) */
.sx-slot{position:relative;display:grid}
.sx-slot > *{grid-area:1/1;min-width:0}
.sx-typing-m{align-self:start;transition:opacity .25s}
.sx-typing-m.gone{opacity:0!important}
.sx-wait{align-self:center;justify-self:center;text-align:center;padding:24px 0;transition:opacity .3s}
.sx-wait.gone{opacity:0}

/* Inbox: lista · conversa · dados da conversa */
.sx-ib{display:grid;grid-template-columns:minmax(0,1fr) 196px;gap:0;border:1px solid var(--sx-line);border-radius:14px;overflow:hidden;background:#fff}
.sx-cvl{display:none}
.sx-cvl > li{grid-template-columns:auto minmax(0,1fr) auto;padding:10px 12px}
.sx-cvl > li.on{background:var(--sx-blue-b)}
.sx-cvl .s{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sx-av{width:32px;height:32px;border-radius:50%;background:var(--ink);color:var(--paper);display:grid;place-items:center;font-size:12px;font-weight:600;flex:none}
.sx-ib-conv{min-width:0;display:flex;flex-direction:column;border-right:1px solid var(--sx-line)}
.sx-ib-h{display:flex;flex-direction:column;padding:10px 14px;border-bottom:1px solid var(--sx-line)}
.sx-ib-h b{font-family:var(--f-brand);font-weight:500;font-size:14px}.sx-ib-h span{font-size:12px;color:var(--sx-ink3)}
.sx-ib .sx-chat{flex:1}
.sx-ctx{padding:12px 14px;display:flex;flex-direction:column;gap:10px;min-width:0}
.sx-ctx .sx-kv{grid-template-columns:minmax(0,1fr);gap:1px}
.sx-ctx .sx-kv dt{font-size:12px}.sx-ctx .sx-kv dd{text-align:left;margin-bottom:6px;font-weight:500}
.sx-owner{transition:color .25s}
.sx-alert{font-size:12px;line-height:1.4;padding:8px 10px;border-radius:10px;background:var(--sx-al-b);color:var(--sx-al-t)}
.sx-ctx .sx-btn{align-self:stretch}
@container (min-width:780px){.sx-ib{grid-template-columns:230px minmax(0,1fr) 196px}.sx-cvl{display:block;border-right:1px solid var(--sx-line)}}

/* Kyra */
.sx-kyra{min-height:300px;justify-content:flex-start}
.sx-kyra .sx-card{background:#fff}
.sx-kyra [data-a] .sx-card-h{margin-bottom:2px}

/* Guias: escritório e portal lado a lado */
.sx-duo{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:12px;align-items:start}
.sx-side{font-size:12.5px;font-weight:500;color:var(--sx-ink2);margin:0 0 8px 2px}
.dark .sx-side{color:var(--paper-2)}
.sx-duo .sx-win .sx-h1{font-size:15px}
@container (max-width:560px){.sx-duo{grid-template-columns:minmax(0,1fr)}}

/* ERP: o que está acontecendo na loja */
.sx-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.sx-tile{display:flex;align-items:center;gap:10px;padding:10px;border-radius:12px;background:var(--paper);min-width:0}
.sx-tile b{display:block;font-family:var(--f-brand);font-weight:500;font-size:16px;line-height:1.2}
.sx-tile span{display:block;font-size:12px;color:var(--sx-ink3);line-height:1.3}
.sx-tile > div{min-width:0}
@container (max-width:560px){.sx-metrics[style*="--n:4"]{grid-template-columns:repeat(2,minmax(0,1fr))}.sx-tiles{grid-template-columns:minmax(0,1fr)}}

/* Consultivo: barras por competência */
.sx-colbars{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;align-items:end;height:140px;padding-top:8px}
.sx-col-b{height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:stretch;gap:6px;min-width:0}
.sx-col-b i{display:block;height:calc(var(--h) * 100%);border-radius:7px 7px 3px 3px;background:rgba(0,122,255,.28);transform-origin:bottom;transition:transform .7s var(--sx-ease)}
.sx-col-b:last-child i{background:var(--sx-blue)}
.sx-col-b span{font-size:12px;color:var(--sx-ink3);text-align:center}
.sx.is-armed .sx-col-b i:not(.in){transform:scaleY(0)}
.sx-read{justify-content:space-between}
.sx-read > span:not(.sx-badge){flex:1;min-width:0}

/* Marca própria: configuração ao lado do login do portal */
.sx-wl-g{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:14px;align-items:center}
.sx-wl{--wl:var(--sx-blue);display:flex;flex-direction:column;gap:8px}
.sx-wl[data-brand="office"]{--wl:#1F7A5A}
.sx-wl-url{display:flex;align-items:center;gap:8px;height:32px;padding:0 12px;border-radius:999px;background:#fff;border:1px solid var(--sx-line);font-size:12.5px;color:var(--sx-ink2);min-width:0}
.sx-wl-url i{width:8px;height:8px;border-radius:50%;background:var(--sx-ok);flex:none}
.sx-wl-u{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sx-wl-card{background:#fff;border:1px solid var(--sx-line);border-radius:16px;padding:20px;display:flex;flex-direction:column;gap:10px;box-shadow:0 30px 60px -40px rgba(10,20,60,.35)}
.sx-wl-logo{position:relative;height:40px;display:flex;align-items:center}
.sx-wl-logo > *{position:absolute;left:0;top:50%;transform:translateY(-50%);transition:opacity .35s var(--sx-ease),transform .35s var(--sx-ease)}
.sx-wl-logo img{width:34px;height:auto}
.sx-wl-logo .b{display:flex;align-items:center;gap:8px;opacity:0;transform:translateY(-30%)}
.sx-wl-logo .b i{width:34px;height:34px;border-radius:10px;background:var(--wl);color:#fff;font-style:normal;font-family:var(--f-brand);font-weight:600;font-size:13px;display:grid;place-items:center;transition:background .3s}
.sx-wl-logo .b b{font-family:var(--f-brand);font-weight:500;font-size:15px}
.sx-wl[data-logo] .sx-wl-logo img{opacity:0;transform:translateY(-70%)}
.sx-wl[data-logo] .sx-wl-logo .b{opacity:1;transform:translateY(-50%)}
.sx-wl-t{font-family:var(--f-brand);font-size:17px;font-weight:500;letter-spacing:-.015em;margin-top:4px}
.sx-wl-in{height:38px;border-radius:10px;border:1px solid var(--sx-line2);display:flex;align-items:center;padding:0 12px;color:var(--sx-ink3);font-size:13px}
.sx-wl-go{height:38px;background:var(--wl);border-color:var(--wl);transition:background .3s,border-color .3s}
.sx-wl-from{margin-top:2px}.sx-wl-from b{font-weight:500;color:var(--sx-ink2)}
@container (max-width:620px){.sx-wl-g{grid-template-columns:minmax(0,1fr)}}

@media (max-width:720px){
  .sx-ib{grid-template-columns:minmax(0,1fr)}
  .sx-ib-conv{border-right:0;border-bottom:1px solid var(--sx-line)}
  .sx-ctx .sx-kv{grid-template-columns:auto minmax(0,1fr);gap:4px 12px}
  .sx-ctx .sx-kv dd{text-align:right;margin:0}
  .sx-kyra{min-height:0}
  .sx-rows .r{justify-content:flex-start}
  .sx-rows > li{grid-template-columns:minmax(0,1fr)}
  .sx-cvl > li{grid-template-columns:auto minmax(0,1fr) auto}
}
.sx-win{position:relative}
.sx.is-armed :is([data-q],[data-typing],[data-a],[data-prev],[data-reply],[data-guia]):not(.in){opacity:0;transform:translateY(8px)}
.sx :is([data-q],[data-typing],[data-a],[data-prev],[data-reply],[data-guia]){transition:opacity .4s var(--sx-ease),transform .4s var(--sx-ease)}
.sx.is-armed .sx-sale:not(.is-new){opacity:0}
/* o site tem .dot global (bolinha 7px): o selo com ponto não pode herdar esse tamanho */
.sx .sx-badge.dot{width:auto;height:22px;border-radius:999px;display:inline-flex}
@container (max-width:620px){.sx-rows .r{flex-direction:column;align-items:flex-end;gap:6px}}
@container (max-width:660px){.sx-metrics[style*="--n:4"]{grid-template-columns:repeat(2,minmax(0,1fr))}}
.sx-ask em svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8}
.sx-wl .sx-wl-go{background:var(--wl);border-color:var(--wl)}
.sx-btn[hidden]{display:none}
@media (max-width:720px){
  .sx .sx-rows .r{flex-direction:row;justify-content:flex-start;align-items:center;gap:8px;flex-wrap:wrap}
  .sx-rows > li:has(> .sx-li) > .r{padding-left:40px}
  .sx-metrics[style*="--n:3"] > :nth-child(3):last-child{grid-column:1/-1}
  .sx-read > span:not(.sx-badge){flex:1 1 100%;order:-1}
}
.sx-file i{font-size:12px;width:34px}

/* ===================================================================
   Motions "mv": inspirados nas funções reais, em formatos variados
   (pilha, diagrama, celular, número, gráfico). Não são telas do sistema.
   =================================================================== */
.sx-live{display:none}
.sx-bar-top{justify-content:flex-end;margin-bottom:6px}
.mv-tt{min-width:0;display:flex;flex-direction:column}
.mv-tt b{font-family:var(--f-brand);font-weight:500;font-size:14px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mv-tt span{font-size:12.5px;color:var(--sx-ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mv-tt small{font-size:12px;color:var(--sx-ink3);text-transform:none}
.mv-lbl{font-size:13px;color:var(--sx-ink2)}
.mv-big b{font-family:var(--f-brand);font-weight:400;font-size:44px;line-height:1.1;letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.mv-big.sm b{font-size:34px}
.mv-sub{font-size:13px;color:var(--sx-ink3)}
.mv-sub b{color:var(--ink);font-weight:500}
.dark .mv-lbl,.dark .mv-sub,.dark .mv-meta{color:var(--paper-2)}
.dark .mv-sub b,.dark .mv-meta b{color:var(--paper)}
.sx-av{width:36px;height:36px;border-radius:50%;background:var(--ink);color:var(--paper);display:grid;place-items:center;font-size:12.5px;font-weight:600;flex:none}

/* 1 · pilha de tarefas */
.mv-fila{--h:64px;--g:10px}
.mv-fila-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px}
.mv-fila-h p{font-size:14px;color:var(--sx-ink2)}
.mv-fila-h p b{font-family:var(--f-brand);font-weight:500;font-size:22px;color:var(--ink);letter-spacing:-.02em;margin-right:4px;font-variant-numeric:tabular-nums}
.mv-fila-h > span{font-size:12.5px;color:var(--sx-ink3)}
.mv-stack{height:calc(var(--h) * 4 + var(--g) * 3);overflow:hidden;display:flex;flex-direction:column;gap:var(--g);padding:0 2px;margin:0 -2px}
.mv-task{flex:none;height:var(--h);display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:0 14px;background:#fff;border:1px solid var(--sx-line);border-radius:14px;transition:transform .5s var(--sx-ease),opacity .4s var(--sx-ease),box-shadow .25s,border-color .25s}
.mv-fila.is-up .mv-task{transform:translateY(calc(-1 * (var(--h) + var(--g))))}
.mv-task.is-hi{border-color:rgba(0,122,255,.45);box-shadow:0 0 0 3px rgba(0,122,255,.12)}
.mv-fila .mv-task.is-gone{opacity:0;transform:translateX(24px)}
.mv-task.is-ok .sx-ic{background:var(--sx-ok-b);color:var(--sx-ok-t)}
.sx.is-armed .mv-task[data-i="4"]:not(.in){opacity:0}

/* 2 · espalhado → ficha */
.mv-cap{position:relative;height:22px;margin-bottom:14px;font-size:14px;color:var(--sx-ink2)}
.mv-cap span{position:absolute;left:0;top:0;transition:opacity .35s var(--sx-ease),transform .35s var(--sx-ease)}
.mv-cap b{color:var(--ink);font-weight:500}
.mv-cap .b{opacity:0;transform:translateY(6px)}
.mv-gather.is-done .mv-cap .a{opacity:0;transform:translateY(-6px)}
.mv-gather.is-done .mv-cap .b{opacity:1;transform:none}
.mv-gl{position:relative;display:flex;flex-direction:column;gap:8px}
.mv-gl::before{content:"";position:absolute;left:30px;top:20px;bottom:20px;width:2px;background:var(--sx-blue);opacity:0;transition:opacity .4s}
.mv-gather.is-done .mv-gl::before{opacity:.25}
.mv-gl li{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:10px 14px;background:#fff;border:1px solid var(--sx-line);border-radius:14px;transform:translate(var(--x),var(--y)) rotate(var(--r)) scale(.9);box-shadow:0 10px 24px -16px rgba(10,20,60,.35);transition:transform .6s var(--sx-ease),box-shadow .4s}
.mv-gl li.in{transform:none;box-shadow:none}
.mv-gl time{font-size:12px;color:var(--sx-ink3);font-variant-numeric:tabular-nums}
.sx-ic.wa{background:rgba(52,199,89,.13);color:var(--sx-ok-t)}

/* 3 · ficha no centro, áreas em volta */
.mv-hub{position:relative;height:340px}
.mv-hub-l{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.mv-hub-l line{stroke:var(--sx-line2);stroke-width:1.2;vector-effect:non-scaling-stroke;opacity:0;transition:opacity .4s,stroke .3s}
.mv-hub.is-lines .mv-hub-l line{opacity:1}
.mv-hub-l line.on{stroke:var(--sx-blue)}
.mv-hub-c{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px;padding:16px 18px;background:#fff;border:1px solid var(--sx-line);border-radius:16px;box-shadow:0 20px 40px -28px rgba(10,20,60,.4);width:200px;z-index:1}
.sx.is-armed .mv-hub-c:not(.in){opacity:0;transform:translate(-50%,calc(-50% + 8px))}
.mv-hub-c .sx-av{margin-bottom:6px}
.mv-hub-c b{font-family:var(--f-brand);font-weight:500;font-size:15px}
.mv-hub-c span:last-child{font-size:12.5px;color:var(--sx-ink3)}
.mv-node{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 12px;border-radius:999px;background:#fff;border:1px solid var(--sx-line);font-size:13px;white-space:nowrap;transition:opacity .35s var(--sx-ease),transform .35s var(--sx-ease),border-color .25s,background .25s,color .25s;z-index:1}
.mv-node b{font-weight:600;font-size:12px;background:var(--sx-wash);border-radius:999px;padding:2px 7px}
.sx.is-armed .mv-node:not(.in){opacity:0;transform:translate(-50%,calc(-50% + 8px))}
.mv-node.on{background:var(--sx-blue);border-color:var(--sx-blue);color:#fff}
.mv-node.on b{background:rgba(255,255,255,.22)}
.mv-hub-d{display:flex;align-items:center;gap:10px;margin-top:14px;min-height:40px;padding:10px 14px;border-radius:12px;background:#fff;border:1px solid var(--sx-line);font-size:13px;color:var(--sx-ink2)}
.mv-hub-d i{width:8px;height:8px;border-radius:50%;background:var(--sx-blue);flex:none}
.mv-hub-d span{transition:opacity .2s}

/* 4 · mensagem com contexto */
.mv-conv{display:flex;flex-direction:column;gap:12px}
.mv-bub{max-width:78%;padding:10px 14px 8px;border-radius:18px;font-size:14px;line-height:1.45;background:#fff;border:1px solid var(--sx-line)}
.mv-bub.in{align-self:flex-start;border-bottom-left-radius:6px}
.mv-bub.out{align-self:flex-end;background:var(--sx-blue);border-color:var(--sx-blue);color:#fff;border-bottom-right-radius:6px}
.mv-bub small{display:block;font-size:12px;color:var(--sx-ink3);margin-top:3px}
.mv-bub.out small{color:rgba(255,255,255,.82);text-align:right}
.mv-who{display:block;font-size:12px;font-weight:500;color:var(--sx-ok-t);margin-bottom:2px}
.mv-ctx{margin-left:24px;padding:14px 16px;border-radius:16px;background:var(--paper);border:1px dashed rgba(29,29,31,.18);display:flex;flex-direction:column;gap:10px}
.mv-ctx > p{font-size:12.5px;color:var(--sx-ink3)}
.mv-tags{display:flex;flex-wrap:wrap;gap:6px}
.mv-tags .sx-badge{background:#fff}
.mv-tags .sx-badge.al{background:var(--sx-al-b)}.mv-tags .sx-badge.blue{background:var(--sx-blue-b)}
.mv-owner{display:flex;align-items:center;gap:10px;font-size:13px}
.mv-owner span{color:var(--sx-ink3)}
.mv-owner b{font-weight:500;flex:1;min-width:0}
.sx.is-armed .mv-bub.out:not(.in){opacity:0;transform:translateY(8px)}
.mv-bub.out{transition:opacity .4s var(--sx-ease),transform .4s var(--sx-ease)}

/* 5 · pergunta → três nomes */
.mv-ask{display:flex;flex-direction:column;gap:12px}
.mv-q{display:flex;align-items:center;gap:10px;height:52px;padding:0 8px 0 18px;border-radius:999px;background:#fff;box-shadow:0 0 0 1px var(--sx-line),0 20px 40px -28px rgba(0,0,0,.6)}
.mv-q .sx-ask-in{flex:1;min-width:0;font-size:14.5px;color:var(--sx-ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mv-q .sx-ask-in.typed{color:var(--ink)}
.mv-q em{width:38px;height:38px;border-radius:50%;background:var(--sx-blue);color:#fff;display:grid;place-items:center;flex:none}
.mv-q em svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8}
.mv-k{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--sx-ink2);padding-left:6px}
.dark .mv-k{color:var(--paper-2)}
.mv-k i{width:22px;height:22px;border-radius:50%;background:var(--sx-blue);color:#fff;display:grid;place-items:center;flex:none}
.mv-k i svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.8}
.mv-ans{display:flex;flex-direction:column;gap:8px}
.mv-ans li{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;column-gap:12px;align-items:center;padding:12px 16px;background:#fff;border-radius:14px}
.mv-ans b{font-family:var(--f-brand);font-weight:500;font-size:15px}
.mv-ans span:not(.sx-badge){grid-column:1;font-size:12.5px;color:var(--sx-ink3)}
.mv-ans .sx-badge{grid-column:2;grid-row:1 / span 2}
.mv-ok{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 10px 10px 16px;border-radius:14px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);color:var(--paper);font-size:13.5px}
.sx:not(.dark *) .mv-ok{background:var(--paper);border-color:var(--sx-line);color:var(--ink)}

/* 6 · diagrama Quando → Se → Então */
.mv-flow{display:flex;flex-direction:column}
.mv-step{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:12px 14px;background:#fff;border:1px solid var(--sx-line);border-radius:14px;transition:border-color .3s,box-shadow .3s,opacity .3s}
.mv-step .mv-tt small{font-weight:500;color:var(--sx-blue-t)}
.sx.is-armed .mv-step:not(.on):not(.ok){opacity:.55}
.mv-step.on{border-color:rgba(0,122,255,.5);box-shadow:0 0 0 3px rgba(0,122,255,.14)}
.mv-step.ok{box-shadow:none;border-color:var(--sx-line)}
.mv-step.ok .sx-ic{background:var(--sx-ok-b);color:var(--sx-ok-t)}
.mv-tick{width:24px;height:24px;border-radius:50%;background:var(--sx-ok);color:#fff;display:grid;place-items:center;opacity:0;transform:scale(.8);transition:opacity .25s,transform .25s var(--sx-ease)}
.mv-tick svg{width:13px;height:13px}
.mv-step.ok .mv-tick,.sx:not(.is-armed) .mv-tick{opacity:1;transform:none}
.mv-wire{position:relative;display:block;width:2px;height:28px;margin-left:29px;background:rgba(255,255,255,.18)}
.sx:not(.dark *) .mv-wire{background:var(--sx-line2)}
.mv-wire b{position:absolute;left:50%;top:0;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:var(--sx-blue);opacity:0}
.mv-wire.go b{animation:mvTravel .55s var(--sx-ease) forwards}
@keyframes mvTravel{0%{opacity:1;transform:translateY(-4px)}100%{opacity:1;transform:translateY(24px)}}
.mv-meta{margin-top:16px;font-size:13.5px;color:var(--sx-ink2)}
.mv-meta b{font-family:var(--f-brand);font-weight:500;font-size:18px;color:var(--ink);font-variant-numeric:tabular-nums}

/* celular (casca simples) */
.mv-phone{width:250px;flex:none;padding:8px;border-radius:38px;background:#1D1D1F;box-shadow:0 0 0 1px rgba(255,255,255,.08),0 40px 70px -40px rgba(10,20,60,.55)}
.mv-scr{position:relative;border-radius:30px;background:var(--paper);min-height:420px;padding:44px 16px 18px;display:flex;flex-direction:column;gap:10px;overflow:hidden}
.mv-scr::before{content:"";position:absolute;top:10px;left:50%;width:76px;height:22px;margin-left:-38px;border-radius:999px;background:#1D1D1F}
.mv-ph-k{font-size:12px;color:var(--sx-ink3)}
.mv-ph-t{font-family:var(--f-brand);font-size:18px;font-weight:500;letter-spacing:-.015em;margin-top:-6px}
.mv-ph-card{background:#fff;border:1px solid var(--sx-line);border-radius:16px;padding:14px;display:flex;flex-direction:column;gap:2px}
.mv-ph-card .s{font-size:12.5px;color:var(--sx-ink3)}
.mv-ph-card .v{font-family:var(--f-brand);font-size:24px;letter-spacing:-.02em}
.mv-ph-card .sx-btn{margin-top:10px;height:36px}
.mv-ph-ln{height:44px;border-radius:14px;background:rgba(29,29,31,.05)}
.mv-ph-ln.s{width:70%}

/* 7 · escritório → celular */
.mv-hand{display:grid;grid-template-columns:minmax(0,1fr) 120px auto;align-items:center;gap:0;max-width:880px}
.mv-side{font-size:12.5px;font-weight:500;color:var(--sx-ink2);margin:0 0 8px 2px}
.mv-guia{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:14px 16px;background:#fff;border:1px solid var(--sx-line);border-radius:16px;box-shadow:0 20px 40px -32px rgba(10,20,60,.4)}
.mv-path{position:relative;height:40px;margin:0 12px}
.mv-path i{position:absolute;left:0;right:0;top:50%;border-top:2px dashed var(--sx-line2)}
.mv-fly{position:absolute;left:0;top:50%;display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 10px;margin-top:-15px;border-radius:999px;background:var(--sx-blue);color:#fff;font-size:12.5px;font-weight:500;opacity:0;transform:translateX(0)}
.mv-fly svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.8}
.mv-fly.go{animation:mvFlyX .9s var(--sx-ease) forwards}
@keyframes mvFlyX{0%{opacity:0;transform:translateX(-10px)}15%{opacity:1}85%{opacity:1}100%{opacity:0;transform:translateX(calc(var(--d,60px)))}}

/* 8 · checklist do cliente */
.mv-check{background:#fff;border:1px solid var(--sx-line);border-radius:18px;padding:20px}
.mv-check-h{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.mv-left{font-family:var(--f-brand);font-weight:400;font-size:44px;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--sx-blue)}
.mv-check-h span{font-size:14px;color:var(--sx-ink2);line-height:1.4}
.mv-check ul{display:flex;flex-direction:column}
.mv-check li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--sx-line);transition:opacity .4s}
.mv-box{width:22px;height:22px;border-radius:7px;border:1.5px solid var(--sx-line2);display:grid;place-items:center;color:transparent;transition:background .25s,border-color .25s,color .25s}
.mv-box svg{width:13px;height:13px}
.mv-check li.is-done .mv-box{background:var(--sx-ok);border-color:var(--sx-ok);color:#fff}
.mv-check li.is-done .mv-tt b{color:var(--sx-ink3);text-decoration:line-through;text-decoration-color:rgba(29,29,31,.3)}
.mv-check li.is-hi .mv-box{border-color:var(--sx-blue)}

/* 9 · vendas */
.mv-sales{display:flex;flex-direction:column;gap:4px}
.mv-sales .mv-sub{margin-bottom:16px}
.mv-tks{display:flex;flex-direction:column;gap:8px}
.mv-tk{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:10px 14px;background:#fff;border:1px solid var(--sx-line);border-radius:14px;transition:opacity .4s var(--sx-ease),transform .4s var(--sx-ease)}
.sx.is-armed .mv-tk:not(.in){opacity:0;transform:translateY(12px)}
.mv-tk-r{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.mv-tk-r > b{font-family:var(--f-brand);font-weight:500;font-size:14px;font-variant-numeric:tabular-nums}

/* 10 · gráfico */
.mv-chart{background:#fff;border:1px solid var(--sx-line);border-radius:18px;padding:20px}
.mv-chart .sx-colbars{height:160px;margin-top:14px}
.mv-read{margin-top:14px}

/* 11 · marca própria no celular */
.mv-wlg{display:flex;align-items:center;gap:28px}
.mv-keys{display:flex;flex-direction:column;gap:8px;flex:1;min-width:0}
.mv-keys li{display:flex;align-items:center;gap:10px;height:42px;padding:0 14px;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:var(--paper-2);font-size:14px;transition:background .3s,border-color .3s,color .3s}
.mv-keys li em{width:20px;height:20px;border-radius:50%;border:1.5px solid rgba(255,255,255,.3);display:grid;place-items:center;color:transparent;transition:background .25s,border-color .25s,color .25s}
.mv-keys li em svg{width:11px;height:11px}
.mv-keys li.is-hi{border-color:rgba(0,122,255,.6);color:var(--paper)}
.mv-keys li.is-ok{color:var(--paper)}
.mv-keys li.is-ok em{background:var(--sx-ok);border-color:var(--sx-ok);color:#fff}
.sx:not(.dark *) .mv-keys li{background:#fff;border-color:var(--sx-line);color:var(--sx-ink2)}
.mv-url{align-self:center;font-size:12px;color:var(--sx-ink3);background:#fff;border:1px solid var(--sx-line);border-radius:999px;padding:4px 10px;max-width:100%;margin-top:-6px}
.mv-scr.sx-wl .sx-wl-logo{margin-top:12px}
.mv-scr.sx-wl .sx-wl-t{font-size:16px}
.mv-scr.sx-wl .sx-wl-in,.mv-scr.sx-wl .sx-wl-go{height:36px}
.mv-scr.sx-wl .sx-wl-from{margin-top:auto;font-size:12px}
.mv-scr.sx-wl .sx-wl-from b{display:block}

@media (max-width:720px){
  .mv-fila{--h:68px}
  .mv-task{gap:10px;padding:0 12px}
  .mv-task .sx-badge{display:none}
  .mv-gl li{grid-template-columns:auto minmax(0,1fr)}
  .mv-gl time{display:none}
  .mv-hub{height:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .mv-hub-l{display:none}
  .mv-hub-c{position:static;transform:none;grid-column:1/-1;width:auto;margin-bottom:6px}
  .sx.is-armed .mv-hub-c:not(.in){transform:translateY(8px)}
  .mv-node{position:static;transform:none;justify-content:space-between}
  .sx.is-armed .mv-node:not(.in){transform:translateY(8px)}
  .mv-bub{max-width:88%}
  .mv-ctx{margin-left:0}
  .mv-ans li{grid-template-columns:minmax(0,1fr)}
  .mv-ans .sx-badge{grid-column:1;grid-row:auto;justify-self:start;margin-top:6px}
  .mv-ok{flex-wrap:wrap}
  .mv-hand{grid-template-columns:minmax(0,1fr);justify-items:center}
  .mv-office{width:100%}
  .mv-path{width:40px;height:80px;margin:8px 0}
  .mv-path i{left:50%;right:auto;top:0;bottom:0;border-top:0;border-left:2px dashed var(--sx-line2)}
  .mv-fly{left:50%;top:0;margin:0 0 0 -32px}
  .mv-fly.go{animation-name:mvFlyY}
  .mv-check{padding:16px}
  .mv-check li{grid-template-columns:auto minmax(0,1fr)}
  .mv-check li .sx-btn{grid-column:2;justify-self:start}
  .mv-check li .mv-tt b,.mv-check li .mv-tt span{white-space:normal}
  .mv-big b{font-size:38px}
  .mv-tk .sx-badge{display:none}
  .mv-chart{padding:16px}
  .mv-wlg{flex-direction:column;align-items:stretch;gap:16px}
  .mv-keys{flex-direction:row;flex-wrap:wrap}
  .mv-keys li{height:38px;flex:1 1 calc(50% - 4px)}
  .mv-wlg .mv-phone{align-self:center}
}
@keyframes mvFlyY{0%{opacity:0;transform:translateY(-10px)}15%{opacity:1}85%{opacity:1}100%{opacity:0;transform:translateY(60px)}}

.dark .mv-ok .sx-btn.is-done{background:rgba(52,199,89,.18);color:#7BDD95}
.mv-scr.sx-wl .sx-wl-from b{overflow-wrap:anywhere}
/* guia dentro da coluna do motion: cartão do escritório em pé, caminho curto, celular */
.mv-hand{grid-template-columns:minmax(0,1fr) 64px auto;max-width:none}
.mv-path{margin:0 8px}
.mv-guia{grid-template-columns:auto minmax(0,1fr);row-gap:10px}
.mv-guia .mv-tt span{white-space:normal}
.mv-guia .mv-st{grid-column:1 / -1;justify-self:start}
.mv-fly{padding:0 8px}
@media (max-width:720px){.mv-hand{grid-template-columns:minmax(0,1fr)}.mv-path{margin:8px 0}}
.mv-guia .mv-tt{text-align:left;align-items:flex-start}
.mv-guia,.mv-guia *{text-align:left !important}

/* AGGU · camada MOBILE editorial (rodada de refinamento mobile, 2026-10).
   Carregada DEPOIS de tokens.css e components.css. Atua só em smartphone:
     ≤ 720px  composição editorial de telefone (tokens, tipografia, utilitários de ordem/densidade)
     ≤ 430px  faixa estreita (CTAs, ajustes finos)
   Regras: desktop e tablet (≥ 721px) NÃO mudam; o ADM (.adm) não é afetado (só usa tokens próprios).
   Ajustes de composição de cada página ficam no page.css da rota, também sob @media (max-width:720px). */

@media (max-width:720px){
  :root{
    /* espaço: menos scroll vazio, sem apertar */
    --space-section:72px;
    --space-inner:52px;
    --space-head:32px;
    --space-sub:30px;
    /* tipografia: H1 até ~4–5 linhas e H2 até ~3–4 linhas em 390px */
    --fs-display:clamp(2.1rem, 9.4vw, 2.7rem);
    --fs-h2:clamp(1.75rem, 7.2vw, 2.15rem);
    --fs-h3:clamp(1.22rem, 5.4vw, 1.5rem);
    --fs-lead:1.04rem;
  }
  :where(h1, h2, h3):not(.adm *){text-wrap:pretty}
  .lead:not(.adm *){line-height:1.5}

  /* ---- utilitários (poucos e documentados) ---- */
  .m-secondary{display:none !important}            /* complemento que só o desktop mostra (nunca qualificador de claim) */
  .m-hide-meta{display:none !important}            /* metadado terciário de mockup */
  .m-full{width:100% !important;max-width:none !important}
  .m-scroll{overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
  .m-compact-list{gap:8px !important}
  br.d-only{display:none}                          /* quebras pensadas para o desktop */

  /* replay e demo-tag: alvo de toque ≥ 44px sem ocupar linha inteira */
  .replay{height:44px;padding:0 16px;font-size:13px}

  /* formulário comercial: 16px evita zoom do iOS; diálogo cabe em 100dvh */
  .field input,.field select,.field textarea{font-size:16px}
  dialog.lead{width:calc(100% - 24px);max-height:calc(100dvh - 24px)}
  .lead-inner{max-height:calc(100dvh - 24px)}

  /* footer: menos vão entre grupos, Legal e Contato continuam visíveis */
  .f-grid,.f-grid--map{gap:32px 20px}
  .f-grid--map .f-stack{gap:32px}
  .f-col h2{margin-bottom:12px}
  .f-col ul{gap:12px}
  .f-col a{display:inline-block;padding:2px 0}
}

@media (max-width:430px){
  /* CTA de hero: primário claro; empilhar quando ganha toque */
  .hero .btn-row,.btn-row.m-stack{flex-direction:column;align-items:stretch}
  .hero .btn-row .btn,.btn-row.m-stack .btn{width:100%;justify-content:center}
}

/* ================= CELULAR CONFORTÁVEL (item 6) =================
   Cada seção respira, começa com um cabeçalho claro (etiqueta → título → texto) e só depois mostra a tela.
   Nada é só "compactado": o ritmo é do celular, não do desktop espremido. */
@media (max-width:720px){
  :root{--space-section:64px;--space-head:28px}
  main:where(:not(.a-content)) section:not(.x-band-s):not(.x-close){padding-block:clamp(56px,15vw,72px)}
  main:where(:not(.a-content)) section:not([class*="hero"]):not(.x-band-s){scroll-margin-top:0}


  /* hierarquia tipográfica clara */
  main section .eyebrow{font-size:12px;letter-spacing:.11em;color:var(--blue-text);font-weight:600;margin:0 0 4px}
  main section .x-pill{height:34px;font-size:13px}
  main section :is(h2.h2,.h2,h2.x-h2,h3.h2){font-size:clamp(1.7rem,7.4vw,2.05rem);line-height:1.12;letter-spacing:-.022em;margin:0}
  main section :is(h3.h3,.h3):not(.h2){font-size:1.2rem;line-height:1.25}
  main section :is(p.body,.body){font-size:16px;line-height:1.55;color:var(--ink-2)}
  main section .lead{font-size:17px;line-height:1.5;color:var(--ink-2)}
  main section .x-sub{font-size:16px;line-height:1.55}

  /* cabeçalho de seção: um bloco só, centralizado, com ar antes da tela */
  main section :is(.a-head,.auto-head,.auto2-head,.crm-head,.ct-head,.dp-head,.e-head,.ec-head,.erp-head,.fc-head,.fh-head,.in-head,.mc-head,.mp-head,.oc-head,.op-head,.op2-head,.sb-head,.dv-head,.x-fhead,.x-head,.x-split-copy,.x-people-copy,.stack-l){display:flex;flex-direction:column;align-items:flex-start;gap:14px;margin-bottom:28px;text-align:left}
  main section :is(.a-head,.auto-head,.auto2-head,.crm-head,.ct-head,.dp-head,.e-head,.ec-head,.erp-head,.fc-head,.fh-head,.in-head,.mc-head,.mp-head,.oc-head,.op-head,.op2-head,.sb-head,.dv-head,.x-fhead,.x-head,.x-split-copy,.x-people-copy) > *{margin:0}
  main section :is(.a-head,.auto-head,.auto2-head,.crm-head,.ct-head,.dp-head,.e-head,.ec-head,.erp-head,.fc-head,.fh-head,.in-head,.mc-head,.mp-head,.oc-head,.op-head,.op2-head,.sb-head,.dv-head,.x-fhead,.x-head,.x-split-copy,.x-people-copy) :is(.stack-m,[class$="-head-copy"],.x-fhead-copy,[class$="-head-col"]){display:flex;flex-direction:column;gap:12px;align-items:flex-start}
  main section :is(.a-head,.auto-head,.auto2-head,.crm-head,.ct-head,.dp-head,.e-head,.ec-head,.erp-head,.fc-head,.fh-head,.in-head,.mc-head,.mp-head,.oc-head,.op-head,.op2-head,.sb-head,.dv-head,.x-fhead,.x-head,.x-split-copy,.x-people-copy) .body{max-width:38ch}
  main section :is(.a-head,.auto-head,.auto2-head,.crm-head,.ct-head,.dp-head,.e-head,.ec-head,.erp-head,.fc-head,.fh-head,.in-head,.mc-head,.mp-head,.oc-head,.op-head,.op2-head,.sb-head,.dv-head,.x-fhead,.x-head,.x-split-copy,.x-people-copy) .link{margin-top:4px}
  main section :is(.a-head,.auto-head,.auto2-head,.crm-head,.ct-head,.dp-head,.e-head,.ec-head,.erp-head,.fc-head,.fh-head,.in-head,.mc-head,.mp-head,.oc-head,.op-head,.op2-head,.sb-head,.dv-head,.x-fhead,.x-head) .body + .body{margin-top:0}

  /* etiqueta de demonstração e "explore" sempre coladas na tela, não no texto */
  main section :is(.explore,.demo-tag){margin:0 0 12px;justify-content:flex-start;font-size:12.5px}
  main section .x-ill{margin-top:12px;text-align:left;font-size:12px}

  /* a tela (mock) ganha ar embaixo antes de qualquer texto que a segue */
  main section :is(.x-fvis,.x-split-vis,.m-vis,.ui.x-ui,.x-story,.x-bento,.x-duo,.x-flow,.x-flowh) + :is(p,.body,.x-note,ul,ol,div){margin-top:24px}

  /* frases de fecho que pareciam título: menores e em tom secundário */
  main section :is(.impact,.op-foot,.flow-foot,.bridge-caption,.e-turn-close,.fh-note,.pv-outside,.x-note){font-size:15px;line-height:1.5;color:var(--ink-2);text-align:left;max-width:36ch;margin:0}

  /* listas de pontos: alinhadas à esquerda, dentro de um bloco centralizado */
  main section :is(.x-pts,.x-check,.x-mini,.x-band-pts){width:100%;max-width:420px;margin:0}
  main section :is(.x-pts,.x-check) li{text-align:left;align-items:flex-start}

  /* botões do fechamento e do hero: coluna, largura total */
  main section .btn-row{width:100%;max-width:420px;margin:0}

  /* faixa azul: mais ar e texto maior */
  main .x-band{padding:28px 22px;gap:20px}
  main .x-band-t{font-size:1.45rem;line-height:1.2}
}
@media (max-width:720px){
  /* o cabeçalho das páginas de produto novas (Locus/Opus/Modus/Consultivo/API) já é um bloco; só o ar */
  main .x-hero{padding-block:40px 56px}
  main .x-hero-in{gap:36px}
  main .x-who{margin-top:36px}
}
@media (max-width:720px){
  /* dentro do cabeçalho: etiqueta, depois título, depois texto — sempre nessa ordem */
  main section :is(.a-head,.auto-head,.auto2-head,.crm-head,.ct-head,.dp-head,.e-head,.ec-head,.erp-head,.fc-head,.fh-head,.in-head,.mc-head,.mp-head,.oc-head,.op-head,.op2-head,.sb-head,.dv-head,.x-fhead,.x-head,.x-split-copy,.x-people-copy) > :is(.eyebrow,.x-pill,[class$="-part"],[class$="-num"]){order:-2}
  main section :is(.a-head,.auto-head,.auto2-head,.crm-head,.ct-head,.dp-head,.e-head,.ec-head,.erp-head,.fc-head,.fh-head,.in-head,.mc-head,.mp-head,.oc-head,.op-head,.op2-head,.sb-head,.dv-head,.x-fhead,.x-head,.x-split-copy,.x-people-copy) > :is(.stack-m,h2,.h2,h3.h2){order:-1}
}
@media (max-width:720px){
  /* páginas com narrativa "m-flow": título, textos, depois a tela, depois o link final */
  main section .m-flow .m-vis{order:5 !important;margin-top:24px}
  main section .m-flow .m-end{order:6 !important;margin-top:24px}
  main section .m-flow .m-after,main section .m-flow .m-after-group > *{order:3}
  main section .m-flow .stack-m,main section .m-flow .e-head-copy,main section .m-flow .a-head-copy{align-items:flex-start;text-align:left}
  main section .m-flow > .m-contents > .body,main section .m-flow .m-after{text-align:left;max-width:36ch;margin-inline:0}
}
@media (max-width:720px){
  main section :is(.fc-part,.pv-num,[class$="-part"]){text-align:left;align-items:flex-start;justify-content:flex-start;margin-inline:0}
}
@media (max-width:720px){
  main .x-bento{grid-auto-rows:auto;gap:12px}
  main .x-bento .x-card{min-height:0;padding:20px;gap:10px}
  main .x-bento .x-card > :last-child{margin-top:8px}
}

/* ================= TELAS DE EXEMPLO FEITAS PARA O CELULAR =================
   No celular a tela de exemplo é uma tela de celular: tipo maior, linhas com espaço de toque,
   abas que rolam de lado, nada de barra de navegador nem colunas espremidas. */
@media (max-width:720px){
  main .ui,main .x-ui{font-size:14px;line-height:1.4;border-radius:24px;box-shadow:0 0 0 1px var(--line),0 30px 60px -36px rgba(10,20,60,.45);overflow:hidden;width:100%;max-width:420px;margin-inline:0}
  main .ui-head{padding:16px 18px 14px;gap:10px;flex-wrap:wrap}
  main .ui-title{font-size:15px;font-weight:600;letter-spacing:-.01em}
  main .ui-meta{font-size:12px;color:var(--ink-3)}
  main .ui-row{padding:14px 18px;gap:4px 14px;align-items:center}
  main .ui-row .who{font-size:15px;font-weight:500;line-height:1.3}
  main .ui-row .what{font-size:13px;line-height:1.4;color:var(--ink-3);margin-top:2px}
  main .ui-row .meta{font-size:12px}
  main .ui .chip,main .x-ui .chip{height:26px;padding:0 10px;font-size:12px}
  /* abas e seletores: faixa que rola de lado, com alvo de toque */
  main .ui :is(.tabs,[role="tablist"],.seg),main .x-ui :is(.tabs,[role="tablist"],.seg),main section .seg{display:flex;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:6px;padding:4px 12px;scroll-snap-type:x proximity}
  main .ui :is(.tabs,[role="tablist"],.seg)::-webkit-scrollbar,main section .seg::-webkit-scrollbar{display:none}
  main .ui :is(.tab,[role="tab"]),main .x-ui :is(.tab,[role="tab"]),main section .seg button{flex:0 0 auto;min-height:40px;padding:0 14px;font-size:13.5px;border-radius:999px;white-space:nowrap;scroll-snap-align:start}
  /* colunas internas viram uma só */
  main .ui [class*="-grid"],main .ui [class*="-cols"],main .ui [class*="grid-"],main .x-ui [class*="-grid"],main .x-ui [class*="-cols"]{grid-template-columns:minmax(0,1fr) !important}
  main .ui [role="table"] [role="row"]{grid-template-columns:minmax(0,1fr) !important;gap:2px;padding:12px 18px}
  main .ui [role="row"] [role="columnheader"]{display:none}
  /* navegador vira app de celular: sem barra de janela, menu lateral vira faixa de ícones */
  main .x-browser .x-bar{display:none}
  main .x-browser{padding:0;border-radius:24px}
  main .x-app{grid-template-columns:minmax(0,1fr);padding:0;min-height:0;border-radius:24px}
  main .x-side{flex-direction:row;justify-content:flex-start;gap:6px;padding:12px 14px;border-radius:0;overflow-x:auto;scrollbar-width:none}
  main .x-side::-webkit-scrollbar{display:none}
  main .x-side img{width:22px;margin-right:6px}
  main .x-side ul{flex-direction:row;width:auto;gap:4px}
  main .x-side li{height:34px;padding:0 12px;font-size:12.5px;border-radius:999px;white-space:nowrap}
  main .x-main{padding:16px 16px 18px;gap:14px}
  main .x-hello{font-size:15px;font-weight:500}
  main .x-kpis{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  main .x-kpi b{font-size:1.15rem}
  main .x-kpi span{font-size:11.5px}
  /* números e totais ganham tamanho de celular */
  main .ui b[data-count],main .ui .x-big b{font-size:1.6rem}
  /* telas escuras seguem a mesma lógica */
  main .ui.ui-dark .ui-row .what{color:var(--paper-2)}
  /* elementos de demonstração nunca ultrapassam a tela nem rolam dentro */
  main .ui,main .x-ui,main .x-browser,main .x-hv{max-width:min(100%,440px)}
  main section [data-enter]{min-width:0}
}
/* tablet: duas colunas quando couber, tipo um pouco maior */
@media (min-width:721px) and (max-width:1099px){
  main .ui,main .x-ui{font-size:13.5px}
  main .ui-row{padding:14px 18px}
  main .ui-row .who{font-size:14.5px}
}
@media (max-width:720px){
  /* a tela de exemplo é desenhada "maior": tipo e alvos de toque no tamanho de um app de celular */
  main section :is(.ui,.x-ui,.x-browser,.x-hv,.x-story .x-stage,.x-solo):not(.ui .ui):not(.x-ui .ui){zoom:1.12}
  main section .ui .ui,main section .x-ui .ui{zoom:1}
  main section :is(.ui,.x-ui) :is(.what,.meta,small,.ui-meta,[class$="-k"],[class$="-d"]){font-size:max(12.5px,1em*.92)}
}

/* ================= alinhamento à esquerda + seletores arredondados + sem vazamento ================= */
@media (max-width:720px){
  main section :is(.h1,.h2,.h3,.lead,.body,.x-sub,.eyebrow,.x-h1,.x-h2,.x-band-t){text-align:left;margin-inline:0}
  main section :is(.x-hub-in,.x-close-in,.x-hero-copy,.ec-hero-in,.fh-hero-text,.co-hero-side,.sb-end,.dv-close,.pv-close,.oc-close,.crm-close,.fc-final .wrap,.x-people-copy,.p-hero-copy2,.pv-hero-copy){align-items:flex-start;text-align:left}
  main .x-band{text-align:left}
  main .x-band-pts li{justify-content:flex-start}
  main section .x-who{justify-content:flex-start}
  /* seletores (segmented): tudo redondo, contêiner e botões, e cabem na largura rolando de lado sem cortar */
  main .seg{border-radius:999px;padding:4px;gap:4px;max-width:100%;overflow-x:auto;scrollbar-width:none;display:flex;width:fit-content}
  main .seg::-webkit-scrollbar{display:none}
  main .seg button{border-radius:999px;height:36px;flex:0 0 auto;white-space:nowrap}
  main:where(:not(.a-content)) .tabs-h,main:where(:not(.a-content)) .tabs-v,main:where(:not(.a-content)) [role="tablist"]:not(.x-steps){border-radius:999px}
  main:where(:not(.a-content)) .tab,main:where(:not(.a-content)) [role="tab"]:not(.x-step){border-radius:999px}
  /* nada rola dentro da tela de exemplo: a tela cresce e o conteúdo quebra linha */
  main .ui,main .x-ui{overflow:visible;height:auto;max-height:none}
  main .ui-head{flex-wrap:wrap;row-gap:4px}
  main .ui-head .ui-meta{white-space:normal}
  main .ui-row{grid-template-columns:minmax(0,1fr) auto}
  main .ui-row .who,main .ui-row .what{overflow-wrap:anywhere}
  main .ui .chip{white-space:nowrap}
  /* botão voltar ao topo não cobre texto: espaço extra no fim de cada tela de exemplo */
  main .ui > :last-child,main .x-ui > :last-child{padding-bottom:max(14px,env(safe-area-inset-bottom))}
}
@media (max-width:720px){
  /* correções pontuais de vazamento encontradas na varredura */
  main .addr{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
  main .layer .ly-out{transform:none;transition:opacity .45s}
  main .e-c3-nav{overflow-x:auto;scrollbar-width:none;padding-bottom:4px}
  main .e-tr-items{width:100%;min-width:0}main .e-tr-items li{min-width:0;max-width:100%;grid-template-columns:minmax(0,1fr) auto}main .e-tr-items .v{overflow-wrap:anywhere}
  main .a-ctx-people{overflow-x:auto;scrollbar-width:none;padding-inline:0}
  main .oc-flow{overflow-x:auto;scrollbar-width:none;padding-bottom:6px}
  main .mc-chat-list{overflow-x:auto;scrollbar-width:none}
  main .pv-run-track.pv-run-ops{flex-wrap:wrap;gap:6px}
  main .pv-op{flex:1 1 calc(50% - 6px)}
}
@media (max-width:720px){
  main .mc-thread{min-width:0}main .mc-thread > span{min-width:0;overflow-wrap:anywhere}
  main .e-tr{width:100%;min-width:0;overflow:hidden}
  /* botão "voltar ao topo": menor e mais discreto no celular, para não cobrir as telas */
  .to-top{width:40px;height:40px;left:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));background:rgba(255,255,255,.55)}
  .to-top svg{width:17px;height:17px}
}

/* celular: nada centralizado (regras antigas de ≤640px centralizavam listas e blocos) */
@media (max-width:640px){
  .x-split-copy{align-items:flex-start !important;text-align:left !important}
  .x-split-copy .x-h2,.x-sub{margin-inline:0 !important}
  .x-head .x-sub{text-align:left !important}
  .x-pts li{justify-content:flex-start !important}
  .x-band-side{align-items:flex-start !important}
  .x-flow li{align-items:flex-start !important;text-align:left !important}
  .x-ring-top{justify-items:start !important}
}
/* celular estreito: etapas da OS (hero do Opus) sem palavras encostando */
@media (max-width:400px){.x-hv-steps{gap:8px}.x-hv-steps li{overflow-wrap:anywhere;hyphens:auto;letter-spacing:-.01em;line-height:1.3}}

/* AGGU · chat público (bolinha + painel) e complementos do formulário comercial.
   Paleta e tipografia do site: #F5F5F7 · #1D1D1F · #AAAAAA · #007AFF; Sora (marca/títulos), Inter (mensagens/UI).
   Sem gradiente, sem "orb", sem robô: é um canal de conversa da AGGU. */

/* ---------- formulário comercial: honeypot e erro geral ---------- */
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.lead-form-err{font-size:13px;color:var(--alert-text);line-height:1.45}
.lead-form-err:empty{display:none}

/* ---------- bolinha ---------- */
.agc-fab{position:fixed;right:max(16px, env(safe-area-inset-right, 0px) + 12px);bottom:calc(16px + env(safe-area-inset-bottom, 0px));z-index:60;
  width:52px;height:52px;border-radius:50%;border:0;cursor:pointer;display:grid;place-items:center;background:var(--ink);color:var(--paper);
  box-shadow:0 0 0 1px rgba(245,245,247,.22), 0 1px 2px rgba(29,29,31,.12), 0 14px 30px -12px rgba(29,29,31,.45);transition:transform .2s var(--ease), background .2s}
.agc-fab svg{width:22px;height:22px}
.agc-fab:hover{background:#000;transform:translateY(-1px)}
.agc-fab:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.agc-fab[aria-expanded="true"]{opacity:0;pointer-events:none}
.agc-fab-dot{position:absolute;top:6px;right:6px;width:10px;height:10px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 2px var(--ink)}
.agc-fab-dot[hidden]{display:none}
body[data-route^="/admin"] .agc-fab,body:has(.mobile-menu:not([hidden])) .agc-fab{display:none}
@media (min-width:1024px){.agc-fab{right:24px;bottom:24px}}

/* ---------- painel ---------- */
dialog.agc{position:fixed;inset:auto 24px 24px auto;margin:0;padding:0;border:0;background:transparent;color:var(--ink);
  width:min(400px, calc(100vw - 32px));height:min(640px, calc(100dvh - 48px));max-width:none;max-height:none;overflow:visible}
dialog.agc::backdrop{background:rgba(29,29,31,.18)}
.agc-in{height:100%;display:flex;flex-direction:column;background:var(--white);border-radius:22px;overflow:hidden;overscroll-behavior:contain;
  box-shadow:0 1px 2px rgba(29,29,31,.06), 0 40px 90px -30px rgba(29,29,31,.45)}
.agc-h{flex:none;display:flex;align-items:center;gap:12px;padding:16px 16px 14px 18px;border-bottom:1px solid var(--line)}
.agc-mark{flex:none;width:36px;height:36px;border-radius:50%;background:var(--ink);color:var(--paper);display:grid;place-items:center;font:600 15px/1 var(--f-brand)}
.agc-mark.has-logo{background:var(--paper)}
.agc-mark img{width:20px;height:auto;display:block}
.agc-h-t{flex:1;min-width:0}
.agc-h h2{font:500 1.05rem/1.2 var(--f-brand);letter-spacing:-.01em}
.agc-status{display:flex;align-items:center;gap:6px;margin-top:2px;font:400 12.5px/1.35 var(--f-ui);color:var(--ink-2)}
.agc-dot{flex:none;width:7px;height:7px;border-radius:50%;background:var(--neutral)}
.agc-dot.is-on{background:var(--ok)}
.agc-dot.is-off{background:var(--alert)}
.agc-b{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch;padding:18px 16px 8px;background:var(--paper)}
.agc-log{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;font:400 14.5px/1.45 var(--f-ui)}
.agc-m{display:flex;flex-direction:column;align-items:flex-start;max-width:88%}
.agc-who{font-size:11.5px;color:var(--ink-3);margin:0 0 3px 4px}
.agc-bub{padding:10px 13px;border-radius:16px;background:var(--white);box-shadow:0 1px 1px rgba(29,29,31,.04);white-space:pre-wrap;overflow-wrap:anywhere}
.agc-m.is-agg .agc-bub{border-top-left-radius:6px}
.agc-m.is-team .agc-bub{border:1px solid var(--blue-wash);border-top-left-radius:6px}
.agc-m.is-me{align-self:flex-end;align-items:flex-end}
.agc-m.is-me .agc-bub{background:var(--ink);color:var(--paper);border-top-right-radius:6px}
.agc-m.is-pending .agc-bub{opacity:.6}
.agc-m.is-failed .agc-bub{background:var(--alert-text)}
.agc-fail{margin-top:5px;font-size:12px;color:var(--alert-text)}
.agc-retry{font:inherit;font-weight:500;color:var(--ink);background:none;border:0;padding:4px 2px;text-decoration:underline;text-underline-offset:2px;cursor:pointer;min-height:32px}
.agc-m.is-system{align-self:center;max-width:100%;font-size:12px;color:var(--ink-2);text-align:center}
.agc-m.is-system span{display:inline-block;padding:4px 10px;border-radius:999px;background:var(--wash)}
/* "digitando…" da AGGU antes de cada fala do fluxo guiado */
.agc-m.is-typing .agc-bub{padding:13px 14px;border-top-left-radius:6px}
.agc-dots{display:inline-flex;align-items:center;gap:4px;height:10px}
.agc-dots i{width:6px;height:6px;border-radius:50%;background:var(--neutral);animation:agc-dot 1.1s infinite ease-in-out}
.agc-dots i:nth-child(2){animation-delay:.15s}.agc-dots i:nth-child(3){animation-delay:.3s}
@keyframes agc-dot{0%,60%,100%{transform:translateY(0);opacity:.45}30%{transform:translateY(-3px);opacity:1}}
@media (prefers-reduced-motion:reduce){.agc-dots i{animation:none;opacity:.7}}
.agc-quiet{opacity:.7;font-style:italic}
.agc-link{color:var(--blue-text);font-weight:500}

/* rodapé */
.agc-f{flex:none;padding:12px 14px calc(12px + env(safe-area-inset-bottom, 0px));background:var(--white);border-top:1px solid var(--line)}
.agc-opts{display:flex;flex-wrap:wrap;gap:8px;max-height:min(46vh, 300px);overflow-y:auto;overscroll-behavior:contain}
.agc-opt{display:inline-flex;align-items:center;min-height:44px;padding:9px 14px;border-radius:999px;border:1px solid var(--line-2);background:var(--white);color:var(--ink);
  font:500 13.5px/1.25 var(--f-ui);text-align:left;cursor:pointer;text-decoration:none;transition:border-color .2s, background .2s}
.agc-opt:hover{border-color:var(--ink-3);background:var(--paper)}
.agc-opt.is-primary{background:var(--blue);border-color:var(--blue);color:#fff}
.agc-opt:focus-visible,.agc-send:focus-visible,.agc-skip:focus-visible,.agc-retry:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.agc-form{display:flex;align-items:flex-end;gap:8px}
.agc-form input,.agc-form textarea{flex:1;min-width:0;font:400 16px/1.4 var(--f-ui);color:var(--ink);background:var(--paper);border:1px solid transparent;border-radius:14px;
  min-height:46px;padding:11px 14px;resize:none;max-height:132px}
.agc-form input:focus,.agc-form textarea:focus{outline:none;border-color:var(--blue);background:var(--white)}
.agc-send{flex:none;width:46px;height:46px;border-radius:50%;border:0;background:var(--blue);color:#fff;display:grid;place-items:center;cursor:pointer}
.agc-send svg{width:18px;height:18px}
.agc-f-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.agc-f-row:has(.agc-err:empty):not(:has(.agc-skip)){display:none}
.agc-err{font:400 12.5px/1.4 var(--f-ui);color:var(--alert-text);padding-top:6px}
.agc-skip{margin-left:auto;font:500 12.5px/1 var(--f-ui);color:var(--ink-2);background:none;border:0;padding:12px 4px 4px;min-height:36px;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.agc-wait{font:400 13px/1.4 var(--f-ui);color:var(--ink-2);padding:6px 2px}
.agc-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- celular: painel quase tela cheia, acompanha o teclado ---------- */
@media (max-width:720px){
  dialog.agc{inset:auto 0 auto 0;top:calc(var(--chat-vt, 0px) + env(safe-area-inset-top, 0px) + 8px);width:100%;
    height:calc(var(--chat-vh, 100dvh) - env(safe-area-inset-top, 0px) - 8px);max-height:calc(100dvh - env(safe-area-inset-top, 0px) - 8px)}
  dialog.agc::backdrop{background:rgba(29,29,31,.4)}
  .agc-in{border-radius:20px 20px 0 0}
  .agc-m{max-width:92%}
  .agc-opts{max-height:min(58dvh, 420px)}
}
@media (prefers-reduced-motion:reduce){.agc-fab,.agc-opt{transition:none}.agc-fab:hover{transform:none}}
.agc-log:focus{outline:none} /* foco programático no histórico (toque), não é controle interativo */

/* Aplicativo (Android e iPhone): selos das lojas e celulares. Classes novas, não alteram nada existente. */
.app-badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.app-badges > img{height:44px;width:auto;display:block}
.app-badge{display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 16px 0 12px;border-radius:10px;background:#000;color:#fff;font-family:var(--f-ui);line-height:1.05;text-decoration:none}
.app-badge svg{width:22px;height:22px;flex:none}
.app-badge span{display:flex;flex-direction:column}
.app-badge small{font-size:10.5px;letter-spacing:.01em;opacity:.85}
.app-badge b{font-size:16px;font-weight:600;letter-spacing:-.01em}
.dark .app-badge{background:#fff;color:#000}
.app-badges-note{margin-top:10px !important;font-family:var(--f-ui);font-size:12.5px;color:var(--ink-3)}
.dark .app-badges-note{color:rgba(245,245,247,.68)}
.r2-copy .app-badges{margin-top:28px !important}
.r2-copy .app-badges + .r2-note{margin-top:14px !important}

/* ---------- celular (seções de aplicativo) ----------
   Moldura clara de titânio, tela com barra de status própria (hora à esquerda, ilha no centro, sinal e bateria à direita):
   nada fica por cima da hora. Cores do Manual da Marca: #F5F5F7, #1D1D1F, #AAAAAA, #007AFF. */
.apx-phone{position:relative;width:260px;flex:none;padding:9px;border-radius:46px;background:linear-gradient(145deg,#F4F4F6,#D9D9DE 55%,#EDEDF0);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.9),0 0 0 1px rgba(29,29,31,.08),0 40px 70px -38px rgba(0,60,140,.35),0 12px 24px -16px rgba(29,29,31,.2)}
.apx-phone::before{content:"";position:absolute;inset:4px;border-radius:42px;box-shadow:inset 0 0 0 3px #1D1D1F;pointer-events:none}
.apx-screen{position:relative;border-radius:37px;overflow:hidden;background:#F5F5F7;min-height:500px;display:flex;flex-direction:column;gap:10px;padding:0 16px 18px}
.apx-status{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:44px;margin:0 -4px 2px;font-family:var(--f-ui);font-size:12px;font-weight:600;color:#1D1D1F}
.apx-clock{padding-left:10px}
.apx-island{width:84px;height:24px;border-radius:999px;background:#1D1D1F}
.apx-sys{display:flex;justify-content:flex-end;align-items:center;gap:5px;padding-right:8px}
.apx-sig{width:16px;height:10px;background:linear-gradient(90deg,currentColor 0 3px,transparent 3px 4.3px,currentColor 4.3px 7.3px,transparent 7.3px 8.6px,currentColor 8.6px 11.6px,transparent 11.6px 12.9px,currentColor 12.9px 16px);
  -webkit-mask:linear-gradient(to top right,#000 50%,transparent 50%);mask:linear-gradient(to top right,#000 50%,transparent 50%)}
.apx-bat{position:relative;width:22px;height:11px;border-radius:3.5px;box-shadow:inset 0 0 0 1.2px rgba(29,29,31,.45)}
.apx-bat::before{content:"";position:absolute;inset:2px 6px 2px 2px;border-radius:1.5px;background:currentColor}
.apx-bat::after{content:"";position:absolute;right:-3px;top:3.5px;width:2px;height:4px;border-radius:0 1px 1px 0;background:rgba(29,29,31,.45)}

/* Minha Contabilidade: tela inicial do app */
.apx{display:flex;justify-content:center}
.apx-scr{padding-bottom:70px}
.apx-scr .mv-ph-k{margin-top:4px}
.apx-push{position:absolute;left:10px;right:10px;top:50px;z-index:2;display:flex;gap:10px;align-items:center;padding:10px 12px;border-radius:18px;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);box-shadow:0 14px 30px -14px rgba(0,60,140,.35),0 0 0 1px rgba(29,29,31,.06);font-family:var(--f-ui);transition:transform .5s var(--ease),opacity .5s var(--ease)}
.apx-push div{display:flex;flex-direction:column;min-width:0}
.apx-push b{font-size:12px;font-weight:600}
.apx-push span{font-size:12px;color:var(--sx-ink2)}
.apx-push.is-gone{opacity:0;transform:translateY(-16px)}
.apx-ico{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:9px;background:#007AFF}
.apx-ico img{width:58%;height:auto;display:block}
.apx-gt{font-family:var(--f-ui);font-size:15px;font-weight:600;letter-spacing:-.01em}
.apx-doc .sx-btn{gap:6px}
.apx-doc .sx-btn svg{width:15px;height:15px}
.apx-tabs{position:absolute;left:0;right:0;bottom:0;display:grid;grid-template-columns:repeat(4,1fr);padding:9px 6px 16px;background:rgba(255,255,255,.96);border-top:1px solid rgba(29,29,31,.08);font-family:var(--f-ui);font-size:10px;color:#8A8A90}
.apx-tabs span{display:flex;flex-direction:column;align-items:center;gap:3px}
.apx-tabs svg{width:17px;height:17px}
.apx-tabs .on{color:#007AFF}

/* Marca Própria: app AGGU × app da marca do escritório (telas iniciais claras) */
.apx-two{display:flex;justify-content:center;align-items:flex-start;gap:28px}
.apx-col{margin:0;display:flex;flex-direction:column;align-items:center;gap:14px;transition:opacity .6s var(--ease),transform .6s var(--ease)}
.apx-cap{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 12px;border-radius:999px;background:#fff;box-shadow:0 0 0 1px rgba(29,29,31,.08);font-family:var(--f-ui);font-size:12.5px;font-weight:600;color:var(--ink)}
.apx-cap i{width:8px;height:8px;border-radius:50%}
.apx-sm{width:214px;border-radius:40px;padding:8px}
.apx-sm::before{border-radius:36px}
.apx-home{min-height:420px;border-radius:32px;padding:0 14px 16px;background:radial-gradient(120% 70% at 20% 0%,color-mix(in srgb,var(--apx) 22%,#fff) 0%,transparent 70%),linear-gradient(180deg,#F5F5F7,color-mix(in srgb,var(--apx) 10%,#F5F5F7))}
.apx-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px 10px;margin-top:10px}
.apx-app{display:flex;flex-direction:column;align-items:center;gap:5px;min-width:0}
.apx-ghost{width:100%;aspect-ratio:1;border-radius:12px;background:rgba(255,255,255,.75);box-shadow:0 0 0 1px rgba(29,29,31,.05)}
.apx-main i,.apx-splash i{display:grid;place-items:center;width:100%;aspect-ratio:1;border-radius:12px;background:var(--apx);color:#fff;font-style:normal;font-family:var(--f-brand);font-size:13px;font-weight:600;box-shadow:0 8px 16px -8px color-mix(in srgb,var(--apx) 70%,transparent)}
.apx-main b{font-family:var(--f-ui);font-size:9px;font-weight:500;color:var(--ink);white-space:nowrap;max-width:64px;overflow:hidden;text-overflow:ellipsis}
.apx-main i img,.apx-splash i img{width:58%;height:auto;display:block}
.apx-dock{position:absolute;left:10px;right:10px;bottom:10px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;padding:9px;border-radius:22px;background:rgba(255,255,255,.6);box-shadow:0 0 0 1px rgba(255,255,255,.8)}
.apx-dock .apx-ghost{background:rgba(255,255,255,.9)}
.apx-home{padding-bottom:84px}
.apx-splash{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:var(--apx);color:#fff;opacity:0;transition:opacity .5s var(--ease)}
.apx-splash i{width:68px;background:rgba(255,255,255,.16);box-shadow:none;font-size:20px}
.apx-splash b{font-family:var(--f-brand);font-size:15px;font-weight:500}
.apx-home.is-open .apx-splash{opacity:1}
.sx.is-armed .apx-col[data-ph="b"]{opacity:0;transform:translateY(14px)}
.sx.is-armed .apx-col[data-ph="b"].in,.apx-col.in{opacity:1;transform:none}
@media (max-width:720px){
  .apx-phone{width:min(260px,74vw)}
  .apx-two{gap:12px}
  .apx-sm{width:min(44vw,186px);padding:6px;border-radius:34px}
  .apx-sm::before{inset:3px;border-radius:31px}
  .apx-home{min-height:350px;border-radius:28px;padding:0 9px 12px 9px;padding-bottom:70px}
  .apx-status{height:36px;font-size:10.5px}
  .apx-island{width:56px;height:18px}
  .apx-sm .apx-clock{padding-left:6px}
  .apx-sm .apx-sys{padding-right:4px;gap:3px}
  .apx-sm .apx-sig{width:12px;height:8px}
  .apx-sm .apx-bat{width:17px;height:9px}
  .apx-grid{gap:9px 7px}
  .apx-dock{gap:7px;padding:7px;border-radius:18px;left:7px;right:7px;bottom:7px}
}
.apx-sm .apx-island{width:62px;height:20px}
.apx-sm .apx-status{font-size:11px}
@media (max-width:720px){.apx-sm .apx-island{width:46px;height:16px}}
.app-badges .app-badge .app-badge-ic{width:26px;height:26px;max-width:none;flex:none;display:block;object-fit:contain}
.app-badges .app-badge{gap:10px;padding:0 16px 0 12px;white-space:nowrap}
@media (max-width:380px){.apx-sm .apx-island{width:36px;height:14px}.apx-sm .apx-status{font-size:10px}.apx-sm .apx-sig{width:10px;height:7px}.apx-sm .apx-bat{width:15px;height:8px}}
.apx-cap{white-space:nowrap}
@media (max-width:380px){.apx-cap{font-size:10.5px;padding:0 9px;gap:6px;height:26px}.apx-cap i{width:6px;height:6px}}
.apx-two{width:100%}
.apx-col{flex:0 1 214px;min-width:0}
.apx-col .apx-sm{width:100%;max-width:214px}
@media (max-width:720px){.apx-two{gap:10px}.apx-col{flex:1 1 0}.apx-col .apx-sm{max-width:186px}}

/* Vitrine de conteúdos (src/lib/reel.js). --f vai de 0 (recolhido) a 1 (aberto, no centro). Classes novas. */
.rl{--rl-r:20px;position:relative}
.rl-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.rl-item{--f:1;position:relative;z-index:calc(1 + var(--f) * 10)}
.rl-item + .rl-item{margin-top:-54px}
.rl-card{position:relative;display:block;height:300px;border-radius:var(--rl-r);overflow:hidden;color:#fff;text-decoration:none;background:#16161A;
  clip-path:inset(calc((1 - var(--f)) * 23%) calc((1 - var(--f)) * 5%) round var(--rl-r));
  -webkit-tap-highlight-color:transparent;outline-offset:4px}
.rl-card:focus-visible{outline:2px solid var(--blue)}
.rl-bg{position:absolute;inset:0;opacity:calc(.32 + var(--f) * .68);transform:scale(calc(1.08 - var(--f) * .08))}
.rl-img{width:100%;height:100%;object-fit:cover;display:block}
.rl-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,14,.05) 20%,rgba(10,10,14,.72) 100%),rgba(10,10,14,calc(.62 - var(--f) * .62))}
.rl-txt{position:absolute;left:0;right:0;bottom:0;top:0;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:6px;padding:0 26px;
  transform:translateY(calc(var(--f) * 52px))}
.rl-cat{font-family:var(--f-ui);font-size:11.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,calc(.5 + var(--f) * .4))}
.rl-t{font-family:var(--f-brand);font-size:clamp(1.15rem,1rem + .6vw,1.45rem);line-height:1.22;letter-spacing:-.018em;color:rgba(255,255,255,calc(.55 + var(--f) * .45));max-width:30ch;
  transform:scale(calc(.9 + var(--f) * .12));display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rl-d{font-family:var(--f-ui);font-size:14px;line-height:1.45;color:rgba(255,255,255,.86);max-width:44ch;opacity:max(0, calc(var(--f) * 2.2 - 1.2));display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rl-meta{font-family:var(--f-ui);font-size:12px;color:rgba(255,255,255,.72);opacity:max(0, calc(var(--f) * 2.2 - 1.2))}
/* capa gráfica da marca (artigo sem foto) */
.rl-art{position:absolute;inset:0;display:block;background:var(--rl-a1,#007AFF)}
.rl-art[data-tone="blue"]{--rl-a1:#0A63D8;--rl-a2:#3D9BFF}
.rl-art[data-tone="ink"]{--rl-a1:#1D1D1F;--rl-a2:#4A4A52}
.rl-art[data-tone="green"]{--rl-a1:#167A3E;--rl-a2:#34C759}
.rl-art[data-tone="teal"]{--rl-a1:#0E6B68;--rl-a2:#2BA8A2}
.rl-art[data-tone="violet"]{--rl-a1:#3B2F8F;--rl-a2:#6E5CE6}
.rl-art{background:radial-gradient(120% 90% at 85% 10%,var(--rl-a2) 0%,transparent 60%),linear-gradient(160deg,var(--rl-a1),#0B0B10 130%)}
.rl-art-g{position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.16) 1px,transparent 1.4px);background-size:18px 18px;mask-image:linear-gradient(200deg,#000 10%,transparent 70%);-webkit-mask-image:linear-gradient(200deg,#000 10%,transparent 70%)}
.rl-art-ic{position:absolute;right:-18px;top:-10px;width:190px;height:190px;color:rgba(255,255,255,.16);stroke-width:1.2}
/* navegação (computador) */
.rl-nav{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:18px}
.rl-btn{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--line-2);background:var(--white);color:var(--ink);cursor:pointer}
.rl-btn:hover{border-color:var(--ink)}
.rl-btn svg{width:18px;height:18px}
.rl-btn[data-rl="prev"] svg{transform:rotate(90deg)}
.rl-btn[data-rl="next"] svg{transform:rotate(-90deg)}
.rl-pos{min-width:56px;text-align:center;font-family:var(--f-ui);font-size:13px;color:var(--ink-2);font-variant-numeric:tabular-nums}
/* computador: faixa horizontal com encaixe */
.rl.is-h .rl-list{flex-direction:row;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:6px calc(50% - 210px) 10px;overscroll-behavior-x:contain}
.rl.is-h .rl-list::-webkit-scrollbar{display:none}
.rl.is-h .rl-item{flex:0 0 420px;scroll-snap-align:center}
.rl.is-h .rl-item + .rl-item{margin-top:0;margin-left:-52px}
.rl.is-h .rl-card{height:440px;clip-path:inset(calc((1 - var(--f)) * 9%) calc((1 - var(--f)) * 14%) round var(--rl-r))}
.rl.is-h .rl-txt{justify-content:flex-end;padding:0 32px 34px;transform:none}
.rl.is-h .rl-t{font-size:clamp(1.3rem,1rem + .7vw,1.7rem)}
.rl.is-h .rl-item:not(.is-focus) .rl-card{cursor:pointer}
/* movimento reduzido: tudo aberto e parado */
.rl.is-still .rl-item{--f:1 !important}
.rl.is-still .rl-item + .rl-item{margin-top:14px}
.rl.is-still.is-h .rl-item + .rl-item{margin-left:16px}