/* ========================================
   RESPONSIVE - MOBILE OPTIMIZATION
======================================== */

@media (max-width: 768px) {

    /* Reducir tamaño de títulos en móvil */
    .wave-text {
        font-size: 2.5rem !important;
    }

    /* Ajustar animación typewriter para móvil (más rápida) */
    .wave-text span {
        animation-duration: 0.05s !important;
    }

    .wave-text span:nth-child(1) {
        animation-delay: 0s !important;
    }

    .wave-text span:nth-child(2) {
        animation-delay: 0.04s !important;
    }

    .wave-text span:nth-child(3) {
        animation-delay: 0.08s !important;
    }

    .wave-text span:nth-child(4) {
        animation-delay: 0.12s !important;
    }

    .wave-text span:nth-child(5) {
        animation-delay: 0.16s !important;
    }

    .wave-text span:nth-child(6) {
        animation-delay: 0.2s !important;
    }

    .wave-text span:nth-child(7) {
        animation-delay: 0.24s !important;
    }

    .wave-text span:nth-child(8) {
        animation-delay: 0.28s !important;
    }

    .wave-text span:nth-child(9) {
        animation-delay: 0.32s !important;
    }

    .wave-text span:nth-child(10) {
        animation-delay: 0.36s !important;
    }

    .wave-text span:nth-child(11) {
        animation-delay: 0.4s !important;
    }

    .wave-text span:nth-child(12) {
        animation-delay: 0.44s !important;
    }

    .wave-text span:nth-child(13) {
        animation-delay: 0.48s !important;
    }

    .wave-text span:nth-child(14) {
        animation-delay: 0.52s !important;
    }

    .wave-text span:nth-child(15) {
        animation-delay: 0.56s !important;
    }

    .wave-text span:nth-child(16) {
        animation-delay: 0.6s !important;
    }

    .wave-text span:nth-child(17) {
        animation-delay: 0.64s !important;
    }

    .wave-text span:nth-child(18) {
        animation-delay: 0.68s !important;
    }

    .wave-text span:nth-child(19) {
        animation-delay: 0.72s !important;
    }

    .wave-text span:nth-child(20) {
        animation-delay: 0.76s !important;
    }

    /* Optimizar sección tienda */
    #layer3 h2.wave-text {
        font-size: 2rem !important;
        text-align: center;
    }

    /* Footer título */
    footer h2.wave-text {
        font-size: 2rem !important;
    }

    /* Ajustar padding general */
    .content {
        padding: 20px 15px;
    }

    /* Optimizar imágenes helado */
    .helado-img {
        max-width: 80% !important;
    }

    /* Marquee más pequeño en móvil */
    .marquee {
        font-size: 12vw !important;
    }
}

@media (max-width: 480px) {

    /* Smartphones pequeños */
    .wave-text {
        font-size: 2rem !important;
    }

    #layer3 h2.wave-text {
        font-size: 1.5rem !important;
    }

    footer h2.wave-text {
        font-size: 1.8rem !important;
    }
}

/* Animación Typewriter para títulos */
.wave-text {
    display: inline-block;
    overflow: hidden;
}

.wave-text span {
    display: inline-block;
    opacity: 0;
    animation: typewriter 0.1s ease-in forwards;
}

.wave-text span:nth-child(1) {
    animation-delay: 0s;
}

.wave-text span:nth-child(2) {
    animation-delay: 0.08s;
}

.wave-text span:nth-child(3) {
    animation-delay: 0.16s;
}

.wave-text span:nth-child(4) {
    animation-delay: 0.24s;
}

.wave-text span:nth-child(5) {
    animation-delay: 0.32s;
}

.wave-text span:nth-child(6) {
    animation-delay: 0.4s;
}

.wave-text span:nth-child(7) {
    animation-delay: 0.48s;
}

.wave-text span:nth-child(8) {
    animation-delay: 0.56s;
}

.wave-text span:nth-child(9) {
    animation-delay: 0.64s;
}

.wave-text span:nth-child(10) {
    animation-delay: 0.72s;
}

.wave-text span:nth-child(11) {
    animation-delay: 0.8s;
}

.wave-text span:nth-child(12) {
    animation-delay: 0.88s;
}

.wave-text span:nth-child(13) {
    animation-delay: 0.96s;
}

.wave-text span:nth-child(14) {
    animation-delay: 1.04s;
}

.wave-text span:nth-child(15) {
    animation-delay: 1.12s;
}

.wave-text span:nth-child(16) {
    animation-delay: 1.2s;
}

.wave-text span:nth-child(17) {
    animation-delay: 1.28s;
}

.wave-text span:nth-child(18) {
    animation-delay: 1.36s;
}

.wave-text span:nth-child(19) {
    animation-delay: 1.44s;
}

.wave-text span:nth-child(20) {
    animation-delay: 1.52s;
}

@keyframes typewriter {
    0% {
        opacity: 0;
        transform: translateX(-5px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}