body{
    background: #fff;
    margin: 0 0;
    text-align: center;
}

.letra_clara, body{
    color: #FFFFFF;
}

.txtgral{font-size: 14px}

.txtgral, .boton, .boton_ayuda, .panel, .descargas{
  font-family: "Roboto Flex", sans-serif;
  font-optical-sizing: auto;
  font-variation-settings:
    "wdth" 200,
    "wght" 200;
}

.banner{
    width: 100%;
    height: 100vh;
    background-image: url('../images/bg.png'); /* Replace with your image path */
    background-size: cover;
    background-repeat: no-repeat; /* Prevents the image from tiling */
    background-position: center center; /* Centers the image */
    background-attachment: fixed; 
    z-index: 1;

}

.logo{
    width: 60vh;
    height: auto;
    position: absolute;
    top: 5%;
    left: 4%;
    background: none;
    z-index: 2;
}

.menu_inf{
    width: 100%;
    height: auto;
    position: absolute;
    bottom: 60px;
    display: flex;
    justify-content: center;
    background: none;
}

.boton, .boton_ayuda{
    width: auto;
    height: auto;
    padding: 10px;
    margin: 10px 10px;
    display: inline-block;
    font-size: 12px;
}

.boton{
    background-color: rgba(77, 251, 254, 0.1);
}

.boton:hover, .cerrar:hover, .opciones:hover{
    background-color: rgba(0, 56, 107, 1);
    cursor: pointer;
    color: rgba(255, 255, 255, 1)
}

.boton_ayuda{
    background-color: rgba(255, 0, 0, 0.3);
}
.boton_ayuda:hover{
    background-color: rgba(255, 0, 0, 1);
    cursor: pointer;
}

.opciones{
    width: 90px;
    height: auto;
    border-radius: 5px;
    background: #458555;
    display: inline-block;
    padding: 10px 10px;
    margin: 10px 10px;
    font-size: 11px;
    background-color: rgba(0, 0, 0, 0.5)
}

.glass, .panel, .descargas{
    /*width: 90%;
    max-width: 520px;
    padding: 28px;
    border-radius: 16px;*/
    /* fondo semitransparente (color del cristal) */
    background: rgba(255,255,255,0.10);
    /* desenfoque del contenido que está detrás */
    -webkit-backdrop-filter: blur(10px) saturate(120%);
    backdrop-filter: blur(10px) saturate(120%);
    /* borde tenue */
    border: 1px solid rgba(255,255,255,0.18);
    /* sombra suave para elevar */
    box-shadow: 0 8px 24px rgba(2,6,23,0.4);
    color: white;
  }

/* El panel */
  .panel, .descargas{
    position: fixed;
    bottom: -100%;
    left: 50%;
    margin-left: -40%;
    width: calc(80% - 60px);
    height: 50vh;
    background-color: rgba(0,0,0,0.6);
    color: white;
    padding: 30px;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.4);
    border-radius: 20px 20px 20px 20px;
    transition: bottom 0.6s ease;
  }

  .panel.activo, .descargas.activo {
    bottom: 150px;
  }

.panel::after {
  content: '';
  position: absolute;
  top: 100%; /* Posición al borde inferior del div */
  left: calc(50% - 119px);
  margin-left: -10px; /* Centrar la flecha */
  border-width: 10px;
  border-style: solid;
  border-color: rgba(255,255,255,1) transparent transparent transparent; /* Triángulo abajo */
}

.descargas::after {
  content: '';
  position: absolute;
  top: 100%; /* Posición al borde inferior del div */
  left: calc(50% - 10px);
  margin-left: -10px; /* Centrar la flecha */
  border-width: 10px;
  border-style: solid;
  border-color: rgba(255,255,255,1) transparent transparent transparent; /* Triángulo abajo */
}

  .cerrar {
    position: absolute;
    top: 15px;
    right: 15px;
    background: transparent;
    color: white;
    font-size: 22px;
    border: none;
    cursor: pointer;
  }

/* Estilo del div iluminado */
.iluminado, .boton, .boton_ayuda, .cerrar{
    width: auto;
    height: auto;
    border-radius: 5px;
    color: #fff;
    box-shadow: 0 0 0px #0ff; /* Sombra inicial del brillo */
    animation: brillo-animacion 1s ease-in-out infinite alternate;
}

.iluminado, .boton, .boton_ayuda{
display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.eltexto{
    width: auto;
    max-width: 320px;
    padding: 15px;
    margin: 15px auto;
    font-size: 13px;
    background: none;
    text-align: justify;
   
}

/* Regla @keyframes para la animación */
@keyframes brillo-animacion {
    from {
        /* Estado inicial del brillo */
        box-shadow: 0 0 0px rgba(15, 255, 255, 0.2),
                    0 0 1px rgba(15, 255, 255, 0.2),
                    0 0 2px rgba(15, 255, 255, 0.2),
                    0 0 3px rgba(15, 255, 255, 0.2),
                    0 0 4px rgba(15, 255, 255, 0.2),
                    0 0 5px rgba(15, 255, 255, 0.2);
    }
    to {
        /* Estado final del brillo, más intenso y expansivo */
        box-shadow: 0 0 7px rgba(15, 255, 255, 0.2),
                    0 0 8px rgba(15, 255, 255, 0.2),
                    0 0 9px rgba(15, 255, 255, 0.2),
                    0 0 10px rgba(15, 255, 255, 0.2),
                    0 0 11px rgba(15, 255, 255, 0.2),
                    0 0 12px rgba(15, 255, 255, 0.2);
    }
    
    box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5);