/* Estilos generales */
body {
    justify-content: center;
    align-items: center;
    height: 600px;
    background: #e3ccd1;
    margin: 0;
    padding: 20px 0;
}

html, body {
    overflow-x: hidden;   /* 🔒 */
}

/* Contenedor del sobre */
.envelope-container {
    width: 90vw;
    max-width: 300px;
    height: 400px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    margin: 0 auto;
    margin-top: 100px;
}

/* Sobre */
.envelope {
    width: 100%;
    height: 100%;
    background: #fff8f7; /* Color habano */
    position: relative;
    overflow: visible;
    box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.3);
    border-radius: 3px;
    z-index: 1;
}

/* Solapas */
.flap {
    position: absolute;
    width: 100%;
    height: 100%;
    background: none; /* Quitar el color de fondo */
    background-size: contain;
    background-repeat: no-repeat;
    transition: transform 1s ease-in-out;
    transform-origin: center;
}

/* Solapas laterales */
.flap.left {
    background-image: url('Images/Solapa\ izquiera.png');
    width: 70%;
    height: 100%;
    left: 0;
    transform-origin: left center;
    z-index: 5
}

.flap.right {
    background-image: url('Images/Solapa\ derecha.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right center;
    width: 50%;
    height: 100%;
    right: 0;
    transform-origin: right center;
    z-index: 4
}

/* Solapas superior e inferior */
.flap.top {
    background-image: url('Images/Solapa\ superior.png');
    width: 100%;
    height: 50%;
    top: 0;
    transform-origin: center top;
    z-index: 3
}

.flap.bottom {
    background-image: url('Images/Solapa\ inferior.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom center;
    width: 100%;
    height: 55%;
    bottom: 0;
    transform-origin: bottom center;
    z-index: 2
}

/* Contenedor del indicador de clic */
.click-indicator {
    position: absolute;
    bottom: 110px; /* Ajusta según la ubicación exacta del sello */
    left: 43%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    z-index: 5; /* Asegura que la mano esté visible sobre el sobre */
}

/* Imagen de la mano señalando */
.hand-icon {
    width: 40px; /* Tamaño de la mano */
    animation: moveDiagonal 1.2s infinite ease-in-out;
}

/* Texto "Toca para abrir" */
.click-text {
    font-family: 'Great Vibes', cursive;
    font-size: 25px;
    line-height: 25px; /* Ajusta este valor para acercar las líneas */
    color: #ab1633;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
    background: transparent !important;
    animation: fadeInOut 2s infinite;
    text-align: center; /* Centra el texto */
    display: block; /* Asegura que ocupe todo el ancho disponible */
    margin-left: -45px; /* Ajusta el valor según necesites */
    margin-top: -8px; /* Ajusta el valor según necesites */
}

/* Animación de la mano moviéndose de lado a lado */
@keyframes moveDiagonal {
    0%, 100% { transform: translate(-6px, 6px); } /* Abajo a la izquierda */
    50% { transform: translate(6px, -6px); }  /* Arriba a la derecha */
}

/* Animación de parpadeo del texto */
@keyframes fadeInOut {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Ocultar la mano y el texto con animación */
.click-indicator.hide {
    opacity: 0;
    transition: opacity 0.5s ease-out;
    pointer-events: none;
}

/* Sello en el centro */
.seal {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(0%, -50%);
    width: 80px; /* Ajusta según el tamaño del sello */
    height: 80px;
    background: url('Images/Sello.png') no-repeat center center; /* Ajusta la ruta */
    background-size: contain;
    z-index: 6;
}


@keyframes disappear {
    0% {
        transform: translate(0%, -50%) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(0%, -50%) scale(0);
        opacity: 0;
    }
}

.seal.clicked {
    animation: disappear 1s ease-out forwards;
}

/* Carta oculta */
.letter {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 90%;
    height: 85%;
    background: #ffffff;
    text-align: center;
    padding-top: 30px;
    font-size: 38px;
    font-family: 'Great Vibes', cursive;
    color: #ab1633;
    line-height: 70px; /* Ajusta este valor para acercar las líneas */
    box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.3);
    border-radius: 5px;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.letter > p {
    margin-bottom: 0px;
    margin-top: -5px;
}

/* Animación al abrir el sobre */
.envelope.open .flap.left {
    transform: rotateY(-120deg);
    transition-delay: 0.4s;
}

.envelope.open .flap.right {
    transform: rotateY(120deg);
    transition-delay: 0.8s;
}

.envelope.open .flap.top {
    transform: rotateX(120deg);
    transition-delay: 1.2s;
}

.envelope.open .flap.bottom {
    transform: rotateX(-120deg);
    transition-delay: 1.6s;
}

.envelope.open .letter {
    opacity: 1;
}

.flor-deco {
    display: block;
    margin: 0 auto;
    width: 100%; 
    height:auto;
    margin-top: -20px;
    max-width: 170px; /* Para que no desborde en pantallas pequeñas */
}

.stars-container {
    position: absolute; /* Se posiciona con respecto al body o un padre relativo */
    top: 50%;
    left: 50%;
    width: 300px;  /* Ajusta el ancho */
    height: 400px; /* Ajusta la altura */
    transform: translate(-50%, -50%); /* Lo centra */
    pointer-events: none; /* No bloquea clics */
    overflow: hidden; /* Permite que las estrellas salgan */
    z-index: 7;
}

.star {
    position: absolute;
    background: #cfa948;
    border-radius: 50%;
    box-shadow: 0 0 10px white;
    opacity: 0.8;
    pointer-events: none; /* No bloquea clics */
}

@keyframes twinkle {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(2);
        opacity: 0;
        transform: translateY(-100px);
    }
}

#pases {
    display: block;
    position: relative;
    z-index: 0;
}

#pases p {
    font-family: 'Benne', cursive;
    font-size: 20px;
    font-weight: 400;
    color: #000000;
    line-height: 26px;
    margin-top: 5px;
    margin-bottom: 5px;
    width: 90%;
    text-align: center;
    margin: 0 auto;
}

.btn {
    display: inline-block;
    padding: 5px 20px;
    background-color: #b81333;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    font-family: 'Great Vibes', cursive;
    font-size: 28px;
    font-weight: 400;
    border: none;
    outline: none;
    cursor: pointer; /* 👈 MANITO */
}

/* Hover effect for .btn */
.btn:hover {
    background-color: #d2435f; /* Cambia el color de fondo al pasar el mouse */
}