/* ============================================================ N1 Sistemas — Escala progressiva para desktops grandes ------------------------------------------------------------ Objetivo: aproveitar melhor telas 1440px → 2048px+ sem tocar em notebooks/tablets/celulares. Todas as regras ficam dentro de @media (min-width), então abaixo de 1440px nada muda. Reutiliza as classes já existentes em todas as páginas (.container, .section, .hero, .section-head, .kpi, .card...). Carregado por último no para sobrepor o --maxw inline. ============================================================ */ /* ---------- Desktop grande: 1440px → 1919px ---------- */ @media (min-width: 1440px) { :root { --maxw: 1400px; } /* Container cresce com respiro lateral proporcional */ .container { padding-left: clamp(28px, 3vw, 60px); padding-right: clamp(28px, 3vw, 60px); } /* Header com mais presença */ .site-header .header-inner { padding: 16px 0; } .logo img { height: 60px; } .site-header.shrink .logo img { height: 48px; } .main-nav ul { gap: 34px; } .main-nav a { font-size: 16.5px; } .header-cta { gap: 16px; } .header-cta .btn { font-size: 15.5px; padding: 13px 28px; } /* Ritmo vertical mais arejado */ .section { padding: clamp(92px, 6vw, 130px) 0; } .section-head { max-width: 940px; margin-bottom: clamp(54px, 4vw, 72px); } .section-head h2 { font-size: clamp(34px, 2.9vw, 50px); } .section-head p { font-size: clamp(17px, 1.15vw, 20px); } /* HERO — escala e equilíbrio */ .hero { padding: clamp(70px, 5vw, 108px) 0 clamp(78px, 5vw, 112px); } .hero-grid { gap: clamp(64px, 5.5vw, 112px); } .hero h1 { font-size: clamp(46px, 3.4vw, 60px); } .hero p.lead { font-size: clamp(18px, 1.2vw, 21px); max-width: 580px; } .hero .btn, .hero .btn-primary { font-size: 17px; padding: 18px 38px; } .hero .link-cta { font-size: 16.5px; } .hero-proof { font-size: 15px; } .hero-badges { font-size: 15px; } .hero-video { max-width: clamp(520px, 40vw, 660px); } /* Mock do dashboard no hero das landings */ .dash { padding: 24px; } .dash-card .v { font-size: 26px; } .dash-card small { font-size: 12px; } .dash-bars { height: 118px; } /* Indicadores (faixa institucional da home) */ .trust-inner { padding: clamp(40px, 3vw, 58px) 0; gap: 30px; } .trust-item .n { font-size: clamp(32px, 2.6vw, 46px); } .trust-item .l { font-size: 15.5px; margin-top: 9px; } .trust-item.abese img { height: 64px; } /* Escolha seu segmento */ .seg-grid { gap: clamp(26px, 2vw, 40px); } .seg-media { height: 180px; } .seg-media svg { width: 76px; height: 76px; } .seg-body { padding: 30px 28px 32px; } .seg-body h3 { font-size: 22px; } .seg-body p { font-size: 15.5px; } .seg-body .seg-link { font-size: 15.5px; } /* Funcionalidades e cards genéricos */ .feat-grid { gap: 18px; } .feat b { font-size: 15.5px; } .grid { gap: clamp(26px, 2vw, 38px); } .card { padding: 34px 30px; } .card h3 { font-size: 21px; } .card p { font-size: 16px; } .icon-box { width: 64px; height: 64px; } .icon-box svg { width: 33px; height: 33px; } /* Integrações */ .integ-group { max-width: 1200px; } .integ-logos { gap: 22px; } .integ-logo { height: 120px; } /* Cases / depoimentos / blog */ .cases { max-width: 1180px; } .quote-grid, .blog-grid { gap: clamp(26px, 2vw, 38px); } /* Timeline da operação */ .timeline { max-width: 1180px; gap: 26px; } /* KPIs / Power BI */ .kpi { padding: 30px; } .kpi .v { font-size: clamp(34px, 2.6vw, 48px); } .kpi .l { font-size: 15px; } /* FAQ e formulário com mais largura confortável */ .faq { max-width: 920px; } .faq-q { font-size: 17.5px; padding: 22px 28px; } .contact-card { max-width: 760px; } /* Botões gerais um pouco maiores */ .btn { font-size: 16.5px; } /* CTA final */ .cta-strong h2 { font-size: clamp(34px, 3vw, 48px); } .cta-strong p { font-size: clamp(18px, 1.2vw, 21px); } /* ---------- Componentes específicos das LANDINGS ---------- */ /* Dor / Solução: chips de feature */ .feature li { font-size: 14px; padding: 6px 15px; } /* Spotlight (destaque com mock ao lado) */ .spotlight { gap: clamp(56px, 5vw, 96px); } .sp-text h2 { font-size: clamp(30px, 2.6vw, 44px); } .sp-list b { font-size: 17px; } .sp-list span { font-size: 15.5px; } .sp-list .ck { width: 36px; height: 36px; } /* Vídeo institucional embutido (landings + institucional) */ .video-wrap { max-width: 1040px; } /* Tabela comparativa (especialista x genérico) */ .compare { max-width: 1120px; } .compare th, .compare td { font-size: 16.5px; padding: 20px 22px; } .compare thead th { font-size: 16.5px; } /* Processo / passos */ .steps { max-width: 900px; } .step-num { width: 64px; height: 64px; font-size: 26px; } .step-body h3 { font-size: 21px; } .step-body p { font-size: 16px; } .step-body .tags span { font-size: 14px; } /* Resultados (cards em gradiente) */ .result-card { padding: 40px 34px; } .result-card h3 { font-size: 22px; } .result-card p { font-size: 16px; } /* Antes x Depois */ .ba-grid { max-width: 1080px; } .ba-col { padding: 40px 36px; } .ba-col li { font-size: 17px; } .ba-col .tag { font-size: 14px; } /* ---------- Página INSTITUCIONAL ---------- */ .about-grid { gap: clamp(56px, 5vw, 96px); } .about-text h2 { font-size: clamp(30px, 2.6vw, 44px); } .about-text p { font-size: 16.5px; } .about-text p.first { font-size: 18px; } .about-media .exp-badge b { font-size: 38px; } .bi-list b { font-size: 17px; } .bi-list span { font-size: 15.5px; } } /* ---------- Desktop extra grande: 1920px+ ---------- */ @media (min-width: 1920px) { :root { --maxw: 1600px; } .logo img { height: 64px; } .main-nav a { font-size: 17px; } .hero h1 { font-size: clamp(52px, 3.1vw, 66px); } .hero p.lead { font-size: clamp(19px, 1.15vw, 22px); } .hero-video { max-width: clamp(600px, 38vw, 720px); } .section-head h2 { font-size: clamp(40px, 2.7vw, 56px); } .section-head p { font-size: clamp(18px, 1.05vw, 21px); } .trust-item .n { font-size: clamp(38px, 2.5vw, 52px); } .seg-media { height: 200px; } .kpi .v { font-size: clamp(40px, 2.5vw, 52px); } } /* Acima de ~2100px o container já está no teto (1600px): as laterais crescem, mas o conteúdo não estica além do elegante. */