/* DIVIDERS - Artistic Visual Breaks */
.section-divider {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 4rem 0;
    pointer-events: none;
    z-index: 1;
    overflow: visible;
}

/* ========================= GLASS FRAME OVERLAY (Opcional) ========================= */
/* Ative adicionando a classe .section-divider--glass ao container */
.section-divider.section-divider--glass {
    /* Leve elevação para destacar quando o vidro estiver ativo */
    transition: filter .6s ease, transform .6s ease;
}

/* Camada de vidro acima da imagem (não requer mudar HTML além da classe) */
.section-divider.section-divider--glass::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: clamp(320px, 70%, 880px);
    /* Altura proporcional à largura para formar um retângulo elegante */
    aspect-ratio: 16 / 6.2;
    pointer-events: none;
    z-index: 3; /* Acima da imagem */
    border-radius: 28px;
    background: linear-gradient(
        135deg,
        rgba(255,255,255,0.18) 0%,
        rgba(255,255,255,0.06) 45%,
        rgba(255,255,255,0.22) 100%
    );
    border: 1px solid rgba(255,255,255,0.18);
    box-shadow:
        0 4px 18px -4px rgba(0,0,0,0.4),
        0 0 0 1px rgba(255,255,255,0.12) inset,
        0 0 22px -2px rgba(34,197,94,0.35);
    backdrop-filter: blur(22px) saturate(160%);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    overflow: hidden;
    animation: glassPulse 8s ease-in-out infinite;
}

/* Brilho interno em pseudo-elemento adicional para refração */
.section-divider.section-divider--glass::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: clamp(320px, 70%, 880px);
    aspect-ratio: 16 / 6.2;
    z-index: 4; /* ACIMA do vidro para efeito de luz passando */
    pointer-events: none;
    border-radius: 28px;
    background: linear-gradient(
        110deg,
        transparent 0%,
        transparent 40%,
        rgba(255, 255, 255, 0.8) 50%,
        rgba(34, 197, 94, 0.6) 55%,
        transparent 60%,
        transparent 100%
    );
    background-size: 200% 100%;
    mix-blend-mode: overlay;
    opacity: 0.7;
    animation: lightSweep 3s ease-in-out infinite;
    overflow: hidden;
}

@keyframes glassPulse {
    0%, 100% { box-shadow: 0 4px 18px -4px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.12) inset, 0 0 22px -2px rgba(34,197,94,0.35); }
    50% { box-shadow: 0 6px 26px -4px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.14) inset, 0 0 40px -2px rgba(16,185,129,0.55); }
}

@keyframes lightSweep {
    0% { 
        background-position: -200% 0;
        opacity: 0;
    }
    20% {
        opacity: 0.7;
    }
    50% { 
        background-position: 0% 0;
        opacity: 0.9;
    }
    80% {
        opacity: 0.7;
    }
    100% { 
        background-position: 200% 0;
        opacity: 0;
    }
}

/* Hover (desktop apenas – não afeta mobile pois depende de :hover) */
@media (hover: hover) and (pointer: fine) {
    .section-divider.section-divider--glass:hover {
        filter: brightness(1.05) saturate(120%);
        transform: translateY(-6px);
    }
}

.section-divider img {
    max-width: 90%;
    width: 650px;
    height: auto;
    border-radius: 24px;
    padding: 20px;
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.08),
        0 2px 8px rgba(0, 0, 0, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 184, 148, 0.1);
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
}

/* Borda decorativa sutil */
.section-divider img::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 26px;
    padding: 2px;
    background: linear-gradient(135deg, 
        rgba(0, 184, 148, 0.3) 0%, 
        rgba(9, 132, 227, 0.2) 50%,
        rgba(0, 184, 148, 0.3) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

/* Variações para não ficar repetitivo - MESMO TAMANHO */
.section-divider--alt img {
    width: 650px; /* Padronizado */
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border: 1px solid rgba(9, 132, 227, 0.12);
}

.section-divider--small img {
    width: 650px; /* Padronizado */
    padding: 20px; /* Mesmo padding */
}

/* Hover suave (apenas desktop) */
@media (hover: hover) and (pointer: fine) {
    .section-divider img:hover {
        transform: translateY(-4px);
        box-shadow: 
            0 12px 48px rgba(0, 0, 0, 0.12),
            0 4px 12px rgba(0, 0, 0, 0.06),
            inset 0 1px 0 rgba(255, 255, 255, 1);
    }
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .section-divider {
        padding: 2.5rem 0;
    }
    
    .section-divider img {
        width: 95%;
        max-width: none;
        padding: 16px;
        border-radius: 20px;
    }
    
    /* Todas as variantes com mesmo tamanho no mobile */
    .section-divider--alt img,
    .section-divider--small img {
        width: 95%;
        max-width: none;
        padding: 16px;
        border-radius: 20px;
    }
}