* {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      user-select: none;
    }

    body, html {
      width: 100%;
      height: 100%;
      background-color: #000000;
      color: #ffffff;
      font-family: 'Inter', sans-serif;
      overflow: hidden;
    }

    /* Atmósfera oscura de estudio para resaltar la sombra de las letras sin destellos */
    .studio-vignette {
      position: fixed;
      inset: 0;
      background: radial-gradient(
        circle at 50% 48%,
        rgba(28, 32, 40, 0.24) 0%,
        rgba(10, 12, 16, 0.12) 42%,
        #000000 78%
      );
      pointer-events: none;
      z-index: 1;
    }

    /* Escenario principal centrado */
    .stage-wrapper {
      position: relative;
      width: 100vw;
      height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 2;
    }

    /* Lienzo SVG con proporción exacta 1:1 respecto a la imagen de referencia */
    .logo-svg {
      width: min(92vw, 860px);
      height: auto;
      max-height: 88vh;
      overflow: visible;
    }

    /* Tipografía individual de DATA & AUTOMATIONS para aparición con sombra sin destellos */
    .sub-char {
      font-family: 'Montserrat', sans-serif;
      font-weight: 400;
      font-size: 23.5px;
      fill: #b4bac4;
      text-anchor: middle;
      will-change: transform, opacity, filter;
      transform-box: fill-box;
      transform-origin: center center;
    }

    /* Barra de controles de estudio */
    .control-bar {
      position: fixed;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 50;
      background: rgba(12, 14, 18, 0.86);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border: 1px solid rgba(255, 255, 255, 0.1);
      box-shadow: 0 20px 50px rgba(0, 0, 0, 0.95);
      transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .control-bar.hidden-ui {
      opacity: 0;
      pointer-events: none;
      transform: translateX(-50%) translateY(28px);
    }

    /* Slider de línea de tiempo */
    input[type="range"].timeline-slider {
      -webkit-appearance: none;
      appearance: none;
      height: 4px;
      background: rgba(255, 255, 255, 0.15);
      border-radius: 999px;
      outline: none;
      cursor: pointer;
    }

    input[type="range"].timeline-slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 13px;
      height: 13px;
      border-radius: 50%;
      background: #ffffff;
      box-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
      cursor: pointer;
      transition: transform 0.15s ease;
    }

    input[type="range"].timeline-slider::-webkit-slider-thumb:hover {
      transform: scale(1.25);
    }

    /* Notificación discreta para Modo Grabación */
    .rec-toast {
      position: fixed;
      top: 18px;
      left: 50%;
      transform: translateX(-50%) translateY(-20px);
      background: rgba(14, 16, 22, 0.9);
      border: 1px solid rgba(255, 255, 255, 0.14);
      padding: 8px 18px;
      border-radius: 999px;
      font-size: 12px;
      color: rgba(255, 255, 255, 0.8);
      pointer-events: none;
      opacity: 0;
      transition: all 0.3s ease;
      z-index: 60;
    }

    .rec-toast.show {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
    }
    /* Ajuste para la sección Nosotros de AUTARIZ. */
    html, body { background:#071625; }
    .studio-vignette { background:radial-gradient(circle at 50% 48%,#15324c 0%,#071625 75%); }
    .stage-wrapper { width:100%; height:100%; }
    .logo-svg { width:min(100%,520px); max-height:100%; }
    .control-bar, .rec-toast { display:none !important; }
    @media (prefers-reduced-motion:reduce) { *, *::before, *::after { animation:none !important; transition:none !important; } }