.esfera {
  width: 100px;
  /* Ajusta el tamaño */
  height: 80px;
  /* Debe ser igual al ancho para un círculo perfecto */
  background: radial-gradient(
    circle at 20% 20%,
    var(--esfera-color1, #fdf0ec), 
    var(--esfera-color2, #9f2500));
  /* Degradado radial para efecto 3D */
  border-radius: 50%;
  /* Para hacerlo circular */
}

.esferaJugadasLoto {
  display: flex;
  justify-content: center;
  align-items: center;

  width: 45px;         /* tamaño de la esfera */
  aspect-ratio: 1 / 1; /* círculo perfecto SIEMPRE */
  
  border-radius: 50%;
  background: radial-gradient(circle at 20% 20%, #edecfd, #00059f);

  font-size: 18px;
  font-weight: bold;
  color: #00064d;

  margin: 4px;
}

.esferaJugadasQuini {
  display: flex;
  justify-content: center;
  align-items: center;

  width: 45px;         /* tamaño de la esfera */
  aspect-ratio: 1 / 1; /* círculo perfecto SIEMPRE */
  
  border-radius: 50%;
  background: radial-gradient(circle at 20% 20%, #fdf2ec, #be5900);

  font-size: 18px;
  font-weight: bold;
  color: #4d1800;

  margin: 4px;
}

.contenedor {
  display: flex;
  justify-content: center;
  /* Centra horizontalmente */
  align-items: center;
  /* Centra verticalmente */
}

.what {
  background-color: red;
}

.esfera-text {
  position: absolute;
  color: #561501;
  font-size: 155%;
  font-weight: 600;
}

.esfera-text-border {
  position: relative;
  color: #e8e8e8;
  font-size: 155%;
  font-weight: 1000;
}
.logos-iniciales {
    height: 100vh;           /* ocupa toda la pantalla */
    display: flex;
    gap: 12px;               /* separación entre imágenes */
    padding: 12px;           /* separación del borde de la pantalla */
  }

  .logos-iniciales a {
    flex: 1;                 /* ambas columnas iguales */
    border-radius: 20px;     /* puntas redondeadas */
    overflow: hidden;        /* necesario para el borde redondeado */
    display: block;
  }

  .logos-iniciales img {
    width: 100%;
    height: 100%;
    object-fit: cover;       /* llena todo el espacio sin deformarse */
    display: block;
  }
  
  .logos-iniciales a:hover{
    transform: scale(0.94);
    border: 2px solid #02027a;
  }