:root{--navy:#06264b;--navy2:#0a3970;--yellow:#ffc400;--ink:#0a2e60;--muted:#eaf0f7;--white:#fff}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:100px}
body{margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--ink);background:#fff}
a{color:inherit;text-decoration:none}
.topbar{background:var(--navy);color:#fff;font-size:12px}
.top-inner{max-width:1440px;margin:auto;min-height:38px;padding:5px 28px;display:flex;align-items:center;gap:13px;justify-content:space-between}
.top-inner a{white-space:nowrap}.top-phone:first-letter{color:#29d96d}
.top-email,.instagram{border-left:1px solid #6d86a5;padding-left:13px}
.top-cta{margin-left:auto;background:var(--yellow);color:var(--navy);padding:8px 14px;border-radius:7px;font-weight:800}
.site-header{max-width:1440px;margin:auto;min-height:70px;padding:5px 30px;display:flex;align-items:center;justify-content:space-between;gap:28px;background:#fff}
.brand img{display:block;width:265px;height:auto;max-height:64px;object-fit:contain}
.nav{display:flex;align-items:center;gap:clamp(15px,2.1vw,32px);font-size:14px;font-weight:700}
.nav a{padding:12px 0;border-bottom:3px solid transparent}.nav a:hover,.nav a.active{border-color:var(--yellow)}
.menu-toggle{display:none}
.hero{position:relative;height:300px;display:flex;align-items:center;justify-content:flex-end;overflow:hidden;background:var(--navy)}
.hero-photo{position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,28,55,0) 24%,rgba(3,28,55,.08) 48%,rgba(3,28,55,.83) 69%,rgba(3,28,55,.58) 100%),url('hero-barco-desktop.jpg') center/cover no-repeat}
.hero-content{position:relative;z-index:1;width:min(34%,455px);margin:0 6.3% 0 0;color:#fff}
h1{font-size:clamp(36px,3.5vw,48px);line-height:1.02;letter-spacing:-1.4px;margin:0 0 13px;font-weight:900}
h1 span,.solar-copy h2 span{color:var(--yellow)}
.hero-copy{font-size:16px;line-height:1.38;max-width:450px;margin:0}
.button{display:inline-flex;align-items:center;justify-content:center;gap:14px;padding:11px 19px;border-radius:8px;font-weight:800;transition:transform .2s}
.button:hover{transform:translateY(-2px)}.yellow{background:var(--yellow);color:var(--navy)}
.section{padding:12px max(30px,calc((100% - 1380px)/2))}
.section-heading{display:flex;align-items:center;gap:14px;margin-bottom:10px}
.section-heading h2{font-size:clamp(23px,2.15vw,29px);margin:0;font-weight:900;letter-spacing:-.5px;color:var(--navy)}
.section-heading h2 span{color:#f2ad00}.section-heading i{height:2px;background:#9db8d6;flex:1}
.service-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.service-card{min-width:0;border:1px solid #e5ebf2;border-radius:9px;overflow:hidden;box-shadow:0 4px 15px #0b2c4c0b;background:#fff}
.service-card>img{display:block;width:100%;height:132px;object-fit:cover}
.service-body{position:relative;padding:10px 16px 12px}
.service-icon{position:absolute;top:-25px;left:12px;width:48px;height:48px;border:3px solid white;border-radius:50%;background:var(--navy);color:var(--yellow);display:grid;place-items:center;font-size:28px;font-weight:bold}
.service-body h3{font-size:clamp(17px,1.42vw,21px);margin:10px 0 5px;color:var(--navy);font-weight:900;letter-spacing:-.5px}
.service-body h3 em{font-style:normal;color:#efa900}
.service-body ul{padding-left:16px;margin:0;font-size:14px;line-height:1.42}
.solar-banner{position:relative;display:grid;grid-template-columns:1.1fr .9fr;min-height:195px;margin:0 max(30px,calc((100% - 1380px)/2)) 7px;border-radius:10px;overflow:hidden;background:var(--navy);color:#fff}
.solar-background{position:absolute;inset:0;opacity:.78}.solar-background img{width:100%;height:100%;object-fit:cover;object-position:center 52%}
.solar-banner:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#05274f 0%,rgba(5,39,79,.92) 30%,rgba(5,39,79,.3) 65%,rgba(5,39,79,.04) 100%)}
.solar-copy{z-index:1;position:relative;padding:17px 25px;max-width:500px}
.yellow-label{color:var(--yellow);font-weight:900;margin:0 0 6px;font-size:16px}
.solar-copy h2{font-size:clamp(28px,2.65vw,38px);line-height:1.02;margin:0 0 7px;color:#fff;letter-spacing:-1px}
.solar-copy>p:not(.yellow-label){font-size:16px;line-height:1.3;margin:0 0 10px}
.solar-copy .button{padding:9px 20px}
.battery-photo{position:relative;z-index:1;align-self:stretch;justify-self:stretch;overflow:hidden;margin:8px 10px 8px 0;border-radius:5px}
.battery-photo img{width:100%;height:100%;max-height:190px;object-fit:cover;object-position:center}
.why{padding-top:3px;padding-bottom:10px}
.benefit-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px}
.benefit-grid article{display:flex;align-items:center;gap:12px;padding:10px 12px;background:#f1f5f9;border-radius:9px;min-width:0}
.benefit-icon{color:var(--yellow);font-size:34px;line-height:1;min-width:42px;text-align:center;text-shadow:0 1px 0 #d99b00}
.benefit-grid h3{font-size:13px;color:var(--navy);margin:0 0 4px;font-weight:900}
.benefit-grid p{font-size:13px;line-height:1.3;margin:0}
footer{background:var(--navy);color:#fff;padding:20px max(30px,calc((100% - 1380px)/2)) 12px}
.footer-grid{display:grid;grid-template-columns:1.1fr .9fr 1fr;gap:28px}
.footer-grid section+section{border-left:1px solid #9eb4ce;padding-left:28px}
.footer-grid h2{font-size:16px;color:var(--yellow);margin:0 0 8px;font-weight:900}
.footer-grid p{font-size:14px;line-height:1.4;margin:0 0 12px;max-width:350px}
.quote .button{min-width:220px}
.contact-list a,.online a{display:flex;align-items:center;gap:11px;margin:6px 0;font-size:14px}
.contact-list a>span{font-size:19px;min-width:20px}.whatsapp{color:#29df72}
.copyright{border-top:1px solid #ffffff2a;text-align:center;color:#cbd8e8;font-size:11px;padding-top:10px;margin-top:14px}
@media(max-width:1100px){
 .top-inner{gap:9px;padding-inline:15px;font-size:10px}.instagram{display:none}
 .site-header{padding-inline:20px}.brand img{width:220px}.nav{gap:14px;font-size:12px}
 .hero{height:290px}.hero-content{width:38%;margin-right:5%}
 .service-grid{gap:11px}.service-card>img{height:120px}.service-body{padding:10px 11px}.service-body ul{font-size:12px}
 .benefit-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
 html{scroll-padding-top:80px}
 .top-inner{justify-content:center;flex-wrap:wrap;gap:7px 13px;padding:8px 8px}.top-inner .location,.top-email,.top-inner .landline,.instagram{display:none}
 .top-phone{font-size:12px}.top-cta{margin-left:0;padding:8px 10px;font-size:11px}
 .site-header{min-height:68px;padding:7px 15px;gap:10px;position:relative}.brand img{width:min(220px,56vw);max-height:53px}
 .menu-toggle{display:block;border:1px solid #d8e1ec;background:white;color:var(--navy);border-radius:7px;padding:9px;font-weight:800}
 .menu-toggle span{font-size:12px}
 .nav{display:none;position:absolute;z-index:10;top:100%;left:0;right:0;background:#fff;padding:8px 18px 16px;box-shadow:0 8px 12px #001c3d20;flex-direction:column;align-items:stretch;gap:0}
 .nav.open{display:flex}.nav a{padding:12px 3px;border-bottom:1px solid #e6edf4}.nav a.active{border-bottom:2px solid var(--yellow)}
 .hero{height:auto;min-height:440px;align-items:flex-end}
 .hero-photo{background-image:linear-gradient(0deg,rgba(3,28,55,.96) 0%,rgba(3,28,55,.76) 48%,rgba(3,28,55,.02) 100%),url('hero-barco.jpg');background-position:center;background-size:cover}
 .hero-content{width:auto;margin:0;padding:175px 22px 25px}
 h1{font-size:clamp(35px,9.6vw,46px);letter-spacing:-1px;margin:0 0 11px}.hero-copy{font-size:15px;line-height:1.42}
 .section{padding:20px 15px}.section-heading{gap:9px;margin-bottom:12px}.section-heading h2{font-size:22px}
 .service-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}
 .service-card>img{height:115px}.service-body{padding:10px 10px 12px}.service-icon{width:39px;height:39px;top:-22px;font-size:22px}
 .service-body h3{font-size:16px;margin-top:10px}.service-body ul{font-size:12px;line-height:1.4;padding-left:14px}
 .solar-banner{margin:0 10px 7px;grid-template-columns:1fr;min-height:0}.solar-banner:after{background:linear-gradient(0deg,rgba(5,39,79,.97),rgba(5,39,79,.8))}
 .solar-background{opacity:.45}.solar-copy{padding:22px 18px 15px}.solar-copy h2{font-size:32px}.solar-copy>p:not(.yellow-label){font-size:15px}
 .battery-photo{height:175px;margin:0 10px 10px}.battery-photo img{max-height:none;object-position:center 48%}
 .why{padding-top:17px;padding-bottom:20px}.benefit-grid{grid-template-columns:1fr;gap:8px}
 .benefit-grid article{padding:11px 13px}.benefit-icon{font-size:30px;min-width:38px}
 .footer-grid{grid-template-columns:1fr;gap:18px}.footer-grid section+section{border-left:0;border-top:1px solid #ffffff40;padding:17px 0 0}
 footer{padding:22px 18px 12px}.contact-list a,.online a{font-size:14px}
}
@media(max-width:380px){
 .top-inner{gap:6px 9px}.top-phone{font-size:11px}.brand img{width:175px}.menu-toggle{font-size:12px;padding:8px}
 .service-grid{grid-template-columns:1fr}.service-card>img{height:170px}.service-body ul{font-size:13px}.section-heading h2{font-size:21px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important}}


/* Ajustes mobile v3: leitura mais confortável e contato sempre acessível */
@media(max-width:760px){
  body{padding-bottom:72px}
  .top-inner{min-height:44px;gap:7px 10px;padding:7px 8px}
  .top-inner .top-phone.second{display:none}
  .top-phone{font-size:12px;font-weight:700}
  .top-cta{font-size:12px;padding:9px 12px;border-radius:6px}
  .site-header{min-height:72px;padding:8px 14px;gap:8px}
  .brand img{width:min(205px,54vw);max-height:52px}
  .menu-toggle{padding:10px 11px;min-height:42px;white-space:nowrap}
  .hero{min-height:470px}
  .hero-photo{background-position:48% center}
  .hero-content{padding:190px 20px 28px}
  h1{font-size:clamp(36px,9vw,45px);line-height:1.04}
  .hero-copy{font-size:16px;line-height:1.5;max-width:38rem}
  .section{padding:24px 16px}
  .section-heading{align-items:flex-start;gap:10px;margin-bottom:16px}
  .section-heading h2{font-size:clamp(22px,5.6vw,26px);line-height:1.12}
  .section-heading i{margin-top:12px;min-width:18px}
  .service-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}
  .service-card{border-radius:11px;box-shadow:0 4px 16px rgba(6,38,75,.09)}
  .service-card>img{height:clamp(125px,29vw,175px)}
  .service-body{padding:11px 12px 14px}
  .service-icon{width:38px;height:38px;top:-21px;left:10px;font-size:22px}
  .service-body h3{font-size:clamp(16px,3.8vw,19px);line-height:1.16;margin:10px 0 7px}
  .service-body ul{font-size:13px;line-height:1.5;padding-left:15px}
  .service-body li{margin-bottom:3px}
  .solar-banner{margin:0 12px 12px;border-radius:12px}
  .solar-copy{padding:24px 18px 18px}
  .solar-copy h2{font-size:clamp(30px,8vw,36px);line-height:1.08}
  .solar-copy>p:not(.yellow-label){font-size:16px;line-height:1.45}
  .solar-copy .button{min-height:44px}
  .battery-photo{height:190px;margin:0 10px 10px}
  .why{padding-top:20px;padding-bottom:24px}
  .benefit-grid{grid-template-columns:1fr;gap:10px}
  .benefit-grid article{padding:13px 14px;gap:13px}
  .benefit-grid h3{font-size:15px;line-height:1.25}
  .benefit-grid p{font-size:14px;line-height:1.45}
  footer{padding:25px 18px 15px}
  .footer-grid{gap:20px}
  .footer-grid h2{font-size:17px;line-height:1.25}
  .footer-grid p{font-size:15px;line-height:1.5}
  .contact-list a,.online a{font-size:15px;line-height:1.35;min-height:28px;overflow-wrap:anywhere}
  .copyright{font-size:12px;line-height:1.45}
  .mobile-contact-bar{position:fixed;z-index:50;left:0;right:0;bottom:0;display:grid;grid-template-columns:1.25fr 1fr;gap:8px;padding:9px 12px calc(9px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid #dce5ef;box-shadow:0 -5px 18px rgba(3,28,55,.14)}
  .mobile-contact-bar a{display:flex;align-items:center;justify-content:center;gap:7px;min-height:45px;border-radius:8px;font-size:14px;font-weight:800;white-space:nowrap}
  .mobile-contact-bar .mobile-wa{background:#ffc400;color:#06264b}
  .mobile-contact-bar .mobile-call{background:#06264b;color:#fff}
}
@media(max-width:520px){
  .service-grid{grid-template-columns:1fr;gap:15px}
  .service-card>img{height:190px}
  .service-body{padding:12px 15px 15px}
  .service-body h3{font-size:20px}
  .service-body ul{font-size:14px;line-height:1.5}
  .section-heading h2{font-size:23px}
  .hero{min-height:485px}
  .hero-content{padding:200px 19px 27px}
  .top-inner{gap:7px;padding-inline:6px}
  .top-phone{font-size:11px}
  .top-cta{font-size:11px;padding:8px 9px}
  .mobile-contact-bar{grid-template-columns:1.2fr 1fr;padding-left:8px;padding-right:8px}
  .mobile-contact-bar a{font-size:13px}
}
@media(max-width:360px){
  .brand img{width:150px}
  .menu-toggle{padding:8px;font-size:11px}
  .hero{min-height:465px}
  h1{font-size:34px}
  .mobile-contact-bar a{font-size:12px;gap:5px}
}
@media(min-width:761px){.mobile-contact-bar{display:none}}


/* Mobile-first correction v4: explicit layout for narrow screens */
@media screen and (max-width: 760px) {
  html, body { width:100%; min-width:0; overflow-x:hidden; }
  .topbar, .top-inner, .site-header, main, footer { max-width:100%; }
  .top-inner { display:flex; flex-wrap:wrap; justify-content:center; }
  .top-email, .instagram, .location, .landline { display:none !important; }
  .site-header { display:flex; flex-wrap:nowrap; }
  .nav { max-width:100vw; }
  .hero { min-height:0; height:auto; display:flex; align-items:flex-end; }
  .hero-photo { background-image:linear-gradient(0deg,rgba(3,28,55,.97) 0%,rgba(3,28,55,.78) 53%,rgba(3,28,55,.06) 100%),url('hero-barco.jpg') !important; background-position:center; background-size:cover; }
  .hero-content { width:100%; max-width:none; margin:0; padding:190px 20px 24px; }
  h1 { font-size:clamp(34px,9vw,44px); line-height:1.04; }
  .hero-copy { font-size:16px; line-height:1.5; }
  .section { padding:22px 15px; }
  .section-heading { align-items:flex-start; }
  .section-heading h2 { font-size:clamp(21px,6vw,25px); line-height:1.15; }
  .service-grid { grid-template-columns:minmax(0,1fr) !important; gap:16px; }
  .service-card { width:100%; }
  .service-card>img { height:auto; aspect-ratio:16 / 9; object-fit:cover; }
  .service-body { padding:12px 15px 16px; }
  .service-body h3 { font-size:21px; line-height:1.2; }
  .service-body ul { font-size:15px; line-height:1.5; }
  .solar-banner { display:flex; flex-direction:column; margin:0 12px 12px; }
  .solar-copy { padding:22px 18px 16px; }
  .solar-copy h2 { font-size:clamp(29px,8vw,36px); }
  .battery-photo { height:auto; aspect-ratio:16 / 9; margin:0 10px 10px; }
  .battery-photo img { width:100%; height:100%; object-fit:cover; }
  .benefit-grid { grid-template-columns:minmax(0,1fr) !important; }
  .benefit-grid h3 { font-size:15px; }
  .benefit-grid p { font-size:14px; }
  .footer-grid { grid-template-columns:minmax(0,1fr) !important; }
  .footer-grid section+section { border-left:0; border-top:1px solid #ffffff40; padding:16px 0 0; }
  .contact-list a, .online a { overflow-wrap:anywhere; font-size:15px; }
  .mobile-contact-bar { display:grid !important; }
}
@media screen and (min-width: 521px) and (max-width:760px) {
  .service-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  .service-card>img { aspect-ratio:4 / 3; }
}

/* Cabeçalho revisado: primeiro os serviços, depois o benefício ao cliente */
.hero-content{min-width:0;overflow:visible}
.hero-services-title{display:block;width:100%;max-width:100%;overflow:visible;overflow-wrap:normal;word-break:normal;font-size:clamp(25px,2.4vw,39px);line-height:1.16;letter-spacing:-.35px;margin:0 0 16px;font-weight:800;color:#fff}
@media(min-width:761px){.hero-content{width:min(42%,540px);margin-right:5%}}
.hero-copy .hero-benefit{display:block;color:#f5c542;font-size:clamp(20px,1.8vw,27px);font-weight:800;line-height:1.18;margin-bottom:10px}
.hero-copy .hero-support{display:block;color:#fff;font-size:16px;line-height:1.45}
@media(max-width:760px){.hero-services-title{font-size:clamp(28px,7.4vw,36px);line-height:1.12;margin-bottom:14px}.hero-copy .hero-benefit{font-size:clamp(21px,5.8vw,27px);line-height:1.2;margin-bottom:9px}.hero-copy .hero-support{font-size:16px;line-height:1.45}}

/* AJUSTE DO BANNER - versao 2026-10-25 */
.hero {
  height: auto;
  min-height: 420px;
  padding: 28px 0;
  align-items: center;
  overflow: hidden;
}
.hero-content {
  width: min(42%, 540px);
  max-width: 540px;
  margin: 0 4.5% 0 0;
  padding: 18px 0;
  min-width: 0;
}
.hero-services-title {
  font-size: clamp(30px, 2.6vw, 39px);
  line-height: 1.12;
  letter-spacing: -0.45px;
  margin: 0 0 14px;
  overflow-wrap: break-word;
  word-break: normal;
}
.hero-copy { max-width: 100%; margin: 0; }
.hero-copy .hero-benefit {
  display: block;
  font-size: clamp(20px, 1.8vw, 27px);
  line-height: 1.2;
  margin-bottom: 10px;
}
.hero-copy .hero-support {
  display: block;
  font-size: 15px;
  line-height: 1.45;
}
@media (max-width: 1100px) and (min-width: 761px) {
  .hero { min-height: 420px; }
  .hero-content { width: min(45%, 520px); margin-right: 3.5%; }
  .hero-services-title { font-size: clamp(29px, 3vw, 36px); }
}
@media (max-width: 760px) {
  .hero { min-height: 0; height: auto; padding: 0; align-items: flex-end; }
  .hero-content { width: 100%; max-width: none; margin: 0; padding: 175px 20px 28px; }
  .hero-services-title { font-size: clamp(30px, 8vw, 40px); line-height: 1.08; letter-spacing: -0.4px; }
  .hero-copy .hero-benefit { font-size: clamp(19px, 5.5vw, 24px); }
  .hero-copy .hero-support { font-size: 14px; }
}
@media (max-width: 520px) {
  .hero-content { padding: 165px 18px 25px; }
  .hero-services-title { font-size: clamp(28px, 7.5vw, 34px); }
}

/* Serviço adicional: Sistemas Anti-Cracas */
.service-card .service-link{display:inline-block;margin-top:10px;color:var(--navy);font-size:13px;font-weight:800;text-decoration:none;border-bottom:2px solid var(--yellow);padding-bottom:3px}
.service-card .service-link:hover{color:#0a3970}


/* Ajustes de layout para o cartão Anti-Cracas */
@media (min-width: 1101px) {
  .service-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 16px;
  }
  .service-grid > .service-card:nth-child(-n+3) {
    grid-column: span 2;
  }
  .service-grid > .service-card:nth-child(n+4) {
    grid-column: span 3;
  }
}
@media (min-width: 761px) and (max-width: 1100px) {
  .service-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .service-grid > .service-card:nth-child(-n+3) {
    grid-column: span 2;
  }
  .service-grid > .service-card:nth-child(n+4) {
    grid-column: span 3;
  }
}