/* ==========================================================================
   WAVY HEADER ULTIMATE - ESTILOS COMPLETOS
   ========================================================================== */

/* Animación del Movimiento de la Onda */
@keyframes wave-slide {
    from { 
        mask-position: 0 0; 
        -webkit-mask-position: 0 0; 
    }
    to { 
        mask-position: 100% 0; 
        -webkit-mask-position: 100% 0; 
    }
}

/* CLASE PRINCIPAL DE LA ONDA */
.wavy-shape {
    width: 100%;
    position: relative;
    /* Esta imagen SVG define la forma de "serpiente" u "ola" */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20' preserveAspectRatio='none'%3E%3Cpath d='M0 10 Q 25 20 50 10 T 100 10' vector-effect='non-scaling-stroke' stroke='black' stroke-width='12' fill='none' /%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20' preserveAspectRatio='none'%3E%3Cpath d='M0 10 Q 25 20 50 10 T 100 10' vector-effect='non-scaling-stroke' stroke='black' stroke-width='12' fill='none' /%3E%3C/svg%3E");
    
    -webkit-mask-repeat: repeat-x;
    mask-repeat: repeat-x;
    
    /* Animación del movimiento */
    animation-name: wave-slide;
    animation-timing-function: linear;
    animation-iteration-count: infinite;

    /* Mezcla de colores al entrelazarse */
    mix-blend-mode: screen;
    opacity: 0.95;
    
    /* Sombra suave para volumen */
    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.2));

    /* Soporte para ajustes de posición milimétricos */
    transition: transform 0.3s ease, margin 0.3s ease, height 0.3s ease;
    will-change: transform;
}

/* Estructura Base */
.wavy-header-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.wavy-bg-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.wavy-bg-image, .wavy-bg-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wavy-bg-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.wavy-content-wrapper {
    position: relative;
    z-index: 10;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.wavy-stripes-wrapper-top, 
.wavy-stripes-wrapper-bottom {
    position: relative;
    z-index: 5;
    display: flex;
    flex-direction: column;
    width: 100%;
    /* Padding para permitir que las ondas se salgan un poco sin cortarse */
    padding: 15px 0; 
}

/* Estilos de Texto y Subtítulos */
.wavy-title, 
.wavy-sub-1, 
.wavy-sub-2, 
.wavy-sub-3 {
    margin: 5px 0;
    display: block;
    width: 100%;
    /* Transición suave para los cambios de posición vertical */
    transition: transform 0.3s ease, color 0.3s ease, font-size 0.3s ease;
    will-change: transform;
}

/* Efecto Neón */
.neon-effect {
    text-shadow: 0 0 10px currentColor, 0 0 20px currentColor, 0 0 40px currentColor;
    filter: brightness(1.3) contrast(1.1);
}

/* Botón */
.wavy-button {
    display: inline-block;
    margin-top: 20px;
    padding: 12px 35px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: bold;
    transition: transform 0.3s ease, background-color 0.3s ease;
    position: relative;
    z-index: 11;
}

.wavy-button:hover { 
    transform: translateY(-2px); 
}