/* -------------------------------------------------------------
   ESTILOS BASE - ENFOQUE MINIMALISTA PREMIUM
------------------------------------------------------------- */
body {
    display: flex;
    position: relative;
    overflow: hidden;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    letter-spacing: -0.01em;
    touch-action: manipulation;
    margin: 0;
    overflow-x: hidden;
    background: radial-gradient(circle at top,#f9b8c6 0%,#f6a2b5 35%,#ef8ca2 65%,#e98096 100%);
}

/* -------------------------------------------------------------
   LA TARJETA PRINCIPAL (CRISTAL REFINADO Y AJUSTADO)
------------------------------------------------------------- */
.caja-sorpresa {
    position: relative;
    z-index: 2;
    /* Fondo translúcido premium */
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    /* Dimensiones controladas con topes estrictos */
    width: min(92vw, 380px);
    max-height: 85vh; /* 🛑 TOPE: Nunca medirá más del 85% de la altura de la pantalla */
    overflow-y: hidden; /* Seguridad: si el texto crece, se genera scroll interno sin romper el diseño */

    padding: 30px 24px;
    border-radius: 28px;
    box-sizing: border-box;
    text-align: center;
    /* Borde refinado y sombras */
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 15px 35px rgba(159,63,70,.08);
    transition: all .3s ease;
}

/* -------------------------------------------------------------
   TEXTOS Y TIPOGRAFÍA
------------------------------------------------------------- */
#titulo {
    color: #2d1e1f;
    font-size: 1.8rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    margin: 0 0 10px 0;
}

#mensaje-guia {
    color: #635051;
    font-size: 0.98rem;
    line-height: 1.5;
    font-weight: 400;
    margin: 0 auto;
    max-width: 95%;
}

/* -------------------------------------------------------------
   CONTENEDOR DE LA ANIMACIÓN LOTTIE
------------------------------------------------------------- */
#contenedor-animal {
    width: 170px; /* Tamaño controlado por defecto */
    height: 170px;
    margin: 20px auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* -------------------------------------------------------------
   EL BOTÓN PREMIUM
------------------------------------------------------------- */
.btn-corazon {
    background: #9f3f46;
    color: #fff;
    border: none;
    border-radius: 14px;
    padding: 14px 28px;
    width: 100%;
    cursor: pointer;
    box-sizing: border-box;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: -.01em;
    box-shadow: 0 8px 20px rgba(159,63,70,.15);
    transition: background .3s, box-shadow .3s, transform .2s;
    animation: respirarBoton 2.8s ease-in-out infinite;
    -webkit-tap-highlight-color: transparent;
}

    .btn-corazon:hover {
        animation-play-state: paused;
        background: #883238;
        box-shadow: 0 12px 28px rgba(159,63,70,.25);
    }

    .btn-corazon:active {
        transform: scale(.97);
    }

@keyframes respirarBoton {
    0%,100% {
        transform: translateY(0) scale(1);
        box-shadow: 0 8px 20px rgba(159,63,70,.15);
    }

    50% {
        transform: translateY(-3px) scale(1.015);
        box-shadow: 0 14px 28px rgba(159,63,70,.25);
    }
}

/* -------------------------------------------------------------
   CORAZONES DE FONDO
------------------------------------------------------------- */
.corazones-fondo {
    position: fixed;
    inset: 0;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
}

    .corazones-fondo span {
        --size: 60px;
        position: absolute;
        bottom: -180px;
        width: var(--size);
        height: var(--size);
        background: linear-gradient(145deg,#ff8aa2,#d40038);
        transform: rotate(-45deg);
        border-radius: 20%;
        animation: subir linear infinite, flotar ease-in-out infinite;
        filter: drop-shadow(0 8px 15px rgba(255,40,80,.20));
    }

        .corazones-fondo span::before,
        .corazones-fondo span::after {
            content: "";
            position: absolute;
            width: 100%;
            height: 100%;
            background: inherit;
            border-radius: 50%;
        }

        .corazones-fondo span::before {
            top: -50%;
            left: 0;
        }

        .corazones-fondo span::after {
            left: 50%;
            top: 0;
        }

        /* Asignación de tamaños base */
        .corazones-fondo span:nth-child(1) {
            left: 4%;
            --size: 80px;
            animation-duration: 22s,4s;
            filter: blur(.5px);
        }

        .corazones-fondo span:nth-child(2) {
            left: 15%;
            --size: 45px;
            animation-duration: 16s,5s;
        }

        .corazones-fondo span:nth-child(3) {
            left: 27%;
            --size: 60px;
            animation-duration: 21s,6s;
        }

        .corazones-fondo span:nth-child(4) {
            left: 40%;
            --size: 30px;
            animation-duration: 13s,3s;
        }

        .corazones-fondo span:nth-child(5) {
            left: 52%;
            --size: 70px;
            animation-duration: 24s,5s;
        }

        .corazones-fondo span:nth-child(6) {
            left: 64%;
            --size: 35px;
            animation-duration: 14s,3.5s;
        }

        .corazones-fondo span:nth-child(7) {
            left: 73%;
            --size: 90px;
            animation-duration: 23s,4s;
            filter: blur(1px);
        }

        .corazones-fondo span:nth-child(8) {
            left: 83%;
            --size: 40px;
            animation-duration: 15s,4s;
        }

        .corazones-fondo span:nth-child(9) {
            left: 92%;
            --size: 75px;
            animation-duration: 20s,5s;
        }

        .corazones-fondo span:nth-child(10) {
            left: 97%;
            --size: 30px;
            animation-duration: 12s,2.5s;
        }
        /* Segunda tanda */
        .corazones-fondo span:nth-child(11) {
            left: 8%;
            --size: 35px;
            animation-duration: 18s;
        }

        .corazones-fondo span:nth-child(12) {
            left: 20%;
            --size: 55px;
            animation-duration: 26s;
        }

        .corazones-fondo span:nth-child(13) {
            left: 34%;
            --size: 25px;
            animation-duration: 12s;
        }

        .corazones-fondo span:nth-child(14) {
            left: 46%;
            --size: 65px;
            animation-duration: 19s;
        }

        .corazones-fondo span:nth-child(15) {
            left: 58%;
            --size: 35px;
            animation-duration: 14s;
        }

        .corazones-fondo span:nth-child(16) {
            left: 69%;
            --size: 50px;
            animation-duration: 17s;
        }

        .corazones-fondo span:nth-child(17) {
            left: 78%;
            --size: 20px;
            animation-duration: 11s;
        }

        .corazones-fondo span:nth-child(18) {
            left: 86%;
            --size: 60px;
            animation-duration: 21s;
        }

        .corazones-fondo span:nth-child(19) {
            left: 94%;
            --size: 25px;
            animation-duration: 13s;
        }

        .corazones-fondo span:nth-child(20) {
            left: 50%;
            --size: 95px;
            animation-duration: 28s;
            filter: blur(1.5px);
        }

@keyframes subir {
    from {
        transform: translateY(0) rotate(-45deg);
    }

    to {
        transform: translateY(-130vh) rotate(-45deg);
    }
}

@keyframes flotar {
    0%,100% {
        margin-left: -10px;
    }

    50% {
        margin-left: 10px;
    }
}

/* -------------------------------------------------------------
   📱 ENFOQUE ESTRICTO SMARTPHONES (SOLUCIÓN AL TAMAÑO)
------------------------------------------------------------- */
@media (max-width: 480px) {
    .caja-sorpresa {
        width: 88vw; /* Asegura que respire en los costados */
        padding: 22px 18px; /* Compacta el padding interno */
        border-radius: 24px;
    }

    #titulo {
        font-size: 1.5rem; /* Letra estilizada, no tosca */
        margin-bottom: 8px;
    }

    #mensaje-guia {
        font-size: 0.9rem;
        line-height: 1.4;
    }

    #contenedor-animal {
        width: 140px; /* Reducción drástica para que el Lottie no empuje el layout */
        height: 140px;
        margin: 15px auto;
    }

    .btn-corazon {
        padding: 12px 20px;
        font-size: 0.9rem;
        border-radius: 12px;
    }
}