:root{
      --gray:#d7d7d7; --text:#eaeaea; --gold:#BD8121; --gold-2:#d8a45a; --black:#0a0a0a;
    }

* {
  box-sizing:border-box;
} 

html {
  scroll-behavior:smooth;
}
    
body {
  margin:0;
  font-family:"DM Sans",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--gray);
  background:var(--black);
}
    
img{max-width:100%;display:block;}
    .container{width:min(1200px,92%);margin-inline:auto}
    .btn{display:inline-block;padding:.9rem 1.25rem;border-radius:.75rem;text-decoration:none;font-weight:700}
    .btn-primary{background:linear-gradient(135deg,var(--gold),var(--gold-2));color:#111}
    .btn-outline{border:2px solid var(--gold);color:var(--gold); background-color: #000;}
    .section{padding:64px 0}
    .section h2{font-size: clamp(1.6rem,2.2vw,2.25rem);margin:0 0 12px;color:#fff}
    .section .lead{color:#bdbdbd;margin:8px 0 24px}
    /* Alternância preto/branco */
    .section.alt{background:#ffffff;color:#fff}
    .section.alt h2{color:#000}
    .section.alt .lead{color:#4d4d4d}
    /* Topbar */
    /* Topbar (refactor) */
    .topbar{background:#000;color:#cfcfcf;font-size:.9rem;border-bottom:1px solid #1b1b1b}
    .topbar-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:8px 0}
    .tb-left{display:flex;align-items:center;gap:12px;flex-wrap:wrap;min-width:0}
    .tb-right{display:flex;align-items:center;gap:10px}
    .tb-item{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
    .tb-sep{opacity:.45}
    .icon{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:999px;background:#111;border:1px solid #1f1f1f;color:#d9d9d9}
    .icon:hover{color:#000;background:linear-gradient(135deg,var(--gold),var(--gold-2));border-color:#2a2a2a}
    @media(max-width:900px){.topbar-row{flex-direction:column;align-items:flex-start}.tb-right{align-self:flex-end}}

    .topbar{background:#000;color:#cfcfcf;font-size:.9rem;border-bottom:1px solid #1b1b1b}
    .topbar .row{display:flex;gap:16px;align-items:center;justify-content:space-between;padding:8px 0;flex-wrap:wrap}
    .topbar .top-left{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
    .topbar .item{white-space:nowrap}
    .topbar .sep{opacity:.5;margin:0 6px}
    .social .icon, .footer-grid .social .icon, .icon.whatsapp{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:999px;background:#111;border:1px solid #1f1f1f;color:#d9d9d9;margin-right:8px;transition:all .2s}
    .icon.whatsapp{background:#0f0f0f}
    .social .icon:hover, .footer-grid .social .icon:hover, .icon.whatsapp:hover{color:#000;background:linear-gradient(135deg,var(--gold),var(--gold-2));border-color:#2a2a2a}
    /* Header */
    header{position:sticky;top:0;background:#0d0d0d;border-bottom:1px solid #1a1a1a;z-index:50}
    
    nav{display:flex;align-items:center;justify-content:space-between;padding:10px 0;gap:12px}
    
    .logo{display:flex;align-items:center;gap:0;text-decoration:none}
    .logo img{height:60px;width:auto}

    .brand-title {
      font-weight:800;
      color:#fff;
    }
    
    .menu {
      display:flex;
      gap:22px;
      align-items:center;
      flex-wrap:wrap;
    }
    
    .menu a {
      color:#dcdcdc;
      text-decoration:none;
      font-weight:600;
      font-size: 14px;
      white-space: nowrap;
    }
    
    .menu a:hover{color:var(--gold)}
    
    .burger{display:none;flex-direction:column;gap:4px;cursor:pointer}
    
    .burger span{width:24px;height:2px;background:#fff}
    
    .theme-toggle{background: linear-gradient(135deg,var(--gold),var(--gold-2)); border: none; color: #000; font-weight:700; border-radius: 999px; width: 36px; height: 36px; display: grid; place-items: center; cursor: pointer; margin-left:12px}
    
    @media (max-width: 900px){
      .menu{display:none;position:fixed;inset:64px 0 0 0;background:#0e0e0e;padding:24px;flex-direction:column;gap:18px;border-top:1px solid #1a1a1a}
      .menu.open{display:flex}
      .burger{display:flex}
    }

    /* Botão Whatsapp */
    .btn-whatsapp {
      display:inline-flex;
      align-items:center;
      gap:6px;
      padding: .55rem .9rem; /* menor */
      font-weight:600;
      border-radius:10px;
      background:#0f0f0f;
      border:1px solid var(--gold);
      color:var(--gold);
      font-size:.9rem;
    }

    .btn-whatsapp svg {
      width:16px;
      height:16px;
      fill:var(--gold);
    }

    .btn-whatsapp:hover {
      background:linear-gradient(135deg,var(--gold),var(--gold-2));
      color:#000;
      border-color:transparent;
    }

    .btn-whatsapp:hover svg {
      fill:#000;
    }

    /* Hero */
    .hero{position:relative;isolation:isolate;color:#fff;background:#0a0a0a url('../images/banner-01.png') center/cover no-repeat}
    .hero::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.55));z-index:0}
    .hero > .container{position:relative;z-index:1}
    .hero .container{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:center;min-height:64svh;padding:56px 0}
    .badge{display:inline-block;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);padding:6px 10px;border-radius:999px;margin-bottom:10px;color:#e7e7e7}
    .hero h1{font-size:clamp(2rem,4.2vw,3.25rem);line-height:1.1;margin:0 0 10px}
    .hero p{color:#cecece;margin:0 0 24px}
    .hero .card{background:#0f0f0f;border:1px solid #1a1a1a;border-radius:16px;padding:18px}
    .hero .grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
    .hero .tile{background:#0b0b0b;border:1px solid #1a1a1a;border-radius:12px;padding:14px}
    .hero .tile b{color:#fff}
    .hero-title .hero-line{
      display:block;           /* força cada span virar uma linha */
    }

    .hero-title .hero-gold{
      color: var(--gold);
      white-space: nowrap;     /* mantém “soluções estratégicas” sempre na mesma linha */
      font-weight: 800;
    }

    @media (max-width:900px){.hero .container{grid-template-columns:1fr}}
    /* Features */
    .features{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
    .feature{border:1px solid #1a1a1a;border-radius:16px;padding:22px;background:#0f0f0f;transition:transform .2s}
    .feature:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(0,0,0,.25)}
    .feature h3{margin:8px 0;color:#bd8121}
    @media (max-width:900px){.features{grid-template-columns:1fr}}
    /* About */
    .about{display:grid;grid-template-columns:1fr 1.1fr;gap:28px;align-items:center}
    .about .img{aspect-ratio:4/3;border-radius:18px;background: url('../images/img-sobrenos.jpg') center/cover no-repeat; border:1px solid #1a1a1a}
    .about .card{border:1px solid #1a1a1a;border-radius:16px;padding:18px;background:#0f0f0f}
    @media (max-width:900px){.about{grid-template-columns:1fr}}
    /* CTA */
    .cta{position:relative;color:#fff;background:linear-gradient(135deg,#141414,#0c0c0c);overflow:hidden;border-radius:20px;border:1px solid #1a1a1a}
    .cta .inner{padding:48px 28px;display:grid;grid-template-columns:1.2fr .8fr;gap:24px;align-items:center}
    .cta .bg{position:absolute;inset:0;background:url('../images/bg-slide2.jpg') center/cover no-repeat;opacity:.18;z-index:0}
    .cta .content{position:relative;z-index:1}
    .cta h3{margin:0 0 10px;font-size:clamp(1.6rem,2.4vw,2.2rem)}
    .cta p{margin:0 0 16px;color:#eaeaea}
    @media (max-width:900px){.cta .inner{grid-template-columns:1fr}}
    /* Services */ 
    .services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
    .service{border:1px solid #1a1a1a;border-radius:16px;padding:18px;background:#0f0f0f}

    .service:hover {
      transform: scale(1.03);
      box-shadow: 0 12px 28px rgba(0,0,0,.35);
      border-color: var(--gold);
      cursor: pointer;
    }

    .service:hover h4 {
      color: var(--gold);
      font-weight: 800;
    }

    .service h4{margin:6px 0 8px;color:#fff}
    .service p{margin:0;color:#bdbdbd}

    @media (max-width:900px){.services-grid{grid-template-columns:1fr}}
    /* Clients */
    .clients{background:#0e0e0e;border-block:1px solid #1a1a1a}
    .logo-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:18px;align-items:center}
    .logo-card {
      position: relative;
      background: transparent; /* sem fundo interno */
      border: 1px solid #2a2a2a; /* borda padrão discreta */
      border-radius: 14px;
      display: grid;
      place-items: center;
      aspect-ratio: 3/2;
      opacity: .85;
      overflow: hidden;
      transition: transform 0.25s ease, opacity 0.25s ease, border-color 0.3s ease;
    }

    .logo-card img {
      max-width: 80%;
      max-height: 70%;
      z-index: 1;
    }

/* borda dourada pura e fina no hover */
.logo-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid transparent;
  background: linear-gradient(135deg, var(--gold), var(--gold-2)) border-box;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.logo-card:hover::before {
  opacity: 1;
}

.logo-card:hover {
  opacity: 1;
  transform: translateY(-2px);
  border-color: transparent; /* esconde a borda cinza */
}

@media (max-width:1100px){.logo-grid{grid-template-columns:repeat(4,1fr)}}

@media (max-width: 768px) {
  /* Permite que a altura acompanhe o conteúdo real */
  .logo-slides {
    align-items: flex-start;
  }

  .logo-slide {
    height: auto !important;
    min-height: 0 !important;
  }

  /* Remove qualquer respiro artificial */
  .logo-slider {
    padding-bottom: 0 !important;
  }
}

@media (max-width:700px){.logo-grid{grid-template-columns:repeat(2,1fr)}}

/* Clients (slider) */
.logo-slider{position:relative;overflow:hidden;margin-top:10px; transition: height 0.25s ease;}
.logo-slides{display:flex;transition:transform .4s ease-in-out;will-change:transform}
.logo-slide{min-width:100%;padding-block:6px}

/* Controles */
.slider-controls{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:14px}
.slider-btn{background:#0f0f0f;border:1px solid #1a1a1a;border-radius:999px;width:38px;height:38px;display:grid;place-items:center;color:#d9d9d9;cursor:pointer}
.slider-btn:hover{color:#000;background:linear-gradient(135deg,var(--gold),var(--gold-2));border-color:#2a2a2a}
.slider-dots{display:flex;gap:8px;align-items:center}
.slider-dot{width:8px;height:8px;border-radius:999px;background:#2a2a2a;border:1px solid #3a3a3a}
.slider-dot[aria-current="true"]{background:linear-gradient(135deg,var(--gold),var(--gold-2));border-color:transparent}

/* Testimonials */
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.testi{border:1px solid #1a1a1a;border-radius:16px;padding:18px;background:#0f0f0f}
.stars{background:linear-gradient(135deg,var(--gold),var(--gold-2));-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:800}
@media (max-width:900px){.testi-grid{grid-template-columns:1fr}}
/* Counters */
.counters{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.counter {
  border:1px solid #1a1a1a;
  border-radius:16px;
  padding:22px;
  background:#0f0f0f;
  text-align:center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.counter .num{font-size:2rem;color:#fff;font-weight:800;background:linear-gradient(135deg,var(--gold),var(--gold-2));-webkit-background-clip:text;background-clip:text;color:transparent; line-height: 1.1;}
.counter p{margin:6px 0 0;color:#bdbdbd}
.counter .plus {
  font-weight: 800;
  margin-right: 4px;
}

.counter .count {
  font-weight: 800;
}

@media (max-width:900px){.counters{grid-template-columns:1fr}}
/* Contact */
.contact{display:grid;grid-template-columns:1.1fr .9fr;gap:28px}
form label{display:block;font-weight:600;margin:10px 0 6px;color:#fff}
input,textarea{width:100%;padding:12px 14px;border:1px solid #bd8121;border-radius:12px;font:inherit;background:#fff;color:#2a2a2a}
textarea{min-height:130px;resize:vertical}
.info{border:1px solid #1a1a1a;border-radius:16px;padding:18px;background:#0f0f0f; color: #fff;} 
.info a{color:var(--white);text-decoration:none}
.map{width:100%;aspect-ratio:16/9;border:0;border-radius:16px;filter:grayscale(.2)}
@media (max-width:900px){.contact{grid-template-columns:1fr}}
/* Footer */
footer{background:#000;color:#bdbdbd;padding:28px 0;margin-top:0px;border-top:1px solid #1a1a1a}
.footer-grid{display:grid;grid-template-columns:2fr 2fr 1.4fr;gap:24px;padding:14px 0 10px}
.footer-grid h4{margin:0 0 8px;color:#bd8121}
.footer-bottom{display:flex;justify-content:space-between;gap:12px;align-items:center;border-top:1px solid #1a1a1a;padding:10px 0 0 0;margin-top:8px}
footer a{color:#bdbdbd;text-decoration:none}
footer a:hover{color:#fff}
@media(max-width:900px){.footer-grid{grid-template-columns:1fr}.footer-bottom{flex-direction:column;align-items:flex-start}}
/* Light mode */
body.light{background:#fff;color:#222}
body.light header, body.light footer{background:#fff;color:#222;border-color:#e5e5e5}
body.light .section:not(.alt){background:#fff;color:#222}
body.light .section.alt{background:#0a0a0a;color:#eaeaea}
body.light .section.alt h2{color:#fff}

#contato {
  position: relative;
  background: url('../images/bg-contato.jpg') center/cover no-repeat;
  color: #fff;
  isolation: isolate;
}
#contato::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 0;
}
#contato > .container {
  position: relative;
  z-index: 1;
}

/* Store badges in footer */
.footer-store-badges img { height: 42px; width: auto; transition: transform 0.25s ease; }
.footer-store-badges img:hover { transform: scale(1.05); }

/* Imagem dentro do box info na seção contato */
.info-img {
  margin-top: 24px;
  display: flex;
  justify-content: center;
}

.info-img img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
}


/* Cascata - Services */
.services-grid .service{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .55s ease, transform .55s ease;
  will-change: opacity, transform;
}

.services-grid .service.in{
  opacity: 1;
  transform: translateY(0);
}

/* Respeita usuários com redução de movimento */
@media (prefers-reduced-motion: reduce){
  .services-grid .service{
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.hero-title .hero-line:first-child {
  font-size: 0.75em;      /* diminui a primeira linha */
  font-weight: 500;
  opacity: 0.9;
}

.hero-title .hero-gold {
  font-size: 1.15em;      /* destaca a frase principal */
  font-weight: 800;
  color: var(--gold);
}

/* Hero - ajustes mobile */
@media (max-width: 900px){
  .hero .container{
    text-align: center;
  }

  /* centraliza o bloco de botões */
  .hero .container > div > div[style*="display:flex"]{
    justify-content: center;
  }

  /* título: centralizado e sem estourar */
  .hero h1{
    margin-left: auto;
    margin-right: auto;
  }

  /* deixa o dourado caber na tela */
  .hero-title .hero-gold{
    white-space: normal !important; /* libera quebra no mobile */
    font-size: 1.05em;              /* reduz um pouco */
  }
}