/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jun 12 2026 | 03:32:55 */
/* ─────────────────────────────────────────
   Design tokens
───────────────────────────────────────── */
:root {
  --font-sans: system-ui, -apple-system, 'Segoe UI', sans-serif;
  --color-bg-card: #ffffff;
  --color-border: #e0e0e0;
  --color-text-muted: #666666;
  --radius-card: 12px;
}

/* ─────────────────────────────────────────
   Page
───────────────────────────────────────── */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ─────────────────────────────────────────
   Wrapper & stage
───────────────────────────────────────── */
.wrap {
  width: 100%;
  max-width: 900px;
  padding: 2rem 1rem;
}

.stage {
  position: relative;
  width: 100%;
  /* preserva el aspect ratio 680×540 del SVG */
  padding-bottom: 79.4%;
}

.stage-inner {
  position: absolute;
  inset: 0;
}

/* ─────────────────────────────────────────
   Ring SVG
───────────────────────────────────────── */
.ring-svg {
  display: block;
  width: 100%;
  height: auto;
}

.contenedor-diagrama .elementor-widget-container{
    display:flex;
    justify-content:center;
}
/* ─────────────────────────────────────────
   Center circle
───────────────────────────────────────── */
.center-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 240px;
  height: 240px;
  border-radius: 50%;
  overflow: hidden;
  border: 6px solid #fff;
  outline: 1px solid var(--color-border);
  z-index: 1;
}

.center-circle-bg {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #3a3a3a 0%, #1a1a1a 50%, #2d2d2d 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.center-circle-ball {
  width: 90%;
  height: 90%;
  background: radial-gradient(ellipse, #555 0%, #222 60%, #111 100%);
  border-radius: 50%;
  display: grid;
  place-items: center;
}

/* ─────────────────────────────────────────
   Cards — compartidos
───────────────────────────────────────── */
.card {
  position: absolute;
  background: var(--color-bg-card);
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 12px 15px;
  width: 200px;
  z-index: 2;
}

.card h3 {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 5px;
}

.card p {
  font-size: 12px;
  color: var(--color-text-muted);
  line-height: 1.5;
}

.card-inner {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.icon-dot {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

/* ─────────────────────────────────────────
   Posición de tarjetas — desktop (≥750px)
───────────────────────────────────────── */
.card-1 { top: 5%;    left: 0%; }
.card-2 { top: 5%;    right: 0%; }
.card-3 { top: 40%;   right: 0%; transform: translateY(-50%); }
.card-4 { bottom: 5%; right: 3%; }
.card-5 { bottom: 5%; left: 3%; }
.card-6 { top: 40%;   left: 0%; transform: translateY(-50%); }


img{
	box-shadow:none !important
}


/* ══════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════ */

/* ── Tablet 600–749px: tarjetas más pequeñas para no tapar el anillo ── */
@media (max-width: 749px) and (min-width: 600px) {
  .card {
    width: 155px;
    padding: 9px 11px;
  }
  .card h3  { font-size: 12px; }
  .card p   { font-size: 10.5px; }
  .icon-dot { width: 30px; height: 30px; font-size: 15px; }
  .center-circle { width: 185px; height: 185px; }
}

/* ── Mobile ≤599px: columna única ─────────────────────────────────── */
@media (max-width: 599px) {
  body {
    align-items: flex-start;
    padding: 0.75rem;
  }

  .wrap {
    padding: 0;
  }

  /* Desactivar aspect-ratio trick */
  .stage {
    padding-bottom: 0;
  }

  .stage-inner {
    position: static;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  /* Ocultar el anillo SVG */
  .ring-svg {
    display: none;
  }

  /* Círculo central centrado arriba */
  .center-circle {
    position: static;
    transform: none;
    width: 130px;
    height: 130px;
    margin: 0.5rem auto;
  }

  /* Todas las tarjetas: ancho completo, una columna */
  .card,
  .card-3,
  .card-6 {
    position: static;
    transform: none;
    width: 100%;
  }
}