/* Siparapo — folha de estilos comum
   Sistema modular "tessera": grelha de 12 colunas, juntas de 4px, sem cantos redondos. */

:root{
  --paper:#f1f2f0;
  --paper-alt:#e3e5e2;
  --dark:#141614;
  --ink:#171917;
  --ink-soft:#6a6e6a;
  --green:#2a6b3c;
  --ochre:#8a6a20;
  --seam:4px;
  --serif:Georgia,'Times New Roman',serif;
  --sans:system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}

*,*::before,*::after{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;
}

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

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

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

.dark a:focus-visible{outline-color:var(--paper)}

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

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

h1{
  font-size:clamp(2.1rem,5.4vw,4rem);
  line-height:1.04;
  hyphens:none;
  word-break:normal;
}

h2{font-size:clamp(1.5rem,2.5vw,2.05rem);line-height:1.15}
h3{font-size:1.12rem;line-height:1.3;letter-spacing:0}

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

.lead{font-size:1.06rem;line-height:1.75}

.cap{
  font-family:var(--sans);
  font-size:12px;
  line-height:1.6;
  color:var(--ink-soft);
  letter-spacing:.06em;
  text-transform:uppercase;
}

.num{
  font-family:var(--serif);
  font-size:12px;
  letter-spacing:.22em;
  color:var(--ochre);
  display:block;
  margin-bottom:14px;
  text-transform:uppercase;
}

.dark .num{color:#c9a54a}
.dark .cap{color:#9aa09a}

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

.wrap{max-width:1180px;margin:0 auto;padding:0 16px}

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

.mod{padding:28px 26px;background:var(--paper)}
.mod--alt{background:var(--paper-alt)}
.mod--flat{padding:0}

.band{padding:72px 0}
.band--tight{padding:48px 0}
.band--alt{background:var(--paper-alt)}
.band--alt .mod{background:var(--paper)}
.band--alt .mod--alt{background:var(--paper-alt)}

.dark{background:var(--dark);color:var(--paper)}
.dark .mod{background:var(--dark);color:var(--paper)}
.dark h2,.dark h3{color:var(--paper)}
.dark a{color:#8fc39c}

/* larguras dos módulos */
.c4{grid-column:span 4}
.c5{grid-column:span 5}
.c6{grid-column:span 6}
.c7{grid-column:span 7}
.c8{grid-column:span 8}
.c12{grid-column:span 12}

/* ladrilhos de cor */
.tile{min-height:72px}
.tile--green{background:var(--green)}
.tile--ochre{background:var(--ochre)}
.tile--dark{background:var(--dark)}
.tile--paper{background:var(--paper-alt)}

/* fila de tesselas separadora */
.rule{
  height:24px;
  background:repeating-linear-gradient(90deg,
    var(--green) 0 24px, transparent 24px 28px,
    var(--paper-alt) 28px 52px, transparent 52px 56px,
    var(--ochre) 56px 80px, transparent 80px 84px,
    var(--dark) 84px 108px, transparent 108px 112px);
}
.rule--dark{
  background:repeating-linear-gradient(90deg,
    var(--green) 0 24px, transparent 24px 28px,
    #2c2f2c 28px 52px, transparent 52px 56px,
    var(--ochre) 56px 80px, transparent 80px 84px,
    var(--paper-alt) 84px 108px, transparent 108px 112px);
}

/* ---------- cabeçalho e navegação ---------- */

.site-head{background:var(--paper-alt);padding:18px 0}
.head-in{display:flex;flex-wrap:wrap;align-items:baseline;gap:14px 28px;justify-content:space-between}

.brand{
  font-family:var(--serif);
  font-size:1.35rem;
  letter-spacing:.02em;
  color:var(--ink);
  text-decoration:none;
}
.brand:hover{text-decoration:underline}
.brand span{color:var(--green)}

.nav ul{list-style:none;display:flex;flex-wrap:wrap;gap:6px 22px;margin:0;padding:0}
.nav a{
  font-size:14px;
  color:var(--ink);
  text-decoration:none;
  padding-bottom:3px;
  border-bottom:2px solid transparent;
}
.nav a:hover{border-bottom-color:var(--green)}
.nav a[aria-current="page"]{border-bottom-color:var(--green);color:var(--green)}

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

.hero{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  grid-auto-rows:minmax(72px,auto);
  gap:var(--seam);
  padding:48px 0 0;
}

.hero__title{grid-column:1/9;grid-row:1/3;background:var(--paper-alt);padding:40px 34px;display:flex;align-items:center}
.hero__t1{grid-column:9/11;grid-row:1;background:var(--green)}
.hero__t2{grid-column:11/13;grid-row:1;background:var(--dark)}
.hero__t3{grid-column:9/11;grid-row:2;background:var(--ochre)}
.hero__t4{grid-column:11/13;grid-row:2;background:var(--paper-alt)}

.hero__side{grid-column:1/3;grid-row:3/6;background:var(--paper-alt);padding:22px 18px;display:flex;align-items:flex-end}
.hero__img{grid-column:3/9;grid-row:3/6;background:var(--dark)}
.hero__img img{width:100%;aspect-ratio:1/1;object-fit:cover}
.hero__lead{grid-column:9/13;grid-row:3/5;background:var(--paper-alt);padding:28px 26px}
.hero__t5{grid-column:9/11;grid-row:5;background:var(--ochre)}
.hero__t6{grid-column:11/13;grid-row:5;background:var(--green)}

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

.detail-fig{grid-column:span 4;margin:0;background:var(--dark)}
.detail-fig img{width:100%;aspect-ratio:4/5;object-fit:cover}
.detail-fig figcaption{padding-top:12px}

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

ul.check,ol.steps{margin:0 0 1.1em;padding-left:0;list-style:none}
ul.check li{position:relative;padding-left:24px;margin-bottom:10px}
ul.check li::before{
  content:"";position:absolute;left:0;top:11px;
  width:10px;height:10px;background:var(--green);
}
.dark ul.check li::before{background:#8fc39c}

ol.steps{counter-reset:st;padding-left:0}
ol.steps li{position:relative;padding-left:34px;margin-bottom:12px;counter-increment:st}
ol.steps li::before{
  content:counter(st,decimal-leading-zero);
  position:absolute;left:0;top:2px;
  font-family:var(--serif);font-size:13px;letter-spacing:.1em;color:var(--ochre);
}
.dark ol.steps li::before{color:#c9a54a}

ul.plain{list-style:none;margin:0;padding:0}
ul.plain li{margin-bottom:8px}

dl.defs{margin:0}
dl.defs dt{font-family:var(--serif);font-size:1.02rem;margin-top:14px}
dl.defs dd{margin:2px 0 0;color:var(--ink);padding-left:0}
dl.defs dt:first-child{margin-top:0}

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

.site-foot{background:var(--paper-alt);margin-top:0;padding:0 0 48px}
.site-foot .rule{margin-bottom:var(--seam)}
.foot-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--seam)}
.foot-grid > div{background:var(--paper);padding:24px 22px}
.foot-grid h2{font-size:1.05rem;margin-bottom:10px}
.foot-grid ul{list-style:none;margin:0;padding:0}
.foot-grid li{margin-bottom:6px;font-size:15px}
.foot-note{font-size:14px;color:var(--ink-soft);line-height:1.7}

/* ---------- tablet ---------- */

@media (max-width:900px){
  .band{padding:56px 0}
  .hero{grid-auto-rows:minmax(56px,auto);padding-top:32px}
  .hero__title{grid-column:1/13;grid-row:1;padding:32px 24px}
  .hero__t1{grid-column:1/7;grid-row:2}
  .hero__t2{grid-column:7/13;grid-row:2}
  .hero__t3,.hero__t4,.hero__t5{display:none}
  .hero__img{grid-column:1/13;grid-row:3}
  .hero__side{grid-column:1/13;grid-row:4;padding:18px 24px}
  .hero__lead{grid-column:1/13;grid-row:5}
  .hero__t6{grid-column:1/13;grid-row:6;min-height:24px}

  .c4,.c5,.c6,.c7,.c8{grid-column:span 6}
  .detail-fig{grid-column:span 6}
  .foot-grid{grid-template-columns:repeat(2,1fr)}
}

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

@media (max-width:620px){
  body{font-size:16px}
  .band{padding:48px 0}
  .band--tight{padding:32px 0}
  .mod{padding:22px 18px}
  .hero__title{padding:26px 18px}
  .c4,.c5,.c6,.c7,.c8,.c12,.detail-fig{grid-column:span 12}
  .tile{min-height:48px}
  .foot-grid{grid-template-columns:1fr}
  .nav ul{gap:4px 16px}
  .rule{height:16px;background-size:auto}
}