.banner {
    text-align: right;  
    display: flex; 
    align-items:center;
    font-family: Arial, Helvetica, sans-serif;
    background-image:linear-gradient(to right, white,#00847d); 
    color:white;
    /*padding:10px;*/
    justify-content: space-between; /* Empuja el logo a un lado y el texto al otro */
    height: 150px;
    overflow: hidden; /* Evita que contenidos extraños ensanchen el banner */
}

.banner div {
    text-align: right;
    flex-grow: 1; 
    padding-right: 20px;
}

.banner h1, .banner h2, .banner h3 {
    margin: 0;
    padding: 2px 0;
    color:white;
}

header img {
    width:300px; 
    height: auto; 
    background:white;
    /* float:left; */
    flex-shrink: 0;
}

nav {
    background-color: #f8f8f8; /* Opcional: un color de fondo para ver el área */
    width: 100%;               /* Asegura que el nav ocupe todo el ancho */
    border-bottom: 2px solid #00847d; /* Una línea decorativa */
}

nav ul {
    list-style-type: none; /* Quitamos las viñetas */
    display: flex;            /* Activamos flexbox para los ítems */
    width: 100%;
}
nav li {
    display: block; /* Ítems del menú en una línea horizontal */ 
    font-family: Arial, Helvetica, sans-serif;
    font-size: large;
    color: #00847d;
    flex: 1;
    text-align: center;
    transition: background 0.3s; /* Efecto suave al pasar el ratón */
}
nav a {
    text-decoration: none;
    color: #00847d;
}

.menu-but {
    height: 1em;
    width: auto;
    vertical-align: middle;
}

body {
    font-family: Arial, Helvetica, sans-serif;
}

body h1, body h2, body h3, body a {
    color: #00847d;
}

footer {
    color: white;
    background-image:linear-gradient(to left, white,#00847d); 
    display: flex;
    justify-content: space-between;
    padding: 10px 10px;
    margin-top: 10px; /* Separa el footer del contenido del block content */
    font-family: Arial, sans-serif;
}

footer .right { text-align: right;}