/* Sistema de Control de Espaciado entre Secciones */

/* Variables CSS para controlar el espaciado */
:root {
    --section-spacing-small: 30px;
    --section-spacing-medium: 60px;
    --section-spacing-large: 90px;
    --section-spacing-xl: 120px;
}

/* Clases de espaciado flexibles */
.section-spacing-none {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.section-spacing-small {
    padding-top: var(--section-spacing-small) !important;
    padding-bottom: var(--section-spacing-small) !important;
}

.section-spacing-medium {
    padding-top: var(--section-spacing-medium) !important;
    padding-bottom: var(--section-spacing-medium) !important;
}

.section-spacing-large {
    padding-top: var(--section-spacing-large) !important;
    padding-bottom: var(--section-spacing-large) !important;
}

.section-spacing-xl {
    padding-top: var(--section-spacing-xl) !important;
    padding-bottom: var(--section-spacing-xl) !important;
}

/* Espaciado solo superior */
.section-spacing-top-small {
    padding-top: var(--section-spacing-small) !important;
    padding-bottom: 0 !important;
}

.section-spacing-top-medium {
    padding-top: var(--section-spacing-medium) !important;
    padding-bottom: 0 !important;
}

.section-spacing-top-large {
    padding-top: var(--section-spacing-large) !important;
    padding-bottom: 0 !important;
}

.section-spacing-top-xl {
    padding-top: var(--section-spacing-xl) !important;
    padding-bottom: 0 !important;
}

/* Espaciado solo inferior */
.section-spacing-bottom-small {
    padding-top: 0 !important;
    padding-bottom: var(--section-spacing-small) !important;
}

.section-spacing-bottom-medium {
    padding-top: 0 !important;
    padding-bottom: var(--section-spacing-medium) !important;
}

.section-spacing-bottom-large {
    padding-top: 0 !important;
    padding-bottom: var(--section-spacing-large) !important;
}

.section-spacing-bottom-xl {
    padding-top: 0 !important;
    padding-bottom: var(--section-spacing-xl) !important;
}

/* Clases para espaciado personalizado */
.section-spacing-custom {
    padding-top: var(--custom-top-spacing, 60px) !important;
    padding-bottom: var(--custom-bottom-spacing, 60px) !important;
}

/* Espaciado específico de 4cm */
.section-spacing-4cm {
    padding-top: 4cm !important;
    padding-bottom: 4cm !important;
}

.section-spacing-top-4cm {
    padding-top: 4cm !important;
    padding-bottom: 0 !important;
}

.section-spacing-bottom-4cm {
    padding-top: 0 !important;
    padding-bottom: 4cm !important;
}

/* Override para secciones específicas */
.section-tight {
    --section-spacing-small: 15px;
    --section-spacing-medium: 30px;
    --section-spacing-large: 45px;
}

.section-loose {
    --section-spacing-small: 45px;
    --section-spacing-medium: 90px;
    --section-spacing-large: 135px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    :root {
        --section-spacing-small: 20px;
        --section-spacing-medium: 40px;
        --section-spacing-large: 60px;
        --section-spacing-xl: 80px;
    }
}

@media (max-width: 480px) {
    :root {
        --section-spacing-small: 15px;
        --section-spacing-medium: 30px;
        --section-spacing-large: 45px;
        --section-spacing-xl: 60px;
    }
}