/*body {
    background-color: #ffe6f2;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    margin: 0;
    font-family: 'Arial', sans-serif;
    overflow: hidden; 
    text-align: center;
}*/

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden; /* ESTA es la clave: corta todo lo que se salga */
    position: fixed; /* Esto evita el "efecto rebote" en iPhone/Android */
}

body {
    background-color: #ffe6f2;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Arial', sans-serif;
    text-align: center;
    /* Ya no necesitas min-height aquí porque definimos height: 100% arriba */
}

.container {
    background: white;
    padding: 40px 20px; /* Ajusté un poco el padding */
    border-radius: 25px;
    box-shadow: 0 10px 30px rgba(255, 105, 180, 0.3);
    border: 5px solid #ffb3d9;
    z-index: 10;
    width: 90%;
    max-width: 400px;
    margin: 20px;
    box-sizing: border-box; 
    position: relative;
}

h1 {
    color: #d10068;
    font-size: 1.8rem; 
    margin-bottom: 30px;
    line-height: 1.3;
}

.btn-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
    width: 100%;
}

button {
    padding: 15px 30px;
    font-size: 1.1rem;
    border-radius: 50px;
    border: none;
    cursor: pointer;
    font-weight: bold;
    max-width: 100%; 
    transition: all 0.3s ease;
    
}

#btnSi {
    background-color: #4CAF50;
    color: white;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    z-index: 100;

    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

#btnNo {
    background-color: #ff4d4d;
    color: white;
    
    z-index: 1000; 
    transition: all 0.5s ease;

}


.corazon {
    position: absolute;
    color: #ff3399;
    animation: flotar 3s linear infinite;
    pointer-events: none;
    z-index: 5;
}

@keyframes flotar {
    0% { transform: translateY(100vh) scale(0); opacity: 0; }
    50% { opacity: 1; }
    100% { transform: translateY(-10vh) scale(1.5); opacity: 0; }
}

@keyframes bounce {
    0% { transform: translateY(0); }
    100% { transform: translateY(-15px); }
}

.nombre-flotando {
    position: fixed;
    top: -50px;
    pointer-events: none;
    font-weight: bold;
    color: #ff3399;
    text-shadow: 0 0 8px rgba(255, 51, 153, 0.5);
    animation: caerFlotando linear forwards;
    z-index: 9999;
}

@keyframes caerFlotando {
    0% { transform: translateY(-50px) rotate(0deg); opacity: 0; }
    20% { opacity: 1; }
    100% { transform: translateY(110vh) rotate(360deg); opacity: 0; }
}


@keyframes temblor {
    0% { transform: translateX(0); }
    25% { transform: translateX(-5px) rotate(-5deg); }
    50% { transform: translateX(5px) rotate(5deg); }
    75% { transform: translateX(-5px) rotate(-5deg); }
    100% { transform: translateX(0); }
}

.temblor {
    animation: temblor 0.3s ease-in-out;
}


.corazon-explosion {
    position: fixed;
    pointer-events: none; 
    z-index: 9999; /* Siempre encima de todo */
    transform-origin: center center;
    
    animation: explosionAnim ease-out forwards;
}

@keyframes explosionAnim {
    0% {
        transform: translate(-50%, -50%) scale(0.5);
        opacity: 1;
    }
    60% {
         opacity: 1; 
    }
    100% {
        
        transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(1.5) rotate(var(--rot));
        opacity: 0; 
    }
}