body {
    margin: 0;
    padding: 0;
    
    /* PATRÓN DE AJEDREZ EN BLANCO Y NEGRO (Código Puro) */
    background-color: #ffffff;
    background-image: 
        linear-gradient(45deg, #000000 25%, transparent 25%, transparent 75%, #000000 75%, #000000),
        linear-gradient(45deg, #000000 25%, transparent 25%, transparent 75%, #000000 75%, #000000);
    background-size: 60px 60px; /* Tamaño de los cuadritos del ajedrez */
    background-position: 0 0, 30px 30px;
}

/* Contenedor principal de la barra (Azul) */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: stretch;     /* <--- CAMBIA ESTO: Estira los elementos internos al tope vertical */
    background-color: #0015f8;
    padding: 0 40px;          /* <--- IMPORTANTE: Deja el primer número en 0 para quitar espacio libre arriba/abajo */
    height: 100px;             /* <--- Ponle una altura fija a tu barra (puedes cambiar 60px por lo que quieras) */
    border-bottom: 3px solid #002f75; 
}

.navbar .logo {
    font-family: "Franklin Gothic Heavy", "Arial Black", sans-serif;
    font-size: 60px;
    font-weight: 900;
    letter-spacing: 2px;
    color: #ffffff;
    text-shadow: 2px 2px 0px #000000;
    
    /* RELLENO TOTAL DE BORDE A BORDE */
    background-color: #ff0000;
    height: 80%;             /* Obliga al fondo rojo a estirarse a toda la altura de la barra */
    display: flex;            /* Cambiamos a flex para poder centrar el texto adentro */
    align-items: center;      /* Centra el texto verticalmente dentro del fondo rojo */
    padding: 0px 73px;     /* Ajusta solo los lados (izq/der), arriba y abajo queda en 0 */
    transform: scaleY(1.6);   /* Mantiene tu efecto de estirado en el texto */
}

/* ESTO DEVUELVE EL ORDEN: Contenedor de la lista de enlaces */
.nav-links {
    list-style: none;
    display: flex;
    gap: 28px;
    margin: 0;
    padding: 0 30px; /* Le da una pequeña separación al borde derecho de la pantalla */
    
    /* ESTO VA A CENTRAR LOS BOTONES VERTICALMENTE */
    align-items: center; /* Obliga a que todos los enlaces se alineen justo al medio de la barra */
}

/* Estilo de los enlaces individuales dentro de la barra azul */
.nav-links a {
    font-family: "Franklin Gothic Demi Cond", "Arial Narrow", sans-serif;
    color: #ffffff; 
    text-decoration: none;
    font-size: 18px;
    font-weight: 900;
    transition: color 0.2s ease;
    display: inline-block; 
    transform: scaleY(1.6); 
    text-shadow: 1.5px 1.5px 0px #000000; /* <--- AQUÍ: Sombra sólida negra */
}

/* Efecto cuando pasas el mouse por encima de los links */
.nav-links a:hover {
    color: #feb00c; /* Cambia a tu amarillo al pasar el cursor */
}
/* Contenedor para centrar el contenido de la página */
.content-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    
    /* ================================================================== */
    /* CAMBIA ESTO: De center a flex-start para mandar todo arriba       */
    /* ================================================================== */
    justify-content: flex-start; 
    /* ================================================================== */
    
    padding: 40px 20px; /* Si quieres más espacio arriba del título, puedes subir el 40px a 60px o lo que gustes */
    text-align: center;
    gap: 20px;
    background-color: #ffb700;   
    max-width: 1000px;           
    width: 100%;
    margin: 0 auto;              
    min-height: calc(100vh - 60px); 
    border-left: 4px solid #000000;
    border-right: 4px solid #000000;
    box-sizing: border-box;
}

.main-title {
    font-family: "Franklin Gothic Heavy", "Arial Black", sans-serif;
    font-size: 36px;
    font-weight: 900;
    letter-spacing: 1px;
    color: #ffffff; /* Texto blanco */
    margin: 0;
    
    /* El estirado vertical */
    display: inline-block;
    transform: scaleY(1.8); 

    /* TU SOMBRA MACIZA APILADA */
    text-shadow: 
        1px 1px 0px #000000,
        2px 2px 0px #000000,
        3px 3px 0px #000000,
        4px 4px 0px #000000,
        5px 5px 0px #000000;
}

/* El nuevo grupo horizontal para el personaje y el bloque */
.promo-wrapper {
    display: flex;
    flex-direction: row;     /* <--- Los pone uno al lado del otro */
    align-items: center;     /* Centra verticalmente el botón respecto al personaje */
    justify-content: center;
    gap: 6px;               /* Distancia entre la mano del personaje y el bloque */
    max-width: 800px;
    width: 100%;
}

/* Ajustes finos de la imagen */
.server-image {
    max-width: 580px;        /* Reducimos un toque el tamaño máximo para que compartan espacio de forma fluida */
    width: 100%;
    height: auto;
    display: block;
    /* EN ESTA PARTE: Forzamos al bloque a moverse hacia la izquierda */
    margin-right: -290px
}

/* Tu bloque de Discord (Mantiene tu diseño original, quitamos márgenes innecesarios) */
.discord-block {
    font-family: "Franklin Gothic Demi Cond", "Arial Narrow", sans-serif;
    font-size: 22px;
    font-weight: 900;
    color: #ffffff;
    text-decoration: none;
    letter-spacing: 1px;
    background-color: #5865F2; 
    padding: 14px 40px;        
    display: inline-block;
    transform: scaleY(1.2);
    text-shadow: 1.5px 1.5px 0px #000000;
    white-space: nowrap;

    /* ================================================================== */
    /* NUEVA SOMBRA SÓLIDA PARA EL BLOQUE NEGRO ESTILO CÓMIC              */
    /* ================================================================== */
    box-shadow: 5px 5px 0px #000000; /* Desplaza la sombra 5px abajo y a la derecha */
    /* ================================================================== */

    transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

/* EFECTO HOVER: Para cuando pases el mouse por encima */
.discord-block:hover {
    background-color: #454fbf; 
    transform: scaleY(1.2) scale(1.03); 
    
    /* Opcional: Hace que la sombra se mueva un pelín al pasar el mouse para dar efecto de hundido */
    box-shadow: 3px 3px 0px #000000; 
}

/* Estilo para el texto de bienvenida debajo del título principal */
.welcome-text {
    font-family: "Franklin Gothic Demi Cond", "Arial Narrow", sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #00000;    /* Texto negro limpio sobre el fondo amarillo */
    max-width: 700px;  /* Para que el texto no se estire feo a lo ancho */
    line-height: 1.4;
    margin-top: 15px;
    text-transform: none; /* Lo hace ver más agresivo y corporativo */
    transform: scaleY(1.2);
    
    /* ================================================================== */
    /* DE CENTRADO A IZQUIERDA (Estilo Word)                              */
    /* ================================================================== */
    text-align: left;       /* <--- Alinea el texto a la izquierda */
    width: 100%;
}
/* Estilo para el logotipo debajo del texto de bienvenida */
.center-logo, .nuevo-banner {
    width: 100%;
    height: auto;
    display: block;
}

/* Si quieres que propa00.png conserve su sombrita dura ochentera */
.nuevo-banner {
    filter: drop-shadow(5px 5px 0px #000000);
}

/* El contenedor principal que divide Izquierda (Imágenes) y Derecha (Texto) */
.postura-container {
    display: flex;
    align-items: flex-start;
    gap: 35px;               /* Espacio de separación entre imágenes y texto */
    margin-top: 30px;
    width: 100%;
}

/* La nueva columna que apila tus logos e imágenes hacia abajo */
.columna-imagenes {
    display: flex;
    flex-direction: column;  /* Fuerza a poner una imagen debajo de la otra */
    gap: 20px;               /* Separa el logo viejo del nuevo banner propa00.png */
    max-width: 450px;        /* El ancho máximo de tu columna izquierda */
    width: 100%;
}

/* El bloque de texto se queda usando el resto de la derecha */
.postura-texto {
    flex: 1;
}

.about-text {
    font-family: "MS Gothic", sans-serif;
    font-size: 20px;
    text-align: left;
    color: #000000;
    font-weight: bold; 

    /* ================================================================== */
    /* ARREGLO PARA QUE NO SE ENCIRE EL TEXTO                             */
    /* ================================================================== */
    display: block;               /* Cambiado de inline-block a block */ 
    transform: scaleY(1.2) ;
    transform-origin: top left;   
    
    /* Aumentamos el interlineado para absorber el 1.3 de estiramiento */
    line-height: 1.2;             
    /* Le damos una separación fija abajo a cada párrafo */
    margin-bottom: 64px;          
    margin-top: 0;
    /* ================================================================== */
}
.contenedor-yt {
  text-align: left;
    display: flex;
    flex-direction: column; 
    align-items: flex-start; 
    gap: 15px; /* Esto va a separar el LOGOYT.png de tu nuevo t43.png de forma limpia */
}

/* Control del tamaño y look para t43.png */
.boton-t43 {
    max-width: 110px; /* Tamaño ideal para que haga juego con el de arriba, puedes ajustarlo */
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.2s ease; /* Suaviza la animación del hover */
}

/* El mismo efecto de animación interactiva para el nuevo botón */
.boton-t43:hover {
    transform: scale(1.05);
}

/* Estilo para el subtítulo "Mirar en.." usando Georgia en negrita */
.subtitulo-yt {
    font-family: "Franklin Gothic Heavy", "Arial Black", sans-serif;
    font-size: 18px;                /* Tamaño similar a los botones del menú */
    font-weight: bold;
    text-transform: uppercase;      /* Fuerza a que todo sea MAYÚSCULAS */
    color: #FFFFFF;                 /* Letras blancas impecables */
    
    /* LA SOMBRA DURA Y SÓLIDA DE TUS BOTONES */
    text-shadow: 2px 2px 0px #000000; 
    
    /* El truco de estirado vertical para que haga juego con el resto */
    display: inline-block;
    transform: scaleY(1.5);
    transform-origin: left;
    
    margin-bottom: 12px;            /* Separación con el logo de abajo */
    letter-spacing: 1px;            /* Un toque de separación entre caracteres */
}

/* Control del tamaño y look de la imagen de YouTube */
.logo-yt {
    max-width: 130px; /* Ajusta este tamaño si lo quieres más grande o pequeño */
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.2s ease;
}

/* Efecto opcional para cuando pases el mouse encima del botón */
.logo-yt:hover {
    transform: scale(1.05);
}
/* Caja contenedora de la advertencia */
.server-warning-box {
    background-color: #000000;      /* Fondo negro puro para que rompa fuerte con el amarillo */
    border: 3px solid #FF0000;      /* Borde rojo de peligro absoluto */
    padding: 15px 20px;
    margin-top: 25px;
    margin-bottom: 25px;
    max-width: 550px;               /* Para que se acomode bien al lado de tu personaje */
    width: 100%;
    box-shadow: 5px 5px 0px #FF0000; /* Sombra sólida roja ochentera */
}

/* Título de la advertencia (Estilo Impact/Botón) */
.warning-title {
    font-family:"Franklin Gothic Heavy", "Arial Black", sans-serif;
    font-size: 18px;
    color: #FF0000;                 /* Letras rojas de alerta */
    text-transform: uppercase;
    transform: scaleX(0.6);
    text-shadow: 1px 1px 0px #000000;
    display: block;
    margin-bottom: 10px;
    letter-spacing: 1px;
}

/* Texto descriptivo de la advertencia (Estilo Georgia estirado y negrita) */
.warning-text {
    font-family: 'SimSun', 'NSimSun', serif;
    font-size: 12px;
    font-weight: bold;
    color: #FFFFFF;                 /* Texto blanco para leerse perfecto sobre negro */
    line-height: 1.5;
    text-align: left;
    margin: 0;
    
    /* Tu estilo característico de estirado */
    display: block;
    transform: scaleY(1.2) scaleX(0.95);
    transform-origin: top left;
}
.boton-idioma {
    font-family: "Franklin Gothic Demi Cond", "Arial Narrow", sans-serif;
    color: #FFFFFF;
    background-color: #000000; /* Un cuadrito negro para que resalte sobre el azul */
    padding: 2px 6px;
    border: 2px solid #FFFFFF;
    text-decoration: none;
    font-size: 14px;
}

.boton-idioma:hover {
    background-color: #FF0000; /* Se pone rojo al pasar el mouse */
    color: #000000;
}
.cartel-politico {
    float: left; /* Lo pega a la izquierda del contenedor amarillo */
    margin-right: 620px; /* Separa el texto para que no quede pegado */
    margin-bottom: 11px; /* Separa el texto que quede abajo */
    border: 2px solid #000000; /* Borde negro rígido para que resalte sobre el amarillo */
    max-width: 280px; /* Controla el tamaño para que no se coma toda la pantalla */
    height: auto;
}