.menuBox {
    background: #2d5470;
    width: 100%;
    height: 80px;
    display: grid;
    grid-template-rows: 80px;
    grid-template-columns: 90px 400px 1fr 100px 100px;
    grid-template-areas: " logo  area  .  user  menu";    
    place-items: center;
}
.logo {
    grid-area: logo;
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
}
.logo img {
    height: 70px;
}
.user {
    grid-area: user;
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    color: #fff;
    font-family: Lato;
    font-size: 14px;
    font-style: italic;
}
.area {
    grid-area: area;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 6px 29px 15px 20px 10px;
    grid-template-areas:
        "."
        "title1"
        "title2"
        "title3"
        ".";
}    
.title1,.title2,.title3 {
    display: grid;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    place-items: start start;
}
.title1 { grid-area: title1; margin: 0; color: #b89550; font-family: Lato; font-size: 20px; font-weight: bold; font-style: italic; letter-spacing: 1px; }
.title2 { grid-area: title2; margin: 0; color: #a8c4d8; font-family: Lato; font-size: 11px; font-style: italic; letter-spacing: 1px; }
.title3 { grid-area: title3; margin: 0; color: #8ab0c8; font-family: Lato; font-size: 10px; font-style: italic; }
.menu {
    grid-area: menu;
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    cursor: pointer;
}

/* ── Pantalla de celular (max 600px) ─────────────────────────────────────── */
@media (max-width: 600px) {
    .menuBox {
        height: 60px;
        grid-template-rows: 60px;
        grid-template-columns: 70px 1fr 60px;
        grid-template-areas: "logo  area  menu";
    }
    .logo img {
        height: 50px;
    }
    .area {
        grid-template-rows: 7px 25px 11px 9px 8px;
    }
    .title1 { font-size: 19px; }
    .title2 { font-size: 14px;  }
    .title3 { display: none;   }
}