/* Stetando — folha de estilos comum */

:root{
  --bg:#1a1722;
  --bg-alt:#221e2c;
  --bg-light:#eeeaf2;
  --ink:#e7e3ec;
  --ink-dim:#948ea3;
  --ink-dark:#1a1722;
  --accent:#5fb79a;
  --accent-2:#c0a44e;
  --sans:system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --serif:Georgia,"Times New Roman",serif;
  --gap:28px;
  --pad:40px;
}

*,*::before,*::after{box-sizing:border-box;}

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

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--serif);
  font-size:18px;
  line-height:1.7;
  overflow-x:hidden;
}

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

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

/* --- tipografia --- */

h1,h2,h3{
  font-family:var(--sans);
  font-weight:800;
  margin:0;
  color:inherit;
}

h1{
  font-size:clamp(2.3rem,5.3vw,4.05rem);
  line-height:0.98;
  letter-spacing:-0.035em;
}

h2{
  font-size:clamp(1.5rem,2.6vw,2.15rem);
  line-height:1.06;
  letter-spacing:-0.022em;
}

h3{
  font-size:1.08rem;
  line-height:1.3;
  letter-spacing:-0.01em;
  margin-top:34px;
}

.num{
  display:block;
  font-family:var(--sans);
  font-size:0.8rem;
  font-weight:600;
  letter-spacing:0.02em;
  color:var(--accent-2);
  margin-bottom:12px;
}

p{margin:0 0 20px;}
p:last-child{margin-bottom:0;}

h2 + p,h3 + p{margin-top:18px;}

.lead{
  font-size:1.18rem;
  line-height:1.62;
}

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;
}

strong{font-weight:700;}

/* --- listas --- */

ul.check{
  list-style:none;
  padding:0;
  margin:22px 0 0;
}

ul.check li{
  position:relative;
  padding-left:26px;
  margin-bottom:12px;
}

ul.check li::before{
  content:"";
  position:absolute;
  left:0;
  top:0.62em;
  width:9px;
  height:9px;
  background:var(--accent);
}

ol.steps{
  list-style:none;
  counter-reset:s;
  padding:0;
  margin:22px 0 0;
}

ol.steps li{
  position:relative;
  padding-left:42px;
  margin-bottom:14px;
  counter-increment:s;
}

ol.steps li::before{
  content:counter(s,decimal-leading-zero);
  position:absolute;
  left:0;
  top:0.18em;
  font-family:var(--sans);
  font-size:0.78rem;
  font-weight:600;
  color:var(--accent-2);
}

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

.site-header{
  padding:26px 0 0;
}

.site-header .grid{align-items:baseline;row-gap:12px;}

.brand{
  grid-column:1 / span 4;
  font-family:var(--sans);
  font-weight:800;
  font-size:1.18rem;
  letter-spacing:-0.02em;
  color:var(--ink);
  text-decoration:none;
}

.brand:hover{color:var(--accent);}

.site-nav{
  grid-column:6 / span 7;
  justify-self:end;
}

.site-nav ul{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:6px 26px;
  margin:0;
  padding:0;
  font-family:var(--sans);
  font-size:0.92rem;
}

.site-nav a{
  color:var(--ink-dim);
  text-decoration:none;
}

.site-nav a:hover,.site-nav a[aria-current="page"]{
  color:var(--ink);
  box-shadow:inset 0 -2px 0 var(--accent);
}

/* --- herói --- */

.hero{padding:76px 0 0;}

.hero .grid{align-items:start;}

.hero h1{grid-column:1 / span 7;}

.hero-mark{
  grid-column:9 / span 1;
  justify-self:start;
  width:14px;
  font-size:clamp(2.3rem,5.3vw,4.05rem);
  height:1.96em;
  background:var(--accent-2);
}

.hero .lead{
  grid-column:1 / span 5;
  margin-top:44px;
  color:var(--ink);
}

.hero-meta{
  grid-column:7 / span 6;
  margin-top:44px;
  font-family:var(--sans);
  font-size:0.86rem;
  line-height:1.6;
  color:var(--ink-dim);
  align-self:end;
}

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

main{display:block;}

.block{margin-top:64px;}
.block-wide{margin-top:112px;}

.rule{height:3px;border:0;margin:0 0 30px;}
.rule-a{grid-column:1 / span 3;background:var(--accent);}
.rule-b{grid-column:2 / span 5;background:var(--accent-2);}
.rule-c{grid-column:1 / span 2;background:var(--accent);}
.rule-d{grid-column:5 / span 4;background:var(--accent-2);}
.rule-e{grid-column:3 / span 3;background:var(--accent);}

.col-left-6{grid-column:2 / span 6;}
.col-left-7{grid-column:1 / span 7;}
.col-right-6{grid-column:6 / span 6;}
.col-right-7{grid-column:5 / span 7;}
.col-mid-5{grid-column:4 / span 5;}
.col-left-5{grid-column:2 / span 5;}

/* --- imagens --- */

figure{margin:0;}

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

figcaption{
  font-family:var(--sans);
  font-size:0.8rem;
  line-height:1.5;
  color:var(--ink-dim);
  margin-top:14px;
  text-align:right;
}

.figure-main{grid-column:1 / span 8;}

/* --- secção clara --- */

.band{
  background:var(--bg-light);
  color:var(--ink-dark);
  margin-top:112px;
  padding:96px 0 104px;
}

.band h2,.band h3{color:var(--ink-dark);}
.band .num{color:#7a6520;}
.band ul.check li::before{background:#2f7a63;}
.band figcaption{color:#5c5668;text-align:left;}
.band .rule-d{background:#7a6520;}

.band-text{grid-column:2 / span 5;}

.band-figure{grid-column:8 / span 5;}

/* --- página "o projeto" --- */

.about-block{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  column-gap:var(--gap);
  margin-top:64px;
}

.about-block .mark{
  grid-column:1 / span 1;
  height:3px;
  margin-top:0.95em;
  background:var(--accent);
}

.about-block:nth-of-type(even) .mark{background:var(--accent-2);}

.about-block .body{grid-column:3 / span 6;}

/* --- páginas de texto --- */

.doc{grid-column:2 / span 7;}
.doc h2{margin-top:56px;}
.doc h2:first-of-type{margin-top:40px;}
.doc h3{margin-top:30px;}

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

.site-footer{
  background:var(--bg-alt);
  margin-top:112px;
  padding:56px 0 52px;
}

.footer-bar{
  grid-column:1 / span 4;
  height:6px;
  background:var(--accent);
  margin-bottom:38px;
}

.footer-name{
  grid-column:1 / span 5;
  font-family:var(--sans);
  font-weight:800;
  font-size:1.9rem;
  letter-spacing:-0.025em;
  line-height:1.05;
}

.footer-nav{
  grid-column:1 / span 7;
  margin-top:20px;
}

.footer-nav ul{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:8px 24px;
  margin:0;
  padding:0;
  font-family:var(--sans);
  font-size:0.92rem;
}

.footer-nav a{color:var(--ink-dim);text-decoration:none;}
.footer-nav a:hover{color:var(--ink);box-shadow:inset 0 -2px 0 var(--accent);}

.footer-contact{
  grid-column:9 / span 4;
  justify-self:end;
  text-align:right;
  font-family:var(--sans);
  font-size:0.9rem;
  line-height:1.6;
  color:var(--ink-dim);
  align-self:end;
}

.footer-note{
  grid-column:1 / span 8;
  margin-top:40px;
  font-family:var(--sans);
  font-size:0.8rem;
  line-height:1.6;
  color:var(--ink-dim);
}

/* --- tablet --- */

@media (max-width:1000px){
  :root{--pad:32px;--gap:22px;}

  .hero h1{grid-column:1 / span 10;}
  .hero-mark{grid-column:12 / span 1;}
  .hero .lead{grid-column:1 / span 8;}
  .hero-meta{grid-column:1 / span 8;margin-top:28px;}

  .col-left-6,.col-left-7,.col-right-6,.col-right-7,.col-mid-5,.col-left-5{grid-column:1 / span 10;}
  .figure-main{grid-column:1 / span 11;}
  .band-text{grid-column:1 / span 8;}
  .band-figure{grid-column:6 / span 7;margin-top:48px;}
  .doc{grid-column:1 / span 10;}

  .about-block .body{grid-column:2 / span 9;}

  .rule-a,.rule-b,.rule-c,.rule-d,.rule-e{grid-column:1 / span 4;}
  .footer-name{grid-column:1 / span 7;}
  .footer-contact{grid-column:9 / span 4;}
}

/* --- telemóvel --- */

@media (max-width:700px){
  :root{--pad:20px;}

  body{font-size:17px;}

  .site-header{padding-top:20px;}
  .site-header .grid,.hero .grid,.grid{column-gap:0;}

  .brand,.site-nav,
  .hero h1,.hero .lead,.hero-meta,.hero-mark,
  .col-left-6,.col-left-7,.col-right-6,.col-right-7,.col-mid-5,.col-left-5,
  .figure-main,.band-text,.band-figure,.doc,
  .rule-a,.rule-b,.rule-c,.rule-d,.rule-e,
  .footer-bar,.footer-name,.footer-nav,.footer-contact,.footer-note{
    grid-column:1 / -1;
  }

  .site-nav{justify-self:start;margin-top:14px;}
  .site-nav ul{gap:8px 20px;}

  .hero{padding-top:44px;}
  .hero .lead{margin-top:28px;}
  .hero-mark{
    width:64px;
    height:8px;
    font-size:1rem;
    margin-top:30px;
  }

  .block{margin-top:40px;}
  .block-wide{margin-top:64px;}

  .band{margin-top:64px;padding:56px 0 60px;}
  .band-figure{margin-top:40px;}

  .figure-main{margin-top:0;}
  figcaption{text-align:left;}

  .about-block{margin-top:40px;}
  .about-block .mark{grid-column:1 / -1;width:56px;height:3px;margin:0 0 18px;}
  .about-block .body{grid-column:1 / -1;}

  .site-footer{margin-top:64px;padding:40px 0 44px;}
  .footer-bar{width:58%;margin-bottom:28px;}
  .footer-name{font-size:1.6rem;}
  .footer-contact{justify-self:start;text-align:left;margin-top:24px;}
  .footer-note{margin-top:28px;}

  .doc h2{margin-top:40px;}
}