:root{
    --borderRadiusTarjeta: 20px;
    --anchoTarjeta: 256px;
    --altoTarjeta: 361px;
}

.flexCenter{
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
}

.main-nav{
    z-index: 200;
}

#firstSection{
    height: fit-content !important;
}

  
  
.tarjeta{
width:15%;
height: 300px;
padding: 40px;
top: 0;
position:static;
font-size: large;
color: white;
border-radius: var(--borderRadiusTarjeta);
/*border: 1px solid black;*/
/*display: block;*/
caret-color: transparent;
transition: transform 0.6s;
transform-style: preserve-3d;
background-color: #005d6b;
}

#fondoTarjeta{
width: 31.84vh;
height: 45vh;
z-index: 200;
}

#contImg{
    position: relative;
    margin-top:10vh;
    margin-bottom: 5vh;
    border-radius: 10px;
    overflow: hidden;
}

.regresarArchivo{
    margin-top: 10vh;
}

#detonadorCont{
    z-index: 250;
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color:white;

}

#filaCols{
    width: 80%;
    display: flex;
    justify-content: center;
    padding-bottom: 10vh;
}

#colsCont{
    width:fit-content;
    margin: 0;
}


#PersonaTitle{
    color: white;
}

#ColeccionesTitle{
    color: white;
    font-size: calc(1.4rem + 0.33vw);
}
  


.columnas{
    width: 50%;
    padding: 50px;
}

.descriptor{
    width: 40%;
}

.info{
    width: 60%;
}

/* Reproductor */
#audioCont{
    padding: 50px;
}

#repCont{
    background-color: #e7e7e7;
    padding: 10px;
    align-items: center;
    width: 100%;
}

#changerCont{
    margin-right: 10px;
}

#currentTime{
    margin-right: 10px;
}

#changePause{
    display: none;
}

#timeBar{
    height: 25%;
    flex-basis: 90%;
    background-color: white;
    margin-right: 10px;
}

#timeFill{
    background-color: #b83256;
    width: 0;
    height: 100%;
}

/* --------------------- */




li {
    margin-left: 0;
    height:fit-content;        /* Ensures no extra space for each list item */
    color: #555555;
}
p{
    margin: 0;
}


.parrafoDescriptor{
    margin-left: 10px;
}
  

#descriptionCont{
    color:#555555;
}
  
  
  
#carr{
    padding-top: 0;
    padding-bottom: 10px;
}
  
#descripCarr{
    padding-left: 10%;
    padding-right: 10%;
    padding-bottom: 20px;
    color:#555555;
 }
  
  
  
  /* Loader */

.flexBox{
display: flex;
width: 100%;
align-items: center;
flex-direction: column;
justify-content: center;
}


/* HTML: <div class="loader"></div> */
.loader {
width: 20px;
height: 20px;
aspect-ratio: 1;
border-radius: 50%;
background: #000;
box-shadow: 0 0 0 0 #0004;
animation: l2 1.5s infinite linear;
position: relative;
}
.loader:before,
.loader:after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
box-shadow: 0 0 0 0 #0004;
animation: inherit;
animation-delay: -0.5s;
}
.loader:after {
animation-delay: -1s;
}
@keyframes l2 {
    100% {box-shadow: 0 0 0 40px #0000}
}



@media (max-width:1200px){
    .columnas{
        width: 100%;
    }
    #ondaAudio{
        display: none;
    }
    #colCont{
        flex-direction: column;
    }
}