/* ============================================================
   apivo — "O Novo Normal" · deck HUD preto+verde (#39ff14)
   Visual herdado de home.gab.dev.br/geo/apresentacao-ia
   ============================================================ */

:root{
  --bg-base:#08090a; --bg-pane:#0e0f11; --bg-code:#131517; --bg-overlay:rgba(8,9,10,.72);
  --border:#1c1f22; --border-strong:#2a2f33;
  --text:#e8eaed; --text-muted:#8b9196; --text-dim:#565b60;
  --accent:#39ff14; --accent-soft:#7dff5c; --accent-glow:rgba(57,255,20,.22); --accent-subtle:rgba(57,255,20,.08);
  --blue:#4db8ff; --yellow:#ffd23f; --orange:#ff9d3c; --purple:#b97fff; --red:#ff5c5c;
  --font-sans:'Hanken Grotesk',-apple-system,BlinkMacSystemFont,sans-serif;
  --font-mono:'JetBrains Mono','Fira Code',ui-monospace,monospace;
  --text-xs:.6875rem; --text-sm:.8125rem; --text-2xl:2rem;
  --space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;--space-12:3rem;--space-16:4rem;
  --radius-sm:3px;--radius:7px;--radius-md:10px;--radius-lg:14px;
  --tracking-tight:-.02em;--tracking-wide:.04em;--tracking-wider:.08em;--tracking-widest:.14em;
  --leading-snug:1.35;--leading-normal:1.5;
  --dur:.2s;--ease:cubic-bezier(.4,0,.2,1);--ease-out:cubic-bezier(.16,1,.3,1);
  --z-modal:50;--z-drawer:60;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{background:var(--bg-base);color:var(--text);font-family:var(--font-sans);overflow:hidden}

/* ── Deck shell ─────────────────────────────────────── */
.deck{
  position:fixed; inset:0; z-index:var(--z-modal);
  background: radial-gradient(900px circle at 50% -5%, var(--accent-glow), transparent 60%), var(--bg-base);
  display:flex; flex-direction:column;
}
.deck::before{ /* grid técnico global sutil */
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(57,255,20,.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(57,255,20,.03) 1px, transparent 1px);
  background-size:42px 42px;
  mask-image:radial-gradient(900px circle at 50% 0%, black, transparent 75%);
}
.slide{
  flex:1; display:none; flex-direction:column; justify-content:center; align-items:center;
  overflow:hidden; position:relative;
  padding:clamp(1rem,3vw,3rem); max-width:1800px; margin:0 auto; width:100%; min-height:0;
}
.slide.on{ display:flex; animation:fade .35s var(--ease-out) both; }
.slideInner{ width:100%; transform-origin:center center; will-change:transform; }

.slideKicker{
  font-family:var(--font-mono); font-size:1rem; letter-spacing:var(--tracking-widest);
  text-transform:uppercase; color:var(--accent); margin-bottom:var(--space-5);
  display:flex; align-items:center; gap:var(--space-3);
}
.slideKicker::before{
  content:''; width:8px; height:8px; border-radius:50%;
  background:var(--accent); box-shadow:0 0 8px var(--accent); animation:pulse 2s ease-in-out infinite;
}
.slideTitle{
  font-size:clamp(2.4rem,6vw,5.2rem); font-weight:800; letter-spacing:var(--tracking-tight);
  line-height:1.05; margin:0;
}
.slideTitle .ac{ color:var(--accent); }
.slideLead{
  font-size:clamp(1.25rem,2.6vw,2rem); color:var(--text-muted); margin-top:var(--space-5);
  max-width:46ch; line-height:var(--leading-snug);
}
.slideHuge{
  font-family:var(--font-mono); font-weight:700; font-size:clamp(4rem,15vw,12rem);
  color:var(--accent); line-height:.85; text-shadow:0 0 60px var(--accent-glow); letter-spacing:-.05em;
}
.muted{color:var(--text-muted)} .dim{color:var(--text-dim)} .mono{font-family:var(--font-mono)}

/* grids + stats */
.slideGrid{ display:grid; gap:var(--space-5); margin-top:var(--space-8); }
.slideGrid.c2{grid-template-columns:repeat(2,1fr)}
.slideGrid.c3{grid-template-columns:repeat(3,1fr)}
.slideGrid.c4{grid-template-columns:repeat(4,1fr)}
.slideStat{ border-left:3px solid var(--bk,var(--accent)); padding-left:var(--space-4); }
.slideStatVal{ font-family:var(--font-mono); font-size:clamp(2.2rem,4.6vw,3.6rem); font-weight:700; color:var(--bk,var(--text)); line-height:1; }
.slideStatLabel{ font-size:1.05rem; color:var(--text-muted); margin-top:var(--space-2); }
.slideStatSub{ font-size:.9rem; color:var(--text-dim); font-family:var(--font-mono); margin-top:2px; }

/* lista numerada/bullet */
.slideList{ margin-top:var(--space-6); display:flex; flex-direction:column; gap:var(--space-4); }
.slideListItem{ display:flex; align-items:baseline; gap:var(--space-4); font-size:clamp(1.15rem,2.3vw,1.6rem); }
.slideListItem .b{ font-family:var(--font-mono); color:var(--accent); font-weight:700; min-width:2ch; flex-shrink:0; }
.slideListItem .t{ color:var(--text-muted); line-height:var(--leading-snug); }
.slideListItem .t b{ color:var(--text); font-weight:600; }
.slideListItem .t code{ font-family:var(--font-mono); font-size:.85em; color:var(--accent-soft); background:var(--bg-code); padding:1px 6px; border-radius:var(--radius-sm); }

/* feature cards */
.featureCard{
  border:1px solid var(--border); border-top:3px solid var(--bk,var(--accent)); border-radius:var(--radius-md);
  padding:var(--space-6); background:rgba(14,15,17,.6); display:flex; flex-direction:column; gap:var(--space-3);
}
.featureName{ font-family:var(--font-mono); font-size:1rem; text-transform:uppercase; letter-spacing:var(--tracking-wide); color:var(--bk,var(--accent)); }
.featureDesc{ font-size:1rem; color:var(--text-muted); line-height:var(--leading-snug); }
.featureCard .sub{ font-size:.85rem; color:var(--text-dim); font-family:var(--font-mono); }
.featurePill{ display:inline-block; font-family:var(--font-mono); font-size:.8rem; text-transform:uppercase; letter-spacing:var(--tracking-wide); padding:3px 10px; border-radius:var(--radius-sm); border:1px solid var(--border); color:var(--text-dim); align-self:flex-start; }
.featurePill.active{ border-color:var(--bk,var(--accent)); color:var(--bk,var(--accent)); }
.bk-green{--bk:#39ff14} .bk-blue{--bk:#4db8ff} .bk-yellow{--bk:#ffd23f} .bk-purple{--bk:#b97fff} .bk-orange{--bk:#ff9d3c}

/* badges (capa) */
.badges{ display:flex; flex-wrap:wrap; gap:var(--space-2); margin-top:var(--space-8); }
.badge{ font-family:var(--font-mono); font-size:var(--text-xs); text-transform:uppercase; letter-spacing:var(--tracking-wide); color:var(--bg-base); background:var(--accent); border-radius:var(--radius-sm); padding:4px 11px; font-weight:700; }
.badge.dim{ background:var(--bg-pane); color:var(--accent); border:1px solid var(--accent); }

/* config table */
.configTable{ margin-top:var(--space-6); border:1px solid var(--border); border-radius:var(--radius-md); overflow:hidden; }
.configRow{ display:grid; grid-template-columns:220px 1fr; border-bottom:1px solid var(--border); font-size:1rem; }
.configRow:last-child{ border-bottom:none; }
.configLabel{ font-family:var(--font-mono); font-size:.95rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:var(--tracking-wide); padding:var(--space-4) var(--space-5); background:rgba(14,15,17,.5); border-right:1px solid var(--border); display:flex; align-items:center; }
.configValue{ padding:var(--space-4) var(--space-5); color:var(--text-muted); display:flex; align-items:center; }
.configValue b{color:var(--text)} .configValue code{ font-family:var(--font-mono); font-size:.85rem; color:var(--accent-soft); background:var(--bg-code); padding:2px 8px; border-radius:var(--radius-sm); margin:0 4px; }

/* tablist (superfícies) */
.tabList{ display:flex; gap:0; border:1px solid var(--border); border-radius:var(--radius-md); overflow:hidden; margin-top:var(--space-5); font-family:var(--font-mono); font-size:1rem; text-transform:uppercase; letter-spacing:var(--tracking-wide); }
.tab{ flex:1; padding:var(--space-4) var(--space-3); text-align:center; border:none; border-right:1px solid var(--border); color:var(--text-dim); background:rgba(14,15,17,.4); }
.tab:last-child{border-right:none}
.tab.active{ background:var(--accent-subtle); color:var(--accent); border-bottom:2px solid var(--accent); }

/* perguntas (chips) */
.questions{ margin-top:var(--space-4); display:flex; flex-direction:column; gap:var(--space-3); }
.question{ border:1px solid var(--border); border-radius:var(--radius); padding:var(--space-3) var(--space-5); font-size:1rem; color:var(--text-muted); background:rgba(14,15,17,.4); }
.question::before{ content:'› '; font-family:var(--font-mono); color:var(--accent); font-weight:700; }
.question b{color:var(--text)}

/* frase motivacional (componente novo) */
.frase{ margin-top:var(--space-8); font-family:var(--font-mono); font-size:clamp(1.05rem,2.1vw,1.55rem); color:var(--accent); border-left:3px solid var(--accent); padding-left:var(--space-5); text-shadow:0 0 24px var(--accent-glow); max-width:46ch; line-height:var(--leading-snug); }

/* chips de transformação (→ regra / → teste / → guardrail) */
.chips{ display:flex; flex-wrap:wrap; gap:var(--space-3); margin-top:var(--space-6); }
.chip{ font-family:var(--font-mono); font-size:1rem; color:var(--accent); border:1px solid var(--accent); border-radius:var(--radius); padding:var(--space-2) var(--space-5); background:var(--accent-subtle); }

/* ── Fluxograma (slides 4 e 5) ──────────────────────── */
.flow{ display:flex; flex-direction:column; gap:6px; margin-top:var(--space-4); }
.flowNode{
  border:1px solid var(--border-strong); border-left:3px solid var(--accent); border-radius:var(--radius);
  background:rgba(14,15,17,.7); padding:var(--space-3) var(--space-4); font-size:.98rem; color:var(--text-muted);
}
.flowNode b{color:var(--text)}
.flowNode.human{ border-left-color:var(--orange); background:rgba(255,157,60,.07); }
.flowNode.human .tag{ color:var(--orange); }
.flowNode .tag{ font-family:var(--font-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:var(--tracking-wide); color:var(--accent); margin-right:var(--space-2); }
.flowArrow{ color:var(--text-dim); text-align:center; font-family:var(--font-mono); font-size:.8rem; line-height:.5; }

/* ── Grafo / topografia SVG (slide 8) ───────────────── */
.topoWrap{ position:relative; width:100%; }
.topoSvg{ width:100%; overflow:visible; }
.topoNode rect{ fill:var(--bg-pane); stroke:var(--border-strong); stroke-width:1.5; transition:stroke .2s,fill .2s; }
.topoNode.green rect{ stroke:var(--accent); }
.topoNode.blue rect{ stroke:var(--blue); }
.topoNodeLabel{ font-family:var(--font-mono); font-size:13px; fill:var(--text); text-anchor:middle; dominant-baseline:middle; }
.topoNodeSub{ font-family:var(--font-mono); font-size:10px; fill:var(--text-dim); text-anchor:middle; dominant-baseline:middle; }
.topoEdge{ fill:none; stroke:var(--accent); stroke-width:1.5; opacity:.45; }
.topoEdge.blue{ stroke:var(--blue); }
.graphTitle{ font-family:var(--font-mono); font-size:.85rem; text-transform:uppercase; letter-spacing:var(--tracking-widest); color:var(--accent); margin-bottom:var(--space-3); }
.graphTitle.blue{ color:var(--blue); }

/* screenshots (slide 9) */
.shots{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-4); margin-top:var(--space-6); }
.shot{ border:1px solid var(--border); border-radius:var(--radius-md); overflow:hidden; background:var(--bg-pane); display:flex; flex-direction:column; }
.shot img{ width:100%; height:170px; object-fit:cover; object-position:top; border-bottom:1px solid var(--border); display:block; background:var(--bg-code); }
.shot .cap{ padding:var(--space-3) var(--space-4); }
.shot .cap .u{ font-family:var(--font-mono); font-size:.8rem; color:var(--accent); }
.shot .cap .d{ font-size:.9rem; color:var(--text-muted); margin-top:2px; }
.shot .ph{ height:170px; display:flex; align-items:center; justify-content:center; text-align:center; font-family:var(--font-mono); color:var(--accent-soft); font-size:.78rem; line-height:1.5; background:var(--bg-code); border-bottom:1px solid var(--border); padding:var(--space-4); }

/* ── deck bar / notas ───────────────────────────────── */
.deckBar{ display:none; /* barra inferior dispensada (Gab) — navegação por clique/toque + progress bar no topo */ align-items:center; justify-content:space-between; padding:var(--space-4) clamp(1rem,4vw,2rem); border-top:1px solid var(--border); font-family:var(--font-mono); font-size:.8rem; color:var(--text-dim); text-transform:uppercase; letter-spacing:var(--tracking-wide); position:relative; z-index:2; }
.deckDots{ display:flex; gap:var(--space-2); flex-wrap:wrap; max-width:300px; }
.deckDot{ width:8px; height:8px; border-radius:50%; background:var(--border-strong); transition:background var(--dur); cursor:pointer; border:none; padding:0; }
.deckDot.on{ background:var(--accent); box-shadow:0 0 8px var(--accent); }
.deckBtn{ background:none; border:1px solid var(--border); color:var(--text-muted); cursor:pointer; padding:var(--space-2) var(--space-4); border-radius:var(--radius-sm); font-family:var(--font-mono); font-size:.8rem; text-transform:uppercase; letter-spacing:var(--tracking-wide); transition:border-color var(--dur),color var(--dur); }
.deckBtn:hover{ border-color:var(--accent); color:var(--accent); }
.deckBtn.active{ border-color:var(--accent); color:var(--accent); }
.deckNav{ display:flex; gap:var(--space-2); align-items:center; }
.deckNav span{ min-width:56px; text-align:center; }
.deckNote{ padding:var(--space-4) clamp(1rem,4vw,2rem); background:rgba(14,15,17,.96); border-top:1px solid var(--accent); font-size:1rem; color:var(--text-muted); line-height:var(--leading-normal); animation:rise .2s var(--ease-out) both; }
.deckNote .tag{ display:block; font-family:var(--font-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:var(--tracking-widest); color:var(--accent); margin-bottom:var(--space-2); }
[hidden]{display:none !important}

/* botões maiores (toque/remoto FireTV) */
.deckBtn.deckBig{ padding:var(--space-3) var(--space-5); font-size:1rem; }

/* dica de toque (some sozinha) */
.tapHint{
  position:fixed; left:50%; bottom:64px; transform:translateX(-50%); z-index:80;
  font-family:var(--font-mono); font-size:.72rem; color:var(--text-dim);
  background:rgba(14,15,17,.9); border:1px solid var(--border); border-radius:9999px;
  padding:6px 16px; letter-spacing:var(--tracking-wide); white-space:nowrap;
  pointer-events:none; transition:opacity .8s var(--ease); max-width:92vw; overflow:hidden; text-overflow:ellipsis;
}
.tapHint.hide{ opacity:0; }
@media (max-width:768px){ .tapHint{ font-size:.66rem; bottom:58px; } }

/* progress bar topo */
.progress{ position:fixed; top:0; left:0; height:3px; background:var(--accent); box-shadow:0 0 10px var(--accent); z-index:99; transition:width .35s var(--ease-out); }

/* ── animações ──────────────────────────────────────── */
@keyframes rise{ from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }
@keyframes fade{ from{opacity:0} to{opacity:1} }
@keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:.4} }

/* reveal escalonado dos filhos do slide ativo */
.slide.on .slideInner > *{ animation:rise .5s var(--ease-out) both; }
.slide.on .slideInner > *:nth-child(2){animation-delay:.06s}
.slide.on .slideInner > *:nth-child(3){animation-delay:.12s}
.slide.on .slideInner > *:nth-child(4){animation-delay:.18s}
.slide.on .slideInner > *:nth-child(5){animation-delay:.24s}

/* ── responsivo ─────────────────────────────────────── */
@media (max-width:768px){
  .slideGrid.c2,.slideGrid.c3,.slideGrid.c4{ grid-template-columns:1fr; }
  .shots{ grid-template-columns:1fr; }
  .configRow{ grid-template-columns:120px 1fr; }
  .deckDots{ max-width:140px; }
  .deckBar{ padding:var(--space-3) var(--space-4); gap:var(--space-2); }
  .slideLead{font-size:1.2rem}
}