/* Paleta refinada: verde salvia, rosa empolvado, marfil, carbón y dorado */

        body {
            background-color: #f6f1e8; /* Fondo crema arena de respaldo */
            background-image: radial-gradient(#d8cbbd 1.5px, transparent 1.5px);
            background-size: 32px 32px;
            font-family: 'Montserrat', sans-serif;
            margin: 0;
            padding: 0;
            height: 100vh;
            width: 100vw;
            display: flex;
            flex-direction: column;
            justify-content: flex-end; /* Alineación total al borde inferior */
            overflow: hidden;
            position: relative;
        }

        /* Tipografías específicas de la imagen original */
        .font-retro-title {
            font-family: 'Montserrat', sans-serif;
            font-weight: 900;
            letter-spacing: -0.04em;
        }

        .font-retro-cursive {
            font-family: 'Playfair Display', serif;
            font-style: italic;
            font-weight: 400;
        }

        /* Filtro de textura táctil de lienzo/papel rugoso premium */
        .textured {
            position: relative;
        }
        .textured::after {
            content: "";
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            opacity: 0.18;
            pointer-events: none;
            mix-blend-mode: overlay;
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='roughNoise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23roughNoise)'/%3E%3C/svg%3E");
            border-radius: inherit;
        }

        /* Ocultar barra de desplazamiento manteniendo la funcionalidad */
        .no-scrollbar::-webkit-scrollbar {
            display: none;
        }
        .no-scrollbar {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }

        /* Transición suave de posicionamiento y tamaño */
        .folder-card {
            transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), z-index 0.8s ease, box-shadow 0.8s ease;
        }

        /* Sombras realistas que dan profundidad de capas */
        .shadow-folder {
            box-shadow: 0 -4px 15px rgba(30, 29, 27, 0.04), 0 8px 30px rgba(75, 61, 54, 0.12);
        }
        .shadow-folder-active {
            box-shadow: 0 -10px 25px rgba(30, 29, 27, 0.08), 0 35px 70px rgba(30, 29, 27, 0.22);
        }

        /* Animaciones para los destellos y brillos */
        @keyframes destelloBrillo {
            0%, 100% { opacity: 0.3; transform: scale(0.8) rotate(0deg); }
            50% { opacity: 1; transform: scale(1.3) rotate(180deg); }
        }
        .destello-animado {
            animation: destelloBrillo 3s infinite ease-in-out;
        }
        .destello-rapido {
            animation: destelloBrillo 1.8s infinite ease-in-out;
        }

        /* Estilos y animación para los emojis que caen dentro de la carpeta verde */
        @keyframes fall {
            0% {
                transform: translateY(-50px) rotate(0deg);
                opacity: 1;
            }
            100% {
                transform: translateY(75vh) rotate(360deg);
                opacity: 0.2;
            }
        }
        .falling-emoji {
            position: absolute;
            top: -50px;
            pointer-events: none;
            z-index: 1; /* Se mantiene arriba del fondo pero debajo del contenido de la carpeta */
            animation: fall var(--fall-duration) linear infinite;
        }