/* UNIAVAN Academy · Módulo Zero — hub de conversão pós-QR
   Direção: grafite escuro + verde vivo como sinal elétrico. Mobile-first.
   Tipos: Bricolage Grotesque (display) · Hanken Grotesk (texto) · Spline Sans Mono (dados). */
:root{
  --grafite:#1D1D1B; --grafite-2:#131312; --grafite-3:#232320;
  --verde:#1BCE1E; --verde-esc:#0E8C12;
  --bg:#F4F6F3; --card:#FFFFFF; --linha:#E4E7E1;
  --txt:#1D1D1B; --sec:#5C5F58;
  --d-txt:#F3F5F1; --d-sec:#A6A99F; --d-line:rgba(255,255,255,.12); --d-card:#232320;
  --radius:18px; --maxw:1080px;
  --shadow:0 1px 2px rgba(0,0,0,.05), 0 14px 40px rgba(20,22,18,.10);
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:80px; -webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--txt);
  font-family:"Hanken Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:inherit; -webkit-tap-highlight-color:transparent}
h1,h2,h3,h4{font-family:"Bricolage Grotesque",sans-serif; line-height:1.06; letter-spacing:-.02em; margin:0; font-weight:800}

/* ---------- nav ---------- */
.nav{
  position:relative; z-index:3;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 22px; max-width:var(--maxw); margin:0 auto;
}
.brand{display:flex; align-items:center; gap:11px; text-decoration:none}
.brand img{height:26px; width:auto}
.brand-sub{
  font-family:"Spline Sans Mono",monospace; font-weight:500; font-size:12px;
  color:var(--d-sec); letter-spacing:.14em; text-transform:uppercase; padding-top:2px;
}
.nav-cta{
  text-decoration:none; font-weight:600; font-size:13.5px; color:var(--d-txt);
  border:1.5px solid var(--d-line); padding:12px 16px; border-radius:999px; white-space:nowrap;
  transition:border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease);
}
.nav-cta:hover{border-color:var(--verde); color:var(--verde)}
.nav-cta:focus-visible{border-radius:999px}

/* ---------- hero (escuro) ---------- */
.hero{
  position:relative; overflow:hidden;
  background:var(--grafite-2);
  color:var(--d-txt);
  margin-top:-74px; padding-top:74px;
}
/* o nav vive sobre o hero escuro */
.hero ~ * .nav{}
.hero-glow{
  position:absolute; inset:-30% 0 auto 0; height:90%; pointer-events:none; z-index:0;
  background:
    radial-gradient(60% 55% at 70% 12%, rgba(27,206,30,.20), transparent 60%),
    radial-gradient(50% 40% at 12% 0%, rgba(27,206,30,.10), transparent 60%);
}
.hero::after{ /* grade sutil de fundo */
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(120% 80% at 50% 0%, #000 30%, transparent 75%);
          mask-image:radial-gradient(120% 80% at 50% 0%, #000 30%, transparent 75%);
}
.hero-inner{
  position:relative; z-index:1;
  max-width:var(--maxw); margin:0 auto; padding:30px 22px 54px; text-align:center;
}
.badge{
  display:inline-flex; align-items:center; gap:8px;
  font-family:"Spline Sans Mono",monospace; font-size:12.5px; font-weight:500; letter-spacing:.02em;
  color:#D6F5D7; background:rgba(27,206,30,.10); border:1px solid rgba(27,206,30,.30);
  padding:7px 15px; border-radius:999px; margin-bottom:26px;
}
.badge .dot{
  width:7px; height:7px; border-radius:50%; background:var(--verde);
  box-shadow:0 0 0 0 rgba(27,206,30,.55); animation:pulse 2.4s var(--ease) infinite;
}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(27,206,30,.5)}70%{box-shadow:0 0 0 9px rgba(27,206,30,0)}100%{box-shadow:0 0 0 0 rgba(27,206,30,0)}}
.hero h1{
  font-size:clamp(2.4rem,10vw,4.1rem); max-width:14ch; margin:0 auto;
}
.hl{color:var(--verde)}
.hero .lead{
  font-size:clamp(1.04rem,2.6vw,1.24rem); color:var(--d-sec); max-width:52ch;
  margin:22px auto 0; line-height:1.55;
}

/* ---------- as duas rotas (cartões-portal) ---------- */
.paths{
  display:grid; grid-template-columns:1fr 1fr; gap:16px;
  max-width:760px; margin:38px auto 0; text-align:left;
}
.path{
  position:relative; display:flex; flex-direction:column; gap:9px;
  padding:24px 22px 22px; border-radius:var(--radius); text-decoration:none;
  border:1px solid var(--d-line); background:rgba(255,255,255,.035);
  transition:transform .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease), box-shadow .18s var(--ease);
  min-height:170px;
}
.path:hover{transform:translateY(-3px)}
.path-eyebrow{
  display:flex; align-items:center; gap:9px;
  font-family:"Spline Sans Mono",monospace; font-size:11.5px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase;
}
.path-eyebrow .num{
  display:inline-grid; place-items:center; width:22px; height:22px; border-radius:6px;
  font-size:11px; letter-spacing:0;
}
.path-title{font-family:"Bricolage Grotesque",sans-serif; font-weight:800; font-size:1.42rem; letter-spacing:-.02em; line-height:1.1}
.path-desc{font-size:14.5px; line-height:1.5; color:var(--d-sec); flex:1}
.path-desc b{color:var(--d-txt); font-weight:700}
.path-act{
  display:inline-flex; align-items:center; gap:7px; margin-top:6px;
  font-weight:700; font-size:15px;
}
.path-act .arr{width:19px; height:19px; transition:transform .2s var(--ease)}
.path:hover .path-act .arr{transform:translateX(4px)}

/* rota 1 — comunidade (verde, ação imediata) */
.path-go{
  background:var(--verde); border-color:var(--verde); color:var(--grafite-2);
  box-shadow:0 10px 30px rgba(27,206,30,.30);
}
.path-go:hover{background:#23dd26; box-shadow:0 14px 38px rgba(27,206,30,.40)}
.path-go .path-eyebrow{color:rgba(13,13,12,.82)}
.path-go .path-eyebrow .num{background:rgba(13,13,12,.20); color:var(--grafite-2)}
.path-go .path-desc{color:rgba(19,19,18,.74)}
.path-go .path-desc b{color:var(--grafite-2)}
.path-go .path-act{color:var(--grafite-2)}

/* rota 2 — lista de espera (escura, borda verde) */
.path-list{background:var(--d-card); border-color:var(--d-line)}
.path-list:hover{border-color:var(--verde); background:#26261F; box-shadow:0 10px 30px rgba(0,0,0,.28)}
.path-list .path-eyebrow{color:var(--verde)}
.path-list .path-eyebrow .num{background:rgba(27,206,30,.16); color:var(--verde)}
.path-list .path-title{color:var(--d-txt)}
.path-list .path-act{color:var(--verde)}

.hero-note{font-size:13.5px; color:var(--d-sec); margin:26px auto 0}
.hero-note b{color:var(--d-txt); font-family:"Spline Sans Mono",monospace; font-weight:600}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  text-decoration:none; font-family:"Hanken Grotesk",sans-serif; font-weight:700;
  font-size:16px; padding:15px 26px; border-radius:14px; cursor:pointer; border:none;
  transition:transform .08s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--verde); color:var(--grafite-2); box-shadow:0 10px 26px rgba(27,206,30,.34)}
.btn-primary:hover{background:#23dd26; box-shadow:0 14px 34px rgba(27,206,30,.42)}
.btn-block{width:100%; margin-top:6px}

/* ---------- sections base ---------- */
section{max-width:var(--maxw); margin:0 auto}
.sec-head{text-align:center; max-width:46ch; margin:0 auto 32px}
.kicker{
  display:inline-block; font-family:"Spline Sans Mono",monospace; font-size:12px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--verde-esc); margin-bottom:14px;
}
.kicker-dark{color:var(--verde)}
.section-title{font-size:clamp(1.7rem,5vw,2.5rem); letter-spacing:-.025em}
.section-sub{font-size:16px; color:var(--sec); margin:14px auto 0; line-height:1.55}

/* ---------- as três aulas ---------- */
.aulas{padding:62px 22px 30px}
.cards{
  list-style:none; padding:0; margin:0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:18px;
}
.card{
  position:relative; background:var(--card); border:1px solid var(--linha); border-radius:var(--radius);
  padding:24px 22px; box-shadow:var(--shadow); display:flex; flex-direction:column;
  transition:transform .18s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.card:hover{transform:translateY(-3px); border-color:#CFE9D0; box-shadow:0 1px 2px rgba(0,0,0,.05),0 20px 46px rgba(20,22,18,.13)}
.card-top{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:16px}
.card-n{
  font-family:"Spline Sans Mono",monospace; font-size:11.5px; font-weight:600; color:var(--sec);
  letter-spacing:.12em; text-transform:uppercase;
}
.card-date{
  font-family:"Bricolage Grotesque",sans-serif; font-weight:800; font-size:1.6rem; letter-spacing:-.02em;
  color:var(--grafite); line-height:1; font-variant-numeric:tabular-nums;
}
.card-date .sep{color:var(--verde); margin:0 1px}
.card h3{font-size:1.24rem; font-weight:700; margin-bottom:9px; letter-spacing:-.015em}
.card p{font-size:14.5px; color:var(--sec); margin:0 0 20px; flex:1; line-height:1.55}
.kit-link{
  align-self:flex-start; position:relative; display:inline-flex; align-items:center; gap:7px;
  text-decoration:none; font-weight:700; font-size:14.5px; color:var(--verde-esc);
  padding:11px 2px 11px 0; /* área de toque >=44px (WCAG 2.5.5) */
  transition:gap .2s var(--ease);
}
.kit-link::after{content:""; position:absolute; left:0; right:0; bottom:9px; height:2px; background:rgba(27,206,30,.28); transition:background .2s var(--ease)}
.kit-link:hover{gap:10px}
.kit-link:hover::after{background:var(--verde-esc)}
.kit-link .arr-sm{width:16px; height:16px}
.kit-link.locked{
  color:var(--sec); pointer-events:none; font-weight:500;
  font-family:"Spline Sans Mono",monospace; font-size:12.5px; letter-spacing:.02em;
}
.kit-link.locked::after{display:none}
.kit-link.locked .arr-sm{display:none}
/* aula ainda nao estreada: recua visualmente para comunicar a progressao */
.card--locked{opacity:.72}
.card--locked .card-date,.card--locked .card-date .sep{color:var(--sec)}

/* ---------- o que você leva ---------- */
.leva{padding:52px 22px 64px}
.leva-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.leva-item{
  background:transparent; border:1px solid var(--linha); border-radius:var(--radius);
  padding:26px 24px; text-align:left;
}
.leva-ic{
  display:inline-grid; place-items:center; width:48px; height:48px; border-radius:13px;
  background:rgba(27,206,30,.12); color:var(--verde-esc); margin-bottom:15px;
}
.leva-ic svg{width:24px; height:24px}
.leva-item h4{font-family:"Bricolage Grotesque",sans-serif; font-size:1.1rem; font-weight:700; margin-bottom:7px; letter-spacing:-.015em}
.leva-item p{font-size:14.5px; color:var(--sec); margin:0; line-height:1.55}

/* ---------- por que (PAS) + espelho de dor ---------- */
.pas{padding:72px 22px 28px}
.pas-grid{display:grid; grid-template-columns:1.12fr .88fr; gap:40px; align-items:start}
.pas-copy{text-align:left}
.pas-copy .kicker{margin-bottom:12px}
.pas-copy .section-title{text-align:left; max-width:20ch; margin-bottom:18px}
.pas-copy p{font-size:17px; color:var(--sec); margin:0 0 14px; line-height:1.6}
.pas-sol{color:var(--txt)}
.pas-sol b{color:var(--verde-esc); font-weight:700}
.pain{background:var(--grafite-2); color:var(--d-txt); border-radius:var(--radius); padding:30px 28px}
.pain-tag{display:inline-block; font-family:"Spline Sans Mono",monospace; font-size:11.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--verde); margin-bottom:18px}
.pain-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:15px}
.pain-list li{position:relative; padding-left:26px; font-size:15.5px; line-height:1.45; color:#E7E9E4}
.pain-list li::before{content:""; position:absolute; left:0; top:7px; width:9px; height:9px; border-radius:2px; background:var(--verde)}

/* ---------- âncora institucional ---------- */
.anchor{text-align:center; font-family:"Spline Sans Mono",monospace; font-size:12.5px; color:var(--sec); letter-spacing:.01em; margin:38px auto 0}
.anchor b{color:var(--grafite); font-weight:600}

/* ---------- faq ---------- */
.faq{padding:26px 22px 66px}
.faq-list{max-width:680px; margin:0 auto; display:flex; flex-direction:column; gap:12px}
.faq details{background:var(--card); border:1px solid var(--linha); border-radius:14px; padding:0 20px; transition:border-color .2s var(--ease)}
.faq details[open]{border-color:#CFE9D0}
.faq summary{list-style:none; cursor:pointer; font-family:"Bricolage Grotesque",sans-serif; font-weight:700; font-size:1.04rem; color:var(--grafite); padding:17px 32px 17px 0; position:relative; letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; position:absolute; right:0; top:50%; transform:translateY(-50%); font-weight:600; font-size:24px; line-height:1; color:var(--verde-esc); transition:transform .2s var(--ease)}
.faq details[open] summary::after{content:"\2013"}
.faq details > p{margin:0 0 18px; font-size:15px; color:var(--sec); line-height:1.55}

/* ---------- fechamento (CTA de comunidade repetido) ---------- */
.closing{background:var(--grafite-2); color:var(--d-txt); text-align:center; padding:52px 22px; max-width:none; width:100%; border-top:1px solid rgba(255,255,255,.07)}
.closing-txt{font-size:16px; color:var(--d-sec); max-width:42ch; margin:0 auto 22px; line-height:1.5}
.btn-ghost-d{background:transparent; color:var(--d-txt); border:1.5px solid var(--d-line)}
.btn-ghost-d:hover{border-color:var(--verde); color:var(--verde)}
.btn-ghost-d .arr{width:19px; height:19px; margin-left:2px}

/* ---------- sticky CTA (mobile) ---------- */
.sticky-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:40; display:none;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  background:linear-gradient(to top, rgba(19,19,18,.97) 60%, rgba(19,19,18,.80));
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  transform:translateY(130%); transition:transform .3s var(--ease);
}
.sticky-cta .btn{width:100%; box-shadow:0 8px 24px rgba(0,0,0,.4)}
.sticky-cta.show{transform:none}

/* ---------- lista de espera (banda escura) ---------- */
.espera{
  max-width:none; width:100%;
  background:var(--grafite-2); color:var(--d-txt);
  padding:64px 22px; position:relative; overflow:hidden;
}
.espera::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(50% 60% at 50% 0%, rgba(27,206,30,.14), transparent 60%);
}
.espera-card{position:relative; max-width:560px; margin:0 auto; text-align:center}
.espera-card h2{font-size:clamp(1.6rem,5vw,2.3rem); color:var(--d-txt); letter-spacing:-.025em}
.espera-sub{color:var(--d-sec); font-size:15.5px; margin:14px auto 18px; max-width:48ch; line-height:1.55}
.espera-sub b{color:var(--verde)}
.espera-date{font-family:"Spline Sans Mono",monospace; font-size:12.5px; color:var(--d-sec); margin:0 auto 26px; letter-spacing:.01em; max-width:46ch}
.espera-date b{color:var(--verde); font-family:inherit; font-weight:600}
.form-msg{text-align:center; font-size:15px; margin:16px 0 0; min-height:1.2em; font-weight:600}
.form-msg.ok{color:var(--verde)}
.form-msg.err{color:#ff9885}
.form-after{text-align:center; font-size:14.5px; margin:10px 0 0}
.form-after a{color:var(--verde); font-weight:700; text-underline-offset:2px}
.field{margin-bottom:13px; text-align:left}
.field label{display:block; font-size:13.5px; font-weight:600; color:#E1E3DE; margin-bottom:7px}
.field .opt{font-weight:400; color:var(--d-sec)}
.field input,.field select{
  width:100%; font-family:inherit; font-size:16px; color:var(--grafite);
  background:#fff; border:1.5px solid transparent; border-radius:12px; padding:14px 15px;
  transition:border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.field input::placeholder{color:#9a9d97}
.field select{
  appearance:none; -webkit-appearance:none; padding-right:40px; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%235C5F58' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 15px center;
}
.field input:focus,.field select:focus{outline:none; border-color:var(--verde); box-shadow:0 0 0 4px rgba(27,206,30,.18)}
.field input[aria-invalid="true"],.field select[aria-invalid="true"]{border-color:#ff9885; box-shadow:0 0 0 4px rgba(255,152,133,.16)}
.hp{position:absolute; left:-9999px; width:1px; height:1px; opacity:0}
.reassure{text-align:center; font-size:13px; color:var(--d-sec); margin:12px 0 0}
.priv{font-size:12.5px; color:var(--d-sec); text-align:center; margin:14px 0 0}
.priv a{color:#cfd2cc; text-underline-offset:2px}

/* ---------- footer ---------- */
.foot{
  background:#0E0E0D; color:var(--d-sec); text-align:center;
  padding:38px 22px;
}
.foot-logo{height:24px; width:auto; margin:0 auto 14px; opacity:.92}
.foot p{margin:4px 0; font-size:13px}
.foot-links a{color:#cfd2cc; text-underline-offset:2px}

/* ---------- motion: reveal ---------- */
[data-reveal]{opacity:0; transform:translateY(18px); transition:opacity .6s var(--ease), transform .6s var(--ease)}
[data-reveal].in{opacity:1; transform:none}
.cards [data-reveal].in:nth-child(2){transition-delay:.07s}
.cards [data-reveal].in:nth-child(3){transition-delay:.14s}
.leva-grid [data-reveal].in:nth-child(2){transition-delay:.07s}
.leva-grid [data-reveal].in:nth-child(3){transition-delay:.14s}

/* hero entra no load */
.hero-inner > *{animation:rise .7s var(--ease) both}
.hero-inner > .badge{animation-delay:.02s}
.hero-inner > h1{animation-delay:.08s}
.hero-inner > .lead{animation-delay:.16s}
.hero-inner > .paths{animation:rise .7s var(--ease) both .24s}
.hero-inner > .hero-note{animation-delay:.34s}
@keyframes rise{from{opacity:0; transform:translateY(16px)}to{opacity:1; transform:none}}

/* ---------- responsivo ---------- */
@media (max-width:720px){
  .cards,.leva-grid{grid-template-columns:1fr}
  .pas-grid{grid-template-columns:1fr; gap:24px}
  .pas{padding-top:56px}
  .aulas{padding-top:52px}
  .leva-item{padding:22px}
  .sticky-cta{display:block}
}
@media (max-width:560px){
  body{font-size:16px}
  .nav{padding:16px 18px}
  .brand-sub{display:none}
  .hero-inner{padding:22px 18px 46px}
  .hero h1{font-size:clamp(2.3rem,11vw,3rem)}
  .paths{grid-template-columns:1fr; gap:13px; margin-top:30px}
  .path{min-height:0; padding:22px 20px}
  .path-go{order:0}
  .pas,.aulas,.leva,.faq{padding-left:18px; padding-right:18px}
  .pas{padding-top:52px}
  .pain{padding:24px 22px}
  .espera{padding:52px 18px}
  .closing{padding-left:18px; padding-right:18px}
}

/* ---------- acessibilidade ---------- */
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important; scroll-behavior:auto !important}
  [data-reveal]{opacity:1; transform:none}
}
:focus-visible{outline:2.5px solid var(--verde); outline-offset:3px; border-radius:6px}