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

/* ***********************GLOBAL*********************** */
body {
    background-color: black;
}

.contenedor-principal {
    background-color: whitesmoke;
    display: flex;
    flex-flow: column wrap;
    justify-content: center;
    cursor: crosshair;
}

a,
a:link,
a:visited,
a:hover,
a:active {
    text-decoration: none;
    color: black;
}

/* ***********************ARRIBA*********************** */
.contenedor-arriba {
    /* height: 15vh; */
    text-align: center;
    padding: 1vh 3vw;
    font-family: "Cal Sans", sans-serif;

    p {
        font-size: 0.55rem;
        letter-spacing: 0.2rem;
    }
}

/* ***********************CENTRO*********************** */
.contenedor-centro {
    /* background-color: blueviolet; */
    display: flex;
    flex-flow: column;
    height: 65vh;
    max-height: 65vh;
    width: 100vw;
    overflow-y: scroll;
    margin: auto;
    text-align: center;
    font-family: "Urbanist", sans-serif;
}

.disco {
    /* background-color: blue; */
    margin: 10px 0;
    display: flex;
    flex-flow: column;
}

.img-disco {
    /* background-color: #000000; */
    height: 300px;
    width: 300px;
    margin: 0 auto;

    img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

.resaltado {
    /* font-weight: bold; */
    font-style: italic;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1rem;
    background-color: #000000;
    color: whitesmoke;
    width: 300px;
    margin: auto;
    padding: 0.3rem 0;
    margin-bottom: 0.2rem;
}

.descr-disco {
    /* background-color: blue; */
    margin-bottom: 0.5rem;
}

/* .logo img {
    width: 85%;
} */

/* Aviso Volver a casa. */
.contenedor-discos {
    font-family: "Urbanist", sans-serif;
    font-size: 0.9rem;
    letter-spacing: 0.3rem;
    text-transform: uppercase;
}

/* Animacion */
.variable {
    margin-top: 1rem;
    display: flex;
    justify-content: center;
    font-variation-settings: "wght" 275,
        "wdth" 50;
    animation: swapthings 3s infinite both cubic-bezier(0.17, 0.04, 0.04, 0.99);
}

.work {
    animation: swapthings2 3s infinite both cubic-bezier(0.17, 0.04, 0.04, 0.99);
}


@keyframes swapthings {
    0% {
        font-variation-settings: "wght" 275, "wdth" 50;
    }

    50% {
        font-variation-settings: "wght" 900, "wdth" 200;
    }

    100% {
        font-variation-settings: "wght" 275, "wdth" 50;
    }
}

@keyframes swapthings2 {
    0% {
        font-variation-settings: "wght" 900, "wdth" 200;
    }

    50% {
        font-variation-settings: "wght" 275, "wdth" 50;
    }

    100% {
        font-variation-settings: "wght" 900, "wdth" 200;
    }
}




/* ***********************FOOTER*********************** */
.contenedor-footer {
    background-color: black;
    display: flex;
    flex-flow: column nowrap;
    /* height: 15vh; */
    margin-top: 2vh;
    margin-bottom: -2px;
    text-align: center;
    padding: 0%;

    a {
        color: whitesmoke;
    }
}

.divisor-footer {
    background-color: whitesmoke;
    height: 15px;
    width: 100vw;
    clip-path: polygon(0 100%, 100% 0, 0 0);
    margin-top: -2px;
}

.sociales {
    /* background-color: black; */
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    margin-top: 10px;
    padding: 10px;
}

.redes {
    /* font-family: "Lexend Giga", sans-serif; */
    font-family: "Syncopate", sans-serif;
    font-size: 0.65rem;

    a:hover {
        text-decoration: underline;
    }
}

.copyright {
    color: whitesmoke;
    font-family: "Google Sans Code", monospace;
    font-size: 0.6rem;
    letter-spacing: 0.15rem;
    padding: 10px 0px;
}

/* ************** RESONSIVIDAD *************** */
/* ===== Tablet (mínimo 768px) ===== */
@media (min-width: 768px) {
    .contenedor-principal {}

    .contenedor-arriba {
        /* height: 10vh; */
    }

    .contenedor-centro {
        /* background-color: bisque; */
        flex-flow: row wrap;
        width: 87vw;
        max-width: 87vw;
        height: 60vh;
        justify-content: space-around;
        overflow-y: scroll;
        overflow-x: hidden;
    }

    .disco {
        /* background-color: chartreuse; */
        width: 25%;
        /* height: 50%; */
        padding: 0px;
        margin-bottom: 0px;
    }

    .img-disco {
        height: 150px;
        width: 150px;
    }

    .resaltado {
        width: 150px;
        font-size: 0.65rem;
        letter-spacing: 0.2rem;
    }

    /* .logo img {
        width: 50%;
    } */

    .contenedor-footer {
        height: 25vh;
    }

    .divisor-footer {
        height: 10px;
        background-color: whitesmoke;
    }

    .sociales {
        justify-content: center;
    }

    .redes {
        margin: 0px 30px;
        font-size: 0.8rem;
    }
}

/* ===== Escritorio (mínimo 1024px) ===== */
@media (min-width: 1024px) {
    .contenedor-principal {
        /* background-color: red; */
    }

    .contenedor-arriba {
        /* background-color: aqua; */
        padding-top: 3vh;
        /* height: 12vh; */
    }

    .contenedor-centro {
        /* background-color: seagreen; */
        width: 80vw;
        height: 65vh;
        max-height: 65vh;
        /* justify-content: space-around; */
    }

    .disco {
        /* background-color: aqua; */
        width: auto;
        /* height: 52%; */
        padding: 10px;
        margin-bottom: 20px;
    }

    .img-disco {
        height: 250px;
        width: 250px;
    }

    .resaltado {
        width: 250px;
        font-size: 0.6rem;
        letter-spacing: 0.08rem;
    }

    /* .logo img {
        width: 30%;
    } */

    .divisor-footer {
        height: 30px;
    }

    .contenedor-footer {
        height: 15vh;
    }

    .copyright {
        font-size: 0.75rem;
        letter-spacing: 0.25rem;
        padding-top: 20px;
    }
}

/* ===== Pantallas muy grandes (mínimo 1440px o 1600px) ===== */
@media (min-width: 1440px) {
    .contenedor-principal {}
}