/* Estilos para los conectores entre secciones */

/* Conector básico entre secciones */
.section-connector {
    height: 60px;
    position: relative;
    overflow: hidden;
    margin: -20px auto;
    z-index: 1;
}

/* Efecto de onda para el conector */
.section-connector::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 100%);
    transform: skewY(-2deg);
    z-index: -1;
}

/* Variante para conectores entre secciones de colores diferentes */
.section-connector.dark-to-light {
    background: linear-gradient(to bottom, rgba(128, 90, 213, 0.1) 0%, rgba(255, 255, 255, 0.8) 100%);
}

.section-connector.light-to-dark {
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.8) 0%, rgba(128, 90, 213, 0.1) 100%);
}

/* Animación sutil para los conectores */
.section-connector.animated {
    animation: wave 8s infinite ease-in-out;
}

@keyframes wave {
    0%, 100% {
        transform: skewY(-2deg);
    }
    50% {
        transform: skewY(2deg);
    }
}

/* Decoración para los conectores */
.section-connector.decorated::after {
    content: '✨';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 20px;
    opacity: 0.5;
    color: #805AD5;
}

/* Estilos para dispositivos móviles */
@media (max-width: 768px) {
    .section-connector {
        height: 40px;
        margin: -10px auto;
    }
}