/* =============================================================================
   nardone.css — SINERGÍA Nardone / Ciclo Terapéutico Section
   ============================================================================= */

/* ── Section shell ────────────────────────────────────────────────────────── */
.nardone {
  padding: var(--section-pad) var(--container-pad);
  position: relative;
  overflow: hidden;
  /* Gradient: deep bg → surface, diagonal */
  background: linear-gradient(
    150deg,
    var(--color-bg) 0%,
    var(--color-surface) 100%
  );
}

/* Ambient radial behind cycle diagram */
.nardone::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 600px;
  background: radial-gradient(
    circle,
    rgba(201, 168, 76, 0.05) 0%,
    transparent 70%
  );
  pointer-events: none;
}

/* ── Cycle grid — 3×3 with arrows ───────────────────────────────────────── */
.nardone__cycle {
  display: grid;
  grid-template-columns: 1fr 52px 1fr;
  grid-template-rows: auto 52px auto;
  gap: var(--sp-4);
  margin-top: var(--sp-8);
  position: relative;
  z-index: 1;
}

/* Explicit placement — steps */
.nardone__step[data-step="1"] { grid-column: 1; grid-row: 1; }
.nardone__step[data-step="2"] { grid-column: 3; grid-row: 1; }
.nardone__step[data-step="4"] { grid-column: 1; grid-row: 3; }
.nardone__step[data-step="3"] { grid-column: 3; grid-row: 3; }

/* Explicit placement — arrows (nth-child matches DOM order) */
.nardone__cycle > :nth-child(2)  { grid-column: 2; grid-row: 1; } /* → */
.nardone__cycle > :nth-child(4)  { grid-column: 1; grid-row: 2; } /* ↑ */
.nardone__cycle > :nth-child(5)  { grid-column: 2; grid-row: 2; } /* center */
.nardone__cycle > :nth-child(6)  { grid-column: 3; grid-row: 2; } /* ↓ */
.nardone__cycle > :nth-child(8)  { grid-column: 2; grid-row: 3; } /* ← */

/* ── Arrow cells ──────────────────────────────────────────────────────────── */
.nardone__arr {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gold);
  font-size: 1.5rem;
  font-weight: 700;
  opacity: 0.75;
  line-height: 1;
}

.nardone__arr--center {
  /* decorative center dot */
  opacity: 0.2;
}
.nardone__arr--center::after {
  content: '◆';
  font-size: 0.75rem;
  color: var(--color-gold);
}

/* ── Step card ────────────────────────────────────────────────────────────── */
.nardone__step {
  background: var(--color-bg);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  border: 1px solid var(--color-surface-2);
  transition:
    border-color var(--dur-normal) var(--ease-smooth),
    box-shadow var(--dur-normal) var(--ease-smooth),
    transform var(--dur-normal) var(--ease-spring);
  position: relative;
  overflow: hidden;
}

/* Inner highlight wash */
.nardone__step::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(
    to right,
    var(--step-color, var(--color-gold)),
    transparent
  );
  opacity: 0;
  transition: opacity var(--dur-normal) var(--ease-smooth);
}

.nardone__step:hover {
  border-color: var(--color-gold);
  box-shadow: var(--shadow-gold);
  transform: translateY(-2px);
}

.nardone__step:hover::after {
  opacity: 1;
}

/* ── Number badge ─────────────────────────────────────────────────────────── */
.nardone__number {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--step-color, var(--color-gold));
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-lg);
  margin-bottom: var(--sp-3);
  flex-shrink: 0;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  line-height: 1;
}

/* ── Step heading ─────────────────────────────────────────────────────────── */
.nardone__step h3 {
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 700;
  margin: 0 0 var(--sp-2);
  letter-spacing: 1px;
  text-transform: uppercase;
  line-height: 1.3;
}

/* ── Step body text ───────────────────────────────────────────────────────── */
.nardone__step p {
  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  line-height: 1.6;
  margin: 0;
}

/* Número de secuencia en esquina superior derecha de cada tarjeta */
.nardone__step::before {
  content: attr(data-step);
  position: absolute;
  top: var(--sp-3);
  right: var(--sp-3);
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: 900;
  color: var(--color-surface-2);
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

/* ── Pull quote ───────────────────────────────────────────────────────────── */
.nardone__quote {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  border-left: 4px solid var(--color-gold);
  margin-top: var(--sp-8);
  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-size: var(--fs-lg);
  font-style: italic;
  line-height: 1.7;
  position: relative;
  overflow: hidden;
}

/* Decorative oversized quote mark */
.nardone__quote::before {
  content: '\201C';
  position: absolute;
  top: -16px;
  left: var(--sp-4);
  font-family: var(--font-display);
  font-size: 8rem;
  color: var(--color-gold);
  opacity: 0.08;
  line-height: 1;
  pointer-events: none;
  font-style: normal;
}

.nardone__quote cite {
  display: block;
  color: var(--color-gold);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-style: normal;
  margin-top: var(--sp-3);
  font-weight: 600;
  letter-spacing: 0.5px;
}

/* ── Responsive — tablet ──────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .nardone__cycle {
    grid-template-columns: 1fr 40px 1fr;
    gap: var(--sp-3);
  }
}

/* ── Responsive — mobile ──────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .nardone__cycle {
    grid-template-columns: 1fr;
    grid-template-rows: unset;
    gap: var(--sp-4);
  }

  /* Restore natural order and hide arrows */
  .nardone__step[data-step="1"],
  .nardone__step[data-step="2"],
  .nardone__step[data-step="3"],
  .nardone__step[data-step="4"] {
    grid-column: 1;
    grid-row: unset;
  }

  .nardone__arr {
    display: none;
  }

  /* Stack in logical 1→2→3→4 order using order property */
  .nardone__step[data-step="1"] { order: 1; }
  .nardone__step[data-step="2"] { order: 2; }
  .nardone__step[data-step="3"] { order: 3; }
  .nardone__step[data-step="4"] { order: 4; }

  .nardone__quote {
    padding: var(--sp-4);
    font-size: var(--fs-base);
  }

  .nardone__quote::before {
    font-size: 5rem;
  }
}