/*
Descrição: Estilos base e reset geral, aplicados ao site inteiro — inclui
           a paleta de cores global, tipografia, o rodapé (presente no
           fundo de todas as páginas, com morada/contacto, redes sociais
           e links legais) e o texto das páginas legais (Política de
           Privacidade, RGPD). O rodapé tem uma grelha de fundo e uma
           linha de gradiente no topo, o mesmo motivo "técnico" do hero,
           para ficar coerente com o resto do site. O mapa da sede
           mudou-se para uma secção própria da página inicial (ver
           ".location" em home.css). A faixa final do rodapé (copyright)
           tem fundo fixo preto/branco consoante o tema (não o azulado do
           resto do rodapé) e a mesma linha de gradiente do topo. A
           paleta adapta-se automaticamente ao tema do sistema do
           visitante (claro por omissão, escuro via
           "prefers-color-scheme"). Inclui também o rótulo "// ..." e o
           cabeçalho de secção (".section-eyebrow", ".section-heading"),
           partilhados pela página inicial e pelas páginas de detalhe de
           serviço. Estilos do menu ficam em menu.css; estilos exclusivos
           da homepage em home.css.
Autor: Emanuel Borges
Versão: 3.16.0
Última alteração: 2026-10-08
*/

:root {
    /* Tema claro (omissão) — antes era branco puro (#ffffff), que ficava
       demasiado "em branco" e destoava do azul da marca usado no menu e
       no tema escuro. Agora é um branco com um toque de azul (o mesmo
       espírito do tema escuro, só que bem mais claro), para o site
       inteiro combinar com o azul do menu em vez de parecer neutro. */
    --color-bg: #f5f9fd;
    --color-bg-alt: #e9f1fb;
    --color-primary: #1565c0;
    --color-primary-light: #0d47a1;
    --color-text: #0b1220;
    --color-text-muted: #49586b;
    --color-border: rgba(9, 30, 66, 0.12);
    --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
    :root {
        /* Tema escuro — o painel (--color-bg-alt, usado no menu e nos
           cartões) usa o mesmo tom de azul do logótipo, só que bem mais
           escuro, em vez de um azul-acinzentado que destoava dele. */
        --color-bg: #060b16;
        --color-bg-alt: #062e4b;
        --color-primary: #1565c0;
        --color-primary-light: #4fc3f7;
        --color-text: #e8eef7;
        --color-text-muted: #9fb3d1;
        --color-border: rgba(255, 255, 255, 0.08);
    }
}

/* Faz com que padding/border entrem na largura definida, em vez de a
   aumentarem — evita que elementos "estourem" o ecrã em telas pequenas. */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

/* Bloqueia o scroll da página por trás de um popup aberto (ver
   ".partner-modal" em home.css) — aplicada/removida em JS. */
body.no-scroll {
    overflow: hidden;
}

body {
    margin: 0;
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: Arial, Helvetica, sans-serif;
    overflow-x: hidden;
    opacity: 1;
    transition: opacity 220ms ease;
}

/* Transição suave (fade) ao sair de uma página, controlada por
   transitions.js. "page-transition-leaving" é acrescentada ao clicar
   numa ligação, para a página atual desaparecer antes de navegar. */
html.page-transition-leaving body {
    opacity: 0;
}

h1,
h2,
h3 {
    line-height: 1.2;
}

p {
    color: var(--color-text-muted);
    line-height: 1.6;
}

a {
    color: var(--color-primary-light);
}

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

section {
    /* Evita que o menu fixo tape o topo da secção ao saltar para uma âncora. */
    scroll-margin-top: var(--menu-clearance);
    padding: 60px 20px;
}

/* Centra o conteúdo de cada secção sempre na mesma largura máxima, para
   tudo ficar alinhado verticalmente ao longo da página (ex.: o texto do
   hero e os títulos das secções seguintes começam sempre na mesma coluna). */
.container {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
}

/* Rótulo técnico pequeno, tipo comentário de código, usado acima dos
   títulos de secção para reforçar a imagem "técnica" do site — partilhado
   pela página inicial e pelas páginas de detalhe de cada serviço (por
   isso vive aqui, não em home.css). */
.section-eyebrow {
    display: block;
    font-family: var(--font-mono);
    font-size: 13px;
    letter-spacing: 0.08em;
    color: var(--color-primary-light);
    margin-bottom: 10px;
}

.section-heading {
    max-width: 640px;
    margin: 0 0 48px;
}

.section-heading h2 {
    font-size: clamp(28px, 4vw, 38px);
    margin: 0 0 12px;
}

/* Esconde visualmente mas mantém acessível a leitores de ecrã — usado
   para dar contexto a conteúdo puramente decorativo/animado (ex.: o
   texto de "máquina de escrever" do hero). */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Em ecrãs pequenos reduz-se o respiro vertical das secções, para não
   obrigar a demasiado scroll. */
@media (max-width: 600px) {
    section {
        padding: 40px 16px;
    }
}

/* ---------- Botões ---------- */
/* Partilhado por todo o site (hero, formulário de contacto, etc.) —
   estilos específicos de cada botão (ex.: a seta do "Saber mais" nos
   cartões de serviço) continuam junto do resto dessa página. */

.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 26px;
    border-radius: 4px;
    font-size: 16px;
    font-weight: bold;
    font-family: inherit;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.btn:hover {
    transform: translateY(-2px);
}

.btn-primary {
    background-color: var(--color-primary);
    color: #ffffff;
}

.btn-primary:hover {
    background-color: var(--color-primary-light);
    color: var(--color-bg);
}

.btn-outline {
    background-color: rgba(21, 101, 192, 0.14);
    border-color: var(--color-primary-light);
    color: var(--color-primary-light);
}

.btn-outline:hover {
    background-color: rgba(21, 101, 192, 0.24);
}

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

/* Grelha tipo "planta técnica" discreta (o mesmo motivo do fundo do
   hero) e uma linha de gradiente fina no topo (como uma "trilha de
   circuito") — para o rodapé ficar visualmente coerente com o resto do
   site, em vez de ser só um bloco de cor sólida. */
.site-footer {
    position: relative;
    background-color: var(--color-bg-alt);
    background-image:
        linear-gradient(rgba(21, 101, 192, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(21, 101, 192, 0.06) 1px, transparent 1px);
    background-size: 28px 28px;
    border-top: 1px solid var(--color-border);
}

.site-footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--color-primary-light), transparent);
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 40px;
    padding: 60px 20px 40px;
}

.footer-brand img {
    height: 36px;
    margin-bottom: 16px;
}

.footer-brand p {
    max-width: 340px;
    font-size: 14px;
    margin: 0;
}

/* Rótulo pequeno tipo "comentário de código" (mesmo estilo do
   ".section-eyebrow" usado nos títulos das secções), para os ícones não
   ficarem a "flutuar" sem contexto nenhum. */
.footer-social-eyebrow {
    display: block;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
    margin-top: 20px;
    margin-bottom: 10px;
}

/* Ícones das redes sociais — cinzentos discretos em repouso (não azuis,
   para não ficar tudo da mesma cor no rodapé) e só ganham a cor real da
   marca (Facebook, X, Instagram, LinkedIn, WhatsApp) ao passar o rato —
   mais variado e "vivo" do que um azul uniforme. */
.footer-social {
    display: flex;
    gap: 10px;
}

.footer-social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: color-mix(in srgb, var(--color-text-muted) 18%, transparent);
    color: var(--color-text-muted);
    transition: background-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.footer-social-link:hover {
    color: #ffffff;
}

.footer-social-link--facebook:hover {
    background-color: #1877f2;
}

.footer-social-link--x:hover {
    background-color: #000000;
}

.footer-social-link--instagram:hover {
    background: radial-gradient(circle at 30% 110%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
}

.footer-social-link--linkedin:hover {
    background-color: #0a66c2;
}

.footer-social-link--whatsapp:hover {
    background-color: #25d366;
}

.footer-social-link svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

.footer-nav h3,
.footer-contact h3 {
    font-family: var(--font-mono);
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text);
    margin: 0 0 16px;
}

.footer-nav ul,
.footer-contact ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer-nav a,
.footer-contact a {
    color: var(--color-text-muted);
    text-decoration: none;
    font-size: 14px;
    transition: color 0.2s ease;
}

.footer-nav a:hover,
.footer-contact a:hover {
    color: var(--color-primary-light);
}

.footer-contact li {
    font-size: 14px;
    color: var(--color-text-muted);
}

/* Email e telefone na mesma linha, separados por "|" (o span a seguir),
   em vez de um por baixo do outro como o resto da lista. */
.footer-contact-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

/* Fundo fixo (preto/branco consoante o tema, não o "--color-bg-alt"
   azulado do resto do rodapé) e a mesma linha de gradiente do topo do
   rodapé (ver ".site-footer::before"), para esta faixa final se destacar
   como um "rodapé do rodapé". */
.footer-bottom {
    position: relative;
    background-color: #ffffff;
    border-top: 1px solid var(--color-border);
    padding: 20px;
}

.footer-bottom::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--color-primary-light), transparent);
}

@media (prefers-color-scheme: dark) {
    .footer-bottom {
        background-color: #000000;
    }
}

.footer-bottom .container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 24px;
}

.footer-bottom p {
    margin: 0;
    font-size: 13px;
}

/* Links legais (Política de Privacidade, RGPD) — junto ao copyright, em
   vez de na navegação principal do rodapé, por serem páginas de apoio,
   não secções do site. */
.footer-legal {
    display: flex;
    gap: 16px;
}

.footer-legal a {
    font-size: 13px;
    color: var(--color-text-muted);
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-legal a:hover {
    color: var(--color-primary-light);
}

/* ---------- Páginas de texto legal (Política de Privacidade, RGPD) ---------- */

.legal-content {
    padding: 80px 20px 120px;
}

.legal-content .container {
    max-width: 760px;
}

.legal-content h1 {
    font-size: clamp(28px, 4vw, 38px);
    margin: 0 0 8px;
}

.legal-content .legal-updated {
    color: var(--color-text-muted);
    font-size: 14px;
    margin: 0 0 40px;
}

.legal-content h2 {
    font-size: 20px;
    margin: 40px 0 12px;
}

.legal-content p {
    color: var(--color-text-muted);
    line-height: 1.7;
    margin: 0 0 16px;
}

.legal-content ul {
    margin: 0 0 16px;
    padding-left: 20px;
}

.legal-content li {
    color: var(--color-text-muted);
    line-height: 1.7;
}

.legal-content a {
    color: var(--color-primary-light);
}

@media (max-width: 700px) {
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 28px;
        padding: 48px 20px 32px;
    }
}