/* =========================================
   OPTIMIZACIÓN MÓVIL (Celulares < 768px)
   ========================================= */

@media (max-width: 768px) {
  
  /* 1. Ajuste de Contenedor General */
  .container {
    padding: 0 1.2rem; /* Menos relleno a los lados para ganar espacio */
    width: 100%;
    overflow-x: hidden; /* Evita que la pantalla se mueva a los lados */
  }

  /* 2. Header y Logo más compactos */
  header {
    padding: 5rem 0 3rem; /* Reducimos el espacio arriba (antes 8rem) */
  }

  /* El círculo de neón se hace un poco más pequeño para caber bien */
  .logo-container {
    width: 240px;
    height: 240px;
  }
  
  .custom-logo {
    width: 130px; /* Pera ajustada proporcionalmente */
  }

  /* 3. TÍTULO GSTAR (El problema principal) */
  /* Usamos un tamaño de fuente dinámico más pequeño para móvil */
  .logo-main {
    font-size: 3.8rem; /* Tamaño fijo seguro para móvil */
    letter-spacing: 0.1em; /* Reducimos el espaciado entre letras para que no se corte */
    line-height: 1.1;
  }

  .logo-sub {
    font-size: 1.5rem;
    letter-spacing: 0.4em; /* Espaciado más controlado */
    margin-top: 0.5rem;
  }

  /* 4. Títulos de Secciones (Nuestros Servidores, etc.) */
  .section-title {
    font-size: 2rem; /* Más pequeño para que no ocupe 3 líneas */
    margin: 3.5rem 0 2rem;
  }

  /* 5. Ajuste de la Grilla (Cards) */
  .servers-grid, 
  .trailers-grid {
    /* Forzamos una sola columna que ocupe el 100% */
    grid-template-columns: 1fr; 
    gap: 2rem;
    margin-bottom: 5rem;
  }

  /* Ajuste de márgenes internos de las cards */
  .card-info {
    padding: 1.5rem;
  }

  .card-title {
    font-size: 1.8rem; /* Título de la tarjeta un poco más chico */
  }

  /* 6. Barra Social (Iconos flotantes) */
  .social-bar {
    left: 10px; /* Más pegado al borde */
    padding: 8px 6px;
    gap: 12px;
    /* Opcional: Si molesta mucho en móvil, podrías ponerla abajo horizontalmente */
  }
  
  .social-icon {
    width: 40px;
    height: 40px;
    font-size: 1.3rem;
  }
  
  /* 7. Footer */
  footer {
    padding: 3rem 1rem;
    font-size: 0.95rem;
  }
}

/* =========================================
   AJUSTE EXTRA PARA PANTALLAS MUY PEQUEÑAS (iPhone SE, etc.)
   ========================================= */
@media (max-width: 380px) {
  .logo-main {
    font-size: 3rem; /* Aún más pequeño para pantallas diminutas */
  }
  .logo-container {
    width: 200px;
    height: 200px;
  }
  .custom-logo {
    width: 110px;
  }
}