/* Versicolor® · Contacto (dono: frente versicolor-contacto). Usa os tokens e as peças do base.css.
   Revisão do Hernâni (15-Out-2026, §07 e §08): título, subtítulo e texto dele, as quatro etapas com as perguntas novas
   e as perguntas frequentes à letra; o desenho é o da v2.
   Ideia: o pedido avança como uma casa a acender-se. Quatro réguas de luz marcam os passos; à esquerda escreve-se
   a ficha do projeto do visitante, como a dos nossos projetos; no fim as linhas da ficha acendem-se todas.
   Sem JS: os quatro passos estão visíveis um a seguir ao outro e o formulário envia-se de uma vez. */

/* ------------------------------------------------------------------ secção e grelha
   v2 (DIRECAO-v2 §4.7): no PC tudo começa no primeiro ecrã. A imagem ocupa 4 colunas à esquerda, a sangrar pela
   margem; à direita o título, e por baixo "Ler mais" (e o que acontece a seguir, quando confirmado) ao lado do
   primeiro passo. Ronda 2 (16-Out-2026): "Outros assuntos" e as perguntas passam a uma linha própria por baixo do
   primeiro ecrã (antes subiam para dentro dele e repetiam-se nos dois ecrãs medidos). */
.ct { padding-top: calc(var(--cab) + clamp(20px, 3svh, 36px)); padding-bottom: var(--secao); }
.ct__grelha { row-gap: 0; align-items: start; }
.ct__cabeca { margin-bottom: clamp(24px, 3.4svh, 40px); }
.ct__titulo { font: 300 var(--t-capitulo)/1.02 var(--serif); letter-spacing: -.024em; }
.ct__titulo .l > span { text-wrap: balance; }
.ct__titulo .l + .l > span { color: #CFCAC0; }
.ct__sub { margin-top: clamp(14px, 1.8svh, 20px); font: 300 var(--t-frase)/1.2 var(--serif); letter-spacing: -.012em;
  color: var(--tinta-3); max-width: 24em; text-wrap: balance; }
/* menos texto à vista (15-Out-2026, noite; ronda 2, 16-Out): à vista, o título, o subtítulo e "Ler mais"; os três
   parágrafos do Hernâni abrem no sítio pelo "Ler mais" do site todo (M15 do base.css e do core.js, ler-mais--tudo) */
.ct__apoio { max-width: 27em; font-size: 15px; line-height: 1.6; color: var(--tinta-3); }
.ct__apoio p + p { margin-top: .6em; }
.ct__apoio .ct-rev__lede { color: var(--tinta); }
.sem-quebra { white-space: nowrap; }
.ct__fig { margin: 0; }
.ct-imagem { aspect-ratio: 4 / 5; }
.ct-imagem picture, .ct-imagem img { height: 100%; }

@media (min-width: 1024px) {
  .ct__grelha { grid-template-rows: auto auto 1fr auto; }
  .ct__fig { grid-column: 1 / 5; grid-row: 1 / 4; margin-left: calc(var(--margem) * -1); margin-right: clamp(8px, 1.4vw, 24px); }
  .ct-imagem { aspect-ratio: auto; height: min(calc(100svh - var(--cab) - clamp(20px, 3svh, 36px) - 32px), 820px); }
  .ct__cabeca { grid-column: 5 / 13; grid-row: 1; }
  .ct__lado { grid-column: 5 / 8; grid-row: 2 / 4; padding-right: 8%; }
  .ct__painel { grid-column: 8 / 13; grid-row: 2 / 4; }
  /* a linha de baixo: começa depois da fotografia e do formulário, com o mesmo fio por cima nas duas colunas */
  .ct__perguntas { grid-column: 8 / 13; grid-row: 4; padding-top: clamp(64px, 9svh, 104px); }
  .ct-outros { grid-column: 5 / 8; grid-row: 4; align-self: start; padding: clamp(64px, 9svh, 104px) 8% 0 0; }
}

/* ------------------------------------------------------------------ réguas: os quatro passos */
.ct-regua { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: clamp(22px, 2.2vw, 34px); }
.ct-regua__passo { position: relative; display: flex; align-items: baseline; gap: 10px; width: 100%; min-height: 48px; padding: 18px 0 6px;
  text-align: left; color: var(--tinta-2); cursor: default; }
.ct-regua__luz { position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--linha); overflow: hidden; }
.ct-regua__luz::after { content: ''; position: absolute; inset: 0; background: var(--luz); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 1s var(--ease-io), opacity .6s var(--ease); }
.ct-regua__passo .numeral--pequeno { color: var(--tinta-2); transition: color .6s var(--ease); }
.ct-regua__nome { font: 500 var(--t-rotulo)/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; transition: color .6s var(--ease); }
/* ronda 2 (16-Out-2026, menos texto à vista): em todos os tamanhos só se vê o nome do passo atual, e a régua dele
   estica-se; os outros ficam com o número (o aria-label de cada botão leva o número e o nome) */
.ct-regua { display: flex; gap: 10px; }
.ct-regua > li { flex: 1 1 0; min-width: 0; transition: flex-grow .8s var(--ease-io); }
.ct-regua > li:has([aria-current="step"]) { flex-grow: 2.6; }
.ct-regua.is-completa > li { flex-grow: 1; }
.ct-regua__passo:not([aria-current="step"]) .ct-regua__nome { display: none; }
/* passo feito: a régua fica acesa, mais baixa; pode voltar-se a ele */
.ct-regua__passo[data-estado="feito"] { color: var(--tinta-3); cursor: pointer; }
.ct-regua__passo[data-estado="feito"] .ct-regua__luz::after { transform: scaleX(1); opacity: .5; }
.ct-regua__passo[data-estado="feito"] .numeral--pequeno { color: var(--luz); }
/* passo atual: a régua acende-se por inteiro */
.ct-regua__passo[aria-current="step"] { color: var(--tinta); }
.ct-regua__passo[aria-current="step"] .ct-regua__luz::after { transform: scaleX(1); opacity: 1; }
.ct-regua__passo[aria-current="step"] .numeral--pequeno { color: var(--luz); }
.ct-regua__passo:disabled { cursor: default; }
@media (hover: hover) and (pointer: fine) {
  .ct-regua__passo[data-estado="feito"]:hover { color: var(--tinta); }
  .ct-regua__passo[data-estado="feito"]:hover .ct-regua__luz::after { opacity: 1; }
}
/* tudo enviado: as quatro acesas */
.ct-regua.is-completa .ct-regua__passo .ct-regua__luz::after { transform: scaleX(1); opacity: 1; }
.ct-regua.is-completa .ct-regua__passo { color: var(--tinta-3); cursor: default; }
.ct-regua.is-completa .ct-regua__passo:nth-child(n) .ct-regua__luz::after { transition-delay: calc(var(--i, 0) * 140ms); }

/* ------------------------------------------------------------------ passos */
.ct-form { gap: clamp(64px, 8vw, 112px); }
.ct-passo { display: grid; gap: clamp(22px, 2vw, 30px); align-content: start; }
.ct-passo__pergunta { font: 300 clamp(26px, 2.5vw, 40px)/1.1 var(--serif); letter-spacing: -.016em; text-wrap: balance; outline: none; }
.ct-passo__pergunta:focus-visible { outline: none; }
.ct-passo__n { display: block; margin-bottom: 18px; }
/* nos passos 01, 02 e 04 o título é só o nome do passo, que a régua já mostra: com os passos, fica para os leitores de
   ecrã (e continua a receber o foco); sem JS, os passos aparecem todos e o nome volta a ver-se */
html.js:not(.ct-sem-passos) .ct-passos .ct-passo__pergunta--nome { position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ct-par > .campo { align-content: end; }
.ct-passo .campo__ajuda { margin-top: -4px; }
.ct-escolhas legend { margin-bottom: 14px; }
.ct-escolhas__ajuda { font: 400 14px/1.45 var(--sans); letter-spacing: 0; text-transform: none; color: var(--tinta-2); }
.ct-campo-mensagem textarea { min-height: 128px; }
.ct-passo__apoio { margin-top: -10px; font-size: 15px; line-height: 1.55; color: var(--tinta-3); max-width: 34em; }
/* fotografias ou planta: o campo nativo fica por baixo do botão (teclado e leitores de ecrã continuam a chegar-lhe) */
.ct-ficheiros__botao { position: relative; display: inline-flex; align-items: center; justify-self: start; min-height: 44px;
  padding: 0 18px; border: 1px solid var(--linha-forte); border-radius: 999px; font: 500 13px/1 var(--sans);
  letter-spacing: .04em; color: var(--tinta); cursor: pointer; transition: border-color var(--t-curto) var(--ease); }
.ct-ficheiros__botao input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 0; }
.ct-ficheiros__botao:focus-within { outline: 2px solid var(--acento); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .ct-ficheiros__botao:hover { border-color: var(--acento); } }
.ct-ficheiros__lista { margin-top: -2px; overflow-wrap: anywhere; }
.ct-ficheiros__lista.is-cheia { color: var(--tinta-3); }
.ct-meio-ajuda { margin-top: -14px; }
.ct-par { display: grid; gap: clamp(22px, 2vw, 30px) var(--calha); align-items: start; }
@media (min-width: 1024px) { .ct-par { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* área e estado: lado a lado, com os campos alinhados pelo fio (o rótulo mais comprido sobe); abaixo de 600 px o
   rótulo "Área aproximada (m², opcional)" já não cabe numa linha e os dois ficam um por baixo do outro */
.ct-par--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; }
@media (max-width: 599px) { .ct-par--2 { grid-template-columns: minmax(0, 1fr); } }
/* o erro do consentimento fica por baixo do texto e não na coluna da caixa */
.caixa > .campo__erro { grid-column: 2; margin-top: -6px; }
.ct-passo__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: 4px; }
.ct-voltar { min-height: 44px; padding: 0 2px; font: 500 13px/1 var(--sans); letter-spacing: .04em; color: var(--tinta-2);
  background: linear-gradient(var(--linha-forte), var(--linha-forte)) 0 calc(100% - 12px) / 100% 1px no-repeat;
  transition: color var(--t-curto) var(--ease); }
@media (hover: hover) and (pointer: fine) { .ct-voltar:hover { color: var(--tinta); } }
/* os passos, as réguas e os botões de passo só existem com JS. O html.js põe-se no <head>, antes do primeiro desenho:
   a página abre já como fica depois do contacto.js (só o primeiro passo, com a régua por cima), sem esperar por ele.
   Antes, os quatro passos apareciam inteiros e encolhiam meio segundo depois, e "Outros assuntos" e as perguntas
   subiam para dentro do ecrã (CLS de 0,15 no PC). Sem JS, ou se o contacto.js não chegar (.ct-sem-passos, posto pelo
   contacto.html aos 6 s), o formulário aparece inteiro. */
.ct-seguinte, .ct-voltar, .ct-recomecar { display: none; }
html.sem-js .ct-regua, html.ct-sem-passos .ct-regua { display: none; }
html.js:not(.ct-sem-passos) .ct-form:not(.ct-passos) .ct-passo:not([data-passo="1"]) { display: none; }
html.js:not(.ct-sem-passos) .ct-form .ct-seguinte { display: inline-flex; }
html.js:not(.ct-sem-passos) .ct-form .ct-voltar, html.js:not(.ct-sem-passos) .ct-form .ct-recomecar { display: inline-block; }
html.js:not(.ct-sem-passos) .ct-form .ct-passo__n { display: none; }
/* sem JS: um fio entre passos para os separar */
.ct-form:not(.ct-passos) .ct-passo + .ct-passo { padding-top: clamp(40px, 5vw, 64px); border-top: 1px solid var(--linha); }
/* a troca de passo (15-Out-2026, noite): o passo que sai desliza um pouco para trás e apaga-se; o que entra chega do
   lado para onde se vai (--ct-dir: 1 a avançar, -1 a voltar), peça a peça; a altura do formulário acompanha a troca
   (contacto.js, Web Animations), para as perguntas e o resto da página não saltarem */
@media (prefers-reduced-motion: no-preference) {
  .ct-passo.a-entrar { animation: ct-aparecer .5s var(--ease) both; }
  .ct-passo.a-entrar > * { animation: ct-passo-entrar .85s var(--ease) both; }
  .ct-passo.a-entrar > :nth-child(2) { animation-delay: .05s; }
  .ct-passo.a-entrar > :nth-child(3) { animation-delay: .1s; }
  .ct-passo.a-entrar > :nth-child(4) { animation-delay: .15s; }
  .ct-passo.a-entrar > :nth-child(5) { animation-delay: .2s; }
  .ct-passo.a-entrar > :nth-child(6) { animation-delay: .25s; }
  .ct-passo.a-entrar > :nth-child(n+7) { animation-delay: .3s; }
  .ct-passo.a-sair { animation: ct-passo-sair .3s var(--ease-io) both; }
}
@keyframes ct-entrar { from { opacity: 0; transform: translate3d(0, 24px, 0); } to { opacity: 1; transform: none; } }
@keyframes ct-aparecer { from { opacity: 0; } to { opacity: 1; } }
@keyframes ct-passo-entrar { from { opacity: 0; transform: translate3d(calc(var(--ct-dir, 1) * 36px), 0, 0); }
  to { opacity: 1; transform: none; } }
@keyframes ct-passo-sair { from { opacity: 1; transform: none; } to { opacity: 0; transform: translate3d(calc(var(--ct-dir, 1) * -22px), 0, 0); } }

/* ------------------------------------------------------------------ ficha: o projeto do visitante */
.ct-ficha { margin-top: clamp(40px, 5vw, 72px); }
.ct-ficha__titulo { margin-bottom: 18px; }
.ct-ficha__linha { position: relative; display: grid; grid-template-columns: 7.2em minmax(0, 1fr); gap: 16px; padding: 15px 0 16px; }
.ct-ficha__linha dt { color: var(--tinta-2); padding-top: .62em; }
.ct-ficha__linha dd { font: 300 clamp(19px, 1.5vw, 23px)/1.32 var(--serif); letter-spacing: -.006em; color: var(--tinta);
  overflow-wrap: anywhere; text-wrap: pretty; }
.ct-ficha__linha[data-ficha="mensagem"] dd { font-size: clamp(16px, 1.2vw, 18px); line-height: 1.45; font-style: italic; color: var(--tinta-3); }
/* cada linha acende-se quando se escreve e fica a meia luz */
.ct-ficha__fio { position: absolute; top: 0; left: 0; right: 0; background: var(--linha-forte); }
.ct-ficha__fio::after { content: ''; position: absolute; inset: 0; background: var(--luz); opacity: 0; transition: opacity 1.4s var(--ease) .9s; }
.ct-ficha__linha.is-acesa .ct-ficha__fio::after { opacity: 1; transition-delay: 0s; transition-duration: .3s; }
@media (prefers-reduced-motion: no-preference) {
  .ct-ficha__linha.a-escrever .ct-ficha__fio { animation: ct-fio 1s var(--ease-io) both; }
  .ct-ficha__linha.a-escrever dd { animation: ct-entrar .9s var(--ease) .15s both; }
}
@keyframes ct-fio { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* enviado: a casa acende-se, linha a linha */
.ct-ficha.is-completa .ct-ficha__fio::after { opacity: 1; transition: opacity .9s var(--ease); transition-delay: calc(var(--i, 0) * 160ms + .2s); }

/* ------------------------------------------------------------------ confirmação */
.ct-confirmacao { gap: 22px; padding-top: 8px; }
.ct-confirmacao__fio { width: clamp(64px, 8vw, 120px); }
.ct-confirmacao__titulo { font-size: clamp(44px, 5vw, 84px); }
.ct-confirmacao .t-lead { max-width: 30em; }
.ct-recomecar { min-height: 44px; font: 500 14px/1.4 var(--sans); letter-spacing: .02em; color: var(--tinta-3); }
@media (prefers-reduced-motion: no-preference) {
  .ct-form[data-estado="enviado"] .ct-confirmacao__fio { animation: ct-fio 1.1s var(--ease-io) .1s both; }
  .ct-form[data-estado="enviado"] .ct-confirmacao > :not(.ct-confirmacao__fio) { animation: ct-entrar 1s var(--ease) both; }
  .ct-form[data-estado="enviado"] .ct-confirmacao > :nth-child(2) { animation-delay: .25s; }
  .ct-form[data-estado="enviado"] .ct-confirmacao > :nth-child(3) { animation-delay: .35s; }
  .ct-form[data-estado="enviado"] .ct-confirmacao > :nth-child(4) { animation-delay: .5s; }
  .ct-form[data-estado="enviado"] .ct-confirmacao > :nth-child(5) { animation-delay: .6s; }
}
.ct-confirmacao:focus { outline: none; }

/* ------------------------------------------------------------------ outros assuntos */
.ct-outros__fio { margin-bottom: 26px; }
.ct-outros__titulo { margin-bottom: 10px; }
.ct-outros__frase { font-size: 15px; line-height: 1.55; color: var(--tinta-3); margin-bottom: 26px; }
.ct-outros__lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px var(--calha); }
.ct-outros__linha { display: grid; gap: 6px; align-content: start; font-size: 15px; line-height: 1.5; color: var(--tinta); }
.ct-outros__linha--email, .ct-outros__linha--morada { grid-column: 1 / -1; }
.ct-outros__linha a { display: inline-block; justify-self: start; position: relative; }
/* alvo de toque de 44 px sem mudar o desenho */
.ct-outros__linha a::after { content: ''; position: absolute; left: -6px; right: -6px; top: 50%; height: 44px; transform: translateY(-50%); }
.ct-outros__email { font: 300 clamp(22px, 1.9vw, 28px)/1.25 var(--serif); letter-spacing: -.01em; padding-bottom: .12em; }
.ct-outros__custo { display: block; font-size: 12px; line-height: 1.4; color: var(--tinta-2); }
.ct-outros__linha--morada { color: var(--tinta-3); }
/* nesta página os contactos estão aqui, com o custo das chamadas à vista: o rodapé não os repete (ronda 2) */
.ct-pagina .rodape__col--contactos { display: none; }

/* ------------------------------------------------------------------ o que acontece a seguir (só com respostas confirmadas) */
.ct-seguir { margin-top: clamp(24px, 3svh, 36px); }
.ct-seguir__fio { margin-bottom: 14px; }
.ct-seguir__titulo { color: var(--acento); margin-bottom: 10px; }
.ct-seguir__lista { display: grid; gap: 10px; }
.ct-seguir__linha { display: grid; gap: 4px; font-size: 15px; line-height: 1.5; color: var(--tinta-3); }

/* ------------------------------------------------------------------ perguntas (M7, fechadas) */
.ct-perg__titulo { margin-bottom: 12px; }
.ct-perg .mais > summary { font: 300 clamp(19px, 1.5vw, 22px)/1.25 var(--serif); letter-spacing: -.008em; color: var(--tinta); }
.ct-perg .mais__corpo { color: var(--tinta-3); }
.ct-perg .mais__corpo .ligacao { color: var(--tinta); }

/* PC estreito (1024 a 1279): só o nome do passo atual na régua, como no telemóvel, e as escolhas mais justas */
@media (min-width: 1024px) and (max-width: 1279px) {
  /* a imagem estreita para 3 colunas e o formulário ganha uma: as quatro escolhas cabem numa linha */
  .ct__fig { grid-column: 1 / 4; }
  .ct__cabeca { grid-column: 4 / 13; }
  .ct__lado, .ct-outros { grid-column: 4 / 7; }
  .ct__painel, .ct__perguntas { grid-column: 7 / 13; }
  .ct-regua { gap: 8px; }
  .ct-form .escolha span { min-height: 44px; padding: 0 12px; font-size: 14px; }
  .ct-form .escolhas__opcoes { gap: 8px; }
}

/* ------------------------------------------------------------------ telemóvel e tablet: desenhado para o polegar */
@media (max-width: 1023px) {
  .ct { padding-top: calc(var(--cab) + 20px); padding-bottom: 56px; }
  .ct__cabeca { margin-bottom: 18px; }
  .ct__apoio { font-size: 17px; line-height: 1.5; }
  /* "Tem um projeto em mente?" numa linha, como o cliente o marca (11,3 em) */
  .ct__titulo { font-size: clamp(26px, 7.4vw, 56px); }
  .ct__painel { margin-top: 36px; }
  /* a régua do passo atual estica-se para o nome caber; as outras encolhem */
  .ct-regua { gap: 6px; margin-bottom: 30px; }
  .ct-regua__passo { padding-top: 14px; min-height: 44px; }
  .ct-regua__passo[aria-current="step"] { overflow: visible; }
  .ct-regua__passo[aria-current="step"] .ct-regua__nome { overflow: visible; }
  .ct-passo { gap: 26px; }
  .ct-passo__pergunta { font-size: clamp(27px, 7.4vw, 36px); }
  .ct__painel, .ct-outros { max-width: 640px; }
  .escolha span { padding: 0 18px; }
  /* a ficha vira uma linha de resumo por cima dos passos */
  .ct-ficha { margin-top: 26px; }
  .ct-ficha__titulo { margin-bottom: 8px; }
  .ct-ficha__lista { display: flex; flex-wrap: wrap; font-size: 15px; line-height: 1.5; }
  .ct-ficha__linha { display: inline; padding: 0; }
  .ct-ficha__linha dt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .ct-ficha__linha dd { display: inline; font: 400 15px/1.5 var(--sans); letter-spacing: 0; color: var(--tinta-3); }
  .ct-ficha__fio, .ct-ficha__linha[data-ficha="mensagem"] { display: none; }
  /* o separador fica no fim da linha anterior e nunca começa uma linha nova */
  .ct-ficha__linha:not([hidden]):has(~ .ct-ficha__linha:not([hidden]):not([data-ficha="mensagem"])) dd::after { content: '·'; margin: 0 .55em; color: var(--luz); }
  .ct-ficha.is-completa .ct-ficha__linha dd { color: var(--tinta); }
  .ct-outros { margin-top: 48px; }
  .ct-outros__email { font-size: 26px; }
  /* ordem no telemóvel: título, apoio, passos, perguntas, outros assuntos e a imagem no fim, baixa */
  .ct__grelha > * { grid-column: 1 / -1; }
  .ct__cabeca { order: 1; } .ct__lado { order: 2; } .ct__painel { order: 3; } .ct__perguntas { order: 4; margin-top: 56px; }
  .ct-outros { order: 5; } .ct__fig { order: 6; margin: 56px calc(var(--margem) * -1) 0; }
  /* ronda 2: quadrada e a toda a largura (era 16:9 com margens): a página acaba numa fotografia e não em texto; com
     movimento, desliza devagar dentro da moldura (contacto.js) */
  .ct-imagem { aspect-ratio: 1 / 1; }
  .ct-imagem picture { display: block; }
}
/* telemóvel: o botão principal a toda a largura, à mão do polegar */
@media (max-width: 767px) {
  .ct-passo__acoes { flex-direction: column; align-items: stretch; gap: 6px; margin-top: 6px; }
  .ct-passo__acoes .pilula { width: 100%; }
  .ct-voltar { align-self: center; padding: 0 12px; }
}
@media (max-width: 380px) {
  .ct-outros__lista { grid-template-columns: 1fr; }
  .ct-regua__nome { letter-spacing: .12em; }
}

/* a linha da pré-visualização, discreta, por baixo da confirmação */
.ct-confirmacao .form__nota-previa { font: 400 13px/1.5 var(--sans); letter-spacing: .01em; text-transform: none; color: var(--tinta-2); }

/* as respostas das perguntas fechadas não se veem (nem contam como texto à vista); ao fechar, ficam até a caixa recolher */
.ct-perg .mais > .mais__corpo { visibility: hidden; transition: visibility 0s linear .36s; }
.ct-perg .mais[open] > .mais__corpo { visibility: visible; transition-delay: 0s; }

/* a ajuda da localização ("Pelo menos o concelho.") aparece quando se escreve no campo ou quando falta; o lugar fica
   guardado, para nada saltar (ronda 2). Continua ligada ao campo (aria-describedby) e os leitores de ecrã leem-na */
@media (prefers-reduced-motion: no-preference) {
  html.js:not(.ct-sem-passos) #ct-local-ajuda { opacity: 0; transform: translate3d(0, -4px, 0);
    transition: opacity .35s var(--ease), transform .5s var(--ease); }
  html.js:not(.ct-sem-passos) .campo:is(:focus-within, :has([aria-invalid="true"])) > #ct-local-ajuda { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------------ perguntas recolhidas (ronda 2, 16-Out-2026)
   Com JS e movimento permitido, as seis perguntas ficam atrás de uma linha só, "Perguntas frequentes 06 +", que abre
   (e volta a fechar) no sítio, com as perguntas a entrar uma a uma. A linha já se desenha assim no primeiro desenho
   (html.js); o contacto.js passa o título para dentro de um botão sem mudar nada à vista. */
.ct-perg__n, .ct-perg__sinal { display: none; }
.ct-perg__abrir { display: contents; }
@media (prefers-reduced-motion: no-preference) {
  html.js:not(.ct-sem-passos) .ct-perg:not(.is-aberta):not(.a-abrir) > .ct-perg__lista { display: none; }
  html.js:not(.ct-sem-passos) .ct-perg__titulo { margin: 0; border-top: 1px solid var(--linha-forte); color: var(--tinta); }
  html.js:not(.ct-sem-passos) .ct-perg:not(.is-aberta) .ct-perg__titulo { border-bottom: 1px solid var(--linha-forte); }
  /* no telemóvel o fio de "Outros assuntos", logo por baixo, já fecha a linha */
  @media (max-width: 1023px) { html.js:not(.ct-sem-passos) .ct-perg:not(.is-aberta) .ct-perg__titulo { border-bottom: 0; } }
  html.js:not(.ct-sem-passos) .ct-perg__titulo,
  html.js:not(.ct-sem-passos) .ct-perg__abrir { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 64px; }
  html.js:not(.ct-sem-passos) .ct-perg__abrir { padding: 0; text-align: left; font: inherit; letter-spacing: inherit;
    text-transform: inherit; color: inherit; cursor: pointer; }
  html.js:not(.ct-sem-passos) .ct-perg__nome { flex: 1; }
  html.js:not(.ct-sem-passos) .ct-perg__n { display: inline; }
  /* o sinal é o "+" do "Ler mais" (M15, .ler-mais__sinal): o traço de pé deita-se ao abrir e fica o "−" */
  html.js:not(.ct-sem-passos) .ct-perg__sinal { display: block; margin-right: 4px; }
  .ct-perg__abrir:focus-visible { outline: 2px solid var(--acento); outline-offset: 4px; }
  .ct-perg__lista:focus { outline: none; }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  html.js:not(.ct-sem-passos) .ct-perg__abrir { transition: color .3s var(--ease); }
  html.js:not(.ct-sem-passos) .ct-perg__abrir:hover { color: var(--luz); }
}