/* Trecon Treinamentos · Home (complementa style.css) */
@keyframes lineUp{from{transform:translateY(110%)}to{transform:none}}
@keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes mqr{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@keyframes glow{0%,100%{text-shadow:0 0 0 rgba(255,196,0,0)}50%{text-shadow:0 0 40px rgba(255,196,0,.65)}}
@keyframes scrollDot{0%{transform:translateY(0);opacity:1}100%{transform:translateY(18px);opacity:0}}
@keyframes spark{0%{stroke-dashoffset:600}100%{stroke-dashoffset:0}}
@keyframes drift{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

:root{--o:2.3s}
:root:not(.js),:root.seen{--o:0s}
html{scroll-behavior:auto}
body.cur *{cursor:none!important}
@media (pointer:coarse){body.cur *{cursor:auto!important}}

/* preloader */
#pre{display:none;position:fixed;inset:0;z-index:100;background:var(--navy);flex-direction:column;align-items:center;justify-content:center;gap:28px;transition:transform 1.1s cubic-bezier(.77,0,.18,1);color:var(--cream)}
.js:not(.seen) #pre{display:flex}
#pre.done{transform:translateY(-100%)}
#preFill{width:300px;max-width:70vw;aspect-ratio:710/455;overflow:hidden;clip-path:inset(0 100% 0 0)}
#preFill img{display:block;width:101.4%;margin:-18.3% 0 0 -.7%}
#pre .pn{font:400 14px var(--mono);letter-spacing:.2em;color:#8A93A6}

/* cursor personalizado */
#cur{position:fixed;left:0;top:0;z-index:95;pointer-events:none;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:var(--yellow);display:none;align-items:center;justify-content:center;font:600 13px var(--body);color:var(--navy);transition:width .35s var(--ease),height .35s var(--ease),margin .35s var(--ease)}
#cur.on{display:flex}

/* linha de circuito de progresso */
#circ{position:fixed;left:22px;top:0;bottom:0;width:2px;background:rgba(127,140,165,.2);z-index:40;pointer-events:none}
#circF{width:100%;height:100%;background:linear-gradient(var(--blue),var(--yellow));transform-origin:top;transform:scaleY(0);box-shadow:0 0 12px var(--yellow)}
@media (max-width:799px){#circ{display:none}}

/* header some ao rolar para baixo */
.home .hd{transition:transform .7s var(--ease)}
.home .hd.hide{transform:translateY(-110%)}

/* hero */
.fu{animation:fadeUp var(--dur,1s) calc(var(--o) + var(--d,0s)) both var(--ease)}
#hero{position:relative;min-height:100vh;display:flex;align-items:center;padding:140px var(--pad) 90px;overflow:hidden;background:radial-gradient(1200px 600px at 75% 30%,rgba(47,107,255,.22),transparent 60%),var(--navy)}
#hero .grid-bg{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:64px 64px;-webkit-mask-image:radial-gradient(ellipse at 60% 40%,#000 20%,transparent 75%);mask-image:radial-gradient(ellipse at 60% 40%,#000 20%,transparent 75%)}
#heroCirc{position:absolute;inset:0;width:100%;height:100%;opacity:.25;pointer-events:none}
.hero-in{position:relative;z-index:2;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,460px),1fr));gap:48px;align-items:center;width:100%;max-width:1360px;margin:0 auto}
.kick{font:500 13px var(--mono);letter-spacing:.18em;color:var(--yellow);margin-bottom:26px}
#hero h1{margin:0;font:700 clamp(44px,6.2vw,96px)/1 var(--head);letter-spacing:-.035em;color:var(--cream)}
#hero h1 .ln{display:block;overflow:hidden;padding-bottom:.08em}
#hero h1 .ln>span{display:block;animation:lineUp 1.1s calc(var(--o) + var(--d)) both var(--ease)}
#hero h1 em{font-style:italic;color:var(--yellow);animation:glow 3.2s calc(var(--o) + 1.3s) infinite}
#hero .sub{font:600 clamp(18px,1.8vw,24px)/1.3 var(--head);margin:30px 0 10px;color:var(--cream)}
#hero .txt{max-width:520px;font-size:17px;line-height:1.6;color:var(--gray);margin:0 0 36px}
.ctas{display:flex;flex-wrap:wrap;gap:14px}
.ctas a{padding:17px 30px;border-radius:999px;display:inline-flex;gap:10px}
.ctas .b1{--fill:#fff;background:var(--yellow);color:var(--navy);font-weight:700}
.ctas .b2{--fill:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.35);color:var(--cream);font-weight:600}
#heroImg{position:relative}
#heroImg .shot{aspect-ratio:4/5;max-height:640px;width:100%;border-radius:28px;border:1px solid rgba(255,255,255,.14);background:repeating-linear-gradient(135deg,#142038 0 14px,#101a2e 14px 28px);padding:22px;font:500 12px var(--mono);color:#7d89a3;letter-spacing:.08em;box-shadow:0 40px 100px rgba(47,107,255,.18)}
#heroImg .seal{position:absolute;left:-26px;bottom:48px;background:var(--yellow);color:var(--navy);font:700 14px var(--head);padding:14px 20px;border-radius:16px;box-shadow:0 18px 40px rgba(0,0,0,.4);animation:drift 5s ease-in-out infinite}
@media (max-width:560px){#heroImg .seal{left:12px}}
.mouse{position:absolute;left:50%;bottom:28px;margin-left:-12px;width:24px;height:40px;border:1.5px solid rgba(255,255,255,.4);border-radius:14px;display:flex;justify-content:center;padding-top:8px}
.mouse span{width:4px;height:6px;border-radius:2px;background:var(--yellow);animation:scrollDot 1.6s infinite}

/* marquee */
.mq{background:var(--yellow);color:var(--navy);overflow:hidden;padding:20px 0;border-block:1px solid var(--navy)}
.mq>div{display:flex;width:max-content;animation:mq 30s linear infinite;font:700 clamp(28px,4vw,54px) var(--head);letter-spacing:-.01em;white-space:nowrap}
.mq>div>span{padding:0 28px}
.mq .dot{opacity:.5}

/* cursos com scroll horizontal fixado */
#cursos{background:var(--navy);position:relative}
#hsSticky{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;flex-direction:column;justify-content:center;gap:40px;padding-top:70px}
.hs-hd{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px;padding:0 var(--pad)}
.hs-hd h2{margin:0;overflow:hidden;font:700 clamp(40px,6vw,88px)/1 var(--head);letter-spacing:-.03em;padding-bottom:.08em}
.hs-hd em{color:var(--yellow)}
.chips.sm{gap:8px}
.chips.sm button{padding:11px 22px}
#hsTrack{display:flex;gap:24px;padding:0 var(--pad);will-change:transform;width:max-content}
.hc{flex:none;width:min(400px,82vw);min-height:440px;border:1px solid rgba(255,255,255,.12);border-radius:24px;background:var(--card);overflow:hidden;display:flex;flex-direction:column;transition:transform .7s var(--ease),border-color .5s,box-shadow .5s}
.hc[hidden]{display:none}
.hc:hover{transform:translateY(-10px);border-color:var(--yellow);box-shadow:0 24px 70px rgba(255,196,0,.18)}
.hc .top{height:150px;overflow:hidden;position:relative}
.hc .top .ph-img{position:absolute;inset:0;padding:12px;background:repeating-linear-gradient(135deg,#17254a 0 12px,#13203d 12px 24px)}
.hc .num{position:absolute;right:18px;top:6px;font:700 84px/1 var(--head);color:var(--yellow);letter-spacing:-.04em}
.hc .bd{padding:26px;display:flex;flex-direction:column;gap:12px;flex:1}
.hc .ico{width:34px;height:34px;border:1.5px solid var(--yellow);border-radius:10px;display:grid;place-items:center;color:var(--yellow);font-size:16px}
.hc h3{margin:0;font:600 22px/1.2 var(--head);color:var(--cream)}
.hc p{margin:0;color:var(--gray);font-size:15px;line-height:1.55;flex:1}
.hc .bd>a{color:var(--yellow);font-weight:700;display:inline-flex;gap:10px;align-items:center;margin-top:6px}
.all{flex:none;width:min(340px,70vw);display:flex;align-items:center;padding-right:60px}
.all a{--fill:#fff;background:var(--yellow);color:var(--navy);font-weight:700;padding:20px 32px;border-radius:999px}
.all a:hover{color:var(--navy)}
.hs-bar{padding:0 var(--pad)}
.hs-bar>div{height:2px;background:rgba(255,255,255,.12)}
#hsBar{display:block;height:100%;background:var(--yellow);transform-origin:left;transform:scaleX(0)}
@media (max-width:899px){
  #hsSticky{position:static;height:auto;padding:90px 0 60px;gap:32px}
  #hsTrack{width:auto;overflow-x:auto;scroll-snap-type:x mandatory;gap:16px;padding:0 24px 8px;transform:none!important}
  .hc{scroll-snap-align:start}
  .all{padding-right:24px}
  .hs-bar{display:none}
}

/* sobre */
.about{padding:clamp(80px,12vw,170px) var(--pad);overflow:hidden}
.ab-img{aspect-ratio:4/5;border-radius:24px;overflow:hidden}
.ab-img .ph-img{height:118%}
.seal2{position:absolute;right:-18px;top:-26px;width:110px;height:110px;border-radius:50%;background:var(--yellow);display:grid;place-items:center;font:700 14px var(--head);text-align:center;line-height:1.2}
@media (max-width:560px){.seal2{right:8px}}
.ab-h{overflow:hidden;margin:0 0 28px;font:700 clamp(34px,4.4vw,62px)/1.04 var(--head);letter-spacing:-.03em;padding-bottom:.08em}
.big-q{overflow:hidden;max-width:1360px;margin:clamp(70px,9vw,130px) auto 0;font:700 clamp(36px,6.4vw,96px)/1.02 var(--head);letter-spacing:-.035em;padding-bottom:.1em}
.big-q em{color:var(--blue)}

/* números */
.stats{padding:clamp(60px,8vw,110px) var(--pad)}
.sgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:32px}
.stat{border-top:2px solid var(--yellow);padding-top:20px}
.stat .v{font:700 clamp(56px,7vw,100px)/1 var(--head);letter-spacing:-.04em;color:var(--cream)}
.stat .y{color:var(--yellow)}
.stat .l{margin-top:10px;font-size:16px;color:var(--gray)}
.stat .n{margin-top:8px;font:500 10px var(--mono);color:var(--yellow);letter-spacing:.12em}

/* diferenciais */
.perks{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:20px}
.perk{background:#fff;border:1px solid #e3dfd2;border-radius:22px;padding:30px;display:flex;flex-direction:column;gap:14px;min-height:260px}
.js .perk[data-r]{transition:opacity 1s var(--ease),transform 1s var(--ease),border-color .5s,box-shadow .5s}
.perk.in:hover{transform:translateY(-8px);border-color:var(--yellow);box-shadow:0 22px 60px rgba(11,18,32,.12)}
.perk .pn{font:700 44px var(--head);color:var(--yellow);-webkit-text-stroke:1.5px var(--navy);letter-spacing:-.03em}
.perk h3{margin:0;font:600 22px/1.2 var(--head)}
.perk p{margin:0;color:#4b5365;line-height:1.6;font-size:16px}

/* depoimentos */
#slides{display:flex;transition:transform 1s var(--ease)}
#slides figure{flex:none;width:100%;margin:0;padding-right:2px}
.qc{border:1px solid rgba(255,255,255,.14);border-radius:28px;padding:clamp(28px,5vw,64px);background:var(--card);min-height:300px;display:flex;flex-direction:column;justify-content:space-between;gap:30px}
.qc blockquote{margin:0;font:600 clamp(22px,3vw,40px)/1.25 var(--head);color:var(--cream);letter-spacing:-.015em}
.qc blockquote.ph-q{color:#6f7d9b}
.qc blockquote>span{color:var(--yellow)}
.qc figcaption{display:flex;align-items:center;gap:14px}
.qc .av{width:48px;height:48px;border-radius:50%;background:var(--yellow);display:grid;place-items:center;color:var(--navy);font:700 18px var(--head)}
.qc b{display:block;color:var(--cream)}
.qc small{font-size:14px;color:var(--gray)}
.sl-ctl{display:flex;gap:12px;margin-top:24px;align-items:center}
.sl-ctl button{width:52px;height:52px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:none;color:var(--cream);font-size:20px}
.sl-ctl button.y{border:0;background:var(--yellow);color:var(--navy)}
.sl-ctl span{font:500 13px var(--mono);color:var(--gray);margin-left:10px}

/* clientes */
.logos{display:flex;width:max-content;animation:mqr 40s linear infinite;gap:20px;padding-left:20px}
.logos>div{width:200px;height:86px;border:1.5px dashed #b9b3a0;border-radius:16px;display:grid;place-items:center;font:500 11px var(--mono);color:var(--sand);letter-spacing:.08em;text-align:center}

/* blog */
.blog-hd{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:48px}
.hb{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));gap:22px}
.hb>a{display:block;color:var(--cream)}
.hb .img{aspect-ratio:4/3;border-radius:20px;overflow:hidden;position:relative;margin-bottom:18px}
.hb .img .ph-img{position:absolute;inset:0;padding:12px;background:repeating-linear-gradient(135deg,#17254a 0 12px,#13203d 12px 24px)}
.hb .cat{margin-bottom:10px}
.hb h3{margin:0 0 12px;font:600 20px/1.25 var(--head);color:var(--cream)}
.hb .meta{font-size:14px;color:#8A93A6}

/* CTA final */
.end{position:relative;min-height:90vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:44px;text-align:center;padding:100px 24px;background:radial-gradient(900px 500px at 50% 50%,rgba(255,196,0,.14),transparent 70%),var(--navy-2);overflow:hidden;border-top:1px solid rgba(255,255,255,.08)}
.end svg{position:absolute;inset:0;width:100%;height:100%;opacity:.35}
.end h2{position:relative;overflow:hidden;margin:0;font:700 clamp(44px,9vw,140px)/1 var(--head);letter-spacing:-.04em;padding-bottom:.1em;color:var(--cream)}
.end h2 em{color:var(--yellow)}
.end>a{--fill:#fff;position:relative;background:var(--yellow);color:var(--navy);font:700 clamp(16px,1.6vw,22px) var(--head);padding:26px 46px;border-radius:999px}
.end>a:hover{color:var(--navy)}

/* rodapé com texto gigante */
.home-ft{padding-bottom:0;overflow:hidden}
.home-ft .giant{overflow:hidden;line-height:.8;margin-top:30px}
.home-ft .giant>div{overflow:hidden;text-align:center;font:700 clamp(90px,26vw,420px)/.9 var(--head);letter-spacing:-.05em;color:transparent;-webkit-text-stroke:2px var(--yellow);padding-bottom:.04em;margin-bottom:-.12em}

@media (prefers-reduced-motion:reduce){
  .fu,#hero h1 .ln>span{animation-duration:.01s!important;animation-delay:0s!important}
  .mq>div,.logos{animation:none}
}

/* fotos reais */
#heroImg img.shot{display:block;object-fit:cover;object-position:30% center}
.ab-img #par1{display:block;width:100%;height:118%;object-fit:cover}
.hb .img img[data-zoom]{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}