/* =========================================================
   LAYOUT ESTATICO — MasterMu
   ---------------------------------------------------------
   El sitio se dibuja SIEMPRE con el diseno de PC (1200px).
   Si la ventana (o el telefono) es mas angosta NO se
   reacomoda nada: aparece scroll horizontal y el usuario se
   mueve a los lados. Nada de breakpoints, nada de columnas
   que se apilan, nada de escalado por JS.

   Este archivo se carga EL ULTIMO, despues de bootstrap y de
   todos los estilos del template, para poder ganarle a las
   media queries de terceros.

   NO afecta a /admincp ni a /01.Tools (esos no cargan este
   archivo y siguen siendo responsive como antes).
   ========================================================= */

/* ---------------------------------------------------------
   1. LIENZO FIJO
   El documento nunca mide menos de 1200px: esa es la unica
   razon por la que el navegador saca la barra horizontal.
   --------------------------------------------------------- */

html {
    min-width: 1200px;
    /* Estos !important son a proposito: si alguien vuelve a poner
       "overflow-x: hidden" en html o body, el diseno se recorta y la
       barra de scroll horizontal desaparece. Es justo lo que rompia
       la web antes. */
    overflow-x: auto !important;
    overflow-y: auto !important;
}

body {
    min-width: 1200px;
    overflow-x: visible !important;
    overflow-y: visible !important;
    /* El fondo debe pintar todo el ancho desplazable, no solo
       el trozo visible de la ventana. */
    background-attachment: scroll;
    /* Anula el zoom automatico de texto de los navegadores
       moviles, que agrandaba fuentes y rompia las cajas. */
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* El contenedor maestro del diseno. Todo cuelga de aca. */
.wrapper {
    width: 1200px !important;
    min-width: 1200px;
    max-width: none !important;
    margin: 0 auto;
    /* Mata cualquier resto del viejo escalado por JS. */
    transform: none !important;
    zoom: normal !important;
}

/* El header cuelga del wrapper y mide lo mismo que el. Estaba
   duplicado en override01.css y en navbar.css; vive aca, que es
   el archivo de maqueta. */
html,
body {
    margin: 0;
}

.wrapper > .header {
    width: 1200px;
    margin: 0;
}

/* .top-panel NO se toca aca. Toda la barra superior —tamano,
   fondo, posicion— vive en css/navbar.css, que se carga
   despues de este archivo. Si le pones ancho o posicion aca
   vas a estar peleando contra el en dos lugares a la vez. */

/* ---------------------------------------------------------
   2. GRILLA BOOTSTRAP SIN BREAKPOINTS
   Bootstrap 3 solo activa .col-sm-* a partir de 768px. Debajo
   de eso las columnas se apilan al 100%. Las redefinimos sin
   media query para que midan siempre lo mismo.
   --------------------------------------------------------- */

.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6,
.col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12,
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6,
.col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12,
.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6,
.col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
    float: left;
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
}

.col-sm-12, .col-md-12, .col-lg-12 { width: 100%; }
.col-sm-11, .col-md-11, .col-lg-11 { width: 91.66666667%; }
.col-sm-10, .col-md-10, .col-lg-10 { width: 83.33333333%; }
.col-sm-9,  .col-md-9,  .col-lg-9  { width: 75%; }
.col-sm-8,  .col-md-8,  .col-lg-8  { width: 66.66666667%; }
.col-sm-7,  .col-md-7,  .col-lg-7  { width: 58.33333333%; }
.col-sm-6,  .col-md-6,  .col-lg-6  { width: 50%; }
.col-sm-5,  .col-md-5,  .col-lg-5  { width: 41.66666667%; }
.col-sm-4,  .col-md-4,  .col-lg-4  { width: 33.33333333%; }
.col-sm-3,  .col-md-3,  .col-lg-3  { width: 25%; }
.col-sm-2,  .col-md-2,  .col-lg-2  { width: 16.66666667%; }
.col-sm-1,  .col-md-1,  .col-lg-1  { width: 8.33333333%; }

/* Offsets: los usan login, register, forgotpassword y usercp. */
.col-sm-offset-12, .col-md-offset-12, .col-lg-offset-12 { margin-left: 100%; }
.col-sm-offset-11, .col-md-offset-11, .col-lg-offset-11 { margin-left: 91.66666667%; }
.col-sm-offset-10, .col-md-offset-10, .col-lg-offset-10 { margin-left: 83.33333333%; }
.col-sm-offset-9,  .col-md-offset-9,  .col-lg-offset-9  { margin-left: 75%; }
.col-sm-offset-8,  .col-md-offset-8,  .col-lg-offset-8  { margin-left: 66.66666667%; }
.col-sm-offset-7,  .col-md-offset-7,  .col-lg-offset-7  { margin-left: 58.33333333%; }
.col-sm-offset-6,  .col-md-offset-6,  .col-lg-offset-6  { margin-left: 50%; }
.col-sm-offset-5,  .col-md-offset-5,  .col-lg-offset-5  { margin-left: 41.66666667%; }
.col-sm-offset-4,  .col-md-offset-4,  .col-lg-offset-4  { margin-left: 33.33333333%; }
.col-sm-offset-3,  .col-md-offset-3,  .col-lg-offset-3  { margin-left: 25%; }
.col-sm-offset-2,  .col-md-offset-2,  .col-lg-offset-2  { margin-left: 16.66666667%; }
.col-sm-offset-1,  .col-md-offset-1,  .col-lg-offset-1  { margin-left: 8.33333333%; }
.col-sm-offset-0,  .col-md-offset-0,  .col-lg-offset-0  { margin-left: 0; }

/* Formularios horizontales (login, registro, recuperar pass, usercp):
   sin esto la etiqueta se despegaba del campo al angostar. */
.form-horizontal .control-label {
    padding-top: 7px;
    margin-bottom: 0;
    text-align: right;
}

/* Modales de bootstrap: sombra y ancho siempre iguales. */
.modal-content { box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); }

/* Utilidades de bootstrap que tambien viven dentro de media
   queries y por eso "desaparecen" al angostar la ventana. */
.hidden-xs, .hidden-sm, .hidden-md, .hidden-lg { display: block !important; }
.visible-xs, .visible-sm, .visible-md, .visible-lg { display: none !important; }

.form-inline .form-control { display: inline-block; width: auto; vertical-align: middle; }
.form-inline .form-group { display: inline-block; margin-bottom: 0; vertical-align: middle; }

.modal-dialog { width: 600px; margin: 30px auto; }
.modal-sm { width: 300px; }
.modal-lg { width: 900px; }

/* ---------------------------------------------------------
   3. NADA DE MEDIDAS RELATIVAS A LA VENTANA
   vw / vh / clamp() hacen que las cosas cambien de tamano al
   redimensionar. En un diseno estatico eso no puede pasar.
   --------------------------------------------------------- */

/* Modal de login: ancho fijo, no 90vw. */
.modal_div {
    max-width: 599px !important;
}

/* Titulo del modulo de Eventos e Invasiones: usaba
   clamp(1.5rem, 3.5vw, 2.4rem) y encogia al angostar. */
.mu-ev-title {
    font-size: 2.4rem !important;
}

/* Grilla de proximos eventos: columnas fijas en vez de
   auto-fit, asi siempre son 4 y siempre miden igual. */
.mu-ev-next {
    grid-template-columns: repeat(4, 1fr) !important;
}

/* La grilla de regalos del XShop era 1 columna en pantallas
   chicas; ahora siempre 2. */
.gift-grid {
    grid-template-columns: 1fr 1fr !important;
}

/* Tarjetas de descarga: siempre en linea, nunca apiladas. */
.downloads-support-banner { flex-wrap: nowrap !important; }
.download-card { flex-direction: row !important; align-items: center !important; }
.download-card-side { width: auto !important; }

/* ---------------------------------------------------------
   4. FILAS QUE NO SE PARTEN
   Estos contenedores tienen hijos de ancho fijo. Si se
   permite el wrap, al angostar la ventana bajan de renglon y
   el diseno "salta". Con nowrap se mantienen y lo unico que
   pasa es que hay que scrollear.
   --------------------------------------------------------- */

.fast-button,
.block-widget {
    flex-wrap: nowrap !important;
}

/* ---------------------------------------------------------
   5. IMAGENES
   Sin max-width:100% las imagenes conservan su tamano real,
   que es justamente lo que queremos en un diseno estatico.
   Igual las dejamos contenidas dentro de su caja padre.
   --------------------------------------------------------- */

.img-responsive {
    display: block;
    max-width: 100%;
    height: auto;
}

/* Las tablas no deben generar su propio scroll interno ni
   recortar celdas: el scroll es uno solo, el de la pagina. */
.table-responsive {
    overflow-x: visible !important;
    overflow-y: visible !important;
    width: auto !important;
    margin-bottom: 20px !important;
    border: 0 !important;
    -ms-overflow-style: auto !important;
}

.table-responsive > .table { margin-bottom: 20px !important; }
.table-responsive > .table > thead > tr > th,
.table-responsive > .table > thead > tr > td,
.table-responsive > .table > tbody > tr > th,
.table-responsive > .table > tbody > tr > td,
.table-responsive > .table > tfoot > tr > th,
.table-responsive > .table > tfoot > tr > td { white-space: normal !important; }

/* ---------------------------------------------------------
   6. AJUSTES SEO/HOME
   Este archivo carga al final; estas reglas fijan la jerarquia visual
   nueva sin depender del orden de otros CSS del template.
   --------------------------------------------------------- */

.seo-hero-copy {
    position: absolute !important;
    z-index: 5 !important;
    left: 0 !important;
    right: 0 !important;
    top: 548px !important;
    text-align: center !important;
    pointer-events: none !important;
}

.seo-hero-copy h1 {
    margin: 0 !important;
    color: rgba(169, 187, 204, 0.78) !important;
    font-family: "Exo 2", "Open Sans", sans-serif !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    letter-spacing: 0.4px !important;
    line-height: 1.2 !important;
    text-transform: none !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8) !important;
}

.seo-hero-copy p {
    margin: 6px auto 0 !important;
    max-width: 780px !important;
    color: rgba(126, 148, 170, 0.72) !important;
    font-family: "Exo 2", "Open Sans", sans-serif !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    letter-spacing: 0.2px !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.78) !important;
}

.fast-button {
    gap: 2px !important;
}

.fast-button .cs-winner-card {
    order: 1 !important;
    width: 448px !important;
    grid-template-columns: 90px minmax(0, 1fr) 74px !important;
    border-color: rgba(255, 175, 67, 0.62) !important;
    box-shadow: 0 14px 38px rgba(0, 0, 0, 0.5), 0 0 24px rgba(255, 122, 58, 0.16), inset 0 0 34px rgba(255, 92, 62, 0.16) !important;
}

.fast-button .wa-block {
    order: 2 !important;
    width: 374px !important;
}

.fast-button .server-summary-block {
    order: 3 !important;
    width: 374px !important;
}