/* ================== VARIÁVEIS DE TEMA ================== */
:root{
  --blue-900:#0b2b40;
  --blue-800:#0f3d59; /* Base da logo */
  --blue-700:#154f73;
  --blue-600:#1b628e;
  --yellow:#ffd700;  /* Destaque da logo */
  --metal-300:#d7dbe0;
  --metal-200:#e7eaee;
  --metal-100:#f2f4f7;
  --text:#1e2329;
  --muted:#6b7280;
  --shadow: 0 12px 30px rgba(0,0,0,.15);
  --radius: 16px;
  --maxw: 1200px;
}

/* ================== RESET BÁSICO ================== */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,Arial,Helvetica,sans-serif;
  color:var(--text);
  background:#fff;
  line-height:1.6;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}

/* ================== NAV / HEADER FIXO ================== */
.topbar{
  position:fixed; inset:0 0 auto 0; height:74px; z-index:9999;
  background:rgba(15,61,89,.9); backdrop-filter:saturate(180%) blur(8px);
  border-bottom:1px solid rgba(255,255,255,.08);
  box-shadow: var(--shadow);
}
.nav{
  max-width:var(--maxw); margin:0 auto; height:100%;
  display:flex; align-items:center; justify-content:space-between; gap:16px; padding:0 20px;
}
.brand{display:flex; align-items:center; gap:12px}
.brand img{height:44px; width:auto}
.brand-title{color:#fff; font-weight:700; letter-spacing:.3px}
.menu{display:flex; gap:22px; align-items:center}
.menu a{
  color:#eaf4ff; font-weight:600; font-size:15px; padding:10px 6px; border-radius:10px;
  transition:.25s;
}
.menu a:hover{background:rgba(255,255,255,.08)}
.cta-nav{
  background:var(--yellow); color:#0f3d59; padding:10px 16px; border-radius:999px; font-weight:800;
  box-shadow: 0 6px 16px rgba(255,215,0,.35);
}
.hamburger{display:none; font-size:28px; color:#fff; cursor:pointer}


/* ================== HERO COM FUNDO TRABALHO ================== */
.hero{
  position:relative; min-height:100vh; display:grid; place-items:center;
  background: linear-gradient(180deg, rgba(11,43,64,.75) 0%, rgba(15,61,89,.75) 60%, rgba(11,43,64,.85) 100%);
  overflow: hidden;
}
.hero-bg-video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: 0;
  transform: translate(-50%, -50%);
  object-fit: cover;
}
.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(11,43,64,.75) 0%, rgba(15,61,89,.75) 60%, rgba(11,43,64,.85) 100%);
  z-index: 1;
}
.hero-content{
  max-width: 920px; text-align:center; padding:120px 20px 80px; color:#fff;
  position: relative; z-index: 2;
  transform: translateY(10px); opacity:0; animation:fadeInUp .9s .15s forwards;
}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 12px; border-radius:999px; background:rgba(255,255,255,.12);
  color:#e8f4ff; font-weight:700; letter-spacing:.4px; text-transform:uppercase; font-size:12px;
  border:1px solid rgba(255,255,255,.15)
}
.hero h1{
  margin:16px 0 12px; font-size: clamp(28px, 5vw, 54px); line-height:1.1; font-weight:900;
  text-shadow:0 6px 18px rgba(0,0,0,.35);
}
.hero p{
  color:#e6ecf2; font-size: clamp(16px, 2.2vw, 20px); max-width:720px; margin:0 auto 26px;
}
.hero-ctas{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}
.btn{
  display:inline-flex; align-items:center; gap:10px; padding:14px 22px; border-radius:14px; font-weight:800; letter-spacing:.3px;
  border:2px solid transparent; transition:.25s; cursor:pointer; user-select:none; text-decoration: none
}
.btn-primary{background: #25D366; color:#fff; box-shadow:0 8px 22px rgba(37,211,102,.35)}
.btn-primary:hover{transform: translateY(-1px)}
.btn-outline{background:transparent; color:#fff; border-color:#fff}
.btn-outline:hover{background:rgba(255,255,255,.08)}
.hero-badges{
  margin-top:18px; display:flex; gap:10px; justify-content:center; flex-wrap:wrap; opacity:.95
}
.badge{
  padding:6px 10px; border-radius:10px; background:rgba(255,255,255,.08); color:#f1f7ff; font-size:12px; border:1px solid rgba(255,255,255,.15)
}
  

/* ================== CONTAINERS ================== */
.section{padding:72px 20px}
.container{max-width:var(--maxw); margin:0 auto}
.section-title{text-align:center; margin-bottom:34px}
.section-title h2{font-size: clamp(22px, 3.4vw, 34px); color:var(--blue-800)}
.section-title p{color:var(--muted)}

/* ================== SERVICES ================== */
.services-grid{
  display:grid; gap:18px; grid-template-columns: repeat(12, 1fr);
}
.service-card{
  grid-column: span 4; background:linear-gradient(180deg,#ffffff 0%, #f9fbff 100%);
  border:1px solid #eef1f5; border-radius:var(--radius); padding:22px; box-shadow: var(--shadow);
  transition:.25s; position:relative; overflow:hidden;
}
.service-card:before{
  content:""; position:absolute; inset:-40% auto auto -40%; width:140px; height:140px;
  background: radial-gradient(closest-side, rgba(255,215,0,.28), transparent 72%);
  transform: rotate(25deg);
}
.service-card:hover{transform:translateY(-3px)}
.service-card h3{color:#c79b00; margin-bottom:8px; font-size:19px}
.service-card p{color:#3e4650; font-size:15.5px}
.chip{
  display:inline-block; font-size:11px; font-weight:800; letter-spacing:.4px; color:#0f3d59;
  padding:6px 10px; border-radius:999px; background:linear-gradient(180deg, #eaf2ff, #dfe8ff); border:1px solid #cfe0ff; margin-bottom:10px
}

/* ================== PORTFÓLIO ================== */
.masonry{
  columns: 3 280px; column-gap:14px;
}
.shot{
  break-inside:avoid; margin-bottom:14px; border-radius:14px; overflow:hidden; box-shadow: var(--shadow);
  border:1px solid #eef1f5; background:#fff;
}
.shot img{width:100%; height:auto; display:block; transition: .3s transform}
.shot:hover img{transform:scale(1.03)}
.shot figcaption{padding:10px 12px; font-weight:700; color:var(--blue-800); font-size:14px}

/* ================== PROCESSO ================== */
.steps{
  display:grid; grid-template-columns: repeat(4,1fr); gap:16px;
}
.step{
  background:linear-gradient(180deg,#ffffff 0%, #f7f9fb 100%); border:1px solid #eef1f5; border-radius:16px; padding:22px; box-shadow:var(--shadow);
}
.num{
  display:inline-grid; place-items:center; width:36px; height:36px; border-radius:10px;
  background:linear-gradient(180deg,#ffd700,#e4c000); color:#0f3d59; font-weight:900; margin-bottom:8px
}
.step h4{color:var(--blue-700); margin-bottom:6px}

/* ================== DEPOIMENTOS ================== */
.testimonials{
  display:grid; grid-template-columns: repeat(3,1fr); gap:16px;
}
.quote{
  background:#ffffff; border:1px solid #eef1f5; border-radius:16px; padding:22px; box-shadow: var(--shadow);
}
.stars{color:#f5b400; font-size:14px; margin-bottom:8px}

/* ================== FAQ ================== */
.faq{max-width:900px; margin:0 auto}
.faq-item{
  border:1px solid #e9eef5; border-radius:14px; margin-bottom:12px; overflow:hidden; box-shadow: var(--shadow);
}
.faq-q{
  background:#f7fbff; padding:16px 18px; font-weight:800; color:var(--blue-800); cursor:pointer
}
.faq-a{padding:16px 18px; display:none; background:#fff}

/* ================== CTA LARGA ================== */
.cta-wide{
  background: linear-gradient(90deg, var(--blue-800), var(--blue-600));
  color:#fff; border-radius:20px; padding:28px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px;
  box-shadow: var(--shadow);
}
.cta-wide h3{font-size:clamp(18px,3vw,28px)}
.cta-group{display:flex; gap:10px; flex-wrap:wrap}

/* ================== CONTATO ================== */
.contact{
  display:grid; grid-template-columns: 1.2fr .8fr; gap:18px;
}
.form{
  background:#ffffff; border:1px solid #eef1f5; border-radius:18px; padding:22px; box-shadow: var(--shadow);
}
.form h3{color:var(--blue-800); margin-bottom:6px}
.field{margin:10px 0}
.label{display:block; font-weight:700; color:#223; margin-bottom:6px}
.input,.textarea{
  width:100%; padding:14px 12px; border:1px solid #dfe6ef; border-radius:12px; background:#f9fbff; outline:none; font-size:15px;
}
.textarea{min-height:140px; resize:vertical}
.btn-send{margin-top:8px; background:var(--yellow); color:#0f3d59; font-weight:900; padding:14px 18px; border-radius:12px; border:none; cursor:pointer}
.info{
  background:linear-gradient(180deg,#ffffff 0%, #f9fbff 100%); border:1px solid #eef1f5; border-radius:18px; padding:22px; box-shadow: var(--shadow);
}
.info h4{color:var(--blue-800); margin-bottom:6px}
.info li{list-style:none; margin:10px 0; color:#2a323b}
.map{margin-top:12px; border:1px solid #e5ecf5; border-radius:14px; overflow:hidden}

/* ================== FOOTER ================== */
footer{
  background:var(--blue-900); color:#cfe2f7; padding:24px 20px; margin-top:30px; border-top:1px solid rgba(255,255,255,.08)
}
.foot{
  max-width:var(--maxw); margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap
}
.foot a{color:#ffd700; font-weight:700}

/* ================== FLOAT WHATS ================== */
.wa-float{
  position:fixed; right:18px; bottom:18px; width:56px; height:56px; border-radius:999px; background:#25D366;
  display:grid; place-items:center; color:#fff; font-size:26px; box-shadow:0 10px 28px rgba(37,211,102,.45); z-index:9999
}

/* ================== MOBILE ================== */
@media (max-width: 980px){
  .services-grid .service-card{grid-column: span 6}
  .steps{grid-template-columns: repeat(2,1fr)}
  .testimonials{grid-template-columns: 1fr}
  .contact{grid-template-columns: 1fr}
}
@media (max-width: 760px){
  .menu{display:none}
  .hamburger{display:block}
  .masonry{columns: 1 280px}
  .services-grid .service-card{grid-column: span 12}
  .hero-ctas{flex-direction:column}
}

/* ================== ANIMAÇÕES ================== */
@keyframes fadeInUp{to{transform:translateY(0);opacity:1}}
.reveal{opacity:0; transform:translateY(20px)}
.reveal.show{opacity:1; transform:translateY(0); transition:.6s cubic-bezier(.2,.8,.2,1)}
.btn-more {
  display: inline-block;
  margin-top: 10px;
  padding: 8px 14px;
  background: var(--primary, #c79b00);
  color: #0e0e0e;
  text-decoration: none;
  font-weight: 600;
  border-radius: 6px;
  transition: background 0.3s;
}

.btn-more:hover {
  background: #a01830;
}
.masonry figure {
  text-align: center; /* Centraliza legenda e botão */
}

.masonry figcaption {
  display: block;
  font-weight: 600;
  margin: 10px 0;
  font-size: 1.1rem;
}
.btn-more {
  display: inline-block;
  margin-top:8px;
  padding: 8px 16px;
  background: #c79b00; /* vermelho WQ */
  color: #000000;
  font-weight: 600;
  border-radius: 8px;
  text-decoration: none;
  transition: 0.3s;
}

.btn-more:hover {
  background: #a01830;
}
.highlight { color: #c79b00; } /* substitua #FF6600 pela cor que quiser */

/* Esconde o menu no mobile */
#dropdownMenu {
  display: flex;
  gap: 20px;
}

.hamburger {
  display: none;
  cursor: pointer;
  font-size: 1.8rem;
}

/* Mobile */
@media (max-width: 768px) {
  #dropdownMenu {
    display: none; /* Esconde por padrão */
    flex-direction: column;
    background: #333;
    position: absolute;
    top: 60px;
    right: 0;
    width: 200px;
    padding: 10px;
    border-radius: 5px;
  }

  #dropdownMenu a {
    color: #fff;
    text-decoration: none;
    padding: 8px 0;
  }

  .hamburger {
    display: block;
  }

  #dropdownMenu.show {
    display: flex;
  }
}