/* =========================
   SEÇÃO COM FUNDO BEGE ESCURO
========================= */
.units {
  text-align: center;        /* Centraliza todo o conteúdo da seção */
  background-color: #E6E2D8; /* Cor de fundo bege mais escuro */
}

/* =========================
   SEÇÃO COM FUNDO BEGE CLARO
========================= */
.units2 {
  text-align: center;        /* Centraliza todo o conteúdo da seção */
  background-color: #F3EFE8; /* Cor de fundo bege mais claro */
}


/* =========================
   WRAPPER DO CARROSSEL
========================= */
.carousel-wrapper {
  display: flex;              /* Organiza elementos internos em linha (ex: setas + carrossel) */
  align-items: center;        /* Alinha verticalmente ao centro */
  position: relative;         /* Permite posicionamento absoluto interno (ex: botões) */
}

/* =========================
   CONTAINER DO CARROSSEL
========================= */
.carousel {
  display: flex;              /* Deixa os itens do carrossel lado a lado */
  gap: 12px;                  /* Espaço entre os itens */
  overflow-x: auto;           /* Permite rolagem horizontal */
  scroll-behavior: smooth;    /* Rolagem suave */
  scroll-snap-type: x mandatory; /* Faz os itens "encaixarem" ao parar o scroll */
  padding: 30px 0;            /* Espaçamento vertical interno */
}


/* =========================
   REMOVE SCROLLBAR (CHROME, EDGE, SAFARI)
========================= */
.carousel::-webkit-scrollbar { 
  display: none; /* Oculta a barra de rolagem horizontal */
}

/* =========================
   CARD DO CARROSSEL
========================= */
.card {
  min-width: 320px;          /* Largura mínima fixa de cada card */
  height: 430px;             /* Altura fixa */
  position: relative;        /* Permite posicionar elementos internos absolutos */
  border-radius: 20px;       /* Cantos arredondados */
  overflow: hidden;          /* Corta qualquer conteúdo que ultrapasse o card */

  scroll-snap-align: center; /* Faz o card centralizar ao parar o scroll */

  transform: scale(.9);      /* Reduz levemente o tamanho (efeito visual) */
  opacity: .5;               /* Deixa parcialmente transparente */
  transition: .5s ease;      /* Anima mudanças suavemente */
}

/* =========================
   CARD ATIVO (EM DESTAQUE)
========================= */
.card.active {
  transform: scale(1.05); /* Aumenta levemente o tamanho do card ativo */
  opacity: 1;             /* Torna totalmente visível */
}

/* =========================
   IMAGEM DENTRO DO CARD
========================= */
.card img {
  width: 110%;                /* Levemente maior que o card (efeito de zoom) */
  height: 110%;               /* Mantém proporção ampliada */
  object-fit: cover;          /* Preenche todo o espaço sem distorcer */
  transition: transform .6s ease; /* Suaviza animações (ex: zoom no hover) */
}
/* =========================
   EFEITO NA IMAGEM DO CARD ATIVO
========================= */
.card.active img {
  transform: translateX(-20px); /* Move a imagem levemente para a esquerda */
}

/* =========================
   TEXTO SOBRE O CARD (CIDADE)
========================= */
.city {
  position: absolute;           /* Permite posicionamento sobre a imagem */
  top: 10%;                     /* Distância do topo do card */
  left: 50%;                    /* Centraliza horizontalmente */
  transform: translate(-50%, -50%); /* Ajuste fino para centralização exata */

  color: #fff;                  /* Cor branca */
  font-weight: bold;            /* Texto em negrito */
  font-size: 22px;              /* Tamanho do texto */
  text-align: center;           /* Centraliza o texto */

  text-shadow: 0 4px 10px rgba(0,0,0,.6); /* Sombra para melhorar leitura sobre a imagem */
}



/* =========================
   CONTAINER DOS BOTÕES (AÇÕES)
========================= */
.actions {
  position: absolute;   /* Posiciona sobre o card */
  bottom: 20px;         /* Distância da parte inferior */
  left: 20px;           /* Distância da lateral esquerda */
  display: flex;        /* Deixa os botões lado a lado */
  gap: 10px;            /* Espaço entre os botões */
}

/* =========================
   BOTÕES DE AÇÃO
========================= */
.actions button {
  padding: 8px 14px;                      /* Espaçamento interno */
  border-radius: 20px;                    /* Formato arredondado (pill) */
  border: none;                           /* Remove borda padrão */
  background: rgba(255,255,255,.9);       /* Fundo branco levemente transparente */
  cursor: pointer;                        /* Cursor de clique */
}

/* =========================
   BOTÃO / ÍCONE DE NAVEGAÇÃO
========================= */
.nav {
  width: 30px;     /* Largura do botão */
  height: 30px;    /* Altura do botão (corrigido) */
}

/* =========================
   SEGUNDO CARROSSEL
========================= */
.carousel2 {
  display: flex;                 /* Itens lado a lado */
  gap: 12px;                     /* Espaço entre os cards */
  overflow-x: auto;              /* Rolagem horizontal */
  scroll-behavior: smooth;       /* Rolagem suave */
  scroll-snap-type: x mandatory; /* Encaixe automático ao parar o scroll */
  padding: 30px 0;               /* Espaçamento vertical */
  opacity: 1;                    /* Totalmente visível */
}

/* =========================
   CARD DO SEGUNDO CARROSSEL
========================= */
.carousel2 .card2 {
  min-width: 320px;          /* Largura mínima fixa */
  height: 430px;             /* Altura fixa */
  position: relative;        /* Permite elementos posicionados dentro */
  border-radius: 20px;       /* Cantos arredondados */
  overflow: hidden;          /* Corta excesso da imagem */
  scroll-snap-align: center; /* Centraliza ao parar o scroll */
  transform: scale(.9);      /* Leve redução para efeito visual */
  transition: .5s ease;      /* Transição suave */
}

/* =========================
   IMAGEM DO CARD (CAROUSEL 2)
   Centralizada e ajustada
========================= */
.carousel2 .card2 img {
  width: 100%;          /* Ocupa toda a largura do card */
  height: 100%;         /* Ocupa toda a altura do card */
  object-fit: cover;    /* Preenche o espaço mantendo proporção */
  display: block;       /* Remove espaço extra abaixo da imagem */
  opacity: 1;           /* Totalmente visível */
}