/* Estilos base del sobre (animación y formas) */
.envelope-wrapper {
    position: relative;
    width: 640px;
    height: 420px;
    margin: 100px auto 0; /* Más margen para que no tape el título al abrir */
    transform-origin: top center;
    transition: transform 0.3s ease-out;
}

.envelope {
    width: 640px;
    height: 420px;
    /* Color base del sobre (Marrón cartón) */
    background: #D2A679;
    position: relative;
}

.envelope:after,
.envelope:before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    border-style: solid;
    border-width: 420px 0 0 640px;
    /* Triángulo izquierdo (un poco más claro) */
    border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #E6BA8D;
    z-index: 5;
    pointer-events: none;
}

.envelope:after {
    border-width: 420px 640px 0 0;
    /* Triángulo derecho (aún más claro para dar luz) */
    border-color: rgba(0, 0, 0, 0) #F2C89F rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
}

.envelope .envelope-cap {
    position: absolute;
    left: 0;
    top: -30px;
    width: 100%;
    height: 30px;
    z-index: 20;
    /* Tapa del sobre (un poco más oscura) */
    background: #C69A6E;
    transition: 0.2s 0.2s ease-in;
    transform-origin: 50% 100% 0;
    transform: rotateX(180deg);
    pointer-events: none;
}

.envelope .envelope-cap:after {
    content: "";
    border-style: solid;
    border-width: 0 320px 210px 320px;
    border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #C69A6E rgba(0, 0, 0, 0);
    position: absolute;
    left: 0;
    bottom: 100%;
}

.envelope .latter-form {
    background: #fff;
    padding: 30px;
    width: 600px;
    height: 380px;
    position: absolute;
    left: 20px;
    bottom: -20px; /* Un poco más abajo cuando está cerrado */
    z-index: 3;
    line-height: 2;
    transition: all 0.3s ease-in;
    border-radius: 12px 12px 0 0;
    box-shadow: 0 -4px 10px rgba(0,0,0,0.1);
    opacity: 0;
    visibility: hidden;
}

/* Solo se abre con click mediante la clase .is-open */
.envelope.is-open .latter-form {
    bottom: 400px; /* Sube más para no tapar el botón */
    opacity: 1;
    visibility: visible;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    transition-delay: 0.1s;
}
.envelope.is-open .open-envelope-btn {
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -50%) scale(0.5);
}

/* -------------------------------------------
   RESPONSIVE DESIGN (Media Queries)
   ------------------------------------------- */
@media (max-width: 680px) {
    .envelope-wrapper { width: 340px; height: 260px; margin-top: 80px; }
    .envelope { width: 340px; height: 260px; }
    
    .envelope:after, .envelope:before {
        border-width: 260px 0 0 340px;
    }
    .envelope:after {
        border-width: 260px 340px 0 0;
    }
    
    .envelope .envelope-cap {
        top: -20px;
        height: 20px;
    }
    .envelope .envelope-cap:after {
        border-width: 0 170px 140px 170px;
    }
    
    .envelope .latter-form {
        width: 320px;
        height: 320px; /* Más alto para que el botón entre bien sin desbordar */
        left: 10px;
        bottom: -60px; /* Abajo cuando está cerrado para esconderlo */
        padding: 15px;
    }
    
    .envelope.is-open .latter-form {
        bottom: 240px; /* Sube lo suficiente para liberar el botón enviar */
    }
    
    /* Center buttons smaller on mobile */
    .open-envelope-btn, .close-envelope-btn {
        width: 70px !important;
        height: 70px !important;
    }
}

.envelope.is-open .envelope-cap {
    transform: rotateX(0deg);
    transition: 0.2s ease-in;
    z-index: 2;
}

/* Capa de bloqueo para cuando no han iniciado sesión */
.envelope-overlay {
    position: absolute;
    inset: 0;
    z-index: 25;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 1;
    transition: 0.3s;
    border-radius: 4px;
}