/* ==========================================================================
   PÁGINA INICIAL (index.html)
   Direção aprovada a 13/10/2026 (maquete D): topo calmo com duas portas
   (materiais | profissionais), uma montra de fotografias reais do catálogo e,
   por baixo, a camada institucional. Documentação: docs/home/README.md.

   Regras do mundo visual (DESIGN.md):
   - azul-marinho = estrutura (o topo é a única faixa escura; o rodapé global é preto e não muda aqui);
   - terracota = só ações (botões e setas); branco sobre --orange-700 = 4,8:1;
   - Poppins nos títulos, Inter no corpo; cantos 12px nos controlos, 16-24px nos painéis.
   O CSS crítico do topo está embutido no <head> do index.html; manter em sincronia.
   ========================================================================== */

.page-home {
  --hm-ink: var(--blue-900);
  --hm-ink-2: color-mix(in srgb, var(--blue-900) 80%, #fff);      /* texto secundário, 9:1 em branco */
  --hm-muted: color-mix(in srgb, var(--blue-900) 62%, #fff);      /* texto terciário, ~4,9:1 em branco */
  --hm-line: color-mix(in srgb, var(--blue-900) 12%, transparent);
  --hm-line-strong: color-mix(in srgb, var(--blue-900) 24%, transparent);
  --hm-paper: #fff;
  --hm-ground: color-mix(in srgb, var(--blue-50) 35%, #fff);      /* fundo frio muito claro */
  --hm-action: var(--orange-700);
  --hm-action-hover: var(--orange-900);
  --hm-signal: var(--orange-300);
  --hm-max: 1240px;
  --hm-gutter: clamp(16px, 4vw, 40px);
  --hm-header-h: 154px;                                             /* barra de anúncios 34 + cabeçalho 120 */
  --hm-section: clamp(48px, 5.2vw, 76px);
  --hm-planta-forte: color-mix(in srgb, var(--white) 6%, transparent);   /* quadrícula de 120 px */
  --hm-planta-fraca: color-mix(in srgb, var(--white) 3%, transparent);   /* quadrícula de 24 px */
  --hm-planta-traco: color-mix(in srgb, var(--white) 20%, transparent);  /* traço da planta */
  background: var(--hm-ground);
  color: var(--hm-ink);
  accent-color: var(--hm-action);
  caret-color: var(--hm-action);
}

.page-home ::selection { background: var(--orange-100); color: var(--blue-900); }

/* --------------------------------------------------------------------------
   Ajustes globais só na página inicial (decisão do utilizador, 11/10/2026)
   -------------------------------------------------------------------------- */
/* Barra de anúncios parada: duas mensagens no desktop, uma no telemóvel */
.page-home .announcement-track { animation: none !important; width: 100%; justify-content: center; transform: none !important; }
.page-home .announcement-track > :nth-child(n+4) { display: none; }
@media (max-width: 640px) {
  .page-home .announcement-track > :nth-child(n+2) { display: none; }
}
/* No topo da home a pesquisa do cabeçalho repetia a da porta "Materiais" */
@media (min-width: 1025px) {
  .page-home .header-search { visibility: hidden; }
}
/* O balão da Angel não se sobrepõe ao conteúdo nem fala por cima da página */
.page-home .angel-tooltip { display: none !important; }

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
/* Texto só para leitores de ecrã */
.hm-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* "Saltar para o conteúdo": invisível até receber o foco do teclado */
.hm-skip { position: fixed; top: 10px; left: 10px; z-index: 10001; padding: 12px 18px; border-radius: var(--radius-md, 12px); background: #fff; color: var(--blue-900); font: 600 1rem/1.2 var(--font-body); text-decoration: none; box-shadow: var(--shadow-lg); transform: translateY(-160%); transition: transform 0.2s ease; }
.hm-skip:focus { transform: none; outline: 3px solid var(--orange-300); outline-offset: 2px; }
.page-home main:focus { outline: none; }
/* O home.js esconde com [hidden] o que os dados vivos dão como vazio; os display: flex/grid das peças não podem ganhar */
.page-home main [hidden] { display: none !important; }
.hm-container { max-width: var(--hm-max); margin: 0 auto; padding-inline: var(--hm-gutter); }
.hm-section { padding-block: var(--hm-section); }
.hm-section--paper { background: var(--hm-paper); }
.page-home main h1, .page-home main h2, .page-home main h3, .page-home main h4 { font-family: var(--font-display); color: inherit; text-wrap: balance; }
.page-home main p { text-wrap: pretty; }
.page-home main a { text-underline-offset: 3px; }
.page-home main a:focus-visible,
.page-home main button:focus-visible,
.page-home main summary:focus-visible { outline: 3px solid var(--blue-500); outline-offset: 3px; border-radius: var(--radius-sm, 8px); }
.hm-hero a:focus-visible, .hm-hero button:focus-visible { outline-color: var(--hm-signal); }

.hm-h2 { margin: 0; font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.5rem); line-height: 1.12; font-weight: 700; letter-spacing: -0.025em; }
.hm-lead { margin: 0; max-width: 60ch; font-size: clamp(1.02rem, 0.97rem + 0.25vw, 1.15rem); line-height: 1.6; color: var(--hm-ink-2); }
.hm-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px 32px; margin-bottom: clamp(28px, 3vw, 44px); }
.hm-head > div:first-child { display: grid; gap: 12px; max-width: 52rem; }
.hm-num { font-variant-numeric: tabular-nums; }

/* Ligação com seta (a seta é o sinal de ação) */
.hm-link {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  color: var(--blue-700); font-weight: 600; text-decoration: none;
}
.hm-link::after { content: ""; width: 16px; height: 16px; flex: none; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m13 6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m13 6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  color: var(--hm-action); transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1); }
.hm-link:hover { text-decoration: underline; }
.hm-link:hover::after { transform: translateX(3px); }

/* Botões */
.hm-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 24px; border: 2px solid transparent; border-radius: var(--radius-md, 12px);
  background: var(--hm-action); color: #fff; box-shadow: var(--shadow-md);
  font: 700 1rem/1.2 var(--font-display); letter-spacing: 0.01em; text-decoration: none; cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.2s ease;
}
.hm-btn:hover { background: var(--hm-action-hover); transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.hm-btn:active { transform: translateY(0); }
.hm-btn--secondary { background: #fff; color: var(--blue-700); border-color: var(--blue-500); box-shadow: var(--shadow-xs); }
.hm-btn--secondary:hover { background: var(--blue-50); }
.hm-btn--lg { min-height: 58px; padding: 0 30px; font-size: 1.05rem; }

/* --------------------------------------------------------------------------
   1. TOPO: frase, duas portas e montra de produtos reais
   -------------------------------------------------------------------------- */
.hm-hero {
  position: relative; isolation: isolate;
  padding: calc(var(--hm-header-h) + clamp(24px, 3.5vw, 52px)) 0 clamp(56px, 7vw, 96px);
  background: var(--blue-900);
  color: #fff;
}
/* Papel de planta: quadrícula + uma planta de obra desenhada em SVG (index.html), só decorativas */
.hm-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--hm-planta-forte) 1px, transparent 1px),
    linear-gradient(90deg, var(--hm-planta-forte) 1px, transparent 1px),
    linear-gradient(var(--hm-planta-fraca) 1px, transparent 1px),
    linear-gradient(90deg, var(--hm-planta-fraca) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  background-position: center top;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 calc(var(--hm-header-h) + 24px), #000 72%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 calc(var(--hm-header-h) + 24px), #000 72%, transparent 100%);
}
.hm-hero__planta {
  position: absolute; z-index: 0; top: calc(var(--hm-header-h) + 12px); right: 0;
  width: min(70%, 1080px); height: auto; pointer-events: none; overflow: visible;
  fill: none; stroke: var(--hm-planta-traco); stroke-width: 1; stroke-linecap: square;
  -webkit-mask-image: radial-gradient(ellipse 72% 78% at 58% 48%, #000 34%, transparent 80%);
          mask-image: radial-gradient(ellipse 72% 78% at 58% 48%, #000 34%, transparent 80%);
}
.hm-planta__paredes { stroke-width: 1.8; }
.hm-hero__grid { position: relative; z-index: 1; }
.hm-hero__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.85fr); gap: clamp(32px, 4vw, 64px); align-items: center; }
.hm-h1 { margin: 0; max-width: 12ch; color: #fff; font-size: clamp(2.5rem, 1.55rem + 3.4vw, 4.25rem); line-height: 1.02; font-weight: 800; letter-spacing: -0.035em; }
.hm-hero__lead { margin: 18px 0 0; max-width: 40ch; font-size: clamp(1.05rem, 0.98rem + 0.35vw, 1.25rem); line-height: 1.55; color: rgba(255, 255, 255, 0.86); }

.hm-doors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: clamp(28px, 3vw, 40px); }
.hm-door {
  display: flex; flex-direction: column; gap: 4px; min-width: 0;
  padding: 22px 22px 20px; border-radius: var(--radius-xl, 20px);
  background: var(--hm-paper); color: var(--hm-ink);
  box-shadow: 0 1px 2px rgba(6, 11, 28, 0.3), 0 16px 36px rgba(6, 11, 28, 0.42);
}
.hm-door .hm-field { margin-top: auto; }
.hm-door__title { margin: 0; font-size: 1.35rem; line-height: 1.2; font-weight: 700; letter-spacing: -0.015em; }
.hm-door__text { margin: 0 0 14px; color: var(--hm-ink-2); font-size: 0.95rem; line-height: 1.45; }
.hm-field {
  position: relative; display: flex; align-items: center; gap: 8px;
  min-height: 58px; padding: 5px 5px 5px 14px;
  background: #fff; border: 1.5px solid var(--hm-line-strong); border-radius: var(--radius-md, 12px);
  transition: border-color 0.2s ease;
}
.hm-field:hover { border-color: var(--blue-500); }
.hm-field:focus-within { border-color: var(--blue-500); box-shadow: 0 0 0 3px color-mix(in srgb, var(--orange-300) 70%, transparent); }
.hm-field .cp-cbx__control:focus-visible { outline: none; }
.hm-field input {
  flex: 1; min-width: 0; min-height: 46px; padding: 0; border: 0; background: transparent;
  color: var(--hm-ink); font: 500 1rem/1.2 var(--font-body);
}
.hm-field input::placeholder { color: var(--hm-muted); opacity: 1; }
.hm-field input:focus { outline: none; }
.hm-field input::-webkit-search-cancel-button { -webkit-appearance: none; }
.hm-field > select { flex: 1; min-width: 0; min-height: 46px; border: 0; background: transparent; color: var(--hm-ink); font: 500 1rem/1.2 var(--font-body); }
.hm-go {
  flex: none; display: grid; place-items: center; width: 48px; height: 48px;
  border: 0; border-radius: var(--radius-sm, 8px); background: var(--hm-action); color: #fff; cursor: pointer;
  transition: background-color 0.2s ease;
}
.hm-go:hover { background: var(--hm-action-hover); }
.hm-go svg { width: 22px; height: 22px; }
.hm-hero__quote { margin: 24px 0 0; color: rgba(255, 255, 255, 0.86); font-size: 1rem; }
.hm-hero__quote .hm-link { color: #fff; margin-left: 4px; }
.hm-hero__quote .hm-link::after { color: var(--hm-signal); }

/* Montra: fotografias reais de produtos, cada uma é um atalho para a sua categoria */
.hm-montra { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: clamp(70px, 6.6vw, 98px); gap: 12px; margin: 0; padding: 0; list-style: none; }
.hm-montra li { display: flex; min-width: 0; }
.hm-tile {
  position: relative; display: flex; flex: 1; min-width: 0; flex-direction: column; justify-content: flex-end;
  padding: 10px 12px; overflow: hidden; border-radius: var(--radius-lg, 16px); background: #fff; color: var(--hm-ink); text-decoration: none;
  box-shadow: 0 1px 2px rgba(6, 11, 28, 0.34);
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.25s ease;
  animation: hm-pousar 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.hm-tile:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(6, 11, 28, 0.34), 0 18px 36px rgba(6, 11, 28, 0.48); }
.hm-tile img { position: absolute; inset: 10px 10px 34px; width: calc(100% - 20px); height: calc(100% - 44px); object-fit: contain; }
/* Montra que roda (home.js põe .is-rodando quando junta as outras fotografias): só a ".is-on" se vê */
.hm-tile.is-rodando img { opacity: 0; }
.hm-tile.is-rodando img.is-on { opacity: 1; }
.hm-montra__pausa {
  display: grid; place-items: center; width: 44px; height: 44px; margin: 12px 0 0 auto; padding: 0;
  border: 1px solid color-mix(in srgb, var(--white) 28%, transparent); border-radius: var(--radius-full, 9999px);
  background: transparent; color: color-mix(in srgb, var(--white) 86%, transparent); cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.hm-montra__pausa:hover { background: color-mix(in srgb, var(--white) 10%, transparent); border-color: color-mix(in srgb, var(--white) 50%, transparent); }
.hm-montra__pausa svg { width: 16px; height: 16px; }
.hm-montra__icone-continuar, .hm-montra__pausa[aria-pressed="true"] .hm-montra__icone-pausa { display: none; }
.hm-montra__pausa[aria-pressed="true"] .hm-montra__icone-continuar { display: block; }
.hm-tile span {
  position: relative; display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  font: 600 0.82rem/1.2 var(--font-body); color: var(--hm-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Composição da montra (desktop): tamanhos diferentes, nunca uma fila de cartões iguais */
.hm-montra > li:nth-child(1) { grid-column: 1 / 3; grid-row: 1 / 4; }
.hm-montra > li:nth-child(2) { grid-column: 3 / 7; grid-row: 1 / 3; }
.hm-montra > li:nth-child(3) { grid-column: 3 / 5; grid-row: 3 / 5; }
.hm-montra > li:nth-child(4) { grid-column: 5 / 7; grid-row: 3 / 6; }
.hm-montra > li:nth-child(5) { grid-column: 1 / 3; grid-row: 4 / 6; }
.hm-montra > li:nth-child(6) { grid-column: 3 / 5; grid-row: 5 / 6; }
.hm-montra li:nth-child(2) .hm-tile { animation-delay: 0.05s; }
.hm-montra li:nth-child(3) .hm-tile { animation-delay: 0.1s; }
.hm-montra li:nth-child(4) .hm-tile { animation-delay: 0.15s; }
.hm-montra li:nth-child(5) .hm-tile { animation-delay: 0.2s; }
.hm-montra li:nth-child(6) .hm-tile { animation-delay: 0.25s; }
@keyframes hm-pousar { from { transform: translateY(10px); } to { transform: none; } }

/* --------------------------------------------------------------------------
   2. COMO FUNCIONA (quem tem uma obra | quem a faz)
   -------------------------------------------------------------------------- */
.hm-paths { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.5vw, 28px); }
.hm-path { display: grid; align-content: start; gap: 22px; padding: clamp(24px, 3vw, 36px); border-radius: var(--radius-xl, 20px); border: 1px solid var(--hm-line); background: var(--hm-ground); }
.hm-path--pro { background: var(--blue-50); border-color: transparent; }
.hm-path__title { margin: 0; font-size: 1.3rem; line-height: 1.25; font-weight: 700; letter-spacing: -0.015em; }
.hm-steps { display: grid; gap: 18px; margin: 0; padding: 0; list-style: none; counter-reset: passo; }
.hm-step { position: relative; display: grid; gap: 2px; padding-left: 52px; min-height: 36px; }
.hm-step::before {
  counter-increment: passo; content: counter(passo);
  position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: #fff; color: var(--blue-700); box-shadow: inset 0 0 0 1px var(--hm-line); font: 700 1rem/1 var(--font-display);
}
.hm-step h4 { margin: 6px 0 0; font-size: 1.02rem; line-height: 1.35; font-weight: 600; }
.hm-step p { margin: 0; color: var(--hm-ink-2); line-height: 1.5; }
.hm-path .hm-btn { justify-self: start; }
.hm-path__resumo { display: none; margin: -8px 0 0; color: var(--hm-ink-2); line-height: 1.55; }
.hm-promises { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 32px; margin: clamp(24px, 3vw, 36px) 0 0; padding: 0; list-style: none; color: var(--hm-ink-2); font-size: 0.95rem; }
.hm-promises li { display: flex; align-items: center; gap: 10px; }
.hm-promises svg { flex: none; width: 18px; height: 18px; color: var(--blue-500); }

/* --------------------------------------------------------------------------
   3. CATÁLOGO por família
   -------------------------------------------------------------------------- */
.hm-families { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.hm-family { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--radius-xl, 20px); border: 1px solid var(--hm-line); background: var(--hm-paper); box-shadow: var(--shadow-xs); }
.hm-family__shelf { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); height: 132px; border-bottom: 1px solid var(--hm-line); }
.hm-family__shelf img { width: 100%; height: 100%; padding: 14px 10px; object-fit: contain; }
.hm-family__shelf img + img { border-left: 1px solid var(--hm-line); }
.hm-family__body { display: flex; flex: 1; flex-direction: column; padding: 20px 22px 14px; }
.hm-family__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.hm-family__title { margin: 0; font-size: 1.3rem; line-height: 1.2; font-weight: 700; letter-spacing: -0.015em; }
.hm-family__count { color: var(--hm-muted); font-size: 0.9rem; white-space: nowrap; }
.hm-row {
  display: flex; align-items: baseline; gap: 12px; min-height: 44px; padding: 11px 0;
  border-bottom: 1px solid var(--hm-line); color: var(--hm-ink); font-weight: 500; text-decoration: none;
}
.hm-row:last-child { border-bottom: 0; }
.hm-row:hover .hm-row__name { color: var(--blue-500); text-decoration: underline; }
.hm-row__name { flex: 1; min-width: 0; }
.hm-row__n { color: var(--hm-muted); font-size: 0.92rem; font-variant-numeric: tabular-nums; }
.hm-row--sub { padding-left: 16px; }
.hm-family__rows { display: flex; flex-direction: column; }
.hm-family__all { margin-top: auto; padding-top: 6px; border-top: 1px solid var(--hm-line); }

/* --------------------------------------------------------------------------
   4. PROFISSIONAIS
   -------------------------------------------------------------------------- */
.hm-pros { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.5fr); gap: clamp(20px, 3vw, 40px); align-items: start; }
.hm-finder { display: grid; gap: 14px; padding: clamp(22px, 2.5vw, 30px); border-radius: var(--radius-xl, 20px); background: var(--blue-50); }
.hm-finder__title { margin: 0; font-size: 1.2rem; line-height: 1.3; font-weight: 700; }
.hm-finder__field { display: grid; gap: 6px; }
.hm-finder__label { font-size: 0.85rem; font-weight: 600; color: var(--hm-ink-2); }
.hm-finder .hm-btn { width: 100%; margin-top: 4px; }
.hm-finder .cp-cbx--boxed .cp-cbx__control { background: #fff; }
.hm-trades { padding: 6px 28px 16px; border-radius: var(--radius-xl, 20px); border: 1px solid var(--hm-line); background: var(--hm-paper); }
.hm-trades__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 36px; }
.hm-trades__grid .hm-row:last-child { border-bottom: 1px solid var(--hm-line); }
.hm-trades__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 24px; padding-top: 10px; }
.hm-trades__districts { margin: 0; color: var(--hm-muted); font-size: 0.9rem; line-height: 1.5; }
.hm-trades__districts b { color: var(--hm-ink-2); font-weight: 600; }

/* --------------------------------------------------------------------------
   5. QUEM ESTÁ POR TRÁS (linha do tempo real, sem fotografia)
   -------------------------------------------------------------------------- */
.hm-about { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.hm-about__text { display: grid; gap: 18px; }
.hm-about__text p { margin: 0; color: var(--hm-ink-2); line-height: 1.65; max-width: 62ch; }
.hm-about__text .hm-lead { color: var(--hm-ink); }
.hm-about__links { display: flex; flex-wrap: wrap; gap: 4px 28px; }
.hm-timeline { position: relative; margin: 0; padding: clamp(24px, 3vw, 36px); list-style: none; border-radius: var(--radius-2xl, 24px); background: var(--hm-paper); border: 1px solid var(--hm-line); box-shadow: var(--shadow-md); }
.hm-timeline li { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 22px; padding-bottom: 32px; }
.hm-timeline li:last-child { padding-bottom: 0; }
.hm-timeline li::before { content: ""; position: absolute; left: 11px; top: 30px; bottom: 6px; width: 2px; background: var(--hm-line-strong); }
.hm-timeline li:last-child::before { display: none; }
.hm-timeline__dot { width: 24px; height: 24px; margin-top: 6px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 6px var(--blue-500); }
.hm-timeline li:last-child .hm-timeline__dot { background: var(--hm-ink); box-shadow: 0 0 0 5px var(--blue-50); }
.hm-timeline__year { display: block; font-family: var(--font-display); font-size: clamp(1.8rem, 1.3rem + 1.4vw, 2.5rem); line-height: 1.05; font-weight: 800; letter-spacing: -0.03em; color: var(--hm-ink); }
.hm-timeline__place { display: block; margin-top: 4px; font-size: 0.85rem; font-weight: 600; color: var(--hm-muted); }
.hm-timeline p { margin: 10px 0 0; color: var(--hm-ink-2); line-height: 1.55; }

/* --------------------------------------------------------------------------
   6. EM DESTAQUE
   -------------------------------------------------------------------------- */
/* Destaques em carrossel: faixa com scroll-snap (4 cartões no desktop); setas só quando há mais do que cabe */
.hm-carrossel__controlos { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.hm-carrossel__setas { display: flex; gap: 8px; }
.hm-seta {
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 1.5px solid var(--hm-line-strong); border-radius: var(--radius-full, 9999px);
  background: var(--hm-paper); color: var(--blue-700); cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease, opacity 0.2s ease;
}
.hm-seta:hover { border-color: var(--blue-500); background: var(--blue-50); }
.hm-seta[aria-disabled="true"] { opacity: 0.38; cursor: default; border-color: var(--hm-line-strong); background: var(--hm-paper); }
.hm-seta svg { width: 18px; height: 18px; }
.hm-products {
  --hm-car-gap: clamp(14px, 2vw, 24px);
  --hm-car-visiveis: 4;
  display: flex; gap: var(--hm-car-gap); overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none;
  margin: -6px -4px -20px; padding: 6px 4px 20px; scroll-padding-inline: 4px;
}
.hm-products::-webkit-scrollbar { display: none; }
.hm-products:focus-visible { outline: 3px solid var(--blue-500); outline-offset: 2px; border-radius: var(--radius-lg, 16px); }
.hm-products > .hm-product { flex: 0 0 calc((100% - (var(--hm-car-visiveis) - 1) * var(--hm-car-gap)) / var(--hm-car-visiveis)); min-width: 0; scroll-snap-align: start; }
.hm-product {
  display: grid; grid-template-rows: auto 1fr; overflow: hidden; border-radius: var(--radius-lg, 16px);
  border: 1px solid var(--hm-line); background: var(--hm-paper); color: var(--hm-ink); text-decoration: none;
  box-shadow: var(--shadow-xs); transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.2s ease;
}
.hm-product:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.hm-product__img { position: relative; min-height: 0; overflow: hidden; aspect-ratio: 4 / 3; background: #fff; border-bottom: 1px solid var(--hm-line); }
.hm-product__img img { position: absolute; inset: 10%; width: 80%; height: 80%; object-fit: contain; }
.hm-product__body { display: grid; align-content: start; gap: 4px; padding: 14px 16px 18px; }
.hm-product__cat { font-size: 0.8rem; color: var(--hm-muted); }
.hm-product__name { font: 600 1rem/1.3 var(--font-display); }
.hm-product__ref { font-size: 0.82rem; color: var(--hm-muted); font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   7. PERGUNTAS FREQUENTES + CONTACTOS
   -------------------------------------------------------------------------- */
.hm-help { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.hm-faq { margin-top: 20px; border-top: 1px solid var(--hm-line); }
.hm-faq details { border-bottom: 1px solid var(--hm-line); }
.hm-faq summary {
  position: relative; list-style: none; cursor: pointer; padding: 18px 44px 18px 0;
  font: 600 1.02rem/1.4 var(--font-display);
}
.hm-faq summary::-webkit-details-marker { display: none; }
.hm-faq summary::after {
  content: ""; position: absolute; right: 6px; top: 50%; width: 18px; height: 18px; margin-top: -9px; background: var(--blue-700);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.hm-faq details[open] summary::after { transform: rotate(45deg); }
.hm-faq details p { margin: 0 0 18px; max-width: 64ch; color: var(--hm-ink-2); line-height: 1.6; }
.hm-faq details p a { color: var(--blue-700); font-weight: 600; }
.hm-contacts { display: grid; gap: 12px; align-content: start; }
.hm-contacts__title { margin: 0 0 4px; font-size: 1.15rem; font-weight: 700; }
.hm-contact {
  display: flex; align-items: center; gap: 14px; width: 100%; min-height: 72px; padding: 14px 16px;
  border: 1px solid var(--hm-line); border-radius: 16px; background: var(--hm-paper); color: var(--hm-ink);
  font: inherit; text-align: left; text-decoration: none; cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.hm-contact:hover { border-color: var(--blue-500); box-shadow: var(--shadow-sm); }
.hm-contact img { flex: none; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.hm-contact__badge { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--blue-50); color: var(--blue-700); }
.hm-contact__badge svg { width: 22px; height: 22px; }
.hm-contact strong { display: block; font: 600 1rem/1.3 var(--font-display); }
.hm-contact small { display: block; margin-top: 2px; color: var(--hm-muted); font-size: 0.88rem; }

/* --------------------------------------------------------------------------
   8. GUIAS E NOTÍCIAS
   -------------------------------------------------------------------------- */
.hm-posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
/* Cartões só com texto: as capas dos artigos não são fotografias reais (regra das imagens, docs/home/README.md) */
.hm-post {
  display: flex; flex-direction: column; gap: 18px; padding: 22px 24px 20px;
  border-radius: var(--radius-lg, 16px); border: 1px solid var(--hm-line);
  background: var(--hm-paper); color: var(--hm-ink); text-decoration: none; box-shadow: var(--shadow-xs);
  transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.2s ease;
}
.hm-post:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.hm-post:hover .hm-post__title { text-decoration: underline; text-decoration-thickness: 1px; }
.hm-post::after { content: ""; width: 18px; height: 18px; margin-top: auto; flex: none; background: var(--hm-action);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m13 6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m13 6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1); }
.hm-post:hover::after { transform: translateX(3px); }
.hm-post__body { display: grid; align-content: start; gap: 10px; }
.hm-post__meta { font-size: 0.82rem; color: var(--hm-muted); }
.hm-post__meta b { color: var(--blue-700); font-weight: 600; }
.hm-post__title { font: 600 1.1rem/1.4 var(--font-display); text-underline-offset: 3px; }
.hm-head-links { display: flex; flex-wrap: wrap; gap: 0 28px; }

/* --------------------------------------------------------------------------
   9. FECHO
   -------------------------------------------------------------------------- */
.hm-end { display: grid; justify-items: center; gap: 18px; text-align: center; }
.hm-end p { margin: 0; color: var(--hm-ink-2); }
.hm-end__note { font-size: 0.9rem; color: var(--hm-muted) !important; }

/* --------------------------------------------------------------------------
   Responsivo
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
  .hm-hero__grid { grid-template-columns: minmax(0, 1.45fr) minmax(0, 0.8fr); }
  .hm-montra { grid-auto-rows: clamp(62px, 6.2vw, 86px); }
}

@media (max-width: 1024px) {
  .page-home { --hm-header-h: 106px; }
  .hm-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .hm-h1 { max-width: 14ch; }
  /* A montra passa para baixo das portas, numa faixa de seis atalhos */
  .hm-montra { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: 116px; }
  .hm-montra > li { grid-column: auto !important; grid-row: auto !important; }
  .hm-pros { grid-template-columns: minmax(0, 1fr); }
  .hm-about { grid-template-columns: minmax(0, 1fr); }
  .hm-products { --hm-car-visiveis: 2.5; }
}

@media (min-width: 900px) and (max-width: 1199px) {
  .hm-hero__grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    grid-template-areas: "intro montra" "doors doors" "quote quote";
    gap: 28px clamp(28px, 4vw, 48px);
  }
  .hm-hero__copy { display: contents; }
  .hm-hero__intro { grid-area: intro; }
  .hm-montra-wrap { grid-area: montra; }
  .hm-doors { grid-area: doors; margin-top: 4px; }
  .hm-hero__quote { grid-area: quote; margin-top: 0; }
  .hm-montra { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: clamp(96px, 9.4vw, 112px); gap: 10px; }
  .hm-montra > li { grid-column: auto !important; grid-row: auto !important; }
}

@media (max-width: 900px) {
  .hm-families, .hm-posts { grid-template-columns: minmax(0, 1fr); }
  .hm-family__shelf { height: 112px; }
  .hm-posts { gap: 12px; }
  .hm-post { flex-direction: row; align-items: center; gap: 16px; }
  .hm-post::after { margin-top: 0; }
  .hm-post__body { flex: 1; min-width: 0; }
  .hm-help { grid-template-columns: minmax(0, 1fr); }
  .hm-paths { grid-template-columns: minmax(0, 1fr); }
}

@media (min-width: 721px) and (max-width: 900px) {
  .hm-families { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .hm-family__shelf { height: 92px; }
  .hm-family__shelf img { padding: 10px 6px; }
  .hm-family__body { padding: 16px 14px 10px; }
  .hm-family__head { flex-direction: column; gap: 2px; }
  .hm-row { font-size: 0.92rem; gap: 8px; }
}

@media (max-width: 720px) {
  .page-home { --hm-section: 48px; }
  .hm-hero__planta { display: none; }
  /* Telemóvel: o caminho dos profissionais resume-se numa frase (os passos ficam no desktop) */
  .hm-path--pro .hm-steps { display: none; }
  .hm-path__resumo { display: block !important; }
  .hm-trades__grid .hm-row:nth-child(n+6) { display: none; }
  /* As fotografias das famílias ficam no desktop; no telemóvel a montra do topo já as mostra */
  .hm-family__shelf { display: none; }
  .hm-promises { font-size: 0.92rem; gap: 10px; }
  .hm-end { gap: 14px; }
  .hm-doors { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .hm-montra { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 92px; gap: 10px; }
  .hm-trades { padding: 4px 18px 12px; }
  .hm-trades__grid { grid-template-columns: minmax(0, 1fr); }
  .hm-path .hm-btn { justify-self: stretch; }
  .hm-promises { flex-direction: column; align-items: flex-start; gap: 12px; }
  .hm-head { margin-bottom: 24px; }
  .hm-post { padding: 16px 16px 16px 18px; }
  .hm-post__body { gap: 6px; }
  .hm-post__title { font-size: 0.98rem; line-height: 1.32; }
  .hm-end .hm-btn { width: 100%; }
}

@media (max-width: 480px) {
  .page-home { --hm-header-h: 94px; }
  .hm-hero { padding-bottom: 40px; }
  .hm-h1 { font-size: 2.4rem; }
  .hm-hero__lead { margin-top: 12px; font-size: 1rem; }
  .hm-door { padding: 18px 16px 16px; }
  .hm-door__text { margin-bottom: 12px; font-size: 0.92rem; }
  .hm-hero__quote { margin-top: 18px; }
  .hm-products { --hm-car-visiveis: 1.6; --hm-car-gap: 12px; }
  .hm-product__body { padding: 12px 12px 14px; }
  .hm-product__name { font-size: 0.95rem; }
  .hm-family__body { padding: 16px 16px 10px; }
  .hm-timeline li { column-gap: 16px; }
}

@media (max-width: 360px) {
  .hm-h1 { font-size: 2.15rem; }
  .hm-montra { grid-auto-rows: 92px; }
  .hm-tile span { font-size: 0.75rem; }
}

@media (prefers-reduced-motion: reduce) {
  .hm-tile, .hm-btn, .hm-product, .hm-post, .hm-post::after, .hm-link::after, .hm-faq summary::after { animation: none; transition: none; }
}