@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800;1,300..800&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Sniglet:wght@400;800&display=swap'); 
 
 :root {
      color-scheme: dark;
      --bg-top: #090c18;
      --bg-bottom: #010109;
      --accent: #8b9bff;
      --accent-2: #78f7ff;
      --accent-3: #ff78f2;
      --text-main: #f3f6ff;
      --text-soft: rgba(224, 228, 255, 0.78);
    }

    html {
    scroll-behavior: smooth;
    will-change: scroll-position;
    scroll-snap-type: y proximity;
  }

    *, *::before, *::after {
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }

    body {
      margin: 0;
      font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      color: var(--text-main);
      min-height: 100vh;
      overflow-x: hidden;
    }

    .header {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      padding: clamp(16px, 4vw, 32px) clamp(20px, 6vw, 72px);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 10;
    }

    .opciones{
        width: max-content;
        background-color: #444444a5;
        backdrop-filter: blur(2px); 
        padding: 6px;
        border-radius: 50px;
        display: flex;
        gap: 7px;
    }

    .opciones a {
      padding: 10px 20px;
      color: white;
      text-decoration: none;
        align-items: center;
        border-radius: 18px;
        transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
    }

    .opciones a:hover {
      color: white;
        margin: 0px 6px;
        align-items: center;
        border-radius: 50px;
        transform: scale(1.1) translateY(-4px);
    }
    
    .opciones a:nth-child(1){
        background: url("media/uvlis-icon.png") center/60% no-repeat;
        padding: 10px 20px;
    }

    .opciones a:nth-child(2){
        background-color: rgb(82, 82, 250) ;
    }
    .opciones a:nth-child(2):hover{
        background-color: rgb(108, 108, 254) ;
        box-shadow: 0 6px 16px rgba(133, 162, 255, 0.153);
    }
    .opciones a:nth-child(3){
        background-color: rgba(255, 23, 69, 0.909);
    }
    .opciones a:nth-child(3):hover{
        background-color: rgba(255, 43, 50, 0.909);
        box-shadow: 0 6px 16px rgba(255, 153, 80, 0.153);
    }
    .opciones a:nth-child(4){
        background-color: rgba(139, 23, 255, 0.909);
    }
    .opciones a:nth-child(4):hover{
        background-color: rgba(156, 43, 255, 0.909);
        box-shadow: 0 6px 16px rgba(255, 153, 80, 0.153);
    }
    
    .logo {
      font-weight: 700;
      letter-spacing: 0.28em;
      font-size: 0.95rem;
      text-transform: uppercase;
      color: var(--accent-2);
    }


    .main, .Nuestro-Equipo, .Labs {
      position: relative;
      z-index: 2;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: clamp(120px, 16vh, 200px) clamp(24px, 5vw, 80px);
    }
    
    .main {
        background: linear-gradient(180deg, #010520 0.5%, #78f6ff3b 95%), url("media/theAura.png") fixed;
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
    }


    .WEntrance{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }


    #hacker-text{
        font-family: 'Poppins', sans-serif;
        font-size: 26px;
        margin: 0;
    }
    #uvlis-title{
        font-size: 52px;
        margin: 0;
    }

    .Nuestro-Equipo{
        background: linear-gradient(180deg, #78f6ff3b  0.5%, #010218 70%), url("media/theAura.png") fixed;
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
    }
    #title-nuestro-equipo{
        margin: 40px 0px;
    }

    .Nosotros{
      width: 90%;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 20px;
      align-items: stretch;
    }
    .Uvliver{
      display: flex;
      flex-direction: column;
      background-color: #0101173d;
      border-radius: 32px;
      padding: 22px;
      width: 100%;
      transition: background-color 0.3s ease;
    }
    .image-uvliver{
      width: 100%; 
      aspect-ratio: 1 / 1;
      flex-shrink: 0; 
      object-fit: cover;
      border-radius: 20px;
    }
    .name-uvliver{
      font-size: 24px;
      margin: 8px 0 0;
    }
    .nickname-uvliver{
      font-size: 20px;
      margin: 0; 
    }


/* Canvas */
#particle-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.WEntrance {
  position: relative;
  z-index: 2;
}


    /* === Sección Labs === */
    .Labs{
        background: linear-gradient(180deg, #010218 0.5%, #010218 70%), url("media/clouds.PNG");
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
    }
    #title-labs{
        margin: 40px 0px;
    }
    .Uvlis-labs{
      width: 90%;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 20px;
      align-items: stretch;
      margin-bottom: 20px;
    }
    .labsito{
        display: flex;
        flex-direction: column;
        background-color: #3d3d883d;
        border-radius: 32px;
        padding: 22px;
        width: 100%;
        transition: background-color 0.3s ease;
    }

    .labsito:hover {
      background-color: #4c4c9e4d;
    }

    .name-lab{
      font-family: 'Poppins', sans-serif;
      font-size: 34px;
      font-weight: 700;
    }
    .des-lab{
      font-size: 14px;
      color: #b6bcde;
      flex-grow: 1;
    }
    .button-lab{
      margin-top: 20px;
      text-decoration: none;
      background-color: #8b9bff;
      color: white;
      width: max-content;
      padding: 12px 20px;
      border-radius: 16px;
      align-items: center;
      justify-content: center;
      align-self: flex-end;
      box-shadow: 0 3px 0px rgba(92, 95, 255, 0.91);
      transition: box-shadow 0.3s, transform 0.3s, border-radius 0.5s;
    }
    .button-lab:hover{
      transform:translateY(3px);
      box-shadow: none;
      border-radius: 50px;
    }


 

    @media (max-width: 1090px) {
        .Nosotros {
            grid-template-columns: repeat(3, 1fr);
            gap: 15px;
        }
        .name-uvliver {
          font-size: 20px;
          margin: 6px 0 0;
        }
        .Uvliver {
            padding: 22px;
        }
        

    }
    
    @media (max-width: 480px) {
        .Nosotros {
            grid-template-columns: repeat(2, 1fr); 
            gap: 8px;
        }

        .Uvliver {
            padding: 12px;
        }

        .name-uvliver {
          font-size: 14px; 
          margin: 4px 0 0; 
        }
        .nickname-uvliver{
          font-size: 12px;
        }
        
    }

    @media (max-width: 920px) {
        .image-labsito {
            height: auto;
            width: 100%;
        }
        .name-lab {
            font-weight: 700;
        }
    }