/* ============================================================
   CICLO STRUCTA — diagram variations
   ============================================================ */
.ciclo{ --active:#5B97FF; }

/* shared step palette */
.ciclo-legend{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:28px; }
.ciclo-legend .tag .ln{ font-family:var(--font-mono); font-size:11px; color:var(--text-4); }

/* ------------------------------------------------------------
   A · RADIAL INSTRUMENT LOOP
   ------------------------------------------------------------ */
.ciclo-radial{
  position:relative; width:min(560px,92vw); aspect-ratio:1; margin-inline:auto;
}
.ciclo-radial svg.ring{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.ciclo-radial .tick{ stroke:var(--line-2); stroke-width:1.5; }
.ciclo-radial .tick.major{ stroke:var(--gold-line); stroke-width:2; }
.ciclo-radial .ring-base{ fill:none; stroke:var(--line); stroke-width:1.5; }
.ciclo-radial .ring-prog{ fill:none; stroke:url(#cicloBlue); stroke-width:3; stroke-linecap:round;
  filter:drop-shadow(0 0 8px rgba(46,124,255,.7)); transition:stroke-dashoffset .9s cubic-bezier(.4,0,.2,1); }

.cnode{
  position:absolute; width:46px; height:46px; transform:translate(-50%,-50%);
  border-radius:50%; display:grid; place-items:center;
  background:var(--surface-2); border:1px solid var(--line-2);
  font-family:var(--font-mono); font-weight:700; font-size:14px; color:var(--text-2);
  transition:all .45s cubic-bezier(.3,.7,.3,1); cursor:default; z-index:2;
}
.cnode::after{ content:""; position:absolute; inset:-6px; border-radius:50%; border:1px solid transparent; transition:.45s; }
.cnode.is-active{
  background:var(--blue); color:#fff; border-color:var(--blue-bright);
  box-shadow:0 0 0 1px var(--blue), 0 0 28px -2px rgba(46,124,255,.85); transform:translate(-50%,-50%) scale(1.16);
}
.cnode.is-active::after{ border-color:var(--blue-soft-2); inset:-9px; }
.cnode.is-done{ color:var(--blue-bright); border-color:var(--blue-line); }

.ciclo-core{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:54%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle at 50% 35%, var(--surface-2), var(--bg-2) 75%);
  border:1px solid var(--line-2); display:grid; place-content:center; text-align:center; padding:8%;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), var(--shadow);
}
.ciclo-core .core-label{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--gold); margin-bottom:14px; }
.ciclo-core .core-n{ font-family:var(--font-mono); font-size:13px; color:var(--text-4); margin-bottom:6px; }
.ciclo-core .core-title{ font-family:var(--font-display); font-weight:700; font-size:clamp(17px,2.4vw,22px); line-height:1.08; letter-spacing:-.02em; min-height:2.2em; }
.ciclo-core .core-desc{ font-size:13px; color:var(--text-2); margin-top:10px; line-height:1.45; max-width:24ch; margin-inline:auto; min-height:2.6em; }
.ciclo-core .core-title, .ciclo-core .core-desc, .ciclo-core .core-n{ transition:opacity .35s; }

/* ------------------------------------------------------------
   B · ASCENDING STAIRCASE
   ------------------------------------------------------------ */
.ciclo-stairs{ position:relative; width:100%; }
.ciclo-stairs-track{ display:grid; grid-template-columns:repeat(7,1fr); gap:clamp(8px,1.2vw,16px); align-items:end; }
.cstep{
  position:relative; display:flex; flex-direction:column; gap:10px;
  padding:18px 16px; border-radius:var(--r); border:1px solid var(--line-2);
  background:linear-gradient(180deg,var(--surface) 0%, var(--bg-2) 100%);
  transition:all .45s cubic-bezier(.3,.7,.3,1);
}
.cstep .cstep-n{ font-family:var(--font-mono); font-weight:700; font-size:13px; color:var(--text-4); }
.cstep .cstep-bar{ height:4px; border-radius:2px; background:var(--line-2); overflow:hidden; }
.cstep .cstep-bar i{ display:block; height:100%; width:0; background:var(--blue-grad); transition:width .7s ease; }
.cstep .cstep-title{ font-family:var(--font-display); font-weight:600; font-size:14.5px; line-height:1.15; letter-spacing:-.02em; }
.cstep.is-active{ border-color:var(--blue); box-shadow:var(--glow-blue-sm); background:linear-gradient(180deg,var(--surface-2) 0%, var(--bg-2) 100%); }
.cstep.is-active .cstep-n{ color:var(--blue-bright); }
.cstep.is-active .cstep-bar i, .cstep.is-done .cstep-bar i{ width:100%; }
.cstep.is-done .cstep-n{ color:var(--text-2); }
/* climbing offset via inline style --lift */
.cstep{ transform:translateY(calc(var(--lift,0) * -1)); }
.cstep-escala{
  border-color:var(--gold-line);
  background:radial-gradient(120% 140% at 100% 0%, var(--gold-soft), transparent 60%), linear-gradient(180deg,var(--surface-2),var(--bg-2));
}
.cstep-escala .cstep-title{ color:var(--gold-bright); }
.stairs-arrow{ position:absolute; top:-6px; right:-2px; display:flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); }

@media (max-width:780px){
  .ciclo-stairs-track{ grid-template-columns:1fr; gap:0; }
  .cstep{ transform:none !important; border-radius:0; border-bottom:0;
    border-left:2px solid var(--line-2); padding-left:22px; }
  .cstep:first-child{ border-radius:var(--r) var(--r) 0 0; }
  .cstep:last-child{ border-radius:0 0 var(--r) var(--r); border-bottom:1px solid var(--line-2); }
  .cstep.is-active{ border-left-color:var(--blue); }
  .stairs-arrow{ display:none; }
}

/* ------------------------------------------------------------
   C · BLUEPRINT FLOW
   ------------------------------------------------------------ */
.ciclo-blueprint{ position:relative; width:100%; padding:clamp(20px,3vw,40px); border:1px solid var(--line-2); border-radius:var(--r-lg);
  background:var(--bg-2); overflow:hidden; }
.ciclo-blueprint .bp-grid{ position:absolute; inset:0;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:28px 28px; opacity:.6; pointer-events:none; }
.ciclo-blueprint .bp-corner{ position:absolute; width:14px; height:14px; }
.bp-corner.tl{ top:14px; left:14px; border-top:1.5px solid var(--gold-line); border-left:1.5px solid var(--gold-line); }
.bp-corner.tr{ top:14px; right:14px; border-top:1.5px solid var(--gold-line); border-right:1.5px solid var(--gold-line); }
.bp-corner.bl{ bottom:14px; left:14px; border-bottom:1.5px solid var(--gold-line); border-left:1.5px solid var(--gold-line); }
.bp-corner.br{ bottom:14px; right:14px; border-bottom:1.5px solid var(--gold-line); border-right:1.5px solid var(--gold-line); }
.bp-flow{ position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:14px clamp(14px,2.4vw,40px); z-index:1; }
.bnode{
  position:relative; padding:16px; border:1px solid var(--line-2); border-radius:var(--r-sm);
  background:rgba(17,22,31,.85); backdrop-filter:blur(2px); transition:all .45s;
}
.bnode .bn-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.bnode .bn-n{ font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:.1em; color:var(--text-4); }
.bnode .bn-dot{ width:8px; height:8px; border-radius:2px; background:var(--line-3); transition:.4s; }
.bnode .bn-title{ font-family:var(--font-display); font-weight:600; font-size:14px; line-height:1.12; letter-spacing:-.02em; }
.bnode .bn-meta{ font-family:var(--font-mono); font-size:10.5px; color:var(--text-3); margin-top:6px; }
.bnode.is-active{ border-color:var(--blue); box-shadow:var(--glow-blue-sm); }
.bnode.is-active .bn-dot{ background:var(--blue-bright); box-shadow:0 0 10px var(--blue); }
.bnode.is-active .bn-n{ color:var(--blue-bright); }
.bnode.is-loop{ border-color:var(--gold-line); border-style:dashed; }
.bnode.is-loop .bn-title{ color:var(--gold); }
.bp-svg{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:0; overflow:visible; }
.bp-svg path{ fill:none; stroke:var(--line-3); stroke-width:1.5; }
.bp-svg path.flow{ stroke:var(--blue-line); stroke-dasharray:5 5; }
@media (max-width:780px){
  .bp-flow{ grid-template-columns:1fr 1fr; }
}
@media (max-width:480px){
  .bp-flow{ grid-template-columns:1fr; }
}

@media (prefers-reduced-motion: reduce){
  .cnode, .cstep, .bnode, .ring-prog{ transition:none !important; }
}