/* Estilos generales de la porqueria esta */
body {
  background-color: #0f0f11; /* Fondo oscuro tipo cmd pero no tan negro */
  color: #e0e0e0;            /* Texto claro */
  font-family: 'Courier New', monospace; /* Fuente retro estilo consola de matrix o algo asi  */
  margin: 0;
  padding: 20px;
}

header {
  text-align: center;
  border-bottom: 2px solid #ff0000; /* Línea roja neón */
  padding-bottom: 15px;
  margin-bottom: 30px;
}



/* Alineación del texto dentro del banner */
.texto-header {
  text-align: center;       /* O 'center' si prefieres que el texto siga centrado */
  flex-grow: 1;
}

.texto-header h1 {
  margin: 0 0 20px auto;
  color: #ff0033;
  text-shadow: 0 0 8px rgba(255, 0, 51, 0.6);
}

.texto-header p {
  margin: 0;
}

/* Banner superior mantenido y centrado */
.banner-top {
 /* La maldita caja flotante se mantenga transparente */
  background-color: transparent;
  border: none;
  /* Linea roja de mierda */
  border-bottom: 2px solid #ff0033;
  padding: 30px;
  max-width: 1200px;
  margin: 0 auto 20px auto;

  display: flex; 
  align-items: center;    /* Centra verticalmente logo y texto */
  gap: 25px;              /* Espacio entre el logo y el texto */
}

/* Estilo para ajustar el tamaño del logo */
.logo-header {
  height: 80px;           /* Ajusta este valor si lo quieres más grande o pequeño */
  width: auto;
  object-fit: contain;
}

h1, h2, h3 {
  color: #ff0000; /* Títulos neón */
  text-shadow: 0 0 8px rgba(255, 0, 0, 0.6); /* Títulos neon pero que brillan y asi */
}

h3{
  text-align: center;
}

/* La mamada de las dos columnas */
.contenedor {
  display: flex; /* Alinea las cajas una al lado de la otra */
  gap: 20px;     /* Espacio entre las columnas */
  max-width: 1000px;
  margin: 0 auto;
}

.caja-widget {
  background-color: #1a1a1e;
  border: 1px solid #333;
  padding: 15px;
  margin-bottom: 15px;
  transition: all 0.3s ease;
}

/* Efecto hover brillante al pasar el cursor */
.caja-widget:hover {
  border-color: #ff0000;
  box-shadow: 0 0 10px rgba(255, 0, 0, 0.2);
}

/* Estilos de lista para la columna izquierda */
.lista-menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.lista-menu li {
  margin-bottom: 8px;
}

/* Rejilla de botones 88x31px */
.grid-botones {
  display: grid; /* Es lo que mantiene en dos columnas */
  grid-template-columns: repeat(2, 88px); /* Crea exactamente 2 columnas del ancho de los botones */
  gap: 10px;                               /* Espacio vertical y horizontal entre botones */
  justify-content: center;                 /* Centra las 2 columnas dentro de la caja de Banners */
  margin-top: 15px;
}

.grid-botones img {
  width: 88px;
  height: 31px;
}

.contenido-principal {
  flex: 3; /* Ocupa 3 partes del espacio disponible */
}

.sidebar {
  flex: 1; /* Ocupa 1 parte del espacio (más estrecha como la vagina de tu madre) */
  background-color: #1a1a1e;
  padding: 15px;
  border: 1px solid #333;
}

.layout-3-columnas {
  display: grid;
  grid-template-columns: 200px 1fr 260px;
  gap: 15px;
  max-width: 1200px;
  margin: 0 auto;
}

/* Estilo para las cajas de las entradas */
.post {
  background-color: #1a1a1e;
  padding: 15px;
  border: 1px solid #333;
  margin-bottom: 20px;
}

/* Enlaces neon ya neon dejo de tener sentido de tantas veces que lo escribo */
a {
  color: #ff009d;
  text-decoration: none;
}

a:hover {
  color: #ffffff;
  text-shadow: 0 0 5px #ff0033;
  text-decoration: underline;
}

.post:hover, .sidebar:hover {
  border-color: #ff0000;
  box-shadow: 0 0 10px rgba(255, 0, 0, 0.2);
  transition: all 0.3s ease; /* Transición suave asi como le doy a tu madre */
}