@charset "utf-8";
/* CSS Document */

/* ========================================= */
/*                TUS ESTILOS                 */
/* ========================================= */

/* Single */

.single-hero {

    display: flex;
    gap: 5rem;
    align-items: center;
    margin-bottom: 3rem;

}

.single-cover img {

    width: 100%;
    max-width: 450px;
    border-radius: 8px;
    box-shadow: 0 20px 50px rgba(0,0,0,.35);

}

.single-info {

    flex: 1;

}

.chapter {

    text-transform: uppercase;
    letter-spacing: .35em;
    color: #999;
    margin-bottom: .5em;

}

.release {

    opacity: .75;
    margin-bottom: 2rem;

}

.platforms{
    display:flex;
    justify-content:center;   /* Centra toda la fila */
    align-items:center;
    gap:3rem;                 /* Espacio entre iconos */
    flex-wrap:wrap;           /* En móviles bajan a otra línea */
}

.platforms a{
    display:flex;
    align-items:center;
    justify-content:center;
}

.platforms img{
    height:64px;
    width:auto;
    display:block;
    transition:transform .2s ease;
}

.platforms img:hover{
    transform:scale(1.08);
}

.credits {

    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(180px,1fr));
    gap: 2rem;

}

@media screen and (max-width:980px){

    .single-hero{

        flex-direction: column;
        text-align: center;

    }

}

/* ========================================= */
/*                VIDEOS                     */
/* ========================================= */

.video-container{

    position:relative;

    width:90%;

    padding-bottom:56.25%; /* 16:9 */

    border-radius:8px;

    overflow:hidden;

    box-shadow:0 20px 50px rgba(0,0,0,.25);

}

.video-container iframe{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

}

/* ========================================= */
/*             SUPPORT PROJECT               */
/* ========================================= */

.support-project{

    margin-top:2rem;

    text-align:left;

}

.support-project h3{

    margin-bottom:.75rem;

}

.support-project p{

    font-size:.95rem;

    opacity:.85;

    line-height:1.8;

    margin-bottom:1.5rem;

}

/* ========================================= */
/*          SUPPORT PROJECT (SINGLES)         */
/* ========================================= */

.support-project-Singles{

    max-width: 700px;

    margin: 0 auto;

    text-align: center;

}

.support-box-Singles{

    max-width:680px;

    margin:4rem auto;

    padding:2.5rem;

    border:1px solid rgba(0,0,0,.08);

    border-radius:10px;

    background:#fafafa;
	
	box-shadow:0 8px 24px rgba(0,0,0,.04);

}

.support-box-Singles h2{

    margin-bottom:1.5rem;

}

.support-box-Singles p{

    text-align:left;

    line-height:1.9;

    margin-bottom:1.25rem;

}

.support-button-Singles{

    text-align:center;

    margin:2.5rem 0 2rem;

}

.support-box-Singles .thanks{

    text-align:center;

    font-style:italic;

    opacity:.7;

    margin-bottom:0;

}

/* ================================================= */
/*            FILOSOFÍA DEL PROYECTO                 */
/* ================================================= */

.philosophy-box{

    max-width:760px;

    margin:4rem auto;

    padding:2.75rem;

    background:#fafafa;

    border:1px solid rgba(0,0,0,.12);

    border-radius:10px;

    box-shadow:0 8px 24px rgba(0,0,0,.04);

    text-align:center;

}

.philosophy-box blockquote{

    margin:0;

    border:0;

    font-style:normal;

}

.philosophy-box p{

    margin:1rem 0;

    font-size:1.15rem;

    line-height:1.9;

}

.philosophy-box p strong{

    font-size:1.25rem;

    letter-spacing:.15em;

    text-transform:uppercase;

}

/* ================================================= */
/*            LOGO AGUILA STUDIOS                    */
/* ================================================= */

.publisher{

    margin-top:12px;

    text-align:center;

}

.publisher a{

    display:inline-flex;

    align-items:center;

    gap:10px;

    text-decoration:none;

    color:inherit;

    opacity:.8;

    transition:.3s;

}

.publisher a:hover{

    opacity:1;

}

.publisher span{

    font-size:.8rem;

    letter-spacing:.08em;

    text-transform:uppercase;

}

.publisher img{

    width:26px;

    height:26px;

    object-fit:contain;

}

.publisher strong{

    font-weight:600;

    letter-spacing:.05em;

}

/* ================================================= */
/*            ALBUMS			                     */
/* ================================================= */

.track-list{

    list-style:none;

    margin:0;

    padding:0;

}

.track{

    display:flex;

    align-items:center;

    gap:22px;

    padding:16px 22px;

    text-decoration:none;

    color:#fff;

    border-bottom:1px solid rgba(255,255,255,.08);

    transition:.25s ease;

}

.track:hover{

    background:rgba(255,255,255,.05);

    transform:translateX(6px);

}

.track img{

    width:72px;

    height:72px;

    border-radius:8px;

    object-fit:cover;

    flex-shrink:0;

}

.track-info{

    display:flex;

    align-items:center;

    justify-content:space-between;

    flex:1;

    gap:20px;

}

.track-info h3{

    margin:0;

    font-size:1.05rem;

    font-weight:600;

    color:#fff;

}

.track-duration{

    color:rgba(255,255,255,.65);

    font-size:.9rem;

    white-space:nowrap;

    flex-shrink:0;

}

.track-arrow{

    font-size:1.4rem;

    opacity:.35;

    transition:.25s;

}

.track:hover .track-arrow{

    opacity:1;

    transform:translateX(4px);

}

.track,
.track:visited,
.track:hover,
.track:active{

    color:#ffffff;

    text-decoration:none;

}

.track h3,
.track span{

    color:#000000;

}

.track:hover h3{

    color:#936e21;

}

.track:hover span{

    color:rgba(255,255,255,.65);

}


/* ================================================= */
/*            CARATULAS ALBUMS			             */
/* ================================================= */


.album-artwork{

    display:flex;

    justify-content:center;

    align-items:flex-start;

    gap:40px;

    margin:60px auto;

    flex-wrap:wrap;

}

.album-artwork img{

    width:320px;

    border-radius:12px;

    transition:.3s;

    box-shadow:0 10px 30px rgba(0,0,0,.35);

}

.album-artwork img:hover{

    transform:translateY(-6px);

}


/* ================================================= */
/*            LIGHTBOX CARATULAS ALBUMS			     */
/* ================================================= */


#lightbox{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.92);

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:9999;

    opacity:0;

    visibility:hidden;

    transition:.25s;

}

#lightbox.active{

    opacity:1;

    visibility:visible;

}

#lightbox-image{

    max-width:92vw;

    max-height:92vh;

    border-radius:8px;

    transform:scale(.92);

    transition:transform .25s ease;

    cursor:zoom-out;

}

#lightbox.active #lightbox-image{

    transform:scale(1);

}

#close-lightbox{

    position:absolute;

    top:20px;

    right:30px;

    color:#fff;

    font-size:42px;

    cursor:pointer;

    user-select:none;

}

#lightbox.active #lightbox-image{

    transform:scale(1);

}

.lightbox-trigger{

    cursor:zoom-in;

}

body.lightbox-open{

    overflow:hidden;

}

/* ================================================= */
/*            NUEVO MENU DESPLIEGA   			     */
/* ================================================= */

#menu .submenu > ul{
    display:none;
    margin-left:1rem;
}

#menu .submenu.active > ul{
    display:block;
}

#menu .submenu > span{
    cursor:pointer;
    display:block;
}


/* ================================================= */
/*     CONTENEDOR FILA SINGLE + BOTÓN FICHA          */
/* ================================================= */

.ficha-single-row{

    display:flex;

    align-items:center;

    gap:1rem;
	
	padding-right:24px;

}

.ficha-single-row .track{

    flex:1;

}

.ficha-single-actions{

    flex-shrink:0;

}

.ficha-single-button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:.5rem 1rem;

    border:1px solid rgba(255,255,255,.25);

    border-radius:4px;

    background:#df7547;

    color:#000;

    text-decoration:none !important;

    border-bottom:none !important;

    font-size:.8rem;

    font-weight:600;

    letter-spacing:.08em;

    text-transform:uppercase;

    white-space:nowrap;

    transition:.25s ease;

}

.ficha-single-button:hover{

    background:#936e21;
	color:#fff !important; 

}

/* ================================================ */
/*            ÚLTIMO TEMA DEL ÁLBUM                 */
/* ================================================ */

.epilogo-track{

    border:2px solid rgba(180,150,70,.55);

    border-radius:100px;

    margin-top:12px;
	

    background:linear-gradient(
        90deg,
        rgba(180,150,70,.08),
        rgba(255,255,255,0)
    );

    overflow:hidden;

	box-shadow:0 0 18px rgba(180,150,70,.18);

}

/* ================================================= */
/*            METADATOS DEL ÁLBUM                    */
/* ================================================= */

.album-meta{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:.75rem;

    margin:2rem 0 3rem;

    font-size:.95rem;

    color:#666;

    flex-wrap:wrap;

}

.album-meta strong{

    color:#000;

    font-weight:600;

}

.album-label{

    display:flex;

    align-items:center;

    gap:.45rem;

}

.album-label img{

    width:20px;

    height:20px;

    object-fit:contain;

}

/* ================================================= */
/*          		 SITE NAME			             */
/* ================================================= */

.site-name{
    text-transform:uppercase;
    letter-spacing:.35em;
    font-size:.85rem;
    opacity:.75;
    margin-bottom:1rem;
}

/* ================================================= */
/*          		 ICONO TIDAL		             */
/* ================================================= */

.icons img.tidal-icon{
    width: 1.5em;
    height: 1.5em;
    vertical-align: middle;
	padding-bottom: 5px;
}

/* =========================================
   LANGUAGE SWITCHER
   ========================================= */

#header .language-switcher {
    display: flex;
    align-items: center;
    gap: 0.45em;
    margin-left: 0.6em;
}

#header .language-flag {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 1.5em;
    height: 1.2em;

    padding: 0;
    border: 0;

    opacity: 0.35;
    filter: grayscale(50%);

    transition:
        opacity 0.25s ease,
        filter 0.25s ease,
        transform 0.25s ease;
}

#header .language-flag img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;

    border-radius: 2px;
}

/* Idioma actual */

#header .language-flag.active {
    opacity: 1;
    filter: grayscale(0);
}

/* Hover */

#header .language-flag:hover {
    opacity: 1;
    filter: grayscale(0);
    transform: scale(1.08);
}