﻿body {
        overflow-x: hidden;
        background-color: #050505;
      }
      /* Custom Scrollbar */
      ::-webkit-scrollbar {
        width: 8px;
      }
      ::-webkit-scrollbar-track {
        background: transparent;
      }
      ::-webkit-scrollbar-thumb {
        background: #555;
        border-radius: 4px;
      }
      ::-webkit-scrollbar-thumb:hover {
        background: #777;
      }
      
      /* Noise Texture Overlay */
      .noise-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        z-index: 9999;
        opacity: 0.03;
        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
      }

      /* Robô Styles */
      :root {
          --cor-neon: #00ffcc;
          --glow-intensidade: rgba(0, 255, 204, 0.4);
      }

      .canvas-tecnologico {
          position: fixed;
          --robo-bottom: 20px;
          --robo-lift: 0px;
          bottom: calc(var(--robo-bottom) + var(--robo-lift));
          right: 20px;
          width: 220px;
          max-width: 80vw;
          perspective: 1000px;
          z-index: 60;
          
          /* Estado Inicial: Escondido */
          opacity: 0;
          transform: translateY(150px) scale(0.8);
          pointer-events: none;
          
          /* Transição Suave */
          transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
      }

      /* Classe ativada via JS */
      .canvas-tecnologico.robo-visivel {
          opacity: 1;
          transform: translateY(0) scale(1);
          pointer-events: auto;
      }

      .container-robo {
          position: relative;
          display: flex;
          flex-direction: column;
          align-items: center;
          animation: flutuar 4s ease-in-out infinite;
      }

      .robo-main {
          width: 100%;
          height: auto;
          z-index: 2;
          filter: drop-shadow(0 0 15px var(--glow-intensidade));
          background-color: transparent; 
      }

      @keyframes flutuar {
          0%, 100% {
              transform: translateY(0) rotateX(0deg);
          }
          50% {
              transform: translateY(-20px) rotateX(2deg);
          }
      }

      .brilho-neon {
          position: absolute;
          top: 60%;
          width: 40px;
          height: 40px;
          background: var(--cor-neon);
          filter: blur(20px);
          border-radius: 50%;
          opacity: 0.6;
          animation: pulsar 2s ease-in-out infinite;
          z-index: 1;
      }

      @keyframes pulsar {
          0%, 100% { transform: scale(1); opacity: 0.4; }
          50% { transform: scale(1.5); opacity: 0.8; }
      }

      .sombra-projetada {
          width: 120px;
          height: 20px;
          background: rgba(0, 0, 0, 0.5);
          border-radius: 50%;
          filter: blur(10px);
          margin-top: -10px;
          animation: sombra-reacao 4s ease-in-out infinite;
      }

      @keyframes sombra-reacao {
          0%, 100% { transform: scale(1); opacity: 0.5; }
          50% { transform: scale(0.6); opacity: 0.2; }
      }

      .container-robo::after {
          content: "";
          position: absolute;
          top: -20%;
          left: 0;
          width: 100%;
          height: 10px;
          background: linear-gradient(to bottom, transparent, var(--cor-neon), transparent);
          opacity: 0;
          animation: scan 8s linear infinite;
      }

      @keyframes scan {
          0% { top: -20%; opacity: 0; }
          5% { opacity: 0.5; }
          15% { top: 120%; opacity: 0; }
          100% { top: 120%; opacity: 0; }
      }

      .parallax-neon-text {
          -webkit-text-stroke: 1px rgba(0, 243, 255, 0.85);
          text-shadow:
            0 0 4px rgba(0, 243, 255, 0.45),
            0 0 10px rgba(0, 243, 255, 0.35),
            0 0 20px rgba(188, 19, 254, 0.25);
          filter: drop-shadow(0 0 5px rgba(0, 243, 255, 0.25));
      }

      html:not(.dark) .parallax-neon-text {
          -webkit-text-stroke: 1px rgba(60, 60, 60, 0.45);
          text-shadow: none;
          filter: none;
          background-image: linear-gradient(180deg, #2f2f2f, #7b7b7b, #2f2f2f);
      }
      
      @media (max-width: 768px) {
          .canvas-tecnologico {
              width: 140px;
              --robo-bottom: 10px;
              right: 10px;
          }
      }

      /* Vertical Carousel */
      .vertical-carousel-track {
          will-change: transform;
      }

    .font-montserrat {
        font-family: 'Montserrat', 'Space Grotesk', 'Inter', sans-serif;
    }

    /* Logo laminate sweep */
    .logo-laminate {
        position: relative;
        overflow: hidden;
    }

    .logo-laminate img {
        position: relative;
        z-index: 1;
        display: block;
    }

    .logo-laminate::after {
        content: "";
        position: absolute;
        inset: -40% -120%;
        background: linear-gradient(
          110deg,
          transparent 45%,
          rgba(255, 255, 255, 0.7) 50%,
          transparent 55%
        );
        transform: translateX(-120%);
        opacity: 0.65;
        animation: laminate-sweep 4.5s ease-in-out infinite;
        pointer-events: none;
        mix-blend-mode: screen;
        z-index: 2;
    }

    html:not(.dark) .logo-laminate::after {
        background: linear-gradient(
          110deg,
          transparent 45%,
          rgba(0, 0, 0, 0.2) 50%,
          transparent 55%
        );
        mix-blend-mode: multiply;
        opacity: 0.4;
    }

    @keyframes laminate-sweep {
        0% { transform: translateX(-140%); }
        45% { transform: translateX(140%); }
        100% { transform: translateX(140%); }
    }


      /*edition*/

      span.text-\[0\.55rem\].md\:text-\[0\.65rem\].font-bold.tracking-\[0\.35em\].text-gray-500.dark\:text-gray-400.text-right.w-full.uppercase.-mt-0\.5.md\:-mt-1.transition-colors.duration-500 {
        font-size: 0.4em;
    }


span.text-\[0\.7rem\].font-bold.tracking-\[0\.35em\].text-gray-500.dark\:text-gray-400.uppercase.w-full.text-right.-mt-1.transition-colors.duration-500
 {
    width: 55%;
    font-size: 0.4em;
}
