/* =========================
RESET
========================= */

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  font-family:'Inter',sans-serif;
  color:#e8f8ed;
  background:#04210f; /* Fundo base em Verde Profundo */
  line-height:1.6;
  overflow-x:hidden;
}

img{
  max-width:100%;
  display:block;
}

a{
  text-decoration:none;
  color:inherit;
}

ul{
  list-style:none;
}


/* =========================
VARIÁVEIS - PALETA DE VERDES PREMIUM
========================= */

:root{
  --verde-escuro-profundo: #04210f;
  --verde-escuro: #09381a;
  --verde-medio: #0e5227;
  --verde-vibrante: #16803c;
  --verde-brilho: #22a653;
  --verde-neon: #3cd671;
  --verde-menta: #e8f8ed;

  --cinza-texto: #e2e8f0;
  --branco: #ffffff;

  /* Sombras Modernas, Glows e Efeitos */
  --sombra-card: 0 15px 35px rgba(0, 0, 0, 0.25);
  --sombra-hover: 0 20px 40px rgba(0, 0, 0, 0.4);
  --glow-verde: 0 0 25px rgba(34, 166, 83, 0.45);
  --glow-branco: 0 0 20px rgba(255, 255, 255, 0.25);
  --glow-branco-intenso: 0 0 30px rgba(255, 255, 255, 0.5);

  /* Bordas Gradientes */
  --borda-gradiente: linear-gradient(135deg, rgba(255,255,255,0.4), rgba(34, 166, 83, 0.2));
  --borda-gradiente-hover: linear-gradient(135deg, #3cd671, #ffffff);
}


/* =========================
CONTAINER E SEÇÕES COM SEPARADORES CURVOS
========================= */

.container{
  width:90%;
  max-width:1200px;
  margin:auto;
}

/* Divisores de Seção Curvos/Sutis */
.secao-curva{
  position: relative;
}

.secao-curva::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background-color: inherit;
  mask-image: radial-gradient(100% 50px at 50% 100%, transparent 99%, #000 100%);
  -webkit-mask-image: radial-gradient(100% 50px at 50% 100%, transparent 99%, #000 100%);
  z-index: 2;
}


/* =========================
TÍTULOS E BARRAS DIVISÓRIAS
========================= */

.titulo{
  text-align:center;
  margin-bottom:50px;
}

.titulo h2{
  font-family:'Montserrat',sans-serif;
  font-size:2.5rem;
  font-weight:800;
  color: var(--branco);
  margin-bottom:15px;
  letter-spacing:-0.5px;
  position:relative;
  display:inline-block;
  text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

/* Barra Divisória em Gradiente Destaque */
.titulo h2::after{
  content:'';
  display:block;
  width:80px;
  height:5px;
  background: linear-gradient(90deg, var(--verde-neon), var(--verde-brilho), var(--branco));
  margin:12px auto 0;
  border-radius:3px;
  box-shadow: var(--glow-verde);
}

.titulo p{
  opacity: 0.9;
  max-width:700px;
  margin:auto;
  font-size:1.05rem;
  color: var(--verde-menta);
}


/* =========================
HEADER
========================= */

.header{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  z-index:1000;
  background: rgba(4, 33, 15, 0.85);
  backdrop-filter:blur(16px);
  box-shadow:0 4px 30px rgba(0, 0, 0, 0.3);
  border-bottom:1px solid rgba(60, 214, 113, 0.2);
}

.header-content{
  height:90px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.logo img{
  width:110px;
  filter: drop-shadow(var(--glow-branco));
}

.brand{
  display:flex;
  align-items:center;
  gap:18px;
}

.header-slogan{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:8px 18px;
  border-left:3px solid var(--verde-neon);
  font-family:'Montserrat',sans-serif;
  font-size:.95rem;
  font-weight:700;
  color:var(--verde-menta);
  text-align:left;
  max-width:240px;
  line-height:1.3;
}

.menu{
  display:flex;
  align-items:center;
  gap:35px;
}

.menu a{
  font-weight:600;
  font-size:.95rem;
  color:var(--verde-menta);
  transition:.3s ease;
  position:relative;
}

.menu a:hover{
  color:var(--verde-neon);
  text-shadow: var(--glow-verde);
}

.menu-mobile{
  display:none;
  font-size:30px;
  cursor:pointer;
  color:var(--verde-neon);
}


/* =========================
BOTÕES GRADIENTES PREMIUM
========================= */

.btn-primary{
  display:inline-block;
  background: linear-gradient(135deg, var(--verde-neon) 0%, var(--verde-vibrante) 100%);
  color: var(--verde-escuro-profundo);
  padding:15px 32px;
  border-radius:30px;
  font-weight:800;
  transition:all .35s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 8px 25px rgba(34, 166, 83, 0.4);
  border: 1px solid rgba(255,255,255,0.4);
  position: relative;
  overflow: hidden;
}

.btn-primary:hover{
  background: linear-gradient(135deg, #52e383 0%, var(--verde-brilho) 100%);
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 14px 30px rgba(60, 214, 113, 0.6), var(--glow-branco);
  color: #000;
}

.btn-secondary{
  display:inline-block;
  border:2px solid var(--branco);
  color:var(--branco);
  padding:13px 30px;
  border-radius:30px;
  font-weight:700;
  transition:all .35s cubic-bezier(0.4, 0, 0.2, 1);
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter:blur(8px);
  box-shadow: var(--glow-branco);
}

.btn-secondary:hover{
  background:var(--branco);
  color:var(--verde-escuro-profundo);
  transform:translateY(-4px);
  box-shadow: 0 10px 30px rgba(255, 255, 255, 0.4), var(--glow-branco-intenso);
}


/* =========================
WHATSAPP FLOAT
========================= */

.whatsapp-float{
  position:fixed;
  right:25px;
  bottom:25px;
  width:60px;
  height:60px;
  z-index:999;
  filter: drop-shadow(0 10px 15px rgba(0,0,0,0.5)) drop-shadow(var(--glow-verde));
  transition:.3s ease;
}

.whatsapp-float:hover{
  transform:scale(1.15) rotate(8deg);
}

.whatsapp-float img{
  width:100%;
}


/* ========================================================
   ALTER NÂNCIA DINÂMICA DE CORES DE FUNDO (RITMO VISUAL)
======================================================== */

/* 1. HERO (FUNDO ESCURO PROFUNDO) */
.hero{
  height:100vh;
  min-height:650px;
  background-image:url("images/ocean.jpeg");
  background-size:cover;
  background-position:center;
  display:flex;
  align-items:center;
  position:relative;
}

.hero-overlay{
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(4, 33, 15, 0.92) 0%, rgba(9, 56, 26, 0.85) 100%);
}

.hero-content{
  position:relative;
  z-index:2;
  color:white;
  max-width:800px;
}

.hero h1{
  font-family:'Montserrat',sans-serif;
  font-size:4.2rem;
  font-weight:800;
  letter-spacing:-1px;
  margin-bottom:10px;
  text-shadow:0 4px 20px rgba(0,0,0,0.6);
}

.hero h2{
  font-size:1.9rem;
  margin-bottom:20px;
  font-weight:700;
  color:var(--verde-neon);
  text-shadow: var(--glow-verde);
}

.hero p{
  font-size:1.15rem;
  max-width:650px;
  opacity:0.95;
}

.hero-buttons{
  display:flex;
  gap:20px;
  margin-top:35px;
}

.hero-beneficios{
  display:flex;
  gap:25px;
  margin-top:45px;
  flex-wrap:wrap;
}

.hero-beneficios div{
  background:rgba(255, 255, 255, 0.07);
  border:1px solid rgba(255, 255, 255, 0.2);
  padding:12px 20px;
  border-radius:30px;
  font-size:.9rem;
  backdrop-filter:blur(10px);
  box-shadow: var(--glow-branco);
  transition: .3s ease;
}

.hero-beneficios div:hover{
  border-color: var(--verde-neon);
  transform: translateY(-3px);
  box-shadow: var(--glow-verde);
}

.hero-beneficios span{
  color:var(--verde-neon);
  font-weight:bold;
}


.destaque-content{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
}

.destaque h3{
  font-family:'Montserrat',sans-serif;
  font-size:1.6rem;
  margin-bottom:8px;
}

.destaque p{
  opacity:.9;
}

.destaque a{
  background:white;
  color:var(--verde-escuro-profundo);
  padding:14px 28px;
  border-radius:30px;
  font-weight:800;
  transition:.35s ease;
  white-space:nowrap;
  box-shadow: var(--glow-branco);
}

.destaque a:hover{
  transform:translateY(-4px);
  box-shadow: var(--glow-branco-intenso);
  background: var(--verde-menta);
}


/* 3. ESPECIALIDADES (FUNDO ESCURO COM CARTÕES ELEVADOS) */
.servicos{
  padding:110px 0;
  background: var(--verde-escuro-profundo);
  color: white;
}

.servicos-content{
  display:grid;
  grid-template-columns:2fr 1fr;
  gap:50px;
  align-items:start;
  margin-top:40px;
}

/* Cartões com Float e Bordas Ativas */
.servicos-texto{
  font-size:1.05rem;
  color:#eafaf0;
  line-height:1.9;
  background: rgba(9, 56, 26, 0.6);
  backdrop-filter: blur(12px);
  padding:40px;
  border-radius:24px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: var(--sombra-card), var(--glow-branco);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.servicos-texto:hover {
  transform: translateY(-8px);
  border-color: var(--verde-neon);
  box-shadow: var(--sombra-hover), var(--glow-verde);
}

.servicos-texto p{
  margin-bottom:22px;
}

.servicos-destaques{
  background: linear-gradient(145deg, rgba(14, 82, 39, 0.8), rgba(4, 33, 15, 0.9));
  backdrop-filter: blur(16px);
  color:#fff;
  padding:40px;
  border-radius:24px;
  box-shadow: var(--sombra-card), var(--glow-branco);
  position:sticky;
  top:120px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.4s ease;
}

.servicos-destaques:hover {
  border-color: var(--branco);
  box-shadow: var(--sombra-hover), var(--glow-branco-intenso);
}

.servicos-destaques h3{
  font-family:'Montserrat',sans-serif;
  font-size:1.5rem;
  margin-bottom:25px;
  border-bottom:3px solid var(--verde-neon);
  padding-bottom:10px;
}

.servicos-destaques li{
  margin-bottom:18px;
  font-size:1rem;
  line-height:1.6;
  display:flex;
  align-items:center;
  gap:10px;
}


/* 4. ATENDIMENTO (QUEM ATENDEMOS - FUNDO VERDE MÉDIO) */
.atendimento{
  padding:110px 0;
  background: linear-gradient(180deg, var(--verde-escuro) 0%, var(--verde-medio) 100%);
  color: white;
}

.areas-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  margin-top:50px;
  margin-bottom:60px;
}

/* Cartões com Efeito Float & Bordas Ativas */
.area-item{
  display:flex;
  align-items:center;
  gap:15px;
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(10px);
  padding:22px 25px;
  border-radius:18px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.2), var(--glow-branco);
  transition: all .35s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.area-item:hover{
  transform:translateY(-8px) scale(1.02);
  background: rgba(255, 255, 255, 0.15);
  border-color: var(--verde-neon);
  box-shadow: var(--sombra-hover), var(--glow-verde);
}

.area-item span{
  font-size:1.4rem;
  background:var(--branco);
  color: var(--verde-escuro-profundo);
  width:45px;
  height:45px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  box-shadow:0 4px 12px rgba(0,0,0,0.2), var(--glow-branco);
}

.area-item p{
  font-weight:600;
  color:var(--branco);
}

.area-full{
  grid-column:1 / -1;
  justify-content:center;
  background: linear-gradient(135deg, rgba(34, 166, 83, 0.25), rgba(255, 255, 255, 0.05));
  border: 2px solid var(--verde-neon);
  box-shadow: var(--glow-verde);
}


/* 5. SEGMENTOS (FUNDO VERDE PROFUNDO CONTRASTADO) */
.segmentos{
  padding:110px 0;
  background: var(--verde-escuro-profundo);
  color:#ffffff;
}

.segmentos-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:25px;
  margin-top:50px;
}

.segmento-card{
  background: rgba(9, 56, 26, 0.7);
  border-radius:20px;
  padding:40px 22px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:15px;
  font-size:2.2rem;
  font-weight:600;
  text-align:center;
  box-shadow: var(--sombra-card), var(--glow-branco);
  transition: all .35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  border: 1px solid rgba(255, 255, 255, 0.15);
  backdrop-filter:blur(8px);
  color:#ffffff;
}

.segmento-card span{
  font-size:1.05rem;
  color:#ffffff;
  font-weight:600;
}

/* Hover Dinâmico */
.segmento-card:hover{
  transform:translateY(-10px);
  background: rgba(22, 128, 60, 0.4);
  border-color: var(--branco);
  box-shadow: var(--sombra-hover), var(--glow-branco-intenso);
}

/* Cartão em Destaque Especial */
.segmento-card.destaque{
  background: linear-gradient(135deg, var(--verde-vibrante), var(--verde-medio));
  border: 2px solid var(--verde-neon);
  box-shadow: var(--glow-verde);
}

.segmento-card.destaque:hover{
  box-shadow: 0 20px 40px rgba(60, 214, 113, 0.5), var(--glow-branco-intenso);
}


/* 6. TRABALHOS REALIZADOS (FUNDO VERDE VIBRANTE) */
.trabalhos{
  padding:110px 0;
  background: linear-gradient(180deg, var(--verde-medio) 0%, var(--verde-vibrante) 100%);
  color: white;
}

.video-track{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:25px;
  flex-wrap:nowrap;
  overflow-x:auto;
  padding:10px 10px 20px;
}

.video-track::-webkit-scrollbar{
  display:none;
}

.video-card{
  flex:0 0 260px;
  width:260px;
  height:460px;
  overflow:hidden;
  border-radius:20px;
  background:#000;
  box-shadow: var(--sombra-card);
  transition:.35s ease;
  border: 2px solid rgba(255, 255, 255, 0.3);
}

.video-card:hover{
  transform:translateY(-10px) scale(1.03);
  border-color: var(--branco);
  box-shadow: var(--sombra-hover), var(--glow-branco-intenso);
}

.video-card video{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}

.transicao-resultados{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:25px;
  margin:90px 0 70px;
}

/* Barra Divisória em Gradiente */
.transicao-resultados span{
  width:120px;
  height:4px;
  background: linear-gradient(90deg, transparent, var(--branco), transparent);
  border-radius:20px;
  box-shadow: var(--glow-branco);
}

.transicao-resultados h3{
  font-family:'Montserrat',sans-serif;
  color:#ffffff;
  font-size:1.6rem;
  letter-spacing:1px;
  font-weight:700;
  text-shadow: var(--glow-branco);
}

.intro-resultados{
  max-width:820px;
  margin:0 auto 60px;
  text-align:center;
}

.intro-resultados h2{
  font-family:'Montserrat',sans-serif;
  font-size:2rem;
  color:#ffffff;
  margin-bottom:18px;
}

.intro-resultados p{
  color: var(--verde-menta);
  font-size:1.05rem;
}

.comparacoes{
  display:flex;
  flex-direction:column;
  gap:55px;
}

.comparacao{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:35px;
  max-width:950px;
  margin:0 auto;
}

.imagem-box{
  position:relative;
  overflow:hidden;
  border-radius:20px;
  box-shadow: var(--sombra-card);
  transition:.35s ease;
  background:#fff;
  border: 2px solid rgba(255, 255, 255, 0.4);
}

.imagem-box:hover{
  transform:translateY(-8px);
  border-color: var(--branco);
  box-shadow: var(--sombra-hover), var(--glow-branco);
}

.imagem-box img{
  width:100%;
  height:auto;
  display:block;
}

.imagem-box span{
  position:absolute;
  top:18px;
  left:18px;
  background: var(--verde-escuro-profundo);
  color:#fff;
  font-weight:700;
  padding:9px 20px;
  border-radius:40px;
  font-size:.9rem;
  letter-spacing:1px;
  box-shadow:0 4px 12px rgba(0,0,0,0.4);
  border: 1px solid rgba(255,255,255,0.2);
}

.faixa-resultados{
  margin-top:90px;
  padding:80px 40px;
  border-radius:24px;
  text-align:center;
  color: var(--branco);
  background: linear-gradient(135deg, var(--verde-escuro) 0%, var(--verde-medio) 100%);
  box-shadow: var(--sombra-card), var(--glow-branco);
  border: 1px solid rgba(255,255,255,0.2);
}

.faixa-resultados h2{
  font-family:'Montserrat',sans-serif;
  font-size:2.4rem;
  margin-bottom:20px;
}

.faixa-resultados p{
  max-width:760px;
  margin:auto;
  font-size:1.08rem;
  color: var(--verde-menta);
}


/* 7. CONTATO (FUNDO VERDE ESCURO COM CARDS EM BRANCO/GLOW) */
.contato{
  padding:110px 0;
  background: var(--verde-escuro-profundo);
  color: var(--branco);
}

.contato .titulo h2{
  color: var(--branco);
}

.contato-wrapper{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:40px;
  margin-top:50px;
}

.contato-info,
.localizacao{
  background: linear-gradient(145deg, rgba(9, 56, 26, 0.9), rgba(4, 33, 15, 0.95));
  border-radius:24px;
  padding:45px;
  box-shadow: var(--sombra-card), var(--glow-branco);
  transition: all .35s ease;
  border: 1px solid rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
}

.contato-info:hover,
.localizacao:hover{
  transform:translateY(-8px);
  border-color: var(--verde-neon);
  box-shadow: var(--sombra-hover), var(--glow-verde);
}

.contato-info h3,
.localizacao h3{
  font-family:'Montserrat',sans-serif;
  font-size:1.8rem;
  margin-bottom:18px;
  color:var(--verde-neon);
}

.texto-contato,
.texto-local{
  color:var(--verde-menta);
  margin-bottom:35px;
  line-height:1.8;
}

.info-item,
.endereco-box{
  margin-bottom:30px;
}

.info-item h4,
.endereco-box h4{
  font-family:'Montserrat',sans-serif;
  font-size:1rem;
  color:var(--verde-neon);
  margin-bottom:10px;
}

.info-item p,
.endereco-box p{
  color:var(--branco);
  line-height:1.8;
}

.info-item a{
  color:var(--verde-neon);
  font-weight:600;
  transition: .3s ease;
}

.info-item a:hover {
  text-shadow: var(--glow-verde);
}


/* 8. FOOTER (VERDE ULTRA PROFUNDO) */
.footer{
  background: #021408;
  color: var(--verde-menta);
  padding:60px 0 40px;
  text-align:center;
  border-top:1px solid rgba(60, 214, 113, 0.2);
}

.footer img{
  width:140px;
  margin:0 auto 20px;
  filter: drop-shadow(var(--glow-branco));
}

.footer-frase{
  max-width:500px;
  margin:0 auto 20px;
  font-size:1.05rem;
  font-weight:600;
}

.footer-links{
  display:flex;
  justify-content:center;
  gap:30px;
  margin:30px 0;
}

.footer-links a{
  font-weight:700;
  transition:.3s;
  color: var(--verde-menta);
}

.footer-links a:hover{
  color: var(--verde-neon);
  text-shadow: var(--glow-verde);
  text-decoration: none;
}

.footer p{
  font-size:.9rem;
  opacity:0.7;
  font-weight: 500;
}


/* =========================
TABLET RESPONSIVO
========================= */

@media(max-width:900px){

  .menu{
    display:none;
  }

  .menu-mobile{
    display:block;
  }

  .header-slogan{
    display:none;
  }

  .hero h1{
    font-size:3rem;
  }

  .servicos-content,
  .atendimento-content,
  .contato-content,
  .contato-wrapper{
    grid-template-columns:1fr;
  }

  .destaque-content{
    flex-direction:column;
    text-align:center;
  }

  .video-track{
    justify-content:flex-start;
  }

  .video-card{
    flex:0 0 230px;
    width:230px;
    height:410px;
  }

  .comparacao{
    max-width:700px;
    gap:25px;
    grid-template-columns:1fr;
  }

  .transicao-resultados span{
    width:70px;
  }

  .faixa-resultados{
    padding:60px 25px;
  }

  .faixa-resultados h2{
    font-size:2rem;
  }

  .segmentos-grid{
    grid-template-columns:repeat(2,1fr);
  }

}


/* =========================
CELULAR RESPONSIVO
========================= */

@media(max-width:600px){

  .container{
    width:92%;
  }

  .header-content{
    height:80px;
  }

  .logo img{
    width:95px;
  }

  .hero{
    min-height:650px;
  }

  .hero h1{
    font-size:2.3rem;
  }

  .hero h2{
    font-size:1.25rem;
  }

  .hero p{
    font-size:.95rem;
  }

  .hero-buttons{
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
  }

  .btn-primary,
  .btn-secondary{
    text-align:center;
    width:100%;
  }

  .hero-beneficios{
    gap:10px;
    margin-top:30px;
  }

  .titulo h2{
    font-size:1.8rem;
  }

  .servicos,
  .atendimento,
  .contato,
  .segmentos,
  .trabalhos{
    padding:60px 0;
  }

  .destaque h3{
    font-size:1.3rem;
  }

  .destaque a{
    width:100%;
    text-align:center;
  }

  .segmentos-grid{
    grid-template-columns:1fr;
  }

  .video-track{
    gap:18px;
  }

  .video-card{
    flex:0 0 210px;
    width:210px;
    height:380px;
  }

  .whatsapp-float{
    width:52px;
    height:52px;
    right:18px;
    bottom:18px;
  }

  .footer-links{
    gap:15px;
    flex-wrap:wrap;
  }

  .intro-resultados h2{
    font-size:1.6rem;
  }

  .transicao-resultados{
    gap:12px;
  }

  .transicao-resultados span{
    width:40px;
  }

  .faixa-resultados h2{
    font-size:1.6rem;
  }

  .comparacao{
    max-width:100%;
  }

}