/* ===== Widget: Values Circle - Elementor ===== */

/* Config rápida con variables CSS */
.values-circle {
  --size: 420px;           /* diámetro del círculo */
  --item: 92px;            /* tamaño de cada ficha */
  --bg: #fff;
  --ring: #e9eef6;
  --text: #0f172a;
  --muted: #64748b;
  --shadow: 0 6px 18px rgba(2, 6, 23, 0.08);
  
  display: grid; 
  place-items: center; 
  padding: 24px;
}

/* Contenedor circular "invisible" (usamos el UL como lienzo) */
.radial-list {
  position: relative;
  width: min(90vw, var(--size));
  aspect-ratio: 1;
  margin: 0; 
  padding: 0; 
  list-style: none;
  border-radius: 50%;
  
  /* Aro suave de fondo */
  background: radial-gradient(closest-side, transparent 68%, var(--ring) 69% 70%, transparent 71%);
}

/* Imagen central */
.center-image {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 35%; /* Tamaño por defecto, se puede personalizar con el control */
  aspect-ratio: 1 / 1; /* Forzar proporción cuadrada 1:1 */
  border-radius: 0; /* Por defecto sin bordes redondeados para mostrar que es cuadrada */
  overflow: hidden;
  z-index: 1; /* Debajo de los pills */
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
}

.center-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.radial-list > li {
  position: absolute; 
  inset: 0; /* dejaremos el posicionamiento al JS con translate */
  width: var(--item); 
  height: var(--item);
  margin: auto; /* para que translate(-50%, -50%) centre bien */
  transform: translate(-50%, -50%); /* punto base: centro del círculo */
  pointer-events: none; /* los eventos los recibe .pill */
  margin: 0;
  z-index: 10; /* Asegurar que los li estén por encima de la imagen */
}

.pill {
  pointer-events: auto;
  width: 100%; 
  height: 100%;
  border-radius: 999px;
  background: var(--bg);
  color: var(--text);
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  justify-content: center;
  gap: 6px;
  box-shadow: var(--shadow);
  transition: transform .25s ease, box-shadow .25s ease;
  text-align: center;
  user-select: none;
  border: 0;
  outline: 0;
  position: relative;
  z-index: 10; /* Asegurar que los pills estén por encima de la imagen */
}

.pill:hover { 
  transform: translateZ(0) scale(1.1); 
  box-shadow: 0 8px 25px rgba(2, 6, 23, 0.12);
}

.pill:focus-visible { 
  outline: 3px solid #94a3b8; 
  outline-offset: 2px; 
}

.pill:active {
  transform: translateZ(0) scale(0.98);
}

.icon { 
  font-size: 28px; 
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon svg {
  width: 1em;
  height: 1em;
  fill: currentColor;
}

.icon i {
  display: block;
}

.label { 
  font: 600 13px/1.2 system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial; 
  color: var(--text);
  margin: 0;
}

/* Responsivo */
@media (max-width: 520px) {
  .values-circle { 
    --size: 340px; 
    --item: 80px; 
  }
  
  .label { 
    font-size: 12px; 
  }
  
  .icon {
    font-size: 24px;
  }
  
  .center-image {
    width: 32%;
    /* height se mantiene automáticamente con aspect-ratio: 1/1 */
  }
}

@media (max-width: 380px) {
  .values-circle { 
    --size: 280px; 
    --item: 70px; 
    padding: 16px;
  }
  
  .label { 
    font-size: 11px; 
  }
  
  .icon {
    font-size: 20px;
  }
  
  .center-image {
    width: 30%;
    /* height se mantiene automáticamente con aspect-ratio: 1/1 */
  }
}

/* Respeto a usuarios con menos movimiento */
@media (prefers-reduced-motion: reduce) {
  .pill { 
    transition: none; 
  }
}

/* Mejoras de accesibilidad */
@media (prefers-contrast: high) {
  .values-circle {
    --ring: #000;
    --shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
  }
  
  .pill {
    border: 2px solid var(--text);
  }
}

/* Tema oscuro */
@media (prefers-color-scheme: dark) {
  .values-circle {
    --bg: #1e293b;
    --ring: #334155;
    --text: #f8fafc;
    --shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
  }
}

/* Estados de loading para animaciones */
.values-circle.loading .pill {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.9);
}

.values-circle.loading .center-image {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.8);
}

.values-circle.loaded .pill {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.values-circle.loaded .center-image {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* Animación de entrada personalizable */
.values-circle[data-animate="true"] .pill {
  animation: pillFadeIn 0.6s ease-out forwards;
  animation-delay: calc(var(--pill-index, 0) * 0.08s);
}

.values-circle[data-animate="true"] .center-image {
  animation: centerImageFadeIn 0.8s ease-out forwards;
  animation-delay: 0.3s;
}

@keyframes pillFadeIn {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) translateY(-8px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) translateY(0) scale(1);
  }
}

@keyframes centerImageFadeIn {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.7);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

/* Soporte para RTL - El posicionamiento radial es simétrico, no necesita cambios específicos */

/* Variantes de estilo adicionales que se pueden activar con clases */
.values-circle.style-minimal {
  --ring: transparent;
  --shadow: 0 2px 8px rgba(2, 6, 23, 0.06);
}

.values-circle.style-bold {
  --shadow: 0 8px 32px rgba(2, 6, 23, 0.15);
}

.values-circle.style-flat {
  --shadow: none;
}

.values-circle.style-flat .pill {
  border: 1px solid var(--ring);
}