/* =========================================================
   Ana Gabriela — Landing Page
   Design system: Scroll-Triggered Storytelling / Modern Dark
   Palette override: cyber-fitness (dark base + lime neon)
   ========================================================= */

:root{
  /* --- cor --- */
  --bg:            #07090C;
  --bg-elev:       #0D1116;
  --fg:            #F2F5F7;
  --muted:         #9AA6B2;
  --accent:        #D5DE15;   /* amostrado da logomarca oficial */
  --accent-ink:    #07090C;
  --accent-2:      #1FE0C8;
  --border:        rgba(242,245,247,.14);
  --glass:         rgba(10,13,18,.42);

  /* --- espaço (density 4/10 · standard) --- */
  --space-1: 8px;  --space-2: 16px; --space-3: 24px;
  --space-4: 32px; --space-5: 48px; --space-6: 64px;

  --radius: 14px;
  --ease: cubic-bezier(.16,1,.3,1);
  --maxw: 1240px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scrolling: auto; }
html,body{ margin:0; padding:0; }

body{
  background:var(--bg);
  color:var(--fg);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,canvas{ display:block; max-width:100%; }
a{ color:inherit; }

:focus-visible{
  outline:3px solid var(--accent);
  outline-offset:3px;
  border-radius:4px;
}

::selection{ background:var(--accent); color:var(--accent-ink); }

/* Lenis */
html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }

/* =========================================================
   PRELOADER
   ========================================================= */
.preloader{
  position:fixed; inset:0; z-index:200;
  display:grid; place-items:center;
  background:var(--bg);
  transition:opacity .6s var(--ease), visibility .6s;
}
.preloader.is-done{ opacity:0; visibility:hidden; pointer-events:none; }
.preloader__inner{ display:grid; gap:var(--space-2); justify-items:center; width:min(280px,70vw); }
.preloader__logo{ width:min(240px,60vw); height:auto; }
.preloader__bar{
  width:100%; height:2px; background:rgba(242,245,247,.12); overflow:hidden;
}
.preloader__bar i{
  display:block; height:100%; width:0%; background:var(--accent);
  transition:width .25s linear;
}
.preloader__pct{ font-size:12px; letter-spacing:.18em; color:var(--muted); }

/* =========================================================
   TOPBAR
   ========================================================= */
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:60;
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-3);
  padding:14px clamp(16px,4vw,40px);
  background:var(--glass);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.topbar.is-stuck{ border-bottom-color:var(--border); background:rgba(7,9,12,.78); }
.topbar__brand{ display:flex; align-items:center; text-decoration:none; }
.topbar__logo{ height:36px; width:auto; }
@media (max-width:520px){ .topbar__logo{ height:28px; } }
.topbar__nav{ display:flex; gap:var(--space-3); }
.topbar__nav a{
  text-decoration:none; font-size:14px; color:var(--muted);
  transition:color .2s var(--ease);
}
.topbar__nav a:hover{ color:var(--fg); }
.topbar__cta{
  display:inline-flex; align-items:center; min-height:44px; padding:0 20px;
  border:1px solid var(--accent); border-radius:999px;
  color:var(--accent); text-decoration:none;
  font-size:13px; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  cursor:pointer;
  transition:background .25s var(--ease), color .25s var(--ease);
}
.topbar__cta:hover{ background:var(--accent); color:var(--accent-ink); }
@media (max-width:860px){ .topbar__nav{ display:none; } }

/* =========================================================
   STAGE — seção "pinada" com o canvas
   ========================================================= */
.stage{ position:relative; height:600vh; }
.stage__viewport{
  position:sticky; top:0;
  height:100vh; height:100svh;
  overflow:hidden;
  background:var(--bg);
}
#scene{
  position:absolute; inset:0;
  width:100%; height:100%;
  will-change:transform;
}
.stage__grain{
  position:absolute; inset:-50%;
  pointer-events:none; opacity:.05; z-index:2;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
.stage__vignette{
  position:absolute; inset:0; pointer-events:none; z-index:3;
  background:
    radial-gradient(120% 90% at 50% 40%, transparent 35%, rgba(7,9,12,.72) 100%),
    linear-gradient(180deg, rgba(7,9,12,.75) 0%, transparent 26%, transparent 55%, rgba(7,9,12,.9) 100%);
}

/* --- indicador de progresso --- */
.progress{
  position:absolute; z-index:12; left:clamp(16px,4vw,40px); bottom:clamp(20px,5vh,48px);
}
.progress__list{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.progress__list li{
  display:flex; align-items:center; gap:10px;
  font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(242,245,247,.35);
  transition:color .4s var(--ease);
}
.progress__list li span{
  width:22px; height:1px; background:rgba(242,245,247,.25);
  transition:background .4s var(--ease), width .4s var(--ease);
}
.progress__list li.is-active{ color:var(--accent); }
.progress__list li.is-active span{ background:var(--accent); width:40px; }
@media (max-width:640px){ .progress{ display:none; } }

/* =========================================================
   CENAS (overlay de texto sobre o canvas)
   ========================================================= */
.scene{
  position:absolute; z-index:10;
  top:0; left:0; right:0; bottom:0;
  display:flex; flex-direction:column; justify-content:center;
  gap:var(--space-3);
  padding:calc(72px + 5vh) clamp(20px,6vw,96px) clamp(80px,12vh,140px);
  max-width:min(var(--maxw), 100%);
  margin-inline:auto;
  pointer-events:none;
}
.scene > *{ pointer-events:auto; }
.scene--hero, .scene--left{ align-items:flex-start; text-align:left; }
.scene--center, .scene--final{ align-items:center; text-align:center; }

/* scrim direcional — garante contraste do texto sobre a imagem sem
   escurecer a cena inteira; entra e sai junto com o texto da cena */
.scene__scrim{
  position:absolute; inset:0; z-index:-1;
  pointer-events:none;
}
.scene--hero .scene__scrim,
.scene--left .scene__scrim{
  background:linear-gradient(100deg,
    rgba(7,9,12,.88) 0%, rgba(7,9,12,.66) 38%, rgba(7,9,12,.12) 68%, transparent 84%);
}
.scene--center .scene__scrim,
.scene--final .scene__scrim{
  background:radial-gradient(64% 58% at 50% 50%, rgba(7,9,12,.78) 0%, rgba(7,9,12,.42) 55%, transparent 82%);
}

.eyebrow{
  margin:0;
  font-size:12px; font-weight:500; letter-spacing:.28em; text-transform:uppercase;
  color:var(--accent);
}

.display{
  margin:0;
  font-weight:800; letter-spacing:-.035em; line-height:.98;
  font-size:clamp(2.4rem,7vw,6rem);
  text-wrap:balance;
}
.display--md{ font-size:clamp(2rem,5.4vw,4.6rem); }
.display em{
  font-style:normal;
  background:linear-gradient(96deg,var(--accent) 0%,var(--accent-2) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.display .line{ display:block; overflow:hidden; }
.display .line > span{ display:block; }

.lede{
  margin:0; max-width:60ch;
  font-size:clamp(1rem,1.35vw,1.2rem); line-height:1.6;
  color:rgba(242,245,247,.82);
  text-shadow:0 1px 24px rgba(7,9,12,.9);
}
.micro{ margin:0; font-size:13px; color:var(--muted); }

.scene__portrait{
  width:clamp(120px,14vw,180px); height:auto;
  border-radius:999px;
  border:2px solid rgba(213,222,21,.45);
  box-shadow:0 24px 60px -24px rgba(0,0,0,.95);
  object-fit:cover; aspect-ratio:1;
  object-position:center 18%;
}

.chips, .creds{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:10px; }
.scene--center .creds{ justify-content:center; }
.chips li, .creds li{
  padding:9px 16px;
  border:1px solid var(--border); border-radius:999px;
  background:rgba(13,17,22,.45);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  font-size:13px; font-weight:500; color:rgba(242,245,247,.9);
}
.creds li{ border-color:rgba(213,222,21,.34); }

/* =========================================================
   BOTÕES
   ========================================================= */
.btn{
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center;
  min-height:56px; padding:0 34px;
  border-radius:999px; text-decoration:none; cursor:pointer;
  font-weight:700; letter-spacing:.04em;
  transition:transform .35s var(--ease), border-color .3s var(--ease);
}
.btn__label{ position:relative; z-index:2; display:inline-flex; align-items:center; gap:10px; }

.btn--ghost{
  border:1px solid rgba(242,245,247,.5); color:var(--fg);
  font-size:13px; text-transform:uppercase; min-height:52px;
  background:rgba(13,17,22,.35);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.btn--ghost:hover{ border-color:var(--accent); color:var(--accent); }

.btn--solid{
  background:var(--accent); color:var(--accent-ink);
  font-size:clamp(1rem,1.5vw,1.15rem);
  min-height:clamp(60px,7vh,76px); padding:0 clamp(30px,4vw,52px);
  box-shadow:0 18px 60px -18px rgba(213,222,21,.65);
}
.btn__fill{
  position:absolute; inset:0; z-index:1;
  background:var(--accent-2);
  transform:scaleX(0); transform-origin:left center;
  transition:transform .45s var(--ease);
}
.btn--solid:hover .btn__fill{ transform:scaleX(1); }
.btn--solid:hover{ transform:translateY(-2px); }

/* =========================================================
   SEÇÕES PADRÃO
   ========================================================= */
.section{
  position:relative; z-index:20;
  background:var(--bg);
  padding:clamp(72px,12vh,140px) clamp(20px,6vw,64px);
  max-width:var(--maxw); margin-inline:auto;
}
.section__title{
  margin:0 0 var(--space-5);
  font-size:clamp(1.9rem,4.4vw,3.4rem);
  font-weight:800; letter-spacing:-.03em; line-height:1.05;
}
.section__note{
  margin:var(--space-5) 0 0;
  font-size:14px; color:var(--muted);
}

/* =========================================================
   CARROSSEL 3D DAS CONSULTORIAS
   Porte do componente React `feature-carousel`: mesma
   matemática de coverflow, estilos nos tokens do projeto.
   ========================================================= */

/* --- alternador Mensal / Trimestral --- */
.planswitch{
  position:relative; isolation:isolate;
  display:inline-flex; margin:0 0 var(--space-5);
  padding:5px; gap:4px;
  border:1px solid var(--border); border-radius:999px;
  background:var(--bg-elev);
}
.planswitch__btn{
  position:relative; z-index:2;
  min-height:44px; padding:0 26px;
  border:0; border-radius:999px; background:transparent;
  color:var(--muted); cursor:pointer;
  font-family:inherit; font-size:14px; font-weight:600; letter-spacing:.02em;
  transition:color .3s var(--ease);
}
.planswitch__btn.is-active{ color:var(--accent-ink); }
.planswitch__pill{
  position:absolute; z-index:1; top:5px; bottom:5px; left:5px;
  width:calc(50% - 7px);
  border-radius:999px; background:var(--accent);
  transition:transform .4s var(--ease);
}
.planswitch:has(.planswitch__btn:last-of-type.is-active) .planswitch__pill{
  transform:translateX(calc(100% + 4px));
}

/* --- palco --- */
.carousel{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  min-height:700px; padding-bottom:56px; /* espaço para os dots */
  perspective:1400px;
}
.carousel__track{
  position:relative;
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  transform-style:preserve-3d;
}

/* --- card --- */
.ccard{
  position:absolute;
  width:min(400px,86vw);
  display:flex; flex-direction:column;
  border:1px solid var(--border); border-radius:20px;
  /* opaco de propósito: com fundo translúcido o card lateral aparece
     por trás do central e o preço fica ilegível */
  background:linear-gradient(180deg,#11161C 0%,#0A0E13 100%);
  overflow:hidden;
  box-shadow:0 40px 80px -40px rgba(0,0,0,.9);
  transition:transform .55s var(--ease), opacity .55s var(--ease),
             filter .55s var(--ease), border-color .3s var(--ease);
  will-change:transform;
}
.ccard:not(.is-center){ cursor:pointer; }
.ccard.is-center{ border-color:rgba(213,222,21,.36); }

.ccard__media{ position:relative; aspect-ratio:16/10; overflow:hidden; }
.ccard__media img{
  width:100%; height:100%; object-fit:cover; object-position:center top;
}
.ccard__media::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg,transparent 40%,#11161C 100%);
}

.ccard__body{
  display:flex; flex-direction:column; gap:14px;
  padding:var(--space-3) var(--space-4) var(--space-4);
  margin-top:-34px; position:relative; z-index:2;
}
.ccard__title{
  margin:0; font-size:1.3rem; font-weight:700; letter-spacing:-.02em; line-height:1.15;
}
.ccard__desc{
  margin:0; font-size:14px; line-height:1.6; color:var(--muted);
}

.ccard__price{
  display:flex; align-items:baseline; flex-wrap:wrap; gap:8px;
  margin:0; padding-top:12px; border-top:1px solid var(--border);
}
.ccard__price span{
  font-size:2rem; font-weight:800; letter-spacing:-.03em; color:var(--accent);
}
.ccard__price small{ font-size:13px; color:var(--muted); }

.ccard__feats{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.ccard__feats li{
  position:relative; padding-left:24px;
  font-size:14px; line-height:1.45; color:rgba(242,245,247,.86);
}
.ccard__feats li::before{
  content:''; position:absolute; left:2px; top:6px;
  width:11px; height:6px;
  border-left:2px solid var(--accent); border-bottom:2px solid var(--accent);
  transform:rotate(-45deg);
}
.ccard__feats li.is-highlight{ color:var(--accent); font-weight:600; }

.ccard__cta{
  margin-top:auto;
  display:inline-flex; align-items:center; justify-content:center;
  min-height:52px; padding:0 24px;
  border-radius:999px; background:var(--accent); color:var(--accent-ink);
  text-decoration:none; cursor:pointer;
  font-size:15px; font-weight:700; letter-spacing:.02em;
  transition:filter .25s var(--ease), transform .25s var(--ease);
}
.ccard__cta:hover{ filter:brightness(1.1); transform:translateY(-2px); }

/* --- navegação --- */
.carousel__nav{
  position:absolute; top:50%; translate:0 -50%; z-index:20;
  display:grid; place-items:center;
  width:48px; height:48px;
  border:1px solid var(--border); border-radius:999px;
  background:rgba(13,17,22,.7);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  color:var(--fg); cursor:pointer;
  transition:background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.carousel__nav:hover{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
.carousel__nav--prev{ left:0; }
.carousel__nav--next{ right:0; }

.carousel__dots{
  position:absolute; bottom:0; left:50%; translate:-50% 0; z-index:20;
  display:flex; gap:10px;
}
.carousel__dot{
  width:44px; height:44px; padding:0;
  border:0; background:transparent; cursor:pointer;
  display:grid; place-items:center;
}
.carousel__dot::before{
  content:''; width:8px; height:8px; border-radius:999px;
  background:rgba(242,245,247,.28);
  transition:background .3s var(--ease), width .3s var(--ease);
}
.carousel__dot.is-active::before{ background:var(--accent); width:26px; }

@media (max-width:700px){
  .carousel{ min-height:660px; perspective:none; }
  .carousel__nav--prev{ left:-6px; }
  .carousel__nav--next{ right:-6px; }
}

/* --- FAQ --- */
.section--faq{ border-top:1px solid var(--border); }
.faq{ display:grid; gap:var(--space-1); }
.faq details{
  border:1px solid var(--border); border-radius:var(--radius);
  background:var(--bg-elev);
  transition:border-color .3s var(--ease);
}
.faq details[open]{ border-color:rgba(213,222,21,.34); }
.faq summary{
  cursor:pointer; list-style:none;
  padding:var(--space-3) var(--space-4);
  min-height:44px; display:flex; align-items:center; justify-content:space-between; gap:var(--space-2);
  font-size:1.05rem; font-weight:600;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:''; flex:0 0 12px; width:12px; height:12px;
  border-right:2px solid var(--accent); border-bottom:2px solid var(--accent);
  transform:rotate(45deg) translateY(-3px);
  transition:transform .3s var(--ease);
}
.faq details[open] summary::after{ transform:rotate(-135deg) translateY(-3px); }
.faq p{ margin:0; padding:0 var(--space-4) var(--space-3); color:var(--muted); }

/* --- Fechamento --- */
.closing{
  position:relative; z-index:20;
  display:grid; justify-items:center; gap:var(--space-4);
  padding:clamp(80px,16vh,180px) clamp(20px,6vw,64px);
  text-align:center;
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(213,222,21,.09), transparent 70%),
    var(--bg);
  border-top:1px solid var(--border);
}
.closing__title{
  margin:0; font-size:clamp(2.2rem,6vw,5rem);
  font-weight:800; letter-spacing:-.035em;
}
.closing__ig{
  color:var(--muted); text-decoration:none; font-size:15px;
  border-bottom:1px solid transparent; transition:color .25s var(--ease), border-color .25s var(--ease);
}
.closing__ig:hover{ color:var(--accent); border-bottom-color:var(--accent); }

.footer{
  display:grid; justify-items:center; gap:var(--space-2);
  padding:var(--space-4) clamp(20px,6vw,64px);
  border-top:1px solid var(--border);
  color:var(--muted); font-size:13px; text-align:center;
  background:var(--bg); position:relative; z-index:20;
}
.footer__selo{ width:72px; height:auto; opacity:.85; }

/* --- reveals das seções normais --- */
.reveal{ opacity:0; transform:translateY(24px); }

/* =========================================================
   ACESSIBILIDADE — prefers-reduced-motion
   O modo estático empilha as cenas com a imagem como
   background; nenhum pin, nenhum scroll hijacking.
   ========================================================= */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    transition-duration:.001ms !important;
  }
}

html.is-static .stage{ height:auto; }
html.is-static .stage__viewport{
  position:static; height:auto; overflow:visible;
}
html.is-static #scene,
html.is-static .stage__grain,
html.is-static .progress{ display:none; }
html.is-static .stage__vignette,
html.is-static .scene__scrim{ display:none; }
html.is-static .scene{
  position:relative; inset:auto;
  min-height:70vh; padding-block:clamp(64px,12vh,120px);
  background-size:cover; background-position:center;
  border-bottom:1px solid var(--border);
}
html.is-static .scene[data-scene="0"]{
  background-image:linear-gradient(180deg,rgba(7,9,12,.8),rgba(7,9,12,.93)),url('../assets/scene-1-musculacao.webp');
}
html.is-static .scene[data-scene="1"]{
  background-image:linear-gradient(180deg,rgba(7,9,12,.8),rgba(7,9,12,.93)),url('../assets/scene-2-crossfit.webp');
}
html.is-static .scene[data-scene="2"]{
  background-image:linear-gradient(180deg,rgba(7,9,12,.8),rgba(7,9,12,.93)),url('../assets/scene-3-lpo.webp');
}
html.is-static .scene[data-scene="3"]{
  background-image:linear-gradient(180deg,rgba(7,9,12,.8),rgba(7,9,12,.93)),url('../assets/scene-4-corrida.webp');
}
@media (max-width:900px){
  html.is-static .scene[data-scene="0"]{
    background-image:linear-gradient(180deg,rgba(7,9,12,.8),rgba(7,9,12,.93)),url('../assets/scene-1-musculacao@1280.webp');
  }
  html.is-static .scene[data-scene="1"]{
    background-image:linear-gradient(180deg,rgba(7,9,12,.8),rgba(7,9,12,.93)),url('../assets/scene-2-crossfit@1280.webp');
  }
  html.is-static .scene[data-scene="2"]{
    background-image:linear-gradient(180deg,rgba(7,9,12,.8),rgba(7,9,12,.93)),url('../assets/scene-3-lpo@1280.webp');
  }
  html.is-static .scene[data-scene="3"]{
    background-image:linear-gradient(180deg,rgba(7,9,12,.8),rgba(7,9,12,.93)),url('../assets/scene-4-corrida@1280.webp');
  }
}
html.is-static .reveal,
html.is-static [data-anim]{ opacity:1 !important; transform:none !important; }