/* ==========================================================================
   Reset e correções base (herdado do HTML5 Boilerplate, revisto)
   ========================================================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    /* Controlo central do tamanho de letra do site inteiro.
       Como todo o texto (font-size) está agora em rem, basta ajustar
       esta percentagem para escalar tudo proporcionalmente — sem
       precisar de tocar nos ficheiros CSS individuais.
       100% = 16px (default do browser). Ex.: 112.5% = 18px. */
    font-size: 112.5%;

    scroll-behavior: smooth;
    overflow-x: hidden;
}

audio, canvas, iframe, img, svg, video {
    vertical-align: middle;
}

hr {
    /* Herdado do HTML5 Boilerplate. Nenhuma página usa <hr> atualmente,
       mantido pronto para uso — custo zero em performance. */
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

.visually-hidden {
    /* Esconde visualmente mas mantém acessível a leitores de ecrã e
       motores de busca — usada por ex. no <h1> escondido da hero. */
    border: 0;
    clip: rect(0, 0, 0, 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

/* ==========================================================================
   Identidade visual — SVS Carpintaria (design tokens)
   ========================================================================== */

:root {
    --madeira-clara: #8e651b;
    --madeira-media: #6c390f;
    --madeira-escura: #3f1d15;
    --verde-cta: #226c0d;
    --fundo-claro: #faf6f0;
    --fundo-header: #f5ede0;
    --secao-alt: #e8ddce;
    --borda-suave: #e2d5c3;
    --fonte-destaque: "Jost", sans-serif;

    /* Canais RGB das mesmas cores, para permitir rgba() com opacidade
       nativa sem repetir valores hexadecimais espalhados pelo CSS. */
    --madeira-clara-rgb: 142, 101, 27;
    --madeira-escura-rgb: 63, 29, 21;
    --verde-cta-rgb: 34, 108, 13;
    --secao-alt-rgb: 232, 221, 206;
    --fundo-header-rgb: 245, 237, 224;

    /* Largura máxima do conteúdo do site */
    --largura-maxima: 1600px;
}

::selection {
    background: var(--madeira-clara);
    color: var(--fundo-claro);
}

body {
    font-family: system-ui, -apple-system, sans-serif;
    background-color: var(--fundo-claro);
    color: var(--madeira-escura);
    line-height: 1.4;
    overflow-x: hidden;
}

/* ==========================================================================
   Utilitários de layout (reutilizáveis em qualquer secção)
   ========================================================================== */

.fundo-cheio {
    width: calc(100vw / var(--zoom));
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: calc(-50vw / var(--zoom));
    margin-right: calc(-50vw / var(--zoom));
}

.limite-largura {
    max-width: var(--largura-maxima);
    margin: 0 auto;
    padding: 0 24px;
}

.imagem-temporaria {
    /* TODO: remover antes do deploy — placeholder de debug (verde néon
       intencional, para ser impossível de não notar). */
    background-color: #39ff14;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000;
    font-family: system-ui, sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center;
    padding: 8px;
}

/* ==========================================================================
   Cabeçalho
   ========================================================================== */

.cabecalho {
    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 0 max(24px, calc((100% - var(--largura-maxima)) / 2));
    height: 100px;

    background-image: linear-gradient(rgba(var(--fundo-header-rgb), 0.75), rgba(var(--fundo-header-rgb), 0.75)), url("../img/header-textura.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    border-bottom: 1px solid var(--borda-suave);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);

    position: sticky;
    top: 0;
    z-index: 100;
}

.cabecalho__logo,
.cabecalho__logo a {
    display: flex;
    align-items: center;
    height: 100%;
    text-decoration: none;
}

.cabecalho__logo img {
    max-height: 68px;
    width: auto;
    object-fit: contain;
    display: block;
}

/* Navegação */
.cabecalho__menu {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-left: auto;
}

.cabecalho__menu a {
    position: relative;
    font-family: "Montserrat", sans-serif;
    /* Peso 300 é a intenção de design (menu fino e elegante). Requer que
       o <head> importe "Montserrat:wght@300;600" — sem esse import o
       browser usa o único peso carregado (600) e o menu fica mais pesado
       do que o pretendido. */
    font-weight: 300;
    color: var(--madeira-escura);
    text-decoration: none;
    font-size: 1.125rem;
    padding: 15px 32px; /* era 32.5px — arredondado para valor inteiro */
    transition: color 0.3s ease;
}

/* Preparado para uso futuro: um botão CTA no menu (ex. "Orçamento") que
   não deve ter a animação de moldura diagonal dos restantes links.
   Ainda sem elemento correspondente no HTML. */
.cabecalho__cta:hover {
    background-color: var(--madeira-media);
    color: var(--fundo-claro) !important;
}

/* Animação de moldura em diagonal (links do menu, exceto o CTA) */

.cabecalho__menu a:not(.cabecalho__cta)::before,
.cabecalho__menu a:not(.cabecalho__cta)::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 0 solid var(--madeira-clara);
    transform: scale(0);
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: transform;
}

.cabecalho__menu a:not(.cabecalho__cta)::before {
    border-bottom-width: 2px;
    border-left-width: 2px;
    transform-origin: bottom left;
}

.cabecalho__menu a:not(.cabecalho__cta)::after {
    border-top-width: 2px;
    border-right-width: 2px;
    transform-origin: top right;
}

.cabecalho__menu a:not(.cabecalho__cta):hover {
    color: var(--madeira-clara);
}

.cabecalho__menu a:not(.cabecalho__cta):hover::before,
.cabecalho__menu a:not(.cabecalho__cta):hover::after {
    transform: scale(1);
}

/* ==========================================================================
   Conteúdo principal e Botão Voltar
   ========================================================================== */

main {
    position: relative; /* para a seta do botão Voltar não fugir do main */
    min-height: 60vh;
    max-width: var(--largura-maxima);
    margin: 0 auto;
}

.btn-voltar-main {
    position: absolute;
    top: 40px;
    left: max(24px, calc((100% - var(--largura-maxima)) / 2));
    z-index: 10;

    display: inline-flex;
    align-items: center;
    gap: 10px;

    color: var(--madeira-media);
    font-family: var(--fonte-destaque);
    font-size: 0.9375rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;

    transition: color 0.3s ease, transform 0.3s ease;
}

.btn-voltar-main:hover {
    color: var(--madeira-clara);
    transform: translateX(-4px);
}

.btn-voltar-main svg {
    width: 24px;
    height: 24px;
}

/* ==========================================================================
   Rodapé
   ========================================================================== */

.rodape {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: start;

    background-color: var(--madeira-escura);
    color: var(--secao-alt);

    padding-top: 26px;
    padding-bottom: 26px;
    padding-left: max(24px, calc((100% - var(--largura-maxima)) / 2));
    padding-right: max(24px, calc((100% - var(--largura-maxima)) / 2));

    font-size: 0.875rem;
}

.rodape__coluna {
    display: flex;
    flex-direction: column;
    gap: 8px;
    justify-self: start;
    padding-right: 40px;
}

.rodape__coluna--info {
    justify-self: end;
    text-align: left;
    padding-left: 40px;
    border-left: 1px solid rgba(var(--secao-alt-rgb), 0.18);
}

.rodape__coluna--info p {
    line-height: 1.5;
}

.rodape__coluna h3,
.rodape__nome {
    font-size: 0.875rem;
    color: var(--fundo-claro);
    margin-bottom: 4px;
}

.rodape__tagline {
    font-size: 0.8125rem;
    color: var(--secao-alt);
    opacity: 0.75;
    margin-top: -4px;
    margin-bottom: 0;
}

.rodape__logo {
    justify-self: center;
    align-self: center;
    padding: 0 40px;
    border-left: 1px solid rgba(var(--secao-alt-rgb), 0.18);
    border-right: 1px solid rgba(var(--secao-alt-rgb), 0.18);
}

.rodape__logo img {
    height: 76px;
    width: auto;
}

.rodape__redes {
    display: flex;
    gap: 12px;
}

.rodape__redes .rodape__icone {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background-color: var(--fundo-claro);
    color: var(--madeira-escura);
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
}

.rodape__redes .rodape__icone svg {
    width: 20px;
    height: 20px;
}

.rodape__redes .rodape__icone:hover {
    background-color: var(--verde-cta);
    color: var(--fundo-claro);
    transform: translateY(-2px);
}

.rodape__copy {
    font-size: 0.75rem;
    color: var(--madeira-clara);
    margin-top: 4px;
}

.rodape a {
    color: var(--secao-alt);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.rodape a:hover {
    color: var(--madeira-clara);
}

@media (max-width: 700px) {
    .rodape {
        grid-template-columns: 1fr;
        text-align: center;
        justify-items: center;
        gap: 32px;
    }

    .rodape__coluna,
    .rodape__coluna--info,
    .rodape__logo {
        justify-self: center;
        text-align: center;
        padding: 0;
        border: none;
    }

    .rodape__redes {
        justify-content: center;
    }
}

/* ==========================================================================
   Texto de destaque (maiúsculas + letter-spacing)
   ========================================================================== */

.texto-destaque {
    font-family: var(--fonte-destaque);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-style: normal;
}

/* ==========================================================================
   Sistema tipográfico global (títulos + corpo de texto)
   ========================================================================== */

/* Fonte de corpo — texto corrido, parágrafos de conteúdo. Roboto é
   distinta do Jost (--fonte-destaque, usado em títulos/labels/menu),
   dando contraste claro entre "destaque" e "leitura". Precisa de estar
   importada no <head> de cada página: family=Roboto:wght@400 */
:root {
    --fonte-corpo: "Roboto", sans-serif;
}

/* --------------------------------------------------------------------
   Títulos — todos em Jost (texto-destaque), variando só o tamanho.
   Usar em conjunto com a classe .texto-destaque já existente, ex.:
   <h1 class="titulo-1 texto-destaque">
   -------------------------------------------------------------------- */

.titulo-1 {
    /* H1 de abertura de página/secção — ex. "SVS Carpintaria", "Projetos" */
    font-size: 36px;
    line-height: 1.3;
    color: var(--madeira-escura);
}

.titulo-2 {
    /* H2 de secção principal — ex. "Feito à medida.", "NOSSO TRABALHO" */
    font-size: 32px;
    line-height: 1.3;
    color: var(--madeira-escura);
}

.titulo-3 {
    /* H3 de subsecção — ex. "O que pode ser incluído", etapas da timeline */
    font-size: 22px;
    line-height: 1.4;
    color: var(--madeira-escura);
}

.titulo-4 {
    /* Rótulos/subtítulos pequenos — ex. "Segue-nos" no rodapé,
       etiquetas de formulário quando precisam de mais destaque */
    font-size: 16px;
    line-height: 1.4;
    color: var(--madeira-escura);
}

/* --------------------------------------------------------------------
   Corpo de texto — parágrafos de conteúdo corrido, sempre em Roboto.
   Usar em conjunto com a cor local da secção quando necessário, ex.:
   <p class="corpo" style="color: var(--fundo-claro)"> em secções escuras.
   -------------------------------------------------------------------- */

.corpo {
    font-family: var(--fonte-corpo);
    font-weight: 400;
    font-style: normal;
    font-size: 18px;
    letter-spacing: 0.01em;
    line-height: 2em;
    text-transform: none;
    text-align: justify;
    hyphens: auto;
    color: var(--madeira-escura);
}

/* Variante do corpo para a timeline da secção "A Nossa Evolução"
   (fundo escuro, colunas estreitas de 4 — o 18px justificado do
   .corpo cria demasiados espaços/hifens neste contexto apertado).
   Única exceção onde o texto de corpo não segue .corpo. */
.corpo-timeline {
    font-family: var(--fonte-corpo);
    font-weight: 400;
    font-style: normal;
    font-size: 14px;
    letter-spacing: 0.01em;
    line-height: 1.7;
    text-transform: none;
    color: var(--secao-alt);
    opacity: 0.85;
}

/* ==========================================================================
   Menu mobile (hamburger)
   ========================================================================== */

.cabecalho__menu-toggle {
    display: none;
    background: none;
    border: none;
    color: var(--madeira-escura);
    cursor: pointer;
    padding: 8px;
}

.cabecalho__menu-toggle svg {
    width: 28px;
    height: 28px;
}

@media (max-width: 900px) {
    .cabecalho__menu-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .cabecalho__menu {
        position: fixed;
        top: 100px; /* altura do cabeçalho */
        left: 0;
        right: 0;
        margin-left: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;

        background-color: var(--fundo-header);
        border-bottom: 1px solid var(--borda-suave);
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);

        max-height: 0;
        overflow: hidden;
        opacity: 0;
        transition: max-height 0.3s ease, opacity 0.3s ease;
    }

    .cabecalho__menu.aberto {
        max-height: 400px;
        opacity: 1;
    }

    .cabecalho__menu a {
        padding: 18px 24px;
        text-align: center;
        border-top: 1px solid var(--borda-suave);
    }

    .cabecalho__menu a:first-child {
        border-top: none;
    }

    /* A animação de moldura diagonal foi pensada para hover de rato;
       em ecrã tátil não faz sentido e só acrescenta ruído visual. */
    .cabecalho__menu a::before,
    .cabecalho__menu a::after {
        display: none;
    }
}

/* ==========================================================================
   Escala global por faixas de largura (equivale ao zoom do browser)
   ========================================================================== */

:root { --zoom: 1; }

@media (min-width: 901px) and (max-width: 1399px) {
    :root { --zoom: 0.7; }
    html  { zoom: var(--zoom); }
}

@media (min-width: 1400px) and (max-width: 1599px) {
    :root { --zoom: 0.75; }
    html  { zoom: var(--zoom); }
}

@media (min-width: 1600px) and (max-width: 1799px) {
    :root { --zoom: 0.85; }
    html  { zoom: var(--zoom); }
}
/* 1800px+ e mobile (≤900px): sem zoom */