/* Skebunda — folha de estilos comum */

:root{
  --bg:#10201f;
  --bg-alt:#172927;
  --bg-contrast:#eaf0ee;
  --text:#e2eae8;
  --muted:#87a09c;
  --dark:#10201f;
  --accent:#d1a05a;
  --accent2:#6fae9e;
  --serif:Georgia,'Times New Roman',serif;
  --sans:system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --step:80px;
  --gap:24px;
}

*{box-sizing:border-box}

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

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.8;
  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}

a:focus-visible,
nav a:focus-visible{outline:2px solid var(--accent);outline-offset:4px}

.wrap{max-width:1200px;margin:0 auto;padding:0 32px}

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

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

.site-head{padding:26px 0 18px;background:var(--bg)}
.head-row{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:16px}

.brand{
  font-family:var(--serif);
  font-size:20px;
  letter-spacing:.04em;
  color:var(--text);
  text-decoration:none;
}
.brand:hover{color:var(--accent)}

.site-nav ul{list-style:none;display:flex;flex-wrap:wrap;gap:22px;margin:0;padding:0}
.site-nav a{
  font-size:13px;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--muted);
  text-decoration:none;
  padding-bottom:3px;
  border-bottom:1px solid transparent;
}
.site-nav a:hover{color:var(--text);border-bottom-color:var(--accent)}
.site-nav a[aria-current="page"]{color:var(--text);border-bottom-color:var(--accent)}

/* ---------- ritmo de secções ---------- */

section{padding:var(--step) 0}
.tone-base{background:var(--bg)}
.tone-alt{background:var(--bg-alt)}
.tone-contrast{background:var(--bg-contrast);color:var(--dark)}
.tone-contrast h2,.tone-contrast h3{color:var(--dark)}
.tone-contrast .num{color:#4e7a6f}
.tone-contrast .cap{color:#4a5c58}
.tone-contrast a{color:#8a6420}

.marker{grid-column:1 / 2;margin-top:12px}
.marker i{display:block;width:8px;height:8px;background:var(--accent)}

/* ---------- tipografia ---------- */

h1{
  font-family:var(--serif);
  font-weight:700;
  font-size:clamp(38px,5.6vw,66px);
  line-height:1.04;
  letter-spacing:-.015em;
  margin:0;
}

h2{
  font-family:var(--serif);
  font-weight:600;
  font-size:clamp(21px,2.1vw,27px);
  line-height:1.25;
  margin:0;
  padding-top:5px;
}

h3{
  font-family:var(--serif);
  font-weight:700;
  font-size:17px;
  line-height:1.4;
  margin:34px 0 10px;
}

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

.num{
  display:block;
  font-family:var(--sans);
  font-size:12px;
  letter-spacing:.16em;
  color:var(--accent2);
  margin-bottom:10px;
}

.cap{
  font-size:12px;
  line-height:1.6;
  letter-spacing:.02em;
  color:var(--muted);
}

.lead{font-size:18px;line-height:1.75}

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

.hero{padding:64px 0 var(--step)}
.hero .title-col{grid-column:1 / 8}
.hero .intro-col{grid-column:9 / 13;padding-top:8px}

.axis{position:relative;height:1px;background:var(--accent);margin-top:38px;margin-bottom:112px}
.axis i{position:absolute;top:0;width:1px;background:var(--accent2)}
.axis i::after{content:"";position:absolute;left:-2.5px;bottom:-6px;width:6px;height:6px;background:var(--accent)}
.axis .a1{left:0;height:58px}
.axis .a2{left:31%;height:98px}
.axis .a3{left:66%;height:34px}

/* ---------- imagem principal ---------- */

.figure-main{margin:0;padding-bottom:var(--step);background:var(--bg)}
.figure-main .img-col{grid-column:4 / 13}
.figure-main figcaption{grid-column:1 / 4;align-self:end;padding-bottom:4px}

/* ---------- secções de texto ---------- */

.sec h2{grid-column:2 / 5}
.sec .body{grid-column:6 / 13}

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

.detail-sec h2{grid-column:2 / 6}
.detail-sec .body{grid-column:7 / 13}
.detail-sec .fig{grid-column:2 / 6;margin:44px 0 0}
.detail-sec .body-2{grid-column:7 / 13;margin-top:44px}
.detail-sec figcaption{margin-top:12px}

/* ---------- listas ---------- */

ul.plain,ul.check{list-style:none;margin:0 0 20px;padding:0}
ul.plain li,ul.check li{position:relative;padding-left:24px;margin-bottom:10px}
ul.plain li::before,ul.check li::before{
  content:"";position:absolute;left:0;top:.72em;width:6px;height:6px;background:var(--accent);
}
ul.check li::before{background:var(--accent2)}
ol.steps{margin:0 0 20px;padding-left:22px}
ol.steps li{margin-bottom:10px}
ol.steps::marker,ol.steps li::marker{color:var(--accent2)}

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

.contact-line{font-family:var(--serif);font-size:clamp(20px,2.4vw,30px);line-height:1.4;margin:0 0 14px}

/* ---------- páginas interiores ---------- */

.page-head{padding:62px 0 var(--step)}
.page-head h1{grid-column:1 / 9;font-size:clamp(32px,4.4vw,52px)}
.page-head .sub{grid-column:9 / 13;align-self:end;padding-bottom:6px}

.about-two{
  display:grid;
  grid-template-columns:3fr 1px 8fr;
  column-gap:var(--gap);
  row-gap:0;
}
.about-two .rule{grid-column:2;grid-row:1 / 100;background:#2b403d;width:1px}
.about-two h2{grid-column:1;padding-top:5px}
.about-two .t{grid-column:3;padding-bottom:46px}
.about-two .t:last-of-type{padding-bottom:0}
.about-two h2{padding-bottom:46px}

.doc h2{grid-column:2 / 5}
.doc .body{grid-column:6 / 13}
.doc .body + .marker{margin-top:56px}

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

.site-foot{background:var(--bg-contrast);color:var(--dark);padding:56px 0 46px}
.foot-top{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:12px}
.foot-name{font-family:var(--serif);font-size:clamp(24px,3vw,34px);line-height:1.2}
.foot-mail{font-size:16px}
.site-foot a{color:#8a6420}
.foot-rule{height:1px;background:#c3cfcb;margin:26px 0 22px}
.foot-links{list-style:none;display:flex;flex-wrap:wrap;gap:24px;margin:0 0 20px;padding:0}
.foot-links a{
  font-size:13px;letter-spacing:.09em;text-transform:uppercase;color:#3f5450;text-decoration:none;
  padding-bottom:2px;border-bottom:1px solid transparent;
}
.foot-links a:hover{color:var(--dark);border-bottom-color:var(--accent)}
.site-foot a:focus-visible{outline:2px solid #8a6420;outline-offset:4px}
.foot-note{font-size:13px;line-height:1.7;color:#4a5c58;max-width:62ch;margin:0}

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

@media (max-width:980px){
  :root{--step:56px;--gap:20px}
  .hero .title-col,.hero .intro-col{grid-column:1 / 13}
  .hero .intro-col{padding-top:0}
  .axis{margin-bottom:46px}
  .figure-main .img-col,.figure-main figcaption{grid-column:1 / 13}
  .figure-main figcaption{margin-top:12px;order:2}
  .sec h2,.sec .body,
  .detail-sec h2,.detail-sec .body,.detail-sec .fig,.detail-sec .body-2,
  .doc h2,.doc .body,
  .page-head h1,.page-head .sub{grid-column:1 / 13}
  .marker{grid-column:1 / 13;margin:0 0 14px}
  .sec h2,.doc h2,.detail-sec h2{margin-bottom:22px;padding-top:0}
  .detail-sec .fig,.detail-sec .body-2{margin-top:28px}
  .about-two{grid-template-columns:1fr}
  .about-two .rule{display:none}
  .about-two h2{grid-column:1;padding-bottom:18px}
  .about-two .t{grid-column:1;padding-bottom:40px}
}

@media (max-width:620px){
  :root{--step:48px}
  body{font-size:16px}
  .wrap{padding:0 20px}
  .site-nav ul{gap:16px}
  .site-nav a{font-size:12px}
  .head-row{flex-direction:column;align-items:flex-start;gap:14px}
  .foot-top{flex-direction:column;align-items:flex-start}
  .foot-links{flex-direction:column;gap:12px}
}