/* ==================================================================
EKOA ARQUITETURA — site v2
Folha de estilo única. Sem build, sem framework.
A diagramação vem das telas aprovadas pelo Igor em 26/08/2026:
1. barra principal — logo à esquerda, menu à direita, selo do cobogó
2. capa — mosaico de 3 fotos + bloco terracota
3. abertura de texto — frase grande à esquerda, apoio à direita
4. projetos — rótulo + filete + grade de 3 colunas
5. escritório — seção terracota cheia
6. equipe — texto à esquerda, retrato à direita
7. contato — seção verde, texto à esquerda, dados à direita
TIPOGRAFIA: títulos e frases principais em Avenir Next Ultra Light.
Ver o bloco "FONTE DOS TÍTULOS" logo abaixo antes de mexer.
================================================================== */
/* ==================================================================
FONTE DOS TÍTULOS — Avenir Next Ultra Light
A Avenir Next é fonte paga (Linotype/Monotype). Não existe versão
gratuita e não pode ser embutida no site sem licença. O site está
preparado para usá-la de três formas, na ordem em que o navegador
tenta:
1. FONTE INSTALADA NA MÁQUINA (local)
Já funciona sem fazer nada. Se a Avenir Next estiver instalada
no computador de quem abre o site, ela é usada. Serve para o
Igor conferir o resultado real antes de licenciar.
2. ADOBE FONTS ← caminho recomendado, já incluso no Creative Cloud
A Avenir Next está no catálogo da Adobe Fonts, com o peso
Ultra Light. Para ativar na web:
a) fonts.adobe.com → procurar "Avenir Next"
b) "Add to Web Project" → novo projeto → marcar Ultra Light (100)
e Regular (400)
c) a Adobe devolve uma linha com um código de kit
d) colar essa linha no do index.html, projeto.html e
404.html, no lugar indicado por comentário
e) NÃO precisa mexer neste arquivo: o nome da família que a
Adobe entrega é "avenir-next", já previsto na pilha abaixo
3. ARQUIVO LICENCIADO E HOSPEDADO AQUI (webfont própria)
Se a EKOA comprar a licença webfont pela Monotype, salve os
arquivos em /fontes/ e descomente as linhas url() abaixo.
Enquanto nada disso estiver ativo, entra a URBANIST peso 200 —
a gratuita mais próxima do desenho da Avenir Next Ultra Light.
================================================================== */
@font-face {
font-family: 'Avenir Next EKOA';
font-style: normal;
font-weight: 100;
font-display: swap;
src: local('Avenir Next Ultra Light'),
local('AvenirNext-UltraLight'),
local('Avenir Next LT Pro Ultra Light'),
local('AvenirNextLTPro-UltLt'),
local('Avenir Next W1G Ultra Light'),
local('AvenirNextLTW01-UltraLi');
/* url('/fontes/avenirnext-ultralight.woff2') format('woff2'); */
}
@font-face {
font-family: 'Avenir Next EKOA';
font-style: normal;
font-weight: 400;
font-display: swap;
src: local('Avenir Next Regular'),
local('AvenirNext-Regular'),
local('Avenir Next LT Pro Regular'),
local('AvenirNextLTPro-Regular');
/* url('/fontes/avenirnext-regular.woff2') format('woff2'); */
}
:root {
/* ---- paleta oficial da marca ---- */
--terracota: #c9503c; /* cor principal */
--areia: #d9c5b7; /* cor secundária */
--verde: #043b28; /* apenas detalhes específicos */
--branco: #ffffff;
/* ---- apoio ---- */
--tinta: #1c1a19;
--texto: #55504c;
--cinza: #6f6862;
--areia-clara:#f3ece6;
--linha: #e2dbd4;
/* Terracota escurecido SÓ para texto pequeno: em 10–12 px a cor de
marca não alcança o contraste mínimo de leitura. */
--terracota-texto: #b34733;
/* Terracota de FUNDO, para as áreas cheias que carregam texto branco:
o bloco da capa, a seção Escritório e o botão de contato.
O terracota de marca #c9503c dá 4,47:1 com branco — abaixo do
mínimo de 4,5:1 para texto abaixo de 24 px. Só os títulos grandes
passavam; o subtítulo da capa, os três parágrafos do Escritório e
o texto do botão, não. Esta tinta um pouco mais escura sobe para
5,4:1 e mantém a cor reconhecível.
A cor de marca continua intacta onde não há texto por cima:
filete, moldura do hover, borda do CONTATO, foco e seleção. */
--terracota-fundo: #b34733;
/* Terracota clareado para uso sobre o verde escuro. O terracota puro
cai para 2,8:1 sobre o verde — abaixo do mínimo. */
--terracota-em-verde: #e08a71;
/* ---- tipografia ----
titulos: Avenir Next Ultra Light (ver bloco acima)
texto: Poppins, que já vinha do site anterior e casa bem com ela */
--fonte-titulos: 'Avenir Next EKOA', 'avenir-next', 'Avenir Next',
'Urbanist', 'Poppins', -apple-system, sans-serif;
--fonte-texto: 'Poppins', -apple-system, BlinkMacSystemFont,
'Segoe UI', Helvetica, Arial, sans-serif;
/* Peso dos títulos. A Ultra Light real é 100. A Urbanist substituta
fica melhor em 200 — por isso a variável: quando a Avenir Next
entrar de verdade, troque para 100 aqui, em um lugar só. */
--peso-titulo: 200;
/* ---- medidas ---- */
--margem: clamp(20px, 5vw, 84px);
--respiro: clamp(58px, 8vw, 128px);
}
/* Quando a Avenir Next de fato carregar, o JS marca
e o peso cai para 100 — o Ultra Light verdadeiro. */
html.avenir { --peso-titulo: 100; }
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
background: var(--branco);
color: var(--tinta);
font-family: var(--fonte-texto);
font-weight: 300;
font-size: 16px;
line-height: 1.75;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--terracota); color: #fff; }
/* ==================================================================
TIPOGRAFIA
Regra da casa: a Avenir Next Ultra Light entra em TÍTULO e FRASE
PRINCIPAL — nunca em texto corrido pequeno nem em rótulo de 10 px.
Em corpo miúdo o traço fino some no monitor e perde contraste.
================================================================== */
/* título de display — o maior de cada seção.
pedido do Igor em 27/08: manter o traço fino (Ultra Light/Urbanist),
só escurecer a cor — em peso tão fino, o --tinta (quase preto, mas
ainda um cinza bem escuro) lia como cinza claro na tela. Preto puro
só nos títulos que já ficam sobre fundo branco/areia; os que já são
brancos (capa, Escritório, Contato — ver .secao--terracota/--verde
mais abaixo) continuam brancos, escurecer lá pioraria o contraste. */
.titulo {
font-family: var(--fonte-titulos);
font-weight: var(--peso-titulo);
letter-spacing: -.008em;
line-height: 1.14;
font-size: clamp(30px, 4.6vw, 56px);
color: #000;
}
/* Escritório. Era clamp(36px, 6vw, 76px), depois clamp(30px, 4.4vw, 58px)
— pedido do Igor em 26/08, reduzido de novo: "um pouco a fonte". */
.titulo--grande { font-size: clamp(26px, 3.8vw, 48px); }
.titulo--caixa { text-transform: uppercase; letter-spacing: .005em; }
/* pedido do Igor em 27/08: a palavra em destaque um pouco mais escura —
--terracota-texto, a mesma variante já usada nos rótulos, não o
terracota puro da marca */
.titulo em { font-style: normal; color: var(--terracota-texto); }
/* nome da seção — "Projetos", "O Escritório", "Contato".
Mesmo tamanho em todas as seções: era o descompasso apontado no
print "tamanho do texto", onde Projetos aparecia bem menor que
O Escritório e Contato. */
.secao__nome {
font-family: var(--fonte-titulos);
font-weight: var(--peso-titulo);
letter-spacing: 0;
line-height: 1;
font-size: clamp(21px, 2.4vw, 32px);
color: #000;
}
/* frase principal de apoio — mesma família dos títulos, mas em peso
normal: em 16–20 px o Ultra Light não se sustenta na tela.
pedido do Igor em 27/08: mais escura — era --texto (#55504c) */
.frase-apoio {
font-family: var(--fonte-titulos);
font-weight: 400;
font-size: clamp(15px, 1.35vw, 17.5px);
line-height: 1.7;
color: var(--tinta);
}
/* rótulo miúdo em caixa alta — fonte de texto, nunca a Ultra Light */
.rotulo {
font-family: var(--fonte-texto);
font-size: 10.5px;
letter-spacing: .26em;
text-transform: uppercase;
font-weight: 400;
color: var(--terracota-texto);
}
.rotulo--cinza { color: var(--cinza); }
/* ---------- utilitários de espaçamento ----------
Existem para tirar os style="" de dentro do HTML: com o estilo
solto no atributo não dá para ajustar tudo de uma vez nem cobrir
pelo responsivo. */
.acima-do-titulo { margin-top: 16px; }
.abaixo-do-titulo { margin-bottom: 24px; }
/* pedido do Igor em 26/08: só o título da Equipe, mais afastado do
texto — o Escritório (mesma .titulo, outra seção) fica como estava */
.equipe__titulo { margin-bottom: 48px; }
.sem-topo { padding-top: 0; }
.medida-frase { max-width: 16ch; }
/* pedido do Igor em 26/08: só o título de Contato, um pouco menor —
era clamp(30px, 4.6vw, 56px), o mesmo do Escritório e da Equipe */
.contato__titulo { font-size: clamp(26px, 3.8vw, 46px); }
.equipe__texto { margin-bottom: clamp(36px, 5vw, 66px); }
/* pedido do Igor em 26/08: título e texto da Equipe puxados bem mais
para a direita, dentro da própria coluna — a foto ao lado não muda */
.equipe__corpo { padding-left: clamp(40px, 9vw, 150px); }
/* pedido do Igor em 26/08: foto dos três sócios só um pouco menor —
redução leve, não centralizada como o cobogó do Escritório.
Era 84% (79% da coluna já com o gap); reduzida mais um pouco. */
/* pedido do Igor em 26/08: um pouquinho menor de novo — era 74% */
.equipe__retrato { max-width: 66%; }
/* linha de apoio, menor e mais discreta que o texto corrido */
.nota {
font-size: 13px;
color: var(--cinza);
}
.secao--verde .nota { color: rgba(255,255,255,.62); }
.texto-corrido { color: var(--texto); max-width: 52ch; }
/* página de erro: bloco centrado na vertical */
.pagina-erro {
min-height: 52vh;
display: flex;
flex-direction: column;
justify-content: center;
}
.pagina-erro .titulo { margin: 14px 0 18px; max-width: 14ch; }
.numero {
display: block;
font-size: 12px;
letter-spacing: .18em;
font-weight: 500;
color: var(--verde);
}
/* filete curto terracota — divisor da casa */
.filete {
display: block;
width: 64px;
height: 3px;
background: var(--terracota);
border: 0;
}
/* atalho de teclado, escondido até receber foco */
.pular {
position: absolute;
left: -9999px;
top: 0;
z-index: 100;
background: var(--terracota);
color: #fff;
padding: 12px 22px;
font-size: 12px;
letter-spacing: .12em;
text-transform: uppercase;
}
.pular:focus { left: 0; }
/* ==================================================================
1. BARRA PRINCIPAL
logo terracota à esquerda · menu em caixa alta à direita ·
CONTATO dentro de moldura · PT / EN · selo do cobogó no fim
================================================================== */
.cabecalho {
position: sticky;
top: 0;
z-index: 60;
background: rgba(255,255,255,.94);
/* o prefixo -webkit- ainda é o único que o Safari do iPhone entende;
sem ele a barra fica opaca lá e translúcida no resto */
-webkit-backdrop-filter: saturate(140%) blur(8px);
backdrop-filter: saturate(140%) blur(8px);
border-bottom: 1px solid transparent;
transition: border-color .3s ease;
}
.cabecalho.rolando { border-bottom-color: var(--linha); }
.cabecalho__interno {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
padding: 18px var(--margem);
}
.cabecalho__marca { display: block; width: clamp(104px, 10vw, 138px); flex: none; }
.cabecalho__marca img { width: 100%; }
.menu { display: flex; gap: clamp(20px, 2.6vw, 42px); list-style: none; align-items: center; }
.menu a {
font-size: 11px;
letter-spacing: .2em;
text-transform: uppercase;
font-weight: 400;
color: var(--tinta);
padding-bottom: 4px;
border-bottom: 1px solid transparent;
transition: border-color .25s ease, color .25s ease;
}
.menu a:hover,
.menu a[aria-current="page"] { border-color: var(--terracota); color: var(--terracota-texto); }
.menu .destaque {
border: 1px solid var(--terracota);
color: var(--terracota-texto);
padding: 9px 18px;
}
.menu .destaque:hover { background: var(--terracota); color: #fff; }
.idioma {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 11px;
letter-spacing: .16em;
color: var(--cinza);
}
.idioma a { color: var(--cinza); padding-bottom: 3px; border-bottom: 1px solid transparent; }
.idioma a:hover { color: var(--terracota-texto); }
.idioma a[aria-current] { color: var(--tinta); border-bottom-color: var(--terracota); }
/* o selo herda .menu a, que tem padding e borda embaixo — sem zerar,
o cobogó sobe 5 px e desalinha da logo do outro lado da barra */
.cabecalho__simbolo {
display: flex;
align-items: center;
width: clamp(38px, 3.2vw, 46px);
flex: none;
line-height: 0;
padding-bottom: 0;
border-bottom: 0;
}
.cabecalho__simbolo img { width: 100%; }
.hamburguer {
display: none;
background: none;
border: 0;
cursor: pointer;
font: inherit;
font-size: 11px;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--tinta);
padding: 6px 0;
}
/* ==================================================================
2. CAPA
Mosaico de três fotos: a grande ocupa a coluna esquerda inteira,
as duas menores empilham à direita (a de cima maior). Abaixo, na
mesma largura da foto grande, o bloco terracota; sob a coluna das
fotos pequenas, a paginação.
================================================================== */
/* A capa ocupa a tela inteira, descontado o cabeçalho.
Antes o mosaico tinha altura fixa (no máximo 560 px) e o bloco
terracota vinha embaixo com a altura do texto: em monitor grande a
soma dos dois não chegava ao fim da tela e aparecia uma faixa branca
da seção seguinte. Agora o bloco terracota mantém a altura do seu
conteúdo e o mosaico de fotos estica para preencher o que sobra.
dvh em vez de vh por causa do celular: a barra do navegador entra e
sai, e o vh não acompanha — a capa ficava sempre um pouco cortada. */
.hero {
display: grid;
grid-template-columns: 1.7fr 1fr;
gap: 6px;
min-height: calc(100vh - var(--altura-cabecalho, 88px));
min-height: calc(100dvh - var(--altura-cabecalho, 88px));
}
/* Cada coluna se resolve sozinha, e é daí que vem o desalinhamento:
a da esquerda acaba no fim do bloco terracota, a da direita segue
até a paginação, mais abaixo. */
.hero__coluna {
display: flex;
flex-direction: column;
gap: 6px;
min-height: 0;
}
.hero__tile { position: relative; display: block; overflow: hidden; background: var(--areia-clara); }
/* As fotos esticam para preencher a coluna; o bloco terracota e a
paginação ficam com a altura do próprio conteúdo.
Base 0 e não auto: com auto o navegador parte da altura natural da
foto e a coluna passa do espaço disponível. */
.hero__tile--principal { flex: 1 1 0; min-height: clamp(260px, 34vh, 620px); }
/* 1,35 contra 1 — a de cima maior que a de baixo, em vez de partir a
coluna ao meio */
.hero__coluna--direita .hero__tile:nth-of-type(1) { flex: 1.35 1 0; min-height: 150px; }
.hero__coluna--direita .hero__tile:nth-of-type(2) { flex: 1 1 0; min-height: 110px; }
.hero__tile img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 1.1s cubic-bezier(.16,.84,.44,1);
}
.hero__tile:hover img { transform: scale(1.035); }
.hero__cta {
flex: none;
background: var(--terracota-fundo);
padding: clamp(26px, 4vw, 54px) clamp(24px, 4vw, 60px);
display: flex;
flex-direction: column;
justify-content: center;
}
/* a frase de capa é o maior uso da Ultra Light no site */
.hero__cta h1 {
font-family: var(--fonte-titulos);
font-weight: var(--peso-titulo);
text-transform: uppercase;
letter-spacing: .012em;
line-height: 1.12;
font-size: clamp(27px, 3.8vw, 50px);
color: #fff;
}
.hero__cta p {
font-family: var(--fonte-titulos);
font-weight: 400;
max-width: 48ch;
color: #fff;
font-size: clamp(14px, 1.3vw, 16.5px);
margin-top: clamp(14px, 1.6vw, 20px);
}
.hero__linha {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
margin-top: clamp(22px, 3vw, 36px);
}
.hero__local {
font-size: 11px;
letter-spacing: .2em;
text-transform: uppercase;
color: #fff;
}
/* fica no pé da coluna da direita, sob a segunda foto */
.hero__paginacao {
flex: none;
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 2px 6px;
}
.hero__conta { font-size: 12px; letter-spacing: .18em; font-weight: 500; color: var(--tinta); }
.hero__setas { display: flex; gap: 8px; }
.hero__setas button {
width: 38px;
height: 38px;
border: 1px solid var(--tinta);
background: none;
font: inherit;
font-size: 15px;
color: var(--tinta);
cursor: pointer;
display: grid;
place-items: center;
transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.hero__setas button:hover { background: var(--terracota); border-color: var(--terracota); color: #fff; }
/* ==================================================================
SEÇÕES — base comum
================================================================== */
.secao { padding: var(--respiro) var(--margem); }
.secao--areia { background: var(--areia-clara); }
.secao--terracota { background: var(--terracota-fundo); color: #fff; }
/* pedido do Igor em 27/08 (conferência de cor): era #f2efe9, um
branco-bege solto que quase batia com --areia-clara mas não era o
mesmo valor. Trocado pela variável de verdade. */
.secao--verde { background: var(--verde); color: var(--areia-clara); }
/* cabeça de seção: nome + filete de largura total */
.secao__cabeca {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 24px;
flex-wrap: wrap;
margin-bottom: clamp(26px, 3.5vw, 46px);
padding-bottom: 16px;
border-bottom: 1px solid var(--linha);
}
.secao--terracota .secao__cabeca { border-bottom-color: rgba(255,255,255,.35); }
.secao--verde .secao__cabeca { border-bottom-color: rgba(255,255,255,.2); }
.secao--terracota .secao__nome,
.secao--verde .secao__nome { color: #fff; }
.secao--terracota .rotulo { color: rgba(255,255,255,.8); }
.secao--verde .rotulo { color: var(--terracota-em-verde); }
/* ==================================================================
3. ABERTURA DE TEXTO
frase grande à esquerda · apoio à direita, alinhado pela base ·
coluna decorativa de módulos do cobogó na ponta direita
================================================================== */
.frase-grade {
display: grid;
/* era 1.5fr 1fr .5fr — pedido do Igor em 26/08: título "mais
horizontal", com a diagramação de três linhas da referência que
ele mandou (PROJETOS QUE / TRANSFORMAM ESPAÇOS / E CRIAM
EXPERIÊNCIAS.). Achado no caminho: o max-width:26ch do .frase
(abaixo) não fazia o que parecia — 'ch' usa o tamanho de fonte do
PRÓPRIO elemento, e o .frase é uma div sem font-size definido,
então herdava os 16px do body em vez dos 56px do título lá
dentro. 26ch a 16px vira ~256px — por isso o título quebrava em
6 linhas apertadas, bem mais estreito do que parecia no CSS. */
grid-template-columns: 2.15fr 1fr .5fr;
column-gap: clamp(24px, 4vw, 60px);
/* era "end": o título alinhava pelo pé da linha, e como o cobogó ao
lado é mais alto que o bloco de texto, sobrava um vão vazio em
cima do título — ele ficava mais para baixo do que devia. Pedido
do Igor em 26/08: "esse texto mais pra cima". O cobogó continua
esticando a altura toda (tem align-self:stretch próprio, definido
mais abaixo) — só o título e o texto de apoio sobem. */
align-items: start;
/* o texto de apoio saiu da grade de colunas (position:absolute) para
centralizar na página inteira — position:relative aqui é o que faz
esse posicionamento contar a partir desta caixa */
position: relative;
}
/* sem max-width: a largura vem só da coluna do grid agora — mais
simples e sem o risco do bug do ch acima.
margin-top: "mais pra cima" (align-items:start, no topo) ficou justo
demais rente ao topo; depois "um pouco mais pra baixo"; agora "um
pouquinho mais baixo" de novo — pedidos do Igor em 26/08. */
/* left, não margin-left: margin-left estreitaria a caixa (ela ainda
preenche a coluna) e quebrava "transformam espaços" em duas linhas.
Com position:relative + left, a caixa mantém a largura e só desliza
visualmente para o lado. */
.frase { grid-column: 1; margin-top: 126px; position: relative; left: 50px; }
/* pedido do Igor em 26/08: "mais pra cima e no centro da página" —
dentro da grade de 3 colunas não tinha como centralizar na PÁGINA
(só dentro da própria coluna, que fica deslocada pro lado esquerdo).
Por isso saiu do fluxo do grid: position:absolute, centralizado pelo
left:50% + translateX(-50%), contando a partir do .frase-grade
(que virou position:relative acima).
O centro da página (50%) cai dentro da largura do título (que vai
até uns 53% do total) — centralizar na mesma altura do título faria
os dois textos se sobreporem. Por isso o "mais pra cima" aqui é
logo abaixo do título (top:270px, o título termina por volta de
237px), não colado nele: mais alto que a posição antiga (perto do
fim da linha, ~600px), sem entrar embaixo do título. */
.frase__texto {
position: absolute;
top: 500px;
/* pedido do Igor em 26/08: um pouco mais para a direita — era
centralizado exato (left:50%) */
left: 56%;
/* pedido do Igor em 26/08: mais 50px pro lado, além do deslocamento
que já tinha (left:56%) */
transform: translateX(calc(-50% + 50px));
max-width: 42ch;
/* pedido do Igor em 26/08: aumentar de novo — era clamp(16px,1.5vw,19px) */
font-size: clamp(18px, 1.8vw, 22px);
}
/* módulos do cobogó — só decoração, não carrega texto */
.frase__cobogo {
grid-column: 3;
align-self: stretch;
display: flex;
align-items: center;
justify-content: center;
}
.frase__cobogo img { width: 88%; height: 88%; object-fit: contain; }
/* ==================================================================
4. PROJETOS — grade de 3 colunas, proporção 4:5, sem moldura
================================================================== */
.grade-obras {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(16px, 2.2vw, 34px);
}
.obra { display: block; }
/* Todos os retângulos iguais e alinhados — pedido do Igor.
3:2 e não 4:5: das nove capas, seis já são 1,5 ou quase, então é a
proporção que menos corta o conjunto. Trocar aqui muda a grade
inteira; 4/3 e 4/5 também funcionam. */
.obra__foto {
position: relative;
overflow: hidden;
background: var(--areia-clara);
aspect-ratio: 3 / 2;
}
.obra__foto img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 1.2s cubic-bezier(.16,.84,.44,1);
}
.obra:hover .obra__foto img { transform: scale(1.04); }
/* moldura terracota que aparece no hover — assinatura da marca */
.obra__foto::after {
content: '';
position: absolute;
inset: 0;
border: 0 solid var(--terracota);
transition: border-width .3s ease;
pointer-events: none;
}
.obra:hover .obra__foto::after { border-width: 10px; }
.obra__legenda { padding-top: 18px; }
.obra__nome {
display: block;
font-family: var(--fonte-titulos);
font-weight: 400;
font-size: clamp(16px, 1.7vw, 21px);
letter-spacing: .01em;
line-height: 1.3;
}
.obra__tipo { display: block; font-size: 12.5px; color: var(--cinza); margin-top: 8px; }
.obra:hover .obra__nome { color: var(--terracota-texto); }
/* ==================================================================
5. ESCRITÓRIO — seção terracota cheia
grafismo do cobogó à esquerda · título em 3 linhas e texto à
direita · três valores em faixa no rodapé da seção
================================================================== */
.duas-colunas {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(28px, 5vw, 78px);
align-items: center;
}
.retrato { aspect-ratio: 4 / 5; overflow: hidden; background: var(--areia-clara); }
.retrato img { width: 100%; height: 100%; object-fit: cover; }
/* o grafismo do cobogó da EKOA: peça vertical (0,765), mantém a
proporção original em vez do 4:5 padrão — ela já tem fundo na mesma
cor da seção, então não há o que a moldura precise cortar ou esticar.
Um pouco menor que a coluna inteira (pedido do Igor em 26/08): centralizada
com max-width, em vez de ocupar a coluna toda como a foto da Equipe.
Chegou a cair para 45% numa rodada em que fui além do pedido, foi
corrigida para 58% (o tamanho da referência que o Igor mandou) e,
depois, aumentada de novo a pedido dele em 26/08. */
/* pedido do Igor em 26/08: um pouco menor (era 74%) e mais para cima —
align-self:start tira do centro vertical padrão da .duas-colunas e
gruda no topo da coluna, ao lado do início do texto */
.retrato--vertical {
aspect-ratio: 1200 / 1569;
background: var(--terracota-fundo);
max-width: 62%;
margin-inline: auto;
align-self: start;
}
.corpo p { color: var(--texto); margin-bottom: 18px; max-width: 56ch; }
.corpo p:last-child { margin-bottom: 0; }
/* pedido do Igor em 26/08: só o texto do Escritório, um pouco menor —
era 16px (herdado do body), como o texto das outras seções */
#escritorio .corpo p { font-size: 14.5px; }
.secao--terracota .corpo p,
.secao--terracota .titulo { color: #fff; }
.secao--verde .corpo p { color: rgba(255,255,255,.78); }
.secao--verde .titulo { color: #fff; }
/* pedido do Igor em 27/08: o título de Contato ("Vamos construir
espaços com significado.") em terracota, não branco como o resto
dos títulos sobre fundo verde. Usa --terracota-em-verde, não a cor
pura da marca: terracota puro sobre este verde escuro mede só 2,8:1
de contraste, abaixo do mínimo de leitura — a mesma ressalva já
aplicada no rótulo e nos dados de Contato. */
.secao--verde .contato__titulo { color: var(--terracota-em-verde); }
/* faixa de três (valores) e de quatro (serviços) */
.blocos {
list-style: none;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(20px, 3vw, 46px);
margin-top: clamp(34px, 5vw, 62px);
padding-top: clamp(26px, 3.5vw, 42px);
border-top: 1px solid var(--linha);
}
.blocos--quatro { grid-template-columns: repeat(4, 1fr); }
.secao--terracota .blocos { border-top-color: rgba(255,255,255,.3); }
/* em Serviços a faixa vem logo após a cabeça da seção, que já tem
seu próprio filete — não duplica linha nem margem */
#servicos .blocos { margin-top: 0; padding-top: 0; border-top: 0; }
.blocos li { font-size: 14.5px; color: var(--texto); }
.blocos strong {
display: block;
font-weight: 400;
font-size: 12px;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--terracota-texto);
margin-bottom: 10px;
}
.secao--terracota .blocos li,
.secao--terracota .blocos strong { color: #fff; }
/* ==================================================================
6. EQUIPE — texto à esquerda, retrato à direita, sócios embaixo
================================================================== */
/* cabeçalho da lista de sócios — rótulo e título à esquerda, texto de
apoio à direita, alinhados pela base (mesmo padrão da frase-grade
da abertura). Pedido do Igor em 26/08: essa parte "mais completa". */
.socios__cabeca {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: clamp(24px, 4vw, 60px);
align-items: end;
margin-bottom: clamp(28px, 3.5vw, 42px);
}
.socios__cabeca .titulo { margin-top: 10px; }
/* pedido do Igor em 26/08: só este título, menor — era o .titulo base
(clamp(30px, 4.6vw, 56px)) */
.socios__titulo { font-size: clamp(22px, 2.8vw, 34px); }
/* filete de largura total — diferente do .filete curto, que só marca
transição de seção */
.filete--largo {
display: block;
width: 100%;
height: 1px;
background: var(--linha);
border: 0;
margin-bottom: clamp(30px, 4vw, 48px);
}
.socios {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(20px, 3vw, 46px);
list-style: none;
}
/* divisórias verticais entre os sócios — some em coluna única (abaixo
de 1080px), onde não haveria o que dividir */
.socios li {
border-left: 1px solid var(--linha);
padding-left: clamp(20px, 3vw, 36px);
padding-bottom: 4px;
}
.socios li:first-child { border-left: 0; padding-left: 0; }
.socios h3 {
font-family: var(--fonte-titulos);
font-weight: 400;
font-size: 17px;
margin: 10px 0 6px;
color: var(--terracota-texto);
}
.socios__funcao {
font-size: 10.5px;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--terracota-texto);
margin-bottom: 12px;
}
/* pedido do Igor em 26/08: sem numeração (01/02/03) e sem o filete
embaixo de cada sócio */
.socios p { font-size: 14px; color: var(--texto); }
.socios p.socios__funcao { color: var(--terracota-texto); }
/* ==================================================================
7. CONTATO — seção verde
frase grande no topo · texto e botão à ESQUERDA · dados à DIREITA
(a ordem do print de 26/08; no site anterior estava invertida)
================================================================== */
.contato-grade {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(30px, 5vw, 80px);
/* start virou stretch: para o botão descer até o pé da coluna
(pedido do Igor em 26/08), a coluna do texto precisa da mesma
altura da coluna de dados ao lado, não só a altura do próprio
conteúdo */
align-items: stretch;
margin-top: clamp(28px, 4vw, 48px);
}
/* texto no topo, botão empurrado para o fim da coluna.
align-items:flex-start é necessário: o padrão do flex esticaria o
botão na largura toda da coluna, em vez do tamanho do próprio texto. */
.contato__corpo {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
/* piso do espaço entre o texto e o botão — o que falta até o pé da
coluna vem do space-between; isto garante que nunca colem, mesmo
quando as duas colunas dão na mesma altura (como no celular) */
gap: 26px;
}
/* dentro do .contato__corpo o espaçamento já vem do gap/space-between
do próprio flex — a margem própria do bloco só duplicaria */
.contato__corpo .contato-cta { margin-top: 0; }
.contato-dados { list-style: none; }
.contato-dados li {
padding: 16px 0;
border-bottom: 1px solid rgba(255,255,255,.16);
}
.contato-dados span {
display: block;
font-size: 10.5px;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--terracota-em-verde);
margin-bottom: 7px;
}
.contato-dados a,
.contato-dados strong,
.contato-dados .copia-email {
font-family: var(--fonte-titulos);
font-weight: 400;
font-size: 16.5px;
color: #fff;
}
.contato-dados a:hover { color: var(--terracota-em-verde); }
/* botão de copiar e-mail — zera o estilo nativo de