body {
    background: url('Fondo.jpeg') no-repeat center center fixed;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    font-family: 'Segoe UI', Tahoma, sans-serif;
}

.album-container {
    width: 100%;
    max-width: 375px;
    height: 100vh;
    max-height: 812px;
    position: relative;
    perspective: 1500px;
}

.back-arrow {
    position: absolute;
    top: 15px;
    left: 15px;
    color: #4f82a0;
    z-index: 100;
    transition: transform 0.2s;
}
.back-arrow:hover { transform: scale(1.1); color: #05161e; }

.nav-zone {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 50%;
    z-index: 50;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent; 
}
.zone-left { left: 0; }
.zone-right { right: 0; }

.page {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0; left: 0;
    transform-origin: left center;
    transition: transform 0.8s cubic-bezier(0.645, 0.045, 0.355, 1);
    backface-visibility: hidden; 
}

.page.flipped {
    transform: rotateY(-180deg);
}

.page-inner {
    width: 100%;
    height: 100%;
    background: url('CSS/Fondo.jpeg') no-repeat center center;
    background-size: cover;
    border-radius: 12px;
    position: relative;
    overflow: hidden;
    border: 10px solid #4f82a0;
    box-shadow: 0 15px 35px rgba(0,0,0,0.4);
}

.album-title {
    position: absolute; top: 45%; left: 50%;
    transform: translate(-50%, -50%);
    text-align: center; font-size: 2.8rem; letter-spacing: 3px;
}

.sticker { 
    position: absolute; 
    border: 4px solid white; 
    box-shadow: 2px 4px 10px rgba(0,0,0,0.3); 
    z-index: 10; 
}
.slot { 
    width: 85px; 
    height: 115px; 
    background-color: rgba(255, 255, 255, 0.25); 
    border: 2px dashed rgba(255, 255, 255, 0.4);
    border-radius: 12px; 
}

.cov-st-1 { 
    top: 12%; 
    left: 8%; 
    transform: rotate(-15deg); 
    width: 110px; 
    height: 130px; 
}
.cov-st-2 { 
    bottom: 18%; 
    right: 10%; 
    transform: rotate(18deg); 
    width: 120px; 
    height: 140px; 
}
.pg-st-1 { 
    top: 18%; 
    left: 40%; 
    transform: rotate(12deg); 
    width: 90px; 
    height: 90px; 
}
.pg-st-2 { 
    top: 50%; 
    right: 12%; 
    transform: rotate(-25deg); 
    width: 95px; 
    height: 95px; 
}