html, body {
  height: 100%;         
  margin: 0;
}



/* Fuente para headers */
@font-face {
  font-family: 'IdentificationMono';
  src: url('5Identification-Mono.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* Fuente para texto general */
@font-face {
  font-family: 'FutureEarth';
  src: url('future-earth.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}








body {
  display: flex;
  flex-direction: column; 
  background-color: #f2f2f2; 
  font-family: 'Trebuchet MS', sans-serif;
  color: #333;
}
.topbar {
  background: linear-gradient(0deg, rgba(181,181,181,1) 0%, rgba(255,255,255,1) 100%);
  padding: 0px 0px;
  display: flex;
  justify-content: space-between; /* logo izquierda, imagen derecha */
  align-items: center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

.logo-link img {
  height: 60px;
  display: block;
}

.logo-right img {
  height: 60px;
  display: block;
  margin: 0;
  padding: 0;
}



.topbar2 {
  background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(48,48,48,1) 85%, rgba(31,31,31,1) 100%);
  color: lightgray;
  padding: 5px 1px; /* aire vertical y horizontal */
  display: flex;
  justify-content: flex-start; /* links alineados a la izquierda */
  align-items: center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

.topbar2 a {
  color: #FF0086;


  text-decoration: none;

}
.topbar2 a:hover {
  color: white;


  text-decoration: none;

}






h1, h2, h3 {
  font-family: 'IdentificationMono', sans-serif;
  display: inline-block;            
  position: relative;
  margin-bottom: 0px;
  padding-bottom: 0px;
}

h1::after, h2::after, h3::after {
  content: "";
  display: block;
  width: 100%;                       
  border-bottom: 2px solid #bababa;  
  margin-top: 0px;                  
}







.article {
  flex: 1;                
  background: white;
  margin: 0 auto;          
  padding: 10px;
  width: 100%;           
  max-width: 1100px;       
border-top: 10px double #ababab;
border-right: 2px dashed #ababab;
border-bottom: 10px double #ababab;
border-left: 2px dashed #ababab;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Footer */
.footer {
  background: #000000;
background: linear-gradient(0deg,rgba(0, 0, 0, 1) 0%, rgba(36, 36, 36, 1) 81%, rgba(31, 31, 31, 1) 100%);
  color: white;
  text-align: center;
  padding: 15px;

  width: 100%;
  max-width: 1100px;   
  margin: 0 auto;    
}





a {
  color: #FF0086;
  text-decoration: none;
}

a:hover {
  color: #FF0086;
  text-decoration-line: underline;     
  
  text-decoration-thickness: 2px;       
}

.topbar, .topbar2, .article, .footer {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  box-sizing: border-box;
}







/* Estilos normales (desktop) ya los tienes arriba */

/* Vista móvil */
@media (max-width: 768px) {
  /* Topbar */
  .topbar {
    justify-content: center; /* centra el logo principal */
  }

  .logo-right {
    display: none; /* oculta el logo de la derecha */
  }

  .logo-link img {
    height: 50px; /* opcional: más pequeño en móvil */
  }

  /* Topbar2 */
  .topbar2 {
    flex-wrap: wrap; /* permite que los links bajen a otra línea */
    justify-content: center; /* centra los links */
  }

  .topbar2 a {
    display: inline-block;
    margin: 5px; /* espacio entre links */
    font-size: 12px; /* más compacto */
  }
}




.article img {
  max-width: 50%;   /* tamaño agradable en escritorio */
  height: auto;     /* mantiene proporción */
  display: block;
  margin: 10px auto; /* centrado con aire */
}

/* Vista móvil */
@media (max-width: 768px) {
  .article img {
    max-width: 100%; /* ocupa todo el ancho del artículo */
    height: auto;
  }
}