/* ============================================================
   dream factory / ti — slide deck
   tokens copiados de df.trestech.com.br/styles.css:
   outfit + azul #0099ef / gradiente #00c2ff→#0047ff + espectro por marca.
   ============================================================ */

:root{
  --paper:#fff;
  --paper-2:#f3f5f9;
  --ink:#0d0e12;
  --ink-2:#5d6c7b;
  --line:rgba(13,14,18,.14);
  --line-2:rgba(13,14,18,.07);

  --blue:#0099ef;
  --blue-2:#0047ff;
  --blue-3:#00c2ff;
  --grad:linear-gradient(19deg,#00c2ff,#0047ff);
  --night:#06070f;

  --band:#0d0e12;
  --band-ink:#fff;
  --band-muted:rgba(255,255,255,.6);
  --band-grad:linear-gradient(19deg,#00c2ff,#7fa0ff);

  /* cores dos gráficos por tema (validadas p/ daltonismo e contraste). claro = tons mais fundos */
  --chart-1:#0047ff;
  --chart-2:#e03e00;
  --chart-3:#a000c8;

  --pad:clamp(16px,6vw,110px);
  --ease:cubic-bezier(.22,1,.36,1);
}
/* tema escuro do site: tecla t */
:root[data-theme="dark"]{
  --paper:#0b0c10;
  --paper-2:#14161d;
  --ink:#eef1f6;
  --ink-2:#98a2b0;
  --line:rgba(238,241,246,.16);
  --line-2:rgba(238,241,246,.08);
  --grad:linear-gradient(19deg,#5fd8ff,#4d7bff);
  --band:#f3f5f9;
  --band-ink:#0d0e12;
  --band-muted:rgba(13,14,18,.6);
  --band-grad:linear-gradient(19deg,#0088d8,#2f5ae0);
  --chart-1:#0099ef;
  --chart-2:#ff4d00;
  --chart-3:#b100dd;
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden}
body{
  background:var(--paper);color:var(--ink);
  font-family:'Outfit',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-weight:400;font-size:16px;line-height:1.5;
  text-transform:lowercase;-webkit-font-smoothing:antialiased;
  transition:background-color .4s var(--ease),color .4s var(--ease);
}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;text-transform:inherit}
ul,ol{list-style:none}
::selection{background:var(--blue);color:#fff}

h1,h2,h3{font-weight:600;line-height:1;letter-spacing:-.035em}
.big{font-size:clamp(34px,5.4vw,84px);text-wrap:balance}

/* texto com o gradiente da marca (ver nota no css do site sobre background-clip) */
.g{color:var(--blue)}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .g{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
}

/* máscara por palavra (gerada pelo js em [data-split]) */
.w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.14em;margin-bottom:-.14em}
.w > i{display:block;font-style:normal;will-change:transform}

/* ---------- logo ---------- */
.logo{display:inline-flex;align-items:center;gap:10px;font-size:22px;letter-spacing:-.04em;line-height:1}
.logo img{width:28px;height:28px;display:block;transition:filter .4s}
body.on-dark .logo img{filter:brightness(0) invert(1)}
.logo span{font-weight:300}
.logo b{font-weight:700}
.logo em{font-style:normal;font-weight:300;color:var(--chrome-2)}

/* ---------- tag editorial ---------- */
.tag{
  display:inline-block;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--blue);padding-top:10px;border-top:2px solid var(--blue);margin-bottom:28px;
  align-self:flex-start;
}
.tag--light{color:#fff;border-top-color:#fff}

/* ---------- botões ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:15px 28px;border-radius:999px;border:1.5px solid var(--ink);
  font-size:16px;font-weight:600;letter-spacing:-.01em;
  position:relative;overflow:hidden;isolation:isolate;
}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--ink);
  transform:translateY(101%);transition:transform .5s var(--ease);
}
.btn:hover{color:var(--paper)}
.btn:hover::before{transform:translateY(0)}
.btn b{font-weight:600;transition:transform .4s var(--ease)}
.btn:hover b{transform:translateX(4px)}
.btn--solid{background:var(--ink);color:var(--paper)}
.btn--solid::before{background:var(--blue)}
.btn--solid:hover{border-color:var(--blue);color:#fff}
.btn--light{border-color:#fff;color:#fff}
.btn--light::before{background:#fff}
.btn--light:hover{color:#0d0e12}
.btn--ghost{border-color:rgba(255,255,255,.4);color:rgba(255,255,255,.75)}
.btn--ghost::before{background:#fff}
.btn--ghost:hover{color:#0d0e12;border-color:#fff}
.btns{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* ---------- chrome do deck ----------
   --chrome troca para branco nos slides escuros (placar e contato) */
body{--chrome:var(--ink);--chrome-2:var(--ink-2)}
body.on-dark{--chrome:#fff;--chrome-2:rgba(255,255,255,.6)}
#progress{position:fixed;top:0;left:0;height:3px;width:100%;background:var(--grad);transform-origin:0 50%;transform:scaleX(0);z-index:50}
.top{position:fixed;top:0;left:0;right:0;z-index:40;display:flex;align-items:center;justify-content:space-between;padding:22px var(--pad);color:var(--chrome);transition:color .4s var(--ease)}
.hint{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--chrome-2)}
#hud{position:fixed;bottom:22px;right:var(--pad);z-index:40;display:flex;align-items:center;gap:14px;color:var(--chrome);transition:color .4s var(--ease)}
#counter{font-variant-numeric:tabular-nums;font-size:14px;font-weight:600;letter-spacing:.08em;color:var(--chrome-2)}
#counter b{color:var(--chrome)}
.navbtn{width:44px;height:44px;border:1px solid currentColor;border-radius:50%;display:grid;place-items:center;opacity:.55;transition:opacity .3s,background .3s,color .3s,border-color .3s}
.navbtn:hover{opacity:1;background:var(--blue);border-color:var(--blue);color:#fff}

/* ---------- slides ---------- */
#deck{position:fixed;inset:0}
.slide{
  position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;
  padding:110px var(--pad) 90px;background:var(--paper);visibility:hidden;overflow:hidden;
}
.lead{margin-top:24px;max-width:48ch;font-size:clamp(15px,1.4vw,19px);color:var(--ink-2)}
.r{opacity:0}

/* capa: a marca recortada em gradiente, como o "planeta" do hero do site */
.cover__title{font-size:clamp(40px,7vw,116px);font-weight:600;line-height:.98;letter-spacing:-.045em;max-width:12ch;position:relative;z-index:1}
.kicker{font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);margin-bottom:24px}
.orb{
  position:absolute;right:2vw;top:50%;width:min(48vw,620px);aspect-ratio:1;translate:0 -50%;
  background:radial-gradient(circle at 34% 30%,#7fdcff,#00a6fe 38%,#0047ff 72%,#2f00e9 100%);
  -webkit-mask:url("https://df.trestech.com.br/img/logo1.png") center/contain no-repeat;
  mask:url("https://df.trestech.com.br/img/logo1.png") center/contain no-repeat;
}
.cover .lead{position:relative;z-index:1;margin-top:clamp(30px,4vw,54px);padding-top:22px}

/* placar: faixa de contraste do site */
.score{background:var(--band);color:var(--band-ink)}
.score .tag{color:var(--band-ink);border-top-color:var(--band-ink)}
.score__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,3vw,40px);margin-top:clamp(40px,6vw,80px)}
.score__grid > div{border-top:1px solid var(--band-muted);padding-top:22px}
.score__grid b{
  display:block;font-size:clamp(40px,5.6vw,92px);font-weight:700;line-height:1;letter-spacing:-.05em;
  font-variant-numeric:tabular-nums;white-space:nowrap;
  background:var(--band-grad);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.score__grid span{display:block;margin-top:12px;font-size:15px;color:var(--band-muted)}

/* encerramento: o bloco azul do cta do site */
.cta{background:var(--blue-2);color:#fff}
.cta .big{font-size:clamp(40px,6.6vw,108px)}
/* encerramento centralizado: título + e-mail da ti + reiniciar */
.cta{align-items:center;text-align:center}
.cta .tag{align-self:center}
.mail{margin-top:clamp(28px,4.5vw,56px);padding:14px 4px;border-bottom:1px solid rgba(255,255,255,.4);color:#fff;text-decoration:none;
  font-size:clamp(22px,2.6vw,40px);font-weight:500;letter-spacing:-.02em;text-transform:none;transition:border-color .4s}
.mail:hover{border-color:#fff}
.cta .btns{margin-top:clamp(30px,4vw,48px);justify-content:center}

/* ---------- live preview ---------- */
#live{position:fixed;inset:0;z-index:100;visibility:hidden}
.backdrop{position:absolute;inset:0;background:rgba(6,7,15,.55);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:0}
.win{
  position:absolute;left:50%;top:50%;translate:-50% -50%;
  width:min(1480px,94vw);height:88vh;border-radius:18px;overflow:hidden;
  background:var(--paper);border:1px solid var(--line);display:flex;flex-direction:column;
  box-shadow:0 60px 140px -30px rgba(6,7,15,.6),0 0 0 1px rgba(255,255,255,.06);
  transition:width .5s var(--ease),height .5s var(--ease),border-radius .5s var(--ease);
}
.win.max{width:100vw;height:100vh;border-radius:0}
.win__bar{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--line-2);background:var(--paper-2)}
.win__bar .d{width:12px;height:12px;border-radius:50%;cursor:pointer;transition:filter .2s}
.win__bar .d:hover{filter:brightness(1.2)}
.d.r1{background:#ff5f57}.d.y1{background:#febc2e}.d.g1{background:#28c840}
.addr{flex:1;margin:0 12px;padding:8px 16px;border-radius:999px;background:var(--paper);border:1px solid var(--line-2);
  font-size:13px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:none}
.addr::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--blue);margin-right:10px;vertical-align:middle}
.act{font-size:13px;font-weight:600;padding:7px 14px;border-radius:999px;color:var(--ink-2);transition:background .3s,color .3s}
.act:hover{background:var(--ink);color:var(--paper)}
.frame{flex:1;position:relative;background:#fff}
.frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.loading{position:absolute;inset:0;display:flex;flex-direction:column;gap:22px;align-items:center;justify-content:center;background:var(--paper);transition:opacity .4s}
.loading img{width:64px;height:64px;animation:heartbeat 1.1s ease-out infinite}
.loading.done{opacity:0;pointer-events:none}
/* painel (conteúdo próprio no lugar do iframe) */
#live.is-panel .frame > iframe,#live.is-panel .frame > .loading,#live.is-panel [data-act="reload"],#live.is-panel:not(.has-url) [data-act="tab"]{display:none}
/* tudo dimensionado pela altura da janela (88vh) para caber inteiro em qualquer tela/projetor */
.panel{display:none;position:absolute;inset:0;background:var(--paper);grid-template-columns:1fr 1fr;align-items:center;align-content:center;
  gap:clamp(24px,4vw,72px);padding:clamp(18px,4vh,56px) clamp(24px,5vw,80px);overflow:auto}
.panel.on{display:grid}
.panel .big{font-size:clamp(26px,min(3.4vw,6vh),56px)}
.panel .tag{margin-bottom:clamp(12px,2.4vh,24px)}
.pie{position:relative;width:min(100%,52vh);aspect-ratio:1;justify-self:center}
.pie svg{width:100%;height:100%;overflow:visible}
.pie circle{fill:none;stroke-width:26;transition:opacity .3s}
.pie text{fill:#fff;font-size:9px;font-weight:700;letter-spacing:-.02em;text-anchor:middle;dominant-baseline:central;pointer-events:none;transition:opacity .3s}
.pie__track{stroke:var(--line-2)}
.pie__center{position:absolute;inset:0;display:grid;place-content:center;text-align:center;pointer-events:none}
.pie__center b{font-size:clamp(36px,min(5vw,9vh),88px);font-weight:700;letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums}
/* legenda do número fica abaixo do gráfico: dentro do furo ela batia no anel durante a animação */
.pie__center span{position:absolute;left:0;right:0;top:100%;margin-top:clamp(10px,2.4vh,24px);font-size:15px;color:var(--ink-2)}
.legend{margin-top:clamp(16px,3.5vh,36px);border-top:1px solid var(--line)}
.legend li{display:grid;grid-template-columns:12px 1fr auto;gap:14px;align-items:center;padding:clamp(8px,1.8vh,14px) 0;border-bottom:1px solid var(--line);
  font-size:clamp(14px,min(1.3vw,2.4vh),19px);transition:opacity .3s}
.legend li i{width:12px;height:12px;border-radius:4px}
.legend li b{font-weight:700;font-variant-numeric:tabular-nums}
.legend li small{font-size:.8em;font-weight:500;color:var(--ink-2)}
.panel .dim{opacity:.25}

/* painel de plataformas: cards à esquerda, descritivo à direita. --ph = altura do print (presa à altura da tela) */
.panel--list{grid-template-columns:minmax(0,1fr) minmax(240px,.42fr);gap:clamp(24px,4vw,72px);--ph:clamp(80px,16vh,230px)}
.plats__main{display:grid;gap:clamp(12px,2.6vh,30px);min-width:0}
.plats{display:grid;gap:clamp(12px,2.6vh,28px)}
.plats__head{display:flex;gap:10px;margin-bottom:clamp(8px,1.4vh,14px);font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.plats__head span{color:var(--blue)}
/* 3 colunas que nunca passam do tamanho do print, mas encolhem se faltar largura */
.plats ul{display:grid;grid-template-columns:repeat(3,minmax(0,calc(var(--ph) * 2.2)));gap:clamp(14px,1.8vw,32px)}
.plat{display:flex;flex-direction:column;gap:clamp(6px,1vh,10px);cursor:pointer;transition:opacity .4s var(--ease)}
.plat img{display:block;width:100%;aspect-ratio:2.2;object-fit:cover;object-position:top;border-radius:12px;border:1px solid var(--line);
  box-shadow:0 18px 40px -20px rgba(6,7,15,.45);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.plat:hover img,.plat.is-on img{transform:translateY(-4px);box-shadow:0 26px 50px -20px rgba(6,7,15,.55)}
.plat__name b{display:block;font-size:clamp(15px,min(1.4vw,2.6vh),22px);font-weight:600;letter-spacing:-.03em;line-height:1.1}
.plat.is-on .plat__name b{color:var(--blue)}
.plat__desc{display:none} /* o texto aparece no painel ao lado */
/* com um card selecionado pelo passador, os outros recuam */
.has-sel .plat:not(.is-on) > *{opacity:.35} /* nos filhos: a animação de entrada fixa opacity inline no .plat */

.plat-info{align-self:center;border-left:1px solid var(--line);padding-left:clamp(20px,3vw,48px);display:grid;gap:clamp(18px,4vh,40px)}
.plat-info .tag{margin-bottom:clamp(12px,2.4vh,22px)}
.plat-info h3{font-size:clamp(26px,min(3vw,5.4vh),52px);font-weight:600;letter-spacing:-.04em;line-height:1}
.plat-info p{margin-top:clamp(12px,2.2vh,20px);font-size:clamp(15px,min(1.3vw,2.4vh),21px);line-height:1.45;color:var(--ink-2)}
.plat-info__dots{display:flex;gap:8px}
.plat-info__dots li{width:22px;height:4px;border-radius:2px;background:var(--line);transition:background .4s,width .4s var(--ease)}
.plat-info__dots li.on{width:40px;background:var(--blue)}

/* ---------- fluxo: fundo chapado do tema (branco no claro, preto no escuro), como o resto do deck ---------- */
.stage{--sw:clamp(270px,30vw,520px);--vizh:clamp(150px,29vh,330px);--gap:clamp(40px,6vw,120px);--iw:min(34rem,40vw)}
.flow__head{position:relative;z-index:1}
.stage .flow__head .big{font-size:clamp(30px,4.4vw,72px)}
/* número gigante da etapa, em gradiente, no lugar da próxima estação (escondida); troca a cada passo */
.flow__big{position:absolute;right:calc(var(--pad) - .08em);padding-right:.08em;top:50%; /* padding: o letter-spacing negativo cortava o último dígito no clip do gradiente */margin-top:-.58em; /* não usar `translate`: o gsap o absorve ao animar yPercent */font-weight:700;letter-spacing:-.06em;line-height:1;
  font-size:min(520px,calc((50vw - var(--sw) / 2 - var(--pad) - 24px) / 1.1)); /* cabe entre a estação ativa (centro) e a margem; 2 dígitos ≈ 1.1em */
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;pointer-events:none}

.flow{position:relative;margin:clamp(20px,4vh,48px) calc(var(--pad) * -1) 0}
.flow__track{position:relative;display:flex;gap:var(--gap);width:max-content;padding:0 40px;will-change:transform}
/* traço que liga a etapa anterior à nova só durante a passada (main.js anima left/width) */
.flow__line{position:absolute;left:0;top:calc(var(--vizh) + 25px);height:2px;width:0;border-radius:2px;background:var(--grad);box-shadow:0 0 14px rgba(0,153,239,.6);pointer-events:none}

/* texto de abertura: mora na trilha, então a primeira passada o leva para a esquerda junto com a câmera.
   a margem direita deixa a 1ª estação espiando 120px na borda da tela */
.flow__intro{flex:none;width:var(--iw);height:var(--vizh);margin-right:calc(100vw - 120px - var(--pad) - var(--iw) - var(--gap) - 40px);
  display:flex;flex-direction:column;justify-content:center;gap:clamp(12px,2vh,20px)}
.flow__intro p{font-size:clamp(17px,min(1.6vw,3vh),26px);line-height:1.45;color:var(--ink-2)}
.flow__intro p b{color:var(--ink);font-weight:600}
.flow__intro small{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--blue)}

.station{width:var(--sw);display:grid;grid-template-rows:var(--vizh) 52px auto;opacity:.22;transform:scale(.9);transform-origin:50% 40%;
  transition:opacity .8s var(--ease),transform .8s var(--ease)}
.station.is-done{opacity:.45}
.station.is-on{opacity:1;transform:none}
.station.is-hid{opacity:0;pointer-events:none}
.node{justify-self:center;align-self:center;position:relative;width:18px;height:18px;border-radius:50%;border:2px solid var(--line);background:var(--paper);transition:background .4s,border-color .4s}
.station:not(.is-on) .node{opacity:0} /* sem linha-guia: só a bolinha da etapa chamada aparece */
.is-on .node{background:var(--blue);border-color:var(--blue)}
.is-on .node{box-shadow:0 0 0 6px rgba(0,153,239,.2),0 0 20px rgba(0,153,239,.7)}
.node i{position:absolute;inset:-2px;border-radius:50%;border:2px solid var(--blue);opacity:0}
.station__txt{text-align:center;padding-top:6px}
.station__n{font-size:12px;font-weight:600;letter-spacing:.2em;color:var(--blue)}
.station h3{margin-top:8px;font-size:clamp(22px,min(2.4vw,4.4vh),40px);font-weight:600;letter-spacing:-.035em}
/* descritivo: mais largo que a estação (avança sobre o vão) e balanceado, para não quebrar em linhas curtas */
.station p{margin:10px calc(var(--gap) * -.45) 0;font-size:clamp(16px,min(1.35vw,2.5vh),22px);line-height:1.4;color:var(--ink-2);text-wrap:balance}

/* cartão de cada ilustração */
.viz{position:relative;height:100%;border-radius:22px;overflow:hidden;background:var(--paper-2);border:1px solid var(--line-2);
  box-shadow:0 30px 60px -34px rgba(6,7,15,.45)}

/* 1 ideia */
.spark{position:absolute;left:50%;top:52%;width:22%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#7fdcff,#00a6fe 38%,#0047ff 72%,#2f00e9 100%);box-shadow:0 0 60px rgba(0,153,239,.8)}
.ripple{position:absolute;left:50%;top:52%;width:22%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;border:1.5px solid var(--blue);opacity:0}
.bubble{position:absolute;padding:9px 16px;border-radius:16px;background:var(--paper);color:var(--ink);border:1px solid var(--line-2);font-size:clamp(12px,1vw,15px);font-weight:600;white-space:nowrap;
  box-shadow:0 10px 30px rgba(0,0,0,.35)}
.bubble.b1{left:8%;top:12%;border-bottom-left-radius:4px}
.bubble.b2{right:7%;bottom:12%;border-bottom-right-radius:4px;background:var(--blue);border-color:var(--blue);color:#fff}

/* 2 papel */
.viz--paper{display:grid;place-items:center}
.sheet{width:84%;height:80%;rotate:-2.5deg;border-radius:4px;padding:3%;
  background:repeating-linear-gradient(#f7f5ee 0 21px,#e3e8f2 21px 22px);box-shadow:0 18px 40px rgba(6,7,15,.25)}
.sheet svg{width:100%;height:100%}
.sheet path{stroke:#1d3a8a;stroke-width:2.4}
.postit{position:absolute;right:6%;top:8%;rotate:6deg;padding:10px 14px;background:#ffd84d;color:#3b3000;font-size:clamp(11px,.95vw,14px);font-weight:600;
  box-shadow:0 8px 18px rgba(0,0,0,.35)}

/* 3 banco de código */
.viz--bank{padding:7% 7% 0;display:flex;flex-direction:column;gap:6%}
.search{display:flex;align-items:center;gap:2px;padding:10px 16px;border-radius:999px;background:var(--paper);border:1px solid var(--line);
  font-size:clamp(12px,1vw,15px);color:var(--ink);white-space:nowrap;overflow:hidden}
.typed{display:inline-block;overflow:hidden;vertical-align:bottom}
.caret{width:2px;height:1.1em;background:var(--blue);animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.repos{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.repos li{padding:8px 12px;border-radius:10px;background:var(--paper);border:1px solid var(--line-2);font-size:clamp(11px,.95vw,14px);
  color:var(--ink-2);display:flex;white-space:nowrap;transition:background .4s,border-color .4s,color .4s}
.repos li::before{content:"{ }";color:var(--ink-2);opacity:.6;margin-right:8px;font-family:ui-monospace,Consolas,monospace}
.repos li.hit{background:rgba(0,183,139,.14);border-color:#00b78b;color:var(--ink)}
.repos li.hit::after{content:"✓";margin-left:auto;font-weight:700;color:#00b78b}
.scan{position:absolute;left:0;right:0;top:0;height:30%;background:linear-gradient(transparent,rgba(0,194,255,.28),transparent);opacity:0;pointer-events:none}

/* 4 editor */
.viz--code{background:#0d1117;display:flex;flex-direction:column}
.ed__bar{display:flex;align-items:center;gap:6px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,.08);font-size:12px;color:rgba(255,255,255,.55);text-transform:none}
.ed__bar i{width:9px;height:9px;border-radius:50%;background:#ff5f57}
.ed__bar i:nth-child(2){background:#febc2e}
.ed__bar i:nth-child(3){background:#28c840}
.ed__bar span{margin-left:10px}
.ed{flex:1;margin:0;padding:6% 7%;font-family:ui-monospace,"Cascadia Code",Consolas,monospace;font-size:clamp(10px,min(.95vw,1.8vh),15px);line-height:1.75;
  color:#c9d1d9;text-transform:none;overflow:hidden;white-space:normal}
.ed .ln{display:block;width:max-content;white-space:pre} /* pre só na linha: as quebras do html não viram linhas extras */
.ed b{font-weight:400}
.ed .k{color:#ff7b9c}
.ed .s{color:#7ee787}
.ed .f{color:#79c0ff}

/* 5 mvp */
.viz--mvp{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:6%;padding:0 8%}
.days{display:flex;flex-direction:column;line-height:.9}
.days b{font-size:clamp(64px,min(7vw,13vh),130px);font-weight:700;letter-spacing:-.06em;font-variant-numeric:tabular-nums;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.days span{font-size:clamp(14px,1.2vw,18px);color:var(--ink-2)}
.cal{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.cal li{aspect-ratio:1;border-radius:6px;background:var(--paper);border:1px solid var(--line-2)}
.cal li.on{background:var(--blue);border-color:var(--blue);box-shadow:0 0 12px rgba(0,153,239,.6)}
.badge{position:absolute;right:6%;top:8%;padding:7px 14px;border-radius:999px;background:#00b78b;color:#fff;font-size:clamp(11px,.95vw,14px);font-weight:700;
  box-shadow:0 8px 24px rgba(0,183,139,.45);opacity:0}

.viz--mvp .badge{top:auto;right:auto;left:8%;bottom:9%}

/* 6 no ar */
/* proporção fixa (sem esticar): assim o traço e o ponto da ponta medem o mesmo caminho */
.ekg{position:absolute;left:0;top:47%;width:100%;height:auto;translate:0 -50%;overflow:visible}
/* traço de monitor: dasharray .8/.2 = linha desenhada + vão que "apaga" à frente da ponta (ver FLOW_FX[5]) */
.ekg__pulse{stroke:#00b78b;stroke-width:2.6;stroke-linejoin:round;stroke-dasharray:.8 .2;stroke-dashoffset:.8;filter:drop-shadow(0 0 5px rgba(0,183,139,.55))}
.ekg__dot{position:absolute;left:0;top:0;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:#fff;
  box-shadow:0 0 0 3px #00b78b,0 0 18px 4px rgba(0,183,139,.8)}
.status{position:absolute;left:7%;bottom:10%;display:flex;align-items:center;gap:10px;font-size:clamp(12px,1vw,15px);font-weight:600}
.status i{width:10px;height:10px;border-radius:50%;background:#00b78b;box-shadow:0 0 12px rgba(0,183,139,.7);animation:heartbeat 1.1s ease-out infinite}

/* ---------- xodós: tambor de revólver (as aplicações abrem na janela #live, painéis .panel--app) ----------
   --D = diâmetro do tambor, alinhado à margem do título.
   câmaras a .3D do centro; --rot (gsap) gira o tambor e cada câmara contra-gira para o print ficar em pé */
.xodo{--D:min(52vh,34vw);--C:calc(var(--D) * .3);justify-content:flex-start} /* C .3D a .32D do centro: cabem 5 câmaras sem encostar */
.xodo .xodo__head .big{font-size:clamp(30px,4.4vw,72px)}
.xodo__body{flex:1;min-height:0;display:grid;grid-template-columns:var(--D) minmax(0,42rem);gap:clamp(28px,4vw,72px);
  align-items:center;margin-top:clamp(16px,3vh,40px)}
.rev{position:relative;height:var(--D)}
/* sem o disco do tambor: só as câmaras girando em volta do logo. --r (raio) e --s (escala) animam a saída de dentro do logo */
.rev__cyl{--rot:0deg;position:absolute;left:0;top:0;width:var(--D);height:var(--D);transform:rotate(var(--rot))}
.rev__ch{--r:.32;--s:1;position:absolute;left:50%;top:50%;width:var(--C);height:var(--C);margin:calc(var(--C) / -2);border-radius:50%;overflow:hidden;padding:0;cursor:pointer;
  transform:rotate(var(--a)) translateX(calc(var(--D) * var(--r))) rotate(calc(-1 * var(--a) - var(--rot))) scale(var(--s));
  border:4px solid var(--paper);box-shadow:0 0 0 1px var(--line-2),0 14px 30px -14px rgba(6,7,15,.5);opacity:.45;filter:grayscale(1);transition:opacity .5s,filter .5s,box-shadow .5s}
.rev__ch img{width:100%;height:100%;object-fit:cover;object-position:top}
.rev__ch.is-on{opacity:1;filter:none;box-shadow:0 0 0 3px var(--blue),0 0 34px rgba(0,153,239,.55)}
.rev__hub{position:absolute;left:50%;top:50%;width:calc(var(--D) * .2);aspect-ratio:1;translate:-50% -50%;border-radius:50%;
  display:grid;place-items:center;background:var(--paper);border:1px solid var(--line-2)}
.rev__hub img{width:52%}
/* "cano": aponta da câmara ativa para a janela */
.rev::after{content:"";position:absolute;right:-14px;top:50%;translate:0 -50%;border:9px solid transparent;border-left:12px solid var(--blue)}
.xodo__info small{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--blue)}
.xodo__info h3{margin-top:12px;font-size:clamp(28px,min(3.2vw,6vh),54px);font-weight:600;letter-spacing:-.04em;line-height:1}
.xodo__info p{margin-top:clamp(12px,2vh,20px);font-size:clamp(16px,min(1.35vw,2.5vh),22px);line-height:1.45;color:var(--ink-2)}
.xodo__info p b{color:var(--ink);font-weight:600}
.panel--app{padding:0;overflow:hidden}
.panel--app.on{display:block}
.panel--app iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.panel--app > img{width:100%;height:100%;object-fit:cover;object-position:top}
.panel--app .btn{position:absolute;right:24px;bottom:24px}

/* ---------- coming soon: cartões trancados, revelados um a um pelo passador ----------
   trancado = borda tracejada, nome borrado, esqueleto piscando (shimmer). .is-open = revelado, .is-on = o da vez.
   o "levantar" do .is-on usa `top` (não transform/translate: o gsap da entrada .r é dono do transform do cartão) */
.soon-slide .big{font-size:clamp(30px,4.4vw,72px)}
.soon-slide .lead{margin-top:clamp(8px,1.4vh,18px)}
.soon-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(10px,1.2vw,20px);margin-top:clamp(16px,3vh,40px)}
.soon-grp{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);padding-bottom:10px;border-bottom:1px solid var(--line)}
.soon{position:relative;top:0;height:clamp(210px,40vh,430px);display:flex;flex-direction:column;align-items:flex-start;padding:clamp(12px,1.3vw,22px);
  border-radius:20px;overflow:hidden;background:var(--paper-2);border:1.5px dashed var(--line);
  transition:top .7s var(--ease),box-shadow .7s var(--ease),border-color .5s}
.soon.is-open{border-style:solid;border-color:var(--line-2)}
.soon.is-on{top:-10px;border-color:var(--blue);box-shadow:0 30px 60px -30px rgba(0,153,239,.65),0 0 0 1px var(--blue)}
.soon__status{display:flex;align-items:center;gap:7px;padding:5px 11px;border-radius:999px;border:1px solid var(--line);background:var(--paper);
  font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);transition:color .5s,border-color .5s;order:-1}
.soon__status i{width:7px;height:7px;border-radius:50%;background:currentColor;animation:heartbeat 1.1s ease-out infinite}
.soon.is-open .soon__status{color:var(--blue);border-color:var(--blue)}
.sk{align-self:stretch;flex:1;min-height:0;margin:12px 0 14px;padding:9%;border-radius:12px;background:var(--paper);border:1px solid var(--line-2);display:grid;gap:7%}
.sk i{border-radius:5px;background:linear-gradient(90deg,var(--line-2) 0 35%,var(--line) 50%,var(--line-2) 65% 100%) 0 0/250% 100%;animation:shimmer 1.6s linear infinite}
@keyframes shimmer{to{background-position:-150% 0}}
.soon.is-open .sk i{animation:none;background:var(--grad)}
.soon.is-open .sk i:nth-child(odd){opacity:.4}
.sk--site{grid-template-rows:12% 1fr 9% 9%}
.sk--site i:nth-child(3){width:70%}
.sk--site i:nth-child(4){width:45%}
.sk--pipe{grid-auto-flow:column;align-items:end;gap:9%}
.sk--pipe i:nth-child(1){height:55%}.sk--pipe i:nth-child(2){height:90%}.sk--pipe i:nth-child(3){height:40%}.sk--pipe i:nth-child(4){height:72%}
.sk--stock{grid-template-columns:repeat(3,1fr);grid-template-rows:1fr 1fr}
.soon__shine{position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);opacity:0} /* sem transform no css: o gsap somaria com o xPercent */
.soon__n{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--blue)}
.soon h3{margin-top:6px;font-size:clamp(18px,min(1.7vw,3.2vh),30px);font-weight:600;letter-spacing:-.03em;line-height:1.05}
.soon p{margin-top:6px;font-size:clamp(13px,min(1vw,1.9vh),16px);line-height:1.4;color:var(--ink-2)}
.soon h3,.soon p{transition:filter .9s var(--ease),opacity .9s}
.soon:not(.is-open) h3,.soon:not(.is-open) p{filter:blur(7px);opacity:.45}

/* lub-dub do loader do site */
@keyframes heartbeat{0%,24%,46%,100%{transform:scale(1)}12%{transform:scale(1.17)}34%{transform:scale(1.08)}}

@media (max-width:900px){
  .hint{display:none}
  .orb{opacity:.18}
  .score__grid{grid-template-columns:1fr 1fr}
}