/* ============================================================
   CIBERPRO — app-v12.css
   Patch sobre app-v11.css. Cargar DESPUÉS de app-v11.css.

   Cambios v12:
   1. Heroes: fondo claro potente, spotlights giratorios 3 focos
   2. motion-beam: conos de luz verticales barriendo desde abajo
   3. hud-ring: más pequeños y elegantes (forensilab style)
   4. Secciones oscuras: orbes magenta + cyan + naranja muy difuminados
   5. Secciones claras: orbes suaves para no quedar planas
   6. Acentos tipográficos: .accent-m (magenta) .accent-c (cyan) .accent-o (naranja)
   ============================================================ */

/* ─────────────────────────────────────────────────────────────
   0. VARIABLES AMPLIADAS
───────────────────────────────────────────────────────────── */
:root {
  --magenta:      #cf57ff;
  --magenta-mid:  rgba(207,87,255,.55);
  --magenta-soft: rgba(207,87,255,.18);
  --cyan:         #57c9ff;
  --cyan-soft:    rgba(87,201,255,.18);
  --orange:       #ff8a22;
  --orange-soft:  rgba(255,138,34,.16);
}


/* ─────────────────────────────────────────────────────────────
   1. HERO — FONDO CLARO + SPOTLIGHTS
───────────────────────────────────────────────────────────── */

/* Base clara y luminosa */
.hero,
.division-hero,
.hero-home,
.hero-forensics,
.hero-iaudit,
.hero-cybersecurity,
.hero-intelligence,
.hero-mediatech,
.hero-lab,
.hero-contact {
  background:
    radial-gradient(ellipse 78% 48% at 4% 6%,  rgba(87,201,255,.14),  transparent 42%),
    radial-gradient(ellipse 62% 52% at 96% 8%,  rgba(207,87,255,.10),  transparent 38%),
    radial-gradient(ellipse 55% 44% at 50% 96%, rgba(255,138,34,.09),  transparent 34%),
    linear-gradient(170deg, #f9fcff 0%, #edf4fc 42%, #f4f9ff 100%) !important;
  color: #07111f !important;
  min-height: 760px !important;
  overflow: hidden !important;
}

/* Colores de texto en hero claro */
.hero h1, .hero h2,
.division-hero h1, .division-hero h2 {
  color: #06152a !important;
  text-shadow: none !important;
}
.hero p, .division-hero p {
  color: #2e4a68 !important;
}
.hero .eyebrow, .division-hero .eyebrow {
  color: var(--orange) !important;
}
.hero .btn-outline, .division-hero .btn-outline {
  border-color: rgba(6,21,42,.20) !important;
  background: rgba(255,255,255,.85) !important;
  color: #06152a !important;
}
.hero .btn-outline:hover, .division-hero .btn-outline:hover {
  border-color: var(--orange) !important;
  background: #fff6ed !important;
}

/* Retícula de puntos — versión clara */
.hero::before,
.division-hero::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background-image:
    radial-gradient(circle at 50% 50%, rgba(87,201,255,.12) 0 1.2px, transparent 1.5px),
    linear-gradient(90deg, rgba(29,119,185,.07) 1px, transparent 1px),
    linear-gradient(0deg,  rgba(29,119,185,.06) 1px, transparent 1px) !important;
  background-size: 64px 64px, 64px 64px, 64px 64px !important;
  opacity: 1 !important;
  animation: hudDrift 28s linear infinite !important;
  z-index: -4 !important;
  filter: none !important;
}

/* ── SPOTLIGHTS GIRATORIOS — 3 focos (cyan · magenta · naranja) ──
   Elemento 3× el tamaño del hero, con el origen del cónico justo en
   el borde inferior del hero. Al rotar, los tres focos barren
   hacia arriba como focos de escenario apuntando al cielo.           */
.hero::after,
.division-hero::after {
  content: '' !important;
  position: absolute !important;
  left:   -100% !important;
  bottom: -60%  !important;
  width:  300%  !important;
  height: 300%  !important;
  /* Geometría: origin "at 50% 80%" → bottom-center del hero visible */
  background: conic-gradient(
    from 0deg at 50% 80%,
    transparent            0deg  76deg,
    rgba(87,201,255,.52)  77deg  78.5deg,    /* foco cyan */
    rgba(87,201,255,.16)  78.5deg 82deg,
    transparent           82deg  162deg,
    rgba(207,87,255,.44) 163deg 164.5deg,    /* foco magenta */
    rgba(207,87,255,.13) 164.5deg 168deg,
    transparent          168deg  250deg,
    rgba(255,138,34,.38) 251deg 252.5deg,    /* foco naranja */
    rgba(255,138,34,.11) 252.5deg 256deg,
    transparent          256deg  360deg
  ) !important;
  filter: blur(5px) !important;
  animation: v12SpotlightSpin 20s linear infinite !important;
  z-index: -2 !important;
  pointer-events: none !important;
  opacity: .78 !important;
}

@keyframes v12SpotlightSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Eliminar los container::before/after heredados de versiones anteriores */
.hero .container::before,
.hero .container::after,
.division-hero .container::before,
.division-hero .container::after {
  display: none !important;
}

/* Partículas en hero claro — color oscuro visible sobre blanco */
.hero .hero-particles .particle,
.division-hero .hero-particles .particle {
  background: rgba(29,119,185,.42) !important;
  box-shadow: 0 0 14px rgba(87,201,255,.38) !important;
}

/* outline-terms: colores ya definidos en v10/v11, solo reforzar */
.hero .outline-terms .term,
.division-hero .outline-terms .term {
  opacity: .78 !important;
}

/* tech-stars en hero: un poco más visible */
.hero .tech-stars,
.division-hero .tech-stars {
  opacity: .18 !important;
}


/* ─────────────────────────────────────────────────────────────
   2. MOTION-BEAM — CONOS DE LUZ VERTICALES (SPOTLIGHTS)
───────────────────────────────────────────────────────────── */

main section > .motion-beam {
  position:       absolute !important;
  pointer-events: none !important;
  z-index:        0 !important;
  bottom:         0 !important;
  top:            auto !important;
  left:           16% !important;
  width:          180px !important;
  height:         80% !important;
  background:
    linear-gradient(
      to top,
      rgba(87,201,255,.52) 0%,
      rgba(87,201,255,.22) 38%,
      rgba(87,201,255,.06) 68%,
      transparent          100%
    ) !important;
  border-radius: 0 0 90px 90px !important;
  filter:          blur(18px) !important;
  transform:       rotate(-16deg) !important;
  transform-origin: bottom center !important;
  opacity:         .62 !important;
  animation:       v12SpotSwingA 10s ease-in-out infinite !important;
}

main section > .motion-beam.beam-b {
  left:       auto !important;
  right:      12% !important;
  background:
    linear-gradient(
      to top,
      rgba(207,87,255,.46) 0%,
      rgba(207,87,255,.18) 38%,
      rgba(207,87,255,.05) 68%,
      transparent          100%
    ) !important;
  transform:  rotate(14deg) !important;
  animation:  v12SpotSwingB 13s ease-in-out infinite !important;
  display:    block !important;  /* visible en todas las pantallas */
}

/* En secciones claras: colores más oscuros / saturados para contraste */
.section-light > .motion-beam {
  background: linear-gradient(
    to top,
    rgba(29,119,185,.38) 0%,
    rgba(87,201,255,.14) 40%,
    transparent 80%
  ) !important;
  opacity: .42 !important;
}
.section-light > .motion-beam.beam-b {
  background: linear-gradient(
    to top,
    rgba(207,87,255,.30) 0%,
    rgba(207,87,255,.10) 40%,
    transparent 80%
  ) !important;
  opacity: .34 !important;
}

/* Hero: focos más vivos (fondo claro necesita más contraste) */
.hero > .motion-beam {
  opacity: .50 !important;
}
.hero > .motion-beam.beam-b {
  opacity: .44 !important;
}

@keyframes v12SpotSwingA {
  0%,  100% { transform: rotate(-26deg); opacity: .36; }
  50%       { transform: rotate(20deg);  opacity: .72; }
}
@keyframes v12SpotSwingB {
  0%,  100% { transform: rotate(24deg);  opacity: .30; }
  50%       { transform: rotate(-22deg); opacity: .66; }
}


/* ─────────────────────────────────────────────────────────────
   3. HUD-RING — MÁS PEQUEÑOS, MÁS ELEGANTES
   Reducimos de 240 → 180 px (como forensilab.com)
───────────────────────────────────────────────────────────── */

/* Tamaño base reducido */
.hud-ring {
  width:        var(--hud-size, 185px) !important;
  height:       var(--hud-size, 185px) !important;
  opacity:      var(--hud-opacity, .22) !important;
  filter:       drop-shadow(0 0 18px rgba(87,201,255,.20)) !important;
  mix-blend-mode: screen !important;
}
.hud-ring.hud-bright {
  mix-blend-mode: multiply !important;
  opacity: var(--hud-opacity, .16) !important;
}

/* Tamaños específicos por posición */
.hud-ring.hud-a { --hud-size: 195px; --hud-opacity: .24; top:  6%; left: 3%; }
.hud-ring.hud-b { --hud-size: 148px; --hud-opacity: .18; right: 4%; top: 14%; }
.hud-ring.hud-c { --hud-size: 122px; --hud-opacity: .16; left: 8%; bottom: 8%; }
.hud-ring.hud-d { --hud-size: 105px; --hud-opacity: .14; right: 6%; bottom: 10%; }

/* Anillos más finos y elegantes */
.hud-ring::before {
  border-width: 1px !important;
  border-color: rgba(87,201,255,.38) !important;
  background:
    radial-gradient(circle at 50% 50%,
      transparent 0 27%,
      rgba(87,201,255,.16) 28% 29%,
      transparent 30% 44%,
      rgba(255,255,255,.10) 45% 46%,
      transparent 47% 62%,
      rgba(207,87,255,.12) 63% 64%,
      transparent 65%
    ),
    conic-gradient(
      from 0deg,
      transparent       0   12deg,
      rgba(87,201,255,.58) 13deg 22deg,
      transparent       23deg  76deg,
      rgba(255,255,255,.18) 77deg 84deg,
      transparent       85deg 148deg,
      rgba(207,87,255,.36) 149deg 160deg,
      transparent      161deg 244deg,
      rgba(255,138,34,.28) 245deg 254deg,
      transparent      255deg 360deg
    ) !important;
  animation-duration: calc(20s + var(--spin, 0s)) !important;
}

.hud-ring::after {
  border-color: rgba(87,201,255,.20) !important;
  animation-duration: 12s !important;
}

/* Línea de barrido más viva */
.hud-ring .hud-line {
  background: linear-gradient(90deg,
    transparent,
    rgba(87,201,255,.80),
    rgba(207,87,255,.40),
    transparent
  ) !important;
  height: 1px !important;
}

/* Dot orbiting con glow magenta/cyan alternado */
.hud-ring .hud-dot {
  background: #65c7f7 !important;
  box-shadow:  0 0 14px rgba(87,201,255,.88), 0 0 28px rgba(207,87,255,.28) !important;
  width: 6px !important;
  height: 6px !important;
}

/* En secciones claras: rings más oscuros/discretos */
.hud-ring.hud-bright::before {
  border-color: rgba(29,119,185,.22) !important;
  background:
    radial-gradient(circle at 50% 50%,
      transparent 0 27%,
      rgba(29,119,185,.14) 28% 29%,
      transparent 30% 44%,
      rgba(6,21,42,.08) 45% 46%,
      transparent 47%
    ),
    conic-gradient(
      from 0deg,
      transparent       0   12deg,
      rgba(29,119,185,.38) 13deg 22deg,
      transparent       23deg  76deg,
      rgba(6,21,42,.14) 77deg 84deg,
      transparent       85deg 360deg
    ) !important;
}
.hud-ring.hud-bright .hud-line {
  background: linear-gradient(90deg,
    transparent, rgba(29,119,185,.58), transparent
  ) !important;
}
.hud-ring.hud-bright .hud-dot {
  background: #1d77b9 !important;
  box-shadow: 0 0 12px rgba(29,119,185,.60) !important;
}


/* ─────────────────────────────────────────────────────────────
   4. SECCIONES OSCURAS — ORBES MAGENTA + CYAN + NARANJA
───────────────────────────────────────────────────────────── */

.section-dark::after,
.section-navy::after {
  background:
    radial-gradient(circle at 14% 22%,  rgba(207,87,255,.22),  transparent 24%),
    radial-gradient(circle at 78% 68%,  rgba(87,201,255,.20),  transparent 22%),
    radial-gradient(circle at 52% 86%,  rgba(255,138,34,.18),  transparent 20%),
    radial-gradient(circle at 72% 16%,  rgba(87,201,255,.15),  transparent 18%),
    radial-gradient(circle at 26% 74%,  rgba(207,87,255,.14),  transparent 16%),
    radial-gradient(circle at 88% 44%,  rgba(255,138,34,.12),  transparent 16%),
    conic-gradient(from 0deg at 62% 28%,
      transparent, rgba(87,201,255,.08), transparent 22%),
    conic-gradient(from 180deg at 32% 72%,
      transparent, rgba(207,87,255,.06), transparent 18%) !important;
  opacity:   .88 !important;
  animation: v12OrbDrift 46s linear infinite !important;
  mix-blend-mode: screen !important;
}

/* Grid sutil mejorado */
.section-dark::before,
.section-navy::before {
  background-image:
    linear-gradient(90deg, rgba(87,201,255,.10) 1px, transparent 1px),
    linear-gradient(0deg,  rgba(87,201,255,.08) 1px, transparent 1px),
    radial-gradient(circle at 50% 50%, rgba(87,201,255,.10) 0 1px, transparent 2px) !important;
  background-size: 82px 82px, 82px 82px, 26px 26px !important;
  opacity: .32 !important;
}

@keyframes v12OrbDrift {
  0%   { transform: rotate(0deg)   scale(1); }
  33%  { transform: rotate(120deg) scale(1.04); }
  66%  { transform: rotate(240deg) scale(0.97); }
  100% { transform: rotate(360deg) scale(1); }
}


/* ─────────────────────────────────────────────────────────────
   5. SECCIONES CLARAS — ORBES SUAVES (no queden planas)
───────────────────────────────────────────────────────────── */

.section-light::after {
  background:
    radial-gradient(circle at 10% 18%,  rgba(207,87,255,.10),  transparent 20%),
    radial-gradient(circle at 84% 74%,  rgba(87,201,255,.09),  transparent 18%),
    radial-gradient(circle at 52% 88%,  rgba(255,138,34,.08),  transparent 16%),
    radial-gradient(circle at 76% 12%,  rgba(87,201,255,.07),  transparent 14%),
    conic-gradient(from 0deg at 68% 26%,
      transparent, rgba(87,201,255,.07), transparent 20%) !important;
  mix-blend-mode: multiply !important;
  opacity: .55 !important;
  animation: v12OrbDrift 58s linear infinite !important;
}

/* hud-field grid en secciones claras: más discreto */
.section-light .hud-field::before {
  opacity: .08 !important;
}


/* ─────────────────────────────────────────────────────────────
   6. TECH-STARS — MÁS VISIBLES Y CON TRES COLORES
───────────────────────────────────────────────────────────── */

main section > .tech-stars {
  background-image:
    radial-gradient(circle, rgba(87,201,255,.55)  0 1.2px, transparent 1.6px),
    radial-gradient(circle, rgba(207,87,255,.42)  0 1.1px, transparent 1.5px),
    radial-gradient(circle, rgba(255,138,34,.38)  0 1.0px, transparent 1.4px) !important;
  background-size:     168px 168px, 234px 234px, 204px 204px !important;
  background-position: 0 0, 112px 78px, 56px 136px !important;
  opacity: .26 !important;
}

.section-light > .tech-stars {
  opacity: .12 !important;
  background-image:
    radial-gradient(circle, rgba(29,119,185,.42)  0 1.2px, transparent 1.6px),
    radial-gradient(circle, rgba(140,40,160,.28)  0 1.1px, transparent 1.5px),
    radial-gradient(circle, rgba(180,80,0,.28)    0 1.0px, transparent 1.4px) !important;
}

/* En hero claro: estrellitas visibles pero sin competir con el texto */
.hero > .tech-stars,
.division-hero > .tech-stars {
  opacity: .20 !important;
  animation: starDrift 40s linear infinite !important;
}


/* ─────────────────────────────────────────────────────────────
   7. MOTION-ORB — TRES COLORES (cyan · magenta · naranja)
───────────────────────────────────────────────────────────── */

main section > .motion-orb {
  background: radial-gradient(circle at 44% 42%,
    rgba(87,201,255,.22), rgba(87,201,255,.08) 42%, transparent 72%) !important;
  filter:  blur(14px) !important;
  opacity: .48 !important;
}
main section > .motion-orb.orb-b {
  background: radial-gradient(circle at 44% 42%,
    rgba(207,87,255,.20), rgba(255,138,34,.08) 44%, transparent 72%) !important;
  opacity: .38 !important;
}
main section > .motion-orb.orb-c {
  background: radial-gradient(circle at 44% 42%,
    rgba(255,138,34,.20), rgba(87,201,255,.07) 44%, transparent 72%) !important;
  opacity: .30 !important;
}

.section-light > .motion-orb {
  mix-blend-mode: multiply !important;
  opacity: .18 !important;
}


/* ─────────────────────────────────────────────────────────────
   8. ACENTOS TIPOGRÁFICOS — CLASES PARA PALABRAS CLAVE
   Uso en PHP: <span class="accent-m">palabra</span>
───────────────────────────────────────────────────────────── */

/* Magenta */
.accent-m,
h1 .accent-m, h2 .accent-m, h3 .accent-m,
.section-head h2 .accent-m, .split h2 .accent-m {
  color: var(--magenta) !important;
  position: relative;
  display: inline;
}
/* Cyan */
.accent-c,
h1 .accent-c, h2 .accent-c, h3 .accent-c,
.section-head h2 .accent-c, .split h2 .accent-c {
  color: var(--cyan) !important;
  position: relative;
  display: inline;
}
/* Naranja (alias de .accent existente) */
.accent-o,
h1 .accent-o, h2 .accent-o, h3 .accent-o {
  color: var(--orange) !important;
  position: relative;
  display: inline;
}

/* Subrayado luminoso bajo las palabras clave */
h1 .accent-m::after, h2 .accent-m::after, h3 .accent-m::after,
h1 .accent-c::after, h2 .accent-c::after, h3 .accent-c::after,
h1 .accent-o::after, h2 .accent-o::after, h3 .accent-o::after,
h1 .accent::after,   h2 .accent::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 3px;
  border-radius: 2px;
  pointer-events: none;
}
h1 .accent-m::after, h2 .accent-m::after, h3 .accent-m::after {
  background: linear-gradient(90deg, var(--magenta), rgba(207,87,255,.0));
  opacity: .7;
}
h1 .accent-c::after, h2 .accent-c::after, h3 .accent-c::after {
  background: linear-gradient(90deg, var(--cyan), rgba(87,201,255,.0));
  opacity: .7;
}
h1 .accent-o::after, h2 .accent-o::after, h3 .accent-o::after,
h1 .accent::after,   h2 .accent::after {
  background: linear-gradient(90deg, var(--orange), rgba(255,138,34,.0));
  opacity: .65;
}

/* Eyebrow variantes */
.eyebrow.eyebrow-m { color: var(--magenta) !important; }
.eyebrow.eyebrow-c { color: var(--cyan) !important; }

/* Card top-border variantes */
.card.card-m::before { background: linear-gradient(90deg, var(--magenta), var(--cyan))   !important; }
.card.card-c::before { background: linear-gradient(90deg, var(--cyan),    var(--magenta)) !important; }
.card.card-o::before { background: linear-gradient(90deg, var(--orange),  var(--cyan))   !important; }


/* ─────────────────────────────────────────────────────────────
   9. AJUSTE section-anchor en hero claro
───────────────────────────────────────────────────────────── */

.hero .section-anchor,
.division-hero .section-anchor {
  color: var(--orange) !important;
  border-left-color: var(--orange) !important;
}
.hero .section-anchor:hover,
.division-hero .section-anchor:hover {
  color: #06152a !important;
}


/* ─────────────────────────────────────────────────────────────
   10. ALTERNANCIA CONFIRMADA post-hero
   El primer section-light después del hero mantiene visibilidad.
───────────────────────────────────────────────────────────── */

/* Borde superior sutil que separa hero claro de sección clara siguiente */
.section-light:first-of-type,
section.section-light + section.section-light {
  border-top: 1px solid rgba(87,201,255,.10);
}


/* ─────────────────────────────────────────────────────────────
   11. RESPONSIVE
───────────────────────────────────────────────────────────── */

@media (max-width: 980px) {
  .hero > .motion-beam,
  .division-hero > .motion-beam {
    width: 140px !important;
    opacity: .44 !important;
  }
}

@media (max-width: 760px) {
  /* Spotlights más suaves en móvil */
  .hero::after,
  .division-hero::after {
    opacity: .52 !important;
    filter: blur(8px) !important;
  }
  /* Beams visibles en móvil pero sin beam-b */
  main section > .motion-beam {
    width: 120px !important;
    opacity: .42 !important;
  }
  main section > .motion-beam.beam-b {
    display: none !important;
  }
  /* HUDs pequeños en móvil */
  .hud-ring.hud-b,
  .hud-ring.hud-c,
  .hud-ring.hud-d {
    display: none !important;
  }
  .hud-ring {
    --hud-size: 140px !important;
    --hud-opacity: .14 !important;
  }
  /* Orbes reducidos */
  main section > .motion-orb {
    opacity: .22 !important;
  }
}


/* ─────────────────────────────────────────────────────────────
   12. REDUCED MOTION
───────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .hero::after,
  .division-hero::after,
  .hero::before,
  .division-hero::before,
  main section > .motion-beam,
  main section > .tech-stars,
  .section-dark::after,
  .section-navy::after,
  .section-light::after,
  .hud-ring::before,
  .hud-ring::after,
  .hud-ring .hud-line,
  .hud-ring .hud-dot,
  .hud-field::before,
  .motion-orb,
  .particle {
    animation: none !important;
  }
  .hero::after,
  .division-hero::after {
    opacity: .30 !important;
    filter: none !important;
  }
}