html { scroll-behavior: smooth; }
    body { margin:0; padding:0; font-family: sans-serif; background-color: #000; color: #fff; overflow-x: hidden; }

    header {
      transition: background 0.3s ease, box-shadow 0.3s ease;
    }
    header.scrolled {
      background: rgba(0,0,0,0.95);
      box-shadow: 0 4px 10px rgba(0,0,0,0.5);
    }

    .contacto {
      background-image: url('../assets/contactenos.jpg');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      position: relative;
    }
    .hero-bg {
      background-image: url('../assets/banner-3.jpg');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      position: relative;
    }
    .hero-bg::before {
      content:''; position:absolute; top:0; left:0; right:0; bottom:0;
      background: linear-gradient(-45deg, rgba(20,20,20,0.7), rgba(0,0,0,0.8), rgba(40,40,40,0.6));
      background-size: 300% 300%;
      animation: gradientMove 12s ease infinite;
      z-index:1;
    }
    @keyframes gradientMove {
      0% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }

    .dark-card {
      background: linear-gradient(145deg,#1a1a1a,#111);
      border:1px solid #333;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .dark-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 20px 25px -5px rgba(255,255,255,0.1);
    }

    @keyframes glowing {
      0%,100% {box-shadow:0 0 5px rgba(255,255,255,0.1);}
      50%{box-shadow:0 0 20px rgba(255,255,255,0.4);}
    }
    .glow {animation: glowing 3s infinite;}

    .reveal {opacity:0; transform:translateY(30px); transition: all 0.8s ease;}
    .reveal.active {opacity:1; transform:translateY(0);}

    @keyframes pulseIcon {
      0%,100% {transform:scale(1);opacity:0.8;}
      50% {transform:scale(1.1);opacity:1;}
    }
    .icon-animate {animation:pulseIcon 4s infinite; color:#bbb;}

    /* Estilos para scrollbar personalizada en el chat */
    .scrollbar-thin::-webkit-scrollbar {
      width: 4px;
    }
    .scrollbar-thin::-webkit-scrollbar-track {
      background: transparent;
    }
    .scrollbar-thin::-webkit-scrollbar-thumb {
      background: #374151;
      border-radius: 2px;
    }
    .scrollbar-thin::-webkit-scrollbar-thumb:hover {
      background: #4B5563;
    }