/* ═══════════════════════════════════════════════════════════════════
   VORTEX · ECOSISTEMA ORBITAL INTERACTIVO
   Presentación principal de servicios del homepage.
   Diseño aprobado recuperado de la implementación anterior
   (bloque 'VORTEX APPROVED ECOSYSTEM ROTATOR'), consolidado en
   un único archivo: sin parches superpuestos ni orbitales ocultos.
   ═══════════════════════════════════════════════════════════════════ */

@font-face{
  font-family:"Posterama 1984";
  /* Rutas absolutas desde la raíz del sitio: las relativas se resolvían
     contra /assets/css/ y devolvían 404 (/assets/css/assets/...). */
  src:
    url("/assets/fonts/Posterama1984W01-Thin.woff2") format("woff2"),
    url("/assets/vortex-ecosystem/Posterama1984W01-Thin.woff") format("woff");
  font-weight:100;
  font-style:normal;
  font-display:swap;
}

#vx-approved-ecosystem,
#vx-approved-ecosystem *{
  box-sizing:border-box;
  font-family:"Posterama 1984","Posterama1984",system-ui,sans-serif !important;
  font-weight:100 !important;
}

#vx-approved-ecosystem{
  /* ═══ FUENTE ÚNICA DE VERDAD · escritorio ≥1200px ═══ */
  --cyan:#00f5ff;
  --purple:#7b2fff;
  --eco-size:900px;        /* lienzo cuadrado          */
  --orbit-radius:265px;    /* radio de la órbita       */
  --node-size:122px;       /* nodos principales        */
  --center-size:200px;     /* logo central             */
  --bg-size:98%;           /* fondo circular grande    */

  position:relative;
  width:100%;
  max-width:100%;
  display:grid;            /* columna: lienzo arriba, instrucciones debajo */
  justify-items:center;
  overflow-x:clip;
  padding:32px 0 12px;
  isolation:isolate;
}

#vx-approved-ecosystem .vx-eco-head{
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%);
  text-align:center;
  z-index:5;
  pointer-events:none;
}

#vx-approved-ecosystem .vx-eco-kicker{
  color:var(--cyan);
  text-transform:uppercase;
  letter-spacing:.34em;
  font-size:.62rem;
  margin-bottom:18px;
}

#vx-approved-ecosystem .vx-eco-title{
  color:#fff;
  text-transform:uppercase;
  letter-spacing:.13em;
  line-height:1.15;
  font-size:clamp(1.7rem,4.2vw,3.4rem);
}

#vx-approved-ecosystem .vx-eco-title span{
  display:block;
  color:var(--cyan);
}

#vx-approved-ecosystem .vx-eco-stage{
  position:relative;
  width:min(var(--eco-size), calc(100vw - 48px));
  aspect-ratio:1 / 1;
  height:auto;
  margin-inline:auto;      /* centrado matemático real */
  display:grid;
  place-items:center;
  overflow:visible;
}

#vx-approved-ecosystem .vx-eco-bg-logo{
  position:absolute;
  left:50%;
  top:50%;
  width:var(--bg-size);
  height:auto;
  max-width:none;
  transform:translate(-50%,-50%);   /* mismo centro que anillo y nodos */
  opacity:.39;
  z-index:0;
  pointer-events:none;
  user-select:none;
}

#vx-approved-ecosystem .vx-eco-ring{
  position:absolute;
  left:50%;
  top:50%;
  width:calc(var(--orbit-radius) * 2);
  height:calc(var(--orbit-radius) * 2);
  transform:translate(-50%,-50%);
  border-radius:50%;
  border:1px solid rgba(0,245,255,.18);
  box-shadow:
    inset 0 0 44px rgba(0,245,255,.05),
    0 0 52px rgba(123,47,255,.08);
  z-index:1;
  pointer-events:none;
}

#vx-approved-ecosystem .vx-eco-ring::after{
  content:"";
  position:absolute;
  inset:18px;
  border-radius:50%;
  border:1px dashed rgba(123,47,255,.20);
}

#vx-approved-ecosystem .vx-eco-center{
  position:absolute;
  left:50%;
  top:50%;
  width:var(--center-size);
    height:var(--center-size);
  transform:translate(-50%,-50%);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  z-index:10;
  pointer-events:none;
}

#vx-approved-ecosystem .vx-eco-center img{
  position:absolute;
  width:78%;
  height:78%;
  object-fit:contain;
  opacity:.55;
  filter:none;
  z-index:1;
}

#vx-approved-ecosystem .vx-eco-center-title{
  position:relative;
  z-index:2;
  color:#fff;
  font-size:clamp(1.55rem,3vw,2.7rem);
  line-height:.9;
  letter-spacing:.06em;
  text-transform:uppercase;
  text-align:center;
}

#vx-approved-ecosystem .vx-eco-node{
  position:absolute;
  left:50%;
  top:50%;
  width:var(--node-size);
  height:var(--node-size);
  transform:translate(-50%,-50%);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  color:#fff;
  background:rgba(5,8,18,.56);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:
    0 0 24px rgba(0,245,255,.08),
    0 0 34px rgba(123,47,255,.08);
  z-index:7;
  cursor:pointer;
}

#vx-approved-ecosystem .vx-eco-node img{
  width:86%;
  height:86%;
  object-fit:contain;
  display:block;
  max-width:none;
  max-height:none;
  filter:
    drop-shadow(0 0 12px rgba(0,245,255,.30))
    drop-shadow(0 0 22px rgba(123,47,255,.22));
}

#vx-approved-ecosystem .vx-eco-node[data-service="nexus"] img{
  width:108%;
  height:auto;
}

#vx-approved-ecosystem .vx-eco-label{
  position:absolute;
  left:50%;
  top:100%;
  transform:translateX(-50%) translateY(10px);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .22s ease, transform .22s ease, visibility .22s ease;
  text-align:center;
  white-space:normal;
  width:max-content;
  max-width:240px;
  z-index:40;
  background:rgba(5,8,18,.84);
  border:1px solid rgba(0,245,255,.22);
  border-radius:14px;
  padding:8px 14px;
  backdrop-filter:blur(6px);
  box-shadow:0 10px 24px rgba(0,0,0,.28);
}

#vx-approved-ecosystem .vx-eco-node:hover .vx-eco-label,
#vx-approved-ecosystem .vx-eco-node.vx-open .vx-eco-label{
  opacity:1;
  visibility:visible;
  transform:translateX(-50%) translateY(16px);
}

#vx-approved-ecosystem .vx-eco-name{
  display:block;
  color:#fff;
  font-size:.92rem;
  letter-spacing:.08em;
  line-height:1.05;
  text-transform:uppercase;
  margin-bottom:3px;
}

#vx-approved-ecosystem .vx-eco-keyword{
  display:block;
  color:var(--cyan);
  font-size:.58rem;
  letter-spacing:.16em;
  text-transform:uppercase;
}

/* Tree de Transmisión */
#vx-approved-ecosystem .vx-tree-layer{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:30;
  overflow:visible;
}

#vx-approved-ecosystem .vx-tree-lines{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  overflow:visible;
}

#vx-approved-ecosystem .vx-tree-line{
  stroke:rgba(0,245,255,.42);
  stroke-width:1.2;
  stroke-dasharray:5 6;
  filter:drop-shadow(0 0 7px rgba(0,245,255,.32));
  opacity:0;
  transition:opacity .18s ease;
}

#vx-approved-ecosystem .vx-tree-node{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%) scale(.76);
  width:108px;
  height:108px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  pointer-events:auto;
  text-decoration:none;
  color:#fff;
  background:rgba(5,8,18,.78);
  border:1px solid rgba(0,245,255,.38);
  box-shadow:
    0 0 18px rgba(0,245,255,.20),
    0 0 34px rgba(123,47,255,.14),
    inset 0 0 18px rgba(0,245,255,.05);
  opacity:0;
  visibility:hidden;
  transition:opacity .18s ease, transform .18s ease, visibility .18s ease, box-shadow .18s ease;
  cursor:pointer;
}

#vx-approved-ecosystem .vx-tree-node.vx-tree-small{
  width:82px;
  height:82px;
}

#vx-approved-ecosystem .vx-tree-node-inner{
  padding:6px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
}

#vx-approved-ecosystem .vx-tree-title{
  font-size:.58rem;
  letter-spacing:.08em;
  line-height:1.05;
  text-transform:uppercase;
  color:#fff;
  display:block;
}

#vx-approved-ecosystem .vx-tree-sub{
  font-size:.34rem;
  letter-spacing:.14em;
  line-height:1.1;
  text-transform:uppercase;
  color:var(--cyan);
  display:block;
  margin-top:5px;
}

#vx-approved-ecosystem .vx-tree-node:hover,
#vx-approved-ecosystem .vx-tree-node.vx-tree-open{
  transform:translate(-50%,-50%) scale(1.04);
  border-color:rgba(0,245,255,.76);
  box-shadow:
    0 0 24px rgba(0,245,255,.34),
    0 0 48px rgba(123,47,255,.22),
    inset 0 0 18px rgba(0,245,255,.08);
}

#vx-approved-ecosystem .vx-tree-active .vx-tree-node.vx-level-1,
#vx-approved-ecosystem .vx-tree-active .vx-tree-line.vx-line-level-1{
  opacity:1;
  visibility:visible;
  transform:translate(-50%,-50%) scale(1);
}

#vx-approved-ecosystem .vx-area-active .vx-tree-node.vx-area-child,
#vx-approved-ecosystem .vx-area-active .vx-tree-line.vx-line-area{
  opacity:1;
  visibility:visible;
  transform:translate(-50%,-50%) scale(1);
}

#vx-approved-ecosystem .vx-dj-active .vx-tree-node.vx-dj-child,
#vx-approved-ecosystem .vx-dj-active .vx-tree-line.vx-line-dj{
  opacity:1;
  visibility:visible;
  transform:translate(-50%,-50%) scale(1);
}

/* ═══════════════════════════════════════════════════════════
   BREAKPOINTS · una sola fuente de verdad por dispositivo
   Sólo se redefinen las variables: el centro nunca cambia.
   ═══════════════════════════════════════════════════════════ */

/* ── TABLET · 700–1199px ── */
@media(max-width:1199px){
  #vx-approved-ecosystem{
    --eco-size:700px;
    --orbit-radius:205px;
    --node-size:98px;
    --center-size:160px;
    --bg-size:100%;
  }
  #vx-approved-ecosystem .vx-eco-label{ max-width:170px; padding:7px 10px; }
  #vx-approved-ecosystem .vx-eco-name{ font-size:.64rem; }
  #vx-approved-ecosystem .vx-eco-keyword{ font-size:.4rem; }
}

/* ── MÓVIL · ≤699px ── */
@media(max-width:699px){
  #vx-approved-ecosystem{
    --eco-size:min(92vw, 390px);
    --orbit-radius:122px;
    --node-size:74px;
    --center-size:116px;
    --bg-size:132%;          /* sobresale del anillo pero centrado */
    padding:16px 0 8px;
  }
  #vx-approved-ecosystem .vx-eco-label{ max-width:120px; padding:5px 7px; }
  #vx-approved-ecosystem .vx-eco-name{ font-size:.5rem; letter-spacing:.04em; }
  #vx-approved-ecosystem .vx-eco-keyword{ font-size:.32rem; }
  #vx-approved-ecosystem .vx-eco-center-title{ font-size:.6rem; }

  /* El árbol flotante no cabe en una órbita de 390px:
     en móvil se sustituye por el panel inferior desplegable. */
  #vx-approved-ecosystem .vx-tree-layer{ display:none !important; }
}

/* ── MÓVIL ESTRECHO · ≤380px ── */
@media(max-width:380px){
  #vx-approved-ecosystem{
    --eco-size:94vw;
    --orbit-radius:108px;
    --node-size:66px;
    --center-size:104px;
  }
  #vx-approved-ecosystem .vx-eco-label{ max-width:104px; }
}

/* ═══════════════════════════════════════════════════════════
   AÑADIDOS DE CONSOLIDACIÓN (accesibilidad y rendimiento)
   ═══════════════════════════════════════════════════════════ */
/* Foco visible en todos los nodos interactivos */
.vx-eco-node:focus-visible,
.vx-tree-node:focus-visible{
  outline:2px solid var(--cyan,#00f5ff);
  outline-offset:4px;
  border-radius:8px;
}
/* El árbol también se abre con foco de teclado */
.vx-tree-layer.vx-tree-active{ pointer-events:auto; }

/* Movimiento reducido: el ecosistema se detiene y se muestra estático */
@media (prefers-reduced-motion: reduce){
  #vx-approved-ecosystem *{ animation:none !important; transition:none !important; }
}

/* Sin desbordes horizontales en ningún ancho */
#vx-approved-ecosystem{ max-width:100%; overflow-x:clip; }

/* ═══════════════════════════════════════════════════════════
   INSTRUCCIONES · siempre DEBAJO del lienzo y centradas
   (antes quedaban al lado por el flex-row del contenedor)
   ═══════════════════════════════════════════════════════════ */
.vx-eco-hint{
  max-width:620px;
  margin:24px auto 0;
  text-align:center;
  font-family:'P1984','Posterama 1984',sans-serif;
  font-weight:100;
  font-size:.54rem;
  letter-spacing:.16em;
  line-height:1.9;
  text-transform:uppercase;
  color:rgba(255,255,255,.62);
}

/* ═══════════════════════════════════════════════════════════
   PANEL MÓVIL DE SUBSERVICIOS
   Sustituye al árbol flotante cuando no hay espacio (≤699px).
   ═══════════════════════════════════════════════════════════ */
.vx-eco-panel{
  display:none;                     /* sólo móvil, y sólo al abrirse */
  width:min(92vw,420px);
  margin:18px auto 0;
  border:1px solid rgba(0,245,255,.24);
  background:linear-gradient(160deg,rgba(0,245,255,.05),rgba(123,47,255,.05));
  padding:1.1rem 1.15rem 1.25rem;
  text-align:left;
}
.vx-eco-panel.is-open{ display:block; animation:vxPanelIn .32s ease both; }
@keyframes vxPanelIn{ from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:none} }
.vx-eco-panel-head{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  margin-bottom:.9rem;
}
.vx-eco-panel-title{
  font-family:'P1984','Posterama 1984',sans-serif; font-weight:900;
  font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:var(--cyan,#00f5ff);
}
.vx-eco-panel-close{
  width:32px; height:32px; flex-shrink:0;
  border:1px solid rgba(255,255,255,.28); background:rgba(0,0,0,.4);
  color:rgba(255,255,255,.85); font-size:.9rem; cursor:pointer; line-height:1;
  transition:border-color .2s,color .2s;
}
.vx-eco-panel-close:hover,.vx-eco-panel-close:focus-visible{
  border-color:var(--cyan,#00f5ff); color:var(--cyan,#00f5ff);
  outline:2px solid var(--cyan,#00f5ff); outline-offset:2px;
}
.vx-eco-panel-group{ margin-bottom:.9rem; }
.vx-eco-panel-group:last-child{ margin-bottom:0; }
.vx-eco-panel-parent{
  display:flex; align-items:center; gap:.6rem;
  font-family:'P1984','Posterama 1984',sans-serif; font-weight:900;
  font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; color:#fff;
  text-decoration:none; padding:.6rem .3rem; min-height:44px;
  border-bottom:1px solid rgba(0,245,255,.16);
}
.vx-eco-panel-parent:hover,.vx-eco-panel-parent:focus-visible{ color:var(--cyan,#00f5ff); outline:none; }
.vx-eco-panel-parent img{ width:26px; height:26px; object-fit:contain; }
.vx-eco-panel-kids{ list-style:none; padding:0 0 0 .3rem; margin:.35rem 0 0; }
.vx-eco-panel-kids a{
  display:flex; align-items:center; gap:.55rem;
  font-family:'P1984','Posterama 1984',sans-serif; font-weight:100;
  font-size:.56rem; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(255,255,255,.82); text-decoration:none;
  padding:.55rem .3rem; min-height:44px;
}
.vx-eco-panel-kids a::before{ content:'▸'; color:var(--cyan,#00f5ff); }
.vx-eco-panel-kids a:hover,.vx-eco-panel-kids a:focus-visible{ color:var(--cyan,#00f5ff); outline:none; }
.vx-eco-panel-kids img{ width:20px; height:20px; object-fit:contain; }
/* En escritorio nunca aparece: allí se usa el árbol flotante */
@media(min-width:700px){ .vx-eco-panel{ display:none !important; } }