/* Fondo y tipografía */  
body {  
    background-color: #ffe4e1;  
    font-family: 'Arial', sans-serif;  
    margin: 0;  
    display: flex;  
    flex-direction: column;  
    justify-content: center;  
    align-items: center;  
    height: 100vh;  
    overflow: hidden;  
}  

/* Introducción */  
#intro {  
    display: flex;  
    flex-direction: column;  
    justify-content: center;  
    align-items: center;  
    text-align: center;  
    padding: 20px;  
    background-color: white;  
    border-radius: 12px;  
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.2);  
}  

.btn {  
    padding: 10px 20px;  
    background-color: #d6336c;  
    color: white;  
    border: none;  
    border-radius: 8px;  
    font-size: 16px;  
    cursor: pointer;  
}  

/* Contenedor del sobre y carta */  
#animacion {  
    display: none; /* Oculto inicialmente */  
    position: relative;  
    width: 600px;  
    height: 650px;  
}  

/* Sobre */  
#sobre {  
    position: absolute;  
    bottom: 0;  
    width: 100%;  
    height: auto;  
    display: flex;  
    flex-direction: column;  
    justify-content: flex-end;  
    align-items: center;  
    z-index: 1; /* El sobre queda detrás de la carta */  
}  

.triangulo {  
    width: 0;  
    height: 0;  
    border-left: 300px solid transparent;  
    border-right: 300px solid transparent;  
    border-bottom: 150px solid #ff6b6b;  
}  

.cuerpo-sobre {  
    background-color: #ff6b6b;  
    width: 100%;  
    height: 180px;  
    border-bottom-left-radius: 12px;  
    border-bottom-right-radius: 12px;  
}  

/* Carta */  
#carta {  
    position: absolute;  
    bottom: -30%; /* Aparece "dentro" del sobre */  
    left: 50%;  
    transform: translateX(-50%);  
    width: 95%;  
    height: 500px; /* Carta grande */  
    background-color: white;  
    border-radius: 12px;  
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.3);  
    padding: 40px;  
    text-align: justify;  
    z-index: 2; /* La carta se superpone al sobre */  
    opacity: 0;  
    animation: emergerCarta 4s ease-out forwards; /* Animación de salida */  
    overflow: auto;
}  

/* Animación de la carta */  
@keyframes emergerCarta {  
    0% {  
        bottom: -30%;  
        opacity: 0;  
    }  
    100% {  
        bottom: 80px; /* La carta cubre el sobre */  
        opacity: 1;  
    }  
}  

/* Estilo del texto en la carta */  
#carta h1 {  
    color: #d6336c;  
    font-size: 2rem;  
    margin-top: 0;  
    text-align: center;
}  

#carta p {  
    color: #444;  
    font-size: 1.2rem;  
    line-height: 1.8;  
    margin-bottom: 20px;
}