/* ===== DIVISORES CURVOS Y TEXTURAS ===== */

/* Texturas sutiles para secciones */
.about {
    position: relative;
    background:
        repeating-linear-gradient(90deg,
            transparent,
            transparent 2px,
            rgba(0, 0, 0, 0.01) 2px,
            rgba(0, 0, 0, 0.01) 4px),
        var(--gris-claro);
}

.certifications {
    position: relative;
    background:
        linear-gradient(135deg,
            var(--hunter-green) 0%,
            var(--verde-oscuro) 100%),
        repeating-linear-gradient(45deg,
            transparent,
            transparent 10px,
            rgba(255, 255, 255, 0.02) 10px,
            rgba(255, 255, 255, 0.02) 20px);
    background-blend-mode: normal, overlay;
}

footer {
    position: relative;
    /* Fondo naranja tomate - igual al subtítulo de Nosotros */
    background:
        linear-gradient(135deg,
            var(--secondary) 0%,
            #e87100 100%),
        repeating-linear-gradient(90deg,
            transparent,
            transparent 15px,
            rgba(255, 255, 255, 0.03) 15px,
            rgba(255, 255, 255, 0.03) 30px);
    background-blend-mode: normal, overlay;
}

/* ===== DIVISORES CON FORMA DE ONDA ===== */

/* Divisor superior de la sección Nosotros */
.about::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background: white;
    clip-path: polygon(0 0,
            100% 0,
            100% 30px,
            90% 40px,
            80% 35px,
            70% 45px,
            60% 30px,
            50% 50px,
            40% 35px,
            30% 45px,
            20% 30px,
            10% 40px,
            0 35px);
    z-index: 1;
}

/* Divisor inferior de la sección Nosotros (hacia Certificaciones) */
.about::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 80px;
    background: var(--gris-claro);
    clip-path: polygon(0 40px,
            10% 30px,
            20% 50px,
            30% 25px,
            40% 45px,
            50% 20px,
            60% 50px,
            70% 30px,
            80% 45px,
            90% 25px,
            100% 40px,
            100% 100%,
            0 100%);
    z-index: 1;
}

/* Divisor superior de Certificaciones */
.certifications::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;
    background: linear-gradient(135deg, var(--hunter-green) 0%, var(--verde-oscuro) 100%);
    clip-path: polygon(0 0,
            100% 0,
            100% 40px,
            90% 25px,
            80% 45px,
            70% 30px,
            60% 50px,
            50% 20px,
            40% 45px,
            30% 25px,
            20% 50px,
            10% 30px,
            0 40px);
}

/* Divisor inferior de Certificaciones (hacia Footer) */
.certifications::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 100px;
    background: linear-gradient(135deg, var(--hunter-green) 0%, var(--verde-oscuro) 100%);
    clip-path: polygon(0 50px,
            10% 35px,
            20% 60px,
            30% 30px,
            40% 55px,
            50% 25px,
            60% 60px,
            70% 35px,
            80% 55px,
            90% 30px,
            100% 50px,
            100% 100%,
            0 100%);
}

/* Divisor superior del Footer */
footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100px;
    background: linear-gradient(135deg, var(--secondary) 0%, #e87100 100%);
    clip-path: polygon(0 0,
            100% 0,
            100% 50px,
            90% 30px,
            80% 55px,
            70% 35px,
            60% 60px,
            50% 25px,
            40% 55px,
            30% 30px,
            20% 60px,
            10% 35px,
            0 50px);
}

/* Asegurar que el contenido esté sobre los divisores */
.about .container,
.certifications .container,
footer .footer-content {
    position: relative;
    z-index: 2;
}

/* Mejorar contraste de títulos en Nosotros */
.about .section-subtitle {
    color: var(--secondary);
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.about .section-title {
    color: var(--hunter-green);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    font-weight: 800;
}

/* Responsive: Simplificar divisores en móviles */
@media (max-width: 768px) {

    .about::before,
    .about::after,
    .certifications::before,
    .certifications::after,
    footer::before {
        height: 40px;
        clip-path: polygon(0 0,
                100% 0,
                100% 20px,
                75% 30px,
                50% 15px,
                25% 30px,
                0 20px);
    }

    .about::after,
    .certifications::after {
        clip-path: polygon(0 20px,
                25% 30px,
                50% 15px,
                75% 30px,
                100% 20px,
                100% 100%,
                0 100%);
    }
}