/* ==========================================================================
   Playnee · apresentação comercial do ecossistema
   Base clara azulada (como o hub), azul da marca e o degradê de cada módulo.
   Tudo escala por --u (1% da largura de um palco 16:9 que cabe na tela).
   ========================================================================== */

:root {
  --brand: #0747d6;
  --brand-2: #4f46e5;
  --ink: #0f172a;
  --ink-2: #334155;
  --muted: #64748b;
  --line: #e2e8f0;
  --paper: #ffffff;
  --paper-2: #f8fafc;
  --glass: rgba(255, 255, 255, .72);
  --dor: #e11d48;

  /* cor do módulo atual (padrão: marca) */
  --m: var(--brand);
  --m-ink: var(--brand);

  --u: min(1vw, 1.7778vh);
  --pad-x: calc(var(--u) * 7);
  --pad-top: calc(var(--u) * 8);
  --pad-bottom: calc(var(--u) * 7.5);
  --radius: calc(var(--u) * 1.4);

  --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --ease: cubic-bezier(.22, .8, .24, 1);
  --sombra: 0 calc(var(--u) * 1.6) calc(var(--u) * 4) rgba(15, 23, 42, .1);
}

/* cores oficiais dos módulos (cor do card / cor para texto) */
.m-crm { --m: #0000ef; --m-ink: #0000ef; }
.m-conv { --m: #0ea5e9; --m-ink: #0284c7; }
.m-bi { --m: #6ee7b7; --m-ink: #059669; }
.m-flow { --m: #7c3aed; --m-ink: #6d28d9; }
.m-fid { --m: #ec4899; --m-ink: #db2777; }
.m-studio { --m: #35c22b; --m-ink: #2a9c21; }
.m-ia { --m: #4f46e5; --m-ink: #4338ca; }

*,
*::before,
*::after { box-sizing: border-box; }

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; }
button { font: inherit; }
em { font-style: normal; }
ol, ul { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }

.ic {
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}

/* fundo em mesh azul, como o hub */
.bg {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(60vw 45vw at 8% -10%, hsl(214 100% 91%), transparent 62%),
    radial-gradient(50vw 40vw at 100% 0%, hsl(238 92% 94%), transparent 58%),
    radial-gradient(50vw 40vw at 60% 110%, hsl(206 100% 95%), transparent 60%),
    linear-gradient(180deg, #f3f7ff, #ffffff 65%);
}

/* ------------------------------------------------------------ tipografia -- */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * .7);
  font-size: calc(var(--u) * .9);
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--brand);
}

.eyebrow--mod { color: var(--m-ink); }

.eyebrow--mod::before {
  content: '';
  width: calc(var(--u) * .7);
  height: calc(var(--u) * .7);
  border-radius: calc(var(--u) * .2);
  background: var(--m);
}

.display {
  margin: 0;
  font-family: var(--font-display);
  font-size: calc(var(--u) * 5.6);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -.035em;
}

.display em,
.grad {
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.title {
  margin: 0;
  font-family: var(--font-display);
  font-size: calc(var(--u) * 3.6);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.03em;
}

.title em { color: var(--m-ink); }

.lead {
  margin: 0;
  max-width: 46ch;
  font-size: calc(var(--u) * 1.55);
  line-height: 1.55;
  color: var(--ink-2);
}

.body {
  margin: 0;
  max-width: 48ch;
  font-size: calc(var(--u) * 1.2);
  line-height: 1.6;
  color: var(--muted);
}

/* ---------------------------------------------------------------- chrome -- */

.topbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: calc(var(--u) * 6.4);
  padding: 0 var(--pad-x);
  pointer-events: none;
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}

.topbar__brand,
.topbar__section {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * .9);
  padding: calc(var(--u) * .55) calc(var(--u) * 1.2);
  border: 1px solid rgba(255, 255, 255, .8);
  border-radius: 99px;
  background: var(--glass);
  box-shadow: 0 2px 10px rgba(15, 23, 42, .06);
  backdrop-filter: blur(10px);
}

.topbar__brand { color: inherit; text-decoration: none; pointer-events: auto; }
.topbar__brand img { height: calc(var(--u) * 1.5); width: auto; }

.topbar__brand span,
.topbar__section {
  font-size: calc(var(--u) * .78);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}

.topbar__section:empty { visibility: hidden; }

body[data-chrome="off"] .topbar { opacity: 0; transform: translateY(-30%); }

.navbar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--u) * 2);
  height: calc(var(--u) * 6);
  padding: 0 var(--pad-x);
  pointer-events: none;
}

.navbar > * { pointer-events: auto; }

.counter {
  display: flex;
  align-items: baseline;
  gap: calc(var(--u) * .5);
  min-width: calc(var(--u) * 14);
  font-family: var(--font-display);
  font-size: calc(var(--u) * .95);
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

.counter em { font-size: calc(var(--u) * 1.6); font-weight: 700; color: var(--ink); }
.counter i { font-style: normal; color: var(--line); }

.dots { display: flex; gap: calc(var(--u) * .45); }

.dots button {
  display: block;
  width: calc(var(--u) * .55);
  height: calc(var(--u) * .55);
  padding: 0;
  border: 0;
  border-radius: 99px;
  background: #cbd5e1;
  cursor: pointer;
  transition: width .4s var(--ease), background .3s;
}

.dots button[aria-current="true"] { width: calc(var(--u) * 2.2); background: var(--brand); }

.navbar__actions { display: flex; align-items: center; gap: calc(var(--u) * .5); min-width: calc(var(--u) * 14); justify-content: flex-end; }

.icon-btn {
  display: grid;
  place-items: center;
  width: calc(var(--u) * 2.9);
  height: calc(var(--u) * 2.9);
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  transition: background .25s, color .25s, border-color .25s;
}

.icon-btn svg { width: 45%; height: 45%; }
.icon-btn:hover:not(:disabled) { background: var(--brand); border-color: var(--brand); color: var(--paper); }
.icon-btn:disabled { opacity: .35; cursor: default; }

.fala-btn {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * .5);
  height: calc(var(--u) * 2.9);
  margin-right: calc(var(--u) * .6);
  padding: 0 calc(var(--u) * 1.2);
  border: 1px solid var(--line);
  border-radius: 99px;
  background: var(--paper);
  font-size: calc(var(--u) * .9);
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  transition: background .25s, color .25s, border-color .25s;
}

.fala-btn svg { width: calc(var(--u) * 1.3); height: calc(var(--u) * 1.3); }
.fala-btn:hover,
.fala-btn[aria-expanded="true"] { background: var(--brand); border-color: var(--brand); color: var(--paper); }

.progress {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 21;
  height: 3px;
  background: rgba(15, 23, 42, .05);
}

.progress span {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--brand), var(--brand-2), #ec4899);
  transition: width .6s var(--ease);
}

/* chrome sobre fundo azul (encerramento) */
body[data-tone="azul"] .counter { color: rgba(255, 255, 255, .72); }
body[data-tone="azul"] .counter em { color: var(--paper); }
body[data-tone="azul"] .counter i { color: rgba(255, 255, 255, .35); }
body[data-tone="azul"] .dots button { background: rgba(255, 255, 255, .35); }
body[data-tone="azul"] .dots button[aria-current="true"] { background: var(--paper); }
body[data-tone="azul"] .icon-btn,
body[data-tone="azul"] .fala-btn { border-color: transparent; }

/* ---------------------------------------------------------------- fala -- */

.fala-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: calc(var(--u) * 6);
  z-index: 40;
  display: flex;
  flex-direction: column;
  width: min(560px, 92vw);
  background: var(--paper);
  border-left: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  box-shadow: -24px 0 60px rgba(15, 23, 42, .12);
  transform: translateX(105%);
  visibility: hidden;
  transition: transform .5s var(--ease), visibility 0s .5s;
}

body.is-fala .fala-panel { transform: none; visibility: visible; transition: transform .5s var(--ease), visibility 0s; }

.fala-panel__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 28px 28px 20px;
  border-bottom: 1px solid var(--line);
}

.fala-panel__head .icon-btn { width: 38px; height: 38px; flex: none; }

.fala-panel__n {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--brand);
}

.fala-panel h3 {
  margin: 8px 0 0;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.02em;
}

.fala-panel__body {
  flex: 1;
  overflow-y: auto;
  padding: 24px 28px 40px;
  outline: none;
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-2);
}

.fala-panel__body p { margin: 0 0 12px; }

.fala-panel__body .fala-nota {
  margin-top: 24px;
  padding: 14px 16px;
  border-left: 3px solid var(--brand);
  border-radius: 0 10px 10px 0;
  background: #eef4ff;
  font-size: 15px;
}

.fala-panel__body .fala-nota b {
  display: block;
  margin-bottom: 4px;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brand);
}

.fala-panel__vazia { color: var(--muted); }

.fala-panel__foot {
  padding: 14px 28px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--muted);
}

.fala-panel kbd {
  padding: 2px 6px;
  border: 1px solid var(--line);
  border-radius: 5px;
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--ink);
}

.fala { display: none; }

/* ---------------------------------------------------------------- slides -- */

.deck { position: fixed; inset: 0; outline: none; }

.slide {
  position: absolute;
  inset: 0;
  display: flex;
  padding: var(--pad-top) var(--pad-x) var(--pad-bottom);
  opacity: 0;
  visibility: hidden;
  transform: translateX(3%);
  transition: opacity .7s var(--ease), transform .8s var(--ease), visibility 0s .8s;
}

.slide.is-past { transform: translateX(-3%); }

.slide.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .7s var(--ease), transform .8s var(--ease), visibility 0s;
}

/* brilho suave da cor do módulo no canto */
.slide::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--m) 16%, transparent), transparent 42%);
  pointer-events: none;
}

.slide__inner { position: relative; width: 100%; height: 100%; }

.r {
  opacity: 0;
  transform: translateY(calc(var(--u) * 1.6));
  transition: opacity .7s var(--ease), transform .9s var(--ease);
}

.slide.is-active .r {
  opacity: 1;
  transform: none;
  transition-delay: calc(.18s + var(--i, 0) * .07s);
}

/* ------------------------------------------------------------- layouts -- */

.stack { display: flex; flex-direction: column; justify-content: center; gap: calc(var(--u) * 2.6); }

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(var(--u) * 5);
  align-items: center;
}

.split__texto { display: flex; flex-direction: column; align-items: flex-start; gap: calc(var(--u) * 2.2); }

.split--ia { grid-template-columns: 1.05fr 1fr; }
.split--crm { grid-template-columns: .9fr 1.25fr; }
.split--bi { grid-template-columns: .9fr 1.15fr; }

/* ------------------------------------------- coluna inclinada (do hub) -- */

.coluna {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 1);
  border-radius: calc(var(--u) * 1.8) calc(var(--u) * 1.8) 0 0;
  background: linear-gradient(to bottom, var(--m), color-mix(in srgb, var(--m) 80%, black));
  box-shadow: 0 calc(var(--u) * 1.2) calc(var(--u) * 3) color-mix(in srgb, var(--m) 30%, transparent);
  color: var(--paper);
  overflow: hidden;
}

.coluna::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, .3), transparent 45%, rgba(0, 0, 0, .1));
  pointer-events: none;
}

.coluna > * { position: relative; transform: skewX(6deg); }

.coluna__ativo {
  position: absolute;
  top: calc(var(--u) * 1.6);
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * .4);
  padding: calc(var(--u) * .25) calc(var(--u) * .8);
  border-radius: 99px;
  background: rgba(255, 255, 255, .22);
  font-size: calc(var(--u) * .6);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.coluna__ativo::before {
  content: '';
  width: calc(var(--u) * .45);
  height: calc(var(--u) * .45);
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 0 rgba(34, 197, 94, .6);
  animation: pulso 2s ease-out infinite;
}

.coluna__ic {
  display: grid;
  place-items: center;
  width: calc(var(--u) * 3.8);
  height: calc(var(--u) * 3.8);
  border-radius: calc(var(--u) * 1);
  background: rgba(255, 255, 255, .88);
  color: var(--ink);
  font-size: calc(var(--u) * 1.8);
  box-shadow: 0 calc(var(--u) * .5) calc(var(--u) * 1.2) rgba(0, 0, 0, .12);
}

.coluna b { font-size: calc(var(--u) * 1.05); font-weight: 600; }

.m-bi.coluna,
.m-bi.app { color: var(--ink); }

@keyframes pulso {
  0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .6); }
  100% { box-shadow: 0 0 0 calc(var(--u) * .7) rgba(34, 197, 94, 0); }
}

/* ------------------------------------------------------------------ capa -- */

.slide--capa { padding: 0; }
.slide--capa::before { display: none; }

.capa {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  width: 100%;
  height: 100%;
}

.capa__texto {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: calc(var(--u) * 2);
  padding: calc(var(--u) * 5) calc(var(--u) * 3) calc(var(--u) * 7) var(--pad-x);
}

.capa__logo { height: calc(var(--u) * 3.6); width: auto; margin-bottom: calc(var(--u) * 1.5); }

.capa__colunas {
  display: flex;
  gap: calc(var(--u) * .6);
  height: 100%;
  margin-right: calc(var(--u) * -6);
  padding-top: calc(var(--u) * 7);
  transform: skewX(-6deg);
}

.capa__colunas .coluna {
  flex: 1;
  transform: translateY(105%);
  transition: transform 1.1s var(--ease);
}

.slide.is-active .capa__colunas .coluna {
  transform: none;
  transition-delay: calc(.2s + var(--c, 0) * .09s);
}

/* ------------------------------------------------------------ cenário -- */

.espalhado {
  position: relative;
  align-self: stretch;
  height: calc(var(--u) * 18);
  margin-top: calc(var(--u) * 1);
}

.espalhado span {
  position: absolute;
  left: var(--x);
  top: var(--y);
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * .7);
  padding: calc(var(--u) * .8) calc(var(--u) * 1.3);
  border: 1px solid var(--line);
  border-radius: calc(var(--u) * .9);
  background: var(--paper);
  box-shadow: 0 4px 14px rgba(15, 23, 42, .06);
  font-size: calc(var(--u) * 1.05);
  font-weight: 500;
  color: var(--ink-2);
  transform: rotate(var(--r));
}

.espalhado .ic { font-size: calc(var(--u) * 1.3); color: var(--muted); }

.dores { display: grid; gap: calc(var(--u) * 1.2); }

.dores li {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * .35);
  padding: calc(var(--u) * 1.5) calc(var(--u) * 2);
  border: 1px solid var(--line);
  border-left: calc(var(--u) * .3) solid var(--dor);
  border-radius: var(--radius);
  background: var(--glass);
  backdrop-filter: blur(6px);
}

.dores b { font-family: var(--font-display); font-size: calc(var(--u) * 1.6); font-weight: 600; letter-spacing: -.01em; }
.dores span { font-size: calc(var(--u) * 1.1); color: var(--muted); }

/* ------------------------------------------------------- ecossistema -- */

.apps { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * 1.6); }

.app {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--u) * .8);
  min-height: calc(var(--u) * 13);
  padding: calc(var(--u) * 2.2);
  border-radius: calc(var(--u) * 1.6);
  background: linear-gradient(135deg, var(--m), color-mix(in srgb, var(--m) 80%, black));
  box-shadow: 0 calc(var(--u) * 1) calc(var(--u) * 2.6) color-mix(in srgb, var(--m) 28%, transparent);
  color: var(--paper);
  overflow: hidden;
}

.app::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, .3), transparent 45%, rgba(0, 0, 0, .1));
  pointer-events: none;
}

.app > * { position: relative; }

.app__ic {
  display: grid;
  place-items: center;
  width: calc(var(--u) * 3.6);
  height: calc(var(--u) * 3.6);
  margin-bottom: auto;
  border-radius: calc(var(--u) * .9);
  background: rgba(255, 255, 255, .88);
  color: var(--ink);
  font-size: calc(var(--u) * 1.7);
}

.app b { margin-top: calc(var(--u) * 1.4); font-family: var(--font-display); font-size: calc(var(--u) * 2); font-weight: 700; letter-spacing: -.02em; }
.app span { font-size: calc(var(--u) * 1.1); line-height: 1.45; opacity: .9; }

/* ------------------------------------------------------------ jornada -- */

.jornada {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: calc(var(--u) * 1.6);
  margin-top: calc(var(--u) * 2);
}

.jornada::before {
  content: '';
  position: absolute;
  left: 8%;
  right: 8%;
  top: calc(var(--u) * 3.2);
  height: calc(var(--u) * .3);
  border-radius: 99px;
  background: linear-gradient(90deg, #35c22b, #0ea5e9, #0000ef, #7c3aed, #ec4899, #6ee7b7);
  opacity: .5;
}

.jornada li { position: relative; display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * .7); text-align: center; }

.jornada__ic {
  display: grid;
  place-items: center;
  width: calc(var(--u) * 6.4);
  height: calc(var(--u) * 6.4);
  margin-bottom: calc(var(--u) * .8);
  border: calc(var(--u) * .35) solid var(--paper);
  border-radius: 50%;
  background: linear-gradient(135deg, var(--m), color-mix(in srgb, var(--m) 78%, black));
  box-shadow: 0 calc(var(--u) * .8) calc(var(--u) * 2) color-mix(in srgb, var(--m) 35%, transparent);
  color: var(--paper);
  font-size: calc(var(--u) * 2.4);
}

.m-bi .jornada__ic,
.jornada .m-bi .jornada__ic { color: var(--ink); }

.jornada small { font-size: calc(var(--u) * .85); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--m-ink); }
.jornada b { font-family: var(--font-display); font-size: calc(var(--u) * 2); font-weight: 700; letter-spacing: -.02em; }

.jornada__volta {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * .8);
  margin: calc(var(--u) * 1) 0 0;
  padding: calc(var(--u) * .9) calc(var(--u) * 1.8);
  border: 1.5px dashed #c7d2fe;
  border-radius: 99px;
  background: var(--glass);
  font-size: calc(var(--u) * 1.2);
  color: var(--ink-2);
}

.jornada__volta .ic { font-size: calc(var(--u) * 1.4); color: var(--brand); }

/* ------------------------------------------------------ slide de módulo -- */

.modulo {
  display: grid;
  grid-template-columns: .62fr 1.7fr;
  gap: calc(var(--u) * 5);
  align-items: stretch;
}

.modulo__card { display: flex; padding-left: calc(var(--u) * 2); }

.coluna--solo {
  flex: 1;
  border-radius: calc(var(--u) * 2);
  transform: skewX(-6deg);
}

.coluna--solo .coluna__ic { width: calc(var(--u) * 6); height: calc(var(--u) * 6); font-size: calc(var(--u) * 2.8); border-radius: calc(var(--u) * 1.4); }
.coluna--solo b { font-family: var(--font-display); font-size: calc(var(--u) * 1.8); }

.modulo__texto { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: calc(var(--u) * 2.2); }

.canais { display: flex; flex-wrap: wrap; gap: calc(var(--u) * .7); }

.canais li {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * .6);
  padding: calc(var(--u) * .6) calc(var(--u) * 1.2);
  border: 1px solid color-mix(in srgb, var(--m) 30%, white);
  border-radius: 99px;
  background: color-mix(in srgb, var(--m) 8%, white);
  font-size: calc(var(--u) * 1.05);
  font-weight: 600;
  color: var(--m-ink);
}

.canais .ic { font-size: calc(var(--u) * 1.3); }

.recursos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(var(--u) * 1.5) calc(var(--u) * 2.6);
}

.recursos li { position: relative; display: flex; flex-direction: column; gap: calc(var(--u) * .3); padding-left: calc(var(--u) * 2.8); }

.recursos li::before {
  content: '';
  position: absolute;
  left: 0;
  top: calc(var(--u) * .05);
  width: calc(var(--u) * 1.8);
  height: calc(var(--u) * 1.8);
  border-radius: calc(var(--u) * .5);
  background: color-mix(in srgb, var(--m) 16%, white);
}

.recursos li::after {
  content: '';
  position: absolute;
  left: calc(var(--u) * .62);
  top: calc(var(--u) * .38);
  width: calc(var(--u) * .5);
  height: calc(var(--u) * .9);
  border-right: 2px solid var(--m-ink);
  border-bottom: 2px solid var(--m-ink);
  transform: rotate(45deg);
}

.recursos b { font-family: var(--font-display); font-size: calc(var(--u) * 1.3); font-weight: 600; letter-spacing: -.01em; }
.recursos span { font-size: calc(var(--u) * 1.02); line-height: 1.45; color: var(--muted); }

.recursos--1col { grid-template-columns: 1fr; gap: calc(var(--u) * 1.5); }
.recursos--1col b { font-size: calc(var(--u) * 1.45); }
.recursos--1col span { font-size: calc(var(--u) * 1.1); }

/* ------------------------------------------------------- IA: chat mock -- */

.chat-mock {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 1.3);
  padding: calc(var(--u) * 2);
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: calc(var(--u) * 1.8);
  background: var(--paper);
  box-shadow: var(--sombra), 0 0 0 calc(var(--u) * .8) rgba(79, 70, 229, .05);
}

.chat-mock__topo {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 1);
  padding-bottom: calc(var(--u) * 1.1);
  border-bottom: 1px solid var(--line);
}

.chat-mock__avatar {
  display: grid;
  place-items: center;
  width: calc(var(--u) * 3);
  height: calc(var(--u) * 3);
  border-radius: 50%;
  background: linear-gradient(135deg, #0ea5e9, #0284c7);
  font-size: calc(var(--u) * .9);
  font-weight: 700;
  color: var(--paper);
}

.chat-mock__topo b { display: block; font-size: calc(var(--u) * 1.1); }
.chat-mock__topo small { font-size: calc(var(--u) * .85); color: var(--muted); }

.chat-mock__termo {
  margin-left: auto;
  padding: calc(var(--u) * .4) calc(var(--u) * .9);
  border-radius: 99px;
  background: #ecfdf5;
  font-size: calc(var(--u) * .8);
  font-weight: 600;
  color: #047857;
}

.chat-mock__termo i { font-style: normal; font-weight: 800; }

.chat-mock__fio { display: flex; flex-direction: column; gap: calc(var(--u) * .7); }

.bolha {
  align-self: flex-start;
  max-width: 82%;
  margin: 0;
  padding: calc(var(--u) * .9) calc(var(--u) * 1.2);
  border-radius: calc(var(--u) * 1.1) calc(var(--u) * 1.1) calc(var(--u) * 1.1) calc(var(--u) * .25);
  background: #f1f5f9;
  font-size: calc(var(--u) * 1.1);
  line-height: 1.45;
}

.bolha--audio { display: flex; align-items: center; gap: calc(var(--u) * .8); }
.bolha--audio .ic { font-size: calc(var(--u) * 1.2); color: var(--muted); }
.bolha--audio small { font-size: calc(var(--u) * .8); color: var(--muted); }

.onda {
  width: calc(var(--u) * 10);
  height: calc(var(--u) * 1.4);
  background: repeating-linear-gradient(90deg, #94a3b8 0 2px, transparent 2px 5px);
  -webkit-mask: linear-gradient(90deg, #000 0 100%), radial-gradient(ellipse at center, #000 40%, transparent 70%);
  mask: radial-gradient(ellipse 60% 100% at 50% 50%, #000 55%, rgba(0, 0, 0, .35) 80%);
}

.copiloto {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * .8);
  padding: calc(var(--u) * 1.3) calc(var(--u) * 1.5);
  border: 1.5px solid color-mix(in srgb, var(--m) 35%, white);
  border-radius: calc(var(--u) * 1.2);
  background: linear-gradient(135deg, color-mix(in srgb, var(--m) 7%, white), white);
}

.copiloto__tag {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * .5);
  font-size: calc(var(--u) * .8);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--m-ink);
}

.copiloto__tag .ic { font-size: calc(var(--u) * 1.1); }
.copiloto p { margin: 0; font-size: calc(var(--u) * 1.1); line-height: 1.5; }

.copiloto__cmds { display: flex; flex-wrap: wrap; gap: calc(var(--u) * .5); }

.copiloto__cmds span {
  padding: calc(var(--u) * .3) calc(var(--u) * .8);
  border: 1px solid color-mix(in srgb, var(--m) 28%, white);
  border-radius: 99px;
  background: var(--paper);
  font-size: calc(var(--u) * .8);
  font-weight: 600;
  color: var(--m-ink);
}

.copiloto .copiloto__proxima { display: flex; align-items: center; gap: calc(var(--u) * .5); font-size: calc(var(--u) * .9); font-weight: 600; color: var(--ink-2); }
.copiloto__proxima .ic { color: var(--m-ink); }

/* ------------------------------------------------------------ CRM kanban -- */

.kanban { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(var(--u) * 1); align-items: start; }

.kanban__col {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * .8);
  min-height: calc(var(--u) * 30);
  padding: calc(var(--u) * 1);
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: calc(var(--u) * 1.2);
  background: rgba(255, 255, 255, .55);
  backdrop-filter: blur(6px);
}

.kanban h4 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 0 calc(var(--u) * .3);
  font-size: calc(var(--u) * .8);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}

.kanban h4 i {
  padding: calc(var(--u) * .1) calc(var(--u) * .6);
  border-radius: 99px;
  background: color-mix(in srgb, var(--m) 12%, white);
  font-style: normal;
  color: var(--m-ink);
}

.kcard {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * .3);
  padding: calc(var(--u) * 1) calc(var(--u) * 1.1);
  border-radius: calc(var(--u) * .9);
  background: var(--paper);
  box-shadow: 0 2px 8px rgba(15, 23, 42, .06);
}

.kcard b { font-size: calc(var(--u) * 1); }
.kcard small { font-size: calc(var(--u) * .78); color: var(--muted); }
.kcard__v { font-family: var(--font-display); font-size: calc(var(--u) * 1.05); font-weight: 700; }
.kcard__stars { display: flex; gap: 2px; color: #f59e0b; font-size: calc(var(--u) * .85); }
.kcard__stars .ic { fill: currentColor; }
.kcard--fantasma { height: calc(var(--u) * 4); border: 1.5px dashed #cbd5e1; background: transparent; box-shadow: none; }
.kcard--ativo { box-shadow: 0 0 0 2px var(--m), 0 8px 20px color-mix(in srgb, var(--m) 25%, transparent); }
.kcard--ganho { border-left: calc(var(--u) * .3) solid #16a34a; }

/* --------------------------------------------------------------- cards -- */

.cards4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(var(--u) * 1.6); }

.card {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 1.1);
  padding: calc(var(--u) * 2.2);
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: calc(var(--u) * 1.5);
  background: var(--glass);
  box-shadow: 0 calc(var(--u) * .8) calc(var(--u) * 2.4) rgba(15, 23, 42, .06);
  backdrop-filter: blur(8px);
}

.card__ic {
  display: grid;
  place-items: center;
  width: calc(var(--u) * 4);
  height: calc(var(--u) * 4);
  margin-bottom: calc(var(--u) * 1.4);
  border-radius: calc(var(--u) * 1);
  background: linear-gradient(135deg, var(--m), color-mix(in srgb, var(--m) 78%, black));
  color: var(--paper);
  font-size: calc(var(--u) * 1.8);
  box-shadow: 0 calc(var(--u) * .6) calc(var(--u) * 1.4) color-mix(in srgb, var(--m) 30%, transparent);
}

.card b { font-family: var(--font-display); font-size: calc(var(--u) * 1.6); font-weight: 700; letter-spacing: -.015em; }
.card p { margin: 0; font-size: calc(var(--u) * 1.1); line-height: 1.5; color: var(--muted); }

/* ------------------------------------------------------------- números -- */

.numeros { display: grid; gap: calc(var(--u) * 1.6); }
.numeros--2 { grid-template-columns: repeat(2, auto); gap: calc(var(--u) * 4); }
.numeros--5 { grid-template-columns: repeat(5, 1fr); margin-top: calc(var(--u) * 1); }

.numeros div { display: flex; flex-direction: column; gap: calc(var(--u) * .4); }

.numeros strong {
  font-family: var(--font-display);
  font-size: calc(var(--u) * 5.4);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--m-ink);
}

.numeros span { font-size: calc(var(--u) * 1.1); color: var(--muted); }

.numeros--5 div {
  justify-content: space-between;
  min-height: calc(var(--u) * 17);
  padding: calc(var(--u) * 2.2);
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: calc(var(--u) * 1.5);
  background: var(--glass);
  box-shadow: 0 calc(var(--u) * .8) calc(var(--u) * 2.4) rgba(15, 23, 42, .06);
}

.numeros--5 strong { font-size: calc(var(--u) * 7); background: linear-gradient(90deg, var(--brand), var(--brand-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.numeros--5 span { font-size: calc(var(--u) * 1.3); color: var(--ink-2); }

.numeros--5 .is-destaque { border-color: transparent; background: linear-gradient(135deg, #2563eb, var(--brand-2)); box-shadow: 0 calc(var(--u) * 1) calc(var(--u) * 3) rgba(79, 70, 229, .35); }
.numeros--5 .is-destaque strong { background: none; color: var(--paper); }
.numeros--5 .is-destaque span { color: rgba(255, 255, 255, .9); }

/* --------------------------------------------------------------- chips -- */

.chips { display: flex; flex-wrap: wrap; gap: calc(var(--u) * .6); }

.chips li {
  padding: calc(var(--u) * .5) calc(var(--u) * 1.1);
  border-radius: 99px;
  background: color-mix(in srgb, var(--m) 10%, white);
  font-size: calc(var(--u) * 1);
  font-weight: 600;
  color: var(--m-ink);
}

/* ------------------------------------------------------ Flow: automação -- */

.automacao {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: calc(var(--u) * 2.4);
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: calc(var(--u) * 1.8);
  background: var(--paper);
  box-shadow: var(--sombra);
}

.bloco {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * .35);
  padding: calc(var(--u) * 1.2) calc(var(--u) * 1.5);
  border: 1px solid var(--line);
  border-radius: calc(var(--u) * 1);
}

.bloco + .bloco { margin-top: calc(var(--u) * 2); }

.bloco + .bloco::before {
  content: '';
  position: absolute;
  left: calc(var(--u) * 2.4);
  top: calc(var(--u) * -2);
  width: 2px;
  height: calc(var(--u) * 2);
  background: color-mix(in srgb, var(--m) 40%, white);
}

.bloco small {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * .45);
  font-size: calc(var(--u) * .78);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--m-ink);
}

.bloco b { font-family: var(--font-display); font-size: calc(var(--u) * 1.35); font-weight: 600; }

.bloco--gatilho { border: 0; background: linear-gradient(135deg, var(--m), color-mix(in srgb, var(--m) 78%, black)); color: var(--paper); box-shadow: 0 calc(var(--u) * .8) calc(var(--u) * 2) color-mix(in srgb, var(--m) 30%, transparent); }
.bloco--gatilho small { color: rgba(255, 255, 255, .85); }
.bloco--cond { border-style: dashed; background: var(--paper-2); }
.bloco--acao { border-color: color-mix(in srgb, var(--m) 25%, white); background: color-mix(in srgb, var(--m) 6%, white); }

.automacao__status {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * .5);
  margin-top: calc(var(--u) * 1.6);
  font-size: calc(var(--u) * .9);
  font-weight: 600;
  color: #047857;
}

.automacao__status i { width: calc(var(--u) * .6); height: calc(var(--u) * .6); border-radius: 50%; background: #22c55e; animation: pulso 2s ease-out infinite; }

/* ---------------------------------------------------- Fideliza: cartão -- */

.fidel { position: relative; display: flex; flex-direction: column; align-items: center; }

.fidel__cartao {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 1);
  width: calc(var(--u) * 38);
  padding: calc(var(--u) * 2.6);
  border-radius: calc(var(--u) * 2);
  background: linear-gradient(135deg, var(--m), color-mix(in srgb, var(--m) 72%, black));
  box-shadow: 0 calc(var(--u) * 2) calc(var(--u) * 5) color-mix(in srgb, var(--m) 40%, transparent);
  color: var(--paper);
  transform: rotate(-3deg);
  overflow: hidden;
}

.fidel__cartao::before {
  content: '';
  position: absolute;
  right: calc(var(--u) * -6);
  top: calc(var(--u) * -6);
  width: calc(var(--u) * 18);
  height: calc(var(--u) * 18);
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
}

.fidel__topo { display: flex; justify-content: space-between; align-items: center; font-size: calc(var(--u) * .85); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.fidel__topo .ic { font-size: calc(var(--u) * 1.6); }
.fidel__nome { font-family: var(--font-display); font-size: calc(var(--u) * 1.6); font-weight: 600; }
.fidel__pts { display: flex; align-items: baseline; gap: calc(var(--u) * .6); }
.fidel__pts strong { font-family: var(--font-display); font-size: calc(var(--u) * 4.6); font-weight: 700; line-height: 1; letter-spacing: -.03em; }
.fidel__pts span { font-size: calc(var(--u) * 1.1); opacity: .85; }
.fidel__nivel { display: flex; justify-content: space-between; font-size: calc(var(--u) * .95); opacity: .95; }
.fidel__barra { height: calc(var(--u) * .7); border-radius: 99px; background: rgba(255, 255, 255, .25); overflow: hidden; }
.fidel__barra i { display: block; height: 100%; border-radius: 99px; background: var(--paper); }

.fidel__resgate {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 1.2);
  margin-top: calc(var(--u) * -1.2);
  margin-left: calc(var(--u) * 10);
  padding: calc(var(--u) * 1.2) calc(var(--u) * 1.6);
  border-radius: calc(var(--u) * 1.2);
  background: var(--paper);
  box-shadow: var(--sombra);
  transform: rotate(2deg);
}

.fidel__cupom {
  padding: calc(var(--u) * .5) calc(var(--u) * .8);
  border: 1.5px dashed color-mix(in srgb, var(--m) 50%, white);
  border-radius: calc(var(--u) * .6);
  font-family: ui-monospace, monospace;
  font-size: calc(var(--u) * .85);
  font-weight: 700;
  color: var(--m-ink);
}

.fidel__resgate b { display: block; font-size: calc(var(--u) * 1.05); }
.fidel__resgate small { font-size: calc(var(--u) * .85); color: var(--muted); }

/* ------------------------------------------------------ Studio: browser -- */

.browser {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 1.2);
  padding: 0 0 calc(var(--u) * 1.8);
  border-radius: calc(var(--u) * 1.4);
  background: var(--paper);
  box-shadow: var(--sombra);
  overflow: visible;
}

.browser__barra {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * .5);
  padding: calc(var(--u) * 1) calc(var(--u) * 1.2);
  border-bottom: 1px solid var(--line);
}

.browser__barra i { width: calc(var(--u) * .7); height: calc(var(--u) * .7); border-radius: 50%; background: #e2e8f0; }

.browser__barra span {
  margin-left: calc(var(--u) * 1);
  padding: calc(var(--u) * .25) calc(var(--u) * 1.2);
  border-radius: 99px;
  background: var(--paper-2);
  font-size: calc(var(--u) * .8);
  color: var(--muted);
}

.browser__hero {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--u) * .9);
  margin: 0 calc(var(--u) * 1.8);
  padding: calc(var(--u) * 2.4);
  border-radius: calc(var(--u) * 1);
  background: linear-gradient(135deg, color-mix(in srgb, var(--m) 16%, white), color-mix(in srgb, var(--m) 4%, white));
}

.browser__hero b { font-family: var(--font-display); font-size: calc(var(--u) * 2); font-weight: 700; letter-spacing: -.02em; }
.browser__hero > span:not(.browser__cta) { width: 60%; height: calc(var(--u) * .7); border-radius: 99px; background: color-mix(in srgb, var(--m) 20%, white); }
.browser__cta { padding: calc(var(--u) * .6) calc(var(--u) * 1.4); border-radius: 99px; background: var(--m-ink); font-size: calc(var(--u) * .9); font-weight: 600; color: var(--paper); }

.browser__beneficios { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * .8); margin: 0 calc(var(--u) * 1.8); }
.browser__beneficios i { height: calc(var(--u) * 5); border: 1px solid var(--line); border-radius: calc(var(--u) * .8); background: var(--paper-2); }

.browser__form { display: flex; gap: calc(var(--u) * .8); margin: 0 calc(var(--u) * 1.8); }
.browser__form span { flex: 1; height: calc(var(--u) * 2.4); border: 1px solid var(--line); border-radius: calc(var(--u) * .6); }
.browser__form em { display: grid; place-items: center; padding: 0 calc(var(--u) * 1.4); border-radius: calc(var(--u) * .6); background: var(--ink); font-size: calc(var(--u) * .85); font-weight: 600; color: var(--paper); }

.browser__lead {
  position: absolute;
  right: calc(var(--u) * -2);
  bottom: calc(var(--u) * -1.6);
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * .5);
  padding: calc(var(--u) * .8) calc(var(--u) * 1.3);
  border-radius: 99px;
  background: #0000ef;
  box-shadow: 0 calc(var(--u) * .8) calc(var(--u) * 2) rgba(0, 0, 239, .3);
  font-size: calc(var(--u) * .95);
  font-weight: 600;
  color: var(--paper);
  animation: flutua 3s ease-in-out infinite;
}

@keyframes flutua {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(calc(var(--u) * -.6)); }
}

/* ---------------------------------------------------------- BI: painel -- */

.painel {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: calc(var(--u) * 1.2);
  padding: calc(var(--u) * 1.8);
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: calc(var(--u) * 1.6);
  background: var(--paper);
  box-shadow: var(--sombra);
}

.painel small { font-size: calc(var(--u) * .8); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

.painel__kpis { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * 1); }

.painel__kpis div {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * .4);
  padding: calc(var(--u) * 1.1) calc(var(--u) * 1.3);
  border-radius: calc(var(--u) * 1);
  background: var(--paper-2);
}

.painel__kpis b { font-family: var(--font-display); font-size: calc(var(--u) * 1.8); font-weight: 700; letter-spacing: -.02em; }

.painel__grafico,
.painel__mapa { position: relative; display: flex; flex-direction: column; gap: calc(var(--u) * 1); padding: calc(var(--u) * 1.2); border-radius: calc(var(--u) * 1); background: var(--paper-2); }

.barras {
  display: flex;
  align-items: flex-end;
  gap: calc(var(--u) * .7);
  height: calc(var(--u) * 12);
  border-bottom: 1px solid #cbd5e1;
}

.barras i {
  flex: 1;
  height: 0;
  border-radius: 4px 4px 0 0;
  background: color-mix(in srgb, var(--m-ink) 32%, white);
  transition: height 1s var(--ease);
}

.slide.is-active .barras i { height: var(--h); transition-delay: .5s; }
.barras i.is-atual { background: var(--m-ink); }

.painel__mapa {
  overflow: hidden;
  background:
    linear-gradient(90deg, transparent 49%, #e2e8f0 49% 51%, transparent 51%) 0 0 / calc(var(--u) * 3.2) 100%,
    linear-gradient(0deg, transparent 49%, #e2e8f0 49% 51%, transparent 51%) 0 0 / 100% calc(var(--u) * 3.2),
    #f1f5f9;
}

.calor { position: absolute; border-radius: 50%; background: radial-gradient(circle, rgba(5, 150, 105, .75), rgba(110, 231, 183, .35) 45%, transparent 70%); }
.calor--a { width: 55%; height: 60%; left: 12%; top: 26%; }
.calor--b { width: 38%; height: 42%; left: 55%; top: 44%; opacity: .8; }
.calor--c { width: 26%; height: 30%; left: 60%; top: 12%; opacity: .6; }

.painel__nota { grid-column: 1 / -1; margin: 0; font-size: calc(var(--u) * .75); color: var(--muted); text-align: right; }

/* ------------------------------------------------------- tudo conectado -- */

.historia { display: grid; grid-template-columns: repeat(7, 1fr); gap: calc(var(--u) * 1); margin-top: calc(var(--u) * 1); }

.historia li {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * .8);
  min-height: calc(var(--u) * 20);
  padding: calc(var(--u) * 1.5) calc(var(--u) * 1.3);
  border: 1px solid rgba(255, 255, 255, .9);
  border-top: calc(var(--u) * .4) solid var(--m);
  border-radius: calc(var(--u) * 1.2);
  background: var(--glass);
  box-shadow: 0 calc(var(--u) * .6) calc(var(--u) * 2) rgba(15, 23, 42, .06);
}

.historia__tag {
  align-self: flex-start;
  padding: calc(var(--u) * .25) calc(var(--u) * .7);
  border-radius: 99px;
  background: color-mix(in srgb, var(--m) 14%, white);
  font-size: calc(var(--u) * .78);
  font-weight: 700;
  color: var(--m-ink);
}

.historia b { font-family: var(--font-display); font-size: calc(var(--u) * 2.4); font-weight: 700; color: var(--m-ink); }
.historia p { margin: 0; font-size: calc(var(--u) * 1.1); line-height: 1.45; color: var(--ink-2); }

/* ------------------------------------------------------------- o que muda -- */

.muda { display: grid; gap: calc(var(--u) * 1.2); }

.muda__linha {
  display: grid;
  grid-template-columns: 1fr auto 1.3fr;
  gap: calc(var(--u) * 2);
  align-items: center;
}

.muda__antes {
  padding: calc(var(--u) * 1.2) calc(var(--u) * 1.6);
  border-radius: var(--radius);
  background: rgba(241, 245, 249, .8);
  font-size: calc(var(--u) * 1.3);
  color: var(--muted);
  text-decoration: line-through;
  text-decoration-color: rgba(225, 29, 72, .45);
}

.muda__linha > .ic { font-size: calc(var(--u) * 2); color: var(--brand); }

.muda__depois {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * .2);
  padding: calc(var(--u) * 1.1) calc(var(--u) * 1.6);
  border: 1px solid rgba(255, 255, 255, .9);
  border-left: calc(var(--u) * .4) solid var(--m);
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: 0 calc(var(--u) * .6) calc(var(--u) * 2) rgba(15, 23, 42, .06);
  font-size: calc(var(--u) * .95);
  font-weight: 600;
  color: var(--m-ink);
}

.muda__depois b { font-family: var(--font-display); font-size: calc(var(--u) * 1.6); font-weight: 700; color: var(--ink); }

/* --------------------------------------------------------- como começar -- */

.passos {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: calc(var(--u) * 2);
  margin-top: calc(var(--u) * 2);
}

.passos::before {
  content: '';
  position: absolute;
  left: calc(var(--u) * 2);
  right: 18%;
  top: calc(var(--u) * 2);
  height: 2px;
  background: linear-gradient(90deg, #c7d2fe, var(--brand));
}

.passos li { position: relative; display: flex; flex-direction: column; gap: calc(var(--u) * 1); }

.passos span {
  display: grid;
  place-items: center;
  width: calc(var(--u) * 4);
  height: calc(var(--u) * 4);
  margin-bottom: calc(var(--u) * .8);
  border: 2px solid var(--brand);
  border-radius: 50%;
  background: var(--paper);
  font-family: var(--font-display);
  font-size: calc(var(--u) * 1.2);
  font-weight: 700;
  color: var(--brand);
}

.passos .is-fim span { background: linear-gradient(135deg, var(--brand), var(--brand-2)); border-color: transparent; color: var(--paper); }
.passos b { font-family: var(--font-display); font-size: calc(var(--u) * 2); font-weight: 700; letter-spacing: -.02em; }
.passos p { margin: 0; max-width: 24ch; font-size: calc(var(--u) * 1.15); line-height: 1.5; color: var(--muted); }

/* --------------------------------------------------------- encerramento -- */

.slide--fim {
  background:
    radial-gradient(50vw 40vw at 90% 0%, rgba(236, 72, 153, .35), transparent 60%),
    radial-gradient(50vw 40vw at 0% 100%, rgba(14, 165, 233, .45), transparent 60%),
    linear-gradient(135deg, #2563eb, var(--brand-2));
  color: var(--paper);
}

.slide--fim::before { display: none; }

.fim { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * 3); text-align: center; }
.fim__logo { height: calc(var(--u) * 4.4); width: auto; filter: brightness(0) invert(1); }
.fim .display { max-width: 18ch; font-size: calc(var(--u) * 5.8); }
.fim .display em { background: linear-gradient(90deg, #bae6fd, #fbcfe8); -webkit-background-clip: text; background-clip: text; color: transparent; }

.fim__contato { display: flex; gap: calc(var(--u) * 1.4); }

.fim__contato li {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * .3);
  padding: calc(var(--u) * 1.2) calc(var(--u) * 2);
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: calc(var(--u) * 1.2);
  background: rgba(255, 255, 255, .12);
  backdrop-filter: blur(8px);
  font-size: calc(var(--u) * 1.25);
  font-weight: 600;
}

.fim__contato small { font-size: calc(var(--u) * .75); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; opacity: .75; }

/* ---------------------------------------------------- telas estreitas -- */

@media (max-aspect-ratio: 1/1) {
  :root { --u: 1.9vw; --pad-x: 6vw; --pad-top: 16vw; --pad-bottom: 16vw; }

  .slide { overflow-y: auto; }
  .slide__inner { height: auto; min-height: 100%; }

  .capa,
  .split,
  .modulo,
  .muda__linha { grid-template-columns: 1fr; }

  .capa__colunas,
  .modulo__card { display: none; }

  .apps,
  .cards4,
  .kanban { grid-template-columns: 1fr 1fr; }

  .jornada,
  .historia,
  .numeros--5,
  .passos { grid-template-columns: 1fr 1fr; }

  .recursos { grid-template-columns: 1fr; }
  .dots { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; transition-delay: 0s !important; animation: none !important; }
}

/* ajustes */
.capa__colunas { margin-right: calc(var(--u) * 1.5); padding-bottom: 0; }
.app .app__ic { font-size: calc(var(--u) * 1.8); opacity: 1; }
.historia li { min-height: calc(var(--u) * 16); }

/* ------------------------------------------------------------ autoridade -- */

.autoridade { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * 1.6); }

.big {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: calc(var(--u) * 1);
  min-height: calc(var(--u) * 15);
  padding: calc(var(--u) * 2.4);
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: calc(var(--u) * 1.6);
  background: var(--glass);
  box-shadow: 0 calc(var(--u) * .8) calc(var(--u) * 2.4) rgba(15, 23, 42, .06);
}

.big strong {
  font-family: var(--font-display);
  font-size: calc(var(--u) * 6.4);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.04em;
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.big strong small { font-size: .5em; margin-left: .08em; }
.big span { font-size: calc(var(--u) * 1.3); color: var(--ink-2); }

.big--destaque { border-color: transparent; background: linear-gradient(135deg, #2563eb, var(--brand-2)); box-shadow: 0 calc(var(--u) * 1) calc(var(--u) * 3) rgba(79, 70, 229, .35); }
.big--destaque strong { background: none; color: var(--paper); }
.big--destaque span { color: rgba(255, 255, 255, .9); }

.marcas { display: flex; align-items: center; gap: calc(var(--u) * 2); }

.marcas__rotulo {
  flex: none;
  font-size: calc(var(--u) * .85);
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}

.marcas ul { display: flex; flex-wrap: wrap; gap: calc(var(--u) * .7); }

.marcas li {
  padding: calc(var(--u) * .7) calc(var(--u) * 1.4);
  border: 1px solid var(--line);
  border-radius: 99px;
  background: var(--paper);
  font-family: var(--font-display);
  font-size: calc(var(--u) * 1.2);
  font-weight: 600;
  color: var(--ink);
}

/* -------------------------------------------------------- mais que software -- */

.parceria { display: grid; gap: calc(var(--u) * 1.2); }

.parceria li {
  display: flex;
  align-items: flex-start;
  gap: calc(var(--u) * 1.5);
  padding: calc(var(--u) * 1.6) calc(var(--u) * 2);
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: var(--radius);
  background: var(--glass);
  box-shadow: 0 calc(var(--u) * .6) calc(var(--u) * 2) rgba(15, 23, 42, .06);
}

.parceria__ic {
  display: grid;
  place-items: center;
  flex: none;
  width: calc(var(--u) * 3.6);
  height: calc(var(--u) * 3.6);
  border-radius: calc(var(--u) * .9);
  background: linear-gradient(135deg, #2563eb, var(--brand-2));
  color: var(--paper);
  font-size: calc(var(--u) * 1.6);
}

.parceria b { display: block; margin-bottom: calc(var(--u) * .3); font-family: var(--font-display); font-size: calc(var(--u) * 1.5); font-weight: 600; }
.parceria span { font-size: calc(var(--u) * 1.1); line-height: 1.45; color: var(--muted); }

/* ------------------------------------------------------------------ método -- */

.stack--metodo { gap: calc(var(--u) * 2); }

.metodo { display: grid; grid-template-columns: 1.15fr 1fr; gap: calc(var(--u) * 2); align-items: stretch; }

.metodo__passos { display: grid; gap: calc(var(--u) * .8); }

.metodo__passos li {
  display: grid;
  grid-template-columns: calc(var(--u) * 3.6) calc(var(--u) * 12) 1fr;
  align-items: center;
  gap: calc(var(--u) * 1.2);
  padding: calc(var(--u) * 1) calc(var(--u) * 1.4);
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: calc(var(--u) * 1.1);
  background: var(--glass);
  font-family: var(--font-display);
  font-size: calc(var(--u) * 1.45);
  font-weight: 600;
}

.metodo__passos b {
  display: grid;
  place-items: center;
  width: calc(var(--u) * 3.2);
  height: calc(var(--u) * 3.2);
  border-radius: 50%;
  background: color-mix(in srgb, var(--brand) 10%, white);
  font-size: calc(var(--u) * 1);
  color: var(--brand);
}

.metodo__passos small { font-family: var(--font-body); font-size: calc(var(--u) * 1); font-weight: 400; color: var(--muted); }

.metodo__rotina {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 1.2);
  padding: calc(var(--u) * 2);
  border-radius: calc(var(--u) * 1.6);
  background: linear-gradient(135deg, #2563eb, var(--brand-2));
  box-shadow: 0 calc(var(--u) * 1) calc(var(--u) * 3) rgba(79, 70, 229, .3);
  color: var(--paper);
}

.metodo__tag { font-size: calc(var(--u) * .85); font-weight: 700; letter-spacing: .18em; text-transform: uppercase; opacity: .85; }

.metodo__rotina ul { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * .8); }

.metodo__rotina li {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * .15);
  padding: calc(var(--u) * .9) calc(var(--u) * 1.1);
  border-radius: calc(var(--u) * .9);
  background: rgba(255, 255, 255, .12);
  font-size: calc(var(--u) * 1);
  line-height: 1.3;
}

.metodo__rotina strong { font-family: var(--font-display); font-size: calc(var(--u) * 1.8); font-weight: 700; letter-spacing: -.02em; }

.metodo__frase {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * .8);
  margin: 0;
  font-size: calc(var(--u) * 1.2);
  color: var(--ink-2);
}

.metodo__frase .ic { font-size: calc(var(--u) * 1.4); color: var(--brand-2); }

@media (max-aspect-ratio: 1/1) {
  .autoridade,
  .metodo { grid-template-columns: 1fr; }
  .marcas { flex-direction: column; align-items: flex-start; }
}
.parceria .parceria__ic { font-size: calc(var(--u) * 1.6); line-height: 1; color: var(--paper); }

/* ------------------------------------------------------ estudos de caso -- */

.stack--casos { gap: calc(var(--u) * 2); }

.casos { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(var(--u) * 1.4); }

.caso-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--u) * .5);
  min-height: calc(var(--u) * 14.5);
  padding: calc(var(--u) * 1.8);
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: calc(var(--u) * 1.5);
  background: var(--glass);
  box-shadow: 0 calc(var(--u) * .6) calc(var(--u) * 2) rgba(15, 23, 42, .06);
  font: inherit;
  text-align: left;
  color: var(--ink);
  cursor: pointer;
  overflow: hidden;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), opacity .7s var(--ease);
}

.caso-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(135deg, var(--m), color-mix(in srgb, var(--m) 78%, black));
  opacity: 0;
  transition: opacity .35s;
}

.caso-card > * { position: relative; z-index: 1; transition: color .35s; }

.slide.is-active .caso-card:hover { transform: translateY(calc(var(--u) * -.5)); box-shadow: 0 calc(var(--u) * 1.2) calc(var(--u) * 3) color-mix(in srgb, var(--m) 35%, transparent); }
.caso-card:hover::after { opacity: 1; }
.caso-card:hover small,
.caso-card:hover b,
.caso-card:hover em { color: var(--paper); }
.m-bi.caso-card:hover small,
.m-bi.caso-card:hover b,
.m-bi.caso-card:hover em { color: var(--ink); }
.caso-card:focus-visible { outline: 3px solid var(--m); outline-offset: 3px; }

.caso-card .caso-card__ic {
  display: grid;
  place-items: center;
  width: calc(var(--u) * 3.6);
  height: calc(var(--u) * 3.6);
  margin-bottom: auto;
  border-radius: calc(var(--u) * .9);
  background: linear-gradient(135deg, var(--m), color-mix(in srgb, var(--m) 78%, black));
  color: var(--paper);
  font-size: calc(var(--u) * 1.7);
}

.caso-card:hover .caso-card__ic { background: rgba(255, 255, 255, .9); color: var(--ink); }
.m-bi .caso-card__ic { color: var(--ink); }

.caso-card small { margin-top: calc(var(--u) * 1.4); font-size: calc(var(--u) * .78); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--m-ink); }
.caso-card b { font-family: var(--font-display); font-size: calc(var(--u) * 1.4); font-weight: 600; line-height: 1.2; letter-spacing: -.01em; }
.caso-card em { display: inline-flex; align-items: center; gap: .3em; margin-top: calc(var(--u) * .4); font-size: calc(var(--u) * .9); font-weight: 600; color: var(--muted); }
.caso-card em::after { content: '\2192'; transition: transform .3s var(--ease); }
.caso-card:hover em::after { transform: translateX(4px); }

.casos__dica { margin: 0; font-size: calc(var(--u) * 1); color: var(--muted); }

/* barra lateral */
.caso-backdrop {
  position: fixed;
  inset: 0;
  z-index: 44;
  background: rgba(15, 23, 42, .28);
  backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s, visibility 0s .4s;
}

body.is-caso .caso-backdrop { opacity: 1; visibility: visible; transition: opacity .4s, visibility 0s; }

.caso-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 45;
  display: flex;
  flex-direction: column;
  width: min(calc(var(--u) * 50), 94vw);
  background: var(--paper);
  box-shadow: -30px 0 80px rgba(15, 23, 42, .2);
  transform: translateX(105%);
  visibility: hidden;
  transition: transform .55s var(--ease), visibility 0s .55s;
}

body.is-caso .caso-drawer { transform: none; visibility: visible; transition: transform .55s var(--ease), visibility 0s; }

.caso-drawer__head {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 1.4);
  padding: calc(var(--u) * 2.4) calc(var(--u) * 2.6);
  background: linear-gradient(135deg, var(--m), color-mix(in srgb, var(--m) 72%, black));
  color: var(--paper);
}

.caso-drawer.m-bi .caso-drawer__head { color: var(--ink); }

.caso-drawer__ic {
  display: grid;
  place-items: center;
  flex: none;
  width: calc(var(--u) * 4.4);
  height: calc(var(--u) * 4.4);
  border-radius: calc(var(--u) * 1.1);
  background: rgba(255, 255, 255, .9);
  color: var(--ink);
  font-size: calc(var(--u) * 2.1);
}

.caso-drawer__head small { font-size: calc(var(--u) * .8); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; opacity: .85; }
.caso-drawer__head h3 { margin: calc(var(--u) * .3) 0 0; font-family: var(--font-display); font-size: calc(var(--u) * 2.2); font-weight: 700; line-height: 1.15; letter-spacing: -.02em; }
.caso-drawer__head .icon-btn { margin-left: auto; flex: none; border-color: transparent; }

.caso-drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: calc(var(--u) * 2.2) calc(var(--u) * 2.6) calc(var(--u) * 3);
  outline: none;
}

.caso-dor {
  margin: 0;
  padding: calc(var(--u) * 1.2) calc(var(--u) * 1.5);
  border-left: calc(var(--u) * .3) solid var(--dor);
  border-radius: 0 calc(var(--u) * 1) calc(var(--u) * 1) 0;
  background: #fff1f2;
  font-size: calc(var(--u) * 1.05);
  line-height: 1.5;
  color: var(--ink-2);
}

.caso-dor b { display: block; margin-bottom: calc(var(--u) * .3); font-size: calc(var(--u) * .75); letter-spacing: .16em; text-transform: uppercase; color: var(--dor); }

.caso-exemplos { display: flex; flex-wrap: wrap; gap: calc(var(--u) * .5); margin-top: calc(var(--u) * 1.2); }

.caso-exemplos li {
  padding: calc(var(--u) * .35) calc(var(--u) * .9);
  border-radius: 99px;
  background: color-mix(in srgb, var(--m) 10%, white);
  font-size: calc(var(--u) * .85);
  font-weight: 600;
  color: var(--m-ink);
}

.caso-sub { margin: calc(var(--u) * 2.2) 0 calc(var(--u) * 1.2); font-size: calc(var(--u) * .8); font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }

.caso-fluxo { position: relative; display: grid; gap: calc(var(--u) * 1.3); }

.caso-fluxo::before {
  content: '';
  position: absolute;
  left: calc(var(--u) * 1.8 - 1px);
  top: calc(var(--u) * 1.8);
  bottom: calc(var(--u) * 1.8);
  width: 2px;
  background: linear-gradient(to bottom, var(--line), color-mix(in srgb, var(--brand) 30%, white));
}

.caso-fluxo li { position: relative; display: flex; gap: calc(var(--u) * 1.3); }

.caso-drawer.is-anim .caso-fluxo li { animation: caso-entra .6s var(--ease) both; animation-delay: calc(.15s + var(--k) * .09s); }

@keyframes caso-entra {
  from { opacity: 0; transform: translateX(calc(var(--u) * 2)); }
  to { opacity: 1; transform: none; }
}

.caso-fluxo__no {
  display: grid;
  place-items: center;
  flex: none;
  width: calc(var(--u) * 3.6);
  height: calc(var(--u) * 3.6);
  border: calc(var(--u) * .25) solid var(--paper);
  border-radius: 50%;
  background: linear-gradient(135deg, var(--m), color-mix(in srgb, var(--m) 75%, black));
  box-shadow: 0 calc(var(--u) * .4) calc(var(--u) * 1) color-mix(in srgb, var(--m) 35%, transparent);
  color: var(--paper);
  font-size: calc(var(--u) * 1.5);
}

.caso-fluxo .m-bi .caso-fluxo__no { color: var(--ink); }

.caso-fluxo li > div {
  flex: 1;
  padding: calc(var(--u) * 1) calc(var(--u) * 1.3);
  border: 1px solid var(--line);
  border-radius: calc(var(--u) * 1);
  background: var(--paper-2);
}

.caso-fluxo small { font-size: calc(var(--u) * .72); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--m-ink); }
.caso-fluxo b { display: block; margin: calc(var(--u) * .2) 0 calc(var(--u) * .3); font-family: var(--font-display); font-size: calc(var(--u) * 1.25); font-weight: 600; }
.caso-fluxo p { margin: 0; font-size: calc(var(--u) * .98); line-height: 1.5; color: var(--muted); }

.caso-resultado {
  margin-top: calc(var(--u) * 2);
  padding: calc(var(--u) * 1.6) calc(var(--u) * 1.8);
  border-radius: calc(var(--u) * 1.2);
  background: linear-gradient(135deg, #2563eb, var(--brand-2));
  color: var(--paper);
}

.caso-resultado small { font-size: calc(var(--u) * .75); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; opacity: .8; }
.caso-resultado b { display: block; margin-top: calc(var(--u) * .4); font-family: var(--font-display); font-size: calc(var(--u) * 1.5); font-weight: 600; line-height: 1.3; }

.caso-modulos { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--u) * .5); margin-top: calc(var(--u) * 1.6); }
.caso-modulos small { width: 100%; margin-bottom: calc(var(--u) * .2); font-size: calc(var(--u) * .75); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }

.caso-modulos span {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * .4);
  padding: calc(var(--u) * .35) calc(var(--u) * .9);
  border-radius: 99px;
  background: color-mix(in srgb, var(--m) 12%, white);
  font-size: calc(var(--u) * .85);
  font-weight: 600;
  color: var(--m-ink);
}

@media (max-aspect-ratio: 1/1) {
  .casos { grid-template-columns: 1fr 1fr; }
}

/* ------------------------------------------------- tela real do produto -- */

.tela {
  display: grid;
  grid-template-columns: .82fr 1.18fr;
  gap: calc(var(--u) * 4);
  align-items: center;
}

.tela__texto { display: flex; flex-direction: column; align-items: flex-start; gap: calc(var(--u) * 2); }

.tela__pontos { display: grid; gap: calc(var(--u) * 1.2); }

.tela__pontos li { display: flex; align-items: flex-start; gap: calc(var(--u) * 1.2); }

.tela__pontos b {
  display: grid;
  place-items: center;
  flex: none;
  width: calc(var(--u) * 2.4);
  height: calc(var(--u) * 2.4);
  border-radius: 50%;
  background: linear-gradient(135deg, #7c3aed, var(--brand-2));
  font-family: var(--font-display);
  font-size: calc(var(--u) * 1.05);
  color: var(--paper);
}

.tela__pontos strong { display: block; font-family: var(--font-display); font-size: calc(var(--u) * 1.4); font-weight: 600; }
.tela__pontos span { font-size: calc(var(--u) * 1.05); line-height: 1.45; color: var(--muted); }

.tela__nota {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * .7);
  margin: 0;
  padding: calc(var(--u) * .9) calc(var(--u) * 1.3);
  border-radius: calc(var(--u) * 1);
  background: color-mix(in srgb, var(--m) 8%, white);
  font-size: calc(var(--u) * 1);
  font-weight: 600;
  color: var(--m-ink);
}

.tela__nota .ic { font-size: calc(var(--u) * 1.3); }

.tela__fig { position: relative; }

.tela__janela {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: calc(var(--u) * 1.4);
  background: var(--paper);
  box-shadow: 0 calc(var(--u) * 2) calc(var(--u) * 5) rgba(79, 70, 229, .18), 0 0 0 calc(var(--u) * .6) rgba(124, 58, 237, .06);
}

.tela__barra {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * .5);
  padding: calc(var(--u) * .8) calc(var(--u) * 1.1);
  border-bottom: 1px solid var(--line);
  background: var(--paper-2);
}

.tela__barra i { width: calc(var(--u) * .65); height: calc(var(--u) * .65); border-radius: 50%; background: #e2e8f0; }
.tela__barra span { margin-left: calc(var(--u) * .8); font-size: calc(var(--u) * .8); color: var(--muted); }

.tela__janela img { width: 100%; height: auto; max-height: calc(var(--u) * 39); object-fit: cover; object-position: top; }

.tela__marca {
  position: absolute;
  left: var(--x);
  top: var(--y);
  display: grid;
  place-items: center;
  width: calc(var(--u) * 2.4);
  height: calc(var(--u) * 2.4);
  border: calc(var(--u) * .2) solid var(--paper);
  border-radius: 50%;
  background: linear-gradient(135deg, #7c3aed, var(--brand-2));
  box-shadow: 0 0 0 calc(var(--u) * .5) rgba(124, 58, 237, .2);
  font-family: var(--font-display);
  font-size: calc(var(--u) * 1.05);
  font-weight: 700;
  color: var(--paper);
  transform: translate(-50%, -50%) scale(0);
  transition: transform .5s var(--ease);
}

.slide.is-active .tela__marca { transform: translate(-50%, -50%) scale(1); transition-delay: .8s; }

@media (max-aspect-ratio: 1/1) {
  .tela { grid-template-columns: 1fr; }
}
.tela__fig { margin-right: calc(var(--u) * 1.4); }

/* ------------------------------------------ Studio: biblioteca de propostas -- */

.tela--propostas { grid-template-columns: .78fr 1.22fr; }

.tela__viewport { height: calc(var(--u) * 34); overflow: hidden; }

.tela__janela--rola img {
  max-height: none;
  object-fit: initial;
  transform: translateY(0);
}

.slide.is-active .tela__janela--rola img { animation: rola-tela 16s ease-in-out 1.2s infinite alternate; }

@keyframes rola-tela {
  0%, 12% { transform: translateY(0); }
  88%, 100% { transform: translateY(calc(var(--u) * 34 - 100%)); }
}

.tela__selo {
  position: absolute;
  left: calc(var(--u) * -2);
  bottom: calc(var(--u) * -1.4);
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * .5);
  padding: calc(var(--u) * .8) calc(var(--u) * 1.4);
  border-radius: 99px;
  background: linear-gradient(135deg, var(--m), color-mix(in srgb, var(--m) 75%, black));
  box-shadow: 0 calc(var(--u) * .8) calc(var(--u) * 2) color-mix(in srgb, var(--m) 35%, transparent);
  font-size: calc(var(--u) * 1);
  font-weight: 600;
  color: var(--paper);
  animation: flutua 3s ease-in-out infinite;
}

.m-studio .tela__pontos b { background: linear-gradient(135deg, #35c22b, #2a9c21); }
/* a imagem cabe inteira: em vez de rolar, aproxima devagar */
.tela__viewport { height: auto; }
.slide.is-active .tela__janela--rola img { animation: none; transform: scale(1.08); transition: transform 12s ease-out .6s; }
.tela__janela--rola img { transform-origin: 30% 20%; transition: transform .6s; }

/* ------------------------------------------------------------- UpFlowz -- */

.tela--upflowz { grid-template-columns: .8fr 1.2fr; }

.upflowz {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * .8);
  padding: calc(var(--u) * .4) calc(var(--u) * 1.2) calc(var(--u) * .4) calc(var(--u) * .4);
  border-radius: 99px;
  background: #0d0620;
  font-family: var(--font-display);
  font-size: calc(var(--u) * 1.05);
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--paper);
}

.upflowz img { width: calc(var(--u) * 2.4); height: calc(var(--u) * 2.4); border-radius: 50%; object-fit: cover; }

.upflowz__passos { display: flex; flex-wrap: wrap; gap: calc(var(--u) * .4); counter-reset: passo; }

.upflowz__passos li {
  counter-increment: passo;
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * .4);
  padding: calc(var(--u) * .35) calc(var(--u) * .8) calc(var(--u) * .35) calc(var(--u) * .35);
  border: 1px solid color-mix(in srgb, var(--m) 25%, white);
  border-radius: 99px;
  background: var(--paper);
  font-size: calc(var(--u) * .85);
  font-weight: 600;
  color: var(--ink-2);
}

.upflowz__passos li::before {
  content: counter(passo);
  display: grid;
  place-items: center;
  width: calc(var(--u) * 1.4);
  height: calc(var(--u) * 1.4);
  border-radius: 50%;
  background: var(--m-ink);
  font-size: calc(var(--u) * .7);
  color: var(--paper);
}

.tela__pontos--ic b { font-size: calc(var(--u) * 1.1); }
.tela__pontos--ic strong { font-size: calc(var(--u) * 1.3); }
.tela__pontos--ic span { font-size: calc(var(--u) * 1); }

.tela__selo--ia { left: auto; right: calc(var(--u) * -1.4); bottom: calc(var(--u) * -1.4); background: linear-gradient(135deg, #7c3aed, var(--brand-2)); box-shadow: 0 calc(var(--u) * .8) calc(var(--u) * 2) rgba(124, 58, 237, .35); }

/* ----------------------------------------------------- UpFlowz: fluxos -- */

.tela--fluxo { grid-template-columns: 1.25fr .75fr; }
.tela--fluxo .tela__selo--ia { right: auto; left: calc(var(--u) * -1.4); }

.blocos { display: flex; flex-wrap: wrap; gap: calc(var(--u) * .5); }

.blocos li {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * .5);
  padding: calc(var(--u) * .5) calc(var(--u) * 1);
  border: 1px solid color-mix(in srgb, var(--m) 22%, white);
  border-radius: 99px;
  background: var(--paper);
  font-size: calc(var(--u) * .95);
  font-weight: 600;
  color: var(--ink-2);
}

.blocos .ic { font-size: calc(var(--u) * 1.15); color: var(--m-ink); }

.exemplo-fluxo {
  align-self: stretch;
  padding: calc(var(--u) * 1.4) calc(var(--u) * 1.6);
  border-radius: calc(var(--u) * 1.2);
  background: linear-gradient(135deg, #7c3aed, var(--brand-2));
  box-shadow: 0 calc(var(--u) * 1) calc(var(--u) * 2.6) rgba(124, 58, 237, .28);
  color: var(--paper);
}

.exemplo-fluxo small { font-size: calc(var(--u) * .75); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; opacity: .8; }

.exemplo-fluxo ol { display: grid; gap: calc(var(--u) * .6); margin-top: calc(var(--u) * .9); counter-reset: ef; }

.exemplo-fluxo li {
  counter-increment: ef;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * .8);
  font-family: var(--font-display);
  font-size: calc(var(--u) * 1.2);
  font-weight: 600;
}

.exemplo-fluxo li::before {
  content: counter(ef);
  display: grid;
  place-items: center;
  flex: none;
  width: calc(var(--u) * 1.8);
  height: calc(var(--u) * 1.8);
  border-radius: 50%;
  background: rgba(255, 255, 255, .2);
  font-size: calc(var(--u) * .85);
}
.tela--fluxo .title { font-size: calc(var(--u) * 3.1); }
.tela--fluxo .tela__texto { gap: calc(var(--u) * 1.7); }

/* ---------------------------------------------------- Autopilot na prática -- */

.tela--autopilot { grid-template-columns: 1.15fr .85fr; }
.tela--autopilot .tela__fig { margin-right: 0; margin-left: calc(var(--u) * 1.4); }

.modo {
  display: inline-flex;
  padding: calc(var(--u) * .35);
  border: 1px solid color-mix(in srgb, var(--m) 20%, white);
  border-radius: 99px;
  background: var(--paper);
  font-size: calc(var(--u) * .95);
  font-weight: 600;
}

.modo span,
.modo b { padding: calc(var(--u) * .4) calc(var(--u) * 1.2); border-radius: 99px; }
.modo span { color: var(--muted); }
.modo b { background: linear-gradient(135deg, #7c3aed, var(--brand-2)); color: var(--paper); box-shadow: 0 4px 12px rgba(124, 58, 237, .3); }

/* ------------------------------------------------- motor de prospecção -- */

.tela--prospeccao { grid-template-columns: .82fr 1.18fr; }
.tela--prospeccao .title { font-size: calc(var(--u) * 3.1); }
.tela--prospeccao .tela__texto { gap: calc(var(--u) * 1.6); }

.busca { display: flex; gap: calc(var(--u) * .6); }

.busca span {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * .15);
  padding: calc(var(--u) * .6) calc(var(--u) * 1.1);
  border: 1px solid var(--line);
  border-radius: calc(var(--u) * .8);
  background: var(--paper);
  font-size: calc(var(--u) * 1.05);
  font-weight: 600;
}

.busca small { font-size: calc(var(--u) * .7); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

.busca__resultado { display: flex; align-items: center; gap: calc(var(--u) * 1.2); }

.busca__resultado strong {
  font-family: var(--font-display);
  font-size: calc(var(--u) * 4.4);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--m-ink);
}

.busca__resultado span { max-width: 30ch; font-size: calc(var(--u) * 1.05); line-height: 1.45; color: var(--muted); }

.m-crm .tela__pontos b { background: linear-gradient(135deg, #2563eb, #0000ef); }
.m-crm .tela__selo { background: linear-gradient(135deg, #2563eb, #0000ef); box-shadow: 0 calc(var(--u) * .8) calc(var(--u) * 2) rgba(0, 0, 239, .3); }

/* ---------------------------------------------- propriedades rurais -- */

.tela--rural { grid-template-columns: 1.2fr .8fr; }
.tela--rural .tela__fig { margin-right: 0; margin-left: calc(var(--u) * 1.4); }
.tela--rural .title { font-size: calc(var(--u) * 3.1); }
.tela--rural .tela__texto { gap: calc(var(--u) * 1.6); }
.tela__selo--rural { background: linear-gradient(135deg, #16a34a, #15803d) !important; box-shadow: 0 calc(var(--u) * .8) calc(var(--u) * 2) rgba(22, 163, 74, .3) !important; }

/* -------------------------------------------- BI: inteligência geográfica -- */

.tela--geo { grid-template-columns: .78fr 1.22fr; }
.tela--geo .title { font-size: calc(var(--u) * 3.2); }
.m-bi .tela__pontos b { background: linear-gradient(135deg, #34d399, #059669); }
.tela__selo--geo { background: linear-gradient(135deg, #34d399, #059669) !important; box-shadow: 0 calc(var(--u) * .8) calc(var(--u) * 2) rgba(5, 150, 105, .3) !important; }

/* ---------------------------------------------- BI: ranking de performance -- */

.tela--ranking { grid-template-columns: 1.3fr .7fr; }
.tela--ranking .tela__fig { margin-right: 0; margin-left: calc(var(--u) * 1.4); }
.tela--ranking .tela__texto { gap: calc(var(--u) * 1.6); }

.rankings { display: flex; flex-wrap: wrap; gap: calc(var(--u) * .45); }

.rankings li {
  padding: calc(var(--u) * .4) calc(var(--u) * .9);
  border-radius: 99px;
  background: color-mix(in srgb, var(--m) 16%, white);
  font-size: calc(var(--u) * .88);
  font-weight: 600;
  color: var(--m-ink);
}

.rankings li:first-child { background: linear-gradient(135deg, #34d399, #059669); color: var(--paper); }

.tela__selo--ouro { background: linear-gradient(135deg, #f59e0b, #d97706) !important; box-shadow: 0 calc(var(--u) * .8) calc(var(--u) * 2) rgba(217, 119, 6, .35) !important; }

/* --------------------------------------------- níveis de atuação da IA -- */

.stack--niveis { gap: calc(var(--u) * 2); }

.niveis {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: end;
  gap: calc(var(--u) * 1.1);
}

.niveis li {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--u) * .7);
  min-height: calc(var(--u) * (15 + var(--n) * 2.6));
  padding: calc(var(--u) * 1.6);
  border-radius: calc(var(--u) * 1.4);
  background: linear-gradient(160deg,
    color-mix(in srgb, #7c3aed calc(var(--n) * 18%), #eef2ff),
    color-mix(in srgb, #4338ca calc(var(--n) * 18%), #e0e7ff));
  box-shadow: 0 calc(var(--u) * .8) calc(var(--u) * 2.4) rgba(79, 70, 229, calc(.06 + var(--n) * .05));
  color: var(--ink);
  overflow: hidden;
}

.niveis li:nth-child(n+3) { color: var(--paper); }

.niveis li::after {
  content: '';
  position: absolute;
  right: calc(var(--u) * -3);
  top: calc(var(--u) * -3);
  width: calc(var(--u) * 9);
  height: calc(var(--u) * 9);
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
}

.niveis__n {
  font-size: calc(var(--u) * .75);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .75;
}

.niveis__ic {
  display: grid;
  place-items: center;
  width: calc(var(--u) * 3.2);
  height: calc(var(--u) * 3.2);
  margin: calc(var(--u) * .4) 0 auto;
  border-radius: calc(var(--u) * .9);
  background: rgba(255, 255, 255, .85);
  color: #4338ca;
  font-size: calc(var(--u) * 1.5);
}

.niveis b { font-family: var(--font-display); font-size: calc(var(--u) * 1.6); font-weight: 700; line-height: 1.15; letter-spacing: -.015em; }
.niveis p { margin: 0; font-size: calc(var(--u) * .98); line-height: 1.45; opacity: .88; }

.niveis__crm {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 1.6);
  padding: calc(var(--u) * 1.1) calc(var(--u) * 1.6);
  border: 1px solid rgba(255, 255, 255, .9);
  border-left: calc(var(--u) * .4) solid #0000ef;
  border-radius: calc(var(--u) * 1.2);
  background: var(--glass);
  box-shadow: 0 calc(var(--u) * .6) calc(var(--u) * 2) rgba(15, 23, 42, .06);
}

.niveis__crm-rotulo {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * .6);
  flex: none;
  font-family: var(--font-display);
  font-size: calc(var(--u) * 1.2);
  font-weight: 700;
  color: #0000ef;
}

.niveis__crm-rotulo .ic { font-size: calc(var(--u) * 1.5); }

.niveis__crm ul { display: flex; flex-wrap: wrap; gap: calc(var(--u) * .5); }

.niveis__crm li {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * .4);
  padding: calc(var(--u) * .45) calc(var(--u) * 1);
  border-radius: 99px;
  background: color-mix(in srgb, #0000ef 8%, white);
  font-size: calc(var(--u) * .95);
  font-weight: 600;
  color: #0000ef;
}

.niveis__crm li::before { content: '\2713'; font-weight: 700; }

@media (max-aspect-ratio: 1/1) {
  .niveis { grid-template-columns: 1fr 1fr; }
  .niveis__crm { flex-direction: column; align-items: flex-start; }
}

/* -------------------------------------------------------- portais de venda -- */

.tela--portais { grid-template-columns: .9fr 1.1fr; }
.tela--portais .title { font-size: calc(var(--u) * 3.1); }
.tela--portais .tela__texto { gap: calc(var(--u) * 1.6); }

.portais { display: grid; grid-template-columns: repeat(5, 1fr); gap: calc(var(--u) * .6); align-self: stretch; }

.portais li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u) * .35);
  padding: calc(var(--u) * .7) calc(var(--u) * .3);
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: calc(var(--u) * .9);
  background: var(--glass);
  box-shadow: 0 2px 8px rgba(15, 23, 42, .05);
}

.portais img { width: calc(var(--u) * 2.8); height: calc(var(--u) * 2.8); border-radius: calc(var(--u) * .6); object-fit: contain; background: var(--paper); }
.portais span { font-size: calc(var(--u) * .72); font-weight: 600; line-height: 1.2; text-align: center; color: var(--ink-2); }

/* ------------------------------------------------------------- Meta Ads -- */

.tela--meta { grid-template-columns: 1fr .95fr; }
.tela--meta .tela__texto { gap: calc(var(--u) * 1.7); }
.tela--meta .title { font-size: calc(var(--u) * 3.2); }
.tela--meta .tela__janela img { max-height: calc(var(--u) * 40); }

.meta-selo {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * .6);
  padding: calc(var(--u) * .5) calc(var(--u) * 1.2);
  border-radius: 99px;
  background: linear-gradient(135deg, #0668e1, #0081fb);
  box-shadow: 0 4px 14px rgba(6, 104, 225, .3);
  font-size: calc(var(--u) * .95);
  font-weight: 600;
  color: var(--paper);
}

.meta-selo .ic { font-size: calc(var(--u) * 1.5); stroke-width: 2.4; }

.meta-frentes { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 1.2); align-self: stretch; }

.meta-frente {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * .6);
  padding: calc(var(--u) * 1.6);
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: calc(var(--u) * 1.3);
  background: var(--glass);
  box-shadow: 0 calc(var(--u) * .6) calc(var(--u) * 2) rgba(15, 23, 42, .06);
}

.meta-frente__ic {
  display: grid;
  place-items: center;
  width: calc(var(--u) * 3);
  height: calc(var(--u) * 3);
  margin-bottom: calc(var(--u) * .4);
  border-radius: calc(var(--u) * .8);
  background: linear-gradient(135deg, #0668e1, #0081fb);
  color: var(--paper);
  font-size: calc(var(--u) * 1.4);
}

.meta-frente b { font-family: var(--font-display); font-size: calc(var(--u) * 1.45); font-weight: 600; }
.meta-frente p { margin: 0; font-size: calc(var(--u) * 1.02); line-height: 1.5; color: var(--muted); }

.meta-extra { display: flex; flex-wrap: wrap; gap: calc(var(--u) * .5); }

.meta-extra li {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * .4);
  padding: calc(var(--u) * .45) calc(var(--u) * 1);
  border-radius: 99px;
  background: color-mix(in srgb, #0668e1 9%, white);
  font-size: calc(var(--u) * .92);
  font-weight: 600;
  color: #0556b8;
}

.meta-extra li::before { content: '\2713'; font-weight: 700; }

.tela__selo--meta { left: auto; right: calc(var(--u) * -1.4); background: linear-gradient(135deg, #10b981, #059669) !important; box-shadow: 0 calc(var(--u) * .8) calc(var(--u) * 2) rgba(5, 150, 105, .3) !important; }

@media (max-aspect-ratio: 1/1) {
  .meta-frentes { grid-template-columns: 1fr; }
}

/* ------------------------------------------------ Conversas: canais conectados -- */

.tela--canais { grid-template-columns: .85fr 1.15fr; }
.tela--canais .title { font-size: calc(var(--u) * 3.1); }
.tela--canais .tela__texto { gap: calc(var(--u) * 1.7); }

.canais-cont { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(var(--u) * .7); align-self: stretch; }

.canais-cont li {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * .2);
  padding: calc(var(--u) * 1) calc(var(--u) * 1.1);
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: calc(var(--u) * 1);
  background: var(--glass);
  box-shadow: 0 2px 8px rgba(15, 23, 42, .05);
}

.canais-cont .ic { font-size: calc(var(--u) * 1.4); color: var(--m-ink); }
.canais-cont strong { margin-top: calc(var(--u) * .3); font-family: var(--font-display); font-size: calc(var(--u) * 2.4); font-weight: 700; line-height: 1; color: var(--m-ink); }
.canais-cont span { font-size: calc(var(--u) * .9); font-weight: 600; color: var(--ink-2); }

.m-conv .tela__pontos b { background: linear-gradient(135deg, #0ea5e9, #0284c7); }
.tela__selo--canais { left: auto; right: calc(var(--u) * -1.4); background: linear-gradient(135deg, #0ea5e9, #0284c7) !important; box-shadow: 0 calc(var(--u) * .8) calc(var(--u) * 2) rgba(2, 132, 199, .3) !important; }

/* logos de clientes (slide de autoridade): caixas iguais, logo contido */
.marcas--logos { align-items: center; }
.marcas--logos ul { display: grid; grid-template-columns: repeat(7, 1fr); gap: calc(var(--u) * .9); flex: 1; }

.marcas--logos li {
  display: grid;
  place-items: center;
  height: calc(var(--u) * 7.5);
  padding: calc(var(--u) * 1.3) calc(var(--u) * 1.4);
  border: 1px solid var(--line);
  border-radius: calc(var(--u) * 1.2);
  background: var(--paper);
  box-shadow: 0 2px 10px rgba(15, 23, 42, .04);
}

.marcas--logos img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
/* equilíbrio óptico: logos compactos menores, largos com mais largura */
.marcas--logos .logo--compacto img { max-height: 76%; }
.marcas--logos .logo--medio img { max-height: 72%; }
.marcas--logos .logo--largo { padding-left: calc(var(--u) * .7); padding-right: calc(var(--u) * .7); }
/* canais sem contagem: ícone maior */
.canais-cont li { align-items: flex-start; gap: calc(var(--u) * .8); padding: calc(var(--u) * 1.2); }
.canais-cont .ic { font-size: calc(var(--u) * 2.4); }
.canais-cont span { font-size: calc(var(--u) * 1.05); }
/* centralização dos logos: flex + alturas fixas (porcentagem não resolve dentro do grid) */
.marcas--logos li { display: flex; align-items: center; justify-content: center; }
.marcas--logos img { max-height: calc(var(--u) * 4.6); max-width: 100%; }
.marcas--logos .logo--compacto img { max-height: calc(var(--u) * 4.3); }
.marcas--logos .logo--medio img { max-height: calc(var(--u) * 3.8); }

/* -------------------------------------------------------- tela de acesso -- */

.acesso { display: none; }

html.is-locked .acesso {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  padding: 24px;
  background:
    radial-gradient(60vw 45vw at 8% -10%, hsl(214 100% 88%), transparent 62%),
    radial-gradient(50vw 40vw at 100% 0%, hsl(238 92% 92%), transparent 58%),
    radial-gradient(50vw 40vw at 60% 110%, hsl(206 100% 93%), transparent 60%),
    linear-gradient(180deg, #eef4ff, #ffffff 70%);
  transition: opacity .45s var(--ease);
}

html.is-locked .acesso.is-ok { opacity: 0; }

/* enquanto travado, nada do deck aparece */
html.is-locked .topbar,
html.is-locked .deck,
html.is-locked .navbar,
html.is-locked .progress { visibility: hidden; }

.acesso__cartao {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(420px, 100%);
  padding: 44px 40px 36px;
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: 24px;
  background: rgba(255, 255, 255, .8);
  box-shadow: 0 30px 80px rgba(7, 71, 214, .14), 0 2px 8px rgba(15, 23, 42, .05);
  backdrop-filter: blur(14px);
  text-align: center;
}

.acesso.is-erro .acesso__cartao { animation: treme .45s; }

@keyframes treme {
  20%, 60% { transform: translateX(-8px); }
  40%, 80% { transform: translateX(8px); }
}

.acesso__logo { height: 38px; width: auto; }

.acesso__eco {
  margin-top: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--muted);
}

.acesso h1 {
  margin: 28px 0 6px;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -.02em;
}

.acesso__cartao > p { margin: 0 0 24px; font-size: 14px; color: var(--muted); }

.acesso form { display: flex; flex-direction: column; gap: 10px; width: 100%; text-align: left; }

.acesso__campo span { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: var(--ink-2); }

.acesso input {
  width: 100%;
  height: 48px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  font: inherit;
  font-size: 16px;
  color: var(--ink);
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}

.acesso input:focus { border-color: var(--brand); box-shadow: 0 0 0 4px rgba(7, 71, 214, .12); }
.acesso.is-erro input { border-color: var(--dor); box-shadow: 0 0 0 4px rgba(225, 29, 72, .12); }

.acesso__erro { min-height: 18px; margin: 0; font-size: 13px; font-weight: 500; color: var(--dor); }

.acesso button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(90deg, #2563eb, #4f46e5);
  box-shadow: 0 8px 20px rgba(79, 70, 229, .3);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--paper);
  cursor: pointer;
  transition: transform .2s, box-shadow .2s;
}

.acesso button svg { width: 18px; height: 18px; transition: transform .25s var(--ease); }
.acesso button:hover { box-shadow: 0 10px 26px rgba(79, 70, 229, .4); }
.acesso button:hover svg { transform: translateX(3px); }

.acesso__rodape { margin: 0; font-size: 12px; color: var(--muted); }