/* ==========================================================================
   SOS Casa Leiria — folha de estilos única
   Tokens de marca em :root. Layout fluido, mobile-first nos breakpoints.
   ========================================================================== */

/* ---------- Fontes auto-alojadas (variáveis) ---------- */
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/schibsted-grotesk-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/schibsted-grotesk-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/geist-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/geist-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('../fonts/geist-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('../fonts/geist-mono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Tokens ---------- */
:root {
  --ink: #0E1114;
  --ink-2: #171A1D;
  --line-dark: #262D34;
  --line-dark-2: #3A434B;
  --paper: #EFEFEF;
  --paper-2: #EFEFEF;
  --white: #FFFFFF;
  --line-light: #D9D4CB;
  --line-light-2: #E2DDD4;
  --muted-light: #5B6168;
  --muted-light-2: #8A8F94;
  --ink-soft: #3E444A;
  --muted-dark: #B4BBC1;
  --muted-dark-2: #7F8A93;
  --nav-dark: #C9CED2;
  --accent: #F37421;
  --accent-text: #F37422;   /* etiquetas das secções e números das perguntas (escolha do cliente). ATENÇÃO: sobre o bege dá ~2,5:1, abaixo do AA para texto pequeno (o #A8470B anterior dava 5,2:1) */
  --laranja-escuro: #A8470B;   /* nome do concelho escolhido na lista do mapa (legível sobre o bege) */
  --water: #7DB4DE;
  --electric: #E9B949;
  --ok: #3DDC84;

  --sans: 'Geist', 'Helvetica Neue', Arial, sans-serif;
  --display: 'Schibsted Grotesk', 'Geist', sans-serif;
  --mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Padding lateral: 80px desktop → 20px mobile */
  --gutter: clamp(20px, 5.5vw, 80px);
  --espaco-seccao: clamp(64px, 8vw, 120px);  /* margem de cima e de baixo das secções: 115px a 1440px, 64px no telemóvel */
  /* Grelha de 12 colunas comum a todas as secções. --col só se usa dentro de
     grid-template-columns (o 100% é a largura da grelha): 4 colunas são
     calc(var(--col) * 4 + var(--grelha-gap) * 3). Os cartões dos serviços,
     das empresas e do antes e depois caem todos nas mesmas linhas verticais. */
  --grelha-gap: clamp(20px, 2.2vw, 32px);
  --col: calc((100% - 11 * var(--grelha-gap)) / 12);
  --col-4: calc(var(--col) * 4 + var(--grelha-gap) * 3);
  --col-6: calc(var(--col) * 6 + var(--grelha-gap) * 5);
  --cabeca-gap: 20px;   /* entre etiqueta, título e frase no topo de cada secção */
  --entre-seccoes: clamp(10px, 1.7vw, 24px);   /* intervalo escuro entre secções em cartão: 24px no desktop, 10px no telemóvel */
  --titulo-seccao: clamp(34px, 5vw, 52px);    /* <h2> de todas as secções: 52px em todo o desktop (desde 1040px), 34px no telemóvel */
  --altura-topo: 96px;   /* altura do cabeçalho: 80px em portáteis, 72px em tablet/telemóvel */
  --max: 1440px;
  --moldura: clamp(10px, 1.2vw, 15px);   /* espaço escuro à volta das secções em cartão: 10px no telemóvel, 15px no desktop */
  /* espaço lateral dentro dos cartões (secções e cartão de texto dos heros),
     igual em todos para o conteúdo ficar alinhado: o conteúdo começa onde
     começaria no contentor de 1440px (alinhado com o logótipo) */
  --recuo-cartao: max(20px, calc(var(--gutter) - var(--moldura)), calc((100vw - var(--max)) / 2 + var(--gutter) - var(--moldura)));
  --raio-seccao: 14px;   /* cantos das secções em cartão */
  --canto: 8px;
  --saida: cubic-bezier(.16, 1, .3, 1);   /* curva das entradas e das interações: rápida a começar, suave a acabar */   /* raio único dos cantos: botões, cartões, imagens, campos e etiquetas */
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
body {
  margin: 0;
  background: var(--ink);   /* a moldura à volta das secções em cartão, da cor do hero e do rodapé */
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-family: var(--display); letter-spacing: -3px; line-height: 0.98; font-weight: 600; }
/* Títulos das secções: todos com o mesmo tamanho */
.services__intro h2, .fugas__cabeca h2, .percurso__cabeca h2, .servicos-pagina__cabeca h2, .obras-pagina__cabeca h2, .zones__copy h2,
.business__head h2, .gallery__head h2, .faq__intro h2, .contact__copy h2, .contato h2,
.antes-depois__head h2, .saber__cabeca h2, .integra__cabeca h2 { font-size: var(--titulo-seccao); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: var(--canto); }
/* Conteúdo só para ecrãs largos ou só para o telemóvel (≤ 640px) */
.so-telemovel { display: none; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--gutter); top: -100px; z-index: 100;
  padding: 12px 20px; border-radius: var(--canto);
  background: var(--accent); color: var(--ink); font-weight: 600;
  transition: top .15s ease;
}
.skip-link:focus { top: 12px; }

/* ---------- Primitivas ---------- */
.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
/* ---------- Secções em cartão ----------
   As secções claras são cartões de cantos arredondados sobre o fundo escuro
   da página (o mesmo do hero e do rodapé), afastados das bordas do ecrã e
   uns dos outros pela --moldura (dos lados) e pelo --entre-seccoes (em cima).
   O conteúdo fica na mesma coluna do
   cabeçalho (no telemóvel, 20px para dentro do cartão). */
.cartao {
  margin: var(--entre-seccoes) var(--moldura) 0;
  border-radius: var(--raio-seccao);
  background: var(--paper);
}
/* Cartões que são eles próprios o .wrap (ou a deteção de fugas, que se
   comporta como um): ocupam a largura toda menos a moldura e o padding
   centra o conteúdo nos 1440px, como o .wrap fazia */
.cartao.wrap {
  width: auto; max-width: none;
  margin-inline: var(--moldura);
  padding-inline: var(--recuo-cartao);
}
/* .wrap dentro de um cartão: tira-se a moldura à largura e ao padding */
.cartao > .wrap {
  max-width: none;
  padding-inline: var(--recuo-cartao);
}
/* Fundos alternados, para cada cartão se distinguir do seguinte. Página
   inicial: Serviços e Antes e depois no bege da página, Como funciona e
   Empresas a branco, Zonas escura (sem fundo, só com contorno), Perguntas
   frequentes no bege mais escuro,
   Contacto a branco. Página Serviços: lista no bege, deteção de fugas a
   branco, "De perto" no bege mais escuro. */
.fundo-branco { background: var(--white); }
/* Secção escura (como as Zonas da página inicial): sem fundo — fica o da
   página — com um contorno fino claro e o texto em branco */
.cartao--escuro { background: transparent; color: var(--paper); border: 1px solid rgba(255, 255, 255, .12); }
.cartao--escuro .lede { color: var(--muted-dark); }
.fundo-bege   { background: var(--paper-2); }
/* Etiqueta das secções: um ponto laranja antes do texto, como a do hero */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px; align-self: flex-start;
  font-size: 14px; font-weight: 500; line-height: 1.5; color: var(--accent-text);
}
.eyebrow::before {
  content: ''; width: 6px; height: 6px; flex-shrink: 0; border-radius: 50%; background: var(--accent);
}
/* Frase de introdução: o mesmo tamanho, cor e largura em todas as secções */
.lede, .zones__copy p {
  font-size: 16px; line-height: 21px; font-weight: 400; letter-spacing: -0.45px; color: #1E2021;
  max-width: 50ch; text-wrap: pretty;
}
h2 { text-wrap: balance; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 58px; padding: 0 26px; border-radius: var(--canto); border: 1px solid transparent;
  font-family: inherit; font-weight: 400; font-size: 14px; cursor: pointer;
}
/* Hover igual em todos os botões (os de texto e os do cartão do alçado): sobem 4px com uma sombra suave por baixo, e a seta "→",
   quando a há, avança 4px. Ao carregar voltam ao lugar. */
.btn, .cutaway__close, .cutaway__nav button {
  transition: transform .25s cubic-bezier(.22, .61, .36, 1), box-shadow .25s ease,
              background-color .2s ease, border-color .2s ease, color .2s ease;
}
:is(.btn, .cutaway__close, .cutaway__nav button):hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 20px -10px rgba(14, 17, 20, .45);
}
:is(.btn, .cutaway__close, .cutaway__nav button):active { transform: translateY(0); box-shadow: none; }
.btn svg { transition: transform .25s cubic-bezier(.22, .61, .36, 1); }
.btn:hover svg:has(path[d^="M5 12h14"]) { transform: translateX(4px); }
.btn svg { flex-shrink: 0; }
.btn--accent { background: var(--accent); color: var(--ink); }   /* texto escuro: contraste AA */
/* Botões "Ligue": texto branco sobre o laranja da marca (escolha do cliente).
   ATENÇÃO: só dá 2,9:1, abaixo do AA (4,5:1); com #C2500A dava 4,7:1 */
.btn--ligue { background: var(--accent); color: var(--white); }
.btn--paper  { background: var(--paper); color: var(--ink); }
.btn--ink    { background: var(--ink); color: var(--paper); }
.btn--ghost  { border-color: var(--line-dark-2); color: var(--paper); }

/* ==========================================================================
   CABEÇALHO
   ========================================================================== */
/* Cabeçalho fixo. No topo da página fica transparente sobre o hero, como
   se estivesse no fluxo (o hero reserva-lhe a altura com padding-top). Ao
   descer esconde-se; ao subir volta com fundo escuro. O JS escreve
   data-estado: "topo", "visivel" ou "escondido"; sem JS fica sempre
   visível, com fundo. Com o menu do telemóvel aberto, nunca se esconde. */
.cabecalho {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: var(--ink); color: var(--paper);
  transition: transform .3s cubic-bezier(.22, .61, .36, 1), background-color .2s ease;
}
.cabecalho[data-estado='topo'] { background: transparent; }
.cabecalho[data-estado='escondido'] { transform: translateY(-100%); }
.cabecalho:has(.mobile-menu[data-open='true']) { background: var(--ink); transform: none; }

/* Página inicial: a barra é uma caixa de vidro escuro, ao centro, que flutua
   por cima dos cartões do hero (e, ao subir a página, por cima das
   secções). O resto do cabeçalho fixo é transparente e deixa passar os
   cliques. */
.cabecalho--vidro,
.cabecalho--vidro[data-estado] { background: transparent; }
.cabecalho--vidro { padding: calc(var(--moldura) + 14px) var(--moldura) 0; pointer-events: none; }
.cabecalho--vidro .header-bar {
  pointer-events: auto;
  max-width: 1340px; margin-inline: auto;
  border: 1px solid rgba(244, 241, 236, .1); border-radius: 14px;
  background: rgba(22, 27, 32, .72);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  box-shadow: 0 12px 32px -20px rgba(14, 17, 20, .45);
}
.cabecalho--vidro .site-header { height: 72px; max-width: none; padding-inline: 24px 14px; }
.cabecalho--vidro .site-header__logo img { height: 40px; }
.cabecalho--vidro .nav { gap: 32px; }
.cabecalho--vidro .header-actions { gap: 20px; }
.cabecalho--vidro .header-actions .btn { height: 48px; }
/* Menu do telemóvel: uma caixa escura por baixo da barra, com a página
   escurecida por trás */
.cabecalho--vidro:has(.mobile-menu[data-open='true']) {
  height: 100vh; height: 100dvh; pointer-events: auto;
  background: rgba(14, 17, 20, .6);
}
.cabecalho--vidro .mobile-menu {
  pointer-events: auto;
  max-width: 1340px; margin: 8px auto 0; padding: 4px 0 20px;
  border: 0; border-radius: 14px; background: var(--ink);
}
.cabecalho--vidro .mobile-menu[data-open='true'] {
  height: auto;
  max-height: calc(100vh - 120px); max-height: calc(100dvh - 120px);
}
.cabecalho--vidro .mobile-menu .wrap { padding-inline: 20px; }
.cabecalho--vidro .mobile-menu a:last-of-type:not(.btn) { border-bottom: 0; }

/* A barra é full-bleed; só o conteúdo é que respeita o contentor de 1440px */
.header-bar { border-bottom: 1px solid var(--line-dark); }
.site-header {
  height: var(--altura-topo);
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
}
.site-header__logo img { height: 46px; width: auto; }
.nav { display: flex; gap: 40px; font-size: 15px; color: var(--nav-dark); }
.nav a:hover,
.nav a[aria-current='page'] { color: var(--paper); }
.header-actions { display: flex; align-items: center; gap: 28px; }
.header-phone { font-family: var(--mono); font-size: 15px; color: var(--paper); }
.header-actions .btn { height: 46px; padding: 0 22px; font-size: 15px; }

.nav-toggle {
  display: none;
  width: 44px; height: 44px; border-radius: var(--canto);
  border: 1px solid var(--line-dark-2); background: transparent; color: var(--paper);
  align-items: center; justify-content: center; cursor: pointer;
}
.mobile-menu {
  display: none;
  border-bottom: 1px solid var(--line-dark);
  padding: 8px 0 24px;
}
.mobile-menu .wrap { padding-block: 0; }
/* Dentro do cabeçalho fixo o menu abre por cima da página: rola se não couber */
.cabecalho .mobile-menu {
  max-height: calc(100vh - var(--altura-topo));
  max-height: calc(100svh - var(--altura-topo));
  overflow-y: auto; overscroll-behavior: contain;
}
.mobile-menu[data-open='true'] { display: block; }
/* Aberto, o menu ocupa o ecrã todo por baixo do cabeçalho (fundo preto do
   cabeçalho) e a página por trás deixa de rolar */
.cabecalho .mobile-menu[data-open='true'] {
  height: calc(100vh - var(--altura-topo) - 1px);    /* 1px: a linha por baixo da barra */
  height: calc(100dvh - var(--altura-topo) - 1px);
  max-height: none;
}
html:has(.mobile-menu[data-open='true']) { overflow: hidden; }
.mobile-menu a {
  display: block; padding: 14px 0;
  border-bottom: 1px solid var(--line-dark);
  font-size: 18px; color: var(--paper);
}
/* O botão do menu não herda o aspeto das ligações (bloco, sem padding lateral) */
.mobile-menu .btn { display: flex; width: 100%; margin-top: 20px; padding: 0 20px; border-bottom: 0; }
.mobile-menu .btn--ligue { color: var(--white); }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero,
.page-hero {
  padding-top: var(--altura-topo);   /* espaço do cabeçalho fixo */
  background-color: var(--ink);
  color: var(--paper);
  overflow: hidden;
}
/* Página inicial: duas metades iguais, com a mesma moldura das secções — o
   texto à esquerda, num cartão escuro, e a casa em corte à direita, sem
   caixa, direto no fundo da página; os indicadores vêm logo a seguir, numa secção própria
   (.indicadores). A barra do cabeçalho
   flutua ao centro, por cima dos cartões. Juntos ocupam o ecrã inteiro; até
   1100px ficam uns por baixo dos outros. */
/* A moldura por baixo é igual à de cima: ao abrir a página os cartões
   parecem flutuar no ecrã (a altura acompanha a do ecrã, svh) */
.hero--cartoes { padding: var(--moldura); }
.hero__cartoes {
  --topo-cartao: calc(var(--moldura) + 14px + 72px + 20px);   /* o que a barra tapa, mais folga */
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));   /* metade cada */
  grid-template-areas: "texto casa";
  gap: var(--moldura);
  min-height: calc(100vh - 2 * var(--moldura));
  min-height: calc(100svh - 2 * var(--moldura));
}
.hero__cartao { position: relative; min-width: 0; border-radius: 22px; background: var(--ink-2); }
.hero__cartao--texto {
  grid-area: texto;
  container-type: inline-size;
  display: flex; align-items: center;
  padding: var(--topo-cartao) clamp(24px, 3.4vw, 56px) clamp(28px, 5vh, 56px) var(--recuo-cartao);   /* à esquerda, o mesmo recuo das secções */
}
.hero__cartao--casa {
  grid-area: casa;
  background: transparent;   /* a casa assenta direto no fundo da página, num cartão só com contorno */
  border: 1px solid rgba(255, 255, 255, .12);
  display: flex; align-items: center; justify-content: center;
  padding: var(--topo-cartao) clamp(16px, 2vw, 28px) clamp(16px, 2vw, 28px);
}
.hero__copy { display: flex; flex-direction: column; gap: 36px; width: 100%; }
.hero__copy h1 { display: flex; flex-direction: column; gap: 36px; }
.hero__kicker {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--sans); font-weight: 400; font-size: 14px;
  letter-spacing: normal; line-height: 1.4; color: var(--accent);   /* laranja da marca: 6,6:1 sobre o fundo escuro */
}
.hero__dot {
  width: 8px; height: 8px; flex-shrink: 0; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 6px rgba(243, 116, 33, .22);
}
/* Título em 2 linhas: "A casa avariou." / "Nós resolvemos.", cada frase numa
   linha só. A mais comprida ("Nós resolvemos.") mede 7,47em: o tamanho nunca
   passa da largura do texto no cartão ÷ 7,6 (100cqw: o cartão é o contentor),
   no máximo 66px; 46px num telemóvel de 390px. */
.hero__display {
  display: block;
  font-family: var(--display); font-weight: 500;
  font-size: min(max(46px, 7.5vw), 66px, calc(100cqw / 7.6));
  line-height: 1; letter-spacing: -3px;
  white-space: nowrap;
}
.hero__display span { color: #58636C; }

@media (min-width: 1101px) {
  /* Etiqueta, título, texto e botões mais juntos (o texto tem a sua margem
     por baixo, que o separa dos botões) */
  .hero__copy,
  .hero__copy h1 { gap: 14px; }
}
.hero__lede { max-width: 540px; margin-bottom: 44px; font-size: 15px; line-height: 1.6; color: var(--paper); }   /* branco, como o título */
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; }
.hero__cta .btn { height: 60px; padding: 0 24px; }
.hero__nota { font-size: 12.5px; color: var(--muted-dark-2); }   /* custo da chamada, obrigatório junto ao número */

.hero__art { position: relative; margin: 0; width: 100%; }
/* container-type dá o cqw ao número dos pontos, que cresce com a fotografia.
   --z, --tx e --ty são escritos pelo JS ao ampliar um ponto. */
.cutaway__frame {
  --z: 1; --tx: 0%; --ty: 0%;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --raio: var(--canto);
  position: relative;
  container-type: inline-size;
  width: 100%; margin-inline: auto;
}
.cutaway__viewport { overflow: hidden; border-radius: var(--raio); }
/* Lado a lado (≥ 1101px), a largura da foto (1227×975) limita-se pela altura
   que sobra no cartão: o ecrã menos a barra e as margens do cartão (~200px) */
@media (min-width: 1101px) {
  .cutaway__frame {
    max-width: calc((100vh - 200px) * 1227 / 975);
    max-width: calc((100svh - 200px) * 1227 / 975);
  }
}
/* Portáteis (altura útil ≤ 900px): botões mais baixos e texto mais junto */
@media (min-width: 1101px) and (max-height: 900px) {
  .hero__cta .btn { height: 45px; }
  .hero__lede { line-height: 1.5; }
}
@media (max-width: 1100px) {
  .hero__cartoes { grid-template-columns: minmax(0, 1fr); grid-template-areas: "texto" "casa"; min-height: 0; }
  .hero__cartao--casa { padding-top: clamp(16px, 3vw, 28px); }
}
@media (max-width: 640px) {
  .cabecalho--vidro { padding-top: calc(var(--moldura) + 8px); }
  .cabecalho--vidro .site-header { height: 60px; padding-inline: 16px 8px; }
  .cabecalho--vidro .site-header__logo img { height: 32px; }
  .hero__cartoes { --topo-cartao: calc(var(--moldura) + 8px + 60px + 24px); }
}

/* Dica "Clique num número" ("Toque" em ecrãs táteis). Por defeito fica por
   cima da foto; com a foto a partir de 460px passa para dentro dela, no canto
   superior esquerdo, que é céu vazio — mais estreita, taparia o telhado. Fora
   da foto acrescentava ~47px ao hero, o que o impedia de caber em ecrãs baixos. */
.cutaway__hint {
  display: flex; align-items: center; gap: 8px; width: fit-content;
  margin: 0 0 14px; padding: 7px 14px 7px 10px; border-radius: var(--canto);
  background: var(--ink-2); border: 1px solid var(--line-dark-2);
  font-size: 13px; line-height: 1.3; color: var(--paper);
  pointer-events: none;
  transition: opacity .3s ease, visibility .3s;
}
.cutaway__hint svg { color: var(--accent); flex-shrink: 0; }
.cutaway__hint-toque { display: none; }
@media (hover: none) {
  .cutaway__hint-rato { display: none; }
  .cutaway__hint-toque { display: inline; }
}
@container (min-width: 460px) {
  .cutaway__frame .cutaway__hint { position: absolute; top: 16px; left: 16px; z-index: 1; margin: 0; }
  /* Sobreposta, sai depois do primeiro ponto aberto para não tapar a foto */
  .cutaway__frame[data-visto] .cutaway__hint { opacity: 0; visibility: hidden; }
}
.cutaway__stage {
  position: relative;
  transform-origin: 0 0;
  transform: translate(var(--tx), var(--ty)) scale(var(--z));
  transition: transform .7s var(--ease);
}
.cutaway__photo { width: 100%; height: auto; }

/* Área de toque de 44px no mínimo; o disco visível é metade dela.
   scale compensa a ampliação do palco para o ponto manter o tamanho. */
.cutaway__pin {
  position: absolute;
  left: calc(var(--x) * 1%); top: calc(var(--y) * 1%);
  width: max(44px, 7.2%); aspect-ratio: 1;
  translate: -50% -50%; scale: calc(1 / var(--z));
  display: grid; place-items: center;
  padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer;
  transition: scale .7s var(--ease), opacity .3s ease, visibility .3s;
}
.cutaway__pin::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: rgba(243, 116, 33, .16);
}
.cutaway__pin > span:first-child {
  position: relative;
  width: 50%; aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent); color: var(--ink);
  box-shadow: 0 0 0 3px rgba(243, 116, 33, .28);
  box-shadow: 0 0 0 max(2px, .28cqw) rgba(243, 116, 33, .28);
  font-family: var(--mono); font-weight: 500; line-height: 1;
  font-size: 13px; font-size: max(11px, 1.93cqw);
  transition: background-color .3s ease, color .3s ease, transform .3s var(--ease);
}
.cutaway__pin:hover > span:first-child { transform: scale(1.12); }
.cutaway__pin:focus-visible { outline-offset: 0; border-radius: 50%; }

/* Ampliado: os outros pontos saem (e do Tab); o escolhido vira um anel vazado
   que cresce com a foto e contorna o equipamento em vez de o tapar. */
.cutaway__frame[data-ponto]:not([data-ponto='']) .cutaway__pin { opacity: 0; visibility: hidden; }
.cutaway__frame[data-ponto] .cutaway__pin[aria-expanded='true'] { opacity: 1; visibility: visible; scale: 1; }
.cutaway__pin[aria-expanded='true'] > span:first-child {
  width: 100%; background: transparent; color: transparent;
  box-shadow: inset 0 0 0 1px var(--accent), 0 0 0 3px rgba(243, 116, 33, .18);
}
.cutaway__pin[aria-expanded='true']:hover > span:first-child { transform: none; }
.cutaway__pin[aria-expanded='true']::before { background: none; }
.cutaway__frame[data-ponto]:not([data-ponto='']) .cutaway__stage { cursor: zoom-out; }

/* Cartão do serviço: ao lado oposto do ponto no desktop, por baixo no mobile */
.cutaway__card {
  position: absolute; bottom: 16px; right: 16px;
  width: min(340px, calc(46% - 16px));
  display: flex; flex-direction: column; gap: 12px;
  padding: 20px 20px 18px; border-radius: var(--canto);
  background: var(--ink-2); border: 1px solid var(--line-dark-2);
  color: var(--paper);
}
.cutaway__card:focus { outline: none; }
.cutaway__card:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.cutaway__frame[data-lado='esquerda'] .cutaway__card { right: auto; left: 16px; }
.cutaway__card[hidden] { display: none; }
.cutaway__card-top { display: flex; align-items: center; justify-content: space-between; }
.cutaway__card-ref {
  font-family: var(--mono); font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--muted-dark-2);
}
.cutaway__close,
.cutaway__nav button {
  width: 36px; height: 36px; flex-shrink: 0; border-radius: var(--canto);
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-dark-2); background: transparent; color: var(--paper);
  cursor: pointer;
}
.cutaway__close { margin: -6px -6px 0 0; border-color: transparent; }
.cutaway__info { display: flex; flex-direction: column; gap: 8px; font-size: 15px; line-height: 1.5; color: var(--muted-dark); }
.cutaway__info[hidden] { display: none; }
.cutaway__title {
  font-family: var(--display); font-weight: 800; font-size: 24px;
  line-height: 1.05; letter-spacing: -0.035em; color: var(--paper);
}
.cutaway__also { font-size: 13.5px; color: var(--muted-dark-2); }
.cutaway__also a { color: var(--paper); text-decoration: underline; text-underline-offset: 3px; }
.cutaway__card-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 4px; }
.cutaway__card-actions .btn { height: 46px; padding: 0 18px; font-size: 15px; white-space: nowrap; }
.cutaway__nav { display: flex; gap: 8px; }

/* Entrada do cartão e da nova informação ao trocar de ponto */
@media (prefers-reduced-motion: no-preference) {
  @keyframes cartao-entra {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
  }
  .cutaway__card:not([hidden]) { animation: cartao-entra .45s .25s var(--ease) backwards; }
  .cutaway__info:not([hidden]) { animation: cartao-entra .35s var(--ease) backwards; }
}

/* Indicadores (secção própria entre o hero e os Serviços): quatro caixas
   escuras como os cartões do hero, sem contorno nem sombra, cada uma com um
   ícone laranja de traço fino (pseudo-elementos: o <dl> só pode ter
   <dt>/<dd> dentro de cada <div>). */
.indicadores__lista {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--moldura);
  margin: 0;   /* tira a margem por omissão do <dl> */
  padding: 22px 0 28px;
}
.indicador {
  position: relative;
  display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center;
  column-gap: 16px; row-gap: 1px;
  padding: 18px 24px; border-radius: 8px;
  background: rgba(244, 241, 236, .055);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
}
.indicador::before {   /* o quadrado do ícone */
  content: ''; grid-column: 1; grid-row: 1 / span 2;
  width: 40px; height: 40px; border-radius: 11px;
  background: rgba(243, 116, 33, .12); border: 1px solid rgba(243, 116, 33, .28);
}
.indicador::after {    /* o ícone */
  content: ''; position: absolute; left: 24px; top: 50%; translate: 0 -50%;
  width: 40px; height: 40px; background: var(--accent);
  -webkit-mask: var(--icone) center / 20px no-repeat; mask: var(--icone) center / 20px no-repeat;
}
.indicador:nth-child(1) { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.1-7-11a7 7 0 0 1 14 0c0 4.9-7 11-7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.6'/%3E%3C/svg%3E"); }
.indicador:nth-child(2) { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E"); }
.indicador:nth-child(3) { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v5.5c0 4.4-3 7.8-7 9.5-4-1.7-7-5.1-7-9.5V6z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E"); }
.indicador:nth-child(4) { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M8.5 12.2l2.3 2.3 4.7-4.8'/%3E%3C/svg%3E"); }
.indicador dt { grid-column: 2; font-size: 12px; line-height: 1.3; color: var(--muted-dark); }
.indicadores { margin: 0 var(--moldura); color: var(--paper); }   /* em cima, a moldura de baixo do hero */
.indicadores .indicadores__lista { padding: 0; }
.indicadores .indicador { border-radius: var(--raio-seccao); background: var(--ink-2); padding-block: 22px; }
/* Portáteis (1101–1365px): os cartões são estreitos; menos espaço por dentro
   e letra um pouco menor, para cada texto caber numa linha */
@media (min-width: 1101px) and (max-width: 1365px) {
  .indicador { column-gap: 12px; padding: 14px 16px; }
  .indicador::after { left: 16px; }
}
.indicador dd { grid-column: 2; margin: 0; font-family: var(--display); font-weight: 600; font-size: 16px; line-height: 1.25; letter-spacing: -0.01em; }
@media (min-width: 1101px) and (max-width: 1365px) { .indicador dd { font-size: 15px; } }
/* Horário "09h–13h e das 15h–19h": as duas partes nunca se partem; se não
   couberem numa linha, "e das 15h–19h" passa inteiro para baixo */
.horario__parte, .nowrap { white-space: nowrap; }
/* Desktop (≥ 1101px, numa linha): "09h–13h · 15h–19h", sem o "e das" */
.horario__ponto { display: none; }
@media (min-width: 1101px) {
  .horario__e { display: none; }
  .horario__ponto { display: inline; }
}
/* Telemóvel: o ícone fica pequeno, ao lado da etiqueta, para o texto ter a
   largura do cartão (em 2 × 2) */
@media (max-width: 640px) {
  .indicador { grid-template-columns: minmax(0, 1fr); row-gap: 3px; padding: 12px 14px 13px; }
  .indicador::before { display: none; }
  .indicador::after { left: 14px; top: 13.5px; translate: none; width: 15px; height: 15px; -webkit-mask-size: 15px; mask-size: 15px; }
  .indicador dt { grid-column: 1; padding-left: 21px; }
  .indicador dd { grid-column: 1; font-size: 15px; }
}

/* ==========================================================================
   CLIENTES
   ========================================================================== */
/* Faixa no fundo da secção Zonas: uma caixa escura, sem contorno, com a etiqueta à esquerda
   (ponto laranja, como as outras etiquetas) e os nomes a passar devagar,
   separados por pontos, com as pontas a desvanecer. No telemóvel a etiqueta
   fica por cima. */
.clients {
  margin-top: clamp(45px, 7vw, 80px);
  display: flex; align-items: center; gap: 24px;
  padding: 20px 18px; border-radius: 12px;
  background: var(--ink-2);
}
.clients__label {
  display: flex; align-items: center; gap: 10px; flex-shrink: 0;
  padding-right: 28px; border-right: 1px solid var(--line-dark);
  font-size: 13px; line-height: 1.45; font-weight: 500; color: var(--muted-dark);
}
.clients__label::before {
  content: ''; width: 6px; height: 6px; flex-shrink: 0; border-radius: 50%; background: var(--accent);
}
.clients__list {
  display: flex; align-items: center;
  font-family: var(--display); font-weight: 700; font-size: clamp(16px, 1.4vw, 18px);
  letter-spacing: -0.02em; color: var(--paper);
}
.clients__list span { display: inline-flex; align-items: center; white-space: nowrap; }
.clients__list abbr { text-decoration: none; }
/* ponto separador depois de cada nome (também depois do último: assim o
   espaço na volta do marquee é igual aos outros) */
.clients__list span::after {
  content: ''; width: 4px; height: 4px; margin: 0 26px; flex-shrink: 0;
  border-radius: 50%; background: var(--line-dark-2);
}

/* ==========================================================================
   SERVIÇOS
   ========================================================================== */
.services {
  padding-block: var(--espaco-seccao);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(32px, 4vw, 48px) var(--grelha-gap);
  align-items: start;
}
.services__intro { display: flex; flex-direction: column; gap: var(--cabeca-gap); }
/* Nota por baixo dos cartões: texto simples, sem caixa */
.note { font-size: 14px; line-height: 1.6; color: var(--ink-soft); }
.services__corpo { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
/* Duas colunas, lidas da esquerda para a direita (01 | 02, 03 | 04…) */
.services__list {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(10px, 1.2vw, 16px) var(--grelha-gap);   /* entre colunas, o da grelha: cada cartão ocupa 4 colunas */
}

/* Cartão branco: número e seta em cima, nome e descrição por baixo; a partir
   de 900px fica em linha (número à esquerda, nome e descrição ao meio, seta
   à direita). O fundo escuro (do destaque e do hover) é um ::before que
   cobre o cartão, para o acender sem mexer no texto. */
.service {
  --sangra: 0px;    /* quanto o fundo escuro sai para os lados */
  --recuo: 20px;    /* padding lateral do cartão */
  position: relative; isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 32px;
  gap: 6px 12px; align-items: center; align-content: start;
  padding: 18px var(--recuo) 20px;
  border-radius: var(--canto);   /* sem contorno: o branco destaca-se do fundo claro */
  background: var(--white); color: var(--ink);
}
.service::before {
  content: ''; position: absolute; z-index: -1;
  inset: 0 calc(var(--sangra) * -1);
  border-radius: var(--canto);
  background: var(--ink); opacity: 0;
  transition: opacity .2s ease;
}
.service__num   { grid-column: 1; grid-row: 1; font-family: var(--mono); font-size: 13px; color: var(--muted-light); }
.service__name  { grid-column: 1 / -1; grid-row: 2; font-family: var(--display); font-weight: 700; font-size: clamp(19px, 1.6vw, 22px); line-height: 1.1; letter-spacing: -0.03em; }
.service__desc  { grid-column: 1 / -1; grid-row: 3; font-size: 14px; line-height: 1.45; color: var(--muted-light); }
.service__arrow {
  grid-column: 2; grid-row: 1;
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid #C9C3B8;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
@media (min-width: 900px) {
  .service {
    grid-template-columns: 32px minmax(0, 1fr) 32px;
    gap: 2px 14px; padding-block: 18px 20px;
  }
  .service__name  { grid-column: 2; grid-row: 1; }
  .service__desc  { grid-column: 2; grid-row: 2; }
  .service__arrow { grid-column: 3; grid-row: 1 / span 2; }
}

/* Cartão escuro: o "Ver todos" sempre, os restantes ao passar o rato ou
   com o foco do teclado */
.service:is(.service--todos, :hover, :focus-visible) { color: var(--paper); }
.service:is(.service--todos, :hover, :focus-visible)::before { opacity: 1; }
.service:is(.service--todos, :hover, :focus-visible) .service__num { color: var(--muted-dark-2); }
.service:is(.service--todos, :hover, :focus-visible) .service__desc { color: var(--muted-dark); }
.service:is(.service--todos, :hover, :focus-visible) .service__arrow { background: var(--accent); color: var(--ink); border-color: var(--accent); }
.service:focus-visible { outline-offset: 6px; }

/* Página inicial (≥ 1101px): o texto nas 4 primeiras colunas da grelha, os
   cartões nas outras 8. Até 1100px o texto fica por cima. */
@media (min-width: 1101px) {
  .services { grid-template-columns: minmax(0, var(--col-4)) minmax(0, 1fr); }
  /* Os cartões começam à altura do título, não da etiqueta "Serviços":
     descem a altura da etiqueta (14px × 1,5) mais o intervalo até ao título */
  .services__corpo { margin-top: calc(14px * 1.5 + var(--cabeca-gap)); }
}

/* ---------- Serviços com ilustração (página inicial) ----------
   Desktop: título à esquerda (6 colunas) e frase à direita, alinhados por
   baixo; por baixo, 4 × 2 cartões (3 colunas da grelha cada): ilustração num
   painel bege, número e seta, nome e descrição. 641–899px: 2 por linha.
   Telemóvel: um por linha, com a ilustração à esquerda. */
.services--ilustrado { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1101px) {
  .services--ilustrado {
    grid-template-columns: minmax(0, var(--col-6)) minmax(0, 1fr);
    grid-template-areas: "intro lede" "corpo corpo";
    align-items: end; row-gap: clamp(40px, 4.4vw, 64px);
  }
  .services--ilustrado .services__intro { grid-area: intro; }
  .services--ilustrado .services__lede { grid-area: lede; }
  .services--ilustrado .services__corpo { grid-area: corpo; margin-top: 0; }
}
.services__list--ilustrada { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
@media (max-width: 899px) { .services__list--ilustrada { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.service.service--ilustrado {
  grid-template-columns: minmax(0, 1fr) 32px;
  grid-template-areas: "visual visual" "num seta" "nome nome" "desc desc";
  align-content: start; gap: 4px 12px;
  padding: 8px 8px 24px;
}
/* Painel da imagem (render 3D do serviço, 4:3, a encher o painel). Sem
   imagem, fica a quadrícula técnica do hero sobre o bege. */
.service--ilustrado .service__visual {
  grid-area: visual; margin-bottom: 16px;
  aspect-ratio: 4 / 3; border-radius: 6px; overflow: hidden;
  background-color: var(--paper);
  background-image:
    linear-gradient(rgba(14, 17, 20, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14, 17, 20, .05) 1px, transparent 1px);
  background-size: 16px 16px; background-position: center;
}
.service--todos .service__visual {
  background-color: #1C2228;
  background-image:
    linear-gradient(rgba(244, 241, 236, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(244, 241, 236, .04) 1px, transparent 1px);
}
.service__visual img { display: block; width: 100%; height: 100%; object-fit: cover; transition: scale .6s var(--saida); }
.service:hover .service__visual img { scale: 1.04; }
.service--ilustrado .service__num { grid-area: num; align-self: center; padding-left: 12px; }
.service--ilustrado .service__arrow { grid-area: seta; margin-right: 12px; }
.service--ilustrado .service__name { grid-area: nome; margin-top: 2px; padding-inline: 12px; }
.service--ilustrado .service__desc { grid-area: desc; padding-inline: 12px; }
@media (max-width: 640px) {
  .services__list--ilustrada { grid-template-columns: minmax(0, 1fr); }
  .service.service--ilustrado {
    grid-template-columns: 96px minmax(0, 1fr) 32px;
    grid-template-areas: "visual num seta" "visual nome nome" "visual desc desc";
    gap: 2px 14px; padding: 8px 12px 8px 8px; align-items: center;
  }
  .service--ilustrado .service__visual { margin: 0; width: 96px; height: 96px; aspect-ratio: auto; align-self: center; }
  .service--ilustrado :is(.service__num, .service__name, .service__desc) { padding: 0; }
  .service--ilustrado .service__arrow { margin: 0; }
}

/* ==========================================================================
   PÁGINAS INTERNAS
   ========================================================================== */
/* Topo das páginas internas igual ao texto do hero da página inicial:
   etiqueta com o ponto laranja, título em 2 linhas (a 2.ª a cinzento),
   frase, botões e a menção do custo da chamada (classes .hero__*) */
.page-hero__body {
  display: flex; flex-direction: column; gap: 14px;
  padding-block: clamp(36px, 5vw, 64px) clamp(56px, 7vw, 96px);
}
.page-hero h1 { display: flex; flex-direction: column; gap: 14px; margin-top: 10px; margin-bottom: 40px; }
.page-hero h1:last-child { margin-bottom: 0; }   /* Serviços e Projetos: sem botões por baixo do título */
.page-hero .hero__display { white-space: normal; text-wrap: balance; }   /* nas páginas internas as frases podem ser mais compridas */
.page-hero .hero__lede a { color: var(--paper); text-decoration: underline; text-underline-offset: 3px; }
/* Páginas internas: o topo em dois cartões, como o hero da página inicial —
   o texto num cartão escuro e uma foto num cartão transparente com contorno
   claro — com a barra de vidro do cabeçalho a flutuar por cima. Mais baixo
   do que o da página inicial; até 1100px a foto fica por baixo do texto. */
.page-hero--cartoes { padding: var(--moldura); }
.page-hero__cartoes { min-height: clamp(480px, 72svh, 740px); }
.page-hero__cartoes .page-hero__body { padding: 0; width: 100%; }
.page-hero--cartoes + main > .cartao:first-of-type { margin-top: 0; }   /* a moldura de baixo do topo já faz o intervalo */
.hero__cartao--foto {
  grid-area: casa; margin: 0; padding: 0; overflow: hidden;   /* a foto vai até ao contorno, com os cantos do cartão */
  background: transparent; border: 1px solid rgba(255, 255, 255, .12);
}
.hero__cartao--foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 1100px) {
  .page-hero__cartoes { min-height: 0; }
  .hero__cartao--foto img { height: auto; aspect-ratio: 16 / 9; }
}
.breadcrumb ol {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 0; padding: 0; list-style: none;
  font-size: 14px; color: var(--muted-dark);
}
.breadcrumb li + li::before { content: '/'; margin-right: 8px; color: var(--muted-dark-2); }
.breadcrumb a:hover { color: var(--paper); text-decoration: underline; }

/* Página de serviços: etiqueta e título à esquerda, frase à direita (como
   na página inicial); por baixo, os 8 mais pedidos em cartões com
   ilustração (4 × 2) e, em "E também", os outros 5 em cartões compactos
   (3 por linha) com a caixa "Não fazemos" a fechar a grelha. */
.servicos-pagina {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: 24px var(--grelha-gap);
  padding-block: var(--espaco-seccao);
}
.servicos-pagina__cabeca { display: flex; flex-direction: column; gap: var(--cabeca-gap); }
/* Os serviços por área numa grelha tipo bento (12 colunas no desktop):
   Água (7) e Eletricidade (5) em cima; Obras, Limpezas e Seguradoras (4
   cada) por baixo; o "Não fazemos" a fechar. Cada área num cartão branco
   com a ilustração (Limpezas: um desenho gráfico em escuro) e um botão
   redondo com seta, o título,
   uma frase e os serviços em pílulas só com texto. Ao passar o
   rato a ilustração aproxima, o botão fica laranja e roda, e as pílulas
   ficam escuras. */
.areas { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 10px; margin-top: clamp(4px, 1.5vw, 16px); }
.area {
  display: flex; flex-direction: column; gap: 6px;
  padding: 8px; border-radius: 20px; background: var(--white);
}
.area--agua { grid-column: span 7; }
.area--eletricidade { grid-column: span 5; }
.area--obras, .area--limpezas, .area-seguro { grid-column: span 4; }
.area__capa {
  position: relative; flex: 1; min-height: 220px; overflow: hidden;
  border-radius: 14px; background: var(--paper);
}
.area--agua .area__capa, .area--eletricidade .area__capa { min-height: 300px; }
.area__capa img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: scale .8s var(--saida); }
.area:hover .area__capa img { scale: 1.05; }
.area__botao {
  position: absolute; top: 12px; right: 12px;
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--white); color: var(--ink);
  transition: background-color .25s ease;
}
.area__botao svg { transition: rotate .45s var(--saida); }
.area__botao:hover, .area__botao:focus-visible { background: var(--accent); }
.area:hover .area__botao svg, .area__botao:focus-visible svg { rotate: 45deg; }
.area__corpo { display: flex; flex-direction: column; gap: 4px; padding: 24px 16px; border-radius: 14px; background: var(--paper); }
.area__titulo { font-family: var(--display); font-weight: 600; font-size: clamp(24px, 2.2vw, 32px); line-height: 1.05; letter-spacing: -0.03em; }
.area__texto { max-width: 60ch; font-size: 14px; line-height: 1.5; color: #2A2C2F; text-wrap: pretty; }
.area__chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  min-height: 30px; padding: 2px 14px; border-radius: 999px;   /* só texto */
  font-size: 12px; font-weight: 500; color: var(--ink);
  background: var(--white);   /* pílulas brancas sobre o fundo cinzento do corpo */
  transition: background-color .2s ease, color .2s ease;
}
.chip__num { color: #D95C0D; font-weight: 600; }   /* número do serviço dentro da área */
.chip:is(:hover, :focus-visible) { background: var(--ink); color: var(--paper); }
.chip:is(:hover, :focus-visible) .chip__num { color: var(--accent); }
.chip:focus-visible, .area__botao:focus-visible, .area-seguro:focus-visible { outline-offset: 3px; }
/* Limpezas: cartão escuro, com um desenho de ícones grandes em traço fino e as ondas */
.area--limpezas { background: var(--ink); color: var(--paper); }
.area--limpezas .area__texto { color: var(--muted-dark); }
.area--limpezas .area__corpo { background: var(--ink-2); }
.area--limpezas .chip:is(:hover, :focus-visible) { background: var(--accent); color: var(--ink); }
.area__capa--grafica { isolation: isolate; background: var(--ink-2); }
.area__capa--grafica::before, .area__capa--grafica::after {
  content: ''; position: absolute; z-index: -1; border-radius: 50%;
  border: 1px solid rgba(244, 241, 236, .1); left: 50%; top: 50%;
}
.area__capa--grafica::before { width: 160px; height: 160px; margin: -80px 0 0 -80px; }
.area__capa--grafica::after { width: 280px; height: 280px; margin: -140px 0 0 -140px; }
.area__grafico { position: absolute; color: var(--accent); transition: translate .8s var(--saida); }
.area__grafico--a { left: 50%; top: 50%; margin: -40px 0 0 -52px; }
.area__grafico--b { left: 50%; top: 50%; margin: -34px 0 0 14px; color: var(--paper); opacity: .8; }
.area--limpezas:hover .area__grafico--a { translate: -4px -4px; }
.area--limpezas:hover .area__grafico--b { translate: 4px 4px; }
/* Seguradoras: cartão laranja com as ondas e o botão escuro */
.area-seguro {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  min-height: 300px; padding: 22px; border-radius: 20px;
  background: var(--accent); color: var(--ink);
}
.area-seguro::before, .area-seguro::after {
  content: ''; position: absolute; z-index: -1; border-radius: 50%;
  border: 1px solid rgba(14, 17, 20, .16);
}
.area-seguro::before { width: 240px; height: 240px; top: -120px; right: -120px; }
.area-seguro::after { width: 400px; height: 400px; top: -200px; right: -200px; }
.area-seguro__icone {
  width: 52px; height: 52px; margin-bottom: auto; border-radius: 14px;
  display: grid; place-items: center; background: var(--ink); color: var(--accent);
}
.area-seguro__etiqueta { margin-top: 24px; font-family: var(--mono); font-size: 12px; font-weight: 500; }
.area-seguro__titulo { font-family: var(--display); font-weight: 600; font-size: clamp(24px, 2.2vw, 32px); line-height: 1.05; letter-spacing: -0.03em; }
.area-seguro__texto { max-width: 30ch; font-size: 14px; line-height: 1.5; color: #2A1408; }
.area-seguro__botao {
  position: absolute; right: 18px; bottom: 18px;
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; background: var(--ink); color: var(--paper);
}
.area-seguro__botao svg { transition: rotate .45s var(--saida); }
.area-seguro:is(:hover, :focus-visible) .area-seguro__botao svg { rotate: 45deg; }
.area-seguro :focus-visible { outline-color: var(--ink); }
/* Não fazemos: uma linha discreta a fechar a grelha */
.area-nao {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 12px; margin: 0;
  padding: 14px 18px; border-radius: 14px; border: 1px dashed #C4C4C4;
  font-size: 13px; line-height: 1.45; color: var(--muted-light);
}
.area-nao svg { flex: none; color: var(--muted-light); }
.area-nao strong { color: var(--ink); font-weight: 600; }
@media (max-width: 1100px) {
  .area--agua { grid-column: 1 / -1; }
  .area--eletricidade, .area--obras { grid-column: span 6; }
  .area--limpezas, .area-seguro { grid-column: span 6; }
  .area--agua .area__capa { min-height: 320px; }
}
@media (max-width: 640px) {
  .areas { grid-template-columns: minmax(0, 1fr); }
  .area--agua, .area--eletricidade, .area--obras, .area--limpezas, .area-seguro { grid-column: 1; }
  .area__capa, .area--agua .area__capa, .area--eletricidade .area__capa { min-height: 0; aspect-ratio: 16 / 10; flex: none; }
  .area__capa--grafica { aspect-ratio: 16 / 7; }
  .area__corpo { padding: 20px 14px; }
  .area-seguro { min-height: 0; padding: 20px 20px 72px; }
  .area-seguro__etiqueta { margin-top: 16px; }
}
@media (min-width: 1101px) {
  .servicos-pagina {
    grid-template-columns: minmax(0, var(--col-6)) minmax(0, 1fr);
    align-items: end;
  }
  .servicos-pagina > :not(.servicos-pagina__cabeca, .servicos-pagina__lede) { grid-column: 1 / -1; }
}

/* ==========================================================================
   ESCLARECIMENTO (comunicado sobre a "SOS Casa Reparações 24 Horas")
   ========================================================================== */
/* Topo: no lugar da foto, as duas empresas frente a frente, como dois
   cartões de identificação — a nossa em vidro escuro, com o logótipo e os
   dados; a outra só com contorno tracejado e o carimbo "Sem qualquer
   relação" — e o sinal ≠ laranja entre as duas. Por trás, as ondas da marca.
   Lado a lado, a barra do cabeçalho tapa o topo do cartão, por isso o
   conteúdo desce o mesmo que o texto (--topo-cartao). */
.hero__cartao--compara {
  grid-area: casa; margin: 0; overflow: hidden; isolation: isolate;
  display: flex; align-items: center; justify-content: center;
  padding: var(--topo-cartao) clamp(20px, 3.4vw, 56px) clamp(28px, 5vh, 56px);
  background: transparent; border: 1px solid rgba(255, 255, 255, .12);
}
.hero__cartao--compara::before, .hero__cartao--compara::after {
  content: ''; position: absolute; z-index: -1; left: 50%; top: 50%; border-radius: 50%;
  border: 1px solid rgba(243, 116, 33, .22);
}
.hero__cartao--compara::before { width: 440px; height: 440px; margin: -220px 0 0 -220px; }
.hero__cartao--compara::after { width: 720px; height: 720px; margin: -360px 0 0 -360px; border-color: rgba(243, 116, 33, .12); }
@media (max-width: 1100px) {
  .hero__cartao--compara { padding: clamp(28px, 5vw, 48px) clamp(14px, 4vw, 40px); }
}
.frente { display: grid; gap: 14px; width: 100%; max-width: 500px; }
.id { position: relative; display: flex; flex-direction: column; border-radius: 20px; padding: clamp(18px, 2vw, 26px); }
.id--nos {
  margin-right: clamp(0px, 3vw, 44px);
  background: rgba(22, 27, 32, .78); border: none;
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
}
.id--outra {
  margin-left: clamp(0px, 3vw, 44px); rotate: 1.5deg;
  background: rgba(14, 17, 20, .55); border: 1px dashed rgba(244, 241, 236, .26);
}
.id__topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 12px; }
.id__topo img { height: 32px; width: auto; }
.id__estado {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px 5px 9px; border-radius: 999px;
  font-size: 12.5px; font-weight: 500; line-height: 1.3;
}
.id__estado--nos { background: var(--accent); color: var(--ink); }
.id__estado--outra { border: 1px dashed rgba(244, 241, 236, .3); color: var(--muted-dark); }
.id__dados { margin: 18px 0 0; }
.id__dados > div {
  display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 0 14px;
  padding: 10px 0; border-top: 1px solid var(--line-dark);
}
.id__dados dt { font-family: var(--mono); font-size: 12px; line-height: 1.9; color: var(--muted-dark-2); }
.id__dados dd { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--paper); }
.id__nome {
  margin-top: 16px; max-width: 15ch;
  font-family: var(--display); font-weight: 600; font-size: clamp(22px, 2vw, 28px);
  line-height: 1.1; letter-spacing: -0.02em; color: var(--muted-dark-2);
}
.id__carimbo {
  align-self: flex-end; margin-top: 4px; padding: 7px 12px;
  border: 2px solid var(--accent); border-radius: 6px; rotate: -8deg;
  font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent);
}
/* O ≠ fica no intervalo entre os dois cartões, por cima dos dois, com um
   anel da cor da página a recortá-lo (como as setas do Como funciona) */
.frente__diferente { position: relative; z-index: 2; height: 0; }
.frente__diferente span {
  position: absolute; left: 50%; top: 50%; width: 62px; height: 62px; margin: -31px 0 0 -31px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--accent); color: var(--ink); border: 5px solid var(--ink);
}
@media (max-width: 480px) {
  .id__dados > div { grid-template-columns: minmax(0, 1fr); }
}
/* Ao abrir: os cartões sobem, o ≠ roda para o lugar e o carimbo bate */
.com-movimento .id--nos { animation: id-entra .9s var(--saida) .2s both; }
.com-movimento .id--outra { animation: id-entra .9s var(--saida) .35s both; }
.com-movimento .frente__diferente span { animation: diferente-entra .8s var(--saida) .75s both; }
.com-movimento .id__carimbo { animation: carimbo .45s cubic-bezier(.3, 1.5, .5, 1) 1.15s both; }
@keyframes id-entra { from { opacity: 0; translate: 0 18px; } }
@keyframes diferente-entra { from { scale: 0; rotate: -120deg; } }
@keyframes carimbo { from { opacity: 0; scale: 1.7; } }

/* Em resumo: título à esquerda e frase à direita (como nos Serviços); por
   baixo, os quatro pontos do comunicado em 2 × 2 caixas do mesmo tamanho,
   todas pela mesma ordem — número e etiqueta, título, uma frase e, a ocupar
   o resto da caixa, um painel que mostra o ponto: a pesquisa, o que não é
   nosso (riscado), o estado do pedido ao Google e os contactos oficiais. */
.saber {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 3.4vw, 40px) var(--grelha-gap);
  padding-block: var(--espaco-seccao);
}
.saber__cabeca { display: flex; flex-direction: column; gap: var(--cabeca-gap); }
@media (min-width: 1101px) {
  .saber { grid-template-columns: minmax(0, var(--col-6)) minmax(0, 1fr); align-items: end; row-gap: clamp(40px, 4.4vw, 64px); }
  .saber__grelha { grid-column: 1 / -1; }
}
.saber__grelha { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.saber__caixa {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; gap: 10px;
  padding: clamp(20px, 2.2vw, 28px); border-radius: 14px; background: var(--white);
}
.saber__caixa--nao { background: var(--ink); color: var(--paper); }
.saber__caixa--google { background: var(--accent); color: var(--ink); }
.saber__topo { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.saber__num {
  flex: none; width: 40px; height: 40px; border-radius: 10px;
  display: grid; place-items: center; background: var(--accent); color: var(--ink);
  font-family: var(--mono); font-size: 14px; font-weight: 600;
}
.saber__caixa--google .saber__num { background: var(--ink); color: var(--accent); }
.saber__etiqueta { font-family: var(--mono); font-size: 13px; color: var(--muted-light); }
.saber__caixa--nao .saber__etiqueta { color: var(--muted-dark); }
.saber__caixa--google .saber__etiqueta { color: #2A1408; }
.saber__caixa h3 { max-width: 24ch; font-size: clamp(24px, 2.2vw, 30px); line-height: 1.12; letter-spacing: -0.03em; }
.saber__caixa p { max-width: 50ch; font-size: 15px; line-height: 1.5; color: #2A2C2F; text-wrap: pretty; }
.saber__caixa--nao p { color: var(--muted-dark); }
.saber__caixa--google p { color: #2A1408; }
.saber__visual {
  flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 8px;
  margin: 12px 0 0; padding: clamp(14px, 1.8vw, 20px); border-radius: 12px; list-style: none;
  background: var(--paper);
}
.saber__caixa--nao .saber__visual { background: var(--ink-2); }
.saber__caixa--google .saber__visual { background: rgba(14, 17, 20, .08); }
.saber__caixa :focus-visible { outline-color: var(--ink); }
/* ondas no canto da caixa laranja, como no Como funciona */
.saber__caixa--google::before, .saber__caixa--google::after {
  content: ''; position: absolute; z-index: -1; border-radius: 50%;
  border: 1px solid rgba(14, 17, 20, .16);
}
.saber__caixa--google::before { width: 220px; height: 220px; top: -110px; right: -110px; }
.saber__caixa--google::after { width: 360px; height: 360px; top: -180px; right: -180px; }

/* 01: a pesquisa desenhada — a barra com o nome escrito e o cursor a
   piscar, o nosso resultado ("Somos nós") e o da outra empresa, tracejado */
.pesquisa__barra {
  display: flex; align-items: center; gap: 10px; height: 50px; padding: 0 20px;
  border-radius: 999px; background: var(--white); border: 1px solid var(--line-light);
  font-size: 15px; color: var(--ink);
}
.pesquisa__barra svg { flex: none; color: var(--muted-light); }
.pesquisa__cursor { width: 1.5px; height: 18px; margin-left: -8px; background: var(--ink); }
.com-movimento .pesquisa__cursor { animation: pisca 1.1s steps(1) infinite; }
@keyframes pisca { 50% { opacity: 0; } }
.pesquisa__resultado {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px; border-radius: 10px; background: var(--white);
}
.pesquisa__texto { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pesquisa__titulo { font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--ink); }
.pesquisa__meta { font-size: 12.5px; line-height: 1.4; color: var(--muted-light); }
.pesquisa__tag {
  flex: none; display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 11px 4px 8px; border-radius: 999px; font-size: 12px; font-weight: 500; white-space: nowrap;
}
.pesquisa__tag--nos { background: var(--ink); color: var(--paper); }
.pesquisa__tag--nos svg { color: var(--accent); }
.pesquisa__resultado--outra { background: transparent; border: 1px dashed #C4C4C4; }
.pesquisa__resultado--outra .pesquisa__titulo { color: var(--muted-light); }
.pesquisa__tag--outra { background: rgba(243, 116, 33, .1); border: 1px solid rgba(243, 116, 33, .55); color: var(--laranja-escuro); }

/* 02: o que lhe é atribuído, em quatro caixas riscadas a laranja */
.saber__visual.riscos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: center; }
.riscos li {
  display: flex; align-items: center; gap: 10px; min-height: 64px; padding: 12px 16px;
  border-radius: 10px; background: var(--ink); border: 1px solid var(--line-dark);
  font-family: var(--display); font-weight: 600; font-size: clamp(17px, 1.5vw, 20px); letter-spacing: -0.02em; color: var(--muted-dark-2);
}
.riscos svg { flex: none; color: var(--accent); }
.riscos span { text-decoration: line-through; text-decoration-color: var(--accent); text-decoration-thickness: 2px; }

/* 03: o pedido ao Google em três passos ligados por uma linha — feito,
   em curso (o ponto pulsa) e por concluir (tracejado) */
.saber__visual.estado { gap: 0; }
.estado li { flex: 1; position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 16px; padding: 10px 0; }
.estado li:not(:last-child)::after {
  content: ''; position: absolute; left: 19px; top: calc(50% + 24px); height: calc(100% - 48px);
  width: 2px; border-radius: 1px; background: rgba(14, 17, 20, .28);
}
.estado__marca {
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  border: 2px dashed rgba(14, 17, 20, .45);
}
.estado li:is(.estado--feito, .estado--agora) .estado__marca { border: 0; background: var(--ink); color: var(--accent); }
.estado strong { display: block; font-size: clamp(16px, 1.4vw, 18px); font-weight: 600; line-height: 1.3; }
.estado small { display: block; font-family: var(--mono); font-size: 12px; line-height: 1.5; color: #2A1408; }
.estado--agora small { display: inline-flex; margin-top: 3px; padding: 1px 9px; border-radius: 999px; background: var(--ink); color: var(--paper); }
.saber__ponto { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.saber__ponto::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--accent); }
.com-movimento .saber__ponto::after { animation: pulsa 1.8s cubic-bezier(.22, .61, .36, 1) infinite; }

/* 04: os contactos nas caixas da página Contactos, brancas sobre o painel */
.saber__visual .contactos-caixas { margin-top: 0; }
.saber__visual .contactos-caixa:not(.contactos-caixa--movel) { background: var(--white); }
.saber__visual a.contactos-caixa:not(.contactos-caixa--movel):hover { background: var(--paper-2); }
.saber__visual .contactos-caixa:nth-child(4) { grid-column: 1 / -1; }

@media (max-width: 860px) {
  .saber__grelha { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .pesquisa__barra { height: 44px; padding: 0 16px; font-size: 14px; }
  .pesquisa__resultado { flex-direction: column; align-items: flex-start; gap: 8px; }
  .riscos li { min-height: 52px; padding: 10px 12px; gap: 8px; }
  .saber__visual .contactos-caixa { grid-column: 1 / -1; }   /* sem o horário, o fixo ficava sozinho a meia largura */
}
@media (max-width: 520px) {
  .saber__visual.riscos { grid-template-columns: minmax(0, 1fr); }   /* "Reclamações" não cabe a meia largura */
}

/* O comunicado na íntegra: numa secção escura, o título ao centro e o
   texto da cliente numa carta branca — o logótipo e o tipo de documento no
   topo, aspas laranja grandes a abrir, a frase principal maior e sublinhada
   a marcador laranja, e a assinatura a fechar. */
.integra {
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(28px, 3.4vw, 48px);
  padding-block: var(--espaco-seccao);
}
.integra__cabeca { display: flex; flex-direction: column; align-items: center; gap: var(--cabeca-gap); text-align: center; }
.integra__cabeca .eyebrow { align-self: center; }
.carta {
  width: 100%; max-width: 860px;
  padding: clamp(24px, 5vw, 72px); border-radius: 20px;
  background: var(--white); color: #2A2C2F;
}
.carta__topo {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px;
  padding-bottom: clamp(20px, 2.4vw, 28px); border-bottom: 1px solid var(--line-light);
}
.carta__topo img { height: clamp(40px, 4vw, 52px); width: auto; }
.carta__tipo {
  font-family: var(--mono); font-size: 12px; line-height: 1.6; letter-spacing: .08em; text-transform: uppercase;
  text-align: right; color: var(--muted-light);
}
.carta__texto { padding-top: clamp(24px, 3vw, 36px); font-size: clamp(16px, 1.25vw, 18px); line-height: 1.7; }
.carta__texto::before {
  content: '“'; display: block; height: .5em;
  font-family: var(--display); font-weight: 700; font-size: clamp(80px, 8vw, 120px); line-height: .9; color: var(--accent);
}
.carta__texto p { text-wrap: pretty; }
.carta__texto p + p { margin-top: 1em; }
.carta__texto .carta__abertura { font-size: 1.12em; line-height: 1.6; color: var(--ink); }
.carta__texto .carta__destaque {
  margin-block: 1.4em; padding-block: 1.1em; border-block: 1px solid var(--line-light);
  font-family: var(--display); font-weight: 600; font-size: clamp(22px, 2.3vw, 30px);
  line-height: 1.3; letter-spacing: -0.02em; color: var(--ink);
}
.carta__destaque mark {
  padding: 0 .12em; border-radius: 4px; color: inherit;
  background: rgba(243, 116, 33, .28);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.carta__assinatura {
  display: flex; align-items: center; gap: 16px;
  margin-top: clamp(28px, 3.4vw, 44px); padding-top: clamp(20px, 2.4vw, 28px); border-top: 1px solid var(--line-light);
}
.carta__assinatura::before { content: ''; flex: none; width: 36px; height: 3px; border-radius: 2px; background: var(--accent); }
.carta__assinatura p { font-size: 14px; line-height: 1.5; color: var(--muted-light); }
.carta__assinatura strong { font-weight: 600; color: var(--ink); }
@media (max-width: 640px) {
  .carta { padding: 24px 20px; border-radius: 16px; }
  .carta__tipo { text-align: left; }
}

/* ==========================================================================
   PÁGINAS LEGAIS (política de privacidade, termos e condições)
   ========================================================================== */
/* Topo só com o cartão do texto, a toda a largura e mais baixo; por baixo, o
   sumário numa caixa branca (presa abaixo do cabeçalho no desktop) e o texto
   numa folha branca, em secções numeradas. */
.page-hero--legal .page-hero__cartoes { grid-template-columns: minmax(0, 1fr); grid-template-areas: "texto"; min-height: 0; }
.page-hero--legal .hero__cartao--texto { padding-bottom: clamp(36px, 5vw, 64px); }
.page-hero--legal h1 { margin-bottom: 20px; }
.page-hero--legal .hero__lede { margin-bottom: 0; }
.legal { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding-block: var(--espaco-seccao); }
@media (min-width: 1101px) {
  .legal { grid-template-columns: minmax(0, var(--col-4)) minmax(0, 1fr); align-items: start; gap: var(--grelha-gap); }
  .legal__sumario { position: sticky; top: calc(var(--altura-topo) + 24px); }
}
.legal__sumario { padding: 20px 22px; border-radius: 14px; background: var(--white); }
.legal__sumario-titulo { margin-bottom: 8px; font-family: var(--mono); font-size: 12px; color: var(--muted-light); }
.legal__sumario ol { margin: 0; padding: 0; list-style: none; counter-reset: sumario; }
.legal__sumario li { counter-increment: sumario; }
.legal__sumario a {
  display: flex; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line-light-2);
  font-size: 14.5px; line-height: 1.4; color: var(--ink); transition: color .2s ease;
}
.legal__sumario a::before { content: counter(sumario, decimal-leading-zero); flex: none; font-family: var(--mono); font-size: 12px; line-height: 1.7; color: var(--laranja-escuro); }
.legal__sumario a:hover { color: var(--laranja-escuro); }
.legal__texto {
  padding: clamp(24px, 4vw, 56px); border-radius: 20px; background: var(--white);
  font-size: clamp(15.5px, 1.15vw, 17px); line-height: 1.7; color: #2A2C2F;
}
.legal__texto > section + section { margin-top: 32px; padding-top: 32px; border-top: 1px solid var(--line-light-2); }
.legal__texto h2 {
  display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; scroll-margin-top: calc(var(--altura-topo) + 24px);
  font-size: clamp(22px, 2vw, 28px); line-height: 1.15; letter-spacing: -0.02em; color: var(--ink);
}
.legal__texto h2 span { flex: none; font-family: var(--mono); font-size: 13px; font-weight: 500; letter-spacing: normal; color: var(--laranja-escuro); }
.legal__texto :is(p, ul) { max-width: 70ch; text-wrap: pretty; }
.legal__texto :is(p, ul) + :is(p, ul) { margin-top: .8em; }
.legal__texto ul { margin-bottom: 0; padding-left: 1.2em; }
.legal__texto li + li { margin-top: .35em; }
.legal__texto li::marker { color: var(--accent); }
.legal__texto a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.legal__texto a:hover { color: var(--laranja-escuro); }
.legal__texto strong { font-weight: 600; color: var(--ink); }
@media (max-width: 640px) {
  .legal__texto { padding: 22px 18px; border-radius: 16px; }
}

/* ==========================================================================
   PINTURAS E TELHADOS (página Serviços) — fotografias reais
   ========================================================================== */
/* Etiqueta e título à esquerda, frase e botão à direita; por baixo, uma
   grelha de 4 × 3 com as fotos: uma pintura grande à esquerda, um telhado
   grande à direita, as outras à volta. Legendas em vidro escuro. */
.trabalhos {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: clamp(24px, 3vw, 32px) var(--grelha-gap);
  padding-block: var(--espaco-seccao);
}
.trabalhos__cabeca { display: flex; flex-direction: column; gap: var(--cabeca-gap); }
.trabalhos__cabeca h2 { font-size: var(--titulo-seccao); }
.trabalhos__lado { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.trabalhos__grelha {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(150px, 16vw, 240px);
  grid-template-areas: "p1 p1 p2 p3" "p1 p1 t1 t1" "t2 t3 t1 t1";
  gap: 10px;
}
.trabalho { position: relative; margin: 0; overflow: hidden; border-radius: 14px; background: var(--paper); }
.trabalho:nth-child(1) { grid-area: p1; }
.trabalho:nth-child(2) { grid-area: p2; }
.trabalho:nth-child(3) { grid-area: p3; }
.trabalho:nth-child(4) { grid-area: t1; }
.trabalho:nth-child(5) { grid-area: t2; }
.trabalho:nth-child(6) { grid-area: t3; }
.trabalho img { display: block; width: 100%; height: 100%; object-fit: cover; transition: scale .8s var(--saida); }
.trabalho:hover img { scale: 1.04; }
.trabalho figcaption {
  position: absolute; left: 12px; bottom: 12px;
  padding: 6px 12px; border-radius: 999px;
  background: rgba(14, 17, 20, .45); border: 1px solid rgba(255, 255, 255, .18);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  color: var(--paper); font-size: 13px; font-weight: 500;
}
@media (min-width: 1101px) {
  .trabalhos { grid-template-columns: minmax(0, var(--col-6)) minmax(0, 1fr); align-items: end; row-gap: clamp(40px, 4.4vw, 56px); }
  .trabalhos__grelha { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .trabalhos__grelha { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 150px; grid-template-areas: "p1 p1" "p2 p3" "t1 t1" "t2 t3"; }
  .trabalhos__lado .btn { width: 100%; }
}

/* ==========================================================================
   DETEÇÃO DE FUGAS (página Serviços)
   ========================================================================== */
/* Secção escura (.cartao--escuro), em caixas: etiqueta e título à esquerda e
   a frase à direita; por baixo, a ilustração das fugas (a dos Serviços, em
   grande) ao lado dos três passos do método; na última linha, as três
   vantagens com ícones e a caixa laranja para marcar, com as ondas. */
.fugas { padding-block: var(--espaco-seccao) 50px; }
.fugas__wrap {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: clamp(24px, 3vw, 32px) var(--grelha-gap);
}
.fugas__cabeca { display: flex; flex-direction: column; gap: var(--cabeca-gap); }
@media (min-width: 1101px) {
  .fugas__wrap { grid-template-columns: minmax(0, var(--col-6)) minmax(0, 1fr); align-items: end; row-gap: clamp(40px, 4.4vw, 56px); }
  .fugas__grelha, .fugas__base { grid-column: 1 / -1; }
}
.fugas__grelha { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 10px; }
.fugas__figura { position: relative; margin: 0; padding: 8px; border-radius: 14px; background: var(--ink-2); }
/* mais baixa (16:10): corta-se um pouco de cima e de baixo, sem perder o
   ecrã da sonda nem o tubo com a fuga */
.fugas__figura img { display: block; width: 100%; height: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 22%; border-radius: 8px; }
.fugas__etiqueta {
  position: absolute; top: 20px; left: 20px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: 999px;
  font-family: var(--mono); font-size: 12px; font-weight: 500; color: var(--ink);
  background: rgba(255, 255, 255, .6); border: 1px solid rgba(255, 255, 255, .8);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
}
.fugas__etiqueta span { width: 7px; height: 7px; border-radius: 50%; background: var(--electric); box-shadow: 0 0 0 4px rgba(233, 185, 73, .25); }
.fugas__passos { display: grid; grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.fugas__passo {
  display: grid; grid-template-columns: 36px minmax(0, 1fr); align-content: center;
  gap: 2px 12px; padding: 14px 18px; border-radius: 12px; background: var(--ink-2);
}
.fugas__num {
  grid-row: span 2; align-self: center;
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--mono); font-size: 13px; font-weight: 500; color: var(--paper);
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12);
}
.fugas__passo:last-child .fugas__num { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.fugas__passo h3 {
  font-family: var(--display); font-weight: 600; font-size: clamp(17px, 1.4vw, 19px);
  line-height: 1.15; letter-spacing: -0.02em;
}
.fugas__passo p { font-size: 13.5px; line-height: 1.4; color: var(--muted-dark); }
.fugas__base { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.fugas__vantagem {
  display: flex; flex-direction: column; gap: 4px;
  padding: 20px 22px 22px; border-radius: 14px; background: var(--ink-2);
}
.fugas__icone {
  width: 42px; height: 42px; margin-bottom: 10px; border-radius: 12px;
  display: grid; place-items: center;
  background: rgba(243, 116, 33, .12); border: 1px solid rgba(243, 116, 33, .28); color: var(--accent);
}
.fugas__vantagem strong { font-family: var(--display); font-weight: 600; font-size: 18px; letter-spacing: -0.01em; }
.fugas__vantagem > span:last-child { font-size: 14px; line-height: 1.45; color: var(--muted-dark); }
.fugas__chamada {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  padding: 20px 22px 22px; border-radius: 14px; background: var(--accent); color: var(--ink);
}
.fugas__chamada::before, .fugas__chamada::after {
  content: ''; position: absolute; z-index: -1; border-radius: 50%;
  border: 1px solid rgba(14, 17, 20, .16);
}
.fugas__chamada::before { width: 200px; height: 200px; top: -100px; right: -100px; }
.fugas__chamada::after { width: 320px; height: 320px; top: -160px; right: -160px; }
.fugas__chamada strong { font-family: var(--display); font-weight: 600; font-size: 22px; letter-spacing: -0.02em; }
.fugas__chamada > span { font-size: 14px; color: #2A1408; }
.fugas__chamada .btn { align-self: stretch; height: 48px; margin-top: auto; }
.fugas__chamada :focus-visible { outline-color: var(--ink); }   /* o laranja do foco não se via no laranja */
.fugas__chamada > span + .btn { margin-top: 16px; }
@media (max-width: 1100px) {
  .fugas__grelha { grid-template-columns: minmax(0, 1fr); }
  .fugas__base { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fugas__chamada { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .fugas__passo { padding: 12px 14px; }
  .fugas__base { grid-template-columns: minmax(0, 1fr); }
  .fugas__vantagem { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 2px 14px; padding: 16px; }
  .fugas__icone { grid-row: span 2; margin: 0; }
}

/* ==========================================================================
   COMO FUNCIONA
   ========================================================================== */
/* Grelha de caixas sobre o branco. Em cima, como nos Serviços: etiqueta e
   título à esquerda (6 colunas), frase à direita, alinhados por baixo. Por
   baixo, os três passos lado a lado — caixa bege com a ilustração, a etiqueta
   de vidro "Passo 0N" (como os indicadores do hero) e uma seta laranja
   redonda, por cima do intervalo, a ligar ao passo seguinte. Na linha de
   baixo, as condições numa caixa escura (2/3) e o telefone numa caixa
   laranja (1/3). Até 899px os passos ficam uns por baixo dos outros, com a
   ilustração pequena à esquerda e a seta a apontar para baixo. */
.percurso { padding-block: var(--espaco-seccao); }
.percurso__wrap {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 3.4vw, 40px) var(--grelha-gap);
}
.percurso__cabeca { display: flex; flex-direction: column; gap: var(--cabeca-gap); }
@media (min-width: 1101px) {
  .percurso__wrap {
    grid-template-columns: minmax(0, var(--col-6)) minmax(0, 1fr);
    grid-template-areas: "cabeca lede" "caixas caixas";
    align-items: end; row-gap: clamp(40px, 4.4vw, 64px);
  }
  .percurso__cabeca { grid-area: cabeca; }
  .percurso__lede { grid-area: lede; }
  .percurso__caixas { grid-area: caixas; }
}
.percurso__caixas { display: flex; flex-direction: column; gap: 10px; }

/* Os três passos */
.percurso__passos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.percurso__passo {
  position: relative; display: flex; flex-direction: column; gap: 8px;
  padding: 8px; border-radius: 14px; background: var(--paper);
}
/* cada caixa por cima da seguinte, para a seta não ficar tapada */
.percurso__passo:nth-child(1) { z-index: 3; }
.percurso__passo:nth-child(2) { z-index: 2; }
.percurso__passo:nth-child(3) { z-index: 1; }
.percurso__visual { position: relative; display: block; }
.percurso__moldura { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 8px; background: var(--paper-2); }
.percurso__moldura img { display: block; width: 100%; height: 100%; object-fit: cover; transition: scale .7s var(--saida); }
.percurso__passo:hover .percurso__moldura img { scale: 1.04; }
.percurso__num {
  position: absolute; top: 12px; left: 12px;
  padding: 6px 11px; border-radius: 999px;
  font-family: var(--mono); font-size: 12px; font-weight: 500; line-height: 1.2; color: var(--ink);
  background: rgba(255, 255, 255, .58); border: 1px solid rgba(255, 255, 255, .75);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
}
/* A seta fica a meio da ilustração, centrada no intervalo entre as caixas:
   8px de padding + 5px (meio intervalo) + 23px (meia seta) = 36px */
.percurso__seta {
  position: absolute; top: 50%; right: -36px;
  width: 46px; height: 46px; margin-top: -23px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--accent); color: var(--ink);
  border: 4px solid var(--white);   /* anel branco a recortá-la das duas caixas */
}
.percurso__seta svg { transition: translate .45s var(--saida); }
.percurso__passo:hover .percurso__seta svg { translate: 3px 0; }
.percurso__texto { display: flex; flex-direction: column; gap: 4px; padding: 14px; border-radius: 10px; background: var(--white); }
.percurso__texto h3 {
  font-family: var(--display); font-weight: 600; font-size: clamp(20px, 1.7vw, 24px);
  line-height: 1.15; letter-spacing: -0.03em;
}
.percurso__texto p { max-width: 40ch; font-size: 14px; line-height: 19px; color: #222324; text-wrap: pretty; }

/* Linha de baixo: condições (escura) e telefone (laranja) */
.percurso__base { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.percurso__condicoes, .percurso__chamada { padding: clamp(24px, 2.6vw, 36px); border-radius: 14px; }
.percurso__condicoes {
  grid-column: span 2;
  display: flex; flex-direction: column; gap: 14px;
  background: var(--ink); color: var(--paper);
}
.percurso__condicoes-topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.percurso__etiqueta { font-family: var(--mono); font-size: 13px; color: var(--accent); }   /* 6,9:1 sobre o escuro */
.percurso__selo {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px 6px 10px; border-radius: 999px; border: 1px solid var(--line-dark);
  font-size: 13px; color: var(--muted-dark);
}
.percurso__selo svg { color: var(--accent); }
.percurso__condicoes h3 {
  max-width: 22ch; color: var(--paper);
  font-family: var(--display); font-weight: 600; font-size: clamp(24px, 2.3vw, 32px);
  line-height: 1.1; letter-spacing: -0.03em;
}
/* 1.ª hora em destaque (pedido da cliente): caixa com contorno laranja,
   ícone de relógio e o texto maior — na caixa das condições e no formulário */
.hora-destaque {
  display: flex; align-items: flex-start; gap: 14px; margin: 6px 0 0;
  padding: 16px 18px; border-radius: 12px;
  background: rgba(243, 116, 33, .12); border: 1px solid rgba(243, 116, 33, .45);
  font-size: 15px; line-height: 1.5; color: var(--muted-dark);
}
.hora-destaque strong { display: block; margin-bottom: 2px; font-family: var(--display); font-weight: 600; font-size: clamp(18px, 1.6vw, 21px); letter-spacing: -0.01em; color: var(--paper); }
.hora-destaque__icone {
  flex: none; width: 40px; height: 40px; border-radius: 10px;
  display: grid; place-items: center; background: var(--accent); color: var(--ink);
}
.percurso__lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; margin: auto 0 0; padding-top: 14px; }
.percurso__lista > div { padding-top: 14px; border-top: 1px solid var(--line-dark); }
.percurso__lista dt { margin-bottom: 6px; font-family: var(--mono); font-size: 12px; color: var(--muted-dark-2); }
.percurso__lista dd { margin: 0; font-size: 14.5px; line-height: 1.45; color: var(--muted-dark); text-wrap: pretty; }

.percurso__chamada {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  background: var(--accent); color: var(--ink);
}
/* ondas de chamada no canto, em traço fino escuro */
.percurso__chamada::before, .percurso__chamada::after {
  content: ''; position: absolute; z-index: -1; border-radius: 50%;
  border: 1px solid rgba(14, 17, 20, .16);
}
.percurso__chamada::before { width: 200px; height: 200px; top: -100px; right: -100px; }
.percurso__chamada::after { width: 320px; height: 320px; top: -160px; right: -160px; }
.percurso__horario { font-family: var(--mono); font-size: 13px; }
.percurso__ligar { display: flex; align-items: center; gap: 14px; margin-top: auto; padding-top: 18px; color: var(--ink); }
.percurso__icone {
  flex: none; width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center; background: var(--ink); color: var(--accent);
  transition: scale .45s var(--saida);
}
.percurso__ligar:hover .percurso__icone { scale: 1.08; }
.percurso__numero {
  display: flex; flex-direction: column; white-space: nowrap;
  font-family: var(--display); font-weight: 600; font-size: clamp(26px, 2.3vw, 34px);
  line-height: 1; letter-spacing: -0.03em;
}
.percurso__numero small { margin-bottom: 6px; font-family: var(--sans); font-size: 13px; font-weight: 500; letter-spacing: normal; }
.percurso__nota { font-size: 12.5px; }
.percurso__online {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  align-self: stretch; margin-top: 8px; padding-top: 14px; border-top: 1px solid rgba(14, 17, 20, .22);
  font-size: 15px; font-weight: 600; color: var(--ink);
}
.percurso__online svg { transition: translate .45s var(--saida); }
.percurso__online:hover svg { translate: 4px 0; }
.percurso__chamada :focus-visible { outline-color: var(--ink); }   /* o laranja do foco não se via no laranja */

@media (max-width: 1100px) {
  .percurso__chamada { padding: 24px; }
}
@media (max-width: 899px) {
  .percurso__passos { grid-template-columns: minmax(0, 1fr); }
  .percurso__passo { flex-direction: row; align-items: stretch; gap: 8px; padding: 8px; }
  .percurso__visual { flex: none; width: 168px; align-self: center; }
  .percurso__texto { flex: 1; justify-content: center; }
  /* seta para baixo, no intervalo entre as ilustrações */
  .percurso__seta { top: auto; right: auto; bottom: -34px; left: 50%; margin: 0 0 0 -21px; width: 42px; height: 42px; rotate: 90deg; }
  .percurso__base { grid-template-columns: minmax(0, 1fr); }
  .percurso__condicoes { grid-column: auto; }
}
@media (max-width: 640px) {
  .percurso__texto { padding: 12px; }
  .percurso__visual { width: 104px; }
  .percurso__moldura { aspect-ratio: 1; }
  .percurso__num { top: 6px; left: 6px; padding: 3px 7px; font-size: 11px; }
  .percurso__seta { bottom: -31px; margin-left: -18px; width: 36px; height: 36px; border-width: 3px; }
  .percurso__seta svg { width: 14px; height: 14px; }
  .percurso__texto h3 { font-size: 19px; }
  .percurso__texto p { font-size: 13.5px; }
  .percurso__lista { grid-template-columns: minmax(0, 1fr); }
  .percurso__lista > div { padding-block: 12px 2px; }
}

/* ==========================================================================
   ZONAS
   ========================================================================== */
/* Secção escura: sem fundo (o da página), com o contorno fino do cartão da
   casa no hero, e o texto em branco */
.zones {
  background: transparent; color: var(--paper);
  border: 1px solid rgba(255, 255, 255, .12);
  padding-block: 30px;
}
.zones .zones__copy p { color: var(--muted-dark); }
/* a faixa dos clientes quase de ponta a ponta do cartão (12px de cada lado) */
.cartao > .wrap.zones__faixa { padding-inline: 12px; }
/* O mapa fica centrado na vertical em relação ao texto */
.zones__grid {
  display: grid; grid-template-columns: minmax(0, var(--col-6)) minmax(0, 1fr);   /* 6 + 6 colunas */
  gap: clamp(32px, 4vw, 48px) var(--grelha-gap); align-items: center;
}
.zones__copy { display: flex; flex-direction: column; gap: 10px; }
.zones__list {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px 20px; padding: 12px 0 0;   /* sem o recuo da lista: alinhada com o título */
  font-size: 14px; color: var(--muted-dark);
  list-style: none; margin: 0;
  align-items: baseline;   /* em duas colunas, o último concelho alinha pela base de Leiria (22px) */
}
.zones__list a:hover { color: var(--paper); text-decoration: underline; }
.zones__list li:first-child a { font-weight: 600; color: var(--paper); font-size: 22px; }
/* Leiria fica sozinha na 1.ª linha: o 2.º concelho vai para a 1.ª coluna,
   que já está ocupada nessa linha, e desce; os restantes seguem a partir dele */
.zones__list li:nth-child(2) { grid-column: 1; }
/* Portáteis (1101–1365px): a coluna do texto é estreita para 3 colunas e
   nomes como "Pedrógão Grande" partiam-se; passam a 2 colunas */
@media (min-width: 1101px) and (max-width: 1365px) {
  .zones__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* em duas colunas, o último concelho sobe para o lado de Leiria (ver telemóvel) */
  .zones__list li:last-child { grid-row: 1; grid-column: 2; }
}
/* Mapa real do distrito, sem caixa, contorno nem fundo: os concelhos num
   preto claro, separados por linhas da cor do fundo da página; o de Leiria
   num laranja escuro. */
.zones__map svg { display: block; width: 100%; height: auto; overflow: visible; }
.mapa__concelhos path { fill: #232A31; stroke: var(--ink); stroke-width: 1.5; stroke-linejoin: round; }
.mapa__concelhos .mapa__sede { fill: #6A4129; }
.mapa__pontos circle { fill: #C9CED2; }
.mapa__halo { fill: var(--accent); fill-opacity: .22; }
.mapa__ponto--sede { fill: var(--accent); }
.mapa__nome {
  font-family: var(--sans); font-size: 12px; fill: var(--muted-dark);
  paint-order: stroke; stroke: #232A31; stroke-width: 3px; stroke-linejoin: round;   /* contorno para ler sobre as linhas */
}
.mapa__nome--sede { font-size: 15px; font-weight: 600; fill: var(--paper); stroke: #6A4129; }

/* ==========================================================================
   EMPRESAS
   ========================================================================== */
.business {
  padding-block: var(--espaco-seccao);
  display: flex; flex-direction: column; gap: clamp(32px, 4vw, 56px);
}
.business__head {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(24px, 5vw, 80px); align-items: end;
}
.business__title { display: flex; flex-direction: column; gap: var(--cabeca-gap); }
.business__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
/* Cartões laranja (a cor da marca) e um preto, sem contorno. Texto escuro nos
   laranja (--ink 6,4:1, #2A1408 6,3:1); ao passar o rato as letras passam a
   branco (escolha do cliente; sobre o laranja só dá 2,9:1, abaixo do AA) */
.card {
  border-radius: var(--canto); background: var(--accent); color: var(--ink);
  padding: clamp(28px, 3vw, 40px);
  display: flex; flex-direction: column; gap: 16px;
  min-height: 260px;
}
.card__num { font-family: var(--mono); font-size: 13px; color: #2A1408; }
.card h3 { font-size: clamp(22px, 2.1vw, 28px); font-weight: 700; letter-spacing: -0.03em; }
.card p { font-size: 16px; line-height: 1.6; color: #2A1408; }
.card--dark { background: var(--ink); color: var(--paper); }
.card--dark .card__num { color: var(--muted-dark-2); }
.card--dark p { color: var(--muted-dark); }
/* Ondas em traço fino (como na caixa do telefone do Como funciona), num
   sítio diferente em cada cartão: canto de cima, canto de baixo e a meio do
   lado direito — sempre longe do texto */
.card { position: relative; overflow: hidden; isolation: isolate; }
.card::before, .card::after {
  content: ''; position: absolute; z-index: -1; border-radius: 50%;
  border: 1px solid rgba(14, 17, 20, .16);
}
.card--dark::before, .card--dark::after { border-color: rgba(244, 241, 236, .12); }
.card::before { width: 200px; height: 200px; }
.card::after { width: 320px; height: 320px; }
.card:nth-child(1)::before { top: -100px; right: -100px; }
.card:nth-child(1)::after { top: -160px; right: -160px; }
.card:nth-child(2)::before { bottom: -100px; right: -100px; }
.card:nth-child(2)::after { bottom: -160px; right: -160px; }
.card:nth-child(3)::before { top: calc(50% - 100px); right: -120px; }
.card:nth-child(3)::after { top: calc(50% - 160px); right: -180px; }

/* ==========================================================================
   GALERIA
   ========================================================================== */
.gallery {
  padding-block: var(--espaco-seccao);
  display: flex; flex-direction: column; gap: clamp(28px, 3.4vw, 48px);
}
.gallery__head {
  display: flex; flex-wrap: wrap; gap: 24px;
  justify-content: space-between; align-items: end;
}
.gallery__title { display: flex; flex-direction: column; gap: var(--cabeca-gap); }
.rating {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 20px; border-radius: var(--canto);
  background: var(--white); border: 1px solid var(--line-light-2);
}
.rating__score { font-family: var(--display); font-weight: 800; font-size: 28px; letter-spacing: -0.03em; }
.rating__stars { display: flex; gap: 2px; color: var(--accent); }
.rating__meta { display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--muted-light); }

.gallery__grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 300px; gap: 10px;   /* caixas juntas, como nas outras grelhas */
}
.shot {
  margin: 0; position: relative; overflow: hidden;
  border-radius: var(--canto); background: var(--line-light-2);
  display: flex; align-items: center; justify-content: center;
  color: var(--muted-light-2); font-size: 14px; text-align: center; padding: 16px;
}
.shot--big { grid-column: span 2; grid-row: span 2; }
.shot:has(img) { padding: 0; }
.shot img { width: 100%; height: 100%; object-fit: cover; }
/* legenda em vidro escuro, como as etiquetas dos passos e os indicadores do hero */
.shot figcaption {
  position: absolute; left: 16px; bottom: 16px;
  padding: 7px 13px; border-radius: 999px;
  background: rgba(14, 17, 20, .45); border: 1px solid rgba(255, 255, 255, .18);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  color: var(--paper); font-size: 13px; font-weight: 500;
}
.shot--big figcaption { left: 20px; bottom: 20px; padding: 8px 15px; font-size: 14px; }

/* ==========================================================================
   ANTES E DEPOIS
   ========================================================================== */
/* Texto nas 4 primeiras colunas da grelha e os dois comparadores nas outras
   8 (4 cada), como nos Serviços. As fotos têm 880px: não se ampliam. */
.antes-depois {
  padding-block: var(--espaco-seccao);
  display: grid; grid-template-columns: minmax(0, var(--col-4)) minmax(0, 1fr);
  gap: 32px var(--grelha-gap); align-items: start;
}
.antes-depois__head { display: flex; flex-direction: column; gap: var(--cabeca-gap); }
.antes-depois__todos { align-self: flex-start; margin-top: 12px; }
@media (min-width: 1101px) {
  /* os comparadores começam à altura do título, como os cartões dos Serviços */
  .antes-depois__grid { margin-top: calc(14px * 1.5 + var(--cabeca-gap)); }
}
/* Página Projetos. Topo mais baixo do que o das outras páginas internas: o
   texto à esquerda e, à direita, um mosaico de três fotos reais (uma alta e
   duas empilhadas). Até 1100px o mosaico fica por baixo do texto. */
.page-hero--compacto .page-hero__cartoes { min-height: clamp(380px, 50svh, 500px); }
.page-hero--compacto h1 { margin-bottom: 20px; }
.page-hero--compacto .hero__lede { margin-bottom: 0; }
.hero__cartao--mosaico {
  grid-area: casa; margin: 0; padding: 0; background: transparent;
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: var(--moldura);
}
.hero__cartao--mosaico img { width: 100%; height: 100%; min-height: 0; object-fit: cover; border-radius: 22px; }
.hero__cartao--mosaico img:first-child { grid-row: 1 / -1; }
@media (max-width: 1100px) {
  .hero__cartao--mosaico { height: clamp(240px, 52vw, 420px); }
}
@media (max-width: 640px) {
  .hero__cartao--mosaico img { border-radius: 14px; }
}

/* Galeria: etiqueta e título à esquerda, frase à direita (como nas outras
   secções); por baixo, os filtros (Todas, Pinturas, Telhados, Obras) e as
   fotos numa grelha de quadrados iguais — 4 por linha no desktop, para cada
   filtro (4 fotos) encher uma linha certa; 2 por linha até 1100px. Cada foto
   tem a etiqueta de vidro com o tipo de obra e abre maior no visor. */
.obras-pagina {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: clamp(24px, 3vw, 32px) var(--grelha-gap);
  padding-block: var(--espaco-seccao);
}
.obras-pagina__cabeca { display: flex; flex-direction: column; gap: var(--cabeca-gap); }
@media (min-width: 1101px) {
  .obras-pagina { grid-template-columns: minmax(0, var(--col-6)) minmax(0, 1fr); align-items: end; row-gap: clamp(28px, 3vw, 40px); }
  .obras-pagina > :is(.filtros, .obras) { grid-column: 1 / -1; }
}
/* Os filtros só aparecem com JavaScript (sem ele, vêem-se as fotos todas) */
.filtros { display: flex; flex-wrap: wrap; gap: 8px; margin-top: clamp(4px, 1.5vw, 16px); }
.filtros[hidden] { display: none; }
.filtro {
  display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px;
  border: 0; border-radius: 999px; background: var(--white); color: var(--ink);
  font-family: inherit; font-size: 14px; font-weight: 500; cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
.filtro span { font-family: var(--mono); font-size: 12px; color: var(--muted-light); }
.filtro:hover { background: var(--paper-2); }
.filtro[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.filtro[aria-pressed="true"] span { color: var(--accent); }
.filtro:focus-visible { outline-color: var(--ink); }

.obras { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.obra[hidden] { display: none; }
.com-movimento .obra.entra { animation: obra-entra .5s var(--saida) both; }
@keyframes obra-entra { from { opacity: 0; scale: .96; } }
.obra__link { position: relative; display: block; aspect-ratio: 1; overflow: hidden; border-radius: 14px; background: var(--paper-2); }
.obra__link img { width: 100%; height: 100%; object-fit: cover; transition: scale .8s var(--saida); }
.obra__link:hover img { scale: 1.05; }
.obra__link:focus-visible { outline-color: var(--ink); }
.obra__etiqueta {
  position: absolute; left: 12px; bottom: 12px;
  padding: 6px 12px; border-radius: 999px;
  background: rgba(14, 17, 20, .45); border: 1px solid rgba(255, 255, 255, .18);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  color: var(--paper); font-size: 13px; font-weight: 500;
}
/* Botão redondo de ampliar, como o das áreas dos Serviços: aparece ao passar
   o rato (em ecrãs táteis está sempre à vista) */
.obra__abrir {
  position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; background: var(--white); color: var(--ink);
  opacity: 0; scale: .8; transition: opacity .25s ease, scale .35s var(--saida), background-color .2s ease;
}
.obra__link:is(:hover, :focus-visible) .obra__abrir { opacity: 1; scale: 1; background: var(--accent); }
@media (hover: none) { .obra__abrir { opacity: 1; scale: 1; } }
@media (max-width: 1100px) {
  .obras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .obras { gap: 8px; }
  .obra__link { border-radius: 12px; }
  .obra__etiqueta { left: 8px; bottom: 8px; padding: 4px 10px; font-size: 12px; }
  .obra__abrir { top: 8px; right: 8px; width: 34px; height: 34px; }
  .filtro { height: 40px; padding: 0 14px; }
}
@media (max-width: 480px) {
  .filtros { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }   /* os quatro não cabem numa linha */
  .filtro { justify-content: center; }
}

/* Visor: a foto maior num <dialog> sobre a página escurecida, com a legenda
   por baixo (número e descrição), o botão de fechar e as setas para a foto
   anterior e a seguinte (só entre as do filtro escolhido). Fecha com Esc, com
   o × ou clicando fora; as setas do teclado mudam de foto. */
.visor {
  max-width: calc(100vw - 32px); max-height: calc(100dvh - 32px);
  padding: 0; border: 0; border-radius: 20px; overflow: hidden;
  background: var(--ink); color: var(--paper);
}
.visor::backdrop {
  background: rgba(14, 17, 20, .85);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.visor__figura { position: relative; margin: 0; }
.visor__img {
  display: block; width: auto; height: auto;
  max-width: min(1200px, calc(100vw - 32px)); max-height: calc(100dvh - 32px - 52px);
}
.visor__legenda {
  display: flex; align-items: center; gap: 14px; min-height: 52px; padding: 12px 18px;
  font-size: 14px; line-height: 1.4; color: var(--muted-dark);
}
.visor__num { flex: none; font-family: var(--mono); font-size: 12px; color: var(--accent); }
.visor button {
  position: absolute; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .18); color: var(--paper);
  background: rgba(14, 17, 20, .5);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  transition: background-color .2s ease, color .2s ease;
}
.visor button:hover { background: var(--accent); color: var(--ink); border-color: var(--accent); }
.visor__fechar { top: 12px; right: 12px; }
.visor__anterior, .visor__seguinte { top: calc(50% - 26px - 22px); }
.visor__anterior { left: 12px; }
.visor__seguinte { right: 12px; }

.antes-depois__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

/* Comparador: as duas fotos uma sobre a outra; a de depois só se vê à
   direita da barra (--pos, escrito pelo JS). O <input type="range"> fica
   escondido mas é o controlo para teclado e leitores de ecrã. */
.compara { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.compara figcaption { font-size: 14px; line-height: 1.5; color: var(--muted-light); }
.compara__quadro {
  --pos: 50%;
  position: relative; aspect-ratio: 1; overflow: hidden;
  border-radius: var(--canto); background: var(--ink);
  cursor: ew-resize; user-select: none; touch-action: pan-y;
}
.compara__quadro img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.compara__depois { clip-path: inset(0 0 0 var(--pos)); }
.compara__quadro::after {   /* a barra */
  content: ''; position: absolute; top: 0; bottom: 0; left: var(--pos);
  width: 2px; margin-left: -1px; background: var(--paper); pointer-events: none;
}
.compara__pega {
  position: absolute; z-index: 1; top: 50%; left: var(--pos);
  width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%;
  background: var(--accent); color: var(--ink);
  display: grid; place-items: center; pointer-events: none;
}
.compara__etiqueta {
  position: absolute; bottom: 12px; z-index: 1;
  padding: 4px 10px; border-radius: var(--canto);
  background: rgba(14, 17, 20, .78); color: var(--paper);
  font-family: var(--mono); font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase;
  pointer-events: none;
}
.compara__etiqueta--antes { left: 12px; }
.compara__etiqueta--depois { right: 12px; }
.compara__controlo {
  position: absolute; width: 1px; height: 1px; margin: 0; padding: 0;
  opacity: 0; pointer-events: none;
}
.compara__quadro:has(.compara__controlo:focus-visible) { outline: 3px solid var(--accent); outline-offset: 3px; }

@media (max-width: 1100px) {
  .antes-depois { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  /* Mapa: a 347px os nomes teriam ~7px; ficam só os pontos e Leiria (a lista dos concelhos está logo acima) */
  .mapa__nome:not(.mapa__nome--sede) { display: none; }
  /* o concelho escolhido mostra o nome, maior para se ler (22 unidades ≈ 13px) */
  .mapa__nome.is-escolhido { display: inline; font-size: 22px; stroke-width: 5px; }
  .antes-depois__grid { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   FAQ
   ========================================================================== */
/* Desktop: à esquerda a etiqueta, o título e um cartão escuro para ligar,
   presos ao ecrã (sticky) enquanto as perguntas, à direita, passam com o
   scroll. Cada pergunta é um cartão branco compacto, numerado (01–06), que
   abre com o "+" a rodar para "×". Até 1100px fica tudo empilhado, sem nada
   preso. */
.faq {
  padding-block: var(--espaco-seccao);
  display: grid; grid-template-columns: minmax(0, var(--col-4)) minmax(0, 1fr);   /* 4 + 8 colunas */
  gap: clamp(28px, 3.4vw, 48px) var(--grelha-gap); align-items: start;
}
.faq__intro {
  position: sticky; top: calc(var(--altura-topo) + 24px);
  display: flex; flex-direction: column; gap: var(--cabeca-gap);
}
@media (min-width: 1101px) {
  /* as perguntas começam à altura do título */
  .faq__list { margin-top: calc(14px * 1.5 + var(--cabeca-gap)); }
}

/* Cartão para ligar: escuro, com o ícone num círculo laranja e a menção do
   custo da chamada (obrigatória) por baixo do número */
.faq__ligar {
  margin-top: 8px;
  display: flex; align-items: center; gap: 16px;
  padding: 16px 22px 16px 16px; border-radius: var(--canto);
  background: var(--ink); color: var(--paper);
  transition: transform .45s var(--saida);
}
.faq__ligar:hover { transform: translateY(-3px); }
.faq__ligar-icone {
  width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent); color: var(--ink);
  transition: transform .45s var(--saida);
}
.faq__ligar:hover .faq__ligar-icone { transform: rotate(-12deg); }
.faq__ligar-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.faq__ligar-rotulo { font-size: 13px; color: var(--muted-dark); }
.faq__ligar strong {
  font-family: var(--display); font-weight: 700; font-size: 24px; line-height: 1.15;
  letter-spacing: -0.02em; word-spacing: .18em; white-space: nowrap;
}
.faq__ligar-nota { font-size: 12px; color: var(--muted-dark-2); }   /* 5,3:1 sobre o preto */

/* Perguntas em cartões brancos sobre o bege da secção, sem contorno */
.faq__list { display: flex; flex-direction: column; gap: 8px; counter-reset: faq; }
.faq__item {
  background: var(--white); border-radius: var(--canto);
  transition: box-shadow .3s ease;
}
.faq__item[open] { box-shadow: 0 14px 30px -20px rgba(14, 17, 20, .35); }
.faq__item summary {
  list-style: none; cursor: pointer;
  padding: 16px 16px 16px 20px; border-radius: inherit;
  display: flex; align-items: center; gap: 16px;
  font-family: var(--display); font-weight: 700;
  font-size: clamp(16px, 1.25vw, 18px); line-height: 1.3; letter-spacing: -0.015em;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary h3 { flex: 1; font: inherit; letter-spacing: inherit; }
/* Número da pergunta (01–06), escondido dos leitores de ecrã (texto alternativo vazio) */
.faq__item summary::before {
  counter-increment: faq;
  content: counter(faq, decimal-leading-zero);
  content: counter(faq, decimal-leading-zero) / "";
  width: 22px; flex-shrink: 0;
  font-family: var(--mono); font-weight: 500; font-size: 14px; letter-spacing: 0; color: var(--accent-text);
}
/* Sinal "+" num círculo de traço fino; aberta, o círculo enche-se de laranja
   e o "+" roda 45° até ficar "×" */
.faq__item summary::after {
  content: ''; width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%;
  border: 1px solid var(--line-light);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E1114' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center / 14px no-repeat;
  transition: transform .45s var(--saida), background-color .2s ease, border-color .2s ease;
}
.faq__item summary:hover::after { border-color: var(--ink); }
.faq__item[open] summary::after { transform: rotate(45deg); background-color: var(--accent); border-color: var(--accent); }
/* Pergunta aberta: título e sinal no laranja da marca (escolha do cliente).
   ATENÇÃO: só dá 2,5:1 sobre o branco, abaixo do AA (3:1 para texto grande);
   com #A8470B dava 5,2:1 */
.faq__item summary { transition: color .2s ease; }
.faq__item[open] summary { color: var(--accent); }
/* Resposta alinhada com o texto da pergunta (20px + número 22px + 16px) */
.faq__item p {
  padding: 0 62px 20px 58px;
  font-size: 15px; line-height: 1.65; color: var(--muted-light); max-width: 680px;
}
@media (max-width: 640px) {
  .faq__item summary { padding: 14px 12px 14px 14px; gap: 12px; font-size: 16px; }
  .faq__item p { padding: 0 14px 18px 48px; }
}

/* ==========================================================================
   CONTACTO
   ========================================================================== */
/* Fundo branco puro, diferente do rodapé e do fundo claro das outras secções.
   Texto escuro: --ink dá 18,9:1 e #2A1408 17,6:1. */
.contact {
  background: var(--white); color: var(--ink);
  padding-block: var(--espaco-seccao);
}
.contact :focus-visible { outline-color: var(--ink); }   /* o contorno laranja não se veria no cartão laranja */
.contact__grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));   /* 6 + 6 colunas */
  gap: clamp(32px, 4vw, 48px) var(--grelha-gap); align-items: start;
}
.contact__copy { display: flex; flex-direction: column; gap: var(--cabeca-gap); }
/* Desktop (≥ 1101px): o texto e os telefones (~517px de altura, cabem sempre
   no ecrã) ficam presos abaixo do cabeçalho fixo enquanto o formulário passa
   com o scroll. Abaixo disso a coluna é estreita e alta, e fica normal. */
@media (min-width: 1101px) {
  .contact__copy { position: sticky; top: calc(var(--altura-topo) + 24px); }
}
/* Título a laranja. #EE6C1A é o laranja da marca um pouco mais escuro (a
   olho é igual): dá 3,1:1 sobre o branco, o mínimo AA para texto grande */
.contact__copy h2 { color: #EE6C1A; }
.contact__lede { font-size: clamp(16px, 1.3vw, 18px); line-height: 1.6; color: #2A1408; max-width: 480px; }
/* Página Contactos: caixas com os contactos — o telemóvel numa caixa laranja
   a toda a largura; por baixo, fixo e email, morada e horário, 2 por linha
   (1 no telemóvel). Cada número tem a menção do custo da chamada por baixo. */
.contactos-caixas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.contactos-caixa {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  padding: 14px 16px 15px; border-radius: 12px;
  background: var(--paper); color: var(--ink);
  transition: background-color .2s ease;
}
a.contactos-caixa:hover { background: var(--paper-2); }
.contactos-caixa__etiqueta { font-family: var(--mono); font-size: 11px; color: var(--muted-light); }
.contactos-caixa__numero {
  font-family: var(--display); font-weight: 600; font-size: clamp(20px, 1.7vw, 24px);
  line-height: 1.05; letter-spacing: -0.03em; word-spacing: .18em;   /* espaço entre os grupos de 3 algarismos */
}
.contactos-caixa__texto { font-size: 15px; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.contactos-caixa__nota { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 2px; font-size: 12px; color: var(--muted-light); }
.contactos-caixa--movel { grid-column: 1 / -1; padding: 16px 20px 17px; background: var(--accent); }
a.contactos-caixa--movel:hover { background: #F7853B; }
.contactos-caixa--movel .contactos-caixa__etiqueta,
.contactos-caixa--movel .contactos-caixa__nota { color: var(--ink); }
.contactos-caixa--movel .contactos-caixa__numero { font-size: clamp(28px, 2.6vw, 38px); }
.contactos-caixa__icone {
  position: absolute; top: 50%; right: 20px; margin-top: -22px;
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; background: var(--ink); color: var(--accent);
  transition: scale .45s var(--saida);
}
a.contactos-caixa:hover .contactos-caixa__icone { scale: 1.08; }
/* Telemóvel: fixo e horário lado a lado; telemóvel, e-mail e morada a toda
   a largura (o e-mail não cabe em meia caixa) */
@media (max-width: 640px) {
  .contactos-caixa:nth-child(3), .contactos-caixa:nth-child(4) { grid-column: 1 / -1; }
  .contactos-caixa:nth-child(2) { order: 1; }
  .contactos-caixa--horario { order: 2; }
  .contactos-caixa:nth-child(3) { order: 3; }
  .contactos-caixa:nth-child(4) { order: 4; }
  .contactos-caixa__icone { width: 40px; height: 40px; margin-top: -20px; right: 16px; }
}
/* Página Contactos: por baixo das caixas, a ligação discreta ao
   esclarecimento (não somos a "SOS Casa Reparações 24 Horas") */
.contactos-oficiais { display: flex; align-items: center; gap: 8px; font-size: 13px; line-height: 1.45; color: var(--muted-light); }
.contactos-oficiais svg { flex: none; color: var(--ink); }
.contactos-oficiais a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
/* Contacto mínimo (página inicial, Serviços, Projetos): ao centro, o título,
   uma frase, as duas ações (ligar e pedir online) e uma linha pequena com a
   menção do custo da chamada (obrigatória, junto ao número) e o horário */
.contato { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.contato h2 { color: #EE6C1A; }   /* 3,1:1 sobre o branco (texto grande) */
.contato__frase { max-width: 46ch; font-size: 16px; line-height: 1.5; color: var(--muted-light); text-wrap: pretty; }
.contato__acoes { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 10px; }
.contato__nota { font-size: 13px; color: var(--muted-light); }
.contato__nota span + span::before { content: '·'; margin: 0 8px; }
.btn--contorno { border-color: var(--line-light); color: var(--ink); background: transparent; }
.btn--contorno:hover { border-color: var(--ink); box-shadow: none; }
@media (max-width: 640px) {
  .contato__acoes { flex-direction: column; align-self: stretch; }
  .contato__acoes .btn { width: 100%; }
  .contato__nota span { display: block; }   /* custo da chamada e horário, um por linha */
  .contato__nota span + span::before { content: none; }
}

/* ---------- Formulário: cartão preto sobre o laranja ---------- */
.form {
  border-radius: var(--canto); background: var(--ink); color: var(--paper);
  scroll-margin-top: calc(var(--altura-topo) + 16px);   /* /contactos/#pedido: abaixo do cabeçalho fixo */
  padding: clamp(20px, 2.6vw, 32px);
  display: flex; flex-direction: column; gap: 14px;   /* compacto: menos scroll até ao botão */
}
.form :focus-visible { outline-color: var(--accent); }
.form__head { display: flex; flex-direction: column; gap: 2px; }
.form__head strong { font-family: var(--display); font-weight: 800; font-size: clamp(22px, 2vw, 26px); letter-spacing: -0.03em; }
.form__head span { font-size: 14px; color: var(--muted-dark); }

.segmented {
  margin: 0; padding: 4px; border: 0; border-radius: var(--canto); background: var(--ink-2);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px;
}
.segmented label {
  height: 40px; border-radius: calc(var(--canto) - 4px); cursor: pointer;   /* dentro dos 4px de padding: cantos concêntricos */
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: 500; font-size: 14px; color: var(--muted-dark);
}
.segmented input { accent-color: var(--ink); margin: 0; }
.segmented label:has(input:checked) { background: var(--paper); font-weight: 600; color: var(--ink); }
.segmented label:focus-within { outline: 3px solid var(--accent); outline-offset: 2px; }

/* Campos sem contorno (escolha do cliente): o fundo um pouco mais claro do
   que o do formulário marca o campo; ao focar, o contorno laranja volta
   (a borda fica transparente para não mexer no tamanho) */
.field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 500; }
.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 10px; }
.field input, .field select, .field textarea {
  height: 44px; padding: 0 14px;
  border-radius: var(--canto); border: 1px solid transparent; background: #22272D;
  font: inherit; font-size: 16px; font-weight: 400; color: var(--paper);
  color-scheme: dark;   /* setas do select e calendário em claro */
}
.field ::placeholder { color: var(--muted-dark-2); opacity: 1; }
.field textarea { height: 76px; padding: 11px 14px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(243, 116, 33, .3);
}
.field input:user-invalid, .field textarea:user-invalid { border-color: #FF8A80; }
.consent {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 12.5px; line-height: 1.45; font-weight: 400; color: var(--muted-dark);
}
.consent input { margin: 1px 0 0; accent-color: var(--accent); width: 18px; height: 18px; flex-shrink: 0; }
.form .btn { width: 100%; height: 50px; margin-top: 2px; }
.form__note { font-size: 12px; line-height: 1.45; color: var(--muted-dark-2); }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ==========================================================================
   RODAPÉ
   ========================================================================== */
.site-footer { background: var(--ink); color: var(--paper); overflow: hidden; }
/* Na grelha de 12 colunas das secções: a marca nas 4 primeiras (como o texto
   dos Serviços), Contactos e Serviços em 3 cada, Empresa nas últimas 2 */
.site-footer__cols {
  padding: 64px 0 48px; border-top: 1px solid var(--line-dark);
  display: grid; grid-template-columns: minmax(0, var(--col-4)) repeat(2, minmax(0, calc(var(--col) * 3 + var(--grelha-gap) * 2))) minmax(0, 1fr);
  gap: 40px var(--grelha-gap);
  font-size: 15px; line-height: 1.9; color: var(--muted-dark);
}
.site-footer__brand { display: flex; flex-direction: column; gap: 16px; }
.site-footer__brand img { height: 84px; width: auto; align-self: start; }
.site-footer__brand p { max-width: 320px; line-height: 1.6; }
.site-footer__col { display: flex; flex-direction: column; }
.site-footer__col h2 { font-family: var(--sans); font-size: 15px; font-weight: 600; letter-spacing: normal; line-height: 1.9; color: var(--paper); margin-bottom: 8px; }
.site-footer__col a:hover { color: var(--paper); text-decoration: underline; }
.site-footer__nota { margin: -5px 0 6px; font-size: 12px; line-height: 1.4; color: var(--muted-dark-2); }   /* custo da chamada, obrigatório junto aos números */
.site-footer__legal {
  padding: 24px 0; border-top: 1px solid var(--line-dark);
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; justify-content: space-between;
  font-size: 13px; color: var(--muted-dark-2);
}
.site-footer__legal a:not(.site-footer__livro) { color: var(--muted-dark); text-decoration: underline; text-underline-offset: 3px; }
.site-footer__legal a:not(.site-footer__livro):hover { color: var(--paper); }
.site-footer__direitos { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; }
@media (max-width: 640px) {
  .site-footer__legal { flex-direction: column; text-align: center; }
  .site-footer__direitos { flex-direction: column; gap: 8px; }
}
/* Livro de Reclamações Eletrónico: o logótipo oficial (branco), obrigatório no site */
.site-footer__livro { display: block; opacity: .85; transition: opacity .2s ease; }
.site-footer__livro:hover { opacity: 1; }
.site-footer__livro img { height: 48px; width: auto; }
.site-footer__mark {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(72px, 21vw, 300px); line-height: 0.76; letter-spacing: -0.065em;
  color: var(--ink-2); white-space: nowrap;
  margin-left: -0.04em; padding-top: 24px;
  user-select: none;
}

/* ==========================================================================
   BARRA FIXA MOBILE
   ========================================================================== */
.callbar {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: rgba(14, 17, 20, .96);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--line-dark);
  gap: 10px;
}
.callbar .btn { flex: 1 1 0; height: 54px; padding-inline: 12px; gap: 8px; font-size: 15px; line-height: 1.15; text-align: center; }
/* Botão de ligar: "Ligue" pequeno em cima e o número inteiro por baixo, sem
   partir; fica um pouco mais largo do que o "Pedir orçamento online" */
.callbar .callbar__ligar { flex-grow: 1.2; padding-inline: 10px; }
.callbar__texto { display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
.callbar__texto span { font-size: 12px; font-weight: 500; }
.callbar__texto strong { font-size: clamp(15px, 4.4vw, 17px); font-weight: 700; white-space: nowrap; letter-spacing: -0.01em; }
/* Telemóveis muito estreitos: "Pedir orçamento online" em duas linhas, não três */
@media (max-width: 359px) { .field-grid { grid-template-columns: 1fr; } }
@media (max-width: 359px) { .callbar .btn--ghost { font-size: 13.5px; padding-inline: 8px; } }
.callbar .btn--ghost { background: var(--ink-2); }

/* ==========================================================================
   BREAKPOINTS
   ========================================================================== */
/* Cabeçalho: o menu tem 6 ligações e só cabe com folga a partir de 1440px.
   Abaixo disso fica mais compacto; abaixo de 1300px sai o telefone (está no
   hero e nos contactos); abaixo de 1181px as ligações passam para o menu do
   botão, e o pedido de orçamento continua à vista. */
@media (max-width: 1439px) {
  .nav { gap: 24px; font-size: 14px; }
  .header-actions { gap: 18px; }
}
@media (max-width: 1299px) {
  .nav ~ .header-actions .header-phone { display: none; }
}
@media (max-width: 1180px) {
  .nav { display: none; }
  .nav-toggle { display: flex; }
  .header-actions { margin-left: auto; }
  .nav ~ .header-actions .header-phone { display: inline; }
}

@media (max-width: 1100px) {
  /* Perguntas frequentes empilhadas, sem o título preso */
  .faq { grid-template-columns: minmax(0, 1fr); }
  .faq__intro { position: static; }
  .indicadores__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding-top: 20px; }


  .business__head { grid-template-columns: 1fr; align-items: start; }
  .business__head .btn { justify-self: start; }

  .zones__grid { grid-template-columns: 1fr; }
  .business__cards { grid-template-columns: 1fr 1fr; }
  .card:last-child { grid-column: 1 / -1; min-height: 0; }

}

@media (max-width: 900px) {
  :root { --altura-topo: 72px; }
  .site-header__logo img { height: 36px; }
  .nav, .header-actions { display: none; }
  .nav-toggle { display: flex; }
  .mobile-menu[data-open='true'] { display: block; }

  /* A barra fixa substitui os botões do hero (ver home-mobile.html) */
  .hero__cta, .hero__nota { display: none; }
  .page-hero h1 { margin-bottom: 0; }   /* sem os botões (estão na barra fixa), não precisa do espaço por baixo */
  .callbar { display: flex; }
  /* Espaço para a barra fixa no fundo do rodapé (preto), não no body (claro):
     assim não aparece uma faixa clara entre o rodapé e a barra */
  .site-footer { padding-bottom: calc(92px + env(safe-area-inset-bottom)); }


  .gallery__grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 220px; }
  .shot--big { grid-column: 1 / -1; grid-row: span 1; }

  .contact__grid { grid-template-columns: 1fr; }
  .site-footer__cols { grid-template-columns: 1fr 1fr; padding-top: 48px; }
  .site-footer__brand { grid-column: 1 / -1; }
}

/* Botões sozinhos na sua linha ocupam a largura toda. Telemóvel e tablet
   (até 1100px): "Pedir proposta" e "Ver todos os projetos" estão sempre
   sozinhos. Entre 901 e 1100px o horário não cabe ao
   lado de "Pedir orçamento online" e passa para baixo. No telemóvel juntam-se
   os que no tablet ainda têm algo ao lado ("Ligue" e a nota, a página 404). */
@media (max-width: 1100px) {
  .business__head .btn, .antes-depois__todos { width: 100%; }
  .business__head .btn { justify-self: stretch; }
}
@media (max-width: 640px) {
  .erro__acoes .btn { width: 100%; }

  /* Serviços na página inicial: só 01–04 e o "Ver todos" */
  .service--extra, .so-largo { display: none; }
  .so-telemovel { display: inline; }
  .clients { flex-direction: column; align-items: stretch; gap: 14px; padding: 14px 16px 16px; }
  .clients__label { padding: 0 0 12px; border-right: 0; border-bottom: 1px solid var(--line-dark); }
  .clients .clients__track { flex: none; width: 100%; }   /* em coluna, flex-basis 0 com overflow: hidden deixava a faixa com 0px de altura */
  .clients__list { font-size: 16px; }
  .clients__list span::after { margin: 0 20px; }

  /* Sobreposto, o cartão taparia metade da fotografia: passa para baixo dela */
  .cutaway__card,
  .cutaway__frame[data-lado='esquerda'] .cutaway__card {
    position: static; width: auto;
    margin: 12px var(--gutter) 0;
  }

  .services__list { grid-template-columns: 1fr; }


  .zones__list { grid-template-columns: 1fr 1fr; }
  /* Sempre que a lista tem duas colunas (telemóvel e portáteis de 1101–1365px),
     o último concelho (Pedrógão Grande) ficaria sozinho na última linha: passa
     para a 1.ª linha, ao lado de Leiria. Em três colunas fica no fim. */
  .zones__list li:last-child { grid-row: 1; grid-column: 2; }

  .business__cards { grid-template-columns: 1fr; }
  .card { min-height: 0; }

  .gallery__grid { grid-template-columns: 1fr; grid-auto-rows: 240px; }
  .rating { width: 100%; }

  .field-grid { gap: 10px 8px; }
  .field input, .field select { padding-inline: 12px; }

  .site-footer__cols { grid-template-columns: 1fr; gap: 28px; }
  .site-footer__legal { flex-direction: column; }
}

/* ==========================================================================
   MOVIMENTO
   Tudo em CSS nativo: sem biblioteca, sem build, sem JS. Os estados iniciais
   escondidos vivem dentro de @supports/@media, para que um browser sem suporte
   mostre o conteúdo normalmente em vez de uma página em branco.
   ========================================================================== */

/* ---------- Entrada do hero, ao carregar ---------- */
@media (prefers-reduced-motion: no-preference) {
  @keyframes surge {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: none; }
  }
  /* O título (.hero__display) não entra: é o maior elemento do ecrã (LCP)
     e, a começar invisível, atrasava-o ~3 s no Lighthouse (77 → 92). */
  .hero__kicker,
  .hero__lede,
  .hero__cta,
  .hero__nota,
  .hero__art {
    animation: surge .8s cubic-bezier(.22, .61, .36, 1) backwards;
  }
  .hero__kicker  { animation-delay: .05s; }
  .hero__art     { animation-delay: .22s; }
  .hero__lede    { animation-delay: .28s; }
  .hero__cta     { animation-delay: .36s; }
  .hero__nota    { animation-delay: .40s; }

  /* Halo dos marcadores do alçado: chama o olho para a camada técnica.
     transform-box: fill-box faz o scale rodar sobre o centro de cada círculo. */
  @keyframes halo {
    0%   { transform: scale(.5);  opacity: .5; }
    70%  { transform: scale(1.1); opacity: 0; }
    100% { transform: scale(1.1); opacity: 0; }
  }
  .cutaway__pin::before { animation: halo 3.6s ease-out infinite; }
  .cutaway__pin:nth-of-type(1)::before { animation-delay: 0s; }
  .cutaway__pin:nth-of-type(2)::before { animation-delay: .6s; }
  .cutaway__pin:nth-of-type(3)::before { animation-delay: 1.2s; }
  .cutaway__pin:nth-of-type(4)::before { animation-delay: 1.8s; }
  .cutaway__pin:nth-of-type(5)::before { animation-delay: 2.4s; }
  .cutaway__pin:nth-of-type(6)::before { animation-delay: 3s; }

  /* Marquee dos clientes. A segunda cópia da lista fecha o ciclo. */
  @keyframes desliza { to { transform: translateX(-100%); } }
  .clients__list { animation: desliza 80s linear infinite; }   /* 18 nomes: ~80s para a mesma velocidade de antes */
  .clients__track:hover .clients__list,
  .clients__track:focus-within .clients__list { animation-play-state: paused; }
}

/* max-width/width travam a faixa: em coluna (mobile) o flex governa a altura,
   não a largura, e sem isto as duas listas nowrap esticam a página. */
.clients__track {
  display: flex; gap: 0; overflow: hidden;
  flex: 1 1 0; min-width: 0; max-width: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 56px, #000 calc(100% - 56px), transparent);
          mask-image: linear-gradient(90deg, transparent, #000 56px, #000 calc(100% - 56px), transparent);
}
.clients__track .clients__list { flex-wrap: nowrap; flex-shrink: 0; }

/* ---------- Revelação ao entrar no ecrã ----------
   Com a classe "com-movimento" no <html> (posta no <head>), o que tem
   data-revela começa invisível e o assets/js/movimento.js junta-lhe
   "is-visivel" quando entra no ecrã: sobe 28px e aparece. Nos grupos
   (data-revela="filhos") os filhos entram um a um, --escalonamento entre
   cada (--i é a posição, escrita pelo JS). Mexe-se em "translate", não em
   "transform", para não estragar o hover dos cartões. */
@keyframes revela {
  from { opacity: 0; translate: 0 28px; }
  to   { opacity: 1; translate: none; }
}
.com-movimento [data-revela=""]:not(.is-visivel),
.com-movimento [data-revela="filhos"]:not(.is-visivel) > * { opacity: 0; }
.com-movimento [data-revela=""].is-visivel { animation: revela .9s var(--saida) both; }
.com-movimento [data-revela="filhos"].is-visivel > * {
  animation: revela .9s var(--saida) both;
  animation-delay: calc(var(--i, 0) * var(--escalonamento, 80ms));
}
@media print {
  .com-movimento [data-revela], .com-movimento [data-revela] > * { opacity: 1 !important; animation: none !important; }
}

/* Como funciona: as setas entre os passos aparecem depois das caixas e as
   ondas da caixa do telefone pulsam devagar */
@keyframes seta-entra { from { opacity: 0; scale: .4; } }
.com-movimento .percurso__passos.is-visivel .percurso__seta {
  animation: seta-entra .6s var(--saida) both;
  animation-delay: calc(var(--i, 0) * var(--escalonamento, 80ms) + .5s);
}
@keyframes onda-chamada { 0%, 100% { opacity: .35; scale: .94; } 50% { opacity: 1; scale: 1; } }
.com-movimento :is(.percurso__chamada, .card)::before { animation: onda-chamada 2.8s ease-in-out infinite; }
.com-movimento :is(.percurso__chamada, .card)::after { animation: onda-chamada 2.8s ease-in-out .5s infinite; }
.com-movimento .card:nth-child(2)::before, .com-movimento .card:nth-child(2)::after { animation-delay: .9s; }
.com-movimento .card:nth-child(3)::before, .com-movimento .card:nth-child(3)::after { animation-delay: 1.4s; }

/* Mapa: os concelhos acendem um a um, depois os pontos e os nomes */
@keyframes aparece { from { opacity: 0; } }
.com-movimento .zones__map.is-visivel .mapa__concelhos path {
  animation: aparece .6s ease both;
  animation-delay: calc(var(--i, 0) * 35ms + 150ms);
}
.com-movimento .zones__map.is-visivel :is(.mapa__pontos, .mapa__ponto--sede, .mapa__nomes) { animation: aparece .6s ease .8s both; }

/* Antes e depois: ao entrar no ecrã, a barra de cada foto vai à esquerda e à
   direita e volta ao meio, para se perceber que se arrasta. Pára assim que a
   pessoa lhe mexe (.mexido, do JS). O --pos é registado para poder animar. */
@property --pos { syntax: '<percentage>'; inherits: true; initial-value: 50%; }
@keyframes espreita {
  0%, 100% { --pos: 50%; }
  35% { --pos: 30%; }
  70% { --pos: 68%; }
}
.com-movimento .antes-depois__grid.is-visivel .compara__quadro:not(.mexido) {
  animation: espreita 1.8s cubic-bezier(.45, 0, .25, 1);
  animation-delay: calc(var(--i, 0) * 220ms + 700ms);
}

/* ---------- Estados interativos ---------- */
/* Serviços: a seta "↗" roda para "→" com o rato ou o foco */
.service__arrow svg { transition: transform .45s var(--saida); }
.service:is(:hover, :focus-visible) .service__arrow svg { transform: rotate(45deg); }


/* Comparador: a pega cresce com o rato em cima */
.compara__pega { transition: scale .35s var(--saida); }
.compara__quadro:hover .compara__pega { scale: 1.12; }

/* Mapa e lista das zonas: o concelho apontado acende nos dois (JS). Os
   pontos e os nomes não apanham o rato, para ele chegar aos concelhos. */
.mapa__pontos, .mapa__nomes, .mapa__halo, .mapa__ponto--sede { pointer-events: none; }
.mapa__concelhos path { transition: fill .25s ease; }
.mapa__concelhos path.is-realce { fill: #3A434B; }
.mapa__concelhos .mapa__sede.is-realce { fill: #85502F; }
.mapa__pontos circle { transform-box: fill-box; transform-origin: center; transition: fill .2s ease, scale .35s var(--saida); }
.mapa__pontos circle.is-realce { fill: var(--accent); scale: 1.7; }
.mapa__nome { transition: fill .2s ease; }
.mapa__nome.is-realce { fill: var(--white); font-weight: 600; stroke: #3A434B; }
.zones__list a { transition: color .2s ease; }
.zones__list a.is-realce { color: var(--paper); text-decoration: underline; text-underline-offset: 3px; }

/* Concelho escolhido (clique ou toque no mapa): fica aceso, com um contorno
   no laranja do site (--accent) que segue os limites e se desenha à volta.
   O contorno é uma cópia do traçado numa camada por cima dos concelhos, para
   não ficar tapado pelos vizinhos. Sem o retângulo de toque do browser. */
.zones__map { -webkit-tap-highlight-color: transparent; }
.mapa__concelhos path { cursor: pointer; }
.mapa__concelhos path:focus { outline: none; }
.mapa__concelhos path.is-escolhido { fill: #3A434B; }
.mapa__concelhos .mapa__sede.is-escolhido { fill: #85502F; }
.mapa__contorno path {
  fill: none; stroke: var(--accent); stroke-width: 3; stroke-linejoin: round;
  pointer-events: none;
}
.mapa__contorno path:not([d]) { display: none; }
@keyframes contorna { from { stroke-dashoffset: 1; } }
.mapa__contorno path.desenha { stroke-dasharray: 1; animation: contorna .8s var(--saida) both; }
.mapa__pontos circle.is-escolhido { fill: var(--accent); scale: 1.7; }
.mapa__nome.is-escolhido { fill: var(--white); font-weight: 600; stroke: #3A434B; }
.zones__list a.is-escolhido { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* Leiria, a sede: o halo pulsa devagar */
@keyframes pulsa {
  from { scale: .6; opacity: .9; }
  to   { scale: 2.1; opacity: 0; }
}
.mapa__halo { transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .mapa__halo { animation: pulsa 2.6s cubic-bezier(.22, .61, .36, 1) infinite; }
}

.shot img { transition: transform .7s cubic-bezier(.22, .61, .36, 1); }
.shot:hover img { transform: scale(1.05); }

.card, .card__num, .card p { transition: transform .3s cubic-bezier(.22, .61, .36, 1), color .2s ease; }
/* Rato em cima: sobe um pouco e as letras passam a branco (sem contorno) */
.card:hover { transform: translateY(-4px); }
.card:hover, .card:hover .card__num, .card:hover p { color: var(--white); }


/* Abertura suave das perguntas (Chrome 131+, Safari 26+; nos restantes abre a seco) */
@supports (interpolate-size: allow-keywords) {
  @media (prefers-reduced-motion: no-preference) {
    :root { interpolate-size: allow-keywords; }
    .faq__item::details-content {
      block-size: 0; overflow: hidden;
      transition: block-size .4s cubic-bezier(.22, .61, .36, 1), content-visibility .4s allow-discrete;
    }
    .faq__item[open]::details-content { block-size: auto; }
  }
}

/* ---------- Movimento reduzido: nada se mexe sozinho ---------- */
@media (prefers-reduced-motion: reduce) {
  .cutaway__pin::before,
  .clients__list { animation: none; }
}

/* ==========================================================================
   BACKOFFICE (o site passou a ler o conteúdo do /adm)
   ========================================================================== */
/* Esclarecimento: os parágrafos antes da frase em destaque vêm de um campo de texto
   rico; o primeiro é a abertura da carta, maior. */
.carta__inicio > p:first-child { font-size: 1.12em; line-height: 1.6; color: var(--ink); }
.carta__inicio p + p { margin-top: 1em; }
.carta__inicio + p { margin-top: 0; }
/* Contactos: a resposta ao envio do pedido, por baixo do botão */
.form__estado { margin: 4px 0 0; padding: 12px 14px; border-radius: 10px; font-size: 14.5px; line-height: 1.45; background: var(--ink-2); color: var(--paper); }
.form__estado[data-tipo="ok"] { background: rgba(61, 220, 132, .14); color: var(--paper); border: 1px solid rgba(61, 220, 132, .5); }
.form__estado[data-tipo="erro"] { background: rgba(243, 116, 33, .12); color: var(--paper); border: 1px solid rgba(243, 116, 33, .55); }
/* Páginas legais: o texto vem do backoffice sem <section>; o traço entre secções vai no <h2> */
.legal__texto > h2:not(:first-child) { margin-top: 32px; padding-top: 32px; border-top: 1px solid var(--line-light-2); }
/* Aviso de cookies: o aspeto é todo das Definições → Cookies & RGPD (estilos inline do
   backoffice). Só uma exceção: até 900px, quando o /adm o põe em baixo, sobe por cima da barra
   fixa do fundo ("Ligue" / "Pedir orçamento") em vez de a tapar. Em cima ou ao centro, nada muda. */
@media (max-width: 900px) {
  #cookieBannerInner[style*="bottom:"] { bottom: calc(88px + env(safe-area-inset-bottom)) !important; z-index: 60 !important; }
}
/* Aviso de cookies antigo ("Este site usa cookies…", biblioteca cookieconsent) que uma etiqueta do
   Google Tag Manager (GTM-54C4TV9) ainda injeta, do tempo do site antigo. O aviso do site é o do
   backoffice; este fica escondido. A correção de fundo é pausar essa etiqueta no GTM. */
.cc-window, .cc-revoke, .cc-banner { display: none !important; }