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

:root{
  --navy:#002b4b;
  --navy-dark:#001d33;
  --navy-deep:#001728;
  --orange:#f08a0b;
  --orange-light:#f08a0b;
  --white:#fff;
  --muted:#c8d4df;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:"Inter",Arial,sans-serif;background:var(--navy-deep);color:#fff}
a{text-decoration:none;color:inherit}
.container{width:min(1360px,88%);margin:auto}

/* HEADER */
.header{
  height:110px;
  background:linear-gradient(90deg,#002b4b,#001e35);
  border-bottom:1px solid rgba(255,255,255,.08);
  position:relative;
  z-index:10;
}
.nav{height:100%;display:flex;align-items:center;justify-content:space-between;gap:30px}
.logo {
    width: 250px;
    height: 40px;
    overflow: visible;
    display: flex;
    align-items: center;
}

.logo img {
    width: 100%;
    height: auto;
    display: block;
    transform: scale(1.48);
    transform-origin: left center;
}
.menu{display:flex;align-items:center;gap:42px;font-size:15px;font-weight:500}
.menu a{padding:42px 0 17px;position:relative;color:#f4f7fa}
.menu a:hover,.menu a.active{color:var(--orange-light)}
.menu a.active:after{
  content:"";position:absolute;left:0;right:0;bottom:8px;height:4px;background:var(--orange-light)
}
.quote-button{
  display:flex;align-items:center;gap:14px;
  background:linear-gradient(#db7907,#c96900);
  border:1px solid #f29424;border-radius:10px;
  padding:18px 28px;font-size:18px;font-weight:800;
  box-shadow:inset 0 1px rgba(255,255,255,.16);
  white-space:nowrap;
}
.wa-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
}

.wa-icon svg {
    width: 28px;
    height: 28px;
    display: block;
}

/* HERO */
.hero{height:635px;position:relative;overflow:hidden;background:#062e4c}
.hero-photo{
  position:absolute;inset:0;
  background-image:url("assets/hero-trator.png");
  background-size:cover;
  background-position:center;
}
.hero-shade{
  position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(0,34,60,.98) 0%,rgba(0,38,66,.92) 30%,rgba(0,38,66,.62) 47%,rgba(0,25,45,.08) 70%),
    linear-gradient(0deg,rgba(0,25,44,.3),transparent 35%);
}
.hero-content{height:100%;position:relative;display:flex;align-items:center}
.hero-copy{width:650px;position:relative;z-index:2}
.eyebrow{font-size:18px;font-weight:800;letter-spacing:2.3px;color:var(--orange-light);margin-bottom:14px}
.hero h1{
  font-family:"Barlow Condensed",Impact,sans-serif;
  font-size:78px;line-height:.94;letter-spacing:.4px;font-weight:900;
  text-shadow:0 3px 1px rgba(0,0,0,.2);
}
.hero h1 span{color:var(--orange-light)}
.subtitle{font-size:20px;line-height:1.5;margin-top:18px;color:#f3f6f8}
.orange-text{
  color:var(--orange-light);
  font-weight:700;
}
.benefits{display:flex;gap:46px;margin-top:30px}
.benefit{display:flex;align-items:center;gap:13px}
.benefit-icon{
  width:40px;height:40px;display:grid;place-items:center;
  color:var(--orange-light);font-size:34px;font-weight:800
}
.benefit strong,.benefit small{display:block}
.benefit strong{font-size:13px;margin-bottom:6px}
.benefit small{font-size:12px;color:#d8e1e8;letter-spacing:.4px}
.hero-actions{display:flex;align-items:center;gap:30px;margin-top:32px}
.main-button{
  min-width:330px;height:78px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;gap:18px;
  background:linear-gradient(#dd7a08,#cb6900);
  border:2px solid #f09121;font-size:22px;font-weight:800;
  box-shadow:inset 0 1px rgba(255,255,255,.18);
  transition:.2s;
}
.main-button:hover,.quote-button:hover{filter:brightness(1.08);transform:translateY(-2px)}
.whatsapp-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
}

.whatsapp-icon {
    width: 32px;
    height: 32px;
    display: block;
}
.direct{
  position:relative;
  padding:14px 22px 14px 24px;

  background:rgba(0, 29, 51, 0.55);
  border:1px solid rgba(255,255,255,0.08);
  border-left:3px solid var(--orange);

  border-radius:6px;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 8px 25px rgba(0,0,0,0.08);

  backdrop-filter:blur(3px);
}

.direct strong{
  display:block;
  color:var(--orange);
  font-size:13px;
  line-height:1.25;
  letter-spacing:.7px;
  margin-bottom:6px;
}

.direct span{
  display:block;
  color:#e1e8ee;
  font-size:13px;
  line-height:1.4;
}

/* CATEGORIAS */
.categories{
  height:140px;display:grid;grid-template-columns:repeat(3,1fr);
  background:#082d4b;border-top:1px solid rgba(255,255,255,.18);
  border-bottom:1px solid rgba(255,255,255,.18)
}
.category{
  position:relative;overflow:hidden;display:flex;align-items:center;gap:24px;
  padding:0 52px;border-right:1px solid rgba(255,255,255,.18);
  background:linear-gradient(90deg,#08365b,#082944)
}
.category:last-child{border-right:0}
.category-icon{font-size:47px;color:#c7d6e2;z-index:2}
.category h2{font-family:"Barlow Condensed",sans-serif;font-size:22px;margin-bottom:6px;position:relative;z-index:2}
.category p{font-size:14px;line-height:1.45;color:#d5dfe7;position:relative;z-index:2}
.tread{
  position:absolute;right:-25px;top:-55px;width:210px;height:250px;opacity:.27;
  transform:rotate(18deg);
  background:repeating-linear-gradient(130deg,#101820 0 15px,#48535b 15px 30px,#101820 30px 43px)
}
.tread-2{transform:rotate(-14deg);opacity:.24}
.tread-3{transform:rotate(10deg);opacity:.22}
.brands-anchor{height:0}

/* FOOTER */
footer {
  min-height: 85px;
  padding: 16px 20px;
  background: linear-gradient(90deg, #00243f, #001b30);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #cbd7df;
  text-align: center;
}

.footer-menu {
  display: flex;
  gap: 22px;
  margin-bottom: 8px;
  font-size: 11px;
}

.footer-menu a:hover {
  color: var(--orange-light);
}

footer p {
  margin: 0 0 3px;
  font-size: 11px;
  letter-spacing: 0.5px;
}

footer span {
  font-size: 10px;
}

/* ÍCONES DOS DIFERENCIAIS */

.benefit-icon{
  width:42px;
  height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  color:var(--orange);
  position:relative;
  z-index:2;
}

.benefit-icon svg{
  width:38px;
  height:38px;
  display:block;
}

.category strong{
  position:relative;
  z-index:2;
}

/* RESPONSIVO */

@media(max-width:1100px){

  .menu{
    display:none;
  }

  .logo{
    width:330px;
  }

  .hero h1{
    font-size:68px;
  }

  .stamp{
    display:none;
  }

  .category{
    padding:0 28px;
  }

}


@media(max-width:760px){

  .header{
    height:82px;
  }

  .nav{
    gap:12px;
    justify-content:space-between;
  }

  /* A logo ocupa somente o espaço disponível */
  .logo{
    width:auto;
    height:65px;
    overflow:visible;
    flex:1 1 auto;
    min-width:0;
  }

  .logo img{
    width:auto;
    max-width:100%;
    height:65px;
    object-fit:contain;
    object-position:left center;
    display:block;

    /* Remove o scale do desktop */
    transform:none;
  }

  /* O botão mantém o tamanho necessário */
  .quote-button{
    padding:12px 14px;
    font-size:13px;
    flex:0 0 auto;
    white-space:nowrap;
  }

  .quote-button .wa-icon{
    display:none;
  }

  .container{
    width:90%;
  }

  .hero{
    height:auto;
    min-height:680px;
  }

  .hero-photo{
    background-position:65% center;
  }

  .hero-shade{
    background:linear-gradient(
      90deg,
      rgba(0,34,60,.98),
      rgba(0,34,60,.88) 65%,
      rgba(0,34,60,.48)
    );
  }

  .hero-content{
    padding:70px 0;
  }

  .hero-copy{
    width:100%;
  }

  .eyebrow{
    font-size:14px;
  }

  .hero h1{
    font-size:57px;
  }

  .subtitle{
    font-size:17px;
  }

  .subtitle br{
    display:none;
  }

  .benefits{
    gap:18px;
    flex-direction:column;
  }

  .hero-actions{
    align-items:flex-start;
    flex-direction:column;
  }

  .main-button{
    min-width:0;
    width:100%;
    height:66px;
    font-size:18px;
  }

 .direct{
  width:100%;
  text-align:center;
  padding:16px 20px;
  border-left:0;
  border-top:3px solid var(--orange);
}

.direct strong{
  text-align:center;
}

.direct span{
  text-align:center;
}

  .categories{
    height:auto;
    grid-template-columns:1fr;
  }

  .category{
    min-height:125px;
    border-right:0;
    border-bottom:1px solid rgba(255,255,255,.15);
  }

  .footer-menu{
    gap:15px;
    flex-wrap:wrap;
    justify-content:center;
    padding:0 20px;
  }

}

/* ========================================
   RESPONSIVO
   ======================================== */


/* ========================================
   TABLET / NOTEBOOK MENOR
   ======================================== */

@media(max-width:1100px){

  .menu{
    display:none;
  }

  .nav{
    justify-content:space-between;
    gap:20px;
  }

  /* Logo maior no tablet */
  .logo{
    width:330px;
    height:90px;
    flex:none;
    overflow:visible;
    display:flex;
    align-items:center;
  }

  .logo img{
    width:440px;
    max-width:none;
    height:auto;
    display:block;
    transform:none;
  }

  .quote-button{
    flex:none;
    white-space:nowrap;
    position:relative;
    z-index:5;
  }

  .hero h1{
    font-size:68px;
  }

  .stamp{
    display:none;
  }

  .category{
    padding:0 28px;
  }

}


/* ========================================
   CELULAR / TABLET PEQUENO
   ======================================== */

@media(max-width:760px){

  .header{
    height:82px;
  }

  .nav{
    width:94%;
    gap:8px;
    justify-content:space-between;
  }

  /*
    A imagem é maior que a caixa porque
    o PNG possui espaço transparente.
  */
  .logo{
    width:210px;
    height:70px;
    flex:none;
    overflow:visible;
    display:flex;
    align-items:center;
  }

  .logo img{
    width:310px;
    max-width:none;
    height:auto;
    display:block;
    transform:none;
  }

  .quote-button{
    padding:11px 12px;
    font-size:12px;
    flex:none;
    white-space:nowrap;
    position:relative;
    z-index:5;
  }

  .quote-button .wa-icon{
    display:none;
  }

  .container{
    width:90%;
  }

  .hero{
    height:auto;
    min-height:680px;
  }

  .hero-photo{
    background-position:65% center;
  }

  .hero-shade{
    background:linear-gradient(
      90deg,
      rgba(0,34,60,.98),
      rgba(0,34,60,.88) 65%,
      rgba(0,34,60,.48)
    );
  }

  .hero-content{
    padding:70px 0;
  }

  .hero-copy{
    width:100%;
  }

  .eyebrow{
    font-size:14px;
  }

  .hero h1{
    font-size:57px;
  }

  .subtitle{
    font-size:17px;
  }

  .subtitle br{
    display:none;
  }

  .benefits{
    gap:18px;
    flex-direction:column;
  }

  .hero-actions{
    align-items:flex-start;
    flex-direction:column;
  }

  .main-button{
    min-width:0;
    width:100%;
    height:66px;
    font-size:18px;
  }

  .direct{
    width:100%;
  }

  .categories{
    height:auto;
    grid-template-columns:1fr;
  }

  .category{
    min-height:125px;
    border-right:0;
    border-bottom:1px solid rgba(255,255,255,.15);
  }

  .footer-menu{
    gap:15px;
    flex-wrap:wrap;
    justify-content:center;
    padding:0 20px;
  }

}


/* ========================================
   CELULAR ATÉ 500px
   ======================================== */

@media(max-width:500px){

  .nav{
    width:96%;
    gap:5px;
    justify-content:space-between;
  }

  .logo{
    width:190px;
    height:70px;
    flex:none;
    overflow:visible;
    display:flex;
    align-items:center;
  }

  .logo img{
    width:285px;
    max-width:none;
    height:auto;
    display:block;
    transform:none;
  }

  .quote-button{
    font-size:11px;
    padding:10px 10px;
    flex:none;
    white-space:nowrap;
  }

  .quote-button .wa-icon{
    display:none;
  }

  .hero h1{
    font-size:49px;
  }

}


/* ========================================
   CELULAR ATÉ 390px
   ======================================== */

@media(max-width:390px){

  .nav{
    width:97%;
    gap:4px;
    justify-content:space-between;
  }

  .logo{
    width:170px;
    height:65px;
    flex:none;
    overflow:visible;
    display:flex;
    align-items:center;
  }

  .logo img{
    width:255px;
    max-width:none;
    height:auto;
    display:block;
    transform:none;
  }

  .quote-button{
    font-size:10px;
    padding:9px 8px;
    flex:none;
    white-space:nowrap;
  }

  .quote-button .wa-icon{
    display:none;
  }

  .hero h1{
    font-size:47px;
  }

}