@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap');
*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body{
    font-family: 'Poppins', sans-serif;
    background: linear-gradient(135deg,#ffafd6 0%, #c2d8ff 100%);
    min-height: 100vh;
    overflow-x: hidden;
    display:flex;
    flex-direction: column;
    align-items:center;
}
body.no-scroll{
    overflow:hidden;
    height:100vh;
}
.title{
    margin-top:40px;
    color:#fff;
    text-shadow:2px 2px 4px rgba(0,0,0,.4);
}
.story{
    margin:60px auto;
    width:90%;
    max-width:1000px;
    display:grid;
    gap:20px;
    grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
}
.card{
    position:relative;
    cursor:pointer;
    transition:transform .3s;
    padding:10px;
    background:#fff;
    border:4px solid #eee;
    border-radius:20px;
    box-shadow:0 6px 12px rgba(0,0,0,.15);
}
.card:hover{
    transform:scale(1.05);
}
.card img{
    width:100%;
    height:280px;
    object-fit:cover;
    border-radius:12px;
    box-shadow:0 4px 15px rgba(0,0,0,.3);
    /* Mantener ocultas/pixeladas */
    filter: blur(10px) brightness(0.6) saturate(0.2);
    image-rendering: pixelated;
}
.card img.revealed{
    filter:none;
    image-rendering:auto;
}
/* Floating icons */
.icon{
    position:fixed;
    width:40px;
    opacity:.7;
    animation: float 6s ease-in-out infinite;
    pointer-events:none;
    z-index:10;
}
@keyframes float{
    0%{transform:translateY(0) rotate(0);}   
    50%{transform:translateY(-30px) rotate(20deg);}  
    100%{transform:translateY(0) rotate(0);}  
}
.overlay{
    position:fixed;
    top:0;left:0;width:100%;height:100%;
    background:rgba(0,0,0,.8);
    display:flex;
    justify-content:center;
    align-items:center;
    padding:20px;
    z-index:100;
}
.hidden{display:none;}
.overlay-content{
    background:#fff;
    border-radius:15px;
    max-width:600px;
    width:90%;
    max-height:80vh;
    overflow-y:auto;
    padding:30px;
    text-align:center;
    position:relative;
}
.overlay-content img{
    width:100%;
    max-height:60vh;
    object-fit:contain;
    border:4px solid #000;
    border-radius:8px;
    box-shadow:0 6px 15px rgba(0,0,0,.5);
    margin-bottom:20px;
}
.close-btn{
    position:absolute;
    top:15px;right:20px;
    font-size:28px;
    cursor:pointer;
}
#download-btn{
    display:none;
    margin:40px auto 80px;
    padding:15px 30px;
    font-size:18px;
    border:none;
    border-radius:30px;
    background:linear-gradient(135deg,#ff66a5,#8f5cff);
    color:#fff;
    cursor:pointer;
    box-shadow:0 4px 10px rgba(0,0,0,.3);
    transition:transform .3s;
}
#download-btn:hover{transform:scale(1.05);}

.password-screen{
    position:fixed;top:0;left:0;width:100%;height:100%;
    background:rgba(0,0,0,.9);
    display:flex;justify-content:center;align-items:center;
    z-index:200;
}
.password-box{
    background:#fff;
    padding:40px 30px;
    border-radius:15px;
    text-align:center;
    box-shadow:0 6px 15px rgba(0,0,0,.4);
}
.password-box h2{margin-bottom:20px;}
.password-box input{
    width:100%;padding:10px 15px;margin-bottom:15px;border:1px solid #ccc;border-radius:8px;font-size:16px;
}
.password-box button{
    width:100%;padding:10px 0;border:none;border-radius:8px;background:#8f5cff;color:#fff;font-size:16px;cursor:pointer;
}
.error-msg{color:red;margin-top:10px;font-size:14px;}
.hidden{display:none;}

@media (max-width: 480px){
    .story{
        grid-template-columns:1fr;
    }
    .card{
        padding:6px;
        border-width:3px;
    }
    .card img{
        height:220px;
    }
}