:root {

    --texto: #222;
    --titulo: #111;
    --link: #0057b8;
    --borda: #dddddd;
    --fundo: #fafafa;

}

* {

    box-sizing: border-box;

}

body {

    margin: 0;

    background: var(--fundo);

    color: var(--texto);

    font-family:
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        sans-serif;

    line-height: 1.7;

}

.barra {

    width: 100%;
    height: 55px;
    border: none;
    display: block;

}

main {

    max-width: 960px;

    margin: auto;

    padding: 40px 25px;

}

header {

    display: flex;

    gap: 30px;

    align-items: center;

    margin-bottom: 50px;

}

.foto {

    width: 160px;

    height: 160px;

    border-radius: 50%;

    object-fit: cover;

    border: 1px solid var(--borda);

}

h1 {

    margin-top: 0;

    margin-bottom: 10px;

    color: var(--titulo);

    font-size: 2rem;

}

h2 {

    margin-top: 45px;

    margin-bottom: 15px;

    border-bottom: 1px solid var(--borda);

    padding-bottom: 8px;

    color: var(--titulo);

}

.cargo {

    font-size: 1.15rem;

    color: #555;

}

a {

    color: var(--link);

    text-decoration: none;

}

a:hover {

    text-decoration: underline;

}

ul {

    padding-left: 22px;

}

.links {

    display: flex;

    flex-wrap: wrap;

    gap: 18px;

}

.links a {

    padding: 8px 14px;

    border: 1px solid var(--borda);

    border-radius: 6px;

    background: white;

}

.links a:hover {

    background: #f3f3f3;

}

.agenda {

    width: 100%;

    height: 700px;

    border: 1px solid #ccc;

}

footer {

    text-align: center;

    padding: 35px;

    color: #666;

    border-top: 1px solid var(--borda);

    margin-top: 60px;

}

@media (max-width: 700px) {

    header {

        flex-direction: column;

        text-align: center;

    }

    .foto {

        width: 130px;
        height: 130px;

    }

    .links {

        justify-content: center;

    }

}