/* =======================
      VARIÁVEIS E RESET
======================= */
:root{
  --bg:#f5f5f5; --text:#333; --muted:#555;
  --primary:#485862; --accent:#007bff;
  --success:#28a745; --accent-2:#f39c12;
  --shadow:rgba(0,0,0,.10);
}
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:"Segoe UI",Roboto,Arial,sans-serif;line-height:1.6;color:var(--text);background:var(--bg);}

/* =======================
          HEADER
======================= */
header{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 24px;background:#fff;position:sticky;top:0;z-index:1100;
  box-shadow:0 2px 14px rgba(0,0,0,.04);
}
/* Efeito de Zoom ao passar o mouse na logo do Menu*/
header .logo img {transition: transform 0.4s ease, filter 0.4s ease;}
header .logo img:hover {transform: scale(1.12);}
/* FIM DO EFEITO*/

.logo img{height:50px;width:auto;display:block;}

.menu ul{display:flex;gap:20px;list-style:none;align-items:center;}
.menu a, nav ul li a{
  text-decoration:none;font-weight:600;padding:6px 8px;color:#485862;
  transition:.3s ease;
}
nav ul li a{
  display:inline-block;position:relative;color:#fff;
}
.menu a:hover, nav ul li a:hover{transform:scale(1.12);color:#76c04e;}
nav ul li a::after{
  content:"";position:absolute;bottom:-4px;left:0;width:0;height:2px;
  background:#76c04e;transition:.3s ease;
}
nav ul li a:hover::after{width:100%;}

/* =======================
         HERO + SLIDES
======================= */
.hero{
  position:relative;height:500px;display:flex;align-items:center;
  justify-content:center;text-align:center;overflow:hidden;
}
.carousel{
  position:absolute;top:0;left:0;width:100%;height:100%;
}
.carousel-slide{
  position:absolute;width:100%;height:100%;display:none;
  opacity:0;transition:opacity .6s ease-in-out;
}
.carousel-slide.active{display:block;opacity:1;}
.carousel-slide img{
  width:100%;height:100%;object-fit:cover;
}
.hero-text{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);z-index:5;max-width:980px;
  color:#fff;text-align:center;padding:0 20px;
}
.hero-text h1{font-size:2.6rem;margin-bottom:12px;letter-spacing:.4px;}
.hero-text p{font-size:1.05rem;margin-bottom:18px;color:rgba(255,255,255,.9);}

/* =======================
          ANIMAÇÕES
======================= */
@keyframes slideUpFade{0%{opacity:0;transform:translateY(40px);}100%{opacity:1;transform:translateY(0);}}
@keyframes zoomInSoft{0%{opacity:0;transform:scale(.85);}100%{opacity:1;transform:scale(1);}}
@keyframes softPulse{0%,100%{transform:scale(1);}50%{transform:scale(1.06);}}
@keyframes pulse{0%{transform:scale(1);}50%{transform:scale(1.15);}100%{transform:scale(1);}}

/* Brilho */
.glow{
  animation:ultraGlow 1.6s ease-in-out infinite;
}
@keyframes ultraGlow{
  0%,100%{text-shadow:0 0 10px #fff,0 0 25px #fff,0 0 45px rgba(255,255,255,.9),0 0 80px rgba(255,255,255,.8);}
  50%{text-shadow:0 0 18px #fff,0 0 45px #fff,0 0 75px #fff;}
}

/* Slide 3 alinhado à esquerda */
.carousel-slide.left .hero-text{
  left:6%;transform:translateY(-50%);text-align:left;max-width:520px;
  animation:zoomInSoft 2s ease forwards;
}
.carousel-slide.left .hero-text h1{animation:zoomInSoft 1.4s ease forwards,softPulse 3s infinite;}
.carousel-slide.left .hero-text p{animation:slideUpFade 1.3s ease forwards;}
.carousel-slide.left .hero-text a{animation:slideUpFade 1.6s ease forwards;}
.carousel-slide.left .hero-text *{color:#76c04e;}

@media(max-width:900px){
  .carousel-slide.left .hero-text{
    left:50%;transform:translate(-50%,-50%);text-align:center;max-width:90%;
  }
}

/* Slide 2 centralizado */
.carousel-slide.center .hero-text{
  left:50%!important;top:50%;transform:translate(-50%,-50%)!important;
  text-align:center;width:80%;max-width:800px;
}
.carousel-slide.center.active .hero-text h1{
  animation:slideUpFade 1.2s ease forwards,zoomInSoft 1.6s ease forwards,softPulse 2.5s ease infinite;
}

/* Botões */
.carousel-prev,.carousel-next{
  position:absolute;top:50%;transform:translateY(-50%);
  background:rgba(0,0,0,.4);color:#fff;border:0;padding:10px 18px;
  border-radius:6px;cursor:pointer;font-size:1.5rem;z-index:10;
}
.carousel-prev{left:10px;} .carousel-next{right:10px;}

/* =======================
            SOBRE
======================= */
section{padding:60px 18px;text-align:center;}
h2{font-size:1.9rem;margin-bottom:28px;color:var(--text);font-weight:800;}

.sobre-container{
  max-width:1200px;margin:0 auto;background:#fff;padding:44px 36px;
  border-radius:14px;box-shadow:0 18px 40px var(--shadow);position:relative;
}
.sobre-container::before{
  content:"";position:absolute;top:-20px;left:50%;
  width:80px;height:6px;background:var(--success);border-radius:6px;
  transform:translateX(-50%) scaleX(0);transition:.6s;
}
.sobre-container:hover::before{transform:translateX(-50%) scaleX(1);}
.sobre p{color:var(--muted);font-size:1.05rem;line-height:1.8;}

/* =======================
     CARDS / PRODUTOS
======================= */
.produtos{padding:40px 18px;}
.servicos{padding:20px 18px 40px;}
.cards-container{
  display:flex;flex-wrap:wrap;gap:22px;justify-content:center;
  max-width:1200px;margin:0 auto;padding:6px 8px;
}
.card{
  background:#fff;padding:28px 18px;border-radius:12px;
  box-shadow:0 10px 30px var(--shadow);flex:1 1 240px;max-width:320px;
  text-align:center;transition:.28s;
}
.card:hover{transform:translateY(-6px);box-shadow:0 22px 48px rgba(0,0,0,.12);}
.card-bar{
  position:absolute;top:14px;left:50%;width:70px;height:6px;
  background:var(--success);border-radius:6px;
  transform:translateX(-50%) scaleX(0);transition:.5s;
}
.card:hover .card-bar{transform:translateX(-50%) scaleX(1);}

/* =======================
      POR QUE ESCOLHER
======================= */
.porque-grid{
  max-width:1100px;margin:0 auto;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:18px;
}
.feature{
  background:#fff;padding:22px;border-radius:12px;
  box-shadow:0 10px 30px var(--shadow);text-align:center;
}

/* =======================
         DEPOIMENTOS
======================= */
.testimonials{display:flex;align-items:center;gap:12px;justify-content:center;max-width:900px;margin:0 auto;}
.test-items{width:720px;overflow:hidden;position:relative;}
.test-item{
  display:none;padding:18px 22px;background:#fff;border-radius:10px;
  box-shadow:0 12px 30px var(--shadow);color:var(--muted);
}
.test-item.active{display:block;}

/* =======================
              CTA
======================= */
.cta-box{
  max-width:980px;margin:0 auto;background:#fff;padding:28px;
  border-radius:12px;box-shadow:0 20px 50px rgba(0,0,0,.07);
  display:flex;gap:24px;align-items:center;justify-content:space-between;flex-wrap:wrap;
}
.btn-cta{padding:12px 18px;border-radius:10px;font-weight:800;}

/* =======================
           FORMULÁRIO
======================= */
.contato form{max-width:640px;margin:0 auto;text-align:left;}
.contato label{display:block;margin:12px 0 6px;font-weight:700;}
.contato input,.contato textarea{
  width:100%;padding:10px 12px;border-radius:8px;border:1px solid #ddd;
}
.contato button{
  margin-top:14px;padding:12px 18px;border-radius:8px;
  background:var(--primary);color:#fff;border:0;cursor:pointer;
}

/* =======================
            FOOTER
======================= */
.site-footer{
  background:var(--primary);color:#eee;padding:36px 18px 18px;
}
.footer-top{
  max-width:1200px;margin:0 auto;display:flex;gap:40px;align-items:flex-start;
}
.footer-logo img{height:55px;transition:.4s;transition: transform 0.3s ease, filter 0.3s ease;}
.footer-logo img:hover{filter:drop-shadow(0 0 6px rgba(255,255,255,.4));transform:scale(1.06);}
.footer-logo:hover{transform:rotate(360deg);}
.footer-container{display:flex;gap:40px;}
.footer-col{flex:1;min-width:200px;}
.footer-col h4{color:#fff;margin-bottom:10px;}

.footer-bottom{
  margin-top:26px;text-align:center;color:#e4e4e4;font-size:.95rem;
  border-top:1px solid rgba(255,255,255,.15);padding-top:12px;
}
@media(max-width:768px){
  .footer-top{flex-direction:column;text-align:center;}
  .footer-container{justify-content:center;}
  .footer-col{min-width:100%;}
}

/* =======================
           WHATSAPP CTA
======================= */
.cta-box-interno{text-align:center;margin-top:40px;}
.btn-whatsapp{
  font-size:.95rem;padding:8px 16px;border-radius:8px;background:#25D366;
  color:#fff;font-weight:600;display:inline-flex;align-items:center;gap:6px;
  box-shadow:0 6px 18px rgba(0,0,0,.12);transition:.18s;margin-top:24px;
}
.btn-whatsapp:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(0,0,0,.15);}

/* Social icons */
.social-icons a{margin:0 6px;display:inline-block;transition:.3s;font-size:28px; /* Aumenta o tamanho dos ícones */color:#ffffff; /* branco padrão */}
.social-icons a.facebook:hover{color:#1877F2;animation:pulse .8s infinite;}
.social-icons a.instagram:hover{color:#E4405F;animation:pulse .8s infinite;}
.social-icons a.whatsapp:hover{color:#25D366;animation:pulse .8s infinite;}
.social-icons a.youtube:hover{color:#FF0000;animation:pulse .8s infinite;}




/* ===========================
     TÍTULOS SEÇÕES ANIMADOS
=========================== */
section h2 {
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--primary);
  margin-bottom: 30px;
  text-transform: uppercase;
  letter-spacing: 1px;
  position: relative;
  display: inline-block;
  padding-bottom: 10px;

  /* Inicialmente fora da tela */
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s ease-out;
}

/* Barra decorativa abaixo do título */
section h2::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 60px;
  height: 4px;
  background: var(--accent);
  border-radius: 4px;
  transform: translateX(-50%);
  transition: all 0.3s ease;
}

/* Hover da barra */
section h2:hover::after {
  width: 100px;
  background: var(--success);
}

/* Classe que ativa animação */
section h2.animate-in {
  opacity: 1;
  transform: translateY(0);
}

/* Responsivo */
@media (max-width: 768px) {
  section h2 {
    font-size: 1.8rem;
    letter-spacing: 0.5px;
  }
  section h2::after {
    width: 50px;
  }
}