/* Carpinglória: protótipo estático, com a marca do manual (manual/index.html, cap. 3, 4 e 7).
   Letra: títulos em Montserrat 700; texto, botões e rótulos em Ubuntu Sans 400/700.
   Cor: preto lápis, nogueira, carvalho, carvalho claro, branco papel (e o papel natural nos marcadores de foto).
   Regras medidas: espaçamento só em múltiplos de 4/8 px; 2 pesos por família; 4 tamanhos de letra.
   O veio é decorativo, em SVG de fundo por zona (pasta veio/), nunca por baixo de texto. */

@font-face {
  font-family: "Montserrat";
  src: url("fontes/montserrat-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Ubuntu Sans";
  src: url("fontes/ubuntu-sans-var.woff2") format("woff2");
  font-weight: 400 700;
  font-stretch: 75% 100%;
  font-display: swap;
}

:root {
  /* cor (manual, cap. 3) */
  --tinta: #1a1714;      /* preto lápis: texto, fundos escuros */
  --nogueira: #3d2a1c;   /* rodapé, botão principal ao passar */
  --carvalho: #8a5a2b;   /* rótulos e filetes sobre claro (5,62:1 sobre branco papel) */
  --claro: #c99a62;      /* carvalho claro: só sobre escuro (7,0:1 sobre preto lápis) */
  --papel: #fbfaf7;      /* branco papel: fundo do site */
  --natural: #f3ede4;    /* papel natural: marcadores de fotografia */
  --texto2: #4a433b;     /* texto secundário (9,3:1 sobre branco papel) */

  /* espaçamento: escala 4/8 */
  --e1: 4px;  --e2: 8px;  --e3: 16px; --e4: 24px;
  --e5: 32px; --e6: 48px; --e7: 64px; --e8: 96px;

  /* tipografia: 4 tamanhos (hierarquia web do manual) */
  --t-rotulo: 14px;      /* rótulos, legendas, rodapé */
  --t-corpo: 16px;       /* texto */
  --t-sub: 24px;         /* subtítulo */
  --t-titulo: 40px;      /* título (32 px no telemóvel: cada largura vê só 4 tamanhos) */

  --titulos: "Montserrat", "Arial", sans-serif;
  --texto: "Ubuntu Sans", system-ui, sans-serif;
  --largura: 1184px;
}
@media (max-width: 719px) { :root { --t-titulo: 32px; } }

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: var(--t-corpo);
  font-weight: 400;
  line-height: 1.5;
}

h1, h2, h3 {
  margin: 0;
  font-family: var(--titulos);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }

a { color: inherit; text-underline-offset: 4px; text-decoration-thickness: 2px; }
a:hover { color: var(--carvalho); }
:focus-visible { outline: 4px solid var(--carvalho); outline-offset: 4px; }
.escuro :focus-visible, .rodape :focus-visible { outline-color: var(--claro); }

.salto {
  position: absolute; left: var(--e3); top: -64px; z-index: 2;
  padding: var(--e2) var(--e3); background: var(--tinta); color: var(--papel);
}
.salto:focus { top: var(--e3); }

.contentor { max-width: var(--largura); margin: 0 auto; padding: 0 var(--e3); }
@media (min-width: 720px) { .contentor { padding: 0 var(--e5); } }

/* faixa de protótipo */
.prototipo {
  background: var(--tinta); color: var(--papel);
  font-size: var(--t-rotulo); padding: var(--e2) 0;
}

/* ---------- rótulo: 14 px, 700, maiúsculas, +0,08 em ---------- */
.rotulo, .cota, .foto figcaption, .contacto-oficina h3 {
  font-family: var(--texto); font-size: var(--t-rotulo); font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
}

/* ---------- cabeçalho ---------- */
.cabecalho { border-bottom: 2px solid var(--tinta); }
.cabecalho .contentor {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--e3); padding-top: var(--e3); padding-bottom: var(--e3);
}
.marca { display: block; }
.marca img { height: 56px; width: auto; }   /* mínimo do logotipo horizontal em ecrã (normas) */
.nav { display: flex; flex-wrap: wrap; gap: var(--e2) var(--e4); font-weight: 700; }
.nav a { text-decoration: none; padding: var(--e2) 0; display: inline-block; }
.nav a:hover { text-decoration: underline; }
@media (max-width: 719px) {
  .nav { order: 3; width: 100%; border-top: 1px solid var(--tinta); padding-top: var(--e2);
    display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--e4); }
}

.botao {
  display: inline-flex; align-items: center; gap: var(--e2);
  min-height: 48px; padding: var(--e3) var(--e4);
  background: var(--tinta); color: var(--papel);
  font-weight: 700; text-decoration: none; line-height: 1;
  border: 2px solid var(--tinta);
}
.botao:hover { background: var(--nogueira); border-color: var(--nogueira); color: var(--papel); }
.botao--linha { background: var(--papel); color: var(--tinta); }
.botao--linha:hover { background: var(--tinta); border-color: var(--tinta); color: var(--papel); }
.cabecalho .botao { padding: var(--e2) var(--e3); }

/* ---------- cota (linha de medida de desenho técnico) ---------- */
.cota { display: flex; align-items: center; gap: var(--e2); color: var(--carvalho); }
.cota::before, .cota::after {
  content: ""; flex: 1; height: 16px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-4px); /* linha de cota com traço de chamada */
}
.cota::after { border-left: 0; border-right: 2px solid currentColor; }
.cota--esq::before { flex: 0 0 24px; }

/* ---------- capa ---------- */
.capa { padding: var(--e6) 0 var(--e7); }
.capa .contentor { display: grid; gap: var(--e5); }
.capa .texto { display: grid; gap: var(--e4); }
.capa h1 { font-size: var(--t-titulo); max-width: 15ch; }
.capa .lead { font-size: var(--t-sub); line-height: 1.4; color: var(--texto2); max-width: 30ch; }
.capa .accoes { display: flex; flex-wrap: wrap; gap: var(--e3); }
@media (min-width: 960px) {
  .capa { padding: var(--e8) 0; }
  .capa .contentor { grid-template-columns: 5fr 6fr; align-items: end; gap: var(--e6); }
  .capa .texto { gap: var(--e5); }
}

/* ---------- marcador de fotografia ---------- */
.foto {
  position: relative; margin: 0;
  background: var(--natural);
  aspect-ratio: 4 / 3;
  display: flex; align-items: flex-end;
  padding: var(--e3);
}
/* marcas de corte nos cantos, como num desenho para a oficina */
.foto::before, .foto::after {
  content: ""; position: absolute; width: 24px; height: 24px;
  border: 0 solid var(--tinta);
}
.foto::before { top: var(--e2); left: var(--e2); border-top-width: 2px; border-left-width: 2px; }
.foto::after { bottom: var(--e2); right: var(--e2); border-bottom-width: 2px; border-right-width: 2px; }
.foto figcaption { color: var(--tinta); background: var(--papel); padding: var(--e1) var(--e2); }
.foto--larga { aspect-ratio: 16 / 9; }

/* ---------- secções ---------- */
.seccao { padding: var(--e7) 0; border-top: 2px solid var(--tinta); }
@media (min-width: 960px) { .seccao { padding: var(--e8) 0; } }
.seccao h2 { font-size: var(--t-titulo); margin: var(--e3) 0 var(--e5); max-width: 20ch; }
.nota { font-size: var(--t-rotulo); color: var(--texto2); margin-top: var(--e5); }

/* serviços como lista de corte (não cartões) */
.corte { border-top: 2px solid var(--tinta); }
.corte li {
  display: grid; gap: var(--e2);
  padding: var(--e4) 0; border-bottom: 1px solid var(--tinta);
}
.corte h3 { font-size: var(--t-sub); }
.corte p { color: var(--texto2); max-width: 56ch; }
.servicos-accao { display: flex; flex-wrap: wrap; gap: var(--e3); margin-top: var(--e5); }
@media (min-width: 720px) {
  .corte li { grid-template-columns: 2fr 3fr; align-items: baseline; gap: var(--e5); }
}

/* como trabalhamos: passos ao longo de uma linha de cota */
.passos { display: grid; position: relative; }
.passos li {
  position: relative; padding: 0 0 var(--e5) var(--e5);
  border-left: 2px solid var(--carvalho);
}
.passos li:last-child { padding-bottom: 0; }
.passos li::before {
  content: ""; position: absolute; left: -9px; top: 4px;
  width: 16px; height: 16px; background: var(--papel); border: 2px solid var(--carvalho);
}
.passos h3 { font-size: var(--t-sub); margin-bottom: var(--e2); }
.passos p { color: var(--texto2); max-width: 36ch; }
@media (min-width: 960px) {
  .passos { grid-template-columns: repeat(4, 1fr); }
  .passos li { border-left: 0; border-top: 2px solid var(--carvalho); padding: var(--e5) var(--e4) 0 0; }
  .passos li::before { left: 0; top: -9px; }
}

/* galeria: mosaico irregular, pousado na bancada (o veio sobe por trás) */
.galeria { display: grid; gap: var(--e3); }
.galeria .foto { aspect-ratio: 16 / 9; }
@media (min-width: 720px) {
  .galeria { grid-template-columns: repeat(6, 1fr); gap: var(--e4); }
  .galeria .g1 { grid-column: span 4; }
  .galeria .g2, .galeria .g3, .galeria .g4, .galeria .g5 { grid-column: span 2; }
  .galeria .foto { aspect-ratio: auto; min-height: 240px; height: 100%; }
  .galeria .g1 .foto, .galeria .g2 .foto { min-height: 384px; }
}

/* ---------- contacto (secção escura) ---------- */
.escuro { background: var(--tinta); color: var(--papel); border-top: 0; }
.escuro .cota { color: var(--claro); }
.escuro a:hover { color: var(--claro); }
.contacto-grelha { display: grid; gap: var(--e6); }
.contacto-lead { font-size: var(--t-sub); line-height: 1.4; max-width: 30ch; margin: 0 0 var(--e5); }
.contacto-botoes { display: flex; flex-wrap: wrap; gap: var(--e3); }
.escuro .botao--claro { background: var(--claro); border-color: var(--claro); color: var(--tinta); }
.escuro .botao--claro:hover { background: var(--papel); border-color: var(--papel); color: var(--tinta); }
.escuro .botao--contorno { background: var(--tinta); border-color: var(--papel); color: var(--papel); }
.escuro .botao--contorno:hover { background: var(--papel); color: var(--tinta); }
.contacto-oficina h3 { color: var(--claro); margin: 0 0 var(--e2); }
.contacto-oficina .morada { font-style: normal; font-size: var(--t-sub); line-height: 1.4; margin-bottom: var(--e4); }
.contacto-outro { margin: var(--e4) 0 0; }
.contacto-outro a { text-decoration: underline; }
.aviso-contactos { font-size: var(--t-rotulo); grid-column: 1 / -1; }
@media (min-width: 960px) {
  .contacto-grelha { grid-template-columns: 3fr 2fr; gap: var(--e7); }
}

/* ---------- rodapé ---------- */
.rodape { background: var(--nogueira); color: var(--papel); font-size: var(--t-rotulo); padding: var(--e4) 0; }
.rodape .contentor { display: flex; flex-wrap: wrap; gap: var(--e2) var(--e4); justify-content: space-between; }
.rodape a:hover { color: var(--claro); }

/* ---------- veio esbatido (variante A do manual: aplicacoes/site-veio/) ----------
   Retícula de linhas, um SVG por zona e por largura, gerado à medida das caixas de texto
   (reserva = caixa + 32 px, 24 px no telemóvel). Só um conjunto é descarregado (media queries).
   Decorativo: aria-hidden, sem eventos, sem animação, desligado na impressão. */
.com-veio { position: relative; isolation: isolate; overflow: hidden; }
.com-veio > .contentor { position: relative; z-index: 1; }
.veio { position: absolute; inset: 0; z-index: 0; pointer-events: none; background-repeat: no-repeat; }
.veio-faixa { height: 32px; border-top: 2px solid var(--tinta); background-repeat: no-repeat; }
.sem-traco { border-top: 0; }
@media print { .veio, .veio-faixa { background: none !important; } }
/* Telemóvel: o texto ocupa a largura toda, por isso o veio ganha uma faixa própria de 96 px
   por baixo da fotografia da capa e no fim do contacto. Nunca dois veios seguidos:
   a faixa da capa já faz de separador, por isso o primeiro separador fica só com o traço. */
@media (max-width: 719px) {
  .capa.com-veio, .escuro.com-veio { padding-bottom: var(--e8); }
  .veio-faixa { height: 24px; }
  .veio-faixa[data-zona="faixa1"] { height: 0; }
}

/* Um conjunto por gama de largura; cada SVG foi gerado na largura em que a reserva é mais apertada:
   - capa e contacto (veio num canto): gerados na largura MÍNIMA da gama e presos ao canto, em tamanho
     natural; ao alargar, o texto afasta-se do canto, nunca se aproxima;
   - galeria (veio a toda a largura): gerada na largura MÁXIMA da gama e presa à esquerda (até 1183 px,
     onde o texto está colado à margem esquerda) ou ao centro (a partir de 1184 px, onde o contentor
     deixa de crescer e o texto fica sempre no mesmo sítio em relação ao centro);
   - separadores: sem texto, esticam à largura;
   - telemóvel: tudo à escala da largura (conjuntos de 393 e 600 px), preso ao fundo de cada zona;
     a galeria fica sem veio (com as fotografias empilhadas só sobravam lascas de 16 px nas margens). */
.veio-faixa { background-size: cover; background-position: center; }
@media (max-width: 719px) {
  .veio { background-size: 100% auto; background-position: center bottom; }
  [data-zona="capa"] { background-image: url("veio/veio-393-capa.svg"); }
  [data-zona="faixa2"] { background-image: url("veio/veio-393-faixa2.svg"); }
  /* contacto: faixa de 80 px gerada a 719 px, em tamanho natural, presa ao canto inferior direito;
     cabe nos 96 px de padding-bottom, 16 px abaixo do último texto, em qualquer largura 320-719 */
  [data-zona="contacto"] { background-image: url("veio/veio-393-contacto.svg"); background-size: 719px 80px; background-position: right bottom; }
}
@media (min-width: 500px) and (max-width: 719px) {
  [data-zona="capa"] { background-image: url("veio/veio-600-capa.svg"); }
  [data-zona="faixa2"] { background-image: url("veio/veio-600-faixa2.svg"); }
}
@media (min-width: 720px) {
  [data-zona="capa"] { background-position: right top; }
  [data-zona="contacto"] { background-position: right bottom; }
  [data-zona="galeria"] { background-position: left bottom; }
  [data-zona="faixa1"] { background-image: url("veio/veio-720-faixa1.svg"); }
  [data-zona="faixa2"] { background-image: url("veio/veio-720-faixa2.svg"); }
}
@media (min-width: 720px) and (max-width: 959px) {
  [data-zona="capa"] { background-image: url("veio/veio-720-capa.svg"); }
  [data-zona="contacto"] { background-image: url("veio/veio-720-contacto.svg"); }
  [data-zona="galeria"] { background-image: url("veio/veio-959-galeria.svg"); }
}
@media (min-width: 960px) and (max-width: 1183px) {
  [data-zona="capa"] { background-image: url("veio/veio-960-capa.svg"); }
  [data-zona="contacto"] { background-image: url("veio/veio-960-contacto.svg"); }
  [data-zona="galeria"] { background-image: url("veio/veio-1183-galeria.svg"); }
}
@media (min-width: 1184px) {
  [data-zona="galeria"] { background-image: url("veio/veio-2560-galeria.svg"); background-position: center bottom; }
  [data-zona="faixa1"] { background-image: url("veio/veio-1440-faixa1.svg"); }
  [data-zona="faixa2"] { background-image: url("veio/veio-1440-faixa2.svg"); }
}
@media (min-width: 1184px) and (max-width: 1439px) {
  [data-zona="capa"] { background-image: url("veio/veio-1184-capa.svg"); }
  [data-zona="contacto"] { background-image: url("veio/veio-1184-contacto.svg"); }
}
@media (min-width: 1440px) {
  [data-zona="capa"] { background-image: url("veio/veio-1440-capa.svg"); }
  [data-zona="contacto"] { background-image: url("veio/veio-1440-contacto.svg"); }
}

/* fotografias reais (provisórias até chegarem as definitivas): enchem a moldura, marcas de corte em papel */
.foto.tem-foto { padding: 0; overflow: hidden; background: var(--tinta); }
.foto.tem-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.foto.tem-foto::before, .foto.tem-foto::after { z-index: 1; border-color: var(--papel); }