/* ============================================================================
   M2 ARQUITETURA E ENGENHARIA · m2-pages.css
   Camada de arquitetura de páginas da versão 2.

   O m2-theme.css continua sendo o design system: paleta, tipografia, botões,
   e os componentes das seções que vieram da one page. Este arquivo não repete
   nada dele. Ele resolve só o que a one page não precisava resolver:

     a) como um site de seis páginas se apresenta na abertura de cada página,
     b) como o leitor sabe onde está e para onde vai,
     c) os componentes de profundidade que só existem em página interna.

   A metáfora do sistema visual continua sendo o corte transversal da rua:
   superfície em concreto claro, subsolo em asfalto. Na one page a alternância
   acontecia entre seções. Aqui ela também acontece entre páginas: toda página
   abre em asfalto (o cabeçalho de página), desce para a superfície no corpo e
   fecha em asfalto no rodapé. Cada página tem um NÍVEL, de 00 a 05.

   Carregar depois do m2-theme.css.

   ÍNDICE
   01. Navegação de página (header, estado atual)
   02. Cabeçalho de página
   04. Seções genéricas de página interna
   05. Bloco de destaque em régua
   06. Serviços em detalhe
   07. Processo em página própria
   08. Projetos em detalhe
   09. Sócios em página própria
   10. Briefing e formulário de contato
   11. Próximo passo
   12. Home, ajustes de página-índice
   13. Responsivo
   14. Movimento reduzido
   ========================================================================= */


/* ==========================================================================
   01. NAVEGAÇÃO DE PÁGINA
   O menu deixou de ser âncora e virou navegação de verdade. O estado atual
   agora nasce no HTML, com aria-current="page", e não depende de JavaScript:
   scrollspy era uma conta de rolagem, isto é um fato da URL.
   ========================================================================== */

/* Seis itens em vez de cinco. O respiro sai do padding, não do tamanho da
   fonte: reduzir o corpo abaixo de 15px estragaria a leitura no notebook. */
.main-menu ul li a {
    padding: 10px 11px !important;
}
.main-menu ul li a::after {
    left: 11px;
    right: 11px;
}

/* O logo tambem e link, logo tambem e alvo de toque. Media 43,5px no telefone,
   onde a imagem encolhe: o min-height segura o piso sem deformar a marca. */
.navbar-brand {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

/* A régua do item atual nasce desenhada e não é a mesma do hover: hover é
   convite, atual é informação. Por isso ela é mais espessa e não anima. */
.main-menu ul li a[aria-current="page"] {
    color: var(--terracotta-lit);
}
.main-menu ul li a[aria-current="page"]::after {
    transform: scaleX(1);
    height: 2px;
    transition: none;
}

/* O mesmo no menu mobile, onde o SlickNav clona os itens do #menu. */
.slicknav_nav a[aria-current="page"] {
    color: var(--terracotta-lit);
    box-shadow: inset 3px 0 0 var(--terracotta-lit);
}


/* ==========================================================================
   02. CABEÇALHO DE PÁGINA
   Substitui o hero em toda página que não é a home. Mesma linguagem do hero
   (asfalto, papel milimetrado, linha de cota), um terço da altura: a home
   tem que impressionar, a página interna tem que informar rápido.
   ========================================================================== */

.page-hero {
    position: relative;
    background-color: var(--asphalt);
    color: var(--on-dark);
    /* Começa onde o cabeçalho termina, sem passar por baixo dele. O cabeçalho
       das internas já é opaco, e o papel milimetrado que começava atrás dele
       deixava uma linha da grade colada à borda, com cara de linha dupla.
       A altura real do cabeçalho não bate com --header-h, então a posição do
       texto fica igual à de antes: topo do cabeçalho mais o mesmo respiro. */
    margin-top: 0;
    padding: clamp(56px, 7vw, 96px) 0 clamp(48px, 6vw, 76px);
    overflow: hidden;
}

/* Marca d'água do nível, alinhada à direita e cortada pela borda da seção.
   É o mesmo gesto do numeral gigante das seções, agora em escala de página. */
.page-hero__nivel {
    position: absolute;
    right: -0.06em;
    bottom: -0.30em;
    z-index: 0;
    font-family: var(--font-display);
    font-size: clamp(140px, 26vw, 380px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: var(--ls-display);
    color: rgba(234, 231, 225, 0.045);
    pointer-events: none;
    user-select: none;
}

.page-hero .container {
    position: relative;
    z-index: 1;
}

/* Uma coluna, nao duas. O indice "nesta pagina" saiu daqui: ele numerava
   01 a 04 uma lista de secoes que nao tem ordem entre si, e quatro secoes nao
   pedem sumario. Sem ele o titulo recupera a largura inteira, que e o que a
   abertura de uma pagina precisa. */
.page-hero__grid {
    display: block;
}

/* Trilha de navegação. Mono, caixa alta, separador em barra: é a notação de
   caminho de arquivo, não a seta decorativa de template. */
.trilha {
    margin: 0 0 22px;
    font-family: var(--font-mono);
    font-size: var(--fs-mono);
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--on-dark-faint);
}
.trilha ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.trilha li + li::before {
    content: '/';
    margin-right: 10px;
    color: var(--rule-on-dark-st);
}
/* O padding vertical existe pelo alvo de toque, nao pelo desenho: medido em
   19px de altura na primeira rodada de QA, contra o piso de 32px do projeto.
   O inline-block e o que faz o padding valer em um <a> dentro de um flex. */
.trilha a {
    display: inline-block;
    color: var(--on-dark-muted);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    padding: 13px 0 12px;
    transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.trilha a:hover,
.trilha a:focus-visible {
    color: var(--terracotta-lit);
    border-bottom-color: var(--terracotta-lit);
}
.trilha [aria-current="page"] {
    color: var(--on-dark);
}

.page-hero__eyebrow {
    margin: 0 0 14px;
    font-family: var(--font-mono);
    font-size: var(--fs-mono);
    font-weight: 500;
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: var(--terracotta-lit);
}

.page-hero h1 {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(34px, 5vw, 62px);
    font-weight: 700;
    line-height: 1.03;
    letter-spacing: var(--ls-display);
    color: var(--on-dark);
    max-width: 22ch;
}
.page-hero h1 span {
    color: var(--terracotta-lit);
}

.page-hero__lead {
    margin: 26px 0 0;
    font-size: var(--fs-lead);
    line-height: 1.55;
    color: var(--on-dark-muted);
    max-width: 62ch;
}

/* Linha de cota do rodapé do cabeçalho, herdada do hero da home. */
.page-hero__cota {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: clamp(40px, 5vw, 64px);
    padding-top: 20px;
    font-family: var(--font-mono);
    font-size: var(--fs-mono-xs);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--on-dark-faint);
}
.page-hero__cota-tick {
    color: var(--terracotta-lit);
}
.page-hero__cota-line {
    flex: 1;
    height: 1px;
    background: var(--rule-on-dark);
}


/* ==========================================================================
   04. SEÇÕES GENÉRICAS DE PÁGINA INTERNA
   A one page tinha uma classe por seção, porque cada seção era única. Numa
   página interna as seções se repetem entre páginas, então elas viram
   utilitário de fundo com o mesmo ritmo vertical do tema.
   ========================================================================== */

.secao {
    padding: clamp(72px, 9vw, 128px) 0;
    position: relative;
}
.secao--papel    { background-color: var(--paper); }
.secao--concreto { background-color: var(--concrete); }
.secao--asfalto  { background-color: var(--asphalt); color: var(--on-dark); }

/* Seção estreita, para texto corrido que não pode virar linha de 120 caracteres. */
.secao--curta { padding: clamp(56px, 7vw, 96px) 0; }

.medida {
    max-width: 68ch;
}
.medida p + p {
    margin-top: 1.1em;
}

/* Chapéu de seção interna: o mesmo eyebrow do tema, sem depender do
   .section-title do mirror quando a seção não tem a estrutura dele. */
.secao__eyebrow {
    margin: 0 0 14px;
    font-family: var(--font-mono);
    font-size: var(--fs-mono);
    font-weight: 500;
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: var(--terracotta-ink);
}
.secao--asfalto .secao__eyebrow {
    color: var(--terracotta-lit);
}


/* ==========================================================================
   05. BLOCO DE DESTAQUE EM RÉGUA
   Fato isolado com barra de acento à esquerda. Usado para o dado que a
   página inteira sustenta, e para as marcas de pendência do cliente.
   ========================================================================== */

.regua {
    border-left: 3px solid var(--terracotta-ink);
    padding: 4px 0 4px 22px;
    margin: 34px 0 0;
}
.secao--asfalto .regua,
.section-dark .regua {
    border-left-color: var(--terracotta-lit);
}
.regua__label {
    margin: 0 0 6px;
    font-family: var(--font-mono);
    font-size: var(--fs-mono-xs);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--graphite-paper);
}
.secao--asfalto .regua__label {
    color: var(--on-dark-faint);
}
.regua p {
    margin: 0;
    font-size: var(--fs-lead);
    line-height: 1.5;
}

/* Grade de fatos em mono, reaproveitando a linguagem das credenciais. */
.fatos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 1px;
    margin: 44px 0 0;
    background: var(--rule);
    border: 1px solid var(--rule);
}
.fatos > div {
    background: var(--paper);
    padding: 22px 20px;
}
.secao--concreto .fatos > div { background: var(--concrete); }
.fatos dt {
    font-family: var(--font-mono);
    font-size: var(--fs-mono-xs);
    font-weight: 400;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--graphite-paper);
    margin-bottom: 8px;
}
/* Mesma correcao de alvo de toque: o e-mail dentro de um <dd> media 21px,
   e com 4px de padding parava em 32px cravados, encostado no piso. 6px da
   folga para o piso nao depender de arredondamento de fonte. */
.fatos dd a {
    display: inline-block;
    padding: 11px 0;   /* 43,8px encostavam no piso de 44 */
}

.fatos dd {
    margin: 0;
    font-family: var(--font-display);
    font-size: 19px;
    font-weight: 600;
    letter-spacing: var(--ls-heading);
    color: var(--asphalt);
    line-height: 1.25;
    /* Rede de seguranca da grade: dado sem espaco no meio, como e-mail ou URL,
       quebra dentro da celula em vez de atravessar a divisoria. */
    overflow-wrap: break-word;
}


/* ==========================================================================
   06. SERVIÇOS EM DETALHE
   Na home o serviço é um card de quatro linhas. Aqui ele é uma ficha: o que
   é, o que entra na entrega e em que fase do projeto ele acontece.
   ========================================================================== */

.ficha {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(28px, 4vw, 64px);
    padding: clamp(38px, 4.5vw, 58px) 0;
    border-top: 1px solid var(--rule);
}
.ficha:last-child {
    border-bottom: 1px solid var(--rule);
}

/* A ficha de servico, reestruturada. A anterior punha o desenho tecnico numa
   coluna de 480px e quatro frases curtas numa de 672px, com a imagem empilhada
   acima do numero e do titulo. Tres problemas de uma vez: o desenho, que e a
   prova do servico, era o elemento mais espremido da pagina; a leitura comecava
   pela foto e so depois chegava ao titulo; e as reguas da lista corriam 672px
   sob texto de 40 caracteres.

   Agora o cabecalho ocupa a linha inteira e o corpo se divide 7fr para o
   desenho, 5fr para texto e escopo. O titulo ganha a largura toda, o desenho
   passa de 480 para cerca de 700px, e a lista encolhe para a medida do proprio
   texto. As duas colunas fecham na mesma altura sem sobra. */
.ficha--servico {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: start;
    row-gap: clamp(24px, 3vw, 34px);
}
.ficha__cab {
    grid-column: 1 / -1;
}
.ficha__desenho {
    min-width: 0;
}
.ficha__texto {
    min-width: 0;
}
/* O texto abre na linha de cima da moldura do desenho (ajuste de 16 set). A
   margem de 18 px do corpo só vale entre o cabeçalho e o texto, não aqui. */
.ficha__texto > .ficha__corpo:first-child {
    margin-top: 0;
}
/* Frente sem desenho: o texto assume a linha e se divide por dentro, para o
   ritmo da lista continuar igual ao das outras fichas. */
.ficha--servico:not(:has(.ficha__desenho)) .ficha__texto {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(28px, 4vw, 64px);
    align-items: start;
}
.ficha--servico:not(:has(.ficha__desenho)) .ficha__escopo {
    margin-top: 0;
}

.ficha__num {
    display: block;
    font-family: var(--font-mono);
    font-size: var(--fs-mono);
    letter-spacing: 0.16em;
    color: var(--terracotta-ink);
    margin-bottom: 14px;
}
.ficha__titulo {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(24px, 2.6vw, 34px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: var(--ls-heading);
    color: var(--asphalt);
}
.ficha__corpo {
    margin: 18px 0 0;
    font-size: var(--fs-body);
    line-height: 1.6;
    color: var(--graphite-paper);
}

.ficha__entrega {
    margin: 0;
    padding: 0;
    list-style: none;
}
.ficha__entrega li {
    position: relative;
    padding: 12px 0 12px 30px;
    border-bottom: 1px solid var(--rule);
    font-size: var(--fs-body);
    line-height: 1.5;
    color: var(--asphalt);
}
.ficha__entrega li:first-child { border-top: 1px solid var(--rule); }
/* Marcador desenhado, não caractere de fonte de ícone: um tique de cota. */
.ficha__entrega li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 21px;
    width: 16px;
    height: 1px;
    background: var(--terracotta-ink);
}

.ficha--destaque .ficha__num {
    color: var(--terracotta-cta);
}
.ficha--destaque .ficha__sub::after {
    content: 'Metodologia da casa';
    display: block;
    margin-top: 12px;
    font-family: var(--font-mono);
    font-size: var(--fs-mono-xs);
    font-weight: 400;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--terracotta-ink);
}


/* ==========================================================================
   07. PROCESSO EM PÁGINA PRÓPRIA
   Na home o processo eram quatro ícones em linha. Numa página com espaço,
   ele vira trilha vertical com a linha de tempo desenhada entre as etapas.
   ========================================================================== */

.trilha-etapas {
    margin: 0;
    padding: 0;
    list-style: none;
    position: relative;
}
.etapa {
    position: relative;
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr);
    gap: clamp(20px, 3vw, 40px);
    padding: 0 0 clamp(40px, 5vw, 64px);
}
.etapa:last-child { padding-bottom: 0; }

/* A linha da trilha. Fica na coluna do número e para na última etapa. */
.etapa::before {
    content: '';
    position: absolute;
    left: 41px;
    top: 62px;
    bottom: 0;
    width: 1px;
    background: var(--rule-on-dark);
}
.etapa:last-child::before { display: none; }

.etapa__marca {
    width: 84px;
    height: 62px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--rule-on-dark-st);
    font-family: var(--font-mono);
    font-size: 17px;
    letter-spacing: 0.08em;
    color: var(--terracotta-lit);
    background: var(--asphalt);
}
.etapa__titulo {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(21px, 2.2vw, 27px);
    font-weight: 600;
    letter-spacing: var(--ls-heading);
    color: var(--on-dark);
    padding-top: 14px;
}
.etapa__corpo {
    margin: 12px 0 0;
    font-size: var(--fs-body);
    line-height: 1.6;
    color: var(--on-dark-muted);
    max-width: 60ch;
}
.etapa__entrega {
    margin: 16px 0 0;
    font-family: var(--font-mono);
    font-size: var(--fs-mono);
    letter-spacing: 0.08em;
    color: var(--on-dark-faint);
}
.etapa__entrega strong {
    font-weight: 500;
    color: var(--terracotta-lit);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-size: var(--fs-mono-xs);
    display: block;
    margin-bottom: 5px;
}


/* ==========================================================================
   08. PROJETOS EM DETALHE
   Na home o projeto é um card. Aqui ele é uma prancha: imagem grande, ficha
   técnica ao lado e alternância de lado a cada projeto, como um caderno.
   ========================================================================== */

.prancha {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(28px, 4vw, 56px);
    align-items: center;
    padding: clamp(44px, 5vw, 72px) 0;
    border-top: 1px solid var(--rule);
}
.prancha:last-of-type { border-bottom: 1px solid var(--rule); }

/* Alternância: o segundo projeto inverte, para o olho não pegar o ritmo. */
.prancha:nth-of-type(even) .prancha__media { order: 2; }

.prancha__media {
    position: relative;
    background: var(--paper);
    border: 1px solid var(--rule);
    padding: 10px;
}
.prancha__media img {
    display: block;
    width: 100%;
    height: auto;
}
.prancha__hint {
    position: absolute;
    right: 18px;
    bottom: 18px;
    background: rgba(29, 31, 32, 0.90);
    color: var(--on-dark);
    font-family: var(--font-mono);
    font-size: var(--fs-mono-xs);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 9px 14px;
}

.prancha__eyebrow {
    margin: 0 0 12px;
    font-family: var(--font-mono);
    font-size: var(--fs-mono);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: var(--terracotta-ink);
}
.prancha__titulo {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(23px, 2.5vw, 33px);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: var(--ls-heading);
    color: var(--asphalt);
}
.prancha__corpo {
    margin: 18px 0 0;
    font-size: var(--fs-body);
    line-height: 1.6;
    color: var(--graphite-paper);
}
.prancha__ficha {
    margin: 26px 0 0;
    border-top: 1px solid var(--rule);
}
.prancha__ficha > div {
    display: grid;
    grid-template-columns: 128px minmax(0, 1fr);
    gap: 16px;
    padding: 11px 0;
    border-bottom: 1px solid var(--rule);
}
.prancha__ficha dt {
    font-family: var(--font-mono);
    font-size: var(--fs-mono-xs);
    font-weight: 400;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--graphite-paper);
    padding-top: 3px;
}
.prancha__ficha dd {
    margin: 0;
    font-size: 15.5px;
    line-height: 1.45;
    color: var(--asphalt);
}


/* ==========================================================================
   09. SÓCIOS EM PÁGINA PRÓPRIA
   O componente .socio do tema já resolve o cartão. Aqui ele ganha o espaço
   que a home não tinha: retrato maior e credenciais em coluna larga.
   ========================================================================== */

.socios-pagina {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: clamp(32px, 4vw, 56px);
}
.socios-pagina .socio {
    margin: 0;
}


/* ==========================================================================
   10. BRIEFING E FORMULÁRIO DE CONTATO
   Decisão de front-end, registrada porque contraria a nota da versão 1:
   lá o formulário foi cortado porque não havia backend, e link de e-mail é
   melhor do que formulário que não envia. Aqui o formulário existe e envia
   de verdade: ele monta o corpo do e-mail e abre o cliente de e-mail do
   usuário. Sem JavaScript, os mesmos campos viram uma lista de perguntas
   que a pessoa copia para o e-mail. Nenhum caminho engole a mensagem.
   ========================================================================== */

.briefing {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px 28px;
}
.campo {
    display: flex;
    flex-direction: column;
    gap: 9px;
}
.campo--largo { grid-column: 1 / -1; }

.campo label {
    font-family: var(--font-mono);
    font-size: var(--fs-mono-xs);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--on-dark-faint);
}
.campo label .opcional {
    text-transform: none;
    letter-spacing: 0.04em;
    color: var(--on-dark-faint);
}

.campo input,
.campo select,
.campo textarea {
    width: 100%;
    font-family: var(--font-body);
    font-size: var(--fs-body);
    color: var(--on-dark);
    background: transparent;
    border: 1px solid var(--rule-on-dark-st);
    border-radius: 0;
    padding: 13px 14px;
    transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
    -webkit-appearance: none;
    appearance: none;
}
.campo textarea {
    min-height: 132px;
    resize: vertical;
    line-height: 1.55;
}
/* A seta do select é desenhada, não é caractere de biblioteca de ícone. */
.campo select {
    background-image:
        linear-gradient(45deg, transparent 50%, var(--on-dark-muted) 50%),
        linear-gradient(135deg, var(--on-dark-muted) 50%, transparent 50%);
    background-position: right 18px center, right 12px center;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    padding-right: 40px;
}
.campo select option {
    background: var(--asphalt);
    color: var(--on-dark);
}
.campo input:hover,
.campo select:hover,
.campo textarea:hover {
    border-color: var(--on-dark-faint);
}
.campo input:focus,
.campo select:focus,
.campo textarea:focus {
    outline: 2px solid var(--terracotta-lit);
    outline-offset: 1px;
    border-color: transparent;
    background-color: rgba(234, 231, 225, 0.05);
}
.campo input::placeholder,
.campo textarea::placeholder {
    color: rgba(234, 231, 225, 0.42);
}

.briefing__acao {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px 26px;
    margin-top: 6px;
}
.briefing__nota {
    margin: 0;
    font-family: var(--font-mono);
    font-size: var(--fs-mono);
    line-height: 1.6;
    color: var(--on-dark-faint);
    max-width: 42ch;
}

/* O botão do formulário é <button>, e o .btn-default do tema é escrito para
   <a>. Estas linhas alinham o elemento, sem redesenhar o botão. */
button.btn-default {
    border: 0;
    cursor: pointer;
    font-family: inherit;
}

/* Retorno do envio. Nasce vazio e só existe quando o JS tem o que dizer. */
.briefing__retorno {
    grid-column: 1 / -1;
    margin: 0;
    padding: 14px 18px;
    border-left: 3px solid var(--terracotta-lit);
    background: rgba(234, 231, 225, 0.06);
    font-size: var(--fs-body);
    line-height: 1.55;
    color: var(--on-dark);
}
.briefing__retorno:empty {
    display: none;
}

/* Caminho sem JavaScript: as mesmas perguntas, em lista, para copiar. */
.briefing-noscript ol {
    margin: 18px 0 0;
    padding-left: 22px;
    color: var(--on-dark-muted);
    line-height: 1.7;
}


/* ==========================================================================
   11. PRÓXIMO PASSO
   Toda página interna termina apontando para a próxima. Num site de seis
   páginas o beco sem saída é o defeito mais caro: o leitor chega no fim de
   Serviços e não tem para onde ir a não ser voltar ao menu.
   ========================================================================== */

.proximo {
    background: var(--paper);
    border-top: 1px solid var(--rule);
    padding: clamp(44px, 5vw, 72px) 0;
}
.proximo__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1px;
    background: var(--rule);
    border: 1px solid var(--rule);
}
.proximo__card {
    display: block;
    background: var(--paper);
    padding: clamp(26px, 3vw, 38px);
    text-decoration: none;
    transition: background-color var(--dur) var(--ease);
}
.proximo__card:hover,
.proximo__card:focus-visible {
    background: var(--concrete);
}
.proximo__label {
    display: block;
    font-family: var(--font-mono);
    font-size: var(--fs-mono-xs);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--terracotta-ink);
    margin-bottom: 12px;
}
.proximo__titulo {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(21px, 2.2vw, 28px);
    font-weight: 700;
    letter-spacing: var(--ls-heading);
    line-height: 1.14;
    color: var(--asphalt);
}
.proximo__corpo {
    display: block;
    margin-top: 12px;
    font-size: 15.5px;
    line-height: 1.55;
    color: var(--graphite-paper);
    max-width: 44ch;
}
/* Seta em um desenho só (17 set). Antes eram duas peças em CSS, e a ponta
   girava em torno do próprio canto: ficava 4px acima da haste, sem encostar
   nela. Agora é o mesmo traçado da seta dos botões, com haste e ponta no
   mesmo SVG, usado como máscara para herdar a cor do tema. */
.proximo__seta {
    display: block;
    margin-top: 22px;
    width: 34px;
    height: 12px;
    background: var(--terracotta-ink);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 12'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cpath d='M0 6h32'/%3E%3Cpath d='M27 1l5 5-5 5'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 12'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cpath d='M0 6h32'/%3E%3Cpath d='M27 1l5 5-5 5'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat;
    transition: transform var(--dur) var(--ease);
}
.proximo__card:hover .proximo__seta,
.proximo__card:focus-visible .proximo__seta {
    transform: translateX(6px);
}


/* ==========================================================================
   12. HOME, AJUSTES DE PÁGINA-ÍNDICE
   A home deixou de ser o site inteiro e virou a porta. Cada bloco que ficou
   nela é um resumo com saída para a página que trata do assunto a fundo.
   ========================================================================== */

/* Link de saída no fim de um bloco resumido. Não é botão: botão é ação,
   isto é navegação. Régua em vez de caixa. */
.saida {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: 30px;
    font-family: var(--font-mono);
    font-size: var(--fs-mono);
    letter-spacing: 0.10em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--terracotta-ink);
    /* O padding de cima existe so pelo alvo de toque: medido em 28px, contra
       o piso de 32px do projeto. Cresce por cima para nao afastar a regua do
       texto, que e o que o desenho do link depende. */
    padding: 17px 0 8px;
    border-bottom: 1px solid var(--rule-strong);
    transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.saida::after {
    content: '';
    width: 22px;
    height: 1.5px;
    background: currentColor;
    /* scaleX em vez de width, pelo mesmo motivo do indice. A origem a esquerda
       faz a regua crescer para a direita, que e o desenho original. */
    transform-origin: left center;
    transition: transform var(--dur) var(--ease);
}
.saida:hover,
.saida:focus-visible {
    color: var(--terracotta-ink);
    border-bottom-color: var(--terracotta-ink);
}
.saida:hover::after { transform: scaleX(1.3636); }   /* 22px vira 30px */

.section-dark .saida,
.secao--asfalto .saida {
    color: var(--terracotta-lit);
    border-bottom-color: var(--rule-on-dark-st);
}
.section-dark .saida:hover,
.secao--asfalto .saida:hover,
.section-dark .saida:focus-visible,
.secao--asfalto .saida:focus-visible {
    color: var(--terracotta-lit);
    border-bottom-color: var(--terracotta-lit);
}

/* Faixa de contato da home: versão curta da página de contato. */
.faixa-contato {
    background: var(--asphalt);
    color: var(--on-dark);
    padding: clamp(56px, 7vw, 92px) 0;
}
.faixa-contato__grid {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(32px, 4vw, 64px);
    /* Topo do botão na linha do eyebrow "Contato" (pedido de 13 set). */
    align-items: start;
}


/* ==========================================================================
   12b. COMPONENTES DE APOIO
   Peças menores que nasceram do conteúdo de cada página. Ficam aqui, e não
   no m2-theme.css, porque nenhuma delas existe na home.
   ========================================================================== */

/* Régua entre fichas. O separador é do container, não da ficha, senão a
   primeira e a última ganham linha sobrando. */
.fichas {
    margin-top: clamp(12px, 2vw, 24px);
}

/* Ícone da ficha de diferencial. Mesmo quadrado da home, em versão clara. */
.ficha__icone {
    width: 54px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 0 1px var(--rule-strong);
    color: var(--asphalt);
    margin: 20px 0 22px;
    transition: color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.ficha__icone svg {
    width: 26px;
    height: 26px;
}
.ficha:hover .ficha__icone {
    color: var(--terracotta-ink);
    box-shadow: inset 0 0 0 1px var(--terracotta-ink);
}

/* Legenda da prancha. Mono, como toda anotacao de desenho neste sistema, e
   com filete a esquerda para amarrar a legenda a imagem que ela descreve. */
.ficha__legenda {
    margin: 14px 0 0;
    padding-left: 14px;
    border-left: 1px solid var(--rule-strong);
    font-family: var(--font-mono);
    font-size: var(--fs-mono);
    line-height: 1.65;
    color: var(--graphite-paper);
    max-width: 62ch;
}

.ficha__label {
    margin: 0 0 14px;
    font-family: var(--font-mono);
    font-size: var(--fs-mono-xs);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--graphite-paper);
}

/* Escopo colapsavel. A pagina de Servicos tem dez fichas e chegava a 16.857px
   no telefone, das quais 10.440 eram as fichas. Colapsar a lista de escopo
   devolve cerca de um quarto disso, e mantem visivel o que serve para escolher:
   desenho, numero, titulo e o paragrafo do que a frente e.

   <details> nativo, e nasce com o atributo open: sem JavaScript nada colapsa e
   o comportamento e o de hoje. Quem fecha no telefone e o m2.js. */
.ficha__escopo {
    border-top: 1px solid var(--rule);
    padding-top: 16px;
}
.ficha__escopo > summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 44px;
    margin-bottom: 0;
}
.ficha__escopo > summary::-webkit-details-marker { display: none; }

/* Marcador desenhado: dois tracos que viram um no estado aberto. Nenhuma
   biblioteca de icone, como no resto do projeto. */
.ficha__escopo > summary::after {
    content: '';
    flex: none;
    width: 13px;
    height: 13px;
    background:
        linear-gradient(var(--terracotta-ink), var(--terracotta-ink)) center / 13px 1.5px no-repeat,
        linear-gradient(var(--terracotta-ink), var(--terracotta-ink)) center / 1.5px 13px no-repeat;
    transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.ficha__escopo[open] > summary::after {
    /* Some a barra vertical: o mais vira menos. */
    background:
        linear-gradient(var(--terracotta-ink), var(--terracotta-ink)) center / 13px 1.5px no-repeat;
}
.ficha__escopo > summary:focus-visible {
    outline: 2px solid var(--terracotta-ink);
    outline-offset: 3px;
}
.ficha__escopo .ficha__entrega {
    margin-top: 14px;
}
/* O marcador fica em toda largura. No desktop as fichas nascem abertas, mas
   continuam colapsaveis: esconder o sinal deixaria um controle clicavel sem
   afordancia, e encolher o alvo o tiraria do piso de 44px. */

.ficha__corpo + .ficha__corpo {
    margin-top: 1.05em;
}

/* Fecho de cada ficha de diferencial: a consequência em uma linha. */
.ficha__pratica {
    margin: 26px 0 0;
    padding-top: 18px;
    border-top: 1px solid var(--rule);
    font-size: var(--fs-body);
    line-height: 1.5;
    color: var(--asphalt);
}
.ficha__pratica strong {
    display: block;
    margin-bottom: 6px;
    font-family: var(--font-mono);
    font-size: var(--fs-mono-xs);
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--terracotta-ink);
}

/* Lista numerada de consequências. Usada no Diferencial e no Contato: mesma
   pergunta nos dois casos, "o que acontece na prática". */
.consequencias {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1px;
    margin: clamp(24px, 3vw, 40px) 0 0;
    padding: 0;
    list-style: none;
    background: var(--rule);
    border: 1px solid var(--rule);
}
.consequencias > li {
    background: var(--concrete);
    padding: clamp(24px, 3vw, 34px);
}
.secao--papel .consequencias > li { background: var(--paper); }
.consequencias__num {
    display: block;
    font-family: var(--font-mono);
    font-size: var(--fs-mono);
    letter-spacing: 0.16em;
    color: var(--terracotta-ink);
    margin-bottom: 16px;
}
.consequencias h3 {
    margin: 0 0 12px;
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: var(--ls-heading);
    color: var(--asphalt);
}
.consequencias p {
    margin: 0;
    font-size: var(--fs-small);
    line-height: 1.6;
    color: var(--graphite-paper);
}

/* Nota de pendência sob os cartões de sócio. */
/* Nota de procedência dos desenhos, no pé da lista de frentes. Diz de onde
   vem a imagem e o que ainda falta, em vez de deixar três fichas sem imagem
   parecendo esquecimento. */
.nota-desenhos {
    margin: clamp(30px, 4vw, 48px) 0 0;
    padding-top: 20px;
    border-top: 1px solid var(--rule);
    font-family: var(--font-mono);
    font-size: var(--fs-mono);
    line-height: 1.7;
    letter-spacing: 0.02em;
    color: var(--graphite-paper);
    max-width: 78ch;
}

.nota-registro {
    margin: 34px 0 0;
    font-family: var(--font-mono);
    font-size: var(--fs-mono);
    letter-spacing: 0.04em;
    color: var(--graphite-paper);
}

/* O cartão de sócio na página própria tem retrato maior: aqui ele é o
   conteúdo, e não um apoio ao lado de outro assunto. */
.socio--pagina {
    padding: clamp(24px, 3vw, 32px);
}
.socio--pagina .socio__media {
    flex-basis: 190px;
}

.prancha__cta {
    margin: 30px 0 0;
}

/* O título do card de projeto virou link para a âncora da prancha em
   /projetos/. Medido em 23px de altura de toque, abaixo do piso de 32px do
   projeto. O inline-block com padding resolve sem mexer no ritmo do card. */
.project-content h3 a {
    display: inline-block;
    padding: 9px 0;
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.project-content h3 a:hover,
.project-content h3 a:focus-visible {
    color: var(--terracotta-ink);
    border-bottom-color: var(--terracotta-ink);
}

/* Faixa de contato da home, coluna da direita. */
.faixa-contato__aparte {
    display: block;
    /* Mesmo recuo que ".section-title p" dá ao eyebrow da coluna ao lado,
       para o topo do botão cair na linha do "Contato". */
    margin-top: 20px;
}
.faixa-contato__rotulo {
    margin: 28px 0 6px;
    font-family: var(--font-mono);
    font-size: var(--fs-mono-xs);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--on-dark-faint);
}
.faixa-contato__email {
    margin: 0;
    font-size: var(--fs-lead);
}
/* Medido em 24px de altura de toque na primeira rodada de QA, abaixo do piso
   de 32px que o projeto adotou. O padding resolve sem mexer no ritmo do
   parágrafo, porque o inline-block cresce para dentro da caixa do <p>. */
.faixa-contato__email a {
    display: inline-block;
    padding: 11px 0;
}

/* Diferencial na home: três colunas, então o ícone sobe para cima do texto.
   Lado a lado, a 1/3 de largura, o par ícone mais parágrafo aperta demais. */
.why-choose-us--resumo .why-choose-item {
    display: block;
    height: 100%;
    border-bottom: 0;
    border-top: 1px solid var(--rule-on-dark);
    padding: 26px 0 0;
    margin-bottom: 34px;
}
.why-choose-us--resumo .why-choose-item .icon-box {
    margin: 0 0 22px;
}
.why-choose-us--resumo .why-choose-item-content {
    width: auto;
}

/* Marcado como "só com JS": o texto explica o que o JavaScript faz, e sem
   JavaScript ele seria uma promessa falsa. O <noscript> do <head> esconde. */
.so-com-js { display: block; }

/* Estado final forçado pela rede de segurança do m2.js. Existe porque
   devolver só a visibilidade não bastava: a animação fadeInUp nasce em
   opacity 0 e translate 26px, e com animation-fill-mode: both ela segura
   esse quadro inicial enquanto não roda. Um elemento "visível" com opacity 0
   continua invisível. Então a rede cancela a animação e escreve o destino
   dela, que é o único jeito de o conteúdo aparecer inteiro.

   Nada aplica esta classe em navegação normal: aos 2 segundos a animação já
   terminou e a rede não encontra nada para corrigir. */
.movimento-cancelado {
    visibility: visible !important;
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
}



/* Grade de blocos nomeados. Serve às áreas de atuação (Serviços) e aos quatro
   pilares (Diferencial): mesma forma, porque nos dois casos o conteúdo é um
   nome curto mais uma definição de uma linha. Sem numeral, de propósito: nem
   área nem pilar é sequência, e numerar sugeriria uma ordem que não existe. */
.areas,
.pilares {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1px;
    margin-top: clamp(24px, 3vw, 40px);
    background: var(--rule);
    border: 1px solid var(--rule);
}
.area,
.pilar {
    background: var(--concrete);
    padding: clamp(22px, 2.6vw, 30px);
}
.secao--papel .area,
.secao--papel .pilar { background: var(--paper); }

.area__nome,
.pilar__nome {
    margin: 0 0 10px;
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.22;
    letter-spacing: var(--ls-heading);
    color: var(--asphalt);
}
/* Tique de cota acima do nome: o mesmo marcador da lista de entregáveis,
   para amarrar os dois componentes ao mesmo sistema de desenho. */
.area__nome::before,
.pilar__nome::before {
    content: '';
    display: block;
    width: 20px;
    height: 1.5px;
    background: var(--terracotta-ink);
    margin-bottom: 14px;
}
.area__corpo,
.pilar__corpo {
    margin: 0;
    font-size: var(--fs-small);
    line-height: 1.6;
    color: var(--graphite-paper);
}

/* Subtítulo da ficha de serviço: o nome técnico que o cliente usa no plano,
   abaixo do nome comercial. Mono, para não competir com o título. */
.ficha__sub {
    margin: 10px 0 0;
    font-family: var(--font-mono);
    font-size: var(--fs-mono);
    letter-spacing: 0.06em;
    color: var(--terracotta-ink);
}
.ficha__cab .ficha__titulo { max-width: 26ch; }

/* Especialidade do sócio: fica entre o cargo e o corpo, porque é o que
   diferencia este engenheiro civil de qualquer outro engenheiro civil. */
.socio__espec {
    margin: 6px 0 0;
    font-size: var(--fs-small);
    line-height: 1.45;
    color: var(--graphite-paper);
}



/* Imagem da ficha de serviço. Cada frente carrega o desenho real que o
   cliente mandou no plano de negócio, e é ele que prova o serviço: numa
   empresa de 2024, prancha vale mais do que adjetivo.

   Fica no topo da coluna da esquerda, acima do numeral, com moldura de papel
   e passe-partout de 10px, como um desenho montado em prancheta. */
.ficha__media {
    display: block;
    position: relative;
    background: var(--paper);
    border: 1px solid var(--rule);
    padding: 10px;
    transition: border-color var(--dur) var(--ease);
}
.secao--papel .ficha__media { background: var(--concrete); }
.ficha__media img {
    display: block;
    width: 100%;
    height: auto;
}
/* Foto em pe: limita pela altura e centraliza na moldura. Sem isso a imagem
   sozinha fica mais alta que o texto inteiro da ficha e desmonta o ritmo da
   lista, que e de pranchas deitadas. */
.ficha__media--retrato {
    width: fit-content;
    max-width: 100%;
}
.ficha__media--retrato img {
    width: auto;
    max-width: 100%;
    max-height: 520px;
    margin: 0 auto;
}
.ficha__media:hover,
.ficha__media:focus-visible {
    border-color: var(--rule-strong);
}
.ficha__media .prancha__hint {
    opacity: 0;
    transition: opacity var(--dur) var(--ease);
}
.ficha__media:hover .prancha__hint,
.ficha__media:focus-visible .prancha__hint {
    opacity: 1;
}
/* Em ponteiro grosso não há hover, então a afordância precisa nascer visível. */
@media (hover: none) {
    .ficha__media .prancha__hint { opacity: 1; }
}


/* ==========================================================================
   12c. JUSTIFICAÇÃO
   Pedido do cliente: todo texto justificado, menos título e destaque.

   Justificar sem hifenizar é o erro clássico: em português, palavra longa e
   coluna estreita abrem rios de espaço no meio do parágrafo. Por isso vem
   sempre com hyphens: auto, que funciona porque o documento declara
   lang="pt-BR" e o navegador tem o dicionário.

   Fica de fora, de propósito: título, eyebrow, rótulo em mono, botão, item de
   menu, legenda de figura, citação em destaque e a micro-copy dos cartões de
   navegação. Nesses casos o texto é curto demais e justificar só produziria
   espaçamento estranho sem ganho de leitura.
   ========================================================================== */

.page-hero__lead,
.section-title-content p,
.medida p,
.about-us-content__corpo,
.about-us-content .section-title p,
.hero-content .section-title > p,
.ficha__corpo,
.ficha__pratica,
.etapa__corpo,
.consequencias p,
.socio__corpo,
.socio__creds li,
.area__corpo,
.pilar__corpo,
.regua p,
.servico__corpo,
.why-choose-item-content p,
.social__destaque + p,
.briefing-noscript li {
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
    -webkit-hyphens: auto;
}

/* A última linha de um parágrafo justificado não deve esticar. É o padrão do
   navegador, mas o Bootstrap não garante em todo elemento, então fica escrito. */
.page-hero__lead,
.section-title-content p,
.medida p,
.ficha__corpo,
.etapa__corpo,
.consequencias p,
.socio__corpo {
    text-align-last: left;
}


/* Endereço e perfis no rodapé. O ícone é desenhado, não vem de biblioteca:
   é a regra do projeto desde a versão 1. */
.footer-endereco {
    font-style: normal;
    font-size: var(--fs-small);
    line-height: 1.65;
    color: var(--on-dark-muted);
    margin: 0 0 18px;
}
.footer-perfis {
    list-style: none;
    margin: 0;
    padding: 0;
}
.footer-perfis a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 11px 0;
}
.perfil__icone {
    width: 18px;
    height: 18px;
    flex: none;
}


/* ==========================================================================
   12d. BOTÃO FLUTUANTE DE WHATSAPP
   Verde do WhatsApp porque o reconhecimento da cor é o que faz o botão ser
   clicado. Do sistema visual vêm a forma quadrada e o traço do ícone.
   ========================================================================== */

.zap {
    position: fixed;
    right: clamp(16px, 2.5vw, 28px);
    bottom: clamp(16px, 2.5vw, 28px);
    z-index: 120;
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--whatsapp);          /* 3,6:1 com o branco do ícone, e o ícone é grande */
    color: var(--white);
    border-radius: var(--radius);
    box-shadow: 0 2px 14px rgba(23, 25, 25, 0.34);
    transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.zap svg {
    width: 32px;
    height: 32px;
    display: block;
}
.zap:hover,
.zap:focus-visible {
    background: var(--whatsapp-deep);
    color: var(--white);
    transform: translateY(-2px);
}
.zap:focus-visible {
    outline: 2px solid var(--terracotta-lit);
    outline-offset: 3px;
}

/* No telefone o botão convive com o rodapé e com a barra do navegador. Um
   pouco menor e mais colado ao canto, para não cobrir texto. */
@media (max-width: 767px) {
    .zap {
        width: 52px;
        height: 52px;
    }
    .zap svg { width: 28px; height: 28px; }
}

@media (prefers-reduced-motion: reduce) {
    .zap { transition: none; }
    .zap:hover, .zap:focus-visible { transform: none; }
}


/* ==========================================================================
   12e. ANEL DE FOCO
   WCAG 2.4.7 Focus Visible, nivel AA.

   O m2-theme.css define `:focus-visible { outline: 2px solid var(--terracotta) }`
   e essa regra chegava pela metade na tela: `outline-color` computava certo, em
   terracota, enquanto `outline-style` ficava `none` e `outline-width`, `0`. O
   anel existia no fonte e nao aparecia para ninguem.

   COMO ISSO FOI MEDIDO, porque o metodo importa e a primeira tentativa errou.
   `element.focus()` por script nao ativa `:focus-visible`: a pseudo-classe so
   casa quando o foco veio do teclado. Medir assim le o estado sem foco e
   inventa um defeito. Ler dentro do handler de `focusin` tambem engana, porque
   o recalculo de estilo ainda nao aconteceu naquele instante.

   O unico metodo que vale: apertar Tab de verdade e medir numa tarefa
   posterior. Feito assim, em A/B no mesmo build:

     sem esta regra   skip-link `none 0px`, indice `none 0px`, rodape `none 0px`
     com esta regra   anel solido de 2px em todos

   Os campos do briefing sempre pintaram, porque `.campo input:focus` tem
   especificidade (0,2,1) e ganha sozinho. Era o unico lugar do site com foco
   visivel.

   POR QUE !important, sendo que o projeto nao usa em nenhum outro lugar: nao da
   para enumerar os resets de um Bootstrap inteiro mais o custom.css do
   template, e subir especificidade a cada descoberta e corrida sem linha de
   chegada. Uma das regras que ganhavam esta achada: `bootstrap.min.css` traz
   `.nav-link:focus-visible { outline: 0 }`, e (0,2,0) derrota o (0,1,0) do
   tema. Anel de foco e requisito de acessibilidade, nao preferencia estetica, e
   anular reset de terceiro e exatamente o caso de uso do !important. Quando o
   Bootstrap sair do bundle, isto pode voltar a ser regra comum.
   ========================================================================== */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--terracotta-ink) !important;
    outline-offset: 3px;
}

/* Sobre asfalto o terracota escuro some. A variante clara vale para o cabecalho
   de pagina, as secoes escuras, o hero, o header e o rodape. */
.section-dark a:focus-visible,
.section-dark button:focus-visible,
.secao--asfalto a:focus-visible,
.page-hero a:focus-visible,
.hero a:focus-visible,
.main-footer a:focus-visible,
.header-sticky a:focus-visible,
.campo input:focus-visible,
.campo select:focus-visible,
.campo textarea:focus-visible {
    outline-color: var(--terracotta-lit) !important;
}

/* O skip link pinta sobre asfalto assim que aparece. */
.skip-link:focus,
.skip-link:focus-visible {
    outline: 2px solid var(--terracotta-lit) !important;
    outline-offset: 2px;
}

/* O botao de WhatsApp fica sobre verde: nenhum dos dois terracota resolve. */
.zap:focus-visible {
    outline: 3px solid var(--paper) !important;
    outline-offset: 3px;
}

/* Os campos do briefing ja trocavam a borda por outline no :focus. Mantido. */
.campo input:focus,
.campo select:focus,
.campo textarea:focus {
    outline: 2px solid var(--terracotta-lit) !important;
    outline-offset: 1px;
}

/* Controles nativos vivem sobre asfalto. Sem isto o sistema operacional em tema
   claro pinta a lista do select, a barra de rolagem e o cursor de texto com
   cromo claro, sobre fundo escuro. */
.campo input,
.campo select,
.campo textarea {
    color-scheme: dark;
}


/* ==========================================================================
   13. RESPONSIVO
   ========================================================================== */

@media (max-width: 1199px) {
    .main-menu ul li a { padding: 10px 9px !important; }
    .main-menu ul li a::after { left: 9px; right: 9px; }
}

@media (max-width: 991px) {
    .ficha,
    .prancha,
    .faixa-contato__grid {
        grid-template-columns: minmax(0, 1fr);
    }
    .prancha:nth-of-type(even) .prancha__media { order: 0; }
    .faixa-contato__aparte { margin-top: 0; }
    .page-hero h1 { max-width: none; }
}

@media (max-width: 767px) {
    .page-hero {
        padding: 52px 0 44px;
    }
    .briefing {
        grid-template-columns: minmax(0, 1fr);
    }
    .etapa {
        grid-template-columns: 62px minmax(0, 1fr);
        gap: 18px;
    }
    .etapa::before { left: 30px; top: 50px; }
    .etapa__marca { width: 62px; height: 50px; font-size: 15px; }
    .etapa__titulo { padding-top: 9px; }
    .prancha__ficha > div {
        grid-template-columns: minmax(0, 1fr);
        gap: 4px;
    }
    .fatos {
        grid-template-columns: minmax(0, 1fr);
    }
    /* O numeral de nível não pode empurrar o texto no telefone. */
    .page-hero__nivel {
        font-size: 150px;
        bottom: -0.24em;
    }

    /* O tema já encolhe o retrato do sócio para 116px no telefone. A regra de
       190px da página tem que sair de cena aqui, senão sobra texto de 12
       caracteres por linha ao lado da foto. */
    .socio--pagina {
        padding: 18px;
    }
    .socio--pagina .socio__media {
        flex-basis: 116px;
    }

    .ficha__icone {
        margin: 16px 0 18px;
    }

    /* Coluna estreita e texto justificado não convivem: a 375px sobra buraco
       entre palavras mesmo com hifenização. Abaixo de 768px o texto volta a
       ser alinhado à esquerda, que é o que se lê melhor no telefone. */
    .page-hero__lead,
    .section-title-content p,
    .medida p,
    .about-us-content__corpo,
    .hero-content .section-title > p,
    .ficha__corpo,
    .ficha__pratica,
    .etapa__corpo,
    .consequencias p,
    .socio__corpo,
    .socio__creds li,
    .area__corpo,
    .pilar__corpo,
    .regua p,
    .servico__corpo,
    .why-choose-item-content p,
    .briefing-noscript li {
        text-align: left;
        hyphens: manual;
        -webkit-hyphens: manual;
    }


    /* A linha de cota e uma regua de tres pecas: rotulo, tracejado e legenda.
       A 375px a legenda mais longa ("05 projetos em andamento, tres
       publicados") esmaga o tracejado ate zero e ainda quebra em duas linhas
       coladas no rotulo. Sem o tracejado, as duas pontas empilham e a leitura
       volta. A regua nao e o conteudo, os dois textos sao. */
    .page-hero__cota {
        flex-wrap: wrap;
        gap: 6px 14px;
        /* A linha do meio some no telefone; a borda assume o lugar dela. */
        border-top: 1px solid var(--rule-on-dark);
    }
    .page-hero__cota-line {
        display: none;
    }
}


/* ==========================================================================
   14. MOVIMENTO REDUZIDO
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .proximo__card,
    .proximo__seta,
    .saida,
    .saida::after,
    .indice a,
    .campo input,
    .campo select,
    .campo textarea {
        transition: none !important;
    }
    .proximo__card:hover .proximo__seta { transform: none; }
}


/* ==========================================================================
   15. REVISÃO DO CLIENTE, 05 SET 2026
   Tudo que a rodada de considerações pediu e que é CSS, num bloco só, com o
   número do item do PDF ao lado. Fica por último para ganhar do tema por
   ordem, sem subir especificidade.
   ========================================================================== */

/* Item 1: logo do topo maior. O tema fixa 150px (128px abaixo de 992px). */
.navbar-brand img {
    width: 196px;
}
@media (max-width: 991px) {
    .navbar-brand img { width: 164px; }
}
@media (max-width: 575px) {
    .navbar-brand img { width: 148px; }
}

/* Itens 3, 10, 58 e 65: "simetria" entre título e parágrafo. As linhas de
   seção passaram a alinhar pelo topo (align-items-start no HTML). O eyebrow
   nasce com 20px de margem superior herdada do template, então o parágrafo
   da direita, e o desenho do corte na home, recebem os mesmos 20px para as
   primeiras linhas nascerem na mesma altura. Medido: eyebrow e parágrafo têm
   a mesma altura de linha (27,2px), então o topo bate com o topo. */
/* 17 set: as seções curtas (Responsabilidade social em Quem somos, Próximos
   passos em Contato) não usam .section-row e ficavam 20px acima do eyebrow. */
.section-row.align-items-start .section-title-content,
.secao--curta .row.align-items-start .section-title-content,
.about-us-images--sem-contador {
    padding-top: 20px;
}
@media (max-width: 991px) {
    .section-row.align-items-start .section-title-content,
    .secao--curta .row.align-items-start .section-title-content,
    .about-us-images--sem-contador { padding-top: 0; }
}

/* Item 4: sem o contador, a legenda do corte não precisa reservar a calha. */
.about-us-images--sem-contador {
    --contador-calha: 0px;
}

/* Item 29: o e-mail do rodapé vinha em Capitalize do custom.css herdado
   ("Contato@M2arqeng.Com.Br"). Endereço de e-mail não tem maiúscula. */
.footer-links ul li,
.footer-links ul li a {
    text-transform: none;
}

/* Item 30: a frase do rodapé alinhada com a coluna "Contato". O custom.css
   centralizava a faixa inteira. */
.footer-copyright {
    text-align: left;
}
.footer-mono {
    text-align: left;
}

/* Página 33 do PDF: o briefing saiu do asfalto para o papel. Os campos foram
   desenhados para fundo escuro; esta é a variante clara. */
.briefing--claro .campo label,
.briefing--claro .campo label .opcional {
    color: var(--graphite-paper);
}
.briefing--claro .campo input,
.briefing--claro .campo select,
.briefing--claro .campo textarea {
    color: var(--asphalt);
    border-color: var(--rule-strong);
    /* background-color, e não o atalho background: o atalho zeraria o
       background-size da seta desenhada do select, e ela viraria um
       triângulo do tamanho do campo. */
    background-color: var(--white);
    color-scheme: light;
}
.briefing--claro .campo select {
    background-image:
        linear-gradient(45deg, transparent 50%, var(--graphite-paper) 50%),
        linear-gradient(135deg, var(--graphite-paper) 50%, transparent 50%);
}
.briefing--claro .campo select option {
    background: var(--white);
    color: var(--asphalt);
}
.briefing--claro .campo input:hover,
.briefing--claro .campo select:hover,
.briefing--claro .campo textarea:hover {
    border-color: var(--graphite);
}
.briefing--claro .campo input:focus,
.briefing--claro .campo select:focus,
.briefing--claro .campo textarea:focus,
.briefing--claro .campo input:focus-visible,
.briefing--claro .campo select:focus-visible,
.briefing--claro .campo textarea:focus-visible {
    outline-color: var(--terracotta-ink) !important;
    background-color: var(--white);
}
.briefing--claro .campo input::placeholder,
.briefing--claro .campo textarea::placeholder {
    color: rgba(29, 31, 32, 0.42);
}
.briefing--claro .briefing__retorno {
    border-left-color: var(--terracotta-ink);
    background: var(--concrete);
    color: var(--asphalt);
}
.briefing--claro .briefing__nota {
    color: var(--graphite-paper);
}
.secao--papel .briefing-noscript ol {
    color: var(--graphite-paper);
}

/* Itens 100 e 101: próximo passo com um card só não deve virar uma faixa de
   borda a borda. */
.proximo__grid--um {
    max-width: 560px;
}

/* Páginas 35 e 36 do PDF: seção Clientes, no lugar dos cards de saída da
   página de contato. Logos em cinza para a marca da M2 continuar sendo a
   única cor da página; voltam à cor original quando o cursor passa. */
.clientes {
    background: var(--paper);
    border-top: 1px solid var(--rule);
    padding: clamp(56px, 7vw, 96px) 0;
}
.clientes .section-row {
    margin-bottom: clamp(28px, 3vw, 44px);
}
.clientes__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1px;
    background: var(--rule);
    border: 1px solid var(--rule);
}
.clientes__item {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 150px;
    padding: 28px 32px;
    background: var(--paper);
}
.clientes__item img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 64px;
    filter: grayscale(1);
    opacity: 0.72;
    transition: filter var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.clientes__item:hover img,
.clientes__item:focus-within img {
    filter: none;
    opacity: 1;
}
@media (max-width: 575px) {
    .clientes__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .clientes__item {
        min-height: 110px;
        padding: 20px 18px;
    }
    .clientes__item img { max-height: 48px; }
}
@media (prefers-reduced-motion: reduce) {
    .clientes__item img { transition: none !important; }
}


/* ==========================================================================
   16. AJUSTES DE 08 SET 2026
   ========================================================================== */

/* Hero em três fotos que se alternam a cada 3 s. Cada slide ocupa a área
   inteira e só o ativo tem opacidade; a troca é um crossfade de 900 ms.
   Sem JS nada gira: a primeira já nasce ativa no HTML. */
.hero__slides {
    overflow: hidden;
}
.hero__slide {
    position: absolute;
    inset: 0;
    display: block;
    opacity: 0;
    transition: opacity 900ms var(--ease);
}
.hero__slide.is-active {
    opacity: 1;
}
.hero__slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 42%;
}
@media (prefers-reduced-motion: reduce) {
    .hero__slide { transition: none; }
}

/* Botão de pausa do hero: mora na linha de cota, no mesmo mono das cotas. */
.hero-cota__pausa {
    flex: 0 0 auto;
    margin: 0 18px;
    padding: 12px 10px;
    min-height: 44px;
    border: 0;
    background: transparent;
    font-family: var(--font-mono);
    font-size: var(--fs-mono-xs);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--on-dark-faint);
    cursor: pointer;
    transition: color var(--dur) var(--ease);
}
.hero-cota__pausa:hover,
.hero-cota__pausa[aria-pressed="true"] {
    color: var(--terracotta-lit);
}
.hero-cota__pausa::before {
    content: '\2016';
    margin-right: 8px;
}
.hero-cota__pausa[aria-pressed="true"]::before {
    content: '\25B8';
}

/* Página de privacidade: subtítulos dentro da coluna de texto. */
.politica__h3 {
    margin: 2em 0 0.5em;
    font-family: var(--font-display);
    font-size: var(--fs-h3);
    font-weight: 600;
    letter-spacing: var(--ls-heading);
    color: var(--asphalt);
}
.politica__h3 + p { margin-top: 0; }
.footer-copyright-text a {
    color: var(--on-dark-muted);
    text-decoration: underline;
    text-underline-offset: 3px;
    margin-left: 10px;
}
.footer-copyright-text a:hover { color: var(--terracotta-lit); }

/* 11 set 2026: imagens de serviço e dos cards da home em <picture>, com WebP e
   JPEG de reserva. <picture> é inline por padrão, o que deixa um vão de linha
   de base embaixo da imagem; como bloco, a moldura abraça a imagem. */
.ficha__media picture,
.project-image picture {
    display: block;
}

/* 17 set: na home, a faixa de contato encosta no rodapé sem emenda. As duas
   seções ficam no mesmo asfalto e o papel milimetrado não some na junção:
   a faixa só esmaece no topo e o rodapé só na base. */
.pagina-home .faixa-contato {
    background: var(--asphalt-deep);
}
.pagina-home .faixa-contato.grid-paper::before {
    mask-image: linear-gradient(to bottom, transparent, #000 12%);
}
.pagina-home .main-footer.grid-paper::before {
    mask-image: linear-gradient(to bottom, #000 88%, transparent);
}