.autariz-holo-scene {
      position: relative;
      width: 100%;
      max-width: 880px;
      height: 470px;
      display: flex;
      align-items: center;
      justify-content: center;
      perspective: 1250px;
      transform-style: preserve-3d;
      user-select: none;
    }

    /* Canvas de micro-partículas y fotones alrededor del rayo y del cristal */
    .autariz-particles-canvas {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 22;
      mix-blend-mode: screen;
    }

    /* Luz volumétrica azul detrás del nodo de impacto */
    .autariz-volumetric-aura {
      position: absolute;
      left: 24%;
      top: 22%;
      width: 440px;
      height: 270px;
      background:
        radial-gradient(circle at 30% 52%, rgba(56, 152, 255, 0.30) 0%, rgba(29, 104, 232, 0.11) 42%, transparent 72%);
      filter: blur(26px);
      pointer-events: none;
      z-index: 4;
      opacity: 0;
      transition: opacity 1s ease;
      animation: auraBreathe 5s ease-in-out infinite;
    }

    .autariz-holo-scene.is-active .autariz-volumetric-aura {
      opacity: 1;
    }

    @keyframes auraBreathe {
      0%, 100% { transform: scale(1); opacity: 0.88; }
      50% { transform: scale(1.07); opacity: 1; }
    }

    /* ==========================================================================
       1. RAYO / HAZ DE LUZ AZUL MULTICAPA (FIBRA ÓPTICA + NEBLINA + PULSOS)
       ========================================================================== */
    .autariz-beam-svg {
      position: absolute;
      left: -3%;
      top: 6%;
      width: 66%;
      height: 84%;
      z-index: 20;
      pointer-events: none;
      overflow: visible;
      mix-blend-mode: screen;
    }

    /* Trazos animados al aparecer */
    .beam-path-draw {
      stroke-dasharray: 650;
      stroke-dashoffset: 650;
      opacity: 0;
    }

    .autariz-holo-scene.is-active .beam-path-draw {
      stroke-dashoffset: 0;
      opacity: 1;
      transition:
        stroke-dashoffset 1.2s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.35s ease;
    }

    /* Hebras secundarias (humo/filamentos de luz azul en la cresta de la curva) */
    .beam-wisp-1 {
      stroke-dasharray: 560;
      stroke-dashoffset: 560;
      opacity: 0;
    }

    .beam-wisp-2 {
      stroke-dasharray: 560;
      stroke-dashoffset: 560;
      opacity: 0;
    }

    .autariz-holo-scene.is-active .beam-wisp-1 {
      stroke-dashoffset: 0;
      opacity: 0.72;
      transition: stroke-dashoffset 1.45s cubic-bezier(0.16, 1, 0.3, 1) 0.06s, opacity 0.5s ease;
      animation: wispWave1 4.8s ease-in-out infinite alternate;
    }

    .autariz-holo-scene.is-active .beam-wisp-2 {
      stroke-dashoffset: 0;
      opacity: 0.52;
      transition: stroke-dashoffset 1.6s cubic-bezier(0.16, 1, 0.3, 1) 0.12s, opacity 0.6s ease;
      animation: wispWave2 6s ease-in-out infinite alternate;
    }

    @keyframes wispWave1 {
      0% { transform: translateY(0px) scaleY(1); }
      100% { transform: translateY(-3.5px) scaleY(1.03); }
    }

    @keyframes wispWave2 {
      0% { transform: translateY(0px) scaleY(1); }
      100% { transform: translateY(3px) scaleY(0.97); }
    }

    /* Paquetes de fotones de alta energía que viajan por el rayo continuamente */
    .beam-photon-stream {
      stroke-dasharray: 78 560;
      stroke-dashoffset: 638;
      opacity: 0;
    }

    .beam-photon-stream-delayed {
      stroke-dasharray: 42 596;
      stroke-dashoffset: 638;
      opacity: 0;
    }

    .autariz-holo-scene.is-complete .beam-photon-stream {
      opacity: 1;
      animation: photonTravel 2.8s cubic-bezier(0.37, 0, 0.22, 1) infinite;
    }

    .autariz-holo-scene.is-complete .beam-photon-stream-delayed {
      opacity: 0.85;
      animation: photonTravel 2.8s cubic-bezier(0.37, 0, 0.22, 1) 1.4s infinite;
    }

    @keyframes photonTravel {
      0% {
        stroke-dashoffset: 638;
        opacity: 0;
      }
      12% {
        opacity: 1;
      }
      86% {
        opacity: 1;
      }
      100% {
        stroke-dashoffset: -70;
        opacity: 0;
      }
    }

    /* ==========================================================================
       2. PIVOTE 3D CON PERSPECTIVA LATERAL ("DE LADO") Y MOVIMIENTO CONTINUO
       ========================================================================== */
    .autariz-glass-rig {
      position: relative;
      left: 11%;
      top: 0%;
      width: 445px;
      z-index: 14;
      transform-style: preserve-3d;
      opacity: 0;
      transform:
        perspective(1200px)
        rotateY(-30deg)
        rotateX(6deg)
        rotateZ(-1.6deg)
        translate3d(38px, 18px, -45px)
        scale(0.93);
      transition:
        opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.28s,
        transform 1.15s cubic-bezier(0.16, 1, 0.3, 1) 0.28s;
    }

    .autariz-holo-scene.is-active .autariz-glass-rig {
      opacity: 1;
      transform:
        perspective(1200px)
        rotateY(var(--rig-rot-y, -20deg))
        rotateX(var(--rig-rot-x, 2.4deg))
        rotateZ(var(--rig-rot-z, -0.5deg))
        translate3d(var(--rig-tx, 0px), var(--rig-ty, 0px), 0px)
        scale(1);
    }

    /* Movimiento tecnológico orgánico (levitación + micro-balanceo 3D) */
    .autariz-holo-float {
      transform-style: preserve-3d;
      animation: holoFloat3D 5.6s ease-in-out infinite;
    }

    @keyframes holoFloat3D {
      0%, 100% {
        transform: translate3d(0px, 0px, 0px) rotateY(0deg) rotateX(0deg);
      }
      33% {
        transform: translate3d(2px, -7px, 10px) rotateY(1.4deg) rotateX(0.7deg);
      }
      66% {
        transform: translate3d(-1.5px, -3.5px, 5px) rotateY(-0.9deg) rotateX(-0.5deg);
      }
    }

    /* ==========================================================================
       3. CRISTAL ULTRA TRANSPARENTE (REFRACCIÓN ÓPTICA + CANTO ILUMINADO)
       ========================================================================== */
    .autariz-crystal-panel {
      position: relative;
      width: 100%;
      padding: 1.85rem 2.25rem 2.05rem;
      border-radius: 13px;
      transform-style: preserve-3d;

      /* Transparencia muy alta para que la laptop y el fondo se vean nítidamente a través */
      background:
        linear-gradient(
          132deg,
          rgba(110, 178, 255, 0.11) 0%,
          rgba(16, 36, 72, 0.08) 38%,
          rgba(7, 16, 34, 0.05) 74%,
          rgba(56, 138, 255, 0.09) 100%
        );

      /* Desenfoque óptico moderado (5px) para no opacar lo que está detrás */
      backdrop-filter: blur(5px) saturate(145%) brightness(1.06);
      -webkit-backdrop-filter: blur(5px) saturate(145%) brightness(1.06);

      /* Sombras 3D multicapa y bisel especular */
      box-shadow:
        -24px 30px 60px rgba(0, 3, 10, 0.55),
        0 0 38px rgba(37, 132, 255, 0.09),
        inset 0 1px 0 rgba(226, 242, 255, 0.42),
        inset 1.5px 0 0 rgba(165, 216, 255, 0.45),
        inset 0 -1px 0 rgba(96, 165, 250, 0.18),
        inset -1px 0 0 rgba(148, 197, 255, 0.16);
    }

    /* Doble borde de vidrio biselado con brillo más fuerte en la esquina superior izquierda */
    .autariz-crystal-panel::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: 13px;
      padding: 1.25px;
      background: linear-gradient(
        135deg,
        rgba(235, 248, 255, 0.78) 0%,
        rgba(124, 200, 255, 0.48) 24%,
        rgba(71, 145, 235, 0.14) 58%,
        rgba(56, 128, 220, 0.10) 80%,
        rgba(165, 215, 255, 0.38) 100%
      );
      -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      pointer-events: none;
    }

    /* Segundo contorno interno ultra fino (efecto grosor de placa de cristal) */
    .crystal-inner-bevel {
      position: absolute;
      inset: 3px;
      border-radius: 10px;
      border: 1px solid rgba(186, 224, 255, 0.08);
      border-left-color: rgba(147, 205, 255, 0.22);
      border-top-color: rgba(205, 234, 255, 0.16);
      pointer-events: none;
    }

    /* Punto de refracción intensa en el canto izquierdo por donde entra el rayo azul */
    .crystal-edge-refraction {
      position: absolute;
      left: -2px;
      top: 46%;
      width: 4px;
      height: 76px;
      transform: translateY(-50%);
      background: linear-gradient(
        180deg,
        transparent 0%,
        #60b5ff 25%,
        #ffffff 52%,
        #3b9eff 78%,
        transparent 100%
      );
      box-shadow:
        0 0 14px 2px rgba(96, 181, 255, 0.95),
        6px 0 28px 6px rgba(37, 132, 255, 0.65);
      border-radius: 999px;
      pointer-events: none;
      animation: edgeFlarePulse 2.8s ease-in-out infinite;
    }

    @keyframes edgeFlarePulse {
      0%, 100% { opacity: 0.78; height: 70px; }
      50% { opacity: 1; height: 86px; filter: brightness(1.25); }
    }

    /* Barrido especular periódico sobre la superficie del vidrio */
    .crystal-surface-sheen {
      position: absolute;
      inset: 0;
      border-radius: 13px;
      overflow: hidden;
      pointer-events: none;
    }

    .crystal-surface-sheen::before {
      content: "";
      position: absolute;
      top: -30%;
      bottom: -30%;
      left: -130%;
      width: 65%;
      background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(200, 232, 255, 0.03) 35%,
        rgba(255, 255, 255, 0.11) 50%,
        rgba(140, 205, 255, 0.03) 65%,
        transparent 100%
      );
      transform: rotate(22deg);
      animation: periodicGlassSheen 7s cubic-bezier(0.22, 1, 0.36, 1) infinite;
    }

    @keyframes periodicGlassSheen {
      0%, 22% { left: -130%; }
      48%, 100% { left: 165%; }
    }

    /* ==========================================================================
       4. ELEMENTOS INTERNOS CON PROFUNDIDAD PARALLAX 3D (translateZ)
       ========================================================================== */
    .crystal-header-row {
      position: relative;
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      margin-bottom: 0.8rem;
      transform: translateZ(18px);
    }

    .crystal-time {
      font-size: 1.65rem;
      font-weight: 300;
      letter-spacing: 0.01em;
      color: rgba(244, 249, 255, 0.96);
      text-shadow:
        0 2px 12px rgba(0, 8, 24, 0.55),
        0 0 18px rgba(124, 200, 255, 0.18);
    }

    /* Pequeño indicador tecnológico sutil a la derecha de la hora */
    .crystal-telemetry-tag {
      display: inline-flex;
      align-items: center;
      gap: 0.38rem;
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.66rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: rgba(147, 205, 255, 0.78);
      padding: 0.18rem 0.5rem;
      border-radius: 999px;
      background: rgba(15, 40, 82, 0.28);
      border: 1px solid rgba(124, 200, 255, 0.22);
    }

    .telemetry-dot {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: #60b5ff;
      box-shadow: 0 0 8px #60b5ff;
      animation: dotBlink 1.8s ease-in-out infinite;
    }

    @keyframes dotBlink {
      0%, 100% { opacity: 0.45; transform: scale(0.9); }
      50% { opacity: 1; transform: scale(1.25); }
    }

    /* Línea divisoria horizontal con pulso láser viajero */
    .crystal-divider-track {
      position: relative;
      width: 100%;
      height: 1px;
      background: linear-gradient(
        90deg,
        rgba(165, 216, 255, 0.72) 0%,
        rgba(124, 192, 255, 0.42) 68%,
        rgba(124, 192, 255, 0.10) 100%
      );
      margin-bottom: 1.35rem;
      overflow: hidden;
      transform: translateZ(14px);
    }

    .crystal-divider-scanner {
      position: absolute;
      top: 0;
      left: -35%;
      width: 35%;
      height: 100%;
      background: linear-gradient(90deg, transparent, #ffffff, #60b5ff, transparent);
      box-shadow: 0 0 10px #7cc8ff;
      animation: dividerLaserScan 3.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    }

    @keyframes dividerLaserScan {
      0% { left: -35%; opacity: 0; }
      15% { opacity: 1; }
      85% { opacity: 1; }
      100% { left: 105%; opacity: 0; }
    }

    /* Fila principal del estado: Orbe de Check + "Informe listo" */
    .crystal-main-status {
      position: relative;
      display: flex;
      align-items: center;
      gap: 1.15rem;
      margin-bottom: 1.05rem;
      transform: translateZ(26px);
    }

    /* Orbe energético del Check con doble anillo y ondas de choque (ripples) */
    .crystal-orb-container {
      position: relative;
      width: 48px;
      height: 48px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    /* Onda expansiva que se dispara cada vez que un pulso de luz llega al check */
    .orb-shockwave {
      position: absolute;
      inset: 0;
      border-radius: 50%;
      border: 1.5px solid rgba(124, 200, 255, 0.75);
      opacity: 0;
      pointer-events: none;
    }

    .autariz-holo-scene.is-complete .orb-shockwave {
      animation: orbRippleWave 2.8s cubic-bezier(0.16, 1, 0.3, 1) 0.55s infinite;
    }

    @keyframes orbRippleWave {
      0% {
        transform: scale(0.92);
        opacity: 0.85;
      }
      70% {
        transform: scale(1.62);
        opacity: 0;
      }
      100% {
        transform: scale(1.65);
        opacity: 0;
      }
    }

    /* Aro tecnológico segmentado exterior que gira lentamente */
    .orb-tech-ring {
      position: absolute;
      inset: -4px;
      border-radius: 50%;
      border: 1px dashed rgba(147, 208, 255, 0.42);
      animation: slowTechOrbit 12s linear infinite;
      pointer-events: none;
    }

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

    /* Núcleo circular del check con neón azul intenso idéntico a la referencia */
    .crystal-orb-core {
      position: relative;
      width: 46px;
      height: 46px;
      border-radius: 50%;
      border: 2px solid #9bd4ff;
      background: radial-gradient(
        circle at 38% 35%,
        rgba(72, 164, 255, 0.42) 0%,
        rgba(18, 52, 108, 0.45) 62%,
        rgba(10, 28, 64, 0.65) 100%
      );
      box-shadow:
        0 0 18px rgba(72, 164, 255, 0.95),
        0 0 38px rgba(37, 132, 255, 0.62),
        inset 0 0 14px rgba(165, 220, 255, 0.72);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.45s ease;
    }

    /* Spinner rápido durante la fase "Preparando informe" */
    .orb-prep-spinner {
      position: absolute;
      inset: 6px;
      border-radius: 50%;
      border: 1.8px solid rgba(147, 197, 253, 0.16);
      border-top-color: #e0f2fe;
      border-right-color: #60b5ff;
      opacity: 0;
      animation: fastSpinner 0.75s linear infinite;
      transition: opacity 0.25s ease;
    }

    .autariz-holo-scene.is-preparing .orb-prep-spinner {
      opacity: 1;
    }

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

    /* Checkmark SVG luminoso */
    .orb-check-icon {
      width: 21px;
      height: 21px;
      color: #f0f9ff;
      filter: drop-shadow(0 0 7px rgba(147, 210, 255, 0.95));
      transition:
        opacity 0.3s ease,
        transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .autariz-holo-scene.is-preparing .orb-check-icon {
      opacity: 0;
      transform: scale(0.35) rotate(-12deg);
    }

    .crystal-status-title {
      font-size: 1.32rem;
      font-weight: 400;
      letter-spacing: 0.01em;
      color: #f8fbff;
      text-shadow:
        0 2px 10px rgba(0, 8, 22, 0.65),
        0 0 16px rgba(96, 178, 255, 0.22);
    }

    /* Barra de progreso activa durante la preparación */
    .crystal-prep-progress {
      margin-left: 4.15rem;
      width: 68%;
      height: 0px;
      opacity: 0;
      border-radius: 999px;
      background: rgba(148, 184, 235, 0.16);
      overflow: hidden;
      transition: all 0.28s ease;
      transform: translateZ(18px);
    }

    .autariz-holo-scene.is-preparing .crystal-prep-progress {
      height: 3.5px;
      opacity: 1;
      margin-bottom: 0.65rem;
    }

    .crystal-prep-fill {
      height: 100%;
      width: 0%;
      border-radius: 999px;
      background: linear-gradient(90deg, #2584ff, #7cc8ff, #ffffff);
      box-shadow: 0 0 12px rgba(124, 200, 255, 0.95);
    }

    /* 3 Barras inferiores con animación de telemetría / flujo de datos */
    .crystal-data-bars {
      padding-left: 4.15rem;
      display: flex;
      flex-direction: column;
      gap: 0.58rem;
      transform: translateZ(20px);
    }

    .data-bar-track {
      position: relative;
      height: 6.5px;
      border-radius: 999px;
      background: rgba(148, 187, 238, 0.26);
      overflow: hidden;
      transform-origin: left center;
      transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.45s ease;
    }

    /* Brillo de datos recorriendo cada barra */
    .data-bar-track::after {
      content: "";
      position: absolute;
      inset: 0;
      transform: translateX(-100%);
      background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(147, 210, 255, 0.45) 50%,
        transparent 100%
      );
      animation: dataBarShimmer 3.4s ease-in-out infinite;
    }

    .bar-len-1 {
      width: 85%;
    }
    .bar-len-2 {
      width: 66%;
      transition-delay: 0.08s;
    }
    .bar-len-2::after {
      animation-delay: 0.45s;
    }
    .bar-len-3 {
      width: 44%;
      transition-delay: 0.16s;
    }
    .bar-len-3::after {
      animation-delay: 0.9s;
    }

    @keyframes dataBarShimmer {
      0%, 25% { transform: translateX(-100%); }
      75%, 100% { transform: translateX(100%); }
    }

    .autariz-holo-scene.is-preparing .data-bar-track {
      opacity: 0.22;
      transform: scaleX(0.55);
    }

    /* Adaptación responsiva en móvil */
    @media (max-width: 680px) {
      .autariz-holo-scene {
        height: 360px;
      }
      .autariz-glass-rig {
        left: 5%;
        width: 315px;
      }
      .autariz-crystal-panel {
        padding: 1.35rem 1.5rem 1.5rem;
      }
      .crystal-time {
        font-size: 1.3rem;
      }
      .crystal-status-title {
        font-size: 1.08rem;
      }
      .crystal-orb-container,
      .crystal-orb-core {
        width: 38px;
        height: 38px;
      }
      .crystal-data-bars,
      .crystal-prep-progress {
        padding-left: 3.35rem;
        margin-left: 0;
      }
      .autariz-beam-svg {
        left: -12%;
        width: 74%;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .autariz-holo-float,
      .beam-photon-stream,
      .beam-photon-stream-delayed,
      .crystal-divider-scanner,
      .orb-shockwave,
      .orb-tech-ring {
        animation: none !important;
      }
    }

@media (prefers-reduced-motion:reduce){.autariz-holo-scene *,.autariz-holo-scene *::before,.autariz-holo-scene *::after{animation:none!important;transition:none!important}}