/* 1. El contenedor morado */
.hero-banner {
    background: #50589C;
    /* Quitamos la altura fija para que se adapte, o la reducimos si quieres una barra delgada */
    padding: 20px 0; 
    display: flex;
    align-items:start; /* Centra todo verticalmente */
    border-radius: 15px;
}

/* 2. El contenido interno (Flexbox) */
.hero-content {
    display: flex; /* Esto pone los elementos uno al lado del otro */
    justify-content: space-between; /* Empuja el título a la izq y la barra a la der */
    align-items: center; /* Alineación vertical perfecta */
    width: 100%;
    max-width: 1200px; /* Ancho máximo para que no se pegue a los bordes en pantallas gigantes */
    margin: 0 auto; /* Centrar el contenedor en la pantalla */
    padding: 0 10px; /* Espacio lateral */
}

/* 3. Ajustes al Título */
.hero-content h1 {
    color: white;
    font-size: 4rem; /* Un poco más pequeño para cabecera */
    margin: 0; /* Quitamos margen para que no empuje */
    white-space: nowrap; /* Evita que el texto se rompa en dos líneas */
    font-family: "Honk", system-ui;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings:
        "MORF" 15,
        "SHLN" 100;
}

.hero-content h1 a{
    text-decoration: none;
}


.input-wrapper input {
    /* Ajustamos el padding para una barra de cabecera más delgada */
    padding: 12px 20px 12px 50px; 
    font-size: 1rem;
    border-radius: 30px;
    border: none;
    outline: none;
    width: 100%;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    font-family: "Google Sans Code", monospace;
    font-optical-sizing: auto;
    font-style: normal;
    display: flex;
}

.logout {
    width: 80px;
    margin: 0; /* Quitamos el auto margin anterior */
    display: flex;
}

.logout a {
    text-decoration: none;
    color: aliceblue;
}



/* 5. RESPONSIVE (Importante para celulares) */
@media (max-width: 768px) {
    .hero-content {
        flex-direction: column; /* En celular, vuelven a apilarse verticalmente */
        gap: 15px;
    }
    
    .search-form {
        max-width: 100%; /* Ocupa todo el ancho en celular */
    }
}

body {
    background-color: #6E8CFB;
    font-family: "Google Sans Code", monospace;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    color: antiquewhite;
}