/* ============================================================
   TOKENS — amostrados do mockup
   ============================================================ */
:root{
  --laranja:#F15B02;
  --laranja-claro:#F7691A;
  --navy:#0B1E5B;
  --navy-esc:#06173F;
  --banda-1:#01243A;
  --banda-2:#07234E;
  --verde-topo:#009E3C;
  --verde-base:#068235;
  --branco:#FFFFFF;
  --cinza-bg:#F4F7FA;
  --cinza-borda:#E3E9F0;
  --texto:#1A2430;
  --texto-70:rgba(26,36,48,.72);
  --texto-50:rgba(26,36,48,.52);

  --display:'Archivo','Archivo Narrow','Oswald','Arial Narrow',
            ui-sans-serif,system-ui,sans-serif;
  --corpo:'Barlow',system-ui,-apple-system,'Segoe UI',sans-serif;

  --raio:16px;
  --sombra:0 10px 30px rgba(11,30,91,.08);
  --max:1200px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;font-family:var(--corpo);color:var(--texto);background:var(--branco);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--laranja);outline-offset:3px;border-radius:8px}
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:24px}

/* títulos condensados pesados, como no mockup */
.d{
  font-family:var(--display);font-weight:800;
  font-stretch:75%;font-variation-settings:'wdth' 75;
  text-transform:uppercase;letter-spacing:-.005em;line-height:.98;
  text-wrap:balance;
}

/* rótulo com régua laranja */
.rotulo{
  display:flex;align-items:center;gap:14px;text-shadow:0 1px 0 rgba(255,255,255,.6);
  font-family:var(--display);font-weight:700;font-stretch:87%;font-variation-settings:'wdth' 87;
  font-size:13.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--laranja);margin:0 0 12px;
}
.rotulo::before{content:"";width:34px;height:4px;border-radius:2px;background:var(--laranja);flex:none}
.rotulo--claro{color:#fff;letter-spacing:.09em;font-size:12.5px;text-shadow:none;align-items:flex-start}
.rotulo--claro::before{margin-top:6px}
.rotulo--claro::before{background:var(--laranja)}

/* ============================================================
   BOTÃO WHATSAPP
   ============================================================ */
.cta{
  display:inline-flex;align-items:center;gap:0;text-decoration:none;color:#fff;
  background:linear-gradient(180deg,var(--verde-topo),var(--verde-base));
  border-radius:14px;padding:4px;
  box-shadow:0 14px 30px rgba(4,130,53,.30);
  transition:transform .18s ease,filter .18s ease,box-shadow .18s ease;
}
.cta__in{display:flex;align-items:center;gap:18px;padding:14px 26px;width:100%}
.cta__ico{width:44px;height:44px;flex:none}
.cta__ico svg{width:100%;height:100%;fill:#fff}
.cta__bar{width:2px;align-self:stretch;background:rgba(255,255,255,.55);border-radius:2px}
.cta__txt{
  font-family:var(--display);font-weight:800;font-stretch:87%;font-variation-settings:'wdth' 87;
  font-size:clamp(17px,1.65vw,22px);text-transform:uppercase;letter-spacing:.01em;line-height:1;
}
.cta__seta{width:26px;height:26px;flex:none;margin-left:6px}
.cta__seta svg{width:100%;height:100%;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.cta:hover{transform:translateY(-2px);filter:brightness(1.06);box-shadow:0 18px 38px rgba(4,130,53,.36)}
.cta:active{transform:translateY(0)}

/* ============================================================
   TOPO
   ============================================================ */
.topbar{position:absolute;top:0;left:0;right:0;z-index:5}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:22px}
.logo{background:rgba(255,255,255,.86);backdrop-filter:blur(6px);border-radius:12px;padding:8px 14px;display:inline-flex}
.logo img{height:40px;width:auto}
.topbar__link{
  display:inline-flex;align-items:center;gap:9px;text-decoration:none;
  font-weight:600;font-size:14.5px;color:var(--navy);
  background:rgba(255,255,255,.88);backdrop-filter:blur(6px);
  border-radius:999px;padding:10px 18px;
  transition:background .18s ease;
}
.topbar__link svg{width:18px;height:18px;fill:var(--verde-topo)}
.topbar__link:hover{background:#fff}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;
  min-height:clamp(620px,86vh,860px);
  display:flex;align-items:center;
  background-image:url("../assets/hero-bau.webp");
  background-size:cover;background-position:center 42%;background-repeat:no-repeat;
  background-color:#9EC7E8;
  overflow:hidden;
}
/* véu leve só para garantir contraste do texto sobre a parede do baú */
.hero::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(70% 62% at 26% 56%,rgba(255,255,255,.88) 0%,rgba(255,255,255,.55) 45%,rgba(255,255,255,0) 78%),
    linear-gradient(180deg,rgba(255,255,255,0) 44%,rgba(255,255,255,.38) 74%,rgba(255,255,255,.62) 100%);
}
.hero .wrap{position:relative;z-index:2;width:100%}
.hero__copy{max-width:640px;margin-top:9%}

.hero h1{margin:0;font-size:clamp(33px,4.2vw,58px);color:var(--navy);text-wrap:initial}
.hero h1 br{line-height:0}
.hero h1 .laranja{color:var(--laranja);display:block}
.hero__sub{
  margin:16px 0 0;font-size:clamp(17px,1.6vw,22px);line-height:1.35;
  color:var(--texto);font-weight:500;max-width:30ch;
}
.hero__cta{margin-top:26px}

/* ============================================================
   IDEAL PARA
   ============================================================ */
.ideal{background:var(--branco);padding:30px 0 34px;position:relative;z-index:3}
.ideal .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:22px 40px}
.ideal .rotulo{margin:0;flex:none}
.ideal ul{
  list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(3,1fr);gap:14px;flex:1 1 560px;
}
.ideal li{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;position:relative}
.ideal li+li::before{content:"";position:absolute;left:-7px;top:12%;bottom:12%;width:1px;background:var(--cinza-borda)}
.ideal svg{width:52px;height:38px;fill:none;stroke:var(--navy);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ideal p{margin:0;font-size:15px;line-height:1.3;color:var(--texto-70)}

/* ============================================================
   MODELOS
   ============================================================ */
.modelos{background:linear-gradient(180deg,#F7FAFD,#FFFFFF 60%);padding:68px 0 74px}
.modelos h2{margin:0 0 34px;font-size:clamp(30px,4.1vw,52px);color:var(--navy)}
.modelos h2 .laranja{color:var(--laranja)}

.grade-modelos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.modelo{
  background:var(--branco);border:1px solid var(--cinza-borda);border-radius:var(--raio);
  box-shadow:var(--sombra);padding:22px 22px 26px;display:flex;flex-direction:column;
}
.modelo__img{
  background:var(--branco);border-radius:10px;overflow:hidden;
  display:grid;place-items:center;min-height:150px;margin-bottom:18px;
}
.modelo__img img{width:100%;height:auto}
.modelo__txt{display:flex;flex-direction:column}
.modelo h3{
  margin:0 0 12px;min-height:2.3em;font-family:var(--display);font-weight:700;font-stretch:87%;font-variation-settings:'wdth' 87;
  font-size:19px;line-height:1.15;color:var(--navy);letter-spacing:-.01em;
}
.modelo .regua{display:block;width:38px;height:4px;border-radius:2px;background:var(--laranja);margin-bottom:14px}
.modelo p{margin:0;font-size:15px;line-height:1.5;color:var(--texto-70)}

.modelos__cta{display:flex;justify-content:center;margin-top:40px}

/* ============================================================
   APLICAÇÕES
   ============================================================ */
.aplicacoes{background:var(--branco);padding:68px 0 70px}
.aplicacoes h2{margin:0 0 16px;font-size:clamp(28px,3.8vw,48px);color:var(--navy)}
.aplicacoes h2 .laranja{color:var(--laranja);display:block}
.aplicacoes .intro{margin:0 0 34px;font-size:clamp(15.5px,1.35vw,17.5px);line-height:1.55;color:var(--texto-70);max-width:62ch}

.grade-aplic{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.aplic{
  background:var(--branco);border:1px solid var(--cinza-borda);border-radius:var(--raio);
  box-shadow:var(--sombra);overflow:hidden;display:flex;flex-direction:column;
}
.aplic img{width:100%;height:210px;object-fit:cover}
.aplic__txt{padding:22px 22px 26px}
.aplic h3{
  margin:0 0 12px;font-family:var(--display);font-weight:700;font-stretch:87%;font-variation-settings:'wdth' 87;
  font-size:19px;line-height:1.15;color:var(--navy);text-transform:uppercase;letter-spacing:.005em;
}
.aplic .regua{display:block;width:38px;height:4px;border-radius:2px;background:var(--laranja);margin-bottom:14px}
.aplic p{margin:0;font-size:15px;line-height:1.5;color:var(--texto-70)}

/* ============================================================
   INSTALAÇÃO
   ============================================================ */
.instalacao{background:linear-gradient(180deg,#FFFFFF 0%,#EFF4F9 55%,#E8EFF7 100%);border-bottom:1px solid var(--cinza-borda);padding:66px 0;overflow:hidden}
.instalacao .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);gap:44px;align-items:center}
.instalacao h2{margin:0 0 18px;font-size:clamp(28px,3.8vw,48px);color:var(--navy)}
.instalacao h2 .laranja{color:var(--laranja);display:block}
.instalacao p.corpo{margin:0;font-size:clamp(15.5px,1.35vw,17.5px);line-height:1.55;color:var(--texto-70);max-width:46ch}

.beneficios{list-style:none;margin:28px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:0}
.beneficios li{padding:0 22px;border-left:1px solid var(--cinza-borda);font-size:15px;line-height:1.35;color:var(--texto-70)}
.beneficios li:first-child{padding-left:0;border-left:0}
.beneficios b{display:block;font-weight:600;color:var(--texto)}

.instalacao__img{margin:0}
.instalacao__img img{width:100%;height:auto;filter:drop-shadow(0 20px 30px rgba(11,30,91,.18))}

/* ============================================================
   CTA FINAL
   ============================================================ */
.fechamento{
  position:relative;overflow:hidden;color:#fff;
  background:linear-gradient(135deg,var(--banda-1),var(--banda-2));
  padding:66px 0;
}
.fechamento__foto{
  position:absolute;top:0;right:0;bottom:0;width:58%;
  background-image:url("../assets/caminhao-estrada.webp");
  background-size:cover;background-position:center right;
  -webkit-mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.18) 22%,rgba(0,0,0,.6) 48%,#000 78%);
  mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.18) 22%,rgba(0,0,0,.6) 48%,#000 78%);
}
.fechamento::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,var(--banda-1) 24%,rgba(1,36,58,.55) 44%,rgba(1,36,58,0) 64%);
}
.fechamento .wrap{position:relative;z-index:2}
.fechamento__copy{max-width:600px}
.fechamento h2{margin:0 0 14px;font-size:clamp(28px,3.9vw,50px);color:#fff}
.fechamento h2 .laranja{color:var(--laranja-claro)}
.fechamento p{margin:0 0 26px;font-size:clamp(15.5px,1.35vw,17.5px);line-height:1.55;color:rgba(255,255,255,.78);max-width:46ch}

footer{background:var(--navy-esc);color:rgba(255,255,255,.58);padding:30px 0;font-size:13.5px}
footer .wrap{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between}
footer img{height:30px;width:auto;opacity:.85}

/* ============================================================
   BARRA FIXA MOBILE
   ============================================================ */
.barra{
  position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.95);backdrop-filter:blur(10px);
  border-top:1px solid var(--cinza-borda);
  transform:translateY(130%);transition:transform .28s ease;
}
.barra.on{transform:translateY(0)}
.barra a{
  display:flex;align-items:center;justify-content:center;gap:12px;
  background:linear-gradient(180deg,var(--verde-topo),var(--verde-base));color:#fff;text-decoration:none;
  border-radius:12px;padding:15px;
  font-family:var(--display);font-weight:800;font-stretch:87%;font-variation-settings:'wdth' 87;
  font-size:16.5px;text-transform:uppercase;letter-spacing:.01em;
}
.barra svg{width:24px;height:24px;fill:#fff}

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media (max-width:1024px){
  .grade-modelos{grid-template-columns:repeat(2,1fr)}
  .grade-aplic{grid-template-columns:1fr}
  .aplic img{height:230px}
  .instalacao .wrap{grid-template-columns:1fr;gap:30px}
  .instalacao__img{order:-1}
  .fechamento__foto{width:100%;
    -webkit-mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.5) 42%,#000 100%);
    mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.5) 42%,#000 100%);
    opacity:.5;}
  .ideal .wrap{flex-direction:column;align-items:flex-start}
  .ideal ul{width:100%;flex:0 1 auto}
}

@media (max-width:760px){
  .wrap{padding-inline:18px}
  .topbar .wrap{padding-block:16px}
  .logo{padding:6px 11px}
  .logo img{height:32px}
  .topbar__link span{display:none}
  .topbar__link{padding:10px 12px}

  .hero{min-height:0;padding:104px 0 32px;align-items:flex-start;background-position:center 34%}
  .hero::after{background:linear-gradient(180deg,rgba(255,255,255,0) 14%,rgba(255,255,255,.62) 34%,rgba(255,255,255,.8) 100%)}
  .hero__copy{margin-top:34vw;max-width:none}
  .hero h1{font-size:clamp(32px,8.6vw,46px)}
  .hero__sub{max-width:none;font-size:17px}
  .cta{width:100%}
  .cta__in{justify-content:center;gap:14px;padding:15px 16px}
  .cta__ico{width:38px;height:38px}
  .cta__txt{font-size:16.5px}

  .ideal{padding:24px 0 28px}
  .ideal ul{gap:10px}
  .ideal svg{width:42px;height:32px}
  .ideal p{font-size:13.5px}

  .modelos{padding:52px 0 56px}
  .grade-modelos{grid-template-columns:1fr;gap:14px}
  .modelo{flex-direction:row;align-items:center;gap:16px;padding:16px}
  .modelo__txt{flex:1 1 auto;min-width:0}
  .modelo__img{min-height:0;width:38%;flex:none;margin:0}
  .modelo .regua{margin-bottom:10px}
  .modelo h3{font-size:17px;margin-bottom:9px}
  .modelo p{font-size:14px}
  .modelos__cta{margin-top:30px}

  .aplicacoes{padding:52px 0 54px}
  .instalacao{padding:52px 0}
  .beneficios{flex-direction:column;gap:14px}
  .beneficios li,.beneficios li:first-child{padding:0 0 0 16px;border-left:3px solid var(--laranja)}
  .fechamento{padding:52px 0}
  footer .wrap{justify-content:center;text-align:center}
  .barra{display:block}
  body{padding-bottom:86px}
}

@media (max-width:360px){
  .modelo{flex-direction:column;align-items:stretch}
  .modelo__img{width:100%;margin-bottom:14px}
  .modelo__txt{flex:initial}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}