/* Fotografia a sangrar de margem a margem. O texto vive por cima dela ou em faixas estreitas entre imagens. */
:root{
  --preto:#0A0A08; --verde:#485935; --seco:#A0A684; --claro:#C7CEBE;
  --papel:#FFFFFF; --texto:#0A0A08; --suave:rgba(10,10,8,.62); --linha:rgba(10,10,8,.12);
  --faixa:#C7CEBE; --barra:#485935; --barra-texto:#FFFFFF;
  --display:"Cormorant Garamond",Georgia,serif;
  --corpo:"Montserrat",Helvetica,Arial,sans-serif;
  color-scheme:light;
}

*{box-sizing:border-box}
body{margin:0;background:var(--papel);color:var(--texto);
  font-family:var(--corpo);font-weight:300;font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
.w{max-width:1160px;margin:0 auto;padding-inline:24px}
.estreita{max-width:720px;margin:0 auto;padding-inline:24px}

/* etiquetas e tipos */
.lab{font-size:11px;letter-spacing:3px;text-transform:uppercase;font-weight:500;color:var(--verde)}
.sobre-foto .lab{color:rgba(255,255,255,.85)}
h1,h2,h3{font-family:var(--display);font-weight:300;margin:0;line-height:1.08;text-wrap:balance;letter-spacing:.2px}
h1{font-size:clamp(44px,7.4vw,92px)}
h2{font-size:clamp(30px,4.6vw,54px)}
h3{font-size:clamp(21px,2.3vw,27px);line-height:1.2}
em{font-style:italic}
p{margin:0}

/* barra do topo */
.barra{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--barra);color:var(--barra-texto)}
.barra .w{display:flex;align-items:center;gap:28px;min-height:62px;flex-wrap:wrap}
.marca{font-family:var(--display);font-size:19px;letter-spacing:6px;text-transform:uppercase;font-weight:400;
  color:#fff;text-decoration:none;margin-right:auto;white-space:nowrap}
.barra nav{display:flex;gap:30px;flex-wrap:wrap}
.barra nav a{color:rgba(255,255,255,.88);text-decoration:none;font-size:11px;letter-spacing:2.4px;text-transform:uppercase}
.barra nav a:hover{color:#fff}
.barra .sep{width:1px;height:26px;background:rgba(255,255,255,.3)}
.barra .loc{font-family:var(--display);font-size:13px;letter-spacing:3px;text-transform:uppercase;color:rgba(255,255,255,.8);white-space:nowrap}

/* hero a sangrar */
.hero{position:relative;height:min(84vh,740px);min-height:460px;overflow:hidden}
.hero img{width:100%;height:100%;object-fit:cover}
.hero .veu{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,8,.34) 0%,rgba(10,10,8,.05) 42%,rgba(10,10,8,.62) 100%)}
.hero .txt{position:absolute;left:0;right:0;bottom:0;padding:0 24px 56px}
.hero .txt .inner{max-width:1160px;margin:0 auto;color:#fff}
.hero h1{color:#fff;max-width:14ch}
.hero .sub{color:rgba(255,255,255,.9);max-width:50ch;margin-top:20px;font-size:17px}

/* frase entre blocos */
.frase{padding-block:clamp(56px,9vw,104px);text-align:center;background:var(--papel)}
.frase p{font-family:var(--display);font-size:clamp(23px,3.2vw,38px);line-height:1.3;color:var(--texto)}
.frase .lab{display:block;margin-bottom:22px}

/* bloco de imagem com texto por cima */
.bloco{position:relative;min-height:min(72vh,620px);display:flex;align-items:flex-end;overflow:hidden}
.bloco > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bloco .veu{position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,10,8,.66) 0%,rgba(10,10,8,.22) 52%,rgba(10,10,8,0) 100%)}
.bloco .cx{position:relative;padding:0 24px 52px;width:100%}
.bloco .cx .inner{max-width:1160px;margin:0 auto;color:#fff;max-width:1160px}
.bloco h2{color:#fff;max-width:13ch}
.bloco p.d{color:rgba(255,255,255,.86);max-width:44ch;margin-top:14px}
.lk{display:inline-block;margin-top:22px;font-size:11px;letter-spacing:2.6px;text-transform:uppercase;
  color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.6);padding-bottom:5px}
.lk:hover{border-color:#fff}
.lk.escuro{color:var(--verde);border-color:var(--verde)}

/* duas colunas de caminho */
.caminhos{display:grid;grid-template-columns:1fr 1fr}
.caminhos > div{position:relative;min-height:min(60vh,520px);display:flex;align-items:flex-end;overflow:hidden}
.caminhos img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.caminhos .veu{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,8,.1),rgba(10,10,8,.72))}
.caminhos .cx{position:relative;padding:36px 32px 40px;color:#fff}
.caminhos h3{color:#fff}
.caminhos p{color:rgba(255,255,255,.84);margin-top:12px;font-size:15px;max-width:40ch}

/* etapas em faixa */
.etapas{background:var(--faixa);padding-block:clamp(56px,8vw,96px)}
.lista-etapas{margin-top:40px;border-top:1px solid rgba(10,10,8,.18)}
.linha-etapa{display:grid;grid-template-columns:72px 1fr 1.3fr;gap:28px;align-items:baseline;
  padding-block:26px;border-bottom:1px solid rgba(10,10,8,.18)}
.linha-etapa .n{font-family:var(--display);font-size:34px;color:var(--verde);line-height:1}
.linha-etapa h3{font-size:22px}
.linha-etapa p{color:rgba(10,10,8,.66);font-size:15px;min-width:0}

/* comparador */
.cmp{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;background:var(--claro);
  touch-action:pan-y;user-select:none;cursor:ew-resize}
.cmp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.cmp .depois{clip-path:inset(0 0 0 var(--pos,50%))}
.cmp .bar{position:absolute;top:0;bottom:0;width:1px;background:#fff;left:var(--pos,50%);pointer-events:none}
.cmp .knob{position:absolute;top:50%;left:var(--pos,50%);width:46px;height:46px;border-radius:50%;background:#fff;
  transform:translate(-50%,-50%);display:grid;place-items:center;box-shadow:0 2px 18px rgba(10,10,8,.35);pointer-events:none}
.cmp .tag{position:absolute;top:18px;font-size:10px;letter-spacing:2.4px;color:#fff;background:rgba(10,10,8,.5);padding:6px 11px;pointer-events:none}
.cmp .tag.a{left:18px}.cmp .tag.d{right:18px}
.cmp:focus-visible{outline:2px solid var(--verde);outline-offset:4px}

/* projetos editoriais */
.editorial{padding-block:clamp(56px,8vw,96px)}
.cab{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:40px}
.cartao{min-width:0}
.cartao img{width:100%;aspect-ratio:4/5;object-fit:cover}
.cartao h3{margin-top:18px;font-size:23px}
.cartao .meta{font-size:10px;letter-spacing:2.4px;text-transform:uppercase;color:var(--verde);margin-top:8px}
.cartao:nth-child(2){margin-top:44px}

/* marcas */
.marcas{background:var(--faixa);padding-block:clamp(44px,6vw,72px);text-align:center}
.fila{display:flex;flex-wrap:wrap;gap:16px 48px;justify-content:center;margin-top:26px}
.fila span{font-family:var(--display);font-size:21px;letter-spacing:3px;color:var(--texto);opacity:.6}

/* testemunho */
.cit{padding-block:clamp(60px,9vw,112px);text-align:center}
.cit blockquote{margin:0 auto;max-width:24ch;font-family:var(--display);font-size:clamp(25px,3.6vw,42px);line-height:1.26;font-style:italic;font-weight:300}
.cit .quem{margin-top:26px;font-size:11px;letter-spacing:2.6px;text-transform:uppercase;color:var(--suave)}

/* contacto */
.contacto{background:var(--barra);color:#fff;padding-block:clamp(56px,8vw,96px)}
.contacto h2{color:#fff}
.contacto .lab{color:var(--claro)}
.contacto p.d{color:rgba(255,255,255,.82);max-width:46ch;margin-top:16px}
form{margin-top:36px}
.campos{display:grid;grid-template-columns:1fr 1fr;gap:20px}
label{display:block;font-size:10px;letter-spacing:2.4px;text-transform:uppercase;color:rgba(255,255,255,.72);margin-bottom:8px}
input,select,textarea{width:100%;font:inherit;font-size:16px;padding:10px 0;color:#fff;background:transparent;
  border:0;border-bottom:1px solid rgba(255,255,255,.38);border-radius:0}
select option{color:#0A0A08}
input:focus,select:focus,textarea:focus{outline:0;border-bottom-color:#fff}
.larga{grid-column:1/-1}
button{margin-top:30px;background:#fff;color:var(--verde);border:0;font-family:var(--corpo);font-size:11px;
  letter-spacing:2.6px;text-transform:uppercase;padding:16px 38px;cursor:pointer}
button:hover{background:var(--claro)}

footer{background:var(--preto);color:rgba(255,255,255,.72);padding-block:52px;font-size:14px}
footer .w{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:34px}
footer .marca{color:#fff;margin:0 0 14px;display:block}
footer b{color:#fff;font-weight:500;font-size:10px;letter-spacing:2.4px;text-transform:uppercase;display:block;margin-bottom:10px}

/* aviso temporário */
.aviso{background:var(--preto);color:rgba(255,255,255,.8);font-size:12px;letter-spacing:.4px;padding:10px 24px;text-align:center}

@media (max-width:860px){
  .caminhos{grid-template-columns:1fr}
  .trio{grid-template-columns:1fr;gap:36px}
  .cartao:nth-child(2){margin-top:0}
  .cartao img{aspect-ratio:4/3}
  .linha-etapa{grid-template-columns:48px 1fr;gap:16px}
  .linha-etapa p{grid-column:2}
  .campos{grid-template-columns:1fr}
  footer .w{grid-template-columns:1fr}
  .hero{height:78vh}
  .cmp{aspect-ratio:4/3}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ===== páginas interiores ===== */
.barra nav a.on{color:#fff;border-bottom:1px solid rgba(255,255,255,.6);padding-bottom:3px}
.cabeca{padding:clamp(48px,7vw,88px) 0 clamp(28px,4vw,48px)}
.cabeca h1{max-width:18ch}
.cabeca .d{margin-top:18px;max-width:58ch;font-size:17px;color:var(--suave)}
.ficha{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:40px;padding-top:24px;border-top:1px solid var(--linha)}
.ficha dt{font-size:10px;letter-spacing:2.4px;text-transform:uppercase;color:var(--verde);font-weight:500}
.ficha dd{margin:8px 0 0;font-family:var(--display);font-size:21px;line-height:1.2}
.sec{padding-block:clamp(44px,6vw,80px)}
.sec.faixa{background:var(--faixa)}
.sec h2{max-width:20ch}
.sec .txt{max-width:64ch;margin-top:20px}
.sec .txt p+p{margin-top:16px}
.duas{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:36px}
.duas figure,.uma figure{margin:0}
.uma{margin-top:36px}
figure img{width:100%;aspect-ratio:3/2;object-fit:cover}
figcaption{font-size:13px;color:var(--suave);margin-top:10px;letter-spacing:.2px}
.par{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-top:36px}
.par figure img{aspect-ratio:3/2}
.par .tag{font-size:10px;letter-spacing:2.4px;text-transform:uppercase;color:var(--verde);display:block;margin-bottom:10px}
.cmp-bloco{margin-top:36px}
.cmp-bloco+.cmp-bloco{margin-top:48px}
.cmp-bloco .lab{display:block;margin-bottom:14px}
.cta{background:var(--barra);color:#fff;padding-block:clamp(56px,8vw,96px)}
.cta h2{color:#fff}
.cta .lab{color:var(--claro)}
.cta p.d{color:rgba(255,255,255,.82);max-width:46ch;margin-top:16px}
.cta .lk{margin-top:28px}
.migalhas{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--suave);margin-bottom:22px}
.migalhas a{color:inherit;text-decoration:none}
.migalhas a:hover{color:var(--verde)}
@media (max-width:860px){
  .ficha{grid-template-columns:1fr 1fr}
  .duas,.par{grid-template-columns:1fr}
}

/* ===== projetos e páginas de projeto ===== */
.cabeca h1{font-size:clamp(38px,5.6vw,64px)}
.grelha{display:grid;grid-template-columns:repeat(3,1fr);gap:32px 28px;margin-top:8px}
.grelha .cartao a{color:inherit;text-decoration:none;display:block}
.grelha .cartao img{aspect-ratio:4/3}
.cartao .resumo{font-size:14px;color:var(--suave);margin-top:10px;max-width:38ch}
.ficha.lista{grid-template-columns:repeat(2,1fr);gap:20px 32px;margin-top:32px}
.ficha.lista dd{font-family:var(--corpo);font-size:15px;line-height:1.6}
.linha-etapa h3 small{display:block;font-family:var(--corpo);font-size:10px;letter-spacing:2.4px;text-transform:uppercase;color:var(--verde);margin-top:8px;font-weight:500}
.par figure{margin:0}
.par figcaption{font-size:13px;color:var(--suave);margin-top:10px}
.video-col{display:grid;grid-template-columns:minmax(240px,340px) 1fr;gap:40px;align-items:start;margin-top:36px}
.video-col video{width:100%;aspect-ratio:9/16;background:var(--preto);display:block}
.video-col .txt{margin-top:0}
.trio .cartao figure{margin:0}
.trio .cartao img{aspect-ratio:2/3}
@media (max-width:860px){
  .grelha{grid-template-columns:1fr;gap:36px}
  .ficha.lista{grid-template-columns:1fr}
  .video-col{grid-template-columns:1fr}
  .video-col video{max-width:340px}
}

/* ===== serviço, atelier, contactos ===== */
.sec .txt b{font-weight:500}
.contacto-grelha{display:grid;grid-template-columns:1.3fr 1fr;gap:56px;margin-top:36px;align-items:start}
.form-claro{margin-top:0}
.form-claro label{color:var(--suave)}
.form-claro input,.form-claro select,.form-claro textarea{color:var(--texto);border-bottom-color:var(--linha)}
.form-claro input:focus,.form-claro select:focus,.form-claro textarea:focus{border-bottom-color:var(--verde)}
.form-claro button{background:var(--verde);color:#fff}
.form-claro button:hover{background:#3a4a2a}
.form-claro .nota{margin-top:16px;font-size:13px;color:var(--suave);max-width:48ch}
.ficha.lista a{color:inherit;text-decoration:none;border-bottom:1px solid var(--linha)}
.ficha.lista .mini{display:block;font-size:13px;color:var(--suave);margin-top:6px}
@media (max-width:860px){ .contacto-grelha{grid-template-columns:1fr;gap:40px} }

/* ===== idioma, rodapé, legal ===== */
.barra nav a.lang{opacity:.75;margin-left:6px;padding-left:16px;border-left:1px solid rgba(255,255,255,.3)}
.barra nav a.lang:hover{opacity:1}
footer .rodape-lk{color:rgba(255,255,255,.72);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.3);display:inline-block;margin-top:10px}
.legal h3{margin-top:30px;font-size:22px}
.legal h3:first-child{margin-top:0}
.legal p{margin-top:10px}

/* esconder blocos com [hidden] que tenham display proprio */
[hidden]{display:none!important}