/* ============================
       Estilos Globales Radicales
    ============================ */
    :root {
      --color-primary: #00ffcc;
      --color-ink: #0A192F;
      --color-light: #CCD6F6;
      --color-gray: white;
      --color-accent: #b7ed3a; /* Violeta para el botón del chatbot */
    }

    html {
      /* El color de fondo se mueve al overlay para no tapar el canvas */
      scroll-padding-top: 80px;
    }
    body {
      color: var(--color-gray);
      font-family: 'Manrope', sans-serif;
    }
    
    .font-mono {
      font-family: 'Space Grotesk', monospace!important;
    }
    .text-primary{
      color: var(--color-primary);
    }
    #canvas-bg {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
      opacity: 0.3;
    }

    .scanline-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -2; /* Behind canvas */
      pointer-events: none;
      background-color: var(--color-ink);
      background-image: repeating-linear-gradient(
        to bottom,
        transparent,
        transparent 1px,
        rgba(0, 22, 38, 0.5) 1px,
        rgba(0, 22, 38, 0.5) 2px
      );
    }

    .glitch-text:hover {
      animation: glitch 0.4s infinite;
    }
    
    .btn-cyber {
      background-color: transparent;
      border: 1px solid var(--color-primary);
      color: var(--color-primary);
      padding: 0.75rem 1.5rem;
      font-family: 'Chakra Petch', monospace;
      text-transform: uppercase;
      letter-spacing: 2px;
      position: relative;
      transition: all 0.3s ease;
      display: inline-block;
    }
    .btn-cyber::before {
      content: '';
      position: absolute;
      top: 3px;
      left: 3px;
      width: 100%;
      height: 100%;
      background-color: var(--color-primary);
      z-index: -1;
      transition: transform 0.3s ease;
      transform: scale(0);
      transform-origin: top left;
    }
    .btn-cyber:hover {
      color: var(--color-ink);
      box-shadow: 0 0 15px rgba(0, 255, 204, 0.5);
    }
    .btn-cyber:hover::before {
      transform: scale(1);
    }

    .card-cyber {
      background-color: rgba(10, 25, 47, 0.5);
      border: 1px solid rgba(0, 255, 204, 0.2);
      backdrop-filter: blur(10px);
      transition: all 0.3s ease;
      height: 100%;
    }
    .card-cyber:hover {
      border-color: rgba(0, 255, 204, 0.5);
      transform: translateY(-5px);
      box-shadow: 0 10px 20px rgba(0,0,0,0.2);
    }

    .nav-link.active {
      color: var(--color-primary);
      text-shadow: 0 0 5px var(--color-primary);
    }

    /* Input Fields */
    .input-cyber {
        background-color: rgba(10, 25, 47, 0.8);
        border: 1px solid rgba(0, 255, 204, 0.3);
        color: var(--color-light);
        padding: 0.75rem 1rem;
        width: 100%;
        font-family: 'Manrope', sans-serif;
        transition: all 0.3s ease;
    }
    .input-cyber:focus {
        outline: none;
        border-color: var(--color-primary);
        box-shadow: 0 0 10px rgba(0, 255, 204, 0.3);
    }

    /* Keyframes */
    @keyframes glitch {
      0%, 100% { transform: translate(0, 0); opacity: 1; }
      10% { transform: translate(-2px, 2px); }
      20% { transform: translate(2px, -2px); }
      30% { transform: translate(-2px, -2px); }
      40% { transform: translate(2px, 2px); }
      50% { transform: translate(0, 0); opacity: 0.8; }
      60% { transform: translate(-1px, 1px); }
      70% { transform: translate(1px, -1px); }
      80% { transform: translate(-1px, -1px); }
      90% { transform: translate(1px, 1px); }
    }

    @keyframes fade-in-up {
      from { opacity: 0; transform: translateY(20px); }
      to { opacity: 1; transform: translateY(0); }
    }

    /* Scroll-triggered Animations */
    .revealable {
        opacity: 0;
        transition: opacity 0.7s ease-out, transform 0.7s cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }
    .revealable.reveal-fade-up { transform: translateY(30px); }
    .revealable.reveal-fade-left { transform: translateX(-30px); }
    .revealable.reveal-fade-right { transform: translateX(30px); }
    .revealable.reveal-zoom-in { transform: scale(0.95); }

    .revealed {
        opacity: 1;
        transform: translate(0, 0) scale(1) !important;
    }

    /* Chatbot Styles */
    #chatbot-window.open {
        opacity: 1; 
        transform: translateY(0) scale(1);
        pointer-events: auto;
    }
    .chatbot-message {
        animation: fade-in-up 0.5s ease-out;
    }
    .typing-indicator span {
        animation: bounce 1.4s infinite ease-in-out both;
    }
    .typing-indicator span:nth-child(1) { animation-delay: -0.32s; }
    .typing-indicator span:nth-child(2) { animation-delay: -0.16s; }
    @keyframes bounce {
        0%, 80%, 100% { transform: scale(0); }
        40% { transform: scale(1.0); }
    }

    /* Chatbot Toggle Button */
    .btn-chat {
      background-color: #8b8b8b;
      color: var(--color-ink);
      border: 2px solid var(--color-primary);
      transition: all 0.25s ease;
    }
    .btn-chat:hover {
      filter: brightness(1.05);
      box-shadow: 0 0 18px rgba(73, 237, 58, 0.45);
      transform: scale(1.06);
    }
    .btn-chat img {
      width: 75px;
      height: 75px;
    }
    /* Language Selector */
    #lang-button {
      transition: all 0.2s ease;
    }
    #lang-button:hover {
      color: var(--color-primary);
      transform: scale(1.05);
    }
    #lang-menu {
      animation: fadeInScale 0.2s ease;
    }
    #lang-menu.hidden {
      animation: none;
    }
    #lang-select-mobile {
      transition: all 0.2s ease;
    }
    #lang-select-mobile:focus {
      border-color: var(--color-primary);
      outline: none;
      box-shadow: 0 0 0 1px var(--color-primary);
    }
    @keyframes fadeInScale {
      from {
        opacity: 0;
        transform: scale(0.95) translateY(-5px);
      }
      to {
        opacity: 1;
        transform: scale(1) translateY(0);
      }
    }

    /* Spinner Loading */
    .spinner {
      width: 50px;
      height: 50px;
      border: 4px solid rgba(0, 255, 204, 0.1);
      border-top-color: var(--color-primary);
      border-radius: 50%;
      animation: spin 1s linear infinite;
    }
    .spinner-small {
      width: 20px;
      height: 20px;
      border: 3px solid rgba(0, 255, 204, 0.2);
      border-top-color: var(--color-primary);
      border-radius: 50%;
      animation: spin 0.8s linear infinite;
      flex-shrink: 0;
    }
    @keyframes spin {
      to { transform: rotate(360deg); }
    }