@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');  


body {background-color: black;}

  #tresde {
  height: 100%;
  width: 100%;
    position: absolute;
     top: 120%;
    z-index: 1;
  overflow: hidden;
  margin-top: -100px;
}





   .botoncito {
           height: 15px;
           width: 15px;
           display:inline-block;
           cursor: pointer;
           background: white;
           -webkit-border-radius: 90px;
-moz-border-radius: 90px;
border-radius: 90px;
        }

         .botoncito02 {
           height: 15px;
           width: 15px;
           display:inline-block;
           cursor: pointer;
            box-shadow: inset 0 0 0 2px white;
           -webkit-border-radius: 90px;
           -moz-border-radius: 90px;
           border-radius: 90px;
           display: none;
        }

        .botoncito2 {
           height: 15px;
           width: 15px;
           display:inline-block;
           cursor: pointer;
           margin-bottom: 20px;
           background: white;
           -webkit-border-radius: 90px;
-moz-border-radius: 90px;
border-radius: 90px;
        }

        .botoncito2a {
           height: 15px;
           width: 15px;
           display:inline-block;
           cursor: pointer;
           display: none;
           margin-bottom: 20px;
           box-shadow: inset 0 0 0 2px white;
           -webkit-border-radius: 90px;
-moz-border-radius: 90px;
border-radius: 90px;
        }


.hidden {
            opacity: 0;
            pointer-events: none; /* Evita interacciones cuando está oculto */
        }




.todobotoncitos {
           height: 120px;
           width: 20px;
           position: absolute;
           z-index: 100;
           right: 40px;
           top: 50%;
        }



.scroll {
           height: 40px;
           width: 120px;
           position: fixed;
           z-index: 10;
           text-align: center;
           bottom: 5%;
           left: 50%;
           transform: translate(-50%, -50%);
           font-family: Arial;
           font-weight: bold;
           font-size: 12px;
           color:white;
           opacity: .3;
        }

.botonescostado {
           height: 60px;
           width: 20px;
           position: fixed;
           z-index: 10;
           text-align: center;
           bottom: 50%;
           right: 5%;
           transform: translate(-50%, -50%);
        }


@media only screen and (min-width: 700px) {
  .botonescostado {
    right: 2%;
  }
}




#botonetes {
           display: none;
        }


@media only screen and (max-width: 700px) {
  .todobotoncitos {
    top: 80%;
  }
}


.botonon {
           height: 250px;
           width: 130px;
           cursor: pointer;
           pointer-events: none;
           position: absolute;
           top: 50%;
           left: 50%;
           transform: translate(-50%, -50%);
        }


@media only screen and (min-width: 700px) {
  .botonon {
    width: 500px;
    top: 50%;
  }
}    




 .containersaludo{
        font-family: "Inter", sans-serif;
        text-align: center;
    }


   h1{
        font-size:clamp(2.2rem, 6vw, 5rem);
        margin-bottom:20px;
        font-weight:700;
        letter-spacing:-1px;
        opacity:0;
        transform:translateY(20px);
        animation:fadeUp 1s ease forwards;        
    }


@media only screen and (min-width: 700px) {
  h1 {
    font-size:clamp(2rem, 5vw, 4rem);
  }
}    





    p{
        font-size:1.4rem;
        line-height:1.5;
        max-width:900px;
        opacity:0;
        transform:translateY(20px);
        animation:fadeUpfrase 1s ease forwards;
        animation-delay:0.4s;
    }


    @keyframes fadeUpfrase {
  from {
    opacity: 0;
    transform: translateY(20px); /* Ajusta la distancia que quieras que suba */
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


    .btnentrar{
        margin: 0 auto;
        margin-top:40px;
        border: 3px solid white;
        border-radius: 20px;
        background: black;
        color:white;
        font-size:1rem;
        font-weight:bold;      
        transition:0.5s ease;
        opacity:0;
        pointer-events:none;
        cursor:pointer;
        transform:translateY(20px);
        width: 90px;
        padding: 10px;
    }

    .btnentrar.show{
        opacity:1;
        pointer-events:none;
        transform:translateY(0);
    }

    .btnentrar:hover{
        transform:scale(1.05);
    }

    @keyframes fadeUp{
        to{
            opacity:1;
            transform:translateY(0);
        }
    }

    @media(max-width:600px){

        .btnentrar{
            width:100%;
            max-width:280px;
        }

    }




/* BOTON */
.player-toggle {
    position: fixed;
    z-index:150;
    bottom: 0px;
    right: 20px;
    width: 75px;
    height: 75px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0.8;
}

/* EQUALIZER SIMPLE */
.equalizer {
    display: flex;
    gap: 3px;
    height: 25px;
    align-items: flex-end;
}

.bar {
    width: 4px;
    background: white;
    animation: bounce 1s infinite ease-in-out;
}

.bar:nth-child(2){animation-delay:.2s;}
.bar:nth-child(3){animation-delay:.4s;}
.bar:nth-child(4){animation-delay:.6s;}

@keyframes bounce {
    0%,100%{height:6px;}
    50%{height:22px;}
}

.equalizer.paused .bar {
    animation: none;
    height: 6px;
}

/* PANEL */
.player-panel {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 340px;
    max-width: 92%;
    background: rgba(30,30,30,0.95);
    border-radius: 20px;
    padding: 20px;
    transform: scale(0);
    transform-origin: bottom right;
    opacity: 0;
    transition: .3s;
    z-index:150;
}

.player-panel.active {
    transform: scale(1);
    opacity: 1;
}

.header {
    display:flex;
    justify-content:space-between;
    color:white;
}

.track {
    background:#2a2a2a;
    padding:12px;
    border-radius:10px;
    margin-top:10px;
    color:white;
    cursor:pointer;
}

.now-playing {
    display:none;
    align-items:center;
}

.play-btn {
    margin-right:10px;
    cursor:pointer;
}

/* MARQUEE */
.marquee {
    overflow:hidden;
    white-space:nowrap;
    flex:1;
}

.marquee span {
    display:inline-block;
    padding-left:100%;
}

.marquee.playing span {
    animation: scroll 8s linear infinite;
}

@keyframes scroll {
    100% { transform: translateX(-100%); }
}

.btn {
    margin-top:10px;
    width:100%;
    padding:10px;
    border:none;
    border-radius:10px;
    background:#e74c3c;
    color:white;
    cursor:pointer;
}


.player-panel {
    font-family: 'Montserrat', sans-serif;
}

.btn {
    background: #00c9fd;
    font-weight: bold;
    color: black;
}

.track {
    background: #00c9fd;
    font-weight: normal;
    color: black;
}