/* Desazo — folha de estilos comum a todas as páginas */

:root{
  --bg:#f1f2f0;
  --bg-alt:#e3e5e2;
  --bg-dark:#141614;
  --ink:#171917;
  --ink-2:#6a6e6a;
  --ink-inv:#f1f2f0;
  --accent:#2a6b3c;
  --accent-light:#9ecdaa;
  --accent-2:#8a6a20;
  --line:rgba(23,25,23,.20);
  --serif:Georgia,"Times New Roman",Times,serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --gap:24px;
  --max:1180px;
}

*{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:400 18px/1.65 var(--serif);
  overflow-x:hidden;
}

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

a{
  color:var(--accent);
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1px;
}
a:hover{text-decoration-thickness:2px}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

p{margin:0 0 1.5em}
p:last-child{margin-bottom:0}

h1,h2,h3{font-weight:400;margin:0}

h1{
  font-size:clamp(2.35rem,5.4vw,4.1rem);
  line-height:1.05;
  letter-spacing:-.012em;
  margin:0 0 34px;
}
h1 .l2{display:block;margin-left:12.5%}

h2{
  font-size:clamp(1.55rem,2.5vw,2.05rem);
  line-height:1.22;
  letter-spacing:-.006em;
  margin:0 0 22px;
}

h3{
  font-style:italic;
  font-size:1.22rem;
  line-height:1.35;
  margin:34px 0 14px;
}

/* ---------- estrutura ---------- */

.wrap{max-width:var(--max);margin:0 auto;padding:0 28px}

.grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  column-gap:var(--gap);
}

.c6{grid-column:1/7}
.c7{grid-column:1/8}
.c8{grid-column:1/9}
.c9{grid-column:1/10}
.c10{grid-column:1/11}

.r72{padding:72px 0}
.r88{padding:88px 0}
.r104{padding:104px 0}

.band-alt{background:var(--bg-alt)}

.band-dark{
  background:var(--bg-dark);
  color:var(--ink-inv);
}
.band-dark a{color:var(--accent-light)}
.band-dark :focus-visible{outline-color:var(--accent-light)}
.band-dark .sec-num{color:#c6a353}
.band-dark .note{color:#a9aea9}

/* ---------- separadores ---------- */

.sep{position:relative;height:7px;margin:0 0 30px}
.sep::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--line);
}
.sep span{
  position:absolute;left:0;top:4px;height:3px;
  width:calc((100% - 11 * var(--gap)) / 12 * 2 + var(--gap));
  background:var(--accent);
}
.band-dark .sep::before{background:rgba(241,242,240,.28)}
.band-dark .sep span{background:var(--accent-light)}

/* ---------- cabeçalho ---------- */

.site-head{border-bottom:1px solid var(--line);background:var(--bg)}
.head-inner{
  display:flex;flex-wrap:wrap;align-items:baseline;
  justify-content:space-between;gap:12px 28px;
  padding-top:20px;padding-bottom:18px;
}
.brand{
  font-size:1.5rem;letter-spacing:.02em;color:var(--ink);
  text-decoration:none;
}
.brand:focus-visible{outline-offset:4px}
.site-head nav ul{
  list-style:none;display:flex;flex-wrap:wrap;gap:6px 24px;margin:0;padding:0;
}
.site-head nav a{
  font:400 15px/1.4 var(--serif);
  color:var(--ink);
  text-decoration:none;
  border-bottom:1px solid transparent;
  padding-bottom:2px;
}
.site-head nav a:hover{border-bottom-color:var(--accent)}
.site-head nav a[aria-current="page"]{border-bottom-color:var(--accent-2)}

.skip{
  position:absolute;left:-9999px;top:0;
  background:var(--bg);color:var(--ink);padding:10px 16px;z-index:10;
}
.skip:focus{left:8px;top:8px}

/* ---------- hero ---------- */

.hero{padding:86px 0 64px}

.hero-axis{position:relative;grid-column:1/2;min-height:230px}
.hero-axis i{position:absolute;left:0;width:1px;top:10px;bottom:10px;background:var(--accent-2)}
.hero-axis b{position:absolute;left:-7px;width:15px;height:1px;background:var(--accent-2)}
.hero-axis b.t{top:10px}
.hero-axis b.d{bottom:10px}

.hero-title{grid-column:2/10}
.hero-dim{grid-column:2/10;margin:0 0 30px}
.hero-intro{grid-column:2/8;color:var(--ink);font-size:1.06rem}

.dimline{display:flex;align-items:center;gap:14px}
.dimline i{flex:1;height:1px;background:var(--ink-2);position:relative}
.dimline i::before{
  content:"";position:absolute;top:-4px;width:1px;height:9px;background:var(--ink-2);
}
.dimline i.l::before{left:0}
.dimline i.r::before{right:0}
.dimline span{
  font:400 13px/1.3 var(--sans);
  letter-spacing:.04em;
  color:var(--ink-2);
  white-space:nowrap;
}

/* ---------- figura principal ---------- */

.fig-main{margin:0;padding-bottom:34px}
.fig-main img{grid-column:1/8}
.fig-note{
  grid-column:9/13;position:relative;align-self:end;
  font-size:.92rem;line-height:1.55;color:var(--ink-2);
  padding-bottom:6px;
}
.fig-note::before{
  content:"";position:absolute;left:-34%;top:9px;width:34%;height:1px;background:var(--accent-2);
}

/* ---------- secções ---------- */

.sec-num{
  font:400 14px/1 var(--sans);
  letter-spacing:.08em;
  color:var(--accent-2);
  margin:0 0 12px;
}

.note{color:var(--ink-2);font-size:.95rem}

ul.marks,ol.steps{margin:0 0 1.5em;padding:0 0 0 22px}
ul.marks{list-style:none;padding-left:0}
ul.marks li{position:relative;padding-left:26px;margin-bottom:12px}
ul.marks li::before{
  content:"";position:absolute;left:0;top:.72em;width:11px;height:3px;background:var(--accent);
}
ol.steps li{margin-bottom:12px;padding-left:6px}
ol.steps::marker,ol.steps li::marker{color:var(--accent-2)}
.band-dark ul.marks li::before{background:var(--accent-light)}

/* ---------- secção escura com imagem de pormenor ---------- */

.detail-fig{grid-column:1/6;margin:0}
.detail-fig img{width:100%}
.detail-fig figcaption{
  margin-top:14px;font-size:.88rem;line-height:1.5;color:#a9aea9;
}
.detail-text{grid-column:7/13}

/* ---------- página Sobre ---------- */

.rail{
  grid-column:1/8;
  position:relative;
  border-left:1px solid var(--accent-2);
  padding-left:30px;
}
.rail .block{position:relative;padding-top:6px;margin-bottom:46px}
.rail .block:last-child{margin-bottom:0}
.rail .block::before{
  content:"";position:absolute;left:-30px;top:16px;width:18px;height:1px;background:var(--accent);
}

/* ---------- páginas legais ---------- */

.legal{grid-column:1/10}
.legal h2{margin-top:48px}
.legal h2:first-of-type{margin-top:0}

.page-head{padding:64px 0 10px}
.page-head h1{font-size:clamp(2rem,4vw,3.1rem);margin-bottom:22px}
.page-head .lead{grid-column:1/8;color:var(--ink-2);font-size:1.02rem}
.page-head .t{grid-column:1/10}

/* ---------- contacto ---------- */

.contact-box{grid-column:1/8}
.contact-box .mail{font-size:1.18rem}

/* ---------- rodapé ---------- */

.site-foot{border-top:3px solid var(--ink);background:var(--bg)}
.foot-rule{height:1px;background:var(--line)}
.foot-grid{padding:44px 0 0}
.foot-brand{grid-column:1/6}
.foot-brand .fname{font-size:1.65rem;line-height:1.1;margin:0 0 12px}
.foot-brand p{font-size:.95rem;color:var(--ink-2);margin:0}
.foot-col{grid-column:8/10}
.foot-col.mail{grid-column:10/13}
.foot-col h2{
  font:400 13px/1.4 var(--sans);letter-spacing:.06em;color:var(--ink-2);margin:0 0 14px;
}
.foot-col ul{list-style:none;margin:0;padding:0}
.foot-col li{margin-bottom:9px;font-size:.96rem}
.foot-col a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
.foot-col a:hover{border-bottom-color:var(--accent)}
.foot-col .mailto{color:var(--accent);text-decoration:underline;text-underline-offset:3px;border:0}
.foot-bottom{
  margin-top:40px;border-top:1px solid var(--line);
  padding:16px 0 30px;
  font:400 12px/1.6 var(--sans);color:var(--ink-2);
}

/* ---------- responsivo ---------- */

@media (max-width:980px){
  :root{--gap:20px}
  .hero-title,.hero-dim{grid-column:1/13}
  .hero-intro{grid-column:1/11}
  .hero-axis{display:none}
  .c6,.c7,.c8,.c9,.c10,.legal,.rail,.contact-box,.page-head .lead,.page-head .t{grid-column:1/13}
  .fig-main img{grid-column:1/10}
  .fig-note{grid-column:1/10;margin-top:16px}
  .fig-note::before{left:0;top:-9px;width:64px}
  .detail-fig{grid-column:1/7}
  .detail-text{grid-column:1/13;margin-top:34px}
  .foot-brand{grid-column:1/13;margin-bottom:34px}
  .foot-col{grid-column:1/6}
  .foot-col.mail{grid-column:7/13}
  .sep span{width:34%}
}

@media (max-width:640px){
  body{font-size:17px}
  .wrap{padding:0 18px}
  .hero{padding:52px 0 40px}
  .r72,.r88,.r104{padding:48px 0}
  .r88{padding:52px 0}
  .r104{padding:56px 0}
  h1 .l2{margin-left:0}
  h1{margin-bottom:26px}
  .fig-main img,.fig-note,.detail-fig,.detail-text,.foot-col,.foot-col.mail{grid-column:1/13}
  .detail-text{margin-top:28px}
  .foot-col{margin-bottom:28px}
  .foot-grid{padding-top:34px}
  .page-head{padding:44px 0 6px}
  .dimline span{white-space:normal}
  .rail{padding-left:20px}
  .rail .block::before{left:-20px;width:12px}
}