@font-face {
                font-family: "montserrat-light";
                font-display: swap;
                src: url("_css/font/montserrat-light.html");
                src: url("_css/font/montserrat-lightd41d.html?#iefix")format("embedded-opentype"),url("_css/font/montserrat-light.woff")format("woff"),url("_css/font/montserrat-light-2.html")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.html");
                src: url("_css/font/montserrat-boldd41d.html?#iefix")format("embedded-opentype"),url("_css/font/montserrat-bold.woff")format("woff"),url("_css/font/montserrat-bold-2.html")format("truetype");
                font-weight: bold;
                font-style: normal;
                font-stretch: normal
                
            }
            @font-face {
                font-family: "baloobold";
                font-display: swap;
                src: url("_css/font/baloobold.html");
                src: url("_css/font/baloobold41d.html?#iefix")format("embedded-opentype"),
                url("_css/font/baloobold.woff")format("woff"),
                url("_css/font/baloobold-2.html")format("truetype");
                font-weight: bold;
                font-style: normal;
                font-stretch: normal
            }
            @font-face {
                font-family: "baloosemi";
                font-display: swap;
                src: url("_css/font/baloosemi.html");
                src: url("_css/font/baloosemi41d.html?#iefix")format("embedded-opentype"),
                url("_css/font/baloosemi.woff")format("woff"),
                url("_css/font/baloosemi-2.html")format("truetype");
                font-style: normal;
                font-stretch: normal
            }
            @font-face {
                font-family: "balooregular";
                font-display: swap;
                src: url("_css/font/balooregular.html");
                src: url("_css/font/balooregulard41d.html?#iefix")format("embedded-opentype"),
                url("_css/font/balooregular.woff")format("woff"),
                url("_css/font/balooregular-2.html")format("truetype");
                font-weight: 300;
                font-style: normal;
                font-stretch: normal
            }
            @font-face {
                font-family: "balooextra";
                font-display: swap;
                src: url("_css/font/balooextra.html");
                src: url("_css/font/balooextrad41d.html?#iefix")format("embedded-opentype"),
                url("_css/font/balooextra.woff")format("woff"),
                url("_css/font/balooextra-2.html")format("truetype");
                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, 30px);
                height: var(--i-size, 30px);
                stroke: var(--bg-gradient);
                stroke-linecap: round;
                stroke-linejoin: round;
                fill: var(--bg-gradient);
            }

            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 0vw
            }

            .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: #e12323;
                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.html);
                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-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: fixed;
                z-index: 10;
                left: 50%;
                bottom: 0;
                top: 60%;
                width: 52vh;
                height: 25vh;
                transform: translateX(-50%);
                text-align: center;
                overflow: show
            }

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

            div.content {
                position: fixed;
                left: 99999px;
                top: 99999px
            }
                     /* Estilos generales para el botón play */
            /* Botón de Play ajustado */
            div.play {
                display: flex;
                width: 54px;
                height: 54px;            
                bottom: 25.2%;
             z-index: 89;
                background-color: #FFF;              
                cursor: pointer;
                /* Ajusté este valor para mover el botón más arriba */      
                border-radius: 50%;
                position: fixed;
                left: 50%;
                transform: translateX(-50%);
            }

              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: 0%;  /* Da espacio entre el icono y el borde del fondo */
            }

     
         /* 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.html) 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,.5))
            }

 

            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.html);
                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.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: 15vw;
                    z-index: 100;
                    overflow: hidden;
                    transition: all .5s
                }

                nav div.nav {
                    position: relative;
                    z-index: 1;
                    display: block;
                    width: 100%;
                    height: 15vw;
                    background: #e12323;
                    /*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: var(--btn-bg, var(--bg-gradient));
                }

                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 {
                    
                    border-top: 1px solid rgba(255,255,255,.3);
                    margin: 2vw 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: 10vw!important;
                    height: 7vw!important;
                    position: absolute;
                    top: 13.5px;
                    cursor: pointer;
                    z-index: 3
                }

                span.hamburger span {
                    display: block;
                    position: absolute;
                    width: 60%;
                    height: 0.6vw;
                    border-radius: 10px;
                    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 ul.cols.controls li:nth-child(2) {
                    display: none!important
                }

                div.controls div.play {
                    margin: 0!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: .28;
                filter: url(#gooey);
                inset: auto -20px -20px;
                z-index: 10;
            }
            .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;
                transform: translate(300%, 0%); /* Centra el elemento */
                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: none;
                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: #ffffff42;
                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;
  background: var(--bg-gradient);
  height: 89px;
  border-start-end-radius: 80px;
  bottom: 0;
  width: 100%;
  /* quito height fijo y overflow: hidden */
  z-index: 98;
}


.footer-img {
  display: block;
  width: 100%;    /* la imagen ocupa todo el ancho */
  height: auto;   /* mantiene su proporción original */
}
.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;
}

  @keyframes zoomEffect {
  0% {
    transform: scale(1);
    opacity: 0.6;
  }
  50% {
    transform: scale(1.1);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

#album.zoom {
  animation: zoomEffect 0.6s ease-in-out;
}
        /* Estilos del contenedor del ecualizador */


        /* Estilos de las barras */
        .bar {
            width: 15px;
            background: var(--bg-equalizer);
            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: 15vw;
        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: 65%;
        height: calc(100vh - 14vw);
        overflow: scroll;
        transform: translateY(-110%);
        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));
}



span.titulo {
    transition: opacity 0.5s ease;
}
#animlotiee::before {
    content: "";
	pointer-events: none;
    position: absolute;
	margin: -81px 0px 0px 39px;
    width: 74%;
    height: 74%;
    /*/background-color: rgba(255, 255, 255, 0.1); /* Fondo sutil para la animación */
    border-radius: 50%;
    /*animation: pulse 2s ease-out infinite; /* Animación de pulso */
    z-index: -1; /* Coloca la animación detrás de la imagen */
    display: block; /* Asegura que la animación sea visible */
	
}
#logo-radio {
    position: relative;
    width: 100%; /* Ajusta el tamaño según lo necesites */
    height: 273px;
    top: 20%;
    /* Hace que el contenedor sea redondo */
    overflow: hidden;  /* Elimina las partes de la imagen que sobresalen */
	box-sizing: border-box;
	place-self: anchor-center;
}

#album-art {
    position: relative;
    width: 74%; /* Ajusta el tamaño según lo necesites */
	height: 74%;
    margin: 80px auto 20px;
	border-radius: 90%;
    z-index: 10;
    /* Hace que el contenedor sea redondo */
    overflow: hidden;  /* Elimina las partes de la imagen que sobresalen */
    border: 3px solid #fff;  /* Ajusta el borde según sea necesario */
    box-sizing: border-box;
    animation: rotation 80s infinite linear;
}
@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

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

/* Animación de pulso similar a la de player-toggle */

/* Animación de pulso (como la de player-toggle) */
@keyframes pulse {
    0% {
        opacity: 0;
        transform: scale(0); /* Comienza desde el centro */
    }
    50% {
        opacity: 0.2;
        transform: scale(1.5); /* Agranda el círculo */
    }
    100% {
        opacity: 0;
        transform: scale(2); /* Llega a agrandarse más */
    }
}


 /* 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: #ff00;
    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;
}

 
.marquee {
	height: 25px;
	width: 100%;
	white-space: nowrap;
	overflow: hidden;
    position: relative;
  }
  
  .marquee div {
	display: block;
	width: 100%;
	height: 200px;
    position: absolute;
	
  }
  
  .marquee span {
	float: left;
	width: 100%;
  }
  
  @keyframes marquee {
    0% {  left: 10;}
    100% { transform: translateX(-100%); }
    }

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

.equalizer{
		height: 20px;
	  }
	  
	  @media only screen and (min-width: 880px) {
		.equalizer {
		  display: none;
		}
	  }

	  body {
		background-color: #121212;
	}
	/* Estilos del contenedor del ecualizador */
.equalizer {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: 3px;
    top: -21px;
	height: 18px;
	width: 35px;
	margin: 20px auto;
	margin-top: -34px !important;
}

/* Estilos de las barras */
.bar {
	width: 5px;
	background: var(bg-equalizer);
	transition: height 0.3s ease;
	z-index: 89;
	/* Transición más suave para la altura */
}





html, body {
  background-color: #000;
  width: 100%;
  height:100%;
  margin: 0;
  overflow: hidden;
}

#animContainer {
  width: 100%;
  height: 100%;
}


/* Estilos redes socieles*/

.megasocial {
  position: fixed;
  top: 1px;
  transform: translateX(-50%);
  z-index: 99;
}
.datostexto {
   font-size: 13px;
	display: none;
   text-align: center;
   font-family: 'montserrat-bold';
   padding: 10px;
}
.datospedidos {
  position: fixed;
  width: 100%;
  bottom: 27%; /* Ajusta para subir o bajar la barra */
  
  text-align: center;
  padding: 0px 50px 0px 50px;
  transform: translateX(-50%);
  z-index: 89;
}
.datosplayer {
  position: fixed;
  width: 100%;
  bottom: 33.5%; /* Ajusta para subir o bajar la barra */
  left: 50%;
  text-align: center;
  padding: 0px 20px 0px 20px;
  transform: translateX(-50%);
  z-index: 89;
}
.datoslogo {
  position: fixed;
  left: 50%;
  text-align: center;
  padding: 0px 50px 0px 50px;
  transform: translateX(-50%);
  z-index: 89;
}
.bg-degrade {
    position: absolute;
    bottom: 0px;
    left: 0;
    width: 100%;
    height: 100%;
    
    z-index: 3;
}
.barra-redes {
  /*background-color: rgba(0, 0, 0, 0.5);*/
  border-radius: 30px;
  /*box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);*/
  display: flex;
  justify-content: center;
  align-items: center;
  
}

.barra-redes ul {
  list-style: none;
  margin: 0;
  display: flex;
  gap: 5px;
  
}

.barra-redes li a {
  display: block;
  width: 45px;
  height: 45px;
}

.barra-redes li img {
  width: 90%;
  height: 90%;
  object-fit: contain;
  transition: filter 0.2s;
  
}

.barra-redes li a:hover img {
  filter: drop-shadow(0 0 5px #fff);
  
}

.live-badge {
    position: fixed;
    bottom: 40.5%;
	font-size: 17px;
	background: red;
	color: white;
    padding: 1px 25px;
    font-family: "balooextra";
    border-radius: 20px;
    left: 50%;
    text-align: center;
    transform: translateX(-50%);
    z-index: 10;
    }
 

  /* Redes sociales */
    .social-buttons {
      position: fixed;
      bottom: 180px; /* Ajusta para subir o bajar la barra */
      left: 50%;
      transform: translateX(-50%);
      z-index: 89;
    }

    .social-buttons a {
      background: rgba(255, 255, 255, 0.2);
      padding: 12px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      transition: transform 0.2s;
      animation: pulse 1.5s infinite;
    }

    .social-buttons a:hover {
      transform: scale(1.2);
      background: rgba(255, 255, 255, 0.4);
    }

    .social-button svg {
      width: 20px;
      height: 20px;
      fill: white;
    }

    @keyframes pulse {
            0% {
                opacity: 1;
            }

            50% {
                opacity: 0.5;
            }

            100% {
                opacity: 1;
            }
        }

        @keyframes pulse {
            0% {
                transform: scale(1);
                box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
            }

            70% {
                transform: scale(1.05);
                box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
            }

            100% {
                transform: scale(1);
                box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
            }
        }
 .metadata {
	margin-top: 15px !important;
}
.player-modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.75);
            backdrop-filter: blur(8px);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 1000;
        }

        .player-container {
            position: relative;
            width: 90vw;
            max-width: 600px;
            background-color: #000;
            border-radius: 1rem;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
            overflow: hidden;
            display: flex;
            flex-direction: column;
            border: 2px solid #374151;
        }

        .video-frame {
            position: relative;
            padding-top: 56.25%; /* 16:9 Aspect Ratio */
            background-color: #222;
        }

        .video-player {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        

        .close-button-container {
            position: absolute;
            top: 3rem;
            left: 50%;
            transform: translateX(-50%);
            width: 3rem;
            height: 3rem;
            border-radius: 50%;
            background-color: rgba(255, 255, 255, 0.2);
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
        }

        .close-button {
            width: 1.5rem;
            height: 1.5rem;
            background-color: #fff;
            border-radius: 50%;
            position: relative;
        }

        .close-button::before,
        .close-button::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 1rem;
            height: 2px;
            background-color: #333;
            transform: translate(-50%, -50%) rotate(45deg);
        }

        .close-button::after {
            transform: translate(-50%, -50%) rotate(-45deg);
        }

        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        .player-modal.active {
            display: flex;
            animation: fadeIn 0.3s ease-in-out;
        }

        .toggle-button {
            background-color: #3b82f6;
            color: white;
            padding: 1rem 2rem;
            border-radius: 0.5rem;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .toggle-button:hover {
            background-color: #2563eb;
            transform: scale(1.05);
        }
        
   




          .player-visualizer {
                position: fixed;
                pointer-events: none;
                display: flex;
                align-items: flex-end;
                justify-content: space-around;
                height: 100%;
                opacity: .28;
                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
                }
            }

            
.visualizer {
  position: absolute;
  inset: auto 0 0;
  z-index: 10;
  pointer-events: none;
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  height: 100%;
  opacity: 0.075;
}
.visualizer-filter {
  display: none;
}



  /* Estilo común para los contenedores de las animaciones Lottie */
.lottie-container {
    width: 300px;       /* Ajusta el tamaño de la animación (ancho) */
    height: 300px;      /* Ajusta el tamaño de la animación (alto) */
    margin: 0px auto;  /* Centra los contenedores en la página */
    position: relative; /* Permite posicionar otros elementos dentro si es necesario */
    display: block;     /* Hace que los contenedores se comporten como bloques */
}

/* Si quieres que las animaciones no se solapen, puedes usar un margen o margen superior diferente */
#animlotiee {
    
    /* Contenedor de la primera animación */
    background-color: rgba(255, 255, 255, 0);  /* Fondo semitransparente (opcional) */
    border-radius: 10px;                           /* Bordes redondeados (opcional) */
}

#animlotiee2 {
    /* Contenedor de la segunda animación */
    background-color: rgba(255, 0, 0, 0);         /* Fondo semitransparente (opcional) */
    border-radius: 10px;                           /* Bordes redondeados (opcional) */
}

/* Si las animaciones Lottie ocupan toda la pantalla, se pueden ajustar con un z-index */
#animlotiee, #animlotiee2 {
    
	position: relative;   /* Asegura que se puedan posicionar si es necesario */
    z-index: 9999;        /* Mantén las animaciones por encima de otros elementos */
    pointer-events: none; /* Esto asegura que las animaciones no interfieran con otros elementos interactivos */
}






.menu-lateral {
    position: fixed;
    top: 0;
    left: -280px;
    width: 280px;
    height: 100%;
    background: white;
    box-shadow: 2px 0 5px rgba(0,0,0,0.3);
    z-index: 999;
    transition: left 0.3s ease;
    overflow-y: auto;
    font-family: Arial, sans-serif;
}
.menu-lateral.abierto {
    left: 0;
}
.menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 998;
    display: none;
}
.menu-overlay.visible {
    display: block;
}
.menu-header {
    text-align: center;
    background: var(--bg-gradient);
}
.menu-logo {
    width: 35vw;
}
.menu-lista-inicio {
    list-style: none;
    padding-top: 8px;
    margin: 0;
}
.menu-lista-inicio li a {
    display: flex;
    align-items: center;
    padding: 14px 18px;
    color: black;
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: 600;
}
.menu-lista-inicio li a img {
    width: 20px;
    height: 20px;
    margin-right: 33px;
}
.menu-lista-inicio li a svg {
    width: 20px;
    height: 20px;
    margin-right: 33px;
}
.menu-lista {
    list-style: none;
    margin: 0;
}
.menu-lista li a {
    display: flex;
    align-items: center;
    padding: 14px 18px;
    color: black;
    font-family: Arial, Helvetica, sans-serif;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
}
.menu-lista li a img {
    width: 20px;
    height: 20px;
    margin-right: 33px;
}
.menu-lista li a svg {
    width: 20px;
    height: 20px;
    margin-right: 33px;
}


.menu-lista-inf {
    list-style: none;
    padding-top: 1px;
    margin: 0;
}
.menu-lista-inf li a {
    display: flex;
    align-items: center;
    padding: 14px 18px;
    color: black;
    font-family: Arial, Helvetica, sans-serif;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
}
.menu-lista-inf li a img {
    width: 20px;
    height: 20px;
    margin-right: 33px;
}
.menu-lista-inf li a svg {
    width: 20px;
    height: 20px;
    margin-right: 33px;
    margin-bottom: 1px;
}
.menu-lateral h4 {
    padding: 17px 16px 18px;
    margin: 9px 0px 0px 0px;
    color: #686868;
    font-size: 14px;
    font-weight: 600;
    font-family: Arial, Helvetica, sans-serif;
    border-top: 1px solid #e6e6e6;
}


.chat-modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.7);
}
.chat-contenido {
    margin: 5% auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    background: white;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
    padding: 10px;
    border-radius: 8px;
    position: fixed;
    width: 90%;
    max-width: 500px;
}
.cerrar-chat {
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}
.cerrar-chat:hover {
    color: red;
}

.boton-menu {
    position: absolute;
    left: 3vw;
    width: 4.5vw;
    height: 8vw;
    background-color: transparent;
    border: none;
    z-index: 5;
    display: none;
    align-items: center;
    justify-content: center;
}

/* FORMATO APP */
	.boton-menu {
    position: absolute;
    top: 1.2vh;
    left: 3vw;
    width: 8.5vw;
    height: 8vw;
    background-color: transparent;
    border: none;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
}
.boton-menu img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: brightness(0) invert(1);
}
.boton-mensaje {
    position: absolute;
    top: -2%;
    right: -100%; /* Ajusta según sea necesario */
    width: 150px; /* Tamaño fijo en píxeles */
    height: 35px; /* Tamaño fijo en píxeles */
    background-color: transparent;
    border: none;
    z-index: 15;
    display: flex;
    align-items: center;
    justify-content: center;
}



    /* Ocultar en pantallas grandes (por ejemplo, min-width: 1024px) */
    @media (min-width: 1024px) {
  .contenedor {
    display: none;
  }
}

#album,
.chat-box,
.chat-box iframe {
    width: 100%;
    height: 100%
}

#chatModal {
    position: fixed;
    left: 0;
    bottom: -100%; /* Comienza fuera de la pantalla */
    width: 100%;
    height: 200%;
    background: #fff;
    box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.3);
    transition: bottom 0.4s ease-in-out; /* Transición para mostrar y ocultar el modal */
    z-index: 1000;
    border-radius: 25px 25px 0 0;
    overflow: hidden;
}

/* Barra superior donde se encuentra el botón de cerrar */
#chatModal .chat-header {
    position: absolute;
    top: 0;
    left: 0;
	z-index: 1000;
    width: 100%;
    height: 50px; /* Altura de la barra */
    background: var(--bg-gradient);; /* Color de fondo de la barra */
    display: flex;
    justify-content: flex-end; /* Coloca el botón de cerrar en la esquina derecha */
    align-items: center; /* Centra el botón verticalmente */
    padding: 0 10px; /* Espacio alrededor del botón */
    box-shadow: 0 2px 5px rgba(255, 255, 255, 0.1); /* Sombra para la barra */
}

/* Estilo para el botón de cerrar */
#closeChat {
    background: transparent;
    border: none;
    font-size: 30px; /* Tamaño del ícono del botón */
    cursor: pointer;
    color: #ffffff;
}

/* Línea de separación en la parte inferior de la barra */
#chatModal .chat-header:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: #ccc;
}

/* Contenedor de chat */
#chatModal .chat-box {
    width: 100%;
    height: 100%;
    overflow: hidden;
}