/* ============================================================
   1. CONFIGURAÇÕES GERAIS E TÍTULO DA SEÇÃO (Desktop)
   ============================================================ */
   .gallery-section {
    width: 100%;
    padding: 20px 0 60px 0;
    background-color: #e5e9e8;
    overflow-x: hidden; /* Evita rolagem lateral no mobile */
}

.diferencial { 
    text-align: center; 
    margin-bottom: 50px; 
    padding: 0 20px;
}

.menta-title { 
    font-size: 2.2rem; 
    color: #333; 
    margin-bottom: 15px; 
    font-weight: normal; 
    text-transform: uppercase; 
}

.menta-line { 
    width: 60px; 
    height: 1px; 
    background-color: #000; 
    margin: 0 auto; 
}

/* ============================================================
   2. GRID DESKTOP (3 COLUNAS)
   ============================================================ */
.gallery-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); 
    gap: 40px 30px; 
    max-width: 1200px; 
    margin: 0 auto;
    padding: 0 20px;
}

/* Remoção total de fundos, caixas e sombras externas indesejadas */
.gallery-item {
    text-align: center;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.gallery-item a {
    text-decoration: none;
    color: inherit;
    display: block;
}

/* ============================================================
   3. IMAGENS CIRCULARES E POSICIONAMENTO DO TÍTULO
   ============================================================ */
.img-wrapper {
    position: relative;
    width: 100%;
    max-width: 360px;
    aspect-ratio: 1 / 1; /* Garante círculo perfeito */
    margin: 0 auto;
    overflow: hidden !important; /* CORTA A IMAGEM AO CRESCER (ESSENCIAL PARA ZOOM) */
    border-radius: 50%;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Preenche o círculo sem distorcer a foto */
    display: block;
    /* --- AJUSTE: TRANSITION PARA O EFEITO SER SUAVE --- */
    transition: transform 0.4s ease, filter 0.4s ease !important;
}

/* Overlay com Gradiente para Leitura (ESTADO PADRÃO) */
.overlay-fixo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Gradiente sutil na base para destacar o texto branco */
    background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 60%) !important;
    border-radius: 50%;
    pointer-events: none; /* Garante que o clique passe para o link */
    /* --- AJUSTE: TRANSITION PARA O ESCURECIMENTO --- */
    transition: background 0.4s ease !important;
}

/* Título centralizado no meio da metade inferior (75% do topo) */
.overlay-title {
    position: absolute;
    top: 75%; /* Ponto central da metade de baixo */
    left: 50%;
    transform: translate(-50%, -50%); /* Centralização perfeita no ponto 75% */
    color: #ffffff !important;
    font-size: 1.7rem;
    font-weight: normal;
    margin: 0;
    width: 85%; /* Respiro para não tocar as bordas curvas */
    text-align: center;
    text-transform: uppercase;
    line-height: 1;
}

/* ============================================================
   4. NOVOS EFEITOS DE INTERAÇÃO (HOVER - MOUSE SOBRE)
   ============================================================ */
/* Efeito 1: Pequeno Zoom (Aumenta 5% a imagem) */
.gallery-item:hover img {
    transform: scale(1.05) !important;
}

/* Efeito 2: Escurecimento (Aumenta a opacidade do gradiente) */
.gallery-item:hover .overlay-fixo {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.1) 60%) !important;
}

/* ============================================================
   5. VERSÃO MOBILE (1 COLUNA - LARGURA TOTAL)
   ============================================================ */
@media (max-width: 768px) {
    
    .gallery-section {
        padding: 0 0 30px 0 !important;
    }

    .menta-title {
        font-size: 1.8rem !important;
    }

    .gallery-container {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 30px 0 !important;
        padding: 0 !important;
        width: 100% !important;
    }

    .gallery-item {
        width: 100% !important;
    }

    /* Imagem ocupando quase toda a largura do celular */
    .img-wrapper {
        width: 95vw !important; 
        max-width: 450px !important; 
        height: auto !important;
        aspect-ratio: 1 / 1 !important; 
        border-radius: 50% !important;
    }

    .overlay-title {
        font-size: 1.9rem !important;
        top: 75%; /* Mantém a proporção de altura no mobile */
    }

    /* Opcional: Desabilitar o zoom no mobile para evitar 'pulos' ao toque */
    .gallery-item:active img {
        transform: none !important;
    }
}