/* Textura de papel antiguo sutil */
.bg-textura {
    background-color: #F4EFE6;
    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.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.04'/%3E%3C/svg%3E");
}

/* Animaciones minimalistas de aparición (Fade Up) */
.reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* --- VARIABLES Y ESTILOS DEL SOBRE --- */
:root {
    --bg-intro: #d1d5db;
    /* Color gris de fondo para fusionarse */
    --beige: #F4EFE6;
    /* Tu Crema */
    --beige-dark: #e6decb;
    /* Crema oscuro */
    --beige-light: #fcfbfa;
    /* Crema muy claro */
    --ink: #3E2A1E;
    /* Tu Cafe Oscuro */
    --gold1: #e6cd98;
    /* Dorado claro */
    --gold2: #C5A059;
    /* Tu Dorado base */
    --gold3: #A38A68;
    /* Tu Sepia */
}

body.locked {
    overflow: hidden;
}

#intro {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: var(--bg-intro);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.8s ease;
}

#intro.out {
    opacity: 0;
    pointer-events: none;
}

#env {
    --w: min(88vw, 360px);
    position: relative;
    width: var(--w);
    height: calc(var(--w)*0.68);
    perspective: 900px;
    animation: enter 1s ease both;
    transition: transform 1s cubic-bezier(.6, 0, .8, .4);
}

#env.leave {
    transform: translateY(120vh);
}

@keyframes enter {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.back {
    position: absolute;
    inset: 0;
    background: var(--beige-dark);
    border-radius: 4px;
    box-shadow: 0 20px 40px rgba(62, 42, 30, .25);
}

.letter {
    position: absolute;
    left: 6%;
    right: 6%;
    top: 6%;
    bottom: 6%;
    background: #ffffff;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.9s ease 0.5s;
    z-index: 1;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
}

#env.open .letter {
    transform: translateY(-55%);
}

.pocket {
    position: absolute;
    inset: 0;
    background: var(--beige);
    z-index: 2;
    border-radius: 4px;
    clip-path: polygon(0 0, 50% 56%, 100% 0, 100% 100%, 0 100%);
}

.flap {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 58%;
    z-index: 4;
    transform-origin: top;
    transition: transform 0.8s ease, z-index 0s 0.4s;
    background: var(--beige-light);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    transform-style: preserve-3d;
}

#env.open .flap {
    transform: rotateX(180deg);
    z-index: 0;
    background: var(--beige-dark);
}

.flap .ini {
    position: absolute;
    top: 14%;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 2.2rem;
    font-size: calc(var(--w)*0.15);
    color: var(--gold2);
    transition: opacity 0.3s;
}

#env.open .flap .ini {
    opacity: 0;
}

#seal {
    position: absolute;
    left: 50%;
    top: 58%;
    width: 76px;
    height: 76px;
    margin: -38px 0 0 -38px;
    z-index: 6;
    border: 0;
    padding: 0;
    cursor: pointer;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, var(--gold1), var(--gold2) 60%, var(--gold3));
    box-shadow: 0 4px 10px rgba(0, 0, 0, .25), inset 0 0 0 4px rgba(255, 255, 255, .2), inset 0 -3px 6px rgba(0, 0, 0, .2);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    animation: pulse 2.2s ease-in-out infinite;
    transition: transform 0.7s cubic-bezier(.5, 0, .9, .5), opacity 0.7s;
}

#seal.drop {
    animation: none;
    transform: translateY(260px) rotate(40deg);
    opacity: 0;
}

@keyframes pulse {

    0%,
    100% {
        transform: scale(1);
        filter: brightness(1);
    }

    50% {
        transform: scale(1.05);
        filter: brightness(1.1);
    }
}

#seal svg {
    width: 34px;
    height: 34px;
}

#seal span {
    font-size: 14px;
    letter-spacing: 1px;
    color: #fff;
    margin-top: -2px;
    font-weight: bold;
}

.hint {
    position: absolute;
    bottom: -44px;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 0.85rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    opacity: 0.7;
    transition: opacity 0.3s;
    color: var(--ink);
}

#env.open .hint {
    opacity: 0;

}

/* --- EFECTO DE ESCRITURA A MANO (Vinculado al botón del sobre) --- */
        @keyframes fluirTinta {
            0% { 
                clip-path: polygon(0 -100%, 0 -100%, 0 200%, 0 200%); 
                -webkit-clip-path: polygon(0 -100%, 0 -100%, 0 200%, 0 200%); 
                opacity: 0;
                transform: translateX(-15px);
            }
            10% { opacity: 1; }
            100% { 
                clip-path: polygon(0 -100%, 150% -100%, 150% 200%, 0 200%); 
                -webkit-clip-path: polygon(0 -100%, 150% -100%, 150% 200%, 0 200%);
                opacity: 1;
                transform: translateX(0);
            }
        }

        .anim-escribir {
            opacity: 0; /* Se queda invisible esperando el clic del sobre */
        }

        /* La animación SOLO funciona cuando el JS pone esta clase "empezar-magia" */
        .empezar-magia .anim-escribir {
            animation-name: fluirTinta;
            animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
            animation-fill-mode: forwards;
        }

        /* Tiempos reprogramados (Le agregué la "s" a tus duraciones para que funcionen) */
        .empezar-magia .retraso-1 { animation-delay: 0.3s; animation-duration: 2.5s; } /* Arranca Diego en cuanto desaparece el sobre */
        .empezar-magia .retraso-2 { animation-delay: 0.9s; animation-duration: 1s; } /* Se espera a que Diego casi termine, el & toma 1s */
        .empezar-magia .retraso-3 { animation-delay: 1.1s; animation-duration: 2.5s; } /* Arranca Itzel cuando el & está terminando */