:root {
  --gx-primary: #1C70B8;
  --gx-dark: #1C244B;
  --gx-text: #475569;
  --gx-bg: #f8fafc;
  --gx-border: #e2e8f0;
  --gx-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

/* ================================
🎯 BASE
================================== */

.detalle-2 {
  padding: 3rem 1.25rem;
  background: #f1f5f9;
}

.detalle-2-container {
  max-width: 1200px;
  margin: 0 auto;
}

/* ================================
🧠 TITULO
================================== */

.detalle-2 h2 {
  text-align: center;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--gx-dark);
  margin-bottom: 2rem;
}

/* ================================
✨ FEATURES
================================== */

.caracteristicas-d2 {
  display: grid;
  gap: 1.5rem;
}

.caracteristica {
  text-align: center;
  padding: 1.5rem;
  border-radius: 16px;
  background: white;
  box-shadow: var(--gx-shadow);
  transition: transform 0.3s ease;
}

.caracteristica:hover {
  transform: translateY(-4px);
}

.numero {
  width: 36px;
  height: 36px;
  margin: 0 auto 0.75rem;
  border-radius: 50%;
  background: var(--gx-dark);
  color: #fff;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.caracteristica p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--gx-text);
}

/* ================================
➖ SEPARADOR
================================== */

.detalle-2 hr {
  border: none;
  border-top: 2px solid var(--gx-border);
  margin: 2.5rem 0;
}

/* ================================
⚙️ CONFIGURACION
================================== */

.configuracion {
  display: grid;
  gap: 2rem;
  justify-content: center;
}

/* TEXTO */

.config-texto h3 {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--gx-dark);
  margin-bottom: 0.75rem;
}

.config-texto p {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--gx-text);
}

/* ================================
⚛️ ORBITAL (PRO LIMPIO)
================================== */

.orbital-container {
  position: relative;
  width: 260px;
  height: 260px;
  margin: 0 auto;

  --r1: 55px;
  --r2: 90px;
  --r3: 125px;
}

/* NUCLEO */

.nucleus {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: #4c1d95;
  color: #fff;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ORBITAS */

.orbit {
  position: absolute;
  border: 1.5px solid #cbd5f5;
  border-radius: 50%;
}

.orbit1 {
  width: calc(var(--r1) * 2);
  height: calc(var(--r1) * 2);
  top: calc(50% - var(--r1));
  left: calc(50% - var(--r1));
}
.orbit2 {
  width: calc(var(--r2) * 2);
  height: calc(var(--r2) * 2);
  top: calc(50% - var(--r2));
  left: calc(50% - var(--r2));
}
.orbit3 {
  width: calc(var(--r3) * 2);
  height: calc(var(--r3) * 2);
  top: calc(50% - var(--r3));
  left: calc(50% - var(--r3));
}

/* ELECTRONES */

.electron {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--gx-primary);

  transform:
    translate(-50%, -50%)
    rotate(var(--angle))
    translate(var(--r))
    rotate(calc(-1 * var(--angle)));

  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.electron:hover {
  box-shadow: 0 0 10px var(--gx-primary);
  transform:
    translate(-50%, -50%)
    rotate(var(--angle))
    translate(var(--r))
    rotate(calc(-1 * var(--angle)))
    scale(1.2);
}

/* RADIOS */

.orbit1 .electron { --r: var(--r1); }
.orbit2 .electron { --r: var(--r2); }
.orbit3 .electron { --r: var(--r3); }

/* ANIMACION ORBITAL */

@keyframes orbit-spin {
  to { transform: rotate(360deg); }
}

.orbit1 { animation: orbit-spin 5s linear infinite; }
.orbit2 { animation: orbit-spin 9s linear infinite reverse; }
.orbit3 { animation: orbit-spin 14s linear infinite; }

@media (prefers-reduced-motion: reduce) {
  .orbit1, .orbit2, .orbit3 { animation: none; }
}

/* ================================
📱 TABLET
================================== */

@media (min-width: 640px) {

  .detalle-2 h2 {
    font-size: 1.8rem;
  }

  .caracteristicas-d2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .orbital-container {
    width: 300px;
    height: 300px;
  }

}

/* ================================
💻 DESKTOP
================================== */

@media (min-width: 768px) {

  .caracteristicas-d2 {
    grid-template-columns: repeat(3, 1fr);
  }

  .configuracion {
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 3rem;
  }

  .config-img {
    order: 1;
    display: flex;
    justify-content: center;
  }

  .config-texto {
    order: 2;
  }

}

/* ================================
🖥️ LARGE
================================== */

@media (min-width: 1024px) {

  .detalle-2 {
    padding: 4rem 2rem;
  }

  .detalle-2 h2 {
    font-size: 2rem;
  }

  .orbital-container {
    width: 360px;
    height: 360px;
  }

}