/* ============================================
   SEPARADORES SVG MODERNOS - PREMIUM
   Curvas, ondas y divisores con movimiento
   ============================================ */

/* Contenedor base para separadores */
.section-separator {
    position: relative;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    pointer-events: none;
}

/* -------- ONDAS SUAVES -------- */
.wave-divider-top {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    z-index: 1;
}

.wave-divider-top svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 80px;
}

.wave-divider-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    transform: rotate(180deg);
    z-index: 1;
}

.wave-divider-bottom svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 80px;
}

/* -------- CURVAS DINÁMICAS -------- */
.curve-divider-top {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
}

.curve-divider-top svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 100px;
}

.curve-divider-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    transform: rotate(180deg);
}

.curve-divider-bottom svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 100px;
}

/* -------- DIAGONALES MODERNAS -------- */
.diagonal-top-left {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 120px;
    background: inherit;
    transform: skewY(-2deg);
    transform-origin: top left;
}

.diagonal-top-right {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 120px;
    background: inherit;
    transform: skewY(2deg);
    transform-origin: top right;
}

.diagonal-bottom-left {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 120px;
    background: inherit;
    transform: skewY(2deg);
    transform-origin: bottom left;
}

.diagonal-bottom-right {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 120px;
    background: inherit;
    transform: skewY(-2deg);
    transform-origin: bottom right;
}

/* -------- CAPAS SOBREPUESTAS -------- */
.layered-divider {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
}

.layered-divider svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 150px;
}

/* -------- SEPARADOR CON GRADIENTE -------- */
.gradient-divider {
    position: relative;
    height: 8px;
    background: linear-gradient(
        90deg,
        var(--color-navy-primary) 0%,
        var(--color-accent-cyan) 50%,
        var(--color-accent-gold) 100%
    );
    margin: 4rem 0;
}

.gradient-divider::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
    background: radial-gradient(
        circle,
        rgba(0, 188, 212, 0.2) 0%,
        transparent 70%
    );
    filter: blur(40px);
}

/* -------- ANIMACIONES SUTILES -------- */
@keyframes wave-animation {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

.wave-animated {
    animation: wave-animation 15s linear infinite;
}

/* -------- RESPONSIVE -------- */
@media (max-width: 768px) {
    .wave-divider-top svg,
    .wave-divider-bottom svg {
        height: 50px;
    }

    .curve-divider-top svg,
    .curve-divider-bottom svg {
        height: 60px;
    }

    .diagonal-top-left,
    .diagonal-top-right,
    .diagonal-bottom-left,
    .diagonal-bottom-right {
        height: 60px;
    }

    .layered-divider svg {
        height: 80px;
    }
}

/* -------- CLASES DE COLOR PARA SEPARADORES -------- */
.separator-navy {
    fill: var(--color-navy-primary);
}

.separator-navy-dark {
    fill: var(--color-navy-dark);
}

.separator-white {
    fill: #ffffff;
}

.separator-gray {
    fill: var(--color-bg-premium);
}

.separator-light {
    fill: var(--color-bg-light);
}

/* -------- SEPARADORES CON DEGRADADO SVG -------- */
/* Los separadores con degradado usan <linearGradient> dentro del SVG
   en lugar de clases CSS de fill sólido.
   Shortcodes disponibles:
   [wave_separator_gradient position="bottom" color_start="#0A1F44" color_end="#1E3A5F" direction="horizontal"]
   [curve_separator_gradient position="bottom" color_start="#0A1F44" color_end="#1E3A5F" direction="horizontal"]
   Parámetros:
   - position: 'top' o 'bottom'
   - color_start: color hex inicio del degradado
   - color_end: color hex final del degradado
   - direction: 'horizontal' (izq→der) o 'vertical' (arriba→abajo)
*/

/* -------- PADDING ADICIONAL PARA SECCIONES CON SEPARADORES -------- */
.has-divider-top {
    padding-top: 100px;
    position: relative;
}

.has-divider-bottom {
    padding-bottom: 100px;
    position: relative;
}

@media (max-width: 768px) {
    .has-divider-top {
        padding-top: 60px;
    }

    .has-divider-bottom {
        padding-bottom: 60px;
    }
}