/* =========================================================
   Academia de Prospecção — landing page
   ========================================================= */

:root{
  --bg:            #050605;
  --bg-2:          #0a0c0a;
  --card:          #16181700;
  --card-solid:    #1c1e1c;
  --card-dark:     #101210;
  --line:          #2a2d2a;
  --txt:           #e9ebe9;
  --txt-dim:       #b9bdb9;
  --txt-mute:      #8a8f8a;
  --green:         #2fe86b;
  --green-2:       #17c455;
  --green-deep:    #0b7a34;
  --radius:        14px;
  --max:           1140px;
}

*{ margin:0; padding:0; box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  background:var(--bg);
  color:var(--txt);
  font-family:'Poppins', 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-weight:400;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

.container{ width:100%; max-width:var(--max); margin:0 auto; padding:0 24px; }
.center{ text-align:center; }
.green{ color:var(--green); }

/* ---------------------------------------------------------
   BOTÃO
   --------------------------------------------------------- */
.btn{
  display:inline-block;
  padding:16px 30px;
  border-radius:10px;
  background:linear-gradient(100deg,#22e05f 0%, #45f07e 45%, #0fa348 100%);
  color:#062a12;
  font-size:15px;
  font-weight:700;
  letter-spacing:.2px;
  text-decoration:none;
  text-align:center;
  box-shadow:0 0 34px rgba(47,232,107,.28), inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 0 46px rgba(47,232,107,.45), inset 0 1px 0 rgba(255,255,255,.4); filter:brightness(1.05); }
.btn:active{ transform:translateY(0); }

.btn--dark{ width:100%; }

/* Segue o alinhamento do bloco em que está — no hero, tudo à esquerda. */
.btn-hint{
  margin-top:16px;
  font-size:11px;
  line-height:1.5;
  color:var(--txt-mute);
  max-width:34ch;
}

/* ---------------------------------------------------------
   HERO
   --------------------------------------------------------- */
.hero{
  position:relative;
  isolation:isolate;
  padding:0 0 60px;
  overflow:hidden;
}

/* Palco do hero.
   A foto (assets/img/hero.jpg, 1920x640) já vem com fade para o preto da página
   na base e escurecimento nas laterais. Como a proporção do palco é a mesma da
   foto, as notificações podem ser posicionadas em % e caem sempre no mesmo
   ponto em relação ao professor, em qualquer largura de tela. */
.hero__stage{
  position:relative;
  width:100%;
  aspect-ratio:1920 / 640;
  overflow:hidden;
  background:linear-gradient(90deg,#241d17 0%, #0d0f0d 28%, #0a0b0a 70%, #1a1c1a 100%);
}
/* A foto vive no ::before para poder ser animada sozinha,
   sem arrastar as notificações junto. */
.hero__stage::before{
  content:"";
  position:absolute; inset:0; z-index:0;
  background:url('../img/hero.jpg') center top / 100% 100% no-repeat;
}

.hero__vignette{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(180deg, rgba(5,6,5,0) 55%, rgba(5,6,5,.35) 80%, rgba(5,6,5,.85) 100%),
    linear-gradient(90deg, rgba(5,6,5,.45) 0%, transparent 18%, transparent 82%, rgba(5,6,5,.45) 100%);
  pointer-events:none;
}

/* ---- notificações: empurradas para as bordas, longe do professor ---- */
.notif-col{
  position:absolute;
  z-index:2;
  display:flex;
  flex-direction:column;
  gap:1.4%;
  width:20.5%;
  top:34%;
  transition:transform .35s ease-out;   /* usado pelo parallax do mouse */
  will-change:transform;
}
.notif-col--left{ left:3.5%; }
.notif-col--right{ left:76%; }

.notif{
  display:flex;
  align-items:center;
  gap:.7em;
  padding:.75em .9em;
  border-radius:.9em;
  font-size:clamp(8px, .78vw, 13px);   /* escala junto com o palco */
  border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(180deg, rgba(52,54,52,.82), rgba(24,26,24,.72));
  backdrop-filter:blur(6px);
  box-shadow:0 .5em 1.4em rgba(0,0,0,.45);
}
.notif--f2{ opacity:.58; }
.notif--f3{ opacity:.26; }

.notif__icon{
  flex:0 0 auto;
  width:1.7em; height:1.7em;
  border-radius:50%;
  display:grid; place-items:center;
  font-size:.85em; font-weight:700; letter-spacing:.3px;
}
/* documento com carimbo de aprovado */
.notif__icon--doc{
  background:var(--green-2);
  border-radius:.25em;
  position:relative;
}
.notif__icon--doc::after{
  content:"";
  position:absolute; left:.55em; top:.35em;
  width:.35em; height:.7em;
  border:solid #06280f;
  border-width:0 .18em .18em 0;
  transform:rotate(45deg);
}
/* selo do orgão público */
.notif__icon--gov{
  background:#3a3d3a;
  color:#dfe2df;
  border:1px solid rgba(255,255,255,.14);
  font-size:.6em;
}

.notif__text{ display:flex; flex-direction:column; line-height:1.3; min-width:0; }
.notif__text strong{ font-size:1em; font-weight:700; color:#f2f4f2; white-space:nowrap; }
.notif__text span{
  font-size:.82em; color:#b8bcb8;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* ---- marca ---- */
.hero__logo{
  position:relative;
  z-index:3;
  display:flex; flex-direction:column; align-items:center;
  margin:-3.5% auto 42px;   /* sobe um pouco, encostando na base da foto */
  text-align:center;
}
.logo__top{
  font-size:11px;
  font-weight:600;
  letter-spacing:6px;
  color:#e6e8e6;
  padding-left:6px;   /* compensa o letter-spacing do último caractere */
}
.logo__main{
  font-size:34px;
  font-weight:800;
  letter-spacing:-.5px;
  line-height:1;
  color:#f2f4f2;
  margin-top:2px;
}
.logo__main em{ font-style:normal; color:var(--green); }

/* ---- conteúdo hero ---- */
.hero__content{
  position:relative;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:start;
}

.eyebrow{
  font-size:10px;
  font-weight:700;
  letter-spacing:1.4px;
  color:var(--green);
  margin-bottom:12px;
}

.hero h1{
  font-size:38px;
  font-weight:400;
  line-height:1.18;
  letter-spacing:-.5px;
  color:#e9ebe9;
}

.lead{
  font-size:15px;
  font-weight:300;
  line-height:1.6;
  color:#d5d8d5;
  margin-bottom:26px;
}
.lead strong{ font-weight:700; color:#fff; }

.hero__right{ display:flex; flex-direction:column; align-items:flex-start; padding-top:38px; }

/* ---------------------------------------------------------
   BENEFÍCIOS
   --------------------------------------------------------- */
.benefits{ padding:20px 0 70px; }

.benefits__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border:1px solid var(--line);
  border-radius:6px;
  overflow:hidden;
  background:#0b0d0b;
}
.benefit{
  padding:30px 28px 34px;
  border-right:1px solid var(--line);
}
.benefit:last-child{ border-right:none; }

.benefit p{
  font-size:17px;
  font-weight:300;
  line-height:1.35;
  color:#dfe2df;
}
.benefit p strong{ font-weight:700; color:#fff; }

.arrow-up{
  display:block;
  width:26px; height:26px;
  margin-bottom:26px;
  background:
    linear-gradient(to bottom right, transparent calc(50% - 1px), var(--green) calc(50% - 1px), var(--green) calc(50% + 1px), transparent calc(50% + 1px));
  position:relative;
}
.arrow-up::after{
  content:"";
  position:absolute; top:0; right:0;
  width:11px; height:11px;
  border-top:2px solid var(--green);
  border-right:2px solid var(--green);
}

/* ---------------------------------------------------------
   PARA QUEM É
   --------------------------------------------------------- */
.for-who{
  position:relative;
  padding:40px 0 80px;
  overflow:hidden;
}
.for-who__glow{
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(70% 55% at 8% 45%, rgba(23,120,58,.30), transparent 70%),
    radial-gradient(60% 50% at 96% 40%, rgba(23,120,58,.18), transparent 70%);
  pointer-events:none;
}
.for-who .container{ position:relative; z-index:1; }

.section-title{
  font-size:34px;
  font-weight:400;
  line-height:1.2;
  letter-spacing:-.5px;
  text-align:center;
  color:#e9ebe9;
  margin-bottom:44px;
}

.for-who__grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:16px;
  margin-bottom:46px;
}

.fw-card{
  display:flex;
  align-items:center;
  gap:20px;
  padding:22px 24px;
  min-height:96px;
  border-radius:var(--radius);
  background:#1f221f;
  border:1px solid rgba(255,255,255,.04);
}
.fw-card p{
  font-size:13px;
  font-weight:300;
  line-height:1.55;
  color:#c8ccc8;
}
.fw-card p strong{ font-weight:600; color:#eef0ee; }

.arrow-right{
  flex:0 0 auto;
  position:relative;
  width:44px; height:2px;
  background:var(--green);
}
.arrow-right::after{
  content:"";
  position:absolute; right:0; top:50%;
  width:9px; height:9px;
  border-top:2px solid var(--green);
  border-right:2px solid var(--green);
  transform:translateY(-50%) rotate(45deg);
}

/* ---------------------------------------------------------
   ACESSO / OFERTA
   --------------------------------------------------------- */
.access{ padding:60px 0 90px; }

.section-sub{
  text-align:center;
  font-size:13px;
  font-weight:400;
  color:#cfd2cf;
  margin:-26px 0 44px;
}

.access__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  align-items:start;
}

.access__list{
  background:#1a1c1a;
  border-radius:18px;
  padding:34px 30px;
  min-height:420px;
}
.access__list ul{ list-style:none; display:flex; flex-direction:column; gap:22px; }
.access__list li{ display:flex; align-items:flex-start; gap:10px; }
.access__list p{ font-size:13px; font-weight:500; color:#e6e8e6; line-height:1.35; }
.access__list .sub{ font-size:12px; font-weight:400; color:#c2c6c2; }

.check{
  flex:0 0 auto;
  width:14px; height:14px;
  margin-top:2px;
  border-radius:3px;
  background:var(--green-2);
  position:relative;
}
.check::after{
  content:"";
  position:absolute; left:4px; top:1px;
  width:4px; height:8px;
  border:solid #0a2f16;
  border-width:0 2px 2px 0;
  transform:rotate(45deg);
}

/* card claro da oferta */
.offer-card{
  background:#dfe1df;
  color:#1a1c1a;
  border-radius:18px;
  padding:46px 40px 40px;
  min-height:420px;
  display:flex;
  flex-direction:column;
}
.offer-card__text{
  font-size:19px;
  font-weight:300;
  line-height:1.65;
  color:#2a2d2a;
}
.offer-card__text strong{ font-weight:700; color:#101210; }

.offer-card__label{
  margin-top:28px;
  font-size:11px;
  font-weight:700;
  letter-spacing:1.4px;
  color:#5a5e5a;
}

/* placeholder visível: troque o texto e remova a classe .ph */
.ph{
  font-weight:inherit;
  border-bottom:2px dashed #a8aca8;
  color:#6c706c;
}

.offer-card__price{
  font-size:44px;
  font-weight:800;
  letter-spacing:-1px;
  line-height:1.1;
  color:#0d0f0d;
}
.offer-card__price span{ display:block; font-size:14px; font-weight:500; letter-spacing:0; color:#4c504c; }
.offer-card__price small{ font-size:24px; font-weight:700; }

.offer-card__cash{ font-size:13px; color:#4c504c; margin-bottom:24px; }

.offer-card__hint{ margin-top:12px; font-size:11px; text-align:center; color:#5a5e5a; }

/* ---------------------------------------------------------
   O QUE VOCÊ APRENDERÁ
   --------------------------------------------------------- */
.learn{ padding:70px 0 20px; }

.learn__grid{
  list-style:none;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}

.learn-card{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:16px;
  padding:26px 24px 28px;
  min-height:150px;
  border-radius:var(--radius);
  background:#1a1c1a;
  border:1px solid rgba(255,255,255,.05);
  overflow:hidden;
}
.learn-card::before{           /* fio verde no topo do card */
  content:"";
  position:absolute; left:0; top:0;
  width:46px; height:2px;
  background:var(--green);
}
.learn-card__num{
  font-size:13px;
  font-weight:800;
  letter-spacing:1px;
  color:var(--green);
}
.learn-card p{
  font-size:14px;
  font-weight:300;
  line-height:1.55;
  color:#c8ccc8;
}
.learn-card p strong{ font-weight:600; color:#eef0ee; }

/* ---------------------------------------------------------
   BÔNUS
   --------------------------------------------------------- */
.bonus{ padding:50px 0 10px; }

.bonus__card{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:28px;
  padding:28px 32px;
  border-radius:18px;
  background:
    linear-gradient(120deg, rgba(23,120,58,.28) 0%, rgba(16,18,16,.9) 45%, rgba(16,18,16,.9) 100%),
    #101210;
  border:1px solid rgba(47,232,107,.28);
  box-shadow:0 0 50px rgba(47,232,107,.08);
}

.bonus__tag{
  align-self:flex-start;
  padding:7px 13px;
  border-radius:999px;
  background:var(--green);
  color:#062a12;
  font-size:10px;
  font-weight:800;
  letter-spacing:1.2px;
  white-space:nowrap;
}

.bonus__body h3{
  font-size:19px;
  font-weight:500;
  line-height:1.35;
  color:#eef0ee;
  margin-bottom:6px;
}
.bonus__body p{
  font-size:13px;
  font-weight:300;
  color:#b9bdb9;
}

.bonus__date{
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:12px 20px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background:#080a08;
  line-height:1;
}
.bonus__day{ font-size:30px; font-weight:800; color:#f2f4f2; }
.bonus__month{ font-size:11px; font-weight:700; letter-spacing:2px; color:var(--green); margin-top:5px; }
.bonus__year{ font-size:10px; color:var(--txt-mute); margin-top:4px; }

/* ---------------------------------------------------------
   RESULTADOS
   --------------------------------------------------------- */
.results{
  position:relative;
  padding:80px 0;
  overflow:hidden;
}
.results__glow{
  position:absolute; inset:0;
  background:radial-gradient(60% 60% at 50% 50%, rgba(23,120,58,.20), transparent 70%);
  pointer-events:none;
}
.results .container{ position:relative; z-index:1; }

.results__grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
}

.result-card{
  padding:28px 22px;
  border-radius:var(--radius);
  background:rgba(28,30,28,.72);
  border:1px solid rgba(255,255,255,.06);
  backdrop-filter:blur(4px);
}
.result-card p{
  font-size:14px;
  font-weight:300;
  line-height:1.5;
  color:#c8ccc8;
}
.result-card p strong{ font-weight:600; color:#eef0ee; }

/* selo redondo com check */
.result-card__icon{
  display:block;
  width:30px; height:30px;
  margin-bottom:18px;
  border-radius:50%;
  border:2px solid var(--green);
  position:relative;
}
.result-card__icon::after{
  content:"";
  position:absolute; left:9px; top:5px;
  width:6px; height:12px;
  border:solid var(--green);
  border-width:0 2px 2px 0;
  transform:rotate(45deg);
}

/* ---------------------------------------------------------
   PROFESSOR
   --------------------------------------------------------- */
.teacher{ padding:20px 0 80px; }

.teacher__card{
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:center;
  gap:40px;
  padding:38px 44px;
  border-radius:18px;
  background:#141614;
  border:1px solid rgba(255,255,255,.05);
}

.teacher__photo img{
  display:block;
  width:150px; height:150px;
  border-radius:50%;
  object-fit:cover;
  border:2px solid rgba(47,232,107,.45);
  box-shadow:0 0 34px rgba(47,232,107,.16);
}

.teacher__info h3{
  font-size:29px;
  font-weight:600;
  letter-spacing:-.5px;
  color:#f2f4f2;
  margin-bottom:10px;
}
.teacher__bio{
  font-size:15px;
  font-weight:300;
  line-height:1.6;
  color:#c8ccc8;
  max-width:620px;
}
.teacher__bio strong{ font-weight:600; color:#eef0ee; }

.teacher__tags{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:20px;
}
.teacher__tags li{
  padding:6px 13px;
  border-radius:999px;
  border:1px solid rgba(47,232,107,.28);
  background:rgba(47,232,107,.06);
  font-size:11px;
  font-weight:500;
  color:#9fe8b8;
}

/* ---------------------------------------------------------
   FAQ
   --------------------------------------------------------- */
.faq{ padding:20px 0 80px; }

.faq__list{
  display:flex;
  flex-direction:column;
  gap:12px;
  max-width:860px;
  margin:0 auto;
}

.faq__item{
  border-radius:var(--radius);
  background:#1a1c1a;
  border:1px solid rgba(255,255,255,.05);
  overflow:hidden;
}
.faq__item summary{
  list-style:none;
  cursor:pointer;
  padding:20px 56px 20px 24px;
  position:relative;
  font-size:15px;
  font-weight:500;
  color:#e6e8e6;
}
.faq__item summary::-webkit-details-marker{ display:none; }

/* sinal de + que vira − quando aberto */
.faq__item summary::before,
.faq__item summary::after{
  content:"";
  position:absolute; right:24px; top:50%;
  background:var(--green);
  transition:transform .22s ease, opacity .22s ease;
}
.faq__item summary::before{ width:13px; height:2px; transform:translateY(-50%); }
.faq__item summary::after{ width:2px; height:13px; right:29px; transform:translateY(-50%); }
.faq__item[open] summary::after{ transform:translateY(-50%) rotate(90deg); opacity:0; }

.faq__answer{ padding:0 24px 22px; }
.faq__answer p{
  font-size:14px;
  font-weight:300;
  line-height:1.65;
  color:#b9bdb9;
}

/* ---------------------------------------------------------
   CHAMADA FINAL
   --------------------------------------------------------- */
.final{
  position:relative;
  padding:80px 0 100px;
  overflow:hidden;
}
.final__glow{
  position:absolute; inset:0;
  background:radial-gradient(55% 70% at 50% 100%, rgba(23,120,58,.30), transparent 70%);
  pointer-events:none;
}
.final .container{ position:relative; z-index:1; }
.final__title{ margin-bottom:32px; }
.final__hint{ margin-left:auto; margin-right:auto; }

/* ---------------------------------------------------------
   RODAPÉ
   --------------------------------------------------------- */
.footer{
  border-top:1px solid var(--line);
  padding:26px 0;
  text-align:center;
}
.footer p{ font-size:12px; color:var(--txt-mute); }

/* ---------------------------------------------------------
   RESPONSIVO
   --------------------------------------------------------- */
@media (max-width:1000px){
  .learn__grid{ grid-template-columns:repeat(2,1fr); }
  .results__grid{ grid-template-columns:repeat(2,1fr); }
  .bonus__card{ grid-template-columns:1fr auto; gap:20px 24px; }
  .bonus__tag{ grid-column:1 / -1; }
}

@media (max-width:900px){
  .hero__content{ grid-template-columns:1fr; gap:32px; }
  .hero__right{ padding-top:0; }
  .hero h1{ font-size:32px; }
  .benefits__grid{ grid-template-columns:1fr; }
  .benefit{ border-right:none; border-bottom:1px solid var(--line); }
  .benefit:last-child{ border-bottom:none; }
  .for-who__grid{ grid-template-columns:1fr; }
  .access__grid{ grid-template-columns:1fr; }
  .section-title{ font-size:27px; }

  .teacher__card{ grid-template-columns:1fr; justify-items:center; text-align:center; gap:24px; padding:34px 26px; }
  .teacher__tags{ justify-content:center; }
  .teacher__bio{ margin:0 auto; }
}

/* Abaixo de 700px a faixa 3:1 fica baixa demais para as notificações.
   O palco passa a ser mais alto, a foto recorta pela altura mantendo o
   professor enquadrado, e os cards voltam ao fluxo normal. */
@media (max-width:700px){
  .hero__stage{
    aspect-ratio:auto;
    min-height:340px;
    background:#070907;
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:10px;
    padding:22px 14px 20px;
  }
  .hero__stage::before{
    background:url('../img/hero.jpg') 50% top / auto 100% no-repeat;
  }
  /* relative (não static) para continuar acima da foto do ::before */
  .notif-col{ position:relative; top:auto; left:auto; width:auto; flex:1 1 0; gap:6px; max-width:43%; transform:none !important; }
  .notif{ font-size:8px; }
  .notif__text span{ font-size:.78em; }
  .hero__logo{ margin:16px auto 34px; }
  .logo__main{ font-size:26px; }
  .logo__top{ font-size:10px; letter-spacing:4px; }

  .learn__grid{ grid-template-columns:1fr; }
  .results__grid{ grid-template-columns:1fr; }
  .bonus__card{ grid-template-columns:1fr; text-align:left; }
  .bonus__date{ flex-direction:row; align-items:baseline; gap:8px; align-self:flex-start; padding:10px 16px; }
  .bonus__month, .bonus__year{ margin-top:0; }
}

@media (max-width:640px){
  .hero h1{ font-size:27px; }
  .btn{ width:100%; font-size:13px; padding:15px 14px; }
  .offer-card{ padding:32px 24px; }
  .offer-card__text{ font-size:16px; }
  .teacher__info h3{ font-size:24px; }
  .faq__item summary{ font-size:14px; padding:18px 50px 18px 18px; }
  .faq__answer{ padding:0 18px 20px; }
}

/* =========================================================
   ANIMAÇÕES
   Tudo aqui é progressivo: sem JS a página continua legível,
   e quem pede menos movimento no sistema recebe a versão estática.
   ========================================================= */

:root{
  --ease-out-expo:cubic-bezier(.16,1,.3,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
}

/* ---- barra de progresso de leitura ---- */
.progress{
  position:fixed; top:0; left:0; z-index:200;
  height:2px; width:100%;
  transform:scaleX(0); transform-origin:0 50%;
  background:linear-gradient(90deg, var(--green-deep), var(--green));
  box-shadow:0 0 12px rgba(47,232,107,.6);
  pointer-events:none;
}

/* ---- revelação no scroll (classes aplicadas pelo JS) ---- */
.reveal{
  opacity:0;
  transition:
    opacity   .95s var(--ease-out-expo) var(--d,0s),
    transform .95s var(--ease-out-expo) var(--d,0s);
  will-change:opacity, transform;
}
.reveal--up{    transform:translateY(30px); }
.reveal--left{  transform:translateX(-38px); }
.reveal--right{ transform:translateX(38px); }
.reveal--scale{ transform:scale(.955); }
.reveal.is-in{ opacity:1; transform:none; }

/* ---- título montado palavra a palavra ---- */
.w{
  display:inline-block;
  overflow:hidden;
  padding-bottom:.14em;
  margin-bottom:-.14em;
}
.w > i{
  display:inline-block;
  font-style:inherit;
  transform:translateY(115%);
}
.words-in .w > i{
  animation:wordUp .95s var(--ease-out-expo) both;
  animation-delay:calc(var(--i,0) * .04s + var(--base,0s));
}
@keyframes wordUp{
  from{ transform:translateY(115%); }
  to  { transform:translateY(0); }
}

/* ---- entrada do hero ---- */
.hero__stage{ overflow:hidden; }

.hero__stage::before{
  animation:heroPhoto 1.9s var(--ease-out-expo) both;
}
@keyframes heroPhoto{
  from{ opacity:0; transform:scale(1.075); }
  to  { opacity:1; transform:scale(1); }
}

/* As notificações entram pelas laterais e depois flutuam de leve.
   Não há estado escondido em regra própria: o fill-mode `both` já segura
   o quadro inicial durante o delay, e o quadro final implícito herda a
   opacidade de .notif--f2 / .notif--f3. Sem JS, funciona igual. */
.notif{
  animation:
    notifIn .9s var(--ease-out-expo) both var(--d,0s),
    floaty 7s ease-in-out infinite calc(var(--d,0s) + 1.1s);
}
.notif-col--left  .notif{ --from:-46px; }
.notif-col--right .notif{ --from: 46px; }
.notif-col .notif:nth-child(1){ --d:.55s; }
.notif-col .notif:nth-child(2){ --d:.68s; }
.notif-col .notif:nth-child(3){ --d:.81s; }

@keyframes notifIn{
  from{ opacity:0; transform:translateX(var(--from,0)) scale(.94); }
}
@keyframes floaty{
  0%,100%{ transform:translateY(0); }
  50%    { transform:translateY(-5px); }
}

/* o card da frente pulsa devagar, como notificação recém-chegada */
.notif-col .notif:nth-child(1){
  animation:
    notifIn .9s var(--ease-out-expo) both var(--d,0s),
    floaty 7s ease-in-out infinite calc(var(--d,0s) + 1.1s),
    notifGlow 7s ease-in-out infinite calc(var(--d,0s) + 1.1s);
}
@keyframes notifGlow{
  0%,100%{ box-shadow:0 .5em 1.4em rgba(0,0,0,.45), 0 0 0 0 rgba(47,232,107,0); }
  50%    { box-shadow:0 .5em 1.4em rgba(0,0,0,.45), 0 0 0 5px rgba(47,232,107,.07); }
}

/* ---- botão: brilho que atravessa + respiração do glow ---- */
.btn{ position:relative; overflow:hidden; z-index:0; }
.btn::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(105deg, transparent 32%, rgba(255,255,255,.5) 50%, transparent 68%);
  transform:translateX(-130%);
  pointer-events:none;
}
.btn:hover::after{
  transform:translateX(130%);
  transition:transform .8s var(--ease-soft);
}
.btn:not(.btn--dark){ animation:ctaBreathe 3.6s ease-in-out infinite 2s; }
.btn:hover{ animation-play-state:paused; }
@keyframes ctaBreathe{
  0%,100%{ box-shadow:0 0 34px rgba(47,232,107,.28), inset 0 1px 0 rgba(255,255,255,.35); }
  50%    { box-shadow:0 0 54px rgba(47,232,107,.46), inset 0 1px 0 rgba(255,255,255,.35); }
}

/* ---- micro-interações dos cards ---- */
.benefit{ transition:background .45s var(--ease-soft); }
.benefit:hover{ background:#111311; }
.arrow-up{ transition:transform .5s var(--ease-out-expo); }
.benefit:hover .arrow-up{ transform:translate(4px,-4px); }

.fw-card,
.learn-card,
.result-card,
.faq__item{
  transition:
    transform    .55s var(--ease-out-expo),
    background   .45s var(--ease-soft),
    border-color .45s var(--ease-soft),
    box-shadow   .45s var(--ease-soft);
}
.fw-card:hover,
.learn-card:hover,
.result-card:hover{
  transform:translateY(-5px);
  border-color:rgba(47,232,107,.30);
  box-shadow:0 16px 40px rgba(0,0,0,.45);
}
.fw-card:hover{ background:#262926; }
.learn-card:hover,
.result-card:hover{ background:#212421; }

.arrow-right{ transition:width .45s var(--ease-out-expo); }
.fw-card:hover .arrow-right{ width:58px; }

/* o fio verde do card se estende de ponta a ponta */
.learn-card::before{ transition:width .6s var(--ease-out-expo); }
.learn-card:hover::before{ width:100%; }

.result-card__icon{ transition:transform .55s var(--ease-out-expo), box-shadow .45s var(--ease-soft); }
.result-card:hover .result-card__icon{
  transform:scale(1.12);
  box-shadow:0 0 22px rgba(47,232,107,.35);
}

.teacher__photo img{ transition:transform .7s var(--ease-out-expo), box-shadow .5s var(--ease-soft); }
.teacher__card:hover .teacher__photo img{
  transform:scale(1.05);
  box-shadow:0 0 46px rgba(47,232,107,.28);
}
.teacher__tags li{ transition:background .35s var(--ease-soft), color .35s var(--ease-soft); }
.teacher__tags li:hover{ background:rgba(47,232,107,.16); color:#c9f5d9; }

.access__list li{ transition:transform .45s var(--ease-out-expo); }
.access__list li:hover{ transform:translateX(5px); }

/* ---- brilho que segue o cursor na seção "para quem é" ---- */
.for-who__glow{
  background:
    radial-gradient(34% 46% at var(--mx,50%) var(--my,50%), rgba(47,232,107,.14), transparent 70%),
    radial-gradient(70% 55% at 8% 45%, rgba(23,120,58,.30), transparent 70%),
    radial-gradient(60% 50% at 96% 40%, rgba(23,120,58,.18), transparent 70%);
  transition:background-position .3s linear;
}

/* ---- FAQ: abertura com altura animada pelo JS ---- */
.faq__answer{
  overflow:hidden;
  transition:height .42s var(--ease-soft);
}
.faq__item:hover{ border-color:rgba(47,232,107,.22); }
.faq__item[open]{ background:#1e211e; }

/* ---- acessibilidade: sem movimento para quem pediu ---- */
@media (prefers-reduced-motion: reduce){
  *,
  *::before,
  *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .reveal{ opacity:1 !important; transform:none !important; }
  .notif{ opacity:1 !important; }
  .w > i{ transform:none !important; }
  .progress{ display:none; }
}