/* Brardarvolo — folha de estilo comum */

:root {
  --bg: #f0eee4;
  --bg-alt: #e2dfd2;
  --bg-dark: #22281e;
  --ink: #1e1f19;
  --ink-soft: #6f6d60;
  --ink-light: #f0eee4;
  --accent: #4a6b2c;
  --accent-2: #9a6a24;
  --serif: Georgia, "Times New Roman", serif;
  --sans: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --gap: 32px;
}

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.9;
  overflow-wrap: break-word;
}

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

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

a:hover { text-decoration-thickness: 2px; }

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

.saltar {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--bg-alt);
  color: var(--ink);
  padding: 12px 20px;
  font-size: 15px;
  z-index: 10;
}

.saltar:focus {
  left: 16px;
  top: 16px;
}

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

.wrap {
  width: min(100% - 48px, 1160px);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gap);
}

.texto { grid-column: 4 / span 6; }
.lista { grid-column: 4 / span 7; }
.figura-principal { grid-column: 3 / span 8; }

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

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

h1 {
  font-size: clamp(30px, 4.2vw, 45px);
}

h2 {
  font-size: clamp(24px, 2.7vw, 31px);
  margin-bottom: 30px;
}

h3 {
  font-size: 21px;
  margin-top: 46px;
  margin-bottom: 14px;
}

p { margin: 0 0 30px; }

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

.subtitulo {
  color: var(--ink-soft);
  margin: 26px 0 0;
  max-width: 62ch;
}

.numero {
  display: block;
  font-size: 14px;
  letter-spacing: 0.1em;
  color: var(--accent-2);
  margin-bottom: 16px;
}

.marcas {
  list-style: none;
  padding: 0;
  margin: 0 0 30px;
}

.marcas li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 14px;
}

.marcas li::before {
  content: "—";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--accent);
}

.passos {
  padding-left: 26px;
  margin: 0 0 30px;
}

.passos li {
  margin-bottom: 14px;
  padding-left: 8px;
}

.passos li::marker { color: var(--accent-2); }

figcaption {
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink-soft);
  margin-top: 22px;
}

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

.nav-linha {
  display: flex;
  padding: 0 24px;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 42px;
  list-style: none;
  margin: 0;
  font-size: 14px;
  letter-spacing: 0.05em;
}

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

.nav-linha a:hover,
.nav-linha a:focus-visible { color: var(--accent); }

.hero {
  min-height: 92vh;
  display: flex;
  flex-direction: column;
  padding-top: 40px;
}

.hero-titulo {
  margin-top: auto;
  padding-bottom: 13vh;
  text-align: center;
}

.cabecalho-pagina {
  padding-top: 40px;
  padding-bottom: 104px;
}

.cabecalho-pagina .titulo-pagina {
  margin-top: 112px;
  text-align: center;
}

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

.seccao { padding-block: 64px; }

.seccao .wrap > div + div { margin-top: 30px; }

.seccao-alt { background: var(--bg-alt); }

.seccao-escura {
  background: var(--bg-dark);
  color: var(--ink-light);
  padding-block: 104px;
}

.seccao-escura h2 { color: var(--ink-light); }

.seccao-escura .numero { color: #c79a4e; }

.seccao-escura figcaption { color: #b6b6a4; }

.seccao-escura .marcas li::before { color: #9fbe78; }

.seccao-escura a { color: #b3cf8b; }

.figura-topo {
  padding-block: 96px 112px;
}

.figura-topo figure { margin: 0; }

.figura-topo figcaption { text-align: center; }

/* imagem de pormenor dentro da secção escura */

.bloco-pormenor {
  align-items: center;
  row-gap: 56px;
}

.bloco-pormenor figure {
  grid-column: 2 / span 4;
  margin: 0;
}

.bloco-pormenor .pormenor-texto {
  grid-column: 7 / span 5;
}

/* ---------- página "sobre" e páginas legais ---------- */

.coluna-unica { grid-column: 4 / span 6; }

.entrada {
  font-size: 21px;
  line-height: 1.8;
}

.traco {
  display: block;
  text-align: center;
  color: var(--accent-2);
  margin: 0;
  padding-block: 18px;
}

.bloco-texto + .bloco-texto { margin-top: 0; }

.seccao-texto { padding-block: 44px; }

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

.rodape {
  background: var(--bg-alt);
  padding-block: 120px;
  margin-top: 64px;
}

.rodape-col {
  grid-column: 3 / span 8;
  text-align: center;
}

.rodape-nome {
  font-family: var(--serif);
  font-size: 22px;
  margin-bottom: 36px;
}

.rodape .nav-linha { margin-bottom: 36px; }

.rodape-email { margin-bottom: 24px; }

.rodape-nota {
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: 58ch;
  margin-inline: auto;
}

/* ---------- ecrãs médios ---------- */

@media (max-width: 1000px) {
  .texto { grid-column: 3 / span 8; }
  .lista { grid-column: 3 / span 8; }
  .figura-principal { grid-column: 2 / span 10; }
  .coluna-unica { grid-column: 3 / span 8; }
  .rodape-col { grid-column: 2 / span 10; }
  .bloco-pormenor figure { grid-column: 1 / span 5; }
  .bloco-pormenor .pormenor-texto { grid-column: 7 / span 6; }
}

/* ---------- ecrãs estreitos ---------- */

@media (max-width: 760px) {
  body { font-size: 17px; }

  .wrap {
    width: min(100% - 40px, 620px);
    grid-template-columns: 1fr;
  }

  .texto,
  .lista,
  .figura-principal,
  .coluna-unica,
  .rodape-col,
  .bloco-pormenor figure,
  .bloco-pormenor .pormenor-texto {
    grid-column: 1;
  }

  .hero {
    min-height: 82vh;
    padding-top: 28px;
  }

  .hero-titulo { padding-bottom: 8vh; }

  .nav-linha { gap: 12px 26px; }

  .seccao { padding-block: 36px; }

  .seccao-escura { padding-block: 64px; }

  .figura-topo { padding-block: 64px 72px; }

  .cabecalho-pagina { padding-bottom: 64px; }

  .cabecalho-pagina .titulo-pagina { margin-top: 64px; }

  .bloco-pormenor { row-gap: 40px; }

  .rodape {
    padding-block: 72px;
    margin-top: 36px;
  }
}