*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Nunito Sans',sans-serif;background:#fff;color:#1A2B22;overflow-x:hidden}
:root{
--green:#4CC68D; /* logo green */
--green-d:#2FA870; /* darker green */
--green-dd:#1B7A4E; /* deep green for text */
--green-light:#EBF8F2; /* very light green bg */
--green-mid:#D6F2E7; /* mid light */
--navy:#1E2D4A; /* logo navy (cronômetro) */
--ink:#1A2B22; /* near-black with green tint */
--ink-60:rgba(26,43,34,0.55);
--ink-20:rgba(26,43,34,0.1);
--ink-10:rgba(26,43,34,0.06);
--white:#ffffff;
--off-white:#F7FBF9;
--valid-color:#4CC68D;
--rota-color:#1E2D4A;
--border:#E4EEE9;
}
/* ── LOGO SVG ── */
.logo-svg{height:32px;width:auto;cursor:pointer}
.logo-svg-sm{height:26px;width:auto}
.logo-svg-white path.letter{fill:#ffffff}
.logo-svg-white circle,.logo-svg-white path.hand{fill:#ffffff;opacity:.85}
/* ── NAV ── */
nav{
position:fixed;top:0;left:0;right:0;z-index:200;
height:64px;padding:0 56px;
display:flex;align-items:center;justify-content:space-between;
background:rgba(255,255,255,0.97);
border-bottom:1px solid var(--border);
backdrop-filter:blur(12px);
}
.nav-center{display:flex;align-items:center;gap:4px}
.nav-link{
font-size:14px;font-weight:500;color:var(--ink-60);
background:none;border:none;cursor:pointer;padding:8px 14px;
font-family:'Nunito Sans',sans-serif;border-radius:8px;
transition:color .15s,background .15s;
}
.nav-link:hover{color:var(--ink);background:var(--green-light)}
.nav-link.active{color:var(--green-dd);font-weight:600}
.nav-pill{
display:flex;gap:2px;
background:var(--ink-10);border-radius:100px;padding:3px;
margin:0 8px;
}
.nav-pill-btn{
font-size:13px;font-weight:600;
padding:6px 18px;border-radius:100px;border:none;cursor:pointer;
background:transparent;color:var(--ink-60);
font-family:'Nunito Sans',sans-serif;
transition:all .2s;letter-spacing:0.01em;
}
.nav-pill-btn:hover{color:var(--ink)}
.nav-pill-btn.valid-active{background:var(--green);color:#fff;box-shadow:0 2px 8px rgba(76,198,141,.35)}
.nav-pill-btn.rota-active{background:var(--navy);color:#fff;box-shadow:0 2px 8px rgba(30,45,74,.3)}
.btn-nav-cta{
background:var(--green);color:#fff;
font-family:'Nunito Sans',sans-serif;font-weight:700;font-size:13px;
padding:10px 22px;border:none;cursor:pointer;border-radius:8px;
transition:background .15s,transform .15s;
white-space:nowrap;
}
.nav-logo{height:41px!important;width:auto;cursor:pointer}
.btn-nav-cta:hover{background:var(--green-d);transform:translateY(-1px)}
/* ── BUTTONS ── */
.btn-primary{
background:var(--green);color:#fff;
font-family:'Nunito Sans',sans-serif;font-weight:700;font-size:14px;
padding:13px 28px;border:none;cursor:pointer;border-radius:10px;
transition:background .15s,transform .15s,box-shadow .15s;
display:inline-flex;align-items:center;gap:8px;
}
.btn-primary:hover{background:var(--green-d);transform:translateY(-2px);box-shadow:0 8px 24px rgba(76,198,141,.3)}
.btn-navy{background:var(--navy);color:#fff}
.btn-navy:hover{background:#263a5e;box-shadow:0 8px 24px rgba(30,45,74,.25)}
.btn-outline{
background:transparent;color:var(--green-dd);
font-family:'Nunito Sans',sans-serif;font-weight:600;font-size:14px;
padding:12px 28px;border:1.5px solid var(--green);cursor:pointer;border-radius:10px;
transition:all .15s;display:inline-flex;align-items:center;gap:8px;
}
.btn-outline:hover{background:var(--green-light);transform:translateY(-2px)}
.btn-outline-navy{border-color:var(--navy);color:var(--navy)}
.btn-outline-navy:hover{background:#f0f3f8}
/* ── SECTION HELPERS ── */
.sec{padding:88px 56px}
.sec-label{
font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
color:var(--green-d);margin-bottom:14px;
display:flex;align-items:center;gap:8px;
}
.sec-label::before{content:'';width:20px;height:2px;background:var(--green);border-radius:2px}
.sec-label.navy-label{color:var(--navy)}
.sec-label.navy-label::before{background:var(--navy)}
h2.sec-title{
font-family:'Nunito',sans-serif;font-weight:800;
font-size:clamp(32px,4vw,52px);line-height:1.1;letter-spacing:-0.02em;
color:var(--ink);margin-bottom:16px;
}
h2.sec-title .hl{color:var(--green)}
h2.sec-title .hlb{color:var(--navy)}
.sec-sub{
font-size:16px;font-weight:300;color:var(--ink-60);
line-height:1.75;max-width:540px;
}
/* ════════════ HOME — HERO ════════════ */
.hero{
height:calc(100vh - 64px);padding-top:64px;max-height:760px;
display:grid;grid-template-columns:52% 48%;
}
.hero-l{
padding:40px 56px;
display:flex;flex-direction:column;justify-content:center;
border-right:1px solid var(--border);
}
.hero-eyebrow{
display:inline-flex;align-items:center;gap:8px;
background:var(--green-light);border:1px solid var(--green-mid);
padding:6px 14px;border-radius:100px;
font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
color:var(--green-dd);margin-bottom:18px;width:fit-content;
}
.hero-eyebrow .pulse{
width:7px;height:7px;border-radius:50%;background:var(--green);
animation:pulse 2s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.5)}}
.hero h1{
font-family:'Nunito',sans-serif;font-weight:800;
font-size:clamp(32px,4vw,54px);line-height:1.08;letter-spacing:-0.025em;
color:var(--ink);margin-bottom:16px;
}
.hero h1 .hl{color:var(--green)}
.hero-sub{
font-size:15px;font-weight:300;color:var(--ink-60);
line-height:1.65;max-width:440px;margin-bottom:24px;
}
.hero-btns{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:24px}
.hero-trust{
display:flex;gap:24px;flex-wrap:wrap;align-items:center;
padding-top:20px;border-top:1px solid var(--border);
}
.trust-item{
display:flex;align-items:center;gap:8px;
font-size:13px;color:var(--ink-60);font-weight:500;
}
.trust-item .tick{
width:20px;height:20px;border-radius:50%;
background:var(--green-light);display:flex;align-items:center;justify-content:center;
font-size:10px;color:var(--green-d);flex-shrink:0;
}
.hero-r{display:flex;flex-direction:column;background:var(--green-dd)}
.hero-product-card{
flex:1;padding:32px 36px;border-bottom:1px solid rgba(255,255,255,0.12);
display:flex;flex-direction:column;justify-content:center;
cursor:pointer;transition:background .2s;position:relative;overflow:hidden;
}
.hero-product-card::before{
content:'';position:absolute;left:0;top:0;bottom:0;width:4px;
}
.hero-product-card.valid-card::before{background:var(--green)}
.hero-product-card.rota-card::before{background:var(--navy)}
.hero-product-card:last-child{border-bottom:none}
.hero-product-card:hover{background:rgba(255,255,255,0.08)}
.card-product-tag{
font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
margin-bottom:12px;display:flex;align-items:center;gap:7px;
}
.tag-valid{color:var(--green)}
.tag-navy{color:#93c5fd}
.card-dot{width:8px;height:8px;border-radius:50%}
.dot-green{background:var(--green)}
.dot-navy{background:var(--navy)}
.hero-product-card h3{
font-family:'Nunito',sans-serif;font-weight:800;font-size:20px;
letter-spacing:-0.02em;color:#fff;margin-bottom:8px;line-height:1.2;
}
.hero-product-card p{font-size:13px;color:rgba(255,255,255,0.65);line-height:1.6;max-width:340px}
.card-arrow{
position:absolute;top:44px;right:40px;
font-size:18px;color:rgba(255,255,255,0.25);transition:all .2s;
}
.hero-product-card:hover .card-arrow{color:var(--green);transform:translate(3px,-3px)}
.rota-card:hover .card-arrow{color:#93c5fd}
/* STATS STRIP */
.stats-strip{
display:grid;grid-template-columns:repeat(4,1fr);
border-top:1px solid var(--border);
border-bottom:1px solid var(--border);
background:var(--green);
}
.stat-cell{
padding:28px 32px;border-right:1px solid rgba(255,255,255,0.2);
cursor:default;transition:background .2s;
}
.stat-cell:last-child{border-right:none}
.stat-cell:hover{background:var(--green-d)}
.stat-n{
font-family:'Nunito',sans-serif;font-weight:800;
font-size:40px;letter-spacing:-0.03em;color:#fff;line-height:1;
margin-bottom:6px;
}
.stat-l{font-size:12px;color:rgba(255,255,255,0.75);line-height:1.4}
/* SETOR TABS */
.setor-section{padding:88px 56px;border-bottom:1px solid var(--border);background:var(--green-light)}
.setor-tabs{
display:flex;gap:0;border:1.5px solid var(--border);
border-radius:12px;overflow:hidden;width:fit-content;margin-bottom:52px;
}
.setor-tab{
font-family:'Nunito Sans',sans-serif;font-size:13px;font-weight:600;
letter-spacing:.04em;padding:10px 26px;
background:transparent;color:var(--ink-60);
border:none;border-right:1.5px solid var(--border);cursor:pointer;
transition:all .15s;
}
.setor-tab:last-child{border-right:none}
.setor-tab.active{background:var(--green);color:#fff}
.setor-content{display:none}
.setor-content.active{display:block}
.setor-header-row{
display:grid;grid-template-columns:1fr 1fr;gap:56px;
align-items:start;margin-bottom:40px;
}
.setor-pains{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.pain-card{
background:var(--off-white);border:1px solid var(--border);
border-radius:14px;padding:28px;
transition:box-shadow .2s,transform .2s;cursor:default;
}
.pain-card:hover{box-shadow:0 8px 24px rgba(26,43,34,.07);transform:translateY(-3px)}
.pain-icon{
width:40px;height:40px;border-radius:10px;
background:#FEF2F2;border:1px solid #FDD;
display:flex;align-items:center;justify-content:center;
font-size:18px;margin-bottom:16px;
}
.pain-card h4{
font-family:'Nunito',sans-serif;font-weight:700;font-size:15px;
color:var(--ink);margin-bottom:8px;
}
.pain-card p{font-size:13px;color:var(--ink-60);line-height:1.6}
/* PRODUCTS SECTION */
.products-section{padding:88px 56px;background:var(--off-white);border-bottom:1px solid var(--border)}
.products-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:48px}
.prod-card{
background:#fff;border:1.5px solid var(--border);border-radius:20px;
padding:44px;transition:all .25s;cursor:pointer;position:relative;overflow:hidden;
}
.prod-card::after{
content:'';position:absolute;top:0;left:0;right:0;height:4px;
}
.valid-prod::after{background:var(--green)}
.rota-prod::after{background:var(--navy)}
.prod-card:hover{transform:translateY(-6px);box-shadow:0 20px 48px rgba(26,43,34,.1)}
.prod-label{
font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
margin-bottom:16px;display:flex;align-items:center;gap:7px;
}
.pl-green{color:var(--green-d)}
.pl-navy{color:var(--navy)}
.prod-card h3{
font-family:'Nunito',sans-serif;font-weight:800;font-size:44px;
letter-spacing:-0.02em;margin-bottom:12px;line-height:1;
}
.h3-green{color:var(--green)}
.h3-navy{color:var(--navy)}
.prod-desc{font-size:14px;color:var(--ink-60);line-height:1.7;margin-bottom:28px}
.prod-feats{display:flex;flex-direction:column;gap:9px;margin-bottom:32px}
.prod-feat{
font-size:13px;color:var(--ink-60);
display:flex;align-items:flex-start;gap:10px;
}
.feat-tick{
width:18px;height:18px;border-radius:50%;
display:flex;align-items:center;justify-content:center;
font-size:9px;flex-shrink:0;margin-top:1px;
}
.ft-green{background:var(--green-light);color:var(--green-d)}
.ft-navy{background:#eef0f7;color:var(--navy)}
.prod-cta{
font-family:'Nunito Sans',sans-serif;font-weight:700;font-size:13px;
padding:11px 22px;border:none;cursor:pointer;border-radius:8px;
display:inline-flex;align-items:center;gap:6px;transition:all .15s;
}
.cta-green{background:var(--green);color:#fff}
.cta-green:hover{background:var(--green-d)}
.cta-navy{background:var(--navy);color:#fff}
.cta-navy:hover{background:#263a5e}
/* RESULTS */
.results-section{padding:88px 56px;border-bottom:1px solid var(--border);background:var(--green-dd)}
.results-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px}
.res-card{
background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.12);
border-radius:20px;padding:40px 36px;
cursor:default;transition:all .2s;
}
.res-card:hover{transform:translateY(-4px);background:rgba(255,255,255,0.11)}
.res-num{
font-family:'Nunito',sans-serif;font-weight:800;
font-size:64px;letter-spacing:-0.04em;color:var(--green);
line-height:1;margin-bottom:6px;
}
.res-kicker{font-size:12px;font-weight:600;color:rgba(255,255,255,0.6);margin-bottom:20px;text-transform:uppercase;letter-spacing:.06em}
.res-quote{
font-size:13px;color:rgba(255,255,255,0.7);line-height:1.7;
font-style:italic;border-left:3px solid var(--green);padding-left:14px;
}
.res-source{
margin-top:16px;font-size:11px;color:rgba(255,255,255,0.35);
font-weight:600;letter-spacing:.04em;text-transform:uppercase;
}
/* CLIENTS */
.clients-section{padding:72px 56px;border-bottom:1px solid var(--border);background:var(--off-white)}
.clients-tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:36px}
.ctag{
background:#fff;border:1.5px solid var(--border);border-radius:100px;
padding:8px 20px;font-size:13px;font-weight:500;color:var(--ink-60);
display:flex;align-items:center;gap:7px;
}
.ctag::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--green);flex-shrink:0}
.clients-grid{
display:grid;grid-template-columns:repeat(4,1fr);
gap:1px;background:var(--border);margin-top:36px;border-radius:16px;overflow:hidden;
}
.cnum-cell{background:#fff;padding:28px 32px}
.cnum{
font-family:'Nunito',sans-serif;font-weight:800;font-size:44px;
color:var(--green);letter-spacing:-0.03em;line-height:1;
}
.cnum-l{font-size:12px;color:var(--ink-60);margin-top:6px;line-height:1.4}
/* CTA SECTION */
.cta-section{
padding:96px 56px;text-align:center;
background:var(--green);position:relative;overflow:hidden;
}
.cta-section::before{
content:'';position:absolute;inset:0;
background:radial-gradient(ellipse 70% 80% at 20% 50%,rgba(255,255,255,.1) 0%,transparent 60%),
radial-gradient(ellipse 50% 60% at 80% 50%,rgba(30,45,74,.15) 0%,transparent 60%);
}
.cta-section>*{position:relative;z-index:1}
.cta-section h2{
font-family:'Nunito',sans-serif;font-weight:800;
font-size:clamp(36px,5vw,64px);letter-spacing:-0.025em;line-height:1.1;
color:#fff;margin-bottom:18px;
}
.cta-section p{
font-size:17px;color:rgba(255,255,255,.8);line-height:1.7;
max-width:500px;margin:0 auto 40px;font-weight:300;
}
.cta-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.btn-white{
background:#fff;color:var(--green-d);
font-family:'Nunito Sans',sans-serif;font-weight:700;font-size:14px;
padding:14px 30px;border:none;cursor:pointer;border-radius:10px;
transition:all .15s;display:inline-flex;align-items:center;gap:8px;
}
.btn-white:hover{background:var(--green-light);transform:translateY(-2px)}
.btn-white-outline{
background:transparent;color:#fff;
font-family:'Nunito Sans',sans-serif;font-weight:600;font-size:14px;
padding:13px 30px;border:1.5px solid rgba(255,255,255,.5);cursor:pointer;border-radius:10px;
transition:all .15s;
}
.btn-white-outline:hover{border-color:#fff;background:rgba(255,255,255,.1)}
/* FOOTER */
footer{
padding:44px 56px;border-top:1px solid var(--border);
display:flex;align-items:center;justify-content:space-between;
flex-wrap:wrap;gap:20px;background:var(--green-dd);
}
.f-nav{display:flex;gap:4px;flex-wrap:wrap}
.f-nav button{
font-size:13px;color:rgba(255,255,255,0.6);background:none;border:none;cursor:pointer;
font-family:'Nunito Sans',sans-serif;font-weight:500;
padding:6px 12px;border-radius:6px;transition:all .15s;
}
.f-nav button:hover{color:#fff;background:rgba(255,255,255,0.1)}
.f-copy{font-size:12px;color:rgba(255,255,255,0.35)}
/* ── Redes sociais no rodapé ── */
.f-social{display:flex;align-items:center;gap:6px}
.f-social-link{
display:inline-flex;align-items:center;justify-content:center;
width:34px;height:34px;border-radius:8px;
color:rgba(255,255,255,0.6);text-decoration:none;transition:all .15s;
}
.f-social-link:hover{color:#fff;background:rgba(255,255,255,0.1)}
.f-social-link svg{width:18px;height:18px;fill:currentColor;display:block}
/* ════════════ PRODUCT PAGES ════════════ */
.prod-hero{
min-height:80vh;padding-top:64px;
display:grid;grid-template-columns:55% 45%;
border-bottom:1px solid var(--border);
}
.prod-hero-l{
padding:72px 56px;
display:flex;flex-direction:column;justify-content:center;
border-right:1px solid var(--border);
}
.prod-badge{
display:inline-flex;align-items:center;gap:8px;
padding:6px 14px;border-radius:100px;
font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
margin-bottom:24px;width:fit-content;
}
.badge-valid{background:var(--green-light);color:var(--green-dd);border:1px solid var(--green-mid)}
.badge-rota{background:#eef0f7;color:var(--navy);border:1px solid #c8d0e7}
.prod-h1{
font-family:'Nunito',sans-serif;font-weight:800;
font-size:clamp(56px,8vw,96px);line-height:.95;letter-spacing:-0.03em;
margin-bottom:6px;
}
.ph1-green{color:var(--green)}
.ph1-navy{color:var(--navy)}
.prod-h1-sub{
font-family:'Nunito',sans-serif;font-weight:700;
font-size:clamp(18px,2.5vw,28px);color:var(--ink);
letter-spacing:-0.01em;margin-bottom:22px;line-height:1.2;
}
.prod-hero-desc{
font-size:16px;font-weight:300;color:var(--ink-60);
line-height:1.75;margin-bottom:36px;max-width:440px;
}
.prod-hero-r{
background:var(--off-white);
display:flex;flex-direction:column;
}
.metric-card{
flex:1;padding:44px;border-bottom:1px solid var(--border);
display:flex;flex-direction:column;justify-content:center;
cursor:default;transition:background .2s;
}
.metric-card:last-child{border-bottom:none}
.metric-card:hover{background:var(--green-light)}
.metric-n{
font-family:'Nunito',sans-serif;font-weight:800;
font-size:56px;letter-spacing:-0.04em;line-height:1;margin-bottom:6px;
}
.mn-g{color:var(--green)}
.mn-n{color:var(--navy)}
.metric-l{font-size:13px;color:var(--ink-60);line-height:1.4}
/* HOW IT WORKS */
.how-section{padding:88px 56px;border-bottom:1px solid var(--border);background:var(--green-dd)}
.steps-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,0.1);margin-top:48px;border-radius:16px;overflow:hidden}
.step-cell{
background:rgba(255,255,255,0.07);padding:36px 28px;cursor:default;transition:background .2s;border:none;
}
.step-cell:hover{background:rgba(255,255,255,0.13)}
.step-num{
font-family:'Nunito',sans-serif;font-weight:800;font-size:14px;
width:32px;height:32px;border-radius:50%;
display:flex;align-items:center;justify-content:center;
margin-bottom:20px;color:#fff;
}
.sn-green{background:var(--green);color:#fff}
.sn-navy{background:var(--navy);color:#fff}
.step-cell h4{
font-family:'Nunito',sans-serif;font-weight:700;font-size:15px;
color:#fff;margin-bottom:8px;
}
.step-cell p{font-size:13px;color:rgba(255,255,255,0.65);line-height:1.65}
/* FEATURES GRID */
.features-section{padding:88px 56px;border-bottom:1px solid var(--border)}
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px}
.feat-card{
background:var(--off-white);border:1px solid var(--border);
border-radius:16px;padding:32px;transition:all .2s;cursor:default;
}
.feat-card:hover{box-shadow:0 8px 24px rgba(26,43,34,.07);transform:translateY(-3px);background:#fff}
.feat-icon{
width:44px;height:44px;border-radius:12px;
display:flex;align-items:center;justify-content:center;
font-size:20px;margin-bottom:18px;
}
.fi-g{background:var(--green-light);border:1px solid var(--green-mid)}
.fi-n{background:#eef0f7;border:1px solid #c8d0e7}
.feat-card h4{
font-family:'Nunito',sans-serif;font-weight:700;font-size:16px;
color:var(--ink);margin-bottom:8px;
}
.feat-card p{font-size:13px;color:var(--ink-60);line-height:1.65}
/* SETOR BENEFITS */
.setor-benefit{padding:88px 56px;border-bottom:1px solid var(--border);background:var(--green-light)}
.sb-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:48px}
.sb-col{background:#fff;border:1.5px solid var(--border);border-radius:20px;padding:36px}
.sb-col-title{
font-family:'Nunito',sans-serif;font-weight:800;font-size:18px;
color:var(--ink);margin-bottom:20px;
display:flex;align-items:center;gap:10px;
}
.sb-items{display:flex;flex-direction:column;gap:10px}
.sb-item{
background:var(--off-white);border:1px solid var(--border);
border-radius:10px;padding:14px 16px;
font-size:13px;color:var(--ink-60);line-height:1.6;
display:flex;gap:10px;align-items:flex-start;
}
.sb-item::before{
content:'✓';font-weight:700;font-size:11px;
flex-shrink:0;margin-top:2px;
}
.sb-green::before{color:var(--green)}
.sb-navy::before{color:var(--navy)}
/* GREEN CTA (product pages) */
.prod-cta-section{
padding:88px 56px;text-align:center;background:var(--green-light);
border-top:1px solid var(--green-mid);
}
.prod-cta-section h2{
font-family:'Nunito',sans-serif;font-weight:800;
font-size:clamp(32px,4vw,52px);letter-spacing:-0.025em;
color:var(--ink);margin-bottom:16px;line-height:1.1;
}
.prod-cta-section p{
font-size:16px;color:var(--ink-60);line-height:1.7;
max-width:460px;margin:0 auto 36px;
}
/* RESPONSIVE */
@media(max-width:960px){
nav{padding:0 20px}
.nav-center{display:none}
.sec,.setor-section,.products-section,.results-section,.clients-section,.cta-section{padding:64px 20px}
.hero{grid-template-columns:1fr}
.hero-l{padding:64px 20px;border-right:none}
.hero-r{display:none}
.stats-strip{grid-template-columns:1fr 1fr}
.stat-cell:nth-child(2){border-right:none}
.setor-header-row{grid-template-columns:1fr;gap:24px}
.setor-pains{grid-template-columns:1fr}
.products-grid{grid-template-columns:1fr}
.results-grid{grid-template-columns:1fr}
.clients-grid{grid-template-columns:1fr 1fr}
footer{padding:32px 20px;flex-direction:column;align-items:flex-start}
.prod-hero{grid-template-columns:1fr;padding-top:64px}
.prod-hero-l{padding:60px 20px;border-right:none}
.prod-hero-r{display:none}
.steps-grid{grid-template-columns:1fr 1fr}
.feat-grid{grid-template-columns:1fr}
.sb-grid{grid-template-columns:1fr}
.how-section,.features-section,.setor-benefit,.prod-cta-section{padding:64px 20px}
}
/* ── SMALL PHONES (iPhone X/11/12/13 mini, SE, etc.) ── */
@media(max-width:640px){
/* Hero can no longer be capped to a viewport height once the side card
is hidden — let it size to its content instead of clipping text. */
.hero{height:auto;max-height:none}
.hero-l{padding-top:88px;padding-bottom:32px}
/* Section paddings shrink further so text has room to wrap */
.sec,.setor-section,.products-section,.results-section,.clients-section,
.cta-section,.how-section,.features-section,.setor-benefit,.prod-cta-section{
padding:40px 16px
}
h2.sec-title{font-size:clamp(26px,7vw,34px)}
.hero h1{font-size:clamp(26px,7vw,36px)}
/* Any two/three/four/six-column inline grid collapses to a single
column — this covers the map stats, module cards, client logos and
other hand-styled sections that aren't driven by a CSS class. */
[style*="grid-template-columns:1fr 1fr"],
[style*="grid-template-columns:1fr 1.3fr"],
[style*="grid-template-columns:auto 1fr"],
[style*="grid-template-columns:repeat(3,1fr)"],
[style*="grid-template-columns:repeat(4,1fr)"]{
grid-template-columns:1fr!important;
}
[style*="grid-template-columns:repeat(6,1fr)"]{
grid-template-columns:repeat(2,1fr)!important;
}
/* Module-card thumbnails were pinned to 180px — on a 375px-wide phone
that alone eats half the screen. Let them run full width instead. */
[style*="width:180px"]{
width:100%!important;
padding:16px!important;
}
/* The map section had generous fixed padding meant for desktop */
#presenca-sec{padding:56px 16px!important}
.steps-grid{grid-template-columns:1fr!important}
.stats-strip{grid-template-columns:1fr 1fr!important}
.clients-grid{grid-template-columns:1fr!important}
}
@media(max-width:400px){
.stats-strip{grid-template-columns:1fr!important}
.stat-cell:nth-child(2){border-right:none!important}
[style*="grid-template-columns:repeat(6,1fr)"]{
grid-template-columns:1fr!important;
}
nav{padding:0 14px}
.nav-logo{height:28px!important}
.btn-nav-cta{font-size:12px;padding:8px 14px}
}
/* ════════════ LEGAL PAGE (Privacidade) ════════════ */
.legal-hero{
padding:140px 56px 56px;
background:var(--green-light);
border-bottom:1px solid var(--border);
}
.legal-hero-inner{max-width:760px;margin:0 auto}
.legal-badge{
display:inline-flex;align-items:center;gap:8px;
padding:6px 14px;border-radius:100px;
font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
margin-bottom:20px;width:fit-content;
background:#fff;color:var(--green-dd);border:1px solid var(--green-mid);
}
.legal-badge::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--green)}
.legal-hero h1{
font-size:clamp(30px,4vw,44px);font-weight:800;line-height:1.15;
color:var(--ink);margin-bottom:16px;
}
.legal-hero-sub{font-size:15px;color:var(--ink-60);line-height:1.7}
.legal-content{padding:56px 56px 88px;background:var(--off-white)}
.legal-content-inner{max-width:760px;margin:0 auto}
.legal-intro{
font-size:15px;line-height:1.8;color:var(--ink-60);
padding-bottom:40px;margin-bottom:8px;border-bottom:1px solid var(--border);
}
.legal-intro strong{color:var(--ink);font-weight:700}
.legal-article{padding:32px 0;border-bottom:1px solid var(--border)}
.legal-article:last-child{border-bottom:none}
.legal-article h3{
font-size:13px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
color:var(--green-dd);margin-bottom:16px;
}
.legal-article p{font-size:15px;line-height:1.8;color:var(--ink-60);margin-bottom:14px}
.legal-article p:last-child{margin-bottom:0}
.legal-article a{color:var(--green-dd);font-weight:600;text-decoration:underline}
.legal-bullets{list-style:none;margin:0;padding:0}
.legal-bullets li{
position:relative;padding-left:22px;margin-bottom:14px;
font-size:15px;line-height:1.8;color:var(--ink-60);
}
.legal-bullets li:last-child{margin-bottom:0}
.legal-bullets li::before{
content:'';position:absolute;left:0;top:9px;
width:7px;height:7px;border-radius:50%;background:var(--green);
}
.legal-contact-box{
margin-top:16px;padding:20px 24px;border-radius:12px;
background:var(--green-light);border:1px solid var(--green-mid);
}
.legal-contact-box a{color:var(--green-dd);font-weight:700}
@media(max-width:960px){
.legal-hero{padding:120px 20px 40px}
.legal-content{padding:40px 20px 64px}
}
/* Anchor versions of nav items must look identical to the old buttons */
.nav-link, .nav-pill-btn{display:inline-block;text-decoration:none;text-align:center}
/* ══════════════════════════════════════════════════════════════════════
MENU MOBILE (gaveta) — a marcação é criada por assets/js/main.js
══════════════════════════════════════════════════════════════════════ */
.nav-burger{
display:none;
width:40px;height:40px;flex:0 0 auto;margin-left:8px;
background:none;border:none;cursor:pointer;padding:9px 8px;
flex-direction:column;justify-content:space-between;
}
.nav-burger span{
display:block;height:2px;width:100%;background:var(--ink);
border-radius:2px;transition:transform .25s,opacity .2s;
}
.nav-burger.on span:nth-child(1){transform:translateY(9px) rotate(45deg)}
.nav-burger.on span:nth-child(2){opacity:0}
.nav-burger.on span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}
.nav-backdrop{
position:fixed;inset:0;z-index:210;
background:rgba(26,43,34,0.4);
opacity:0;transition:opacity .25s;
}
.nav-backdrop.on{opacity:1}
.nav-drawer{
position:fixed;top:0;right:0;bottom:0;z-index:220;
width:min(320px,84vw);
background:#fff;border-left:1px solid var(--border);
box-shadow:-12px 0 32px rgba(26,43,34,0.12);
padding:84px 20px 28px;
display:flex;flex-direction:column;gap:4px;
transform:translateX(100%);transition:transform .26s ease;
overflow-y:auto;
}
.nav-drawer.on{transform:translateX(0)}
.nav-drawer-links{display:flex;flex-direction:column;gap:2px}
.nav-drawer-link{
font-family:'Nunito Sans',sans-serif;
font-size:16px;font-weight:600;color:var(--ink);
text-decoration:none;padding:14px 12px;border-radius:10px;
transition:background .15s,color .15s;
}
.nav-drawer-link:hover{background:var(--green-light)}
.nav-drawer-link.active{color:var(--green-dd);background:var(--green-light)}
.nav-drawer-cta{
margin-top:20px;
font-family:'Nunito Sans',sans-serif;font-weight:700;font-size:15px;
background:var(--green);color:#fff;border:none;border-radius:100px;
padding:14px 20px;cursor:pointer;transition:background .15s;
}
.nav-drawer-cta:hover{background:var(--green-d)}
@media(max-width:960px){
.nav-burger{display:flex}
/* o CTA do topo passa a viver dentro da gaveta, liberando espaço na barra */
nav > .btn-nav-cta{display:none}
}
/* ══════════════════════════════════════════════════════════════════════
TELAS GRANDES (monitores widescreen, TVs, projetores)
Dois problemas aparecem aí: o conteúdo se espalha de ponta a ponta,
criando linhas longas demais para ler, e os tamanhos em px — pensados
para um notebook — ficam minúsculos vistos de longe.
A correção tem duas partes: um limite de largura para o conteúdo
(centralizado via padding, sem mexer no HTML) e um degrau de tamanhos
de fonte para cada faixa de tela. Abaixo de 1441px nada muda.
══════════════════════════════════════════════════════════════════════ */
@media(min-width:1441px){
:root{--maxw:1400px}
nav{padding-left:max(56px,calc((100vw - var(--maxw)) / 2));padding-right:max(56px,calc((100vw - var(--maxw)) / 2))}
footer{padding-left:max(56px,calc((100vw - var(--maxw)) / 2));padding-right:max(56px,calc((100vw - var(--maxw)) / 2))}
.sec{padding-left:max(56px,calc((100vw - var(--maxw)) / 2));padding-right:max(56px,calc((100vw - var(--maxw)) / 2))}
.hero-l{padding-left:max(56px,calc((100vw - var(--maxw)) / 2));padding-right:max(56px,calc((100vw - var(--maxw)) / 2))}
.setor-section{padding-left:max(56px,calc((100vw - var(--maxw)) / 2));padding-right:max(56px,calc((100vw - var(--maxw)) / 2))}
.products-section{padding-left:max(56px,calc((100vw - var(--maxw)) / 2));padding-right:max(56px,calc((100vw - var(--maxw)) / 2))}
.results-section{padding-left:max(56px,calc((100vw - var(--maxw)) / 2));padding-right:max(56px,calc((100vw - var(--maxw)) / 2))}
.clients-section{padding-left:max(56px,calc((100vw - var(--maxw)) / 2));padding-right:max(56px,calc((100vw - var(--maxw)) / 2))}
.cta-section{padding-left:max(56px,calc((100vw - var(--maxw)) / 2));padding-right:max(56px,calc((100vw - var(--maxw)) / 2))}
.how-section{padding-left:max(56px,calc((100vw - var(--maxw)) / 2));padding-right:max(56px,calc((100vw - var(--maxw)) / 2))}
.features-section{padding-left:max(56px,calc((100vw - var(--maxw)) / 2));padding-right:max(56px,calc((100vw - var(--maxw)) / 2))}
.setor-benefit{padding-left:max(56px,calc((100vw - var(--maxw)) / 2));padding-right:max(56px,calc((100vw - var(--maxw)) / 2))}
.prod-hero-l{padding-left:max(56px,calc((100vw - var(--maxw)) / 2));padding-right:max(56px,calc((100vw - var(--maxw)) / 2))}
.prod-cta{padding-left:max(56px,calc((100vw - var(--maxw)) / 2));padding-right:max(56px,calc((100vw - var(--maxw)) / 2))}
.legal-hero{padding-left:max(56px,calc((100vw - var(--maxw)) / 2));padding-right:max(56px,calc((100vw - var(--maxw)) / 2))}
.legal-content{padding-left:max(56px,calc((100vw - var(--maxw)) / 2));padding-right:max(56px,calc((100vw - var(--maxw)) / 2))}
.stats-strip{padding-left:max(56px,calc((100vw - var(--maxw)) / 2));padding-right:max(56px,calc((100vw - var(--maxw)) / 2))}
}
/* Monitores grandes e TVs Full HD */
@media(min-width:1800px){
:root{--maxw:1580px}
.feat-tick{font-size:10px}
.trust-item .tick{font-size:12px}
.card-product-tag,.hero-eyebrow,.legal-badge,.prod-badge,.prod-label,.res-source,.sb-item::before,.sec-label{font-size:13px}
.cnum-l,.f-copy,.res-kicker,.stat-l{font-size:14px}
.btn-nav-cta,.ctag,.f-nav button,.feat-card p,.hero-product-card p,.legal-article h3,.metric-l,.nav-pill-btn,.pain-card p,.prod-cta,.prod-feat,.res-quote,.sb-item,.setor-tab,.step-cell p,.trust-item{font-size:15px}
.btn-outline,.btn-primary,.btn-white,.btn-white-outline,.nav-link,.prod-desc,.step-num{font-size:16px}
.hero-sub,.legal-article p,.legal-bullets li,.legal-hero-sub,.legal-intro,.pain-card h4,.step-cell h4{font-size:17px}
.feat-card h4,.prod-cta-section p,.prod-hero-desc,.sec-sub{font-size:18px}
.cta-section p{font-size:20px}
.card-arrow,.pain-icon,.sb-col-title{font-size:21px}
.feat-icon,.hero-product-card h3{font-size:23px}
.stat-n{font-size:46px}
.cnum,.prod-card h3{font-size:51px}
.metric-n{font-size:64px}
.res-num{font-size:74px}
h2.sec-title{font-size:clamp(32px,4vw,60px)}
.hero h1{font-size:clamp(32px,4vw,62px)}
.cta-section h2{font-size:clamp(36px,5vw,74px)}
.prod-h1{font-size:clamp(56px,8vw,110px)}
.prod-h1-sub{font-size:clamp(18px,2.5vw,32px)}
.prod-cta-section h2{font-size:clamp(32px,4vw,60px)}
.legal-hero h1{font-size:clamp(30px,4vw,51px)}
}
/* TVs e projetores 4K */
@media(min-width:2400px){
:root{--maxw:2000px}
.feat-tick{font-size:13px}
.trust-item .tick{font-size:14px}
.card-product-tag,.hero-eyebrow,.legal-badge,.prod-badge,.prod-label,.res-source,.sb-item::before,.sec-label{font-size:16px}
.cnum-l,.f-copy,.res-kicker,.stat-l{font-size:17px}
.btn-nav-cta,.ctag,.f-nav button,.feat-card p,.hero-product-card p,.legal-article h3,.metric-l,.nav-pill-btn,.pain-card p,.prod-cta,.prod-feat,.res-quote,.sb-item,.setor-tab,.step-cell p,.trust-item{font-size:18px}
.btn-outline,.btn-primary,.btn-white,.btn-white-outline,.nav-link,.prod-desc,.step-num{font-size:20px}
.hero-sub,.legal-article p,.legal-bullets li,.legal-hero-sub,.legal-intro,.pain-card h4,.step-cell h4{font-size:21px}
.feat-card h4,.prod-cta-section p,.prod-hero-desc,.sec-sub{font-size:23px}
.cta-section p{font-size:24px}
.card-arrow,.pain-icon,.sb-col-title{font-size:26px}
.feat-icon,.hero-product-card h3{font-size:28px}
.stat-n{font-size:57px}
.cnum,.prod-card h3{font-size:62px}
.metric-n{font-size:80px}
.res-num{font-size:91px}
h2.sec-title{font-size:clamp(32px,4vw,74px)}
.hero h1{font-size:clamp(32px,4vw,77px)}
.cta-section h2{font-size:clamp(36px,5vw,91px)}
.prod-h1{font-size:clamp(56px,8vw,136px)}
.prod-h1-sub{font-size:clamp(18px,2.5vw,40px)}
.prod-cta-section h2{font-size:clamp(32px,4vw,74px)}
.legal-hero h1{font-size:clamp(30px,4vw,62px)}
.sec,.setor-section,.products-section,.results-section,.how-section,
.features-section,.setor-benefit{padding-top:124px;padding-bottom:124px}
nav{height:88px}
.nav-logo{height:56px!important}
}