@font-face{
   font-family: "pixelify";
   src:url(../fonts/PixelifySans-Regular.ttf);
      }

@font-face{
  font-family: "VT323";
  src:url(../fonts/VT323-Regular.ttf);
}
@font-face{
  font-family:"pixelscript";
  src:url(../fonts/pixelscript.ttf);
}
@font-face{
    font-family:"homemade-apple";
    src:url(../fonts/Homemade-apple.ttf);
}
body {
    margin: 0;
    padding: 20px;
    font-family: 'Comfortaa', sans-serif;
    background-color: #5a6c7e;
    background-image: url(images/fondo-dark-blue.gif);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
    cursor: url(images/cursorestrella.png),auto;
    height: 100px;

}
h1{
    font-family: "pixelscript";
    font-size: 16px;
    text-align:center;
    color: #80aac6;
    background-color: transparent;
    background-position: left;
    padding-top: 55px;     
    box-sizing: border-box;
    height: 180px;
    width: 600px;
    margin-top: 10px;
}
.back-home{
    transform: scale(0.3);
    position: absolute;
    top: 750px;
    left: -200px;
}


/* --- FORMATO DE TU GALERÍA --- */
.example-image-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    padding-bottom: 200px;
    padding-left: 200px;
    padding-right: 200px;
    cursor: url(images/cursorestrella.png),auto;
}

.example-image-gallery .gallery-item {
    box-sizing: border-box;
    width: calc(33% - 20px);
    border:3px solid #5a6c7e; 
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    aspect-ratio: 1 / 1;
    background: #000;
    cursor: url(images/cursorestrella.png),auto;
}

.example-image-gallery .gallery-item img {
    transition: transform 0.5s ease;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.example-image-gallery .gallery-item span {
    position: absolute;
    bottom: 15px;
    left: 0;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
    background: #383a5c;
    color: #9fb8d2;
    font-family: pixelify;
    padding: 8px 10px;
    font-size: 16px;
    opacity: 0;
    transform: translateY(100px);
    transition: transform 0.4s ease, opacity 0.5s ease;
}
#foto-flamenca {
    object-position: top center;
}
#foto-pijamaparty{
    object-position: top;
}

/* Efectos Hover de tu galería */
.example-image-gallery .gallery-item:hover img {
    transform: scale(1.2);
}

.example-image-gallery .gallery-item:hover span {
    opacity: 1;
    transform: none;
}

/* Responsivo Móvil */
@media (max-width: 800px) {
    .example-image-gallery .gallery-item {
        width: calc(50% - 10px);
    }
}

/* --- ESTILOS DE LA VENTANA EMERGENTE (Manteniendo el fix del scroll) --- */
.modal-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    display: flex; justify-content: center; align-items: center;
    opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
    z-index: 999;
}

.modal-overlay.show { opacity: 1; pointer-events: auto; }

.retro-window {
    background-image: url(images/playlistfondo.jpg); border: 3px solid #383a5c; border-radius: 4px;
    width: 90%; max-width: 440px; max-height: 85vh;
    box-shadow: 6px 6px 0px rgba(0, 0, 0, 0.15); display: flex; flex-direction: column; overflow: hidden;
}

.window-header { background: linear-gradient(to right, #d29bfd, #d3d3ff); padding: 8px 12px; display: flex; justify-content: space-between; align-items: center; }
.window-menu-text { color: #383a5c; font-family: "pixelify"; font-size: 1rem; display: flex; gap: 12px; }
.close-btn { background: #5a6c7e; border: 1px solid #d29bfd; color: #d3d3ff; padding: 2px 8px; cursor: pointer; border-radius: 3px; }

.window-nav-bar { background-color: #383a5c; border-bottom: 2px solid #d3d3ff; padding: 6px; display: flex; gap: 6px; }
.nav-btn, .nav-go { background: #d3d3ff; border: 1px solid #d29bfd; padding: 3px 8px; font-family: "VT323"; font-size: 1rem; color: #430a4a; border-radius: 3px; }
.nav-address { flex-grow: 1; border: 1px solid #d3d3ff; font-family: "VT323"; padding: 3px 6px; font-size: 1rem; color: #666; }

.player-container {
    background-color: #e6e7e8; margin: 10px; padding: 15px 10px; border-radius: 8px; border: 1px solid #d29bfd;
    display: flex; flex-direction: column; align-items: center; flex: 1; overflow-y: auto;
}

.album-cover-wrapper { display: inline-block; padding: 6px; background-color: #d29bfd; border: 2px ridge #430a4a; border-radius: 16px; margin-bottom: 15px;}
.album-cover { width: 200px; height: 200px; object-fit: cover; border-radius: 10px; display: block; object-position: top;}
.song-title { color: #383a5c; font-family: "pixelify"; font-size: 1.1rem; margin: 10px 0; text-align: center; }
.divider { border: none; border-top: 2px dashed #5a6c7e; width: 100%; margin: 15px 0; }

.progress-container { width: 85%; height: 12px; background-color: #d29bfd; border: 2px solid #d3d3ff; border-radius: 10px; margin-bottom: 15px; overflow: hidden; }
.progress-bar { width: 0%; height: 100%; background-color: #d29bfd; }

.controls { display: flex; justify-content: center; gap: 15px; margin-bottom: 15px; }
.control-btn { width: 50px; height: 50px; border: 1px solid #f9badb; background: linear-gradient(to bottom, #d29bfd, #d3d3ff); border-radius: 12px; color: #430a4a; cursor: pointer; box-shadow: 0 4px 0px #d29bfd; }
.control-btn:active { transform: translateY(3px); box-shadow: 0 1px 0px #d29bfd; }

.volume-container { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 20px; color: #383a5c; width: 100%; }
.volume-slider { -webkit-appearance: none; width: 60%; height: 6px; background: #5a6c7e; border-radius: 5px; }
.volume-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: #383a5c; }

.playlist { width: 100%; background-color: #d3d3ff; border: 1px solid #d3d3ff; border-radius: 12px; overflow: hidden; flex-shrink: 0;}
.playlist-item { padding: 12px 15px; font-family: "pixelify"; font-size: 0.9rem; color: #111; text-align: left; border-bottom: 1px solid #d3d3ff; cursor: pointer; }
.playlist-item.active { background: linear-gradient(to right, #5a6c7e, #5a6c7e); font-family: "pixelify"; color: white; font-weight: bold; }