.values {
  position: relative;
  padding: 5rem 3rem;
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
  z-index: 100;
  max-width: 1125px;
  margin: 0 auto;
}

.bubble {
	cursor: pointer;
  width: 140px;
  height: 140px;
  background: var(--blue-main);
  color: var(--white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
}

.bubble.big {
  width: 180px;
  height: 180px;
  font-size: 1.4rem;
}


/* Modal de valores */

.modal_valores {
    display: none;
	position: relative;
	/* transform: translateX(-37px); */
    top: 0;
    left: 0;
    width: 100vw;
    height: 220vh;
    padding: 0 5px;
    background-color: rgba(72, 94, 253, 0.7); /* Fondo oscuro */
    z-index: 1000; /* Siempre por encima de todo */
    cursor: default; /* El cursor vuelve a ser normal dentro del modal */
    justify-content: center;
    align-items: center;
}
.b1 .modal_valores {
    transform: translateX(75px);
}
.b4 .modal_valores {
    transform: translateX(-75px);
}

.modal-content {
	width: 280px;
    background: white;
    padding: 2rem;
    border-radius: 15px;
    color: #333; /* Color de texto para que sea legible */
}


@media (max-width: 900px) {
    .values {
        display: grid;
        /* Creamos 2 columnas iguales */
        grid-template-columns: repeat(2, 1fr); 
        gap: 20px;
        justify-items: center; /* Centra las burbujas horizontalmente */
        align-items: center;    /* Centra las burbujas verticalmente */
        
        /* Definimos el mapa del dado */
        grid-template-areas: 
            "b1 b2"
            "big big"
            "b3 b4";
    }

    /* Asignamos cada div a su lugar en el mapa */
    .b1 { grid-area: b1; }
    .b2 { grid-area: b2; }
    .b3 { grid-area: b3; }
    .b4 { grid-area: b4; }
    
    .big { 
        grid-area: big; 
        /* Si quieres que NO se estire y se vea centrada como el punto del dado: */
        justify-self: center; 
    }
    	.modal_valores {
        display: none;
        position: absolute;
        transform: none;
        top: 0;
        right: 0;
        left: 0;
        width: 101vw;
        height: 80vh;
      }
      .values .bubble .modal_valores {
        transform: translateX(0px);
    }
}

/* Regla para pantallas grandes (Mayores a 900px) */
@media (min-width: 901px) {
    .values {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
    }
    .b2,
    .b3 {
      transform: translateY(25%);
     }
    
    .b1,
    .b4 {
      transform: translateY(-25%);
     }
}

@media (max-width: 400px) {
	.modal_valores {
		height: 90vh;
	}
    .values .bubble .modal_valores {
      transform: translateX(0px);
  }
}