/* =============================================================================
   sistema.css — SINERGÍA · Integración de los Tres Marcos
   ============================================================================= */

/* ── Section shell ────────────────────────────────────────────────────────── */
.sistema {
  background: var(--color-bg);
  padding: var(--section-pad) var(--container-pad);
  position: relative;
  overflow: hidden;
}

/* Ambiente luminoso detrás del diagrama */
.sistema::before {
  content: '';
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 780px;
  height: 780px;
  background: radial-gradient(
    circle,
    rgba(201, 168, 76, 0.07) 0%,
    rgba(58, 155, 176, 0.04) 40%,
    transparent 70%
  );
  pointer-events: none;
}

/* ── Venn diagram container ───────────────────────────────────────────────── */
.sistema__venn-wrap {
  max-width: 640px;
  margin: var(--sp-10) auto 0;
  position: relative;
}

/* ── SVG itself ───────────────────────────────────────────────────────────── */
.sistema__svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

/* ── Venn circles ─────────────────────────────────────────────────────────── */
.venn__circle {
  fill: none;
  stroke-width: 2.5;
  opacity: 0.72;
  transition:
    opacity var(--dur-normal) var(--ease-smooth),
    filter  var(--dur-normal) var(--ease-smooth),
    stroke-width var(--dur-normal) var(--ease-smooth);
}

.sistema__venn-wrap:hover .venn__circle {
  opacity: 0.88;
}

.venn__circle--gemas  { stroke: #3A9BB0; }
.venn__circle--arte   { stroke: #27AE60; }
.venn__circle--triada { stroke: #8E44AD; }

/* Hover individual — glow marcado */
.venn__circle--gemas:hover {
  filter: drop-shadow(0 0 18px rgba(58, 155, 176, 0.70));
  opacity: 1;
  stroke-width: 3;
}

.venn__circle--arte:hover {
  filter: drop-shadow(0 0 18px rgba(39, 174, 96, 0.70));
  opacity: 1;
  stroke-width: 3;
}

.venn__circle--triada:hover {
  filter: drop-shadow(0 0 18px rgba(142, 68, 173, 0.70));
  opacity: 1;
  stroke-width: 3;
}

/* ── Textos ───────────────────────────────────────────────────────────────── */
.venn__label {
  font-weight: 700;
  font-family: var(--font-body);
  text-anchor: middle;
  letter-spacing: 0.5px;
}

.venn__label-sub {
  font-family: var(--font-body);
  text-anchor: middle;
  opacity: 0.72;
}

.venn__center-title {
  font-family: var(--font-display);
  fill: var(--color-gold);
  font-weight: 900;
  text-anchor: middle;
  letter-spacing: 0.04em;
}

.venn__center-sub {
  fill: var(--color-text);
  font-family: var(--font-body);
  text-anchor: middle;
  opacity: 0.80;
}

/* ── Animación de trazado al entrar al viewport ───────────────────────────── */
.venn--animated .venn__circle {
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
  animation: venn-draw 1.8s var(--ease-smooth) forwards;
}

@keyframes venn-draw { to { stroke-dashoffset: 0; } }

.venn--animated .venn__circle--gemas  { animation-delay: 0s; }
.venn--animated .venn__circle--arte   { animation-delay: 0.35s; }
.venn--animated .venn__circle--triada { animation-delay: 0.70s; }

.venn--animated .venn__label,
.venn--animated .venn__label-sub,
.venn--animated .venn__center-title,
.venn--animated .venn__center-sub {
  opacity: 0;
  animation: venn-fade 0.7s var(--ease-smooth) forwards;
}

@keyframes venn-fade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.venn--animated .venn__label         { animation-delay: 1.3s; }
.venn--animated .venn__label-sub     { animation-delay: 1.5s; }
.venn--animated .venn__center-title  { animation-delay: 1.65s; }
.venn--animated .venn__center-sub    { animation-delay: 1.82s; }

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .sistema__venn-wrap { max-width: 500px; }
}

@media (max-width: 640px) {
  .sistema__venn-wrap { max-width: 100%; margin-top: var(--sp-8); }
}