/* Ciclo SEM · texto + gráfico orbital (Inicio, tras Metodología)
   El gráfico mide en unidades del propio contenedor (cqw), así anillos, etapas y textos
   escalan juntos en cualquier ancho. Las etapas van sobre el anillo interior; la órbita gira
   y cada etapa gira al revés a la misma velocidad, así el texto queda siempre derecho. */
.me-ciclo { --me-ciclo-linea: rgba(0, 0, 0, .14); --me-ciclo-centro: var(--me-color-negro); --me-ciclo-centro-txt: var(--me-color-blanco); --me-ciclo-sub: var(--me-color-muted); }
.me-ciclo.me-section--negro { --me-ciclo-linea: rgba(255, 255, 255, .2); --me-ciclo-centro: var(--me-color-blanco); --me-ciclo-centro-txt: var(--me-color-negro); --me-ciclo-sub: rgba(255, 255, 255, .7); }

.me-ciclo__grid { display: grid; gap: clamp(2.5rem, 5vw, 4rem); align-items: center; }
@media (min-width: 1025px) {
  .me-ciclo__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
}
.me-ciclo__texto .me-head { margin-bottom: 0; }
.me-ciclo.me-section--negro .me-head__intro { color: rgba(255, 255, 255, .8); }
.me-ciclo__destacado {
  margin: 2rem 0 0; padding: .2rem 0 .2rem 1.25rem; max-width: 52ch;
  border-left: 3px solid var(--me-ui-azul);
  font-weight: var(--me-fw-semibold); line-height: 1.6;
}

/* --- Gráfico --- */
.me-ciclo__grafico { position: relative; width: min(100%, 600px); margin-inline: auto; container-type: inline-size; }
.me-ciclo__orbita { position: relative; aspect-ratio: 1; }
.me-ciclo__anillo { position: absolute; border-radius: 50%; border: 1px solid var(--me-ciclo-linea); }
.me-ciclo__anillo--ext { inset: 2%; }
.me-ciclo__anillo--int { inset: 16%; border-style: dashed; }   /* radio 34 % = donde van las etapas */

.me-ciclo__etapas { list-style: none; margin: 0; padding: 0; }
.me-ciclo__etapa {
  position: absolute; left: 50%; top: 50%; width: 0; height: 0;
  transform: rotate(var(--me-ang)) translateY(-34cqw) rotate(calc(-1 * var(--me-ang)));
}
.me-ciclo__etapa:nth-child(4n+1) { --me-acc: var(--me-ui-azul); }
.me-ciclo__etapa:nth-child(4n+2) { --me-acc: var(--me-ui-naranja); }
.me-ciclo__etapa:nth-child(4n+3) { --me-acc: var(--me-ui-verde); }
.me-ciclo__etapa:nth-child(4n+4) { --me-acc: var(--me-ui-amarillo); }
/* El punto de color queda justo sobre el anillo; nombre y bajada debajo */
.me-ciclo__etapa-in {
  --me-num: clamp(30px, 6.4cqw, 40px);
  position: absolute; left: 0; top: 0; width: 30cqw;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  translate: -50% calc(var(--me-num) / -2);
  transform-origin: 50% calc(var(--me-num) / 2);   /* gira sobre el centro del punto */
}
.me-ciclo__num {
  display: grid; place-items: center; width: var(--me-num); height: var(--me-num); border-radius: 50%;
  background: var(--me-acc); color: var(--me-color-blanco);
  font-weight: var(--me-fw-bold); font-size: clamp(.8rem, 2.4cqw, 1rem);
  box-shadow: 0 0 0 6px var(--me-ciclo-halo, rgba(255, 255, 255, .9));
}
.me-ciclo.me-section--negro { --me-ciclo-halo: rgba(0, 0, 0, .85); }
.me-ciclo.me-section--gris { --me-ciclo-halo: rgba(245, 245, 245, .9); }
.me-ciclo__nombre { margin-top: .55rem; font-family: var(--me-font-heading); font-size: clamp(.95rem, 3.2cqw, 1.2rem); line-height: 1.2; }
.me-ciclo__sub { margin-top: .15rem; font-size: clamp(.72rem, 2.2cqw, .85rem); line-height: 1.3; color: var(--me-ciclo-sub); }

.me-ciclo__centro {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%; margin: 0;
  display: grid; place-items: center; width: 22%; aspect-ratio: 1; border-radius: 50%;
  background: var(--me-ciclo-centro); color: var(--me-ciclo-centro-txt);
  box-shadow: 0 10px 40px rgba(0, 0, 0, .18);
  font-family: var(--me-font-heading); font-weight: var(--me-fw-bold); text-transform: uppercase;
  font-size: clamp(.85rem, 3.4cqw, 1.3rem); line-height: 1.15; text-align: center;
}
.me-ciclo__centro span { max-width: 80%; }

/* Giro: la órbita da la vuelta y cada etapa la compensa al revés */
@keyframes me-ciclo-giro { to { transform: rotate(360deg); } }
.me-ciclo__orbita.is-girando { animation: me-ciclo-giro var(--me-vuelta, 60s) linear infinite; }
.me-ciclo__orbita.is-girando .me-ciclo__etapa-in { animation: me-ciclo-giro var(--me-vuelta, 60s) linear infinite reverse; }
@media (prefers-reduced-motion: reduce) {
  .me-ciclo__orbita.is-girando, .me-ciclo__orbita.is-girando .me-ciclo__etapa-in { animation: none; }
}