button{
     border-radius: 9px;
     border-width: 4px;
     border-color: black;
    background: linear-gradient(to right, orange, purple);
    margin-right: 50%; 
     color:
     rgb(255, 255, 255); 
     width: 150px; height: 45px;
      font-family:fantasy;
      font-size: 90%;
      
      /* Animación de entrada de 1s y transiciones para hover/active */
      animation: 0.8s cubic-bezier(0.25, 1, 0.5, 1) 0s 1 running myFrameDash;
      transition: transform 0.25s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.25s ease, filter 0.25s ease;
 display:block;
 position:relative
}

#ButtonPremium {
    border-radius: 9px;
    border-width: 4px;
    border-color: black;
    
    /* 1. Crear un degradado que va y vuelve (Naranja -> Púrpura -> Naranja) */
    background: linear-gradient(to right, orange, purple, orange);
    /* 2. el fondo el doble de ancho para poder desplazarlo */
    background-size: 200% auto;
    
    /* Corrección de posición para que se centre con flexbox */
    margin: 0; 
    display: inline-block;
    position: relative;
    
    color: rgb(255, 255, 255); 
    width: 150px; 
    height: 45px;
    font-family: fantasy;
    text-shadow: 1px 2px 1px black;
    font-size: 100%;
    
    /* 3. animación de entrada corre 1 vez y la del fondo infinita */
    animation: 
        0.8s cubic-bezier(0.25, 1, 0.5, 1) 0s 1 running myFrameDash,
        moverDegradado 3s linear infinite; /* segundos para una transición suave */
        
    transition: transform 0.25s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.25s ease, filter 0.25s ease;
}

/* 4.fotogramas para mover el fondo infinitamente hacia la derecha */
@keyframes moverDegradado {
    0% {
        background-position: 0% center;
    }
    100% {
        background-position: 200% center;
    }
}

#mantenimientoButton{
    border-radius: 9px;
     border-width: 4px;
     border-color: black;
    background: linear-gradient(to left,rgb(135, 135, 255), darkblue);
    margin-right: 50%; 
     color:
     rgb(255, 255, 255); 
     width: 150px; height: 56px;
      font-family:fantasy;
      font-size: 90%;
      
      /*Duración a 1s y transiciones */
      animation: 1s cubic-bezier(0.25, 1, 0.5, 1) 0s 1 running myFrameDash;
      transition: transform 0.25s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.25s ease, filter 0.25s ease;
 display:block;
 position:relative
}

#dowland{
    border-radius: 3px;
     border-width: 4px;
     border-color: black;
    background: linear-gradient(rgb(0, 0, 0), rgb(255, 0, 0));
    margin-right: 50%; 
     color:aliceblue;
     width: 150px; height: 42px;
      font-family:fantasy;
      font-size: 100%;
      
      /*Duración a 1s y transiciones */
      animation: 1s cubic-bezier(0.25, 1, 0.5, 1) 0s 1 running myFrameDash;
      transition: transform 0.25s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.25s ease, filter 0.25s ease;
 display:block;
 position:relative
}

#buttonCenter{
     border-radius: 5px;
     border-width: 4px;
     border-color: black;
    background-color: rgb(14, 232, 152);
     color:
     rgb(255, 255, 255); 
     width: 20vw;
     height: auto;
     padding: 15px 0px;
     min-width: 160px;
     max-width: 280px;
     display: inline-block;
     margin: 0;
     font-family: 'Courier New', Courier, monospace;
     font-weight: bold;
     text-shadow: 1px 2px 1px black;
      font-size: 1.2rem;
      
      /* Duración a 1s y transiciones */
      animation: 1s cubic-bezier(0.25, 1, 0.5, 1) 0s 1 running myFrameDash;
      transition: transform 0.25s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.25s ease, filter 0.25s ease;
 position:relative
}

.contenedor-fila{
    display: flex;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 20px;
    width: fit-content;
}

.parent{
    display: flex;
    justify-content: center;
    width: 100%;
}

/* EFECTOS DE INTERACCIÓN*/
button:hover{
    color: rgb(255, 255, 255);
    /* Sombra con degradado difuminado */
    box-shadow: 0px 8px 3px rgba(243, 163, 26, 0.5); 
    transform: translateY(-5px); /* Eleva el botón */
    filter: brightness(1.2); /* luz al pasar el cursor */
}

button:active{
    color: rgb(255, 255, 255);
    box-shadow: 0px 4px 1px rgba(13, 209, 65, 0.5);
    transform: translateY(1px); /* Efecto físico de hundimiento al presionarlo */
}

/*ANIMACIÓN 1 SEGUNDO DE ENTRADA*/
@keyframes myFrameDash{
    from{
        /* Inicia desde 200px usando GPU (3D) */
        transform: translate3d(200px, 0, 0); 
        opacity: 0;
    }
    to{
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}