*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    background:#f7f1ef;
    background-image: url("https://i.pinimg.com/736x/01/05/94/0105944e3be0075e57e8d44bcba90584.jpg");
    color:#8d7979;
    font-family:'IBM Plex Mono', monospace;
    padding:60px 30px;
    overflow-x:hidden;
}

.page{
    width:100%;
    max-width: 1050px;
    margin:auto;
}

/* NAV INTERNA */
.nav{
    display:flex;
    gap:18px;
    margin-bottom:35px;
}

.nav a{
    text-decoration:none;
    font-size:10px;
    color:#a28d8d;
    transition:0.2s;
}

.nav a:hover{ opacity:0.6; }

h1{
    font-family:'Cormorant Garamond', serif;
    font-size:48px;
    font-weight:300;
    margin-bottom:35px;
    color:#76495e;
    text-align: center;
}

/* PESTAÑAS DEL ÁLBUM */
.album-tabs {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: -1px; /* Conecta visualmente con el contenedor */
    position: relative;
    z-index: 5;
}

.tab-btn {
    background: #ebdcd7;
    border: 1px solid #d9cbc7;
    border-bottom: none;
    padding: 10px 20px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    color: #8d7979;
    cursor: pointer;
    border-radius: 6px 6px 0 0;
    transition: 0.3s;
}

.tab-btn:hover, .tab-btn.active {
    background: #faf8f7;
    color: #76495e;
    font-weight: bold;
    padding-bottom: 11px; /* Efecto de pestaña seleccionada */
}

/* CONTENEDOR DEL ÁLBUM */
.album-container {
    background: #faf8f7;
    border: 1px solid #d9cbc7;
    border-radius: 8px;
    padding: 40px;
    box-shadow: 0 15px 35px rgba(118, 73, 94, 0.05);
    position: relative;
    min-height: 600px;
}

/* REJILLA ORGANIZADA */
.album-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 30px;
    margin-top: 20px;
}

/* CADA ELEMENTO DEL ÁLBUM */
.album-item {
    animation: fadeIn 0.4s ease-in-out;
}

/* POLAROIDS DEL ÁLBUM */
.polaroid{
    background:#ffffff;
    padding:12px 12px 25px;
    border: 1px solid #f2eae7;
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
    transition: 0.3s ease;
    transform: rotate(var(--rotation, -1deg)); /* Pequeña rotación orgánica */
}

/* Variaciones aleatorias automáticas de rotación para que parezca un álbum real */
.album-item:nth-child(even) .polaroid { --rotation: 2deg; }
.album-item:nth-child(3n) .polaroid { --rotation: -2deg; }

.polaroid:hover{
    transform: scale(1.03) rotate(0deg);
    box-shadow: 0 10px 20px rgba(118, 73, 94, 0.08);
}

.polaroid img{
    width:100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display:block;
    margin-bottom:12px;
    filter: sepia(0.1) contrast(0.95); /* Filtro estético sutil */
}

.polaroid span{
    font-family:'Cormorant Garamond', serif;
    font-size:16px;
    color:#8b7474;
    display: block;
    text-align: center;
}

/* EL CAMAFEO FIJO EN EL ÁLBUM */
.locket{
    position: absolute;
    top: -25px;
    right: 30px;
    width: 100px;
    z-index: 10;
    transform: rotate(5deg);
    transition: 0.3s;
}

.locket:hover { transform: rotate(-3deg) scale(1.05); }

.inside-photo{
    position:absolute;
    width:33px;
    height:42px;
    object-fit:cover;
    border-radius:50% / 42%;
    top:31px;
    right:11px;
    z-index:1;
}

.locket-frame{
    width:100%;
    display:block;
    position:relative;
    z-index:2;
    pointer-events:none;
}

/* EFECTO DE APARECER */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}