/* ============================================================
   CIBERPRO — app-v14.css
   Patch sobre v11 + v12 + v13. Cargar EN ÚLTIMO LUGAR.

   1. FIX móvil: menú visible, logo no excede el ancho
   2. Limpieza: ocultar .section-hud heredado (lo elimina el JS,
      esto es respaldo por si quedara alguno)
   3. Campo de motion enriquecido (.v14-field): nodos, circuitos,
      círculos, aros XL — más grandes, más movimiento, 3 colores
   ============================================================ */


/* ─────────────────────────────────────────────────────────────
   1. FIX MÓVIL — MENÚ + LOGO
───────────────────────────────────────────────────────────── */

/* El logo nunca debe exceder el espacio disponible junto al botón */
@media (max-width: 1120px) {
  .header-inner { gap: 12px !important; }
  .logo { flex: 0 1 auto !important; min-width: 0 !important; }
  .logo img {
    height: 50px !important;
    max-width: min(58vw, 320px) !important;
    width: auto !important;
  }
  .menu-toggle {
    display: flex !important;
    flex: 0 0 auto !important;
    width: 34px !important;
    height: 26px !important;
    z-index: 1002 !important;
  }
}

@media (max-width: 600px) {
  .logo img {
    height: 42px !important;
    max-width: min(62vw, 240px) !important;
  }
  :root { --header: 76px !important; }
}

@media (max-width: 380px) {
  .logo img { height: 38px !important; max-width: 62vw !important; }
}

/* Menú desplegable móvil — asegurar visibilidad y scroll.
   El JS de v11 conmuta la clase .open en .nav */
@media (max-width: 1120px) {
  .nav {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: var(--header) !important;
    display: none !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 4px !important;
    padding: 18px 22px calc(18px + env(safe-area-inset-bottom, 0px)) !important;
    background: #061221 !important;
    border-bottom: 1px solid rgba(87,201,255,.22) !important;
    box-shadow: 0 24px 60px rgba(0,0,0,.5) !important;
    max-height: calc(100dvh - var(--header)) !important;
    overflow-y: auto !important;
    z-index: 1001 !important;
  }
  .nav.open { display: flex !important; }
  .nav a {
    font-size: 1.05rem !important;
    padding: 14px 12px !important;
    border-bottom: 1px solid rgba(87,201,255,.10) !important;
    border-radius: 8px !important;
  }
  .nav .cta {
    margin: 10px 0 0 !important;
    text-align: center !important;
    justify-content: center !important;
    background: rgba(255,138,34,.16) !important;
    border: 1px solid rgba(255,138,34,.55) !important;
  }
  /* Animación hamburguesa → X */
  .menu-toggle span {
    transition: transform .3s, opacity .3s !important;
  }
  .menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(12px) rotate(45deg) !important; }
  .menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0 !important; }
  .menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-12px) rotate(-45deg) !important; }
}


/* ─────────────────────────────────────────────────────────────
   2. LIMPIEZA — ocultar HUD heredado estático
   (el JS v14 lo elimina; esto es respaldo CSS)
───────────────────────────────────────────────────────────── */
main section > .section-hud {
  display: none !important;
}


/* ─────────────────────────────────────────────────────────────
   3. CAMPO DE MOTION ENRIQUECIDO (.v14-field)
───────────────────────────────────────────────────────────── */

.v14-field {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
}

/* Asegurar que el contenido va por encima del campo */
main section > .container,
main section .container,
#hero > .container,
#hero .container {
  position: relative !important;
  z-index: 3 !important;
}

/* Paleta de utilidad */
.v14-c { --col: #57c9ff; --colr: 87,201,255; }   /* celeste */
.v14-m { --col: #cf57ff; --colr: 207,87,255; }   /* magenta */
.v14-o { --col: #ff8a22; --colr: 255,138,34; }   /* naranja */

/* En secciones claras, bajar opacidad para no saturar */
.v14-bright .v14-node,
.v14-bright .v14-circuit,
.v14-bright .v14-circle,
.v14-bright .v14-ring { opacity: .5; }


/* ---- NODOS TECH (puntos pulsantes) ---- */
.v14-node {
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--col);
  box-shadow: 0 0 10px rgba(var(--colr), .9), 0 0 22px rgba(var(--colr), .4);
  opacity: .85;
  animation: v14NodePulse var(--nd, 3s) ease-in-out infinite;
}
.v14-node::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 4px; height: 4px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(var(--colr), .5);
  animation: v14NodeRing var(--nd, 3s) ease-out infinite;
}
@keyframes v14NodePulse {
  0%, 100% { transform: scale(.7); opacity: .45; }
  50%      { transform: scale(1.3); opacity: .95; }
}
@keyframes v14NodeRing {
  0%   { width: 4px; height: 4px; opacity: .7; }
  100% { width: 26px; height: 26px; opacity: 0; }
}


/* ---- LÍNEAS DE CIRCUITO (recorrido de luz) ---- */
.v14-circuit {
  position: absolute;
  overflow: hidden;
}
.v14-circuit-h {
  left: -10%;
  width: 120%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--colr), .14), transparent);
}
.v14-circuit-v {
  top: -10%;
  height: 120%;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(var(--colr), .14), transparent);
}
/* Pulso de luz que recorre la línea */
.v14-circuit::before {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: var(--col);
  box-shadow: 0 0 12px rgba(var(--colr), 1), 0 0 24px rgba(var(--colr), .6);
}
.v14-circuit-h::before {
  top: 50%;
  width: var(--len, 160px);
  height: 2px;
  transform: translateY(-50%);
  background: linear-gradient(90deg, transparent, var(--col), transparent);
  animation: v14CircuitH var(--cd, 7s) linear infinite;
}
.v14-circuit-v::before {
  left: 50%;
  height: var(--len, 140px);
  width: 2px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, transparent, var(--col), transparent);
  animation: v14CircuitV var(--cd, 7s) linear infinite;
}
@keyframes v14CircuitH {
  0%   { left: -30%; opacity: 0; }
  12%  { opacity: .9; }
  88%  { opacity: .9; }
  100% { left: 110%; opacity: 0; }
}
@keyframes v14CircuitV {
  0%   { top: -30%; opacity: 0; }
  12%  { opacity: .9; }
  88%  { opacity: .9; }
  100% { top: 110%; opacity: 0; }
}


/* ---- MICRO-CÍRCULOS satélite (anillos finos) ---- */
.v14-circle {
  position: absolute;
  width: var(--sz, 32px);
  height: var(--sz, 32px);
  border-radius: 50%;
  border: 1px solid rgba(var(--colr), .42);
  opacity: .6;
  animation: v14CircleFloat var(--rd, 10s) ease-in-out infinite alternate;
}
.v14-circle::before {
  content: '';
  position: absolute;
  inset: 24%;
  border-radius: 50%;
  border: 1px dashed rgba(var(--colr), .5);
  animation: v14Spin var(--rd, 10s) linear infinite;
}
.v14-circle::after {
  content: '';
  position: absolute;
  top: -2px; left: 50%;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--col);
  box-shadow: 0 0 8px rgba(var(--colr), .9);
  transform-origin: 1.5px calc(var(--sz, 32px) / 2);
  animation: v14Spin var(--rd, 10s) linear infinite;
}
@keyframes v14CircleFloat {
  from { transform: translate3d(-10px, -6px, 0) scale(.95); }
  to   { transform: translate3d(14px, 10px, 0) scale(1.08); }
}
@keyframes v14Spin { to { transform: rotate(360deg); } }


/* ---- AROS HUD GRANDES (cyberpunk, más grandes que v13) ---- */
.v14-ring {
  position: absolute;
  border-radius: 50%;
  mix-blend-mode: screen;
  animation: v14Spin var(--rs, 30s) linear infinite;
}
.v14-bright .v14-ring { mix-blend-mode: multiply; }

.v14-ring-xl { width: 360px; height: 360px; opacity: .22; }
.v14-ring-lg { width: 240px; height: 240px; opacity: .18; }

@media (max-width: 760px) {
  .v14-ring-xl { width: 220px; height: 220px; opacity: .16; }
  .v14-ring-lg { width: 150px; height: 150px; opacity: .13; }
}

/* Aro exterior fino con ticks de 3 colores */
.v14-ring::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(87,201,255,.34);
  background:
    repeating-conic-gradient(from 0deg,
      rgba(87,201,255,0) 0 11deg,
      rgba(87,201,255,.10) 11deg 11.6deg,
      rgba(87,201,255,0) 11.6deg 22deg),
    conic-gradient(from 0deg,
      transparent 0 8deg,
      rgba(87,201,255,.66) 8deg 11deg,
      transparent 11deg 96deg,
      rgba(207,87,255,.58) 96deg 99deg,
      transparent 99deg 200deg,
      rgba(255,138,34,.58) 200deg 203deg,
      transparent 203deg 300deg,
      rgba(87,201,255,.42) 300deg 303deg,
      transparent 303deg 360deg);
}
.v14-bright .v14-ring::before { border-color: rgba(29,119,185,.26); }

/* Aro interior discontinuo girando al revés */
.v14-ring::after {
  content: '';
  position: absolute;
  inset: 20%;
  border-radius: 50%;
  border: 1px dashed rgba(207,87,255,.34);
  animation: v14Spin calc(var(--rs, 30s) * .7) linear infinite reverse;
}

/* Línea radar dentro del aro */
.v14-ring-line {
  position: absolute;
  left: 50%; top: 50%;
  width: 48%; height: 1px;
  transform-origin: left center;
  background: linear-gradient(90deg, transparent, rgba(87,201,255,.7), transparent);
  animation: v14Sweep 6s ease-in-out infinite;
}
.v14-ring-line:nth-child(1) { transform: rotate(28deg); }
.v14-ring-line:nth-child(2) { transform: rotate(160deg); animation-delay: -2.5s;
  background: linear-gradient(90deg, transparent, rgba(207,87,255,.6), transparent); }
@keyframes v14Sweep {
  0%, 100% { opacity: .2; width: 36%; }
  50%      { opacity: .8; width: 52%; }
}

/* Punto orbital del aro */
.v14-ring-dot {
  position: absolute;
  left: 50%; top: 6%;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #ff8a22;
  box-shadow: 0 0 12px rgba(255,138,34,.9);
  transform-origin: 0 calc(180px - 6%);  /* para ring-xl; aprox */
  animation: v14Spin calc(var(--rs, 30s) * .5) linear infinite;
}
.v14-ring-lg .v14-ring-dot { transform-origin: 0 calc(120px - 6%); }


/* ─────────────────────────────────────────────────────────────
   4. MÁS DINÁMICA EN ORBES Y FONDO
   Subimos un poco intensidad de orbes y velocidad del foco.
───────────────────────────────────────────────────────────── */

main section > .motion-orb { opacity: .54 !important; filter: blur(16px) !important; }
main section > .motion-orb.orb-b { opacity: .42 !important; }
main section > .motion-orb.orb-c { opacity: .34 !important; }

.section-dark::after,
.section-navy::after { animation-duration: 30s !important; opacity: .48 !important; }
.section-light::after { animation-duration: 38s !important; opacity: .44 !important; }


/* ─────────────────────────────────────────────────────────────
   5. REDUCED MOTION
───────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .v14-node, .v14-node::after,
  .v14-circuit::before,
  .v14-circle, .v14-circle::before, .v14-circle::after,
  .v14-ring, .v14-ring::after, .v14-ring-line, .v14-ring-dot {
    animation: none !important;
  }
}