/* ==========================================================================
   SECCIÓN FAQ (Círculos y Acordeones)
   ========================================================================== */

/* Círculos decorativos con texto */
.circle-text {
  border: 2px solid var(--secondary-color);
  border-radius: 50%;
  width: 150px;
  height: 150px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 1.2rem;
  color: var(--secondary-color);
  transition: all 0.3s ease;
}

/* Enlaces dentro del cuerpo del acordeón */
.accordion-body a {
  color: #0d6efd !important;
  text-decoration: none !important;
  font-weight: bold !important;
  transition: color 0.3s ease;
}

.accordion-body a:hover {
  color: var(--main-color) !important;
  text-decoration: underline !important;
}

/* ==========================================================================
   RESPONSIVE (Móviles y Tablets)
   ========================================================================== */

@media (max-width: 768px) {
  /* Ajuste de tamaño de círculos en pantallas pequeñas */
  .circle-text {
    width: 120px;
    height: 120px;
    font-size: 1rem;
  }

  /* Forzar visibilidad y estilo de subrayado en móviles para mayor legibilidad */
  .accordion-body a {
    text-decoration: underline !important;
    display: inline !important;
    visibility: visible !important;
  }
}