@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&family=Inter:wght@400;500;600&display=swap');

:root{
  --azul:#0a3a7a; --azul-esc:#062a5e; --azul-claro:#1e7fd6; --ciano:#23b5d3;
  --cinza:#f5f8fc; --cinza2:#eef3f9; --texto:#1f2937; --suave:#5b6573; --borda:#e3e9f2;
  --sombra:0 10px 30px rgba(10,58,122,.08);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Inter',Arial,sans-serif;color:var(--texto);line-height:1.7;background:var(--cinza)}
h1,h2,h3,h4,h5{font-family:'Poppins',Arial,sans-serif;line-height:1.25}
a{color:var(--azul-claro);text-decoration:none;transition:.2s}
a:hover{color:var(--azul)}
img{max-width:100%}
.wrap{max-width:100%;margin:0;background:#fff}

/* Topbar */
.topbar{background:var(--azul-esc);color:#dce8f7;font-size:.85rem;padding:9px 36px;display:flex;flex-wrap:wrap;gap:22px;justify-content:flex-end;align-items:center}
.topbar a{color:#dce8f7}
.topbar a:hover{color:#fff}

/* Header */
header{display:flex;align-items:center;justify-content:space-between;padding:18px 36px;border-bottom:1px solid var(--borda);flex-wrap:wrap;gap:16px;position:sticky;top:0;background:#fff;z-index:50}
header img{height:56px}
.logo-mark{font-family:'Poppins',sans-serif;font-weight:800;font-size:1.45rem;color:var(--azul);letter-spacing:.3px;line-height:1.05;display:inline-block}
.logo-mark span{color:var(--azul-claro)}
.logo-mark small{display:block;font-size:.58rem;font-weight:500;color:var(--suave);letter-spacing:2px;margin-top:3px}
footer .logo-mark{color:#fff;margin-bottom:14px}
footer .logo-mark small{color:#9fc4ee}
nav a{margin:0 14px;font-weight:600;color:var(--azul);font-family:'Poppins',sans-serif;font-size:.95rem}
nav a:hover{color:var(--azul-claro)}
.btn{background:linear-gradient(135deg,var(--azul-claro),var(--ciano));color:#fff !important;padding:12px 24px;border-radius:30px;font-weight:600;font-family:'Poppins',sans-serif;display:inline-block;box-shadow:0 6px 16px rgba(30,127,214,.35)}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(30,127,214,.45);color:#fff !important}

/* Hero */
.hero{position:relative;background:linear-gradient(135deg,var(--azul-esc) 0%,var(--azul) 55%,var(--azul-claro) 100%);color:#fff;padding:80px 40px;text-align:center;overflow:hidden}
.hero::after{content:"";position:absolute;right:-80px;top:-80px;width:320px;height:320px;background:radial-gradient(circle,rgba(35,181,211,.35),transparent 70%);border-radius:50%}
.hero h1{font-size:2.4rem;font-weight:800;max-width:840px;margin:0 auto 18px;position:relative}
.hero p{max-width:720px;margin:0 auto 28px;opacity:.94;font-size:1.05rem;position:relative}
.hero .btn{position:relative}
.tag{display:inline-block;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.3);padding:6px 16px;border-radius:30px;font-size:.85rem;margin-bottom:20px;font-family:'Poppins',sans-serif;letter-spacing:.5px}

/* Faixa de números */
.stats{background:var(--azul-esc);color:#fff;display:grid;grid-template-columns:repeat(4,1fr);text-align:center}
.stats div{padding:26px 14px;border-right:1px solid rgba(255,255,255,.08)}
.stats div:last-child{border-right:none}
.stats .n{font-family:'Poppins',sans-serif;font-size:2rem;font-weight:800;color:#48d1ec;display:block}
.stats .l{font-size:.85rem;opacity:.85}

/* Seções */
section{padding:56px 40px;border-bottom:1px solid var(--borda)}
section h2{color:var(--azul);font-size:1.8rem;font-weight:700;margin-bottom:10px;text-align:center}
section .sub{text-align:center;color:var(--suave);max-width:680px;margin:0 auto 14px;font-size:1.02rem}
section h3{color:var(--azul-claro);font-size:1.15rem;margin:22px 0 8px}
.center{text-align:center}
.divisor{width:64px;height:4px;background:linear-gradient(90deg,var(--azul-claro),var(--ciano));border-radius:4px;margin:0 auto 26px}

/* Soluções */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:22px;margin-top:26px}
.card{background:#fff;border:1px solid var(--borda);border-radius:16px;overflow:hidden;box-shadow:var(--sombra);transition:.25s}
.card:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(10,58,122,.16)}
.card img{width:100%;height:160px;object-fit:cover;display:block}
.card .c-body{padding:20px}
.card h4{color:var(--azul);margin-bottom:6px;font-size:1.1rem}
.card small{color:var(--suave);font-size:.92rem}

/* Serviços */
.serv{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:22px;margin-top:26px}
.bloco{background:#fff;border:1px solid var(--borda);border-radius:16px;padding:0 22px 22px;box-shadow:var(--sombra);transition:.25s}
.bloco:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(10,58,122,.14)}
.bloco h4{color:#fff;background:linear-gradient(135deg,var(--azul),var(--azul-claro));margin:0 -22px 14px;padding:16px 22px;border-radius:16px 16px 0 0;font-size:1.05rem;display:flex;align-items:center;gap:10px}
.bloco ul{list-style:none}
.bloco li{padding:8px 0 8px 26px;position:relative;border-bottom:1px dashed var(--borda);font-size:.95rem}
.bloco li:last-child{border-bottom:none}
.bloco li::before{content:"✓";position:absolute;left:0;color:var(--ciano);font-weight:bold}

/* Diferenciais */
.dif{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px 30px;margin-top:24px;list-style:none}
.dif li{margin:0;padding:14px 16px 14px 48px;position:relative;background:var(--cinza);border-radius:12px;font-size:.95rem}
.dif li::before{content:"✔";position:absolute;left:18px;top:14px;color:#16a34a;font-weight:bold;font-size:1.1rem}

/* Clientes */
.clientes{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px;justify-content:center}
.clientes span{background:#fff;border:1px solid var(--borda);color:var(--azul);padding:10px 20px;border-radius:30px;font-size:.92rem;font-weight:600;box-shadow:var(--sombra);font-family:'Poppins',sans-serif}

/* CTA band */
.cta-band{background:linear-gradient(135deg,var(--azul),var(--azul-claro));color:#fff;text-align:center}
.cta-band h2{color:#fff}
.cta-band .sub{color:rgba(255,255,255,.9)}

/* Contato */
.contato-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin-top:24px}
.contato-grid .c{background:var(--cinza);border-radius:14px;padding:22px;border:1px solid var(--borda);transition:.2s}
.contato-grid .c:hover{box-shadow:var(--sombra);transform:translateY(-3px)}
.contato-grid .c b{color:var(--azul);display:block;margin-bottom:6px;font-family:'Poppins',sans-serif}

form{margin-top:26px;max-width:560px}
form input,form textarea{width:100%;padding:14px;margin:8px 0;border:1px solid var(--borda);border-radius:10px;font-family:inherit;font-size:.95rem;background:var(--cinza)}
form input:focus,form textarea:focus{outline:none;border-color:var(--azul-claro);background:#fff}
form button{background:linear-gradient(135deg,var(--azul-claro),var(--ciano));color:#fff;border:none;padding:14px 34px;border-radius:30px;font-weight:600;cursor:pointer;font-family:'Poppins',sans-serif;font-size:1rem;box-shadow:0 6px 16px rgba(30,127,214,.35)}
form button:hover{transform:translateY(-2px)}

/* Footer */
footer{background:var(--azul-esc);color:#cdddf0;padding:46px 40px 30px}
footer img{height:48px;margin-bottom:14px;filter:brightness(0) invert(1)}
footer a{color:#9fc4ee}
footer a:hover{color:#fff}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:28px}
.footer-grid h5{margin-bottom:10px;text-transform:uppercase;font-size:.8rem;letter-spacing:1px;color:#5fb6e6}
.footer-grid p{margin:4px 0;font-size:.92rem}
.copy{text-align:center;margin-top:28px;padding-top:18px;border-top:1px solid rgba(255,255,255,.12);opacity:.8;font-size:.85rem}

/* Botão flutuante do WhatsApp */
.whats-float{position:fixed;right:22px;bottom:22px;z-index:999;background:#25D366;color:#fff !important;
  width:62px;height:62px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 18px rgba(37,211,102,.5);font-size:30px;text-decoration:none;animation:pulse 2s infinite}
.whats-float:hover{transform:scale(1.1);color:#fff !important}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,.5)}70%{box-shadow:0 0 0 16px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}

/* Hero em duas colunas (texto + imagem) */
.hero{text-align:left}
.hero-split{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:center;max-width:1100px;margin:0 auto;position:relative}
.hero-split .hero-text h1{margin-left:0;margin-right:0;max-width:none}
.hero-split .hero-text p{margin-left:0;margin-right:0;max-width:none}
.hero-img img{width:100%;border-radius:0;-webkit-mask-image:linear-gradient(to right, transparent 0%, #000 20%, #000 100%);mask-image:linear-gradient(to right, transparent 0%, #000 20%, #000 100%)}

/* Seção Diferenciais escura com imagem do técnico */
.dif-section{background:linear-gradient(135deg,var(--azul-esc),var(--azul));color:#fff;border-bottom:none}
.dif-section h2{color:#fff;text-align:left}
.dif-split{display:grid;grid-template-columns:1fr 1.2fr;gap:36px;align-items:center;max-width:1100px;margin:0 auto}
.dif-split .foto img{width:100%;border-radius:14px}
.dif-section .dif{grid-template-columns:repeat(2,1fr)}
.dif-section .dif li{background:rgba(255,255,255,.08);color:#eaf2fb}
.dif-section .dif li::before{color:#48d1ec}
.dif-section .intro{font-size:1.15rem;font-weight:600;margin-bottom:8px}

/* Imagem destacada de contato */
.foto-destaque{width:100%;border-radius:14px;margin:0 auto 10px;display:block;max-width:560px}

/* Imagem do sistema VRF nos serviços */
.serv-feature{display:block;max-width:560px;width:100%;margin:30px auto 0}

/* Logos de clientes */
.logos{display:flex;flex-wrap:wrap;gap:30px 40px;justify-content:center;align-items:center;margin-top:26px}
.logos img{height:70px;width:auto;max-width:170px;object-fit:contain;transition:.25s}
.logos img:hover{transform:scale(1.08)}

/* Seção Sobre (duas colunas com dutos + diferenciais) */
.sobre-split{display:grid;grid-template-columns:1fr 1.15fr;gap:44px;align-items:center;max-width:1100px;margin:0 auto}
.sobre-foto img{width:100%;display:block}
.eyebrow{display:block;color:var(--azul-claro);font-family:'Poppins',sans-serif;font-weight:700;font-size:.85rem;letter-spacing:1.5px;margin-bottom:8px}
.sobre-content h2{text-align:left;margin-bottom:10px}
.sobre-content p{color:#444}
.features{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:22px 0}
.feat{display:flex;align-items:flex-start;gap:12px;font-size:.92rem}
.feat span{font-size:1.5rem;line-height:1}
.feat b{color:var(--azul);font-family:'Poppins',sans-serif;font-weight:600}

/* Barra de serviços */
.service-bar{max-width:1100px;margin:-30px auto 0;position:relative;z-index:5;background:#fff;border:1px solid var(--borda);border-radius:18px;box-shadow:0 14px 40px rgba(10,58,122,.12);display:grid;grid-template-columns:repeat(5,1fr);overflow:hidden}
.service-bar div{display:flex;align-items:center;gap:12px;padding:22px 18px;border-right:1px solid var(--borda);font-family:'Poppins',sans-serif;font-weight:600;font-size:.92rem;color:var(--azul)}
.service-bar div:last-child{border-right:none}
.service-bar span{font-size:1.5rem}

/* Banner do topo (imagem) */
.banner-top{width:100%;display:block}
.banner-cta{text-align:center;padding:26px 20px 6px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* FAQ */
.faq{max-width:920px;margin:26px auto 0}
.faq details{background:var(--cinza);border:1px solid var(--borda);border-radius:12px;margin-bottom:12px;padding:0 22px;transition:.2s}
.faq details[open]{box-shadow:var(--sombra)}
.faq summary{cursor:pointer;font-family:'Poppins',sans-serif;font-weight:600;color:var(--azul);padding:18px 0;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:14px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--azul-claro);font-size:1.5rem;line-height:1}
.faq details[open] summary::after{content:"\2013"}
.faq details p{padding:0 0 18px;color:#444;margin:0}

@media(max-width:880px){
  .sobre-split{grid-template-columns:1fr;gap:24px}
  .service-bar{grid-template-columns:repeat(2,1fr);margin-top:24px}
  .service-bar div:nth-child(2){border-right:none}
  .features{grid-template-columns:1fr 1fr}
}
@media(max-width:520px){
  .service-bar{grid-template-columns:1fr}
  .service-bar div{border-right:none;border-bottom:1px solid var(--borda)}
  .features{grid-template-columns:1fr}
}

@media(max-width:680px){
  section,header,.hero,.topbar,footer{padding-left:20px;padding-right:20px}
  .hero{padding-top:46px;padding-bottom:46px}
  .hero h1{font-size:1.6rem}
  .hero-split,.dif-split{grid-template-columns:1fr;gap:24px}
  .hero-img{order:-1}
  .dif-section .dif{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,1fr)}
  .stats div:nth-child(2){border-right:none}
  nav{display:none}
  .topbar{justify-content:center;gap:14px}
}