@font-face {
    font-family: 'LondonMM';
    src: url('fontes/LondonMM.woff2') format('woff2'), url('fontes/LondonMM.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'LondonBetween';
    src: url('fontes/LondonBetween.woff2') format('woff2'), url('fontes/LondonBetween.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

:root {
    --cor-site: #000;
    --cor-fonte: #231F20;
    --cor-secundaria: #BA9967;
    --cor-auxiliar: #F1EBD8;
    /* dourado escurecido: o #BA9967 não tem contraste para texto sobre o creme */
    --cor-secundaria-escura: #7A5A2F;
    --fonte-padrao: "Montserrat", sans-serif;
    --fonte-secundaria: "LondonMM", serif;
    --fonte-secundaria500: "LondonBetween", serif;
}

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; }

body {
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    background: var(--cor-auxiliar) radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, .55), transparent 60%);
    color: var(--cor-fonte);
    font-family: var(--fonte-padrao);
    font-weight: 300;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; transition: color .25s; }
a:hover, a:focus-visible { color: var(--cor-secundaria-escura); }
a:focus-visible { outline: 1px solid var(--cor-secundaria-escura); outline-offset: 4px; }

ul { list-style: none; margin: 0; padding: 0; }

.em-breve {
    flex: 1;
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    padding: 64px 24px 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.logo { margin: 0 0 56px; line-height: 0; color: var(--cor-fonte); }
.logo svg { width: 220px; height: auto; }

.sobretitulo {
    display: block;
    font-size: .75rem;
    font-weight: 500;
    letter-spacing: .35em;
    text-transform: uppercase;
    color: var(--cor-secundaria-escura);
}

.titulo {
    margin: 12px 0 20px;
    font-family: var(--fonte-secundaria);
    font-weight: 500;
    font-size: clamp(2.25rem, 7vw, 3.75rem);
    line-height: 1.1;
    color: var(--cor-fonte);
}

.texto { max-width: 460px; margin: 0 auto; font-size: 1rem; opacity: .85; }

/* linha dourada separadora */
.contatos, .enderecos {
    margin-top: 48px;
    padding-top: 40px;
    background: linear-gradient(var(--cor-secundaria), var(--cor-secundaria)) top center / 48px 1px no-repeat;
}

.contatos { width: 100%; display: flex; flex-direction: column; gap: 16px; }
.contatos li { display: flex; flex-direction: column; gap: 2px; }

.rotulo, address strong {
    font-size: .75rem;
    font-weight: 500;
    letter-spacing: .25em;
    text-transform: uppercase;
    color: var(--cor-secundaria-escura);
}

.contatos a { font-size: 1.125rem; font-weight: 400; overflow-wrap: anywhere; }

.enderecos { width: 100%; display: grid; gap: 32px; }

address { font-style: normal; font-size: .9375rem; }
address strong {
    display: block;
    margin-bottom: 8px;
    font-family: var(--fonte-secundaria500);
    font-size: 1.375rem;
    font-weight: 500;
    letter-spacing: .05em;
    text-transform: none;
}

.mapa {
    display: table;
    margin: 10px auto 0;
    padding-bottom: 2px;
    border-bottom: 1px solid var(--cor-secundaria);
    font-size: .75rem;
    font-weight: 500;
    letter-spacing: .15em;
    text-transform: uppercase;
}

.redes { display: flex; justify-content: center; gap: 16px; margin-top: 48px; }
.redes a {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--cor-secundaria);
    border-radius: 50%;
    transition: background .25s, color .25s, border-color .25s;
}
.redes a:hover, .redes a:focus-visible { background: var(--cor-fonte); border-color: var(--cor-fonte); color: var(--cor-auxiliar); }
.redes svg { width: 18px; height: 18px; }

.rodape {
    padding: 24px;
    text-align: center;
    font-size: .75rem;
    letter-spacing: .1em;
    color: rgba(35, 31, 32, .6);
}

@media (min-width: 640px) {
    .em-breve { padding-top: 80px; }
    .logo svg { width: 260px; }
    .contatos { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 24px 48px; }
}