/* Pekurdi — folha de estilo comum */

:root{
  --paper:#f7f2e9;
  --paper-alt:#ebe3d5;
  --dark:#2a1d16;
  --ink:#241c14;
  --ink-soft:#7a6b5c;
  --acc:#7a4526;
  --acc2:#3f7a6a;
  --serif:Georgia,'Times New Roman',serif;
  --sans:system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --gap:24px;
}

*{box-sizing:border-box;}

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

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.8;
  overflow-x:hidden;
}

/* ---------- grelha ---------- */

.wrap{
  max-width:1200px;
  margin:0 auto;
  padding-left:clamp(20px,5vw,64px);
  padding-right:clamp(20px,5vw,64px);
  display:grid;
  grid-template-columns:repeat(12,1fr);
  column-gap:var(--gap);
}

.wrap > *{min-width:0;}

.c6{grid-column:1 / span 6;}
.c7{grid-column:1 / span 7;}
.c8{grid-column:2 / span 8;}
.c9{grid-column:1 / span 9;}
.c12{grid-column:1 / -1;}

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

.s-a{padding:72px 0;}
.s-b{padding:88px 0;}
.s-c{padding:104px 0;}

.tone{background:var(--paper-alt);}

.contrast{
  background:var(--dark);
  color:var(--paper);
}

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

h1,h2,h3{
  font-family:var(--serif);
  font-weight:400;
  line-height:1.05;
  margin:0;
  letter-spacing:-0.01em;
}

h1{font-size:clamp(2.15rem,5.2vw,3.5rem);}
h2{font-size:clamp(1.5rem,2.9vw,2.05rem);margin-bottom:22px;}
h3{font-size:1.18rem;line-height:1.2;margin:34px 0 10px;}

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

.lead{font-size:1.09rem;color:var(--ink);}

.cap,.num,figcaption{
  font-size:13px;
  line-height:1.6;
  color:var(--ink-soft);
  font-family:var(--sans);
}

.num{
  color:var(--acc2);
  display:block;
  margin-bottom:10px;
  letter-spacing:0.02em;
}

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

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

.contrast a{color:#e5c9b5;}
.contrast .num{color:#8fc4b5;}
.contrast .cap,
.contrast figcaption{color:#c4b2a2;}
.contrast :focus-visible{outline-color:#e5c9b5;}

/* ---------- separador duplo ---------- */

.rule{
  grid-column:1 / -1;
  margin:0 0 30px;
  border:0;
  height:auto;
}
.rule::before{
  content:"";
  display:block;
  height:1px;
  background:rgba(36,28,20,.28);
}
.rule::after{
  content:"";
  display:block;
  width:16%;
  min-width:120px;
  height:3px;
  margin-top:7px;
  background:var(--acc);
}
.contrast .rule::before{background:rgba(247,242,233,.3);}
.contrast .rule::after{background:#c98b5f;}

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

.site-head{border-bottom:1px solid rgba(36,28,20,.18);}

.site-head .wrap{
  padding-top:22px;
  padding-bottom:22px;
  align-items:baseline;
  row-gap:12px;
}

.brand{
  grid-column:1 / span 4;
  font-family:var(--serif);
  font-size:1.35rem;
  letter-spacing:.02em;
  color:var(--ink);
  text-decoration:none;
}
.brand:hover{text-decoration:none;color:var(--acc);}

.site-nav{grid-column:5 / -1;}

.site-nav ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:8px 22px;
  justify-content:flex-end;
}

.site-nav a{
  color:var(--ink);
  text-decoration:none;
  font-size:15px;
  padding-bottom:3px;
  border-bottom:1px solid transparent;
}
.site-nav a:hover{border-bottom-color:var(--acc);color:var(--acc);}
.site-nav a[aria-current="page"]{border-bottom-color:var(--acc);color:var(--acc);}

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

.hero .wrap{padding-top:78px;padding-bottom:86px;row-gap:0;}

.dimv{
  grid-column:1;
  grid-row:1 / span 4;
  position:relative;
  border-left:1px solid var(--acc);
  margin-right:6px;
}
.dimv::before,
.dimv::after{
  content:"";
  position:absolute;
  left:-7px;
  width:15px;
  height:1px;
  background:var(--acc);
}
.dimv::before{top:0;}
.dimv::after{bottom:0;}

.hero h1{
  grid-column:2 / span 8;
  grid-row:1;
}
.hero h1 .l2{
  display:block;
  margin-left:12.5%;
}

.dimh{
  grid-column:2 / span 8;
  grid-row:2;
  display:flex;
  align-items:center;
  gap:12px;
  margin:34px 0 30px;
}
.dimh .seg{flex:1;height:1px;background:rgba(36,28,20,.35);}
.dimh .arw{
  width:7px;
  height:9px;
  background:var(--acc);
  flex:none;
}
.dimh .arw.l{clip-path:polygon(0 50%,100% 0,100% 100%);}
.dimh .arw.r{clip-path:polygon(100% 50%,0 0,0 100%);}
.dimh .lbl{
  flex:none;
  font-size:13px;
  color:var(--ink-soft);
  white-space:nowrap;
}

.hero .intro{
  grid-column:2 / span 6;
  grid-row:3;
}

/* ---------- figura principal + chamada ---------- */

.figblock{padding-bottom:12px;}

.figblock .main-fig{
  grid-column:1 / span 7;
  margin:0;
}
.figblock img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:5 / 4;
  object-fit:cover;
}

.callout{
  grid-column:9 / span 4;
  align-self:center;
  position:relative;
  padding-left:4px;
}
.callout::before{
  content:"";
  position:absolute;
  left:-38px;
  top:11px;
  width:38px;
  height:1px;
  background:var(--acc2);
}

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

ul.check,
ol.steps{
  margin:0 0 20px;
  padding-left:0;
  list-style:none;
}
ul.check li,
ol.steps li{
  position:relative;
  padding-left:26px;
  margin-bottom:11px;
}
ul.check li::before{
  content:"";
  position:absolute;
  left:0;
  top:13px;
  width:11px;
  height:1px;
  background:var(--acc);
}
ol.steps{counter-reset:st;}
ol.steps li{counter-increment:st;padding-left:34px;}
ol.steps li::before{
  content:counter(st,decimal-leading-zero);
  position:absolute;
  left:0;
  top:0;
  font-size:13px;
  color:var(--acc2);
}
.contrast ul.check li::before{background:#c98b5f;}

dl.terms{margin:0;}
dl.terms dt{
  font-family:var(--serif);
  font-size:1.05rem;
  margin-top:20px;
}
dl.terms dd{margin:4px 0 0;}

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

.contrast .detail-fig{
  grid-column:8 / span 5;
  margin:0;
}
.contrast .detail-fig img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:4 / 5;
  object-fit:cover;
}
.contrast .detail-fig figcaption{margin-top:12px;}
.contrast .detail-text{grid-column:1 / span 6;}

/* ---------- páginas com carril (Sobre, legais) ---------- */

.rail{
  grid-column:1 / span 9;
  position:relative;
  padding-left:30px;
  border-left:1px solid rgba(36,28,20,.3);
}
.rail h2{position:relative;margin-top:44px;}
.rail h2:first-of-type{margin-top:0;}
.rail h2::before{
  content:"";
  position:absolute;
  left:-31px;
  top:.62em;
  width:19px;
  height:1px;
  background:var(--acc);
}
.rail p,
.rail ul,
.rail ol,
.rail dl{max-width:64ch;}

.page-head .wrap{padding-top:64px;padding-bottom:10px;}
.page-head h1{grid-column:1 / span 9;}
.page-head .cap{grid-column:1 / span 9;margin-top:18px;}

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

.contact-box{grid-column:1 / span 7;}
.mail{
  font-family:var(--serif);
  font-size:1.3rem;
  display:inline-block;
  margin-top:6px;
}

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

.site-foot{
  background:var(--paper-alt);
  border-top:1px solid rgba(36,28,20,.28);
}

.site-foot .wrap{padding-top:7px;padding-bottom:40px;row-gap:34px;}

.foot-mark{
  grid-column:1 / -1;
  height:3px;
  width:16%;
  min-width:120px;
  background:var(--acc);
  margin-bottom:48px;
}

.foot-brand{grid-column:1 / span 5;}
.foot-brand .name{
  font-family:var(--serif);
  font-size:1.9rem;
  line-height:1.1;
  display:block;
  margin-bottom:12px;
}
.foot-brand p{font-size:15px;color:var(--ink-soft);max-width:34ch;}

.foot-col-a{grid-column:7 / span 3;}
.foot-col-b{grid-column:10 / span 3;}

.foot-col-a h2,
.foot-col-b h2{
  font-family:var(--sans);
  font-size:13px;
  color:var(--ink-soft);
  margin-bottom:14px;
  line-height:1.6;
  letter-spacing:.02em;
}

.foot-col-a ul{list-style:none;margin:0;padding:0;}
.foot-col-a li{margin-bottom:8px;}
.foot-col-a a,
.foot-col-b a{font-size:15px;}

.foot-base{
  grid-column:1 / -1;
  border-top:1px solid rgba(36,28,20,.22);
  padding-top:18px;
  margin-top:8px;
  font-size:13px;
  color:var(--ink-soft);
}

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

@media (max-width:1000px){
  .hero h1{grid-column:2 / span 10;}
  .dimh{grid-column:2 / span 10;}
  .hero .intro{grid-column:2 / span 9;}
  .figblock .main-fig{grid-column:1 / span 8;}
  .callout{grid-column:9 / span 4;}
  .callout::before{left:-26px;width:26px;}
  .c6,.c7{grid-column:1 / span 9;}
  .c8{grid-column:1 / span 10;}
  .contrast .detail-fig{grid-column:8 / span 5;}
  .contrast .detail-text{grid-column:1 / span 7;}
  .foot-brand{grid-column:1 / span 6;}
  .foot-col-a{grid-column:7 / span 3;}
  .foot-col-b{grid-column:10 / span 3;}
}

@media (max-width:720px){
  body{font-size:16px;line-height:1.75;}
  .wrap{column-gap:16px;}
  .s-a{padding:48px 0;}
  .s-b{padding:52px 0;}
  .s-c{padding:56px 0;}
  .hero .wrap{padding-top:44px;padding-bottom:48px;}

  .brand{grid-column:1 / -1;}
  .site-nav{grid-column:1 / -1;}
  .site-nav ul{justify-content:flex-start;gap:8px 18px;}

  .dimv{display:none;}
  .hero h1,
  .dimh,
  .hero .intro,
  .c6,.c7,.c8,.c9,
  .figblock .main-fig,
  .callout,
  .contrast .detail-fig,
  .contrast .detail-text,
  .rail,
  .contact-box,
  .page-head h1,
  .page-head .cap,
  .foot-brand,
  .foot-col-a,
  .foot-col-b{grid-column:1 / -1;}

  .hero h1{grid-row:auto;}
  .hero h1 .l2{margin-left:8%;}
  .dimh{grid-row:auto;margin:26px 0 24px;}
  .dimh .lbl{white-space:normal;}
  .hero .intro{grid-row:auto;}

  .figblock .wrap{row-gap:22px;}
  .callout{padding-left:14px;border-left:1px solid var(--acc2);}
  .callout::before{display:none;}

  .contrast .wrap{row-gap:30px;}
  .contrast .detail-fig{grid-row:1;}

  .rail{padding-left:20px;}
  .rail h2::before{left:-21px;width:13px;}

  .site-foot .wrap{padding-top:7px;row-gap:26px;}
  .foot-mark{margin-bottom:34px;}
  .foot-brand .name{font-size:1.6rem;}
}