html, body { margin: 0; padding: 0; background: #ffffff; }
* { box-sizing: border-box; }
body { -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
a:hover { color: #6f6b66; }
::selection { background: #1c1b1a; color: #fff; }
/* fotos das seções — preenchem o container pai (position:relative) */
.slot { position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover; display: block; }
.slot--contain { object-fit: contain; }
.slot--pad { padding: 26px 18px; }
/* Estados hover (vinham de style-hover no design).
Estas propriedades NÃO podem voltar para o style="" inline: inline vence
qualquer seletor, e o :hover deixaria de ter efeito. */
/* Links do menu: linha branca que cresce da esquerda.
:active cobre o toque, :focus-visible cobre a navegação por teclado. */
.navlink { position: relative; opacity: 0.94; transition: opacity 240ms ease; }
.navlink::after {
content: '';
position: absolute;
left: 0; right: 0; bottom: -6px;
height: 1px;
background: currentColor;
transform: scaleX(0);
transform-origin: left center;
transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}
/* o `a:hover` global pinta de cinza-escuro; aqui o fundo é a foto do hero */
.navlink:hover,
.navlink:focus-visible,
.navlink:active { opacity: 1; color: #fff; }
.navlink:hover::after,
.navlink:focus-visible::after,
.navlink:active::after { transform: scaleX(1); }
.pill, .pill-lg { transition: transform 240ms ease; }
.pill:hover { transform: translateY(-1px); color: #1c1b1a; }
.pill-lg:hover { transform: translateY(-2px); color: #1c1b1a; }
.toggle { border: 1px solid #dedbd7; color: #77736e;
transition: border-color 240ms ease, color 240ms ease; }
.toggle:hover { border-color: #1c1b1a; color: #1c1b1a; }
/* Portfólio: o card cresce empurrando os vizinhos (flex-grow é animável).
Curva ease-in-out: arranca e assenta devagar nas duas pontas, o que
também suaviza o regresso quando o rato sai. */
.tile { flex: 1 1 0; transition: flex-grow 1100ms cubic-bezier(0.65, 0, 0.35, 1); }
.tile:hover { flex-grow: 2.35; }
/* Serviços de Estimativa: o card escolhido abre e os outros encolhem.
Por clique/toque, não por hover — funciona igual em rato e dedo. */
.est-card {
flex: 1 1 0;
transition: flex-grow 620ms cubic-bezier(0.22, 1, 0.36, 1);
}
.est-card.is-open { flex-grow: 2; }
.est-card:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
/* a descrição longa só cabe no card aberto */
.est-card .est-desc {
opacity: 0;
transition: opacity 300ms ease;
}
.est-card.is-open .est-desc { opacity: 1; transition-delay: 180ms; }
.f-lead { color: #cfcbc6; transition: color 240ms ease; }
.f-lead:hover { color: #fff; }
.f-social { border: 1px solid rgba(255,255,255,0.28); color: #e6e3df;
transition: border-color 240ms ease, color 240ms ease; }
.f-social:hover { border-color: #fff; color: #fff; }
.f-link { transition: color 240ms ease; }
.f-link:hover { color: #fff; }
.allbtn { background: #f4f3f1; transition: background 240ms ease; }
.allbtn:hover { background: #eae7e3; }
/* Quem pede menos movimento no sistema recebe a página sem transições.
O JS complementa isto desligando o Lenis e as animações do GSAP. */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* ===========================================================================
MENU MOBILE
O design original não tinha alternativa ao menu horizontal, por isso
abaixo de 900px não havia forma de navegar. O painel segue a linguagem
do site: fundo escuro do rodapé, Jost, letter-spacing largo.
=========================================================================== */
.nav-toggle {
display: none; /* só existe em ecrãs estreitos */
flex: 0 0 auto;
width: 44px; height: 44px; /* alvo de toque mínimo */
align-items: center; justify-content: center;
flex-direction: column; gap: 5px;
background: transparent; border: 0; padding: 0;
cursor: pointer;
z-index: 2;
}
.nav-toggle span {
display: block;
width: 22px; height: 1px;
background: #fff;
transition: transform 340ms cubic-bezier(0.65, 0, 0.35, 1),
opacity 200ms ease;
}
/* as duas barras cruzam-se e formam um × */
.nav-toggle[aria-expanded="true"] span:first-child { transform: translateY(3px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3px) rotate(-45deg); }
.nav-panel {
display: none;
position: fixed;
inset: 0;
padding: 104px clamp(24px, 7vw, 60px) 40px;
background: rgba(8, 7, 6, 0.97);
-webkit-backdrop-filter: saturate(140%) blur(18px);
backdrop-filter: saturate(140%) blur(18px);
flex-direction: column;
gap: 4px;
overflow-y: auto;
overscroll-behavior: contain; /* não arrasta a página por baixo */
/* Vive como filho directo do , não dentro do