/* ========================================================
   L2 SUMERIA - MOBILE.CSS (RESETEO TOTAL RESPONSIVO)
   ======================================================== */

@media only screen and (max-width: 768px) {

  /* 1. Forzar a que el navegador use el ancho del dispositivo */
  html, body {
      width: 100% !important;
      min-width: 100% !important;
      overflow-x: hidden !important;
  }

  /* 2. Romper anchos fijos heredados de la versión de PC */
  .wrapper, .main, .header, .footer, .container {
      width: 100% !important;
      min-width: 0 !important;
      max-width: 100% !important;
      left: 0 !important;
      right: 0 !important;
      margin: 0 auto !important;
      transform: none !important;
      position: relative !important;
  }

  .content-area {
      width: 100% !important;
      max-width: 100% !important;
      padding: 0 15px !important;
      box-sizing: border-box !important;
  }

  /* 3. RESCATE DEL MENÚ (Forzado al frente y centrado) */
  .nav {
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      justify-content: center !important;
      width: 100% !important;
      height: auto !important;
      min-height: 60px !important;
      position: relative !important;
      top: 0 !important;
      left: 0 !important;
      margin: 0 !important;
      padding: 10px 0 !important;
      background: rgba(10, 10, 10, 0.98) !important; /* Fondo negro sólido para que se vea */
      z-index: 99999 !important;
      transform: none !important;
  }

  .nav .content-area {
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      gap: 10px !important;
  }

  .nav__logo {
      width: 60px !important;
      height: auto !important;
      margin: 0 !important;
      position: relative !important;
  }

  /* Forzar visibilidad de los enlaces del menú */
  .nav__menu, .nav ul, .menu {
      display: flex !important;
      flex-direction: row !important;
      flex-wrap: wrap !important;
      justify-content: center !important;
      align-items: center !important;
      gap: 12px !important;
      width: 100% !important;
      height: auto !important;
      visibility: visible !important;
      opacity: 1 !important;
      margin: 5px 0 0 0 !important;
      padding: 0 !important;
      list-style: none !important;
  }

  .nav__menu a, .nav a {
      display: inline-block !important;
      font-size: 13px !important;
      color: #ffffff !important;
      text-transform: uppercase !important;
      text-decoration: none !important;
  }

  /* 4. LOGO CENTRAL Y MULTIMEDIA */
  .header__content-logo-center img {
      width: 85% !important;
      max-width: 300px !important;
      height: auto !important;
      margin: 30px auto 0 !important;
      display: block !important;
  }

  .header__video {
      width: 100% !important;
      height: 100% !important;
      left: 0 !important;
  }

  .header__video-player {
      width: 100% !important;
      height: 100% !important;
      object-fit: cover !important;
  }

  /* 5. CONTADOR (TIMER) */
  .timer {
      justify-content: center !important;
      flex-wrap: wrap !important;
      gap: 10px !important;
  }

  .circle {
      width: 65px !important;
      height: 65px !important;
  }

  .num {
      font-size: 16px !important;
  }

  .label {
      top: 52px !important;
      margin-left: -65px !important;
      font-size: 11px !important;
  }

  /* 6. BOTONES Y SECCIONES (GRID) */
  .button.big {
      width: 100% !important;
      max-width: 290px !important;
      margin: 15px auto !important;
  }

  .flex-ss {
      flex-direction: column !important;
  }

  .col-1-4, .col-1-2 {
      width: 100% !important;
      flex: 100% !important;
      max-width: 100% !important;
  }

  .information__box {
      margin-bottom: 20px !important;
  }

  /* 7. REDES SOCIALES (Quitar el flotante de PC) */
  .socials {
      position: static !important;
      transform: none !important;
      flex-direction: row !important;
      justify-content: center !important;
      margin: 30px auto 15px !important;
      width: 100% !important;
  }

  .socials__item:not(:last-child) {
      margin-bottom: 0 !important;
      margin-right: 15px !important;
  }

  /* 8. FOOTER Y DISCORD */
  .footer__discord {
      width: 100% !important;
      max-width: 100% !important;
      height: 250px !important;
      margin: 20px auto 0 !important;
  }

  .footer .col-1-2 {
      text-align: center !important;
  }

  .footer__cpr-links {
      justify-content: center !important;
      flex-wrap: wrap !important;
      gap: 10px !important;
  }

  /* Ocultar los botones fijos gigantes de votación en celular */
  footer a img, footer img {
      display: none !important;
  }

  img, iframe {
      max-width: 100% !important;
      height: auto !important;
  }
}