/* Barsan: estilos comuns a todas as páginas.
 *
 * Ordem: fonte, tokens, base, estrutura (topo e rodapé), componentes (botão,
 * link, foto, placa), seções, chamada e páginas internas. O que é só da Home
 * fica em home.css, e os campos de formulário em formulario.css. Seletores de
 * uma classe sempre que possível, para nenhuma regra anular outra por
 * especificidade.
 *
 * Celular primeiro. Larguras de corte: 30em (celular grande), 40em (tablet)
 * e 60em (computador, onde o menu sai do painel e vai para a linha do topo).
 */

/* Archivo variável, só o recorte latino (cobre o português). A largura vai
 * de 62% a 125%: títulos usam 125%, letra larga e fina como a do logotipo
 * antigo; o texto corrido usa 100%. */
@font-face {
    font-family: "Archivo";
    src: url("../fonts/archivo.woff2") format("woff2");
    font-weight: 100 900;
    font-stretch: 62% 125%;
    font-style: normal;
    font-display: swap;
}

/* Tokens ------------------------------------------------------------------ */

:root {
    /* Cores. O laranja vem da esfera do logo; o cinza, do logotipo. */
    --fundo: #f5f5f3;
    --grafite: #26292d;
    --grafite-claro: #3a3e43;
    --cinza: #5d6166;
    --cinza-claro: #a1a3a6;
    --linha: #d9dad7;
    --laranja: #e8820f;
    /* Botão laranja com texto branco: mais fundo que o da marca para o
     * branco ter contraste (3,3:1, suficiente para o texto do botão, que é
     * grande e em negrito). */
    --laranja-botao: #d97208;
    --laranja-botao-escuro: #b85c05;
    --cobre: #a85300;
    --branco: #ffffff;
    --texto-sobre-escuro: #d6d7d8;
    --linha-sobre-escuro: rgba(255, 255, 255, 0.16);
    /* Avisos de formulário. Os dois passam de 4,5:1 sobre o branco e sobre
     * o fundo. */
    --erro: #b3261e;
    --erro-escuro: #8c1d17;
    --sucesso: #1f6b3a;
    /* Hachura do lugar de foto que ainda não chegou. */
    --hachura: #e9eae7;
    --hachura-traco: #cfd1cc;

    /* Contorno do foco do teclado. Cada superfície escura ou laranja troca
     * por uma cor que contraste com ela. */
    --foco: var(--cobre);

    --fonte: "Archivo", "Helvetica Neue", Arial, sans-serif;
    --larga: 125%;

    /* Escala tipográfica: 14, 17, 21, 28-40 e 26-48 px. */
    --texto-p: 0.875rem;
    --texto: 1.0625rem;
    --texto-m: 1.3125rem;
    --texto-g: clamp(1.75rem, 1.35rem + 1.8vw, 2.5rem);
    --texto-gg: clamp(1.625rem, 1rem + 3.2vw, 3rem);

    --margem: 1rem;
    --largura: 72rem;
    --secao: clamp(3.5rem, 2.5rem + 5vw, 7rem);
}

@media (min-width: 40em) {
    :root {
        --margem: 1.5rem;
    }
}

@media (min-width: 60em) {
    :root {
        --margem: 2rem;
    }
}

/* Base -------------------------------------------------------------------- */

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

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--fundo);
    color: var(--grafite);
    font-family: var(--fonte);
    font-size: var(--texto);
    font-stretch: 100%;
    line-height: 1.6;
}

img {
    display: block;
    max-width: 100%;
}

/* O hidden vale mesmo em elemento cuja classe muda o display (um .botao
 * escondido pelo JavaScript, por exemplo). */
[hidden] {
    display: none !important;
}

h1,
h2,
h3,
p,
ul,
dl,
dd {
    margin: 0;
}

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

h1,
h2,
h3 {
    line-height: 1.15;
    text-wrap: balance;
}

a {
    color: inherit;
}

:focus-visible {
    outline: 3px solid var(--foco);
    outline-offset: 3px;
}

.interno {
    width: min(100% - 2 * var(--margem), var(--largura));
    margin-inline: auto;
}

.pular {
    position: absolute;
    top: -10rem;
    left: var(--margem);
    z-index: 20;
    padding: 0.75rem 1rem;
    background: var(--grafite);
    color: var(--branco);
    --foco: var(--laranja);
}

.pular:focus {
    top: 0.5rem;
}

/* Topo -------------------------------------------------------------------- */

.topo {
    position: relative;
    z-index: 10;
    background: var(--fundo);
    border-bottom: 1px solid var(--linha);
}

.topo__interno {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    min-height: 4.25rem;
    padding-block: 0.5rem;
}

.logo {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    margin-right: auto;
    color: var(--cinza);
    text-decoration: none;
}

.logo__marca {
    flex: none;
    width: 2rem;
    height: 2rem;
}

.logo__texto {
    display: flex;
    flex-direction: column;
}

.logo__nome {
    font-size: 1.375rem;
    font-stretch: var(--larga);
    font-weight: 300;
    line-height: 1;
}

/* "engenharia" espaçado embaixo do nome, como no logotipo antigo. */
.logo__descricao {
    display: none;
    margin-top: 0.25rem;
    font-size: 0.6875rem;
    letter-spacing: 0.34em;
    line-height: 1;
}

.logo--rodape {
    color: var(--cinza-claro);
}

@media (min-width: 30em) {
    .logo__marca {
        width: 2.25rem;
        height: 2.25rem;
    }

    .logo__nome {
        font-size: 1.625rem;
    }

    .logo__descricao {
        display: block;
    }
}

/* O botão só existe com JavaScript (a classe .js vem do <head>): sem ele o
 * menu fica sempre visível e o botão não faria nada. */
.topo__menu {
    display: none;
}

.js .topo__menu {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding: 0 0.75rem;
    border: 1px solid var(--linha);
    background: transparent;
    color: var(--grafite);
    font: inherit;
    font-weight: 500;
    cursor: pointer;
}

.topo__menu-icone,
.topo__menu-icone::before,
.topo__menu-icone::after {
    display: block;
    width: 1.125rem;
    height: 2px;
    background: currentColor;
}

.topo__menu-icone {
    position: relative;
}

.topo__menu-icone::before,
.topo__menu-icone::after {
    content: "";
    position: absolute;
    left: 0;
}

.topo__menu-icone::before {
    top: -6px;
}

.topo__menu-icone::after {
    top: 6px;
}

/* Aberto, as três barras viram um X. */
.topo__menu[aria-expanded="true"] .topo__menu-icone {
    background: transparent;
}

.topo__menu[aria-expanded="true"] .topo__menu-icone::before {
    top: 0;
    transform: rotate(45deg);
}

.topo__menu[aria-expanded="true"] .topo__menu-icone::after {
    top: 0;
    transform: rotate(-45deg);
}

.topo__whatsapp {
    padding-inline: 0.75rem;
}

@media (min-width: 60em) {
    .js .topo__menu {
        display: none;
    }
}

/* No celular o botão do WhatsApp mostra só o ícone; o texto continua lá
 * para leitores de tela. */
@media (max-width: 39.99em) {
    .topo__whatsapp-texto {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
}

@media (max-width: 22.49em) {
    .topo__menu-texto {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
}

/* Menu -------------------------------------------------------------------- */

/* Sem JavaScript, o menu ocupa uma linha própria abaixo do logo. */
.menu {
    order: 1;
    width: 100%;
}

.menu__lista {
    display: flex;
    flex-wrap: wrap;
    gap: 0 1.5rem;
}

.menu__link {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    color: var(--grafite);
    font-weight: 500;
    text-decoration: none;
}

.menu__link:hover {
    color: var(--cobre);
}

.menu__link[aria-current="page"] {
    text-decoration: underline;
    text-decoration-color: var(--cobre);
    text-decoration-thickness: 3px;
    text-underline-offset: 0.5em;
}

/* Botão com cara de item do menu: o Sair do painel, que vai por POST. */
.menu__botao {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
}

/* Celular e tablet com JavaScript: o menu vira um painel sob o topo. */
@media (max-width: 59.99em) {
    .js .menu {
        display: none;
        position: absolute;
        top: 100%;
        right: 0;
        left: 0;
        padding: 0.25rem var(--margem) 1rem;
        background: var(--fundo);
        border-bottom: 1px solid var(--linha);
        box-shadow: 0 1.5rem 2rem -1.5rem rgba(38, 41, 45, 0.35);
    }

    .js .menu--aberto {
        display: block;
    }

    .js .menu__lista {
        flex-direction: column;
    }

    .js .menu__link {
        display: flex;
        min-height: 3.25rem;
        border-bottom: 1px solid var(--linha);
        font-size: var(--texto-m);
    }

    .js .menu__botao {
        width: 100%;
    }
}

@media (min-width: 60em) {
    .menu {
        order: 0;
        width: auto;
        margin-right: 1.25rem;
    }

    .menu__lista {
        gap: 0 1.75rem;
    }
}

/* Rodapé ------------------------------------------------------------------ */

.rodape {
    padding-block: 3rem 1.5rem;
    background: var(--grafite);
    color: var(--texto-sobre-escuro);
    --foco: var(--laranja);
}

.rodape a {
    color: var(--branco);
    text-underline-offset: 0.2em;
}

.rodape__grade {
    display: grid;
    gap: 2.5rem;
}

.rodape__texto {
    margin-top: 1rem;
    max-width: 30em;
}

.rodape__contato {
    border-top: 1px solid var(--linha-sobre-escuro);
}

.rodape__linha {
    display: grid;
    gap: 0.125rem;
    padding-block: 0.75rem;
    border-bottom: 1px solid var(--linha-sobre-escuro);
}

.rodape__linha dt {
    color: var(--cinza-claro);
    font-size: var(--texto-p);
}

.rodape__base {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 2rem;
    margin-top: 2.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--linha-sobre-escuro);
    color: var(--cinza-claro);
    font-size: var(--texto-p);
}

@media (min-width: 40em) {
    .rodape__linha {
        grid-template-columns: 7rem 1fr;
        gap: 1rem;
    }
}

@media (min-width: 60em) {
    .rodape__grade {
        grid-template-columns: 5fr 7fr;
        gap: 4rem;
    }
}

/* Botão e link ------------------------------------------------------------ */

.botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    padding: 0.625rem 1.125rem;
    border: 2px solid transparent;
    font-family: inherit;
    font-size: 1.1875rem;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
}

.botao__icone {
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
    fill: currentColor;
}

.botao--laranja {
    background: var(--laranja-botao);
    color: var(--branco);
}

.botao--laranja:hover {
    background: var(--laranja-botao-escuro);
}

.botao--grafite {
    background: var(--grafite);
    color: var(--branco);
}

.botao--grafite:hover {
    background: var(--grafite-claro);
}

/* Contorno na cor do texto da superfície: branco na placa, grafite na
 * faixa laranja. */
.botao--contorno {
    border-color: currentColor;
    background: transparent;
    color: inherit;
}

.botao--contorno:hover {
    background: rgba(127, 127, 127, 0.16);
}

/* Botão de ação secundária, menor que o texto do botão grande: o Remover das
 * fotos do painel e o acesso ao painel no rodapé. */
.botao--pequeno {
    min-height: 2.75rem;
    padding: 0.375rem 0.875rem;
    font-size: var(--texto);
}

.link {
    color: var(--cobre);
    font-weight: 600;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.25em;
}

.link:hover {
    text-decoration-thickness: 2px;
}

/* Foto -------------------------------------------------------------------- */

.foto {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: var(--linha);
}

/* Lugar de foto que ainda não chegou: hachura de desenho técnico. */
.foto--reservada {
    display: flex;
    align-items: flex-start;
    padding: 0.75rem;
    background-color: var(--hachura);
    background-image: repeating-linear-gradient(135deg, var(--hachura-traco) 0 1px, transparent 1px 12px);
}

.foto__aviso {
    padding: 0.25rem 0.5rem;
    background: var(--fundo);
    color: var(--cinza);
    font-size: var(--texto-p);
}

/* Placa ------------------------------------------------------------------- */

/* A placa de obra da Barsan: chapa grafite com a faixa laranja, com o
 * responsável técnico e o CREA. Na Home ela fica na frente da foto de
 * abertura (home.css); no painel, é o login. */
.placa {
    padding: 1.5rem 1rem 1.75rem;
    border-top: 0.5rem solid var(--laranja);
    background: var(--grafite);
    color: var(--branco);
    --foco: var(--laranja);
}

.placa__marca {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--cinza-claro);
    font-size: var(--texto-p);
}

.placa__esfera {
    width: 1.5rem;
    height: 1.5rem;
}

.placa__titulo {
    margin-top: 1rem;
    font-size: var(--texto-gg);
    font-stretch: var(--larga);
    font-weight: 300;
    line-height: 1.08;
}

.placa__texto {
    margin-top: 1rem;
    max-width: 32em;
    color: var(--texto-sobre-escuro);
}

.placa__dados {
    margin-top: 1.5rem;
    border-top: 1px solid var(--linha-sobre-escuro);
}

.placa__linha {
    display: grid;
    gap: 0.125rem;
    padding-block: 0.625rem;
    border-bottom: 1px solid var(--linha-sobre-escuro);
}

.placa__rotulo {
    color: var(--cinza-claro);
    font-size: var(--texto-p);
}

.placa__valor {
    font-weight: 500;
}

.placa__acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.75rem;
}

@media (min-width: 30em) {
    .placa__linha {
        grid-template-columns: 10.5rem 1fr;
        gap: 1rem;
    }
}

@media (min-width: 40em) {
    .placa {
        padding: 2rem 2rem 2.25rem;
    }
}

@media (min-width: 60em) {
    .placa {
        padding: 2.5rem 2.5rem 2.75rem;
    }
}

/* Seções ------------------------------------------------------------------ */

.secao {
    padding-block: var(--secao);
}

.secao--obras {
    padding-top: 0;
}

.secao__titulo {
    font-size: var(--texto-g);
    font-stretch: var(--larga);
    font-weight: 300;
    line-height: 1.1;
}

.secao__texto {
    margin-top: 1rem;
    max-width: 34em;
    color: var(--cinza);
}

.secao__acao {
    margin-top: 1.25rem;
}

.secao__topo {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem 2rem;
    margin-bottom: 2rem;
}

/* Título de um bloco dentro da seção, no tamanho do nome dos serviços. */
.subtitulo {
    font-size: var(--texto-m);
    font-stretch: var(--larga);
    font-weight: 500;
}

/* Texto corrido de mais de um parágrafo. */
.prosa {
    max-width: 36em;
}

.prosa > * + * {
    margin-top: 1rem;
}

/* Serviços: uma linha por serviço, nome à esquerda e texto à direita. */
.servicos-grade {
    display: grid;
    gap: 2.5rem;
}

.servicos {
    border-top: 1px solid var(--linha);
}

.servico {
    display: grid;
    gap: 0.5rem;
    padding-block: 1.5rem;
    border-bottom: 1px solid var(--linha);
}

.servico__nome {
    font-size: var(--texto-m);
    font-stretch: var(--larga);
    font-weight: 500;
}

.servico__texto {
    max-width: 36em;
}

@media (min-width: 40em) {
    .servico {
        grid-template-columns: 14rem 1fr;
        gap: 2rem;
    }
}

@media (min-width: 60em) {
    .servicos-grade {
        grid-template-columns: 4fr 7fr;
        gap: 4rem;
    }
}

/* Chamada para o contato: faixa laranja antes do rodapé. */
.chamada {
    padding-block: clamp(3rem, 2rem + 4vw, 5rem);
    background: var(--laranja);
    color: var(--grafite);
    --foco: var(--grafite);
}

.chamada__interno {
    display: grid;
    gap: 1.75rem;
}

.chamada__titulo {
    font-size: var(--texto-g);
    font-stretch: var(--larga);
    font-weight: 400;
    line-height: 1.1;
}

.chamada__texto {
    margin-top: 0.75rem;
    max-width: 34em;
}

.chamada__acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

@media (min-width: 60em) {
    .chamada__interno {
        grid-template-columns: 1fr auto;
        align-items: end;
        gap: 3rem;
    }
}

/* Páginas internas -------------------------------------------------------- */

/* Cabeça das páginas internas: a chapa grafite com a faixa laranja da placa
 * da Home, de ponta a ponta, com o título da página. */
.cabeca {
    padding-block: clamp(2.5rem, 1.75rem + 3vw, 4.5rem);
    border-top: 0.5rem solid var(--laranja);
    background: var(--grafite);
    color: var(--branco);
    --foco: var(--laranja);
}

.cabeca__titulo {
    font-size: var(--texto-gg);
    font-stretch: var(--larga);
    font-weight: 300;
    line-height: 1.08;
}

.cabeca__texto {
    margin-top: 1rem;
    max-width: 36em;
    color: var(--texto-sobre-escuro);
}

/* Link na chapa grafite: branco, como no rodapé. */
.cabeca a {
    color: var(--branco);
    text-underline-offset: 0.2em;
}

/* Ficha: pares de rótulo e valor entre linhas finas, como os dados da placa,
 * no fundo claro. Responsável técnico no Sobre e contatos no Contato. */
.ficha {
    margin-top: 1.25rem;
    border-top: 1px solid var(--linha);
}

.ficha__linha {
    display: grid;
    gap: 0.125rem;
    padding-block: 0.75rem;
    border-bottom: 1px solid var(--linha);
}

.ficha__rotulo {
    color: var(--cinza);
    font-size: var(--texto-p);
}

.ficha__valor {
    font-weight: 500;
    overflow-wrap: anywhere;
}

@media (min-width: 30em) {
    .ficha__linha {
        grid-template-columns: 8.5rem 1fr;
        gap: 1rem;
    }
}

/* Sobre: foto do responsável e texto lado a lado no computador. */
.sobre {
    display: grid;
    gap: 2.5rem;
}

.sobre__foto {
    aspect-ratio: 4 / 5;
}

.sobre__texto {
    margin-top: 1.25rem;
}

.sobre__bloco {
    margin-top: 2.5rem;
}

@media (min-width: 40em) {
    .sobre__foto {
        aspect-ratio: 3 / 2;
    }
}

@media (min-width: 60em) {
    .sobre {
        grid-template-columns: 5fr 7fr;
        align-items: start;
        gap: 4rem;
    }

    .sobre__foto {
        aspect-ratio: 4 / 5;
    }
}

/* Contato: formulário de um lado e os outros jeitos de falar do outro. */
.contato {
    display: grid;
    gap: 3.5rem;
}

.contato__acao {
    margin-top: 1.25rem;
}

.contato__mapa {
    margin-top: 1.5rem;
}

.mapa {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    border: 0;
    background: var(--linha);
}

@media (min-width: 60em) {
    .contato {
        grid-template-columns: 7fr 5fr;
        align-items: start;
        gap: 4rem;
    }
}