/* ============================================
Socisola — folha de estilos partilhada
Estrutura:
1. Variáveis e reset
2. Escala tipográfica
3. Cabeçalho fixo (masthead)
4. Botões e ligações
5. Heróis (home e páginas internas)
6. Utilidades de secção
7. Tira de especificações (obras)
8. Formulários e campos
9. Mapa
10. Tira CTA
11. Banner de cookies
12. Rodapé
13. Galeria e lightbox
14. Anti-spam (campo honeypot)
15. Feedback de formulários
============================================ */
/* ─── 1. Variáveis CSS e reset global ──────────────────────────
Paleta: --bg (fundo claro), --ink (texto escuro), --brand (azul)
--container: largura máxima do layout (1280 px)
--masthead-h: altura do cabeçalho fixo (ajustada em mobile) */
:root {
--bg: #FBFAF8;
--bg-alt: #F2F0EB;
--ink: #0A0A0A;
--ink-2: #4A4A4A;
--ink-3: #8C8B88;
--line: #E4E1DC;
--line-strong: #BFBBB4;
--brand: #008CD0;
--brand-dark: #006FA0;
--container: 1280px;
--masthead-h: 60px;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
font-family: 'Inter', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
background: var(--bg); color: var(--ink);
font-size: 16px; line-height: 1.55;
-webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
font-feature-settings: 'cv11','ss01','ss03';
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: 0; background: 0; color: inherit; }
.container { max-width: var(--container); margin: 0 auto; padding: 0 20px; }
@media (min-width: 768px) { .container { padding: 0 40px; } }
@media (min-width: 1200px) { .container { padding: 0 56px; } }
.container-wide { max-width: 1600px; margin: 0 auto; padding: 0 20px; }
@media (min-width: 768px) { .container-wide { padding: 0 40px; } }
/* ─── 2. Escala tipográfica ─────────────────────────────────────
Usa clamp() para fluid type: escala suavemente entre móvel e
desktop sem breakpoints. letter-spacing negativo em títulos
grandes melhora a legibilidade em ecrãs de alta resolução. */
/* ===== Type scale ===== */
.display { font-weight: 600; font-size: clamp(40px, 6.6vw, 84px); line-height: 1.02; letter-spacing: -0.025em; }
.title-l { font-weight: 600; font-size: clamp(32px, 4.4vw, 56px); line-height: 1.05; letter-spacing: -0.02em; }
.title { font-weight: 600; font-size: clamp(26px, 2.8vw, 38px); line-height: 1.1; letter-spacing: -0.015em; }
.title-s { font-weight: 600; font-size: 20px; line-height: 1.25; letter-spacing: -0.01em; }
.body-l { font-size: clamp(17px, 1.3vw, 20px); line-height: 1.55; color: var(--ink-2); font-weight: 400; }
.body { font-size: 16px; line-height: 1.6; color: var(--ink-2); }
.meta { font-size: 12px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.num { font-feature-settings: 'tnum'; }
/* ─── 3. Cabeçalho fixo (masthead) ──────────────────────────────
Transparente sobre o hero; ao fazer scroll o pseudo-elemento
::before anima para um gradiente escuro + blur (backdrop-filter).
A classe .scrolled é adicionada via JS (cookie-banner.js). */
/* ===== Masthead — fixed over hero ===== */
.masthead {
position: fixed; top: 0; left: 0; right: 0; z-index: 50;
margin: 0;
color: #fff;
background: transparent;
}
.masthead::before {
content: ''; position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(10,10,10,.85) 0%, rgba(10,10,10,0) 100%);
-webkit-backdrop-filter: blur(8px) saturate(1.1);
backdrop-filter: blur(8px) saturate(1.1);
opacity: 0;
transform: scaleY(0);
transform-origin: top;
transition: transform .45s cubic-bezier(.22,.61,.36,1), opacity .3s ease;
pointer-events: none;
z-index: 0;
}
.masthead.scrolled::before { opacity: 1; transform: scaleY(1); }
.masthead-inner { position: relative; z-index: 1; }
.masthead-inner {
display: grid; align-items: center; gap: 24px;
grid-template-columns: 1fr auto 1fr;
height: var(--masthead-h);
max-width: 1600px;
}
.brand-mark { display: inline-flex; align-items: center; flex-shrink: 0; justify-self: start; }
.brand-mark img { height: 32px; width: auto; }
.masthead nav { justify-self: center; }
.masthead nav ul { list-style: none; display: flex; gap: 4px; }
.masthead nav a {
font-size: 13px; font-weight: 500; padding: 8px 14px;
color: inherit; opacity: .88; transition: background .2s ease, opacity .2s ease, color .2s ease;
letter-spacing: 0.08em; text-transform: uppercase;
border-radius: 2px;
}
.masthead nav a:hover { opacity: 1; background: rgba(0,140,208,.55); color: #fff; }
.masthead nav a.is-current { opacity: 1; background: rgba(0,140,208,.85); color: #fff; }
.masthead .actions { display: flex; align-items: center; gap: 20px; flex-shrink: 0; justify-self: end; }
.lang { font-size: 12px; letter-spacing: 0.06em; font-weight: 500; opacity: .8; }
.lang span.on { opacity: 1; }
.lang a { color: inherit; }
.lang-btn { background: none; border: none; cursor: pointer; padding: 0; font: inherit; color: inherit; letter-spacing: inherit; opacity: .55; }
.lang-btn.on { opacity: 1; }
.lang-btn:hover { opacity: 1; }
@media (max-width: 900px) {
:root { --masthead-h: 104px; }
.masthead-inner {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
height: var(--masthead-h);
align-content: center;
justify-items: center;
text-align: center;
}
.brand-mark { justify-self: center; }
.masthead .actions { display: none; }
.masthead nav {
display: block;
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
margin-right: 0;
}
.masthead nav::-webkit-scrollbar { display: none; }
.masthead nav ul { gap: 2px; justify-content: center; min-width: max-content; padding: 0 16px; }
.masthead nav a { font-size: 12px; white-space: nowrap; padding: 6px 12px; letter-spacing: 0.08em; }
}
/* ─── 4. Botões e ligações inline ───────────────────────────────
Variantes: btn-brand (azul), btn-dark (preto), btn-light
(claro), btn-ghost-light (transparente sobre fundo escuro).
O ::after '→' desloca-se 3px no hover para indicar ação. */
/* ===== Buttons ===== */
.btn {
display: inline-flex; align-items: center; gap: 10px;
height: 48px; padding: 0 24px;
font-size: 14px; font-weight: 500;
transition: background .2s, color .2s, border-color .2s;
}
.btn::after { content: '→'; transition: transform .2s; }
.btn:hover::after { transform: translateX(3px); }
.btn-brand { background: var(--brand); color: #fff; }
.btn-brand:hover { background: var(--brand-dark); }
.btn-dark { background: var(--ink); color: var(--bg); }
.btn-dark:hover { background: var(--brand-dark); }
.btn-light { background: var(--bg); color: var(--ink); }
.btn-light:hover { background: #fff; }
.btn-ghost-light {
border: 1px solid rgba(255,255,255,.55); color: #fff;
backdrop-filter: blur(2px);
}
.btn-ghost-light:hover { background: rgba(255,255,255,.14); border-color: #fff; }
/* ===== Inline arrow link ===== */
.arrow-link {
display: inline-flex; align-items: baseline; gap: 8px;
font-size: 14px; font-weight: 500; padding-bottom: 3px;
border-bottom: 1px solid var(--ink); transition: color .2s, border-color .2s;
}
.arrow-link::after { content: '→'; color: var(--brand); transition: transform .2s; }
.arrow-link:hover { color: var(--brand-dark); border-color: var(--brand); }
.arrow-link:hover::after { transform: translateX(3px); }
.crumb { font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 32px; }
.crumb a:hover { color: var(--ink); }
.crumb-band { background: var(--bg); }
.crumb-band .container { padding-top: 12px; padding-bottom: 12px; }
.crumb-band .crumb { margin-bottom: 0; }
/* ─── 5a. Hero da homepage (ecrã completo) ──────────────────────
A imagem de fundo (.bg) usa object-fit:cover e é a imagem LCP.
O gradiente sobreposto garante legibilidade do texto em cima. */
/* ===== Hero (home — full screen with image) ===== */
.hero {
position: relative;
min-height: clamp(640px, 96svh, 940px);
color: #fff; display: flex; flex-direction: column; justify-content: end;
overflow: hidden;
}
.hero img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.hero::before {
content: ''; position: absolute; inset: 0; z-index: 1;
background: linear-gradient(180deg,
rgba(10,10,10,0.72) 0%,
rgba(10,10,10,0.42) 28%,
rgba(10,10,10,0.45) 58%,
rgba(10,10,10,0.88) 100%);
}
.hero .container { position: relative; z-index: 2; padding-top: 136px; padding-bottom: 96px; }
.hero .eyebrow { color: rgba(255,255,255,.78); margin-bottom: 24px; }
.hero h1 {
color: #fff; max-width: 22ch;
font-weight: 600; line-height: 1.04; letter-spacing: -0.022em;
font-size: clamp(40px, 5.4vw, 72px);
}
.hero .lead { color: rgba(255,255,255,.86); max-width: 52ch; margin-top: 24px; font-size: clamp(16px,1.2vw,18px); line-height: 1.55; }
.hero .actions { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 12px; }
.hero-stats {
position: relative; z-index: 2;
margin-top: 72px;
border-top: 1px solid rgba(255,255,255,.22);
padding-top: 24px;
display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px;
}
@media (min-width: 768px) { .hero-stats { grid-template-columns: repeat(4, 1fr); } }
.hero-stats .item { display: flex; flex-direction: column; gap: 6px; }
.hero-stats .num { color: #fff; font-weight: 600; font-size: clamp(22px, 1.8vw, 28px); line-height: 1; letter-spacing: -0.012em; font-feature-settings: 'tnum'; }
.hero-stats .num.text { font-size: clamp(15px, 1.1vw, 17px); letter-spacing: 0.02em; line-height: 1.2; }
.hero-stats .lab { color: rgba(255,255,255,.6); font-size: 11px; letter-spacing: 0.04em; line-height: 1.4; max-width: 22ch; }
.hero .source {
position: absolute; left: 0; right: 0; bottom: 20px; z-index: 2;
font-size: 10px; color: rgba(255,255,255,.55); letter-spacing: 0.1em; text-transform: uppercase;
display: flex; justify-content: flex-end; align-items: center; gap: 12px; pointer-events: none;
}
.hero .source::before { content: ''; width: 32px; height: 1px; background: rgba(255,255,255,.45); }
.hero .source .inner { padding: 0 20px; }
@media (min-width: 768px) { .hero .source .inner { padding: 0 40px; } }
@media (min-width: 1200px) { .hero .source .inner { padding: 0 56px; } }
/* ─── 5b. Sub-hero (páginas internas — mais baixo) ─────────────
Mesma lógica do hero principal mas com min-height menor.
padding-top calculado com base em --masthead-h para evitar
que o cabeçalho fixo sobreponha o conteúdo. */
/* ===== Sub-hero (inner pages — shorter) ===== */
.sub-hero {
position: relative;
min-height: clamp(440px, 56svh, 560px);
color: #fff; display: flex; flex-direction: column; justify-content: end;
overflow: hidden;
}
.sub-hero img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.sub-hero::before {
content: ''; position: absolute; inset: 0; z-index: 1;
background: linear-gradient(180deg,
rgba(10,10,10,0.68) 0%,
rgba(10,10,10,0.42) 35%,
rgba(10,10,10,0.5) 65%,
rgba(10,10,10,0.85) 100%);
}
.sub-hero .container { position: relative; z-index: 2; padding-top: 136px; padding-bottom: 72px; }
.sub-hero .eyebrow { color: rgba(255,255,255,.78); margin-bottom: 16px; }
.sub-hero h1 { color: #fff; font-weight: 600; line-height: 1.05; letter-spacing: -0.02em; font-size: clamp(36px, 5.2vw, 64px); max-width: 22ch; }
.sub-hero .lead { color: rgba(255,255,255,.85); max-width: 56ch; margin-top: 20px; font-size: clamp(16px,1.2vw,18px); line-height: 1.55; }
@media (max-width: 767px) {
.sub-hero .container { padding-top: calc(var(--masthead-h) + 24px); padding-bottom: 56px; }
}
@media (min-width: 768px) {
.sub-hero .container { padding-top: calc(var(--masthead-h) + 36px); padding-bottom: 64px; }
}
@media (min-width: 1200px) {
.sub-hero .container { padding-top: calc(var(--masthead-h) + 44px); padding-bottom: 72px; }
}
/* ─── 6. Utilidades de secção ───────────────────────────────────
.section-pad aplica padding vertical generoso; aumenta em 1024px */
/* ===== Section utility ===== */
section { position: relative; }
.section-pad { padding: 96px 0; }
@media (min-width: 1024px) { .section-pad { padding: 144px 0; } }
/* ─── 7. Tira de especificações (páginas de obra) ───────────────
Grelha de com termos (dt) e valores (dd). Exibe metadados
da obra: área, sistema, cliente, produto, localização, etc. */
/* ===== Specs strip (used in obra detail) ===== */
.specs { padding: 48px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.specs-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px 24px; }
@media (min-width: 768px) { .specs-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1024px) { .specs-grid.cols-6 { grid-template-columns: repeat(6, 1fr); } }
.specs dt { font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.specs dd { margin-top: 10px; font-size: 14px; line-height: 1.5; color: var(--ink); font-weight: 500; }
.specs dd .accent { color: var(--brand); }
/* ─── 8. Formulários ────────────────────────────────────────────
.form-card: contentor do formulário com fundo alternativo.
.form-grid: grelha de 2 colunas em ecrãs >= 600px.
.field: par label + input/textarea com gap de 6px.
.form-tabs: navegação entre "Contacto" e "Orçamento". */
/* ===== Form ===== */
.form-card { background: var(--bg-alt); border: 1px solid var(--line); padding: 40px; }
@media (min-width: 1024px) { .form-card { padding: 48px; } }
.form-card h3 { font-size: clamp(22px, 2.4vw, 30px); line-height: 1.1; letter-spacing: -0.012em; font-weight: 600; margin-bottom: 8px; }
.form-card .form-intro { font-size: 14px; color: var(--ink-2); margin-bottom: 28px; }
.form-grid { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 600px) { .form-grid { grid-template-columns: 1fr 1fr; } .form-grid .full { grid-column: span 2; } }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.field input, .field textarea, .field select {
font: inherit; font-size: 15px; color: var(--ink);
background: var(--bg); border: 1px solid var(--line);
padding: 12px 14px; transition: border-color .2s;
}
.field input:focus, .field textarea:focus, .field select:focus { outline: 0; border-color: var(--brand); }
.field textarea { min-height: 120px; resize: vertical; }
.form-actions { margin-top: 24px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.form-note { font-size: 12px; color: var(--ink-3); }
/* Form tabs */
.form-tabs { display: flex; gap: 0; margin-bottom: 28px; border-bottom: 1px solid var(--line); }
.form-tabs .tab {
font: inherit; cursor: pointer;
flex: 1; justify-content: center;
padding: 13px 16px;
background: transparent; border: 0; border-bottom: 2px solid transparent;
font-size: 12px; font-weight: 500; letter-spacing: 0.07em; text-transform: uppercase;
color: var(--ink-3); transition: color .2s, border-color .2s;
margin-bottom: -1px;
display: inline-flex; align-items: center; gap: 8px;
white-space: nowrap;
}
.form-tabs .tab svg { flex-shrink: 0; opacity: .65; transition: opacity .2s; }
.form-tabs .tab:hover svg,
.form-tabs .tab.active svg { opacity: 1; }
.form-tabs .tab:hover { color: var(--ink); }
.form-tabs .tab.active { color: var(--ink); border-bottom-color: var(--brand); }
/* File input — anexos */
.field-file { display: flex; flex-direction: column; gap: 6px; }
.field-file label { font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.field-file input[type="file"] {
font: inherit; font-size: 13px; padding: 12px 14px;
background: #fff; border: 1px dashed var(--line-strong); color: var(--ink-2);
cursor: pointer; transition: border-color .2s, background .2s;
}
.field-file input[type="file"]:hover { border-color: var(--brand); }
.field-file input[type="file"]::file-selector-button {
font: inherit; font-size: 12px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase;
padding: 7px 14px; margin-right: 14px;
background: var(--ink); color: #fff; border: 0; cursor: pointer;
transition: background .2s;
}
.field-file input[type="file"]:hover::file-selector-button { background: var(--brand-dark); }
.field-file small { font-size: 11px; color: var(--ink-3); margin-top: 2px; }
/* Aside editorial — páginas legais / recrutamento */
.legal-grid { display: grid; gap: 48px; grid-template-columns: 1fr; }
@media (min-width: 1024px) { .legal-grid { grid-template-columns: 7fr 4fr; gap: 96px; } }
.legal-aside { display: flex; flex-direction: column; gap: 40px; }
.legal-aside .aside-card { padding: 24px 0 0; background: transparent; border: 0; border-top: 1px solid var(--ink); }
.legal-aside .aside-card h3 { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; margin-bottom: 18px; }
.legal-aside .aside-card p { font-size: 14px; line-height: 1.6; color: var(--ink-2); }
.legal-aside .aside-card p + .arrow-link,
.legal-aside .aside-card .arrow-link { margin-top: 14px; display: inline-block; font-size: 13px; }
.legal-aside .aside-card ul { list-style: none; display: flex; flex-direction: column; }
.legal-aside .aside-card ul li { border-bottom: 1px solid var(--line); }
.legal-aside .aside-card ul li:last-child { border-bottom: 0; }
.legal-aside .aside-card ul a {
display: flex; align-items: center; justify-content: space-between; gap: 16px;
padding: 12px 0;
color: var(--ink); font-size: 14px; font-weight: 500;
transition: color .2s, padding-left .2s;
}
.legal-aside .aside-card ul a::after {
content: '→'; color: var(--ink-3); font-weight: 400; transition: transform .2s, color .2s;
}
.legal-aside .aside-card ul a:hover { color: var(--brand-dark); padding-left: 4px; }
.legal-aside .aside-card ul a:hover::after { color: var(--brand); transform: translateX(4px); }
.legal-aside .aside-card.dark { background: var(--ink); color: rgba(251,250,248,.78); padding: 24px; border: 0; }
.legal-aside .aside-card.dark h3 { color: rgba(251,250,248,.5); }
.legal-aside .aside-card.dark p { color: rgba(251,250,248,.78); }
.legal-aside .aside-card.dark .arrow-link { color: #fff; border-bottom-color: rgba(255,255,255,.4); }
.legal-aside .aside-card.dark .arrow-link::after { color: var(--brand); }
.legal-aside .aside-card.dark .arrow-link:hover { color: #fff; border-bottom-color: var(--brand); }
.form-note { font-size: 12px; color: var(--ink-3); }
/* ─── 9. Mapa ───────────────────────────────────────────────────
Contentor com aspect-ratio 4/3 para evitar CLS (layout shift).
O iframe do Google Maps recebe loading="lazy" no HTML. */
/* ===== Map ===== */
.map-wrap { aspect-ratio: 4/3; background: var(--bg-alt); border: 1px solid var(--line); position: relative; overflow: hidden; }
.map-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(0.4) contrast(1.04); }
/* ─── 10. Tira CTA ──────────────────────────────────────────────
Fundo gradiente azul com realce radial no canto superior direito.
Grelha de 2 colunas em desktop (texto à esquerda, ação à direita). */
/* ===== CTA strip ===== */
.cta-strip { background: linear-gradient(135deg, var(--brand-dark) 0%, var(--brand) 100%); color: #fff; padding: 88px 0; position: relative; overflow: hidden; }
.cta-strip::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at top right, rgba(255,255,255,.18), transparent 50%); pointer-events: none; }
.cta-strip > * { position: relative; z-index: 1; }
.cta-strip .container { display: grid; gap: 40px; grid-template-columns: 1fr; align-items: end; }
@media (min-width: 1024px) { .cta-strip .container { grid-template-columns: 7fr 5fr; gap: 80px; } }
.cta-strip h2 { color: #fff; }
.cta-strip .stat-line { display: flex; align-items: baseline; gap: 12px; margin-bottom: 24px; color: rgba(255,255,255,.78); font-size: 13px; }
.cta-strip .stat-line strong { color: #fff; font-weight: 600; font-size: 22px; font-feature-settings: 'tnum'; }
.cta-strip .btn-light { background: #fff; color: var(--brand-dark); }
.cta-strip .btn-light:hover { background: rgba(255,255,255,.92); }
/* ─── 11. Banner de cookies ─────────────────────────────────────
Aparece no canto inferior direito após o carregamento.
Estado guardado em localStorage (chave: socisola.cookieConsent).
Criado e injetado dinamicamente por cookie-banner.js. */
/* ===== Cookie banner — compact, bottom-right ===== */
.cookie-banner {
position: fixed; right: 16px; bottom: 16px; left: auto;
max-width: calc(100vw - 32px); width: 320px;
background: rgba(15,15,15,.96);
color: #fff;
padding: 16px 18px;
z-index: 80;
border-radius: 4px;
display: none;
box-shadow: 0 14px 44px rgba(0,0,0,.32);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
opacity: 0; transform: translateY(10px);
transition: opacity .25s ease, transform .25s ease;
}
.cookie-banner.show { display: block; opacity: 1; transform: translateY(0); }
.cookie-banner p { font-size: 12.5px; line-height: 1.5; color: rgba(255,255,255,.88); }
.cookie-banner p a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.cookie-banner .actions { display: flex; gap: 8px; margin-top: 12px; }
.cookie-banner button {
font: inherit; cursor: pointer; padding: 7px 14px; border: 0;
font-size: 12px; font-weight: 500; letter-spacing: -0.005em;
transition: background .2s, color .2s, border-color .2s;
}
.cookie-banner .accept { background: var(--brand); color: #fff; }
.cookie-banner .accept:hover { background: var(--brand-dark); }
.cookie-banner .reject { background: transparent; color: rgba(255,255,255,.85); border: 1px solid rgba(255,255,255,.28); }
.cookie-banner .reject:hover { background: rgba(255,255,255,.08); color: #fff; }
@media (min-width: 768px) {
.cookie-banner { right: 20px; bottom: 20px; width: 340px; padding: 16px 20px; }
}
/* ─── 12. Rodapé ────────────────────────────────────────────────
Fundo escuro (--ink) com grelha de 4 colunas em desktop.
Em mobile colapsa para 3 colunas (logo ocupa largura total). */
/* ===== Footer ===== */
footer { background: var(--ink); color: rgba(251,250,248,.72); padding: 56px 0 24px; border-top: 1px solid rgba(251,250,248,.05); }
@media (min-width: 768px) { footer { padding: 80px 0 28px; } }
footer .grid { display: grid; gap: 32px 24px; grid-template-columns: repeat(3, 1fr); }
footer .grid > div:first-child { grid-column: 1 / -1; }
@media (min-width: 768px) { footer .grid { grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; } footer .grid > div:first-child { grid-column: auto; } }
footer img.logo { height: 36px; opacity: .95; }
footer h4 { font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(251,250,248,.45); margin-bottom: 14px; }
footer ul { list-style: none; display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; }
footer ul a:hover { color: var(--bg); }
footer .bottom { margin-top: 56px; padding-top: 24px; border-top: 1px solid rgba(251,250,248,.1); display: flex; flex-direction: column; gap: 12px; justify-content: space-between; align-items: flex-start; font-size: 12px; color: rgba(251,250,248,.45); }
@media (min-width: 600px) { footer .bottom { flex-direction: row; align-items: center; } }
footer .bottom-links { display: flex; gap: 20px 24px; flex-wrap: wrap; }
/* ─── 13. Galeria de imagens e lightbox ─────────────────────────
Grelha responsiva de 2→4→6 colunas.
Modificadores .s2/.s3/.s4 estendem a imagem por múltiplas colunas
para criar um layout editorial variado.
Lightbox injetado por JS nas páginas de obra. */
/* ===== Gallery ===== */
.gallery { padding: 96px 0; background: var(--bg-alt); }
@media (min-width: 1024px) { .gallery { padding: 128px 0; } }
.gallery-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 48px; }
.gal-grid { display: grid; gap: 16px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px) { .gal-grid { grid-template-columns: repeat(4, 1fr); gap: 20px; } }
@media (min-width: 1280px) { .gal-grid { grid-template-columns: repeat(6, 1fr); } }
.gal-item { background: transparent; padding: 0; cursor: pointer; transition: opacity .2s; }
.gal-item:hover { opacity: .9; }
.gal-item img { width: 100%; aspect-ratio: 4/5; object-fit: cover; transition: transform .8s cubic-bezier(.2,.8,.2,1); }
.gal-item:hover img { transform: scale(1.03); }
.gal-item.s2 { grid-column: span 2; }
.gal-item.s3 { grid-column: span 3; }
.gal-item.s4 { grid-column: span 4; }
.gal-item.s2 img, .gal-item.s3 img, .gal-item.s4 img { aspect-ratio: 4/3; }
/* ===== Lightbox ===== */
.lightbox { position: fixed; inset: 0; background: rgba(10,10,10,.96); display: none; align-items: center; justify-content: center; z-index: 100; backdrop-filter: blur(6px); }
.lightbox.open { display: flex; }
.lightbox img { max-width: min(94vw, 1800px); max-height: 88vh; object-fit: contain; }
.lightbox button.x { position: absolute; top: 24px; right: 24px; color: var(--bg); opacity: .85; padding: 8px; }
.lightbox button.nav { position: absolute; top: 50%; transform: translateY(-50%); color: var(--bg); padding: 16px; opacity: .8; transition: opacity .15s; }
.lightbox button.nav:hover { opacity: 1; }
.lightbox button.prev { left: 24px; }
.lightbox button.next { right: 24px; }
.lightbox .meta-strip { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); color: rgba(251,250,248,.6); font-size: 12px; font-feature-settings: 'tnum'; letter-spacing: 0.06em; }
.lightbox .meta-strip .b { color: var(--brand); }
/* ─── 14. Anti-spam — campo honeypot ───────────────────────────
Campo invisível para humanos; se preenchido indica bot.
Oculto via posicionamento absoluto fora do viewport (em vez de
display:none ou visibility:hidden, que alguns bots ignoram). */
.campo-armadilha {
position: absolute;
left: -9999px;
top: -9999px;
width: 1px; height: 1px;
opacity: 0;
overflow: hidden;
pointer-events: none;
tab-index: -1;
}
/* ─── 15. Feedback de formulários (forms.js) ────────────────────
Injetado dinamicamente após o