:root {
	--primary: #6c6fc6;
	--bg-body: #262626;
	--bg-app: #0a0a0a;
	--bg-inset: #404040;
	--bg-transparent: rgb(255 255 255 / 10%);
	--bg-modal: rgb(255 255 255 / 20%);
	--bg-dark: rgb(0 0 0 / 75%);
	--bg-gradient: linear-gradient(140deg,#000000,#da0068);
	--color-title: #ffffff;
	--color-text: rgb(255 255 255 / 50%);
	--duration: 0.3s;
	--container: 1480px;
	--spacer: 1rem;
	--shadow-l: 0px 8px 17px 2px rgba(0,0,0,0.14) , 0px 3px 14px 2px rgba(0,0,0,0.12) , 0px 5px 5px -3px rgba(0,0,0,0.2);
	--shadow-xl: 0px 16px 24px 2px rgba(0,0,0,0.14) , 0px 6px 30px 5px rgba(0,0,0,0.12) , 0px 8px 10px -7px rgba(0,0,0,0.2);
	--scrollbar-color: rgb(255 255 255 / 50%);
	--main-padding: 1rem;


  }

            @font-face {
                font-family: "montserrat-light";
                font-display: swap;
                src: url("../_css/font/montserrat-light.eot");
                src: url("../_css/font/montserrat-light.eot?#iefix")format("embedded-opentype"),url("../_css/font/montserrat-light.woff")format("woff"),url("_css/font/montserrat-light.ttf")format("truetype");
                font-weight: 300;
                font-style: normal;
                font-stretch: normal
            }

            @font-face {
                font-family: "montserrat-bold";
                font-display: swap;
                src: url("../_css/font/montserrat-bold.eot");
                src: url("../_css/font/montserrat-bold.eot?#iefix")format("embedded-opentype"),url("../_css/font/montserrat-bold.woff")format("woff"),url("_css/font/montserrat-bold.ttf")format("truetype");
                font-weight: bold;
                font-style: normal;
                font-stretch: normal;
               
            }

            * {
                margin: 0;
                padding: 0;
                border: 0;
                outline-style: none;
                -webkit-text-size-adjust: none;
                -moz-text-size-adjust: none;
                -ms-text-size-adjust: none;
                box-sizing: border-box;
                -moz-box-sizing: border-box;
                -webkit-box-sizing: border-box;
                -webkit-appearance: none;
                border-radius: 0;
                -webkit-tap-highlight-color: transparent;
                -webkit-user-select: none;
                -moz-user-select: -moz-none;
                -ms-user-select: none;
                user-select: none
            }

            .i {
                stroke-width: var(--i-stroke, 2);
                width: var(--i-size, 24px);
                height: var(--i-size, 24px);
                stroke: currentColor;
                stroke-linecap: round;
                stroke-linejoin: round;
                fill: none;
            }

            html {
                width: 100%;
                height: 100%
            }

            body {
                --ratio: 1;
                width: 100%;
                height: 100%;
                font-family: "montserrat-light",Arial,Helvetica,sans-serif;
                font-size: 1vw;
                font-weight: normal;
                color: #252525;
                -webkit-font-smoothing: antialiased;
                font-smoothing: antialiased;
                -webkit-text-size-adjust: 100%;
                text-size-adjust: 100%;
                position: relative;
                overflow: hidden;
                background: #000;
            }

            ::selection {
                background: #252525;
                color: #ffffff
            }

            ::-moz-selection {
                background: #252525;
                color: #ffffff
            }

            ::-webkit-selection {
                background: #252525;
                color: #ffffff
            }

            ::-webkit-scrollbar {
                display: none
            }

            textarea::-moz-placeholder {
                color: rgba(0,0,0,.3)
            }

            textarea::-webkit-input-placeholder {
                color: rgba(0,0,0,.3)
            }

            textarea:-ms-input-placeholder {
                color: rgba(0,0,0,.3)
            }

            input::-moz-placeholder {
                color: rgba(0,0,0,.3)
            }

            input::-webkit-input-placeholder {
                color: rgba(0,0,0,.3)
            }

            input:-ms-input-placeholder {
                color: rgba(0,0,0,.3)
            }

            svg,img,iframe,video,audio,picture {
                overflow: visible;
                vertical-align: middle;
                position: relative
            }

            a:link,a:visited {
                color: #252525;
                text-decoration: underline
            }

            a:hover,a:hover.visited {
                text-decoration: none
            }

            h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6 {
                font-family: "montserrat-bold",Arial,Helvetica,sans-serif;
                font-weight: normal;
                color: #111111;
                -moz-hyphens: auto;
                -webkit-hyphens: auto;
                -ms-hyphens: auto;
                hyphens: auto;
                display: block;
                text-align: left;
                text-transform: none;
                letter-spacing: -.1vw;
                line-height: 1;
                margin: 0 0 1vw 0;
                position: relative
            }

            h1,.h1 {
                font-size: 2.3vw;
                line-height: 1;
                letter-spacing: -.1vw
            }

            h2,.h2 {
                font-size: 2vw;
                line-height: 1;
                letter-spacing: -.07vw
            }

            h3,.h3 {
                font-size: 1.7vw;
                line-height: 1;
                letter-spacing: -.04vw
            }

            h4,.h4 {
                font-size: 1.4vw;
                line-height: 1;
                letter-spacing: -.03vw
            }

            h5,.h5 {
                font-size: 1.2vw;
                line-height: 1;
                letter-spacing: -.03vw
            }

            h6,.h6 {
                font-size: 1vw;
                line-height: 1;
                letter-spacing: -.02vw
            }

            p {
                margin: 0 0 .8vw 0;
                font-size: 1vw;
                font-weight: normal;
                text-align: justify;
                display: block;
                line-height: 1.6;
                color: #252525;
                -moz-hyphens: auto;
                -webkit-hyphens: auto;
                -ms-hyphens: auto;
                hyphens: auto;
                position: relative
            }

            small,small * {
                font-size: .5vw;
                color: #252525;
                text-align: left
            }

            strong,b,.bold {
                font-weight: normal;
                font-family: "montserrat-bold",Arial,Helvetica,sans-serif
            }

            br {
                font-size: 0
            }

            br[clear="all"] {
                line-height: 0;
                font-size: 0;
                margin: 0;
                padding: 0
            }

            hr {
                display: block;
                margin: 1vw 0;
                font-size: 0;
                text-indent: -9999;
                width: 100%;
                height: 1px;
                border: 0;
                position: relative;
                background: linear-gradient(to right,rgba(0,0,0,0)0%,rgba(0,0,0,1)10%,rgba(0,0,0,1) 90%,rgba(0,0,0,0)100%)
            }

            table {
                border-collapse: collapse;
                margin: 0 0 .8vw 0;
                width: 100%;
                table-layout: fixed;
                border-top: 4px solid rgba(0,0,0,1)
            }

            table tr {
                position: relative;
                border-bottom: 1px solid rgba(0,0,0,.1)
            }

            table tr:nth-child(2n+1) {
                background: rgba(0,0,0,.01)
            }

            table td {
                padding: 1vw;
                vertical-align: middle;
                text-align: center
            }

            table th {
                padding: 1vw;
                vertical-align: middle;
                text-align: left;
                text-transform: uppercase;
                text-align: center;
                vertical-align: middle;
                text-transform: uppercase;
                font-family: "montserrat-bold",Arial,Helvetica,sans-serif;
                background: rgba(0,0,0,.03)
            }

            ul,ol {
                padding: 0;
                margin: 1vw 0;
                overflow: hidden;
                list-style-type: disc;
                font-size: .9vw
            }

            ol {
                list-style-type: decimal
            }

            ul li {
                padding: 0;
                margin: 0 0 .5vw 2vw;
                text-align: left
            }

            ol li {
                padding: 0;
                margin: 0 0 .5vw 2vw;
                list-style-type: decimal;
                text-align: left
            }

            ul li ul,ol li ol {
                margin: .5vw 0 0
            }

            ul li:last-child,ol li:last-child {
                margin: 0 0 0 2vw
            }

            .nowrap {
                white-space: nowrap
            }

            .text-align-left {
                text-align: left!important
            }

            .text-align-center {
                text-align: center!important
            }

            .text-align-right {
                text-align: right!important
            }

            .text-align-justify {
                text-align: justify!important
            }

            .vertical-align-top {
                vertical-align: top!important
            }

            .vertical-align-middle {
                vertical-align: middle!important
            }

            .vertical-align-bottom {
                vertical-align: bottom!important
            }

            .text-decoration-none {
                text-decoration: none!important
            }

            .text-transform-uppercase {
                text-transform: uppercase!important
            }

            .width-5p {
                width: 5%!important
            }

            .width-10p {
                width: 10%!important
            }

            .width-15p {
                width: 15%!important
            }

            .width-20p {
                width: 20%!important
            }

            .width-25p {
                width: 25%!important
            }

            .width-30p {
                width: 30%!important
            }

            .width-35p {
                width: 35%!important
            }

            .width-40p {
                width: 40%!important
            }

            .width-45p {
                width: 45%!important
            }

            .width-50p {
                width: 50%!important
            }

            .width-55p {
                width: 55%!important
            }

            .width-60p {
                width: 60%!important
            }

            .width-65p {
                width: 65%!important
            }

            .width-70p {
                width: 70%!important
            }

            .width-75p {
                width: 75%!important
            }

            .width-80p {
                width: 80%!important
            }

            .width-85p {
                width: 85%!important
            }

            .width-90p {
                width: 90%!important
            }

            .width-95p {
                width: 95%!important
            }

            .width-100p {
                width: 100%!important
            }

            .width-auto {
                width: auto!important
            }

            .padding-0 {
                padding: 0!important
            }

            .margin-0 {
                margin: 0!important
            }

            .display-none {
                display: none!important
            }

            .display-inline {
                display: inline!important;
                overflow: hidden!important
            }

            .display-block {
                display: block!important;
                overflow: hidden!important
            }

            .display-inline-block {
                display: inline-block!important
            }

            .overflow-hidden {
                overflow: hidden!important
            }

            .overflow-visible {
                overflow: visible!important
            }

            .position-relative {
                position: relative!important
            }

            .position-absolute {
                position: absolute!important
            }

            .clear-both {
                clear: both
            }

            .background-none {
                background: none!important
            }

            .border-0 {
                border: 0!important
            }

            .opacity-0 {
                opacity: 0!important
            }

            .opacity-1 {
                opacity: 1!important
            }

            .lazyload,.lazyloading {
                opacity: 0
            }

            .lazyloaded {
                opacity: 1;
                transition: opacity 1s!important
            }

            ul.cols {
                display: table;
                table-layout: fixed;
                width: 100%;
                padding: 0;
                margin: 0;
                position: relative;
                overflow: visible!important;
                list-style-type: none
            }

            ul.cols>li {
                display: table-cell;
                vertical-align: middle;
                position: relative;
                padding: 0;
                margin: 0
            }

            ul.cols>li.blank {
                width: 1.84vw
            }

            ul.cols.body {
                width: 100%;
                height: 100%;
                overflow: hidden;
                display: table!important;
                z-index: 1
            }

            ul.cols.body>li {
                display: table-row!important
            }

            ul.cols.body>li:nth-child(1) {
            }

            ul.cols.body>li:nth-child(2) {
                height: 100%
            }

            ul.cols.body>li:nth-child(2) div.container {
                width: 100%;
                height: 100%;
                position: relative;
                vertical-align: middle;
                display: table
            }

            ul.cols.body>li:nth-child(2) div.container div.radio {
                display: table-cell;
                vertical-align: middle
            }

            ul.cols.body>li:nth-child(3) {
                vertical-align: bottom
            }

            section {
                position: relative;
                width: 100%;
                height: 100%;
                min-width: 100%!important;
                min-height: 100%!important;
                overflow-x: hidden;
                
                overflow-y: scroll;
                padding-bottom: 40vw
            }

            img.logo {
                position: absolute;
                z-index: 99;
                width: 10vw;
                left: 3vw;
                top: 3vw
            }

            div.bg_video {
                position: fixed; /* El contenedor no se moverá */
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                z-index: -1; /* Envía el video al fondo */
                overflow: hidden; /* Asegura que no haya contenido sobrante */
            }

            /* Video de fondo */
               .bg_video video {
                position: absolute;
                top: 50%;
                left: 50%;
                width: auto;
                height: 100%; /* Asegura que el video cubra la altura completa */
                transform: translate(-50%, -50%); /* Centra el video */
                 object-fit: cover; /* Ajusta el video para que llene el contenedor */
            }

            div.bg {
                position: fixed;
                z-index: 1;
                width: 100%;
                height: 70%;
                left: 0;
                top: 0;
              
            }

            div.bg div.placeholder {
                
            }

            div.bg div.placeholder img {
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                object-fit: cover;
                filter: blur(12px);
                animation: bga 60s linear infinite;
                opacity: 0.8;
            }

            @keyframes bga {
                50% {
                    transform: scale(2)
                }
            }

            div.cd {
                position: absolute;
                z-index: 10;
                width: 50vh;
                height: 50vh;
                background: linear-gradient(152deg, #fcbc0e, rgba(255, 202, 38, 0.25));
                left: 50%;
                top: 50%;
                transform: translate(-50%,-50%);
                border-radius: 1vw;
                box-shadow: 0px 0px 5vw rgba(0,0,0,.15);
                overflow: hidden
            }

            div.cd div.images {
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%
            }

            div.cd div.images.on {
                transform: translateX(-100%)
            }

            div.cd div.images img {
                width: auto;
                height: 100%;
                position: absolute;
                top: 0
            }

            div.cd div.images img:nth-child(1) {
                left: 0
            }

            div.cd div.images img:nth-child(2) {
                left: 100%
            }

            div.title {
                position: absolute;
                z-index: 10;
                left: 50%;
                top: 0;
                color: #ffffff;
                text-shadow: 0 .052vw .052vw rgba(0,0,0,1);
                font-size: 2vw;
                font-family: "montserrat-bold";
                font-size: 2vw;
                line-height: 1;
                letter-spacing: -.07vw;
                /*width: 60vw;*/
                height: 25vh;
                transform: translateX(-50%);
                text-align: center;
                overflow: hidden
            }

            div.title div.placeholder {
                position: absolute;
                top: 50%;
               
               /* transform: translate(-50%,-50%)*/
            }

            div.title span.artist {
                font-size: 1vw;
                text-transform: uppercase;
                letter-spacing: .156vw;
                white-space: nowrap;
                opacity: .6;
                display: block
            }

            div.title span.song {
                display: block;
                width: 100%;
                margin-top: .3vw;
                white-space: nowrap
            }

            div.time {
                position: fixed;
                right: 3vw;
                top: 3vw;
                z-index: 10;
                text-shadow: 0 .052vw 0.052vw rgba(0,0,0,1);
                background: rgba(255,255,255,.1);
                border-radius: 100px;
                padding: 1vw 1.2vw;
                opacity: 0;
                animation: .5s ta 1s linear forwards
            }

            div.time span {
                display: inline-block;
                font-family: "montserrat-bold";
                text-decoration: none;
                font-size: 1.5vw;
                color: #ffffff;
                text-shadow: 0 .052vw .052vw rgba(0,0,0,1);
                width: 1.02vw;
                text-align: center;
                line-height: 1
            }

            div.time span:nth-child(3),div.time span:nth-child(6) {
                animation: tad 1s linear infinite
            }

            @keyframes tad {
                50% {
                    opacity: 0
                }
            }

            @keyframes ta {
                100% {
                    opacity: 1
                }
            }

            div.cent a {
                font-family: "montserrat-bold";
                text-decoration: none;
                font-size: 1.2vw;
                display: inline-block;
                color: #ffffff;
                background: none;
                line-height: 1;
                padding: 1vw 1.2vw 1vw 3.6vw;
                text-transform: uppercase;
                border-radius: 100px;
                position: relative;
                background: rgba(255,255,255,.1)
            }

            div.cent a:hover {
                background: rgba(255,255,255,.3)
            }

            div.cent a:before {
                content: "";
                position: absolute;
                left: .2vw;
                top: 50%;
                width: 2.8vw;
                height: 2.8vw;
                transform: translateY(-50%);
                border-radius: 100px;
                color: #ffffff;
                text-align: center;
                line-height: 1.7;
                font-size: 1.5vw;
                font-family: "montserrat-bold";
                background-image: url(../_img/coin.gif);
                background-size: cover
            }

            div.price {
                position: fixed;
                left: 3vw;
                bottom: 9vw;
                z-index: 10
            }

            div.price a {
                font-family: "montserrat-bold";
                text-decoration: none;
                font-size: 1.2vw;
                display: inline-block;
                color: #ffffff;
                background: none;
                line-height: 1;
                padding: 1vw 1.2vw 1vw 3.6vw;
                text-transform: uppercase;
                border-radius: 100px;
                position: relative;
                background: rgba(255,255,255,.1)
            }

            div.price a:hover {
                background: rgba(255,255,255,.3)
            }

            div.price a:before {
                content: "";
                position: absolute;
                left: .3vw;
                top: 50%;
                width: 2.7vw;
                height: 2.7vw;
                transform: translateY(-50%);
                border-radius: 100px;
                color: #ffffff;
                text-align: center;
                line-height: 1.7;
                font-size: 1.5vw;
                font-family: "montserrat-bold";
                background-image: url(../_img/price.gif);
                background-size: cover
            }

            div.quality {
                position: relative;
                display: inline-block;
                margin-bottom: 1rem;
            }

            div.quality label.switch {
                position: relative;
                display: inline-block;
                width: calc(4.5vw * var(--ratio));
                height: calc(2.7vw * var(--ratio));
            }

            div.quality label.switch:after {
                position: absolute;
                left: calc(5.5vw * var(--ratio));
                top: 50%;
                transform: translateY(-50%);
                content: "Baja Calidad";
                font-size: calc(.79vw * var(--ratio));
                line-height: .9;
                color: #ffffff;
                text-transform: uppercase;
                font-family: "montserrat-bold",Arial,Helvetica,sans-serif
            }

            div.quality label.switch input {
                cursor: pointer;
                transition: background .3s;
                position: absolute;
                width: 100%;
                height: 100%;
                left: 0;
                bottom: 0;
                background: rgba(255,255,255,.3);
                border-radius: 2000px
            }

            div.quality label.switch span {
                cursor: pointer;
                transition: transform .3s;
                position: absolute;
                z-index: 2;
                display: inline-block;
                top: 0;
                margin: calc(.2vw * var(--ratio));
                width: calc(2.3vw * var(--ratio));
                height: calc(2.3vw * var(--ratio));
                background: #ffffff;
                border-radius: 2000px;
                overflow: hidden;
                filter: drop-shadow(0 0 2px rgba(0,0,0,.2))
            }

            div.quality label.switch input:checked {
                background: #55a3f8
            }

            div.quality label.switch input:checked ~ span {
                transform: translateX(calc(1.8vw * var(--ratio)))
            }

            div.controls {
                position: absolute;
                z-index: 10;
                left: 50%;
                bottom: 0;
                width: 52vh;
                height: 25vh;
                transform: translateX(-50%);
                text-align: center;
                overflow: show
            }

            div.controls ul.cols.controls {
                width: 100%;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);
                width: auto!important
            }

            div.content {
                position: fixed;
                left: 99999px;
                top: 99999px
            }

           /* Estilos generales para el botón play */
           div.play {
                display: flex;
                justify-content: center;
    align-items: center;
    width: 100px;
    height: 100px;
    background: var(--bg-gradient);
    position: fixed;
    bottom: 260px;
    /* Ajusté este valor para mover el botón más arriba */
    left: 20px;
    z-index: 98;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    /* Sombra para el botón */
}
            img[src="rotate.png"] {
               position: absolute;
               z-index: 1;
               animation: rotate 10s linear infinite;
               width: 120%;
               height: 120%;
            }


            /* Estilos para los íconos de play/pause */

            /* Imagen rotatoria */
             div.rotating-image {
               position: absolute;
               width: 60px;  /* Ajusta el tamaño de la imagen rotatoria */
               height: 60px; /* Ajusta el tamaño de la imagen rotatoria */
               z-index: 1;  /* Asegura que la imagen esté encima del GIF */
               animation: rotate 5s linear infinite; /* Animación de rotación */
            }

            @keyframes rotate {
               from {
               transform: rotate(0deg);
            }
             to {
               transform: rotate(360deg);
            }
            }


              div.play img {
              width: 180%;  /* Ajusta el tamaño del icono */
              height: 180%;  /* Ajusta el tamaño del icono */
              transition: all 0.2s;
           
              border-radius: 50%;  /* Redondea el fondo para que sea circular */
              padding: 10%;  /* Da espacio entre el icono y el borde del fondo */
            }

          /* Efecto de hover */
           div.play:hover img {
             filter: drop-shadow(0 0 10px #ffffff);  /* Efecto de sombra cuando se pasa el mouse */
            }

            /* Ocultar la imagen de play cuando la clase "on" está activa */
            div.play.on .play-icon {
              display: none;
            }

          /* Mostrar la imagen de pause cuando la clase "on" está activa */
            div.play.on .pause-icon {
               display: block;
            }

         /* Mostrar la imagen de play por defecto */
            div.play .play-icon {
              display: block;
            }

         /* Ocultar la imagen de pause por defecto */
           div.play .pause-icon {
              display: none;
            }


     
         /* AQUI TERMINA LA CONFI DEL PLAY PAUSE */

            div.volume {
                position: relative!important;
                z-index: 99!important;
                width: 37.5vh
            }

            div.volume ul.cols li:nth-child(1) {
                width: .82vw
            }

            div.volume ul.cols li:nth-child(2) {
                padding: 0 1vw
            }

            div.volume ul.cols li:nth-child(3) {
                width: 2vw
            }

            div.volume input {
                width: 100%;
                vertical-align: middle
            }

            div.volume input[type=range] {
                height: 2vw!important;
                -webkit-appearance: none!important;
                margin: 0 0!important;
                width: 100%!important;
                background: none!important
            }

            div.volume input[type=range]:focus {
                outline: none!important
            }

            div.volume input[type=range]::-webkit-slider-runnable-track {
                width: 100%!important;
                height: .1vw!important;
                background: #ffffff!important;
                border: none;
                border-radius: 5px!important
            }

            div.volume input[type=range]::-webkit-slider-thumb {
                height: 1.5vw!important;
                width: 1.5vw!important;
                border-radius: 100px!important;
                background: #ffffff!important;
                cursor: pointer!important;
                -webkit-appearance: none!important;
                margin-top: -.7vw!important;
                border: .1vw solid #ffffff!important;
                transition: filter .2s
            }

            div.volume input[type=range]::-webkit-slider-thumb:hover {
                filter: drop-shadow(0 0 .208vw rgba(255,255,255,.7))
            }

            div.volume input[type=range]::-moz-range-thumb {
                height: 1.5vw!important;
                width: 1.5vw!important;
                border-radius: 100px!important;
                background: #ffffff!important;
                cursor: pointer!important;
                -webkit-appearance: none!important;
                margin-top: -.7vw!important;
                border: .1vw solid #ffffff!important;
                transition: filter .2s
            }

            div.volume input[type=range]::-moz-range-thumb:hover {
                filter: drop-shadow(0 0 .208vw rgba(255,255,255,.7))
            }

            div.volume input[type=range]:focus::-webkit-slider-runnable-track {
                background: #ffffff!important;
                border: 0px!important
            }

            div.volume input[type=range]::-moz-range-track {
                width: 100%!important;
                height: .1vw!important;
                cursor: pointer!important;
                box-shadow: 0px 0px 0px!important;
                background: #ffffff!important;
                border-radius: 5px!important;
                border: 0px!important
            }

            div.volume img[src*="volume0"] {
                width: .82vw
            }

            div.volume img[src*="volume100"] {
                width: 2vw
            }

            svg.loading {
                position: absolute;
                width: 100%;
                height: 50vh;
                top: 50%;
                transform: translate(0%,-50%);
                opacity: .8
            }

            svg.loading text {
                font-family: "montserrat-bold";
                font-size: 2.8vw;
                text-transform: uppercase;
                fill: #ffffff
            }

            footer {
                position: absolute;
                left: 0;
                bottom: 0;
                padding: 3vw;
                width: 100%;
                z-index: 9
            }

            footer p {
                margin: 0;
                font-size: .8vw;
                color: #ffffff;
                line-height: 1.5;
                
            }

            footer a {
                color: #ffffff!important;
                opacity: .9
            }

            footer a[href*="pdf"] {
                display: block;
                background: url(../_img/pdf.svg) left top no-repeat;
                height: 3.5vw;
                padding: 0 0 0 4.7vw;
                color: #ffffff!important;
                font-size: 1.2vw;
                text-decoration: none;
                font-family: "montserrat-bold";
                text-transform: uppercase;
                width: 10vw;
                line-height: 1;
                margin-bottom: 2vw;
                transition: all .2s
            }

            footer a[href*="pdf"]:hover {
                filter: drop-shadow(0 0 .208vw rgba(255,255,255,.7))
            }

            div.app {
                display: block;
                margin-bottom: 1vw
            }

            div.app a {
                display: inline-block
            }

            div.app a:nth-child(1) {
                margin: 0 2vw 0 0
            }

            div.app a img {
                width: auto;
                height: 3vw;
                transition: filter .2s
            }

            div.app a:hover img {
                filter: drop-shadow(0 0 .208vw rgba(255,255,255,.7))
            }

    div.megasocial {
    position: fixed;
    right: 10px;
    top: 50%; /* Centra verticalmente */
    transform: translateY(-50%); /* Ajusta el centro perfecto */
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
}

div.megasocial ul {
    padding: 0;
    margin: 0;
    list-style-type: none;
}

div.megasocial ul li {
    margin-bottom: 10px;
}

div.megasocial ul li a {
    display: block;
    width: 50px;
    height: 50px;
    transition: filter 0.2s;
    margin: 0 auto;
}

div.megasocial ul li a:hover {
    filter: drop-shadow(0 0 5px #ffffff);
}

div.megasocial ul li img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
            nav {
                display: none
            }

            div.eq {
                position: absolute;
                width: 100%;
                z-index: 2;
                top: 90%;
                transform: skew(0deg,0deg) translate(-1vw,-50%);
                opacity: 0;
                overflow: hidden
            }

            div.eq.on {
                opacity: .3
            }

            div.popup {
                position: absolute!important;
                z-index: 100;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                backdrop-filter: blur(8px);
                transition: all .2s;
                background: rgba(0,0,0,.5);
                visibility: hidden;
                opacity: 0
            }

            div.popup.on {
                visibility: visible;
                opacity: 1;
                z-index: 4300;
            }

            div.popup img.price {
                width: auto;
                height: 92vh;
                border-radius: 1vw;
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%,-50%)
            }

            .popup-iframe {
                top: 50%;
                left: 50%;
                position: absolute;
                margin: auto;
                transform: translate(-50%, -50%);
                width: 100%;
                max-width: 880px;
                padding: 1rem;
                background-color: rgb(255 255 255 / 20%);
                border-radius: 1rem;
            }

            .popup-iframe iframe {
                aspect-ratio: 16/9;
                width: 100%;
                height: auto;
            }
            span.close {
                position: fixed;
                right: 3vw;
                top: 3vw;
                width: 3.1vw;
                height: 3.1vw;
                z-index: 2;
                transition: all .2s;
                background: url(_img/ico-close.svg);
                background-size: 100%;
                background-position: center center;
                background-repeat: no-repeat;
                cursor: pointer;
                z-index: 101;
                display: none;
                border-radius: 100px
            }

            span.close.on {
               display: flex;
               z-index:4500;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 11%;
    left: 50%;
    transform: translate(-50%, -50%);
            }

            span.close:hover {
                filter: drop-shadow(0 0 .208vw #ffffff)
            }

            @media only screen and (max-device-width: 768px) and (max-device-height:1024px) and (orientation:portrait) {
                img.logo {
                    width:15vw
                }

                div.title {
                    font-size: 4vw;
                    width: 100%;
                }

                div.title span.artist {
                    font-size: 2vw
                }

                div.cd {
                    border-radius: 1vw
                }

                svg.loading text {
                    font-size: 8vw
                }


                div.controls ul.cols.controls li:nth-child(2) {
                    display: none!important
                }

                div.volume img[src*="volume0"] {
                    width: 1.64vw!important
                }

                div.volume ul.cols li:nth-child(1) {
                    width: 1.64vw!important
                }

                div.volume ul.cols li:nth-child(2) {
                    padding: 0 2vw!important
                }

                div.volume ul.cols li:nth-child(3) {
                    width: 4vw!important
                }

                div.volume img[src*="volume100"] {
                    width: 4vw!important
                }

                div.volume input[type=range] {
                    height: 4vw!important
                }

                div.volume input[type=range]::-webkit-slider-runnable-track {
                    height: .2vw!important
                }

                div.volume input[type=range]::-webkit-slider-thumb {
                    height: 3vw!important;
                    width: 3vw!important;
                    margin-top: -1.5vw!important
                }

                div.volume input[type=range]::-webkit-slider-thumb:hover {
                    filter: drop-shadow(0 0 .624vw rgba(255,255,255,.7))
                }
            }

            @media only screen and (max-device-width: 1024px) and (max-device-height:1366px) and (orientation:portrait) {
                img.logo {
                    width:15vw
                }

                div.title {
                    font-size: 4vw;
                    width: 100%;
                }

                div.title span.artist {
                    font-size: 2vw
                }

                div.cd {
                    border-radius: 2vw
                }

                svg.loading text {
                    font-size: 6vw
                }

                /* div.play {
                    width: 10vw!important;
                    height: 10vw!important;
                    margin-right: 2vw!important
                } */

                div.controls ul.cols.controls li:nth-child(2) {
                    display: none!important
                }

                div.volume img[src*="volume0"] {
                    width: 1.64vw!important
                }

                div.volume ul.cols li:nth-child(1) {
                    width: 1.64vw!important
                }

                div.volume ul.cols li:nth-child(2) {
                    padding: 0 2vw!important
                }

                div.volume ul.cols li:nth-child(3) {
                    width: 4vw!important
                }

                div.volume img[src*="volume100"] {
                    width: 4vw!important
                }

                div.volume input[type=range] {
                    height: 4vw!important
                }

                div.volume input[type=range]::-webkit-slider-runnable-track {
                    height: .2vw!important
                }

                div.volume input[type=range]::-webkit-slider-thumb {
                    height: 3vw!important;
                    width: 3vw!important;
                    margin-top: -1.5vw!important
                }

                div.volume input[type=range]::-webkit-slider-thumb:hover {
                    filter: drop-shadow(0 0 .624vw rgba(255,255,255,.7))
                }
            }

            @media only screen and (max-width: 640px) and (orientation:portrait) {

                body {
                    padding-top:14vw;
                    margin: 0;
                    padding: 0;
                    overflow: hidden;
                 }

                /* Evita el desplazamiento de la página */

                body.off {
                    overflow: hidden
                }

            nav {
                    display: block;
                    position: fixed;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 19vw;
                    z-index: 100;
                    overflow: hidden;
                    transition: all .5s
                }

                nav div.nav {
                    position: relative;
                    z-index: 1;
                    display: block;
                    width: 100%;
                    height: 16.5vw;
                    background: linear-gradient(152deg, #fcbc0e, rgba(255, 202, 38, 0.25));
                    /*background-image: url(../_img/bg-nav.svg);*/
                    background-position: 0 0;
                    background-size: 100%;
                    background-repeat: no-repeat;
                }

                /*nav:after{content:"";position:absolute;left:0;top:14vw;width:5vw;height:5vw;background:#ff0000;z-index:100}*/
                
                nav img[src*="logo"] {
                    height: 8vw;
                    position: absolute;
                    left: 3vw;
                    top: 3vw
                }

                div.menu {
                            position: absolute;
                   left: 0;
                   top: 14vw;
                   width: 56%;
                   height: calc(100vh - 14vw);
                   overflow: scroll;
                   transform: translateY(-100%);
                   transition: all .5s;
                    background: linear-gradient(152deg, #fcbc0e, rgba(255, 202, 38, 0.25));
                }

                div.menu p {
                    color: #ffffff;
                    font-size: 3vw;
                    text-align: center;
                    padding: 4vw;
                    margin: 0;
                    
                }

                div.menu a {
                    color: #ffffff!important;
                    opacity: .9
                }

                div.menu div.megasocial {
                    position: relative;
                    bottom: 0;
                    right: 0;
                    padding: 5vw;
                    width: 100%;
                    text-align: center
                }

                div.menu div.megasocial ul li a {
                    width: 12vw!important;
                    height: 12vw!important;
                    padding: 3.5vw!important
                }

                div.menu div.megasocial ul li,div.megasocial ul li:first-child {
                    padding: 0 1.3vw 1.3vw!important
                }

                div.menu div.version {
                    padding: 0 8vw;
                    color: #ffffff;
                    width: 100%;
                    text-align: center
                }

                nav.on {
                    height: 100vh

                }

                nav.on div.menu {
                    transform: translateY(0%)
                }

                div.menu a[href*="pdf"] {
                    display: block;
                    background: url(../_img/pdf.svg) 8vw 5vw no-repeat;
                    background-size: 10vw;
                    height: 20vw;
                    padding: 6vw 5vw 5vw 22vw;
                    color: #ffffff!important;
                    font-size: 4vw;
                    text-decoration: none;
                    font-family: "montserrat-bold";
                    text-transform: uppercase;
                    width: 100%;
                    line-height: 1;
                    transition: all .2s;
                    border-bottom: 1px solid rgba(255,255,255,.3)
                }

                div.menu a[href*="pdf"]:hover {
                    filter: drop-shadow(0 0 .208vw rgba(255,255,255,.7))
                }

                div.app {
                    padding: 5vw;
                    border-bottom: 1px solid rgba(255,255,255,.3);
                    border-top: 1px solid rgba(255,255,255,.3);
                    margin: 10vw 0 0 0;
                    text-align: center
                }

                div.app a:nth-child(1) {
                    margin: 0 5vw 0 0
                }

                div.app a img {
                    height: 80px;
                }
                div.time {
                    position: fixed;
                    top: 3.5vw;
                    right: auto;
                    left: 50%;
                    transform: translateX(-50%);
                    z-index: 100;
                    padding: 2vw 3vw;
                    line-height: .8
                }

                div.time span {
                    font-size: 5vw;
                    width: 3.3vw;
                    text-shadow: 0 .15vw .15vw rgba(0,0,0,.3)
                }
                div.cent {
                    margin: 2rem 2rem 0;
                }
                 .footer-tool {
                    margin: 1rem 2rem 0;
                }
                div.cent a {
                    font-size: 4vw;
                    padding: 3vw 3.6vw 3vw 10.8vw
                }

                div.cent a:before {
                    width: 8vw;
                    height: 8vw;
                    left: .6vw
                }

                div.price {
                    top: 4.5vw;
                    left: 50%;
                    transform: translateX(-50%);
                    bottom: auto
                }

                div.price a {
                    font-size: 5vw;
                    padding: 3vw 3.6vw 3vw 11.2vw
                }

                div.price a:before {
                    left: 1vw;
                    width: 8.1vw;
                    height: 8.1vw
                }

                div.quality {
                    /* top: 15vw;
                    left: 8vw; */
                    bottom: auto;
                    --ratio: 3.5
                }

                span.hamburger {
                    display: block;
                    width: 14vw!important;
                    height: 14vw!important;
                    position: absolute;
                    right: 0;
                    top: 0;
                    cursor: pointer;
                    z-index: 3
                }

                span.hamburger span {
                    display: block;
                    position: absolute;
                    width: 60%;
                    height: .5vw;
                    left: 20%;
                    background: #ffffff;
                    transition: all .2s;
                    transform-origin: 50% 50%
                }

                span.hamburger span:nth-child(1) {
                    top: 30%
                }

                span.hamburger span:nth-child(2) {
                    top: 50%;
                    transition: all .5s
                }

                span.hamburger span:nth-child(3) {
                    top: 70%
                }

                span.hamburger span:nth-child(4) {
                    top: 50%;
                    opacity: 1
                }

                span.hamburger span:nth-child(5) {
                    top: 50%;
                    opacity: 1
                }

                span.hamburger.on {
                }

                span.hamburger.on span:nth-child(1) {
                    top: 50%;
                    transition-delay: .2s;
                    opacity: 0
                }

                span.hamburger.on span:nth-child(2) {
                    width: 0px;
                    left: 50%
                }

                span.hamburger.on span:nth-child(3) {
                    top: 50%;
                    transition-delay: .2s;
                    opacity: 0
                }

                span.hamburger.on span:nth-child(4) {
                    top: 50%;
                    transition-delay: .4s;
                    opacity: 1;
                    transform: rotate(45deg)
                }

                span.hamburger.on span:nth-child(5) {
                    top: 50%;
                    transition-delay: .4s;
                    opacity: 1;
                    transform: rotate(-45deg)
                }

                img.logo {
                    display: none
                }

                div.links {
                    display: none
                }

                div.cd {
                   width: 64vw;
        height: 64vw;
        border-radius: 3vw;
        left: 19vw;
        top: 30vw;
        transform: none;
                }

                div.title {
                   width: 100%;
        height: 23vw;
        font-size: 4.5vw;
        top: -3vw;
        text-align: center;
                }

                div.title div.placeholder {
                    width: 100%;
                     
                    top: 50%;
                  /* transform: translate(-50%,-50%)*/
                }

                div.title span.artist {
                    font-size: 2.5vw
                }

                div.title span.song {
                    margin-top: 1vw;
                    white-space: normal
                }

                svg.loading {
                    top: 98vw;
                    height: 26vw
                }

                svg.loading text {
                    font-size: 13vw
                }

                div.controls {
                    top: 123vw;
                    bottom: auto;
                    height: 32vw!important;
                    width: 100vw;
                    border-bottom: 10vw solid rgba(255,255,255,0)
                }

                div.controls ul.cols.controls li:nth-child(2) {
                    display: none!important
                }

                div.controls div.play {
                    margin: 0!important
                }

                /* div.play {
                    width: 18vw!important;
                    height: 18vw!important;
                    margin-right: 4vw!important
                } */

                div.volume img[src*="volume0"] {
                    width: 2.56vw!important
                }

                div.volume ul.cols li:nth-child(1) {
                    width: 2.56vw!important
                }

                div.volume img[src*="volume100"] {
                    width: 5.99vw!important
                }

                div.volume ul.cols li:nth-child(3) {
                    width: 5.99vw!important
                }

                div.volume {
                    width: 62vw
                }

                div.volume ul.cols li:nth-child(2) {
                    padding: 0 3vw!important
                }

                div.volume input[type=range]::-webkit-slider-runnable-track {
                    height: .4vw!important
                }

                div.volume input[type=range]::-webkit-slider-thumb {
                    height: 5vw!important;
                    width: 5vw!important;
                    margin-top: -2.5vw!important
                }

                div.volume input[type=range]::-webkit-slider-thumb:hover {
                    filter: drop-shadow(0 0 1vw rgba(255,255,255,.7))
                }

                footer {
                    display: none
                }

                div.eq {
                    top: 143vw;
                    z-index: 2;
                    transform: none
                }

                div.popup {
                    width: 100vw;
                    height: 100vh;
                    overflow-x: hidden;
                    overflow-y: scroll;
                    text-align: center;
                    padding: 0vw;
                }

                div.popup img.price {
                    width: 100%;
                    height: auto;
                    border-radius: 3vw;
                    transform: none;
                    position: relative;
                    left: auto;
                    top: auto
                }
                span.close {
                    width: 14vw;
                    height: 14vw;
                    background-color: #7267c7
                }
            }
            .player-visualizer {
                position: fixed;
                pointer-events: none;
                display: flex;
                align-items: flex-end;
                justify-content: space-around;
                height: 100%;
                opacity: .25;
                filter: url(#gooey);
                inset: auto -20px -20px;
                z-index: 1;
            }
            .visualizer-filter {
                display: none
            }
            @keyframes pulse {
                from {
                    opacity: 0
                }
                50% {
                    opacity: .2
                }
                to {
                    transform: scale(1.5);
                    opacity: 0
                }
            }
            .player-toggle {
                border-radius: 50rem;
                background-color: #ffffff3d;
                transition: opacity .3s, background-color .3s;
                padding: 1.20rem;
                margin-right: 1.5rem;
                color: #fff;
                position: relative;
                cursor: pointer;
                --pulse-state: block;
            }
            .player-toggle.on {
                --pulse-state: block;
            }
            .player-toggle.on .i-play,
            .player-toggle:not(.on) .i-pause {
                display: block;
            }
            .player-toggle:focus {
                outline: 0
            }
            .player-toggle::after,
            .player-toggle::before {
                pointer-events: none;
                content: "";
                position: absolute;
                height: 100%;
                width: 100%;
                background-color: #fff;
                border-radius: 50%;
                z-index: -1;
                left: 0;
                top: 0;
                opacity: 0;
                animation: pulse 2s ease-out infinite;
                display: var(--pulse-state, none);
            }
            .player-toggle:after {
                animation-delay: 1s
            }
            .player-toggle:hover {
                opacity: .9;
                    --pulse-state: block;
            }
            .popupHistory {
                z-index: 4200;
                position: fixed;
                padding: 2rem;
                height: 100vh;
                width: 100%;
                max-width: 480px;
                background-color: rgb(255 255 255 / 20%);
                backdrop-filter: blur(10px);
                overflow-y: auto;
                inset: 0;
                transition: transform .3s;
            }
            .history, .history * {
                list-style: none;
                margin: 0;
            }
            .history-title {
                margin: 0;
                font-family: "montserrat-bold";
                color: #fff;
                background-color: rgb(255 255 255 / 10%);
                border-radius: 3rem;
                font-size: 14px;
                transition: background-color .3s;
            }
            .history-thumbnail {
                max-width: 50px;
                border-radius: 9999px;
                overflow: hidden;
            }
            .history-title span {
                margin-left: 1rem;
            }
            .history-title + * {
                margin: 4px 0 0 !important;
            }
            .history-title:hover {
                background: rgb(0 0 0 / 20%);
            }
            .popupHistory {
                scrollbar-color: rgb(255 255 255 / 75%);
                scrollbar-width: thin
            }
            .popupHistory:not(.is-active) {
                transform: translateX(-100%);
            }
            .popupHistory::-webkit-scrollbar {
                display: initial;
                width: 5px;
                height: 5px;
                background-color: transparent
            }
            .popupHistory::-webkit-scrollbar-track {
                background-color: rgb(255 255 255 / 10%);
                border-radius: 5px
            }
            .popupHistory::-webkit-scrollbar-thumb {
                background-color: rgb(255 255 255 / 75%);
                border-radius: 10px
            }
            .popupClose {
                margin-bottom: 1.5rem;
                background-color: rgb(255 255 255 / 20%);
                padding: .5rem;
                color: #fff;
                border-radius: 5rem;
                transition: background-color .3s;
                cursor: pointer;
            }
            .popupClose:hover {
                background-color: rgb(0 0 0 / 20%);
            }
         .footer-tool {
                display: flex;
                align-items: flex-start;
                flex-wrap: wrap;
                gap: 0.8rem;
                margin-bottom: 1.5rem;
                width: 178px;
                padding: 4px;
                margin-left: 11px;
                margin-right: 23px;
                
            }
            .history-button {
                padding: .65rem 1.25rem;
                font-family: "montserrat-bold";
                color: #fff;
                 background-color: #140b02;
                border-radius: 3rem;
                transition: background-color .3s;
                cursor: pointer;
            }
            .history-button:hover {
                   background-color:  #140b02;
            }
            .history-button svg {
                width: 20px;
            }
           
            .playerListeners {
                position: absolute;
                display: block;
                inset: auto 0 0;
                padding: 1rem;
                text-align: right;
                color: #fff;
                line-height: 1;
                font-family: "montserrat-bold";
                font-size: .875rem;
                text-shadow: 0 0.052vw 0.052vw rgb(0 0 0 / 80%);
                bottom:0px;
            }
            
            
            .play.player-toggle .i-play {
                display: block;
            }
            .play.player-toggle .i-pause {
                display: none;
            }
            .play.player-toggle.playing .i-play {
                display: none;
            }
             .play.player-toggle.playing .i-pause {
                display: block;
            }




.pie {
    position: fixed; 
    bottom: 0;
    background-image: url('_img/footer_4.png'); /* Ruta de la imagen de fondo*/
    background-size: cover; 
    height: 100px;
    width: 100%;
    z-index: 98;
    overflow: visible;
}
.image-behind {
    position: absolute;
    top: -50px; /* Mueve la imagen hacia arriba para que quede visible */
    left: 0;
    width: 100%;
    height: 200%; /* Hace la imagen más larga */
    z-index: 1;
}
  
 

   

        /* Estilos del contenedor del ecualizador */


        /* Estilos de las barras */
        .bar {
            width: 15px;
            background-color: #ffffff;
             transition: height 0.3s ease; /* Transición más suave para la altura */
        }

      @media only screen and (max-width: 640px) and (orientation: portrait) {
  nav div.nav {
        position: relative;
        z-index: 1;
        display: block;
        width: 100%;
        height: 16.5vw;
        background: var(--bg-gradient);
        /* background-image: url(../_img/bg-nav.svg); */
        background-position: 0 0;
        background-size: 100%;
        background-repeat: no-repeat;
    }
        div.menu {
        position: absolute;
        left: 0;
        top: 14vw;
        width: 56%;
        height: calc(100vh - 14vw);
        overflow: scroll;
        transform: translateY(-100%);
        transition: all .5s;
        background: var(--btn-bg, var(--bg-gradient));
    }
} 

:root{
  --offset: 0px;
  --move-initial: calc(-25% + var(--offset));
  --move-final: calc(-50% + var(--offset));
}

.marquee {
	height: 25px;
	width: 200px;
	white-space: nowrap;
	overflow: hidden;
	position: relative;
  }
  
  .marquee div {
	display: block;
	width: 200%;
	height: 20px;
    position: absolute;
	overflow: hidden;
    animation: marquee 10s linear infinite;
  }
  
  .marquee span {
	float: left;
	width: 50%;
  }
  
  @keyframes marquee {
	0% { left: 10; }
	100% { left: -50%; }
  }

span.titulocms {
    transition: opacity 0.5s ease;
}




@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}



/* AQUI TERMINA EL ALBUM CON SU CARATULA  Y SUS  CSS CODIGO CMSAPPS-->*/

#album-art {
position: relative;
width: 100%;
height: 100%;
margin: 30px auto 20px;
border-radius: 50%;  /* Hace que el contenedor sea redondo */
overflow: hidden;  /* Elimina las partes de la imagen que sobresalen */
animation: spin 10s linear infinite;
border: 5px solid #fff;  /* Ajusta el borde según sea necesario */
box-sizing: border-box;
}

#album {
width: 100%;
height: 100%;
object-fit: cover;  /* Ajusta la imagen para que cubra el contenedor sin deformarse */
}


/* AQUI TERMINA EL ALBUM CON SU CARATULA  Y SUS  CSS CODIGO CMSAPPS-->*/



        
          /* Contenedor general para todos los sliders */
          .slider-container {
            display: flex;
            flex-direction: column;
            gap: 20px;  /* Espacio entre cada slider */
            width: 300px;  /* Ajusta el tamaño total */
            margin: 0 auto;
        }
        
        /* Estilo para cada slider individual */
        .slider-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;  /* Espacio entre el label, slider y valor */
        }
        
        /* Estilo del label */
        .slider-item label {
            font-size: 16px; 
            font-weight: bold;
            color: #ffffff;
        }
        
        /* Estilo para los sliders */
        .slider-item input[type="range"] {
            width: 100%;
            height: 11px;
            -webkit-appearance: none;
            background: #ffffff;
            border-radius: 5px;
            outline: none;
            cursor: pointer;
        }
        
        /* Estilo del marcador del slider (thumb) */
        .slider-item input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: ff0000;  /* Color del botón */
            cursor: pointer;
        }
        
        /* Estilo para mostrar el valor del slider */
        .slider-item span {
          font-size: 17px;
            color: #ffffff;
        }
            .color-title {
    color: var(--color-title)
}

div.time {
	position: fixed;
	right: 3vw;
	top: 3vw;
	z-index: 10;
	text-shadow: 0 .052vw 0.052vw rgba(0, 0, 0, 1);
	background: rgba(255, 255, 255, .1);
	border-radius: 100px;
	padding: 1vw 1.2vw;
	opacity: 0;
	animation: .5s ta 1s linear forwards
}

div.time span {
	display: inline-block;
	font-family: "montserrat-bold";
	text-decoration: none;
	font-size: 1.5vw;
	color: #ffffff;
	text-shadow: 0 .052vw .052vw rgba(0, 0, 0, 1);
	width: 1.02vw;
	text-align: center;
	line-height: 1
}

div.time span:nth-child(3),
div.time span:nth-child(6) {
	animation: tad 1s linear infinite
}

@keyframes tad {
	50% {
		opacity: 0
	}
}

@keyframes ta {
	100% {
		opacity: 1
	}
}

.barra {
	background: var(--bg-gradient);
}