/* Garante que os botões de navegação do carrossel fiquem nas extremidades */

/* 1. CORREÇÃO DA SOMBRA E ADIÇÃO DE ESPAÇAMENTO PARA A SOMBRA */
/* Adicione padding ao carousel-item para garantir que a sombra não seja cortada */
#areasCarousel .carousel-item {
    padding-left: 20px;
    /* Ajuste este valor conforme a intensidade da sua sombra */
    padding-right: 20px;
    /* Ajuste este valor conforme a intensidade da sua sombra */
    padding-top: 10px;
    /* Opcional, se a sombra for cortada na parte superior */
    padding-bottom: 10px;
    /* Opcional, se a sombra for cortada na parte inferior */
}

#areasCarousel .card {
    margin: 0 10px;
    box-shadow: 6px 6px 10px #0000001a !important;
    border-radius: 15px !important;
}

#areasCarousel .card-header {
    background-color: var(--primary-color);
    font-size: 1.5em;
    min-height: 90px;
    color: #fff;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

#areasCarousel .card-body {
    text-align: center;
    /* Sugestão para texto que flui */
    color: #8895a0 !important;
    letter-spacing: .8px;
    background-color: #f4f4f4;
    min-height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#areasCarousel .carousel-control-prev,
#areasCarousel .carousel-control-next {
    width: 5%;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transition: none;
    /* REMOVIDO: left: 0; right: 0; - São definidos nos seletores específicos */
}

#areasCarousel .carousel-control-prev-icon,
#areasCarousel .carousel-control-next-icon {
    filter: invert(1);
}

#areasCarousel .carousel-control-prev {
    left: -2rem;
    right: auto;
}

#areasCarousel .carousel-control-next {
    right: -2rem;
    left: auto;
}

/* Em telas menores, ajuste para não sair da viewport */
@media (max-width: 767.98px) {
    #areasCarousel .carousel-control-prev {
        left: -0.5rem;
    }

    #areasCarousel .carousel-control-next {
        right: -0.5rem;
    }
}

/* Estado inicial (fechado) */
.w-dropdown-list {
    opacity: 0;
    /* Traduz para os valores originais do Webflow: translate3d(0, 15px, 0) scale3d(0.9, 0.9, 1) */
    transform: translateY(15px) scale(0.9);
    pointer-events: none;
    /* Impede cliques em elementos invisíveis */
    transition: opacity 300ms ease, transform 300ms ease;
    /* Duração do transition */
    /* Garante que o elemento não ocupe espaço visualmente quando fechado, se necessário */
    /* display: none; /* O Webflow pode togglar display, mas a transição ficaria mais suave sem isso */
}

/* Estado aberto */
.w-dropdown-list.w--open {
    opacity: 1;
    transform: translateY(0px) scale(1);
    pointer-events: auto;
    /* Permite cliques quando visível */
    /* Se você optou por display: none, aqui você precisaria mudar para display: block; */
    /* display: block; */
}

/* Rotação do ícone de dropdown */
.w-icon-dropdown-toggle {
    transition: transform 200ms ease;
    /* Duração do transition do ícone */
}

.w-dropdown-toggle.w--open .w-icon-dropdown-toggle {
    transform: rotateZ(180deg);
}

/* Z-index (se necessário, o Webflow costuma gerenciar isso dinamicamente) */
/* .w-dropdown.w--open {
    z-index: 901; 
} */

/* =========================================
   Flip Cards - Áreas de Atuação
   ========================================= */

.atuacao-card {
    perspective: 1000px;
    height: 320px;
    /* Altura fixa para todos os cards */
    cursor: pointer;
    background-color: transparent;
    /* Importante para o 3D funcionar bem */
}

.atuacao-card .content {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    border-radius: 12px;
}

/* Efeito de Flip ao passar o mouse */
.atuacao-card:hover .content,
.atuacao-card:focus .content,
.atuacao-card:active .content,
.atuacao-card.hovered .content {
    /* Classe extra para garantir via JS se necessário */
    transform: rotateY(180deg);
}

/* Frente e Verso comuns */
.atuacao-card .front,
.atuacao-card .back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

/* Estilo da Frente */
.atuacao-card .front {
    background-color: #fff;
    color: #333;
    z-index: 2;
    /* Garante que a frente esteja visível */
}

.atuacao-card .front i {
    color: var(--primary-color, #353b56) !important;
    /* Usa a cor primária do site */
    transition: transform 0.3s ease;
}

.atuacao-card:hover .front i {
    transform: scale(1.1);
}

.atuacao-card .front h3 {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 1.1rem;
    margin-top: 15px;
    color: #444;
}

/* Estilo do Verso */
.atuacao-card .back {
    background-color: var(--primary-color, #353b56);
    /* Fundo escuro/azul da marca */
    color: #fff;
    transform: rotateY(180deg);
    padding: 30px;
    z-index: 1;
}

.atuacao-card .back h3 {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 15px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.3);
    padding-bottom: 10px;
    width: 100%;
    color: #ffffff !important;
    /* Garante visibilidade no fundo escuro */
}

.atuacao-card .back p {
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0;
}

/* Responsividade para telas menores (mobile) */
@media (max-width: 768px) {
    .atuacao-card {
        height: 280px;
        /* Um pouco menor no mobile se necessário */
        margin-bottom: 20px;
    }
}