/* ===== M7TI – style.css (versão completa, paleta oficial) =====
   Paleta (Manual de Marca):
   - Navy   #2A344E
   - Orange #F58634
   - Green  #A8CF45
   - Gray   #E6E7E8
   - White  #FFFFFF
   Tipografia: Inter (texto), Montserrat (títulos)
   Frameworks: Bootstrap 5.3, Animate.css, Bootstrap Icons
*/

/* ===================== ROOT / VARIÁVEIS ===================== */
:root{
  /* Paleta do manual */
  --brand-navy:#2A344E;
  --brand-orange:#F58634;
  --brand-green:#A8CF45;
  --brand-gray:#E6E7E8;
  --brand-white:#FFFFFF;

  /* Base visual */
  --bg-1:#F6F8FB;       /* fundo geral claro com leve contraste */
  --text:#111827;       /* texto principal */
  --muted:#6B7280;      /* texto secundário */

  /* Variáveis auxiliares M7 */
  --m7-service-carousel-h: 260px;
  --m7-border: rgba(0,0,0,.08);
  --m7-shadow: 0 10px 30px rgba(15,23,42,.25);
  --m7-navy: var(--brand-navy);

  /* Mapeamento para Bootstrap */
  --bs-primary: var(--brand-navy);
  --bs-secondary: var(--muted);
  --bs-success: var(--brand-green);
  --bs-warning: var(--brand-orange);
  --bs-info:#5AA7E6;
  --bs-danger:#E03A3A;
  --bs-body-color: var(--text);
  --bs-body-bg: var(--bg-1);
  --bs-link-color: var(--brand-navy);
  --bs-link-hover-color: #1b2233;
}

/* ===================== RESET BÁSICO ===================== */
*{box-sizing:border-box}
html,body{height:100%}
body{
  background: var(--bg-1);
  color:var(--text);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.fw-800{font-weight:800}
.fw-600{font-weight:600}

/* ===================== NAVBAR ===================== */
.page-wrap{padding-top:84px}
.navbar{
  background:#fff !important;
  border-bottom:1px solid rgba(0,0,0,.06);
}
.navbar .nav-link{color:#334155}
.navbar .nav-link:hover{color:var(--brand-navy)}
.navbar .nav-link.active{
  color:var(--brand-navy) !important;
  position:relative;
}
.navbar .nav-link.active::after{
  content:"";
  position:absolute;
  left:.5rem;
  right:.5rem;
  bottom:.35rem;
  height:3px;
  border-radius:3px;
  background: var(--brand-green);
}

/* ===================== BG DECORATIVO (GRID) ===================== */
.bg-grid{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
}
.bg-grid-light{
  background-image:
    radial-gradient(1px 1px at 20% 30%, rgba(0,0,0,.05) 50%, transparent 51%),
    linear-gradient(transparent 96%, rgba(0,0,0,.04) 98%),
    linear-gradient(90deg, transparent 96%, rgba(0,0,0,.04) 98%);
  background-size: 120px 120px, 40px 40px, 40px 40px;
}

/* ===================== HERO / CAROUSEL ===================== */
.hero-carousel .carousel-item{
  height: 72vh;
  min-height: 520px;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  background-color:#0f0f0f; /* fallback enquanto carrega */
  position: relative;
}
.hero-dim{
  position:absolute;
  inset:0;
  --hero-dim-a: .16;
  background: linear-gradient(180deg,
              rgba(0,0,0,var(--hero-dim-a)),
              rgba(0,0,0, calc(var(--hero-dim-a) + .12)));
}
.hero-caption{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
}
.hero-caption .content{ max-width: 760px; }
.hero-caption h1{
  color:#f8fbff;
  text-shadow:0 6px 24px rgba(0,0,0,.35);
  font-family: Montserrat, Inter, sans-serif;
}
.hero-caption p{ color:#eef5fb; }

/* Indicadores e setas visíveis em fotos claras */
.carousel-indicators [data-bs-target]{ background-color: rgba(255,255,255,.9); }
.carousel-control-prev-icon,
.carousel-control-next-icon{ filter: drop-shadow(0 2px 4px rgba(0,0,0,.4)); }

/* ===================== TÍTULOS / SEÇÕES ===================== */
.section{ padding:4.5rem 0; }
.section-title{
  font-family: Montserrat, Inter, sans-serif;
  font-weight:800;
  letter-spacing:.4px;
  color:var(--brand-navy);
}

/* ===================== BOTÕES ===================== */
.btn{
  transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.btn:active{
  transform:translateY(1px) scale(.99);
}

/* Força link-botão a não herdar cor do a:hover global */
a.btn,
a.btn:link,
a.btn:visited{
  color:inherit;
}
a.btn:hover,
a.btn:focus{
  color:inherit;
}

.btn-primary{
  background: var(--brand-navy);
  border-color: var(--brand-navy);
  color:#fff;
}
.btn-primary:hover{filter:brightness(1.05)}

.btn-outline-primary{
  border-color: var(--brand-navy);
  color: var(--brand-navy);
}
.btn-outline-primary:hover{
  background:var(--brand-navy);
  color:#fff;
}

.btn-success{
  background: var(--brand-green);
  border-color: var(--brand-green);
  color:#0e2c00;
}
.btn-success:hover{filter:brightness(1.04)}

.btn-warning{
  background: var(--brand-orange);
  border-color: var(--brand-orange);
  color:#2b1400;
}
.btn-warning:hover{filter:brightness(1.04)}

.btn-soft{
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  color:#111827;
}
.btn-soft:hover{
  border-color:rgba(0,0,0,.16);
  transform:translateY(-1px);
}

/* CTA primário – verde, sólido (corporativo) */
.btn-gradient{
  background: var(--brand-green);
  color:#0e2c00;
  border:none;
  box-shadow:0 10px 24px rgba(168,207,69,.25);
}
.btn-gradient:hover,
.btn-gradient:focus{
  background:#97BE3D;              /* mesmo verde, só mais escuro */
  color:#0c2300;
  box-shadow:0 16px 36px rgba(168,207,69,.35);
  transform:translateY(-2px);
}

/* ===================== LOGO ===================== */
.brand-logo{
  width:auto;
  height: 104px;
  object-fit:contain;
}
@media (max-width: 420px){
  .navbar-brand .brand-logo{height: 80px;}
}

/* ===================== CARDS DE SERVIÇO ===================== */
.service-card{
  background:#fff;
  border:1px solid var(--brand-gray);
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 12px 36px rgba(17,24,39,.08);
  transition:transform .35s cubic-bezier(.2,.8,.2,1),
             box-shadow .35s,
             border-color .35s;
}
.service-card:hover{
  transform:translateY(-6px) scale(1.01);
  box-shadow:0 22px 70px rgba(17,24,39,.18);
  border-color: rgba(42,52,78,.35); /* navy */
}
.service-thumb{
  height:180px;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
}
.service-body{
  padding:1.25rem 1.25rem 1.5rem;
}
.service-body h5{
  font-family: Montserrat, Inter, sans-serif;
  font-weight:800;
  color:var(--brand-navy);
}
.service-body p{
  color:var(--muted);
}

/* Botão nos cards – usa o mesmo verde, já controlado em .btn-gradient */

/* Stretched-link mais estável (evita flicker de hover) */
.service-card .stretched-link{
  position:relative;
  z-index:1;
}
.service-card .stretched-link::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
}

/* ===================== LINKS ===================== */
a{
  color: var(--brand-navy);
}
a:hover{
  color:#1b2233; /* navy um pouco mais escuro */
}

/* ===================== FOOTER ===================== */
footer{
  background:#fff;
  border-top:1px solid var(--brand-gray);
}
footer .hover-up{
  transition:transform .15s ease, color .15s ease;
}
footer .hover-up:hover{
  transform:translateY(-2px);
  color:var(--brand-navy) !important;
}

/* ===================== REVEAL (SCROLL) ===================== */
.reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .7s ease, transform .7s ease;
}
.reveal.visible{
  opacity:1;
  transform:none;
}

/* ===================== RESPONSIVO ===================== */
@media (max-width: 992px){
  .hero-carousel .carousel-item{ height: 64vh; }
}
@media (max-width: 576px){
  .hero-carousel .carousel-item{ min-height: 520px; }
  .hero-caption h1{ font-size: 1.9rem }
  .btn-lg{
    padding:.6rem 1rem;
    font-size:1rem;
  }
}

/* ======== PATCH 1: padroniza o enquadramento das imagens ======== */
#carManutencao .carousel-item,
#carOutsourcing .carousel-item,
#carRedes .carousel-item,
#carMonitoramento .carousel-item{
  height: var(--m7-service-carousel-h);
}

#carManutencao .carousel-item > img,
#carOutsourcing .carousel-item > img,
#carRedes .carousel-item > img,
#carMonitoramento .carousel-item > img{
  width: 100%;
  height: 100%;
  object-fit: cover;       /* preenche sem distorcer */
  object-position: center; /* foca o centro por padrão */
  display: block;
}

/* ======== PATCH 2: remove o gradiente lateral do Bootstrap nas setas ======== */
#carManutencao .carousel-control-prev,
#carManutencao .carousel-control-next,
#carOutsourcing .carousel-control-prev,
#carOutsourcing .carousel-control-next,
#carRedes .carousel-control-prev,
#carRedes .carousel-control-next,
#carMonitoramento .carousel-control-prev,
#carMonitoramento .carousel-control-next{
  background: transparent !important; /* mata o fade lateral */
  width: 48px;
  height: 48px;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 999px;
  border: 1px solid var(--m7-border);
  box-shadow: var(--m7-shadow);
  background-color: #fff;  /* botão em círculo, limpo */
  opacity: 1;
}

/* esconde os ícones “imagem de fundo” padrão e usa setas simples */
#carManutencao .carousel-control-prev-icon,
#carOutsourcing .carousel-control-prev-icon,
#carRedes .carousel-control-prev-icon,
#carMonitoramento .carousel-control-prev-icon,
#carManutencao .carousel-control-next-icon,
#carOutsourcing .carousel-control-next-icon,
#carRedes .carousel-control-next-icon,
#carMonitoramento .carousel-control-next-icon{
  background-image: none;
  width: 0;
  height: 0; /* some com o default */
}

/* desenha as setas via pseudo-elemento */
#carManutencao .carousel-control-prev::after,
#carOutsourcing .carousel-control-prev::after,
#carRedes .carousel-control-prev::after,
#carMonitoramento .carousel-control-prev::after,
#carManutencao .carousel-control-next::after,
#carOutsourcing .carousel-control-next::after,
#carRedes .carousel-control-next::after,
#carMonitoramento .carousel-control-next::after{
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--m7-navy);
  border-bottom: 2px solid var(--m7-navy);
  margin: auto;
  transform: rotate(-135deg);
}

#carManutencao .carousel-control-next::after,
#carOutsourcing .carousel-control-next::after,
#carRedes .carousel-control-next::after,
#carMonitoramento .carousel-control-next::after{
  transform: rotate(45deg);
}
/* Botão principal do HERO (Fale com especialista) – já usa .btn-gradient */

/* Botão secundário do HERO (Saiba mais) – outline verde */
.hero-caption .btn-soft{
  background:#ffffff;
  color:var(--brand-navy);
  border:2px solid var(--brand-green);
  box-shadow:0 6px 18px rgba(0,0,0,.10);
  transition: all .20s ease;
}

/* Hover – mesmíssima cor, apenas + escuro */
.hero-caption .btn-soft:hover,
.hero-caption .btn-soft:focus{
  background:var(--brand-green);
  color:#0c2300;
  border-color:#97BE3D;
  transform:translateY(-2px);
  box-shadow:0 12px 28px rgba(168,207,69,.35);
}
/* ===== AJUSTE FINO DOS BOTÕES DO HERO ===== */

/* Botão verde – Fale com especialista */
.hero-caption .btn-gradient{
  background: var(--brand-green);
  color:#0e2c00;
  border:none;
  box-shadow:0 10px 24px rgba(168,207,69,.25);
}

.hero-caption .btn-gradient:hover,
.hero-caption .btn-gradient:focus{
  background:#B7DD5F; /* verde UM TOM MAIS CLARO */
  color:#0e2c00;
  box-shadow:0 16px 32px rgba(168,207,69,.35);
  transform:translateY(-2px);
}

/* Botão branco – Saiba mais */
.hero-caption .btn-soft{
  background:#ffffff;
  color:var(--brand-navy);
  border:1px solid var(--brand-gray);
  box-shadow:0 6px 18px rgba(0,0,0,.10);
  transition: all .20s ease;
}

.hero-caption .btn-soft:hover,
.hero-caption .btn-soft:focus{
  background:#E6E7E8;      /* cinza claro, um tom acima do branco */
  border-color:#cbd0d4;    /* cinza um pouco mais forte na borda */
  color:var(--brand-navy); /* mantém o texto legível */
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(0,0,0,.16);
}
/* ===== BOTÃO WHATSAPP HARMONIZADO ===== */
.btn-whatsapp{
  background:#25D366; /* verde oficial do WhatsApp */
  color:#063b1c;
  border:none;
  box-shadow:0 6px 18px rgba(0,0,0,.15);
  transition: all .18s ease;
}

/* Hover mais suave, elegante e coerente com o restante */
.btn-whatsapp:hover,
.btn-whatsapp:focus{
  background:#1ebe57; /* ~10% mais escuro/fechado */
  color:#043015;
  box-shadow:0 10px 28px rgba(0,0,0,.25);
  transform:translateY(-2px);
}
/* ===== AJUSTE GLOBAL DOS BOTÕES WHATSAPP (.btn-success) ===== */

/* Estado normal: verde da marca */
.btn-success{
  background: var(--brand-green) !important;
  border-color: var(--brand-green) !important;
  color:#0e2c00 !important;
  box-shadow:0 8px 20px rgba(168,207,69,.26);
  filter:none !important;
}

/* Hover: MESMA COR, só um tom mais claro */
.btn-success:hover,
.btn-success:focus{
  background:#B7DD5F !important;         /* ~15% mais claro que o brand-green */
  border-color:#B7DD5F !important;
  color:#0e2c00 !important;
  transform:translateY(-2px);
  box-shadow:0 10px 28px rgba(168,207,69,.34);
  filter:none !important;
}

.navbar .nav-link.active {
  position: relative;
  display: inline-block; /* garante que o after siga a largura do texto */
}

.navbar .nav-link.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -.2rem; /* ajusta a distância */
  height: 3px;
  background: var(--brand-green);
  border-radius: 3px;
  width: 100%; /* underline exatamente do tamanho do texto */
  margin: 0 auto;
}