/* Infinity AI — celular e tablet em pé (carregado com media no index.html).
   Os slides deixam o palco de 1600×900 e viram telas empilhadas: a página rola na vertical e encaixa
   em cada slide. As peças posicionadas por coordenada passam a seguir o fluxo, uma embaixo da outra. */

/* ============ ROLAGEM QUE ENCAIXA ============ */
html,body,body.deck{height:auto;overflow:visible}
html{scroll-snap-type:y mandatory;-webkit-text-size-adjust:100%}
body.deck{overflow-x:clip}
html.menu-lock,html.menu-lock body{overflow:hidden}
.deck .stage-fit{position:static;overflow:visible}
.deck .stage,.deck .stage:not([style]){position:static;width:auto;height:auto;transform:none;visibility:visible;overflow:visible;border-radius:0;box-shadow:none}
.cam-tilt,.cam-rig,.cam-world{position:static;transform:none}
.cam-layer,.cam-fx,.intro{display:none}
.deck .bg-fx.fullbleed{position:fixed}

.frame{--s-display:42px;--s-title:29px;--s-lead:19px;--s-body:16px;
  position:relative;width:auto;height:auto;min-height:100vh;min-height:100svh;padding:84px 20px 44px;
  display:flex;flex-direction:column;justify-content:center;gap:16px;scroll-snap-align:start;scroll-snap-stop:always;overflow-x:clip}
/* tablet em pé: a coluna não passa de ~620px */
@media (min-width:640px){.frame{padding-inline:max(20px,calc((100% - 620px) / 2))}}
/* nada aparece antes de montar; loops só rodam no slide que está na tela */
.scroll-on .frame:not(.is-active) [data-in],.scroll-on .frame:not(.is-active) [data-block]{opacity:0}
.frame:not(.on-screen) *,.frame:not(.on-screen) *:before,.frame:not(.on-screen) *:after{animation-play-state:paused!important}

/* tudo que era posicionado por coordenada passa a seguir o fluxo */
.frame .head,.frame .row2,.note,.s-cover .cover,.ghosts,.ghost,.s-02 .cards,.s-03 .signals,.s-04 .core,.s-04 .sources,.s-04 .lake,
.s-05 .orch,.orch-top,.agents,.people,.s-06 .trio,.s-06 .foot-txt,.s-07 .node,.s-07 .llms,.s-07 .body,
.wf-layer,.wf-engine,.wf-proc,.wf-live,.wf-people,.s-09 .hub,.s-09 .ins-col,.reasons-grid,.s-11 .vision{
  position:relative;inset:auto;left:auto;right:auto;top:auto;bottom:auto;width:auto;height:auto}
.frame .head{gap:10px;margin-bottom:6px}
.row2{grid-template-columns:1fr;gap:12px}
.txt{padding:18px 18px}
.txt .t-body,.s-05 .txt .t-body{font-size:15.5px}
.note{margin-top:2px;font-size:13px}

/* ============ HUD: logo à esquerda, contador e lista no canto superior direito ============ */
.hud{position:fixed;inset:0 0 auto;height:0;z-index:30}
.hud:before{content:"";position:fixed;left:0;right:0;top:0;height:84px;pointer-events:none;background:linear-gradient(180deg,var(--bg) 66px,rgba(236,239,230,0))}
.deck .stage-logo{position:fixed;left:16px;top:14px;height:38px}
.hud .cam-nav,body.idle .hud .cam-nav{position:fixed;right:12px;top:12px;bottom:auto;opacity:1;translate:none;pointer-events:auto;padding:4px 4px 4px 6px;border-radius:16px;
  backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(255,255,255,.92)}
.cam-nav [data-cam="prev"],.cam-nav [data-cam="next"]{display:none}
.cam-nav .icon-btn{width:44px;height:44px}
.cam-nav [data-cam="menu"]{order:2}
.hud .scrim{position:fixed}
.hud .dock{position:fixed;left:auto;right:0;top:0;bottom:0;width:min(330px,86vw);border-radius:26px 0 0 26px;padding-top:20px;overflow-y:auto;overscroll-behavior:contain;
  transform:translateX(calc(100% + 24px))}
.hud .dock-item{height:46px;font-size:15px}
.hud .dock-indicator{height:46px}

/* ============ SLIDES ============ */
/* capa */
.s-cover .cover{display:grid;place-content:center;justify-items:center;gap:22px;text-align:center}
.s-cover .cover-logo{width:min(76vw,340px)}
.s-cover .t-lead{font-size:24px}

/* 01 */
.s-01 .head{gap:18px}
.s-01 .panel{width:auto;padding:20px 18px;gap:8px}
.ghosts{position:relative!important;inset:auto!important;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ghost{left:auto!important;top:auto!important;gap:8px;padding:10px 10px 10px 8px;font-size:15px;white-space:nowrap}
@media (max-width:359px){.ghosts{grid-template-columns:1fr}}
.ghost .tile-icon{width:34px;height:34px;border-radius:12px;flex:none}
.ghost .tile-icon .icon{width:17px;height:17px}
.ghost .pend{margin-left:auto;font-size:13px}

/* 02 */
.s-02 .cards{grid-template-columns:1fr;gap:14px}
.screen{height:168px;padding:16px}
.screen .num{font-size:34px}
.c1 .chart{height:96px}
.c1 .chart svg{width:100%;height:100%}
.c1 .runner,.c1 .pin,.c1 .tip{display:none}
.c2 .orbit{width:96px;height:96px}
.c2 .orbit .core{width:46px;height:46px}
.c2 .pct .num{font-size:28px}
.c3 .mods{margin-top:14px}
.c3 .mods i{width:26px;height:26px}
.c3 .total{margin-top:14px}
.gcard h3{margin:14px 8px 4px;font-size:20px}
.gcard p{margin:0 8px;font-size:15px}

/* 03 e 06: visual à esquerda, título e frase à direita */
.s-03 .signals,.s-06 .trio{grid-template-columns:1fr;gap:10px}
.sig,.res{min-height:0;grid-template-columns:96px 1fr;align-items:center;column-gap:16px;row-gap:2px;padding:16px 18px}
.sig>:first-child,.res>:first-child{grid-row:span 2}
.sig h3,.res h3{margin:0;font-size:21px;align-self:end}
.sig p,.res p{font-size:15px;align-self:start}
.viz-drift{width:96px;height:44px}
.viz-late{width:60px;height:60px}
.viz-up{height:52px;gap:4px}
.viz-up i{width:8px}
.viz-down{width:96px;height:44px}
.islands{flex-wrap:wrap;gap:8px}
.isle{font-size:14px;padding:6px 10px}
.s-06 .foot-txt{gap:8px}
.s-06 .foot-txt .t-body{font-size:16px}

/* 04 */
.s-04 .core{padding:22px 20px;overflow:hidden}
.s-04 .core .t-title{margin:0 0 8px}
.s-04 .core .t-body{margin-top:12px}
.s-04 .core-tag{right:18px;top:20px}
.s-04 .sources{grid-template-columns:1fr 1fr;gap:10px}
.s-04 .src{gap:10px;padding:8px 10px 8px 8px;font-size:15px}
.s-04 .src .tile-icon{width:34px;height:34px;border-radius:12px}
.s-04 .links{display:none}
.s-04 .lake{padding:16px 18px;gap:12px}
.s-04 .lake strong{font-size:18px}
.s-04 .lake span{font-size:14px}
.s-04 .lake .lake-n b{font-size:22px}

/* 05: os agentes em linha; o destaque passa de um para o outro */
.s-05 .orch{display:grid;gap:18px;padding:16px 14px 18px}
.orch-top{flex-wrap:wrap;row-gap:8px}
.orch-top .always{font-size:18px}
.orch-wire,.orch-pk{display:none}
.agents{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:2px}
.agents:before{content:"";position:absolute;left:10%;right:10%;top:23px;height:2px;background:rgba(25,195,208,.55)}
.agent{position:relative;width:auto;gap:6px}
.agent .tile-icon{width:46px;height:46px;border-radius:15px}
.agent .tile-icon .icon{width:22px;height:22px}
.agent b{font-size:12px;line-height:1.15;text-align:center;word-spacing:100vw} /* "Agente" em cima, número embaixo */
.people{justify-self:center}

/* 07: motor → camada de controle → iAgent → modelos */
.s-07 .node{padding:16px 18px;gap:6px}
.s-07 .node h3{margin:0;font-size:22px}
.s-07 .node p{font-size:15px}
.s-07 .n-ctrl{display:grid;grid-template-columns:64px 1fr;text-align:left;column-gap:14px;align-items:center}
.s-07 .n-ctrl .shield{grid-row:span 2;width:60px;height:60px;margin:0}
.s-07 .n-ctrl .shield .icon{width:34px;height:34px}
.s-07-wires{display:none}
.s-07 .llms{gap:8px}
.s-07 .llm{height:50px;font-size:14px;border-radius:14px}
.s-07 .llm svg{width:20px;height:20px}
.s-07 .body .t-body{font-size:15.5px}

/* 08: fontes → iHub e iAgent → processos → insights, numa grade de duas colunas */
.s-08{display:grid;grid-template-columns:1fr 1fr;align-content:center;gap:12px}
.s-08>*{grid-column:1/-1}
.s-08 .wf-engine,.s-08 .wf-proc{grid-column:auto}
.wf-layer svg,.wf-pk,.raw:not(.lab){display:none}
.wf-layer:not(:has(.lab)){display:none}
.wf-layer:has(.lab){display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.raw.lab{position:static;animation:none;padding:5px 10px;border-radius:999px;background:rgba(11,141,150,.08);border:1px solid rgba(11,141,150,.2);font-size:13px}
.wf-engine,.wf-engine.hub-e,.wf-engine.agent-e{left:auto;width:auto;padding:16px 12px;gap:4px;min-height:110px}
.wf-engine h3{font-size:22px}
.wf-engine small{font-size:13px}
.eng-icon{width:34px;height:34px;border-radius:12px}
.eng-icon .icon{width:18px;height:18px}
.wf-proc{top:auto!important;height:46px;padding:0 12px;font-size:15px}
.wf-live{padding:16px;gap:12px}
.spark{width:100%}
.wf-people{justify-self:center}

/* 09 */
.s-09 .hub{padding:12px}
.hub-grid{grid-template-columns:1fr 1fr;gap:10px}
.s-09 .kpi{min-height:0;padding:14px 16px}
.s-09 .kpi.hero{grid-column:1/-1}
.s-09 .kpi .v{font-size:34px;margin-top:12px}
.s-09 .kpi .l{font-size:13px}
.s-09 .kpi .tile-icon{width:34px;height:34px}
.s-09 .kpi.wide{min-height:0}
.s-09 .kpi.wide .chart{height:64px}
.s-09 .kpi.wide .chart svg{width:100%;height:60px}
.s-09 .kpi .runner{display:none}
.s-09 .ins-col{gap:10px}
.s-09 .ins-col .ins h3{font-size:18px}
.s-09 .insights-panel{padding:16px}
.pred{font-size:15px}

/* 10: motivos em lista, ícone à esquerda */
.reasons-grid{grid-template-columns:1fr;gap:8px}
.belt-card{height:auto;grid-template-columns:72px 1fr;grid-template-rows:none;align-items:center;gap:12px;padding:10px 14px;border-radius:18px}
.belt-card span{font-size:15px;align-self:center}
.belt-icon{height:40px}
/* 10: um painel só, com os 9 motivos em linhas (em vez de 9 cards iguais empilhados) */
.reasons-grid{gap:0;padding:4px 14px;border-radius:22px;background:rgba(255,255,255,.82);border:1px solid var(--edge);box-shadow:inset 0 1px 0 rgba(255,255,255,.95),var(--sh-1)}
.reasons-grid .belt-card{background:none;border:0;border-bottom:1px solid rgba(12,32,36,.08);border-radius:0;box-shadow:none;padding:10px 2px}
.reasons-grid .belt-card:last-child{border-bottom:0}
.is-active .reasons-grid .belt-card.float[data-in="rise"]{animation:rise var(--t-enter) var(--ease) backwards;animation-delay:calc(var(--d0,0ms) + var(--d,0ms))}
.mi-clock b{display:none}

/* 11 */
.s-11 .vision{gap:24px;padding:0}
.s-11 .vision-logo{width:min(72vw,300px)}
.s-11 .sign{font-size:24px}

/* ============ DESEMPENHO ============ */
/* sem desfoque em tela cheia, sem textura de ruído, sem bordas de luz girando (pintura a cada quadro) */
.bg-fx .blob{filter:none;will-change:auto}
.bg-fx:after{display:none}
.aurora{display:none}
.edge-light:before{animation:none;--ang:210deg}
.glow-base:after{animation:none;opacity:.75}
@keyframes rise{from{opacity:0;transform:translateY(18px)}}
/* flutuação mais curta: na coluna estreita os cards ficam próximos */
@keyframes floatY{from{translate:0 -5px}to{translate:0 5px}}
.s-02 .head .t-title{white-space:normal}