.modal {
          display: none;
          position: fixed;
          z-index: 9999;
          padding-top: 80px;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          overflow: auto;
          font-family: inherit;
          background-color: rgba(0,0,0,0.7);
      }
      .modal-overlay {
          display: none;
          position: fixed;
          z-index: 9999;
          left: 0; top: 0;
          width: 100%; height: 100%;
          background: rgba(0, 0, 0, 0.7);
          justify-content: center;
          align-items: center;
        }
        .close-btn {
          position: absolute;
          top: 12px;
          right: 16px;
          font-size: 28px;
          cursor: pointer;
          color: #ccc;
        }
        .modal-form input,
        .modal-form select,
        .modal-form textarea {
          width: 100%;
          padding: 10px;
          margin: 10px 0;
          background: #333;
          border: 1px solid #555;
          color: #fff;
          border-radius: 5px;
        }

      .modal-content {
          position: relative;
          font-family: inherit;
          background-color: #1e1e1e;
          margin: auto;
          padding: 20px;
          border-radius: 10px;
          width: 90%;
          max-width: 500px;
          color: #fff;
          text-align: center;
      }
      .close {
          color: #aaa;
          float: right;
          font-size: 24px;
          font-weight: bold;
          cursor: pointer;
      }
      .button-grid {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 10px;
          margin-top: 20px;
      }
      .modal-btn {
          background-color: #444;
          color: white;
          padding: 10px;
          border-radius: 6px;
          text-decoration: none;
          transition: background 0.3s;
      }
      .modal-btn:hover {
          background-color: #666;
      }
      .input-btn-group {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .input-btn-group input[type="email"],
    .input-btn-group .modal-btn {
        height: 40px;
        font-size: 16px;
        padding: 0 12px;
        border-radius: 6px;
        border: 1px solid #ccc;
        box-sizing: border-box;
    }

    .input-btn-group input[type="email"] {
        flex: 1;
    }

    .input-btn-group .modal-btn {
        background-color: #007bff;
        color: white;
        border: none;
        cursor: pointer;
        transition: background-color 0.2s ease;
    }

    .input-btn-group .modal-btn:hover {
        background-color: #0056b3;
    }
        .server-status {
        font-family: inherit; /* Usa la misma fuente del sitio */
        font-size: 18px;
        font-weight: bold;
        margin-left: 6px;
    }

    .status-on {
        color: green;
        content: '𒊹';
    }

    .status-off {
        color: red;
        content: '⊗';
    }
    .snow-container {
      position: absolute;
      top: 0; left: 0; width: 100%; height: 100%;
      pointer-events: none;
      overflow: hidden;
      z-index: 3;
    }

    .snowflake {
      position: absolute;
      top: -10px; /* start arriba */
      background: white;
      border-radius: 50%;
      opacity: 0.8;
      filter: drop-shadow(0 0 1px rgba(255,255,255,0.5));
      animation-name: fall, sway;
      animation-timing-function: linear, ease-in-out;
      animation-iteration-count: infinite, infinite;
    }

    @keyframes fall {
      0% {
        transform: translateY(-10px);
        opacity: 0.8;
      }
      100% {
        transform: translateY(110vh);
        opacity: 0.2;
      }
    }

    @keyframes sway {
      0%, 100% {
        transform: translateX(0);
      }
      50% {
        transform: translateX(20px);
      }
    }

    /* AdSense Google */
      /* Forzar transparencia al contenedor y al ad */
  #footer-ads,
  #footer-ads ins.adsbygoogle,
  #footer-ads iframe {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
  }

  /* Que siempre sea block y responsive */
  ins.adsbygoogle {
    display: block !important;
  }


/* TOOLTIP DESCARGAS */
.tooltip {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 280px; /* Más ancho */
    background-color: #1a1a1a; /* Color más oscuro */
    color: #fff;
    text-align: center;
    border-radius: 10px; /* Bordes más redondeados */
    padding: 12px 16px; /* Más padding */
    position: absolute;
    z-index: 1000;
    bottom: 140%; /* Más separación */
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.1s ease-in-out; /* Transición más rápida */
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); /* Sombra más pronunciada */
    border: 1px solid #444; /* Borde sutil */
}

/* Flecha del tooltip */
.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -8px; /* Ajuste para centrar */
    border-width: 8px; /* Flecha más grande */
    border-style: solid;
    border-color: #1a1a1a transparent transparent transparent;
}

/* Mostrar inmediatamente al hacer hover */
.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

/* Opcional: Efecto adicional en el enlace */
.tooltip:hover a {
    background-color: #f0f0f0;
    transition: background-color 0.2s;
}

/* =========================================================
   L2ARGENTO - Ajustes visuales y optimizacion frontend
   Este archivo reemplaza el CSS inline del index.
   Mantiene la mecanica original.
   ========================================================= */

:root {
  --l2-bg: #070604;
  --l2-panel: rgba(18, 15, 11, .92);
  --l2-panel-2: rgba(34, 27, 18, .88);
  --l2-border: rgba(239, 224, 171, .24);
  --l2-gold: #e9cf8d;
  --l2-gold-soft: #bda46f;
  --l2-text: #f4ead7;
  --l2-muted: rgba(244, 234, 215, .62);
  --l2-danger: #ff5f66;
  --l2-success: #3dff9d;
}

body {
  background:
    radial-gradient(circle at 50% 0%, rgba(181, 130, 50, .14), transparent 34%),
    linear-gradient(180deg, #050403 0%, #110d08 50%, #050403 100%);
  color: var(--l2-text);
}

nav {
  backdrop-filter: blur(14px);
  box-shadow: 0 1.4vh 4vh rgba(0,0,0,.28);
}

nav ul:nth-child(1) li a,
nav ul:nth-child(2) li:nth-child(1) a {
  text-shadow: 0 .2vh .8vh rgba(0,0,0,.6);
}

.header::before {
  background:
    radial-gradient(circle at center, rgba(255, 215, 130, .10), transparent 28%),
    linear-gradient(rgba(0,0,0,.10), rgba(20,16,11,.42), rgba(18,13,8,.88));
}

.header .top .logo {
  filter: drop-shadow(0 2vh 3vh rgba(0,0,0,.7));
}

.header .top h1 {
  letter-spacing: .08vh;
}

#countdown {
  margin: 1.5vh auto 0;
  color: var(--l2-gold);
  font-size: 2.5vh;
  text-shadow: 0 0 2vh rgba(233,207,141,.32);
}

.modal-content {
  background:
    linear-gradient(180deg, rgba(23, 18, 12, .96), rgba(9, 7, 5, .96));
  border: 1px solid var(--l2-border);
  box-shadow: 0 3vh 8vh rgba(0,0,0,.58), inset 0 0 0 1px rgba(255,255,255,.04);
}

.modal-content h2,
.modal-title {
  color: var(--l2-gold);
  margin-bottom: 18px;
  text-shadow: 0 0 2vh rgba(233,207,141,.20);
}

.modal-btn,
.modal-form button,
#step3 button,
#step2 button {
  background: linear-gradient(135deg, #8a6b2f, #b9974d);
  color: #fff;
  border: 1px solid rgba(255,235,190,.35);
  border-radius: 10px;
  cursor: pointer;
  min-height: 42px;
  font-family: inherit;
  box-shadow: 0 .8vh 1.8vh rgba(0,0,0,.25);
}

.modal-btn:hover,
.modal-form button:hover,
#step3 button:hover,
#step2 button:hover {
  background: linear-gradient(135deg, #b9974d, #dfc27a);
  color: #21170b;
  text-decoration: none;
}

.modal-form input,
.modal-form select,
.modal-form textarea,
#registerModal input,
#registerModal select,
#registerModal textarea {
  background: rgba(4,4,4,.55);
  border: 1px solid rgba(233,207,141,.22);
  color: #fff;
  outline: none;
}

.modal-form input:focus,
.modal-form select:focus,
.modal-form textarea:focus,
#registerModal input:focus,
#registerModal select:focus,
#registerModal textarea:focus {
  border-color: rgba(233,207,141,.75);
  box-shadow: 0 0 0 3px rgba(233,207,141,.12);
}

.status-on {
  color: var(--l2-success);
  text-shadow: 0 0 1vh rgba(61,255,157,.55);
}

.status-off {
  color: var(--l2-danger);
  text-shadow: 0 0 1vh rgba(255,95,102,.55);
}

#twitch-float {
  border: 1px solid rgba(233,207,141,.35);
  box-shadow: 0 2vh 5vh rgba(0,0,0,.65) !important;
}

#footer-ads {
  position: relative;
  z-index: 10;
}

/* Mejoras responsive extra sin tocar media.min.css */
@media (max-width: 980px) {
  nav {
    height: auto;
    min-height: 7.3vh;
    padding: 8px 12px;
  }

  .header .top .logo {
    width: min(68vw, 42vh);
  }

  .header .top h1 {
    font-size: clamp(34px, 9vw, 8vh);
    line-height: 1.05;
    padding: 0 18px;
  }

  .header .key {
    width: 92%;
    gap: 12px;
    flex-wrap: wrap;
  }

  .header .key li {
    width: 30%;
    margin: 0;
  }

  .game .why .tabs,
  .offers__box,
  .offers__faq,
  .discussion,
  footer .right {
    width: min(92vw, 140vh);
  }

  .game .why .tabs {
    height: auto;
    flex-direction: column;
    gap: 28px;
  }

  .game .why .tab,
  .game .why .tab_nav {
    width: 100%;
  }

  .game .why .tab {
    height: 34vh;
  }

  .game .why .tab_nav {
    padding: 0;
  }

  .start__thumbs {
    width: 86%;
  }

  .start__video .swiper-slide p {
    width: 88%;
  }

  #twitch-float {
    width: 220px !important;
    height: 124px !important;
    left: 10px !important;
    bottom: 10px !important;
  }
}

@media (max-width: 640px) {
  .navigation_left,
  .streams {
    display: none;
  }

  .main_btn {
    width: min(82vw, 45vh);
  }

  .main_btn:hover span {
    font-size: 2.8vh;
    letter-spacing: .3vh;
  }

  .header {
    min-height: 100svh;
    height: auto;
    padding: 14vh 0 9vh;
  }

  .header .key li {
    width: 45%;
  }

  .header .key li span {
    width: 7.5vh;
    height: 7.5vh;
  }

  .button-grid {
    grid-template-columns: 1fr;
  }

  .input-btn-group {
    flex-direction: column;
    align-items: stretch;
  }

  .modal-content {
    width: 92%;
    max-height: 86vh;
    overflow-y: auto;
  }

  .offers__title h1,
  .game .systems__title h1,
  .game .why__title h1 {
    font-size: clamp(34px, 10vw, 7vh);
    line-height: 1.08;
  }

  footer .right ul {
    flex-direction: column;
    gap: 10px;
  }

  #twitch-float {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  ::before,
  ::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }

  .snow-container {
    display: none;
  }
}