/* ============================================================
   MWCM Engenharia – style_home.css  (versão completa)
   ============================================================ */

/* --- Variáveis --- */
:root {
  --primary:      #fe4a23;
  --primary-dark: #df3b14; /* Tom levemente mais escuro para o efeito de "hover" (passar o mouse) */
  --dark:         #111827;
  --dark-mid:     #1f2937;
  --grey:         #6b7280;
  --light-bg:     #f3f4f6;
  --white:        #ffffff;
  --border:       #e5e7eb;
}

/* --- Reset --- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html  { scroll-behavior: smooth; }
body  { font-family: 'Montserrat', sans-serif; color: var(--dark-mid); line-height: 1.6; background: var(--white); }
img   { max-width: 100%; height: auto; display: block; }
ul    { list-style: none; }
a     { text-decoration: none; color: inherit; }

.wrapper { width: 90%; max-width: 1200px; margin: 0 auto; }
.clear   { clear: both; }

/* --- Utilitários --- */
.text-center    { text-align: center; }
.text-uppercase { text-transform: uppercase; }
.fw-500{font-weight:500}.fw-600{font-weight:600}.fw-700{font-weight:700}
.white{color:var(--white)}.dark{color:var(--dark)}.grey{color:var(--grey)}
.pb-5{padding-bottom:2.5rem}.pt-0{padding-top:0!important}.py-5{padding:2.5rem 0}
.p-5{padding:2rem}.mb-1{margin-bottom:.4rem}.my-1{margin:.4rem 0}
.fs-14{font-size:.875rem}.fs-16{font-size:1rem}.fs-18{font-size:1.125rem}
.fs-20{font-size:1.25rem}.fs-32{font-size:2rem}.fs-38{font-size:2.375rem}
.letter-spacing-4{letter-spacing:.25rem}
.d-block{display:block}.d-flex{display:flex}.align-items-center{align-items:center}
.justify-content-center{justify-content:center}.flex-column{flex-direction:column}
.gap-20{gap:1.25rem}.gap-10{gap:.625rem}
.position-relative{position:relative}.z-5{position:relative;z-index:5}

/* --- Botões --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .75rem 1.75rem; border-radius: 4px; font-weight: 700; font-size: .9rem;
  transition: .3s; cursor: pointer; border: 2px solid transparent; letter-spacing: .03em;
}
.btn--primary { background:var(--primary); color:var(--white); border-color:var(--primary); }
.btn--primary:hover { background:var(--primary-dark); border-color:var(--primary-dark); }
.btn--transparent { background:transparent; color:var(--white); border-color:var(--white); }
.btn--transparent:hover { background:var(--white); color:var(--dark); }
.btn--blue { background:var(--primary); color:var(--white); border-color:var(--primary); }
.btn--blue:hover { background:var(--primary-dark); border-color:var(--primary-dark); }
.btn--light { background:var(--white); color:var(--primary); border-color:var(--white); }
.btn--light:hover { background:transparent; color:var(--white); }

/* ============================================================  HEADER  ============================================================ */
.site-header { background:var(--white); box-shadow:0 2px 8px rgba(0,0,0,.08); position:sticky; top:0; z-index:1000; }
.header-inner { display:flex; align-items:center; justify-content:space-between; padding:.9rem 0; gap:1rem; }
.logo { font-size:1.4rem; font-weight:800; text-transform:uppercase; color:var(--dark); white-space:nowrap; }
.logo span { color:var(--primary); }

#menu { display:flex; align-items:center; }
#menu > ul { display:flex; gap:0; align-items:center; }
#menu > ul > li { position:relative; }
#menu > ul > li > a { display:block; padding:.9rem .85rem; font-size:.83rem; font-weight:600; color:var(--dark-mid); transition:color .2s; white-space:nowrap; }
#menu > ul > li > a:hover { color:var(--primary); }
#menu > ul > li.dropdown:hover > .sub-menu { display:block; }
.sub-menu { display:none; position:absolute; top:100%; left:0; background:var(--white); min-width:220px; box-shadow:0 8px 20px rgba(0,0,0,.12); border-top:3px solid var(--primary); z-index:500; }
.sub-menu li a { display:block; padding:.55rem 1rem; font-size:.82rem; font-weight:500; color:var(--dark-mid); border-bottom:1px solid var(--border); transition:.2s; }
.sub-menu li a:hover { background:var(--light-bg); color:var(--primary); padding-left:1.3rem; }
.header-cta { flex-shrink:0; }
.mobile-menu-toggle { display:none; }

/* ============================================================  BANNER  ============================================================ */
.slick-banner { background-image:var(--background); background-size:cover; background-position:center; position:relative; min-height:520px; display:flex; align-items:center; }
.slick-banner::before { content:''; position:absolute; inset:0; background:linear-gradient(to right,rgba(17,24,39,.88) 55%,rgba(17,24,39,.45)); }
.banner-inner { position:relative; z-index:2; width:90%; max-width:1200px; margin:0 auto; padding:5rem 0; }
.banner-col-text { max-width:60%; }
.banner-pretitle { font-size:.9rem; font-weight:600; color:var(--primary); text-transform:uppercase; letter-spacing:.15rem; margin-bottom:.5rem; }
.banner-title { font-size:clamp(2.5rem,6vw,5.5rem); font-weight:800; color:var(--white); text-transform:uppercase; line-height:1.05; margin-bottom:.5rem; }
.banner-subtitle { font-size:1rem; font-weight:600; color:rgba(255,255,255,.85); letter-spacing:.05rem; margin-bottom:2rem; }
.banner-btns { display:flex; gap:1rem; flex-wrap:wrap; }
.fade { opacity:0; animation:fadeSlideIn .8s forwards; }
.fade-left { transform:translateX(-30px); }
.delay-750  { animation-delay:.75s; }
.delay-1000 { animation-delay:1s; }
@keyframes fadeSlideIn { to { opacity:1; transform:translate(0); } }

/* ============================================================  CONTAINER BASE  ============================================================ */
.container { padding:4rem 0; }
.container.pt-0 { padding-top:0; }
.container.bg-cta { padding:4rem 0; }
.section-title { font-size:1.75rem; font-weight:700; margin-bottom:.5rem; }
.section-subtitle { text-align:justify; font-size:.9rem; color:var(--grey); margin-bottom:3rem; }

/* ============================================================  ENGENHEIRO  ============================================================ */
.eng-grid {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 4rem;
  align-items: center;
}
.eng-foto-wrap { position:relative; }
.eng-foto-card { position:relative; border-radius:16px; overflow:visible; }
.eng-foto {
  width: 100%; max-width:380px; height:480px; object-fit:cover; object-position:top;
  border-radius:16px;
  box-shadow: 0 20px 40px rgba(0,0,0,.15);
}
.eng-badge {
  position: absolute;
  bottom: -20px;
  left: 20px;
  background: var(--dark);
  color: var(--white);
  border-radius: 12px;
  padding: 1rem 1.3rem;
  text-align: center;
  box-shadow: 0 8px 20px rgba(0,0,0,.25);
}
.eng-badge-num { display:block; font-size:2rem; font-weight:800; color:var(--primary); line-height:1; }
.eng-badge-txt { display:block; font-size:.75rem; font-weight:600; margin-top:.2rem; color:rgba(255,255,255,.8); }

.eng-pretitle { font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.15rem; color:var(--primary); margin-bottom:.8rem; }
.eng-titulo { font-size:clamp(2rem,4vw,3rem); font-weight:800; color:var(--dark); line-height:1.15; margin-bottom:1.5rem; }
.eng-texto p { color:var(--grey); font-size:.93rem; margin-bottom:.8rem; line-height:1.75; text-align: justify; }
.eng-texto p strong { color:var(--dark-mid); }
.eng-list { margin-top:1.2rem; list-style:none; }
.eng-list li { display:flex; align-items:center; gap:.5rem; font-size:.9rem; font-weight:600; color:var(--dark); margin-bottom:.5rem; }
.eng-list li i { color:var(--primary); font-size:1rem; }

/* ============================================================  CERTIFICADO  ============================================================ */
.cert-section {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 3rem;
  align-items: start;
  margin-bottom: 2.5rem;
}
.cert-titulo { font-size:clamp(1.6rem,3vw,2.2rem); font-weight:800; color:var(--dark); line-height:1.25; margin-top:.8rem; }
.cert-conteudo p { color:var(--grey); font-size:.93rem; line-height:1.75; }
.cert-conteudo p strong { color:var(--dark-mid); }
.cert-diploma-wrap { text-align:center; margin-top:2.5rem; }
.cert-diploma {
  width:100%; max-width:760px; margin:0 auto;
  border-radius:12px; box-shadow:0 12px 32px rgba(0,0,0,.15);
  border:1px solid var(--border);
}

/* ── Widget Elfsight / Fallback de avaliações ────────────────── */
/* Quando o widget Elfsight carrega ele injeta .elfsight-widget-loaded no body.
   Usamos isso para esconder o carrossel manual. */
.elfsight-widget-loaded .aval-fallback { display: none; }
[class^="elfsight-app-"] { display:block; max-width:100%; }

/* ============================================================  MVV  ============================================================ */
.grid-col-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.card-mvv { background:var(--white); border-radius:8px; border:1px solid var(--border); text-align:center; position:relative; overflow:hidden; transition:transform .3s,box-shadow .3s; }
.card-mvv:hover { transform:translateY(-6px); box-shadow:0 12px 30px rgba(0,0,0,.1); }
.card-mvv h2 { font-size:1.5rem; margin:1rem 0 .5rem; }
.card-mvv p { color:var(--grey); font-size:.88rem; text-align: justify; }
.mvv-icon-top { color:var(--primary)!important; }
.mvv-icon-center { position:absolute; font-size:7rem!important; opacity:.04; bottom:-20px; right:-10px; color:var(--dark)!important; }

/* ============================================================  SERVIÇOS  ============================================================ */
.grid-col-2 { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:1.5rem; }
.card--servico { background:var(--white); border-radius:8px; border:1px solid var(--border); overflow:hidden; transition:transform .3s,box-shadow .3s; }
.card--servico:hover { transform:translateY(-6px); box-shadow:0 12px 30px rgba(0,0,0,.1); }
.card--servico > img { width:100%; height:180px; object-fit:cover; }
.card--servico .card--content { padding:1.2rem 1.5rem 1.5rem; }
.card--servico h2 { font-size:1rem; text-transform:uppercase; color:var(--dark); margin-bottom:.6rem; }
.card--servico p { font-size:.85rem; color:var(--grey); margin-bottom:.8rem; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; text-align: justify; }
.card-link { font-size:.83rem; font-weight:700; color:var(--primary); text-transform:uppercase; letter-spacing:.03em; transition:color .2s; }
.card-link:hover { color:var(--primary-dark); }

/* ============================================================  PROJETOS  ============================================================ */
.projeto-item {
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border);
  transition: transform 0.3s, box-shadow 0.3s;
}
.projeto-item:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.1);
}
.projeto-item img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  object-position: bottom;
  display: block;
}

/* ============================================================  CTA  ============================================================ */
.bg-cta { background:var(--primary); }
.bg-cta h2 { color:var(--white); font-size:1.6rem; font-weight:700; margin-bottom:1.5rem; max-width:700px; margin-left:auto; margin-right:auto; text-align:center; }

/* ============================================================  AVALIAÇÕES  ============================================================ */
.avaliacoes-pretitle { font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.15rem; color:var(--dark); margin-bottom:.8rem; }
.avaliacoes-titulo { font-size:clamp(1.8rem,3.5vw,2.6rem); font-weight:800; color:var(--dark); line-height:1.2; margin-bottom:2.5rem; }

.avaliacoes-row { display:flex; gap:2.5rem; align-items:flex-start; flex-wrap:wrap; }

.avaliacoes-gmn {
  flex-shrink:0; width:200px;
  border:1px solid var(--border); border-radius:8px;
  padding:1.5rem; text-align:center;
}
.gmn-logo { display:flex; align-items:center; gap:.8rem; margin-bottom:.8rem; text-align:left; }
.gmn-icon {
  width:48px; height:48px; border-radius:8px;
  background:var(--primary); color:var(--white);
  display:flex; align-items:center; justify-content:center; font-size:1.4rem; flex-shrink:0;
}
.gmn-logo strong { font-size:.82rem; line-height:1.3; color:var(--dark); }
.gmn-stars { color:#fbbc04; font-size:1rem; margin-bottom:.3rem; }
.gmn-count { font-size:.78rem; color:var(--grey); margin-bottom:1rem; }
.btn-gmn {
  display:block; width:100%; padding:.6rem .8rem; border:1px solid var(--border); border-radius:6px;
  font-size:.8rem; font-weight:600; color:var(--dark); text-align:center; transition:.2s;
}
.btn-gmn:hover { border-color:var(--primary); color:var(--primary); }

.avaliacoes-carousel-wrap { flex:1; min-width:0; display:flex; align-items:center; gap:.5rem; overflow:hidden; position:relative; }
.avaliacoes-carousel { display:flex; gap:1.25rem; transition:transform .4s ease; }
.aval-arrow {
  background:var(--white); border:1px solid var(--border); border-radius:50%;
  width:36px; height:36px; font-size:1.4rem; cursor:pointer; display:flex; align-items:center;
  justify-content:center; transition:.2s; flex-shrink:0; color:var(--dark);
}
.aval-arrow:hover { background:var(--primary); color:var(--white); border-color:var(--primary); }

.aval-card { flex:0 0 220px; background:var(--white); border:1px solid var(--border); border-radius:10px; padding:1.2rem; }
.aval-header { display:flex; align-items:center; gap:.6rem; margin-bottom:.6rem; }
.aval-avatar { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:1rem; flex-shrink:0; }
.aval-header > div strong { display:block; font-size:.82rem; color:var(--dark); }
.aval-tempo { font-size:.72rem; color:var(--grey); }
.aval-google { margin-left:auto; color:#4285f4; font-size:1.1rem; }
.aval-stars { color:#fbbc04; font-size:.85rem; margin-bottom:.5rem; }
.aval-texto { font-size:.83rem; color:var(--grey); line-height:1.5; text-align: justify; }

/* ============================================================  LOGOS CLIENTES  ============================================================ */
.logos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 1.5rem;
  align-items: center;
  padding: 1rem 0;
}
.logo-item img { max-height:70px; width:auto; margin:0 auto; filter:grayscale(100%); opacity:.6; transition:.3s; }
.logo-item img:hover { filter:none; opacity:1; }
.logo-placeholder {
  display: flex; flex-direction:column; align-items:center; justify-content:center;
  height: 80px; border:2px dashed var(--border); border-radius:8px;
  color:var(--grey); font-size:.78rem; gap:.4rem; transition:.3s;
}
.logo-placeholder i { font-size:1.5rem; color:var(--border); }
.logo-placeholder:hover { border-color:var(--primary); color:var(--primary); }
.logo-placeholder:hover i { color:var(--primary); }

/* ============================================================  LOCALIZAÇÃO  ============================================================ */
.mapa-grid { display:grid; grid-template-columns:1fr 1.8fr; gap:2.5rem; align-items:start; }
.mapa-info { display:flex; flex-direction:column; gap:1.2rem; }
.mapa-info-item { display:flex; align-items:flex-start; gap:.9rem; }
.mapa-info-item > i { width:36px; height:36px; border-radius:8px; background:var(--primary); color:var(--white); display:flex; align-items:center; justify-content:center; font-size:.9rem; flex-shrink:0; margin-top:.1rem; }
.mapa-info-item strong { display:block; font-size:.83rem; font-weight:700; color:var(--dark); margin-bottom:.2rem; }
.mapa-info-item p { font-size:.85rem; color:var(--grey); line-height:1.5; }
.mapa-info-item a { color:var(--primary); font-weight:600; }
.mapa-redes { display:flex; flex-wrap:wrap; gap:.6rem; margin-top:.5rem; }
.rede-btn { display:inline-flex; align-items:center; gap:.4rem; padding:.5rem .9rem; border-radius:6px; font-size:.8rem; font-weight:700; color:var(--white); transition:.2s; }
.rede-fb { background:#1877f2; } .rede-fb:hover { background:#0c5abf; }
.rede-tg { background:#229ed9; } .rede-tg:hover { background:#1284b5; }
.rede-yt { background:#ff0000; } .rede-yt:hover { background:#cc0000; }
.mapa-iframe iframe { width:100%; border-radius:8px; }

/* ============================================================  DIFERENCIAIS  ============================================================ */
.card-group { display:flex; flex-wrap:wrap; gap:1rem; }
.card { flex:1 1 180px; border-radius:8px; overflow:hidden; border:1px solid var(--border); background:var(--white); transition:.3s; }
.card:hover { transform:translateY(-4px); box-shadow:0 8px 20px rgba(0,0,0,.08); }
.card__image { width:100%; height:140px; object-fit:cover; }
.card__description { padding:.8rem 1rem; }
.card__title { font-size:.88rem; font-weight:600; color:var(--dark); }

/* ============================================================  RODAPÉ  ============================================================ */
footer { background:var(--dark); color:var(--white); padding:3.5rem 0 1rem; }
.footer-row { display:grid; grid-template-columns:1.5fr 1fr 1.5fr; gap:2rem; padding-bottom:2.5rem; border-bottom:1px solid rgba(255,255,255,.12); margin-bottom:1.5rem; }
.footer-brand .logo { font-size:1.3rem; font-weight:800; text-transform:uppercase; color:var(--white); }
.footer-brand .logo span { color:var(--primary); }
.footer-brand p { color:rgba(255,255,255,.6); font-size:.85rem; margin-top:.5rem; }
.footer-social { display:flex; gap:.6rem; margin-top:1rem; }
.social-icon { width:36px; height:36px; border-radius:8px; display:flex; align-items:center; justify-content:center; color:var(--white); font-size:.9rem; transition:.2s; }
.social-fb { background:#1877f2; } .social-fb:hover { background:#0c5abf; }
.social-tg { background:#229ed9; } .social-tg:hover { background:#1284b5; }
.social-yt { background:#ff0000; } .social-yt:hover { background:#cc0000; }
.social-wa { background:#25d366; } .social-wa:hover { background:#1da851; }

footer h3 { font-size:.83rem; text-transform:uppercase; letter-spacing:.1rem; color:var(--white); margin-bottom:1rem; }
.footer-nav ul { display:flex; flex-direction:column; gap:.4rem; }
.footer-nav a { font-size:.85rem; color:rgba(255,255,255,.65); transition:color .2s; }
.footer-nav a:hover { color:var(--primary); }
.footer-contact address { font-style:normal; }
.footer-contact address span, .footer-contact address a { display:block; font-size:.85rem; color:rgba(255,255,255,.65); margin-bottom:.5rem; transition:color .2s; }
.footer-contact address a:hover { color:var(--primary); }
.footer-bottom { text-align:center; font-size:.8rem; color:rgba(255,255,255,.35); }

/* ============================================================  RESPONSIVIDADE  ============================================================ */
@media (max-width:1024px) {
  .eng-grid { grid-template-columns:1fr; }
  .eng-foto { max-width:100%; height:400px; }
  .cert-section { grid-template-columns:1fr; }
  .grid-col-3 { grid-template-columns:1fr 1fr; }
  .footer-row { grid-template-columns:1fr 1fr; }
  .footer-row > div:first-child { grid-column:1 / -1; }
  .mapa-grid { grid-template-columns:1fr; }
}
@media (max-width:768px) {
  .site-header { position:relative; }
  .header-inner { flex-wrap:wrap; padding:.8rem 0; gap:.5rem; justify-content: space-between; align-items: stretch; }
  .logo { order: 1; flex-shrink: 0; align-self: center; }
  .header-cta { order: 2; flex-shrink: 0; margin-left: auto; display: flex; }
  .header-cta .btn { padding-left: 1rem; padding-right: 1rem; border-radius: 6px; }
  .mobile-menu-toggle { display:flex; order:3; align-items:center; justify-content:center; background:var(--light-bg); border:2px solid var(--border); color:var(--dark); font-size:1.2rem; border-radius:6px; padding:0 1rem; cursor:pointer; margin-left:.5rem; }
  #menu { order:4; width:100%; display:none; background:var(--white); margin-top:.5rem; padding-top:.5rem; border-top:1px solid var(--border); }
  #menu.active { display:block; }
  #menu > ul { flex-direction:column; align-items:stretch; gap:0; }
  #menu > ul > li > a { padding:.8rem 1rem; font-size:.9rem; border-bottom:1px solid var(--light-bg); }
  .sub-menu { display:none!important; }
  .banner-col-text { max-width:100%; }
  .banner-title { font-size:2.2rem; }
  .banner-btns { flex-direction:column; }
  .grid-col-3 { grid-template-columns:1fr; }
  .grid-col-2 { grid-template-columns:1fr; }
  .footer-row { grid-template-columns:1fr; }
  .eng-grid { gap:3rem; }
  .eng-foto { height:320px; }
  .avaliacoes-row { flex-direction:column; }
  .avaliacoes-gmn { width:100%; }
  .logos-grid { grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); }
}