:root{
    --bg:#fff;
    --soft2: rgba(15,15,16,.06);

    /* Verde neón Bisontt */
    --bisontt:#aaff78;

    --dark: #0f1013;
  }

  body{ margin:0; font-family:'Poppins', sans-serif; }

  nav{
    background:#111;
    padding:15px;
    text-align:center;
    position: sticky;
    top: 0;
    z-index: 20;
  }
  nav a{
    color:white;
    margin:0 15px;
    text-decoration:none;
    font-weight:bold;
    cursor:pointer;
  }
  .section{ padding:100px 20px; text-align:center; }

  /* ===== INTRO (UTN-like) ===== */
  .heroIntro{
    width: 220px;
    height: 220px;
    position: relative;
    display: grid;
    place-items: center;
    margin: 0 auto;
  }
  .glow{
    position:absolute;
    width: 150px;
    height: 150px;
    border-radius: 999px;
    background: radial-gradient(circle at 50% 50%, rgba(0,0,0,.08), transparent 65%);
    filter: blur(2px);
    z-index: 0;
  }
  .logo{
    width: 125px;
    height: auto;
    user-select: none;
    -webkit-user-drag: none;
    z-index: 3;
  }
  .ring{
    position:absolute;
    inset: 0;
    border-radius: 999px;
    background:
      conic-gradient(
        from 0deg,
        rgba(15,15,16,.90) 0 14deg,
        rgba(15,15,16,.10) 14deg 26deg,
        rgba(15,15,16,.60) 26deg 40deg,
        rgba(15,15,16,.10) 40deg 56deg,
        rgba(15,15,16,.35) 56deg 72deg,
        rgba(15,15,16,.10) 72deg 95deg,
        rgba(15,15,16,.70) 95deg 112deg,
        rgba(15,15,16,.10) 112deg 140deg,
        rgba(15,15,16,.45) 140deg 170deg,
        rgba(15,15,16,.10) 170deg 210deg,
        rgba(15,15,16,.65) 210deg 232deg,
        rgba(15,15,16,.10) 232deg 290deg,
        rgba(15,15,16,.55) 290deg 310deg,
        rgba(15,15,16,.10) 310deg 360deg
      );
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 8px), #000 calc(100% - 8px));
            mask: radial-gradient(farthest-side, transparent calc(100% - 8px), #000 calc(100% - 8px));
    animation: spin 1.05s linear infinite;
    z-index: 1;
  }
  .ring2{
    position:absolute;
    inset: 16px;
    border-radius: 999px;
    border: 2px solid var(--soft2);
    z-index: 1;
  }
  .orbiter{
    position:absolute;
    inset: 0;
    border-radius: 999px;
    animation: spin 1.4s linear infinite reverse;
    z-index: 2;
  }
  .orbiter::before{
    content:"";
    position:absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: rgba(15,15,16,.85);
    box-shadow: 0 0 0 6px rgba(15,15,16,.10);
  }
  @keyframes spin{ from{ transform: rotate(0deg);} to{ transform: rotate(360deg);} }

  .intro{
    position: fixed;
    inset: 0;
    background: var(--bg);
    display: grid;
    place-items: center;
    z-index: 2147483647 !important;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s ease, visibility .2s ease;
  }
  .intro.active{ opacity:1; visibility:visible; pointer-events:all; }
  .first-visit-intro .intro-home{
    opacity:1;
    visibility:visible;
    pointer-events:all;
  }
  .first-visit-intro body{ overflow:hidden; }
  .intro.closing{
    opacity: 0;
    transition: opacity .8s cubic-bezier(.22,1,.36,1);
  }
  .mini{
    position:absolute;
    bottom: -34px;
    width: 100%;
    text-align:center;
    font-size: 12px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(15,15,16,.55);
    font-weight: 700;
  }

  /* ===== PORTADA FULLSCREEN (solo imagen + botón) ===== */
  .cover{
    position: fixed;
    inset: 0;
    z-index: 2147483646 !important;
    display: grid;
    place-items: center;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .9s cubic-bezier(.22,1,.36,1), visibility .9s;
    background: var(--dark);
  }
  .cover.show{ opacity:1; visibility:visible; pointer-events:all; }
  .cover.hide{ opacity:0; visibility:hidden; pointer-events:none; }

  /* Fondo personalizado */
  .cover-bg{
    position:absolute;
    inset:0;
    background: url("../img/bg/Fondo.webp") center/cover no-repeat;
    filter: blur(7px) saturate(1.08) contrast(1.06);
    transform: scale(1.07);
    opacity: .9;
  }
  .cover-bg::after{
    content:"";
    position:absolute;
    inset:0;
    background:
      radial-gradient(900px 600px at 20% 15%, rgba(170,255,120,.18), transparent 55%),
      radial-gradient(900px 600px at 80% 80%, rgba(0,0,0,.55), transparent 55%),
      linear-gradient(0deg, rgba(0,0,0,.70), rgba(0,0,0,.25));
  }

  .cover-stage{
    position: relative;
    width: min(1200px, 96vw);
    height: min(86vh, 820px);
    display: grid;
    place-items: center;
    z-index: 2;
  }

  /* Imagen principal “flotando” */
  .cover-frame{
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 26px;
    overflow: hidden;

    box-shadow:
      0 30px 90px rgba(0,0,0,.68),
      0 10px 36px rgba(0,0,0,.35);

    border: 1px solid rgba(255,255,255,.10);
    animation: floaty 4.2s ease-in-out infinite;
    background: rgba(0,0,0,.25);
  }
  @keyframes floaty{
    0%,100%{ transform: translateY(0); }
    50%{ transform: translateY(-8px); }
  }
  .cover-frame img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display:block;
    filter: contrast(1.05) saturate(1.08);
  }
  .cover-frame::after{
    content:"";
    position:absolute;
    inset:0;
    background:
      linear-gradient(120deg, rgba(170,255,120,.14), transparent 35%),
      radial-gradient(800px 340px at 70% 15%, rgba(255,255,255,.10), transparent 60%),
      linear-gradient(0deg, rgba(0,0,0,.35), rgba(0,0,0,.05));
    pointer-events:none;
  }

  /* Botón centrado abajo */
  .enter-wrap{
    position: absolute;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    z-index: 3;
    width: min(520px, 86vw);
    display:flex;
    justify-content:center;
  }
  .btn{
    width: 100%;
    max-width: 420px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 18px;
    border-radius: 16px;

    background: var(--bisontt);
    color: #0a0a0a;
    font-weight: 900;
    letter-spacing: .10em;
    text-transform: uppercase;

    border: 1px solid rgba(0,0,0,.45);
    cursor: pointer;

    box-shadow:
      0 18px 60px rgba(170,255,120,.28),
      0 0 0 7px rgba(170,255,120,.10);

    transition: transform .2s ease, filter .2s ease, box-shadow .2s ease;
  }
  .btn:hover{
    transform: translateY(-2px);
    filter: brightness(1.03);
    box-shadow:
      0 22px 70px rgba(170,255,120,.34),
      0 0 0 9px rgba(170,255,120,.12);
  }
  .btn:active{ transform: translateY(0); filter: brightness(.98); }

  /* MAIN oculto hasta Entrar */
  #main{
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1), visibility .7s;
  }
  #main.show{
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }