/* ============================================================
   PERFORZ — HOME  (só o que é exclusivo da página inicial)
   Estilos de menu/rodapé/cores estão em base.css
   ============================================================ */
/* ============================================================
   GRID REATIVA (canvas de fundo)
   ============================================================ */
#grid-canvas{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.9;}

/* conteúdo acima do canvas.
   ATENÇÃO: só o #smooth entra aqui. Header, menu, cursor e preloader já são
   position:fixed com z-index próprio — incluí-los nesta regra os jogaria de
   volta para position:relative e empurraria a página inteira para baixo. */
#smooth{position:relative;z-index:2;}

/* ============================================================
   PRELOADER
   ============================================================ */
#preloader{position:fixed;inset:0;z-index:9999;background:var(--white);display:flex;align-items:center;justify-content:center;}
#preloader .pl-word{font-family:var(--font-d);font-size:clamp(3rem,17vw,15rem);line-height:1;display:flex;letter-spacing:.02em;color:var(--black);}
#preloader .pl-word span{display:inline-block;transform:translateY(120%) rotate(12deg);opacity:0;}
#preloader .pl-count{position:absolute;bottom:max(1.4rem,var(--safe-b));right:var(--pad);font-family:var(--font-m);font-size:clamp(2.2rem,8vw,6rem);color:var(--blue);font-weight:700;}
#preloader .pl-tag{position:absolute;bottom:max(1.6rem,var(--safe-b));left:var(--pad);color:var(--g2);}
#preloader .pl-bar{position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--blue);}
.pl-curtain{position:fixed;inset:0;z-index:9998;background:var(--blue);transform:scaleY(0);transform-origin:bottom;}
/* ============================================================
   HERO vivo
   ============================================================ */
#hero{min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;
  padding:var(--pad);padding-bottom:clamp(2rem,6vh,4rem);overflow:hidden;}
#hero .hero-top{display:flex;justify-content:space-between;align-items:flex-start;flex:1;padding-top:clamp(6rem,14vh,9rem);gap:1rem;}
#hero .hero-top .label{color:var(--g2);line-height:2;max-width:18ch;}
#hero h1{font-family:var(--font-d);font-size:clamp(3rem,12vw,11rem);line-height:.92;text-transform:uppercase;letter-spacing:-.015em;}
#hero h1 .ln{display:block;overflow:visible;white-space:nowrap;}
#hero h1 .ch{display:inline-block;will-change:transform,opacity;}
#hero h1 .blue{color:var(--blue);}
#hero .hero-foot{display:flex;justify-content:space-between;align-items:flex-end;margin-top:clamp(1.2rem,3vw,2.2rem);gap:1.5rem;flex-wrap:wrap;}
#hero .hero-sub{max-width:32ch;font-size:clamp(.95rem,1.4vw,1.15rem);color:var(--g3);line-height:1.5;}
#hero .scroll-ind{display:flex;align-items:center;gap:.7rem;color:var(--blue);}
#hero .scroll-ind .ring{width:30px;height:46px;border:1.5px solid var(--blue);border-radius:20px;position:relative;}
#hero .scroll-ind .ring::after{content:"";position:absolute;left:50%;top:7px;width:4px;height:8px;border-radius:3px;background:var(--blue);transform:translateX(-50%);animation:scrolldot 1.8s var(--exp) infinite;}
@keyframes scrolldot{0%{opacity:0;transform:translate(-50%,0);}30%{opacity:1;}80%{opacity:0;transform:translate(-50%,14px);}100%{opacity:0;}}

/* ============================================================
   MARQUEE reativo
   ============================================================ */
.marquee{background:var(--blue);color:var(--black);padding:clamp(.2rem,.4vw,.32rem) 0;overflow:hidden;white-space:nowrap;}
.marquee .track{display:inline-flex;will-change:transform;}
.marquee span{font-family:var(--font-d);font-size:clamp(.7rem,1.8vw,1.4rem);text-transform:uppercase;padding:0 1.2rem;line-height:1;display:inline-flex;align-items:center;gap:1.2rem;-webkit-text-stroke:.6px var(--white);paint-order:stroke fill;}
.marquee .star{color:var(--white);font-size:.55em;}

/* ============================================================
   MANIFESTO cinético
   ============================================================ */
/* ============================================================
   BLOG — imagem full-bleed + card editorial
   ============================================================ */
#blog{position:relative;min-height:100svh;overflow:hidden;background:#0a0a0a;}
#blog .blog-slide{position:absolute;inset:0;display:flex;align-items:flex-end;padding:var(--pad);
  padding-bottom:clamp(2.5rem,8vh,6rem);opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity 1s var(--exp),visibility 1s;}
#blog .blog-slide.is-active{opacity:1;visibility:visible;pointer-events:auto;}
#blog .blog-media{position:absolute;inset:0;z-index:0;overflow:hidden;}
#blog .blog-media img{width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(1.08);transition:transform 7s linear;}
#blog .blog-slide.is-active .blog-media img{transform:scale(1);}
#blog .blog-overlay{position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(8,8,10,.62) 0%,rgba(8,8,10,.28) 45%,rgba(8,8,10,0) 78%),
             linear-gradient(0deg,rgba(8,8,10,.5) 0%,rgba(8,8,10,0) 38%);}
#blog .blog-kicker{display:inline-flex;align-items:center;gap:.5em;font-family:var(--font-m);font-size:.66rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--blue);margin-bottom:.85rem;}
#blog .blog-kicker i{width:6px;height:6px;border-radius:50%;background:var(--blue);font-style:normal;}
#blog .blog-dots{position:absolute;z-index:3;bottom:clamp(2.5rem,8vh,6rem);right:var(--pad);display:flex;gap:.55rem;}
#blog .blog-dot{width:30px;height:4px;border-radius:4px;background:rgba(255,255,255,.4);cursor:pointer;transition:background .4s var(--exp),width .4s var(--exp);}
#blog .blog-dot.on{background:#fff;width:48px;}
#blog .blog-card{position:relative;z-index:1;width:min(86vw,380px);
  background:#fff;border-radius:8px;padding:clamp(1.5rem,2.4vw,2.1rem);
  box-shadow:0 24px 60px -28px rgba(0,0,0,.45);}
#blog .blog-title{font-family:var(--font-d);font-size:clamp(1.25rem,2.3vw,1.8rem);line-height:1.02;
  text-transform:uppercase;letter-spacing:-.005em;color:var(--black);margin-bottom:.75rem;}
#blog .blog-desc{font-size:clamp(.8rem,.92vw,.88rem);line-height:1.55;color:var(--g3);margin-bottom:1.4rem;}
#blog .blog-btn{position:relative;display:inline-flex;align-items:center;gap:.55em;background:none;color:var(--blue);
  font-family:var(--font-m);font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;padding:0;
  transition:gap .35s var(--exp);}
#blog .blog-btn::after{content:'';position:absolute;left:0;bottom:-.45em;height:1.5px;width:100%;
  background:var(--blue);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--exp);}
#blog .blog-btn span{transition:transform .35s var(--exp);}
#blog .blog-btn:hover{gap:.85em;}
#blog .blog-btn:hover::after{transform:scaleX(1);}
#blog .blog-btn:hover span{transform:translateX(4px);}
@media (max-width:560px){#blog .blog-card{width:100%;}}

/* ============================================================
   TODAS AS NOTÍCIAS — grid de cards
   ============================================================ */
#noticias{background:var(--white);color:var(--black);padding:clamp(4.5rem,11vh,8rem) var(--pad);}
#noticias .nws-head{margin-bottom:clamp(2.4rem,6vh,4.2rem);}
#noticias .nws-head .label{color:var(--g2);}
#noticias .nws-title{font-family:var(--font-d);font-size:clamp(2.2rem,6vw,5rem);line-height:.95;text-transform:uppercase;letter-spacing:-.015em;margin-top:.7rem;}
#noticias .nws-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.2rem,2vw,2rem);}
.nws-card{display:flex;flex-direction:column;border-radius:14px;overflow:hidden;background:var(--white);
  border:1px solid rgba(10,10,10,.1);transition:transform .5s var(--exp),box-shadow .5s var(--exp);}
.nws-card:hover{transform:translateY(-6px);box-shadow:0 30px 60px -28px rgba(10,10,10,.4);}
.nws-media{position:relative;aspect-ratio:16/10;overflow:hidden;background:#0a0a0a;}
.nws-media img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--exp);}
.nws-card:hover .nws-media img{transform:scale(1.07);}
.nws-body{display:flex;flex-direction:column;gap:.7rem;padding:clamp(1.2rem,1.8vw,1.7rem);flex:1;}
.nws-meta{font-family:var(--font-m);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--g2);}
.nws-meta b{color:var(--blue);font-weight:600;}
.nws-card h3{font-family:var(--font-d);font-size:clamp(1.25rem,1.7vw,1.55rem);line-height:1.05;text-transform:uppercase;letter-spacing:-.005em;}
.nws-body p{font-size:.86rem;line-height:1.5;color:var(--g3);flex:1;}
.nws-link{display:inline-flex;align-items:center;gap:.5em;font-family:var(--font-m);font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);margin-top:.3rem;}
.nws-link i{font-style:normal;transition:transform .35s var(--exp);}
.nws-card:hover .nws-link i{transform:translateX(4px);}
@media (max-width:900px){#noticias .nws-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){#noticias .nws-grid{grid-template-columns:1fr;}}

/* ============================================================
   TREINOS — grid editorial de programas (imagens)
   ============================================================ */
#treinos{background:var(--white);color:var(--black);padding:clamp(5rem,13vh,9rem) var(--pad);}
#treinos .trn-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;
  gap:1.4rem 2.5rem;margin-bottom:clamp(2.6rem,6vh,4.6rem);}
#treinos .trn-head .label{color:var(--g2);flex-basis:100%;}
#treinos .trn-intro-wrap{display:flex;flex-direction:column;}
#treinos .trn-title{font-family:var(--font-d);font-size:clamp(2.4rem,7vw,5.6rem);line-height:.94;
  text-transform:uppercase;letter-spacing:-.015em;margin-top:.7rem;}
#treinos .trn-title .blue{color:var(--blue);}
#treinos .trn-intro{max-width:36ch;font-size:clamp(.95rem,1.2vw,1.1rem);line-height:1.55;color:var(--g3);}
#treinos .trn-all{align-self:flex-end;position:relative;display:inline-flex;align-items:center;gap:.5em;font-family:var(--font-m);font-size:.74rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);}
#treinos .trn-all::after{content:'';position:absolute;left:0;bottom:-.4em;height:1.5px;width:100%;background:var(--blue);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--exp);}
#treinos .trn-all span{transition:transform .35s var(--exp);}
#treinos .trn-all:hover::after{transform:scaleX(1);}
#treinos .trn-all:hover span{transform:translateX(4px);}
#treinos .trn-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.7rem,1.2vw,1.2rem);}
.trn-card{position:relative;overflow:hidden;border-radius:14px;aspect-ratio:3/4.2;display:flex;align-items:flex-end;
  background:#0a0a0a;isolation:isolate;}
.trn-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  transform:scale(1.05);transition:transform 1s var(--exp);}
.trn-card:hover img{transform:scale(1.13);}
.trn-card .trn-shade{position:absolute;inset:0;z-index:1;
  background:linear-gradient(0deg,rgba(6,6,9,.92) 2%,rgba(6,6,9,.34) 46%,rgba(6,6,9,0) 82%);
  transition:background .5s var(--exp);}
.trn-card:hover .trn-shade{background:linear-gradient(0deg,rgba(13,12,72,.92) 2%,rgba(6,6,9,.4) 50%,rgba(6,6,9,.05) 88%);}
.trn-card .trn-body{position:relative;z-index:2;width:100%;padding:clamp(1.1rem,1.5vw,1.6rem);color:#fff;}
.trn-card .trn-tag{display:inline-flex;align-items:center;gap:.55em;font-family:var(--font-m);font-size:.64rem;
  letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.72);}
.trn-card .trn-tag b{color:#8e8dff;font-weight:600;}
.trn-card h3{font-family:var(--font-d);font-size:clamp(1.5rem,2.1vw,2rem);text-transform:uppercase;line-height:1;margin:.5rem 0 0;}
.trn-card .trn-desc{font-size:.8rem;line-height:1.45;color:rgba(255,255,255,.82);}
.trn-card .trn-go{position:absolute;top:clamp(1rem,1.4vw,1.4rem);right:clamp(1rem,1.4vw,1.4rem);z-index:2;
  width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-size:1.05rem;color:#fff;
  background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.28);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:background .4s var(--exp),border-color .4s,transform .45s var(--exp);}
.trn-card:hover .trn-go{background:var(--blue);border-color:var(--blue);transform:translate(2px,-2px);}
@media (hover:hover){
  .trn-card .trn-desc{max-height:0;opacity:0;overflow:hidden;margin-top:0;
    transition:max-height .55s var(--exp),opacity .4s,margin-top .55s var(--exp);}
  .trn-card:hover .trn-desc{max-height:6rem;opacity:1;margin-top:.5rem;}
}
@media (hover:none){.trn-card .trn-desc{margin-top:.5rem;}}
@media (max-width:1024px){#treinos .trn-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:520px){#treinos .trn-grid{grid-template-columns:1fr;gap:1rem;}.trn-card{aspect-ratio:16/11;}}

/* ============================================================
   SISTEMA (eixo invertido / carrossel mobile)
   ============================================================ */
#sistema{background:var(--white);overflow:hidden;}
#sistema .sys-track{display:flex;align-items:stretch;height:100svh;width:max-content;will-change:transform;}
.sys-panel{width:100vw;height:100svh;flex-shrink:0;display:flex;flex-direction:column;justify-content:center;padding:var(--pad);position:relative;overflow:hidden;}
.sys-panel .sp-idx{position:absolute;top:clamp(5rem,13vh,8rem);left:var(--pad);font-family:var(--font-m);font-size:.78rem;letter-spacing:.24em;}
.sys-panel h2{font-family:var(--font-d);font-size:clamp(2.6rem,10vw,9rem);text-transform:uppercase;line-height:.98;}
.sys-panel p{max-width:38ch;margin-top:1.4rem;font-size:clamp(1rem,1.4vw,1.25rem);line-height:1.5;}
.sys-panel .sp-deco{position:absolute;font-family:var(--font-d);opacity:.05;font-size:34vw;right:-3vw;bottom:-10vh;pointer-events:none;line-height:1;}
.sys-panel .mv{will-change:transform;}
.sys-panel.dark{background:var(--black);color:#fff;}.sys-panel.dark .sp-idx{color:var(--blue);}.sys-panel.dark p{color:var(--g2);}
.sys-panel.blue{background:var(--blue);color:#fff;}.sys-panel.blue .sp-idx{color:var(--black);}.sys-panel.blue h2 .stroke{color:transparent;-webkit-text-stroke:2px #fff;}
.sys-panel.light{background:var(--white);color:var(--black);}.sys-panel.light .sp-idx{color:var(--blue);}.sys-panel.light p{color:var(--g3);}
.sys-progress{position:absolute;bottom:max(1.4rem,var(--safe-b));left:var(--pad);right:var(--pad);height:2px;background:rgba(128,128,128,.3);z-index:5;}
.sys-progress .bar{height:100%;width:0;background:var(--blue);}
/* dots (mobile) */
.sys-dots{display:none;}

@media (max-width:768px){
  #sistema .sys-track{width:auto;height:auto;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
  #sistema .sys-track::-webkit-scrollbar{display:none;}
  .sys-panel{width:88vw;height:auto;min-height:84svh;scroll-snap-align:center;margin-right:3vw;border-radius:4px;}
  .sys-panel:first-child{margin-left:6vw;}
  .sys-panel:last-child{margin-right:6vw;}
  .sys-progress{display:none;}
  .sys-dots{display:flex;gap:.5rem;justify-content:center;padding:1.4rem 0 calc(1.4rem + var(--safe-b));background:var(--white);}
  .sys-dots i{width:8px;height:8px;border-radius:50%;background:rgba(10,10,10,.2);transition:background .3s,width .3s;}
  .sys-dots i.on{background:var(--blue);width:24px;border-radius:4px;}
}

/* ============================================================
   INVERSÃO (fundo inverte com azul cortando)
   ============================================================ */
#inversao{height:100svh;overflow:hidden;}
#inversao .inv-stage{position:relative;width:100%;height:100svh;display:flex;align-items:center;justify-content:center;background:var(--white);}
#inversao .inv-wipe{position:absolute;inset:0;transform-origin:left;transform:scaleX(0);will-change:transform;}
#inversao .inv-wipe.blue{background:var(--blue);z-index:1;}
#inversao .inv-wipe.white{background:var(--black);z-index:2;}  /* 2ª cortina agora é PRETA (inversão branco→preto) */
#inversao .inv-layers{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;justify-content:center;align-items:center;pointer-events:none;}
#inversao .inv-word{font-family:var(--font-d);font-size:clamp(3.5rem,20vw,20rem);text-transform:uppercase;line-height:.8;color:var(--black);will-change:transform,color;letter-spacing:-.02em;}
#inversao .inv-sub{font-family:var(--font-m);letter-spacing:.3em;margin-top:1rem;color:var(--blue);text-transform:uppercase;font-size:clamp(.7rem,1vw,.85rem);will-change:transform;}
#inversao .inv-ghost{position:absolute;font-family:var(--font-d);text-transform:uppercase;opacity:.06;white-space:nowrap;will-change:transform;font-size:clamp(4rem,16vw,16rem);line-height:1;}

/* ============================================================
   CTA FINAL
   ============================================================ */
#cta{background:var(--blue);color:#fff;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  padding:var(--pad);padding-bottom:calc(var(--pad) + var(--safe-b));overflow:hidden;}
#cta .cta-label{margin-bottom:1.8rem;color:rgba(255,255,255,.72);}
#cta h2{font-family:var(--font-d);font-size:clamp(3rem,15vw,16rem);text-transform:uppercase;line-height:.82;}
#cta h2 .ch{display:inline-block;will-change:transform,opacity;}
#cta .magnetic{margin-top:clamp(2.4rem,7vh,4rem);position:relative;display:inline-block;will-change:transform;}
#cta .mag-btn{font-family:var(--font-m);font-size:clamp(.85rem,1vw,1rem);letter-spacing:.22em;text-transform:uppercase;background:#fff;color:#000;
  padding:1.3em 2.8em;border-radius:100px;display:inline-flex;align-items:center;gap:.7em;overflow:hidden;position:relative;min-height:56px;will-change:transform;}
#cta .mag-btn span{position:relative;z-index:1;transition:color .4s var(--exp);}
#cta .mag-btn::before{content:"";position:absolute;inset:0;background:var(--black);transform:scale(0);border-radius:100px;transition:transform .5s var(--exp);}
#cta .mag-btn:hover span,#cta .mag-btn:active span{color:#fff;}
#cta .mag-btn:hover::before,#cta .mag-btn:active::before{transform:scale(1.5);}

@media (max-width:768px){
  #cta{justify-content:flex-start;padding-top:18vh;}
  #cta .magnetic{margin-top:auto;margin-bottom:6vh;}  /* CTA na thumb zone */
}
/* ============================================================
   GYRO PROMPT (mobile)
   ============================================================ */
#gyro-prompt{position:fixed;left:50%;bottom:calc(1.4rem + var(--safe-b));transform:translateX(-50%);z-index:1500;
  background:rgba(10,10,10,.88);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.15);
  color:#fff;font-family:var(--font-m);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  padding:.9em 1.4em;border-radius:100px;display:none;align-items:center;gap:.6em;}
#gyro-prompt.show{display:inline-flex;}
#gyro-prompt .gp-dot{width:7px;height:7px;border-radius:50%;background:var(--blue);}