/* Base: fontes, cores, tipografia, botões, cabeçalho e rodapé.
   Direção de 12/10/2026: topo escuro com laranja, conteúdo em blocos claros (resposta à pergunta 27). */
@font-face { font-family: "Michroma"; src: url("../fonts/michroma-latin-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Jost"; src: url("../fonts/jost-latin-var.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; }
/* Fontes de reserva com as métricas medidas em 12/10/2026 (largura e altura da Jost e da Michroma face à Arial): evitam o salto do texto na troca. */
@font-face { font-family: "Jost Reserva"; src: local("Arial"), local("Roboto"), local("Helvetica Neue"); font-weight: 300 500; size-adjust: 96.3%; ascent-override: 111%; descent-override: 39.5%; line-gap-override: 0%; }
@font-face { font-family: "Jost Reserva"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Roboto Bold"), local("Arial"); font-weight: 600 700; size-adjust: 98.8%; ascent-override: 108%; descent-override: 38.5%; line-gap-override: 0%; }
@font-face { font-family: "Michroma Reserva"; src: local("Arial"), local("Roboto"), local("Helvetica Neue"); size-adjust: 142%; ascent-override: 82%; descent-override: 19%; line-gap-override: 0%; }

:root {
  --laranja: #fd5c03;
  --laranja-claro: #fe9856;
  --laranja-tx: #b84100;
  --escuro: #0e0f10;
  --escuro-2: #17191c;
  --f-texto: "Jost", "Jost Reserva", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --f-larga: "Michroma", "Michroma Reserva", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace;
  --caixa: 76rem;
  --espaco: clamp(4rem, 2.5rem + 6vw, 7.5rem);
  --raio: 6px;
  --raio-p: 3px;
  --sombra: 0 1px 2px rgb(14 15 16 / 0.06), 0 14px 34px -14px rgb(14 15 16 / 0.22);
  /* esquema claro: o padrão do conteúdo */
  --bg: #fff; --bg-2: #f3f3f1; --bg-cartao: #fff; --tinta: #14161a; --tx: #2a2d33; --tx-suave: #555b63; --linha: #dfddd8;
  --destaque: var(--laranja-tx); --foco: #14161a; --pend-tx: #7a2c00; --pend-bg: #fff1e6;
}
.sec--cinza { --bg: #f3f3f1; --bg-2: #fff; }
/* esquema escuro: cabeçalho, topos de página, faixas escuras e rodapé */
.topo, .heroi, .cabeca, .sec--escuro, .rodape, .iso, .galeria__chamada {
  --bg: var(--escuro); --bg-2: var(--escuro-2); --bg-cartao: var(--escuro-2); --tinta: #fff; --tx: #e6e5e1; --tx-suave: #a9adb3; --linha: #2c3036;
  --destaque: var(--laranja-claro); --foco: #fff; --pend-tx: #ffd1b0; --pend-bg: rgb(253 92 3 / 0.12);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 8.5rem; }
body { margin: 0; font-family: var(--f-texto); font-size: 1.0625rem; line-height: 1.6; color: var(--tx); background: var(--bg); overflow-wrap: break-word; }
/* Alemão: palavras compridas hifenizam no celular em vez de sair da caixa */
@media (max-width: 39.99rem) { html:lang(de) { hyphens: auto; hyphenate-limit-chars: 12 5 5; } }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, p, ul, ol, dl, dd, figure, address { margin: 0; }
ul, ol { padding: 0; list-style: none; }
address { font-style: normal; }
a { color: inherit; text-underline-offset: 0.2em; }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 3px; }
.ico { flex: none; width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pular { position: absolute; left: -999rem; top: 0.5rem; z-index: 50; padding: 0.75rem 1rem; background: var(--laranja); color: #111; font-weight: 600; }
.pular:focus { left: 0.5rem; }

.caixa { width: min(100% - 2.5rem, var(--caixa)); margin-inline: auto; }
h1, h2, h3 { text-wrap: balance; color: var(--tinta); font-weight: 700; }
p { text-wrap: pretty; }
h1 { font-size: clamp(2.1rem, 1.3rem + 3.6vw, 3.6rem); line-height: 1.06; letter-spacing: -0.02em; }
h2 { font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.75rem); line-height: 1.1; letter-spacing: -0.015em; }
h3 { font-size: 1.2rem; line-height: 1.25; font-weight: 650; }

/* Rótulo acima dos títulos: a fonte larga do logótipo, em pequeno */
.rotulo { display: flex; align-items: center; gap: 0.75rem; font: 400 0.68rem/1.3 var(--f-larga); letter-spacing: 0.14em; text-transform: uppercase; color: var(--destaque); }
.rotulo::before { content: ""; flex: none; width: 2rem; height: 2px; background: var(--laranja); }

.botao { display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; min-height: 3.25rem; padding: 0.8rem 1.6rem; font: 600 0.92rem/1.2 var(--f-texto); letter-spacing: 0.05em; text-transform: uppercase; text-decoration: none; border: 2px solid transparent; border-radius: var(--raio-p); cursor: pointer; transition: background-color 0.15s, color 0.15s, border-color 0.15s; }
.botao .ico { width: 1.15rem; height: 1.15rem; transition: transform 0.2s; }
.botao:hover .ico--seta { transform: translateX(3px); }
.botao--principal { background: var(--laranja); color: #111; }
.botao--principal:hover { background: var(--laranja-claro); }
.botao--secundario { border-color: currentColor; color: var(--tinta); }
.botao--secundario:hover { background: var(--tinta); color: var(--bg); border-color: var(--tinta); }
.botao--escuro { background: #14161a; color: #fff; }
.botao--escuro:hover { background: #2f333a; }
.botao--contorno { border-color: #14161a; color: #14161a; }
.botao--contorno:hover { background: #14161a; color: #fff; }
/* Os botões do WhatsApp ficam com o verde da marca ao passar o rato ou ao receber o foco */
.botao--whats:hover, .botao--whats:focus-visible { background: #25d366; border-color: #25d366; color: #0e0f10; }
.acoes { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.ligacao { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; font-weight: 600; color: var(--destaque); text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: transparent; transition: text-decoration-color 0.15s; }
.ligacao:hover { text-decoration-color: currentColor; }
.ligacao .ico { width: 1.1rem; height: 1.1rem; transition: transform 0.2s; }
.ligacao:hover .ico { transform: translateX(3px); }
a[href^="tel:"] { white-space: nowrap; }

.pendente { display: inline-block; padding: 0.25rem 0.55rem; font: 500 0.78rem/1.4 var(--mono); color: var(--pend-tx); background: var(--pend-bg); border: 1px dashed var(--laranja); border-radius: 2px; }

/* Cabeçalho: faixa de contacto e idiomas + barra com marca, menu e botão. Fundo sólido, sempre visível. */
.topo { position: sticky; top: 0; z-index: 40; background: var(--escuro); color: #f2f2f2; border-bottom: 1px solid var(--linha); }
.faixa { background: #090a0b; border-bottom: 1px solid var(--linha); font-size: 0.84rem; }
.faixa__in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 2.75rem; }
.faixa__contacto { display: none; align-items: center; gap: 1.5rem; color: #c9cbd0; }
.faixa__contacto a, .faixa__local { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 2.2rem; text-decoration: none; }
.faixa__contacto a:hover { color: #fff; }
.faixa__contacto .ico { width: 0.95rem; height: 0.95rem; color: var(--laranja); }
.faixa__tel, .faixa__local { display: none !important; }
.idiomas { display: flex; gap: 0.25rem; margin-left: auto; }
.idiomas a { display: inline-flex; align-items: center; justify-content: center; min-width: 2.75rem; min-height: 2.75rem; padding-inline: 0.3rem; font-weight: 600; letter-spacing: 0.06em; text-decoration: none; color: #b9bbc0; border-bottom: 2px solid transparent; }
.idiomas a[aria-current] { color: #fff; border-bottom-color: var(--laranja); }
.idiomas a:hover { color: #fff; }
.barra { display: flex; align-items: center; gap: 0.75rem; min-height: 3.75rem; }
.marca img { width: 5.5rem; height: auto; }
.menu { display: none; }
.barra__cta { margin-left: auto; min-height: 2.75rem; padding: 0.5rem 0.9rem; font-size: 0.78rem; }
.menu-movel { position: static; }
.menu-movel summary { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; min-width: 2.75rem; min-height: 2.75rem; padding-inline: 0.5rem; border: 1px solid #3a3e45; border-radius: var(--raio-p); cursor: pointer; list-style: none; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.menu-movel summary::-webkit-details-marker { display: none; }
.menu-movel__icone { width: 1.1rem; height: 0.75rem; border-block: 2px solid currentColor; position: relative; }
.menu-movel__icone::after { content: ""; position: absolute; inset-inline: 0; top: calc(50% - 1px); border-top: 2px solid currentColor; }
.menu-movel__texto { display: none; }
.menu-movel ul { position: absolute; inset-inline: 0; top: 100%; padding: 0.5rem 1.25rem 1.25rem; background: var(--escuro); border-bottom: 1px solid var(--linha); box-shadow: 0 18px 30px rgb(0 0 0 / 0.35); }
.menu-movel li a { display: flex; align-items: center; min-height: 3rem; text-decoration: none; border-bottom: 1px solid var(--linha); font-weight: 500; }
.menu-movel li a[aria-current] { color: var(--laranja-claro); }

@media (min-width: 36rem) {
  .faixa__contacto { display: flex; }
  .menu-movel__texto { display: inline; }
}
@media (min-width: 48rem) { .faixa__tel { display: inline-flex !important; } }
@media (min-width: 68rem) {
  .faixa__local { display: inline-flex !important; }
  .menu-movel { display: none; }
  .menu { display: block; margin-left: auto; }
  .menu ul { display: flex; gap: clamp(0.7rem, 1.5vw, 1.75rem); }
  .menu a { display: inline-flex; align-items: center; min-height: 2.75rem; font-size: 0.95rem; font-weight: 500; text-decoration: none; white-space: nowrap; border-bottom: 2px solid transparent; transition: border-color 0.15s, color 0.15s; }
  .menu a:hover, .menu a[aria-current] { border-bottom-color: var(--laranja); color: #fff; }
  .barra { min-height: 5rem; gap: 1.5rem; }
  .faixa__in { min-height: 2.4rem; }
  .idiomas a { min-width: 2.2rem; min-height: 2.2rem; }
  .barra__cta { margin-left: 0.5rem; font-size: 0.84rem; padding-inline: 1.25rem; }
  .marca img { width: 6.75rem; }
}

/* Rodapé */
.rodape { background: #090a0b; color: #d6d7d9; padding-top: clamp(3rem, 6vw, 5rem); font-size: 0.98rem; }
.rodape__grelha { display: grid; gap: 2.5rem; }
.rodape__marca img { width: 7.5rem; }
.rodape__lema { margin-top: 0.9rem; font: 400 0.66rem/1.4 var(--f-larga); letter-spacing: 0.14em; text-transform: uppercase; color: #fff; }
.rodape__marca p + p { margin-top: 0.4rem; color: #a9adb3; }
.rodape__redes { display: flex; gap: 0.6rem; margin-top: 1.25rem; }
.rodape__redes a { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 1px solid #3a3e45; border-radius: var(--raio-p); transition: background-color 0.15s, color 0.15s, border-color 0.15s; }
/* Ao passar o rato (ou com o foco do teclado), cada ícone fica com a cor da sua rede */
.rodape__redes a:hover, .rodape__redes a:focus-visible { background: var(--rede, var(--laranja)); border-color: var(--rede, var(--laranja)); color: #fff; }
.rodape__redes .rede--instagram { --rede: #e1306c; }
.rodape__redes .rede--linkedin { --rede: #0a66c2; }
.rodape__redes .rede--facebook { --rede: #1877f2; }
.rodape__tit { margin-bottom: 1.1rem; font: 400 0.66rem/1.4 var(--f-larga); letter-spacing: 0.14em; text-transform: uppercase; color: #fff; }
.rodape__nav a { display: inline-flex; align-items: center; min-height: 2.75rem; text-decoration: none; }
.rodape__nav a:hover, .rodape__contacto a:hover, .rodape__legais a:hover { color: var(--laranja-claro); }
.rodape__contacto ul { display: grid; gap: 0.9rem; }
.rodape__contacto li { display: flex; align-items: flex-start; gap: 0.75rem; line-height: 1.55; }
.rodape__contacto .ico { width: 1.1rem; height: 1.1rem; margin-top: 0.25rem; color: var(--laranja); }
.rodape__contacto a { text-decoration: none; }
.rodape__acao p:not(.rodape__tit) { margin-bottom: 1.25rem; color: #a9adb3; }
.rodape__legal { display: grid; gap: 0.4rem; margin-top: clamp(2.5rem, 5vw, 4rem); padding-block: 1.5rem 5.5rem; border-top: 1px solid #2c3036; font-size: 0.86rem; color: #a9adb3; }
.rodape__legais { display: flex; flex-wrap: wrap; gap: 0 1.5rem; }
.rodape__legais a { display: inline-flex; align-items: center; min-height: 2.75rem; }
@media (min-width: 40rem) { .rodape__grelha { grid-template-columns: 1fr 1fr; } }
@media (min-width: 64rem) { .rodape__grelha { grid-template-columns: 1.1fr 0.8fr 1.4fr 1.1fr; gap: 3rem; } }

/* Botão fixo do WhatsApp: pequeno, no canto, sem cobrir conteúdo (o rodapé reserva o espaço) */
.whats-fixo { position: fixed; right: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, env(safe-area-inset-bottom)); z-index: 30; display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: #25d366; color: #0e0f10; box-shadow: 0 6px 20px rgb(0 0 0 / 0.28); transition: transform 0.15s; }
.whats-fixo:hover { transform: scale(1.06); }
.whats-fixo .ico { width: 1.9rem; height: 1.9rem; stroke-width: 1.5; }

/* Aviso de cookies: ao centro, com o fundo escurecido; os dois botões têm o mesmo destaque */
.cookies { width: min(100% - 2rem, 32rem); padding: clamp(1.5rem, 4vw, 2.25rem); color: #2a2d33; background: #fff; border: 0; border-top: 4px solid var(--laranja); border-radius: var(--raio); box-shadow: 0 24px 60px rgb(0 0 0 / 0.35); }
.cookies::backdrop { background: rgb(14 15 16 / 0.72); }
.cookies > div { display: grid; gap: 1rem; }
.cookies__tit { font-size: 1.35rem; font-weight: 700; line-height: 1.2; color: #14161a; }
.cookies__tit:focus { outline: 0; }
.cookies a { color: var(--laranja-tx); font-weight: 600; }
.cookies__botoes { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-top: 0.5rem; }
.cookies :focus-visible { outline-color: #14161a; }
.rodape__cookies { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0; font: inherit; color: inherit; background: none; border: 0; text-decoration: underline; cursor: pointer; }
.rodape__cookies:hover { color: var(--laranja-claro); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* Topos de página, secções e blocos de conteúdo. */

/* Topo da página inicial: fotografia da oficina em fundo (imagem de espera do vídeo), texto à esquerda */
.heroi { position: relative; isolation: isolate; display: grid; align-items: center; min-height: min(88vh, 46rem); padding-block: clamp(3.5rem, 8vw, 6rem) clamp(7rem, 13vw, 10rem); background: var(--escuro); color: var(--tx); overflow: hidden; }
.heroi__fundo { position: absolute; inset: 0; z-index: -2; }
.heroi__fundo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.heroi__video { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.6s; }
.heroi__video.a-tocar { opacity: 1; }
.heroi::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(14 15 16 / 0.7), rgb(14 15 16 / 0.8)); }
.heroi__pausa { position: absolute; right: max(1.25rem, calc((100% - var(--caixa)) / 2)); top: 1.25rem; z-index: 3; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; color: #fff; background: rgb(14 15 16 / 0.7); border: 1px solid rgb(255 255 255 / 0.55); border-radius: 50%; cursor: pointer; }
.heroi__pausa:hover { background: #fff; color: #111; }
.heroi__pausa span { display: block; width: 0.7rem; height: 0.8rem; border-inline: 0.22rem solid currentColor; }
.heroi__pausa[data-estado="parado"] span { width: 0; height: 0; margin-left: 0.2rem; border-block: 0.45rem solid transparent; border-left: 0.75rem solid currentColor; border-right: 0; }
.heroi__in { display: grid; gap: 1.25rem; justify-items: start; }
.heroi__in > * { max-width: 38rem; }
.heroi h1 { max-width: 15ch; font-size: clamp(2.35rem, 1.2rem + 4.8vw, 4.5rem); line-height: 1.03; color: #fff; }
.heroi__resumo { max-width: 36rem; font-size: clamp(1.1rem, 1rem + 0.5vw, 1.3rem); color: #e6e5e1; }
.heroi .acoes { margin-top: 0.75rem; }
.heroi .botao--secundario { color: #fff; }
.heroi .botao--secundario:hover { background: #fff; color: #111; border-color: #fff; }
.heroi__confianca { display: flex; flex-wrap: wrap; gap: 0.6rem 1.75rem; margin-top: 1rem; font-size: 0.97rem; font-weight: 500; color: #e6e5e1; }
.heroi__confianca li { display: flex; align-items: center; gap: 0.5rem; }
.heroi__confianca .ico { width: 1.15rem; height: 1.15rem; color: var(--laranja); }
.heroi__nota { max-width: 34rem; font-size: 0.88rem; color: #a9adb3; }
@media (min-width: 60rem) {
  .heroi { --ini: max(1.25rem, calc((100% - var(--caixa)) / 2)); }
  .heroi::before { background: linear-gradient(90deg, rgb(14 15 16 / 0.94) 0, rgb(14 15 16 / 0.84) calc(var(--ini) + 40rem), rgb(14 15 16 / 0.28) calc(var(--ini) + 60rem), rgb(14 15 16 / 0.2) 100%); }
  .heroi__fundo img { object-position: 60% 35%; }
}

/* Números da empresa: cartão claro que sobe para cima do topo */
.factos { position: relative; z-index: 2; margin-top: clamp(-5.5rem, -9vw, -4rem); }
.factos__lista { display: grid; grid-template-columns: repeat(2, 1fr); background: #fff; border-top: 4px solid var(--laranja); border-radius: var(--raio); box-shadow: var(--sombra); overflow: hidden; }
.factos__lista > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 0.5rem; padding: 1.35rem 1rem 1.4rem; border-right: 1px solid var(--linha); border-bottom: 1px solid var(--linha); }
.factos__lista > div:last-child { grid-column: 1 / -1; }
/* o número não quebra de linha: o tamanho acompanha a largura para caber o valor mais comprido («3 countries», em inglês) */
.factos__lista dd { font: 400 clamp(0.95rem, min(5.1vw, 0.95rem + 1.7vw), 2rem)/1.05 var(--f-larga); color: #14161a; white-space: nowrap; }
.factos__lista dt { font-size: 0.92rem; line-height: 1.4; color: #555b63; }
@media (min-width: 64rem) {
  .factos__lista { grid-template-columns: repeat(5, 1fr); }
  .factos__lista > div { padding: 1.75rem 1.5rem; border-bottom: 0; }
  .factos__lista dd { font-size: clamp(1.35rem, 0.6rem + 1.75vw, 2rem); }
  .factos__lista > div:last-child { grid-column: auto; border-right: 0; }
}

/* Topo das páginas interiores */
.cabeca { position: relative; isolation: isolate; padding-block: clamp(1.75rem, 4vw, 2.75rem) clamp(2.75rem, 6vw, 4.5rem); background: var(--escuro); color: var(--tx); border-bottom: 4px solid var(--laranja); }
.cabeca::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgb(255 255 255 / 0.06) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / 0.06) 1px, transparent 1px); background-size: 3.5rem 3.5rem; -webkit-mask-image: linear-gradient(90deg, transparent 35%, #000); mask-image: linear-gradient(90deg, transparent 35%, #000); }
.cabeca .caixa { display: grid; gap: 1rem; justify-items: start; }
.cabeca h1 { max-width: 22ch; color: #fff; }
.cabeca__entrada { max-width: 44rem; font-size: clamp(1.08rem, 1rem + 0.4vw, 1.25rem); color: #c9cbd0; }
.trilha { margin-bottom: clamp(0.75rem, 3vw, 2rem); font-size: 0.86rem; color: #a9adb3; }
.trilha ol { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.trilha li + li::before { content: "/"; margin-right: 0.4rem; opacity: 0.6; }
.trilha a { display: inline-flex; align-items: center; min-height: 2.75rem; text-decoration: none; }
.trilha li { display: inline-flex; align-items: center; min-height: 2.75rem; }
.trilha a:hover { color: #fff; text-decoration: underline; }

/* Secções */
.sec { padding-block: var(--espaco); background: var(--bg); color: var(--tx); }
.sec--topo { padding-top: clamp(3.5rem, 6vw, 5.5rem); }
.sec__cab { display: grid; gap: 1rem; max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.sec__intro { font-size: clamp(1.06rem, 1rem + 0.4vw, 1.2rem); color: var(--tx-suave); }
.sec__corpo { display: grid; gap: 1.5rem; justify-items: start; }
.sec__corpo > *, .sec__texto > *, .sec__lado > * { min-width: 0; }
.sec__corpo > :is(.cartoes, .galeria, .fotos, .passos, .tabela-rolo, .ficha__lista, .formulario, .faq, .equipa, .contactos, .lista-marcada),
.sec__texto > :is(.cartoes, .tabela-rolo, .ficha__lista, .formulario, .faq, .equipa, .contactos, .lista-marcada) { width: 100%; justify-self: stretch; }
.sec--estreita .sec__corpo > * { max-width: 46rem; }
.sec__grelha { display: grid; gap: clamp(2.5rem, 5vw, 5rem); align-items: start; }
.sec__texto { display: grid; gap: 1.25rem; justify-items: start; align-content: start; }
.sec__texto .sec__cab { margin-bottom: 0.25rem; }
.sec__lado { display: grid; gap: 1.25rem; align-content: start; }
.sec__lado--painel { padding: clamp(1.5rem, 3vw, 2.25rem); background: var(--bg-2); border: 1px solid var(--linha); border-top: 4px solid var(--laranja); border-radius: var(--raio); }
.nota { font-size: 0.92rem; color: var(--tx-suave); }
.entrada { max-width: 46rem; font-size: 1.15rem; color: var(--tx-suave); }
.atualizado { font: 400 0.82rem/1.4 var(--mono); letter-spacing: 0.04em; color: var(--tx-suave); }
@media (min-width: 60rem) {
  .sec--cab-larga .sec__cab { max-width: none; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); column-gap: 4rem; align-items: end; }
  .sec--cab-larga .sec__cab .rotulo { grid-column: 1 / -1; }
  .sec__grelha { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .sec__grelha:has(> .sec__lado > :is(.moldura, .iso, .equipa)) { align-items: center; }
  .sec--inv .sec__lado { order: -1; }
  .sec--largo .sec__grelha { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); align-items: start; }
  .sec--largo .sec__lado { position: sticky; top: 9.5rem; }
}

/* Cartões */
.cartoes { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.cartao { position: relative; display: grid; gap: 0.6rem; align-content: start; padding: 1.75rem 1.5rem 1.6rem; background: var(--bg-cartao); border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s; }
.cartao::before { content: ""; position: absolute; left: 0; top: 0; width: 3.5rem; height: 3px; background: var(--laranja); transition: width 0.3s; }
.cartao:hover { transform: translateY(-3px); box-shadow: var(--sombra); border-color: transparent; }
.cartao:hover::before { width: 100%; }
.cartao__ico { display: grid; place-items: center; width: 3.1rem; height: 3.1rem; margin-bottom: 0.6rem; background: #14161a; color: var(--laranja-claro); border-radius: var(--raio-p); }
.cartao__ico .ico { width: 1.6rem; height: 1.6rem; stroke-width: 1.5; }
.cartao p { color: var(--tx-suave); }
.cartao__lig { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.75rem; font-weight: 600; color: var(--destaque); text-decoration: none; }
.cartao--foto { padding: 0; gap: 0; }
.cartao--foto::before { z-index: 1; }
.cartao__foto { overflow: hidden; background: var(--bg-2); }
.cartao__foto img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform 0.5s; }
.cartao--foto:hover .cartao__foto img { transform: scale(1.05); }
.cartao__corpo { display: grid; gap: 0.6rem; align-content: start; padding: 1.35rem 1.4rem 1.5rem; }
@media (max-width: 39.99rem) {
  .cartao:not(.cartao--foto) { grid-template-columns: auto 1fr; column-gap: 1rem; padding: 1.35rem 1.15rem 1.25rem; }
  .cartao__ico { grid-row: span 3; margin-bottom: 0; }
  .cartao > :not(.cartao__ico) { grid-column: 2; }
  .cartao:not(:has(.cartao__ico)) > * { grid-column: 1 / -1; }
}
@media (min-width: 40rem) { .cartoes--4, .cartoes--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 60rem) { .cartoes--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 68rem) { .cartoes--4 { grid-template-columns: repeat(4, 1fr); } }

/* Passos do processo */
.passos { display: grid; gap: 2.25rem 0; width: 100%; }
.passos li { display: grid; gap: 0.5rem; align-content: start; padding-right: 1.75rem; }
.passos__n { display: flex; align-items: center; gap: 1rem; margin-bottom: 0.9rem; font: 400 1.5rem/1 var(--f-larga); color: var(--laranja); }
.passos__n::after { content: ""; flex: 1; height: 1px; background: var(--linha); }
.passos p { color: var(--tx-suave); }
.sec--escuro .acoes { margin-top: 1.5rem; }
.sec--escuro .botao--secundario { color: #fff; }
.sec--escuro .botao--secundario:hover { background: #fff; color: #111; border-color: #fff; }
@media (min-width: 40rem) { .passos { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .passos { grid-template-columns: repeat(4, 1fr); } }

/* Tabela e ficha */
.tabela-rolo { overflow-x: auto; }
.tabela { width: 100%; border-collapse: collapse; }
.tabela caption { padding-bottom: 0.9rem; text-align: left; font-size: 0.92rem; color: var(--tx-suave); }
.tabela th, .tabela td { padding: 0.95rem 1rem 0.95rem 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--linha); }
.tabela thead th { padding-block: 0.7rem; font: 400 0.66rem/1.4 var(--f-larga); letter-spacing: 0.12em; text-transform: uppercase; color: var(--tx-suave); border-bottom: 2px solid var(--tinta); }
.tabela tbody th { width: 36%; font-weight: 650; color: var(--tinta); }
@media (max-width: 39.99rem) {
  .tabela--larga thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .tabela--larga, .tabela--larga tbody, .tabela--larga tr, .tabela--larga th, .tabela--larga td, .tabela--larga caption { display: block; width: auto; }
  .tabela--larga tr { padding: 0.9rem 0; border-bottom: 1px solid var(--linha); }
  .tabela--larga tbody tr:first-child { border-top: 2px solid var(--tinta); }
  .tabela--larga th, .tabela--larga td { padding: 0.15rem 0; border: 0; }
  .tabela--larga tbody th { width: auto; margin-bottom: 0.35rem; font-size: 1.05rem; }
  .tabela--larga td::before { content: attr(data-rotulo) ": "; font-weight: 600; color: var(--tinta); }
}
.ficha__lista { display: grid; border-top: 2px solid var(--tinta); }
.ficha__lista > div { display: grid; gap: 0.2rem; padding: 0.95rem 0; border-bottom: 1px solid var(--linha); }
.ficha__lista dt { font: 400 0.66rem/1.5 var(--f-larga); letter-spacing: 0.1em; text-transform: uppercase; color: var(--tx-suave); }
.ficha__lista dd { font-weight: 500; color: var(--tinta); }
@media (min-width: 40rem) {
  .sec__corpo > .ficha__lista > div { grid-template-columns: minmax(10rem, 32%) 1fr; gap: 1.5rem; align-items: baseline; }
}

/* Listas */
.lista-marcada { display: grid; gap: 0.7rem; }
.lista-marcada li { display: flex; align-items: flex-start; gap: 0.7rem; font-weight: 500; color: var(--tinta); }
.lista-marcada .ico { width: 1.15rem; height: 1.15rem; margin-top: 0.25rem; color: var(--destaque); stroke-width: 2.2; }
.marcas { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.marcas li { padding: 0.45rem 0.9rem; font-size: 0.97rem; font-weight: 600; color: var(--tinta); background: var(--bg-2); border: 1px solid var(--linha); border-radius: var(--raio-p); }

/* Perguntas frequentes */
.faq { display: grid; gap: 0.75rem; }
.faq details { background: var(--bg-cartao); border: 1px solid var(--linha); border-radius: var(--raio); transition: border-color 0.15s, box-shadow 0.15s; }
.faq details[open] { border-color: var(--tinta); box-shadow: var(--sombra); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3.75rem; padding: 0.9rem 1.25rem; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary h3 { font-size: 1.08rem; font-weight: 600; }
.faq summary::after { content: ""; flex: none; width: 0.65rem; height: 0.65rem; margin: 0 0.3rem 0.2rem 0; border-right: 2px solid var(--destaque); border-bottom: 2px solid var(--destaque); transform: rotate(45deg); transition: transform 0.2s; }
.faq details[open] summary::after { margin-bottom: -0.2rem; transform: rotate(-135deg); }
.faq details > p { max-width: 62ch; padding: 0 1.25rem 1.3rem; color: var(--tx-suave); }

/* Galeria de peças: fotografias reais, a preto e branco para ficarem com a mesma luz */
.galeria { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.galeria li { overflow: hidden; background: var(--bg-cartao); border: 1px solid var(--linha); border-radius: var(--raio); }
.galeria picture { display: block; overflow: hidden; background: #ecebe7; }
.galeria img { width: 100%; aspect-ratio: 1; object-fit: cover; filter: grayscale(1) contrast(1.06); transition: transform 0.5s; }
.galeria li:hover img { transform: scale(1.05); }
.galeria figcaption { padding: 0.8rem 1rem 0.9rem; font-size: 0.95rem; font-weight: 600; line-height: 1.35; color: var(--tinta); }
.galeria__chamada { display: flex; flex-direction: column; justify-content: flex-end; gap: 0.75rem; padding: 1.5rem; background: var(--escuro) !important; border-color: var(--escuro) !important; color: var(--tx); }
.galeria__chamada .botao { align-self: flex-start; max-width: 100%; margin-top: 0.5rem; padding-inline: 1rem; }
.galeria__tit { font-size: clamp(1.25rem, 1rem + 1vw, 1.6rem); font-weight: 700; line-height: 1.15; color: #fff; }
@media (max-width: 47.99rem) {
  .galeria li:first-child, .galeria__chamada { grid-column: 1 / -1; }
  .galeria li:first-child img { aspect-ratio: 4 / 3; }
}
@media (min-width: 48rem) { .galeria { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } }

/* Faixa de fotografias da oficina, com legenda */
.fotos { display: grid; gap: 1.25rem; width: 100%; }
.fotos li { overflow: hidden; background: var(--bg-cartao); border: 1px solid var(--linha); border-radius: var(--raio); }
.fotos picture { display: block; overflow: hidden; }
.fotos img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform 0.5s; }
.fotos li:hover img { transform: scale(1.05); }
.fotos figcaption { padding: 0.85rem 1.1rem 0.95rem; font-weight: 600; color: var(--tinta); border-top: 3px solid var(--laranja); }
@media (min-width: 48rem) { .fotos { grid-template-columns: repeat(3, 1fr); } }

/* Fotografia com moldura: canto laranja e, quando há segunda imagem, sobreposição */
.moldura { position: relative; margin-top: 0.9rem; margin-left: 0.9rem; }
.moldura::before { content: ""; position: absolute; left: -0.9rem; top: -0.9rem; width: 5.5rem; height: 5.5rem; border-left: 3px solid var(--laranja); border-top: 3px solid var(--laranja); }
.moldura > picture img { width: 100%; border-radius: var(--raio); filter: grayscale(1) contrast(1.05); }
.moldura figcaption { margin-top: 0.75rem; font-size: 0.9rem; color: var(--tx-suave); }
.moldura__2 { width: 46%; margin: -18% 0 0 auto; position: relative; border: 6px solid var(--bg); border-radius: calc(var(--raio) + 4px); box-shadow: var(--sombra); }
.moldura__2 img { width: 100%; border-radius: var(--raio-p); filter: grayscale(1) contrast(1.05); }
.moldura--dupla figcaption { margin-top: -1.5rem; max-width: 50%; }
.moldura > picture img[src*="operador"] { filter: none; }

/* Cartão da ISO 9001 */
.iso { position: relative; display: grid; gap: 0.85rem; padding: clamp(1.75rem, 4vw, 2.75rem); background: var(--escuro); color: var(--tx); border-radius: var(--raio); }
.iso::before, .iso::after { content: ""; position: absolute; width: 1.4rem; height: 1.4rem; border: 3px solid var(--laranja); }
.iso::before { left: -1px; top: -1px; border-right: 0; border-bottom: 0; border-top-left-radius: var(--raio); }
.iso::after { right: -1px; bottom: -1px; border-left: 0; border-top: 0; border-bottom-right-radius: var(--raio); }
.iso__norma { font: 400 clamp(1.7rem, 1.2rem + 2vw, 2.6rem)/1.05 var(--f-larga); color: #fff; }
.iso__estado { display: inline-flex; align-items: center; gap: 0.6rem; font-size: 0.86rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--laranja-claro); }
.iso__estado::before { content: ""; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--laranja); }
.iso__lista { display: grid; margin-top: 0.5rem; border-top: 1px solid var(--linha); }
.iso__lista > div { display: grid; gap: 0.15rem; padding: 0.8rem 0; border-bottom: 1px solid var(--linha); }
.iso__lista dt { font: 400 0.64rem/1.5 var(--f-larga); letter-spacing: 0.1em; text-transform: uppercase; color: var(--tx-suave); }
.iso__lista dd { font-weight: 500; color: #fff; }
.iso__nota { font-size: 0.95rem; color: var(--tx-suave); }

/* Chamada final */
.chamada { position: relative; isolation: isolate; padding-block: clamp(3rem, 6vw, 5rem); background: var(--laranja); color: #14161a; }
.chamada::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: repeating-linear-gradient(135deg, rgb(20 22 26 / 0.1) 0 2px, transparent 2px 16px); -webkit-mask-image: linear-gradient(90deg, transparent 55%, #000); mask-image: linear-gradient(90deg, transparent 55%, #000); }
.chamada__in { display: grid; gap: 2rem; align-items: center; }
.chamada h2 { color: #14161a; }
.chamada__x { max-width: 40rem; margin-top: 0.75rem; font-size: 1.18rem; font-weight: 500; }
.chamada__nota { max-width: 40rem; margin-top: 0.9rem; font-size: 0.92rem; }
.chamada .acoes { flex-direction: column; align-items: stretch; }
@media (min-width: 40rem) { .chamada .acoes { flex-direction: row; } }
@media (min-width: 64rem) { .chamada__in { grid-template-columns: 1fr auto; gap: 3rem; } .chamada .acoes { flex-direction: column; } }

/* Peças das páginas interiores: contactos, formulário, equipa, mapa e página de erro. */
@view-transition { navigation: auto; }

/* Cartão de contactos */
.contactos { display: grid; gap: 0; border-top: 2px solid var(--tinta); }
.contactos li { display: flex; align-items: flex-start; gap: 1rem; padding: 1.05rem 0; border-bottom: 1px solid var(--linha); }
.contactos > li > .ico { width: 1.35rem; height: 1.35rem; margin-top: 0.3rem; color: var(--destaque); }
.contactos__rot { display: block; margin-bottom: 0.2rem; font: 400 0.66rem/1.5 var(--f-larga); letter-spacing: 0.1em; text-transform: uppercase; color: var(--tx-suave); }
.contactos a { font-weight: 600; color: var(--tinta); text-decoration: underline; text-decoration-color: var(--laranja); text-decoration-thickness: 2px; }
.contactos a:hover { color: var(--destaque); }
.contactos address { line-height: 1.55; }

.morada { line-height: 1.8; }
.morada a { color: var(--destaque); }

/* Formulário */
.formulario { display: grid; gap: 1.1rem; grid-template-columns: 1fr; padding: clamp(1.25rem, 3vw, 2.25rem); background: var(--bg-cartao); border: 1px solid var(--linha); border-radius: var(--raio); box-shadow: var(--sombra); }
.campo { display: grid; gap: 0.35rem; }
.campo label { font-size: 0.95rem; font-weight: 600; color: var(--tinta); }
.campo input, .campo textarea { width: 100%; min-height: 3rem; padding: 0.65rem 0.8rem; font: inherit; color: var(--tinta); background: #fff; border: 1px solid #868b93; border-radius: var(--raio-p); }
.campo input:focus-visible, .campo textarea:focus-visible { outline-offset: 1px; border-color: var(--tinta); }
.campo textarea { min-height: 8rem; resize: vertical; }
.campo input[type="file"] { padding: 0.55rem; background: var(--bg-2); }
.campo small { font-size: 0.86rem; color: var(--tx-suave); }
.campo--largo, .consentimento, .formulario .botao { grid-column: 1 / -1; }
.consentimento { display: grid; grid-template-columns: auto 1fr; gap: 0.7rem; align-items: start; font-size: 0.95rem; }
.consentimento input { width: 1.5rem; height: 1.5rem; margin: 0.05rem 0 0; accent-color: var(--laranja-tx); }
.consentimento a { color: var(--destaque); }
.formulario .botao { justify-self: start; }
.isca { position: absolute; left: -999rem; width: 1px; height: 1px; overflow: hidden; }
@media (min-width: 40rem) { .formulario { grid-template-columns: 1fr 1fr; } }

/* Equipa */
.equipa__lista { display: grid; gap: 1.25rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.equipa__lista li { display: grid; align-content: start; background: var(--bg-cartao); border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; }
.equipa__lista img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; background: var(--bg-2); }
.equipa__texto { display: grid; gap: 0.25rem; padding: 1rem 1.1rem 1.2rem; border-top: 3px solid var(--laranja); }
.equipa__texto strong { font-size: 1.12rem; color: var(--tinta); }
.equipa__texto span { font-size: 0.92rem; color: var(--tx-suave); }
.equipa__texto p { margin-top: 0.5rem; font-size: 0.97rem; }
.equipa figcaption, .mapa figcaption { margin-top: 0.7rem; font-size: 0.86rem; color: var(--tx-suave); }
.sec__corpo > .equipa { max-width: 46rem; }

/* Mapa em largura total: imagem do OpenStreetMap à espera; o mapa do Google carrega dentro da moldura quando o visitante clica */
.mapa-largo { position: relative; background: var(--bg-2); }
.mapa-largo__quadro { position: relative; height: clamp(22rem, 52vw, 34rem); overflow: hidden; background: #e8e6e1; }
.mapa-largo__quadro picture, .mapa-largo__quadro img, .mapa-largo__quadro iframe { position: absolute; inset: 0; width: 100%; height: 100%; }
.mapa-largo__quadro img { object-fit: cover; }
.mapa-largo__quadro iframe { border: 0; }
.mapa-largo__cartao { position: relative; z-index: 2; display: grid; gap: 0.9rem; justify-items: start; margin-top: -3rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); padding: clamp(1.5rem, 3vw, 2.25rem); background: #fff; border-top: 4px solid var(--laranja); border-radius: var(--raio); box-shadow: var(--sombra); }
.mapa-largo__cartao h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); }
.mapa-largo__cartao .nota a { color: var(--destaque); }
.mapa-largo__cartao address { font-size: 1.1rem; font-weight: 500; line-height: 1.5; color: var(--tinta); }
@media (min-width: 60rem) {
  .mapa-largo > .caixa { position: absolute; inset: 0; display: flex; align-items: center; pointer-events: none; }
  .mapa-largo__cartao { width: 24rem; margin: 0; pointer-events: auto; }
}

.erro404 ul { display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; }