/* Contenedor principal */
.custom-results-block {
  display: flex;
  flex-direction: column; /* Por defecto, los elementos se organizan en columnas */
  align-items: flex-start; /* Alinea los elementos a la izquierda */
  text-align: left; /* Alinea el texto a la izquierda */
  margin-top: 20px;
  gap: 20px; /* Espacio entre los elementos */
  padding: 20px; /* Espaciado interno */
  background-color: #F4F4F4; /* Fondo gris claro */
  border-radius: 5px; /* Bordes redondeados */
  color: #494949;
}

/* Estilo del título */
.custom-results-block h3 {
  font-size: 1.5em;
  margin-bottom: 10px; /* Ajusta el margen inferior */
  font-weight: bold;
  color: #1A21B2;
  text-align: left; /* Alinea el título a la izquierda */
  width: 100%; /* Ocupa todo el ancho del contenedor */
}

/* Estilo de la descripción */
.results-introduction {
  font-size: 1em;
  color: #494949;
  margin-bottom: 20px; /* Espaciado entre la descripción y los resultados */
  line-height: 1.5; /* Mejora la legibilidad */
  text-align: left; /* Alinea la descripción a la izquierda */
  width: 100%; /* Ocupa todo el ancho del contenedor */
}

.results-introduction a {
  color: #FB4F80; 
  text-decoration: none;
  font-weight: 600;
}

.results-introduction a:hover {
  color: #E23A65; 
  text-decoration: underline;
}

/* Contenedor de resultados */
.results-container {
  display: flex;
  flex-wrap: wrap; /* Permite que los resultados salten a la siguiente línea si no caben */
  justify-content: flex-start; /* Alinea los círculos a la izquierda */
  gap: 20px; /* Espaciado entre los elementos */
  width: 100%;
}

/* Estilo de cada resultado */
.result-item {
  flex: 1 1 calc(25% - 20px); /* Cada ítem ocupa un 25% del ancho menos el gap */
  max-width: 200px; /* Limita el ancho máximo */
  text-align: center;
  padding: 15px; /* Espaciado interno */
}

/* Estilo del círculo */
.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #D9D9D9; /* Fondo gris claro */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2em;
  font-weight: bold;
  color: #FB4F80; /* Texto rosado */
  margin: 0 auto 10px auto; /* Centra el círculo */
}

/* Estilo del texto */
.result-item p {
  font-size: 1em;
  color: #494949; /* Texto gris */
}

/* RESPONSIVE DESIGN */

/* Dispositivos medianos: tablets y pantallas medianas */
@media (max-width: 768px) {
  .results-container {
    justify-content: center; /* Centra los círculos horizontalmente */
  }

  .result-item {
    flex: 1 1 calc(50% - 20px); /* Cada ítem ocupa el 50% del ancho menos el gap */
    max-width: 150px;
  }

  .circle {
    width: 70px; /* Círculo más pequeño */
    height: 70px;
    font-size: 1.2em; /* Texto más pequeño */
  }

  .result-item p {
    font-size: 0.9em; /* Texto más pequeño */
  }
}

/* Dispositivos pequeños: móviles */
@media (max-width: 480px) {
  .results-container {
    flex-direction: column; /* Apila los resultados verticalmente */
    align-items: center; /* Centra los resultados */
  }

  .result-item {
    width: 100%; /* Ocupa todo el ancho */
    margin: 0 0 20px 0; /* Espaciado vertical */
  }

  .circle {
    width: 60px; /* Círculo más pequeño */
    height: 60px;
    font-size: 1em; /* Texto más pequeño */
  }

  .result-item p {
    font-size: 0.8em; /* Texto más pequeño */
  }
}