/* ============================================================
   KPL Serviços ITO — Identidade visual
   Tema HubSpot CMS · folha de estilo principal
   ============================================================ */

:root{
  --kpl-navy:#0A2540;
  --kpl-navy-deep:#07182b;
  --kpl-navy-soft:#103a64;
  --kpl-blue:#007BFF;
  --kpl-blue-light:#2E9BFF;
  --kpl-blue-deep:#0F4C81;
  --kpl-grey:#5C6B7A;
  --kpl-ink:#2A2E33;
  --kpl-ink-soft:#3D4A57;
  --kpl-mist:#9FB3C8;
  --kpl-pale:#cfe0f2;
  --kpl-bg:#F4F6F9;
  --kpl-line:#E3EAF2;
  --font-display:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-body:'IBM Plex Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body.kpl-body{
  margin:0;
  background:#fff;
  font-family:var(--font-body);
  color:var(--kpl-ink);
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;}
a{color:var(--kpl-blue);text-decoration:none;}
a:hover{color:var(--kpl-blue-light);}
h1,h2,h3{margin:0;}

.kpl-wrap{max-width:1200px;margin:0 auto;padding:0 32px;}
.kpl-eyebrow{
  font-family:var(--font-mono);font-size:13px;letter-spacing:5px;
  text-transform:uppercase;color:var(--kpl-blue);
}
.kpl-eyebrow--light{color:var(--kpl-blue-light);}
.kpl-h1{
  font-family:var(--font-display);font-weight:800;font-size:56px;line-height:1.08;
  color:#fff;margin:20px 0 0;letter-spacing:-1px;text-wrap:pretty;
}
.kpl-h2{
  font-family:var(--font-display);font-weight:800;font-size:42px;
  color:var(--kpl-navy);margin:16px 0 0;letter-spacing:-.5px;text-wrap:pretty;
}
.kpl-h2--light{color:#fff;}
.kpl-lead{font-size:19px;line-height:1.65;color:var(--kpl-grey);max-width:720px;margin:16px 0 56px;}
.kpl-lead--light{color:var(--kpl-mist);}
.kpl-slogan{
  font-family:var(--font-display);font-weight:600;font-style:italic;
  color:var(--kpl-blue-light);letter-spacing:.3px;
}

/* ---------- botões ---------- */
.kpl-btn{
  display:inline-block;font-family:var(--font-display);font-weight:700;
  border-radius:100px;transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.kpl-btn--primary{background:var(--kpl-blue);color:#fff;font-size:17px;padding:19px 34px;}
.kpl-btn--primary:hover{background:var(--kpl-blue-light);color:#fff;}
.kpl-btn--ghost{
  border:1px solid rgba(46,155,255,.5);color:var(--kpl-pale);
  font-weight:600;font-size:17px;padding:19px 34px;
}
.kpl-btn--ghost:hover{border-color:var(--kpl-blue-light);color:#fff;}
.kpl-btn--light{background:#fff;color:var(--kpl-navy);font-size:19px;padding:22px 44px;}
.kpl-btn--light:hover{background:var(--kpl-navy);color:#fff;}
.kpl-btn--head{
  background:var(--kpl-blue);color:#fff;font-weight:600;font-size:14px;
  padding:13px 22px;white-space:nowrap;
}
.kpl-btn--head:hover{background:var(--kpl-blue-light);color:#fff;}

/* ---------- header ---------- */
.kpl-header{
  position:sticky;top:0;z-index:50;
  background:rgba(10,37,64,.96);backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(46,155,255,.22);
}
.kpl-header__bar{display:flex;align-items:center;justify-content:space-between;gap:24px;height:80px;}
.kpl-brand{display:flex;align-items:center;}
.kpl-brand svg{width:170px;height:auto;}
.kpl-nav{display:flex;gap:30px;}
.kpl-nav a{color:var(--kpl-pale);font-size:15px;}
.kpl-nav a:hover{color:#fff;}
.kpl-header__actions{display:flex;align-items:center;gap:12px;}
.kpl-burger{
  display:none;flex-direction:column;justify-content:center;gap:5px;
  width:44px;height:44px;padding:0 11px;background:transparent;
  border:1px solid rgba(46,155,255,.45);border-radius:8px;cursor:pointer;
}
.kpl-burger span{display:block;height:2px;background:var(--kpl-pale);border-radius:2px;}
.kpl-mobilenav{display:none;border-top:1px solid rgba(46,155,255,.22);background:var(--kpl-navy);}
.kpl-mobilenav.is-open{display:block;}
.kpl-mobilenav__inner{display:flex;flex-direction:column;gap:2px;padding:8px 0 16px;}
.kpl-mobilenav a{
  color:var(--kpl-pale);font-size:16px;padding:14px 0;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.kpl-mobilenav a:last-child{border-bottom:none;}
.kpl-mobilenav .kpl-btn{margin-top:14px;text-align:center;font-size:15px;padding:15px 22px;}

/* ---------- hero ---------- */
.kpl-hero{
  background:radial-gradient(circle at 72% 28%,var(--kpl-navy-soft),var(--kpl-navy) 58%,var(--kpl-navy-deep));
  position:relative;overflow:hidden;
}
.kpl-dots{
  position:absolute;inset:0;
  background-image:radial-gradient(rgba(46,155,255,.13) 1.4px,transparent 1.4px);
  background-size:38px 38px;pointer-events:none;
}
.kpl-hero__grid{
  position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:60px;
  align-items:center;padding:96px 32px;
}
.kpl-hero__text p{font-size:20px;line-height:1.65;color:var(--kpl-mist);margin:24px 0 0;max-width:560px;}
.kpl-hero__actions{display:flex;gap:16px;flex-wrap:wrap;margin-top:38px;}
.kpl-hero__slogan{font-size:18px;margin-top:44px;}
.kpl-hero__media{
  border-radius:6px;overflow:hidden;
  box-shadow:0 30px 70px rgba(0,0,0,.45);border:1px solid rgba(46,155,255,.2);
}
.kpl-hero__media img{width:100%;height:520px;object-fit:cover;}

/* ---------- trustbar ---------- */
.kpl-trust{background:var(--kpl-blue-deep);}
.kpl-trust__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding:36px 32px;}
.kpl-trust h3{font-family:var(--font-display);font-weight:700;font-size:16px;color:#fff;}
.kpl-trust p{font-size:14px;color:#bcd6ef;margin:5px 0 0;line-height:1.5;}

/* ---------- serviços ---------- */
.kpl-section{padding:104px 0;}
.kpl-section--light{background:#fff;}
.kpl-section--mist{background:var(--kpl-bg);}
.kpl-section--navy{background:var(--kpl-navy);}
.kpl-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:28px;}
.kpl-card{border:1px solid var(--kpl-line);border-radius:6px;overflow:hidden;transition:border-color .2s ease;}
.kpl-card:hover{border-color:var(--kpl-blue);}
.kpl-card img{width:100%;height:230px;object-fit:cover;}
.kpl-card__body{padding:34px 34px 38px;}
.kpl-card__tag{font-family:var(--font-mono);font-size:12px;letter-spacing:4px;text-transform:uppercase;color:var(--kpl-blue);}
.kpl-card h3{font-family:var(--font-display);font-weight:700;font-size:26px;color:var(--kpl-navy);margin:12px 0 16px;}
.kpl-card ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;font-size:16px;line-height:1.5;color:var(--kpl-ink-soft);}
.kpl-card--electric{background:var(--kpl-navy);}
.kpl-card--electric .kpl-card__tag{color:var(--kpl-blue-light);}
.kpl-card--electric h3{color:#fff;}
.kpl-card--electric ul{color:var(--kpl-pale);}
.kpl-card__icon{
  height:230px;background:radial-gradient(circle at 60% 35%,var(--kpl-navy-soft),var(--kpl-navy) 65%);
  display:flex;align-items:center;justify-content:center;position:relative;
}
.kpl-card__icon svg{position:relative;}

/* ---------- processo ---------- */
.kpl-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;}
.kpl-step{background:#fff;border-top:4px solid var(--kpl-blue);padding:30px 26px;}
.kpl-step__num{font-family:var(--font-display);font-weight:800;font-size:34px;color:var(--kpl-line);}
.kpl-step h3{font-family:var(--font-display);font-weight:700;font-size:18px;color:var(--kpl-navy);margin:8px 0;}
.kpl-step p{font-size:15px;line-height:1.55;color:var(--kpl-grey);margin:0;}

/* ---------- projetos ---------- */
.kpl-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.kpl-shot{position:relative;overflow:hidden;border-radius:4px;}
.kpl-shot img{width:100%;height:280px;object-fit:cover;transition:transform .4s ease;}
.kpl-shot:hover img{transform:scale(1.04);}
.kpl-shot__cap{
  position:absolute;left:0;right:0;bottom:0;padding:20px;
  background:linear-gradient(to top,rgba(7,24,43,.94),transparent);
}
.kpl-shot__tag{font-family:var(--font-mono);font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--kpl-blue-light);}
.kpl-shot__name{font-family:var(--font-display);font-weight:700;font-size:17px;color:#fff;margin-top:4px;}

/* ---------- sobre ---------- */
.kpl-about{display:grid;grid-template-columns:repeat(2,1fr);gap:64px;align-items:center;}
.kpl-about p{font-size:18px;line-height:1.7;color:var(--kpl-ink-soft);}
.kpl-quote{
  border-left:3px solid var(--kpl-blue);padding-left:22px;margin-top:32px;
  font-family:var(--font-display);font-weight:600;font-style:italic;
  font-size:22px;color:var(--kpl-blue-deep);
}
.kpl-stats{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.kpl-stat{background:var(--kpl-bg);padding:32px 26px;}
.kpl-stat__n{font-family:var(--font-display);font-weight:800;font-size:36px;color:var(--kpl-blue);}
.kpl-stat p{font-size:15px;color:var(--kpl-grey);margin:6px 0 0;line-height:1.5;}

/* ---------- CTA ---------- */
.kpl-cta{background:var(--kpl-blue);padding:88px 0;text-align:center;}
.kpl-cta .kpl-h2{color:#fff;margin:0;}
.kpl-cta p{font-size:20px;color:rgba(255,255,255,.9);margin:18px auto 36px;max-width:660px;line-height:1.6;}

/* ---------- rodapé ---------- */
.kpl-footer{background:var(--kpl-navy-deep);padding:72px 0 0;}
.kpl-footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:48px;padding-bottom:56px;}
.kpl-footer svg{width:190px;max-width:100%;height:auto;}
.kpl-footer__slogan{font-size:16px;margin-top:18px;}
.kpl-footer__legal{font-family:var(--font-mono);font-size:13px;color:#7d93a9;margin-top:16px;line-height:1.7;}
.kpl-footer h3{font-family:var(--font-display);font-weight:700;font-size:15px;color:#fff;margin-bottom:16px;}
.kpl-footer__list{display:flex;flex-direction:column;gap:11px;font-size:15px;color:var(--kpl-mist);}
.kpl-footer__list a{color:var(--kpl-mist);}
.kpl-footer__list a:hover{color:var(--kpl-blue-light);}
.kpl-footer__bar{border-top:1px solid rgba(255,255,255,.08);}
.kpl-footer__bar .kpl-wrap{
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;
  padding:24px 32px;font-size:13px;color:#5f7488;
}

/* ---------- WhatsApp flutuante ---------- */
.kpl-wa{
  position:fixed;right:26px;bottom:26px;z-index:80;
  width:60px;height:60px;border-radius:50%;background:var(--kpl-blue);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 26px rgba(0,40,90,.45);transition:background .18s ease;
}
.kpl-wa:hover{background:var(--kpl-blue-light);}

/* ---------- formulário de orçamento ---------- */
.kpl-formcard{background:#fff;border:1px solid var(--kpl-line);border-radius:6px;padding:40px;}
.kpl-formcard h3{font-family:var(--font-display);font-weight:700;font-size:24px;color:var(--kpl-navy);margin-bottom:8px;}
.kpl-formcard form p{margin:0 0 18px;}
.kpl-formcard label{
  display:block;margin-bottom:6px;
  font-family:var(--font-body);font-size:14px;font-weight:600;color:var(--kpl-navy);
}
.kpl-formcard input,
.kpl-formcard select,
.kpl-formcard textarea{
  width:100%;padding:13px 14px;border:1px solid var(--kpl-line);border-radius:4px;
  font-family:var(--font-body);font-size:15px;color:var(--kpl-ink);background:#fff;
  box-sizing:border-box;
}
.kpl-formcard textarea{resize:vertical;}
.kpl-formcard input:focus,
.kpl-formcard select:focus,
.kpl-formcard textarea:focus{outline:none;border-color:var(--kpl-blue);}
.kpl-formcard button[type="submit"]{width:100%;}

/* ---------- responsivo ---------- */
@media(max-width:900px){
  .kpl-wrap,.kpl-hero__grid,.kpl-trust__grid,.kpl-footer__bar .kpl-wrap{padding-left:20px;padding-right:20px;}
  .kpl-section{padding:72px 0;}
  .kpl-nav{display:none;}
  .kpl-burger{display:flex;}
  .kpl-brand svg{width:132px;}
  .kpl-btn--head{font-size:13px;padding:11px 16px;}
  .kpl-hero__grid{grid-template-columns:1fr;gap:40px;padding-top:64px;padding-bottom:64px;}
  .kpl-hero__media img{height:300px;}
  .kpl-h1{font-size:36px;}
  .kpl-h2{font-size:28px;}
  .kpl-trust__grid,.kpl-cards,.kpl-gallery,.kpl-about,.kpl-stats,.kpl-footer__grid{grid-template-columns:1fr;}
  .kpl-about{gap:40px;}
  .kpl-footer__grid{gap:36px;}
  .kpl-formcard{padding:28px;}
}
@media(max-width:420px){
  .kpl-btn--head{display:none;}
}