/* Asegurar que el body no tenga scroll mientras carga */
        body.hidden-snack {
            overflow: hidden;
        }

        #global-loader {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            /* Mismo azul que el hero (bg-blue-600) */
            background-color: #ffffff;
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 9999;
            /* Por encima de todo */
            transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
            opacity: 1;
            visibility: visible;
        }

        /* Clase para ocultar con transición */
        #global-loader.loader-hidden {
            opacity: 0;
            visibility: hidden;
        }

        .smiley-container {
            text-align: center;
        }

        .smiley-text {
            font-size: 6rem;
            /* Tamaño grande y visible */
            font-weight: bold;
            color: black;
            display: inline-block;
            /* Animación combinada: latido y rotación leve */
            animation: happyPulse 1.5s infinite ease-in-out;
            font-family: sans-serif;
            /* Para asegurar el diseño del caracter */
        }

        /* Definición de la animación */
        @keyframes happyPulse {
            0% {
                transform: scale(1) rotate(0deg);
                opacity: 0.8;
            }

            50% {
                transform: scale(1.2) rotate(5deg);
                opacity: 1;
            }

            100% {
                transform: scale(1) rotate(0deg);
                opacity: 0.8;
            }
        }