*{margin:0;padding:0;box-sizing:border-box;font-family:Arial, sans-serif;}

body{background:#f5f5f5;color:#222;}

header{
  background:#0a1f44;
  color:#fff;
  padding:20px;
  text-align:center;
}



header h1{font-size:24px;}

/* Navbar Styling */
header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #0a1f44;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
}

.logo {
  font-size: 1.5rem;
  font-weight: bold;
  color: #fff;
}

.nav-menu {
  display: flex;
  align-items: center;
  list-style: none;
  gap: 30px;
}

.nav-link {
  color: #fff;
  text-decoration: none;
  font-weight: 500;
  transition: 0.3s;
}

.nav-link:hover {
  color: #25D366;
}

.btn-nav {
  padding: 8px 18px;
  background: #25D366;
  color: #fff;
  border-radius: 5px;
  text-decoration: none;
  font-size: 0.9rem;
}

/* Hamburger */
.hamburger {
  display: none;
  cursor: pointer;
}

.bar {
  display: block;
  width: 25px;
  height: 3px;
  margin: 5px auto;
  transition: all 0.3s ease-in-out;
  background: #fff;
}

/* Responsividade do Menu */
@media (max-width: 768px) {
  .hamburger { display: block; }

  .hamburger.active .bar:nth-child(2) { opacity: 0; }
  .hamburger.active .bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .hamburger.active .bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

  .nav-menu {
    position: fixed;
    left: -100%;
    top: 70px;
    gap: 0;
    flex-direction: column;
    background: #0a1f44;
    width: 100%;
    text-align: center;
    transition: 0.3s;
    padding: 20px 0;
    box-shadow: 0 10px 10px rgba(0,0,0,0.2);
  }

  .nav-menu.active { left: 0; }

  .nav-menu li { margin: 15px 0; }
}




.container{padding:20px;max-width:1200px;margin:auto;}




.btn{
  display:inline-block;
  padding:12px 20px;
  background:#25D366;
  color:#fff;
  text-decoration:none;
  border-radius:5px;
  transition:0.3s;
}

.btn:hover{opacity:0.8;}

.areas{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:20px;
  margin-top:40px;
}

.card{
  background:#fff;
  border-radius:10px;
  overflow:hidden;
  position:relative;
  transition:0.3s;
}


/* style.css - Substitua/Atualize estas regras */

.hero {
  /* Mantém a imagem configurada anteriormente */
  background-image: url('../img/banner.png'); 
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  
  /* Define a altura da seção (80% da altura da tela) */
  min-height: 80vh; 
  width: 100%;
  
  /* FLEXBOX: O segredo da centralização */
  display: flex;
  align-items: center;     /* Centraliza verticalmente (altura) */
  justify-content: center;    /* Centraliza horizontalmente (largura) */
  
  position: relative;
  text-align: center;
  color: #fff;
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(10, 31, 68, 0.7); /* Azul marinho profissional */
  
  /* Também aplicamos flex aqui para garantir que o conteúdo interno alinhe */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  padding: 20px;
  max-width: 800px; /* Limita a largura para melhor leitura */
}

.hero h2 {
  font-size: 36px; /* Aumentei um pouco para dar mais destaque */
  margin-bottom: 15px;
  text-transform: uppercase; /* Opcional: deixa mais imponente */
  letter-spacing: 1px;
}

.hero p {
  font-size: 18px;
  margin-bottom: 30px;
  font-weight: 300; /* Texto mais fino para elegância */
}

/* Ajuste Responsivo */
@media (max-width: 768px) {
  .hero {
    min-height: 60vh; /* Altura menor no mobile */
  }
  .hero h2 {
    font-size: 26px;
  }
}


.text-center {
  text-align: center !important;
}


.card img{width:100%;height:180px;object-fit:cover;}

.card-content{padding:15px;}

.card h3{margin-bottom:10px;}

.card .hover-btn{
  position:absolute;
  bottom:-60px;
  left:0;
  width:100%;
  text-align:center;
  transition:0.3s;
}


.card {
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  transition: 0.3s;
  
  /* Contorno dourado sutil */
  border: 1px solid #d4af37; /* Dourado metálico clássico */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); /* Sombra bem leve para profundidade */
}

/* Efeito Premium ao passar o mouse (Hover) */
.card:hover {
  transform: translateY(-5px); /* O card sobe levemente */
  border: 2px solid #b8860b; /* Dourado mais escuro para dar contraste */
  box-shadow: 0 8px 25px rgba(212, 175, 55, 0.2); /* Sombra com brilho dourado */
}

/* Ajuste no conteúdo interno para não "grudar" na borda */
.card-content {
  padding: 20px;
}

.card h3 {
  color: #0a1f44; /* Azul marinho para contraste com o dourado */
  margin-bottom: 15px;
  font-size: 1.3rem;
}


.card:hover .hover-btn{bottom:10px;}


.perfil-grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr; /* Imagem menor que o texto */
  gap: 50px;
  align-items: center;
  background: #fff;
  padding: 40px;
  border-radius: 15px;
  border: 1px solid #d4af37; /* Contorno dourado sutil */
  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.perfil-img {
  position: relative;
}

.perfil-img img {
  width: 100%;
  border-radius: 10px;
  filter: grayscale(20%); /* Toque artístico profissional */
  border-bottom: 5px solid #d4af37;
}

.perfil-badge {
  position: absolute;
  bottom: -15px;
  right: -15px;
  background: #0a1f44;
  color: #d4af37;
  padding: 10px 20px;
  border-radius: 5px;
  font-weight: bold;
  font-size: 0.9rem;
  border: 1px solid #d4af37;
}

.perfil-texto span {
  color: #d4af37;
  text-transform: uppercase;
  font-weight: bold;
  letter-spacing: 2px;
  font-size: 0.8rem;
}

.perfil-texto h2 {
  text-align: left !important; /* Sobrescreve a centralização global */
  margin: 10px 0 !important;
  color: #0a1f44;
}

.perfil-texto .formacao {
  color: #666;
  font-style: italic;
  margin-bottom: 20px;
}

.perfil-bio p {
  margin-bottom: 15px;
  line-height: 1.6;
}

.perfil-lista {
  list-style: none;
  margin: 25px 0;
}

.perfil-lista li {
  margin-bottom: 10px;
  padding-left: 25px;
  position: relative;
}

.perfil-lista li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: #d4af37;
  font-weight: bold;
}

.btn-perfil {
  display: inline-block;
  padding: 15px 30px;
  background: #0a1f44;
  color: #fff;
  text-decoration: none;
  border-radius: 5px;
  border: 1px solid #d4af37;
  transition: 0.3s;
}

.btn-perfil:hover {
  background: #d4af37;
  color: #0a1f44;
}

/* Responsividade */
@media (max-width: 768px) {
  .perfil-grid {
    grid-template-columns: 1fr;
    padding: 20px;
    text-align: center;
  }
  
  .perfil-texto h2 {
    text-align: center !important;
  }

  .perfil-lista li {
    text-align: left;
  }
}


.perfil{
  margin-top:50px;
  background:#fff;
  padding:20px;
  border-radius:10px;
}

.carousel-container {
  overflow: hidden; /* Esconde os cards que não estão em foco */
  width: 100%;
  padding: 20px 0;
}

.depo-track {
  display: flex;
  transition: transform 0.8s ease-in-out; /* Transição suave do movimento */
}

.depo-card {
  background: #0a1f44;
  color: #fff;
  min-width: 100%; /* Cada card ocupa 100% da largura do container no mobile */
  box-sizing: border-box;
  padding: 40px;
  border-radius: 15px;
  border: 1px solid #d4af37;
  display: flex;
  flex-direction: column;
}

/* No Desktop, podemos mostrar mais de um card se preferir, ou manter um centralizado */
@media (min-width: 768px) {
  .depo-card {
    min-width: 50%; /* Mostra dois cards por vez em telas maiores */
  }
}

/* Estilos internos (Google, Stars, etc) permanecem os mesmos da versão anterior */

.google-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
  font-size: 0.8rem;
  color: #d4af37;
  font-weight: bold;
}

.google-header img {
  width: 20px;
  height: 20px;
}

.stars {
  color: #d4af37;
  font-size: 1.2rem;
  margin-bottom: 15px;
}

.depo-card p {
  font-style: italic;
  line-height: 1.6;
  margin-bottom: 20px;
}

.cliente-nome {
  font-size: 1rem;
  color: #d4af37;
  border-top: 1px solid rgba(212, 175, 55, 0.3);
  padding-top: 15px;
  text-align: right;
}

/* Reutilizando os botões da section áreas de atuação */
#prev-depo { left: -10px; }
#next-depo { right: -10px; }

footer{
  margin-top:50px;
  padding:20px;
  text-align:center;
  background:#0a1f44;
  color:#fff;
}

/* RESPONSIVO UNIVERSAL */
@media (max-width:768px){
  .hero h2{font-size:22px;}
  header h1{font-size:18px;}
}

@media (max-width:480px){
  .container{padding:10px;}
  .hero{padding:20px 10px;}

  .card .hover-btn{
    position:static;
    margin-top:10px;
	margin-bottom:5px;
  }
}

@media (max-width:320px){
  body{font-size:14px;}
}

.subtitle-blog {
  text-align: center;
  margin-top: -30px;
  margin-bottom: 40px;
  color: #666;
}

.blog-track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: 20px 5px;
  scrollbar-width: none;
}

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

/* Container que limita a visualização */
.carousel-wrapper {
  width: 100%;
  overflow: hidden;
  position: relative;
  padding: 0 10px; /* Margem de segurança para não colar na borda da tela */
}

/* A trilha que carrega os cards */
.blog-track {
  display: flex;
  gap: 20px;
  scroll-behavior: smooth;
  transition: transform 0.5s ease-in-out;
  /* Removemos o overflow-x: auto para o JS controlar o movimento fixo */
}

/* Estilização do Card */
.blog-card {
  background: #0a1f44;
  color: #fff;
  border: 1px solid #d4af37;
  border-radius: 15px;
  padding: 25px;
  flex: 0 0 auto; /* Impede que o card encolha ou estique */
  
  /* Lógica Mobile: 1 card ocupando toda a largura visível */
  width: 100%; 
  box-sizing: border-box; /* Garante que o padding não aumente o tamanho do card */
}

/* Lógica para PC (Modo Normal) */
@media (min-width: 1024px) {
  .blog-card {
    /* Cálculo exato: (100% da largura - 40px de gaps totais) / 3 cards */
    width: calc((100% - 40px) / 3);
  }
}

.blog-card {
  background: #0a1f44; /* Mesmo azul dos depoimentos */
  color: #fff;
  min-width: 320px;
  padding: 30px;
  border-radius: 15px;
  border: 1px solid #d4af37; /* Contorno dourado */
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.blog-header .tag {
  background: #d4af37;
  color: #0a1f44;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: bold;
  text-transform: uppercase;
}

.blog-card h3 {
  color: #d4af37;
  margin: 20px 0 15px 0;
  font-size: 1.25rem;
}

.blog-card p {
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 25px;
  color: #e0e0e0;
}

/* Botão Estilo Instagram */
.btn-insta {
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  color: #fff;
  text-align: center;
  padding: 12px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: bold;
  font-size: 0.9rem;
  transition: transform 0.3s ease;
}

.btn-insta:hover {
  transform: scale(1.03);
}

/* Reaproveitando botões de navegação */
#prev-blog { left: -10px; }
#next-blog { right: -10px; }

/* Container do Blog */
.carousel-wrapper {
  width: 100%;
  overflow: hidden;
  padding: 0; /* Removemos o padding lateral que era para os botões antigos */
}

/* A trilha permanece com scroll-snap para garantir a uniformidade */
.blog-track {
  display: flex;
  gap: 20px;
  scroll-behavior: smooth;
  overflow-x: hidden;
  scroll-snap-type: x mandatory;
  width: 100%;
}

/* Área dos botões abaixo das divs */
.blog-controls {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-top: 30px; /* Espaço entre as divs e os botões */
}

/* Estilo Circular Profissional */
.btn-circular {
  background: #0a1f44;
  color: #d4af37;
  border: 2px solid #d4af37;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.btn-circular:hover {
  background: #d4af37;
  color: #0a1f44;
  transform: scale(1.1);
}

.btn-circular:active {
  transform: scale(0.95);
}

/* Card ajustado */
.blog-card {
  flex: 0 0 100%;
  scroll-snap-align: start;
  box-sizing: border-box;
}

@media (min-width: 1024px) {
  .blog-card {
    flex: 0 0 calc((100% - 40px) / 3);
  }
}

/* BOTÕES - Layout Profissional e Ativo */
.btn-controle {
  position: absolute;
  top: 55%; /* Centraliza na altura dos cards */
  transform: translateY(-50%);
  background: #0a1f44;
  color: #d4af37;
  border: 2px solid #d4af37;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 999; /* Garante que fique acima de tudo */
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.3s;
}

.btn-controle:hover {
  background: #d4af37;
  color: #0a1f44;
}

#btn-prev-blog { left: 5px; }
#btn-next-blog { right: 5px; }

/* Na trilha (o pai) */
.blog-track {
  display: flex;
  gap: 20px;
  overflow-x: hidden; 
  scroll-behavior: smooth;
  width: 100%;
  /* NOVO: Faz a trilha aceitar o imã */
  scroll-snap-type: x mandatory; 
}

/* No Card (o filho) */
.blog-card {
  background: #0a1f44;
  color: #fff;
  border: 1px solid #d4af37;
  border-radius: 12px;
  padding: 25px;
  box-sizing: border-box;
  flex: 0 0 100%; 
  /* NOVO: Diz onde o card deve "grudar" ao rolar */
  scroll-snap-align: start; 
}

@media (min-width: 1024px) {
  .blog-card {
    /* Ajuste fino para o PC aparecer de 3 em 3 sem sobrar espaço */
    flex: 0 0 calc((100% - 40px) / 3);
  }
}

/* Estilo para separar o título do parágrafo e o parágrafo do carrossel */
.blog-subtitle {
  display: block; /* Garante que ele se comporte como um bloco separado */
  margin-top: 15px; /* Espaço entre o H2 e este P */
  margin-bottom: 40px; /* Espaço entre este P e o início das divs do blog */
  color: #666; /* Tom cinza suave para não brigar com o título */
  font-size: 1.1rem;
  text-align: center; /* Alinha ao centro, seguindo o padrão do H2 */
  font-style: italic;
  width: 100%;
}

/* Garante que o H2 não tenha margens que atrapalhem */
#blog h2 {
  margin-bottom: 0; 
  text-align: center;
  color: #0a1f44;
}

/* Garante que o menu mobile sobreponha o conteúdo */
@media (max-width: 768px) {
  .nav-menu {
    display: flex;
    position: fixed;
    left: -100%;
    top: 70px;
    width: 100%;
    height: calc(100vh - 70px);
    background: #0a1f44;
    flex-direction: column;
    transition: 0.3s;
    z-index: 999;
  }

  /* Quando o NAV pai tiver a classe active, mostramos o menu */
  #nav.active .nav-menu {
    left: 0;
  }

  /* Animação do Hamburguer virando X */
  #nav.active .bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  #nav.active .bar:nth-child(2) { opacity: 0; }
  #nav.active .bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
}