:root{--navy:#06111e;--navy2:#0b1f34;--blue:#2b86ff;--ice:#edf5ff;--red:#eb2439;--ink:#0f1720;--muted:#667281;--line:#dce4ec;--white:#fff;--shell:min(1180px,calc(100% - 48px));}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:'DM Sans',sans-serif;color:var(--ink);background:#f7f9fb;overflow-x:hidden}a{text-decoration:none;color:inherit}img{display:block;width:100%}.shell{width:var(--shell);margin:auto}.micro{font-size:11px;letter-spacing:.28em;font-weight:800;color:#38506b}.micro.light{color:#8ec2ff}.header{position:fixed;inset:0 0 auto;z-index:40;padding:18px 0;transition:.35s;background:linear-gradient(180deg,rgba(4,13,24,.78),transparent)}.header.scrolled{background:rgba(4,13,24,.94);backdrop-filter:blur(18px);border-bottom:1px solid rgba(255,255,255,.08);padding:12px 0}.nav{display:flex;align-items:center;gap:32px}.brand{display:flex;align-items:center;color:#fff;font-family:'Manrope',sans-serif;font-weight:800;letter-spacing:.06em}.nav-links{display:flex;gap:25px;margin-left:auto}.nav-links a{font-size:13px;color:rgba(255,255,255,.82)}.nav-links a:hover{color:#fff}.buy-top{background:#fff;color:#0b1624;padding:13px 18px;border-radius:999px;font-size:13px;font-weight:700}.buy-top span{margin-left:16px}.menu-btn,.mobile-nav{display:none}
.hero{position:relative;min-height:760px;background:radial-gradient(circle at 70% 20%,#163f68 0,transparent 38%),linear-gradient(135deg,#07111f 0%,#08192a 58%,#091421 100%);color:#fff;overflow:hidden;padding-top:90px}.hero:after{content:"";position:absolute;inset:auto 0 0;height:170px;background:linear-gradient(180deg,transparent,rgba(5,14,24,.55))}.hero-noise{position:absolute;inset:0;opacity:.12;background-image:radial-gradient(rgba(255,255,255,.7) .6px,transparent .6px);background-size:5px 5px;mix-blend-mode:soft-light}.hero-orb{position:absolute;width:520px;height:520px;border:1px solid rgba(70,143,255,.28);border-radius:50%;right:-160px;top:80px;box-shadow:0 0 120px rgba(36,111,211,.16)}.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:54px;align-items:center;min-height:680px;position:relative;z-index:2}.kicker{font-size:10px;letter-spacing:.28em;color:#a6c8ec;display:flex;align-items:center;gap:14px}.kicker span{width:28px;height:1px;background:#5aa2ff}.hero h1{font-family:'Manrope',sans-serif;font-size:clamp(52px,5.8vw,86px);line-height:.94;letter-spacing:-.055em;margin:22px 0 24px}.hero h1 em{font-style:normal;font-weight:400;color:#70aefa}.hero-copy>p{max-width:620px;font-size:17px;line-height:1.7;color:#c7d2df}.hero-actions{display:flex;gap:14px;margin:34px 0 42px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:18px;padding:15px 21px;border-radius:999px;font-size:14px;font-weight:700;transition:.25s}.btn.primary{background:var(--red);color:#fff;box-shadow:0 10px 28px rgba(235,36,57,.25)}.btn.primary:hover{transform:translateY(-2px)}.btn.ghost{border:1px solid rgba(255,255,255,.45);color:#fff}.btn.white{background:#fff;color:#0b1624}.btn.ghost-white{border:1px solid rgba(255,255,255,.4);color:#fff}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:0;max-width:620px}.stats div{padding-right:26px;border-right:1px solid rgba(255,255,255,.18)}.stats div+div{padding-left:26px}.stats div:last-child{border-right:0}.stats strong{display:block;font-size:24px;font-family:'Manrope';color:#80b8ff}.stats span{display:block;margin-top:5px;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#9eacba}.hero-media{position:relative;height:620px}.hero-photo-wrap{position:absolute;right:-6vw;top:0;width:600px;height:620px;border-radius:0 0 0 70px;overflow:hidden;box-shadow:-40px 30px 90px rgba(0,0,0,.3)}.hero-photo-wrap:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#07111f 0,rgba(7,17,31,.18) 38%,rgba(7,17,31,.04) 100%)}.hero-photo-wrap img{height:100%;object-fit:cover;object-position:48% center;filter:saturate(.9) contrast(1.04)}.hero-note{position:absolute;right:8px;font:italic 34px/1.05 Georgia,serif;color:rgba(255,255,255,.82);z-index:2;transform:rotate(-6deg)}.note-a{top:60px}.note-b{top:100px}.note-c{top:140px}.side-caption{position:absolute;right:-20px;bottom:36px;writing-mode:vertical-rl;font-size:9px;letter-spacing:.22em;color:#b5c9da;z-index:2}.scroll-cue{position:absolute;left:22px;bottom:90px;z-index:3;writing-mode:vertical-rl;color:#8fa4b7;font-size:9px;letter-spacing:.24em}.scroll-cue i{display:inline-block;width:1px;height:55px;background:#6f8ba6;margin-top:12px}
.paths{padding:90px 0 105px;background:#fff}.paths-head,.section-head,.course-top{display:grid;grid-template-columns:1.05fr .95fr;gap:100px;align-items:end}.paths-head h2,.section-head h2,.connect-head h2,.results-copy h2{font-family:'Manrope';font-size:clamp(42px,4.2vw,64px);line-height:1.02;letter-spacing:-.045em;margin:12px 0 0}.paths-head h2 b,.section-head h2 b,.connect-head h2 b,.results-copy h2 b{font-weight:400;color:#254a72}.paths-head p,.section-head p{font-size:16px;line-height:1.75;color:#697789;max-width:520px}.path-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:52px}.path-card{min-height:330px;padding:26px;border-radius:24px;color:#fff;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;transition:.3s;isolation:isolate}.path-card:before{content:"";position:absolute;inset:0;z-index:-1;transition:.4s}.path-card:hover{transform:translateY(-7px)}.path-card:hover:before{transform:scale(1.04)}.p1:before{background:linear-gradient(180deg,rgba(6,15,25,.12),rgba(5,14,24,.90)),url('../img/capacitar.webp') center/cover no-repeat}.p2:before{background:linear-gradient(180deg,rgba(6,15,25,.10),rgba(5,14,24,.90)),url('../img/equipe.webp') center/cover no-repeat}.p3:before{background:linear-gradient(180deg,rgba(6,15,25,.10),rgba(5,14,24,.90)),url('../img/connect.webp') center/cover no-repeat}.path-card .label{font-size:9px;letter-spacing:.18em;font-weight:700;color:#dce9f6}.path-card h3{font:700 25px/1.15 'Manrope';margin:10px 0}.path-card p{margin:0;color:#d9e0e7;line-height:1.6;font-size:14px;max-width:88%}.path-card b{position:absolute;right:24px;bottom:22px;width:42px;height:42px;border:1px solid rgba(255,255,255,.45);border-radius:50%;display:grid;place-items:center}.editorial-break{position:relative;background:linear-gradient(145deg,#07111d,#0a2035);color:#fff;padding:105px 0;overflow:hidden}.editorial-break:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 18% 50%,rgba(48,133,242,.32),transparent 38%),linear-gradient(120deg,transparent 60%,rgba(255,255,255,.04));}.editorial-grid{display:grid;grid-template-columns:.8fr 1.3fr .55fr;gap:48px;align-items:center;position:relative}.editorial-copy h2{font:600 46px/1.08 'Manrope';letter-spacing:-.04em;margin:14px 0 20px}.editorial-copy p{color:#b7c4d1;line-height:1.8}
.solutions{padding:105px 0;background:#f7f9fb}.solution-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:52px}.solution-card{background:#fff;border:1px solid #e2e8ee;border-radius:22px;padding:24px;min-height:300px;display:flex;flex-direction:column;transition:.28s}.solution-card:hover{transform:translateY(-6px);box-shadow:0 18px 55px rgba(20,43,66,.10)}.solution-card>span{font-size:11px;color:#8a98a7}.solution-icon{font-size:32px;margin:36px 0 20px;color:#2d78ce}.solution-card h3{font:700 22px/1.1 'Manrope';margin:0 0 12px}.solution-card p{font-size:14px;line-height:1.65;color:#718091}.solution-card a{margin-top:auto;font-size:13px;font-weight:700}.solution-card.featured{background:#0a1a2b;color:#fff;border-color:#0a1a2b}.solution-card.featured p{color:#b7c4d1}.solution-card.featured a{color:#7fb4ff}
.course-section{background:#07111e;color:#fff;padding:0 0 110px;overflow:hidden}.course-marquee{white-space:nowrap;overflow:hidden;border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08);padding:18px 0;color:rgba(255,255,255,.1);font:800 58px/1 'Manrope'}.course-marquee span{display:inline-block;animation:marquee 22s linear infinite}@keyframes marquee{to{transform:translateX(-100%)}}.course-top{padding-top:95px}.course-top h2{font:600 54px/1.03 'Manrope';letter-spacing:-.045em;margin:12px 0}.course-top h2 em{font-style:normal;color:#6faeff;font-weight:400}.course-top p{color:#9eb0c2;line-height:1.75}.course-list{margin-top:48px;border-top:1px solid rgba(255,255,255,.12)}.course-row{display:grid;grid-template-columns:60px 1.1fr 1.4fr 80px 150px;gap:20px;align-items:center;padding:24px 0;border-bottom:1px solid rgba(255,255,255,.12)}.course-row .num{font-size:11px;color:#62809d}.course-meta small{font-size:9px;letter-spacing:.15em;color:#6da9ea;text-transform:uppercase}.course-meta h3{font:700 23px/1.1 'Manrope';margin:5px 0 0}.course-row p{font-size:13px;line-height:1.65;color:#aab9c7}.hours{font-weight:700;color:#dce9f6}.course-arrow{font-size:13px;font-weight:700;text-align:right}.course-arrow b{margin-left:14px}.course-note{margin-top:26px;display:flex;justify-content:space-between;color:#9fb0bf;font-size:13px}.course-note a{color:#fff;font-weight:700}
.modalities{padding:105px 0;background:#fff}.modality-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:80px}.modality-copy h2{font:600 48px/1.04 'Manrope';letter-spacing:-.04em;margin:12px 0}.modality-copy h2 b{font-weight:400;color:#35689d}.modality-copy p{color:#718091;line-height:1.7}.modality-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px}.modality-cards article{border:1px solid #e0e7ee;border-radius:18px;padding:24px;min-height:190px;background:#f9fbfd;position:relative}.modality-cards span{font-size:10px;color:#8c9baa}.modality-cards h3{font:700 21px 'Manrope';margin:45px 0 9px}.modality-cards p{font-size:13px;color:#748191;line-height:1.6}
.b2b{position:relative;background:#0d1e31;color:#fff;overflow:hidden}.b2b-band{position:absolute;inset:0 55% 0 0;background:radial-gradient(circle at 40% 50%,#244f7f,transparent 48%),linear-gradient(135deg,#132c49,#081522)}.b2b-grid{display:grid;grid-template-columns:1fr 1fr;min-height:610px}.b2b-visual{position:relative;display:flex;align-items:center;justify-content:center}.b2b-visual>span{position:absolute;bottom:55px;left:0;font-size:9px;letter-spacing:.25em;color:#a8c2db}.b2b-copy{padding:95px 0 95px 70px}.b2b-copy h2{font:600 52px/1.05 'Manrope';letter-spacing:-.045em;margin:14px 0 20px}.b2b-copy p{color:#b9c5d1;line-height:1.75}
.connect{padding:110px 0;background:#f3f6f9}.connect-head{max-width:760px}.connect-head p{font-size:16px;line-height:1.75;color:#6c7b8b}.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:52px;align-items:stretch}.price-card{background:#fff;border:1px solid #dfe6ed;border-radius:24px;padding:28px;position:relative}.price-card.featured{background:#0a1d31;color:#fff;transform:translateY(-14px);box-shadow:0 24px 70px rgba(8,25,42,.18)}.popular{position:absolute;top:14px;right:14px;background:var(--red);color:#fff;border-radius:999px;padding:7px 9px;font-size:8px;letter-spacing:.12em}.plan-caption{font-size:12px;color:#7f8c99}.featured .plan-caption{color:#9fb1c3}.price-card h3{font:700 28px 'Manrope';margin:9px 0 14px}.price{display:flex;align-items:baseline;gap:5px}.price small{font-weight:700}.price strong{font:800 54px/1 'Manrope';letter-spacing:-.05em}.price em{font-style:normal;color:#8090a0}.price-card ul{list-style:none;padding:0;margin:28px 0}.price-card li{padding:9px 0;border-bottom:1px solid #edf1f4;font-size:13px;color:#5f6f7f}.featured li{border-color:rgba(255,255,255,.1);color:#c2cfda}.plan-btn{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #e3e9ef;padding-top:18px;font-weight:700;font-size:13px}.featured .plan-btn{border-color:rgba(255,255,255,.12);color:#80b6ff}
.app{background:linear-gradient(135deg,#07111f,#0b2340);color:#fff;padding:110px 0;overflow:hidden}.app-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}.app-copy h2{font:600 52px/1.03 'Manrope';letter-spacing:-.045em;margin:14px 0 20px}.app-copy h2 em{font-style:normal;color:#6aa8f5;font-weight:400}.app-copy p{color:#afbdca;line-height:1.75;max-width:560px}.flow{display:flex;align-items:center;gap:14px;margin-top:30px}.flow span{border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:10px 13px;font-size:11px}.flow b{color:#6eaef7}.phone-stack{height:520px;position:relative}.phone{position:absolute;width:190px;height:390px;background:#0b1016;border:6px solid #101821;border-radius:34px;padding:8px;box-shadow:0 30px 80px rgba(0,0,0,.35)}.phone .screen{height:100%;border-radius:24px;background:linear-gradient(160deg,#f8fafc,#eaf0f5);padding:18px;color:#0b1623}.p-left{left:0;top:70px;transform:rotate(-7deg)}.p-main{left:150px;top:10px;z-index:2}.p-right{left:305px;top:78px;transform:rotate(7deg)}.vc{display:block;font:800 34px 'Manrope';color:#0a386c;margin-top:40px}.phone h4{margin-top:60px}.screen i,.list{display:block;height:26px;background:#dfe6ed;border-radius:7px;margin:10px 0}.screen button{width:100%;height:34px;border:0;border-radius:7px;background:#d61d32;margin-top:20px}.appbar{font-size:12px;font-weight:700}.dash-row{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:28px}.dash-row i{height:56px;background:#d9e5f1}.chart{height:92px;margin-top:20px;border-radius:10px;background:linear-gradient(180deg,#d7eaff,#eef3f7)}.avatar{width:52px;height:52px;border-radius:50%;background:#d8e2ec;display:grid;place-items:center;margin:25px auto}.p-right h4{text-align:center;margin-top:8px}
.results{padding:105px 0;background:#fff}.results-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:90px}.results-copy p{color:#768596;line-height:1.7}.results-list{border-top:1px solid #dfe6ed}.result{display:grid;grid-template-columns:60px 1fr;gap:22px;padding:22px 0;border-bottom:1px solid #dfe6ed}.result span{font-size:11px;color:#92a0ad}.result strong{font:600 20px 'Manrope'}
.manifesto{position:relative;background:#07111e;color:#fff;padding:125px 0;overflow:hidden}.manifesto:before{content:"";position:absolute;width:740px;height:740px;border:1px solid rgba(89,159,237,.15);border-radius:50%;right:-180px;top:-180px;box-shadow:0 0 0 90px rgba(54,119,190,.03),0 0 0 180px rgba(54,119,190,.02)}.manifesto-inner{position:relative;max-width:820px;margin-left:auto;margin-right:auto;text-align:center}.manifesto h2{font:700 clamp(64px,7vw,112px)/.86 'Manrope';letter-spacing:-.065em;margin:18px 0 26px}.manifesto h2 em{font-style:normal;color:#67a8f4;font-weight:400}.manifesto p{font-size:18px;color:#adbdcb}.manifesto-actions{display:flex;justify-content:center;gap:12px;margin-top:34px}
footer{background:#040b13;color:#fff;padding:70px 0 28px}.footer-grid{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:50px}.footer-brand p{color:#8193a6;max-width:300px;line-height:1.65}.footer-grid h4{font-size:11px;letter-spacing:.16em;color:#6e8498;text-transform:uppercase}.footer-grid>div:not(.footer-brand){display:flex;flex-direction:column;gap:10px}.footer-grid a,.footer-grid span{font-size:13px;color:#c5d0db}.footer-bottom{display:flex;justify-content:space-between;border-top:1px solid rgba(255,255,255,.08);margin-top:48px;padding-top:20px;font-size:11px;color:#6f8294}
.reveal{opacity:0;transform:translateY(26px);transition:opacity .75s ease,transform .75s cubic-bezier(.2,.7,.2,1)}.reveal.in{opacity:1;transform:none}.delay-1{transition-delay:.08s}.delay-2{transition-delay:.16s}.delay-3{transition-delay:.24s}
@media(max-width:980px){:root{--shell:min(100% - 28px,760px)}.nav-links,.buy-top{display:none}.menu-btn{margin-left:auto;display:flex;flex-direction:column;gap:6px;background:none;border:0}.menu-btn span{width:24px;height:1px;background:#fff}.mobile-nav{position:absolute;top:100%;left:14px;right:14px;background:#07111f;border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:18px;display:none;flex-direction:column}.mobile-nav.open{display:flex}.mobile-nav a{color:#fff;padding:10px}.hero{min-height:auto}.hero-grid,.paths-head,.section-head,.course-top,.modality-grid,.b2b-grid,.app-grid,.results-grid{grid-template-columns:1fr}.hero-grid{padding:110px 0 70px}.hero-media{height:440px}.hero-photo-wrap{right:-10vw;width:82vw;height:440px}.stats{grid-template-columns:1fr 1fr 1fr}.path-cards,.solution-grid,.pricing-grid{grid-template-columns:1fr 1fr}.editorial-grid{grid-template-columns:1fr}.course-row{grid-template-columns:46px 1fr 70px}.course-row p,.course-arrow{grid-column:2/-1;text-align:left}.b2b-grid{min-height:auto}.b2b-visual{min-height:380px}.b2b-copy{padding:65px 0}.b2b-band{inset:0 0 55% 0}.phone-stack{margin:auto;width:520px;max-width:100%}.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){:root{--shell:calc(100% - 24px)}.hero h1{font-size:47px}.hero-copy>p{font-size:15px}.hero-actions{flex-direction:column;align-items:flex-start}.stats{grid-template-columns:1fr;gap:16px}.stats div,.stats div+div{padding:0;border:0}.hero-media{height:360px}.hero-photo-wrap{width:100vw;right:-12px;height:360px}.hero-note{font-size:27px;right:10px}.paths,.solutions,.modalities,.connect,.results{padding:76px 0}.paths-head,.section-head,.course-top{gap:18px}.paths-head h2,.section-head h2,.connect-head h2,.results-copy h2{font-size:42px}.path-cards,.solution-grid,.pricing-grid{grid-template-columns:1fr}.editorial-break{padding:78px 0}.editorial-copy h2,.modality-copy h2,.b2b-copy h2,.app-copy h2{font-size:40px}.course-marquee{font-size:38px}.course-row{grid-template-columns:38px 1fr}.course-row .hours{grid-column:2}.course-note{flex-direction:column;gap:8px}.modality-cards{grid-template-columns:1fr}.b2b-copy{padding:50px 0}.price-card.featured{transform:none}.phone-stack{height:420px}.phone{width:155px;height:330px}.p-main{left:108px}.p-right{left:214px}.manifesto{padding:90px 0}.manifesto h2{font-size:44px}.manifesto-actions{flex-direction:column}.footer-grid{grid-template-columns:1fr}.footer-bottom{flex-direction:column;gap:8px}}
/* =========================================================
LOGO VEST COLLEGE
========================================================= */
.brand.brand-logo{
display:flex;
align-items:center;
width:auto;
height:46px;
flex:0 0 auto;
overflow:visible;
}
.brand.brand-logo img{
display:block;
width:auto !important;
height:68px !important;
max-width:190px !important;
max-height:52px !important;
object-fit:contain;
}
/* MOBILE */
@media (max-width:768px){
.brand.brand-logo{
height:50px;
}
.brand.brand-logo img{
width:auto !important;
height:52px !important;
max-width:160px !important;
max-height:42px !important;
}
}
/* =========================================================
VEST EXPERIENCE — REELS / STORY 9:16
========================================================= */
========================================================= */
.vest-carousel{
position:relative;
width:100%;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
}
.vest-track{
position:relative;
width:100%;
height:660px;
display:flex;
align-items:center;
justify-content:center;
perspective:1400px;
}
/* =========================================================
CARD BASE
========================================================= */
.vest-slide{
position:absolute;
/*
Card lateral também vertical,
mas menor que o central
*/
width:235px;
aspect-ratio:9 / 16;
border-radius:22px;
overflow:hidden;
opacity:.45;
transform:scale(.88);
transition:
transform .65s cubic-bezier(.22,.8,.2,1),
opacity .45s ease,
width .6s cubic-bezier(.22,.8,.2,1),
filter .45s ease;
box-shadow:
0 25px 55px rgba(6,18,32,.12);
cursor:pointer;
background:#07111f;
}
/* =========================================================
CARD CENTRAL
========================================================= */
.vest-slide.active{
width:340px;
aspect-ratio:9 / 16;
opacity:1;
transform:scale(1);
z-index:5;
box-shadow:
0 35px 80px rgba(6,18,32,.22);
}
/* =========================================================
VÍDEO
========================================================= */
.vest-slide video,
.vest-slide img{
position:absolute;
inset:0;
width:100%;
height:100%;
display:block;
object-fit:cover;
object-position:center;
/*
Reduz principalmente aquele verde muito forte
do vídeo sem deixá-lo preto e branco.
*/
filter:
saturate(.72)
contrast(1.06)
brightness(.94);
transition:
filter .5s ease,
transform .8s cubic-bezier(.22,.8,.2,1);
}
/* Zoom muito leve no ativo */
.vest-slide.active video,
.vest-slide.active img{
transform:scale(1.015);
filter:
saturate(.68)
contrast(1.08)
brightness(.92);
}
/* =========================================================
CORREÇÃO DE COR VEST
Neutraliza verde/turquesa e aproxima do azul-marinho
========================================================= */
.vest-slide::before{
content:"";
position:absolute;
inset:0;
z-index:1;
pointer-events:none;
background:
linear-gradient(
180deg,
rgba(5,18,34,.08) 0%,
rgba(7,30,58,.12) 42%,
rgba(5,20,38,.28) 100%
);
}
/* =========================================================
GRADIENTE PARA LEITURA DO TEXTO
========================================================= */
.vest-slide-overlay{
position:absolute;
inset:0;
z-index:2;
background:
linear-gradient(
180deg,
rgba(4,14,27,0) 25%,
rgba(4,14,27,.03) 42%,
rgba(4,14,27,.30) 65%,
rgba(4,14,27,.92) 100%
);
}
/* =========================================================
TEXTO
========================================================= */
.vest-slide-content{
position:absolute;
left:28px;
right:26px;
bottom:30px;
z-index:4;
color:#fff;
}
.vest-slide-number{
display:flex;
align-items:center;
gap:10px;
margin-bottom:13px;
font-size:10px;
font-weight:700;
letter-spacing:.16em;
/*
Sai aquele verde-limão
*/
color:#68a9ff;
}
.vest-slide-number::before{
content:"";
display:block;
width:24px;
height:2px;
background:#68a9ff;
}
.vest-slide h3{
margin:0 0 11px;
font-size:25px;
line-height:1.04;
letter-spacing:-.035em;
color:#fff;
}
.vest-slide p{
margin:0;
max-width:280px;
font-size:12.5px;
line-height:1.55;
color:rgba(255,255,255,.74);
opacity:0;
transform:translateY(12px);
transition:
opacity .4s ease,
transform .4s ease;
}
.vest-slide.active p{
opacity:1;
transform:none;
}
/* =========================================================
POSIÇÕES
========================================================= */
.vest-slide.pos-left{
transform:
translateX(-390px)
scale(.90);
opacity:.42;
z-index:2;
}
.vest-slide.pos-right{
transform:
translateX(390px)
scale(.90);
opacity:.42;
z-index:2;
}
.vest-slide.pos-far-left{
transform:
translateX(-650px)
scale(.80);
opacity:.10;
z-index:1;
}
.vest-slide.pos-far-right{
transform:
translateX(650px)
scale(.80);
opacity:.10;
z-index:1;
}
.vest-slide.hidden{
opacity:0;
pointer-events:none;
}
/* Cards laterais mais discretos */
.vest-slide:not(.active) video,
.vest-slide:not(.active) img{
filter:
saturate(.45)
contrast(.95)
brightness(1.05);
opacity:.72;
}
.vest-slide:not(.active) .vest-slide-overlay{
background:
linear-gradient(
180deg,
rgba(245,247,250,.10),
rgba(233,237,242,.27) 50%,
rgba(8,24,43,.62) 100%
);
}
/* =========================================================
SETAS
========================================================= */
.vest-carousel-arrow{
position:absolute;
z-index:20;
top:50%;
width:48px;
height:48px;
transform:translateY(-50%);
border:1px solid rgba(8,27,49,.06);
border-radius:50%;
background:#fff;
color:#0a1828;
font-size:27px;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
box-shadow:
0 12px 35px rgba(10,26,44,.10);
transition:.3s ease;
}
.vest-carousel-arrow:hover{
transform:
translateY(-50%)
scale(1.08);
box-shadow:
0 15px 40px rgba(10,26,44,.16);
}
.vest-prev{
left:max(14px,calc(50% - 620px));
}
.vest-next{
right:max(14px,calc(50% - 620px));
}
/* =========================================================
DOTS
========================================================= */
.vest-carousel-dots{
display:flex;
align-items:center;
justify-content:center;
gap:7px;
margin-top:18px;
}
.vest-carousel-dots button{
width:6px;
height:6px;
padding:0;
border:0;
border-radius:50%;
background:#ccd3dd;
cursor:pointer;
transition:.3s ease;
}
.vest-carousel-dots button.active{
width:28px;
border-radius:20px;
background:#327bd8;
}
/* =========================================================
APP VEST COLLEGE
========================================================= */
.app{
position:relative;
overflow:hidden;
padding:120px 0;
background:
radial-gradient(circle at 85% 50%, rgba(46,121,214,.18), transparent 34%),
linear-gradient(135deg,#06111f 0%,#0a1d33 55%,#07111f 100%);
}
.app::before{
content:"";
position:absolute;
inset:0;
pointer-events:none;
background:
linear-gradient(
120deg,
transparent 0%,
rgba(255,255,255,.025) 45%,
transparent 70%
);
}
.app-grid{
position:relative;
z-index:2;
display:grid;
grid-template-columns:.85fr 1.15fr;
gap:80px;
align-items:center;
}
/* TEXTO */
.app-copy{
max-width:540px;
}
.app-copy h2{
margin:14px 0 24px;
font-size:clamp(44px,5vw,72px);
line-height:.98;
letter-spacing:-.05em;
color:#fff;
}
.app-copy h2 em{
display:block;
margin-top:7px;
color:#69a9ff;
}
.app-copy > p{
max-width:490px;
margin:0 0 38px;
color:rgba(255,255,255,.68);
font-size:15px;
line-height:1.75;
}
/* ITENS */
.app-points{
display:flex;
flex-direction:column;
margin-bottom:34px;
}
.app-points > div{
display:grid;
grid-template-columns:45px 1fr;
gap:14px;
align-items:center;
padding:16px 0;
border-bottom:1px solid rgba(255,255,255,.09);
}
.app-points span{
font-size:10px;
font-weight:700;
letter-spacing:.16em;
color:#69a9ff;
}
.app-points p{
margin:0;
color:rgba(255,255,255,.86);
font-size:14px;
}
/* FLOW */
.flow{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:10px;
}
.flow span{
padding:9px 14px;
border:1px solid rgba(255,255,255,.16);
border-radius:999px;
color:#fff;
font-size:10px;
font-weight:700;
letter-spacing:.12em;
}
.flow b{
color:#69a9ff;
font-weight:400;
}
/* =========================================================
TELAS DO APP
========================================================= */
.app-showcase{
position:relative;
min-height:620px;
display:flex;
align-items:center;
justify-content:center;
}
.app-glow{
position:absolute;
width:470px;
height:470px;
border-radius:50%;
background:rgba(44,126,225,.18);
filter:blur(100px);
}
/* TELA BASE */
.app-screen{
position:absolute;
overflow:hidden;
border-radius:20px;
background:#fff;
box-shadow:
0 35px 80px rgba(0,0,0,.36);
transition:
transform .5s ease,
filter .4s ease;
}
.app-screen img{
display:block;
width:100%;
height:100%;
object-fit:cover;
}
/* LOGIN */
.app-screen-left{
width:235px;
left:20px;
top:100px;
transform:
rotate(-6deg)
translateY(20px);
z-index:1;
opacity:.82;
}
/* DASHBOARD CENTRAL */
.app-screen-main{
width:285px;
left:50%;
top:25px;
transform:
translateX(-50%);
z-index:4;
border:1px solid rgba(255,255,255,.22);
}
/* PERFIL */
.app-screen-right{
width:235px;
right:10px;
top:100px;
transform:
rotate(6deg)
translateY(20px);
z-index:2;
opacity:.82;
}
/* HOVER */
.app-showcase:hover .app-screen-left{
transform:
rotate(-8deg)
translateX(-12px);
}
.app-showcase:hover .app-screen-right{
transform:
rotate(8deg)
translateX(12px);
}
.app-showcase:hover .app-screen-main{
transform:
translateX(-50%)
translateY(-8px)
scale(1.025);
}
/* ETIQUETA */
.app-floating-label{
position:absolute;
right:20px;
bottom:55px;
z-index:6;
width:220px;
padding:18px 20px;
border:1px solid rgba(255,255,255,.12);
background:rgba(5,18,33,.72);
backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);
border-radius:14px;
}
.app-floating-label span{
display:block;
margin-bottom:6px;
color:#69a9ff;
font-size:9px;
font-weight:700;
letter-spacing:.18em;
}
.app-floating-label strong{
display:block;
color:#fff;
font-size:14px;
line-height:1.3;
}
/* =========================================================
MOBILE
========================================================= */
@media(max-width:900px){
.app{
padding:80px 0 70px;
}
.app-grid{
grid-template-columns:1fr;
gap:45px;
}
.app-copy{
max-width:none;
}
.app-showcase{
min-height:530px;
}
.app-screen-main{
width:245px;
}
.app-screen-left,
.app-screen-right{
width:195px;
}
.app-screen-left{
left:-35px;
}
.app-screen-right{
right:-35px;
}
}
@media(max-width:600px){
.app-showcase{
min-height:470px;
}
.app-screen-main{
width:220px;
}
.app-screen-left,
.app-screen-right{
width:165px;
opacity:.55;
}
.app-screen-left{
left:-65px;
}
.app-screen-right{
right:-65px;
}
.app-floating-label{
right:0;
bottom:15px;
width:190px;
}
}
/* =========================================================
SOLUTIONS CAROUSEL
========================================================= */
.solutions-carousel{
position:relative;
margin-top:44px;
}
.solutions-viewport{
width:100%;
overflow:hidden;
}
/* sobrescreve o grid antigo */
.solutions-carousel .solution-grid{
display:flex;
gap:18px;
width:max-content;
transition:
transform .7s cubic-bezier(.22,.8,.2,1);
will-change:transform;
}
/* exatamente 4 cards visíveis */
.solutions-carousel .solution-card{
flex:0 0 calc((min(100vw - 40px, 1200px) - 54px) / 4);
width:calc((min(100vw - 40px, 1200px) - 54px) / 4);
}
/* MASTERCLASS */
.masterclass-card{
position:relative;
}
.masterclass-card .solution-icon{
font-size:22px;
}
/* =========================================================
CONTROLES
========================================================= */
.solutions-controls{
display:flex;
align-items:center;
justify-content:space-between;
gap:30px;
margin-top:26px;
}
/* LINHA DE PROGRESSO */
.solutions-progress{
position:relative;
width:170px;
height:2px;
overflow:hidden;
background:rgba(10,27,48,.10);
}
.solutions-progress-bar{
position:absolute;
left:0;
top:0;
width:50%;
height:100%;
background:#327bd8;
transition:
transform .6s cubic-bezier(.22,.8,.2,1);
}
/* SETAS */
.solutions-arrows{
display:flex;
align-items:center;
gap:8px;
}
.solution-arrow{
width:46px;
height:46px;
padding:0;
display:flex;
align-items:center;
justify-content:center;
border:1px solid rgba(10,27,48,.12);
border-radius:50%;
background:transparent;
color:#0a1b30;
font-size:18px;
cursor:pointer;
transition:
background .25s ease,
color .25s ease,
border-color .25s ease,
transform .25s ease,
opacity .25s ease;
}
.solution-arrow:hover:not(:disabled){
background:#0a1b30;
color:#fff;
border-color:#0a1b30;
transform:translateY(-2px);
}
.solution-arrow:disabled{
opacity:.25;
cursor:default;
}
/* =========================================================
TABLET
========================================================= */
@media(max-width:1000px){
.solutions-carousel .solution-card{
flex:0 0 calc((100vw - 76px) / 2.25);
width:calc((100vw - 76px) / 2.25);
}
}
/* =========================================================
MOBILE
========================================================= */
@media(max-width:650px){
.solutions-carousel{
margin-top:32px;
}
.solutions-viewport{
overflow:visible;
}
.solutions-carousel .solution-grid{
width:100%;
overflow-x:auto;
overflow-y:hidden;
gap:14px;
padding-right:22px;
padding-bottom:10px;
transform:none !important;
scroll-snap-type:x mandatory;
scroll-behavior:smooth;
scrollbar-width:none;
-webkit-overflow-scrolling:touch;
}
.solutions-carousel .solution-grid::-webkit-scrollbar{
display:none;
}
.solutions-carousel .solution-card{
flex:0 0 84vw;
width:84vw;
scroll-snap-align:start;
}
.solutions-controls{
margin-top:18px;
}
.solutions-progress{
width:120px;
}
.solutions-arrows{
display:none;
}
}
/* =========================================================
SOLUTIONS
========================================================= */
.solutions{
position:relative;
padding:110px 0 105px;
overflow:hidden;
background:#f6f7f9;
}
/* pequeno detalhe editorial de fundo */
.solutions::before{
content:"";
position:absolute;
top:-180px;
right:-180px;
width:480px;
height:480px;
border:1px solid rgba(20,50,82,.045);
border-radius:50%;
pointer-events:none;
}
/* =========================================================
CABEÇALHO
========================================================= */
.solutions .section-head{
display:grid;
grid-template-columns:1.1fr .65fr;
gap:80px;
align-items:end;
margin-bottom:54px;
}
.solutions .section-head h2{
margin:12px 0 0;
font-size:clamp(40px,4.5vw,64px);
line-height:1;
letter-spacing:-.045em;
color:#0a1b30;
}
.solutions .section-head h2 b{
font-weight:400;
color:#327bd8;
}
.solutions .section-head > p{
max-width:430px;
margin:0 0 5px;
font-size:14px;
line-height:1.75;
color:#667383;
}
/* =========================================================
CARROSSEL
========================================================= */
.solutions-carousel{
position:relative;
}
.solutions-viewport{
width:100%;
overflow:hidden;
}
.solutions-carousel .solution-grid{
display:flex;
width:max-content;
gap:18px;
transition:
transform .7s cubic-bezier(.22,.8,.2,1);
will-change:transform;
}
/* =========================================================
CARD
========================================================= */
.solutions-carousel .solution-card{
position:relative;
flex:0 0 calc((min(100vw - 40px, 1200px) - 54px) / 4);
width:calc((min(100vw - 40px, 1200px) - 54px) / 4);
min-height:405px;
padding:26px 25px 25px;
display:flex;
flex-direction:column;
overflow:hidden;
border:1px solid rgba(16,43,71,.09);
border-radius:3px;
background:#fff;
transition:
transform .4s cubic-bezier(.22,.8,.2,1),
box-shadow .4s ease,
border-color .4s ease;
}
/* detalhe superior */
.solutions-carousel .solution-card::before{
content:"";
position:absolute;
left:0;
top:0;
width:0;
height:3px;
background:#327bd8;
transition:width .45s cubic-bezier(.22,.8,.2,1);
}
.solutions-carousel .solution-card:hover{
transform:translateY(-7px);
border-color:rgba(50,123,216,.20);
box-shadow:
0 24px 60px rgba(13,35,60,.09);
}
.solutions-carousel .solution-card:hover::before{
width:100%;
}
/* =========================================================
TOPO CARD
========================================================= */
.solution-top{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:20px;
margin-bottom:48px;
}
.solution-number{
display:block;
padding-top:4px;
font-size:9px;
font-weight:700;
line-height:1;
letter-spacing:.18em;
color:#9ba6b2;
}
/* =========================================================
ÍCONES
========================================================= */
.solution-icon{
width:54px;
height:54px;
flex:0 0 54px;
display:flex;
align-items:center;
justify-content:center;
border:1px solid rgba(50,123,216,.14);
border-radius:15px;
background:rgba(50,123,216,.045);
color:#327bd8;
transition:
transform .4s cubic-bezier(.22,.8,.2,1),
background .3s ease,
border-color .3s ease,
color .3s ease;
}
.solution-icon svg{
width:27px;
height:27px;
display:block;
fill:none;
stroke:currentColor;
stroke-width:1.45;
stroke-linecap:round;
stroke-linejoin:round;
}
.solution-card:hover .solution-icon{
transform:
translateY(-3px)
rotate(-3deg);
color:#fff;
background:#327bd8;
border-color:#327bd8;
}
/* =========================================================
CONTEÚDO
========================================================= */
.solution-content{
flex:1;
}
.solution-category{
display:block;
margin-bottom:12px;
font-size:8px;
font-weight:700;
letter-spacing:.15em;
color:#327bd8;
}
.solution-card h3{
margin:0 0 15px;
font-size:23px;
line-height:1.08;
letter-spacing:-.035em;
color:#0a1b30;
}
.solution-card p{
margin:0;
font-size:12.5px;
line-height:1.65;
color:#6e7986;
}
/* =========================================================
LINK
========================================================= */
.solution-link{
position:relative;
display:flex;
align-items:center;
justify-content:space-between;
gap:15px;
margin-top:32px;
padding-top:18px;
border-top:1px solid rgba(16,43,71,.08);
color:#102a47;
font-size:10px;
font-weight:700;
letter-spacing:.04em;
text-decoration:none;
transition:color .3s ease;
}
.solution-link i{
display:flex;
align-items:center;
justify-content:center;
width:27px;
height:27px;
border-radius:50%;
background:#f2f5f8;
font-style:normal;
font-size:13px;
transition:
transform .3s ease,
background .3s ease,
color .3s ease;
}
.solution-card:hover .solution-link{
color:#327bd8;
}
.solution-card:hover .solution-link i{
transform:translateX(3px);
color:#fff;
background:#327bd8;
}
/* =========================================================
VEST CONNECT — CARD DESTACADO
========================================================= */
.solution-card.featured{
border-color:#0b2948;
background:
radial-gradient(
circle at 100% 0,
rgba(62,139,235,.23),
transparent 42%
),
#09223d;
}
.solution-card.featured::before{
background:#69a9ff;
}
.solution-card.featured .solution-number{
color:rgba(255,255,255,.40);
}
.solution-card.featured .solution-category{
color:#69a9ff;
}
.solution-card.featured h3{
color:#fff;
}
.solution-card.featured p{
color:rgba(255,255,255,.64);
}
.solution-card.featured .solution-icon{
color:#fff;
border-color:rgba(255,255,255,.15);
background:rgba(255,255,255,.08);
}
.solution-card.featured .solution-link{
color:#fff;
border-color:rgba(255,255,255,.12);
}
.solution-card.featured .solution-link i{
color:#fff;
background:rgba(255,255,255,.10);
}
.solution-card.featured:hover .solution-icon{
color:#327bd8;
background:#fff;
border-color:#fff;
}
.solution-card.featured:hover .solution-link{
color:#69a9ff;
}
.solution-card.featured:hover .solution-link i{
color:#09223d;
background:#fff;
}
/* =========================================================
MASTERCLASS
========================================================= */
.masterclass-card .solution-icon{
background:
linear-gradient(
135deg,
rgba(50,123,216,.09),
rgba(50,123,216,.025)
);
}
/* =========================================================
CONTROLES
========================================================= */
.solutions-controls{
display:flex;
align-items:center;
justify-content:space-between;
gap:30px;
margin-top:27px;
}
/* STATUS */
.solutions-status{
display:flex;
align-items:center;
gap:12px;
}
.solutions-current,
.solutions-total{
font-size:9px;
font-weight:700;
letter-spacing:.1em;
color:#7f8b98;
}
/* PROGRESS */
.solutions-progress{
position:relative;
width:145px;
height:2px;
overflow:hidden;
background:rgba(10,27,48,.10);
}
.solutions-progress-bar{
position:absolute;
top:0;
left:0;
width:50%;
height:100%;
background:#327bd8;
transform:translateX(0);
transition:
transform .6s cubic-bezier(.22,.8,.2,1),
width .6s ease;
}
/* =========================================================
SETAS
========================================================= */
.solutions-arrows{
display:flex;
align-items:center;
gap:8px;
}
.solution-arrow{
width:46px;
height:46px;
padding:0;
display:flex;
align-items:center;
justify-content:center;
border:1px solid rgba(10,27,48,.12);
border-radius:50%;
background:#fff;
color:#0a1b30;
font-size:17px;
cursor:pointer;
transition:
transform .25s ease,
background .25s ease,
color .25s ease,
border-color .25s ease,
opacity .25s ease;
}
.solution-arrow:hover:not(:disabled){
transform:translateY(-2px);
color:#fff;
background:#0a1b30;
border-color:#0a1b30;
}
.solution-arrow:disabled{
opacity:.25;
cursor:default;
}
/* =========================================================
TABLET
========================================================= */
@media(max-width:1000px){
.solutions{
padding:90px 0;
}
.solutions .section-head{
grid-template-columns:1fr;
gap:24px;
margin-bottom:42px;
}
.solutions .section-head > p{
max-width:570px;
}
.solutions-carousel .solution-card{
flex:0 0 calc((100vw - 76px) / 2.25);
width:calc((100vw - 76px) / 2.25);
min-height:390px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media(max-width:650px){
.solutions{
padding:70px 0 72px;
overflow:hidden;
}
.solutions .section-head{
margin-bottom:32px;
}
.solutions .section-head h2{
font-size:38px;
}
.solutions .section-head > p{
font-size:13px;
}
/*
* Mantemos overflow visível para aparecer um pedaço
* do próximo card.
*/
.solutions-viewport{
overflow:visible;
}
.solutions-carousel .solution-grid{
width:100%;
gap:13px;
overflow-x:auto;
overflow-y:hidden;
padding-right:20px;
padding-bottom:12px;
transform:none !important;
scroll-snap-type:x mandatory;
scroll-behavior:smooth;
scrollbar-width:none;
-webkit-overflow-scrolling:touch;
}
.solutions-carousel .solution-grid::-webkit-scrollbar{
display:none;
}
.solutions-carousel .solution-card{
flex:0 0 84vw;
width:84vw;
min-height:390px;
padding:24px 23px;
scroll-snap-align:start;
}
.solution-top{
margin-bottom:42px;
}
.solution-icon{
width:52px;
height:52px;
flex-basis:52px;
}
.solution-card h3{
font-size:25px;
}
.solution-card p{
font-size:13px;
}
/* No celular a navegação principal é pelo dedo */
.solutions-arrows{
display:none;
}
.solutions-controls{
margin-top:12px;
}
.solutions-progress{
width:120px;
}
}
/* =========================================================
APP VEST COLLEGE
========================================================= */
.app{
position:relative;
overflow:hidden;
padding:110px 0 48px;
color:#fff;
background:
radial-gradient(
circle at 76% 43%,
rgba(35,116,207,.20),
transparent 35%
),
linear-gradient(
135deg,
#06182b 0%,
#09223d 52%,
#071b31 100%
);
}
/* =========================================================
FUNDO / TEXTURA
========================================================= */
.app::before{
content:"";
position:absolute;
inset:0;
pointer-events:none;
background-image:
linear-gradient(
rgba(255,255,255,.022) 1px,
transparent 1px
),
linear-gradient(
90deg,
rgba(255,255,255,.022) 1px,
transparent 1px
);
background-size:70px 70px;
mask-image:
linear-gradient(
to right,
transparent,
rgba(0,0,0,.55),
transparent
);
-webkit-mask-image:
linear-gradient(
to right,
transparent,
rgba(0,0,0,.55),
transparent
);
}
/* VEST gigante ao fundo */
.app-bg-word{
position:absolute;
top:20px;
right:-35px;
font-size:clamp(180px,24vw,380px);
font-weight:800;
line-height:.8;
letter-spacing:-.08em;
color:rgba(255,255,255,.018);
pointer-events:none;
user-select:none;
}
/* garante conteúdo acima do background */
.app > .shell{
position:relative;
z-index:2;
}
/* =========================================================
INTRO / TOPO
========================================================= */
.app-intro{
display:grid;
grid-template-columns:minmax(0,1.3fr) minmax(330px,.7fr);
gap:70px;
align-items:end;
padding-bottom:64px;
border-bottom:1px solid rgba(255,255,255,.10);
}
/* micro */
.app .micro.light{
display:block;
color:#6caaff;
font-size:10px;
font-weight:700;
line-height:1;
letter-spacing:.22em;
}
/* =========================================================
TÍTULO
========================================================= */
.app-intro-title{
min-width:0;
}
.app-intro h2{
max-width:800px;
margin:18px 0 0;
color:#fff;
font-size:clamp(44px,4.35vw,66px);
font-weight:600;
line-height:1.02;
letter-spacing:-.052em;
}
/*
No HTML use:
Sua experiência com a Vest.
Sempre com você.
*/
.app-intro h2 em{
display:block;
margin-top:4px;
color:#6caaff;
font-family:inherit;
font-style:normal;
font-weight:400;
letter-spacing:-.05em;
}
/* =========================================================
TEXTO DIREITA
========================================================= */
.app-intro-text{
padding-bottom:3px;
}
.app-intro-text > p{
max-width:470px;
margin:0 0 28px;
color:rgba(255,255,255,.68);
font-size:15px;
line-height:1.7;
}
/* =========================================================
BOTÕES GOOGLE PLAY / APP STORE
========================================================= */
.app-stores{
display:flex;
align-items:center;
gap:10px;
flex-wrap:wrap;
}
.app-store-btn{
min-width:175px;
height:58px;
padding:0 18px;
display:flex;
align-items:center;
gap:12px;
color:#fff;
border:1px solid rgba(255,255,255,.16);
border-radius:8px;
background:rgba(255,255,255,.055);
text-decoration:none;
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);
transition:
transform .3s ease,
background .3s ease,
border-color .3s ease,
color .3s ease;
}
.app-store-btn:hover{
transform:translateY(-3px);
color:#081e36;
background:#fff;
border-color:#fff;
}
.app-store-btn svg{
width:24px;
height:24px;
flex:0 0 24px;
fill:currentColor;
}
.app-store-btn span{
display:flex;
flex-direction:column;
gap:2px;
}
.app-store-btn small{
color:inherit;
font-size:7px;
font-weight:700;
line-height:1;
letter-spacing:.08em;
opacity:.62;
}
.app-store-btn strong{
color:inherit;
font-size:13px;
font-weight:600;
line-height:1.1;
}
/* =========================================================
CORPO PRINCIPAL
========================================================= */
.app-body{
display:grid;
grid-template-columns:minmax(390px,.9fr) minmax(0,1.1fr);
gap:75px;
align-items:center;
min-height:650px;
padding:72px 0 62px;
}
/* =========================================================
COLUNA ESQUERDA
========================================================= */
.app-features{
width:100%;
max-width:510px;
}
/* título "TUDO EM UM SÓ LUGAR" */
.app-side-label{
display:block;
margin-bottom:29px;
color:#6caaff;
font-size:10px;
font-weight:700;
line-height:1;
letter-spacing:.19em;
}
/* =========================================================
LISTA DE RECURSOS
========================================================= */
.app-feature-list{
width:100%;
border-top:1px solid rgba(255,255,255,.13);
}
.app-feature{
display:grid;
grid-template-columns:48px minmax(0,1fr);
gap:18px;
padding:27px 0;
border-bottom:1px solid rgba(255,255,255,.13);
}
.app-feature-number{
display:block;
padding-top:5px;
color:#6caaff;
font-size:10px;
font-weight:700;
line-height:1;
letter-spacing:.12em;
}
.app-feature h3{
margin:0 0 9px;
color:#fff;
font-size:19px;
font-weight:600;
line-height:1.2;
letter-spacing:-.025em;
}
.app-feature p{
max-width:390px;
margin:0;
color:rgba(255,255,255,.58);
font-size:13px;
font-weight:400;
line-height:1.65;
}
/* efeito sutil */
.app-feature{
transition:
padding-left .3s ease,
border-color .3s ease;
}
.app-feature h3,
.app-feature-number{
transition:color .3s ease;
}
.app-feature:hover{
padding-left:5px;
border-color:rgba(108,170,255,.32);
}
.app-feature:hover .app-feature-number{
color:#fff;
}
.app-feature:hover h3{
color:#6caaff;
}
/* =========================================================
EXPERIÊNCIA POR PERFIL
========================================================= */
.app-profiles{
margin-top:39px;
}
.app-profiles-label{
display:block;
margin-bottom:18px;
color:rgba(255,255,255,.48);
font-size:9px;
font-weight:700;
line-height:1;
letter-spacing:.17em;
}
.app-profile-flow{
display:flex;
align-items:center;
gap:13px;
}
.app-profile-flow span{
flex:none;
color:#fff;
font-size:10px;
font-weight:700;
line-height:1;
letter-spacing:.08em;
}
.app-profile-flow i{
position:relative;
width:32px;
height:1px;
flex:none;
background:rgba(108,170,255,.55);
}
.app-profile-flow i::after{
content:"";
position:absolute;
top:50%;
right:-1px;
width:5px;
height:5px;
border-top:1px solid #6caaff;
border-right:1px solid #6caaff;
transform:
translateY(-50%)
rotate(45deg);
}
.app-profiles > p{
max-width:440px;
margin:18px 0 0;
color:rgba(255,255,255,.48);
font-size:11px;
line-height:1.65;
}
/* =========================================================
SHOWCASE / CELULARES
========================================================= */
.app-showcase{
position:relative;
width:100%;
height:580px;
display:flex;
align-items:center;
justify-content:center;
perspective:1200px;
}
/* luz atrás dos celulares */
.app-glow{
position:absolute;
left:50%;
top:50%;
width:490px;
height:490px;
border-radius:50%;
transform:translate(-50%,-50%);
background:
radial-gradient(
circle,
rgba(44,130,230,.27) 0%,
rgba(44,130,230,.10) 37%,
transparent 70%
);
filter:blur(12px);
pointer-events:none;
}
/* =========================================================
TELAS
========================================================= */
.app-screen{
position:absolute;
margin:0;
overflow:hidden;
border:1px solid rgba(255,255,255,.25);
border-radius:18px;
background:#fff;
box-shadow:
0 30px 80px rgba(0,0,0,.34);
transform-origin:center;
transition:
transform .55s cubic-bezier(.22,.8,.2,1),
opacity .45s ease,
filter .45s ease;
}
.app-screen img{
display:block;
width:100%;
height:100%;
object-fit:cover;
}
/* =========================================================
TELA CENTRAL
========================================================= */
.app-screen-main{
z-index:3;
left:50%;
top:50%;
width:245px;
height:530px;
transform:
translate(-50%,-50%)
translateY(-8px);
}
/* =========================================================
TELA ESQUERDA
========================================================= */
.app-screen-left{
z-index:1;
left:10%;
top:50%;
width:205px;
height:445px;
opacity:.76;
filter:saturate(.85);
transform:
translateY(-50%)
rotateY(8deg)
rotate(-3deg);
}
/* =========================================================
TELA DIREITA
========================================================= */
.app-screen-right{
z-index:2;
right:8%;
top:50%;
width:210px;
height:455px;
opacity:.80;
filter:saturate(.88);
transform:
translateY(-50%)
rotateY(-8deg)
rotate(3deg);
}
/* =========================================================
HOVER TELAS
========================================================= */
.app-showcase:hover .app-screen-main{
transform:
translate(-50%,-50%)
translateY(-16px);
}
.app-showcase:hover .app-screen-left{
opacity:.95;
filter:saturate(1);
transform:
translateY(-50%)
translateX(-8px)
rotateY(5deg)
rotate(-4deg);
}
.app-showcase:hover .app-screen-right{
opacity:.95;
filter:saturate(1);
transform:
translateY(-50%)
translateX(8px)
rotateY(-5deg)
rotate(4deg);
}
/* =========================================================
INTERFACE REAL
========================================================= */
.app-interface-label{
position:absolute;
z-index:5;
right:0;
bottom:18px;
min-width:205px;
padding:17px 19px;
border:1px solid rgba(255,255,255,.14);
border-radius:8px;
background:rgba(5,21,39,.82);
box-shadow:
0 15px 40px rgba(0,0,0,.20);
backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);
}
.app-interface-label span{
display:block;
margin-bottom:7px;
color:#6caaff;
font-size:8px;
font-weight:700;
line-height:1;
letter-spacing:.17em;
}
.app-interface-label strong{
display:block;
color:#fff;
font-size:14px;
font-weight:500;
line-height:1.4;
}
/* =========================================================
RODAPÉ DA SEÇÃO
========================================================= */
.app-bottom{
min-height:72px;
display:flex;
align-items:center;
justify-content:space-between;
gap:30px;
padding-top:25px;
border-top:1px solid rgba(255,255,255,.10);
}
.app-bottom > div{
display:flex;
align-items:center;
gap:10px;
color:rgba(255,255,255,.45);
font-size:8px;
font-weight:700;
letter-spacing:.15em;
}
.app-bottom-dot{
width:6px;
height:6px;
flex:0 0 6px;
border-radius:50%;
background:#6caaff;
box-shadow:
0 0 0 4px rgba(108,170,255,.10);
}
.app-bottom > a{
display:flex;
align-items:center;
gap:15px;
color:#fff;
font-size:11px;
font-weight:600;
text-decoration:none;
transition:color .3s ease;
}
.app-bottom > a > span{
width:32px;
height:32px;
display:flex;
align-items:center;
justify-content:center;
border:1px solid rgba(255,255,255,.17);
border-radius:50%;
transition:
transform .3s ease,
background .3s ease,
border-color .3s ease,
color .3s ease;
}
.app-bottom > a:hover{
color:#6caaff;
}
.app-bottom > a:hover > span{
transform:translate(2px,-2px);
color:#081e36;
background:#fff;
border-color:#fff;
}
/* =========================================================
DESKTOP MENOR
========================================================= */
@media(max-width:1200px){
.app-intro{
grid-template-columns:1.2fr .8fr;
gap:50px;
}
.app-intro h2{
font-size:clamp(44px,4.5vw,61px);
}
.app-body{
grid-template-columns:.9fr 1.1fr;
gap:45px;
}
.app-screen-left{
left:5%;
}
.app-screen-right{
right:4%;
}
}
/* =========================================================
TABLET
========================================================= */
@media(max-width:1000px){
.app{
padding-top:85px;
}
/* intro vira uma coluna */
.app-intro{
grid-template-columns:1fr;
gap:30px;
align-items:start;
padding-bottom:55px;
}
.app-intro h2{
max-width:750px;
font-size:clamp(45px,7vw,65px);
}
.app-intro-text > p{
max-width:620px;
}
/* corpo */
.app-body{
grid-template-columns:1fr;
gap:45px;
padding-top:60px;
}
.app-features{
max-width:650px;
}
.app-feature p{
max-width:500px;
}
.app-profiles > p{
max-width:550px;
}
/* celulares */
.app-showcase{
width:100%;
max-width:720px;
margin:0 auto;
}
}
/* =========================================================
MOBILE
========================================================= */
@media(max-width:650px){
.app{
padding:
70px
0
34px;
}
/* palavra fundo */
.app-bg-word{
top:45px;
right:-15px;
font-size:160px;
}
/* =====================================================
INTRO MOBILE
===================================================== */
.app-intro{
gap:25px;
padding-bottom:43px;
}
.app .micro.light{
font-size:8px;
letter-spacing:.20em;
}
.app-intro h2{
max-width:100%;
margin-top:14px;
font-size:clamp(38px,11.5vw,48px);
line-height:1.01;
letter-spacing:-.05em;
}
.app-intro h2 em{
margin-top:5px;
}
.app-intro-text > p{
max-width:100%;
margin-bottom:23px;
font-size:13px;
line-height:1.65;
}
/* =====================================================
LOJAS MOBILE
===================================================== */
.app-stores{
display:grid;
grid-template-columns:1fr 1fr;
gap:8px;
}
.app-store-btn{
width:100%;
min-width:0;
height:55px;
padding:0 12px;
gap:9px;
}
.app-store-btn svg{
width:20px;
height:20px;
flex-basis:20px;
}
.app-store-btn small{
font-size:6px;
}
.app-store-btn strong{
font-size:11px;
}
/* =====================================================
CORPO MOBILE
===================================================== */
.app-body{
min-height:0;
gap:35px;
padding:
48px
0
43px;
}
/* =====================================================
RECURSOS MOBILE
===================================================== */
.app-side-label{
margin-bottom:24px;
font-size:9px;
}
.app-feature{
grid-template-columns:36px 1fr;
gap:12px;
padding:23px 0;
}
.app-feature-number{
font-size:9px;
}
.app-feature h3{
margin-bottom:7px;
font-size:18px;
}
.app-feature p{
max-width:100%;
font-size:12.5px;
line-height:1.6;
}
/* =====================================================
PERFIS MOBILE
===================================================== */
.app-profiles{
margin-top:34px;
}
.app-profiles-label{
font-size:8px;
}
.app-profile-flow{
gap:8px;
}
.app-profile-flow span{
font-size:8px;
}
.app-profile-flow i{
width:20px;
}
.app-profiles > p{
margin-top:15px;
font-size:10.5px;
}
/* =====================================================
CELULARES MOBILE
===================================================== */
.app-showcase{
height:475px;
margin-top:10px;
}
.app-glow{
width:330px;
height:330px;
}
/* central */
.app-screen-main{
width:185px;
height:400px;
}
/* esquerda */
.app-screen-left{
left:-5%;
width:145px;
height:315px;
opacity:.68;
}
/* direita */
.app-screen-right{
right:-5%;
width:145px;
height:315px;
opacity:.72;
}
/* remove hover exagerado no touch */
.app-showcase:hover .app-screen-main{
transform:
translate(-50%,-50%)
translateY(-8px);
}
.app-showcase:hover .app-screen-left{
opacity:.68;
transform:
translateY(-50%)
rotateY(8deg)
rotate(-3deg);
}
.app-showcase:hover .app-screen-right{
opacity:.72;
transform:
translateY(-50%)
rotateY(-8deg)
rotate(3deg);
}
/* label */
.app-interface-label{
right:0;
bottom:-5px;
min-width:175px;
padding:13px 15px;
}
.app-interface-label span{
font-size:7px;
}
.app-interface-label strong{
font-size:12px;
}
/* =====================================================
BOTTOM MOBILE
===================================================== */
.app-bottom{
min-height:0;
flex-direction:column;
align-items:flex-start;
gap:18px;
padding-top:24px;
}
.app-bottom > div{
font-size:7px;
}
.app-bottom > a{
width:100%;
justify-content:space-between;
font-size:10px;
}
}
/* =========================================================
MOBILE PEQUENO
========================================================= */
@media(max-width:390px){
.app-intro h2{
font-size:37px;
}
.app-stores{
grid-template-columns:1fr;
}
.app-store-btn{
max-width:210px;
}
.app-showcase{
height:430px;
}
.app-screen-main{
width:168px;
height:363px;
}
.app-screen-left,
.app-screen-right{
width:128px;
height:278px;
}
}
/* =========================================================
FOOTER — VEST COLLEGE
========================================================= */
.site-footer{
position:relative;
overflow:hidden;
padding:85px 0 30px;
color:#fff;
background:
radial-gradient(
circle at 88% 30%,
rgba(43,120,210,.10),
transparent 30%
),
#051629;
}
/* =========================================================
ELEMENTO DECORATIVO
========================================================= */
.site-footer::before{
content:"VC";
position:absolute;
right:-35px;
bottom:-100px;
font-size:340px;
font-weight:800;
line-height:1;
letter-spacing:-.09em;
color:rgba(255,255,255,.018);
pointer-events:none;
user-select:none;
}
.site-footer > .shell{
position:relative;
z-index:2;
}
/* =========================================================
ÁREA PRINCIPAL
========================================================= */
.footer-main{
display:grid;
grid-template-columns:
1.15fr
.82fr
1fr
1.35fr;
gap:55px;
align-items:start;
padding-bottom:65px;
}
/* =========================================================
MARCA
========================================================= */
.footer-brand{
max-width:320px;
}
/* caso esteja usando o logo real */
.footer-logo{
display:block;
width:165px;
margin-bottom:28px;
text-decoration:none;
}
.footer-logo img{
display:block;
width:100%;
height:auto;
object-fit:contain;
}
/* caso ainda esteja usando .brand com V / C */
.footer-brand .brand{
display:inline-flex;
align-items:center;
margin-bottom:28px;
text-decoration:none;
}
/* descrição */
.footer-brand > p{
max-width:300px;
margin:0 0 27px;
color:rgba(255,255,255,.58);
font-size:15px;
font-weight:400;
line-height:1.7;
}
/* grupo HR */
.footer-group{
display:flex;
align-items:center;
gap:10px;
color:rgba(255,255,255,.40);
font-size:10px;
font-weight:700;
line-height:1;
letter-spacing:.15em;
}
.footer-group::before{
content:"";
width:22px;
height:1px;
flex:0 0 22px;
background:#559ded;
}
/* =========================================================
COLUNAS
========================================================= */
.footer-column{
min-width:0;
}
.footer-column h4{
margin:4px 0 25px;
color:rgba(255,255,255,.48);
font-size:11px;
font-weight:700;
line-height:1;
letter-spacing:.16em;
text-transform:uppercase;
}
/* =========================================================
LINKS
========================================================= */
.footer-column nav{
display:flex;
flex-direction:column;
align-items:flex-start;
gap:15px;
}
.footer-column nav a{
position:relative;
display:inline-block;
color:rgba(255,255,255,.76);
font-size:14px;
font-weight:450;
line-height:1.45;
text-decoration:none;
transition:
color .25s ease,
transform .25s ease;
}
.footer-column nav a:hover{
color:#6caaff;
transform:translateX(4px);
}
/* =========================================================
LOCALIZAÇÃO
========================================================= */
.footer-location{
margin-top:30px;
padding-top:22px;
border-top:1px solid rgba(255,255,255,.09);
}
.footer-location small{
display:block;
margin-bottom:9px;
color:#5ca4f5;
font-size:9px;
font-weight:700;
line-height:1;
letter-spacing:.16em;
}
.footer-location span{
display:block;
color:rgba(255,255,255,.67);
font-size:13px;
line-height:1.5;
}
/* =========================================================
APP VEST COLLEGE
========================================================= */
.footer-app{
position:relative;
padding-left:38px;
border-left:1px solid rgba(255,255,255,.10);
}
.footer-app-label{
display:block;
margin-bottom:17px;
color:#67aaf5;
font-size:10px;
font-weight:700;
line-height:1;
letter-spacing:.17em;
}
.footer-app h3{
margin:0 0 15px;
color:#fff;
font-size:29px;
font-weight:500;
line-height:1.08;
letter-spacing:-.035em;
}
.footer-app > p{
max-width:340px;
margin:0 0 25px;
color:rgba(255,255,255,.55);
font-size:13px;
font-weight:400;
line-height:1.65;
}
/* =========================================================
APP STORE BUTTONS
========================================================= */
.footer-stores{
display:flex;
align-items:center;
gap:9px;
flex-wrap:wrap;
}
.footer-stores .app-store-btn{
min-width:158px;
height:57px;
padding:0 15px;
display:flex;
align-items:center;
gap:10px;
color:#fff;
border:1px solid rgba(255,255,255,.15);
border-radius:8px;
background:rgba(255,255,255,.055);
text-decoration:none;
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);
transition:
transform .3s ease,
background .3s ease,
border-color .3s ease,
color .3s ease;
}
.footer-stores .app-store-btn:hover{
transform:translateY(-3px);
color:#071b31;
background:#fff;
border-color:#fff;
}
/* ícones */
.footer-stores .app-store-btn svg{
width:23px;
height:23px;
flex:0 0 23px;
fill:currentColor;
}
/* textos dentro dos botões */
.footer-stores .app-store-btn > span{
display:flex;
flex-direction:column;
gap:3px;
}
.footer-stores .app-store-btn small{
color:inherit;
font-size:7px;
font-weight:700;
line-height:1;
letter-spacing:.07em;
opacity:.65;
}
.footer-stores .app-store-btn strong{
color:inherit;
font-size:12px;
font-weight:600;
line-height:1.05;
}
/* =========================================================
RODAPÉ INFERIOR
========================================================= */
.footer-bottom{
min-height:68px;
display:grid;
grid-template-columns:1fr auto 1fr;
gap:35px;
align-items:center;
padding-top:26px;
border-top:1px solid rgba(255,255,255,.10);
}
/* =========================================================
COPYRIGHT
========================================================= */
.footer-copyright{
color:rgba(255,255,255,.42);
font-size:11px;
font-weight:400;
line-height:1.5;
letter-spacing:.025em;
}
.footer-copyright span{
margin:0 6px;
color:rgba(255,255,255,.20);
}
/* =========================================================
REDES SOCIAIS
========================================================= */
.footer-social{
display:flex;
align-items:center;
gap:26px;
}
.footer-social a{
position:relative;
padding:4px 0;
color:rgba(255,255,255,.60);
font-size:12px;
font-weight:500;
text-decoration:none;
transition:color .25s ease;
}
.footer-social a::after{
content:"";
position:absolute;
left:0;
bottom:-2px;
width:0;
height:1px;
background:#6caaff;
transition:width .3s ease;
}
.footer-social a:hover{
color:#fff;
}
.footer-social a:hover::after{
width:100%;
}
/* =========================================================
VOLTAR AO TOPO
========================================================= */
.footer-back-top{
justify-self:end;
display:flex;
align-items:center;
gap:13px;
color:rgba(255,255,255,.60);
font-size:11px;
font-weight:600;
line-height:1;
text-decoration:none;
transition:color .25s ease;
}
.footer-back-top > span{
width:34px;
height:34px;
display:flex;
align-items:center;
justify-content:center;
flex:0 0 34px;
color:#fff;
border:1px solid rgba(255,255,255,.17);
border-radius:50%;
font-size:14px;
transition:
transform .3s ease,
background .3s ease,
border-color .3s ease,
color .3s ease;
}
.footer-back-top:hover{
color:#fff;
}
.footer-back-top:hover > span{
transform:translateY(-3px);
color:#071b31;
background:#fff;
border-color:#fff;
}
/* =========================================================
DESKTOP MÉDIO
========================================================= */
@media(max-width:1200px){
.footer-main{
grid-template-columns:
1.05fr
.8fr
.9fr
1.25fr;
gap:38px;
}
.footer-app{
padding-left:30px;
}
.footer-app h3{
font-size:27px;
}
.footer-stores{
flex-direction:column;
align-items:flex-start;
}
.footer-stores .app-store-btn{
width:175px;
}
}
/* =========================================================
TABLET
========================================================= */
@media(max-width:1000px){
.site-footer{
padding-top:72px;
}
.footer-main{
grid-template-columns:1fr 1fr;
gap:55px 60px;
padding-bottom:55px;
}
.footer-brand{
max-width:360px;
}
.footer-brand > p{
max-width:320px;
}
/* APP deixa de ter linha lateral */
.footer-app{
padding-left:0;
border-left:0;
}
.footer-stores{
flex-direction:row;
}
.footer-stores .app-store-btn{
width:auto;
}
/* inferior */
.footer-bottom{
grid-template-columns:1fr auto;
gap:25px;
}
.footer-social{
display:none;
}
}
/* =========================================================
MOBILE
========================================================= */
@media(max-width:650px){
.site-footer{
padding:
60px
0
26px;
}
/* VC fundo */
.site-footer::before{
right:-30px;
bottom:40px;
font-size:190px;
}
/* =====================================================
PRINCIPAL
===================================================== */
.footer-main{
grid-template-columns:1fr;
gap:42px;
padding-bottom:45px;
}
/* =====================================================
LOGO / MARCA
===================================================== */
.footer-logo{
width:155px;
margin-bottom:24px;
}
.footer-brand{
max-width:100%;
}
.footer-brand > p{
max-width:330px;
margin-bottom:23px;
font-size:14px;
line-height:1.7;
}
.footer-group{
font-size:9px;
}
/* =====================================================
COLUNAS
===================================================== */
.footer-column h4{
margin-bottom:20px;
font-size:10px;
}
.footer-column nav{
gap:13px;
}
.footer-column nav a{
font-size:14px;
}
/* localização */
.footer-location{
margin-top:25px;
padding-top:20px;
}
.footer-location small{
font-size:8px;
}
.footer-location span{
font-size:12px;
}
/* =====================================================
APP
===================================================== */
.footer-app{
margin-top:4px;
padding-top:35px;
padding-left:0;
border-top:1px solid rgba(255,255,255,.10);
border-left:0;
}
.footer-app-label{
font-size:9px;
}
.footer-app h3{
max-width:330px;
font-size:29px;
line-height:1.08;
}
.footer-app > p{
max-width:330px;
font-size:13px;
}
/* =====================================================
LOJAS
===================================================== */
.footer-stores{
display:grid;
grid-template-columns:1fr 1fr;
width:100%;
max-width:390px;
gap:8px;
}
.footer-stores .app-store-btn{
width:100%;
min-width:0;
height:56px;
padding:0 12px;
}
.footer-stores .app-store-btn svg{
width:21px;
height:21px;
flex-basis:21px;
}
.footer-stores .app-store-btn small{
font-size:6.5px;
}
.footer-stores .app-store-btn strong{
font-size:11px;
}
/* =====================================================
BOTTOM
===================================================== */
.footer-bottom{
display:flex;
flex-direction:column;
align-items:flex-start;
gap:22px;
min-height:0;
padding-top:27px;
}
.footer-copyright{
font-size:10px;
line-height:1.6;
}
.footer-social{
display:flex;
gap:20px;
}
.footer-social a{
font-size:11px;
}
.footer-back-top{
width:100%;
justify-content:space-between;
font-size:11px;
}
}
/* =========================================================
MOBILE PEQUENO
========================================================= */
@media(max-width:390px){
.footer-stores{
grid-template-columns:1fr;
max-width:220px;
}
.footer-stores .app-store-btn{
width:100%;
}
.footer-social{
flex-wrap:wrap;
gap:14px 20px;
}
}
/* =========================================================
LOGO FOOTER
========================================================= */
.footer-logo{
display:inline-flex;
align-items:center;
width:auto;
max-width:210px;
margin:0 0 30px;
text-decoration:none;
}
.footer-logo img{
display:block;
width:auto;
max-width:100%;
height:58px;
object-fit:contain;
object-position:left center;
}
/* efeito bem discreto */
.footer-logo{
transition:
transform .3s ease,
opacity .3s ease;
}
.footer-logo:hover{
transform:translateY(-2px);
opacity:.9;
}
.footer-logo img{
display:block;
width:auto;
height:58px;
object-fit:contain;
filter: brightness(0) invert(1);
}
/* =========================================================
MOBILE
========================================================= */
@media(max-width:650px){
.footer-logo{
max-width:190px;
margin-bottom:25px;
}
.footer-logo img{
height:52px;
}
}
/* =========================================================
HOME MOBILE V3 — PATCH ESTÁVEL
Feito sobre o style.css REAL do projeto.
Não troca display/transform dos carrosséis e não reestrutura
componentes desktop: apenas corrige leitura, toque e overflow.
========================================================= */
@media (max-width:980px){
html,body{max-width:100%;overflow-x:hidden}
.shell{
width:auto;
max-width:none;
margin-left:18px;
margin-right:18px;
}
/* HEADER */
.header,
.header.scrolled{
padding:11px 0;
}
.nav{
min-height:48px;
gap:14px;
}
.brand-logo img{
width:auto;
height:38px;
max-width:155px;
object-fit:contain;
}
.menu-btn{
width:44px;
height:44px;
margin-left:auto;
padding:0;
align-items:center;
justify-content:center;
gap:7px;
cursor:pointer;
position:relative;
z-index:52;
}
.menu-btn span{
width:25px;
height:2px;
border-radius:10px;
}
.mobile-nav{
position:fixed;
top:70px;
left:12px;
right:12px;
max-height:calc(100dvh - 84px);
overflow-y:auto;
padding:10px 18px 16px;
border-radius:14px;
box-shadow:0 20px 60px rgba(0,0,0,.28);
z-index:51;
}
.mobile-nav a{
min-height:48px;
display:flex;
align-items:center;
padding:0;
border-bottom:1px solid rgba(255,255,255,.08);
font-size:14px;
}
.mobile-nav a:last-child{border-bottom:0}
/* HERO */
.hero{
padding-top:78px;
}
.hero-grid{
min-height:0;
padding:54px 0 0;
gap:34px;
}
.hero-copy{
min-width:0;
}
.hero h1{
max-width:720px;
overflow-wrap:normal;
word-break:normal;
}
.hero-copy>p{
max-width:620px;
}
.hero-media{
width:100%;
min-width:0;
overflow:visible;
}
.hero-photo-wrap{
max-width:none;
}
/* SEÇÕES EM GRID */
.paths-head,
.section-head,
.course-top,
.modality-grid,
.b2b-grid,
.results-grid{
min-width:0;
}
.paths-head>div,
.section-head>div,
.course-top>div,
.b2b-copy,
.results-copy{
min-width:0;
}
/* textos */
.paths-head>p,
.section-head>p,
.course-top>p,
.editorial-copy p,
.vest-experience-head p,
.connect-head p,
.results-copy p{
line-height:1.65;
}
/* elementos clicáveis */
.path-card,
.solution-link,
.course-arrow,
.plan-btn,
.btn{
-webkit-tap-highlight-color:transparent;
}
.solution-link,
.course-arrow,
.plan-btn{
min-height:46px;
}
/* evita estouros de conteúdo */
.path-card,
.solution-card,
.course-row,
.price-card,
.app-feature,
.result{
min-width:0;
}
.path-card p,
.solution-card p,
.course-row p,
.price-card li,
.app-feature p,
.result strong{
overflow-wrap:break-word;
}
/* APP */
.app,
.app-body,
.app-showcase{
min-width:0;
}
/* FOOTER */
.footer-main,
.footer-bottom{
min-width:0;
}
}
@media (max-width:650px){
.shell{
margin-left:16px;
margin-right:16px;
}
/* HEADER */
.header,
.header.scrolled{
padding:9px 0;
}
.brand-logo img{
height:34px;
max-width:140px;
}
.mobile-nav{
top:62px;
left:8px;
right:8px;
max-height:calc(100dvh - 74px);
}
/* HERO — mantém a lógica original, só corrige proporção */
.hero{
padding-top:62px;
}
.hero-grid{
padding:38px 0 0;
gap:28px;
}
.kicker{
font-size:9px;
line-height:1.5;
letter-spacing:.18em;
}
.hero h1{
font-size:clamp(39px,12vw,49px);
line-height:.98;
letter-spacing:-.05em;
margin:18px 0;
}
.hero-copy>p{
font-size:15px;
line-height:1.65;
}
.hero-actions{
width:100%;
gap:9px;
margin:26px 0 30px;
}
.hero-actions .btn{
width:100%;
min-height:50px;
padding:13px 17px;
}
.stats{
gap:0;
border-top:1px solid rgba(255,255,255,.12);
border-bottom:1px solid rgba(255,255,255,.12);
padding:17px 0;
}
.stats div,
.stats div+div{
padding:10px 0;
}
.stats strong{font-size:21px}
.stats span{font-size:9px;line-height:1.4}
.hero-media{
height:330px;
margin-top:4px;
}
.hero-photo-wrap{
width:calc(100% + 32px);
right:16px;
height:330px;
border-radius:0;
}
.hero-photo-wrap img{
object-position:center center;
}
.hero-note{
font-size:24px;
right:16px;
}
.note-a{top:105px}
.note-b{top:137px}
.note-c{top:169px}
.side-caption{display:none}
/* RITMO E LEGIBILIDADE */
.paths,
.solutions,
.modalities,
.connect,
.results{
padding:64px 0;
}
.editorial-break,
.vest-experience,
.course-section,
.app{
padding-top:64px;
padding-bottom:64px;
}
.paths-head h2,
.section-head h2,
.connect-head h2,
.results-copy h2{
font-size:clamp(34px,10vw,42px);
line-height:1.04;
}
.editorial-copy h2,
.modality-copy h2,
.b2b-copy h2,
.app-intro h2,
.app-copy h2{
font-size:clamp(34px,10vw,40px);
line-height:1.04;
}
.micro,
.solution-category,
.plan-caption,
.app-side-label,
.app-profiles-label{
font-size:10px;
line-height:1.4;
}
/* CAMINHOS */
.path-cards{
gap:10px;
}
.path-card{
padding:25px 22px;
min-height:0;
}
.path-card h3{
font-size:25px;
line-height:1.12;
}
.path-card p{
font-size:14px;
line-height:1.6;
}
/* STORIES: preserva JS/carrossel existente */
.vest-experience-head h2{
font-size:clamp(35px,10vw,43px);
line-height:1.04;
}
.vest-experience-head p{
font-size:14px;
line-height:1.65;
}
.vest-slide-content h3{
font-size:22px;
}
.vest-slide-content p{
font-size:12px;
line-height:1.5;
}
/* SOLUÇÕES: preserva transform/track existente */
.solution-card{
padding:24px;
}
.solution-content h3{
font-size:28px;
}
.solution-content p{
font-size:14px;
line-height:1.6;
}
.solution-link{
font-size:12px;
}
/* CURSOS */
.course-row{
padding-top:23px;
padding-bottom:23px;
}
.course-meta h3{
font-size:24px;
line-height:1.12;
}
.course-row p{
font-size:14px;
line-height:1.6;
}
.course-arrow{
min-height:48px;
display:flex;
align-items:center;
}
/* B2B */
.b2b-copy>p{
font-size:15px;
line-height:1.65;
}
.tags{
gap:6px;
}
.tags span{
font-size:10px;
}
.b2b-copy .btn{
width:100%;
min-height:50px;
}
/* CONNECT */
.pricing-grid{
gap:14px;
}
.price-card{
padding:26px 22px;
}
.price-card h3{
font-size:28px;
}
.price-card li{
font-size:13px;
line-height:1.5;
}
.plan-btn{
min-height:50px;
display:flex;
align-items:center;
justify-content:space-between;
}
/* APP — sem trocar positioning do showcase */
.app-intro{
gap:20px;
}
.app-intro-text p{
font-size:14px;
line-height:1.65;
}
.app-stores{
gap:8px;
}
.app-store-btn{
min-width:0;
}
.app-feature h3{
font-size:19px;
}
.app-feature p{
font-size:13px;
line-height:1.55;
}
/* RESULTADOS */
.result{
padding-top:17px;
padding-bottom:17px;
}
.result strong{
font-size:15px;
line-height:1.4;
}
/* MANIFESTO */
.manifesto{
padding:72px 0;
}
.manifesto h2{
font-size:clamp(48px,7vw,64px);
line-height:.94;
}
.manifesto p{
font-size:15px;
line-height:1.6;
}
.manifesto-actions{
width:100%;
gap:9px;
}
.manifesto-actions .btn{
width:100%;
min-height:50px;
}
/* FOOTER */
.footer-main{
gap:34px;
}
.footer-column a{
min-height:32px;
display:flex;
align-items:center;
font-size:13px;
}
.footer-app>p,
.footer-brand>p{
font-size:13px;
line-height:1.6;
}
/* CHAT */
.vest-chat{
right:12px;
bottom:12px;
}
.vest-chat-fab{
width:56px;
height:56px;
}
.vest-chat-panel{
left:8px;
right:8px;
top:8px;
bottom:76px;
width:auto;
height:auto;
max-height:none;
}
}
@media (max-width:390px){
.shell{
margin-left:13px;
margin-right:13px;
}
.hero h1{
font-size:37px;
}
.hero-media,
.hero-photo-wrap{
height:300px;
}
.hero-photo-wrap{
width:calc(100% + 26px);
right:13px;
}
.footer-stores{
max-width:none;
}
}
/* =========================================================
HOME MOBILE V4 — DIREÇÃO VISUAL PREMIUM
Complementa o patch estável V3. Desktop permanece intacto.
========================================================= */
.hero-mobile-badge{display:none}
@media (max-width:650px){
/* HERO COMO CAPA EDITORIAL */
.hero{
padding-top:60px;
background:
radial-gradient(circle at 82% 12%,rgba(51,128,218,.28),transparent 32%),
linear-gradient(155deg,#06101c 0%,#08192a 55%,#07111f 100%);
}
.hero:after{
height:90px;
opacity:.72;
}
.hero-orb{
width:290px;
height:290px;
right:-135px;
top:112px;
border-color:rgba(112,174,250,.23);
}
.hero-grid{
padding:32px 0 0;
gap:24px;
}
.hero-copy{
position:relative;
z-index:4;
}
.kicker{
color:#9fc8f4;
font-size:8px;
letter-spacing:.16em;
gap:9px;
}
.kicker span{
width:18px;
background:#70aefa;
}
.hero h1{
font-size:clamp(40px,12vw,50px);
line-height:.94;
letter-spacing:-.058em;
margin:17px 0 17px;
max-width:96%;
}
.hero h1 em{
color:#78b4ff;
}
.hero-copy>p{
max-width:94%;
color:#c5d0dc;
font-size:14px;
line-height:1.58;
}
.hero-actions{
display:grid;
grid-template-columns:1fr auto;
gap:8px;
align-items:stretch;
margin:23px 0 23px;
}
.hero-actions .btn{
width:auto;
min-height:52px;
padding:0 17px;
border-radius:13px;
font-size:12px;
}
.hero-actions .btn.primary{
justify-content:space-between;
background:linear-gradient(135deg,#eb2439,#ff4053);
box-shadow:0 14px 32px rgba(235,36,57,.24);
}
.hero-actions .btn.primary span{
width:28px;
height:28px;
display:grid;
place-items:center;
border-radius:50%;
background:rgba(255,255,255,.15);
}
.hero-actions .btn.ghost{
width:52px;
min-width:52px;
padding:0;
overflow:hidden;
color:transparent;
border-color:rgba(255,255,255,.22);
position:relative;
}
.hero-actions .btn.ghost:after{
content:"↘";
position:absolute;
inset:0;
display:grid;
place-items:center;
color:#fff;
font-size:19px;
}
/* Prova social compacta em uma única faixa */
.stats{
grid-template-columns:repeat(3,minmax(0,1fr));
gap:0;
padding:0;
margin:0 0 2px;
border:1px solid rgba(255,255,255,.11);
border-radius:14px;
overflow:hidden;
background:rgba(255,255,255,.045);
backdrop-filter:blur(10px);
}
.stats div,
.stats div+div{
min-width:0;
padding:13px 10px 12px;
border:0;
border-right:1px solid rgba(255,255,255,.09);
}
.stats div:last-child{
border-right:0;
}
.stats strong{
font-size:16px;
line-height:1.05;
color:#83baff;
white-space:nowrap;
}
.stats span{
margin-top:5px;
font-size:7px;
line-height:1.35;
letter-spacing:.08em;
color:#9baab8;
}
/* imagem entra imediatamente na primeira dobra */
.hero-media{
height:285px;
margin-top:0;
width:calc(100% + 32px);
margin-left:-16px;
overflow:hidden;
position:relative;
}
.hero-photo-wrap{
right:auto;
left:0;
top:0;
width:100%;
height:285px;
border-radius:0;
box-shadow:none;
}
.hero-photo-wrap:after{
background:
linear-gradient(180deg,rgba(7,17,31,.2) 0%,rgba(7,17,31,.02) 42%,rgba(7,17,31,.72) 100%),
linear-gradient(90deg,rgba(7,17,31,.32),transparent 45%);
}
.hero-photo-wrap img{
object-position:50% 39%;
filter:saturate(.88) contrast(1.06);
}
.hero-mobile-badge{
display:block;
position:absolute;
z-index:5;
left:18px;
bottom:18px;
max-width:205px;
padding-left:12px;
border-left:2px solid #70aefa;
}
.hero-mobile-badge span{
display:block;
color:#9cc8f6;
font-size:7px;
letter-spacing:.2em;
margin-bottom:5px;
}
.hero-mobile-badge strong{
display:block;
color:#fff;
font:600 14px/1.25 'Manrope',sans-serif;
}
.hero-note{
right:14px;
font-size:21px;
color:rgba(255,255,255,.72);
}
.note-a{top:84px}
.note-b{top:108px}
.note-c{top:132px}
/* A PRÓXIMA SEÇÃO JÁ APARECE NA TELA */
.paths{
padding:56px 0 64px;
}
.paths-head .micro{
display:inline-flex;
align-items:center;
gap:8px;
color:#2878dc;
}
.paths-head .micro:before{
content:"";
width:18px;
height:1px;
background:#2878dc;
}
.paths-head h2{
margin-top:10px;
font-size:clamp(32px,9vw,39px);
letter-spacing:-.045em;
}
.paths-head>p{
font-size:14px;
line-height:1.6;
}
.path-cards{
display:flex;
overflow-x:auto;
gap:10px;
margin-left:-16px;
margin-right:-16px;
padding:0 16px 12px;
scroll-snap-type:x mandatory;
scrollbar-width:none;
}
.path-cards::-webkit-scrollbar{display:none}
.path-card{
flex:0 0 82vw;
max-width:330px;
scroll-snap-align:start;
border-radius:16px;
padding:24px 22px;
}
.path-card:first-child{
background:#07111f;
color:#fff;
border-color:#07111f;
}
.path-card:first-child p{
color:#b9c6d2;
}
.path-card:first-child .path-arrow{
color:#70aefa;
}
/* seções com mais ritmo no celular */
.section-head h2,
.connect-head h2,
.results-copy h2{
letter-spacing:-.045em;
}
.solution-card,
.price-card{
border-radius:16px;
}
.course-row{
border-radius:0;
}
.price-card.featured{
box-shadow:0 18px 45px rgba(7,17,31,.1);
}
.manifesto{
background:
radial-gradient(circle at 80% 20%,rgba(40,120,220,.24),transparent 35%),
#07111f;
}
/* micro feedback de toque */
.btn:active,
.path-card:active,
.solution-card:active,
.plan-btn:active{
transform:scale(.985);
}
}
@media (max-width:390px){
.hero-actions{
grid-template-columns:1fr 50px;
}
.hero-actions .btn.ghost{
width:50px;
min-width:50px;
}
.stats strong{
font-size:14px;
}
.stats span{
font-size:6.5px;
}
.hero-media,
.hero-photo-wrap{
height:265px;
}
.path-card{
flex-basis:86vw;
}
}
/* =========================================================
HOME MOBILE V6 — PATHS EDITORIAL
Substitui o "card UI" por blocos editoriais premium.
========================================================= */
@media (max-width:650px){
.paths{
position:relative;
padding:58px 0 68px;
background:#f7f9fb;
overflow:hidden;
}
.paths:before{
content:"";
position:absolute;
width:210px;
height:210px;
border:1px solid rgba(40,120,220,.10);
border-radius:50%;
right:-120px;
top:30px;
pointer-events:none;
}
.paths-head{
display:block;
margin-bottom:30px;
position:relative;
z-index:1;
}
.paths-head .micro{
display:flex;
align-items:center;
gap:9px;
margin-bottom:12px;
color:#2878dc;
font-size:8px;
font-weight:800;
letter-spacing:.17em;
}
.paths-head .micro:before{
content:"";
width:22px;
height:1px;
background:#2878dc;
}
.paths-head h2{
max-width:300px;
margin:0 0 15px;
font-size:clamp(35px,10vw,43px);
line-height:.98;
letter-spacing:-.055em;
}
.paths-head>p{
max-width:320px;
margin:0;
color:#65717d;
font-size:13.5px;
line-height:1.6;
}
/* sem carrossel, sem cards brancos com borda */
.path-cards{
display:flex;
flex-direction:column;
width:100%;
margin:0;
padding:0;
gap:0;
overflow:visible;
scroll-snap-type:none;
border-top:1px solid #d9e0e7;
}
.path-card,
.path-card:first-child{
position:relative;
width:100%;
max-width:none;
min-height:170px;
flex:none;
scroll-snap-align:none;
display:block;
padding:25px 58px 25px 0;
margin:0;
border:0;
border-bottom:1px solid #d9e0e7;
border-radius:0;
background:transparent;
box-shadow:none;
color:#07111f;
overflow:hidden;
}
/* número vira elemento gráfico, não etiqueta */
.path-card .num{
display:block;
margin:0 0 21px;
color:#2878dc;
font:800 10px/1 'Manrope',sans-serif;
letter-spacing:.14em;
}
.path-card h3,
.path-card:first-child h3{
position:relative;
z-index:2;
max-width:250px;
margin:0 0 9px;
color:#07111f;
font-size:29px;
line-height:1;
letter-spacing:-.045em;
}
.path-card p,
.path-card:first-child p{
position:relative;
z-index:2;
max-width:245px;
margin:0;
color:#68737e;
font-size:12.5px;
line-height:1.5;
}
.path-arrow,
.path-card:first-child .path-arrow{
position:absolute;
z-index:3;
right:0;
top:50%;
transform:translateY(-50%);
width:42px;
height:42px;
margin:0;
display:grid;
place-items:center;
border:1px solid #cad4de;
border-radius:50%;
background:transparent;
color:#07111f;
font-size:19px;
transition:.18s ease;
}
/* Destaque editorial apenas na opção principal */
.path-card:first-child{
min-height:194px;
margin:0 -16px;
width:calc(100% + 32px);
padding:28px 74px 28px 16px;
background:#07111f;
border-bottom:0;
}
.path-card:first-child:after{
content:"01";
position:absolute;
right:42px;
bottom:-28px;
color:rgba(255,255,255,.035);
font:800 128px/.8 'Manrope',sans-serif;
letter-spacing:-.09em;
pointer-events:none;
}
.path-card:first-child .num{
color:#79b7ff;
}
.path-card:first-child h3{
color:#fff;
font-size:31px;
}
.path-card:first-child p{
color:#aebbc7;
}
.path-card:first-child .path-arrow{
right:16px;
border-color:rgba(255,255,255,.25);
color:#fff;
background:rgba(255,255,255,.06);
}
/* Os demais são linhas editoriais, sem aparência de "caixa" */
.path-card:not(:first-child):after{
content:attr(data-index);
position:absolute;
right:34px;
bottom:-18px;
color:rgba(7,17,31,.025);
font:800 92px/.8 'Manrope',sans-serif;
pointer-events:none;
}
.path-card:active{
transform:none;
}
.path-card:active .path-arrow{
transform:translateY(-50%) scale(.92);
background:#2878dc;
border-color:#2878dc;
color:#fff;
}
}
@media (max-width:390px){
.paths{padding-top:52px}
.path-card,.path-card:first-child{padding-right:54px}
.path-card:first-child{
margin-left:-13px;
margin-right:-13px;
width:calc(100% + 26px);
padding-left:13px;
padding-right:68px;
}
.path-card:first-child .path-arrow{right:13px}
.path-card h3,.path-card:first-child h3{font-size:27px}
}
/* =========================================================
B2B — VEST PARA EMPRESAS
========================================================= */
.b2b{
position:relative;
overflow:hidden;
background:#07111f;
color:#fff;
}
.b2b::before{
content:"";
position:absolute;
width:720px;
height:720px;
left:-320px;
top:-260px;
border:1px solid rgba(91,155,226,.10);
border-radius:50%;
box-shadow:
0 0 0 90px rgba(91,155,226,.025),
0 0 0 180px rgba(91,155,226,.015);
pointer-events:none;
}
.b2b::after{
content:"";
position:absolute;
inset:0;
pointer-events:none;
background:
radial-gradient(
circle at 18% 45%,
rgba(43,121,216,.16),
transparent 32%
);
}
/* =========================================================
FUNDO LATERAL
========================================================= */
.b2b-band{
position:absolute;
inset:0 53% 0 0;
background:
linear-gradient(
135deg,
rgba(23,65,106,.45),
rgba(7,17,31,.15)
);
border-right:1px solid rgba(255,255,255,.07);
}
/* =========================================================
GRID
========================================================= */
.b2b-grid{
position:relative;
z-index:2;
display:grid;
grid-template-columns:.88fr 1.12fr;
min-height:760px;
}
/* =========================================================
LADO ESQUERDO
========================================================= */
.b2b-visual{
position:relative;
min-height:760px;
padding:86px 75px 70px 0;
display:flex;
flex-direction:column;
justify-content:space-between;
}
.b2b-eyebrow{
display:flex;
align-items:center;
gap:13px;
font-size:9px;
font-weight:700;
letter-spacing:.23em;
color:#79aff0;
}
.b2b-eyebrow::before{
content:"";
width:28px;
height:1px;
background:#5f9ce4;
}
/* =========================================================
FRASE GIGANTE
========================================================= */
.b2b-statement{
display:flex;
flex-direction:column;
margin-top:auto;
margin-bottom:auto;
padding:60px 0 45px;
}
.b2b-statement span{
display:block;
font-size:11px;
font-weight:700;
letter-spacing:.26em;
color:rgba(255,255,255,.46);
}
.b2b-statement strong{
display:block;
margin:5px 0 22px;
font-family:'Manrope',sans-serif;
font-size:clamp(54px,5.3vw,78px);
font-weight:700;
line-height:.87;
letter-spacing:-.065em;
color:#fff;
}
.b2b-statement strong:last-of-type{
color:#69a9f5;
}
.b2b-statement i{
position:relative;
width:44px;
height:70px;
margin:0 0 25px 4px;
display:flex;
align-items:flex-end;
justify-content:center;
color:#6daaf2;
font-style:normal;
font-size:20px;
}
.b2b-statement i::before{
content:"";
position:absolute;
top:0;
left:50%;
width:1px;
height:47px;
background:
linear-gradient(
180deg,
rgba(105,169,245,.1),
rgba(105,169,245,.85)
);
}
/* =========================================================
RODAPÉ VISUAL
========================================================= */
.b2b-visual-footer{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:13px;
}
.b2b-visual-footer span{
display:flex;
align-items:center;
gap:13px;
font-size:8px;
font-weight:700;
letter-spacing:.18em;
color:rgba(255,255,255,.44);
}
.b2b-visual-footer span:not(:last-child)::after{
content:"";
width:3px;
height:3px;
border-radius:50%;
background:#4f91dc;
}
/* =========================================================
CONTEÚDO DIREITO
========================================================= */
.b2b-copy{
padding:105px 0 100px 90px;
display:flex;
flex-direction:column;
justify-content:center;
}
.b2b-copy .micro{
margin-bottom:20px;
}
.b2b-copy h2{
margin:0;
max-width:650px;
font-family:'Manrope',sans-serif;
font-size:clamp(46px,4.5vw,66px);
font-weight:600;
line-height:.98;
letter-spacing:-.055em;
color:#fff;
}
.b2b-copy h2 em{
display:block;
color:#69a9f5;
font-style:normal;
font-weight:400;
}
.b2b-copy h3{
margin:20px 0 0;
font-family:'Manrope',sans-serif;
font-size:21px;
font-weight:600;
letter-spacing:-.025em;
color:#fff;
}
.b2b-copy > p{
max-width:620px;
margin:23px 0 0;
font-size:14px;
line-height:1.8;
color:#9fadb9;
}
/* =========================================================
FLUXO
========================================================= */
.b2b-flow{
position:relative;
display:grid;
grid-template-columns:1fr 1fr;
gap:0;
margin-top:42px;
border-top:1px solid rgba(255,255,255,.11);
border-bottom:1px solid rgba(255,255,255,.11);
}
.b2b-step{
position:relative;
min-height:112px;
display:grid;
grid-template-columns:40px 1fr;
gap:14px;
align-items:center;
padding:22px 22px 22px 0;
}
.b2b-step:nth-child(odd){
border-right:1px solid rgba(255,255,255,.10);
}
.b2b-step:nth-child(2),
.b2b-step:nth-child(4){
padding-left:26px;
}
.b2b-step:nth-child(-n+2){
border-bottom:1px solid rgba(255,255,255,.10);
}
/* NÚMERO */
.b2b-step > span{
align-self:start;
margin-top:3px;
font-family:'Manrope',sans-serif;
font-size:10px;
font-weight:700;
letter-spacing:.08em;
color:#5598e6;
}
/* LABEL */
.b2b-step small{
display:block;
margin-bottom:6px;
font-size:8px;
font-weight:700;
letter-spacing:.18em;
color:#6e8193;
}
/* TÍTULO */
.b2b-step strong{
display:block;
font-family:'Manrope',sans-serif;
font-size:17px;
font-weight:600;
letter-spacing:-.025em;
color:#edf4fb;
}
/* DETALHE HOVER */
.b2b-step::after{
content:"";
position:absolute;
left:0;
bottom:-1px;
width:0;
height:2px;
background:#438cde;
transition:width .4s cubic-bezier(.22,.8,.2,1);
}
.b2b-step:hover::after{
width:100%;
}
/* =========================================================
CTA
========================================================= */
.b2b-action{
display:flex;
align-items:center;
gap:24px;
margin-top:36px;
}
.b2b-action .btn{
flex:0 0 auto;
min-height:52px;
padding:0 23px;
border-radius:999px;
background:#fff;
color:#07111f;
transition:
transform .25s ease,
box-shadow .25s ease;
}
.b2b-action .btn:hover{
transform:translateY(-2px);
box-shadow:
0 14px 35px rgba(0,0,0,.22);
}
.b2b-action .btn span{
margin-left:8px;
}
.b2b-action > small{
max-width:230px;
font-size:10px;
line-height:1.55;
color:#718396;
}
/* =========================================================
TABLET
========================================================= */
@media(max-width:1000px){
.b2b-band{
inset:0;
height:44%;
border-right:0;
border-bottom:1px solid rgba(255,255,255,.07);
}
.b2b-grid{
grid-template-columns:1fr;
min-height:0;
}
.b2b-visual{
min-height:500px;
padding:
75px 0
55px;
}
.b2b-statement{
padding:45px 0;
}
.b2b-statement strong{
font-size:68px;
}
.b2b-copy{
padding:
75px 0
85px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media(max-width:650px){
.b2b::before{
width:430px;
height:430px;
left:-240px;
top:-120px;
}
/* VISUAL */
.b2b-band{
height:420px;
}
.b2b-visual{
min-height:420px;
padding:
52px 0
35px;
}
.b2b-eyebrow{
font-size:8px;
}
.b2b-statement{
padding:
38px 0
25px;
}
.b2b-statement span{
font-size:8px;
}
.b2b-statement strong{
margin:
4px 0
15px;
font-size:48px;
line-height:.9;
}
.b2b-statement i{
height:44px;
margin:
0 0
17px 2px;
}
.b2b-statement i::before{
height:30px;
}
.b2b-visual-footer{
gap:8px;
}
.b2b-visual-footer span{
gap:8px;
font-size:7px;
}
/* TEXTO */
.b2b-copy{
padding:
64px 0
70px;
}
.b2b-copy .micro{
margin-bottom:15px;
}
.b2b-copy h2{
font-size:41px;
line-height:.98;
}
.b2b-copy h3{
margin-top:17px;
font-size:18px;
line-height:1.3;
}
.b2b-copy > p{
margin-top:18px;
font-size:13px;
line-height:1.75;
}
/* PASSOS */
.b2b-flow{
grid-template-columns:1fr;
margin-top:35px;
}
.b2b-step,
.b2b-step:nth-child(2),
.b2b-step:nth-child(4){
min-height:0;
grid-template-columns:38px 1fr;
padding:
19px 0;
}
.b2b-step:nth-child(odd){
border-right:0;
}
.b2b-step:nth-child(-n+3){
border-bottom:
1px solid
rgba(255,255,255,.09);
}
.b2b-step strong{
font-size:16px;
}
/* CTA */
.b2b-action{
flex-direction:column;
align-items:flex-start;
gap:14px;
margin-top:29px;
}
.b2b-action .btn{
width:100%;
justify-content:space-between;
}
.b2b-action > small{
max-width:100%;
font-size:9px;
}
}
/* =========================================================
VEST CONNECT — HOME
Apresentação dos planos + direcionamento para /connect/
========================================================= */
.connect{
position:relative;
overflow:hidden;
padding:120px 0 110px;
background:#f4f7fa;
color:#07111f;
}
/* detalhe de fundo */
.connect::before{
content:"CONNECT";
position:absolute;
top:35px;
right:-30px;
font-family:'Manrope',sans-serif;
font-size:clamp(110px,16vw,240px);
font-weight:800;
line-height:.8;
letter-spacing:-.08em;
color:rgba(7,17,31,.025);
pointer-events:none;
white-space:nowrap;
}
.connect .shell{
position:relative;
z-index:2;
}
/* =========================================================
CABEÇALHO
========================================================= */
.connect-head{
display:grid;
grid-template-columns:1.15fr .85fr;
column-gap:80px;
align-items:end;
margin-bottom:60px;
}
.connect-head .micro{
grid-column:1 / -1;
margin-bottom:20px;
color:#2878dc;
}
.connect-head h2{
margin:0;
font-family:'Manrope',sans-serif;
font-size:clamp(48px,5vw,72px);
font-weight:500;
line-height:.96;
letter-spacing:-.06em;
color:#07111f;
}
.connect-head h2 b{
color:#2878dc;
font-weight:600;
}
.connect-head > p{
max-width:460px;
margin:0 0 5px;
font-size:14px;
line-height:1.8;
color:#667586;
}
/* =========================================================
PLANOS
========================================================= */
.connect .pricing-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:14px;
align-items:stretch;
}
.connect .price-card{
position:relative;
display:flex;
flex-direction:column;
min-height:510px;
padding:38px 34px 32px;
overflow:hidden;
border:1px solid #dfe5eb;
border-radius:3px;
background:#fff;
transition:
transform .3s ease,
border-color .3s ease,
box-shadow .3s ease;
}
.connect .price-card:hover{
transform:translateY(-6px);
border-color:#bdcbd8;
box-shadow:0 24px 55px rgba(7,17,31,.08);
}
/* plano destaque */
.connect .price-card.featured{
background:#07111f;
border-color:#07111f;
color:#fff;
transform:translateY(-10px);
}
.connect .price-card.featured:hover{
transform:translateY(-15px);
box-shadow:0 28px 60px rgba(7,17,31,.18);
}
/* =========================================================
MAIS POPULAR
========================================================= */
.connect .popular{
position:absolute;
top:0;
right:0;
padding:9px 14px;
background:#2878dc;
color:#fff;
font-size:8px;
font-weight:700;
letter-spacing:.14em;
}
/* =========================================================
TEXTO DOS PLANOS
========================================================= */
.connect .plan-caption{
display:block;
min-height:16px;
margin-bottom:11px;
color:#7a8998;
font-size:9px;
font-weight:700;
letter-spacing:.12em;
text-transform:uppercase;
}
.connect .featured .plan-caption{
color:#7faee7;
}
.connect .price-card h3{
margin:0;
font-family:'Manrope',sans-serif;
font-size:29px;
font-weight:600;
letter-spacing:-.045em;
color:#07111f;
}
.connect .featured h3{
color:#fff;
}
/* =========================================================
PREÇO
========================================================= */
.connect .price{
display:flex;
align-items:flex-start;
margin:25px 0 30px;
color:#07111f;
}
.connect .price small{
margin:8px 5px 0 0;
font-size:11px;
font-weight:700;
}
.connect .price strong{
font-family:'Manrope',sans-serif;
font-size:53px;
font-weight:600;
line-height:.9;
letter-spacing:-.07em;
}
.connect .price em{
align-self:flex-end;
margin:0 0 4px 6px;
color:#85919d;
font-size:10px;
font-style:normal;
}
.connect .featured .price,
.connect .featured .price strong,
.connect .featured .price small{
color:#fff;
}
.connect .featured .price em{
color:#8fa0b1;
}
/* =========================================================
BENEFÍCIOS
========================================================= */
.connect .price-card ul{
display:flex;
flex-direction:column;
gap:0;
margin:0 0 30px;
padding:0;
list-style:none;
}
.connect .price-card li{
position:relative;
padding:11px 0 11px 21px;
border-bottom:1px solid #edf0f3;
color:#536273;
font-size:15px;
line-height:1.45;
}
.connect .price-card li::before{
content:"";
position:absolute;
left:1px;
top:17px;
width:5px;
height:5px;
border-radius:50%;
background:#2878dc;
}
.connect .featured li{
border-color:rgba(255,255,255,.09);
color:#b1bdc9;
}
.connect .featured li::before{
background:#69a9f5;
}
/* =========================================================
BOTÃO DE CADA PLANO
========================================================= */
.connect .plan-btn{
margin-top:auto;
min-height:51px;
padding:0 18px;
display:flex;
align-items:center;
justify-content:space-between;
border:1px solid #dce3e9;
color:#07111f;
background:#fff;
font-size:16px;
font-weight:700;
letter-spacing:.03em;
text-decoration:none;
transition:
background .22s ease,
color .22s ease,
border-color .22s ease;
}
.connect .plan-btn span{
font-size:17px;
transition:transform .22s ease;
}
.connect .plan-btn:hover{
background:#07111f;
border-color:#07111f;
color:#fff;
}
.connect .plan-btn:hover span{
transform:translateX(4px);
}
/* botão do plano destaque */
.connect .featured .plan-btn{
border-color:#2878dc;
background:#2878dc;
color:#fff;
}
.connect .featured .plan-btn:hover{
border-color:#fff;
background:#fff;
color:#07111f;
}
/* =========================================================
CTA FINAL — NÃO SABE QUAL PLANO?
========================================================= */
.connect-home-cta{
position:relative;
margin-top:28px;
padding:42px 45px;
display:grid;
grid-template-columns:1fr auto;
align-items:center;
gap:50px;
overflow:hidden;
background:#07111f;
color:#fff;
}
/* detalhe azul lateral */
.connect-home-cta::before{
content:"";
position:absolute;
left:0;
top:0;
bottom:0;
width:4px;
background:#2878dc;
}
/* detalhe decorativo */
.connect-home-cta::after{
content:"→";
position:absolute;
right:250px;
top:50%;
transform:translateY(-52%);
font-family:'Manrope',sans-serif;
font-size:120px;
font-weight:300;
color:rgba(255,255,255,.025);
pointer-events:none;
}
.connect-home-cta .micro{
display:block;
margin-bottom:10px;
color:#69a9f5;
}
.connect-home-cta h3{
margin:0;
font-family:'Manrope',sans-serif;
font-size:30px;
font-weight:600;
line-height:1.08;
letter-spacing:-.045em;
color:#fff;
}
.connect-home-cta p{
max-width:570px;
margin:13px 0 0;
color:#8fa0b1;
font-size:11px;
line-height:1.65;
}
/* CTA PRINCIPAL */
.connect-home-cta .btn{
position:relative;
z-index:2;
min-width:225px;
min-height:55px;
display:flex;
align-items:center;
justify-content:space-between;
padding:0 22px;
border-radius:0;
background:#fff;
color:#07111f;
white-space:nowrap;
box-shadow:none;
}
.connect-home-cta .btn:hover{
background:#2878dc;
color:#fff;
}
.connect-home-cta .btn span{
margin-left:20px;
font-size:18px;
transition:transform .2s ease;
}
.connect-home-cta .btn:hover span{
transform:translateX(4px);
}
/* =========================================================
TABLET
========================================================= */
@media(max-width:980px){
.connect{
padding:90px 0;
}
.connect-head{
grid-template-columns:1fr;
gap:20px;
margin-bottom:45px;
}
.connect-head .micro{
margin-bottom:0;
}
.connect-head > p{
max-width:600px;
}
.connect .pricing-grid{
grid-template-columns:1fr 1fr;
}
.connect .price-card.featured{
transform:none;
}
.connect .price-card.featured:hover{
transform:translateY(-5px);
}
.connect .price-card:last-child{
grid-column:1 / -1;
}
.connect-home-cta{
grid-template-columns:1fr;
gap:28px;
}
.connect-home-cta .btn{
width:max-content;
}
}
/* =========================================================
MOBILE
========================================================= */
@media(max-width:640px){
.connect{
padding:72px 0 65px;
}
.connect::before{
top:25px;
right:-10px;
font-size:90px;
}
/* cabeçalho */
.connect-head{
gap:17px;
margin-bottom:34px;
}
.connect-head h2{
font-size:43px;
line-height:.98;
}
.connect-head > p{
font-size:12px;
line-height:1.7;
}
/* planos */
.connect .pricing-grid{
grid-template-columns:1fr;
gap:12px;
}
.connect .price-card,
.connect .price-card:last-child{
grid-column:auto;
min-height:0;
padding:30px 25px 25px;
}
.connect .price-card:hover,
.connect .price-card.featured:hover{
transform:none;
}
.connect .price-card h3{
font-size:26px;
}
.connect .price{
margin:20px 0 23px;
}
.connect .price strong{
font-size:48px;
}
.connect .price-card ul{
margin-bottom:23px;
}
.connect .price-card li{
padding-top:9px;
padding-bottom:9px;
}
.connect .price-card li::before{
top:15px;
}
/* CTA final */
.connect-home-cta{
margin-top:16px;
padding:32px 24px;
gap:25px;
}
.connect-home-cta::after{
display:none;
}
.connect-home-cta h3{
font-size:26px;
}
.connect-home-cta p{
font-size:10.5px;
}
.connect-home-cta .btn{
width:100%;
min-width:0;
justify-content:space-between;
}
}
/* =========================================================
EDITORIAL BREAK — ECOSSISTEMA VEST
========================================================= */
.editorial-break{
position:relative;
overflow:hidden;
padding:135px 0 110px;
background:#eaf0f5;
color:#07111f;
}
/* palavra gigante no fundo */
.editorial-bg-word{
position:absolute;
top:-40px;
left:50%;
transform:translateX(-50%);
font-family:'Manrope',sans-serif;
font-size:clamp(190px,29vw,440px);
font-weight:800;
line-height:.8;
letter-spacing:-.1em;
color:rgba(7,17,31,.035);
white-space:nowrap;
pointer-events:none;
}
/* =========================================================
GRID PRINCIPAL
========================================================= */
.editorial-grid{
position:relative;
z-index:2;
display:grid;
grid-template-columns:150px 1.05fr .95fr;
column-gap:70px;
row-gap:80px;
align-items:start;
}
/* =========================================================
ÍNDICE
========================================================= */
.editorial-index{
padding-top:10px;
display:flex;
flex-direction:column;
gap:8px;
}
.editorial-index span{
font-size:8px;
font-weight:700;
letter-spacing:.22em;
color:#2878dc;
}
.editorial-index strong{
font-family:'Manrope',sans-serif;
font-size:12px;
font-weight:600;
letter-spacing:.05em;
color:#7a8998;
}
/* linha */
.editorial-index::after{
content:"";
width:50px;
height:1px;
margin-top:16px;
background:#2878dc;
}
/* =========================================================
TEXTO PRINCIPAL
========================================================= */
.editorial-copy{
max-width:660px;
}
.editorial-copy .micro{
display:block;
margin-bottom:25px;
color:#2878dc;
}
.editorial-copy h2{
margin:0;
font-family:'Manrope',sans-serif;
font-size:clamp(60px,6vw,88px);
font-weight:500;
line-height:.88;
letter-spacing:-.07em;
color:#07111f;
}
.editorial-copy h2 em{
display:block;
color:#2878dc;
font-style:normal;
font-weight:500;
}
.editorial-copy > p{
max-width:560px;
margin:32px 0 0;
padding-left:28px;
border-left:1px solid #b7c6d5;
font-size:14px;
line-height:1.85;
color:#536474;
}
/* =========================================================
PILARES
========================================================= */
.editorial-pillars{
border-top:1px solid #cbd5df;
}
.editorial-pillar{
position:relative;
display:grid;
grid-template-columns:42px 1fr;
grid-template-areas:
"number title"
"number description";
column-gap:10px;
padding:21px 5px 21px 0;
border-bottom:1px solid #cbd5df;
transition:
padding-left .25s ease,
border-color .25s ease;
}
.editorial-pillar:hover{
padding-left:10px;
border-color:#2878dc;
}
/* número */
.editorial-pillar > span{
grid-area:number;
padding-top:3px;
font-family:'Manrope',sans-serif;
font-size:9px;
font-weight:700;
color:#2878dc;
}
/* título */
.editorial-pillar strong{
grid-area:title;
font-family:'Manrope',sans-serif;
font-size:19px;
font-weight:600;
letter-spacing:-.03em;
color:#07111f;
}
/* descrição */
.editorial-pillar small{
grid-area:description;
max-width:330px;
margin-top:6px;
font-size:15px;
line-height:1.55;
color:#71808e;
}
/* seta no hover */
.editorial-pillar::after{
content:"↗";
position:absolute;
right:4px;
top:22px;
font-size:13px;
color:#a0afbd;
opacity:0;
transform:translate(-5px,5px);
transition:
opacity .25s ease,
transform .25s ease,
color .25s ease;
}
.editorial-pillar:hover::after{
opacity:1;
transform:translate(0,0);
color:#2878dc;
}
/* =========================================================
ASSINATURA GRUPO HR
========================================================= */
.editorial-signature{
grid-column:2 / 4;
position:relative;
display:grid;
grid-template-columns:auto auto 1fr;
align-items:center;
gap:18px;
padding-top:27px;
border-top:1px solid #bac8d5;
}
.editorial-signature > span{
font-size:8px;
font-weight:700;
letter-spacing:.18em;
color:#82909d;
}
.editorial-signature > strong{
font-family:'Manrope',sans-serif;
font-size:13px;
font-weight:700;
letter-spacing:.06em;
color:#07111f;
}
.editorial-signature > i{
justify-self:end;
font-family:'Manrope',sans-serif;
font-size:12px;
font-style:normal;
color:#697a89;
}
/* bolinha */
.editorial-signature::before{
content:"";
position:absolute;
top:-4px;
left:0;
width:7px;
height:7px;
border-radius:50%;
background:#2878dc;
}
/* =========================================================
TABLET
========================================================= */
@media(max-width:980px){
.editorial-break{
padding:105px 0 90px;
}
.editorial-grid{
grid-template-columns:100px 1fr;
column-gap:40px;
row-gap:55px;
}
.editorial-copy{
grid-column:2;
}
.editorial-pillars{
grid-column:2;
}
.editorial-signature{
grid-column:2;
}
}
/* =========================================================
MOBILE
========================================================= */
@media(max-width:640px){
.editorial-break{
padding:78px 0 70px;
}
/* VEST gigante */
.editorial-bg-word{
top:5px;
font-size:42vw;
color:rgba(7,17,31,.032);
}
/* layout */
.editorial-grid{
display:block;
}
/* índice */
.editorial-index{
margin-bottom:48px;
flex-direction:row;
align-items:center;
gap:13px;
}
.editorial-index::after{
flex:1;
width:auto;
margin:0 0 0 5px;
background:#bdcad6;
}
/* título */
.editorial-copy .micro{
margin-bottom:18px;
}
.editorial-copy h2{
font-size:52px;
line-height:.91;
}
.editorial-copy > p{
margin-top:27px;
padding-left:18px;
font-size:12.5px;
line-height:1.75;
}
/* pilares */
.editorial-pillars{
margin-top:48px;
}
.editorial-pillar{
grid-template-columns:36px 1fr;
padding:
18px 0;
}
.editorial-pillar:hover{
padding-left:0;
}
.editorial-pillar strong{
font-size:18px;
}
.editorial-pillar small{
padding-right:15px;
font-size:10px;
}
.editorial-pillar::after{
display:none;
}
/* assinatura */
.editorial-signature{
margin-top:46px;
display:flex;
flex-wrap:wrap;
gap:8px 12px;
padding-top:24px;
}
.editorial-signature > i{
flex-basis:100%;
margin-top:5px;
font-size:11px;
}
}
/* =========================================================
VEST EXPERIENCE — AJUSTE FINAL / REELS EXPERIENCE
Base consolidada: não adicionar outra versão abaixo.
========================================================= */
.vest-experience{
position:relative;
overflow:hidden;
padding:108px 0 92px;
background:#f5f7fa;
}
.vest-experience-head{
width:var(--shell);
max-width:1180px;
margin:0 auto 48px;
}
.vest-experience-label{
display:flex;
align-items:center;
justify-content:space-between;
gap:24px;
padding-bottom:15px;
border-bottom:1px solid rgba(7,17,31,.10);
}
.vest-experience-count{
font-size:9px;
font-weight:700;
letter-spacing:.18em;
color:#8996a4;
}
.vest-experience-title{
display:grid;
grid-template-columns:minmax(0,1.25fr) minmax(260px,.55fr);
gap:80px;
align-items:end;
padding-top:28px;
}
.vest-experience-title h2{
margin:0;
font-family:'Manrope',sans-serif;
font-size:clamp(48px,5.4vw,76px);
line-height:.96;
letter-spacing:-.055em;
color:#07111f;
}
.vest-experience-title h2 b{
font-weight:400;
color:#327bd8;
}
.vest-experience-title p{
margin:0 0 5px;
max-width:420px;
font-size:14px;
line-height:1.75;
color:#697687;
}
.vest-carousel{
min-height:650px;
}
.vest-track{
height:650px;
}
.vest-slide{
border-radius:18px;
}
.vest-slide.active{
width:340px;
}
.vest-slide-top{
position:absolute;
top:20px;
left:20px;
right:20px;
z-index:5;
display:flex;
align-items:center;
justify-content:space-between;
gap:15px;
color:rgba(255,255,255,.9);
font-size:8px;
font-weight:700;
letter-spacing:.17em;
}
.vest-slide-content{
left:24px;
right:24px;
bottom:25px;
}
.vest-slide-content > div small{
display:block;
margin-bottom:8px;
font-size:8px;
font-weight:800;
letter-spacing:.18em;
color:#75b2ff;
}
.vest-slide-number{
margin-bottom:12px;
font-size:10px;
}
.vest-slide h3{
max-width:270px;
font-family:'Manrope',sans-serif;
font-size:24px;
}
.vest-carousel-footer{
display:flex;
align-items:center;
justify-content:space-between;
gap:30px;
margin-top:4px;
}
.vest-experience-signature{
font-size:9px;
font-weight:700;
letter-spacing:.18em;
color:#8a96a4;
}
@media(max-width:900px){
.vest-experience{
padding:82px 0 72px;
}
.vest-experience-title{
grid-template-columns:1fr;
gap:18px;
}
.vest-experience-title h2{
font-size:clamp(44px,8vw,64px);
}
.vest-carousel{
min-height:600px;
}
.vest-track{
height:600px;
}
.vest-slide.pos-left{
transform:translateX(-330px) scale(.86);
}
.vest-slide.pos-right{
transform:translateX(330px) scale(.86);
}
}
@media(max-width:640px){
.vest-experience{
padding:70px 0 62px;
}
.vest-experience-head{
margin-bottom:30px;
}
.vest-experience-label{
align-items:flex-start;
}
.vest-experience-count{
max-width:130px;
text-align:right;
line-height:1.5;
}
.vest-experience-title{
padding-top:22px;
}
.vest-experience-title h2{
font-size:42px;
line-height:.98;
}
.vest-experience-title p{
font-size:13px;
}
.vest-carousel{
min-height:555px;
}
.vest-track{
height:555px;
}
.vest-slide{
width:190px;
border-radius:16px;
}
.vest-slide.active{
width:min(78vw,300px);
}
.vest-slide.pos-left{
transform:translateX(-255px) scale(.82);
opacity:.24;
}
.vest-slide.pos-right{
transform:translateX(255px) scale(.82);
opacity:.24;
}
.vest-slide.pos-far-left,
.vest-slide.pos-far-right{
opacity:0;
pointer-events:none;
}
.vest-carousel-arrow{
width:42px;
height:42px;
font-size:21px;
}
.vest-prev{left:10px}
.vest-next{right:10px}
.vest-slide-content{
left:20px;
right:20px;
bottom:22px;
}
.vest-slide h3{
font-size:22px;
}
.vest-slide p{
font-size:11.5px;
}
.vest-carousel-footer{
align-items:flex-start;
flex-direction:column;
gap:16px;
}
}
/* =========================================================
PATHS — ENCONTRE SEU CAMINHO
========================================================= */
.paths{
position:relative;
padding:120px 0 125px;
overflow:hidden;
background:#fff;
}
.paths::before{
content:"";
position:absolute;
width:500px;
height:500px;
right:-250px;
top:-250px;
border:1px solid rgba(10,35,62,.055);
border-radius:50%;
pointer-events:none;
}
/* CABEÇALHO */
.paths-head{
display:grid;
grid-template-columns:1.15fr .65fr;
gap:100px;
align-items:end;
margin-bottom:72px;
}
.paths-head h2{
margin:13px 0 0;
font-family:'Manrope',sans-serif;
font-size:clamp(52px,5vw,76px);
font-weight:700;
line-height:.94;
letter-spacing:-.055em;
color:#07111f;
}
.paths-head h2 b{
font-weight:400;
color:#327bd8;
}
.paths-head > p{
max-width:400px;
margin:0 0 4px;
color:#6d7987;
font-size:14px;
line-height:1.75;
}
/* LISTA */
.path-list{
border-top:1px solid #dce3e9;
}
/* ITEM */
.path-item{
position:relative;
display:grid;
grid-template-columns:
55px
180px
minmax(0,1fr)
115px;
gap:30px;
align-items:center;
min-height:190px;
padding:22px 0;
border-bottom:1px solid #dce3e9;
color:#07111f;
transition:
padding .4s cubic-bezier(.22,.8,.2,1),
background .3s ease;
}
/* NÚMERO */
.path-number{
align-self:start;
padding-top:9px;
color:#9ba6b1;
font-size:9px;
font-weight:700;
letter-spacing:.18em;
}
/* FOTO */
.path-image{
position:relative;
width:180px;
height:140px;
overflow:hidden;
background-position:center;
background-size:cover;
transition:
width .45s cubic-bezier(.22,.8,.2,1),
transform .45s cubic-bezier(.22,.8,.2,1);
}
.path-image::after{
content:"";
position:absolute;
inset:0;
background:
linear-gradient(
135deg,
rgba(5,17,31,.04),
rgba(5,17,31,.20)
);
}
/* IMAGENS */
.path-image.p1{
background-image:url('../img/capacitar.webp');
}
.path-image.p2{
background-image:url('../img/equipe.webp');
}
.path-image.p3{
background-image:url('../img/connect.webp');
}
/* CONTEÚDO */
.path-content{
max-width:610px;
}
.path-content > span{
display:block;
margin-bottom:9px;
color:#327bd8;
font-size:8px;
font-weight:800;
letter-spacing:.18em;
}
.path-content h3{
margin:0 0 10px;
font-family:'Manrope',sans-serif;
font-size:clamp(24px,2.2vw,32px);
font-weight:700;
line-height:1.05;
letter-spacing:-.04em;
}
.path-content p{
max-width:530px;
margin:0;
color:#74808c;
font-size:13px;
line-height:1.65;
}
/* AÇÃO */
.path-action{
display:flex;
flex-direction:column;
align-items:flex-end;
justify-content:center;
gap:13px;
}
.path-action small{
color:#8793a0;
font-size:8px;
font-weight:800;
letter-spacing:.17em;
}
.path-action b{
width:48px;
height:48px;
display:grid;
place-items:center;
border:1px solid #d5dde5;
border-radius:50%;
font-size:18px;
font-weight:400;
transition:.3s ease;
}
/* HOVER */
.path-item:hover{
padding-left:14px;
padding-right:14px;
background:#f7f9fb;
}
.path-item:hover .path-image{
transform:scale(1.025);
}
.path-item:hover .path-action b{
color:#fff;
background:#327bd8;
border-color:#327bd8;
transform:rotate(45deg);
}
/* =========================================================
TABLET
========================================================= */
@media(max-width:900px){
.paths{
padding:90px 0;
}
.paths-head{
grid-template-columns:1fr;
gap:22px;
margin-bottom:50px;
}
.path-item{
grid-template-columns:
38px
145px
1fr
60px;
gap:20px;
}
.path-image{
width:145px;
height:125px;
}
.path-action small{
display:none;
}
}
/* =========================================================
MOBILE
========================================================= */
@media(max-width:640px){
.paths{
padding:72px 0 78px;
}
.paths-head{
margin-bottom:38px;
}
.paths-head h2{
font-size:44px;
}
.paths-head > p{
font-size:13px;
}
.path-item{
display:grid;
grid-template-columns:36px 1fr 45px;
gap:12px;
min-height:auto;
padding:24px 0;
}
.path-number{
grid-column:1;
grid-row:1;
padding-top:3px;
}
.path-image{
grid-column:2 / 4;
grid-row:1;
width:100%;
height:180px;
margin-bottom:10px;
}
.path-content{
grid-column:2;
grid-row:2;
}
.path-content h3{
font-size:25px;
}
.path-content p{
margin-top:8px;
font-size:12px;
line-height:1.6;
}
.path-action{
grid-column:3;
grid-row:2;
align-self:center;
}
.path-action b{
width:40px;
height:40px;
font-size:16px;
}
.path-item:hover{
padding-left:0;
padding-right:0;
background:transparent;
}
}
/* =========================================================
VEST COLLEGE — TYPOGRAPHY / READABILITY PASS
Ajuste final de legibilidade.
Mantém hierarquia editorial sem microtextos excessivamente pequenos.
========================================================= */
/* Base */
body{
font-size:16px;
line-height:1.6;
}
/* Header */
.nav-links a{
font-size:14px;
}
.buy-top{
font-size:14px;
}
.mobile-nav a{
font-size:15px;
}
/* Labels editoriais globais */
.micro{
font-size:12px;
line-height:1.35;
}
/* Hero */
.kicker{
font-size:11px;
}
.hero-copy > p{
font-size:18px;
}
.btn{
font-size:14.5px;
}
.stats strong{
font-size:26px;
}
.stats span{
font-size:11px;
line-height:1.45;
}
.side-caption{
font-size:10px;
}
/* =========================================================
PATHS
========================================================= */
.paths-head > p,
.paths-head p{
font-size:17px;
}
.path-number{
font-size:11px;
}
.path-content > span{
font-size:10px;
line-height:1.35;
}
.path-content h3{
font-size:clamp(26px,2.25vw,34px);
}
.path-content p{
font-size:15px;
line-height:1.7;
}
.path-action small{
font-size:10px;
}
/* Compatibilidade caso ainda exista markup antigo */
.path-card .label{
font-size:11px;
}
.path-card h3{
font-size:27px;
}
.path-card p{
font-size:15px;
}
/* =========================================================
EDITORIAL / ECOSSISTEMA
========================================================= */
.editorial-copy p{
font-size:16px;
}
.editorial-index{
font-size:11px;
}
.editorial-pillar span{
font-size:15px;
}
.editorial-pillar p{
font-size:14px;
}
.editorial-signature{
font-size:11px;
}
/* =========================================================
VEST EXPERIENCE / REELS
========================================================= */
.vest-experience-count{
font-size:10px;
}
.vest-experience-title p{
font-size:15px;
}
.vest-slide-top{
font-size:10px;
}
.vest-slide-number{
font-size:11px;
}
.vest-slide-content > div small{
font-size:10px;
}
.vest-slide h3{
font-size:26px;
}
.vest-slide p{
font-size:14px;
line-height:1.6;
}
.vest-experience-signature{
font-size:10px;
}
/* =========================================================
SOLUÇÕES
========================================================= */
.solutions .section-head > p{
font-size:16px;
}
.solution-number{
font-size:11px;
}
.solution-category{
font-size:10px;
}
.solution-card h3{
font-size:25px;
}
.solution-card p{
font-size:14.5px;
line-height:1.7;
}
.solution-link{
font-size:12px;
}
.solutions-current,
.solutions-total{
font-size:10px;
}
/* =========================================================
CAPACITAÇÃO / CURSOS CORPORATIVOS
========================================================= */
.course-top p{
font-size:16px;
}
.course-row .num{
font-size:12px;
}
.course-meta small{
font-size:10px;
}
.course-meta h3{
font-size:25px;
}
.course-row p{
font-size:14.5px;
}
.hours{
font-size:14px;
}
.course-arrow{
font-size:14px;
}
.course-note{
font-size:14px;
}
/* =========================================================
MODALIDADES
========================================================= */
.modality-copy p{
font-size:16px;
}
.modality-cards span{
font-size:11px;
}
.modality-cards h3{
font-size:23px;
}
.modality-cards p{
font-size:14.5px;
line-height:1.65;
}
/* =========================================================
B2B / EMPRESAS
========================================================= */
.b2b-copy p{
font-size:16px;
}
.b2b-eyebrow{
font-size:11px;
}
.b2b-statement{
font-size:14px;
}
.b2b-step span,
.b2b-step small{
font-size:11px;
}
.b2b-step strong{
font-size:16px;
}
.b2b-action{
font-size:14px;
}
/* =========================================================
CONNECT / PLANOS
========================================================= */
.connect-head p{
font-size:17px;
}
.plan-caption{
font-size:13px;
}
.popular{
font-size:10px;
}
.price small,
.price em{
font-size:14px;
}
.price-card li{
font-size:14px;
line-height:1.55;
}
.plan-btn{
font-size:14px;
}
.connect-home-cta{
font-size:14px;
}
/* =========================================================
APP
========================================================= */
.app-copy > p,
.app-intro-text{
font-size:16px;
}
.app-points span{
font-size:11px;
}
.app-points p{
font-size:15px;
}
.flow span{
font-size:11px;
}
.app-side-label,
.app-feature-number{
font-size:11px;
}
.app-feature p,
.app-profile-flow p{
font-size:14.5px;
}
.app-store-btn{
font-size:13px;
}
.app-interface-label,
.app-floating-label span{
font-size:10px;
}
.app-floating-label strong{
font-size:15px;
}
/* =========================================================
RESULTADOS / MANIFESTO
========================================================= */
.results-copy p{
font-size:16px;
}
.result span{
font-size:12px;
}
.result strong{
font-size:21px;
}
.manifesto p{
font-size:19px;
}
/* =========================================================
FOOTER
========================================================= */
.footer-brand p{
font-size:14px;
}
.footer-grid h4{
font-size:12px;
}
.footer-grid a,
.footer-grid span{
font-size:14px;
}
.footer-bottom{
font-size:12px;
}
/* =========================================================
MOBILE — manter leitura confortável sem inflar layout
========================================================= */
@media(max-width:640px){
body{
font-size:15px;
}
.micro{
font-size:10.5px;
}
.kicker{
font-size:10px;
}
.hero-copy > p{
font-size:16px;
line-height:1.7;
}
.stats span{
font-size:10.5px;
}
.paths-head > p,
.paths-head p{
font-size:14.5px;
}
.path-number{
font-size:10px;
}
.path-content > span{
font-size:9.5px;
}
.path-content h3{
font-size:26px;
}
.path-content p{
font-size:14px;
line-height:1.65;
}
.path-action small{
font-size:9px;
}
.solutions .section-head > p{
font-size:14px;
}
.solution-number{
font-size:10px;
}
.solution-category{
font-size:9.5px;
}
.solution-card h3{
font-size:24px;
}
.solution-card p{
font-size:14px;
}
.solution-link{
font-size:11.5px;
}
.course-top p,
.modality-copy p,
.b2b-copy p,
.connect-head p,
.app-copy > p,
.app-intro-text,
.results-copy p{
font-size:14.5px;
}
.course-meta small{
font-size:9.5px;
}
.course-meta h3{
font-size:23px;
}
.course-row p{
font-size:14px;
}
.modality-cards span{
font-size:10px;
}
.modality-cards p{
font-size:14px;
}
.plan-caption{
font-size:12px;
}
.price-card li{
font-size:13.5px;
}
.vest-experience-title p{
font-size:14px;
}
.vest-slide-number,
.vest-slide-top{
font-size:9.5px;
}
.vest-slide h3{
font-size:23px;
}
.vest-slide p{
font-size:12.5px;
}
.footer-grid a,
.footer-grid span,
.footer-brand p{
font-size:13.5px;
}
.footer-grid h4{
font-size:11px;
}
.footer-bottom{
font-size:11.5px;
}
}