/* --- FUENTES --- */
        .font-script { font-family: 'Great Vibes', cursive; }
        .font-serif-title { font-family: 'Cinzel', serif; }
        .font-serif-body { font-family: 'Cormorant Garamond', serif; }
        .font-sans { font-family: 'Montserrat', sans-serif; }

        /* --- TEXTURAS --- */
        .bg-paper-texture {
            background-color: #FBF6F1; /* Blanco cálido */
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.03'/%3E%3C/svg%3E");
        }
        
        /* Textura Sobre */
        .envelope-texture {
            background-color: #DDD0BC; /* Beige base */
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.15'/%3E%3C/svg%3E");
        }

        /* --- UTILIDADES --- */
        .text-gold {
            background: linear-gradient(to right, #C48E96, #E4AD9A, #B37F89, #C48E96);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .monogram-overlay {
            color: rgba(150, 110, 110, 0.35); 
            mix-blend-mode: multiply;
            opacity: 0.8;
        }

        /* --- ANIMACIONES DE ENTRADA (LENTAS: 2.5s) --- */
        .fade-element {
            opacity: 0;
            transition: all 2.5s cubic-bezier(0.16, 1, 0.3, 1);
        }
        
        .fade-up { transform: translateY(60px); }
        .fade-left { transform: translateX(-80px); }
        .fade-right { transform: translateX(80px); }

        .visible {
            opacity: 1;
            transform: translate(0, 0);
        }

        /* --- SOBRE 3D --- */
        .envelope-overlay {
            transition: opacity 1.5s ease, visibility 1.5s;
        }
        .envelope-overlay.hidden-overlay {
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
        }

        .envelope-wrapper {
            perspective: 2000px;
            width: 90vw;
            max-width: 600px;
            aspect-ratio: 1.4;
            position: relative;
            transition: transform 1.5s ease-in-out;
            cursor: pointer;
        }

        .card-layer {
            position: absolute;
            inset: 10px;
            background: white;
            z-index: 10;
            transition: transform 2.5s cubic-bezier(0.4, 0, 0.2, 1) 0.5s;
            box-shadow: 0 -5px 15px rgba(0,0,0,0.1);
            display: flex;
            flex-direction: column;
            align-items: center;
            padding-top: 40px;
        }

        .flap {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
        }
        .flap-left {
            clip-path: polygon(0 0, 0% 100%, 55% 50%);
            background-color: #CFC0A8; 
            z-index: 20;
        }
        .flap-right {
            clip-path: polygon(100% 0, 100% 100%, 45% 50%);
            background-color: #D5C6B1; 
            z-index: 21;
        }
        .flap-bottom {
            clip-path: polygon(0 100%, 100% 100%, 50% 55%);
            background-color: #E8DDD0; 
            z-index: 22;
            filter: drop-shadow(0 -5px 15px rgba(0,0,0,0.15));
        }
        .flap-top {
            transform-origin: top;
            transition: transform 2.5s cubic-bezier(0.4, 0, 0.2, 1);
            z-index: 30;
            clip-path: polygon(0 0, 100% 0, 50% 55%);
            background-color: #DDD0BC;
            filter: drop-shadow(0 5px 10px rgba(0,0,0,0.1));
            backface-visibility: hidden;
        }

        .envelope-inside {
            position: absolute;
            inset: 0;
            background-color: #3D302A; 
            z-index: 5;
        }

        .envelope-wrapper.is-open .flap-top {
            transform: rotateX(180deg);
            z-index: 1;
        }
        .envelope-wrapper.is-open .card-layer {
            transform: translateY(-80%);
            z-index: 15;
        }
        .envelope-wrapper.envelope-exit {
            transform: translateY(150%) scale(0.9);
            opacity: 0;
            pointer-events: none;
        }

        .wax-seal-btn {
            transition: opacity 1s ease;
            z-index: 40;
        }
        .envelope-wrapper.is-open .wax-seal-btn {
            opacity: 0;
            pointer-events: none;
        }

        .music-btn {
            position: fixed;
            bottom: 20px;
            right: 20px;
            z-index: 100;
            background: #DDD0BC; 
            color: #7D9B6F; 
            padding: 10px;
            border-radius: 50%;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            transition: all 0.3s ease;
            cursor: pointer;
            opacity: 0;
            pointer-events: none;
        }
        .music-btn.show {
            opacity: 1;
            pointer-events: auto;
        }
        .music-btn:hover {
            transform: scale(1.1);
            background: #FBF6F1;
        }

        #main-content {
            opacity: 0;
            transition: opacity 2s ease;
            height: 0;
            overflow: hidden;
        }
        #main-content.show {
            opacity: 1;
            height: auto;
            overflow: visible;
        }

        .gift-tab-btn.active {
            color: #C48E96;
            border-bottom: 2px solid #C48E96;
        }
        .gift-content {
            display: none;
            animation: fadeIn 1s ease;
        }
        .gift-content.active {
            display: block;
        }
                @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
        
                        .delay-1 { transition-delay: 0.3s; }
                        .delay-2 { transition-delay: 0.6s; }
                        .delay-3 { transition-delay: 0.9s; }
                        .delay-4 { transition-delay: 1.2s; }
                        .delay-5 { transition-delay: 1.5s; }