/* Reset básico */
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:Segoe UI,Roboto,Helvetica,Arial,sans-serif; background:#f4f6f9; color:#333; line-height:1.6; padding:20px; }

header { text-align:center; margin-bottom:20px; }
header h1 { font-size:2rem; color:#1a237e; }

form { display:flex; justify-content:center; margin:10px 0; gap:10px; }
.searchbox { padding:10px; border-radius:8px; border:1px solid #ccc; flex:1; max-width:300px; }
.btn { padding:10px 16px; border:none; border-radius:8px; background:#1a73e8; color:white; cursor:pointer; transition:background 0.3s ease; }
.btn:hover { background:#0c47a1; }
.btn-red { background:#e53935; }
.btn-red:hover { background:#b71c1c; }

.article { background:white; margin:15px auto; padding:15px; border-radius:10px; box-shadow:0 2px 8px rgba(0,0,0,0.1); max-width:800px; }
.article h3 { margin-bottom:10px; font-size:1.2rem; color:#0d47a1; }
.article p { margin-bottom:10px; color:#555; }
.article a { text-decoration:none; color:#1a73e8; font-weight:bold; }

#launches { margin:30px auto; max-width:900px; background:#fff; padding:20px; border-radius:12px; box-shadow:0 3px 10px rgba(0,0,0,0.1); }
#launches h2 { margin-bottom:15px; color:#b71c1c; font-size:1.5rem; }
.launch { border-bottom:1px solid #eee; padding:10px 0; }
.launch:last-child { border-bottom:none; }
.launch strong { color:#333; }
.launch span { display:block; color:#666; font-size:0.9rem; }

@media (max-width:600px) {
  .article, #launches { padding:15px; }
  header h1 { font-size:1.5rem; }
  .article h3 { font-size:1rem; }
}
/* Selector de idioma */
.lang-switch {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
}

.lang-switch a img {
  width: 32px;
  height: auto;
  border: 2px solid transparent;
  border-radius: 4px;
  transition: transform 0.2s, border-color 0.2s;
}

.lang-switch a img:hover {
  transform: scale(1.1);
  border-color: #007bff; /* resalta al pasar el ratón */
}

/* Responsive: en móviles las banderas se centran */
@media (max-width: 600px) {
  .lang-switch {
    justify-content: center;
  }

  .lang-switch a img {
    width: 28px;
  }
}
/* --- Header estilo Joomla --- */
.site-header {
  border-bottom: 2px solid #ddd;
  margin-bottom: 20px;
  font-family: Arial, sans-serif;
}

.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f5f5f5;
  padding: 8px 15px;
  border-bottom: 1px solid #ccc;
}

.lang-switcher img {
  width: 24px;
  margin-right: 6px;
  cursor: pointer;
  transition: transform 0.2s;
}

.lang-switcher img:hover {
  transform: scale(1.1);
}

.search-actions {
  display: flex;
  gap: 10px;
}

.search-form input.searchbox {
  padding: 5px 8px;
  border: 1px solid #aaa;
  border-radius: 4px;
}

.search-form button,
.update-form button {
  padding: 6px 12px;
  border: none;
  border-radius: 4px;
  background: #0073e6;
  color: white;
  cursor: pointer;
}

.update-form button.btn-red {
  background: #e63946;
}

.main-bar {
  background: #fff;
  text-align: center;
  padding: 20px 10px;
	position:right;
	
}

.main-bar h1 {
  margin: 0;
  font-size: 2rem;
  color: #333;
}




header .logo img {
    height: 200px;   /* ajusta el tamaño según necesites */
    width: auto;
position:left;
}
.main-bar {
    display: flex;
    align-items: center;
    justify-content: space-between; /* logo izquierda, título derecha */
    padding: 10px 20px;
    background: #fff;
    border-bottom: 2px solid #eee;
    
}
.main-bar {
    display: flex;
    align-items: center;
    justify-content: center; /* centra el h1 */
    gap: 20px;
}
.main-bar h1 {
    text-align: center;
}


/* Menú de navegación */
.site-nav {
  background: #000; /* franja negra bajo header */
  padding: 0.5rem 1rem;
}
.site-nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  gap: 1.5rem;
}
.site-nav a {
  color: #fff;
  font-family: 'Orbitron', sans-serif; /* parecida al logo */
  font-size: 1.1rem;
  text-transform: uppercase;
  transition: color 0.3s;
}
.login{
	  font-family: 'Orbitron', sans-serif; /* parecida al logo */
	  color: black;
	  transition: color 0.3s;
	  
}
.login a:hover{
	  	color: #ff9800; /* naranja al pasar ratón */
	  	transition: color 0.3s;
}
.login a:visited{
		color:black;
		transition: color 0.3s;
}
.site-nav a:hover {
  color: #ff9800; /* naranja al pasar ratón */
}
.btn-instagram {
  display: inline-flex;
  align-items: center;
  background: #E1306C;
  color: #fff;
  text-decoration: none;
  padding: 8px 15px;
  border-radius: 30px;
  font-weight: bold;
  transition: 0.3s;
  margin-top: 10px;
}

.btn-instagram:hover {
  background: #c72c61;
}

.btn-instagram .icon {
  width: 20px;
  height: 20px;
  margin-right: 8px;
}