/* ==========================================================================
   apresentacao.css — deck "Aprenda sobre o Claude"
   (Claude + Obsidian → Os pilares da produtividade)
   Depende de css/style.css (tokens, reset, .logos, fundo ambiente).
   ========================================================================== */
*{margin:0;padding:0}
html,body{height:100%;overflow:hidden}
code{font-family:var(--fm);font-size:.9em;background:rgba(232,236,245,.08);padding:.1em .4em;border-radius:.3em}
mark{background:none;color:var(--ok);font-weight:600;animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.6}}

/* ---------- deck / transições ---------- */
#deck{position:relative;z-index:2;height:100vh;perspective:1400px}
.slide{position:absolute;inset:0;padding:7vh 5vw 8vh;display:flex;flex-direction:column;justify-content:center;gap:2.2vh;opacity:0;visibility:hidden;pointer-events:none;transform-style:preserve-3d}
.slide.active{opacity:1;visibility:visible;pointer-events:auto;animation:warp-in .8s cubic-bezier(.2,.8,.2,1) both}
.slide.leaving{opacity:1;visibility:visible;animation:warp-out .6s cubic-bezier(.6,0,.8,.4) both}
@keyframes warp-in{from{opacity:0;transform:scale(.9) rotateY(-10deg) translateZ(-160px);filter:blur(14px)}to{opacity:1;transform:none;filter:none}}
@keyframes warp-out{to{opacity:0;transform:scale(1.1) rotateX(9deg) translateZ(90px);filter:blur(16px)}}
.slide.active .rise{animation:rise .75s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(.15s + var(--i,0)*.09s)}
@keyframes rise{from{opacity:0;transform:translateY(34px)}to{opacity:1;transform:none}}
.slide.leaving .rise{animation:none}

/* ---------- tipografia das telas ---------- */
h1,h2,h3{font-family:var(--fd);font-weight:700;letter-spacing:-.02em;line-height:1.02}
.head{display:flex;flex-direction:column;gap:1vh}
.head h2{font-size:clamp(26px,3.4vw,50px);background:linear-gradient(100deg,#fff,#b9cffc 70%,#8fd8d0);-webkit-background-clip:text;background-clip:text;color:transparent}
.head p{color:var(--muted);font-size:clamp(13px,1.15vw,18px);max-width:82ch;line-height:1.5}
.eyebrow{font-family:var(--fm);font-size:clamp(11px,.9vw,13px);color:var(--accent2)}
.split{flex-direction:row;align-items:center;gap:4vw}
.split .left{flex:0 0 33%;display:flex;flex-direction:column;gap:2vh}
.split h2{font-size:clamp(26px,3vw,46px);overflow-wrap:normal;background:linear-gradient(100deg,#fff,#b9cffc);-webkit-background-clip:text;background-clip:text;color:transparent}
.when{font-size:clamp(13px,1.15vw,18px);line-height:1.5}
.does{list-style:none;display:flex;flex-direction:column;gap:.9vh;color:var(--muted);font-size:clamp(12.5px,1.05vw,16px)}
.does li{position:relative;padding-left:1.3em}
.does li::before{content:"";position:absolute;left:0;top:.5em;width:.55em;height:.55em;border-radius:2px;background:var(--accent2);transform:rotate(45deg)}
.does b{color:var(--text);font-weight:600}
.does code{font-size:.92em}
/* tela "o que é + um prompt": coluna de texto um pouco mais larga, prompt ocupa o resto */
.split.one .left{flex:0 0 34%}
.split.one .term.tall pre{max-height:calc(100vh - 24vh)}
.head p b{color:var(--text)}

/* ---------- terminal (bloco com botão Copiar) ---------- */
.term{display:flex;flex-direction:column;min-width:0;background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:0 24px 60px rgba(0,0,0,.45);backdrop-filter:blur(12px);position:relative;overflow:hidden}
.term::before{content:"";position:absolute;inset:-1px;border-radius:14px;padding:1px;background:linear-gradient(120deg,var(--accent),transparent 40%,transparent 60%,var(--accent2));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.55;pointer-events:none}
.term-bar{display:flex;align-items:center;gap:.9em;padding:.6em .9em;border-bottom:1px solid var(--line);font-family:var(--fm);font-size:clamp(10.5px,.8vw,12.5px);color:var(--muted)}
.dots{display:inline-flex;gap:.35em}.dots i{width:.7em;height:.7em;border-radius:50%;background:#3a4257}.dots i:first-child{background:var(--accent)}.dots i:nth-child(2){background:var(--accent2)}
.term-title{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.copy{position:relative;border:1px solid rgba(232,236,245,.22);background:rgba(232,236,245,.06);border-radius:8px;padding:.38em 1em;font-family:var(--fb);font-weight:600;font-size:clamp(11px,.85vw,13px);transition:background .2s,transform .15s}
.copy:hover{background:rgba(232,236,245,.14);transform:translateY(-1px)}
.copy.ok{background:var(--ok);color:var(--ink);border-color:var(--ok)}
.copy .spark{position:absolute;left:50%;top:50%;width:5px;height:5px;border-radius:50%;background:var(--ok);pointer-events:none;animation:spark .6s ease-out forwards}
@keyframes spark{to{transform:translate(var(--dx),var(--dy)) scale(0);opacity:0}}
.term pre{font-family:var(--fm);font-size:clamp(10.5px,.86vw,13px);line-height:1.5;padding:1em 1.2em;white-space:pre-wrap;overflow-wrap:anywhere;overflow:auto;color:#dfe5f3;max-height:52vh;scrollbar-width:thin;scrollbar-color:rgba(232,236,245,.25) transparent}
.term.tall pre{max-height:calc(100vh - 22vh);font-size:clamp(10px,.8vw,12.5px);line-height:1.45}
.term pre:focus{outline:2px solid var(--accent2);outline-offset:-2px}
.cards{display:grid;gap:1.6vw;align-items:start}
.cols-2{grid-template-columns:1fr 1fr}
.cols-3{grid-template-columns:repeat(3,1fr)}
.cols-2 .term pre{max-height:58vh}
.cols-2 .term.tall pre{max-height:66vh}
.foot{color:var(--muted);font-size:clamp(12px,1vw,15px);max-width:110ch;line-height:1.5}

/* ---------- capa e encerramento ---------- */
.slide.cover{align-items:center;text-align:center}
.cover-inner{position:relative;display:flex;flex-direction:column;align-items:center;gap:2.6vh;max-width:1100px}
.cover-inner h1{display:flex;flex-direction:column;gap:.1em}
.cover-inner .t1{font-size:clamp(40px,6.4vw,104px);background:linear-gradient(100deg,#fff 20%,#b9cffc);-webkit-background-clip:text;background-clip:text;color:transparent}
.cover-inner .t2{font-size:clamp(20px,2.6vw,42px);font-weight:500;color:var(--accent2);font-family:var(--fd)}
.lead{max-width:60ch;font-size:clamp(14px,1.35vw,21px);line-height:1.55;color:var(--text)}
.hint{color:var(--muted);font-family:var(--fm);font-size:clamp(11px,.9vw,13px)}
.rings{position:absolute;left:50%;top:50%;width:min(85vmin,980px);height:min(85vmin,980px);transform:translate(-50%,-50%);pointer-events:none;z-index:-1}
.rings span{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(232,236,245,.06);background:conic-gradient(from 0deg,transparent,rgba(79,140,255,.6),transparent 30%,rgba(45,212,191,.5),transparent 60%) border-box;-webkit-mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:orbit 22s linear infinite;opacity:.7}
.rings span:nth-child(2){inset:13%;animation-duration:15s;animation-direction:reverse}
.rings span:nth-child(3){inset:27%;animation-duration:30s}
@keyframes orbit{to{transform:rotate(360deg)}}
.cycle{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:1.6vw;counter-reset:s}
.cycle li{counter-increment:s;display:flex;flex-direction:column;gap:.35em;padding:1.4em 1.3em;min-width:10.5em;border-radius:14px;background:var(--panel);border:1px solid var(--line);animation:levitate 4.5s ease-in-out infinite;animation-delay:calc(var(--i)*.5s)}
@keyframes levitate{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.cycle li::before{content:counter(s,decimal-leading-zero);font-family:var(--fm);color:var(--muted);font-size:.75em}
.cycle b{font-family:var(--fd);font-size:clamp(20px,2.2vw,32px)}
.cycle span{font-family:var(--fm);font-size:clamp(10.5px,.85vw,12.5px);color:var(--accent2)}

/* ---------- índice (19 pilares) ---------- */
.index-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:.9vw}
.idx{display:flex;flex-direction:column;gap:.3em;text-align:left;padding:1em 1em .8em;border-radius:14px;background:var(--panel);border:1px solid var(--line);transition:transform .25s,border-color .25s,background .25s;position:relative;overflow:hidden;min-height:7.5em}
.idx::after{content:"";position:absolute;inset:0;background:radial-gradient(600px circle at var(--mx,50%) var(--my,50%),rgba(79,140,255,.16),transparent 40%);opacity:0;transition:opacity .3s}
.idx:hover{transform:translateY(-4px);border-color:rgba(79,140,255,.5)}.idx:hover::after{opacity:1}
.idx .num{font-family:var(--fm);color:var(--accent2);font-size:clamp(10.5px,.85vw,12.5px)}
.idx b{font-family:var(--fd);font-size:clamp(13px,1.05vw,16.5px);font-weight:700;letter-spacing:-.01em;line-height:1.15}
.idx .d{color:var(--muted);font-size:clamp(11px,.8vw,12.5px);line-height:1.35}
.idx .go{margin-top:auto;padding-top:.5em;font-family:var(--fm);font-size:clamp(10px,.75vw,11.5px);color:var(--muted)}

/* ---------- kit (preview embutido, se algum slide voltar a usar) ---------- */
.kit-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:1.6vw;align-items:start}
.kit-preview-wrap{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--panel)}
.kit-bar{display:flex;justify-content:space-between;align-items:center;gap:1em;padding:.6em .9em;border-bottom:1px solid var(--line);font-family:var(--fm);font-size:clamp(10.5px,.8vw,12.5px);color:var(--muted)}
.theme-toggle{border:1px solid rgba(232,236,245,.22);background:rgba(232,236,245,.06);border-radius:8px;padding:.3em .8em;font-size:clamp(11px,.85vw,13px);font-family:var(--fb);font-weight:600}
.kit-preview{padding:20px;max-height:calc(100vh - 38vh);overflow:auto;background:var(--k-bg)}
.slide.kit .term.tall pre{max-height:calc(100vh - 38vh)}
.slide.kit .head p{max-width:100ch}

/* ---------- tela da biblioteca ---------- */
.lib{display:grid;grid-template-columns:1fr 1fr;gap:3vw;align-items:center}
.lib-cta{display:inline-flex;align-items:center;gap:.6em;padding:.9em 1.4em;border-radius:12px;background:var(--accent);color:var(--ink);font-family:var(--fd);font-weight:700;font-size:clamp(15px,1.3vw,20px);text-decoration:none;box-shadow:0 12px 40px rgba(79,140,255,.35);transition:transform .2s,box-shadow .2s;align-self:flex-start}
.lib-cta:hover{transform:translateY(-3px);box-shadow:0 18px 50px rgba(79,140,255,.5)}
.lib-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:.8vw;margin-top:1vh}
.lib-tiles span{padding:.7em .8em;border-radius:10px;background:var(--panel);border:1px solid var(--line);font-family:var(--fm);font-size:clamp(10.5px,.85vw,12.5px);color:var(--muted)}
.lib-tiles span b{display:block;color:var(--text);font-family:var(--fb);font-weight:600;font-size:clamp(12px,1vw,15px);margin-bottom:.15em}

/* ---------- logos: o lockup base (.logos) está em style.css; aqui só posição e tamanho ---------- */
.deck-logos{position:fixed;right:5vw;top:2.2vh;z-index:5;--logo-h:clamp(20px,2.2vw,30px)}
.cover-logos{gap:1.2em;margin-bottom:.5vh;--logo-h:clamp(40px,5vw,72px)}
.cover-logos img{opacity:1}
.cover-logos .plus{font-family:var(--fd);font-size:clamp(24px,3vw,44px)}
.brand img{height:clamp(16px,1.6vw,22px);width:auto;vertical-align:middle;margin-right:.6em;opacity:.9}
.brand img[hidden]{display:none}

/* ---------- HUD: barra de progresso, pilar, marca, contador, navegação ---------- */
.hud{position:fixed;left:0;right:0;bottom:0;z-index:5;pointer-events:none}
.bar{height:3px;background:rgba(232,236,245,.08)}
.bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent2));transition:width .5s cubic-bezier(.2,.8,.2,1);box-shadow:0 0 12px var(--accent2)}
.chip{position:fixed;left:5vw;top:2.6vh;z-index:5;font-family:var(--fm);font-size:clamp(10.5px,.85vw,13px);color:var(--muted);letter-spacing:.02em;pointer-events:none}
.chip b{color:var(--accent2);font-weight:600}
.brand{position:fixed;left:50%;bottom:2vh;transform:translateX(-50%);z-index:5;font-family:var(--fm);font-size:clamp(10.5px,.85vw,13px);color:var(--muted);pointer-events:none;white-space:nowrap}
.counter{position:fixed;right:2.2vw;bottom:2vh;z-index:5;font-family:var(--fm);font-size:clamp(10.5px,.85vw,13px);color:var(--muted)}
.nav{position:fixed;left:2.2vw;bottom:1.5vh;z-index:6;display:flex;gap:.4em}
.nav button,.nav a{display:inline-flex;align-items:center;justify-content:center;gap:.4em;min-width:2.4em;height:2.4em;padding:0 .7em;border-radius:8px;border:1px solid rgba(232,236,245,.18);background:rgba(5,7,13,.7);font-size:15px;color:inherit;text-decoration:none;transition:background .2s,transform .15s}
.nav button:hover,.nav a:hover{background:rgba(232,236,245,.14);transform:translateY(-2px)}
.nav .lbl{font-family:var(--fm);font-size:11.5px;color:var(--muted)}
.nav .prev,.nav .next{padding:0}
.toast{position:fixed;left:50%;top:3.5vh;z-index:9;transform:translate(-50%,-30px);background:var(--ok);color:var(--ink);font-weight:700;padding:.55em 1.3em;border-radius:8px;opacity:0;transition:.3s;pointer-events:none}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- responsivo ---------- */
@media (max-width:1300px){.index-grid{grid-template-columns:repeat(4,1fr)}}
@media (max-width:1000px){
  .slide{padding:9vh 5vw 10vh;overflow:auto;justify-content:flex-start}
  .split{flex-direction:column;align-items:stretch}.split .left{flex:none}
  .cols-2,.cols-3,.kit-grid{grid-template-columns:1fr}
  .index-grid{grid-template-columns:repeat(3,1fr)}
  .term pre,.term.tall pre,.cols-2 .term pre,.cols-2 .term.tall pre{max-height:44vh}
  .kit-preview{max-height:none}
  .brand{display:none}
  .nav .lbl{display:none}.nav button,.nav a{padding:0}
}
@media (max-width:600px){.index-grid{grid-template-columns:1fr 1fr}.cover-inner .t1{font-size:34px}.cover-inner .t2{font-size:18px}.lib{grid-template-columns:1fr}}

/* ---------- botões "baixar pelo site" nas telas de instalação ---------- */
.dl{display:flex;flex-wrap:wrap;align-items:center;gap:.6em}
.dl__lbl{color:var(--muted);font-size:clamp(12px,1vw,15px);margin-right:.3em}
.dl__btn{display:inline-flex;align-items:center;gap:.4em;padding:.55em 1em;border-radius:10px;border:1px solid rgba(79,140,255,.45);background:rgba(79,140,255,.12);color:var(--text);font-family:var(--fd);font-weight:700;font-size:clamp(12.5px,1vw,15px);text-decoration:none;transition:background .2s,transform .15s,box-shadow .2s}
.dl__btn:hover{background:var(--accent);color:var(--ink);transform:translateY(-2px);box-shadow:0 10px 30px rgba(79,140,255,.35)}