/* ================================================================
   waves.css
   Fondo de ondas fluidas estilo índigo / lavanda
   — SVG con bezier curves embebido como data-URI —
   Aplicado a .wave-background (envuelve #sobre-mi + #evaluacion)
   ================================================================ */
/* ── Contenedor principal ────────────────────────────────────── */
.wave-background {
    position: relative;

    /* Fallback color por si el data-URI no carga */
    /* SVG: fondo blanco/lavanda muy suave + 4 ondas con opacidades bajas
         Fondo         : blanco puro
         Onda 1 (baja) : rgba(40,37,80,  0.10)  navy muy suave
         Onda 2        : rgba(92,82,158, 0.09)   índigo suave
         Onda 3        : rgba(165,148,205,0.10)  lavanda suave
         Onda 4 (alta) : rgba(205,190,228,0.08)  lavanda claro tenue */
    background-size: 100% 100%;

    /* estira el SVG para cubrir todo el contenedor */
    background-repeat: no-repeat;
    isolation: isolate;
    overflow: hidden;
    padding-top: 0px;
}

/* Las secciones internas quedan por encima del fondo */
.wave-background>section,
.wave-background>div {
    position: relative;
    z-index: 1;
}

/* ── Legibilidad: fuerza texto oscuro sobre el fondo claro ───── */
/* Títulos de sección h2 */
.wave-background h2 {
    color: var(--color-primary-dark) !important;
    text-shadow: none !important;
}

/* Subtítulos h3 y textos de lista */
.wave-background h3,
.wave-background ul li {
    color: #252C58 !important;
    text-shadow: none !important;
}

/* Párrafos generales */
.wave-background p {
    color: var(--color-primary-dark) !important;
    text-shadow: none !important;
    margin-bottom: 40px;
}

/* ── Restaura texto blanco dentro del bloque oscuro "Experiencia Personal" ─ */
.wave-background .bg-purple-900,
.wave-background .bg-purple-900 h3,
.wave-background .bg-purple-900 p,
.wave-background .bg-purple-900 li {
    color: white !important;
    margin-bottom: 40px;
    margin-top: 20px;
}