:root{
  --preto:#ffffff;
  --grafite:#f4f5f8;
  --aco:#e7e9f0;
  --amarelo:#2b2c40;
  --amarelo-claro:#3a3c56;
  --branco:#22232f;
  --cinza:#6b6d80;
  --cinza-claro:#4a4c5e;
  --verde-wpp:#25d366;
  --borda:rgba(43,44,64,.14);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Helvetica Neue',Arial,sans-serif;
  background:var(--preto);
  color:var(--branco);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:'Arial Black','Helvetica Neue',sans-serif;font-weight:900;letter-spacing:-.02em;line-height:1.05;text-transform:uppercase}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{max-width:1120px;margin:0 auto;padding:0 22px}

/* ---------- HEADER ---------- */
header{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--borda);
}
.nav{display:flex;align-items:center;justify-content:space-between;height:70px}
.logo{font-family:'Arial Black',sans-serif;font-weight:900;font-size:1.25rem;text-transform:uppercase;letter-spacing:-.03em}
.logo span{color:var(--amarelo)}
.logo img{height:46px;width:auto;display:block}
.nav-links{display:flex;gap:26px;align-items:center}
.nav-links a{font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;color:var(--cinza-claro);transition:color .2s;font-weight:700}
.nav-links a:hover{color:var(--amarelo)}
.nav-tel{display:flex;align-items:center;gap:8px;color:var(--amarelo)!important;font-weight:900}
.menu-toggle{display:none;background:none;border:none;color:var(--branco);font-size:1.6rem;cursor:pointer}

/* ---------- HERO ---------- */
.hero{
  position:relative;
  padding:90px 0 80px;
  background:
    linear-gradient(135deg,rgba(255,255,255,.97) 0%,rgba(244,245,248,.9) 100%),
    repeating-linear-gradient(45deg,transparent,transparent 18px,rgba(43,44,64,.04) 18px,rgba(43,44,64,.04) 20px);
  overflow:hidden;
}
.hero::before{
  content:"";position:absolute;top:-40%;right:-10%;width:560px;height:560px;
  background:radial-gradient(circle,rgba(43,44,64,.08),transparent 65%);
  pointer-events:none;
}
.tag-line{
  display:inline-block;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--amarelo);font-weight:700;border:1px solid var(--borda);
  padding:7px 16px;border-radius:2px;margin-bottom:26px;
}
.hero .container{position:relative;z-index:2}
.hero-copy{max-width:560px}
/* imagem do banner como camada integrada (full-bleed à direita, sem moldura) */
.hero-media{
  position:absolute;top:50%;right:0;transform:translateY(-50%);
  height:124%;aspect-ratio:2090/2016;width:auto;max-width:60%;
  z-index:1;pointer-events:none;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 32%);
          mask-image:linear-gradient(to right,transparent 0,#000 32%);
}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:center}
.hero h1{font-size:clamp(2.3rem,7vw,4.2rem);max-width:14ch}
.hero h1 em{color:var(--amarelo);font-style:normal}
.hero p{font-size:1.1rem;color:var(--cinza-claro);max-width:46ch;margin:24px 0 36px;line-height:1.6}
.btn-row{display:flex;gap:14px;flex-wrap:wrap}
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:16px 28px;font-weight:900;text-transform:uppercase;
  letter-spacing:.05em;font-size:.85rem;border-radius:3px;
  transition:transform .15s,box-shadow .2s;cursor:pointer;border:none;
}
.btn:hover{transform:translateY(-2px)}
.btn-wpp{background:var(--verde-wpp);color:#0a2e16;box-shadow:0 8px 24px rgba(37,211,102,.28)}
.btn-amarelo{background:var(--amarelo);color:#fff;box-shadow:0 8px 24px rgba(43,44,64,.25)}
.btn-out{background:transparent;color:var(--branco);border:1.5px solid var(--cinza)}
.btn-out:hover{border-color:var(--amarelo);color:var(--amarelo)}

/* ---------- TIRA DE BENEFÍCIOS ---------- */
.beneficios{background:var(--amarelo);color:#fff}
.beneficios .container{display:flex;flex-wrap:wrap;justify-content:space-between;gap:20px;padding-top:18px;padding-bottom:18px}
.beneficio{display:flex;align-items:center;gap:10px;font-weight:800;font-size:.84rem;text-transform:uppercase;letter-spacing:.03em}
.beneficio svg{flex-shrink:0}

/* ---------- SEÇÃO ---------- */
section{padding:74px 0}
.sec-head{margin-bottom:48px}
.sec-head .kicker{color:var(--amarelo);font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;font-weight:700;display:block;margin-bottom:14px}
.sec-head h2{font-size:clamp(1.8rem,4.5vw,2.8rem)}
.sec-head h1{font-size:clamp(1.55rem,4.6vw,3rem);overflow-wrap:break-word}
.sec-head p{color:var(--cinza);max-width:60ch;margin-top:14px;font-size:1.02rem}
.breadcrumb{font-size:.78rem;color:var(--cinza);margin-bottom:18px;letter-spacing:.04em}
.breadcrumb a:hover{color:var(--amarelo)}

/* ---------- GRID EQUIPAMENTOS ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}
.card{
  background:var(--grafite);border:1px solid var(--borda);border-radius:6px;
  overflow:hidden;transition:transform .2s,border-color .2s,box-shadow .2s;
  display:flex;flex-direction:column;box-shadow:0 2px 10px rgba(43,44,64,.05);
}
.card:hover{transform:translateY(-4px);border-color:var(--amarelo);box-shadow:0 10px 28px rgba(43,44,64,.12)}
.card-img{height:180px;background:#fff;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.card-img img{width:100%;height:100%;object-fit:contain;padding:14px}
.card-img .ph{color:var(--cinza);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase}
.card-body{padding:22px;flex:1;display:flex;flex-direction:column}
.card-body h3{font-size:1.15rem;margin-bottom:8px}
.card-body p{color:var(--cinza);font-size:.88rem;flex:1;margin-bottom:18px}
.card-link{color:var(--amarelo);font-weight:800;font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;display:inline-flex;align-items:center;gap:6px}
.card.destaque{border-color:var(--amarelo)}
.card .badge{position:absolute;top:12px;left:12px;background:var(--amarelo);color:#fff;font-size:.66rem;font-weight:900;padding:4px 10px;border-radius:2px;letter-spacing:.08em;text-transform:uppercase}

/* ---------- COMO FUNCIONA ---------- */
.passos{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:30px}
.passo{position:relative;padding-top:14px}
.passo .num{font-family:'Arial Black',sans-serif;font-size:3rem;color:var(--amarelo);opacity:.18;line-height:1}
.passo h3{font-size:1.1rem;margin:10px 0 8px}
.passo p{color:var(--cinza);font-size:.92rem}

/* ---------- CTA FINAL ---------- */
.cta{
  background:linear-gradient(135deg,var(--amarelo) 0%,var(--amarelo-claro) 100%);
  color:var(--preto);text-align:center;
}
.cta h2{font-size:clamp(1.9rem,5vw,3rem);max-width:18ch;margin:0 auto 18px}
.cta p{font-size:1.05rem;max-width:44ch;margin:0 auto 32px;font-weight:600}
.cta .btn-wpp{background:var(--verde-wpp);color:#0a2e16}

/* ---------- FOOTER ---------- */
footer{background:var(--grafite);border-top:1px solid var(--borda);padding:54px 0 30px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;margin-bottom:40px}
footer h4{font-size:.78rem;text-transform:uppercase;letter-spacing:.14em;color:var(--amarelo);margin-bottom:18px}
footer p,footer a{color:var(--cinza);font-size:.9rem;line-height:1.9}
footer a:hover{color:var(--amarelo)}
.foot-bottom{border-top:1px solid var(--aco);padding-top:24px;text-align:center;color:var(--cinza);font-size:.8rem}

/* ---------- WHATSAPP FLUTUANTE ---------- */
.wpp-float{
  position:fixed;bottom:22px;right:22px;z-index:90;
  width:60px;height:60px;border-radius:50%;
  background:var(--verde-wpp);display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 20px rgba(37,211,102,.45);
  animation:pulse 2.4s infinite;
}
@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)}}

/* ---------- RESPONSIVO ---------- */
@media(max-width:760px){
  .nav-links{
    position:absolute;top:70px;left:0;right:0;
    background:var(--grafite);flex-direction:column;gap:0;
    border-bottom:1px solid var(--borda);display:none;
  }
  .nav-links.open{display:flex}
  .nav-links a{padding:16px 22px;width:100%;border-top:1px solid var(--aco)}
  .menu-toggle{display:block}
  .foot-grid{grid-template-columns:1fr;gap:30px}
  section{padding:54px 0}
  .hero{padding:48px 0 44px}
  .hero::before{display:none}
  .hero-copy{max-width:none}
  /* imagem como fundo esmaecido, texto por cima */
  .hero-media{
    position:absolute;inset:0;transform:none;
    width:100%;height:100%;max-width:none;margin:0;aspect-ratio:auto;
    -webkit-mask-image:none;mask-image:none;z-index:0;
  }
  .hero-media img{width:100%;height:100%;max-height:none;object-fit:cover;object-position:center}
  .hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.66) 0%,rgba(255,255,255,.82) 40%,rgba(255,255,255,.92) 100%)}
}

/* animação de entrada */
.reveal{opacity:0;transform:translateY(20px);animation:up .7s forwards}
@keyframes up{to{opacity:1;transform:none}}
.d1{animation-delay:.05s}.d2{animation-delay:.15s}.d3{animation-delay:.25s}

/* ---------- CARROSSEL DE CATEGORIAS ---------- */
.cat-carousel{position:relative}
.cat-track{
  display:grid;
  grid-template-rows:repeat(2,1fr);
  grid-auto-flow:column;
  grid-auto-columns:calc((100% - 36px)/3);   /* 3 colunas visíveis (gap 18px) */
  gap:18px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;          /* Firefox */
  padding-bottom:4px;
}
.cat-track::-webkit-scrollbar{display:none}
.cat-track>.card{scroll-snap-align:start;min-width:0}
.cat-arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:5;
  width:48px;height:48px;border-radius:50%;border:1px solid var(--borda);
  background:#fff;color:var(--amarelo);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 20px rgba(43,44,64,.16);
  transition:transform .15s,opacity .2s;
}
.cat-arrow:hover{transform:translateY(-50%) scale(1.08)}
.cat-arrow--prev{left:-16px}
.cat-arrow--next{right:-16px}
.cat-arrow[disabled]{opacity:.35;pointer-events:none}

@media(max-width:760px){
  .cat-track{grid-auto-columns:82%}  /* 1 coluna + prévia, arrasta */
  .cat-arrow{display:none}           /* mobile usa swipe nativo */
}