/* Clusters: sistema de órbitas (js/clusters.js), fichas de cada clúster y mapa con su sede.
   Solo se carga en /clusters/ y /en/clusters/. Sin JavaScript se ven las tres fichas. */

.clusters-hero {
  --planeta: 104px;
  --sol: 116px;
  position: relative; isolation: isolate; overflow: hidden; color: #fff;
  background:
    radial-gradient(60% 70% at 72% 48%, rgba(10, 108, 189, 0.38), transparent 70%),
    radial-gradient(40% 50% at 12% 10%, rgba(0, 159, 227, 0.16), transparent 70%),
    linear-gradient(180deg, var(--navy-950), var(--navy-900) 60%, #052a4f);
  padding-block: clamp(44px, 5.5vw, 76px) clamp(48px, 6vw, 84px);
}
.clusters-cielo { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.clusters-grid {
  display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.18fr);
  grid-template-areas: "texto universo" "panel universo"; column-gap: clamp(28px, 4vw, 64px); row-gap: 28px; align-items: start;
}
.clusters-texto { grid-area: texto; }
.clusters-texto h1 { color: #fff; font-size: clamp(2.1rem, 4.4vw, 3.4rem); font-weight: 800; letter-spacing: -0.025em; line-height: 1.08; margin-bottom: 18px; }
.clusters-texto .lead { color: rgba(230, 243, 252, 0.86); max-width: 560px; }
.clusters-ayuda { display: none; align-items: center; gap: 10px; margin: 18px 0 0; font-size: 0.92rem; font-weight: 600; color: var(--cyan-400); }
.clusters-ayuda .icon { width: 20px; height: 20px; flex: none; animation: ayuda-gira 6s linear infinite; }
.ayuda-tactil { display: none; }
@media (hover: none) { .ayuda-raton { display: none; } .ayuda-tactil { display: inline; } }
@keyframes ayuda-gira { to { transform: rotate(360deg); } }
.clusters-panel { grid-area: panel; }

/* ---------- Sistema de órbitas ---------- */
.universo { grid-area: universo; position: relative; width: 100%; max-width: 680px; justify-self: center; align-self: start; aspect-ratio: 1 / 0.86; display: none; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.universo.arrastrando { cursor: grabbing; }
.universo-sol {
  position: absolute; left: 50%; top: 50%; z-index: 20; width: var(--sol); height: var(--sol); margin: calc(var(--sol) / -2) 0 0 calc(var(--sol) / -2);
  padding: 0; border: 0; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #e8f6fe 70%); display: grid; place-items: center; cursor: pointer;
  box-shadow: 0 0 0 10px rgba(51, 181, 236, 0.14), 0 0 70px 18px rgba(51, 181, 236, 0.45), inset 0 -8px 18px rgba(4, 32, 61, 0.1);
  transition: transform .25s var(--ease);
}
.universo-sol img { width: 62%; height: auto; pointer-events: none; }
.universo-sol::before, .universo-sol::after { content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 2px solid rgba(51, 181, 236, 0.5); animation: sol-latido 3.2s ease-out infinite; pointer-events: none; }
.universo-sol::after { animation-delay: 1.6s; }
.universo-sol:hover { transform: scale(1.06); }
.universo-sol:active { transform: scale(0.94); }
.universo-sol:focus-visible { outline: 3px solid var(--cyan-400); outline-offset: 6px; }
@keyframes sol-latido { from { transform: scale(1); opacity: 0.8; } to { transform: scale(1.7); opacity: 0; } }

.planeta {
  position: absolute; left: 0; top: 0; z-index: 10; width: var(--planeta); height: var(--planeta); margin: calc(var(--planeta) / -2) 0 0 calc(var(--planeta) / -2);
  padding: 0; border: 0; background: none; color: #fff; font: inherit; cursor: pointer; will-change: transform; transition: opacity .4s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.planeta-cuerpo {
  display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; padding: 14%;
  background: radial-gradient(circle at 34% 28%, #fff 0%, #fff 55%, #e4eef6 100%);
  box-shadow: 0 0 0 5px rgba(var(--acento-rgb), 0.28), 0 14px 34px rgba(0, 0, 0, 0.38), inset 0 -10px 18px rgba(4, 32, 61, 0.12);
  transition: box-shadow .35s var(--ease), transform .35s var(--ease);
}
.planeta-cuerpo img { width: 100%; height: auto; pointer-events: none; }
.planeta-nombre {
  position: absolute; left: 50%; top: calc(100% + 10px); transform: translateX(-50%); white-space: nowrap; pointer-events: none;
  padding: 4px 12px; border-radius: 999px; font-size: 0.86rem; font-weight: 800; letter-spacing: 0.01em;
  background: rgba(2, 21, 41, 0.72); border: 1px solid rgba(var(--acento-rgb), 0.6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.planeta:hover .planeta-cuerpo, .planeta:focus-visible .planeta-cuerpo, .planeta[aria-expanded="true"] .planeta-cuerpo {
  box-shadow: 0 0 0 7px rgba(var(--acento-rgb), 0.55), 0 0 54px 12px rgba(var(--acento-rgb), 0.6), 0 14px 34px rgba(0, 0, 0, 0.38);
}
.planeta:hover .planeta-cuerpo { transform: scale(1.08); }
.planeta:focus-visible { outline: none; }
.planeta:focus-visible .planeta-cuerpo { outline: 3px solid #fff; outline-offset: 5px; }
.universo.enfocado .planeta:not([aria-expanded="true"]) { opacity: 0.42; }
.universo.enfocado .planeta:not([aria-expanded="true"]):hover { opacity: 0.85; }

/* ---------- Elegir clúster y fichas ---------- */
.clusters-elige { display: none; }
.elige-titulo { margin: 0 0 12px; font-size: 0.82rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(230, 243, 252, 0.6); }
.clusters-elige ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.cluster-chip {
  width: 100%; display: flex; align-items: center; gap: 16px; padding: 12px 18px 12px 12px; text-align: left; font: inherit; color: #fff; cursor: pointer;
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: var(--r-md);
  transition: background .25s, border-color .25s, transform .25s var(--ease);
}
.cluster-chip:hover, .cluster-chip:focus-visible { background: rgba(var(--acento-rgb), 0.16); border-color: rgba(var(--acento-rgb), 0.8); transform: translateX(6px); outline: none; }
.chip-logo { flex: none; width: 76px; height: 48px; display: grid; place-items: center; padding: 6px 10px; border-radius: 12px; background: #fff; }
.chip-logo img { width: 100%; height: 100%; object-fit: contain; }
.chip-texto { flex: 1; min-width: 0; display: grid; gap: 2px; }
.chip-texto strong { font-size: 1.02rem; }
.chip-texto small { font-size: 0.82rem; color: rgba(230, 243, 252, 0.7); line-height: 1.35; }
.cluster-chip > .icon { flex: none; width: 18px; height: 18px; color: rgb(var(--acento-rgb)); transition: transform .25s var(--ease); }
.cluster-chip:hover > .icon { transform: translateX(4px); }

.clusters-fichas { display: grid; gap: 20px; }
.cluster-ficha { scroll-margin-top: calc(var(--header-h) + 16px); }
.cluster-ficha {
  position: relative; padding: clamp(20px, 2.4vw, 28px); border-radius: var(--r-lg); color: rgba(230, 243, 252, 0.9);
  background: linear-gradient(160deg, rgba(var(--acento-rgb), 0.16), rgba(255, 255, 255, 0.05) 45%);
  border: 1px solid rgba(255, 255, 255, 0.14); border-top: 3px solid var(--acento);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
}
.ficha-cabecera { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.ficha-logo { flex: none; width: 104px; height: 70px; display: grid; place-items: center; padding: 8px 12px; border-radius: 14px; background: #fff; }
.ficha-logo img { width: 100%; height: 100%; object-fit: contain; }
.ficha-rol { display: inline-block; margin: 0 0 6px; padding: 3px 10px; border-radius: 999px; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: #fff; background: rgba(var(--acento-rgb), 0.85); }
.cluster-ficha h2 { color: #fff; font-size: clamp(1.5rem, 2.4vw, 1.9rem); margin: 0; outline: none; }
.ficha-nombre { margin: 4px 0 0; font-size: 0.9rem; color: rgba(230, 243, 252, 0.72); line-height: 1.35; }
.ficha-num { margin-left: auto; align-self: flex-start; font-size: 0.8rem; font-weight: 800; color: rgba(230, 243, 252, 0.45); }
.ficha-que { margin: 0 0 14px; line-height: 1.6; }
.ficha-datos { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 8px; }
.ficha-datos li { display: flex; gap: 10px; align-items: flex-start; font-size: 0.9rem; line-height: 1.45; }
.ficha-datos .icon { flex: none; width: 18px; height: 18px; margin-top: 1px; color: rgb(var(--acento-rgb)); }
.cluster-ficha h3 { color: #fff; font-size: 0.82rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 10px; }
.ficha-aporta { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ficha-aporta a {
  display: block; padding: 10px 14px 10px 16px; border-radius: 12px; font-size: 0.92rem; line-height: 1.45; color: #fff;
  background: rgba(255, 255, 255, 0.06); border-left: 3px solid rgba(var(--acento-rgb), 0.9); transition: background .2s, transform .2s var(--ease);
}
.ficha-aporta a:hover { background: rgba(255, 255, 255, 0.12); transform: translateX(4px); }

/* Con JavaScript: el sistema, la lista para elegir y una ficha cada vez */
.clusters-hero.vivo .universo { display: block; }
.clusters-hero.vivo .clusters-ayuda { display: flex; }
.clusters-hero.vivo .clusters-elige { display: block; }
.clusters-hero.vivo .cluster-ficha { display: none; }
.clusters-hero.vivo .cluster-ficha.activa { display: block; animation: ficha-entra .55s var(--ease) both; }
.clusters-hero.vivo.con-ficha .clusters-elige, .clusters-hero.vivo.con-ficha .clusters-ayuda { display: none; }
@keyframes ficha-entra { from { opacity: 0; transform: translateY(16px) scale(0.98); } }

/* ---------- Mapa: la ciudad de cada sede y un logo por clúster, enlazado a su web ---------- */
.clusters-mapa { max-width: 760px; margin-inline: auto; padding: clamp(28px, 4vw, 44px) clamp(16px, 3vw, 32px) clamp(16px, 3vw, 28px); }
.mapa-clusters svg { display: block; width: 100%; height: auto; overflow: visible; }
.cartel-linea { stroke: var(--cyan-500); stroke-width: 1.8; stroke-linecap: round; stroke-dasharray: 2 6; animation: linea-fluye 1.1s linear infinite; transition: stroke .25s, stroke-width .25s; }
.cartel-linea.activa { stroke: var(--acento); stroke-width: 3; }
@keyframes linea-fluye { to { stroke-dashoffset: 8; } }
.ciudad-punto { fill: var(--blue-600); stroke: #fff; stroke-width: 2.5; }
.ciudad-onda { fill: rgba(0, 159, 227, 0.35); transform-box: fill-box; transform-origin: center; animation: ciudad-latido 2.4s ease-out infinite; }
@keyframes ciudad-latido { from { transform: scale(1); opacity: 0.9; } to { transform: scale(3.2); opacity: 0; } }
.mapa-imasde circle { fill: #fff; stroke: var(--blue-500); stroke-width: 1.5; filter: drop-shadow(0 2px 3px rgba(4, 32, 61, 0.25)); }
.mapa-imasde text { font-size: 12px; font-weight: 700; fill: var(--blue-700); paint-order: stroke; stroke: rgba(255, 255, 255, 0.92); stroke-width: 4px; }
.mapa-leyenda { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; font-size: 0.88rem; font-weight: 600; color: var(--text); }
.mapa-leyenda li { display: inline-flex; align-items: center; gap: 8px; }
.mapa-leyenda img { width: 22px; height: 22px; padding: 2px; border-radius: 50%; background: #fff; border: 1.5px solid var(--blue-500); }
.ley-punto { width: 12px; height: 12px; border-radius: 50%; background: var(--blue-600); box-shadow: 0 0 0 2.5px #fff, 0 0 0 6px rgba(0, 159, 227, 0.3); }
.pin-cluster {
  position: absolute; z-index: 2; transform: translateY(-50%); display: inline-flex; align-items: center; gap: 8px; padding: 9px 12px 9px 14px;
  border-radius: 14px; background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--acento); box-shadow: var(--shadow-md);
  transition: transform .25s var(--ease), box-shadow .25s;
}
.pin-cluster img { height: 28px; width: auto; }
.pin-cluster .icon { width: 15px; height: 15px; color: var(--muted); transform: rotate(-45deg); transition: color .2s; }
.pin-cluster:hover, .pin-cluster:focus-visible { transform: translateY(calc(-50% - 4px)); box-shadow: 0 0 0 3px rgba(var(--acento-rgb), 0.3), var(--shadow-lg); outline: none; }
.pin-cluster:hover .icon, .pin-cluster:focus-visible .icon { color: var(--acento); }
@media (max-width: 1024px) {
  .clusters-hero { --planeta: 88px; --sol: 100px; }
  .clusters-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "texto" "universo" "panel"; }
  .universo { max-width: 600px; }
  .clusters-panel { max-width: 680px; width: 100%; justify-self: center; }
}
@media (max-width: 720px) {
  .clusters-hero { --planeta: 60px; --sol: 70px; }
  .planeta-nombre { font-size: 0.74rem; padding: 3px 9px; top: calc(100% + 6px); }
  .universo { aspect-ratio: 1 / 1; }
  .ficha-cabecera { flex-wrap: wrap; }
  .ficha-logo { width: 88px; height: 58px; }
  .ficha-num { display: none; }
  .pin-cluster { padding: 6px 8px 6px 10px; gap: 5px; border-radius: 10px; }
  .pin-cluster img { height: 17px; }
  .pin-cluster .icon { width: 12px; height: 12px; }
  .mapa-imasde text { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .clusters-ayuda .icon, .universo-sol::before, .universo-sol::after, .cartel-linea, .ciudad-onda { animation: none; }
}