/* ==========================================================================
   home.css — página inicial (index.html)
   Depende de css/style.css. Duas portas: Aprenda sobre o Claude e Biblioteca.
   ========================================================================== */
body.home{min-height:100vh;overflow-x:hidden}

/* topo */
.site-top{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:22px 5vw}
.site-top .logos{--logo-h:clamp(22px,2.2vw,30px)}
.site-nav{display:flex;gap:6px;flex-wrap:wrap}
.site-nav a{padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:var(--panel);color:var(--muted);text-decoration:none;font-size:13px;font-weight:600;transition:color .2s,border-color .2s,transform .15s}
.site-nav a:hover{color:var(--text);border-color:rgba(232,236,245,.3);transform:translateY(-1px)}

/* conteúdo */
.home-main{position:relative;z-index:2;max-width:1180px;margin:0 auto;padding:5vh 5vw 6vh;display:flex;flex-direction:column;gap:6vh}
.hero{display:flex;flex-direction:column;gap:2vh;max-width:900px}
.eyebrow{margin:0;font-family:var(--fm);font-size:clamp(11px,.9vw,13px);color:var(--accent2)}
.hero h1{margin:0;display:flex;flex-direction:column;gap:.1em;font-family:var(--fd);font-weight:700;letter-spacing:-.02em;line-height:1.02}
.hero .t1{font-size:clamp(38px,6vw,92px);background:linear-gradient(100deg,#fff 20%,#b9cffc);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .t2{font-size:clamp(20px,2.4vw,38px);font-weight:500;color:var(--accent2)}
.lead{margin:0;max-width:62ch;font-size:clamp(15px,1.3vw,20px);line-height:1.55}
.lead b{color:var(--text)}

/* portas */
.portals{display:grid;grid-template-columns:1fr 1fr;gap:1.6vw}
.portal{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:14px;padding:clamp(22px,2.6vw,36px);border-radius:18px;background:var(--panel);border:1px solid var(--line);color:inherit;text-decoration:none;backdrop-filter:blur(12px);transition:transform .25s,border-color .25s,box-shadow .25s}
.portal::before{content:"";position:absolute;inset:-1px;border-radius:18px;padding:1px;background:linear-gradient(120deg,var(--pa,var(--accent)),transparent 40%,transparent 60%,var(--pb,var(--accent2)));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.45;pointer-events:none;transition:opacity .3s}
.portal::after{content:"";position:absolute;inset:0;background:radial-gradient(600px circle at var(--mx,50%) var(--my,50%),var(--pg,rgba(79,140,255,.16)),transparent 40%);opacity:0;transition:opacity .3s;pointer-events:none}
.portal:hover{transform:translateY(-5px);border-color:rgba(79,140,255,.5);box-shadow:0 24px 60px rgba(0,0,0,.45)}
.portal:hover::before,.portal:hover::after{opacity:1}
.portal--lib{--pa:var(--accent2);--pb:var(--accent);--pg:rgba(45,212,191,.14)}
.portal--lib:hover{border-color:rgba(45,212,191,.5)}
.portal__eyebrow{font-family:var(--fm);font-size:clamp(11px,.85vw,13px);color:var(--accent2)}
.portal__logo{position:absolute;right:clamp(18px,2vw,28px);top:clamp(18px,2vw,28px);height:clamp(22px,2vw,28px);width:auto;opacity:.9}
.portal__logo[hidden]{display:none}
.portal h2{margin:0;font-family:var(--fd);font-size:clamp(24px,2.6vw,38px);letter-spacing:-.02em;line-height:1.05;background:linear-gradient(100deg,#fff,#b9cffc);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:2.4em}
.portal p{margin:0;color:var(--muted);font-size:clamp(13.5px,1.05vw,16px);line-height:1.55;max-width:54ch}
.portal__tags{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.portal__tags li{font-family:var(--fm);font-size:11.5px;color:var(--accent2);background:rgba(45,212,191,.1);padding:3px 9px;border-radius:999px}
.portal--lib .portal__tags li{color:#9dc0ff;background:rgba(79,140,255,.12)}
.portal__cta{margin-top:auto;padding-top:8px;font-family:var(--fd);font-weight:700;font-size:clamp(14px,1.1vw,17px);color:var(--text);transition:transform .2s}
.portal:hover .portal__cta{transform:translateX(4px)}

/* fluxo (mesmo ciclo da última tela do deck) */
.flow{display:flex;flex-direction:column;gap:2vh;align-items:center;text-align:center}
.cycle{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:1.2vw;counter-reset:s}
.cycle li{counter-increment:s;display:flex;flex-direction:column;gap:.3em;padding:1.1em 1.2em;min-width:9.5em;border-radius:14px;background:var(--panel);border:1px solid var(--line);text-align:left;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(17px,1.6vw,24px)}
.cycle span{font-family:var(--fm);font-size:clamp(10.5px,.8vw,12px);color:var(--accent2)}
.flow__note{margin:0;color:var(--muted);font-size:clamp(13px,1vw,15px);max-width:70ch;line-height:1.5}

/* rodapé */
.site-foot{position:relative;z-index:2;display:flex;align-items:center;flex-wrap:wrap;gap:.6em 1.2em;padding:0 5vw 4vh;color:var(--muted);font-family:var(--fm);font-size:12.5px}
.site-foot .brand{display:inline-flex;align-items:center;gap:.6em}
.site-foot img{height:18px;width:auto;opacity:.9}
.site-foot img[hidden]{display:none}
.site-foot a{color:var(--muted)}
.site-foot a:hover{color:var(--text)}

@media (max-width:900px){
  .portals{grid-template-columns:1fr}
  .home-main{padding-top:3vh}
}
@media (max-width:600px){
  .hero .t1{font-size:34px}.hero .t2{font-size:18px}
  .cycle li{min-width:calc(50% - .6vw)}
}