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

   Cambios v13:
   1. Logo nuevo (nav + footer) — ajuste de tamaño
   2. outline-terms: sin solapamiento; tamaño por longitud + 3 colores
   3. HUDs cyberpunk: líneas finas, anillos técnicos, sin masa grotesca
   4. Focos de fondo estilo forensilab: 2 conos cónicos rotando lento
   ============================================================ */


/* ─────────────────────────────────────────────────────────────
   1. LOGO NUEVO — cabecera y footer
───────────────────────────────────────────────────────────── */

.logo img {
  height: 64px !important;
  max-width: 420px !important;
  width: auto !important;
  object-fit: contain !important;
  filter: drop-shadow(0 0 14px rgba(87,201,255,.20)) !important;
}
@media (max-width: 1120px) {
  .logo img { height: 56px !important; max-width: 360px !important; }
}
@media (max-width: 760px) {
  .logo img { height: 48px !important; max-width: 280px !important; }
}

.footer-brand img {
  width: 280px !important;
  max-width: 100% !important;
  height: auto !important;
  filter: drop-shadow(0 0 12px rgba(87,201,255,.16)) !important;
}


/* ─────────────────────────────────────────────────────────────
   2. OUTLINE-TERMS — SIN SOLAPAMIENTO
   Layout: flex-wrap. Cada término ocupa su ancho natural.
   Las palabras largas reducen tamaño automáticamente.
───────────────────────────────────────────────────────────── */

.outline-terms {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: baseline !important;
  gap: 6px 30px !important;
  grid-template-columns: none !important;
  margin-top: 30px !important;
  max-width: 1040px !important;
  line-height: 1 !important;
}

.outline-terms .term {
  display: inline-block !important;
  font-weight: 900 !important;
  line-height: .96 !important;
  letter-spacing: .015em !important;
  color: transparent !important;
  white-space: nowrap !important;
  opacity: .80 !important;
  position: relative !important;
  /* tamaño base por defecto (palabras cortas) */
  font-size: clamp(2.1rem, 4.4vw, 3.9rem) !important;
}

/* Tamaño según longitud — palabras largas → letra más pequeña.
   .outline-terms.outline-terms eleva especificidad para ganar al
   font-size de .outline-terms .term heredado. */
.outline-terms.outline-terms .term[data-len="xs"] { font-size: clamp(2.3rem, 4.8vw, 4.2rem) !important; }  /* ≤4  car: IA, EU AI ACT */
.outline-terms.outline-terms .term[data-len="s"]  { font-size: clamp(2.0rem, 4.2vw, 3.7rem) !important; }  /* 5-9 car: PERICIAL */
.outline-terms.outline-terms .term[data-len="m"]  { font-size: clamp(1.7rem, 3.4vw, 3.0rem) !important; }  /* 10-13 car: CIBERSEGURIDAD */
.outline-terms.outline-terms .term[data-len="l"]  { font-size: clamp(1.35rem, 2.7vw, 2.4rem) !important; } /* 14+ car: CONTRAPERICIAL, VERIFICACIÓN MÓVIL */

/* Trazo fino tecnológico (cyberpunk) */
.outline-terms .term {
  -webkit-text-stroke: 1.5px var(--orange) !important;
  text-stroke: 1.5px var(--orange) !important;
}
/* Tres colores rotando: naranja → cyan → magenta.
   .outline-terms.outline-terms eleva especificidad (0,3,0) para ganar
   con seguridad a las reglas :nth-child(odd/even/3) heredadas de v11. */
.outline-terms.outline-terms .term:nth-child(3n+1) {
  -webkit-text-stroke-color: var(--orange) !important;
  text-stroke-color: var(--orange) !important;
}
.outline-terms.outline-terms .term:nth-child(3n+2) {
  -webkit-text-stroke-color: var(--cyan) !important;
  text-stroke-color: var(--cyan) !important;
}
.outline-terms.outline-terms .term:nth-child(3n+3) {
  -webkit-text-stroke-color: var(--magenta) !important;
  text-stroke-color: var(--magenta) !important;
}

/* Subrayado de acento bajo cada término */
.outline-terms .term::after {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  right: 10% !important;
  bottom: -5px !important;
  height: 3px !important;
  border-radius: 2px !important;
  opacity: .42 !important;
}
.outline-terms .term:nth-child(3n+1)::after { background: linear-gradient(90deg, var(--orange),  transparent) !important; }
.outline-terms .term:nth-child(3n+2)::after { background: linear-gradient(90deg, var(--cyan),    transparent) !important; }
.outline-terms .term:nth-child(3n+3)::after { background: linear-gradient(90deg, var(--magenta), transparent) !important; }

@media (max-width: 760px) {
  .outline-terms { gap: 4px 18px !important; }
  .outline-terms .term { -webkit-text-stroke-width: 1.2px !important; opacity: .66 !important; }
  .outline-terms .term[data-len="l"] { font-size: clamp(1.2rem, 5.4vw, 1.8rem) !important; }
}


/* ─────────────────────────────────────────────────────────────
   3. HUDs CYBERPUNK — líneas finas, anillos técnicos
   Anulamos la masa "grotesca" del conic-gradient pesado de v11/v12
   y lo sustituimos por anillos finos + retícula radial + ticks.
───────────────────────────────────────────────────────────── */

/* Tamaños contenidos */
.hud-ring {
  width:  var(--hud-size, 170px) !important;
  height: var(--hud-size, 170px) !important;
  opacity: var(--hud-opacity, .30) !important;
  mix-blend-mode: screen !important;
  filter: drop-shadow(0 0 12px rgba(87,201,255,.22)) !important;
}
.hud-ring.hud-a { --hud-size: 188px; --hud-opacity: .30; }
.hud-ring.hud-b { --hud-size: 138px; --hud-opacity: .24; }
.hud-ring.hud-c { --hud-size: 112px; --hud-opacity: .20; }
.hud-ring.hud-d { --hud-size: 92px;  --hud-opacity: .17; }

/* Anillo exterior: borde fino + tres "ticks" finos girando.
   Reemplaza el conic pesado por un trazo técnico delgado. */
.hud-ring::before {
  border: 1px solid rgba(87,201,255,.40) !important;
  background:
    /* dos arcos finos (ticks) en posiciones técnicas */
    conic-gradient(from 0deg,
      transparent 0 6deg,
      rgba(87,201,255,.70) 6deg 8deg,
      transparent 8deg 90deg,
      rgba(207,87,255,.55) 90deg 92deg,
      transparent 92deg 200deg,
      rgba(255,138,34,.55) 200deg 202deg,
      transparent 202deg 270deg,
      rgba(87,201,255,.45) 270deg 272deg,
      transparent 272deg 360deg
    ) !important;
  animation: hudSpinV11 26s linear infinite !important;
}

/* Anillo interior discontinuo, fino */
.hud-ring::after {
  inset: 22% !important;
  border: 1px dashed rgba(87,201,255,.34) !important;
  background: none !important;
  animation: hudSpinV11 18s linear infinite reverse !important;
}

/* Líneas radiales finas (barrido tipo radar) */
.hud-ring .hud-line {
  height: 1px !important;
  width: 50% !important;
  background: linear-gradient(90deg,
    transparent, rgba(87,201,255,.72), transparent) !important;
}

/* Punto orbital pequeño */
.hud-ring .hud-dot {
  width: 5px !important;
  height: 5px !important;
  background: #65c7f7 !important;
  box-shadow: 0 0 10px rgba(87,201,255,.9) !important;
}

/* Retícula radial fina dentro del aro (marca cyberpunk) */
.hud-ring::before {
  background-image:
    repeating-conic-gradient(from 0deg,
      rgba(87,201,255,.0) 0 14deg,
      rgba(87,201,255,.10) 14deg 14.5deg,
      rgba(87,201,255,.0) 14.5deg 28deg),
    conic-gradient(from 0deg,
      transparent 0 6deg,
      rgba(87,201,255,.70) 6deg 8deg,
      transparent 8deg 90deg,
      rgba(207,87,255,.55) 90deg 92deg,
      transparent 92deg 200deg,
      rgba(255,138,34,.55) 200deg 202deg,
      transparent 202deg 270deg,
      rgba(87,201,255,.45) 270deg 272deg,
      transparent 272deg 360deg) !important;
}

/* Variante en claro: tonos oscuros, sigue siendo fino */
.hud-ring.hud-bright::before {
  border-color: rgba(29,119,185,.30) !important;
}
.hud-ring.hud-bright .hud-line {
  background: linear-gradient(90deg, transparent, rgba(29,119,185,.55), transparent) !important;
}
.hud-ring.hud-bright .hud-dot {
  background: #1d77b9 !important;
  box-shadow: 0 0 8px rgba(29,119,185,.6) !important;
}

/* Retícula de fondo del hud-field: más fina y tenue */
.hud-field::before {
  opacity: .10 !important;
  background:
    linear-gradient(rgba(87,201,255,.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(87,201,255,.12) 1px, transparent 1px) !important;
  background-size: 48px 48px !important;
}


/* ─────────────────────────────────────────────────────────────
   4. FOCOS DE FONDO ESTILO FORENSILAB
   Dos conos cónicos anclados en esquinas que rotan lento, como
   focos iluminando el fondo. Sustituye los beams verticales de v12.
───────────────────────────────────────────────────────────── */

/* Desactivar los beams verticales de v12 (se reemplazan por conos) */
main section > .motion-beam {
  display: none !important;
}

/* El cono de luz va en section::after (la capa de orbes) combinado.
   En forensilab esto se hace con conic-gradient en ::after rotando. */
.section-dark::after,
.section-navy::after {
  inset: -18% !important;
  opacity: .42 !important;
  background:
    /* puntos-escáner */
    radial-gradient(circle at 16% 26%, transparent 0 7%, rgba(87,201,255,.34) 7.2% 7.6%, transparent 7.8% 12%, rgba(255,255,255,.12) 12.2% 12.6%, transparent 12.8%),
    radial-gradient(circle at 86% 22%, transparent 0 6%, rgba(255,138,34,.24) 6.2% 6.6%, transparent 6.8% 11%, rgba(87,201,255,.20) 11.2% 11.6%, transparent 11.8%),
    /* DOS FOCOS cónicos — barren el fondo al rotar */
    conic-gradient(from 0deg at 16% 28%,
      transparent 0 24deg,
      rgba(87,201,255,.46) 25deg 33deg,
      rgba(87,201,255,.12) 33deg 40deg,
      transparent 40deg 112deg,
      rgba(207,87,255,.24) 113deg 119deg,
      transparent 120deg 360deg),
    conic-gradient(from 180deg at 86% 24%,
      transparent 0 30deg,
      rgba(255,138,34,.40) 31deg 39deg,
      rgba(255,138,34,.10) 39deg 46deg,
      transparent 46deg 138deg,
      rgba(87,201,255,.22) 139deg 147deg,
      transparent 148deg 360deg) !important;
  animation: v13FocoRotate 38s linear infinite !important;
  transform-origin: center !important;
  mix-blend-mode: screen !important;
}

/* En claras: focos en multiply para que se vean sobre blanco */
.section-light::after {
  inset: -18% !important;
  opacity: .40 !important;
  background:
    radial-gradient(circle at 16% 26%, transparent 0 7%, rgba(0,117,168,.26) 7.2% 7.6%, transparent 7.8% 12%, rgba(6,17,26,.08) 12.2% 12.6%, transparent 12.8%),
    radial-gradient(circle at 86% 22%, transparent 0 6%, rgba(255,138,34,.24) 6.2% 6.6%, transparent 6.8% 11%, rgba(0,117,168,.16) 11.2% 11.6%, transparent 11.8%),
    conic-gradient(from 0deg at 16% 28%,
      transparent 0 24deg,
      rgba(0,117,168,.32) 25deg 33deg,
      rgba(0,117,168,.08) 33deg 40deg,
      transparent 40deg 112deg,
      rgba(140,40,160,.18) 113deg 119deg,
      transparent 120deg 360deg),
    conic-gradient(from 180deg at 86% 24%,
      transparent 0 30deg,
      rgba(255,138,34,.30) 31deg 39deg,
      rgba(255,138,34,.08) 39deg 46deg,
      transparent 46deg 138deg,
      rgba(0,117,168,.18) 139deg 147deg,
      transparent 148deg 360deg) !important;
  animation: v13FocoRotate 46s linear infinite !important;
  transform-origin: center !important;
  mix-blend-mode: multiply !important;
}

@keyframes v13FocoRotate {
  to { transform: rotate(360deg); }
}

/* HERO: foco grande de barrido (como forensilab) reemplaza spotlight v12 */
.hero::after,
.division-hero::after {
  left: -90% !important;
  bottom: -70% !important;
  width: 280% !important;
  height: 280% !important;
  background: conic-gradient(
    from 0deg at 50% 82%,
    transparent             0deg   72deg,
    rgba(87,201,255,.40)   73deg   76deg,
    rgba(87,201,255,.10)   76deg   82deg,
    transparent            82deg  158deg,
    rgba(207,87,255,.32)  159deg  162deg,
    rgba(207,87,255,.08)  162deg  168deg,
    transparent           168deg  246deg,
    rgba(255,138,34,.30)  247deg  250deg,
    rgba(255,138,34,.08)  250deg  256deg,
    transparent           256deg  360deg
  ) !important;
  filter: blur(6px) !important;
  opacity: .62 !important;
  mix-blend-mode: normal !important;
  animation: v13FocoRotate 26s linear infinite !important;
}


/* ─────────────────────────────────────────────────────────────
   5. REDUCED MOTION
───────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .section-dark::after,
  .section-navy::after,
  .section-light::after,
  .hero::after,
  .division-hero::after,
  .hud-ring::before,
  .hud-ring::after {
    animation: none !important;
  }
}