/* ===== CONTAINER PRINCIPAL ===== */
.container_titulo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-width: 1050px;

  padding: 20px 20px;
  max-width: 1200px;
  min-width: auto;
  width: 100%;
  margin: 8px auto; /* Reduzi de 10px para 8px para igualar com os filtros */
}

@media (max-width: 1049.98px) {
  .container_titulo { display: none; }
}

/* ===== LOGO CENTRAL ===== */
.logo-central {
  width: 350px;
  text-align: center;
  margin: 0 40px; /* Adiciona espaço entre logo e caixas */
}

.logo-central img {
  width: 100%;
  height: auto;
  
}

/* ===== QUEM SOMOS (ESQUERDA) ===== */
.quem-somos {
  width: 380px;
  height: 150px;
  position: relative;
  overflow: hidden;
  background: #FFF3B3; /* Amarelo mais claro e suave */
  border-radius: 15px;
  box-shadow: 0 10px 20px rgba(0,0,0,0.2);
  display: flex;
  flex-direction: column; /* Adicionei esta linha */
  align-items: center;
  justify-content: center;
  cursor: pointer;
  animation: mudaCor 8s infinite alternate;
}

.textos-quem-somos {
  position: relative;
  width: 380px;
  height: 150px;
  margin-top: 15px; /* Espaço entre título e textos */
}

.textos-quem-somos span {
  position: absolute;
  width: 100%;
  text-align: center;
  font-family: 'Arial Rounded MT Bold', sans-serif;
  font-size: 16px;
  opacity: 0;
  color: #4A5568;                   /* Cinza-azulado mais suave */
  text-shadow: 1px 1px rgba(255,255,255,0.8); /* Suaviza o contorno */
  animation: giraTextoQuem 12s infinite;
}

/* ===== COMO FUNCIONA (DIREITA) ===== */
.como-funciona {
  width: 380px;
  height: 150px;
  position: relative;
  overflow: hidden;
  background: #FFF3B3; /* Amarelo mais claro e suave */
  border-radius: 15px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1); /* Sombreamento mais suave */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 5px 0;
  animation: mudaCor 8s infinite alternate;
}

.textos-como-funciona {
  position: relative;
  width: 380px;
  height: 150px;
}

.textos-como-funciona span {
  position: absolute;
  width: 100%;
  text-align: center;
  font-family: 'Arial Rounded MT Bold', sans-serif;
  font-size: 16px;
  opacity: 0;
  color: #4A5568;                   /* Cinza-azulado mais suave */
  text-shadow: 1px 1px rgba(255,255,255,0.8); /* Suaviza o contorno */
  animation: giraTextoComo 30s infinite;
}

/* ===== ANIMAÇÃO DE CORES ATUALIZADA ===== */
@keyframes mudaCor {
  0% { background: #FFF3B3; }       /* Amarelo claro */
  25% { background: #FFB3B3; }      /* Rosa suave */
  50% { background: #9CD6DE; }      /* Azul clarinho */
  75% { background: #B3D9FF; }      /* Azul céu */
  100% { background: #C2E0C2; }     /* Verde água */
}

@keyframes giraTextoQuem {
  0%, 100% { transform: rotate(-5deg); opacity: 0; }
  5%, 25% { transform: rotate(0deg); opacity: 1; }
  30% { transform: rotate(5deg); opacity: 0; }
}

@keyframes giraTextoComo {
  0%, 13.3% { transform: rotate(-5deg); opacity: 0; }
  16.6%, 30% { transform: rotate(0deg); opacity: 1; }
  33.3% { transform: rotate(5deg); opacity: 0; }
}

/* ===== DELAYS DAS ANIMAÇÕES ===== */
.textos-quem-somos span:nth-child(1) { animation-delay: 0s; }
.textos-quem-somos span:nth-child(2) { animation-delay: 3s; }
.textos-quem-somos span:nth-child(3) { animation-delay: 6s; }
.textos-quem-somos span:nth-child(4) { animation-delay: 9s; }

.textos-como-funciona span:nth-child(1) { animation-delay: 0s; }
.textos-como-funciona span:nth-child(2) { animation-delay: 5s; }
.textos-como-funciona span:nth-child(3) { animation-delay: 10s; }
.textos-como-funciona span:nth-child(4) { animation-delay: 15s; }
.textos-como-funciona span:nth-child(5) { animation-delay: 20s; }
.textos-como-funciona span:nth-child(6) { 
  animation-delay: 25s; 
  font-size: 22px;
  color: #1f3d2c;
}

/* ===== EFEITOS EXTRAS ===== */
.quem-somos:hover {
  animation: flutua 0.8s ease-in-out infinite;
  transform: translateY(0); /* Mantém posição durante hover */
}

@keyframes flutua {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.quem-somos::after {
  content: "🚚";
  position: absolute;
  bottom: 10px;
  right: 10px;
  font-size: 30px;
  animation: moveCar 4s infinite;
}

.como-funciona::after {
  content: "🚗";
  position: absolute;
  bottom: 10px;
  right: 10px;
  font-size: 30px;
  animation: moveCar 6s infinite;
}

@keyframes moveCar {
  0% { transform: translateX(50px); opacity: 0; }
  30%, 70% { transform: translateX(0); opacity: 1; }
  100% { transform: translateX(-200px); opacity: 0; }
}

.titulo {
  font-family: 'Arial Rounded MT Bold', sans-serif;
  font-size: 20px;
  color: #2c3e50;
  text-align: center;
  text-shadow: 1px 1px white;
  margin: 15px 0;
  position: relative;
  z-index: 1;
  padding: 0 10px; /* Evita texto colado nas bordas */
}

.titulo::after {
  content: '';
  width: 0;
  height: 2px;
  background: #2c3e50;
  position: absolute;
  bottom: -5px;
  left: 0;
  transition: width 0.3s;
}

.como-funciona:hover .titulo::after {
  width: 100%;
}