/* Background de motivos solo para el div background-motivos - pegados a los lados del contenedor de 1200px */

.background-motivos {
    position: relative;
    overflow-x: hidden; /* Previene scroll horizontal */
    overflow-y: visible; /* Permite scroll vertical normal */
    width: 100%;
}

.background-motivos::before,
.background-motivos::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100px; /* Ancho del motivo en mobile */
    /* background-image: url('../imaxes/motivo-vertical-repeat-movil.svg'); Mobile por defecto */
    background-repeat: repeat-y;
    background-position: top center;
    pointer-events: none;
    z-index: 0;
}

/* En mobile: motivos pegados al borde del contenedor (padding 30px) */
.background-motivos::before {
    left: calc(30px - 100px); /* El borde derecho del motivo está en 30px */
}

.background-motivos::after {
    left: calc(100% - 30px); /* El borde izquierdo del motivo está en el borde derecho del contenido */
}

/* Asegurar que el contenedor, las secciones y el footer estén por encima del motivo */
.background-motivos .contenedor {
    position: relative;
    z-index: 1;
}

.background-motivos section {
    position: relative;
    z-index: 1;
}

.background-motivos footer {
    position: relative;
    z-index: 1;
}

@media (min-width: 992px) {
    /* En desktop: motivos separados a 1250px (centrado, 20px más cerca por cada lado) */
    .background-motivos::before,
    .background-motivos::after {
        width: 300px; /* Ancho del motivo en desktop */
   /*     background-image: url('../imaxes/motivo-vertical-repeat.svg'); Desktop usa el SVG normal */
    }

    .background-motivos::before {
        left: calc(50% - 625px - 300px); /* El borde derecho del motivo está en el borde izquierdo de 1250px (50% - 625px) */
    }

    .background-motivos::after {
        left: calc(50% + 625px); /* El borde izquierdo del motivo está en el borde derecho de 1250px (50% + 625px) */
    }
}