/* Efecto de ola para el footer */

/* Footer con ola */
footer {
    position: relative;
    padding-top: 80px; /* Espacio para la ola */
    margin-top: -1px; /* Evitar línea blanca */
}

/* SVG Wave */
.footer-wave {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
}

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

/* Colores de la ola */
.footer-wave .shape-fill {
    fill: #0d0d0d; /* Negro del footer */
}

/* Modo claro - rojo oscuro */
.light-theme .footer-wave .shape-fill {
    fill: #5c1414; /* Rojo muy oscuro */
}

/* Asegurar que el contenido esté por encima de la ola */
footer .container {
    position: relative;
    z-index: 2;
}

/* Añadir espacio antes del footer para que se vea la ola */
#contact {
    padding-bottom: 50px !important;
}

/* Para cualquier sección que esté antes del footer */
body > section:last-of-type,
main > section:last-of-type {
    position: relative;
    z-index: 1;
}

/* Animación sutil opcional */
@keyframes waveAnimation {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* Aplicar animación solo si el usuario lo desea */
.footer-wave.animated svg {
    width: 200%;
    animation: waveAnimation 20s linear infinite;
}

/* Responsive */
@media (max-width: 768px) {
    footer {
        padding-top: 50px;
    }
    
    .footer-wave svg {
        height: 50px;
    }
    
    #contact {
        padding-bottom: 30px !important;
    }
}

@media (max-width: 480px) {
    footer {
        padding-top: 40px;
    }
    
    .footer-wave svg {
        height: 40px;
    }
}